diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
index e431fd5f7f..643ef13fd0 100644
--- a/.github/workflows/build.yml
+++ b/.github/workflows/build.yml
@@ -50,6 +50,7 @@ jobs:
     permissions:
       actions: read
       security-events: write
+      pull-requests: write
     strategy:
       fail-fast: false
       matrix:
@@ -84,6 +85,60 @@ jobs:
           gradle-version: 9.3.1
           cache-disabled: true
 
+      - name: Check Java formatting (Spotless)
+        if: matrix.jdk-version == 25 && matrix.spring-security == false
+        id: spotless-check
+        run: ./gradlew spotlessCheck
+        continue-on-error: true
+        env:
+          MAVEN_USER: ${{ secrets.MAVEN_USER }}
+          MAVEN_PASSWORD: ${{ secrets.MAVEN_PASSWORD }}
+          MAVEN_PUBLIC_URL: ${{ secrets.MAVEN_PUBLIC_URL }}
+
+      - name: Comment on Java formatting failure
+        if: steps.spotless-check.outcome == 'failure'
+        uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8.0.0
+        with:
+          script: |
+            const marker = '<!-- java-formatting-check -->';
+            const body = [
+              marker,
+              '### Java Formatting Check Failed',
+              '',
+              'Your code has formatting issues. Run the following command to fix them:',
+              '',
+              '```bash',
+              './gradlew spotlessApply',
+              '```',
+              '',
+              'Then commit and push the changes.',
+            ].join('\n');
+            const { data: comments } = await github.rest.issues.listComments({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: context.issue.number,
+            });
+            const existing = comments.find(c => c.body.includes(marker));
+            if (existing) {
+              await github.rest.issues.updateComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                comment_id: existing.id,
+                body,
+              });
+            } else {
+              await github.rest.issues.createComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: context.issue.number,
+                body,
+              });
+            }
+
+      - name: Fail if Java formatting issues found
+        if: steps.spotless-check.outcome == 'failure'
+        run: exit 1
+
       - name: Build with Gradle and spring security ${{ matrix.spring-security }}
         run: ./gradlew build -PnoSpotless
         env:
@@ -187,6 +242,9 @@ jobs:
     if: needs.files-changed.outputs.frontend == 'true'
     needs: files-changed
     runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      pull-requests: write
     steps:
       - name: Harden Runner
         uses: step-security/harden-runner@58077d3c7e43986b6b15fba718e8ea69e387dfcc # v2.15.1
@@ -202,6 +260,52 @@ jobs:
           cache-dependency-path: frontend/package-lock.json
       - name: Install frontend dependencies
         run: cd frontend && npm ci
+      - name: Check TypeScript formatting (Prettier)
+        id: prettier-check
+        run: cd frontend && npm run format:check
+        continue-on-error: true
+      - name: Comment on TypeScript formatting failure
+        if: steps.prettier-check.outcome == 'failure'
+        uses: actions/github-script@ed597411d8f924073f98dfc5c65a23a2325f34cd # v8.0.0
+        with:
+          script: |
+            const marker = '<!-- typescript-formatting-check -->';
+            const body = [
+              marker,
+              '### TypeScript Formatting Check Failed',
+              '',
+              'Your code has formatting issues. Run the following command to fix them:',
+              '',
+              '```bash',
+              'cd frontend && npm run fix',
+              '```',
+              '',
+              'Then commit and push the changes.',
+            ].join('\n');
+            const { data: comments } = await github.rest.issues.listComments({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: context.issue.number,
+            });
+            const existing = comments.find(c => c.body.includes(marker));
+            if (existing) {
+              await github.rest.issues.updateComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                comment_id: existing.id,
+                body,
+              });
+            } else {
+              await github.rest.issues.createComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: context.issue.number,
+                body,
+              });
+            }
+      - name: Fail if TypeScript formatting issues found
+        if: steps.prettier-check.outcome == 'failure'
+        run: exit 1
       - name: Type-check frontend
         run: cd frontend && npm run prep && npm run typecheck:all
       - name: Lint frontend
diff --git a/.github/workflows/pre_commit.yml b/.github/workflows/pre_commit.yml
index 764f748d44..9e4d5d574f 100644
--- a/.github/workflows/pre_commit.yml
+++ b/.github/workflows/pre_commit.yml
@@ -2,7 +2,7 @@ name: Pre-commit
 
 on:
   workflow_dispatch:
-  push:
+  pull_request:
     branches:
       - main
 
@@ -16,9 +16,6 @@ jobs:
       # Prevents sdist builds → no tar extraction
       PIP_ONLY_BINARY: ":all:"
       PIP_DISABLE_PIP_VERSION_CHECK: "1"
-    permissions:
-      contents: write
-      pull-requests: write
     steps:
       - name: Harden Runner
         uses: step-security/harden-runner@58077d3c7e43986b6b15fba718e8ea69e387dfcc # v2.15.1
@@ -31,13 +28,6 @@ jobs:
           fetch-depth: 0
           persist-credentials: false
 
-      - name: Setup GitHub App Bot
-        id: setup-bot
-        uses: ./.github/actions/setup-bot
-        with:
-          app-id: ${{ secrets.GH_APP_ID }}
-          private-key: ${{ secrets.GH_APP_PRIVATE_KEY }}
-
       - name: Set up Python
         uses: actions/setup-python@a309ff8b426b58ec0e2a45f0f869d46889d02405 # v6.2.0
         with:
@@ -57,47 +47,4 @@ jobs:
           pre-commit run gitleaks --all-files -c .pre-commit-config.yaml
           pre-commit run end-of-file-fixer --all-files -c .pre-commit-config.yaml
           pre-commit run trailing-whitespace --all-files -c .pre-commit-config.yaml
-        continue-on-error: true
-
-      - name: Set up JDK 25
-        uses: actions/setup-java@be666c2fcd27ec809703dec50e508c2fdc7f6654 # v5.2.0
-        with:
-          java-version: "25"
-          distribution: "temurin"
-
-      - name: Setup Gradle
-        uses: gradle/actions/setup-gradle@f29f5a9d7b09a7c6b29859002d29d24e1674c884 # v5.0.1
-        with:
-          gradle-version: 9.3.1
-
-      - name: Build with Gradle
-        run: ./gradlew build
-        env:
-          MAVEN_USER: ${{ secrets.MAVEN_USER }}
-          MAVEN_PASSWORD: ${{ secrets.MAVEN_PASSWORD }}
-          MAVEN_PUBLIC_URL: ${{ secrets.MAVEN_PUBLIC_URL }}
-
-      - name: git add
-        run: |
-          git add .
-          git diff --staged --quiet || echo "CHANGES_DETECTED=true" >> $GITHUB_ENV
-
-      - name: Create Pull Request
-        if: env.CHANGES_DETECTED == 'true'
-        uses: peter-evans/create-pull-request@c0f553fe549906ede9cf27b5156039d195d2ece0 # v8.1.0
-        with:
-          token: ${{ steps.setup-bot.outputs.token }}
-          commit-message: ":file_folder: pre-commit"
-          committer: ${{ steps.setup-bot.outputs.committer }}
-          author: ${{ steps.setup-bot.outputs.committer }}
-          signoff: true
-          branch: pre-commit
-          title: "🤖 format everything with pre-commit by ${{ steps.setup-bot.outputs.app-slug }}"
-          body: |
-            Auto-generated by [create-pull-request][1] with **${{ steps.setup-bot.outputs.app-slug }}**
-
-            [1]: https://github.com/peter-evans/create-pull-request
-          draft: false
-          delete-branch: true
-          labels: github-actions
-          sign-commits: true
+          git diff --exit-code
diff --git a/build.gradle b/build.gradle
index 62e92d9484..0721c37baa 100644
--- a/build.gradle
+++ b/build.gradle
@@ -110,11 +110,11 @@ tasks.register('syncAppVersion') {
         [new File(sim1Path), new File(sim2Path)].each { f ->
             if (f.exists()) {
                 def content = f.getText('UTF-8')
-                def matcher = (content =~ /(appVersion:\s*')([^']*)(')/)
+                def matcher = (content =~ /(appVersion:\s*(['"]))(.*?)(\2)/)
                 if (!matcher.find()) {
                     throw new GradleException("Could not locate appVersion in ${f} for synchronization")
                 }
-                def updatedContent = matcher.replaceFirst("${matcher.group(1)}${appVersionStr}${matcher.group(3)}")
+                def updatedContent = matcher.replaceFirst("${matcher.group(1)}${appVersionStr}${matcher.group(4)}")
                 if (content != updatedContent) {
                     f.write(updatedContent, 'UTF-8')
                 }
diff --git a/frontend/.prettierignore b/frontend/.prettierignore
new file mode 100644
index 0000000000..ad5dab21a1
--- /dev/null
+++ b/frontend/.prettierignore
@@ -0,0 +1,10 @@
+dist/
+node_modules/
+public/vendor/
+public/pdfjs*/
+public/js/thirdParty/
+public/css/cookieconsent.css
+*.min.*
+*.md
+*.wxs
+src/output.css
diff --git a/frontend/eslint.config.mjs b/frontend/eslint.config.mjs
index 9bbe913d60..de728c2775 100644
--- a/frontend/eslint.config.mjs
+++ b/frontend/eslint.config.mjs
@@ -1,62 +1,52 @@
 // @ts-check
 
-import eslint from '@eslint/js';
-import globals from 'globals';
-import { defineConfig } from 'eslint/config';
-import tseslint from 'typescript-eslint';
+import eslint from "@eslint/js";
+import globals from "globals";
+import { defineConfig } from "eslint/config";
+import tseslint from "typescript-eslint";
 
-const srcGlobs = [
-  'src/**/*.{js,mjs,jsx,ts,tsx}',
-];
-const nodeGlobs = [
-  'scripts/**/*.{js,ts,mjs}',
-  '*.config.{js,ts,mjs}',
-];
+const srcGlobs = ["src/**/*.{js,mjs,jsx,ts,tsx}"];
+const nodeGlobs = ["scripts/**/*.{js,ts,mjs}", "*.config.{js,ts,mjs}"];
 
 const baseRestrictedImportPatterns = [
-  { regex: '^\\.', message: "Use @app/* imports instead of relative imports." },
-  { regex: '^src/', message: "Use @app/* imports instead of absolute src/ imports." },
+  { regex: "^\\.", message: "Use @app/* imports instead of relative imports." },
+  { regex: "^src/", message: "Use @app/* imports instead of absolute src/ imports." },
 ];
 
 export default defineConfig(
   {
     // Everything that contains 3rd party code that we don't want to lint
-    ignores: [
-      'dist',
-      'node_modules',
-      'public',
-      'src-tauri',
-    ],
+    ignores: ["dist", "node_modules", "public", "src-tauri"],
   },
   eslint.configs.recommended,
   tseslint.configs.recommended,
   {
     rules: {
-      'no-restricted-imports': [
-        'error',
+      "no-restricted-imports": [
+        "error",
         {
           patterns: baseRestrictedImportPatterns,
         },
       ],
-      '@typescript-eslint/no-empty-object-type': [
-        'error',
+      "@typescript-eslint/no-empty-object-type": [
+        "error",
         {
           // Allow empty extending interfaces because there's no real reason not to, and it makes it obvious where to put extra attributes in the future
-          allowInterfaces: 'with-single-extends',
+          allowInterfaces: "with-single-extends",
         },
       ],
-      '@typescript-eslint/no-explicit-any': 'off', // Temporarily disabled until codebase conformant
-      '@typescript-eslint/no-require-imports': 'off', // Temporarily disabled until codebase conformant
-      '@typescript-eslint/no-unused-vars': [
-        'error',
+      "@typescript-eslint/no-explicit-any": "off", // Temporarily disabled until codebase conformant
+      "@typescript-eslint/no-require-imports": "off", // Temporarily disabled until codebase conformant
+      "@typescript-eslint/no-unused-vars": [
+        "error",
         {
-          'args': 'all', // All function args must be used (or explicitly ignored)
-          'argsIgnorePattern': '^_', // Allow unused variables beginning with an underscore
-          'caughtErrors': 'all', // Caught errors must be used (or explicitly ignored)
-          'caughtErrorsIgnorePattern': '^_', // Allow unused variables beginning with an underscore
-          'destructuredArrayIgnorePattern': '^_', // Allow unused variables beginning with an underscore
-          'varsIgnorePattern': '^_', // Allow unused variables beginning with an underscore
-          'ignoreRestSiblings': true, // Allow unused variables when removing attributes from objects (otherwise this requires explicit renaming like `({ x: _x, ...y }) => y`, which is clunky)
+          args: "all", // All function args must be used (or explicitly ignored)
+          argsIgnorePattern: "^_", // Allow unused variables beginning with an underscore
+          caughtErrors: "all", // Caught errors must be used (or explicitly ignored)
+          caughtErrorsIgnorePattern: "^_", // Allow unused variables beginning with an underscore
+          destructuredArrayIgnorePattern: "^_", // Allow unused variables beginning with an underscore
+          varsIgnorePattern: "^_", // Allow unused variables beginning with an underscore
+          ignoreRestSiblings: true, // Allow unused variables when removing attributes from objects (otherwise this requires explicit renaming like `({ x: _x, ...y }) => y`, which is clunky)
         },
       ],
     },
@@ -65,15 +55,15 @@ export default defineConfig(
   // Use the stub/shadow pattern instead: define a stub in src/core/ and override in src/desktop/.
   {
     files: srcGlobs,
-    ignores: ['src/desktop/**'],
+    ignores: ["src/desktop/**"],
     rules: {
-      'no-restricted-imports': [
-        'error',
+      "no-restricted-imports": [
+        "error",
         {
           patterns: [
             ...baseRestrictedImportPatterns,
             {
-              regex: '^@tauri-apps/',
+              regex: "^@tauri-apps/",
               message: "Tauri APIs are desktop-only. Review frontend/DeveloperGuide.md for structure advice.",
             },
           ],
@@ -84,9 +74,9 @@ export default defineConfig(
   // Folders that have been cleaned up and are now conformant - stricter rules enforced here
   {
     files: [
-      'src/proprietary/**/*.{js,mjs,jsx,ts,tsx}',
-      'src/saas/**/*.{js,mjs,jsx,ts,tsx}',
-      'src/prototypes/**/*.{js,mjs,jsx,ts,tsx}',
+      "src/proprietary/**/*.{js,mjs,jsx,ts,tsx}",
+      "src/saas/**/*.{js,mjs,jsx,ts,tsx}",
+      "src/prototypes/**/*.{js,mjs,jsx,ts,tsx}",
     ],
     languageOptions: {
       parserOptions: {
@@ -95,8 +85,8 @@ export default defineConfig(
       },
     },
     rules: {
-      '@typescript-eslint/no-explicit-any': 'error',
-      '@typescript-eslint/no-unnecessary-type-assertion': 'error',
+      "@typescript-eslint/no-explicit-any": "error",
+      "@typescript-eslint/no-unnecessary-type-assertion": "error",
     },
   },
   // Config for browser scripts
@@ -105,8 +95,8 @@ export default defineConfig(
     languageOptions: {
       globals: {
         ...globals.browser,
-      }
-    }
+      },
+    },
   },
   // Config for node scripts
   {
@@ -114,7 +104,7 @@ export default defineConfig(
     languageOptions: {
       globals: {
         ...globals.node,
-      }
-    }
+      },
+    },
   },
 );
diff --git a/frontend/index.html b/frontend/index.html
index c790b8d1ed..465841285d 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en-GB">
   <head>
     <meta charset="UTF-8" />
@@ -6,10 +6,7 @@
     <link rel="icon" href="modern-logo/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="The Free Adobe Acrobat alternative (10M+ Downloads)"
-    />
+    <meta name="description" content="The Free Adobe Acrobat alternative (10M+ Downloads)" />
     <link rel="apple-touch-icon" href="modern-logo/logo192.png" />
     <link rel="manifest" href="manifest.json" />
 
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index dbf6bbd484..d6a59cbed7 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -114,6 +114,7 @@
         "postcss-cli": "^11.0.1",
         "postcss-preset-mantine": "^1.18.0",
         "postcss-simple-vars": "^7.0.1",
+        "prettier": "^3.8.1",
         "puppeteer": "^24.25.0",
         "tsx": "^4.21.0",
         "typescript": "^5.9.2",
@@ -11308,6 +11309,22 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.1.tgz",
+      "integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/pretty-format": {
       "version": "27.5.1",
       "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 93051e2dc7..167fd7181e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -89,8 +89,12 @@
     "dev:saas": "npm run prep:saas && vite --mode saas",
     "dev:desktop": "npm run prep:desktop && vite --mode desktop",
     "dev:prototypes": "npm run prep && vite --mode prototypes",
+    "fix": "npm run format && npm run lint:fix",
+    "format": "prettier --write .",
+    "format:check": "prettier --check .",
     "lint": "npm run lint:eslint && npm run lint:cycles",
     "lint:eslint": "eslint --max-warnings=0",
+    "lint:fix": "eslint --fix",
     "lint:cycles": "dpdm src --circular --no-warning --no-tree --exit-code circular:1",
     "build": "npm run prep && vite build",
     "build:core": "npm run prep && vite build --mode core",
@@ -176,6 +180,7 @@
     "postcss-cli": "^11.0.1",
     "postcss-preset-mantine": "^1.18.0",
     "postcss-simple-vars": "^7.0.1",
+    "prettier": "^3.8.1",
     "puppeteer": "^24.25.0",
     "tsx": "^4.21.0",
     "typescript": "^5.9.2",
diff --git a/frontend/playwright.config.ts b/frontend/playwright.config.ts
index 14eb25f85c..deb6a63977 100644
--- a/frontend/playwright.config.ts
+++ b/frontend/playwright.config.ts
@@ -1,11 +1,11 @@
-import { defineConfig, devices } from '@playwright/test';
+import { defineConfig, devices } from "@playwright/test";
 
 /**
  * @see https://playwright.dev/docs/test-configuration
  */
 export default defineConfig({
-  testDir: './src/core/tests',
-  testMatch: '**/*.spec.ts',
+  testDir: "./src/core/tests",
+  testMatch: "**/*.spec.ts",
   /* Run tests in files in parallel */
   fullyParallel: true,
   /* Fail the build on CI if you accidentally left test.only in the source code. */
@@ -15,34 +15,34 @@ export default defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
+  reporter: "html",
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */
-    baseURL: 'http://localhost:5173',
+    baseURL: "http://localhost:5173",
 
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
-    trace: 'on-first-retry',
+    trace: "on-first-retry",
   },
 
   /* Configure projects for major browsers */
   projects: [
     {
-      name: 'chromium',
-      use: { 
-        ...devices['Desktop Chrome'],
-        viewport: { width: 1920, height: 1080 }
+      name: "chromium",
+      use: {
+        ...devices["Desktop Chrome"],
+        viewport: { width: 1920, height: 1080 },
       },
     },
 
     {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
+      name: "firefox",
+      use: { ...devices["Desktop Firefox"] },
     },
 
     {
-      name: 'webkit',
-      use: { ...devices['Desktop Safari'] },
+      name: "webkit",
+      use: { ...devices["Desktop Safari"] },
     },
 
     /* Test against mobile viewports. */
@@ -68,8 +68,8 @@ export default defineConfig({
 
   /* Run your local dev server before starting the tests */
   webServer: {
-    command: 'npm run dev',
-    url: 'http://localhost:5173',
+    command: "npm run dev",
+    url: "http://localhost:5173",
     reuseExistingServer: !process.env.CI,
   },
-});
\ No newline at end of file
+});
diff --git a/frontend/postcss.config.js b/frontend/postcss.config.js
index 57e730c99a..7b8895cce8 100644
--- a/frontend/postcss.config.js
+++ b/frontend/postcss.config.js
@@ -1,6 +1,3 @@
 module.exports = {
-  plugins: [
-    require('@tailwindcss/postcss'),
-    require('autoprefixer'),
-  ],
+  plugins: [require("@tailwindcss/postcss"), require("autoprefixer")],
 };
diff --git a/frontend/public/css/cookieconsentCustomisation.css b/frontend/public/css/cookieconsentCustomisation.css
index ec360c20be..fd1a8ff355 100644
--- a/frontend/public/css/cookieconsentCustomisation.css
+++ b/frontend/public/css/cookieconsentCustomisation.css
@@ -1,206 +1,205 @@
 /* Light theme variables */
 :root {
-    --cc-bg: #ffffff;
-    --cc-primary-color: #1c1c1c;
-    --cc-secondary-color: #666666;
+  --cc-bg: #ffffff;
+  --cc-primary-color: #1c1c1c;
+  --cc-secondary-color: #666666;
 
-    --cc-btn-primary-bg: #007BFF;
-    --cc-btn-primary-color: #ffffff;
-    --cc-btn-primary-border-color: #007BFF;
-    --cc-btn-primary-hover-bg: #0056b3;
-    --cc-btn-primary-hover-color: #ffffff;
-    --cc-btn-primary-hover-border-color: #0056b3;
+  --cc-btn-primary-bg: #007bff;
+  --cc-btn-primary-color: #ffffff;
+  --cc-btn-primary-border-color: #007bff;
+  --cc-btn-primary-hover-bg: #0056b3;
+  --cc-btn-primary-hover-color: #ffffff;
+  --cc-btn-primary-hover-border-color: #0056b3;
 
-    --cc-btn-secondary-bg: #f1f3f4;
-    --cc-btn-secondary-color: #1c1c1c;
-    --cc-btn-secondary-border-color: #f1f3f4;
-    --cc-btn-secondary-hover-bg: #007BFF;
-    --cc-btn-secondary-hover-color: #ffffff;
-    --cc-btn-secondary-hover-border-color: #007BFF;
+  --cc-btn-secondary-bg: #f1f3f4;
+  --cc-btn-secondary-color: #1c1c1c;
+  --cc-btn-secondary-border-color: #f1f3f4;
+  --cc-btn-secondary-hover-bg: #007bff;
+  --cc-btn-secondary-hover-color: #ffffff;
+  --cc-btn-secondary-hover-border-color: #007bff;
 
-    --cc-separator-border-color: #e0e0e0;
+  --cc-separator-border-color: #e0e0e0;
 
-    --cc-toggle-on-bg: #007BFF;
-    --cc-toggle-off-bg: #667481;
-    --cc-toggle-on-knob-bg: #ffffff;
-    --cc-toggle-off-knob-bg: #ffffff;
+  --cc-toggle-on-bg: #007bff;
+  --cc-toggle-off-bg: #667481;
+  --cc-toggle-on-knob-bg: #ffffff;
+  --cc-toggle-off-knob-bg: #ffffff;
 
-    --cc-toggle-enabled-icon-color: #ffffff;   
-    --cc-toggle-disabled-icon-color: #ffffff;  
+  --cc-toggle-enabled-icon-color: #ffffff;
+  --cc-toggle-disabled-icon-color: #ffffff;
 
-    --cc-toggle-readonly-bg: #f1f3f4;
-    --cc-toggle-readonly-knob-bg: #79747E;
-    --cc-toggle-readonly-knob-icon-color: #f1f3f4;
+  --cc-toggle-readonly-bg: #f1f3f4;
+  --cc-toggle-readonly-knob-bg: #79747e;
+  --cc-toggle-readonly-knob-icon-color: #f1f3f4;
 
-    --cc-section-category-border: #e0e0e0;
+  --cc-section-category-border: #e0e0e0;
 
-    --cc-cookie-category-block-bg: #f1f3f4;
-    --cc-cookie-category-block-border: #f1f3f4; 
-    --cc-cookie-category-block-hover-bg: #e9eff4;
-    --cc-cookie-category-block-hover-border: #e9eff4;
-    
-    --cc-cookie-category-expanded-block-bg: #f1f3f4;
-    --cc-cookie-category-expanded-block-hover-bg: #e9eff4;
+  --cc-cookie-category-block-bg: #f1f3f4;
+  --cc-cookie-category-block-border: #f1f3f4;
+  --cc-cookie-category-block-hover-bg: #e9eff4;
+  --cc-cookie-category-block-hover-border: #e9eff4;
 
-    --cc-footer-bg: #ffffff;
-    --cc-footer-color: #1c1c1c;
-    --cc-footer-border-color: #ffffff; 
+  --cc-cookie-category-expanded-block-bg: #f1f3f4;
+  --cc-cookie-category-expanded-block-hover-bg: #e9eff4;
+
+  --cc-footer-bg: #ffffff;
+  --cc-footer-color: #1c1c1c;
+  --cc-footer-border-color: #ffffff;
 }
 
 /* Dark theme variables */
-.cc--darkmode{
-    --cc-bg: #2d2d2d;
-    --cc-primary-color: #e5e5e5;
-    --cc-secondary-color: #b0b0b0;
+.cc--darkmode {
+  --cc-bg: #2d2d2d;
+  --cc-primary-color: #e5e5e5;
+  --cc-secondary-color: #b0b0b0;
 
-    --cc-btn-primary-bg: #4dabf7;
-    --cc-btn-primary-color: #ffffff;
-    --cc-btn-primary-border-color: #4dabf7;
-    --cc-btn-primary-hover-bg: #3d3d3d;
-    --cc-btn-primary-hover-color: #ffffff;
-    --cc-btn-primary-hover-border-color: #3d3d3d;
+  --cc-btn-primary-bg: #4dabf7;
+  --cc-btn-primary-color: #ffffff;
+  --cc-btn-primary-border-color: #4dabf7;
+  --cc-btn-primary-hover-bg: #3d3d3d;
+  --cc-btn-primary-hover-color: #ffffff;
+  --cc-btn-primary-hover-border-color: #3d3d3d;
 
-    --cc-btn-secondary-bg: #3d3d3d;
-    --cc-btn-secondary-color: #ffffff;
-    --cc-btn-secondary-border-color: #3d3d3d;
-    --cc-btn-secondary-hover-bg: #4dabf7;
-    --cc-btn-secondary-hover-color: #ffffff;
-    --cc-btn-secondary-hover-border-color: #4dabf7;
+  --cc-btn-secondary-bg: #3d3d3d;
+  --cc-btn-secondary-color: #ffffff;
+  --cc-btn-secondary-border-color: #3d3d3d;
+  --cc-btn-secondary-hover-bg: #4dabf7;
+  --cc-btn-secondary-hover-color: #ffffff;
+  --cc-btn-secondary-hover-border-color: #4dabf7;
 
-    --cc-separator-border-color: #555555;
+  --cc-separator-border-color: #555555;
 
-    --cc-toggle-on-bg: #4dabf7;
-    --cc-toggle-off-bg: #667481;
-    --cc-toggle-on-knob-bg: #2d2d2d;
-    --cc-toggle-off-knob-bg: #2d2d2d;
+  --cc-toggle-on-bg: #4dabf7;
+  --cc-toggle-off-bg: #667481;
+  --cc-toggle-on-knob-bg: #2d2d2d;
+  --cc-toggle-off-knob-bg: #2d2d2d;
 
-    --cc-toggle-enabled-icon-color: #2d2d2d;   
-    --cc-toggle-disabled-icon-color: #2d2d2d;  
+  --cc-toggle-enabled-icon-color: #2d2d2d;
+  --cc-toggle-disabled-icon-color: #2d2d2d;
 
-    --cc-toggle-readonly-bg: #555555;
-    --cc-toggle-readonly-knob-bg: #8e8e8e;
-    --cc-toggle-readonly-knob-icon-color: #555555;
+  --cc-toggle-readonly-bg: #555555;
+  --cc-toggle-readonly-knob-bg: #8e8e8e;
+  --cc-toggle-readonly-knob-icon-color: #555555;
 
-    --cc-section-category-border: #555555;
+  --cc-section-category-border: #555555;
 
-    --cc-cookie-category-block-bg: #3d3d3d;
-    --cc-cookie-category-block-border: #3d3d3d; 
-    --cc-cookie-category-block-hover-bg: #4d4d4d;
-    --cc-cookie-category-block-hover-border: #4d4d4d;
-    
-    --cc-cookie-category-expanded-block-bg: #3d3d3d;
-    --cc-cookie-category-expanded-block-hover-bg: #4d4d4d;
+  --cc-cookie-category-block-bg: #3d3d3d;
+  --cc-cookie-category-block-border: #3d3d3d;
+  --cc-cookie-category-block-hover-bg: #4d4d4d;
+  --cc-cookie-category-block-hover-border: #4d4d4d;
 
-    --cc-footer-bg: #2d2d2d;
-    --cc-footer-color: #e5e5e5;
-    --cc-footer-border-color: #2d2d2d; 
+  --cc-cookie-category-expanded-block-bg: #3d3d3d;
+  --cc-cookie-category-expanded-block-hover-bg: #4d4d4d;
+
+  --cc-footer-bg: #2d2d2d;
+  --cc-footer-color: #e5e5e5;
+  --cc-footer-border-color: #2d2d2d;
 }
-.cm__body{
-    max-width: 90% !important;
-    flex-direction: row !important;
-    align-items: center !important;
-
+.cm__body {
+  max-width: 90% !important;
+  flex-direction: row !important;
+  align-items: center !important;
 }
 
-.cm__desc{
-    max-width: 70rem !important;
+.cm__desc {
+  max-width: 70rem !important;
 }
 
-.cm__btns{
-    flex-direction: row-reverse !important;
-    gap:10px !important;
-    padding-top: 3.4rem !important;
+.cm__btns {
+  flex-direction: row-reverse !important;
+  gap: 10px !important;
+  padding-top: 3.4rem !important;
 }
 
 @media only screen and (max-width: 1400px) {
-    .cm__body{
-        max-width: 90% !important;
-        flex-direction: column !important;
-        align-items: normal !important;
-    }
+  .cm__body {
+    max-width: 90% !important;
+    flex-direction: column !important;
+    align-items: normal !important;
+  }
 
-    .cm__btns{
-        padding-top: 1rem !important;
-    }
+  .cm__btns {
+    padding-top: 1rem !important;
+  }
 }
 
 /* Toggle visibility fixes */
 #cc-main .section__toggle {
-    opacity: 0 !important; /* Keep invisible but functional */
+  opacity: 0 !important; /* Keep invisible but functional */
 }
 
 #cc-main .toggle__icon {
-    display: flex !important;
-    align-items: center !important;
-    justify-content: flex-start !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: flex-start !important;
 }
 
 #cc-main .toggle__icon-circle {
-    display: block !important;
-    position: absolute !important;
-    transition: transform 0.25s ease !important;
+  display: block !important;
+  position: absolute !important;
+  transition: transform 0.25s ease !important;
 }
 
 #cc-main .toggle__icon-on,
 #cc-main .toggle__icon-off {
-    display: flex !important;
-    align-items: center !important;
-    justify-content: center !important;
-    position: absolute !important;
-    width: 100% !important;
-    height: 100% !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  position: absolute !important;
+  width: 100% !important;
+  height: 100% !important;
 }
 
 /* Ensure toggles are visible in both themes */
 #cc-main .toggle__icon {
-    background: var(--cc-toggle-off-bg) !important;
-    border: 1px solid var(--cc-toggle-off-bg) !important;
+  background: var(--cc-toggle-off-bg) !important;
+  border: 1px solid var(--cc-toggle-off-bg) !important;
 }
 
 #cc-main .section__toggle:checked ~ .toggle__icon {
-    background: var(--cc-toggle-on-bg) !important;
-    border: 1px solid var(--cc-toggle-on-bg) !important;
+  background: var(--cc-toggle-on-bg) !important;
+  border: 1px solid var(--cc-toggle-on-bg) !important;
 }
 
 /* Ensure toggle text is visible */
 #cc-main .pm__section-title {
-    color: var(--cc-primary-color) !important;
+  color: var(--cc-primary-color) !important;
 }
 
 #cc-main .pm__section-desc {
-    color: var(--cc-secondary-color) !important;
+  color: var(--cc-secondary-color) !important;
 }
 
 /* Make sure the modal has proper contrast */
 #cc-main .pm {
-    background: var(--cc-bg) !important;
-    color: var(--cc-primary-color) !important;
+  background: var(--cc-bg) !important;
+  color: var(--cc-primary-color) !important;
 }
 
 /* Lower z-index so cookie banner appears behind onboarding modals */
 #cc-main {
-    z-index: 100 !important;
+  z-index: 100 !important;
 }
 
 /* Ensure consent modal text is visible in both themes */
 #cc-main .cm {
-    background: var(--cc-bg) !important;
-    color: var(--cc-primary-color) !important;
+  background: var(--cc-bg) !important;
+  color: var(--cc-primary-color) !important;
 }
 
 #cc-main .cm__title {
-    color: var(--cc-primary-color) !important;
+  color: var(--cc-primary-color) !important;
 }
 
 #cc-main .cm__desc {
-    color: var(--cc-primary-color) !important;
+  color: var(--cc-primary-color) !important;
 }
 
 #cc-main .cm__footer {
-    color: var(--cc-primary-color) !important;
+  color: var(--cc-primary-color) !important;
 }
 
 #cc-main .cm__footer-links a,
 #cc-main .cm__link {
-    color: var(--cc-primary-color) !important;
-}
\ No newline at end of file
+  color: var(--cc-primary-color) !important;
+}
diff --git a/frontend/public/manifest-classic.json b/frontend/public/manifest-classic.json
index 9b47da7d05..d6e81e7ddf 100644
--- a/frontend/public/manifest-classic.json
+++ b/frontend/public/manifest-classic.json
@@ -23,4 +23,3 @@
   "theme_color": "#000000",
   "background_color": "#ffffff"
 }
-
diff --git a/frontend/scripts/build-provisioner.mjs b/frontend/scripts/build-provisioner.mjs
index 2f974a195f..52240b766e 100644
--- a/frontend/scripts/build-provisioner.mjs
+++ b/frontend/scripts/build-provisioner.mjs
@@ -1,28 +1,24 @@
-import { execFileSync } from 'node:child_process';
-import { existsSync, mkdirSync, copyFileSync } from 'node:fs';
-import { join, resolve } from 'node:path';
+import { execFileSync } from "node:child_process";
+import { existsSync, mkdirSync, copyFileSync } from "node:fs";
+import { join, resolve } from "node:path";
 
-if (process.platform !== 'win32') {
+if (process.platform !== "win32") {
   process.exit(0);
 }
 
 const frontendDir = process.cwd();
-const tauriDir = resolve(frontendDir, 'src-tauri');
-const provisionerManifest = join(tauriDir, 'provisioner', 'Cargo.toml');
+const tauriDir = resolve(frontendDir, "src-tauri");
+const provisionerManifest = join(tauriDir, "provisioner", "Cargo.toml");
 
-execFileSync(
-  'cargo',
-  ['build', '--release', '--manifest-path', provisionerManifest],
-  { stdio: 'inherit' }
-);
+execFileSync("cargo", ["build", "--release", "--manifest-path", provisionerManifest], { stdio: "inherit" });
 
-const provisionerExe = join(tauriDir, 'provisioner', 'target', 'release', 'stirling-provisioner.exe');
+const provisionerExe = join(tauriDir, "provisioner", "target", "release", "stirling-provisioner.exe");
 if (!existsSync(provisionerExe)) {
   throw new Error(`Provisioner binary not found at ${provisionerExe}`);
 }
 
-const wixDir = join(tauriDir, 'windows', 'wix');
+const wixDir = join(tauriDir, "windows", "wix");
 mkdirSync(wixDir, { recursive: true });
 
-const destExe = join(wixDir, 'stirling-provision.exe');
+const destExe = join(wixDir, "stirling-provision.exe");
 copyFileSync(provisionerExe, destExe);
diff --git a/frontend/scripts/generate-icons.js b/frontend/scripts/generate-icons.js
index 96566341c6..d15c53393d 100644
--- a/frontend/scripts/generate-icons.js
+++ b/frontend/scripts/generate-icons.js
@@ -1,11 +1,11 @@
 #!/usr/bin/env node
 
-const { icons } = require('@iconify-json/material-symbols');
-const fs = require('fs');
-const path = require('path');
+const { icons } = require("@iconify-json/material-symbols");
+const fs = require("fs");
+const path = require("path");
 
 // Check for verbose flag
-const isVerbose = process.argv.includes('--verbose') || process.argv.includes('-v');
+const isVerbose = process.argv.includes("--verbose") || process.argv.includes("-v");
 
 // Logging functions
 const info = (message) => console.log(message);
@@ -18,12 +18,12 @@ const debug = (message) => {
 // Function to scan codebase for LocalIcon usage
 function scanForUsedIcons() {
   const usedIcons = new Set();
-  const srcDir = path.join(__dirname, '..', 'src');
+  const srcDir = path.join(__dirname, "..", "src");
 
-  info('🔍 Scanning codebase for LocalIcon usage...');
+  info("🔍 Scanning codebase for LocalIcon usage...");
 
   if (!fs.existsSync(srcDir)) {
-    console.error('❌ Source directory not found:', srcDir);
+    console.error("❌ Source directory not found:", srcDir);
     process.exit(1);
   }
 
@@ -31,19 +31,19 @@ function scanForUsedIcons() {
   function scanDirectory(dir) {
     const files = fs.readdirSync(dir);
 
-    files.forEach(file => {
+    files.forEach((file) => {
       const filePath = path.join(dir, file);
       const stat = fs.statSync(filePath);
 
       if (stat.isDirectory()) {
         scanDirectory(filePath);
-      } else if (file.endsWith('.tsx') || file.endsWith('.ts')) {
-        const content = fs.readFileSync(filePath, 'utf8');
+      } else if (file.endsWith(".tsx") || file.endsWith(".ts")) {
+        const content = fs.readFileSync(filePath, "utf8");
 
         // Match LocalIcon usage: <LocalIcon icon="icon-name" ...>
         const localIconMatches = content.match(/<LocalIcon\s+[^>]*icon="([^"]+)"/g);
         if (localIconMatches) {
-          localIconMatches.forEach(match => {
+          localIconMatches.forEach((match) => {
             const iconMatch = match.match(/icon="([^"]+)"/);
             if (iconMatch) {
               usedIcons.add(iconMatch[1]);
@@ -55,7 +55,7 @@ function scanForUsedIcons() {
         // Match LocalIcon usage: <LocalIcon icon='icon-name' ...>
         const localIconSingleQuoteMatches = content.match(/<LocalIcon\s+[^>]*icon='([^']+)'/g);
         if (localIconSingleQuoteMatches) {
-          localIconSingleQuoteMatches.forEach(match => {
+          localIconSingleQuoteMatches.forEach((match) => {
             const iconMatch = match.match(/icon='([^']+)'/);
             if (iconMatch) {
               usedIcons.add(iconMatch[1]);
@@ -67,7 +67,7 @@ function scanForUsedIcons() {
         // Match old material-symbols-rounded spans: <span className="material-symbols-rounded">icon-name</span>
         const spanMatches = content.match(/<span[^>]*className="[^"]*material-symbols-rounded[^"]*"[^>]*>([^<]+)<\/span>/g);
         if (spanMatches) {
-          spanMatches.forEach(match => {
+          spanMatches.forEach((match) => {
             const iconMatch = match.match(/>([^<]+)<\/span>/);
             if (iconMatch && iconMatch[1].trim()) {
               const iconName = iconMatch[1].trim();
@@ -80,7 +80,7 @@ function scanForUsedIcons() {
         // Match Icon component usage: <Icon icon="material-symbols:icon-name" ...>
         const iconMatches = content.match(/<Icon\s+[^>]*icon="material-symbols:([^"]+)"/g);
         if (iconMatches) {
-          iconMatches.forEach(match => {
+          iconMatches.forEach((match) => {
             const iconMatch = match.match(/icon="material-symbols:([^"]+)"/);
             if (iconMatch) {
               usedIcons.add(iconMatch[1]);
@@ -92,7 +92,7 @@ function scanForUsedIcons() {
         // Match icon config usage: icon: 'icon-name' or icon: "icon-name"
         const iconPropertyMatches = content.match(/icon:\s*(['"])([a-z0-9-]+)\1/g);
         if (iconPropertyMatches) {
-          iconPropertyMatches.forEach(match => {
+          iconPropertyMatches.forEach((match) => {
             const iconMatch = match.match(/icon:\s*(['"])([a-z0-9-]+)\1/);
             if (iconMatch) {
               usedIcons.add(iconMatch[2]);
@@ -118,18 +118,20 @@ async function main() {
   const usedIcons = scanForUsedIcons();
 
   // Check if we need to regenerate (compare with existing)
-  const outputPath = path.join(__dirname, '..', 'src', 'assets', 'material-symbols-icons.json');
+  const outputPath = path.join(__dirname, "..", "src", "assets", "material-symbols-icons.json");
   let needsRegeneration = true;
 
   if (fs.existsSync(outputPath)) {
     try {
-      const existingSet = JSON.parse(fs.readFileSync(outputPath, 'utf8'));
+      const existingSet = JSON.parse(fs.readFileSync(outputPath, "utf8"));
       const existingIcons = Object.keys(existingSet.icons || {}).sort();
       const currentIcons = [...usedIcons].sort();
 
       if (JSON.stringify(existingIcons) === JSON.stringify(currentIcons)) {
         needsRegeneration = false;
-        info(`✅ Icon set already up-to-date (${usedIcons.length} icons, ${Math.round(fs.statSync(outputPath).size / 1024)}KB)`);
+        info(
+          `✅ Icon set already up-to-date (${usedIcons.length} icons, ${Math.round(fs.statSync(outputPath).size / 1024)}KB)`,
+        );
       }
     } catch {
       // If we can't parse existing file, regenerate
@@ -138,34 +140,34 @@ async function main() {
   }
 
   if (!needsRegeneration) {
-    info('🎉 No regeneration needed!');
+    info("🎉 No regeneration needed!");
     process.exit(0);
   }
 
   info(`🔍 Extracting ${usedIcons.length} icons from Material Symbols...`);
 
   // Dynamic import of ES module
-  const { getIcons } = await import('@iconify/utils');
+  const { getIcons } = await import("@iconify/utils");
 
   // Extract only our used icons from the full set
   const extractedIcons = getIcons(icons, usedIcons);
 
   if (!extractedIcons) {
-    console.error('❌ Failed to extract icons');
+    console.error("❌ Failed to extract icons");
     process.exit(1);
   }
 
   // Check for missing icons
   const extractedIconNames = Object.keys(extractedIcons.icons || {});
-  const missingIcons = usedIcons.filter(icon => !extractedIconNames.includes(icon));
+  const missingIcons = usedIcons.filter((icon) => !extractedIconNames.includes(icon));
 
   if (missingIcons.length > 0) {
-    info(`⚠️  Missing icons (${missingIcons.length}): ${missingIcons.join(', ')}`);
-    info('💡 These icons don\'t exist in Material Symbols. Please use available alternatives.');
+    info(`⚠️  Missing icons (${missingIcons.length}): ${missingIcons.join(", ")}`);
+    info("💡 These icons don't exist in Material Symbols. Please use available alternatives.");
   }
 
   // Create output directory
-  const outputDir = path.join(__dirname, '..', 'src', 'assets');
+  const outputDir = path.join(__dirname, "..", "src", "assets");
   if (!fs.existsSync(outputDir)) {
     fs.mkdirSync(outputDir, { recursive: true });
   }
@@ -182,7 +184,7 @@ async function main() {
 // This file is automatically generated by scripts/generate-icons.js
 // Do not edit manually - changes will be overwritten
 
-export type MaterialSymbolIcon = ${usedIcons.map(icon => `'${icon}'`).join(' | ')};
+export type MaterialSymbolIcon = ${usedIcons.map((icon) => `'${icon}'`).join(" | ")};
 
 export interface IconSet {
   prefix: string;
@@ -196,7 +198,7 @@ declare const iconSet: IconSet;
 export default iconSet;
 `;
 
-  const typesPath = path.join(outputDir, 'material-symbols-icons.d.ts');
+  const typesPath = path.join(outputDir, "material-symbols-icons.d.ts");
   fs.writeFileSync(typesPath, typesContent);
 
   info(`📝 Generated types: ${typesPath}`);
@@ -204,7 +206,7 @@ export default iconSet;
 }
 
 // Run the main function
-main().catch(error => {
-  console.error('❌ Script failed:', error);
+main().catch((error) => {
+  console.error("❌ Script failed:", error);
   process.exit(1);
 });
diff --git a/frontend/scripts/generate-licenses.js b/frontend/scripts/generate-licenses.js
index e4b40c0e42..339e208326 100644
--- a/frontend/scripts/generate-licenses.js
+++ b/frontend/scripts/generate-licenses.js
@@ -1,11 +1,11 @@
 #!/usr/bin/env node
 
-const { execSync } = require('node:child_process');
-const { existsSync, mkdirSync, writeFileSync, readFileSync } = require('node:fs');
-const path = require('node:path');
+const { execSync } = require("node:child_process");
+const { existsSync, mkdirSync, writeFileSync, readFileSync } = require("node:fs");
+const path = require("node:path");
 
-const { argv } = require('node:process');
-const inputIdx = argv.indexOf('--input');
+const { argv } = require("node:process");
+const inputIdx = argv.indexOf("--input");
 const INPUT_FILE = inputIdx > -1 ? argv[inputIdx + 1] : null;
 const POSTPROCESS_ONLY = !!INPUT_FILE;
 
@@ -16,408 +16,434 @@ const POSTPROCESS_ONLY = !!INPUT_FILE;
  * This script creates a JSON file similar to the Java backend's 3rdPartyLicenses.json
  */
 
-const OUTPUT_FILE = path.join(__dirname, '..', 'src', 'assets', '3rdPartyLicenses.json');
-const PACKAGE_JSON = path.join(__dirname, '..', 'package.json');
+const OUTPUT_FILE = path.join(__dirname, "..", "src", "assets", "3rdPartyLicenses.json");
+const PACKAGE_JSON = path.join(__dirname, "..", "package.json");
 
 // Ensure the output directory exists
 const outputDir = path.dirname(OUTPUT_FILE);
 if (!existsSync(outputDir)) {
-    mkdirSync(outputDir, { recursive: true });
+  mkdirSync(outputDir, { recursive: true });
 }
 
-console.log('🔍 Generating frontend license report...');
+console.log("🔍 Generating frontend license report...");
 
 try {
-    // Safety guard: don't run this script on fork PRs (workflow setzt PR_IS_FORK)
-    if (process.env.PR_IS_FORK === 'true' && !POSTPROCESS_ONLY) {
-        console.error('Fork PR detected: only --input (postprocess-only) mode is allowed.');
-        process.exit(2);
+  // Safety guard: don't run this script on fork PRs (workflow setzt PR_IS_FORK)
+  if (process.env.PR_IS_FORK === "true" && !POSTPROCESS_ONLY) {
+    console.error("Fork PR detected: only --input (postprocess-only) mode is allowed.");
+    process.exit(2);
+  }
+
+  let licenseData;
+  // Generate license report using pinned license-checker; disable lifecycle scripts
+  if (POSTPROCESS_ONLY) {
+    if (!INPUT_FILE || !existsSync(INPUT_FILE)) {
+      console.error("❌ --input file missing or not found");
+      process.exit(1);
     }
-
-    let licenseData;
-    // Generate license report using pinned license-checker; disable lifecycle scripts
-    if (POSTPROCESS_ONLY) {
-      if (!INPUT_FILE || !existsSync(INPUT_FILE)) {
-        console.error('❌ --input file missing or not found');
-        process.exit(1);
-      }
-      licenseData = JSON.parse(readFileSync(INPUT_FILE, 'utf8'));
-    } else {
-      const licenseReport = execSync(
-          // 'npx --yes license-checker@25.0.1 --production --json',
-          'npx --yes license-report --only=prod --output=json',
-          {
-              encoding: 'utf8',
-              cwd: path.dirname(PACKAGE_JSON),
-              env: { ...process.env, NPM_CONFIG_IGNORE_SCRIPTS: 'true' }
-          }
-      );
-      try {
-          licenseData = JSON.parse(licenseReport);
-      } catch (parseError) {
-          console.error('❌ Failed to parse license data:', parseError.message);
-          console.error('Raw output:', licenseReport.substring(0, 500) + '...');
-          process.exit(1);
-      }
-    }
-
-    if (!Array.isArray(licenseData)) {
-        console.error('❌ Invalid license data structure');
-        process.exit(1);
-    }
-
-    // Convert license-checker format to array
-    const licenseArray = licenseData.map(dep => {
-        let licenseType = dep.licenseType;
-
-        // Handle missing or null licenses
-        if (!licenseType || licenseType === null || licenseType === undefined) {
-            licenseType = 'Unknown';
-        }
-
-        // Handle empty string licenses
-        if (licenseType === '') {
-            licenseType = 'Unknown';
-        }
-
-        // Handle array licenses (rare but possible)
-        if (Array.isArray(licenseType)) {
-            licenseType = licenseType.join(' AND ');
-        }
-
-        // Handle object licenses (fallback)
-        if (typeof licenseType === 'object' && licenseType !== null) {
-            licenseType = 'Unknown';
-        }
-
-        if ( "posthog-js" === dep.name && licenseType.startsWith("SEE LICENSE IN LICENSE")) {
-            licenseType = "SEE LICENSE IN LICENSE https://github.com/PostHog/posthog-js/blob/main/LICENSE";
-        }
-
-        return {
-            name: dep.name,
-            version: dep.installedVersion || dep.definedVersion || dep.remoteVersion || 'unknown',
-            licenseType: licenseType,
-            repository: dep.link,
-            url: dep.link,
-            link: dep.link
-        };
-    });
-
-    // Transform to match Java backend format
-    const transformedData = {
-        dependencies: licenseArray.map(dep => {
-            const licenseType = Array.isArray(dep.licenseType) ? dep.licenseType.join(', ') : (dep.licenseType || 'Unknown');
-            const licenseUrl = dep.link || getLicenseUrl(licenseType);
-
-            return {
-                moduleName: dep.name,
-                moduleUrl: dep.repository || dep.url || `https://www.npmjs.com/package/${dep.name}`,
-                moduleVersion: dep.version,
-                moduleLicense: licenseType,
-                moduleLicenseUrl: licenseUrl
-            };
-        })
-    };
-
-    // Log summary of license types found
-    const licenseSummary = licenseArray.reduce((acc, dep) => {
-        const license = Array.isArray(dep.licenseType) ? dep.licenseType.join(', ') : (dep.licenseType || 'Unknown');
-        acc[license] = (acc[license] || 0) + 1;
-        return acc;
-    }, {});
-
-    console.log('📊 License types found:');
-    Object.entries(licenseSummary).forEach(([license, count]) => {
-        console.log(`   ${license}: ${count} packages`);
-    });
-
-    // Log any complex or unusual license formats for debugging
-    const complexLicenses = licenseArray.filter(dep =>
-        dep.licenseType && (
-            dep.licenseType.includes('AND') ||
-            dep.licenseType.includes('OR') ||
-            dep.licenseType === 'Unknown' ||
-            dep.licenseType.includes('SEE LICENSE')
-        )
+    licenseData = JSON.parse(readFileSync(INPUT_FILE, "utf8"));
+  } else {
+    const licenseReport = execSync(
+      // 'npx --yes license-checker@25.0.1 --production --json',
+      "npx --yes license-report --only=prod --output=json",
+      {
+        encoding: "utf8",
+        cwd: path.dirname(PACKAGE_JSON),
+        env: { ...process.env, NPM_CONFIG_IGNORE_SCRIPTS: "true" },
+      },
     );
-
-    if (complexLicenses.length > 0) {
-        console.log('\n🔍 Complex/Edge case licenses detected:');
-        complexLicenses.forEach(dep => {
-            console.log(`   ${dep.name}@${dep.version}: "${dep.licenseType}"`);
-        });
+    try {
+      licenseData = JSON.parse(licenseReport);
+    } catch (parseError) {
+      console.error("❌ Failed to parse license data:", parseError.message);
+      console.error("Raw output:", licenseReport.substring(0, 500) + "...");
+      process.exit(1);
     }
+  }
 
-    // Check for potentially problematic licenses
-    const problematicLicenses = checkLicenseCompatibility(licenseSummary, licenseArray);
-    if (problematicLicenses.length > 0) {
-        console.log('\n⚠️  License compatibility warnings:');
-        problematicLicenses.forEach(warning => {
-            console.log(`   ${warning.message}`);
-        });
-
-        // Write license warnings to a separate file for CI/CD
-        const warningsFile = path.join(__dirname, '..', 'src', 'assets', 'license-warnings.json');
-        writeFileSync(warningsFile, JSON.stringify({
-            warnings: problematicLicenses,
-            generated: new Date().toISOString()
-        }, null, 2));
-        console.log(`⚠️  License warnings saved to: ${warningsFile}`);
-    } else {
-        console.log('\n✅ All licenses appear to be corporate-friendly');
-    }
-
-    // Write to file
-    writeFileSync(OUTPUT_FILE, JSON.stringify(transformedData, null, 4));
-
-    console.log(`✅ License report generated successfully!`);
-    console.log(`📄 Found ${transformedData.dependencies.length} dependencies`);
-    console.log(`💾 Saved to: ${OUTPUT_FILE}`);
-
-} catch (error) {
-    console.error('❌ Error generating license report:', error.message);
+  if (!Array.isArray(licenseData)) {
+    console.error("❌ Invalid license data structure");
     process.exit(1);
+  }
+
+  // Convert license-checker format to array
+  const licenseArray = licenseData.map((dep) => {
+    let licenseType = dep.licenseType;
+
+    // Handle missing or null licenses
+    if (!licenseType || licenseType === null || licenseType === undefined) {
+      licenseType = "Unknown";
+    }
+
+    // Handle empty string licenses
+    if (licenseType === "") {
+      licenseType = "Unknown";
+    }
+
+    // Handle array licenses (rare but possible)
+    if (Array.isArray(licenseType)) {
+      licenseType = licenseType.join(" AND ");
+    }
+
+    // Handle object licenses (fallback)
+    if (typeof licenseType === "object" && licenseType !== null) {
+      licenseType = "Unknown";
+    }
+
+    if ("posthog-js" === dep.name && licenseType.startsWith("SEE LICENSE IN LICENSE")) {
+      licenseType = "SEE LICENSE IN LICENSE https://github.com/PostHog/posthog-js/blob/main/LICENSE";
+    }
+
+    return {
+      name: dep.name,
+      version: dep.installedVersion || dep.definedVersion || dep.remoteVersion || "unknown",
+      licenseType: licenseType,
+      repository: dep.link,
+      url: dep.link,
+      link: dep.link,
+    };
+  });
+
+  // Transform to match Java backend format
+  const transformedData = {
+    dependencies: licenseArray.map((dep) => {
+      const licenseType = Array.isArray(dep.licenseType) ? dep.licenseType.join(", ") : dep.licenseType || "Unknown";
+      const licenseUrl = dep.link || getLicenseUrl(licenseType);
+
+      return {
+        moduleName: dep.name,
+        moduleUrl: dep.repository || dep.url || `https://www.npmjs.com/package/${dep.name}`,
+        moduleVersion: dep.version,
+        moduleLicense: licenseType,
+        moduleLicenseUrl: licenseUrl,
+      };
+    }),
+  };
+
+  // Log summary of license types found
+  const licenseSummary = licenseArray.reduce((acc, dep) => {
+    const license = Array.isArray(dep.licenseType) ? dep.licenseType.join(", ") : dep.licenseType || "Unknown";
+    acc[license] = (acc[license] || 0) + 1;
+    return acc;
+  }, {});
+
+  console.log("📊 License types found:");
+  Object.entries(licenseSummary).forEach(([license, count]) => {
+    console.log(`   ${license}: ${count} packages`);
+  });
+
+  // Log any complex or unusual license formats for debugging
+  const complexLicenses = licenseArray.filter(
+    (dep) =>
+      dep.licenseType &&
+      (dep.licenseType.includes("AND") ||
+        dep.licenseType.includes("OR") ||
+        dep.licenseType === "Unknown" ||
+        dep.licenseType.includes("SEE LICENSE")),
+  );
+
+  if (complexLicenses.length > 0) {
+    console.log("\n🔍 Complex/Edge case licenses detected:");
+    complexLicenses.forEach((dep) => {
+      console.log(`   ${dep.name}@${dep.version}: "${dep.licenseType}"`);
+    });
+  }
+
+  // Check for potentially problematic licenses
+  const problematicLicenses = checkLicenseCompatibility(licenseSummary, licenseArray);
+  if (problematicLicenses.length > 0) {
+    console.log("\n⚠️  License compatibility warnings:");
+    problematicLicenses.forEach((warning) => {
+      console.log(`   ${warning.message}`);
+    });
+
+    // Write license warnings to a separate file for CI/CD
+    const warningsFile = path.join(__dirname, "..", "src", "assets", "license-warnings.json");
+    writeFileSync(
+      warningsFile,
+      JSON.stringify(
+        {
+          warnings: problematicLicenses,
+          generated: new Date().toISOString(),
+        },
+        null,
+        2,
+      ),
+    );
+    console.log(`⚠️  License warnings saved to: ${warningsFile}`);
+  } else {
+    console.log("\n✅ All licenses appear to be corporate-friendly");
+  }
+
+  // Write to file
+  writeFileSync(OUTPUT_FILE, JSON.stringify(transformedData, null, 2) + "\n");
+
+  console.log(`✅ License report generated successfully!`);
+  console.log(`📄 Found ${transformedData.dependencies.length} dependencies`);
+  console.log(`💾 Saved to: ${OUTPUT_FILE}`);
+} catch (error) {
+  console.error("❌ Error generating license report:", error.message);
+  process.exit(1);
 }
 
 /**
  * Get standard license URLs for common licenses
  */
 function getLicenseUrl(licenseType) {
-    if (!licenseType || licenseType === 'Unknown') return '';
+  if (!licenseType || licenseType === "Unknown") return "";
 
-    const licenseUrls = {
-        'MIT': 'https://opensource.org/licenses/MIT',
-        'MIT*': 'https://opensource.org/licenses/MIT',
-        'Apache-2.0': 'https://www.apache.org/licenses/LICENSE-2.0',
-        'Apache License 2.0': 'https://www.apache.org/licenses/LICENSE-2.0',
-        'BSD-3-Clause': 'https://opensource.org/licenses/BSD-3-Clause',
-        'BSD-2-Clause': 'https://opensource.org/licenses/BSD-2-Clause',
-        'BSD': 'https://opensource.org/licenses/BSD-3-Clause',
-        'GPL-3.0': 'https://www.gnu.org/licenses/gpl-3.0.html',
-        'GPL-2.0': 'https://www.gnu.org/licenses/gpl-2.0.html',
-        'LGPL-2.1': 'https://www.gnu.org/licenses/old-licenses/lgpl-2.1.html',
-        'LGPL-3.0': 'https://www.gnu.org/licenses/lgpl-3.0.html',
-        'ISC': 'https://opensource.org/licenses/ISC',
-        'CC0-1.0': 'https://creativecommons.org/publicdomain/zero/1.0/',
-        'Unlicense': 'https://unlicense.org/',
-        'MPL-2.0': 'https://www.mozilla.org/en-US/MPL/2.0/',
-        'WTFPL': 'http://www.wtfpl.net/',
-        'Zlib': 'https://opensource.org/licenses/Zlib',
-        'Artistic-2.0': 'https://opensource.org/licenses/Artistic-2.0',
-        'EPL-1.0': 'https://www.eclipse.org/legal/epl-v10.html',
-        'EPL-2.0': 'https://www.eclipse.org/legal/epl-2.0/',
-        'CDDL-1.0': 'https://opensource.org/licenses/CDDL-1.0',
-        'Ruby': 'https://www.ruby-lang.org/en/about/license.txt',
-        'Python-2.0': 'https://www.python.org/download/releases/2.0/license/',
-        'Public Domain': 'https://creativecommons.org/publicdomain/zero/1.0/',
-        'UNLICENSED': ''
-    };
+  const licenseUrls = {
+    MIT: "https://opensource.org/licenses/MIT",
+    "MIT*": "https://opensource.org/licenses/MIT",
+    "Apache-2.0": "https://www.apache.org/licenses/LICENSE-2.0",
+    "Apache License 2.0": "https://www.apache.org/licenses/LICENSE-2.0",
+    "BSD-3-Clause": "https://opensource.org/licenses/BSD-3-Clause",
+    "BSD-2-Clause": "https://opensource.org/licenses/BSD-2-Clause",
+    BSD: "https://opensource.org/licenses/BSD-3-Clause",
+    "GPL-3.0": "https://www.gnu.org/licenses/gpl-3.0.html",
+    "GPL-2.0": "https://www.gnu.org/licenses/gpl-2.0.html",
+    "LGPL-2.1": "https://www.gnu.org/licenses/old-licenses/lgpl-2.1.html",
+    "LGPL-3.0": "https://www.gnu.org/licenses/lgpl-3.0.html",
+    ISC: "https://opensource.org/licenses/ISC",
+    "CC0-1.0": "https://creativecommons.org/publicdomain/zero/1.0/",
+    Unlicense: "https://unlicense.org/",
+    "MPL-2.0": "https://www.mozilla.org/en-US/MPL/2.0/",
+    WTFPL: "http://www.wtfpl.net/",
+    Zlib: "https://opensource.org/licenses/Zlib",
+    "Artistic-2.0": "https://opensource.org/licenses/Artistic-2.0",
+    "EPL-1.0": "https://www.eclipse.org/legal/epl-v10.html",
+    "EPL-2.0": "https://www.eclipse.org/legal/epl-2.0/",
+    "CDDL-1.0": "https://opensource.org/licenses/CDDL-1.0",
+    Ruby: "https://www.ruby-lang.org/en/about/license.txt",
+    "Python-2.0": "https://www.python.org/download/releases/2.0/license/",
+    "Public Domain": "https://creativecommons.org/publicdomain/zero/1.0/",
+    UNLICENSED: "",
+  };
 
-    // Try exact match first
-    if (licenseUrls[licenseType]) {
-        return licenseUrls[licenseType];
+  // Try exact match first
+  if (licenseUrls[licenseType]) {
+    return licenseUrls[licenseType];
+  }
+
+  // Try case-insensitive match
+  const lowerType = licenseType.toLowerCase();
+  for (const [key, url] of Object.entries(licenseUrls)) {
+    if (key.toLowerCase() === lowerType) {
+      return url;
     }
+  }
 
-    // Try case-insensitive match
-    const lowerType = licenseType.toLowerCase();
-    for (const [key, url] of Object.entries(licenseUrls)) {
-        if (key.toLowerCase() === lowerType) {
-            return url;
-        }
+  // Handle complex SPDX expressions like "(MIT AND Zlib)" or "(MIT OR CC0-1.0)"
+  if (licenseType.includes("AND") || licenseType.includes("OR")) {
+    // Extract the first license from compound expressions for URL
+    const match = licenseType.match(/\(?\s*([A-Za-z0-9\-.]+)/);
+    if (match && licenseUrls[match[1]]) {
+      return licenseUrls[match[1]];
     }
+  }
 
-    // Handle complex SPDX expressions like "(MIT AND Zlib)" or "(MIT OR CC0-1.0)"
-    if (licenseType.includes('AND') || licenseType.includes('OR')) {
-        // Extract the first license from compound expressions for URL
-        const match = licenseType.match(/\(?\s*([A-Za-z0-9\-.]+)/);
-        if (match && licenseUrls[match[1]]) {
-            return licenseUrls[match[1]];
-        }
-    }
-
-    // For non-standard licenses, return empty string (will use package link if available)
-    return '';
+  // For non-standard licenses, return empty string (will use package link if available)
+  return "";
 }
 
 /**
  * Check for potentially problematic licenses that may not be MIT/corporate compatible
  */
 function checkLicenseCompatibility(licenseSummary, licenseArray) {
-    const warnings = [];
+  const warnings = [];
 
-    // Define problematic license patterns
-    const problematicLicenses = {
-        // Copyleft licenses
-        'GPL-2.0': 'Strong copyleft license - requires derivative works to be GPL',
-        'GPL-3.0': 'Strong copyleft license - requires derivative works to be GPL',
-        'LGPL-2.1': 'Weak copyleft license - may require source disclosure for modifications',
-        'LGPL-3.0': 'Weak copyleft license - may require source disclosure for modifications',
-        'AGPL-3.0': 'Network copyleft license - requires source disclosure for network use',
-        'AGPL-1.0': 'Network copyleft license - requires source disclosure for network use',
+  // Define problematic license patterns
+  const problematicLicenses = {
+    // Copyleft licenses
+    "GPL-2.0": "Strong copyleft license - requires derivative works to be GPL",
+    "GPL-3.0": "Strong copyleft license - requires derivative works to be GPL",
+    "LGPL-2.1": "Weak copyleft license - may require source disclosure for modifications",
+    "LGPL-3.0": "Weak copyleft license - may require source disclosure for modifications",
+    "AGPL-3.0": "Network copyleft license - requires source disclosure for network use",
+    "AGPL-1.0": "Network copyleft license - requires source disclosure for network use",
 
-        // Other potentially problematic licenses
-        'WTFPL': 'Potentially problematic license - legal uncertainty',
-        'CC-BY-SA-4.0': 'ShareAlike license - requires derivative works to use same license',
-        'CC-BY-SA-3.0': 'ShareAlike license - requires derivative works to use same license',
-        'CC-BY-NC-4.0': 'Non-commercial license - prohibits commercial use',
-        'CC-BY-NC-3.0': 'Non-commercial license - prohibits commercial use',
-        'OSL-3.0': 'Copyleft license - requires derivative works to be OSL',
-        'EPL-1.0': 'Weak copyleft license - may require source disclosure',
-        'EPL-2.0': 'Weak copyleft license - may require source disclosure',
-        'CDDL-1.0': 'Weak copyleft license - may require source disclosure',
-        'CDDL-1.1': 'Weak copyleft license - may require source disclosure',
-        'CPL-1.0': 'Weak copyleft license - may require source disclosure',
-        'MPL-1.1': 'Weak copyleft license - may require source disclosure',
-        'EUPL-1.1': 'Copyleft license - requires derivative works to be EUPL',
-        'EUPL-1.2': 'Copyleft license - requires derivative works to be EUPL',
-        'UNLICENSED': 'No license specified - usage rights unclear',
-        'Unknown': 'License not detected - manual review required'
-    };
+    // Other potentially problematic licenses
+    WTFPL: "Potentially problematic license - legal uncertainty",
+    "CC-BY-SA-4.0": "ShareAlike license - requires derivative works to use same license",
+    "CC-BY-SA-3.0": "ShareAlike license - requires derivative works to use same license",
+    "CC-BY-NC-4.0": "Non-commercial license - prohibits commercial use",
+    "CC-BY-NC-3.0": "Non-commercial license - prohibits commercial use",
+    "OSL-3.0": "Copyleft license - requires derivative works to be OSL",
+    "EPL-1.0": "Weak copyleft license - may require source disclosure",
+    "EPL-2.0": "Weak copyleft license - may require source disclosure",
+    "CDDL-1.0": "Weak copyleft license - may require source disclosure",
+    "CDDL-1.1": "Weak copyleft license - may require source disclosure",
+    "CPL-1.0": "Weak copyleft license - may require source disclosure",
+    "MPL-1.1": "Weak copyleft license - may require source disclosure",
+    "EUPL-1.1": "Copyleft license - requires derivative works to be EUPL",
+    "EUPL-1.2": "Copyleft license - requires derivative works to be EUPL",
+    UNLICENSED: "No license specified - usage rights unclear",
+    Unknown: "License not detected - manual review required",
+  };
 
-    // Known good licenses (no warnings needed)
-    const goodLicenses = new Set([
-        'MIT', 'MIT*', 'Apache-2.0', 'Apache License 2.0', 'BSD-2-Clause', 'BSD-3-Clause', 'BSD',
-        'ISC', 'CC0-1.0', 'Public Domain', 'Unlicense', '0BSD', 'BlueOak-1.0.0',
-        'Zlib', 'Artistic-2.0', 'Python-2.0', 'Ruby', 'MPL-2.0', 'CC-BY-4.0',
-        'SEE LICENSE IN https://raw.githubusercontent.com/Stirling-Tools/Stirling-PDF/refs/heads/main/proprietary/LICENSE',
-        'SEE LICENSE IN LICENSE https://github.com/PostHog/posthog-js/blob/main/LICENSE'
-    ]);
+  // Known good licenses (no warnings needed)
+  const goodLicenses = new Set([
+    "MIT",
+    "MIT*",
+    "Apache-2.0",
+    "Apache License 2.0",
+    "BSD-2-Clause",
+    "BSD-3-Clause",
+    "BSD",
+    "ISC",
+    "CC0-1.0",
+    "Public Domain",
+    "Unlicense",
+    "0BSD",
+    "BlueOak-1.0.0",
+    "Zlib",
+    "Artistic-2.0",
+    "Python-2.0",
+    "Ruby",
+    "MPL-2.0",
+    "CC-BY-4.0",
+    "SEE LICENSE IN https://raw.githubusercontent.com/Stirling-Tools/Stirling-PDF/refs/heads/main/proprietary/LICENSE",
+    "SEE LICENSE IN LICENSE https://github.com/PostHog/posthog-js/blob/main/LICENSE",
+  ]);
 
-    // Helper function to normalize license names for comparison
-    function normalizeLicense(license) {
-        return license
-            .replace(/-or-later$/, '') // Remove -or-later suffix
-            .replace(/\+$/, '') // Remove + suffix
-            .trim();
+  // Helper function to normalize license names for comparison
+  function normalizeLicense(license) {
+    return license
+      .replace(/-or-later$/, "") // Remove -or-later suffix
+      .replace(/\+$/, "") // Remove + suffix
+      .trim();
+  }
+
+  // Check each license type
+  Object.entries(licenseSummary).forEach(([license, count]) => {
+    // Skip known good licenses
+    if (goodLicenses.has(license)) {
+      return;
     }
 
-    // Check each license type
-    Object.entries(licenseSummary).forEach(([license, count]) => {
-        // Skip known good licenses
-        if (goodLicenses.has(license)) {
-            return;
-        }
-
-        // Check if this license only affects our own packages
-        const affectedPackages = licenseArray.filter(dep => {
-            const depLicense = Array.isArray(dep.licenseType) ? dep.licenseType.join(', ') : dep.licenseType;
-            return depLicense === license;
-        });
-
-        const isOnlyOurPackages = affectedPackages.every(dep =>
-            dep.name === 'frontend' ||
-            dep.name.toLowerCase().includes('stirling-pdf') ||
-            dep.name.toLowerCase().includes('stirling_pdf') ||
-            dep.name.toLowerCase().includes('stirlingpdf')
-        );
-
-        if (isOnlyOurPackages && (license === 'UNLICENSED' || license.startsWith('SEE LICENSE IN'))) {
-            return; // Skip warnings for our own Stirling-PDF packages
-        }
-
-        // Check for compound licenses like "(MIT AND Zlib)" or "(MIT OR CC0-1.0)"
-        if (license.includes('AND') || license.includes('OR')) {
-            // For OR licenses, check if there's at least one acceptable license option
-            if (license.includes('OR')) {
-                // Extract license components from OR expression
-                const orComponents = license
-                    .replace(/[()]/g, '') // Remove parentheses
-                    .split(' OR ')
-                    .map(component => component.trim());
-
-                // Check if any component is in the goodLicenses set (with normalization)
-                const hasGoodLicense = orComponents.some(component => {
-                    const normalized = normalizeLicense(component);
-                    return goodLicenses.has(component) || goodLicenses.has(normalized);
-                });
-
-                if (hasGoodLicense) {
-                    return; // Skip warning - can use the good license option
-                }
-            }
-
-            // For AND licenses or OR licenses with no good options, check for problematic components
-            const hasProblematicComponent = Object.keys(problematicLicenses).some(problematic =>
-                license.includes(problematic)
-            );
-
-            if (hasProblematicComponent) {
-                const affectedPackages = licenseArray
-                    .filter(dep => {
-                        const depLicense = Array.isArray(dep.licenseType) ? dep.licenseType.join(', ') : dep.licenseType;
-                        return depLicense === license;
-                    })
-                    .map(dep => ({
-                        name: dep.name,
-                        version: dep.version,
-                        url: dep.repository || dep.url || `https://www.npmjs.com/package/${dep.name}`
-                    }));
-
-                const licenseType = license.includes('AND') ? 'AND' : 'OR';
-                const reason = licenseType === 'AND'
-                    ? 'Compound license with AND requirement - all components must be compatible'
-                    : 'Compound license with potentially problematic components and no good fallback options';
-
-                warnings.push({
-                    message: `📋 This PR contains ${count} package${count > 1 ? 's' : ''} with compound license "${license}" - manual review recommended`,
-                    licenseType: license,
-                    licenseUrl: '',
-                    reason: reason,
-                    packageCount: count,
-                    affectedDependencies: affectedPackages
-                });
-            }
-            return;
-        }
-
-        // Check for exact matches with problematic licenses
-        if (problematicLicenses[license]) {
-            const affectedPackages = licenseArray
-                .filter(dep => {
-                    const depLicense = Array.isArray(dep.licenseType) ? dep.licenseType.join(', ') : dep.licenseType;
-                    return depLicense === license;
-                })
-                .map(dep => ({
-                    name: dep.name,
-                    version: dep.version,
-                    url: dep.repository || dep.url || `https://www.npmjs.com/package/${dep.name}`
-                }));
-
-            const packageList = affectedPackages.map(pkg => pkg.name).slice(0, 5).join(', ') + (affectedPackages.length > 5 ? `, and ${affectedPackages.length - 5} more` : '');
-            const licenseUrl = getLicenseUrl(license) || 'https://opensource.org/licenses';
-
-            warnings.push({
-                message: `⚠️  This PR contains ${count} package${count > 1 ? 's' : ''} with license type [${license}](${licenseUrl}) - ${problematicLicenses[license]}. Affected packages: ${packageList}`,
-                licenseType: license,
-                licenseUrl: licenseUrl,
-                reason: problematicLicenses[license],
-                packageCount: count,
-                affectedDependencies: affectedPackages
-            });
-        } else {
-            // Unknown license type - flag for manual review
-            const affectedPackages = licenseArray
-                .filter(dep => {
-                    const depLicense = Array.isArray(dep.licenseType) ? dep.licenseType.join(', ') : dep.licenseType;
-                    return depLicense === license;
-                })
-                .map(dep => ({
-                    name: dep.name,
-                    version: dep.version,
-                    url: dep.repository || dep.url || `https://www.npmjs.com/package/${dep.name}`
-                }));
-
-            warnings.push({
-                message: `❓ This PR contains ${count} package${count > 1 ? 's' : ''} with unknown license type "${license}" - manual review required`,
-                licenseType: license,
-                licenseUrl: '',
-                reason: 'Unknown license type',
-                packageCount: count,
-                affectedDependencies: affectedPackages
-            });
-        }
+    // Check if this license only affects our own packages
+    const affectedPackages = licenseArray.filter((dep) => {
+      const depLicense = Array.isArray(dep.licenseType) ? dep.licenseType.join(", ") : dep.licenseType;
+      return depLicense === license;
     });
 
-    return warnings;
+    const isOnlyOurPackages = affectedPackages.every(
+      (dep) =>
+        dep.name === "frontend" ||
+        dep.name.toLowerCase().includes("stirling-pdf") ||
+        dep.name.toLowerCase().includes("stirling_pdf") ||
+        dep.name.toLowerCase().includes("stirlingpdf"),
+    );
+
+    if (isOnlyOurPackages && (license === "UNLICENSED" || license.startsWith("SEE LICENSE IN"))) {
+      return; // Skip warnings for our own Stirling-PDF packages
+    }
+
+    // Check for compound licenses like "(MIT AND Zlib)" or "(MIT OR CC0-1.0)"
+    if (license.includes("AND") || license.includes("OR")) {
+      // For OR licenses, check if there's at least one acceptable license option
+      if (license.includes("OR")) {
+        // Extract license components from OR expression
+        const orComponents = license
+          .replace(/[()]/g, "") // Remove parentheses
+          .split(" OR ")
+          .map((component) => component.trim());
+
+        // Check if any component is in the goodLicenses set (with normalization)
+        const hasGoodLicense = orComponents.some((component) => {
+          const normalized = normalizeLicense(component);
+          return goodLicenses.has(component) || goodLicenses.has(normalized);
+        });
+
+        if (hasGoodLicense) {
+          return; // Skip warning - can use the good license option
+        }
+      }
+
+      // For AND licenses or OR licenses with no good options, check for problematic components
+      const hasProblematicComponent = Object.keys(problematicLicenses).some((problematic) => license.includes(problematic));
+
+      if (hasProblematicComponent) {
+        const affectedPackages = licenseArray
+          .filter((dep) => {
+            const depLicense = Array.isArray(dep.licenseType) ? dep.licenseType.join(", ") : dep.licenseType;
+            return depLicense === license;
+          })
+          .map((dep) => ({
+            name: dep.name,
+            version: dep.version,
+            url: dep.repository || dep.url || `https://www.npmjs.com/package/${dep.name}`,
+          }));
+
+        const licenseType = license.includes("AND") ? "AND" : "OR";
+        const reason =
+          licenseType === "AND"
+            ? "Compound license with AND requirement - all components must be compatible"
+            : "Compound license with potentially problematic components and no good fallback options";
+
+        warnings.push({
+          message: `📋 This PR contains ${count} package${count > 1 ? "s" : ""} with compound license "${license}" - manual review recommended`,
+          licenseType: license,
+          licenseUrl: "",
+          reason: reason,
+          packageCount: count,
+          affectedDependencies: affectedPackages,
+        });
+      }
+      return;
+    }
+
+    // Check for exact matches with problematic licenses
+    if (problematicLicenses[license]) {
+      const affectedPackages = licenseArray
+        .filter((dep) => {
+          const depLicense = Array.isArray(dep.licenseType) ? dep.licenseType.join(", ") : dep.licenseType;
+          return depLicense === license;
+        })
+        .map((dep) => ({
+          name: dep.name,
+          version: dep.version,
+          url: dep.repository || dep.url || `https://www.npmjs.com/package/${dep.name}`,
+        }));
+
+      const packageList =
+        affectedPackages
+          .map((pkg) => pkg.name)
+          .slice(0, 5)
+          .join(", ") + (affectedPackages.length > 5 ? `, and ${affectedPackages.length - 5} more` : "");
+      const licenseUrl = getLicenseUrl(license) || "https://opensource.org/licenses";
+
+      warnings.push({
+        message: `⚠️  This PR contains ${count} package${count > 1 ? "s" : ""} with license type [${license}](${licenseUrl}) - ${problematicLicenses[license]}. Affected packages: ${packageList}`,
+        licenseType: license,
+        licenseUrl: licenseUrl,
+        reason: problematicLicenses[license],
+        packageCount: count,
+        affectedDependencies: affectedPackages,
+      });
+    } else {
+      // Unknown license type - flag for manual review
+      const affectedPackages = licenseArray
+        .filter((dep) => {
+          const depLicense = Array.isArray(dep.licenseType) ? dep.licenseType.join(", ") : dep.licenseType;
+          return depLicense === license;
+        })
+        .map((dep) => ({
+          name: dep.name,
+          version: dep.version,
+          url: dep.repository || dep.url || `https://www.npmjs.com/package/${dep.name}`,
+        }));
+
+      warnings.push({
+        message: `❓ This PR contains ${count} package${count > 1 ? "s" : ""} with unknown license type "${license}" - manual review required`,
+        licenseType: license,
+        licenseUrl: "",
+        reason: "Unknown license type",
+        packageCount: count,
+        affectedDependencies: affectedPackages,
+      });
+    }
+  });
+
+  return warnings;
 }
diff --git a/frontend/scripts/sample-pdf/generate.mjs b/frontend/scripts/sample-pdf/generate.mjs
index 93e5cf7ee3..2ad477cc98 100755
--- a/frontend/scripts/sample-pdf/generate.mjs
+++ b/frontend/scripts/sample-pdf/generate.mjs
@@ -8,20 +8,20 @@
  * for users to experiment with Stirling PDF's features.
  */
 
-import puppeteer from 'puppeteer';
-import { fileURLToPath } from 'url';
-import { dirname, join } from 'path';
-import { existsSync, mkdirSync, statSync } from 'fs';
+import puppeteer from "puppeteer";
+import { fileURLToPath } from "url";
+import { dirname, join } from "path";
+import { existsSync, mkdirSync, statSync } from "fs";
 
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
-const TEMPLATE_PATH = join(__dirname, 'template.html');
-const OUTPUT_DIR = join(__dirname, '../../public/samples');
-const OUTPUT_PATH = join(OUTPUT_DIR, 'Sample.pdf');
+const TEMPLATE_PATH = join(__dirname, "template.html");
+const OUTPUT_DIR = join(__dirname, "../../public/samples");
+const OUTPUT_PATH = join(OUTPUT_DIR, "Sample.pdf");
 
 async function generatePDF() {
-  console.log('🚀 Starting Stirling PDF sample document generation...\n');
+  console.log("🚀 Starting Stirling PDF sample document generation...\n");
 
   // Ensure output directory exists
   if (!existsSync(OUTPUT_DIR)) {
@@ -40,66 +40,65 @@ async function generatePDF() {
   let browser;
   try {
     // Launch Puppeteer
-    console.log('🌐 Launching browser...');
+    console.log("🌐 Launching browser...");
     browser = await puppeteer.launch({
-      headless: 'new',
-      args: ['--no-sandbox', '--disable-setuid-sandbox']
+      headless: "new",
+      args: ["--no-sandbox", "--disable-setuid-sandbox"],
     });
 
     const page = await browser.newPage();
 
     // Set viewport to match A4 proportions
     await page.setViewport({
-      width: 794,  // A4 width in pixels at 96 DPI
+      width: 794, // A4 width in pixels at 96 DPI
       height: 1123, // A4 height in pixels at 96 DPI
-      deviceScaleFactor: 2 // Higher quality rendering
+      deviceScaleFactor: 2, // Higher quality rendering
     });
 
     // Navigate to the template file
     const fileUrl = `file://${TEMPLATE_PATH}`;
-    console.log('📖 Loading HTML template...');
+    console.log("📖 Loading HTML template...");
     await page.goto(fileUrl, {
-      waitUntil: 'networkidle0' // Wait for all resources to load
+      waitUntil: "networkidle0", // Wait for all resources to load
     });
 
     // Generate PDF with A4 dimensions
-    console.log('📝 Generating PDF...');
+    console.log("📝 Generating PDF...");
     await page.pdf({
       path: OUTPUT_PATH,
-      format: 'A4',
+      format: "A4",
       printBackground: true,
       margin: {
         top: 0,
         right: 0,
         bottom: 0,
-        left: 0
+        left: 0,
       },
-      preferCSSPageSize: true
+      preferCSSPageSize: true,
     });
 
-    console.log('\n✅ PDF generated successfully!');
+    console.log("\n✅ PDF generated successfully!");
     console.log(`📦 Output: ${OUTPUT_PATH}`);
 
     // Get file size
     const stats = statSync(OUTPUT_PATH);
     const fileSizeInKB = (stats.size / 1024).toFixed(2);
     console.log(`📊 File size: ${fileSizeInKB} KB`);
-
   } catch (error) {
-    console.error('\n❌ Error generating PDF:', error.message);
+    console.error("\n❌ Error generating PDF:", error.message);
     process.exit(1);
   } finally {
     if (browser) {
       await browser.close();
-      console.log('🔒 Browser closed.');
+      console.log("🔒 Browser closed.");
     }
   }
 
-  console.log('\n🎉 Done! Sample PDF is ready for use in Stirling PDF.\n');
+  console.log("\n🎉 Done! Sample PDF is ready for use in Stirling PDF.\n");
 }
 
 // Run the generator
-generatePDF().catch(error => {
-  console.error('Fatal error:', error);
+generatePDF().catch((error) => {
+  console.error("Fatal error:", error);
   process.exit(1);
 });
diff --git a/frontend/scripts/sample-pdf/styles.css b/frontend/scripts/sample-pdf/styles.css
index 067452833c..7f34b95e8f 100644
--- a/frontend/scripts/sample-pdf/styles.css
+++ b/frontend/scripts/sample-pdf/styles.css
@@ -20,8 +20,9 @@
   --color-white: #ffffff;
 
   /* Font Stack */
-  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-                  'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
+  --font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+    "Helvetica Neue", sans-serif;
 }
 
 * {
diff --git a/frontend/scripts/sample-pdf/template.html b/frontend/scripts/sample-pdf/template.html
index edd7f2c9f4..aea5e4cb13 100644
--- a/frontend/scripts/sample-pdf/template.html
+++ b/frontend/scripts/sample-pdf/template.html
@@ -1,234 +1,244 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Stirling PDF - Sample Document</title>
-  <link rel="stylesheet" href="styles.css">
-</head>
-<body>
-  <!-- Page 1: Hero / Cover Page -->
-  <div class="page page-1">
-    <div class="decorative-shapes">
-      <img src="../../public/modern-logo/StirlingPDFLogoNoTextLight.svg" class="shape shape-1" alt="">
-      <img src="../../public/modern-logo/StirlingPDFLogoNoTextDark.svg" class="shape shape-2" alt="">
-      <img src="../../public/modern-logo/StirlingPDFLogoNoTextLight.svg" class="shape shape-3" alt="">
-      <img src="../../public/modern-logo/StirlingPDFLogoNoTextDark.svg" class="shape shape-4" alt="">
-      <img src="../../public/modern-logo/StirlingPDFLogoNoTextLight.svg" class="shape shape-5" alt="">
-    </div>
-    <div class="hero-content">
-      <div class="logo-container">
-        <img src="../../public/modern-logo/StirlingPDFLogoWhiteText.svg" alt="Stirling PDF" class="hero-logo">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Stirling PDF - Sample Document</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <!-- Page 1: Hero / Cover Page -->
+    <div class="page page-1">
+      <div class="decorative-shapes">
+        <img src="../../public/modern-logo/StirlingPDFLogoNoTextLight.svg" class="shape shape-1" alt="" />
+        <img src="../../public/modern-logo/StirlingPDFLogoNoTextDark.svg" class="shape shape-2" alt="" />
+        <img src="../../public/modern-logo/StirlingPDFLogoNoTextLight.svg" class="shape shape-3" alt="" />
+        <img src="../../public/modern-logo/StirlingPDFLogoNoTextDark.svg" class="shape shape-4" alt="" />
+        <img src="../../public/modern-logo/StirlingPDFLogoNoTextLight.svg" class="shape shape-5" alt="" />
       </div>
-      <h1 class="hero-tagline">The Free Adobe Acrobat Alternative</h1>
-      <div class="hero-stats">
-        <div class="stat-badge">
-          <span class="stat-number">10M+</span>
-          <span class="stat-label">Downloads</span>
+      <div class="hero-content">
+        <div class="logo-container">
+          <img src="../../public/modern-logo/StirlingPDFLogoWhiteText.svg" alt="Stirling PDF" class="hero-logo" />
         </div>
-      </div>
-      <div class="hero-features">
-        <div class="feature-pill">Open Source</div>
-        <div class="feature-pill">Privacy First</div>
-        <div class="feature-pill">Self-Hosted</div>
-      </div>
-    </div>
-  </div>
-
-  <!-- Page 2: What is Stirling PDF -->
-  <div class="page page-2">
-    <div class="content-wrapper">
-      <h2 class="page-title">What is Stirling PDF?</h2>
-      <p class="intro-text">
-        Stirling PDF is a robust, web-based PDF manipulation tool.
-        It enables you to carry out various operations on PDF files, including splitting,
-        merging, converting, rearranging, adding images, rotating, compressing, and more.
-      </p>
-
-      <div class="value-props">
-        <div class="value-prop">
-          <div class="value-icon">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z" />
-            </svg>
+        <h1 class="hero-tagline">The Free Adobe Acrobat Alternative</h1>
+        <div class="hero-stats">
+          <div class="stat-badge">
+            <span class="stat-number">10M+</span>
+            <span class="stat-label">Downloads</span>
           </div>
-          <h3>50+ PDF Operations</h3>
-          <p>Comprehensive toolkit covering all your PDF needs. From basic operations to advanced processing.</p>
         </div>
-
-        <div class="value-prop">
-          <div class="value-icon">
-            <svg viewBox="0 0 24 24" fill="currentColor">
-              <path d="M7.4 17.25q-1.05.875-2.187.8t-1.988-.775t-1.162-1.837t.412-2.338L4.35 10q-.625-.55-.987-1.325T3 7q0-1.65 1.175-2.825T7 3t2.825 1.175T11 7T9.825 9.825T7 11q-.225 0-.45-.025t-.425-.075L4.2 14.15q-.275.45-.175.888t.425.712t.775.313t.875-.313l10.5-9.025q1.05-.875 2.2-.788t2 .788t1.15 1.838t-.425 2.337L19.65 14q.625.55.988 1.325T21 17q0 1.65-1.175 2.825T17 21t-2.825-1.175T13 17t1.175-2.825T17 13q.225 0 .438.025t.412.075l1.95-3.25q.275-.45.175-.888t-.425-.712t-.775-.312t-.875.312zM7 9q.825 0 1.413-.587T9 7t-.587-1.412T7 5t-1.412.588T5 7t.588 1.413T7 9m10 10q.825 0 1.413-.587T19 17t-.587-1.412T17 15t-1.412.588T15 17t.588 1.413T17 19m0-2" />
-            </svg>
-          </div>
-          <h3>Workflow Automation</h3>
-          <p>Chain multiple operations together and save them as reusable workflows. Perfect for recurring tasks.</p>
-        </div>
-
-        <div class="value-prop">
-          <div class="value-icon">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <circle cx="12" cy="12" r="10" />
-              <line x1="2" y1="12" x2="22" y2="12" />
-              <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
-            </svg>
-          </div>
-          <h3>Multi-Language Support</h3>
-          <p>Available in over 30 languages with community-contributed translations. Accessible to users worldwide.</p>
-        </div>
-
-        <div class="value-prop">
-          <div class="value-icon">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <rect x="5" y="11" width="14" height="10" rx="2" />
-              <circle cx="12" cy="16" r="1" />
-              <path d="M8 11V7a4 4 0 0 1 8 0v4" />
-            </svg>
-          </div>
-          <h3>Privacy First</h3>
-          <p>Self-hosted solution means your data stays on your infrastructure. You have full control over your documents.</p>
-        </div>
-
-        <div class="value-prop">
-          <div class="value-icon">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <circle cx="12" cy="12" r="10" />
-              <path d="m9 12 2 2 4-4" />
-            </svg>
-          </div>
-          <h3>Open Source</h3>
-          <p>Transparent, community-driven development. Inspect the code, contribute features, and adapt as needed.</p>
-        </div>
-
-        <div class="value-prop">
-          <div class="value-icon">
-            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-              <polyline points="16 18 22 12 16 6" />
-              <polyline points="8 6 2 12 8 18" />
-            </svg>
-          </div>
-          <h3>API Access</h3>
-          <p>RESTful API for integration with external tools and scripts. Automate PDF operations programmatically.</p>
+        <div class="hero-features">
+          <div class="feature-pill">Open Source</div>
+          <div class="feature-pill">Privacy First</div>
+          <div class="feature-pill">Self-Hosted</div>
         </div>
       </div>
     </div>
-  </div>
 
-  <!-- Page 3: Key Features -->
-  <div class="page page-3">
-    <div class="content-wrapper">
-      <h2 class="page-title">Key Features</h2>
+    <!-- Page 2: What is Stirling PDF -->
+    <div class="page page-2">
+      <div class="content-wrapper">
+        <h2 class="page-title">What is Stirling PDF?</h2>
+        <p class="intro-text">
+          Stirling PDF is a robust, web-based PDF manipulation tool. It enables you to carry out various operations on PDF
+          files, including splitting, merging, converting, rearranging, adding images, rotating, compressing, and more.
+        </p>
 
-      <div class="features-grid">
-        <div class="feature-card" data-category="general">
-          <div class="feature-header">
-            <div class="feature-icon-large">
+        <div class="value-props">
+          <div class="value-prop">
+            <div class="value-icon">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
-                <polyline points="14 2 14 8 20 8" />
-                <line x1="16" y1="13" x2="8" y2="13" />
-                <line x1="16" y1="17" x2="8" y2="17" />
-                <polyline points="10 9 9 9 8 9" />
+                <path
+                  d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"
+                />
               </svg>
             </div>
-            <h3>Page Operations</h3>
+            <h3>50+ PDF Operations</h3>
+            <p>Comprehensive toolkit covering all your PDF needs. From basic operations to advanced processing.</p>
           </div>
-          <ul class="feature-list">
-            <li>Merge & split PDFs</li>
-            <li>Rearrange pages</li>
-            <li>Rotate & crop</li>
-            <li>Extract pages</li>
-            <li>Multi-page layout</li>
-          </ul>
-        </div>
 
-        <div class="feature-card" data-category="security">
-          <div class="feature-header">
-            <div class="feature-icon-large">
+          <div class="value-prop">
+            <div class="value-icon">
+              <svg viewBox="0 0 24 24" fill="currentColor">
+                <path
+                  d="M7.4 17.25q-1.05.875-2.187.8t-1.988-.775t-1.162-1.837t.412-2.338L4.35 10q-.625-.55-.987-1.325T3 7q0-1.65 1.175-2.825T7 3t2.825 1.175T11 7T9.825 9.825T7 11q-.225 0-.45-.025t-.425-.075L4.2 14.15q-.275.45-.175.888t.425.712t.775.313t.875-.313l10.5-9.025q1.05-.875 2.2-.788t2 .788t1.15 1.838t-.425 2.337L19.65 14q.625.55.988 1.325T21 17q0 1.65-1.175 2.825T17 21t-2.825-1.175T13 17t1.175-2.825T17 13q.225 0 .438.025t.412.075l1.95-3.25q.275-.45.175-.888t-.425-.712t-.775-.312t-.875.312zM7 9q.825 0 1.413-.587T9 7t-.587-1.412T7 5t-1.412.588T5 7t.588 1.413T7 9m10 10q.825 0 1.413-.587T19 17t-.587-1.412T17 15t-1.412.588T15 17t.588 1.413T17 19m0-2"
+                />
+              </svg>
+            </div>
+            <h3>Workflow Automation</h3>
+            <p>Chain multiple operations together and save them as reusable workflows. Perfect for recurring tasks.</p>
+          </div>
+
+          <div class="value-prop">
+            <div class="value-icon">
               <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
-                <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+                <circle cx="12" cy="12" r="10" />
+                <line x1="2" y1="12" x2="22" y2="12" />
+                <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
               </svg>
             </div>
-            <h3>Security & Signing</h3>
+            <h3>Multi-Language Support</h3>
+            <p>Available in over 30 languages with community-contributed translations. Accessible to users worldwide.</p>
           </div>
-          <ul class="feature-list">
-            <li>Password protection</li>
-            <li>Digital signatures</li>
-            <li>Watermarks</li>
-            <li>Permission controls</li>
-            <li>Redaction tools</li>
-          </ul>
-        </div>
 
-        <div class="feature-card" data-category="formatting">
-          <div class="feature-header">
-            <div class="feature-icon-large">
-              <svg viewBox="0 0 24 24" fill="currentColor">
-                <path d="m5.825 17l1.9 1.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-3.6-3.6q-.15-.15-.213-.325T2.426 16t.063-.375t.212-.325l3.6-3.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L5.825 15H20q.425 0 .713.288T21 16t-.288.713T20 17zm12.35-8H4q-.425 0-.712-.288T3 8t.288-.712T4 7h14.175l-1.9-1.9q-.3-.3-.287-.7t.312-.7q.3-.275.7-.288t.7.288l3.6 3.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-3.6 3.6q-.275.275-.687.275T16.3 12.3q-.3-.3-.3-.712t.3-.713z" />
+          <div class="value-prop">
+            <div class="value-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <rect x="5" y="11" width="14" height="10" rx="2" />
+                <circle cx="12" cy="16" r="1" />
+                <path d="M8 11V7a4 4 0 0 1 8 0v4" />
               </svg>
             </div>
-            <h3>File Conversions</h3>
+            <h3>Privacy First</h3>
+            <p>
+              Self-hosted solution means your data stays on your infrastructure. You have full control over your documents.
+            </p>
           </div>
-          <ul class="feature-list">
-            <li>PDF to/from images</li>
-            <li>Office documents</li>
-            <li>HTML to PDF</li>
-            <li>Markdown to PDF</li>
-            <li>PDF to Word/Excel</li>
-          </ul>
-        </div>
 
-        <div class="feature-card" data-category="automation">
-          <div class="feature-header">
-            <div class="feature-icon-large">
-              <svg viewBox="0 0 24 24" fill="currentColor">
-                <path d="M7.4 17.25q-1.05.875-2.187.8t-1.988-.775t-1.162-1.837t.412-2.338L4.35 10q-.625-.55-.987-1.325T3 7q0-1.65 1.175-2.825T7 3t2.825 1.175T11 7T9.825 9.825T7 11q-.225 0-.45-.025t-.425-.075L4.2 14.15q-.275.45-.175.888t.425.712t.775.313t.875-.313l10.5-9.025q1.05-.875 2.2-.788t2 .788t1.15 1.838t-.425 2.337L19.65 14q.625.55.988 1.325T21 17q0 1.65-1.175 2.825T17 21t-2.825-1.175T13 17t1.175-2.825T17 13q.225 0 .438.025t.412.075l1.95-3.25q.275-.45.175-.888t-.425-.712t-.775-.312t-.875.312zM7 9q.825 0 1.413-.587T9 7t-.587-1.412T7 5t-1.412.588T5 7t.588 1.413T7 9m10 10q.825 0 1.413-.587T19 17t-.587-1.412T17 15t-1.412.588T15 17t.588 1.413T17 19m0-2" />
+          <div class="value-prop">
+            <div class="value-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <circle cx="12" cy="12" r="10" />
+                <path d="m9 12 2 2 4-4" />
               </svg>
             </div>
-            <h3>Automation</h3>
+            <h3>Open Source</h3>
+            <p>Transparent, community-driven development. Inspect the code, contribute features, and adapt as needed.</p>
           </div>
-          <ul class="feature-list">
-            <li>Multi-step workflows</li>
-            <li>Chain PDF operations</li>
-            <li>Save recurring tasks</li>
-            <li>Batch file processing</li>
-            <li>API integration</li>
-          </ul>
-        </div>
-      </div>
 
-      <div class="additional-features">
-        <div class="additional-features-header">
-          <div class="additional-features-icon">
-            <svg viewBox="0 0 24 24" fill="currentColor">
-              <path d="M6 20q-.825 0-1.4125-.5875T4 18t.5875-1.4125T6 16t1.4125.5875T8 18t-.5875 1.4125T6 20m6 0q-.825 0-1.4125-.5875T10 18t.5875-1.4125T12 16t1.4125.5875T14 18t-.5875 1.4125T12 20m6 0q-.825 0-1.4125-.5875T16 18t.5875-1.4125T18 16t1.4125.5875T20 18t-.5875 1.4125T18 20M6 14q-.825 0-1.4125-.5875T4 12t.5875-1.4125T6 10t1.4125.5875T8 12t-.5875 1.4125T6 14m6 0q-.825 0-1.4125-.5875T10 12t.5875-1.4125T12 10t1.4125.5875T14 12t-.5875 1.4125T12 14m6 0q-.825 0-1.4125-.5875T16 12t.5875-1.4125T18 10t1.4125.5875T20 12t-.5875 1.4125T18 14M6 8q-.825 0-1.4125-.5875T4 6t.5875-1.4125T6 4t1.4125.5875T8 6t-.5875 1.4125T6 8m6 0q-.825 0-1.4125-.5875T10 6t.5875-1.4125T12 4t1.4125.5875T14 6t-.5875 1.4125T12 8m6 0q-.825 0-1.4125-.5875T16 6t.5875-1.4125T18 4t1.4125.5875T20 6t-.5875 1.4125T18 8" />
-            </svg>
+          <div class="value-prop">
+            <div class="value-icon">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                <polyline points="16 18 22 12 16 6" />
+                <polyline points="8 6 2 12 8 18" />
+              </svg>
+            </div>
+            <h3>API Access</h3>
+            <p>RESTful API for integration with external tools and scripts. Automate PDF operations programmatically.</p>
           </div>
-          <h3>Plus Many More</h3>
-        </div>
-        <div class="additional-features-grid">
-          <ul>
-            <li>OCR text recognition</li>
-            <li>Compress PDFs</li>
-            <li>Add images & stamps</li>
-            <li>Detect blank pages</li>
-            <li>Extract images</li>
-            <li>Edit metadata</li>
-          </ul>
-          <ul>
-            <li>Flatten forms</li>
-            <li>PDF/A conversion</li>
-            <li>Add page numbers</li>
-            <li>Remove pages</li>
-            <li>Repair PDFs</li>
-            <li>And 40+ more tools</li>
-          </ul>
         </div>
       </div>
     </div>
-  </div>
 
-</body>
+    <!-- Page 3: Key Features -->
+    <div class="page page-3">
+      <div class="content-wrapper">
+        <h2 class="page-title">Key Features</h2>
+
+        <div class="features-grid">
+          <div class="feature-card" data-category="general">
+            <div class="feature-header">
+              <div class="feature-icon-large">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" />
+                  <polyline points="14 2 14 8 20 8" />
+                  <line x1="16" y1="13" x2="8" y2="13" />
+                  <line x1="16" y1="17" x2="8" y2="17" />
+                  <polyline points="10 9 9 9 8 9" />
+                </svg>
+              </div>
+              <h3>Page Operations</h3>
+            </div>
+            <ul class="feature-list">
+              <li>Merge & split PDFs</li>
+              <li>Rearrange pages</li>
+              <li>Rotate & crop</li>
+              <li>Extract pages</li>
+              <li>Multi-page layout</li>
+            </ul>
+          </div>
+
+          <div class="feature-card" data-category="security">
+            <div class="feature-header">
+              <div class="feature-icon-large">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                  <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
+                  <path d="M7 11V7a5 5 0 0 1 10 0v4" />
+                </svg>
+              </div>
+              <h3>Security & Signing</h3>
+            </div>
+            <ul class="feature-list">
+              <li>Password protection</li>
+              <li>Digital signatures</li>
+              <li>Watermarks</li>
+              <li>Permission controls</li>
+              <li>Redaction tools</li>
+            </ul>
+          </div>
+
+          <div class="feature-card" data-category="formatting">
+            <div class="feature-header">
+              <div class="feature-icon-large">
+                <svg viewBox="0 0 24 24" fill="currentColor">
+                  <path
+                    d="m5.825 17l1.9 1.9q.3.3.288.7t-.313.7q-.3.275-.7.288t-.7-.288l-3.6-3.6q-.15-.15-.213-.325T2.426 16t.063-.375t.212-.325l3.6-3.6q.275-.275.688-.275t.712.275q.3.3.3.713t-.3.712L5.825 15H20q.425 0 .713.288T21 16t-.288.713T20 17zm12.35-8H4q-.425 0-.712-.288T3 8t.288-.712T4 7h14.175l-1.9-1.9q-.3-.3-.287-.7t.312-.7q.3-.275.7-.288t.7.288l3.6 3.6q.15.15.213.325t.062.375t-.062.375t-.213.325l-3.6 3.6q-.275.275-.687.275T16.3 12.3q-.3-.3-.3-.712t.3-.713z"
+                  />
+                </svg>
+              </div>
+              <h3>File Conversions</h3>
+            </div>
+            <ul class="feature-list">
+              <li>PDF to/from images</li>
+              <li>Office documents</li>
+              <li>HTML to PDF</li>
+              <li>Markdown to PDF</li>
+              <li>PDF to Word/Excel</li>
+            </ul>
+          </div>
+
+          <div class="feature-card" data-category="automation">
+            <div class="feature-header">
+              <div class="feature-icon-large">
+                <svg viewBox="0 0 24 24" fill="currentColor">
+                  <path
+                    d="M7.4 17.25q-1.05.875-2.187.8t-1.988-.775t-1.162-1.837t.412-2.338L4.35 10q-.625-.55-.987-1.325T3 7q0-1.65 1.175-2.825T7 3t2.825 1.175T11 7T9.825 9.825T7 11q-.225 0-.45-.025t-.425-.075L4.2 14.15q-.275.45-.175.888t.425.712t.775.313t.875-.313l10.5-9.025q1.05-.875 2.2-.788t2 .788t1.15 1.838t-.425 2.337L19.65 14q.625.55.988 1.325T21 17q0 1.65-1.175 2.825T17 21t-2.825-1.175T13 17t1.175-2.825T17 13q.225 0 .438.025t.412.075l1.95-3.25q.275-.45.175-.888t-.425-.712t-.775-.312t-.875.312zM7 9q.825 0 1.413-.587T9 7t-.587-1.412T7 5t-1.412.588T5 7t.588 1.413T7 9m10 10q.825 0 1.413-.587T19 17t-.587-1.412T17 15t-1.412.588T15 17t.588 1.413T17 19m0-2"
+                  />
+                </svg>
+              </div>
+              <h3>Automation</h3>
+            </div>
+            <ul class="feature-list">
+              <li>Multi-step workflows</li>
+              <li>Chain PDF operations</li>
+              <li>Save recurring tasks</li>
+              <li>Batch file processing</li>
+              <li>API integration</li>
+            </ul>
+          </div>
+        </div>
+
+        <div class="additional-features">
+          <div class="additional-features-header">
+            <div class="additional-features-icon">
+              <svg viewBox="0 0 24 24" fill="currentColor">
+                <path
+                  d="M6 20q-.825 0-1.4125-.5875T4 18t.5875-1.4125T6 16t1.4125.5875T8 18t-.5875 1.4125T6 20m6 0q-.825 0-1.4125-.5875T10 18t.5875-1.4125T12 16t1.4125.5875T14 18t-.5875 1.4125T12 20m6 0q-.825 0-1.4125-.5875T16 18t.5875-1.4125T18 16t1.4125.5875T20 18t-.5875 1.4125T18 20M6 14q-.825 0-1.4125-.5875T4 12t.5875-1.4125T6 10t1.4125.5875T8 12t-.5875 1.4125T6 14m6 0q-.825 0-1.4125-.5875T10 12t.5875-1.4125T12 10t1.4125.5875T14 12t-.5875 1.4125T12 14m6 0q-.825 0-1.4125-.5875T16 12t.5875-1.4125T18 10t1.4125.5875T20 12t-.5875 1.4125T18 14M6 8q-.825 0-1.4125-.5875T4 6t.5875-1.4125T6 4t1.4125.5875T8 6t-.5875 1.4125T6 8m6 0q-.825 0-1.4125-.5875T10 6t.5875-1.4125T12 4t1.4125.5875T14 6t-.5875 1.4125T12 8m6 0q-.825 0-1.4125-.5875T16 6t.5875-1.4125T18 4t1.4125.5875T20 6t-.5875 1.4125T18 8"
+                />
+              </svg>
+            </div>
+            <h3>Plus Many More</h3>
+          </div>
+          <div class="additional-features-grid">
+            <ul>
+              <li>OCR text recognition</li>
+              <li>Compress PDFs</li>
+              <li>Add images & stamps</li>
+              <li>Detect blank pages</li>
+              <li>Extract images</li>
+              <li>Edit metadata</li>
+            </ul>
+            <ul>
+              <li>Flatten forms</li>
+              <li>PDF/A conversion</li>
+              <li>Add page numbers</li>
+              <li>Remove pages</li>
+              <li>Repair PDFs</li>
+              <li>And 40+ more tools</li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
 </html>
diff --git a/frontend/scripts/setup-env.ts b/frontend/scripts/setup-env.ts
index 00ec03df00..508a3ee19a 100644
--- a/frontend/scripts/setup-env.ts
+++ b/frontend/scripts/setup-env.ts
@@ -10,22 +10,22 @@
  *   tsx scripts/setup-env.ts --saas       # also checks .env.saas
  */
 
-import { existsSync, copyFileSync, readFileSync } from 'fs';
-import { join } from 'path';
-import { config, parse } from 'dotenv';
+import { existsSync, copyFileSync, readFileSync } from "fs";
+import { join } from "path";
+import { config, parse } from "dotenv";
 
 // npm scripts run from the directory containing package.json (frontend/)
 const root = process.cwd();
 const args = process.argv.slice(2);
-const isDesktop = args.includes('--desktop');
-const isSaas = args.includes('--saas');
+const isDesktop = args.includes("--desktop");
+const isSaas = args.includes("--saas");
 
-console.log('setup-env: see frontend/README.md#environment-variables for documentation');
+console.log("setup-env: see frontend/README.md#environment-variables for documentation");
 
 function getExampleKeys(exampleFile: string): string[] {
   const examplePath = join(root, exampleFile);
   if (!existsSync(examplePath)) return [];
-  return Object.keys(parse(readFileSync(examplePath, 'utf-8')));
+  return Object.keys(parse(readFileSync(examplePath, "utf-8")));
 }
 
 function ensureEnvFile(envFile: string, exampleFile: string): boolean {
@@ -44,13 +44,13 @@ function ensureEnvFile(envFile: string, exampleFile: string): boolean {
 
   config({ path: envPath });
 
-  const missing = getExampleKeys(exampleFile).filter(k => !(k in process.env));
+  const missing = getExampleKeys(exampleFile).filter((k) => !(k in process.env));
 
   if (missing.length > 0) {
     console.error(
       `setup-env: ${envFile} is missing keys from ${exampleFile}:\n` +
-      missing.map(k => `  ${k}`).join('\n') +
-      '\n  Add them manually or delete your local file to re-copy from the example.'
+        missing.map((k) => `  ${k}`).join("\n") +
+        "\n  Add them manually or delete your local file to re-copy from the example.",
     );
     return true;
   }
@@ -59,29 +59,28 @@ function ensureEnvFile(envFile: string, exampleFile: string): boolean {
 }
 
 let failed = false;
-failed = ensureEnvFile('.env', 'config/.env.example') || failed;
+failed = ensureEnvFile(".env", "config/.env.example") || failed;
 
 if (isDesktop) {
-  failed = ensureEnvFile('.env.desktop', 'config/.env.desktop.example') || failed;
+  failed = ensureEnvFile(".env.desktop", "config/.env.desktop.example") || failed;
 }
 
 if (isSaas) {
-  failed = ensureEnvFile('.env.saas', 'config/.env.saas.example') || failed;
+  failed = ensureEnvFile(".env.saas", "config/.env.saas.example") || failed;
 }
 
 // Warn about any VITE_ vars set in the environment that aren't listed in any example file.
 const allExampleKeys = new Set([
-  ...getExampleKeys('config/.env.example'),
-  ...getExampleKeys('config/.env.desktop.example'),
-  ...getExampleKeys('config/.env.saas.example'),
+  ...getExampleKeys("config/.env.example"),
+  ...getExampleKeys("config/.env.desktop.example"),
+  ...getExampleKeys("config/.env.saas.example"),
 ]);
-const unknownViteVars = Object.keys(process.env)
-  .filter(k => k.startsWith('VITE_') && !allExampleKeys.has(k));
+const unknownViteVars = Object.keys(process.env).filter((k) => k.startsWith("VITE_") && !allExampleKeys.has(k));
 if (unknownViteVars.length > 0) {
   console.warn(
-    'setup-env: the following VITE_ vars are set but not listed in any example file:\n' +
-    unknownViteVars.map(k => `  ${k}`).join('\n') +
-    '\n  Add them to the appropriate config/.env.*.example file if they are required.'
+    "setup-env: the following VITE_ vars are set but not listed in any example file:\n" +
+      unknownViteVars.map((k) => `  ${k}`).join("\n") +
+      "\n  Add them to the appropriate config/.env.*.example file if they are required.",
   );
 }
 
diff --git a/frontend/src-tauri/capabilities/default.json b/frontend/src-tauri/capabilities/default.json
index 6acaac5145..9259e4543f 100644
--- a/frontend/src-tauri/capabilities/default.json
+++ b/frontend/src-tauri/capabilities/default.json
@@ -2,9 +2,7 @@
   "$schema": "../gen/schemas/desktop-schema.json",
   "identifier": "default",
   "description": "enables the default permissions",
-  "windows": [
-    "main"
-  ],
+  "windows": ["main"],
   "permissions": [
     "core:default",
     "core:window:allow-destroy",
diff --git a/frontend/src-tauri/tauri.conf.json b/frontend/src-tauri/tauri.conf.json
index 10203960c0..536d0d382d 100644
--- a/frontend/src-tauri/tauri.conf.json
+++ b/frontend/src-tauri/tauri.conf.json
@@ -1,98 +1,82 @@
 {
-    "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
-    "productName": "Stirling-PDF",
-    "version": "2.9.2",
-    "identifier": "stirling.pdf.dev",
-    "build": {
-        "frontendDist": "../dist",
-        "devUrl": "http://localhost:5173",
-        "beforeDevCommand": "npm run dev -- --mode desktop",
-        "beforeBuildCommand": "node scripts/build-provisioner.mjs && npm run build -- --mode desktop"
+  "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
+  "productName": "Stirling-PDF",
+  "version": "2.9.2",
+  "identifier": "stirling.pdf.dev",
+  "build": {
+    "frontendDist": "../dist",
+    "devUrl": "http://localhost:5173",
+    "beforeDevCommand": "npm run dev -- --mode desktop",
+    "beforeBuildCommand": "node scripts/build-provisioner.mjs && npm run build -- --mode desktop"
+  },
+  "app": {
+    "windows": [
+      {
+        "title": "Stirling-PDF",
+        "width": 1280,
+        "height": 800,
+        "resizable": true,
+        "fullscreen": false,
+        "additionalBrowserArgs": "--enable-features=CertVerifierBuiltinFeature"
+      }
+    ]
+  },
+  "bundle": {
+    "active": true,
+    "publisher": "Stirling PDF Inc.",
+    "targets": ["deb", "rpm", "dmg", "msi"],
+    "icon": [
+      "icons/icon.png",
+      "icons/icon.icns",
+      "icons/icon.ico",
+      "icons/16x16.png",
+      "icons/32x32.png",
+      "icons/64x64.png",
+      "icons/128x128.png",
+      "icons/192x192.png"
+    ],
+    "resources": ["libs/*.jar", "runtime/jre/**/*"],
+    "fileAssociations": [
+      {
+        "ext": ["pdf"],
+        "name": "PDF Document",
+        "role": "Editor",
+        "mimeType": "application/pdf"
+      }
+    ],
+    "linux": {
+      "deb": {
+        "desktopTemplate": "stirling-pdf.desktop"
+      }
     },
-    "app": {
-        "windows": [
-            {
-                "title": "Stirling-PDF",
-                "width": 1280,
-                "height": 800,
-                "resizable": true,
-                "fullscreen": false,
-                "additionalBrowserArgs": "--enable-features=CertVerifierBuiltinFeature"
-            }
-        ]
+    "windows": {
+      "certificateThumbprint": null,
+      "digestAlgorithm": "sha256",
+      "timestampUrl": "http://timestamp.digicert.com",
+      "wix": {
+        "fragmentPaths": ["windows/wix/provisioning.wxs"],
+        "componentGroupRefs": ["ProvisioningComponentGroup"]
+      }
     },
-    "bundle": {
-        "active": true,
-        "publisher": "Stirling PDF Inc.",
-        "targets": [
-            "deb",
-            "rpm",
-            "dmg",
-            "msi"
-        ],
-        "icon": [
-            "icons/icon.png",
-            "icons/icon.icns",
-            "icons/icon.ico",
-            "icons/16x16.png",
-            "icons/32x32.png",
-            "icons/64x64.png",
-            "icons/128x128.png",
-            "icons/192x192.png"
-        ],
-        "resources": [
-            "libs/*.jar",
-            "runtime/jre/**/*"
-        ],
-        "fileAssociations": [
-            {
-                "ext": [
-                    "pdf"
-                ],
-                "name": "PDF Document",
-                "role": "Editor",
-                "mimeType": "application/pdf"
-            }
-        ],
-        "linux": {
-            "deb": {
-                "desktopTemplate": "stirling-pdf.desktop"
-            }
-        },
-        "windows": {
-            "certificateThumbprint": null,
-            "digestAlgorithm": "sha256",
-            "timestampUrl": "http://timestamp.digicert.com",
-            "wix": {
-                "fragmentPaths": [
-                    "windows/wix/provisioning.wxs"
-                ],
-                "componentGroupRefs": [
-                    "ProvisioningComponentGroup"
-                ]
-            }
-        },
-        "macOS": {
-            "minimumSystemVersion": "10.15",
-            "signingIdentity": null,
-            "entitlements": null,
-            "providerShortName": null,
-            "infoPlist": "Info.plist"
-        }
-    },
-    "plugins": {
-        "shell": {
-            "open": true
-        },
-        "fs": {
-            "requireLiteralLeadingDot": false
-        },
-        "deep-link": {
-            "desktop": {
-                "schemes": [
-                    "stirlingpdf"
-                ]
-            }
-        }
+    "macOS": {
+      "minimumSystemVersion": "10.15",
+      "signingIdentity": null,
+      "entitlements": null,
+      "providerShortName": null,
+      "infoPlist": "Info.plist"
     }
+  },
+  "plugins": {
+    "shell": {
+      "open": true
+    },
+    "fs": {
+      "requireLiteralLeadingDot": false
+    },
+    "deep-link": {
+      "desktop": {
+        "schemes": ["stirlingpdf"]
+      }
+    }
+  }
 }
diff --git a/frontend/src/assets/3rdPartyLicenses.json b/frontend/src/assets/3rdPartyLicenses.json
index 392249d420..baf60879b6 100644
--- a/frontend/src/assets/3rdPartyLicenses.json
+++ b/frontend/src/assets/3rdPartyLicenses.json
@@ -1,326 +1,326 @@
 {
-    "dependencies": [
-        {
-            "moduleName": "@atlaskit/pragmatic-drag-and-drop",
-            "moduleUrl": "git+https://github.com/atlassian/pragmatic-drag-and-drop.git",
-            "moduleVersion": "1.7.7",
-            "moduleLicense": "Apache-2.0",
-            "moduleLicenseUrl": "git+https://github.com/atlassian/pragmatic-drag-and-drop.git"
-        },
-        {
-            "moduleName": "@embedpdf/core",
-            "moduleUrl": "https://registry.npmjs.org/@embedpdf/core/-/core-1.3.1.tgz",
-            "moduleVersion": "1.3.0",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "https://registry.npmjs.org/@embedpdf/core/-/core-1.3.1.tgz"
-        },
-        {
-            "moduleName": "@embedpdf/engines",
-            "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
-            "moduleVersion": "1.3.0",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
-        },
-        {
-            "moduleName": "@embedpdf/plugin-annotation",
-            "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
-            "moduleVersion": "1.3.0",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
-        },
-        {
-            "moduleName": "@embedpdf/plugin-export",
-            "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
-            "moduleVersion": "1.3.0",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
-        },
-        {
-            "moduleName": "@embedpdf/plugin-history",
-            "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
-            "moduleVersion": "1.3.0",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
-        },
-        {
-            "moduleName": "@embedpdf/plugin-interaction-manager",
-            "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
-            "moduleVersion": "1.3.0",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
-        },
-        {
-            "moduleName": "@embedpdf/plugin-loader",
-            "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
-            "moduleVersion": "1.3.0",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
-        },
-        {
-            "moduleName": "@embedpdf/plugin-pan",
-            "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
-            "moduleVersion": "1.3.0",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
-        },
-        {
-            "moduleName": "@embedpdf/plugin-render",
-            "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
-            "moduleVersion": "1.3.0",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
-        },
-        {
-            "moduleName": "@embedpdf/plugin-rotate",
-            "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
-            "moduleVersion": "1.3.0",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
-        },
-        {
-            "moduleName": "@embedpdf/plugin-scroll",
-            "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
-            "moduleVersion": "1.3.0",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
-        },
-        {
-            "moduleName": "@embedpdf/plugin-search",
-            "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
-            "moduleVersion": "1.3.0",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
-        },
-        {
-            "moduleName": "@embedpdf/plugin-selection",
-            "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
-            "moduleVersion": "1.3.0",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
-        },
-        {
-            "moduleName": "@embedpdf/plugin-spread",
-            "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
-            "moduleVersion": "1.3.0",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
-        },
-        {
-            "moduleName": "@embedpdf/plugin-thumbnail",
-            "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
-            "moduleVersion": "1.3.0",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
-        },
-        {
-            "moduleName": "@embedpdf/plugin-tiling",
-            "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
-            "moduleVersion": "1.3.0",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
-        },
-        {
-            "moduleName": "@embedpdf/plugin-viewport",
-            "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
-            "moduleVersion": "1.3.0",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
-        },
-        {
-            "moduleName": "@embedpdf/plugin-zoom",
-            "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
-            "moduleVersion": "1.3.0",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
-        },
-        {
-            "moduleName": "@emotion/react",
-            "moduleUrl": "git+https://github.com/emotion-js/emotion.git#main",
-            "moduleVersion": "11.14.0",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "git+https://github.com/emotion-js/emotion.git#main"
-        },
-        {
-            "moduleName": "@emotion/styled",
-            "moduleUrl": "git+https://github.com/emotion-js/emotion.git#main",
-            "moduleVersion": "11.14.1",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "git+https://github.com/emotion-js/emotion.git#main"
-        },
-        {
-            "moduleName": "@iconify/react",
-            "moduleUrl": "git+https://github.com/iconify/iconify.git",
-            "moduleVersion": "6.0.2",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "git+https://github.com/iconify/iconify.git"
-        },
-        {
-            "moduleName": "@mantine/core",
-            "moduleUrl": "git+https://github.com/mantinedev/mantine.git",
-            "moduleVersion": "8.3.1",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "git+https://github.com/mantinedev/mantine.git"
-        },
-        {
-            "moduleName": "@mantine/dates",
-            "moduleUrl": "git+https://github.com/mantinedev/mantine.git",
-            "moduleVersion": "8.3.1",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "git+https://github.com/mantinedev/mantine.git"
-        },
-        {
-            "moduleName": "@mantine/dropzone",
-            "moduleUrl": "git+https://github.com/mantinedev/mantine.git",
-            "moduleVersion": "8.3.1",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "git+https://github.com/mantinedev/mantine.git"
-        },
-        {
-            "moduleName": "@mantine/hooks",
-            "moduleUrl": "git+https://github.com/mantinedev/mantine.git",
-            "moduleVersion": "8.3.1",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "git+https://github.com/mantinedev/mantine.git"
-        },
-        {
-            "moduleName": "@mui/icons-material",
-            "moduleUrl": "git+https://github.com/mui/material-ui.git",
-            "moduleVersion": "7.3.2",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "git+https://github.com/mui/material-ui.git"
-        },
-        {
-            "moduleName": "@mui/material",
-            "moduleUrl": "git+https://github.com/mui/material-ui.git",
-            "moduleVersion": "7.3.2",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "git+https://github.com/mui/material-ui.git"
-        },
-        {
-            "moduleName": "@tailwindcss/postcss",
-            "moduleUrl": "git+https://github.com/tailwindlabs/tailwindcss.git",
-            "moduleVersion": "4.1.13",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "git+https://github.com/tailwindlabs/tailwindcss.git"
-        },
-        {
-            "moduleName": "@tanstack/react-virtual",
-            "moduleUrl": "git+https://github.com/TanStack/virtual.git",
-            "moduleVersion": "3.13.12",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "git+https://github.com/TanStack/virtual.git"
-        },
-        {
-            "moduleName": "autoprefixer",
-            "moduleUrl": "git+https://github.com/postcss/autoprefixer.git",
-            "moduleVersion": "10.4.21",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "git+https://github.com/postcss/autoprefixer.git"
-        },
-        {
-            "moduleName": "axios",
-            "moduleUrl": "git+https://github.com/axios/axios.git",
-            "moduleVersion": "1.12.2",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "git+https://github.com/axios/axios.git"
-        },
-        {
-            "moduleName": "i18next",
-            "moduleUrl": "git+https://github.com/i18next/i18next.git",
-            "moduleVersion": "25.5.2",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "git+https://github.com/i18next/i18next.git"
-        },
-        {
-            "moduleName": "i18next-browser-languagedetector",
-            "moduleUrl": "git+https://github.com/i18next/i18next-browser-languageDetector.git",
-            "moduleVersion": "8.2.0",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "git+https://github.com/i18next/i18next-browser-languageDetector.git"
-        },
-        {
-            "moduleName": "i18next-http-backend",
-            "moduleUrl": "git+ssh://git@github.com/i18next/i18next-http-backend.git",
-            "moduleVersion": "3.0.2",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "git+ssh://git@github.com/i18next/i18next-http-backend.git"
-        },
-        {
-            "moduleName": "jszip",
-            "moduleUrl": "git+https://github.com/Stuk/jszip.git",
-            "moduleVersion": "3.10.1",
-            "moduleLicense": "(MIT OR GPL-3.0-or-later)",
-            "moduleLicenseUrl": "git+https://github.com/Stuk/jszip.git"
-        },
-        {
-            "moduleName": "license-report",
-            "moduleUrl": "git+https://github.com/kessler/license-report.git",
-            "moduleVersion": "6.8.0",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "git+https://github.com/kessler/license-report.git"
-        },
-        {
-            "moduleName": "pdf-lib",
-            "moduleUrl": "git+https://github.com/Hopding/pdf-lib.git",
-            "moduleVersion": "1.17.1",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "git+https://github.com/Hopding/pdf-lib.git"
-        },
-        {
-            "moduleName": "pdfjs-dist",
-            "moduleUrl": "git+https://github.com/mozilla/pdf.js.git",
-            "moduleVersion": "5.4.149",
-            "moduleLicense": "Apache-2.0",
-            "moduleLicenseUrl": "git+https://github.com/mozilla/pdf.js.git"
-        },
-        {
-            "moduleName": "posthog-js",
-            "moduleUrl": "git+https://github.com/PostHog/posthog-js.git",
-            "moduleVersion": "1.268.0",
-            "moduleLicense": "SEE LICENSE IN LICENSE https://github.com/PostHog/posthog-js/blob/main/LICENSE",
-            "moduleLicenseUrl": "git+https://github.com/PostHog/posthog-js.git"
-        },
-        {
-            "moduleName": "react",
-            "moduleUrl": "git+https://github.com/facebook/react.git",
-            "moduleVersion": "19.1.1",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "git+https://github.com/facebook/react.git"
-        },
-        {
-            "moduleName": "react-dom",
-            "moduleUrl": "git+https://github.com/facebook/react.git",
-            "moduleVersion": "19.1.1",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "git+https://github.com/facebook/react.git"
-        },
-        {
-            "moduleName": "react-i18next",
-            "moduleUrl": "git+https://github.com/i18next/react-i18next.git",
-            "moduleVersion": "15.7.3",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "git+https://github.com/i18next/react-i18next.git"
-        },
-        {
-            "moduleName": "react-router-dom",
-            "moduleUrl": "git+https://github.com/remix-run/react-router.git",
-            "moduleVersion": "7.9.1",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "git+https://github.com/remix-run/react-router.git"
-        },
-        {
-            "moduleName": "tailwindcss",
-            "moduleUrl": "git+https://github.com/tailwindlabs/tailwindcss.git",
-            "moduleVersion": "4.1.13",
-            "moduleLicense": "MIT",
-            "moduleLicenseUrl": "git+https://github.com/tailwindlabs/tailwindcss.git"
-        },
-        {
-            "moduleName": "web-vitals",
-            "moduleUrl": "git+https://github.com/GoogleChrome/web-vitals.git",
-            "moduleVersion": "5.1.0",
-            "moduleLicense": "Apache-2.0",
-            "moduleLicenseUrl": "git+https://github.com/GoogleChrome/web-vitals.git"
-        }
-    ]
-}
\ No newline at end of file
+  "dependencies": [
+    {
+      "moduleName": "@atlaskit/pragmatic-drag-and-drop",
+      "moduleUrl": "git+https://github.com/atlassian/pragmatic-drag-and-drop.git",
+      "moduleVersion": "1.7.7",
+      "moduleLicense": "Apache-2.0",
+      "moduleLicenseUrl": "git+https://github.com/atlassian/pragmatic-drag-and-drop.git"
+    },
+    {
+      "moduleName": "@embedpdf/core",
+      "moduleUrl": "https://registry.npmjs.org/@embedpdf/core/-/core-1.3.1.tgz",
+      "moduleVersion": "1.3.0",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "https://registry.npmjs.org/@embedpdf/core/-/core-1.3.1.tgz"
+    },
+    {
+      "moduleName": "@embedpdf/engines",
+      "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
+      "moduleVersion": "1.3.0",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
+    },
+    {
+      "moduleName": "@embedpdf/plugin-annotation",
+      "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
+      "moduleVersion": "1.3.0",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
+    },
+    {
+      "moduleName": "@embedpdf/plugin-export",
+      "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
+      "moduleVersion": "1.3.0",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
+    },
+    {
+      "moduleName": "@embedpdf/plugin-history",
+      "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
+      "moduleVersion": "1.3.0",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
+    },
+    {
+      "moduleName": "@embedpdf/plugin-interaction-manager",
+      "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
+      "moduleVersion": "1.3.0",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
+    },
+    {
+      "moduleName": "@embedpdf/plugin-loader",
+      "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
+      "moduleVersion": "1.3.0",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
+    },
+    {
+      "moduleName": "@embedpdf/plugin-pan",
+      "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
+      "moduleVersion": "1.3.0",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
+    },
+    {
+      "moduleName": "@embedpdf/plugin-render",
+      "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
+      "moduleVersion": "1.3.0",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
+    },
+    {
+      "moduleName": "@embedpdf/plugin-rotate",
+      "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
+      "moduleVersion": "1.3.0",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
+    },
+    {
+      "moduleName": "@embedpdf/plugin-scroll",
+      "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
+      "moduleVersion": "1.3.0",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
+    },
+    {
+      "moduleName": "@embedpdf/plugin-search",
+      "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
+      "moduleVersion": "1.3.0",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
+    },
+    {
+      "moduleName": "@embedpdf/plugin-selection",
+      "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
+      "moduleVersion": "1.3.0",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
+    },
+    {
+      "moduleName": "@embedpdf/plugin-spread",
+      "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
+      "moduleVersion": "1.3.0",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
+    },
+    {
+      "moduleName": "@embedpdf/plugin-thumbnail",
+      "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
+      "moduleVersion": "1.3.0",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
+    },
+    {
+      "moduleName": "@embedpdf/plugin-tiling",
+      "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
+      "moduleVersion": "1.3.0",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
+    },
+    {
+      "moduleName": "@embedpdf/plugin-viewport",
+      "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
+      "moduleVersion": "1.3.0",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
+    },
+    {
+      "moduleName": "@embedpdf/plugin-zoom",
+      "moduleUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git",
+      "moduleVersion": "1.3.0",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "git+https://github.com/embedpdf/embed-pdf-viewer.git"
+    },
+    {
+      "moduleName": "@emotion/react",
+      "moduleUrl": "git+https://github.com/emotion-js/emotion.git#main",
+      "moduleVersion": "11.14.0",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "git+https://github.com/emotion-js/emotion.git#main"
+    },
+    {
+      "moduleName": "@emotion/styled",
+      "moduleUrl": "git+https://github.com/emotion-js/emotion.git#main",
+      "moduleVersion": "11.14.1",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "git+https://github.com/emotion-js/emotion.git#main"
+    },
+    {
+      "moduleName": "@iconify/react",
+      "moduleUrl": "git+https://github.com/iconify/iconify.git",
+      "moduleVersion": "6.0.2",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "git+https://github.com/iconify/iconify.git"
+    },
+    {
+      "moduleName": "@mantine/core",
+      "moduleUrl": "git+https://github.com/mantinedev/mantine.git",
+      "moduleVersion": "8.3.1",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "git+https://github.com/mantinedev/mantine.git"
+    },
+    {
+      "moduleName": "@mantine/dates",
+      "moduleUrl": "git+https://github.com/mantinedev/mantine.git",
+      "moduleVersion": "8.3.1",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "git+https://github.com/mantinedev/mantine.git"
+    },
+    {
+      "moduleName": "@mantine/dropzone",
+      "moduleUrl": "git+https://github.com/mantinedev/mantine.git",
+      "moduleVersion": "8.3.1",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "git+https://github.com/mantinedev/mantine.git"
+    },
+    {
+      "moduleName": "@mantine/hooks",
+      "moduleUrl": "git+https://github.com/mantinedev/mantine.git",
+      "moduleVersion": "8.3.1",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "git+https://github.com/mantinedev/mantine.git"
+    },
+    {
+      "moduleName": "@mui/icons-material",
+      "moduleUrl": "git+https://github.com/mui/material-ui.git",
+      "moduleVersion": "7.3.2",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "git+https://github.com/mui/material-ui.git"
+    },
+    {
+      "moduleName": "@mui/material",
+      "moduleUrl": "git+https://github.com/mui/material-ui.git",
+      "moduleVersion": "7.3.2",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "git+https://github.com/mui/material-ui.git"
+    },
+    {
+      "moduleName": "@tailwindcss/postcss",
+      "moduleUrl": "git+https://github.com/tailwindlabs/tailwindcss.git",
+      "moduleVersion": "4.1.13",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "git+https://github.com/tailwindlabs/tailwindcss.git"
+    },
+    {
+      "moduleName": "@tanstack/react-virtual",
+      "moduleUrl": "git+https://github.com/TanStack/virtual.git",
+      "moduleVersion": "3.13.12",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "git+https://github.com/TanStack/virtual.git"
+    },
+    {
+      "moduleName": "autoprefixer",
+      "moduleUrl": "git+https://github.com/postcss/autoprefixer.git",
+      "moduleVersion": "10.4.21",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "git+https://github.com/postcss/autoprefixer.git"
+    },
+    {
+      "moduleName": "axios",
+      "moduleUrl": "git+https://github.com/axios/axios.git",
+      "moduleVersion": "1.12.2",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "git+https://github.com/axios/axios.git"
+    },
+    {
+      "moduleName": "i18next",
+      "moduleUrl": "git+https://github.com/i18next/i18next.git",
+      "moduleVersion": "25.5.2",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "git+https://github.com/i18next/i18next.git"
+    },
+    {
+      "moduleName": "i18next-browser-languagedetector",
+      "moduleUrl": "git+https://github.com/i18next/i18next-browser-languageDetector.git",
+      "moduleVersion": "8.2.0",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "git+https://github.com/i18next/i18next-browser-languageDetector.git"
+    },
+    {
+      "moduleName": "i18next-http-backend",
+      "moduleUrl": "git+ssh://git@github.com/i18next/i18next-http-backend.git",
+      "moduleVersion": "3.0.2",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "git+ssh://git@github.com/i18next/i18next-http-backend.git"
+    },
+    {
+      "moduleName": "jszip",
+      "moduleUrl": "git+https://github.com/Stuk/jszip.git",
+      "moduleVersion": "3.10.1",
+      "moduleLicense": "(MIT OR GPL-3.0-or-later)",
+      "moduleLicenseUrl": "git+https://github.com/Stuk/jszip.git"
+    },
+    {
+      "moduleName": "license-report",
+      "moduleUrl": "git+https://github.com/kessler/license-report.git",
+      "moduleVersion": "6.8.0",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "git+https://github.com/kessler/license-report.git"
+    },
+    {
+      "moduleName": "pdf-lib",
+      "moduleUrl": "git+https://github.com/Hopding/pdf-lib.git",
+      "moduleVersion": "1.17.1",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "git+https://github.com/Hopding/pdf-lib.git"
+    },
+    {
+      "moduleName": "pdfjs-dist",
+      "moduleUrl": "git+https://github.com/mozilla/pdf.js.git",
+      "moduleVersion": "5.4.149",
+      "moduleLicense": "Apache-2.0",
+      "moduleLicenseUrl": "git+https://github.com/mozilla/pdf.js.git"
+    },
+    {
+      "moduleName": "posthog-js",
+      "moduleUrl": "git+https://github.com/PostHog/posthog-js.git",
+      "moduleVersion": "1.268.0",
+      "moduleLicense": "SEE LICENSE IN LICENSE https://github.com/PostHog/posthog-js/blob/main/LICENSE",
+      "moduleLicenseUrl": "git+https://github.com/PostHog/posthog-js.git"
+    },
+    {
+      "moduleName": "react",
+      "moduleUrl": "git+https://github.com/facebook/react.git",
+      "moduleVersion": "19.1.1",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "git+https://github.com/facebook/react.git"
+    },
+    {
+      "moduleName": "react-dom",
+      "moduleUrl": "git+https://github.com/facebook/react.git",
+      "moduleVersion": "19.1.1",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "git+https://github.com/facebook/react.git"
+    },
+    {
+      "moduleName": "react-i18next",
+      "moduleUrl": "git+https://github.com/i18next/react-i18next.git",
+      "moduleVersion": "15.7.3",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "git+https://github.com/i18next/react-i18next.git"
+    },
+    {
+      "moduleName": "react-router-dom",
+      "moduleUrl": "git+https://github.com/remix-run/react-router.git",
+      "moduleVersion": "7.9.1",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "git+https://github.com/remix-run/react-router.git"
+    },
+    {
+      "moduleName": "tailwindcss",
+      "moduleUrl": "git+https://github.com/tailwindlabs/tailwindcss.git",
+      "moduleVersion": "4.1.13",
+      "moduleLicense": "MIT",
+      "moduleLicenseUrl": "git+https://github.com/tailwindlabs/tailwindcss.git"
+    },
+    {
+      "moduleName": "web-vitals",
+      "moduleUrl": "git+https://github.com/GoogleChrome/web-vitals.git",
+      "moduleVersion": "5.1.0",
+      "moduleLicense": "Apache-2.0",
+      "moduleLicenseUrl": "git+https://github.com/GoogleChrome/web-vitals.git"
+    }
+  ]
+}
diff --git a/frontend/src/core/App.tsx b/frontend/src/core/App.tsx
index f53031c4ba..c417ef1f65 100644
--- a/frontend/src/core/App.tsx
+++ b/frontend/src/core/App.tsx
@@ -21,9 +21,7 @@ import "@app/utils/fileIdSafety";
 function MobileScannerProviders({ children }: { children: React.ReactNode }) {
   return (
     <PreferencesProvider>
-      <RainbowThemeProvider>
-        {children}
-      </RainbowThemeProvider>
+      <RainbowThemeProvider>{children}</RainbowThemeProvider>
     </PreferencesProvider>
   );
 }
diff --git a/frontend/src/core/components/AppLayout.tsx b/frontend/src/core/components/AppLayout.tsx
index 9bcd31e6db..328758cf3a 100644
--- a/frontend/src/core/components/AppLayout.tsx
+++ b/frontend/src/core/components/AppLayout.tsx
@@ -1,6 +1,6 @@
-import { ReactNode } from 'react';
-import { useBanner } from '@app/contexts/BannerContext';
-import NavigationWarningModal from '@app/components/shared/NavigationWarningModal';
+import { ReactNode } from "react";
+import { useBanner } from "@app/contexts/BannerContext";
+import NavigationWarningModal from "@app/components/shared/NavigationWarningModal";
 
 interface AppLayoutProps {
   children: ReactNode;
@@ -21,11 +21,9 @@ export function AppLayout({ children }: AppLayoutProps) {
           height: 100% !important;
         }
       `}</style>
-      <div style={{ height: '100vh', display: 'flex', flexDirection: 'column' }}>
+      <div style={{ height: "100vh", display: "flex", flexDirection: "column" }}>
         {banner}
-        <div style={{ flex: 1, minHeight: 0, height: 0 }}>
-          {children}
-        </div>
+        <div style={{ flex: 1, minHeight: 0, height: 0 }}>{children}</div>
       </div>
       <NavigationWarningModal />
     </>
diff --git a/frontend/src/core/components/AppProviders.tsx b/frontend/src/core/components/AppProviders.tsx
index 75c7d281c3..3080f946c0 100644
--- a/frontend/src/core/components/AppProviders.tsx
+++ b/frontend/src/core/components/AppProviders.tsx
@@ -8,7 +8,12 @@ import { ToolWorkflowProvider } from "@app/contexts/ToolWorkflowContext";
 import { HotkeyProvider } from "@app/contexts/HotkeyContext";
 import { SidebarProvider } from "@app/contexts/SidebarContext";
 import { PreferencesProvider, usePreferences } from "@app/contexts/PreferencesContext";
-import { AppConfigProvider, AppConfigProviderProps, AppConfigRetryOptions, useAppConfig } from "@app/contexts/AppConfigContext";
+import {
+  AppConfigProvider,
+  AppConfigProviderProps,
+  AppConfigRetryOptions,
+  useAppConfig,
+} from "@app/contexts/AppConfigContext";
 import { RightRailProvider } from "@app/contexts/RightRailContext";
 import { ViewerProvider } from "@app/contexts/ViewerContext";
 import { SignatureProvider } from "@app/contexts/SignatureContext";
@@ -20,8 +25,8 @@ import { BannerProvider } from "@app/contexts/BannerContext";
 import ErrorBoundary from "@app/components/shared/ErrorBoundary";
 import { useScarfTracking } from "@app/hooks/useScarfTracking";
 import { useAppInitialization } from "@app/hooks/useAppInitialization";
-import { useLogoAssets } from '@app/hooks/useLogoAssets';
-import AppConfigLoader from '@app/components/shared/AppConfigLoader';
+import { useLogoAssets } from "@app/hooks/useLogoAssets";
+import AppConfigLoader from "@app/components/shared/AppConfigLoader";
 import { RedactionProvider } from "@app/contexts/RedactionContext";
 import { FormFillProvider } from "@app/tools/formFill/FormFillContext";
 
@@ -41,14 +46,14 @@ function BrandingAssetManager() {
   const { favicon, logo192, manifestHref } = useLogoAssets();
 
   useEffect(() => {
-    if (typeof document === 'undefined') {
+    if (typeof document === "undefined") {
       return;
     }
 
     const setLinkHref = (selector: string, href: string) => {
       const link = document.querySelector<HTMLLinkElement>(selector);
-      if (link && link.getAttribute('href') !== href) {
-        link.setAttribute('href', href);
+      if (link && link.getAttribute("href") !== href) {
+        link.setAttribute("href", href);
       }
     };
 
@@ -62,7 +67,7 @@ function BrandingAssetManager() {
 }
 
 // Avoid requirement to have props which are required in app providers anyway
-type AppConfigProviderOverrides = Omit<AppConfigProviderProps, 'children' | 'retryOptions'>;
+type AppConfigProviderOverrides = Omit<AppConfigProviderProps, "children" | "retryOptions">;
 
 export interface AppProvidersProps {
   children: ReactNode;
@@ -98,49 +103,44 @@ export function AppProviders({ children, appConfigRetryOptions, appConfigProvide
       <RainbowThemeProvider>
         <ErrorBoundary>
           <BannerProvider>
-              <AppConfigProvider
-                retryOptions={appConfigRetryOptions}
-                {...appConfigProviderProps}
-              >
-                <ScarfTrackingInitializer />
-                <AppConfigLoader />
-                <ServerDefaultsSync />
-                <FileContextProvider enableUrlSync={true} enablePersistence={true}>
-                  <AppInitializer />
-                  <BrandingAssetManager />
-                  <ToolRegistryProvider>
-                      <NavigationProvider>
-                        <FilesModalProvider>
-                          <ToolWorkflowProvider>
-                            <HotkeyProvider>
-                              <SidebarProvider>
-                                <ViewerProvider>
-                                  <PageEditorProvider>
-                                    <SignatureProvider>
-                                      <RedactionProvider>
-                                      <FormFillProvider>
+            <AppConfigProvider retryOptions={appConfigRetryOptions} {...appConfigProviderProps}>
+              <ScarfTrackingInitializer />
+              <AppConfigLoader />
+              <ServerDefaultsSync />
+              <FileContextProvider enableUrlSync={true} enablePersistence={true}>
+                <AppInitializer />
+                <BrandingAssetManager />
+                <ToolRegistryProvider>
+                  <NavigationProvider>
+                    <FilesModalProvider>
+                      <ToolWorkflowProvider>
+                        <HotkeyProvider>
+                          <SidebarProvider>
+                            <ViewerProvider>
+                              <PageEditorProvider>
+                                <SignatureProvider>
+                                  <RedactionProvider>
+                                    <FormFillProvider>
                                       <AnnotationProvider>
                                         <RightRailProvider>
                                           <TourOrchestrationProvider>
-                                            <AdminTourOrchestrationProvider>
-                                              {children}
-                                            </AdminTourOrchestrationProvider>
+                                            <AdminTourOrchestrationProvider>{children}</AdminTourOrchestrationProvider>
                                           </TourOrchestrationProvider>
                                         </RightRailProvider>
                                       </AnnotationProvider>
-                                      </FormFillProvider>
-                                      </RedactionProvider>
-                                    </SignatureProvider>
-                                  </PageEditorProvider>
-                                </ViewerProvider>
-                              </SidebarProvider>
-                            </HotkeyProvider>
-                          </ToolWorkflowProvider>
-                        </FilesModalProvider>
-                      </NavigationProvider>
-                    </ToolRegistryProvider>
-                  </FileContextProvider>
-              </AppConfigProvider>
+                                    </FormFillProvider>
+                                  </RedactionProvider>
+                                </SignatureProvider>
+                              </PageEditorProvider>
+                            </ViewerProvider>
+                          </SidebarProvider>
+                        </HotkeyProvider>
+                      </ToolWorkflowProvider>
+                    </FilesModalProvider>
+                  </NavigationProvider>
+                </ToolRegistryProvider>
+              </FileContextProvider>
+            </AppConfigProvider>
           </BannerProvider>
         </ErrorBoundary>
       </RainbowThemeProvider>
diff --git a/frontend/src/core/components/FileManager.tsx b/frontend/src/core/components/FileManager.tsx
index e3c9a84661..fe140ab173 100644
--- a/frontend/src/core/components/FileManager.tsx
+++ b/frontend/src/core/components/FileManager.tsx
@@ -1,19 +1,19 @@
-import React, { useState, useCallback, useEffect, useMemo } from 'react';
-import { Modal } from '@mantine/core';
-import { Dropzone } from '@mantine/dropzone';
-import { StirlingFileStub } from '@app/types/fileContext';
-import { useFileManager } from '@app/hooks/useFileManager';
-import { useFilesModalContext } from '@app/contexts/FilesModalContext';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
-import { Tool } from '@app/types/tool';
-import MobileLayout from '@app/components/fileManager/MobileLayout';
-import DesktopLayout from '@app/components/fileManager/DesktopLayout';
-import DragOverlay from '@app/components/fileManager/DragOverlay';
-import { FileManagerProvider } from '@app/contexts/FileManagerContext';
-import { Z_INDEX_FILE_MANAGER_MODAL } from '@app/styles/zIndex';
-import { isGoogleDriveConfigured, extractGoogleDriveBackendConfig } from '@app/services/googleDrivePickerService';
-import { loadScript } from '@app/utils/scriptLoader';
-import { useAllFiles } from '@app/contexts/FileContext';
+import React, { useState, useCallback, useEffect, useMemo } from "react";
+import { Modal } from "@mantine/core";
+import { Dropzone } from "@mantine/dropzone";
+import { StirlingFileStub } from "@app/types/fileContext";
+import { useFileManager } from "@app/hooks/useFileManager";
+import { useFilesModalContext } from "@app/contexts/FilesModalContext";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
+import { Tool } from "@app/types/tool";
+import MobileLayout from "@app/components/fileManager/MobileLayout";
+import DesktopLayout from "@app/components/fileManager/DesktopLayout";
+import DragOverlay from "@app/components/fileManager/DragOverlay";
+import { FileManagerProvider } from "@app/contexts/FileManagerContext";
+import { Z_INDEX_FILE_MANAGER_MODAL } from "@app/styles/zIndex";
+import { isGoogleDriveConfigured, extractGoogleDriveBackendConfig } from "@app/services/googleDrivePickerService";
+import { loadScript } from "@app/utils/scriptLoader";
+import { useAllFiles } from "@app/contexts/FileContext";
 
 interface FileManagerProps {
   selectedTool?: Tool | null;
@@ -32,47 +32,59 @@ const FileManager: React.FC<FileManagerProps> = ({ selectedTool }) => {
   const { fileIds: activeFileIds } = useAllFiles();
 
   // File management handlers
-  const isFileSupported = useCallback((fileName: string) => {
-    if (!selectedTool?.supportedFormats) return true;
-    const extension = fileName.split('.').pop()?.toLowerCase();
-    return selectedTool.supportedFormats.includes(extension || '');
-  }, [selectedTool?.supportedFormats]);
+  const isFileSupported = useCallback(
+    (fileName: string) => {
+      if (!selectedTool?.supportedFormats) return true;
+      const extension = fileName.split(".").pop()?.toLowerCase();
+      return selectedTool.supportedFormats.includes(extension || "");
+    },
+    [selectedTool?.supportedFormats],
+  );
 
   const refreshRecentFiles = useCallback(async () => {
     const files = await loadRecentFiles();
     setRecentFiles(files);
   }, [loadRecentFiles]);
 
-  const handleRecentFilesSelected = useCallback(async (files: StirlingFileStub[]) => {
-    try {
-      // Use StirlingFileStubs directly - preserves all metadata!
-      onRecentFileSelect(files);
-    } catch (error) {
-      console.error('Failed to process selected files:', error);
-    }
-  }, [onRecentFileSelect]);
-
-  const handleNewFileUpload = useCallback(async (files: File[]) => {
-    if (files.length > 0) {
+  const handleRecentFilesSelected = useCallback(
+    async (files: StirlingFileStub[]) => {
       try {
-        // Files will get IDs assigned through onFilesSelect -> FileContext addFiles
-        onFileUpload(files);
-        await refreshRecentFiles();
+        // Use StirlingFileStubs directly - preserves all metadata!
+        onRecentFileSelect(files);
       } catch (error) {
-        console.error('Failed to process dropped files:', error);
+        console.error("Failed to process selected files:", error);
       }
-    }
-  }, [onFileUpload, refreshRecentFiles]);
+    },
+    [onRecentFileSelect],
+  );
 
-  const handleRemoveFileByIndex = useCallback(async (index: number) => {
-    await handleRemoveFile(index, recentFiles, setRecentFiles);
-  }, [handleRemoveFile, recentFiles]);
+  const handleNewFileUpload = useCallback(
+    async (files: File[]) => {
+      if (files.length > 0) {
+        try {
+          // Files will get IDs assigned through onFilesSelect -> FileContext addFiles
+          onFileUpload(files);
+          await refreshRecentFiles();
+        } catch (error) {
+          console.error("Failed to process dropped files:", error);
+        }
+      }
+    },
+    [onFileUpload, refreshRecentFiles],
+  );
+
+  const handleRemoveFileByIndex = useCallback(
+    async (index: number) => {
+      await handleRemoveFile(index, recentFiles, setRecentFiles);
+    },
+    [handleRemoveFile, recentFiles],
+  );
 
   useEffect(() => {
     const checkMobile = () => setIsMobile(window.innerWidth < 1030);
     checkMobile();
-    window.addEventListener('resize', checkMobile);
-    return () => window.removeEventListener('resize', checkMobile);
+    window.addEventListener("resize", checkMobile);
+    return () => window.removeEventListener("resize", checkMobile);
   }, []);
 
   useEffect(() => {
@@ -89,7 +101,7 @@ const FileManager: React.FC<FileManagerProps> = ({ selectedTool }) => {
     return () => {
       // StoredFileMetadata doesn't have blob URLs, so no cleanup needed
       // Blob URLs are managed by FileContext and tool operations
-      console.log('FileManager unmounting - FileContext handles blob URL cleanup');
+      console.log("FileManager unmounting - FileContext handles blob URL cleanup");
     };
   }, []);
 
@@ -97,7 +109,7 @@ const FileManager: React.FC<FileManagerProps> = ({ selectedTool }) => {
   // Use useMemo to only track Google Drive config changes, not all config updates
   const googleDriveBackendConfig = useMemo(
     () => extractGoogleDriveBackendConfig(config),
-    [config?.googleDriveEnabled, config?.googleDriveClientId, config?.googleDriveApiKey, config?.googleDriveAppId]
+    [config?.googleDriveEnabled, config?.googleDriveClientId, config?.googleDriveApiKey, config?.googleDriveAppId],
   );
 
   useEffect(() => {
@@ -105,29 +117,29 @@ const FileManager: React.FC<FileManagerProps> = ({ selectedTool }) => {
       // Load scripts in parallel without blocking
       Promise.all([
         loadScript({
-          src: 'https://apis.google.com/js/api.js',
-          id: 'gapi-script',
+          src: "https://apis.google.com/js/api.js",
+          id: "gapi-script",
           async: true,
           defer: true,
         }),
         loadScript({
-          src: 'https://accounts.google.com/gsi/client',
-          id: 'gis-script',
+          src: "https://accounts.google.com/gsi/client",
+          id: "gis-script",
           async: true,
           defer: true,
         }),
       ]).catch((error) => {
-        console.warn('Failed to preload Google Drive scripts:', error);
+        console.warn("Failed to preload Google Drive scripts:", error);
       });
     }
   }, [googleDriveBackendConfig]);
 
   // Modal size constants for consistent scaling
-  const modalHeight = '80vh';
-  const modalWidth = isMobile ? '100%' : '80vw';
-  const modalMaxWidth = isMobile ? '100%' : '1200px';
-  const modalMaxHeight = '1200px';
-  const modalMinWidth = isMobile ? '320px' : '800px';
+  const modalHeight = "80vh";
+  const modalWidth = isMobile ? "100%" : "80vw";
+  const modalMaxWidth = isMobile ? "100%" : "1200px";
+  const modalMaxHeight = "1200px";
+  const modalMinWidth = isMobile ? "320px" : "800px";
 
   return (
     <Modal
@@ -141,23 +153,25 @@ const FileManager: React.FC<FileManagerProps> = ({ selectedTool }) => {
       zIndex={Z_INDEX_FILE_MANAGER_MODAL}
       styles={{
         content: {
-          position: 'relative',
-          margin: isMobile ? '1rem' : '2rem'
+          position: "relative",
+          margin: isMobile ? "1rem" : "2rem",
         },
         body: { padding: 0 },
-        header: { display: 'none' }
+        header: { display: "none" },
       }}
     >
-      <div style={{
-        position: 'relative',
-        height: modalHeight,
-        width: modalWidth,
-        maxWidth: modalMaxWidth,
-        maxHeight: modalMaxHeight,
-        minWidth: modalMinWidth,
-        margin: '0 auto',
-        overflow: 'hidden'
-      }}>
+      <div
+        style={{
+          position: "relative",
+          height: modalHeight,
+          width: modalWidth,
+          maxWidth: modalMaxWidth,
+          maxHeight: modalMaxHeight,
+          minWidth: modalMinWidth,
+          margin: "0 auto",
+          overflow: "hidden",
+        }}
+      >
         <Dropzone
           onDrop={handleNewFileUpload}
           onDragEnter={() => setIsDragging(true)}
@@ -165,14 +179,14 @@ const FileManager: React.FC<FileManagerProps> = ({ selectedTool }) => {
           multiple={true}
           activateOnClick={false}
           style={{
-            height: '100%',
-            width: '100%',
-            border: 'none',
-            borderRadius: 'var(--radius-md)',
-            backgroundColor: 'var(--bg-file-manager)'
+            height: "100%",
+            width: "100%",
+            border: "none",
+            borderRadius: "var(--radius-md)",
+            backgroundColor: "var(--bg-file-manager)",
           }}
           styles={{
-            inner: { pointerEvents: 'all' }
+            inner: { pointerEvents: "all" },
           }}
         >
           <FileManagerProvider
diff --git a/frontend/src/core/components/StorageStatsCard.tsx b/frontend/src/core/components/StorageStatsCard.tsx
index d04fd11ac4..bc71845bbf 100644
--- a/frontend/src/core/components/StorageStatsCard.tsx
+++ b/frontend/src/core/components/StorageStatsCard.tsx
@@ -14,12 +14,7 @@ interface StorageStatsCardProps {
   onReloadFiles: () => void;
 }
 
-const StorageStatsCard: React.FC<StorageStatsCardProps> = ({
-  storageStats,
-  filesCount,
-  onClearAll,
-  onReloadFiles,
-}) => {
+const StorageStatsCard: React.FC<StorageStatsCardProps> = ({ storageStats, filesCount, onClearAll, onReloadFiles }) => {
   const { t } = useTranslation();
 
   if (!storageStats) return null;
@@ -59,12 +54,7 @@ const StorageStatsCard: React.FC<StorageStatsCardProps> = ({
               {t("fileManager.clearAll", "Clear All")}
             </Button>
           )}
-          <Button
-            variant="light"
-            color="blue"
-            size="xs"
-            onClick={onReloadFiles}
-          >
+          <Button variant="light" color="blue" size="xs" onClick={onReloadFiles}>
             Reload Files
           </Button>
         </Group>
@@ -73,4 +63,4 @@ const StorageStatsCard: React.FC<StorageStatsCardProps> = ({
   );
 };
 
-export default StorageStatsCard;
\ No newline at end of file
+export default StorageStatsCard;
diff --git a/frontend/src/core/components/annotation/providers/PDFAnnotationProvider.tsx b/frontend/src/core/components/annotation/providers/PDFAnnotationProvider.tsx
index 0979d59e35..d1c8f5c087 100644
--- a/frontend/src/core/components/annotation/providers/PDFAnnotationProvider.tsx
+++ b/frontend/src/core/components/annotation/providers/PDFAnnotationProvider.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, useContext, ReactNode } from 'react';
+import React, { createContext, useContext, ReactNode } from "react";
 
 interface PDFAnnotationContextValue {
   // Drawing mode management
@@ -58,7 +58,7 @@ export const PDFAnnotationProvider: React.FC<PDFAnnotationProviderProps> = ({
   getImageData,
   isPlacementMode,
   signatureConfig,
-  setSignatureConfig
+  setSignatureConfig,
 }) => {
   const contextValue: PDFAnnotationContextValue = {
     activateDrawMode,
@@ -72,20 +72,16 @@ export const PDFAnnotationProvider: React.FC<PDFAnnotationProviderProps> = ({
     getImageData,
     isPlacementMode,
     signatureConfig,
-    setSignatureConfig
+    setSignatureConfig,
   };
 
-  return (
-    <PDFAnnotationContext.Provider value={contextValue}>
-      {children}
-    </PDFAnnotationContext.Provider>
-  );
+  return <PDFAnnotationContext.Provider value={contextValue}>{children}</PDFAnnotationContext.Provider>;
 };
 
 export const usePDFAnnotation = (): PDFAnnotationContextValue => {
   const context = useContext(PDFAnnotationContext);
   if (context === undefined) {
-    throw new Error('usePDFAnnotation must be used within a PDFAnnotationProvider');
+    throw new Error("usePDFAnnotation must be used within a PDFAnnotationProvider");
   }
   return context;
-};
\ No newline at end of file
+};
diff --git a/frontend/src/core/components/annotation/shared/BaseAnnotationTool.tsx b/frontend/src/core/components/annotation/shared/BaseAnnotationTool.tsx
index ea093b5be8..07a441abd5 100644
--- a/frontend/src/core/components/annotation/shared/BaseAnnotationTool.tsx
+++ b/frontend/src/core/components/annotation/shared/BaseAnnotationTool.tsx
@@ -1,10 +1,10 @@
-import React, { useEffect, useState } from 'react';
-import { Stack, Alert, Text } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { DrawingControls } from '@app/components/annotation/shared/DrawingControls';
-import { ColorPicker } from '@app/components/annotation/shared/ColorPicker';
-import { usePDFAnnotation } from '@app/components/annotation/providers/PDFAnnotationProvider';
-import { useSignature } from '@app/contexts/SignatureContext';
+import React, { useEffect, useState } from "react";
+import { Stack, Alert, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { DrawingControls } from "@app/components/annotation/shared/DrawingControls";
+import { ColorPicker } from "@app/components/annotation/shared/ColorPicker";
+import { usePDFAnnotation } from "@app/components/annotation/providers/PDFAnnotationProvider";
+import { useSignature } from "@app/contexts/SignatureContext";
 
 export interface AnnotationToolConfig {
   enableDrawing?: boolean;
@@ -25,17 +25,13 @@ export const BaseAnnotationTool: React.FC<BaseAnnotationToolProps> = ({
   config,
   children,
   onSignatureDataChange,
-  disabled = false
+  disabled = false,
 }) => {
   const { t } = useTranslation();
-  const {
-    activateSignaturePlacementMode,
-    undo,
-    redo
-  } = usePDFAnnotation();
+  const { activateSignaturePlacementMode, undo, redo } = usePDFAnnotation();
   const { historyApiRef } = useSignature();
 
-  const [selectedColor, setSelectedColor] = useState('#000000');
+  const [selectedColor, setSelectedColor] = useState("#000000");
   const [isColorPickerOpen, setIsColorPickerOpen] = useState(false);
   const [signatureData, setSignatureData] = useState<string | null>(null);
   const [historyAvailability, setHistoryAvailability] = useState({ canUndo: false, canRedo: false });
@@ -94,14 +90,12 @@ export const BaseAnnotationTool: React.FC<BaseAnnotationToolProps> = ({
         signatureData,
         onSignatureDataChange: handleSignatureDataChange,
         onColorSwatchClick: () => setIsColorPickerOpen(true),
-        disabled
+        disabled,
       })}
 
       {/* Instructions for placing signature */}
-      <Alert color="blue" title={t('sign.instructions.title', 'How to add signature')}>
-        <Text size="sm">
-          Click anywhere on the PDF to place your annotation.
-        </Text>
+      <Alert color="blue" title={t("sign.instructions.title", "How to add signature")}>
+        <Text size="sm">Click anywhere on the PDF to place your annotation.</Text>
       </Alert>
 
       {/* Color Picker Modal */}
diff --git a/frontend/src/core/components/annotation/shared/ColorControl.tsx b/frontend/src/core/components/annotation/shared/ColorControl.tsx
index 16b3f845bb..66ff868fd0 100644
--- a/frontend/src/core/components/annotation/shared/ColorControl.tsx
+++ b/frontend/src/core/components/annotation/shared/ColorControl.tsx
@@ -1,15 +1,15 @@
-import { ActionIcon, Tooltip, Popover, Stack, ColorSwatch, ColorPicker as MantineColorPicker, Group } from '@mantine/core';
-import { useState, useCallback, useEffect } from 'react';
-import ColorizeIcon from '@mui/icons-material/Colorize';
+import { ActionIcon, Tooltip, Popover, Stack, ColorSwatch, ColorPicker as MantineColorPicker, Group } from "@mantine/core";
+import { useState, useCallback, useEffect } from "react";
+import ColorizeIcon from "@mui/icons-material/Colorize";
 
 // safari and firefox do not support the eye dropper API, only edge, chrome and opera do.
 // the button is hidden in the UI if the API is not supported.
-const supportsEyeDropper = typeof window !== 'undefined' && 'EyeDropper' in window;
+const supportsEyeDropper = typeof window !== "undefined" && "EyeDropper" in window;
 
 interface EyeDropper {
   open(): Promise<{ sRGBHex: string }>;
 }
-declare const EyeDropper: { new(): EyeDropper };
+declare const EyeDropper: { new (): EyeDropper };
 
 interface ColorControlProps {
   value: string;
@@ -24,7 +24,9 @@ export function ColorControl({ value, onChange, label, disabled = false }: Color
   // Only propagate to the parent (which triggers expensive annotation updates)
   // on onChangeEnd (mouse-up / swatch click), preventing infinite re-render loops.
   const [localColor, setLocalColor] = useState(value);
-  useEffect(() => { setLocalColor(value); }, [value]);
+  useEffect(() => {
+    setLocalColor(value);
+  }, [value]);
 
   const handleEyeDropper = useCallback(async () => {
     if (!supportsEyeDropper) return;
@@ -50,13 +52,13 @@ export function ColorControl({ value, onChange, label, disabled = false }: Color
             styles={{
               root: {
                 flexShrink: 0,
-                backgroundColor: 'var(--bg-raised)',
-                border: '1px solid var(--border-default)',
-                color: 'var(--text-secondary)',
-                '&:hover': {
-                  backgroundColor: 'var(--hover-bg)',
-                  borderColor: 'var(--border-strong)',
-                  color: 'var(--text-primary)',
+                backgroundColor: "var(--bg-raised)",
+                border: "1px solid var(--border-default)",
+                color: "var(--text-secondary)",
+                "&:hover": {
+                  backgroundColor: "var(--hover-bg)",
+                  borderColor: "var(--border-strong)",
+                  color: "var(--text-primary)",
                 },
               },
             }}
@@ -73,8 +75,16 @@ export function ColorControl({ value, onChange, label, disabled = false }: Color
             onChange={setLocalColor}
             onChangeEnd={onChange}
             swatches={[
-              '#000000', '#ffffff', '#ff0000', '#00ff00', '#0000ff',
-              '#ffff00', '#ff00ff', '#00ffff', '#ffa500', 'transparent'
+              "#000000",
+              "#ffffff",
+              "#ff0000",
+              "#00ff00",
+              "#0000ff",
+              "#ffff00",
+              "#ff00ff",
+              "#00ffff",
+              "#ffa500",
+              "transparent",
             ]}
             swatchesPerRow={5}
             size="sm"
@@ -82,7 +92,13 @@ export function ColorControl({ value, onChange, label, disabled = false }: Color
           {supportsEyeDropper && (
             <Group justify="flex-end">
               <Tooltip label="Pick colour from screen">
-                <ActionIcon variant="subtle" color="gray" size="sm" onClick={handleEyeDropper} style={{ color: 'var(--text-primary)' }}>
+                <ActionIcon
+                  variant="subtle"
+                  color="gray"
+                  size="sm"
+                  onClick={handleEyeDropper}
+                  style={{ color: "var(--text-primary)" }}
+                >
                   <ColorizeIcon style={{ fontSize: 16 }} />
                 </ActionIcon>
               </Tooltip>
diff --git a/frontend/src/core/components/annotation/shared/ColorPicker.tsx b/frontend/src/core/components/annotation/shared/ColorPicker.tsx
index 21656b1f23..71f326a7d5 100644
--- a/frontend/src/core/components/annotation/shared/ColorPicker.tsx
+++ b/frontend/src/core/components/annotation/shared/ColorPicker.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import { Modal, Stack, ColorPicker as MantineColorPicker, Group, Button, ColorSwatch, Slider, Text } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
+import React from "react";
+import { Modal, Stack, ColorPicker as MantineColorPicker, Group, Button, ColorSwatch, Slider, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
 
 interface ColorPickerProps {
   isOpen: boolean;
@@ -26,48 +26,42 @@ export const ColorPicker: React.FC<ColorPickerProps> = ({
   opacityLabel,
 }) => {
   const { t } = useTranslation();
-  const resolvedTitle = title ?? t('colorPicker.title', 'Choose colour');
-  const resolvedOpacityLabel = opacityLabel ?? t('annotation.opacity', 'Opacity');
+  const resolvedTitle = title ?? t("colorPicker.title", "Choose colour");
+  const resolvedOpacityLabel = opacityLabel ?? t("annotation.opacity", "Opacity");
 
   return (
-    <Modal
-      opened={isOpen}
-      onClose={onClose}
-      title={resolvedTitle}
-      size="sm"
-      centered
-    >
+    <Modal opened={isOpen} onClose={onClose} title={resolvedTitle} size="sm" centered>
       <Stack gap="md">
         <MantineColorPicker
           format="hex"
           value={selectedColor}
           onChange={onColorChange}
-          swatches={['#000000', '#0066cc', '#cc0000', '#cc6600', '#009900', '#6600cc']}
+          swatches={["#000000", "#0066cc", "#cc0000", "#cc6600", "#009900", "#6600cc"]}
           swatchesPerRow={6}
           size="lg"
           fullWidth
         />
         {showOpacity && onOpacityChange && opacity !== undefined && (
           <Stack gap="xs">
-            <Text size="sm" fw={500}>{resolvedOpacityLabel}</Text>
+            <Text size="sm" fw={500}>
+              {resolvedOpacityLabel}
+            </Text>
             <Slider
               min={10}
               max={100}
               value={opacity}
               onChange={onOpacityChange}
               marks={[
-                { value: 25, label: '25%' },
-                { value: 50, label: '50%' },
-                { value: 75, label: '75%' },
-                { value: 100, label: '100%' },
+                { value: 25, label: "25%" },
+                { value: 50, label: "50%" },
+                { value: 75, label: "75%" },
+                { value: 100, label: "100%" },
               ]}
             />
           </Stack>
         )}
         <Group justify="flex-end">
-          <Button onClick={onClose}>
-            {t('common.done', 'Done')}
-          </Button>
+          <Button onClick={onClose}>{t("common.done", "Done")}</Button>
         </Group>
       </Stack>
     </Modal>
@@ -80,18 +74,6 @@ interface ColorSwatchButtonProps {
   size?: number;
 }
 
-export const ColorSwatchButton: React.FC<ColorSwatchButtonProps> = ({
-  color,
-  onClick,
-  size = 24
-}) => {
-  return (
-    <ColorSwatch
-      color={color}
-      size={size}
-      radius={0}
-      style={{ cursor: 'pointer' }}
-      onClick={onClick}
-    />
-  );
+export const ColorSwatchButton: React.FC<ColorSwatchButtonProps> = ({ color, onClick, size = 24 }) => {
+  return <ColorSwatch color={color} size={size} radius={0} style={{ cursor: "pointer" }} onClick={onClick} />;
 };
diff --git a/frontend/src/core/components/annotation/shared/DrawingCanvas.tsx b/frontend/src/core/components/annotation/shared/DrawingCanvas.tsx
index fd8864be26..080a05c83a 100644
--- a/frontend/src/core/components/annotation/shared/DrawingCanvas.tsx
+++ b/frontend/src/core/components/annotation/shared/DrawingCanvas.tsx
@@ -1,10 +1,10 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { Paper, Button, Modal, Stack, Text, Group } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { ColorSwatchButton } from '@app/components/annotation/shared/ColorPicker';
-import PenSizeSelector from '@app/components/tools/sign/PenSizeSelector';
-import SignaturePad from 'signature_pad';
-import { PrivateContent } from '@app/components/shared/PrivateContent';
+import React, { useEffect, useRef, useState } from "react";
+import { Paper, Button, Modal, Stack, Text, Group } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { ColorSwatchButton } from "@app/components/annotation/shared/ColorPicker";
+import PenSizeSelector from "@app/components/tools/sign/PenSizeSelector";
+import SignaturePad from "signature_pad";
+import { PrivateContent } from "@app/components/shared/PrivateContent";
 
 interface DrawingCanvasProps {
   selectedColor: string;
@@ -68,7 +68,7 @@ export const DrawingCanvas: React.FC<DrawingCanvasProps> = ({
       if (savedSignatureData) {
         const img = new Image();
         img.onload = () => {
-          const ctx = canvas.getContext('2d');
+          const ctx = canvas.getContext("2d");
           if (ctx) {
             ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
           }
@@ -92,13 +92,16 @@ export const DrawingCanvas: React.FC<DrawingCanvasProps> = ({
   }, [autoOpen]);
 
   const trimCanvas = (canvas: HTMLCanvasElement): string => {
-    const ctx = canvas.getContext('2d');
-    if (!ctx) return canvas.toDataURL('image/png');
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return canvas.toDataURL("image/png");
 
     const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
     const pixels = imageData.data;
 
-    let minX = canvas.width, minY = canvas.height, maxX = 0, maxY = 0;
+    let minX = canvas.width,
+      minY = canvas.height,
+      maxX = 0,
+      maxY = 0;
 
     // Find bounds of non-transparent pixels
     for (let y = 0; y < canvas.height; y++) {
@@ -117,21 +120,21 @@ export const DrawingCanvas: React.FC<DrawingCanvasProps> = ({
     const trimHeight = maxY - minY + 1;
 
     // Create trimmed canvas
-    const trimmedCanvas = document.createElement('canvas');
+    const trimmedCanvas = document.createElement("canvas");
     trimmedCanvas.width = trimWidth;
     trimmedCanvas.height = trimHeight;
-    const trimmedCtx = trimmedCanvas.getContext('2d');
+    const trimmedCtx = trimmedCanvas.getContext("2d");
     if (trimmedCtx) {
       trimmedCtx.drawImage(canvas, minX, minY, trimWidth, trimHeight, 0, 0, trimWidth, trimHeight);
     }
 
-    return trimmedCanvas.toDataURL('image/png');
+    return trimmedCanvas.toDataURL("image/png");
   };
 
   const renderPreview = (dataUrl: string) => {
     const canvas = previewCanvasRef.current;
     if (!canvas) return;
-    const ctx = canvas.getContext('2d');
+    const ctx = canvas.getContext("2d");
     if (!ctx) return;
 
     const img = new Image();
@@ -153,7 +156,7 @@ export const DrawingCanvas: React.FC<DrawingCanvasProps> = ({
       const canvas = modalCanvasRef.current;
       if (canvas) {
         const trimmedPng = trimCanvas(canvas);
-        const untrimmedPng = canvas.toDataURL('image/png');
+        const untrimmedPng = canvas.toDataURL("image/png");
         setSavedSignatureData(untrimmedPng); // Save untrimmed for restoration
         onSignatureDataChange(trimmedPng);
         renderPreview(trimmedPng);
@@ -176,7 +179,7 @@ export const DrawingCanvas: React.FC<DrawingCanvasProps> = ({
       padRef.current.clear();
     }
     if (previewCanvasRef.current) {
-      const ctx = previewCanvasRef.current.getContext('2d');
+      const ctx = previewCanvasRef.current.getContext("2d");
       if (ctx) {
         ctx.clearRect(0, 0, previewCanvasRef.current.width, previewCanvasRef.current.height);
       }
@@ -209,7 +212,7 @@ export const DrawingCanvas: React.FC<DrawingCanvasProps> = ({
   useEffect(() => {
     const canvas = previewCanvasRef.current;
     if (!canvas) return;
-    const ctx = canvas.getContext('2d');
+    const ctx = canvas.getContext("2d");
     if (!ctx) return;
 
     if (!initialSignatureData) {
@@ -227,42 +230,45 @@ export const DrawingCanvas: React.FC<DrawingCanvasProps> = ({
       <Paper withBorder p="md">
         <Stack gap="sm">
           <PrivateContent>
-          <Text fw={500}>{t('sign.canvas.heading', 'Draw your signature')}</Text>
-          <canvas
-            ref={previewCanvasRef}
-            width={width}
-            height={height}
-            style={{
-              border: '1px solid #ccc',
-              borderRadius: '4px',
-              cursor: disabled ? 'default' : 'pointer',
-              backgroundColor: '#ffffff',
-              width: '100%',
-            }}
-            onClick={disabled ? undefined : openModal}
-          />
+            <Text fw={500}>{t("sign.canvas.heading", "Draw your signature")}</Text>
+            <canvas
+              ref={previewCanvasRef}
+              width={width}
+              height={height}
+              style={{
+                border: "1px solid #ccc",
+                borderRadius: "4px",
+                cursor: disabled ? "default" : "pointer",
+                backgroundColor: "#ffffff",
+                width: "100%",
+              }}
+              onClick={disabled ? undefined : openModal}
+            />
           </PrivateContent>
           <Text size="sm" c="dimmed" ta="center">
-            {t('sign.canvas.clickToOpen', 'Click to open the drawing canvas')}
+            {t("sign.canvas.clickToOpen", "Click to open the drawing canvas")}
           </Text>
         </Stack>
       </Paper>
 
-      <Modal opened={modalOpen} onClose={closeModal} title={t('sign.canvas.modalTitle', 'Draw your signature')} size="auto" centered>
+      <Modal
+        opened={modalOpen}
+        onClose={closeModal}
+        title={t("sign.canvas.modalTitle", "Draw your signature")}
+        size="auto"
+        centered
+      >
         <Stack gap="md">
           <Group gap="lg" align="flex-end" wrap="wrap">
             <Stack gap={4} style={{ minWidth: 120 }}>
               <Text size="sm" fw={500}>
-                {t('sign.canvas.colorLabel', 'Colour')}
+                {t("sign.canvas.colorLabel", "Colour")}
               </Text>
-              <ColorSwatchButton
-                color={selectedColor}
-                onClick={onColorSwatchClick}
-              />
+              <ColorSwatchButton color={selectedColor} onClick={onColorSwatchClick} />
             </Stack>
             <Stack gap={4} style={{ minWidth: 120 }}>
               <Text size="sm" fw={500}>
-                {t('sign.canvas.penSizeLabel', 'Pen size')}
+                {t("sign.canvas.penSizeLabel", "Pen size")}
               </Text>
               <PenSizeSelector
                 value={penSize}
@@ -272,9 +278,9 @@ export const DrawingCanvas: React.FC<DrawingCanvasProps> = ({
                   updatePenSize(size);
                 }}
                 onInputChange={onPenSizeInputChange}
-                placeholder={t('sign.canvas.penSizePlaceholder', 'Size')}
+                placeholder={t("sign.canvas.penSizePlaceholder", "Size")}
                 size="compact-sm"
-                style={{ width: '80px' }}
+                style={{ width: "80px" }}
               />
             </Stack>
           </Group>
@@ -286,26 +292,24 @@ export const DrawingCanvas: React.FC<DrawingCanvasProps> = ({
                 if (el) initPad(el);
               }}
               style={{
-                border: '1px solid #ccc',
-                borderRadius: '4px',
-                display: 'block',
-                touchAction: 'none',
-                backgroundColor: 'white',
-                width: '100%',
-                maxWidth: '50rem',
-                height: '25rem',
-                cursor: 'crosshair',
+                border: "1px solid #ccc",
+                borderRadius: "4px",
+                display: "block",
+                touchAction: "none",
+                backgroundColor: "white",
+                width: "100%",
+                maxWidth: "50rem",
+                height: "25rem",
+                cursor: "crosshair",
               }}
             />
           </PrivateContent>
 
-          <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+          <div style={{ display: "flex", justifyContent: "space-between" }}>
             <Button variant="subtle" color="red" onClick={clear}>
-              {t('sign.canvas.clear', 'Clear canvas')}
-            </Button>
-            <Button onClick={closeModal}>
-              {t('common.done', 'Done')}
+              {t("sign.canvas.clear", "Clear canvas")}
             </Button>
+            <Button onClick={closeModal}>{t("common.done", "Done")}</Button>
           </div>
         </Stack>
       </Modal>
diff --git a/frontend/src/core/components/annotation/shared/DrawingControls.tsx b/frontend/src/core/components/annotation/shared/DrawingControls.tsx
index 3c28a594e0..9de5e45b9a 100644
--- a/frontend/src/core/components/annotation/shared/DrawingControls.tsx
+++ b/frontend/src/core/components/annotation/shared/DrawingControls.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
-import { Group, Button, ActionIcon, Tooltip } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { LocalIcon } from '@app/components/shared/LocalIcon';
+import React from "react";
+import { Group, Button, ActionIcon, Tooltip } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { LocalIcon } from "@app/components/shared/LocalIcon";
 
 interface DrawingControlsProps {
   onUndo?: () => void;
@@ -35,30 +35,30 @@ export const DrawingControls: React.FC<DrawingControlsProps> = ({
   return (
     <Group gap="xs" wrap="nowrap" align="center">
       {onUndo && (
-        <Tooltip label={t('sign.undo', 'Undo')}>
+        <Tooltip label={t("sign.undo", "Undo")}>
           <ActionIcon
             variant="subtle"
             size="lg"
-            aria-label={t('sign.undo', 'Undo')}
+            aria-label={t("sign.undo", "Undo")}
             onClick={onUndo}
             disabled={undoDisabled}
-            color={undoDisabled ? 'gray' : 'blue'}
+            color={undoDisabled ? "gray" : "blue"}
           >
-            <LocalIcon icon="undo" width={20} height={20} style={{ color: 'currentColor' }} />
+            <LocalIcon icon="undo" width={20} height={20} style={{ color: "currentColor" }} />
           </ActionIcon>
         </Tooltip>
       )}
       {onRedo && (
-        <Tooltip label={t('sign.redo', 'Redo')}>
+        <Tooltip label={t("sign.redo", "Redo")}>
           <ActionIcon
             variant="subtle"
             size="lg"
-            aria-label={t('sign.redo', 'Redo')}
+            aria-label={t("sign.redo", "Redo")}
             onClick={onRedo}
             disabled={redoDisabled}
-            color={redoDisabled ? 'gray' : 'blue'}
+            color={redoDisabled ? "gray" : "blue"}
           >
-            <LocalIcon icon="redo" width={20} height={20} style={{ color: 'currentColor' }} />
+            <LocalIcon icon="redo" width={20} height={20} style={{ color: "currentColor" }} />
           </ActionIcon>
         </Tooltip>
       )}
@@ -67,13 +67,7 @@ export const DrawingControls: React.FC<DrawingControlsProps> = ({
 
       {/* Place Signature Button */}
       {showPlaceButton && onPlaceSignature && (
-        <Button
-          variant="filled"
-          color="blue"
-          onClick={onPlaceSignature}
-          disabled={disabled || !hasSignatureData}
-          ml="auto"
-        >
+        <Button variant="filled" color="blue" onClick={onPlaceSignature} disabled={disabled || !hasSignatureData} ml="auto">
           {placeButtonText}
         </Button>
       )}
diff --git a/frontend/src/core/components/annotation/shared/ImageUploader.tsx b/frontend/src/core/components/annotation/shared/ImageUploader.tsx
index ee2cdd123f..86bbbe7b96 100644
--- a/frontend/src/core/components/annotation/shared/ImageUploader.tsx
+++ b/frontend/src/core/components/annotation/shared/ImageUploader.tsx
@@ -1,9 +1,9 @@
-import React, { useState } from 'react';
-import { FileInput, Text, Stack, Checkbox } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { PrivateContent } from '@app/components/shared/PrivateContent';
-import { removeWhiteBackground } from '@app/utils/imageTransparency';
-import { alert } from '@app/components/toast';
+import React, { useState } from "react";
+import { FileInput, Text, Stack, Checkbox } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { PrivateContent } from "@app/components/shared/PrivateContent";
+import { removeWhiteBackground } from "@app/utils/imageTransparency";
+import { alert } from "@app/components/toast";
 
 interface ImageUploaderProps {
   onImageChange: (file: File | null) => void;
@@ -22,7 +22,7 @@ export const ImageUploader: React.FC<ImageUploaderProps> = ({
   placeholder,
   hint,
   allowBackgroundRemoval = false,
-  onProcessedImageData
+  onProcessedImageData,
 }) => {
   const { t } = useTranslation();
   const [removeBackground, setRemoveBackground] = useState(false);
@@ -36,15 +36,18 @@ export const ImageUploader: React.FC<ImageUploaderProps> = ({
       try {
         const transparentImageDataUrl = await removeWhiteBackground(imageSource, {
           autoDetectCorner: true,
-          tolerance: 15
+          tolerance: 15,
         });
         onProcessedImageData?.(transparentImageDataUrl);
       } catch (error) {
-        console.error('Error removing background:', error);
+        console.error("Error removing background:", error);
         alert({
-          title: t('sign.image.backgroundRemovalFailedTitle', 'Background removal failed'),
-          body: t('sign.image.backgroundRemovalFailedMessage', 'Could not remove the background from the image. Using original image instead.'),
-          alertType: 'error'
+          title: t("sign.image.backgroundRemovalFailedTitle", "Background removal failed"),
+          body: t(
+            "sign.image.backgroundRemovalFailedMessage",
+            "Could not remove the background from the image. Using original image instead.",
+          ),
+          alertType: "error",
         });
         onProcessedImageData?.(null);
       } finally {
@@ -52,7 +55,7 @@ export const ImageUploader: React.FC<ImageUploaderProps> = ({
       }
     } else {
       // When background removal is disabled, return the original image data
-      if (typeof imageSource === 'string') {
+      if (typeof imageSource === "string") {
         onProcessedImageData?.(imageSource);
       } else {
         // Convert File to data URL if needed
@@ -69,8 +72,8 @@ export const ImageUploader: React.FC<ImageUploaderProps> = ({
     if (file && !disabled) {
       try {
         // Validate that it's actually an image file or SVG
-        if (!file.type.startsWith('image/') && !file.name.toLowerCase().endsWith('.svg')) {
-          console.error('Selected file is not an image or SVG');
+        if (!file.type.startsWith("image/") && !file.name.toLowerCase().endsWith(".svg")) {
+          console.error("Selected file is not an image or SVG");
           return;
         }
 
@@ -78,10 +81,10 @@ export const ImageUploader: React.FC<ImageUploaderProps> = ({
         onImageChange(file);
 
         let dataUrlToProcess: string;
-        
+
         // Check if file is SVG
-        const isSvg = file.type === 'image/svg+xml' || file.name.toLowerCase().endsWith('.svg');
-        
+        const isSvg = file.type === "image/svg+xml" || file.name.toLowerCase().endsWith(".svg");
+
         if (isSvg) {
           // For SVG, convert to PNG so it can be embedded in PDF
           dataUrlToProcess = await convertSvgToPng(file);
@@ -98,7 +101,7 @@ export const ImageUploader: React.FC<ImageUploaderProps> = ({
         setOriginalImageData(dataUrlToProcess);
         await processImage(dataUrlToProcess, removeBackground);
       } catch (error) {
-        console.error('Error processing image file:', error);
+        console.error("Error processing image file:", error);
       }
     } else if (!file) {
       // Clear image data when no file is selected
@@ -116,33 +119,33 @@ export const ImageUploader: React.FC<ImageUploaderProps> = ({
       reader.onload = async (e) => {
         try {
           const svgText = e.target?.result as string;
-          
+
           // Parse SVG to get dimensions
           const parser = new DOMParser();
-          const svgDoc = parser.parseFromString(svgText, 'image/svg+xml');
+          const svgDoc = parser.parseFromString(svgText, "image/svg+xml");
           const svgElement = svgDoc.documentElement;
-          
+
           // Get SVG dimensions
-          let width = 800;  // Default width
+          let width = 800; // Default width
           let height = 600; // Default height
-          
-          if (svgElement.hasAttribute('width') && svgElement.hasAttribute('height')) {
-            width = parseFloat(svgElement.getAttribute('width') || '800');
-            height = parseFloat(svgElement.getAttribute('height') || '600');
-          } else if (svgElement.hasAttribute('viewBox')) {
-            const viewBox = svgElement.getAttribute('viewBox')?.split(/\s+|,/);
+
+          if (svgElement.hasAttribute("width") && svgElement.hasAttribute("height")) {
+            width = parseFloat(svgElement.getAttribute("width") || "800");
+            height = parseFloat(svgElement.getAttribute("height") || "600");
+          } else if (svgElement.hasAttribute("viewBox")) {
+            const viewBox = svgElement.getAttribute("viewBox")?.split(/\s+|,/);
             if (viewBox && viewBox.length === 4) {
               width = parseFloat(viewBox[2]);
               height = parseFloat(viewBox[3]);
             }
           }
-          
+
           // Ensure reasonable dimensions
           if (width === 0 || height === 0 || !isFinite(width) || !isFinite(height)) {
             width = 800;
             height = 600;
           }
-          
+
           // Scale large SVGs down
           const maxDimension = 2048;
           if (width > maxDimension || height > maxDimension) {
@@ -150,68 +153,73 @@ export const ImageUploader: React.FC<ImageUploaderProps> = ({
             width *= scale;
             height *= scale;
           }
-          
-          console.log('Converting SVG to PNG:', { width, height });
-          
+
+          console.log("Converting SVG to PNG:", { width, height });
+
           // Create an image element to render SVG
           const img = new Image();
-          const blob = new Blob([svgText], { type: 'image/svg+xml;charset=utf-8' });
+          const blob = new Blob([svgText], { type: "image/svg+xml;charset=utf-8" });
           const url = URL.createObjectURL(blob);
-          
+
           img.onload = () => {
             try {
               // Use computed dimensions or image natural dimensions
               const finalWidth = img.naturalWidth || img.width || width;
               const finalHeight = img.naturalHeight || img.height || height;
-              
-              console.log('Image loaded:', { naturalWidth: img.naturalWidth, naturalHeight: img.naturalHeight, finalWidth, finalHeight });
-              
+
+              console.log("Image loaded:", {
+                naturalWidth: img.naturalWidth,
+                naturalHeight: img.naturalHeight,
+                finalWidth,
+                finalHeight,
+              });
+
               // Create canvas to convert to PNG
-              const canvas = document.createElement('canvas');
+              const canvas = document.createElement("canvas");
               canvas.width = finalWidth;
               canvas.height = finalHeight;
-              
-              const ctx = canvas.getContext('2d');
+
+              const ctx = canvas.getContext("2d");
               if (!ctx) {
                 URL.revokeObjectURL(url);
-                reject(new Error('Failed to get canvas context'));
+                reject(new Error("Failed to get canvas context"));
                 return;
               }
-              
+
               // Fill with white background (optional, for transparency support)
-              ctx.fillStyle = 'white';
+              ctx.fillStyle = "white";
               ctx.fillRect(0, 0, finalWidth, finalHeight);
-              
+
               // Draw SVG
               ctx.drawImage(img, 0, 0, finalWidth, finalHeight);
               URL.revokeObjectURL(url);
-              
+
               // Convert canvas to PNG data URL
-              const pngDataUrl = canvas.toDataURL('image/png');
-              console.log('SVG converted to PNG successfully');
+              const pngDataUrl = canvas.toDataURL("image/png");
+              console.log("SVG converted to PNG successfully");
               resolve(pngDataUrl);
             } catch (error) {
               URL.revokeObjectURL(url);
-              console.error('Error during canvas rendering:', error);
+              console.error("Error during canvas rendering:", error);
               reject(error);
             }
           };
-          
+
           img.onerror = (error) => {
             URL.revokeObjectURL(url);
-            console.error('Failed to load SVG image:', error);
-            reject(new Error('Failed to load SVG image'));
+            console.error("Failed to load SVG image:", error);
+            reject(new Error("Failed to load SVG image"));
           };
-          
+
           img.src = url;
         } catch (error) {
-          console.error('Error parsing SVG:', error);
+          console.error("Error parsing SVG:", error);
           reject(error);
         }
       };
-      
+
       reader.onerror = () => {
-        console.error('Error reading file:', reader.error);
+        console.error("Error reading file:", reader.error);
         reject(reader.error);
       };
       reader.readAsText(file);
@@ -231,7 +239,7 @@ export const ImageUploader: React.FC<ImageUploaderProps> = ({
       <PrivateContent>
         <FileInput
           label={label}
-          placeholder={placeholder || t('sign.image.placeholder', 'Select image file')}
+          placeholder={placeholder || t("sign.image.placeholder", "Select image file")}
           accept="image/*,.svg"
           onChange={handleImageChange}
           disabled={disabled || isProcessing}
@@ -239,7 +247,7 @@ export const ImageUploader: React.FC<ImageUploaderProps> = ({
       </PrivateContent>
       {allowBackgroundRemoval && (
         <Checkbox
-          label={t('sign.image.removeBackground', 'Remove white background (make transparent)')}
+          label={t("sign.image.removeBackground", "Remove white background (make transparent)")}
           checked={removeBackground}
           onChange={(event) => handleBackgroundRemovalChange(event.currentTarget.checked)}
           disabled={disabled || !currentFile || isProcessing}
@@ -252,7 +260,7 @@ export const ImageUploader: React.FC<ImageUploaderProps> = ({
       )}
       {isProcessing && (
         <Text size="sm" c="dimmed">
-          {t('sign.image.processing', 'Processing image...')}
+          {t("sign.image.processing", "Processing image...")}
         </Text>
       )}
     </Stack>
diff --git a/frontend/src/core/components/annotation/shared/OpacityControl.tsx b/frontend/src/core/components/annotation/shared/OpacityControl.tsx
index 27b1f10dd9..914d4f038d 100644
--- a/frontend/src/core/components/annotation/shared/OpacityControl.tsx
+++ b/frontend/src/core/components/annotation/shared/OpacityControl.tsx
@@ -1,7 +1,7 @@
-import { ActionIcon, Tooltip, Popover, Stack, Slider, Text } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { useState } from 'react';
-import OpacityIcon from '@mui/icons-material/Opacity';
+import { ActionIcon, Tooltip, Popover, Stack, Slider, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { useState } from "react";
+import OpacityIcon from "@mui/icons-material/Opacity";
 
 interface OpacityControlProps {
   value: number; // 0-100
@@ -16,7 +16,7 @@ export function OpacityControl({ value, onChange, disabled = false }: OpacityCon
   return (
     <Popover opened={opened} onChange={setOpened} position="top" withArrow>
       <Popover.Target>
-        <Tooltip label={t('annotation.opacity', 'Opacity')}>
+        <Tooltip label={t("annotation.opacity", "Opacity")}>
           <ActionIcon
             variant="subtle"
             color="gray"
@@ -26,13 +26,13 @@ export function OpacityControl({ value, onChange, disabled = false }: OpacityCon
             styles={{
               root: {
                 flexShrink: 0,
-                backgroundColor: 'var(--bg-raised)',
-                border: '1px solid var(--border-default)',
-                color: 'var(--text-secondary)',
-                '&:hover': {
-                  backgroundColor: 'var(--hover-bg)',
-                  borderColor: 'var(--border-strong)',
-                  color: 'var(--text-primary)',
+                backgroundColor: "var(--bg-raised)",
+                border: "1px solid var(--border-default)",
+                color: "var(--text-secondary)",
+                "&:hover": {
+                  backgroundColor: "var(--hover-bg)",
+                  borderColor: "var(--border-strong)",
+                  color: "var(--text-primary)",
                 },
               },
             }}
@@ -44,15 +44,9 @@ export function OpacityControl({ value, onChange, disabled = false }: OpacityCon
       <Popover.Dropdown>
         <Stack gap="xs" style={{ minWidth: 150 }}>
           <Text size="xs" fw={500}>
-            {t('annotation.opacity', 'Opacity')}
+            {t("annotation.opacity", "Opacity")}
           </Text>
-          <Slider
-            value={value}
-            onChange={onChange}
-            min={10}
-            max={100}
-            label={(val) => `${val}%`}
-          />
+          <Slider value={value} onChange={onChange} min={10} max={100} label={(val) => `${val}%`} />
         </Stack>
       </Popover.Dropdown>
     </Popover>
diff --git a/frontend/src/core/components/annotation/shared/PropertiesPopover.tsx b/frontend/src/core/components/annotation/shared/PropertiesPopover.tsx
index 2f5d424ab6..8828f3b937 100644
--- a/frontend/src/core/components/annotation/shared/PropertiesPopover.tsx
+++ b/frontend/src/core/components/annotation/shared/PropertiesPopover.tsx
@@ -1,15 +1,15 @@
-import { ActionIcon, Tooltip, Popover, Stack, Slider, Text, Group, Button } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { useState } from 'react';
-import type { TrackedAnnotation } from '@embedpdf/plugin-annotation';
-import type { PdfAnnotationObject } from '@embedpdf/models';
-import type { AnnotationPatch } from '@app/components/viewer/viewerTypes';
-import TuneIcon from '@mui/icons-material/Tune';
-import FormatAlignLeftIcon from '@mui/icons-material/FormatAlignLeft';
-import FormatAlignCenterIcon from '@mui/icons-material/FormatAlignCenter';
-import FormatAlignRightIcon from '@mui/icons-material/FormatAlignRight';
+import { ActionIcon, Tooltip, Popover, Stack, Slider, Text, Group, Button } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { useState } from "react";
+import type { TrackedAnnotation } from "@embedpdf/plugin-annotation";
+import type { PdfAnnotationObject } from "@embedpdf/models";
+import type { AnnotationPatch } from "@app/components/viewer/viewerTypes";
+import TuneIcon from "@mui/icons-material/Tune";
+import FormatAlignLeftIcon from "@mui/icons-material/FormatAlignLeft";
+import FormatAlignCenterIcon from "@mui/icons-material/FormatAlignCenter";
+import FormatAlignRightIcon from "@mui/icons-material/FormatAlignRight";
 
-export type PropertiesAnnotationType = 'text' | 'note' | 'shape';
+export type PropertiesAnnotationType = "text" | "note" | "shape";
 
 interface PropertiesPopoverProps {
   annotationType: PropertiesAnnotationType;
@@ -18,12 +18,7 @@ interface PropertiesPopoverProps {
   disabled?: boolean;
 }
 
-export function PropertiesPopover({
-  annotationType,
-  annotation,
-  onUpdate,
-  disabled = false,
-}: PropertiesPopoverProps) {
+export function PropertiesPopover({ annotationType, annotation, onUpdate, disabled = false }: PropertiesPopoverProps) {
   const { t } = useTranslation();
   const [opened, setOpened] = useState(false);
 
@@ -41,17 +36,17 @@ export function PropertiesPopover({
   const fontSize = obj?.fontSize ?? 14;
   const textAlign = obj?.textAlign;
   const currentAlign =
-    typeof textAlign === 'number'
+    typeof textAlign === "number"
       ? textAlign === 1
-        ? 'center'
+        ? "center"
         : textAlign === 2
-          ? 'right'
-          : 'left'
-      : textAlign === 'center'
-        ? 'center'
-        : textAlign === 'right'
-          ? 'right'
-          : 'left';
+          ? "right"
+          : "left"
+      : textAlign === "center"
+        ? "center"
+        : textAlign === "right"
+          ? "right"
+          : "left";
 
   // For shapes
   const opacity = Math.round((obj?.opacity ?? 1) * 100);
@@ -63,7 +58,7 @@ export function PropertiesPopover({
       {/* Font Size */}
       <div>
         <Text size="xs" fw={500} mb={4}>
-          {t('annotation.fontSize', 'Font size')}
+          {t("annotation.fontSize", "Font size")}
         </Text>
         <Slider
           value={fontSize}
@@ -77,7 +72,7 @@ export function PropertiesPopover({
       {/* Opacity */}
       <div>
         <Text size="xs" fw={500} mb={4}>
-          {t('annotation.opacity', 'Opacity')}
+          {t("annotation.opacity", "Opacity")}
         </Text>
         <Slider
           value={Math.round((obj?.opacity ?? 1) * 100)}
@@ -91,25 +86,25 @@ export function PropertiesPopover({
       {/* Text Alignment */}
       <div>
         <Text size="xs" fw={500} mb={4}>
-          {t('annotation.textAlignment', 'Text Alignment')}
+          {t("annotation.textAlignment", "Text Alignment")}
         </Text>
         <Group gap="xs">
           <ActionIcon
-            variant={currentAlign === 'left' ? 'filled' : 'default'}
+            variant={currentAlign === "left" ? "filled" : "default"}
             onClick={() => onUpdate({ textAlign: 0 })}
             size="md"
           >
             <FormatAlignLeftIcon style={{ fontSize: 18 }} />
           </ActionIcon>
           <ActionIcon
-            variant={currentAlign === 'center' ? 'filled' : 'default'}
+            variant={currentAlign === "center" ? "filled" : "default"}
             onClick={() => onUpdate({ textAlign: 1 })}
             size="md"
           >
             <FormatAlignCenterIcon style={{ fontSize: 18 }} />
           </ActionIcon>
           <ActionIcon
-            variant={currentAlign === 'right' ? 'filled' : 'default'}
+            variant={currentAlign === "right" ? "filled" : "default"}
             onClick={() => onUpdate({ textAlign: 2 })}
             size="md"
           >
@@ -125,7 +120,7 @@ export function PropertiesPopover({
       {/* Opacity */}
       <div>
         <Text size="xs" fw={500} mb={4}>
-          {t('annotation.opacity', 'Opacity')}
+          {t("annotation.opacity", "Opacity")}
         </Text>
         <Slider
           value={opacity}
@@ -148,7 +143,7 @@ export function PropertiesPopover({
         <Group gap="xs" align="flex-end">
           <div style={{ flex: 1 }}>
             <Text size="xs" fw={500} mb={4}>
-              {t('annotation.strokeWidth', 'Stroke')}
+              {t("annotation.strokeWidth", "Stroke")}
             </Text>
             <Slider
               value={strokeWidth}
@@ -166,7 +161,7 @@ export function PropertiesPopover({
           </div>
           <Button
             size="xs"
-            variant={!borderVisible ? 'filled' : 'light'}
+            variant={!borderVisible ? "filled" : "light"}
             onClick={() => {
               const newValue = borderVisible ? 0 : 1;
               onUpdate({
@@ -176,9 +171,7 @@ export function PropertiesPopover({
               });
             }}
           >
-            {borderVisible
-              ? t('annotation.borderOn', 'Border: On')
-              : t('annotation.borderOff', 'Border: Off')}
+            {borderVisible ? t("annotation.borderOn", "Border: On") : t("annotation.borderOff", "Border: Off")}
           </Button>
         </Group>
       </div>
@@ -188,7 +181,7 @@ export function PropertiesPopover({
   return (
     <Popover opened={opened} onChange={setOpened} position="bottom" withArrow>
       <Popover.Target>
-        <Tooltip label={t('annotation.properties', 'Properties')}>
+        <Tooltip label={t("annotation.properties", "Properties")}>
           <ActionIcon
             variant="subtle"
             color="gray"
@@ -198,13 +191,13 @@ export function PropertiesPopover({
             styles={{
               root: {
                 flexShrink: 0,
-                backgroundColor: 'var(--bg-raised)',
-                border: '1px solid var(--border-default)',
-                color: 'var(--text-secondary)',
-                '&:hover': {
-                  backgroundColor: 'var(--hover-bg)',
-                  borderColor: 'var(--border-strong)',
-                  color: 'var(--text-primary)',
+                backgroundColor: "var(--bg-raised)",
+                border: "1px solid var(--border-default)",
+                color: "var(--text-secondary)",
+                "&:hover": {
+                  backgroundColor: "var(--hover-bg)",
+                  borderColor: "var(--border-strong)",
+                  color: "var(--text-primary)",
                 },
               },
             }}
@@ -214,8 +207,8 @@ export function PropertiesPopover({
         </Tooltip>
       </Popover.Target>
       <Popover.Dropdown>
-        {(annotationType === 'text' || annotationType === 'note') && renderTextNoteControls()}
-        {annotationType === 'shape' && renderShapeControls()}
+        {(annotationType === "text" || annotationType === "note") && renderTextNoteControls()}
+        {annotationType === "shape" && renderShapeControls()}
       </Popover.Dropdown>
     </Popover>
   );
diff --git a/frontend/src/core/components/annotation/shared/TextInputWithFont.tsx b/frontend/src/core/components/annotation/shared/TextInputWithFont.tsx
index 2385357171..59bcc57564 100644
--- a/frontend/src/core/components/annotation/shared/TextInputWithFont.tsx
+++ b/frontend/src/core/components/annotation/shared/TextInputWithFont.tsx
@@ -1,7 +1,7 @@
-import React, { useState, useEffect } from 'react';
-import { Stack, TextInput, Select, Combobox, useCombobox, Group, Box, SegmentedControl } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { ColorPicker } from '@app/components/annotation/shared/ColorPicker';
+import React, { useState, useEffect } from "react";
+import { Stack, TextInput, Select, Combobox, useCombobox, Group, Box, SegmentedControl } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { ColorPicker } from "@app/components/annotation/shared/ColorPicker";
 
 interface TextInputWithFontProps {
   text: string;
@@ -12,8 +12,8 @@ interface TextInputWithFontProps {
   onFontFamilyChange: (family: string) => void;
   textColor?: string;
   onTextColorChange?: (color: string) => void;
-  textAlign?: 'left' | 'center' | 'right';
-  onTextAlignChange?: (align: 'left' | 'center' | 'right') => void;
+  textAlign?: "left" | "center" | "right";
+  onTextAlignChange?: (align: "left" | "center" | "right") => void;
   disabled?: boolean;
   label: string;
   placeholder: string;
@@ -31,9 +31,9 @@ export const TextInputWithFont: React.FC<TextInputWithFontProps> = ({
   onFontSizeChange,
   fontFamily,
   onFontFamilyChange,
-  textColor = '#000000',
+  textColor = "#000000",
   onTextColorChange,
-  textAlign = 'left',
+  textAlign = "left",
   onTextAlignChange,
   disabled = false,
   label,
@@ -42,7 +42,7 @@ export const TextInputWithFont: React.FC<TextInputWithFontProps> = ({
   fontSizeLabel,
   fontSizePlaceholder,
   colorLabel,
-  onAnyChange
+  onAnyChange,
 }) => {
   const { t } = useTranslation();
   const [fontSizeInput, setFontSizeInput] = useState(fontSize.toString());
@@ -61,14 +61,37 @@ export const TextInputWithFont: React.FC<TextInputWithFontProps> = ({
   }, [textColor]);
 
   const fontOptions = [
-    { value: 'Helvetica', label: 'Helvetica' },
-    { value: 'Times-Roman', label: 'Times' },
-    { value: 'Courier', label: 'Courier' },
-    { value: 'Arial', label: 'Arial' },
-    { value: 'Georgia', label: 'Georgia' },
+    { value: "Helvetica", label: "Helvetica" },
+    { value: "Times-Roman", label: "Times" },
+    { value: "Courier", label: "Courier" },
+    { value: "Arial", label: "Arial" },
+    { value: "Georgia", label: "Georgia" },
   ];
 
-  const fontSizeOptions = ['8', '12', '16', '20', '24', '28', '32', '36', '40', '48', '56', '64', '72', '80', '96', '112', '128', '144', '160', '176', '192', '200'];
+  const fontSizeOptions = [
+    "8",
+    "12",
+    "16",
+    "20",
+    "24",
+    "28",
+    "32",
+    "36",
+    "40",
+    "48",
+    "56",
+    "64",
+    "72",
+    "80",
+    "96",
+    "112",
+    "128",
+    "144",
+    "160",
+    "176",
+    "192",
+    "200",
+  ];
 
   // Validate hex color
   const isValidHexColor = (color: string): boolean => {
@@ -94,7 +117,7 @@ export const TextInputWithFont: React.FC<TextInputWithFontProps> = ({
         label={fontLabel}
         value={fontFamily}
         onChange={(value) => {
-          onFontFamilyChange(value || 'Helvetica');
+          onFontFamilyChange(value || "Helvetica");
           onAnyChange?.();
         }}
         data={fontOptions}
@@ -187,7 +210,7 @@ export const TextInputWithFont: React.FC<TextInputWithFontProps> = ({
                   setColorInput(textColor);
                 }
               }}
-              style={{ width: '100%' }}
+              style={{ width: "100%" }}
               rightSection={
                 <Box
                   onClick={() => !disabled && setIsColorPickerOpen(true)}
@@ -195,9 +218,9 @@ export const TextInputWithFont: React.FC<TextInputWithFontProps> = ({
                     width: 24,
                     height: 24,
                     backgroundColor: textColor,
-                    border: '1px solid #ccc',
+                    border: "1px solid #ccc",
                     borderRadius: 4,
-                    cursor: disabled ? 'default' : 'pointer'
+                    cursor: disabled ? "default" : "pointer",
                   }}
                 />
               }
@@ -224,14 +247,14 @@ export const TextInputWithFont: React.FC<TextInputWithFontProps> = ({
         <SegmentedControl
           value={textAlign}
           onChange={(value: string) => {
-            onTextAlignChange(value as 'left' | 'center' | 'right');
+            onTextAlignChange(value as "left" | "center" | "right");
             onAnyChange?.();
           }}
           disabled={disabled}
           data={[
-            { label: t('textAlign.left', 'Left'), value: 'left' },
-            { label: t('textAlign.center', 'Center'), value: 'center' },
-            { label: t('textAlign.right', 'Right'), value: 'right' },
+            { label: t("textAlign.left", "Left"), value: "left" },
+            { label: t("textAlign.center", "Center"), value: "center" },
+            { label: t("textAlign.right", "Right"), value: "right" },
           ]}
         />
       )}
diff --git a/frontend/src/core/components/annotation/shared/WidthControl.tsx b/frontend/src/core/components/annotation/shared/WidthControl.tsx
index b99d35c996..58553e64b8 100644
--- a/frontend/src/core/components/annotation/shared/WidthControl.tsx
+++ b/frontend/src/core/components/annotation/shared/WidthControl.tsx
@@ -1,7 +1,7 @@
-import { ActionIcon, Tooltip, Popover, Stack, Slider, Text } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { useState } from 'react';
-import LineWeightIcon from '@mui/icons-material/LineWeight';
+import { ActionIcon, Tooltip, Popover, Stack, Slider, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { useState } from "react";
+import LineWeightIcon from "@mui/icons-material/LineWeight";
 
 interface WidthControlProps {
   value: number;
@@ -18,7 +18,7 @@ export function WidthControl({ value, onChange, min, max, disabled = false }: Wi
   return (
     <Popover opened={opened} onChange={setOpened} position="top" withArrow>
       <Popover.Target>
-        <Tooltip label={t('annotation.width', 'Width')}>
+        <Tooltip label={t("annotation.width", "Width")}>
           <ActionIcon
             variant="subtle"
             color="gray"
@@ -28,13 +28,13 @@ export function WidthControl({ value, onChange, min, max, disabled = false }: Wi
             styles={{
               root: {
                 flexShrink: 0,
-                backgroundColor: 'var(--bg-raised)',
-                border: '1px solid var(--border-default)',
-                color: 'var(--text-secondary)',
-                '&:hover': {
-                  backgroundColor: 'var(--hover-bg)',
-                  borderColor: 'var(--border-strong)',
-                  color: 'var(--text-primary)',
+                backgroundColor: "var(--bg-raised)",
+                border: "1px solid var(--border-default)",
+                color: "var(--text-secondary)",
+                "&:hover": {
+                  backgroundColor: "var(--hover-bg)",
+                  borderColor: "var(--border-strong)",
+                  color: "var(--text-primary)",
                 },
               },
             }}
@@ -46,15 +46,9 @@ export function WidthControl({ value, onChange, min, max, disabled = false }: Wi
       <Popover.Dropdown>
         <Stack gap="xs" style={{ minWidth: 150 }}>
           <Text size="xs" fw={500}>
-            {t('annotation.width', 'Width')}
+            {t("annotation.width", "Width")}
           </Text>
-          <Slider
-            value={value}
-            onChange={onChange}
-            min={min}
-            max={max}
-            label={(val) => `${val}pt`}
-          />
+          <Slider value={value} onChange={onChange} min={min} max={max} label={(val) => `${val}pt`} />
         </Stack>
       </Popover.Dropdown>
     </Popover>
diff --git a/frontend/src/core/components/annotation/tools/DrawingTool.tsx b/frontend/src/core/components/annotation/tools/DrawingTool.tsx
index f3643de35c..2699418eed 100644
--- a/frontend/src/core/components/annotation/tools/DrawingTool.tsx
+++ b/frontend/src/core/components/annotation/tools/DrawingTool.tsx
@@ -1,33 +1,26 @@
-import React, { useState } from 'react';
-import { Stack } from '@mantine/core';
-import { BaseAnnotationTool } from '@app/components/annotation/shared/BaseAnnotationTool';
-import { DrawingCanvas } from '@app/components/annotation/shared/DrawingCanvas';
+import React, { useState } from "react";
+import { Stack } from "@mantine/core";
+import { BaseAnnotationTool } from "@app/components/annotation/shared/BaseAnnotationTool";
+import { DrawingCanvas } from "@app/components/annotation/shared/DrawingCanvas";
 
 interface DrawingToolProps {
   onDrawingChange?: (data: string | null) => void;
   disabled?: boolean;
 }
 
-export const DrawingTool: React.FC<DrawingToolProps> = ({
-  onDrawingChange,
-  disabled = false
-}) => {
-  const [selectedColor] = useState('#000000');
+export const DrawingTool: React.FC<DrawingToolProps> = ({ onDrawingChange, disabled = false }) => {
+  const [selectedColor] = useState("#000000");
   const [penSize, setPenSize] = useState(2);
-  const [penSizeInput, setPenSizeInput] = useState('2');
+  const [penSizeInput, setPenSizeInput] = useState("2");
 
   const toolConfig = {
     enableDrawing: true,
     showPlaceButton: true,
-    placeButtonText: "Place Drawing"
+    placeButtonText: "Place Drawing",
   };
 
   return (
-    <BaseAnnotationTool
-      config={toolConfig}
-      onSignatureDataChange={onDrawingChange}
-      disabled={disabled}
-    >
+    <BaseAnnotationTool config={toolConfig} onSignatureDataChange={onDrawingChange} disabled={disabled}>
       <Stack gap="sm">
         <DrawingCanvas
           selectedColor={selectedColor}
@@ -42,4 +35,4 @@ export const DrawingTool: React.FC<DrawingToolProps> = ({
       </Stack>
     </BaseAnnotationTool>
   );
-};
\ No newline at end of file
+};
diff --git a/frontend/src/core/components/annotation/tools/ImageTool.tsx b/frontend/src/core/components/annotation/tools/ImageTool.tsx
index 0704546965..fa59e272e7 100644
--- a/frontend/src/core/components/annotation/tools/ImageTool.tsx
+++ b/frontend/src/core/components/annotation/tools/ImageTool.tsx
@@ -1,17 +1,14 @@
-import React, { useState } from 'react';
-import { Stack } from '@mantine/core';
-import { BaseAnnotationTool } from '@app/components/annotation/shared/BaseAnnotationTool';
-import { ImageUploader } from '@app/components/annotation/shared/ImageUploader';
+import React, { useState } from "react";
+import { Stack } from "@mantine/core";
+import { BaseAnnotationTool } from "@app/components/annotation/shared/BaseAnnotationTool";
+import { ImageUploader } from "@app/components/annotation/shared/ImageUploader";
 
 interface ImageToolProps {
   onImageChange?: (data: string | null) => void;
   disabled?: boolean;
 }
 
-export const ImageTool: React.FC<ImageToolProps> = ({
-  onImageChange,
-  disabled = false
-}) => {
+export const ImageTool: React.FC<ImageToolProps> = ({ onImageChange, disabled = false }) => {
   const [, setImageData] = useState<string | null>(null);
 
   const handleImageUpload = async (file: File | null) => {
@@ -23,7 +20,7 @@ export const ImageTool: React.FC<ImageToolProps> = ({
             if (e.target?.result) {
               resolve(e.target.result as string);
             } else {
-              reject(new Error('Failed to read file'));
+              reject(new Error("Failed to read file"));
             }
           };
           reader.onerror = () => reject(reader.error);
@@ -33,7 +30,7 @@ export const ImageTool: React.FC<ImageToolProps> = ({
         setImageData(result);
         onImageChange?.(result);
       } catch (error) {
-        console.error('Error reading file:', error);
+        console.error("Error reading file:", error);
       }
     } else if (!file) {
       setImageData(null);
@@ -44,15 +41,11 @@ export const ImageTool: React.FC<ImageToolProps> = ({
   const toolConfig = {
     enableImageUpload: true,
     showPlaceButton: true,
-    placeButtonText: "Place Image"
+    placeButtonText: "Place Image",
   };
 
   return (
-    <BaseAnnotationTool
-      config={toolConfig}
-      onSignatureDataChange={onImageChange}
-      disabled={disabled}
-    >
+    <BaseAnnotationTool config={toolConfig} onSignatureDataChange={onImageChange} disabled={disabled}>
       <Stack gap="sm">
         <ImageUploader
           onImageChange={handleImageUpload}
@@ -64,4 +57,4 @@ export const ImageTool: React.FC<ImageToolProps> = ({
       </Stack>
     </BaseAnnotationTool>
   );
-};
\ No newline at end of file
+};
diff --git a/frontend/src/core/components/fileEditor/AddFileCard.tsx b/frontend/src/core/components/fileEditor/AddFileCard.tsx
index c5cafd7561..8e321cc62c 100644
--- a/frontend/src/core/components/fileEditor/AddFileCard.tsx
+++ b/frontend/src/core/components/fileEditor/AddFileCard.tsx
@@ -1,14 +1,14 @@
-import React, { useRef, useState } from 'react';
-import { Button, Group, useMantineColorScheme } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import AddIcon from '@mui/icons-material/Add';
-import { useFilesModalContext } from '@app/contexts/FilesModalContext';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { useLogoAssets } from '@app/hooks/useLogoAssets';
-import styles from '@app/components/fileEditor/FileEditor.module.css';
-import { useFileActionTerminology } from '@app/hooks/useFileActionTerminology';
-import { useFileActionIcons } from '@app/hooks/useFileActionIcons';
-import { openFilesFromDisk } from '@app/services/openFilesFromDisk';
+import React, { useRef, useState } from "react";
+import { Button, Group, useMantineColorScheme } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import AddIcon from "@mui/icons-material/Add";
+import { useFilesModalContext } from "@app/contexts/FilesModalContext";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { useLogoAssets } from "@app/hooks/useLogoAssets";
+import styles from "@app/components/fileEditor/FileEditor.module.css";
+import { useFileActionTerminology } from "@app/hooks/useFileActionTerminology";
+import { useFileActionIcons } from "@app/hooks/useFileActionIcons";
+import { openFilesFromDisk } from "@app/services/openFilesFromDisk";
 
 interface AddFileCardProps {
   onFileSelect: (files: File[]) => void;
@@ -16,11 +16,7 @@ interface AddFileCardProps {
   multiple?: boolean;
 }
 
-const AddFileCard = ({
-  onFileSelect,
-  accept,
-  multiple = true
-}: AddFileCardProps) => {
+const AddFileCard = ({ onFileSelect, accept, multiple = true }: AddFileCardProps) => {
   const { t } = useTranslation();
   const fileInputRef = useRef<HTMLInputElement>(null);
   const { openFilesModal } = useFilesModalContext();
@@ -38,7 +34,7 @@ const AddFileCard = ({
     e.stopPropagation();
     const files = await openFilesFromDisk({
       multiple,
-      onFallbackOpen: () => fileInputRef.current?.click()
+      onFallbackOpen: () => fileInputRef.current?.click(),
     });
     if (files.length > 0) {
       onFileSelect(files);
@@ -56,7 +52,7 @@ const AddFileCard = ({
       onFileSelect(files);
     }
     // Reset input so same files can be selected again
-    event.target.value = '';
+    event.target.value = "";
   };
 
   return (
@@ -67,17 +63,17 @@ const AddFileCard = ({
         accept={accept}
         multiple={multiple}
         onChange={handleFileChange}
-        style={{ display: 'none' }}
+        style={{ display: "none" }}
       />
 
       <div
         className={`${styles.addFileCard} w-[18rem] h-[22rem] select-none flex flex-col shadow-sm transition-all relative cursor-pointer`}
         tabIndex={0}
         role="button"
-        aria-label={t('fileEditor.addFiles', 'Add files')}
+        aria-label={t("fileEditor.addFiles", "Add files")}
         onClick={handleCardClick}
         onKeyDown={(e) => {
-          if (e.key === 'Enter' || e.key === ' ') {
+          if (e.key === "Enter" || e.key === " ") {
             e.preventDefault();
             handleCardClick();
           }
@@ -86,11 +82,9 @@ const AddFileCard = ({
         {/* Header bar - matches FileEditorThumbnail structure */}
         <div className={`${styles.header} ${styles.addFileHeader}`}>
           <div className={styles.logoMark}>
-            <AddIcon sx={{ color: 'inherit', fontSize: '1.5rem' }} />
-          </div>
-          <div className={styles.headerIndex}>
-            {t('fileEditor.addFiles', 'Add Files')}
+            <AddIcon sx={{ color: "inherit", fontSize: "1.5rem" }} />
           </div>
+          <div className={styles.headerIndex}>{t("fileEditor.addFiles", "Add Files")}</div>
           <div className={styles.kebab} />
         </div>
 
@@ -99,84 +93,81 @@ const AddFileCard = ({
           {/* Stirling PDF Branding */}
           <Group gap="xs" align="center">
             <img
-              src={colorScheme === 'dark' ? wordmark.white : wordmark.grey}
+              src={colorScheme === "dark" ? wordmark.white : wordmark.grey}
               alt="Stirling PDF"
-              style={{ height: '2.2rem', width: 'auto' }}
+              style={{ height: "2.2rem", width: "auto" }}
             />
           </Group>
 
           {/* Add Files + Native Upload Buttons - styled like LandingPage */}
           <div
             style={{
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              gap: '0.6rem',
-              width: '100%',
-              marginTop: '0.8rem',
-              marginBottom: '0.8rem'
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              gap: "0.6rem",
+              width: "100%",
+              marginTop: "0.8rem",
+              marginBottom: "0.8rem",
             }}
             onMouseLeave={() => setIsUploadHover(false)}
           >
             <Button
               style={{
-                backgroundColor: 'var(--landing-button-bg)',
-                color: 'var(--landing-button-color)',
-                border: '1px solid var(--landing-button-border)',
-                borderRadius: '2rem',
-                height: '38px',
-                paddingLeft: isUploadHover ? 0 : '1rem',
-                paddingRight: isUploadHover ? 0 : '1rem',
-                width: isUploadHover ? '58px' : 'calc(100% - 58px - 0.6rem)',
-                minWidth: isUploadHover ? '58px' : undefined,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                transition: 'width .5s ease, padding .5s ease'
+                backgroundColor: "var(--landing-button-bg)",
+                color: "var(--landing-button-color)",
+                border: "1px solid var(--landing-button-border)",
+                borderRadius: "2rem",
+                height: "38px",
+                paddingLeft: isUploadHover ? 0 : "1rem",
+                paddingRight: isUploadHover ? 0 : "1rem",
+                width: isUploadHover ? "58px" : "calc(100% - 58px - 0.6rem)",
+                minWidth: isUploadHover ? "58px" : undefined,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                transition: "width .5s ease, padding .5s ease",
               }}
               onClick={handleOpenFilesModal}
               onMouseEnter={() => setIsUploadHover(false)}
             >
               <LocalIcon icon="add" width="1.5rem" height="1.5rem" className="text-[var(--accent-interactive)]" />
-              {!isUploadHover && (
-                <span>
-                  {t('landing.addFiles', 'Add Files')}
-                </span>
-              )}
+              {!isUploadHover && <span>{t("landing.addFiles", "Add Files")}</span>}
             </Button>
             <Button
               aria-label="Upload"
               style={{
-                backgroundColor: 'var(--landing-button-bg)',
-                color: 'var(--landing-button-color)',
-                border: '1px solid var(--landing-button-border)',
-                borderRadius: '1rem',
-                height: '38px',
-                width: isUploadHover ? 'calc(100% - 58px - 0.6rem)' : '58px',
-                minWidth: '58px',
-                paddingLeft: isUploadHover ? '1rem' : 0,
-                paddingRight: isUploadHover ? '1rem' : 0,
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                transition: 'width .5s ease, padding .5s ease'
+                backgroundColor: "var(--landing-button-bg)",
+                color: "var(--landing-button-color)",
+                border: "1px solid var(--landing-button-border)",
+                borderRadius: "1rem",
+                height: "38px",
+                width: isUploadHover ? "calc(100% - 58px - 0.6rem)" : "58px",
+                minWidth: "58px",
+                paddingLeft: isUploadHover ? "1rem" : 0,
+                paddingRight: isUploadHover ? "1rem" : 0,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                transition: "width .5s ease, padding .5s ease",
               }}
               onClick={handleNativeUploadClick}
               onMouseEnter={() => setIsUploadHover(true)}
             >
-              <LocalIcon icon={icons.uploadIconName} width="1.25rem" height="1.25rem" style={{ color: 'var(--accent-interactive)' }} />
-              {isUploadHover && (
-                <span style={{ marginLeft: '.5rem' }}>
-                  {terminology.uploadFromComputer}
-                </span>
-              )}
+              <LocalIcon
+                icon={icons.uploadIconName}
+                width="1.25rem"
+                height="1.25rem"
+                style={{ color: "var(--accent-interactive)" }}
+              />
+              {isUploadHover && <span style={{ marginLeft: ".5rem" }}>{terminology.uploadFromComputer}</span>}
             </Button>
           </div>
 
           {/* Instruction Text */}
           <span
             className="text-[var(--accent-interactive)]"
-            style={{ fontSize: '.8rem', textAlign: 'center', marginTop: '0.5rem' }}
+            style={{ fontSize: ".8rem", textAlign: "center", marginTop: "0.5rem" }}
           >
             {terminology.dropFilesHere}
           </span>
diff --git a/frontend/src/core/components/fileEditor/FileEditor.module.css b/frontend/src/core/components/fileEditor/FileEditor.module.css
index 4f26c8bce5..43ef0d1af9 100644
--- a/frontend/src/core/components/fileEditor/FileEditor.module.css
+++ b/frontend/src/core/components/fileEditor/FileEditor.module.css
@@ -6,7 +6,10 @@
   background: var(--file-card-bg);
   border-radius: 0.0625rem;
   cursor: pointer;
-  transition: box-shadow 0.18s ease, outline-color 0.18s ease, transform 0.18s ease;
+  transition:
+    box-shadow 0.18s ease,
+    outline-color 0.18s ease,
+    transform 0.18s ease;
   max-width: 100%;
   max-height: 100%;
   overflow: visible;
@@ -45,8 +48,8 @@
 }
 
 .headerResting {
-  background: #3B4B6E; /* dark blue for unselected in light mode */
-  color: #FFFFFF;
+  background: #3b4b6e; /* dark blue for unselected in light mode */
+  color: #ffffff;
   border-bottom: 1px solid var(--border-default);
 }
 
@@ -66,7 +69,7 @@
 /* Unsupported (but not errored) header appearance */
 .headerUnsupported {
   background: var(--unsupported-bar-bg); /* neutral gray */
-  color: #FFFFFF;
+  color: #ffffff;
   border-bottom: 1px solid var(--unsupported-bar-border);
 }
 
@@ -103,7 +106,7 @@
 }
 
 .headerIconButton {
-  color: #FFFFFF !important;
+  color: #ffffff !important;
 }
 
 /* Menu dropdown */
@@ -226,14 +229,13 @@
 }
 
 .pinned {
-  color: #FFC107 !important;
+  color: #ffc107 !important;
 }
 
-
 /* Unsupported file indicator */
 .unsupportedPill {
   margin-left: 1.75rem;
-  background: #6B7280;
+  background: #6b7280;
   color: white;
   padding: 4px 8px;
   border-radius: 12px;
@@ -264,7 +266,8 @@
 
 /* Animations */
 @keyframes pulse {
-  0%, 100% {
+  0%,
+  100% {
     opacity: 1;
   }
   50% {
@@ -288,15 +291,15 @@
    DARK MODE OVERRIDES
    ========================= */
 :global([data-mantine-color-scheme="dark"]) .card {
-  outline-color: #3A4047; /* deselected stroke */
+  outline-color: #3a4047; /* deselected stroke */
 }
 
 :global([data-mantine-color-scheme="dark"]) .card[data-selected="true"] {
-  outline-color: #4B525A; /* selected stroke (subtle grey) */
+  outline-color: #4b525a; /* selected stroke (subtle grey) */
 }
 
 :global([data-mantine-color-scheme="dark"]) .headerResting {
-  background: #1F2329; /* requested default unselected color */
+  background: #1f2329; /* requested default unselected color */
   color: var(--tool-header-text); /* #D0D6DC */
   border-bottom-color: var(--tool-header-border); /* #3A4047 */
 }
@@ -308,16 +311,16 @@
 }
 
 :global([data-mantine-color-scheme="dark"]) .title {
-  color: #D0D6DC; /* title text */
+  color: #d0d6dc; /* title text */
 }
 
 :global([data-mantine-color-scheme="dark"]) .meta {
-  color: #6B7280; /* subtitle text */
+  color: #6b7280; /* subtitle text */
 }
 
 /* Light mode selected header stroke override */
 :global([data-mantine-color-scheme="light"]) .card[data-selected="true"] {
-  outline-color: #3B4B6E;
+  outline-color: #3b4b6e;
 }
 
 /* =========================
diff --git a/frontend/src/core/components/fileEditor/FileEditor.tsx b/frontend/src/core/components/fileEditor/FileEditor.tsx
index c230495e1a..64a64b6c46 100644
--- a/frontend/src/core/components/fileEditor/FileEditor.tsx
+++ b/frontend/src/core/components/fileEditor/FileEditor.tsx
@@ -1,22 +1,19 @@
-import { useState, useCallback, useRef, useMemo, useEffect } from 'react';
-import {
-  Text, Center, Box, LoadingOverlay, Stack
-} from '@mantine/core';
-import { Dropzone } from '@mantine/dropzone';
-import { useFileSelection, useFileState, useFileManagement, useFileActions, useFileContext } from '@app/contexts/FileContext';
-import { useNavigationActions } from '@app/contexts/NavigationContext';
-import { useViewer } from '@app/contexts/ViewerContext';
-import { zipFileService } from '@app/services/zipFileService';
-import { detectFileExtension } from '@app/utils/fileUtils';
-import FileEditorThumbnail from '@app/components/fileEditor/FileEditorThumbnail';
-import AddFileCard from '@app/components/fileEditor/AddFileCard';
-import FilePickerModal from '@app/components/shared/FilePickerModal';
-import { FileId, StirlingFile } from '@app/types/fileContext';
-import { alert } from '@app/components/toast';
-import { downloadFile } from '@app/services/downloadService';
-import { useFileEditorRightRailButtons } from '@app/components/fileEditor/fileEditorRightRailButtons';
-import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
-
+import { useState, useCallback, useRef, useMemo, useEffect } from "react";
+import { Text, Center, Box, LoadingOverlay, Stack } from "@mantine/core";
+import { Dropzone } from "@mantine/dropzone";
+import { useFileSelection, useFileState, useFileManagement, useFileActions, useFileContext } from "@app/contexts/FileContext";
+import { useNavigationActions } from "@app/contexts/NavigationContext";
+import { useViewer } from "@app/contexts/ViewerContext";
+import { zipFileService } from "@app/services/zipFileService";
+import { detectFileExtension } from "@app/utils/fileUtils";
+import FileEditorThumbnail from "@app/components/fileEditor/FileEditorThumbnail";
+import AddFileCard from "@app/components/fileEditor/AddFileCard";
+import FilePickerModal from "@app/components/shared/FilePickerModal";
+import { FileId, StirlingFile } from "@app/types/fileContext";
+import { alert } from "@app/components/toast";
+import { downloadFile } from "@app/services/downloadService";
+import { useFileEditorRightRailButtons } from "@app/components/fileEditor/fileEditorRightRailButtons";
+import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
 
 interface FileEditorProps {
   onOpenPageEditor?: () => void;
@@ -25,16 +22,15 @@ interface FileEditorProps {
   supportedExtensions?: string[];
 }
 
-const FileEditor = ({
-  toolMode = false,
-  supportedExtensions = ["pdf"]
-}: FileEditorProps) => {
-
+const FileEditor = ({ toolMode = false, supportedExtensions = ["pdf"] }: FileEditorProps) => {
   // Utility function to check if a file extension is supported
-  const isFileSupported = useCallback((fileName: string): boolean => {
-    const extension = detectFileExtension(fileName);
-    return extension ? supportedExtensions.includes(extension) : false;
-  }, [supportedExtensions]);
+  const isFileSupported = useCallback(
+    (fileName: string): boolean => {
+      const extension = detectFileExtension(fileName);
+      return extension ? supportedExtensions.includes(extension) : false;
+    },
+    [supportedExtensions],
+  );
 
   // Use optimized FileContext hooks
   const { state, selectors } = useFileState();
@@ -62,11 +58,11 @@ const FileEditor = ({
   const [_error, _setError] = useState<string | null>(null);
 
   // Toast helpers
-  const showStatus = useCallback((message: string, type: 'neutral' | 'success' | 'warning' | 'error' = 'neutral') => {
+  const showStatus = useCallback((message: string, type: "neutral" | "success" | "warning" | "error" = "neutral") => {
     alert({ alertType: type, title: message, expandable: false, durationMs: 4000 });
   }, []);
   const showError = useCallback((message: string) => {
-    alert({ alertType: 'error', title: 'Error', body: message, expandable: true });
+    alert({ alertType: "error", title: "Error", body: message, expandable: true });
   }, []);
   const [selectionMode, setSelectionMode] = useState(toolMode);
 
@@ -76,7 +72,7 @@ const FileEditor = ({
   // Compute effective max allowed files based on the active tool and mode
   const maxAllowed = useMemo<number>(() => {
     const rawMax = selectedTool?.maxFiles;
-    return (!toolMode || rawMax == null || rawMax < 0) ? Infinity : rawMax;
+    return !toolMode || rawMax == null || rawMax < 0 ? Infinity : rawMax;
   }, [selectedTool?.maxFiles, toolMode]);
 
   // Enable selection mode automatically in tool mode
@@ -104,8 +100,8 @@ const FileEditor = ({
     try {
       clearAllFileErrors();
     } catch (error) {
-      if (process.env.NODE_ENV === 'development') {
-        console.warn('Failed to clear file errors on select all:', error);
+      if (process.env.NODE_ENV === "development") {
+        console.warn("Failed to clear file errors on select all:", error);
       }
     }
   }, [state.files.ids, setSelectedFiles, clearAllFileErrors, maxAllowed]);
@@ -115,8 +111,8 @@ const FileEditor = ({
     try {
       clearAllFileErrors();
     } catch (error) {
-      if (process.env.NODE_ENV === 'development') {
-        console.warn('Failed to clear file errors on deselect:', error);
+      if (process.env.NODE_ENV === "development") {
+        console.warn("Failed to clear file errors on deselect:", error);
       }
     }
   }, [setSelectedFiles, clearAllFileErrors]);
@@ -137,69 +133,75 @@ const FileEditor = ({
 
   // Process uploaded files using context
   // ZIP extraction is now handled automatically in FileContext based on user preferences
-  const handleFileUpload = useCallback(async (uploadedFiles: File[]) => {
-    _setError(null);
+  const handleFileUpload = useCallback(
+    async (uploadedFiles: File[]) => {
+      _setError(null);
 
-    try {
-      if (uploadedFiles.length > 0) {
-        // FileContext will automatically handle ZIP extraction based on user preferences
-        // - Respects autoUnzip setting
-        // - Respects autoUnzipFileLimit
-        // - HTML ZIPs stay intact
-        // - Non-ZIP files pass through unchanged
-        await addFiles(uploadedFiles, { selectFiles: true });
-        // After auto-selection, enforce maxAllowed if needed
-        if (Number.isFinite(maxAllowed)) {
-          const nowSelectedIds = selectors.getSelectedStirlingFileStubs().map(r => r.id);
-          if (nowSelectedIds.length > maxAllowed) {
-            setSelectedFiles(nowSelectedIds.slice(-maxAllowed));
+      try {
+        if (uploadedFiles.length > 0) {
+          // FileContext will automatically handle ZIP extraction based on user preferences
+          // - Respects autoUnzip setting
+          // - Respects autoUnzipFileLimit
+          // - HTML ZIPs stay intact
+          // - Non-ZIP files pass through unchanged
+          await addFiles(uploadedFiles, { selectFiles: true });
+          // After auto-selection, enforce maxAllowed if needed
+          if (Number.isFinite(maxAllowed)) {
+            const nowSelectedIds = selectors.getSelectedStirlingFileStubs().map((r) => r.id);
+            if (nowSelectedIds.length > maxAllowed) {
+              setSelectedFiles(nowSelectedIds.slice(-maxAllowed));
+            }
+          }
+          showStatus(`Added ${uploadedFiles.length} file(s)`, "success");
+        }
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : "Failed to process files";
+        showError(errorMessage);
+        console.error("File processing error:", err);
+      }
+    },
+    [addFiles, showStatus, showError, selectors, maxAllowed, setSelectedFiles],
+  );
+
+  const toggleFile = useCallback(
+    (fileId: FileId) => {
+      const currentSelectedIds = contextSelectedIdsRef.current;
+
+      const targetRecord = activeStirlingFileStubs.find((r) => r.id === fileId);
+      if (!targetRecord) return;
+
+      const contextFileId = fileId; // No need to create a new ID
+      const isSelected = currentSelectedIds.includes(contextFileId);
+
+      let newSelection: FileId[];
+
+      if (isSelected) {
+        // Remove file from selection
+        newSelection = currentSelectedIds.filter((id) => id !== contextFileId);
+      } else {
+        // Add file to selection
+        // Determine max files allowed from the active tool (negative or undefined means unlimited)
+        const rawMax = selectedTool?.maxFiles;
+        const maxAllowed = !toolMode || rawMax == null || rawMax < 0 ? Infinity : rawMax;
+
+        if (maxAllowed === 1) {
+          // Only one file allowed -> replace selection with the new file
+          newSelection = [contextFileId];
+        } else {
+          // If at capacity, drop the oldest selected and append the new one
+          if (Number.isFinite(maxAllowed) && currentSelectedIds.length >= maxAllowed) {
+            newSelection = [...currentSelectedIds.slice(1), contextFileId];
+          } else {
+            newSelection = [...currentSelectedIds, contextFileId];
           }
         }
-        showStatus(`Added ${uploadedFiles.length} file(s)`, 'success');
       }
-    } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : 'Failed to process files';
-      showError(errorMessage);
-      console.error('File processing error:', err);
-    }
-  }, [addFiles, showStatus, showError, selectors, maxAllowed, setSelectedFiles]);
 
-  const toggleFile = useCallback((fileId: FileId) => {
-    const currentSelectedIds = contextSelectedIdsRef.current;
-
-    const targetRecord = activeStirlingFileStubs.find(r => r.id === fileId);
-    if (!targetRecord) return;
-
-    const contextFileId = fileId; // No need to create a new ID
-    const isSelected = currentSelectedIds.includes(contextFileId);
-
-    let newSelection: FileId[];
-
-    if (isSelected) {
-      // Remove file from selection
-      newSelection = currentSelectedIds.filter(id => id !== contextFileId);
-    } else {
-      // Add file to selection
-      // Determine max files allowed from the active tool (negative or undefined means unlimited)
-      const rawMax = selectedTool?.maxFiles;
-      const maxAllowed = (!toolMode || rawMax == null || rawMax < 0) ? Infinity : rawMax;
-
-      if (maxAllowed === 1) {
-        // Only one file allowed -> replace selection with the new file
-        newSelection = [contextFileId];
-      } else {
-        // If at capacity, drop the oldest selected and append the new one
-        if (Number.isFinite(maxAllowed) && currentSelectedIds.length >= maxAllowed) {
-          newSelection = [...currentSelectedIds.slice(1), contextFileId];
-        } else {
-          newSelection = [...currentSelectedIds, contextFileId];
-        }
-      }
-    }
-
-    // Update context (this automatically updates tool selection since they use the same action)
-    setSelectedFiles(newSelection);
-  }, [setSelectedFiles, toolMode, _setStatus, activeStirlingFileStubs, selectedTool?.maxFiles]);
+      // Update context (this automatically updates tool selection since they use the same action)
+      setSelectedFiles(newSelection);
+    },
+    [setSelectedFiles, toolMode, _setStatus, activeStirlingFileStubs, selectedTool?.maxFiles],
+  );
 
   // Enforce maxAllowed when tool changes or when an external action sets too many selected files
   useEffect(() => {
@@ -208,154 +210,174 @@ const FileEditor = ({
     }
   }, [maxAllowed, selectedFileIds, setSelectedFiles]);
 
-
   // File reordering handler for drag and drop
-  const handleReorderFiles = useCallback((sourceFileId: FileId, targetFileId: FileId, selectedFileIds: FileId[]) => {
-    const currentIds = activeStirlingFileStubs.map(r => r.id);
+  const handleReorderFiles = useCallback(
+    (sourceFileId: FileId, targetFileId: FileId, selectedFileIds: FileId[]) => {
+      const currentIds = activeStirlingFileStubs.map((r) => r.id);
 
-    // Find indices
-    const sourceIndex = currentIds.findIndex(id => id === sourceFileId);
-    const targetIndex = currentIds.findIndex(id => id === targetFileId);
+      // Find indices
+      const sourceIndex = currentIds.findIndex((id) => id === sourceFileId);
+      const targetIndex = currentIds.findIndex((id) => id === targetFileId);
 
-    if (sourceIndex === -1 || targetIndex === -1) {
-      console.warn('Could not find source or target file for reordering');
-      return;
-    }
-
-    // Handle multi-file selection reordering
-    const filesToMove = selectedFileIds.length > 1
-      ? selectedFileIds.filter(id => currentIds.includes(id))
-      : [sourceFileId];
-
-    // Create new order
-    const newOrder = [...currentIds];
-
-    // Remove files to move from their current positions (in reverse order to maintain indices)
-    const sourceIndices = filesToMove.map(id => newOrder.findIndex(nId => nId === id))
-      .sort((a, b) => b - a); // Sort descending
-
-    sourceIndices.forEach(index => {
-      newOrder.splice(index, 1);
-    });
-
-    // Calculate insertion index after removals
-    let insertIndex = newOrder.findIndex(id => id === targetFileId);
-    if (insertIndex !== -1) {
-      // Determine if moving forward or backward
-      const isMovingForward = sourceIndex < targetIndex;
-      if (isMovingForward) {
-        // Moving forward: insert after target
-        insertIndex += 1;
-      } else {
-        // Moving backward: insert before target (insertIndex already correct)
+      if (sourceIndex === -1 || targetIndex === -1) {
+        console.warn("Could not find source or target file for reordering");
+        return;
       }
-    } else {
-      // Target was moved, insert at end
-      insertIndex = newOrder.length;
-    }
 
-    // Insert files at the calculated position
-    newOrder.splice(insertIndex, 0, ...filesToMove);
+      // Handle multi-file selection reordering
+      const filesToMove =
+        selectedFileIds.length > 1 ? selectedFileIds.filter((id) => currentIds.includes(id)) : [sourceFileId];
 
-    // Update file order
-    reorderFiles(newOrder);
+      // Create new order
+      const newOrder = [...currentIds];
 
-    // Update status
-    const moveCount = filesToMove.length;
-    showStatus(`${moveCount > 1 ? `${moveCount} files` : 'File'} reordered`);
-  }, [activeStirlingFileStubs, reorderFiles, _setStatus]);
+      // Remove files to move from their current positions (in reverse order to maintain indices)
+      const sourceIndices = filesToMove.map((id) => newOrder.findIndex((nId) => nId === id)).sort((a, b) => b - a); // Sort descending
 
+      sourceIndices.forEach((index) => {
+        newOrder.splice(index, 1);
+      });
 
+      // Calculate insertion index after removals
+      let insertIndex = newOrder.findIndex((id) => id === targetFileId);
+      if (insertIndex !== -1) {
+        // Determine if moving forward or backward
+        const isMovingForward = sourceIndex < targetIndex;
+        if (isMovingForward) {
+          // Moving forward: insert after target
+          insertIndex += 1;
+        } else {
+          // Moving backward: insert before target (insertIndex already correct)
+        }
+      } else {
+        // Target was moved, insert at end
+        insertIndex = newOrder.length;
+      }
+
+      // Insert files at the calculated position
+      newOrder.splice(insertIndex, 0, ...filesToMove);
+
+      // Update file order
+      reorderFiles(newOrder);
+
+      // Update status
+      const moveCount = filesToMove.length;
+      showStatus(`${moveCount > 1 ? `${moveCount} files` : "File"} reordered`);
+    },
+    [activeStirlingFileStubs, reorderFiles, _setStatus],
+  );
 
   // File operations using context
-  const handleCloseFile = useCallback((fileId: FileId) => {
-    const record = activeStirlingFileStubs.find(r => r.id === fileId);
-    const file = record ? selectors.getFile(record.id) : null;
-    if (record && file) {
-      // Remove file from context but keep in storage (close, don't delete)
-      const contextFileId = record.id;
-      removeFiles([contextFileId], false);
+  const handleCloseFile = useCallback(
+    (fileId: FileId) => {
+      const record = activeStirlingFileStubs.find((r) => r.id === fileId);
+      const file = record ? selectors.getFile(record.id) : null;
+      if (record && file) {
+        // Remove file from context but keep in storage (close, don't delete)
+        const contextFileId = record.id;
+        removeFiles([contextFileId], false);
 
-      // Remove from context selections
-      const currentSelected = selectedFileIds.filter(id => id !== contextFileId);
-      setSelectedFiles(currentSelected);
-    }
-  }, [activeStirlingFileStubs, selectors, removeFiles, setSelectedFiles, selectedFileIds]);
-
-  const handleDownloadFile = useCallback(async (fileId: FileId) => {
-    const record = activeStirlingFileStubs.find(r => r.id === fileId);
-    const file = record ? selectors.getFile(record.id) : null;
-    console.log('[FileEditor] handleDownloadFile called:', { fileId, hasRecord: !!record, hasFile: !!file, localFilePath: record?.localFilePath, isDirty: record?.isDirty });
-    if (record && file) {
-      const result = await downloadFile({
-        data: file,
-        filename: file.name,
-        localPath: record.localFilePath
-      });
-      console.log('[FileEditor] Download complete, checking dirty state:', { localFilePath: record.localFilePath, isDirty: record.isDirty, savedPath: result.savedPath });
-      // Mark file as clean after successful save to disk
-      if (result.savedPath) {
-        console.log('[FileEditor] Marking file as clean:', fileId);
-        fileActions.updateStirlingFileStub(fileId, {
-          localFilePath: record.localFilePath ?? result.savedPath,
-          isDirty: false
-        });
-      } else {
-        console.log('[FileEditor] Skipping clean mark:', { savedPath: result.savedPath, isDirty: record.isDirty });
+        // Remove from context selections
+        const currentSelected = selectedFileIds.filter((id) => id !== contextFileId);
+        setSelectedFiles(currentSelected);
       }
-    }
-  }, [activeStirlingFileStubs, selectors, fileActions]);
+    },
+    [activeStirlingFileStubs, selectors, removeFiles, setSelectedFiles, selectedFileIds],
+  );
 
-  const handleUnzipFile = useCallback(async (fileId: FileId) => {
-    const record = activeStirlingFileStubs.find(r => r.id === fileId);
-    const file = record ? selectors.getFile(record.id) : null;
-    if (record && file) {
-      try {
-        // Extract and store files using shared service method
-        const result = await zipFileService.extractAndStoreFilesWithHistory(file, record);
-
-        if (result.success && result.extractedStubs.length > 0) {
-          // Add extracted file stubs to FileContext
-          await fileActions.addStirlingFileStubs(result.extractedStubs);
-
-          // Remove the original ZIP file
-          removeFiles([fileId], false);
-
-          alert({
-            alertType: 'success',
-            title: `Extracted ${result.extractedStubs.length} file(s) from ${file.name}`,
-            expandable: false,
-            durationMs: 3500
+  const handleDownloadFile = useCallback(
+    async (fileId: FileId) => {
+      const record = activeStirlingFileStubs.find((r) => r.id === fileId);
+      const file = record ? selectors.getFile(record.id) : null;
+      console.log("[FileEditor] handleDownloadFile called:", {
+        fileId,
+        hasRecord: !!record,
+        hasFile: !!file,
+        localFilePath: record?.localFilePath,
+        isDirty: record?.isDirty,
+      });
+      if (record && file) {
+        const result = await downloadFile({
+          data: file,
+          filename: file.name,
+          localPath: record.localFilePath,
+        });
+        console.log("[FileEditor] Download complete, checking dirty state:", {
+          localFilePath: record.localFilePath,
+          isDirty: record.isDirty,
+          savedPath: result.savedPath,
+        });
+        // Mark file as clean after successful save to disk
+        if (result.savedPath) {
+          console.log("[FileEditor] Marking file as clean:", fileId);
+          fileActions.updateStirlingFileStub(fileId, {
+            localFilePath: record.localFilePath ?? result.savedPath,
+            isDirty: false,
           });
         } else {
+          console.log("[FileEditor] Skipping clean mark:", { savedPath: result.savedPath, isDirty: record.isDirty });
+        }
+      }
+    },
+    [activeStirlingFileStubs, selectors, fileActions],
+  );
+
+  const handleUnzipFile = useCallback(
+    async (fileId: FileId) => {
+      const record = activeStirlingFileStubs.find((r) => r.id === fileId);
+      const file = record ? selectors.getFile(record.id) : null;
+      if (record && file) {
+        try {
+          // Extract and store files using shared service method
+          const result = await zipFileService.extractAndStoreFilesWithHistory(file, record);
+
+          if (result.success && result.extractedStubs.length > 0) {
+            // Add extracted file stubs to FileContext
+            await fileActions.addStirlingFileStubs(result.extractedStubs);
+
+            // Remove the original ZIP file
+            removeFiles([fileId], false);
+
+            alert({
+              alertType: "success",
+              title: `Extracted ${result.extractedStubs.length} file(s) from ${file.name}`,
+              expandable: false,
+              durationMs: 3500,
+            });
+          } else {
+            alert({
+              alertType: "error",
+              title: `Failed to extract files from ${file.name}`,
+              body: result.errors.join("\n"),
+              expandable: true,
+              durationMs: 3500,
+            });
+          }
+        } catch (error) {
+          console.error("Failed to unzip file:", error);
           alert({
-            alertType: 'error',
-            title: `Failed to extract files from ${file.name}`,
-            body: result.errors.join('\n'),
-            expandable: true,
-            durationMs: 3500
+            alertType: "error",
+            title: `Error unzipping ${file.name}`,
+            expandable: false,
+            durationMs: 3500,
           });
         }
-      } catch (error) {
-        console.error('Failed to unzip file:', error);
-        alert({
-          alertType: 'error',
-          title: `Error unzipping ${file.name}`,
-          expandable: false,
-          durationMs: 3500
-        });
       }
-    }
-  }, [activeStirlingFileStubs, selectors, fileActions, removeFiles]);
+    },
+    [activeStirlingFileStubs, selectors, fileActions, removeFiles],
+  );
 
-  const handleViewFile = useCallback((fileId: FileId) => {
-    const index = activeStirlingFileStubs.findIndex(r => r.id === fileId);
-    if (index !== -1) {
-      setActiveFileId(fileId as string);
-      setActiveFileIndex(index);
-      navActions.setWorkbench('viewer');
-    }
-  }, [activeStirlingFileStubs, setActiveFileId, setActiveFileIndex, navActions.setWorkbench]);
+  const handleViewFile = useCallback(
+    (fileId: FileId) => {
+      const index = activeStirlingFileStubs.findIndex((r) => r.id === fileId);
+      if (index !== -1) {
+        setActiveFileId(fileId as string);
+        setActiveFileIndex(index);
+        navActions.setWorkbench("viewer");
+      }
+    },
+    [activeStirlingFileStubs, setActiveFileId, setActiveFileIndex, navActions.setWorkbench],
+  );
 
   const handleLoadFromStorage = useCallback(async (selectedFiles: File[]) => {
     if (selectedFiles.length === 0) return;
@@ -365,91 +387,85 @@ const FileEditor = ({
       // The files are already in FileContext, just need to add them to active files
       showStatus(`Loaded ${selectedFiles.length} files from storage`);
     } catch (err) {
-      console.error('Error loading files from storage:', err);
-      showError('Failed to load some files from storage');
+      console.error("Error loading files from storage:", err);
+      showError("Failed to load some files from storage");
     }
   }, []);
 
-
   return (
     <Dropzone
       onDrop={handleFileUpload}
       multiple={true}
       maxSize={2 * 1024 * 1024 * 1024}
       style={{
-        border: 'none',
+        border: "none",
         borderRadius: 0,
-        backgroundColor: 'transparent'
+        backgroundColor: "transparent",
       }}
       activateOnClick={false}
       activateOnDrag={true}
     >
-      <Box pos="relative" style={{ overflow: 'auto' }}>
+      <Box pos="relative" style={{ overflow: "auto" }}>
         <LoadingOverlay visible={state.ui.isProcessing} />
 
         <Box p="md">
+          {activeStirlingFileStubs.length === 0 ? (
+            <Center h="60vh">
+              <Stack align="center" gap="md">
+                <Text size="lg" c="dimmed">
+                  📁
+                </Text>
+                <Text c="dimmed">No files loaded</Text>
+                <Text size="sm" c="dimmed">
+                  Upload PDF files, ZIP archives, or load from storage to get started
+                </Text>
+              </Stack>
+            </Center>
+          ) : (
+            <div
+              style={{
+                display: "grid",
+                gridTemplateColumns: "repeat(auto-fill, minmax(320px, 1fr))",
+                rowGap: "1.5rem",
+                padding: "1rem",
+                pointerEvents: "auto",
+              }}
+            >
+              {/* Add File Card - only show when files exist */}
+              {activeStirlingFileStubs.length > 0 && <AddFileCard key="add-file-card" onFileSelect={handleFileUpload} />}
 
+              {activeStirlingFileStubs.map((record, index) => {
+                return (
+                  <FileEditorThumbnail
+                    key={record.id}
+                    file={record}
+                    index={index}
+                    totalFiles={activeStirlingFileStubs.length}
+                    selectedFiles={localSelectedIds}
+                    selectionMode={selectionMode}
+                    onToggleFile={toggleFile}
+                    onCloseFile={handleCloseFile}
+                    onViewFile={handleViewFile}
+                    _onSetStatus={showStatus}
+                    onReorderFiles={handleReorderFiles}
+                    onDownloadFile={handleDownloadFile}
+                    onUnzipFile={handleUnzipFile}
+                    toolMode={toolMode}
+                    isSupported={isFileSupported(record.name)}
+                  />
+                );
+              })}
+            </div>
+          )}
+        </Box>
 
-        {activeStirlingFileStubs.length === 0 ? (
-          <Center h="60vh">
-            <Stack align="center" gap="md">
-              <Text size="lg" c="dimmed">📁</Text>
-              <Text c="dimmed">No files loaded</Text>
-              <Text size="sm" c="dimmed">Upload PDF files, ZIP archives, or load from storage to get started</Text>
-            </Stack>
-          </Center>
-        ) : (
-          <div
-            style={{
-              display: 'grid',
-              gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))',
-              rowGap: '1.5rem',
-              padding: '1rem',
-              pointerEvents: 'auto'
-            }}
-          >
-            {/* Add File Card - only show when files exist */}
-            {activeStirlingFileStubs.length > 0 && (
-              <AddFileCard
-                key="add-file-card"
-                onFileSelect={handleFileUpload}
-              />
-            )}
-
-            {activeStirlingFileStubs.map((record, index) => {
-              return (
-                <FileEditorThumbnail
-                  key={record.id}
-                  file={record}
-                  index={index}
-                  totalFiles={activeStirlingFileStubs.length}
-                  selectedFiles={localSelectedIds}
-                  selectionMode={selectionMode}
-                  onToggleFile={toggleFile}
-                  onCloseFile={handleCloseFile}
-                  onViewFile={handleViewFile}
-                  _onSetStatus={showStatus}
-                  onReorderFiles={handleReorderFiles}
-                  onDownloadFile={handleDownloadFile}
-                  onUnzipFile={handleUnzipFile}
-                  toolMode={toolMode}
-                  isSupported={isFileSupported(record.name)}
-                />
-              );
-            })}
-          </div>
-        )}
-      </Box>
-
-      {/* File Picker Modal */}
-      <FilePickerModal
-        opened={showFilePickerModal}
-        onClose={() => setShowFilePickerModal(false)}
-        storedFiles={[]} // FileEditor doesn't have access to stored files, needs to be passed from parent
-        onSelectFiles={handleLoadFromStorage}
-      />
-
-
+        {/* File Picker Modal */}
+        <FilePickerModal
+          opened={showFilePickerModal}
+          onClose={() => setShowFilePickerModal(false)}
+          storedFiles={[]} // FileEditor doesn't have access to stored files, needs to be passed from parent
+          onSelectFiles={handleLoadFromStorage}
+        />
       </Box>
     </Dropzone>
   );
diff --git a/frontend/src/core/components/fileEditor/FileEditorFileName.tsx b/frontend/src/core/components/fileEditor/FileEditorFileName.tsx
index a3e4cd4493..82911a9339 100644
--- a/frontend/src/core/components/fileEditor/FileEditorFileName.tsx
+++ b/frontend/src/core/components/fileEditor/FileEditorFileName.tsx
@@ -1,13 +1,11 @@
-import React from 'react';
-import { StirlingFileStub } from '@app/types/fileContext';
-import { PrivateContent } from '@app/components/shared/PrivateContent';
+import React from "react";
+import { StirlingFileStub } from "@app/types/fileContext";
+import { PrivateContent } from "@app/components/shared/PrivateContent";
 
 interface FileEditorFileNameProps {
   file: StirlingFileStub;
 }
 
-const FileEditorFileName = ({ file }: FileEditorFileNameProps) => (
-  <PrivateContent>{file.name}</PrivateContent>
-);
+const FileEditorFileName = ({ file }: FileEditorFileNameProps) => <PrivateContent>{file.name}</PrivateContent>;
 
 export default FileEditorFileName;
diff --git a/frontend/src/core/components/fileEditor/FileEditorThumbnail.tsx b/frontend/src/core/components/fileEditor/FileEditorThumbnail.tsx
index a2973bb7a7..307b498f26 100644
--- a/frontend/src/core/components/fileEditor/FileEditorThumbnail.tsx
+++ b/frontend/src/core/components/fileEditor/FileEditorThumbnail.tsx
@@ -1,38 +1,36 @@
-import React, { useState, useCallback, useRef, useMemo } from 'react';
-import { Text, ActionIcon, CheckboxIndicator, Tooltip, Modal, Button, Group, Stack, Loader } from '@mantine/core';
-import { useIsMobile } from '@app/hooks/useIsMobile';
-import { alert } from '@app/components/toast';
-import { useTranslation } from 'react-i18next';
-import { useFileActionTerminology } from '@app/hooks/useFileActionTerminology';
-import { useFileActionIcons } from '@app/hooks/useFileActionIcons';
-import CloseIcon from '@mui/icons-material/Close';
-import VisibilityIcon from '@mui/icons-material/Visibility';
-import UnarchiveIcon from '@mui/icons-material/Unarchive';
-import CloudUploadIcon from '@mui/icons-material/CloudUpload';
-import LinkIcon from '@mui/icons-material/Link';
-import PushPinIcon from '@mui/icons-material/PushPin';
-import PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined';
-import LockOpenIcon from '@mui/icons-material/LockOpen';
-import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
-import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
-import { StirlingFileStub } from '@app/types/fileContext';
-import { zipFileService } from '@app/services/zipFileService';
-
-import styles from '@app/components/fileEditor/FileEditor.module.css';
-import { useFileContext } from '@app/contexts/FileContext';
-import { useFileState } from '@app/contexts/file/fileHooks';
-import { FileId } from '@app/types/file';
-import { formatFileSize } from '@app/utils/fileUtils';
-import ToolChain from '@app/components/shared/ToolChain';
-import HoverActionMenu, { HoverAction } from '@app/components/shared/HoverActionMenu';
-import { downloadFile } from '@app/services/downloadService';
-import { PrivateContent } from '@app/components/shared/PrivateContent';
-import UploadToServerModal from '@app/components/shared/UploadToServerModal';
-import ShareFileModal from '@app/components/shared/ShareFileModal';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
-import { truncateCenter } from '@app/utils/textUtils';
-
+import React, { useState, useCallback, useRef, useMemo } from "react";
+import { Text, ActionIcon, CheckboxIndicator, Tooltip, Modal, Button, Group, Stack, Loader } from "@mantine/core";
+import { useIsMobile } from "@app/hooks/useIsMobile";
+import { alert } from "@app/components/toast";
+import { useTranslation } from "react-i18next";
+import { useFileActionTerminology } from "@app/hooks/useFileActionTerminology";
+import { useFileActionIcons } from "@app/hooks/useFileActionIcons";
+import CloseIcon from "@mui/icons-material/Close";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import UnarchiveIcon from "@mui/icons-material/Unarchive";
+import CloudUploadIcon from "@mui/icons-material/CloudUpload";
+import LinkIcon from "@mui/icons-material/Link";
+import PushPinIcon from "@mui/icons-material/PushPin";
+import PushPinOutlinedIcon from "@mui/icons-material/PushPinOutlined";
+import LockOpenIcon from "@mui/icons-material/LockOpen";
+import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
+import { StirlingFileStub } from "@app/types/fileContext";
+import { zipFileService } from "@app/services/zipFileService";
 
+import styles from "@app/components/fileEditor/FileEditor.module.css";
+import { useFileContext } from "@app/contexts/FileContext";
+import { useFileState } from "@app/contexts/file/fileHooks";
+import { FileId } from "@app/types/file";
+import { formatFileSize } from "@app/utils/fileUtils";
+import ToolChain from "@app/components/shared/ToolChain";
+import HoverActionMenu, { HoverAction } from "@app/components/shared/HoverActionMenu";
+import { downloadFile } from "@app/services/downloadService";
+import { PrivateContent } from "@app/components/shared/PrivateContent";
+import UploadToServerModal from "@app/components/shared/UploadToServerModal";
+import ShareFileModal from "@app/components/shared/ShareFileModal";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
+import { truncateCenter } from "@app/utils/textUtils";
 
 interface FileEditorThumbnailProps {
   file: StirlingFileStub;
@@ -69,14 +67,7 @@ const FileEditorThumbnail = ({
   const terminology = useFileActionTerminology();
   const icons = useFileActionIcons();
   const DownloadOutlinedIcon = icons.download;
-  const {
-    pinFile,
-    unpinFile,
-    isFilePinned,
-    activeFiles,
-    actions: fileActions,
-    openEncryptedUnlockPrompt,
-  } = useFileContext();
+  const { pinFile, unpinFile, isFilePinned, activeFiles, actions: fileActions, openEncryptedUnlockPrompt } = useFileContext();
   const { state, selectors } = useFileState();
   const hasError = state.ui.errorFileIds.includes(file.id);
 
@@ -93,7 +84,7 @@ const FileEditorThumbnail = ({
 
   // Resolve the actual File object for pin/unpin operations
   const actualFile = useMemo(() => {
-    return activeFiles.find(f => f.fileId === file.id);
+    return activeFiles.find((f) => f.fileId === file.id);
   }, [activeFiles, file.id]);
   const isPinned = actualFile ? isFilePinned(actualFile) : false;
 
@@ -114,17 +105,17 @@ const FileEditorThumbnail = ({
   }, [file.size]);
 
   const extUpper = useMemo(() => {
-    const m = /\.([a-z0-9]+)$/i.exec(file.name ?? '');
-    return (m?.[1] || '').toUpperCase();
+    const m = /\.([a-z0-9]+)$/i.exec(file.name ?? "");
+    return (m?.[1] || "").toUpperCase();
   }, [file.name]);
 
   const extLower = useMemo(() => {
-    const m = /\.([a-z0-9]+)$/i.exec(file.name ?? '');
-    return (m?.[1] || '').toLowerCase();
+    const m = /\.([a-z0-9]+)$/i.exec(file.name ?? "");
+    return (m?.[1] || "").toLowerCase();
   }, [file.name]);
 
-  const isCBZ = extLower === 'cbz';
-  const isCBR = extLower === 'cbr';
+  const isCBZ = extLower === "cbz";
+  const isCBR = extLower === "cbr";
   const uploadEnabled = config?.storageEnabled === true;
   const sharingEnabled = uploadEnabled && config?.storageSharingEnabled === true;
   const shareLinksEnabled = sharingEnabled && config?.storageShareLinksEnabled === true;
@@ -137,71 +128,68 @@ const FileEditorThumbnail = ({
   const canUpload = uploadEnabled && isOwnedOrLocal && file.isLeaf && (!isUploaded || !isUpToDate);
   const canShare = shareLinksEnabled && isOwnedOrLocal && file.isLeaf;
 
-  const pageLabel = useMemo(
-    () =>
-      pageCount > 0
-        ? `${pageCount} ${pageCount === 1 ? 'Page' : 'Pages'}`
-        : '',
-    [pageCount]
-  );
+  const pageLabel = useMemo(() => (pageCount > 0 ? `${pageCount} ${pageCount === 1 ? "Page" : "Pages"}` : ""), [pageCount]);
 
   const dateLabel = useMemo(() => {
     const d = new Date(file.lastModified);
-    if (Number.isNaN(d.getTime())) return '';
+    if (Number.isNaN(d.getTime())) return "";
     return new Intl.DateTimeFormat(undefined, {
-      month: 'short',
-      day: '2-digit',
-      year: 'numeric',
+      month: "short",
+      day: "2-digit",
+      year: "numeric",
     }).format(d);
   }, [file.lastModified]);
 
   // ---- Drag & drop wiring ----
-  const fileElementRef = useCallback((element: HTMLDivElement | null) => {
-    if (!element) return;
+  const fileElementRef = useCallback(
+    (element: HTMLDivElement | null) => {
+      if (!element) return;
 
-    dragElementRef.current = element;
+      dragElementRef.current = element;
 
-    const dragCleanup = draggable({
-      element,
-      getInitialData: () => ({
-        type: 'file',
-        fileId: file.id,
-        fileName: file.name,
-        selectedFiles: [file.id]  // Always drag only this file, ignore selection state
-      }),
-      onDragStart: () => {
-        setIsDragging(true);
-      },
-      onDrop: () => {
-        setIsDragging(false);
-      }
-    });
+      const dragCleanup = draggable({
+        element,
+        getInitialData: () => ({
+          type: "file",
+          fileId: file.id,
+          fileName: file.name,
+          selectedFiles: [file.id], // Always drag only this file, ignore selection state
+        }),
+        onDragStart: () => {
+          setIsDragging(true);
+        },
+        onDrop: () => {
+          setIsDragging(false);
+        },
+      });
 
-    const dropCleanup = dropTargetForElements({
-      element,
-      getData: () => ({
-        type: 'file',
-        fileId: file.id
-      }),
-      canDrop: ({ source }) => {
-        const sourceData = source.data;
-        return sourceData.type === 'file' && sourceData.fileId !== file.id;
-      },
-      onDrop: ({ source }) => {
-        const sourceData = source.data;
-        if (sourceData.type === 'file' && onReorderFiles) {
-          const sourceFileId = sourceData.fileId as FileId;
-          const selectedFileIds = sourceData.selectedFiles as FileId[];
-          onReorderFiles(sourceFileId, file.id, selectedFileIds);
-        }
-      }
-    });
+      const dropCleanup = dropTargetForElements({
+        element,
+        getData: () => ({
+          type: "file",
+          fileId: file.id,
+        }),
+        canDrop: ({ source }) => {
+          const sourceData = source.data;
+          return sourceData.type === "file" && sourceData.fileId !== file.id;
+        },
+        onDrop: ({ source }) => {
+          const sourceData = source.data;
+          if (sourceData.type === "file" && onReorderFiles) {
+            const sourceFileId = sourceData.fileId as FileId;
+            const selectedFileIds = sourceData.selectedFiles as FileId[];
+            onReorderFiles(sourceFileId, file.id, selectedFileIds);
+          }
+        },
+      });
 
-    return () => {
-      dragCleanup();
-      dropCleanup();
-    };
-  }, [file.id, file.name, selectedFiles, onReorderFiles]);
+      return () => {
+        dragCleanup();
+        dropCleanup();
+      };
+    },
+    [file.id, file.name, selectedFiles, onReorderFiles],
+  );
 
   // Handle close with confirmation
   const handleCloseWithConfirmation = useCallback(() => {
@@ -210,7 +198,7 @@ const FileEditorThumbnail = ({
 
   const handleConfirmClose = useCallback(() => {
     onCloseFile(file.id);
-    alert({ alertType: 'neutral', title: `Closed ${file.name}`, expandable: false, durationMs: 3500 });
+    alert({ alertType: "neutral", title: `Closed ${file.name}`, expandable: false, durationMs: 3500 });
     setShowCloseModal(false);
   }, [file.id, file.name, onCloseFile]);
 
@@ -221,12 +209,12 @@ const FileEditorThumbnail = ({
         const result = await downloadFile({
           data: fileToSave,
           filename: file.name,
-          localPath: file.localFilePath
+          localPath: file.localFilePath,
         });
         if (!result.cancelled && result.savedPath) {
           fileActions.updateStirlingFileStub(file.id, {
             localFilePath: file.localFilePath ?? result.savedPath,
-            isDirty: false
+            isDirty: false,
           });
         } else if (result.cancelled) {
           setShowCloseModal(false);
@@ -234,14 +222,14 @@ const FileEditorThumbnail = ({
         }
       } catch (error) {
         console.error(`Failed to save ${file.name}:`, error);
-        alert({ alertType: 'error', title: 'Save failed', body: `Could not save ${file.name}`, expandable: true });
+        alert({ alertType: "error", title: "Save failed", body: `Could not save ${file.name}`, expandable: true });
         setShowCloseModal(false);
         return;
       }
     }
     // Then close
     onCloseFile(file.id);
-    alert({ alertType: 'success', title: `Saved and closed ${file.name}`, expandable: false, durationMs: 3500 });
+    alert({ alertType: "success", title: `Saved and closed ${file.name}`, expandable: false, durationMs: 3500 });
     setShowCloseModal(false);
   }, [file.id, file.name, file.localFilePath, onCloseFile, selectors, fileActions]);
 
@@ -250,95 +238,110 @@ const FileEditorThumbnail = ({
   }, []);
 
   // Build hover menu actions
-  const hoverActions = useMemo<HoverAction[]>(() => [
-    {
-      id: 'view',
-      icon: <VisibilityIcon style={{ fontSize: 20 }} />,
-      label: t('openInViewer', 'Open in Viewer'),
-      onClick: (e) => {
-        e.stopPropagation();
-        onViewFile(file.id);
+  const hoverActions = useMemo<HoverAction[]>(
+    () => [
+      {
+        id: "view",
+        icon: <VisibilityIcon style={{ fontSize: 20 }} />,
+        label: t("openInViewer", "Open in Viewer"),
+        onClick: (e) => {
+          e.stopPropagation();
+          onViewFile(file.id);
+        },
       },
-    },
-    {
-      id: 'download',
-      icon: <DownloadOutlinedIcon style={{ fontSize: 20 }} />,
-      label: terminology.download,
-      onClick: (e) => {
-        e.stopPropagation();
-        onDownloadFile(file.id);
+      {
+        id: "download",
+        icon: <DownloadOutlinedIcon style={{ fontSize: 20 }} />,
+        label: terminology.download,
+        onClick: (e) => {
+          e.stopPropagation();
+          onDownloadFile(file.id);
+        },
       },
-    },
-    ...(canUpload || canShare
-      ? [
-        ...(canUpload ? [{
-          id: 'upload',
-          icon: <CloudUploadIcon style={{ fontSize: 20 }} />,
-          label: isUploaded
-            ? t('fileManager.updateOnServer', 'Update on Server')
-            : t('fileManager.uploadToServer', 'Upload to Server'),
-          onClick: (e: React.MouseEvent) => {
-            e.stopPropagation();
-            setShowUploadModal(true);
-          },
-        }] : []),
-        ...(canShare ? [{
-          id: 'share',
-          icon: <LinkIcon style={{ fontSize: 20 }} />,
-          label: t('fileManager.share', 'Share'),
-          onClick: (e: React.MouseEvent) => {
-            e.stopPropagation();
-            setShowShareModal(true);
-          },
-        }] : []),
-      ]
-      : []),
-    {
-      id: 'unzip',
-      icon: <UnarchiveIcon style={{ fontSize: 20 }} />,
-      label: t('fileManager.unzip', 'Unzip'),
-      onClick: (e) => {
-        e.stopPropagation();
-        if (onUnzipFile) {
-          onUnzipFile(file.id);
-          alert({ alertType: 'success', title: `Unzipping ${file.name}`, expandable: false, durationMs: 2500 });
-        }
+      ...(canUpload || canShare
+        ? [
+            ...(canUpload
+              ? [
+                  {
+                    id: "upload",
+                    icon: <CloudUploadIcon style={{ fontSize: 20 }} />,
+                    label: isUploaded
+                      ? t("fileManager.updateOnServer", "Update on Server")
+                      : t("fileManager.uploadToServer", "Upload to Server"),
+                    onClick: (e: React.MouseEvent) => {
+                      e.stopPropagation();
+                      setShowUploadModal(true);
+                    },
+                  },
+                ]
+              : []),
+            ...(canShare
+              ? [
+                  {
+                    id: "share",
+                    icon: <LinkIcon style={{ fontSize: 20 }} />,
+                    label: t("fileManager.share", "Share"),
+                    onClick: (e: React.MouseEvent) => {
+                      e.stopPropagation();
+                      setShowShareModal(true);
+                    },
+                  },
+                ]
+              : []),
+          ]
+        : []),
+      {
+        id: "unzip",
+        icon: <UnarchiveIcon style={{ fontSize: 20 }} />,
+        label: t("fileManager.unzip", "Unzip"),
+        onClick: (e) => {
+          e.stopPropagation();
+          if (onUnzipFile) {
+            onUnzipFile(file.id);
+            alert({ alertType: "success", title: `Unzipping ${file.name}`, expandable: false, durationMs: 2500 });
+          }
+        },
+        hidden: !isZipFile || !onUnzipFile || isCBZ || isCBR,
       },
-      hidden: !isZipFile || !onUnzipFile || isCBZ || isCBR,
-    },
-    {
-      id: 'close',
-      icon: <CloseIcon style={{ fontSize: 20 }} />,
-      label: t('close', 'Close'),
-      onClick: (e) => {
-        e.stopPropagation();
-        handleCloseWithConfirmation();
+      {
+        id: "close",
+        icon: <CloseIcon style={{ fontSize: 20 }} />,
+        label: t("close", "Close"),
+        onClick: (e) => {
+          e.stopPropagation();
+          handleCloseWithConfirmation();
+        },
+        color: "red",
       },
-      color: 'red',
-    }
-  ], [
-    t,
-    file.id,
-    file.name,
-    isZipFile,
-    isCBZ,
-    isCBR,
-    terminology,
-    onViewFile,
-    onDownloadFile,
-    onUnzipFile,
-    handleCloseWithConfirmation,
-    canUpload,
-    canShare,
-    isUploaded
-  ]);
+    ],
+    [
+      t,
+      file.id,
+      file.name,
+      isZipFile,
+      isCBZ,
+      isCBR,
+      terminology,
+      onViewFile,
+      onDownloadFile,
+      onUnzipFile,
+      handleCloseWithConfirmation,
+      canUpload,
+      canShare,
+      isUploaded,
+    ],
+  );
 
   // ---- Card interactions ----
   const handleCardClick = () => {
     if (!isSupported) return;
     // Clear error state if file has an error (click to clear error)
     if (hasError) {
-      try { fileActions.clearFileError(file.id); } catch (_e) { void _e; }
+      try {
+        fileActions.clearFileError(file.id);
+      } catch (_e) {
+        void _e;
+      }
     }
     if (isSharedFile && !sharedEditNoticeShownRef.current) {
       sharedEditNoticeShownRef.current = true;
@@ -359,7 +362,6 @@ const FileEditorThumbnail = ({
     return isSelected ? styles.headerSelected : styles.headerResting;
   };
 
-
   return (
     <div
       ref={fileElementRef}
@@ -369,7 +371,7 @@ const FileEditorThumbnail = ({
       data-selected={isSelected}
       data-supported={isSupported}
       className={`${styles.card} w-[18rem] h-[22rem] select-none flex flex-col shadow-sm transition-all relative`}
-      style={{opacity: isDragging ? 0.9 : 1}}
+      style={{ opacity: isDragging ? 0.9 : 1 }}
       tabIndex={0}
       role="listitem"
       aria-selected={isSelected}
@@ -379,15 +381,12 @@ const FileEditorThumbnail = ({
       onDoubleClick={handleCardDoubleClick}
     >
       {/* Header bar */}
-      <div
-        className={`${styles.header} ${getHeaderClassName()}`}
-        data-has-error={hasError}
-      >
+      <div className={`${styles.header} ${getHeaderClassName()}`} data-has-error={hasError}>
         {/* Logo/checkbox area */}
         <div className={styles.logoMark}>
           {hasError ? (
             <div className={styles.errorPill}>
-              <span>{t('error._value', 'Error')}</span>
+              <span>{t("error._value", "Error")}</span>
             </div>
           ) : isSupported ? (
             <CheckboxIndicator
@@ -397,9 +396,7 @@ const FileEditorThumbnail = ({
             />
           ) : (
             <div className={styles.unsupportedPill}>
-              <span>
-                {t('unsupported', 'Unsupported')}
-              </span>
+              <span>{t("unsupported", "Unsupported")}</span>
             </div>
           )}
         </div>
@@ -412,9 +409,9 @@ const FileEditorThumbnail = ({
         {/* Action buttons group */}
         <div className={styles.headerActions}>
           {isEncrypted && (
-            <Tooltip label={t('encryptedPdfUnlock.unlockPrompt', 'Unlock PDF to continue')}>
+            <Tooltip label={t("encryptedPdfUnlock.unlockPrompt", "Unlock PDF to continue")}>
               <ActionIcon
-                aria-label={t('encryptedPdfUnlock.unlockPrompt', 'Unlock PDF to continue')}
+                aria-label={t("encryptedPdfUnlock.unlockPrompt", "Unlock PDF to continue")}
                 variant="subtle"
                 className={styles.headerIconButton}
                 onClick={(e) => {
@@ -427,9 +424,17 @@ const FileEditorThumbnail = ({
             </Tooltip>
           )}
           {/* Pin/Unpin icon */}
-          <Tooltip label={isPinned ? t('unpin', 'Unpin File (replace after tool run)') : t('pin', 'Pin File (keep active after tool run)')}>
+          <Tooltip
+            label={
+              isPinned ? t("unpin", "Unpin File (replace after tool run)") : t("pin", "Pin File (keep active after tool run)")
+            }
+          >
             <ActionIcon
-              aria-label={isPinned ? t('unpin', 'Unpin File (replace after tool run)') : t('pin', 'Pin File (keep active after tool run)')}
+              aria-label={
+                isPinned
+                  ? t("unpin", "Unpin File (replace after tool run)")
+                  : t("pin", "Pin File (keep active after tool run)")
+              }
               variant="subtle"
               className={isPinned ? styles.pinned : styles.headerIconButton}
               data-tour="file-card-pin"
@@ -438,10 +443,10 @@ const FileEditorThumbnail = ({
                 if (actualFile) {
                   if (isPinned) {
                     unpinFile(actualFile);
-                    alert({ alertType: 'neutral', title: `Unpinned ${file.name}`, expandable: false, durationMs: 3000 });
+                    alert({ alertType: "neutral", title: `Unpinned ${file.name}`, expandable: false, durationMs: 3000 });
                   } else {
                     pinFile(actualFile);
-                    alert({ alertType: 'success', title: `Pinned ${file.name}`, expandable: false, durationMs: 3000 });
+                    alert({ alertType: "success", title: `Pinned ${file.name}`, expandable: false, durationMs: 3000 });
                   }
                 }
               }}
@@ -454,35 +459,30 @@ const FileEditorThumbnail = ({
 
       {/* Title + meta line */}
       <div
-      style={{
-        padding: '0.5rem',
-        textAlign: 'center',
-        background: 'var(--file-card-bg)',
-        marginTop: '0.5rem',
-        marginBottom: '0.5rem',
-      }}>
+        style={{
+          padding: "0.5rem",
+          textAlign: "center",
+          background: "var(--file-card-bg)",
+          marginTop: "0.5rem",
+          marginBottom: "0.5rem",
+        }}
+      >
         <Text size="lg" fw={700} className={styles.title} title={file.name}>
           <PrivateContent>{truncateCenter(file.name, 40)}</PrivateContent>
         </Text>
-        <Text
-          size="sm"
-          c="dimmed"
-          className={styles.meta}
-          lineClamp={3}
-          title={`${extUpper || 'FILE'} • ${prettySize}`}
-        >
+        <Text size="sm" c="dimmed" className={styles.meta} lineClamp={3} title={`${extUpper || "FILE"} • ${prettySize}`}>
           {/* e.g.,  v2 - Jan 29, 2025 - PDF file - 3 Pages */}
           {`v${file.versionNumber} - `}
           {dateLabel}
-          {extUpper ? ` - ${extUpper} file` : ''}
-          {pageLabel ? ` - ${pageLabel}` : ''}
+          {extUpper ? ` - ${extUpper} file` : ""}
+          {pageLabel ? ` - ${pageLabel}` : ""}
         </Text>
       </div>
 
       {/* Preview area */}
       <div
         className={`${styles.previewBox} mx-6 mb-4 relative flex-1`}
-        style={isSupported || hasError ? undefined : { filter: 'grayscale(80%)', opacity: 0.6 }}
+        style={isSupported || hasError ? undefined : { filter: "grayscale(80%)", opacity: 0.6 }}
       >
         <div className={styles.previewPaper}>
           {file.thumbnailUrl ? (
@@ -495,27 +495,29 @@ const FileEditorThumbnail = ({
                 decoding="async"
                 onError={(e) => {
                   const img = e.currentTarget;
-                  img.style.display = 'none';
-                  img.parentElement?.setAttribute('data-thumb-missing', 'true');
+                  img.style.display = "none";
+                  img.parentElement?.setAttribute("data-thumb-missing", "true");
                 }}
                 style={{
-                  maxWidth: '80%',
-                maxHeight: '80%',
-                objectFit: 'contain',
-                borderRadius: 0,
-                background: '#ffffff',
-                border: '1px solid var(--border-default)',
-                display: 'block',
-                marginLeft: 'auto',
-                marginRight: 'auto',
-                alignSelf: 'start'
-              }}
-            />
+                  maxWidth: "80%",
+                  maxHeight: "80%",
+                  objectFit: "contain",
+                  borderRadius: 0,
+                  background: "#ffffff",
+                  border: "1px solid var(--border-default)",
+                  display: "block",
+                  marginLeft: "auto",
+                  marginRight: "auto",
+                  alignSelf: "start",
+                }}
+              />
             </PrivateContent>
-          ) : file.type?.startsWith('application/pdf') ? (
-            <Stack align="center" justify="center" gap="xs" style={{ height: '100%' }}>
+          ) : file.type?.startsWith("application/pdf") ? (
+            <Stack align="center" justify="center" gap="xs" style={{ height: "100%" }}>
               <Loader size="sm" />
-              <Text size="xs" c="dimmed">Loading thumbnail...</Text>
+              <Text size="xs" c="dimmed">
+                Loading thumbnail...
+              </Text>
             </Stack>
           ) : null}
         </div>
@@ -527,74 +529,72 @@ const FileEditorThumbnail = ({
 
         {/* Tool chain display at bottom */}
         {file.toolHistory && (
-          <div style={{
-            position: 'absolute',
-            bottom: '4px',
-            left: '4px',
-            right: '4px',
-            padding: '4px 6px',
-            textAlign: 'center',
-            fontWeight: 600,
-            overflow: 'hidden',
-            whiteSpace: 'nowrap'
-          }}>
+          <div
+            style={{
+              position: "absolute",
+              bottom: "4px",
+              left: "4px",
+              right: "4px",
+              padding: "4px 6px",
+              textAlign: "center",
+              fontWeight: 600,
+              overflow: "hidden",
+              whiteSpace: "nowrap",
+            }}
+          >
             <ToolChain
               toolChain={file.toolHistory}
               displayStyle="text"
               size="xs"
-              maxWidth={'100%'}
-              color='var(--mantine-color-gray-7)'
+              maxWidth={"100%"}
+              color="var(--mantine-color-gray-7)"
             />
           </div>
         )}
       </div>
 
       {/* Hover Menu */}
-      <HoverActionMenu
-        show={showHoverMenu || isMobile}
-        actions={hoverActions}
-        position="outside"
-      />
+      <HoverActionMenu show={showHoverMenu || isMobile} actions={hoverActions} position="outside" />
 
       {/* Close Confirmation Modal */}
       <Modal
         opened={showCloseModal}
         onClose={handleCancelClose}
-        title={t('confirmClose', 'Confirm Close')}
+        title={t("confirmClose", "Confirm Close")}
         centered
         size="auto"
       >
         <Stack gap="md">
           {file.isDirty && file.localFilePath ? (
             <>
-              <Text size="md">{t('confirmCloseUnsaved', 'This file has unsaved changes.')}</Text>
+              <Text size="md">{t("confirmCloseUnsaved", "This file has unsaved changes.")}</Text>
               <Text size="sm" c="dimmed" fw={500}>
                 {file.name}
               </Text>
               <Group justify="flex-end" gap="sm">
                 <Button variant="light" onClick={handleCancelClose}>
-                  {t('confirmCloseCancel', 'Cancel')}
+                  {t("confirmCloseCancel", "Cancel")}
                 </Button>
                 <Button variant="filled" color="red" onClick={handleConfirmClose}>
-                  {t('confirmCloseDiscard', 'Discard changes and close')}
+                  {t("confirmCloseDiscard", "Discard changes and close")}
                 </Button>
                 <Button variant="filled" onClick={handleSaveAndClose}>
-                  {t('confirmCloseSave', 'Save and close')}
+                  {t("confirmCloseSave", "Save and close")}
                 </Button>
               </Group>
             </>
           ) : (
             <>
-              <Text size="md">{t('confirmCloseMessage', 'Are you sure you want to close this file?')}</Text>
+              <Text size="md">{t("confirmCloseMessage", "Are you sure you want to close this file?")}</Text>
               <Text size="sm" c="dimmed" fw={500}>
                 {file.name}
               </Text>
               <Group justify="flex-end" gap="sm">
                 <Button variant="light" onClick={handleCancelClose}>
-                  {t('confirmCloseCancel', 'Cancel')}
+                  {t("confirmCloseCancel", "Cancel")}
                 </Button>
                 <Button variant="filled" color="red" onClick={handleConfirmClose}>
-                  {t('confirmCloseConfirm', 'Close File')}
+                  {t("confirmCloseConfirm", "Close File")}
                 </Button>
               </Group>
             </>
@@ -604,39 +604,27 @@ const FileEditorThumbnail = ({
       <Modal
         opened={showSharedEditNotice}
         onClose={() => setShowSharedEditNotice(false)}
-        title={t('fileManager.sharedEditNoticeTitle', 'Read-only server copy')}
+        title={t("fileManager.sharedEditNoticeTitle", "Read-only server copy")}
         centered
         size="auto"
       >
         <Stack gap="md">
           <Text size="sm">
             {t(
-              'fileManager.sharedEditNoticeBody',
-              'You do not have edit rights to the server version of this file. Any edits you make will be saved as a local copy.'
+              "fileManager.sharedEditNoticeBody",
+              "You do not have edit rights to the server version of this file. Any edits you make will be saved as a local copy.",
             )}
           </Text>
           <Group justify="flex-end" gap="sm">
             <Button onClick={() => setShowSharedEditNotice(false)}>
-              {t('fileManager.sharedEditNoticeConfirm', 'Got it')}
+              {t("fileManager.sharedEditNoticeConfirm", "Got it")}
             </Button>
           </Group>
         </Stack>
       </Modal>
 
-      {canUpload && (
-        <UploadToServerModal
-          opened={showUploadModal}
-          onClose={() => setShowUploadModal(false)}
-          file={file}
-        />
-      )}
-      {canShare && (
-        <ShareFileModal
-          opened={showShareModal}
-          onClose={() => setShowShareModal(false)}
-          file={file}
-        />
-      )}
+      {canUpload && <UploadToServerModal opened={showUploadModal} onClose={() => setShowUploadModal(false)} file={file} />}
+      {canShare && <ShareFileModal opened={showShareModal} onClose={() => setShowShareModal(false)} file={file} />}
     </div>
   );
 };
diff --git a/frontend/src/core/components/fileEditor/fileEditorRightRailButtons.tsx b/frontend/src/core/components/fileEditor/fileEditorRightRailButtons.tsx
index 122023af6f..95de665902 100644
--- a/frontend/src/core/components/fileEditor/fileEditorRightRailButtons.tsx
+++ b/frontend/src/core/components/fileEditor/fileEditorRightRailButtons.tsx
@@ -1,7 +1,7 @@
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useRightRailButtons, RightRailButtonWithAction } from '@app/hooks/useRightRailButtons';
-import LocalIcon from '@app/components/shared/LocalIcon';
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { useRightRailButtons, RightRailButtonWithAction } from "@app/hooks/useRightRailButtons";
+import LocalIcon from "@app/components/shared/LocalIcon";
 
 interface FileEditorRightRailButtonsParams {
   totalItems: number;
@@ -20,41 +20,44 @@ export function useFileEditorRightRailButtons({
 }: FileEditorRightRailButtonsParams) {
   const { t, i18n } = useTranslation();
 
-  const buttons = useMemo<RightRailButtonWithAction[]>(() => [
-    {
-      id: 'file-select-all',
-      icon: <LocalIcon icon="select-all" width="1.5rem" height="1.5rem" />,
-      tooltip: t('rightRail.selectAll', 'Select All'),
-      ariaLabel: typeof t === 'function' ? t('rightRail.selectAll', 'Select All') : 'Select All',
-      section: 'top' as const,
-      order: 10,
-      disabled: totalItems === 0 || selectedCount === totalItems,
-      visible: totalItems > 0,
-      onClick: onSelectAll,
-    },
-    {
-      id: 'file-deselect-all',
-      icon: <LocalIcon icon="crop-square-outline" width="1.5rem" height="1.5rem" />,
-      tooltip: t('rightRail.deselectAll', 'Deselect All'),
-      ariaLabel: typeof t === 'function' ? t('rightRail.deselectAll', 'Deselect All') : 'Deselect All',
-      section: 'top' as const,
-      order: 20,
-      disabled: selectedCount === 0,
-      visible: totalItems > 0,
-      onClick: onDeselectAll,
-    },
-    {
-      id: 'file-close-selected',
-      icon: <LocalIcon icon="close-rounded" width="1.5rem" height="1.5rem" />,
-      tooltip: t('rightRail.closeSelected', 'Close Selected Files'),
-      ariaLabel: typeof t === 'function' ? t('rightRail.closeSelected', 'Close Selected Files') : 'Close Selected Files',
-      section: 'top' as const,
-      order: 30,
-      disabled: selectedCount === 0,
-      visible: totalItems > 0,
-      onClick: onCloseSelected,
-    },
-  ], [t, i18n.language, totalItems, selectedCount, onSelectAll, onDeselectAll, onCloseSelected]);
+  const buttons = useMemo<RightRailButtonWithAction[]>(
+    () => [
+      {
+        id: "file-select-all",
+        icon: <LocalIcon icon="select-all" width="1.5rem" height="1.5rem" />,
+        tooltip: t("rightRail.selectAll", "Select All"),
+        ariaLabel: typeof t === "function" ? t("rightRail.selectAll", "Select All") : "Select All",
+        section: "top" as const,
+        order: 10,
+        disabled: totalItems === 0 || selectedCount === totalItems,
+        visible: totalItems > 0,
+        onClick: onSelectAll,
+      },
+      {
+        id: "file-deselect-all",
+        icon: <LocalIcon icon="crop-square-outline" width="1.5rem" height="1.5rem" />,
+        tooltip: t("rightRail.deselectAll", "Deselect All"),
+        ariaLabel: typeof t === "function" ? t("rightRail.deselectAll", "Deselect All") : "Deselect All",
+        section: "top" as const,
+        order: 20,
+        disabled: selectedCount === 0,
+        visible: totalItems > 0,
+        onClick: onDeselectAll,
+      },
+      {
+        id: "file-close-selected",
+        icon: <LocalIcon icon="close-rounded" width="1.5rem" height="1.5rem" />,
+        tooltip: t("rightRail.closeSelected", "Close Selected Files"),
+        ariaLabel: typeof t === "function" ? t("rightRail.closeSelected", "Close Selected Files") : "Close Selected Files",
+        section: "top" as const,
+        order: 30,
+        disabled: selectedCount === 0,
+        visible: totalItems > 0,
+        onClick: onCloseSelected,
+      },
+    ],
+    [t, i18n.language, totalItems, selectedCount, onSelectAll, onDeselectAll, onCloseSelected],
+  );
 
   useRightRailButtons(buttons);
 }
diff --git a/frontend/src/core/components/fileManager/CompactFileDetails.tsx b/frontend/src/core/components/fileManager/CompactFileDetails.tsx
index 5156dccff9..9e60b8d8e6 100644
--- a/frontend/src/core/components/fileManager/CompactFileDetails.tsx
+++ b/frontend/src/core/components/fileManager/CompactFileDetails.tsx
@@ -1,12 +1,12 @@
-import React from 'react';
-import { Stack, Box, Text, Button, ActionIcon, Center } from '@mantine/core';
-import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
-import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
-import { useTranslation } from 'react-i18next';
-import { getFileSize } from '@app/utils/fileUtils';
-import { StirlingFileStub } from '@app/types/fileContext';
-import { PrivateContent } from '@app/components/shared/PrivateContent';
+import React from "react";
+import { Stack, Box, Text, Button, ActionIcon, Center } from "@mantine/core";
+import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import { useTranslation } from "react-i18next";
+import { getFileSize } from "@app/utils/fileUtils";
+import { StirlingFileStub } from "@app/types/fileContext";
+import { PrivateContent } from "@app/components/shared/PrivateContent";
 
 interface CompactFileDetailsProps {
   currentFile: StirlingFileStub | null;
@@ -29,47 +29,56 @@ const CompactFileDetails: React.FC<CompactFileDetailsProps> = ({
   isAnimating,
   onPrevious,
   onNext,
-  onOpenFiles
+  onOpenFiles,
 }) => {
   const { t } = useTranslation();
   const hasSelection = selectedFiles.length > 0;
   const hasMultipleFiles = numberOfFiles > 1;
   const showOwner = Boolean(
-    currentFile &&
-      (currentFile.remoteOwnedByCurrentUser === false || currentFile.remoteSharedViaLink)
+    currentFile && (currentFile.remoteOwnedByCurrentUser === false || currentFile.remoteSharedViaLink),
   );
-  const ownerLabel = currentFile
-    ? currentFile.remoteOwnerUsername || t('fileManager.ownerUnknown', 'Unknown')
-    : '';
+  const ownerLabel = currentFile ? currentFile.remoteOwnerUsername || t("fileManager.ownerUnknown", "Unknown") : "";
 
   return (
-    <Stack gap="xs" style={{ height: '100%' }}>
+    <Stack gap="xs" style={{ height: "100%" }}>
       {/* Compact mobile layout */}
-      <Box style={{ display: 'flex', gap: '0.75rem', alignItems: 'center' }}>
+      <Box style={{ display: "flex", gap: "0.75rem", alignItems: "center" }}>
         {/* Small preview */}
-        <Box style={{ width: '7.5rem', height: '9.375rem', flexShrink: 0, position: 'relative', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <Box
+          style={{
+            width: "7.5rem",
+            height: "9.375rem",
+            flexShrink: 0,
+            position: "relative",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
           {currentFile && thumbnail ? (
             <PrivateContent>
               <img
                 src={thumbnail}
                 alt={currentFile.name}
                 style={{
-                  maxWidth: '100%',
-                  maxHeight: '100%',
-                  objectFit: 'contain',
-                  borderRadius: '0.25rem',
-                  boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)'
+                  maxWidth: "100%",
+                  maxHeight: "100%",
+                  objectFit: "contain",
+                  borderRadius: "0.25rem",
+                  boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
                 }}
               />
             </PrivateContent>
           ) : currentFile ? (
-            <Center style={{
-              width: '100%',
-              height: '100%',
-              backgroundColor: 'var(--mantine-color-gray-1)',
-              borderRadius: 4
-            }}>
-              <PictureAsPdfIcon style={{ fontSize: 20, color: 'var(--mantine-color-gray-6)' }} />
+            <Center
+              style={{
+                width: "100%",
+                height: "100%",
+                backgroundColor: "var(--mantine-color-gray-1)",
+                borderRadius: 4,
+              }}
+            >
+              <PictureAsPdfIcon style={{ fontSize: 20, color: "var(--mantine-color-gray-6)" }} />
             </Center>
           ) : null}
         </Box>
@@ -77,10 +86,10 @@ const CompactFileDetails: React.FC<CompactFileDetailsProps> = ({
         {/* File info */}
         <Box style={{ flex: 1, minWidth: 0 }}>
           <Text size="sm" fw={500} truncate>
-            <PrivateContent>{currentFile ? currentFile.name : 'No file selected'}</PrivateContent>
+            <PrivateContent>{currentFile ? currentFile.name : "No file selected"}</PrivateContent>
           </Text>
           <Text size="xs" c="dimmed">
-            {currentFile ? getFileSize(currentFile) : ''}
+            {currentFile ? getFileSize(currentFile) : ""}
             {selectedFiles.length > 1 && ` • ${selectedFiles.length} files`}
             {currentFile && ` • v${currentFile.versionNumber || 1}`}
           </Text>
@@ -92,33 +101,23 @@ const CompactFileDetails: React.FC<CompactFileDetailsProps> = ({
           {/* Compact tool chain for mobile */}
           {currentFile?.toolHistory && currentFile.toolHistory.length > 0 && (
             <Text size="xs" c="dimmed">
-              {currentFile.toolHistory.map((tool) => t(`home.${tool.toolId}.title`, tool.toolId)).join(' → ')}
+              {currentFile.toolHistory.map((tool) => t(`home.${tool.toolId}.title`, tool.toolId)).join(" → ")}
             </Text>
           )}
           {currentFile && showOwner && (
             <Text size="xs" c="dimmed">
-              {t('fileManager.owner', 'Owner')}: {ownerLabel}
+              {t("fileManager.owner", "Owner")}: {ownerLabel}
             </Text>
           )}
         </Box>
 
         {/* Navigation arrows for multiple files */}
         {hasMultipleFiles && (
-          <Box style={{ display: 'flex', gap: '0.25rem' }}>
-            <ActionIcon
-              variant="subtle"
-              size="sm"
-              onClick={onPrevious}
-              disabled={isAnimating}
-            >
+          <Box style={{ display: "flex", gap: "0.25rem" }}>
+            <ActionIcon variant="subtle" size="sm" onClick={onPrevious} disabled={isAnimating}>
               <ChevronLeftIcon style={{ fontSize: 16 }} />
             </ActionIcon>
-            <ActionIcon
-              variant="subtle"
-              size="sm"
-              onClick={onNext}
-              disabled={isAnimating}
-            >
+            <ActionIcon variant="subtle" size="sm" onClick={onNext} disabled={isAnimating}>
               <ChevronRightIcon style={{ fontSize: 16 }} />
             </ActionIcon>
           </Box>
@@ -132,14 +131,13 @@ const CompactFileDetails: React.FC<CompactFileDetailsProps> = ({
         disabled={!hasSelection}
         fullWidth
         style={{
-          backgroundColor: hasSelection ? 'var(--btn-open-file)' : 'var(--mantine-color-gray-4)',
-          color: 'white'
+          backgroundColor: hasSelection ? "var(--btn-open-file)" : "var(--mantine-color-gray-4)",
+          color: "white",
         }}
       >
         {selectedFiles.length > 1
-          ? t('fileManager.openFiles', `Open ${selectedFiles.length} Files`)
-          : t('fileManager.openFile', 'Open File')
-        }
+          ? t("fileManager.openFiles", `Open ${selectedFiles.length} Files`)
+          : t("fileManager.openFile", "Open File")}
       </Button>
     </Stack>
   );
diff --git a/frontend/src/core/components/fileManager/DesktopLayout.tsx b/frontend/src/core/components/fileManager/DesktopLayout.tsx
index 9926592c84..057b70c021 100644
--- a/frontend/src/core/components/fileManager/DesktopLayout.tsx
+++ b/frontend/src/core/components/fileManager/DesktopLayout.tsx
@@ -1,79 +1,85 @@
-import React from 'react';
-import { Grid } from '@mantine/core';
-import FileSourceButtons from '@app/components/fileManager/FileSourceButtons';
-import FileDetails from '@app/components/fileManager/FileDetails';
-import SearchInput from '@app/components/fileManager/SearchInput';
-import FileListArea from '@app/components/fileManager/FileListArea';
-import FileActions from '@app/components/fileManager/FileActions';
-import HiddenFileInput from '@app/components/fileManager/HiddenFileInput';
-import { useFileManagerContext } from '@app/contexts/FileManagerContext';
+import React from "react";
+import { Grid } from "@mantine/core";
+import FileSourceButtons from "@app/components/fileManager/FileSourceButtons";
+import FileDetails from "@app/components/fileManager/FileDetails";
+import SearchInput from "@app/components/fileManager/SearchInput";
+import FileListArea from "@app/components/fileManager/FileListArea";
+import FileActions from "@app/components/fileManager/FileActions";
+import HiddenFileInput from "@app/components/fileManager/HiddenFileInput";
+import { useFileManagerContext } from "@app/contexts/FileManagerContext";
 
 const DesktopLayout: React.FC = () => {
-  const {
-    activeSource,
-    recentFiles,
-    modalHeight,
-  } = useFileManagerContext();
+  const { activeSource, recentFiles, modalHeight } = useFileManagerContext();
 
   return (
-    <Grid gutter="xs" h="100%" grow={false} style={{ flexWrap: 'nowrap', minWidth: 0 }}>
+    <Grid gutter="xs" h="100%" grow={false} style={{ flexWrap: "nowrap", minWidth: 0 }}>
       {/* Column 1: File Sources */}
-      <Grid.Col span="content" p="lg" style={{
-        minWidth: '13.625rem',
-        width: '13.625rem',
-        flexShrink: 0,
-        height: '100%',
-      }} data-tour="file-sources">
+      <Grid.Col
+        span="content"
+        p="lg"
+        style={{
+          minWidth: "13.625rem",
+          width: "13.625rem",
+          flexShrink: 0,
+          height: "100%",
+        }}
+        data-tour="file-sources"
+      >
         <FileSourceButtons />
       </Grid.Col>
 
       {/* Column 2: File List */}
-      <Grid.Col span="auto" style={{
-        display: 'flex',
-        flexDirection: 'column',
-        height: '100%',
-        minHeight: 0,
-        minWidth: 0,
-        flex: '1 1 0px'
-      }}>
-        <div style={{
-          flex: 1,
-          display: 'flex',
-          flexDirection: 'column',
-          backgroundColor: 'var(--bg-file-list)',
-          border: '1px solid var(--mantine-color-gray-2)',
-          boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
-          overflow: 'hidden'
-        }}>
-          {activeSource === 'recent' && (
+      <Grid.Col
+        span="auto"
+        style={{
+          display: "flex",
+          flexDirection: "column",
+          height: "100%",
+          minHeight: 0,
+          minWidth: 0,
+          flex: "1 1 0px",
+        }}
+      >
+        <div
+          style={{
+            flex: 1,
+            display: "flex",
+            flexDirection: "column",
+            backgroundColor: "var(--bg-file-list)",
+            border: "1px solid var(--mantine-color-gray-2)",
+            boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)",
+            overflow: "hidden",
+          }}
+        >
+          {activeSource === "recent" && (
             <>
-              <div style={{
-                flexShrink: 0,
-                borderBottom: '1px solid var(--mantine-color-gray-3)'
-              }}>
+              <div
+                style={{
+                  flexShrink: 0,
+                  borderBottom: "1px solid var(--mantine-color-gray-3)",
+                }}
+              >
                 <SearchInput />
               </div>
-              <div style={{
-                flexShrink: 0,
-                borderBottom: '1px solid var(--mantine-color-gray-3)'
-              }}>
+              <div
+                style={{
+                  flexShrink: 0,
+                  borderBottom: "1px solid var(--mantine-color-gray-3)",
+                }}
+              >
                 <FileActions />
               </div>
             </>
           )}
 
-          <div style={{ flex: 1, minHeight: 0, overflow: 'hidden' }}>
+          <div style={{ flex: 1, minHeight: 0, overflow: "hidden" }}>
             <FileListArea
-              scrollAreaHeight={activeSource === 'recent' && recentFiles.length > 0
-                ? `calc(${modalHeight} - 7rem)`
-                : '100%'}
+              scrollAreaHeight={activeSource === "recent" && recentFiles.length > 0 ? `calc(${modalHeight} - 7rem)` : "100%"}
               scrollAreaStyle={{
-                height: activeSource === 'recent' && recentFiles.length > 0
-                  ? `calc(${modalHeight} - 7rem)`
-                  : '100%',
-                backgroundColor: 'transparent',
-                border: 'none',
-                borderRadius: 0
+                height: activeSource === "recent" && recentFiles.length > 0 ? `calc(${modalHeight} - 7rem)` : "100%",
+                backgroundColor: "transparent",
+                border: "none",
+                borderRadius: 0,
               }}
             />
           </div>
@@ -81,14 +87,18 @@ const DesktopLayout: React.FC = () => {
       </Grid.Col>
 
       {/* Column 3: File Details */}
-      <Grid.Col p="xl" span="content" style={{
-        minWidth: '25rem',
-        width: '25rem',
-        flexShrink: 0,
-        height: '100%',
-        maxWidth: '18rem'
-      }}>
-        <div style={{ height: '100%', overflow: 'hidden' }}>
+      <Grid.Col
+        p="xl"
+        span="content"
+        style={{
+          minWidth: "25rem",
+          width: "25rem",
+          flexShrink: 0,
+          height: "100%",
+          maxWidth: "18rem",
+        }}
+      >
+        <div style={{ height: "100%", overflow: "hidden" }}>
           <FileDetails />
         </div>
       </Grid.Col>
diff --git a/frontend/src/core/components/fileManager/DragOverlay.tsx b/frontend/src/core/components/fileManager/DragOverlay.tsx
index 976bb940e9..de3409d90d 100644
--- a/frontend/src/core/components/fileManager/DragOverlay.tsx
+++ b/frontend/src/core/components/fileManager/DragOverlay.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
-import { Stack, Text, useMantineTheme, alpha } from '@mantine/core';
-import UploadFileIcon from '@mui/icons-material/UploadFile';
-import { useTranslation } from 'react-i18next';
+import React from "react";
+import { Stack, Text, useMantineTheme, alpha } from "@mantine/core";
+import UploadFileIcon from "@mui/icons-material/UploadFile";
+import { useTranslation } from "react-i18next";
 
 interface DragOverlayProps {
   isVisible: boolean;
@@ -16,29 +16,29 @@ const DragOverlay: React.FC<DragOverlayProps> = ({ isVisible }) => {
   return (
     <div
       style={{
-        position: 'absolute',
+        position: "absolute",
         top: 0,
         left: 0,
         right: 0,
         bottom: 0,
         backgroundColor: alpha(theme.colors.blue[6], 0.1),
         border: `0.125rem dashed ${theme.colors.blue[6]}`,
-        borderRadius: '1.875rem',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
+        borderRadius: "1.875rem",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
         zIndex: 1000,
-        pointerEvents: 'none'
+        pointerEvents: "none",
       }}
     >
       <Stack align="center" gap="md">
-        <UploadFileIcon style={{ fontSize: '4rem', color: theme.colors.blue[6] }} />
+        <UploadFileIcon style={{ fontSize: "4rem", color: theme.colors.blue[6] }} />
         <Text size="xl" fw={500} c="blue.6">
-          {t('fileManager.dropFilesHere', 'Drop files here to upload')}
+          {t("fileManager.dropFilesHere", "Drop files here to upload")}
         </Text>
       </Stack>
     </div>
   );
 };
 
-export default DragOverlay;
\ No newline at end of file
+export default DragOverlay;
diff --git a/frontend/src/core/components/fileManager/EmptyFilesState.tsx b/frontend/src/core/components/fileManager/EmptyFilesState.tsx
index 24e79fb120..b774f06042 100644
--- a/frontend/src/core/components/fileManager/EmptyFilesState.tsx
+++ b/frontend/src/core/components/fileManager/EmptyFilesState.tsx
@@ -1,12 +1,12 @@
-import React, { useState } from 'react';
-import { Button, Group, Text, Stack, useMantineColorScheme } from '@mantine/core';
-import HistoryIcon from '@mui/icons-material/History';
-import { useTranslation } from 'react-i18next';
-import { useFileManagerContext } from '@app/contexts/FileManagerContext';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { useLogoAssets } from '@app/hooks/useLogoAssets';
-import { useFileActionTerminology } from '@app/hooks/useFileActionTerminology';
-import { useFileActionIcons } from '@app/hooks/useFileActionIcons';
+import React, { useState } from "react";
+import { Button, Group, Text, Stack, useMantineColorScheme } from "@mantine/core";
+import HistoryIcon from "@mui/icons-material/History";
+import { useTranslation } from "react-i18next";
+import { useFileManagerContext } from "@app/contexts/FileManagerContext";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { useLogoAssets } from "@app/hooks/useLogoAssets";
+import { useFileActionTerminology } from "@app/hooks/useFileActionTerminology";
+import { useFileActionIcons } from "@app/hooks/useFileActionIcons";
 
 const EmptyFilesState: React.FC = () => {
   const { t } = useTranslation();
@@ -24,92 +24,90 @@ const EmptyFilesState: React.FC = () => {
   return (
     <div
       style={{
-        height: '100%',
-        width: '100%',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
-        padding: '2rem'
+        height: "100%",
+        width: "100%",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: "2rem",
       }}
     >
       {/* Container */}
       <div
         style={{
-          backgroundColor: 'transparent',
-          padding: '3rem 2rem',
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center',
-          gap: '1.5rem',
-          minWidth: '20rem',
-          maxWidth: '28rem',
-          width: '100%'
+          backgroundColor: "transparent",
+          padding: "3rem 2rem",
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "1.5rem",
+          minWidth: "20rem",
+          maxWidth: "28rem",
+          width: "100%",
         }}
       >
         {/* No Recent Files Message */}
         <Stack align="center" gap="sm">
-          <HistoryIcon style={{ fontSize: '3rem', color: 'var(--mantine-color-gray-5)' }} />
+          <HistoryIcon style={{ fontSize: "3rem", color: "var(--mantine-color-gray-5)" }} />
           <Text c="dimmed" ta="center" size="lg">
-            {t('fileManager.noRecentFiles', 'No recent files')}
+            {t("fileManager.noRecentFiles", "No recent files")}
           </Text>
         </Stack>
 
         {/* Stirling PDF Logo */}
         <Group gap="xs" align="center">
           <img
-            src={colorScheme === 'dark' ? wordmark.white : wordmark.grey}
+            src={colorScheme === "dark" ? wordmark.white : wordmark.grey}
             alt="Stirling PDF"
-            style={{ height: '2.2rem', width: 'auto' }}
+            style={{ height: "2.2rem", width: "auto" }}
           />
         </Group>
 
         {/* Upload Button */}
         <div
           style={{
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            width: '100%',
-            marginTop: '0.5rem',
-            marginBottom: '0.5rem'
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            width: "100%",
+            marginTop: "0.5rem",
+            marginBottom: "0.5rem",
           }}
           onMouseLeave={() => setIsUploadHover(false)}
         >
           <Button
             aria-label="Upload"
             style={{
-              backgroundColor: 'var(--bg-file-manager)',
-              color: 'var(--landing-button-color)',
-              border: '1px solid var(--landing-button-border)',
-              borderRadius: isUploadHover ? '2rem' : '1rem',
-              height: '38px',
-              width: isUploadHover ? '100%' : '58px',
-              minWidth: '58px',
-              paddingLeft: isUploadHover ? '1rem' : 0,
-              paddingRight: isUploadHover ? '1rem' : 0,
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              transition: 'width .5s ease, padding .5s ease, border-radius .5s ease'
+              backgroundColor: "var(--bg-file-manager)",
+              color: "var(--landing-button-color)",
+              border: "1px solid var(--landing-button-border)",
+              borderRadius: isUploadHover ? "2rem" : "1rem",
+              height: "38px",
+              width: isUploadHover ? "100%" : "58px",
+              minWidth: "58px",
+              paddingLeft: isUploadHover ? "1rem" : 0,
+              paddingRight: isUploadHover ? "1rem" : 0,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              transition: "width .5s ease, padding .5s ease, border-radius .5s ease",
             }}
             onClick={handleUploadClick}
             onMouseEnter={() => setIsUploadHover(true)}
           >
-            <LocalIcon icon={icons.uploadIconName} width="1.25rem" height="1.25rem" style={{ color: 'var(--accent-interactive)' }} />
-            {isUploadHover && (
-              <span style={{ marginLeft: '.5rem' }}>
-                {terminology.uploadFromComputer}
-              </span>
-            )}
+            <LocalIcon
+              icon={icons.uploadIconName}
+              width="1.25rem"
+              height="1.25rem"
+              style={{ color: "var(--accent-interactive)" }}
+            />
+            {isUploadHover && <span style={{ marginLeft: ".5rem" }}>{terminology.uploadFromComputer}</span>}
           </Button>
         </div>
 
         {/* Instruction Text */}
-        <span
-          className="text-[var(--accent-interactive)]"
-          style={{ fontSize: '.8rem', textAlign: 'center' }}
-        >
+        <span className="text-[var(--accent-interactive)]" style={{ fontSize: ".8rem", textAlign: "center" }}>
           {terminology.dropFilesHere}
         </span>
       </div>
diff --git a/frontend/src/core/components/fileManager/FileActions.tsx b/frontend/src/core/components/fileManager/FileActions.tsx
index 2e69c32d35..e39113fe6d 100644
--- a/frontend/src/core/components/fileManager/FileActions.tsx
+++ b/frontend/src/core/components/fileManager/FileActions.tsx
@@ -30,9 +30,8 @@ const FileActions: React.FC = () => {
     onDownloadSelected,
     refreshRecentFiles,
     storageFilter,
-    onStorageFilterChange
-  } =
-    useFileManagerContext();
+    onStorageFilterChange,
+  } = useFileManagerContext();
   const uploadEnabled = config?.storageEnabled === true;
   const sharingEnabled = uploadEnabled && config?.storageSharingEnabled === true;
   const shareLinksEnabled = sharingEnabled && config?.storageShareLinksEnabled === true;
@@ -42,11 +41,11 @@ const FileActions: React.FC = () => {
         { value: "all", label: t("fileManager.filterAll", "All") },
         { value: "local", label: t("fileManager.filterLocal", "Local") },
         { value: "sharedWithMe", label: t("fileManager.filterSharedWithMe", "Shared with me") },
-        { value: "sharedByMe", label: t("fileManager.filterSharedByMe", "Shared by me") }
+        { value: "sharedByMe", label: t("fileManager.filterSharedByMe", "Shared by me") },
       ]
     : [
         { value: "all", label: t("fileManager.filterAll", "All") },
-        { value: "local", label: t("fileManager.filterLocal", "Local") }
+        { value: "local", label: t("fileManager.filterLocal", "Local") },
       ];
   useEffect(() => {
     if (!sharingEnabled && (storageFilter === "sharedWithMe" || storageFilter === "sharedByMe")) {
@@ -56,10 +55,8 @@ const FileActions: React.FC = () => {
   const hasSelection = selectedFileIds.length > 0;
   const hasOnlyOwnedSelection = selectedFiles.every((file) => file.remoteOwnedByCurrentUser !== false);
   const hasDownloadAccess = selectedFiles.every((file) => {
-    const role = (file.remoteOwnedByCurrentUser !== false
-      ? 'editor'
-      : (file.remoteAccessRole ?? 'viewer')).toLowerCase();
-    return role === 'editor' || role === 'commenter' || role === 'viewer';
+    const role = (file.remoteOwnedByCurrentUser !== false ? "editor" : (file.remoteAccessRole ?? "viewer")).toLowerCase();
+    return role === "editor" || role === "commenter" || role === "viewer";
   });
   const canBulkUpload = uploadEnabled && hasSelection && hasOnlyOwnedSelection;
   const canBulkShare = shareLinksEnabled && hasSelection && hasOnlyOwnedSelection;
@@ -80,7 +77,6 @@ const FileActions: React.FC = () => {
     }
   };
 
-
   // Only show actions if there are files
   if (recentFiles.length === 0) {
     return null;
@@ -120,9 +116,7 @@ const FileActions: React.FC = () => {
           <SegmentedControl
             size="xs"
             value={storageFilter}
-            onChange={(value) =>
-              onStorageFilterChange(value as "all" | "local" | "sharedWithMe" | "sharedByMe")
-            }
+            onChange={(value) => onStorageFilterChange(value as "all" | "local" | "sharedWithMe" | "sharedByMe")}
             data={storageFilterOptions}
           />
         )}
diff --git a/frontend/src/core/components/fileManager/FileDetails.tsx b/frontend/src/core/components/fileManager/FileDetails.tsx
index c2afc47769..969b98e699 100644
--- a/frontend/src/core/components/fileManager/FileDetails.tsx
+++ b/frontend/src/core/components/fileManager/FileDetails.tsx
@@ -1,19 +1,17 @@
-import React, { useEffect, useState } from 'react';
-import { Stack, Button, Box } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { useIndexedDBThumbnail } from '@app/hooks/useIndexedDBThumbnail';
-import { useFileManagerContext } from '@app/contexts/FileManagerContext';
-import FilePreview from '@app/components/shared/FilePreview';
-import FileInfoCard from '@app/components/fileManager/FileInfoCard';
-import CompactFileDetails from '@app/components/fileManager/CompactFileDetails';
+import React, { useEffect, useState } from "react";
+import { Stack, Button, Box } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { useIndexedDBThumbnail } from "@app/hooks/useIndexedDBThumbnail";
+import { useFileManagerContext } from "@app/contexts/FileManagerContext";
+import FilePreview from "@app/components/shared/FilePreview";
+import FileInfoCard from "@app/components/fileManager/FileInfoCard";
+import CompactFileDetails from "@app/components/fileManager/CompactFileDetails";
 
 interface FileDetailsProps {
   compact?: boolean;
 }
 
-const FileDetails: React.FC<FileDetailsProps> = ({
-  compact = false
-}) => {
+const FileDetails: React.FC<FileDetailsProps> = ({ compact = false }) => {
   const { selectedFiles, onOpenFiles, modalHeight } = useFileManagerContext();
   const { t } = useTranslation();
   const [currentFileIndex, setCurrentFileIndex] = useState(0);
@@ -35,7 +33,7 @@ const FileDetails: React.FC<FileDetailsProps> = ({
     if (isAnimating) return;
     setIsAnimating(true);
     setTimeout(() => {
-      setCurrentFileIndex(prev => prev > 0 ? prev - 1 : selectedFiles.length - 1);
+      setCurrentFileIndex((prev) => (prev > 0 ? prev - 1 : selectedFiles.length - 1));
       setIsAnimating(false);
     }, 150);
   };
@@ -44,7 +42,7 @@ const FileDetails: React.FC<FileDetailsProps> = ({
     if (isAnimating) return;
     setIsAnimating(true);
     setTimeout(() => {
-      setCurrentFileIndex(prev => prev < selectedFiles.length - 1 ? prev + 1 : 0);
+      setCurrentFileIndex((prev) => (prev < selectedFiles.length - 1 ? prev + 1 : 0));
       setIsAnimating(false);
     }, 150);
   };
@@ -75,7 +73,7 @@ const FileDetails: React.FC<FileDetailsProps> = ({
   return (
     <Stack gap="lg" h={`calc(${modalHeight} - 2rem)`} justify="flex-start">
       {/* Section 1: Thumbnail Preview */}
-      <Box style={{ width: '100%', height: 'min(35vh, 280px)', textAlign: 'center', flexShrink: 0 }}>
+      <Box style={{ width: "100%", height: "min(35vh, 280px)", textAlign: "center", flexShrink: 0 }}>
         <FilePreview
           file={currentFile}
           thumbnail={getCurrentThumbnail()}
@@ -89,10 +87,7 @@ const FileDetails: React.FC<FileDetailsProps> = ({
       </Box>
 
       {/* Section 2: File Details */}
-      <FileInfoCard
-        currentFile={currentFile}
-        modalHeight={modalHeight}
-      />
+      <FileInfoCard currentFile={currentFile} modalHeight={modalHeight} />
 
       <Button
         size="md"
@@ -100,14 +95,13 @@ const FileDetails: React.FC<FileDetailsProps> = ({
         disabled={!hasSelection}
         fullWidth
         style={{
-          backgroundColor: hasSelection ? 'var(--btn-open-file)' : 'var(--mantine-color-gray-4)',
-          color: 'white'
+          backgroundColor: hasSelection ? "var(--btn-open-file)" : "var(--mantine-color-gray-4)",
+          color: "white",
         }}
       >
         {selectedFiles.length > 1
-          ? t('fileManager.openFiles', `Open ${selectedFiles.length} Files`)
-          : t('fileManager.openFile', 'Open File')
-        }
+          ? t("fileManager.openFiles", `Open ${selectedFiles.length} Files`)
+          : t("fileManager.openFile", "Open File")}
       </Button>
     </Stack>
   );
diff --git a/frontend/src/core/components/fileManager/FileHistoryGroup.tsx b/frontend/src/core/components/fileManager/FileHistoryGroup.tsx
index 75d8f0e50d..58edbc46cc 100644
--- a/frontend/src/core/components/fileManager/FileHistoryGroup.tsx
+++ b/frontend/src/core/components/fileManager/FileHistoryGroup.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import { Box, Text, Collapse, Group } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { StirlingFileStub } from '@app/types/fileContext';
-import FileListItem from '@app/components/fileManager/FileListItem';
+import React from "react";
+import { Box, Text, Collapse, Group } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { StirlingFileStub } from "@app/types/fileContext";
+import FileListItem from "@app/components/fileManager/FileListItem";
 
 interface FileHistoryGroupProps {
   leafFile: StirlingFileStub;
@@ -27,7 +27,7 @@ const FileHistoryGroup: React.FC<FileHistoryGroupProps> = ({
 
   // Sort history files by version number (oldest first, excluding the current leaf file)
   const sortedHistory = historyFiles
-    .filter(file => file.id !== leafFile.id) // Exclude the leaf file itself
+    .filter((file) => file.id !== leafFile.id) // Exclude the leaf file itself
     .sort((a, b) => (b.versionNumber || 1) - (a.versionNumber || 1));
 
   if (!isExpanded || sortedHistory.length === 0) {
@@ -39,7 +39,7 @@ const FileHistoryGroup: React.FC<FileHistoryGroupProps> = ({
       <Box ml="md" mt="xs" mb="sm">
         <Group align="center" mb="sm">
           <Text size="xs" fw={600} c="dimmed">
-            {t('fileManager.fileHistory', 'File History')} ({sortedHistory.length})
+            {t("fileManager.fileHistory", "File History")} ({sortedHistory.length})
           </Text>
         </Group>
 
diff --git a/frontend/src/core/components/fileManager/FileInfoCard.tsx b/frontend/src/core/components/fileManager/FileInfoCard.tsx
index 182fcded9d..1c47c71bd2 100644
--- a/frontend/src/core/components/fileManager/FileInfoCard.tsx
+++ b/frontend/src/core/components/fileManager/FileInfoCard.tsx
@@ -1,23 +1,20 @@
-import React, { useMemo, useState } from 'react';
-import { Stack, Card, Box, Text, Badge, Group, Divider, ScrollArea, Button } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { detectFileExtension, getFileSize } from '@app/utils/fileUtils';
-import { StirlingFileStub } from '@app/types/fileContext';
-import ToolChain from '@app/components/shared/ToolChain';
-import { PrivateContent } from '@app/components/shared/PrivateContent';
-import { useFileManagerContext } from '@app/contexts/FileManagerContext';
-import ShareManagementModal from '@app/components/shared/ShareManagementModal';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
+import React, { useMemo, useState } from "react";
+import { Stack, Card, Box, Text, Badge, Group, Divider, ScrollArea, Button } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { detectFileExtension, getFileSize } from "@app/utils/fileUtils";
+import { StirlingFileStub } from "@app/types/fileContext";
+import ToolChain from "@app/components/shared/ToolChain";
+import { PrivateContent } from "@app/components/shared/PrivateContent";
+import { useFileManagerContext } from "@app/contexts/FileManagerContext";
+import ShareManagementModal from "@app/components/shared/ShareManagementModal";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
 
 interface FileInfoCardProps {
   currentFile: StirlingFileStub | null;
   modalHeight: string;
 }
 
-const FileInfoCard: React.FC<FileInfoCardProps> = ({
-  currentFile,
-  modalHeight
-}) => {
+const FileInfoCard: React.FC<FileInfoCardProps> = ({ currentFile, modalHeight }) => {
   const { t } = useTranslation();
   const { config } = useAppConfig();
   const { onMakeCopy } = useFileManagerContext();
@@ -43,38 +40,53 @@ const FileInfoCard: React.FC<FileInfoCardProps> = ({
   const uploadEnabled = config?.storageEnabled === true;
   const sharingEnabled = uploadEnabled && config?.storageSharingEnabled === true;
   const ownerLabel = useMemo(() => {
-    if (!currentFile) return '';
+    if (!currentFile) return "";
     if (currentFile.remoteOwnerUsername) {
       return currentFile.remoteOwnerUsername;
     }
-    return t('fileManager.ownerUnknown', 'Unknown');
+    return t("fileManager.ownerUnknown", "Unknown");
   }, [currentFile, t]);
   const lastSyncedLabel = useMemo(() => {
-    if (!currentFile?.remoteStorageUpdatedAt) return '';
+    if (!currentFile?.remoteStorageUpdatedAt) return "";
     return new Date(currentFile.remoteStorageUpdatedAt).toLocaleString();
   }, [currentFile?.remoteStorageUpdatedAt]);
 
   return (
-    <Card withBorder p={0} mah={`calc(${modalHeight} * 0.45)`} style={{ overflow: 'hidden', flexShrink: 1, display: 'flex', flexDirection: 'column' }}>
-      <Box bg="gray.4" p="sm" style={{ borderTopLeftRadius: 'var(--mantine-radius-md)', borderTopRightRadius: 'var(--mantine-radius-md)', flexShrink: 0 }}>
+    <Card
+      withBorder
+      p={0}
+      mah={`calc(${modalHeight} * 0.45)`}
+      style={{ overflow: "hidden", flexShrink: 1, display: "flex", flexDirection: "column" }}
+    >
+      <Box
+        bg="gray.4"
+        p="sm"
+        style={{
+          borderTopLeftRadius: "var(--mantine-radius-md)",
+          borderTopRightRadius: "var(--mantine-radius-md)",
+          flexShrink: 0,
+        }}
+      >
         <Text size="sm" fw={500} ta="center" c="white">
-          {t('fileManager.details', 'File Details')}
+          {t("fileManager.details", "File Details")}
         </Text>
       </Box>
       <ScrollArea style={{ flex: 1, minHeight: 0 }} p="md">
         <Stack gap="sm">
           <Group justify="space-between" py="xs">
             <Text size="sm" c="dimmed">
-              <PrivateContent>{t('fileManager.fileName', 'Name')}</PrivateContent>
+              <PrivateContent>{t("fileManager.fileName", "Name")}</PrivateContent>
             </Text>
-            <Text size="sm" fw={500} style={{ maxWidth: '60%', textAlign: 'right' }} truncate>
-              {currentFile ? currentFile.name : ''}
+            <Text size="sm" fw={500} style={{ maxWidth: "60%", textAlign: "right" }} truncate>
+              {currentFile ? currentFile.name : ""}
             </Text>
           </Group>
           <Divider />
 
           <Group justify="space-between" py="xs">
-            <Text size="sm" c="dimmed">{t('fileManager.fileFormat', 'Format')}</Text>
+            <Text size="sm" c="dimmed">
+              {t("fileManager.fileFormat", "Format")}
+            </Text>
             {currentFile ? (
               <Badge size="sm" variant="light">
                 {detectFileExtension(currentFile.name).toUpperCase()}
@@ -86,38 +98,48 @@ const FileInfoCard: React.FC<FileInfoCardProps> = ({
           <Divider />
 
           <Group justify="space-between" py="xs">
-            <Text size="sm" c="dimmed">{t('fileManager.fileSize', 'Size')}</Text>
+            <Text size="sm" c="dimmed">
+              {t("fileManager.fileSize", "Size")}
+            </Text>
             <Text size="sm" fw={500}>
-              {currentFile ? getFileSize(currentFile) : ''}
+              {currentFile ? getFileSize(currentFile) : ""}
             </Text>
           </Group>
           <Divider />
 
           <Group justify="space-between" py="xs">
-            <Text size="sm" c="dimmed">{t('fileManager.lastModified', 'Last modified')}</Text>
+            <Text size="sm" c="dimmed">
+              {t("fileManager.lastModified", "Last modified")}
+            </Text>
             <Text size="sm" fw={500}>
-              {currentFile ? new Date(currentFile.lastModified).toLocaleDateString() : ''}
+              {currentFile ? new Date(currentFile.lastModified).toLocaleDateString() : ""}
             </Text>
           </Group>
           <Divider />
 
           <Group justify="space-between" py="xs">
-            <Text size="sm" c="dimmed">{t('fileManager.fileVersion', 'Version')}</Text>
-            {currentFile &&
-              <Badge size="sm" variant="light" color={currentFile?.versionNumber ? 'blue' : 'gray'}>
-                v{currentFile ? (currentFile.versionNumber || 1) : ''}
-              </Badge>}
-
+            <Text size="sm" c="dimmed">
+              {t("fileManager.fileVersion", "Version")}
+            </Text>
+            {currentFile && (
+              <Badge size="sm" variant="light" color={currentFile?.versionNumber ? "blue" : "gray"}>
+                v{currentFile ? currentFile.versionNumber || 1 : ""}
+              </Badge>
+            )}
           </Group>
           {sharingEnabled && isSharedWithYou && (
             <>
               <Divider />
               <Group justify="space-between" py="xs">
-                <Text size="sm" c="dimmed">{t('fileManager.owner', 'Owner')}</Text>
+                <Text size="sm" c="dimmed">
+                  {t("fileManager.owner", "Owner")}
+                </Text>
                 <Group gap="xs">
-                  <Text size="sm" fw={500}>{ownerLabel}</Text>
+                  <Text size="sm" fw={500}>
+                    {ownerLabel}
+                  </Text>
                   <Badge size="xs" variant="light" color="grape">
-                    {t('fileManager.sharedWithYou', 'Shared with you')}
+                    {t("fileManager.sharedWithYou", "Shared with you")}
                   </Badge>
                 </Group>
               </Group>
@@ -129,12 +151,10 @@ const FileInfoCard: React.FC<FileInfoCardProps> = ({
             <>
               <Divider />
               <Box py="xs">
-                <Text size="xs" c="dimmed" mb="xs">{t('fileManager.toolChain', 'Tools Applied')}</Text>
-                <ToolChain
-                  toolChain={currentFile.toolHistory}
-                  displayStyle="badges"
-                  size="xs"
-                />
+                <Text size="xs" c="dimmed" mb="xs">
+                  {t("fileManager.toolChain", "Tools Applied")}
+                </Text>
+                <ToolChain toolChain={currentFile.toolHistory} displayStyle="badges" size="xs" />
               </Box>
             </>
           )}
@@ -142,13 +162,8 @@ const FileInfoCard: React.FC<FileInfoCardProps> = ({
           {currentFile && isSharedWithYou && (
             <>
               <Divider />
-              <Button
-                size="sm"
-                variant="light"
-                onClick={() => onMakeCopy(currentFile)}
-                fullWidth
-              >
-                {t('fileManager.makeCopy', 'Make a copy')}
+              <Button size="sm" variant="light" onClick={() => onMakeCopy(currentFile)} fullWidth>
+                {t("fileManager.makeCopy", "Make a copy")}
               </Button>
             </>
           )}
@@ -157,39 +172,42 @@ const FileInfoCard: React.FC<FileInfoCardProps> = ({
             <>
               <Divider />
               <Group justify="space-between" py="xs">
-                <Text size="sm" c="dimmed">{t('fileManager.cloudFile', 'Cloud file')}</Text>
+                <Text size="sm" c="dimmed">
+                  {t("fileManager.cloudFile", "Cloud file")}
+                </Text>
                 {uploadEnabled && isOutOfSync ? (
                   <Badge size="xs" variant="light" color="yellow">
-                    {t('fileManager.changesNotUploaded', 'Changes not uploaded')}
+                    {t("fileManager.changesNotUploaded", "Changes not uploaded")}
                   </Badge>
                 ) : uploadEnabled ? (
                   <Badge size="xs" variant="light" color="teal">
-                    {t('fileManager.synced', 'Synced')}
+                    {t("fileManager.synced", "Synced")}
                   </Badge>
                 ) : null}
               </Group>
               {lastSyncedLabel && (
                 <Group justify="space-between" py="xs">
-                  <Text size="sm" c="dimmed">{t('fileManager.lastSynced', 'Last synced')}</Text>
-                  <Text size="sm" fw={500}>{lastSyncedLabel}</Text>
+                  <Text size="sm" c="dimmed">
+                    {t("fileManager.lastSynced", "Last synced")}
+                  </Text>
+                  <Text size="sm" fw={500}>
+                    {lastSyncedLabel}
+                  </Text>
                 </Group>
               )}
               {isSharedByYou && sharingEnabled && (
                 <>
                   <Divider />
                   <Group justify="space-between" py="xs">
-                    <Text size="sm" c="dimmed">{t('fileManager.sharing', 'Sharing')}</Text>
+                    <Text size="sm" c="dimmed">
+                      {t("fileManager.sharing", "Sharing")}
+                    </Text>
                     <Badge size="xs" variant="light" color="blue">
-                      {t('fileManager.sharedByYou', 'Shared by you')}
+                      {t("fileManager.sharedByYou", "Shared by you")}
                     </Badge>
                   </Group>
-                  <Button
-                    size="sm"
-                    variant="light"
-                    onClick={() => setShowShareManageModal(true)}
-                    fullWidth
-                  >
-                    {t('storageShare.manage', 'Manage sharing')}
+                  <Button size="sm" variant="light" onClick={() => setShowShareManageModal(true)} fullWidth>
+                    {t("storageShare.manage", "Manage sharing")}
                   </Button>
                 </>
               )}
@@ -199,9 +217,11 @@ const FileInfoCard: React.FC<FileInfoCardProps> = ({
             <>
               <Divider />
               <Group justify="space-between" py="xs">
-                <Text size="sm" c="dimmed">{t('fileManager.storageState', 'Storage')}</Text>
+                <Text size="sm" c="dimmed">
+                  {t("fileManager.storageState", "Storage")}
+                </Text>
                 <Badge size="xs" variant="light" color="gray">
-                  {t('fileManager.localOnly', 'Local only')}
+                  {t("fileManager.localOnly", "Local only")}
                 </Badge>
               </Group>
             </>
diff --git a/frontend/src/core/components/fileManager/FileListArea.tsx b/frontend/src/core/components/fileManager/FileListArea.tsx
index 1964dad542..b088a55d53 100644
--- a/frontend/src/core/components/fileManager/FileListArea.tsx
+++ b/frontend/src/core/components/fileManager/FileListArea.tsx
@@ -1,21 +1,18 @@
-import React from 'react';
-import { Center, ScrollArea, Text, Stack } from '@mantine/core';
-import CloudIcon from '@mui/icons-material/Cloud';
-import { useTranslation } from 'react-i18next';
-import FileListItem from '@app/components/fileManager/FileListItem';
-import FileHistoryGroup from '@app/components/fileManager/FileHistoryGroup';
-import EmptyFilesState from '@app/components/fileManager/EmptyFilesState';
-import { useFileManagerContext } from '@app/contexts/FileManagerContext';
+import React from "react";
+import { Center, ScrollArea, Text, Stack } from "@mantine/core";
+import CloudIcon from "@mui/icons-material/Cloud";
+import { useTranslation } from "react-i18next";
+import FileListItem from "@app/components/fileManager/FileListItem";
+import FileHistoryGroup from "@app/components/fileManager/FileHistoryGroup";
+import EmptyFilesState from "@app/components/fileManager/EmptyFilesState";
+import { useFileManagerContext } from "@app/contexts/FileManagerContext";
 
 interface FileListAreaProps {
   scrollAreaHeight: string;
   scrollAreaStyle?: React.CSSProperties;
 }
 
-const FileListArea: React.FC<FileListAreaProps> = ({
-  scrollAreaHeight,
-  scrollAreaStyle = {},
-}) => {
+const FileListArea: React.FC<FileListAreaProps> = ({ scrollAreaHeight, scrollAreaStyle = {} }) => {
   const {
     activeSource,
     recentFiles,
@@ -34,12 +31,12 @@ const FileListArea: React.FC<FileListAreaProps> = ({
   } = useFileManagerContext();
   const { t } = useTranslation();
 
-  if (activeSource === 'recent') {
+  if (activeSource === "recent") {
     return (
       <ScrollArea
         h={scrollAreaHeight}
         style={{
-          ...scrollAreaStyle
+          ...scrollAreaStyle,
         }}
         type="always"
         scrollbarSize={8}
@@ -48,8 +45,10 @@ const FileListArea: React.FC<FileListAreaProps> = ({
           {recentFiles.length === 0 && !isLoading ? (
             <EmptyFilesState />
           ) : recentFiles.length === 0 && isLoading ? (
-            <Center style={{ height: '12.5rem' }}>
-              <Text c="dimmed" ta="center">{t('fileManager.loadingFiles', 'Loading files...')}</Text>
+            <Center style={{ height: "12.5rem" }}>
+              <Text c="dimmed" ta="center">
+                {t("fileManager.loadingFiles", "Loading files...")}
+              </Text>
             </Center>
           ) : (
             filteredFiles.map((file, index) => {
@@ -93,10 +92,12 @@ const FileListArea: React.FC<FileListAreaProps> = ({
 
   // Google Drive placeholder
   return (
-    <Center style={{ height: '12.5rem' }}>
+    <Center style={{ height: "12.5rem" }}>
       <Stack align="center" gap="sm">
-        <CloudIcon style={{ fontSize: '3rem', color: 'var(--mantine-color-gray-5)' }} />
-        <Text c="dimmed" ta="center">{t('fileManager.googleDriveNotAvailable', 'Google Drive integration coming soon')}</Text>
+        <CloudIcon style={{ fontSize: "3rem", color: "var(--mantine-color-gray-5)" }} />
+        <Text c="dimmed" ta="center">
+          {t("fileManager.googleDriveNotAvailable", "Google Drive integration coming soon")}
+        </Text>
       </Stack>
     </Center>
   );
diff --git a/frontend/src/core/components/fileManager/FileListItem.tsx b/frontend/src/core/components/fileManager/FileListItem.tsx
index 73ae8bd2a2..02c3c07f7d 100644
--- a/frontend/src/core/components/fileManager/FileListItem.tsx
+++ b/frontend/src/core/components/fileManager/FileListItem.tsx
@@ -1,31 +1,31 @@
-import React, { useCallback, useMemo, useState } from 'react';
-import { Group, Box, Text, ActionIcon, Checkbox, Divider, Menu, Badge } from '@mantine/core';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
-import DeleteIcon from '@mui/icons-material/Delete';
-import DownloadIcon from '@mui/icons-material/Download';
-import HistoryIcon from '@mui/icons-material/History';
-import RestoreIcon from '@mui/icons-material/Restore';
-import UnarchiveIcon from '@mui/icons-material/Unarchive';
-import CloseIcon from '@mui/icons-material/Close';
-import CloudUploadIcon from '@mui/icons-material/CloudUpload';
-import CloudDoneIcon from '@mui/icons-material/CloudDone';
-import LinkIcon from '@mui/icons-material/Link';
-import { useTranslation } from 'react-i18next';
-import { getFileSize, getFileDate } from '@app/utils/fileUtils';
-import { FileId, StirlingFileStub } from '@app/types/fileContext';
-import { useFileManagerContext } from '@app/contexts/FileManagerContext';
-import { zipFileService } from '@app/services/zipFileService';
-import ToolChain from '@app/components/shared/ToolChain';
-import { Z_INDEX_OVER_FILE_MANAGER_MODAL } from '@app/styles/zIndex';
-import { PrivateContent } from '@app/components/shared/PrivateContent';
-import { useFileManagement } from '@app/contexts/FileContext';
-import UploadToServerModal from '@app/components/shared/UploadToServerModal';
-import ShareFileModal from '@app/components/shared/ShareFileModal';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
-import ShareManagementModal from '@app/components/shared/ShareManagementModal';
-import apiClient from '@app/services/apiClient';
-import { absoluteWithBasePath } from '@app/constants/app';
-import { alert } from '@app/components/toast';
+import React, { useCallback, useMemo, useState } from "react";
+import { Group, Box, Text, ActionIcon, Checkbox, Divider, Menu, Badge } from "@mantine/core";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import DeleteIcon from "@mui/icons-material/Delete";
+import DownloadIcon from "@mui/icons-material/Download";
+import HistoryIcon from "@mui/icons-material/History";
+import RestoreIcon from "@mui/icons-material/Restore";
+import UnarchiveIcon from "@mui/icons-material/Unarchive";
+import CloseIcon from "@mui/icons-material/Close";
+import CloudUploadIcon from "@mui/icons-material/CloudUpload";
+import CloudDoneIcon from "@mui/icons-material/CloudDone";
+import LinkIcon from "@mui/icons-material/Link";
+import { useTranslation } from "react-i18next";
+import { getFileSize, getFileDate } from "@app/utils/fileUtils";
+import { FileId, StirlingFileStub } from "@app/types/fileContext";
+import { useFileManagerContext } from "@app/contexts/FileManagerContext";
+import { zipFileService } from "@app/services/zipFileService";
+import ToolChain from "@app/components/shared/ToolChain";
+import { Z_INDEX_OVER_FILE_MANAGER_MODAL } from "@app/styles/zIndex";
+import { PrivateContent } from "@app/components/shared/PrivateContent";
+import { useFileManagement } from "@app/contexts/FileContext";
+import UploadToServerModal from "@app/components/shared/UploadToServerModal";
+import ShareFileModal from "@app/components/shared/ShareFileModal";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
+import ShareManagementModal from "@app/components/shared/ShareManagementModal";
+import apiClient from "@app/services/apiClient";
+import { absoluteWithBasePath } from "@app/constants/app";
+import { alert } from "@app/components/toast";
 
 interface FileListItemProps {
   file: StirlingFileStub;
@@ -51,7 +51,7 @@ const FileListItem: React.FC<FileListItemProps> = ({
   onDoubleClick,
   isHistoryFile = false,
   isLatestVersion = false,
-  isActive = false
+  isActive = false,
 }) => {
   const [isHovered, setIsHovered] = useState(false);
   const [isMenuOpen, setIsMenuOpen] = useState(false);
@@ -60,22 +60,22 @@ const FileListItem: React.FC<FileListItemProps> = ({
   const [showShareManageModal, setShowShareManageModal] = useState(false);
   const { t } = useTranslation();
   const { config } = useAppConfig();
-  const {expandedFileIds, onToggleExpansion, onUnzipFile, refreshRecentFiles } = useFileManagerContext();
+  const { expandedFileIds, onToggleExpansion, onUnzipFile, refreshRecentFiles } = useFileManagerContext();
   const { removeFiles } = useFileManagement();
 
   // Check if this is a ZIP file
   const isZipFile = zipFileService.isZipFileStub(file);
 
   // Check file extension
-  const extLower = (file.name?.match(/\.([a-z0-9]+)$/i)?.[1] || '').toLowerCase();
-  const isCBZ = extLower === 'cbz';
-  const isCBR = extLower === 'cbr';
+  const extLower = (file.name?.match(/\.([a-z0-9]+)$/i)?.[1] || "").toLowerCase();
+  const isCBZ = extLower === "cbz";
+  const isCBR = extLower === "cbr";
 
   // Keep item in hovered state if menu is open
   const shouldShowHovered = isHovered || isMenuOpen;
 
   // Get version information for this file
-  const leafFileId = (isLatestVersion ? file.id : (file.originalFileId || file.id)) as FileId;
+  const leafFileId = (isLatestVersion ? file.id : file.originalFileId || file.id) as FileId;
   const hasVersionHistory = (file.versionNumber || 1) > 1; // Show history for any processed file (v2+)
   const currentVersion = file.versionNumber || 1; // Display original files as v1
   const isExpanded = expandedFileIds.has(leafFileId);
@@ -83,32 +83,28 @@ const FileListItem: React.FC<FileListItemProps> = ({
   const sharingEnabled = uploadEnabled && config?.storageSharingEnabled === true;
   const shareLinksEnabled = sharingEnabled && config?.storageShareLinksEnabled === true;
   const isOwnedOrLocal = file.remoteOwnedByCurrentUser !== false;
-  const isSharedWithYou =
-    sharingEnabled && (file.remoteOwnedByCurrentUser === false || file.remoteSharedViaLink);
+  const isSharedWithYou = sharingEnabled && (file.remoteOwnedByCurrentUser === false || file.remoteSharedViaLink);
   const localUpdatedAt = file.createdAt ?? file.lastModified ?? 0;
   const remoteUpdatedAt = file.remoteStorageUpdatedAt ?? 0;
   const isUploaded = Boolean(file.remoteStorageId);
   const isUpToDate = isUploaded && remoteUpdatedAt >= localUpdatedAt;
   const isOutOfSync = isUploaded && !isUpToDate && isOwnedOrLocal;
   const isLocalOnly = !file.remoteStorageId && !file.remoteSharedViaLink;
-  const accessRole = (isOwnedOrLocal ? 'editor' : (file.remoteAccessRole ?? 'viewer')).toLowerCase();
-  const hasReadAccess = isOwnedOrLocal || accessRole === 'editor' || accessRole === 'commenter' || accessRole === 'viewer';
+  const accessRole = (isOwnedOrLocal ? "editor" : (file.remoteAccessRole ?? "viewer")).toLowerCase();
+  const hasReadAccess = isOwnedOrLocal || accessRole === "editor" || accessRole === "commenter" || accessRole === "viewer";
   const canUpload = uploadEnabled && isOwnedOrLocal && isLatestVersion && (!isUploaded || !isUpToDate);
   const canShare = shareLinksEnabled && isOwnedOrLocal && isLatestVersion;
   const canManageShare = sharingEnabled && isOwnedOrLocal && Boolean(file.remoteStorageId);
-  const canCopyShareLink =
-    shareLinksEnabled && Boolean(file.remoteHasShareLinks) && Boolean(file.remoteStorageId);
+  const canCopyShareLink = shareLinksEnabled && Boolean(file.remoteHasShareLinks) && Boolean(file.remoteStorageId);
   const canDownloadFile = Boolean(onDownload) && hasReadAccess;
 
   const shareBaseUrl = useMemo(() => {
-    const frontendUrl = (config?.frontendUrl || '').trim();
+    const frontendUrl = (config?.frontendUrl || "").trim();
     if (frontendUrl) {
-      const normalized = frontendUrl.endsWith('/')
-        ? frontendUrl.slice(0, -1)
-        : frontendUrl;
+      const normalized = frontendUrl.endsWith("/") ? frontendUrl.slice(0, -1) : frontendUrl;
       return `${normalized}/share/`;
     }
-    return absoluteWithBasePath('/share/');
+    return absoluteWithBasePath("/share/");
   }, [config?.frontendUrl]);
 
   const handleCopyShareLink = useCallback(async () => {
@@ -116,14 +112,14 @@ const FileListItem: React.FC<FileListItemProps> = ({
     try {
       const response = await apiClient.get<{ shareLinks?: Array<{ token?: string }> }>(
         `/api/v1/storage/files/${file.remoteStorageId}`,
-        { suppressErrorToast: true } as any
+        { suppressErrorToast: true } as any,
       );
       const links = response.data?.shareLinks ?? [];
       const token = links[links.length - 1]?.token;
       if (!token) {
         alert({
-          alertType: 'warning',
-          title: t('storageShare.noLinks', 'No active share links yet.'),
+          alertType: "warning",
+          title: t("storageShare.noLinks", "No active share links yet."),
           expandable: false,
           durationMs: 2500,
         });
@@ -131,16 +127,16 @@ const FileListItem: React.FC<FileListItemProps> = ({
       }
       await navigator.clipboard.writeText(`${shareBaseUrl}${token}`);
       alert({
-        alertType: 'success',
-        title: t('storageShare.copied', 'Link copied to clipboard'),
+        alertType: "success",
+        title: t("storageShare.copied", "Link copied to clipboard"),
         expandable: false,
         durationMs: 2000,
       });
     } catch (error) {
-      console.error('Failed to copy share link:', error);
+      console.error("Failed to copy share link:", error);
       alert({
-        alertType: 'warning',
-        title: t('storageShare.copyFailed', 'Copy failed'),
+        alertType: "warning",
+        title: t("storageShare.copyFailed", "Copy failed"),
         expandable: false,
         durationMs: 2500,
       });
@@ -152,20 +148,22 @@ const FileListItem: React.FC<FileListItemProps> = ({
       <Box
         p="sm"
         style={{
-          cursor: isHistoryFile || isActive ? 'default' : 'pointer',
+          cursor: isHistoryFile || isActive ? "default" : "pointer",
           backgroundColor: isActive
-              ? 'var(--file-active-bg)'
-              : isSelected
-              ? 'var(--mantine-color-gray-1)'
-              : (shouldShowHovered ? 'var(--mantine-color-gray-1)' : 'var(--bg-file-list)'),
+            ? "var(--file-active-bg)"
+            : isSelected
+              ? "var(--mantine-color-gray-1)"
+              : shouldShowHovered
+                ? "var(--mantine-color-gray-1)"
+                : "var(--bg-file-list)",
           opacity: isSupported ? 1 : 0.5,
-          transition: 'background-color 0.15s ease',
-          userSelect: 'none',
-          WebkitUserSelect: 'none',
-          MozUserSelect: 'none',
-          msUserSelect: 'none',
-          paddingLeft: isHistoryFile ? '2rem' : '0.75rem', // Indent history files
-          borderLeft: isHistoryFile ? '3px solid var(--mantine-color-blue-4)' : 'none' // Visual indicator for history
+          transition: "background-color 0.15s ease",
+          userSelect: "none",
+          WebkitUserSelect: "none",
+          MozUserSelect: "none",
+          msUserSelect: "none",
+          paddingLeft: isHistoryFile ? "2rem" : "0.75rem", // Indent history files
+          borderLeft: isHistoryFile ? "3px solid var(--mantine-color-blue-4)" : "none", // Visual indicator for history
         }}
         onClick={isHistoryFile || isActive ? undefined : (e) => onSelect(e.shiftKey)}
         onDoubleClick={onDoubleClick}
@@ -186,8 +184,8 @@ const FileListItem: React.FC<FileListItemProps> = ({
                 color={isActive ? "green" : undefined}
                 styles={{
                   input: {
-                    cursor: isActive ? 'not-allowed' : 'pointer'
-                  }
+                    cursor: isActive ? "not-allowed" : "pointer",
+                  },
                 }}
               />
             </Box>
@@ -203,12 +201,12 @@ const FileListItem: React.FC<FileListItemProps> = ({
                   size="xs"
                   variant="light"
                   style={{
-                    backgroundColor: 'var(--file-active-badge-bg)',
-                    color: 'var(--file-active-badge-fg)',
-                    border: '1px solid var(--file-active-badge-border)'
+                    backgroundColor: "var(--file-active-badge-bg)",
+                    color: "var(--file-active-badge-fg)",
+                    border: "1px solid var(--file-active-badge-border)",
                   }}
                 >
-                  {t('fileManager.active', 'Active')}
+                  {t("fileManager.active", "Active")}
                 </Badge>
               )}
               <Badge size="xs" variant="light" color={"blue"}>
@@ -216,44 +214,33 @@ const FileListItem: React.FC<FileListItemProps> = ({
               </Badge>
               {sharingEnabled && isSharedWithYou ? (
                 <Badge size="xs" variant="light" color="grape">
-                  {t('fileManager.sharedWithYou', 'Shared with you')}
+                  {t("fileManager.sharedWithYou", "Shared with you")}
                 </Badge>
               ) : null}
-              {sharingEnabled && isSharedWithYou && accessRole && accessRole !== 'editor' ? (
+              {sharingEnabled && isSharedWithYou && accessRole && accessRole !== "editor" ? (
                 <Badge size="xs" variant="light" color="gray">
-                  {accessRole === 'commenter'
-                    ? t('storageShare.roleCommenter', 'Commenter')
-                    : t('storageShare.roleViewer', 'Viewer')}
+                  {accessRole === "commenter"
+                    ? t("storageShare.roleCommenter", "Commenter")
+                    : t("storageShare.roleViewer", "Viewer")}
                 </Badge>
               ) : isLocalOnly ? (
                 <Badge size="xs" variant="light" color="gray">
-                  {t('fileManager.localOnly', 'Local only')}
+                  {t("fileManager.localOnly", "Local only")}
                 </Badge>
               ) : uploadEnabled && isOutOfSync ? (
-                <Badge
-                  size="xs"
-                  variant="light"
-                  color="yellow"
-                  leftSection={<CloudUploadIcon style={{ fontSize: 12 }} />}
-                >
-                  {t('fileManager.changesNotUploaded', 'Changes not uploaded')}
+                <Badge size="xs" variant="light" color="yellow" leftSection={<CloudUploadIcon style={{ fontSize: 12 }} />}>
+                  {t("fileManager.changesNotUploaded", "Changes not uploaded")}
                 </Badge>
               ) : uploadEnabled && isUploaded ? (
-                <Badge
-                  size="xs"
-                  variant="light"
-                  color="teal"
-                  leftSection={<CloudDoneIcon style={{ fontSize: 12 }} />}
-                >
-                  {t('fileManager.synced', 'Synced')}
+                <Badge size="xs" variant="light" color="teal" leftSection={<CloudDoneIcon style={{ fontSize: 12 }} />}>
+                  {t("fileManager.synced", "Synced")}
                 </Badge>
               ) : null}
               {sharingEnabled && file.remoteOwnedByCurrentUser !== false && file.remoteHasShareLinks && (
                 <Badge size="xs" variant="light" color="blue">
-                  {t('fileManager.sharedByYou', 'Shared by you')}
+                  {t("fileManager.sharedByYou", "Shared by you")}
                 </Badge>
               )}
-
             </Group>
             <Group gap="xs" align="center">
               <Text size="xs" c="dimmed">
@@ -262,12 +249,7 @@ const FileListItem: React.FC<FileListItemProps> = ({
 
               {/* Tool chain for processed files */}
               {file.toolHistory && file.toolHistory.length > 0 && (
-                <ToolChain
-                  toolChain={file.toolHistory}
-                  maxWidth={'150px'}
-                  displayStyle="text"
-                  size="xs"
-                />
+                <ToolChain toolChain={file.toolHistory} maxWidth={"150px"} displayStyle="text" size="xs" />
               )}
             </Group>
           </Box>
@@ -288,9 +270,9 @@ const FileListItem: React.FC<FileListItemProps> = ({
                 onClick={(e) => e.stopPropagation()}
                 style={{
                   opacity: shouldShowHovered ? 1 : 0,
-                  transform: shouldShowHovered ? 'scale(1)' : 'scale(0.8)',
-                  transition: 'opacity 0.3s ease, transform 0.3s ease',
-                  pointerEvents: shouldShowHovered ? 'auto' : 'none'
+                  transform: shouldShowHovered ? "scale(1)" : "scale(0.8)",
+                  transition: "opacity 0.3s ease, transform 0.3s ease",
+                  pointerEvents: shouldShowHovered ? "auto" : "none",
                 }}
               >
                 <MoreVertIcon style={{ fontSize: 20 }} />
@@ -308,7 +290,7 @@ const FileListItem: React.FC<FileListItemProps> = ({
                       removeFiles([file.id]);
                     }}
                   >
-                    {t('fileManager.closeFile', 'Close File')}
+                    {t("fileManager.closeFile", "Close File")}
                   </Menu.Item>
                   <Menu.Divider />
                 </>
@@ -322,7 +304,7 @@ const FileListItem: React.FC<FileListItemProps> = ({
                     onDownload?.();
                   }}
                 >
-                  {t('fileManager.download', 'Download')}
+                  {t("fileManager.download", "Download")}
                 </Menu.Item>
               )}
 
@@ -335,8 +317,8 @@ const FileListItem: React.FC<FileListItemProps> = ({
                   }}
                 >
                   {isUploaded
-                    ? t('fileManager.updateOnServer', 'Update on Server')
-                    : t('fileManager.uploadToServer', 'Upload to Server')}
+                    ? t("fileManager.updateOnServer", "Update on Server")
+                    : t("fileManager.uploadToServer", "Upload to Server")}
                 </Menu.Item>
               )}
 
@@ -348,7 +330,7 @@ const FileListItem: React.FC<FileListItemProps> = ({
                     setShowShareModal(true);
                   }}
                 >
-                  {t('fileManager.share', 'Share')}
+                  {t("fileManager.share", "Share")}
                 </Menu.Item>
               )}
 
@@ -360,7 +342,7 @@ const FileListItem: React.FC<FileListItemProps> = ({
                     void handleCopyShareLink();
                   }}
                 >
-                  {t('storageShare.copyLink', 'Copy share link')}
+                  {t("storageShare.copyLink", "Copy share link")}
                 </Menu.Item>
               )}
 
@@ -372,7 +354,7 @@ const FileListItem: React.FC<FileListItemProps> = ({
                     setShowShareManageModal(true);
                   }}
                 >
-                  {t('storageShare.manage', 'Manage sharing')}
+                  {t("storageShare.manage", "Manage sharing")}
                 </Menu.Item>
               )}
 
@@ -380,20 +362,13 @@ const FileListItem: React.FC<FileListItemProps> = ({
               {isLatestVersion && hasVersionHistory && (
                 <>
                   <Menu.Item
-                    leftSection={
-                        <HistoryIcon style={{ fontSize: 16 }} />
-                    }
+                    leftSection={<HistoryIcon style={{ fontSize: 16 }} />}
                     onClick={(e) => {
                       e.stopPropagation();
                       onToggleExpansion(leafFileId);
                     }}
                   >
-                    {
-                      (isExpanded ?
-                        t('fileManager.hideHistory', 'Hide History') :
-                        t('fileManager.showHistory', 'Show History')
-                      )
-                    }
+                    {isExpanded ? t("fileManager.hideHistory", "Hide History") : t("fileManager.showHistory", "Show History")}
                   </Menu.Item>
                   <Menu.Divider />
                 </>
@@ -408,7 +383,7 @@ const FileListItem: React.FC<FileListItemProps> = ({
                       e.stopPropagation();
                     }}
                   >
-                    {t('fileManager.restore', 'Restore')}
+                    {t("fileManager.restore", "Restore")}
                   </Menu.Item>
                   <Menu.Divider />
                 </>
@@ -424,7 +399,7 @@ const FileListItem: React.FC<FileListItemProps> = ({
                       onUnzipFile(file);
                     }}
                   >
-                    {t('fileManager.unzip', 'Unzip')}
+                    {t("fileManager.unzip", "Unzip")}
                   </Menu.Item>
                   <Menu.Divider />
                 </>
@@ -437,14 +412,13 @@ const FileListItem: React.FC<FileListItemProps> = ({
                   onRemove();
                 }}
               >
-                {t('fileManager.delete', 'Delete')}
+                {t("fileManager.delete", "Delete")}
               </Menu.Item>
-
             </Menu.Dropdown>
           </Menu>
         </Group>
       </Box>
-      { <Divider color="var(--mantine-color-gray-3)" />}
+      {<Divider color="var(--mantine-color-gray-3)" />}
       {canUpload && (
         <UploadToServerModal
           opened={showUploadModal}
@@ -462,11 +436,7 @@ const FileListItem: React.FC<FileListItemProps> = ({
         />
       )}
       {canManageShare && (
-        <ShareManagementModal
-          opened={showShareManageModal}
-          onClose={() => setShowShareManageModal(false)}
-          file={file}
-        />
+        <ShareManagementModal opened={showShareManageModal} onClose={() => setShowShareManageModal(false)} file={file} />
       )}
     </>
   );
diff --git a/frontend/src/core/components/fileManager/FileSourceButtons.tsx b/frontend/src/core/components/fileManager/FileSourceButtons.tsx
index 8695821efd..51076ee954 100644
--- a/frontend/src/core/components/fileManager/FileSourceButtons.tsx
+++ b/frontend/src/core/components/fileManager/FileSourceButtons.tsx
@@ -1,15 +1,15 @@
-import React, { useState } from 'react';
-import { Stack, Text, Button, Group } from '@mantine/core';
-import HistoryIcon from '@mui/icons-material/History';
-import PhonelinkIcon from '@mui/icons-material/Phonelink';
-import { useTranslation } from 'react-i18next';
-import { useFileManagerContext } from '@app/contexts/FileManagerContext';
-import { useGoogleDrivePicker } from '@app/hooks/useGoogleDrivePicker';
-import { useFileActionTerminology } from '@app/hooks/useFileActionTerminology';
-import { useFileActionIcons } from '@app/hooks/useFileActionIcons';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
-import { useIsMobile } from '@app/hooks/useIsMobile';
-import MobileUploadModal from '@app/components/shared/MobileUploadModal';
+import React, { useState } from "react";
+import { Stack, Text, Button, Group } from "@mantine/core";
+import HistoryIcon from "@mui/icons-material/History";
+import PhonelinkIcon from "@mui/icons-material/Phonelink";
+import { useTranslation } from "react-i18next";
+import { useFileManagerContext } from "@app/contexts/FileManagerContext";
+import { useGoogleDrivePicker } from "@app/hooks/useGoogleDrivePicker";
+import { useFileActionTerminology } from "@app/hooks/useFileActionTerminology";
+import { useFileActionIcons } from "@app/hooks/useFileActionIcons";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
+import { useIsMobile } from "@app/hooks/useIsMobile";
+import MobileUploadModal from "@app/components/shared/MobileUploadModal";
 
 interface FileSourceButtonsProps {
   horizontal?: boolean;
@@ -24,17 +24,15 @@ const GoogleDriveIcon: React.FC<{ disabled?: boolean }> = ({ disabled }) => (
     src="/images/google-drive.svg"
     alt="Google Drive"
     style={{
-      width: '20px',
-      height: '20px',
+      width: "20px",
+      height: "20px",
       opacity: disabled ? 0.5 : 1,
-      filter: disabled ? 'grayscale(100%)' : 'none',
+      filter: disabled ? "grayscale(100%)" : "none",
     }}
   />
 );
 
-const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({
-  horizontal = false
-}) => {
+const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({ horizontal = false }) => {
   const { activeSource, onSourceChange, onLocalFileClick, onGoogleDriveSelect, onNewFilesSelect } = useFileManagerContext();
   const { t } = useTranslation();
   const { isEnabled: isGoogleDriveEnabled, openPicker: openGoogleDrivePicker } = useGoogleDrivePicker();
@@ -53,7 +51,7 @@ const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({
         onGoogleDriveSelect(files);
       }
     } catch (error) {
-      console.error('Failed to pick files from Google Drive:', error);
+      console.error("Failed to pick files from Google Drive:", error);
     }
   };
 
@@ -74,18 +72,18 @@ const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({
   const shouldHideMobileQR = !isMobileUploadEnabled && config?.hideDisabledToolsMobileQRScanner;
 
   const buttonProps = {
-    variant: (source: string) => activeSource === source ? 'filled' : 'subtle',
-    getColor: (source: string) => activeSource === source ? 'var(--mantine-color-gray-2)' : undefined,
+    variant: (source: string) => (activeSource === source ? "filled" : "subtle"),
+    getColor: (source: string) => (activeSource === source ? "var(--mantine-color-gray-2)" : undefined),
     getStyles: (source: string) => ({
       root: {
-        backgroundColor: activeSource === source ? undefined : 'transparent',
-        color: activeSource === source ? 'var(--mantine-color-gray-9)' : 'var(--mantine-color-gray-6)',
-        border: 'none',
-        '&:hover': {
-          backgroundColor: activeSource === source ? undefined : 'var(--mantine-color-gray-0)'
-        }
-      }
-    })
+        backgroundColor: activeSource === source ? undefined : "transparent",
+        color: activeSource === source ? "var(--mantine-color-gray-9)" : "var(--mantine-color-gray-6)",
+        border: "none",
+        "&:hover": {
+          backgroundColor: activeSource === source ? undefined : "var(--mantine-color-gray-0)",
+        },
+      },
+    }),
   };
 
   const buttons = (
@@ -93,18 +91,18 @@ const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({
       <Button
         leftSection={<HistoryIcon />}
         justify={horizontal ? "center" : "flex-start"}
-        onClick={() => onSourceChange('recent')}
+        onClick={() => onSourceChange("recent")}
         fullWidth={!horizontal}
         size={horizontal ? "xs" : "sm"}
-        color={buttonProps.getColor('recent')}
-        styles={buttonProps.getStyles('recent')}
+        color={buttonProps.getColor("recent")}
+        styles={buttonProps.getStyles("recent")}
       >
-        {horizontal ? t('fileManager.recent', 'Recent') : t('fileManager.recent', 'Recent')}
+        {horizontal ? t("fileManager.recent", "Recent") : t("fileManager.recent", "Recent")}
       </Button>
 
       <Button
         variant="subtle"
-        color='var(--mantine-color-gray-6)'
+        color="var(--mantine-color-gray-6)"
         leftSection={<UploadIcon />}
         justify={horizontal ? "center" : "flex-start"}
         onClick={onLocalFileClick}
@@ -112,12 +110,12 @@ const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({
         size={horizontal ? "xs" : "sm"}
         styles={{
           root: {
-            backgroundColor: 'transparent',
-            border: 'none',
-            '&:hover': {
-              backgroundColor: 'var(--mantine-color-gray-0)'
-            }
-          }
+            backgroundColor: "transparent",
+            border: "none",
+            "&:hover": {
+              backgroundColor: "var(--mantine-color-gray-0)",
+            },
+          },
         }}
       >
         {horizontal ? terminology.upload : terminology.uploadFiles}
@@ -126,7 +124,7 @@ const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({
       {!shouldHideGoogleDrive && (
         <Button
           variant="subtle"
-          color='var(--mantine-color-gray-6)'
+          color="var(--mantine-color-gray-6)"
           leftSection={<GoogleDriveIcon disabled={!isGoogleDriveEnabled} />}
           justify={horizontal ? "center" : "flex-start"}
           onClick={handleGoogleDriveClick}
@@ -135,23 +133,27 @@ const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({
           disabled={!isGoogleDriveEnabled}
           styles={{
             root: {
-              backgroundColor: 'transparent',
-              border: 'none',
-              '&:hover': {
-                backgroundColor: isGoogleDriveEnabled ? 'var(--mantine-color-gray-0)' : 'transparent'
-              }
-            }
+              backgroundColor: "transparent",
+              border: "none",
+              "&:hover": {
+                backgroundColor: isGoogleDriveEnabled ? "var(--mantine-color-gray-0)" : "transparent",
+              },
+            },
           }}
-          title={!isGoogleDriveEnabled ? t('fileManager.googleDriveNotAvailable', 'Google Drive integration not available') : undefined}
+          title={
+            !isGoogleDriveEnabled
+              ? t("fileManager.googleDriveNotAvailable", "Google Drive integration not available")
+              : undefined
+          }
         >
-          {horizontal ? t('fileManager.googleDriveShort', 'Drive') : t('fileManager.googleDrive', 'Google Drive')}
+          {horizontal ? t("fileManager.googleDriveShort", "Drive") : t("fileManager.googleDrive", "Google Drive")}
         </Button>
       )}
 
       {!shouldHideMobileQR && (
         <Button
           variant="subtle"
-          color='var(--mantine-color-gray-6)'
+          color="var(--mantine-color-gray-6)"
           leftSection={<PhonelinkIcon />}
           justify={horizontal ? "center" : "flex-start"}
           onClick={handleMobileUploadClick}
@@ -160,16 +162,16 @@ const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({
           disabled={!isMobileUploadEnabled}
           styles={{
             root: {
-              backgroundColor: 'transparent',
-              border: 'none',
-              '&:hover': {
-                backgroundColor: isMobileUploadEnabled ? 'var(--mantine-color-gray-0)' : 'transparent'
-              }
-            }
+              backgroundColor: "transparent",
+              border: "none",
+              "&:hover": {
+                backgroundColor: isMobileUploadEnabled ? "var(--mantine-color-gray-0)" : "transparent",
+              },
+            },
           }}
-          title={!isMobileUploadEnabled ? t('fileManager.mobileUploadNotAvailable', 'Mobile upload not available') : undefined}
+          title={!isMobileUploadEnabled ? t("fileManager.mobileUploadNotAvailable", "Mobile upload not available") : undefined}
         >
-          {horizontal ? t('fileManager.mobileShort', 'Mobile') : t('fileManager.mobileUpload', 'Mobile Upload')}
+          {horizontal ? t("fileManager.mobileShort", "Mobile") : t("fileManager.mobileUpload", "Mobile Upload")}
         </Button>
       )}
     </>
@@ -178,7 +180,7 @@ const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({
   if (horizontal) {
     return (
       <>
-        <Group gap="xs" justify="center" style={{ width: '100%' }}>
+        <Group gap="xs" justify="center" style={{ width: "100%" }}>
           {buttons}
         </Group>
         <MobileUploadModal
@@ -192,9 +194,9 @@ const FileSourceButtons: React.FC<FileSourceButtonsProps> = ({
 
   return (
     <>
-      <Stack gap="xs" style={{ height: '100%' }}>
-        <Text size="sm" pt="sm" fw={500} c="dimmed" mb="xs" style={{ paddingLeft: '1rem' }}>
-          {t('fileManager.myFiles', 'My Files')}
+      <Stack gap="xs" style={{ height: "100%" }}>
+        <Text size="sm" pt="sm" fw={500} c="dimmed" mb="xs" style={{ paddingLeft: "1rem" }}>
+          {t("fileManager.myFiles", "My Files")}
         </Text>
         {buttons}
       </Stack>
diff --git a/frontend/src/core/components/fileManager/HiddenFileInput.tsx b/frontend/src/core/components/fileManager/HiddenFileInput.tsx
index 27482df519..fce23187cd 100644
--- a/frontend/src/core/components/fileManager/HiddenFileInput.tsx
+++ b/frontend/src/core/components/fileManager/HiddenFileInput.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { useFileManagerContext } from '@app/contexts/FileManagerContext';
+import React from "react";
+import { useFileManagerContext } from "@app/contexts/FileManagerContext";
 
 const HiddenFileInput: React.FC = () => {
   const { fileInputRef, onFileInputChange } = useFileManagerContext();
@@ -10,7 +10,7 @@ const HiddenFileInput: React.FC = () => {
       type="file"
       multiple={true}
       onChange={onFileInputChange}
-      style={{ display: 'none' }}
+      style={{ display: "none" }}
       data-testid="file-input"
     />
   );
diff --git a/frontend/src/core/components/fileManager/MobileLayout.tsx b/frontend/src/core/components/fileManager/MobileLayout.tsx
index 0701874852..759fb2c7f9 100644
--- a/frontend/src/core/components/fileManager/MobileLayout.tsx
+++ b/frontend/src/core/components/fileManager/MobileLayout.tsx
@@ -1,19 +1,15 @@
-import React from 'react';
-import { Box } from '@mantine/core';
-import FileSourceButtons from '@app/components/fileManager/FileSourceButtons';
-import FileDetails from '@app/components/fileManager/FileDetails';
-import SearchInput from '@app/components/fileManager/SearchInput';
-import FileListArea from '@app/components/fileManager/FileListArea';
-import FileActions from '@app/components/fileManager/FileActions';
-import HiddenFileInput from '@app/components/fileManager/HiddenFileInput';
-import { useFileManagerContext } from '@app/contexts/FileManagerContext';
+import React from "react";
+import { Box } from "@mantine/core";
+import FileSourceButtons from "@app/components/fileManager/FileSourceButtons";
+import FileDetails from "@app/components/fileManager/FileDetails";
+import SearchInput from "@app/components/fileManager/SearchInput";
+import FileListArea from "@app/components/fileManager/FileListArea";
+import FileActions from "@app/components/fileManager/FileActions";
+import HiddenFileInput from "@app/components/fileManager/HiddenFileInput";
+import { useFileManagerContext } from "@app/contexts/FileManagerContext";
 
 const MobileLayout: React.FC = () => {
-  const {
-    activeSource,
-    selectedFiles,
-    modalHeight,
-  } = useFileManagerContext();
+  const { activeSource, selectedFiles, modalHeight } = useFileManagerContext();
 
   // Calculate the height more accurately based on actual content
   const calculateFileListHeight = () => {
@@ -21,17 +17,17 @@ const MobileLayout: React.FC = () => {
     const baseHeight = `calc(${modalHeight} - 2rem)`; // Account for Stack padding
 
     // Estimate heights of fixed components
-    const fileSourceHeight = '3rem'; // FileSourceButtons height
-    const fileDetailsHeight = selectedFiles.length > 0 ? '10rem' : '8rem'; // FileDetails compact height
-    const fileActionsHeight = activeSource === 'recent' ? '3rem' : '0rem'; // FileActions height (now at bottom)
-    const searchHeight = activeSource === 'recent' ? '3rem' : '0rem'; // SearchInput height
-    const gapHeight = activeSource === 'recent' ? '3.75rem' : '2rem'; // Stack gaps
+    const fileSourceHeight = "3rem"; // FileSourceButtons height
+    const fileDetailsHeight = selectedFiles.length > 0 ? "10rem" : "8rem"; // FileDetails compact height
+    const fileActionsHeight = activeSource === "recent" ? "3rem" : "0rem"; // FileActions height (now at bottom)
+    const searchHeight = activeSource === "recent" ? "3rem" : "0rem"; // SearchInput height
+    const gapHeight = activeSource === "recent" ? "3.75rem" : "2rem"; // Stack gaps
 
     return `calc(${baseHeight} - ${fileSourceHeight} - ${fileDetailsHeight} - ${fileActionsHeight} - ${searchHeight} - ${gapHeight})`;
   };
 
   return (
-    <Box h="100%" p="sm" style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+    <Box h="100%" p="sm" style={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}>
       {/* Section 1: File Sources - Fixed at top */}
       <Box style={{ flexShrink: 0 }}>
         <FileSourceButtons horizontal={true} />
@@ -42,28 +38,34 @@ const MobileLayout: React.FC = () => {
       </Box>
 
       {/* Section 3 & 4: Search Bar + File List - Unified background extending to modal edge */}
-      <Box style={{
-        flex: 1,
-        display: 'flex',
-        flexDirection: 'column',
-        backgroundColor: 'var(--bg-file-list)',
-        borderRadius: '0.5rem',
-        border: '1px solid var(--mantine-color-gray-2)',
-        overflow: 'hidden',
-        minHeight: 0
-      }}>
-        {activeSource === 'recent' && (
+      <Box
+        style={{
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          backgroundColor: "var(--bg-file-list)",
+          borderRadius: "0.5rem",
+          border: "1px solid var(--mantine-color-gray-2)",
+          overflow: "hidden",
+          minHeight: 0,
+        }}
+      >
+        {activeSource === "recent" && (
           <>
-            <Box style={{
-              flexShrink: 0,
-              borderBottom: '1px solid var(--mantine-color-gray-2)'
-            }}>
+            <Box
+              style={{
+                flexShrink: 0,
+                borderBottom: "1px solid var(--mantine-color-gray-2)",
+              }}
+            >
               <SearchInput />
             </Box>
-            <Box style={{
-              flexShrink: 0,
-              borderBottom: '1px solid var(--mantine-color-gray-2)'
-            }}>
+            <Box
+              style={{
+                flexShrink: 0,
+                borderBottom: "1px solid var(--mantine-color-gray-2)",
+              }}
+            >
               <FileActions />
             </Box>
           </>
@@ -74,11 +76,11 @@ const MobileLayout: React.FC = () => {
             scrollAreaHeight={calculateFileListHeight()}
             scrollAreaStyle={{
               height: calculateFileListHeight(),
-              maxHeight: '60vh',
-              minHeight: '9.375rem',
-              backgroundColor: 'transparent',
-              border: 'none',
-              borderRadius: 0
+              maxHeight: "60vh",
+              minHeight: "9.375rem",
+              backgroundColor: "transparent",
+              border: "none",
+              borderRadius: 0,
             }}
           />
         </Box>
diff --git a/frontend/src/core/components/fileManager/SearchInput.tsx b/frontend/src/core/components/fileManager/SearchInput.tsx
index 2b318604c6..b7dbf9306c 100644
--- a/frontend/src/core/components/fileManager/SearchInput.tsx
+++ b/frontend/src/core/components/fileManager/SearchInput.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import { TextInput } from '@mantine/core';
-import SearchIcon from '@mui/icons-material/Search';
-import { useTranslation } from 'react-i18next';
-import { useFileManagerContext } from '@app/contexts/FileManagerContext';
+import React from "react";
+import { TextInput } from "@mantine/core";
+import SearchIcon from "@mui/icons-material/Search";
+import { useTranslation } from "react-i18next";
+import { useFileManagerContext } from "@app/contexts/FileManagerContext";
 
 interface SearchInputProps {
   style?: React.CSSProperties;
@@ -14,20 +14,19 @@ const SearchInput: React.FC<SearchInputProps> = ({ style }) => {
 
   return (
     <TextInput
-      placeholder={t('fileManager.searchFiles', 'Search files...')}
+      placeholder={t("fileManager.searchFiles", "Search files...")}
       leftSection={<SearchIcon />}
       value={searchTerm}
       onChange={(e) => onSearchChange(e.target.value)}
-      
-      style={{ padding: '0.5rem', ...style }}
+      style={{ padding: "0.5rem", ...style }}
       styles={{
         input: {
-          border: 'none',
-          backgroundColor: 'transparent'
-        }
+          border: "none",
+          backgroundColor: "transparent",
+        },
       }}
     />
   );
 };
 
-export default SearchInput;
\ No newline at end of file
+export default SearchInput;
diff --git a/frontend/src/core/components/hotkeys/HotkeyDisplay.tsx b/frontend/src/core/components/hotkeys/HotkeyDisplay.tsx
index 7f6d9f26dd..357b4a2f4a 100644
--- a/frontend/src/core/components/hotkeys/HotkeyDisplay.tsx
+++ b/frontend/src/core/components/hotkeys/HotkeyDisplay.tsx
@@ -1,29 +1,29 @@
-import React from 'react';
-import { HotkeyBinding } from '@app/utils/hotkeys';
-import { useHotkeys } from '@app/contexts/HotkeyContext';
+import React from "react";
+import { HotkeyBinding } from "@app/utils/hotkeys";
+import { useHotkeys } from "@app/contexts/HotkeyContext";
 
 interface HotkeyDisplayProps {
   binding: HotkeyBinding | null | undefined;
-  size?: 'sm' | 'md';
+  size?: "sm" | "md";
   muted?: boolean;
 }
 
 const baseKeyStyle: React.CSSProperties = {
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  borderRadius: '0.375rem',
-  background: 'var(--mantine-color-gray-1)',
-  border: '1px solid var(--mantine-color-gray-3)',
-  padding: '0.125rem 0.35rem',
-  fontSize: '0.75rem',
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  borderRadius: "0.375rem",
+  background: "var(--mantine-color-gray-1)",
+  border: "1px solid var(--mantine-color-gray-3)",
+  padding: "0.125rem 0.35rem",
+  fontSize: "0.75rem",
   lineHeight: 1,
-  fontFamily: 'var(--mantine-font-family-monospace, monospace)',
-  minWidth: '1.35rem',
-  color: 'var(--mantine-color-text)',
+  fontFamily: "var(--mantine-font-family-monospace, monospace)",
+  minWidth: "1.35rem",
+  color: "var(--mantine-color-text)",
 };
 
-export const HotkeyDisplay: React.FC<HotkeyDisplayProps> = ({ binding, size = 'sm', muted = false }) => {
+export const HotkeyDisplay: React.FC<HotkeyDisplayProps> = ({ binding, size = "sm", muted = false }) => {
   const { getDisplayParts } = useHotkeys();
   const parts = getDisplayParts(binding);
 
@@ -31,24 +31,26 @@ export const HotkeyDisplay: React.FC<HotkeyDisplayProps> = ({ binding, size = 's
     return null;
   }
 
-  const keyStyle = size === 'md'
-    ? { ...baseKeyStyle, fontSize: '0.85rem', padding: '0.2rem 0.5rem' }
-    : baseKeyStyle;
+  const keyStyle = size === "md" ? { ...baseKeyStyle, fontSize: "0.85rem", padding: "0.2rem 0.5rem" } : baseKeyStyle;
 
   return (
     <span
       style={{
-        display: 'inline-flex',
-        alignItems: 'center',
-        gap: '0.25rem',
-        color: muted ? 'var(--mantine-color-dimmed)' : 'inherit',
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "0.25rem",
+        color: muted ? "var(--mantine-color-dimmed)" : "inherit",
         fontWeight: muted ? 500 : 600,
       }}
     >
       {parts.map((part, index) => (
         <React.Fragment key={`${part}-${index}`}>
           <kbd style={keyStyle}>{part}</kbd>
-          {index < parts.length - 1 && <span aria-hidden style={{ fontWeight: 400 }}>+</span>}
+          {index < parts.length - 1 && (
+            <span aria-hidden style={{ fontWeight: 400 }}>
+              +
+            </span>
+          )}
         </React.Fragment>
       ))}
     </span>
diff --git a/frontend/src/core/components/layout/Workbench.tsx b/frontend/src/core/components/layout/Workbench.tsx
index 521ac5db15..89c04dc670 100644
--- a/frontend/src/core/components/layout/Workbench.tsx
+++ b/frontend/src/core/components/layout/Workbench.tsx
@@ -1,24 +1,24 @@
-import { useCallback } from 'react';
-import { Box } from '@mantine/core';
-import { useRainbowThemeContext } from '@app/components/shared/RainbowThemeProvider';
-import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
-import { useFileHandler } from '@app/hooks/useFileHandler';
-import { useFileState, useFileActions } from '@app/contexts/FileContext';
-import { useNavigationState, useNavigationActions, useNavigationGuard } from '@app/contexts/NavigationContext';
-import { isBaseWorkbench } from '@app/types/workbench';
-import { useViewer } from '@app/contexts/ViewerContext';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
-import { FileId } from '@app/types/file';
-import styles from '@app/components/layout/Workbench.module.css';
+import { useCallback } from "react";
+import { Box } from "@mantine/core";
+import { useRainbowThemeContext } from "@app/components/shared/RainbowThemeProvider";
+import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
+import { useFileHandler } from "@app/hooks/useFileHandler";
+import { useFileState, useFileActions } from "@app/contexts/FileContext";
+import { useNavigationState, useNavigationActions, useNavigationGuard } from "@app/contexts/NavigationContext";
+import { isBaseWorkbench } from "@app/types/workbench";
+import { useViewer } from "@app/contexts/ViewerContext";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
+import { FileId } from "@app/types/file";
+import styles from "@app/components/layout/Workbench.module.css";
 
-import TopControls from '@app/components/shared/TopControls';
-import FileEditor from '@app/components/fileEditor/FileEditor';
-import PageEditor from '@app/components/pageEditor/PageEditor';
-import PageEditorControls from '@app/components/pageEditor/PageEditorControls';
-import Viewer from '@app/components/viewer/Viewer';
-import LandingPage from '@app/components/shared/LandingPage';
-import Footer from '@app/components/shared/Footer';
-import DismissAllErrorsButton from '@app/components/shared/DismissAllErrorsButton';
+import TopControls from "@app/components/shared/TopControls";
+import FileEditor from "@app/components/fileEditor/FileEditor";
+import PageEditor from "@app/components/pageEditor/PageEditor";
+import PageEditorControls from "@app/components/pageEditor/PageEditorControls";
+import Viewer from "@app/components/viewer/Viewer";
+import LandingPage from "@app/components/shared/LandingPage";
+import Footer from "@app/components/shared/Footer";
+import DismissAllErrorsButton from "@app/components/shared/DismissAllErrorsButton";
 
 // No props needed - component uses contexts directly
 export default function Workbench() {
@@ -54,41 +54,47 @@ export default function Workbench() {
 
   // Get active file index from ViewerContext
   const { activeFileIndex, setActiveFileIndex } = useViewer();
-  
+
   // Get navigation guard for unsaved changes check when switching files
   const { requestNavigation } = useNavigationGuard();
 
   // Wrap file selection to check for unsaved changes before switching
   // requestNavigation will show the modal if there are unsaved changes, otherwise navigate immediately
-  const handleFileSelect = useCallback((index: number) => {
-    // Don't do anything if selecting the same file
-    if (index === activeFileIndex) return;
+  const handleFileSelect = useCallback(
+    (index: number) => {
+      // Don't do anything if selecting the same file
+      if (index === activeFileIndex) return;
 
-    // requestNavigation handles the unsaved changes check internally
-    requestNavigation(() => {
-      setActiveFileIndex(index);
-    });
-  }, [activeFileIndex, requestNavigation, setActiveFileIndex]);
+      // requestNavigation handles the unsaved changes check internally
+      requestNavigation(() => {
+        setActiveFileIndex(index);
+      });
+    },
+    [activeFileIndex, requestNavigation, setActiveFileIndex],
+  );
 
-  const handleFileRemove = useCallback(async (fileId: FileId) => {
-    await fileActions.removeFiles([fileId], false); // false = don't delete from IndexedDB, just remove from context
-  }, [fileActions]);
+  const handleFileRemove = useCallback(
+    async (fileId: FileId) => {
+      await fileActions.removeFiles([fileId], false); // false = don't delete from IndexedDB, just remove from context
+    },
+    [fileActions],
+  );
 
   const handlePreviewClose = () => {
     setPreviewFile(null);
-    const previousMode = sessionStorage.getItem('previousMode');
-    if (previousMode === 'split') {
+    const previousMode = sessionStorage.getItem("previousMode");
+    if (previousMode === "split") {
       // Use context's handleToolSelect which coordinates tool selection and view changes
-      handleToolSelect('split');
-      sessionStorage.removeItem('previousMode');
-    } else if (previousMode === 'compress') {
-      handleToolSelect('compress');
-      sessionStorage.removeItem('previousMode');
-    } else if (previousMode === 'convert') {
-      handleToolSelect('convert');
-      sessionStorage.removeItem('previousMode');
+      handleToolSelect("split");
+      sessionStorage.removeItem("previousMode");
+    } else if (previousMode === "compress") {
+      handleToolSelect("compress");
+      sessionStorage.removeItem("previousMode");
+    } else if (previousMode === "convert") {
+      handleToolSelect("convert");
+      sessionStorage.removeItem("previousMode");
     } else {
-      setCurrentView('fileEditor');
+      setCurrentView("fileEditor");
     }
   };
 
@@ -104,15 +110,11 @@ export default function Workbench() {
     }
 
     if (activeFiles.length === 0) {
-      return (
-        <LandingPage
-        />
-      );
+      return <LandingPage />;
     }
 
     switch (currentView) {
       case "fileEditor":
-
         return (
           <FileEditor
             toolMode={!!selectedToolId}
@@ -124,13 +126,12 @@ export default function Workbench() {
               onMergeFiles: (filesToMerge) => {
                 addFiles(filesToMerge);
                 setCurrentView("viewer");
-              }
+              },
             })}
           />
         );
 
       case "viewer":
-        
         return (
           <Viewer
             sidebarsVisible={sidebarsVisible}
@@ -143,34 +144,31 @@ export default function Workbench() {
         );
 
       case "pageEditor":
-
         return (
-          <div style={{ position: 'relative', flex: '1 1 0', height: 0 }}>
-            <PageEditor
-              onFunctionsReady={setPageEditorFunctions}
-            />
+          <div style={{ position: "relative", flex: "1 1 0", height: 0 }}>
+            <PageEditor onFunctionsReady={setPageEditorFunctions} />
             {pageEditorFunctions && (
-              <div style={{ position: 'absolute', bottom: 0, left: 0, right: 0, zIndex: 100 }}>
+              <div style={{ position: "absolute", bottom: 0, left: 0, right: 0, zIndex: 100 }}>
                 <PageEditorControls
-                onClosePdf={pageEditorFunctions.closePdf}
-                onUndo={pageEditorFunctions.handleUndo}
-                onRedo={pageEditorFunctions.handleRedo}
-                canUndo={pageEditorFunctions.canUndo}
-                canRedo={pageEditorFunctions.canRedo}
-                onRotate={pageEditorFunctions.handleRotate}
-                onDelete={pageEditorFunctions.handleDelete}
-                onSplit={pageEditorFunctions.handleSplit}
-                onSplitAll={pageEditorFunctions.handleSplitAll}
-                onPageBreak={pageEditorFunctions.handlePageBreak}
-                onPageBreakAll={pageEditorFunctions.handlePageBreakAll}
-                onExportAll={pageEditorFunctions.onExportAll}
-                exportLoading={pageEditorFunctions.exportLoading}
-                selectionMode={pageEditorFunctions.selectionMode}
-                selectedPageIds={pageEditorFunctions.selectedPageIds}
-                displayDocument={pageEditorFunctions.displayDocument}
-                splitPositions={pageEditorFunctions.splitPositions}
-                totalPages={pageEditorFunctions.totalPages}
-              />
+                  onClosePdf={pageEditorFunctions.closePdf}
+                  onUndo={pageEditorFunctions.handleUndo}
+                  onRedo={pageEditorFunctions.handleRedo}
+                  canUndo={pageEditorFunctions.canUndo}
+                  canRedo={pageEditorFunctions.canRedo}
+                  onRotate={pageEditorFunctions.handleRotate}
+                  onDelete={pageEditorFunctions.handleDelete}
+                  onSplit={pageEditorFunctions.handleSplit}
+                  onSplitAll={pageEditorFunctions.handleSplitAll}
+                  onPageBreak={pageEditorFunctions.handlePageBreak}
+                  onPageBreakAll={pageEditorFunctions.handlePageBreakAll}
+                  onExportAll={pageEditorFunctions.onExportAll}
+                  exportLoading={pageEditorFunctions.exportLoading}
+                  selectionMode={pageEditorFunctions.selectionMode}
+                  selectedPageIds={pageEditorFunctions.selectedPageIds}
+                  displayDocument={pageEditorFunctions.displayDocument}
+                  splitPositions={pageEditorFunctions.splitPositions}
+                  totalPages={pageEditorFunctions.totalPages}
+                />
               </div>
             )}
           </div>
@@ -188,16 +186,16 @@ export default function Workbench() {
       style={
         isRainbowMode
           ? {} // No background color in rainbow mode
-          : { backgroundColor: 'var(--bg-background)' }
+          : { backgroundColor: "var(--bg-background)" }
       }
     >
       {/* Top Controls */}
-      {activeFiles.length > 0 && !customWorkbenchViews.find(v => v.workbenchId === currentView)?.hideTopControls && (
+      {activeFiles.length > 0 && !customWorkbenchViews.find((v) => v.workbenchId === currentView)?.hideTopControls && (
         <TopControls
           currentView={currentView}
           setCurrentView={setCurrentView}
           customViews={customWorkbenchViews}
-          activeFiles={activeFiles.map(f => {
+          activeFiles={activeFiles.map((f) => {
             const stub = selectors.getStirlingFileStub(f.fileId);
             return { fileId: f.fileId, name: f.name, versionNumber: stub?.versionNumber };
           })}
@@ -212,10 +210,10 @@ export default function Workbench() {
 
       {/* Main content area */}
       <Box
-        className={`flex-1 min-h-0 z-10 ${currentView === 'pageEditor' ? 'relative flex flex-col' : `relative ${styles.workbenchScrollable}`}`}
+        className={`flex-1 min-h-0 z-10 ${currentView === "pageEditor" ? "relative flex flex-col" : `relative ${styles.workbenchScrollable}`}`}
         style={{
-          transition: 'opacity 0.15s ease-in-out',
-          ...(currentView === 'pageEditor' && { height: 0 }),
+          transition: "opacity 0.15s ease-in-out",
+          ...(currentView === "pageEditor" && { height: 0 }),
         }}
       >
         {renderMainContent()}
diff --git a/frontend/src/core/components/onboarding/InitialOnboardingModal/InitialOnboardingModal.module.css b/frontend/src/core/components/onboarding/InitialOnboardingModal/InitialOnboardingModal.module.css
index c507653092..5b3aec2d91 100644
--- a/frontend/src/core/components/onboarding/InitialOnboardingModal/InitialOnboardingModal.module.css
+++ b/frontend/src/core/components/onboarding/InitialOnboardingModal/InitialOnboardingModal.module.css
@@ -118,7 +118,6 @@
   }
 }
 
-
 .heroIconsContainer {
   display: flex;
   gap: 32px;
@@ -141,7 +140,9 @@
   border: none;
   padding: 0;
   cursor: pointer;
-  transition: transform 0.2s ease, opacity 0.2s ease;
+  transition:
+    transform 0.2s ease,
+    opacity 0.2s ease;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -181,7 +182,14 @@
 }
 
 .iconLabel {
-  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
+  font-family:
+    "Inter",
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    Roboto,
+    Arial,
+    sans-serif;
   font-size: 14px;
   font-weight: 500;
   color: rgba(255, 255, 255, 0.9);
@@ -266,7 +274,7 @@
   opacity: 1;
   border: 1px solid rgba(255, 255, 255, 0.9);
   background: rgba(255, 255, 255, 0.9);
-  color: #1F2933;
+  color: #1f2933;
   box-shadow: 0 0 8px rgba(255, 255, 255, 0.7);
 }
 
@@ -282,7 +290,14 @@
 
 /* Title styles */
 .titleText {
-  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
+  font-family:
+    "Inter",
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    Roboto,
+    Arial,
+    sans-serif;
   font-weight: 600;
   font-size: 22px;
   color: var(--onboarding-title);
@@ -290,7 +305,14 @@
 
 /* Body text styles */
 .bodyText {
-  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
+  font-family:
+    "Inter",
+    system-ui,
+    -apple-system,
+    "Segoe UI",
+    Roboto,
+    Arial,
+    sans-serif;
   font-size: 16px;
   color: var(--onboarding-body);
   line-height: 1.5;
@@ -314,8 +336,8 @@
 }
 
 .v2Badge {
-  background: #DBEFFF;
-  color: #2A4BFF;
+  background: #dbefff;
+  color: #2a4bff;
   padding: 4px 12px;
   border-radius: 6px;
   font-size: 14px;
diff --git a/frontend/src/core/components/onboarding/InitialOnboardingModal/renderButtons.tsx b/frontend/src/core/components/onboarding/InitialOnboardingModal/renderButtons.tsx
index c50ae7b43e..e0a71a3e69 100644
--- a/frontend/src/core/components/onboarding/InitialOnboardingModal/renderButtons.tsx
+++ b/frontend/src/core/components/onboarding/InitialOnboardingModal/renderButtons.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
-import { Button, Group, ActionIcon } from '@mantine/core';
-import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
-import { useTranslation } from 'react-i18next';
-import { ButtonDefinition, type FlowState } from '@app/components/onboarding/onboardingFlowConfig';
-import type { LicenseNotice } from '@app/types/types';
-import type { ButtonAction } from '@app/components/onboarding/onboardingFlowConfig';
+import React from "react";
+import { Button, Group, ActionIcon } from "@mantine/core";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import { useTranslation } from "react-i18next";
+import { ButtonDefinition, type FlowState } from "@app/components/onboarding/onboardingFlowConfig";
+import type { LicenseNotice } from "@app/types/types";
+import type { ButtonAction } from "@app/components/onboarding/onboardingFlowConfig";
 
 interface SlideButtonsProps {
   slideDefinition: {
@@ -18,49 +18,49 @@ interface SlideButtonsProps {
 
 export function SlideButtons({ slideDefinition, licenseNotice, flowState, onAction }: SlideButtonsProps) {
   const { t } = useTranslation();
-  const leftButtons = slideDefinition.buttons.filter((btn) => btn.group === 'left');
-  const rightButtons = slideDefinition.buttons.filter((btn) => btn.group === 'right');
+  const leftButtons = slideDefinition.buttons.filter((btn) => btn.group === "left");
+  const rightButtons = slideDefinition.buttons.filter((btn) => btn.group === "right");
 
-  const buttonStyles = (variant: ButtonDefinition['variant']) =>
-    variant === 'primary'
+  const buttonStyles = (variant: ButtonDefinition["variant"]) =>
+    variant === "primary"
       ? {
           root: {
-            background: 'var(--onboarding-primary-button-bg)',
-            color: 'var(--onboarding-primary-button-text)',
+            background: "var(--onboarding-primary-button-bg)",
+            color: "var(--onboarding-primary-button-text)",
           },
         }
       : {
           root: {
-            background: 'var(--onboarding-secondary-button-bg)',
-            border: '1px solid var(--onboarding-secondary-button-border)',
-            color: 'var(--onboarding-secondary-button-text)',
+            background: "var(--onboarding-secondary-button-bg)",
+            border: "1px solid var(--onboarding-secondary-button-border)",
+            color: "var(--onboarding-secondary-button-text)",
           },
         };
 
   const resolveButtonLabel = (button: ButtonDefinition) => {
     // Special case: override "See Plans" with "Upgrade now" when over limit
     if (
-      button.type === 'button' &&
-      slideDefinition.id === 'server-license' &&
-      button.action === 'see-plans' &&
+      button.type === "button" &&
+      slideDefinition.id === "server-license" &&
+      button.action === "see-plans" &&
       licenseNotice.isOverLimit
     ) {
-      return t('onboarding.serverLicense.upgrade', 'Upgrade now →');
+      return t("onboarding.serverLicense.upgrade", "Upgrade now →");
     }
 
     // Translate the label (it's a translation key)
-    const label = button.label ?? '';
-    if (!label) return '';
+    const label = button.label ?? "";
+    if (!label) return "";
 
     // Extract fallback text from translation key (e.g., 'onboarding.buttons.next' -> 'Next')
-    const fallback = label.split('.').pop() || label;
+    const fallback = label.split(".").pop() || label;
     return t(label, fallback);
   };
 
   const renderButton = (button: ButtonDefinition) => {
     const disabled = button.disabledWhen?.(flowState) ?? false;
 
-    if (button.type === 'icon') {
+    if (button.type === "icon") {
       return (
         <ActionIcon
           key={button.key}
@@ -70,18 +70,18 @@ export function SlideButtons({ slideDefinition, licenseNotice, flowState, onActi
           disabled={disabled}
           styles={{
             root: {
-              background: 'var(--onboarding-secondary-button-bg)',
-              border: '1px solid var(--onboarding-secondary-button-border)',
-              color: 'var(--onboarding-secondary-button-text)',
+              background: "var(--onboarding-secondary-button-bg)",
+              border: "1px solid var(--onboarding-secondary-button-border)",
+              color: "var(--onboarding-secondary-button-text)",
             },
           }}
         >
-          {button.icon === 'chevron-left' && <ChevronLeftIcon fontSize="small" />}
+          {button.icon === "chevron-left" && <ChevronLeftIcon fontSize="small" />}
         </ActionIcon>
       );
     }
 
-    const variant = button.variant ?? 'secondary';
+    const variant = button.variant ?? "secondary";
     const label = resolveButtonLabel(button);
 
     return (
diff --git a/frontend/src/core/components/onboarding/Onboarding.tsx b/frontend/src/core/components/onboarding/Onboarding.tsx
index d098a801d5..e62ae9cedf 100644
--- a/frontend/src/core/components/onboarding/Onboarding.tsx
+++ b/frontend/src/core/components/onboarding/Onboarding.tsx
@@ -1,33 +1,30 @@
-import { useEffect, useMemo, useCallback, useState } from 'react';
-import { type StepType } from '@reactour/tour';
-import { useTranslation } from 'react-i18next';
-import { useNavigate, useLocation } from 'react-router-dom';
-import { isAuthRoute } from '@app/constants/routes';
-import { dispatchTourState } from '@app/constants/events';
-import { useOnboardingOrchestrator } from '@app/components/onboarding/orchestrator/useOnboardingOrchestrator';
-import { useBypassOnboarding } from '@app/components/onboarding/useBypassOnboarding';
-import OnboardingTour, { type AdvanceArgs, type CloseArgs } from '@app/components/onboarding/OnboardingTour';
-import OnboardingModalSlide from '@app/components/onboarding/OnboardingModalSlide';
-import {
-  useServerLicenseRequest,
-  useTourRequest,
-} from '@app/components/onboarding/useOnboardingEffects';
-import { useOnboardingDownload } from '@app/components/onboarding/useOnboardingDownload';
-import { SLIDE_DEFINITIONS, type SlideId, type ButtonAction } from '@app/components/onboarding/onboardingFlowConfig';
-import ToolPanelModePrompt from '@app/components/tools/ToolPanelModePrompt';
-import { useTourOrchestration } from '@app/contexts/TourOrchestrationContext';
-import { useAdminTourOrchestration } from '@app/contexts/AdminTourOrchestrationContext';
-import { createUserStepsConfig } from '@app/components/onboarding/userStepsConfig';
-import { createAdminStepsConfig } from '@app/components/onboarding/adminStepsConfig';
-import { createWhatsNewStepsConfig } from '@app/components/onboarding/whatsNewStepsConfig';
-import { removeAllGlows } from '@app/components/onboarding/tourGlow';
-import { useFilesModalContext } from '@app/contexts/FilesModalContext';
-import { useServerExperience } from '@app/hooks/useServerExperience';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
-import apiClient from '@app/services/apiClient';
-import '@app/components/onboarding/OnboardingTour.css';
-import { useAccountLogout } from '@app/extensions/accountLogout';
-import { useAuth } from '@app/auth/UseSession';
+import { useEffect, useMemo, useCallback, useState } from "react";
+import { type StepType } from "@reactour/tour";
+import { useTranslation } from "react-i18next";
+import { useNavigate, useLocation } from "react-router-dom";
+import { isAuthRoute } from "@app/constants/routes";
+import { dispatchTourState } from "@app/constants/events";
+import { useOnboardingOrchestrator } from "@app/components/onboarding/orchestrator/useOnboardingOrchestrator";
+import { useBypassOnboarding } from "@app/components/onboarding/useBypassOnboarding";
+import OnboardingTour, { type AdvanceArgs, type CloseArgs } from "@app/components/onboarding/OnboardingTour";
+import OnboardingModalSlide from "@app/components/onboarding/OnboardingModalSlide";
+import { useServerLicenseRequest, useTourRequest } from "@app/components/onboarding/useOnboardingEffects";
+import { useOnboardingDownload } from "@app/components/onboarding/useOnboardingDownload";
+import { SLIDE_DEFINITIONS, type SlideId, type ButtonAction } from "@app/components/onboarding/onboardingFlowConfig";
+import ToolPanelModePrompt from "@app/components/tools/ToolPanelModePrompt";
+import { useTourOrchestration } from "@app/contexts/TourOrchestrationContext";
+import { useAdminTourOrchestration } from "@app/contexts/AdminTourOrchestrationContext";
+import { createUserStepsConfig } from "@app/components/onboarding/userStepsConfig";
+import { createAdminStepsConfig } from "@app/components/onboarding/adminStepsConfig";
+import { createWhatsNewStepsConfig } from "@app/components/onboarding/whatsNewStepsConfig";
+import { removeAllGlows } from "@app/components/onboarding/tourGlow";
+import { useFilesModalContext } from "@app/contexts/FilesModalContext";
+import { useServerExperience } from "@app/hooks/useServerExperience";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
+import apiClient from "@app/services/apiClient";
+import "@app/components/onboarding/OnboardingTour.css";
+import { useAccountLogout } from "@app/extensions/accountLogout";
+import { useAuth } from "@app/auth/UseSession";
 
 export default function Onboarding() {
   const { t } = useTranslation();
@@ -52,13 +49,16 @@ export default function Onboarding() {
   const accountLogout = useAccountLogout();
   const { signOut } = useAuth();
 
-  const handleRoleSelect = useCallback((role: 'admin' | 'user' | null) => {
-    actions.updateRuntimeState({ selectedRole: role });
-    serverExperience.setSelfReportedAdmin(role === 'admin');
-  }, [actions, serverExperience]);
+  const handleRoleSelect = useCallback(
+    (role: "admin" | "user" | null) => {
+      actions.updateRuntimeState({ selectedRole: role });
+      serverExperience.setSelfReportedAdmin(role === "admin");
+    },
+    [actions, serverExperience],
+  );
 
   const redirectToLogin = useCallback(() => {
-    window.location.assign('/login');
+    window.location.assign("/login");
   }, []);
 
   const handlePasswordChanged = useCallback(async () => {
@@ -80,84 +80,97 @@ export default function Onboarding() {
     }
   }, [isLoading, analyticsModalDismissed, serverExperience.effectiveIsAdmin, config?.enableAnalytics]);
 
-  const handleAnalyticsChoice = useCallback(async (enableAnalytics: boolean) => {
-    if (analyticsLoading) return;
-    setAnalyticsLoading(true);
-    setAnalyticsError(null);
+  const handleAnalyticsChoice = useCallback(
+    async (enableAnalytics: boolean) => {
+      if (analyticsLoading) return;
+      setAnalyticsLoading(true);
+      setAnalyticsError(null);
 
-    const formData = new FormData();
-    formData.append('enabled', enableAnalytics.toString());
+      const formData = new FormData();
+      formData.append("enabled", enableAnalytics.toString());
 
-    try {
-      await apiClient.post('/api/v1/settings/update-enable-analytics', formData);
-      await refetchConfig();
-      setShowAnalyticsModal(false);
-      setAnalyticsModalDismissed(true);
-    } catch (error) {
-      setAnalyticsError(error instanceof Error ? error.message : 'Unknown error');
-    } finally {
-      setAnalyticsLoading(false);
-    }
-  }, [analyticsLoading, refetchConfig]);
-
-  const handleButtonAction = useCallback(async (action: ButtonAction) => {
-    switch (action) {
-      case 'next':
-      case 'complete-close':
-        actions.complete();
-        break;
-      case 'prev':
-        actions.prev();
-        break;
-      case 'close':
-        actions.skip();
-        break;
-      case 'download-selected':
-        handleDownloadSelected();
-        actions.complete();
-        break;
-      case 'security-next':
-        if (!runtimeState.selectedRole) return;
-        if (runtimeState.selectedRole !== 'admin') {
-          actions.updateRuntimeState({ tourType: 'whatsnew' });
-          setIsTourOpen(true);
-        }
-        actions.complete();
-        break;
-      case 'launch-admin':
-        actions.updateRuntimeState({ tourType: 'admin' });
-        setIsTourOpen(true);
-        break;
-      case 'launch-tools':
-        actions.updateRuntimeState({ tourType: 'whatsnew' });
-        setIsTourOpen(true);
-        break;
-      case 'launch-auto': {
-        const tourType = serverExperience.effectiveIsAdmin || runtimeState.selectedRole === 'admin' ? 'admin' : 'whatsnew';
-        actions.updateRuntimeState({ tourType });
-        setIsTourOpen(true);
-        break;
+      try {
+        await apiClient.post("/api/v1/settings/update-enable-analytics", formData);
+        await refetchConfig();
+        setShowAnalyticsModal(false);
+        setAnalyticsModalDismissed(true);
+      } catch (error) {
+        setAnalyticsError(error instanceof Error ? error.message : "Unknown error");
+      } finally {
+        setAnalyticsLoading(false);
       }
-      case 'skip-to-license':
-        actions.complete();
-        break;
-      case 'skip-tour':
-        actions.complete();
-        break;
-      case 'see-plans':
-        actions.complete();
-        navigate('/settings/adminPlan');
-        break;
-      case 'enable-analytics':
-        await handleAnalyticsChoice(true);
-        break;
-      case 'disable-analytics':
-        await handleAnalyticsChoice(false);
-        break;
-    }
-  }, [actions, handleAnalyticsChoice, handleDownloadSelected, navigate, runtimeState.selectedRole, serverExperience.effectiveIsAdmin]);
+    },
+    [analyticsLoading, refetchConfig],
+  );
 
-  const isRTL = typeof document !== 'undefined' ? document.documentElement.dir === 'rtl' : false;
+  const handleButtonAction = useCallback(
+    async (action: ButtonAction) => {
+      switch (action) {
+        case "next":
+        case "complete-close":
+          actions.complete();
+          break;
+        case "prev":
+          actions.prev();
+          break;
+        case "close":
+          actions.skip();
+          break;
+        case "download-selected":
+          handleDownloadSelected();
+          actions.complete();
+          break;
+        case "security-next":
+          if (!runtimeState.selectedRole) return;
+          if (runtimeState.selectedRole !== "admin") {
+            actions.updateRuntimeState({ tourType: "whatsnew" });
+            setIsTourOpen(true);
+          }
+          actions.complete();
+          break;
+        case "launch-admin":
+          actions.updateRuntimeState({ tourType: "admin" });
+          setIsTourOpen(true);
+          break;
+        case "launch-tools":
+          actions.updateRuntimeState({ tourType: "whatsnew" });
+          setIsTourOpen(true);
+          break;
+        case "launch-auto": {
+          const tourType = serverExperience.effectiveIsAdmin || runtimeState.selectedRole === "admin" ? "admin" : "whatsnew";
+          actions.updateRuntimeState({ tourType });
+          setIsTourOpen(true);
+          break;
+        }
+        case "skip-to-license":
+          actions.complete();
+          break;
+        case "skip-tour":
+          actions.complete();
+          break;
+        case "see-plans":
+          actions.complete();
+          navigate("/settings/adminPlan");
+          break;
+        case "enable-analytics":
+          await handleAnalyticsChoice(true);
+          break;
+        case "disable-analytics":
+          await handleAnalyticsChoice(false);
+          break;
+      }
+    },
+    [
+      actions,
+      handleAnalyticsChoice,
+      handleDownloadSelected,
+      navigate,
+      runtimeState.selectedRole,
+      serverExperience.effectiveIsAdmin,
+    ],
+  );
+
+  const isRTL = typeof document !== "undefined" ? document.documentElement.dir === "rtl" : false;
   const [isTourOpen, setIsTourOpen] = useState(false);
 
   useEffect(() => dispatchTourState(isTourOpen), [isTourOpen]);
@@ -167,60 +180,63 @@ export default function Onboarding() {
   const adminTourOrch = useAdminTourOrchestration();
 
   const userStepsConfig = useMemo(
-    () => createUserStepsConfig({
-      t,
-      actions: {
-        saveWorkbenchState: tourOrch.saveWorkbenchState,
-        closeFilesModal,
-        backToAllTools: tourOrch.backToAllTools,
-        selectCropTool: tourOrch.selectCropTool,
-        loadSampleFile: tourOrch.loadSampleFile,
-        switchToActiveFiles: tourOrch.switchToActiveFiles,
-        pinFile: tourOrch.pinFile,
-        modifyCropSettings: tourOrch.modifyCropSettings,
-        executeTool: tourOrch.executeTool,
-        openFilesModal,
-      },
-    }),
-    [t, tourOrch, closeFilesModal, openFilesModal]
+    () =>
+      createUserStepsConfig({
+        t,
+        actions: {
+          saveWorkbenchState: tourOrch.saveWorkbenchState,
+          closeFilesModal,
+          backToAllTools: tourOrch.backToAllTools,
+          selectCropTool: tourOrch.selectCropTool,
+          loadSampleFile: tourOrch.loadSampleFile,
+          switchToActiveFiles: tourOrch.switchToActiveFiles,
+          pinFile: tourOrch.pinFile,
+          modifyCropSettings: tourOrch.modifyCropSettings,
+          executeTool: tourOrch.executeTool,
+          openFilesModal,
+        },
+      }),
+    [t, tourOrch, closeFilesModal, openFilesModal],
   );
 
   const whatsNewStepsConfig = useMemo(
-    () => createWhatsNewStepsConfig({
-      t,
-      actions: {
-        saveWorkbenchState: tourOrch.saveWorkbenchState,
-        closeFilesModal,
-        backToAllTools: tourOrch.backToAllTools,
-        openFilesModal,
-        loadSampleFile: tourOrch.loadSampleFile,
-        switchToViewer: tourOrch.switchToViewer,
-        switchToPageEditor: tourOrch.switchToPageEditor,
-        switchToActiveFiles: tourOrch.switchToActiveFiles,
-        selectFirstFile: tourOrch.selectFirstFile,
-      },
-    }),
-    [t, tourOrch, closeFilesModal, openFilesModal]
+    () =>
+      createWhatsNewStepsConfig({
+        t,
+        actions: {
+          saveWorkbenchState: tourOrch.saveWorkbenchState,
+          closeFilesModal,
+          backToAllTools: tourOrch.backToAllTools,
+          openFilesModal,
+          loadSampleFile: tourOrch.loadSampleFile,
+          switchToViewer: tourOrch.switchToViewer,
+          switchToPageEditor: tourOrch.switchToPageEditor,
+          switchToActiveFiles: tourOrch.switchToActiveFiles,
+          selectFirstFile: tourOrch.selectFirstFile,
+        },
+      }),
+    [t, tourOrch, closeFilesModal, openFilesModal],
   );
 
   const adminStepsConfig = useMemo(
-    () => createAdminStepsConfig({
-      t,
-      actions: {
-        saveAdminState: adminTourOrch.saveAdminState,
-        openConfigModal: adminTourOrch.openConfigModal,
-        navigateToSection: adminTourOrch.navigateToSection,
-        scrollNavToSection: adminTourOrch.scrollNavToSection,
-      },
-    }),
-    [t, adminTourOrch]
+    () =>
+      createAdminStepsConfig({
+        t,
+        actions: {
+          saveAdminState: adminTourOrch.saveAdminState,
+          openConfigModal: adminTourOrch.openConfigModal,
+          navigateToSection: adminTourOrch.navigateToSection,
+          scrollNavToSection: adminTourOrch.scrollNavToSection,
+        },
+      }),
+    [t, adminTourOrch],
   );
 
   const tourSteps = useMemo<StepType[]>(() => {
     switch (runtimeState.tourType) {
-      case 'admin':
+      case "admin":
         return Object.values(adminStepsConfig);
-      case 'whatsnew':
+      case "whatsnew":
         return Object.values(whatsNewStepsConfig);
       default:
         return Object.values(userStepsConfig);
@@ -242,8 +258,8 @@ export default function Onboarding() {
 
   // Handle first-login password change modal
   useEffect(() => {
-    if(runtimeState.requiresPasswordChange === true) {
-      console.log('[Onboarding] User requires password change on first login.');
+    if (runtimeState.requiresPasswordChange === true) {
+      console.log("[Onboarding] User requires password change on first login.");
       setFirstLoginModalOpen(true);
     } else {
       setFirstLoginModalOpen(false);
@@ -252,18 +268,18 @@ export default function Onboarding() {
 
   // Handle MFA setup modal
   useEffect(() => {
-    if(runtimeState.requiresMfaSetup === true) {
-      console.log('[Onboarding] User requires MFA setup.');
+    if (runtimeState.requiresMfaSetup === true) {
+      console.log("[Onboarding] User requires MFA setup.");
       setMfaModalOpen(true);
     } else {
-      console.log('[Onboarding] User does not require MFA setup.');
+      console.log("[Onboarding] User does not require MFA setup.");
       setMfaModalOpen(false);
     }
   }, [runtimeState.requiresMfaSetup]);
 
   const finishTour = useCallback(() => {
     setIsTourOpen(false);
-    if (runtimeState.tourType === 'admin') {
+    if (runtimeState.tourType === "admin") {
       adminTourOrch.restoreAdminState();
     } else {
       tourOrch.restoreWorkbenchState();
@@ -272,23 +288,29 @@ export default function Onboarding() {
     actions.complete();
   }, [actions, adminTourOrch, runtimeState.tourType, tourOrch]);
 
-  const handleAdvanceTour = useCallback((args: AdvanceArgs) => {
-    const { setCurrentStep, currentStep: tourCurrentStep, steps, setIsOpen } = args;
-    if (steps && tourCurrentStep === steps.length - 1) {
-      setIsOpen(false);
-      finishTour();
-    } else if (steps) {
-      setCurrentStep((s) => (s === steps.length - 1 ? 0 : s + 1));
-    }
-  }, [finishTour]);
+  const handleAdvanceTour = useCallback(
+    (args: AdvanceArgs) => {
+      const { setCurrentStep, currentStep: tourCurrentStep, steps, setIsOpen } = args;
+      if (steps && tourCurrentStep === steps.length - 1) {
+        setIsOpen(false);
+        finishTour();
+      } else if (steps) {
+        setCurrentStep((s) => (s === steps.length - 1 ? 0 : s + 1));
+      }
+    },
+    [finishTour],
+  );
 
-  const handleCloseTour = useCallback((args: CloseArgs) => {
-    args.setIsOpen(false);
-    finishTour();
-  }, [finishTour]);
+  const handleCloseTour = useCallback(
+    (args: CloseArgs) => {
+      args.setIsOpen(false);
+      finishTour();
+    },
+    [finishTour],
+  );
 
   const currentSlideDefinition = useMemo(() => {
-    if (!currentStep || currentStep.type !== 'modal-slide' || !currentStep.slideId) {
+    if (!currentStep || currentStep.type !== "modal-slide" || !currentStep.slideId) {
       return null;
     }
     return SLIDE_DEFINITIONS[currentStep.slideId as SlideId];
@@ -312,15 +334,29 @@ export default function Onboarding() {
       analyticsLoading,
       onMfaSetupComplete: handleMfaSetupComplete,
     });
-  }, [analyticsError, analyticsLoading, currentSlideDefinition, osInfo, osOptions, runtimeState.selectedRole, runtimeState.licenseNotice, handleRoleSelect, serverExperience.loginEnabled, setSelectedDownloadUrl, runtimeState.firstLoginUsername, handlePasswordChanged, handleMfaSetupComplete]);
+  }, [
+    analyticsError,
+    analyticsLoading,
+    currentSlideDefinition,
+    osInfo,
+    osOptions,
+    runtimeState.selectedRole,
+    runtimeState.licenseNotice,
+    handleRoleSelect,
+    serverExperience.loginEnabled,
+    setSelectedDownloadUrl,
+    runtimeState.firstLoginUsername,
+    handlePasswordChanged,
+    handleMfaSetupComplete,
+  ]);
 
   const modalSlideCount = useMemo(() => {
-    return activeFlow.filter((step) => step.type === 'modal-slide').length;
+    return activeFlow.filter((step) => step.type === "modal-slide").length;
   }, [activeFlow]);
 
   const currentModalSlideIndex = useMemo(() => {
-    if (!currentStep || currentStep.type !== 'modal-slide') return 0;
-    const modalSlides = activeFlow.filter((step) => step.type === 'modal-slide');
+    if (!currentStep || currentStep.type !== "modal-slide") return 0;
+    const modalSlides = activeFlow.filter((step) => step.type === "modal-slide");
     return modalSlides.findIndex((step) => step.id === currentStep.id);
   }, [activeFlow, currentStep]);
 
@@ -334,10 +370,10 @@ export default function Onboarding() {
 
   // Show analytics modal before onboarding if needed
   if (showAnalyticsModal) {
-    const slideDefinition = SLIDE_DEFINITIONS['analytics-choice'];
+    const slideDefinition = SLIDE_DEFINITIONS["analytics-choice"];
     const slideContent = slideDefinition.createSlide({
-      osLabel: '',
-      osUrl: '',
+      osLabel: "",
+      osUrl: "",
       selectedRole: null,
       onRoleSelect: () => {},
       analyticsError,
@@ -353,9 +389,9 @@ export default function Onboarding() {
         currentModalSlideIndex={0}
         onSkip={() => {}} // No skip allowed
         onAction={async (action) => {
-          if (action === 'enable-analytics') {
+          if (action === "enable-analytics") {
             await handleAnalyticsChoice(true);
-          } else if (action === 'disable-analytics') {
+          } else if (action === "disable-analytics") {
             await handleAnalyticsChoice(false);
           }
         }}
@@ -365,10 +401,10 @@ export default function Onboarding() {
   }
 
   if (firstLoginModalOpen) {
-    const baseSlideDefinition = SLIDE_DEFINITIONS['first-login'];
+    const baseSlideDefinition = SLIDE_DEFINITIONS["first-login"];
     const slideContent = baseSlideDefinition.createSlide({
-      osLabel: '',
-      osUrl: '',
+      osLabel: "",
+      osUrl: "",
       selectedRole: null,
       onRoleSelect: () => {},
       firstLoginUsername: runtimeState.firstLoginUsername,
@@ -385,7 +421,7 @@ export default function Onboarding() {
         currentModalSlideIndex={0}
         onSkip={() => {}}
         onAction={async (action) => {
-          if (action === 'complete-close') {
+          if (action === "complete-close") {
             handlePasswordChanged();
           }
         }}
@@ -395,11 +431,11 @@ export default function Onboarding() {
   }
 
   if (mfaModalOpen) {
-    console.log('[Onboarding] Rendering MFA setup modal slide.');
-    const baseSlideDefinition = SLIDE_DEFINITIONS['mfa-setup'];
+    console.log("[Onboarding] Rendering MFA setup modal slide.");
+    const baseSlideDefinition = SLIDE_DEFINITIONS["mfa-setup"];
     const slideContent = baseSlideDefinition.createSlide({
-      osLabel: '',
-      osUrl: '',
+      osLabel: "",
+      osUrl: "",
       selectedRole: null,
       onRoleSelect: () => {},
       onMfaSetupComplete: handleMfaSetupComplete,
@@ -414,7 +450,7 @@ export default function Onboarding() {
         currentModalSlideIndex={0}
         onSkip={() => {}}
         onAction={async (action) => {
-          if (action === 'complete-close') {
+          if (action === "complete-close") {
             handleMfaSetupComplete();
           }
         }}
@@ -424,16 +460,16 @@ export default function Onboarding() {
   }
 
   if (showLicenseSlide) {
-    const baseSlideDefinition = SLIDE_DEFINITIONS['server-license'];
+    const baseSlideDefinition = SLIDE_DEFINITIONS["server-license"];
     // Remove back button for external license notice
     const slideDefinition = {
       ...baseSlideDefinition,
-      buttons: baseSlideDefinition.buttons.filter(btn => btn.key !== 'license-back')
+      buttons: baseSlideDefinition.buttons.filter((btn) => btn.key !== "license-back"),
     };
     const effectiveLicenseNotice = externalLicenseNotice || runtimeState.licenseNotice;
     const slideContent = slideDefinition.createSlide({
-      osLabel: '',
-      osUrl: '',
+      osLabel: "",
+      osUrl: "",
       osOptions: [],
       onDownloadUrlChange: () => {},
       selectedRole: null,
@@ -451,9 +487,9 @@ export default function Onboarding() {
         currentModalSlideIndex={0}
         onSkip={closeLicenseSlide}
         onAction={(action) => {
-          if (action === 'see-plans') {
+          if (action === "see-plans") {
             closeLicenseSlide();
-            navigate('/settings/adminPlan');
+            navigate("/settings/adminPlan");
           } else {
             closeLicenseSlide();
           }
@@ -487,10 +523,10 @@ export default function Onboarding() {
 
   // Render the current onboarding step
   switch (currentStep.type) {
-    case 'tool-prompt':
+    case "tool-prompt":
       return <ToolPanelModePrompt forceOpen={true} onComplete={actions.complete} />;
 
-    case 'modal-slide':
+    case "modal-slide":
       if (!currentSlideDefinition || !currentSlideContent) return null;
       return (
         <OnboardingModalSlide
diff --git a/frontend/src/core/components/onboarding/OnboardingModalSlide.tsx b/frontend/src/core/components/onboarding/OnboardingModalSlide.tsx
index 60a9309199..1c2fa9f1ec 100644
--- a/frontend/src/core/components/onboarding/OnboardingModalSlide.tsx
+++ b/frontend/src/core/components/onboarding/OnboardingModalSlide.tsx
@@ -1,25 +1,25 @@
 /**
  * OnboardingModalSlide Component
- * 
+ *
  * Renders a single modal slide in the onboarding flow.
  * Handles the hero image, content, stepper, and button actions.
  */
 
-import React from 'react';
-import { Modal, Stack, ActionIcon } from '@mantine/core';
-import DiamondOutlinedIcon from '@mui/icons-material/DiamondOutlined';
-import CloseIcon from '@mui/icons-material/Close';
+import React from "react";
+import { Modal, Stack, ActionIcon } from "@mantine/core";
+import DiamondOutlinedIcon from "@mui/icons-material/DiamondOutlined";
+import CloseIcon from "@mui/icons-material/Close";
 
-import type { SlideDefinition, ButtonAction } from '@app/components/onboarding/onboardingFlowConfig';
-import type { OnboardingRuntimeState } from '@app/components/onboarding/orchestrator/onboardingConfig';
-import type { SlideConfig } from '@app/types/types';
-import AnimatedSlideBackground from '@app/components/onboarding/slides/AnimatedSlideBackground';
-import OnboardingStepper from '@app/components/onboarding/OnboardingStepper';
-import { SlideButtons } from '@app/components/onboarding/InitialOnboardingModal/renderButtons';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { BASE_PATH } from '@app/constants/app';
-import { Z_INDEX_OVER_FULLSCREEN_SURFACE } from '@app/styles/zIndex';
-import styles from '@app/components/onboarding/InitialOnboardingModal/InitialOnboardingModal.module.css';
+import type { SlideDefinition, ButtonAction } from "@app/components/onboarding/onboardingFlowConfig";
+import type { OnboardingRuntimeState } from "@app/components/onboarding/orchestrator/onboardingConfig";
+import type { SlideConfig } from "@app/types/types";
+import AnimatedSlideBackground from "@app/components/onboarding/slides/AnimatedSlideBackground";
+import OnboardingStepper from "@app/components/onboarding/OnboardingStepper";
+import { SlideButtons } from "@app/components/onboarding/InitialOnboardingModal/renderButtons";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { BASE_PATH } from "@app/constants/app";
+import { Z_INDEX_OVER_FULLSCREEN_SURFACE } from "@app/styles/zIndex";
+import styles from "@app/components/onboarding/InitialOnboardingModal/InitialOnboardingModal.module.css";
 
 interface OnboardingModalSlideProps {
   slideDefinition: SlideDefinition;
@@ -42,9 +42,8 @@ export default function OnboardingModalSlide({
   onAction,
   allowDismiss = true,
 }: OnboardingModalSlideProps) {
-
   const renderHero = () => {
-    if (slideDefinition.hero.type === 'dual-icon') {
+    if (slideDefinition.hero.type === "dual-icon") {
       return (
         <div className={styles.heroIconsContainer}>
           <div className={styles.iconWrapper}>
@@ -56,20 +55,20 @@ export default function OnboardingModalSlide({
 
     return (
       <div className={styles.heroLogoCircle}>
-        {slideDefinition.hero.type === 'rocket' && (
+        {slideDefinition.hero.type === "rocket" && (
           <LocalIcon icon="rocket-launch" width={64} height={64} className={styles.heroIcon} />
         )}
-        {slideDefinition.hero.type === 'shield' && (
+        {slideDefinition.hero.type === "shield" && (
           <LocalIcon icon="verified-user-outline" width={64} height={64} className={styles.heroIcon} />
         )}
-        {slideDefinition.hero.type === 'lock' && (
+        {slideDefinition.hero.type === "lock" && (
           <LocalIcon icon="lock-outline" width={64} height={64} className={styles.heroIcon} />
         )}
-        {slideDefinition.hero.type === 'analytics' && (
+        {slideDefinition.hero.type === "analytics" && (
           <LocalIcon icon="analytics" width={64} height={64} className={styles.heroIcon} />
         )}
-        {slideDefinition.hero.type === 'diamond' && <DiamondOutlinedIcon sx={{ fontSize: 64, color: '#000000' }} />}
-        {slideDefinition.hero.type === 'logo' && (
+        {slideDefinition.hero.type === "diamond" && <DiamondOutlinedIcon sx={{ fontSize: 64, color: "#000000" }} />}
+        {slideDefinition.hero.type === "logo" && (
           <img src={`${BASE_PATH}/branding/StirlingPDFLogoNoTextLightHC.svg`} alt="Stirling logo" />
         )}
       </div>
@@ -88,8 +87,8 @@ export default function OnboardingModalSlide({
       withCloseButton={false}
       zIndex={Z_INDEX_OVER_FULLSCREEN_SURFACE}
       styles={{
-        body: { padding: 0, maxHeight: '90vh', overflow: 'hidden' },
-        content: { overflow: 'hidden', border: 'none', background: 'var(--bg-surface)', maxHeight: '90vh' },
+        body: { padding: 0, maxHeight: "90vh", overflow: "hidden" },
+        content: { overflow: "hidden", border: "none", background: "var(--bg-surface)", maxHeight: "90vh" },
       }}
     >
       <Stack gap={0} className={styles.modalContent}>
@@ -106,18 +105,18 @@ export default function OnboardingModalSlide({
               radius="md"
               size={36}
               style={{
-                position: 'absolute',
+                position: "absolute",
                 top: 16,
                 right: 16,
-                backgroundColor: 'rgba(255, 255, 255, 0.2)',
-                color: 'white',
-                backdropFilter: 'blur(4px)',
+                backgroundColor: "rgba(255, 255, 255, 0.2)",
+                color: "white",
+                backdropFilter: "blur(4px)",
                 zIndex: 10,
               }}
               styles={{
                 root: {
-                  '&:hover': {
-                    backgroundColor: 'rgba(255, 255, 255, 0.3)',
+                  "&:hover": {
+                    backgroundColor: "rgba(255, 255, 255, 0.3)",
                   },
                 },
               }}
@@ -130,12 +129,9 @@ export default function OnboardingModalSlide({
           </div>
         </div>
 
-        <div className={styles.modalBody} style={{ overflowY: 'auto', maxHeight: 'calc(90vh - 220px)' }}>
+        <div className={styles.modalBody} style={{ overflowY: "auto", maxHeight: "calc(90vh - 220px)" }}>
           <Stack gap={16}>
-            <div
-              key={`title-${slideContent.key}`}
-              className={`${styles.title} ${styles.titleText}`}
-            >
+            <div key={`title-${slideContent.key}`} className={`${styles.title} ${styles.titleText}`}>
               {slideContent.title}
             </div>
 
@@ -146,9 +142,7 @@ export default function OnboardingModalSlide({
               <style>{`div strong{color: var(--onboarding-title); font-weight: 600;}`}</style>
             </div>
 
-            {modalSlideCount > 1 && (
-              <OnboardingStepper totalSteps={modalSlideCount} activeStep={currentModalSlideIndex} />
-            )}
+            {modalSlideCount > 1 && <OnboardingStepper totalSteps={modalSlideCount} activeStep={currentModalSlideIndex} />}
 
             <div className={styles.buttonContainer}>
               <SlideButtons
@@ -164,4 +158,3 @@ export default function OnboardingModalSlide({
     </Modal>
   );
 }
-
diff --git a/frontend/src/core/components/onboarding/OnboardingStepper.tsx b/frontend/src/core/components/onboarding/OnboardingStepper.tsx
index ec6767d8ad..23c37643da 100644
--- a/frontend/src/core/components/onboarding/OnboardingStepper.tsx
+++ b/frontend/src/core/components/onboarding/OnboardingStepper.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 interface OnboardingStepperProps {
   totalSteps: number;
@@ -17,18 +17,16 @@ export function OnboardingStepper({ totalSteps, activeStep, className }: Onboard
     <div
       className={className}
       style={{
-        display: 'flex',
+        display: "flex",
         gap: 8,
-        alignItems: 'center',
-        justifyContent: 'center',
+        alignItems: "center",
+        justifyContent: "center",
       }}
     >
       {items.map((index) => {
         const isActive = index === activeStep;
         const baseStyles: React.CSSProperties = {
-          background: isActive
-            ? 'var(--onboarding-step-active)'
-            : 'var(--onboarding-step-inactive)',
+          background: isActive ? "var(--onboarding-step-active)" : "var(--onboarding-step-inactive)",
         };
 
         return (
@@ -48,5 +46,3 @@ export function OnboardingStepper({ totalSteps, activeStep, className }: Onboard
 }
 
 export default OnboardingStepper;
-
-
diff --git a/frontend/src/core/components/onboarding/OnboardingTour.css b/frontend/src/core/components/onboarding/OnboardingTour.css
index 54ad69d68d..a1cbd4f3d8 100644
--- a/frontend/src/core/components/onboarding/OnboardingTour.css
+++ b/frontend/src/core/components/onboarding/OnboardingTour.css
@@ -18,7 +18,8 @@
 }
 
 @keyframes pulse-glow {
-  0%, 100% {
+  0%,
+  100% {
     box-shadow:
       0 0 0 3px var(--mantine-primary-color-filled),
       0 0 20px var(--mantine-primary-color-filled),
@@ -33,13 +34,13 @@
 }
 
 /* RTL: mirror step indicator and controls in Reactour popovers */
-:root[dir='rtl'] .reactour__popover {
+:root[dir="rtl"] .reactour__popover {
   direction: rtl;
 }
 
 /* Minimal overrides retained for glow only */
 
-:root[dir='rtl'] .reactour__badge {
+:root[dir="rtl"] .reactour__badge {
   left: auto;
   right: 16px;
 }
diff --git a/frontend/src/core/components/onboarding/OnboardingTour.tsx b/frontend/src/core/components/onboarding/OnboardingTour.tsx
index 85df0a9fdb..9ddb4e4c04 100644
--- a/frontend/src/core/components/onboarding/OnboardingTour.tsx
+++ b/frontend/src/core/components/onboarding/OnboardingTour.tsx
@@ -1,19 +1,19 @@
 /**
  * OnboardingTour Component
- * 
+ *
  * Reusable tour wrapper that encapsulates all Reactour configuration.
  * Used by the main Onboarding component for both the 'tour' step and
  * when the tour is open but onboarding is inactive.
  */
 
-import React from 'react';
-import { TourProvider, useTour, type StepType } from '@reactour/tour';
-import { CloseButton, ActionIcon } from '@mantine/core';
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import CheckIcon from '@mui/icons-material/Check';
-import type { TFunction } from 'i18next';
-import i18n from '@app/i18n';
+import React from "react";
+import { TourProvider, useTour, type StepType } from "@reactour/tour";
+import { CloseButton, ActionIcon } from "@mantine/core";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import CheckIcon from "@mui/icons-material/Check";
+import type { TFunction } from "i18next";
+import i18n from "@app/i18n";
 
 /**
  * TourContent - Controls the tour visibility
@@ -49,7 +49,7 @@ interface CloseArgs {
 
 interface OnboardingTourProps {
   tourSteps: StepType[];
-  tourType: 'admin' | 'tools' | 'whatsnew';
+  tourType: "admin" | "tools" | "whatsnew";
   isRTL: boolean;
   t: TFunction;
   isOpen: boolean;
@@ -57,22 +57,14 @@ interface OnboardingTourProps {
   onClose: (args: CloseArgs) => void;
 }
 
-export default function OnboardingTour({
-  tourSteps,
-  tourType,
-  isRTL,
-  t,
-  isOpen,
-  onAdvance,
-  onClose,
-}: OnboardingTourProps) {
+export default function OnboardingTour({ tourSteps, tourType, isRTL, t, isOpen, onAdvance, onClose }: OnboardingTourProps) {
   if (!isOpen) return null;
 
   return (
     <TourProvider
       key={`${tourType}-${i18n.language}`}
       steps={tourSteps}
-      maskClassName={tourType === 'admin' ? 'admin-tour-mask' : undefined}
+      maskClassName={tourType === "admin" ? "admin-tour-mask" : undefined}
       onClickClose={onClose}
       onClickMask={onAdvance}
       onClickHighlighted={(e, clickProps) => {
@@ -80,10 +72,10 @@ export default function OnboardingTour({
         onAdvance(clickProps);
       }}
       keyboardHandler={(e, clickProps, status) => {
-        if (e.key === 'ArrowRight' && !status?.isRightDisabled && clickProps) {
+        if (e.key === "ArrowRight" && !status?.isRightDisabled && clickProps) {
           e.preventDefault();
           onAdvance(clickProps);
-        } else if (e.key === 'Escape' && !status?.isEscDisabled && clickProps) {
+        } else if (e.key === "Escape" && !status?.isEscDisabled && clickProps) {
           e.preventDefault();
           onClose(clickProps);
         }
@@ -92,12 +84,12 @@ export default function OnboardingTour({
       styles={{
         popover: (base) => ({
           ...base,
-          backgroundColor: 'var(--mantine-color-body)',
-          color: 'var(--mantine-color-text)',
-          borderRadius: '8px',
-          padding: '20px',
-          boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)',
-          maxWidth: '400px',
+          backgroundColor: "var(--mantine-color-body)",
+          color: "var(--mantine-color-text)",
+          borderRadius: "8px",
+          padding: "20px",
+          boxShadow: "0 4px 12px rgba(0, 0, 0, 0.15)",
+          maxWidth: "400px",
         }),
         maskArea: (base) => ({
           ...base,
@@ -105,11 +97,11 @@ export default function OnboardingTour({
         }),
         badge: (base) => ({
           ...base,
-          backgroundColor: 'var(--mantine-primary-color-filled)',
+          backgroundColor: "var(--mantine-primary-color-filled)",
         }),
         controls: (base) => ({
           ...base,
-          justifyContent: 'center',
+          justifyContent: "center",
         }),
       }}
       highlightedMaskClassName="tour-highlight-glow"
@@ -127,7 +119,7 @@ export default function OnboardingTour({
             onClick={() => onAdvance({ setCurrentStep, currentStep: tourCurrentStep, steps: tourSteps, setIsOpen })}
             variant="subtle"
             size="lg"
-            aria-label={isLast ? t('onboarding.finish', 'Finish') : t('onboarding.next', 'Next')}
+            aria-label={isLast ? t("onboarding.finish", "Finish") : t("onboarding.next", "Next")}
           >
             {isLast ? <CheckIcon /> : <ArrowIcon />}
           </ActionIcon>
@@ -135,10 +127,10 @@ export default function OnboardingTour({
       }}
       components={{
         Close: ({ onClick }) => (
-          <CloseButton onClick={onClick} size="md" style={{ position: 'absolute', top: '8px', right: '8px' }} />
+          <CloseButton onClick={onClick} size="md" style={{ position: "absolute", top: "8px", right: "8px" }} />
         ),
         Content: ({ content }: { content: string }) => (
-          <div style={{ paddingRight: '16px' }} dangerouslySetInnerHTML={{ __html: content }} />
+          <div style={{ paddingRight: "16px" }} dangerouslySetInnerHTML={{ __html: content }} />
         ),
       }}
     >
@@ -148,4 +140,3 @@ export default function OnboardingTour({
 }
 
 export type { AdvanceArgs, CloseArgs };
-
diff --git a/frontend/src/core/components/onboarding/adminStepsConfig.ts b/frontend/src/core/components/onboarding/adminStepsConfig.ts
index b7a5c0b66c..7946c9fec7 100644
--- a/frontend/src/core/components/onboarding/adminStepsConfig.ts
+++ b/frontend/src/core/components/onboarding/adminStepsConfig.ts
@@ -1,6 +1,6 @@
-import type { StepType } from '@reactour/tour';
-import type { TFunction } from 'i18next';
-import { addGlowToElements, removeAllGlows } from '@app/components/onboarding/tourGlow';
+import type { StepType } from "@reactour/tour";
+import type { TFunction } from "i18next";
+import { addGlowToElements, removeAllGlows } from "@app/components/onboarding/tourGlow";
 
 export enum AdminTourStep {
   WELCOME,
@@ -14,7 +14,7 @@ export enum AdminTourStep {
   WRAP_UP,
 }
 
-interface AdminStepActions {  
+interface AdminStepActions {
   saveAdminState: () => void;
   openConfigModal: () => void;
   navigateToSection: (section: string) => void;
@@ -32,8 +32,11 @@ export function createAdminStepsConfig({ t, actions }: CreateAdminStepsConfigArg
   return {
     [AdminTourStep.WELCOME]: {
       selector: '[data-tour="config-button"]',
-      content: t('adminOnboarding.welcome', "Welcome to the <strong>Admin Tour</strong>! Let's explore the powerful enterprise features and settings available to system administrators."),
-      position: 'right',
+      content: t(
+        "adminOnboarding.welcome",
+        "Welcome to the <strong>Admin Tour</strong>! Let's explore the powerful enterprise features and settings available to system administrators.",
+      ),
+      position: "right",
       padding: 10,
       action: () => {
         saveAdminState();
@@ -41,17 +44,23 @@ export function createAdminStepsConfig({ t, actions }: CreateAdminStepsConfigArg
     },
     [AdminTourStep.CONFIG_BUTTON]: {
       selector: '[data-tour="config-button"]',
-      content: t('adminOnboarding.configButton', "Click the <strong>Config</strong> button to access all system settings and administrative controls."),
-      position: 'right',
+      content: t(
+        "adminOnboarding.configButton",
+        "Click the <strong>Config</strong> button to access all system settings and administrative controls.",
+      ),
+      position: "right",
       padding: 10,
       actionAfter: () => {
         openConfigModal();
       },
     },
     [AdminTourStep.SETTINGS_OVERVIEW]: {
-      selector: '.modal-nav',
-      content: t('adminOnboarding.settingsOverview', "This is the <strong>Settings Panel</strong>. Admin settings are organised by category for easy navigation."),
-      position: 'right',
+      selector: ".modal-nav",
+      content: t(
+        "adminOnboarding.settingsOverview",
+        "This is the <strong>Settings Panel</strong>. Admin settings are organised by category for easy navigation.",
+      ),
+      position: "right",
       padding: 0,
       action: () => {
         removeAllGlows();
@@ -59,41 +68,68 @@ export function createAdminStepsConfig({ t, actions }: CreateAdminStepsConfigArg
     },
     [AdminTourStep.TEAMS_AND_USERS]: {
       selector: '[data-tour="admin-people-nav"]',
-      highlightedSelectors: ['[data-tour="admin-people-nav"]', '[data-tour="admin-teams-nav"]', '[data-tour="settings-content-area"]'],
-      content: t('adminOnboarding.teamsAndUsers', "Manage <strong>Teams</strong> and individual users here. You can invite new users via email, shareable links, or create custom accounts for them yourself."),
-      position: 'right',
+      highlightedSelectors: [
+        '[data-tour="admin-people-nav"]',
+        '[data-tour="admin-teams-nav"]',
+        '[data-tour="settings-content-area"]',
+      ],
+      content: t(
+        "adminOnboarding.teamsAndUsers",
+        "Manage <strong>Teams</strong> and individual users here. You can invite new users via email, shareable links, or create custom accounts for them yourself.",
+      ),
+      position: "right",
       padding: 10,
       action: () => {
         removeAllGlows();
-        navigateToSection('people');
+        navigateToSection("people");
         setTimeout(() => {
-          addGlowToElements(['[data-tour="admin-people-nav"]', '[data-tour="admin-teams-nav"]', '[data-tour="settings-content-area"]']);
+          addGlowToElements([
+            '[data-tour="admin-people-nav"]',
+            '[data-tour="admin-teams-nav"]',
+            '[data-tour="settings-content-area"]',
+          ]);
         }, 100);
       },
     },
     [AdminTourStep.SYSTEM_CUSTOMIZATION]: {
       selector: '[data-tour="admin-adminGeneral-nav"]',
-      highlightedSelectors: ['[data-tour="admin-adminGeneral-nav"]', '[data-tour="admin-adminFeatures-nav"]', '[data-tour="admin-adminEndpoints-nav"]', '[data-tour="settings-content-area"]'],
-      content: t('adminOnboarding.systemCustomization', "We have extensive ways to customise the UI: <strong>System Settings</strong> let you change the app name and languages, <strong>Features</strong> allows server certificate management, and <strong>Endpoints</strong> lets you enable or disable specific tools for your users."),
-      position: 'right',
+      highlightedSelectors: [
+        '[data-tour="admin-adminGeneral-nav"]',
+        '[data-tour="admin-adminFeatures-nav"]',
+        '[data-tour="admin-adminEndpoints-nav"]',
+        '[data-tour="settings-content-area"]',
+      ],
+      content: t(
+        "adminOnboarding.systemCustomization",
+        "We have extensive ways to customise the UI: <strong>System Settings</strong> let you change the app name and languages, <strong>Features</strong> allows server certificate management, and <strong>Endpoints</strong> lets you enable or disable specific tools for your users.",
+      ),
+      position: "right",
       padding: 10,
       action: () => {
         removeAllGlows();
-        navigateToSection('adminGeneral');
+        navigateToSection("adminGeneral");
         setTimeout(() => {
-          addGlowToElements(['[data-tour="admin-adminGeneral-nav"]', '[data-tour="admin-adminFeatures-nav"]', '[data-tour="admin-adminEndpoints-nav"]', '[data-tour="settings-content-area"]']);
+          addGlowToElements([
+            '[data-tour="admin-adminGeneral-nav"]',
+            '[data-tour="admin-adminFeatures-nav"]',
+            '[data-tour="admin-adminEndpoints-nav"]',
+            '[data-tour="settings-content-area"]',
+          ]);
         }, 100);
       },
     },
     [AdminTourStep.DATABASE_SECTION]: {
       selector: '[data-tour="admin-adminDatabase-nav"]',
       highlightedSelectors: ['[data-tour="admin-adminDatabase-nav"]', '[data-tour="settings-content-area"]'],
-      content: t('adminOnboarding.databaseSection', "For advanced production environments, we have settings to allow <strong>external database hookups</strong> so you can integrate with your existing infrastructure."),
-      position: 'right',
+      content: t(
+        "adminOnboarding.databaseSection",
+        "For advanced production environments, we have settings to allow <strong>external database hookups</strong> so you can integrate with your existing infrastructure.",
+      ),
+      position: "right",
       padding: 10,
       action: () => {
         removeAllGlows();
-        navigateToSection('adminDatabase');
+        navigateToSection("adminDatabase");
         setTimeout(() => {
           addGlowToElements(['[data-tour="admin-adminDatabase-nav"]', '[data-tour="settings-content-area"]']);
         }, 100);
@@ -102,38 +138,55 @@ export function createAdminStepsConfig({ t, actions }: CreateAdminStepsConfigArg
     [AdminTourStep.CONNECTIONS_SECTION]: {
       selector: '[data-tour="admin-adminConnections-nav"]',
       highlightedSelectors: ['[data-tour="admin-adminConnections-nav"]', '[data-tour="settings-content-area"]'],
-      content: t('adminOnboarding.connectionsSection', "The <strong>Connections</strong> section supports various login methods including custom SSO and SAML providers like Google and GitHub, plus email integrations for notifications and communications."),
-      position: 'right',
+      content: t(
+        "adminOnboarding.connectionsSection",
+        "The <strong>Connections</strong> section supports various login methods including custom SSO and SAML providers like Google and GitHub, plus email integrations for notifications and communications.",
+      ),
+      position: "right",
       padding: 10,
       action: () => {
         removeAllGlows();
-        navigateToSection('adminConnections');
+        navigateToSection("adminConnections");
         setTimeout(() => {
           addGlowToElements(['[data-tour="admin-adminConnections-nav"]', '[data-tour="settings-content-area"]']);
         }, 100);
       },
       actionAfter: async () => {
-        await scrollNavToSection('adminAudit');
+        await scrollNavToSection("adminAudit");
       },
     },
     [AdminTourStep.ADMIN_TOOLS]: {
       selector: '[data-tour="admin-adminAudit-nav"]',
-      highlightedSelectors: ['[data-tour="admin-adminAudit-nav"]', '[data-tour="admin-adminUsage-nav"]', '[data-tour="settings-content-area"]'],
-      content: t('adminOnboarding.adminTools', "Finally, we have advanced administration tools like <strong>Auditing</strong> to track system activity and <strong>Usage Analytics</strong> to monitor how your users interact with the platform."),
-      position: 'right',
+      highlightedSelectors: [
+        '[data-tour="admin-adminAudit-nav"]',
+        '[data-tour="admin-adminUsage-nav"]',
+        '[data-tour="settings-content-area"]',
+      ],
+      content: t(
+        "adminOnboarding.adminTools",
+        "Finally, we have advanced administration tools like <strong>Auditing</strong> to track system activity and <strong>Usage Analytics</strong> to monitor how your users interact with the platform.",
+      ),
+      position: "right",
       padding: 10,
       action: () => {
         removeAllGlows();
-        navigateToSection('adminAudit');
+        navigateToSection("adminAudit");
         setTimeout(() => {
-          addGlowToElements(['[data-tour="admin-adminAudit-nav"]', '[data-tour="admin-adminUsage-nav"]', '[data-tour="settings-content-area"]']);
+          addGlowToElements([
+            '[data-tour="admin-adminAudit-nav"]',
+            '[data-tour="admin-adminUsage-nav"]',
+            '[data-tour="settings-content-area"]',
+          ]);
         }, 100);
       },
     },
     [AdminTourStep.WRAP_UP]: {
       selector: '[data-tour="help-button"]',
-      content: t('adminOnboarding.wrapUp', "That's the admin tour! You've seen the enterprise features that make Stirling PDF a powerful, customisable solution for organisations. Access this tour anytime from the <strong>Help</strong> menu."),
-      position: 'right',
+      content: t(
+        "adminOnboarding.wrapUp",
+        "That's the admin tour! You've seen the enterprise features that make Stirling PDF a powerful, customisable solution for organisations. Access this tour anytime from the <strong>Help</strong> menu.",
+      ),
+      position: "right",
       padding: 10,
       action: () => {
         removeAllGlows();
@@ -141,4 +194,3 @@ export function createAdminStepsConfig({ t, actions }: CreateAdminStepsConfigArg
     },
   };
 }
-
diff --git a/frontend/src/core/components/onboarding/onboardingFlowConfig.ts b/frontend/src/core/components/onboarding/onboardingFlowConfig.ts
index 101fb13eef..c569954cdb 100644
--- a/frontend/src/core/components/onboarding/onboardingFlowConfig.ts
+++ b/frontend/src/core/components/onboarding/onboardingFlowConfig.ts
@@ -1,45 +1,45 @@
-import WelcomeSlide from '@app/components/onboarding/slides/WelcomeSlide';
-import DesktopInstallSlide from '@app/components/onboarding/slides/DesktopInstallSlide';
-import SecurityCheckSlide from '@app/components/onboarding/slides/SecurityCheckSlide';
-import PlanOverviewSlide from '@app/components/onboarding/slides/PlanOverviewSlide';
-import ServerLicenseSlide from '@app/components/onboarding/slides/ServerLicenseSlide';
-import FirstLoginSlide from '@app/components/onboarding/slides/FirstLoginSlide';
-import TourOverviewSlide from '@app/components/onboarding/slides/TourOverviewSlide';
-import AnalyticsChoiceSlide from '@app/components/onboarding/slides/AnalyticsChoiceSlide';
-import MFASetupSlide from '@app/components/onboarding/slides/MFASetupSlide';
-import { SlideConfig, LicenseNotice } from '@app/types/types';
+import WelcomeSlide from "@app/components/onboarding/slides/WelcomeSlide";
+import DesktopInstallSlide from "@app/components/onboarding/slides/DesktopInstallSlide";
+import SecurityCheckSlide from "@app/components/onboarding/slides/SecurityCheckSlide";
+import PlanOverviewSlide from "@app/components/onboarding/slides/PlanOverviewSlide";
+import ServerLicenseSlide from "@app/components/onboarding/slides/ServerLicenseSlide";
+import FirstLoginSlide from "@app/components/onboarding/slides/FirstLoginSlide";
+import TourOverviewSlide from "@app/components/onboarding/slides/TourOverviewSlide";
+import AnalyticsChoiceSlide from "@app/components/onboarding/slides/AnalyticsChoiceSlide";
+import MFASetupSlide from "@app/components/onboarding/slides/MFASetupSlide";
+import { SlideConfig, LicenseNotice } from "@app/types/types";
 
 export type SlideId =
-  | 'first-login'
-  | 'welcome'
-  | 'desktop-install'
-  | 'security-check'
-  | 'admin-overview'
-  | 'server-license'
-  | 'tour-overview'
-  | 'analytics-choice'
-  | 'mfa-setup';
+  | "first-login"
+  | "welcome"
+  | "desktop-install"
+  | "security-check"
+  | "admin-overview"
+  | "server-license"
+  | "tour-overview"
+  | "analytics-choice"
+  | "mfa-setup";
 
-export type HeroType = 'rocket' | 'dual-icon' | 'shield' | 'diamond' | 'logo' | 'lock' | 'analytics';
+export type HeroType = "rocket" | "dual-icon" | "shield" | "diamond" | "logo" | "lock" | "analytics";
 
 export type ButtonAction =
-  | 'next'
-  | 'prev'
-  | 'close'
-  | 'complete-close'
-  | 'download-selected'
-  | 'security-next'
-  | 'launch-admin'
-  | 'launch-tools'
-  | 'launch-auto'
-  | 'see-plans'
-  | 'skip-to-license'
-  | 'skip-tour'
-  | 'enable-analytics'
-  | 'disable-analytics';
+  | "next"
+  | "prev"
+  | "close"
+  | "complete-close"
+  | "download-selected"
+  | "security-next"
+  | "launch-admin"
+  | "launch-tools"
+  | "launch-auto"
+  | "see-plans"
+  | "skip-to-license"
+  | "skip-tour"
+  | "enable-analytics"
+  | "disable-analytics";
 
 export interface FlowState {
-  selectedRole: 'admin' | 'user' | null;
+  selectedRole: "admin" | "user" | null;
 }
 
 export interface OSOption {
@@ -53,8 +53,8 @@ export interface SlideFactoryParams {
   osUrl: string;
   osOptions?: OSOption[];
   onDownloadUrlChange?: (url: string) => void;
-  selectedRole: 'admin' | 'user' | null;
-  onRoleSelect: (role: 'admin' | 'user' | null) => void;
+  selectedRole: "admin" | "user" | null;
+  onRoleSelect: (role: "admin" | "user" | null) => void;
   licenseNotice?: LicenseNotice;
   loginEnabled?: boolean;
   // First login params
@@ -72,11 +72,11 @@ export interface HeroDefinition {
 
 export interface ButtonDefinition {
   key: string;
-  type: 'button' | 'icon';
+  type: "button" | "icon";
   label?: string;
-  icon?: 'chevron-left';
-  variant?: 'primary' | 'secondary' | 'default';
-  group: 'left' | 'right';
+  icon?: "chevron-left";
+  variant?: "primary" | "secondary" | "default";
+  group: "left" | "right";
   action: ButtonAction;
   disabledWhen?: (state: FlowState) => boolean;
 }
@@ -89,206 +89,204 @@ export interface SlideDefinition {
 }
 
 export const SLIDE_DEFINITIONS: Record<SlideId, SlideDefinition> = {
-  'first-login': {
-    id: 'first-login',
+  "first-login": {
+    id: "first-login",
     createSlide: ({ firstLoginUsername, onPasswordChanged, usingDefaultCredentials }) =>
       FirstLoginSlide({
-        username: firstLoginUsername || '',
+        username: firstLoginUsername || "",
         onPasswordChanged: onPasswordChanged || (() => {}),
         usingDefaultCredentials: usingDefaultCredentials || false,
       }),
-    hero: { type: 'lock' },
+    hero: { type: "lock" },
     buttons: [], // Form has its own submit button
   },
-  'welcome': {
-    id: 'welcome',
+  welcome: {
+    id: "welcome",
     createSlide: () => WelcomeSlide(),
-    hero: { type: 'rocket' },
+    hero: { type: "rocket" },
     buttons: [
       {
-        key: 'welcome-next',
-        type: 'button',
-        label: 'onboarding.buttons.next',
-        variant: 'primary',
-        group: 'right',
-        action: 'next',
+        key: "welcome-next",
+        type: "button",
+        label: "onboarding.buttons.next",
+        variant: "primary",
+        group: "right",
+        action: "next",
       },
     ],
   },
-  'desktop-install': {
-    id: 'desktop-install',
-    createSlide: ({ osLabel, osUrl, osOptions, onDownloadUrlChange }) => DesktopInstallSlide({ osLabel, osUrl, osOptions, onDownloadUrlChange }),
-    hero: { type: 'dual-icon' },
+  "desktop-install": {
+    id: "desktop-install",
+    createSlide: ({ osLabel, osUrl, osOptions, onDownloadUrlChange }) =>
+      DesktopInstallSlide({ osLabel, osUrl, osOptions, onDownloadUrlChange }),
+    hero: { type: "dual-icon" },
     buttons: [
       {
-        key: 'desktop-back',
-        type: 'icon',
-        icon: 'chevron-left',
-        group: 'left',
-        action: 'prev',
+        key: "desktop-back",
+        type: "icon",
+        icon: "chevron-left",
+        group: "left",
+        action: "prev",
       },
       {
-        key: 'desktop-skip',
-        type: 'button',
-        label: 'onboarding.buttons.skipForNow',
-        variant: 'secondary',
-        group: 'left',
-        action: 'next',
+        key: "desktop-skip",
+        type: "button",
+        label: "onboarding.buttons.skipForNow",
+        variant: "secondary",
+        group: "left",
+        action: "next",
       },
       {
-        key: 'desktop-download',
-        type: 'button',
-        label: 'onboarding.buttons.download',
-        variant: 'primary',
-        group: 'right',
-        action: 'download-selected',
+        key: "desktop-download",
+        type: "button",
+        label: "onboarding.buttons.download",
+        variant: "primary",
+        group: "right",
+        action: "download-selected",
       },
     ],
   },
-  'security-check': {
-    id: 'security-check',
-    createSlide: ({ selectedRole, onRoleSelect }) =>
-      SecurityCheckSlide({ selectedRole, onRoleSelect }),
-    hero: { type: 'shield' },
+  "security-check": {
+    id: "security-check",
+    createSlide: ({ selectedRole, onRoleSelect }) => SecurityCheckSlide({ selectedRole, onRoleSelect }),
+    hero: { type: "shield" },
     buttons: [
       {
-        key: 'security-back',
-        type: 'button',
-        label: 'onboarding.buttons.back',
-        variant: 'secondary',
-        group: 'left',
-        action: 'prev',
+        key: "security-back",
+        type: "button",
+        label: "onboarding.buttons.back",
+        variant: "secondary",
+        group: "left",
+        action: "prev",
       },
       {
-        key: 'security-next',
-        type: 'button',
-        label: 'onboarding.buttons.next',
-        variant: 'primary',
-        group: 'right',
-        action: 'security-next',
+        key: "security-next",
+        type: "button",
+        label: "onboarding.buttons.next",
+        variant: "primary",
+        group: "right",
+        action: "security-next",
         disabledWhen: (state) => !state.selectedRole,
       },
     ],
   },
-  'admin-overview': {
-    id: 'admin-overview',
-    createSlide: ({ licenseNotice, loginEnabled }) =>
-      PlanOverviewSlide({ isAdmin: true, licenseNotice, loginEnabled }),
-    hero: { type: 'diamond' },
+  "admin-overview": {
+    id: "admin-overview",
+    createSlide: ({ licenseNotice, loginEnabled }) => PlanOverviewSlide({ isAdmin: true, licenseNotice, loginEnabled }),
+    hero: { type: "diamond" },
     buttons: [
       {
-        key: 'admin-back',
-        type: 'icon',
-        icon: 'chevron-left',
-        group: 'left',
-        action: 'prev',
+        key: "admin-back",
+        type: "icon",
+        icon: "chevron-left",
+        group: "left",
+        action: "prev",
       },
       {
-        key: 'admin-show',
-        type: 'button',
-        label: 'onboarding.buttons.showMeAround',
-        variant: 'primary',
-        group: 'right',
-        action: 'launch-admin',
+        key: "admin-show",
+        type: "button",
+        label: "onboarding.buttons.showMeAround",
+        variant: "primary",
+        group: "right",
+        action: "launch-admin",
       },
       {
-        key: 'admin-skip',
-        type: 'button',
-        label: 'onboarding.buttons.skipTheTour',
-        variant: 'secondary',
-        group: 'left',
-        action: 'skip-to-license',
+        key: "admin-skip",
+        type: "button",
+        label: "onboarding.buttons.skipTheTour",
+        variant: "secondary",
+        group: "left",
+        action: "skip-to-license",
       },
     ],
   },
-  'server-license': {
-    id: 'server-license',
+  "server-license": {
+    id: "server-license",
     createSlide: ({ licenseNotice }) => ServerLicenseSlide({ licenseNotice }),
-    hero: { type: 'dual-icon' },
+    hero: { type: "dual-icon" },
     buttons: [
       {
-        key: 'license-back',
-        type: 'icon',
-        icon: 'chevron-left',
-        group: 'left',
-        action: 'prev',
+        key: "license-back",
+        type: "icon",
+        icon: "chevron-left",
+        group: "left",
+        action: "prev",
       },
       {
-        key: 'license-close',
-        type: 'button',
-        label: 'onboarding.buttons.skipForNow',
-        variant: 'secondary',
-        group: 'left',
-        action: 'close',
+        key: "license-close",
+        type: "button",
+        label: "onboarding.buttons.skipForNow",
+        variant: "secondary",
+        group: "left",
+        action: "close",
       },
       {
-        key: 'license-see-plans',
-        type: 'button',
-        label: 'onboarding.serverLicense.seePlans',
-        variant: 'primary',
-        group: 'right',
-        action: 'see-plans',
+        key: "license-see-plans",
+        type: "button",
+        label: "onboarding.serverLicense.seePlans",
+        variant: "primary",
+        group: "right",
+        action: "see-plans",
       },
     ],
   },
-  'tour-overview': {
-    id: 'tour-overview',
+  "tour-overview": {
+    id: "tour-overview",
     createSlide: () => TourOverviewSlide(),
-    hero: { type: 'rocket' },
+    hero: { type: "rocket" },
     buttons: [
       {
-        key: 'tour-overview-back',
-        type: 'icon',
-        icon: 'chevron-left',
-        group: 'left',
-        action: 'prev',
+        key: "tour-overview-back",
+        type: "icon",
+        icon: "chevron-left",
+        group: "left",
+        action: "prev",
       },
       {
-        key: 'tour-overview-skip',
-        type: 'button',
-        label: 'onboarding.buttons.skipForNow',
-        variant: 'secondary',
-        group: 'left',
-        action: 'skip-tour',
+        key: "tour-overview-skip",
+        type: "button",
+        label: "onboarding.buttons.skipForNow",
+        variant: "secondary",
+        group: "left",
+        action: "skip-tour",
       },
       {
-        key: 'tour-overview-show',
-        type: 'button',
-        label: 'onboarding.buttons.showMeAround',
-        variant: 'primary',
-        group: 'right',
-        action: 'launch-tools',
+        key: "tour-overview-show",
+        type: "button",
+        label: "onboarding.buttons.showMeAround",
+        variant: "primary",
+        group: "right",
+        action: "launch-tools",
       },
     ],
   },
-  'analytics-choice': {
-    id: 'analytics-choice',
+  "analytics-choice": {
+    id: "analytics-choice",
     createSlide: ({ analyticsError }) => AnalyticsChoiceSlide({ analyticsError }),
-    hero: { type: 'analytics' },
+    hero: { type: "analytics" },
     buttons: [
       {
-        key: 'analytics-disable',
-        type: 'button',
-        label: 'no',
-        variant: 'secondary',
-        group: 'left',
-        action: 'disable-analytics',
+        key: "analytics-disable",
+        type: "button",
+        label: "no",
+        variant: "secondary",
+        group: "left",
+        action: "disable-analytics",
       },
       {
-        key: 'analytics-enable',
-        type: 'button',
-        label: 'yes',
-        variant: 'primary',
-        group: 'right',
-        action: 'enable-analytics',
+        key: "analytics-enable",
+        type: "button",
+        label: "yes",
+        variant: "primary",
+        group: "right",
+        action: "enable-analytics",
       },
     ],
   },
-  'mfa-setup': {
-    id: 'mfa-setup',
+  "mfa-setup": {
+    id: "mfa-setup",
     createSlide: ({ onMfaSetupComplete = () => {} }: SlideFactoryParams) => MFASetupSlide({ onMfaSetupComplete }),
-    hero: { type: 'lock' },
+    hero: { type: "lock" },
     buttons: [], // Form has its own submit button
   },
 };
-
diff --git a/frontend/src/core/components/onboarding/orchestrator/onboardingConfig.ts b/frontend/src/core/components/onboarding/orchestrator/onboardingConfig.ts
index 9528694c3e..a4f06e4c72 100644
--- a/frontend/src/core/components/onboarding/orchestrator/onboardingConfig.ts
+++ b/frontend/src/core/components/onboarding/orchestrator/onboardingConfig.ts
@@ -1,23 +1,21 @@
 export type OnboardingStepId =
-  | 'first-login'
-  | 'welcome'
-  | 'desktop-install'
-  | 'security-check'
-  | 'admin-overview'
-  | 'tool-layout'
-  | 'tour-overview'
-  | 'server-license'
-  | 'analytics-choice'
-  | 'mfa-setup';
+  | "first-login"
+  | "welcome"
+  | "desktop-install"
+  | "security-check"
+  | "admin-overview"
+  | "tool-layout"
+  | "tour-overview"
+  | "server-license"
+  | "analytics-choice"
+  | "mfa-setup";
 
-export type OnboardingStepType =
-  | 'modal-slide'
-  | 'tool-prompt';
+export type OnboardingStepType = "modal-slide" | "tool-prompt";
 
 export interface OnboardingRuntimeState {
-  selectedRole: 'admin' | 'user' | null;
+  selectedRole: "admin" | "user" | null;
   tourRequested: boolean;
-  tourType: 'admin' | 'tools' | 'whatsnew';
+  tourType: "admin" | "tools" | "whatsnew";
   isDesktopApp: boolean;
   desktopSlideEnabled: boolean;
   analyticsNotConfigured: boolean;
@@ -43,14 +41,23 @@ export interface OnboardingStep {
   id: OnboardingStepId;
   type: OnboardingStepType;
   condition: (ctx: OnboardingConditionContext) => boolean;
-  slideId?: 'first-login' | 'welcome' | 'desktop-install' | 'security-check' | 'admin-overview' | 'server-license' | 'tour-overview' | 'analytics-choice' | 'mfa-setup';
+  slideId?:
+    | "first-login"
+    | "welcome"
+    | "desktop-install"
+    | "security-check"
+    | "admin-overview"
+    | "server-license"
+    | "tour-overview"
+    | "analytics-choice"
+    | "mfa-setup";
   allowDismiss?: boolean;
 }
 
 export const DEFAULT_RUNTIME_STATE: OnboardingRuntimeState = {
   selectedRole: null,
   tourRequested: false,
-  tourType: 'whatsnew',
+  tourType: "whatsnew",
   isDesktopApp: false,
   analyticsNotConfigured: false,
   analyticsEnabled: false,
@@ -61,7 +68,7 @@ export const DEFAULT_RUNTIME_STATE: OnboardingRuntimeState = {
     requiresLicense: false,
   },
   requiresPasswordChange: false,
-  firstLoginUsername: '',
+  firstLoginUsername: "",
   usingDefaultCredentials: false,
   desktopSlideEnabled: true,
   requiresMfaSetup: false,
@@ -69,59 +76,59 @@ export const DEFAULT_RUNTIME_STATE: OnboardingRuntimeState = {
 
 export const ONBOARDING_STEPS: OnboardingStep[] = [
   {
-    id: 'first-login',
-    type: 'modal-slide',
-    slideId: 'first-login',
+    id: "first-login",
+    type: "modal-slide",
+    slideId: "first-login",
     condition: (ctx) => ctx.requiresPasswordChange,
   },
   {
-    id: 'welcome',
-    type: 'modal-slide',
-    slideId: 'welcome',
+    id: "welcome",
+    type: "modal-slide",
+    slideId: "welcome",
     // Desktop has its own onboarding modal (DesktopOnboardingModal)
     condition: (ctx) => !ctx.isDesktopApp,
   },
   {
-    id: 'admin-overview',
-    type: 'modal-slide',
-    slideId: 'admin-overview',
+    id: "admin-overview",
+    type: "modal-slide",
+    slideId: "admin-overview",
     condition: (ctx) => ctx.effectiveIsAdmin,
   },
   {
-    id: 'desktop-install',
-    type: 'modal-slide',
-    slideId: 'desktop-install',
+    id: "desktop-install",
+    type: "modal-slide",
+    slideId: "desktop-install",
     condition: (ctx) => !ctx.isDesktopApp && ctx.desktopSlideEnabled,
   },
   {
-    id: 'security-check',
-    type: 'modal-slide',
-    slideId: 'security-check',
+    id: "security-check",
+    type: "modal-slide",
+    slideId: "security-check",
     condition: () => false,
   },
   {
-    id: 'tool-layout',
-    type: 'tool-prompt',
+    id: "tool-layout",
+    type: "tool-prompt",
     condition: () => false,
   },
   {
-    id: 'tour-overview',
-    type: 'modal-slide',
-    slideId: 'tour-overview',
-    condition: (ctx) => !ctx.effectiveIsAdmin && ctx.tourType !== 'admin' && !ctx.isDesktopApp,
+    id: "tour-overview",
+    type: "modal-slide",
+    slideId: "tour-overview",
+    condition: (ctx) => !ctx.effectiveIsAdmin && ctx.tourType !== "admin" && !ctx.isDesktopApp,
   },
   {
-    id: 'server-license',
-    type: 'modal-slide',
-    slideId: 'server-license',
+    id: "server-license",
+    type: "modal-slide",
+    slideId: "server-license",
     condition: (ctx) => ctx.effectiveIsAdmin && ctx.licenseNotice.requiresLicense,
   },
   {
-    id: 'mfa-setup',
-    type: 'modal-slide',
-    slideId: 'mfa-setup',
+    id: "mfa-setup",
+    type: "modal-slide",
+    slideId: "mfa-setup",
     condition: (ctx) => ctx.requiresMfaSetup,
-  }
+  },
 ];
 
 export function getStepById(id: OnboardingStepId): OnboardingStep | undefined {
@@ -131,4 +138,3 @@ export function getStepById(id: OnboardingStepId): OnboardingStep | undefined {
 export function getStepIndex(id: OnboardingStepId): number {
   return ONBOARDING_STEPS.findIndex((step) => step.id === id);
 }
-
diff --git a/frontend/src/core/components/onboarding/orchestrator/onboardingStorage.ts b/frontend/src/core/components/onboarding/orchestrator/onboardingStorage.ts
index 9e3065614a..08a8049a1b 100644
--- a/frontend/src/core/components/onboarding/orchestrator/onboardingStorage.ts
+++ b/frontend/src/core/components/onboarding/orchestrator/onboardingStorage.ts
@@ -1,62 +1,62 @@
-const STORAGE_PREFIX = 'onboarding';
+const STORAGE_PREFIX = "onboarding";
 const TOURS_TOOLTIP_KEY = `${STORAGE_PREFIX}::tours-tooltip-shown`;
 const ONBOARDING_COMPLETED_KEY = `${STORAGE_PREFIX}::completed`;
 
 export function isOnboardingCompleted(): boolean {
-  if (typeof window === 'undefined') return false;
+  if (typeof window === "undefined") return false;
   try {
-    return localStorage.getItem(ONBOARDING_COMPLETED_KEY) === 'true';
+    return localStorage.getItem(ONBOARDING_COMPLETED_KEY) === "true";
   } catch {
     return false;
   }
 }
 
 export function markOnboardingCompleted(): void {
-  if (typeof window === 'undefined') return;
+  if (typeof window === "undefined") return;
   try {
-    localStorage.setItem(ONBOARDING_COMPLETED_KEY, 'true');
+    localStorage.setItem(ONBOARDING_COMPLETED_KEY, "true");
   } catch (error) {
-    console.error('[onboardingStorage] Error marking onboarding as completed:', error);
+    console.error("[onboardingStorage] Error marking onboarding as completed:", error);
   }
 }
 
 export function resetOnboardingProgress(): void {
-  if (typeof window === 'undefined') return;
+  if (typeof window === "undefined") return;
   try {
     localStorage.removeItem(ONBOARDING_COMPLETED_KEY);
   } catch (error) {
-    console.error('[onboardingStorage] Error resetting onboarding progress:', error);
+    console.error("[onboardingStorage] Error resetting onboarding progress:", error);
   }
 }
 
 export function hasShownToursTooltip(): boolean {
-  if (typeof window === 'undefined') return false;
+  if (typeof window === "undefined") return false;
   try {
-    return localStorage.getItem(TOURS_TOOLTIP_KEY) === 'true';
+    return localStorage.getItem(TOURS_TOOLTIP_KEY) === "true";
   } catch {
     return false;
   }
 }
 
 export function markToursTooltipShown(): void {
-  if (typeof window === 'undefined') return;
+  if (typeof window === "undefined") return;
   try {
-    localStorage.setItem(TOURS_TOOLTIP_KEY, 'true');
+    localStorage.setItem(TOURS_TOOLTIP_KEY, "true");
   } catch (error) {
-    console.error('[onboardingStorage] Error marking tours tooltip as shown:', error);
+    console.error("[onboardingStorage] Error marking tours tooltip as shown:", error);
   }
 }
 
 export function migrateFromLegacyPreferences(): void {
-  if (typeof window === 'undefined') return;
+  if (typeof window === "undefined") return;
 
   const migrationKey = `${STORAGE_PREFIX}::migrated`;
 
   try {
     // Skip if already migrated
-    if (localStorage.getItem(migrationKey) === 'true') return;
+    if (localStorage.getItem(migrationKey) === "true") return;
 
-    const prefsRaw = localStorage.getItem('stirlingpdf_preferences');
+    const prefsRaw = localStorage.getItem("stirlingpdf_preferences");
     if (prefsRaw) {
       const prefs = JSON.parse(prefsRaw) as Record<string, unknown>;
 
@@ -67,7 +67,7 @@ export function migrateFromLegacyPreferences(): void {
     }
 
     // Mark migration complete
-    localStorage.setItem(migrationKey, 'true');
+    localStorage.setItem(migrationKey, "true");
   } catch {
     // If migration fails, onboarding will show again - safer than hiding it
   }
diff --git a/frontend/src/core/components/onboarding/orchestrator/useOnboardingOrchestrator.ts b/frontend/src/core/components/onboarding/orchestrator/useOnboardingOrchestrator.ts
index 54d1d2acf4..4fade3a3fc 100644
--- a/frontend/src/core/components/onboarding/orchestrator/useOnboardingOrchestrator.ts
+++ b/frontend/src/core/components/onboarding/orchestrator/useOnboardingOrchestrator.ts
@@ -1,7 +1,7 @@
-import { useState, useCallback, useMemo, useEffect, useRef } from 'react';
-import { useLocation } from 'react-router-dom';
-import { useServerExperience } from '@app/hooks/useServerExperience';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
+import { useState, useCallback, useMemo, useEffect, useRef } from "react";
+import { useLocation } from "react-router-dom";
+import { useServerExperience } from "@app/hooks/useServerExperience";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
 
 import {
   ONBOARDING_STEPS,
@@ -10,39 +10,40 @@ import {
   type OnboardingRuntimeState,
   type OnboardingConditionContext,
   DEFAULT_RUNTIME_STATE,
-} from '@app/components/onboarding/orchestrator/onboardingConfig';
+} from "@app/components/onboarding/orchestrator/onboardingConfig";
 import {
   isOnboardingCompleted,
   markOnboardingCompleted,
   migrateFromLegacyPreferences,
-} from '@app/components/onboarding/orchestrator/onboardingStorage';
-import { accountService } from '@app/services/accountService';
-import { useBypassOnboarding } from '@app/components/onboarding/useBypassOnboarding';
+} from "@app/components/onboarding/orchestrator/onboardingStorage";
+import { accountService } from "@app/services/accountService";
+import { useBypassOnboarding } from "@app/components/onboarding/useBypassOnboarding";
 
-const AUTH_ROUTES = ['/login', '/signup', '/auth', '/invite'];
-const SESSION_TOUR_REQUESTED = 'onboarding::session::tour-requested';
-const SESSION_TOUR_TYPE = 'onboarding::session::tour-type';
-const SESSION_SELECTED_ROLE = 'onboarding::session::selected-role';
+const AUTH_ROUTES = ["/login", "/signup", "/auth", "/invite"];
+const SESSION_TOUR_REQUESTED = "onboarding::session::tour-requested";
+const SESSION_TOUR_TYPE = "onboarding::session::tour-type";
+const SESSION_SELECTED_ROLE = "onboarding::session::selected-role";
 
 // Check if user has an auth token (to avoid flash before redirect)
 function hasAuthToken(): boolean {
-  if (typeof window === 'undefined') return false;
-  return !!localStorage.getItem('stirling_jwt');
+  if (typeof window === "undefined") return false;
+  return !!localStorage.getItem("stirling_jwt");
 }
 
 // Get initial runtime state from session storage (survives remounts)
 function getInitialRuntimeState(baseState: OnboardingRuntimeState): OnboardingRuntimeState {
-  if (typeof window === 'undefined') {
+  if (typeof window === "undefined") {
     return baseState;
   }
 
   try {
-    const tourRequested = sessionStorage.getItem(SESSION_TOUR_REQUESTED) === 'true';
+    const tourRequested = sessionStorage.getItem(SESSION_TOUR_REQUESTED) === "true";
     const sessionTourType = sessionStorage.getItem(SESSION_TOUR_TYPE);
-    const tourType = (sessionTourType === 'admin' || sessionTourType === 'tools' || sessionTourType === 'whatsnew')
-      ? sessionTourType
-      : 'whatsnew';
-    const selectedRole = sessionStorage.getItem(SESSION_SELECTED_ROLE) as 'admin' | 'user' | null;
+    const tourType =
+      sessionTourType === "admin" || sessionTourType === "tools" || sessionTourType === "whatsnew"
+        ? sessionTourType
+        : "whatsnew";
+    const selectedRole = sessionStorage.getItem(SESSION_SELECTED_ROLE) as "admin" | "user" | null;
 
     return {
       ...baseState,
@@ -56,11 +57,11 @@ function getInitialRuntimeState(baseState: OnboardingRuntimeState): OnboardingRu
 }
 
 function persistRuntimeState(state: Partial<OnboardingRuntimeState>): void {
-  if (typeof window === 'undefined') return;
+  if (typeof window === "undefined") return;
 
   try {
     if (state.tourRequested !== undefined) {
-      sessionStorage.setItem(SESSION_TOUR_REQUESTED, state.tourRequested ? 'true' : 'false');
+      sessionStorage.setItem(SESSION_TOUR_REQUESTED, state.tourRequested ? "true" : "false");
     }
     if (state.tourType !== undefined) {
       sessionStorage.setItem(SESSION_TOUR_TYPE, state.tourType);
@@ -73,12 +74,12 @@ function persistRuntimeState(state: Partial<OnboardingRuntimeState>): void {
       }
     }
   } catch (error) {
-    console.error('[useOnboardingOrchestrator] Error persisting runtime state:', error);
+    console.error("[useOnboardingOrchestrator] Error persisting runtime state:", error);
   }
 }
 
 function clearRuntimeStateSession(): void {
-  if (typeof window === 'undefined') return;
+  if (typeof window === "undefined") return;
 
   try {
     sessionStorage.removeItem(SESSION_TOUR_REQUESTED);
@@ -94,9 +95,9 @@ function parseMfaRequired(settings: string | null | undefined): boolean {
 
   try {
     const parsed = JSON.parse(settings) as { mfaRequired?: string };
-    return parsed.mfaRequired?.toLowerCase() === 'true';
+    return parsed.mfaRequired?.toLowerCase() === "true";
   } catch (error) {
-    console.warn('[useOnboardingOrchestrator] Failed to parse account settings JSON:', error);
+    console.warn("[useOnboardingOrchestrator] Failed to parse account settings JSON:", error);
     return false;
   }
 }
@@ -151,18 +152,14 @@ export interface UseOnboardingOrchestratorOptions {
   defaultRuntimeState?: OnboardingRuntimeState;
 }
 
-export function useOnboardingOrchestrator(
-  options?: UseOnboardingOrchestratorOptions
-): UseOnboardingOrchestratorResult {
+export function useOnboardingOrchestrator(options?: UseOnboardingOrchestratorOptions): UseOnboardingOrchestratorResult {
   const defaultState = options?.defaultRuntimeState ?? DEFAULT_RUNTIME_STATE;
   const serverExperience = useServerExperience();
   const { config, loading: configLoading } = useAppConfig();
   const location = useLocation();
   const bypassOnboarding = useBypassOnboarding();
 
-  const [runtimeState, setRuntimeState] = useState<OnboardingRuntimeState>(() =>
-    getInitialRuntimeState(defaultState)
-  );
+  const [runtimeState, setRuntimeState] = useState<OnboardingRuntimeState>(() => getInitialRuntimeState(defaultState));
   const [isPaused, setIsPaused] = useState(false);
   const [isInitialized, setIsInitialized] = useState(false);
   const [currentStepIndex, setCurrentStepIndex] = useState(-1);
@@ -186,10 +183,10 @@ export function useOnboardingOrchestrator(
         totalUsers: serverExperience.totalUsers,
         freeTierLimit: serverExperience.freeTierLimit,
         isOverLimit: serverExperience.overFreeTierLimit ?? false,
-        requiresLicense: !serverExperience.hasPaidLicense && (
-          serverExperience.overFreeTierLimit === true ||
-          (serverExperience.effectiveIsAdmin && serverExperience.userCountResolved)
-        ),
+        requiresLicense:
+          !serverExperience.hasPaidLicense &&
+          (serverExperience.overFreeTierLimit === true ||
+            (serverExperience.effectiveIsAdmin && serverExperience.userCountResolved)),
       },
     }));
   }, [
@@ -220,7 +217,7 @@ export function useOnboardingOrchestrator(
           requiresMfaSetup: parseMfaRequired(accountData.settings),
         }));
       } catch (error) {
-        console.log('[OnboardingOrchestrator] Failed to fetch account data for onboarding runtime state:', error);
+        console.log("[OnboardingOrchestrator] Failed to fetch account data for onboarding runtime state:", error);
         // Account endpoint failed - user not logged in or security disabled
       }
     };
@@ -233,26 +230,25 @@ export function useOnboardingOrchestrator(
   const isOnAuthRoute = AUTH_ROUTES.some((route) => location.pathname.startsWith(route));
   const loginEnabled = config?.enableLogin === true;
   const isUnauthenticatedWithLoginEnabled = loginEnabled && !hasAuthToken();
-  const shouldBlockOnboarding =
-    bypassOnboarding || isOnAuthRoute || configLoading || isUnauthenticatedWithLoginEnabled;
+  const shouldBlockOnboarding = bypassOnboarding || isOnAuthRoute || configLoading || isUnauthenticatedWithLoginEnabled;
 
-  const conditionContext = useMemo<OnboardingConditionContext>(() => ({
-    ...serverExperience,
-    ...runtimeState,
-    effectiveIsAdmin: serverExperience.effectiveIsAdmin ||
-      (!serverExperience.loginEnabled && runtimeState.selectedRole === 'admin'),
-  }), [serverExperience, runtimeState]);
+  const conditionContext = useMemo<OnboardingConditionContext>(
+    () => ({
+      ...serverExperience,
+      ...runtimeState,
+      effectiveIsAdmin:
+        serverExperience.effectiveIsAdmin || (!serverExperience.loginEnabled && runtimeState.selectedRole === "admin"),
+    }),
+    [serverExperience, runtimeState],
+  );
 
   const activeFlow = useMemo(() => {
     return ONBOARDING_STEPS.filter((step) => step.condition(conditionContext));
   }, [conditionContext]);
 
   // Wait for config AND admin status before calculating initial step
-  const adminStatusResolved = !configLoading && (
-    config?.enableLogin === false ||
-    config?.enableLogin === undefined ||
-    config?.isAdmin !== undefined
-  );
+  const adminStatusResolved =
+    !configLoading && (config?.enableLogin === false || config?.enableLogin === undefined || config?.isAdmin !== undefined);
 
   useEffect(() => {
     if (configLoading || !adminStatusResolved) return;
@@ -280,14 +276,15 @@ export function useOnboardingOrchestrator(
 
   const totalSteps = activeFlow.length;
 
-  const isComplete = isInitialized &&
-    (totalSteps === 0 || currentStepIndex >= totalSteps || isOnboardingCompleted());
-  const currentStep = (currentStepIndex >= 0 && currentStepIndex < totalSteps)
-    ? activeFlow[currentStepIndex]
-    : null;
+  const isComplete = isInitialized && (totalSteps === 0 || currentStepIndex >= totalSteps || isOnboardingCompleted());
+  const currentStep = currentStepIndex >= 0 && currentStepIndex < totalSteps ? activeFlow[currentStepIndex] : null;
   const isActive = !shouldBlockOnboarding && !isPaused && !isComplete && isInitialized && currentStep !== null;
-  const isLoading = configLoading || !adminStatusResolved || !isInitialized ||
-    !initialIndexSet.current || (currentStepIndex === -1 && activeFlow.length > 0);
+  const isLoading =
+    configLoading ||
+    !adminStatusResolved ||
+    !isInitialized ||
+    !initialIndexSet.current ||
+    (currentStepIndex === -1 && activeFlow.length > 0);
 
   useEffect(() => {
     if (!configLoading && !isInitialized) setIsInitialized(true);
@@ -325,7 +322,6 @@ export function useOnboardingOrchestrator(
     setCurrentStepIndex(nextIndex);
   }, [currentStepIndex, totalSteps]);
 
-
   const updateRuntimeState = useCallback((updates: Partial<OnboardingRuntimeState>) => {
     persistRuntimeState(updates);
     setRuntimeState((prev) => ({ ...prev, ...updates }));
@@ -336,13 +332,16 @@ export function useOnboardingOrchestrator(
     setCurrentStepIndex(-1);
   }, []);
 
-  const startStep = useCallback((stepId: OnboardingStepId) => {
-    const index = activeFlow.findIndex((step) => step.id === stepId);
-    if (index !== -1) {
-      setCurrentStepIndex(index);
-      setIsPaused(false);
-    }
-  }, [activeFlow]);
+  const startStep = useCallback(
+    (stepId: OnboardingStepId) => {
+      const index = activeFlow.findIndex((step) => step.id === stepId);
+      if (index !== -1) {
+        setCurrentStepIndex(index);
+        setIsPaused(false);
+      }
+    },
+    [activeFlow],
+  );
 
   const pause = useCallback(() => setIsPaused(true), []);
   const resume = useCallback(() => setIsPaused(false), []);
diff --git a/frontend/src/core/components/onboarding/slides/AnalyticsChoiceSlide.tsx b/frontend/src/core/components/onboarding/slides/AnalyticsChoiceSlide.tsx
index c04009ca4c..9521933cb3 100644
--- a/frontend/src/core/components/onboarding/slides/AnalyticsChoiceSlide.tsx
+++ b/frontend/src/core/components/onboarding/slides/AnalyticsChoiceSlide.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
-import { Trans } from 'react-i18next';
-import { Button } from '@mantine/core';
-import OpenInNewIcon from '@mui/icons-material/OpenInNew';
-import i18n from '@app/i18n';
-import { SlideConfig } from '@app/types/types';
-import { UNIFIED_CIRCLE_CONFIG } from '@app/components/onboarding/slides/unifiedBackgroundConfig';
-import styles from '@app/components/onboarding/InitialOnboardingModal/InitialOnboardingModal.module.css';
+import React from "react";
+import { Trans } from "react-i18next";
+import { Button } from "@mantine/core";
+import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+import i18n from "@app/i18n";
+import { SlideConfig } from "@app/types/types";
+import { UNIFIED_CIRCLE_CONFIG } from "@app/components/onboarding/slides/unifiedBackgroundConfig";
+import styles from "@app/components/onboarding/InitialOnboardingModal/InitialOnboardingModal.module.css";
 
 interface AnalyticsChoiceSlideProps {
   analyticsError?: string | null;
@@ -13,8 +13,8 @@ interface AnalyticsChoiceSlideProps {
 
 export default function AnalyticsChoiceSlide({ analyticsError }: AnalyticsChoiceSlideProps): SlideConfig {
   return {
-    key: 'analytics-choice',
-    title: i18n.t('analytics.title', 'Do you want to help make Stirling PDF better?'),
+    key: "analytics-choice",
+    title: i18n.t("analytics.title", "Do you want to help make Stirling PDF better?"),
     body: (
       <div className={styles.bodyCopyInner}>
         <Trans
@@ -29,27 +29,22 @@ export default function AnalyticsChoiceSlide({ analyticsError }: AnalyticsChoice
           components={{ strong: <strong /> }}
         />
         <br />
-        <div style={{ textAlign: 'right', marginTop: 0 }}>
+        <div style={{ textAlign: "right", marginTop: 0 }}>
           <Button
             variant="default"
             size="sm"
-            onClick={() => window.open('https://docs.stirlingpdf.com/analytics-telemetry/', '_blank')}
+            onClick={() => window.open("https://docs.stirlingpdf.com/analytics-telemetry/", "_blank")}
             rightSection={<OpenInNewIcon style={{ fontSize: 16 }} />}
           >
-            {i18n.t('analytics.learnMore', 'Learn more about our analytics')}
+            {i18n.t("analytics.learnMore", "Learn more about our analytics")}
           </Button>
         </div>
-        {analyticsError && (
-          <div style={{ color: 'var(--mantine-color-red-6)', marginTop: 12 }}>
-            {analyticsError}
-          </div>
-        )}
+        {analyticsError && <div style={{ color: "var(--mantine-color-red-6)", marginTop: 12 }}>{analyticsError}</div>}
       </div>
     ),
     background: {
-      gradientStops: ['#0EA5E9', '#6366F1'],
+      gradientStops: ["#0EA5E9", "#6366F1"],
       circles: UNIFIED_CIRCLE_CONFIG,
     },
   };
 }
-
diff --git a/frontend/src/core/components/onboarding/slides/AnimatedSlideBackground.tsx b/frontend/src/core/components/onboarding/slides/AnimatedSlideBackground.tsx
index 289b07b6c4..11bd671c58 100644
--- a/frontend/src/core/components/onboarding/slides/AnimatedSlideBackground.tsx
+++ b/frontend/src/core/components/onboarding/slides/AnimatedSlideBackground.tsx
@@ -1,12 +1,12 @@
-import React from 'react';
-import styles from '@app/components/onboarding/slides/AnimatedSlideBackground.module.css';
-import { AnimatedSlideBackgroundProps } from '@app/types/types';
+import React from "react";
+import styles from "@app/components/onboarding/slides/AnimatedSlideBackground.module.css";
+import { AnimatedSlideBackgroundProps } from "@app/types/types";
 
 type CircleStyles = React.CSSProperties & {
-  '--circle-move-x'?: string;
-  '--circle-move-y'?: string;
-  '--circle-duration'?: string;
-  '--circle-delay'?: string;
+  "--circle-move-x"?: string;
+  "--circle-move-y"?: string;
+  "--circle-duration"?: string;
+  "--circle-delay"?: string;
 };
 
 interface AnimatedSlideBackgroundComponentProps extends AnimatedSlideBackgroundProps {
@@ -14,11 +14,7 @@ interface AnimatedSlideBackgroundComponentProps extends AnimatedSlideBackgroundP
   slideKey: string;
 }
 
-export default function AnimatedSlideBackground({
-  gradientStops,
-  circles,
-  isActive,
-}: AnimatedSlideBackgroundComponentProps) {
+export default function AnimatedSlideBackground({ gradientStops, circles, isActive }: AnimatedSlideBackgroundComponentProps) {
   const [prevGradient, setPrevGradient] = React.useState<[string, string] | null>(null);
   const [currentGradient, setCurrentGradient] = React.useState<[string, string]>(gradientStops);
   const [isTransitioning, setIsTransitioning] = React.useState(false);
@@ -31,13 +27,13 @@ export default function AnimatedSlideBackground({
       setCurrentGradient(gradientStops);
       return;
     }
-    
+
     // Only transition if gradient actually changed
     if (currentGradient[0] !== gradientStops[0] || currentGradient[1] !== gradientStops[1]) {
       // Store previous gradient and start transition
       setPrevGradient(currentGradient);
       setIsTransitioning(true);
-      
+
       // Update to new gradient (will fade in)
       setCurrentGradient(gradientStops);
     }
@@ -59,8 +55,8 @@ export default function AnimatedSlideBackground({
   return (
     <div className={styles.hero} key="animated-background">
       {prevGradientStyle && isTransitioning && (
-        <div 
-          className={`${styles.gradientLayer} ${styles.gradientLayerPrevFadeOut}`} 
+        <div
+          className={`${styles.gradientLayer} ${styles.gradientLayerPrevFadeOut}`}
           style={prevGradientStyle}
           onTransitionEnd={() => {
             setPrevGradient(null);
@@ -69,14 +65,14 @@ export default function AnimatedSlideBackground({
         />
       )}
       <div
-        className={`${styles.gradientLayer} ${isActive ? styles.gradientLayerActive : ''}`.trim()}
+        className={`${styles.gradientLayer} ${isActive ? styles.gradientLayerActive : ""}`.trim()}
         style={currentGradientStyle}
       />
       {circles.map((circle, index) => {
         const { position, size, color, opacity, blur, amplitude = 48, duration = 15, delay = 0 } = circle;
 
-        const moveX = position === 'bottom-left' ? amplitude : -amplitude;
-        const moveY = position === 'bottom-left' ? -amplitude * 0.6 : amplitude * 0.6;
+        const moveX = position === "bottom-left" ? amplitude : -amplitude;
+        const moveY = position === "bottom-left" ? -amplitude * 0.6 : amplitude * 0.6;
 
         const circleStyle: CircleStyles = {
           width: size,
@@ -84,17 +80,17 @@ export default function AnimatedSlideBackground({
           background: color,
           opacity: opacity ?? 0.9,
           filter: blur ? `blur(${blur}px)` : undefined,
-          '--circle-move-x': `${moveX}px`,
-          '--circle-move-y': `${moveY}px`,
-          '--circle-duration': `${duration}s`,
-          '--circle-delay': `${delay}s`,
+          "--circle-move-x": `${moveX}px`,
+          "--circle-move-y": `${moveY}px`,
+          "--circle-duration": `${duration}s`,
+          "--circle-delay": `${delay}s`,
         };
 
         const defaultOffset = -size / 2;
         const offsetX = circle.offsetX ?? 0;
         const offsetY = circle.offsetY ?? 0;
 
-        if (position === 'bottom-left') {
+        if (position === "bottom-left") {
           circleStyle.left = `${defaultOffset + offsetX}px`;
           circleStyle.bottom = `${defaultOffset + offsetY}px`;
         } else {
@@ -102,13 +98,7 @@ export default function AnimatedSlideBackground({
           circleStyle.top = `${defaultOffset + offsetY}px`;
         }
 
-        return (
-          <div
-            key={`circle-${index}-${position}`}
-            className={styles.circle}
-            style={circleStyle}
-          />
-        );
+        return <div key={`circle-${index}-${position}`} className={styles.circle} style={circleStyle} />;
       })}
     </div>
   );
diff --git a/frontend/src/core/components/onboarding/slides/DesktopInstallSlide.tsx b/frontend/src/core/components/onboarding/slides/DesktopInstallSlide.tsx
index 9cebfbb9cd..0ad0eebc29 100644
--- a/frontend/src/core/components/onboarding/slides/DesktopInstallSlide.tsx
+++ b/frontend/src/core/components/onboarding/slides/DesktopInstallSlide.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { SlideConfig } from '@app/types/types';
-import { UNIFIED_CIRCLE_CONFIG } from '@app/components/onboarding/slides/unifiedBackgroundConfig';
-import { DesktopInstallTitle, type OSOption } from '@app/components/onboarding/slides/DesktopInstallTitle';
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { SlideConfig } from "@app/types/types";
+import { UNIFIED_CIRCLE_CONFIG } from "@app/components/onboarding/slides/unifiedBackgroundConfig";
+import { DesktopInstallTitle, type OSOption } from "@app/components/onboarding/slides/DesktopInstallTitle";
 
 export type { OSOption };
 
@@ -19,8 +19,8 @@ const DesktopInstallBody = () => {
   return (
     <span>
       {t(
-        'onboarding.desktopInstall.body',
-        'Stirling works best as a desktop app. You can use it offline, access documents faster, and make edits locally on your computer.',
+        "onboarding.desktopInstall.body",
+        "Stirling works best as a desktop app. You can use it offline, access documents faster, and make edits locally on your computer.",
       )}
     </span>
   );
@@ -32,11 +32,10 @@ export default function DesktopInstallSlide({
   osOptions = [],
   onDownloadUrlChange,
 }: DesktopInstallSlideProps): SlideConfig {
-
   return {
-    key: 'desktop-install',
+    key: "desktop-install",
     title: (
-      <DesktopInstallTitle 
+      <DesktopInstallTitle
         osLabel={osLabel}
         osUrl={osUrl}
         osOptions={osOptions || []}
@@ -46,9 +45,8 @@ export default function DesktopInstallSlide({
     body: <DesktopInstallBody />,
     downloadUrl: osUrl,
     background: {
-      gradientStops: ['#2563EB', '#0EA5E9'],
+      gradientStops: ["#2563EB", "#0EA5E9"],
       circles: UNIFIED_CIRCLE_CONFIG,
     },
   };
 }
-
diff --git a/frontend/src/core/components/onboarding/slides/DesktopInstallTitle.tsx b/frontend/src/core/components/onboarding/slides/DesktopInstallTitle.tsx
index ac42b518b3..b69b1b6b84 100644
--- a/frontend/src/core/components/onboarding/slides/DesktopInstallTitle.tsx
+++ b/frontend/src/core/components/onboarding/slides/DesktopInstallTitle.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { Menu, ActionIcon } from '@mantine/core';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { Menu, ActionIcon } from "@mantine/core";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
 
 export interface OSOption {
   label: string;
@@ -16,11 +16,11 @@ interface DesktopInstallTitleProps {
   onDownloadUrlChange?: (url: string) => void;
 }
 
-export const DesktopInstallTitle: React.FC<DesktopInstallTitleProps> = ({ 
-  osLabel, 
-  osUrl, 
-  osOptions, 
-  onDownloadUrlChange 
+export const DesktopInstallTitle: React.FC<DesktopInstallTitleProps> = ({
+  osLabel,
+  osUrl,
+  osOptions,
+  onDownloadUrlChange,
 }) => {
   const { t } = useTranslation();
   const [selectedOsUrl, setSelectedOsUrl] = React.useState<string>(osUrl);
@@ -29,37 +29,41 @@ export const DesktopInstallTitle: React.FC<DesktopInstallTitleProps> = ({
     setSelectedOsUrl(osUrl);
   }, [osUrl]);
 
-  const handleOsSelect = React.useCallback((option: OSOption) => {
-    setSelectedOsUrl(option.url);
-    onDownloadUrlChange?.(option.url);
-  }, [onDownloadUrlChange]);
+  const handleOsSelect = React.useCallback(
+    (option: OSOption) => {
+      setSelectedOsUrl(option.url);
+      onDownloadUrlChange?.(option.url);
+    },
+    [onDownloadUrlChange],
+  );
 
-  const currentOsOption = osOptions.find(opt => opt.url === selectedOsUrl) || 
+  const currentOsOption =
+    osOptions.find((opt) => opt.url === selectedOsUrl) ||
     (osOptions.length > 0 ? osOptions[0] : { label: osLabel, url: osUrl });
-  
+
   const displayLabel = currentOsOption.label || osLabel;
-  const title = displayLabel 
-    ? t('onboarding.desktopInstall.titleWithOs', 'Download for {{osLabel}}', { osLabel: displayLabel })
-    : t('onboarding.desktopInstall.title', 'Download');
+  const title = displayLabel
+    ? t("onboarding.desktopInstall.titleWithOs", "Download for {{osLabel}}", { osLabel: displayLabel })
+    : t("onboarding.desktopInstall.title", "Download");
 
   // If only one option or no options, don't show dropdown
   if (osOptions.length <= 1) {
-    return <div style={{ textAlign: 'center', width: '100%' }}>{title}</div>;
+    return <div style={{ textAlign: "center", width: "100%" }}>{title}</div>;
   }
 
   return (
-    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.5rem', width: '100%' }}>
-      <span style={{ whiteSpace: 'nowrap' }}>{title}</span>
+    <div style={{ display: "flex", alignItems: "center", justifyContent: "center", gap: "0.5rem", width: "100%" }}>
+      <span style={{ whiteSpace: "nowrap" }}>{title}</span>
       <Menu position="bottom" offset={5} zIndex={10000}>
         <Menu.Target>
           <ActionIcon
             variant="transparent"
             size="sm"
-            style={{ 
-              background: 'transparent',
-              border: 'none',
-              color: 'inherit',
-              padding: 0
+            style={{
+              background: "transparent",
+              border: "none",
+              color: "inherit",
+              padding: 0,
             }}
           >
             <ExpandMoreIcon fontSize="small" />
@@ -74,11 +78,9 @@ export const DesktopInstallTitle: React.FC<DesktopInstallTitleProps> = ({
                 onClick={() => handleOsSelect(option)}
                 style={{
                   backgroundColor: isSelected
-                    ? 'light-dark(var(--mantine-color-blue-1), var(--mantine-color-blue-8))'
-                    : 'transparent',
-                  color: isSelected
-                    ? 'light-dark(var(--mantine-color-blue-9), var(--mantine-color-white))'
-                    : 'inherit',
+                    ? "light-dark(var(--mantine-color-blue-1), var(--mantine-color-blue-8))"
+                    : "transparent",
+                  color: isSelected ? "light-dark(var(--mantine-color-blue-9), var(--mantine-color-white))" : "inherit",
                 }}
               >
                 {option.label}
@@ -90,4 +92,3 @@ export const DesktopInstallTitle: React.FC<DesktopInstallTitleProps> = ({
     </div>
   );
 };
-
diff --git a/frontend/src/core/components/onboarding/slides/FirstLoginSlide.tsx b/frontend/src/core/components/onboarding/slides/FirstLoginSlide.tsx
index 46ec6a0c89..df7d5ff544 100644
--- a/frontend/src/core/components/onboarding/slides/FirstLoginSlide.tsx
+++ b/frontend/src/core/components/onboarding/slides/FirstLoginSlide.tsx
@@ -1,12 +1,12 @@
-import React, { useState } from 'react';
-import { Stack, PasswordInput, Button, Alert, Text } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { SlideConfig } from '@app/types/types';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { UNIFIED_CIRCLE_CONFIG } from '@app/components/onboarding/slides/unifiedBackgroundConfig';
-import { accountService } from '@app/services/accountService';
-import { alert as showToast } from '@app/components/toast';
-import styles from '@app/components/onboarding/InitialOnboardingModal/InitialOnboardingModal.module.css';
+import React, { useState } from "react";
+import { Stack, PasswordInput, Button, Alert, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { SlideConfig } from "@app/types/types";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { UNIFIED_CIRCLE_CONFIG } from "@app/components/onboarding/slides/unifiedBackgroundConfig";
+import { accountService } from "@app/services/accountService";
+import { alert as showToast } from "@app/components/toast";
+import styles from "@app/components/onboarding/InitialOnboardingModal/InitialOnboardingModal.module.css";
 
 interface FirstLoginSlideProps {
   username: string;
@@ -14,66 +14,66 @@ interface FirstLoginSlideProps {
   usingDefaultCredentials?: boolean;
 }
 
-const DEFAULT_PASSWORD = 'stirling';
+const DEFAULT_PASSWORD = "stirling";
 
 function FirstLoginForm({ username, onPasswordChanged, usingDefaultCredentials = false }: FirstLoginSlideProps) {
   const { t } = useTranslation();
   // If using default credentials, pre-fill with "stirling" - user won't see this field
-  const [currentPassword, setCurrentPassword] = useState(usingDefaultCredentials ? DEFAULT_PASSWORD : '');
-  const [newPassword, setNewPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
+  const [currentPassword, setCurrentPassword] = useState(usingDefaultCredentials ? DEFAULT_PASSWORD : "");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState('');
+  const [error, setError] = useState("");
 
   const handleSubmit = async () => {
     // Validation
     if ((!usingDefaultCredentials && !currentPassword) || !newPassword || !confirmPassword) {
-      setError(t('firstLogin.allFieldsRequired', 'All fields are required'));
+      setError(t("firstLogin.allFieldsRequired", "All fields are required"));
       return;
     }
 
     if (newPassword !== confirmPassword) {
-      setError(t('firstLogin.passwordsDoNotMatch', 'New passwords do not match'));
+      setError(t("firstLogin.passwordsDoNotMatch", "New passwords do not match"));
       return;
     }
 
     if (newPassword.length < 8) {
-      setError(t('firstLogin.passwordTooShort', 'Password must be at least 8 characters'));
+      setError(t("firstLogin.passwordTooShort", "Password must be at least 8 characters"));
       return;
     }
 
     if (newPassword === currentPassword) {
-      setError(t('firstLogin.passwordMustBeDifferent', 'New password must be different from current password'));
+      setError(t("firstLogin.passwordMustBeDifferent", "New password must be different from current password"));
       return;
     }
 
     try {
       setLoading(true);
-      setError('');
+      setError("");
 
       await accountService.changePasswordOnLogin(currentPassword, newPassword, confirmPassword);
 
       showToast({
-        alertType: 'success',
-        title: t('firstLogin.passwordChangedSuccess', 'Password changed successfully! Please log in again.')
+        alertType: "success",
+        title: t("firstLogin.passwordChangedSuccess", "Password changed successfully! Please log in again."),
       });
 
       // Clear form
-      setCurrentPassword('');
-      setNewPassword('');
-      setConfirmPassword('');
+      setCurrentPassword("");
+      setNewPassword("");
+      setConfirmPassword("");
 
       // Wait a moment for the user to see the success message
       setTimeout(() => {
         onPasswordChanged();
       }, 1500);
     } catch (err) {
-      console.error('Failed to change password:', err);
+      console.error("Failed to change password:", err);
       // Extract error message from axios response if available
       const axiosError = err as { response?: { data?: { message?: string } } };
       setError(
         axiosError.response?.data?.message ||
-        t('firstLogin.passwordChangeFailed', 'Failed to change password. Please check your current password.')
+          t("firstLogin.passwordChangeFailed", "Failed to change password. Please check your current password."),
       );
     } finally {
       setLoading(false);
@@ -85,25 +85,18 @@ function FirstLoginForm({ username, onPasswordChanged, usingDefaultCredentials =
       <div className={styles.securityCard}>
         <Stack gap="md">
           <div className={styles.securityAlertRow}>
-            <LocalIcon icon="info-rounded" width={20} height={20} style={{ color: '#3B82F6', flexShrink: 0 }} />
+            <LocalIcon icon="info-rounded" width={20} height={20} style={{ color: "#3B82F6", flexShrink: 0 }} />
             <span>
-              {t(
-                'firstLogin.welcomeMessage',
-                'For security reasons, you must change your password on your first login.'
-              )}
+              {t("firstLogin.welcomeMessage", "For security reasons, you must change your password on your first login.")}
             </span>
           </div>
 
           <Text size="sm" fw={500}>
-            {t('firstLogin.loggedInAs', 'Logged in as')}: <strong>{username}</strong>
+            {t("firstLogin.loggedInAs", "Logged in as")}: <strong>{username}</strong>
           </Text>
 
           {error && (
-            <Alert
-              icon={<LocalIcon icon="error-rounded" width="1rem" height="1rem" />}
-              color="red"
-              variant="light"
-            >
+            <Alert icon={<LocalIcon icon="error-rounded" width="1rem" height="1rem" />} color="red" variant="light">
               {error}
             </Alert>
           )}
@@ -111,8 +104,8 @@ function FirstLoginForm({ username, onPasswordChanged, usingDefaultCredentials =
           {/* Only show current password field if not using default credentials */}
           {!usingDefaultCredentials && (
             <PasswordInput
-              label={t('firstLogin.currentPassword', 'Current Password')}
-              placeholder={t('firstLogin.enterCurrentPassword', 'Enter your current password')}
+              label={t("firstLogin.currentPassword", "Current Password")}
+              placeholder={t("firstLogin.enterCurrentPassword", "Enter your current password")}
               value={currentPassword}
               onChange={(e) => setCurrentPassword(e.currentTarget.value)}
               required
@@ -123,8 +116,8 @@ function FirstLoginForm({ username, onPasswordChanged, usingDefaultCredentials =
           )}
 
           <PasswordInput
-            label={t('firstLogin.newPassword', 'New Password')}
-            placeholder={t('firstLogin.enterNewPassword', 'Enter new password (min 8 characters)')}
+            label={t("firstLogin.newPassword", "New Password")}
+            placeholder={t("firstLogin.enterNewPassword", "Enter new password (min 8 characters)")}
             value={newPassword}
             onChange={(e) => setNewPassword(e.currentTarget.value)}
             minLength={8}
@@ -135,8 +128,8 @@ function FirstLoginForm({ username, onPasswordChanged, usingDefaultCredentials =
           />
 
           <PasswordInput
-            label={t('firstLogin.confirmPassword', 'Confirm New Password')}
-            placeholder={t('firstLogin.reEnterNewPassword', 'Re-enter new password')}
+            label={t("firstLogin.confirmPassword", "Confirm New Password")}
+            placeholder={t("firstLogin.reEnterNewPassword", "Re-enter new password")}
             value={confirmPassword}
             onChange={(e) => setConfirmPassword(e.currentTarget.value)}
             required
@@ -154,7 +147,7 @@ function FirstLoginForm({ username, onPasswordChanged, usingDefaultCredentials =
             size="md"
             mt="xs"
           >
-            {t('firstLogin.changePassword', 'Change Password')}
+            {t("firstLogin.changePassword", "Change Password")}
           </Button>
         </Stack>
       </div>
@@ -168,8 +161,8 @@ export default function FirstLoginSlide({
   usingDefaultCredentials = false,
 }: FirstLoginSlideProps): SlideConfig {
   return {
-    key: 'first-login',
-    title: 'Set Your Password',
+    key: "first-login",
+    title: "Set Your Password",
     body: (
       <FirstLoginForm
         username={username}
@@ -178,9 +171,8 @@ export default function FirstLoginSlide({
       />
     ),
     background: {
-      gradientStops: ['#059669', '#0891B2'], // Green to teal - security/trust colors
+      gradientStops: ["#059669", "#0891B2"], // Green to teal - security/trust colors
       circles: UNIFIED_CIRCLE_CONFIG,
     },
   };
 }
-
diff --git a/frontend/src/core/components/onboarding/slides/MFASetupSlide.tsx b/frontend/src/core/components/onboarding/slides/MFASetupSlide.tsx
index d8def0528a..b565af0f94 100644
--- a/frontend/src/core/components/onboarding/slides/MFASetupSlide.tsx
+++ b/frontend/src/core/components/onboarding/slides/MFASetupSlide.tsx
@@ -4,7 +4,7 @@ import { QRCodeSVG } from "qrcode.react";
 import { SlideConfig } from "@app/types/types";
 import { UNIFIED_CIRCLE_CONFIG } from "@app/components/onboarding/slides/unifiedBackgroundConfig";
 import { accountService } from "@app/services/accountService";
-import { useAccountLogout } from '@app/extensions/accountLogout';
+import { useAccountLogout } from "@app/extensions/accountLogout";
 import { useAuth } from "@app/auth/UseSession";
 import LocalIcon from "@app/components/shared/LocalIcon";
 import { BASE_PATH } from "@app/constants/app";
@@ -59,10 +59,10 @@ function MFASetupContent({ onMfaSetupComplete }: MFASetupSlideProps) {
   }, [fetchMfaSetup]);
 
   const redirectToLogin = useCallback(() => {
-    window.location.assign('/login');
+    window.location.assign("/login");
   }, []);
 
-  const onLogout = useCallback(async() => {
+  const onLogout = useCallback(async () => {
     await accountLogout({ signOut, redirectToLogin });
   }, [accountLogout, redirectToLogin, signOut]);
 
@@ -84,13 +84,13 @@ function MFASetupContent({ onMfaSetupComplete }: MFASetupSlideProps) {
       } catch (err) {
         const axiosError = err as { response?: { data?: { error?: string } } };
         setMfaError(
-          axiosError.response?.data?.error || "Unable to enable two-factor authentication. Check the code and try again."
+          axiosError.response?.data?.error || "Unable to enable two-factor authentication. Check the code and try again.",
         );
       } finally {
         setSubmitting(false);
       }
     },
-    [mfaSetupCode, onMfaSetupComplete]
+    [mfaSetupCode, onMfaSetupComplete],
   );
 
   const isReady = Boolean(mfaSetupData);
@@ -179,18 +179,10 @@ function MFASetupContent({ onMfaSetupComplete }: MFASetupSlideProps) {
                 >
                   Regenerate QR code
                 </Button>
-                <Button
-                  type="submit"
-                  loading={submitting}
-                  disabled={!isReady || setupComplete || mfaSetupCode.length < 6}
-                >
+                <Button type="submit" loading={submitting} disabled={!isReady || setupComplete || mfaSetupCode.length < 6}>
                   Enable MFA
                 </Button>
-                <Button
-                  type="button"
-                  variant="light"
-                  onClick={onLogout}
-                >
+                <Button type="button" variant="light" onClick={onLogout}>
                   Logout
                 </Button>
               </Group>
diff --git a/frontend/src/core/components/onboarding/slides/PlanOverviewSlide.tsx b/frontend/src/core/components/onboarding/slides/PlanOverviewSlide.tsx
index 3b8d4bfb0c..cb86b2062c 100644
--- a/frontend/src/core/components/onboarding/slides/PlanOverviewSlide.tsx
+++ b/frontend/src/core/components/onboarding/slides/PlanOverviewSlide.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
-import { Trans, useTranslation } from 'react-i18next';
-import { SlideConfig, LicenseNotice } from '@app/types/types';
-import { UNIFIED_CIRCLE_CONFIG } from '@app/components/onboarding/slides/unifiedBackgroundConfig';
+import React from "react";
+import { Trans, useTranslation } from "react-i18next";
+import { SlideConfig, LicenseNotice } from "@app/types/types";
+import { UNIFIED_CIRCLE_CONFIG } from "@app/components/onboarding/slides/unifiedBackgroundConfig";
 
 interface PlanOverviewSlideProps {
   isAdmin: boolean;
@@ -16,31 +16,23 @@ const PlanOverviewTitle: React.FC<{ isAdmin: boolean }> = ({ isAdmin }) => {
   return (
     <>
       {isAdmin
-        ? t('onboarding.planOverview.adminTitle', 'Admin Overview')
-        : t('onboarding.planOverview.userTitle', 'Plan Overview')}
+        ? t("onboarding.planOverview.adminTitle", "Admin Overview")
+        : t("onboarding.planOverview.userTitle", "Plan Overview")}
     </>
   );
 };
 
-const AdminOverviewBody: React.FC<{ freeTierLimit: number; loginEnabled: boolean }> = ({
-  freeTierLimit,
-  loginEnabled,
-}) => {
+const AdminOverviewBody: React.FC<{ freeTierLimit: number; loginEnabled: boolean }> = ({ freeTierLimit, loginEnabled }) => {
   const adminBodyKey = loginEnabled
-    ? 'onboarding.planOverview.adminBodyLoginEnabled'
-    : 'onboarding.planOverview.adminBodyLoginDisabled';
+    ? "onboarding.planOverview.adminBodyLoginEnabled"
+    : "onboarding.planOverview.adminBodyLoginDisabled";
 
   const defaultValue = loginEnabled
-    ? 'As an admin, you can manage users, configure settings, and monitor server health. The first <strong>{{freeTierLimit}}</strong> people on your server get to use Stirling free of charge.'
-    : 'Once you enable login mode, you can manage users, configure settings, and monitor server health. The first <strong>{{freeTierLimit}}</strong> people on your server get to use Stirling free of charge.';
+    ? "As an admin, you can manage users, configure settings, and monitor server health. The first <strong>{{freeTierLimit}}</strong> people on your server get to use Stirling free of charge."
+    : "Once you enable login mode, you can manage users, configure settings, and monitor server health. The first <strong>{{freeTierLimit}}</strong> people on your server get to use Stirling free of charge.";
 
   return (
-    <Trans
-      i18nKey={adminBodyKey}
-      values={{ freeTierLimit }}
-      components={{ strong: <strong /> }}
-      defaults={defaultValue}
-    />
+    <Trans i18nKey={adminBodyKey} values={{ freeTierLimit }} components={{ strong: <strong /> }} defaults={defaultValue} />
   );
 };
 
@@ -49,7 +41,7 @@ const UserOverviewBody: React.FC = () => {
   return (
     <span>
       {t(
-        'onboarding.planOverview.userBody',
+        "onboarding.planOverview.userBody",
         "Invite teammates, assign roles, and keep your documents organized in one secure workspace. Enable login mode whenever you're ready to grow beyond solo use.",
       )}
     </span>
@@ -60,8 +52,7 @@ const PlanOverviewBody: React.FC<{ isAdmin: boolean; freeTierLimit: number; logi
   isAdmin,
   freeTierLimit,
   loginEnabled,
-}) =>
-  isAdmin ? <AdminOverviewBody freeTierLimit={freeTierLimit} loginEnabled={loginEnabled} /> : <UserOverviewBody />;
+}) => (isAdmin ? <AdminOverviewBody freeTierLimit={freeTierLimit} loginEnabled={loginEnabled} /> : <UserOverviewBody />);
 
 export default function PlanOverviewSlide({
   isAdmin,
@@ -71,13 +62,12 @@ export default function PlanOverviewSlide({
   const freeTierLimit = licenseNotice?.freeTierLimit ?? DEFAULT_FREE_TIER_LIMIT;
 
   return {
-    key: isAdmin ? 'admin-overview' : 'plan-overview',
+    key: isAdmin ? "admin-overview" : "plan-overview",
     title: <PlanOverviewTitle isAdmin={isAdmin} />,
     body: <PlanOverviewBody isAdmin={isAdmin} freeTierLimit={freeTierLimit} loginEnabled={loginEnabled} />,
     background: {
-      gradientStops: isAdmin ? ['#4F46E5', '#0EA5E9'] : ['#F97316', '#EF4444'],
+      gradientStops: isAdmin ? ["#4F46E5", "#0EA5E9"] : ["#F97316", "#EF4444"],
       circles: UNIFIED_CIRCLE_CONFIG,
     },
   };
 }
-
diff --git a/frontend/src/core/components/onboarding/slides/SecurityCheckSlide.tsx b/frontend/src/core/components/onboarding/slides/SecurityCheckSlide.tsx
index 0efb2f591d..f0245e6cd9 100644
--- a/frontend/src/core/components/onboarding/slides/SecurityCheckSlide.tsx
+++ b/frontend/src/core/components/onboarding/slides/SecurityCheckSlide.tsx
@@ -1,39 +1,41 @@
-import React from 'react';
-import { Select } from '@mantine/core';
-import { SlideConfig } from '@app/types/types';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { UNIFIED_CIRCLE_CONFIG } from '@app/components/onboarding/slides/unifiedBackgroundConfig';
-import i18n from '@app/i18n';
-import styles from '@app/components/onboarding/InitialOnboardingModal/InitialOnboardingModal.module.css';
+import React from "react";
+import { Select } from "@mantine/core";
+import { SlideConfig } from "@app/types/types";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { UNIFIED_CIRCLE_CONFIG } from "@app/components/onboarding/slides/unifiedBackgroundConfig";
+import i18n from "@app/i18n";
+import styles from "@app/components/onboarding/InitialOnboardingModal/InitialOnboardingModal.module.css";
 
 interface SecurityCheckSlideProps {
-  selectedRole: 'admin' | 'user' | null;
-  onRoleSelect: (role: 'admin' | 'user' | null) => void;
+  selectedRole: "admin" | "user" | null;
+  onRoleSelect: (role: "admin" | "user" | null) => void;
 }
 
-export default function SecurityCheckSlide({
-  selectedRole,
-  onRoleSelect,
-}: SecurityCheckSlideProps): SlideConfig {
+export default function SecurityCheckSlide({ selectedRole, onRoleSelect }: SecurityCheckSlideProps): SlideConfig {
   return {
-    key: 'security-check',
-    title: 'Security Check',
+    key: "security-check",
+    title: "Security Check",
     body: (
       <div className={styles.securitySlideContent}>
         <div className={styles.securityCard}>
           <div className={styles.securityAlertRow}>
-            <LocalIcon icon="error" width={20} height={20} style={{ color: '#F04438', flexShrink: 0 }} />
-            <span>{i18n.t('onboarding.securityCheck.message', 'The application has undergone significant changes recently. Your server admin\'s attention may be required. Please confirm your role to continue.')}</span>
+            <LocalIcon icon="error" width={20} height={20} style={{ color: "#F04438", flexShrink: 0 }} />
+            <span>
+              {i18n.t(
+                "onboarding.securityCheck.message",
+                "The application has undergone significant changes recently. Your server admin's attention may be required. Please confirm your role to continue.",
+              )}
+            </span>
           </div>
 
           <Select
             placeholder="Confirm your role"
             value={selectedRole}
             data={[
-              { value: 'admin', label: 'Admin' },
-              { value: 'user', label: 'User' },
+              { value: "admin", label: "Admin" },
+              { value: "user", label: "User" },
             ]}
-            onChange={(value) => onRoleSelect((value as 'admin' | 'user') ?? null)}
+            onChange={(value) => onRoleSelect((value as "admin" | "user") ?? null)}
             comboboxProps={{ withinPortal: true, zIndex: 5000 }}
             styles={{
               input: {
@@ -46,10 +48,8 @@ export default function SecurityCheckSlide({
       </div>
     ),
     background: {
-      gradientStops: ['#5B21B6', '#2563EB'],
+      gradientStops: ["#5B21B6", "#2563EB"],
       circles: UNIFIED_CIRCLE_CONFIG,
     },
   };
 }
-
-
diff --git a/frontend/src/core/components/onboarding/slides/ServerLicenseSlide.tsx b/frontend/src/core/components/onboarding/slides/ServerLicenseSlide.tsx
index 3da69103b5..7b97b9d46a 100644
--- a/frontend/src/core/components/onboarding/slides/ServerLicenseSlide.tsx
+++ b/frontend/src/core/components/onboarding/slides/ServerLicenseSlide.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import { Trans } from 'react-i18next';
-import { SlideConfig, LicenseNotice } from '@app/types/types';
-import { UNIFIED_CIRCLE_CONFIG } from '@app/components/onboarding/slides/unifiedBackgroundConfig';
-import i18n from '@app/i18n';
+import React from "react";
+import { Trans } from "react-i18next";
+import { SlideConfig, LicenseNotice } from "@app/types/types";
+import { UNIFIED_CIRCLE_CONFIG } from "@app/components/onboarding/slides/unifiedBackgroundConfig";
+import i18n from "@app/i18n";
 
 interface ServerLicenseSlideProps {
   licenseNotice?: LicenseNotice;
@@ -17,9 +17,9 @@ export default function ServerLicenseSlide({ licenseNotice }: ServerLicenseSlide
   const formattedTotalUsers = totalUsers != null ? totalUsers.toLocaleString() : null;
   const overLimitUserCopy = formattedTotalUsers ?? `more than ${freeTierLimit}`;
   const title = isOverLimit
-    ? i18n.t('onboarding.serverLicense.overLimitTitle', 'Server License Needed')
-    : i18n.t('onboarding.serverLicense.freeTitle', 'Server License');
-  const key = isOverLimit ? 'server-license-over-limit' : 'server-license';
+    ? i18n.t("onboarding.serverLicense.overLimitTitle", "Server License Needed")
+    : i18n.t("onboarding.serverLicense.freeTitle", "Server License");
+  const key = isOverLimit ? "server-license-over-limit" : "server-license";
 
   const overLimitBody = (
     <Trans
@@ -50,10 +50,8 @@ export default function ServerLicenseSlide({ licenseNotice }: ServerLicenseSlide
     title,
     body,
     background: {
-      gradientStops: isOverLimit ? ['#F472B6', '#8B5CF6'] : ['#F97316', '#F59E0B'],
+      gradientStops: isOverLimit ? ["#F472B6", "#8B5CF6"] : ["#F97316", "#F59E0B"],
       circles: UNIFIED_CIRCLE_CONFIG,
     },
   };
 }
-
-
diff --git a/frontend/src/core/components/onboarding/slides/TourOverviewSlide.tsx b/frontend/src/core/components/onboarding/slides/TourOverviewSlide.tsx
index b76a10b7f5..3213122b40 100644
--- a/frontend/src/core/components/onboarding/slides/TourOverviewSlide.tsx
+++ b/frontend/src/core/components/onboarding/slides/TourOverviewSlide.tsx
@@ -1,14 +1,14 @@
-import React from 'react';
-import { Trans } from 'react-i18next';
-import i18n from '@app/i18n';
-import { SlideConfig } from '@app/types/types';
-import { UNIFIED_CIRCLE_CONFIG } from '@app/components/onboarding/slides/unifiedBackgroundConfig';
-import styles from '@app/components/onboarding/InitialOnboardingModal/InitialOnboardingModal.module.css';
+import React from "react";
+import { Trans } from "react-i18next";
+import i18n from "@app/i18n";
+import { SlideConfig } from "@app/types/types";
+import { UNIFIED_CIRCLE_CONFIG } from "@app/components/onboarding/slides/unifiedBackgroundConfig";
+import styles from "@app/components/onboarding/InitialOnboardingModal/InitialOnboardingModal.module.css";
 
 export default function TourOverviewSlide(): SlideConfig {
   return {
-    key: 'tour-overview',
-    title: i18n.t('onboarding.tourOverview.title', 'Tour Overview'),
+    key: "tour-overview",
+    title: i18n.t("onboarding.tourOverview.title", "Tour Overview"),
     body: (
       <span className={styles.bodyCopyInner}>
         <Trans
@@ -19,9 +19,8 @@ export default function TourOverviewSlide(): SlideConfig {
       </span>
     ),
     background: {
-      gradientStops: ['#2563EB', '#7C3AED'],
+      gradientStops: ["#2563EB", "#7C3AED"],
       circles: UNIFIED_CIRCLE_CONFIG,
     },
   };
 }
-
diff --git a/frontend/src/core/components/onboarding/slides/WelcomeSlide.tsx b/frontend/src/core/components/onboarding/slides/WelcomeSlide.tsx
index eb9160eba9..e0974262bc 100644
--- a/frontend/src/core/components/onboarding/slides/WelcomeSlide.tsx
+++ b/frontend/src/core/components/onboarding/slides/WelcomeSlide.tsx
@@ -1,15 +1,15 @@
-import React from 'react';
-import { useTranslation, Trans } from 'react-i18next';
-import { SlideConfig } from '@app/types/types';
-import styles from '@app/components/onboarding/InitialOnboardingModal/InitialOnboardingModal.module.css';
-import { UNIFIED_CIRCLE_CONFIG } from '@app/components/onboarding/slides/unifiedBackgroundConfig';
+import React from "react";
+import { useTranslation, Trans } from "react-i18next";
+import { SlideConfig } from "@app/types/types";
+import styles from "@app/components/onboarding/InitialOnboardingModal/InitialOnboardingModal.module.css";
+import { UNIFIED_CIRCLE_CONFIG } from "@app/components/onboarding/slides/unifiedBackgroundConfig";
 
 function WelcomeSlideTitle() {
   const { t } = useTranslation();
 
   return (
     <span className={styles.welcomeTitleContainer}>
-      {t('onboarding.welcomeSlide.title', 'Welcome to Stirling')}
+      {t("onboarding.welcomeSlide.title", "Welcome to Stirling")}
       <span className={styles.v2Badge}>V2</span>
     </span>
   );
@@ -27,13 +27,12 @@ const WelcomeSlideBody = () => (
 
 export default function WelcomeSlide(): SlideConfig {
   return {
-    key: 'welcome',
+    key: "welcome",
     title: <WelcomeSlideTitle />,
     body: <WelcomeSlideBody />,
     background: {
-      gradientStops: ['#7C3AED', '#EC4899'],
+      gradientStops: ["#7C3AED", "#EC4899"],
       circles: UNIFIED_CIRCLE_CONFIG,
     },
   };
 }
-
diff --git a/frontend/src/core/components/onboarding/slides/unifiedBackgroundConfig.ts b/frontend/src/core/components/onboarding/slides/unifiedBackgroundConfig.ts
index 8ba3c0fbb6..33ac2d2915 100644
--- a/frontend/src/core/components/onboarding/slides/unifiedBackgroundConfig.ts
+++ b/frontend/src/core/components/onboarding/slides/unifiedBackgroundConfig.ts
@@ -1,4 +1,4 @@
-import { AnimatedCircleConfig } from '@app/types/types';
+import { AnimatedCircleConfig } from "@app/types/types";
 
 /**
  * Unified circle background configuration used across all onboarding slides.
@@ -6,9 +6,9 @@ import { AnimatedCircleConfig } from '@app/types/types';
  */
 export const UNIFIED_CIRCLE_CONFIG: AnimatedCircleConfig[] = [
   {
-    position: 'bottom-left',
+    position: "bottom-left",
     size: 270,
-    color: 'rgba(255, 255, 255, 0.25)',
+    color: "rgba(255, 255, 255, 0.25)",
     opacity: 0.9,
     amplitude: 24,
     duration: 4.5,
@@ -16,9 +16,9 @@ export const UNIFIED_CIRCLE_CONFIG: AnimatedCircleConfig[] = [
     offsetY: 14,
   },
   {
-    position: 'top-right',
+    position: "top-right",
     size: 300,
-    color: 'rgba(255, 255, 255, 0.2)',
+    color: "rgba(255, 255, 255, 0.2)",
     opacity: 0.9,
     amplitude: 28,
     duration: 4.5,
@@ -27,4 +27,3 @@ export const UNIFIED_CIRCLE_CONFIG: AnimatedCircleConfig[] = [
     offsetY: 18,
   },
 ];
-
diff --git a/frontend/src/core/components/onboarding/tourGlow.ts b/frontend/src/core/components/onboarding/tourGlow.ts
index a043f7c011..986a0eb930 100644
--- a/frontend/src/core/components/onboarding/tourGlow.ts
+++ b/frontend/src/core/components/onboarding/tourGlow.ts
@@ -3,16 +3,15 @@ export const addGlowToElements = (selectors: string[]) => {
     const element = document.querySelector(selector);
     if (element) {
       if (selector === '[data-tour="settings-content-area"]') {
-        element.classList.add('tour-content-glow');
+        element.classList.add("tour-content-glow");
       } else {
-        element.classList.add('tour-nav-glow');
+        element.classList.add("tour-nav-glow");
       }
     }
   });
 };
 
 export const removeAllGlows = () => {
-  document.querySelectorAll('.tour-content-glow').forEach((el) => el.classList.remove('tour-content-glow'));
-  document.querySelectorAll('.tour-nav-glow').forEach((el) => el.classList.remove('tour-nav-glow'));
+  document.querySelectorAll(".tour-content-glow").forEach((el) => el.classList.remove("tour-content-glow"));
+  document.querySelectorAll(".tour-nav-glow").forEach((el) => el.classList.remove("tour-nav-glow"));
 };
-
diff --git a/frontend/src/core/components/onboarding/useBypassOnboarding.ts b/frontend/src/core/components/onboarding/useBypassOnboarding.ts
index 166c893527..82620a19cb 100644
--- a/frontend/src/core/components/onboarding/useBypassOnboarding.ts
+++ b/frontend/src/core/components/onboarding/useBypassOnboarding.ts
@@ -1,28 +1,28 @@
-import { useEffect, useMemo, useState } from 'react';
-import { useLocation } from 'react-router-dom';
-import { markOnboardingCompleted } from '@app/components/onboarding/orchestrator/onboardingStorage';
+import { useEffect, useMemo, useState } from "react";
+import { useLocation } from "react-router-dom";
+import { markOnboardingCompleted } from "@app/components/onboarding/orchestrator/onboardingStorage";
 
-const SESSION_KEY = 'onboarding::bypass-all';
-const PARAM_KEY = 'bypassOnboarding';
+const SESSION_KEY = "onboarding::bypass-all";
+const PARAM_KEY = "bypassOnboarding";
 
 function isTruthy(value: string | null): boolean {
-  return value?.toLowerCase() === 'true';
+  return value?.toLowerCase() === "true";
 }
 
 function readStoredBypass(): boolean {
-  if (typeof window === 'undefined') return false;
+  if (typeof window === "undefined") return false;
   try {
-    return sessionStorage.getItem(SESSION_KEY) === 'true';
+    return sessionStorage.getItem(SESSION_KEY) === "true";
   } catch {
     return false;
   }
 }
 
 function setStoredBypass(enabled: boolean): void {
-  if (typeof window === 'undefined') return;
+  if (typeof window === "undefined") return;
   try {
     if (enabled) {
-      sessionStorage.setItem(SESSION_KEY, 'true');
+      sessionStorage.setItem(SESSION_KEY, "true");
     } else {
       sessionStorage.removeItem(SESSION_KEY);
     }
diff --git a/frontend/src/core/components/onboarding/useOnboardingDownload.ts b/frontend/src/core/components/onboarding/useOnboardingDownload.ts
index 7601800312..4385f24788 100644
--- a/frontend/src/core/components/onboarding/useOnboardingDownload.ts
+++ b/frontend/src/core/components/onboarding/useOnboardingDownload.ts
@@ -1,12 +1,12 @@
 /**
  * useOnboardingDownload Hook
- * 
+ *
  * Encapsulates OS detection and download URL logic for the desktop install slide.
  */
 
-import { useState, useEffect, useMemo, useCallback } from 'react';
-import { useOs } from '@app/hooks/useOs';
-import { DOWNLOAD_URLS } from '@app/constants/downloads';
+import { useState, useEffect, useMemo, useCallback } from "react";
+import { useOs } from "@app/hooks/useOs";
+import { DOWNLOAD_URLS } from "@app/constants/downloads";
 
 interface OsInfo {
   label: string;
@@ -29,30 +29,34 @@ interface UseOnboardingDownloadResult {
 
 export function useOnboardingDownload(): UseOnboardingDownloadResult {
   const osType = useOs();
-  const [selectedDownloadUrl, setSelectedDownloadUrl] = useState<string>('');
+  const [selectedDownloadUrl, setSelectedDownloadUrl] = useState<string>("");
 
   const osInfo = useMemo<OsInfo>(() => {
     switch (osType) {
-      case 'windows':
-        return { label: 'Windows', url: DOWNLOAD_URLS.WINDOWS };
-      case 'mac-apple':
-        return { label: 'Mac (Apple Silicon)', url: DOWNLOAD_URLS.MAC_APPLE_SILICON };
-      case 'mac-intel':
-        return { label: 'Mac (Intel)', url: DOWNLOAD_URLS.MAC_INTEL };
-      case 'linux-x64':
-      case 'linux-arm64':
-        return { label: 'Linux', url: DOWNLOAD_URLS.LINUX_DOCS };
+      case "windows":
+        return { label: "Windows", url: DOWNLOAD_URLS.WINDOWS };
+      case "mac-apple":
+        return { label: "Mac (Apple Silicon)", url: DOWNLOAD_URLS.MAC_APPLE_SILICON };
+      case "mac-intel":
+        return { label: "Mac (Intel)", url: DOWNLOAD_URLS.MAC_INTEL };
+      case "linux-x64":
+      case "linux-arm64":
+        return { label: "Linux", url: DOWNLOAD_URLS.LINUX_DOCS };
       default:
-        return { label: '', url: '' };
+        return { label: "", url: "" };
     }
   }, [osType]);
 
-  const osOptions = useMemo<OsOption[]>(() => [
-    { label: 'Windows', url: DOWNLOAD_URLS.WINDOWS, value: 'windows' },
-    { label: 'Mac (Apple Silicon)', url: DOWNLOAD_URLS.MAC_APPLE_SILICON, value: 'mac-apple' },
-    { label: 'Mac (Intel)', url: DOWNLOAD_URLS.MAC_INTEL, value: 'mac-intel' },
-    { label: 'Linux', url: DOWNLOAD_URLS.LINUX_DOCS, value: 'linux' },
-  ].filter((opt) => opt.url), []);
+  const osOptions = useMemo<OsOption[]>(
+    () =>
+      [
+        { label: "Windows", url: DOWNLOAD_URLS.WINDOWS, value: "windows" },
+        { label: "Mac (Apple Silicon)", url: DOWNLOAD_URLS.MAC_APPLE_SILICON, value: "mac-apple" },
+        { label: "Mac (Intel)", url: DOWNLOAD_URLS.MAC_INTEL, value: "mac-intel" },
+        { label: "Linux", url: DOWNLOAD_URLS.LINUX_DOCS, value: "linux" },
+      ].filter((opt) => opt.url),
+    [],
+  );
 
   // Initialize selected URL from detected OS
   useEffect(() => {
@@ -64,7 +68,7 @@ export function useOnboardingDownload(): UseOnboardingDownloadResult {
   const handleDownloadSelected = useCallback(() => {
     const downloadUrl = selectedDownloadUrl || osInfo.url;
     if (downloadUrl) {
-      window.open(downloadUrl, '_blank', 'noopener');
+      window.open(downloadUrl, "_blank", "noopener");
     }
   }, [selectedDownloadUrl, osInfo.url]);
 
@@ -76,4 +80,3 @@ export function useOnboardingDownload(): UseOnboardingDownloadResult {
     handleDownloadSelected,
   };
 }
-
diff --git a/frontend/src/core/components/onboarding/useOnboardingEffects.ts b/frontend/src/core/components/onboarding/useOnboardingEffects.ts
index f7eacb1f9c..e92fff2da2 100644
--- a/frontend/src/core/components/onboarding/useOnboardingEffects.ts
+++ b/frontend/src/core/components/onboarding/useOnboardingEffects.ts
@@ -1,27 +1,27 @@
-import { useEffect, useCallback, useState } from 'react';
+import { useEffect, useCallback, useState } from "react";
 import {
   SERVER_LICENSE_REQUEST_EVENT,
   START_TOUR_EVENT,
   type ServerLicenseRequestPayload,
   type TourType,
   type StartTourPayload,
-} from '@app/constants/events';
-import type { OnboardingRuntimeState } from '@app/components/onboarding/orchestrator/onboardingConfig';
+} from "@app/constants/events";
+import type { OnboardingRuntimeState } from "@app/components/onboarding/orchestrator/onboardingConfig";
 
 export function useServerLicenseRequest(): {
   showLicenseSlide: boolean;
-  licenseNotice: OnboardingRuntimeState['licenseNotice'] | null;
+  licenseNotice: OnboardingRuntimeState["licenseNotice"] | null;
   closeLicenseSlide: () => void;
 } {
   const [showLicenseSlide, setShowLicenseSlide] = useState(false);
-  const [licenseNotice, setLicenseNotice] = useState<OnboardingRuntimeState['licenseNotice'] | null>(null);
+  const [licenseNotice, setLicenseNotice] = useState<OnboardingRuntimeState["licenseNotice"] | null>(null);
 
   useEffect(() => {
-    if (typeof window === 'undefined') return;
+    if (typeof window === "undefined") return;
 
     const handleLicenseRequest = (event: Event) => {
       const { detail } = event as CustomEvent<ServerLicenseRequestPayload>;
-      
+
       if (detail?.licenseNotice) {
         setLicenseNotice({
           totalUsers: detail.licenseNotice.totalUsers ?? null,
@@ -30,7 +30,7 @@ export function useServerLicenseRequest(): {
           requiresLicense: true,
         });
       }
-      
+
       setShowLicenseSlide(true);
     };
 
@@ -51,14 +51,14 @@ export function useTourRequest(): {
   clearTourRequest: () => void;
 } {
   const [tourRequested, setTourRequested] = useState(false);
-  const [requestedTourType, setRequestedTourType] = useState<TourType>('whatsnew');
+  const [requestedTourType, setRequestedTourType] = useState<TourType>("whatsnew");
 
   useEffect(() => {
-    if (typeof window === 'undefined') return;
+    if (typeof window === "undefined") return;
 
     const handleTourRequest = (event: Event) => {
       const { detail } = event as CustomEvent<StartTourPayload>;
-      setRequestedTourType(detail?.tourType ?? 'whatsnew');
+      setRequestedTourType(detail?.tourType ?? "whatsnew");
       setTourRequested(true);
     };
 
diff --git a/frontend/src/core/components/onboarding/userStepsConfig.ts b/frontend/src/core/components/onboarding/userStepsConfig.ts
index 5a936b3d65..491d1057e5 100644
--- a/frontend/src/core/components/onboarding/userStepsConfig.ts
+++ b/frontend/src/core/components/onboarding/userStepsConfig.ts
@@ -1,5 +1,5 @@
-import type { StepType } from '@reactour/tour';
-import type { TFunction } from 'i18next';
+import type { StepType } from "@reactour/tour";
+import type { TFunction } from "i18next";
 
 export enum TourStep {
   ALL_TOOLS,
@@ -53,8 +53,11 @@ export function createUserStepsConfig({ t, actions }: CreateUserStepsConfigArgs)
   return {
     [TourStep.ALL_TOOLS]: {
       selector: '[data-tour="tool-panel"]',
-      content: t('onboarding.allTools', 'This is the <strong>Tools</strong> panel, where you can browse and select from all available PDF tools.'),
-      position: 'center',
+      content: t(
+        "onboarding.allTools",
+        "This is the <strong>Tools</strong> panel, where you can browse and select from all available PDF tools.",
+      ),
+      position: "center",
       padding: 0,
       action: () => {
         saveWorkbenchState();
@@ -64,28 +67,40 @@ export function createUserStepsConfig({ t, actions }: CreateUserStepsConfigArgs)
     },
     [TourStep.SELECT_CROP_TOOL]: {
       selector: '[data-tour="tool-button-crop"]',
-      content: t('onboarding.selectCropTool', "Let's select the <strong>Crop</strong> tool to demonstrate how to use one of the tools."),
-      position: 'right',
+      content: t(
+        "onboarding.selectCropTool",
+        "Let's select the <strong>Crop</strong> tool to demonstrate how to use one of the tools.",
+      ),
+      position: "right",
       padding: 0,
       actionAfter: () => selectCropTool(),
     },
     [TourStep.TOOL_INTERFACE]: {
       selector: '[data-tour="tool-panel"]',
-      content: t('onboarding.toolInterface', "This is the <strong>Crop</strong> tool interface. As you can see, there's not much there because we haven't added any PDF files to work with yet."),
-      position: 'center',
+      content: t(
+        "onboarding.toolInterface",
+        "This is the <strong>Crop</strong> tool interface. As you can see, there's not much there because we haven't added any PDF files to work with yet.",
+      ),
+      position: "center",
       padding: 0,
     },
     [TourStep.FILES_BUTTON]: {
       selector: '[data-tour="files-button"]',
-      content: t('onboarding.filesButton', "The <strong>Files</strong> button on the Quick Access bar allows you to upload PDFs to use the tools on."),
-      position: 'right',
+      content: t(
+        "onboarding.filesButton",
+        "The <strong>Files</strong> button on the Quick Access bar allows you to upload PDFs to use the tools on.",
+      ),
+      position: "right",
       padding: 10,
       action: () => openFilesModal(),
     },
     [TourStep.FILE_SOURCES]: {
       selector: '[data-tour="file-sources"]',
-      content: t('onboarding.fileSources', "You can upload new files or access recent files from here. For the tour, we'll just use a sample file."),
-      position: 'right',
+      content: t(
+        "onboarding.fileSources",
+        "You can upload new files or access recent files from here. For the tour, we'll just use a sample file.",
+      ),
+      position: "right",
       padding: 0,
       actionAfter: () => {
         loadSampleFile();
@@ -94,62 +109,88 @@ export function createUserStepsConfig({ t, actions }: CreateUserStepsConfigArgs)
     },
     [TourStep.WORKBENCH]: {
       selector: '[data-tour="workbench"]',
-      content: t('onboarding.workbench', 'This is the <strong>Workbench</strong> - the main area where you view and edit your PDFs.'),
-      position: 'center',
+      content: t(
+        "onboarding.workbench",
+        "This is the <strong>Workbench</strong> - the main area where you view and edit your PDFs.",
+      ),
+      position: "center",
       padding: 0,
     },
     [TourStep.ACTIVE_FILES]: {
       selector: '[data-tour="workbench"]',
-      content: t('onboarding.activeFiles', "The <strong>Active Files</strong> view shows all of the PDFs you have loaded into the tool, and allows you to select which ones to process."),
-      position: 'center',
+      content: t(
+        "onboarding.activeFiles",
+        "The <strong>Active Files</strong> view shows all of the PDFs you have loaded into the tool, and allows you to select which ones to process.",
+      ),
+      position: "center",
       padding: 0,
       action: () => switchToActiveFiles(),
     },
     [TourStep.FILE_CHECKBOX]: {
       selector: '[data-tour="file-card-checkbox"]',
-      content: t('onboarding.fileCheckbox', "Clicking one of the files selects it for processing. You can select multiple files for batch operations."),
-      position: 'top',
+      content: t(
+        "onboarding.fileCheckbox",
+        "Clicking one of the files selects it for processing. You can select multiple files for batch operations.",
+      ),
+      position: "top",
       padding: 10,
     },
     [TourStep.CROP_SETTINGS]: {
       selector: '[data-tour="crop-settings"]',
-      content: t('onboarding.cropSettings', "Now that we've selected the file we want crop, we can configure the <strong>Crop</strong> tool to choose the area that we want to crop the PDF to."),
-      position: 'left',
+      content: t(
+        "onboarding.cropSettings",
+        "Now that we've selected the file we want crop, we can configure the <strong>Crop</strong> tool to choose the area that we want to crop the PDF to.",
+      ),
+      position: "left",
       padding: 10,
       action: () => modifyCropSettings(),
     },
     [TourStep.RUN_BUTTON]: {
       selector: '[data-tour="run-button"]',
-      content: t('onboarding.runButton', "Once the tool has been configured, this button allows you to run the tool on all the selected PDFs."),
-      position: 'top',
+      content: t(
+        "onboarding.runButton",
+        "Once the tool has been configured, this button allows you to run the tool on all the selected PDFs.",
+      ),
+      position: "top",
       padding: 10,
       actionAfter: () => executeTool(),
     },
     [TourStep.RESULTS]: {
       selector: '[data-tour="tool-panel"]',
-      content: t('onboarding.results', "After the tool has finished running, the <strong>Review</strong> step will show a preview of the results in this panel, and allow you to undo the operation or download the file. "),
-      position: 'center',
+      content: t(
+        "onboarding.results",
+        "After the tool has finished running, the <strong>Review</strong> step will show a preview of the results in this panel, and allow you to undo the operation or download the file. ",
+      ),
+      position: "center",
       padding: 0,
     },
     [TourStep.FILE_REPLACEMENT]: {
       selector: '[data-tour="file-card-checkbox"]',
-      content: t('onboarding.fileReplacement', "The modified file will replace the original file in the Workbench automatically, allowing you to easily run it through more tools."),
-      position: 'left',
+      content: t(
+        "onboarding.fileReplacement",
+        "The modified file will replace the original file in the Workbench automatically, allowing you to easily run it through more tools.",
+      ),
+      position: "left",
       padding: 10,
     },
     [TourStep.PIN_BUTTON]: {
       selector: '[data-tour="file-card-pin"]',
-      content: t('onboarding.pinButton', "You can use the <strong>Pin</strong> button if you'd rather your files stay active after running tools on them."),
-      position: 'left',
+      content: t(
+        "onboarding.pinButton",
+        "You can use the <strong>Pin</strong> button if you'd rather your files stay active after running tools on them.",
+      ),
+      position: "left",
       padding: 10,
       action: () => pinFile(),
     },
     [TourStep.WRAP_UP]: {
       selector: '[data-tour="help-button"]',
-      content: t('onboarding.wrapUp', "You're all set! You've learnt about the main areas of the app and how to use them. Click the <strong>Help</strong> button whenever you like to see this tour again."),
-      position: 'right',
+      content: t(
+        "onboarding.wrapUp",
+        "You're all set! You've learnt about the main areas of the app and how to use them. Click the <strong>Help</strong> button whenever you like to see this tour again.",
+      ),
+      position: "right",
       padding: 10,
     },
   };
 }
-
diff --git a/frontend/src/core/components/onboarding/whatsNewStepsConfig.ts b/frontend/src/core/components/onboarding/whatsNewStepsConfig.ts
index cb86644c4a..a5562f800d 100644
--- a/frontend/src/core/components/onboarding/whatsNewStepsConfig.ts
+++ b/frontend/src/core/components/onboarding/whatsNewStepsConfig.ts
@@ -1,8 +1,8 @@
-import type { StepType } from '@reactour/tour';
-import type { TFunction } from 'i18next';
+import type { StepType } from "@reactour/tour";
+import type { TFunction } from "i18next";
 
 async function waitForElement(selector: string, timeoutMs = 7000, intervalMs = 100): Promise<void> {
-  if (typeof document === 'undefined') return;
+  if (typeof document === "undefined") return;
   const start = Date.now();
   // Immediate hit
   if (document.querySelector(selector)) return;
@@ -20,7 +20,7 @@ async function waitForElement(selector: string, timeoutMs = 7000, intervalMs = 1
 }
 
 async function waitForHighlightable(selector: string, timeoutMs = 7000, intervalMs = 500): Promise<void> {
-  if (typeof document === 'undefined') return;
+  if (typeof document === "undefined") return;
   const start = Date.now();
 
   return new Promise((resolve) => {
@@ -29,8 +29,8 @@ async function waitForHighlightable(selector: string, timeoutMs = 7000, interval
       const isVisible = !!el && el.getClientRects().length > 0;
       if (isVisible || Date.now() - start >= timeoutMs) {
         // Nudge Reactour to recalc positions in case layout shifted
-        window.dispatchEvent(new Event('resize'));
-        requestAnimationFrame(() => window.dispatchEvent(new Event('resize')));
+        window.dispatchEvent(new Event("resize"));
+        requestAnimationFrame(() => window.dispatchEvent(new Event("resize")));
         resolve();
         return;
       }
@@ -85,10 +85,10 @@ export function createWhatsNewStepsConfig({ t, actions }: CreateWhatsNewStepsCon
     [WhatsNewTourStep.QUICK_ACCESS]: {
       selector: '[data-tour="quick-access-bar"]',
       content: t(
-        'onboarding.whatsNew.quickAccess',
-        'Start at the <strong>Quick Access</strong> rail to jump between Reader, Automate, your files, and all the tours.'
+        "onboarding.whatsNew.quickAccess",
+        "Start at the <strong>Quick Access</strong> rail to jump between Reader, Automate, your files, and all the tours.",
       ),
-      position: 'right',
+      position: "right",
       padding: 10,
       action: () => {
         saveWorkbenchState();
@@ -99,19 +99,19 @@ export function createWhatsNewStepsConfig({ t, actions }: CreateWhatsNewStepsCon
     [WhatsNewTourStep.LEFT_PANEL]: {
       selector: '[data-tour="tool-panel"]',
       content: t(
-        'onboarding.whatsNew.leftPanel',
-        'The left <strong>Tools</strong> panel lists everything you can do. Browse categories or search to find a tool quickly.'
+        "onboarding.whatsNew.leftPanel",
+        "The left <strong>Tools</strong> panel lists everything you can do. Browse categories or search to find a tool quickly.",
       ),
-      position: 'center',
+      position: "center",
       padding: 0,
     },
     [WhatsNewTourStep.FILE_UPLOAD]: {
       selector: '[data-tour="files-button"]',
       content: t(
-        'onboarding.whatsNew.fileUpload',
-        'Use the <strong>Files</strong> button to upload or pick a recent PDF. We will load a sample so you can see the workspace.'
+        "onboarding.whatsNew.fileUpload",
+        "Use the <strong>Files</strong> button to upload or pick a recent PDF. We will load a sample so you can see the workspace.",
       ),
-      position: 'right',
+      position: "right",
       padding: 10,
       action: async () => {
         openFilesModal();
@@ -130,10 +130,10 @@ export function createWhatsNewStepsConfig({ t, actions }: CreateWhatsNewStepsCon
       selector: '[data-tour="right-rail-controls"]',
       highlightedSelectors: ['[data-tour="right-rail-controls"]', '[data-tour="right-rail-settings"]'],
       content: t(
-        'onboarding.whatsNew.rightRail',
-        'The <strong>Right Rail</strong> holds quick actions to select files, change theme or language, and download results.'
+        "onboarding.whatsNew.rightRail",
+        "The <strong>Right Rail</strong> holds quick actions to select files, change theme or language, and download results.",
       ),
-      position: 'left',
+      position: "left",
       padding: 10,
       action: async () => {
         await waitForElement('[data-tour="right-rail-controls"]', 7000, 100);
@@ -143,10 +143,10 @@ export function createWhatsNewStepsConfig({ t, actions }: CreateWhatsNewStepsCon
     [WhatsNewTourStep.TOP_BAR]: {
       selector: '[data-tour="view-switcher"]',
       content: t(
-        'onboarding.whatsNew.topBar',
-        'The top bar lets you swap between <strong>Viewer</strong>, <strong>Page Editor</strong>, and <strong>Active Files</strong>.'
+        "onboarding.whatsNew.topBar",
+        "The top bar lets you swap between <strong>Viewer</strong>, <strong>Page Editor</strong>, and <strong>Active Files</strong>.",
       ),
-      position: 'bottom',
+      position: "bottom",
       padding: 8,
       // Ensure the switcher has mounted before this step renders
       action: async () => {
@@ -157,11 +157,8 @@ export function createWhatsNewStepsConfig({ t, actions }: CreateWhatsNewStepsCon
     },
     [WhatsNewTourStep.PAGE_EDITOR_VIEW]: {
       selector: '[data-tour="view-switcher"]',
-      content: t(
-        'onboarding.whatsNew.pageEditorView',
-        'Switch to the Page Editor to reorder, rotate, or delete pages.'
-      ),
-      position: 'bottom',
+      content: t("onboarding.whatsNew.pageEditorView", "Switch to the Page Editor to reorder, rotate, or delete pages."),
+      position: "bottom",
       padding: 8,
       action: async () => {
         switchToPageEditor();
@@ -172,10 +169,10 @@ export function createWhatsNewStepsConfig({ t, actions }: CreateWhatsNewStepsCon
     [WhatsNewTourStep.ACTIVE_FILES_VIEW]: {
       selector: '[data-tour="view-switcher"]',
       content: t(
-        'onboarding.whatsNew.activeFilesView',
-        'Use Active Files to see everything you have open and pick what to work on.'
+        "onboarding.whatsNew.activeFilesView",
+        "Use Active Files to see everything you have open and pick what to work on.",
       ),
-      position: 'bottom',
+      position: "bottom",
       padding: 8,
       action: async () => {
         switchToActiveFiles();
@@ -186,12 +183,11 @@ export function createWhatsNewStepsConfig({ t, actions }: CreateWhatsNewStepsCon
     [WhatsNewTourStep.WRAP_UP]: {
       selector: '[data-tour="help-button"]',
       content: t(
-        'onboarding.whatsNew.wrapUp',
-        'That is what is new in V2. Open the <strong>Tours</strong> menu anytime to replay this, the Tools tour, or the Admin tour.'
+        "onboarding.whatsNew.wrapUp",
+        "That is what is new in V2. Open the <strong>Tours</strong> menu anytime to replay this, the Tools tour, or the Admin tour.",
       ),
-      position: 'right',
+      position: "right",
       padding: 10,
     },
   };
 }
-
diff --git a/frontend/src/core/components/pageEditor/BulkSelectionPanel.tsx b/frontend/src/core/components/pageEditor/BulkSelectionPanel.tsx
index 81d4743331..b18c8a23c4 100644
--- a/frontend/src/core/components/pageEditor/BulkSelectionPanel.tsx
+++ b/frontend/src/core/components/pageEditor/BulkSelectionPanel.tsx
@@ -1,9 +1,9 @@
-import { useState } from 'react';
-import classes from '@app/components/pageEditor/bulkSelectionPanel/BulkSelectionPanel.module.css';
-import PageSelectionInput from '@app/components/pageEditor/bulkSelectionPanel/PageSelectionInput';
-import SelectedPagesDisplay from '@app/components/pageEditor/bulkSelectionPanel/SelectedPagesDisplay';
-import PageSelectionSyntaxHint from '@app/components/shared/PageSelectionSyntaxHint';
-import AdvancedSelectionPanel from '@app/components/pageEditor/bulkSelectionPanel/AdvancedSelectionPanel';
+import { useState } from "react";
+import classes from "@app/components/pageEditor/bulkSelectionPanel/BulkSelectionPanel.module.css";
+import PageSelectionInput from "@app/components/pageEditor/bulkSelectionPanel/PageSelectionInput";
+import SelectedPagesDisplay from "@app/components/pageEditor/bulkSelectionPanel/SelectedPagesDisplay";
+import PageSelectionSyntaxHint from "@app/components/shared/PageSelectionSyntaxHint";
+import AdvancedSelectionPanel from "@app/components/pageEditor/bulkSelectionPanel/AdvancedSelectionPanel";
 
 interface BulkSelectionPanelProps {
   csvInput: string;
@@ -24,8 +24,8 @@ const BulkSelectionPanel = ({
   const maxPages = displayDocument?.pages?.length ?? 0;
 
   const handleClear = () => {
-    setCsvInput('');
-    onUpdatePagesFromCSV('');
+    setCsvInput("");
+    onUpdatePagesFromCSV("");
   };
 
   return (
@@ -41,11 +41,7 @@ const BulkSelectionPanel = ({
 
       <PageSelectionSyntaxHint input={csvInput} maxPages={maxPages} variant="panel" />
 
-      <SelectedPagesDisplay
-        selectedPageIds={selectedPageIds}
-        displayDocument={displayDocument}
-        syntaxError={null}
-      />
+      <SelectedPagesDisplay selectedPageIds={selectedPageIds} displayDocument={displayDocument} syntaxError={null} />
 
       <AdvancedSelectionPanel
         csvInput={csvInput}
@@ -58,4 +54,4 @@ const BulkSelectionPanel = ({
   );
 };
 
-export default BulkSelectionPanel;
\ No newline at end of file
+export default BulkSelectionPanel;
diff --git a/frontend/src/core/components/pageEditor/DragDropGrid.tsx b/frontend/src/core/components/pageEditor/DragDropGrid.tsx
index 47225c19fe..5d13b5d1c9 100644
--- a/frontend/src/core/components/pageEditor/DragDropGrid.tsx
+++ b/frontend/src/core/components/pageEditor/DragDropGrid.tsx
@@ -1,14 +1,10 @@
-import React, { useRef, useEffect, useState, useCallback, useMemo } from 'react';
-import { Box } from '@mantine/core';
-import { useVirtualizer } from '@tanstack/react-virtual';
-import { GRID_CONSTANTS } from '@app/components/pageEditor/constants';
-import styles from '@app/components/pageEditor/DragDropGrid.module.css';
-import {
-  Z_INDEX_SELECTION_BOX,
-  Z_INDEX_DROP_INDICATOR,
-  Z_INDEX_DRAG_BADGE,
-} from '@app/styles/zIndex';
-import { LocalIcon } from '@app/components/shared/LocalIcon';
+import React, { useRef, useEffect, useState, useCallback, useMemo } from "react";
+import { Box } from "@mantine/core";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { GRID_CONSTANTS } from "@app/components/pageEditor/constants";
+import styles from "@app/components/pageEditor/DragDropGrid.module.css";
+import { Z_INDEX_SELECTION_BOX, Z_INDEX_DROP_INDICATOR, Z_INDEX_DRAG_BADGE } from "@app/styles/zIndex";
+import { LocalIcon } from "@app/components/shared/LocalIcon";
 import {
   DndContext,
   DragEndEvent,
@@ -20,7 +16,7 @@ import {
   closestCenter,
   useDraggable,
   useDroppable,
-} from '@dnd-kit/core';
+} from "@dnd-kit/core";
 
 interface DragDropItem {
   id: string;
@@ -33,7 +29,17 @@ interface DragDropItem {
 interface DragDropGridProps<T extends DragDropItem> {
   items: T[];
   onReorderPages: (sourcePageNumber: number, targetIndex: number, selectedPageIds?: string[]) => void;
-  renderItem: (item: T, index: number, refs: React.MutableRefObject<Map<string, HTMLDivElement>>, boxSelectedIds: string[], clearBoxSelection: () => void, activeDragIds: string[], justMoved: boolean, dragHandleProps?: any, zoomLevel?: number) => React.ReactNode;
+  renderItem: (
+    item: T,
+    index: number,
+    refs: React.MutableRefObject<Map<string, HTMLDivElement>>,
+    boxSelectedIds: string[],
+    clearBoxSelection: () => void,
+    activeDragIds: string[],
+    justMoved: boolean,
+    dragHandleProps?: any,
+    zoomLevel?: number,
+  ) => React.ReactNode;
   getThumbnailData?: (itemId: string) => { src: string; rotation: number } | null;
   zoomLevel?: number;
   selectedFileIds?: string[];
@@ -41,7 +47,7 @@ interface DragDropGridProps<T extends DragDropItem> {
   onVisibleItemsChange?: (items: T[]) => void;
 }
 
-type DropSide = 'left' | 'right' | null;
+type DropSide = "left" | "right" | null;
 
 type ItemRect = { id: string; rect: DOMRect };
 
@@ -131,13 +137,13 @@ function resolveDropHint(
   let dropSide: DropSide;
   if (cursorX < firstItem.rect.left) {
     hoveredItem = firstItem;
-    dropSide = 'left';
+    dropSide = "left";
   } else if (cursorX > lastItem.rect.right) {
     hoveredItem = lastItem;
-    dropSide = 'right';
+    dropSide = "right";
   } else {
     const midpoint = hoveredItem.rect.left + hoveredItem.rect.width / 2;
-    dropSide = cursorX >= midpoint ? 'right' : 'left';
+    dropSide = cursorX >= midpoint ? "right" : "left";
   }
 
   return { hoveredId: hoveredItem.id, dropSide };
@@ -168,15 +174,15 @@ function resolveTargetIndex<T extends DragDropItem>(
   };
 
   if (hoveredId) {
-    const filteredIndex = filteredItems.findIndex(item => item.id === hoveredId);
+    const filteredIndex = filteredItems.findIndex((item) => item.id === hoveredId);
     if (filteredIndex !== -1) {
-      const adjustedIndex = filteredIndex + (dropSide === 'right' ? 1 : 0);
+      const adjustedIndex = filteredIndex + (dropSide === "right" ? 1 : 0);
       return convertFilteredIndexToOriginal(adjustedIndex);
     }
   }
 
   if (fallbackIndex !== null && fallbackIndex !== undefined) {
-    const adjustedIndex = fallbackIndex + (dropSide === 'right' ? 1 : 0);
+    const adjustedIndex = fallbackIndex + (dropSide === "right" ? 1 : 0);
     return convertFilteredIndexToOriginal(adjustedIndex);
   }
 
@@ -194,15 +200,41 @@ interface DraggableItemProps<T extends DragDropItem> {
   justMoved: boolean;
   getThumbnailData?: (itemId: string) => { src: string; rotation: number } | null;
   onUpdateDropTarget: (itemId: string | null) => void;
-  renderItem: (item: T, index: number, refs: React.MutableRefObject<Map<string, HTMLDivElement>>, boxSelectedIds: string[], clearBoxSelection: () => void, activeDragIds: string[], justMoved: boolean, dragHandleProps?: any, zoomLevel?: number) => React.ReactNode;
+  renderItem: (
+    item: T,
+    index: number,
+    refs: React.MutableRefObject<Map<string, HTMLDivElement>>,
+    boxSelectedIds: string[],
+    clearBoxSelection: () => void,
+    activeDragIds: string[],
+    justMoved: boolean,
+    dragHandleProps?: any,
+    zoomLevel?: number,
+  ) => React.ReactNode;
   zoomLevel: number;
   selectedPageIds?: string[];
 }
 
-const DraggableItemInner = <T extends DragDropItem>({ item, index, itemRefs, boxSelectedPageIds, clearBoxSelection, activeDragIds, justMoved, getThumbnailData, renderItem, onUpdateDropTarget, zoomLevel }: DraggableItemProps<T>) => {
+const DraggableItemInner = <T extends DragDropItem>({
+  item,
+  index,
+  itemRefs,
+  boxSelectedPageIds,
+  clearBoxSelection,
+  activeDragIds,
+  justMoved,
+  getThumbnailData,
+  renderItem,
+  onUpdateDropTarget,
+  zoomLevel,
+}: DraggableItemProps<T>) => {
   const isPlaceholder = Boolean(item.isPlaceholder);
   const pageNumber = (item as any).pageNumber ?? index + 1;
-  const { attributes, listeners, setNodeRef: setDraggableRef } = useDraggable({
+  const {
+    attributes,
+    listeners,
+    setNodeRef: setDraggableRef,
+  } = useDraggable({
     id: item.id,
     disabled: isPlaceholder,
     data: {
@@ -215,21 +247,21 @@ const DraggableItemInner = <T extends DragDropItem>({ item, index, itemRefs, box
         }
 
         const element = itemRefs.current.get(item.id);
-        const imgElement = element?.querySelector('img.ph-no-capture') as HTMLImageElement;
+        const imgElement = element?.querySelector("img.ph-no-capture") as HTMLImageElement;
         if (imgElement?.src) {
           return {
             src: imgElement.src,
-            rotation: imgElement.dataset.originalRotation ? parseInt(imgElement.dataset.originalRotation) : 0
+            rotation: imgElement.dataset.originalRotation ? parseInt(imgElement.dataset.originalRotation) : 0,
           };
         }
         return null;
-      }
-    }
+      },
+    },
   });
 
   const { setNodeRef: setDroppableRef, isOver } = useDroppable({
     id: item.id,
-    data: { index, pageNumber: index + 1 }
+    data: { index, pageNumber: index + 1 },
   });
 
   // Notify parent when hover state changes
@@ -241,14 +273,27 @@ const DraggableItemInner = <T extends DragDropItem>({ item, index, itemRefs, box
     }
   }, [isOver, item.id, onUpdateDropTarget]);
 
-  const setNodeRef = useCallback((element: HTMLDivElement | null) => {
-    setDraggableRef(element);
-    setDroppableRef(element);
-  }, [setDraggableRef, setDroppableRef]);
+  const setNodeRef = useCallback(
+    (element: HTMLDivElement | null) => {
+      setDraggableRef(element);
+      setDroppableRef(element);
+    },
+    [setDraggableRef, setDroppableRef],
+  );
 
   return (
     <>
-      {renderItem(item, index, itemRefs, boxSelectedPageIds, clearBoxSelection, activeDragIds, justMoved, { ref: setNodeRef, ...attributes, ...listeners }, zoomLevel)}
+      {renderItem(
+        item,
+        index,
+        itemRefs,
+        boxSelectedPageIds,
+        clearBoxSelection,
+        activeDragIds,
+        justMoved,
+        { ref: setNodeRef, ...attributes, ...listeners },
+        zoomLevel,
+      )}
     </>
   );
 };
@@ -303,18 +348,17 @@ const DragDropGrid = <T extends DragDropItem>({
   const containerRef = useRef<HTMLDivElement>(null);
 
   const getScrollElement = useCallback(() => {
-    return containerRef.current?.closest('[data-scrolling-container]') as HTMLElement | null;
+    return containerRef.current?.closest("[data-scrolling-container]") as HTMLElement | null;
   }, []);
 
   // Create stable signature for items to ensure useMemo detects changes
-  const itemsSignature = useMemo(() => items.map(item => item.id).join(','), [items]);
-  const selectedFileIdsSignature = useMemo(() => selectedFileIds?.join(',') || '', [selectedFileIds]);
+  const itemsSignature = useMemo(() => items.map((item) => item.id).join(","), [items]);
+  const selectedFileIdsSignature = useMemo(() => selectedFileIds?.join(",") || "", [selectedFileIds]);
 
   const { filteredItems: visibleItems, filteredToOriginalIndex } = useMemo(() => {
     const filtered: T[] = [];
     const indexMap: number[] = [];
-    const selectedIds =
-      selectedFileIds && selectedFileIds.length > 0 ? new Set(selectedFileIds) : null;
+    const selectedIds = selectedFileIds && selectedFileIds.length > 0 ? new Set(selectedFileIds) : null;
 
     items.forEach((item, index) => {
       const isPlaceholder = Boolean(item.isPlaceholder);
@@ -322,8 +366,7 @@ const DragDropGrid = <T extends DragDropItem>({
         return;
       }
 
-      const belongsToVisibleFile =
-        !selectedIds || !item.originalFileId || selectedIds.has(item.originalFileId);
+      const belongsToVisibleFile = !selectedIds || !item.originalFileId || selectedIds.has(item.originalFileId);
 
       if (!belongsToVisibleFile) {
         return;
@@ -337,7 +380,7 @@ const DragDropGrid = <T extends DragDropItem>({
   }, [items, selectedFileIds, itemsSignature, selectedFileIdsSignature]);
 
   useEffect(() => {
-    const visibleIdSet = new Set(visibleItems.map(item => item.id));
+    const visibleIdSet = new Set(visibleItems.map((item) => item.id));
     itemRefs.current.forEach((_, pageId) => {
       if (!visibleIdSet.has(pageId)) {
         itemRefs.current.delete(pageId);
@@ -366,7 +409,7 @@ const DragDropGrid = <T extends DragDropItem>({
       activationConstraint: {
         distance: 10,
       },
-    })
+    }),
   );
 
   // Throttled pointer move handler for drop indicator
@@ -395,9 +438,9 @@ const DragDropGrid = <T extends DragDropItem>({
       }
     };
 
-    window.addEventListener('pointermove', handlePointerMove, { passive: true });
+    window.addEventListener("pointermove", handlePointerMove, { passive: true });
     return () => {
-      window.removeEventListener('pointermove', handlePointerMove);
+      window.removeEventListener("pointermove", handlePointerMove);
       if (rafId !== null) {
         cancelAnimationFrame(rafId);
       }
@@ -439,7 +482,7 @@ const DragDropGrid = <T extends DragDropItem>({
     updateLayout();
 
     // Listen for window resize
-    window.addEventListener('resize', updateLayout);
+    window.addEventListener("resize", updateLayout);
 
     // Use ResizeObserver for container size changes
     const resizeObserver = new ResizeObserver(updateLayout);
@@ -448,7 +491,7 @@ const DragDropGrid = <T extends DragDropItem>({
     }
 
     return () => {
-      window.removeEventListener('resize', updateLayout);
+      window.removeEventListener("resize", updateLayout);
       resizeObserver.disconnect();
     };
   }, [calculateItemsPerRow, zoomLevel]);
@@ -481,7 +524,7 @@ const DragDropGrid = <T extends DragDropItem>({
 
   // Re-measure virtualizer when zoom or items per row changes
   // Also remeasure when items change (not just length) to handle item additions/removals
-  const visibleItemsSignature = useMemo(() => visibleItems.map(item => item.id).join(','), [visibleItems]);
+  const visibleItemsSignature = useMemo(() => visibleItems.map((item) => item.id).join(","), [visibleItems]);
   useEffect(() => {
     rowVirtualizer.measure();
   }, [zoomLevel, itemsPerRow, visibleItems.length, visibleItemsSignature, rowVirtualizer]);
@@ -497,76 +540,77 @@ const DragDropGrid = <T extends DragDropItem>({
   }, []);
 
   // Box selection handlers
-  const handleMouseDown = useCallback((e: React.MouseEvent) => {
-    if (e.button !== 0) return; // Only respond to primary button
+  const handleMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      if (e.button !== 0) return; // Only respond to primary button
 
-    const container = containerRef.current;
-    if (!container) return;
+      const container = containerRef.current;
+      if (!container) return;
 
-    const clickTarget = e.target as Node;
-    let clickedPageId: string | null = null;
+      const clickTarget = e.target as Node;
+      let clickedPageId: string | null = null;
 
-    itemRefs.current.forEach((element, pageId) => {
-      if (element.contains(clickTarget)) {
-        clickedPageId = pageId;
+      itemRefs.current.forEach((element, pageId) => {
+        if (element.contains(clickTarget)) {
+          clickedPageId = pageId;
+        }
+      });
+
+      if (clickedPageId) {
+        // Clicking directly on a page shouldn't initiate box selection
+        // but clear previous box selection if clicking outside current group
+        if (boxSelectedPageIds.length > 0 && !boxSelectedPageIds.includes(clickedPageId)) {
+          setBoxSelectedPageIds([]);
+        }
+        return;
       }
-    });
 
-    if (clickedPageId) {
-      // Clicking directly on a page shouldn't initiate box selection
-      // but clear previous box selection if clicking outside current group
-      if (boxSelectedPageIds.length > 0 && !boxSelectedPageIds.includes(clickedPageId)) {
-        setBoxSelectedPageIds([]);
-      }
-      return;
-    }
+      e.preventDefault();
 
-    e.preventDefault();
+      const rect = container.getBoundingClientRect();
+      setIsBoxSelecting(true);
+      setBoxSelectStart({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+      setBoxSelectEnd({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+      setBoxSelectedPageIds([]);
+    },
+    [boxSelectedPageIds],
+  );
 
-    const rect = container.getBoundingClientRect();
-    setIsBoxSelecting(true);
-    setBoxSelectStart({ x: e.clientX - rect.left, y: e.clientY - rect.top });
-    setBoxSelectEnd({ x: e.clientX - rect.left, y: e.clientY - rect.top });
-    setBoxSelectedPageIds([]);
-  }, [boxSelectedPageIds]);
+  const handleMouseMove = useCallback(
+    (e: React.MouseEvent) => {
+      if (!isBoxSelecting || !boxSelectStart) return;
 
-  const handleMouseMove = useCallback((e: React.MouseEvent) => {
-    if (!isBoxSelecting || !boxSelectStart) return;
+      const rect = containerRef.current?.getBoundingClientRect();
+      if (!rect) return;
 
-    const rect = containerRef.current?.getBoundingClientRect();
-    if (!rect) return;
+      setBoxSelectEnd({ x: e.clientX - rect.left, y: e.clientY - rect.top });
 
-    setBoxSelectEnd({ x: e.clientX - rect.left, y: e.clientY - rect.top });
+      // Calculate which pages intersect with selection box
+      const boxLeft = Math.min(boxSelectStart.x, e.clientX - rect.left);
+      const boxRight = Math.max(boxSelectStart.x, e.clientX - rect.left);
+      const boxTop = Math.min(boxSelectStart.y, e.clientY - rect.top);
+      const boxBottom = Math.max(boxSelectStart.y, e.clientY - rect.top);
 
-    // Calculate which pages intersect with selection box
-    const boxLeft = Math.min(boxSelectStart.x, e.clientX - rect.left);
-    const boxRight = Math.max(boxSelectStart.x, e.clientX - rect.left);
-    const boxTop = Math.min(boxSelectStart.y, e.clientY - rect.top);
-    const boxBottom = Math.max(boxSelectStart.y, e.clientY - rect.top);
+      const selectedIds: string[] = [];
+      itemRefs.current.forEach((pageEl, pageId) => {
+        const pageRect = pageEl.getBoundingClientRect();
+        const pageLeft = pageRect.left - rect.left;
+        const pageRight = pageRect.right - rect.left;
+        const pageTop = pageRect.top - rect.top;
+        const pageBottom = pageRect.bottom - rect.top;
 
-    const selectedIds: string[] = [];
-    itemRefs.current.forEach((pageEl, pageId) => {
-      const pageRect = pageEl.getBoundingClientRect();
-      const pageLeft = pageRect.left - rect.left;
-      const pageRight = pageRect.right - rect.left;
-      const pageTop = pageRect.top - rect.top;
-      const pageBottom = pageRect.bottom - rect.top;
+        // Check if page intersects with selection box
+        const intersects = !(pageRight < boxLeft || pageLeft > boxRight || pageBottom < boxTop || pageTop > boxBottom);
 
-      // Check if page intersects with selection box
-      const intersects = !(
-        pageRight < boxLeft ||
-        pageLeft > boxRight ||
-        pageBottom < boxTop ||
-        pageTop > boxBottom
-      );
+        if (intersects) {
+          selectedIds.push(pageId);
+        }
+      });
 
-      if (intersects) {
-        selectedIds.push(pageId);
-      }
-    });
-
-    setBoxSelectedPageIds(selectedIds);
-  }, [isBoxSelecting, boxSelectStart]);
+      setBoxSelectedPageIds(selectedIds);
+    },
+    [isBoxSelecting, boxSelectStart],
+  );
 
   const handleMouseUp = useCallback(() => {
     if (isBoxSelecting) {
@@ -601,7 +645,6 @@ const DragDropGrid = <T extends DragDropItem>({
     setDragPreview(null);
   }, []);
 
-
   // Handle drag cancel
   const handleDragCancel = useCallback(() => {
     setActiveId(null);
@@ -611,64 +654,76 @@ const DragDropGrid = <T extends DragDropItem>({
   }, []);
 
   // Handle drag end
-  const handleDragEnd = useCallback((event: DragEndEvent) => {
-    const { active, over } = event;
-    const finalDropSide = dropSide;
-    setActiveId(null);
-    setDragPreview(null);
-    setHoveredItemId(null);
-    setDropSide(null);
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      const { active, over } = event;
+      const finalDropSide = dropSide;
+      setActiveId(null);
+      setDragPreview(null);
+      setHoveredItemId(null);
+      setDropSide(null);
 
-    if (!over || active.id === over.id) {
-      return;
-    }
+      if (!over || active.id === over.id) {
+        return;
+      }
 
-    const activeData = active.data.current;
-    if (!activeData) {
-      return;
-    }
+      const activeData = active.data.current;
+      if (!activeData) {
+        return;
+      }
 
-    const sourcePageNumber = activeData.pageNumber;
+      const sourcePageNumber = activeData.pageNumber;
 
-    const overData = over?.data.current;
-    let targetIndex = resolveTargetIndex(
+      const overData = over?.data.current;
+      let targetIndex = resolveTargetIndex(
+        hoveredItemId,
+        finalDropSide,
+        visibleItems,
+        filteredToOriginalIndex,
+        items.length,
+        overData ? overData.index : null,
+      );
+
+      if (targetIndex === null) {
+        return;
+      }
+      if (targetIndex < 0) targetIndex = 0;
+      if (targetIndex > items.length) targetIndex = items.length;
+
+      // Check if this page is box-selected
+      const isBoxSelected = boxSelectedPageIds.includes(active.id as string);
+      const pagesToDrag = isBoxSelected && boxSelectedPageIds.length > 0 ? boxSelectedPageIds : undefined;
+
+      // Call reorder with page number and target index
+      onReorderPages(sourcePageNumber, targetIndex, pagesToDrag);
+
+      // Highlight moved pages briefly
+      const movedIds = pagesToDrag ?? [active.id as string];
+      setJustMovedIds(movedIds);
+      if (highlightTimeoutRef.current) {
+        window.clearTimeout(highlightTimeoutRef.current);
+      }
+      highlightTimeoutRef.current = window.setTimeout(() => {
+        setJustMovedIds([]);
+        highlightTimeoutRef.current = null;
+      }, 1200);
+
+      // Clear box selection after drag
+      if (pagesToDrag) {
+        clearBoxSelection();
+      }
+    },
+    [
+      boxSelectedPageIds,
+      dropSide,
       hoveredItemId,
-      finalDropSide,
       visibleItems,
       filteredToOriginalIndex,
-      items.length,
-      overData ? overData.index : null
-    );
-
-    if (targetIndex === null) {
-      return;
-    }
-    if (targetIndex < 0) targetIndex = 0;
-    if (targetIndex > items.length) targetIndex = items.length;
-
-    // Check if this page is box-selected
-    const isBoxSelected = boxSelectedPageIds.includes(active.id as string);
-    const pagesToDrag = isBoxSelected && boxSelectedPageIds.length > 0 ? boxSelectedPageIds : undefined;
-
-    // Call reorder with page number and target index
-    onReorderPages(sourcePageNumber, targetIndex, pagesToDrag);
-
-    // Highlight moved pages briefly
-    const movedIds = pagesToDrag ?? [active.id as string];
-    setJustMovedIds(movedIds);
-    if (highlightTimeoutRef.current) {
-      window.clearTimeout(highlightTimeoutRef.current);
-    }
-    highlightTimeoutRef.current = window.setTimeout(() => {
-      setJustMovedIds([]);
-      highlightTimeoutRef.current = null;
-    }, 1200);
-
-    // Clear box selection after drag
-    if (pagesToDrag) {
-      clearBoxSelection();
-    }
-  }, [boxSelectedPageIds, dropSide, hoveredItemId, visibleItems, filteredToOriginalIndex, items, onReorderPages, clearBoxSelection]);
+      items,
+      onReorderPages,
+      clearBoxSelection,
+    ],
+  );
 
   // Calculate optimal width for centering
   const remToPx = parseFloat(getComputedStyle(document.documentElement).fontSize);
@@ -677,13 +732,16 @@ const DragDropGrid = <T extends DragDropItem>({
   const gridWidth = itemsPerRow * itemWidth + (itemsPerRow - 1) * itemGap;
 
   // Calculate selection box dimensions
-  const selectionBoxStyle = isBoxSelecting && boxSelectStart && boxSelectEnd ? {
-    left: Math.min(boxSelectStart.x, boxSelectEnd.x),
-    top: Math.min(boxSelectStart.y, boxSelectEnd.y),
-    width: Math.abs(boxSelectEnd.x - boxSelectStart.x),
-    height: Math.abs(boxSelectEnd.y - boxSelectStart.y),
-    zIndex: Z_INDEX_SELECTION_BOX,
-  } : null;
+  const selectionBoxStyle =
+    isBoxSelecting && boxSelectStart && boxSelectEnd
+      ? {
+          left: Math.min(boxSelectStart.x, boxSelectEnd.x),
+          top: Math.min(boxSelectStart.y, boxSelectEnd.y),
+          width: Math.abs(boxSelectEnd.x - boxSelectStart.x),
+          height: Math.abs(boxSelectEnd.y - boxSelectStart.y),
+          zIndex: Z_INDEX_SELECTION_BOX,
+        }
+      : null;
 
   // Calculate drop indicator position
   const dropIndicatorStyle = useMemo(() => {
@@ -698,9 +756,10 @@ const DragDropGrid = <T extends DragDropItem>({
 
     const top = itemRect.top - containerRect.top;
     const height = itemRect.height;
-    const left = dropSide === 'left'
-      ? itemRect.left - containerRect.left - itemGap / 2
-      : itemRect.right - containerRect.left + itemGap / 2;
+    const left =
+      dropSide === "left"
+        ? itemRect.left - containerRect.left - itemGap / 2
+        : itemRect.right - containerRect.left + itemGap / 2;
 
     return {
       left: `${left}px`,
@@ -718,23 +777,26 @@ const DragDropGrid = <T extends DragDropItem>({
     return [activeId];
   }, [activeId, boxSelectedPageIds]);
 
-  const handleWheelWhileDragging = useCallback((event: React.WheelEvent<HTMLDivElement>) => {
-    if (!activeId) {
-      return;
-    }
+  const handleWheelWhileDragging = useCallback(
+    (event: React.WheelEvent<HTMLDivElement>) => {
+      if (!activeId) {
+        return;
+      }
 
-    const scrollElement = getScrollElement();
-    if (!scrollElement) {
-      return;
-    }
+      const scrollElement = getScrollElement();
+      if (!scrollElement) {
+        return;
+      }
 
-    scrollElement.scrollBy({
-      top: event.deltaY,
-      left: event.deltaX,
-    });
+      scrollElement.scrollBy({
+        top: event.deltaY,
+        left: event.deltaX,
+      });
 
-    event.preventDefault();
-  }, [activeId, getScrollElement]);
+      event.preventDefault();
+    },
+    [activeId, getScrollElement],
+  );
 
   return (
     <DndContext
@@ -752,26 +814,16 @@ const DragDropGrid = <T extends DragDropItem>({
         onMouseUp={handleMouseUp}
         onWheel={handleWheelWhileDragging}
       >
-        {selectionBoxStyle && (
-          <div
-            className={styles.selectionBox}
-            style={selectionBoxStyle}
-          />
-        )}
+        {selectionBoxStyle && <div className={styles.selectionBox} style={selectionBoxStyle} />}
 
-        {dropIndicatorStyle && (
-          <div
-            className={styles.dropIndicator}
-            style={dropIndicatorStyle}
-          />
-        )}
+        {dropIndicatorStyle && <div className={styles.dropIndicator} style={dropIndicatorStyle} />}
 
         <div
           className={styles.virtualRows}
           style={{
             height: `${rowVirtualizer.getTotalSize()}px`,
             maxWidth: `${gridWidth}px`,
-            margin: '0 auto',
+            margin: "0 auto",
           }}
         >
           {virtualRows.map((virtualRow) => {
@@ -826,10 +878,7 @@ const DragDropGrid = <T extends DragDropItem>({
         {activeId && (
           <div className={styles.dragOverlay}>
             {boxSelectedPageIds.includes(activeId) && boxSelectedPageIds.length > 1 && (
-              <div
-                className={styles.dragOverlayBadge}
-                style={{ zIndex: Z_INDEX_DRAG_BADGE }}
-              >
+              <div className={styles.dragOverlayBadge} style={{ zIndex: Z_INDEX_DRAG_BADGE }}>
                 {boxSelectedPageIds.length}
               </div>
             )}
@@ -840,9 +889,9 @@ const DragDropGrid = <T extends DragDropItem>({
                 style={{
                   width: `calc(20rem * ${zoomLevel})`,
                   height: `calc(20rem * ${zoomLevel})`,
-                  objectFit: 'contain',
+                  objectFit: "contain",
                   transform: `rotate(${dragPreview.rotation}deg)`,
-                  pointerEvents: 'none',
+                  pointerEvents: "none",
                   opacity: 0.5,
                 }}
               />
@@ -852,11 +901,11 @@ const DragDropGrid = <T extends DragDropItem>({
                 style={{
                   width: `calc(20rem * ${zoomLevel})`,
                   height: `calc(20rem * ${zoomLevel})`,
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
-                  fontSize: '2rem',
-                  color: 'var(--mantine-color-dimmed)',
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  fontSize: "2rem",
+                  color: "var(--mantine-color-dimmed)",
                 }}
               >
                 <LocalIcon icon="description" width="3rem" height="3rem" />
diff --git a/frontend/src/core/components/pageEditor/FileThumbnail.tsx b/frontend/src/core/components/pageEditor/FileThumbnail.tsx
index b35ae89d0f..0407c32e8f 100644
--- a/frontend/src/core/components/pageEditor/FileThumbnail.tsx
+++ b/frontend/src/core/components/pageEditor/FileThumbnail.tsx
@@ -1,20 +1,20 @@
-import React, { useState, useCallback, useRef, useMemo, useEffect } from 'react';
-import { ActionIcon, CheckboxIndicator } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
-import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
-import PushPinIcon from '@mui/icons-material/PushPin';
-import PushPinOutlinedIcon from '@mui/icons-material/PushPinOutlined';
-import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
-import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import React, { useState, useCallback, useRef, useMemo, useEffect } from "react";
+import { ActionIcon, CheckboxIndicator } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
+import PushPinIcon from "@mui/icons-material/PushPin";
+import PushPinOutlinedIcon from "@mui/icons-material/PushPinOutlined";
+import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 
-import styles from '@app/components/pageEditor/PageEditor.module.css';
-import { useFileContext } from '@app/contexts/FileContext';
-import { FileId } from '@app/types/file';
-import { PrivateContent } from '@app/components/shared/PrivateContent';
-import { useFileActionTerminology } from '@app/hooks/useFileActionTerminology';
-import { useFileActionIcons } from '@app/hooks/useFileActionIcons';
-import { downloadFile } from '@app/services/downloadService';
+import styles from "@app/components/pageEditor/PageEditor.module.css";
+import { useFileContext } from "@app/contexts/FileContext";
+import { FileId } from "@app/types/file";
+import { PrivateContent } from "@app/components/shared/PrivateContent";
+import { useFileActionTerminology } from "@app/hooks/useFileActionTerminology";
+import { useFileActionIcons } from "@app/hooks/useFileActionIcons";
+import { downloadFile } from "@app/services/downloadService";
 
 interface FileItem {
   id: FileId;
@@ -66,13 +66,13 @@ const FileThumbnail = ({
 
   // Resolve the actual File object for pin/unpin operations
   const actualFile = useMemo(() => {
-    return activeFiles.find(f => f.fileId === file.id);
+    return activeFiles.find((f) => f.fileId === file.id);
   }, [activeFiles, file.id]);
   const isPinned = actualFile ? isFilePinned(actualFile) : false;
 
   const downloadSelectedFile = useCallback(() => {
     // Prefer parent-provided handler if available
-    if (typeof onDownloadFile === 'function') {
+    if (typeof onDownloadFile === "function") {
       onDownloadFile(file.id);
       return;
     }
@@ -80,7 +80,7 @@ const FileThumbnail = ({
     // Fallback: attempt to download using the File object if provided
     const maybeFile = (file as unknown as { file?: File }).file;
     if (maybeFile instanceof File) {
-      void downloadFile({ data: maybeFile, filename: maybeFile.name || file.name || 'download' });
+      void downloadFile({ data: maybeFile, filename: maybeFile.name || file.name || "download" });
       return;
     }
 
@@ -93,52 +93,55 @@ const FileThumbnail = ({
   const isSelected = selectedFiles.includes(file.id);
 
   // ---- Drag & drop wiring ----
-  const fileElementRef = useCallback((element: HTMLDivElement | null) => {
-    if (!element) return;
+  const fileElementRef = useCallback(
+    (element: HTMLDivElement | null) => {
+      if (!element) return;
 
-    dragElementRef.current = element;
+      dragElementRef.current = element;
 
-    const dragCleanup = draggable({
-      element,
-      getInitialData: () => ({
-        type: 'file',
-        fileId: file.id,
-        fileName: file.name,
-        selectedFiles: [file.id]  // Always drag only this file, ignore selection state
-      }),
-      onDragStart: () => {
-        setIsDragging(true);
-      },
-      onDrop: () => {
-        setIsDragging(false);
-      }
-    });
+      const dragCleanup = draggable({
+        element,
+        getInitialData: () => ({
+          type: "file",
+          fileId: file.id,
+          fileName: file.name,
+          selectedFiles: [file.id], // Always drag only this file, ignore selection state
+        }),
+        onDragStart: () => {
+          setIsDragging(true);
+        },
+        onDrop: () => {
+          setIsDragging(false);
+        },
+      });
 
-    const dropCleanup = dropTargetForElements({
-      element,
-      getData: () => ({
-        type: 'file',
-        fileId: file.id
-      }),
-      canDrop: ({ source }) => {
-        const sourceData = source.data;
-        return sourceData.type === 'file' && sourceData.fileId !== file.id;
-      },
-      onDrop: ({ source }) => {
-        const sourceData = source.data;
-        if (sourceData.type === 'file' && onReorderFiles) {
-          const sourceFileId = sourceData.fileId as FileId;
-          const selectedFileIds = sourceData.selectedFiles as FileId[];
-          onReorderFiles(sourceFileId, file.id, selectedFileIds);
-        }
-      }
-    });
+      const dropCleanup = dropTargetForElements({
+        element,
+        getData: () => ({
+          type: "file",
+          fileId: file.id,
+        }),
+        canDrop: ({ source }) => {
+          const sourceData = source.data;
+          return sourceData.type === "file" && sourceData.fileId !== file.id;
+        },
+        onDrop: ({ source }) => {
+          const sourceData = source.data;
+          if (sourceData.type === "file" && onReorderFiles) {
+            const sourceFileId = sourceData.fileId as FileId;
+            const selectedFileIds = sourceData.selectedFiles as FileId[];
+            onReorderFiles(sourceFileId, file.id, selectedFileIds);
+          }
+        },
+      });
 
-    return () => {
-      dragCleanup();
-      dropCleanup();
-    };
-  }, [file.id, file.name, selectedFiles, onReorderFiles]);
+      return () => {
+        dragCleanup();
+        dropCleanup();
+      };
+    },
+    [file.id, file.name, selectedFiles, onReorderFiles],
+  );
 
   // Update dropdown width on resize
   useEffect(() => {
@@ -146,8 +149,8 @@ const FileThumbnail = ({
       if (dragElementRef.current) setActionsWidth(dragElementRef.current.offsetWidth);
     };
     update();
-    window.addEventListener('resize', update);
-    return () => window.removeEventListener('resize', update);
+    window.addEventListener("resize", update);
+    return () => window.removeEventListener("resize", update);
   }, []);
 
   // Close the actions dropdown when hovering outside this file card (and its dropdown)
@@ -173,11 +176,11 @@ const FileThumbnail = ({
       }
     };
 
-    document.addEventListener('mousemove', handleMouseMove);
-    document.addEventListener('touchstart', handleTouchStart, { passive: true });
+    document.addEventListener("mousemove", handleMouseMove);
+    document.addEventListener("touchstart", handleTouchStart, { passive: true });
     return () => {
-      document.removeEventListener('mousemove', handleMouseMove);
-      document.removeEventListener('touchstart', handleTouchStart);
+      document.removeEventListener("mousemove", handleMouseMove);
+      document.removeEventListener("touchstart", handleTouchStart);
     };
   }, [showActions]);
 
@@ -187,7 +190,6 @@ const FileThumbnail = ({
     onToggleFile(file.id);
   };
 
-
   return (
     <div
       ref={fileElementRef}
@@ -198,7 +200,7 @@ const FileThumbnail = ({
       className={`${styles.card} w-[18rem] h-[22rem] select-none flex flex-col shadow-sm transition-all relative`}
       style={{
         opacity: isSupported ? (isDragging ? 0.9 : 1) : 0.5,
-        filter: isSupported ? 'none' : 'grayscale(50%)',
+        filter: isSupported ? "none" : "grayscale(50%)",
       }}
       tabIndex={0}
       role="listitem"
@@ -206,11 +208,7 @@ const FileThumbnail = ({
       onClick={handleCardClick}
     >
       {/* Header bar */}
-      <div
-        className={`${styles.header} ${
-          isSelected ? styles.headerSelected : styles.headerResting
-        }`}
-      >
+      <div className={`${styles.header} ${isSelected ? styles.headerSelected : styles.headerResting}`}>
         {/* Logo/checkbox area */}
         <div className={styles.logoMark}>
           {isSupported ? (
@@ -221,9 +219,7 @@ const FileThumbnail = ({
             />
           ) : (
             <div className={styles.unsupportedPill}>
-              <span>
-                {t('unsupported', 'Unsupported')}
-              </span>
+              <span>{t("unsupported", "Unsupported")}</span>
             </div>
           )}
         </div>
@@ -235,7 +231,7 @@ const FileThumbnail = ({
 
         {/* Kebab menu */}
         <ActionIcon
-          aria-label={t('moreOptions', 'More options')}
+          aria-label={t("moreOptions", "More options")}
           variant="subtle"
           className={styles.kebab}
           onClick={(e) => {
@@ -249,11 +245,7 @@ const FileThumbnail = ({
 
       {/* Actions overlay */}
       {showActions && (
-        <div
-          className={styles.actionsOverlay}
-          style={{ width: actionsWidth }}
-          onClick={(e) => e.stopPropagation()}
-        >
+        <div className={styles.actionsOverlay} style={{ width: actionsWidth }} onClick={(e) => e.stopPropagation()}>
           <button
             className={styles.actionRow}
             onClick={() => {
@@ -270,12 +262,15 @@ const FileThumbnail = ({
             }}
           >
             {isPinned ? <PushPinIcon fontSize="small" /> : <PushPinOutlinedIcon fontSize="small" />}
-            <span>{isPinned ? t('unpin', 'Unpin') : t('pin', 'Pin')}</span>
+            <span>{isPinned ? t("unpin", "Unpin") : t("pin", "Pin")}</span>
           </button>
 
           <button
             className={styles.actionRow}
-            onClick={() => { downloadSelectedFile(); setShowActions(false); }}
+            onClick={() => {
+              downloadSelectedFile();
+              setShowActions(false);
+            }}
           >
             <DownloadOutlinedIcon fontSize="small" />
             <span>{terminology.download}</span>
@@ -292,7 +287,7 @@ const FileThumbnail = ({
             }}
           >
             <DeleteOutlineIcon fontSize="small" />
-            <span>{t('delete', 'Delete')}</span>
+            <span>{t("delete", "Delete")}</span>
           </button>
         </div>
       )}
@@ -302,17 +297,17 @@ const FileThumbnail = ({
         {/* Stacked file effect - multiple shadows to simulate pages */}
         <div
           style={{
-            width: '100%',
-            height: '100%',
-            backgroundColor: 'var(--mantine-color-gray-1)',
+            width: "100%",
+            height: "100%",
+            backgroundColor: "var(--mantine-color-gray-1)",
             borderRadius: 6,
-            border: '1px solid var(--mantine-color-gray-3)',
+            border: "1px solid var(--mantine-color-gray-3)",
             padding: 4,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            position: 'relative',
-            boxShadow: '2px 2px 0 rgba(0,0,0,0.1), 4px 4px 0 rgba(0,0,0,0.05)'
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            position: "relative",
+            boxShadow: "2px 2px 0 rgba(0,0,0,0.1), 4px 4px 0 rgba(0,0,0,0.05)",
           }}
         >
           {file.thumbnail && (
@@ -324,21 +319,21 @@ const FileThumbnail = ({
                 onError={(e) => {
                   // Hide broken image if blob URL was revoked
                   const img = e.target as HTMLImageElement;
-                  img.style.display = 'none';
+                  img.style.display = "none";
                 }}
-              style={{
-                maxWidth: '80%',
-                maxHeight: '80%',
-                objectFit: 'contain',
-                borderRadius: 0,
-                background: '#ffffff',
-                border: '1px solid var(--border-default)',
-                display: 'block',
-                marginLeft: 'auto',
-                marginRight: 'auto',
-                alignSelf: 'start'
-              }}
-            />
+                style={{
+                  maxWidth: "80%",
+                  maxHeight: "80%",
+                  objectFit: "contain",
+                  borderRadius: 0,
+                  background: "#ffffff",
+                  border: "1px solid var(--border-default)",
+                  display: "block",
+                  marginLeft: "auto",
+                  marginRight: "auto",
+                  alignSelf: "start",
+                }}
+              />
             </PrivateContent>
           )}
         </div>
diff --git a/frontend/src/core/components/pageEditor/PageEditor.module.css b/frontend/src/core/components/pageEditor/PageEditor.module.css
index 0c295a209c..3be018ffa2 100644
--- a/frontend/src/core/components/pageEditor/PageEditor.module.css
+++ b/frontend/src/core/components/pageEditor/PageEditor.module.css
@@ -52,7 +52,8 @@
 
 /* Animations */
 @keyframes pulse {
-  0%, 100% {
+  0%,
+  100% {
     opacity: 1;
   }
   50% {
@@ -61,18 +62,18 @@
 }
 
 /* Action styles */
-.actionRow:hover { 
-  background: var(--hover-bg); 
+.actionRow:hover {
+  background: var(--hover-bg);
 }
 
-.actionDanger { 
-  color: var(--text-brand-accent); 
+.actionDanger {
+  color: var(--text-brand-accent);
 }
 
-.actionsDivider { 
-  height: 1px; 
-  background: var(--border-default); 
-  margin: 4px 0; 
+.actionsDivider {
+  height: 1px;
+  background: var(--border-default);
+  margin: 4px 0;
 }
 
 .pinIndicator {
@@ -85,7 +86,7 @@
 
 .unsupportedPill {
   margin-left: 1.75rem;
-  background: #6B7280;
+  background: #6b7280;
   color: white;
   padding: 4px 8px;
   border-radius: 12px;
diff --git a/frontend/src/core/components/pageEditor/PageEditor.tsx b/frontend/src/core/components/pageEditor/PageEditor.tsx
index 1b965367d5..e567e258b8 100644
--- a/frontend/src/core/components/pageEditor/PageEditor.tsx
+++ b/frontend/src/core/components/pageEditor/PageEditor.tsx
@@ -5,15 +5,15 @@ import { useNavigationGuard, useNavigationState } from "@app/contexts/Navigation
 import { usePageEditor } from "@app/contexts/PageEditorContext";
 import { PageEditorFunctions, PDFPage } from "@app/types/pageEditor";
 // Thumbnail generation is now handled by individual PageThumbnail components
-import '@app/components/pageEditor/PageEditor.module.css';
-import PageThumbnail from '@app/components/pageEditor/PageThumbnail';
-import DragDropGrid from '@app/components/pageEditor/DragDropGrid';
-import SkeletonLoader from '@app/components/shared/SkeletonLoader';
+import "@app/components/pageEditor/PageEditor.module.css";
+import PageThumbnail from "@app/components/pageEditor/PageThumbnail";
+import DragDropGrid from "@app/components/pageEditor/DragDropGrid";
+import SkeletonLoader from "@app/components/shared/SkeletonLoader";
 import { FileId } from "@app/types/file";
-import { GRID_CONSTANTS } from '@app/components/pageEditor/constants';
-import { useInitialPageDocument } from '@app/components/pageEditor/hooks/useInitialPageDocument';
-import { usePageDocument } from '@app/components/pageEditor/hooks/usePageDocument';
-import { usePageEditorState } from '@app/components/pageEditor/hooks/usePageEditorState';
+import { GRID_CONSTANTS } from "@app/components/pageEditor/constants";
+import { useInitialPageDocument } from "@app/components/pageEditor/hooks/useInitialPageDocument";
+import { usePageDocument } from "@app/components/pageEditor/hooks/usePageDocument";
+import { usePageEditorState } from "@app/components/pageEditor/hooks/usePageEditorState";
 import { usePageEditorRightRailButtons } from "@app/components/pageEditor/pageEditorRightRailButtons";
 import { useFileColorMap } from "@app/components/pageEditor/hooks/useFileColorMap";
 import { useWheelZoom } from "@app/hooks/useWheelZoom";
@@ -23,22 +23,20 @@ import { usePageSelectionManager } from "@app/components/pageEditor/hooks/usePag
 import { usePageEditorCommands } from "@app/components/pageEditor/hooks/useEditorCommands";
 import { usePageEditorExport } from "@app/components/pageEditor/hooks/usePageEditorExport";
 import { useThumbnailGeneration } from "@app/hooks/useThumbnailGeneration";
-import { convertSplitPageIdsToIndexes } from '@app/components/pageEditor/utils/splitPositions';
+import { convertSplitPageIdsToIndexes } from "@app/components/pageEditor/utils/splitPositions";
 
 export interface PageEditorProps {
   onFunctionsReady?: (functions: PageEditorFunctions) => void;
 }
 
-const PageEditor = ({
-  onFunctionsReady,
-}: PageEditorProps) => {
-
+const PageEditor = ({ onFunctionsReady }: PageEditorProps) => {
   // Use split contexts to prevent re-renders
   const { state, selectors } = useFileState();
   const { actions } = useFileActions();
 
   // Navigation guard for unsaved changes
-  const { setHasUnsavedChanges, registerNavigationWarningHandlers, unregisterNavigationWarningHandlers } = useNavigationGuard();
+  const { setHasUnsavedChanges, registerNavigationWarningHandlers, unregisterNavigationWarningHandlers } =
+    useNavigationGuard();
   const navigationState = useNavigationState();
 
   // Get PageEditor coordination functions
@@ -56,8 +54,8 @@ const PageEditor = ({
   const thumbnailRequestsRef = useRef<Set<string>>(new Set());
   const { requestThumbnail, getThumbnailFromCache } = useThumbnailGeneration();
   const handleVisibleItemsChange = useCallback((items: PDFPage[]) => {
-    setVisiblePageIds(prev => {
-      const ids = items.map(item => item.id);
+    setVisiblePageIds((prev) => {
+      const ids = items.map((item) => item.id);
       if (prev.length === ids.length && prev.every((id, index) => id === ids[index])) {
         return prev;
       }
@@ -70,7 +68,7 @@ const PageEditor = ({
   const containerRef = useRef<HTMLDivElement>(null);
   const [isContainerHovered, setIsContainerHovered] = useState(false);
   const rootFontSize = useMemo(() => {
-    if (typeof window === 'undefined') {
+    if (typeof window === "undefined") {
       return 16;
     }
     const computed = getComputedStyle(document.documentElement).fontSize;
@@ -83,19 +81,19 @@ const PageEditor = ({
 
   // Zoom actions
   const zoomIn = useCallback(() => {
-    setZoomLevel(prev => Math.min(prev + 0.1, 3.0));
+    setZoomLevel((prev) => Math.min(prev + 0.1, 3.0));
   }, []);
 
   const zoomOut = useCallback(() => {
-    setZoomLevel(prev => Math.max(prev - 0.1, 0.5));
+    setZoomLevel((prev) => Math.max(prev - 0.1, 0.5));
   }, []);
 
   // Derive page editor files from PageEditorContext's fileOrder (page editor workspace order)
   // Filter to only show PDF files (PageEditor only supports PDFs)
   // Use stable string keys to prevent infinite loops
   // Cache file objects to prevent infinite re-renders from new object references
-  const fileOrderKey = fileOrder.join(',');
-  const selectedIdsKey = [...state.ui.selectedFileIds].sort().join(',');
+  const fileOrderKey = fileOrder.join(",");
+  const selectedIdsKey = [...state.ui.selectedFileIds].sort().join(",");
   const filesSignature = selectors.getFilesSignature();
 
   const fileObjectsRef = useRef(new Map<FileId, any>());
@@ -105,28 +103,30 @@ const PageEditor = ({
     const cache = fileObjectsRef.current;
     const newFiles: any[] = [];
 
-    fileOrder.forEach(fileId => {
+    fileOrder.forEach((fileId) => {
       const stub = selectors.getStirlingFileStub(fileId);
       const isSelected = state.ui.selectedFileIds.includes(fileId);
-      const isPdf = stub?.name?.toLowerCase().endsWith('.pdf') ?? false;
+      const isPdf = stub?.name?.toLowerCase().endsWith(".pdf") ?? false;
 
       if (!isPdf) return; // Skip non-PDFs
 
       const cached = cache.get(fileId);
 
       // Check if data actually changed (compare by fileId, not position)
-      if (cached &&
-          cached.fileId === fileId &&
-          cached.name === (stub?.name || '') &&
-          cached.versionNumber === stub?.versionNumber &&
-          cached.isSelected === isSelected) {
+      if (
+        cached &&
+        cached.fileId === fileId &&
+        cached.name === (stub?.name || "") &&
+        cached.versionNumber === stub?.versionNumber &&
+        cached.isSelected === isSelected
+      ) {
         // Reuse existing object reference
         newFiles.push(cached);
       } else {
         // Create new object only if data changed
         const newFile = {
           fileId,
-          name: stub?.name || '',
+          name: stub?.name || "",
           versionNumber: stub?.versionNumber,
           isSelected,
         };
@@ -136,7 +136,7 @@ const PageEditor = ({
     });
 
     // Clean up removed files from cache
-    const activeIds = new Set(newFiles.map(f => f.fileId));
+    const activeIds = new Set(newFiles.map((f) => f.fileId));
     for (const cachedId of cache.keys()) {
       if (!activeIds.has(cachedId)) {
         cache.delete(cachedId);
@@ -148,12 +148,12 @@ const PageEditor = ({
 
   // Get ALL file IDs in order (not filtered by selection)
   const orderedFileIds = useMemo(() => {
-    return pageEditorFiles.map(f => f.fileId);
+    return pageEditorFiles.map((f) => f.fileId);
   }, [pageEditorFiles]);
 
   // Get selected file IDs for filtering
   const selectedFileIds = useMemo(() => {
-    return pageEditorFiles.filter(f => f.isSelected).map(f => f.fileId);
+    return pageEditorFiles.filter((f) => f.isSelected).map((f) => f.fileId);
   }, [pageEditorFiles]);
   const activeFilesSignature = selectors.getFilesSignature();
 
@@ -177,88 +177,83 @@ const PageEditor = ({
     displayDocumentRef.current = displayDocument;
   }, [displayDocument]);
 
-  const queueThumbnailRequestsForPages = useCallback((pageIds: string[]) => {
-    const doc = displayDocumentRef.current;
-    if (!doc || pageIds.length === 0) return;
+  const queueThumbnailRequestsForPages = useCallback(
+    (pageIds: string[]) => {
+      const doc = displayDocumentRef.current;
+      if (!doc || pageIds.length === 0) return;
 
-    const loadedCount = doc.pages.filter(p => p.thumbnail).length;
-    const pending = thumbnailRequestsRef.current.size;
-    const MAX_CONCURRENT_THUMBNAILS = loadedCount < 8 ? 1
-      : doc.totalPages < 20 ? 3
-      : doc.totalPages < 50 ? 5
-      : 8;
-    const available = Math.max(0, MAX_CONCURRENT_THUMBNAILS - pending);
-    if (available === 0) return;
+      const loadedCount = doc.pages.filter((p) => p.thumbnail).length;
+      const pending = thumbnailRequestsRef.current.size;
+      const MAX_CONCURRENT_THUMBNAILS = loadedCount < 8 ? 1 : doc.totalPages < 20 ? 3 : doc.totalPages < 50 ? 5 : 8;
+      const available = Math.max(0, MAX_CONCURRENT_THUMBNAILS - pending);
+      if (available === 0) return;
 
-    const toLoad: string[] = [];
-    for (const pageId of pageIds) {
-      if (toLoad.length >= available) break;
-      if (thumbnailRequestsRef.current.has(pageId)) continue;
-      const page = doc.pages.find(p => p.id === pageId);
-      if (!page || page.thumbnail) continue;
-      toLoad.push(pageId);
-    }
+      const toLoad: string[] = [];
+      for (const pageId of pageIds) {
+        if (toLoad.length >= available) break;
+        if (thumbnailRequestsRef.current.has(pageId)) continue;
+        const page = doc.pages.find((p) => p.id === pageId);
+        if (!page || page.thumbnail) continue;
+        toLoad.push(pageId);
+      }
 
-    if (toLoad.length === 0) return;
+      if (toLoad.length === 0) return;
 
-    toLoad.forEach(pageId => {
-      const page = doc.pages.find(p => p.id === pageId);
-      if (!page) return;
+      toLoad.forEach((pageId) => {
+        const page = doc.pages.find((p) => p.id === pageId);
+        if (!page) return;
 
-      const cached = getThumbnailFromCache(pageId);
-      if (cached) {
-        thumbnailRequestsRef.current.add(pageId);
-        Promise.resolve(cached)
-          .then(cache => {
-            setEditedDocument(prev => {
-              if (!prev) return prev;
-              const pageIndex = prev.pages.findIndex(p => p.id === pageId);
-              if (pageIndex === -1) return prev;
+        const cached = getThumbnailFromCache(pageId);
+        if (cached) {
+          thumbnailRequestsRef.current.add(pageId);
+          Promise.resolve(cached)
+            .then((cache) => {
+              setEditedDocument((prev) => {
+                if (!prev) return prev;
+                const pageIndex = prev.pages.findIndex((p) => p.id === pageId);
+                if (pageIndex === -1) return prev;
 
-              const updated = [...prev.pages];
-              updated[pageIndex] = { ...prev.pages[pageIndex], thumbnail: cache };
-              return { ...prev, pages: updated };
+                const updated = [...prev.pages];
+                updated[pageIndex] = { ...prev.pages[pageIndex], thumbnail: cache };
+                return { ...prev, pages: updated };
+              });
+            })
+            .finally(() => {
+              thumbnailRequestsRef.current.delete(pageId);
             });
+          return;
+        }
+
+        const fileId = page.originalFileId;
+        if (!fileId) return;
+        const file = selectors.getFile(fileId);
+        if (!file) return;
+
+        thumbnailRequestsRef.current.add(pageId);
+        requestThumbnail(pageId, file, page.originalPageNumber || page.pageNumber)
+          .then((thumbnail) => {
+            if (thumbnail) {
+              setEditedDocument((prev) => {
+                if (!prev) return prev;
+                const pageIndex = prev.pages.findIndex((p) => p.id === pageId);
+                if (pageIndex === -1) return prev;
+
+                const updated = [...prev.pages];
+                updated[pageIndex] = { ...prev.pages[pageIndex], thumbnail };
+                return { ...prev, pages: updated };
+              });
+            }
+          })
+          .catch((error) => {
+            console.error("[Thumbnail Loading] Error:", error);
           })
           .finally(() => {
             thumbnailRequestsRef.current.delete(pageId);
           });
-        return;
-      }
-
-      const fileId = page.originalFileId;
-      if (!fileId) return;
-      const file = selectors.getFile(fileId);
-      if (!file) return;
-
-      thumbnailRequestsRef.current.add(pageId);
-      requestThumbnail(pageId, file, page.originalPageNumber || page.pageNumber)
-        .then(thumbnail => {
-          if (thumbnail) {
-            setEditedDocument(prev => {
-              if (!prev) return prev;
-              const pageIndex = prev.pages.findIndex(p => p.id === pageId);
-              if (pageIndex === -1) return prev;
-
-              const updated = [...prev.pages];
-              updated[pageIndex] = { ...prev.pages[pageIndex], thumbnail };
-              return { ...prev, pages: updated };
-            });
-          }
-        })
-        .catch((error) => {
-          console.error('[Thumbnail Loading] Error:', error);
-        })
-        .finally(() => {
-          thumbnailRequestsRef.current.delete(pageId);
-        });
-    });
-  }, [
-    getThumbnailFromCache,
-    requestThumbnail,
-    selectors,
-    setEditedDocument
-  ]);
+      });
+    },
+    [getThumbnailFromCache, requestThumbnail, selectors, setEditedDocument],
+  );
 
   useEffect(() => {
     if (!displayDocument) {
@@ -282,9 +277,7 @@ const PageEditor = ({
     }
 
     const INITIAL_VISIBLE_PAGE_COUNT = 8;
-    const initialIds = displayDocument.pages
-      .slice(0, INITIAL_VISIBLE_PAGE_COUNT)
-      .map(page => page.id);
+    const initialIds = displayDocument.pages.slice(0, INITIAL_VISIBLE_PAGE_COUNT).map((page) => page.id);
 
     queueThumbnailRequestsForPages(initialIds);
     lastInitialDocumentSignatureRef.current = signature;
@@ -296,13 +289,13 @@ const PageEditor = ({
 
   useEffect(() => {
     return () => {
-      if (navigationState.workbench !== 'pageEditor') {
+      if (navigationState.workbench !== "pageEditor") {
         return;
       }
 
       const doc = displayDocumentRef.current;
       if (doc && doc.pages.length > 0) {
-        const signature = doc.pages.map(page => page.id).join(',');
+        const signature = doc.pages.map((page) => page.id).join(",");
         savePersistedDocument(doc, signature);
       }
     };
@@ -310,9 +303,20 @@ const PageEditor = ({
 
   // UI state management
   const {
-    selectionMode, selectedPageIds, movingPage, isAnimating, splitPositions, exportLoading,
-    setSelectionMode, setSelectedPageIds, setMovingPage, setSplitPositions, setExportLoading,
-    togglePage, toggleSelectAll, animateReorder
+    selectionMode,
+    selectedPageIds,
+    movingPage,
+    isAnimating,
+    splitPositions,
+    exportLoading,
+    setSelectionMode,
+    setSelectedPageIds,
+    setMovingPage,
+    setSplitPositions,
+    setExportLoading,
+    togglePage,
+    toggleSelectAll,
+    animateReorder,
   } = usePageEditorState();
 
   const {
@@ -336,14 +340,9 @@ const PageEditor = ({
   // Grid container ref for positioning split indicators
   const gridContainerRef = useRef<HTMLDivElement>(null);
 
-  const {
-    canUndo,
-    canRedo,
-    executeCommandWithTracking,
-    handleUndo,
-    handleRedo,
-    clearUndoHistory,
-  } = useUndoManagerState({ setHasUnsavedChanges });
+  const { canUndo, canRedo, executeCommandWithTracking, handleUndo, handleRedo, clearUndoHistory } = useUndoManagerState({
+    setHasUnsavedChanges,
+  });
 
   const {
     createRotateCommand,
@@ -428,17 +427,20 @@ const PageEditor = ({
   });
 
   // Export preview function - defined after export functions to avoid circular dependency
-  const handleExportPreview = useCallback((selectedOnly: boolean = false) => {
-    if (!displayDocument) return;
+  const handleExportPreview = useCallback(
+    (selectedOnly: boolean = false) => {
+      if (!displayDocument) return;
 
-    // For now, trigger the actual export directly
-   // In the original, this would show a preview modal first
-    if (selectedOnly) {
-      onExportSelected();
-    } else {
-      onExportAll();
-    }
-  }, [displayDocument, onExportSelected, onExportAll]);
+      // For now, trigger the actual export directly
+      // In the original, this would show a preview modal first
+      if (selectedOnly) {
+        onExportSelected();
+      } else {
+        onExportAll();
+      }
+    },
+    [displayDocument, onExportSelected, onExportAll],
+  );
 
   // Expose functions to parent component
   useEffect(() => {
@@ -471,9 +473,30 @@ const PageEditor = ({
       });
     }
   }, [
-    onFunctionsReady, handleUndo, handleRedo, canUndo, canRedo, handleRotate, handleDelete, handleSplit, handleSplitAll,
-    handlePageBreak, handlePageBreakAll, handleSelectAll, handleDeselectAll, handleSetSelectedPages, handleExportPreview, onExportSelected, onExportAll, applyChanges, exportLoading,
-    selectionMode, selectedPageIds, splitPositions, displayDocument?.pages.length, closePdf
+    onFunctionsReady,
+    handleUndo,
+    handleRedo,
+    canUndo,
+    canRedo,
+    handleRotate,
+    handleDelete,
+    handleSplit,
+    handleSplitAll,
+    handlePageBreak,
+    handlePageBreakAll,
+    handleSelectAll,
+    handleDeselectAll,
+    handleSetSelectedPages,
+    handleExportPreview,
+    onExportSelected,
+    onExportAll,
+    applyChanges,
+    exportLoading,
+    selectionMode,
+    selectedPageIds,
+    splitPositions,
+    displayDocument?.pages.length,
+    closePdf,
   ]);
 
   useWheelZoom({
@@ -490,15 +513,15 @@ const PageEditor = ({
 
       // Check if Ctrl (Windows/Linux) or Cmd (Mac) is pressed
       if (event.ctrlKey || event.metaKey) {
-        if (event.key === '=' || event.key === '+') {
+        if (event.key === "=" || event.key === "+") {
           // Ctrl+= or Ctrl++ for zoom in
           event.preventDefault();
           zoomIn();
-        } else if (event.key === '-' || event.key === '_') {
+        } else if (event.key === "-" || event.key === "_") {
           // Ctrl+- for zoom out
           event.preventDefault();
           zoomOut();
-        } else if (event.key === '0') {
+        } else if (event.key === "0") {
           // Ctrl+0 for reset zoom
           event.preventDefault();
           setZoomLevel(1.0);
@@ -506,9 +529,9 @@ const PageEditor = ({
       }
     };
 
-    document.addEventListener('keydown', handleKeyDown);
+    document.addEventListener("keydown", handleKeyDown);
     return () => {
-      document.removeEventListener('keydown', handleKeyDown);
+      document.removeEventListener("keydown", handleKeyDown);
     };
   }, [isContainerHovered, zoomIn, zoomOut]);
 
@@ -520,75 +543,78 @@ const PageEditor = ({
 
   // Memoize renderItem to prevent DragDropGrid's React.memo from blocking updates
   // when selectedPageIds changes
-  const renderItemCallback = useCallback((
-    page: PDFPage,
-    index: number,
-    refs: React.MutableRefObject<Map<string, HTMLDivElement>>,
-    boxSelectedIds: string[],
-    clearBoxSelection: () => void,
-    activeDragIds: string[],
-    justMoved: boolean,
-    dragHandleProps?: any,
-    zoomLevelParam?: number
-  ) => {
-    gridItemRefsRef.current = refs;
-    const fileColorIndex = page.originalFileId ? fileColorIndexMap.get(page.originalFileId) ?? 0 : 0;
-    const isBoxSelected = boxSelectedIds.includes(page.id);
-    return (
-      <PageThumbnail
-        key={page.id}
-        page={page}
-        index={index}
-        totalPages={displayDocument?.pages.length || 0}
-        fileColorIndex={fileColorIndex}
-        selectedPageIds={selectedPageIds}
-        selectionMode={selectionMode}
-        movingPage={movingPage}
-        isAnimating={isAnimating}
-        isBoxSelected={isBoxSelected}
-        clearBoxSelection={clearBoxSelection}
-        activeDragIds={activeDragIds}
-        justMoved={justMoved}
-        pageRefs={refs}
-        dragHandleProps={dragHandleProps}
-        onReorderPages={handleReorderPages}
-        onTogglePage={togglePage}
-        onAnimateReorder={animateReorder}
-        onExecuteCommand={executeCommand}
-        onSetStatus={() => {}}
-        onSetMovingPage={setMovingPage}
-        onDeletePage={handleDeletePage}
-        createRotateCommand={createRotateCommand}
-        createDeleteCommand={createDeleteCommand}
-        createSplitCommand={createSplitCommand}
-        pdfDocument={displayDocument!}
-        setPdfDocument={setEditedDocument}
-        splitPositions={splitPositions}
-        onInsertFiles={handleInsertFiles}
-        zoomLevel={zoomLevelParam || zoomLevel}
-      />
-    );
-  }, [
-    selectedPageIds,
-    selectionMode,
-    movingPage,
-    isAnimating,
-    displayDocument,
-    fileColorIndexMap,
-    handleReorderPages,
-    togglePage,
-    animateReorder,
-    executeCommand,
-    setMovingPage,
-    handleDeletePage,
-    createRotateCommand,
-    createDeleteCommand,
-    createSplitCommand,
-    setEditedDocument,
-    splitPositions,
-    handleInsertFiles,
-    zoomLevel,
-  ]);
+  const renderItemCallback = useCallback(
+    (
+      page: PDFPage,
+      index: number,
+      refs: React.MutableRefObject<Map<string, HTMLDivElement>>,
+      boxSelectedIds: string[],
+      clearBoxSelection: () => void,
+      activeDragIds: string[],
+      justMoved: boolean,
+      dragHandleProps?: any,
+      zoomLevelParam?: number,
+    ) => {
+      gridItemRefsRef.current = refs;
+      const fileColorIndex = page.originalFileId ? (fileColorIndexMap.get(page.originalFileId) ?? 0) : 0;
+      const isBoxSelected = boxSelectedIds.includes(page.id);
+      return (
+        <PageThumbnail
+          key={page.id}
+          page={page}
+          index={index}
+          totalPages={displayDocument?.pages.length || 0}
+          fileColorIndex={fileColorIndex}
+          selectedPageIds={selectedPageIds}
+          selectionMode={selectionMode}
+          movingPage={movingPage}
+          isAnimating={isAnimating}
+          isBoxSelected={isBoxSelected}
+          clearBoxSelection={clearBoxSelection}
+          activeDragIds={activeDragIds}
+          justMoved={justMoved}
+          pageRefs={refs}
+          dragHandleProps={dragHandleProps}
+          onReorderPages={handleReorderPages}
+          onTogglePage={togglePage}
+          onAnimateReorder={animateReorder}
+          onExecuteCommand={executeCommand}
+          onSetStatus={() => {}}
+          onSetMovingPage={setMovingPage}
+          onDeletePage={handleDeletePage}
+          createRotateCommand={createRotateCommand}
+          createDeleteCommand={createDeleteCommand}
+          createSplitCommand={createSplitCommand}
+          pdfDocument={displayDocument!}
+          setPdfDocument={setEditedDocument}
+          splitPositions={splitPositions}
+          onInsertFiles={handleInsertFiles}
+          zoomLevel={zoomLevelParam || zoomLevel}
+        />
+      );
+    },
+    [
+      selectedPageIds,
+      selectionMode,
+      movingPage,
+      isAnimating,
+      displayDocument,
+      fileColorIndexMap,
+      handleReorderPages,
+      togglePage,
+      animateReorder,
+      executeCommand,
+      setMovingPage,
+      handleDeletePage,
+      createRotateCommand,
+      createDeleteCommand,
+      createSplitCommand,
+      setEditedDocument,
+      splitPositions,
+      handleInsertFiles,
+      zoomLevel,
+    ],
+  );
 
   return (
     <div
@@ -597,20 +623,24 @@ const PageEditor = ({
       onMouseEnter={() => setIsContainerHovered(true)}
       onMouseLeave={() => setIsContainerHovered(false)}
       style={{
-        height: '100%',
-        overflow: 'auto',
-        position: 'relative',
-        width: '100%',
+        height: "100%",
+        overflow: "auto",
+        position: "relative",
+        width: "100%",
       }}
     >
       <LoadingOverlay visible={globalProcessing && !initialDocument} />
 
       {!initialDocument && !globalProcessing && selectedFileIds.length === 0 && (
-        <Center h='100%'>
+        <Center h="100%">
           <Stack align="center" gap="md">
-            <Text size="lg" c="dimmed">📄</Text>
+            <Text size="lg" c="dimmed">
+              📄
+            </Text>
             <Text c="dimmed">No PDF files loaded</Text>
-            <Text size="sm" c="dimmed">Add files to start editing pages</Text>
+            <Text size="sm" c="dimmed">
+              Add files to start editing pages
+            </Text>
           </Stack>
         </Center>
       )}
@@ -623,19 +653,19 @@ const PageEditor = ({
       )}
 
       {displayDocument && (
-        <Box ref={gridContainerRef} p={0} pt="2rem" pb="4rem" style={{ position: 'relative' }}>
-            {/* Split Lines Overlay */}
-            <div
-              style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                pointerEvents: 'none',
-                zIndex: 10
-              }}
-            >
+        <Box ref={gridContainerRef} p={0} pt="2rem" pb="4rem" style={{ position: "relative" }}>
+          {/* Split Lines Overlay */}
+          <div
+            style={{
+              position: "absolute",
+              top: 0,
+              left: 0,
+              right: 0,
+              bottom: 0,
+              pointerEvents: "none",
+              zIndex: 10,
+            }}
+          >
             {(() => {
               const refsMap = gridItemRefsRef.current?.current;
               const containerEl = gridContainerRef.current;
@@ -682,12 +712,12 @@ const PageEditor = ({
                   <div
                     key={`split-${position}`}
                     style={{
-                      position: 'absolute',
+                      position: "absolute",
                       left: `${lineLeft - containerRect.left}px`,
                       top: `${currentRect.top - containerRect.top}px`,
-                      width: '1px',
+                      width: "1px",
                       height: `${currentRect.height}px`,
-                      borderLeft: '1px dashed #3b82f6',
+                      borderLeft: "1px dashed #3b82f6",
                     }}
                   />
                 );
@@ -704,18 +734,17 @@ const PageEditor = ({
             selectedPageIds={selectedPageIds}
             onVisibleItemsChange={handleVisibleItemsChange}
             getThumbnailData={(pageId) => {
-              const page = displayDocument.pages.find(p => p.id === pageId);
+              const page = displayDocument.pages.find((p) => p.id === pageId);
               if (!page?.thumbnail) return null;
               return {
                 src: page.thumbnail,
-                rotation: page.rotation || 0
+                rotation: page.rotation || 0,
               };
             }}
             renderItem={renderItemCallback}
           />
         </Box>
       )}
-
     </div>
   );
 };
diff --git a/frontend/src/core/components/pageEditor/PageEditorControls.tsx b/frontend/src/core/components/pageEditor/PageEditorControls.tsx
index 8649076d4c..4d0fb8fa5c 100644
--- a/frontend/src/core/components/pageEditor/PageEditorControls.tsx
+++ b/frontend/src/core/components/pageEditor/PageEditorControls.tsx
@@ -1,7 +1,4 @@
-import {
-  Tooltip,
-  ActionIcon,
-} from "@mantine/core";
+import { Tooltip, ActionIcon } from "@mantine/core";
 import UndoIcon from "@mui/icons-material/Undo";
 import RedoIcon from "@mui/icons-material/Redo";
 import ContentCutIcon from "@mui/icons-material/ContentCut";
@@ -21,7 +18,7 @@ interface PageEditorControlsProps {
   canRedo: boolean;
 
   // Page operations
-  onRotate: (direction: 'left' | 'right') => void;
+  onRotate: (direction: "left" | "right") => void;
   onDelete: () => void;
   onSplit: () => void;
   onSplitAll: () => void;
@@ -64,93 +61,102 @@ const PageEditorControls = ({
     const totalPages = displayDocument.pages.length;
     const selectedValidPageIds = displayDocument.pages
       .filter((page, index) => selectedPageIds.includes(page.id) && index < totalPages - 1)
-      .map(page => page.id);
+      .map((page) => page.id);
 
     if (selectedValidPageIds.length === 0) {
       return "Split Selected";
     }
 
-    const existingSplitsCount = selectedValidPageIds.filter(id => splitPositions.has(id)).length;
+    const existingSplitsCount = selectedValidPageIds.filter((id) => splitPositions.has(id)).length;
     const noSplitsCount = selectedValidPageIds.length - existingSplitsCount;
 
     const willRemoveSplits = existingSplitsCount > noSplitsCount;
 
     if (willRemoveSplits) {
-      return existingSplitsCount === selectedValidPageIds.length
-        ? "Remove All Selected Splits"
-        : "Remove Selected Splits";
+      return existingSplitsCount === selectedValidPageIds.length ? "Remove All Selected Splits" : "Remove Selected Splits";
     } else {
-      return existingSplitsCount === 0
-        ? "Split Selected"
-        : "Complete Selected Splits";
+      return existingSplitsCount === 0 ? "Split Selected" : "Complete Selected Splits";
     }
   };
 
   // Calculate page break tooltip text
   const getPageBreakTooltip = () => {
     return selectedPageIds.length > 0
-      ? `Insert ${selectedPageIds.length} Page Break${selectedPageIds.length > 1 ? 's' : ''}`
+      ? `Insert ${selectedPageIds.length} Page Break${selectedPageIds.length > 1 ? "s" : ""}`
       : "Insert Page Breaks";
   };
 
   return (
     <div
       style={{
-        position: 'sticky',
+        position: "sticky",
         left: 0,
         right: 0,
         bottom: 0,
         zIndex: 50,
-        display: 'flex',
-        justifyContent: 'center',
-        pointerEvents: 'none',
-        background: 'transparent',
+        display: "flex",
+        justifyContent: "center",
+        pointerEvents: "none",
+        background: "transparent",
       }}
     >
       <div
         style={{
-          display: 'flex',
-          alignItems: 'center',
+          display: "flex",
+          alignItems: "center",
           gap: 12,
           borderTopLeftRadius: 16,
           borderTopRightRadius: 16,
           borderBottomLeftRadius: 0,
           borderBottomRightRadius: 0,
-          boxShadow: '0 -2px 8px rgba(0,0,0,0.04)',
-          backgroundColor: 'var(--bg-toolbar)',
-          border: '1px solid var(--border-default)',
-          borderRadius: '16px 16px 0 0',
-          pointerEvents: 'auto',
+          boxShadow: "0 -2px 8px rgba(0,0,0,0.04)",
+          backgroundColor: "var(--bg-toolbar)",
+          border: "1px solid var(--border-default)",
+          borderRadius: "16px 16px 0 0",
+          pointerEvents: "auto",
           minWidth: 360,
           maxWidth: 700,
-          flexWrap: 'wrap',
-          justifyContent: 'center',
+          flexWrap: "wrap",
+          justifyContent: "center",
           padding: "1rem",
-          paddingBottom: "1rem"
+          paddingBottom: "1rem",
         }}
       >
-
         {/* Undo/Redo */}
         <Tooltip label="Undo">
-          <ActionIcon onClick={onUndo} disabled={!canUndo} variant="subtle" style={{ color: canUndo ? 'var(--right-rail-icon)' : 'var(--right-rail-icon-disabled)' }} radius="md" size="lg">
+          <ActionIcon
+            onClick={onUndo}
+            disabled={!canUndo}
+            variant="subtle"
+            style={{ color: canUndo ? "var(--right-rail-icon)" : "var(--right-rail-icon-disabled)" }}
+            radius="md"
+            size="lg"
+          >
             <UndoIcon />
           </ActionIcon>
         </Tooltip>
         <Tooltip label="Redo">
-          <ActionIcon onClick={onRedo} disabled={!canRedo} variant="subtle" style={{ color: canRedo ? 'var(--right-rail-icon)' : 'var(--right-rail-icon-disabled)' }} radius="md" size="lg">
+          <ActionIcon
+            onClick={onRedo}
+            disabled={!canRedo}
+            variant="subtle"
+            style={{ color: canRedo ? "var(--right-rail-icon)" : "var(--right-rail-icon-disabled)" }}
+            radius="md"
+            size="lg"
+          >
             <RedoIcon />
           </ActionIcon>
         </Tooltip>
 
-        <div style={{ width: 1, height: 28, backgroundColor: 'var(--mantine-color-gray-3)', margin: '0 8px' }} />
+        <div style={{ width: 1, height: 28, backgroundColor: "var(--mantine-color-gray-3)", margin: "0 8px" }} />
 
         {/* Page Operations */}
         <Tooltip label="Rotate Selected Left">
           <ActionIcon
-            onClick={() => onRotate('left')}
+            onClick={() => onRotate("left")}
             disabled={selectedPageIds.length === 0}
             variant="subtle"
-            style={{ color: selectedPageIds.length > 0 ? 'var(--right-rail-icon)' : 'var(--right-rail-icon-disabled)' }}
+            style={{ color: selectedPageIds.length > 0 ? "var(--right-rail-icon)" : "var(--right-rail-icon-disabled)" }}
             radius="md"
             size="lg"
           >
@@ -159,10 +165,10 @@ const PageEditorControls = ({
         </Tooltip>
         <Tooltip label="Rotate Selected Right">
           <ActionIcon
-            onClick={() => onRotate('right')}
+            onClick={() => onRotate("right")}
             disabled={selectedPageIds.length === 0}
             variant="subtle"
-            style={{ color: selectedPageIds.length > 0 ? 'var(--right-rail-icon)' : 'var(--right-rail-icon-disabled)' }}
+            style={{ color: selectedPageIds.length > 0 ? "var(--right-rail-icon)" : "var(--right-rail-icon-disabled)" }}
             radius="md"
             size="lg"
           >
@@ -174,7 +180,7 @@ const PageEditorControls = ({
             onClick={onDelete}
             disabled={selectedPageIds.length === 0}
             variant="subtle"
-            style={{ color: selectedPageIds.length > 0 ? 'var(--right-rail-icon)' : 'var(--right-rail-icon-disabled)' }}
+            style={{ color: selectedPageIds.length > 0 ? "var(--right-rail-icon)" : "var(--right-rail-icon-disabled)" }}
             radius="md"
             size="lg"
           >
@@ -186,7 +192,7 @@ const PageEditorControls = ({
             onClick={onSplit}
             disabled={selectedPageIds.length === 0}
             variant="subtle"
-            style={{ color: selectedPageIds.length > 0 ? 'var(--right-rail-icon)' : 'var(--right-rail-icon-disabled)' }}
+            style={{ color: selectedPageIds.length > 0 ? "var(--right-rail-icon)" : "var(--right-rail-icon-disabled)" }}
             radius="md"
             size="lg"
           >
@@ -198,7 +204,7 @@ const PageEditorControls = ({
             onClick={onPageBreak}
             disabled={selectedPageIds.length === 0}
             variant="subtle"
-            style={{ color: selectedPageIds.length > 0 ? 'var(--right-rail-icon)' : 'var(--right-rail-icon-disabled)' }}
+            style={{ color: selectedPageIds.length > 0 ? "var(--right-rail-icon)" : "var(--right-rail-icon-disabled)" }}
             radius="md"
             size="lg"
           >
diff --git a/frontend/src/core/components/pageEditor/PageSelectByNumberButton.tsx b/frontend/src/core/components/pageEditor/PageSelectByNumberButton.tsx
index 896da57809..fcbf41591a 100644
--- a/frontend/src/core/components/pageEditor/PageSelectByNumberButton.tsx
+++ b/frontend/src/core/components/pageEditor/PageSelectByNumberButton.tsx
@@ -1,7 +1,7 @@
-import { ActionIcon, Popover } from '@mantine/core';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { Tooltip } from '@app/components/shared/Tooltip';
-import BulkSelectionPanel from '@app/components/pageEditor/BulkSelectionPanel';
+import { ActionIcon, Popover } from "@mantine/core";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { Tooltip } from "@app/components/shared/Tooltip";
+import BulkSelectionPanel from "@app/components/pageEditor/BulkSelectionPanel";
 
 interface PageSelectByNumberButtonProps {
   disabled: boolean;
@@ -29,7 +29,7 @@ export default function PageSelectByNumberButton({
       <div className={`right-rail-fade enter`}>
         <Popover position="left" withArrow shadow="md" offset={8}>
           <Popover.Target>
-            <div style={{ display: 'inline-flex' }}>
+            <div style={{ display: "inline-flex" }}>
               <ActionIcon
                 variant="subtle"
                 radius="md"
@@ -42,7 +42,7 @@ export default function PageSelectByNumberButton({
             </div>
           </Popover.Target>
           <Popover.Dropdown>
-            <div style={{ minWidth: '24rem', maxWidth: '32rem' }}>
+            <div style={{ minWidth: "24rem", maxWidth: "32rem" }}>
               <BulkSelectionPanel
                 csvInput={csvInput}
                 setCsvInput={setCsvInput}
diff --git a/frontend/src/core/components/pageEditor/PageThumbnail.tsx b/frontend/src/core/components/pageEditor/PageThumbnail.tsx
index 87adbf90e4..764dc1b6c5 100644
--- a/frontend/src/core/components/pageEditor/PageThumbnail.tsx
+++ b/frontend/src/core/components/pageEditor/PageThumbnail.tsx
@@ -1,21 +1,20 @@
-import React, { useCallback, useState, useEffect, useRef, useMemo } from 'react';
-import { Text, Checkbox } from '@mantine/core';
-import { useIsMobile } from '@app/hooks/useIsMobile';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
-import RotateLeftIcon from '@mui/icons-material/RotateLeft';
-import RotateRightIcon from '@mui/icons-material/RotateRight';
-import DeleteIcon from '@mui/icons-material/Delete';
-import ContentCutIcon from '@mui/icons-material/ContentCut';
-import AddIcon from '@mui/icons-material/Add';
-import { PDFPage, PDFDocument } from '@app/types/pageEditor';
-import { useFilesModalContext } from '@app/contexts/FilesModalContext';
-import { getFileColorWithOpacity } from '@app/components/pageEditor/fileColors';
-import styles from '@app/components/pageEditor/PageEditor.module.css';
-import HoverActionMenu, { HoverAction } from '@app/components/shared/HoverActionMenu';
-import { StirlingFileStub } from '@app/types/fileContext';
-import { PrivateContent } from '@app/components/shared/PrivateContent';
-
+import React, { useCallback, useState, useEffect, useRef, useMemo } from "react";
+import { Text, Checkbox } from "@mantine/core";
+import { useIsMobile } from "@app/hooks/useIsMobile";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
+import RotateLeftIcon from "@mui/icons-material/RotateLeft";
+import RotateRightIcon from "@mui/icons-material/RotateRight";
+import DeleteIcon from "@mui/icons-material/Delete";
+import ContentCutIcon from "@mui/icons-material/ContentCut";
+import AddIcon from "@mui/icons-material/Add";
+import { PDFPage, PDFDocument } from "@app/types/pageEditor";
+import { useFilesModalContext } from "@app/contexts/FilesModalContext";
+import { getFileColorWithOpacity } from "@app/components/pageEditor/fileColors";
+import styles from "@app/components/pageEditor/PageEditor.module.css";
+import HoverActionMenu, { HoverAction } from "@app/components/shared/HoverActionMenu";
+import { StirlingFileStub } from "@app/types/fileContext";
+import { PrivateContent } from "@app/components/shared/PrivateContent";
 
 interface PageThumbnailProps {
   page: PDFPage;
@@ -81,7 +80,7 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
   const isSelected = Array.isArray(selectedPageIds) ? selectedPageIds.includes(page.id) : false;
 
   const [isMouseDown, setIsMouseDown] = useState(false);
-  const [mouseStartPos, setMouseStartPos] = useState<{x: number, y: number} | null>(null);
+  const [mouseStartPos, setMouseStartPos] = useState<{ x: number; y: number } | null>(null);
   const [isHovered, setIsHovered] = useState(false);
   const isMobile = useIsMobile();
   const lastClickTimeRef = useRef<number>(0);
@@ -96,13 +95,13 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
   // Calculate document aspect ratio from first non-blank page
   const getDocumentAspectRatio = useCallback(() => {
     // Find first non-blank page with a thumbnail to get aspect ratio
-    const firstRealPage = pdfDocument.pages.find(p => !p.isBlankPage && p.thumbnail);
+    const firstRealPage = pdfDocument.pages.find((p) => !p.isBlankPage && p.thumbnail);
     if (firstRealPage?.thumbnail) {
       // Try to get aspect ratio from an actual thumbnail image
       // For now, default to A4 but could be enhanced to measure image dimensions
-      return '1 / 1.414'; // A4 ratio as fallback
+      return "1 / 1.414"; // A4 ratio as fallback
     }
-    return '1 / 1.414'; // Default A4 ratio
+    return "1 / 1.414"; // Default A4 ratio
   }, [pdfDocument.pages]);
 
   // Update thumbnail URL when page prop changes
@@ -113,77 +112,94 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
   }, [page.thumbnail, thumbnailUrl]);
 
   // Merge refs - combine our ref tracking with dnd-kit's ref
-  const mergedRef = useCallback((element: HTMLDivElement | null) => {
-    // Track in our refs map
-    elementRef.current = element;
-    if (element) {
-      pageRefs.current.set(page.id, element);
-    } else {
-      pageRefs.current.delete(page.id);
-    }
-
-    // Call dnd-kit's ref if provided
-    if (dragHandleProps?.ref) {
-      dragHandleProps.ref(element);
-    }
-  }, [page.id, pageRefs, dragHandleProps]);
+  const mergedRef = useCallback(
+    (element: HTMLDivElement | null) => {
+      // Track in our refs map
+      elementRef.current = element;
+      if (element) {
+        pageRefs.current.set(page.id, element);
+      } else {
+        pageRefs.current.delete(page.id);
+      }
 
+      // Call dnd-kit's ref if provided
+      if (dragHandleProps?.ref) {
+        dragHandleProps.ref(element);
+      }
+    },
+    [page.id, pageRefs, dragHandleProps],
+  );
 
   // DOM command handlers
-  const handleRotateLeft = useCallback((e: React.MouseEvent) => {
-    e.stopPropagation();
-    // Use the command system for undo/redo support
-    const command = createRotateCommand([page.id], -90);
-    onExecuteCommand(command);
-    onSetStatus(`Rotated page ${page.pageNumber} left`);
-  }, [page.id, page.pageNumber, onExecuteCommand, onSetStatus, createRotateCommand]);
+  const handleRotateLeft = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      // Use the command system for undo/redo support
+      const command = createRotateCommand([page.id], -90);
+      onExecuteCommand(command);
+      onSetStatus(`Rotated page ${page.pageNumber} left`);
+    },
+    [page.id, page.pageNumber, onExecuteCommand, onSetStatus, createRotateCommand],
+  );
 
-  const handleRotateRight = useCallback((e: React.MouseEvent) => {
-    e.stopPropagation();
-    // Use the command system for undo/redo support
-    const command = createRotateCommand([page.id], 90);
-    onExecuteCommand(command);
-    onSetStatus(`Rotated page ${page.pageNumber} right`);
-  }, [page.id, page.pageNumber, onExecuteCommand, onSetStatus, createRotateCommand]);
+  const handleRotateRight = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      // Use the command system for undo/redo support
+      const command = createRotateCommand([page.id], 90);
+      onExecuteCommand(command);
+      onSetStatus(`Rotated page ${page.pageNumber} right`);
+    },
+    [page.id, page.pageNumber, onExecuteCommand, onSetStatus, createRotateCommand],
+  );
 
-  const handleDelete = useCallback((e: React.MouseEvent) => {
-    e.stopPropagation();
-    onDeletePage(page.pageNumber);
-    onSetStatus(`Deleted page ${page.pageNumber}`);
-  }, [page.pageNumber, onDeletePage, onSetStatus]);
+  const handleDelete = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      onDeletePage(page.pageNumber);
+      onSetStatus(`Deleted page ${page.pageNumber}`);
+    },
+    [page.pageNumber, onDeletePage, onSetStatus],
+  );
 
-  const handleSplit = useCallback((e: React.MouseEvent) => {
-    e.stopPropagation();
+  const handleSplit = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
 
-    // Create a command to toggle split at this position
-    const command = createSplitCommand(page.id, page.pageNumber);
-    onExecuteCommand(command);
+      // Create a command to toggle split at this position
+      const command = createSplitCommand(page.id, page.pageNumber);
+      onExecuteCommand(command);
 
-    const hasSplit = splitPositions.has(page.id);
-    const action = hasSplit ? 'removed' : 'added';
-    onSetStatus(`Split marker ${action} after position ${pageIndex + 1}`);
-  }, [pageIndex, splitPositions, onExecuteCommand, onSetStatus, createSplitCommand]);
+      const hasSplit = splitPositions.has(page.id);
+      const action = hasSplit ? "removed" : "added";
+      onSetStatus(`Split marker ${action} after position ${pageIndex + 1}`);
+    },
+    [pageIndex, splitPositions, onExecuteCommand, onSetStatus, createSplitCommand],
+  );
 
-  const handleInsertFileAfter = useCallback((e: React.MouseEvent) => {
-    e.stopPropagation();
+  const handleInsertFileAfter = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
 
-    if (onInsertFiles) {
-      // Open file manager modal with custom handler for page insertion
-      openFilesModal({
-        insertAfterPage: page.pageNumber,
-        customHandler: (files: File[] | StirlingFileStub[], insertAfterPage?: number, isFromStorage?: boolean) => {
-          if (insertAfterPage !== undefined) {
-            onInsertFiles(files, insertAfterPage, isFromStorage);
-          }
-        }
-      });
-      onSetStatus(`Select files to insert after page ${page.pageNumber}`);
-    } else {
-      // Fallback to normal file handling
-      openFilesModal({ insertAfterPage: page.pageNumber });
-      onSetStatus(`Select files to insert after page ${page.pageNumber}`);
-    }
-  }, [openFilesModal, page.pageNumber, onSetStatus, onInsertFiles]);
+      if (onInsertFiles) {
+        // Open file manager modal with custom handler for page insertion
+        openFilesModal({
+          insertAfterPage: page.pageNumber,
+          customHandler: (files: File[] | StirlingFileStub[], insertAfterPage?: number, isFromStorage?: boolean) => {
+            if (insertAfterPage !== undefined) {
+              onInsertFiles(files, insertAfterPage, isFromStorage);
+            }
+          },
+        });
+        onSetStatus(`Select files to insert after page ${page.pageNumber}`);
+      } else {
+        // Fallback to normal file handling
+        openFilesModal({ insertAfterPage: page.pageNumber });
+        onSetStatus(`Select files to insert after page ${page.pageNumber}`);
+      }
+    },
+    [openFilesModal, page.pageNumber, onSetStatus, onInsertFiles],
+  );
 
   // Handle click vs drag differentiation
   const handleMouseDown = useCallback((e: React.MouseEvent) => {
@@ -191,40 +207,43 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
     setMouseStartPos({ x: e.clientX, y: e.clientY });
   }, []);
 
-  const handleMouseUp = useCallback((e: React.MouseEvent) => {
-    if (!isMouseDown || !mouseStartPos) {
-      setIsMouseDown(false);
-      setMouseStartPos(null);
-      return;
-    }
+  const handleMouseUp = useCallback(
+    (e: React.MouseEvent) => {
+      if (!isMouseDown || !mouseStartPos) {
+        setIsMouseDown(false);
+        setMouseStartPos(null);
+        return;
+      }
 
-    // Calculate distance moved
-    const deltaX = Math.abs(e.clientX - mouseStartPos.x);
-    const deltaY = Math.abs(e.clientY - mouseStartPos.y);
-    const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
+      // Calculate distance moved
+      const deltaX = Math.abs(e.clientX - mouseStartPos.x);
+      const deltaY = Math.abs(e.clientY - mouseStartPos.y);
+      const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
 
-    // If mouse moved less than 2 pixels, consider it a click (not a drag)
-    if (distance < 2 && !isDragging) {
-      // Prevent rapid double-clicks from causing issues (debounce with 100ms threshold)
-      const now = Date.now();
-      if (now - lastClickTimeRef.current > 100) {
-        lastClickTimeRef.current = now;
+      // If mouse moved less than 2 pixels, consider it a click (not a drag)
+      if (distance < 2 && !isDragging) {
+        // Prevent rapid double-clicks from causing issues (debounce with 100ms threshold)
+        const now = Date.now();
+        if (now - lastClickTimeRef.current > 100) {
+          lastClickTimeRef.current = now;
 
-        // Clear box selection when clicking on a non-selected page
-        if (!isBoxSelected && clearBoxSelection) {
-          clearBoxSelection();
-        }
+          // Clear box selection when clicking on a non-selected page
+          if (!isBoxSelected && clearBoxSelection) {
+            clearBoxSelection();
+          }
 
-        // Don't toggle page selection if it's box-selected (just keep the box selection)
-        if (!isBoxSelected) {
-          onTogglePage(page.id);
+          // Don't toggle page selection if it's box-selected (just keep the box selection)
+          if (!isBoxSelected) {
+            onTogglePage(page.id);
+          }
         }
       }
-    }
 
-    setIsMouseDown(false);
-    setMouseStartPos(null);
-  }, [isMouseDown, mouseStartPos, isDragging, page.id, isBoxSelected, clearBoxSelection, onTogglePage]);
+      setIsMouseDown(false);
+      setMouseStartPos(null);
+    },
+    [isMouseDown, mouseStartPos, isDragging, page.id, isBoxSelected, clearBoxSelection, onTogglePage],
+  );
 
   const handleMouseLeave = useCallback(() => {
     setIsMouseDown(false);
@@ -232,79 +251,96 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
     setIsHovered(false);
   }, []);
 
-  const fileColorBorder = page.isBlankPage ? 'transparent' : getFileColorWithOpacity(fileColorIndex, 0.3);
+  const fileColorBorder = page.isBlankPage ? "transparent" : getFileColorWithOpacity(fileColorIndex, 0.3);
 
   // Spread dragHandleProps but use our merged ref
   const { ref: _, ...restDragProps } = dragHandleProps || {};
 
   // Build hover menu actions
-  const hoverActions = useMemo<HoverAction[]>(() => [
-    {
-      id: 'move-left',
-      icon: <ArrowBackIcon style={{ fontSize: 20 }} />,
-      label: 'Move Left',
-      onClick: (e) => {
-        e.stopPropagation();
-        if (pageIndex > 0 && !movingPage && !isAnimating) {
-          onSetMovingPage(page.pageNumber);
-          onReorderPages(page.pageNumber, pageIndex - 1);
-          setTimeout(() => onSetMovingPage(null), 650);
-          onSetStatus(`Moved page ${page.pageNumber} left`);
-        }
+  const hoverActions = useMemo<HoverAction[]>(
+    () => [
+      {
+        id: "move-left",
+        icon: <ArrowBackIcon style={{ fontSize: 20 }} />,
+        label: "Move Left",
+        onClick: (e) => {
+          e.stopPropagation();
+          if (pageIndex > 0 && !movingPage && !isAnimating) {
+            onSetMovingPage(page.pageNumber);
+            onReorderPages(page.pageNumber, pageIndex - 1);
+            setTimeout(() => onSetMovingPage(null), 650);
+            onSetStatus(`Moved page ${page.pageNumber} left`);
+          }
+        },
+        disabled: pageIndex === 0,
       },
-      disabled: pageIndex === 0
-    },
-    {
-      id: 'move-right',
-      icon: <ArrowForwardIcon style={{ fontSize: 20 }} />,
-      label: 'Move Right',
-      onClick: (e) => {
-        e.stopPropagation();
-        if (pageIndex < totalPages - 1 && !movingPage && !isAnimating) {
-          onSetMovingPage(page.pageNumber);
-          // ReorderPagesCommand expects target index relative to the original array.
-          // When moving toward the right (higher index), provide desiredIndex + 1
-          // so the command's internal adjustment (targetIndex - 1) lands correctly.
-          onReorderPages(page.pageNumber, pageIndex + 2);
-          setTimeout(() => onSetMovingPage(null), 650);
-          onSetStatus(`Moved page ${page.pageNumber} right`);
-        }
+      {
+        id: "move-right",
+        icon: <ArrowForwardIcon style={{ fontSize: 20 }} />,
+        label: "Move Right",
+        onClick: (e) => {
+          e.stopPropagation();
+          if (pageIndex < totalPages - 1 && !movingPage && !isAnimating) {
+            onSetMovingPage(page.pageNumber);
+            // ReorderPagesCommand expects target index relative to the original array.
+            // When moving toward the right (higher index), provide desiredIndex + 1
+            // so the command's internal adjustment (targetIndex - 1) lands correctly.
+            onReorderPages(page.pageNumber, pageIndex + 2);
+            setTimeout(() => onSetMovingPage(null), 650);
+            onSetStatus(`Moved page ${page.pageNumber} right`);
+          }
+        },
+        disabled: pageIndex === totalPages - 1,
       },
-      disabled: pageIndex === totalPages - 1
-    },
-    {
-      id: 'rotate-left',
-      icon: <RotateLeftIcon style={{ fontSize: 20 }} />,
-      label: 'Rotate Left',
-      onClick: handleRotateLeft,
-    },
-    {
-      id: 'rotate-right',
-      icon: <RotateRightIcon style={{ fontSize: 20 }} />,
-      label: 'Rotate Right',
-      onClick: handleRotateRight,
-    },
-    {
-      id: 'delete',
-      icon: <DeleteIcon style={{ fontSize: 20 }} />,
-      label: 'Delete Page',
-      onClick: handleDelete,
-      color: 'red',
-    },
-    {
-      id: 'split',
-      icon: <ContentCutIcon style={{ fontSize: 20 }} />,
-      label: 'Split After',
-      onClick: handleSplit,
-      hidden: pageIndex >= totalPages - 1,
-    },
-    {
-      id: 'insert',
-      icon: <AddIcon style={{ fontSize: 20 }} />,
-      label: 'Insert File After',
-      onClick: handleInsertFileAfter,
-    }
-  ], [pageIndex, totalPages, movingPage, isAnimating, page.pageNumber, handleRotateLeft, handleRotateRight, handleDelete, handleSplit, handleInsertFileAfter, onReorderPages, onSetMovingPage, onSetStatus]);
+      {
+        id: "rotate-left",
+        icon: <RotateLeftIcon style={{ fontSize: 20 }} />,
+        label: "Rotate Left",
+        onClick: handleRotateLeft,
+      },
+      {
+        id: "rotate-right",
+        icon: <RotateRightIcon style={{ fontSize: 20 }} />,
+        label: "Rotate Right",
+        onClick: handleRotateRight,
+      },
+      {
+        id: "delete",
+        icon: <DeleteIcon style={{ fontSize: 20 }} />,
+        label: "Delete Page",
+        onClick: handleDelete,
+        color: "red",
+      },
+      {
+        id: "split",
+        icon: <ContentCutIcon style={{ fontSize: 20 }} />,
+        label: "Split After",
+        onClick: handleSplit,
+        hidden: pageIndex >= totalPages - 1,
+      },
+      {
+        id: "insert",
+        icon: <AddIcon style={{ fontSize: 20 }} />,
+        label: "Insert File After",
+        onClick: handleInsertFileAfter,
+      },
+    ],
+    [
+      pageIndex,
+      totalPages,
+      movingPage,
+      isAnimating,
+      page.pageNumber,
+      handleRotateLeft,
+      handleRotateRight,
+      handleDelete,
+      handleSplit,
+      handleInsertFileAfter,
+      onReorderPages,
+      onSetMovingPage,
+      onSetStatus,
+    ],
+  );
 
   return (
     <div
@@ -315,7 +351,7 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
       className={`
         ${styles.pageContainer}
         !rounded-lg
-        ${selectionMode ? 'cursor-pointer' : 'cursor-grab'}
+        ${selectionMode ? "cursor-pointer" : "cursor-grab"}
         select-none
         flex items-center justify-center
         flex-shrink-0
@@ -323,17 +359,17 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
         hover:shadow-md
         transition-all
         relative
-        ${isDragging ? 'opacity-50 scale-95' : ''}
-        ${movingPage === page.pageNumber ? 'page-moving' : ''}
-        ${isBoxSelected ? 'ring-4 ring-blue-400 ring-offset-2' : ''}
+        ${isDragging ? "opacity-50 scale-95" : ""}
+        ${movingPage === page.pageNumber ? "page-moving" : ""}
+        ${isBoxSelected ? "ring-4 ring-blue-400 ring-offset-2" : ""}
       `}
       style={{
         width: `calc(20rem * ${zoomLevel})`,
         height: `calc(20rem * ${zoomLevel})`,
-        transition: isAnimating ? 'none' : 'transform 0.2s ease-in-out',
+        transition: isAnimating ? "none" : "transform 0.2s ease-in-out",
         zIndex: isHovered ? 50 : 1,
         ...(isBoxSelected && {
-          boxShadow: '0 0 0 4px rgba(59, 130, 246, 0.5)',
+          boxShadow: "0 0 0 4px rgba(59, 130, 246, 0.5)",
         }),
       }}
       onMouseDown={handleMouseDown}
@@ -345,15 +381,15 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
         <div
           className={styles.checkboxContainer}
           style={{
-            position: 'absolute',
+            position: "absolute",
             top: 8,
             right: 8,
             zIndex: 10,
-            backgroundColor: 'white',
-            borderRadius: '4px',
-            padding: '2px',
-            boxShadow: '0 2px 4px rgba(0,0,0,0.1)',
-            pointerEvents: 'auto'
+            backgroundColor: "white",
+            borderRadius: "4px",
+            padding: "2px",
+            boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+            pointerEvents: "auto",
           }}
           onMouseDown={(e) => {
             e.stopPropagation();
@@ -371,41 +407,45 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
               // Selection is handled by container mouseDown
             }}
             size="sm"
-            style={{ pointerEvents: 'none' }}
+            style={{ pointerEvents: "none" }}
           />
         </div>
       }
 
       <div className="page-container w-[90%] h-[90%]" draggable={false}>
         <div
-          className={`${styles.pageSurface} ${justMoved ? styles.pageJustMoved : ''}`}
+          className={`${styles.pageSurface} ${justMoved ? styles.pageJustMoved : ""}`}
           style={{
-            width: '100%',
-            height: '100%',
-            backgroundColor: 'var(--mantine-color-gray-1)',
+            width: "100%",
+            height: "100%",
+            backgroundColor: "var(--mantine-color-gray-1)",
             borderRadius: 6,
-            boxShadow: page.isBlankPage ? 'none' : `0 0 ${4 + 4 * zoomLevel}px 3px ${fileColorBorder}`,
+            boxShadow: page.isBlankPage ? "none" : `0 0 ${4 + 4 * zoomLevel}px 3px ${fileColorBorder}`,
             padding: 4,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center'
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
           }}
         >
           {page.isBlankPage ? (
-            <div style={{
-              width: '100%',
-              height: '100%',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center'
-            }}>
-              <div style={{
-                width: '70%',
-                aspectRatio: getDocumentAspectRatio(),
-                backgroundColor: 'white',
-                border: '1px solid #e9ecef',
-                borderRadius: 2
-              }} />
+            <div
+              style={{
+                width: "100%",
+                height: "100%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
+              <div
+                style={{
+                  width: "70%",
+                  aspectRatio: getDocumentAspectRatio(),
+                  backgroundColor: "white",
+                  border: "1px solid #e9ecef",
+                  borderRadius: 2,
+                }}
+              />
             </div>
           ) : thumbnailUrl ? (
             <PrivateContent>
@@ -416,19 +456,23 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
                 draggable={false}
                 data-original-rotation={page.rotation}
                 style={{
-                  width: '100%',
-                  height: '100%',
-                  objectFit: 'contain',
+                  width: "100%",
+                  height: "100%",
+                  objectFit: "contain",
                   borderRadius: 2,
                   transform: `rotate(${page.rotation}deg)`,
-                  transition: 'transform 0.3s ease-in-out'
+                  transition: "transform 0.3s ease-in-out",
                 }}
               />
             </PrivateContent>
           ) : (
-            <div style={{ textAlign: 'center' }}>
-              <Text size="lg" c="dimmed">📄</Text>
-              <Text size="xs" c="dimmed" mt={4}>Page {page.pageNumber}</Text>
+            <div style={{ textAlign: "center" }}>
+              <Text size="lg" c="dimmed">
+                📄
+              </Text>
+              <Text size="xs" c="dimmed" mt={4}>
+                Page {page.pageNumber}
+              </Text>
             </div>
           )}
         </div>
@@ -438,16 +482,16 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
           size="sm"
           fw={500}
           style={{
-            color: 'var(--mantine-color-white)', // Use theme token for consistency
-            position: 'absolute',
+            color: "var(--mantine-color-white)", // Use theme token for consistency
+            position: "absolute",
             top: 5,
             left: 5,
-            background: 'rgba(162, 201, 255, 0.8)',
-            padding: '6px 8px',
+            background: "rgba(162, 201, 255, 0.8)",
+            padding: "6px 8px",
             borderRadius: 8,
             zIndex: 2,
             opacity: 0,
-            transition: 'opacity 0.2s ease-in-out'
+            transition: "opacity 0.2s ease-in-out",
           }}
         >
           {page.pageNumber}
@@ -459,9 +503,7 @@ const PageThumbnail: React.FC<PageThumbnailProps> = ({
           position="inside"
           className={styles.pageHoverControls}
         />
-
       </div>
-
     </div>
   );
 };
diff --git a/frontend/src/core/components/pageEditor/bulkSelectionPanel/AdvancedSelectionPanel.tsx b/frontend/src/core/components/pageEditor/bulkSelectionPanel/AdvancedSelectionPanel.tsx
index 365b8b0df6..7083613308 100644
--- a/frontend/src/core/components/pageEditor/bulkSelectionPanel/AdvancedSelectionPanel.tsx
+++ b/frontend/src/core/components/pageEditor/bulkSelectionPanel/AdvancedSelectionPanel.tsx
@@ -1,7 +1,7 @@
-import { useState } from 'react';
-import { Flex } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import classes from '@app/components/pageEditor/bulkSelectionPanel/BulkSelectionPanel.module.css';
+import { useState } from "react";
+import { Flex } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import classes from "@app/components/pageEditor/bulkSelectionPanel/BulkSelectionPanel.module.css";
 import {
   appendExpression,
   insertOperatorSmart,
@@ -10,9 +10,9 @@ import {
   everyNthExpression,
   rangeExpression,
   LogicalOperator,
-} from '@app/utils/bulkselection/selectionBuilders';
-import SelectPages from '@app/components/pageEditor/bulkSelectionPanel/SelectPages';
-import OperatorsSection from '@app/components/pageEditor/bulkSelectionPanel/OperatorsSection';
+} from "@app/utils/bulkselection/selectionBuilders";
+import SelectPages from "@app/components/pageEditor/bulkSelectionPanel/SelectPages";
+import OperatorsSection from "@app/components/pageEditor/bulkSelectionPanel/OperatorsSection";
 
 interface AdvancedSelectionPanelProps {
   csvInput: string;
@@ -30,22 +30,22 @@ const AdvancedSelectionPanel = ({
   advancedOpened,
 }: AdvancedSelectionPanelProps) => {
   const { t } = useTranslation();
-  const [rangeEnd, setRangeEnd] = useState<number | ''>('');
+  const [rangeEnd, setRangeEnd] = useState<number | "">("");
 
   const handleRangeEndChange = (val: string | number) => {
-    const next = typeof val === 'number' ? val : '';
+    const next = typeof val === "number" ? val : "";
     setRangeEnd(next);
   };
 
   // Named validation functions
   const validatePositiveNumber = (value: number): string | null => {
-    return value <= 0 ? 'Enter a positive number' : null;
+    return value <= 0 ? "Enter a positive number" : null;
   };
 
   const validateRangeStart = (start: number): string | null => {
-    if (start <= 0) return 'Values must be positive';
-    if (typeof rangeEnd === 'number' && start > rangeEnd) {
-      return 'From must be less than or equal to To';
+    if (start <= 0) return "Values must be positive";
+    if (typeof rangeEnd === "number" && start > rangeEnd) {
+      return "From must be less than or equal to To";
     }
     return null;
   };
@@ -61,7 +61,7 @@ const AdvancedSelectionPanel = ({
     const next = insertOperatorSmart(csvInput, op);
     setCsvInput(next);
     // Trigger visual selection update for 'even' and 'odd' operators
-    if (op === 'even' || op === 'odd') {
+    if (op === "even" || op === "odd") {
       onUpdatePagesFromCSV(next);
     }
   };
@@ -82,10 +82,10 @@ const AdvancedSelectionPanel = ({
   };
 
   const handleRangeApply = (start: number) => {
-    if (typeof rangeEnd !== 'number') return;
+    if (typeof rangeEnd !== "number") return;
     const expr = rangeExpression(start, rangeEnd, maxPages);
     if (expr) applyExpression(expr);
-    setRangeEnd('');
+    setRangeEnd("");
   };
 
   return (
@@ -97,46 +97,43 @@ const AdvancedSelectionPanel = ({
             {/* Cards row */}
             <Flex direction="row" mb="xs" wrap="wrap">
               <SelectPages
-                title={t('bulkSelection.firstNPages.title', 'First N Pages')}
-                placeholder={t('bulkSelection.firstNPages.placeholder', 'Number of pages')}
+                title={t("bulkSelection.firstNPages.title", "First N Pages")}
+                placeholder={t("bulkSelection.firstNPages.placeholder", "Number of pages")}
                 onApply={handleFirstNApply}
                 maxPages={maxPages}
                 validationFn={validatePositiveNumber}
               />
-              
+
               <SelectPages
-                title={t('bulkSelection.range.title', 'Range')}
-                placeholder={t('bulkSelection.range.fromPlaceholder', 'From')}
+                title={t("bulkSelection.range.title", "Range")}
+                placeholder={t("bulkSelection.range.fromPlaceholder", "From")}
                 onApply={handleRangeApply}
                 maxPages={maxPages}
                 validationFn={validateRangeStart}
                 isRange={true}
                 rangeEndValue={rangeEnd}
                 onRangeEndChange={handleRangeEndChange}
-                rangeEndPlaceholder={t('bulkSelection.range.toPlaceholder', 'To')}
+                rangeEndPlaceholder={t("bulkSelection.range.toPlaceholder", "To")}
               />
-              
+
               <SelectPages
-                title={t('bulkSelection.lastNPages.title', 'Last N Pages')}
-                placeholder={t('bulkSelection.lastNPages.placeholder', 'Number of pages')}
+                title={t("bulkSelection.lastNPages.title", "Last N Pages")}
+                placeholder={t("bulkSelection.lastNPages.placeholder", "Number of pages")}
                 onApply={handleLastNApply}
                 maxPages={maxPages}
                 validationFn={validatePositiveNumber}
               />
-              
+
               <SelectPages
-                title={t('bulkSelection.everyNthPage.title', 'Every Nth Page')}
-                placeholder={t('bulkSelection.everyNthPage.placeholder', 'Step size')}
+                title={t("bulkSelection.everyNthPage.title", "Every Nth Page")}
+                placeholder={t("bulkSelection.everyNthPage.placeholder", "Step size")}
                 onApply={handleEveryNthApply}
                 maxPages={maxPages}
               />
             </Flex>
-            
+
             {/* Operators row at bottom */}
-            <OperatorsSection
-              csvInput={csvInput}
-              onInsertOperator={insertOperator}
-            />
+            <OperatorsSection csvInput={csvInput} onInsertOperator={insertOperator} />
           </div>
         </div>
       )}
diff --git a/frontend/src/core/components/pageEditor/bulkSelectionPanel/BulkSelectionPanel.module.css b/frontend/src/core/components/pageEditor/bulkSelectionPanel/BulkSelectionPanel.module.css
index 2889ff4c33..f80bebaa26 100644
--- a/frontend/src/core/components/pageEditor/bulkSelectionPanel/BulkSelectionPanel.module.css
+++ b/frontend/src/core/components/pageEditor/bulkSelectionPanel/BulkSelectionPanel.module.css
@@ -70,38 +70,38 @@
   cursor: not-allowed;
 }
 
-:global([data-mantine-color-scheme='dark']) .operatorChip {
+:global([data-mantine-color-scheme="dark"]) .operatorChip {
   background-color: var(--bulk-card-bg);
   border-color: var(--bulk-card-border);
   color: var(--text-primary);
 }
 
-:global([data-mantine-color-scheme='dark']) .operatorChip:hover:not(:disabled) {
+:global([data-mantine-color-scheme="dark"]) .operatorChip:hover:not(:disabled) {
   background-color: var(--hover-bg);
   border-color: var(--bulk-card-hover-border);
   color: var(--text-primary);
 }
- 
- .dropdownHeader {
-   display: flex;
-   justify-content: space-between;
-   align-items: center;
-   padding: 0.75rem;
-   border-bottom: 0.0625rem solid var(--border-default);
-   margin-bottom: 0.5rem;
- }
- 
- .closeButton {
-   min-width: 1.5rem;
-   height: 1.5rem;
-   padding: 0;
-   font-size: 1.25rem;
-   font-weight: bold;
-   border-radius: 50%;
-   display: flex;
-   align-items: center;
-   justify-content: center;
- }
+
+.dropdownHeader {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.75rem;
+  border-bottom: 0.0625rem solid var(--border-default);
+  margin-bottom: 0.5rem;
+}
+
+.closeButton {
+  min-width: 1.5rem;
+  height: 1.5rem;
+  padding: 0;
+  font-size: 1.25rem;
+  font-weight: bold;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
 
 .menuItemRow {
   display: flex;
@@ -143,7 +143,7 @@
   transition: background-color 150ms ease;
 }
 
-:global([data-mantine-color-scheme='dark']) .menuItemCloseHover {
+:global([data-mantine-color-scheme="dark"]) .menuItemCloseHover {
   background-color: var(--text-brand-accent);
   opacity: 0.2;
 }
@@ -196,7 +196,7 @@
   background-color: var(--hover-bg);
 }
 
-:global([data-mantine-color-scheme='dark']) .advancedItem:hover {
+:global([data-mantine-color-scheme="dark"]) .advancedItem:hover {
   background-color: var(--hover-bg);
 }
 
@@ -211,7 +211,7 @@
   color: var(--text-primary);
 }
 
-:global([data-mantine-color-scheme='dark']) .advancedCard {
+:global([data-mantine-color-scheme="dark"]) .advancedCard {
   background-color: var(--bulk-card-bg);
 }
 
@@ -272,7 +272,7 @@
 }
 
 /* Dark-mode adjustments */
-:global([data-mantine-color-scheme='dark']) .selectedList {
+:global([data-mantine-color-scheme="dark"]) .selectedList {
   background-color: var(--bg-raised);
 }
 
@@ -311,4 +311,3 @@
   outline: none !important;
   box-shadow: none !important;
 }
-
diff --git a/frontend/src/core/components/pageEditor/bulkSelectionPanel/OperatorsSection.tsx b/frontend/src/core/components/pageEditor/bulkSelectionPanel/OperatorsSection.tsx
index eaaa2af086..f95e705445 100644
--- a/frontend/src/core/components/pageEditor/bulkSelectionPanel/OperatorsSection.tsx
+++ b/frontend/src/core/components/pageEditor/bulkSelectionPanel/OperatorsSection.tsx
@@ -1,7 +1,7 @@
-import { Button, Text, Group, Divider } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import classes from '@app/components/pageEditor/bulkSelectionPanel/BulkSelectionPanel.module.css';
-import { LogicalOperator } from '@app/utils/bulkselection/selectionBuilders';
+import { Button, Text, Group, Divider } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import classes from "@app/components/pageEditor/bulkSelectionPanel/BulkSelectionPanel.module.css";
+import { LogicalOperator } from "@app/utils/bulkselection/selectionBuilders";
 
 interface OperatorsSectionProps {
   csvInput: string;
@@ -10,61 +10,73 @@ interface OperatorsSectionProps {
 
 const OperatorsSection = ({ csvInput, onInsertOperator }: OperatorsSectionProps) => {
   const { t } = useTranslation();
-  
+
   return (
     <div>
-      <Text size="xs" c="var(--text-muted)" fw={500} mb="xs">{t('bulkSelection.keywords.title', 'Keywords')}:</Text>
+      <Text size="xs" c="var(--text-muted)" fw={500} mb="xs">
+        {t("bulkSelection.keywords.title", "Keywords")}:
+      </Text>
       <Group gap="sm" wrap="nowrap">
-        <Button 
-          size="sm" 
+        <Button
+          size="sm"
           variant="outline"
-          className={classes.operatorChip} 
-          onClick={() => onInsertOperator('and')}
+          className={classes.operatorChip}
+          onClick={() => onInsertOperator("and")}
           disabled={!csvInput.trim()}
           title="Combine selections (both conditions must be true)"
         >
-          <Text size="xs" fw={500}>and</Text>
+          <Text size="xs" fw={500}>
+            and
+          </Text>
         </Button>
-        <Button 
-          size="sm" 
+        <Button
+          size="sm"
           variant="outline"
-          className={classes.operatorChip} 
-          onClick={() => onInsertOperator('or')}
+          className={classes.operatorChip}
+          onClick={() => onInsertOperator("or")}
           disabled={!csvInput.trim()}
           title="Add to selection (either condition can be true)"
         >
-          <Text size="xs" fw={500}>or</Text>
+          <Text size="xs" fw={500}>
+            or
+          </Text>
         </Button>
-        <Button 
-          size="sm" 
+        <Button
+          size="sm"
           variant="outline"
-          className={classes.operatorChip} 
-          onClick={() => onInsertOperator('not')}
+          className={classes.operatorChip}
+          onClick={() => onInsertOperator("not")}
           disabled={!csvInput.trim()}
           title="Exclude from selection"
         >
-          <Text size="xs" fw={500}>not</Text>
+          <Text size="xs" fw={500}>
+            not
+          </Text>
         </Button>
       </Group>
       <Divider my="sm" />
       <Group gap="sm" wrap="nowrap">
-        <Button 
-          size="sm" 
+        <Button
+          size="sm"
           variant="outline"
-          className={classes.operatorChip} 
-          onClick={() => onInsertOperator('even')}
+          className={classes.operatorChip}
+          onClick={() => onInsertOperator("even")}
           title="Select all even-numbered pages (2, 4, 6, 8...)"
         >
-          <Text size="xs" fw={500}>even</Text>
+          <Text size="xs" fw={500}>
+            even
+          </Text>
         </Button>
-        <Button 
-          size="sm" 
+        <Button
+          size="sm"
           variant="outline"
-          className={classes.operatorChip} 
-          onClick={() => onInsertOperator('odd')}
+          className={classes.operatorChip}
+          onClick={() => onInsertOperator("odd")}
           title="Select all odd-numbered pages (1, 3, 5, 7...)"
         >
-          <Text size="xs" fw={500}>odd</Text>
+          <Text size="xs" fw={500}>
+            odd
+          </Text>
         </Button>
       </Group>
     </div>
diff --git a/frontend/src/core/components/pageEditor/bulkSelectionPanel/PageSelectionInput.tsx b/frontend/src/core/components/pageEditor/bulkSelectionPanel/PageSelectionInput.tsx
index 6a7bbec535..7ff229661a 100644
--- a/frontend/src/core/components/pageEditor/bulkSelectionPanel/PageSelectionInput.tsx
+++ b/frontend/src/core/components/pageEditor/bulkSelectionPanel/PageSelectionInput.tsx
@@ -1,9 +1,9 @@
-import { TextInput, Button, Text, Flex, Switch } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { Tooltip } from '@app/components/shared/Tooltip';
-import { usePageSelectionTips } from '@app/components/tooltips/usePageSelectionTips';
-import classes from '@app/components/pageEditor/bulkSelectionPanel/BulkSelectionPanel.module.css';
+import { TextInput, Button, Text, Flex, Switch } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { Tooltip } from "@app/components/shared/Tooltip";
+import { usePageSelectionTips } from "@app/components/tooltips/usePageSelectionTips";
+import classes from "@app/components/pageEditor/bulkSelectionPanel/BulkSelectionPanel.module.css";
 
 interface PageSelectionInputProps {
   csvInput: string;
@@ -35,28 +35,35 @@ const PageSelectionInput = ({
           header={pageSelectionTips.header}
           portalTarget={document.body}
           pinOnClick={true}
-          containerStyle={{ marginTop: "1rem"}}
+          containerStyle={{ marginTop: "1rem" }}
           tips={pageSelectionTips.tips}
         >
           <Flex onClick={(e) => e.stopPropagation()} align="center" gap="xs">
-            <LocalIcon icon="gpp-maybe-outline-rounded" width="1rem" height="1rem" style={{ color: 'var(--text-instruction)' }} />
+            <LocalIcon
+              icon="gpp-maybe-outline-rounded"
+              width="1rem"
+              height="1rem"
+              style={{ color: "var(--text-instruction)" }}
+            />
             <Text>Page Selection</Text>
           </Flex>
         </Tooltip>
-        {typeof advancedOpened === 'boolean' && (
+        {typeof advancedOpened === "boolean" && (
           <Flex align="center" gap="xs">
-            <Text size="sm" c="var(--text-secondary)">{t('bulkSelection.advanced.title', 'Advanced')}</Text>
+            <Text size="sm" c="var(--text-secondary)">
+              {t("bulkSelection.advanced.title", "Advanced")}
+            </Text>
             <Switch
               size="sm"
               checked={!!advancedOpened}
               onChange={(e) => onToggleAdvanced?.(e.currentTarget.checked)}
-              title={t('bulkSelection.advanced.title', 'Advanced')}
+              title={t("bulkSelection.advanced.title", "Advanced")}
               className={classes.advancedSwitch}
             />
           </Flex>
         )}
       </Flex>
-      
+
       {/* Text input */}
       <TextInput
         value={csvInput}
@@ -72,19 +79,19 @@ const PageSelectionInput = ({
               variant="subtle"
               size="xs"
               onClick={onClear}
-              style={{ 
-                color: 'var(--text-muted)',
-                minWidth: 'auto',
-                width: '24px',
-                height: '24px',
-                padding: 0
+              style={{
+                color: "var(--text-muted)",
+                minWidth: "auto",
+                width: "24px",
+                height: "24px",
+                padding: 0,
               }}
             >
               ×
             </Button>
           )
         }
-        onKeyDown={(e) => e.key === 'Enter' && onUpdatePagesFromCSV()}
+        onKeyDown={(e) => e.key === "Enter" && onUpdatePagesFromCSV()}
         className={classes.textInput}
       />
     </div>
diff --git a/frontend/src/core/components/pageEditor/bulkSelectionPanel/SelectPages.tsx b/frontend/src/core/components/pageEditor/bulkSelectionPanel/SelectPages.tsx
index 70652af45d..c03fccaabb 100644
--- a/frontend/src/core/components/pageEditor/bulkSelectionPanel/SelectPages.tsx
+++ b/frontend/src/core/components/pageEditor/bulkSelectionPanel/SelectPages.tsx
@@ -1,6 +1,6 @@
-import { useState } from 'react';
-import { Button, Text, NumberInput, Group } from '@mantine/core';
-import classes from '@app/components/pageEditor/bulkSelectionPanel/BulkSelectionPanel.module.css';
+import { useState } from "react";
+import { Button, Text, NumberInput, Group } from "@mantine/core";
+import classes from "@app/components/pageEditor/bulkSelectionPanel/BulkSelectionPanel.module.css";
 
 interface SelectPagesProps {
   title: string;
@@ -9,7 +9,7 @@ interface SelectPagesProps {
   maxPages: number;
   validationFn?: (value: number) => string | null;
   isRange?: boolean;
-  rangeEndValue?: number | '';
+  rangeEndValue?: number | "";
   onRangeEndChange?: (value: string | number) => void;
   rangeEndPlaceholder?: string;
 }
@@ -24,14 +24,14 @@ const SelectPages = ({
   onRangeEndChange,
   rangeEndPlaceholder,
 }: SelectPagesProps) => {
-  const [value, setValue] = useState<number | ''>('');
+  const [value, setValue] = useState<number | "">("");
   const [error, setError] = useState<string | null>(null);
 
   const handleValueChange = (val: string | number) => {
-    const next = typeof val === 'number' ? val : '';
+    const next = typeof val === "number" ? val : "";
     setValue(next);
-    
-    if (validationFn && typeof next === 'number') {
+
+    if (validationFn && typeof next === "number") {
       setError(validationFn(next));
     } else {
       setError(null);
@@ -39,18 +39,24 @@ const SelectPages = ({
   };
 
   const handleApply = () => {
-    if (value === '' || typeof value !== 'number') return;
+    if (value === "" || typeof value !== "number") return;
     onApply(value);
-    setValue('');
+    setValue("");
     setError(null);
   };
 
-  const isDisabled = Boolean(error) || value === '';
+  const isDisabled = Boolean(error) || value === "";
 
   return (
     <div className={classes.advancedCard}>
-      <Text size="sm" fw={600} c="var(--text-secondary)" mb="xs">{title}</Text>
-      {error && (<Text size="xs" c="var(--text-brand-accent)" mb="xs">{error}</Text>)}
+      <Text size="sm" fw={600} c="var(--text-secondary)" mb="xs">
+        {title}
+      </Text>
+      {error && (
+        <Text size="xs" c="var(--text-brand-accent)" mb="xs">
+          {error}
+        </Text>
+      )}
       <div className={classes.inputGroup}>
         <Group gap="sm" align="flex-end" wrap="nowrap">
           {isRange ? (
@@ -87,12 +93,7 @@ const SelectPages = ({
               error={Boolean(error)}
             />
           )}
-          <Button 
-            size="sm" 
-            className={classes.applyButton}
-            onClick={handleApply}
-            disabled={isDisabled}
-          >
+          <Button size="sm" className={classes.applyButton} onClick={handleApply} disabled={isDisabled}>
             Apply
           </Button>
         </Group>
diff --git a/frontend/src/core/components/pageEditor/bulkSelectionPanel/SelectedPagesDisplay.tsx b/frontend/src/core/components/pageEditor/bulkSelectionPanel/SelectedPagesDisplay.tsx
index dbcdb6cf90..d058669d3e 100644
--- a/frontend/src/core/components/pageEditor/bulkSelectionPanel/SelectedPagesDisplay.tsx
+++ b/frontend/src/core/components/pageEditor/bulkSelectionPanel/SelectedPagesDisplay.tsx
@@ -1,5 +1,5 @@
-import { Text } from '@mantine/core';
-import classes from '@app/components/pageEditor/bulkSelectionPanel/BulkSelectionPanel.module.css';
+import { Text } from "@mantine/core";
+import classes from "@app/components/pageEditor/bulkSelectionPanel/BulkSelectionPanel.module.css";
 
 interface SelectedPagesDisplayProps {
   selectedPageIds: string[];
@@ -7,11 +7,7 @@ interface SelectedPagesDisplayProps {
   syntaxError: string | null;
 }
 
-const SelectedPagesDisplay = ({
-  selectedPageIds,
-  displayDocument,
-  syntaxError,
-}: SelectedPagesDisplayProps) => {
+const SelectedPagesDisplay = ({ selectedPageIds, displayDocument, syntaxError }: SelectedPagesDisplayProps) => {
   if (selectedPageIds.length === 0 && !syntaxError) {
     return null;
   }
@@ -19,13 +15,22 @@ const SelectedPagesDisplay = ({
   return (
     <div className={classes.selectedList}>
       {syntaxError ? (
-        <Text size="xs" className={classes.errorText}>{syntaxError}</Text>
+        <Text size="xs" className={classes.errorText}>
+          {syntaxError}
+        </Text>
       ) : (
         <Text size="sm" c="dimmed" className={classes.selectedText}>
-          Selected: {selectedPageIds.length} pages ({displayDocument ? selectedPageIds.map(id => {
-            const page = displayDocument.pages.find(p => p.id === id);
-            return page?.pageNumber || 0;
-          }).filter(n => n > 0).join(', ') : ''})
+          Selected: {selectedPageIds.length} pages (
+          {displayDocument
+            ? selectedPageIds
+                .map((id) => {
+                  const page = displayDocument.pages.find((p) => p.id === id);
+                  return page?.pageNumber || 0;
+                })
+                .filter((n) => n > 0)
+                .join(", ")
+            : ""}
+          )
         </Text>
       )}
     </div>
diff --git a/frontend/src/core/components/pageEditor/commands/pageCommands.ts b/frontend/src/core/components/pageEditor/commands/pageCommands.ts
index 7061ab993c..b6997e898e 100644
--- a/frontend/src/core/components/pageEditor/commands/pageCommands.ts
+++ b/frontend/src/core/components/pageEditor/commands/pageCommands.ts
@@ -1,5 +1,5 @@
-import { FileId } from '@app/types/file';
-import { PDFDocument, PDFPage, PageBreakSettings } from '@app/types/pageEditor';
+import { FileId } from "@app/types/file";
+import { PDFDocument, PDFPage, PageBreakSettings } from "@app/types/pageEditor";
 
 // V1-style DOM-first command system (replaces the old React state commands)
 export abstract class DOMCommand {
@@ -15,7 +15,7 @@ export class RotatePageCommand extends DOMCommand {
     private pageId: string,
     private degrees: number,
     private getCurrentDocument: () => PDFDocument | null,
-    private setDocument: (doc: PDFDocument) => void
+    private setDocument: (doc: PDFDocument) => void,
   ) {
     super();
   }
@@ -24,26 +24,24 @@ export class RotatePageCommand extends DOMCommand {
     const currentDoc = this.getCurrentDocument();
     if (!currentDoc) return;
 
-    const page = currentDoc.pages.find(p => p.id === this.pageId);
+    const page = currentDoc.pages.find((p) => p.id === this.pageId);
     if (!page) return;
 
     if (this.originalRotation === null) {
       this.originalRotation = page.rotation;
     }
 
-    const newRotation = ((page.rotation + this.degrees) % 360 + 360) % 360;
+    const newRotation = (((page.rotation + this.degrees) % 360) + 360) % 360;
 
     this.setDocument({
       ...currentDoc,
-      pages: currentDoc.pages.map(p =>
-        p.id === this.pageId ? { ...p, rotation: newRotation } : p
-      ),
+      pages: currentDoc.pages.map((p) => (p.id === this.pageId ? { ...p, rotation: newRotation } : p)),
     });
 
     // Also update DOM immediately for CSS animation on currently-mounted pages
     const pageElement = document.querySelector(`[data-page-id="${this.pageId}"]`);
     if (pageElement) {
-      const img = pageElement.querySelector('img');
+      const img = pageElement.querySelector("img");
       if (img) img.style.transform = `rotate(${newRotation}deg)`;
     }
   }
@@ -56,20 +54,18 @@ export class RotatePageCommand extends DOMCommand {
 
     this.setDocument({
       ...currentDoc,
-      pages: currentDoc.pages.map(p =>
-        p.id === this.pageId ? { ...p, rotation: this.originalRotation! } : p
-      ),
+      pages: currentDoc.pages.map((p) => (p.id === this.pageId ? { ...p, rotation: this.originalRotation! } : p)),
     });
 
     const pageElement = document.querySelector(`[data-page-id="${this.pageId}"]`);
     if (pageElement) {
-      const img = pageElement.querySelector('img');
+      const img = pageElement.querySelector("img");
       if (img) img.style.transform = `rotate(${this.originalRotation}deg)`;
     }
   }
 
   get description(): string {
-    return `Rotate page ${this.degrees > 0 ? 'right' : 'left'}`;
+    return `Rotate page ${this.degrees > 0 ? "right" : "left"}`;
   }
 }
 
@@ -89,7 +85,7 @@ export class DeletePagesCommand extends DOMCommand {
     private getSplitPositions: () => Set<string>,
     private setSplitPositions: (positions: Set<string>) => void,
     private getSelectedPages: () => number[],
-    onAllPagesDeleted?: () => void
+    onAllPagesDeleted?: () => void,
   ) {
     super();
     this.onAllPagesDeleted = onAllPagesDeleted;
@@ -103,16 +99,18 @@ export class DeletePagesCommand extends DOMCommand {
     if (!this.hasExecuted) {
       this.originalDocument = {
         ...currentDoc,
-        pages: currentDoc.pages.map(page => ({...page})) // Deep copy pages
+        pages: currentDoc.pages.map((page) => ({ ...page })), // Deep copy pages
       };
       this.originalSplitPositions = new Set(this.getSplitPositions());
       this.originalSelectedPages = [...this.getSelectedPages()];
 
       // Convert page numbers to page IDs for stable identification
-      this.pageIdsToDelete = this.pagesToDelete.map(pageNum => {
-        const page = currentDoc.pages.find(p => p.pageNumber === pageNum);
-        return page?.id || '';
-      }).filter(id => id);
+      this.pageIdsToDelete = this.pagesToDelete
+        .map((pageNum) => {
+          const page = currentDoc.pages.find((p) => p.pageNumber === pageNum);
+          return page?.id || "";
+        })
+        .filter((id) => id);
 
       this.hasExecuted = true;
     }
@@ -121,13 +119,11 @@ export class DeletePagesCommand extends DOMCommand {
     const selectedIdSet = new Set(
       selectedPageNumbersBefore
         .map((pageNum) => currentDoc.pages.find((p) => p.pageNumber === pageNum)?.id)
-        .filter((id): id is string => Boolean(id))
+        .filter((id): id is string => Boolean(id)),
     );
 
     // Filter out deleted pages by ID (stable across undo/redo)
-    const remainingPages = currentDoc.pages.filter(page =>
-      !this.pageIdsToDelete.includes(page.id)
-    );
+    const remainingPages = currentDoc.pages.filter((page) => !this.pageIdsToDelete.includes(page.id));
 
     if (remainingPages.length === 0) {
       // If all pages would be deleted, clear selection/splits and close PDF
@@ -166,9 +162,7 @@ export class DeletePagesCommand extends DOMCommand {
     // Apply changes
     this.setDocument(updatedDocument);
 
-    const remainingSelectedPageIds = remainingPages
-      .filter((page) => selectedIdSet.has(page.id))
-      .map((page) => page.id);
+    const remainingSelectedPageIds = remainingPages.filter((page) => selectedIdSet.has(page.id)).map((page) => page.id);
     this.setSelectedPageIds(remainingSelectedPageIds);
 
     this.setSplitPositions(newPositions);
@@ -181,9 +175,7 @@ export class DeletePagesCommand extends DOMCommand {
     this.setDocument(this.originalDocument);
     this.setSplitPositions(this.originalSplitPositions);
     const restoredIds = this.originalSelectedPages
-      .map((pageNum) =>
-        this.originalDocument!.pages.find((page) => page.pageNumber === pageNum)?.id || ""
-      )
+      .map((pageNum) => this.originalDocument!.pages.find((page) => page.pageNumber === pageNum)?.id || "")
       .filter((id) => id !== "");
     this.setSelectedPageIds(restoredIds);
   }
@@ -202,7 +194,7 @@ export class ReorderPagesCommand extends DOMCommand {
     private selectedPages: number[] | undefined,
     private getCurrentDocument: () => PDFDocument | null,
     private setDocument: (doc: PDFDocument) => void,
-    private onReorderComplete?: (newPages: PDFPage[]) => void
+    private onReorderComplete?: (newPages: PDFPage[]) => void,
   ) {
     super();
   }
@@ -212,10 +204,10 @@ export class ReorderPagesCommand extends DOMCommand {
     if (!currentDoc) return;
 
     // Store original state for undo
-    this.originalPages = currentDoc.pages.map(page => ({...page}));
+    this.originalPages = currentDoc.pages.map((page) => ({ ...page }));
 
     // Perform the reorder
-    const sourceIndex = currentDoc.pages.findIndex(p => p.pageNumber === this.sourcePageNumber);
+    const sourceIndex = currentDoc.pages.findIndex((p) => p.pageNumber === this.sourcePageNumber);
     if (sourceIndex === -1) return;
 
     const newPages = [...currentDoc.pages];
@@ -223,10 +215,10 @@ export class ReorderPagesCommand extends DOMCommand {
     if (this.selectedPages && this.selectedPages.length > 1 && this.selectedPages.includes(this.sourcePageNumber)) {
       // Multi-page reorder
       const selectedPageObjects = this.selectedPages
-        .map(pageNum => currentDoc.pages.find(p => p.pageNumber === pageNum))
-        .filter(page => page !== undefined) as PDFPage[];
+        .map((pageNum) => currentDoc.pages.find((p) => p.pageNumber === pageNum))
+        .filter((page) => page !== undefined) as PDFPage[];
 
-      const remainingPages = newPages.filter(page => !this.selectedPages!.includes(page.pageNumber));
+      const remainingPages = newPages.filter((page) => !this.selectedPages!.includes(page.pageNumber));
       remainingPages.splice(this.targetIndex, 0, ...selectedPageObjects);
 
       remainingPages.forEach((page, index) => {
@@ -239,9 +231,7 @@ export class ReorderPagesCommand extends DOMCommand {
       const [movedPage] = newPages.splice(sourceIndex, 1);
 
       // Adjust target index if moving forward (after removal, indices shift)
-      const adjustedTargetIndex = sourceIndex < this.targetIndex
-        ? this.targetIndex - 1
-        : this.targetIndex;
+      const adjustedTargetIndex = sourceIndex < this.targetIndex ? this.targetIndex - 1 : this.targetIndex;
 
       newPages.splice(adjustedTargetIndex, 0, movedPage);
 
@@ -290,7 +280,7 @@ export class SplitCommand extends DOMCommand {
     private pageId: string,
     private pageNumber: number,
     private getSplitPositions: () => Set<string>,
-    private setSplitPositions: (positions: Set<string>) => void
+    private setSplitPositions: (positions: Set<string>) => void,
   ) {
     super();
   }
@@ -320,7 +310,7 @@ export class SplitCommand extends DOMCommand {
   get description(): string {
     const currentPositions = this.getSplitPositions();
     const willAdd = !currentPositions.has(this.pageId);
-    return `${willAdd ? 'Add' : 'Remove'} split at position ${this.pageNumber}`;
+    return `${willAdd ? "Add" : "Remove"} split at position ${this.pageNumber}`;
   }
 }
 
@@ -331,7 +321,7 @@ export class BulkRotateCommand extends DOMCommand {
     private pageIds: string[],
     private degrees: number,
     private getCurrentDocument: () => PDFDocument | null,
-    private setDocument: (doc: PDFDocument) => void
+    private setDocument: (doc: PDFDocument) => void,
   ) {
     super();
   }
@@ -354,9 +344,9 @@ export class BulkRotateCommand extends DOMCommand {
     // Update state so rotation survives virtualizer unmount/remount
     // Build a map of id → new rotation for O(1) DOM lookups below
     const newRotationById = new Map<string, number>();
-    const updatedPages = currentDoc.pages.map(page => {
+    const updatedPages = currentDoc.pages.map((page) => {
       if (pageIdSet.has(page.id)) {
-        const newRotation = ((page.rotation + this.degrees) % 360 + 360) % 360;
+        const newRotation = (((page.rotation + this.degrees) % 360) + 360) % 360;
         newRotationById.set(page.id, newRotation);
         return { ...page, rotation: newRotation };
       }
@@ -369,7 +359,7 @@ export class BulkRotateCommand extends DOMCommand {
     for (const pageId of this.pageIds) {
       const pageElement = document.querySelector(`[data-page-id="${pageId}"]`);
       if (pageElement) {
-        const img = pageElement.querySelector('img');
+        const img = pageElement.querySelector("img");
         if (img) img.style.transform = `rotate(${newRotationById.get(pageId)}deg)`;
       }
     }
@@ -380,10 +370,8 @@ export class BulkRotateCommand extends DOMCommand {
     if (!currentDoc) return;
 
     // Restore original rotations in state
-    const updatedPages = currentDoc.pages.map(page =>
-      this.originalRotations.has(page.id)
-        ? { ...page, rotation: this.originalRotations.get(page.id)! }
-        : page
+    const updatedPages = currentDoc.pages.map((page) =>
+      this.originalRotations.has(page.id) ? { ...page, rotation: this.originalRotations.get(page.id)! } : page,
     );
 
     this.setDocument({ ...currentDoc, pages: updatedPages });
@@ -392,7 +380,7 @@ export class BulkRotateCommand extends DOMCommand {
     for (const pageId of this.pageIds) {
       const pageElement = document.querySelector(`[data-page-id="${pageId}"]`);
       if (pageElement) {
-        const img = pageElement.querySelector('img');
+        const img = pageElement.querySelector("img");
         if (img && this.originalRotations.has(pageId)) {
           img.style.transform = `rotate(${this.originalRotations.get(pageId)}deg)`;
         }
@@ -401,7 +389,7 @@ export class BulkRotateCommand extends DOMCommand {
   }
 
   get description(): string {
-    return `Rotate ${this.pageIds.length} page(s) ${this.degrees > 0 ? 'right' : 'left'}`;
+    return `Rotate ${this.pageIds.length} page(s) ${this.degrees > 0 ? "right" : "left"}`;
   }
 }
 
@@ -411,7 +399,7 @@ export class BulkSplitCommand extends DOMCommand {
   constructor(
     private positions: number[],
     private getSplitPositions: () => Set<number>,
-    private setSplitPositions: (positions: Set<number>) => void
+    private setSplitPositions: (positions: Set<number>) => void,
   ) {
     super();
   }
@@ -424,7 +412,7 @@ export class BulkSplitCommand extends DOMCommand {
 
     // Toggle each position
     const currentPositions = new Set(this.getSplitPositions());
-    this.positions.forEach(position => {
+    this.positions.forEach((position) => {
       if (currentPositions.has(position)) {
         currentPositions.delete(position);
       } else {
@@ -452,7 +440,7 @@ export class SplitAllCommand extends DOMCommand {
   constructor(
     private totalPages: number,
     private getSplitPositions: () => Set<number>,
-    private setSplitPositions: (positions: Set<number>) => void
+    private setSplitPositions: (positions: Set<number>) => void,
   ) {
     super();
     // Calculate all possible split positions (between pages, not after last page)
@@ -467,7 +455,7 @@ export class SplitAllCommand extends DOMCommand {
 
     // Check if all splits are already active
     const currentSplits = this.getSplitPositions();
-    const hasAllSplits = Array.from(this.allPossibleSplits).every(pos => currentSplits.has(pos));
+    const hasAllSplits = Array.from(this.allPossibleSplits).every((pos) => currentSplits.has(pos));
 
     if (hasAllSplits) {
       // Remove all splits
@@ -485,8 +473,8 @@ export class SplitAllCommand extends DOMCommand {
 
   get description(): string {
     const currentSplits = this.getSplitPositions();
-    const hasAllSplits = Array.from(this.allPossibleSplits).every(pos => currentSplits.has(pos));
-    return hasAllSplits ? 'Remove all splits' : 'Split all pages';
+    const hasAllSplits = Array.from(this.allPossibleSplits).every((pos) => currentSplits.has(pos));
+    return hasAllSplits ? "Remove all splits" : "Split all pages";
   }
 }
 
@@ -500,7 +488,7 @@ export class PageBreakCommand extends DOMCommand {
     private selectedPageNumbers: number[],
     private getCurrentDocument: () => PDFDocument | null,
     private setDocument: (doc: PDFDocument) => void,
-    private settings?: PageBreakSettings
+    private settings?: PageBreakSettings,
   ) {
     super();
   }
@@ -512,7 +500,7 @@ export class PageBreakCommand extends DOMCommand {
     // Store original state for undo
     this.originalDocument = {
       ...currentDoc,
-      pages: currentDoc.pages.map(page => ({...page}))
+      pages: currentDoc.pages.map((page) => ({ ...page })),
     };
 
     // Create new pages array with blank pages inserted
@@ -536,7 +524,7 @@ export class PageBreakCommand extends DOMCommand {
           selected: false,
           splitAfter: false,
           isBlankPage: true, // Custom flag for blank pages
-          pageBreakSettings: this.settings // Store settings for export
+          pageBreakSettings: this.settings, // Store settings for export
         };
         newPages.push(blankPage);
         this.insertedPages.push(blankPage);
@@ -574,7 +562,7 @@ export class BulkPageBreakCommand extends DOMCommand {
     private getCurrentDocument: () => PDFDocument | null,
     private setDocument: (doc: PDFDocument) => void,
     private setSelectedPages: (pages: number[]) => void,
-    private getSelectedPages: () => number[]
+    private getSelectedPages: () => number[],
   ) {
     super();
   }
@@ -589,7 +577,7 @@ export class BulkPageBreakCommand extends DOMCommand {
     // Store original state for undo
     this.originalDocument = {
       ...currentDoc,
-      pages: currentDoc.pages.map(page => ({...page}))
+      pages: currentDoc.pages.map((page) => ({ ...page })),
     };
 
     // Create new pages array with blank pages inserted after each page (except the last)
@@ -612,7 +600,7 @@ export class BulkPageBreakCommand extends DOMCommand {
           rotation: 0,
           selected: false,
           splitAfter: false,
-          isBlankPage: true
+          isBlankPage: true,
         };
         newPages.push(blankPage);
         this.insertedPages.push(blankPage);
@@ -630,11 +618,11 @@ export class BulkPageBreakCommand extends DOMCommand {
 
     // Maintain existing selection by mapping original selected pages to their new positions
     const updatedSelection: number[] = [];
-    this.originalSelectedPages.forEach(originalPageNum => {
+    this.originalSelectedPages.forEach((originalPageNum) => {
       // Find the original page by matching the page ID from the original document
       const originalPage = this.originalDocument?.pages[originalPageNum - 1];
       if (originalPage) {
-        const foundPage = newPages.find(page => page.id === originalPage.id && !page.isBlankPage);
+        const foundPage = newPages.find((page) => page.id === originalPage.id && !page.isBlankPage);
         if (foundPage) {
           updatedSelection.push(foundPage.pageNumber);
         }
@@ -667,7 +655,7 @@ export class InsertFilesCommand extends DOMCommand {
     private setDocument: (doc: PDFDocument) => void,
     private setSelectedPages: (pages: number[]) => void,
     private getSelectedPages: () => number[],
-    private updateFileContext?: (updatedDocument: PDFDocument, insertedFiles?: Map<FileId, File>) => void
+    private updateFileContext?: (updatedDocument: PDFDocument, insertedFiles?: Map<FileId, File>) => void,
   ) {
     super();
   }
@@ -679,7 +667,7 @@ export class InsertFilesCommand extends DOMCommand {
     // Store original state for undo
     this.originalDocument = {
       ...currentDoc,
-      pages: currentDoc.pages.map(page => ({...page}))
+      pages: currentDoc.pages.map((page) => ({ ...page })),
     };
 
     try {
@@ -724,7 +712,7 @@ export class InsertFilesCommand extends DOMCommand {
           ...newPage,
           pageNumber: pageNumberCounter++,
           selected: false,
-          splitAfter: false
+          splitAfter: false,
         };
         newPages.push(insertedPage);
         this.insertedPages.push(insertedPage);
@@ -757,7 +745,7 @@ export class InsertFilesCommand extends DOMCommand {
       const originalSelection = this.getSelectedPages();
       const updatedSelection: number[] = [];
 
-      originalSelection.forEach(originalPageNum => {
+      originalSelection.forEach((originalPageNum) => {
         if (originalPageNum <= this.insertAfterPageNumber) {
           // Pages before insertion point keep same number
           updatedSelection.push(originalPageNum);
@@ -768,9 +756,8 @@ export class InsertFilesCommand extends DOMCommand {
       });
 
       this.setSelectedPages(updatedSelection);
-
     } catch (error) {
-      console.error('Failed to insert files:', error);
+      console.error("Failed to insert files:", error);
       // Revert to original state if error occurs
       if (this.originalDocument) {
         this.setDocument(this.originalDocument);
@@ -780,13 +767,16 @@ export class InsertFilesCommand extends DOMCommand {
 
   private async generateThumbnailsForInsertedPages(updatedDocument: PDFDocument): Promise<void> {
     try {
-      const { thumbnailGenerationService } = await import('@app/services/thumbnailGenerationService');
+      const { thumbnailGenerationService } = await import("@app/services/thumbnailGenerationService");
 
       // Group pages by file ID to generate thumbnails efficiently
       const pagesByFileId = new Map<FileId, PDFPage[]>();
 
       for (const page of this.insertedPages) {
-        const fileId = page.id.substring(0, page.id.lastIndexOf('-page-')) as FileId /* FIX ME: This looks wrong - like we've thrown away info too early and need to recreate it */;
+        const fileId = page.id.substring(
+          0,
+          page.id.lastIndexOf("-page-"),
+        ) as FileId; /* FIX ME: This looks wrong - like we've thrown away info too early and need to recreate it */
         if (!pagesByFileId.has(fileId)) {
           pagesByFileId.set(fileId, []);
         }
@@ -797,29 +787,27 @@ export class InsertFilesCommand extends DOMCommand {
       for (const [fileId, pages] of pagesByFileId) {
         const arrayBuffer = this.fileDataMap.get(fileId);
 
-        console.log('Generating thumbnails for file:', fileId);
-        console.log('Pages:', pages.length);
-        console.log('ArrayBuffer size:', arrayBuffer?.byteLength || 'undefined');
+        console.log("Generating thumbnails for file:", fileId);
+        console.log("Pages:", pages.length);
+        console.log("ArrayBuffer size:", arrayBuffer?.byteLength || "undefined");
 
         try {
           if (arrayBuffer && arrayBuffer.byteLength > 0) {
             // Extract page numbers for all pages from this file
-            const pageNumbers = pages.map(page => {
+            const pageNumbers = pages.map((page) => {
               const pageNumMatch = page.id.match(/-page-(\d+)$/);
               return pageNumMatch ? parseInt(pageNumMatch[1]) : 1;
             });
 
-            console.log('Generating thumbnails for page numbers:', pageNumbers);
+            console.log("Generating thumbnails for page numbers:", pageNumbers);
 
             // Generate thumbnails for all pages from this file at once
-            const results = await thumbnailGenerationService.generateThumbnails(
-              fileId,
-              arrayBuffer,
-              pageNumbers,
-              { scale: 0.2, quality: 0.8 }
-            );
+            const results = await thumbnailGenerationService.generateThumbnails(fileId, arrayBuffer, pageNumbers, {
+              scale: 0.2,
+              quality: 0.8,
+            });
 
-            console.log('Thumbnail generation results:', results.length, 'thumbnails generated');
+            console.log("Thumbnail generation results:", results.length, "thumbnails generated");
 
             // Update pages with generated thumbnails
             for (let i = 0; i < results.length && i < pages.length; i++) {
@@ -827,10 +815,10 @@ export class InsertFilesCommand extends DOMCommand {
               const page = pages[i];
 
               if (result.success) {
-                const pageIndex = updatedDocument.pages.findIndex(p => p.id === page.id);
+                const pageIndex = updatedDocument.pages.findIndex((p) => p.id === page.id);
                 if (pageIndex >= 0) {
                   updatedDocument.pages[pageIndex].thumbnail = result.thumbnail;
-                  console.log('Updated thumbnail for page:', page.id);
+                  console.log("Updated thumbnail for page:", page.id);
                 }
               }
             }
@@ -838,16 +826,16 @@ export class InsertFilesCommand extends DOMCommand {
             // Trigger re-render by updating the document
             this.setDocument({ ...updatedDocument });
           } else {
-            console.error('No valid ArrayBuffer found for file ID:', fileId);
+            console.error("No valid ArrayBuffer found for file ID:", fileId);
           }
         } catch (error) {
-          console.error('Failed to generate thumbnails for file:', fileId, error);
+          console.error("Failed to generate thumbnails for file:", fileId, error);
         } finally {
           this.fileDataMap.delete(fileId);
         }
       }
     } catch (error) {
-      console.error('Failed to generate thumbnails for inserted pages:', error);
+      console.error("Failed to generate thumbnails for inserted pages:", error);
     }
   }
 
@@ -857,10 +845,10 @@ export class InsertFilesCommand extends DOMCommand {
       reader.onload = async (event) => {
         try {
           const arrayBuffer = event.target?.result as ArrayBuffer;
-          console.log('File reader onload - arrayBuffer size:', arrayBuffer?.byteLength || 'undefined');
+          console.log("File reader onload - arrayBuffer size:", arrayBuffer?.byteLength || "undefined");
 
           if (!arrayBuffer) {
-            reject(new Error('Failed to read file'));
+            reject(new Error("Failed to read file"));
             return;
           }
 
@@ -868,21 +856,21 @@ export class InsertFilesCommand extends DOMCommand {
           const clonedArrayBuffer = arrayBuffer.slice(0);
 
           // Use PDF.js via the worker manager to extract pages
-          const { pdfWorkerManager } = await import('@app/services/pdfWorkerManager');
+          const { pdfWorkerManager } = await import("@app/services/pdfWorkerManager");
           const pdf = await pdfWorkerManager.createDocument(clonedArrayBuffer);
 
           const pageCount = pdf.numPages;
           const pages: PDFPage[] = [];
           const fileId = `inserted-${file.name}-${baseTimestamp}` as FileId;
 
-          console.log('Original ArrayBuffer size:', arrayBuffer.byteLength);
-          console.log('Storing ArrayBuffer for fileId:', fileId, 'size:', arrayBuffer.byteLength);
+          console.log("Original ArrayBuffer size:", arrayBuffer.byteLength);
+          console.log("Storing ArrayBuffer for fileId:", fileId, "size:", arrayBuffer.byteLength);
 
           // Store the original ArrayBuffer for thumbnail generation
           this.fileDataMap.set(fileId, arrayBuffer);
 
-          console.log('After storing - fileDataMap size:', this.fileDataMap.size);
-          console.log('Stored value size:', this.fileDataMap.get(fileId)?.byteLength || 'undefined');
+          console.log("After storing - fileDataMap size:", this.fileDataMap.size);
+          console.log("Stored value size:", this.fileDataMap.get(fileId)?.byteLength || "undefined");
 
           for (let i = 1; i <= pageCount; i++) {
             const pageId = `${fileId}-page-${i}`;
@@ -894,7 +882,7 @@ export class InsertFilesCommand extends DOMCommand {
               rotation: 0,
               selected: false,
               splitAfter: false,
-              isBlankPage: false
+              isBlankPage: false,
             });
           }
 
@@ -906,7 +894,7 @@ export class InsertFilesCommand extends DOMCommand {
           reject(error);
         }
       };
-      reader.onerror = () => reject(new Error('Failed to read file'));
+      reader.onerror = () => reject(new Error("Failed to read file"));
       reader.readAsArrayBuffer(file);
     });
   }
diff --git a/frontend/src/core/components/pageEditor/constants.ts b/frontend/src/core/components/pageEditor/constants.ts
index 28ee92580d..9d50620ab8 100644
--- a/frontend/src/core/components/pageEditor/constants.ts
+++ b/frontend/src/core/components/pageEditor/constants.ts
@@ -1,8 +1,8 @@
 // Shared constants for PageEditor grid layout
 export const GRID_CONSTANTS = {
-  ITEM_WIDTH: '20rem', // page width
-  ITEM_HEIGHT: '21.5rem', // 20rem + 1.5rem gap
-  ITEM_GAP: '1.5rem', // gap between items
+  ITEM_WIDTH: "20rem", // page width
+  ITEM_HEIGHT: "21.5rem", // 20rem + 1.5rem gap
+  ITEM_GAP: "1.5rem", // gap between items
   OVERSCAN_SMALL: 8, // Overscan for normal documents
   OVERSCAN_LARGE: 12, // Overscan for large documents (12 rows = ~96 pages pre-rendered)
-} as const;
\ No newline at end of file
+} as const;
diff --git a/frontend/src/core/components/pageEditor/fileColors.ts b/frontend/src/core/components/pageEditor/fileColors.ts
index fa9b0c35fd..daab899f27 100644
--- a/frontend/src/core/components/pageEditor/fileColors.ts
+++ b/frontend/src/core/components/pageEditor/fileColors.ts
@@ -7,30 +7,30 @@
 
 export const FILE_COLORS = [
   // Subtle colors (1-6) - fit well with UI theme
-  'rgb(59, 130, 246)',   // Blue
-  'rgb(16, 185, 129)',   // Green
-  'rgb(139, 92, 246)',   // Purple
-  'rgb(6, 182, 212)',    // Cyan
-  'rgb(20, 184, 166)',   // Teal
-  'rgb(99, 102, 241)',   // Indigo
+  "rgb(59, 130, 246)", // Blue
+  "rgb(16, 185, 129)", // Green
+  "rgb(139, 92, 246)", // Purple
+  "rgb(6, 182, 212)", // Cyan
+  "rgb(20, 184, 166)", // Teal
+  "rgb(99, 102, 241)", // Indigo
 
   // Mid-range colors (7-12) - more distinct
-  'rgb(244, 114, 182)',  // Pink
-  'rgb(251, 146, 60)',   // Orange
-  'rgb(234, 179, 8)',    // Yellow
-  'rgb(132, 204, 22)',   // Lime
-  'rgb(248, 113, 113)',  // Red
-  'rgb(168, 85, 247)',   // Violet
+  "rgb(244, 114, 182)", // Pink
+  "rgb(251, 146, 60)", // Orange
+  "rgb(234, 179, 8)", // Yellow
+  "rgb(132, 204, 22)", // Lime
+  "rgb(248, 113, 113)", // Red
+  "rgb(168, 85, 247)", // Violet
 
   // Vibrant colors (13-20) - maximum distinction
-  'rgb(236, 72, 153)',   // Fuchsia
-  'rgb(245, 158, 11)',   // Amber
-  'rgb(34, 197, 94)',    // Emerald
-  'rgb(14, 165, 233)',   // Sky
-  'rgb(239, 68, 68)',    // Rose
-  'rgb(168, 162, 158)',  // Stone
-  'rgb(251, 191, 36)',   // Gold
-  'rgb(192, 132, 252)',  // Light Purple
+  "rgb(236, 72, 153)", // Fuchsia
+  "rgb(245, 158, 11)", // Amber
+  "rgb(34, 197, 94)", // Emerald
+  "rgb(14, 165, 233)", // Sky
+  "rgb(239, 68, 68)", // Rose
+  "rgb(168, 162, 158)", // Stone
+  "rgb(251, 191, 36)", // Gold
+  "rgb(192, 132, 252)", // Light Purple
 ] as const;
 
 export const MAX_PAGE_EDITOR_FILES = 20;
@@ -57,5 +57,5 @@ export function getFileColor(index: number): string {
 export function getFileColorWithOpacity(index: number, opacity: number = 0.2): string {
   const rgb = getFileColor(index);
   // Convert rgb(r, g, b) to rgba(r, g, b, a)
-  return rgb.replace('rgb(', 'rgba(').replace(')', `, ${opacity})`);
+  return rgb.replace("rgb(", "rgba(").replace(")", `, ${opacity})`);
 }
diff --git a/frontend/src/core/components/pageEditor/hooks/useEditedDocumentState.ts b/frontend/src/core/components/pageEditor/hooks/useEditedDocumentState.ts
index 9cc7275f6d..1e8199c332 100644
--- a/frontend/src/core/components/pageEditor/hooks/useEditedDocumentState.ts
+++ b/frontend/src/core/components/pageEditor/hooks/useEditedDocumentState.ts
@@ -89,8 +89,7 @@ export const useEditedDocumentState = ({
     const currentEditedDocument = editedDocumentRef.current;
     if (!mergedPdfDocument || !currentEditedDocument) return;
 
-    const signatureChanged =
-      mergedDocSignature !== lastSyncedSignatureRef.current;
+    const signatureChanged = mergedDocSignature !== lastSyncedSignatureRef.current;
     const metadataChanged =
       currentEditedDocument.id !== mergedPdfDocument.id ||
       currentEditedDocument.file !== mergedPdfDocument.file ||
@@ -118,8 +117,7 @@ export const useEditedDocumentState = ({
         }
 
         const hasAdditions = newPages.length > 0;
-        const isEphemeralPage = (page: PDFPage) =>
-          Boolean(page.isBlankPage || page.isPlaceholder);
+        const isEphemeralPage = (page: PDFPage) => Boolean(page.isBlankPage || page.isPlaceholder);
 
         let hasRemovals = false;
         for (const page of prev.pages) {
@@ -144,16 +142,12 @@ export const useEditedDocumentState = ({
           const nextInsertIndexByFile = new Map(placeholderPositions);
 
           if (hasRemovals) {
-            pages = pages.filter(
-              (page) => sourceIds.has(page.id) || isEphemeralPage(page)
-            );
+            pages = pages.filter((page) => sourceIds.has(page.id) || isEphemeralPage(page));
           }
 
           if (hasAdditions) {
             const mergedIndexMap = new Map<string, number>();
-            sourcePages.forEach((page, index) =>
-              mergedIndexMap.set(page.id, index)
-            );
+            sourcePages.forEach((page, index) => mergedIndexMap.set(page.id, index));
 
             const additions = newPages
               .map((page) => ({
@@ -176,10 +170,7 @@ export const useEditedDocumentState = ({
 
               let insertIndex: number;
               const originalFileId = page.originalFileId;
-              const placeholderIndex =
-                originalFileId !== undefined
-                  ? nextInsertIndexByFile.get(originalFileId)
-                  : undefined;
+              const placeholderIndex = originalFileId !== undefined ? nextInsertIndexByFile.get(originalFileId) : undefined;
 
               if (originalFileId && placeholderIndex !== undefined) {
                 insertIndex = Math.min(placeholderIndex, pages.length);
@@ -203,7 +194,6 @@ export const useEditedDocumentState = ({
               pages.splice(insertIndex, 0, clonedPage);
             });
           }
-
         }
 
         if (shouldResetToMerged || hasAdditions || hasRemovals) {
@@ -240,10 +230,7 @@ export const useEditedDocumentState = ({
 
   const displayDocument = editedDocument || initialDocument;
 
-  const getEditedDocument = useCallback(
-    () => editedDocumentRef.current,
-    []
-  );
+  const getEditedDocument = useCallback(() => editedDocumentRef.current, []);
 
   useEffect(() => {
     updateCurrentPages(displayDocument?.pages ?? null);
@@ -257,6 +244,4 @@ export const useEditedDocumentState = ({
   };
 };
 
-export type UseEditedDocumentStateReturn = ReturnType<
-  typeof useEditedDocumentState
->;
+export type UseEditedDocumentStateReturn = ReturnType<typeof useEditedDocumentState>;
diff --git a/frontend/src/core/components/pageEditor/hooks/useEditorCommands.ts b/frontend/src/core/components/pageEditor/hooks/useEditorCommands.ts
index ce0916740f..daf429d1ad 100644
--- a/frontend/src/core/components/pageEditor/hooks/useEditorCommands.ts
+++ b/frontend/src/core/components/pageEditor/hooks/useEditorCommands.ts
@@ -7,10 +7,7 @@ import {
   ReorderPagesCommand,
   SplitCommand,
 } from "@app/components/pageEditor/commands/pageCommands";
-import type {
-  useFileActions,
-  useFileState,
-} from "@app/contexts/FileContext";
+import type { useFileActions, useFileState } from "@app/contexts/FileContext";
 import { PDFDocument, PDFPage } from "@app/types/pageEditor";
 import { FileId } from "@app/types/file";
 import { StirlingFileStub } from "@app/types/fileContext";
@@ -69,7 +66,7 @@ export const usePageEditorCommands = ({
       const bulkRotateCommand = new BulkRotateCommand(pageIds, rotation, getEditedDocument, setEditedDocument);
       executeCommandWithTracking(bulkRotateCommand);
     },
-    [executeCommandWithTracking, getEditedDocument, setEditedDocument]
+    [executeCommandWithTracking, getEditedDocument, setEditedDocument],
   );
 
   const createRotateCommand = useCallback(
@@ -79,7 +76,7 @@ export const usePageEditorCommands = ({
         executeCommandWithTracking(bulkRotateCommand);
       },
     }),
-    [executeCommandWithTracking, getEditedDocument, setEditedDocument]
+    [executeCommandWithTracking, getEditedDocument, setEditedDocument],
   );
 
   const createDeleteCommand = useCallback(
@@ -104,7 +101,7 @@ export const usePageEditorCommands = ({
             () => splitPositions,
             setSplitPositions,
             () => getPageNumbersFromIds(selectedPageIds),
-            () => closePdf()
+            () => closePdf(),
           );
           executeCommandWithTracking(deleteCommand);
         }
@@ -120,22 +117,17 @@ export const usePageEditorCommands = ({
       setSelectedPageIds,
       setSplitPositions,
       splitPositions,
-    ]
+    ],
   );
 
   const createSplitCommand = useCallback(
     (pageId: string, pageNumber: number) => ({
       execute: () => {
-        const splitCommand = new SplitCommand(
-          pageId,
-          pageNumber,
-          () => splitPositionsRef.current,
-          setSplitPositions
-        );
+        const splitCommand = new SplitCommand(pageId, pageNumber, () => splitPositionsRef.current, setSplitPositions);
         executeCommandWithTracking(splitCommand);
       },
     }),
-    [executeCommandWithTracking, setSplitPositions]
+    [executeCommandWithTracking, setSplitPositions],
   );
 
   const executeCommand = useCallback((command: any) => {
@@ -151,7 +143,7 @@ export const usePageEditorCommands = ({
 
       handleRotatePages(selectedPageIds, rotation);
     },
-    [displayDocument, selectedPageIds, handleRotatePages]
+    [displayDocument, selectedPageIds, handleRotatePages],
   );
 
   const handleDelete = useCallback(() => {
@@ -167,7 +159,7 @@ export const usePageEditorCommands = ({
       () => splitPositions,
       setSplitPositions,
       () => selectedPageNumbers,
-      () => closePdf()
+      () => closePdf(),
     );
     executeCommandWithTracking(deleteCommand);
   }, [
@@ -195,7 +187,7 @@ export const usePageEditorCommands = ({
         () => splitPositions,
         setSplitPositions,
         () => getPageNumbersFromIds(selectedPageIds),
-        () => closePdf()
+        () => closePdf(),
       );
       executeCommandWithTracking(deleteCommand);
     },
@@ -209,23 +201,19 @@ export const usePageEditorCommands = ({
       setSelectedPageIds,
       setSplitPositions,
       splitPositions,
-    ]
+    ],
   );
 
   const handleSplit = useCallback(() => {
     if (!displayDocument || selectedPageIds.length === 0) return;
 
     const selectedSplitPageIds = displayDocument.pages
-      .filter((page, index) =>
-        selectedPageIds.includes(page.id) && index < displayDocument.pages.length - 1
-      )
+      .filter((page, index) => selectedPageIds.includes(page.id) && index < displayDocument.pages.length - 1)
       .map((page) => page.id);
 
     if (selectedSplitPageIds.length === 0) return;
 
-    const existingSplitsCount = selectedSplitPageIds.filter((id) =>
-      splitPositions.has(id)
-    ).length;
+    const existingSplitsCount = selectedSplitPageIds.filter((id) => splitPositions.has(id)).length;
     const noSplitsCount = selectedSplitPageIds.length - existingSplitsCount;
     const shouldRemoveSplits = existingSplitsCount > noSplitsCount;
 
@@ -246,14 +234,7 @@ export const usePageEditorCommands = ({
     };
 
     executeCommandWithTracking(smartSplitCommand);
-  }, [
-    selectedPageIds,
-    displayDocument,
-    splitPositions,
-    setSplitPositions,
-    getPageNumbersFromIds,
-    executeCommandWithTracking,
-  ]);
+  }, [selectedPageIds, displayDocument, splitPositions, setSplitPositions, getPageNumbersFromIds, executeCommandWithTracking]);
 
   const handleSplitAll = handleSplit;
 
@@ -262,11 +243,7 @@ export const usePageEditorCommands = ({
 
     const selectedPageNumbers = getPageNumbersFromIds(selectedPageIds);
 
-    const pageBreakCommand = new PageBreakCommand(
-      selectedPageNumbers,
-      getEditedDocument,
-      setEditedDocument
-    );
+    const pageBreakCommand = new PageBreakCommand(selectedPageNumbers, getEditedDocument, setEditedDocument);
     executeCommandWithTracking(pageBreakCommand);
   }, [
     displayDocument,
@@ -280,12 +257,8 @@ export const usePageEditorCommands = ({
   const handlePageBreakAll = handlePageBreak;
 
   const handleInsertFiles = useCallback(
-    async (
-      files: File[] | StirlingFileStub[],
-      insertAfterPage: number,
-      isFromStorage?: boolean
-    ) => {
-      console.log('[PageEditor] handleInsertFiles called:', {
+    async (files: File[] | StirlingFileStub[], insertAfterPage: number, isFromStorage?: boolean) => {
+      console.log("[PageEditor] handleInsertFiles called:", {
         fileCount: files.length,
         insertAfterPage,
         isFromStorage,
@@ -293,7 +266,7 @@ export const usePageEditorCommands = ({
 
       const workingDocument = getEditedDocument();
       if (!workingDocument || files.length === 0) {
-        console.log('[PageEditor] handleInsertFiles early return:', {
+        console.log("[PageEditor] handleInsertFiles early return:", {
           hasDocument: !!workingDocument,
           fileCount: files.length,
         });
@@ -301,16 +274,14 @@ export const usePageEditorCommands = ({
       }
 
       try {
-        const targetPage = workingDocument.pages.find(
-          (p) => p.pageNumber === insertAfterPage
-        );
+        const targetPage = workingDocument.pages.find((p) => p.pageNumber === insertAfterPage);
         if (!targetPage) {
-          console.log('[PageEditor] Target page not found:', insertAfterPage);
+          console.log("[PageEditor] Target page not found:", insertAfterPage);
           return;
         }
 
         const insertAfterPageId = targetPage.id;
-        console.log('[PageEditor] Inserting files after page:', {
+        console.log("[PageEditor] Inserting files after page:", {
           pageNumber: insertAfterPage,
           pageId: insertAfterPageId,
         });
@@ -329,7 +300,7 @@ export const usePageEditorCommands = ({
             insertAfterPageId,
           });
           addedFileIds = result.map((file) => file.fileId);
-          console.log('[PageEditor] Files added to context:', {
+          console.log("[PageEditor] Files added to context:", {
             addedCount: addedFileIds.length,
             fileIds: addedFileIds,
           });
@@ -346,8 +317,7 @@ export const usePageEditorCommands = ({
               id: `${fileId}-${page.pageNumber ?? idx + 1}`,
               pageNumber: page.pageNumber ?? idx + 1,
               originalFileId: fileId,
-              originalPageNumber:
-                page.originalPageNumber ?? page.pageNumber ?? idx + 1,
+              originalPageNumber: page.originalPageNumber ?? page.pageNumber ?? idx + 1,
               rotation: page.rotation ?? 0,
               thumbnail: page.thumbnail ?? null,
               selected: false,
@@ -358,9 +328,7 @@ export const usePageEditorCommands = ({
         }
 
         if (newPages.length > 0) {
-          const targetIndex = workingDocument.pages.findIndex(
-            (p) => p.id === targetPage.id
-          );
+          const targetIndex = workingDocument.pages.findIndex((p) => p.id === targetPage.id);
 
           if (targetIndex >= 0) {
             const updatedPages = [...workingDocument.pages];
@@ -382,26 +350,14 @@ export const usePageEditorCommands = ({
         console.error("Failed to insert files:", error);
       }
     },
-    [
-      getEditedDocument,
-      actions,
-      selectors,
-      updateFileOrderFromPages,
-      setEditedDocument,
-    ]
+    [getEditedDocument, actions, selectors, updateFileOrderFromPages, setEditedDocument],
   );
 
   const handleReorderPages = useCallback(
-    (
-      sourcePageNumber: number,
-      targetIndex: number,
-      draggedPageIds?: string[]
-    ) => {
+    (sourcePageNumber: number, targetIndex: number, draggedPageIds?: string[]) => {
       if (!displayDocument) return;
 
-      const selectedPages = draggedPageIds
-        ? getPageNumbersFromIds(draggedPageIds)
-        : undefined;
+      const selectedPages = draggedPageIds ? getPageNumbersFromIds(draggedPageIds) : undefined;
 
       const reorderCommand = new ReorderPagesCommand(
         sourcePageNumber,
@@ -409,7 +365,7 @@ export const usePageEditorCommands = ({
         selectedPages,
         getEditedDocument,
         setEditedDocument,
-        (newPages) => updateFileOrderFromPages(newPages)
+        (newPages) => updateFileOrderFromPages(newPages),
       );
       executeCommandWithTracking(reorderCommand);
     },
@@ -420,7 +376,7 @@ export const usePageEditorCommands = ({
       getPageNumbersFromIds,
       setEditedDocument,
       updateFileOrderFromPages,
-    ]
+    ],
   );
 
   return {
@@ -441,6 +397,4 @@ export const usePageEditorCommands = ({
   };
 };
 
-export type UsePageEditorCommandsReturn = ReturnType<
-  typeof usePageEditorCommands
->;
+export type UsePageEditorCommandsReturn = ReturnType<typeof usePageEditorCommands>;
diff --git a/frontend/src/core/components/pageEditor/hooks/useFileColorMap.ts b/frontend/src/core/components/pageEditor/hooks/useFileColorMap.ts
index 463289a4e4..f6e9a9c7ed 100644
--- a/frontend/src/core/components/pageEditor/hooks/useFileColorMap.ts
+++ b/frontend/src/core/components/pageEditor/hooks/useFileColorMap.ts
@@ -1,5 +1,5 @@
-import { useMemo, useRef } from 'react';
-import { FileId } from '@app/types/file';
+import { useMemo, useRef } from "react";
+import { FileId } from "@app/types/file";
 
 /**
  * Maintains stable color assignments for a collection of file IDs.
@@ -8,7 +8,7 @@ import { FileId } from '@app/types/file';
 export function useFileColorMap(fileIds: FileId[]): Map<FileId, number> {
   const assignmentsRef = useRef(new Map<FileId, number>());
 
-  const serializedIds = useMemo(() => fileIds.join(','), [fileIds]);
+  const serializedIds = useMemo(() => fileIds.join(","), [fileIds]);
 
   return useMemo(() => {
     const assignments = assignmentsRef.current;
diff --git a/frontend/src/core/components/pageEditor/hooks/useInitialPageDocument.ts b/frontend/src/core/components/pageEditor/hooks/useInitialPageDocument.ts
index 2d1fe0a066..cd641a9c91 100644
--- a/frontend/src/core/components/pageEditor/hooks/useInitialPageDocument.ts
+++ b/frontend/src/core/components/pageEditor/hooks/useInitialPageDocument.ts
@@ -1,6 +1,6 @@
-import { useState, useEffect, useRef } from 'react';
-import { usePageDocument } from '@app/components/pageEditor/hooks/usePageDocument';
-import { PDFDocument } from '@app/types/pageEditor';
+import { useState, useEffect, useRef } from "react";
+import { usePageDocument } from "@app/components/pageEditor/hooks/usePageDocument";
+import { PDFDocument } from "@app/types/pageEditor";
 
 /**
  * Hook that calls usePageDocument but only returns the FIRST non-null result
@@ -30,7 +30,7 @@ export function useInitialPageDocument(): PDFDocument | null {
       return;
     }
 
-    console.log('📄 useInitialPageDocument: Captured initial document with', liveDocument.pages.length, 'pages');
+    console.log("📄 useInitialPageDocument: Captured initial document with", liveDocument.pages.length, "pages");
     setInitialDocument(liveDocument);
   }, [liveDocument, initialDocument]);
 
diff --git a/frontend/src/core/components/pageEditor/hooks/usePageDocument.ts b/frontend/src/core/components/pageEditor/hooks/usePageDocument.ts
index 6494e7bd0a..206b4b431e 100644
--- a/frontend/src/core/components/pageEditor/hooks/usePageDocument.ts
+++ b/frontend/src/core/components/pageEditor/hooks/usePageDocument.ts
@@ -1,9 +1,9 @@
-import { useMemo, useEffect, useRef, useState } from 'react';
-import { useFileState } from '@app/contexts/FileContext';
-import { usePageEditor } from '@app/contexts/PageEditorContext';
-import { PDFDocument, PDFPage } from '@app/types/pageEditor';
-import { FileId } from '@app/types/file';
-import { FileAnalyzer } from '@app/services/fileAnalyzer';
+import { useMemo, useEffect, useRef, useState } from "react";
+import { useFileState } from "@app/contexts/FileContext";
+import { usePageEditor } from "@app/contexts/PageEditorContext";
+import { PDFDocument, PDFPage } from "@app/types/pageEditor";
+import { FileId } from "@app/types/file";
+import { FileAnalyzer } from "@app/services/fileAnalyzer";
 
 export interface PageDocumentHook {
   document: PDFDocument | null;
@@ -26,15 +26,15 @@ export function usePageDocument(): PageDocumentHook {
   // Derive selected file IDs directly from FileContext (single source of truth)
   // Filter to only include PDF files (PageEditor only supports PDFs)
   // Use stable string keys to prevent infinite loops
-  const allFileIdsKey = allFileIds.join(',');
-  const selectedFileIdsKey = [...state.ui.selectedFileIds].sort().join(',');
+  const allFileIdsKey = allFileIds.join(",");
+  const selectedFileIdsKey = [...state.ui.selectedFileIds].sort().join(",");
   const activeFilesSignature = selectors.getFilesSignature();
 
   // Get ALL PDF files (selected or not) for document building with placeholders
   const activeFileIds = useMemo(() => {
-    return allFileIds.filter(id => {
+    return allFileIds.filter((id) => {
       const stub = selectors.getStirlingFileStub(id);
-      return stub?.name?.toLowerCase().endsWith('.pdf') ?? false;
+      return stub?.name?.toLowerCase().endsWith(".pdf") ?? false;
     });
   }, [allFileIdsKey, activeFilesSignature, selectors]);
 
@@ -65,20 +65,20 @@ export function usePageDocument(): PageDocumentHook {
   useEffect(() => {
     if (!primaryFileId) {
       placeholderDocumentRef.current = null;
-      setPlaceholderVersion(v => v + 1);
+      setPlaceholderVersion((v) => v + 1);
       return;
     }
 
     if (primaryStirlingFileStub?.processedFile) {
       placeholderDocumentRef.current = null;
-      setPlaceholderVersion(v => v + 1);
+      setPlaceholderVersion((v) => v + 1);
       return;
     }
 
     const file = selectors.getFile(primaryFileId);
     if (!file) {
       placeholderDocumentRef.current = null;
-      setPlaceholderVersion(v => v + 1);
+      setPlaceholderVersion((v) => v + 1);
       return;
     }
 
@@ -107,12 +107,12 @@ export function usePageDocument(): PageDocumentHook {
             pages,
             totalPages,
           };
-          setPlaceholderVersion(v => v + 1);
+          setPlaceholderVersion((v) => v + 1);
         }
       } catch {
         if (!canceled) {
           placeholderDocumentRef.current = null;
-          setPlaceholderVersion(v => v + 1);
+          setPlaceholderVersion((v) => v + 1);
         }
       }
     };
@@ -126,11 +126,11 @@ export function usePageDocument(): PageDocumentHook {
 
   // Compute merged document with stable signature (prevents infinite loops)
   const currentPagesSignature = useMemo(() => {
-    return currentPages ? currentPages.map(page => page.id).join(',') : '';
+    return currentPages ? currentPages.map((page) => page.id).join(",") : "";
   }, [currentPages]);
 
   const mergedPdfDocument = useMemo((): PDFDocument | null => {
-    console.log('[usePageDocument] Building document:', {
+    console.log("[usePageDocument] Building document:", {
       activeFileIds: activeFileIds.length,
       selectedActiveFileIds: selectedActiveFileIds.length,
       hasPersistedDoc: !!persistedDocument,
@@ -140,42 +140,42 @@ export function usePageDocument(): PageDocumentHook {
     });
 
     if (activeFileIds.length === 0) {
-      console.log('[usePageDocument] No active files, returning null');
+      console.log("[usePageDocument] No active files, returning null");
       return null;
     }
 
-  // Check if persisted document is still valid
-  // Must match signature AND have the same number of source files
-  const persistedFileIds = persistedDocument
-    ? Array.from(new Set(persistedDocument.pages.map(p => p.originalFileId).filter(Boolean)))
-    : [];
-  const persistedIsValid =
-    persistedDocument &&
-    persistedDocumentSignature &&
-    persistedDocumentSignature === currentPagesSignature &&
-    currentPagesSignature.length > 0 &&
-    persistedFileIds.length === activeFileIds.length; // Ensure file count matches
+    // Check if persisted document is still valid
+    // Must match signature AND have the same number of source files
+    const persistedFileIds = persistedDocument
+      ? Array.from(new Set(persistedDocument.pages.map((p) => p.originalFileId).filter(Boolean)))
+      : [];
+    const persistedIsValid =
+      persistedDocument &&
+      persistedDocumentSignature &&
+      persistedDocumentSignature === currentPagesSignature &&
+      currentPagesSignature.length > 0 &&
+      persistedFileIds.length === activeFileIds.length; // Ensure file count matches
 
-  if (persistedIsValid) {
-    console.log('[usePageDocument] Using persisted document');
-    return persistedDocument;
-  } else if (persistedDocument) {
-    console.log('[usePageDocument] Persisted document invalid - rebuilding:', {
-      sigMatch: persistedDocumentSignature === currentPagesSignature,
-      persistedFiles: persistedFileIds.length,
-      activeFiles: activeFileIds.length,
-    });
-  }
+    if (persistedIsValid) {
+      console.log("[usePageDocument] Using persisted document");
+      return persistedDocument;
+    } else if (persistedDocument) {
+      console.log("[usePageDocument] Persisted document invalid - rebuilding:", {
+        sigMatch: persistedDocumentSignature === currentPagesSignature,
+        persistedFiles: persistedFileIds.length,
+        activeFiles: activeFileIds.length,
+      });
+    }
 
-  if (!primaryStirlingFileStub?.processedFile && placeholderDocumentRef.current) {
-    return placeholderDocumentRef.current;
-  }
+    if (!primaryStirlingFileStub?.processedFile && placeholderDocumentRef.current) {
+      return placeholderDocumentRef.current;
+    }
 
-  const primaryFile = primaryFileId ? selectors.getFile(primaryFileId) : null;
+    const primaryFile = primaryFileId ? selectors.getFile(primaryFileId) : null;
 
     // If we have file IDs but no file record, something is wrong - return null to show loading
     if (!primaryStirlingFileStub) {
-      console.log('🎬 PageEditor: No primary file record found, showing loading');
+      console.log("🎬 PageEditor: No primary file record found, showing loading");
       return null;
     }
 
@@ -183,21 +183,19 @@ export function usePageDocument(): PageDocumentHook {
 
     const name =
       namingFileIds.length <= 1
-        ? (namingFileIds[0]
-            ? selectors.getStirlingFileStub(namingFileIds[0])?.name ?? 'document.pdf'
-            : 'document.pdf')
-        : namingFileIds
-            .map(id => (selectors.getStirlingFileStub(id)?.name ?? 'file').replace(/\.pdf$/i, ''))
-            .join(' + ');
+        ? namingFileIds[0]
+          ? (selectors.getStirlingFileStub(namingFileIds[0])?.name ?? "document.pdf")
+          : "document.pdf"
+        : namingFileIds.map((id) => (selectors.getStirlingFileStub(id)?.name ?? "file").replace(/\.pdf$/i, "")).join(" + ");
 
     // Build page insertion map from files with insertion positions
     const insertionMap = new Map<string, FileId[]>(); // insertAfterPageId -> fileIds
     const originalFileIds: FileId[] = [];
 
-    activeFileIds.forEach(fileId => {
+    activeFileIds.forEach((fileId) => {
       const record = selectors.getStirlingFileStub(fileId);
       if (record?.insertAfterPageId !== undefined) {
-        console.log('[usePageDocument] File has insertAfterPageId:', {
+        console.log("[usePageDocument] File has insertAfterPageId:", {
           fileId,
           insertAfterPageId: record.insertAfterPageId,
         });
@@ -210,7 +208,7 @@ export function usePageDocument(): PageDocumentHook {
       }
     });
 
-    console.log('[usePageDocument] File categorization:', {
+    console.log("[usePageDocument] File categorization:", {
       originalFiles: originalFileIds.length,
       filesToInsert: insertionMap.size,
       totalActive: activeFileIds.length,
@@ -228,17 +226,19 @@ export function usePageDocument(): PageDocumentHook {
 
       // If file is deselected, create a single placeholder page
       if (!isSelected) {
-        return [{
-          id: `${fileId}-placeholder`,
-          pageNumber: startPageNumber,
-          originalPageNumber: 1,
-          originalFileId: fileId,
-          rotation: 0,
-          thumbnail: null,
-          selected: false,
-          splitAfter: false,
-          isPlaceholder: true,
-        }];
+        return [
+          {
+            id: `${fileId}-placeholder`,
+            pageNumber: startPageNumber,
+            originalPageNumber: 1,
+            originalFileId: fileId,
+            rotation: 0,
+            thumbnail: null,
+            selected: false,
+            splitAfter: false,
+            isPlaceholder: true,
+          },
+        ];
       }
 
       const processedFile = stirlingFileStub.processedFile;
@@ -277,17 +277,19 @@ export function usePageDocument(): PageDocumentHook {
 
       // No processedFile yet - create a single loading placeholder
       // This will be replaced when processing completes
-      return [{
-        id: `${fileId}-loading`,
-        pageNumber: startPageNumber,
-        originalPageNumber: 1,
-        originalFileId: fileId,
-        rotation: 0,
-        thumbnail: null,
-        selected: false,
-        splitAfter: false,
-        isPlaceholder: true,
-      }];
+      return [
+        {
+          id: `${fileId}-loading`,
+          pageNumber: startPageNumber,
+          originalPageNumber: 1,
+          originalFileId: fileId,
+          rotation: 0,
+          thumbnail: null,
+          selected: false,
+          splitAfter: false,
+          isPlaceholder: true,
+        },
+      ];
     };
 
     // Collect all pages from original files, respecting their previous positions
@@ -304,7 +306,7 @@ export function usePageDocument(): PageDocumentHook {
     });
 
     const originalFilePages: PDFPage[] = [];
-    sortedOriginalFileIds.forEach(fileId => {
+    sortedOriginalFileIds.forEach((fileId) => {
       const isSelected = selectedFileIdsSet.has(fileId);
       const filePages = createPagesFromFile(fileId, 1, isSelected); // Temporary numbering
       originalFilePages.push(...filePages);
@@ -313,18 +315,18 @@ export function usePageDocument(): PageDocumentHook {
     // Start with all original pages numbered sequentially
     pages = originalFilePages.map((page, index) => ({
       ...page,
-      pageNumber: index + 1
+      pageNumber: index + 1,
     }));
 
     // Process each insertion by finding the page ID and inserting after it
     for (const [insertAfterPageId, fileIds] of insertionMap.entries()) {
-      const targetPageIndex = pages.findIndex(p => p.id === insertAfterPageId);
+      const targetPageIndex = pages.findIndex((p) => p.id === insertAfterPageId);
 
       if (targetPageIndex === -1) continue;
 
       // Collect all pages to insert
       const allNewPages: PDFPage[] = [];
-      fileIds.forEach(fileId => {
+      fileIds.forEach((fileId) => {
         const isSelected = selectedFileIdsSet.has(fileId);
         const insertedPages = createPagesFromFile(fileId, 1, isSelected);
         allNewPages.push(...insertedPages);
@@ -350,11 +352,11 @@ export function usePageDocument(): PageDocumentHook {
       pageNumber: index + 1,
     }));
 
-    const currentPagesSet = currentPages ? new Set(currentPages.map(page => page.id)) : null;
+    const currentPagesSet = currentPages ? new Set(currentPages.map((page) => page.id)) : null;
     if (currentPagesSet && currentPages && currentPagesSet.size === pages.length) {
-      const sameIds = pages.every(page => currentPagesSet.has(page.id));
+      const sameIds = pages.every((page) => currentPagesSet.has(page.id));
       if (sameIds) {
-        const mergedById = new Map(pages.map(page => [page.id, page]));
+        const mergedById = new Map(pages.map((page) => [page.id, page]));
         pages = currentPages.map((currentPage, index) => {
           const source = mergedById.get(currentPage.id);
           const mergedPage = source ? { ...source, ...currentPage } : currentPage;
@@ -367,7 +369,7 @@ export function usePageDocument(): PageDocumentHook {
     }
 
     const mergedDoc: PDFDocument = {
-      id: activeFileIds.join('-'),
+      id: activeFileIds.join("-"),
       name,
       file: primaryFile!,
       pages,
@@ -406,6 +408,6 @@ export function usePageDocument(): PageDocumentHook {
   return {
     document: mergedPdfDocument,
     isVeryLargeDocument,
-    isLoading
+    isLoading,
   };
 }
diff --git a/frontend/src/core/components/pageEditor/hooks/usePageEditorDropdownState.ts b/frontend/src/core/components/pageEditor/hooks/usePageEditorDropdownState.ts
index cc8d51725d..d165acaecf 100644
--- a/frontend/src/core/components/pageEditor/hooks/usePageEditorDropdownState.ts
+++ b/frontend/src/core/components/pageEditor/hooks/usePageEditorDropdownState.ts
@@ -1,8 +1,8 @@
-import { useMemo } from 'react';
-import { usePageEditor } from '@app/contexts/PageEditorContext';
-import { useFileState } from '@app/contexts/FileContext';
-import { FileId } from '@app/types/file';
-import { useFileColorMap } from '@app/components/pageEditor/hooks/useFileColorMap';
+import { useMemo } from "react";
+import { usePageEditor } from "@app/contexts/PageEditorContext";
+import { useFileState } from "@app/contexts/FileContext";
+import { FileId } from "@app/types/file";
+import { useFileColorMap } from "@app/components/pageEditor/hooks/useFileColorMap";
 
 export interface PageEditorDropdownFile {
   fileId: FileId;
@@ -20,16 +20,11 @@ export interface PageEditorDropdownState {
   fileColorMap: Map<FileId, number>;
 }
 
-const isPdf = (name?: string | null) =>
-  typeof name === 'string' && name.toLowerCase().endsWith('.pdf');
+const isPdf = (name?: string | null) => typeof name === "string" && name.toLowerCase().endsWith(".pdf");
 
 export function usePageEditorDropdownState(): PageEditorDropdownState {
   const { state, selectors } = useFileState();
-  const {
-    toggleFileSelection,
-    reorderFiles,
-    fileOrder,
-  } = usePageEditor();
+  const { toggleFileSelection, reorderFiles, fileOrder } = usePageEditor();
 
   const pageEditorFiles = useMemo(() => {
     return fileOrder
@@ -39,7 +34,7 @@ export function usePageEditorDropdownState(): PageEditorDropdownState {
 
         return {
           fileId,
-          name: stub?.name || '',
+          name: stub?.name || "",
           versionNumber: stub?.versionNumber,
           isSelected: state.ui.selectedFileIds.includes(fileId),
         };
@@ -49,17 +44,17 @@ export function usePageEditorDropdownState(): PageEditorDropdownState {
 
   const fileColorMap = useFileColorMap(pageEditorFiles.map((file) => file.fileId));
 
-  const selectedCount = useMemo(
-    () => pageEditorFiles.filter((file) => file.isSelected).length,
-    [pageEditorFiles]
-  );
+  const selectedCount = useMemo(() => pageEditorFiles.filter((file) => file.isSelected).length, [pageEditorFiles]);
 
-  return useMemo<PageEditorDropdownState>(() => ({
-    files: pageEditorFiles,
-    selectedCount,
-    totalCount: pageEditorFiles.length,
-    onToggleSelection: toggleFileSelection,
-    onReorder: reorderFiles,
-    fileColorMap,
-  }), [pageEditorFiles, selectedCount, toggleFileSelection, reorderFiles, fileColorMap]);
+  return useMemo<PageEditorDropdownState>(
+    () => ({
+      files: pageEditorFiles,
+      selectedCount,
+      totalCount: pageEditorFiles.length,
+      onToggleSelection: toggleFileSelection,
+      onReorder: reorderFiles,
+      fileColorMap,
+    }),
+    [pageEditorFiles, selectedCount, toggleFileSelection, reorderFiles, fileColorMap],
+  );
 }
diff --git a/frontend/src/core/components/pageEditor/hooks/usePageEditorExport.ts b/frontend/src/core/components/pageEditor/hooks/usePageEditorExport.ts
index 72cefce448..9c5d922c48 100644
--- a/frontend/src/core/components/pageEditor/hooks/usePageEditorExport.ts
+++ b/frontend/src/core/components/pageEditor/hooks/usePageEditorExport.ts
@@ -1,9 +1,6 @@
 import { Dispatch, SetStateAction, useCallback } from "react";
 
-import type {
-  useFileActions,
-  useFileState,
-} from "@app/contexts/FileContext";
+import type { useFileActions, useFileState } from "@app/contexts/FileContext";
 import { documentManipulationService } from "@app/services/documentManipulationService";
 import { pdfExportService } from "@app/services/pdfExportService";
 import { exportProcessedDocumentsToFiles } from "@app/services/pdfExportHelpers";
@@ -46,13 +43,9 @@ const removePlaceholderPages = (document: PDFDocument): PDFDocument => {
   };
 };
 
-const normalizeProcessedDocuments = (
-  processed: PDFDocument | PDFDocument[]
-): PDFDocument | PDFDocument[] => {
+const normalizeProcessedDocuments = (processed: PDFDocument | PDFDocument[]): PDFDocument | PDFDocument[] => {
   if (Array.isArray(processed)) {
-    const normalized = processed
-      .map(removePlaceholderPages)
-      .filter((doc) => doc.pages.length > 0);
+    const normalized = processed.map(removePlaceholderPages).filter((doc) => doc.pages.length > 0);
     return normalized;
   }
   return removePlaceholderPages(processed);
@@ -111,17 +104,14 @@ export const usePageEditorExport = ({
 
     setExportLoading(true);
     try {
-      const processedDocuments =
-        documentManipulationService.applyDOMChangesToDocument(
-          displayDocument,
-          displayDocument,
-          splitPositions
-        );
+      const processedDocuments = documentManipulationService.applyDOMChangesToDocument(
+        displayDocument,
+        displayDocument,
+        splitPositions,
+      );
 
       const normalizedDocuments = normalizeProcessedDocuments(processedDocuments);
-      const documentWithDOMState = Array.isArray(normalizedDocuments)
-        ? normalizedDocuments[0]
-        : normalizedDocuments;
+      const documentWithDOMState = Array.isArray(normalizedDocuments) ? normalizedDocuments[0] : normalizedDocuments;
 
       if (!documentWithDOMState || documentWithDOMState.pages.length === 0) {
         console.warn("Export skipped: no concrete pages available after filtering placeholders.");
@@ -130,23 +120,20 @@ export const usePageEditorExport = ({
       }
 
       const validSelectedPageIds = selectedPageIds.filter((pageId) =>
-        documentWithDOMState.pages.some((page) => page.id === pageId)
+        documentWithDOMState.pages.some((page) => page.id === pageId),
       );
 
       const sourceFiles = getSourceFiles();
       const exportFilename = getExportFilename();
       const result = sourceFiles
-        ? await pdfExportService.exportPDFMultiFile(
-            documentWithDOMState,
-            sourceFiles,
-            validSelectedPageIds,
-            { selectedOnly: true, filename: exportFilename }
-          )
-        : await pdfExportService.exportPDF(
-            documentWithDOMState,
-            validSelectedPageIds,
-            { selectedOnly: true, filename: exportFilename }
-          );
+        ? await pdfExportService.exportPDFMultiFile(documentWithDOMState, sourceFiles, validSelectedPageIds, {
+            selectedOnly: true,
+            filename: exportFilename,
+          })
+        : await pdfExportService.exportPDF(documentWithDOMState, validSelectedPageIds, {
+            selectedOnly: true,
+            filename: exportFilename,
+          });
 
       pdfExportService.downloadFile(result.blob, result.filename);
       setHasUnsavedChanges(false);
@@ -171,12 +158,11 @@ export const usePageEditorExport = ({
 
     setExportLoading(true);
     try {
-      const processedDocuments =
-        documentManipulationService.applyDOMChangesToDocument(
-          displayDocument,
-          displayDocument,
-          splitPositions
-        );
+      const processedDocuments = documentManipulationService.applyDOMChangesToDocument(
+        displayDocument,
+        displayDocument,
+        splitPositions,
+      );
 
       const normalizedDocuments = normalizeProcessedDocuments(processedDocuments);
 
@@ -191,11 +177,7 @@ export const usePageEditorExport = ({
 
       const sourceFiles = getSourceFiles();
       const exportFilename = getExportFilename();
-      const files = await exportProcessedDocumentsToFiles(
-        normalizedDocuments,
-        sourceFiles,
-        exportFilename
-      );
+      const files = await exportProcessedDocumentsToFiles(normalizedDocuments, sourceFiles, exportFilename);
 
       if (files.length > 1) {
         const JSZip = await import("jszip");
@@ -221,26 +203,18 @@ export const usePageEditorExport = ({
       console.error("Export failed:", error);
       setExportLoading(false);
     }
-  }, [
-    displayDocument,
-    splitPositions,
-    getSourceFiles,
-    getExportFilename,
-    setHasUnsavedChanges,
-    setExportLoading,
-  ]);
+  }, [displayDocument, splitPositions, getSourceFiles, getExportFilename, setHasUnsavedChanges, setExportLoading]);
 
   const applyChanges = useCallback(async () => {
     if (!displayDocument) return;
 
     setExportLoading(true);
     try {
-      const processedDocuments =
-        documentManipulationService.applyDOMChangesToDocument(
-          displayDocument,
-          displayDocument,
-          splitPositions
-        );
+      const processedDocuments = documentManipulationService.applyDOMChangesToDocument(
+        displayDocument,
+        displayDocument,
+        splitPositions,
+      );
 
       const normalizedDocuments = normalizeProcessedDocuments(processedDocuments);
 
@@ -255,14 +229,10 @@ export const usePageEditorExport = ({
 
       const sourceFiles = getSourceFiles();
       const exportFilename = getExportFilename();
-      const files = await exportProcessedDocumentsToFiles(
-        normalizedDocuments,
-        sourceFiles,
-        exportFilename
-      );
+      const files = await exportProcessedDocumentsToFiles(normalizedDocuments, sourceFiles, exportFilename);
 
       // Add "_multitool" suffix to filenames
-      const renamedFiles = files.map(file => {
+      const renamedFiles = files.map((file) => {
         const nameParts = file.name.match(/^(.+?)(\.pdf)$/i);
         if (nameParts) {
           const baseName = nameParts[1];
@@ -300,7 +270,7 @@ export const usePageEditorExport = ({
         if (sourceStub?.localFilePath) {
           actions.updateStirlingFileStub(newStirlingFiles[0].fileId, {
             localFilePath: sourceStub.localFilePath,
-            isDirty: true
+            isDirty: true,
           });
         }
       }
diff --git a/frontend/src/core/components/pageEditor/hooks/usePageEditorState.ts b/frontend/src/core/components/pageEditor/hooks/usePageEditorState.ts
index 570f0d08b1..69b1edeb9c 100644
--- a/frontend/src/core/components/pageEditor/hooks/usePageEditorState.ts
+++ b/frontend/src/core/components/pageEditor/hooks/usePageEditorState.ts
@@ -1,5 +1,5 @@
-import { useState, useCallback } from 'react';
-import React from 'react';
+import { useState, useCallback } from "react";
+import React from "react";
 
 export interface PageEditorState {
   // Selection state
@@ -23,7 +23,7 @@ export interface PageEditorState {
   setIsAnimating: (animating: boolean) => void;
   setSplitPositions: React.Dispatch<React.SetStateAction<Set<string>>>;
   setExportLoading: (loading: boolean) => void;
-  
+
   // Helper functions
   togglePage: (pageId: string) => void;
   toggleSelectAll: (allPageIds: string[]) => void;
@@ -38,40 +38,36 @@ export function usePageEditorState(): PageEditorState {
   // Selection state
   const [selectionMode, setSelectionMode] = useState(false);
   const [selectedPageIds, setSelectedPageIds] = useState<string[]>([]);
-  
+
   // Animation state
   const [movingPage, setMovingPage] = useState<number | null>(null);
   const [isAnimating, setIsAnimating] = useState(false);
-  
+
   // Split state - position-based split tracking (replaces page-based splitAfter)
   const [splitPositions, setSplitPositions] = useState<Set<string>>(new Set());
-  
+
   // Export state
   const [exportLoading, setExportLoading] = useState(false);
-  
+
   // Helper functions
   const togglePage = useCallback((pageId: string) => {
-    setSelectedPageIds(prev => {
-      const newSelection = prev.includes(pageId)
-        ? prev.filter(id => id !== pageId)
-        : [...prev, pageId];
+    setSelectedPageIds((prev) => {
+      const newSelection = prev.includes(pageId) ? prev.filter((id) => id !== pageId) : [...prev, pageId];
       return newSelection;
     });
   }, []); // Empty deps - uses updater function so always has latest state
 
   const toggleSelectAll = useCallback((allPageIds: string[]) => {
     if (!allPageIds.length) return;
-    
-    setSelectedPageIds(prev => 
-      prev.length === allPageIds.length ? [] : allPageIds
-    );
+
+    setSelectedPageIds((prev) => (prev.length === allPageIds.length ? [] : allPageIds));
   }, []);
-  
+
   const animateReorder = useCallback(() => {
     setIsAnimating(true);
     setTimeout(() => setIsAnimating(false), 500);
   }, []);
-  
+
   return {
     // State
     selectionMode,
@@ -80,7 +76,7 @@ export function usePageEditorState(): PageEditorState {
     isAnimating,
     splitPositions,
     exportLoading,
-    
+
     // Setters
     setSelectionMode,
     setSelectedPageIds,
@@ -88,7 +84,7 @@ export function usePageEditorState(): PageEditorState {
     setIsAnimating,
     setSplitPositions,
     setExportLoading,
-    
+
     // Helpers
     togglePage,
     toggleSelectAll,
diff --git a/frontend/src/core/components/pageEditor/hooks/usePageSelectionManager.ts b/frontend/src/core/components/pageEditor/hooks/usePageSelectionManager.ts
index ac63c5efa9..7e5ecab330 100644
--- a/frontend/src/core/components/pageEditor/hooks/usePageSelectionManager.ts
+++ b/frontend/src/core/components/pageEditor/hooks/usePageSelectionManager.ts
@@ -36,7 +36,7 @@ export const usePageSelectionManager = ({
         })
         .filter((num) => num > 0);
     },
-    [displayDocument]
+    [displayDocument],
   );
 
   const getPageIdsFromNumbers = useCallback(
@@ -49,15 +49,11 @@ export const usePageSelectionManager = ({
         })
         .filter((id) => id !== "");
     },
-    [displayDocument]
+    [displayDocument],
   );
 
   useEffect(() => {
-    if (
-      displayDocument &&
-      displayDocument.pages.length > 0 &&
-      !hasInitializedSelection.current
-    ) {
+    if (displayDocument && displayDocument.pages.length > 0 && !hasInitializedSelection.current) {
       const allPageIds = displayDocument.pages.map((page) => page.id);
       setSelectedPageIds(allPageIds);
       setSelectionMode(true);
@@ -107,7 +103,7 @@ export const usePageSelectionManager = ({
       const pageIds = getPageIdsFromNumbers(pageNumbers);
       setSelectedPageIds(pageIds);
     },
-    [getPageIdsFromNumbers, setSelectedPageIds]
+    [getPageIdsFromNumbers, setSelectedPageIds],
   );
 
   const updatePagesFromCSV = useCallback(
@@ -116,7 +112,7 @@ export const usePageSelectionManager = ({
       const normalized = parseSelection(override ?? csvInput, totalPages);
       handleSetSelectedPages(normalized);
     },
-    [csvInput, totalPages, handleSetSelectedPages]
+    [csvInput, totalPages, handleSetSelectedPages],
   );
 
   return {
@@ -132,6 +128,4 @@ export const usePageSelectionManager = ({
   };
 };
 
-export type UsePageSelectionManagerReturn = ReturnType<
-  typeof usePageSelectionManager
->;
+export type UsePageSelectionManagerReturn = ReturnType<typeof usePageSelectionManager>;
diff --git a/frontend/src/core/components/pageEditor/hooks/useUndoManagerState.ts b/frontend/src/core/components/pageEditor/hooks/useUndoManagerState.ts
index 627742b15f..77da056789 100644
--- a/frontend/src/core/components/pageEditor/hooks/useUndoManagerState.ts
+++ b/frontend/src/core/components/pageEditor/hooks/useUndoManagerState.ts
@@ -6,9 +6,7 @@ interface UseUndoManagerStateParams {
   setHasUnsavedChanges: (dirty: boolean) => void;
 }
 
-export const useUndoManagerState = ({
-  setHasUnsavedChanges,
-}: UseUndoManagerStateParams) => {
+export const useUndoManagerState = ({ setHasUnsavedChanges }: UseUndoManagerStateParams) => {
   const undoManagerRef = useRef(new UndoManager());
   const [canUndo, setCanUndo] = useState(false);
   const [canRedo, setCanRedo] = useState(false);
@@ -33,7 +31,7 @@ export const useUndoManagerState = ({
       undoManagerRef.current.executeCommand(command);
       setHasUnsavedChanges(true);
     },
-    [setHasUnsavedChanges]
+    [setHasUnsavedChanges],
   );
 
   const handleUndo = useCallback(() => {
diff --git a/frontend/src/core/components/pageEditor/pageEditorRightRailButtons.tsx b/frontend/src/core/components/pageEditor/pageEditorRightRailButtons.tsx
index 3036982ac9..f3cd59a138 100644
--- a/frontend/src/core/components/pageEditor/pageEditorRightRailButtons.tsx
+++ b/frontend/src/core/components/pageEditor/pageEditorRightRailButtons.tsx
@@ -1,8 +1,8 @@
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useRightRailButtons, RightRailButtonWithAction } from '@app/hooks/useRightRailButtons';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import PageSelectByNumberButton from '@app/components/pageEditor/PageSelectByNumberButton';
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { useRightRailButtons, RightRailButtonWithAction } from "@app/hooks/useRightRailButtons";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import PageSelectByNumberButton from "@app/components/pageEditor/PageSelectByNumberButton";
 
 interface PageEditorRightRailButtonsParams {
   totalPages: number;
@@ -44,43 +44,43 @@ export function usePageEditorRightRailButtons(params: PageEditorRightRailButtons
   const { t, i18n } = useTranslation();
 
   // Lift i18n labels out of memo for clarity
-  const selectAllLabel = t('rightRail.selectAll', 'Select All');
-  const deselectAllLabel = t('rightRail.deselectAll', 'Deselect All');
-  const selectByNumberLabel = t('rightRail.selectByNumber', 'Select by Page Numbers');
-  const deleteSelectedLabel = t('rightRail.deleteSelected', 'Delete Selected Pages');
-  const exportSelectedLabel = t('rightRail.exportSelected', 'Export Selected Pages');
-  const saveChangesLabel = t('rightRail.saveChanges', 'Save Changes');
-  const closePdfLabel = t('rightRail.closePdf', 'Close PDF');
+  const selectAllLabel = t("rightRail.selectAll", "Select All");
+  const deselectAllLabel = t("rightRail.deselectAll", "Deselect All");
+  const selectByNumberLabel = t("rightRail.selectByNumber", "Select by Page Numbers");
+  const deleteSelectedLabel = t("rightRail.deleteSelected", "Delete Selected Pages");
+  const exportSelectedLabel = t("rightRail.exportSelected", "Export Selected Pages");
+  const saveChangesLabel = t("rightRail.saveChanges", "Save Changes");
+  const closePdfLabel = t("rightRail.closePdf", "Close PDF");
 
   const buttons = useMemo<RightRailButtonWithAction[]>(() => {
     return [
       {
-        id: 'page-select-all',
+        id: "page-select-all",
         icon: <LocalIcon icon="select-all" width="1.5rem" height="1.5rem" />,
         tooltip: selectAllLabel,
         ariaLabel: selectAllLabel,
-        section: 'top' as const,
+        section: "top" as const,
         order: 10,
         disabled: totalPages === 0 || selectedPageCount === totalPages,
         visible: totalPages > 0,
         onClick: handleSelectAll,
       },
       {
-        id: 'page-deselect-all',
+        id: "page-deselect-all",
         icon: <LocalIcon icon="crop-square-outline" width="1.5rem" height="1.5rem" />,
         tooltip: deselectAllLabel,
         ariaLabel: deselectAllLabel,
-        section: 'top' as const,
+        section: "top" as const,
         order: 20,
         disabled: selectedPageCount === 0,
         visible: totalPages > 0,
         onClick: handleDeselectAll,
       },
       {
-        id: 'page-select-by-number',
+        id: "page-select-by-number",
         tooltip: selectByNumberLabel,
         ariaLabel: selectByNumberLabel,
-        section: 'top' as const,
+        section: "top" as const,
         order: 30,
         disabled: totalPages === 0,
         visible: totalPages > 0,
@@ -98,44 +98,44 @@ export function usePageEditorRightRailButtons(params: PageEditorRightRailButtons
         ),
       },
       {
-        id: 'page-delete-selected',
+        id: "page-delete-selected",
         icon: <LocalIcon icon="delete-outline-rounded" width="1.5rem" height="1.5rem" />,
         tooltip: deleteSelectedLabel,
         ariaLabel: deleteSelectedLabel,
-        section: 'top' as const,
+        section: "top" as const,
         order: 40,
         disabled: selectedPageCount === 0,
         visible: totalPages > 0,
         onClick: handleDelete,
       },
       {
-        id: 'page-export-selected',
+        id: "page-export-selected",
         icon: <LocalIcon icon="download" width="1.5rem" height="1.5rem" />,
         tooltip: exportSelectedLabel,
         ariaLabel: exportSelectedLabel,
-        section: 'top' as const,
+        section: "top" as const,
         order: 50,
         disabled: selectedPageCount === 0 || exportLoading,
         visible: totalPages > 0,
         onClick: onExportSelected,
       },
       {
-        id: 'page-save-changes',
+        id: "page-save-changes",
         icon: <LocalIcon icon="save" width="1.5rem" height="1.5rem" />,
         tooltip: saveChangesLabel,
         ariaLabel: saveChangesLabel,
-        section: 'top' as const,
+        section: "top" as const,
         order: 55,
         disabled: totalPages === 0 || exportLoading,
         visible: totalPages > 0,
         onClick: onSaveChanges,
       },
       {
-        id: 'page-close-pdf',
+        id: "page-close-pdf",
         icon: <LocalIcon icon="close-rounded" width="1.5rem" height="1.5rem" />,
         tooltip: closePdfLabel,
         ariaLabel: closePdfLabel,
-        section: 'top' as const,
+        section: "top" as const,
         order: 60,
         disabled: activeFileCount === 0,
         visible: activeFileCount > 0,
diff --git a/frontend/src/core/components/pageEditor/utils/splitPositions.ts b/frontend/src/core/components/pageEditor/utils/splitPositions.ts
index 32630a1107..afb9d2847d 100644
--- a/frontend/src/core/components/pageEditor/utils/splitPositions.ts
+++ b/frontend/src/core/components/pageEditor/utils/splitPositions.ts
@@ -1,4 +1,4 @@
-import { PDFDocument } from '@app/types/pageEditor';
+import { PDFDocument } from "@app/types/pageEditor";
 
 /**
  * Build a map from page ID to its index in the provided document.
diff --git a/frontend/src/core/components/shared/AllToolsNavButton.tsx b/frontend/src/core/components/shared/AllToolsNavButton.tsx
index 3ba3bb70b4..b6879f8395 100644
--- a/frontend/src/core/components/shared/AllToolsNavButton.tsx
+++ b/frontend/src/core/components/shared/AllToolsNavButton.tsx
@@ -1,21 +1,18 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import AppsIcon from '@mui/icons-material/AppsRounded';
-import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
-import { useNavigationState, useNavigationActions } from '@app/contexts/NavigationContext';
-import { useSidebarNavigation } from '@app/hooks/useSidebarNavigation';
-import { handleUnlessSpecialClick } from '@app/utils/clickHandlers';
-import QuickAccessButton from '@app/components/shared/quickAccessBar/QuickAccessButton';
+import React from "react";
+import { useTranslation } from "react-i18next";
+import AppsIcon from "@mui/icons-material/AppsRounded";
+import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
+import { useNavigationState, useNavigationActions } from "@app/contexts/NavigationContext";
+import { useSidebarNavigation } from "@app/hooks/useSidebarNavigation";
+import { handleUnlessSpecialClick } from "@app/utils/clickHandlers";
+import QuickAccessButton from "@app/components/shared/quickAccessBar/QuickAccessButton";
 
 interface AllToolsNavButtonProps {
   activeButton: string;
   setActiveButton: (id: string) => void;
 }
 
-const AllToolsNavButton: React.FC<AllToolsNavButtonProps> = ({
-  activeButton,
-  setActiveButton,
-}) => {
+const AllToolsNavButton: React.FC<AllToolsNavButtonProps> = ({ activeButton, setActiveButton }) => {
   const { t } = useTranslation();
   const { handleReaderToggle, handleBackToTools, selectedToolKey, leftPanelView } = useToolWorkflow();
   const { hasUnsavedChanges } = useNavigationState();
@@ -23,7 +20,7 @@ const AllToolsNavButton: React.FC<AllToolsNavButtonProps> = ({
   const { getHomeNavigation } = useSidebarNavigation();
 
   const performNavigation = () => {
-    setActiveButton('tools');
+    setActiveButton("tools");
     // Preserve existing behavior used in QuickAccessBar header
     handleReaderToggle();
     handleBackToTools();
@@ -38,7 +35,7 @@ const AllToolsNavButton: React.FC<AllToolsNavButtonProps> = ({
   };
 
   // Do not highlight All Tools when a specific tool is open (indicator is shown)
-  const isActive = activeButton === 'tools' && !selectedToolKey && leftPanelView === 'toolPicker';
+  const isActive = activeButton === "tools" && !selectedToolKey && leftPanelView === "toolPicker";
 
   const navProps = getHomeNavigation();
 
@@ -54,7 +51,7 @@ const AllToolsNavButton: React.FC<AllToolsNavButtonProps> = ({
   return (
     <div className="mt-4 mb-2">
       <QuickAccessButton
-        icon={<AppsIcon sx={{ fontSize: isActive ? '1.875rem' : '1.5rem' }} />}
+        icon={<AppsIcon sx={{ fontSize: isActive ? "1.875rem" : "1.5rem" }} />}
         label={t("quickAccess.allTools", "Tools")}
         isActive={isActive}
         onClick={handleNavClick}
@@ -68,4 +65,3 @@ const AllToolsNavButton: React.FC<AllToolsNavButtonProps> = ({
 };
 
 export default AllToolsNavButton;
-
diff --git a/frontend/src/core/components/shared/AppConfigLoader.tsx b/frontend/src/core/components/shared/AppConfigLoader.tsx
index 7da104a6f6..1a433cb8ce 100644
--- a/frontend/src/core/components/shared/AppConfigLoader.tsx
+++ b/frontend/src/core/components/shared/AppConfigLoader.tsx
@@ -1,6 +1,6 @@
-import { useEffect } from 'react';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
-import { updateSupportedLanguages } from '@app/i18n';
+import { useEffect } from "react";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
+import { updateSupportedLanguages } from "@app/i18n";
 
 /**
  * Component that loads app configuration and applies it to the application.
diff --git a/frontend/src/core/components/shared/AppConfigModal.css b/frontend/src/core/components/shared/AppConfigModal.css
index 67deb733c4..07cc84ae64 100644
--- a/frontend/src/core/components/shared/AppConfigModal.css
+++ b/frontend/src/core/components/shared/AppConfigModal.css
@@ -220,7 +220,7 @@
     margin: 0 -1rem;
     margin-bottom: -1rem;
   }
-  
+
   .settings-section-content {
     padding-bottom: 4rem;
   }
diff --git a/frontend/src/core/components/shared/AppConfigModal.tsx b/frontend/src/core/components/shared/AppConfigModal.tsx
index 694ec5c737..20337ab709 100644
--- a/frontend/src/core/components/shared/AppConfigModal.tsx
+++ b/frontend/src/core/components/shared/AppConfigModal.tsx
@@ -1,16 +1,16 @@
-import React, { useMemo, useState, useEffect, useCallback, useRef } from 'react';
-import { Badge, Modal, Text, ActionIcon, Tooltip, Group } from '@mantine/core';
-import { useNavigate, useLocation } from 'react-router-dom';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { useConfigNavSections } from '@app/components/shared/config/configNavSections';
-import { NavKey, VALID_NAV_KEYS } from '@app/components/shared/config/types';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
-import '@app/components/shared/AppConfigModal.css';
-import { useIsMobile } from '@app/hooks/useIsMobile';
-import { Z_INDEX_CONFIG_MODAL, Z_INDEX_OVER_CONFIG_MODAL } from '@app/styles/zIndex';
-import { useLicenseAlert } from '@app/hooks/useLicenseAlert';
-import { UnsavedChangesProvider, useUnsavedChanges } from '@app/contexts/UnsavedChangesContext';
-import { SettingsSearchBar } from '@app/components/shared/config/SettingsSearchBar';
+import React, { useMemo, useState, useEffect, useCallback, useRef } from "react";
+import { Badge, Modal, Text, ActionIcon, Tooltip, Group } from "@mantine/core";
+import { useNavigate, useLocation } from "react-router-dom";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { useConfigNavSections } from "@app/components/shared/config/configNavSections";
+import { NavKey, VALID_NAV_KEYS } from "@app/components/shared/config/types";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
+import "@app/components/shared/AppConfigModal.css";
+import { useIsMobile } from "@app/hooks/useIsMobile";
+import { Z_INDEX_CONFIG_MODAL, Z_INDEX_OVER_CONFIG_MODAL } from "@app/styles/zIndex";
+import { useLicenseAlert } from "@app/hooks/useLicenseAlert";
+import { UnsavedChangesProvider, useUnsavedChanges } from "@app/contexts/UnsavedChangesContext";
+import { SettingsSearchBar } from "@app/components/shared/config/SettingsSearchBar";
 
 interface AppConfigModalProps {
   opened: boolean;
@@ -18,7 +18,7 @@ interface AppConfigModalProps {
 }
 
 const AppConfigModalInner: React.FC<AppConfigModalProps> = ({ opened, onClose }) => {
-  const [active, setActive] = useState<NavKey>('general');
+  const [active, setActive] = useState<NavKey>("general");
   const isMobile = useIsMobile();
   const navigate = useNavigate();
   const location = useLocation();
@@ -42,9 +42,9 @@ const AppConfigModalInner: React.FC<AppConfigModalProps> = ({ opened, onClose })
     const section = getSectionFromPath(location.pathname);
     if (opened && section) {
       setActive(section);
-    } else if (opened && location.pathname.startsWith('/settings') && !section) {
+    } else if (opened && location.pathname.startsWith("/settings") && !section) {
       // If at /settings without a section, redirect to general
-      navigate('/settings/general', { replace: true });
+      navigate("/settings/general", { replace: true });
     }
   }, [location.pathname, opened, navigate]);
 
@@ -63,19 +63,22 @@ const AppConfigModalInner: React.FC<AppConfigModalProps> = ({ opened, onClose })
         navigate(`/settings/${detail.key}`);
       }
     };
-    window.addEventListener('appConfig:navigate', handler as EventListener);
-    return () => window.removeEventListener('appConfig:navigate', handler as EventListener);
+    window.addEventListener("appConfig:navigate", handler as EventListener);
+    return () => window.removeEventListener("appConfig:navigate", handler as EventListener);
   }, [navigate]);
 
-  const colors = useMemo(() => ({
-    navBg: 'var(--modal-nav-bg)',
-    sectionTitle: 'var(--modal-nav-section-title)',
-    navItem: 'var(--modal-nav-item)',
-    navItemActive: 'var(--modal-nav-item-active)',
-    navItemActiveBg: 'var(--modal-nav-item-active-bg)',
-    contentBg: 'var(--modal-content-bg)',
-    headerBorder: 'var(--modal-header-border)',
-  }), []);
+  const colors = useMemo(
+    () => ({
+      navBg: "var(--modal-nav-bg)",
+      sectionTitle: "var(--modal-nav-section-title)",
+      navItem: "var(--modal-nav-item)",
+      navItemActive: "var(--modal-nav-item-active)",
+      navItemActiveBg: "var(--modal-nav-item-active-bg)",
+      contentBg: "var(--modal-content-bg)",
+      headerBorder: "var(--modal-header-border)",
+    }),
+    [],
+  );
 
   // Get isAdmin and runningEE from app config
   const isAdmin = config?.isAdmin ?? false;
@@ -83,23 +86,19 @@ const AppConfigModalInner: React.FC<AppConfigModalProps> = ({ opened, onClose })
   const loginEnabled = config?.enableLogin ?? false;
 
   // Left navigation structure and icons
-  const configNavSections = useConfigNavSections(
-    isAdmin,
-    runningEE,
-    loginEnabled
-  );
+  const configNavSections = useConfigNavSections(isAdmin, runningEE, loginEnabled);
 
   const activeLabel = useMemo(() => {
     for (const section of configNavSections) {
-      const found = section.items.find(i => i.key === active);
+      const found = section.items.find((i) => i.key === active);
       if (found) return found.label;
     }
-    return '';
+    return "";
   }, [configNavSections, active]);
 
   const activeComponent = useMemo(() => {
     for (const section of configNavSections) {
-      const found = section.items.find(i => i.key === active);
+      const found = section.items.find((i) => i.key === active);
       if (found) return found.component;
     }
     return null;
@@ -108,19 +107,22 @@ const AppConfigModalInner: React.FC<AppConfigModalProps> = ({ opened, onClose })
   const handleClose = useCallback(async () => {
     const canProceed = await confirmIfDirty();
     if (!canProceed) return;
-    
+
     // Navigate back to home when closing modal
-    navigate('/', { replace: true });
+    navigate("/", { replace: true });
     onClose();
   }, [confirmIfDirty, navigate, onClose]);
 
-  const handleNavigation = useCallback(async (key: NavKey) => {
-    const canProceed = await confirmIfDirty();
-    if (!canProceed) return;
+  const handleNavigation = useCallback(
+    async (key: NavKey) => {
+      const canProceed = await confirmIfDirty();
+      if (!canProceed) return;
 
-    setActive(key);
-    navigate(`/settings/${key}`);
-  }, [confirmIfDirty, navigate]);
+      setActive(key);
+      navigate(`/settings/${key}`);
+    },
+    [confirmIfDirty, navigate],
+  );
 
   return (
     <Modal
@@ -139,30 +141,28 @@ const AppConfigModalInner: React.FC<AppConfigModalProps> = ({ opened, onClose })
       <div className="modal-container">
         {/* Left navigation */}
         <div
-          className={`modal-nav ${isMobile ? 'mobile' : ''}`}
+          className={`modal-nav ${isMobile ? "mobile" : ""}`}
           style={{
             background: colors.navBg,
             borderRight: `1px solid ${colors.headerBorder}`,
           }}
         >
           <div className="modal-nav-scroll">
-            {configNavSections.map(section => (
+            {configNavSections.map((section) => (
               <div key={section.title} className="modal-nav-section">
                 {!isMobile && (
-                  <Text size="xs" fw={600} c={colors.sectionTitle} style={{ textTransform: 'uppercase', letterSpacing: 0.4 }}>
+                  <Text size="xs" fw={600} c={colors.sectionTitle} style={{ textTransform: "uppercase", letterSpacing: 0.4 }}>
                     {section.title}
                   </Text>
                 )}
                 <div className="modal-nav-section-items">
-                  {section.items.map(item => {
+                  {section.items.map((item) => {
                     const isActive = active === item.key;
                     const isDisabled = item.disabled ?? false;
                     const color = isActive ? colors.navItemActive : colors.navItem;
                     const iconSize = isMobile ? 28 : 18;
                     const showPlanWarning =
-                      item.key === 'adminPlan' &&
-                      licenseAlert.active &&
-                      licenseAlert.audience === 'admin';
+                      item.key === "adminPlan" && licenseAlert.active && licenseAlert.audience === "admin";
 
                     const navItemContent = (
                       <div
@@ -172,11 +172,11 @@ const AppConfigModalInner: React.FC<AppConfigModalProps> = ({ opened, onClose })
                             handleNavigation(item.key);
                           }
                         }}
-                        className={`modal-nav-item ${isMobile ? 'mobile' : ''}`}
+                        className={`modal-nav-item ${isMobile ? "mobile" : ""}`}
                         style={{
-                          background: isActive ? colors.navItemActiveBg : 'transparent',
+                          background: isActive ? colors.navItemActiveBg : "transparent",
                           opacity: isDisabled ? 0.6 : 1,
-                          cursor: isDisabled ? 'not-allowed' : 'pointer',
+                          cursor: isDisabled ? "not-allowed" : "pointer",
                         }}
                         data-tour={`admin-${item.key}-nav`}
                       >
@@ -187,7 +187,7 @@ const AppConfigModalInner: React.FC<AppConfigModalProps> = ({ opened, onClose })
                               {item.label}
                             </Text>
                             {item.badge && (
-                              <Badge size="xs" variant="light" color={item.badgeColor ?? 'orange'} style={{ flexShrink: 0 }}>
+                              <Badge size="xs" variant="light" color={item.badgeColor ?? "orange"} style={{ flexShrink: 0 }}>
                                 {item.badge}
                               </Badge>
                             )}
@@ -196,7 +196,7 @@ const AppConfigModalInner: React.FC<AppConfigModalProps> = ({ opened, onClose })
                                 icon="warning-rounded"
                                 width={14}
                                 height={14}
-                                style={{ color: 'var(--mantine-color-orange-7)' }}
+                                style={{ color: "var(--mantine-color-orange-7)" }}
                               />
                             )}
                           </Group>
@@ -235,27 +235,17 @@ const AppConfigModalInner: React.FC<AppConfigModalProps> = ({ opened, onClose })
                 borderBottom: `1px solid ${colors.headerBorder}`,
               }}
             >
-              <Text fw={700} size="lg">{activeLabel}</Text>
+              <Text fw={700} size="lg">
+                {activeLabel}
+              </Text>
               <Group gap="xs" wrap="nowrap">
-                <SettingsSearchBar
-                  configNavSections={configNavSections}
-                  onNavigate={handleNavigation}
-                  isMobile={isMobile}
-                />
-                <ActionIcon
-                  ref={closeButtonRef}
-                  variant="subtle"
-                  onClick={handleClose}
-                  aria-label="Close"
-                  data-autofocus
-                >
+                <SettingsSearchBar configNavSections={configNavSections} onNavigate={handleNavigation} isMobile={isMobile} />
+                <ActionIcon ref={closeButtonRef} variant="subtle" onClick={handleClose} aria-label="Close" data-autofocus>
                   <LocalIcon icon="close-rounded" width={18} height={18} />
                 </ActionIcon>
               </Group>
             </div>
-            <div className="modal-body">
-              {activeComponent}
-            </div>
+            <div className="modal-body">{activeComponent}</div>
           </div>
         </div>
       </div>
diff --git a/frontend/src/core/components/shared/Badge.tsx b/frontend/src/core/components/shared/Badge.tsx
index 7bf3283e4f..dd15bec465 100644
--- a/frontend/src/core/components/shared/Badge.tsx
+++ b/frontend/src/core/components/shared/Badge.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
-import { Box } from '@mantine/core';
+import React from "react";
+import { Box } from "@mantine/core";
 
 interface BadgeProps {
   children: React.ReactNode;
-  size?: 'sm' | 'md' | 'lg';
-  variant?: 'default' | 'colored';
+  size?: "sm" | "md" | "lg";
+  variant?: "default" | "colored";
   color?: string;
   textColor?: string;
   backgroundColor?: string;
@@ -12,38 +12,38 @@ interface BadgeProps {
   style?: React.CSSProperties;
 }
 
-const Badge: React.FC<BadgeProps> = ({ 
-  children, 
-  size = 'sm', 
-  variant = 'default',
+const Badge: React.FC<BadgeProps> = ({
+  children,
+  size = "sm",
+  variant = "default",
   color,
   textColor,
   backgroundColor,
   className,
-  style 
+  style,
 }) => {
   const getSizeStyles = () => {
     switch (size) {
-      case 'sm':
+      case "sm":
         return {
-          padding: '0.125rem 0.5rem',
-          fontSize: '0.75rem',
+          padding: "0.125rem 0.5rem",
+          fontSize: "0.75rem",
           fontWeight: 700,
-          borderRadius: '0.5rem',
+          borderRadius: "0.5rem",
         };
-      case 'md':
+      case "md":
         return {
-          padding: '0.25rem 0.75rem',
-          fontSize: '0.875rem',
+          padding: "0.25rem 0.75rem",
+          fontSize: "0.875rem",
           fontWeight: 700,
-          borderRadius: '0.625rem',
+          borderRadius: "0.625rem",
         };
-      case 'lg':
+      case "lg":
         return {
-          padding: '0.375rem 1rem',
-          fontSize: '1rem',
+          padding: "0.375rem 1rem",
+          fontSize: "1rem",
           fontWeight: 700,
-          borderRadius: '0.75rem',
+          borderRadius: "0.75rem",
         };
       default:
         return {};
@@ -58,7 +58,7 @@ const Badge: React.FC<BadgeProps> = ({
         color: textColor,
       };
     }
-    
+
     // If a single color is provided, use it for text and 20% opacity for background
     if (color) {
       return {
@@ -66,21 +66,21 @@ const Badge: React.FC<BadgeProps> = ({
         color: color,
       };
     }
-    
+
     // If variant is colored but no color provided, use default colored styling
-    if (variant === 'colored') {
+    if (variant === "colored") {
       return {
         backgroundColor: `color-mix(in srgb, var(--category-color-default) 15%, transparent)`,
-        color: 'var(--category-color-default)',
+        color: "var(--category-color-default)",
         borderColor: `color-mix(in srgb, var(--category-color-default) 30%, transparent)`,
-        border: '1px solid',
+        border: "1px solid",
       };
     }
-    
+
     // Default styling
     return {
-      background: 'var(--tool-header-badge-bg)',
-      color: 'var(--tool-header-badge-text)',
+      background: "var(--tool-header-badge-bg)",
+      color: "var(--tool-header-badge-text)",
     };
   };
 
diff --git a/frontend/src/core/components/shared/BulkShareModal.tsx b/frontend/src/core/components/shared/BulkShareModal.tsx
index b2d79d87c2..346dddb8df 100644
--- a/frontend/src/core/components/shared/BulkShareModal.tsx
+++ b/frontend/src/core/components/shared/BulkShareModal.tsx
@@ -1,19 +1,19 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Modal, Stack, Text, Button, Group, Alert, TextInput, Paper, Select } from '@mantine/core';
-import LinkIcon from '@mui/icons-material/Link';
-import ContentCopyRoundedIcon from '@mui/icons-material/ContentCopyRounded';
-import { useTranslation } from 'react-i18next';
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { Modal, Stack, Text, Button, Group, Alert, TextInput, Paper, Select } from "@mantine/core";
+import LinkIcon from "@mui/icons-material/Link";
+import ContentCopyRoundedIcon from "@mui/icons-material/ContentCopyRounded";
+import { useTranslation } from "react-i18next";
 
-import apiClient from '@app/services/apiClient';
-import { absoluteWithBasePath } from '@app/constants/app';
-import { alert } from '@app/components/toast';
-import { Z_INDEX_OVER_FILE_MANAGER_MODAL } from '@app/styles/zIndex';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
-import type { StirlingFileStub } from '@app/types/fileContext';
-import { uploadHistoryChains } from '@app/services/serverStorageUpload';
-import { fileStorage } from '@app/services/fileStorage';
-import { useFileActions } from '@app/contexts/FileContext';
-import type { FileId } from '@app/types/file';
+import apiClient from "@app/services/apiClient";
+import { absoluteWithBasePath } from "@app/constants/app";
+import { alert } from "@app/components/toast";
+import { Z_INDEX_OVER_FILE_MANAGER_MODAL } from "@app/styles/zIndex";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
+import type { StirlingFileStub } from "@app/types/fileContext";
+import { uploadHistoryChains } from "@app/services/serverStorageUpload";
+import { fileStorage } from "@app/services/fileStorage";
+import { useFileActions } from "@app/contexts/FileContext";
+import type { FileId } from "@app/types/file";
 
 interface BulkShareModalProps {
   opened: boolean;
@@ -22,12 +22,7 @@ interface BulkShareModalProps {
   onShared?: () => Promise<void> | void;
 }
 
-const BulkShareModal: React.FC<BulkShareModalProps> = ({
-  opened,
-  onClose,
-  files,
-  onShared,
-}) => {
+const BulkShareModal: React.FC<BulkShareModalProps> = ({ opened, onClose, files, onShared }) => {
   const { t } = useTranslation();
   const { config } = useAppConfig();
   const { actions } = useFileActions();
@@ -35,7 +30,7 @@ const BulkShareModal: React.FC<BulkShareModalProps> = ({
   const [isWorking, setIsWorking] = useState(false);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [shareToken, setShareToken] = useState<string | null>(null);
-  const [shareRole, setShareRole] = useState<'editor' | 'commenter' | 'viewer'>('editor');
+  const [shareRole, setShareRole] = useState<"editor" | "commenter" | "viewer">("editor");
 
   useEffect(() => {
     if (!opened) {
@@ -47,34 +42,35 @@ const BulkShareModal: React.FC<BulkShareModalProps> = ({
 
   useEffect(() => {
     if (opened) {
-      setShareRole('editor');
+      setShareRole("editor");
     }
   }, [opened]);
 
   const shareUrl = useMemo(() => {
-    if (!shareToken) return '';
-    const frontendUrl = (config?.frontendUrl || '').trim();
+    if (!shareToken) return "";
+    const frontendUrl = (config?.frontendUrl || "").trim();
     if (frontendUrl) {
-      const normalized = frontendUrl.endsWith('/')
-        ? frontendUrl.slice(0, -1)
-        : frontendUrl;
+      const normalized = frontendUrl.endsWith("/") ? frontendUrl.slice(0, -1) : frontendUrl;
       return `${normalized}/share/${shareToken}`;
     }
     return absoluteWithBasePath(`/share/${shareToken}`);
   }, [config?.frontendUrl, shareToken]);
 
-  const createShareLink = useCallback(async (storedFileId: number) => {
-    const response = await apiClient.post(`/api/v1/storage/files/${storedFileId}/shares/links`, {
-      accessRole: shareRole,
-    });
-    return response.data as { token?: string };
-  }, [shareRole]);
+  const createShareLink = useCallback(
+    async (storedFileId: number) => {
+      const response = await apiClient.post(`/api/v1/storage/files/${storedFileId}/shares/links`, {
+        accessRole: shareRole,
+      });
+      return response.data as { token?: string };
+    },
+    [shareRole],
+  );
 
   const handleGenerateLink = useCallback(async () => {
     if (!shareLinksEnabled) {
       alert({
-        alertType: 'warning',
-        title: t('storageShare.linksDisabled', 'Share links are disabled.'),
+        alertType: "warning",
+        title: t("storageShare.linksDisabled", "Share links are disabled."),
         expandable: false,
         durationMs: 2500,
       });
@@ -85,19 +81,11 @@ const BulkShareModal: React.FC<BulkShareModalProps> = ({
     setShareToken(null);
 
     try {
-      const rootIds = Array.from(
-        new Set(files.map((file) => (file.originalFileId || file.id) as FileId))
-      );
-      const remoteIds = Array.from(
-        new Set(files.map((file) => file.remoteStorageId).filter(Boolean) as number[])
-      );
-      const existingRemoteId =
-        rootIds.length === 1 && remoteIds.length === 1 ? remoteIds[0] : undefined;
+      const rootIds = Array.from(new Set(files.map((file) => (file.originalFileId || file.id) as FileId)));
+      const remoteIds = Array.from(new Set(files.map((file) => file.remoteStorageId).filter(Boolean) as number[]));
+      const existingRemoteId = rootIds.length === 1 && remoteIds.length === 1 ? remoteIds[0] : undefined;
 
-      const { remoteId: storedId, updatedAt, chain } = await uploadHistoryChains(
-        rootIds,
-        existingRemoteId
-      );
+      const { remoteId: storedId, updatedAt, chain } = await uploadHistoryChains(rootIds, existingRemoteId);
 
       const shareResponse = await createShareLink(storedId);
       setShareToken(shareResponse.token ?? null);
@@ -120,8 +108,8 @@ const BulkShareModal: React.FC<BulkShareModalProps> = ({
       }
 
       alert({
-        alertType: 'success',
-        title: t('storageShare.generated', 'Share link generated'),
+        alertType: "success",
+        title: t("storageShare.generated", "Share link generated"),
         expandable: false,
         durationMs: 3000,
       });
@@ -129,10 +117,8 @@ const BulkShareModal: React.FC<BulkShareModalProps> = ({
         await onShared();
       }
     } catch (error: any) {
-      console.error('Failed to generate share link:', error);
-      setErrorMessage(
-        t('storageShare.failure', 'Unable to generate a share link. Please try again.')
-      );
+      console.error("Failed to generate share link:", error);
+      setErrorMessage(t("storageShare.failure", "Unable to generate a share link. Please try again."));
     } finally {
       setIsWorking(false);
     }
@@ -143,16 +129,16 @@ const BulkShareModal: React.FC<BulkShareModalProps> = ({
     try {
       await navigator.clipboard.writeText(shareUrl);
       alert({
-        alertType: 'success',
-        title: t('storageShare.copied', 'Link copied to clipboard'),
+        alertType: "success",
+        title: t("storageShare.copied", "Link copied to clipboard"),
         expandable: false,
         durationMs: 2000,
       });
     } catch (error) {
-      console.error('Failed to copy share link:', error);
+      console.error("Failed to copy share link:", error);
       alert({
-        alertType: 'warning',
-        title: t('storageShare.copyFailed', 'Copy failed'),
+        alertType: "warning",
+        title: t("storageShare.copyFailed", "Copy failed"),
         expandable: false,
         durationMs: 2500,
       });
@@ -164,7 +150,7 @@ const BulkShareModal: React.FC<BulkShareModalProps> = ({
       opened={opened}
       onClose={onClose}
       centered
-      title={t('storageShare.bulkTitle', 'Share selected files')}
+      title={t("storageShare.bulkTitle", "Share selected files")}
       zIndex={Z_INDEX_OVER_FILE_MANAGER_MODAL}
       size="lg"
       overlayProps={{ blur: 6 }}
@@ -172,14 +158,11 @@ const BulkShareModal: React.FC<BulkShareModalProps> = ({
       <Stack gap="md">
         <Paper withBorder radius="md" p="md">
           <Stack gap={4}>
-              <Text size="sm">
-                {t(
-                  'storageShare.bulkDescription',
-                  'Create one link to share all selected files with signed-in users.'
-                )}
-              </Text>
+            <Text size="sm">
+              {t("storageShare.bulkDescription", "Create one link to share all selected files with signed-in users.")}
+            </Text>
             <Text size="sm" c="dimmed">
-              {t('storageShare.fileCount', '{{count}} files selected', {
+              {t("storageShare.fileCount", "{{count}} files selected", {
                 count: files.length,
               })}
             </Text>
@@ -187,13 +170,13 @@ const BulkShareModal: React.FC<BulkShareModalProps> = ({
         </Paper>
 
         {errorMessage && (
-          <Alert color="red" title={t('storageShare.errorTitle', 'Share failed')}>
+          <Alert color="red" title={t("storageShare.errorTitle", "Share failed")}>
             {errorMessage}
           </Alert>
         )}
         {!shareLinksEnabled && (
-          <Alert color="yellow" title={t('storageShare.linksDisabled', 'Share links are disabled.')}>
-            {t('storageShare.linksDisabledBody', 'Share links are disabled by your server settings.')}
+          <Alert color="yellow" title={t("storageShare.linksDisabled", "Share links are disabled.")}>
+            {t("storageShare.linksDisabledBody", "Share links are disabled by your server settings.")}
           </Alert>
         )}
 
@@ -203,7 +186,7 @@ const BulkShareModal: React.FC<BulkShareModalProps> = ({
               <TextInput
                 readOnly
                 value={shareUrl}
-                label={t('storageShare.linkLabel', 'Share link')}
+                label={t("storageShare.linkLabel", "Share link")}
                 rightSection={
                   <Button
                     variant="subtle"
@@ -211,7 +194,7 @@ const BulkShareModal: React.FC<BulkShareModalProps> = ({
                     leftSection={<ContentCopyRoundedIcon style={{ fontSize: 16 }} />}
                     onClick={handleCopyLink}
                   >
-                    {t('storageShare.copy', 'Copy')}
+                    {t("storageShare.copy", "Copy")}
                   </Button>
                 }
               />
@@ -222,22 +205,22 @@ const BulkShareModal: React.FC<BulkShareModalProps> = ({
         <Paper withBorder radius="md" p="md">
           <Stack gap="xs">
             <Text size="sm" fw={500}>
-              {t('storageShare.linkAccessTitle', 'Share link access')}
+              {t("storageShare.linkAccessTitle", "Share link access")}
             </Text>
             <Select
-              label={t('storageShare.roleLabel', 'Role')}
+              label={t("storageShare.roleLabel", "Role")}
               value={shareRole}
-              onChange={(value) => setShareRole((value as typeof shareRole) || 'editor')}
+              onChange={(value) => setShareRole((value as typeof shareRole) || "editor")}
               comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_FILE_MANAGER_MODAL + 10 }}
               data={[
-                { value: 'editor', label: t('storageShare.roleEditor', 'Editor') },
-                { value: 'commenter', label: t('storageShare.roleCommenter', 'Commenter') },
-                { value: 'viewer', label: t('storageShare.roleViewer', 'Viewer') },
+                { value: "editor", label: t("storageShare.roleEditor", "Editor") },
+                { value: "commenter", label: t("storageShare.roleCommenter", "Commenter") },
+                { value: "viewer", label: t("storageShare.roleViewer", "Viewer") },
               ]}
             />
-            {shareRole === 'commenter' && (
+            {shareRole === "commenter" && (
               <Text size="xs" c="dimmed">
-                {t('storageShare.commenterHint', 'Commenting is coming soon.')}
+                {t("storageShare.commenterHint", "Commenting is coming soon.")}
               </Text>
             )}
           </Stack>
@@ -245,7 +228,7 @@ const BulkShareModal: React.FC<BulkShareModalProps> = ({
 
         <Group justify="flex-end" gap="sm">
           <Button variant="default" onClick={onClose} disabled={isWorking}>
-            {t('cancel', 'Cancel')}
+            {t("cancel", "Cancel")}
           </Button>
           <Button
             leftSection={<LinkIcon style={{ fontSize: 18 }} />}
@@ -253,7 +236,7 @@ const BulkShareModal: React.FC<BulkShareModalProps> = ({
             loading={isWorking}
             disabled={!shareLinksEnabled}
           >
-            {t('storageShare.generate', 'Generate Link')}
+            {t("storageShare.generate", "Generate Link")}
           </Button>
         </Group>
       </Stack>
diff --git a/frontend/src/core/components/shared/BulkUploadToServerModal.tsx b/frontend/src/core/components/shared/BulkUploadToServerModal.tsx
index 4e97fe74c7..e9fb4650c1 100644
--- a/frontend/src/core/components/shared/BulkUploadToServerModal.tsx
+++ b/frontend/src/core/components/shared/BulkUploadToServerModal.tsx
@@ -1,15 +1,15 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Modal, Stack, Text, Button, Group, Alert } from '@mantine/core';
-import CloudUploadIcon from '@mui/icons-material/CloudUpload';
-import { useTranslation } from 'react-i18next';
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { Modal, Stack, Text, Button, Group, Alert } from "@mantine/core";
+import CloudUploadIcon from "@mui/icons-material/CloudUpload";
+import { useTranslation } from "react-i18next";
 
-import { alert } from '@app/components/toast';
-import { Z_INDEX_OVER_FILE_MANAGER_MODAL } from '@app/styles/zIndex';
-import type { StirlingFileStub } from '@app/types/fileContext';
-import { uploadHistoryChains } from '@app/services/serverStorageUpload';
-import { fileStorage } from '@app/services/fileStorage';
-import { useFileActions } from '@app/contexts/FileContext';
-import type { FileId } from '@app/types/file';
+import { alert } from "@app/components/toast";
+import { Z_INDEX_OVER_FILE_MANAGER_MODAL } from "@app/styles/zIndex";
+import type { StirlingFileStub } from "@app/types/fileContext";
+import { uploadHistoryChains } from "@app/services/serverStorageUpload";
+import { fileStorage } from "@app/services/fileStorage";
+import { useFileActions } from "@app/contexts/FileContext";
+import type { FileId } from "@app/types/file";
 
 interface BulkUploadToServerModalProps {
   opened: boolean;
@@ -18,12 +18,7 @@ interface BulkUploadToServerModalProps {
   onUploaded?: () => Promise<void> | void;
 }
 
-const BulkUploadToServerModal: React.FC<BulkUploadToServerModalProps> = ({
-  opened,
-  onClose,
-  files,
-  onUploaded,
-}) => {
+const BulkUploadToServerModal: React.FC<BulkUploadToServerModalProps> = ({ opened, onClose, files, onUploaded }) => {
   const { t } = useTranslation();
   const { actions } = useFileActions();
   const [isUploading, setIsUploading] = useState(false);
@@ -44,18 +39,11 @@ const BulkUploadToServerModal: React.FC<BulkUploadToServerModalProps> = ({
     setErrorMessage(null);
 
     try {
-      const rootIds = Array.from(
-        new Set(files.map((file) => (file.originalFileId || file.id) as FileId))
-      );
-      const remoteIds = Array.from(
-        new Set(files.map((file) => file.remoteStorageId).filter(Boolean) as number[])
-      );
+      const rootIds = Array.from(new Set(files.map((file) => (file.originalFileId || file.id) as FileId)));
+      const remoteIds = Array.from(new Set(files.map((file) => file.remoteStorageId).filter(Boolean) as number[]));
       const existingRemoteId = remoteIds.length === 1 ? remoteIds[0] : undefined;
 
-      const { remoteId, updatedAt, chain } = await uploadHistoryChains(
-        rootIds,
-        existingRemoteId
-      );
+      const { remoteId, updatedAt, chain } = await uploadHistoryChains(rootIds, existingRemoteId);
 
       for (const stub of chain) {
         actions.updateStirlingFileStub(stub.id, {
@@ -73,8 +61,8 @@ const BulkUploadToServerModal: React.FC<BulkUploadToServerModalProps> = ({
       }
 
       alert({
-        alertType: 'success',
-        title: t('storageUpload.success', 'Uploaded to server'),
+        alertType: "success",
+        title: t("storageUpload.success", "Uploaded to server"),
         expandable: false,
         durationMs: 3000,
       });
@@ -83,10 +71,8 @@ const BulkUploadToServerModal: React.FC<BulkUploadToServerModalProps> = ({
       }
       onClose();
     } catch (error) {
-      console.error('Failed to upload files to server:', error);
-      setErrorMessage(
-        t('storageUpload.failure', 'Upload failed. Please check your login and storage settings.')
-      );
+      console.error("Failed to upload files to server:", error);
+      setErrorMessage(t("storageUpload.failure", "Upload failed. Please check your login and storage settings."));
     } finally {
       setIsUploading(false);
     }
@@ -97,48 +83,39 @@ const BulkUploadToServerModal: React.FC<BulkUploadToServerModalProps> = ({
       opened={opened}
       onClose={onClose}
       centered
-      title={t('storageUpload.bulkTitle', 'Upload selected files')}
+      title={t("storageUpload.bulkTitle", "Upload selected files")}
       zIndex={Z_INDEX_OVER_FILE_MANAGER_MODAL}
     >
       <Stack gap="sm">
-        <Text size="sm">
-          {t(
-            'storageUpload.bulkDescription',
-            'This uploads the selected files to your server storage.'
-          )}
-        </Text>
+        <Text size="sm">{t("storageUpload.bulkDescription", "This uploads the selected files to your server storage.")}</Text>
         <Text size="sm" c="dimmed">
-          {t('storageUpload.fileCount', '{{count}} files selected', {
+          {t("storageUpload.fileCount", "{{count}} files selected", {
             count: files.length,
           })}
         </Text>
         {displayNames.length > 0 && (
           <Text size="xs" c="dimmed">
-            {displayNames.join(', ')}
+            {displayNames.join(", ")}
             {fileNames.length > displayNames.length
-              ? t('storageUpload.more', ' +{{count}} more', {
+              ? t("storageUpload.more", " +{{count}} more", {
                   count: fileNames.length - displayNames.length,
                 })
-              : ''}
+              : ""}
           </Text>
         )}
 
         {errorMessage && (
-          <Alert color="red" title={t('storageUpload.errorTitle', 'Upload failed')}>
+          <Alert color="red" title={t("storageUpload.errorTitle", "Upload failed")}>
             {errorMessage}
           </Alert>
         )}
 
         <Group justify="flex-end" gap="sm">
           <Button variant="default" onClick={onClose} disabled={isUploading}>
-            {t('cancel', 'Cancel')}
+            {t("cancel", "Cancel")}
           </Button>
-          <Button
-            leftSection={<CloudUploadIcon style={{ fontSize: 18 }} />}
-            onClick={handleUpload}
-            loading={isUploading}
-          >
-            {t('storageUpload.uploadButton', 'Upload to Server')}
+          <Button leftSection={<CloudUploadIcon style={{ fontSize: 18 }} />} onClick={handleUpload} loading={isUploading}>
+            {t("storageUpload.uploadButton", "Upload to Server")}
           </Button>
         </Group>
       </Stack>
diff --git a/frontend/src/core/components/shared/ButtonSelector.test.tsx b/frontend/src/core/components/shared/ButtonSelector.test.tsx
index 12a509abd6..d0715a3090 100644
--- a/frontend/src/core/components/shared/ButtonSelector.test.tsx
+++ b/frontend/src/core/components/shared/ButtonSelector.test.tsx
@@ -1,214 +1,175 @@
-import { describe, expect, test, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { MantineProvider } from '@mantine/core';
-import ButtonSelector from '@app/components/shared/ButtonSelector';
+import { describe, expect, test, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { MantineProvider } from "@mantine/core";
+import ButtonSelector from "@app/components/shared/ButtonSelector";
 
 // Wrapper component to provide Mantine context
-const TestWrapper = ({ children }: { children: React.ReactNode }) => (
-  <MantineProvider>{children}</MantineProvider>
-);
+const TestWrapper = ({ children }: { children: React.ReactNode }) => <MantineProvider>{children}</MantineProvider>;
 
-describe('ButtonSelector', () => {
+describe("ButtonSelector", () => {
   const mockOnChange = vi.fn();
 
   beforeEach(() => {
     vi.clearAllMocks();
   });
 
-  test('should render all options as buttons', () => {
+  test("should render all options as buttons", () => {
     const options = [
-      { value: 'option1', label: 'Option 1' },
-      { value: 'option2', label: 'Option 2' },
+      { value: "option1", label: "Option 1" },
+      { value: "option2", label: "Option 2" },
     ];
 
     render(
       <TestWrapper>
-        <ButtonSelector
-          value="option1"
-          onChange={mockOnChange}
-          options={options}
-          label="Test Label"
-        />
-      </TestWrapper>
+        <ButtonSelector value="option1" onChange={mockOnChange} options={options} label="Test Label" />
+      </TestWrapper>,
     );
 
-    expect(screen.getByText('Test Label')).toBeInTheDocument();
-    expect(screen.getByText('Option 1')).toBeInTheDocument();
-    expect(screen.getByText('Option 2')).toBeInTheDocument();
+    expect(screen.getByText("Test Label")).toBeInTheDocument();
+    expect(screen.getByText("Option 1")).toBeInTheDocument();
+    expect(screen.getByText("Option 2")).toBeInTheDocument();
   });
 
-  test('should highlight selected button with filled variant', () => {
+  test("should highlight selected button with filled variant", () => {
     const options = [
-      { value: 'option1', label: 'Option 1' },
-      { value: 'option2', label: 'Option 2' },
+      { value: "option1", label: "Option 1" },
+      { value: "option2", label: "Option 2" },
     ];
 
     render(
       <TestWrapper>
-        <ButtonSelector
-          value="option1"
-          onChange={mockOnChange}
-          options={options}
-          label="Selection Label"
-        />
-      </TestWrapper>
+        <ButtonSelector value="option1" onChange={mockOnChange} options={options} label="Selection Label" />
+      </TestWrapper>,
     );
 
-    const selectedButton = screen.getByRole('button', { name: 'Option 1' });
-    const unselectedButton = screen.getByRole('button', { name: 'Option 2' });
+    const selectedButton = screen.getByRole("button", { name: "Option 1" });
+    const unselectedButton = screen.getByRole("button", { name: "Option 2" });
 
     // Check data-variant attribute for filled/outline
-    expect(selectedButton).toHaveAttribute('data-variant', 'filled');
-    expect(unselectedButton).toHaveAttribute('data-variant', 'outline');
-    expect(screen.getByText('Selection Label')).toBeInTheDocument();
+    expect(selectedButton).toHaveAttribute("data-variant", "filled");
+    expect(unselectedButton).toHaveAttribute("data-variant", "outline");
+    expect(screen.getByText("Selection Label")).toBeInTheDocument();
   });
 
-  test('should call onChange when button is clicked', () => {
+  test("should call onChange when button is clicked", () => {
     const options = [
-      { value: 'option1', label: 'Option 1' },
-      { value: 'option2', label: 'Option 2' },
+      { value: "option1", label: "Option 1" },
+      { value: "option2", label: "Option 2" },
     ];
 
     render(
       <TestWrapper>
-        <ButtonSelector
-          value="option1"
-          onChange={mockOnChange}
-          options={options}
-        />
-      </TestWrapper>
+        <ButtonSelector value="option1" onChange={mockOnChange} options={options} />
+      </TestWrapper>,
     );
 
-    fireEvent.click(screen.getByRole('button', { name: 'Option 2' }));
+    fireEvent.click(screen.getByRole("button", { name: "Option 2" }));
 
-    expect(mockOnChange).toHaveBeenCalledWith('option2');
+    expect(mockOnChange).toHaveBeenCalledWith("option2");
   });
 
-  test('should handle undefined value (no selection)', () => {
+  test("should handle undefined value (no selection)", () => {
     const options = [
-      { value: 'option1', label: 'Option 1' },
-      { value: 'option2', label: 'Option 2' },
+      { value: "option1", label: "Option 1" },
+      { value: "option2", label: "Option 2" },
     ];
 
     render(
       <TestWrapper>
-        <ButtonSelector
-          value={undefined}
-          onChange={mockOnChange}
-          options={options}
-        />
-      </TestWrapper>
+        <ButtonSelector value={undefined} onChange={mockOnChange} options={options} />
+      </TestWrapper>,
     );
 
     // Both buttons should be outlined when no value is selected
-    const button1 = screen.getByRole('button', { name: 'Option 1' });
-    const button2 = screen.getByRole('button', { name: 'Option 2' });
+    const button1 = screen.getByRole("button", { name: "Option 1" });
+    const button2 = screen.getByRole("button", { name: "Option 2" });
 
-    expect(button1).toHaveAttribute('data-variant', 'outline');
-    expect(button2).toHaveAttribute('data-variant', 'outline');
+    expect(button1).toHaveAttribute("data-variant", "outline");
+    expect(button2).toHaveAttribute("data-variant", "outline");
   });
 
   test.each([
     {
-      description: 'disable buttons when disabled prop is true',
+      description: "disable buttons when disabled prop is true",
       options: [
-        { value: 'option1', label: 'Option 1' },
-        { value: 'option2', label: 'Option 2' },
+        { value: "option1", label: "Option 1" },
+        { value: "option2", label: "Option 2" },
       ],
       globalDisabled: true,
       expectedStates: [true, true],
     },
     {
-      description: 'disable individual options when option.disabled is true',
+      description: "disable individual options when option.disabled is true",
       options: [
-        { value: 'option1', label: 'Option 1' },
-        { value: 'option2', label: 'Option 2', disabled: true },
+        { value: "option1", label: "Option 1" },
+        { value: "option2", label: "Option 2", disabled: true },
       ],
       globalDisabled: false,
       expectedStates: [false, true],
     },
-  ])('should $description', ({ options, globalDisabled, expectedStates }) => {
+  ])("should $description", ({ options, globalDisabled, expectedStates }) => {
     render(
       <TestWrapper>
-        <ButtonSelector
-          value="option1"
-          onChange={mockOnChange}
-          options={options}
-          disabled={globalDisabled}
-        />
-      </TestWrapper>
+        <ButtonSelector value="option1" onChange={mockOnChange} options={options} disabled={globalDisabled} />
+      </TestWrapper>,
     );
 
     options.forEach((option, index) => {
-      const button = screen.getByRole('button', { name: option.label });
-      expect(button).toHaveProperty('disabled', expectedStates[index]);
+      const button = screen.getByRole("button", { name: option.label });
+      expect(button).toHaveProperty("disabled", expectedStates[index]);
     });
   });
 
-  test('should not call onChange when disabled button is clicked', () => {
+  test("should not call onChange when disabled button is clicked", () => {
     const options = [
-      { value: 'option1', label: 'Option 1' },
-      { value: 'option2', label: 'Option 2', disabled: true },
+      { value: "option1", label: "Option 1" },
+      { value: "option2", label: "Option 2", disabled: true },
     ];
 
     render(
       <TestWrapper>
-        <ButtonSelector
-          value="option1"
-          onChange={mockOnChange}
-          options={options}
-        />
-      </TestWrapper>
+        <ButtonSelector value="option1" onChange={mockOnChange} options={options} />
+      </TestWrapper>,
     );
 
-    fireEvent.click(screen.getByRole('button', { name: 'Option 2' }));
+    fireEvent.click(screen.getByRole("button", { name: "Option 2" }));
 
     expect(mockOnChange).not.toHaveBeenCalled();
   });
 
-  test('should not apply fullWidth styling when fullWidth is false', () => {
+  test("should not apply fullWidth styling when fullWidth is false", () => {
     const options = [
-      { value: 'option1', label: 'Option 1' },
-      { value: 'option2', label: 'Option 2' },
+      { value: "option1", label: "Option 1" },
+      { value: "option2", label: "Option 2" },
     ];
 
     render(
       <TestWrapper>
-        <ButtonSelector
-          value="option1"
-          onChange={mockOnChange}
-          options={options}
-          fullWidth={false}
-          label="Layout Label"
-        />
-      </TestWrapper>
+        <ButtonSelector value="option1" onChange={mockOnChange} options={options} fullWidth={false} label="Layout Label" />
+      </TestWrapper>,
     );
 
-    const button = screen.getByRole('button', { name: 'Option 1' });
-    expect(button).not.toHaveStyle({ flex: '1' });
-    expect(screen.getByText('Layout Label')).toBeInTheDocument();
+    const button = screen.getByRole("button", { name: "Option 1" });
+    expect(button).not.toHaveStyle({ flex: "1" });
+    expect(screen.getByText("Layout Label")).toBeInTheDocument();
   });
 
-  test('should not render label element when not provided', () => {
+  test("should not render label element when not provided", () => {
     const options = [
-      { value: 'option1', label: 'Option 1' },
-      { value: 'option2', label: 'Option 2' },
+      { value: "option1", label: "Option 1" },
+      { value: "option2", label: "Option 2" },
     ];
 
     const { container } = render(
       <TestWrapper>
-        <ButtonSelector
-          value="option1"
-          onChange={mockOnChange}
-          options={options}
-        />
-      </TestWrapper>
+        <ButtonSelector value="option1" onChange={mockOnChange} options={options} />
+      </TestWrapper>,
     );
 
     // Should render buttons
-    expect(screen.getByText('Option 1')).toBeInTheDocument();
-    expect(screen.getByText('Option 2')).toBeInTheDocument();
-    
+    expect(screen.getByText("Option 1")).toBeInTheDocument();
+    expect(screen.getByText("Option 2")).toBeInTheDocument();
+
     // Stack should only contain the Group (buttons), no Text element for label
     const stackElement = container.querySelector('[class*="mantine-Stack-root"]');
     expect(stackElement?.children).toHaveLength(1); // Only the Group, no label Text
diff --git a/frontend/src/core/components/shared/ButtonSelector.tsx b/frontend/src/core/components/shared/ButtonSelector.tsx
index 94bd10c6e7..548d75fd81 100644
--- a/frontend/src/core/components/shared/ButtonSelector.tsx
+++ b/frontend/src/core/components/shared/ButtonSelector.tsx
@@ -5,7 +5,7 @@ export interface ButtonOption<T> {
   value: T;
   label: string;
   disabled?: boolean;
-  tooltip?: string;  // Tooltip shown on hover (useful for explaining why option is disabled)
+  tooltip?: string; // Tooltip shown on hover (useful for explaining why option is disabled)
 }
 
 interface ButtonSelectorProps<T> {
@@ -30,42 +30,42 @@ const ButtonSelector = <T extends string | number>({
   textClassName,
 }: ButtonSelectorProps<T>) => {
   return (
-    <Stack gap='var(--mantine-spacing-sm)'>
+    <Stack gap="var(--mantine-spacing-sm)">
       {/* Label (if it exists) */}
-      {label && <Text style={{
-        fontSize: "var(--mantine-font-size-sm)",
-        lineHeight: "var(--mantine-line-height-sm)",
-        fontWeight: "var(--font-weight-medium)",
-      }}>{label}</Text>}
+      {label && (
+        <Text
+          style={{
+            fontSize: "var(--mantine-font-size-sm)",
+            lineHeight: "var(--mantine-line-height-sm)",
+            fontWeight: "var(--font-weight-medium)",
+          }}
+        >
+          {label}
+        </Text>
+      )}
 
       {/* Buttons */}
-      <Group gap='4px'>
+      <Group gap="4px">
         {options.map((option) => {
           const isDisabled = disabled || option.disabled;
           const button = (
             <Button
-              variant={value === option.value ? 'filled' : 'outline'}
-              color={value === option.value ? 'var(--color-primary-500)' : 'var(--text-muted)'}
+              variant={value === option.value ? "filled" : "outline"}
+              color={value === option.value ? "var(--color-primary-500)" : "var(--text-muted)"}
               onClick={() => onChange(option.value)}
               disabled={isDisabled}
               className={buttonClassName}
               style={{
                 flex: fullWidth ? 1 : undefined,
-                height: 'auto',
-                minHeight: '2.5rem',
-                fontSize: 'var(--mantine-font-size-sm)',
-                lineHeight: '1.4',
-                paddingTop: '0.5rem',
-                paddingBottom: '0.5rem'
+                height: "auto",
+                minHeight: "2.5rem",
+                fontSize: "var(--mantine-font-size-sm)",
+                lineHeight: "1.4",
+                paddingTop: "0.5rem",
+                paddingBottom: "0.5rem",
               }}
             >
-              <FitText
-                text={option.label}
-                lines={1}
-                minimumFontScale={0.5}
-                fontSize={10}
-                className={textClassName}
-              />
+              <FitText text={option.label} lines={1} minimumFontScale={0.5} fontSize={10} className={textClassName} />
             </Button>
           );
 
@@ -73,12 +73,16 @@ const ButtonSelector = <T extends string | number>({
           if (option.tooltip && isDisabled) {
             return (
               <Tooltip key={option.value} label={option.tooltip} position="top" withArrow>
-                <span style={{ flex: fullWidth ? 1 : undefined, display: 'flex' }}>{button}</span>
+                <span style={{ flex: fullWidth ? 1 : undefined, display: "flex" }}>{button}</span>
               </Tooltip>
             );
           }
 
-          return <span key={option.value} style={{ flex: fullWidth ? 1 : undefined, display: 'flex' }}>{button}</span>;
+          return (
+            <span key={option.value} style={{ flex: fullWidth ? 1 : undefined, display: "flex" }}>
+              {button}
+            </span>
+          );
         })}
       </Group>
     </Stack>
diff --git a/frontend/src/core/components/shared/ButtonToggle.tsx b/frontend/src/core/components/shared/ButtonToggle.tsx
index f695c8a8bc..2f434e0086 100644
--- a/frontend/src/core/components/shared/ButtonToggle.tsx
+++ b/frontend/src/core/components/shared/ButtonToggle.tsx
@@ -1,5 +1,5 @@
-import { Button, Stack } from '@mantine/core';
-import React from 'react';
+import { Button, Stack } from "@mantine/core";
+import React from "react";
 
 export interface ButtonToggleOption {
   value: string;
@@ -13,8 +13,8 @@ export interface ButtonToggleProps {
   value: string;
   onChange: (value: string) => void;
   disabled?: boolean;
-  orientation?: 'vertical' | 'horizontal';
-  size?: 'xs' | 'sm' | 'md' | 'lg';
+  orientation?: "vertical" | "horizontal";
+  size?: "xs" | "sm" | "md" | "lg";
   fullWidth?: boolean;
 }
 
@@ -23,18 +23,18 @@ export const ButtonToggle: React.FC<ButtonToggleProps> = ({
   value,
   onChange,
   disabled = false,
-  orientation = 'vertical',
-  size = 'md',
+  orientation = "vertical",
+  size = "md",
   fullWidth = true,
 }) => {
-  const isVertical = orientation === 'vertical';
+  const isVertical = orientation === "vertical";
 
   const buttonStyle: React.CSSProperties = {
-    justifyContent: 'flex-start',
-    height: isVertical ? 'auto' : undefined,
-    minHeight: isVertical ? '50px' : undefined,
-    padding: isVertical ? '12px 16px' : undefined,
-    textAlign: 'left',
+    justifyContent: "flex-start",
+    height: isVertical ? "auto" : undefined,
+    minHeight: isVertical ? "50px" : undefined,
+    padding: isVertical ? "12px 16px" : undefined,
+    textAlign: "left",
   };
 
   const renderButton = (option: ButtonToggleOption) => {
@@ -44,21 +44,21 @@ export const ButtonToggle: React.FC<ButtonToggleProps> = ({
     return (
       <Button
         key={option.value}
-        variant={isSelected ? 'filled' : 'outline'}
+        variant={isSelected ? "filled" : "outline"}
         onClick={() => !isDisabled && onChange(option.value)}
         disabled={isDisabled}
         size={size}
         fullWidth={fullWidth}
         style={buttonStyle}
       >
-        <div style={{ width: '100%' }}>
+        <div style={{ width: "100%" }}>
           <div style={{ fontWeight: 600 }}>{option.label}</div>
           {option.description && (
             <div
               style={{
-                fontSize: '0.85em',
+                fontSize: "0.85em",
                 opacity: 0.8,
-                marginTop: '4px',
+                marginTop: "4px",
                 fontWeight: 400,
               }}
             >
@@ -71,16 +71,8 @@ export const ButtonToggle: React.FC<ButtonToggleProps> = ({
   };
 
   if (isVertical) {
-    return (
-      <Stack gap="xs">
-        {options.map(renderButton)}
-      </Stack>
-    );
+    return <Stack gap="xs">{options.map(renderButton)}</Stack>;
   }
 
-  return (
-    <div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
-      {options.map(renderButton)}
-    </div>
-  );
+  return <div style={{ display: "flex", gap: "8px", flexWrap: "wrap" }}>{options.map(renderButton)}</div>;
 };
diff --git a/frontend/src/core/components/shared/CardSelector.tsx b/frontend/src/core/components/shared/CardSelector.tsx
index 69d970d993..c75d6537c8 100644
--- a/frontend/src/core/components/shared/CardSelector.tsx
+++ b/frontend/src/core/components/shared/CardSelector.tsx
@@ -1,6 +1,6 @@
-import { Stack, Card, Text, Flex } from '@mantine/core';
-import { Tooltip } from '@app/components/shared/Tooltip';
-import { useTranslation } from 'react-i18next';
+import { Stack, Card, Text, Flex } from "@mantine/core";
+import { Tooltip } from "@app/components/shared/Tooltip";
+import { useTranslation } from "react-i18next";
 
 export interface CardOption<T = string> {
   value: T;
@@ -21,7 +21,7 @@ const CardSelector = <T, K extends CardOption<T>>({
   options,
   onSelect,
   disabled = false,
-  getTooltipContent
+  getTooltipContent,
 }: CardSelectorProps<T, K>) => {
   const { t } = useTranslation();
 
@@ -36,7 +36,7 @@ const CardSelector = <T, K extends CardOption<T>>({
       return getTooltipContent(option);
     }
     if (option.tooltipKey) {
-      const text = t(option.tooltipKey, '');
+      const text = t(option.tooltipKey, "");
       if (text) return [{ description: text }];
     }
     return [];
@@ -47,58 +47,47 @@ const CardSelector = <T, K extends CardOption<T>>({
       {options.map((option) => {
         const tips = getTooltips(option);
         return (
-        <Tooltip
-          key={option.value as string}
-          sidebarTooltip
-          tips={tips}
-          disabled={tips.length === 0}
-        >
-          <Card
-            radius="md"
-            w="100%"
-            h={'2.8rem'}
-            style={{
-              cursor: disabled ? 'default' : 'pointer',
-              backgroundColor: 'var(--mantine-color-gray-2)',
-              borderColor: 'var(--mantine-color-gray-3)',
-              opacity: disabled ? 0.6 : 1,
-              display: 'flex',
-              flexDirection: 'row',
-              transition: 'all 0.2s ease',
-            }}
-            onMouseEnter={(e) => {
-              if (!disabled) {
-                e.currentTarget.style.backgroundColor = 'var(--mantine-color-gray-3)';
-                e.currentTarget.style.transform = 'translateY(-1px)';
-                e.currentTarget.style.boxShadow = '0 4px 8px rgba(0, 0, 0, 0.1)';
-              }
-            }}
-            onMouseLeave={(e) => {
-              if (!disabled) {
-                e.currentTarget.style.backgroundColor = 'var(--mantine-color-gray-2)';
-                e.currentTarget.style.transform = 'translateY(0px)';
-                e.currentTarget.style.boxShadow = 'none';
-              }
-            }}
-            onClick={() => handleOptionClick(option.value)}
-          >
-            <Flex align={'center'} pl="sm" w="100%">
-              <Text size="sm" c="dimmed" ta="center" fw={350}>
-                {t(option.prefixKey, "Prefix")}
-              </Text>
-              <Text
-                fw={600}
-                size="sm"
-                c={undefined}
-                ta="center"
-                style={{ marginLeft: '0.25rem' }}
-              >
-                {t(option.nameKey, "Option Name")}
-              </Text>
-            </Flex>
-          </Card>
-        </Tooltip>
-      );
+          <Tooltip key={option.value as string} sidebarTooltip tips={tips} disabled={tips.length === 0}>
+            <Card
+              radius="md"
+              w="100%"
+              h={"2.8rem"}
+              style={{
+                cursor: disabled ? "default" : "pointer",
+                backgroundColor: "var(--mantine-color-gray-2)",
+                borderColor: "var(--mantine-color-gray-3)",
+                opacity: disabled ? 0.6 : 1,
+                display: "flex",
+                flexDirection: "row",
+                transition: "all 0.2s ease",
+              }}
+              onMouseEnter={(e) => {
+                if (!disabled) {
+                  e.currentTarget.style.backgroundColor = "var(--mantine-color-gray-3)";
+                  e.currentTarget.style.transform = "translateY(-1px)";
+                  e.currentTarget.style.boxShadow = "0 4px 8px rgba(0, 0, 0, 0.1)";
+                }
+              }}
+              onMouseLeave={(e) => {
+                if (!disabled) {
+                  e.currentTarget.style.backgroundColor = "var(--mantine-color-gray-2)";
+                  e.currentTarget.style.transform = "translateY(0px)";
+                  e.currentTarget.style.boxShadow = "none";
+                }
+              }}
+              onClick={() => handleOptionClick(option.value)}
+            >
+              <Flex align={"center"} pl="sm" w="100%">
+                <Text size="sm" c="dimmed" ta="center" fw={350}>
+                  {t(option.prefixKey, "Prefix")}
+                </Text>
+                <Text fw={600} size="sm" c={undefined} ta="center" style={{ marginLeft: "0.25rem" }}>
+                  {t(option.nameKey, "Option Name")}
+                </Text>
+              </Flex>
+            </Card>
+          </Tooltip>
+        );
       })}
     </Stack>
   );
diff --git a/frontend/src/core/components/shared/DismissAllErrorsButton.tsx b/frontend/src/core/components/shared/DismissAllErrorsButton.tsx
index 43333aff18..6238e27400 100644
--- a/frontend/src/core/components/shared/DismissAllErrorsButton.tsx
+++ b/frontend/src/core/components/shared/DismissAllErrorsButton.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
-import { Button, Group } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { useFileState } from '@app/contexts/FileContext';
-import { useFileActions } from '@app/contexts/file/fileHooks';
-import CloseIcon from '@mui/icons-material/Close';
-import { Z_INDEX_TOAST } from '@app/styles/zIndex';
+import React from "react";
+import { Button, Group } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { useFileState } from "@app/contexts/FileContext";
+import { useFileActions } from "@app/contexts/file/fileHooks";
+import CloseIcon from "@mui/icons-material/Close";
+import { Z_INDEX_TOAST } from "@app/styles/zIndex";
 
 interface DismissAllErrorsButtonProps {
   className?: string;
@@ -14,19 +14,19 @@ const DismissAllErrorsButton: React.FC<DismissAllErrorsButtonProps> = ({ classNa
   const { t } = useTranslation();
   const { state } = useFileState();
   const { actions } = useFileActions();
-  
+
   // Check if there are any files in error state
   const hasErrors = state.ui.errorFileIds.length > 0;
-  
+
   // Don't render if there are no errors
   if (!hasErrors) {
     return null;
   }
-  
+
   const handleDismissAllErrors = () => {
     actions.clearAllFileErrors();
   };
-  
+
   return (
     <Group className={className}>
       <Button
@@ -36,14 +36,14 @@ const DismissAllErrorsButton: React.FC<DismissAllErrorsButtonProps> = ({ classNa
         leftSection={<CloseIcon fontSize="small" />}
         onClick={handleDismissAllErrors}
         style={{
-          position: 'absolute',
-          top: '1rem',
-          right: '1rem',
+          position: "absolute",
+          top: "1rem",
+          right: "1rem",
           zIndex: Z_INDEX_TOAST,
-          pointerEvents: 'auto'
+          pointerEvents: "auto",
         }}
       >
-        {t('error.dismissAllErrors', 'Dismiss All Errors')} ({state.ui.errorFileIds.length})
+        {t("error.dismissAllErrors", "Dismiss All Errors")} ({state.ui.errorFileIds.length})
       </Button>
     </Group>
   );
diff --git a/frontend/src/core/components/shared/DropdownListWithFooter.tsx b/frontend/src/core/components/shared/DropdownListWithFooter.tsx
index b5e5a9f5d7..11d457ef99 100644
--- a/frontend/src/core/components/shared/DropdownListWithFooter.tsx
+++ b/frontend/src/core/components/shared/DropdownListWithFooter.tsx
@@ -1,8 +1,8 @@
-import React, { ReactNode, useState, useMemo } from 'react';
-import { Stack, Text, Popover, Box, Checkbox, Group, TextInput } from '@mantine/core';
-import UnfoldMoreIcon from '@mui/icons-material/UnfoldMore';
-import SearchIcon from '@mui/icons-material/Search';
-import { Z_INDEX_AUTOMATE_DROPDOWN } from '@app/styles/zIndex';
+import React, { ReactNode, useState, useMemo } from "react";
+import { Stack, Text, Popover, Box, Checkbox, Group, TextInput } from "@mantine/core";
+import UnfoldMoreIcon from "@mui/icons-material/UnfoldMore";
+import SearchIcon from "@mui/icons-material/Search";
+import { Z_INDEX_AUTOMATE_DROPDOWN } from "@app/styles/zIndex";
 
 export interface DropdownItem {
   value: string;
@@ -15,30 +15,30 @@ export interface DropdownListWithFooterProps {
   // Value and onChange - support both single and multi-select
   value: string | string[];
   onChange: (value: string | string[]) => void;
-  
+
   // Items and display
   items: DropdownItem[];
   placeholder?: string;
   disabled?: boolean;
-  
+
   // Labels and headers
   label?: string;
   header?: ReactNode;
   footer?: ReactNode;
-  
+
   // Behavior
   multiSelect?: boolean;
   searchable?: boolean;
   maxHeight?: number;
-  
+
   // Styling
   className?: string;
   dropdownClassName?: string;
-  
+
   // Popover props
-  position?: 'top' | 'bottom' | 'left' | 'right';
+  position?: "top" | "bottom" | "left" | "right";
   withArrow?: boolean;
-  width?: 'target' | number;
+  width?: "target" | number;
   withinPortal?: boolean;
   zIndex?: number;
 }
@@ -47,7 +47,7 @@ const DropdownListWithFooter: React.FC<DropdownListWithFooterProps> = ({
   value,
   onChange,
   items,
-  placeholder = 'Select option',
+  placeholder = "Select option",
   disabled = false,
   label,
   header,
@@ -55,34 +55,31 @@ const DropdownListWithFooter: React.FC<DropdownListWithFooterProps> = ({
   multiSelect = false,
   searchable = false,
   maxHeight = 300,
-  className = '',
-  dropdownClassName = '',
-  position = 'bottom',
+  className = "",
+  dropdownClassName = "",
+  position = "bottom",
   withArrow = false,
-  width = 'target',
+  width = "target",
   withinPortal = true,
-  zIndex = Z_INDEX_AUTOMATE_DROPDOWN
+  zIndex = Z_INDEX_AUTOMATE_DROPDOWN,
 }) => {
-  
-  const [searchTerm, setSearchTerm] = useState('');
-  
+  const [searchTerm, setSearchTerm] = useState("");
+
   const isMultiValue = Array.isArray(value);
-  const selectedValues = isMultiValue ? value : (value ? [value] : []);
+  const selectedValues = isMultiValue ? value : value ? [value] : [];
 
   // Filter items based on search term
   const filteredItems = useMemo(() => {
     if (!searchable || !searchTerm.trim()) {
       return items;
     }
-    return items.filter(item => 
-      item.name.toLowerCase().includes(searchTerm.toLowerCase())
-    );
+    return items.filter((item) => item.name.toLowerCase().includes(searchTerm.toLowerCase()));
   }, [items, searchTerm, searchable]);
 
   const handleItemClick = (itemValue: string) => {
     if (multiSelect) {
       const newSelection = selectedValues.includes(itemValue)
-        ? selectedValues.filter(v => v !== itemValue)
+        ? selectedValues.filter((v) => v !== itemValue)
         : [...selectedValues, itemValue];
       onChange(newSelection);
     } else {
@@ -94,7 +91,7 @@ const DropdownListWithFooter: React.FC<DropdownListWithFooterProps> = ({
     if (selectedValues.length === 0) {
       return placeholder;
     } else if (selectedValues.length === 1) {
-      const selectedItem = items.find(item => item.value === selectedValues[0]);
+      const selectedItem = items.find((item) => item.value === selectedValues[0]);
       return selectedItem?.name || selectedValues[0];
     } else {
       return `${selectedValues.length} selected`;
@@ -112,125 +109,130 @@ const DropdownListWithFooter: React.FC<DropdownListWithFooterProps> = ({
           {label}
         </Text>
       )}
-      
-      <Popover 
-        width={width} 
-        position={position} 
-        withArrow={withArrow} 
+
+      <Popover
+        width={width}
+        position={position}
+        withArrow={withArrow}
         shadow="md"
-        onClose={() => searchable && setSearchTerm('')}
+        onClose={() => searchable && setSearchTerm("")}
         withinPortal={withinPortal}
         zIndex={zIndex}
       >
         <Popover.Target>
           <Box
             style={{
-              border: 'light-dark(1px solid var(--mantine-color-gray-3), 1px solid var(--mantine-color-dark-4))',
-              borderRadius: 'var(--mantine-radius-sm)',
-              padding: '8px 12px',
-              backgroundColor: 'light-dark(var(--mantine-color-white), var(--mantine-color-dark-6))',
+              border: "light-dark(1px solid var(--mantine-color-gray-3), 1px solid var(--mantine-color-dark-4))",
+              borderRadius: "var(--mantine-radius-sm)",
+              padding: "8px 12px",
+              backgroundColor: "light-dark(var(--mantine-color-white), var(--mantine-color-dark-6))",
               opacity: disabled ? 0.6 : 1,
-              cursor: disabled ? 'not-allowed' : 'pointer',
-              minHeight: '36px',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'space-between'
+              cursor: disabled ? "not-allowed" : "pointer",
+              minHeight: "36px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
             }}
           >
             <Text size="sm" style={{ flex: 1 }}>
               {getDisplayText()}
             </Text>
-            <UnfoldMoreIcon style={{ 
-              fontSize: '1rem', 
-              color: 'light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-2))' 
-            }} />
+            <UnfoldMoreIcon
+              style={{
+                fontSize: "1rem",
+                color: "light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-2))",
+              }}
+            />
           </Box>
         </Popover.Target>
-        
+
         <Popover.Dropdown className={dropdownClassName}>
           <Stack gap="xs">
             {header && (
-              <Box style={{ 
-                borderBottom: 'light-dark(1px solid var(--mantine-color-gray-2), 1px solid var(--mantine-color-dark-4))', 
-                paddingBottom: '8px' 
-              }}>
+              <Box
+                style={{
+                  borderBottom: "light-dark(1px solid var(--mantine-color-gray-2), 1px solid var(--mantine-color-dark-4))",
+                  paddingBottom: "8px",
+                }}
+              >
                 {header}
               </Box>
             )}
-            
+
             {searchable && (
-              <Box style={{ 
-                borderBottom: 'light-dark(1px solid var(--mantine-color-gray-2), 1px solid var(--mantine-color-dark-4))', 
-                paddingBottom: '8px' 
-              }}>
+              <Box
+                style={{
+                  borderBottom: "light-dark(1px solid var(--mantine-color-gray-2), 1px solid var(--mantine-color-dark-4))",
+                  paddingBottom: "8px",
+                }}
+              >
                 <TextInput
                   placeholder="Search..."
                   value={searchTerm}
                   onChange={handleSearchChange}
-                  leftSection={<SearchIcon style={{ fontSize: '1rem' }} />}
+                  leftSection={<SearchIcon style={{ fontSize: "1rem" }} />}
                   size="sm"
-                  style={{ width: '100%' }}
+                  style={{ width: "100%" }}
                 />
               </Box>
             )}
-            
-            <Box style={{ maxHeight, overflowY: 'auto' }}>
+
+            <Box style={{ maxHeight, overflowY: "auto" }}>
               {filteredItems.length === 0 ? (
-                <Box style={{ padding: '12px', textAlign: 'center' }}>
+                <Box style={{ padding: "12px", textAlign: "center" }}>
                   <Text size="sm" c="dimmed">
-                    {searchable && searchTerm ? 'No results found' : 'No items available'}
+                    {searchable && searchTerm ? "No results found" : "No items available"}
                   </Text>
                 </Box>
               ) : (
                 filteredItems.map((item) => (
-                <Box
-                  key={item.value}
-                  onClick={() => !item.disabled && handleItemClick(item.value)}
-                  style={{
-                    padding: '8px 12px',
-                    cursor: item.disabled ? 'not-allowed' : 'pointer',
-                    borderRadius: 'var(--mantine-radius-sm)',
-                    opacity: item.disabled ? 0.5 : 1,
-                    display: 'flex',
-                    alignItems: 'center',
-                    justifyContent: 'space-between'
-                  }}
-                  onMouseEnter={(e) => {
-                    if (!item.disabled) {
-                      e.currentTarget.style.backgroundColor = 'light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5))';
-                    }
-                  }}
-                  onMouseLeave={(e) => {
-                    e.currentTarget.style.backgroundColor = 'transparent';
-                  }}
-                >
-                  <Group gap="sm" style={{ flex: 1 }}>
-                    {item.leftIcon && (
-                      <Box style={{ display: 'flex', alignItems: 'center' }}>
-                        {item.leftIcon}
-                      </Box>
+                  <Box
+                    key={item.value}
+                    onClick={() => !item.disabled && handleItemClick(item.value)}
+                    style={{
+                      padding: "8px 12px",
+                      cursor: item.disabled ? "not-allowed" : "pointer",
+                      borderRadius: "var(--mantine-radius-sm)",
+                      opacity: item.disabled ? 0.5 : 1,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "space-between",
+                    }}
+                    onMouseEnter={(e) => {
+                      if (!item.disabled) {
+                        e.currentTarget.style.backgroundColor =
+                          "light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-5))";
+                      }
+                    }}
+                    onMouseLeave={(e) => {
+                      e.currentTarget.style.backgroundColor = "transparent";
+                    }}
+                  >
+                    <Group gap="sm" style={{ flex: 1 }}>
+                      {item.leftIcon && <Box style={{ display: "flex", alignItems: "center" }}>{item.leftIcon}</Box>}
+                      <Text size="sm">{item.name}</Text>
+                    </Group>
+
+                    {multiSelect && (
+                      <Checkbox
+                        checked={selectedValues.includes(item.value)}
+                        onChange={() => {}} // Handled by parent onClick
+                        size="sm"
+                        disabled={item.disabled}
+                      />
                     )}
-                    <Text size="sm">{item.name}</Text>
-                  </Group>
-                  
-                  {multiSelect && (
-                    <Checkbox
-                      checked={selectedValues.includes(item.value)}
-                      onChange={() => {}} // Handled by parent onClick
-                      size="sm"
-                      disabled={item.disabled}
-                    />
-                  )}
-                </Box>
+                  </Box>
                 ))
               )}
             </Box>
-            
+
             {footer && (
-              <Box style={{ 
-                borderTop: 'light-dark(1px solid var(--mantine-color-gray-2), 1px solid var(--mantine-color-dark-4))', 
-                paddingTop: '8px' 
-              }}>
+              <Box
+                style={{
+                  borderTop: "light-dark(1px solid var(--mantine-color-gray-2), 1px solid var(--mantine-color-dark-4))",
+                  paddingTop: "8px",
+                }}
+              >
                 {footer}
               </Box>
             )}
@@ -241,4 +243,4 @@ const DropdownListWithFooter: React.FC<DropdownListWithFooterProps> = ({
   );
 };
 
-export default DropdownListWithFooter; 
\ No newline at end of file
+export default DropdownListWithFooter;
diff --git a/frontend/src/core/components/shared/EditableSecretField.tsx b/frontend/src/core/components/shared/EditableSecretField.tsx
index dfd3da6458..927e46a73c 100644
--- a/frontend/src/core/components/shared/EditableSecretField.tsx
+++ b/frontend/src/core/components/shared/EditableSecretField.tsx
@@ -1,7 +1,7 @@
-import { useState, useRef, useEffect } from 'react';
-import { PasswordInput, Group, ActionIcon, Tooltip, TextInput } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import LocalIcon from '@app/components/shared/LocalIcon';
+import { useState, useRef, useEffect } from "react";
+import { PasswordInput, Group, ActionIcon, Tooltip, TextInput } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import LocalIcon from "@app/components/shared/LocalIcon";
 
 interface EditableSecretFieldProps {
   label?: string;
@@ -26,16 +26,16 @@ export default function EditableSecretField({
   description,
   value,
   onChange,
-  placeholder = 'Enter value',
+  placeholder = "Enter value",
   disabled = false,
   error,
 }: EditableSecretFieldProps) {
   const { t } = useTranslation();
   const [isEditing, setIsEditing] = useState(false);
-  const [tempValue, setTempValue] = useState('');
+  const [tempValue, setTempValue] = useState("");
   const inputRef = useRef<HTMLInputElement>(null);
 
-  const isMasked = value === '********';
+  const isMasked = value === "********";
 
   useEffect(() => {
     if (isEditing && inputRef.current) {
@@ -44,45 +44,34 @@ export default function EditableSecretField({
   }, [isEditing]);
 
   const handleEdit = () => {
-    setTempValue('');
+    setTempValue("");
     setIsEditing(true);
   };
 
   const handleCancel = () => {
-    setTempValue('');
+    setTempValue("");
     setIsEditing(false);
   };
 
   const handleSave = () => {
-    if (tempValue.trim() !== '') {
+    if (tempValue.trim() !== "") {
       onChange(tempValue);
     }
-    setTempValue('');
+    setTempValue("");
     setIsEditing(false);
   };
 
   return (
     <div>
-      {label && <label style={{ display: 'block', marginBottom: 4, fontWeight: 500, fontSize: '0.875rem' }}>{label}</label>}
-      {description && <p style={{ margin: '4px 0 12px 0', fontSize: '0.75rem', color: '#666' }}>{description}</p>}
+      {label && <label style={{ display: "block", marginBottom: 4, fontWeight: 500, fontSize: "0.875rem" }}>{label}</label>}
+      {description && <p style={{ margin: "4px 0 12px 0", fontSize: "0.75rem", color: "#666" }}>{description}</p>}
 
       {isMasked && !isEditing ? (
         // Masked value from backend: show display + Edit button
         <Group gap="xs" align="flex-end">
-          <TextInput
-            value="••••••••"
-            disabled
-            style={{ flex: 1 }}
-            readOnly
-          />
-          <Tooltip label={t('editSecret')} withArrow>
-            <ActionIcon
-              variant="light"
-              onClick={handleEdit}
-              disabled={disabled}
-              title="Edit"
-              aria-label="Edit secret value"
-            >
+          <TextInput value="••••••••" disabled style={{ flex: 1 }} readOnly />
+          <Tooltip label={t("editSecret")} withArrow>
+            <ActionIcon variant="light" onClick={handleEdit} disabled={disabled} title="Edit" aria-label="Edit secret value">
               <LocalIcon icon="edit" width="1rem" height="1rem" />
             </ActionIcon>
           </Tooltip>
@@ -99,7 +88,7 @@ export default function EditableSecretField({
           autoComplete="new-password"
           onBlur={handleSave}
           onKeyDown={(e) => {
-            if (e.key === 'Escape') handleCancel();
+            if (e.key === "Escape") handleCancel();
           }}
         />
       ) : (
diff --git a/frontend/src/core/components/shared/EncryptedPdfUnlockModal.tsx b/frontend/src/core/components/shared/EncryptedPdfUnlockModal.tsx
index 5ba2dbf053..765f90704b 100644
--- a/frontend/src/core/components/shared/EncryptedPdfUnlockModal.tsx
+++ b/frontend/src/core/components/shared/EncryptedPdfUnlockModal.tsx
@@ -1,7 +1,7 @@
-import { Modal, Stack, Text, Button, PasswordInput, Group } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { type KeyboardEventHandler } from 'react';
-import { Z_INDEX_OVER_FULLSCREEN_SURFACE } from '@app/styles/zIndex';
+import { Modal, Stack, Text, Button, PasswordInput, Group } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { type KeyboardEventHandler } from "react";
+import { Z_INDEX_OVER_FULLSCREEN_SURFACE } from "@app/styles/zIndex";
 
 interface EncryptedPdfUnlockModalProps {
   opened: boolean;
@@ -27,7 +27,7 @@ const EncryptedPdfUnlockModal = ({
   const { t } = useTranslation();
 
   const handleKeyDown: KeyboardEventHandler<HTMLInputElement> = (event) => {
-    if (event.key === 'Enter' && !isProcessing && password.trim().length > 0) {
+    if (event.key === "Enter" && !isProcessing && password.trim().length > 0) {
       onUnlock();
     }
   };
@@ -36,7 +36,7 @@ const EncryptedPdfUnlockModal = ({
     <Modal
       opened={opened}
       onClose={onSkip}
-      title={t('encryptedPdfUnlock.title', 'Remove password to continue')}
+      title={t("encryptedPdfUnlock.title", "Remove password to continue")}
       centered
       size="md"
       closeOnClickOutside={!isProcessing}
@@ -44,18 +44,20 @@ const EncryptedPdfUnlockModal = ({
       zIndex={Z_INDEX_OVER_FULLSCREEN_SURFACE}
     >
       <Stack gap="md">
-        <Text fw={600} ta="center">{fileName}</Text>
+        <Text fw={600} ta="center">
+          {fileName}
+        </Text>
         <Text c="dimmed" ta="center">
           {t(
-            'encryptedPdfUnlock.description',
-            'This PDF is password protected. Enter the password so you can continue working with it.'
+            "encryptedPdfUnlock.description",
+            "This PDF is password protected. Enter the password so you can continue working with it.",
           )}
         </Text>
 
         <Stack gap={4}>
           <PasswordInput
-            label={t('encryptedPdfUnlock.password.label', 'PDF password')}
-            placeholder={t('encryptedPdfUnlock.password.placeholder', 'Enter the PDF password')}
+            label={t("encryptedPdfUnlock.password.label", "PDF password")}
+            placeholder={t("encryptedPdfUnlock.password.placeholder", "Enter the PDF password")}
             value={password}
             onChange={(event) => onPasswordChange(event.currentTarget.value)}
             onKeyDown={handleKeyDown}
@@ -71,10 +73,10 @@ const EncryptedPdfUnlockModal = ({
 
         <Group justify="space-between">
           <Button variant="light" color="var(--mantine-color-gray-8)" onClick={onSkip} disabled={isProcessing}>
-            {t('encryptedPdfUnlock.skip', 'Skip for now')}
+            {t("encryptedPdfUnlock.skip", "Skip for now")}
           </Button>
           <Button onClick={onUnlock} loading={isProcessing} disabled={password.trim().length === 0}>
-            {t('encryptedPdfUnlock.unlock', 'Unlock & Continue')}
+            {t("encryptedPdfUnlock.unlock", "Unlock & Continue")}
           </Button>
         </Group>
       </Stack>
diff --git a/frontend/src/core/components/shared/ErrorBoundary.tsx b/frontend/src/core/components/shared/ErrorBoundary.tsx
index 0bab94f0a2..5b075c6a93 100644
--- a/frontend/src/core/components/shared/ErrorBoundary.tsx
+++ b/frontend/src/core/components/shared/ErrorBoundary.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { Text, Button, Stack } from '@mantine/core';
+import React from "react";
+import { Text, Button, Stack } from "@mantine/core";
 
 interface ErrorBoundaryState {
   hasError: boolean;
@@ -8,7 +8,7 @@ interface ErrorBoundaryState {
 
 interface ErrorBoundaryProps {
   children: React.ReactNode;
-  fallback?: React.ComponentType<{error?: Error; retry: () => void}>;
+  fallback?: React.ComponentType<{ error?: Error; retry: () => void }>;
 }
 
 export default class ErrorBoundary extends React.Component<ErrorBoundaryProps, ErrorBoundaryState> {
@@ -23,22 +23,22 @@ export default class ErrorBoundary extends React.Component<ErrorBoundaryProps, E
 
   componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
     // Enhanced logging for diagnosis
-    console.error('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
-    console.error('🔴 ErrorBoundary caught an error');
-    console.error('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
-    console.error('Error:', error);
-    console.error('Error name:', error.name);
-    console.error('Error message:', error.message);
-    console.error('Error stack:', error.stack);
-    console.error('Component stack:', errorInfo.componentStack);
-    console.error('Current URL:', window.location.href);
-    console.error('Current pathname:', window.location.pathname);
-    console.error('Current hash:', window.location.hash);
-    console.error('Current search:', window.location.search);
-    console.error('Timestamp:', new Date().toISOString());
-    console.error('User agent:', navigator.userAgent);
+    console.error("━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━");
+    console.error("🔴 ErrorBoundary caught an error");
+    console.error("━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━");
+    console.error("Error:", error);
+    console.error("Error name:", error.name);
+    console.error("Error message:", error.message);
+    console.error("Error stack:", error.stack);
+    console.error("Component stack:", errorInfo.componentStack);
+    console.error("Current URL:", window.location.href);
+    console.error("Current pathname:", window.location.pathname);
+    console.error("Current hash:", window.location.hash);
+    console.error("Current search:", window.location.search);
+    console.error("Timestamp:", new Date().toISOString());
+    console.error("User agent:", navigator.userAgent);
     // Check for React error codes
-    if (error.message.includes('Minified React error')) {
+    if (error.message.includes("Minified React error")) {
       const errorCodeMatch = error.message.match(/#(\d+)/);
       if (errorCodeMatch) {
         const errorCode = errorCodeMatch[1];
@@ -48,16 +48,16 @@ export default class ErrorBoundary extends React.Component<ErrorBoundaryProps, E
 
     // Check localStorage for auth state
     try {
-      const jwt = localStorage.getItem('stirling_jwt');
-      console.error('Auth state:', {
+      const jwt = localStorage.getItem("stirling_jwt");
+      console.error("Auth state:", {
         hasJWT: !!jwt,
         jwtLength: jwt?.length || 0,
       });
     } catch (e) {
-      console.error('Could not check localStorage:', e);
+      console.error("Could not check localStorage:", e);
     }
 
-    console.error('━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━');
+    console.error("━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━");
   }
 
   retry = () => {
@@ -72,26 +72,36 @@ export default class ErrorBoundary extends React.Component<ErrorBoundaryProps, E
       }
 
       return (
-        <Stack align="center" justify="center" style={{ minHeight: '200px', padding: '2rem', maxWidth: '800px', margin: '0 auto' }}>
-          <Text size="lg" fw={500} c="red">Something went wrong</Text>
-          {process.env.NODE_ENV === 'development' && this.state.error && (
+        <Stack
+          align="center"
+          justify="center"
+          style={{ minHeight: "200px", padding: "2rem", maxWidth: "800px", margin: "0 auto" }}
+        >
+          <Text size="lg" fw={500} c="red">
+            Something went wrong
+          </Text>
+          {process.env.NODE_ENV === "development" && this.state.error && (
             <>
-              <Text size="sm" c="dimmed" style={{ textAlign: 'center', fontFamily: 'monospace', marginTop: '1rem' }}>
+              <Text size="sm" c="dimmed" style={{ textAlign: "center", fontFamily: "monospace", marginTop: "1rem" }}>
                 {this.state.error.message}
               </Text>
               {this.state.error.stack && (
-                <details style={{ marginTop: '1rem', width: '100%' }}>
-                  <summary style={{ cursor: 'pointer', marginBottom: '0.5rem' }}>
-                    <Text size="sm" component="span">Show stack trace</Text>
+                <details style={{ marginTop: "1rem", width: "100%" }}>
+                  <summary style={{ cursor: "pointer", marginBottom: "0.5rem" }}>
+                    <Text size="sm" component="span">
+                      Show stack trace
+                    </Text>
                   </summary>
-                  <pre style={{
-                    fontSize: '0.75rem',
-                    overflow: 'auto',
-                    backgroundColor: '#f5f5f5',
-                    padding: '1rem',
-                    borderRadius: '4px',
-                    maxHeight: '300px'
-                  }}>
+                  <pre
+                    style={{
+                      fontSize: "0.75rem",
+                      overflow: "auto",
+                      backgroundColor: "#f5f5f5",
+                      padding: "1rem",
+                      borderRadius: "4px",
+                      maxHeight: "300px",
+                    }}
+                  >
                     {this.state.error.stack}
                   </pre>
                 </details>
diff --git a/frontend/src/core/components/shared/FileCard.tsx b/frontend/src/core/components/shared/FileCard.tsx
index dda4791753..569345f9d5 100644
--- a/frontend/src/core/components/shared/FileCard.tsx
+++ b/frontend/src/core/components/shared/FileCard.tsx
@@ -22,7 +22,17 @@ interface FileCardProps {
   isSupported?: boolean; // Whether the file format is supported by the current tool
 }
 
-const FileCard = ({ file, fileStub, onRemove, onDoubleClick, onView, onEdit, isSelected, onSelect, isSupported = true }: FileCardProps) => {
+const FileCard = ({
+  file,
+  fileStub,
+  onRemove,
+  onDoubleClick,
+  onView,
+  onEdit,
+  isSelected,
+  onSelect,
+  isSupported = true,
+}: FileCardProps) => {
   const { t } = useTranslation();
   // Use record thumbnail if available, otherwise fall back to IndexedDB lookup
   const { thumbnail: indexedDBThumb, isGenerating } = useIndexedDBThumbnail(fileStub);
@@ -30,7 +40,7 @@ const FileCard = ({ file, fileStub, onRemove, onDoubleClick, onView, onEdit, isS
   const [isHovered, setIsHovered] = useState(false);
 
   // Show loading state during hydration: PDF file without thumbnail yet
-  const isPdf = file.type === 'application/pdf';
+  const isPdf = file.type === "application/pdf";
   const isHydrating = isPdf && !thumb && !isGenerating;
 
   return (
@@ -44,11 +54,11 @@ const FileCard = ({ file, fileStub, onRemove, onDoubleClick, onView, onEdit, isS
         minWidth: 180,
         maxWidth: 260,
         cursor: onDoubleClick && isSupported ? "pointer" : undefined,
-        position: 'relative',
-        border: isSelected ? '2px solid var(--mantine-color-blue-6)' : undefined,
-        backgroundColor: isSelected ? 'var(--mantine-color-blue-0)' : undefined,
+        position: "relative",
+        border: isSelected ? "2px solid var(--mantine-color-blue-6)" : undefined,
+        backgroundColor: isSelected ? "var(--mantine-color-blue-0)" : undefined,
         opacity: isSupported ? 1 : 0.5,
-        filter: isSupported ? 'none' : 'grayscale(50%)'
+        filter: isSupported ? "none" : "grayscale(50%)",
       }}
       onDoubleClick={onDoubleClick}
       onMouseEnter={() => setIsHovered(true)}
@@ -69,22 +79,22 @@ const FileCard = ({ file, fileStub, onRemove, onDoubleClick, onView, onEdit, isS
             justifyContent: "center",
             margin: "0 auto",
             background: "#fafbfc",
-            position: 'relative'
+            position: "relative",
           }}
         >
           {/* Hover action buttons */}
           {isHovered && (onView || onEdit) && (
             <div
               style={{
-                position: 'absolute',
+                position: "absolute",
                 top: 4,
                 right: 4,
-                display: 'flex',
+                display: "flex",
                 gap: 4,
                 zIndex: 10,
-                backgroundColor: 'rgba(255, 255, 255, 0.9)',
+                backgroundColor: "rgba(255, 255, 255, 0.9)",
                 borderRadius: 4,
-                padding: 2
+                padding: 2,
               }}
               onClick={(e) => e.stopPropagation()}
             >
@@ -121,26 +131,23 @@ const FileCard = ({ file, fileStub, onRemove, onDoubleClick, onView, onEdit, isS
             </div>
           )}
           {thumb ? (
-            <Image
-              src={thumb}
-              alt="PDF thumbnail"
-              height={110}
-              width={80}
-              fit="contain"
-              radius="sm"
-            />
-          ) : (isGenerating || isHydrating) ? (
+            <Image src={thumb} alt="PDF thumbnail" height={110} width={80} fit="contain" radius="sm" />
+          ) : isGenerating || isHydrating ? (
             <Stack align="center" justify="center" gap="xs">
               <Loader size="sm" />
-              <Text size="xs" c="dimmed">Loading...</Text>
+              <Text size="xs" c="dimmed">
+                Loading...
+              </Text>
             </Stack>
           ) : (
-            <div style={{
-              display: 'flex',
-              flexDirection: 'column',
-              alignItems: 'center',
-              justifyContent: 'center'
-            }}>
+            <div
+              style={{
+                display: "flex",
+                flexDirection: "column",
+                alignItems: "center",
+                justifyContent: "center",
+              }}
+            >
               <ThemeIcon
                 variant="light"
                 color={file.size > 100 * 1024 * 1024 ? "orange" : "red"}
@@ -151,7 +158,9 @@ const FileCard = ({ file, fileStub, onRemove, onDoubleClick, onView, onEdit, isS
                 <PictureAsPdfIcon style={{ fontSize: 40 }} />
               </ThemeIcon>
               {file.size > 100 * 1024 * 1024 && (
-                <Text size="xs" c="dimmed" mt={4}>Large File</Text>
+                <Text size="xs" c="dimmed" mt={4}>
+                  Large File
+                </Text>
               )}
             </div>
           )}
@@ -169,12 +178,7 @@ const FileCard = ({ file, fileStub, onRemove, onDoubleClick, onView, onEdit, isS
             {getFileDate(file)}
           </Badge>
           {fileStub?.id && (
-            <Badge
-              color="green"
-              variant="light"
-              size="sm"
-              leftSection={<StorageIcon style={{ fontSize: 12 }} />}
-            >
+            <Badge color="green" variant="light" size="sm" leftSection={<StorageIcon style={{ fontSize: 12 }} />}>
               DB
             </Badge>
           )}
diff --git a/frontend/src/core/components/shared/FileDropdownMenu.tsx b/frontend/src/core/components/shared/FileDropdownMenu.tsx
index fcb1a6a266..cd35d43aa1 100644
--- a/frontend/src/core/components/shared/FileDropdownMenu.tsx
+++ b/frontend/src/core/components/shared/FileDropdownMenu.tsx
@@ -1,12 +1,12 @@
-import React from 'react';
-import { Menu, Loader, Group, Text, ActionIcon, Tooltip } from '@mantine/core';
-import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import CloseIcon from '@mui/icons-material/Close';
-import FitText from '@app/components/shared/FitText';
-import { PrivateContent } from '@app/components/shared/PrivateContent';
-import { FileId } from '@app/types/file';
-import { truncateCenter } from '@app/utils/textUtils';
+import React from "react";
+import { Menu, Loader, Group, Text, ActionIcon, Tooltip } from "@mantine/core";
+import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import CloseIcon from "@mui/icons-material/Close";
+import FitText from "@app/components/shared/FitText";
+import { PrivateContent } from "@app/components/shared/PrivateContent";
+import { FileId } from "@app/types/file";
+import { truncateCenter } from "@app/utils/textUtils";
 
 interface FileDropdownMenuProps {
   displayName: string;
@@ -31,7 +31,7 @@ export const FileDropdownMenu: React.FC<FileDropdownMenuProps> = ({
   return (
     <Menu trigger="click" position="bottom" width="30rem">
       <Menu.Target>
-        <div style={{...viewOptionStyle, cursor: 'pointer', maxWidth: '100%'}}>
+        <div style={{ ...viewOptionStyle, cursor: "pointer", maxWidth: "100%" }}>
           {switchingTo === "viewer" ? (
             <Loader size="xs" />
           ) : (
@@ -41,22 +41,24 @@ export const FileDropdownMenu: React.FC<FileDropdownMenuProps> = ({
             <FitText
               text={truncateCenter(displayName, 30)}
               minimumFontScale={0.6}
-              style={{ maxWidth: '12rem', display: 'inline-block' }}
+              style={{ maxWidth: "12rem", display: "inline-block" }}
             />
           </PrivateContent>
           <KeyboardArrowDownIcon fontSize="small" style={{ flexShrink: 0 }} />
         </div>
       </Menu.Target>
-      <Menu.Dropdown style={{
-        backgroundColor: 'var(--right-rail-bg)',
-        border: '1px solid var(--border-subtle)',
-        borderRadius: '8px',
-        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
-        maxHeight: '50vh',
-        overflowY: 'auto'
-      }}>
+      <Menu.Dropdown
+        style={{
+          backgroundColor: "var(--right-rail-bg)",
+          border: "1px solid var(--border-subtle)",
+          borderRadius: "8px",
+          boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+          maxHeight: "50vh",
+          overflowY: "auto",
+        }}
+      >
         {activeFiles.map((file, index) => {
-          const itemName = file?.name || 'Untitled';
+          const itemName = file?.name || "Untitled";
           const isActive = index === currentFileIndex;
           return (
             <Menu.Item
@@ -66,18 +68,18 @@ export const FileDropdownMenu: React.FC<FileDropdownMenuProps> = ({
                 onFileSelect?.(index);
               }}
               className="viewer-file-tab"
-              {...(isActive && { 'data-active': true })}
+              {...(isActive && { "data-active": true })}
               style={{
-                justifyContent: 'flex-start',
+                justifyContent: "flex-start",
               }}
             >
-              <Group gap="xs" style={{ width: '100%', justifyContent: 'space-between' }}>
-                <div style={{ flex: 1, textAlign: 'left', minWidth: 0 }}>
+              <Group gap="xs" style={{ width: "100%", justifyContent: "space-between" }}>
+                <div style={{ flex: 1, textAlign: "left", minWidth: 0 }}>
                   <PrivateContent>
                     <FitText
                       text={truncateCenter(itemName, 50)}
                       minimumFontScale={0.7}
-                      style={{ display: 'block', width: '100%' }}
+                      style={{ display: "block", width: "100%" }}
                     />
                   </PrivateContent>
                 </div>
diff --git a/frontend/src/core/components/shared/FileGrid.tsx b/frontend/src/core/components/shared/FileGrid.tsx
index 5bd31008db..c9ec2fe1b5 100644
--- a/frontend/src/core/components/shared/FileGrid.tsx
+++ b/frontend/src/core/components/shared/FileGrid.tsx
@@ -24,7 +24,7 @@ interface FileGridProps {
   isFileSupported?: (fileName: string) => boolean; // Function to check if file is supported
 }
 
-type SortOption = 'date' | 'name' | 'size';
+type SortOption = "date" | "name" | "size";
 
 const FileGrid = ({
   files,
@@ -40,25 +40,23 @@ const FileGrid = ({
   onShowAll,
   showingAll = false,
   onDeleteAll,
-  isFileSupported
+  isFileSupported,
 }: FileGridProps) => {
   const { t } = useTranslation();
   const [searchTerm, setSearchTerm] = useState("");
-  const [sortBy, setSortBy] = useState<SortOption>('date');
+  const [sortBy, setSortBy] = useState<SortOption>("date");
 
   // Filter files based on search term
-  const filteredFiles = files.filter(item =>
-    item.file.name.toLowerCase().includes(searchTerm.toLowerCase())
-  );
+  const filteredFiles = files.filter((item) => item.file.name.toLowerCase().includes(searchTerm.toLowerCase()));
 
   // Sort files
   const sortedFiles = [...filteredFiles].sort((a, b) => {
     switch (sortBy) {
-      case 'date':
+      case "date":
         return (b.file.lastModified || 0) - (a.file.lastModified || 0);
-      case 'name':
+      case "name":
         return a.file.name.localeCompare(b.file.name);
-      case 'size':
+      case "size":
         return (b.file.size || 0) - (a.file.size || 0);
       default:
         return 0;
@@ -66,14 +64,12 @@ const FileGrid = ({
   });
 
   // Apply max display limit if specified
-  const displayFiles = maxDisplay && !showingAll
-    ? sortedFiles.slice(0, maxDisplay)
-    : sortedFiles;
+  const displayFiles = maxDisplay && !showingAll ? sortedFiles.slice(0, maxDisplay) : sortedFiles;
 
   const hasMoreFiles = maxDisplay && !showingAll && sortedFiles.length > maxDisplay;
 
   return (
-    <Box >
+    <Box>
       {/* Search and Sort Controls */}
       {(showSearch || showSort || onDeleteAll) && (
         <Group mb="md" justify="space-between" wrap="wrap" gap="sm">
@@ -91,9 +87,9 @@ const FileGrid = ({
             {showSort && (
               <Select
                 data={[
-                  { value: 'date', label: t("fileManager.sortByDate", "Sort by Date") },
-                  { value: 'name', label: t("fileManager.sortByName", "Sort by Name") },
-                  { value: 'size', label: t("fileManager.sortBySize", "Sort by Size") }
+                  { value: "date", label: t("fileManager.sortByDate", "Sort by Date") },
+                  { value: "name", label: t("fileManager.sortByName", "Sort by Name") },
+                  { value: "size", label: t("fileManager.sortBySize", "Sort by Size") },
                 ]}
                 value={sortBy}
                 onChange={(value) => setSortBy(value as SortOption)}
@@ -104,11 +100,7 @@ const FileGrid = ({
           </Group>
 
           {onDeleteAll && (
-            <Button
-              color="red"
-              size="sm"
-              onClick={onDeleteAll}
-            >
+            <Button color="red" size="sm" onClick={onDeleteAll}>
               {t("fileManager.deleteAll", "Delete All")}
             </Button>
           )}
@@ -116,49 +108,40 @@ const FileGrid = ({
       )}
 
       {/* File Grid */}
-      <Flex
-        direction="row"
-        wrap="wrap"
-        gap="md"
-        h="30rem"
-        style={{ overflowY: "auto", width: "100%" }}
-      >
+      <Flex direction="row" wrap="wrap" gap="md" h="30rem" style={{ overflowY: "auto", width: "100%" }}>
         {displayFiles
-          .filter(item => {
+          .filter((item) => {
             if (!item.record?.id) {
-              console.error('FileGrid: File missing StirlingFileStub with proper ID:', item.file.name);
+              console.error("FileGrid: File missing StirlingFileStub with proper ID:", item.file.name);
               return false;
             }
             return true;
           })
           .map((item, idx) => {
-          const fileId = item.record!.id; // Safe to assert after filter
-          const originalIdx = files.findIndex(f => f.record?.id === fileId);
-          const supported = isFileSupported ? isFileSupported(item.file.name) : true;
-          return (
-            <FileCard
-              key={fileId + idx}
-              file={item.file}
-              fileStub={item.record}
-              onRemove={onRemove ? () => onRemove(originalIdx) : () => {}}
-              onDoubleClick={onDoubleClick && supported ? () => onDoubleClick(item) : undefined}
-              onView={onView && supported ? () => onView(item) : undefined}
-              onEdit={onEdit && supported ? () => onEdit(item) : undefined}
-              isSelected={selectedFiles.includes(fileId)}
-              onSelect={onSelect && supported ? () => onSelect(fileId) : undefined}
-              isSupported={supported}
-            />
-          );
-        })}
+            const fileId = item.record!.id; // Safe to assert after filter
+            const originalIdx = files.findIndex((f) => f.record?.id === fileId);
+            const supported = isFileSupported ? isFileSupported(item.file.name) : true;
+            return (
+              <FileCard
+                key={fileId + idx}
+                file={item.file}
+                fileStub={item.record}
+                onRemove={onRemove ? () => onRemove(originalIdx) : () => {}}
+                onDoubleClick={onDoubleClick && supported ? () => onDoubleClick(item) : undefined}
+                onView={onView && supported ? () => onView(item) : undefined}
+                onEdit={onEdit && supported ? () => onEdit(item) : undefined}
+                isSelected={selectedFiles.includes(fileId)}
+                onSelect={onSelect && supported ? () => onSelect(fileId) : undefined}
+                isSupported={supported}
+              />
+            );
+          })}
       </Flex>
 
       {/* Show All Button */}
       {hasMoreFiles && onShowAll && (
         <Group justify="center" mt="md">
-          <Button
-            variant="light"
-            onClick={onShowAll}
-          >
+          <Button variant="light" onClick={onShowAll}>
             {t("fileManager.showAll", "Show All")} ({sortedFiles.length} files)
           </Button>
         </Group>
@@ -166,12 +149,11 @@ const FileGrid = ({
 
       {/* Empty State */}
       {displayFiles.length === 0 && (
-        <Box style={{ textAlign: 'center', padding: '2rem' }}>
+        <Box style={{ textAlign: "center", padding: "2rem" }}>
           <Text c="dimmed">
             {searchTerm
               ? t("fileManager.noFilesFound", "No files found matching your search")
-              : t("fileManager.noFiles", "No files available")
-            }
+              : t("fileManager.noFiles", "No files available")}
           </Text>
         </Box>
       )}
diff --git a/frontend/src/core/components/shared/FilePickerModal.tsx b/frontend/src/core/components/shared/FilePickerModal.tsx
index 3f5e78b345..3ed3cca0fb 100644
--- a/frontend/src/core/components/shared/FilePickerModal.tsx
+++ b/frontend/src/core/components/shared/FilePickerModal.tsx
@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useState, useEffect } from "react";
 import {
   Modal,
   Text,
@@ -11,12 +11,12 @@ import {
   Image,
   Badge,
   ThemeIcon,
-  SimpleGrid
-} from '@mantine/core';
-import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
-import { useTranslation } from 'react-i18next';
-import { FileId } from '@app/types/file';
-import { useFileActionTerminology } from '@app/hooks/useFileActionTerminology';
+  SimpleGrid,
+} from "@mantine/core";
+import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
+import { useTranslation } from "react-i18next";
+import { FileId } from "@app/types/file";
+import { useFileActionTerminology } from "@app/hooks/useFileActionTerminology";
 
 interface FilePickerModalProps {
   opened: boolean;
@@ -25,12 +25,7 @@ interface FilePickerModalProps {
   onSelectFiles: (selectedFiles: File[]) => void;
 }
 
-const FilePickerModal = ({
-  opened,
-  onClose,
-  storedFiles,
-  onSelectFiles,
-}: FilePickerModalProps) => {
+const FilePickerModal = ({ opened, onClose, storedFiles, onSelectFiles }: FilePickerModalProps) => {
   const { t } = useTranslation();
   const terminology = useFileActionTerminology();
   const [selectedFileIds, setSelectedFileIds] = useState<FileId[]>([]);
@@ -43,15 +38,13 @@ const FilePickerModal = ({
   }, [opened]);
 
   const toggleFileSelection = (fileId: FileId) => {
-    setSelectedFileIds(prev => {
-      return prev.includes(fileId)
-        ? prev.filter(id => id !== fileId)
-        : [...prev, fileId];
+    setSelectedFileIds((prev) => {
+      return prev.includes(fileId) ? prev.filter((id) => id !== fileId) : [...prev, fileId];
     });
   };
 
   const selectAll = () => {
-    setSelectedFileIds(storedFiles.map(f => f.id).filter(Boolean));
+    setSelectedFileIds(storedFiles.map((f) => f.id).filter(Boolean));
   };
 
   const selectNone = () => {
@@ -59,9 +52,7 @@ const FilePickerModal = ({
   };
 
   const handleConfirm = async () => {
-    const selectedFiles = storedFiles.filter(f =>
-      selectedFileIds.includes(f.id)
-    );
+    const selectedFiles = storedFiles.filter((f) => selectedFileIds.includes(f.id));
 
     // Convert stored files to File objects
     const convertedFiles = await Promise.all(
@@ -78,31 +69,31 @@ const FilePickerModal = ({
           }
 
           // If it's from IndexedDB storage, reconstruct the File
-          if (fileItem.arrayBuffer && typeof fileItem.arrayBuffer === 'function') {
+          if (fileItem.arrayBuffer && typeof fileItem.arrayBuffer === "function") {
             const arrayBuffer = await fileItem.arrayBuffer();
-            const blob = new Blob([arrayBuffer], { type: fileItem.type || 'application/pdf' });
+            const blob = new Blob([arrayBuffer], { type: fileItem.type || "application/pdf" });
             return new File([blob], fileItem.name, {
-              type: fileItem.type || 'application/pdf',
-              lastModified: fileItem.lastModified || Date.now()
+              type: fileItem.type || "application/pdf",
+              lastModified: fileItem.lastModified || Date.now(),
             });
           }
 
           // If it has data property, reconstruct the File
           if (fileItem.data) {
-            const blob = new Blob([fileItem.data], { type: fileItem.type || 'application/pdf' });
+            const blob = new Blob([fileItem.data], { type: fileItem.type || "application/pdf" });
             return new File([blob], fileItem.name, {
-              type: fileItem.type || 'application/pdf',
-              lastModified: fileItem.lastModified || Date.now()
+              type: fileItem.type || "application/pdf",
+              lastModified: fileItem.lastModified || Date.now(),
             });
           }
 
-          console.warn('Could not convert file item:', fileItem);
+          console.warn("Could not convert file item:", fileItem);
           return null;
         } catch (error) {
-          console.error('Error converting file:', error, fileItem);
+          console.error("Error converting file:", error, fileItem);
           return null;
         }
-      })
+      }),
     );
 
     // Filter out any null values and return valid Files
@@ -113,11 +104,11 @@ const FilePickerModal = ({
   };
 
   const formatFileSize = (bytes: number) => {
-    if (bytes === 0) return '0 B';
+    if (bytes === 0) return "0 B";
     const k = 1024;
-    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const sizes = ["B", "KB", "MB", "GB"];
     const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
   };
 
   return (
@@ -140,9 +131,7 @@ const FilePickerModal = ({
             <Group justify="space-between">
               <Text size="sm" c="dimmed">
                 {storedFiles.length} {t("fileUpload.filesAvailable", "files available")}
-                {selectedFileIds.length > 0 && (
-                  <> • {selectedFileIds.length} selected</>
-                )}
+                {selectedFileIds.length > 0 && <> • {selectedFileIds.length} selected</>}
               </Text>
               <Group gap="xs">
                 <Button size="xs" variant="light" onClick={selectAll}>
@@ -166,15 +155,11 @@ const FilePickerModal = ({
                       key={fileId}
                       p="sm"
                       style={{
-                        border: isSelected
-                          ? '2px solid var(--mantine-color-blue-6)'
-                          : '1px solid var(--mantine-color-gray-3)',
+                        border: isSelected ? "2px solid var(--mantine-color-blue-6)" : "1px solid var(--mantine-color-gray-3)",
                         borderRadius: 8,
-                        backgroundColor: isSelected
-                          ? 'var(--mantine-color-blue-0)'
-                          : 'transparent',
-                        cursor: 'pointer',
-                        transition: 'all 0.2s ease'
+                        backgroundColor: isSelected ? "var(--mantine-color-blue-0)" : "transparent",
+                        cursor: "pointer",
+                        transition: "all 0.2s ease",
                       }}
                       onClick={() => toggleFileSelection(fileId)}
                     >
@@ -190,29 +175,19 @@ const FilePickerModal = ({
                           style={{
                             width: 60,
                             height: 80,
-                            border: '1px solid var(--mantine-color-gray-3)',
+                            border: "1px solid var(--mantine-color-gray-3)",
                             borderRadius: 4,
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            backgroundColor: 'var(--mantine-color-gray-0)',
-                            flexShrink: 0
+                            display: "flex",
+                            alignItems: "center",
+                            justifyContent: "center",
+                            backgroundColor: "var(--mantine-color-gray-0)",
+                            flexShrink: 0,
                           }}
                         >
                           {file.thumbnail ? (
-                            <Image
-                              src={file.thumbnail}
-                              alt="PDF thumbnail"
-                              height={70}
-                              width={50}
-                              fit="contain"
-                            />
+                            <Image src={file.thumbnail} alt="PDF thumbnail" height={70} width={50} fit="contain" />
                           ) : (
-                            <ThemeIcon
-                              variant="light"
-                              color="red"
-                              size={40}
-                            >
+                            <ThemeIcon variant="light" color="red" size={40}>
                               <PictureAsPdfIcon style={{ fontSize: 24 }} />
                             </ThemeIcon>
                           )}
@@ -225,7 +200,7 @@ const FilePickerModal = ({
                           </Text>
                           <Group gap="xs">
                             <Badge size="xs" variant="light" color="gray">
-                              {formatFileSize(file.size || (file.file?.size || 0))}
+                              {formatFileSize(file.size || file.file?.size || 0)}
                             </Badge>
                           </Group>
                         </Stack>
@@ -250,14 +225,10 @@ const FilePickerModal = ({
           <Button variant="light" onClick={onClose}>
             {t("close", "Cancel")}
           </Button>
-          <Button
-            onClick={handleConfirm}
-            disabled={selectedFileIds.length === 0}
-          >
+          <Button onClick={handleConfirm} disabled={selectedFileIds.length === 0}>
             {selectedFileIds.length > 0
               ? `${t("fileUpload.loadFromStorage", "Load")} ${selectedFileIds.length} ${terminology.uploadFiles}`
-              : t("fileUpload.loadFromStorage", "Load Files")
-            }
+              : t("fileUpload.loadFromStorage", "Load Files")}
           </Button>
         </Group>
       </Stack>
diff --git a/frontend/src/core/components/shared/FilePreview.tsx b/frontend/src/core/components/shared/FilePreview.tsx
index 4377c851c0..93655167ca 100644
--- a/frontend/src/core/components/shared/FilePreview.tsx
+++ b/frontend/src/core/components/shared/FilePreview.tsx
@@ -1,26 +1,26 @@
-import React from 'react';
-import { Box, Center } from '@mantine/core';
-import InsertDriveFileIcon from '@mui/icons-material/InsertDriveFile';
-import { StirlingFileStub } from '@app/types/fileContext';
-import DocumentThumbnail from '@app/components/shared/filePreview/DocumentThumbnail';
-import DocumentStack from '@app/components/shared/filePreview/DocumentStack';
-import HoverOverlay from '@app/components/shared/filePreview/HoverOverlay';
-import NavigationArrows from '@app/components/shared/filePreview/NavigationArrows';
+import React from "react";
+import { Box, Center } from "@mantine/core";
+import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
+import { StirlingFileStub } from "@app/types/fileContext";
+import DocumentThumbnail from "@app/components/shared/filePreview/DocumentThumbnail";
+import DocumentStack from "@app/components/shared/filePreview/DocumentStack";
+import HoverOverlay from "@app/components/shared/filePreview/HoverOverlay";
+import NavigationArrows from "@app/components/shared/filePreview/NavigationArrows";
 
 export interface FilePreviewProps {
   // Core file data
   file: File | StirlingFileStub | null;
   thumbnail?: string | null;
-  
+
   // Optional features
   showStacking?: boolean;
   showHoverOverlay?: boolean;
   showNavigation?: boolean;
-  
+
   // State
   totalFiles?: number;
   isAnimating?: boolean;
-  
+
   // Event handlers
   onFileClick?: (file: File | StirlingFileStub | null) => void;
   onPrevious?: () => void;
@@ -37,41 +37,38 @@ const FilePreview: React.FC<FilePreviewProps> = ({
   isAnimating = false,
   onFileClick,
   onPrevious,
-  onNext
+  onNext,
 }) => {
   if (!file) {
     return (
-      <Box style={{ width: '100%', height: '100%' }}>
-        <Center style={{ width: '100%', height: '100%' }}>
-          <InsertDriveFileIcon 
-            style={{ 
-              fontSize: '4rem', 
-              color: 'var(--mantine-color-gray-4)',
-              opacity: 0.6 
-            }} 
+      <Box style={{ width: "100%", height: "100%" }}>
+        <Center style={{ width: "100%", height: "100%" }}>
+          <InsertDriveFileIcon
+            style={{
+              fontSize: "4rem",
+              color: "var(--mantine-color-gray-4)",
+              opacity: 0.6,
+            }}
           />
         </Center>
       </Box>
     );
   }
-  
+
   const hasMultipleFiles = totalFiles > 1;
-  
+
   // Animation styles
-  const animationStyle = isAnimating ? {
-    transition: 'all 0.3s cubic-bezier(0.4, 0, 0.2, 1)',
-    transform: 'scale(0.95) translateX(1.25rem)',
-    opacity: 0.7
-  } : {};
+  const animationStyle = isAnimating
+    ? {
+        transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
+        transform: "scale(0.95) translateX(1.25rem)",
+        opacity: 0.7,
+      }
+    : {};
 
   // Build the component composition
   let content = (
-    <DocumentThumbnail
-      file={file}
-      thumbnail={thumbnail}
-      style={animationStyle}
-      onClick={() => onFileClick?.(file)}
-    />
+    <DocumentThumbnail file={file} thumbnail={thumbnail} style={animationStyle} onClick={() => onFileClick?.(file)} />
   );
 
   // Wrap with hover overlay if needed
@@ -81,31 +78,19 @@ const FilePreview: React.FC<FilePreviewProps> = ({
 
   // Wrap with document stack if needed
   if (showStacking) {
-    content = (
-      <DocumentStack totalFiles={totalFiles}>
-        {content}
-      </DocumentStack>
-    );
+    content = <DocumentStack totalFiles={totalFiles}>{content}</DocumentStack>;
   }
 
   // Wrap with navigation if needed
   if (showNavigation && hasMultipleFiles && onPrevious && onNext) {
     content = (
-      <NavigationArrows
-        onPrevious={onPrevious}
-        onNext={onNext}
-        disabled={isAnimating}
-      >
+      <NavigationArrows onPrevious={onPrevious} onNext={onNext} disabled={isAnimating}>
         {content}
       </NavigationArrows>
     );
   }
 
-  return (
-    <Box style={{ width: '100%', height: '100%' }}>
-      {content}
-    </Box>
-  );
+  return <Box style={{ width: "100%", height: "100%" }}>{content}</Box>;
 };
 
-export default FilePreview;
\ No newline at end of file
+export default FilePreview;
diff --git a/frontend/src/core/components/shared/FileUploadButton.tsx b/frontend/src/core/components/shared/FileUploadButton.tsx
index 85c3d58175..f26d26d453 100644
--- a/frontend/src/core/components/shared/FileUploadButton.tsx
+++ b/frontend/src/core/components/shared/FileUploadButton.tsx
@@ -19,24 +19,18 @@ const FileUploadButton = ({
   disabled = false,
   placeholder,
   variant = "outline",
-  fullWidth = true
+  fullWidth = true,
 }: FileUploadButtonProps) => {
   const { t } = useTranslation();
   const resetRef = useRef<() => void>(null);
 
-  const defaultPlaceholder = t('chooseFile', 'Choose File');
+  const defaultPlaceholder = t("chooseFile", "Choose File");
 
   return (
-    <FileButton
-      resetRef={resetRef}
-      onChange={onChange}
-      accept={accept}
-      disabled={disabled}
-
-    >
+    <FileButton resetRef={resetRef} onChange={onChange} accept={accept} disabled={disabled}>
       {(props) => (
         <Button {...props} variant={variant} fullWidth={fullWidth} color="blue">
-          {file ? file.name : (placeholder || defaultPlaceholder)}
+          {file ? file.name : placeholder || defaultPlaceholder}
         </Button>
       )}
     </FileButton>
diff --git a/frontend/src/core/components/shared/FirstLoginModal.tsx b/frontend/src/core/components/shared/FirstLoginModal.tsx
index 877a8e2d04..1a3c249837 100644
--- a/frontend/src/core/components/shared/FirstLoginModal.tsx
+++ b/frontend/src/core/components/shared/FirstLoginModal.tsx
@@ -1,10 +1,10 @@
-import { useState } from 'react';
-import { Modal, Stack, Text, PasswordInput, Button, Alert } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { accountService } from '@app/services/accountService';
-import { alert } from '@app/components/toast';
-import { Z_INDEX_OVER_FULLSCREEN_SURFACE } from '@app/styles/zIndex';
+import { useState } from "react";
+import { Modal, Stack, Text, PasswordInput, Button, Alert } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { accountService } from "@app/services/accountService";
+import { alert } from "@app/components/toast";
+import { Z_INDEX_OVER_FULLSCREEN_SURFACE } from "@app/styles/zIndex";
 
 interface FirstLoginModalProps {
   opened: boolean;
@@ -20,49 +20,49 @@ interface FirstLoginModalProps {
  */
 export default function FirstLoginModal({ opened, onPasswordChanged, username }: FirstLoginModalProps) {
   const { t } = useTranslation();
-  const [currentPassword, setCurrentPassword] = useState('');
-  const [newPassword, setNewPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
+  const [currentPassword, setCurrentPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
   const [loading, setLoading] = useState(false);
-  const [error, setError] = useState('');
+  const [error, setError] = useState("");
 
   const handleSubmit = async () => {
     // Validation
     if (!currentPassword || !newPassword || !confirmPassword) {
-      setError(t('firstLogin.allFieldsRequired', 'All fields are required'));
+      setError(t("firstLogin.allFieldsRequired", "All fields are required"));
       return;
     }
 
     if (newPassword !== confirmPassword) {
-      setError(t('firstLogin.passwordsDoNotMatch', 'New passwords do not match'));
+      setError(t("firstLogin.passwordsDoNotMatch", "New passwords do not match"));
       return;
     }
 
     if (newPassword.length < 8) {
-      setError(t('firstLogin.passwordTooShort', 'Password must be at least 8 characters'));
+      setError(t("firstLogin.passwordTooShort", "Password must be at least 8 characters"));
       return;
     }
 
     if (newPassword === currentPassword) {
-      setError(t('firstLogin.passwordMustBeDifferent', 'New password must be different from current password'));
+      setError(t("firstLogin.passwordMustBeDifferent", "New password must be different from current password"));
       return;
     }
 
     try {
       setLoading(true);
-      setError('');
+      setError("");
 
       await accountService.changePasswordOnLogin(currentPassword, newPassword, confirmPassword);
 
       alert({
-        alertType: 'success',
-        title: t('firstLogin.passwordChangedSuccess', 'Password changed successfully! Please log in again.')
+        alertType: "success",
+        title: t("firstLogin.passwordChangedSuccess", "Password changed successfully! Please log in again."),
       });
 
       // Clear form
-      setCurrentPassword('');
-      setNewPassword('');
-      setConfirmPassword('');
+      setCurrentPassword("");
+      setNewPassword("");
+      setConfirmPassword("");
 
       // Wait a moment for the user to see the success message
       // Then the backend will have logged them out, and onPasswordChanged will handle redirect
@@ -70,10 +70,10 @@ export default function FirstLoginModal({ opened, onPasswordChanged, username }:
         onPasswordChanged();
       }, 1500);
     } catch (err: any) {
-      console.error('Failed to change password:', err);
+      console.error("Failed to change password:", err);
       setError(
         err.response?.data?.message ||
-        t('firstLogin.passwordChangeFailed', 'Failed to change password. Please check your current password.')
+          t("firstLogin.passwordChangeFailed", "Failed to change password. Please check your current password."),
       );
     } finally {
       setLoading(false);
@@ -84,7 +84,7 @@ export default function FirstLoginModal({ opened, onPasswordChanged, username }:
     <Modal
       opened={opened}
       onClose={() => {}} // Cannot close
-      title={t('firstLogin.title', 'First Time Login')}
+      title={t("firstLogin.title", "First Time Login")}
       closeOnClickOutside={false}
       closeOnEscape={false}
       withCloseButton={false}
@@ -95,25 +95,22 @@ export default function FirstLoginModal({ opened, onPasswordChanged, username }:
       <Stack gap="md">
         <Alert
           icon={<LocalIcon icon="info-rounded" width="1rem" height="1rem" />}
-          title={t('firstLogin.welcomeTitle', 'Welcome!')}
+          title={t("firstLogin.welcomeTitle", "Welcome!")}
           color="blue"
         >
           <Text size="sm">
-            {t(
-              'firstLogin.welcomeMessage',
-              'For security reasons, you must change your password on your first login.'
-            )}
+            {t("firstLogin.welcomeMessage", "For security reasons, you must change your password on your first login.")}
           </Text>
         </Alert>
 
         <Text size="sm" fw={500}>
-          {t('firstLogin.loggedInAs', 'Logged in as')}: <strong>{username}</strong>
+          {t("firstLogin.loggedInAs", "Logged in as")}: <strong>{username}</strong>
         </Text>
 
         {error && (
           <Alert
             icon={<LocalIcon icon="error-rounded" width="1rem" height="1rem" />}
-            title={t('firstLogin.error', 'Error')}
+            title={t("firstLogin.error", "Error")}
             color="red"
           >
             {error}
@@ -121,16 +118,16 @@ export default function FirstLoginModal({ opened, onPasswordChanged, username }:
         )}
 
         <PasswordInput
-          label={t('firstLogin.currentPassword', 'Current Password')}
-          placeholder={t('firstLogin.enterCurrentPassword', 'Enter your current password')}
+          label={t("firstLogin.currentPassword", "Current Password")}
+          placeholder={t("firstLogin.enterCurrentPassword", "Enter your current password")}
           value={currentPassword}
           onChange={(e) => setCurrentPassword(e.currentTarget.value)}
           required
         />
 
         <PasswordInput
-          label={t('firstLogin.newPassword', 'New Password')}
-          placeholder={t('firstLogin.enterNewPassword', 'Enter new password (min 8 characters)')}
+          label={t("firstLogin.newPassword", "New Password")}
+          placeholder={t("firstLogin.enterNewPassword", "Enter new password (min 8 characters)")}
           value={newPassword}
           onChange={(e) => setNewPassword(e.currentTarget.value)}
           minLength={8}
@@ -138,8 +135,8 @@ export default function FirstLoginModal({ opened, onPasswordChanged, username }:
         />
 
         <PasswordInput
-          label={t('firstLogin.confirmPassword', 'Confirm New Password')}
-          placeholder={t('firstLogin.reEnterNewPassword', 'Re-enter new password')}
+          label={t("firstLogin.confirmPassword", "Confirm New Password")}
+          placeholder={t("firstLogin.reEnterNewPassword", "Re-enter new password")}
           value={confirmPassword}
           onChange={(e) => setConfirmPassword(e.currentTarget.value)}
           minLength={8}
@@ -150,10 +147,12 @@ export default function FirstLoginModal({ opened, onPasswordChanged, username }:
           fullWidth
           onClick={handleSubmit}
           loading={loading}
-          disabled={!currentPassword || !newPassword || !confirmPassword || newPassword.length < 8 || confirmPassword.length < 8}
+          disabled={
+            !currentPassword || !newPassword || !confirmPassword || newPassword.length < 8 || confirmPassword.length < 8
+          }
           mt="md"
         >
-          {t('firstLogin.changePassword', 'Change Password')}
+          {t("firstLogin.changePassword", "Change Password")}
         </Button>
       </Stack>
     </Modal>
diff --git a/frontend/src/core/components/shared/FitText.tsx b/frontend/src/core/components/shared/FitText.tsx
index 29abe6e0c2..0344065ff2 100644
--- a/frontend/src/core/components/shared/FitText.tsx
+++ b/frontend/src/core/components/shared/FitText.tsx
@@ -1,5 +1,5 @@
-import React, { CSSProperties, useMemo, useRef } from 'react';
-import { useAdjustFontSizeToFit } from '@app/components/shared/fitText/textFit';
+import React, { CSSProperties, useMemo, useRef } from "react";
+import { useAdjustFontSizeToFit } from "@app/components/shared/fitText/textFit";
 
 type FitTextProps = {
   text: string;
@@ -8,7 +8,7 @@ type FitTextProps = {
   lines?: number; // max lines
   className?: string;
   style?: CSSProperties;
-  as?: 'span' | 'div';
+  as?: "span" | "div";
   /**
    * Insert zero-width soft breaks after these characters to prefer wrapping at them
    * when multi-line is enabled. Defaults to '/'. Ignored when lines === 1.
@@ -23,8 +23,8 @@ const FitText: React.FC<FitTextProps> = ({
   lines = 1,
   className,
   style,
-  as = 'span',
-  softBreakChars = ['-','_','/'],
+  as = "span",
+  softBreakChars = ["-", "_", "/"],
 }) => {
   const ref = useRef<HTMLElement | null>(null);
 
@@ -45,23 +45,23 @@ const FitText: React.FC<FitTextProps> = ({
     if (!text) return text;
     if (!lines || lines <= 1) return text;
     const chars = Array.isArray(softBreakChars) ? softBreakChars : [softBreakChars];
-    const esc = (s: string) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-    const re = new RegExp(`(${chars.filter(Boolean).map(esc).join('|')})`, 'g');
+    const esc = (s: string) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    const re = new RegExp(`(${chars.filter(Boolean).map(esc).join("|")})`, "g");
     return text.replace(re, `$1\u200B`);
   }, [text, lines, softBreakChars]);
 
   const clampStyles: CSSProperties = {
     // Multi-line clamp with ellipsis fallback
-    whiteSpace: lines === 1 ? 'nowrap' : 'normal',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    display: lines > 1 ? '-webkit-box' : undefined,
-    WebkitBoxOrient: lines > 1 ? 'vertical' : undefined,
+    whiteSpace: lines === 1 ? "nowrap" : "normal",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    display: lines > 1 ? "-webkit-box" : undefined,
+    WebkitBoxOrient: lines > 1 ? "vertical" : undefined,
     WebkitLineClamp: lines > 1 ? lines : undefined,
     // Favor breaking words when necessary to prevent overflow
-    wordBreak: lines > 1 ? 'break-word' : 'normal',
-    overflowWrap: lines > 1 ? 'break-word' : 'normal',
-    hyphens: lines > 1 ? 'auto' : 'manual',
+    wordBreak: lines > 1 ? "break-word" : "normal",
+    overflowWrap: lines > 1 ? "break-word" : "normal",
+    hyphens: lines > 1 ? "auto" : "manual",
     // fontSize expects rem values (e.g., 1.2, 0.9) to scale with global font size
     fontSize: fontSize ? `${fontSize}rem` : undefined,
   };
@@ -74,5 +74,3 @@ const FitText: React.FC<FitTextProps> = ({
 };
 
 export default FitText;
-
-
diff --git a/frontend/src/core/components/shared/Footer.tsx b/frontend/src/core/components/shared/Footer.tsx
index e7501b259a..c83d062239 100644
--- a/frontend/src/core/components/shared/Footer.tsx
+++ b/frontend/src/core/components/shared/Footer.tsx
@@ -1,7 +1,7 @@
-import { Flex } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { useCookieConsent } from '@app/hooks/useCookieConsent';
-import { useFooterInfo } from '@app/hooks/useFooterInfo';
+import { Flex } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { useCookieConsent } from "@app/hooks/useCookieConsent";
+import { useFooterInfo } from "@app/hooks/useFooterInfo";
 
 interface FooterProps {
   privacyPolicy?: string;
@@ -20,7 +20,7 @@ export default function Footer({
   cookiePolicy,
   impressum,
   analyticsEnabled,
-  forceLightMode = false
+  forceLightMode = false,
 }: FooterProps) {
   const { t } = useTranslation();
   const { footerInfo } = useFooterInfo();
@@ -49,101 +49,71 @@ export default function Footer({
   const isValidLink = (link?: string) => link && link.trim().length > 0;
 
   return (
-    <div style={{
-      height: 'var(--footer-height)',
-      backgroundColor: forceLightMode ? '#f1f3f5' : 'var(--mantine-color-gray-1)',
-      borderTop: forceLightMode ? '1px solid #e9ecef' : '1px solid var(--mantine-color-gray-2)',
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-    }}>
-        <Flex gap="md"
-          justify="center"
-          align="center"
-          direction="row"
-          style={{
-            fontSize: '0.75rem',
-            color: forceLightMode ? '#495057' : undefined
-          }}>
-          <a
-            className="footer-link px-3"
-            id="survey"
-            target="_blank"
-            rel="noopener noreferrer"
-            href="https://stirlingpdf.info/s/cm28y3niq000o56dv7liv8wsu"
-          >
-            {t('survey.nav', 'Survey')}
+    <div
+      style={{
+        height: "var(--footer-height)",
+        backgroundColor: forceLightMode ? "#f1f3f5" : "var(--mantine-color-gray-1)",
+        borderTop: forceLightMode ? "1px solid #e9ecef" : "1px solid var(--mantine-color-gray-2)",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+      }}
+    >
+      <Flex
+        gap="md"
+        justify="center"
+        align="center"
+        direction="row"
+        style={{
+          fontSize: "0.75rem",
+          color: forceLightMode ? "#495057" : undefined,
+        }}
+      >
+        <a
+          className="footer-link px-3"
+          id="survey"
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://stirlingpdf.info/s/cm28y3niq000o56dv7liv8wsu"
+        >
+          {t("survey.nav", "Survey")}
+        </a>
+        <a className="footer-link px-3" target="_blank" rel="noopener noreferrer" href={finalPrivacyUrl}>
+          {t("legal.privacy", "Privacy Policy")}
+        </a>
+        <a className="footer-link px-3" target="_blank" rel="noopener noreferrer" href={finalTermsUrl}>
+          {t("legal.terms", "Terms and Conditions")}
+        </a>
+        <a className="footer-link px-3" target="_blank" rel="noopener noreferrer" href="https://discord.gg/Cn8pWhQRxZ">
+          {t("footer.discord", "Discord")}
+        </a>
+        <a
+          className="footer-link px-3"
+          target="_blank"
+          rel="noopener noreferrer"
+          href="https://github.com/Stirling-Tools/Stirling-PDF"
+        >
+          {t("footer.issues", "GitHub")}
+        </a>
+        <a className="footer-link px-3" target="_blank" rel="noopener noreferrer" href={finalAccessibilityUrl}>
+          {t("legal.accessibility", "Accessibility")}
+        </a>
+        {isValidLink(finalCookiePolicy) && (
+          <a className="footer-link px-3" target="_blank" rel="noopener noreferrer" href={finalCookiePolicy}>
+            {t("legal.cookie", "Cookie Policy")}
           </a>
-          <a
-            className="footer-link px-3"
-            target="_blank"
-            rel="noopener noreferrer"
-            href={finalPrivacyUrl}
-          >
-            {t('legal.privacy', 'Privacy Policy')}
+        )}
+        {isValidLink(finalImpressum) && (
+          <a className="footer-link px-3" target="_blank" rel="noopener noreferrer" href={finalImpressum}>
+            {t("legal.impressum", "Impressum")}
           </a>
-          <a
-            className="footer-link px-3"
-            target="_blank"
-            rel="noopener noreferrer"
-            href={finalTermsUrl}
-          >
-            {t('legal.terms', 'Terms and Conditions')}
-          </a>
-          <a
-            className="footer-link px-3"
-            target="_blank"
-            rel="noopener noreferrer"
-            href="https://discord.gg/Cn8pWhQRxZ"
-          >
-            {t('footer.discord', 'Discord')}
-          </a>
-          <a
-            className="footer-link px-3"
-            target="_blank"
-            rel="noopener noreferrer"
-            href="https://github.com/Stirling-Tools/Stirling-PDF"
-          >
-            {t('footer.issues', 'GitHub')}
-          </a>
-          <a
-            className="footer-link px-3"
-            target="_blank"
-            rel="noopener noreferrer"
-            href={finalAccessibilityUrl}
-          >
-            {t('legal.accessibility', 'Accessibility')}
-          </a>
-          {isValidLink(finalCookiePolicy) && (
-            <a
-              className="footer-link px-3"
-              target="_blank"
-              rel="noopener noreferrer"
-              href={finalCookiePolicy}
-            >
-              {t('legal.cookie', 'Cookie Policy')}
-            </a>
-          )}
-          {isValidLink(finalImpressum) && (
-            <a
-              className="footer-link px-3"
-              target="_blank"
-              rel="noopener noreferrer"
-              href={finalImpressum}
-            >
-              {t('legal.impressum', 'Impressum')}
-            </a>
-          )}
-          {finalAnalyticsEnabled && (
-            <button
-              className="footer-link px-3"
-              id="cookieBanner"
-              onClick={showCookiePreferences}
-            >
-              {t('legal.showCookieBanner', 'Cookie Preferences')}
-            </button>
-          )}
-        </Flex>
+        )}
+        {finalAnalyticsEnabled && (
+          <button className="footer-link px-3" id="cookieBanner" onClick={showCookiePreferences}>
+            {t("legal.showCookieBanner", "Cookie Preferences")}
+          </button>
+        )}
+      </Flex>
     </div>
   );
 }
diff --git a/frontend/src/core/components/shared/HoverActionMenu.tsx b/frontend/src/core/components/shared/HoverActionMenu.tsx
index eb2304c770..3fc257716a 100644
--- a/frontend/src/core/components/shared/HoverActionMenu.tsx
+++ b/frontend/src/core/components/shared/HoverActionMenu.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
-import { ActionIcon, Tooltip } from '@mantine/core';
-import styles from '@app/components/shared/HoverActionMenu.module.css';
-import { Z_INDEX_HOVER_ACTION_MENU } from '@app/styles/zIndex';
+import React from "react";
+import { ActionIcon, Tooltip } from "@mantine/core";
+import styles from "@app/components/shared/HoverActionMenu.module.css";
+import { Z_INDEX_HOVER_ACTION_MENU } from "@app/styles/zIndex";
 
 export interface HoverAction {
   id: string;
@@ -16,17 +16,12 @@ export interface HoverAction {
 interface HoverActionMenuProps {
   show: boolean;
   actions: HoverAction[];
-  position?: 'inside' | 'outside';
+  position?: "inside" | "outside";
   className?: string;
 }
 
-const HoverActionMenu: React.FC<HoverActionMenuProps> = ({
-  show,
-  actions,
-  position = 'inside',
-  className = ''
-}) => {
-  const visibleActions = actions.filter(action => !action.hidden);
+const HoverActionMenu: React.FC<HoverActionMenuProps> = ({ show, actions, position = "inside", className = "" }) => {
+  const visibleActions = actions.filter((action) => !action.hidden);
 
   if (visibleActions.length === 0) {
     return null;
@@ -34,7 +29,7 @@ const HoverActionMenu: React.FC<HoverActionMenuProps> = ({
 
   return (
     <div
-      className={`${styles.hoverMenu} ${position === 'outside' ? styles.outside : styles.inside} ${className}`}
+      className={`${styles.hoverMenu} ${position === "outside" ? styles.outside : styles.inside} ${className}`}
       style={{ opacity: show ? 1 : 0, zIndex: Z_INDEX_HOVER_ACTION_MENU }}
       onMouseDown={(e) => e.stopPropagation()}
       onMouseUp={(e) => e.stopPropagation()}
@@ -48,7 +43,7 @@ const HoverActionMenu: React.FC<HoverActionMenuProps> = ({
             disabled={action.disabled}
             onClick={action.onClick}
             c={action.color}
-            style={{ color: action.color || 'var(--right-rail-icon)' }}
+            style={{ color: action.color || "var(--right-rail-icon)" }}
           >
             {action.icon}
           </ActionIcon>
diff --git a/frontend/src/core/components/shared/InfoBanner.tsx b/frontend/src/core/components/shared/InfoBanner.tsx
index f64cf6dd2e..983a2a3d07 100644
--- a/frontend/src/core/components/shared/InfoBanner.tsx
+++ b/frontend/src/core/components/shared/InfoBanner.tsx
@@ -1,8 +1,8 @@
-import React, { ReactNode } from 'react';
-import { Paper, Group, Text, Button, ActionIcon, Stack } from '@mantine/core';
-import LocalIcon from '@app/components/shared/LocalIcon';
+import React, { ReactNode } from "react";
+import { Paper, Group, Text, Button, ActionIcon, Stack } from "@mantine/core";
+import LocalIcon from "@app/components/shared/LocalIcon";
 
-type InfoBannerTone = 'info' | 'warning';
+type InfoBannerTone = "info" | "warning";
 
 const toneStyles: Record<
   InfoBannerTone,
@@ -15,18 +15,18 @@ const toneStyles: Record<
   }
 > = {
   info: {
-    background: 'var(--mantine-color-blue-0)',
-    border: 'var(--mantine-color-blue-2)',
-    text: 'var(--mantine-color-blue-9)',
-    icon: 'var(--mantine-color-blue-6)',
-    buttonColor: 'blue',
+    background: "var(--mantine-color-blue-0)",
+    border: "var(--mantine-color-blue-2)",
+    text: "var(--mantine-color-blue-9)",
+    icon: "var(--mantine-color-blue-6)",
+    buttonColor: "blue",
   },
   warning: {
-    background: 'var(--mantine-color-orange-0)',
-    border: 'var(--mantine-color-orange-3)',
-    text: 'var(--mantine-color-orange-9)',
-    icon: 'var(--mantine-color-orange-7)',
-    buttonColor: 'orange',
+    background: "var(--mantine-color-orange-0)",
+    border: "var(--mantine-color-orange-3)",
+    text: "var(--mantine-color-orange-9)",
+    icon: "var(--mantine-color-orange-7)",
+    buttonColor: "orange",
   },
 };
 
@@ -47,7 +47,7 @@ interface InfoBannerProps {
   textColor?: string;
   iconColor?: string;
   buttonColor?: string;
-  buttonVariant?: 'light' | 'filled' | 'white' | 'outline' | 'subtle';
+  buttonVariant?: "light" | "filled" | "white" | "outline" | "subtle";
   minHeight?: number | string;
   closeIconColor?: string;
 }
@@ -60,19 +60,19 @@ export const InfoBanner: React.FC<InfoBannerProps> = ({
   title,
   message,
   buttonText,
-  buttonIcon = 'check-circle-rounded',
+  buttonIcon = "check-circle-rounded",
   onButtonClick,
   onDismiss,
   dismissible = true,
   loading = false,
   show = true,
-  tone = 'info',
+  tone = "info",
   background,
   borderColor,
   textColor,
   iconColor,
   buttonColor,
-  buttonVariant = 'light',
+  buttonVariant = "light",
   minHeight = 56,
   closeIconColor,
 }) => {
@@ -93,11 +93,11 @@ export const InfoBanner: React.FC<InfoBannerProps> = ({
         background: background ?? toneStyle.background,
         borderBottom: `1px solid ${borderColor ?? toneStyle.border}`,
         minHeight,
-        display: 'flex',
-        alignItems: 'center',
+        display: "flex",
+        alignItems: "center",
       }}
     >
-      <Group gap="sm" align="center" wrap="nowrap" justify="space-between" style={{ width: '100%' }}>
+      <Group gap="sm" align="center" wrap="nowrap" justify="space-between" style={{ width: "100%" }}>
         <Group gap="sm" align="center" wrap="nowrap" style={{ flex: 1, minWidth: 0 }}>
           <LocalIcon
             icon={icon}
@@ -111,12 +111,7 @@ export const InfoBanner: React.FC<InfoBannerProps> = ({
                 {title}
               </Text>
             )}
-            <Text
-              fw={title ? 400 : 500}
-              size="sm"
-              style={{ color: textColor ?? toneStyle.text }}
-              lineClamp={2}
-            >
+            <Text fw={title ? 400 : 500} size="sm" style={{ color: textColor ?? toneStyle.text }} lineClamp={2}>
               {message}
             </Text>
           </Stack>
@@ -137,7 +132,7 @@ export const InfoBanner: React.FC<InfoBannerProps> = ({
           {dismissible && (
             <ActionIcon
               variant="subtle"
-              color={closeIconColor ? undefined : 'gray'}
+              color={closeIconColor ? undefined : "gray"}
               size="sm"
               onClick={handleDismiss}
               aria-label="Dismiss"
diff --git a/frontend/src/core/components/shared/LandingActions.tsx b/frontend/src/core/components/shared/LandingActions.tsx
index 249bd59d0f..b64df83a7c 100644
--- a/frontend/src/core/components/shared/LandingActions.tsx
+++ b/frontend/src/core/components/shared/LandingActions.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
-import { Button, Group, Tooltip, ActionIcon } from '@mantine/core';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { useFilesModalContext } from '@app/contexts/FilesModalContext';
-import { useFileActionTerminology } from '@app/hooks/useFileActionTerminology';
-import { useFileActionIcons } from '@app/hooks/useFileActionIcons';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
-import { useIsMobile } from '@app/hooks/useIsMobile';
+import React from "react";
+import { Button, Group, Tooltip, ActionIcon } from "@mantine/core";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { useFilesModalContext } from "@app/contexts/FilesModalContext";
+import { useFileActionTerminology } from "@app/hooks/useFileActionTerminology";
+import { useFileActionIcons } from "@app/hooks/useFileActionIcons";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
+import { useIsMobile } from "@app/hooks/useIsMobile";
 
 type LandingActionsProps = {
   fileInputRef: React.RefObject<HTMLInputElement | null>;
@@ -25,18 +25,24 @@ export function LandingActions({ fileInputRef, onUploadClick, onMobileUploadClic
     <>
       <Group gap="sm" justify="center" wrap="wrap" mb="xs">
         <Button
-          classNames={{ root: 'landing-btn-primary' }}
-          leftSection={<LocalIcon icon={icons.uploadIconName} width="1rem" height="1rem" style={{ color: 'white' }} />}
-          onClick={(e) => { e.stopPropagation(); onUploadClick(); }}
+          classNames={{ root: "landing-btn-primary" }}
+          leftSection={<LocalIcon icon={icons.uploadIconName} width="1rem" height="1rem" style={{ color: "white" }} />}
+          onClick={(e) => {
+            e.stopPropagation();
+            onUploadClick();
+          }}
         >
           {terminology.uploadFromComputer}
         </Button>
 
         <Button
           variant="default"
-          classNames={{ root: 'landing-btn-secondary' }}
+          classNames={{ root: "landing-btn-secondary" }}
           leftSection={<LocalIcon icon="add" width="1rem" height="1rem" className="text-[var(--accent-interactive)]" />}
-          onClick={(e) => { e.stopPropagation(); openFilesModal(); }}
+          onClick={(e) => {
+            e.stopPropagation();
+            openFilesModal();
+          }}
         >
           {terminology.addFiles}
         </Button>
@@ -48,15 +54,18 @@ export function LandingActions({ fileInputRef, onUploadClick, onMobileUploadClic
               variant="default"
               radius="md"
               aria-label={terminology.mobileUpload}
-              classNames={{ root: 'landing-btn-secondary landing-btn-icon' }}
-              onClick={(e) => { e.stopPropagation(); onMobileUploadClick(); }}
+              classNames={{ root: "landing-btn-secondary landing-btn-icon" }}
+              onClick={(e) => {
+                e.stopPropagation();
+                onMobileUploadClick();
+              }}
             >
               <LocalIcon icon="qr-code-rounded" width="1.25rem" height="1.25rem" />
             </ActionIcon>
           </Tooltip>
         )}
       </Group>
-      <input ref={fileInputRef} type="file" multiple onChange={onFileSelect} style={{ display: 'none' }} />
+      <input ref={fileInputRef} type="file" multiple onChange={onFileSelect} style={{ display: "none" }} />
     </>
   );
 }
diff --git a/frontend/src/core/components/shared/LandingDocumentStack.tsx b/frontend/src/core/components/shared/LandingDocumentStack.tsx
index 3fffd48602..b0a37a0f67 100644
--- a/frontend/src/core/components/shared/LandingDocumentStack.tsx
+++ b/frontend/src/core/components/shared/LandingDocumentStack.tsx
@@ -19,9 +19,9 @@ export function LandingDocumentStack() {
 
       <div className="landing-sheet landing-sheet--front">
         <div className="landing-sheet-header">
-          <div className="landing-sheet-dot" style={{ backgroundColor: 'rgba(255,255,255,0.35)' }} />
-          <div className="landing-sheet-dot" style={{ backgroundColor: 'rgba(255,255,255,0.25)' }} />
-          <div className="landing-sheet-dot" style={{ backgroundColor: 'rgba(255,255,255,0.15)' }} />
+          <div className="landing-sheet-dot" style={{ backgroundColor: "rgba(255,255,255,0.35)" }} />
+          <div className="landing-sheet-dot" style={{ backgroundColor: "rgba(255,255,255,0.25)" }} />
+          <div className="landing-sheet-dot" style={{ backgroundColor: "rgba(255,255,255,0.15)" }} />
         </div>
         <div className="landing-sheet-body">
           <div className="landing-bar landing-bar--strong" style={bar(100, 10, 10)} />
diff --git a/frontend/src/core/components/shared/LandingPage.tsx b/frontend/src/core/components/shared/LandingPage.tsx
index 1d9b878f46..46675255f3 100644
--- a/frontend/src/core/components/shared/LandingPage.tsx
+++ b/frontend/src/core/components/shared/LandingPage.tsx
@@ -1,14 +1,14 @@
-import React, { useState } from 'react';
-import { Container } from '@mantine/core';
-import { Dropzone } from '@mantine/dropzone';
-import { useTranslation } from 'react-i18next';
-import { useFileHandler } from '@app/hooks/useFileHandler';
-import { useFileActionTerminology } from '@app/hooks/useFileActionTerminology';
-import MobileUploadModal from '@app/components/shared/MobileUploadModal';
-import { openFilesFromDisk } from '@app/services/openFilesFromDisk';
-import { LandingDocumentStack } from '@app/components/shared/LandingDocumentStack';
-import { LandingActions } from '@app/components/shared/LandingActions';
-import '@app/components/shared/LandingPage.css';
+import React, { useState } from "react";
+import { Container } from "@mantine/core";
+import { Dropzone } from "@mantine/dropzone";
+import { useTranslation } from "react-i18next";
+import { useFileHandler } from "@app/hooks/useFileHandler";
+import { useFileActionTerminology } from "@app/hooks/useFileActionTerminology";
+import MobileUploadModal from "@app/components/shared/MobileUploadModal";
+import { openFilesFromDisk } from "@app/services/openFilesFromDisk";
+import { LandingDocumentStack } from "@app/components/shared/LandingDocumentStack";
+import { LandingActions } from "@app/components/shared/LandingActions";
+import "@app/components/shared/LandingPage.css";
 
 const LandingPage = () => {
   const { t } = useTranslation();
@@ -36,7 +36,7 @@ const LandingPage = () => {
     if (files.length > 0) {
       await addFiles(files);
     }
-    event.target.value = '';
+    event.target.value = "";
   };
 
   const handleFilesReceivedFromMobile = async (files: File[]) => {
@@ -46,7 +46,7 @@ const LandingPage = () => {
   };
 
   return (
-    <Container size="70rem" p={0} h="100%" className="flex min-h-0 flex-col" style={{ position: 'relative' }}>
+    <Container size="70rem" p={0} h="100%" className="flex min-h-0 flex-col" style={{ position: "relative" }}>
       <Dropzone
         onDrop={handleFileDrop}
         multiple
@@ -56,19 +56,19 @@ const LandingPage = () => {
         className="flex min-h-0 flex-1 cursor-default flex-col items-center justify-center border-none bg-transparent px-4 py-8 shadow-none outline-none"
         styles={{
           root: {
-            border: 'none !important',
-            backgroundColor: 'transparent',
-            overflow: 'visible',
-            '&[data-accept]': { outline: '2px dashed var(--accent-interactive)', outlineOffset: 4 },
-            '&[data-reject]': { outline: '2px dashed var(--mantine-color-red-6)', outlineOffset: 4 },
+            border: "none !important",
+            backgroundColor: "transparent",
+            overflow: "visible",
+            "&[data-accept]": { outline: "2px dashed var(--accent-interactive)", outlineOffset: 4 },
+            "&[data-reject]": { outline: "2px dashed var(--mantine-color-red-6)", outlineOffset: 4 },
           },
-          inner: { overflow: 'visible', display: 'flex', flexDirection: 'column', alignItems: 'center', width: '100%' },
+          inner: { overflow: "visible", display: "flex", flexDirection: "column", alignItems: "center", width: "100%" },
         }}
       >
         <LandingDocumentStack />
 
-        <h1 className="landing-title">{t('landing.heroTitle', 'Stirling PDF')}</h1>
-        <p className="landing-subtitle">{t('landing.heroSubtitle', 'Drop in or add an existing PDF to get started.')}</p>
+        <h1 className="landing-title">{t("landing.heroTitle", "Stirling PDF")}</h1>
+        <p className="landing-subtitle">{t("landing.heroSubtitle", "Drop in or add an existing PDF to get started.")}</p>
 
         <LandingActions
           fileInputRef={fileInputRef}
diff --git a/frontend/src/core/components/shared/LanguageSelector.module.css b/frontend/src/core/components/shared/LanguageSelector.module.css
index 431f438069..8f2248687b 100644
--- a/frontend/src/core/components/shared/LanguageSelector.module.css
+++ b/frontend/src/core/components/shared/LanguageSelector.module.css
@@ -18,11 +18,11 @@
   .languageGrid {
     grid-template-columns: repeat(2, 1fr);
   }
-  
+
   .languageItem:nth-child(4n) {
     border-right: 2px solid var(--mantine-color-gray-3);
   }
-  
+
   .languageItem:nth-child(2n) {
     border-right: none;
   }
@@ -32,11 +32,11 @@
   .languageGrid {
     grid-template-columns: repeat(3, 1fr);
   }
-  
+
   .languageItem:nth-child(4n) {
     border-right: 2px solid var(--mantine-color-gray-3);
   }
-  
+
   .languageItem:nth-child(3n) {
     border-right: none;
   }
@@ -85,4 +85,4 @@
     height: 100px;
     opacity: 0;
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/core/components/shared/LanguageSelector.tsx b/frontend/src/core/components/shared/LanguageSelector.tsx
index 66aa17c8a8..b6b8b29ff4 100644
--- a/frontend/src/core/components/shared/LanguageSelector.tsx
+++ b/frontend/src/core/components/shared/LanguageSelector.tsx
@@ -1,15 +1,15 @@
-import React, { useState, useEffect } from 'react';
-import { Menu, Button, ActionIcon } from '@mantine/core';
-import { Tooltip } from '@app/components/shared/Tooltip';
-import { useTranslation } from 'react-i18next';
-import { supportedLanguages, setUserLanguage } from '@app/i18n';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import styles from '@app/components/shared/LanguageSelector.module.css';
-import { Z_INDEX_CONFIG_MODAL } from '@app/styles/zIndex';
+import React, { useState, useEffect } from "react";
+import { Menu, Button, ActionIcon } from "@mantine/core";
+import { Tooltip } from "@app/components/shared/Tooltip";
+import { useTranslation } from "react-i18next";
+import { supportedLanguages, setUserLanguage } from "@app/i18n";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import styles from "@app/components/shared/LanguageSelector.module.css";
+import { Z_INDEX_CONFIG_MODAL } from "@app/styles/zIndex";
 
 // Types
 interface LanguageSelectorProps {
-  position?: React.ComponentProps<typeof Menu>['position'];
+  position?: React.ComponentProps<typeof Menu>["position"];
   offset?: number;
   compact?: boolean; // icon-only trigger
   tooltip?: string; // tooltip text for compact mode
@@ -48,12 +48,12 @@ const LanguageItem: React.FC<LanguageItemProps> = ({
   rippleEffect,
   pendingLanguage,
   compact,
-  disabled = false
+  disabled = false,
 }) => {
   const { t } = useTranslation();
 
   const labelText = option.label;
-  const comingSoonText = t('comingSoon', 'Coming soon');
+  const comingSoonText = t("comingSoon", "Coming soon");
 
   const label = disabled ? (
     <Tooltip content={comingSoonText} position="left" arrow>
@@ -68,7 +68,7 @@ const LanguageItem: React.FC<LanguageItemProps> = ({
       className={styles.languageItem}
       style={{
         opacity: animationTriggered ? 1 : 0,
-        transform: animationTriggered ? 'translateY(0px)' : 'translateY(8px)',
+        transform: animationTriggered ? "translateY(0px)" : "translateY(8px)",
         transition: `opacity 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94) ${index * 0.01}s, transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94) ${index * 0.01}s`,
       }}
     >
@@ -81,40 +81,42 @@ const LanguageItem: React.FC<LanguageItemProps> = ({
         disabled={disabled}
         styles={{
           root: {
-            borderRadius: '4px',
-            minHeight: '32px',
-            padding: '4px 8px',
-            justifyContent: 'flex-start',
-            position: 'relative',
-            overflow: 'hidden',
+            borderRadius: "4px",
+            minHeight: "32px",
+            padding: "4px 8px",
+            justifyContent: "flex-start",
+            position: "relative",
+            overflow: "hidden",
             backgroundColor: isSelected
-              ? 'light-dark(var(--mantine-color-blue-1), var(--mantine-color-blue-8))'
-              : 'transparent',
+              ? "light-dark(var(--mantine-color-blue-1), var(--mantine-color-blue-8))"
+              : "transparent",
             color: disabled
-              ? 'light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3))'
+              ? "light-dark(var(--mantine-color-gray-5), var(--mantine-color-dark-3))"
               : isSelected
-              ? 'light-dark(var(--mantine-color-blue-9), var(--mantine-color-white))'
-              : 'light-dark(var(--mantine-color-gray-7), var(--mantine-color-white))',
-            transition: 'all 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
-            cursor: disabled ? 'not-allowed' : 'pointer',
-            '&:hover': !disabled ? {
-              backgroundColor: isSelected
-                ? 'light-dark(var(--mantine-color-blue-2), var(--mantine-color-blue-7))'
-                : 'light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5))',
-              transform: 'translateY(-1px)',
-              boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
-            } : {}
+                ? "light-dark(var(--mantine-color-blue-9), var(--mantine-color-white))"
+                : "light-dark(var(--mantine-color-gray-7), var(--mantine-color-white))",
+            transition: "all 0.12s cubic-bezier(0.25, 0.46, 0.45, 0.94)",
+            cursor: disabled ? "not-allowed" : "pointer",
+            "&:hover": !disabled
+              ? {
+                  backgroundColor: isSelected
+                    ? "light-dark(var(--mantine-color-blue-2), var(--mantine-color-blue-7))"
+                    : "light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5))",
+                  transform: "translateY(-1px)",
+                  boxShadow: "0 2px 8px rgba(0, 0, 0, 0.1)",
+                }
+              : {},
           },
           label: {
-            fontSize: '13px',
+            fontSize: "13px",
             fontWeight: isSelected ? 600 : 400,
-            textAlign: 'left',
-            overflow: 'hidden',
-            textOverflow: 'ellipsis',
-            whiteSpace: 'nowrap',
-            position: 'relative',
+            textAlign: "left",
+            overflow: "hidden",
+            textOverflow: "ellipsis",
+            whiteSpace: "nowrap",
+            position: "relative",
             zIndex: 2,
-          }
+          },
         }}
       >
         {label}
@@ -122,16 +124,16 @@ const LanguageItem: React.FC<LanguageItemProps> = ({
           <div
             key={rippleEffect.key}
             style={{
-              position: 'absolute',
+              position: "absolute",
               left: rippleEffect.x,
               top: rippleEffect.y,
               width: 0,
               height: 0,
-              borderRadius: '50%',
-              backgroundColor: 'var(--mantine-color-blue-4)',
+              borderRadius: "50%",
+              backgroundColor: "var(--mantine-color-blue-4)",
               opacity: 0.6,
-              transform: 'translate(-50%, -50%)',
-              animation: 'ripple-expand 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
+              transform: "translate(-50%, -50%)",
+              animation: "ripple-expand 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94)",
               zIndex: 1,
             }}
           />
@@ -155,10 +157,10 @@ const RippleStyles: React.FC = () => (
 
 // Main component
 const LanguageSelector: React.FC<LanguageSelectorProps> = ({
-  position = 'bottom-start',
+  position = "bottom-start",
   offset = 8,
   compact = false,
-  tooltip
+  tooltip,
 }) => {
   const { i18n, ready } = useTranslation();
   const [opened, setOpened] = useState(false);
@@ -183,8 +185,7 @@ const LanguageSelector: React.FC<LanguageSelectorProps> = ({
 
   // Get the filtered list of supported languages from i18n
   // This respects server config (ui.languages) applied by AppConfigLoader
-  const allowedLanguages = (i18n.options.supportedLngs as string[] || [])
-    .filter(lang => lang !== 'cimode'); // Exclude i18next debug language
+  const allowedLanguages = ((i18n.options.supportedLngs as string[]) || []).filter((lang) => lang !== "cimode"); // Exclude i18next debug language
 
   const languageOptions: LanguageOption[] = Object.entries(supportedLanguages)
     .filter(([code]) => allowedLanguages.length === 0 || allowedLanguages.includes(code))
@@ -196,13 +197,9 @@ const LanguageSelector: React.FC<LanguageSelectorProps> = ({
 
   // Calculate dropdown width and grid columns based on number of languages
   // 2-4: 300px/2 cols, 5-9: 400px/3 cols, 10+: 600px/4 cols
-  const dropdownWidth = languageOptions.length <= 4 ? 300
-    : languageOptions.length <= 9 ? 400
-    : 600;
+  const dropdownWidth = languageOptions.length <= 4 ? 300 : languageOptions.length <= 9 ? 400 : 600;
 
-  const gridColumns = languageOptions.length <= 4 ? 2
-    : languageOptions.length <= 9 ? 3
-    : 4;
+  const gridColumns = languageOptions.length <= 4 ? 2 : languageOptions.length <= 9 ? 3 : 4;
 
   const handleLanguageChange = (value: string, event: React.MouseEvent) => {
     // Create ripple effect at click position (only for button mode)
@@ -229,16 +226,15 @@ const LanguageSelector: React.FC<LanguageSelectorProps> = ({
         setTimeout(() => setRippleEffect(null), 50);
 
         // Force a full reload so RTL/LTR layout and tooltips re-evaluate correctly
-        if (typeof window !== 'undefined') {
+        if (typeof window !== "undefined") {
           window.location.reload();
         }
       }, 150);
     }, 100);
   };
 
-  const currentLanguage = supportedLanguages[i18n.language as keyof typeof supportedLanguages] ||
-                         supportedLanguages['en-GB'] ||
-                         'English'; // Fallback if supportedLanguages lookup fails
+  const currentLanguage =
+    supportedLanguages[i18n.language as keyof typeof supportedLanguages] || supportedLanguages["en-GB"] || "English"; // Fallback if supportedLanguages lookup fails
 
   // Hide the language selector if there's only one language option
   // (no point showing a selector when there's nothing to select)
@@ -258,9 +254,9 @@ const LanguageSelector: React.FC<LanguageSelectorProps> = ({
         zIndex={Z_INDEX_CONFIG_MODAL}
         withinPortal
         transitionProps={{
-          transition: 'scale-y',
+          transition: "scale-y",
           duration: 120,
-          timingFunction: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)'
+          timingFunction: "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
         }}
       >
         <Menu.Target>
@@ -272,11 +268,11 @@ const LanguageSelector: React.FC<LanguageSelectorProps> = ({
               title={!opened && tooltip ? tooltip : undefined}
               styles={{
                 root: {
-                  color: 'var(--right-rail-icon)',
-                  '&:hover': {
-                    backgroundColor: 'light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5))',
-                  }
-                }
+                  color: "var(--right-rail-icon)",
+                  "&:hover": {
+                    backgroundColor: "light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5))",
+                  },
+                },
               }}
             >
               <LocalIcon icon="language" width="1.5rem" height="1.5rem" />
@@ -288,50 +284,45 @@ const LanguageSelector: React.FC<LanguageSelectorProps> = ({
               leftSection={<LocalIcon icon="language" width="1.5rem" height="1.5rem" />}
               styles={{
                 root: {
-                  border: 'none',
-                  color: 'light-dark(var(--mantine-color-gray-7), var(--mantine-color-gray-1))',
-                  transition: 'background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
-                  '&:hover': {
-                    backgroundColor: 'light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5))',
-                  }
+                  border: "none",
+                  color: "light-dark(var(--mantine-color-gray-7), var(--mantine-color-gray-1))",
+                  transition: "background-color 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)",
+                  "&:hover": {
+                    backgroundColor: "light-dark(var(--mantine-color-gray-1), var(--mantine-color-dark-5))",
+                  },
                 },
-                label: { fontSize: '12px', fontWeight: 500 }
+                label: { fontSize: "12px", fontWeight: 500 },
               }}
             >
-              <span className={styles.languageText}>
-                {currentLanguage}
-              </span>
+              <span className={styles.languageText}>{currentLanguage}</span>
             </Button>
           )}
         </Menu.Target>
 
         <Menu.Dropdown
           style={{
-            padding: '12px',
-            borderRadius: '8px',
-            boxShadow: '0 4px 12px rgba(0, 0, 0, 0.1)',
-            backgroundColor: 'light-dark(var(--mantine-color-white), var(--mantine-color-dark-6))',
-            border: 'light-dark(1px solid var(--mantine-color-gray-3), 1px solid var(--mantine-color-dark-4))',
+            padding: "12px",
+            borderRadius: "8px",
+            boxShadow: "0 4px 12px rgba(0, 0, 0, 0.1)",
+            backgroundColor: "light-dark(var(--mantine-color-white), var(--mantine-color-dark-6))",
+            border: "light-dark(1px solid var(--mantine-color-gray-3), 1px solid var(--mantine-color-dark-4))",
           }}
         >
-          <div
-            className={styles.languageGrid}
-            style={{ gridTemplateColumns: `repeat(${gridColumns}, 1fr)` }}
-          >
-              {languageOptions.map((option, index) => (
-                  <LanguageItem
-                    key={option.value}
-                    option={option}
-                    index={index}
-                    animationTriggered={animationTriggered}
-                    isSelected={option.value === i18n.language}
-                    onClick={(event) => handleLanguageChange(option.value, event)}
-                    rippleEffect={rippleEffect}
-                    pendingLanguage={pendingLanguage}
-                    compact={compact}
-                    disabled={false}
-                  />
-                ))}
+          <div className={styles.languageGrid} style={{ gridTemplateColumns: `repeat(${gridColumns}, 1fr)` }}>
+            {languageOptions.map((option, index) => (
+              <LanguageItem
+                key={option.value}
+                option={option}
+                index={index}
+                animationTriggered={animationTriggered}
+                isSelected={option.value === i18n.language}
+                onClick={(event) => handleLanguageChange(option.value, event)}
+                rippleEffect={rippleEffect}
+                pendingLanguage={pendingLanguage}
+                compact={compact}
+                disabled={false}
+              />
+            ))}
           </div>
         </Menu.Dropdown>
       </Menu>
diff --git a/frontend/src/core/components/shared/LocalIcon.tsx b/frontend/src/core/components/shared/LocalIcon.tsx
index ff7ca493af..5b12dc1fd9 100644
--- a/frontend/src/core/components/shared/LocalIcon.tsx
+++ b/frontend/src/core/components/shared/LocalIcon.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import { addCollection, Icon } from '@iconify/react';
-import iconSet from '../../../assets/material-symbols-icons.json'; // eslint-disable-line no-restricted-imports -- Outside app paths
+import React from "react";
+import { addCollection, Icon } from "@iconify/react";
+import iconSet from "../../../assets/material-symbols-icons.json"; // eslint-disable-line no-restricted-imports -- Outside app paths
 
 // Load icons synchronously at import time - guaranteed to be ready on first render
 let iconsLoaded = false;
@@ -13,7 +13,7 @@ try {
     console.info(`✅ Local icons loaded: ${localIconCount} icons (${Math.round(JSON.stringify(iconSet).length / 1024)}KB)`);
   }
 } catch {
-  console.info('ℹ️  Local icons not available - using CDN fallback');
+  console.info("ℹ️  Local icons not available - using CDN fallback");
 }
 
 interface LocalIconProps {
@@ -30,17 +30,15 @@ interface LocalIconProps {
  */
 export const LocalIcon: React.FC<LocalIconProps> = ({ icon, width, height, style, ...props }) => {
   // Convert our icon naming convention to the local collection format
-  const iconName = icon.startsWith('material-symbols:')
-    ? icon
-    : `material-symbols:${icon}`;
+  const iconName = icon.startsWith("material-symbols:") ? icon : `material-symbols:${icon}`;
 
   // Development logging (only in dev mode)
-  if (process.env.NODE_ENV === 'development') {
+  if (process.env.NODE_ENV === "development") {
     const logKey = `icon-${iconName}`;
     if (!sessionStorage.getItem(logKey)) {
-      const source = iconsLoaded ? 'local' : 'CDN';
+      const source = iconsLoaded ? "local" : "CDN";
       console.debug(`🎯 Icon: ${iconName} (${source})`);
-      sessionStorage.setItem(logKey, 'logged');
+      sessionStorage.setItem(logKey, "logged");
     }
   }
 
@@ -48,10 +46,10 @@ export const LocalIcon: React.FC<LocalIconProps> = ({ icon, width, height, style
 
   // Use width if provided, otherwise fall back to height
   const size = width || height;
-  if (size && typeof size === 'string') {
+  if (size && typeof size === "string") {
     // If it's a CSS unit string (like '1.5rem'), use it as fontSize
     iconStyle.fontSize = size;
-  } else if (typeof size === 'number') {
+  } else if (typeof size === "number") {
     // If it's a number, treat it as pixels
     iconStyle.fontSize = `${size}px`;
   }
diff --git a/frontend/src/core/components/shared/MobileUploadModal.tsx b/frontend/src/core/components/shared/MobileUploadModal.tsx
index 275b2cb0d9..4358003cac 100644
--- a/frontend/src/core/components/shared/MobileUploadModal.tsx
+++ b/frontend/src/core/components/shared/MobileUploadModal.tsx
@@ -1,16 +1,16 @@
-import { useEffect, useCallback, useState, useRef } from 'react';
-import { Modal, Stack, Text, Badge, Box, Alert } from '@mantine/core';
-import { QRCodeSVG } from 'qrcode.react';
-import { useTranslation } from 'react-i18next';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
-import InfoRoundedIcon from '@mui/icons-material/InfoRounded';
-import ErrorRoundedIcon from '@mui/icons-material/ErrorRounded';
-import CheckRoundedIcon from '@mui/icons-material/CheckRounded';
-import WarningRoundedIcon from '@mui/icons-material/WarningRounded';
-import { Z_INDEX_OVER_FILE_MANAGER_MODAL } from '@app/styles/zIndex';
-import { withBasePath } from '@app/constants/app';
-import { convertImageToPdf, isImageFile } from '@app/utils/imageToPdfUtils';
-import apiClient from '@app/services/apiClient';
+import { useEffect, useCallback, useState, useRef } from "react";
+import { Modal, Stack, Text, Badge, Box, Alert } from "@mantine/core";
+import { QRCodeSVG } from "qrcode.react";
+import { useTranslation } from "react-i18next";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
+import InfoRoundedIcon from "@mui/icons-material/InfoRounded";
+import ErrorRoundedIcon from "@mui/icons-material/ErrorRounded";
+import CheckRoundedIcon from "@mui/icons-material/CheckRounded";
+import WarningRoundedIcon from "@mui/icons-material/WarningRounded";
+import { Z_INDEX_OVER_FILE_MANAGER_MODAL } from "@app/styles/zIndex";
+import { withBasePath } from "@app/constants/app";
+import { convertImageToPdf, isImageFile } from "@app/utils/imageToPdfUtils";
+import apiClient from "@app/services/apiClient";
 
 interface MobileUploadModalProps {
   opened: boolean;
@@ -21,9 +21,9 @@ interface MobileUploadModalProps {
 // Generate a cryptographically secure UUID v4-like session ID
 function generateSessionId(): string {
   // Use Web Crypto API for cryptographically secure random values
-  const cryptoObj = typeof crypto !== 'undefined' ? crypto : (window as any).crypto;
+  const cryptoObj = typeof crypto !== "undefined" ? crypto : (window as any).crypto;
 
-  if (cryptoObj && typeof cryptoObj.getRandomValues === 'function') {
+  if (cryptoObj && typeof cryptoObj.getRandomValues === "function") {
     const bytes = new Uint8Array(16);
     cryptoObj.getRandomValues(bytes);
 
@@ -32,19 +32,19 @@ function generateSessionId(): string {
     bytes[8] = (bytes[8] & 0x3f) | 0x80; // variant 10
 
     // Convert bytes to hex string in UUID format
-    const hex = Array.from(bytes, (b) => b.toString(16).padStart(2, '0'));
+    const hex = Array.from(bytes, (b) => b.toString(16).padStart(2, "0"));
     return [
-      hex.slice(0, 4).join(''),
-      hex.slice(4, 6).join(''),
-      hex.slice(6, 8).join(''),
-      hex.slice(8, 10).join(''),
-      hex.slice(10, 16).join(''),
-    ].join('-');
+      hex.slice(0, 4).join(""),
+      hex.slice(4, 6).join(""),
+      hex.slice(6, 8).join(""),
+      hex.slice(8, 10).join(""),
+      hex.slice(10, 16).join(""),
+    ].join("-");
   }
 
   // If Web Crypto is not available, fail fast rather than using insecure randomness
-  console.error('Web Crypto API not available. Cannot generate secure session ID.');
-  throw new Error('Web Crypto API not available. Cannot generate secure session ID.');
+  console.error("Web Crypto API not available. Cannot generate secure session ID.");
+  throw new Error("Web Crypto API not available. Cannot generate secure session ID.");
 }
 
 interface SessionInfo {
@@ -76,30 +76,37 @@ export default function MobileUploadModal({ opened, onClose, onFilesReceived }:
 
   // Use configured frontendUrl if set, otherwise use current origin
   // Combine with base path and mobile-scanner route
-  const baseUrl = localStorage.getItem('server_url') || '';
+  const baseUrl = localStorage.getItem("server_url") || "";
   const frontendUrl = baseUrl || config?.frontendUrl || window.location.origin;
-  const mobileUrl = `${frontendUrl}${withBasePath('/mobile-scanner')}?session=${sessionId}`;
+  const mobileUrl = `${frontendUrl}${withBasePath("/mobile-scanner")}?session=${sessionId}`;
 
   // Create session on backend
-  const createSession = useCallback(async (newSessionId: string) => {
-    try {
-      const response = await apiClient.post<SessionInfo>(`/api/v1/mobile-scanner/create-session/${newSessionId}`, undefined, {
-        responseType: 'json',
-      });
+  const createSession = useCallback(
+    async (newSessionId: string) => {
+      try {
+        const response = await apiClient.post<SessionInfo>(
+          `/api/v1/mobile-scanner/create-session/${newSessionId}`,
+          undefined,
+          {
+            responseType: "json",
+          },
+        );
 
-      if (!response.status || response.status !== 200) {
-        throw new Error('Failed to create session');
+        if (!response.status || response.status !== 200) {
+          throw new Error("Failed to create session");
+        }
+
+        const data = response.data;
+        setSessionInfo(data);
+        setError(null);
+        console.log("[MobileUploadModal] Session created:", data);
+      } catch (err) {
+        console.error("[MobileUploadModal] Failed to create session:", err);
+        setError(t("mobileUpload.sessionCreateError", "Failed to create session"));
       }
-
-      const data = response.data;
-      setSessionInfo(data);
-      setError(null);
-      console.log('[MobileUploadModal] Session created:', data);
-    } catch (err) {
-      console.error('[MobileUploadModal] Failed to create session:', err);
-      setError(t('mobileUpload.sessionCreateError', 'Failed to create session'));
-    }
-  }, [t]);
+    },
+    [t],
+  );
 
   // Regenerate session (when expired or warned)
   const regenerateSession = useCallback(() => {
@@ -117,7 +124,7 @@ export default function MobileUploadModal({ opened, onClose, onFilesReceived }:
     try {
       const response = await apiClient.get(`/api/v1/mobile-scanner/files/${sessionId}`);
       if (!response.status || response.status !== 200) {
-        throw new Error('Failed to check for files');
+        throw new Error("Failed to check for files");
       }
 
       const data = response.data;
@@ -130,28 +137,29 @@ export default function MobileUploadModal({ opened, onClose, onFilesReceived }:
         for (const fileMetadata of newFiles) {
           try {
             const downloadResponse = await apiClient.get(
-              `/api/v1/mobile-scanner/download/${sessionId}/${fileMetadata.filename}`, {
-                responseType: 'blob',
-              }
+              `/api/v1/mobile-scanner/download/${sessionId}/${fileMetadata.filename}`,
+              {
+                responseType: "blob",
+              },
             );
 
             if (downloadResponse.status === 200) {
               const blob = downloadResponse.data;
               let file = new File([blob], fileMetadata.filename, {
-                type: fileMetadata.contentType || 'image/jpeg'
+                type: fileMetadata.contentType || "image/jpeg",
               });
 
               // Convert images to PDF if enabled
               if (isImageFile(file) && config?.mobileScannerConvertToPdf !== false) {
                 try {
                   file = await convertImageToPdf(file, {
-                    imageResolution: config?.mobileScannerImageResolution as 'full' | 'reduced' | undefined,
-                    pageFormat: config?.mobileScannerPageFormat as 'keep' | 'A4' | 'letter' | undefined,
+                    imageResolution: config?.mobileScannerImageResolution as "full" | "reduced" | undefined,
+                    pageFormat: config?.mobileScannerPageFormat as "keep" | "A4" | "letter" | undefined,
                     stretchToFit: config?.mobileScannerStretchToFit,
                   });
-                  console.log('[MobileUploadModal] Converted image to PDF:', file.name);
+                  console.log("[MobileUploadModal] Converted image to PDF:", file.name);
                 } catch (convertError) {
-                  console.warn('[MobileUploadModal] Failed to convert image to PDF, using original file:', convertError);
+                  console.warn("[MobileUploadModal] Failed to convert image to PDF, using original file:", convertError);
                   // Continue with original image file if conversion fails
                 }
               }
@@ -161,7 +169,7 @@ export default function MobileUploadModal({ opened, onClose, onFilesReceived }:
               onFilesReceived([file]);
             }
           } catch (err) {
-            console.error('[MobileUploadModal] Failed to download file:', fileMetadata.filename, err);
+            console.error("[MobileUploadModal] Failed to download file:", fileMetadata.filename, err);
           }
         }
 
@@ -169,14 +177,14 @@ export default function MobileUploadModal({ opened, onClose, onFilesReceived }:
         // This ensures files are only on server for ~1 second
         try {
           await apiClient.delete(`/api/v1/mobile-scanner/session/${sessionId}`);
-          console.log('[MobileUploadModal] Session cleaned up after file download');
+          console.log("[MobileUploadModal] Session cleaned up after file download");
         } catch (cleanupErr) {
-          console.warn('[MobileUploadModal] Failed to cleanup session after download:', cleanupErr);
+          console.warn("[MobileUploadModal] Failed to cleanup session after download:", cleanupErr);
         }
       }
     } catch (err) {
-      console.error('[MobileUploadModal] Error polling for files:', err);
-      setError(t('mobileUpload.pollingError', 'Error checking for files'));
+      console.error("[MobileUploadModal] Error polling for files:", err);
+      setError(t("mobileUpload.pollingError", "Error checking for files"));
     }
   }, [opened, sessionId, onFilesReceived, t]);
 
@@ -201,9 +209,10 @@ export default function MobileUploadModal({ opened, onClose, onFilesReceived }:
     processedFiles.current.clear();
 
     return () => {
-      console.log('Cleaning up session on unmount/close:', sessionId);
-      apiClient.delete(`/api/v1/mobile-scanner/session/${sessionId}`)
-        .catch(err => console.warn('[MobileUploadModal] Cleanup failed:', err));
+      console.log("Cleaning up session on unmount/close:", sessionId);
+      apiClient
+        .delete(`/api/v1/mobile-scanner/session/${sessionId}`)
+        .catch((err) => console.warn("[MobileUploadModal] Cleanup failed:", err));
     };
   }, [opened, sessionId, createSession]);
 
@@ -267,7 +276,7 @@ export default function MobileUploadModal({ opened, onClose, onFilesReceived }:
     <Modal
       opened={opened}
       onClose={onClose}
-      title={t('mobileUpload.title', 'Upload from Mobile')}
+      title={t("mobileUpload.title", "Upload from Mobile")}
       centered
       size="md"
       radius="lg"
@@ -275,40 +284,33 @@ export default function MobileUploadModal({ opened, onClose, onFilesReceived }:
       overlayProps={{ opacity: 0.35, blur: 2 }}
       styles={{
         body: {
-          paddingTop: '1.5rem',
+          paddingTop: "1.5rem",
         },
       }}
     >
       <Stack gap="md">
-        <Alert
-          icon={<InfoRoundedIcon style={{ fontSize: '1rem' }} />}
-          color="blue"
-          variant="light"
-        >
+        <Alert icon={<InfoRoundedIcon style={{ fontSize: "1rem" }} />} color="blue" variant="light">
           <Text size="sm">
             {config?.mobileScannerConvertToPdf !== false
               ? t(
-                  'mobileUpload.description',
-                  'Scan this QR code with your mobile device to upload photos. Images will be automatically converted to PDF.'
+                  "mobileUpload.description",
+                  "Scan this QR code with your mobile device to upload photos. Images will be automatically converted to PDF.",
                 )
-              : t(
-                  'mobileUpload.descriptionNoConvert',
-                  'Scan this QR code with your mobile device to upload photos.'
-                )}
+              : t("mobileUpload.descriptionNoConvert", "Scan this QR code with your mobile device to upload photos.")}
           </Text>
         </Alert>
 
         {showExpiryWarning && timeRemaining !== null && (
           <Alert
-            icon={<WarningRoundedIcon style={{ fontSize: '1rem' }} />}
-            title={t('mobileUpload.expiryWarning', 'Session Expiring Soon')}
+            icon={<WarningRoundedIcon style={{ fontSize: "1rem" }} />}
+            title={t("mobileUpload.expiryWarning", "Session Expiring Soon")}
             color="orange"
           >
             <Text size="sm">
               {t(
-                'mobileUpload.expiryWarningMessage',
-                'This QR code will expire in {{seconds}} seconds. A new code will be generated automatically.',
-                { seconds: Math.ceil(timeRemaining / 1000) }
+                "mobileUpload.expiryWarningMessage",
+                "This QR code will expire in {{seconds}} seconds. A new code will be generated automatically.",
+                { seconds: Math.ceil(timeRemaining / 1000) },
               )}
             </Text>
           </Alert>
@@ -316,41 +318,41 @@ export default function MobileUploadModal({ opened, onClose, onFilesReceived }:
 
         {error && (
           <Alert
-            icon={<ErrorRoundedIcon style={{ fontSize: '1rem' }} />}
-            title={t('mobileUpload.error', 'Connection Error')}
+            icon={<ErrorRoundedIcon style={{ fontSize: "1rem" }} />}
+            title={t("mobileUpload.error", "Connection Error")}
             color="red"
           >
             <Text size="sm">{error}</Text>
           </Alert>
         )}
 
-        <Box style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1rem' }}>
+        <Box style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "1rem" }}>
           <Box
             style={{
-              padding: '1.5rem',
-              background: 'white',
-              borderRadius: '8px',
-              boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+              padding: "1.5rem",
+              background: "white",
+              borderRadius: "8px",
+              boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
             }}
           >
             <QRCodeSVG value={mobileUrl} size={256} level="H" includeMargin />
           </Box>
 
           {filesReceived > 0 && (
-            <Badge variant="filled" color="green" size="lg" leftSection={<CheckRoundedIcon style={{ fontSize: '1rem' }} />}>
-              {t('mobileUpload.filesReceived', '{{count}} file(s) received', { count: filesReceived })}
+            <Badge variant="filled" color="green" size="lg" leftSection={<CheckRoundedIcon style={{ fontSize: "1rem" }} />}>
+              {t("mobileUpload.filesReceived", "{{count}} file(s) received", { count: filesReceived })}
             </Badge>
           )}
 
-          <Text size="xs" c="dimmed" ta="center" style={{ maxWidth: '300px' }}>
+          <Text size="xs" c="dimmed" ta="center" style={{ maxWidth: "300px" }}>
             {config?.mobileScannerConvertToPdf !== false
               ? t(
-                  'mobileUpload.instructions',
-                  'Open the camera app on your phone and scan this code. Images will be automatically converted to PDF.'
+                  "mobileUpload.instructions",
+                  "Open the camera app on your phone and scan this code. Images will be automatically converted to PDF.",
                 )
               : t(
-                  'mobileUpload.instructionsNoConvert',
-                  'Open the camera app on your phone and scan this code. Files will be uploaded through the server.'
+                  "mobileUpload.instructionsNoConvert",
+                  "Open the camera app on your phone and scan this code. Files will be uploaded through the server.",
                 )}
           </Text>
 
@@ -358,9 +360,9 @@ export default function MobileUploadModal({ opened, onClose, onFilesReceived }:
             size="xs"
             c="dimmed"
             style={{
-              wordBreak: 'break-all',
-              textAlign: 'center',
-              fontFamily: 'monospace',
+              wordBreak: "break-all",
+              textAlign: "center",
+              fontFamily: "monospace",
             }}
           >
             {mobileUrl}
diff --git a/frontend/src/core/components/shared/MultiSelectControls.tsx b/frontend/src/core/components/shared/MultiSelectControls.tsx
index b6e0b24b9f..856c971130 100644
--- a/frontend/src/core/components/shared/MultiSelectControls.tsx
+++ b/frontend/src/core/components/shared/MultiSelectControls.tsx
@@ -16,65 +16,43 @@ const MultiSelectControls = ({
   onOpenInFileEditor,
   onOpenInPageEditor,
   onAddToUpload,
-  onDeleteAll
+  onDeleteAll,
 }: MultiSelectControlsProps) => {
   const { t } = useTranslation();
 
   if (selectedCount === 0) return null;
 
   return (
-    <Box mb="md" p="md" style={{ backgroundColor: 'var(--mantine-color-blue-0)', borderRadius: 8 }}>
+    <Box mb="md" p="md" style={{ backgroundColor: "var(--mantine-color-blue-0)", borderRadius: 8 }}>
       <Group justify="space-between">
         <Text size="sm">
           {selectedCount} {t("fileManager.filesSelected", "files selected")}
         </Text>
         <Group>
-          <Button
-            size="xs"
-            variant="light"
-            onClick={onClearSelection}
-          >
+          <Button size="xs" variant="light" onClick={onClearSelection}>
             {t("fileManager.clearSelection", "Clear Selection")}
           </Button>
 
           {onAddToUpload && (
-            <Button
-              size="xs"
-              color="green"
-              onClick={onAddToUpload}
-            >
+            <Button size="xs" color="green" onClick={onAddToUpload}>
               {t("fileManager.addToUpload", "Add to Upload")}
             </Button>
           )}
 
           {onOpenInFileEditor && (
-            <Button
-              size="xs"
-              color="orange"
-              onClick={onOpenInFileEditor}
-              disabled={selectedCount === 0}
-            >
+            <Button size="xs" color="orange" onClick={onOpenInFileEditor} disabled={selectedCount === 0}>
               {t("fileManager.openInFileEditor", "Open in File Editor")}
             </Button>
           )}
 
           {onOpenInPageEditor && (
-            <Button
-              size="xs"
-              color="blue"
-              onClick={onOpenInPageEditor}
-              disabled={selectedCount === 0}
-            >
+            <Button size="xs" color="blue" onClick={onOpenInPageEditor} disabled={selectedCount === 0}>
               {t("fileManager.openInPageEditor", "Open in Page Editor")}
             </Button>
           )}
 
           {onDeleteAll && (
-            <Button
-              size="xs"
-              color="red"
-              onClick={onDeleteAll}
-            >
+            <Button size="xs" color="red" onClick={onDeleteAll}>
               {t("fileManager.deleteAll", "Delete All")}
             </Button>
           )}
diff --git a/frontend/src/core/components/shared/NavigationWarningModal.tsx b/frontend/src/core/components/shared/NavigationWarningModal.tsx
index 8e80b5d771..d35f2a470c 100644
--- a/frontend/src/core/components/shared/NavigationWarningModal.tsx
+++ b/frontend/src/core/components/shared/NavigationWarningModal.tsx
@@ -86,33 +86,55 @@ const NavigationWarningModal = () => {
       zIndex={Z_INDEX_TOAST}
     >
       <Stack>
-        <Stack  ta="center"  p="md">
-        <Text size="md" fw="300">
-          {t("unsavedChanges", "You have unsaved changes to your PDF.")}
-        </Text>
-        <Text size="lg" fw="500" >
-          {t("areYouSure", "Are you sure you want to leave?")}
-        </Text>
+        <Stack ta="center" p="md">
+          <Text size="md" fw="300">
+            {t("unsavedChanges", "You have unsaved changes to your PDF.")}
+          </Text>
+          <Text size="lg" fw="500">
+            {t("areYouSure", "Are you sure you want to leave?")}
+          </Text>
         </Stack>
 
         {/* Desktop layout: 2 groups side by side */}
         <Group justify="space-between" gap="xl" visibleFrom="md">
           <Group gap="sm">
-            <Button variant="light" color="var(--mantine-color-gray-8)" onClick={handleKeepWorking} w={BUTTON_WIDTH} leftSection={<ArrowBackIcon fontSize="small" />}>
+            <Button
+              variant="light"
+              color="var(--mantine-color-gray-8)"
+              onClick={handleKeepWorking}
+              w={BUTTON_WIDTH}
+              leftSection={<ArrowBackIcon fontSize="small" />}
+            >
               {t("keepWorking", "Keep Working")}
             </Button>
           </Group>
           <Group gap="sm">
-            <Button variant="filled" color="var(--mantine-color-red-9)" onClick={handleDiscardChanges} w={BUTTON_WIDTH} leftSection={<DeleteOutlineIcon fontSize="small" />}>
+            <Button
+              variant="filled"
+              color="var(--mantine-color-red-9)"
+              onClick={handleDiscardChanges}
+              w={BUTTON_WIDTH}
+              leftSection={<DeleteOutlineIcon fontSize="small" />}
+            >
               {t("discardChanges", "Discard Changes")}
             </Button>
             {hasApply && (
-              <Button variant="filled"  onClick={handleApplyAndContinue} w={BUTTON_WIDTH} leftSection={<CheckCircleOutlineIcon fontSize="small" />}>
+              <Button
+                variant="filled"
+                onClick={handleApplyAndContinue}
+                w={BUTTON_WIDTH}
+                leftSection={<CheckCircleOutlineIcon fontSize="small" />}
+              >
                 {t("applyAndContinue", "Apply & Leave")}
               </Button>
             )}
             {hasExport && (
-              <Button variant="filled"  onClick={handleExportAndContinue} w={BUTTON_WIDTH} leftSection={<CheckCircleOutlineIcon fontSize="small" />}>
+              <Button
+                variant="filled"
+                onClick={handleExportAndContinue}
+                w={BUTTON_WIDTH}
+                leftSection={<CheckCircleOutlineIcon fontSize="small" />}
+              >
                 {t("exportAndContinue", "Export & Leave")}
               </Button>
             )}
@@ -121,19 +143,41 @@ const NavigationWarningModal = () => {
 
         {/* Mobile layout: centered stack of 4 buttons */}
         <Stack align="center" gap="sm" hiddenFrom="md">
-           <Button variant="light" color="var(--mantine-color-gray-8)"  onClick={handleKeepWorking} w={BUTTON_WIDTH} leftSection={<ArrowBackIcon fontSize="small" />}>
+          <Button
+            variant="light"
+            color="var(--mantine-color-gray-8)"
+            onClick={handleKeepWorking}
+            w={BUTTON_WIDTH}
+            leftSection={<ArrowBackIcon fontSize="small" />}
+          >
             {t("keepWorking", "Keep Working")}
           </Button>
-          <Button variant="filled" color="var(--mantine-color-red-9)" onClick={handleDiscardChanges} w={BUTTON_WIDTH} leftSection={<DeleteOutlineIcon fontSize="small" />}>
+          <Button
+            variant="filled"
+            color="var(--mantine-color-red-9)"
+            onClick={handleDiscardChanges}
+            w={BUTTON_WIDTH}
+            leftSection={<DeleteOutlineIcon fontSize="small" />}
+          >
             {t("discardChanges", "Discard Changes")}
           </Button>
           {hasApply && (
-            <Button variant="filled" onClick={handleApplyAndContinue} w={BUTTON_WIDTH} leftSection={<CheckCircleOutlineIcon fontSize="small" />}>
+            <Button
+              variant="filled"
+              onClick={handleApplyAndContinue}
+              w={BUTTON_WIDTH}
+              leftSection={<CheckCircleOutlineIcon fontSize="small" />}
+            >
               {t("applyAndContinue", "Apply & Leave")}
             </Button>
           )}
           {hasExport && (
-            <Button variant="filled" onClick={handleExportAndContinue} w={BUTTON_WIDTH} leftSection={<CheckCircleOutlineIcon fontSize="small" />}>
+            <Button
+              variant="filled"
+              onClick={handleExportAndContinue}
+              w={BUTTON_WIDTH}
+              leftSection={<CheckCircleOutlineIcon fontSize="small" />}
+            >
               {t("exportAndContinue", "Export & Leave")}
             </Button>
           )}
diff --git a/frontend/src/core/components/shared/ObscuredOverlay.tsx b/frontend/src/core/components/shared/ObscuredOverlay.tsx
index 2329d624dc..592a79befe 100644
--- a/frontend/src/core/components/shared/ObscuredOverlay.tsx
+++ b/frontend/src/core/components/shared/ObscuredOverlay.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import styles from '@app/components/shared/ObscuredOverlay/ObscuredOverlay.module.css';
+import React from "react";
+import styles from "@app/components/shared/ObscuredOverlay/ObscuredOverlay.module.css";
 
 type ObscuredOverlayProps = {
   obscured: boolean;
@@ -30,11 +30,7 @@ export default function ObscuredOverlay({
           }}
         >
           <div className={styles.overlayContent}>
-            {overlayMessage && (
-              <div className={styles.overlayMessage}>
-                {overlayMessage}
-              </div>
-            )}
+            {overlayMessage && <div className={styles.overlayMessage}>{overlayMessage}</div>}
             {buttonText && onButtonClick && (
               <button type="button" onClick={onButtonClick} className={styles.overlayButton}>
                 {buttonText}
@@ -46,5 +42,3 @@ export default function ObscuredOverlay({
     </div>
   );
 }
-
-
diff --git a/frontend/src/core/components/shared/PageEditorFileDropdown.tsx b/frontend/src/core/components/shared/PageEditorFileDropdown.tsx
index 11f9742c2d..2d850d7177 100644
--- a/frontend/src/core/components/shared/PageEditorFileDropdown.tsx
+++ b/frontend/src/core/components/shared/PageEditorFileDropdown.tsx
@@ -1,16 +1,16 @@
-import React from 'react';
-import { Menu, Loader, Group, Text, Checkbox } from '@mantine/core';
-import { LocalIcon } from '@app/components/shared/LocalIcon';
-import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
-import DragIndicatorIcon from '@mui/icons-material/DragIndicator';
-import AddIcon from '@mui/icons-material/Add';
-import FitText from '@app/components/shared/FitText';
-import { getFileColorWithOpacity } from '@app/components/pageEditor/fileColors';
-import { useFilesModalContext } from '@app/contexts/FilesModalContext';
-import { PrivateContent } from '@app/components/shared/PrivateContent';
-import { useFileItemDragDrop } from '@app/components/shared/pageEditor/useFileItemDragDrop';
+import React from "react";
+import { Menu, Loader, Group, Text, Checkbox } from "@mantine/core";
+import { LocalIcon } from "@app/components/shared/LocalIcon";
+import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
+import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
+import AddIcon from "@mui/icons-material/Add";
+import FitText from "@app/components/shared/FitText";
+import { getFileColorWithOpacity } from "@app/components/pageEditor/fileColors";
+import { useFilesModalContext } from "@app/contexts/FilesModalContext";
+import { PrivateContent } from "@app/components/shared/PrivateContent";
+import { useFileItemDragDrop } from "@app/components/shared/pageEditor/useFileItemDragDrop";
 
-import { FileId } from '@app/types/file';
+import { FileId } from "@app/types/file";
 
 // Local interface for PageEditor file display
 interface PageEditorFile {
@@ -28,50 +28,36 @@ interface FileMenuItemProps {
   onReorder: (fromIndex: number, toIndex: number) => void;
 }
 
-const FileMenuItem: React.FC<FileMenuItemProps> = ({
-  file,
-  index,
-  colorIndex,
-  onToggleSelection,
-  onReorder,
-}) => {
-  const {
-    itemRef,
-    isDragging,
-    isDragOver,
-    dropPosition,
-    movedRef,
-    onPointerDown,
-    onPointerMove,
-    onPointerUp,
-  } = useFileItemDragDrop({
-    fileId: file.fileId,
-    index,
-    onReorder,
-  });
+const FileMenuItem: React.FC<FileMenuItemProps> = ({ file, index, colorIndex, onToggleSelection, onReorder }) => {
+  const { itemRef, isDragging, isDragOver, dropPosition, movedRef, onPointerDown, onPointerMove, onPointerUp } =
+    useFileItemDragDrop({
+      fileId: file.fileId,
+      index,
+      onReorder,
+    });
 
-  const itemName = file?.name || 'Untitled';
+  const itemName = file?.name || "Untitled";
   const fileColorBorder = getFileColorWithOpacity(colorIndex, 1);
   const fileColorBorderHover = getFileColorWithOpacity(colorIndex, 1.0);
 
   return (
     <div
       style={{
-        position: 'relative',
-        marginBottom: '0.5rem',
+        position: "relative",
+        marginBottom: "0.5rem",
       }}
     >
       {/* Drop indicator line */}
       {isDragOver && (
         <div
           style={{
-            position: 'absolute',
-            ...(dropPosition === 'above' ? { top: '-2px' } : { bottom: '-2px' }),
+            position: "absolute",
+            ...(dropPosition === "above" ? { top: "-2px" } : { bottom: "-2px" }),
             left: 0,
             right: 0,
-            height: '4px',
-            backgroundColor: 'rgb(59, 130, 246)',
-            borderRadius: '2px',
+            height: "4px",
+            backgroundColor: "rgb(59, 130, 246)",
+            borderRadius: "2px",
             zIndex: 10,
           }}
         />
@@ -87,34 +73,36 @@ const FileMenuItem: React.FC<FileMenuItemProps> = ({
           onToggleSelection(file.fileId);
         }}
         style={{
-          padding: '0.75rem 0.75rem',
-          cursor: isDragging ? 'grabbing' : 'grab',
-          backgroundColor: file.isSelected ? 'rgba(0, 0, 0, 0.05)' : 'transparent',
+          padding: "0.75rem 0.75rem",
+          cursor: isDragging ? "grabbing" : "grab",
+          backgroundColor: file.isSelected ? "rgba(0, 0, 0, 0.05)" : "transparent",
           borderLeft: `6px solid ${fileColorBorder}`,
           opacity: isDragging ? 0.5 : 1,
-          transition: 'opacity 0.2s ease-in-out, background-color 0.15s ease',
-          userSelect: 'none',
+          transition: "opacity 0.2s ease-in-out, background-color 0.15s ease",
+          userSelect: "none",
         }}
         onMouseEnter={(e) => {
           if (!isDragging) {
-            (e.currentTarget as HTMLDivElement).style.backgroundColor = 'rgba(0, 0, 0, 0.05)';
+            (e.currentTarget as HTMLDivElement).style.backgroundColor = "rgba(0, 0, 0, 0.05)";
             (e.currentTarget as HTMLDivElement).style.borderLeftColor = fileColorBorderHover;
           }
         }}
         onMouseLeave={(e) => {
           if (!isDragging) {
-            (e.currentTarget as HTMLDivElement).style.backgroundColor = file.isSelected ? 'rgba(0, 0, 0, 0.05)' : 'transparent';
+            (e.currentTarget as HTMLDivElement).style.backgroundColor = file.isSelected
+              ? "rgba(0, 0, 0, 0.05)"
+              : "transparent";
             (e.currentTarget as HTMLDivElement).style.borderLeftColor = fileColorBorder;
           }
         }}
       >
-        <Group gap="xs" style={{ width: '100%' }}>
+        <Group gap="xs" style={{ width: "100%" }}>
           <div
             style={{
-              cursor: 'grab',
-              display: 'flex',
-              alignItems: 'center',
-              color: 'var(--mantine-color-dimmed)',
+              cursor: "grab",
+              display: "flex",
+              alignItems: "center",
+              color: "var(--mantine-color-dimmed)",
             }}
           >
             <DragIndicatorIcon fontSize="small" />
@@ -125,7 +113,7 @@ const FileMenuItem: React.FC<FileMenuItemProps> = ({
             onClick={(e) => e.stopPropagation()}
             size="sm"
           />
-          <div style={{ flex: 1, textAlign: 'left', minWidth: 0 }}>
+          <div style={{ flex: 1, textAlign: "left", minWidth: 0 }}>
             <PrivateContent>
               <FitText text={itemName} minimumFontScale={0.7} />
             </PrivateContent>
@@ -167,24 +155,29 @@ export const PageEditorFileDropdown: React.FC<PageEditorFileDropdownProps> = ({
   return (
     <Menu trigger="click" position="bottom" width="40rem">
       <Menu.Target>
-        <div className="ph-no-capture" style={{...viewOptionStyle, cursor: 'pointer'}}>
+        <div className="ph-no-capture" style={{ ...viewOptionStyle, cursor: "pointer" }}>
           {switchingTo === "pageEditor" ? (
             <Loader size="xs" />
           ) : (
             <LocalIcon icon="dashboard-customize-rounded" width="1.4rem" height="1.4rem" />
           )}
-          <span className="ph-no-capture">{selectedCount}/{totalCount} files selected</span>
+          <span className="ph-no-capture">
+            {selectedCount}/{totalCount} files selected
+          </span>
           <KeyboardArrowDownIcon fontSize="small" />
         </div>
       </Menu.Target>
-      <Menu.Dropdown className="ph-no-capture" style={{
-        backgroundColor: 'var(--right-rail-bg)',
-        border: '1px solid var(--border-subtle)',
-        borderRadius: '8px',
-        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
-        maxHeight: '80vh',
-        overflowY: 'auto'
-      }}>
+      <Menu.Dropdown
+        className="ph-no-capture"
+        style={{
+          backgroundColor: "var(--right-rail-bg)",
+          border: "1px solid var(--border-subtle)",
+          borderRadius: "8px",
+          boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+          maxHeight: "80vh",
+          overflowY: "auto",
+        }}
+      >
         {files.map((file, index) => {
           const colorIndex = fileColorMap.get(file.fileId as string) ?? 0;
 
@@ -207,23 +200,23 @@ export const PageEditorFileDropdown: React.FC<PageEditorFileDropdownProps> = ({
             openFilesModal();
           }}
           style={{
-            padding: '0.75rem 0.75rem',
-            marginTop: '0.5rem',
-            cursor: 'pointer',
-            backgroundColor: 'transparent',
-            borderTop: '1px solid var(--border-subtle)',
-            transition: 'background-color 0.15s ease',
+            padding: "0.75rem 0.75rem",
+            marginTop: "0.5rem",
+            cursor: "pointer",
+            backgroundColor: "transparent",
+            borderTop: "1px solid var(--border-subtle)",
+            transition: "background-color 0.15s ease",
           }}
           onMouseEnter={(e) => {
-            (e.currentTarget as HTMLDivElement).style.backgroundColor = 'rgba(59, 130, 246, 0.25)';
+            (e.currentTarget as HTMLDivElement).style.backgroundColor = "rgba(59, 130, 246, 0.25)";
           }}
           onMouseLeave={(e) => {
-            (e.currentTarget as HTMLDivElement).style.backgroundColor = 'transparent';
+            (e.currentTarget as HTMLDivElement).style.backgroundColor = "transparent";
           }}
         >
-          <Group gap="xs" style={{ width: '100%' }}>
-            <AddIcon fontSize="small" style={{ color: 'var(--mantine-color-text)' }} />
-            <Text size="sm" fw={500} style={{ color: 'var(--mantine-color-text)' }} className="ph-no-capture">
+          <Group gap="xs" style={{ width: "100%" }}>
+            <AddIcon fontSize="small" style={{ color: "var(--mantine-color-text)" }} />
+            <Text size="sm" fw={500} style={{ color: "var(--mantine-color-text)" }} className="ph-no-capture">
               Add File
             </Text>
           </Group>
diff --git a/frontend/src/core/components/shared/PageSelectionSyntaxHint.tsx b/frontend/src/core/components/shared/PageSelectionSyntaxHint.tsx
index bf7e642066..c44025bf37 100644
--- a/frontend/src/core/components/shared/PageSelectionSyntaxHint.tsx
+++ b/frontend/src/core/components/shared/PageSelectionSyntaxHint.tsx
@@ -1,25 +1,25 @@
-import { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Text } from '@mantine/core';
-import classes from '@app/components/pageEditor/bulkSelectionPanel/BulkSelectionPanel.module.css';
-import { parseSelectionWithDiagnostics } from '@app/utils/bulkselection/parseSelection';
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Text } from "@mantine/core";
+import classes from "@app/components/pageEditor/bulkSelectionPanel/BulkSelectionPanel.module.css";
+import { parseSelectionWithDiagnostics } from "@app/utils/bulkselection/parseSelection";
 
 interface PageSelectionSyntaxHintProps {
   input: string;
   /** Optional known page count; if not provided, a large max is used for syntax-only checks */
   maxPages?: number;
   /** panel = full bulk panel style, compact = inline tool style */
-  variant?: 'panel' | 'compact';
+  variant?: "panel" | "compact";
 }
 
 const FALLBACK_MAX_PAGES = 100000; // large upper bound for syntax validation without a document
 
-const PageSelectionSyntaxHint = ({ input, maxPages, variant = 'panel' }: PageSelectionSyntaxHintProps) => {
+const PageSelectionSyntaxHint = ({ input, maxPages, variant = "panel" }: PageSelectionSyntaxHintProps) => {
   const [syntaxError, setSyntaxError] = useState<string | null>(null);
   const { t } = useTranslation();
 
   useEffect(() => {
-    const text = (input || '').trim();
+    const text = (input || "").trim();
     if (!text) {
       setSyntaxError(null);
       return;
@@ -27,21 +27,23 @@ const PageSelectionSyntaxHint = ({ input, maxPages, variant = 'panel' }: PageSel
 
     try {
       const { warning } = parseSelectionWithDiagnostics(text, maxPages && maxPages > 0 ? maxPages : FALLBACK_MAX_PAGES);
-      setSyntaxError(warning ? t('bulkSelection.syntaxError', 'There is a syntax issue. See Page Selection tips for help.') : null);
+      setSyntaxError(
+        warning ? t("bulkSelection.syntaxError", "There is a syntax issue. See Page Selection tips for help.") : null,
+      );
     } catch {
-      setSyntaxError(t('bulkSelection.syntaxError', 'There is a syntax issue. See Page Selection tips for help.'));
+      setSyntaxError(t("bulkSelection.syntaxError", "There is a syntax issue. See Page Selection tips for help."));
     }
   }, [input, maxPages]);
 
   if (!syntaxError) return null;
 
   return (
-    <div className={variant === 'panel' ? classes.selectedList : classes.errorCompact}>
-      <Text size="xs" className={variant === 'panel' ? classes.errorText : classes.errorTextClamp}>{syntaxError}</Text>
+    <div className={variant === "panel" ? classes.selectedList : classes.errorCompact}>
+      <Text size="xs" className={variant === "panel" ? classes.errorText : classes.errorTextClamp}>
+        {syntaxError}
+      </Text>
     </div>
   );
 };
 
 export default PageSelectionSyntaxHint;
-
-
diff --git a/frontend/src/core/components/shared/PrivateContent.tsx b/frontend/src/core/components/shared/PrivateContent.tsx
index 3ed11bfc6d..a2b048e95c 100644
--- a/frontend/src/core/components/shared/PrivateContent.tsx
+++ b/frontend/src/core/components/shared/PrivateContent.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 interface PrivateContentProps extends React.HTMLAttributes<HTMLSpanElement> {
   children: React.ReactNode;
@@ -23,14 +23,9 @@ interface PrivateContentProps extends React.HTMLAttributes<HTMLSpanElement> {
  *   <img src={thumbnail} alt="preview" />
  * </PrivateContent>
  */
-export const PrivateContent: React.FC<PrivateContentProps> = ({
-  children,
-  className = '',
-  style,
-  ...props
-}) => {
-  const combinedClassName = `ph-no-capture${className ? ` ${className}` : ''}`;
-  const combinedStyle = { display: 'contents' as const, ...style };
+export const PrivateContent: React.FC<PrivateContentProps> = ({ children, className = "", style, ...props }) => {
+  const combinedClassName = `ph-no-capture${className ? ` ${className}` : ""}`;
+  const combinedStyle = { display: "contents" as const, ...style };
 
   return (
     <span className={combinedClassName} style={combinedStyle} {...props}>
diff --git a/frontend/src/core/components/shared/QuickAccessBar.tsx b/frontend/src/core/components/shared/QuickAccessBar.tsx
index 726ed19c43..db57bed92e 100644
--- a/frontend/src/core/components/shared/QuickAccessBar.tsx
+++ b/frontend/src/core/components/shared/QuickAccessBar.tsx
@@ -1,49 +1,52 @@
 import React, { useState, useRef, forwardRef, useEffect, useMemo, useCallback } from "react";
-import { createPortal } from 'react-dom';
+import { createPortal } from "react-dom";
 import { Stack, Divider, Menu, Indicator } from "@mantine/core";
-import { useTranslation } from 'react-i18next';
-import { useNavigate, useLocation } from 'react-router-dom';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import SignPopout, { SIGN_REQUEST_WORKBENCH_TYPE, SESSION_DETAIL_WORKBENCH_TYPE } from '@app/components/shared/signing/SignPopout';
+import { useTranslation } from "react-i18next";
+import { useNavigate, useLocation } from "react-router-dom";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import SignPopout, {
+  SIGN_REQUEST_WORKBENCH_TYPE,
+  SESSION_DETAIL_WORKBENCH_TYPE,
+} from "@app/components/shared/signing/SignPopout";
 import { useRainbowThemeContext } from "@app/components/shared/RainbowThemeProvider";
-import { useFilesModalContext } from '@app/contexts/FilesModalContext';
-import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
-import { useFileSelection, useFileState } from '@app/contexts/file/fileHooks';
-import { useNavigationState, useNavigationActions } from '@app/contexts/NavigationContext';
-import { useSidebarNavigation } from '@app/hooks/useSidebarNavigation';
-import { handleUnlessSpecialClick } from '@app/utils/clickHandlers';
-import { ButtonConfig } from '@app/types/sidebar';
-import '@app/components/shared/quickAccessBar/QuickAccessBar.css';
-import { Tooltip } from '@app/components/shared/Tooltip';
-import AllToolsNavButton from '@app/components/shared/AllToolsNavButton';
+import { useFilesModalContext } from "@app/contexts/FilesModalContext";
+import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
+import { useFileSelection, useFileState } from "@app/contexts/file/fileHooks";
+import { useNavigationState, useNavigationActions } from "@app/contexts/NavigationContext";
+import { useSidebarNavigation } from "@app/hooks/useSidebarNavigation";
+import { handleUnlessSpecialClick } from "@app/utils/clickHandlers";
+import { ButtonConfig } from "@app/types/sidebar";
+import "@app/components/shared/quickAccessBar/QuickAccessBar.css";
+import { Tooltip } from "@app/components/shared/Tooltip";
+import AllToolsNavButton from "@app/components/shared/AllToolsNavButton";
 import ActiveToolButton from "@app/components/shared/quickAccessBar/ActiveToolButton";
-import AppConfigModal from '@app/components/shared/AppConfigModal';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
-import { useGroupSigningEnabled } from '@app/hooks/useGroupSigningEnabled';
-import { useSharingEnabled } from '@app/hooks/useSharingEnabled';
+import AppConfigModal from "@app/components/shared/AppConfigModal";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
+import { useGroupSigningEnabled } from "@app/hooks/useGroupSigningEnabled";
+import { useSharingEnabled } from "@app/hooks/useSharingEnabled";
 import { useLicenseAlert } from "@app/hooks/useLicenseAlert";
-import { requestStartTour } from '@app/constants/events';
-import QuickAccessButton from '@app/components/shared/quickAccessBar/QuickAccessButton';
-import { useToursTooltip } from '@app/components/shared/quickAccessBar/useToursTooltip';
-import ShareManagementModal from '@app/components/shared/ShareManagementModal';
-import apiClient from '@app/services/apiClient';
-import { absoluteWithBasePath } from '@app/constants/app';
-import { alert } from '@app/components/toast';
-import { uploadHistoryChain } from '@app/services/serverStorageUpload';
-import { fileStorage } from '@app/services/fileStorage';
-import { useFileActions } from '@app/contexts/FileContext';
-import type { FileId } from '@app/types/file';
-import type { StirlingFileStub } from '@app/types/fileContext';
-import type { SignRequestSummary } from '@app/types/signingSession';
+import { requestStartTour } from "@app/constants/events";
+import QuickAccessButton from "@app/components/shared/quickAccessBar/QuickAccessButton";
+import { useToursTooltip } from "@app/components/shared/quickAccessBar/useToursTooltip";
+import ShareManagementModal from "@app/components/shared/ShareManagementModal";
+import apiClient from "@app/services/apiClient";
+import { absoluteWithBasePath } from "@app/constants/app";
+import { alert } from "@app/components/toast";
+import { uploadHistoryChain } from "@app/services/serverStorageUpload";
+import { fileStorage } from "@app/services/fileStorage";
+import { useFileActions } from "@app/contexts/FileContext";
+import type { FileId } from "@app/types/file";
+import type { StirlingFileStub } from "@app/types/fileContext";
+import type { SignRequestSummary } from "@app/types/signingSession";
 
 import {
   isNavButtonActive,
   getNavButtonStyle,
   getActiveNavButton,
-} from '@app/components/shared/quickAccessBar/QuickAccessBar';
-import { Z_INDEX_OVER_FULLSCREEN_SURFACE } from '@app/styles/zIndex';
-import { QuickAccessBarFooterExtensions } from '@app/components/quickAccessBar/QuickAccessBarFooterExtensions';
-import { useConfigButtonIcon } from '@app/hooks/useConfigButtonIcon';
+} from "@app/components/shared/quickAccessBar/QuickAccessBar";
+import { Z_INDEX_OVER_FULLSCREEN_SURFACE } from "@app/styles/zIndex";
+import { QuickAccessBarFooterExtensions } from "@app/components/quickAccessBar/QuickAccessBarFooterExtensions";
+import { useConfigButtonIcon } from "@app/hooks/useConfigButtonIcon";
 
 const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
   const { t } = useTranslation();
@@ -59,7 +62,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
     toolRegistry,
     readerMode,
     resetTool,
-    toolAvailability
+    toolAvailability,
   } = useToolWorkflow();
   const { selectedFiles, selectedFileIds } = useFileSelection();
   const { state, selectors } = useFileState();
@@ -70,7 +73,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
   const { config } = useAppConfig();
   const licenseAlert = useLicenseAlert();
   const [configModalOpen, setConfigModalOpen] = useState(false);
-  const [activeButton, setActiveButton] = useState<string>('tools');
+  const [activeButton, setActiveButton] = useState<string>("tools");
   const [accessMenuOpen, setAccessMenuOpen] = useState(false);
   const [accessInviteOpen, setAccessInviteOpen] = useState(false);
   const [selectedAccessFileId, setSelectedAccessFileId] = useState<string | null>(null);
@@ -82,11 +85,10 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
   const { sharingEnabled, shareLinksEnabled } = useSharingEnabled();
   const groupSigningEnabled = useGroupSigningEnabled();
   const isSignWorkbenchActive =
-    currentWorkbench === SIGN_REQUEST_WORKBENCH_TYPE ||
-    currentWorkbench === SESSION_DETAIL_WORKBENCH_TYPE;
-  const [inviteRows, setInviteRows] = useState<Array<{ id: number; email: string; role: 'editor' | 'commenter' | 'viewer'; error?: string }>>([
-    { id: Date.now(), email: '', role: 'editor' },
-  ]);
+    currentWorkbench === SIGN_REQUEST_WORKBENCH_TYPE || currentWorkbench === SESSION_DETAIL_WORKBENCH_TYPE;
+  const [inviteRows, setInviteRows] = useState<
+    Array<{ id: number; email: string; role: "editor" | "commenter" | "viewer"; error?: string }>
+  >([{ id: Date.now(), email: "", role: "editor" }]);
   const [isInviting, setIsInviting] = useState(false);
 
   // Sign button state
@@ -99,12 +101,12 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
     if (!groupSigningEnabled) return;
     const fetchCount = async () => {
       try {
-        const response = await apiClient.get<SignRequestSummary[]>('/api/v1/security/cert-sign/sign-requests');
-        const pending = response.data.filter(
-          r => r.myStatus !== 'SIGNED' && r.myStatus !== 'DECLINED'
-        ).length;
+        const response = await apiClient.get<SignRequestSummary[]>("/api/v1/security/cert-sign/sign-requests");
+        const pending = response.data.filter((r) => r.myStatus !== "SIGNED" && r.myStatus !== "DECLINED").length;
         setPendingSignCount(pending);
-      } catch { /* silent — avoid noisy background error toasts */ }
+      } catch {
+        /* silent — avoid noisy background error toasts */
+      }
     };
     fetchCount();
     const interval = setInterval(fetchCount, 60000);
@@ -116,12 +118,12 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
     if (!signMenuOpen && groupSigningEnabled) {
       const timeout = setTimeout(async () => {
         try {
-          const response = await apiClient.get<SignRequestSummary[]>('/api/v1/security/cert-sign/sign-requests');
-          const pending = response.data.filter(
-            r => r.myStatus !== 'SIGNED' && r.myStatus !== 'DECLINED'
-          ).length;
+          const response = await apiClient.get<SignRequestSummary[]>("/api/v1/security/cert-sign/sign-requests");
+          const pending = response.data.filter((r) => r.myStatus !== "SIGNED" && r.myStatus !== "DECLINED").length;
           setPendingSignCount(pending);
-        } catch { /* silent */ }
+        } catch {
+          /* silent */
+        }
       }, 500);
       return () => clearTimeout(timeout);
     }
@@ -129,23 +131,16 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
 
   const configButtonIcon = useConfigButtonIcon();
 
-  const {
-    tooltipOpen,
-    manualCloseOnly,
-    showCloseButton,
-    toursMenuOpen,
-    setToursMenuOpen,
-    handleTooltipOpenChange,
-  } = useToursTooltip();
+  const { tooltipOpen, manualCloseOnly, showCloseButton, toursMenuOpen, setToursMenuOpen, handleTooltipOpenChange } =
+    useToursTooltip();
 
-  const isRTL = typeof document !== 'undefined' && document.documentElement.dir === 'rtl';
+  const isRTL = typeof document !== "undefined" && document.documentElement.dir === "rtl";
   const hasSelectedFiles = selectedFiles.length > 0;
   const selectedFileStubs = useMemo(
     () => selectedFileIds.map((id) => selectors.getStirlingFileStub(id)).filter((x): x is StirlingFileStub => Boolean(x)),
-    [selectedFileIds, selectors, state.files.byId]
+    [selectedFileIds, selectors, state.files.byId],
   );
-  const selectedAccessFileStub =
-    selectedFileStubs.find((file) => file.id === selectedAccessFileId) || selectedFileStubs[0];
+  const selectedAccessFileStub = selectedFileStubs.find((file) => file.id === selectedAccessFileId) || selectedFileStubs[0];
   useEffect(() => {
     if (!hasSelectedFiles) {
       setAccessMenuOpen(false);
@@ -159,7 +154,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
   }, [hasSelectedFiles, selectedAccessFileId, selectedFiles]);
 
   const resetInviteRows = useCallback(() => {
-    setInviteRows([{ id: Date.now(), email: '', role: 'editor' }]);
+    setInviteRows([{ id: Date.now(), email: "", role: "editor" }]);
   }, []);
 
   useEffect(() => {
@@ -176,11 +171,11 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
       setAccessPopoverPosition({ top, left });
     };
     updatePosition();
-    window.addEventListener('resize', updatePosition);
-    window.addEventListener('scroll', updatePosition, true);
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
     return () => {
-      window.removeEventListener('resize', updatePosition);
-      window.removeEventListener('scroll', updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
     };
   }, [accessMenuOpen, isRTL, resetInviteRows]);
 
@@ -192,77 +187,77 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
       if (accessButtonRef.current?.contains(target)) return;
 
       // Check if click is inside a Mantine dropdown
-      const mantineDropdown = (target as Element).closest?.('.mantine-Combobox-dropdown, .mantine-Popover-dropdown');
+      const mantineDropdown = (target as Element).closest?.(".mantine-Combobox-dropdown, .mantine-Popover-dropdown");
       if (mantineDropdown) return;
 
       setAccessMenuOpen(false);
     };
     const handleEscape = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
+      if (event.key === "Escape") {
         setAccessMenuOpen(false);
       }
     };
-    document.addEventListener('mousedown', handleOutside);
-    document.addEventListener('keydown', handleEscape);
+    document.addEventListener("mousedown", handleOutside);
+    document.addEventListener("keydown", handleEscape);
     return () => {
-      document.removeEventListener('mousedown', handleOutside);
-      document.removeEventListener('keydown', handleEscape);
+      document.removeEventListener("mousedown", handleOutside);
+      document.removeEventListener("keydown", handleEscape);
     };
   }, [accessMenuOpen]);
 
   const shareBaseUrl = useMemo(() => {
-    const frontendUrl = (config?.frontendUrl || '').trim();
+    const frontendUrl = (config?.frontendUrl || "").trim();
     if (frontendUrl) {
       try {
         const parsed = new URL(frontendUrl);
-        if (parsed.protocol === 'http:' || parsed.protocol === 'https:') {
-          const normalized = frontendUrl.endsWith('/') ? frontendUrl.slice(0, -1) : frontendUrl;
+        if (parsed.protocol === "http:" || parsed.protocol === "https:") {
+          const normalized = frontendUrl.endsWith("/") ? frontendUrl.slice(0, -1) : frontendUrl;
           return `${normalized}/share/`;
         }
       } catch {
         // invalid URL — fall through to default
       }
     }
-    return absoluteWithBasePath('/share/');
+    return absoluteWithBasePath("/share/");
   }, [config?.frontendUrl]);
 
-  const ensureStoredFile = useCallback(async (fileStub: StirlingFileStub): Promise<number> => {
-    const localUpdatedAt = fileStub.createdAt ?? fileStub.lastModified ?? 0;
-    const isUpToDate =
-      Boolean(fileStub.remoteStorageId) &&
-      Boolean(fileStub.remoteStorageUpdatedAt) &&
-      (fileStub.remoteStorageUpdatedAt as number) >= localUpdatedAt;
-    if (isUpToDate && fileStub.remoteStorageId) {
-      return fileStub.remoteStorageId as number;
-    }
-    const originalFileId = (fileStub.originalFileId || fileStub.id) as FileId;
-    const remoteId = fileStub.remoteStorageId as number | undefined;
-    const { remoteId: storedId, updatedAt, chain } = await uploadHistoryChain(
-      originalFileId,
-      remoteId
-    );
-    for (const stub of chain) {
-      actions.updateStirlingFileStub(stub.id, {
-        remoteStorageId: storedId,
-        remoteStorageUpdatedAt: updatedAt,
-        remoteOwnedByCurrentUser: true,
-        remoteSharedViaLink: false,
-      });
-      await fileStorage.updateFileMetadata(stub.id, {
-        remoteStorageId: storedId,
-        remoteStorageUpdatedAt: updatedAt,
-        remoteOwnedByCurrentUser: true,
-        remoteSharedViaLink: false,
-      });
-    }
-    return storedId;
-  }, [actions]);
+  const ensureStoredFile = useCallback(
+    async (fileStub: StirlingFileStub): Promise<number> => {
+      const localUpdatedAt = fileStub.createdAt ?? fileStub.lastModified ?? 0;
+      const isUpToDate =
+        Boolean(fileStub.remoteStorageId) &&
+        Boolean(fileStub.remoteStorageUpdatedAt) &&
+        (fileStub.remoteStorageUpdatedAt as number) >= localUpdatedAt;
+      if (isUpToDate && fileStub.remoteStorageId) {
+        return fileStub.remoteStorageId as number;
+      }
+      const originalFileId = (fileStub.originalFileId || fileStub.id) as FileId;
+      const remoteId = fileStub.remoteStorageId as number | undefined;
+      const { remoteId: storedId, updatedAt, chain } = await uploadHistoryChain(originalFileId, remoteId);
+      for (const stub of chain) {
+        actions.updateStirlingFileStub(stub.id, {
+          remoteStorageId: storedId,
+          remoteStorageUpdatedAt: updatedAt,
+          remoteOwnedByCurrentUser: true,
+          remoteSharedViaLink: false,
+        });
+        await fileStorage.updateFileMetadata(stub.id, {
+          remoteStorageId: storedId,
+          remoteStorageUpdatedAt: updatedAt,
+          remoteOwnedByCurrentUser: true,
+          remoteSharedViaLink: false,
+        });
+      }
+      return storedId;
+    },
+    [actions],
+  );
 
   const openShareManage = useCallback(async () => {
     if (!sharingEnabled) {
       alert({
-        alertType: 'warning',
-        title: t('storageShare.sharingDisabled', 'Sharing is disabled.'),
+        alertType: "warning",
+        title: t("storageShare.sharingDisabled", "Sharing is disabled."),
         expandable: false,
         durationMs: 2500,
       });
@@ -270,8 +265,8 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
     }
     if (selectedFileStubs.length > 1) {
       alert({
-        alertType: 'warning',
-        title: t('storageShare.selectSingleFile', 'Select a single file to manage sharing.'),
+        alertType: "warning",
+        title: t("storageShare.selectSingleFile", "Select a single file to manage sharing."),
         expandable: false,
         durationMs: 2500,
       });
@@ -279,8 +274,8 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
     }
     if (selectedAccessFileStub?.remoteOwnedByCurrentUser === false) {
       alert({
-        alertType: 'warning',
-        title: t('storageShare.ownerOnly', 'Only the owner can manage sharing.'),
+        alertType: "warning",
+        title: t("storageShare.ownerOnly", "Only the owner can manage sharing."),
         expandable: false,
         durationMs: 2500,
       });
@@ -293,10 +288,10 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
       setAccessMenuOpen(false);
       setShareManageOpen(true);
     } catch (error) {
-      console.error('Failed to upload file for sharing:', error);
+      console.error("Failed to upload file for sharing:", error);
       alert({
-        alertType: 'warning',
-        title: t('storageUpload.failure', 'Upload failed. Please check your login and storage settings.'),
+        alertType: "warning",
+        title: t("storageUpload.failure", "Upload failed. Please check your login and storage settings."),
         expandable: false,
         durationMs: 3000,
       });
@@ -304,22 +299,20 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
   }, [ensureStoredFile, selectedAccessFileStub, selectedFileStubs.length, sharingEnabled, t]);
 
   const handleInviteRowChange = useCallback(
-    (id: number, updates: Partial<{ email: string; role: 'editor' | 'commenter' | 'viewer'; error?: string }>) => {
+    (id: number, updates: Partial<{ email: string; role: "editor" | "commenter" | "viewer"; error?: string }>) => {
       setInviteRows((prev) =>
         prev.map((row) => {
           if (row.id !== id) return row;
-          const nextError = Object.prototype.hasOwnProperty.call(updates, 'error')
-            ? updates.error
-            : row.error;
+          const nextError = Object.prototype.hasOwnProperty.call(updates, "error") ? updates.error : row.error;
           return { ...row, ...updates, error: nextError };
-        })
+        }),
       );
     },
-    []
+    [],
   );
 
   const handleAddInviteRow = useCallback(() => {
-    setInviteRows((prev) => [...prev, { id: Date.now(), email: '', role: 'editor' }]);
+    setInviteRows((prev) => [...prev, { id: Date.now(), email: "", role: "editor" }]);
   }, []);
 
   const handleRemoveInviteRow = useCallback((id: number) => {
@@ -330,8 +323,8 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
     if (!selectedAccessFileStub) return;
     if (selectedAccessFileStub.remoteOwnedByCurrentUser === false) {
       alert({
-        alertType: 'warning',
-        title: t('storageShare.ownerOnly', 'Only the owner can manage sharing.'),
+        alertType: "warning",
+        title: t("storageShare.ownerOnly", "Only the owner can manage sharing."),
         expandable: false,
         durationMs: 2500,
       });
@@ -341,7 +334,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
       const trimmed = row.email.trim();
       let error: string | undefined;
       if (!trimmed) {
-        error = t('storageShare.invalidUsername', 'Enter a valid username or email address.');
+        error = t("storageShare.invalidUsername", "Enter a valid username or email address.");
       }
       return { ...row, email: trimmed, error };
     });
@@ -359,18 +352,18 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
         });
       }
       alert({
-        alertType: 'success',
-        title: t('storageShare.userAdded', 'User added to shared list.'),
+        alertType: "success",
+        title: t("storageShare.userAdded", "User added to shared list."),
         expandable: false,
         durationMs: 2500,
       });
       setAccessInviteOpen(false);
       resetInviteRows();
     } catch (error) {
-      console.error('Failed to send invite:', error);
+      console.error("Failed to send invite:", error);
       alert({
-        alertType: 'warning',
-        title: t('storageShare.userAddFailed', 'Unable to share with that user.'),
+        alertType: "warning",
+        title: t("storageShare.userAddFailed", "Unable to share with that user."),
         expandable: false,
         durationMs: 3000,
       });
@@ -383,8 +376,8 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
     if (!selectedAccessFileStub) return;
     if (!shareLinksEnabled) {
       alert({
-        alertType: 'warning',
-        title: t('storageShare.linksDisabled', 'Share links are disabled.'),
+        alertType: "warning",
+        title: t("storageShare.linksDisabled", "Share links are disabled."),
         expandable: false,
         durationMs: 2500,
       });
@@ -392,8 +385,8 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
     }
     if (selectedFileStubs.length > 1) {
       alert({
-        alertType: 'warning',
-        title: t('storageShare.selectSingleFile', 'Select a single file to copy a link.'),
+        alertType: "warning",
+        title: t("storageShare.selectSingleFile", "Select a single file to copy a link."),
         expandable: false,
         durationMs: 2500,
       });
@@ -401,8 +394,8 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
     }
     if (selectedAccessFileStub?.remoteOwnedByCurrentUser === false) {
       alert({
-        alertType: 'warning',
-        title: t('storageShare.ownerOnly', 'Only the owner can manage sharing.'),
+        alertType: "warning",
+        title: t("storageShare.ownerOnly", "Only the owner can manage sharing."),
         expandable: false,
         durationMs: 2500,
       });
@@ -412,10 +405,10 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
       try {
         await ensureStoredFile(selectedAccessFileStub);
       } catch (error) {
-        console.error('Failed to upload file for sharing:', error);
+        console.error("Failed to upload file for sharing:", error);
         alert({
-          alertType: 'warning',
-          title: t('storageUpload.failure', 'Upload failed. Please check your login and storage settings.'),
+          alertType: "warning",
+          title: t("storageUpload.failure", "Upload failed. Please check your login and storage settings."),
           expandable: false,
           durationMs: 3000,
         });
@@ -424,15 +417,14 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
     }
     try {
       const storedId = await ensureStoredFile(selectedAccessFileStub);
-      const response = await apiClient.get<{ shareLinks?: Array<{ token?: string }> }>(
-        `/api/v1/storage/files/${storedId}`,
-        { suppressErrorToast: true }
-      );
+      const response = await apiClient.get<{ shareLinks?: Array<{ token?: string }> }>(`/api/v1/storage/files/${storedId}`, {
+        suppressErrorToast: true,
+      });
       const links = response.data?.shareLinks ?? [];
       let token = links[links.length - 1]?.token;
       if (!token) {
         const shareResponse = await apiClient.post(`/api/v1/storage/files/${storedId}/shares/links`, {
-          accessRole: 'editor',
+          accessRole: "editor",
         });
         token = shareResponse.data?.token;
         if (token) {
@@ -442,8 +434,8 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
       }
       if (!token) {
         alert({
-          alertType: 'warning',
-          title: t('storageShare.failure', 'Unable to generate a share link. Please try again.'),
+          alertType: "warning",
+          title: t("storageShare.failure", "Unable to generate a share link. Please try again."),
           expandable: false,
           durationMs: 2500,
         });
@@ -451,26 +443,25 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
       }
       await navigator.clipboard.writeText(`${shareBaseUrl}${token}`);
       alert({
-        alertType: 'success',
-        title: t('storageShare.copied', 'Link copied to clipboard'),
+        alertType: "success",
+        title: t("storageShare.copied", "Link copied to clipboard"),
         expandable: false,
         durationMs: 2000,
       });
     } catch (error) {
-      console.error('Failed to copy share link:', error);
+      console.error("Failed to copy share link:", error);
       alert({
-        alertType: 'warning',
-        title: t('storageShare.copyFailed', 'Copy failed'),
+        alertType: "warning",
+        title: t("storageShare.copyFailed", "Copy failed"),
         expandable: false,
         durationMs: 2500,
       });
     }
   };
 
-
   // Open modal if URL is at /settings/*
   useEffect(() => {
-    const isSettings = location.pathname.startsWith('/settings');
+    const isSettings = location.pathname.startsWith("/settings");
     setConfigModalOpen(isSettings);
   }, [location.pathname]);
 
@@ -485,12 +476,13 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
 
   // Helper function to render navigation buttons with URL support
   const renderNavButton = (config: ButtonConfig, index: number, shouldGuardNavigation = false) => {
-    const isActive = !isSignWorkbenchActive && isNavButtonActive(config, activeButton, isFilesModalOpen, configModalOpen, selectedToolKey, leftPanelView);
+    const isActive =
+      !isSignWorkbenchActive &&
+      isNavButtonActive(config, activeButton, isFilesModalOpen, configModalOpen, selectedToolKey, leftPanelView);
 
     // Check if this button has URL navigation support
-    const navProps = config.type === 'navigation' && (config.id === 'read' || config.id === 'automate')
-      ? getToolNavigation(config.id)
-      : null;
+    const navProps =
+      config.type === "navigation" && (config.id === "read" || config.id === "automate") ? getToolNavigation(config.id) : null;
 
     const handleClick = (e?: React.MouseEvent) => {
       // If there are unsaved changes and this button should guard navigation, show warning modal
@@ -509,15 +501,17 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
     };
 
     const buttonStyle = isSignWorkbenchActive
-      ? { backgroundColor: 'var(--icon-inactive-bg)', color: 'var(--icon-inactive-color)', border: 'none', borderRadius: '0.5rem' }
+      ? {
+          backgroundColor: "var(--icon-inactive-bg)",
+          color: "var(--icon-inactive-color)",
+          border: "none",
+          borderRadius: "0.5rem",
+        }
       : getNavButtonStyle(config, activeButton, isFilesModalOpen, configModalOpen, selectedToolKey, leftPanelView);
 
     // Render navigation button with conditional URL support
     return (
-      <div
-        key={config.id}
-        style={{ marginTop: index === 0 ? '0.5rem' : "0rem" }}
-      >
+      <div key={config.id} style={{ marginTop: index === 0 ? "0.5rem" : "0rem" }}>
         <QuickAccessButton
           icon={config.icon}
           label={config.name}
@@ -527,7 +521,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
           ariaLabel={config.name}
           backgroundColor={buttonStyle.backgroundColor}
           color={buttonStyle.color}
-          component={navProps ? 'a' : 'button'}
+          component={navProps ? "a" : "button"}
           dataTestId={`${config.id}-button`}
           dataTour={`${config.id}-button`}
         />
@@ -535,54 +529,58 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
     );
   };
 
-  const mainButtons: ButtonConfig[] = useMemo(() => [
-    {
-      id: 'read',
-      name: t("quickAccess.reader", "Reader"),
-      icon: <LocalIcon icon="menu-book-rounded" width="1.25rem" height="1.25rem" />,
-      size: 'md' as const,
-      isRound: false,
-      type: 'navigation' as const,
-      onClick: () => {
-        setActiveButton('read');
-        handleReaderToggle();
-      }
-    },
-    {
-      id: 'automate',
-      name: t("quickAccess.automate", "Automate"),
-      icon: <LocalIcon icon="automation-outline" width="1.25rem" height="1.25rem" />,
-      size: 'md' as const,
-      isRound: false,
-      type: 'navigation' as const,
-      onClick: () => {
-        setActiveButton('automate');
-        // If already on automate tool, reset it directly
-        if (selectedToolKey === 'automate') {
-          resetTool('automate');
-        } else {
-          handleToolSelect('automate');
-        }
-      }
-    },
-  ].filter(button => {
-    // Filter out buttons for disabled tools
-    // 'read' is always available (viewer mode)
-    if (button.id === 'read') return true;
-    // Check if tool is actually available (not just present in registry)
-    const availability = toolAvailability[button.id as keyof typeof toolAvailability];
-    return availability?.available !== false;
-  }), [t, setActiveButton, handleReaderToggle, selectedToolKey, resetTool, handleToolSelect, toolAvailability]);
+  const mainButtons: ButtonConfig[] = useMemo(
+    () =>
+      [
+        {
+          id: "read",
+          name: t("quickAccess.reader", "Reader"),
+          icon: <LocalIcon icon="menu-book-rounded" width="1.25rem" height="1.25rem" />,
+          size: "md" as const,
+          isRound: false,
+          type: "navigation" as const,
+          onClick: () => {
+            setActiveButton("read");
+            handleReaderToggle();
+          },
+        },
+        {
+          id: "automate",
+          name: t("quickAccess.automate", "Automate"),
+          icon: <LocalIcon icon="automation-outline" width="1.25rem" height="1.25rem" />,
+          size: "md" as const,
+          isRound: false,
+          type: "navigation" as const,
+          onClick: () => {
+            setActiveButton("automate");
+            // If already on automate tool, reset it directly
+            if (selectedToolKey === "automate") {
+              resetTool("automate");
+            } else {
+              handleToolSelect("automate");
+            }
+          },
+        },
+      ].filter((button) => {
+        // Filter out buttons for disabled tools
+        // 'read' is always available (viewer mode)
+        if (button.id === "read") return true;
+        // Check if tool is actually available (not just present in registry)
+        const availability = toolAvailability[button.id as keyof typeof toolAvailability];
+        return availability?.available !== false;
+      }),
+    [t, setActiveButton, handleReaderToggle, selectedToolKey, resetTool, handleToolSelect, toolAvailability],
+  );
 
   const middleButtons: ButtonConfig[] = [
     {
-      id: 'files',
+      id: "files",
       name: t("quickAccess.files", "Files"),
       icon: <LocalIcon icon="folder-rounded" width="1.25rem" height="1.25rem" />,
       isRound: true,
-      size: 'md',
-      type: 'modal',
-      onClick: handleFilesButtonClick
+      size: "md",
+      type: "modal",
+      onClick: handleFilesButtonClick,
     },
   ];
   //TODO: Activity
@@ -598,51 +596,50 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
 
   // Determine if settings button should be hidden
   // Hide when login is disabled AND showSettingsWhenNoLogin is false
-  const shouldHideSettingsButton =
-    config?.enableLogin === false &&
-    config?.showSettingsWhenNoLogin === false;
+  const shouldHideSettingsButton = config?.enableLogin === false && config?.showSettingsWhenNoLogin === false;
 
   const bottomButtons: ButtonConfig[] = [
     {
-      id: 'help',
+      id: "help",
       name: t("quickAccess.tours", "Tours"),
       icon: <LocalIcon icon="explore-rounded" width="1.25rem" height="1.25rem" />,
       isRound: true,
-      size: 'md',
-      type: 'action',
+      size: "md",
+      type: "action",
       onClick: () => {
         // This will be overridden by the wrapper logic
       },
     },
-    ...(shouldHideSettingsButton ? [] : [{
-      id: 'config',
-      name: t("quickAccess.settings", "Settings"),
-      icon: configButtonIcon ?? <LocalIcon icon="settings-rounded" width="1.25rem" height="1.25rem" />,
-      size: 'md' as const,
-      type: 'modal' as const,
-      onClick: () => {
-        navigate('/settings/overview');
-        setConfigModalOpen(true);
-      }
-    } as ButtonConfig])
+    ...(shouldHideSettingsButton
+      ? []
+      : [
+          {
+            id: "config",
+            name: t("quickAccess.settings", "Settings"),
+            icon: configButtonIcon ?? <LocalIcon icon="settings-rounded" width="1.25rem" height="1.25rem" />,
+            size: "md" as const,
+            type: "modal" as const,
+            onClick: () => {
+              navigate("/settings/overview");
+              setConfigModalOpen(true);
+            },
+          } as ButtonConfig,
+        ]),
   ];
 
-
   return (
     <div
       ref={ref}
       data-sidebar="quick-access"
       data-tour="quick-access-bar"
-      className={`h-screen flex flex-col w-16 quick-access-bar-main ${isRainbowMode ? 'rainbow-mode' : ''}`}
+      className={`h-screen flex flex-col w-16 quick-access-bar-main ${isRainbowMode ? "rainbow-mode" : ""}`}
     >
       {/* Fixed header outside scrollable area */}
       <div className="quick-access-header">
         <ActiveToolButton activeButton={activeButton} setActiveButton={setActiveButton} />
         <AllToolsNavButton activeButton={activeButton} setActiveButton={setActiveButton} />
-
       </div>
 
-
       {/* Scrollable content area */}
       <div
         ref={scrollableRef}
@@ -657,7 +654,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
           <Stack gap="lg" align="stretch">
             {mainButtons.map((config, index) => (
               <React.Fragment key={config.id}>
-                {renderNavButton(config, index, config.id === 'read' || config.id === 'automate')}
+                {renderNavButton(config, index, config.id === "read" || config.id === "automate")}
               </React.Fragment>
             ))}
           </Stack>
@@ -665,57 +662,45 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
           {/* Middle section */}
           {middleButtons.length > 0 && (
             <>
-              <Divider
-                size="xs"
-                className="content-divider"
-              />
+              <Divider size="xs" className="content-divider" />
               <Stack gap="lg" align="stretch">
                 {middleButtons.map((config, index) => (
-                  <React.Fragment key={config.id}>
-                    {renderNavButton(config, index)}
-                  </React.Fragment>
+                  <React.Fragment key={config.id}>{renderNavButton(config, index)}</React.Fragment>
                 ))}
                 {hasSelectedFiles && sharingEnabled && (
                   <div ref={accessButtonRef}>
                     <QuickAccessButton
                       icon={<LocalIcon icon="group-rounded" width="1.25rem" height="1.25rem" />}
-                      label={t('quickAccess.access', 'Access')}
+                      label={t("quickAccess.access", "Access")}
                       isActive={!isSignWorkbenchActive && accessMenuOpen}
                       onClick={() => {
                         setAccessMenuOpen((prev) => !prev);
                       }}
-                      ariaLabel={t('quickAccess.access', 'Access')}
+                      ariaLabel={t("quickAccess.access", "Access")}
                       dataTestId="access-button"
                     />
                   </div>
                 )}
                 {groupSigningEnabled && (
-                  <div ref={signButtonRef} style={{ display: 'flex', justifyContent: 'center' }}>
+                  <div ref={signButtonRef} style={{ display: "flex", justifyContent: "center" }}>
                     {pendingSignCount > 0 ? (
-                      <Indicator
-                        inline
-                        label={pendingSignCount}
-                        size={14}
-                        color="red"
-                        position="top-end"
-                        offset={4}
-                      >
+                      <Indicator inline label={pendingSignCount} size={14} color="red" position="top-end" offset={4}>
                         <QuickAccessButton
                           icon={<LocalIcon icon="edit-square-rounded" width="1.15rem" height="1.15rem" />}
-                          label={t('quickAccess.sign', 'Sign')}
+                          label={t("quickAccess.sign", "Sign")}
                           isActive={signMenuOpen || isSignWorkbenchActive}
                           onClick={() => setSignMenuOpen((prev) => !prev)}
-                          ariaLabel={t('quickAccess.sign', 'Sign')}
+                          ariaLabel={t("quickAccess.sign", "Sign")}
                           dataTestId="sign-button"
                         />
                       </Indicator>
                     ) : (
                       <QuickAccessButton
                         icon={<LocalIcon icon="edit-square-rounded" width="1.15rem" height="1.15rem" />}
-                        label={t('quickAccess.sign', 'Sign')}
+                        label={t("quickAccess.sign", "Sign")}
                         isActive={signMenuOpen || isSignWorkbenchActive}
                         onClick={() => setSignMenuOpen((prev) => !prev)}
-                        ariaLabel={t('quickAccess.sign', 'Sign')}
+                        ariaLabel={t("quickAccess.sign", "Sign")}
                         dataTestId="sign-button"
                       />
                     )}
@@ -734,39 +719,46 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
           <Stack gap="lg" align="stretch">
             {bottomButtons.map((buttonConfig, index) => {
               // Handle help button with menu or direct action
-              if (buttonConfig.id === 'help') {
+              if (buttonConfig.id === "help") {
                 const isAdmin = config?.isAdmin === true;
                 const toursTooltipContent = isAdmin
-                  ? t('quickAccess.toursTooltip.admin', 'Watch walkthroughs here: Tools tour, New V2 layout tour, and the Admin tour.')
-                  : t('quickAccess.toursTooltip.user', 'Watch walkthroughs here: Tools tour and the New V2 layout tour.');
+                  ? t(
+                      "quickAccess.toursTooltip.admin",
+                      "Watch walkthroughs here: Tools tour, New V2 layout tour, and the Admin tour.",
+                    )
+                  : t("quickAccess.toursTooltip.user", "Watch walkthroughs here: Tools tour and the New V2 layout tour.");
                 const tourItems = [
                   {
-                    key: 'whatsnew',
+                    key: "whatsnew",
                     icon: <LocalIcon icon="auto-awesome-rounded" width="1.25rem" height="1.25rem" />,
                     title: t("quickAccess.helpMenu.whatsNewTour", "See what's new in V2"),
                     description: t("quickAccess.helpMenu.whatsNewTourDesc", "Tour the updated layout"),
-                    onClick: () => requestStartTour('whatsnew'),
+                    onClick: () => requestStartTour("whatsnew"),
                   },
                   {
-                    key: 'tools',
+                    key: "tools",
                     icon: <LocalIcon icon="view-carousel-rounded" width="1.25rem" height="1.25rem" />,
                     title: t("quickAccess.helpMenu.toolsTour", "Tools Tour"),
                     description: t("quickAccess.helpMenu.toolsTourDesc", "Learn what the tools can do"),
-                    onClick: () => requestStartTour('tools'),
+                    onClick: () => requestStartTour("tools"),
                   },
-                  ...(isAdmin ? [{
-                    key: 'admin',
-                    icon: <LocalIcon icon="admin-panel-settings-rounded" width="1.25rem" height="1.25rem" />,
-                    title: t("quickAccess.helpMenu.adminTour", "Admin Tour"),
-                    description: t("quickAccess.helpMenu.adminTourDesc", "Explore admin settings & features"),
-                    onClick: () => requestStartTour('admin'),
-                  }] : []),
+                  ...(isAdmin
+                    ? [
+                        {
+                          key: "admin",
+                          icon: <LocalIcon icon="admin-panel-settings-rounded" width="1.25rem" height="1.25rem" />,
+                          title: t("quickAccess.helpMenu.adminTour", "Admin Tour"),
+                          description: t("quickAccess.helpMenu.adminTourDesc", "Explore admin settings & features"),
+                          onClick: () => requestStartTour("admin"),
+                        },
+                      ]
+                    : []),
                 ];
 
                 const helpButtonNode = (
                   <div data-tour="help-button">
                     <Menu
-                      position={isRTL ? 'left' : 'right'}
+                      position={isRTL ? "left" : "right"}
                       offset={10}
                       zIndex={Z_INDEX_OVER_FULLSCREEN_SURFACE}
                       opened={toursMenuOpen}
@@ -777,18 +769,10 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
                       </Menu.Target>
                       <Menu.Dropdown>
                         {tourItems.map((item) => (
-                          <Menu.Item
-                            key={item.key}
-                            leftSection={item.icon}
-                            onClick={item.onClick}
-                          >
+                          <Menu.Item key={item.key} leftSection={item.icon} onClick={item.onClick}>
                             <div>
-                              <div style={{ fontWeight: 500 }}>
-                                {item.title}
-                              </div>
-                              <div style={{ fontSize: '0.875rem', opacity: 0.7 }}>
-                                {item.description}
-                              </div>
+                              <div style={{ fontWeight: 500 }}>{item.title}</div>
+                              <div style={{ fontSize: "0.875rem", opacity: 0.7 }}>{item.description}</div>
                             </div>
                           </Menu.Item>
                         ))}
@@ -819,20 +803,12 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
 
               const buttonNode = renderNavButton(buttonConfig, index);
               const shouldShowSettingsBadge =
-                buttonConfig.id === 'config' &&
-                licenseAlert.active &&
-                licenseAlert.audience === 'admin';
+                buttonConfig.id === "config" && licenseAlert.active && licenseAlert.audience === "admin";
 
               return (
                 <React.Fragment key={buttonConfig.id}>
                   {shouldShowSettingsBadge ? (
-                    <Indicator
-                      inline
-                      size={12}
-                      color="orange"
-                      position="top-end"
-                      offset={4}
-                    >
+                    <Indicator inline size={12} color="orange" position="top-end" offset={4}>
                       {buttonNode}
                     </Indicator>
                   ) : (
@@ -845,10 +821,7 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
         </div>
       </div>
 
-      <AppConfigModal
-        opened={configModalOpen}
-        onClose={() => setConfigModalOpen(false)}
-      />
+      <AppConfigModal opened={configModalOpen} onClose={() => setConfigModalOpen(false)} />
 
       {selectedAccessFileStub && (
         <ShareManagementModal
@@ -857,239 +830,204 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
           file={selectedAccessFileStub}
         />
       )}
-      {hasSelectedFiles && typeof document !== 'undefined' && createPortal(
-        <div
-          ref={accessPopoverRef}
-          className={`quick-access-popout ${accessMenuOpen ? 'is-open' : ''}`}
-          style={{
-            top: `${accessPopoverPosition.top}px`,
-            left: `${accessPopoverPosition.left}px`,
-            zIndex: Z_INDEX_OVER_FULLSCREEN_SURFACE,
-          }}
-          role="dialog"
-          aria-label={t('quickAccess.accessPanel', 'Document access')}
-        >
-          <div className="quick-access-popout__card">
-            <div className="quick-access-popout__header">
-              <button
-                type="button"
-                className={`quick-access-popout__back ${accessInviteOpen ? 'is-visible' : ''}`}
-                onClick={() => setAccessInviteOpen(false)}
-                aria-label={t('quickAccess.accessBack', 'Back')}
-              >
-                <LocalIcon icon="arrow-back-rounded" width="1rem" height="1rem" />
-              </button>
-              <div className="quick-access-popout__title">
-                {accessInviteOpen
-                  ? t('quickAccess.accessInviteTitle', 'Invite People')
-                  : t('quickAccess.accessTitle', 'Document Access')}
-              </div>
-              <div className="quick-access-popout__header-actions">
-                {!accessInviteOpen && (
+      {hasSelectedFiles &&
+        typeof document !== "undefined" &&
+        createPortal(
+          <div
+            ref={accessPopoverRef}
+            className={`quick-access-popout ${accessMenuOpen ? "is-open" : ""}`}
+            style={{
+              top: `${accessPopoverPosition.top}px`,
+              left: `${accessPopoverPosition.left}px`,
+              zIndex: Z_INDEX_OVER_FULLSCREEN_SURFACE,
+            }}
+            role="dialog"
+            aria-label={t("quickAccess.accessPanel", "Document access")}
+          >
+            <div className="quick-access-popout__card">
+              <div className="quick-access-popout__header">
+                <button
+                  type="button"
+                  className={`quick-access-popout__back ${accessInviteOpen ? "is-visible" : ""}`}
+                  onClick={() => setAccessInviteOpen(false)}
+                  aria-label={t("quickAccess.accessBack", "Back")}
+                >
+                  <LocalIcon icon="arrow-back-rounded" width="1rem" height="1rem" />
+                </button>
+                <div className="quick-access-popout__title">
+                  {accessInviteOpen
+                    ? t("quickAccess.accessInviteTitle", "Invite People")
+                    : t("quickAccess.accessTitle", "Document Access")}
+                </div>
+                <div className="quick-access-popout__header-actions">
+                  {!accessInviteOpen && (
+                    <button
+                      type="button"
+                      className="quick-access-popout__header-action"
+                      onClick={() => {
+                        void openShareManage();
+                      }}
+                      aria-label={t("storageShare.manage", "Manage sharing")}
+                    >
+                      <LocalIcon icon="settings-rounded" width="1rem" height="1rem" />
+                    </button>
+                  )}
                   <button
                     type="button"
                     className="quick-access-popout__header-action"
-                    onClick={() => {
-                      void openShareManage();
-                    }}
-                    aria-label={t('storageShare.manage', 'Manage sharing')}
+                    onClick={() => setAccessMenuOpen(false)}
+                    aria-label={t("close", "Close")}
                   >
-                    <LocalIcon icon="settings-rounded" width="1rem" height="1rem" />
+                    <LocalIcon icon="close-rounded" width="1rem" height="1rem" />
                   </button>
-                )}
-                <button
-                  type="button"
-                  className="quick-access-popout__header-action"
-                  onClick={() => setAccessMenuOpen(false)}
-                  aria-label={t('close', 'Close')}
-                >
-                  <LocalIcon icon="close-rounded" width="1rem" height="1rem" />
-                </button>
-              </div>
-            </div>
-
-            <div className={`quick-access-popout__body ${accessInviteOpen ? 'is-invite' : ''}`}>
-              <div className="quick-access-popout__panel">
-                <div className="quick-access-popout__section">
-                  <div className="quick-access-popout__label">
-                    {t('quickAccess.accessFileLabel', 'File')}
-                  </div>
-                  <select
-                    className="quick-access-popout__select"
-                    value={selectedAccessFileStub?.id ?? ''}
-                    onChange={(event) => setSelectedAccessFileId(event.target.value)}
-                  >
-                    {selectedFileStubs.map((file) => (
-                      <option key={file.id} value={file.id}>
-                        {file.name}
-                      </option>
-                    ))}
-                  </select>
-                </div>
-
-                <div className="quick-access-popout__divider" />
-
-                <div className="quick-access-popout__section">
-                  <div className="quick-access-popout__label">
-                    {t('quickAccess.accessGeneral', 'General Access')}
-                  </div>
-                  <div className="quick-access-popout__row">
-                    <div className="quick-access-popout__icon-bubble">
-                      <LocalIcon icon="lock-outline" width="1rem" height="1rem" />
-                    </div>
-                    <div className="quick-access-popout__row-text">
-                      <div className="quick-access-popout__row-title">
-                        {t('quickAccess.accessRestricted', 'Restricted')}
-                      </div>
-                      <div className="quick-access-popout__row-subtitle">
-                        {t('quickAccess.accessRestrictedHint', 'Only people with access can open')}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-
-                <div className="quick-access-popout__divider" />
-
-                <div className="quick-access-popout__section">
-                  <div className="quick-access-popout__label">
-                    {t('quickAccess.accessPeople', 'People with access')}
-                  </div>
-                  <div className="quick-access-popout__person">
-                    <div className="quick-access-popout__avatar">
-                      {(selectedAccessFileStub?.remoteOwnerUsername || 'You').slice(0, 2).toUpperCase()}
-                    </div>
-                    <div className="quick-access-popout__person-text">
-                      <div className="quick-access-popout__row-title">
-                        {selectedAccessFileStub?.remoteOwnerUsername || t('quickAccess.accessYou', 'You')}
-                      </div>
-                      <div className="quick-access-popout__row-subtitle">
-                        {selectedAccessFileStub?.name ?? t('quickAccess.accessSelectedFile', 'Selected file')}
-                      </div>
-                    </div>
-                    <span className="quick-access-popout__pill">
-                      {t('quickAccess.accessOwner', 'Owner')}
-                    </span>
-                  </div>
                 </div>
               </div>
 
-              <div className="quick-access-popout__panel quick-access-popout__panel--invite">
-                <div className="quick-access-popout__section">
-                  <div className="quick-access-popout__label">
-                    {t('quickAccess.accessInviteTitle', 'Invite People')}
+              <div className={`quick-access-popout__body ${accessInviteOpen ? "is-invite" : ""}`}>
+                <div className="quick-access-popout__panel">
+                  <div className="quick-access-popout__section">
+                    <div className="quick-access-popout__label">{t("quickAccess.accessFileLabel", "File")}</div>
+                    <select
+                      className="quick-access-popout__select"
+                      value={selectedAccessFileStub?.id ?? ""}
+                      onChange={(event) => setSelectedAccessFileId(event.target.value)}
+                    >
+                      {selectedFileStubs.map((file) => (
+                        <option key={file.id} value={file.id}>
+                          {file.name}
+                        </option>
+                      ))}
+                    </select>
+                  </div>
+
+                  <div className="quick-access-popout__divider" />
+
+                  <div className="quick-access-popout__section">
+                    <div className="quick-access-popout__label">{t("quickAccess.accessGeneral", "General Access")}</div>
+                    <div className="quick-access-popout__row">
+                      <div className="quick-access-popout__icon-bubble">
+                        <LocalIcon icon="lock-outline" width="1rem" height="1rem" />
+                      </div>
+                      <div className="quick-access-popout__row-text">
+                        <div className="quick-access-popout__row-title">{t("quickAccess.accessRestricted", "Restricted")}</div>
+                        <div className="quick-access-popout__row-subtitle">
+                          {t("quickAccess.accessRestrictedHint", "Only people with access can open")}
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+
+                  <div className="quick-access-popout__divider" />
+
+                  <div className="quick-access-popout__section">
+                    <div className="quick-access-popout__label">{t("quickAccess.accessPeople", "People with access")}</div>
+                    <div className="quick-access-popout__person">
+                      <div className="quick-access-popout__avatar">
+                        {(selectedAccessFileStub?.remoteOwnerUsername || "You").slice(0, 2).toUpperCase()}
+                      </div>
+                      <div className="quick-access-popout__person-text">
+                        <div className="quick-access-popout__row-title">
+                          {selectedAccessFileStub?.remoteOwnerUsername || t("quickAccess.accessYou", "You")}
+                        </div>
+                        <div className="quick-access-popout__row-subtitle">
+                          {selectedAccessFileStub?.name ?? t("quickAccess.accessSelectedFile", "Selected file")}
+                        </div>
+                      </div>
+                      <span className="quick-access-popout__pill">{t("quickAccess.accessOwner", "Owner")}</span>
+                    </div>
                   </div>
                 </div>
-                {inviteRows.map((row) => (
-                  <div key={row.id} className="quick-access-popout__invite-row">
-                    <div className="quick-access-popout__input-group">
-                      <label className="quick-access-popout__label">
-                        {t('quickAccess.accessEmail', 'Email Address')}
-                      </label>
-                      <input
-                        className={`quick-access-popout__input ${row.error ? 'has-error' : ''}`}
-                        placeholder={t('quickAccess.accessEmailPlaceholder', 'name@company.com')}
-                        value={row.email}
-                        onChange={(event) =>
-                          handleInviteRowChange(row.id, { email: event.target.value, error: undefined })
-                        }
-                      />
-                      {row.error && (
-                        <div className="quick-access-popout__input-error">{row.error}</div>
-                      )}
-                    </div>
-                    <div className="quick-access-popout__input-group">
-                      <label className="quick-access-popout__label">
-                        {t('quickAccess.accessRole', 'Role')}
-                      </label>
-                      <select
-                        className="quick-access-popout__select"
-                        value={row.role}
-                        onChange={(event) =>
-                          handleInviteRowChange(row.id, {
-                            role: event.target.value as 'editor' | 'commenter' | 'viewer',
-                          })
-                        }
+
+                <div className="quick-access-popout__panel quick-access-popout__panel--invite">
+                  <div className="quick-access-popout__section">
+                    <div className="quick-access-popout__label">{t("quickAccess.accessInviteTitle", "Invite People")}</div>
+                  </div>
+                  {inviteRows.map((row) => (
+                    <div key={row.id} className="quick-access-popout__invite-row">
+                      <div className="quick-access-popout__input-group">
+                        <label className="quick-access-popout__label">{t("quickAccess.accessEmail", "Email Address")}</label>
+                        <input
+                          className={`quick-access-popout__input ${row.error ? "has-error" : ""}`}
+                          placeholder={t("quickAccess.accessEmailPlaceholder", "name@company.com")}
+                          value={row.email}
+                          onChange={(event) => handleInviteRowChange(row.id, { email: event.target.value, error: undefined })}
+                        />
+                        {row.error && <div className="quick-access-popout__input-error">{row.error}</div>}
+                      </div>
+                      <div className="quick-access-popout__input-group">
+                        <label className="quick-access-popout__label">{t("quickAccess.accessRole", "Role")}</label>
+                        <select
+                          className="quick-access-popout__select"
+                          value={row.role}
+                          onChange={(event) =>
+                            handleInviteRowChange(row.id, {
+                              role: event.target.value as "editor" | "commenter" | "viewer",
+                            })
+                          }
+                        >
+                          <option value="editor">{t("quickAccess.accessRoleEditor", "Editor")}</option>
+                          <option value="commenter">{t("quickAccess.accessRoleCommenter", "Commenter")}</option>
+                          <option value="viewer">{t("quickAccess.accessRoleViewer", "Viewer")}</option>
+                        </select>
+                      </div>
+                      <button
+                        type="button"
+                        className="quick-access-popout__remove"
+                        onClick={() => handleRemoveInviteRow(row.id)}
+                        disabled={inviteRows.length === 1}
+                        aria-label={t("quickAccess.accessRemove", "Remove")}
                       >
-                        <option value="editor">{t('quickAccess.accessRoleEditor', 'Editor')}</option>
-                        <option value="commenter">{t('quickAccess.accessRoleCommenter', 'Commenter')}</option>
-                        <option value="viewer">{t('quickAccess.accessRoleViewer', 'Viewer')}</option>
-                      </select>
+                        <LocalIcon icon="close-rounded" width="0.9rem" height="0.9rem" />
+                      </button>
                     </div>
-                    <button
-                      type="button"
-                      className="quick-access-popout__remove"
-                      onClick={() => handleRemoveInviteRow(row.id)}
-                      disabled={inviteRows.length === 1}
-                      aria-label={t('quickAccess.accessRemove', 'Remove')}
-                    >
-                      <LocalIcon icon="close-rounded" width="0.9rem" height="0.9rem" />
-                    </button>
-                  </div>
-                ))}
-                <button
-                  type="button"
-                  className="quick-access-popout__add"
-                  onClick={handleAddInviteRow}
-                >
-                  <span className="quick-access-popout__add-icon">+</span>
-                  {t('quickAccess.accessAddPerson', 'Add another person')}
-                </button>
+                  ))}
+                  <button type="button" className="quick-access-popout__add" onClick={handleAddInviteRow}>
+                    <span className="quick-access-popout__add-icon">+</span>
+                    {t("quickAccess.accessAddPerson", "Add another person")}
+                  </button>
+                </div>
               </div>
 
-            </div>
-
-            <div className="quick-access-popout__footer">
-              {accessInviteOpen ? (
-                <>
-                  <button
-                    type="button"
-                    className="quick-access-popout__primary"
-                    onClick={() => void handleSendInvites()}
-                    disabled={isInviting}
-                  >
-                    <LocalIcon icon="send-rounded" width="1rem" height="1rem" />
-                    {t('quickAccess.accessSendInvite', 'Send Invite')}
-                  </button>
-                  {shareLinksEnabled && (
-                    <button
-                      type="button"
-                      className="quick-access-popout__link"
-                      onClick={handleCopyShareLink}
-                    >
-                      <LocalIcon icon="link-rounded" width="1rem" height="1rem" />
-                      {t('quickAccess.accessCopyLink', 'Copy link')}
-                    </button>
-                  )}
-                </>
-              ) : (
-                <>
-                  {sharingEnabled && (
+              <div className="quick-access-popout__footer">
+                {accessInviteOpen ? (
+                  <>
                     <button
                       type="button"
                       className="quick-access-popout__primary"
-                      onClick={() => setAccessInviteOpen(true)}
+                      onClick={() => void handleSendInvites()}
+                      disabled={isInviting}
                     >
-                      <LocalIcon icon="person-add-rounded" width="1rem" height="1rem" />
-                      {t('accessInvite', 'Invite')}
+                      <LocalIcon icon="send-rounded" width="1rem" height="1rem" />
+                      {t("quickAccess.accessSendInvite", "Send Invite")}
                     </button>
-                  )}
-                  {shareLinksEnabled && (
-                    <button
-                      type="button"
-                      className="quick-access-popout__link"
-                      onClick={handleCopyShareLink}
-                    >
-                      <LocalIcon icon="link-rounded" width="1rem" height="1rem" />
-                      {t('quickAccess.accessCopyLink', 'Copy link')}
-                    </button>
-                  )}
-                </>
-              )}
+                    {shareLinksEnabled && (
+                      <button type="button" className="quick-access-popout__link" onClick={handleCopyShareLink}>
+                        <LocalIcon icon="link-rounded" width="1rem" height="1rem" />
+                        {t("quickAccess.accessCopyLink", "Copy link")}
+                      </button>
+                    )}
+                  </>
+                ) : (
+                  <>
+                    {sharingEnabled && (
+                      <button type="button" className="quick-access-popout__primary" onClick={() => setAccessInviteOpen(true)}>
+                        <LocalIcon icon="person-add-rounded" width="1rem" height="1rem" />
+                        {t("accessInvite", "Invite")}
+                      </button>
+                    )}
+                    {shareLinksEnabled && (
+                      <button type="button" className="quick-access-popout__link" onClick={handleCopyShareLink}>
+                        <LocalIcon icon="link-rounded" width="1rem" height="1rem" />
+                        {t("quickAccess.accessCopyLink", "Copy link")}
+                      </button>
+                    )}
+                  </>
+                )}
+              </div>
             </div>
-          </div>
-        </div>,
-        document.body
-      )}
+          </div>,
+          document.body,
+        )}
 
       {/* Sign Popover */}
       <SignPopout
@@ -1103,6 +1041,6 @@ const QuickAccessBar = forwardRef<HTMLDivElement>((_, ref) => {
   );
 });
 
-QuickAccessBar.displayName = 'QuickAccessBar';
+QuickAccessBar.displayName = "QuickAccessBar";
 
 export default QuickAccessBar;
diff --git a/frontend/src/core/components/shared/RainbowThemeProvider.tsx b/frontend/src/core/components/shared/RainbowThemeProvider.tsx
index 992aa79b5c..a3fa5e04af 100644
--- a/frontend/src/core/components/shared/RainbowThemeProvider.tsx
+++ b/frontend/src/core/components/shared/RainbowThemeProvider.tsx
@@ -1,12 +1,12 @@
-import { createContext, useContext, ReactNode } from 'react';
-import { MantineProvider } from '@mantine/core';
-import { useRainbowTheme } from '@app/hooks/useRainbowTheme';
-import { mantineTheme } from '@app/theme/mantineTheme';
-import rainbowStyles from '@app/styles/rainbow.module.css';
-import { ToastProvider } from '@app/components/toast';
-import ToastRenderer from '@app/components/toast/ToastRenderer';
-import { ToastPortalBinder } from '@app/components/toast';
-import type { ThemeMode } from '@app/constants/theme';
+import { createContext, useContext, ReactNode } from "react";
+import { MantineProvider } from "@mantine/core";
+import { useRainbowTheme } from "@app/hooks/useRainbowTheme";
+import { mantineTheme } from "@app/theme/mantineTheme";
+import rainbowStyles from "@app/styles/rainbow.module.css";
+import { ToastProvider } from "@app/components/toast";
+import ToastRenderer from "@app/components/toast/ToastRenderer";
+import { ToastPortalBinder } from "@app/components/toast";
+import type { ThemeMode } from "@app/constants/theme";
 
 interface RainbowThemeContextType {
   themeMode: ThemeMode;
@@ -22,7 +22,7 @@ const RainbowThemeContext = createContext<RainbowThemeContextType | null>(null);
 export function useRainbowThemeContext() {
   const context = useContext(RainbowThemeContext);
   if (!context) {
-    throw new Error('useRainbowThemeContext must be used within RainbowThemeProvider');
+    throw new Error("useRainbowThemeContext must be used within RainbowThemeProvider");
   }
   return context;
 }
@@ -35,19 +35,12 @@ export function RainbowThemeProvider({ children }: RainbowThemeProviderProps) {
   const rainbowTheme = useRainbowTheme();
 
   // Determine the Mantine color scheme
-  const mantineColorScheme = rainbowTheme.themeMode === 'rainbow' ? 'dark' : rainbowTheme.themeMode;
+  const mantineColorScheme = rainbowTheme.themeMode === "rainbow" ? "dark" : rainbowTheme.themeMode;
 
   return (
     <RainbowThemeContext.Provider value={rainbowTheme}>
-      <MantineProvider
-        theme={mantineTheme}
-        defaultColorScheme={mantineColorScheme}
-        forceColorScheme={mantineColorScheme}
-      >
-        <div
-          className={rainbowTheme.isRainbowMode ? rainbowStyles.rainbowMode : ''}
-          style={{ minHeight: '100vh' }}
-        >
+      <MantineProvider theme={mantineTheme} defaultColorScheme={mantineColorScheme} forceColorScheme={mantineColorScheme}>
+        <div className={rainbowTheme.isRainbowMode ? rainbowStyles.rainbowMode : ""} style={{ minHeight: "100vh" }}>
           <ToastProvider>
             <ToastPortalBinder />
             {children}
diff --git a/frontend/src/core/components/shared/RightRail.tsx b/frontend/src/core/components/shared/RightRail.tsx
index 8001b17f73..639a354e73 100644
--- a/frontend/src/core/components/shared/RightRail.tsx
+++ b/frontend/src/core/components/shared/RightRail.tsx
@@ -1,40 +1,40 @@
-import React, { useCallback, useMemo } from 'react';
-import { ActionIcon, Divider } from '@mantine/core';
-import '@app/components/shared/rightRail/RightRail.css';
-import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
-import { useRightRail } from '@app/contexts/RightRailContext';
-import { useFileState, useFileSelection, useFileActions } from '@app/contexts/FileContext';
-import { isStirlingFile } from '@app/types/fileContext';
-import { useNavigationState } from '@app/contexts/NavigationContext';
-import { useTranslation } from 'react-i18next';
-import { useFileActionTerminology } from '@app/hooks/useFileActionTerminology';
-import { useFileActionIcons } from '@app/hooks/useFileActionIcons';
+import React, { useCallback, useMemo } from "react";
+import { ActionIcon, Divider } from "@mantine/core";
+import "@app/components/shared/rightRail/RightRail.css";
+import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
+import { useRightRail } from "@app/contexts/RightRailContext";
+import { useFileState, useFileSelection, useFileActions } from "@app/contexts/FileContext";
+import { isStirlingFile } from "@app/types/fileContext";
+import { useNavigationState } from "@app/contexts/NavigationContext";
+import { useTranslation } from "react-i18next";
+import { useFileActionTerminology } from "@app/hooks/useFileActionTerminology";
+import { useFileActionIcons } from "@app/hooks/useFileActionIcons";
 
-import LanguageSelector from '@app/components/shared/LanguageSelector';
-import { useRainbowThemeContext } from '@app/components/shared/RainbowThemeProvider';
-import { Tooltip } from '@app/components/shared/Tooltip';
-import { ViewerContext } from '@app/contexts/ViewerContext';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { RightRailFooterExtensions } from '@app/components/rightRail/RightRailFooterExtensions';
-import DarkModeIcon from '@mui/icons-material/DarkMode';
-import LightModeIcon from '@mui/icons-material/LightMode';
+import LanguageSelector from "@app/components/shared/LanguageSelector";
+import { useRainbowThemeContext } from "@app/components/shared/RainbowThemeProvider";
+import { Tooltip } from "@app/components/shared/Tooltip";
+import { ViewerContext } from "@app/contexts/ViewerContext";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { RightRailFooterExtensions } from "@app/components/rightRail/RightRailFooterExtensions";
+import DarkModeIcon from "@mui/icons-material/DarkMode";
+import LightModeIcon from "@mui/icons-material/LightMode";
 
-import { useSidebarContext } from '@app/contexts/SidebarContext';
-import { RightRailButtonConfig, RightRailRenderContext, RightRailSection } from '@app/types/rightRail';
-import { useRightRailTooltipSide } from '@app/hooks/useRightRailTooltipSide';
-import { downloadFile } from '@app/services/downloadService';
+import { useSidebarContext } from "@app/contexts/SidebarContext";
+import { RightRailButtonConfig, RightRailRenderContext, RightRailSection } from "@app/types/rightRail";
+import { useRightRailTooltipSide } from "@app/hooks/useRightRailTooltipSide";
+import { downloadFile } from "@app/services/downloadService";
 
-const SECTION_ORDER: RightRailSection[] = ['top', 'middle', 'bottom'];
+const SECTION_ORDER: RightRailSection[] = ["top", "middle", "bottom"];
 
 function renderWithTooltip(
   node: React.ReactNode,
   tooltip: React.ReactNode | undefined,
-  position: 'left' | 'right',
-  offset: number
+  position: "left" | "right",
+  offset: number,
 ) {
   if (!tooltip) return node;
 
-  const portalTarget = typeof document !== 'undefined' ? document.body : undefined;
+  const portalTarget = typeof document !== "undefined" ? document.body : undefined;
 
   return (
     <Tooltip content={tooltip} position={position} offset={offset} arrow portalTarget={portalTarget}>
@@ -54,7 +54,7 @@ export default function RightRail() {
   const { buttons, actions, allButtonsDisabled } = useRightRail();
 
   const { pageEditorFunctions, toolPanelMode, leftPanelView } = useToolWorkflow();
-  const disableForFullscreen = toolPanelMode === 'fullscreen' && leftPanelView === 'toolPicker';
+  const disableForFullscreen = toolPanelMode === "fullscreen" && leftPanelView === "toolPicker";
 
   const { workbench: currentView } = useNavigationState();
 
@@ -66,24 +66,22 @@ export default function RightRail() {
   const pageEditorSelectedCount = pageEditorFunctions?.selectedPageIds?.length ?? 0;
 
   const totalItems = useMemo(() => {
-    if (currentView === 'pageEditor') return pageEditorTotalPages;
+    if (currentView === "pageEditor") return pageEditorTotalPages;
     return activeFiles.length;
   }, [currentView, pageEditorTotalPages, activeFiles.length]);
 
   const selectedCount = useMemo(() => {
-    if (currentView === 'pageEditor') {
+    if (currentView === "pageEditor") {
       return pageEditorSelectedCount;
     }
     return selectedFileIds.length;
   }, [currentView, pageEditorSelectedCount, selectedFileIds.length]);
 
   const sectionsWithButtons = useMemo(() => {
-    return SECTION_ORDER
-      .map(section => {
-        const sectionButtons = buttons.filter(btn => (btn.section ?? 'top') === section && (btn.visible ?? true));
-        return { section, buttons: sectionButtons };
-      })
-      .filter(entry => entry.buttons.length > 0);
+    return SECTION_ORDER.map((section) => {
+      const sectionButtons = buttons.filter((btn) => (btn.section ?? "top") === section && (btn.visible ?? true));
+      return { section, buttons: sectionButtons };
+    }).filter((entry) => entry.buttons.length > 0);
   }, [buttons]);
 
   const renderButton = useCallback(
@@ -110,20 +108,19 @@ export default function RightRail() {
 
       if (!btn.icon) return null;
 
-      const ariaLabel =
-        btn.ariaLabel || (typeof btn.tooltip === 'string' ? (btn.tooltip as string) : undefined);
-      const className = ['right-rail-icon', btn.className].filter(Boolean).join(' ');
+      const ariaLabel = btn.ariaLabel || (typeof btn.tooltip === "string" ? (btn.tooltip as string) : undefined);
+      const className = ["right-rail-icon", btn.className].filter(Boolean).join(" ");
       const buttonNode = (
         <ActionIcon
-          variant={isActive ? 'filled' : 'subtle'}
-          color={isActive ? 'blue' : undefined}
+          variant={isActive ? "filled" : "subtle"}
+          color={isActive ? "blue" : undefined}
           radius="md"
           className={className}
           onClick={triggerAction}
           disabled={disabled}
           aria-label={ariaLabel}
           aria-pressed={isActive ? true : undefined}
-          data-active={isActive ? 'true' : 'false'}
+          data-active={isActive ? "true" : "false"}
         >
           {btn.icon}
         </ActionIcon>
@@ -131,12 +128,12 @@ export default function RightRail() {
 
       return renderWithTooltip(buttonNode, btn.tooltip, tooltipPosition, tooltipOffset);
     },
-    [actions, allButtonsDisabled, disableForFullscreen, tooltipPosition, tooltipOffset]
+    [actions, allButtonsDisabled, disableForFullscreen, tooltipPosition, tooltipOffset],
   );
 
   const handleExportAll = useCallback(
     async (forceNewFile = false) => {
-      if (currentView === 'viewer') {
+      if (currentView === "viewer") {
         const buffer = await viewerContext?.exportActions?.saveAsCopy?.();
         if (!buffer) return;
         const fileToExport = selectedFiles.length > 0 ? selectedFiles[0] : activeFiles[0];
@@ -144,7 +141,7 @@ export default function RightRail() {
         const stub = isStirlingFile(fileToExport) ? selectors.getStirlingFileStub(fileToExport.fileId) : undefined;
         try {
           const result = await downloadFile({
-            data: new Blob([buffer], { type: 'application/pdf' }),
+            data: new Blob([buffer], { type: "application/pdf" }),
             filename: fileToExport.name,
             localPath: forceNewFile ? undefined : stub?.localFilePath,
           });
@@ -155,12 +152,12 @@ export default function RightRail() {
             });
           }
         } catch (error) {
-          console.error('[RightRail] Failed to export viewer file:', error);
+          console.error("[RightRail] Failed to export viewer file:", error);
         }
         return;
       }
 
-      if (currentView === 'pageEditor') {
+      if (currentView === "pageEditor") {
         pageEditorFunctions?.onExportAll?.();
         return;
       }
@@ -184,27 +181,19 @@ export default function RightRail() {
               });
             }
           } catch (error) {
-            console.error('[RightRail] Failed to export file:', file.name, error);
+            console.error("[RightRail] Failed to export file:", file.name, error);
           }
         }
       }
     },
-    [
-      currentView,
-      selectedFiles,
-      activeFiles,
-      pageEditorFunctions,
-      viewerContext,
-      selectors,
-      fileActions,
-    ]
+    [currentView, selectedFiles, activeFiles, pageEditorFunctions, viewerContext, selectors, fileActions],
   );
 
   const downloadTooltip = useMemo(() => {
-    if (currentView === 'pageEditor') {
-      return t('rightRail.exportAll', 'Export PDF');
+    if (currentView === "pageEditor") {
+      return t("rightRail.exportAll", "Export PDF");
     }
-    if (currentView === 'viewer') {
+    if (currentView === "viewer") {
       return terminology.download;
     }
     if (selectedCount > 0) {
@@ -223,11 +212,7 @@ export default function RightRail() {
                 const content = renderButton(btn);
                 if (!content) return null;
                 return (
-                  <div
-                    key={btn.id}
-                    className="right-rail-button-wrapper"
-                    style={{ animationDelay: `${index * 50}ms` }}
-                  >
+                  <div key={btn.id} className="right-rail-button-wrapper" style={{ animationDelay: `${index * 50}ms` }}>
                     {content}
                   </div>
                 );
@@ -236,31 +221,24 @@ export default function RightRail() {
             <Divider className="right-rail-divider" />
           </React.Fragment>
         ))}
-        <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1rem' }} data-tour="right-rail-settings">
+        <div
+          style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "1rem" }}
+          data-tour="right-rail-settings"
+        >
           {renderWithTooltip(
-            <ActionIcon
-              variant="subtle"
-              radius="md"
-              className="right-rail-icon"
-              onClick={toggleTheme}
-            >
-              {themeMode === 'dark' ? (
-                <LightModeIcon sx={{ fontSize: '1.5rem' }} />
+            <ActionIcon variant="subtle" radius="md" className="right-rail-icon" onClick={toggleTheme}>
+              {themeMode === "dark" ? (
+                <LightModeIcon sx={{ fontSize: "1.5rem" }} />
               ) : (
-                <DarkModeIcon sx={{ fontSize: '1.5rem' }} />
+                <DarkModeIcon sx={{ fontSize: "1.5rem" }} />
               )}
             </ActionIcon>,
-            t('rightRail.toggleTheme', 'Toggle Theme'),
+            t("rightRail.toggleTheme", "Toggle Theme"),
             tooltipPosition,
-            tooltipOffset
+            tooltipOffset,
           )}
 
-          <LanguageSelector
-            position="left-start"
-            offset={6}
-            compact
-            tooltip={t('rightRail.language', 'Language')}
-          />
+          <LanguageSelector position="left-start" offset={6} compact tooltip={t("rightRail.language", "Language")} />
 
           {renderWithTooltip(
             <ActionIcon
@@ -268,16 +246,13 @@ export default function RightRail() {
               radius="md"
               className="right-rail-icon"
               onClick={() => handleExportAll()}
-              disabled={
-                disableForFullscreen ||
-                (currentView !== 'viewer' && (totalItems === 0 || allButtonsDisabled))
-              }
+              disabled={disableForFullscreen || (currentView !== "viewer" && (totalItems === 0 || allButtonsDisabled))}
             >
               <LocalIcon icon={icons.downloadIconName} width="1.5rem" height="1.5rem" />
             </ActionIcon>,
             downloadTooltip,
             tooltipPosition,
-            tooltipOffset
+            tooltipOffset,
           )}
           {icons.saveAsIconName &&
             renderWithTooltip(
@@ -286,16 +261,13 @@ export default function RightRail() {
                 radius="md"
                 className="right-rail-icon"
                 onClick={() => handleExportAll(true)}
-                disabled={
-                  disableForFullscreen ||
-                  (currentView !== 'viewer' && (totalItems === 0 || allButtonsDisabled))
-                }
+                disabled={disableForFullscreen || (currentView !== "viewer" && (totalItems === 0 || allButtonsDisabled))}
               >
                 <LocalIcon icon={icons.saveAsIconName} width="1.5rem" height="1.5rem" />
               </ActionIcon>,
-              t('rightRail.saveAs', 'Save As'),
+              t("rightRail.saveAs", "Save As"),
               tooltipPosition,
-              tooltipOffset
+              tooltipOffset,
             )}
         </div>
 
diff --git a/frontend/src/core/components/shared/ShareFileModal.tsx b/frontend/src/core/components/shared/ShareFileModal.tsx
index 3cdcf99245..757aa86bc7 100644
--- a/frontend/src/core/components/shared/ShareFileModal.tsx
+++ b/frontend/src/core/components/shared/ShareFileModal.tsx
@@ -1,19 +1,19 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Modal, Stack, Text, Button, Group, Alert, TextInput, Paper, Select } from '@mantine/core';
-import LinkIcon from '@mui/icons-material/Link';
-import ContentCopyRoundedIcon from '@mui/icons-material/ContentCopyRounded';
-import { useTranslation } from 'react-i18next';
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { Modal, Stack, Text, Button, Group, Alert, TextInput, Paper, Select } from "@mantine/core";
+import LinkIcon from "@mui/icons-material/Link";
+import ContentCopyRoundedIcon from "@mui/icons-material/ContentCopyRounded";
+import { useTranslation } from "react-i18next";
 
-import apiClient from '@app/services/apiClient';
-import { absoluteWithBasePath } from '@app/constants/app';
-import { alert } from '@app/components/toast';
-import { Z_INDEX_OVER_FILE_MANAGER_MODAL } from '@app/styles/zIndex';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
-import type { StirlingFileStub } from '@app/types/fileContext';
-import { uploadHistoryChain } from '@app/services/serverStorageUpload';
-import { fileStorage } from '@app/services/fileStorage';
-import { useFileActions } from '@app/contexts/FileContext';
-import type { FileId } from '@app/types/file';
+import apiClient from "@app/services/apiClient";
+import { absoluteWithBasePath } from "@app/constants/app";
+import { alert } from "@app/components/toast";
+import { Z_INDEX_OVER_FILE_MANAGER_MODAL } from "@app/styles/zIndex";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
+import type { StirlingFileStub } from "@app/types/fileContext";
+import { uploadHistoryChain } from "@app/services/serverStorageUpload";
+import { fileStorage } from "@app/services/fileStorage";
+import { useFileActions } from "@app/contexts/FileContext";
+import type { FileId } from "@app/types/file";
 
 interface ShareFileModalProps {
   opened: boolean;
@@ -22,12 +22,7 @@ interface ShareFileModalProps {
   onUploaded?: () => Promise<void> | void;
 }
 
-const ShareFileModal: React.FC<ShareFileModalProps> = ({
-  opened,
-  onClose,
-  file,
-  onUploaded,
-}) => {
+const ShareFileModal: React.FC<ShareFileModalProps> = ({ opened, onClose, file, onUploaded }) => {
   const { t } = useTranslation();
   const { config } = useAppConfig();
   const { actions } = useFileActions();
@@ -35,7 +30,7 @@ const ShareFileModal: React.FC<ShareFileModalProps> = ({
   const [isWorking, setIsWorking] = useState(false);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [shareToken, setShareToken] = useState<string | null>(null);
-  const [shareRole, setShareRole] = useState<'editor' | 'commenter' | 'viewer'>('editor');
+  const [shareRole, setShareRole] = useState<"editor" | "commenter" | "viewer">("editor");
 
   useEffect(() => {
     if (!opened) {
@@ -47,18 +42,18 @@ const ShareFileModal: React.FC<ShareFileModalProps> = ({
 
   useEffect(() => {
     if (opened) {
-      setShareRole('editor');
+      setShareRole("editor");
     }
   }, [opened]);
 
   const shareUrl = useMemo(() => {
-    if (!shareToken) return '';
-    const frontendUrl = (config?.frontendUrl || '').trim();
+    if (!shareToken) return "";
+    const frontendUrl = (config?.frontendUrl || "").trim();
     if (frontendUrl) {
       try {
         const parsed = new URL(frontendUrl);
-        if (parsed.protocol === 'http:' || parsed.protocol === 'https:') {
-          const normalized = frontendUrl.endsWith('/') ? frontendUrl.slice(0, -1) : frontendUrl;
+        if (parsed.protocol === "http:" || parsed.protocol === "https:") {
+          const normalized = frontendUrl.endsWith("/") ? frontendUrl.slice(0, -1) : frontendUrl;
           return `${normalized}/share/${shareToken}`;
         }
       } catch {
@@ -68,18 +63,21 @@ const ShareFileModal: React.FC<ShareFileModalProps> = ({
     return absoluteWithBasePath(`/share/${shareToken}`);
   }, [config?.frontendUrl, shareToken]);
 
-  const createShareLink = useCallback(async (storedFileId: number) => {
-    const response = await apiClient.post(`/api/v1/storage/files/${storedFileId}/shares/links`, {
-      accessRole: shareRole,
-    });
-    return response.data as { token?: string };
-  }, [shareRole]);
+  const createShareLink = useCallback(
+    async (storedFileId: number) => {
+      const response = await apiClient.post(`/api/v1/storage/files/${storedFileId}/shares/links`, {
+        accessRole: shareRole,
+      });
+      return response.data as { token?: string };
+    },
+    [shareRole],
+  );
 
   const handleGenerateLink = useCallback(async () => {
     if (!shareLinksEnabled) {
       alert({
-        alertType: 'warning',
-        title: t('storageShare.linksDisabled', 'Share links are disabled.'),
+        alertType: "warning",
+        title: t("storageShare.linksDisabled", "Share links are disabled."),
         expandable: false,
         durationMs: 2500,
       });
@@ -101,10 +99,7 @@ const ShareFileModal: React.FC<ShareFileModalProps> = ({
       if (!isUpToDate) {
         const originalFileId = (file.originalFileId || file.id) as FileId;
         const remoteId = file.remoteStorageId;
-        const { remoteId: newStoredId, updatedAt, chain } = await uploadHistoryChain(
-          originalFileId,
-          remoteId
-        );
+        const { remoteId: newStoredId, updatedAt, chain } = await uploadHistoryChain(originalFileId, remoteId);
         storedId = newStoredId;
 
         for (const stub of chain) {
@@ -124,14 +119,14 @@ const ShareFileModal: React.FC<ShareFileModalProps> = ({
       }
 
       if (!storedId) {
-        throw new Error('Missing stored file ID for sharing.');
+        throw new Error("Missing stored file ID for sharing.");
       }
       const shareResponse = await createShareLink(storedId);
       setShareToken(shareResponse.token ?? null);
 
       alert({
-        alertType: 'success',
-        title: t('storageShare.generated', 'Share link generated'),
+        alertType: "success",
+        title: t("storageShare.generated", "Share link generated"),
         expandable: false,
         durationMs: 3000,
       });
@@ -143,10 +138,8 @@ const ShareFileModal: React.FC<ShareFileModalProps> = ({
         await onUploaded();
       }
     } catch (error: any) {
-      console.error('Failed to generate share link:', error);
-      setErrorMessage(
-        t('storageShare.failure', 'Unable to generate a share link. Please try again.')
-      );
+      console.error("Failed to generate share link:", error);
+      setErrorMessage(t("storageShare.failure", "Unable to generate a share link. Please try again."));
     } finally {
       setIsWorking(false);
     }
@@ -157,16 +150,16 @@ const ShareFileModal: React.FC<ShareFileModalProps> = ({
     try {
       await navigator.clipboard.writeText(shareUrl);
       alert({
-        alertType: 'success',
-        title: t('storageShare.copied', 'Link copied to clipboard'),
+        alertType: "success",
+        title: t("storageShare.copied", "Link copied to clipboard"),
         expandable: false,
         durationMs: 2000,
       });
     } catch (error) {
-      console.error('Failed to copy share link:', error);
+      console.error("Failed to copy share link:", error);
       alert({
-        alertType: 'warning',
-        title: t('storageShare.copyFailed', 'Copy failed'),
+        alertType: "warning",
+        title: t("storageShare.copyFailed", "Copy failed"),
         expandable: false,
         durationMs: 2500,
       });
@@ -178,7 +171,7 @@ const ShareFileModal: React.FC<ShareFileModalProps> = ({
       opened={opened}
       onClose={onClose}
       centered
-      title={t('storageShare.title', 'Share File')}
+      title={t("storageShare.title", "Share File")}
       zIndex={Z_INDEX_OVER_FILE_MANAGER_MODAL}
       size="lg"
       overlayProps={{ blur: 6 }}
@@ -188,24 +181,24 @@ const ShareFileModal: React.FC<ShareFileModalProps> = ({
           <Stack gap={4}>
             <Text size="sm">
               {t(
-                'storageShare.description',
-                'Create a share link for this file. Signed-in users with the link can access it.'
+                "storageShare.description",
+                "Create a share link for this file. Signed-in users with the link can access it.",
               )}
             </Text>
             <Text size="sm" c="dimmed">
-              {t('storageShare.fileLabel', 'File')}: {file.name}
+              {t("storageShare.fileLabel", "File")}: {file.name}
             </Text>
           </Stack>
         </Paper>
 
         {errorMessage && (
-          <Alert color="red" title={t('storageShare.errorTitle', 'Share failed')}>
+          <Alert color="red" title={t("storageShare.errorTitle", "Share failed")}>
             {errorMessage}
           </Alert>
         )}
         {!shareLinksEnabled && (
-          <Alert color="yellow" title={t('storageShare.linksDisabled', 'Share links are disabled.')}>
-            {t('storageShare.linksDisabledBody', 'Share links are disabled by your server settings.')}
+          <Alert color="yellow" title={t("storageShare.linksDisabled", "Share links are disabled.")}>
+            {t("storageShare.linksDisabledBody", "Share links are disabled by your server settings.")}
           </Alert>
         )}
 
@@ -215,7 +208,7 @@ const ShareFileModal: React.FC<ShareFileModalProps> = ({
               <TextInput
                 readOnly
                 value={shareUrl}
-                label={t('storageShare.linkLabel', 'Share link')}
+                label={t("storageShare.linkLabel", "Share link")}
                 rightSection={
                   <Button
                     variant="subtle"
@@ -223,7 +216,7 @@ const ShareFileModal: React.FC<ShareFileModalProps> = ({
                     leftSection={<ContentCopyRoundedIcon style={{ fontSize: 16 }} />}
                     onClick={handleCopyLink}
                   >
-                    {t('storageShare.copy', 'Copy')}
+                    {t("storageShare.copy", "Copy")}
                   </Button>
                 }
               />
@@ -234,22 +227,22 @@ const ShareFileModal: React.FC<ShareFileModalProps> = ({
         <Paper withBorder radius="md" p="md">
           <Stack gap="xs">
             <Text size="sm" fw={500}>
-              {t('storageShare.linkAccessTitle', 'Share link access')}
+              {t("storageShare.linkAccessTitle", "Share link access")}
             </Text>
             <Select
-              label={t('storageShare.roleLabel', 'Role')}
+              label={t("storageShare.roleLabel", "Role")}
               value={shareRole}
-              onChange={(value) => setShareRole((value as typeof shareRole) || 'editor')}
+              onChange={(value) => setShareRole((value as typeof shareRole) || "editor")}
               comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_FILE_MANAGER_MODAL + 10 }}
               data={[
-                { value: 'editor', label: t('storageShare.roleEditor', 'Editor') },
-                { value: 'commenter', label: t('storageShare.roleCommenter', 'Commenter') },
-                { value: 'viewer', label: t('storageShare.roleViewer', 'Viewer') },
+                { value: "editor", label: t("storageShare.roleEditor", "Editor") },
+                { value: "commenter", label: t("storageShare.roleCommenter", "Commenter") },
+                { value: "viewer", label: t("storageShare.roleViewer", "Viewer") },
               ]}
             />
-            {shareRole === 'commenter' && (
+            {shareRole === "commenter" && (
               <Text size="xs" c="dimmed">
-                {t('storageShare.commenterHint', 'Commenting is coming soon.')}
+                {t("storageShare.commenterHint", "Commenting is coming soon.")}
               </Text>
             )}
           </Stack>
@@ -257,7 +250,7 @@ const ShareFileModal: React.FC<ShareFileModalProps> = ({
 
         <Group justify="flex-end" gap="sm">
           <Button variant="default" onClick={onClose} disabled={isWorking}>
-            {t('cancel', 'Cancel')}
+            {t("cancel", "Cancel")}
           </Button>
           <Button
             leftSection={<LinkIcon style={{ fontSize: 18 }} />}
@@ -265,7 +258,7 @@ const ShareFileModal: React.FC<ShareFileModalProps> = ({
             loading={isWorking}
             disabled={!shareLinksEnabled}
           >
-            {t('storageShare.generate', 'Generate Link')}
+            {t("storageShare.generate", "Generate Link")}
           </Button>
         </Group>
       </Stack>
diff --git a/frontend/src/core/components/shared/ShareManagementModal.tsx b/frontend/src/core/components/shared/ShareManagementModal.tsx
index d3c62a4f4e..4837b0cac3 100644
--- a/frontend/src/core/components/shared/ShareManagementModal.tsx
+++ b/frontend/src/core/components/shared/ShareManagementModal.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import {
   Modal,
   Stack,
@@ -12,21 +12,21 @@ import {
   SimpleGrid,
   ScrollArea,
   Select,
-} from '@mantine/core';
-import ContentCopyRoundedIcon from '@mui/icons-material/ContentCopyRounded';
-import DeleteIcon from '@mui/icons-material/Delete';
-import HistoryIcon from '@mui/icons-material/History';
-import LinkIcon from '@mui/icons-material/Link';
-import { useTranslation } from 'react-i18next';
+} from "@mantine/core";
+import ContentCopyRoundedIcon from "@mui/icons-material/ContentCopyRounded";
+import DeleteIcon from "@mui/icons-material/Delete";
+import HistoryIcon from "@mui/icons-material/History";
+import LinkIcon from "@mui/icons-material/Link";
+import { useTranslation } from "react-i18next";
 
-import apiClient from '@app/services/apiClient';
-import { absoluteWithBasePath } from '@app/constants/app';
-import { alert } from '@app/components/toast';
-import { Z_INDEX_OVER_FILE_MANAGER_MODAL } from '@app/styles/zIndex';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
-import type { StirlingFileStub } from '@app/types/fileContext';
-import { fileStorage } from '@app/services/fileStorage';
-import { useFileActions } from '@app/contexts/FileContext';
+import apiClient from "@app/services/apiClient";
+import { absoluteWithBasePath } from "@app/constants/app";
+import { alert } from "@app/components/toast";
+import { Z_INDEX_OVER_FILE_MANAGER_MODAL } from "@app/styles/zIndex";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
+import type { StirlingFileStub } from "@app/types/fileContext";
+import { fileStorage } from "@app/services/fileStorage";
+import { useFileActions } from "@app/contexts/FileContext";
 
 interface ShareLinkResponse {
   token: string;
@@ -53,11 +53,7 @@ interface ShareManagementModalProps {
   file: StirlingFileStub;
 }
 
-const ShareManagementModal: React.FC<ShareManagementModalProps> = ({
-  opened,
-  onClose,
-  file,
-}) => {
+const ShareManagementModal: React.FC<ShareManagementModalProps> = ({ opened, onClose, file }) => {
   const { t } = useTranslation();
   const { config } = useAppConfig();
   const sharingEnabled = config?.storageSharingEnabled === true;
@@ -68,8 +64,8 @@ const ShareManagementModal: React.FC<ShareManagementModalProps> = ({
   const [shareLinks, setShareLinks] = useState<ShareLinkResponse[]>([]);
   const [activityMap, setActivityMap] = useState<Record<string, ShareLinkAccessResponse[]>>({});
   const [sharedUsers, setSharedUsers] = useState<Array<{ username: string; accessRole?: string | null }>>([]);
-  const [shareUsername, setShareUsername] = useState('');
-  const [shareRole, setShareRole] = useState<'editor' | 'commenter' | 'viewer'>('editor');
+  const [shareUsername, setShareUsername] = useState("");
+  const [shareRole, setShareRole] = useState<"editor" | "commenter" | "viewer">("editor");
   const [showEmailWarning, setShowEmailWarning] = useState(false);
   const [selectedActivityToken, setSelectedActivityToken] = useState<string | null>(null);
   const [confirmRevokeToken, setConfirmRevokeToken] = useState<string | null>(null);
@@ -79,32 +75,27 @@ const ShareManagementModal: React.FC<ShareManagementModalProps> = ({
   const lowerShareUsername = normalizedShareUsername.toLowerCase();
   const isEmailInput = /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(normalizedShareUsername);
   const isSimpleUsername = /^[A-Za-z0-9@._+-]{3,50}$/.test(normalizedShareUsername);
-  const isReservedUsername =
-    lowerShareUsername === 'all_users' || lowerShareUsername === 'anonymoususer';
-  const isValidShareUsername =
-    normalizedShareUsername.length > 0 && !isReservedUsername && (isEmailInput || isSimpleUsername);
+  const isReservedUsername = lowerShareUsername === "all_users" || lowerShareUsername === "anonymoususer";
+  const isValidShareUsername = normalizedShareUsername.length > 0 && !isReservedUsername && (isEmailInput || isSimpleUsername);
   const shareUsernameError =
     normalizedShareUsername.length > 0 && !isValidShareUsername
-      ? t(
-          'storageShare.invalidUsername',
-          'Enter a valid username or email address.'
-        )
+      ? t("storageShare.invalidUsername", "Enter a valid username or email address.")
       : null;
 
   const shareBaseUrl = useMemo(() => {
-    const frontendUrl = (config?.frontendUrl || '').trim();
+    const frontendUrl = (config?.frontendUrl || "").trim();
     if (frontendUrl) {
       try {
         const parsed = new URL(frontendUrl);
-        if (parsed.protocol === 'http:' || parsed.protocol === 'https:') {
-          const normalized = frontendUrl.endsWith('/') ? frontendUrl.slice(0, -1) : frontendUrl;
+        if (parsed.protocol === "http:" || parsed.protocol === "https:") {
+          const normalized = frontendUrl.endsWith("/") ? frontendUrl.slice(0, -1) : frontendUrl;
           return `${normalized}/share/`;
         }
       } catch {
         // invalid URL — fall through to default
       }
     }
-    return absoluteWithBasePath('/share/');
+    return absoluteWithBasePath("/share/");
   }, [config?.frontendUrl]);
 
   const loadShareLinks = useCallback(async () => {
@@ -112,24 +103,21 @@ const ShareManagementModal: React.FC<ShareManagementModalProps> = ({
     setIsLoading(true);
     setErrorMessage(null);
     try {
-      const response = await apiClient.get<StoredFileResponse>(
-        `/api/v1/storage/files/${file.remoteStorageId}`,
-        { suppressErrorToast: true }
-      );
+      const response = await apiClient.get<StoredFileResponse>(`/api/v1/storage/files/${file.remoteStorageId}`, {
+        suppressErrorToast: true,
+      });
       const links = response.data?.shareLinks ?? [];
       const users =
         response.data?.sharedUsers ??
         (response.data?.sharedWithUsers ?? []).map((username) => ({
           username,
-          accessRole: 'editor',
+          accessRole: "editor",
         }));
       setShareLinks(links);
       setSharedUsers(users);
     } catch (error) {
-      console.error('Failed to load share links:', error);
-      setErrorMessage(
-        t('storageShare.manageLoadFailed', 'Unable to load share links.')
-      );
+      console.error("Failed to load share links:", error);
+      setErrorMessage(t("storageShare.manageLoadFailed", "Unable to load share links."));
     } finally {
       setIsLoading(false);
     }
@@ -139,7 +127,7 @@ const ShareManagementModal: React.FC<ShareManagementModalProps> = ({
     if (opened) {
       loadShareLinks();
       setActivityMap({});
-      setShareRole('editor');
+      setShareRole("editor");
       setSelectedActivityToken(null);
     }
   }, [opened, loadShareLinks]);
@@ -158,117 +146,120 @@ const ShareManagementModal: React.FC<ShareManagementModalProps> = ({
     }
   }, [opened, selectedActivityToken, shareLinks]);
 
-  const createShareLink = useCallback(
-    async () => {
+  const createShareLink = useCallback(async () => {
+    if (!file.remoteStorageId) return;
+    setIsLoading(true);
+    setErrorMessage(null);
+    try {
+      const response = await apiClient.post(`/api/v1/storage/files/${file.remoteStorageId}/shares/links`, {
+        accessRole: shareRole,
+      });
+      const token = response.data?.token as string | undefined;
+      if (token) {
+        setShareLinks((prev) => [
+          ...prev,
+          {
+            token,
+            accessRole: shareRole,
+            createdAt: new Date().toISOString(),
+          },
+        ]);
+        actions.updateStirlingFileStub(file.id, { remoteHasShareLinks: true });
+        await fileStorage.updateFileMetadata(file.id, { remoteHasShareLinks: true });
+        alert({
+          alertType: "success",
+          title: t("storageShare.generated", "Share link generated"),
+          expandable: false,
+          durationMs: 2500,
+        });
+      }
+    } catch (error: any) {
+      console.error("Failed to create share link:", error);
+      setErrorMessage(t("storageShare.failure", "Unable to generate a share link. Please try again."));
+    } finally {
+      setIsLoading(false);
+    }
+  }, [actions, file.id, file.remoteStorageId, shareRole, t]);
+
+  const handleCopyLink = useCallback(
+    async (token: string) => {
+      try {
+        await navigator.clipboard.writeText(`${shareBaseUrl}${token}`);
+        alert({
+          alertType: "success",
+          title: t("storageShare.copied", "Link copied to clipboard"),
+          expandable: false,
+          durationMs: 2000,
+        });
+      } catch (error) {
+        console.error("Failed to copy share link:", error);
+        alert({
+          alertType: "warning",
+          title: t("storageShare.copyFailed", "Copy failed"),
+          expandable: false,
+          durationMs: 2500,
+        });
+      }
+    },
+    [shareBaseUrl, t],
+  );
+
+  const handleRevokeLink = useCallback(
+    async (token: string) => {
       if (!file.remoteStorageId) return;
       setIsLoading(true);
-      setErrorMessage(null);
+      setConfirmRevokeToken(null);
       try {
-        const response = await apiClient.post(
-          `/api/v1/storage/files/${file.remoteStorageId}/shares/links`,
-          { accessRole: shareRole }
-        );
-        const token = response.data?.token as string | undefined;
-        if (token) {
-          setShareLinks((prev) => [
-            ...prev,
-            {
-              token,
-              accessRole: shareRole,
-              createdAt: new Date().toISOString(),
-            },
-          ]);
-          actions.updateStirlingFileStub(file.id, { remoteHasShareLinks: true });
-          await fileStorage.updateFileMetadata(file.id, { remoteHasShareLinks: true });
-          alert({
-            alertType: 'success',
-            title: t('storageShare.generated', 'Share link generated'),
-            expandable: false,
-            durationMs: 2500,
-          });
-        }
-      } catch (error: any) {
-        console.error('Failed to create share link:', error);
-        setErrorMessage(
-          t('storageShare.failure', 'Unable to generate a share link. Please try again.')
-        );
+        await apiClient.delete(`/api/v1/storage/files/${file.remoteStorageId}/shares/links/${token}`);
+        // Compute before setShareLinks so we don't read stale closure state after the update
+        const nextHasLinks = shareLinks.filter((link) => link.token !== token).length > 0;
+        setShareLinks((prev) => prev.filter((link) => link.token !== token));
+        setActivityMap((prev) => {
+          const updated = { ...prev };
+          delete updated[token];
+          return updated;
+        });
+        setSelectedActivityToken((prev) => (prev === token ? null : prev));
+        actions.updateStirlingFileStub(file.id, { remoteHasShareLinks: nextHasLinks });
+        await fileStorage.updateFileMetadata(file.id, { remoteHasShareLinks: nextHasLinks });
+        alert({
+          alertType: "success",
+          title: t("storageShare.revoked", "Share link removed"),
+          expandable: false,
+          durationMs: 2500,
+        });
+      } catch (error) {
+        console.error("Failed to revoke share link:", error);
+        setErrorMessage(t("storageShare.revokeFailed", "Unable to remove the share link."));
       } finally {
         setIsLoading(false);
       }
     },
-    [actions, file.id, file.remoteStorageId, shareRole, t]
+    [actions, file.remoteStorageId, shareLinks, t],
   );
 
-  const handleCopyLink = useCallback(async (token: string) => {
-    try {
-      await navigator.clipboard.writeText(`${shareBaseUrl}${token}`);
-      alert({
-        alertType: 'success',
-        title: t('storageShare.copied', 'Link copied to clipboard'),
-        expandable: false,
-        durationMs: 2000,
-      });
-    } catch (error) {
-      console.error('Failed to copy share link:', error);
-      alert({
-        alertType: 'warning',
-        title: t('storageShare.copyFailed', 'Copy failed'),
-        expandable: false,
-        durationMs: 2500,
-      });
-    }
-  }, [shareBaseUrl, t]);
-
-  const handleRevokeLink = useCallback(async (token: string) => {
-    if (!file.remoteStorageId) return;
-    setIsLoading(true);
-    setConfirmRevokeToken(null);
-    try {
-      await apiClient.delete(`/api/v1/storage/files/${file.remoteStorageId}/shares/links/${token}`);
-      // Compute before setShareLinks so we don't read stale closure state after the update
-      const nextHasLinks = shareLinks.filter((link) => link.token !== token).length > 0;
-      setShareLinks((prev) => prev.filter((link) => link.token !== token));
-      setActivityMap((prev) => {
-        const updated = { ...prev };
-        delete updated[token];
-        return updated;
-      });
-      setSelectedActivityToken((prev) => (prev === token ? null : prev));
-      actions.updateStirlingFileStub(file.id, { remoteHasShareLinks: nextHasLinks });
-      await fileStorage.updateFileMetadata(file.id, { remoteHasShareLinks: nextHasLinks });
-      alert({
-        alertType: 'success',
-        title: t('storageShare.revoked', 'Share link removed'),
-        expandable: false,
-        durationMs: 2500,
-      });
-    } catch (error) {
-      console.error('Failed to revoke share link:', error);
-      setErrorMessage(t('storageShare.revokeFailed', 'Unable to remove the share link.'));
-    } finally {
-      setIsLoading(false);
-    }
-  }, [actions, file.remoteStorageId, shareLinks, t]);
-
-  const handleLoadActivity = useCallback(async (token: string) => {
-    if (!file.remoteStorageId) return;
-    setIsLoading(true);
-    try {
-      const response = await apiClient.get<ShareLinkAccessResponse[]>(
-        `/api/v1/storage/files/${file.remoteStorageId}/shares/links/${token}/accesses`,
-        { suppressErrorToast: true }
-      );
-      setActivityMap((prev) => ({
-        ...prev,
-        [token]: response.data ?? [],
-      }));
-    } catch (error) {
-      console.error('Failed to load share activity:', error);
-      setErrorMessage(t('storageShare.accessFailed', 'Unable to load activity.'));
-    } finally {
-      setIsLoading(false);
-    }
-  }, [file.remoteStorageId, t]);
+  const handleLoadActivity = useCallback(
+    async (token: string) => {
+      if (!file.remoteStorageId) return;
+      setIsLoading(true);
+      try {
+        const response = await apiClient.get<ShareLinkAccessResponse[]>(
+          `/api/v1/storage/files/${file.remoteStorageId}/shares/links/${token}/accesses`,
+          { suppressErrorToast: true },
+        );
+        setActivityMap((prev) => ({
+          ...prev,
+          [token]: response.data ?? [],
+        }));
+      } catch (error) {
+        console.error("Failed to load share activity:", error);
+        setErrorMessage(t("storageShare.accessFailed", "Unable to load activity."));
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [file.remoteStorageId, t],
+  );
 
   useEffect(() => {
     if (!selectedActivityToken) return;
@@ -277,54 +268,51 @@ const ShareManagementModal: React.FC<ShareManagementModalProps> = ({
     }
   }, [activityMap, handleLoadActivity, selectedActivityToken]);
 
-  const handleAddUser = useCallback(async (forceEmailConfirm = false) => {
-    if (!file.remoteStorageId) return;
-    const trimmed = shareUsername.trim();
-    if (!trimmed) return;
-    if (!isValidShareUsername) {
-      return;
-    }
-    if (isEmailInput && !forceEmailConfirm) {
-      setShowEmailWarning(true);
-      return;
-    }
-    setIsLoading(true);
-    setErrorMessage(null);
-    try {
-      await apiClient.post(`/api/v1/storage/files/${file.remoteStorageId}/shares/users`, {
-        username: trimmed,
-        accessRole: shareRole,
-      });
-      setSharedUsers((prev) => {
-        if (prev.some((user) => user.username === trimmed)) {
-          return prev.map((user) =>
-            user.username === trimmed ? { ...user, accessRole: shareRole } : user
-          );
-        }
-        return [...prev, { username: trimmed, accessRole: shareRole }].sort((a, b) =>
-          a.username.localeCompare(b.username)
-        );
-      });
-      setShareUsername('');
-      setShowEmailWarning(false);
-      alert({
-        alertType: 'success',
-        title: t('storageShare.userAdded', 'User added to shared list.'),
-        expandable: false,
-        durationMs: 2500,
-      });
-    } catch (error) {
-      console.error('Failed to share with user:', error);
-      setErrorMessage(
-        t('storageShare.userAddFailed', 'Unable to share with that user.')
-      );
-    } finally {
-      setIsLoading(false);
-    }
-  }, [file.remoteStorageId, isEmailInput, isValidShareUsername, shareRole, shareUsername, t]);
+  const handleAddUser = useCallback(
+    async (forceEmailConfirm = false) => {
+      if (!file.remoteStorageId) return;
+      const trimmed = shareUsername.trim();
+      if (!trimmed) return;
+      if (!isValidShareUsername) {
+        return;
+      }
+      if (isEmailInput && !forceEmailConfirm) {
+        setShowEmailWarning(true);
+        return;
+      }
+      setIsLoading(true);
+      setErrorMessage(null);
+      try {
+        await apiClient.post(`/api/v1/storage/files/${file.remoteStorageId}/shares/users`, {
+          username: trimmed,
+          accessRole: shareRole,
+        });
+        setSharedUsers((prev) => {
+          if (prev.some((user) => user.username === trimmed)) {
+            return prev.map((user) => (user.username === trimmed ? { ...user, accessRole: shareRole } : user));
+          }
+          return [...prev, { username: trimmed, accessRole: shareRole }].sort((a, b) => a.username.localeCompare(b.username));
+        });
+        setShareUsername("");
+        setShowEmailWarning(false);
+        alert({
+          alertType: "success",
+          title: t("storageShare.userAdded", "User added to shared list."),
+          expandable: false,
+          durationMs: 2500,
+        });
+      } catch (error) {
+        console.error("Failed to share with user:", error);
+        setErrorMessage(t("storageShare.userAddFailed", "Unable to share with that user."));
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [file.remoteStorageId, isEmailInput, isValidShareUsername, shareRole, shareUsername, t],
+  );
 
   const handleUpdateUserRole = useCallback(
-    async (username: string, nextRole: 'editor' | 'commenter' | 'viewer') => {
+    async (username: string, nextRole: "editor" | "commenter" | "viewer") => {
       if (!file.remoteStorageId) return;
       setIsLoading(true);
       setErrorMessage(null);
@@ -333,70 +321,57 @@ const ShareManagementModal: React.FC<ShareManagementModalProps> = ({
           username,
           accessRole: nextRole,
         });
-        setSharedUsers((prev) =>
-          prev.map((user) =>
-            user.username === username ? { ...user, accessRole: nextRole } : user
-          )
-        );
+        setSharedUsers((prev) => prev.map((user) => (user.username === username ? { ...user, accessRole: nextRole } : user)));
         alert({
-          alertType: 'success',
-          title: t('storageShare.userAdded', 'User added to shared list.'),
+          alertType: "success",
+          title: t("storageShare.userAdded", "User added to shared list."),
           expandable: false,
           durationMs: 2500,
         });
       } catch (error) {
-        console.error('Failed to update shared user role:', error);
-        setErrorMessage(
-          t('storageShare.userAddFailed', 'Unable to share with that user.')
-        );
+        console.error("Failed to update shared user role:", error);
+        setErrorMessage(t("storageShare.userAddFailed", "Unable to share with that user."));
       } finally {
         setIsLoading(false);
       }
     },
-    [file.remoteStorageId, t]
+    [file.remoteStorageId, t],
   );
 
-  const handleRemoveUser = useCallback(async (username: string) => {
-    if (!file.remoteStorageId) return;
-    setIsLoading(true);
-    setErrorMessage(null);
-    setConfirmRemoveUser(null);
-    try {
-      await apiClient.delete(
-        `/api/v1/storage/files/${file.remoteStorageId}/shares/users/${encodeURIComponent(
-          username
-        )}`
-      );
-      setSharedUsers((prev) => prev.filter((user) => user.username !== username));
-      alert({
-        alertType: 'success',
-        title: t('storageShare.userRemoved', 'User removed from shared list.'),
-        expandable: false,
-        durationMs: 2500,
-      });
-    } catch (error) {
-      console.error('Failed to remove shared user:', error);
-      setErrorMessage(
-        t('storageShare.userRemoveFailed', 'Unable to remove that user.')
-      );
-    } finally {
-      setIsLoading(false);
-    }
-  }, [file.remoteStorageId, t]);
+  const handleRemoveUser = useCallback(
+    async (username: string) => {
+      if (!file.remoteStorageId) return;
+      setIsLoading(true);
+      setErrorMessage(null);
+      setConfirmRemoveUser(null);
+      try {
+        await apiClient.delete(`/api/v1/storage/files/${file.remoteStorageId}/shares/users/${encodeURIComponent(username)}`);
+        setSharedUsers((prev) => prev.filter((user) => user.username !== username));
+        alert({
+          alertType: "success",
+          title: t("storageShare.userRemoved", "User removed from shared list."),
+          expandable: false,
+          durationMs: 2500,
+        });
+      } catch (error) {
+        console.error("Failed to remove shared user:", error);
+        setErrorMessage(t("storageShare.userRemoveFailed", "Unable to remove that user."));
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [file.remoteStorageId, t],
+  );
 
-  const selectedActivity = selectedActivityToken
-    ? activityMap[selectedActivityToken]
-    : undefined;
-  const selectedLink = selectedActivityToken
-    ? shareLinks.find((link) => link.token === selectedActivityToken)
-    : undefined;
+  const selectedActivity = selectedActivityToken ? activityMap[selectedActivityToken] : undefined;
+  const selectedLink = selectedActivityToken ? shareLinks.find((link) => link.token === selectedActivityToken) : undefined;
 
   return (
     <Modal
       opened={opened}
       onClose={onClose}
       centered
-      title={t('storageShare.manageTitle', 'Manage Sharing')}
+      title={t("storageShare.manageTitle", "Manage Sharing")}
       zIndex={Z_INDEX_OVER_FILE_MANAGER_MODAL}
       size="xl"
       overlayProps={{ blur: 8 }}
@@ -404,21 +379,24 @@ const ShareManagementModal: React.FC<ShareManagementModalProps> = ({
       <Stack gap="lg">
         <Stack gap={4}>
           <Text size="sm" c="dimmed">
-            {t('storageShare.manageDescription', 'Create and manage links to share this file.')}
+            {t("storageShare.manageDescription", "Create and manage links to share this file.")}
           </Text>
           <Text size="sm">
-            {t('storageShare.fileLabel', 'File')}: <Text span fw={600}>{file.name}</Text>
+            {t("storageShare.fileLabel", "File")}:{" "}
+            <Text span fw={600}>
+              {file.name}
+            </Text>
           </Text>
         </Stack>
 
         {errorMessage && (
-          <Alert color="red" title={t('storageShare.errorTitle', 'Sharing error')}>
+          <Alert color="red" title={t("storageShare.errorTitle", "Sharing error")}>
             {errorMessage}
           </Alert>
         )}
         {!sharingEnabled && (
-          <Alert color="yellow" title={t('storageShare.sharingDisabled', 'Sharing is disabled.')}>
-            {t('storageShare.sharingDisabledBody', 'Sharing has been disabled by your server settings.')}
+          <Alert color="yellow" title={t("storageShare.sharingDisabled", "Sharing is disabled.")}>
+            {t("storageShare.sharingDisabledBody", "Sharing has been disabled by your server settings.")}
           </Alert>
         )}
 
@@ -429,23 +407,23 @@ const ShareManagementModal: React.FC<ShareManagementModalProps> = ({
                 <Stack gap="sm">
                   <Group justify="space-between">
                     <Text size="sm" fw={600}>
-                      {t('storageShare.linkAccessTitle', 'Share link access')}
+                      {t("storageShare.linkAccessTitle", "Share link access")}
                     </Text>
                   </Group>
                   <Select
-                    label={t('storageShare.roleLabel', 'Role')}
+                    label={t("storageShare.roleLabel", "Role")}
                     value={shareRole}
-                    onChange={(value) => setShareRole((value as typeof shareRole) || 'editor')}
+                    onChange={(value) => setShareRole((value as typeof shareRole) || "editor")}
                     comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_FILE_MANAGER_MODAL + 10 }}
                     data={[
-                      { value: 'editor', label: t('storageShare.roleEditor', 'Editor') },
-                      { value: 'commenter', label: t('storageShare.roleCommenter', 'Commenter') },
-                      { value: 'viewer', label: t('storageShare.roleViewer', 'Viewer') },
+                      { value: "editor", label: t("storageShare.roleEditor", "Editor") },
+                      { value: "commenter", label: t("storageShare.roleCommenter", "Commenter") },
+                      { value: "viewer", label: t("storageShare.roleViewer", "Viewer") },
                     ]}
                   />
-                  {shareRole === 'commenter' && (
+                  {shareRole === "commenter" && (
                     <Text size="xs" c="dimmed">
-                      {t('storageShare.commenterHint', 'Commenting is coming soon.')}
+                      {t("storageShare.commenterHint", "Commenting is coming soon.")}
                     </Text>
                   )}
                   <Group justify="flex-end" gap="sm">
@@ -454,7 +432,7 @@ const ShareManagementModal: React.FC<ShareManagementModalProps> = ({
                       onClick={() => createShareLink()}
                       loading={isLoading}
                     >
-                      {t('storageShare.generate', 'Generate Link')}
+                      {t("storageShare.generate", "Generate Link")}
                     </Button>
                   </Group>
                 </Stack>
@@ -464,19 +442,19 @@ const ShareManagementModal: React.FC<ShareManagementModalProps> = ({
             <Paper withBorder radius="md" p="md">
               <Stack gap="sm">
                 <Text size="sm" fw={600}>
-                  {t('storageShare.sharedUsersTitle', 'Shared users')}
+                  {t("storageShare.sharedUsersTitle", "Shared users")}
                 </Text>
                 <Group align="flex-end" gap="sm">
                   <TextInput
-                    label={t('storageShare.usernameLabel', 'Username or email')}
-                    placeholder={t('storageShare.usernamePlaceholder', 'Enter a username or email')}
+                    label={t("storageShare.usernameLabel", "Username or email")}
+                    placeholder={t("storageShare.usernamePlaceholder", "Enter a username or email")}
                     value={shareUsername}
                     onChange={(event) => {
                       setShareUsername(event.currentTarget.value);
                       setShowEmailWarning(false);
                     }}
                     onKeyDown={(event) => {
-                      if (event.key === 'Enter') {
+                      if (event.key === "Enter") {
                         event.preventDefault();
                         void handleAddUser();
                       }
@@ -488,31 +466,24 @@ const ShareManagementModal: React.FC<ShareManagementModalProps> = ({
                     onClick={() => handleAddUser()}
                     disabled={!sharingEnabled || isLoading || !normalizedShareUsername || !!shareUsernameError}
                   >
-                    {t('storageShare.addUser', 'Add')}
+                    {t("storageShare.addUser", "Add")}
                   </Button>
                 </Group>
                 {showEmailWarning && (
-                  <Alert color="yellow" title={t('storageShare.emailWarningTitle', 'Email address')} variant="light">
+                  <Alert color="yellow" title={t("storageShare.emailWarningTitle", "Email address")} variant="light">
                     <Stack gap="xs">
                       <Text size="sm">
                         {t(
-                          'storageShare.emailWarningBody',
-                          'This looks like an email address. If this person is not already a Stirling PDF user, they will not be able to access the file.'
+                          "storageShare.emailWarningBody",
+                          "This looks like an email address. If this person is not already a Stirling PDF user, they will not be able to access the file.",
                         )}
                       </Text>
                       <Group justify="flex-end" gap="sm">
-                        <Button
-                          variant="default"
-                          onClick={() => setShowEmailWarning(false)}
-                          disabled={isLoading}
-                        >
-                          {t('cancel', 'Cancel')}
+                        <Button variant="default" onClick={() => setShowEmailWarning(false)} disabled={isLoading}>
+                          {t("cancel", "Cancel")}
                         </Button>
-                        <Button
-                          onClick={() => handleAddUser(true)}
-                          loading={isLoading}
-                        >
-                          {t('storageShare.emailWarningConfirm', 'Share anyway')}
+                        <Button onClick={() => handleAddUser(true)} loading={isLoading}>
+                          {t("storageShare.emailWarningConfirm", "Share anyway")}
                         </Button>
                       </Group>
                     </Stack>
@@ -520,7 +491,7 @@ const ShareManagementModal: React.FC<ShareManagementModalProps> = ({
                 )}
                 {sharedUsers.length === 0 ? (
                   <Text size="sm" c="dimmed">
-                    {t('storageShare.noSharedUsers', 'No users have access yet.')}
+                    {t("storageShare.noSharedUsers", "No users have access yet.")}
                   </Text>
                 ) : (
                   <Stack gap="xs">
@@ -528,24 +499,24 @@ const ShareManagementModal: React.FC<ShareManagementModalProps> = ({
                       <Group key={user.username} justify="space-between" align="flex-start">
                         <Stack gap={2}>
                           <Text size="sm">{user.username}</Text>
-                          {user.accessRole === 'commenter' && (
+                          {user.accessRole === "commenter" && (
                             <Text size="xs" c="dimmed">
-                              {t('storageShare.commenterHint', 'Commenting is coming soon.')}
+                              {t("storageShare.commenterHint", "Commenting is coming soon.")}
                             </Text>
                           )}
                         </Stack>
                         <Group gap="xs" align="center">
                           <Select
-                            value={user.accessRole ?? 'editor'}
+                            value={user.accessRole ?? "editor"}
                             onChange={(value) => {
-                              const nextRole = (value as 'editor' | 'commenter' | 'viewer') || 'editor';
+                              const nextRole = (value as "editor" | "commenter" | "viewer") || "editor";
                               void handleUpdateUserRole(user.username, nextRole);
                             }}
                             comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_FILE_MANAGER_MODAL + 10 }}
                             data={[
-                              { value: 'editor', label: t('storageShare.roleEditor', 'Editor') },
-                              { value: 'commenter', label: t('storageShare.roleCommenter', 'Commenter') },
-                              { value: 'viewer', label: t('storageShare.roleViewer', 'Viewer') },
+                              { value: "editor", label: t("storageShare.roleEditor", "Editor") },
+                              { value: "commenter", label: t("storageShare.roleCommenter", "Commenter") },
+                              { value: "viewer", label: t("storageShare.roleViewer", "Viewer") },
                             ]}
                             size="xs"
                           />
@@ -555,17 +526,15 @@ const ShareManagementModal: React.FC<ShareManagementModalProps> = ({
                                 variant="filled"
                                 size="xs"
                                 color="red"
-                                onClick={() => { void handleRemoveUser(user.username); }}
+                                onClick={() => {
+                                  void handleRemoveUser(user.username);
+                                }}
                                 loading={isLoading}
                               >
-                                {t('confirm', 'Confirm')}
+                                {t("confirm", "Confirm")}
                               </Button>
-                              <Button
-                                variant="default"
-                                size="xs"
-                                onClick={() => setConfirmRemoveUser(null)}
-                              >
-                                {t('cancel', 'Cancel')}
+                              <Button variant="default" size="xs" onClick={() => setConfirmRemoveUser(null)}>
+                                {t("cancel", "Cancel")}
                               </Button>
                             </Group>
                           ) : (
@@ -577,7 +546,7 @@ const ShareManagementModal: React.FC<ShareManagementModalProps> = ({
                               onClick={() => setConfirmRemoveUser(user.username)}
                               disabled={isLoading}
                             >
-                              {t('storageShare.removeUser', 'Remove')}
+                              {t("storageShare.removeUser", "Remove")}
                             </Button>
                           )}
                         </Group>
@@ -593,7 +562,7 @@ const ShareManagementModal: React.FC<ShareManagementModalProps> = ({
                 <Stack gap="sm">
                   <Group justify="space-between">
                     <Text size="sm" fw={600}>
-                      {t('storageShare.linkLabel', 'Share link')}
+                      {t("storageShare.linkLabel", "Share link")}
                     </Text>
                     {shareLinks.length > 0 && (
                       <Badge variant="light" color="blue">
@@ -604,14 +573,14 @@ const ShareManagementModal: React.FC<ShareManagementModalProps> = ({
 
                   {shareLinks.length === 0 && !isLoading && (
                     <Text size="sm" c="dimmed">
-                      {t('storageShare.noLinks', 'No active share links yet.')}
+                      {t("storageShare.noLinks", "No active share links yet.")}
                     </Text>
                   )}
 
                   {shareLinks.map((link) => {
                     const activity = activityMap[link.token];
-                    const viewCount = activity?.filter((entry) => entry.accessType === 'VIEW').length ?? 0;
-                    const downloadCount = activity?.filter((entry) => entry.accessType === 'DOWNLOAD').length ?? 0;
+                    const viewCount = activity?.filter((entry) => entry.accessType === "VIEW").length ?? 0;
+                    const downloadCount = activity?.filter((entry) => entry.accessType === "DOWNLOAD").length ?? 0;
                     const lastAccessedAt = activity?.[0]?.accessedAt;
                     const isSelected = selectedActivityToken === link.token;
                     return (
@@ -620,7 +589,7 @@ const ShareManagementModal: React.FC<ShareManagementModalProps> = ({
                           <TextInput
                             readOnly
                             value={`${shareBaseUrl}${link.token}`}
-                            label={t('storageShare.linkLabel', 'Share link')}
+                            label={t("storageShare.linkLabel", "Share link")}
                             rightSection={
                               <Button
                                 variant="subtle"
@@ -628,7 +597,7 @@ const ShareManagementModal: React.FC<ShareManagementModalProps> = ({
                                 leftSection={<ContentCopyRoundedIcon style={{ fontSize: 16 }} />}
                                 onClick={() => handleCopyLink(link.token)}
                               >
-                                {t('storageShare.copy', 'Copy')}
+                                {t("storageShare.copy", "Copy")}
                               </Button>
                             }
                           />
@@ -637,40 +606,39 @@ const ShareManagementModal: React.FC<ShareManagementModalProps> = ({
                               <Group gap="xs">
                                 {link.accessRole && (
                                   <Badge variant="light" color="gray">
-                                    {link.accessRole === 'editor'
-                                      ? t('storageShare.roleEditor', 'Editor')
-                                      : link.accessRole === 'commenter'
-                                        ? t('storageShare.roleCommenter', 'Commenter')
-                                        : t('storageShare.roleViewer', 'Viewer')}
+                                    {link.accessRole === "editor"
+                                      ? t("storageShare.roleEditor", "Editor")
+                                      : link.accessRole === "commenter"
+                                        ? t("storageShare.roleCommenter", "Commenter")
+                                        : t("storageShare.roleViewer", "Viewer")}
                                   </Badge>
                                 )}
                               </Group>
                               <Group gap="sm" align="center">
                                 <Text size="xs" c="dimmed">
-                                  {t('storageShare.viewsCount', 'Views: {{count}}', { count: viewCount })}
+                                  {t("storageShare.viewsCount", "Views: {{count}}", { count: viewCount })}
                                 </Text>
                                 <Text size="xs" c="dimmed">
-                                  {t('storageShare.downloadsCount', 'Downloads: {{count}}', { count: downloadCount })}
+                                  {t("storageShare.downloadsCount", "Downloads: {{count}}", { count: downloadCount })}
                                 </Text>
                                 {lastAccessedAt && (
                                   <Text size="xs" c="dimmed">
-                                    {t('storageShare.lastAccessed', 'Last accessed')}: {new Date(lastAccessedAt).toLocaleString()}
+                                    {t("storageShare.lastAccessed", "Last accessed")}:{" "}
+                                    {new Date(lastAccessedAt).toLocaleString()}
                                   </Text>
                                 )}
                               </Group>
                             </Stack>
                             <Group gap="xs">
                               <Button
-                                variant={isSelected ? 'filled' : 'light'}
+                                variant={isSelected ? "filled" : "light"}
                                 size="xs"
                                 leftSection={<HistoryIcon style={{ fontSize: 16 }} />}
-                                onClick={() =>
-                                  setSelectedActivityToken((prev) => (prev === link.token ? null : link.token))
-                                }
+                                onClick={() => setSelectedActivityToken((prev) => (prev === link.token ? null : link.token))}
                               >
                                 {isSelected
-                                  ? t('storageShare.hideActivity', 'Hide activity')
-                                  : t('storageShare.viewActivity', 'View activity')}
+                                  ? t("storageShare.hideActivity", "Hide activity")
+                                  : t("storageShare.viewActivity", "View activity")}
                               </Button>
                               {confirmRevokeToken === link.token ? (
                                 <Group gap="xs">
@@ -678,17 +646,15 @@ const ShareManagementModal: React.FC<ShareManagementModalProps> = ({
                                     variant="filled"
                                     size="xs"
                                     color="red"
-                                    onClick={() => { void handleRevokeLink(link.token); }}
+                                    onClick={() => {
+                                      void handleRevokeLink(link.token);
+                                    }}
                                     loading={isLoading}
                                   >
-                                    {t('confirm', 'Confirm')}
+                                    {t("confirm", "Confirm")}
                                   </Button>
-                                  <Button
-                                    variant="default"
-                                    size="xs"
-                                    onClick={() => setConfirmRevokeToken(null)}
-                                  >
-                                    {t('cancel', 'Cancel')}
+                                  <Button variant="default" size="xs" onClick={() => setConfirmRevokeToken(null)}>
+                                    {t("cancel", "Cancel")}
                                   </Button>
                                 </Group>
                               ) : (
@@ -700,7 +666,7 @@ const ShareManagementModal: React.FC<ShareManagementModalProps> = ({
                                   onClick={() => setConfirmRevokeToken(link.token)}
                                   disabled={isLoading}
                                 >
-                                  {t('storageShare.removeLink', 'Remove link')}
+                                  {t("storageShare.removeLink", "Remove link")}
                                 </Button>
                               )}
                             </Group>
@@ -719,21 +685,21 @@ const ShareManagementModal: React.FC<ShareManagementModalProps> = ({
               <Stack gap="sm">
                 <Group justify="space-between">
                   <Text size="sm" fw={600}>
-                    {t('storageShare.viewActivity', 'View activity')}
+                    {t("storageShare.viewActivity", "View activity")}
                   </Text>
                   {selectedLink && selectedLink.accessRole && (
                     <Badge variant="light" color="gray">
-                      {selectedLink.accessRole === 'editor'
-                        ? t('storageShare.roleEditor', 'Editor')
-                        : selectedLink.accessRole === 'commenter'
-                          ? t('storageShare.roleCommenter', 'Commenter')
-                          : t('storageShare.roleViewer', 'Viewer')}
+                      {selectedLink.accessRole === "editor"
+                        ? t("storageShare.roleEditor", "Editor")
+                        : selectedLink.accessRole === "commenter"
+                          ? t("storageShare.roleCommenter", "Commenter")
+                          : t("storageShare.roleViewer", "Viewer")}
                     </Badge>
                   )}
                 </Group>
                 {!selectedActivityToken && (
                   <Text size="sm" c="dimmed">
-                    {t('storageShare.noActivity', 'No activity yet.')}
+                    {t("storageShare.noActivity", "No activity yet.")}
                   </Text>
                 )}
                 {selectedActivityToken && (
@@ -745,27 +711,23 @@ const ShareManagementModal: React.FC<ShareManagementModalProps> = ({
                             <Group justify="space-between">
                               <Stack gap={2}>
                                 <Text size="xs" c="dimmed">
-                                  {entry.accessedAt
-                                    ? new Date(entry.accessedAt).toLocaleString()
-                                    : t('unknown', 'Unknown')}
-                                </Text>
-                                <Text size="sm">
-                                  {entry.username || t('storageShare.unknownUser', 'Unknown user')}
+                                  {entry.accessedAt ? new Date(entry.accessedAt).toLocaleString() : t("unknown", "Unknown")}
                                 </Text>
+                                <Text size="sm">{entry.username || t("storageShare.unknownUser", "Unknown user")}</Text>
                               </Stack>
                               <Badge size="sm" variant="light">
-                                {entry.accessType === 'VIEW'
-                                  ? t('storageShare.viewed', 'Viewed')
-                                  : entry.accessType === 'DOWNLOAD'
-                                    ? t('storageShare.downloaded', 'Downloaded')
-                                    : t('storageShare.accessed', 'Accessed')}
+                                {entry.accessType === "VIEW"
+                                  ? t("storageShare.viewed", "Viewed")
+                                  : entry.accessType === "DOWNLOAD"
+                                    ? t("storageShare.downloaded", "Downloaded")
+                                    : t("storageShare.accessed", "Accessed")}
                               </Badge>
                             </Group>
                           </Paper>
                         ))
                       ) : (
                         <Text size="sm" c="dimmed">
-                          {t('storageShare.noActivity', 'No activity yet.')}
+                          {t("storageShare.noActivity", "No activity yet.")}
                         </Text>
                       )}
                     </Stack>
diff --git a/frontend/src/core/components/shared/SkeletonLoader.tsx b/frontend/src/core/components/shared/SkeletonLoader.tsx
index a95949e8f2..39b25ff52c 100644
--- a/frontend/src/core/components/shared/SkeletonLoader.tsx
+++ b/frontend/src/core/components/shared/SkeletonLoader.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import { Box, Group, Stack } from '@mantine/core';
+import React from "react";
+import { Box, Group, Stack } from "@mantine/core";
 
 interface SkeletonLoaderProps {
-  type: 'pageGrid' | 'fileGrid' | 'controls' | 'viewer' | 'block';
+  type: "pageGrid" | "fileGrid" | "controls" | "viewer" | "block";
   count?: number;
   animated?: boolean;
   width?: number | string;
@@ -10,37 +10,32 @@ interface SkeletonLoaderProps {
   radius?: number | string;
 }
 
-const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
-  type,
-  count = 8,
-  animated = true,
-  width,
-  height,
-  radius = 8,
-}) => {
-  const animationStyle = animated ? { animation: 'pulse 2s infinite' } : {};
+const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({ type, count = 8, animated = true, width, height, radius = 8 }) => {
+  const animationStyle = animated ? { animation: "pulse 2s infinite" } : {};
 
   // Generic block skeleton for inline text/inputs/etc.
   const renderBlock = () => (
     <Box
-      w={typeof width === 'number' ? `${width}px` : width}
-      h={typeof height === 'number' ? `${height}px` : height}
+      w={typeof width === "number" ? `${width}px` : width}
+      h={typeof height === "number" ? `${height}px` : height}
       bg="gray.1"
       style={{
         borderRadius: radius,
-        display: 'inline-block',
-        verticalAlign: 'middle',
-        ...animationStyle
+        display: "inline-block",
+        verticalAlign: "middle",
+        ...animationStyle,
       }}
     />
   );
 
   const renderPageGridSkeleton = () => (
-    <div style={{
-      display: 'grid',
-      gridTemplateColumns: 'repeat(auto-fill, minmax(180px, 1fr))',
-      gap: '1rem'
-    }}>
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))",
+        gap: "1rem",
+      }}
+    >
       {Array.from({ length: count }).map((_, i) => (
         <Box
           key={i}
@@ -48,9 +43,9 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
           h={240}
           bg="gray.1"
           style={{
-            borderRadius: '8px',
+            borderRadius: "8px",
             ...animationStyle,
-            animationDelay: animated ? `${i * 0.1}s` : undefined
+            animationDelay: animated ? `${i * 0.1}s` : undefined,
           }}
         />
       ))}
@@ -58,11 +53,13 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
   );
 
   const renderFileGridSkeleton = () => (
-    <div style={{
-      display: 'grid',
-      gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))',
-      gap: '1rem'
-    }}>
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
+        gap: "1rem",
+      }}
+    >
       {Array.from({ length: count }).map((_, i) => (
         <Box
           key={i}
@@ -70,9 +67,9 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
           h={280}
           bg="gray.1"
           style={{
-            borderRadius: '8px',
+            borderRadius: "8px",
             ...animationStyle,
-            animationDelay: animated ? `${i * 0.1}s` : undefined
+            animationDelay: animated ? `${i * 0.1}s` : undefined,
           }}
         />
       ))}
@@ -101,23 +98,23 @@ const SkeletonLoader: React.FC<SkeletonLoaderProps> = ({
         flex={1}
         bg="gray.1"
         style={{
-          borderRadius: '8px',
-          ...animationStyle
+          borderRadius: "8px",
+          ...animationStyle,
         }}
       />
     </Stack>
   );
 
   switch (type) {
-    case 'block':
+    case "block":
       return renderBlock();
-    case 'pageGrid':
+    case "pageGrid":
       return renderPageGridSkeleton();
-    case 'fileGrid':
+    case "fileGrid":
       return renderFileGridSkeleton();
-    case 'controls':
+    case "controls":
       return renderControlsSkeleton();
-    case 'viewer':
+    case "viewer":
       return renderViewerSkeleton();
     default:
       return null;
diff --git a/frontend/src/core/components/shared/TextInput.tsx b/frontend/src/core/components/shared/TextInput.tsx
index 0203e83c07..f733686a7e 100644
--- a/frontend/src/core/components/shared/TextInput.tsx
+++ b/frontend/src/core/components/shared/TextInput.tsx
@@ -1,7 +1,7 @@
-import React, { forwardRef } from 'react';
-import { useMantineColorScheme } from '@mantine/core';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import styles from '@app/components/shared/textInput/TextInput.module.css';
+import React, { forwardRef } from "react";
+import { useMantineColorScheme } from "@mantine/core";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import styles from "@app/components/shared/textInput/TextInput.module.css";
 
 /**
  * Props for the TextInput component
@@ -34,86 +34,88 @@ export interface TextInputProps {
   /** Whether the input is read-only (default: false) */
   readOnly?: boolean;
   /** Accessibility label */
-  'aria-label'?: string;
+  "aria-label"?: string;
   /** Focus event handler */
   onFocus?: () => void;
 }
 
-export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(({
-  id,
-  name,
-  value,
-  onChange,
-  placeholder,
-  icon,
-  showClearButton = true,
-  onClear,
-  className = '',
-  style,
-  autoComplete = 'off',
-  disabled = false,
-  readOnly = false,
-  'aria-label': ariaLabel,
-  onFocus,
-  ...props
-}, ref) => {
-  const { colorScheme } = useMantineColorScheme();
+export const TextInput = forwardRef<HTMLInputElement, TextInputProps>(
+  (
+    {
+      id,
+      name,
+      value,
+      onChange,
+      placeholder,
+      icon,
+      showClearButton = true,
+      onClear,
+      className = "",
+      style,
+      autoComplete = "off",
+      disabled = false,
+      readOnly = false,
+      "aria-label": ariaLabel,
+      onFocus,
+      ...props
+    },
+    ref,
+  ) => {
+    const { colorScheme } = useMantineColorScheme();
 
-  const handleClear = () => {
-    if (onClear) {
-      onClear();
-    } else {
-      onChange('');
-    }
-  };
+    const handleClear = () => {
+      if (onClear) {
+        onClear();
+      } else {
+        onChange("");
+      }
+    };
 
-  const shouldShowClearButton = showClearButton && value.trim().length > 0 && !disabled && !readOnly;
+    const shouldShowClearButton = showClearButton && value.trim().length > 0 && !disabled && !readOnly;
 
-  return (
-    <div className={`${styles.container} ${className}`} style={style}>
-      {icon && (
-        <span
-          className={styles.icon}
-          style={{ color: colorScheme === 'dark' ? '#FFFFFF' : '#6B7382' }}
-        >
-          {icon}
-        </span>
-      )}
-      <input
-        ref={ref}
-        type="text"
-        id={id}
-        name={name}
-        placeholder={placeholder}
-        value={value}
-        onChange={(e) => onChange(e.currentTarget.value)}
-        autoComplete={autoComplete}
-        className={styles.input}
-        disabled={disabled}
-        readOnly={readOnly}
-        aria-label={ariaLabel}
-        onFocus={onFocus}
-        style={{
-          backgroundColor: colorScheme === 'dark' ? '#4B525A' : '#FFFFFF',
-          color: colorScheme === 'dark' ? '#FFFFFF' : '#6B7382',
-          paddingRight: shouldShowClearButton ? '40px' : '12px',
-          paddingLeft: icon ? '40px' : '12px',
-        }}
-        {...props}
-      />
-      {shouldShowClearButton && (
-        <button
-          type="button"
-          className={styles.clearButton}
-          onClick={handleClear}
-          style={{ color: colorScheme === 'dark' ? '#FFFFFF' : '#6B7382' }}
-          aria-label="Clear input"
-        >
-          <LocalIcon icon="close-rounded" width="1.25rem" height="1.25rem" />
-        </button>
-      )}
-    </div>
-  );
-});
+    return (
+      <div className={`${styles.container} ${className}`} style={style}>
+        {icon && (
+          <span className={styles.icon} style={{ color: colorScheme === "dark" ? "#FFFFFF" : "#6B7382" }}>
+            {icon}
+          </span>
+        )}
+        <input
+          ref={ref}
+          type="text"
+          id={id}
+          name={name}
+          placeholder={placeholder}
+          value={value}
+          onChange={(e) => onChange(e.currentTarget.value)}
+          autoComplete={autoComplete}
+          className={styles.input}
+          disabled={disabled}
+          readOnly={readOnly}
+          aria-label={ariaLabel}
+          onFocus={onFocus}
+          style={{
+            backgroundColor: colorScheme === "dark" ? "#4B525A" : "#FFFFFF",
+            color: colorScheme === "dark" ? "#FFFFFF" : "#6B7382",
+            paddingRight: shouldShowClearButton ? "40px" : "12px",
+            paddingLeft: icon ? "40px" : "12px",
+          }}
+          {...props}
+        />
+        {shouldShowClearButton && (
+          <button
+            type="button"
+            className={styles.clearButton}
+            onClick={handleClear}
+            style={{ color: colorScheme === "dark" ? "#FFFFFF" : "#6B7382" }}
+            aria-label="Clear input"
+          >
+            <LocalIcon icon="close-rounded" width="1.25rem" height="1.25rem" />
+          </button>
+        )}
+      </div>
+    );
+  },
+);
 
-TextInput.displayName = 'TextInput';
+TextInput.displayName = "TextInput";
diff --git a/frontend/src/core/components/shared/ToolChain.tsx b/frontend/src/core/components/shared/ToolChain.tsx
index c67d894273..7d2d45c6c2 100644
--- a/frontend/src/core/components/shared/ToolChain.tsx
+++ b/frontend/src/core/components/shared/ToolChain.tsx
@@ -3,63 +3,66 @@
  * Used across FileListItem, FileDetails, and FileThumbnail for consistent display
  */
 
-import React from 'react';
-import { Text, Tooltip, Badge, Group } from '@mantine/core';
-import { ToolOperation } from '@app/types/file';
-import { useTranslation } from 'react-i18next';
-import { ToolId } from '@app/types/toolId';
+import React from "react";
+import { Text, Tooltip, Badge, Group } from "@mantine/core";
+import { ToolOperation } from "@app/types/file";
+import { useTranslation } from "react-i18next";
+import { ToolId } from "@app/types/toolId";
 
 interface ToolChainProps {
   toolChain: ToolOperation[];
   maxWidth?: string;
-  displayStyle?: 'text' | 'badges' | 'compact';
-  size?: 'xs' | 'sm' | 'md';
+  displayStyle?: "text" | "badges" | "compact";
+  size?: "xs" | "sm" | "md";
   color?: string;
 }
 
 const ToolChain: React.FC<ToolChainProps> = ({
   toolChain,
-  maxWidth = '100%',
-  displayStyle = 'text',
-  size = 'xs',
-  color = 'var(--mantine-color-blue-7)'
+  maxWidth = "100%",
+  displayStyle = "text",
+  size = "xs",
+  color = "var(--mantine-color-blue-7)",
 }) => {
   const { t } = useTranslation();
   if (!toolChain || toolChain.length === 0) return null;
 
-  const toolIds = toolChain.map(tool => tool.toolId);
+  const toolIds = toolChain.map((tool) => tool.toolId);
 
   const getToolName = (toolId: ToolId) => {
     return t(`home.${toolId}.title`, toolId);
   };
 
   // Create full tool chain for tooltip
-  const fullChainDisplay = displayStyle === 'badges' ? (
-    <Group gap="xs" wrap="wrap">
-      {toolChain.map((tool, index) => (
-        <React.Fragment key={`${tool.toolId}-${index}`}>
-          <Badge size="sm" variant="light" color="blue">
-            {getToolName(tool.toolId)}
-          </Badge>
-          {index < toolChain.length - 1 && (
-            <Text size="sm" c="dimmed">→</Text>
-          )}
-        </React.Fragment>
-      ))}
-    </Group>
-  ) : (
-    <Text size="sm">{toolIds.map(getToolName).join(' → ')}</Text>
-  );
+  const fullChainDisplay =
+    displayStyle === "badges" ? (
+      <Group gap="xs" wrap="wrap">
+        {toolChain.map((tool, index) => (
+          <React.Fragment key={`${tool.toolId}-${index}`}>
+            <Badge size="sm" variant="light" color="blue">
+              {getToolName(tool.toolId)}
+            </Badge>
+            {index < toolChain.length - 1 && (
+              <Text size="sm" c="dimmed">
+                →
+              </Text>
+            )}
+          </React.Fragment>
+        ))}
+      </Group>
+    ) : (
+      <Text size="sm">{toolIds.map(getToolName).join(" → ")}</Text>
+    );
 
   // Create truncated display based on available space
   const getTruncatedDisplay = () => {
     if (toolIds.length <= 2) {
       // Show all tools if 2 or fewer
-      return { text: toolIds.map(getToolName).join(' → '), isTruncated: false };
+      return { text: toolIds.map(getToolName).join(" → "), isTruncated: false };
     } else {
       // Show first tool ... last tool for longer chains
       return {
-        text: `${getToolName(toolIds[0])} → +${toolIds.length-2} → ${getToolName(toolIds[toolIds.length - 1])}`,
+        text: `${getToolName(toolIds[0])} → +${toolIds.length - 2} → ${getToolName(toolIds[toolIds.length - 1])}`,
         isTruncated: true,
       };
     }
@@ -68,7 +71,7 @@ const ToolChain: React.FC<ToolChainProps> = ({
   const { text: truncatedText, isTruncated } = getTruncatedDisplay();
 
   // Compact style for very small spaces
-  if (displayStyle === 'compact') {
+  if (displayStyle === "compact") {
     const compactText = toolIds.length === 1 ? getToolName(toolIds[0]) : `${toolIds.length} tools`;
     const isCompactTruncated = toolIds.length > 1;
 
@@ -78,11 +81,11 @@ const ToolChain: React.FC<ToolChainProps> = ({
         style={{
           color,
           fontWeight: 500,
-          whiteSpace: 'nowrap',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
           maxWidth: `${maxWidth}`,
-          cursor: isCompactTruncated ? 'help' : 'default'
+          cursor: isCompactTruncated ? "help" : "default",
         }}
       >
         {compactText}
@@ -93,15 +96,17 @@ const ToolChain: React.FC<ToolChainProps> = ({
       <Tooltip label={fullChainDisplay} multiline withinPortal>
         {compactElement}
       </Tooltip>
-    ) : compactElement;
+    ) : (
+      compactElement
+    );
   }
 
   // Badge style for file details
-  if (displayStyle === 'badges') {
+  if (displayStyle === "badges") {
     const isBadgesTruncated = toolChain.length > 3;
 
     const badgesElement = (
-      <div style={{ maxWidth: `${maxWidth}`, overflow: 'hidden' }}>
+      <div style={{ maxWidth: `${maxWidth}`, overflow: "hidden" }}>
         <Group gap="2px" wrap="nowrap">
           {toolChain.slice(0, 3).map((tool, index) => (
             <React.Fragment key={`${tool.toolId}-${index}`}>
@@ -109,13 +114,17 @@ const ToolChain: React.FC<ToolChainProps> = ({
                 {getToolName(tool.toolId)}
               </Badge>
               {index < Math.min(toolChain.length - 1, 2) && (
-                <Text size="xs" c="dimmed">→</Text>
+                <Text size="xs" c="dimmed">
+                  →
+                </Text>
               )}
             </React.Fragment>
           ))}
           {toolChain.length > 3 && (
             <>
-              <Text size="xs" c="dimmed">...</Text>
+              <Text size="xs" c="dimmed">
+                ...
+              </Text>
               <Badge size={size} variant="light" color="blue">
                 {getToolName(toolChain[toolChain.length - 1].toolId)}
               </Badge>
@@ -126,10 +135,12 @@ const ToolChain: React.FC<ToolChainProps> = ({
     );
 
     return isBadgesTruncated ? (
-      <Tooltip label={`${toolIds.map(getToolName).join(' → ')}`} withinPortal>
+      <Tooltip label={`${toolIds.map(getToolName).join(" → ")}`} withinPortal>
         {badgesElement}
       </Tooltip>
-    ) : badgesElement;
+    ) : (
+      badgesElement
+    );
   }
 
   // Text style (default) for file list items
@@ -139,11 +150,11 @@ const ToolChain: React.FC<ToolChainProps> = ({
       style={{
         color,
         fontWeight: 500,
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
         maxWidth: `${maxWidth}`,
-        cursor: isTruncated ? 'help' : 'default'
+        cursor: isTruncated ? "help" : "default",
       }}
     >
       {truncatedText}
@@ -154,7 +165,9 @@ const ToolChain: React.FC<ToolChainProps> = ({
     <Tooltip label={fullChainDisplay} withinPortal>
       {textElement}
     </Tooltip>
-  ) : textElement;
+  ) : (
+    textElement
+  );
 };
 
 export default ToolChain;
diff --git a/frontend/src/core/components/shared/ToolIcon.tsx b/frontend/src/core/components/shared/ToolIcon.tsx
index 75ab249ba7..d0a1c82b9b 100644
--- a/frontend/src/core/components/shared/ToolIcon.tsx
+++ b/frontend/src/core/components/shared/ToolIcon.tsx
@@ -15,7 +15,7 @@ export const ToolIcon: React.FC<ToolIconProps> = ({
   icon,
   opacity = 1,
   color = "var(--tools-text-and-icon-color)",
-  marginRight = "0.5rem"
+  marginRight = "0.5rem",
 }) => {
   return (
     <div
@@ -25,7 +25,7 @@ export const ToolIcon: React.FC<ToolIconProps> = ({
         marginRight,
         transform: "scale(0.8)",
         transformOrigin: "center",
-        opacity
+        opacity,
       }}
     >
       {icon}
diff --git a/frontend/src/core/components/shared/Tooltip.tsx b/frontend/src/core/components/shared/Tooltip.tsx
index 2580b3530a..8757e56bfa 100644
--- a/frontend/src/core/components/shared/Tooltip.tsx
+++ b/frontend/src/core/components/shared/Tooltip.tsx
@@ -1,18 +1,18 @@
-import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
-import { createPortal } from 'react-dom';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { addEventListenerWithCleanup } from '@app/utils/genericUtils';
-import { useTooltipPosition } from '@app/hooks/useTooltipPosition';
-import { TooltipTip } from '@app/types/tips';
-import { TooltipContent } from '@app/components/shared/tooltip/TooltipContent';
-import { useSidebarContext } from '@app/contexts/SidebarContext';
-import { useLogoAssets } from '@app/hooks/useLogoAssets';
-import styles from '@app/components/shared/tooltip/Tooltip.module.css';
-import { Z_INDEX_OVER_FULLSCREEN_SURFACE } from '@app/styles/zIndex';
+import React, { useState, useRef, useEffect, useMemo, useCallback } from "react";
+import { createPortal } from "react-dom";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { addEventListenerWithCleanup } from "@app/utils/genericUtils";
+import { useTooltipPosition } from "@app/hooks/useTooltipPosition";
+import { TooltipTip } from "@app/types/tips";
+import { TooltipContent } from "@app/components/shared/tooltip/TooltipContent";
+import { useSidebarContext } from "@app/contexts/SidebarContext";
+import { useLogoAssets } from "@app/hooks/useLogoAssets";
+import styles from "@app/components/shared/tooltip/Tooltip.module.css";
+import { Z_INDEX_OVER_FULLSCREEN_SURFACE } from "@app/styles/zIndex";
 
 export interface TooltipProps {
   sidebarTooltip?: boolean;
-  position?: 'right' | 'left' | 'top' | 'bottom';
+  position?: "right" | "left" | "top" | "bottom";
   content?: React.ReactNode;
   tips?: TooltipTip[];
   children: React.ReactElement;
@@ -73,8 +73,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
   const tooltipIdRef = useRef(`tooltip-${Math.random().toString(36).slice(2)}`);
 
   // Runtime guard: some browsers may surface non-Node EventTargets for relatedTarget/target
-  const isDomNode = (value: unknown): value is Node =>
-    typeof Node !== 'undefined' && value instanceof Node;
+  const isDomNode = (value: unknown): value is Node => typeof Node !== "undefined" && value instanceof Node;
 
   const clearTimers = useCallback(() => {
     if (openTimeoutRef.current) {
@@ -92,14 +91,14 @@ export const Tooltip: React.FC<TooltipProps> = ({
   const open = (isControlled ? !!controlledOpen : internalOpen) && !disabled;
   const allowAutoClose = !manualCloseOnly;
 
-  const resolvedPosition: NonNullable<TooltipProps['position']> = useMemo(() => {
-    const htmlDir = typeof document !== 'undefined' ? document.documentElement.dir : 'ltr';
-    const isRTL = htmlDir === 'rtl';
-    const base = position ?? 'right';
-    if (!isRTL) return base as NonNullable<TooltipProps['position']>;
-    if (base === 'left') return 'right';
-    if (base === 'right') return 'left';
-    return base as NonNullable<TooltipProps['position']>;
+  const resolvedPosition: NonNullable<TooltipProps["position"]> = useMemo(() => {
+    const htmlDir = typeof document !== "undefined" ? document.documentElement.dir : "ltr";
+    const isRTL = htmlDir === "rtl";
+    const base = position ?? "right";
+    if (!isRTL) return base as NonNullable<TooltipProps["position"]>;
+    if (base === "left") return "right";
+    if (base === "right") return "left";
+    return base as NonNullable<TooltipProps["position"]>;
   }, [position]);
 
   const setOpen = useCallback(
@@ -109,7 +108,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
       else setInternalOpen(newOpen);
       if (!newOpen) setIsPinned(false);
     },
-    [isControlled, onOpenChange, open]
+    [isControlled, onOpenChange, open],
   );
 
   const { coords, positionReady } = useTooltipPosition({
@@ -146,13 +145,13 @@ export const Tooltip: React.FC<TooltipProps> = ({
         setOpen(false);
       }
     },
-    [isPinned, closeOnOutside, setOpen, allowAutoClose]
+    [isPinned, closeOnOutside, setOpen, allowAutoClose],
   );
 
   useEffect(() => {
     // Attach global click when open (so hover tooltips can also close on outside if desired)
     if (open || isPinned) {
-      return addEventListenerWithCleanup(document, 'click', handleDocumentClick as EventListener);
+      return addEventListenerWithCleanup(document, "click", handleDocumentClick as EventListener);
     }
   }, [open, isPinned, handleDocumentClick]);
 
@@ -160,11 +159,11 @@ export const Tooltip: React.FC<TooltipProps> = ({
 
   const arrowClass = useMemo(() => {
     if (sidebarTooltip) return null;
-    const map: Record<NonNullable<TooltipProps['position']>, string> = {
-      top: 'tooltip-arrow-bottom',
-      bottom: 'tooltip-arrow-top',
-      left: 'tooltip-arrow-left',
-      right: 'tooltip-arrow-right',
+    const map: Record<NonNullable<TooltipProps["position"]>, string> = {
+      top: "tooltip-arrow-bottom",
+      bottom: "tooltip-arrow-top",
+      left: "tooltip-arrow-left",
+      right: "tooltip-arrow-right",
     };
     return map[resolvedPosition] || map.right;
   }, [resolvedPosition, sidebarTooltip]);
@@ -173,8 +172,8 @@ export const Tooltip: React.FC<TooltipProps> = ({
     (key: string) =>
       styles[key as keyof typeof styles] ||
       styles[key.replace(/-([a-z])/g, (_, l) => l.toUpperCase()) as keyof typeof styles] ||
-      '',
-    []
+      "",
+    [],
   );
 
   // === Trigger handlers ===
@@ -189,7 +188,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
       if (!isPinned && !disabled) openWithDelay();
       (children.props as any)?.onPointerEnter?.(e);
     },
-    [isPinned, openWithDelay, children.props, disabled]
+    [isPinned, openWithDelay, children.props, disabled],
   );
 
   const handlePointerLeave = useCallback(
@@ -198,7 +197,6 @@ export const Tooltip: React.FC<TooltipProps> = ({
 
       // Moving into the tooltip → keep open
       if (isDomNode(related) && tooltipRef.current && tooltipRef.current.contains(related)) {
-
         (children.props as any)?.onPointerLeave?.(e);
         return;
       }
@@ -213,7 +211,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
       if (allowAutoClose && !isPinned) setOpen(false);
       (children.props as any)?.onPointerLeave?.(e);
     },
-    [clearTimers, isPinned, setOpen, children.props, allowAutoClose]
+    [clearTimers, isPinned, setOpen, children.props, allowAutoClose],
   );
 
   const handleMouseDown = useCallback(
@@ -221,7 +219,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
       clickPendingRef.current = true;
       (children.props as any)?.onMouseDown?.(e);
     },
-    [children.props]
+    [children.props],
   );
 
   const handleMouseUp = useCallback(
@@ -230,7 +228,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
       queueMicrotask(() => (clickPendingRef.current = false));
       (children.props as any)?.onMouseUp?.(e);
     },
-    [children.props]
+    [children.props],
   );
 
   const handleClick = useCallback(
@@ -247,7 +245,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
       clickPendingRef.current = false;
       (children.props as any)?.onClick?.(e);
     },
-    [clearTimers, pinOnClick, open, setOpen, children.props]
+    [clearTimers, pinOnClick, open, setOpen, children.props],
   );
 
   // Keyboard / focus accessibility
@@ -256,7 +254,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
       if (!isPinned && !disabled && openOnFocus) openWithDelay();
       (children.props as any)?.onFocus?.(e);
     },
-    [isPinned, openWithDelay, children.props, disabled, openOnFocus]
+    [isPinned, openWithDelay, children.props, disabled, openOnFocus],
   );
 
   const handleBlur = useCallback(
@@ -270,13 +268,16 @@ export const Tooltip: React.FC<TooltipProps> = ({
       if (allowAutoClose && !isPinned) setOpen(false);
       (children.props as any)?.onBlur?.(e);
     },
-    [isPinned, setOpen, children.props, allowAutoClose, clearTimers]
+    [isPinned, setOpen, children.props, allowAutoClose, clearTimers],
   );
 
-  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {
-    if (manualCloseOnly) return;
-    if (e.key === 'Escape') setOpen(false);
-  }, [setOpen, manualCloseOnly]);
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (manualCloseOnly) return;
+      if (e.key === "Escape") setOpen(false);
+    },
+    [setOpen, manualCloseOnly],
+  );
 
   // Keep open while pointer is over the tooltip; close when leaving it (if not pinned)
   const handleTooltipPointerEnter = useCallback(() => {
@@ -289,7 +290,7 @@ export const Tooltip: React.FC<TooltipProps> = ({
       if (isDomNode(related) && triggerRef.current && triggerRef.current.contains(related)) return;
       if (allowAutoClose && !isPinned) setOpen(false);
     },
-    [isPinned, setOpen, allowAutoClose]
+    [isPinned, setOpen, allowAutoClose],
   );
 
   // Enhance child with handlers and ref
@@ -297,10 +298,10 @@ export const Tooltip: React.FC<TooltipProps> = ({
     ref: (node: HTMLElement | null) => {
       triggerRef.current = node || null;
       const originalRef = (children as any).ref;
-      if (typeof originalRef === 'function') originalRef(node);
-      else if (originalRef && typeof originalRef === 'object') (originalRef as any).current = node;
+      if (typeof originalRef === "function") originalRef(node);
+      else if (originalRef && typeof originalRef === "object") (originalRef as any).current = node;
     },
-    'aria-describedby': open ? tooltipIdRef.current : undefined,
+    "aria-describedby": open ? tooltipIdRef.current : undefined,
     onPointerEnter: handlePointerEnter,
     onPointerLeave: handlePointerLeave,
     onMouseDown: handleMouseDown,
@@ -323,23 +324,30 @@ export const Tooltip: React.FC<TooltipProps> = ({
       onPointerEnter={handleTooltipPointerEnter}
       onPointerLeave={handleTooltipPointerLeave}
       style={{
-        position: 'fixed',
+        position: "fixed",
         top: coords.top,
         left: coords.left,
-        width: maxWidth !== undefined ? maxWidth : (sidebarTooltip ? '25rem' as const : undefined),
+        width: maxWidth !== undefined ? maxWidth : sidebarTooltip ? ("25rem" as const) : undefined,
         minWidth,
         zIndex: Z_INDEX_OVER_FULLSCREEN_SURFACE,
-        visibility: positionReady ? 'visible' : 'hidden',
+        visibility: positionReady ? "visible" : "hidden",
         opacity: positionReady ? 1 : 0,
-        color: 'var(--text-primary)',
+        color: "var(--text-primary)",
         ...containerStyle,
       }}
-      className={`${styles['tooltip-container']} ${isPinned ? styles.pinned : ''}`}
-      onClick={pinOnClick ? (e) => { e.stopPropagation(); setIsPinned(true); } : undefined}
+      className={`${styles["tooltip-container"]} ${isPinned ? styles.pinned : ""}`}
+      onClick={
+        pinOnClick
+          ? (e) => {
+              e.stopPropagation();
+              setIsPinned(true);
+            }
+          : undefined
+      }
     >
       {shouldShowCloseButton && (
         <button
-          className={styles['tooltip-pin-button']}
+          className={styles["tooltip-pin-button"]}
           onClick={(e) => {
             e.stopPropagation();
             setIsPinned(false);
@@ -353,26 +361,22 @@ export const Tooltip: React.FC<TooltipProps> = ({
       )}
       {arrow && !sidebarTooltip && (
         <div
-          className={`${styles['tooltip-arrow']} ${getArrowStyleClass(arrowClass!)}`}
+          className={`${styles["tooltip-arrow"]} ${getArrowStyleClass(arrowClass!)}`}
           style={
             coords.arrowOffset !== null
-              ? { [resolvedPosition === 'top' || resolvedPosition === 'bottom' ? 'left' : 'top']: coords.arrowOffset }
+              ? { [resolvedPosition === "top" || resolvedPosition === "bottom" ? "left" : "top"]: coords.arrowOffset }
               : undefined
           }
         />
       )}
       {header && (
-        <div className={styles['tooltip-header']}>
-          <div className={styles['tooltip-logo']}>
+        <div className={styles["tooltip-header"]}>
+          <div className={styles["tooltip-logo"]}>
             {header.logo || (
-              <img
-                src={tooltipLogo}
-                alt="Stirling PDF"
-                style={{ width: '1.4rem', height: '1.4rem', display: 'block' }}
-              />
+              <img src={tooltipLogo} alt="Stirling PDF" style={{ width: "1.4rem", height: "1.4rem", display: "block" }} />
             )}
           </div>
-          <span className={styles['tooltip-title']}>{header.title}</span>
+          <span className={styles["tooltip-title"]}>{header.title}</span>
         </div>
       )}
       <TooltipContent content={content} tips={tips} extraRightPadding={shouldShowCloseButton ? 48 : 0} />
@@ -383,11 +387,9 @@ export const Tooltip: React.FC<TooltipProps> = ({
     <>
       {childWithHandlers}
       {(() => {
-        const defaultTarget = typeof document !== 'undefined' ? document.body : null;
+        const defaultTarget = typeof document !== "undefined" ? document.body : null;
         const target = portalTarget ?? defaultTarget;
-        return tooltipElement && target
-          ? createPortal(tooltipElement, target)
-          : tooltipElement;
+        return tooltipElement && target ? createPortal(tooltipElement, target) : tooltipElement;
       })()}
     </>
   );
diff --git a/frontend/src/core/components/shared/TopControls.tsx b/frontend/src/core/components/shared/TopControls.tsx
index e859d70d33..b007332943 100644
--- a/frontend/src/core/components/shared/TopControls.tsx
+++ b/frontend/src/core/components/shared/TopControls.tsx
@@ -1,26 +1,28 @@
 import React, { useState, useCallback, useMemo } from "react";
 import { SegmentedControl, Loader } from "@mantine/core";
-import { useRainbowThemeContext } from '@app/components/shared/RainbowThemeProvider';
-import rainbowStyles from '@app/styles/rainbow.module.css';
+import { useRainbowThemeContext } from "@app/components/shared/RainbowThemeProvider";
+import rainbowStyles from "@app/styles/rainbow.module.css";
 import InsertDriveFileIcon from "@mui/icons-material/InsertDriveFile";
 import GridViewIcon from "@mui/icons-material/GridView";
 import FolderIcon from "@mui/icons-material/Folder";
 import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
-import { WorkbenchType, isValidWorkbench } from '@app/types/workbench';
-import { PageEditorFileDropdown } from '@app/components/shared/PageEditorFileDropdown';
-import type { CustomWorkbenchViewInstance } from '@app/contexts/ToolWorkflowContext';
-import { FileDropdownMenu } from '@app/components/shared/FileDropdownMenu';
-import { usePageEditorDropdownState, PageEditorDropdownState } from '@app/components/pageEditor/hooks/usePageEditorDropdownState';
-import { FileId } from '@app/types/file';
-
+import { WorkbenchType, isValidWorkbench } from "@app/types/workbench";
+import { PageEditorFileDropdown } from "@app/components/shared/PageEditorFileDropdown";
+import type { CustomWorkbenchViewInstance } from "@app/contexts/ToolWorkflowContext";
+import { FileDropdownMenu } from "@app/components/shared/FileDropdownMenu";
+import {
+  usePageEditorDropdownState,
+  PageEditorDropdownState,
+} from "@app/components/pageEditor/hooks/usePageEditorDropdownState";
+import { FileId } from "@app/types/file";
 
 const viewOptionStyle: React.CSSProperties = {
-  display: 'inline-flex',
-  flexDirection: 'row',
-  alignItems: 'center',
-  gap: '0.5rem',
-  justifyContent: 'center',
-  padding: '2px 1rem',
+  display: "inline-flex",
+  flexDirection: "row",
+  alignItems: "center",
+  gap: "0.5rem",
+  justifyContent: "center",
+  padding: "2px 1rem",
 };
 
 // Helper function to create view options for SegmentedControl
@@ -32,13 +34,13 @@ const createViewOptions = (
   onFileSelect?: (index: number) => void,
   onFileRemove?: (fileId: FileId) => void,
   pageEditorState?: PageEditorDropdownState,
-  customViews?: CustomWorkbenchViewInstance[]
+  customViews?: CustomWorkbenchViewInstance[],
 ) => {
   // Viewer dropdown logic
   const currentFile = activeFiles[currentFileIndex];
-  const isInViewer = currentView === 'viewer';
-  const fileName = currentFile?.name || '';
-  const viewerDisplayName = isInViewer && fileName ? fileName : 'Viewer';
+  const isInViewer = currentView === "viewer";
+  const fileName = currentFile?.name || "";
+  const viewerDisplayName = isInViewer && fileName ? fileName : "Viewer";
   const showViewerDropdown = isInViewer;
 
   const viewerOption = {
@@ -54,18 +56,14 @@ const createViewOptions = (
       />
     ) : (
       <div style={viewOptionStyle}>
-        {switchingTo === "viewer" ? (
-          <Loader size="sm" />
-        ) : (
-          <InsertDriveFileIcon fontSize="medium" />
-        )}
+        {switchingTo === "viewer" ? <Loader size="sm" /> : <InsertDriveFileIcon fontSize="medium" />}
       </div>
     ),
     value: "viewer",
   };
 
   // Page Editor dropdown logic
-  const isInPageEditor = currentView === 'pageEditor';
+  const isInPageEditor = currentView === "pageEditor";
   const hasPageEditorFiles = pageEditorState && pageEditorState.totalCount > 0;
   const showPageEditorDropdown = isInPageEditor && hasPageEditorFiles;
 
@@ -83,11 +81,7 @@ const createViewOptions = (
       />
     ) : (
       <div style={viewOptionStyle}>
-        {switchingTo === "pageEditor" ? (
-          <Loader size="sm" />
-        ) : (
-          <GridViewIcon fontSize="medium" />
-        )}
+        {switchingTo === "pageEditor" ? <Loader size="sm" /> : <GridViewIcon fontSize="medium" />}
       </div>
     ),
     value: "pageEditor",
@@ -102,22 +96,14 @@ const createViewOptions = (
     value: "fileEditor",
   };
 
-  const baseOptions = [
-    viewerOption,
-    pageEditorOption,
-    fileEditorOption,
-  ];
+  const baseOptions = [viewerOption, pageEditorOption, fileEditorOption];
 
   const customOptions = (customViews ?? [])
     .filter((view) => view.data != null)
     .map((view) => ({
       label: (
         <div style={viewOptionStyle as React.CSSProperties}>
-          {switchingTo === view.workbenchId ? (
-            <Loader size="sm" />
-          ) : (
-            view.icon || <PictureAsPdfIcon fontSize="medium" />
-          )}
+          {switchingTo === view.workbenchId ? <Loader size="sm" /> : view.icon || <PictureAsPdfIcon fontSize="medium" />}
           <span>{view.label}</span>
         </div>
       ),
@@ -151,87 +137,92 @@ const TopControls = ({
 
   const pageEditorState = usePageEditorDropdownState();
 
-  const handleViewChange = useCallback((view: string) => {
-    if (!isValidWorkbench(view)) {
-      return;
-    }
+  const handleViewChange = useCallback(
+    (view: string) => {
+      if (!isValidWorkbench(view)) {
+        return;
+      }
 
-    const workbench = view;
+      const workbench = view;
 
-    // Show immediate feedback
-    setSwitchingTo(workbench);
+      // Show immediate feedback
+      setSwitchingTo(workbench);
 
-    // Defer the heavy view change to next frame so spinner can render
-    requestAnimationFrame(() => {
-      // Give the spinner one more frame to show
+      // Defer the heavy view change to next frame so spinner can render
       requestAnimationFrame(() => {
-        setCurrentView(workbench);
+        // Give the spinner one more frame to show
+        requestAnimationFrame(() => {
+          setCurrentView(workbench);
 
-        // Clear the loading state after view change completes
-        setTimeout(() => setSwitchingTo(null), 300);
+          // Clear the loading state after view change completes
+          setTimeout(() => setSwitchingTo(null), 300);
+        });
       });
-    });
-  }, [setCurrentView]);
+    },
+    [setCurrentView],
+  );
 
   // Memoize view options to prevent SegmentedControl re-renders
-  const viewOptions = useMemo(() => createViewOptions(
-    currentView,
-    switchingTo,
-    activeFiles,
-    currentFileIndex,
-    onFileSelect,
-    onFileRemove,
-    pageEditorState,
-    customViews
-  ), [currentView, switchingTo, activeFiles, currentFileIndex, onFileSelect, onFileRemove, pageEditorState, customViews]);
+  const viewOptions = useMemo(
+    () =>
+      createViewOptions(
+        currentView,
+        switchingTo,
+        activeFiles,
+        currentFileIndex,
+        onFileSelect,
+        onFileRemove,
+        pageEditorState,
+        customViews,
+      ),
+    [currentView, switchingTo, activeFiles, currentFileIndex, onFileSelect, onFileRemove, pageEditorState, customViews],
+  );
 
   return (
     <div className="absolute left-0 w-full top-0 z-[100] pointer-events-none">
       <div className="flex justify-center">
-
         <SegmentedControl
           data-tour="view-switcher"
           data={viewOptions}
-
           value={currentView}
           onChange={handleViewChange}
           color="blue"
           fullWidth
-          className={isRainbowMode ? rainbowStyles.rainbowSegmentedControl : ''}
+          className={isRainbowMode ? rainbowStyles.rainbowSegmentedControl : ""}
           style={{
-            transition: 'all 0.2s ease',
+            transition: "all 0.2s ease",
             opacity: switchingTo ? 0.8 : 1,
-            pointerEvents: 'auto'
+            pointerEvents: "auto",
           }}
           styles={{
             root: {
-              borderRadius: '0 0 16px 16px',
-              height: '1.8rem',
-              backgroundColor: 'var(--bg-toolbar)',
-              border: '1px solid var(--border-default)',
-              borderTop: 'none',
-              boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
-              outline: '1px solid rgba(0, 0, 0, 0.1)',
-              outlineOffset: '-1px',
-              padding: '0 0',
-              gap: '0',
+              borderRadius: "0 0 16px 16px",
+              height: "1.8rem",
+              backgroundColor: "var(--bg-toolbar)",
+              border: "1px solid var(--border-default)",
+              borderTop: "none",
+              boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
+              outline: "1px solid rgba(0, 0, 0, 0.1)",
+              outlineOffset: "-1px",
+              padding: "0 0",
+              gap: "0",
             },
             control: {
-              borderRadius: '0 0 16px 16px',
-              padding: '0',
-              border: 'none',
+              borderRadius: "0 0 16px 16px",
+              padding: "0",
+              border: "none",
             },
             indicator: {
-              borderRadius: '0 0 16px 16px',
-              height: '100%',
-              top: '0rem',
-              margin: '0',
-              border: 'none',
+              borderRadius: "0 0 16px 16px",
+              height: "100%",
+              top: "0rem",
+              margin: "0",
+              border: "none",
             },
             label: {
-              paddingTop: '0',
-              paddingBottom: '0',
-            }
+              paddingTop: "0",
+              paddingBottom: "0",
+            },
           }}
         />
       </div>
diff --git a/frontend/src/core/components/shared/UpdateModal.tsx b/frontend/src/core/components/shared/UpdateModal.tsx
index 937f4426db..614b1b0a60 100644
--- a/frontend/src/core/components/shared/UpdateModal.tsx
+++ b/frontend/src/core/components/shared/UpdateModal.tsx
@@ -1,14 +1,14 @@
-import React, { useState, useEffect } from 'react';
-import { Modal, Stack, Text, Badge, Button, Group, Loader, Center, Divider, Box, Collapse } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { updateService, UpdateSummary, FullUpdateInfo, MachineInfo } from '@app/services/updateService';
-import { Z_INDEX_OVER_CONFIG_MODAL } from '@app/styles/zIndex';
-import WarningAmberIcon from '@mui/icons-material/WarningAmber';
-import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
-import OpenInNewIcon from '@mui/icons-material/OpenInNew';
-import DownloadIcon from '@mui/icons-material/Download';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import React, { useState, useEffect } from "react";
+import { Modal, Stack, Text, Badge, Button, Group, Loader, Center, Divider, Box, Collapse } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { updateService, UpdateSummary, FullUpdateInfo, MachineInfo } from "@app/services/updateService";
+import { Z_INDEX_OVER_CONFIG_MODAL } from "@app/styles/zIndex";
+import WarningAmberIcon from "@mui/icons-material/WarningAmber";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import OpenInNewIcon from "@mui/icons-material/OpenInNew";
+import DownloadIcon from "@mui/icons-material/Download";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
 
 interface UpdateModalProps {
   opened: boolean;
@@ -18,13 +18,7 @@ interface UpdateModalProps {
   machineInfo: MachineInfo;
 }
 
-const UpdateModal: React.FC<UpdateModalProps> = ({
-  opened,
-  onClose,
-  currentVersion,
-  updateSummary,
-  machineInfo,
-}) => {
+const UpdateModal: React.FC<UpdateModalProps> = ({ opened, onClose, currentVersion, updateSummary, machineInfo }) => {
   const { t } = useTranslation();
   const [fullUpdateInfo, setFullUpdateInfo] = useState<FullUpdateInfo | null>(null);
   const [loading, setLoading] = useState(true);
@@ -55,22 +49,22 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
 
   const getPriorityColor = (priority: string): string => {
     switch (priority?.toLowerCase()) {
-      case 'urgent':
-        return 'red';
-      case 'normal':
-        return 'blue';
-      case 'minor':
-        return 'cyan';
-      case 'low':
-        return 'gray';
+      case "urgent":
+        return "red";
+      case "normal":
+        return "blue";
+      case "minor":
+        return "cyan";
+      case "low":
+        return "gray";
       default:
-        return 'gray';
+        return "gray";
     }
   };
 
   const getPriorityLabel = (priority: string): string => {
     const key = priority?.toLowerCase();
-    return t(`update.priority.${key}`, priority || 'Normal');
+    return t(`update.priority.${key}`, priority || "Normal");
   };
 
   const downloadUrl = updateService.getDownloadUrl(machineInfo);
@@ -81,7 +75,7 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
       onClose={onClose}
       title={
         <Text fw={600} size="lg">
-          {t('update.modalTitle', 'Update Available')}
+          {t("update.modalTitle", "Update Available")}
         </Text>
       }
       centered
@@ -89,8 +83,8 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
       zIndex={Z_INDEX_OVER_CONFIG_MODAL}
       styles={{
         body: {
-          maxHeight: '75vh',
-          overflowY: 'auto',
+          maxHeight: "75vh",
+          overflowY: "auto",
         },
       }}
     >
@@ -100,7 +94,7 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
           <Group justify="space-between" align="flex-start" wrap="nowrap" mb="md">
             <Stack gap={4} style={{ flex: 1 }}>
               <Text size="xs" c="dimmed" tt="uppercase" fw={500}>
-                {t('update.current', 'Current Version')}
+                {t("update.current", "Current Version")}
               </Text>
               <Text fw={600} size="xl">
                 {currentVersion}
@@ -109,13 +103,13 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
 
             <Stack gap={4} style={{ flex: 1 }} ta="center">
               <Text size="xs" c="dimmed" tt="uppercase" fw={500}>
-                {t('update.priorityLabel', 'Priority')}
+                {t("update.priorityLabel", "Priority")}
               </Text>
               <Badge
                 color={getPriorityColor(updateSummary.max_priority)}
                 size="lg"
                 variant="filled"
-                style={{ alignSelf: 'center' }}
+                style={{ alignSelf: "center" }}
               >
                 {getPriorityLabel(updateSummary.max_priority)}
               </Badge>
@@ -123,7 +117,7 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
 
             <Stack gap={4} style={{ flex: 1 }} ta="right">
               <Text size="xs" c="dimmed" tt="uppercase" fw={500}>
-                {t('update.latest', 'Latest Version')}
+                {t("update.latest", "Latest Version")}
               </Text>
               <Text fw={600} size="xl" c="blue">
                 {updateSummary.latest_version}
@@ -134,15 +128,15 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
           {updateSummary.latest_stable_version && (
             <Box
               style={{
-                background: 'var(--mantine-color-green-0)',
-                padding: '10px 16px',
-                borderRadius: '8px',
-                border: '1px solid var(--mantine-color-green-2)',
+                background: "var(--mantine-color-green-0)",
+                padding: "10px 16px",
+                borderRadius: "8px",
+                border: "1px solid var(--mantine-color-green-2)",
               }}
             >
               <Group gap="xs" justify="center">
                 <Text size="sm" fw={500}>
-                  {t('update.latestStable', 'Latest Stable')}:
+                  {t("update.latestStable", "Latest Stable")}:
                 </Text>
                 <Text size="sm" fw={600} c="green">
                   {updateSummary.latest_stable_version}
@@ -156,21 +150,19 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
         {updateSummary.recommended_action && (
           <Box
             style={{
-              background: 'var(--mantine-color-blue-light)',
-              padding: '12px 16px',
-              borderRadius: '8px',
-              border: '1px solid var(--mantine-color-blue-outline)',
+              background: "var(--mantine-color-blue-light)",
+              padding: "12px 16px",
+              borderRadius: "8px",
+              border: "1px solid var(--mantine-color-blue-outline)",
             }}
           >
             <Group gap="xs" wrap="nowrap" align="flex-start">
-              <InfoOutlinedIcon style={{ fontSize: 18, color: 'var(--mantine-color-blue-filled)', marginTop: 2 }} />
+              <InfoOutlinedIcon style={{ fontSize: 18, color: "var(--mantine-color-blue-filled)", marginTop: 2 }} />
               <Box style={{ flex: 1 }}>
                 <Text size="xs" fw={600} mb={4} tt="uppercase">
-                  {t('update.recommendedAction', 'Recommended Action')}
-                </Text>
-                <Text size="sm">
-                  {updateSummary.recommended_action}
+                  {t("update.recommendedAction", "Recommended Action")}
                 </Text>
+                <Text size="sm">{updateSummary.recommended_action}</Text>
               </Box>
             </Group>
           </Box>
@@ -180,22 +172,22 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
         {updateSummary.any_breaking && (
           <Box
             style={{
-              background: 'var(--mantine-color-orange-light)',
-              padding: '12px 16px',
-              borderRadius: '8px',
-              border: '1px solid var(--mantine-color-orange-outline)',
+              background: "var(--mantine-color-orange-light)",
+              padding: "12px 16px",
+              borderRadius: "8px",
+              border: "1px solid var(--mantine-color-orange-outline)",
             }}
           >
             <Group gap="xs" wrap="nowrap" align="flex-start">
-              <WarningAmberIcon style={{ fontSize: 18, color: 'var(--mantine-color-orange-filled)', marginTop: 2 }} />
+              <WarningAmberIcon style={{ fontSize: 18, color: "var(--mantine-color-orange-filled)", marginTop: 2 }} />
               <Box style={{ flex: 1 }}>
                 <Text size="xs" fw={600} mb={4} tt="uppercase">
-                  {t('update.breakingChangesDetected', 'Breaking Changes Detected')}
+                  {t("update.breakingChangesDetected", "Breaking Changes Detected")}
                 </Text>
                 <Text size="sm">
                   {t(
-                    'update.breakingChangesMessage',
-                    'Some versions contain breaking changes. Please review the migration guides below before updating.'
+                    "update.breakingChangesMessage",
+                    "Some versions contain breaking changes. Please review the migration guides below before updating.",
                   )}
                 </Text>
               </Box>
@@ -209,22 +201,22 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
             <Divider />
             <Stack gap="xs">
               <Text fw={600} size="sm" tt="uppercase" c="dimmed">
-                {t('update.migrationGuides', 'Migration Guides')}
+                {t("update.migrationGuides", "Migration Guides")}
               </Text>
               {updateSummary.migration_guides.map((guide, idx) => (
                 <Box
                   key={idx}
                   style={{
-                    border: '1px solid var(--mantine-color-gray-3)',
-                    padding: '12px 16px',
-                    borderRadius: '8px',
-                    background: 'var(--mantine-color-gray-0)',
+                    border: "1px solid var(--mantine-color-gray-3)",
+                    padding: "12px 16px",
+                    borderRadius: "8px",
+                    background: "var(--mantine-color-gray-0)",
                   }}
                 >
                   <Group justify="space-between" align="center" wrap="nowrap">
                     <Box style={{ flex: 1 }}>
                       <Text fw={600} size="sm">
-                        {t('update.version', 'Version')} {guide.version}
+                        {t("update.version", "Version")} {guide.version}
                       </Text>
                       <Text size="xs" c="dimmed" mt={4}>
                         {guide.notes}
@@ -238,7 +230,7 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
                       size="xs"
                       rightSection={<OpenInNewIcon style={{ fontSize: 14 }} />}
                     >
-                      {t('update.viewGuide', 'View Guide')}
+                      {t("update.viewGuide", "View Guide")}
                     </Button>
                   </Group>
                 </Box>
@@ -254,7 +246,7 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
             <Stack align="center" gap="sm">
               <Loader size="md" />
               <Text size="sm" c="dimmed">
-                {t('update.loadingDetailedInfo', 'Loading detailed information...')}
+                {t("update.loadingDetailedInfo", "Loading detailed information...")}
               </Text>
             </Stack>
           </Center>
@@ -262,10 +254,10 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
           <Stack gap="xs">
             <Group justify="space-between" align="center">
               <Text fw={600} size="sm" tt="uppercase" c="dimmed">
-                {t('update.availableUpdates', 'Available Updates')}
+                {t("update.availableUpdates", "Available Updates")}
               </Text>
               <Badge variant="light" color="gray">
-                {fullUpdateInfo.new_versions.length} {fullUpdateInfo.new_versions.length === 1 ? 'version' : 'versions'}
+                {fullUpdateInfo.new_versions.length} {fullUpdateInfo.new_versions.length === 1 ? "version" : "versions"}
               </Badge>
             </Group>
             <Stack gap="xs">
@@ -275,9 +267,9 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
                   <Box
                     key={index}
                     style={{
-                      border: '1px solid var(--mantine-color-gray-3)',
-                      borderRadius: '8px',
-                      overflow: 'hidden',
+                      border: "1px solid var(--mantine-color-gray-3)",
+                      borderRadius: "8px",
+                      overflow: "hidden",
                     }}
                   >
                     <Group
@@ -285,16 +277,16 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
                       align="center"
                       p="md"
                       style={{
-                        cursor: 'pointer',
-                        background: isExpanded ? 'var(--mantine-color-gray-0)' : 'transparent',
-                        transition: 'background 0.15s ease',
+                        cursor: "pointer",
+                        background: isExpanded ? "var(--mantine-color-gray-0)" : "transparent",
+                        transition: "background 0.15s ease",
                       }}
                       onClick={() => toggleVersion(index)}
                     >
                       <Group gap="md" style={{ flex: 1 }}>
                         <Box>
                           <Text fw={600} size="sm" c="dimmed" mb={2}>
-                            {t('update.version', 'Version')}
+                            {t("update.version", "Version")}
                           </Text>
                           <Text fw={700} size="lg">
                             {version.version}
@@ -314,18 +306,18 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
                           onClick={(e) => e.stopPropagation()}
                           rightSection={<OpenInNewIcon style={{ fontSize: 14 }} />}
                         >
-                          {t('update.releaseNotes', 'Release Notes')}
+                          {t("update.releaseNotes", "Release Notes")}
                         </Button>
                         {isExpanded ? (
-                          <ExpandLessIcon style={{ fontSize: 20, color: 'var(--mantine-color-gray-6)' }} />
+                          <ExpandLessIcon style={{ fontSize: 20, color: "var(--mantine-color-gray-6)" }} />
                         ) : (
-                          <ExpandMoreIcon style={{ fontSize: 20, color: 'var(--mantine-color-gray-6)' }} />
+                          <ExpandMoreIcon style={{ fontSize: 20, color: "var(--mantine-color-gray-6)" }} />
                         )}
                       </Group>
                     </Group>
 
                     <Collapse in={isExpanded}>
-                      <Box p="md" pt={0} style={{ borderTop: '1px solid var(--mantine-color-gray-2)' }}>
+                      <Box p="md" pt={0} style={{ borderTop: "1px solid var(--mantine-color-gray-2)" }}>
                         <Stack gap="md" mt="md">
                           <Box>
                             <Text fw={600} size="sm" mb={6}>
@@ -339,21 +331,23 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
                           {version.compatibility.breaking_changes && (
                             <Box
                               style={{
-                                background: 'var(--mantine-color-orange-light)',
-                                padding: '12px',
-                                borderRadius: '6px',
-                                border: '1px solid var(--mantine-color-orange-outline)',
+                                background: "var(--mantine-color-orange-light)",
+                                padding: "12px",
+                                borderRadius: "6px",
+                                border: "1px solid var(--mantine-color-orange-outline)",
                               }}
                             >
                               <Group gap="xs" align="flex-start" wrap="nowrap" mb="xs">
-                                <WarningAmberIcon style={{ fontSize: 16, color: 'var(--mantine-color-orange-filled)', marginTop: 2 }} />
+                                <WarningAmberIcon
+                                  style={{ fontSize: 16, color: "var(--mantine-color-orange-filled)", marginTop: 2 }}
+                                />
                                 <Text size="xs" fw={600} tt="uppercase">
-                                  {t('update.breakingChanges', 'Breaking Changes')}
+                                  {t("update.breakingChanges", "Breaking Changes")}
                                 </Text>
                               </Group>
                               <Text size="sm" mb="xs">
                                 {version.compatibility.breaking_description ||
-                                  t('update.breakingChangesDefault', 'This version contains breaking changes.')}
+                                  t("update.breakingChangesDefault", "This version contains breaking changes.")}
                               </Text>
                               {version.compatibility.migration_guide_url && (
                                 <Button
@@ -365,7 +359,7 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
                                   size="xs"
                                   rightSection={<OpenInNewIcon style={{ fontSize: 14 }} />}
                                 >
-                                  {t('update.migrationGuide', 'Migration Guide')}
+                                  {t("update.migrationGuide", "Migration Guide")}
                                 </Button>
                               )}
                             </Box>
@@ -384,7 +378,7 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
         <Divider />
         <Group justify="flex-end" gap="sm">
           <Button variant="default" onClick={onClose}>
-            {t('update.close', 'Close')}
+            {t("update.close", "Close")}
           </Button>
           <Button
             variant="light"
@@ -393,7 +387,7 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
             target="_blank"
             rightSection={<OpenInNewIcon style={{ fontSize: 16 }} />}
           >
-            {t('update.viewAllReleases', 'View All Releases')}
+            {t("update.viewAllReleases", "View All Releases")}
           </Button>
           {downloadUrl && (
             <Button
@@ -403,7 +397,7 @@ const UpdateModal: React.FC<UpdateModalProps> = ({
               color="green"
               leftSection={<DownloadIcon style={{ fontSize: 16 }} />}
             >
-              {t('update.downloadLatest', 'Download Latest')}
+              {t("update.downloadLatest", "Download Latest")}
             </Button>
           )}
         </Group>
diff --git a/frontend/src/core/components/shared/UploadToServerModal.tsx b/frontend/src/core/components/shared/UploadToServerModal.tsx
index ecf424e60b..5bab2d8efa 100644
--- a/frontend/src/core/components/shared/UploadToServerModal.tsx
+++ b/frontend/src/core/components/shared/UploadToServerModal.tsx
@@ -1,15 +1,15 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { Modal, Stack, Text, Button, Group, Alert } from '@mantine/core';
-import CloudUploadIcon from '@mui/icons-material/CloudUpload';
-import { useTranslation } from 'react-i18next';
+import React, { useCallback, useEffect, useState } from "react";
+import { Modal, Stack, Text, Button, Group, Alert } from "@mantine/core";
+import CloudUploadIcon from "@mui/icons-material/CloudUpload";
+import { useTranslation } from "react-i18next";
 
-import { alert } from '@app/components/toast';
-import { Z_INDEX_OVER_FILE_MANAGER_MODAL } from '@app/styles/zIndex';
-import type { StirlingFileStub } from '@app/types/fileContext';
-import { uploadHistoryChain } from '@app/services/serverStorageUpload';
-import { fileStorage } from '@app/services/fileStorage';
-import { useFileActions } from '@app/contexts/FileContext';
-import type { FileId } from '@app/types/file';
+import { alert } from "@app/components/toast";
+import { Z_INDEX_OVER_FILE_MANAGER_MODAL } from "@app/styles/zIndex";
+import type { StirlingFileStub } from "@app/types/fileContext";
+import { uploadHistoryChain } from "@app/services/serverStorageUpload";
+import { fileStorage } from "@app/services/fileStorage";
+import { useFileActions } from "@app/contexts/FileContext";
+import type { FileId } from "@app/types/file";
 
 interface UploadToServerModalProps {
   opened: boolean;
@@ -18,12 +18,7 @@ interface UploadToServerModalProps {
   onUploaded?: () => Promise<void> | void;
 }
 
-const UploadToServerModal: React.FC<UploadToServerModalProps> = ({
-  opened,
-  onClose,
-  file,
-  onUploaded,
-}) => {
+const UploadToServerModal: React.FC<UploadToServerModalProps> = ({ opened, onClose, file, onUploaded }) => {
   const { t } = useTranslation();
   const { actions } = useFileActions();
   const [isUploading, setIsUploading] = useState(false);
@@ -43,10 +38,7 @@ const UploadToServerModal: React.FC<UploadToServerModalProps> = ({
     try {
       const originalFileId = (file.originalFileId || file.id) as FileId;
       const remoteId = file.remoteStorageId;
-      const { remoteId: storedId, updatedAt, chain } = await uploadHistoryChain(
-        originalFileId,
-        remoteId
-      );
+      const { remoteId: storedId, updatedAt, chain } = await uploadHistoryChain(originalFileId, remoteId);
 
       for (const stub of chain) {
         actions.updateStirlingFileStub(stub.id, {
@@ -62,8 +54,8 @@ const UploadToServerModal: React.FC<UploadToServerModalProps> = ({
       }
 
       alert({
-        alertType: 'success',
-        title: t('storageUpload.success', 'Uploaded to server'),
+        alertType: "success",
+        title: t("storageUpload.success", "Uploaded to server"),
         expandable: false,
         durationMs: 3000,
       });
@@ -72,10 +64,8 @@ const UploadToServerModal: React.FC<UploadToServerModalProps> = ({
       }
       onClose();
     } catch (error) {
-      console.error('Failed to upload file to server:', error);
-      setErrorMessage(
-        t('storageUpload.failure', 'Upload failed. Please check your login and storage settings.')
-      );
+      console.error("Failed to upload file to server:", error);
+      setErrorMessage(t("storageUpload.failure", "Upload failed. Please check your login and storage settings."));
     } finally {
       setIsUploading(false);
     }
@@ -86,44 +76,34 @@ const UploadToServerModal: React.FC<UploadToServerModalProps> = ({
       opened={opened}
       onClose={onClose}
       centered
-      title={t('storageUpload.title', 'Upload to Server')}
+      title={t("storageUpload.title", "Upload to Server")}
       zIndex={Z_INDEX_OVER_FILE_MANAGER_MODAL}
     >
       <Stack gap="sm">
         <Text size="sm">
-          {t(
-            'storageUpload.description',
-            'This uploads the current file to server storage for your own access.'
-          )}
+          {t("storageUpload.description", "This uploads the current file to server storage for your own access.")}
         </Text>
         <Text size="sm" c="dimmed">
-          {t('storageUpload.fileLabel', 'File')}: {file.name}
+          {t("storageUpload.fileLabel", "File")}: {file.name}
         </Text>
         <Text size="xs" c="dimmed">
-          {t(
-            'storageUpload.hint',
-            'Public links and access modes are controlled by your server settings.'
-          )}
+          {t("storageUpload.hint", "Public links and access modes are controlled by your server settings.")}
         </Text>
 
         {errorMessage && (
-          <Alert color="red" title={t('storageUpload.errorTitle', 'Upload failed')}>
+          <Alert color="red" title={t("storageUpload.errorTitle", "Upload failed")}>
             {errorMessage}
           </Alert>
         )}
 
         <Group justify="flex-end" gap="sm">
           <Button variant="default" onClick={onClose} disabled={isUploading}>
-            {t('cancel', 'Cancel')}
+            {t("cancel", "Cancel")}
           </Button>
-          <Button
-            leftSection={<CloudUploadIcon style={{ fontSize: 18 }} />}
-            onClick={handleUpload}
-            loading={isUploading}
-          >
+          <Button leftSection={<CloudUploadIcon style={{ fontSize: 18 }} />} onClick={handleUpload} loading={isUploading}>
             {file.remoteStorageId
-              ? t('storageUpload.updateButton', 'Update on Server')
-              : t('storageUpload.uploadButton', 'Upload to Server')}
+              ? t("storageUpload.updateButton", "Update on Server")
+              : t("storageUpload.uploadButton", "Upload to Server")}
           </Button>
         </Group>
       </Stack>
diff --git a/frontend/src/core/components/shared/UserSelector.tsx b/frontend/src/core/components/shared/UserSelector.tsx
index 22c99ec61d..5e292bacda 100644
--- a/frontend/src/core/components/shared/UserSelector.tsx
+++ b/frontend/src/core/components/shared/UserSelector.tsx
@@ -1,25 +1,25 @@
-import { useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { MultiSelect, Loader, Text, Button, Stack } from '@mantine/core';
-import { useNavigate } from 'react-router-dom';
-import { alert } from '@app/components/toast';
-import { UserSummary } from '@app/types/signingSession';
-import apiClient from '@app/services/apiClient';
-import { useAuth } from '@app/auth/UseSession';
-import { Z_INDEX_OVER_FILE_MANAGER_MODAL } from '@app/styles/zIndex';
+import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { MultiSelect, Loader, Text, Button, Stack } from "@mantine/core";
+import { useNavigate } from "react-router-dom";
+import { alert } from "@app/components/toast";
+import { UserSummary } from "@app/types/signingSession";
+import apiClient from "@app/services/apiClient";
+import { useAuth } from "@app/auth/UseSession";
+import { Z_INDEX_OVER_FILE_MANAGER_MODAL } from "@app/styles/zIndex";
 
 interface UserSelectorProps {
   value: number[];
   onChange: (userIds: number[]) => void;
   placeholder?: string;
-  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
   disabled?: boolean;
 }
 
 type SelectItem = { value: string; label: string };
 type GroupedData = { group: string; items: SelectItem[] };
 
-const UserSelector = ({ value, onChange, placeholder, size = 'sm', disabled = false }: UserSelectorProps) => {
+const UserSelector = ({ value, onChange, placeholder, size = "sm", disabled = false }: UserSelectorProps) => {
   const { t } = useTranslation();
   const { user } = useAuth();
   const navigate = useNavigate();
@@ -30,8 +30,8 @@ const UserSelector = ({ value, onChange, placeholder, size = 'sm', disabled = fa
   useEffect(() => {
     const fetchUsers = async () => {
       try {
-        const response = await apiClient.get('/api/v1/user/users');
-        console.log('Users API response:', response.data);
+        const response = await apiClient.get("/api/v1/user/users");
+        console.log("Users API response:", response.data);
         const fetchedUsers = response.data || [];
 
         // Process selectData inside useEffect - group by team
@@ -41,16 +41,15 @@ const UserSelector = ({ value, onChange, placeholder, size = 'sm', disabled = fa
         fetchedUsers
           .filter((u: UserSummary) => u && u.userId && u.username)
           .filter((u: UserSummary) => u.userId !== currentUserId) // Exclude current user
-          .filter((u: UserSummary) => u.teamName?.toLowerCase() !== 'internal') // Exclude internal users
+          .filter((u: UserSummary) => u.teamName?.toLowerCase() !== "internal") // Exclude internal users
           .forEach((user: UserSummary) => {
-            const teamName = user.teamName || t('certSign.collab.userSelector.noTeam', 'No Team');
+            const teamName = user.teamName || t("certSign.collab.userSelector.noTeam", "No Team");
             if (!usersByTeam[teamName]) {
               usersByTeam[teamName] = [];
             }
-            const displayName = user.displayName || user.username || 'Unknown';
-            const username = user.username || 'unknown';
-            const label =
-              displayName !== username ? `${displayName} (@${username})` : displayName;
+            const displayName = user.displayName || user.username || "Unknown";
+            const username = user.username || "unknown";
+            const label = displayName !== username ? `${displayName} (@${username})` : displayName;
             usersByTeam[teamName].push({
               value: String(user.userId),
               label,
@@ -63,14 +62,14 @@ const UserSelector = ({ value, onChange, placeholder, size = 'sm', disabled = fa
           items: items.sort((a, b) => a.label.localeCompare(b.label)),
         }));
 
-        console.log('Processed selectData:', processed);
+        console.log("Processed selectData:", processed);
         setSelectData(processed);
       } catch (error) {
-        console.error('Failed to load users:', error);
+        console.error("Failed to load users:", error);
         alert({
-          alertType: 'error',
-          title: t('common.error'),
-          body: t('certSign.collab.userSelector.loadError', 'Failed to load users'),
+          alertType: "error",
+          title: t("common.error"),
+          body: t("certSign.collab.userSelector.loadError", "Failed to load users"),
         });
       } finally {
         setLoading(false);
@@ -83,8 +82,8 @@ const UserSelector = ({ value, onChange, placeholder, size = 'sm', disabled = fa
   // Process stringValue when value prop changes
   useEffect(() => {
     const safeValue = Array.isArray(value) ? value : [];
-    const result = safeValue.map((id) => (id != null ? id.toString() : '')).filter(Boolean);
-    console.log('stringValue for MultiSelect:', result);
+    const result = safeValue.map((id) => (id != null ? id.toString() : "")).filter(Boolean);
+    console.log("stringValue for MultiSelect:", result);
     setStringValue(result);
   }, [value]);
 
@@ -97,10 +96,10 @@ const UserSelector = ({ value, onChange, placeholder, size = 'sm', disabled = fa
     return (
       <Stack gap="xs" align="flex-start">
         <Text size="sm" c="dimmed">
-          {t('certSign.collab.userSelector.noUsers', 'No other users found.')}
+          {t("certSign.collab.userSelector.noUsers", "No other users found.")}
         </Text>
-        <Button size="xs" variant="light" onClick={() => navigate('/settings/people')}>
-          {t('certSign.collab.userSelector.inviteUsers', 'Add Users')}
+        <Button size="xs" variant="light" onClick={() => navigate("/settings/people")}>
+          {t("certSign.collab.userSelector.inviteUsers", "Add Users")}
         </Button>
       </Stack>
     );
@@ -111,12 +110,10 @@ const UserSelector = ({ value, onChange, placeholder, size = 'sm', disabled = fa
       data={selectData}
       value={stringValue}
       onChange={(selectedIds) => {
-        const parsedIds = selectedIds
-          .map((id) => parseInt(id, 10))
-          .filter((id) => !isNaN(id));
+        const parsedIds = selectedIds.map((id) => parseInt(id, 10)).filter((id) => !isNaN(id));
         onChange(parsedIds);
       }}
-      placeholder={placeholder || t('certSign.collab.userSelector.placeholder', 'Select users...')}
+      placeholder={placeholder || t("certSign.collab.userSelector.placeholder", "Select users...")}
       searchable
       clearable
       size={size}
diff --git a/frontend/src/core/components/shared/ZipWarningModal.tsx b/frontend/src/core/components/shared/ZipWarningModal.tsx
index 909cf1b31b..7a6e32c971 100644
--- a/frontend/src/core/components/shared/ZipWarningModal.tsx
+++ b/frontend/src/core/components/shared/ZipWarningModal.tsx
@@ -15,9 +15,9 @@ interface ZipWarningModalProps {
 
 const WARNING_ICON_STYLE: CSSProperties = {
   fontSize: 36,
-  display: 'block',
-  margin: '0 auto 8px',
-  color: 'var(--mantine-color-blue-6)'
+  display: "block",
+  margin: "0 auto 8px",
+  color: "var(--mantine-color-blue-6)",
 };
 
 const ZipWarningModal = ({ opened, onConfirm, onCancel, fileCount, zipFileName }: ZipWarningModalProps) => {
@@ -41,7 +41,7 @@ const ZipWarningModal = ({ opened, onConfirm, onCancel, fileCount, zipFileName }
         <Text size="lg" fw={500}>
           {t("zipWarning.message", {
             count: fileCount,
-            defaultValue: "This ZIP contains {{count}} files. Extract anyway?"
+            defaultValue: "This ZIP contains {{count}} files. Extract anyway?",
           })}
         </Text>
       </Stack>
diff --git a/frontend/src/core/components/shared/config/LoginRequiredBanner.tsx b/frontend/src/core/components/shared/config/LoginRequiredBanner.tsx
index f16e38f4ea..d540bc989f 100644
--- a/frontend/src/core/components/shared/config/LoginRequiredBanner.tsx
+++ b/frontend/src/core/components/shared/config/LoginRequiredBanner.tsx
@@ -1,6 +1,6 @@
-import { Alert, Text } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import LocalIcon from '@app/components/shared/LocalIcon';
+import { Alert, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import LocalIcon from "@app/components/shared/LocalIcon";
 
 interface LoginRequiredBannerProps {
   show: boolean;
@@ -18,20 +18,26 @@ export default function LoginRequiredBanner({ show }: LoginRequiredBannerProps)
   return (
     <Alert
       icon={<LocalIcon icon="lock" width={20} height={20} />}
-      title={t('admin.settings.loginDisabled.title', 'Login Mode Required')}
+      title={t("admin.settings.loginDisabled.title", "Login Mode Required")}
       color="blue"
       variant="light"
       styles={{
         root: {
-          borderLeft: '4px solid var(--mantine-color-blue-6)'
-        }
+          borderLeft: "4px solid var(--mantine-color-blue-6)",
+        },
       }}
     >
       <Text size="sm">
-        {t('admin.settings.loginDisabled.message', 'Login mode must be enabled to modify admin settings. Please set SECURITY_ENABLELOGIN=true in your environment or security.enableLogin: true in settings.yml, then restart the server.')}
+        {t(
+          "admin.settings.loginDisabled.message",
+          "Login mode must be enabled to modify admin settings. Please set SECURITY_ENABLELOGIN=true in your environment or security.enableLogin: true in settings.yml, then restart the server.",
+        )}
       </Text>
       <Text size="sm" fw={600} mt="xs" c="dimmed">
-        {t('admin.settings.loginDisabled.readOnly', 'The settings below show example values for reference. Enable login mode to view and edit actual configuration.')}
+        {t(
+          "admin.settings.loginDisabled.readOnly",
+          "The settings below show example values for reference. Enable login mode to view and edit actual configuration.",
+        )}
       </Text>
     </Alert>
   );
diff --git a/frontend/src/core/components/shared/config/OverviewHeader.tsx b/frontend/src/core/components/shared/config/OverviewHeader.tsx
index 7be820620a..fe694d29b8 100644
--- a/frontend/src/core/components/shared/config/OverviewHeader.tsx
+++ b/frontend/src/core/components/shared/config/OverviewHeader.tsx
@@ -1,14 +1,16 @@
-import { Text } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
+import { Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
 
 export function OverviewHeader() {
   const { t } = useTranslation();
 
   return (
     <div>
-      <Text fw={600} size="lg">{t('config.overview.title', 'Application Configuration')}</Text>
+      <Text fw={600} size="lg">
+        {t("config.overview.title", "Application Configuration")}
+      </Text>
       <Text size="sm" c="dimmed">
-        {t('config.overview.description', 'Current application settings and configuration details.')}
+        {t("config.overview.description", "Current application settings and configuration details.")}
       </Text>
     </div>
   );
diff --git a/frontend/src/core/components/shared/config/PendingBadge.tsx b/frontend/src/core/components/shared/config/PendingBadge.tsx
index cdb3306f80..625c2499e2 100644
--- a/frontend/src/core/components/shared/config/PendingBadge.tsx
+++ b/frontend/src/core/components/shared/config/PendingBadge.tsx
@@ -1,22 +1,22 @@
-import { Badge } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
+import { Badge } from "@mantine/core";
+import { useTranslation } from "react-i18next";
 
 interface PendingBadgeProps {
   show: boolean;
-  size?: 'xs' | 'sm' | 'md' | 'lg';
+  size?: "xs" | "sm" | "md" | "lg";
 }
 
 /**
  * Badge to show when a setting has been saved but requires restart to take effect.
  */
-export default function PendingBadge({ show, size = 'xs' }: PendingBadgeProps) {
+export default function PendingBadge({ show, size = "xs" }: PendingBadgeProps) {
   const { t } = useTranslation();
 
   if (!show) return null;
 
   return (
     <Badge color="orange" size={size} variant="light">
-      {t('admin.settings.restartRequired', 'Restart Required')}
+      {t("admin.settings.restartRequired", "Restart Required")}
     </Badge>
   );
 }
diff --git a/frontend/src/core/components/shared/config/RestartConfirmationModal.tsx b/frontend/src/core/components/shared/config/RestartConfirmationModal.tsx
index b97b17a0c6..9f8c75cee3 100644
--- a/frontend/src/core/components/shared/config/RestartConfirmationModal.tsx
+++ b/frontend/src/core/components/shared/config/RestartConfirmationModal.tsx
@@ -1,8 +1,8 @@
-import { Modal, Text, Group, Button, Stack } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import RefreshIcon from '@mui/icons-material/Refresh';
-import ScheduleIcon from '@mui/icons-material/Schedule';
-import { Z_INDEX_OVER_CONFIG_MODAL } from '@app/styles/zIndex';
+import { Modal, Text, Group, Button, Stack } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import RefreshIcon from "@mui/icons-material/Refresh";
+import ScheduleIcon from "@mui/icons-material/Schedule";
+import { Z_INDEX_OVER_CONFIG_MODAL } from "@app/styles/zIndex";
 
 interface RestartConfirmationModalProps {
   opened: boolean;
@@ -10,11 +10,7 @@ interface RestartConfirmationModalProps {
   onRestart: () => void;
 }
 
-export default function RestartConfirmationModal({
-  opened,
-  onClose,
-  onRestart,
-}: RestartConfirmationModalProps) {
+export default function RestartConfirmationModal({ opened, onClose, onRestart }: RestartConfirmationModalProps) {
   const { t } = useTranslation();
 
   return (
@@ -23,7 +19,7 @@ export default function RestartConfirmationModal({
       onClose={onClose}
       title={
         <Text fw={600} size="lg">
-          {t('admin.settings.restart.title', 'Restart Required')}
+          {t("admin.settings.restart.title", "Restart Required")}
         </Text>
       }
       centered
@@ -34,32 +30,21 @@ export default function RestartConfirmationModal({
       <Stack gap="lg">
         <Text size="sm">
           {t(
-            'admin.settings.restart.message',
-            'Settings have been saved successfully. A server restart is required for the changes to take effect.'
+            "admin.settings.restart.message",
+            "Settings have been saved successfully. A server restart is required for the changes to take effect.",
           )}
         </Text>
 
         <Text size="sm" c="dimmed">
-          {t(
-            'admin.settings.restart.question',
-            'Would you like to restart the server now or later?'
-          )}
+          {t("admin.settings.restart.question", "Would you like to restart the server now or later?")}
         </Text>
 
         <Group justify="flex-end" gap="sm">
-          <Button
-            variant="default"
-            leftSection={<ScheduleIcon style={{ fontSize: 16 }} />}
-            onClick={onClose}
-          >
-            {t('admin.settings.restart.later', 'Restart Later')}
+          <Button variant="default" leftSection={<ScheduleIcon style={{ fontSize: 16 }} />} onClick={onClose}>
+            {t("admin.settings.restart.later", "Restart Later")}
           </Button>
-          <Button
-            color="blue"
-            leftSection={<RefreshIcon style={{ fontSize: 16 }} />}
-            onClick={onRestart}
-          >
-            {t('admin.settings.restart.now', 'Restart Now')}
+          <Button color="blue" leftSection={<RefreshIcon style={{ fontSize: 16 }} />} onClick={onRestart}>
+            {t("admin.settings.restart.now", "Restart Now")}
           </Button>
         </Group>
       </Stack>
diff --git a/frontend/src/core/components/shared/config/SettingsSearchBar.tsx b/frontend/src/core/components/shared/config/SettingsSearchBar.tsx
index cbbbd97076..b08a8b6184 100644
--- a/frontend/src/core/components/shared/config/SettingsSearchBar.tsx
+++ b/frontend/src/core/components/shared/config/SettingsSearchBar.tsx
@@ -1,10 +1,10 @@
-import React, { useMemo, useState, useCallback } from 'react';
-import { Select, Text } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { NavKey, VALID_NAV_KEYS } from '@app/components/shared/config/types';
-import { Z_INDEX_OVER_CONFIG_MODAL } from '@app/styles/zIndex';
-import type { ConfigNavSection, ConfigNavItem } from '@app/components/shared/config/configNavSections';
+import React, { useMemo, useState, useCallback } from "react";
+import { Select, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { NavKey, VALID_NAV_KEYS } from "@app/components/shared/config/types";
+import { Z_INDEX_OVER_CONFIG_MODAL } from "@app/styles/zIndex";
+import type { ConfigNavSection, ConfigNavItem } from "@app/components/shared/config/configNavSections";
 
 interface SettingsSearchBarProps {
   configNavSections: ConfigNavSection[];
@@ -22,35 +22,35 @@ interface SettingsSearchOption {
 }
 
 const SETTINGS_SEARCH_TRANSLATION_PREFIXES: Partial<Record<string, string[]>> = {
-  general: ['settings.general'],
-  hotkeys: ['settings.hotkeys'],
-  account: ['account'],
-  people: ['settings.workspace'],
-  teams: ['settings.workspace', 'settings.team'],
-  'api-keys': ['settings.developer'],
-  connectionMode: ['settings.connection'],
-  planBilling: ['settings.planBilling'],
-  adminGeneral: ['admin.settings.general'],
-  adminFeatures: ['admin.settings.features'],
-  adminEndpoints: ['admin.settings.endpoints'],
-  adminDatabase: ['admin.settings.database'],
-  adminAdvanced: ['admin.settings.advanced'],
-  adminSecurity: ['admin.settings.security'],
+  general: ["settings.general"],
+  hotkeys: ["settings.hotkeys"],
+  account: ["account"],
+  people: ["settings.workspace"],
+  teams: ["settings.workspace", "settings.team"],
+  "api-keys": ["settings.developer"],
+  connectionMode: ["settings.connection"],
+  planBilling: ["settings.planBilling"],
+  adminGeneral: ["admin.settings.general"],
+  adminFeatures: ["admin.settings.features"],
+  adminEndpoints: ["admin.settings.endpoints"],
+  adminDatabase: ["admin.settings.database"],
+  adminAdvanced: ["admin.settings.advanced"],
+  adminSecurity: ["admin.settings.security"],
   adminConnections: [
-    'admin.settings.connections',
-    'admin.settings.mail',
-    'admin.settings.security',
-    'admin.settings.telegram',
-    'admin.settings.premium',
-    'admin.settings.general',
-    'settings.securityAuth',
-    'settings.connection',
+    "admin.settings.connections",
+    "admin.settings.mail",
+    "admin.settings.security",
+    "admin.settings.telegram",
+    "admin.settings.premium",
+    "admin.settings.general",
+    "settings.securityAuth",
+    "settings.connection",
   ],
-  adminPlan: ['settings.planBilling', 'admin.settings.premium', 'settings.licensingAnalytics'],
-  adminAudit: ['settings.licensingAnalytics'],
-  adminUsage: ['settings.licensingAnalytics'],
-  adminLegal: ['admin.settings.legal'],
-  adminPrivacy: ['admin.settings.privacy'],
+  adminPlan: ["settings.planBilling", "admin.settings.premium", "settings.licensingAnalytics"],
+  adminAudit: ["settings.licensingAnalytics"],
+  adminUsage: ["settings.licensingAnalytics"],
+  adminLegal: ["admin.settings.legal"],
+  adminPrivacy: ["admin.settings.privacy"],
 };
 
 const getTranslationPrefixesForNavKey = (key: string): string[] => {
@@ -58,8 +58,8 @@ const getTranslationPrefixesForNavKey = (key: string): string[] => {
 
   const inferredPrefixes: string[] = [];
 
-  if (key.startsWith('admin')) {
-    const adminSuffix = key.replace(/^admin/, '');
+  if (key.startsWith("admin")) {
+    const adminSuffix = key.replace(/^admin/, "");
     const normalizedAdminSuffix = adminSuffix.charAt(0).toLowerCase() + adminSuffix.slice(1);
     inferredPrefixes.push(`admin.settings.${normalizedAdminSuffix}`);
   } else {
@@ -70,7 +70,7 @@ const getTranslationPrefixesForNavKey = (key: string): string[] => {
 };
 
 const flattenTranslationStrings = (value: unknown): string[] => {
-  if (typeof value === 'string') {
+  if (typeof value === "string") {
     const trimmed = value.trim();
     return trimmed ? [trimmed] : [];
   }
@@ -79,7 +79,7 @@ const flattenTranslationStrings = (value: unknown): string[] => {
     return value.flatMap(flattenTranslationStrings);
   }
 
-  if (value && typeof value === 'object') {
+  if (value && typeof value === "object") {
     return Object.values(value as Record<string, unknown>).flatMap(flattenTranslationStrings);
   }
 
@@ -102,19 +102,15 @@ const buildMatchSnippet = (text: string, query: string): string => {
   const snippet = text.slice(start, end);
 
   if (snippet.length <= maxLength) {
-    return `${start > 0 ? '…' : ''}${snippet}${end < text.length ? '…' : ''}`;
+    return `${start > 0 ? "…" : ""}${snippet}${end < text.length ? "…" : ""}`;
   }
 
-  return `${start > 0 ? '…' : ''}${snippet.slice(0, maxLength)}${end < text.length ? '…' : ''}`;
+  return `${start > 0 ? "…" : ""}${snippet.slice(0, maxLength)}${end < text.length ? "…" : ""}`;
 };
 
-export const SettingsSearchBar: React.FC<SettingsSearchBarProps> = ({
-  configNavSections,
-  onNavigate,
-  isMobile,
-}) => {
+export const SettingsSearchBar: React.FC<SettingsSearchBarProps> = ({ configNavSections, onNavigate, isMobile }) => {
   const { t } = useTranslation();
-  const [searchValue, setSearchValue] = useState('');
+  const [searchValue, setSearchValue] = useState("");
 
   // Build a global index from every accessible settings tab in the modal navigation.
   // This does not render section components, so API calls still happen only when a tab is opened.
@@ -125,16 +121,11 @@ export const SettingsSearchBar: React.FC<SettingsSearchBarProps> = ({
         .map((item: ConfigNavItem) => {
           const translationPrefixes = getTranslationPrefixesForNavKey(item.key);
           const translationContent = translationPrefixes.flatMap((prefix) =>
-            flattenTranslationStrings(t(prefix, { returnObjects: true, defaultValue: {} } as any))
+            flattenTranslationStrings(t(prefix, { returnObjects: true, defaultValue: {} } as any)),
           );
 
           const searchableContent = Array.from(
-            new Set([
-              item.label,
-              section.title,
-              `/settings/${item.key}`,
-              ...translationContent,
-            ])
+            new Set([item.label, section.title, `/settings/${item.key}`, ...translationContent]),
           );
 
           return {
@@ -144,7 +135,7 @@ export const SettingsSearchBar: React.FC<SettingsSearchBarProps> = ({
             destinationPath: `/settings/${item.key}`,
             searchableContent,
           };
-        })
+        }),
     );
   }, [configNavSections, t]);
 
@@ -157,9 +148,7 @@ export const SettingsSearchBar: React.FC<SettingsSearchBarProps> = ({
     const normalizedQuery = query.toLocaleLowerCase();
 
     return searchableSections.reduce<SettingsSearchOption[]>((accumulator, option) => {
-      const matchedEntry = option.searchableContent.find((entry) =>
-        entry.toLocaleLowerCase().includes(normalizedQuery)
-      );
+      const matchedEntry = option.searchableContent.find((entry) => entry.toLocaleLowerCase().includes(normalizedQuery));
 
       if (!matchedEntry) {
         return accumulator;
@@ -174,12 +163,15 @@ export const SettingsSearchBar: React.FC<SettingsSearchBarProps> = ({
     }, []);
   }, [searchValue, searchableSections]);
 
-  const handleSearchNavigation = useCallback(async (value: string | null) => {
-    if (!value) return;
-    if (!VALID_NAV_KEYS.includes(value as NavKey)) return;
-    await onNavigate(value as NavKey);
-    setSearchValue('');
-  }, [onNavigate]);
+  const handleSearchNavigation = useCallback(
+    async (value: string | null) => {
+      if (!value) return;
+      if (!VALID_NAV_KEYS.includes(value as NavKey)) return;
+      await onNavigate(value as NavKey);
+      setSearchValue("");
+    },
+    [onNavigate],
+  );
 
   return (
     <Select
@@ -189,10 +181,10 @@ export const SettingsSearchBar: React.FC<SettingsSearchBarProps> = ({
       searchValue={searchValue}
       onSearchChange={setSearchValue}
       onChange={handleSearchNavigation}
-      placeholder={t('settings.search.placeholder', 'Search settings pages...')}
+      placeholder={t("settings.search.placeholder", "Search settings pages...")}
       leftSection={<LocalIcon icon="search-rounded" width={16} height={16} />}
-      aria-label={t('navbar.search', 'Search')}
-      nothingFoundMessage={t('search.noResults', 'No results found')}
+      aria-label={t("navbar.search", "Search")}
+      nothingFoundMessage={t("search.noResults", "No results found")}
       searchable
       clearable={false}
       w={isMobile ? 170 : 320}
@@ -201,7 +193,9 @@ export const SettingsSearchBar: React.FC<SettingsSearchBarProps> = ({
         const searchOption = option as unknown as SettingsSearchOption;
         return (
           <div className="settings-search-option">
-            <Text size="sm" fw={600}>{searchOption.label}</Text>
+            <Text size="sm" fw={600}>
+              {searchOption.label}
+            </Text>
             <Text size="xs" c="dimmed">
               {searchOption.sectionTitle} · {searchOption.matchedContext || searchOption.destinationPath}
             </Text>
diff --git a/frontend/src/core/components/shared/config/SettingsStickyFooter.tsx b/frontend/src/core/components/shared/config/SettingsStickyFooter.tsx
index 0a533d57ee..5bd2b9a3d5 100644
--- a/frontend/src/core/components/shared/config/SettingsStickyFooter.tsx
+++ b/frontend/src/core/components/shared/config/SettingsStickyFooter.tsx
@@ -1,5 +1,5 @@
-import { Button, Group, Text } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
+import { Button, Group, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
 
 interface SettingsStickyFooterProps {
   isDirty: boolean;
@@ -9,13 +9,7 @@ interface SettingsStickyFooterProps {
   onDiscard: () => void;
 }
 
-export function SettingsStickyFooter({
-  isDirty,
-  saving,
-  loginEnabled,
-  onSave,
-  onDiscard,
-}: SettingsStickyFooterProps) {
+export function SettingsStickyFooter({ isDirty, saving, loginEnabled, onSave, onDiscard }: SettingsStickyFooterProps) {
   const { t } = useTranslation();
 
   if (!isDirty || !loginEnabled) {
@@ -26,14 +20,14 @@ export function SettingsStickyFooter({
     <div className="settings-sticky-footer">
       <Group justify="space-between" w="100%">
         <Text size="sm" c="dimmed">
-          {t('admin.settings.unsavedChanges.hint', 'You have unsaved changes')}
+          {t("admin.settings.unsavedChanges.hint", "You have unsaved changes")}
         </Text>
         <Group gap="sm">
           <Button variant="default" onClick={onDiscard} size="sm">
-            {t('admin.settings.discard', 'Discard')}
+            {t("admin.settings.discard", "Discard")}
           </Button>
           <Button onClick={onSave} loading={saving} size="sm">
-            {t('admin.settings.save', 'Save Changes')}
+            {t("admin.settings.save", "Save Changes")}
           </Button>
         </Group>
       </Group>
diff --git a/frontend/src/core/components/shared/config/configNavSections.tsx b/frontend/src/core/components/shared/config/configNavSections.tsx
index 38a6e14cf6..97bf2f774f 100644
--- a/frontend/src/core/components/shared/config/configNavSections.tsx
+++ b/frontend/src/core/components/shared/config/configNavSections.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { NavKey } from '@app/components/shared/config/types';
-import HotkeysSection from '@app/components/shared/config/configSections/HotkeysSection';
-import GeneralSection from '@app/components/shared/config/configSections/GeneralSection';
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { NavKey } from "@app/components/shared/config/types";
+import HotkeysSection from "@app/components/shared/config/configSections/HotkeysSection";
+import GeneralSection from "@app/components/shared/config/configSections/GeneralSection";
 
 export interface ConfigNavItem {
   key: NavKey;
@@ -33,25 +33,25 @@ export interface ConfigColors {
 export const useConfigNavSections = (
   _isAdmin: boolean = false,
   _runningEE: boolean = false,
-  _loginEnabled: boolean = false
+  _loginEnabled: boolean = false,
 ): ConfigNavSection[] => {
   const { t } = useTranslation();
 
   const sections: ConfigNavSection[] = [
     {
-      title: t('settings.preferences.title', 'Preferences'),
+      title: t("settings.preferences.title", "Preferences"),
       items: [
         {
-          key: 'general',
-          label: t('settings.general.title', 'General'),
-          icon: 'settings-rounded',
-          component: <GeneralSection />
+          key: "general",
+          label: t("settings.general.title", "General"),
+          icon: "settings-rounded",
+          component: <GeneralSection />,
         },
         {
-          key: 'hotkeys',
-          label: t('settings.hotkeys.title', 'Keyboard Shortcuts'),
-          icon: 'keyboard-rounded',
-          component: <HotkeysSection />
+          key: "hotkeys",
+          label: t("settings.hotkeys.title", "Keyboard Shortcuts"),
+          icon: "keyboard-rounded",
+          component: <HotkeysSection />,
         },
       ],
     },
@@ -64,24 +64,24 @@ export const useConfigNavSections = (
 export const createConfigNavSections = (
   _isAdmin: boolean = false,
   _runningEE: boolean = false,
-  _loginEnabled: boolean = false
+  _loginEnabled: boolean = false,
 ): ConfigNavSection[] => {
-  console.warn('createConfigNavSections is deprecated. Use useConfigNavSections hook instead for proper i18n support.');
+  console.warn("createConfigNavSections is deprecated. Use useConfigNavSections hook instead for proper i18n support.");
   const sections: ConfigNavSection[] = [
     {
-      title: 'Preferences',
+      title: "Preferences",
       items: [
         {
-          key: 'general',
-          label: 'General',
-          icon: 'settings-rounded',
-          component: <GeneralSection />
+          key: "general",
+          label: "General",
+          icon: "settings-rounded",
+          component: <GeneralSection />,
         },
         {
-          key: 'hotkeys',
-          label: 'Keyboard Shortcuts',
-          icon: 'keyboard-rounded',
-          component: <HotkeysSection />
+          key: "hotkeys",
+          label: "Keyboard Shortcuts",
+          icon: "keyboard-rounded",
+          component: <HotkeysSection />,
         },
       ],
     },
diff --git a/frontend/src/core/components/shared/config/configSections/GeneralSection.tsx b/frontend/src/core/components/shared/config/configSections/GeneralSection.tsx
index d65bdcc8bf..d95f10dd05 100644
--- a/frontend/src/core/components/shared/config/configSections/GeneralSection.tsx
+++ b/frontend/src/core/components/shared/config/configSections/GeneralSection.tsx
@@ -36,7 +36,11 @@ interface GeneralSectionProps {
   hideAdminBanner?: boolean;
 }
 
-const GeneralSection: React.FC<GeneralSectionProps> = ({ hideTitle = false, hideUpdateSection = false, hideAdminBanner = false }) => {
+const GeneralSection: React.FC<GeneralSectionProps> = ({
+  hideTitle = false,
+  hideUpdateSection = false,
+  hideAdminBanner = false,
+}) => {
   const { t } = useTranslation();
   const { preferences, updatePreference } = usePreferences();
   const { config } = useAppConfig();
diff --git a/frontend/src/core/components/shared/config/configSections/HotkeysSection.tsx b/frontend/src/core/components/shared/config/configSections/HotkeysSection.tsx
index 8d0774fbe1..044601093c 100644
--- a/frontend/src/core/components/shared/config/configSections/HotkeysSection.tsx
+++ b/frontend/src/core/components/shared/config/configSections/HotkeysSection.tsx
@@ -1,25 +1,25 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { Alert, Badge, Box, Button, Divider, Group, Paper, Stack, Text, TextInput } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
-import { useHotkeys } from '@app/contexts/HotkeyContext';
-import { ToolId } from '@app/types/toolId';
-import HotkeyDisplay from '@app/components/hotkeys/HotkeyDisplay';
-import { bindingEquals, eventToBinding, HotkeyBinding } from '@app/utils/hotkeys';
+import React, { useEffect, useMemo, useState } from "react";
+import { Alert, Badge, Box, Button, Divider, Group, Paper, Stack, Text, TextInput } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
+import { useHotkeys } from "@app/contexts/HotkeyContext";
+import { ToolId } from "@app/types/toolId";
+import HotkeyDisplay from "@app/components/hotkeys/HotkeyDisplay";
+import { bindingEquals, eventToBinding, HotkeyBinding } from "@app/utils/hotkeys";
 import { ToolRegistryEntry } from "@app/data/toolsTaxonomy";
 
 const rowStyle: React.CSSProperties = {
-  display: 'flex',
-  flexDirection: 'column',
-  gap: '0.5rem',
+  display: "flex",
+  flexDirection: "column",
+  gap: "0.5rem",
 };
 
 const rowHeaderStyle: React.CSSProperties = {
-  display: 'flex',
-  flexWrap: 'wrap',
-  alignItems: 'center',
-  justifyContent: 'space-between',
-  gap: '0.5rem',
+  display: "flex",
+  flexWrap: "wrap",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: "0.5rem",
 };
 
 const HotkeysSection: React.FC = () => {
@@ -28,18 +28,19 @@ const HotkeysSection: React.FC = () => {
   const { hotkeys, defaults, updateHotkey, resetHotkey, pauseHotkeys, resumeHotkeys, getDisplayParts, isMac } = useHotkeys();
   const [editingTool, setEditingTool] = useState<ToolId | null>(null);
   const [error, setError] = useState<string | null>(null);
-  const [searchQuery, setSearchQuery] = useState<string>('');
+  const [searchQuery, setSearchQuery] = useState<string>("");
 
   const tools = useMemo(() => Object.entries(toolRegistry) as [ToolId, ToolRegistryEntry][], [toolRegistry]);
 
   const filteredTools = useMemo(() => {
     if (!searchQuery.trim()) return tools;
-    
+
     const query = searchQuery.toLowerCase();
-    return tools.filter(([toolId, tool]) => 
-      tool.name.toLowerCase().includes(query) ||
-      tool.description.toLowerCase().includes(query) ||
-      toolId.toLowerCase().includes(query)
+    return tools.filter(
+      ([toolId, tool]) =>
+        tool.name.toLowerCase().includes(query) ||
+        tool.description.toLowerCase().includes(query) ||
+        toolId.toLowerCase().includes(query),
     );
   }, [tools, searchQuery]);
 
@@ -59,7 +60,7 @@ const HotkeysSection: React.FC = () => {
     }
 
     const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') {
+      if (event.key === "Escape") {
         event.preventDefault();
         event.stopPropagation();
         setEditingTool(null);
@@ -72,21 +73,19 @@ const HotkeysSection: React.FC = () => {
 
       const binding = eventToBinding(event as KeyboardEvent);
       if (!binding) {
-        const osKey = isMac ? 'mac' : 'windows';
+        const osKey = isMac ? "mac" : "windows";
         setError(t(`settings.hotkeys.errorModifier.${osKey}`));
         return;
       }
 
-      const conflictEntry = (Object.entries(hotkeys) as [ToolId, HotkeyBinding][]).find(([toolId, existing]) => (
-        toolId !== editingTool && bindingEquals(existing, binding)
-      ));
+      const conflictEntry = (Object.entries(hotkeys) as [ToolId, HotkeyBinding][]).find(
+        ([toolId, existing]) => toolId !== editingTool && bindingEquals(existing, binding),
+      );
 
       if (conflictEntry) {
         const conflictKey = conflictEntry[0];
-        const conflictTool = (conflictKey in toolRegistry)
-          ? toolRegistry[conflictKey as ToolId]?.name
-          : conflictKey;
-        setError(t('settings.hotkeys.errorConflict', 'Shortcut already used by {{tool}}.', { tool: conflictTool }));
+        const conflictTool = conflictKey in toolRegistry ? toolRegistry[conflictKey as ToolId]?.name : conflictKey;
+        setError(t("settings.hotkeys.errorConflict", "Shortcut already used by {{tool}}.", { tool: conflictTool }));
         return;
       }
 
@@ -95,9 +94,9 @@ const HotkeysSection: React.FC = () => {
       setError(null);
     };
 
-    window.addEventListener('keydown', handleKeyDown, true);
+    window.addEventListener("keydown", handleKeyDown, true);
     return () => {
-      window.removeEventListener('keydown', handleKeyDown, true);
+      window.removeEventListener("keydown", handleKeyDown, true);
     };
   }, [editingTool, hotkeys, toolRegistry, updateHotkey, t]);
 
@@ -109,14 +108,19 @@ const HotkeysSection: React.FC = () => {
   return (
     <Stack gap="lg">
       <div>
-        <Text fw={600} size="lg">{t('settings.hotkeys.title', 'Keyboard Shortcuts')}</Text>
+        <Text fw={600} size="lg">
+          {t("settings.hotkeys.title", "Keyboard Shortcuts")}
+        </Text>
         <Text size="sm" c="dimmed">
-          {t('settings.hotkeys.description', 'Customize keyboard shortcuts for quick tool access. Click "Change shortcut" and press a new key combination. Press Esc to cancel.')}
+          {t(
+            "settings.hotkeys.description",
+            'Customize keyboard shortcuts for quick tool access. Click "Change shortcut" and press a new key combination. Press Esc to cancel.',
+          )}
         </Text>
       </div>
 
       <TextInput
-        placeholder={t('settings.hotkeys.searchPlaceholder', 'Search tools...')}
+        placeholder={t("settings.hotkeys.searchPlaceholder", "Search tools...")}
         value={searchQuery}
         onChange={(event) => setSearchQuery(event.currentTarget.value)}
         size="md"
@@ -127,70 +131,69 @@ const HotkeysSection: React.FC = () => {
         <Stack gap="md">
           {filteredTools.length === 0 ? (
             <Text c="dimmed" ta="center" py="xl">
-              {t('toolPicker.noToolsFound', 'No tools found')}
+              {t("toolPicker.noToolsFound", "No tools found")}
             </Text>
           ) : (
             filteredTools.map(([toolId, tool], index) => {
-            const currentBinding = hotkeys[toolId];
-            const defaultBinding = defaults[toolId];
-            const isEditing = editingTool === toolId;
-            const defaultParts = getDisplayParts(defaultBinding);
-            const defaultLabel = defaultParts.length > 0
-              ? defaultParts.join(' + ')
-              : t('settings.hotkeys.none', 'Not assigned');
+              const currentBinding = hotkeys[toolId];
+              const defaultBinding = defaults[toolId];
+              const isEditing = editingTool === toolId;
+              const defaultParts = getDisplayParts(defaultBinding);
+              const defaultLabel =
+                defaultParts.length > 0 ? defaultParts.join(" + ") : t("settings.hotkeys.none", "Not assigned");
 
-            return (
-              <React.Fragment key={toolId}>
-                <Box style={rowStyle} data-testid={`hotkey-row-${toolId}`}>
-                  <div style={rowHeaderStyle}>
-                    <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem', minWidth: 0 }}>
-                      <Text fw={600}>{tool.name}</Text>
-                      <Group gap="xs" wrap="wrap" align="center">
-                        <HotkeyDisplay binding={currentBinding} size="md" />
-                        {!bindingEquals(currentBinding, defaultBinding) && (
-                          <Badge variant="light" color="orange" radius="sm">
-                            {t('settings.hotkeys.customBadge', 'Custom')}
-                          </Badge>
-                        )}
-                        <Text size="xs" c="dimmed">
-                          {t('settings.hotkeys.defaultLabel', 'Default: {{shortcut}}', { shortcut: defaultLabel })}
-                        </Text>
+              return (
+                <React.Fragment key={toolId}>
+                  <Box style={rowStyle} data-testid={`hotkey-row-${toolId}`}>
+                    <div style={rowHeaderStyle}>
+                      <div style={{ display: "flex", flexDirection: "column", gap: "0.25rem", minWidth: 0 }}>
+                        <Text fw={600}>{tool.name}</Text>
+                        <Group gap="xs" wrap="wrap" align="center">
+                          <HotkeyDisplay binding={currentBinding} size="md" />
+                          {!bindingEquals(currentBinding, defaultBinding) && (
+                            <Badge variant="light" color="orange" radius="sm">
+                              {t("settings.hotkeys.customBadge", "Custom")}
+                            </Badge>
+                          )}
+                          <Text size="xs" c="dimmed">
+                            {t("settings.hotkeys.defaultLabel", "Default: {{shortcut}}", { shortcut: defaultLabel })}
+                          </Text>
+                        </Group>
+                      </div>
+
+                      <Group gap="xs">
+                        <Button
+                          size="xs"
+                          variant={isEditing ? "filled" : "default"}
+                          color={isEditing ? "blue" : undefined}
+                          onClick={() => handleStartCapture(toolId)}
+                        >
+                          {isEditing
+                            ? t("settings.hotkeys.capturing", "Press keys… (Esc to cancel)")
+                            : t("settings.hotkeys.change", "Change shortcut")}
+                        </Button>
+                        <Button
+                          size="xs"
+                          variant="subtle"
+                          disabled={bindingEquals(currentBinding, defaultBinding)}
+                          onClick={() => resetHotkey(toolId)}
+                        >
+                          {t("settings.hotkeys.reset", "Reset")}
+                        </Button>
                       </Group>
                     </div>
 
-                    <Group gap="xs">
-                      <Button
-                        size="xs"
-                        variant={isEditing ? 'filled' : 'default'}
-                        color={isEditing ? 'blue' : undefined}
-                        onClick={() => handleStartCapture(toolId)}
-                      >
-                        {isEditing
-                          ? t('settings.hotkeys.capturing', 'Press keys… (Esc to cancel)')
-                          : t('settings.hotkeys.change', 'Change shortcut')}
-                      </Button>
-                      <Button
-                        size="xs"
-                        variant="subtle"
-                        disabled={bindingEquals(currentBinding, defaultBinding)}
-                        onClick={() => resetHotkey(toolId)}
-                      >
-                        {t('settings.hotkeys.reset', 'Reset')}
-                      </Button>
-                    </Group>
-                  </div>
+                    {isEditing && error && (
+                      <Alert color="red" radius="sm" variant="filled">
+                        {error}
+                      </Alert>
+                    )}
+                  </Box>
 
-                  {isEditing && error && (
-                    <Alert color="red" radius="sm" variant="filled">
-                      {error}
-                    </Alert>
-                  )}
-                </Box>
-
-                {index < filteredTools.length - 1 && <Divider />}
-              </React.Fragment>
-            );
-          })
+                  {index < filteredTools.length - 1 && <Divider />}
+                </React.Fragment>
+              );
+            })
           )}
         </Stack>
       </Paper>
diff --git a/frontend/src/core/components/shared/config/configSections/Overview.tsx b/frontend/src/core/components/shared/config/configSections/Overview.tsx
index 3bc8e84d91..d6f995de0f 100644
--- a/frontend/src/core/components/shared/config/configSections/Overview.tsx
+++ b/frontend/src/core/components/shared/config/configSections/Overview.tsx
@@ -1,33 +1,35 @@
-import React from 'react';
-import { Stack, Text, Code, Group, Badge, Alert, Loader } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
-import { OverviewHeader } from '@app/components/shared/config/OverviewHeader';
+import React from "react";
+import { Stack, Text, Code, Group, Badge, Alert, Loader } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
+import { OverviewHeader } from "@app/components/shared/config/OverviewHeader";
 
 const Overview: React.FC = () => {
   const { t } = useTranslation();
   const { config, loading, error } = useAppConfig();
 
   const renderConfigSection = (title: string, data: any) => {
-    if (!data || typeof data !== 'object') return null;
+    if (!data || typeof data !== "object") return null;
 
     return (
       <Stack gap="xs" mb="md">
-        <Text fw={600} size="md" c="blue">{title}</Text>
+        <Text fw={600} size="md" c="blue">
+          {title}
+        </Text>
         <Stack gap="xs" pl="md">
           {Object.entries(data).map(([key, value]) => (
             <Group key={key} wrap="nowrap" align="flex-start">
               <Text size="sm" w={150} style={{ flexShrink: 0 }} c="dimmed">
                 {key}:
               </Text>
-              {typeof value === 'boolean' ? (
-                <Badge color={value ? 'green' : 'red'} size="sm">
-                  {value ? 'true' : 'false'}
+              {typeof value === "boolean" ? (
+                <Badge color={value ? "green" : "red"} size="sm">
+                  {value ? "true" : "false"}
                 </Badge>
-              ) : typeof value === 'object' ? (
+              ) : typeof value === "object" ? (
                 <Code block>{JSON.stringify(value, null, 2)}</Code>
               ) : (
-                String(value) || 'null'
+                String(value) || "null"
               )}
             </Group>
           ))}
@@ -36,38 +38,48 @@ const Overview: React.FC = () => {
     );
   };
 
-  const basicConfig = config ? {
-    appNameNavbar: config.appNameNavbar,
-    baseUrl: config.baseUrl,
-    contextPath: config.contextPath,
-    serverPort: config.serverPort,
-  } : null;
+  const basicConfig = config
+    ? {
+        appNameNavbar: config.appNameNavbar,
+        baseUrl: config.baseUrl,
+        contextPath: config.contextPath,
+        serverPort: config.serverPort,
+      }
+    : null;
 
-  const securityConfig = config ? {
-    enableLogin: config.enableLogin,
-  } : null;
+  const securityConfig = config
+    ? {
+        enableLogin: config.enableLogin,
+      }
+    : null;
 
-  const systemConfig = config ? {
-    enableAlphaFunctionality: config.enableAlphaFunctionality,
-    enableAnalytics: config.enableAnalytics,
-  } : null;
+  const systemConfig = config
+    ? {
+        enableAlphaFunctionality: config.enableAlphaFunctionality,
+        enableAnalytics: config.enableAnalytics,
+      }
+    : null;
 
-  const integrationConfig = config ? {
-    SSOAutoLogin: config.SSOAutoLogin,
-  } : null;
+  const integrationConfig = config
+    ? {
+        SSOAutoLogin: config.SSOAutoLogin,
+      }
+    : null;
 
   if (loading) {
     return (
       <Stack align="center" py="md">
         <Loader size="sm" />
-        <Text size="sm" c="dimmed">{t('config.overview.loading', 'Loading configuration...')}</Text>
+        <Text size="sm" c="dimmed">
+          {t("config.overview.loading", "Loading configuration...")}
+        </Text>
       </Stack>
     );
   }
 
   if (error) {
     return (
-      <Alert color="red" title={t('config.overview.error', 'Error')}>
+      <Alert color="red" title={t("config.overview.error", "Error")}>
         {error}
       </Alert>
     );
@@ -79,13 +91,13 @@ const Overview: React.FC = () => {
 
       {config && (
         <>
-          {renderConfigSection(t('config.overview.sections.basic', 'Basic Configuration'), basicConfig)}
-          {renderConfigSection(t('config.overview.sections.security', 'Security Configuration'), securityConfig)}
-          {renderConfigSection(t('config.overview.sections.system', 'System Configuration'), systemConfig)}
-          {renderConfigSection(t('config.overview.sections.integration', 'Integration Configuration'), integrationConfig)}
+          {renderConfigSection(t("config.overview.sections.basic", "Basic Configuration"), basicConfig)}
+          {renderConfigSection(t("config.overview.sections.security", "Security Configuration"), securityConfig)}
+          {renderConfigSection(t("config.overview.sections.system", "System Configuration"), systemConfig)}
+          {renderConfigSection(t("config.overview.sections.integration", "Integration Configuration"), integrationConfig)}
 
           {config.error && (
-            <Alert color="yellow" title={t('config.overview.warning', 'Configuration Warning')}>
+            <Alert color="yellow" title={t("config.overview.warning", "Configuration Warning")}>
               {config.error}
             </Alert>
           )}
diff --git a/frontend/src/core/components/shared/config/configSections/ProviderCard.tsx b/frontend/src/core/components/shared/config/configSections/ProviderCard.tsx
index be3348b794..f8078aca3d 100644
--- a/frontend/src/core/components/shared/config/configSections/ProviderCard.tsx
+++ b/frontend/src/core/components/shared/config/configSections/ProviderCard.tsx
@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from "react";
 import {
   Paper,
   Group,
@@ -12,11 +12,11 @@ import {
   NumberInput,
   TagsInput,
   Anchor,
-} from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import EditableSecretField from '@app/components/shared/EditableSecretField';
-import { Provider, ProviderField } from '@app/components/shared/config/configSections/providerDefinitions';
+} from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import EditableSecretField from "@app/components/shared/EditableSecretField";
+import { Provider, ProviderField } from "@app/components/shared/config/configSections/providerDefinitions";
 
 interface ProviderCardProps {
   provider: Provider;
@@ -83,15 +83,19 @@ export default function ProviderCard({
   };
 
   const renderField = (field: ProviderField) => {
-    const value = localSettings[field.key] ?? field.defaultValue ?? '';
+    const value = localSettings[field.key] ?? field.defaultValue ?? "";
 
     switch (field.type) {
-      case 'switch':
+      case "switch":
         return (
-          <div key={field.key} style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+          <div key={field.key} style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
             <div>
-              <Text fw={500} size="sm">{field.label}</Text>
-              <Text size="xs" c="dimmed" mt={4}>{field.description}</Text>
+              <Text fw={500} size="sm">
+                {field.label}
+              </Text>
+              <Text size="xs" c="dimmed" mt={4}>
+                {field.description}
+              </Text>
             </div>
             <Switch
               checked={value || false}
@@ -101,7 +105,7 @@ export default function ProviderCard({
           </div>
         );
 
-      case 'password':
+      case "password":
         return (
           <EditableSecretField
             key={field.key}
@@ -114,7 +118,7 @@ export default function ProviderCard({
           />
         );
 
-      case 'textarea':
+      case "textarea":
         return (
           <Textarea
             key={field.key}
@@ -127,7 +131,7 @@ export default function ProviderCard({
           />
         );
 
-      case 'number':
+      case "number":
         return (
           <NumberInput
             key={field.key}
@@ -141,7 +145,7 @@ export default function ProviderCard({
           />
         );
 
-      case 'tags': {
+      case "tags": {
         const tagValue = Array.isArray(value) ? value.map((val) => `${val}`) : [];
 
         return (
@@ -174,14 +178,8 @@ export default function ProviderCard({
 
   const renderProviderIcon = () => {
     // If icon starts with '/', it's a path to an SVG file
-    if (provider.icon.startsWith('/')) {
-      return (
-        <img
-          src={provider.icon}
-          alt={provider.name}
-          style={{ width: '1.5rem', height: '1.5rem' }}
-        />
-      );
+    if (provider.icon.startsWith("/")) {
+      return <img src={provider.icon} alt={provider.name} style={{ width: "1.5rem", height: "1.5rem" }} />;
     }
     // Otherwise use LocalIcon for iconify icons
     return <LocalIcon icon={provider.icon} width="1.5rem" height="1.5rem" />;
@@ -195,8 +193,12 @@ export default function ProviderCard({
           <Group gap="sm" style={{ flex: 1, minWidth: 0 }}>
             {renderProviderIcon()}
             <div style={{ flex: 1, minWidth: 0 }}>
-              <Text fw={600} size="sm">{provider.name}</Text>
-              <Text size="xs" c="dimmed" truncate>{provider.scope}</Text>
+              <Text fw={600} size="sm">
+                {provider.name}
+              </Text>
+              <Text size="xs" c="dimmed" truncate>
+                {provider.scope}
+              </Text>
             </div>
           </Group>
 
@@ -207,24 +209,19 @@ export default function ProviderCard({
               onClick={isConfigured ? () => setExpanded(!expanded) : handleConnectToggle}
               rightSection={
                 expanded ? (
-                  <LocalIcon
-                    icon="close-rounded"
-                    width="1rem"
-                    height="1rem"
-                  />
-                ) : (isConfigured ? (
-                  <LocalIcon
-                    icon="expand-more-rounded"
-                    width="1rem"
-                    height="1rem"
-                  />
-                ) : undefined)
+                  <LocalIcon icon="close-rounded" width="1rem" height="1rem" />
+                ) : isConfigured ? (
+                  <LocalIcon icon="expand-more-rounded" width="1rem" height="1rem" />
+                ) : undefined
               }
             >
               {isConfigured
-                ? (expanded ? t('admin.close', 'Close') : t('admin.expand', 'Expand'))
-                : (expanded ? t('admin.close', 'Close') : t('admin.settings.connections.connect', 'Connect'))
-              }
+                ? expanded
+                  ? t("admin.close", "Close")
+                  : t("admin.expand", "Expand")
+                : expanded
+                  ? t("admin.close", "Close")
+                  : t("admin.settings.connections.connect", "Connect")}
             </Button>
           </Group>
         </Group>
@@ -234,13 +231,8 @@ export default function ProviderCard({
           <Stack gap="md" mt="xs">
             {/* Documentation Link */}
             {provider.documentationUrl && (
-              <Anchor
-                href={provider.documentationUrl}
-                target="_blank"
-                size="xs"
-                c="blue"
-              >
-                {t('admin.settings.connections.documentation', 'View documentation')} ↗
+              <Anchor href={provider.documentationUrl} target="_blank" size="xs" c="blue">
+                {t("admin.settings.connections.documentation", "View documentation")} ↗
               </Anchor>
             )}
 
@@ -249,19 +241,13 @@ export default function ProviderCard({
             {!readOnly && (onSave || onDisconnect) && (
               <Group justify="flex-end" mt="sm">
                 {onDisconnect && (
-                  <Button
-                    variant="outline"
-                    color="red"
-                    size="sm"
-                    onClick={onDisconnect}
-                    disabled={disabled}
-                  >
-                    {t('admin.settings.connections.disconnect', 'Disconnect')}
+                  <Button variant="outline" color="red" size="sm" onClick={onDisconnect} disabled={disabled}>
+                    {t("admin.settings.connections.disconnect", "Disconnect")}
                   </Button>
                 )}
                 {onSave && (
                   <Button size="sm" onClick={handleSave} disabled={disabled}>
-                    {t('admin.settings.save', 'Save Changes')}
+                    {t("admin.settings.save", "Save Changes")}
                   </Button>
                 )}
               </Group>
diff --git a/frontend/src/core/components/shared/config/configSections/providerDefinitions.ts b/frontend/src/core/components/shared/config/configSections/providerDefinitions.ts
index cb1f69e0d4..5b0c335d74 100644
--- a/frontend/src/core/components/shared/config/configSections/providerDefinitions.ts
+++ b/frontend/src/core/components/shared/config/configSections/providerDefinitions.ts
@@ -1,10 +1,10 @@
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
 
-export type ProviderType = 'oauth2' | 'saml2' | 'telegram' | 'googledrive';
+export type ProviderType = "oauth2" | "saml2" | "telegram" | "googledrive";
 
 export interface ProviderField {
   key: string;
-  type: 'text' | 'password' | 'switch' | 'textarea' | 'number' | 'tags';
+  type: "text" | "password" | "switch" | "textarea" | "number" | "tags";
   label: string;
   description: string;
   placeholder?: string;
@@ -26,39 +26,45 @@ const useGoogleProvider = (): Provider => {
   const { t } = useTranslation();
 
   return {
-    id: 'google',
-    name: 'Google',
-    icon: '/Login/google.svg',
-    type: 'oauth2',
-    scope: t('provider.oauth2.google.scope', 'Sign-in authentication'),
-    documentationUrl: 'https://docs.stirlingpdf.com/Configuration/OAuth%20SSO%20Configuration',
+    id: "google",
+    name: "Google",
+    icon: "/Login/google.svg",
+    type: "oauth2",
+    scope: t("provider.oauth2.google.scope", "Sign-in authentication"),
+    documentationUrl: "https://docs.stirlingpdf.com/Configuration/OAuth%20SSO%20Configuration",
     fields: [
       {
-        key: 'clientId',
-        type: 'text',
-        label: t('provider.oauth2.google.clientId.label', 'Client ID'),
-        description: t('provider.oauth2.google.clientId.description', 'The OAuth2 client ID from Google Cloud Console'),
-        placeholder: 'your-client-id.apps.googleusercontent.com',
+        key: "clientId",
+        type: "text",
+        label: t("provider.oauth2.google.clientId.label", "Client ID"),
+        description: t("provider.oauth2.google.clientId.description", "The OAuth2 client ID from Google Cloud Console"),
+        placeholder: "your-client-id.apps.googleusercontent.com",
       },
       {
-        key: 'clientSecret',
-        type: 'password',
-        label: t('provider.oauth2.google.clientSecret.label', 'Client Secret'),
-        description: t('provider.oauth2.google.clientSecret.description', 'The OAuth2 client secret from Google Cloud Console'),
+        key: "clientSecret",
+        type: "password",
+        label: t("provider.oauth2.google.clientSecret.label", "Client Secret"),
+        description: t(
+          "provider.oauth2.google.clientSecret.description",
+          "The OAuth2 client secret from Google Cloud Console",
+        ),
       },
       {
-        key: 'scopes',
-        type: 'text',
-        label: t('provider.oauth2.google.scopes.label', 'Scopes'),
-        description: t('provider.oauth2.google.scopes.description', 'Comma-separated OAuth2 scopes'),
-        defaultValue: 'email, profile',
+        key: "scopes",
+        type: "text",
+        label: t("provider.oauth2.google.scopes.label", "Scopes"),
+        description: t("provider.oauth2.google.scopes.description", "Comma-separated OAuth2 scopes"),
+        defaultValue: "email, profile",
       },
       {
-        key: 'useAsUsername',
-        type: 'text',
-        label: t('provider.oauth2.google.useAsUsername.label', 'Use as Username'),
-        description: t('provider.oauth2.google.useAsUsername.description', 'Field to use as username (email, name, given_name, family_name)'),
-        defaultValue: 'email',
+        key: "useAsUsername",
+        type: "text",
+        label: t("provider.oauth2.google.useAsUsername.label", "Use as Username"),
+        description: t(
+          "provider.oauth2.google.useAsUsername.description",
+          "Field to use as username (email, name, given_name, family_name)",
+        ),
+        defaultValue: "email",
       },
     ],
   };
@@ -68,38 +74,41 @@ const useGitHubProvider = (): Provider => {
   const { t } = useTranslation();
 
   return {
-    id: 'github',
-    name: 'GitHub',
-    icon: '/Login/github.svg',
-    type: 'oauth2',
-    scope: t('provider.oauth2.github.scope', 'Sign-in authentication'),
-    documentationUrl: 'https://docs.stirlingpdf.com/Configuration/OAuth%20SSO%20Configuration',
+    id: "github",
+    name: "GitHub",
+    icon: "/Login/github.svg",
+    type: "oauth2",
+    scope: t("provider.oauth2.github.scope", "Sign-in authentication"),
+    documentationUrl: "https://docs.stirlingpdf.com/Configuration/OAuth%20SSO%20Configuration",
     fields: [
       {
-        key: 'clientId',
-        type: 'text',
-        label: t('provider.oauth2.github.clientId.label', 'Client ID'),
-        description: t('provider.oauth2.github.clientId.description', 'The OAuth2 client ID from GitHub Developer Settings'),
+        key: "clientId",
+        type: "text",
+        label: t("provider.oauth2.github.clientId.label", "Client ID"),
+        description: t("provider.oauth2.github.clientId.description", "The OAuth2 client ID from GitHub Developer Settings"),
       },
       {
-        key: 'clientSecret',
-        type: 'password',
-        label: t('provider.oauth2.github.clientSecret.label', 'Client Secret'),
-        description: t('provider.oauth2.github.clientSecret.description', 'The OAuth2 client secret from GitHub Developer Settings'),
+        key: "clientSecret",
+        type: "password",
+        label: t("provider.oauth2.github.clientSecret.label", "Client Secret"),
+        description: t(
+          "provider.oauth2.github.clientSecret.description",
+          "The OAuth2 client secret from GitHub Developer Settings",
+        ),
       },
       {
-        key: 'scopes',
-        type: 'text',
-        label: t('provider.oauth2.github.scopes.label', 'Scopes'),
-        description: t('provider.oauth2.github.scopes.description', 'Comma-separated OAuth2 scopes'),
-        defaultValue: 'read:user',
+        key: "scopes",
+        type: "text",
+        label: t("provider.oauth2.github.scopes.label", "Scopes"),
+        description: t("provider.oauth2.github.scopes.description", "Comma-separated OAuth2 scopes"),
+        defaultValue: "read:user",
       },
       {
-        key: 'useAsUsername',
-        type: 'text',
-        label: t('provider.oauth2.github.useAsUsername.label', 'Use as Username'),
-        description: t('provider.oauth2.github.useAsUsername.description', 'Field to use as username (email, login, name)'),
-        defaultValue: 'login',
+        key: "useAsUsername",
+        type: "text",
+        label: t("provider.oauth2.github.useAsUsername.label", "Use as Username"),
+        description: t("provider.oauth2.github.useAsUsername.description", "Field to use as username (email, login, name)"),
+        defaultValue: "login",
       },
     ],
   };
@@ -109,46 +118,52 @@ const useKeycloakProvider = (): Provider => {
   const { t } = useTranslation();
 
   return {
-    id: 'keycloak',
-    name: 'Keycloak',
-    icon: 'key-rounded',
-    type: 'oauth2',
-    scope: t('provider.oauth2.keycloak.scope', 'SSO'),
+    id: "keycloak",
+    name: "Keycloak",
+    icon: "key-rounded",
+    type: "oauth2",
+    scope: t("provider.oauth2.keycloak.scope", "SSO"),
     businessTier: false,
-    documentationUrl: 'https://docs.stirlingpdf.com/Configuration/OAuth%20SSO%20Configuration',
+    documentationUrl: "https://docs.stirlingpdf.com/Configuration/OAuth%20SSO%20Configuration",
     fields: [
       {
-        key: 'issuer',
-        type: 'text',
-        label: t('provider.oauth2.keycloak.issuer.label', 'Issuer URL'),
-        description: t('provider.oauth2.keycloak.issuer.description', "URL of the Keycloak realm's OpenID Connect Discovery endpoint"),
-        placeholder: 'https://keycloak.example.com/realms/myrealm',
+        key: "issuer",
+        type: "text",
+        label: t("provider.oauth2.keycloak.issuer.label", "Issuer URL"),
+        description: t(
+          "provider.oauth2.keycloak.issuer.description",
+          "URL of the Keycloak realm's OpenID Connect Discovery endpoint",
+        ),
+        placeholder: "https://keycloak.example.com/realms/myrealm",
       },
       {
-        key: 'clientId',
-        type: 'text',
-        label: t('provider.oauth2.keycloak.clientId.label', 'Client ID'),
-        description: t('provider.oauth2.keycloak.clientId.description', 'The OAuth2 client ID from Keycloak'),
+        key: "clientId",
+        type: "text",
+        label: t("provider.oauth2.keycloak.clientId.label", "Client ID"),
+        description: t("provider.oauth2.keycloak.clientId.description", "The OAuth2 client ID from Keycloak"),
       },
       {
-        key: 'clientSecret',
-        type: 'password',
-        label: t('provider.oauth2.keycloak.clientSecret.label', 'Client Secret'),
-        description: t('provider.oauth2.keycloak.clientSecret.description', 'The OAuth2 client secret from Keycloak'),
+        key: "clientSecret",
+        type: "password",
+        label: t("provider.oauth2.keycloak.clientSecret.label", "Client Secret"),
+        description: t("provider.oauth2.keycloak.clientSecret.description", "The OAuth2 client secret from Keycloak"),
       },
       {
-        key: 'scopes',
-        type: 'text',
-        label: t('provider.oauth2.keycloak.scopes.label', 'Scopes'),
-        description: t('provider.oauth2.keycloak.scopes.description', 'Comma-separated OAuth2 scopes'),
-        defaultValue: 'openid, profile, email',
+        key: "scopes",
+        type: "text",
+        label: t("provider.oauth2.keycloak.scopes.label", "Scopes"),
+        description: t("provider.oauth2.keycloak.scopes.description", "Comma-separated OAuth2 scopes"),
+        defaultValue: "openid, profile, email",
       },
       {
-        key: 'useAsUsername',
-        type: 'text',
-        label: t('provider.oauth2.keycloak.useAsUsername.label', 'Use as Username'),
-        description: t('provider.oauth2.keycloak.useAsUsername.description', 'Field to use as username (email, name, given_name, family_name, preferred_username)'),
-        defaultValue: 'preferred_username',
+        key: "useAsUsername",
+        type: "text",
+        label: t("provider.oauth2.keycloak.useAsUsername.label", "Use as Username"),
+        description: t(
+          "provider.oauth2.keycloak.useAsUsername.description",
+          "Field to use as username (email, name, given_name, family_name, preferred_username)",
+        ),
+        defaultValue: "preferred_username",
       },
     ],
   };
@@ -158,73 +173,82 @@ const useGenericOAuth2Provider = (): Provider => {
   const { t } = useTranslation();
 
   return {
-    id: 'oauth2-generic',
-    name: t('provider.oauth2.generic.name', 'Generic OAuth2'),
-    icon: 'link-rounded',
-    type: 'oauth2',
-    scope: t('provider.oauth2.generic.scope', 'SSO'),
+    id: "oauth2-generic",
+    name: t("provider.oauth2.generic.name", "Generic OAuth2"),
+    icon: "link-rounded",
+    type: "oauth2",
+    scope: t("provider.oauth2.generic.scope", "SSO"),
     businessTier: false,
-    documentationUrl: 'https://docs.stirlingpdf.com/Configuration/OAuth%20SSO%20Configuration',
+    documentationUrl: "https://docs.stirlingpdf.com/Configuration/OAuth%20SSO%20Configuration",
     fields: [
       {
-        key: 'enabled',
-        type: 'switch',
-        label: t('provider.oauth2.generic.enabled.label', 'Enable Generic OAuth2'),
-        description: t('provider.oauth2.generic.enabled.description', 'Enable authentication using a custom OAuth2 provider'),
+        key: "enabled",
+        type: "switch",
+        label: t("provider.oauth2.generic.enabled.label", "Enable Generic OAuth2"),
+        description: t("provider.oauth2.generic.enabled.description", "Enable authentication using a custom OAuth2 provider"),
         defaultValue: false,
       },
       {
-        key: 'provider',
-        type: 'text',
-        label: t('provider.oauth2.generic.provider.label', 'Provider Name'),
-        description: t('provider.oauth2.generic.provider.description', 'The name of your OAuth2 provider (e.g., Azure AD, Okta)'),
-        placeholder: 'azure-ad',
+        key: "provider",
+        type: "text",
+        label: t("provider.oauth2.generic.provider.label", "Provider Name"),
+        description: t(
+          "provider.oauth2.generic.provider.description",
+          "The name of your OAuth2 provider (e.g., Azure AD, Okta)",
+        ),
+        placeholder: "azure-ad",
       },
       {
-        key: 'issuer',
-        type: 'text',
-        label: t('provider.oauth2.generic.issuer.label', 'Issuer URL'),
-        description: t('provider.oauth2.generic.issuer.description', 'Provider that supports OpenID Connect Discovery (/.well-known/openid-configuration)'),
-        placeholder: 'https://login.microsoftonline.com/{tenant-id}/v2.0',
+        key: "issuer",
+        type: "text",
+        label: t("provider.oauth2.generic.issuer.label", "Issuer URL"),
+        description: t(
+          "provider.oauth2.generic.issuer.description",
+          "Provider that supports OpenID Connect Discovery (/.well-known/openid-configuration)",
+        ),
+        placeholder: "https://login.microsoftonline.com/{tenant-id}/v2.0",
       },
       {
-        key: 'clientId',
-        type: 'text',
-        label: t('provider.oauth2.generic.clientId.label', 'Client ID'),
-        description: t('provider.oauth2.generic.clientId.description', 'The OAuth2 client ID from your provider'),
+        key: "clientId",
+        type: "text",
+        label: t("provider.oauth2.generic.clientId.label", "Client ID"),
+        description: t("provider.oauth2.generic.clientId.description", "The OAuth2 client ID from your provider"),
       },
       {
-        key: 'clientSecret',
-        type: 'password',
-        label: t('provider.oauth2.generic.clientSecret.label', 'Client Secret'),
-        description: t('provider.oauth2.generic.clientSecret.description', 'The OAuth2 client secret from your provider'),
+        key: "clientSecret",
+        type: "password",
+        label: t("provider.oauth2.generic.clientSecret.label", "Client Secret"),
+        description: t("provider.oauth2.generic.clientSecret.description", "The OAuth2 client secret from your provider"),
       },
       {
-        key: 'scopes',
-        type: 'text',
-        label: t('provider.oauth2.generic.scopes.label', 'Scopes'),
-        description: t('provider.oauth2.generic.scopes.description', 'Comma-separated OAuth2 scopes'),
-        defaultValue: 'openid, profile, email',
+        key: "scopes",
+        type: "text",
+        label: t("provider.oauth2.generic.scopes.label", "Scopes"),
+        description: t("provider.oauth2.generic.scopes.description", "Comma-separated OAuth2 scopes"),
+        defaultValue: "openid, profile, email",
       },
       {
-        key: 'useAsUsername',
-        type: 'text',
-        label: t('provider.oauth2.generic.useAsUsername.label', 'Use as Username'),
-        description: t('provider.oauth2.generic.useAsUsername.description', 'Field to use as username'),
-        defaultValue: 'email',
+        key: "useAsUsername",
+        type: "text",
+        label: t("provider.oauth2.generic.useAsUsername.label", "Use as Username"),
+        description: t("provider.oauth2.generic.useAsUsername.description", "Field to use as username"),
+        defaultValue: "email",
       },
       {
-        key: 'autoCreateUser',
-        type: 'switch',
-        label: t('provider.oauth2.generic.autoCreateUser.label', 'Auto Create Users'),
-        description: t('provider.oauth2.generic.autoCreateUser.description', 'Automatically create user accounts on first OAuth2 login'),
+        key: "autoCreateUser",
+        type: "switch",
+        label: t("provider.oauth2.generic.autoCreateUser.label", "Auto Create Users"),
+        description: t(
+          "provider.oauth2.generic.autoCreateUser.description",
+          "Automatically create user accounts on first OAuth2 login",
+        ),
         defaultValue: true,
       },
       {
-        key: 'blockRegistration',
-        type: 'switch',
-        label: t('provider.oauth2.generic.blockRegistration.label', 'Block Registration'),
-        description: t('provider.oauth2.generic.blockRegistration.description', 'Prevent new user registration via OAuth2'),
+        key: "blockRegistration",
+        type: "switch",
+        label: t("provider.oauth2.generic.blockRegistration.label", "Block Registration"),
+        description: t("provider.oauth2.generic.blockRegistration.description", "Prevent new user registration via OAuth2"),
         defaultValue: false,
       },
     ],
@@ -235,53 +259,53 @@ const useSMTPProvider = (): Provider => {
   const { t } = useTranslation();
 
   return {
-    id: 'smtp',
-    name: t('provider.smtp.name', 'SMTP Mail'),
-    icon: 'mail-rounded',
-    type: 'oauth2',
-    scope: t('provider.smtp.scope', 'Email Notifications'),
-    documentationUrl: 'https://docs.stirlingpdf.com/Configuration/System%20and%20Security/#email-configuration',
+    id: "smtp",
+    name: t("provider.smtp.name", "SMTP Mail"),
+    icon: "mail-rounded",
+    type: "oauth2",
+    scope: t("provider.smtp.scope", "Email Notifications"),
+    documentationUrl: "https://docs.stirlingpdf.com/Configuration/System%20and%20Security/#email-configuration",
     fields: [
       {
-        key: 'enabled',
-        type: 'switch',
-        label: t('provider.smtp.enabled.label', 'Enable Mail'),
-        description: t('provider.smtp.enabled.description', 'Enable email notifications and SMTP functionality'),
+        key: "enabled",
+        type: "switch",
+        label: t("provider.smtp.enabled.label", "Enable Mail"),
+        description: t("provider.smtp.enabled.description", "Enable email notifications and SMTP functionality"),
         defaultValue: false,
       },
       {
-        key: 'host',
-        type: 'text',
-        label: t('provider.smtp.host.label', 'SMTP Host'),
-        description: t('provider.smtp.host.description', 'The hostname or IP address of your SMTP server'),
-        placeholder: 'smtp.example.com',
+        key: "host",
+        type: "text",
+        label: t("provider.smtp.host.label", "SMTP Host"),
+        description: t("provider.smtp.host.description", "The hostname or IP address of your SMTP server"),
+        placeholder: "smtp.example.com",
       },
       {
-        key: 'port',
-        type: 'number',
-        label: t('provider.smtp.port.label', 'SMTP Port'),
-        description: t('provider.smtp.port.description', 'The port number for SMTP connection (typically 25, 465, or 587)'),
-        placeholder: '587',
-        defaultValue: '587',
+        key: "port",
+        type: "number",
+        label: t("provider.smtp.port.label", "SMTP Port"),
+        description: t("provider.smtp.port.description", "The port number for SMTP connection (typically 25, 465, or 587)"),
+        placeholder: "587",
+        defaultValue: "587",
       },
       {
-        key: 'username',
-        type: 'text',
-        label: t('provider.smtp.username.label', 'SMTP Username'),
-        description: t('provider.smtp.username.description', 'Username for SMTP authentication'),
+        key: "username",
+        type: "text",
+        label: t("provider.smtp.username.label", "SMTP Username"),
+        description: t("provider.smtp.username.description", "Username for SMTP authentication"),
       },
       {
-        key: 'password',
-        type: 'password',
-        label: t('provider.smtp.password.label', 'SMTP Password'),
-        description: t('provider.smtp.password.description', 'Password for SMTP authentication'),
+        key: "password",
+        type: "password",
+        label: t("provider.smtp.password.label", "SMTP Password"),
+        description: t("provider.smtp.password.description", "Password for SMTP authentication"),
       },
       {
-        key: 'from',
-        type: 'text',
-        label: t('provider.smtp.from.label', 'From Address'),
-        description: t('provider.smtp.from.description', 'The email address to use as the sender'),
-        placeholder: 'noreply@example.com',
+        key: "from",
+        type: "text",
+        label: t("provider.smtp.from.label", "From Address"),
+        description: t("provider.smtp.from.description", "The email address to use as the sender"),
+        placeholder: "noreply@example.com",
       },
     ],
   };
@@ -290,206 +314,191 @@ const useTelegramProvider = (): Provider => {
   const { t } = useTranslation();
 
   return {
-    id: 'telegram',
-    name: t('admin.settings.telegram.title', 'Telegram Bot'),
-    icon: 'send-rounded',
-    type: 'telegram',
+    id: "telegram",
+    name: t("admin.settings.telegram.title", "Telegram Bot"),
+    icon: "send-rounded",
+    type: "telegram",
     scope: t(
-      'admin.settings.telegram.description',
-      'Configure Telegram bot connectivity, access controls, and feedback behavior.'
+      "admin.settings.telegram.description",
+      "Configure Telegram bot connectivity, access controls, and feedback behavior.",
     ),
     fields: [
       {
-        key: 'enabled',
-        type: 'switch',
-        label: t('admin.settings.telegram.enabled.label', 'Enable Telegram Bot'),
+        key: "enabled",
+        type: "switch",
+        label: t("admin.settings.telegram.enabled.label", "Enable Telegram Bot"),
         description: t(
-          'admin.settings.telegram.enabled.description',
-          'Allow users to interact with Stirling PDF through your configured Telegram bot.'
+          "admin.settings.telegram.enabled.description",
+          "Allow users to interact with Stirling PDF through your configured Telegram bot.",
         ),
         defaultValue: false,
       },
       {
-        key: 'botUsername',
-        type: 'text',
-        label: t('admin.settings.telegram.botUsername.label', 'Bot Username'),
-        description: t(
-          'admin.settings.telegram.botUsername.description',
-          'The public username of your Telegram bot.'
-        ),
-        placeholder: 'my_pdf_bot',
+        key: "botUsername",
+        type: "text",
+        label: t("admin.settings.telegram.botUsername.label", "Bot Username"),
+        description: t("admin.settings.telegram.botUsername.description", "The public username of your Telegram bot."),
+        placeholder: "my_pdf_bot",
       },
       {
-        key: 'botToken',
-        type: 'password',
-        label: t('admin.settings.telegram.botToken.label', 'Bot Token'),
+        key: "botToken",
+        type: "password",
+        label: t("admin.settings.telegram.botToken.label", "Bot Token"),
         description: t(
-          'admin.settings.telegram.botToken.description',
-          'API token provided by BotFather for your Telegram bot.'
+          "admin.settings.telegram.botToken.description",
+          "API token provided by BotFather for your Telegram bot.",
         ),
-        placeholder: '123456:ABC-DEF1234ghIkl-zyx57W2v1u123ew11',
+        placeholder: "123456:ABC-DEF1234ghIkl-zyx57W2v1u123ew11",
       },
       {
-        key: 'pipelineInboxFolder',
-        type: 'text',
-        label: t('admin.settings.telegram.pipelineInboxFolder.label', 'Inbox Folder'),
+        key: "pipelineInboxFolder",
+        type: "text",
+        label: t("admin.settings.telegram.pipelineInboxFolder.label", "Inbox Folder"),
         description: t(
-          'admin.settings.telegram.pipelineInboxFolder.description',
-          'Folder under the pipeline directory where incoming Telegram files are stored.'
+          "admin.settings.telegram.pipelineInboxFolder.description",
+          "Folder under the pipeline directory where incoming Telegram files are stored.",
         ),
-        placeholder: 'telegram',
+        placeholder: "telegram",
       },
       {
-        key: 'customFolderSuffix',
-        type: 'switch',
-        label: t('admin.settings.telegram.customFolderSuffix.label', 'Use Custom Folder Suffix'),
+        key: "customFolderSuffix",
+        type: "switch",
+        label: t("admin.settings.telegram.customFolderSuffix.label", "Use Custom Folder Suffix"),
         description: t(
-          'admin.settings.telegram.customFolderSuffix.description',
-          'Append the chat ID to incoming file folders to isolate uploads per chat.'
+          "admin.settings.telegram.customFolderSuffix.description",
+          "Append the chat ID to incoming file folders to isolate uploads per chat.",
         ),
         defaultValue: false,
       },
       {
-        key: 'enableAllowUserIDs',
-        type: 'switch',
-        label: t('admin.settings.telegram.enableAllowUserIDs.label', 'Allow Specific User IDs'),
+        key: "enableAllowUserIDs",
+        type: "switch",
+        label: t("admin.settings.telegram.enableAllowUserIDs.label", "Allow Specific User IDs"),
         description: t(
-          'admin.settings.telegram.enableAllowUserIDs.description',
-          'When enabled, only listed user IDs can use the bot.'
+          "admin.settings.telegram.enableAllowUserIDs.description",
+          "When enabled, only listed user IDs can use the bot.",
         ),
         defaultValue: false,
       },
       {
-        key: 'allowUserIDs',
-        type: 'tags',
-        label: t('admin.settings.telegram.allowUserIDs.label', 'Allowed User IDs'),
+        key: "allowUserIDs",
+        type: "tags",
+        label: t("admin.settings.telegram.allowUserIDs.label", "Allowed User IDs"),
         description: t(
-          'admin.settings.telegram.allowUserIDs.description',
-          'Enter Telegram user IDs allowed to interact with the bot.'
+          "admin.settings.telegram.allowUserIDs.description",
+          "Enter Telegram user IDs allowed to interact with the bot.",
         ),
-        placeholder: t('admin.settings.telegram.allowUserIDs.placeholder', 'Add user ID and press enter'),
+        placeholder: t("admin.settings.telegram.allowUserIDs.placeholder", "Add user ID and press enter"),
         defaultValue: [],
       },
       {
-        key: 'enableAllowChannelIDs',
-        type: 'switch',
-        label: t('admin.settings.telegram.enableAllowChannelIDs.label', 'Allow Specific Channel IDs'),
+        key: "enableAllowChannelIDs",
+        type: "switch",
+        label: t("admin.settings.telegram.enableAllowChannelIDs.label", "Allow Specific Channel IDs"),
         description: t(
-          'admin.settings.telegram.enableAllowChannelIDs.description',
-          'When enabled, only listed channel IDs can use the bot.'
+          "admin.settings.telegram.enableAllowChannelIDs.description",
+          "When enabled, only listed channel IDs can use the bot.",
         ),
         defaultValue: false,
       },
       {
-        key: 'allowChannelIDs',
-        type: 'tags',
-        label: t('admin.settings.telegram.allowChannelIDs.label', 'Allowed Channel IDs'),
+        key: "allowChannelIDs",
+        type: "tags",
+        label: t("admin.settings.telegram.allowChannelIDs.label", "Allowed Channel IDs"),
         description: t(
-          'admin.settings.telegram.allowChannelIDs.description',
-          'Enter Telegram channel IDs allowed to interact with the bot.'
+          "admin.settings.telegram.allowChannelIDs.description",
+          "Enter Telegram channel IDs allowed to interact with the bot.",
         ),
-        placeholder: t('admin.settings.telegram.allowChannelIDs.placeholder', 'Add channel ID and press enter'),
+        placeholder: t("admin.settings.telegram.allowChannelIDs.placeholder", "Add channel ID and press enter"),
         defaultValue: [],
       },
       {
-        key: 'processingTimeoutSeconds',
-        type: 'number',
-        label: t(
-          'admin.settings.telegram.processingTimeoutSeconds.label',
-          'Processing Timeout (seconds)'
-        ),
+        key: "processingTimeoutSeconds",
+        type: "number",
+        label: t("admin.settings.telegram.processingTimeoutSeconds.label", "Processing Timeout (seconds)"),
         description: t(
-          'admin.settings.telegram.processingTimeoutSeconds.description',
-          'Maximum time to wait for a processing job before reporting an error.'
+          "admin.settings.telegram.processingTimeoutSeconds.description",
+          "Maximum time to wait for a processing job before reporting an error.",
         ),
         defaultValue: 180,
       },
       {
-        key: 'pollingIntervalMillis',
-        type: 'number',
-        label: t('admin.settings.telegram.pollingIntervalMillis.label', 'Polling Interval (ms)'),
+        key: "pollingIntervalMillis",
+        type: "number",
+        label: t("admin.settings.telegram.pollingIntervalMillis.label", "Polling Interval (ms)"),
         description: t(
-          'admin.settings.telegram.pollingIntervalMillis.description',
-          'Interval between checks for new Telegram updates.'
+          "admin.settings.telegram.pollingIntervalMillis.description",
+          "Interval between checks for new Telegram updates.",
         ),
         defaultValue: 2000,
       },
       {
-        key: 'feedback.general.enabled',
-        type: 'switch',
-        label: t('admin.settings.telegram.feedback.general.enabled.label', 'Enable Feedback'),
+        key: "feedback.general.enabled",
+        type: "switch",
+        label: t("admin.settings.telegram.feedback.general.enabled.label", "Enable Feedback"),
         description: t(
-          'admin.settings.telegram.feedback.general.enabled.description',
-          'Control whether the bot sends feedback messages at all.'
+          "admin.settings.telegram.feedback.general.enabled.description",
+          "Control whether the bot sends feedback messages at all.",
         ),
         defaultValue: true,
       },
       {
-        key: 'feedback.channel.noValidDocument',
-        type: 'switch',
-        label: t(
-          'admin.settings.telegram.feedback.channel.noValidDocument.label',
-          'Show "No valid document" (Channel)'
-        ),
+        key: "feedback.channel.noValidDocument",
+        type: "switch",
+        label: t("admin.settings.telegram.feedback.channel.noValidDocument.label", 'Show "No valid document" (Channel)'),
         description: t(
-          'admin.settings.telegram.feedback.channel.noValidDocument.description',
-          'Suppress the no valid document response for channel uploads.'
+          "admin.settings.telegram.feedback.channel.noValidDocument.description",
+          "Suppress the no valid document response for channel uploads.",
         ),
         defaultValue: false,
       },
       {
-        key: 'feedback.channel.errorProcessing',
-        type: 'switch',
-        label: t(
-          'admin.settings.telegram.feedback.channel.errorProcessing.label',
-          'Show processing errors (Channel)'
-        ),
+        key: "feedback.channel.errorProcessing",
+        type: "switch",
+        label: t("admin.settings.telegram.feedback.channel.errorProcessing.label", "Show processing errors (Channel)"),
         description: t(
-          'admin.settings.telegram.feedback.channel.errorProcessing.description',
-          'Send processing error messages to channels.'
+          "admin.settings.telegram.feedback.channel.errorProcessing.description",
+          "Send processing error messages to channels.",
         ),
         defaultValue: false,
       },
       {
-        key: 'feedback.channel.errorMessage',
-        type: 'switch',
-        label: t(
-          'admin.settings.telegram.feedback.channel.errorMessage.label',
-          'Show error messages (Channel)'
-        ),
+        key: "feedback.channel.errorMessage",
+        type: "switch",
+        label: t("admin.settings.telegram.feedback.channel.errorMessage.label", "Show error messages (Channel)"),
         description: t(
-          'admin.settings.telegram.feedback.channel.errorMessage.description',
-          'Show detailed error messages for channels.'
+          "admin.settings.telegram.feedback.channel.errorMessage.description",
+          "Show detailed error messages for channels.",
         ),
         defaultValue: false,
       },
       {
-        key: 'feedback.user.noValidDocument',
-        type: 'switch',
-        label: t('admin.settings.telegram.feedback.user.noValidDocument.label', 'Show "No valid document" (User)'),
+        key: "feedback.user.noValidDocument",
+        type: "switch",
+        label: t("admin.settings.telegram.feedback.user.noValidDocument.label", 'Show "No valid document" (User)'),
         description: t(
-          'admin.settings.telegram.feedback.user.noValidDocument.description',
-          'Suppress the no valid document response for user uploads.'
+          "admin.settings.telegram.feedback.user.noValidDocument.description",
+          "Suppress the no valid document response for user uploads.",
         ),
         defaultValue: false,
       },
       {
-        key: 'feedback.user.errorProcessing',
-        type: 'switch',
-        label: t('admin.settings.telegram.feedback.user.errorProcessing.label', 'Show processing errors (User)'),
+        key: "feedback.user.errorProcessing",
+        type: "switch",
+        label: t("admin.settings.telegram.feedback.user.errorProcessing.label", "Show processing errors (User)"),
         description: t(
-          'admin.settings.telegram.feedback.user.errorProcessing.description',
-          'Send processing error messages to users.'
+          "admin.settings.telegram.feedback.user.errorProcessing.description",
+          "Send processing error messages to users.",
         ),
         defaultValue: false,
       },
       {
-        key: 'feedback.user.errorMessage',
-        type: 'switch',
-        label: t('admin.settings.telegram.feedback.user.errorMessage.label', 'Show error messages (User)'),
+        key: "feedback.user.errorMessage",
+        type: "switch",
+        label: t("admin.settings.telegram.feedback.user.errorMessage.label", "Show error messages (User)"),
         description: t(
-          'admin.settings.telegram.feedback.user.errorMessage.description',
-          'Show detailed error messages for users.'
+          "admin.settings.telegram.feedback.user.errorMessage.description",
+          "Show detailed error messages for users.",
         ),
         defaultValue: false,
       },
@@ -501,94 +510,94 @@ const useSAML2Provider = (): Provider => {
   const { t } = useTranslation();
 
   return {
-    id: 'saml2',
-    name: t('provider.saml2.name', 'SAML2'),
-    icon: 'verified-user-rounded',
-    type: 'saml2',
-    scope: t('provider.saml2.scope', 'SSO (SAML)'),
+    id: "saml2",
+    name: t("provider.saml2.name", "SAML2"),
+    icon: "verified-user-rounded",
+    type: "saml2",
+    scope: t("provider.saml2.scope", "SSO (SAML)"),
     businessTier: true,
-    documentationUrl: 'https://docs.stirlingpdf.com/Configuration/SAML%20SSO%20Configuration/',
+    documentationUrl: "https://docs.stirlingpdf.com/Configuration/SAML%20SSO%20Configuration/",
     fields: [
       {
-        key: 'enabled',
-        type: 'switch',
-        label: t('provider.saml2.enabled.label', 'Enable SAML2'),
-        description: t('provider.saml2.enabled.description', 'Enable SAML2 authentication (Enterprise only)'),
+        key: "enabled",
+        type: "switch",
+        label: t("provider.saml2.enabled.label", "Enable SAML2"),
+        description: t("provider.saml2.enabled.description", "Enable SAML2 authentication (Enterprise only)"),
         defaultValue: false,
       },
       {
-        key: 'provider',
-        type: 'text',
-        label: t('provider.saml2.provider.label', 'Provider Name'),
-        description: t('provider.saml2.provider.description', 'The name of your SAML2 provider'),
+        key: "provider",
+        type: "text",
+        label: t("provider.saml2.provider.label", "Provider Name"),
+        description: t("provider.saml2.provider.description", "The name of your SAML2 provider"),
       },
       {
-        key: 'registrationId',
-        type: 'text',
-        label: t('provider.saml2.registrationId.label', 'Registration ID'),
-        description: t('provider.saml2.registrationId.description', 'The name of your Service Provider (SP) app name'),
-        defaultValue: 'stirling',
+        key: "registrationId",
+        type: "text",
+        label: t("provider.saml2.registrationId.label", "Registration ID"),
+        description: t("provider.saml2.registrationId.description", "The name of your Service Provider (SP) app name"),
+        defaultValue: "stirling",
       },
       {
-        key: 'idpMetadataUri',
-        type: 'text',
-        label: t('provider.saml2.idpMetadataUri.label', 'IDP Metadata URI'),
-        description: t('provider.saml2.idpMetadataUri.description', 'The URI for your provider\'s metadata'),
-        placeholder: 'https://dev-XXXXXXXX.okta.com/app/externalKey/sso/saml/metadata',
+        key: "idpMetadataUri",
+        type: "text",
+        label: t("provider.saml2.idpMetadataUri.label", "IDP Metadata URI"),
+        description: t("provider.saml2.idpMetadataUri.description", "The URI for your provider's metadata"),
+        placeholder: "https://dev-XXXXXXXX.okta.com/app/externalKey/sso/saml/metadata",
       },
       {
-        key: 'idpSingleLoginUrl',
-        type: 'text',
-        label: t('provider.saml2.idpSingleLoginUrl.label', 'IDP Single Login URL'),
-        description: t('provider.saml2.idpSingleLoginUrl.description', 'The URL for initiating SSO'),
-        placeholder: 'https://dev-XXXXXXXX.okta.com/app/dev-XXXXXXXX_stirlingpdf_1/externalKey/sso/saml',
+        key: "idpSingleLoginUrl",
+        type: "text",
+        label: t("provider.saml2.idpSingleLoginUrl.label", "IDP Single Login URL"),
+        description: t("provider.saml2.idpSingleLoginUrl.description", "The URL for initiating SSO"),
+        placeholder: "https://dev-XXXXXXXX.okta.com/app/dev-XXXXXXXX_stirlingpdf_1/externalKey/sso/saml",
       },
       {
-        key: 'idpSingleLogoutUrl',
-        type: 'text',
-        label: t('provider.saml2.idpSingleLogoutUrl.label', 'IDP Single Logout URL'),
-        description: t('provider.saml2.idpSingleLogoutUrl.description', 'The URL for initiating SLO'),
-        placeholder: 'https://dev-XXXXXXXX.okta.com/app/dev-XXXXXXXX_stirlingpdf_1/externalKey/slo/saml',
+        key: "idpSingleLogoutUrl",
+        type: "text",
+        label: t("provider.saml2.idpSingleLogoutUrl.label", "IDP Single Logout URL"),
+        description: t("provider.saml2.idpSingleLogoutUrl.description", "The URL for initiating SLO"),
+        placeholder: "https://dev-XXXXXXXX.okta.com/app/dev-XXXXXXXX_stirlingpdf_1/externalKey/slo/saml",
       },
       {
-        key: 'idpIssuer',
-        type: 'text',
-        label: t('provider.saml2.idpIssuer.label', 'IDP Issuer'),
-        description: t('provider.saml2.idpIssuer.description', 'The ID of your provider'),
+        key: "idpIssuer",
+        type: "text",
+        label: t("provider.saml2.idpIssuer.label", "IDP Issuer"),
+        description: t("provider.saml2.idpIssuer.description", "The ID of your provider"),
       },
       {
-        key: 'idpCert',
-        type: 'text',
-        label: t('provider.saml2.idpCert.label', 'IDP Certificate'),
-        description: t('provider.saml2.idpCert.description', 'The certificate path (e.g., classpath:okta.cert)'),
-        placeholder: 'classpath:okta.cert',
+        key: "idpCert",
+        type: "text",
+        label: t("provider.saml2.idpCert.label", "IDP Certificate"),
+        description: t("provider.saml2.idpCert.description", "The certificate path (e.g., classpath:okta.cert)"),
+        placeholder: "classpath:okta.cert",
       },
       {
-        key: 'privateKey',
-        type: 'text',
-        label: t('provider.saml2.privateKey.label', 'Private Key'),
-        description: t('provider.saml2.privateKey.description', 'Your private key path'),
-        placeholder: 'classpath:saml-private-key.key',
+        key: "privateKey",
+        type: "text",
+        label: t("provider.saml2.privateKey.label", "Private Key"),
+        description: t("provider.saml2.privateKey.description", "Your private key path"),
+        placeholder: "classpath:saml-private-key.key",
       },
       {
-        key: 'spCert',
-        type: 'text',
-        label: t('provider.saml2.spCert.label', 'SP Certificate'),
-        description: t('provider.saml2.spCert.description', 'Your signing certificate path'),
-        placeholder: 'classpath:saml-public-cert.crt',
+        key: "spCert",
+        type: "text",
+        label: t("provider.saml2.spCert.label", "SP Certificate"),
+        description: t("provider.saml2.spCert.description", "Your signing certificate path"),
+        placeholder: "classpath:saml-public-cert.crt",
       },
       {
-        key: 'autoCreateUser',
-        type: 'switch',
-        label: t('provider.saml2.autoCreateUser.label', 'Auto Create Users'),
-        description: t('provider.saml2.autoCreateUser.description', 'Automatically create user accounts on first SAML2 login'),
+        key: "autoCreateUser",
+        type: "switch",
+        label: t("provider.saml2.autoCreateUser.label", "Auto Create Users"),
+        description: t("provider.saml2.autoCreateUser.description", "Automatically create user accounts on first SAML2 login"),
         defaultValue: true,
       },
       {
-        key: 'blockRegistration',
-        type: 'switch',
-        label: t('provider.saml2.blockRegistration.label', 'Block Registration'),
-        description: t('provider.saml2.blockRegistration.description', 'Prevent new user registration via SAML2'),
+        key: "blockRegistration",
+        type: "switch",
+        label: t("provider.saml2.blockRegistration.label", "Block Registration"),
+        description: t("provider.saml2.blockRegistration.description", "Prevent new user registration via SAML2"),
         defaultValue: false,
       },
     ],
@@ -599,40 +608,43 @@ const useGoogleDriveProvider = (): Provider => {
   const { t } = useTranslation();
 
   return {
-    id: 'googledrive',
-    name: t('provider.googledrive.name', 'Google Drive'),
-    icon: '/images/google-drive.svg',
-    type: 'googledrive',
-    scope: t('provider.googledrive.scope', 'File Import'),
-    documentationUrl: 'https://docs.stirlingpdf.com/Configuration/Google%20Drive%20File%20Picker/',
+    id: "googledrive",
+    name: t("provider.googledrive.name", "Google Drive"),
+    icon: "/images/google-drive.svg",
+    type: "googledrive",
+    scope: t("provider.googledrive.scope", "File Import"),
+    documentationUrl: "https://docs.stirlingpdf.com/Configuration/Google%20Drive%20File%20Picker/",
     fields: [
       {
-        key: 'enabled',
-        type: 'switch',
-        label: t('provider.googledrive.enabled.label', 'Enable Google Drive File Picker'),
-        description: t('provider.googledrive.enabled.description', 'Allow users to import files directly from Google Drive'),
+        key: "enabled",
+        type: "switch",
+        label: t("provider.googledrive.enabled.label", "Enable Google Drive File Picker"),
+        description: t("provider.googledrive.enabled.description", "Allow users to import files directly from Google Drive"),
         defaultValue: false,
       },
       {
-        key: 'clientId',
-        type: 'text',
-        label: t('provider.googledrive.clientId.label', 'Client ID'),
-        description: t('provider.googledrive.clientId.description', 'Google OAuth 2.0 Client ID from Google Cloud Console'),
-        placeholder: 'xxx.apps.googleusercontent.com',
+        key: "clientId",
+        type: "text",
+        label: t("provider.googledrive.clientId.label", "Client ID"),
+        description: t("provider.googledrive.clientId.description", "Google OAuth 2.0 Client ID from Google Cloud Console"),
+        placeholder: "xxx.apps.googleusercontent.com",
       },
       {
-        key: 'apiKey',
-        type: 'text',
-        label: t('provider.googledrive.apiKey.label', 'API Key'),
-        description: t('provider.googledrive.apiKey.description', 'Google API Key for Google Picker API from Google Cloud Console'),
-        placeholder: 'AIza...',
+        key: "apiKey",
+        type: "text",
+        label: t("provider.googledrive.apiKey.label", "API Key"),
+        description: t(
+          "provider.googledrive.apiKey.description",
+          "Google API Key for Google Picker API from Google Cloud Console",
+        ),
+        placeholder: "AIza...",
       },
       {
-        key: 'appId',
-        type: 'text',
-        label: t('provider.googledrive.appId.label', 'App ID'),
-        description: t('provider.googledrive.appId.description', 'Google Drive App ID from Google Cloud Console'),
-        placeholder: 'xxxxxxxxxxxxx',
+        key: "appId",
+        type: "text",
+        label: t("provider.googledrive.appId.label", "App ID"),
+        description: t("provider.googledrive.appId.description", "Google Drive App ID from Google Cloud Console"),
+        placeholder: "xxxxxxxxxxxxx",
       },
     ],
   };
diff --git a/frontend/src/core/components/shared/config/types.ts b/frontend/src/core/components/shared/config/types.ts
index 9cee0e7caf..6a22ed3112 100644
--- a/frontend/src/core/components/shared/config/types.ts
+++ b/frontend/src/core/components/shared/config/types.ts
@@ -1,38 +1,38 @@
 // Single source of truth for all valid nav keys
 export const VALID_NAV_KEYS = [
-  'preferences',
-  'notifications',
-  'connections',
-  'account',
-  'general',
-  'people',
-  'teams',
-  'security',
-  'identity',
-  'plan',
-  'payments',
-  'requests',
-  'developer',
-  'api-keys',
-  'hotkeys',
-  'adminGeneral',
-  'adminSecurity',
-  'adminConnections',
-  'adminTelegram',
-  'adminPrivacy',
-  'adminDatabase',
-  'adminAdvanced',
-  'adminLegal',
-  'adminPremium',
-  'adminFeatures',
-  'adminPlan',
-  'adminAudit',
-  'adminUsage',
-  'adminEndpoints',
-  'adminStorageSharing',
+  "preferences",
+  "notifications",
+  "connections",
+  "account",
+  "general",
+  "people",
+  "teams",
+  "security",
+  "identity",
+  "plan",
+  "payments",
+  "requests",
+  "developer",
+  "api-keys",
+  "hotkeys",
+  "adminGeneral",
+  "adminSecurity",
+  "adminConnections",
+  "adminTelegram",
+  "adminPrivacy",
+  "adminDatabase",
+  "adminAdvanced",
+  "adminLegal",
+  "adminPremium",
+  "adminFeatures",
+  "adminPlan",
+  "adminAudit",
+  "adminUsage",
+  "adminEndpoints",
+  "adminStorageSharing",
 ] as const;
 
 // Derive the type from the array
-export type NavKey = typeof VALID_NAV_KEYS[number];
+export type NavKey = (typeof VALID_NAV_KEYS)[number];
 
 // some of these are not used yet, but appear in figma designs
diff --git a/frontend/src/core/components/shared/config/useRestartServer.ts b/frontend/src/core/components/shared/config/useRestartServer.ts
index 60291d0411..e6190e2b96 100644
--- a/frontend/src/core/components/shared/config/useRestartServer.ts
+++ b/frontend/src/core/components/shared/config/useRestartServer.ts
@@ -1,7 +1,7 @@
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { alert } from '@app/components/toast';
-import apiClient from '@app/services/apiClient';
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { alert } from "@app/components/toast";
+import apiClient from "@app/services/apiClient";
 
 export function useRestartServer() {
   const { t } = useTranslation();
@@ -18,33 +18,28 @@ export function useRestartServer() {
   const restartServer = async () => {
     setRestartModalOpened(false);
 
-    await apiClient.post('/api/v1/admin/settings/restart', undefined, {
-      suppressErrorToast: true,
-    })
-    .then(() => {
-      alert({
-        alertType: 'neutral',
-        title: t('admin.settings.restarting', 'Restarting Server'),
-        body: t(
-          'admin.settings.restartingMessage',
-          'The server is restarting. Please wait a moment...'
-        ),
+    await apiClient
+      .post("/api/v1/admin/settings/restart", undefined, {
+        suppressErrorToast: true,
+      })
+      .then(() => {
+        alert({
+          alertType: "neutral",
+          title: t("admin.settings.restarting", "Restarting Server"),
+          body: t("admin.settings.restartingMessage", "The server is restarting. Please wait a moment..."),
+        });
+        // Wait a moment then reload the page
+        setTimeout(() => {
+          window.location.reload();
+        }, 3000);
+      })
+      .catch(async (_error) => {
+        alert({
+          alertType: "error",
+          title: t("admin.error", "Error"),
+          body: t("admin.settings.restartError", "Failed to restart server. Please restart manually."),
+        });
       });
-      // Wait a moment then reload the page
-      setTimeout(() => {
-        window.location.reload();
-      }, 3000);
-    })
-    .catch(async (_error) => {
-      alert({
-        alertType: 'error',
-        title: t('admin.error', 'Error'),
-        body: t(
-          'admin.settings.restartError',
-          'Failed to restart server. Please restart manually.'
-        ),
-      });
-    })
   };
 
   return {
diff --git a/frontend/src/core/components/shared/filePreview/DocumentStack.tsx b/frontend/src/core/components/shared/filePreview/DocumentStack.tsx
index 16168f6c9e..9995d22255 100644
--- a/frontend/src/core/components/shared/filePreview/DocumentStack.tsx
+++ b/frontend/src/core/components/shared/filePreview/DocumentStack.tsx
@@ -1,65 +1,64 @@
-import React from 'react';
-import { Box } from '@mantine/core';
+import React from "react";
+import { Box } from "@mantine/core";
 
 export interface DocumentStackProps {
   totalFiles: number;
   children: React.ReactNode;
 }
 
-const DocumentStack: React.FC<DocumentStackProps> = ({
-  totalFiles,
-  children
-}) => {
+const DocumentStack: React.FC<DocumentStackProps> = ({ totalFiles, children }) => {
   const stackDocumentBaseStyle = {
-    position: 'absolute' as const,
-    width: '100%',
-    height: '100%'
+    position: "absolute" as const,
+    width: "100%",
+    height: "100%",
   };
 
   const stackDocumentShadows = {
-    back: '0 2px 8px rgba(0, 0, 0, 0.1)',
-    middle: '0 3px 10px rgba(0, 0, 0, 0.12)'
+    back: "0 2px 8px rgba(0, 0, 0, 0.1)",
+    middle: "0 3px 10px rgba(0, 0, 0, 0.12)",
   };
 
   return (
-    <Box style={{ position: 'relative', width: '100%', height: '100%' }}>
+    <Box style={{ position: "relative", width: "100%", height: "100%" }}>
       {/* Background documents (stack effect) */}
       {totalFiles >= 3 && (
         <Box
           style={{
             ...stackDocumentBaseStyle,
-            backgroundColor: 'var(--mantine-color-gray-3)',
+            backgroundColor: "var(--mantine-color-gray-3)",
             boxShadow: stackDocumentShadows.back,
-            transform: 'translate(0.75rem, 0.75rem) rotate(2deg)',
-            zIndex: 1
+            transform: "translate(0.75rem, 0.75rem) rotate(2deg)",
+            zIndex: 1,
           }}
         />
       )}
-      
+
       {totalFiles >= 2 && (
         <Box
           style={{
             ...stackDocumentBaseStyle,
-            backgroundColor: 'var(--mantine-color-gray-2)',
+            backgroundColor: "var(--mantine-color-gray-2)",
             boxShadow: stackDocumentShadows.middle,
-            transform: 'translate(0.375rem, 0.375rem) rotate(1deg)',
-            zIndex: 2
+            transform: "translate(0.375rem, 0.375rem) rotate(1deg)",
+            zIndex: 2,
           }}
         />
       )}
 
       {/* Main document container */}
-      <Box style={{ 
-        position: 'relative',
-        width: '100%',
-        height: '100%',
-        zIndex: 3,
-        boxShadow: '0 6px 16px rgba(0, 0, 0, 0.2)'
-      }}>
+      <Box
+        style={{
+          position: "relative",
+          width: "100%",
+          height: "100%",
+          zIndex: 3,
+          boxShadow: "0 6px 16px rgba(0, 0, 0, 0.2)",
+        }}
+      >
         {children}
       </Box>
     </Box>
   );
 };
 
-export default DocumentStack;
\ No newline at end of file
+export default DocumentStack;
diff --git a/frontend/src/core/components/shared/filePreview/DocumentThumbnail.tsx b/frontend/src/core/components/shared/filePreview/DocumentThumbnail.tsx
index f672c582e0..913e5967fd 100644
--- a/frontend/src/core/components/shared/filePreview/DocumentThumbnail.tsx
+++ b/frontend/src/core/components/shared/filePreview/DocumentThumbnail.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import { Box, Center, Image } from '@mantine/core';
-import { getFileTypeIcon } from '@app/components/shared/filePreview/getFileTypeIcon';
-import { StirlingFileStub } from '@app/types/fileContext';
-import { PrivateContent } from '@app/components/shared/PrivateContent';
+import React from "react";
+import { Box, Center, Image } from "@mantine/core";
+import { getFileTypeIcon } from "@app/components/shared/filePreview/getFileTypeIcon";
+import { StirlingFileStub } from "@app/types/fileContext";
+import { PrivateContent } from "@app/components/shared/PrivateContent";
 
 export interface DocumentThumbnailProps {
   file: File | StirlingFileStub | null;
@@ -12,25 +12,19 @@ export interface DocumentThumbnailProps {
   children?: React.ReactNode;
 }
 
-const DocumentThumbnail: React.FC<DocumentThumbnailProps> = ({
-  file,
-  thumbnail,
-  style = {},
-  onClick,
-  children
-}) => {
+const DocumentThumbnail: React.FC<DocumentThumbnailProps> = ({ file, thumbnail, style = {}, onClick, children }) => {
   if (!file) return null;
 
   const containerStyle = {
-    position: 'relative' as const,
-    cursor: onClick ? 'pointer' : 'default',
-    transition: 'opacity 0.2s ease',
-    width: '100%',
-    height: '100%',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    ...style
+    position: "relative" as const,
+    cursor: onClick ? "pointer" : "default",
+    transition: "opacity 0.2s ease",
+    width: "100%",
+    height: "100%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    ...style,
   };
 
   if (thumbnail) {
@@ -41,11 +35,11 @@ const DocumentThumbnail: React.FC<DocumentThumbnailProps> = ({
             src={thumbnail}
             alt={`Preview of ${file.name}`}
             fit="contain"
-            style={{ 
-              maxWidth: '100%', 
-              maxHeight: '100%',
-              width: 'auto',
-              height: 'auto'
+            style={{
+              maxWidth: "100%",
+              maxHeight: "100%",
+              width: "auto",
+              height: "auto",
             }}
           />
         </PrivateContent>
@@ -56,10 +50,10 @@ const DocumentThumbnail: React.FC<DocumentThumbnailProps> = ({
 
   return (
     <Box style={containerStyle} onClick={onClick}>
-      <Center style={{ width: '100%', height: '100%', backgroundColor: 'var(--mantine-color-gray-1)', borderRadius: '0.25rem' }}>
-        <PrivateContent>
-          {getFileTypeIcon(file)}
-        </PrivateContent>
+      <Center
+        style={{ width: "100%", height: "100%", backgroundColor: "var(--mantine-color-gray-1)", borderRadius: "0.25rem" }}
+      >
+        <PrivateContent>{getFileTypeIcon(file)}</PrivateContent>
       </Center>
       {children}
     </Box>
diff --git a/frontend/src/core/components/shared/filePreview/HoverOverlay.tsx b/frontend/src/core/components/shared/filePreview/HoverOverlay.tsx
index f098089828..267aec2957 100644
--- a/frontend/src/core/components/shared/filePreview/HoverOverlay.tsx
+++ b/frontend/src/core/components/shared/filePreview/HoverOverlay.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import { Box } from '@mantine/core';
-import VisibilityIcon from '@mui/icons-material/Visibility';
+import React from "react";
+import { Box } from "@mantine/core";
+import VisibilityIcon from "@mui/icons-material/Visibility";
 
 export interface HoverOverlayProps {
   onMouseEnter?: (e: React.MouseEvent) => void;
@@ -8,56 +8,52 @@ export interface HoverOverlayProps {
   children: React.ReactNode;
 }
 
-const HoverOverlay: React.FC<HoverOverlayProps> = ({
-  onMouseEnter,
-  onMouseLeave,
-  children
-}) => {
+const HoverOverlay: React.FC<HoverOverlayProps> = ({ onMouseEnter, onMouseLeave, children }) => {
   const defaultMouseEnter = (e: React.MouseEvent) => {
-    const overlay = e.currentTarget.querySelector('.hover-overlay') as HTMLElement;
-    if (overlay) overlay.style.opacity = '1';
+    const overlay = e.currentTarget.querySelector(".hover-overlay") as HTMLElement;
+    if (overlay) overlay.style.opacity = "1";
   };
 
   const defaultMouseLeave = (e: React.MouseEvent) => {
-    const overlay = e.currentTarget.querySelector('.hover-overlay') as HTMLElement;
-    if (overlay) overlay.style.opacity = '0';
+    const overlay = e.currentTarget.querySelector(".hover-overlay") as HTMLElement;
+    if (overlay) overlay.style.opacity = "0";
   };
 
   return (
     <Box
       style={{
-        position: 'relative',
-        width: '100%',
-        height: '100%'
+        position: "relative",
+        width: "100%",
+        height: "100%",
       }}
       onMouseEnter={onMouseEnter || defaultMouseEnter}
       onMouseLeave={onMouseLeave || defaultMouseLeave}
     >
       {children}
-      
+
       {/* Hover overlay */}
       <Box
         className="hover-overlay"
         style={{
-          position: 'absolute',
+          position: "absolute",
           top: 0,
           left: 0,
           right: 0,
           bottom: 0,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          backgroundColor: 'rgba(0, 0, 0, 0.5)',
-          borderRadius: '0.25rem',
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          backgroundColor: "rgba(0, 0, 0, 0.5)",
+          borderRadius: "0.25rem",
           opacity: 0,
-          transition: 'opacity 0.2s ease',
-          pointerEvents: 'none'
+          transition: "opacity 0.2s ease",
+          pointerEvents: "none",
         }}
       >
-        <VisibilityIcon style={{ color: 'white', fontSize: '1.5rem' }} />
+        <VisibilityIcon style={{ color: "white", fontSize: "1.5rem" }} />
       </Box>
     </Box>
   );
 };
 
-export default HoverOverlay;
\ No newline at end of file
+export default HoverOverlay;
diff --git a/frontend/src/core/components/shared/filePreview/NavigationArrows.tsx b/frontend/src/core/components/shared/filePreview/NavigationArrows.tsx
index e9fc96719e..9e782d82fa 100644
--- a/frontend/src/core/components/shared/filePreview/NavigationArrows.tsx
+++ b/frontend/src/core/components/shared/filePreview/NavigationArrows.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
-import { Box, ActionIcon } from '@mantine/core';
-import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import React from "react";
+import { Box, ActionIcon } from "@mantine/core";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 
 export interface NavigationArrowsProps {
   onPrevious: () => void;
@@ -10,21 +10,16 @@ export interface NavigationArrowsProps {
   children: React.ReactNode;
 }
 
-const NavigationArrows: React.FC<NavigationArrowsProps> = ({
-  onPrevious,
-  onNext,
-  disabled = false,
-  children
-}) => {
+const NavigationArrows: React.FC<NavigationArrowsProps> = ({ onPrevious, onNext, disabled = false, children }) => {
   const navigationArrowStyle = {
-    position: 'absolute' as const,
-    top: '50%',
-    transform: 'translateY(-50%)',
-    zIndex: 10
+    position: "absolute" as const,
+    top: "50%",
+    transform: "translateY(-50%)",
+    zIndex: 10,
   };
 
   return (
-    <Box style={{ position: 'relative', width: '100%', height: '100%' }}>
+    <Box style={{ position: "relative", width: "100%", height: "100%" }}>
       {/* Left Navigation Arrow */}
       <ActionIcon
         variant="light"
@@ -34,17 +29,17 @@ const NavigationArrows: React.FC<NavigationArrowsProps> = ({
         disabled={disabled}
         style={{
           ...navigationArrowStyle,
-          left: '0'
+          left: "0",
         }}
       >
         <ChevronLeftIcon />
       </ActionIcon>
-      
+
       {/* Content */}
-      <Box style={{ width: '100%', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      <Box style={{ width: "100%", height: "100%", display: "flex", alignItems: "center", justifyContent: "center" }}>
         {children}
       </Box>
-      
+
       {/* Right Navigation Arrow */}
       <ActionIcon
         variant="light"
@@ -54,7 +49,7 @@ const NavigationArrows: React.FC<NavigationArrowsProps> = ({
         disabled={disabled}
         style={{
           ...navigationArrowStyle,
-          right: '0'
+          right: "0",
         }}
       >
         <ChevronRightIcon />
@@ -63,4 +58,4 @@ const NavigationArrows: React.FC<NavigationArrowsProps> = ({
   );
 };
 
-export default NavigationArrows;
\ No newline at end of file
+export default NavigationArrows;
diff --git a/frontend/src/core/components/shared/fitText/textFit.ts b/frontend/src/core/components/shared/fitText/textFit.ts
index 7a695ed777..afcaf57b74 100644
--- a/frontend/src/core/components/shared/fitText/textFit.ts
+++ b/frontend/src/core/components/shared/fitText/textFit.ts
@@ -1,4 +1,4 @@
-import { RefObject, useEffect } from 'react';
+import { RefObject, useEffect } from "react";
 
 export type AdjustFontSizeOptions = {
   /** Max font size to start from. Defaults to the element's computed font size. */
@@ -17,14 +17,11 @@ export type AdjustFontSizeOptions = {
  * Imperative util: progressively reduces font-size until content fits within the element
  * (width and optional line count). Returns a cleanup that disconnects observers.
  */
-export function adjustFontSizeToFit(
-  element: HTMLElement,
-  options: AdjustFontSizeOptions = {}
-): () => void {
+export function adjustFontSizeToFit(element: HTMLElement, options: AdjustFontSizeOptions = {}): () => void {
   if (!element) return () => {};
 
   const computed = window.getComputedStyle(element);
-  const baseFontPx = options.maxFontSizePx ?? parseFloat(computed.fontSize || '16');
+  const baseFontPx = options.maxFontSizePx ?? parseFloat(computed.fontSize || "16");
   const minScale = Math.max(0.1, options.minFontScale ?? 0.7);
   const stepScale = Math.max(0.005, options.stepScale ?? 0.05);
   const singleLine = options.singleLine ?? false;
@@ -32,14 +29,14 @@ export function adjustFontSizeToFit(
 
   // Ensure measurement is consistent
   if (singleLine) {
-    element.style.whiteSpace = 'nowrap';
+    element.style.whiteSpace = "nowrap";
   }
   // Never split within words; only allow natural breaks (spaces) or explicit soft breaks
-  element.style.wordBreak = 'keep-all';
-  element.style.overflowWrap = 'normal';
+  element.style.wordBreak = "keep-all";
+  element.style.overflowWrap = "normal";
   // Disable automatic hyphenation to avoid mid-word breaks; use only manual opportunities
-  element.style.setProperty('hyphens', 'manual');
-  element.style.overflow = 'visible';
+  element.style.setProperty("hyphens", "manual");
+  element.style.overflow = "visible";
 
   const minFontPx = baseFontPx * minScale;
   const stepPx = Math.max(0.5, baseFontPx * stepScale);
@@ -50,7 +47,7 @@ export function adjustFontSizeToFit(
 
     // Calculate target height threshold for line limit
     let maxHeight = Number.POSITIVE_INFINITY;
-    if (typeof maxLines === 'number' && maxLines > 0) {
+    if (typeof maxLines === "number" && maxLines > 0) {
       const cs = window.getComputedStyle(element);
       const lineHeight = parseFloat(cs.lineHeight) || baseFontPx * 1.2;
       maxHeight = lineHeight * maxLines + 0.1; // small epsilon
@@ -82,21 +79,24 @@ export function adjustFontSizeToFit(
 
   return () => {
     cancelAnimationFrame(raf);
-    try { ro.disconnect(); } catch { /* Ignore errors */ }
-    try { mo.disconnect(); } catch { /* Ignore errors */ }
+    try {
+      ro.disconnect();
+    } catch {
+      /* Ignore errors */
+    }
+    try {
+      mo.disconnect();
+    } catch {
+      /* Ignore errors */
+    }
   };
 }
 
 /** React hook wrapper for convenience */
-export function useAdjustFontSizeToFit(
-  ref: RefObject<HTMLElement | null>,
-  options: AdjustFontSizeOptions = {}
-) {
+export function useAdjustFontSizeToFit(ref: RefObject<HTMLElement | null>, options: AdjustFontSizeOptions = {}) {
   useEffect(() => {
     if (!ref.current) return;
     const cleanup = adjustFontSizeToFit(ref.current, options);
     return cleanup;
   }, [ref, options.maxFontSizePx, options.minFontScale, options.stepScale, options.maxLines, options.singleLine]);
 }
-
-
diff --git a/frontend/src/core/components/shared/pageEditor/useFileItemDragDrop.ts b/frontend/src/core/components/shared/pageEditor/useFileItemDragDrop.ts
index 2503957de8..a63246edfb 100644
--- a/frontend/src/core/components/shared/pageEditor/useFileItemDragDrop.ts
+++ b/frontend/src/core/components/shared/pageEditor/useFileItemDragDrop.ts
@@ -1,7 +1,7 @@
-import { useRef, useEffect, useState } from 'react';
-import { draggable, dropTargetForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
+import { useRef, useEffect, useState } from "react";
+import { draggable, dropTargetForElements } from "@atlaskit/pragmatic-drag-and-drop/element/adapter";
 
-import { FileId } from '@app/types/file';
+import { FileId } from "@app/types/file";
 
 interface UseFileItemDragDropParams {
   fileId: FileId;
@@ -13,7 +13,7 @@ interface UseFileItemDragDropReturn {
   itemRef: React.RefObject<HTMLDivElement | null>;
   isDragging: boolean;
   isDragOver: boolean;
-  dropPosition: 'above' | 'below';
+  dropPosition: "above" | "below";
   movedRef: React.MutableRefObject<boolean>;
   startRef: React.MutableRefObject<{ x: number; y: number } | null>;
   onPointerDown: (e: React.PointerEvent) => void;
@@ -25,26 +25,30 @@ interface UseFileItemDragDropReturn {
  * Hook to handle drag and drop functionality for file items in a list.
  * Manages drag state, drop zones, and reordering logic using Pragmatic Drag and Drop.
  */
-export const useFileItemDragDrop = ({
-  fileId,
-  index,
-  onReorder,
-}: UseFileItemDragDropParams): UseFileItemDragDropReturn => {
+export const useFileItemDragDrop = ({ fileId, index, onReorder }: UseFileItemDragDropParams): UseFileItemDragDropReturn => {
   const [isDragging, setIsDragging] = useState(false);
   const [isDragOver, setIsDragOver] = useState(false);
-  const [dropPosition, setDropPosition] = useState<'above' | 'below'>('below');
+  const [dropPosition, setDropPosition] = useState<"above" | "below">("below");
   const itemRef = useRef<HTMLDivElement>(null);
 
   // Keep latest values without re-registering DnD
   const indexRef = useRef(index);
   const fileIdRef = useRef(fileId);
-  const dropPositionRef = useRef<'above' | 'below'>('below');
+  const dropPositionRef = useRef<"above" | "below">("below");
   const onReorderRef = useRef(onReorder);
 
-  useEffect(() => { indexRef.current = index; }, [index]);
-  useEffect(() => { fileIdRef.current = fileId; }, [fileId]);
-  useEffect(() => { dropPositionRef.current = dropPosition; }, [dropPosition]);
-  useEffect(() => { onReorderRef.current = onReorder; }, [onReorder]);
+  useEffect(() => {
+    indexRef.current = index;
+  }, [index]);
+  useEffect(() => {
+    fileIdRef.current = fileId;
+  }, [fileId]);
+  useEffect(() => {
+    dropPositionRef.current = dropPosition;
+  }, [dropPosition]);
+  useEffect(() => {
+    onReorderRef.current = onReorder;
+  }, [onReorder]);
 
   // Gesture guard for row click vs drag
   const movedRef = useRef(false);
@@ -73,7 +77,7 @@ export const useFileItemDragDrop = ({
     const dragCleanup = draggable({
       element,
       getInitialData: () => ({
-        type: 'file-item',
+        type: "file-item",
         fileId: fileIdRef.current,
         fromIndex: indexRef.current,
       }),
@@ -85,14 +89,14 @@ export const useFileItemDragDrop = ({
     const dropCleanup = dropTargetForElements({
       element,
       getData: () => ({
-        type: 'file-item',
+        type: "file-item",
         fileId: fileIdRef.current,
         toIndex: indexRef.current,
       }),
       onDragEnter: () => setIsDragOver((p) => (p ? p : true)),
       onDragLeave: () => {
         setIsDragOver((p) => (p ? false : p));
-        setDropPosition('below');
+        setDropPosition("below");
       },
       onDrag: ({ source }) => {
         // Determine drop position based on cursor location
@@ -103,26 +107,26 @@ export const useFileItemDragDrop = ({
         const clientY = (source as any).element?.getBoundingClientRect().top || 0;
         const midpoint = rect.top + rect.height / 2;
 
-        setDropPosition(clientY < midpoint ? 'below' : 'above');
+        setDropPosition(clientY < midpoint ? "below" : "above");
       },
       onDrop: ({ source }) => {
         setIsDragOver(false);
         const dropPos = dropPositionRef.current;
-        setDropPosition('below');
+        setDropPosition("below");
         const sourceData = source.data as any;
-        if (sourceData?.type === 'file-item') {
+        if (sourceData?.type === "file-item") {
           const fromIndex = sourceData.fromIndex as number;
           let toIndex = indexRef.current;
 
           // Adjust toIndex based on drop position
-          if (dropPos === 'below' && fromIndex < toIndex) {
+          if (dropPos === "below" && fromIndex < toIndex) {
             // Dragging down, drop after target - no adjustment needed
-          } else if (dropPos === 'above' && fromIndex > toIndex) {
+          } else if (dropPos === "above" && fromIndex > toIndex) {
             // Dragging up, drop before target - no adjustment needed
-          } else if (dropPos === 'below' && fromIndex > toIndex) {
+          } else if (dropPos === "below" && fromIndex > toIndex) {
             // Dragging up but want below target
             toIndex = toIndex + 1;
-          } else if (dropPos === 'above' && fromIndex < toIndex) {
+          } else if (dropPos === "above" && fromIndex < toIndex) {
             // Dragging down but want above target
             toIndex = toIndex - 1;
           }
@@ -131,12 +135,20 @@ export const useFileItemDragDrop = ({
             onReorderRef.current(fromIndex, toIndex);
           }
         }
-      }
+      },
     });
 
     return () => {
-      try { dragCleanup(); } catch { /* cleanup */ }
-      try { dropCleanup(); } catch { /* cleanup */ }
+      try {
+        dragCleanup();
+      } catch {
+        /* cleanup */
+      }
+      try {
+        dropCleanup();
+      } catch {
+        /* cleanup */
+      }
     };
   }, []); // Stable - no dependencies
 
diff --git a/frontend/src/core/components/shared/quickAccessBar/ActiveToolButton.tsx b/frontend/src/core/components/shared/quickAccessBar/ActiveToolButton.tsx
index 38ed454844..fc97c9143d 100644
--- a/frontend/src/core/components/shared/quickAccessBar/ActiveToolButton.tsx
+++ b/frontend/src/core/components/shared/quickAccessBar/ActiveToolButton.tsx
@@ -12,25 +12,25 @@
  * - Only appears for tools that don't have dedicated nav buttons (read, sign, automate)
  */
 
-import React, { useEffect, useRef, useState } from 'react';
-import { ActionIcon, Divider } from '@mantine/core';
-import ArrowBackRoundedIcon from '@mui/icons-material/ArrowBackRounded';
-import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
-import { useNavigationState, useNavigationActions } from '@app/contexts/NavigationContext';
-import { useSidebarNavigation } from '@app/hooks/useSidebarNavigation';
-import { handleUnlessSpecialClick } from '@app/utils/clickHandlers';
-import FitText from '@app/components/shared/FitText';
-import { Tooltip } from '@app/components/shared/Tooltip';
+import React, { useEffect, useRef, useState } from "react";
+import { ActionIcon, Divider } from "@mantine/core";
+import ArrowBackRoundedIcon from "@mui/icons-material/ArrowBackRounded";
+import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
+import { useNavigationState, useNavigationActions } from "@app/contexts/NavigationContext";
+import { useSidebarNavigation } from "@app/hooks/useSidebarNavigation";
+import { handleUnlessSpecialClick } from "@app/utils/clickHandlers";
+import FitText from "@app/components/shared/FitText";
+import { Tooltip } from "@app/components/shared/Tooltip";
 
 interface ActiveToolButtonProps {
   activeButton: string;
   setActiveButton: (id: string) => void;
-  tooltipPosition?: 'left' | 'right' | 'top' | 'bottom';
+  tooltipPosition?: "left" | "right" | "top" | "bottom";
 }
 
-const NAV_IDS = ['read', 'sign', 'automate'];
+const NAV_IDS = ["read", "sign", "automate"];
 
-const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ setActiveButton, tooltipPosition = 'right' }) => {
+const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ setActiveButton, tooltipPosition = "right" }) => {
   const { selectedTool, selectedToolKey, leftPanelView, handleBackToTools } = useToolWorkflow();
   const { hasUnsavedChanges } = useNavigationState();
   const { actions: navigationActions } = useNavigationActions();
@@ -40,8 +40,7 @@ const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ setActiveButton, to
   // Special case: multiTool should always show even when sidebars are hidden
   const indicatorShouldShow = Boolean(
     selectedToolKey &&
-    ((leftPanelView === 'toolContent' && !NAV_IDS.includes(selectedToolKey)) ||
-     selectedToolKey === 'multiTool')
+    ((leftPanelView === "toolContent" && !NAV_IDS.includes(selectedToolKey)) || selectedToolKey === "multiTool"),
   );
 
   // Local animation and hover state
@@ -54,7 +53,9 @@ const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ setActiveButton, to
   const animTimeoutRef = useRef<number | null>(null);
   const replayRafRef = useRef<number | null>(null);
 
-  const isSwitchingToNewTool = () => { return prevKeyRef.current && prevKeyRef.current !== selectedToolKey; };
+  const isSwitchingToNewTool = () => {
+    return prevKeyRef.current && prevKeyRef.current !== selectedToolKey;
+  };
 
   const clearTimers = () => {
     if (collapseTimeoutRef.current) {
@@ -139,12 +140,15 @@ const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ setActiveButton, to
 
   return (
     <>
-      <div style={{ overflow: 'visible' }} className={`current-tool-slot ${indicatorVisible ? 'visible' : ''} ${replayAnim ? 'replay' : ''}`}>
+      <div
+        style={{ overflow: "visible" }}
+        className={`current-tool-slot ${indicatorVisible ? "visible" : ""} ${replayAnim ? "replay" : ""}`}
+      >
         {indicatorTool && (
           <div className="current-tool-content">
             <div className="flex flex-col items-center gap-1">
               <Tooltip
-                content={isBackHover ? 'Back to all tools' : indicatorTool.name}
+                content={isBackHover ? "Back to all tools" : indicatorTool.name}
                 position={tooltipPosition}
                 arrow
                 maxWidth={140}
@@ -154,7 +158,7 @@ const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ setActiveButton, to
                   href={getHomeNavigation().href}
                   onClick={(e: React.MouseEvent) => {
                     const performNavigation = () => {
-                      setActiveButton('tools');
+                      setActiveButton("tools");
                       handleBackToTools();
                     };
                     if (hasUnsavedChanges) {
@@ -164,26 +168,22 @@ const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ setActiveButton, to
                     }
                     handleUnlessSpecialClick(e, performNavigation);
                   }}
-                  size={'lg'}
+                  size={"lg"}
                   variant="subtle"
                   onMouseEnter={() => setIsBackHover(true)}
                   onMouseLeave={() => setIsBackHover(false)}
-                  aria-label={isBackHover ? 'Back to all tools' : indicatorTool.name}
+                  aria-label={isBackHover ? "Back to all tools" : indicatorTool.name}
                   style={{
-                    backgroundColor: isBackHover ? 'var(--color-gray-300)' : 'var(--icon-tools-bg)',
-                    color: isBackHover ? '#fff' : 'var(--icon-tools-color)',
-                    border: 'none',
-                    borderRadius: '8px',
-                    cursor: 'pointer',
-                    textDecoration: 'none'
+                    backgroundColor: isBackHover ? "var(--color-gray-300)" : "var(--icon-tools-bg)",
+                    color: isBackHover ? "#fff" : "var(--icon-tools-color)",
+                    border: "none",
+                    borderRadius: "8px",
+                    cursor: "pointer",
+                    textDecoration: "none",
                   }}
                 >
                   <span className="iconContainer">
-                    {isBackHover ? (
-                      <ArrowBackRoundedIcon sx={{ fontSize: '1.875rem' }} />
-                    ) : (
-                      indicatorTool.icon
-                    )}
+                    {isBackHover ? <ArrowBackRoundedIcon sx={{ fontSize: "1.875rem" }} /> : indicatorTool.icon}
                   </span>
                 </ActionIcon>
               </Tooltip>
@@ -195,10 +195,7 @@ const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ setActiveButton, to
                 className="button-text active current-tool-label"
               />
             </div>
-            <Divider
-              size="xs"
-              className="current-tool-divider"
-            />
+            <Divider size="xs" className="current-tool-divider" />
           </div>
         )}
       </div>
@@ -207,4 +204,3 @@ const ActiveToolButton: React.FC<ActiveToolButtonProps> = ({ setActiveButton, to
 };
 
 export default ActiveToolButton;
-
diff --git a/frontend/src/core/components/shared/quickAccessBar/QuickAccessBar.css b/frontend/src/core/components/shared/quickAccessBar/QuickAccessBar.css
index 9aea864ed7..a9bf01e9a0 100644
--- a/frontend/src/core/components/shared/quickAccessBar/QuickAccessBar.css
+++ b/frontend/src/core/components/shared/quickAccessBar/QuickAccessBar.css
@@ -23,7 +23,9 @@
   justify-content: center;
   width: 1.5rem;
   height: 1.5rem;
-  transition: width 0.2s, height 0.2s;
+  transition:
+    width 0.2s,
+    height 0.2s;
 }
 
 /* Action icon styles */
@@ -64,8 +66,8 @@
 }
 
 /* RTL adjustments keep the bar on-screen and separated from content */
-:root[dir='rtl'] .quick-access-bar-main,
-:root[dir='rtl'] .quick-access-bar-main.rainbow-mode {
+:root[dir="rtl"] .quick-access-bar-main,
+:root[dir="rtl"] .quick-access-bar-main.rainbow-mode {
   border-right: none;
   border-left: 1px solid var(--border-default);
 }
@@ -75,7 +77,7 @@
   padding: 1rem 0.25rem 0.5rem 0.25rem;
 }
 
-.nav-header { 
+.nav-header {
   display: flex;
   flex-direction: row;
   align-items: center;
@@ -224,7 +226,9 @@
   overflow: hidden;
   max-height: 0;
   opacity: 0;
-  transition: max-height 450ms ease-out, opacity 300ms ease-out;
+  transition:
+    max-height 450ms ease-out,
+    opacity 300ms ease-out;
 }
 
 .current-tool-enter {
@@ -274,7 +278,9 @@
   opacity: 0;
   pointer-events: none;
   transform: translateX(-8px) scale(0.98);
-  transition: opacity 160ms ease, transform 200ms ease;
+  transition:
+    opacity 160ms ease,
+    transform 200ms ease;
 }
 
 .quick-access-popout.is-open {
@@ -709,7 +715,9 @@
   font-size: 0.78rem;
   font-weight: 500;
   color: var(--text-primary);
-  transition: background 120ms, border-color 120ms;
+  transition:
+    background 120ms,
+    border-color 120ms;
   white-space: nowrap;
 }
 
@@ -736,7 +744,9 @@
   font-size: 0.85rem;
   color: var(--text-muted);
   border-bottom: 2px solid transparent;
-  transition: color 150ms, border-color 150ms;
+  transition:
+    color 150ms,
+    border-color 150ms;
 }
 
 .quick-access-popout__tab-button.active {
@@ -809,7 +819,10 @@
   border-radius: 5px;
   color: var(--accent-interactive, var(--mantine-color-blue-6, #228be6));
   cursor: pointer;
-  transition: background 120ms, border-color 120ms, color 120ms;
+  transition:
+    background 120ms,
+    border-color 120ms,
+    color 120ms;
   flex-shrink: 0;
 }
 
@@ -883,7 +896,10 @@
   background: transparent;
   color: var(--text-muted);
   cursor: pointer;
-  transition: background 120ms, border-color 120ms, color 120ms;
+  transition:
+    background 120ms,
+    border-color 120ms,
+    color 120ms;
   white-space: nowrap;
 }
 
diff --git a/frontend/src/core/components/shared/quickAccessBar/QuickAccessBar.ts b/frontend/src/core/components/shared/quickAccessBar/QuickAccessBar.ts
index 84658daefb..437efbc860 100644
--- a/frontend/src/core/components/shared/quickAccessBar/QuickAccessBar.ts
+++ b/frontend/src/core/components/shared/quickAccessBar/QuickAccessBar.ts
@@ -1,7 +1,7 @@
-import { ButtonConfig } from '@app/types/sidebar';
+import { ButtonConfig } from "@app/types/sidebar";
 
 // Border radius constants
-export const ROUND_BORDER_RADIUS = '0.5rem';
+export const ROUND_BORDER_RADIUS = "0.5rem";
 
 /**
  * Check if a navigation button is currently active
@@ -12,16 +12,13 @@ export const isNavButtonActive = (
   isFilesModalOpen: boolean,
   configModalOpen: boolean,
   selectedToolKey?: string | null,
-  leftPanelView?: 'toolPicker' | 'toolContent' | 'hidden'
+  leftPanelView?: "toolPicker" | "toolContent" | "hidden",
 ): boolean => {
-  const isActiveByLocalState = config.type === 'navigation' && activeButton === config.id;
-  const isActiveByContext =
-    config.type === 'navigation' &&
-    leftPanelView === 'toolContent' &&
-    selectedToolKey === config.id;
+  const isActiveByLocalState = config.type === "navigation" && activeButton === config.id;
+  const isActiveByContext = config.type === "navigation" && leftPanelView === "toolContent" && selectedToolKey === config.id;
   const isActiveByModal =
-    (config.type === 'modal' && config.id === 'files' && isFilesModalOpen) ||
-    (config.type === 'modal' && config.id === 'config' && configModalOpen);
+    (config.type === "modal" && config.id === "files" && isFilesModalOpen) ||
+    (config.type === "modal" && config.id === "config" && configModalOpen);
 
   return isActiveByLocalState || isActiveByContext || isActiveByModal;
 };
@@ -35,49 +32,38 @@ export const getNavButtonStyle = (
   isFilesModalOpen: boolean,
   configModalOpen: boolean,
   selectedToolKey?: string | null,
-  leftPanelView?: 'toolPicker' | 'toolContent' | 'hidden'
+  leftPanelView?: "toolPicker" | "toolContent" | "hidden",
 ) => {
-  const isActive = isNavButtonActive(
-    config,
-    activeButton,
-    isFilesModalOpen,
-    configModalOpen,
-    selectedToolKey,
-    leftPanelView
-  );
+  const isActive = isNavButtonActive(config, activeButton, isFilesModalOpen, configModalOpen, selectedToolKey, leftPanelView);
 
   if (isActive) {
     return {
       backgroundColor: `var(--icon-${config.id}-bg)`,
       color: `var(--icon-${config.id}-color)`,
-      border: 'none',
+      border: "none",
       borderRadius: ROUND_BORDER_RADIUS,
     };
   }
 
   // Inactive state for all buttons
   return {
-    backgroundColor: 'var(--icon-inactive-bg)',
-    color: 'var(--icon-inactive-color)',
-    border: 'none',
+    backgroundColor: "var(--icon-inactive-bg)",
+    color: "var(--icon-inactive-color)",
+    border: "none",
     borderRadius: ROUND_BORDER_RADIUS,
   };
 };
 
-
 /**
  * Determine the active nav button based on current tool state and registry
  */
-export const getActiveNavButton = (
-  selectedToolKey: string | null,
-  readerMode: boolean
-): string => {
+export const getActiveNavButton = (selectedToolKey: string | null, readerMode: boolean): string => {
   // Reader mode takes precedence and should highlight the Read nav item
   if (readerMode) {
-    return 'read';
+    return "read";
   }
   // If a tool is selected, highlight it immediately even if the panel view
   // transition to 'toolContent' has not completed yet. This prevents a brief
   // period of no-highlight during rapid navigation.
-    return selectedToolKey ? selectedToolKey : 'tools';
+  return selectedToolKey ? selectedToolKey : "tools";
 };
diff --git a/frontend/src/core/components/shared/quickAccessBar/QuickAccessButton.tsx b/frontend/src/core/components/shared/quickAccessBar/QuickAccessButton.tsx
index 21d63505b0..d798167393 100644
--- a/frontend/src/core/components/shared/quickAccessBar/QuickAccessButton.tsx
+++ b/frontend/src/core/components/shared/quickAccessBar/QuickAccessButton.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import { ActionIcon } from '@mantine/core';
-import FitText from '@app/components/shared/FitText';
+import React from "react";
+import { ActionIcon } from "@mantine/core";
+import FitText from "@app/components/shared/FitText";
 
 interface QuickAccessButtonProps {
   icon: React.ReactNode;
@@ -9,12 +9,12 @@ interface QuickAccessButtonProps {
   onClick?: (e: React.MouseEvent) => void;
   href?: string;
   ariaLabel: string;
-  textClassName?: 'button-text' | 'all-tools-text';
+  textClassName?: "button-text" | "all-tools-text";
   backgroundColor?: string;
   color?: string;
-  size?: 'sm' | 'md' | 'lg';
+  size?: "sm" | "md" | "lg";
   className?: string;
-  component?: 'a' | 'button';
+  component?: "a" | "button";
   dataTestId?: string;
   dataTour?: string;
   disabled?: boolean;
@@ -27,31 +27,32 @@ const QuickAccessButton: React.FC<QuickAccessButtonProps> = ({
   onClick,
   href,
   ariaLabel,
-  textClassName = 'button-text',
+  textClassName = "button-text",
   backgroundColor,
   color,
   size,
   className,
-  component = 'button',
+  component = "button",
   dataTestId,
   dataTour,
   disabled = false,
 }) => {
-  const buttonSize = size || (isActive ? 'lg' : 'md');
-  const bgColor = backgroundColor || (isActive ? 'var(--icon-tools-bg)' : 'var(--icon-inactive-bg)');
-  const textColor = color || (isActive ? 'var(--icon-tools-color)' : 'var(--icon-inactive-color)');
+  const buttonSize = size || (isActive ? "lg" : "md");
+  const bgColor = backgroundColor || (isActive ? "var(--icon-tools-bg)" : "var(--icon-inactive-bg)");
+  const textColor = color || (isActive ? "var(--icon-tools-color)" : "var(--icon-inactive-color)");
 
-  const actionIconProps = component === 'a' && href
-    ? {
-        component: 'a' as const,
-        href,
-        onClick,
-        'aria-label': ariaLabel,
-      }
-    : {
-        onClick,
-        'aria-label': ariaLabel,
-      };
+  const actionIconProps =
+    component === "a" && href
+      ? {
+          component: "a" as const,
+          href,
+          onClick,
+          "aria-label": ariaLabel,
+        }
+      : {
+          onClick,
+          "aria-label": ariaLabel,
+        };
 
   return (
     <div className="flex flex-col items-center gap-1" data-tour={dataTour}>
@@ -63,28 +64,28 @@ const QuickAccessButton: React.FC<QuickAccessButtonProps> = ({
         style={{
           backgroundColor: bgColor,
           color: textColor,
-          border: 'none',
-          borderRadius: '8px',
-          textDecoration: 'none',
+          border: "none",
+          borderRadius: "8px",
+          textDecoration: "none",
           opacity: disabled ? 0.5 : 1,
-          cursor: disabled ? 'not-allowed' : 'pointer',
+          cursor: disabled ? "not-allowed" : "pointer",
         }}
-        className={className || (isActive ? 'activeIconScale' : '')}
+        className={className || (isActive ? "activeIconScale" : "")}
         data-testid={dataTestId}
       >
         <span className="iconContainer">{icon}</span>
       </ActionIcon>
-      <div style={{ width: '100%' }}>
+      <div style={{ width: "100%" }}>
         <FitText
           as="span"
           text={label}
           lines={2}
           minimumFontScale={0.5}
-          className={`${textClassName} ${isActive ? 'active' : 'inactive'}`}
+          className={`${textClassName} ${isActive ? "active" : "inactive"}`}
           style={{
-            fontSize: '0.75rem',
-            textAlign: 'center',
-            display: 'block',
+            fontSize: "0.75rem",
+            textAlign: "center",
+            display: "block",
           }}
         />
       </div>
diff --git a/frontend/src/core/components/shared/quickAccessBar/useToursTooltip.ts b/frontend/src/core/components/shared/quickAccessBar/useToursTooltip.ts
index bed983fdd7..d01cbc818c 100644
--- a/frontend/src/core/components/shared/quickAccessBar/useToursTooltip.ts
+++ b/frontend/src/core/components/shared/quickAccessBar/useToursTooltip.ts
@@ -1,6 +1,10 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { TOUR_STATE_EVENT, type TourStatePayload } from '@app/constants/events';
-import { isOnboardingCompleted, hasShownToursTooltip, markToursTooltipShown } from '@app/components/onboarding/orchestrator/onboardingStorage';
+import { useCallback, useEffect, useRef, useState } from "react";
+import { TOUR_STATE_EVENT, type TourStatePayload } from "@app/constants/events";
+import {
+  isOnboardingCompleted,
+  hasShownToursTooltip,
+  markToursTooltipShown,
+} from "@app/components/onboarding/orchestrator/onboardingStorage";
 
 export interface ToursTooltipState {
   tooltipOpen: boolean | undefined;
@@ -24,7 +28,7 @@ export function useToursTooltip(): ToursTooltipState {
 
   // Auto-show when a tour ends (fires once per user)
   useEffect(() => {
-    if (typeof window === 'undefined') return;
+    if (typeof window === "undefined") return;
 
     const handleTourStateChange = (event: Event) => {
       const { detail } = event as CustomEvent<TourStatePayload>;
@@ -64,7 +68,7 @@ export function useToursTooltip(): ToursTooltipState {
         setShowToursTooltip(true);
       }
     },
-    [hasBeenDismissed, toursMenuOpen, handleDismissToursTooltip]
+    [hasBeenDismissed, toursMenuOpen, handleDismissToursTooltip],
   );
 
   const tooltipOpen = toursMenuOpen ? false : hasBeenDismissed ? undefined : showToursTooltip;
@@ -78,4 +82,3 @@ export function useToursTooltip(): ToursTooltipState {
     handleTooltipOpenChange,
   };
 }
-
diff --git a/frontend/src/core/components/shared/rightRail/RightRail.css b/frontend/src/core/components/shared/rightRail/RightRail.css
index e87cb323d6..f8fd76b35d 100644
--- a/frontend/src/core/components/shared/rightRail/RightRail.css
+++ b/frontend/src/core/components/shared/rightRail/RightRail.css
@@ -97,7 +97,9 @@
   overflow: hidden;
   max-height: 0;
   opacity: 0;
-  transition: max-height 450ms ease-out, opacity 300ms ease-out;
+  transition:
+    max-height 450ms ease-out,
+    opacity 300ms ease-out;
 }
 
 .right-rail-enter {
diff --git a/frontend/src/core/components/shared/rightRail/ViewerAnnotationControls.tsx b/frontend/src/core/components/shared/rightRail/ViewerAnnotationControls.tsx
index 23b7dfa821..d7db93fe16 100644
--- a/frontend/src/core/components/shared/rightRail/ViewerAnnotationControls.tsx
+++ b/frontend/src/core/components/shared/rightRail/ViewerAnnotationControls.tsx
@@ -1,19 +1,19 @@
-import React, { useCallback } from 'react';
-import { ActionIcon } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { Tooltip } from '@app/components/shared/Tooltip';
-import { ViewerContext } from '@app/contexts/ViewerContext';
-import { useSignature } from '@app/contexts/SignatureContext';
-import { useFileState, useFileContext } from '@app/contexts/FileContext';
-import { createStirlingFilesAndStubs } from '@app/services/fileStubHelpers';
-import { useNavigationState, useNavigationGuard, useNavigationActions } from '@app/contexts/NavigationContext';
-import { useSidebarContext } from '@app/contexts/SidebarContext';
-import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
-import { useRightRailTooltipSide } from '@app/hooks/useRightRailTooltipSide';
-import { useRedactionMode, useRedaction } from '@app/contexts/RedactionContext';
-import { defaultParameters, RedactParameters } from '@app/hooks/tools/redact/useRedactParameters';
-import { RedactionMode } from '@embedpdf/plugin-redaction';
+import React, { useCallback } from "react";
+import { ActionIcon } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { Tooltip } from "@app/components/shared/Tooltip";
+import { ViewerContext } from "@app/contexts/ViewerContext";
+import { useSignature } from "@app/contexts/SignatureContext";
+import { useFileState, useFileContext } from "@app/contexts/FileContext";
+import { createStirlingFilesAndStubs } from "@app/services/fileStubHelpers";
+import { useNavigationState, useNavigationGuard, useNavigationActions } from "@app/contexts/NavigationContext";
+import { useSidebarContext } from "@app/contexts/SidebarContext";
+import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
+import { useRightRailTooltipSide } from "@app/hooks/useRightRailTooltipSide";
+import { useRedactionMode, useRedaction } from "@app/contexts/RedactionContext";
+import { defaultParameters, RedactParameters } from "@app/hooks/tools/redact/useRedactParameters";
+import { RedactionMode } from "@embedpdf/plugin-redaction";
 
 interface ViewerAnnotationControlsProps {
   currentView: string;
@@ -40,49 +40,50 @@ export default function ViewerAnnotationControls({ currentView, disabled = false
   // Check if we're in sign mode or redaction mode
   const { selectedTool } = useNavigationState();
   const { actions: navActions } = useNavigationActions();
-  const isSignMode = selectedTool === 'sign';
-  const isRedactMode = selectedTool === 'redact';
+  const isSignMode = selectedTool === "sign";
+  const isRedactMode = selectedTool === "redact";
 
   // Get redaction pending state and navigation guard
   const { isRedacting: _isRedacting } = useRedactionMode();
   const { requestNavigation, setHasUnsavedChanges, hasUnsavedChanges } = useNavigationGuard();
-  const { setRedactionMode, activateRedact, setRedactionConfig, setRedactionsApplied, redactionApiRef, setActiveType } = useRedaction();
-
+  const { setRedactionMode, activateRedact, setRedactionConfig, setRedactionsApplied, redactionApiRef, setActiveType } =
+    useRedaction();
 
   // Check if we're in any annotation tool that should disable the toggle
-  const isInAnnotationTool = selectedTool === 'annotate' || selectedTool === 'sign' || selectedTool === 'addImage' || selectedTool === 'addText';
+  const isInAnnotationTool =
+    selectedTool === "annotate" || selectedTool === "sign" || selectedTool === "addImage" || selectedTool === "addText";
 
   // Check if we're on annotate tool to highlight the button
-  const isAnnotateActive = selectedTool === 'annotate';
+  const isAnnotateActive = selectedTool === "annotate";
   const annotationsHidden = viewerContext ? !viewerContext.isAnnotationsVisible : false;
 
   // Persist annotations to file if there are unsaved changes
   const saveAnnotationsIfNeeded = async () => {
-    if (!viewerContext?.exportActions?.saveAsCopy || currentView !== 'viewer' || !historyApiRef?.current?.canUndo()) return;
+    if (!viewerContext?.exportActions?.saveAsCopy || currentView !== "viewer" || !historyApiRef?.current?.canUndo()) return;
     if (activeFiles.length === 0 || state.files.ids.length === 0) return;
 
     try {
       const arrayBuffer = await viewerContext.exportActions.saveAsCopy();
       if (!arrayBuffer) return;
 
-      const file = new File([new Blob([arrayBuffer])], activeFiles[0].name, { type: 'application/pdf' });
+      const file = new File([new Blob([arrayBuffer])], activeFiles[0].name, { type: "application/pdf" });
       const parentStub = selectors.getStirlingFileStub(state.files.ids[0]);
       if (!parentStub) return;
 
-      const { stirlingFiles, stubs } = await createStirlingFilesAndStubs([file], parentStub, 'redact');
+      const { stirlingFiles, stubs } = await createStirlingFilesAndStubs([file], parentStub, "redact");
       await fileActions.consumeFiles([state.files.ids[0]], stirlingFiles, stubs);
 
       // Clear unsaved changes flags after successful save
       setHasUnsavedChanges(false);
       setRedactionsApplied(false);
     } catch (error) {
-      console.error('Error auto-saving annotations before redaction:', error);
+      console.error("Error auto-saving annotations before redaction:", error);
     }
   };
 
   const exitRedactionMode = useCallback(() => {
-    navActions.setToolAndWorkbench(null, 'viewer');
-    setLeftPanelView('toolPicker');
+    navActions.setToolAndWorkbench(null, "viewer");
+    setLeftPanelView("toolPicker");
     setRedactionMode(false);
     setActiveType(null);
   }, [navActions, setLeftPanelView, setRedactionMode, setActiveType]);
@@ -102,16 +103,16 @@ export default function ViewerAnnotationControls({ currentView, disabled = false
         // Set redaction config to manual mode when opening from viewer
         const manualConfig: RedactParameters = {
           ...defaultParameters,
-          mode: 'manual',
+          mode: "manual",
         };
         setRedactionConfig(manualConfig);
 
         // Set tool and keep viewer workbench
-        navActions.setToolAndWorkbench('redact', 'viewer');
+        navActions.setToolAndWorkbench("redact", "viewer");
 
         // Ensure sidebars are visible and open tool content
         setSidebarsVisible(true);
-        setLeftPanelView('toolContent');
+        setLeftPanelView("toolContent");
 
         setRedactionMode(true);
         // Activate unified redact mode after a short delay
@@ -149,33 +150,41 @@ export default function ViewerAnnotationControls({ currentView, disabled = false
   return (
     <>
       {/* Redaction Mode Toggle */}
-      <Tooltip content={isRedactMode ? t('rightRail.exitRedaction', 'Exit Redaction Mode') : t('rightRail.redact', 'Redact')} position={tooltipPosition} offset={tooltipOffset} arrow portalTarget={document.body}>
+      <Tooltip
+        content={isRedactMode ? t("rightRail.exitRedaction", "Exit Redaction Mode") : t("rightRail.redact", "Redact")}
+        position={tooltipPosition}
+        offset={tooltipOffset}
+        arrow
+        portalTarget={document.body}
+      >
         <ActionIcon
-          variant={isRedactMode ? 'filled' : 'subtle'}
-          color={isRedactMode ? 'blue' : undefined}
+          variant={isRedactMode ? "filled" : "subtle"}
+          color={isRedactMode ? "blue" : undefined}
           radius="md"
           className="right-rail-icon"
           onClick={handleRedactionToggle}
-          disabled={disabled || currentView !== 'viewer'}
+          disabled={disabled || currentView !== "viewer"}
         >
-          <LocalIcon
-            icon="scan-delete-rounded"
-            width="1.5rem"
-            height="1.5rem"
-          />
+          <LocalIcon icon="scan-delete-rounded" width="1.5rem" height="1.5rem" />
         </ActionIcon>
       </Tooltip>
 
       {/* Annotation Visibility Toggle */}
-      <Tooltip content={t('rightRail.toggleAnnotations', 'Toggle Annotations Visibility')} position={tooltipPosition} offset={tooltipOffset} arrow portalTarget={document.body}>
+      <Tooltip
+        content={t("rightRail.toggleAnnotations", "Toggle Annotations Visibility")}
+        position={tooltipPosition}
+        offset={tooltipOffset}
+        arrow
+        portalTarget={document.body}
+      >
         <ActionIcon
           variant={annotationsHidden ? "filled" : "subtle"}
           color={annotationsHidden ? "blue" : undefined}
           radius="md"
           className="right-rail-icon"
           onClick={handleToggleAnnotationsVisibility}
-          disabled={disabled || currentView !== 'viewer' || (isInAnnotationTool && !isAnnotateActive) || isPlacementMode}
-          data-active={annotationsHidden ? 'true' : undefined}
+          disabled={disabled || currentView !== "viewer" || (isInAnnotationTool && !isAnnotateActive) || isPlacementMode}
+          data-active={annotationsHidden ? "true" : undefined}
           aria-pressed={annotationsHidden}
         >
           <LocalIcon
@@ -185,7 +194,6 @@ export default function ViewerAnnotationControls({ currentView, disabled = false
           />
         </ActionIcon>
       </Tooltip>
-
     </>
   );
 }
diff --git a/frontend/src/core/components/shared/signing/ActiveSessionsPanel.tsx b/frontend/src/core/components/shared/signing/ActiveSessionsPanel.tsx
index d3294f4b7a..a0c042eaf5 100644
--- a/frontend/src/core/components/shared/signing/ActiveSessionsPanel.tsx
+++ b/frontend/src/core/components/shared/signing/ActiveSessionsPanel.tsx
@@ -1,8 +1,8 @@
-import { useTranslation } from 'react-i18next';
-import { Loader, Center, Text, Badge } from '@mantine/core';
+import { useTranslation } from "react-i18next";
+import { Loader, Center, Text, Badge } from "@mantine/core";
 
 interface SessionItem {
-  itemType: 'signRequest' | 'mySession';
+  itemType: "signRequest" | "mySession";
   sessionId: string;
   documentName: string;
   createdAt: string;
@@ -21,61 +21,57 @@ interface ActiveSessionsPanelProps {
   onSessionClick: (session: SessionItem) => void;
 }
 
-const ActiveSessionsPanel = ({
-  sessions,
-  loading,
-  onSessionClick,
-}: ActiveSessionsPanelProps) => {
+const ActiveSessionsPanel = ({ sessions, loading, onSessionClick }: ActiveSessionsPanelProps) => {
   const { t } = useTranslation();
 
   const getStatusColor = (status?: string, itemType?: string, item?: SessionItem): string => {
-    if (itemType === 'mySession' && item) {
+    if (itemType === "mySession" && item) {
       const signedCount = item.signedCount ?? 0;
       const totalCount = item.participantCount ?? 0;
 
       if (signedCount === totalCount && totalCount > 0) {
-        return 'green';  // All signed
+        return "green"; // All signed
       }
       if (signedCount > 0) {
-        return 'yellow'; // Partial
+        return "yellow"; // Partial
       }
-      return 'blue';     // None signed
+      return "blue"; // None signed
     }
     switch (status) {
-      case 'VIEWED':
-        return 'blue';
-      case 'NOTIFIED':
-      case 'PENDING':
-        return 'orange';
+      case "VIEWED":
+        return "blue";
+      case "NOTIFIED":
+      case "PENDING":
+        return "orange";
       default:
-        return 'gray';
+        return "gray";
     }
   };
 
   const getStatusLabel = (item: SessionItem): string => {
-    if (item.itemType === 'mySession') {
+    if (item.itemType === "mySession") {
       const signedCount = item.signedCount ?? 0;
       const totalCount = item.participantCount ?? 0;
       if (signedCount === totalCount && totalCount > 0) {
-        return t('certSign.readyToFinalize', 'Ready to finalize');
+        return t("certSign.readyToFinalize", "Ready to finalize");
       }
       // Show progress for all cases (including 0/X)
       if (totalCount > 0) {
-        return t('certSign.signatureProgress', '{{signedCount}}/{{totalCount}} signatures', { signedCount, totalCount });
+        return t("certSign.signatureProgress", "{{signedCount}}/{{totalCount}} signatures", { signedCount, totalCount });
       }
-      return t('certSign.awaitingSignatures', 'Awaiting signatures');
+      return t("certSign.awaitingSignatures", "Awaiting signatures");
     }
 
     // For sign requests
     switch (item.myStatus) {
-      case 'VIEWED':
-        return t('certSign.viewed', 'Viewed');
-      case 'NOTIFIED':
-        return t('certSign.notified', 'Pending');
-      case 'PENDING':
-        return t('certSign.pending', 'Pending');
+      case "VIEWED":
+        return t("certSign.viewed", "Viewed");
+      case "NOTIFIED":
+        return t("certSign.notified", "Pending");
+      case "PENDING":
+        return t("certSign.pending", "Pending");
       default:
-        return item.myStatus || 'PENDING';
+        return item.myStatus || "PENDING";
     }
   };
 
@@ -90,7 +86,7 @@ const ActiveSessionsPanel = ({
           {sessions.length === 0 ? (
             <div className="quick-access-popout__section">
               <Text size="sm" c="dimmed" ta="center" py="xl">
-                {t('quickAccess.noActiveSessions', 'No pending sign requests or active sessions')}
+                {t("quickAccess.noActiveSessions", "No pending sign requests or active sessions")}
               </Text>
             </div>
           ) : (
@@ -104,7 +100,7 @@ const ActiveSessionsPanel = ({
                   <div className="quick-access-popout__sign-request-info">
                     <div className="quick-access-popout__row-title">{session.documentName}</div>
                     <div className="quick-access-popout__row-subtitle">
-                      {session.itemType === 'signRequest' ? (
+                      {session.itemType === "signRequest" ? (
                         <>
                           From: {session.ownerUsername}
                           {session.dueDate && ` • Due: ${new Date(session.dueDate).toLocaleDateString()}`}
@@ -128,7 +124,6 @@ const ActiveSessionsPanel = ({
               ))}
             </>
           )}
-
         </>
       )}
     </div>
diff --git a/frontend/src/core/components/shared/signing/CompletedSessionsPanel.tsx b/frontend/src/core/components/shared/signing/CompletedSessionsPanel.tsx
index 763a8c2be9..d75c3a350e 100644
--- a/frontend/src/core/components/shared/signing/CompletedSessionsPanel.tsx
+++ b/frontend/src/core/components/shared/signing/CompletedSessionsPanel.tsx
@@ -1,8 +1,8 @@
-import { useTranslation } from 'react-i18next';
-import { Loader, Center, Text, Badge } from '@mantine/core';
+import { useTranslation } from "react-i18next";
+import { Loader, Center, Text, Badge } from "@mantine/core";
 
 interface SessionItem {
-  itemType: 'signRequest' | 'mySession';
+  itemType: "signRequest" | "mySession";
   sessionId: string;
   documentName: string;
   createdAt: string;
@@ -21,38 +21,34 @@ interface CompletedSessionsPanelProps {
   onSessionClick: (session: SessionItem) => void;
 }
 
-const CompletedSessionsPanel = ({
-  sessions,
-  loading,
-  onSessionClick,
-}: CompletedSessionsPanelProps) => {
+const CompletedSessionsPanel = ({ sessions, loading, onSessionClick }: CompletedSessionsPanelProps) => {
   const { t } = useTranslation();
 
   const getStatusColor = (status?: string, itemType?: string): string => {
-    if (itemType === 'mySession') return 'green';
+    if (itemType === "mySession") return "green";
     switch (status) {
-      case 'SIGNED':
-        return 'green';
-      case 'DECLINED':
-        return 'red';
+      case "SIGNED":
+        return "green";
+      case "DECLINED":
+        return "red";
       default:
-        return 'gray';
+        return "gray";
     }
   };
 
   const getStatusLabel = (item: SessionItem): string => {
-    if (item.itemType === 'mySession') {
-      return t('certSign.finalized', 'Finalized');
+    if (item.itemType === "mySession") {
+      return t("certSign.finalized", "Finalized");
     }
 
     // For sign requests
     switch (item.myStatus) {
-      case 'SIGNED':
-        return t('certSign.signed', 'Signed');
-      case 'DECLINED':
-        return t('certSign.declined', 'Declined');
+      case "SIGNED":
+        return t("certSign.signed", "Signed");
+      case "DECLINED":
+        return t("certSign.declined", "Declined");
       default:
-        return item.myStatus || 'COMPLETED';
+        return item.myStatus || "COMPLETED";
     }
   };
 
@@ -65,7 +61,7 @@ const CompletedSessionsPanel = ({
       ) : sessions.length === 0 ? (
         <div className="quick-access-popout__section">
           <Text size="sm" c="dimmed" ta="center" py="xl">
-            {t('quickAccess.noCompletedSessions', 'No completed sessions')}
+            {t("quickAccess.noCompletedSessions", "No completed sessions")}
           </Text>
         </div>
       ) : (
@@ -79,7 +75,7 @@ const CompletedSessionsPanel = ({
               <div className="quick-access-popout__sign-request-info">
                 <div className="quick-access-popout__row-title">{session.documentName}</div>
                 <div className="quick-access-popout__row-subtitle">
-                  {session.itemType === 'signRequest' ? (
+                  {session.itemType === "signRequest" ? (
                     <>
                       From: {session.ownerUsername}
                       {session.dueDate && ` • Due: ${new Date(session.dueDate).toLocaleDateString()}`}
diff --git a/frontend/src/core/components/shared/signing/CreateSessionFlow.tsx b/frontend/src/core/components/shared/signing/CreateSessionFlow.tsx
index 6643e1d10c..cd93e82d3f 100644
--- a/frontend/src/core/components/shared/signing/CreateSessionFlow.tsx
+++ b/frontend/src/core/components/shared/signing/CreateSessionFlow.tsx
@@ -1,15 +1,15 @@
-import { useState } from 'react';
-import { Stack, Text, Group, Badge } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import CheckIcon from '@mui/icons-material/Check';
-import { SelectDocumentStep } from '@app/components/shared/signing/steps/SelectDocumentStep';
-import { SelectParticipantsStep } from '@app/components/shared/signing/steps/SelectParticipantsStep';
-import { ConfigureSignatureDefaultsStep } from '@app/components/shared/signing/steps/ConfigureSignatureDefaultsStep';
-import { ReviewSessionStep } from '@app/components/shared/signing/steps/ReviewSessionStep';
-import { useGroupSigningTips } from '@app/components/tooltips/useGroupSigningTips';
-import { useSignatureSettingsTips } from '@app/components/tooltips/useSignatureSettingsTips';
-import type { SignatureSettings } from '@app/components/tools/certSign/SignatureSettingsInput';
-import type { FileState } from '@app/types/file';
+import { useState } from "react";
+import { Stack, Text, Group, Badge } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import CheckIcon from "@mui/icons-material/Check";
+import { SelectDocumentStep } from "@app/components/shared/signing/steps/SelectDocumentStep";
+import { SelectParticipantsStep } from "@app/components/shared/signing/steps/SelectParticipantsStep";
+import { ConfigureSignatureDefaultsStep } from "@app/components/shared/signing/steps/ConfigureSignatureDefaultsStep";
+import { ReviewSessionStep } from "@app/components/shared/signing/steps/ReviewSessionStep";
+import { useGroupSigningTips } from "@app/components/tooltips/useGroupSigningTips";
+import { useSignatureSettingsTips } from "@app/components/tooltips/useSignatureSettingsTips";
+import type { SignatureSettings } from "@app/components/tools/certSign/SignatureSettingsInput";
+import type { FileState } from "@app/types/file";
 
 interface CreateSessionFlowProps {
   selectedFiles: FileState[];
@@ -29,55 +29,47 @@ interface StepWrapperProps {
   children: React.ReactNode;
 }
 
-const StepWrapper: React.FC<StepWrapperProps> = ({
-  number,
-  title,
-  isActive,
-  isCompleted,
-  children,
-}) => {
+const StepWrapper: React.FC<StepWrapperProps> = ({ number, title, isActive, isCompleted, children }) => {
   const { t } = useTranslation();
 
   return (
     <div
       style={{
-        padding: '16px',
-        border: isActive
-          ? '2px solid var(--mantine-color-blue-6)'
-          : '1px solid var(--mantine-color-default-border)',
-        borderRadius: 'var(--mantine-radius-default)',
+        padding: "16px",
+        border: isActive ? "2px solid var(--mantine-color-blue-6)" : "1px solid var(--mantine-color-default-border)",
+        borderRadius: "var(--mantine-radius-default)",
         backgroundColor: isActive
-          ? 'var(--mantine-color-blue-0)'
+          ? "var(--mantine-color-blue-0)"
           : isCompleted
-          ? 'var(--mantine-color-gray-0)'
-          : 'transparent',
+            ? "var(--mantine-color-gray-0)"
+            : "transparent",
         opacity: !isActive && !isCompleted ? 0.6 : 1,
       }}
     >
-      <Group gap="sm" mb={isActive ? 'md' : 0}>
+      <Group gap="sm" mb={isActive ? "md" : 0}>
         <div
           style={{
-            width: '32px',
-            height: '32px',
-            borderRadius: '50%',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
+            width: "32px",
+            height: "32px",
+            borderRadius: "50%",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
             backgroundColor: isCompleted
-              ? 'var(--mantine-color-green-6)'
+              ? "var(--mantine-color-green-6)"
               : isActive
-              ? 'var(--mantine-color-blue-6)'
-              : 'var(--mantine-color-gray-4)',
-            color: 'white',
+                ? "var(--mantine-color-blue-6)"
+                : "var(--mantine-color-gray-4)",
+            color: "white",
             fontWeight: 600,
-            fontSize: '14px',
+            fontSize: "14px",
           }}
         >
           {isCompleted ? <CheckIcon sx={{ fontSize: 18 }} /> : number}
         </div>
         <div style={{ flex: 1 }}>
           <Text size="sm" fw={600}>
-            {t('groupSigning.steps.stepLabel', 'Step {{number}}', { number })}
+            {t("groupSigning.steps.stepLabel", "Step {{number}}", { number })}
           </Text>
           <Text size="sm" c="dimmed">
             {title}
@@ -85,12 +77,12 @@ const StepWrapper: React.FC<StepWrapperProps> = ({
         </div>
         {isActive && (
           <Badge color="blue" variant="light">
-            {t('groupSigning.steps.current', 'Current')}
+            {t("groupSigning.steps.current", "Current")}
           </Badge>
         )}
         {isCompleted && (
           <Badge color="green" variant="light">
-            {t('groupSigning.steps.completed', 'Completed')}
+            {t("groupSigning.steps.completed", "Completed")}
           </Badge>
         )}
       </Group>
@@ -116,8 +108,8 @@ export const CreateSessionFlow: React.FC<CreateSessionFlowProps> = ({
   const [signatureSettings, setSignatureSettings] = useState<SignatureSettings>({
     showSignature: false,
     pageNumber: 1,
-    reason: '',
-    location: '',
+    reason: "",
+    location: "",
     showLogo: false,
     includeSummaryPage: false,
   });
@@ -131,22 +123,22 @@ export const CreateSessionFlow: React.FC<CreateSessionFlowProps> = ({
   const steps = [
     {
       number: 1,
-      title: t('groupSigning.steps.selectDocument.title', 'Select Document'),
+      title: t("groupSigning.steps.selectDocument.title", "Select Document"),
       tooltip: groupSigningTips,
     },
     {
       number: 2,
-      title: t('groupSigning.steps.selectParticipants.title', 'Choose Participants'),
+      title: t("groupSigning.steps.selectParticipants.title", "Choose Participants"),
       tooltip: null,
     },
     {
       number: 3,
-      title: t('groupSigning.steps.configureDefaults.title', 'Configure Signature Settings'),
+      title: t("groupSigning.steps.configureDefaults.title", "Configure Signature Settings"),
       tooltip: signatureSettingsTips,
     },
     {
       number: 4,
-      title: t('groupSigning.steps.review.titleShort', 'Review & Send'),
+      title: t("groupSigning.steps.review.titleShort", "Review & Send"),
       tooltip: null,
     },
   ];
@@ -155,23 +147,15 @@ export const CreateSessionFlow: React.FC<CreateSessionFlowProps> = ({
     <div className="quick-access-popout__panel">
       <Stack gap="md">
         {/* Step 1: Select Document */}
-        <StepWrapper
-          number={1}
-          title={steps[0].title}
-          isActive={currentStep === 1}
-          isCompleted={currentStep > 1}
-        >
+        <StepWrapper number={1} title={steps[0].title} isActive={currentStep === 1} isCompleted={currentStep > 1}>
           {hasValidFile ? (
-            <SelectDocumentStep
-              selectedFiles={selectedFiles}
-              onNext={() => setCurrentStep(2)}
-            />
+            <SelectDocumentStep selectedFiles={selectedFiles} onNext={() => setCurrentStep(2)} />
           ) : (
-            <div style={{ padding: '12px 0' }}>
+            <div style={{ padding: "12px 0" }}>
               <Text size="sm" c="dimmed" ta="center">
                 {t(
-                  'groupSigning.steps.selectDocument.noFile',
-                  'Please select a single PDF file from your active files to create a signing session.'
+                  "groupSigning.steps.selectDocument.noFile",
+                  "Please select a single PDF file from your active files to create a signing session.",
                 )}
               </Text>
             </div>
@@ -179,12 +163,7 @@ export const CreateSessionFlow: React.FC<CreateSessionFlowProps> = ({
         </StepWrapper>
 
         {/* Step 2: Select Participants */}
-        <StepWrapper
-          number={2}
-          title={steps[1].title}
-          isActive={currentStep === 2}
-          isCompleted={currentStep > 2}
-        >
+        <StepWrapper number={2} title={steps[1].title} isActive={currentStep === 2} isCompleted={currentStep > 2}>
           <SelectParticipantsStep
             selectedUserIds={selectedUserIds}
             onSelectedUserIdsChange={onSelectedUserIdsChange}
@@ -195,12 +174,7 @@ export const CreateSessionFlow: React.FC<CreateSessionFlowProps> = ({
         </StepWrapper>
 
         {/* Step 3: Configure Signature Defaults */}
-        <StepWrapper
-          number={3}
-          title={steps[2].title}
-          isActive={currentStep === 3}
-          isCompleted={currentStep > 3}
-        >
+        <StepWrapper number={3} title={steps[2].title} isActive={currentStep === 3} isCompleted={currentStep > 3}>
           <ConfigureSignatureDefaultsStep
             settings={signatureSettings}
             onSettingsChange={setSignatureSettings}
@@ -211,12 +185,7 @@ export const CreateSessionFlow: React.FC<CreateSessionFlowProps> = ({
         </StepWrapper>
 
         {/* Step 4: Review & Send */}
-        <StepWrapper
-          number={4}
-          title={steps[3].title}
-          isActive={currentStep === 4}
-          isCompleted={false}
-        >
+        <StepWrapper number={4} title={steps[3].title} isActive={currentStep === 4} isCompleted={false}>
           {selectedFile && (
             <ReviewSessionStep
               selectedFile={selectedFile}
diff --git a/frontend/src/core/components/shared/signing/CreateSessionPanel.tsx b/frontend/src/core/components/shared/signing/CreateSessionPanel.tsx
index cdad4b6352..ba7c171c83 100644
--- a/frontend/src/core/components/shared/signing/CreateSessionPanel.tsx
+++ b/frontend/src/core/components/shared/signing/CreateSessionPanel.tsx
@@ -1,7 +1,7 @@
-import { useTranslation } from 'react-i18next';
-import { Text, Switch } from '@mantine/core';
-import UserSelector from '@app/components/shared/UserSelector';
-import type { FileState } from '@app/types/file';
+import { useTranslation } from "react-i18next";
+import { Text, Switch } from "@mantine/core";
+import UserSelector from "@app/components/shared/UserSelector";
+import type { FileState } from "@app/types/file";
 
 interface CreateSessionPanelProps {
   selectedFiles: FileState[];
@@ -33,31 +33,31 @@ const CreateSessionPanel = ({
       {!hasValidFile ? (
         <div className="quick-access-popout__section">
           <Text size="sm" c="dimmed" ta="center" py="xl">
-            {t('quickAccess.selectSingleFileToRequest', 'Select a single PDF file to request signatures')}
+            {t("quickAccess.selectSingleFileToRequest", "Select a single PDF file to request signatures")}
           </Text>
         </div>
       ) : (
         <>
           <div className="quick-access-popout__section">
-            <div className="quick-access-popout__label">{t('quickAccess.selectedFile', 'Selected file')}</div>
+            <div className="quick-access-popout__label">{t("quickAccess.selectedFile", "Selected file")}</div>
             <div className="quick-access-popout__row-title">
-              {selectedFiles[0]?.name || t('quickAccess.noFile', 'No file selected')}
+              {selectedFiles[0]?.name || t("quickAccess.noFile", "No file selected")}
             </div>
           </div>
 
           <div className="quick-access-popout__section">
-            <div className="quick-access-popout__label">{t('quickAccess.selectUsers', 'Select users to sign')}</div>
+            <div className="quick-access-popout__label">{t("quickAccess.selectUsers", "Select users to sign")}</div>
             <UserSelector
               value={selectedUserIds}
               onChange={onSelectedUserIdsChange}
               size="xs"
-              placeholder={t('quickAccess.selectUsersPlaceholder', 'Choose participants...')}
+              placeholder={t("quickAccess.selectUsersPlaceholder", "Choose participants...")}
               disabled={creating}
             />
           </div>
 
           <div className="quick-access-popout__section">
-            <div className="quick-access-popout__label">{t('quickAccess.dueDate', 'Due date (optional)')}</div>
+            <div className="quick-access-popout__label">{t("quickAccess.dueDate", "Due date (optional)")}</div>
             <input
               type="date"
               className="quick-access-popout__input"
@@ -69,8 +69,11 @@ const CreateSessionPanel = ({
 
           <div className="quick-access-popout__section">
             <Switch
-              label={t('certSign.collab.sessionCreation.includeSummaryPage', 'Include Signature Summary Page')}
-              description={t('certSign.collab.sessionCreation.includeSummaryPageHelp', 'Add a summary page at the end with all signature details')}
+              label={t("certSign.collab.sessionCreation.includeSummaryPage", "Include Signature Summary Page")}
+              description={t(
+                "certSign.collab.sessionCreation.includeSummaryPageHelp",
+                "Add a summary page at the end with all signature details",
+              )}
               checked={includeSummaryPage}
               onChange={(e) => onIncludeSummaryPageChange(e.currentTarget.checked)}
               disabled={creating}
diff --git a/frontend/src/core/components/shared/signing/SignPopout.tsx b/frontend/src/core/components/shared/signing/SignPopout.tsx
index 8179638b08..ed4136f087 100644
--- a/frontend/src/core/components/shared/signing/SignPopout.tsx
+++ b/frontend/src/core/components/shared/signing/SignPopout.tsx
@@ -1,34 +1,34 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
-import { createPortal } from 'react-dom';
-import { useTranslation } from 'react-i18next';
-import { Drawer } from '@mantine/core';
-import { useIsPhone } from '@app/hooks/useIsMobile';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import ActiveSessionsPanel from '@app/components/shared/signing/ActiveSessionsPanel';
-import CompletedSessionsPanel from '@app/components/shared/signing/CompletedSessionsPanel';
-import CreateSessionPanel from '@app/components/shared/signing/CreateSessionPanel';
-import apiClient from '@app/services/apiClient';
-import { alert } from '@app/components/toast';
-import { SignRequestSummary, SignRequestDetail, SessionSummary, SessionDetail } from '@app/types/signingSession';
-import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
-import { useNavigationActions, useNavigationState } from '@app/contexts/NavigationContext';
-import { useFileSelection } from '@app/contexts/file/fileHooks';
-import { fileStorage } from '@app/services/fileStorage';
-import { useFileActions } from '@app/contexts/FileContext';
-import SignRequestWorkbenchView from '@app/components/tools/certSign/SignRequestWorkbenchView';
-import SessionDetailWorkbenchView from '@app/components/tools/certSign/SessionDetailWorkbenchView';
-import { Z_INDEX_OVER_FULLSCREEN_SURFACE } from '@app/styles/zIndex';
+import { useState, useEffect, useCallback, useRef } from "react";
+import { createPortal } from "react-dom";
+import { useTranslation } from "react-i18next";
+import { Drawer } from "@mantine/core";
+import { useIsPhone } from "@app/hooks/useIsMobile";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import ActiveSessionsPanel from "@app/components/shared/signing/ActiveSessionsPanel";
+import CompletedSessionsPanel from "@app/components/shared/signing/CompletedSessionsPanel";
+import CreateSessionPanel from "@app/components/shared/signing/CreateSessionPanel";
+import apiClient from "@app/services/apiClient";
+import { alert } from "@app/components/toast";
+import { SignRequestSummary, SignRequestDetail, SessionSummary, SessionDetail } from "@app/types/signingSession";
+import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
+import { useNavigationActions, useNavigationState } from "@app/contexts/NavigationContext";
+import { useFileSelection } from "@app/contexts/file/fileHooks";
+import { fileStorage } from "@app/services/fileStorage";
+import { useFileActions } from "@app/contexts/FileContext";
+import SignRequestWorkbenchView from "@app/components/tools/certSign/SignRequestWorkbenchView";
+import SessionDetailWorkbenchView from "@app/components/tools/certSign/SessionDetailWorkbenchView";
+import { Z_INDEX_OVER_FULLSCREEN_SURFACE } from "@app/styles/zIndex";
 
-export const SIGN_REQUEST_WORKBENCH_TYPE = 'custom:signRequestWorkbench' as const;
-export const SESSION_DETAIL_WORKBENCH_TYPE = 'custom:sessionDetailWorkbench' as const;
+export const SIGN_REQUEST_WORKBENCH_TYPE = "custom:signRequestWorkbench" as const;
+export const SESSION_DETAIL_WORKBENCH_TYPE = "custom:sessionDetailWorkbench" as const;
 
 type SessionItem = (SignRequestSummary | SessionSummary) & {
-  itemType: 'signRequest' | 'mySession';
+  itemType: "signRequest" | "mySession";
 };
 
-function sortSessions(sessions: SessionItem[], tab: 'active' | 'completed'): SessionItem[] {
+function sortSessions(sessions: SessionItem[], tab: "active" | "completed"): SessionItem[] {
   return [...sessions].sort((a, b) => {
-    if (tab === 'active') {
+    if (tab === "active") {
       const aDue = (a as SignRequestSummary).dueDate;
       const bDue = (b as SignRequestSummary).dueDate;
       if (aDue && bDue) return new Date(aDue).getTime() - new Date(bDue).getTime();
@@ -55,23 +55,27 @@ const SignPopout = ({ isOpen, onClose, buttonRef, isRTL, groupSigningEnabled }:
   const [maxHeight, setMaxHeight] = useState<number | undefined>(undefined);
 
   // Tab state
-  const [activeTab, setActiveTab] = useState<'active' | 'completed'>('active');
+  const [activeTab, setActiveTab] = useState<"active" | "completed">("active");
   const [showCreatePanel, setShowCreatePanel] = useState(false);
 
   // Search / filter state
-  const [searchQuery, setSearchQuery] = useState('');
+  const [searchQuery, setSearchQuery] = useState("");
   const [activeFilters, setActiveFilters] = useState<Set<string>>(new Set());
 
-  const handleTabChange = (tab: 'active' | 'completed') => {
+  const handleTabChange = (tab: "active" | "completed") => {
     setActiveTab(tab);
-    setSearchQuery('');
+    setSearchQuery("");
     setActiveFilters(new Set());
   };
 
   const toggleFilter = (key: string) => {
-    setActiveFilters(prev => {
+    setActiveFilters((prev) => {
       const next = new Set(prev);
-      if (next.has(key)) { next.delete(key); } else { next.add(key); }
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
       return next;
     });
   };
@@ -83,7 +87,7 @@ const SignPopout = ({ isOpen, onClose, buttonRef, isRTL, groupSigningEnabled }:
 
   // Create form state
   const [selectedUserIds, setSelectedUserIds] = useState<number[]>([]);
-  const [dueDate, setDueDate] = useState('');
+  const [dueDate, setDueDate] = useState("");
   const [creating, setCreating] = useState(false);
   const [includeSummaryPage, setIncludeSummaryPage] = useState(false);
 
@@ -101,8 +105,8 @@ const SignPopout = ({ isOpen, onClose, buttonRef, isRTL, groupSigningEnabled }:
   } = useToolWorkflow();
 
   // Workbench IDs
-  const SIGN_REQUEST_WORKBENCH_ID = 'signRequestWorkbench';
-  const SESSION_DETAIL_WORKBENCH_ID = 'sessionDetailWorkbench';
+  const SIGN_REQUEST_WORKBENCH_ID = "signRequestWorkbench";
+  const SESSION_DETAIL_WORKBENCH_ID = "sessionDetailWorkbench";
 
   // Register workbenches when group signing is enabled.
   // No cleanup on unmount — registration must persist when this component unmounts
@@ -113,7 +117,7 @@ const SignPopout = ({ isOpen, onClose, buttonRef, isRTL, groupSigningEnabled }:
     registerCustomWorkbenchView({
       id: SIGN_REQUEST_WORKBENCH_ID,
       workbenchId: SIGN_REQUEST_WORKBENCH_TYPE,
-      label: t('certSign.collab.signRequest.workbenchTitle', 'Sign Request'),
+      label: t("certSign.collab.signRequest.workbenchTitle", "Sign Request"),
       component: SignRequestWorkbenchView,
       hideTopControls: true,
       hideToolPanel: true,
@@ -122,7 +126,7 @@ const SignPopout = ({ isOpen, onClose, buttonRef, isRTL, groupSigningEnabled }:
     registerCustomWorkbenchView({
       id: SESSION_DETAIL_WORKBENCH_ID,
       workbenchId: SESSION_DETAIL_WORKBENCH_TYPE,
-      label: t('certSign.collab.sessionDetail.workbenchTitle', 'Session Management'),
+      label: t("certSign.collab.sessionDetail.workbenchTitle", "Session Management"),
       component: SessionDetailWorkbenchView,
       hideTopControls: true,
       hideToolPanel: true,
@@ -175,12 +179,12 @@ const SignPopout = ({ isOpen, onClose, buttonRef, isRTL, groupSigningEnabled }:
     };
 
     updatePosition();
-    window.addEventListener('resize', updatePosition);
-    window.addEventListener('scroll', updatePosition, { capture: true });
+    window.addEventListener("resize", updatePosition);
+    window.addEventListener("scroll", updatePosition, { capture: true });
 
     return () => {
-      window.removeEventListener('resize', updatePosition);
-      window.removeEventListener('scroll', updatePosition, { capture: true });
+      window.removeEventListener("resize", updatePosition);
+      window.removeEventListener("scroll", updatePosition, { capture: true });
     };
   }, [isOpen, isRTL, buttonRef]);
 
@@ -193,24 +197,22 @@ const SignPopout = ({ isOpen, onClose, buttonRef, isRTL, groupSigningEnabled }:
       if (popoverRef.current?.contains(target)) return;
       if (buttonRef.current?.contains(target)) return;
 
-      const mantineDropdown = (target as Element).closest?.(
-        '.mantine-Combobox-dropdown, .mantine-Popover-dropdown'
-      );
+      const mantineDropdown = (target as Element).closest?.(".mantine-Combobox-dropdown, .mantine-Popover-dropdown");
       if (mantineDropdown) return;
 
       onClose();
     };
 
     const handleEscape = (event: KeyboardEvent) => {
-      if (event.key === 'Escape') onClose();
+      if (event.key === "Escape") onClose();
     };
 
-    document.addEventListener('mousedown', handleOutside);
-    document.addEventListener('keydown', handleEscape);
+    document.addEventListener("mousedown", handleOutside);
+    document.addEventListener("keydown", handleEscape);
 
     return () => {
-      document.removeEventListener('mousedown', handleOutside);
-      document.removeEventListener('keydown', handleEscape);
+      document.removeEventListener("mousedown", handleOutside);
+      document.removeEventListener("keydown", handleEscape);
     };
   }, [isOpen, onClose, buttonRef]);
 
@@ -218,17 +220,17 @@ const SignPopout = ({ isOpen, onClose, buttonRef, isRTL, groupSigningEnabled }:
     setLoading(true);
     try {
       const [requestsResponse, sessionsResponse] = await Promise.all([
-        apiClient.get<SignRequestSummary[]>('/api/v1/security/cert-sign/sign-requests'),
-        apiClient.get<SessionSummary[]>('/api/v1/security/cert-sign/sessions'),
+        apiClient.get<SignRequestSummary[]>("/api/v1/security/cert-sign/sign-requests"),
+        apiClient.get<SessionSummary[]>("/api/v1/security/cert-sign/sessions"),
       ]);
       setSignRequests(requestsResponse.data);
       setMySessions(sessionsResponse.data);
     } catch (error) {
-      console.error('Failed to fetch signing data:', error instanceof Error ? error.message : error);
+      console.error("Failed to fetch signing data:", error instanceof Error ? error.message : error);
       alert({
-        alertType: 'warning',
-        title: t('common.error'),
-        body: t('certSign.fetchFailed', 'Failed to load signing data'),
+        alertType: "warning",
+        title: t("common.error"),
+        body: t("certSign.fetchFailed", "Failed to load signing data"),
         expandable: false,
         durationMs: 2500,
       });
@@ -246,7 +248,7 @@ const SignPopout = ({ isOpen, onClose, buttonRef, isRTL, groupSigningEnabled }:
 
   // Auto-refresh Active tab every 15 seconds to show updated signature status
   useEffect(() => {
-    if (isOpen && groupSigningEnabled && activeTab === 'active' && !showCreatePanel) {
+    if (isOpen && groupSigningEnabled && activeTab === "active" && !showCreatePanel) {
       const interval = setInterval(() => {
         fetchData();
       }, 15000); // Refresh every 15 seconds
@@ -259,53 +261,51 @@ const SignPopout = ({ isOpen, onClose, buttonRef, isRTL, groupSigningEnabled }:
   const activeSessions: SessionItem[] = [
     // Sign requests where user hasn't signed or declined yet
     ...signRequests
-      .filter(req => req.myStatus !== 'SIGNED' && req.myStatus !== 'DECLINED')
-      .map(req => ({ ...req, itemType: 'signRequest' as const })),
+      .filter((req) => req.myStatus !== "SIGNED" && req.myStatus !== "DECLINED")
+      .map((req) => ({ ...req, itemType: "signRequest" as const })),
     // Sessions user created that aren't finalized yet
-    ...mySessions
-      .filter(s => !s.finalized)
-      .map(s => ({ ...s, itemType: 'mySession' as const })),
+    ...mySessions.filter((s) => !s.finalized).map((s) => ({ ...s, itemType: "mySession" as const })),
   ];
 
   const completedSessions: SessionItem[] = [
     // Sign requests where user has signed or declined
     ...signRequests
-      .filter(req => req.myStatus === 'SIGNED' || req.myStatus === 'DECLINED')
-      .map(req => ({ ...req, itemType: 'signRequest' as const })),
+      .filter((req) => req.myStatus === "SIGNED" || req.myStatus === "DECLINED")
+      .map((req) => ({ ...req, itemType: "signRequest" as const })),
     // Sessions user created that have been finalized
-    ...mySessions
-      .filter(s => s.finalized)
-      .map(s => ({ ...s, itemType: 'mySession' as const })),
+    ...mySessions.filter((s) => s.finalized).map((s) => ({ ...s, itemType: "mySession" as const })),
   ];
 
   // Filter options vary by tab
-  const filterOptions = activeTab === 'active'
-    ? [
-        { key: 'mine',    label: t('quickAccess.filterMine', 'Mine') },
-        { key: 'overdue', label: t('quickAccess.filterOverdue', 'Overdue') },
-      ]
-    : [
-        { key: 'mine',    label: t('quickAccess.filterMine', 'Mine') },
-        { key: 'signed',  label: t('quickAccess.filterSigned', 'Signed') },
-        { key: 'declined',label: t('quickAccess.filterDeclined', 'Declined') },
-      ];
+  const filterOptions =
+    activeTab === "active"
+      ? [
+          { key: "mine", label: t("quickAccess.filterMine", "Mine") },
+          { key: "overdue", label: t("quickAccess.filterOverdue", "Overdue") },
+        ]
+      : [
+          { key: "mine", label: t("quickAccess.filterMine", "Mine") },
+          { key: "signed", label: t("quickAccess.filterSigned", "Signed") },
+          { key: "declined", label: t("quickAccess.filterDeclined", "Declined") },
+        ];
 
   const applyFiltersAndSearch = (sessions: SessionItem[]): SessionItem[] => {
     let result = sessions;
     if (searchQuery.trim()) {
       const q = searchQuery.toLowerCase();
-      result = result.filter(s => s.documentName.toLowerCase().includes(q));
+      result = result.filter((s) => s.documentName.toLowerCase().includes(q));
     }
     const now = new Date();
-    if (activeFilters.has('mine'))     result = result.filter(s => s.itemType === 'mySession');
-    if (activeFilters.has('overdue'))  result = result.filter(s => (s as SignRequestSummary).dueDate && new Date((s as SignRequestSummary).dueDate) < now);
-    if (activeFilters.has('signed'))   result = result.filter(s => (s as SignRequestSummary).myStatus === 'SIGNED');
-    if (activeFilters.has('declined')) result = result.filter(s => (s as SignRequestSummary).myStatus === 'DECLINED');
+    if (activeFilters.has("mine")) result = result.filter((s) => s.itemType === "mySession");
+    if (activeFilters.has("overdue"))
+      result = result.filter((s) => (s as SignRequestSummary).dueDate && new Date((s as SignRequestSummary).dueDate) < now);
+    if (activeFilters.has("signed")) result = result.filter((s) => (s as SignRequestSummary).myStatus === "SIGNED");
+    if (activeFilters.has("declined")) result = result.filter((s) => (s as SignRequestSummary).myStatus === "DECLINED");
     return result;
   };
 
-  const displayedActiveSessions = applyFiltersAndSearch(sortSessions(activeSessions, 'active'));
-  const displayedCompletedSessions = applyFiltersAndSearch(sortSessions(completedSessions, 'completed'));
+  const displayedActiveSessions = applyFiltersAndSearch(sortSessions(activeSessions, "active"));
+  const displayedCompletedSessions = applyFiltersAndSearch(sortSessions(completedSessions, "completed"));
 
   // Create session handler
   const handleCreateSession = useCallback(async () => {
@@ -315,47 +315,47 @@ const SignPopout = ({ isOpen, onClose, buttonRef, isRTL, groupSigningEnabled }:
     try {
       const selectedFile = selectedFiles[0];
       const stirlingFile = await fileStorage.getStirlingFile(selectedFile.fileId);
-      if (!stirlingFile) throw new Error('File not found');
+      if (!stirlingFile) throw new Error("File not found");
 
       const formData = new FormData();
-      formData.append('file', stirlingFile, selectedFile.name);
-      formData.append('workflowType', 'SIGNING');
-      formData.append('documentName', selectedFile.name);
+      formData.append("file", stirlingFile, selectedFile.name);
+      formData.append("workflowType", "SIGNING");
+      formData.append("documentName", selectedFile.name);
       selectedUserIds.forEach((userId, index) => {
         formData.append(`participantUserIds[${index}]`, userId.toString());
       });
-      if (dueDate) formData.append('dueDate', dueDate);
-      formData.append('notifyOnCreate', 'true');
+      if (dueDate) formData.append("dueDate", dueDate);
+      formData.append("notifyOnCreate", "true");
 
       // Send includeSummaryPage setting as workflowMetadata if enabled
       if (includeSummaryPage) {
         const workflowMetadata = JSON.stringify({
           includeSummaryPage: true,
         });
-        formData.append('workflowMetadata', workflowMetadata);
+        formData.append("workflowMetadata", workflowMetadata);
       }
 
-      await apiClient.post('/api/v1/security/cert-sign/sessions', formData);
+      await apiClient.post("/api/v1/security/cert-sign/sessions", formData);
 
       alert({
-        alertType: 'success',
-        title: t('success'),
-        body: t('signSession.created', 'Signing request sent'),
+        alertType: "success",
+        title: t("success"),
+        body: t("signSession.created", "Signing request sent"),
         expandable: false,
         durationMs: 2500,
       });
 
       setSelectedUserIds([]);
-      setDueDate('');
+      setDueDate("");
       setIncludeSummaryPage(false);
       setShowCreatePanel(false);
       await fetchData();
     } catch (error) {
-      console.error('Failed to create session:', error instanceof Error ? error.message : error);
+      console.error("Failed to create session:", error instanceof Error ? error.message : error);
       alert({
-        alertType: 'error',
-        title: t('common.error'),
-        body: t('signSession.createFailed', 'Failed to create signing request'),
+        alertType: "error",
+        title: t("common.error"),
+        body: t("signSession.createFailed", "Failed to create signing request"),
         expandable: false,
         durationMs: 3000,
       });
@@ -365,205 +365,207 @@ const SignPopout = ({ isOpen, onClose, buttonRef, isRTL, groupSigningEnabled }:
   }, [selectedUserIds, dueDate, selectedFiles, fetchData, t, includeSummaryPage]);
 
   // Handle clicking a sign request
-  const handleSignRequestClick = useCallback(async (request: SignRequestSummary) => {
-    onClose();
-    try {
-      const [detailResponse, pdfResponse] = await Promise.all([
-        apiClient.get<SignRequestDetail>(`/api/v1/security/cert-sign/sign-requests/${request.sessionId}`),
-        apiClient.get(`/api/v1/security/cert-sign/sign-requests/${request.sessionId}/document`, {
-          responseType: 'blob',
-        }),
-      ]);
+  const handleSignRequestClick = useCallback(
+    async (request: SignRequestSummary) => {
+      onClose();
+      try {
+        const [detailResponse, pdfResponse] = await Promise.all([
+          apiClient.get<SignRequestDetail>(`/api/v1/security/cert-sign/sign-requests/${request.sessionId}`),
+          apiClient.get(`/api/v1/security/cert-sign/sign-requests/${request.sessionId}/document`, {
+            responseType: "blob",
+          }),
+        ]);
 
-      const pdfFile = new File([pdfResponse.data], detailResponse.data.documentName, {
-        type: 'application/pdf',
-      });
-      const canSign =
-        detailResponse.data.myStatus === 'PENDING' ||
-        detailResponse.data.myStatus === 'NOTIFIED' ||
-        detailResponse.data.myStatus === 'VIEWED';
+        const pdfFile = new File([pdfResponse.data], detailResponse.data.documentName, {
+          type: "application/pdf",
+        });
+        const canSign =
+          detailResponse.data.myStatus === "PENDING" ||
+          detailResponse.data.myStatus === "NOTIFIED" ||
+          detailResponse.data.myStatus === "VIEWED";
 
-      setCustomWorkbenchViewData(SIGN_REQUEST_WORKBENCH_ID, {
-        signRequest: detailResponse.data,
-        pdfFile,
-        onSign: (certData: FormData) => handleSign(request.sessionId, certData),
-        onDecline: () => handleDecline(request.sessionId),
-        onBack: () => {
-          clearCustomWorkbenchViewData(SIGN_REQUEST_WORKBENCH_ID);
-          navigationActions.setWorkbench('viewer');
-        },
-        canSign,
-      });
+        setCustomWorkbenchViewData(SIGN_REQUEST_WORKBENCH_ID, {
+          signRequest: detailResponse.data,
+          pdfFile,
+          onSign: (certData: FormData) => handleSign(request.sessionId, certData),
+          onDecline: () => handleDecline(request.sessionId),
+          onBack: () => {
+            clearCustomWorkbenchViewData(SIGN_REQUEST_WORKBENCH_ID);
+            navigationActions.setWorkbench("viewer");
+          },
+          canSign,
+        });
 
-      requestAnimationFrame(() => {
-        navigationActions.setWorkbench(SIGN_REQUEST_WORKBENCH_TYPE);
-      });
-    } catch (error) {
-      console.error('Failed to load sign request:', error instanceof Error ? error.message : error);
-      alert({
-        alertType: 'error',
-        title: t('common.error'),
-        body: t('signRequest.fetchFailed', 'Failed to load sign request'),
-        expandable: false,
-        durationMs: 3000,
-      });
-    }
-  }, [onClose, setCustomWorkbenchViewData, clearCustomWorkbenchViewData, navigationActions, t]);
+        requestAnimationFrame(() => {
+          navigationActions.setWorkbench(SIGN_REQUEST_WORKBENCH_TYPE);
+        });
+      } catch (error) {
+        console.error("Failed to load sign request:", error instanceof Error ? error.message : error);
+        alert({
+          alertType: "error",
+          title: t("common.error"),
+          body: t("signRequest.fetchFailed", "Failed to load sign request"),
+          expandable: false,
+          durationMs: 3000,
+        });
+      }
+    },
+    [onClose, setCustomWorkbenchViewData, clearCustomWorkbenchViewData, navigationActions, t],
+  );
 
   // Handle clicking a session
-  const handleSessionClick = useCallback(async (session: SessionSummary) => {
-    onClose();
-    try {
-      // First fetch session detail
-      const detailResponse = await apiClient.get<SessionDetail>(
-        `/api/v1/security/cert-sign/sessions/${session.sessionId}`
-      );
+  const handleSessionClick = useCallback(
+    async (session: SessionSummary) => {
+      onClose();
+      try {
+        // First fetch session detail
+        const detailResponse = await apiClient.get<SessionDetail>(`/api/v1/security/cert-sign/sessions/${session.sessionId}`);
 
-      // Determine which endpoint to use based on session state
-      let pdfFile: File | null = null;
+        // Determine which endpoint to use based on session state
+        let pdfFile: File | null = null;
 
-      if (detailResponse.data.finalized) {
-        // Finalized sessions have signed PDF available
-        try {
-          const pdfResponse = await apiClient.get(
-            `/api/v1/security/cert-sign/sessions/${session.sessionId}/signed-pdf`,
-            { responseType: 'blob' }
-          );
-          pdfFile = new File([pdfResponse.data], session.documentName, { type: 'application/pdf' });
-        } catch (pdfError: any) {
-          if (pdfError?.response?.status === 404) {
-            // Finalized but signed PDF not available - backend issue
-            alert({
-              alertType: 'warning',
-              title: t('certSign.sessions.pdfNotReady', 'PDF Not Ready'),
-              body: t('certSign.sessions.pdfNotReadyDesc', 'The signed PDF is being generated. Please try again in a moment.'),
-              expandable: false,
-              durationMs: 3000,
+        if (detailResponse.data.finalized) {
+          // Finalized sessions have signed PDF available
+          try {
+            const pdfResponse = await apiClient.get(`/api/v1/security/cert-sign/sessions/${session.sessionId}/signed-pdf`, {
+              responseType: "blob",
             });
-            return;
+            pdfFile = new File([pdfResponse.data], session.documentName, { type: "application/pdf" });
+          } catch (pdfError: any) {
+            if (pdfError?.response?.status === 404) {
+              // Finalized but signed PDF not available - backend issue
+              alert({
+                alertType: "warning",
+                title: t("certSign.sessions.pdfNotReady", "PDF Not Ready"),
+                body: t(
+                  "certSign.sessions.pdfNotReadyDesc",
+                  "The signed PDF is being generated. Please try again in a moment.",
+                ),
+                expandable: false,
+                durationMs: 3000,
+              });
+              return;
+            }
+            throw pdfError;
+          }
+        } else {
+          // For non-finalized sessions, get original PDF (always available)
+          try {
+            const pdfResponse = await apiClient.get(`/api/v1/security/cert-sign/sessions/${session.sessionId}/pdf`, {
+              responseType: "blob",
+            });
+            pdfFile = new File([pdfResponse.data], session.documentName, { type: "application/pdf" });
+          } catch (_error) {
+            // Fallback if PDF not available
+            pdfFile = null;
           }
-          throw pdfError;
-        }
-      } else {
-        // For non-finalized sessions, get original PDF (always available)
-        try {
-          const pdfResponse = await apiClient.get(
-            `/api/v1/security/cert-sign/sessions/${session.sessionId}/pdf`,
-            { responseType: 'blob' }
-          );
-          pdfFile = new File([pdfResponse.data], session.documentName, { type: 'application/pdf' });
-        } catch (_error) {
-          // Fallback if PDF not available
-          pdfFile = null;
         }
+
+        setCustomWorkbenchViewData(SESSION_DETAIL_WORKBENCH_ID, {
+          session: detailResponse.data,
+          pdfFile,
+          onFinalize: () => handleFinalize(session.sessionId, session.documentName),
+          onLoadSignedPdf: () => handleLoadSignedPdf(session.sessionId, session.documentName),
+          onAddParticipants: (userIds: number[], defaultReason?: string) =>
+            handleAddParticipants(session.sessionId, userIds, defaultReason),
+          onRemoveParticipant: (participantId: number) => handleRemoveParticipant(session.sessionId, participantId),
+          onDelete: () => handleDeleteSession(session.sessionId),
+          onBack: () => {
+            clearCustomWorkbenchViewData(SESSION_DETAIL_WORKBENCH_ID);
+            navigationActions.setWorkbench("viewer");
+          },
+          onRefresh: () => handleRefreshSession(session.sessionId),
+        });
+
+        requestAnimationFrame(() => {
+          navigationActions.setWorkbench(SESSION_DETAIL_WORKBENCH_TYPE);
+        });
+      } catch (error) {
+        console.error("Failed to load session:", error instanceof Error ? error.message : error);
+        alert({
+          alertType: "error",
+          title: t("common.error"),
+          body: t("certSign.sessions.fetchFailed", "Failed to load session details"),
+          expandable: false,
+          durationMs: 3000,
+        });
       }
-
-      setCustomWorkbenchViewData(SESSION_DETAIL_WORKBENCH_ID, {
-        session: detailResponse.data,
-        pdfFile,
-        onFinalize: () => handleFinalize(session.sessionId, session.documentName),
-        onLoadSignedPdf: () => handleLoadSignedPdf(session.sessionId, session.documentName),
-        onAddParticipants: (userIds: number[], defaultReason?: string) =>
-          handleAddParticipants(session.sessionId, userIds, defaultReason),
-        onRemoveParticipant: (participantId: number) => handleRemoveParticipant(session.sessionId, participantId),
-        onDelete: () => handleDeleteSession(session.sessionId),
-        onBack: () => {
-          clearCustomWorkbenchViewData(SESSION_DETAIL_WORKBENCH_ID);
-          navigationActions.setWorkbench('viewer');
-        },
-        onRefresh: () => handleRefreshSession(session.sessionId),
-      });
-
-      requestAnimationFrame(() => {
-        navigationActions.setWorkbench(SESSION_DETAIL_WORKBENCH_TYPE);
-      });
-    } catch (error) {
-      console.error('Failed to load session:', error instanceof Error ? error.message : error);
-      alert({
-        alertType: 'error',
-        title: t('common.error'),
-        body: t('certSign.sessions.fetchFailed', 'Failed to load session details'),
-        expandable: false,
-        durationMs: 3000,
-      });
-    }
-  }, [onClose, setCustomWorkbenchViewData, clearCustomWorkbenchViewData, navigationActions, t]);
+    },
+    [onClose, setCustomWorkbenchViewData, clearCustomWorkbenchViewData, navigationActions, t],
+  );
 
   // Action handlers
   const handleSign = async (sessionId: string, certificateData: FormData) => {
     await apiClient.post(`/api/v1/security/cert-sign/sign-requests/${sessionId}/sign`, certificateData);
     alert({
-      alertType: 'success',
-      title: t('success'),
-      body: t('signRequest.signed', 'Document signed successfully'),
+      alertType: "success",
+      title: t("success"),
+      body: t("signRequest.signed", "Document signed successfully"),
       expandable: false,
       durationMs: 2500,
     });
     clearCustomWorkbenchViewData(SIGN_REQUEST_WORKBENCH_ID);
-    navigationActions.setWorkbench('viewer');
+    navigationActions.setWorkbench("viewer");
     await fetchData();
   };
 
   const handleDecline = async (sessionId: string) => {
     await apiClient.post(`/api/v1/security/cert-sign/sign-requests/${sessionId}/decline`);
     alert({
-      alertType: 'success',
-      title: t('success'),
-      body: t('signRequest.declined', 'Sign request declined'),
+      alertType: "success",
+      title: t("success"),
+      body: t("signRequest.declined", "Sign request declined"),
       expandable: false,
       durationMs: 2500,
     });
     clearCustomWorkbenchViewData(SIGN_REQUEST_WORKBENCH_ID);
-    navigationActions.setWorkbench('viewer');
+    navigationActions.setWorkbench("viewer");
     await fetchData();
   };
 
   const handleFinalize = async (sessionId: string, documentName: string) => {
-    const response = await apiClient.post(
-      `/api/v1/security/cert-sign/sessions/${sessionId}/finalize`,
-      null,
-      { responseType: 'blob' }
-    );
-    const contentDisposition = response.headers['content-disposition'];
+    const response = await apiClient.post(`/api/v1/security/cert-sign/sessions/${sessionId}/finalize`, null, {
+      responseType: "blob",
+    });
+    const contentDisposition = response.headers["content-disposition"];
     const filenameMatch = contentDisposition?.match(/filename="?(.+?)"?$/);
     const filename = filenameMatch ? filenameMatch[1] : `${documentName}_signed.pdf`;
-    const signedFile = new File([response.data], filename, { type: 'application/pdf' });
+    const signedFile = new File([response.data], filename, { type: "application/pdf" });
     await fileActions.addFiles([signedFile]);
     alert({
-      alertType: 'success',
-      title: t('success'),
-      body: t('certSign.sessions.finalized', 'Session finalized'),
+      alertType: "success",
+      title: t("success"),
+      body: t("certSign.sessions.finalized", "Session finalized"),
       expandable: false,
       durationMs: 2500,
     });
     clearCustomWorkbenchViewData(SESSION_DETAIL_WORKBENCH_ID);
-    navigationActions.setWorkbench('viewer');
+    navigationActions.setWorkbench("viewer");
     await fetchData();
   };
 
   const handleLoadSignedPdf = async (sessionId: string, documentName: string) => {
-    const response = await apiClient.get(
-      `/api/v1/security/cert-sign/sessions/${sessionId}/signed-pdf`,
-      { responseType: 'blob' }
-    );
-    const contentDisposition = response.headers['content-disposition'];
+    const response = await apiClient.get(`/api/v1/security/cert-sign/sessions/${sessionId}/signed-pdf`, {
+      responseType: "blob",
+    });
+    const contentDisposition = response.headers["content-disposition"];
     const filenameMatch = contentDisposition?.match(/filename="?(.+?)"?$/);
     const filename = filenameMatch ? filenameMatch[1] : `${documentName}_signed.pdf`;
-    const signedFile = new File([response.data], filename, { type: 'application/pdf' });
+    const signedFile = new File([response.data], filename, { type: "application/pdf" });
     await fileActions.addFiles([signedFile]);
     alert({
-      alertType: 'success',
-      title: t('success'),
-      body: t('certSign.sessions.loaded', 'Signed PDF loaded'),
+      alertType: "success",
+      title: t("success"),
+      body: t("certSign.sessions.loaded", "Signed PDF loaded"),
       expandable: false,
       durationMs: 2500,
     });
     clearCustomWorkbenchViewData(SESSION_DETAIL_WORKBENCH_ID);
-    navigationActions.setWorkbench('viewer');
+    navigationActions.setWorkbench("viewer");
   };
 
   const handleAddParticipants = async (sessionId: string, userIds: number[], defaultReason?: string) => {
-    const requests = userIds.map(userId => ({
+    const requests = userIds.map((userId) => ({
       userId,
       defaultReason: defaultReason || undefined,
       sendNotification: true,
@@ -580,21 +582,19 @@ const SignPopout = ({ isOpen, onClose, buttonRef, isRTL, groupSigningEnabled }:
   const handleDeleteSession = async (sessionId: string) => {
     await apiClient.delete(`/api/v1/security/cert-sign/sessions/${sessionId}`);
     alert({
-      alertType: 'success',
-      title: t('success'),
-      body: t('certSign.sessions.deleted', 'Session deleted'),
+      alertType: "success",
+      title: t("success"),
+      body: t("certSign.sessions.deleted", "Session deleted"),
       expandable: false,
       durationMs: 2500,
     });
     clearCustomWorkbenchViewData(SESSION_DETAIL_WORKBENCH_ID);
-    navigationActions.setWorkbench('viewer');
+    navigationActions.setWorkbench("viewer");
     await fetchData();
   };
 
   const handleRefreshSession = async (sessionId: string) => {
-    const response = await apiClient.get<SessionDetail>(
-      `/api/v1/security/cert-sign/sessions/${sessionId}`
-    );
+    const response = await apiClient.get<SessionDetail>(`/api/v1/security/cert-sign/sessions/${sessionId}`);
     // Update workbench data, preserving PDF and callbacks
     setCustomWorkbenchViewData(SESSION_DETAIL_WORKBENCH_ID, (prevData: any) => ({
       ...prevData,
@@ -602,7 +602,7 @@ const SignPopout = ({ isOpen, onClose, buttonRef, isRTL, groupSigningEnabled }:
     }));
   };
 
-  if (typeof document === 'undefined') return null;
+  if (typeof document === "undefined") return null;
 
   // Shared card content — rendered inside either the portal (desktop/tablet) or Drawer (phone)
   const popoutCard = (
@@ -611,20 +611,20 @@ const SignPopout = ({ isOpen, onClose, buttonRef, isRTL, groupSigningEnabled }:
       <div className="quick-access-popout__header">
         <button
           type="button"
-          className={`quick-access-popout__back ${showCreatePanel ? 'is-visible' : ''}`}
+          className={`quick-access-popout__back ${showCreatePanel ? "is-visible" : ""}`}
           onClick={() => setShowCreatePanel(false)}
-          aria-label={t('quickAccess.back', 'Back')}
+          aria-label={t("quickAccess.back", "Back")}
         >
           <LocalIcon icon="arrow-back-rounded" width="1rem" height="1rem" />
         </button>
         <div className="quick-access-popout__title">
           {showCreatePanel
-            ? t('quickAccess.createSession', 'Create Signing Request')
-            : groupSigningEnabled && activeTab === 'active'
-            ? t('quickAccess.activeSessions', 'Active Sessions')
-            : groupSigningEnabled
-            ? t('quickAccess.completedSessions', 'Completed Sessions')
-            : t('quickAccess.sign', 'Sign')}
+            ? t("quickAccess.createSession", "Create Signing Request")
+            : groupSigningEnabled && activeTab === "active"
+              ? t("quickAccess.activeSessions", "Active Sessions")
+              : groupSigningEnabled
+                ? t("quickAccess.completedSessions", "Completed Sessions")
+                : t("quickAccess.sign", "Sign")}
         </div>
         <div className="quick-access-popout__header-actions">
           {!showCreatePanel && (
@@ -633,7 +633,7 @@ const SignPopout = ({ isOpen, onClose, buttonRef, isRTL, groupSigningEnabled }:
               className="quick-access-popout__header-action"
               onClick={fetchData}
               disabled={loading}
-              aria-label={t('quickAccess.refresh', 'Refresh')}
+              aria-label={t("quickAccess.refresh", "Refresh")}
               style={{ opacity: loading ? 0.5 : 0.7 }}
             >
               <LocalIcon icon="refresh-rounded" width="1rem" height="1rem" />
@@ -643,7 +643,7 @@ const SignPopout = ({ isOpen, onClose, buttonRef, isRTL, groupSigningEnabled }:
             type="button"
             className="quick-access-popout__header-action"
             onClick={onClose}
-            aria-label={t('close', 'Close')}
+            aria-label={t("close", "Close")}
           >
             <LocalIcon icon="close-rounded" width="1rem" height="1rem" />
           </button>
@@ -653,31 +653,29 @@ const SignPopout = ({ isOpen, onClose, buttonRef, isRTL, groupSigningEnabled }:
       {/* Quick sign tools */}
       {!showCreatePanel && (
         <div className="quick-access-popout__quick-sign">
-          <div className="quick-access-popout__section-label">
-            {t('quickAccess.signYourself', 'Sign Yourself')}
-          </div>
+          <div className="quick-access-popout__section-label">{t("quickAccess.signYourself", "Sign Yourself")}</div>
           <div className="quick-access-popout__quick-sign-actions">
             <button
               type="button"
               className="quick-access-popout__quick-sign-btn"
               onClick={() => {
                 onClose();
-                handleToolSelect('sign');
+                handleToolSelect("sign");
               }}
             >
               <LocalIcon icon="signature-rounded" width="1rem" height="1rem" />
-              {t('quickAccess.wetSign', 'Add Signature')}
+              {t("quickAccess.wetSign", "Add Signature")}
             </button>
             <button
               type="button"
               className="quick-access-popout__quick-sign-btn"
               onClick={() => {
                 onClose();
-                handleToolSelect('certSign');
+                handleToolSelect("certSign");
               }}
             >
               <LocalIcon icon="workspace-premium-rounded" width="1rem" height="1rem" />
-              {t('quickAccess.certSign', 'Certificate Sign')}
+              {t("quickAccess.certSign", "Certificate Sign")}
             </button>
           </div>
         </div>
@@ -687,29 +685,29 @@ const SignPopout = ({ isOpen, onClose, buttonRef, isRTL, groupSigningEnabled }:
       {!showCreatePanel && groupSigningEnabled && (
         <>
           <div className="quick-access-popout__section-label quick-access-popout__section-label--padded quick-access-popout__section-label--row">
-            <span>{t('quickAccess.signatureRequests', 'Signature Requests')}</span>
+            <span>{t("quickAccess.signatureRequests", "Signature Requests")}</span>
             <button
               type="button"
               className="quick-access-popout__section-action"
               onClick={() => setShowCreatePanel(true)}
-              aria-label={t('quickAccess.newRequest', 'New request')}
-              title={t('quickAccess.newRequest', 'New request')}
+              aria-label={t("quickAccess.newRequest", "New request")}
+              title={t("quickAccess.newRequest", "New request")}
             >
               <LocalIcon icon="add-rounded" width="1rem" height="1rem" />
             </button>
           </div>
           <div className="quick-access-popout__tab-nav">
             <button
-              className={`quick-access-popout__tab-button ${activeTab === 'active' ? 'active' : ''}`}
-              onClick={() => handleTabChange('active')}
+              className={`quick-access-popout__tab-button ${activeTab === "active" ? "active" : ""}`}
+              onClick={() => handleTabChange("active")}
             >
-              {t('quickAccess.activeTab', 'Active')}
+              {t("quickAccess.activeTab", "Active")}
             </button>
             <button
-              className={`quick-access-popout__tab-button ${activeTab === 'completed' ? 'active' : ''}`}
-              onClick={() => handleTabChange('completed')}
+              className={`quick-access-popout__tab-button ${activeTab === "completed" ? "active" : ""}`}
+              onClick={() => handleTabChange("completed")}
             >
-              {t('quickAccess.completedTab', 'Completed')}
+              {t("quickAccess.completedTab", "Completed")}
             </button>
           </div>
         </>
@@ -721,16 +719,16 @@ const SignPopout = ({ isOpen, onClose, buttonRef, isRTL, groupSigningEnabled }:
           <input
             type="search"
             className="quick-access-popout__search"
-            placeholder={t('quickAccess.searchDocuments', 'Search documents…')}
+            placeholder={t("quickAccess.searchDocuments", "Search documents…")}
             value={searchQuery}
-            onChange={e => setSearchQuery(e.target.value)}
+            onChange={(e) => setSearchQuery(e.target.value)}
           />
           <div className="quick-access-popout__filter-chips">
-            {filterOptions.map(f => (
+            {filterOptions.map((f) => (
               <button
                 key={f.key}
                 type="button"
-                className={`quick-access-popout__filter-chip ${activeFilters.has(f.key) ? 'is-active' : ''}`}
+                className={`quick-access-popout__filter-chip ${activeFilters.has(f.key) ? "is-active" : ""}`}
                 onClick={() => toggleFilter(f.key)}
               >
                 {f.label}
@@ -754,12 +752,12 @@ const SignPopout = ({ isOpen, onClose, buttonRef, isRTL, groupSigningEnabled }:
               includeSummaryPage={includeSummaryPage}
               onIncludeSummaryPageChange={setIncludeSummaryPage}
             />
-          ) : activeTab === 'active' ? (
+          ) : activeTab === "active" ? (
             <ActiveSessionsPanel
               sessions={displayedActiveSessions}
               loading={loading}
               onSessionClick={(item) => {
-                if (item.itemType === 'signRequest') {
+                if (item.itemType === "signRequest") {
                   handleSignRequestClick(item as SignRequestSummary);
                 } else {
                   handleSessionClick(item as SessionSummary);
@@ -771,7 +769,7 @@ const SignPopout = ({ isOpen, onClose, buttonRef, isRTL, groupSigningEnabled }:
               sessions={displayedCompletedSessions}
               loading={loading}
               onSessionClick={(item) => {
-                if (item.itemType === 'signRequest') {
+                if (item.itemType === "signRequest") {
                   handleSignRequestClick(item as SignRequestSummary);
                 } else {
                   handleSessionClick(item as SessionSummary);
@@ -793,8 +791,8 @@ const SignPopout = ({ isOpen, onClose, buttonRef, isRTL, groupSigningEnabled }:
           >
             <LocalIcon icon="send-rounded" width="1rem" height="1rem" />
             {creating
-              ? t('quickAccess.sendingRequest', 'Sending...')
-              : t('quickAccess.requestSignatures', 'Request Signatures')}
+              ? t("quickAccess.sendingRequest", "Sending...")
+              : t("quickAccess.requestSignatures", "Request Signatures")}
           </button>
         </div>
       )}
@@ -812,7 +810,7 @@ const SignPopout = ({ isOpen, onClose, buttonRef, isRTL, groupSigningEnabled }:
         withCloseButton={false}
         padding={0}
         className="quick-access-sign-popout"
-        styles={{ body: { padding: 0, height: '100%', display: 'flex', flexDirection: 'column' } }}
+        styles={{ body: { padding: 0, height: "100%", display: "flex", flexDirection: "column" } }}
       >
         {popoutCard}
       </Drawer>
@@ -823,9 +821,9 @@ const SignPopout = ({ isOpen, onClose, buttonRef, isRTL, groupSigningEnabled }:
   return createPortal(
     <div
       ref={popoverRef}
-      className={`quick-access-popout quick-access-sign-popout ${isOpen ? 'is-open' : ''}`}
+      className={`quick-access-popout quick-access-sign-popout ${isOpen ? "is-open" : ""}`}
       style={{
-        position: 'fixed',
+        position: "fixed",
         top: `${popoverPosition.top}px`,
         left: `${popoverPosition.left}px`,
         zIndex: Z_INDEX_OVER_FULLSCREEN_SURFACE,
@@ -834,7 +832,7 @@ const SignPopout = ({ isOpen, onClose, buttonRef, isRTL, groupSigningEnabled }:
     >
       {popoutCard}
     </div>,
-    document.body
+    document.body,
   );
 };
 
diff --git a/frontend/src/core/components/shared/signing/steps/ConfigureSignatureDefaultsStep.tsx b/frontend/src/core/components/shared/signing/steps/ConfigureSignatureDefaultsStep.tsx
index 5fd2d2989d..5ba42b58c8 100644
--- a/frontend/src/core/components/shared/signing/steps/ConfigureSignatureDefaultsStep.tsx
+++ b/frontend/src/core/components/shared/signing/steps/ConfigureSignatureDefaultsStep.tsx
@@ -1,7 +1,7 @@
-import { Button, Stack, Text, Group, Paper } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import SignatureSettingsInput, { SignatureSettings } from '@app/components/tools/certSign/SignatureSettingsInput';
+import { Button, Stack, Text, Group, Paper } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import SignatureSettingsInput, { SignatureSettings } from "@app/components/tools/certSign/SignatureSettingsInput";
 
 interface ConfigureSignatureDefaultsStepProps {
   settings: SignatureSettings;
@@ -22,41 +22,28 @@ export const ConfigureSignatureDefaultsStep: React.FC<ConfigureSignatureDefaults
 
   return (
     <Stack gap="md">
-      <SignatureSettingsInput
-        value={settings}
-        onChange={onSettingsChange}
-        disabled={disabled}
-      />
+      <SignatureSettingsInput value={settings} onChange={onSettingsChange} disabled={disabled} />
 
       <Paper p="sm" withBorder>
         <Stack gap="xs">
           <Text size="xs" fw={600} c="dimmed">
-            {t('groupSigning.steps.configureDefaults.preview', 'Preview')}
+            {t("groupSigning.steps.configureDefaults.preview", "Preview")}
           </Text>
           <Text size="xs">
             {settings.showSignature
-              ? t(
-                  'groupSigning.steps.configureDefaults.visible',
-                  'Signatures will be visible on page {{page}}',
-                  { page: settings.pageNumber || 1 }
-                )
-              : t(
-                  'groupSigning.steps.configureDefaults.invisible',
-                  'Signatures will be invisible (metadata only)'
-                )}
+              ? t("groupSigning.steps.configureDefaults.visible", "Signatures will be visible on page {{page}}", {
+                  page: settings.pageNumber || 1,
+                })
+              : t("groupSigning.steps.configureDefaults.invisible", "Signatures will be invisible (metadata only)")}
           </Text>
           {settings.showSignature && settings.reason && (
             <Text size="xs">
-              <strong>{t('groupSigning.steps.configureDefaults.reasonLabel', 'Reason:')}</strong>{' '}
-              {settings.reason}
+              <strong>{t("groupSigning.steps.configureDefaults.reasonLabel", "Reason:")}</strong> {settings.reason}
             </Text>
           )}
           {settings.showSignature && settings.location && (
             <Text size="xs">
-              <strong>
-                {t('groupSigning.steps.configureDefaults.locationLabel', 'Location:')}
-              </strong>{' '}
-              {settings.location}
+              <strong>{t("groupSigning.steps.configureDefaults.locationLabel", "Location:")}</strong> {settings.location}
             </Text>
           )}
         </Stack>
@@ -64,10 +51,10 @@ export const ConfigureSignatureDefaultsStep: React.FC<ConfigureSignatureDefaults
 
       <Group gap="sm">
         <Button variant="default" onClick={onBack} leftSection={<ArrowBackIcon sx={{ fontSize: 16 }} />}>
-          {t('groupSigning.steps.back', 'Back')}
+          {t("groupSigning.steps.back", "Back")}
         </Button>
         <Button onClick={onNext} disabled={disabled} style={{ flex: 1 }}>
-          {t('groupSigning.steps.configureDefaults.continue', 'Continue to Review')}
+          {t("groupSigning.steps.configureDefaults.continue", "Continue to Review")}
         </Button>
       </Group>
     </Stack>
diff --git a/frontend/src/core/components/shared/signing/steps/ReviewSessionStep.tsx b/frontend/src/core/components/shared/signing/steps/ReviewSessionStep.tsx
index aab7d01b2e..af773dcc7e 100644
--- a/frontend/src/core/components/shared/signing/steps/ReviewSessionStep.tsx
+++ b/frontend/src/core/components/shared/signing/steps/ReviewSessionStep.tsx
@@ -1,13 +1,13 @@
-import { Button, Stack, Text, Group, Divider, TextInput } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
-import PeopleIcon from '@mui/icons-material/People';
-import DrawIcon from '@mui/icons-material/Draw';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import SendIcon from '@mui/icons-material/Send';
-import CalendarTodayIcon from '@mui/icons-material/CalendarToday';
-import type { SignatureSettings } from '@app/components/tools/certSign/SignatureSettingsInput';
-import type { FileState } from '@app/types/file';
+import { Button, Stack, Text, Group, Divider, TextInput } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
+import PeopleIcon from "@mui/icons-material/People";
+import DrawIcon from "@mui/icons-material/Draw";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import SendIcon from "@mui/icons-material/Send";
+import CalendarTodayIcon from "@mui/icons-material/CalendarToday";
+import type { SignatureSettings } from "@app/components/tools/certSign/SignatureSettingsInput";
+import type { FileState } from "@app/types/file";
 
 interface ReviewSessionStepProps {
   selectedFile: FileState;
@@ -35,23 +35,23 @@ export const ReviewSessionStep: React.FC<ReviewSessionStepProps> = ({
   return (
     <Stack gap="md">
       <Text size="sm" fw={600} c="dimmed">
-        {t('groupSigning.steps.review.title', 'Review Session Details')}
+        {t("groupSigning.steps.review.title", "Review Session Details")}
       </Text>
 
       {/* Document Info */}
       <div>
         <Group gap="xs" mb="xs">
-          <PictureAsPdfIcon sx={{ fontSize: 18, color: 'var(--mantine-color-red-6)' }} />
+          <PictureAsPdfIcon sx={{ fontSize: 18, color: "var(--mantine-color-red-6)" }} />
           <Text size="sm" fw={600}>
-            {t('groupSigning.steps.review.document', 'Document')}
+            {t("groupSigning.steps.review.document", "Document")}
           </Text>
         </Group>
         <div
           style={{
-            padding: '12px',
-            border: '1px solid var(--mantine-color-default-border)',
-            borderRadius: 'var(--mantine-radius-default)',
-            backgroundColor: 'var(--mantine-color-default-hover)',
+            padding: "12px",
+            border: "1px solid var(--mantine-color-default-border)",
+            borderRadius: "var(--mantine-radius-default)",
+            backgroundColor: "var(--mantine-color-default-hover)",
           }}
         >
           <Text size="sm">{selectedFile.name}</Text>
@@ -70,13 +70,13 @@ export const ReviewSessionStep: React.FC<ReviewSessionStepProps> = ({
         <Group gap="xs" mb="xs">
           <PeopleIcon sx={{ fontSize: 18 }} />
           <Text size="sm" fw={600}>
-            {t('groupSigning.steps.review.participants', 'Participants')}
+            {t("groupSigning.steps.review.participants", "Participants")}
           </Text>
         </Group>
         <Text size="sm">
-          {t('groupSigning.steps.review.participantCount', {
+          {t("groupSigning.steps.review.participantCount", {
             count: participantCount,
-            defaultValue: '{{count}} participant(s) will sign in order',
+            defaultValue: "{{count}} participant(s) will sign in order",
           })}
         </Text>
       </div>
@@ -88,34 +88,34 @@ export const ReviewSessionStep: React.FC<ReviewSessionStepProps> = ({
         <Group gap="xs" mb="xs">
           <DrawIcon sx={{ fontSize: 18 }} />
           <Text size="sm" fw={600}>
-            {t('groupSigning.steps.review.signatureSettings', 'Signature Settings')}
+            {t("groupSigning.steps.review.signatureSettings", "Signature Settings")}
           </Text>
         </Group>
         <Stack gap="xs">
           <Text size="sm">
-            <strong>{t('groupSigning.steps.review.visibility', 'Visibility:')}</strong>{' '}
+            <strong>{t("groupSigning.steps.review.visibility", "Visibility:")}</strong>{" "}
             {signatureSettings.showSignature
-              ? t('groupSigning.steps.review.visible', 'Visible on page {{page}}', {
+              ? t("groupSigning.steps.review.visible", "Visible on page {{page}}", {
                   page: signatureSettings.pageNumber || 1,
                 })
-              : t('groupSigning.steps.review.invisible', 'Invisible (metadata only)')}
+              : t("groupSigning.steps.review.invisible", "Invisible (metadata only)")}
           </Text>
           {signatureSettings.showSignature && signatureSettings.reason && (
             <Text size="sm">
-              <strong>{t('groupSigning.steps.review.reason', 'Reason:')}</strong> {signatureSettings.reason}
+              <strong>{t("groupSigning.steps.review.reason", "Reason:")}</strong> {signatureSettings.reason}
             </Text>
           )}
           {signatureSettings.showSignature && signatureSettings.location && (
             <Text size="sm">
-              <strong>{t('groupSigning.steps.review.location', 'Location:')}</strong> {signatureSettings.location}
+              <strong>{t("groupSigning.steps.review.location", "Location:")}</strong> {signatureSettings.location}
             </Text>
           )}
           {signatureSettings.showSignature && (
             <Text size="sm">
-              <strong>{t('groupSigning.steps.review.logo', 'Logo:')}</strong>{' '}
+              <strong>{t("groupSigning.steps.review.logo", "Logo:")}</strong>{" "}
               {signatureSettings.showLogo
-                ? t('groupSigning.steps.review.logoShown', 'Stirling PDF logo shown')
-                : t('groupSigning.steps.review.logoHidden', 'No logo')}
+                ? t("groupSigning.steps.review.logoShown", "Stirling PDF logo shown")
+                : t("groupSigning.steps.review.logoHidden", "No logo")}
             </Text>
           )}
         </Stack>
@@ -128,7 +128,7 @@ export const ReviewSessionStep: React.FC<ReviewSessionStepProps> = ({
         <Group gap="xs" mb="xs">
           <CalendarTodayIcon sx={{ fontSize: 18 }} />
           <Text size="sm" fw={600}>
-            {t('groupSigning.steps.review.dueDate', 'Due Date (Optional)')}
+            {t("groupSigning.steps.review.dueDate", "Due Date (Optional)")}
           </Text>
         </Group>
         <TextInput
@@ -136,13 +136,13 @@ export const ReviewSessionStep: React.FC<ReviewSessionStepProps> = ({
           value={dueDate}
           onChange={(e) => onDueDateChange(e.target.value)}
           disabled={disabled}
-          placeholder={t('groupSigning.steps.review.dueDatePlaceholder', 'Select due date...')}
+          placeholder={t("groupSigning.steps.review.dueDatePlaceholder", "Select due date...")}
         />
       </div>
 
       <Group gap="sm" mt="md">
         <Button variant="default" onClick={onBack} leftSection={<ArrowBackIcon sx={{ fontSize: 16 }} />}>
-          {t('groupSigning.steps.back', 'Back')}
+          {t("groupSigning.steps.back", "Back")}
         </Button>
         <Button
           onClick={onSubmit}
@@ -151,7 +151,7 @@ export const ReviewSessionStep: React.FC<ReviewSessionStepProps> = ({
           leftSection={<SendIcon sx={{ fontSize: 16 }} />}
           color="green"
         >
-          {t('groupSigning.steps.review.send', 'Send Signing Requests')}
+          {t("groupSigning.steps.review.send", "Send Signing Requests")}
         </Button>
       </Group>
     </Stack>
diff --git a/frontend/src/core/components/shared/signing/steps/SelectDocumentStep.tsx b/frontend/src/core/components/shared/signing/steps/SelectDocumentStep.tsx
index 508ef659bb..82f269ff8d 100644
--- a/frontend/src/core/components/shared/signing/steps/SelectDocumentStep.tsx
+++ b/frontend/src/core/components/shared/signing/steps/SelectDocumentStep.tsx
@@ -1,17 +1,14 @@
-import { Button, Stack, Text } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
-import type { FileState } from '@app/types/file';
+import { Button, Stack, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
+import type { FileState } from "@app/types/file";
 
 interface SelectDocumentStepProps {
   selectedFiles: FileState[];
   onNext: () => void;
 }
 
-export const SelectDocumentStep: React.FC<SelectDocumentStepProps> = ({
-  selectedFiles,
-  onNext,
-}) => {
+export const SelectDocumentStep: React.FC<SelectDocumentStepProps> = ({ selectedFiles, onNext }) => {
   const { t } = useTranslation();
 
   const hasValidFile = selectedFiles.length === 1;
@@ -22,28 +19,28 @@ export const SelectDocumentStep: React.FC<SelectDocumentStepProps> = ({
       {!hasValidFile ? (
         <Text size="sm" c="dimmed" ta="center">
           {t(
-            'groupSigning.steps.selectDocument.noFile',
-            'Please select a single PDF file from your active files to create a signing session.'
+            "groupSigning.steps.selectDocument.noFile",
+            "Please select a single PDF file from your active files to create a signing session.",
           )}
         </Text>
       ) : (
         <>
           <div>
             <Text size="sm" c="dimmed" mb="xs">
-              {t('groupSigning.steps.selectDocument.selectedFile', 'Selected document')}
+              {t("groupSigning.steps.selectDocument.selectedFile", "Selected document")}
             </Text>
             <div
               style={{
-                display: 'flex',
-                alignItems: 'center',
-                gap: '12px',
-                padding: '12px',
-                border: '1px solid var(--mantine-color-default-border)',
-                borderRadius: 'var(--mantine-radius-default)',
-                backgroundColor: 'var(--mantine-color-default-hover)',
+                display: "flex",
+                alignItems: "center",
+                gap: "12px",
+                padding: "12px",
+                border: "1px solid var(--mantine-color-default-border)",
+                borderRadius: "var(--mantine-radius-default)",
+                backgroundColor: "var(--mantine-color-default-hover)",
               }}
             >
-              <PictureAsPdfIcon sx={{ fontSize: 32, color: 'var(--mantine-color-red-6)' }} />
+              <PictureAsPdfIcon sx={{ fontSize: 32, color: "var(--mantine-color-red-6)" }} />
               <div style={{ flex: 1 }}>
                 <Text size="sm" fw={600}>
                   {selectedFile?.name}
@@ -58,7 +55,7 @@ export const SelectDocumentStep: React.FC<SelectDocumentStepProps> = ({
           </div>
 
           <Button onClick={onNext} fullWidth>
-            {t('groupSigning.steps.selectDocument.continue', 'Continue to Participant Selection')}
+            {t("groupSigning.steps.selectDocument.continue", "Continue to Participant Selection")}
           </Button>
         </>
       )}
diff --git a/frontend/src/core/components/shared/signing/steps/SelectParticipantsStep.tsx b/frontend/src/core/components/shared/signing/steps/SelectParticipantsStep.tsx
index 04af1ffe7c..650cf7e53f 100644
--- a/frontend/src/core/components/shared/signing/steps/SelectParticipantsStep.tsx
+++ b/frontend/src/core/components/shared/signing/steps/SelectParticipantsStep.tsx
@@ -1,7 +1,7 @@
-import { Button, Stack, Text, Group } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import UserSelector from '@app/components/shared/UserSelector';
+import { Button, Stack, Text, Group } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import UserSelector from "@app/components/shared/UserSelector";
 
 interface SelectParticipantsStepProps {
   selectedUserIds: number[];
@@ -26,34 +26,31 @@ export const SelectParticipantsStep: React.FC<SelectParticipantsStepProps> = ({
     <Stack gap="md">
       <div>
         <Text size="sm" c="dimmed" mb="xs">
-          {t('groupSigning.steps.selectParticipants.label', 'Select participants')}
+          {t("groupSigning.steps.selectParticipants.label", "Select participants")}
         </Text>
         <UserSelector
           value={selectedUserIds}
           onChange={onSelectedUserIdsChange}
-          placeholder={t(
-            'groupSigning.steps.selectParticipants.placeholder',
-            'Choose participants to sign...'
-          )}
+          placeholder={t("groupSigning.steps.selectParticipants.placeholder", "Choose participants to sign...")}
           disabled={disabled}
         />
       </div>
 
       {selectedUserIds.length > 0 && (
         <Text size="xs" c="dimmed">
-          {t('groupSigning.steps.selectParticipants.count', {
+          {t("groupSigning.steps.selectParticipants.count", {
             count: selectedUserIds.length,
-            defaultValue: '{{count}} participant(s) selected',
+            defaultValue: "{{count}} participant(s) selected",
           })}
         </Text>
       )}
 
       <Group gap="sm">
         <Button variant="default" onClick={onBack} leftSection={<ArrowBackIcon sx={{ fontSize: 16 }} />}>
-          {t('groupSigning.steps.back', 'Back')}
+          {t("groupSigning.steps.back", "Back")}
         </Button>
         <Button onClick={onNext} disabled={!hasParticipants || disabled} style={{ flex: 1 }}>
-          {t('groupSigning.steps.selectParticipants.continue', 'Continue to Signature Settings')}
+          {t("groupSigning.steps.selectParticipants.continue", "Continue to Signature Settings")}
         </Button>
       </Group>
     </Stack>
diff --git a/frontend/src/core/components/shared/sliderWithInput/SliderWithInput.tsx b/frontend/src/core/components/shared/sliderWithInput/SliderWithInput.tsx
index 85e7039e29..c09699eb94 100644
--- a/frontend/src/core/components/shared/sliderWithInput/SliderWithInput.tsx
+++ b/frontend/src/core/components/shared/sliderWithInput/SliderWithInput.tsx
@@ -1,4 +1,4 @@
-import { Slider, Text, Group, NumberInput } from '@mantine/core';
+import { Slider, Text, Group, NumberInput } from "@mantine/core";
 
 interface Props {
   label: string;
@@ -19,11 +19,13 @@ export default function SliderWithInput({
   min = 0,
   max = 200,
   step = 1,
-  suffix = '%',
+  suffix = "%",
 }: Props) {
   return (
     <div>
-      <Text size="sm" fw={500} mb={8}>{label}</Text>
+      <Text size="sm" fw={500} mb={8}>
+        {label}
+      </Text>
       <Group gap="md" align="center">
         <div style={{ flex: 1 }}>
           <Slider min={min} max={max} step={step} value={value} onChange={onChange} disabled={disabled} />
@@ -42,5 +44,3 @@ export default function SliderWithInput({
     </div>
   );
 }
-
-
diff --git a/frontend/src/core/components/shared/tooltip/Tooltip.module.css b/frontend/src/core/components/shared/tooltip/Tooltip.module.css
index 9d3bdb80a6..a9f9e7e8ef 100644
--- a/frontend/src/core/components/shared/tooltip/Tooltip.module.css
+++ b/frontend/src/core/components/shared/tooltip/Tooltip.module.css
@@ -4,12 +4,16 @@
   border: 0.0625rem solid var(--border-default);
   border-radius: 0.75rem;
   background-color: var(--bg-raised);
-  box-shadow: 0 0.625rem 0.9375rem -0.1875rem rgba(0, 0, 0, 0.1), 0 0.25rem 0.375rem -0.125rem rgba(0, 0, 0, 0.05);
+  box-shadow:
+    0 0.625rem 0.9375rem -0.1875rem rgba(0, 0, 0, 0.1),
+    0 0.25rem 0.375rem -0.125rem rgba(0, 0, 0, 0.05);
   font-size: 0.875rem;
   line-height: 1.5;
   pointer-events: auto;
   z-index: 9999;
-  transition: opacity 100ms ease-out, transform 100ms ease-out;
+  transition:
+    opacity 100ms ease-out,
+    transform 100ms ease-out;
   max-width: 50vh;
   max-height: 80vh;
   color: var(--text-primary);
@@ -20,7 +24,10 @@
 /* Pinned tooltip indicator */
 .tooltip-container.pinned {
   border-color: var(--primary-color, #3b82f6);
-  box-shadow: 0 0.625rem 0.9375rem -0.1875rem rgba(0, 0, 0, 0.1), 0 0.25rem 0.375rem -0.125rem rgba(0, 0, 0, 0.05), 0 0 0 0.125rem rgba(59, 130, 246, 0.1);
+  box-shadow:
+    0 0.625rem 0.9375rem -0.1875rem rgba(0, 0, 0, 0.1),
+    0 0.25rem 0.375rem -0.125rem rgba(0, 0, 0, 0.05),
+    0 0 0 0.125rem rgba(59, 130, 246, 0.1);
 }
 
 /* Pinned tooltip header */
@@ -41,7 +48,9 @@
   border-radius: 0.25rem;
   border: 0.0625rem solid var(--border-default);
   cursor: pointer;
-  transition: background-color 0.2s ease, border-color 0.2s ease;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease;
   z-index: 1;
   display: flex;
   align-items: center;
@@ -116,7 +125,9 @@
   color: var(--link-color, #3b82f6) !important;
   text-decoration: underline;
   text-decoration-color: var(--link-underline-color, rgba(59, 130, 246, 0.3));
-  transition: color 0.2s ease, text-decoration-color 0.2s ease;
+  transition:
+    color 0.2s ease,
+    text-decoration-color 0.2s ease;
 }
 
 .tooltip-body a:hover {
@@ -144,7 +155,6 @@
   text-decoration-color: var(--link-hover-underline-color, rgba(37, 99, 235, 0.5));
 }
 
-
 /* Tooltip Arrows */
 .tooltip-arrow {
   position: absolute;
@@ -155,7 +165,6 @@
   transform: rotate(45deg);
 }
 
-
 .tooltip-arrow-sidebar {
   top: 50%;
   left: -0.25rem;
@@ -194,4 +203,4 @@
   transform: translateY(-50%) rotate(45deg);
   border-right: none;
   border-top: none;
-} 
\ No newline at end of file
+}
diff --git a/frontend/src/core/components/shared/tooltip/TooltipContent.tsx b/frontend/src/core/components/shared/tooltip/TooltipContent.tsx
index 42ee19af36..daf3b4f91a 100644
--- a/frontend/src/core/components/shared/tooltip/TooltipContent.tsx
+++ b/frontend/src/core/components/shared/tooltip/TooltipContent.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import styles from '@app/components/shared/tooltip/Tooltip.module.css';
-import { TooltipTip } from '@app/types/tips';
+import React from "react";
+import styles from "@app/components/shared/tooltip/Tooltip.module.css";
+import { TooltipTip } from "@app/types/tips";
 
 interface TooltipContentProps {
   content?: React.ReactNode;
@@ -8,62 +8,55 @@ interface TooltipContentProps {
   extraRightPadding?: number;
 }
 
-export const TooltipContent: React.FC<TooltipContentProps> = ({
-  content,
-  tips,
-  extraRightPadding = 0,
-}) => {
+export const TooltipContent: React.FC<TooltipContentProps> = ({ content, tips, extraRightPadding = 0 }) => {
   return (
     <div
-      className={`${styles['tooltip-body']}`}
+      className={`${styles["tooltip-body"]}`}
       style={{
-        color: 'var(--text-primary)',
+        color: "var(--text-primary)",
         padding: `16px ${16 + extraRightPadding}px 16px 16px`,
-        fontSize: '14px',
-        lineHeight: '1.6'
+        fontSize: "14px",
+        lineHeight: "1.6",
       }}
     >
-      <div style={{ color: 'var(--text-primary)' }}>
+      <div style={{ color: "var(--text-primary)" }}>
         {tips ? (
           <>
             {tips.map((tip, index) => (
-              <div key={index} style={{ marginBottom: index < tips.length - 1 ? '24px' : '0' }}>
+              <div key={index} style={{ marginBottom: index < tips.length - 1 ? "24px" : "0" }}>
                 {tip.title && (
-                  <div style={{
-                    display: 'inline-block',
-                    backgroundColor: 'var(--tooltip-title-bg)',
-                    color: 'var(--tooltip-title-color)',
-                    padding: '6px 12px',
-                    borderRadius: '16px',
-                    fontSize: '12px',
-                    fontWeight: '600',
-                    marginBottom: '12px'
-                  }}>
+                  <div
+                    style={{
+                      display: "inline-block",
+                      backgroundColor: "var(--tooltip-title-bg)",
+                      color: "var(--tooltip-title-color)",
+                      padding: "6px 12px",
+                      borderRadius: "16px",
+                      fontSize: "12px",
+                      fontWeight: "600",
+                      marginBottom: "12px",
+                    }}
+                  >
                     {tip.title}
                   </div>
                 )}
                 {tip.description && (
-                  <p style={{ margin: '0 0 12px 0', color: 'var(--text-secondary)', fontSize: '13px' }} dangerouslySetInnerHTML={{ __html: tip.description }} />
+                  <p
+                    style={{ margin: "0 0 12px 0", color: "var(--text-secondary)", fontSize: "13px" }}
+                    dangerouslySetInnerHTML={{ __html: tip.description }}
+                  />
                 )}
                 {tip.bullets && tip.bullets.length > 0 && (
-                  <ul style={{ margin: '0', paddingLeft: '16px', color: 'var(--text-secondary)', fontSize: '13px' }}>
+                  <ul style={{ margin: "0", paddingLeft: "16px", color: "var(--text-secondary)", fontSize: "13px" }}>
                     {tip.bullets.map((bullet, bulletIndex) => (
-                      <li key={bulletIndex} style={{ marginBottom: '6px' }} dangerouslySetInnerHTML={{ __html: bullet }} />
+                      <li key={bulletIndex} style={{ marginBottom: "6px" }} dangerouslySetInnerHTML={{ __html: bullet }} />
                     ))}
                   </ul>
                 )}
-                {tip.body && (
-                  <div style={{ marginTop: '12px' }}>
-                    {tip.body}
-                  </div>
-                )}
+                {tip.body && <div style={{ marginTop: "12px" }}>{tip.body}</div>}
               </div>
             ))}
-            {content && (
-              <div style={{ marginTop: '24px' }}>
-                {content}
-              </div>
-            )}
+            {content && <div style={{ marginTop: "24px" }}>{content}</div>}
           </>
         ) : (
           content
@@ -71,4 +64,4 @@ export const TooltipContent: React.FC<TooltipContentProps> = ({
       </div>
     </div>
   );
-}; 
\ No newline at end of file
+};
diff --git a/frontend/src/core/components/shared/wetSignature/DrawSignatureCanvas.tsx b/frontend/src/core/components/shared/wetSignature/DrawSignatureCanvas.tsx
index a3d23d3af5..4b2b4ce420 100644
--- a/frontend/src/core/components/shared/wetSignature/DrawSignatureCanvas.tsx
+++ b/frontend/src/core/components/shared/wetSignature/DrawSignatureCanvas.tsx
@@ -1,7 +1,7 @@
-import { useRef, useEffect, useState } from 'react';
-import { Stack, Button, Group, ColorPicker, Slider, Text } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import DeleteIcon from '@mui/icons-material/Delete';
+import { useRef, useEffect, useState } from "react";
+import { Stack, Button, Group, ColorPicker, Slider, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import DeleteIcon from "@mui/icons-material/Delete";
 
 interface DrawSignatureCanvasProps {
   signature: string | null;
@@ -9,21 +9,17 @@ interface DrawSignatureCanvasProps {
   disabled?: boolean;
 }
 
-export const DrawSignatureCanvas: React.FC<DrawSignatureCanvasProps> = ({
-  signature,
-  onChange,
-  disabled = false,
-}) => {
+export const DrawSignatureCanvas: React.FC<DrawSignatureCanvasProps> = ({ signature, onChange, disabled = false }) => {
   const { t } = useTranslation();
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const [isDrawing, setIsDrawing] = useState(false);
-  const [penColor, setPenColor] = useState('#000000');
+  const [penColor, setPenColor] = useState("#000000");
   const [penSize, setPenSize] = useState(2);
 
   useEffect(() => {
     if (!canvasRef.current) return;
     const canvas = canvasRef.current;
-    const ctx = canvas.getContext('2d');
+    const ctx = canvas.getContext("2d");
     if (!ctx) return;
 
     // Clear canvas
@@ -48,7 +44,7 @@ export const DrawSignatureCanvas: React.FC<DrawSignatureCanvasProps> = ({
     const x = e.clientX - rect.left;
     const y = e.clientY - rect.top;
 
-    const ctx = canvas.getContext('2d');
+    const ctx = canvas.getContext("2d");
     if (!ctx) return;
     ctx.beginPath();
     ctx.moveTo(x, y);
@@ -62,12 +58,12 @@ export const DrawSignatureCanvas: React.FC<DrawSignatureCanvasProps> = ({
     const x = e.clientX - rect.left;
     const y = e.clientY - rect.top;
 
-    const ctx = canvas.getContext('2d');
+    const ctx = canvas.getContext("2d");
     if (!ctx) return;
     ctx.lineTo(x, y);
     ctx.strokeStyle = penColor;
     ctx.lineWidth = penSize;
-    ctx.lineCap = 'round';
+    ctx.lineCap = "round";
     ctx.stroke();
   };
 
@@ -78,14 +74,14 @@ export const DrawSignatureCanvas: React.FC<DrawSignatureCanvasProps> = ({
     if (!canvas) return;
 
     // Convert canvas to base64 and save
-    const dataUrl = canvas.toDataURL('image/png');
+    const dataUrl = canvas.toDataURL("image/png");
     onChange(dataUrl);
   };
 
   const clearCanvas = () => {
     const canvas = canvasRef.current;
     if (!canvas) return;
-    const ctx = canvas.getContext('2d');
+    const ctx = canvas.getContext("2d");
     if (!ctx) return;
     ctx.clearRect(0, 0, canvas.width, canvas.height);
     onChange(null);
@@ -94,7 +90,7 @@ export const DrawSignatureCanvas: React.FC<DrawSignatureCanvasProps> = ({
   return (
     <Stack gap="sm">
       <Text size="sm" c="dimmed">
-        {t('certSign.collab.signRequest.drawSignature', 'Draw your signature below')}
+        {t("certSign.collab.signRequest.drawSignature", "Draw your signature below")}
       </Text>
 
       <canvas
@@ -106,30 +102,25 @@ export const DrawSignatureCanvas: React.FC<DrawSignatureCanvasProps> = ({
         onMouseUp={stopDrawing}
         onMouseLeave={stopDrawing}
         style={{
-          border: '1px solid var(--mantine-color-default-border)',
-          borderRadius: 'var(--mantine-radius-default)',
-          cursor: disabled ? 'not-allowed' : 'crosshair',
-          width: '100%',
-          maxWidth: '400px',
-          backgroundColor: 'white',
+          border: "1px solid var(--mantine-color-default-border)",
+          borderRadius: "var(--mantine-radius-default)",
+          cursor: disabled ? "not-allowed" : "crosshair",
+          width: "100%",
+          maxWidth: "400px",
+          backgroundColor: "white",
         }}
       />
 
       <Group gap="sm">
         <div style={{ flex: 1 }}>
           <Text size="xs" mb={4}>
-            {t('certSign.collab.signRequest.penColor', 'Pen Color')}
+            {t("certSign.collab.signRequest.penColor", "Pen Color")}
           </Text>
-          <ColorPicker
-            value={penColor}
-            onChange={setPenColor}
-            format="hex"
-            size="xs"
-          />
+          <ColorPicker value={penColor} onChange={setPenColor} format="hex" size="xs" />
         </div>
         <div style={{ flex: 2 }}>
           <Text size="xs" mb={4}>
-            {t('certSign.collab.signRequest.penSize', 'Pen Size: {{size}}px', { size: penSize })}
+            {t("certSign.collab.signRequest.penSize", "Pen Size: {{size}}px", { size: penSize })}
           </Text>
           <Slider
             value={penSize}
@@ -139,9 +130,9 @@ export const DrawSignatureCanvas: React.FC<DrawSignatureCanvasProps> = ({
             step={1}
             disabled={disabled}
             marks={[
-              { value: 1, label: '1' },
-              { value: 5, label: '5' },
-              { value: 10, label: '10' },
+              { value: 1, label: "1" },
+              { value: 5, label: "5" },
+              { value: 10, label: "10" },
             ]}
           />
         </div>
@@ -155,7 +146,7 @@ export const DrawSignatureCanvas: React.FC<DrawSignatureCanvasProps> = ({
         disabled={disabled || !signature}
         fullWidth
       >
-        {t('certSign.collab.signRequest.clearSignature', 'Clear Signature')}
+        {t("certSign.collab.signRequest.clearSignature", "Clear Signature")}
       </Button>
     </Stack>
   );
diff --git a/frontend/src/core/components/shared/wetSignature/SignatureTypeSelector.tsx b/frontend/src/core/components/shared/wetSignature/SignatureTypeSelector.tsx
index fa9ddb2ced..0baa778f8f 100644
--- a/frontend/src/core/components/shared/wetSignature/SignatureTypeSelector.tsx
+++ b/frontend/src/core/components/shared/wetSignature/SignatureTypeSelector.tsx
@@ -1,7 +1,7 @@
-import { SegmentedControl } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
+import { SegmentedControl } from "@mantine/core";
+import { useTranslation } from "react-i18next";
 
-export type SignatureType = 'draw' | 'upload' | 'type';
+export type SignatureType = "draw" | "upload" | "type";
 
 interface SignatureTypeSelectorProps {
   value: SignatureType;
@@ -9,11 +9,7 @@ interface SignatureTypeSelectorProps {
   disabled?: boolean;
 }
 
-export const SignatureTypeSelector: React.FC<SignatureTypeSelectorProps> = ({
-  value,
-  onChange,
-  disabled = false,
-}) => {
+export const SignatureTypeSelector: React.FC<SignatureTypeSelectorProps> = ({ value, onChange, disabled = false }) => {
   const { t } = useTranslation();
 
   return (
@@ -23,16 +19,16 @@ export const SignatureTypeSelector: React.FC<SignatureTypeSelectorProps> = ({
       disabled={disabled}
       data={[
         {
-          value: 'draw',
-          label: t('certSign.collab.signRequest.signatureType.draw', 'Draw'),
+          value: "draw",
+          label: t("certSign.collab.signRequest.signatureType.draw", "Draw"),
         },
         {
-          value: 'upload',
-          label: t('certSign.collab.signRequest.signatureType.upload', 'Upload'),
+          value: "upload",
+          label: t("certSign.collab.signRequest.signatureType.upload", "Upload"),
         },
         {
-          value: 'type',
-          label: t('certSign.collab.signRequest.signatureType.type', 'Type'),
+          value: "type",
+          label: t("certSign.collab.signRequest.signatureType.type", "Type"),
         },
       ]}
       fullWidth
diff --git a/frontend/src/core/components/shared/wetSignature/TypeSignatureText.tsx b/frontend/src/core/components/shared/wetSignature/TypeSignatureText.tsx
index c6b3c9246a..0ae90cbf8f 100644
--- a/frontend/src/core/components/shared/wetSignature/TypeSignatureText.tsx
+++ b/frontend/src/core/components/shared/wetSignature/TypeSignatureText.tsx
@@ -1,6 +1,6 @@
-import { Stack, TextInput, Select, ColorPicker, Slider, Text } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { useEffect, useRef } from 'react';
+import { Stack, TextInput, Select, ColorPicker, Slider, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { useEffect, useRef } from "react";
 
 interface TypeSignatureTextProps {
   text: string;
@@ -38,7 +38,7 @@ export const TypeSignatureText: React.FC<TypeSignatureTextProps> = ({
     }
 
     const canvas = canvasRef.current;
-    const ctx = canvas.getContext('2d');
+    const ctx = canvas.getContext("2d");
     if (!ctx) return;
 
     // Clear canvas
@@ -52,40 +52,40 @@ export const TypeSignatureText: React.FC<TypeSignatureTextProps> = ({
 
     // Center text on canvas
     ctx.fillStyle = color;
-    ctx.textBaseline = 'middle';
+    ctx.textBaseline = "middle";
     ctx.fillText(text, (canvas.width - textWidth) / 2, canvas.height / 2);
 
     // Convert to base64
-    const dataUrl = canvas.toDataURL('image/png');
+    const dataUrl = canvas.toDataURL("image/png");
     onSignatureChange(dataUrl);
   }, [text, fontFamily, fontSize, color, onSignatureChange]);
 
   const fontOptions = [
-    { value: 'Arial', label: 'Arial' },
-    { value: 'Times New Roman', label: 'Times New Roman' },
-    { value: 'Courier New', label: 'Courier New' },
-    { value: 'Georgia', label: 'Georgia' },
-    { value: 'Verdana', label: 'Verdana' },
-    { value: 'Comic Sans MS', label: 'Comic Sans MS' },
-    { value: 'Brush Script MT', label: 'Brush Script MT (cursive)' },
+    { value: "Arial", label: "Arial" },
+    { value: "Times New Roman", label: "Times New Roman" },
+    { value: "Courier New", label: "Courier New" },
+    { value: "Georgia", label: "Georgia" },
+    { value: "Verdana", label: "Verdana" },
+    { value: "Comic Sans MS", label: "Comic Sans MS" },
+    { value: "Brush Script MT", label: "Brush Script MT (cursive)" },
   ];
 
   return (
     <Stack gap="sm">
       <Text size="sm" c="dimmed">
-        {t('certSign.collab.signRequest.typeSignature', 'Type your name to create a signature')}
+        {t("certSign.collab.signRequest.typeSignature", "Type your name to create a signature")}
       </Text>
 
       <TextInput
-        label={t('certSign.collab.signRequest.signatureText', 'Signature Text')}
-        placeholder={t('certSign.collab.signRequest.signatureTextPlaceholder', 'Enter your name...')}
+        label={t("certSign.collab.signRequest.signatureText", "Signature Text")}
+        placeholder={t("certSign.collab.signRequest.signatureTextPlaceholder", "Enter your name...")}
         value={text}
         onChange={(e) => onTextChange(e.target.value)}
         disabled={disabled}
       />
 
       <Select
-        label={t('certSign.collab.signRequest.fontFamily', 'Font Family')}
+        label={t("certSign.collab.signRequest.fontFamily", "Font Family")}
         value={fontFamily}
         onChange={(val) => val && onFontFamilyChange(val)}
         data={fontOptions}
@@ -94,7 +94,7 @@ export const TypeSignatureText: React.FC<TypeSignatureTextProps> = ({
 
       <div>
         <Text size="sm" mb={4}>
-          {t('certSign.collab.signRequest.fontSize', 'Font Size: {{size}}px', { size: fontSize })}
+          {t("certSign.collab.signRequest.fontSize", "Font Size: {{size}}px", { size: fontSize })}
         </Text>
         <Slider
           value={fontSize}
@@ -104,36 +104,32 @@ export const TypeSignatureText: React.FC<TypeSignatureTextProps> = ({
           step={2}
           disabled={disabled}
           marks={[
-            { value: 20, label: '20' },
-            { value: 50, label: '50' },
-            { value: 80, label: '80' },
+            { value: 20, label: "20" },
+            { value: 50, label: "50" },
+            { value: 80, label: "80" },
           ]}
         />
       </div>
 
       <div>
         <Text size="sm" mb={4}>
-          {t('certSign.collab.signRequest.textColor', 'Text Color')}
+          {t("certSign.collab.signRequest.textColor", "Text Color")}
         </Text>
-        <ColorPicker
-          value={color}
-          onChange={onColorChange}
-          format="hex"
-        />
+        <ColorPicker value={color} onChange={onColorChange} format="hex" />
       </div>
 
       {/* Preview */}
       {text && (
         <div
           style={{
-            border: '1px solid var(--mantine-color-default-border)',
-            borderRadius: 'var(--mantine-radius-default)',
-            padding: '16px',
-            backgroundColor: 'white',
-            minHeight: '100px',
-            display: 'flex',
-            justifyContent: 'center',
-            alignItems: 'center',
+            border: "1px solid var(--mantine-color-default-border)",
+            borderRadius: "var(--mantine-radius-default)",
+            padding: "16px",
+            backgroundColor: "white",
+            minHeight: "100px",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
           }}
         >
           <Text
@@ -149,12 +145,7 @@ export const TypeSignatureText: React.FC<TypeSignatureTextProps> = ({
       )}
 
       {/* Hidden canvas for image generation */}
-      <canvas
-        ref={canvasRef}
-        width={400}
-        height={150}
-        style={{ display: 'none' }}
-      />
+      <canvas ref={canvasRef} width={400} height={150} style={{ display: "none" }} />
     </Stack>
   );
 };
diff --git a/frontend/src/core/components/shared/wetSignature/UploadSignatureImage.tsx b/frontend/src/core/components/shared/wetSignature/UploadSignatureImage.tsx
index ff593042a1..e9ed17efa4 100644
--- a/frontend/src/core/components/shared/wetSignature/UploadSignatureImage.tsx
+++ b/frontend/src/core/components/shared/wetSignature/UploadSignatureImage.tsx
@@ -1,8 +1,8 @@
-import { useState, useRef } from 'react';
-import { Stack, Button, Text, Image } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import UploadFileIcon from '@mui/icons-material/UploadFile';
-import DeleteIcon from '@mui/icons-material/Delete';
+import { useState, useRef } from "react";
+import { Stack, Button, Text, Image } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import UploadFileIcon from "@mui/icons-material/UploadFile";
+import DeleteIcon from "@mui/icons-material/Delete";
 
 interface UploadSignatureImageProps {
   signature: string | null;
@@ -10,11 +10,7 @@ interface UploadSignatureImageProps {
   disabled?: boolean;
 }
 
-export const UploadSignatureImage: React.FC<UploadSignatureImageProps> = ({
-  signature,
-  onChange,
-  disabled = false,
-}) => {
+export const UploadSignatureImage: React.FC<UploadSignatureImageProps> = ({ signature, onChange, disabled = false }) => {
   const { t } = useTranslation();
   const fileInputRef = useRef<HTMLInputElement>(null);
   const [error, setError] = useState<string | null>(null);
@@ -24,14 +20,14 @@ export const UploadSignatureImage: React.FC<UploadSignatureImageProps> = ({
     if (!file) return;
 
     // Validate file type
-    if (!file.type.startsWith('image/')) {
-      setError(t('certSign.collab.signRequest.invalidFileType', 'Please select an image file'));
+    if (!file.type.startsWith("image/")) {
+      setError(t("certSign.collab.signRequest.invalidFileType", "Please select an image file"));
       return;
     }
 
     // Validate file size (max 5MB)
     if (file.size > 5 * 1024 * 1024) {
-      setError(t('certSign.collab.signRequest.fileTooLarge', 'File size must be less than 5MB'));
+      setError(t("certSign.collab.signRequest.fileTooLarge", "File size must be less than 5MB"));
       return;
     }
 
@@ -54,36 +50,31 @@ export const UploadSignatureImage: React.FC<UploadSignatureImageProps> = ({
     onChange(null);
     setError(null);
     if (fileInputRef.current) {
-      fileInputRef.current.value = '';
+      fileInputRef.current.value = "";
     }
   };
 
   return (
     <Stack gap="sm">
       <Text size="sm" c="dimmed">
-        {t('certSign.collab.signRequest.uploadSignature', 'Upload your signature image')}
+        {t("certSign.collab.signRequest.uploadSignature", "Upload your signature image")}
       </Text>
 
       {signature ? (
         <Stack gap="sm">
           <div
             style={{
-              border: '1px solid var(--mantine-color-default-border)',
-              borderRadius: 'var(--mantine-radius-default)',
-              padding: '16px',
-              backgroundColor: 'var(--mantine-color-default-hover)',
-              display: 'flex',
-              justifyContent: 'center',
-              alignItems: 'center',
-              minHeight: '150px',
+              border: "1px solid var(--mantine-color-default-border)",
+              borderRadius: "var(--mantine-radius-default)",
+              padding: "16px",
+              backgroundColor: "var(--mantine-color-default-hover)",
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              minHeight: "150px",
             }}
           >
-            <Image
-              src={signature}
-              alt="Signature"
-              fit="contain"
-              style={{ maxHeight: '150px', maxWidth: '100%' }}
-            />
+            <Image src={signature} alt="Signature" fit="contain" style={{ maxHeight: "150px", maxWidth: "100%" }} />
           </div>
 
           <Button
@@ -94,7 +85,7 @@ export const UploadSignatureImage: React.FC<UploadSignatureImageProps> = ({
             disabled={disabled}
             fullWidth
           >
-            {t('certSign.collab.signRequest.removeImage', 'Remove Image')}
+            {t("certSign.collab.signRequest.removeImage", "Remove Image")}
           </Button>
         </Stack>
       ) : (
@@ -105,7 +96,7 @@ export const UploadSignatureImage: React.FC<UploadSignatureImageProps> = ({
           disabled={disabled}
           fullWidth
         >
-          {t('certSign.collab.signRequest.selectFile', 'Select Image File')}
+          {t("certSign.collab.signRequest.selectFile", "Select Image File")}
         </Button>
       )}
 
@@ -119,7 +110,7 @@ export const UploadSignatureImage: React.FC<UploadSignatureImageProps> = ({
         ref={fileInputRef}
         type="file"
         accept="image/*"
-        style={{ display: 'none' }}
+        style={{ display: "none" }}
         onChange={handleFileSelect}
         disabled={disabled}
       />
diff --git a/frontend/src/core/components/toast/ToastContext.tsx b/frontend/src/core/components/toast/ToastContext.tsx
index e161d33683..94ee281d2e 100644
--- a/frontend/src/core/components/toast/ToastContext.tsx
+++ b/frontend/src/core/components/toast/ToastContext.tsx
@@ -1,8 +1,8 @@
-import React, { createContext, useCallback, useContext, useMemo, useRef, useState, useEffect } from 'react';
-import { ToastApi, ToastInstance, ToastOptions } from '@app/components/toast/types';
+import React, { createContext, useCallback, useContext, useMemo, useRef, useState, useEffect } from "react";
+import { ToastApi, ToastInstance, ToastOptions } from "@app/components/toast/types";
 
 function normalizeProgress(value: number | undefined): number | undefined {
-  if (typeof value !== 'number' || Number.isNaN(value)) return undefined;
+  if (typeof value !== "number" || Number.isNaN(value)) return undefined;
   // Accept 0..1 as fraction or 0..100 as percent
   if (value <= 1) return Math.max(0, Math.min(1, value)) * 100;
   return Math.max(0, Math.min(100, value));
@@ -12,14 +12,14 @@ function generateId() {
   return `toast_${Math.random().toString(36).slice(2, 9)}`;
 }
 
-type DefaultOpts = Required<Pick<ToastOptions, 'alertType' | 'title' | 'isPersistentPopup' | 'location' | 'durationMs'>> &
-  Partial<Omit<ToastOptions, 'id' | 'alertType' | 'title' | 'isPersistentPopup' | 'location' | 'durationMs'>>;
+type DefaultOpts = Required<Pick<ToastOptions, "alertType" | "title" | "isPersistentPopup" | "location" | "durationMs">> &
+  Partial<Omit<ToastOptions, "id" | "alertType" | "title" | "isPersistentPopup" | "location" | "durationMs">>;
 
 const defaultOptions: DefaultOpts = {
-  alertType: 'neutral',
-  title: '',
+  alertType: "neutral",
+  title: "",
   isPersistentPopup: false,
-  location: 'bottom-right',
+  location: "bottom-right",
   durationMs: 6000,
 };
 
@@ -31,7 +31,7 @@ const ToastContext = createContext<ToastContextShape | null>(null);
 
 export function useToast() {
   const ctx = useContext(ToastContext);
-  if (!ctx) throw new Error('useToast must be used within ToastProvider');
+  if (!ctx) throw new Error("useToast must be used within ToastProvider");
   return ctx;
 }
 
@@ -43,105 +43,116 @@ export function ToastProvider({ children }: { children: React.ReactNode }) {
     if (toast.isPersistentPopup) return;
     window.clearTimeout(timers.current[toast.id]);
     timers.current[toast.id] = window.setTimeout(() => {
-      setToasts(prev => prev.filter(t => t.id !== toast.id));
+      setToasts((prev) => prev.filter((t) => t.id !== toast.id));
     }, toast.durationMs);
   }, []);
 
-  const show = useCallback<ToastApi['show']>((options) => {
-    const id = options.id || generateId();
-    const hasButton = !!(options.buttonText && options.buttonCallback);
-    const merged: ToastInstance = {
-      ...defaultOptions,
-      ...options,
-      id,
-      progress: normalizeProgress(options.progressBarPercentage),
-      justCompleted: false,
-      expandable: hasButton ? false : (options.expandable !== false),
-      isExpanded: hasButton ? true : (options.expandable === false ? true : (options.alertType === 'error' ? true : false)),
-      createdAt: Date.now(),
-    } as ToastInstance;
-    setToasts(prev => {
-      // Coalesce duplicates by alertType + title + body text if no explicit id was provided
-      if (!options.id) {
-        const bodyText = typeof merged.body === 'string' ? merged.body : '';
-        const existingIndex = prev.findIndex(t => t.alertType === merged.alertType && t.title === merged.title && (typeof t.body === 'string' ? t.body : '') === bodyText);
-        if (existingIndex !== -1) {
-          const updated = [...prev];
-          const existing = updated[existingIndex];
-          const nextCount = (existing.count ?? 1) + 1;
-          updated[existingIndex] = { ...existing, count: nextCount, createdAt: Date.now() };
-          return updated;
-        }
-      }
-      const next = [...prev.filter(t => t.id !== id), merged];
-      return next;
-    });
-    scheduleAutoDismiss(merged);
-    return id;
-  }, [scheduleAutoDismiss]);
-
-  const update = useCallback<ToastApi['update']>((id, updates) => {
-    setToasts(prev => prev.map(t => {
-      if (t.id !== id) return t;
-      const progress = updates.progressBarPercentage !== undefined
-        ? normalizeProgress(updates.progressBarPercentage)
-        : t.progress;
-
-      const next: ToastInstance = {
-        ...t,
-        ...updates,
-        progress,
+  const show = useCallback<ToastApi["show"]>(
+    (options) => {
+      const id = options.id || generateId();
+      const hasButton = !!(options.buttonText && options.buttonCallback);
+      const merged: ToastInstance = {
+        ...defaultOptions,
+        ...options,
+        id,
+        progress: normalizeProgress(options.progressBarPercentage),
+        justCompleted: false,
+        expandable: hasButton ? false : options.expandable !== false,
+        isExpanded: hasButton ? true : options.expandable === false ? true : options.alertType === "error" ? true : false,
+        createdAt: Date.now(),
       } as ToastInstance;
+      setToasts((prev) => {
+        // Coalesce duplicates by alertType + title + body text if no explicit id was provided
+        if (!options.id) {
+          const bodyText = typeof merged.body === "string" ? merged.body : "";
+          const existingIndex = prev.findIndex(
+            (t) =>
+              t.alertType === merged.alertType &&
+              t.title === merged.title &&
+              (typeof t.body === "string" ? t.body : "") === bodyText,
+          );
+          if (existingIndex !== -1) {
+            const updated = [...prev];
+            const existing = updated[existingIndex];
+            const nextCount = (existing.count ?? 1) + 1;
+            updated[existingIndex] = { ...existing, count: nextCount, createdAt: Date.now() };
+            return updated;
+          }
+        }
+        const next = [...prev.filter((t) => t.id !== id), merged];
+        return next;
+      });
+      scheduleAutoDismiss(merged);
+      return id;
+    },
+    [scheduleAutoDismiss],
+  );
 
-      // Detect completion but do not auto-flip to success.
-      // Callers (e.g., compare workbench) explicitly set alertType when done.
-      if (typeof progress === 'number' && progress >= 100 && !t.justCompleted) {
-        next.justCompleted = true;
-      }
+  const update = useCallback<ToastApi["update"]>((id, updates) => {
+    setToasts((prev) =>
+      prev.map((t) => {
+        if (t.id !== id) return t;
+        const progress =
+          updates.progressBarPercentage !== undefined ? normalizeProgress(updates.progressBarPercentage) : t.progress;
 
-      return next;
-    }));
+        const next: ToastInstance = {
+          ...t,
+          ...updates,
+          progress,
+        } as ToastInstance;
+
+        // Detect completion but do not auto-flip to success.
+        // Callers (e.g., compare workbench) explicitly set alertType when done.
+        if (typeof progress === "number" && progress >= 100 && !t.justCompleted) {
+          next.justCompleted = true;
+        }
+
+        return next;
+      }),
+    );
   }, []);
 
-  const updateProgress = useCallback<ToastApi['updateProgress']>((id, progress) => {
-    update(id, { progressBarPercentage: progress });
-  }, [update]);
+  const updateProgress = useCallback<ToastApi["updateProgress"]>(
+    (id, progress) => {
+      update(id, { progressBarPercentage: progress });
+    },
+    [update],
+  );
 
-  const dismiss = useCallback<ToastApi['dismiss']>((id) => {
-    setToasts(prev => prev.filter(t => t.id !== id));
+  const dismiss = useCallback<ToastApi["dismiss"]>((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
     window.clearTimeout(timers.current[id]);
     delete timers.current[id];
   }, []);
 
-  const dismissAll = useCallback<ToastApi['dismissAll']>(() => {
+  const dismissAll = useCallback<ToastApi["dismissAll"]>(() => {
     setToasts([]);
-    Object.values(timers.current).forEach(t => window.clearTimeout(t));
+    Object.values(timers.current).forEach((t) => window.clearTimeout(t));
     timers.current = {};
   }, []);
 
-  const value = useMemo<ToastContextShape>(() => ({
-    toasts,
-    show,
-    update,
-    updateProgress,
-    dismiss,
-    dismissAll,
-  }), [toasts, show, update, updateProgress, dismiss, dismissAll]);
+  const value = useMemo<ToastContextShape>(
+    () => ({
+      toasts,
+      show,
+      update,
+      updateProgress,
+      dismiss,
+      dismissAll,
+    }),
+    [toasts, show, update, updateProgress, dismiss, dismissAll],
+  );
 
   // Handle expand/collapse toggles from renderer without widening API
   useEffect(() => {
     const handler = (e: Event) => {
       const detail = (e as CustomEvent).detail as { id: string } | undefined;
       if (!detail?.id) return;
-      setToasts(prev => prev.map(t => t.id === detail.id ? { ...t, isExpanded: !t.isExpanded } : t));
+      setToasts((prev) => prev.map((t) => (t.id === detail.id ? { ...t, isExpanded: !t.isExpanded } : t)));
     };
-    window.addEventListener('toast:toggle', handler as EventListener);
-    return () => window.removeEventListener('toast:toggle', handler as EventListener);
+    window.addEventListener("toast:toggle", handler as EventListener);
+    return () => window.removeEventListener("toast:toggle", handler as EventListener);
   }, []);
 
-  return (
-    <ToastContext.Provider value={value}>{children}</ToastContext.Provider>
-  );
+  return <ToastContext.Provider value={value}>{children}</ToastContext.Provider>;
 }
-
-
diff --git a/frontend/src/core/components/toast/ToastRenderer.tsx b/frontend/src/core/components/toast/ToastRenderer.tsx
index 80e4c12f1d..609bb83d81 100644
--- a/frontend/src/core/components/toast/ToastRenderer.tsx
+++ b/frontend/src/core/components/toast/ToastRenderer.tsx
@@ -1,14 +1,14 @@
-import { useToast } from '@app/components/toast/ToastContext';
-import { ToastInstance, ToastLocation } from '@app/components/toast/types';
-import { LocalIcon } from '@app/components/shared/LocalIcon';
-import '@app/components/toast/ToastRenderer.css';
+import { useToast } from "@app/components/toast/ToastContext";
+import { ToastInstance, ToastLocation } from "@app/components/toast/types";
+import { LocalIcon } from "@app/components/shared/LocalIcon";
+import "@app/components/toast/ToastRenderer.css";
 
 const locationToClass: Record<ToastLocation, string> = {
-  'top-left': 'toast-container--top-left',
-  'top-right': 'toast-container--top-right',
-  'bottom-left': 'toast-container--bottom-left',
-  'bottom-right': 'toast-container--bottom-right',
-  'bottom-center': 'toast-container--bottom-center',
+  "top-left": "toast-container--top-left",
+  "top-right": "toast-container--top-right",
+  "bottom-left": "toast-container--bottom-left",
+  "bottom-right": "toast-container--bottom-right",
+  "bottom-center": "toast-container--bottom-center",
 };
 
 function getToastItemClass(t: ToastInstance): string {
@@ -25,54 +25,49 @@ function getActionButtonClass(t: ToastInstance): string {
 
 function getDefaultIconName(t: ToastInstance): string {
   switch (t.alertType) {
-    case 'success':
-      return 'check-circle-rounded';
-    case 'error':
-      return 'cancel';
-    case 'warning':
-      return 'warning';
-    case 'neutral':
+    case "success":
+      return "check-circle-rounded";
+    case "error":
+      return "cancel";
+    case "warning":
+      return "warning";
+    case "neutral":
     default:
-      return 'info';
+      return "info";
   }
 }
 
 export default function ToastRenderer() {
   const { toasts, dismiss } = useToast();
 
-  const grouped = toasts.reduce<Record<ToastLocation, ToastInstance[]>>((acc, t) => {
-    const key = t.location;
-    if (!acc[key]) acc[key] = [] as ToastInstance[];
-    acc[key].push(t);
-    return acc;
-  }, { 'top-left': [], 'top-right': [], 'bottom-left': [], 'bottom-right': [], 'bottom-center': [] });
+  const grouped = toasts.reduce<Record<ToastLocation, ToastInstance[]>>(
+    (acc, t) => {
+      const key = t.location;
+      if (!acc[key]) acc[key] = [] as ToastInstance[];
+      acc[key].push(t);
+      return acc;
+    },
+    { "top-left": [], "top-right": [], "bottom-left": [], "bottom-right": [], "bottom-center": [] },
+  );
 
   return (
     <>
       {(Object.keys(grouped) as ToastLocation[]).map((loc) => (
         <div key={loc} className={`toast-container ${locationToClass[loc]}`}>
-          {grouped[loc].map(t => {
+          {grouped[loc].map((t) => {
             return (
-              <div
-                key={t.id}
-                role="status"
-                className={getToastItemClass(t)}
-              >
+              <div key={t.id} role="status" className={getToastItemClass(t)}>
                 {/* Top row: Icon + Title + Controls */}
                 <div className="toast-header">
                   {/* Icon */}
                   <div className="toast-icon">
-                    {t.icon ?? (
-                      <LocalIcon icon={getDefaultIconName(t)} width={20} height={20} />
-                    )}
+                    {t.icon ?? <LocalIcon icon={getDefaultIconName(t)} width={20} height={20} />}
                   </div>
 
                   {/* Title + count badge */}
                   <div className="toast-title-container">
                     <span>{t.title}</span>
-                    {typeof t.count === 'number' && t.count > 1 && (
-                      <span className="toast-count-badge">{t.count}</span>
-                    )}
+                    {typeof t.count === "number" && t.count > 1 && <span className="toast-count-badge">{t.count}</span>}
                   </div>
 
                   {/* Controls */}
@@ -81,47 +76,33 @@ export default function ToastRenderer() {
                       <button
                         aria-label="Toggle details"
                         onClick={() => {
-                          const evt = new CustomEvent('toast:toggle', { detail: { id: t.id } });
+                          const evt = new CustomEvent("toast:toggle", { detail: { id: t.id } });
                           window.dispatchEvent(evt);
                         }}
-                        className={`toast-button toast-expand-button ${t.isExpanded ? 'toast-expand-button--expanded' : ''}`}
+                        className={`toast-button toast-expand-button ${t.isExpanded ? "toast-expand-button--expanded" : ""}`}
                       >
                         <LocalIcon icon="expand-more-rounded" />
                       </button>
                     )}
-                    <button
-                      aria-label="Dismiss"
-                      onClick={() => dismiss(t.id)}
-                      className="toast-button"
-                    >
+                    <button aria-label="Dismiss" onClick={() => dismiss(t.id)} className="toast-button">
                       <LocalIcon icon="close" width={20} height={20} />
                     </button>
                   </div>
                 </div>
                 {/* Progress bar - always show when present */}
-                {typeof t.progress === 'number' && (
+                {typeof t.progress === "number" && (
                   <div className="toast-progress-container">
-                    <div
-                      className={getProgressBarClass(t)}
-                      style={{ width: `${t.progress}%` }}
-                    />
+                    <div className={getProgressBarClass(t)} style={{ width: `${t.progress}%` }} />
                   </div>
                 )}
 
                 {/* Body content - only show when expanded */}
-                {(t.isExpanded || !t.expandable) && (
-                  <div className="toast-body">
-                    {t.body}
-                  </div>
-                )}
+                {(t.isExpanded || !t.expandable) && <div className="toast-body">{t.body}</div>}
 
                 {/* Button - always show when present, positioned below body */}
                 {t.buttonText && t.buttonCallback && (
                   <div className="toast-action-container">
-                    <button
-                      onClick={t.buttonCallback}
-                      className={getActionButtonClass(t)}
-                    >
+                    <button onClick={t.buttonCallback} className={getActionButtonClass(t)}>
                       {t.buttonText}
                     </button>
                   </div>
@@ -134,5 +115,3 @@ export default function ToastRenderer() {
     </>
   );
 }
-
-
diff --git a/frontend/src/core/components/toast/index.ts b/frontend/src/core/components/toast/index.ts
index 39f6093ea4..e93e2ed265 100644
--- a/frontend/src/core/components/toast/index.ts
+++ b/frontend/src/core/components/toast/index.ts
@@ -1,6 +1,6 @@
-import { ToastApi, ToastInstance, ToastOptions } from '@app/components/toast/types';
-import { useToast, ToastProvider } from '@app/components/toast/ToastContext';
-import ToastRenderer from '@app/components/toast/ToastRenderer';
+import { ToastApi, ToastInstance, ToastOptions } from "@app/components/toast/types";
+import { useToast, ToastProvider } from "@app/components/toast/ToastContext";
+import ToastRenderer from "@app/components/toast/ToastRenderer";
 
 export { useToast, ToastProvider, ToastRenderer };
 
@@ -15,7 +15,7 @@ function createImperativeApi() {
   return {
     provide(instance: ToastContextApi) {
       api = instance;
-      subscribers.splice(0).forEach(cb => cb(instance));
+      subscribers.splice(0).forEach((cb) => cb(instance));
     },
     get(): ToastContextApi | null {
       return api;
@@ -45,8 +45,10 @@ export function alert(options: ToastOptions) {
     return _api.get()!.show(options);
   }
   // Queue until provider mounts
-  let id = '';
-  _api?.onReady((api) => { id = api.show(options); });
+  let id = "";
+  _api?.onReady((api) => {
+    id = api.show(options);
+  });
   return id;
 }
 
@@ -65,4 +67,3 @@ export function dismissToast(id: string) {
 export function dismissAllToasts() {
   _api?.get()?.dismissAll();
 }
-
diff --git a/frontend/src/core/components/toast/types.ts b/frontend/src/core/components/toast/types.ts
index 764e14c34c..7306dcc02f 100644
--- a/frontend/src/core/components/toast/types.ts
+++ b/frontend/src/core/components/toast/types.ts
@@ -1,7 +1,7 @@
-import { ReactNode } from 'react';
+import { ReactNode } from "react";
 
-export type ToastLocation = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'bottom-center';
-export type ToastAlertType = 'success' | 'error' | 'warning' | 'neutral';
+export type ToastLocation = "top-left" | "top-right" | "bottom-left" | "bottom-right" | "bottom-center";
+export type ToastAlertType = "success" | "error" | "warning" | "neutral";
 
 export interface ToastOptions {
   alertType?: ToastAlertType;
@@ -22,7 +22,7 @@ export interface ToastOptions {
   expandable?: boolean;
 }
 
-export interface ToastInstance extends Omit<ToastOptions, 'id' | 'progressBarPercentage'> {
+export interface ToastInstance extends Omit<ToastOptions, "id" | "progressBarPercentage"> {
   id: string;
   alertType: ToastAlertType;
   isPersistentPopup: boolean;
@@ -46,5 +46,3 @@ export interface ToastApi {
   dismiss: (id: string) => void;
   dismissAll: () => void;
 }
-
-
diff --git a/frontend/src/core/components/tools/FullscreenToolList.tsx b/frontend/src/core/components/tools/FullscreenToolList.tsx
index 4c01b492ba..417739443e 100644
--- a/frontend/src/core/components/tools/FullscreenToolList.tsx
+++ b/frontend/src/core/components/tools/FullscreenToolList.tsx
@@ -1,18 +1,18 @@
-import { useMemo } from 'react';
-import { Text } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { ToolRegistryEntry, getSubcategoryLabel, getSubcategoryColor, getSubcategoryIcon } from '@app/data/toolsTaxonomy';
-import { ToolId } from '@app/types/toolId';
-import { useToolSections } from '@app/hooks/useToolSections';
-import NoToolsFound from '@app/components/tools/shared/NoToolsFound';
-import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
-import StarRoundedIcon from '@mui/icons-material/StarRounded';
-import ThumbUpRoundedIcon from '@mui/icons-material/ThumbUpRounded';
-import Badge from '@app/components/shared/Badge';
-import '@app/components/tools/ToolPanel.css';
-import DetailedToolItem from '@app/components/tools/fullscreen/DetailedToolItem';
-import CompactToolItem from '@app/components/tools/fullscreen/CompactToolItem';
-import { useFavoriteToolItems } from '@app/hooks/tools/useFavoriteToolItems';
+import { useMemo } from "react";
+import { Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { ToolRegistryEntry, getSubcategoryLabel, getSubcategoryColor, getSubcategoryIcon } from "@app/data/toolsTaxonomy";
+import { ToolId } from "@app/types/toolId";
+import { useToolSections } from "@app/hooks/useToolSections";
+import NoToolsFound from "@app/components/tools/shared/NoToolsFound";
+import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
+import StarRoundedIcon from "@mui/icons-material/StarRounded";
+import ThumbUpRoundedIcon from "@mui/icons-material/ThumbUpRounded";
+import Badge from "@app/components/shared/Badge";
+import "@app/components/tools/ToolPanel.css";
+import DetailedToolItem from "@app/components/tools/fullscreen/DetailedToolItem";
+import CompactToolItem from "@app/components/tools/fullscreen/CompactToolItem";
+import { useFavoriteToolItems } from "@app/hooks/tools/useFavoriteToolItems";
 
 interface FullscreenToolListProps {
   filteredTools: Array<{ item: [ToolId, ToolRegistryEntry]; matchedText?: string }>;
@@ -36,27 +36,26 @@ const FullscreenToolList = ({
 
   const { sections, searchGroups } = useToolSections(filteredTools, searchQuery);
 
-  const tooltipPortalTarget = typeof document !== 'undefined' ? document.body : undefined;
-
+  const tooltipPortalTarget = typeof document !== "undefined" ? document.body : undefined;
 
   const favoriteToolItems = useFavoriteToolItems(favoriteTools, toolRegistry);
 
-  const quickSection = useMemo(() => sections.find(section => section.key === 'quick'), [sections]);
+  const quickSection = useMemo(() => sections.find((section) => section.key === "quick"), [sections]);
   const recommendedItems = useMemo(() => {
-    if (!quickSection) return [] as Array<{ id: string, tool: ToolRegistryEntry }>;
-    const items: Array<{ id: string, tool: ToolRegistryEntry }> = [];
-    quickSection.subcategories.forEach(sc => sc.tools.forEach(t => items.push(t)));
+    if (!quickSection) return [] as Array<{ id: string; tool: ToolRegistryEntry }>;
+    const items: Array<{ id: string; tool: ToolRegistryEntry }> = [];
+    quickSection.subcategories.forEach((sc) => sc.tools.forEach((t) => items.push(t)));
     return items;
   }, [quickSection]);
 
   // Show recommended/favorites section only when not searching
-  const showRecentFavorites = searchQuery.trim().length === 0 && ((recommendedItems.length > 0) || favoriteToolItems.length > 0);
+  const showRecentFavorites = searchQuery.trim().length === 0 && (recommendedItems.length > 0 || favoriteToolItems.length > 0);
 
   const subcategoryGroups = useMemo(() => {
     if (searchQuery.trim().length > 0) {
       return searchGroups;
     }
-    const allSection = sections.find(section => section.key === 'all');
+    const allSection = sections.find((section) => section.key === "all");
     return allSection ? allSection.subcategories : [];
   }, [searchGroups, sections, searchQuery]);
 
@@ -65,37 +64,42 @@ const FullscreenToolList = ({
       <div className="tool-panel__fullscreen-empty">
         <NoToolsFound />
         <Text size="sm" c="dimmed">
-          {t('toolPanel.fullscreen.noResults', 'Try adjusting your search or toggle descriptions to find what you need.')}
+          {t("toolPanel.fullscreen.noResults", "Try adjusting your search or toggle descriptions to find what you need.")}
         </Text>
       </div>
     );
   }
 
   const containerClass = showDescriptions
-    ? 'tool-panel__fullscreen-groups tool-panel__fullscreen-groups--detailed'
-    : 'tool-panel__fullscreen-groups tool-panel__fullscreen-groups--compact';
+    ? "tool-panel__fullscreen-groups tool-panel__fullscreen-groups--detailed"
+    : "tool-panel__fullscreen-groups tool-panel__fullscreen-groups--compact";
 
   // Helper function to render a tool item
   const renderToolItem = (id: ToolId, tool: ToolRegistryEntry) => {
     const isSelected = selectedToolKey === id;
 
     const handleClick = () => {
-      if (!tool.component && !tool.link && id !== 'read' && id !== 'multiTool') return;
+      if (!tool.component && !tool.link && id !== "read" && id !== "multiTool") return;
       if (tool.link) {
-        window.open(tool.link, '_blank', 'noopener,noreferrer');
+        window.open(tool.link, "_blank", "noopener,noreferrer");
         return;
       }
       onSelect(id as ToolId);
     };
 
     if (showDescriptions) {
-      return (
-        <DetailedToolItem key={id} id={id} tool={tool} isSelected={isSelected} onClick={handleClick} />
-      );
+      return <DetailedToolItem key={id} id={id} tool={tool} isSelected={isSelected} onClick={handleClick} />;
     }
 
     return (
-      <CompactToolItem key={id} id={id} tool={tool} isSelected={isSelected} onClick={handleClick} tooltipPortalTarget={tooltipPortalTarget} />
+      <CompactToolItem
+        key={id}
+        id={id}
+        tool={tool}
+        isSelected={isSelected}
+        onClick={handleClick}
+        tooltipPortalTarget={tooltipPortalTarget}
+      />
     );
   };
 
@@ -107,7 +111,7 @@ const FullscreenToolList = ({
             <section
               className="tool-panel__fullscreen-group tool-panel__fullscreen-group--special"
               style={{
-                borderColor: 'var(--fullscreen-border-favorites)',
+                borderColor: "var(--fullscreen-border-favorites)",
               }}
             >
               <header className="tool-panel__fullscreen-section-header">
@@ -115,21 +119,17 @@ const FullscreenToolList = ({
                   <span
                     className="tool-panel__fullscreen-section-icon"
                     style={{
-                      color: 'var(--special-color-favorites)',
+                      color: "var(--special-color-favorites)",
                     }}
                     aria-hidden
                   >
                     <StarRoundedIcon />
                   </span>
                   <Text size="sm" fw={600} tt="uppercase" lts={0.5} c="dimmed">
-                    {t('toolPanel.fullscreen.favorites', 'Favourites')}
+                    {t("toolPanel.fullscreen.favorites", "Favourites")}
                   </Text>
                 </div>
-                <Badge
-                  size="sm"
-                  variant="colored"
-                  color="var(--special-color-favorites)"
-                >
+                <Badge size="sm" variant="colored" color="var(--special-color-favorites)">
                   {favoriteToolItems.length}
                 </Badge>
               </header>
@@ -149,7 +149,7 @@ const FullscreenToolList = ({
             <section
               className="tool-panel__fullscreen-group tool-panel__fullscreen-group--special"
               style={{
-                borderColor: 'var(--fullscreen-border-recommended)',
+                borderColor: "var(--fullscreen-border-recommended)",
               }}
             >
               <header className="tool-panel__fullscreen-section-header">
@@ -157,21 +157,17 @@ const FullscreenToolList = ({
                   <span
                     className="tool-panel__fullscreen-section-icon"
                     style={{
-                      color: 'var(--special-color-recommended)',
+                      color: "var(--special-color-recommended)",
                     }}
                     aria-hidden
                   >
                     <ThumbUpRoundedIcon />
                   </span>
                   <Text size="sm" fw={600} tt="uppercase" lts={0.5} c="dimmed">
-                    {t('toolPanel.fullscreen.recommended', 'Recommended')}
+                    {t("toolPanel.fullscreen.recommended", "Recommended")}
                   </Text>
                 </div>
-                <Badge
-                  size="sm"
-                  variant="colored"
-                  color="var(--special-color-recommended)"
-                >
+                <Badge size="sm" variant="colored" color="var(--special-color-recommended)">
                   {recommendedItems.length}
                 </Badge>
               </header>
@@ -195,7 +191,7 @@ const FullscreenToolList = ({
         return (
           <section
             key={subcategoryId}
-            className={`tool-panel__fullscreen-group ${showDescriptions ? 'tool-panel__fullscreen-group--detailed' : 'tool-panel__fullscreen-group--compact'}`}
+            className={`tool-panel__fullscreen-group ${showDescriptions ? "tool-panel__fullscreen-group--detailed" : "tool-panel__fullscreen-group--compact"}`}
             style={{
               borderColor: `color-mix(in srgb, ${categoryColor} 25%, var(--fullscreen-border-subtle-65))`,
             }}
@@ -223,11 +219,7 @@ const FullscreenToolList = ({
                   {getSubcategoryLabel(t, subcategoryId)}
                 </Text>
               </div>
-              <Badge
-                size="sm"
-                variant="colored"
-                color={categoryColor}
-              >
+              <Badge size="sm" variant="colored" color={categoryColor}>
                 {tools.length}
               </Badge>
             </header>
@@ -249,5 +241,3 @@ const FullscreenToolList = ({
 };
 
 export default FullscreenToolList;
-
-
diff --git a/frontend/src/core/components/tools/FullscreenToolSurface.tsx b/frontend/src/core/components/tools/FullscreenToolSurface.tsx
index 2eedbf5f5a..7087557294 100644
--- a/frontend/src/core/components/tools/FullscreenToolSurface.tsx
+++ b/frontend/src/core/components/tools/FullscreenToolSurface.tsx
@@ -1,18 +1,18 @@
-import { useState, useRef } from 'react';
-import { ActionIcon, ScrollArea, Switch, useMantineColorScheme } from '@mantine/core';
-import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
-import { useTranslation } from 'react-i18next';
-import ToolSearch from '@app/components/tools/toolPicker/ToolSearch';
-import FullscreenToolList from '@app/components/tools/FullscreenToolList';
-import { ToolRegistryEntry } from '@app/data/toolsTaxonomy';
-import { ToolId } from '@app/types/toolId';
-import { useFocusTrap } from '@app/hooks/useFocusTrap';
-import { useLogoPath } from '@app/hooks/useLogoPath';
-import { useLogoAssets } from '@app/hooks/useLogoAssets';
-import { Tooltip } from '@app/components/shared/Tooltip';
-import '@app/components/tools/ToolPanel.css';
-import { ToolPanelGeometry } from '@app/hooks/tools/useToolPanelGeometry';
-import { Z_INDEX_OVER_FULLSCREEN_SURFACE } from '@app/styles/zIndex';
+import { useState, useRef } from "react";
+import { ActionIcon, ScrollArea, Switch, useMantineColorScheme } from "@mantine/core";
+import DoubleArrowIcon from "@mui/icons-material/DoubleArrow";
+import { useTranslation } from "react-i18next";
+import ToolSearch from "@app/components/tools/toolPicker/ToolSearch";
+import FullscreenToolList from "@app/components/tools/FullscreenToolList";
+import { ToolRegistryEntry } from "@app/data/toolsTaxonomy";
+import { ToolId } from "@app/types/toolId";
+import { useFocusTrap } from "@app/hooks/useFocusTrap";
+import { useLogoPath } from "@app/hooks/useLogoPath";
+import { useLogoAssets } from "@app/hooks/useLogoAssets";
+import { Tooltip } from "@app/components/shared/Tooltip";
+import "@app/components/tools/ToolPanel.css";
+import { ToolPanelGeometry } from "@app/hooks/tools/useToolPanelGeometry";
+import { Z_INDEX_OVER_FULLSCREEN_SURFACE } from "@app/styles/zIndex";
 
 interface FullscreenToolSurfaceProps {
   searchQuery: string;
@@ -47,7 +47,7 @@ const FullscreenToolSurface = ({
   const { colorScheme } = useMantineColorScheme();
   const [isExiting, setIsExiting] = useState(false);
   const surfaceRef = useRef<HTMLDivElement>(null);
-  const isRTL = typeof document !== 'undefined' && document.documentElement.dir === 'rtl';
+  const isRTL = typeof document !== "undefined" && document.documentElement.dir === "rtl";
 
   // Enable focus trap when surface is active
   useFocusTrap(surfaceRef, !isExiting);
@@ -58,7 +58,7 @@ const FullscreenToolSurface = ({
   const brandTextSrc = colorScheme === "dark" ? wordmark.white : wordmark.black;
 
   const handleExit = () => {
-    const prefersReducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+    const prefersReducedMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
 
     if (prefersReducedMotion) {
       onExitFullscreenMode();
@@ -72,11 +72,14 @@ const FullscreenToolSurface = ({
       return;
     }
     // Rely on CSS animation end rather than duplicating timing in JS
-    el.addEventListener('animationend', () => {
-      onExitFullscreenMode();
-    }, { once: true });
-};
-
+    el.addEventListener(
+      "animationend",
+      () => {
+        onExitFullscreenMode();
+      },
+      { once: true },
+    );
+  };
 
   const style = geometry
     ? {
@@ -92,51 +95,48 @@ const FullscreenToolSurface = ({
       className="tool-panel__fullscreen-surface"
       style={style}
       role="region"
-      aria-label={t('toolPanel.fullscreen.heading', 'All tools (fullscreen view)')}
+      aria-label={t("toolPanel.fullscreen.heading", "All tools (fullscreen view)")}
       data-tour="tool-panel"
     >
       <div
         ref={surfaceRef}
-        className={`tool-panel__fullscreen-surface-inner ${isExiting ? 'tool-panel__fullscreen-surface-inner--exiting' : ''}`}
+        className={`tool-panel__fullscreen-surface-inner ${isExiting ? "tool-panel__fullscreen-surface-inner--exiting" : ""}`}
       >
         <header className="tool-panel__fullscreen-header">
           <div className="tool-panel__fullscreen-brand">
             <img src={brandIconSrc} alt="" className="tool-panel__fullscreen-brand-icon" />
             <img src={brandTextSrc} alt={brandAltText} className="tool-panel__fullscreen-brand-text" />
           </div>
-          <div style={{ display: 'flex', gap: '0.5rem', alignItems: 'center' }}>
-            <Tooltip content={toggleLabel} position="bottom" arrow={true} openOnFocus={false} containerStyle={{ zIndex: Z_INDEX_OVER_FULLSCREEN_SURFACE }}>
+          <div style={{ display: "flex", gap: "0.5rem", alignItems: "center" }}>
+            <Tooltip
+              content={toggleLabel}
+              position="bottom"
+              arrow={true}
+              openOnFocus={false}
+              containerStyle={{ zIndex: Z_INDEX_OVER_FULLSCREEN_SURFACE }}
+            >
               <ActionIcon
                 variant="subtle"
                 radius="xl"
                 size="md"
                 onClick={handleExit}
                 aria-label={toggleLabel}
-                style={{ color: 'var(--right-rail-icon)' }}
+                style={{ color: "var(--right-rail-icon)" }}
               >
-                <DoubleArrowIcon
-                  fontSize="small"
-                  style={{ transform: isRTL ? undefined : 'rotate(180deg)' }}
-                />
+                <DoubleArrowIcon fontSize="small" style={{ transform: isRTL ? undefined : "rotate(180deg)" }} />
               </ActionIcon>
             </Tooltip>
           </div>
         </header>
 
         <div className="tool-panel__fullscreen-controls">
-          <ToolSearch
-            value={searchQuery}
-            onChange={onSearchChange}
-            toolRegistry={toolRegistry}
-            mode="filter"
-            autoFocus
-          />
+          <ToolSearch value={searchQuery} onChange={onSearchChange} toolRegistry={toolRegistry} mode="filter" autoFocus />
           <Switch
             checked={showDescriptions}
             onChange={() => onToggleDescriptions()}
             size="md"
             labelPosition="left"
-            label={t('toolPanel.fullscreen.showDetails', 'Show Details')}
+            label={t("toolPanel.fullscreen.showDetails", "Show Details")}
           />
         </div>
 
@@ -158,4 +158,3 @@ const FullscreenToolSurface = ({
 };
 
 export default FullscreenToolSurface;
-
diff --git a/frontend/src/core/components/tools/SearchResults.tsx b/frontend/src/core/components/tools/SearchResults.tsx
index 17e8142eb8..d123748b4e 100644
--- a/frontend/src/core/components/tools/SearchResults.tsx
+++ b/frontend/src/core/components/tools/SearchResults.tsx
@@ -1,12 +1,12 @@
-import React from 'react';
-import { Box, Stack } from '@mantine/core';
-import { getSubcategoryLabel, ToolRegistryEntry } from '@app/data/toolsTaxonomy';
-import { ToolId } from '@app/types/toolId';
-import ToolButton from '@app/components/tools/toolPicker/ToolButton';
-import { useTranslation } from 'react-i18next';
-import { useToolSections } from '@app/hooks/useToolSections';
-import SubcategoryHeader from '@app/components/tools/shared/SubcategoryHeader';
-import NoToolsFound from '@app/components/tools/shared/NoToolsFound';
+import React from "react";
+import { Box, Stack } from "@mantine/core";
+import { getSubcategoryLabel, ToolRegistryEntry } from "@app/data/toolsTaxonomy";
+import { ToolId } from "@app/types/toolId";
+import ToolButton from "@app/components/tools/toolPicker/ToolButton";
+import { useTranslation } from "react-i18next";
+import { useToolSections } from "@app/hooks/useToolSections";
+import SubcategoryHeader from "@app/components/tools/shared/SubcategoryHeader";
+import NoToolsFound from "@app/components/tools/shared/NoToolsFound";
 import "@app/components/tools/toolPicker/ToolPicker.css";
 
 interface SearchResultsProps {
@@ -32,21 +32,19 @@ const SearchResults: React.FC<SearchResultsProps> = ({ filteredTools, onSelect,
   }
 
   return (
-    <Stack p="sm" gap="xs"
-        className="tool-picker-scrollable">
-      {searchGroups.map(group => (
-        <Box key={group.subcategoryId}  w="100%">
+    <Stack p="sm" gap="xs" className="tool-picker-scrollable">
+      {searchGroups.map((group) => (
+        <Box key={group.subcategoryId} w="100%">
           <SubcategoryHeader label={getSubcategoryLabel(t, group.subcategoryId)} />
-          <Stack  gap="xs">
+          <Stack gap="xs">
             {group.tools.map(({ id, tool }) => {
               const matchedText = matchedTextMap.get(id);
               // Check if the match was from synonyms and show the actual synonym that matched
-              const isSynonymMatch = matchedText && tool.synonyms?.some(synonym =>
-                matchedText.toLowerCase().includes(synonym.toLowerCase())
-              );
-              const matchedSynonym = isSynonymMatch ? tool.synonyms?.find(synonym =>
-                matchedText.toLowerCase().includes(synonym.toLowerCase())
-              ) : undefined;
+              const isSynonymMatch =
+                matchedText && tool.synonyms?.some((synonym) => matchedText.toLowerCase().includes(synonym.toLowerCase()));
+              const matchedSynonym = isSynonymMatch
+                ? tool.synonyms?.find((synonym) => matchedText.toLowerCase().includes(synonym.toLowerCase()))
+                : undefined;
 
               return (
                 <ToolButton
diff --git a/frontend/src/core/components/tools/ToolPanel.css b/frontend/src/core/components/tools/ToolPanel.css
index 8d642214fa..d64aed3690 100644
--- a/frontend/src/core/components/tools/ToolPanel.css
+++ b/frontend/src/core/components/tools/ToolPanel.css
@@ -31,7 +31,9 @@
 
 .tool-panel {
   position: relative;
-  transition: width 0.3s ease, max-width 0.3s ease;
+  transition:
+    width 0.3s ease,
+    max-width 0.3s ease;
 }
 
 .tool-panel--fullscreen-active {
@@ -90,13 +92,7 @@
   display: flex;
   flex-direction: column;
   border-radius: 0;
-  background:
-    linear-gradient(
-      140deg,
-      var(--fullscreen-bg-surface-1),
-      var(--fullscreen-bg-surface-2)
-    )
-    padding-box;
+  background: linear-gradient(140deg, var(--fullscreen-bg-surface-1), var(--fullscreen-bg-surface-2)) padding-box;
   border: 1px solid var(--fullscreen-border-subtle-75);
   box-shadow: none;
   backdrop-filter: blur(18px);
@@ -111,11 +107,11 @@
   animation: tool-panel-fullscreen-slide-out var(--fullscreen-anim-out-duration) ease forwards;
 }
 
-:root[dir='rtl'] .tool-panel__fullscreen-surface-inner {
+:root[dir="rtl"] .tool-panel__fullscreen-surface-inner {
   animation-name: tool-panel-fullscreen-slide-in-rtl;
 }
 
-:root[dir='rtl'] .tool-panel__fullscreen-surface-inner.tool-panel__fullscreen-surface-inner--exiting {
+:root[dir="rtl"] .tool-panel__fullscreen-surface-inner.tool-panel__fullscreen-surface-inner--exiting {
   animation-name: tool-panel-fullscreen-slide-out-rtl;
 }
 
@@ -238,7 +234,10 @@
   border-radius: 0.95rem;
   background: var(--fullscreen-bg-item);
   cursor: pointer;
-  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
+  transition:
+    transform 0.2s ease,
+    border-color 0.2s ease,
+    box-shadow 0.2s ease;
   width: 100%;
   box-sizing: border-box;
   /* Allow flex children to shrink without forcing horizontal overflow */
@@ -319,16 +318,19 @@
   background: var(--fullscreen-bg-icon-detailed);
   color: var(--fullscreen-text-icon);
   flex-shrink: 0;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
   position: relative;
   overflow: hidden;
 }
 
 .tool-panel__fullscreen-icon::before {
-  content: '';
+  content: "";
   position: absolute;
   inset: 0;
-  background: linear-gradient(135deg,
+  background: linear-gradient(
+    135deg,
     color-mix(in srgb, var(--text-primary) 12%, transparent),
     color-mix(in srgb, var(--text-primary) 4%, transparent)
   );
@@ -407,7 +409,9 @@
   padding: 0.55rem 0.5rem 0.55rem 0.65rem;
   border-radius: 0.65rem;
   cursor: pointer;
-  transition: background 0.2s ease, transform 0.2s ease;
+  transition:
+    background 0.2s ease,
+    transform 0.2s ease;
   background: var(--fullscreen-bg-list-item);
   border: 1px solid transparent;
   width: 100%;
@@ -441,16 +445,19 @@
   background: var(--fullscreen-bg-icon-compact);
   color: var(--fullscreen-text-icon-compact);
   flex-shrink: 0;
-  transition: transform 0.2s ease, box-shadow 0.2s ease;
+  transition:
+    transform 0.2s ease,
+    box-shadow 0.2s ease;
   position: relative;
   overflow: hidden;
 }
 
 .tool-panel__fullscreen-list-icon::before {
-  content: '';
+  content: "";
   position: absolute;
   inset: 0;
-  background: linear-gradient(135deg,
+  background: linear-gradient(
+    135deg,
     color-mix(in srgb, var(--text-primary) 10%, transparent),
     color-mix(in srgb, var(--text-primary) 3%, transparent)
   );
@@ -571,5 +578,3 @@
     column-width: 14rem;
   }
 }
-
-
diff --git a/frontend/src/core/components/tools/ToolPanel.tsx b/frontend/src/core/components/tools/ToolPanel.tsx
index 3fcac49881..37d7f2a91b 100644
--- a/frontend/src/core/components/tools/ToolPanel.tsx
+++ b/frontend/src/core/components/tools/ToolPanel.tsx
@@ -1,23 +1,23 @@
-import { useEffect, useMemo } from 'react';
-import { useRainbowThemeContext } from '@app/components/shared/RainbowThemeProvider';
-import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
-import { usePreferences } from '@app/contexts/PreferencesContext';
-import ToolPicker from '@app/components/tools/ToolPicker';
-import SearchResults from '@app/components/tools/SearchResults';
-import ToolRenderer from '@app/components/tools/ToolRenderer';
-import ToolSearch from '@app/components/tools/toolPicker/ToolSearch';
+import { useEffect, useMemo } from "react";
+import { useRainbowThemeContext } from "@app/components/shared/RainbowThemeProvider";
+import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
+import { usePreferences } from "@app/contexts/PreferencesContext";
+import ToolPicker from "@app/components/tools/ToolPicker";
+import SearchResults from "@app/components/tools/SearchResults";
+import ToolRenderer from "@app/components/tools/ToolRenderer";
+import ToolSearch from "@app/components/tools/toolPicker/ToolSearch";
 import { useSidebarContext } from "@app/contexts/SidebarContext";
-import rainbowStyles from '@app/styles/rainbow.module.css';
-import { ActionIcon, ScrollArea } from '@mantine/core';
-import { ToolId } from '@app/types/toolId';
-import { useIsMobile } from '@app/hooks/useIsMobile';
-import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
-import { useTranslation } from 'react-i18next';
-import FullscreenToolSurface from '@app/components/tools/FullscreenToolSurface';
-import { useToolPanelGeometry } from '@app/hooks/tools/useToolPanelGeometry';
-import { useRightRail } from '@app/contexts/RightRailContext';
-import { Tooltip } from '@app/components/shared/Tooltip';
-import '@app/components/tools/ToolPanel.css';
+import rainbowStyles from "@app/styles/rainbow.module.css";
+import { ActionIcon, ScrollArea } from "@mantine/core";
+import { ToolId } from "@app/types/toolId";
+import { useIsMobile } from "@app/hooks/useIsMobile";
+import DoubleArrowIcon from "@mui/icons-material/DoubleArrow";
+import { useTranslation } from "react-i18next";
+import FullscreenToolSurface from "@app/components/tools/FullscreenToolSurface";
+import { useToolPanelGeometry } from "@app/hooks/tools/useToolPanelGeometry";
+import { useRightRail } from "@app/contexts/RightRailContext";
+import { Tooltip } from "@app/components/shared/Tooltip";
+import "@app/components/tools/ToolPanel.css";
 
 // No props needed - component uses context
 
@@ -47,11 +47,10 @@ export default function ToolPanel() {
   const { setAllRightRailButtonsDisabled } = useRightRail();
   const { preferences, updatePreference } = usePreferences();
 
-  const isFullscreenMode = toolPanelMode === 'fullscreen';
+  const isFullscreenMode = toolPanelMode === "fullscreen";
   const toolPickerVisible = !readerMode;
-  const fullscreenExpanded = isFullscreenMode && leftPanelView === 'toolPicker' && !isMobile && toolPickerVisible;
-  const isRTL = typeof document !== 'undefined' && document.documentElement.dir === 'rtl';
-
+  const fullscreenExpanded = isFullscreenMode && leftPanelView === "toolPicker" && !isMobile && toolPickerVisible;
+  const isRTL = typeof document !== "undefined" && document.documentElement.dir === "rtl";
 
   // Disable right rail buttons when fullscreen mode is active
   useEffect(() => {
@@ -66,28 +65,28 @@ export default function ToolPanel() {
   });
 
   const toggleLabel = isFullscreenMode
-    ? t('toolPanel.toggle.sidebar', 'Switch to sidebar mode')
-    : t('toolPanel.toggle.fullscreen', 'Switch to fullscreen mode');
+    ? t("toolPanel.toggle.sidebar", "Switch to sidebar mode")
+    : t("toolPanel.toggle.fullscreen", "Switch to fullscreen mode");
 
   const handleModeToggle = () => {
-    const nextMode = isFullscreenMode ? 'sidebar' : 'fullscreen';
+    const nextMode = isFullscreenMode ? "sidebar" : "fullscreen";
     setToolPanelMode(nextMode);
 
-    if (nextMode === 'fullscreen' && leftPanelView !== 'toolPicker') {
-      setLeftPanelView('toolPicker');
+    if (nextMode === "fullscreen" && leftPanelView !== "toolPicker") {
+      setLeftPanelView("toolPicker");
     }
   };
 
   const computedWidth = () => {
     if (isMobile) {
-      return '100%';
+      return "100%";
     }
 
     if (!isPanelVisible) {
-      return '0';
+      return "0";
     }
 
-    return '18.5rem';
+    return "18.5rem";
   };
 
   const matchedTextMap = useMemo(() => {
@@ -105,91 +104,73 @@ export default function ToolPanel() {
       ref={toolPanelRef}
       data-sidebar="tool-panel"
       data-tour={fullscreenExpanded ? undefined : "tool-panel"}
-      className={`tool-panel flex flex-col ${fullscreenExpanded ? 'tool-panel--fullscreen-active' : 'overflow-hidden'} bg-[var(--bg-toolbar)] border-r border-[var(--border-subtle)] transition-all duration-300 ease-out ${
-        isRainbowMode ? rainbowStyles.rainbowPaper : ''
-      } ${isMobile ? 'h-full border-r-0' : 'h-screen'} ${fullscreenExpanded ? 'tool-panel--fullscreen' : ''}`}
+      className={`tool-panel flex flex-col ${fullscreenExpanded ? "tool-panel--fullscreen-active" : "overflow-hidden"} bg-[var(--bg-toolbar)] border-r border-[var(--border-subtle)] transition-all duration-300 ease-out ${
+        isRainbowMode ? rainbowStyles.rainbowPaper : ""
+      } ${isMobile ? "h-full border-r-0" : "h-screen"} ${fullscreenExpanded ? "tool-panel--fullscreen" : ""}`}
       style={{
         width: computedWidth(),
-        padding: '0'
+        padding: "0",
       }}
     >
       {!fullscreenExpanded && (
         <div
           style={{
             opacity: isMobile || isPanelVisible ? 1 : 0,
-            transition: 'opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
-            height: '100%',
-            display: 'flex',
-            flexDirection: 'column'
+            transition: "opacity 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94)",
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
           }}
         >
           <div
             className="tool-panel__search-row"
             style={{
-              backgroundColor: 'var(--tool-panel-search-bg)',
-              borderBottom: '1px solid var(--tool-panel-search-border-bottom)'
+              backgroundColor: "var(--tool-panel-search-bg)",
+              borderBottom: "1px solid var(--tool-panel-search-border-bottom)",
             }}
           >
-            <ToolSearch
-              value={searchQuery}
-              onChange={setSearchQuery}
-              toolRegistry={toolRegistry}
-              mode="filter"
-            />
-            {!isMobile && leftPanelView === 'toolPicker' && (
-              <Tooltip
-                content={toggleLabel}
-                position="bottom"
-                arrow={true}
-                openOnFocus={false}
-              >
+            <ToolSearch value={searchQuery} onChange={setSearchQuery} toolRegistry={toolRegistry} mode="filter" />
+            {!isMobile && leftPanelView === "toolPicker" && (
+              <Tooltip content={toggleLabel} position="bottom" arrow={true} openOnFocus={false}>
                 <ActionIcon
                   variant="subtle"
                   radius="xl"
-                  style={{ color: 'var(--right-rail-icon)' }}
+                  style={{ color: "var(--right-rail-icon)" }}
                   onClick={handleModeToggle}
                   aria-label={toggleLabel}
                   className="tool-panel__mode-toggle"
                 >
-                  <DoubleArrowIcon
-                    fontSize="small"
-                    style={{ transform: isRTL ? 'scaleX(-1)' : undefined }}
-                  />
+                  <DoubleArrowIcon fontSize="small" style={{ transform: isRTL ? "scaleX(-1)" : undefined }} />
                 </ActionIcon>
               </Tooltip>
             )}
           </div>
 
-                {searchQuery.trim().length > 0 ? (
-                  <div className="flex-1 flex flex-col overflow-y-auto">
-                    <SearchResults
-                      filteredTools={filteredTools}
-                      onSelect={(id) => handleToolSelect(id as ToolId)}
-                      searchQuery={searchQuery}
-                    />
-                  </div>
-                ) : leftPanelView === 'toolPicker' ? (
-                  <div className="flex-1 flex flex-col overflow-auto">
-                    <ToolPicker
-                      selectedToolKey={selectedToolKey}
-                      onSelect={(id) => handleToolSelect(id as ToolId)}
-                      filteredTools={filteredTools}
-                      isSearching={Boolean(searchQuery && searchQuery.trim().length > 0)}
-                    />
-                  </div>
+          {searchQuery.trim().length > 0 ? (
+            <div className="flex-1 flex flex-col overflow-y-auto">
+              <SearchResults
+                filteredTools={filteredTools}
+                onSelect={(id) => handleToolSelect(id as ToolId)}
+                searchQuery={searchQuery}
+              />
+            </div>
+          ) : leftPanelView === "toolPicker" ? (
+            <div className="flex-1 flex flex-col overflow-auto">
+              <ToolPicker
+                selectedToolKey={selectedToolKey}
+                onSelect={(id) => handleToolSelect(id as ToolId)}
+                filteredTools={filteredTools}
+                isSearching={Boolean(searchQuery && searchQuery.trim().length > 0)}
+              />
+            </div>
           ) : (
             <div className="flex-1 flex flex-col overflow-hidden">
               <div className="flex-1 min-h-0 overflow-hidden">
                 <ScrollArea h="100%">
                   {selectedToolKey ? (
-                    <ToolRenderer
-                      selectedToolKey={selectedToolKey}
-                      onPreviewFile={setPreviewFile}
-                    />
+                    <ToolRenderer selectedToolKey={selectedToolKey} onPreviewFile={setPreviewFile} />
                   ) : (
-                    <div className="tool-panel__placeholder">
-                      {t('toolPanel.placeholder', 'Choose a tool to get started')}
-                    </div>
+                    <div className="tool-panel__placeholder">{t("toolPanel.placeholder", "Choose a tool to get started")}</div>
                   )}
                 </ScrollArea>
               </div>
@@ -208,8 +189,8 @@ export default function ToolPanel() {
           matchedTextMap={matchedTextMap}
           onSearchChange={setSearchQuery}
           onSelect={(id: ToolId) => handleToolSelect(id)}
-          onToggleDescriptions={() => updatePreference('showLegacyToolDescriptions', !preferences.showLegacyToolDescriptions)}
-          onExitFullscreenMode={() => setToolPanelMode('sidebar')}
+          onToggleDescriptions={() => updatePreference("showLegacyToolDescriptions", !preferences.showLegacyToolDescriptions)}
+          onExitFullscreenMode={() => setToolPanelMode("sidebar")}
           toggleLabel={toggleLabel}
           geometry={fullscreenGeometry}
         />
diff --git a/frontend/src/core/components/tools/ToolPanelModePrompt.css b/frontend/src/core/components/tools/ToolPanelModePrompt.css
index 50e8ad7117..2561c2383c 100644
--- a/frontend/src/core/components/tools/ToolPanelModePrompt.css
+++ b/frontend/src/core/components/tools/ToolPanelModePrompt.css
@@ -15,7 +15,8 @@
   display: flex;
   flex-direction: column;
   gap: 1rem;
-  background: linear-gradient(145deg,
+  background: linear-gradient(
+    145deg,
     color-mix(in srgb, var(--bg-surface) 96%, transparent),
     color-mix(in srgb, var(--bg-muted) 70%, transparent)
   );
@@ -25,7 +26,8 @@
 
 .tool-panel-mode-prompt__card--sidebar {
   border: 1px solid color-mix(in srgb, var(--accent-primary, var(--mantine-color-blue-6, #228be6)) 18%, var(--border-subtle));
-  background: linear-gradient(165deg,
+  background: linear-gradient(
+    165deg,
     color-mix(in srgb, var(--bg-surface) 96%, transparent),
     color-mix(in srgb, var(--accent-primary, var(--mantine-color-blue-6, #228be6)) 8%, transparent)
   );
@@ -54,7 +56,8 @@
   display: flex;
   flex-direction: column;
   gap: 0.45rem;
-  background: linear-gradient(180deg,
+  background: linear-gradient(
+    180deg,
     color-mix(in srgb, var(--bg-muted) 88%, transparent),
     color-mix(in srgb, var(--bg-muted) 72%, transparent)
   );
@@ -86,7 +89,8 @@
   display: grid;
   gap: 0.35rem;
   grid-template-rows: 1.4fr 0.6fr;
-  background: linear-gradient(160deg,
+  background: linear-gradient(
+    160deg,
     color-mix(in srgb, var(--bg-background) 94%, transparent),
     color-mix(in srgb, var(--bg-muted) 68%, transparent)
   );
@@ -125,7 +129,8 @@
 .tool-panel-mode-prompt__legacy-card {
   border-radius: 0.45rem;
   border: 1px solid color-mix(in srgb, var(--border-subtle) 55%, transparent);
-  background: linear-gradient(150deg,
+  background: linear-gradient(
+    150deg,
     color-mix(in srgb, var(--bg-muted) 88%, transparent),
     color-mix(in srgb, var(--bg-background) 76%, transparent)
   );
@@ -158,7 +163,8 @@
 .tool-panel-mode-prompt__fullscreen-card {
   border-radius: 0.45rem;
   border: 1px solid color-mix(in srgb, var(--border-subtle) 55%, transparent);
-  background: linear-gradient(150deg,
+  background: linear-gradient(
+    150deg,
     color-mix(in srgb, var(--bg-muted) 88%, transparent),
     color-mix(in srgb, var(--bg-background) 76%, transparent)
   );
diff --git a/frontend/src/core/components/tools/ToolPanelModePrompt.tsx b/frontend/src/core/components/tools/ToolPanelModePrompt.tsx
index 3b34e8af41..e956be01d2 100644
--- a/frontend/src/core/components/tools/ToolPanelModePrompt.tsx
+++ b/frontend/src/core/components/tools/ToolPanelModePrompt.tsx
@@ -1,10 +1,10 @@
-import { useEffect, useState } from 'react';
-import { Badge, Button, Card, Group, Modal, Stack, Text } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
-import { usePreferences } from '@app/contexts/PreferencesContext';
-import '@app/components/tools/ToolPanelModePrompt.css';
-import { type ToolPanelMode } from '@app/constants/toolPanel';
+import { useEffect, useState } from "react";
+import { Badge, Button, Card, Group, Modal, Stack, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
+import { usePreferences } from "@app/contexts/PreferencesContext";
+import "@app/components/tools/ToolPanelModePrompt.css";
+import { type ToolPanelMode } from "@app/constants/toolPanel";
 
 interface ToolPanelModePromptProps {
   onComplete?: () => void;
@@ -14,7 +14,7 @@ interface ToolPanelModePromptProps {
 
 /**
  * ToolPanelModePrompt - Lets users choose between sidebar and fullscreen tool modes
- * 
+ *
  * The orchestrator controls this via forceOpen prop. When shown standalone (legacy),
  * it uses internal state based on preferences.
  */
@@ -39,21 +39,21 @@ const ToolPanelModePrompt = ({ onComplete, forceOpen }: ToolPanelModePromptProps
 
   const handleSelect = (mode: ToolPanelMode) => {
     setToolPanelMode(mode);
-    updatePreference('defaultToolPanelMode', mode);
-    updatePreference('toolPanelModePromptSeen', true);
-    updatePreference('hasSelectedToolPanelMode', true);
+    updatePreference("defaultToolPanelMode", mode);
+    updatePreference("toolPanelModePromptSeen", true);
+    updatePreference("hasSelectedToolPanelMode", true);
     setOpened(false);
     onComplete?.();
   };
 
   const handleDismiss = () => {
-    const defaultMode: ToolPanelMode = 'sidebar';
+    const defaultMode: ToolPanelMode = "sidebar";
     if (toolPanelMode !== defaultMode) {
       setToolPanelMode(defaultMode);
-      updatePreference('defaultToolPanelMode', defaultMode);
+      updatePreference("defaultToolPanelMode", defaultMode);
     }
-    updatePreference('hasSelectedToolPanelMode', true);
-    updatePreference('toolPanelModePromptSeen', true);
+    updatePreference("hasSelectedToolPanelMode", true);
+    updatePreference("toolPanelModePromptSeen", true);
     setOpened(false);
     onComplete?.();
   };
@@ -66,25 +66,34 @@ const ToolPanelModePrompt = ({ onComplete, forceOpen }: ToolPanelModePromptProps
       size="xl"
       radius="lg"
       overlayProps={{ blur: 6, opacity: 0.35 }}
-      classNames={{ content: 'tool-panel-mode-prompt__modal' }}
-      title={t('toolPanel.modePrompt.title', 'Choose how you browse tools')}
+      classNames={{ content: "tool-panel-mode-prompt__modal" }}
+      title={t("toolPanel.modePrompt.title", "Choose how you browse tools")}
     >
       <Stack gap="lg">
         <Text size="sm" c="dimmed">
-          {t('toolPanel.modePrompt.description', 'Preview both layouts and decide how you want to explore Stirling PDF tools.')}
+          {t(
+            "toolPanel.modePrompt.description",
+            "Preview both layouts and decide how you want to explore Stirling PDF tools.",
+          )}
         </Text>
         <div className="tool-panel-mode-prompt__options">
-          <Card withBorder radius="lg" shadow="sm" padding="lg" className="tool-panel-mode-prompt__card tool-panel-mode-prompt__card--sidebar">
+          <Card
+            withBorder
+            radius="lg"
+            shadow="sm"
+            padding="lg"
+            className="tool-panel-mode-prompt__card tool-panel-mode-prompt__card--sidebar"
+          >
             <Stack gap="md" className="tool-panel-mode-prompt__card-content">
               <Group justify="space-between">
                 <Stack gap={2}>
-                <Text fw={600}>{t('toolPanel.modePrompt.sidebarTitle', 'Sidebar mode')}</Text>
-                <Text size="sm" c="dimmed">
-                  {t('toolPanel.modePrompt.sidebarDescription', 'Keep tools alongside your workspace for quick switching.')}
-                </Text>
+                  <Text fw={600}>{t("toolPanel.modePrompt.sidebarTitle", "Sidebar mode")}</Text>
+                  <Text size="sm" c="dimmed">
+                    {t("toolPanel.modePrompt.sidebarDescription", "Keep tools alongside your workspace for quick switching.")}
+                  </Text>
                 </Stack>
                 <Badge color="blue" variant="filled">
-                  {t('toolPanel.modePrompt.recommended', 'Recommended')}
+                  {t("toolPanel.modePrompt.recommended", "Recommended")}
                 </Badge>
               </Group>
               <div className="tool-panel-mode-prompt__preview tool-panel-mode-prompt__preview--sidebar" aria-hidden>
@@ -101,22 +110,25 @@ const ToolPanelModePrompt = ({ onComplete, forceOpen }: ToolPanelModePromptProps
                 </div>
               </div>
               <Button
-                variant={toolPanelMode === 'sidebar' ? 'filled' : 'light'}
+                variant={toolPanelMode === "sidebar" ? "filled" : "light"}
                 color="blue"
                 radius="md"
                 className="tool-panel-mode-prompt__action"
-                onClick={() => handleSelect('sidebar')}
+                onClick={() => handleSelect("sidebar")}
               >
-                {t('toolPanel.modePrompt.chooseSidebar', 'Use sidebar mode')}
+                {t("toolPanel.modePrompt.chooseSidebar", "Use sidebar mode")}
               </Button>
             </Stack>
           </Card>
           <Card withBorder radius="lg" shadow="xs" padding="lg" className="tool-panel-mode-prompt__card">
             <Stack gap="md" className="tool-panel-mode-prompt__card-content">
               <Stack gap={2}>
-                <Text fw={600}>{t('toolPanel.modePrompt.fullscreenTitle', 'Fullscreen mode')}</Text>
+                <Text fw={600}>{t("toolPanel.modePrompt.fullscreenTitle", "Fullscreen mode")}</Text>
                 <Text size="sm" c="dimmed">
-                  {t('toolPanel.modePrompt.fullscreenDescription', 'Browse every tool in a catalogue that covers the workspace until you pick one.')}
+                  {t(
+                    "toolPanel.modePrompt.fullscreenDescription",
+                    "Browse every tool in a catalogue that covers the workspace until you pick one.",
+                  )}
                 </Text>
               </Stack>
               <div className="tool-panel-mode-prompt__preview tool-panel-mode-prompt__preview--fullscreen" aria-hidden>
@@ -139,13 +151,13 @@ const ToolPanelModePrompt = ({ onComplete, forceOpen }: ToolPanelModePromptProps
                 </div>
               </div>
               <Button
-                variant={toolPanelMode === 'fullscreen' ? 'filled' : 'outline'}
+                variant={toolPanelMode === "fullscreen" ? "filled" : "outline"}
                 color="blue"
                 radius="md"
                 className="tool-panel-mode-prompt__action"
-                onClick={() => handleSelect('fullscreen')}
+                onClick={() => handleSelect("fullscreen")}
               >
-                {t('toolPanel.modePrompt.chooseFullscreen', 'Use fullscreen mode')}
+                {t("toolPanel.modePrompt.chooseFullscreen", "Use fullscreen mode")}
               </Button>
             </Stack>
           </Card>
@@ -157,7 +169,7 @@ const ToolPanelModePrompt = ({ onComplete, forceOpen }: ToolPanelModePromptProps
           className="tool-panel-mode-prompt__maybe-later"
           onClick={handleDismiss}
         >
-          {t('toolPanel.modePrompt.dismiss', 'Maybe later')}
+          {t("toolPanel.modePrompt.dismiss", "Maybe later")}
         </Button>
       </Stack>
     </Modal>
diff --git a/frontend/src/core/components/tools/ToolPicker.tsx b/frontend/src/core/components/tools/ToolPicker.tsx
index 9642991989..59c7819f42 100644
--- a/frontend/src/core/components/tools/ToolPicker.tsx
+++ b/frontend/src/core/components/tools/ToolPicker.tsx
@@ -31,10 +31,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
 
   const favoriteToolItems = useFavoriteToolItems(favoriteTools, toolRegistry);
 
-  const quickSection = useMemo(
-    () => visibleSections.find(s => s.key === 'quick'),
-    [visibleSections]
-  );
+  const quickSection = useMemo(() => visibleSections.find((s) => s.key === "quick"), [visibleSections]);
 
   const recommendedItems = useMemo(() => {
     if (!quickSection) return [] as Array<{ id: string; tool: ToolRegistryEntry }>;
@@ -43,14 +40,11 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
     return items;
   }, [quickSection]);
 
-  const allSection = useMemo(
-    () => visibleSections.find(s => s.key === 'all'),
-    [visibleSections]
-  );
+  const allSection = useMemo(() => visibleSections.find((s) => s.key === "all"), [visibleSections]);
 
   // Build flat list by subcategory for search mode
-  const emptyFilteredTools: ToolPickerProps['filteredTools'] = [];
-  const effectiveFilteredForSearch: ToolPickerProps['filteredTools'] = isSearching ? filteredTools : emptyFilteredTools;
+  const emptyFilteredTools: ToolPickerProps["filteredTools"] = [];
+  const effectiveFilteredForSearch: ToolPickerProps["filteredTools"] = isSearching ? filteredTools : emptyFilteredTools;
   const { searchGroups } = useToolSections(effectiveFilteredForSearch);
   const headerTextStyle: React.CSSProperties = {
     fontSize: "0.75rem",
@@ -58,10 +52,9 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
     padding: "0.5rem 0 0.25rem 0.5rem",
     textTransform: "none",
     color: "var(--text-secondary, rgba(0, 0, 0, 0.6))",
-    opacity: 0.7
+    opacity: 0.7,
   };
-  const toTitleCase = (s: string) =>
-    s.replace(/\w\S*/g, (txt) => txt.charAt(0).toUpperCase() + txt.slice(1).toLowerCase());
+  const toTitleCase = (s: string) => s.replace(/\w\S*/g, (txt) => txt.charAt(0).toUpperCase() + txt.slice(1).toLowerCase());
 
   return (
     <Box
@@ -69,7 +62,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
       style={{
         display: "flex",
         flexDirection: "column",
-        background: "var(--bg-toolbar)"
+        background: "var(--bg-toolbar)",
       }}
     >
       <Box
@@ -80,7 +73,7 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
           overflowX: "hidden",
           minHeight: 0,
           height: "100%",
-          marginTop: -2
+          marginTop: -2,
         }}
         className="tool-picker-scrollable"
       >
@@ -89,65 +82,62 @@ const ToolPicker = ({ selectedToolKey, onSelect, filteredTools, isSearching = fa
             {searchGroups.length === 0 ? (
               <NoToolsFound />
             ) : (
-                      searchGroups.map(group => renderToolButtons(t, group, selectedToolKey, onSelect, true, false, filteredTools, true))
+              searchGroups.map((group) =>
+                renderToolButtons(t, group, selectedToolKey, onSelect, true, false, filteredTools, true),
+              )
             )}
           </Stack>
         ) : (
           <>
-        {/* Flat list: favorites and recommended first, then all subcategories */}
-        <Stack p="sm" gap="xs">
-          {favoriteToolItems.length > 0 && (
-            <Box w="100%">
-              <div style={headerTextStyle}>
-                {t('toolPanel.fullscreen.favorites', 'Favourites')}
-              </div>
-              <div>
-                {favoriteToolItems.map(({ id, tool }) => (
-                  <ToolButton
-                    key={`fav-${id}`}
-                    id={id}
-                    tool={tool}
-                    isSelected={selectedToolKey === id}
-                    onSelect={onSelect}
-                    hasStars
-                  />
+            {/* Flat list: favorites and recommended first, then all subcategories */}
+            <Stack p="sm" gap="xs">
+              {favoriteToolItems.length > 0 && (
+                <Box w="100%">
+                  <div style={headerTextStyle}>{t("toolPanel.fullscreen.favorites", "Favourites")}</div>
+                  <div>
+                    {favoriteToolItems.map(({ id, tool }) => (
+                      <ToolButton
+                        key={`fav-${id}`}
+                        id={id}
+                        tool={tool}
+                        isSelected={selectedToolKey === id}
+                        onSelect={onSelect}
+                        hasStars
+                      />
+                    ))}
+                  </div>
+                </Box>
+              )}
+              {recommendedItems.length > 0 && (
+                <Box w="100%">
+                  <div style={headerTextStyle}>{t("toolPanel.fullscreen.recommended", "Recommended")}</div>
+                  <div>
+                    {recommendedItems.map(({ id, tool }) => (
+                      <ToolButton
+                        key={`rec-${id}`}
+                        id={id as ToolId}
+                        tool={tool}
+                        isSelected={selectedToolKey === id}
+                        onSelect={onSelect}
+                        hasStars
+                      />
+                    ))}
+                  </div>
+                </Box>
+              )}
+              {allSection &&
+                allSection.subcategories.map((sc: SubcategoryGroup) => (
+                  <Box key={sc.subcategoryId} w="100%">
+                    <div style={headerTextStyle}>{toTitleCase(getSubcategoryLabel(t, sc.subcategoryId))}</div>
+                    {renderToolButtons(t, sc, selectedToolKey, onSelect, false, false, undefined, true)}
+                  </Box>
                 ))}
-              </div>
-            </Box>
-          )}
-          {recommendedItems.length > 0 && (
-            <Box w="100%">
-              <div style={headerTextStyle}>
-                {t('toolPanel.fullscreen.recommended', 'Recommended')}
-              </div>
-              <div>
-                {recommendedItems.map(({ id, tool }) => (
-                  <ToolButton
-                    key={`rec-${id}`}
-                    id={id as ToolId}
-                    tool={tool}
-                    isSelected={selectedToolKey === id}
-                    onSelect={onSelect}
-                    hasStars
-                  />
-                ))}
-              </div>
-            </Box>
-          )}
-          {allSection && allSection.subcategories.map((sc: SubcategoryGroup) => (
-            <Box key={sc.subcategoryId} w="100%">
-              <div style={headerTextStyle}>
-                {toTitleCase(getSubcategoryLabel(t, sc.subcategoryId))}
-              </div>
-              {renderToolButtons(t, sc, selectedToolKey, onSelect, false, false, undefined, true)}
-            </Box>
-          ))}
-        </Stack>
+            </Stack>
 
-        {!quickSection && !allSection && <NoToolsFound />}
+            {!quickSection && !allSection && <NoToolsFound />}
 
-        {/* bottom spacer to allow scrolling past the last row */}
-        <div aria-hidden style={{ height: 200 }} />
+            {/* bottom spacer to allow scrolling past the last row */}
+            <div aria-hidden style={{ height: 200 }} />
           </>
         )}
       </Box>
diff --git a/frontend/src/core/components/tools/ToolRenderer.tsx b/frontend/src/core/components/tools/ToolRenderer.tsx
index bfa2eb91a0..229ea6b0a1 100644
--- a/frontend/src/core/components/tools/ToolRenderer.tsx
+++ b/frontend/src/core/components/tools/ToolRenderer.tsx
@@ -8,18 +8,10 @@ interface ToolRendererProps extends BaseToolProps {
   selectedToolKey: ToolId;
 }
 
-
-const ToolRenderer = ({
-  selectedToolKey,
-  onPreviewFile,
-  onComplete,
-  onError,
-}: ToolRendererProps) => {
+const ToolRenderer = ({ selectedToolKey, onPreviewFile, onComplete, onError }: ToolRendererProps) => {
   // Get the tool from context (instead of direct hook call)
   const { toolRegistry } = useToolWorkflow();
-  const selectedTool = (selectedToolKey in toolRegistry)
-    ? toolRegistry[selectedToolKey as ToolId]
-    : undefined;
+  const selectedTool = selectedToolKey in toolRegistry ? toolRegistry[selectedToolKey as ToolId] : undefined;
 
   // Handle tools that only work in workbenches (read, multiTool)
   if (selectedTool && !selectedTool.component && selectedTool.workbench) {
@@ -35,11 +27,7 @@ const ToolRenderer = ({
   // Wrap lazy-loaded component with Suspense
   return (
     <Suspense fallback={<ToolLoadingFallback toolName={selectedTool.name} />}>
-      <ToolComponent
-        onPreviewFile={onPreviewFile}
-        onComplete={onComplete}
-        onError={onError}
-      />
+      <ToolComponent onPreviewFile={onPreviewFile} onComplete={onComplete} onError={onError} />
     </Suspense>
   );
 };
diff --git a/frontend/src/core/components/tools/addAttachments/AddAttachmentsSettings.tsx b/frontend/src/core/components/tools/addAttachments/AddAttachmentsSettings.tsx
index f65ab31da5..45611c2a69 100644
--- a/frontend/src/core/components/tools/addAttachments/AddAttachmentsSettings.tsx
+++ b/frontend/src/core/components/tools/addAttachments/AddAttachmentsSettings.tsx
@@ -29,12 +29,12 @@ const AddAttachmentsSettings = ({ parameters, onParameterChange, disabled = fals
             const files = Array.from(e.target.files || []);
             // Append to existing attachments instead of replacing
             const newAttachments = [...(parameters.attachments || []), ...files];
-            onParameterChange('attachments', newAttachments);
+            onParameterChange("attachments", newAttachments);
             // Reset the input so the same file can be selected again
-            e.target.value = '';
+            e.target.value = "";
           }}
           disabled={disabled}
-          style={{ display: 'none' }}
+          style={{ display: "none" }}
           id="attachments-input"
         />
         <Button
@@ -47,8 +47,7 @@ const AddAttachmentsSettings = ({ parameters, onParameterChange, disabled = fals
         >
           {parameters.attachments?.length > 0
             ? t("AddAttachmentsRequest.addMoreFiles", "Add more files...")
-            : t("AddAttachmentsRequest.placeholder", "Choose files...")
-          }
+            : t("AddAttachmentsRequest.placeholder", "Choose files...")}
         </Button>
       </Stack>
 
@@ -57,24 +56,33 @@ const AddAttachmentsSettings = ({ parameters, onParameterChange, disabled = fals
           <Text size="sm" fw={500}>
             {t("AddAttachmentsRequest.selectedFiles", "Selected Files")} ({parameters.attachments.length})
           </Text>
-          <ScrollArea.Autosize mah={300} type="scroll" offsetScrollbars styles={{ viewport: { overflowX: 'hidden' } }}>
+          <ScrollArea.Autosize mah={300} type="scroll" offsetScrollbars styles={{ viewport: { overflowX: "hidden" } }}>
             <Stack gap="xs">
               {parameters.attachments.map((file, index) => (
-                <Group key={index} justify="space-between" p="xs" style={{ border: '1px solid var(--mantine-color-gray-3)', borderRadius: 'var(--mantine-radius-sm)', alignItems: 'flex-start' }}>
-                  <Group gap="xs" style={{ flex: 1, minWidth: 0, alignItems: 'flex-start' }}>
+                <Group
+                  key={index}
+                  justify="space-between"
+                  p="xs"
+                  style={{
+                    border: "1px solid var(--mantine-color-gray-3)",
+                    borderRadius: "var(--mantine-radius-sm)",
+                    alignItems: "flex-start",
+                  }}
+                >
+                  <Group gap="xs" style={{ flex: 1, minWidth: 0, alignItems: "flex-start" }}>
                     {/* Filename (two-line clamp, wraps, no icon on the left) */}
                     <div style={{ flex: 1, minWidth: 0 }}>
                       <div
                         style={{
-                          fontSize: 'var(--mantine-font-size-sm)',
+                          fontSize: "var(--mantine-font-size-sm)",
                           fontWeight: 400,
                           lineHeight: 1.2,
-                          display: '-webkit-box',
+                          display: "-webkit-box",
                           WebkitLineClamp: 2 as any,
-                          WebkitBoxOrient: 'vertical' as any,
-                          overflow: 'hidden',
-                          whiteSpace: 'normal',
-                          wordBreak: 'break-word',
+                          WebkitBoxOrient: "vertical" as any,
+                          overflow: "hidden",
+                          whiteSpace: "normal",
+                          wordBreak: "break-word",
                         }}
                         title={file.name}
                       >
@@ -92,7 +100,7 @@ const AddAttachmentsSettings = ({ parameters, onParameterChange, disabled = fals
                     style={{ flexShrink: 0 }}
                     onClick={() => {
                       const newAttachments = (parameters.attachments || []).filter((_, i) => i !== index);
-                      onParameterChange('attachments', newAttachments);
+                      onParameterChange("attachments", newAttachments);
                     }}
                     disabled={disabled}
                   >
@@ -113,27 +121,32 @@ const AddAttachmentsSettings = ({ parameters, onParameterChange, disabled = fals
               <Text size="sm">{t("attachments.convertToPdfA3b", "Convert to PDF/A-3b")}</Text>
               <Tooltip
                 header={{
-                  title: t("attachments.convertToPdfA3bTooltipHeader", "About PDF/A-3b Conversion")
+                  title: t("attachments.convertToPdfA3bTooltipHeader", "About PDF/A-3b Conversion"),
                 }}
                 tips={[
                   {
                     title: t("attachments.convertToPdfA3bTooltipTitle", "What it does"),
                     description: t(
                       "attachments.convertToPdfA3bTooltip",
-                      "PDF/A-3b is an archival format ensuring long-term preservation. It allows embedding arbitrary file formats as attachments. Conversion requires Ghostscript and may take longer for large files."
-                    )
-                  }
+                      "PDF/A-3b is an archival format ensuring long-term preservation. It allows embedding arbitrary file formats as attachments. Conversion requires Ghostscript and may take longer for large files.",
+                    ),
+                  },
                 ]}
                 sidebarTooltip={true}
                 pinOnClick={true}
               >
-                <LocalIcon icon="info-outline-rounded" width="1.25rem" height="1.25rem" style={{ color: 'var(--icon-files-color)', cursor: 'help' }} />
+                <LocalIcon
+                  icon="info-outline-rounded"
+                  width="1.25rem"
+                  height="1.25rem"
+                  style={{ color: "var(--icon-files-color)", cursor: "help" }}
+                />
               </Tooltip>
             </Group>
           }
           description={t("attachments.convertToPdfA3bDescription", "Creates an archival PDF with embedded attachments")}
           checked={parameters.convertToPdfA3b}
-          onChange={(event) => onParameterChange('convertToPdfA3b', event.currentTarget.checked)}
+          onChange={(event) => onParameterChange("convertToPdfA3b", event.currentTarget.checked)}
           disabled={disabled}
           styles={{ root: { flex: 1 } }}
         />
diff --git a/frontend/src/core/components/tools/addPageNumbers/AddPageNumbersAppearanceSettings.tsx b/frontend/src/core/components/tools/addPageNumbers/AddPageNumbersAppearanceSettings.tsx
index 0ff9690d8d..946ea4e896 100644
--- a/frontend/src/core/components/tools/addPageNumbers/AddPageNumbersAppearanceSettings.tsx
+++ b/frontend/src/core/components/tools/addPageNumbers/AddPageNumbersAppearanceSettings.tsx
@@ -17,69 +17,79 @@ interface AddPageNumbersAppearanceSettingsProps {
 const AddPageNumbersAppearanceSettings = ({
   parameters,
   onParameterChange,
-  disabled = false
+  disabled = false,
 }: AddPageNumbersAppearanceSettingsProps) => {
   const { t } = useTranslation();
 
   return (
     <Stack gap="md">
-      <Tooltip content={t('marginTooltip', 'Distance between the page number and the edge of the page.')}>
+      <Tooltip content={t("marginTooltip", "Distance between the page number and the edge of the page.")}>
         <Select
-          label={t('addPageNumbers.selectText.2', 'Margin')}
+          label={t("addPageNumbers.selectText.2", "Margin")}
           value={parameters.customMargin}
-          onChange={(v) => onParameterChange('customMargin', (v as any) || 'medium')}
+          onChange={(v) => onParameterChange("customMargin", (v as any) || "medium")}
           data={[
-            { value: 'small', label: t('sizes.small', 'Small') },
-            { value: 'medium', label: t('sizes.medium', 'Medium') },
-            { value: 'large', label: t('sizes.large', 'Large') },
-            { value: 'x-large', label: t('sizes.x-large', 'Extra Large') },
+            { value: "small", label: t("sizes.small", "Small") },
+            { value: "medium", label: t("sizes.medium", "Medium") },
+            { value: "large", label: t("sizes.large", "Large") },
+            { value: "x-large", label: t("sizes.x-large", "Extra Large") },
           ]}
           disabled={disabled}
           comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
         />
       </Tooltip>
 
-      <Tooltip content={t('fontSizeTooltip', 'Size of the page number text in points. Larger numbers create bigger text.')}>
+      <Tooltip content={t("fontSizeTooltip", "Size of the page number text in points. Larger numbers create bigger text.")}>
         <NumberInput
-          label={t('addPageNumbers.fontSize', 'Font Size')}
+          label={t("addPageNumbers.fontSize", "Font Size")}
           value={parameters.fontSize}
-          onChange={(v) => onParameterChange('fontSize', typeof v === 'number' ? v : 12)}
+          onChange={(v) => onParameterChange("fontSize", typeof v === "number" ? v : 12)}
           min={1}
           disabled={disabled}
         />
       </Tooltip>
 
-      <Tooltip content={t('addPageNumbers.zeroPadTooltip', 'Zero-pad (Bates Stamp) page numbers to this width (e.g. 3 => 001). Set 0 to disable.')}>
+      <Tooltip
+        content={t(
+          "addPageNumbers.zeroPadTooltip",
+          "Zero-pad (Bates Stamp) page numbers to this width (e.g. 3 => 001). Set 0 to disable.",
+        )}
+      >
         <NumberInput
-          label={t('addPageNumbers.zeroPad', 'Zero-pad Width (Bates Stamping)')}
+          label={t("addPageNumbers.zeroPad", "Zero-pad Width (Bates Stamping)")}
           value={parameters.zeroPad}
-          onChange={(v) => onParameterChange('zeroPad', typeof v === 'number' ? v : 0)}
+          onChange={(v) => onParameterChange("zeroPad", typeof v === "number" ? v : 0)}
           min={0}
           disabled={disabled}
         />
       </Tooltip>
 
-      <Tooltip content={t('fontTypeTooltip', 'Font family for the page numbers. Choose based on your document style.')}>
+      <Tooltip content={t("fontTypeTooltip", "Font family for the page numbers. Choose based on your document style.")}>
         <Select
-          label={t('addPageNumbers.fontName', 'Font Type')}
+          label={t("addPageNumbers.fontName", "Font Type")}
           value={parameters.fontType}
-          onChange={(v) => onParameterChange('fontType', (v as any) || 'Times')}
+          onChange={(v) => onParameterChange("fontType", (v as any) || "Times")}
           data={[
-            { value: 'Times', label: 'Times Roman' },
-            { value: 'Helvetica', label: 'Helvetica' },
-            { value: 'Courier', label: 'Courier New' },
+            { value: "Times", label: "Times Roman" },
+            { value: "Helvetica", label: "Helvetica" },
+            { value: "Courier", label: "Courier New" },
           ]}
           disabled={disabled}
           comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
         />
       </Tooltip>
 
-      <Tooltip content={t('customTextTooltip', 'Optional custom format for page numbers. Use {n} as placeholder for the number. Example: "Page {n}" will show "Page 1", "Page 2", etc.')}>
+      <Tooltip
+        content={t(
+          "customTextTooltip",
+          'Optional custom format for page numbers. Use {n} as placeholder for the number. Example: "Page {n}" will show "Page 1", "Page 2", etc.',
+        )}
+      >
         <TextInput
-          label={t('addPageNumbers.selectText.6', 'Custom Text Format')}
-          value={parameters.customText || ''}
-          onChange={(e) => onParameterChange('customText', e.currentTarget.value)}
-          placeholder={t('addPageNumbers.customNumberDesc', 'e.g., "Page {n}" or leave blank for just numbers')}
+          label={t("addPageNumbers.selectText.6", "Custom Text Format")}
+          value={parameters.customText || ""}
+          onChange={(e) => onParameterChange("customText", e.currentTarget.value)}
+          placeholder={t("addPageNumbers.customNumberDesc", 'e.g., "Page {n}" or leave blank for just numbers')}
           disabled={disabled}
         />
       </Tooltip>
diff --git a/frontend/src/core/components/tools/addPageNumbers/AddPageNumbersAutomationSettings.tsx b/frontend/src/core/components/tools/addPageNumbers/AddPageNumbersAutomationSettings.tsx
index 2cb4ff17cf..6cf36954e8 100644
--- a/frontend/src/core/components/tools/addPageNumbers/AddPageNumbersAutomationSettings.tsx
+++ b/frontend/src/core/components/tools/addPageNumbers/AddPageNumbersAutomationSettings.tsx
@@ -19,7 +19,7 @@ interface AddPageNumbersAutomationSettingsProps {
 const AddPageNumbersAutomationSettings = ({
   parameters,
   onParameterChange,
-  disabled = false
+  disabled = false,
 }: AddPageNumbersAutomationSettingsProps) => {
   const { t } = useTranslation();
 
@@ -27,7 +27,9 @@ const AddPageNumbersAutomationSettings = ({
     <Stack gap="lg">
       {/* Position & Pages Section */}
       <Stack gap="md">
-        <Text size="sm" fw={600}>{t("addPageNumbers.positionAndPages", "Position & Pages")}</Text>
+        <Text size="sm" fw={600}>
+          {t("addPageNumbers.positionAndPages", "Position & Pages")}
+        </Text>
         <AddPageNumbersPositionSettings
           parameters={parameters}
           onParameterChange={onParameterChange}
@@ -41,12 +43,10 @@ const AddPageNumbersAutomationSettings = ({
 
       {/* Appearance Section */}
       <Stack gap="md">
-        <Text size="sm" fw={600}>{t("addPageNumbers.customize", "Customize Appearance")}</Text>
-        <AddPageNumbersAppearanceSettings
-          parameters={parameters}
-          onParameterChange={onParameterChange}
-          disabled={disabled}
-        />
+        <Text size="sm" fw={600}>
+          {t("addPageNumbers.customize", "Customize Appearance")}
+        </Text>
+        <AddPageNumbersAppearanceSettings parameters={parameters} onParameterChange={onParameterChange} disabled={disabled} />
       </Stack>
     </Stack>
   );
diff --git a/frontend/src/core/components/tools/addPageNumbers/AddPageNumbersPositionSettings.tsx b/frontend/src/core/components/tools/addPageNumbers/AddPageNumbersPositionSettings.tsx
index c64f1cac12..a04be013d0 100644
--- a/frontend/src/core/components/tools/addPageNumbers/AddPageNumbersPositionSettings.tsx
+++ b/frontend/src/core/components/tools/addPageNumbers/AddPageNumbersPositionSettings.tsx
@@ -21,7 +21,7 @@ const AddPageNumbersPositionSettings = ({
   onParameterChange,
   disabled = false,
   file = null,
-  showQuickGrid = true
+  showQuickGrid = true,
 }: AddPageNumbersPositionSettingsProps) => {
   const { t } = useTranslation();
 
@@ -41,23 +41,35 @@ const AddPageNumbersPositionSettings = ({
 
       {/* Pages & Starting Number Section */}
       <Stack gap="md">
-        <Text size="sm" fw={500} mb="xs">{t('addPageNumbers.pagesAndStarting', 'Pages & Starting Number')}</Text>
+        <Text size="sm" fw={500} mb="xs">
+          {t("addPageNumbers.pagesAndStarting", "Pages & Starting Number")}
+        </Text>
 
-        <Tooltip content={t('pageSelectionPrompt', 'Custom Page Selection (Enter a comma-separated list of page numbers 1,5,6 or Functions like 2n+1)')}>
+        <Tooltip
+          content={t(
+            "pageSelectionPrompt",
+            "Custom Page Selection (Enter a comma-separated list of page numbers 1,5,6 or Functions like 2n+1)",
+          )}
+        >
           <TextInput
-            label={t('addPageNumbers.selectText.5', 'Pages to Number')}
-            value={parameters.pagesToNumber || ''}
-            onChange={(e) => onParameterChange('pagesToNumber', e.currentTarget.value)}
-            placeholder={t('addPageNumbers.numberPagesDesc', 'e.g., 1,3,5-8 or leave blank for all pages')}
+            label={t("addPageNumbers.selectText.5", "Pages to Number")}
+            value={parameters.pagesToNumber || ""}
+            onChange={(e) => onParameterChange("pagesToNumber", e.currentTarget.value)}
+            placeholder={t("addPageNumbers.numberPagesDesc", "e.g., 1,3,5-8 or leave blank for all pages")}
             disabled={disabled}
           />
         </Tooltip>
 
-        <Tooltip content={t('startingNumberTooltip', 'The first number to display. Subsequent pages will increment from this number.')}>
+        <Tooltip
+          content={t(
+            "startingNumberTooltip",
+            "The first number to display. Subsequent pages will increment from this number.",
+          )}
+        >
           <NumberInput
-            label={t('addPageNumbers.selectText.4', 'Starting Number')}
+            label={t("addPageNumbers.selectText.4", "Starting Number")}
             value={parameters.startingNumber}
-            onChange={(v) => onParameterChange('startingNumber', typeof v === 'number' ? v : 1)}
+            onChange={(v) => onParameterChange("startingNumber", typeof v === "number" ? v : 1)}
             min={1}
             disabled={disabled}
           />
diff --git a/frontend/src/core/components/tools/addPageNumbers/PageNumberPreview.module.css b/frontend/src/core/components/tools/addPageNumbers/PageNumberPreview.module.css
index eff81e632c..8a20a78340 100644
--- a/frontend/src/core/components/tools/addPageNumbers/PageNumberPreview.module.css
+++ b/frontend/src/core/components/tools/addPageNumbers/PageNumberPreview.module.css
@@ -55,15 +55,48 @@
 }
 
 /* Position numbers at edges within each tile with extra top/bottom spacing */
-.gridTile:nth-child(1) { align-items: flex-start; justify-content: flex-start; padding-top: 4px; } /* top-left */
-.gridTile:nth-child(2) { align-items: flex-start; justify-content: center; padding-top: 4px; }     /* top-center */
-.gridTile:nth-child(3) { align-items: flex-start; justify-content: flex-end; padding-top: 4px; }  /* top-right */
-.gridTile:nth-child(4) { align-items: center; justify-content: flex-start; }    /* middle-left */
-.gridTile:nth-child(5) { align-items: center; justify-content: center; }        /* center */
-.gridTile:nth-child(6) { align-items: center; justify-content: flex-end; }      /* middle-right */
-.gridTile:nth-child(7) { align-items: flex-end; justify-content: flex-start; padding-bottom: 4px; }  /* bottom-left */
-.gridTile:nth-child(8) { align-items: flex-end; justify-content: center; padding-bottom: 4px; }      /* bottom-center */
-.gridTile:nth-child(9) { align-items: flex-end; justify-content: flex-end; padding-bottom: 4px; }    /* bottom-right */
+.gridTile:nth-child(1) {
+  align-items: flex-start;
+  justify-content: flex-start;
+  padding-top: 4px;
+} /* top-left */
+.gridTile:nth-child(2) {
+  align-items: flex-start;
+  justify-content: center;
+  padding-top: 4px;
+} /* top-center */
+.gridTile:nth-child(3) {
+  align-items: flex-start;
+  justify-content: flex-end;
+  padding-top: 4px;
+} /* top-right */
+.gridTile:nth-child(4) {
+  align-items: center;
+  justify-content: flex-start;
+} /* middle-left */
+.gridTile:nth-child(5) {
+  align-items: center;
+  justify-content: center;
+} /* center */
+.gridTile:nth-child(6) {
+  align-items: center;
+  justify-content: flex-end;
+} /* middle-right */
+.gridTile:nth-child(7) {
+  align-items: flex-end;
+  justify-content: flex-start;
+  padding-bottom: 4px;
+} /* bottom-left */
+.gridTile:nth-child(8) {
+  align-items: flex-end;
+  justify-content: center;
+  padding-bottom: 4px;
+} /* bottom-center */
+.gridTile:nth-child(9) {
+  align-items: flex-end;
+  justify-content: flex-end;
+  padding-bottom: 4px;
+} /* bottom-right */
 
 /* Base padding for all tiles */
 .gridTile {
@@ -99,4 +132,4 @@
   margin-top: 8px;
   opacity: 0.7;
   font-size: 12px;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/core/components/tools/addPageNumbers/PageNumberPreview.tsx b/frontend/src/core/components/tools/addPageNumbers/PageNumberPreview.tsx
index 7bf0dab04d..1741f45bf3 100644
--- a/frontend/src/core/components/tools/addPageNumbers/PageNumberPreview.tsx
+++ b/frontend/src/core/components/tools/addPageNumbers/PageNumberPreview.tsx
@@ -1,20 +1,23 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { AddPageNumbersParameters } from '@app/components/tools/addPageNumbers/useAddPageNumbersParameters';
-import { pdfWorkerManager } from '@app/services/pdfWorkerManager';
-import { useThumbnailGeneration } from '@app/hooks/useThumbnailGeneration';
-import styles from '@app/components/tools/addPageNumbers/PageNumberPreview.module.css';
-import { PrivateContent } from '@app/components/shared/PrivateContent';
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { AddPageNumbersParameters } from "@app/components/tools/addPageNumbers/useAddPageNumbersParameters";
+import { pdfWorkerManager } from "@app/services/pdfWorkerManager";
+import { useThumbnailGeneration } from "@app/hooks/useThumbnailGeneration";
+import styles from "@app/components/tools/addPageNumbers/PageNumberPreview.module.css";
+import { PrivateContent } from "@app/components/shared/PrivateContent";
 
 // Simple utilities for page numbers (adapted from stamp)
 const A4_ASPECT_RATIO = 0.707;
 
 const getFirstSelectedPage = (input: string): number => {
   if (!input) return 1;
-  const parts = input.split(',').map(s => s.trim()).filter(Boolean);
+  const parts = input
+    .split(",")
+    .map((s) => s.trim())
+    .filter(Boolean);
   for (const part of parts) {
     if (/^\d+\s*-\s*\d+$/.test(part)) {
-      const low = parseInt(part.split('-')[0].trim(), 10);
+      const low = parseInt(part.split("-")[0].trim(), 10);
       if (Number.isFinite(low) && low > 0) return low;
     }
     const n = parseInt(part, 10);
@@ -23,23 +26,22 @@ const getFirstSelectedPage = (input: string): number => {
   return 1;
 };
 
-
-const detectOverallBackgroundColor = async (thumbnailSrc: string | null): Promise<'light' | 'dark'> => {
+const detectOverallBackgroundColor = async (thumbnailSrc: string | null): Promise<"light" | "dark"> => {
   if (!thumbnailSrc) {
-    return 'light'; // Default to light background if no thumbnail
+    return "light"; // Default to light background if no thumbnail
   }
 
   return new Promise((resolve) => {
     const img = new Image();
-    img.crossOrigin = 'anonymous';
+    img.crossOrigin = "anonymous";
 
     img.onload = () => {
       try {
-        const canvas = document.createElement('canvas');
-        const ctx = canvas.getContext('2d');
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
 
         if (!ctx) {
-          resolve('light');
+          resolve("light");
           return;
         }
 
@@ -65,7 +67,7 @@ const detectOverallBackgroundColor = async (thumbnailSrc: string | null): Promis
           const b = data[i + 2];
 
           // Calculate perceived brightness using luminance formula
-          const brightness = (0.299 * r + 0.587 * g + 0.114 * b);
+          const brightness = 0.299 * r + 0.587 * g + 0.114 * b;
           totalBrightness += brightness;
           pixelCount++;
         }
@@ -73,14 +75,14 @@ const detectOverallBackgroundColor = async (thumbnailSrc: string | null): Promis
         const averageBrightness = totalBrightness / pixelCount;
 
         // Threshold: 128 is middle gray
-        resolve(averageBrightness > 128 ? 'light' : 'dark');
+        resolve(averageBrightness > 128 ? "light" : "dark");
       } catch (error) {
-        console.warn('Error detecting background color:', error);
-        resolve('light'); // Default fallback
+        console.warn("Error detecting background color:", error);
+        resolve("light"); // Default fallback
       }
     };
 
-    img.onerror = () => resolve('light');
+    img.onerror = () => resolve("light");
     img.src = thumbnailSrc;
   });
 };
@@ -100,14 +102,14 @@ export default function PageNumberPreview({ parameters, onParameterChange, file,
   const [pageThumbnail, setPageThumbnail] = useState<string | null>(null);
   const { requestThumbnail } = useThumbnailGeneration();
   const [hoverTile, setHoverTile] = useState<number | null>(null);
-  const [textColor, setTextColor] = useState<string>('#fff');
+  const [textColor, setTextColor] = useState<string>("#fff");
 
   // Observe container size for responsive positioning
   useEffect(() => {
     const node = containerRef.current;
     if (!node) return;
     const resize = () => {
-      const aspect = pageSize ? (pageSize.widthPts / pageSize.heightPts) : A4_ASPECT_RATIO;
+      const aspect = pageSize ? pageSize.widthPts / pageSize.heightPts : A4_ASPECT_RATIO;
       setContainerSize({ width: node.clientWidth, height: node.clientWidth / aspect });
     };
     resize();
@@ -120,7 +122,7 @@ export default function PageNumberPreview({ parameters, onParameterChange, file,
   useEffect(() => {
     let cancelled = false;
     const load = async () => {
-      if (!file || file.type !== 'application/pdf') {
+      if (!file || file.type !== "application/pdf") {
         setPageSize(null);
         return;
       }
@@ -138,19 +140,21 @@ export default function PageNumberPreview({ parameters, onParameterChange, file,
       }
     };
     load();
-    return () => { cancelled = true; };
+    return () => {
+      cancelled = true;
+    };
   }, [file]);
 
   // Load first-page thumbnail for background preview
   useEffect(() => {
     let isActive = true;
     const loadThumb = async () => {
-      if (!file || file.type !== 'application/pdf') {
+      if (!file || file.type !== "application/pdf") {
         setPageThumbnail(null);
         return;
       }
       try {
-        const pageNumber = Math.max(1, getFirstSelectedPage(parameters.pagesToNumber || '1'));
+        const pageNumber = Math.max(1, getFirstSelectedPage(parameters.pagesToNumber || "1"));
         const pageId = `${file.name}:${file.size}:${file.lastModified}:page:${pageNumber}`;
         const thumb = await requestThumbnail(pageId, file, pageNumber);
         if (isActive) setPageThumbnail(thumb || null);
@@ -159,38 +163,43 @@ export default function PageNumberPreview({ parameters, onParameterChange, file,
       }
     };
     loadThumb();
-    return () => { isActive = false; };
+    return () => {
+      isActive = false;
+    };
   }, [file, parameters.pagesToNumber, requestThumbnail]);
 
   // Detect text color based on overall PDF background
   useEffect(() => {
     if (!pageThumbnail) {
-      setTextColor('#fff'); // Default to white for no thumbnail
+      setTextColor("#fff"); // Default to white for no thumbnail
       return;
     }
 
     const detectColor = async () => {
       const backgroundType = await detectOverallBackgroundColor(pageThumbnail);
-      setTextColor(backgroundType === 'light' ? '#000' : '#fff');
+      setTextColor(backgroundType === "light" ? "#000" : "#fff");
     };
 
     detectColor();
   }, [pageThumbnail]);
 
-  const containerStyle = useMemo(() => ({
-    position: 'relative' as const,
-    width: '100%',
-    aspectRatio: `${(pageSize?.widthPts ?? 595.28) / (pageSize?.heightPts ?? 841.89)} / 1`,
-    backgroundColor: pageThumbnail ? 'white' : 'rgba(255,255,255,0.03)',
-    border: '1px solid var(--border-default, #333)',
-    overflow: 'hidden' as const
-  }), [pageSize, pageThumbnail]);
+  const containerStyle = useMemo(
+    () => ({
+      position: "relative" as const,
+      width: "100%",
+      aspectRatio: `${(pageSize?.widthPts ?? 595.28) / (pageSize?.heightPts ?? 841.89)} / 1`,
+      backgroundColor: pageThumbnail ? "white" : "rgba(255,255,255,0.03)",
+      border: "1px solid var(--border-default, #333)",
+      overflow: "hidden" as const,
+    }),
+    [pageSize, pageThumbnail],
+  );
 
   return (
     <div>
       <div className={styles.previewHeader}>
         <div className={styles.divider} />
-        <div className={styles.previewLabel}>{t('addPageNumbers.preview', 'Preview Page Numbers')}</div>
+        <div className={styles.previewLabel}>{t("addPageNumbers.preview", "Preview Page Numbers")}</div>
       </div>
       <div
         ref={containerRef}
@@ -199,12 +208,7 @@ export default function PageNumberPreview({ parameters, onParameterChange, file,
       >
         {pageThumbnail && (
           <PrivateContent>
-            <img
-              src={pageThumbnail}
-              alt="page preview"
-              className={styles.pageThumbnail}
-              draggable={false}
-            />
+            <img src={pageThumbnail} alt="page preview" className={styles.pageThumbnail} draggable={false} />
           </PrivateContent>
         )}
 
@@ -212,21 +216,20 @@ export default function PageNumberPreview({ parameters, onParameterChange, file,
         {showQuickGrid && (
           <div className={styles.quickGrid}>
             {Array.from({ length: 9 }).map((_, i) => {
-              const idx = (i + 1) as 1|2|3|4|5|6|7|8|9;
+              const idx = (i + 1) as 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
               const selected = parameters.position === idx;
               return (
                 <button
                   key={idx}
                   type="button"
-                  className={`${styles.gridTile} ${selected || hoverTile === idx ? styles.gridTileSelected : ''} ${hoverTile === idx ? styles.gridTileHovered : ''}`}
-                  onClick={() => onParameterChange('position', idx as any)}
+                  className={`${styles.gridTile} ${selected || hoverTile === idx ? styles.gridTileSelected : ""} ${hoverTile === idx ? styles.gridTileHovered : ""}`}
+                  onClick={() => onParameterChange("position", idx as any)}
                   onMouseEnter={() => setHoverTile(idx)}
                   onMouseLeave={() => setHoverTile(null)}
                   style={{
                     color: textColor,
-                    textShadow: textColor === '#fff'
-                      ? '1px 1px 2px rgba(0, 0, 0, 0.8)'
-                      : '1px 1px 2px rgba(255, 255, 255, 0.8)'
+                    textShadow:
+                      textColor === "#fff" ? "1px 1px 2px rgba(0, 0, 0, 0.8)" : "1px 1px 2px rgba(255, 255, 255, 0.8)",
                   }}
                 >
                   {idx}
@@ -237,7 +240,7 @@ export default function PageNumberPreview({ parameters, onParameterChange, file,
         )}
       </div>
       <div className={styles.previewDisclaimer}>
-        {t('addPageNumbers.previewDisclaimer', 'Preview is approximate. Final output may vary due to PDF font metrics.')}
+        {t("addPageNumbers.previewDisclaimer", "Preview is approximate. Final output may vary due to PDF font metrics.")}
       </div>
     </div>
   );
diff --git a/frontend/src/core/components/tools/addPageNumbers/useAddPageNumbersOperation.ts b/frontend/src/core/components/tools/addPageNumbers/useAddPageNumbersOperation.ts
index 48c2d2c45a..42b38f6d0c 100644
--- a/frontend/src/core/components/tools/addPageNumbers/useAddPageNumbersOperation.ts
+++ b/frontend/src/core/components/tools/addPageNumbers/useAddPageNumbersOperation.ts
@@ -1,19 +1,19 @@
-import { useTranslation } from 'react-i18next';
-import { ToolType, useToolOperation } from '@app/hooks/tools/shared/useToolOperation';
-import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
-import { AddPageNumbersParameters, defaultParameters } from '@app/components/tools/addPageNumbers/useAddPageNumbersParameters';
+import { useTranslation } from "react-i18next";
+import { ToolType, useToolOperation } from "@app/hooks/tools/shared/useToolOperation";
+import { createStandardErrorHandler } from "@app/utils/toolErrorHandler";
+import { AddPageNumbersParameters, defaultParameters } from "@app/components/tools/addPageNumbers/useAddPageNumbersParameters";
 
 export const buildAddPageNumbersFormData = (parameters: AddPageNumbersParameters, file: File): FormData => {
   const formData = new FormData();
-  formData.append('fileInput', file);
-  formData.append('customMargin', parameters.customMargin);
-  formData.append('position', String(parameters.position));
-  formData.append('fontSize', String(parameters.fontSize));
-  formData.append('fontType', parameters.fontType);
-  formData.append('startingNumber', String(parameters.startingNumber));
-  formData.append('pagesToNumber', parameters.pagesToNumber);
-  formData.append('customText', parameters.customText);
-  formData.append('zeroPad', String(parameters.zeroPad));
+  formData.append("fileInput", file);
+  formData.append("customMargin", parameters.customMargin);
+  formData.append("position", String(parameters.position));
+  formData.append("fontSize", String(parameters.fontSize));
+  formData.append("fontType", parameters.fontType);
+  formData.append("startingNumber", String(parameters.startingNumber));
+  formData.append("pagesToNumber", parameters.pagesToNumber);
+  formData.append("customText", parameters.customText);
+  formData.append("zeroPad", String(parameters.zeroPad));
 
   return formData;
 };
@@ -21,8 +21,8 @@ export const buildAddPageNumbersFormData = (parameters: AddPageNumbersParameters
 export const addPageNumbersOperationConfig = {
   toolType: ToolType.singleFile,
   buildFormData: buildAddPageNumbersFormData,
-  operationType: 'addPageNumbers',
-  endpoint: '/api/v1/misc/add-page-numbers',
+  operationType: "addPageNumbers",
+  endpoint: "/api/v1/misc/add-page-numbers",
   defaultParameters,
 } as const;
 
@@ -32,7 +32,7 @@ export const useAddPageNumbersOperation = () => {
   return useToolOperation<AddPageNumbersParameters>({
     ...addPageNumbersOperationConfig,
     getErrorMessage: createStandardErrorHandler(
-      t('addPageNumbers.error.failed', 'An error occurred while adding page numbers to the PDF.')
+      t("addPageNumbers.error.failed", "An error occurred while adding page numbers to the PDF."),
     ),
   });
-};
\ No newline at end of file
+};
diff --git a/frontend/src/core/components/tools/addPageNumbers/useAddPageNumbersParameters.ts b/frontend/src/core/components/tools/addPageNumbers/useAddPageNumbersParameters.ts
index ea5c623cb4..f83e8b0f05 100644
--- a/frontend/src/core/components/tools/addPageNumbers/useAddPageNumbersParameters.ts
+++ b/frontend/src/core/components/tools/addPageNumbers/useAddPageNumbersParameters.ts
@@ -1,11 +1,11 @@
-import { BaseParameters } from '@app/types/parameters';
-import { useBaseParameters, type BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
+import { BaseParameters } from "@app/types/parameters";
+import { useBaseParameters, type BaseParametersHook } from "@app/hooks/tools/shared/useBaseParameters";
 
 export interface AddPageNumbersParameters extends BaseParameters {
-  customMargin: 'small' | 'medium' | 'large' | 'x-large';
+  customMargin: "small" | "medium" | "large" | "x-large";
   position: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
   fontSize: number;
-  fontType: 'Times' | 'Helvetica' | 'Courier';
+  fontType: "Times" | "Helvetica" | "Courier";
   startingNumber: number;
   pagesToNumber: string;
   customText: string;
@@ -14,13 +14,13 @@ export interface AddPageNumbersParameters extends BaseParameters {
 }
 
 export const defaultParameters: AddPageNumbersParameters = {
-  customMargin: 'medium',
+  customMargin: "medium",
   position: 8, // Default to bottom center like the original HTML
   fontSize: 12,
-  fontType: 'Times',
+  fontType: "Times",
   startingNumber: 1,
-  pagesToNumber: '',
-  customText: '',
+  pagesToNumber: "",
+  customText: "",
   zeroPad: 0,
 };
 
@@ -29,9 +29,9 @@ export type AddPageNumbersParametersHook = BaseParametersHook<AddPageNumbersPara
 export const useAddPageNumbersParameters = (): AddPageNumbersParametersHook => {
   return useBaseParameters<AddPageNumbersParameters>({
     defaultParameters,
-    endpointName: 'add-page-numbers',
+    endpointName: "add-page-numbers",
     validateFn: (params): boolean => {
       return params.fontSize > 0 && params.startingNumber > 0;
     },
   });
-};
\ No newline at end of file
+};
diff --git a/frontend/src/core/components/tools/addPassword/AddPasswordSettings.test.tsx b/frontend/src/core/components/tools/addPassword/AddPasswordSettings.test.tsx
index 4dea56e1ea..2c03dba394 100644
--- a/frontend/src/core/components/tools/addPassword/AddPasswordSettings.test.tsx
+++ b/frontend/src/core/components/tools/addPassword/AddPasswordSettings.test.tsx
@@ -1,174 +1,143 @@
-import { describe, expect, test, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { MantineProvider } from '@mantine/core';
-import AddPasswordSettings from '@app/components/tools/addPassword/AddPasswordSettings';
-import { defaultParameters } from '@app/hooks/tools/addPassword/useAddPasswordParameters';
+import { describe, expect, test, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { MantineProvider } from "@mantine/core";
+import AddPasswordSettings from "@app/components/tools/addPassword/AddPasswordSettings";
+import { defaultParameters } from "@app/hooks/tools/addPassword/useAddPasswordParameters";
 
 // Mock useTranslation with predictable return values
 const mockT = vi.fn((key: string) => `mock-${key}`);
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({ t: mockT })
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: mockT }),
 }));
 
 // Wrapper component to provide Mantine context
-const TestWrapper = ({ children }: { children: React.ReactNode }) => (
-  <MantineProvider>{children}</MantineProvider>
-);
+const TestWrapper = ({ children }: { children: React.ReactNode }) => <MantineProvider>{children}</MantineProvider>;
 
-describe('AddPasswordSettings', () => {
+describe("AddPasswordSettings", () => {
   const mockOnParameterChange = vi.fn();
 
   beforeEach(() => {
     vi.clearAllMocks();
   });
 
-  test('should render password input fields', () => {
+  test("should render password input fields", () => {
     render(
       <TestWrapper>
-        <AddPasswordSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <AddPasswordSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
     // Should render user and owner password fields labels
-    expect(screen.getByText('mock-addPassword.passwords.user.label')).toBeInTheDocument();
-    expect(screen.getByText('mock-addPassword.passwords.owner.label')).toBeInTheDocument();
+    expect(screen.getByText("mock-addPassword.passwords.user.label")).toBeInTheDocument();
+    expect(screen.getByText("mock-addPassword.passwords.owner.label")).toBeInTheDocument();
   });
 
-  test('should render encryption key length select', () => {
+  test("should render encryption key length select", () => {
     render(
       <TestWrapper>
-        <AddPasswordSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <AddPasswordSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
     // Should render key length select input
-    expect(screen.getByRole('textbox', { name: /keyLength/i })).toBeInTheDocument();
+    expect(screen.getByRole("textbox", { name: /keyLength/i })).toBeInTheDocument();
   });
 
-  test('should render main component sections', () => {
+  test("should render main component sections", () => {
     render(
       <TestWrapper>
-        <AddPasswordSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <AddPasswordSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
     // Check that main section titles are rendered
-    expect(screen.getByText('mock-addPassword.passwords.user.label')).toBeInTheDocument();
-    expect(screen.getByText('mock-addPassword.encryption.keyLength.label')).toBeInTheDocument();
+    expect(screen.getByText("mock-addPassword.passwords.user.label")).toBeInTheDocument();
+    expect(screen.getByText("mock-addPassword.encryption.keyLength.label")).toBeInTheDocument();
   });
 
-  test('should call onParameterChange when password fields are modified', () => {
+  test("should call onParameterChange when password fields are modified", () => {
     render(
       <TestWrapper>
-        <AddPasswordSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <AddPasswordSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
     // This test is complex with Mantine's PasswordInput, just verify the component renders
-    expect(screen.getByText('mock-addPassword.passwords.user.label')).toBeInTheDocument();
+    expect(screen.getByText("mock-addPassword.passwords.user.label")).toBeInTheDocument();
   });
 
-  test('should call onParameterChange when key length is changed', () => {
+  test("should call onParameterChange when key length is changed", () => {
     render(
       <TestWrapper>
-        <AddPasswordSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <AddPasswordSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
     // Find key length select and change it
-    const keyLengthSelect = screen.getByText('mock-addPassword.encryption.keyLength.128bit');
+    const keyLengthSelect = screen.getByText("mock-addPassword.encryption.keyLength.128bit");
 
     fireEvent.mouseDown(keyLengthSelect);
-    const option256 = screen.getByText('mock-addPassword.encryption.keyLength.256bit');
+    const option256 = screen.getByText("mock-addPassword.encryption.keyLength.256bit");
     fireEvent.click(option256);
 
-    expect(mockOnParameterChange).toHaveBeenCalledWith('keyLength', 256);
+    expect(mockOnParameterChange).toHaveBeenCalledWith("keyLength", 256);
   });
 
-  test('should disable all form elements when disabled prop is true', () => {
+  test("should disable all form elements when disabled prop is true", () => {
     render(
       <TestWrapper>
-        <AddPasswordSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-          disabled={true}
-        />
-      </TestWrapper>
+        <AddPasswordSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} disabled={true} />
+      </TestWrapper>,
     );
 
     // Check password inputs are disabled
-    const passwordInputs = screen.getAllByRole('textbox');
-    passwordInputs.forEach(input => {
+    const passwordInputs = screen.getAllByRole("textbox");
+    passwordInputs.forEach((input) => {
       expect(input).toBeDisabled();
     });
 
     // Check key length select is disabled - simplified test due to Mantine complexity
-    expect(screen.getByText('mock-addPassword.encryption.keyLength.128bit')).toBeInTheDocument();
+    expect(screen.getByText("mock-addPassword.encryption.keyLength.128bit")).toBeInTheDocument();
   });
 
-  test('should enable all form elements when disabled prop is false', () => {
+  test("should enable all form elements when disabled prop is false", () => {
     render(
       <TestWrapper>
-        <AddPasswordSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-          disabled={false}
-        />
-      </TestWrapper>
+        <AddPasswordSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} disabled={false} />
+      </TestWrapper>,
     );
 
     // Check password inputs are enabled
-    const passwordInputs = screen.getAllByRole('textbox');
-    passwordInputs.forEach(input => {
+    const passwordInputs = screen.getAllByRole("textbox");
+    passwordInputs.forEach((input) => {
       expect(input).not.toBeDisabled();
     });
 
     // Check key length select is enabled - simplified test due to Mantine complexity
-    expect(screen.getByText('mock-addPassword.encryption.keyLength.128bit')).toBeInTheDocument();
+    expect(screen.getByText("mock-addPassword.encryption.keyLength.128bit")).toBeInTheDocument();
   });
 
-  test('should call translation function with correct keys', () => {
+  test("should call translation function with correct keys", () => {
     render(
       <TestWrapper>
-        <AddPasswordSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <AddPasswordSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
     // Verify that translation keys are being called
-    expect(mockT).toHaveBeenCalledWith('addPassword.passwords.user.label', 'User Password');
-    expect(mockT).toHaveBeenCalledWith('addPassword.passwords.owner.label', 'Owner Password');
+    expect(mockT).toHaveBeenCalledWith("addPassword.passwords.user.label", "User Password");
+    expect(mockT).toHaveBeenCalledWith("addPassword.passwords.owner.label", "Owner Password");
   });
 
   test.each([
-    { keyLength: 40, expectedLabel: 'mock-addPassword.encryption.keyLength.40bit' },
-    { keyLength: 128, expectedLabel: 'mock-addPassword.encryption.keyLength.128bit' },
-    { keyLength: 256, expectedLabel: 'mock-addPassword.encryption.keyLength.256bit' }
-  ])('should handle key length $keyLength correctly', ({ keyLength, expectedLabel }) => {
+    { keyLength: 40, expectedLabel: "mock-addPassword.encryption.keyLength.40bit" },
+    { keyLength: 128, expectedLabel: "mock-addPassword.encryption.keyLength.128bit" },
+    { keyLength: 256, expectedLabel: "mock-addPassword.encryption.keyLength.256bit" },
+  ])("should handle key length $keyLength correctly", ({ keyLength, expectedLabel }) => {
     render(
       <TestWrapper>
-        <AddPasswordSettings
-          parameters={{ ...defaultParameters, keyLength }}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <AddPasswordSettings parameters={{ ...defaultParameters, keyLength }} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
     expect(screen.getByText(expectedLabel)).toBeInTheDocument();
diff --git a/frontend/src/core/components/tools/addPassword/AddPasswordSettings.tsx b/frontend/src/core/components/tools/addPassword/AddPasswordSettings.tsx
index bc046372c2..7eed7dcc84 100644
--- a/frontend/src/core/components/tools/addPassword/AddPasswordSettings.tsx
+++ b/frontend/src/core/components/tools/addPassword/AddPasswordSettings.tsx
@@ -17,17 +17,17 @@ const AddPasswordSettings = ({ parameters, onParameterChange, disabled = false }
       {/* Password Settings */}
       <Stack gap="sm">
         <PasswordInput
-          label={t('addPassword.passwords.user.label', 'User Password')}
-          placeholder={t('addPassword.passwords.user.placeholder', 'Enter user password')}
+          label={t("addPassword.passwords.user.label", "User Password")}
+          placeholder={t("addPassword.passwords.user.placeholder", "Enter user password")}
           value={parameters.password}
-          onChange={(e) => onParameterChange('password', e.target.value)}
+          onChange={(e) => onParameterChange("password", e.target.value)}
           disabled={disabled}
         />
         <PasswordInput
-          label={t('addPassword.passwords.owner.label', 'Owner Password')}
-          placeholder={t('addPassword.passwords.owner.placeholder', 'Enter owner password')}
+          label={t("addPassword.passwords.owner.label", "Owner Password")}
+          placeholder={t("addPassword.passwords.owner.placeholder", "Enter owner password")}
           value={parameters.ownerPassword}
-          onChange={(e) => onParameterChange('ownerPassword', e.target.value)}
+          onChange={(e) => onParameterChange("ownerPassword", e.target.value)}
           disabled={disabled}
         />
       </Stack>
@@ -35,23 +35,22 @@ const AddPasswordSettings = ({ parameters, onParameterChange, disabled = false }
       {/* Encryption Settings */}
       <Stack gap="sm">
         <Select
-          label={t('addPassword.encryption.keyLength.label', 'Encryption Key Length')}
+          label={t("addPassword.encryption.keyLength.label", "Encryption Key Length")}
           value={parameters.keyLength.toString()}
           onChange={(value) => {
             if (value) {
-              onParameterChange('keyLength', parseInt(value));
+              onParameterChange("keyLength", parseInt(value));
             }
           }}
           disabled={disabled}
           data={[
-            { value: '40', label: t('addPassword.encryption.keyLength.40bit', '40-bit (Low)') },
-            { value: '128', label: t('addPassword.encryption.keyLength.128bit', '128-bit (Standard)') },
-            { value: '256', label: t('addPassword.encryption.keyLength.256bit', '256-bit (High)') }
+            { value: "40", label: t("addPassword.encryption.keyLength.40bit", "40-bit (Low)") },
+            { value: "128", label: t("addPassword.encryption.keyLength.128bit", "128-bit (Standard)") },
+            { value: "256", label: t("addPassword.encryption.keyLength.256bit", "256-bit (High)") },
           ]}
           comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
         />
       </Stack>
-
     </Stack>
   );
 };
diff --git a/frontend/src/core/components/tools/addStamp/AddStampAutomationSettings.tsx b/frontend/src/core/components/tools/addStamp/AddStampAutomationSettings.tsx
index c9a9dbd968..25ce360719 100644
--- a/frontend/src/core/components/tools/addStamp/AddStampAutomationSettings.tsx
+++ b/frontend/src/core/components/tools/addStamp/AddStampAutomationSettings.tsx
@@ -21,11 +21,7 @@ const AddStampAutomationSettings = ({ parameters, onParameterChange, disabled =
   return (
     <Stack gap="lg">
       {/* Stamp Setup (Type, Text/Image, Page Selection) */}
-      <StampSetupSettings
-        parameters={parameters}
-        onParameterChange={onParameterChange}
-        disabled={disabled}
-      />
+      <StampSetupSettings parameters={parameters} onParameterChange={onParameterChange} disabled={disabled} />
 
       {/* Position and Formatting Settings */}
       {parameters.stampType && (
diff --git a/frontend/src/core/components/tools/addStamp/StampPositionFormattingSettings.tsx b/frontend/src/core/components/tools/addStamp/StampPositionFormattingSettings.tsx
index 9381954f28..d41fe4986b 100644
--- a/frontend/src/core/components/tools/addStamp/StampPositionFormattingSettings.tsx
+++ b/frontend/src/core/components/tools/addStamp/StampPositionFormattingSettings.tsx
@@ -13,7 +13,12 @@ interface StampPositionFormattingSettingsProps {
   showPositionGrid?: boolean; // When true, show the 9-position grid for automation
 }
 
-const StampPositionFormattingSettings = ({ parameters, onParameterChange, disabled = false, showPositionGrid = false }: StampPositionFormattingSettingsProps) => {
+const StampPositionFormattingSettings = ({
+  parameters,
+  onParameterChange,
+  disabled = false,
+  showPositionGrid = false,
+}: StampPositionFormattingSettingsProps) => {
   const { t } = useTranslation();
 
   return (
@@ -21,32 +26,36 @@ const StampPositionFormattingSettings = ({ parameters, onParameterChange, disabl
       {/* Position Grid - shown in automation settings */}
       {showPositionGrid && (
         <Stack gap="xs">
-          <Text size="sm" fw={500}>{t('AddStampRequest.position', 'Stamp Position')}</Text>
-          <div style={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(3, 1fr)',
-            gap: '0.5rem',
-            maxWidth: '200px'
-          }}>
+          <Text size="sm" fw={500}>
+            {t("AddStampRequest.position", "Stamp Position")}
+          </Text>
+          <div
+            style={{
+              display: "grid",
+              gridTemplateColumns: "repeat(3, 1fr)",
+              gap: "0.5rem",
+              maxWidth: "200px",
+            }}
+          >
             {Array.from({ length: 9 }).map((_, i) => {
-              const idx = (i + 1) as 1|2|3|4|5|6|7|8|9;
+              const idx = (i + 1) as 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
               const selected = parameters.position === idx;
               return (
                 <Button
                   key={idx}
-                  variant={selected ? 'filled' : 'outline'}
+                  variant={selected ? "filled" : "outline"}
                   onClick={() => {
-                    onParameterChange('position', idx);
+                    onParameterChange("position", idx);
                     // Ensure we're using grid positioning, not custom overrides
-                    onParameterChange('overrideX', -1 as any);
-                    onParameterChange('overrideY', -1 as any);
+                    onParameterChange("overrideX", -1 as any);
+                    onParameterChange("overrideY", -1 as any);
                   }}
                   disabled={disabled}
                   styles={{
                     root: {
-                      height: '50px',
-                      padding: '0',
-                    }
+                      height: "50px",
+                      padding: "0",
+                    },
                   }}
                 >
                   {idx}
@@ -58,29 +67,36 @@ const StampPositionFormattingSettings = ({ parameters, onParameterChange, disabl
       )}
       {/* Icon pill buttons row */}
       <div className="flex justify-between gap-[0.5rem]">
-        <Tooltip content={t('AddStampRequest.rotation', 'Rotation')} position="top">
+        <Tooltip content={t("AddStampRequest.rotation", "Rotation")} position="top">
           <Button
-            variant={parameters._activePill === 'rotation' ? 'filled' : 'outline'}
+            variant={parameters._activePill === "rotation" ? "filled" : "outline"}
             className="flex-1"
-            onClick={() => onParameterChange('_activePill', 'rotation')}
+            onClick={() => onParameterChange("_activePill", "rotation")}
           >
             <LocalIcon icon="rotate-right-rounded" width="1.1rem" height="1.1rem" />
           </Button>
         </Tooltip>
-        <Tooltip content={t('AddStampRequest.opacity', 'Opacity')} position="top">
+        <Tooltip content={t("AddStampRequest.opacity", "Opacity")} position="top">
           <Button
-            variant={parameters._activePill === 'opacity' ? 'filled' : 'outline'}
+            variant={parameters._activePill === "opacity" ? "filled" : "outline"}
             className="flex-1"
-            onClick={() => onParameterChange('_activePill', 'opacity')}
+            onClick={() => onParameterChange("_activePill", "opacity")}
           >
             <LocalIcon icon="opacity" width="1.1rem" height="1.1rem" />
           </Button>
         </Tooltip>
-        <Tooltip content={parameters.stampType === 'image' ? t('AddStampRequest.imageSize', 'Image Size') : t('AddStampRequest.fontSize', 'Font Size')} position="top">
+        <Tooltip
+          content={
+            parameters.stampType === "image"
+              ? t("AddStampRequest.imageSize", "Image Size")
+              : t("AddStampRequest.fontSize", "Font Size")
+          }
+          position="top"
+        >
           <Button
-            variant={parameters._activePill === 'fontSize' ? 'filled' : 'outline'}
+            variant={parameters._activePill === "fontSize" ? "filled" : "outline"}
             className="flex-1"
-            onClick={() => onParameterChange('_activePill', 'fontSize')}
+            onClick={() => onParameterChange("_activePill", "fontSize")}
           >
             <LocalIcon icon="zoom-in-map-rounded" width="1.1rem" height="1.1rem" />
           </Button>
@@ -88,18 +104,17 @@ const StampPositionFormattingSettings = ({ parameters, onParameterChange, disabl
       </div>
 
       {/* Single slider bound to selected pill */}
-      {parameters._activePill === 'fontSize' && (
+      {parameters._activePill === "fontSize" && (
         <Stack gap="xs">
           <Text className={styles.labelText}>
-            {parameters.stampType === 'image'
-              ? t('AddStampRequest.imageSize', 'Image Size')
-              : t('AddStampRequest.fontSize', 'Font Size')
-            }
+            {parameters.stampType === "image"
+              ? t("AddStampRequest.imageSize", "Image Size")
+              : t("AddStampRequest.fontSize", "Font Size")}
           </Text>
           <Group className={styles.sliderGroup} align="center">
             <NumberInput
               value={parameters.fontSize}
-              onChange={(v) => onParameterChange('fontSize', typeof v === 'number' && v > 0 ? v : 1)}
+              onChange={(v) => onParameterChange("fontSize", typeof v === "number" && v > 0 ? v : 1)}
               min={1}
               max={400}
               step={1}
@@ -109,7 +124,7 @@ const StampPositionFormattingSettings = ({ parameters, onParameterChange, disabl
             />
             <Slider
               value={parameters.fontSize}
-              onChange={(v) => onParameterChange('fontSize', v as number)}
+              onChange={(v) => onParameterChange("fontSize", v as number)}
               min={1}
               max={400}
               step={1}
@@ -119,13 +134,13 @@ const StampPositionFormattingSettings = ({ parameters, onParameterChange, disabl
           </Group>
         </Stack>
       )}
-      {parameters._activePill === 'rotation' && (
+      {parameters._activePill === "rotation" && (
         <Stack gap="xs">
-          <Text className={styles.labelText}>{t('AddStampRequest.rotation', 'Rotation')}</Text>
+          <Text className={styles.labelText}>{t("AddStampRequest.rotation", "Rotation")}</Text>
           <Group className={styles.sliderGroup} align="center">
             <NumberInput
               value={parameters.rotation}
-              onChange={(v) => onParameterChange('rotation', typeof v === 'number' ? v : 0)}
+              onChange={(v) => onParameterChange("rotation", typeof v === "number" ? v : 0)}
               min={-180}
               max={180}
               step={1}
@@ -136,7 +151,7 @@ const StampPositionFormattingSettings = ({ parameters, onParameterChange, disabl
             />
             <Slider
               value={parameters.rotation}
-              onChange={(v) => onParameterChange('rotation', v as number)}
+              onChange={(v) => onParameterChange("rotation", v as number)}
               min={-180}
               max={180}
               step={1}
@@ -145,13 +160,13 @@ const StampPositionFormattingSettings = ({ parameters, onParameterChange, disabl
           </Group>
         </Stack>
       )}
-      {parameters._activePill === 'opacity' && (
+      {parameters._activePill === "opacity" && (
         <Stack gap="xs">
-          <Text className={styles.labelText}>{t('AddStampRequest.opacity', 'Opacity')}</Text>
+          <Text className={styles.labelText}>{t("AddStampRequest.opacity", "Opacity")}</Text>
           <Group className={styles.sliderGroup} align="center">
             <NumberInput
               value={parameters.opacity}
-              onChange={(v) => onParameterChange('opacity', typeof v === 'number' ? v : 0)}
+              onChange={(v) => onParameterChange("opacity", typeof v === "number" ? v : 0)}
               min={0}
               max={100}
               step={1}
@@ -161,7 +176,7 @@ const StampPositionFormattingSettings = ({ parameters, onParameterChange, disabl
             />
             <Slider
               value={parameters.opacity}
-              onChange={(v) => onParameterChange('opacity', v as number)}
+              onChange={(v) => onParameterChange("opacity", v as number)}
               min={0}
               max={100}
               step={1}
@@ -171,11 +186,11 @@ const StampPositionFormattingSettings = ({ parameters, onParameterChange, disabl
         </Stack>
       )}
 
-      {parameters.stampType !== 'image' && (
+      {parameters.stampType !== "image" && (
         <ColorInput
-          label={t('AddStampRequest.customColor', 'Custom Text Color')}
+          label={t("AddStampRequest.customColor", "Custom Text Color")}
           value={parameters.customColor}
-          onChange={(value) => onParameterChange('customColor', value)}
+          onChange={(value) => onParameterChange("customColor", value)}
           format="hex"
           disabled={disabled}
           popoverProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
@@ -183,16 +198,16 @@ const StampPositionFormattingSettings = ({ parameters, onParameterChange, disabl
       )}
 
       {/* Margin selection for text stamps */}
-      {parameters.stampType === 'text' && (
+      {parameters.stampType === "text" && (
         <Select
-          label={t('AddStampRequest.margin', 'Margin')}
+          label={t("AddStampRequest.margin", "Margin")}
           value={parameters.customMargin}
-          onChange={(v) => onParameterChange('customMargin', (v as any) || 'medium')}
+          onChange={(v) => onParameterChange("customMargin", (v as any) || "medium")}
           data={[
-            { value: 'small', label: t('margin.small', 'Small') },
-            { value: 'medium', label: t('margin.medium', 'Medium') },
-            { value: 'large', label: t('margin.large', 'Large') },
-            { value: 'x-large', label: t('margin.xLarge', 'Extra Large') },
+            { value: "small", label: t("margin.small", "Small") },
+            { value: "medium", label: t("margin.medium", "Medium") },
+            { value: "large", label: t("margin.large", "Large") },
+            { value: "x-large", label: t("margin.xLarge", "Extra Large") },
           ]}
           disabled={disabled}
           comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
diff --git a/frontend/src/core/components/tools/addStamp/StampPreview.tsx b/frontend/src/core/components/tools/addStamp/StampPreview.tsx
index b5d52a34ee..7fd5053aae 100644
--- a/frontend/src/core/components/tools/addStamp/StampPreview.tsx
+++ b/frontend/src/core/components/tools/addStamp/StampPreview.tsx
@@ -1,10 +1,16 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { AddStampParameters } from '@app/components/tools/addStamp/useAddStampParameters';
-import { pdfWorkerManager } from '@app/services/pdfWorkerManager';
-import { useThumbnailGeneration } from '@app/hooks/useThumbnailGeneration';
-import { A4_ASPECT_RATIO, getFirstSelectedPage, getFontFamily, computeStampPreviewStyle, getAlphabetPreviewScale } from '@app/components/tools/addStamp/StampPreviewUtils';
-import styles from '@app/components/tools/addStamp/StampPreview.module.css';
-import {PrivateContent} from "@app/components/shared/PrivateContent";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { AddStampParameters } from "@app/components/tools/addStamp/useAddStampParameters";
+import { pdfWorkerManager } from "@app/services/pdfWorkerManager";
+import { useThumbnailGeneration } from "@app/hooks/useThumbnailGeneration";
+import {
+  A4_ASPECT_RATIO,
+  getFirstSelectedPage,
+  getFontFamily,
+  computeStampPreviewStyle,
+  getAlphabetPreviewScale,
+} from "@app/components/tools/addStamp/StampPreviewUtils";
+import styles from "@app/components/tools/addStamp/StampPreview.module.css";
+import { PrivateContent } from "@app/components/shared/PrivateContent";
 
 type Props = {
   parameters: AddStampParameters;
@@ -24,7 +30,7 @@ export default function StampPreview({ parameters, onParameterChange, file, show
 
   // Load image URL and meta for aspect ratio if an image is selected
   useEffect(() => {
-    if (parameters.stampType === 'image' && parameters.stampImage) {
+    if (parameters.stampType === "image" && parameters.stampImage) {
       const url = URL.createObjectURL(parameters.stampImage);
       const img = new Image();
       img.onload = () => {
@@ -42,7 +48,7 @@ export default function StampPreview({ parameters, onParameterChange, file, show
     const node = containerRef.current;
     if (!node) return;
     const resize = () => {
-      const aspect = pageSize ? (pageSize.widthPts / pageSize.heightPts) : A4_ASPECT_RATIO;
+      const aspect = pageSize ? pageSize.widthPts / pageSize.heightPts : A4_ASPECT_RATIO;
       setContainerSize({ width: node.clientWidth, height: node.clientWidth / aspect });
     };
     resize();
@@ -55,7 +61,7 @@ export default function StampPreview({ parameters, onParameterChange, file, show
   useEffect(() => {
     let cancelled = false;
     const load = async () => {
-      if (!file || file.type !== 'application/pdf') {
+      if (!file || file.type !== "application/pdf") {
         setPageSize(null);
         return;
       }
@@ -75,14 +81,16 @@ export default function StampPreview({ parameters, onParameterChange, file, show
       }
     };
     load();
-    return () => { cancelled = true; };
+    return () => {
+      cancelled = true;
+    };
   }, [file]);
 
   // Load first-page thumbnail for background preview so users see the content
   useEffect(() => {
     let isActive = true;
     const loadThumb = async () => {
-      if (!file || file.type !== 'application/pdf') {
+      if (!file || file.type !== "application/pdf") {
         setPageThumbnail(null);
         return;
       }
@@ -96,28 +104,25 @@ export default function StampPreview({ parameters, onParameterChange, file, show
       }
     };
     loadThumb();
-    return () => { isActive = false; };
+    return () => {
+      isActive = false;
+    };
   }, [file, parameters.pageNumbers, requestThumbnail]);
 
-  const style = useMemo(() => (
-    computeStampPreviewStyle(
-      parameters,
-      imageMeta,
-      pageSize,
-      containerSize,
-      showQuickGrid,
-      hoverTile,
-      !!pageThumbnail
-    )
-  ), [containerSize, parameters, imageMeta, pageSize, showQuickGrid, hoverTile, pageThumbnail]);
+  const style = useMemo(
+    () => computeStampPreviewStyle(parameters, imageMeta, pageSize, containerSize, showQuickGrid, hoverTile, !!pageThumbnail),
+    [containerSize, parameters, imageMeta, pageSize, showQuickGrid, hoverTile, pageThumbnail],
+  );
 
   // Keep center fixed when scaling via slider (or any fontSize changes)
-  const prevDimsRef = useRef<{ fontSize: number; widthPx: number; heightPx: number; leftPx: number; bottomPx: number } | null>(null);
+  const prevDimsRef = useRef<{ fontSize: number; widthPx: number; heightPx: number; leftPx: number; bottomPx: number } | null>(
+    null,
+  );
   useEffect(() => {
     const itemStyle = style.item as any;
     if (!itemStyle || containerSize.width <= 0 || containerSize.height <= 0) return;
 
-    const parse = (v: any) => parseFloat(String(v).replace('px', '')) || 0;
+    const parse = (v: any) => parseFloat(String(v).replace("px", "")) || 0;
     const leftPx = parse(itemStyle.left);
     const bottomPx = parse(itemStyle.bottom);
     const widthPx = parse(itemStyle.width);
@@ -148,15 +153,34 @@ export default function StampPreview({ parameters, onParameterChange, file, show
       const maxBottomPx = Math.max(0, containerSize.height - heightPx);
       const newLeftPts = Math.max(0, Math.min(maxLeftPx, newLeftPx)) / scaleX;
       const newBottomPts = Math.max(0, Math.min(maxBottomPx, newBottomPx)) / scaleY;
-      onParameterChange('overrideX', newLeftPts as any);
-      onParameterChange('overrideY', newBottomPts as any);
+      onParameterChange("overrideX", newLeftPts as any);
+      onParameterChange("overrideY", newBottomPts as any);
     }
 
     prevDimsRef.current = { fontSize: parameters.fontSize, widthPx, heightPx, leftPx, bottomPx };
-  }, [parameters.fontSize, style.item, containerSize, pageSize, showQuickGrid, parameters.overrideX, parameters.overrideY, onParameterChange]);
+  }, [
+    parameters.fontSize,
+    style.item,
+    containerSize,
+    pageSize,
+    showQuickGrid,
+    parameters.overrideX,
+    parameters.overrideY,
+    onParameterChange,
+  ]);
 
   // Drag/resize/rotate interactions
-  const draggingRef = useRef<{ type: 'move' | 'resize' | 'rotate'; startX: number; startY: number; initLeft: number; initBottom: number; initWidth: number; initHeight: number; centerX: number; centerY: number } | null>(null);
+  const draggingRef = useRef<{
+    type: "move" | "resize" | "rotate";
+    startX: number;
+    startY: number;
+    initLeft: number;
+    initBottom: number;
+    initWidth: number;
+    initHeight: number;
+    centerX: number;
+    centerY: number;
+  } | null>(null);
 
   const ensureOverrides = () => {
     const pageWidth = containerSize.width;
@@ -165,10 +189,10 @@ export default function StampPreview({ parameters, onParameterChange, file, show
 
     // Recompute current x,y from style (so that we start from visual position)
     const itemStyle = style.item as any;
-    const leftPx = parseFloat(String(itemStyle.left).replace('px', '')) || 0;
-    const bottomPx = parseFloat(String(itemStyle.bottom).replace('px', '')) || 0;
-    const widthPx = parseFloat(String(itemStyle.width).replace('px', '')) || 0;
-    const heightPx = parseFloat(String(itemStyle.height).replace('px', '')) || 0;
+    const leftPx = parseFloat(String(itemStyle.left).replace("px", "")) || 0;
+    const bottomPx = parseFloat(String(itemStyle.bottom).replace("px", "")) || 0;
+    const widthPx = parseFloat(String(itemStyle.width).replace("px", "")) || 0;
+    const heightPx = parseFloat(String(itemStyle.height).replace("px", "")) || 0;
     const widthPts = pageSize?.widthPts ?? 595.28;
     const heightPts = pageSize?.heightPts ?? 841.89;
     const scaleX = containerSize.width / widthPts;
@@ -176,20 +200,20 @@ export default function StampPreview({ parameters, onParameterChange, file, show
     if (parameters.overrideX < 0 || parameters.overrideY < 0) {
       const maxLeftPx = Math.max(0, pageWidth - widthPx);
       const maxBottomPx = Math.max(0, pageHeight - heightPx);
-      onParameterChange('overrideX', Math.max(0, Math.min(maxLeftPx, leftPx)) / scaleX as any);
-      onParameterChange('overrideY', Math.max(0, Math.min(maxBottomPx, bottomPx)) / scaleY as any);
+      onParameterChange("overrideX", (Math.max(0, Math.min(maxLeftPx, leftPx)) / scaleX) as any);
+      onParameterChange("overrideY", (Math.max(0, Math.min(maxBottomPx, bottomPx)) / scaleY) as any);
     }
   };
 
-  const handlePointerDown = (e: React.PointerEvent, type: 'move' | 'resize' | 'rotate') => {
+  const handlePointerDown = (e: React.PointerEvent, type: "move" | "resize" | "rotate") => {
     e.preventDefault();
     ensureOverrides();
 
     const item = style.item as any;
-    const left = parseFloat(String(item.left).replace('px', '')) || 0;
-    const bottom = parseFloat(String(item.bottom).replace('px', '')) || 0;
-    const width = parseFloat(String(item.width).replace('px', '')) || parameters.fontSize;
-    const height = parseFloat(String(item.height).replace('px', '')) || parameters.fontSize;
+    const left = parseFloat(String(item.left).replace("px", "")) || 0;
+    const bottom = parseFloat(String(item.bottom).replace("px", "")) || 0;
+    const width = parseFloat(String(item.width).replace("px", "")) || parameters.fontSize;
+    const height = parseFloat(String(item.height).replace("px", "")) || parameters.fontSize;
 
     const rect = (e.currentTarget.parentElement as HTMLElement)?.getBoundingClientRect();
     const centerX = left + width / 2;
@@ -198,7 +222,7 @@ export default function StampPreview({ parameters, onParameterChange, file, show
     draggingRef.current = {
       type,
       startX: e.clientX - (rect?.left || 0),
-      startY: (rect ? rect.bottom - e.clientY : 0), // convert to bottom-based coords
+      startY: rect ? rect.bottom - e.clientY : 0, // convert to bottom-based coords
       initLeft: left,
       initBottom: bottom,
       initWidth: width,
@@ -220,7 +244,7 @@ export default function StampPreview({ parameters, onParameterChange, file, show
 
     const drag = draggingRef.current;
 
-    if (drag.type === 'move') {
+    if (drag.type === "move") {
       const dx = x - drag.startX;
       const dy = y - drag.startY;
       const maxLeftPx = Math.max(0, containerSize.width - drag.initWidth);
@@ -233,22 +257,22 @@ export default function StampPreview({ parameters, onParameterChange, file, show
       const scaleY = containerSize.height / heightPts;
       const newLeftPts = newLeftPx / scaleX;
       const newBottomPts = newBottomPx / scaleY;
-      onParameterChange('overrideX', newLeftPts as any);
-      onParameterChange('overrideY', newBottomPts as any);
+      onParameterChange("overrideX", newLeftPts as any);
+      onParameterChange("overrideY", newBottomPts as any);
     }
 
-    if (drag.type === 'resize') {
+    if (drag.type === "resize") {
       // Height is our canonical size (fontSize)
       const heightPts = pageSize?.heightPts ?? 841.89;
       const scaleY = containerSize.height / heightPts;
       const newHeightPx = Math.max(1, drag.initHeight + (y - drag.startY));
       const newHeightPts = newHeightPx / scaleY;
-      onParameterChange('fontSize', newHeightPts as any);
+      onParameterChange("fontSize", newHeightPts as any);
     }
 
-    if (drag.type === 'rotate') {
+    if (drag.type === "rotate") {
       const angle = Math.atan2(y - drag.centerY, x - drag.centerX) * (180 / Math.PI);
-      onParameterChange('rotation', angle as any);
+      onParameterChange("rotation", angle as any);
     }
   };
 
@@ -275,46 +299,34 @@ export default function StampPreview({ parameters, onParameterChange, file, show
       >
         {pageThumbnail && (
           <PrivateContent>
-            <img
-              src={pageThumbnail}
-              alt="page preview"
-              className={styles.pageThumbnail}
-              draggable={false}
-            />
+            <img src={pageThumbnail} alt="page preview" className={styles.pageThumbnail} draggable={false} />
           </PrivateContent>
         )}
-        {parameters.stampType === 'text' && (
-          <div
-            className={`${styles.stampItem} ${styles.stampItemGridMode}`}
-            style={style.item as React.CSSProperties}
-          >
-            {(parameters.stampText || '').split('\n').map((line, idx) => (
+        {parameters.stampType === "text" && (
+          <div className={`${styles.stampItem} ${styles.stampItemGridMode}`} style={style.item as React.CSSProperties}>
+            {(parameters.stampText || "").split("\n").map((line, idx) => (
               <span
                 key={idx}
                 className={styles.textLine}
                 style={{
                   fontFamily: getFontFamily(parameters.alphabet),
                   fontSize: `${Math.max(1, (parameters.fontSize * getAlphabetPreviewScale(parameters.alphabet)) / 2)}px`,
-                  whiteSpace: 'nowrap',
+                  whiteSpace: "nowrap",
                 }}
               >
-                {line || '\u00A0'}
+                {line || "\u00A0"}
               </span>
             ))}
             {itemHandles}
           </div>
         )}
-        {parameters.stampType === 'image' && imageMeta && (
+        {parameters.stampType === "image" && imageMeta && (
           <div
             className={`${styles.stampItem} ${showQuickGrid ? styles.stampItemGridMode : styles.stampItemDraggable}`}
             style={style.item as React.CSSProperties}
-            onPointerDown={(e) => handlePointerDown(e, 'move')}
+            onPointerDown={(e) => handlePointerDown(e, "move")}
           >
-            <img
-              src={imageMeta.url}
-              alt="stamp preview"
-              className={styles.stampImage}
-            />
+            <img src={imageMeta.url} alt="stamp preview" className={styles.stampImage} />
             {itemHandles}
           </div>
         )}
@@ -323,18 +335,18 @@ export default function StampPreview({ parameters, onParameterChange, file, show
         {showQuickGrid && (
           <div className={styles.quickGrid}>
             {Array.from({ length: 9 }).map((_, i) => {
-              const idx = (i + 1) as 1|2|3|4|5|6|7|8|9;
+              const idx = (i + 1) as 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
               const selected = parameters.position === idx && (parameters.overrideX < 0 || parameters.overrideY < 0);
               return (
                 <button
                   key={idx}
                   type="button"
-                  className={`${styles.gridTile} ${selected || hoverTile === idx ? styles.gridTileSelected : ''} ${hoverTile === idx ? styles.gridTileHovered : ''}`}
+                  className={`${styles.gridTile} ${selected || hoverTile === idx ? styles.gridTileSelected : ""} ${hoverTile === idx ? styles.gridTileHovered : ""}`}
                   onClick={() => {
                     // Clear overrides to use grid positioning and set position
-                    onParameterChange('overrideX', -1 as any);
-                    onParameterChange('overrideY', -1 as any);
-                    onParameterChange('position', idx as any);
+                    onParameterChange("overrideX", -1 as any);
+                    onParameterChange("overrideY", -1 as any);
+                    onParameterChange("position", idx as any);
                   }}
                   onMouseEnter={() => setHoverTile(idx)}
                   onMouseLeave={() => setHoverTile(null)}
@@ -346,11 +358,7 @@ export default function StampPreview({ parameters, onParameterChange, file, show
           </div>
         )}
       </div>
-      <div className={styles.previewDisclaimer}>
-        Preview is approximate. Final output may vary due to PDF font metrics.
-      </div>
+      <div className={styles.previewDisclaimer}>Preview is approximate. Final output may vary due to PDF font metrics.</div>
     </div>
   );
 }
-
-
diff --git a/frontend/src/core/components/tools/addStamp/StampPreviewUtils.ts b/frontend/src/core/components/tools/addStamp/StampPreviewUtils.ts
index 95b9629a7c..1ffe709e7e 100644
--- a/frontend/src/core/components/tools/addStamp/StampPreviewUtils.ts
+++ b/frontend/src/core/components/tools/addStamp/StampPreviewUtils.ts
@@ -1,15 +1,15 @@
-import type { AddStampParameters } from '@app/components/tools/addStamp/useAddStampParameters';
+import type { AddStampParameters } from "@app/components/tools/addStamp/useAddStampParameters";
 
 export type ContainerSize = { width: number; height: number };
 export type PageSizePts = { widthPts: number; heightPts: number } | null;
 export type ImageMeta = { url: string; width: number; height: number } | null;
 
 // Map UI margin option to backend margin factor
-export const marginFactorMap: Record<AddStampParameters['customMargin'], number> = {
-  'small': 0.02,
-  'medium': 0.035,
-  'large': 0.05,
-  'x-large': 0.075,
+export const marginFactorMap: Record<AddStampParameters["customMargin"], number> = {
+  small: 0.02,
+  medium: 0.035,
+  large: 0.05,
+  "x-large": 0.075,
 };
 
 export const A4_ASPECT_RATIO = 0.707; // width/height used elsewhere in legacy UI
@@ -17,29 +17,32 @@ export const A4_ASPECT_RATIO = 0.707; // width/height used elsewhere in legacy U
 // Get font family based on selected alphabet (matching backend logic)
 export const getFontFamily = (alphabet: string): string => {
   switch (alphabet) {
-    case 'arabic':
-      return 'Noto Sans Arabic, Arial Unicode MS, sans-serif';
-    case 'japanese':
-      return 'Noto Sans JP, Yu Gothic, Hiragino Sans, sans-serif';
-    case 'korean':
-      return 'Noto Sans KR, Malgun Gothic, Dotum, sans-serif';
-    case 'chinese':
-      return 'Noto Sans SC, Microsoft YaHei, SimSun, sans-serif';
-    case 'thai':
-      return 'Noto Sans Thai, Tahoma, sans-serif';
-    case 'roman':
+    case "arabic":
+      return "Noto Sans Arabic, Arial Unicode MS, sans-serif";
+    case "japanese":
+      return "Noto Sans JP, Yu Gothic, Hiragino Sans, sans-serif";
+    case "korean":
+      return "Noto Sans KR, Malgun Gothic, Dotum, sans-serif";
+    case "chinese":
+      return "Noto Sans SC, Microsoft YaHei, SimSun, sans-serif";
+    case "thai":
+      return "Noto Sans Thai, Tahoma, sans-serif";
+    case "roman":
     default:
-      return 'Noto Sans, Arial, Helvetica, sans-serif';
+      return "Noto Sans, Arial, Helvetica, sans-serif";
   }
 };
 
 // Lightweight parser: returns first page number from CSV/range input, otherwise 1
 export const getFirstSelectedPage = (input: string): number => {
   if (!input) return 1;
-  const parts = input.split(',').map(s => s.trim()).filter(Boolean);
+  const parts = input
+    .split(",")
+    .map((s) => s.trim())
+    .filter(Boolean);
   for (const part of parts) {
     if (/^\d+\s*-\s*\d+$/.test(part)) {
-      const low = parseInt(part.split('-')[0].trim(), 10);
+      const low = parseInt(part.split("-")[0].trim(), 10);
       if (Number.isFinite(low) && low > 0) return low;
     }
     const n = parseInt(part, 10);
@@ -51,16 +54,22 @@ export const getFirstSelectedPage = (input: string): number => {
 export type StampPreviewStyle = { container: any; item: any };
 
 // Unified per-alphabet preview adjustments
-export type Alphabet = 'roman' | 'arabic' | 'japanese' | 'korean' | 'chinese' | 'thai';
-export type AlphabetTweaks = { scale: number; rowOffsetRem: [number, number, number]; lineHeight: number; capHeightRatio: number; defaultFontSize: number };
+export type Alphabet = "roman" | "arabic" | "japanese" | "korean" | "chinese" | "thai";
+export type AlphabetTweaks = {
+  scale: number;
+  rowOffsetRem: [number, number, number];
+  lineHeight: number;
+  capHeightRatio: number;
+  defaultFontSize: number;
+};
 export const ALPHABET_PREVIEW_TWEAKS: Record<Alphabet, AlphabetTweaks> = {
   // [top, middle, bottom] row offsets in rem
-  roman: { scale: 1.0/1.18, rowOffsetRem: [0, 1, 2.2], lineHeight: 1.28, capHeightRatio: 0.70, defaultFontSize: 80 },
+  roman: { scale: 1.0 / 1.18, rowOffsetRem: [0, 1, 2.2], lineHeight: 1.28, capHeightRatio: 0.7, defaultFontSize: 80 },
   arabic: { scale: 1.2, rowOffsetRem: [0, 1.5, 2.5], lineHeight: 1, capHeightRatio: 0.68, defaultFontSize: 80 },
-  japanese: { scale: 1/1.2, rowOffsetRem: [-0.1, 1, 2], lineHeight: 1, capHeightRatio: 0.72, defaultFontSize: 80 },
-  korean: { scale: 1.0/1.05, rowOffsetRem: [-0.2, 0.5, 1.4], lineHeight: 1, capHeightRatio: 0.72, defaultFontSize: 80 },
-  chinese: { scale: 1/1.2, rowOffsetRem: [0, 2, 2.8], lineHeight: 1, capHeightRatio: 0.72, defaultFontSize: 30 }, // temporary default font size so that it fits on the PDF
-  thai: { scale: 1/1.2, rowOffsetRem: [-1, 0, .8], lineHeight: 1, capHeightRatio: 0.66, defaultFontSize: 80 },
+  japanese: { scale: 1 / 1.2, rowOffsetRem: [-0.1, 1, 2], lineHeight: 1, capHeightRatio: 0.72, defaultFontSize: 80 },
+  korean: { scale: 1.0 / 1.05, rowOffsetRem: [-0.2, 0.5, 1.4], lineHeight: 1, capHeightRatio: 0.72, defaultFontSize: 80 },
+  chinese: { scale: 1 / 1.2, rowOffsetRem: [0, 2, 2.8], lineHeight: 1, capHeightRatio: 0.72, defaultFontSize: 30 }, // temporary default font size so that it fits on the PDF
+  thai: { scale: 1 / 1.2, rowOffsetRem: [-1, 0, 0.8], lineHeight: 1, capHeightRatio: 0.66, defaultFontSize: 80 },
 };
 export const getAlphabetPreviewScale = (alphabet: string): number => (ALPHABET_PREVIEW_TWEAKS as any)[alphabet]?.scale ?? 1.0;
 
@@ -75,7 +84,7 @@ export function computeStampPreviewStyle(
   containerSize: ContainerSize,
   showQuickGrid: boolean | undefined,
   _hoverTile: number | null,
-  hasPageThumbnail: boolean
+  hasPageThumbnail: boolean,
 ): StampPreviewStyle {
   const pageWidthPx = containerSize.width;
   const pageHeightPx = containerSize.height;
@@ -85,26 +94,26 @@ export function computeStampPreviewStyle(
   const scaleY = pageHeightPx / heightPts;
   if (pageWidthPx <= 0 || pageHeightPx <= 0) return { item: {}, container: {} } as any;
 
-  const marginPts = (widthPts + heightPts) / 2 * (marginFactorMap[parameters.customMargin] ?? 0.035);
+  const marginPts = ((widthPts + heightPts) / 2) * (marginFactorMap[parameters.customMargin] ?? 0.035);
 
   // Compute content dimensions
   const heightPtsContent =
-    parameters.stampType === 'image'
+    parameters.stampType === "image"
       ? parameters.fontSize
       : parameters.fontSize * getAlphabetPreviewScale(parameters.alphabet);
   let widthPtsContent = heightPtsContent;
 
-  if (parameters.stampType === 'image' && imageMeta) {
+  if (parameters.stampType === "image" && imageMeta) {
     const aspect = imageMeta.width / imageMeta.height;
     widthPtsContent = heightPtsContent * aspect;
-  } else if (parameters.stampType === 'text') {
+  } else if (parameters.stampType === "text") {
     // Use Canvas 2D to measure text width for better fidelity than DOM spans
-    const textLine = (parameters.stampText || '').split('\n')[0] ?? '';
+    const textLine = (parameters.stampText || "").split("\n")[0] ?? "";
     const fontPx = heightPtsContent * scaleY; // Convert point size to px using vertical scale
     const fontFamily = getFontFamily(parameters.alphabet);
 
-    const canvas = document.createElement('canvas');
-    const ctx = canvas.getContext('2d');
+    const canvas = document.createElement("canvas");
+    const ctx = canvas.getContext("2d");
     if (ctx) {
       ctx.font = `${fontPx}px ${fontFamily}`;
       const metrics = ctx.measureText(textLine);
@@ -114,16 +123,16 @@ export function computeStampPreviewStyle(
 
       let adjustmentFactor: number;
       switch (parameters.alphabet) {
-        case 'roman':
-          adjustmentFactor = 0.90;
+        case "roman":
+          adjustmentFactor = 0.9;
           break;
-        case 'arabic':
-        case 'thai':
+        case "arabic":
+        case "thai":
           adjustmentFactor = 0.92;
           break;
-        case 'japanese':
-        case 'korean':
-        case 'chinese':
+        case "japanese":
+        case "korean":
+        case "chinese":
           adjustmentFactor = 0.88;
           break;
         default:
@@ -152,9 +161,10 @@ export function computeStampPreviewStyle(
   const calcY = () => {
     if (parameters.overrideX >= 0 && parameters.overrideY >= 0) return parameters.overrideY;
     // For text, backend positions using cap height, not full font size
-    const heightForY = parameters.stampType === 'text'
-      ? heightPtsContent * ((ALPHABET_PREVIEW_TWEAKS as any)[parameters.alphabet]?.capHeightRatio ?? 0.70)
-      : heightPtsContent;
+    const heightForY =
+      parameters.stampType === "text"
+        ? heightPtsContent * ((ALPHABET_PREVIEW_TWEAKS as any)[parameters.alphabet]?.capHeightRatio ?? 0.7)
+        : heightPtsContent;
     switch (Math.floor((position - 1) / 3)) {
       case 0: // Top
         return heightPts - heightForY - marginPts;
@@ -171,9 +181,9 @@ export function computeStampPreviewStyle(
   const yPts = calcY();
   let xPx = xPts * scaleX;
   let yPx = yPts * scaleY;
-  if (parameters.stampType === 'text') {
+  if (parameters.stampType === "text") {
     try {
-      const rootFontSizePx = parseFloat(getComputedStyle(document.documentElement).fontSize || '16') || 16;
+      const rootFontSizePx = parseFloat(getComputedStyle(document.documentElement).fontSize || "16") || 16;
       const rowIndex = Math.floor((position - 1) / 3); // 0 top, 1 middle, 2 bottom
       const offsets = (ALPHABET_PREVIEW_TWEAKS as any)[parameters.alphabet]?.rowOffsetRem ?? [0, 0, 0];
       const offsetRem = offsets[rowIndex] ?? 0;
@@ -192,47 +202,47 @@ export function computeStampPreviewStyle(
   const opacity = Math.max(0, Math.min(1, parameters.opacity / 100));
   const displayOpacity = opacity;
 
-  let alignItems: 'flex-start' | 'center' | 'flex-end' = 'flex-start';
-  if (parameters.stampType === 'text') {
+  let alignItems: "flex-start" | "center" | "flex-end" = "flex-start";
+  if (parameters.stampType === "text") {
     const colIndex = position % 3; // 1: left, 2: center, 0: right
     switch (colIndex) {
       case 2: // center column
-        alignItems = 'center';
+        alignItems = "center";
         break;
       case 0: // right column
-        alignItems = 'flex-end';
+        alignItems = "flex-end";
         break;
       default:
-        alignItems = 'flex-start';
+        alignItems = "flex-start";
     }
   }
 
   return {
     container: {
-      position: 'relative',
-      width: '100%',
+      position: "relative",
+      width: "100%",
       aspectRatio: `${(pageSize?.widthPts ?? 595.28) / (pageSize?.heightPts ?? 841.89)} / 1`,
-      backgroundColor: hasPageThumbnail ? 'white' : 'rgba(255,255,255,0.03)',
-      border: '1px solid var(--border-default, #333)',
-      overflow: 'hidden'
+      backgroundColor: hasPageThumbnail ? "white" : "rgba(255,255,255,0.03)",
+      border: "1px solid var(--border-default, #333)",
+      overflow: "hidden",
     },
     item: {
-      position: 'absolute',
+      position: "absolute",
       left: `${xPx}px`,
       bottom: `${yPx}px`,
       width: `${widthPx}px`,
       height: `${heightPx}px`,
       opacity: displayOpacity,
       transform: `rotate(${-parameters.rotation}deg)`,
-      transformOrigin: parameters.stampType === 'image' ? 'left bottom' : 'center center',
+      transformOrigin: parameters.stampType === "image" ? "left bottom" : "center center",
       color: parameters.customColor,
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'flex-start',
+      display: "flex",
+      flexDirection: "column",
+      justifyContent: "flex-start",
       lineHeight: (ALPHABET_PREVIEW_TWEAKS as any)[parameters.alphabet]?.lineHeight ?? 1,
       alignItems,
-      cursor: showQuickGrid ? 'default' : 'move',
-      pointerEvents: showQuickGrid ? 'none' : 'auto',
-    }
+      cursor: showQuickGrid ? "default" : "move",
+      pointerEvents: showQuickGrid ? "none" : "auto",
+    },
   };
 }
diff --git a/frontend/src/core/components/tools/addStamp/StampSetupSettings.tsx b/frontend/src/core/components/tools/addStamp/StampSetupSettings.tsx
index 54e95b157b..9129abac67 100644
--- a/frontend/src/core/components/tools/addStamp/StampSetupSettings.tsx
+++ b/frontend/src/core/components/tools/addStamp/StampSetupSettings.tsx
@@ -1,6 +1,20 @@
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import { Stack, Textarea, TextInput, Select, Button, Text, Divider, Accordion, Code, Group, Badge, Box, Paper } from "@mantine/core";
+import {
+  Stack,
+  Textarea,
+  TextInput,
+  Select,
+  Button,
+  Text,
+  Divider,
+  Accordion,
+  Code,
+  Group,
+  Badge,
+  Box,
+  Paper,
+} from "@mantine/core";
 import { AddStampParameters } from "@app/components/tools/addStamp/useAddStampParameters";
 import ButtonSelector from "@app/components/shared/ButtonSelector";
 import styles from "@app/components/tools/addStamp/StampPreview.module.css";
@@ -9,76 +23,76 @@ import { Z_INDEX_AUTOMATE_DROPDOWN } from "@app/styles/zIndex";
 
 const STAMP_TEMPLATES = [
   {
-    id: 'page-numbers',
-    name: 'Page Numbers',
-    text: 'Page @page_number of @total_pages',
+    id: "page-numbers",
+    name: "Page Numbers",
+    text: "Page @page_number of @total_pages",
     position: 2, // bottom center
   },
   {
-    id: 'draft',
-    name: 'Draft Watermark',
-    text: 'DRAFT - @date',
+    id: "draft",
+    name: "Draft Watermark",
+    text: "DRAFT - @date",
     position: 5, // center
   },
   {
-    id: 'doc-info',
-    name: 'Document Info',
-    text: '@filename\nCreated: @date{dd MMM yyyy}',
+    id: "doc-info",
+    name: "Document Info",
+    text: "@filename\nCreated: @date{dd MMM yyyy}",
     position: 7, // top left
   },
   {
-    id: 'legal-footer',
-    name: 'Legal Footer',
-    text: '© @year - All Rights Reserved\n@filename - Page @page_number',
+    id: "legal-footer",
+    name: "Legal Footer",
+    text: "© @year - All Rights Reserved\n@filename - Page @page_number",
     position: 2, // bottom center
   },
   {
-    id: 'european-date',
-    name: 'European Date (DD/MM/YYYY)',
-    text: '@date{dd/MM/yyyy}',
+    id: "european-date",
+    name: "European Date (DD/MM/YYYY)",
+    text: "@date{dd/MM/yyyy}",
     position: 9, // top right
   },
   {
-    id: 'timestamp',
-    name: 'Timestamp',
-    text: '@date{dd/MM/yyyy HH:mm}',
+    id: "timestamp",
+    name: "Timestamp",
+    text: "@date{dd/MM/yyyy HH:mm}",
     position: 9, // top right
   },
 ];
 
 const resolveVariablesForPreview = (text: string, filename?: string): string => {
   const now = new Date();
-  const pad = (n: number) => String(n).padStart(2, '0');
+  const pad = (n: number) => String(n).padStart(2, "0");
 
-  const ESCAPED_AT_PLACEHOLDER = '\uE000ESCAPED_AT\uE000';
+  const ESCAPED_AT_PLACEHOLDER = "\uE000ESCAPED_AT\uE000";
   let result = text.replace(/@@/g, ESCAPED_AT_PLACEHOLDER);
 
-  const actualFilename = filename || 'sample-document.pdf';
-  const filenameWithoutExt = actualFilename.includes('.')
-    ? actualFilename.substring(0, actualFilename.lastIndexOf('.'))
+  const actualFilename = filename || "sample-document.pdf";
+  const filenameWithoutExt = actualFilename.includes(".")
+    ? actualFilename.substring(0, actualFilename.lastIndexOf("."))
     : actualFilename;
 
   const sampleData: Record<string, string> = {
-    '@datetime': `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())} ${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`,
-    '@date': `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}`,
-    '@time': `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`,
-    '@year': String(now.getFullYear()),
-    '@month': pad(now.getMonth() + 1),
-    '@day': pad(now.getDate()),
+    "@datetime": `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())} ${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`,
+    "@date": `${now.getFullYear()}-${pad(now.getMonth() + 1)}-${pad(now.getDate())}`,
+    "@time": `${pad(now.getHours())}:${pad(now.getMinutes())}:${pad(now.getSeconds())}`,
+    "@year": String(now.getFullYear()),
+    "@month": pad(now.getMonth() + 1),
+    "@day": pad(now.getDate()),
     // Page info - cannot be previewed, show placeholder
-    '@page_number': '?',
-    '@page': '?',
-    '@total_pages': '?',
-    '@page_count': '?',
+    "@page_number": "?",
+    "@page": "?",
+    "@total_pages": "?",
+    "@page_count": "?",
     // Filename - use actual file if provided
-    '@filename': filenameWithoutExt,
-    '@filename_full': actualFilename,
+    "@filename": filenameWithoutExt,
+    "@filename_full": actualFilename,
     // Metadata - cannot be read from PDF in frontend, show placeholder
-    '@author': '?',
-    '@title': '?',
-    '@subject': '?',
+    "@author": "?",
+    "@title": "?",
+    "@subject": "?",
     // UUID - will be random each time
-    '@uuid': '????????',
+    "@uuid": "????????",
   };
 
   result = result.replace(/@date\{([^}]+)\}/g, (match, format) => {
@@ -86,8 +100,8 @@ const resolveVariablesForPreview = (text: string, filename?: string): string =>
       return format
         .replace(/yyyy/g, String(now.getFullYear()))
         .replace(/yy/g, String(now.getFullYear()).slice(-2))
-        .replace(/MMMM/g, now.toLocaleString('default', { month: 'long' }))
-        .replace(/MMM/g, now.toLocaleString('default', { month: 'short' }))
+        .replace(/MMMM/g, now.toLocaleString("default", { month: "long" }))
+        .replace(/MMM/g, now.toLocaleString("default", { month: "short" }))
         .replace(/MM/g, pad(now.getMonth() + 1))
         .replace(/dd/g, pad(now.getDate()))
         .replace(/HH/g, pad(now.getHours()))
@@ -103,9 +117,9 @@ const resolveVariablesForPreview = (text: string, filename?: string): string =>
     result = result.split(key).join(value);
   });
 
-  result = result.replace(new RegExp(ESCAPED_AT_PLACEHOLDER, 'g'), '@');
+  result = result.replace(new RegExp(ESCAPED_AT_PLACEHOLDER, "g"), "@");
 
-  result = result.replace(/\\n/g, '\n');
+  result = result.replace(/\\n/g, "\n");
 
   return result;
 };
@@ -121,12 +135,12 @@ const ClickableCode = ({ children, onClick, block = false }: ClickableCodeProps)
     tabIndex={0}
     role="button"
     style={{
-      cursor: 'pointer',
-      display: block ? 'block' : undefined,
+      cursor: "pointer",
+      display: block ? "block" : undefined,
     }}
     onClick={onClick}
     onKeyDown={(e: React.KeyboardEvent) => {
-      if (e.key === 'Enter' || e.key === ' ') {
+      if (e.key === "Enter" || e.key === " ") {
         e.preventDefault();
         onClick();
       }
@@ -140,7 +154,7 @@ const StampTextPreview = ({ stampText, filename }: { stampText: string; filename
   const { t } = useTranslation();
 
   const resolvedText = useMemo(() => {
-    if (!stampText.trim()) return '';
+    if (!stampText.trim()) return "";
     return resolveVariablesForPreview(stampText, filename);
   }, [stampText, filename]);
 
@@ -148,8 +162,10 @@ const StampTextPreview = ({ stampText, filename }: { stampText: string; filename
 
   return (
     <Paper p="xs" withBorder bg="var(--mantine-color-default)">
-      <Text size="xs" c="dimmed" mb={4}>{t('AddStampRequest.preview', 'Preview:')}</Text>
-      <Text size="sm" style={{ whiteSpace: 'pre-wrap', fontFamily: 'monospace', wordBreak: 'break-word' }}>
+      <Text size="xs" c="dimmed" mb={4}>
+        {t("AddStampRequest.preview", "Preview:")}
+      </Text>
+      <Text size="sm" style={{ whiteSpace: "pre-wrap", fontFamily: "monospace", wordBreak: "break-word" }}>
         {resolvedText}
       </Text>
     </Paper>
@@ -169,20 +185,22 @@ const StampSetupSettings = ({ parameters, onParameterChange, disabled = false, f
   return (
     <Stack gap="md">
       <TextInput
-        label={t('pageSelectionPrompt', 'Page Selection (e.g. 1,3,2 or 4-8,2,10-12 or 2n-1)')}
+        label={t("pageSelectionPrompt", "Page Selection (e.g. 1,3,2 or 4-8,2,10-12 or 2n-1)")}
         value={parameters.pageNumbers}
-        onChange={(e) => onParameterChange('pageNumbers', e.currentTarget.value)}
+        onChange={(e) => onParameterChange("pageNumbers", e.currentTarget.value)}
         disabled={disabled}
       />
-      <Divider/>
+      <Divider />
       <div>
-        <Text size="sm" fw={500} mb="xs">{t('AddStampRequest.stampType', 'Stamp Type')}</Text>
+        <Text size="sm" fw={500} mb="xs">
+          {t("AddStampRequest.stampType", "Stamp Type")}
+        </Text>
         <ButtonSelector
           value={parameters.stampType}
-          onChange={(v: 'text' | 'image') => onParameterChange('stampType', v)}
+          onChange={(v: "text" | "image") => onParameterChange("stampType", v)}
           options={[
-            { value: 'text', label: t('watermark.type.1', 'Text') },
-            { value: 'image', label: t('watermark.type.2', 'Image') },
+            { value: "text", label: t("watermark.type.1", "Text") },
+            { value: "image", label: t("watermark.type.2", "Image") },
           ]}
           disabled={disabled}
           buttonClassName={styles.modeToggleButton}
@@ -190,22 +208,22 @@ const StampSetupSettings = ({ parameters, onParameterChange, disabled = false, f
         />
       </div>
 
-      {parameters.stampType === 'text' && (
+      {parameters.stampType === "text" && (
         <>
           {/* Template Selector - always shows placeholder, doesn't persist selection */}
           <Select
-            label={t('AddStampRequest.useTemplate', 'Use Template')}
-            placeholder={t('AddStampRequest.selectTemplate', 'Select a template...')}
+            label={t("AddStampRequest.useTemplate", "Use Template")}
+            placeholder={t("AddStampRequest.selectTemplate", "Select a template...")}
             value={null}
-            data={STAMP_TEMPLATES.map(template => ({
+            data={STAMP_TEMPLATES.map((template) => ({
               value: template.id,
-              label: t(`AddStampRequest.template.${template.id}`, template.name)
+              label: t(`AddStampRequest.template.${template.id}`, template.name),
             }))}
             onChange={(value) => {
-              const template = STAMP_TEMPLATES.find(t => t.id === value);
+              const template = STAMP_TEMPLATES.find((t) => t.id === value);
               if (template) {
-                onParameterChange('stampText', template.text);
-                onParameterChange('position', template.position as any);
+                onParameterChange("stampText", template.text);
+                onParameterChange("position", template.position as any);
               }
             }}
             clearable
@@ -214,10 +232,13 @@ const StampSetupSettings = ({ parameters, onParameterChange, disabled = false, f
           />
 
           <Textarea
-            label={t('AddStampRequest.stampText', 'Stamp Text')}
-            description={t('AddStampRequest.stampTextDescription', 'Use dynamic variables below. Use @@ for literal @. Use \\n for new lines.')}
+            label={t("AddStampRequest.stampText", "Stamp Text")}
+            description={t(
+              "AddStampRequest.stampTextDescription",
+              "Use dynamic variables below. Use @@ for literal @. Use \\n for new lines.",
+            )}
             value={parameters.stampText}
-            onChange={(e) => onParameterChange('stampText', e.currentTarget.value)}
+            onChange={(e) => onParameterChange("stampText", e.currentTarget.value)}
             autosize
             minRows={2}
             disabled={disabled}
@@ -230,127 +251,170 @@ const StampSetupSettings = ({ parameters, onParameterChange, disabled = false, f
             <Accordion.Item value="variables">
               <Accordion.Control>
                 <Group gap="xs">
-                  <Text size="sm" fw={500}>{t('AddStampRequest.dynamicVariables', 'Dynamic Variables')}</Text>
-                  <Badge size="xs" variant="light" color="blue">{t('AddStampRequest.clickToExpand', 'Click to expand')}</Badge>
+                  <Text size="sm" fw={500}>
+                    {t("AddStampRequest.dynamicVariables", "Dynamic Variables")}
+                  </Text>
+                  <Badge size="xs" variant="light" color="blue">
+                    {t("AddStampRequest.clickToExpand", "Click to expand")}
+                  </Badge>
                 </Group>
               </Accordion.Control>
               <Accordion.Panel>
                 <Stack gap="xs">
                   <Text size="xs" c="dimmed" mb="xs">
-                    {t('AddStampRequest.variablesHelp', 'Click on any variable to insert it into your stamp text. Use @@ for literal @.')}
+                    {t(
+                      "AddStampRequest.variablesHelp",
+                      "Click on any variable to insert it into your stamp text. Use @@ for literal @.",
+                    )}
                   </Text>
                   <Box>
-                    <Text size="xs" fw={600} mb={4}>{t('AddStampRequest.dateTimeVars', 'Date & Time')}</Text>
+                    <Text size="xs" fw={600} mb={4}>
+                      {t("AddStampRequest.dateTimeVars", "Date & Time")}
+                    </Text>
                     <Group gap="xs">
-                      <ClickableCode onClick={() => onParameterChange('stampText', parameters.stampText + '@date')}>
+                      <ClickableCode onClick={() => onParameterChange("stampText", parameters.stampText + "@date")}>
                         @date
                       </ClickableCode>
-                      <Text size="xs" c="dimmed">— {t('AddStampRequest.dateDesc', 'Current date')} (YYYY-MM-DD)</Text>
+                      <Text size="xs" c="dimmed">
+                        — {t("AddStampRequest.dateDesc", "Current date")} (YYYY-MM-DD)
+                      </Text>
                     </Group>
                     <Group gap="xs" mt={4}>
-                      <ClickableCode onClick={() => onParameterChange('stampText', parameters.stampText + '@time')}>
+                      <ClickableCode onClick={() => onParameterChange("stampText", parameters.stampText + "@time")}>
                         @time
                       </ClickableCode>
-                      <Text size="xs" c="dimmed">— {t('AddStampRequest.timeDesc', 'Current time')} (HH:mm:ss)</Text>
+                      <Text size="xs" c="dimmed">
+                        — {t("AddStampRequest.timeDesc", "Current time")} (HH:mm:ss)
+                      </Text>
                     </Group>
                     <Group gap="xs" mt={4}>
-                      <ClickableCode onClick={() => onParameterChange('stampText', parameters.stampText + '@datetime')}>
+                      <ClickableCode onClick={() => onParameterChange("stampText", parameters.stampText + "@datetime")}>
                         @datetime
                       </ClickableCode>
-                      <Text size="xs" c="dimmed">— {t('AddStampRequest.datetimeDesc', 'Date and time combined')}</Text>
+                      <Text size="xs" c="dimmed">
+                        — {t("AddStampRequest.datetimeDesc", "Date and time combined")}
+                      </Text>
                     </Group>
                     <Group gap="xs" mt={4}>
-                      <ClickableCode onClick={() => onParameterChange('stampText', parameters.stampText + '@date{dd/MM/yyyy}')}>
+                      <ClickableCode
+                        onClick={() => onParameterChange("stampText", parameters.stampText + "@date{dd/MM/yyyy}")}
+                      >
                         @date&#123;format&#125;
                       </ClickableCode>
-                      <Text size="xs" c="dimmed">— {t('AddStampRequest.customDateDesc', 'Custom format')}</Text>
+                      <Text size="xs" c="dimmed">
+                        — {t("AddStampRequest.customDateDesc", "Custom format")}
+                      </Text>
                     </Group>
                     <Group gap="xs" mt={4}>
-                      <ClickableCode onClick={() => onParameterChange('stampText', parameters.stampText + '@year')}>
+                      <ClickableCode onClick={() => onParameterChange("stampText", parameters.stampText + "@year")}>
                         @year
                       </ClickableCode>
-                      <ClickableCode onClick={() => onParameterChange('stampText', parameters.stampText + '@month')}>
+                      <ClickableCode onClick={() => onParameterChange("stampText", parameters.stampText + "@month")}>
                         @month
                       </ClickableCode>
-                      <ClickableCode onClick={() => onParameterChange('stampText', parameters.stampText + '@day')}>
+                      <ClickableCode onClick={() => onParameterChange("stampText", parameters.stampText + "@day")}>
                         @day
                       </ClickableCode>
-                      <Text size="xs" c="dimmed">— {t('AddStampRequest.yearMonthDayDesc', 'Individual date parts')}</Text>
+                      <Text size="xs" c="dimmed">
+                        — {t("AddStampRequest.yearMonthDayDesc", "Individual date parts")}
+                      </Text>
                     </Group>
                   </Box>
                   <Divider my="xs" />
                   <Box>
-                    <Text size="xs" fw={600} mb={4}>{t('AddStampRequest.pageVars', 'Page Information')}</Text>
+                    <Text size="xs" fw={600} mb={4}>
+                      {t("AddStampRequest.pageVars", "Page Information")}
+                    </Text>
                     <Group gap="xs">
-                      <ClickableCode onClick={() => onParameterChange('stampText', parameters.stampText + '@page_number')}>
+                      <ClickableCode onClick={() => onParameterChange("stampText", parameters.stampText + "@page_number")}>
                         @page_number
                       </ClickableCode>
-                      <Text size="xs" c="dimmed">— {t('AddStampRequest.pageNumberDesc', 'Current page number')}</Text>
+                      <Text size="xs" c="dimmed">
+                        — {t("AddStampRequest.pageNumberDesc", "Current page number")}
+                      </Text>
                     </Group>
                     <Group gap="xs" mt={4}>
-                      <ClickableCode onClick={() => onParameterChange('stampText', parameters.stampText + '@total_pages')}>
+                      <ClickableCode onClick={() => onParameterChange("stampText", parameters.stampText + "@total_pages")}>
                         @total_pages
                       </ClickableCode>
-                      <Text size="xs" c="dimmed">— {t('AddStampRequest.totalPagesDesc', 'Total number of pages')}</Text>
+                      <Text size="xs" c="dimmed">
+                        — {t("AddStampRequest.totalPagesDesc", "Total number of pages")}
+                      </Text>
                     </Group>
                   </Box>
                   <Divider my="xs" />
                   <Box>
-                    <Text size="xs" fw={600} mb={4}>{t('AddStampRequest.fileVars', 'File Information')}</Text>
+                    <Text size="xs" fw={600} mb={4}>
+                      {t("AddStampRequest.fileVars", "File Information")}
+                    </Text>
                     <Group gap="xs">
-                      <ClickableCode onClick={() => onParameterChange('stampText', parameters.stampText + '@filename')}>
+                      <ClickableCode onClick={() => onParameterChange("stampText", parameters.stampText + "@filename")}>
                         @filename
                       </ClickableCode>
-                      <Text size="xs" c="dimmed">— {t('AddStampRequest.filenameDesc', 'Filename without extension')}</Text>
+                      <Text size="xs" c="dimmed">
+                        — {t("AddStampRequest.filenameDesc", "Filename without extension")}
+                      </Text>
                     </Group>
                     <Group gap="xs" mt={4}>
-                      <ClickableCode onClick={() => onParameterChange('stampText', parameters.stampText + '@filename_full')}>
+                      <ClickableCode onClick={() => onParameterChange("stampText", parameters.stampText + "@filename_full")}>
                         @filename_full
                       </ClickableCode>
-                      <Text size="xs" c="dimmed">— {t('AddStampRequest.filenameFullDesc', 'Filename with extension')}</Text>
+                      <Text size="xs" c="dimmed">
+                        — {t("AddStampRequest.filenameFullDesc", "Filename with extension")}
+                      </Text>
                     </Group>
                   </Box>
                   <Divider my="xs" />
                   <Box>
-                    <Text size="xs" fw={600} mb={4}>{t('AddStampRequest.metadataVars', 'Document Metadata')}</Text>
+                    <Text size="xs" fw={600} mb={4}>
+                      {t("AddStampRequest.metadataVars", "Document Metadata")}
+                    </Text>
                     <Group gap="xs">
-                      <ClickableCode onClick={() => onParameterChange('stampText', parameters.stampText + '@author')}>
+                      <ClickableCode onClick={() => onParameterChange("stampText", parameters.stampText + "@author")}>
                         @author
                       </ClickableCode>
-                      <ClickableCode onClick={() => onParameterChange('stampText', parameters.stampText + '@title')}>
+                      <ClickableCode onClick={() => onParameterChange("stampText", parameters.stampText + "@title")}>
                         @title
                       </ClickableCode>
-                      <ClickableCode onClick={() => onParameterChange('stampText', parameters.stampText + '@subject')}>
+                      <ClickableCode onClick={() => onParameterChange("stampText", parameters.stampText + "@subject")}>
                         @subject
                       </ClickableCode>
                     </Group>
-                    <Text size="xs" c="dimmed" mt={4}>— {t('AddStampRequest.metadataDesc', 'From PDF document properties')}</Text>
+                    <Text size="xs" c="dimmed" mt={4}>
+                      — {t("AddStampRequest.metadataDesc", "From PDF document properties")}
+                    </Text>
                   </Box>
                   <Divider my="xs" />
                   <Box>
-                    <Text size="xs" fw={600} mb={4}>{t('AddStampRequest.otherVars', 'Other')}</Text>
+                    <Text size="xs" fw={600} mb={4}>
+                      {t("AddStampRequest.otherVars", "Other")}
+                    </Text>
                     <Group gap="xs">
-                      <ClickableCode onClick={() => onParameterChange('stampText', parameters.stampText + '@uuid')}>
+                      <ClickableCode onClick={() => onParameterChange("stampText", parameters.stampText + "@uuid")}>
                         @uuid
                       </ClickableCode>
-                      <Text size="xs" c="dimmed">— {t('AddStampRequest.uuidDesc', 'Short unique identifier (8 chars)')}</Text>
+                      <Text size="xs" c="dimmed">
+                        — {t("AddStampRequest.uuidDesc", "Short unique identifier (8 chars)")}
+                      </Text>
                     </Group>
                   </Box>
                   <Divider my="xs" />
                   <Box>
-                    <Text size="xs" fw={600} mb={4}>{t('AddStampRequest.examples', 'Examples')}</Text>
+                    <Text size="xs" fw={600} mb={4}>
+                      {t("AddStampRequest.examples", "Examples")}
+                    </Text>
                     <Stack gap={4}>
-                      <ClickableCode block onClick={() => onParameterChange('stampText', 'Page @page_number of @total_pages')}>
+                      <ClickableCode block onClick={() => onParameterChange("stampText", "Page @page_number of @total_pages")}>
                         Page @page_number of @total_pages
                       </ClickableCode>
-                      <ClickableCode block onClick={() => onParameterChange('stampText', 'Created: @date{dd/MM/yyyy HH:mm}')}>
+                      <ClickableCode block onClick={() => onParameterChange("stampText", "Created: @date{dd/MM/yyyy HH:mm}")}>
                         Created: @date&#123;dd/MM/yyyy HH:mm&#125;
                       </ClickableCode>
-                      <ClickableCode block onClick={() => onParameterChange('stampText', '© @year @author')}>
+                      <ClickableCode block onClick={() => onParameterChange("stampText", "© @year @author")}>
                         © @year @author
                       </ClickableCode>
-                      <ClickableCode block onClick={() => onParameterChange('stampText', '@filename\\n@date')}>
-                        @filename\n@date ({t('AddStampRequest.multiLine', 'multi-line')})
+                      <ClickableCode block onClick={() => onParameterChange("stampText", "@filename\\n@date")}>
+                        @filename\n@date ({t("AddStampRequest.multiLine", "multi-line")})
                       </ClickableCode>
                     </Stack>
                   </Box>
@@ -359,21 +423,21 @@ const StampSetupSettings = ({ parameters, onParameterChange, disabled = false, f
             </Accordion.Item>
           </Accordion>
           <Select
-            label={t('AddStampRequest.alphabet', 'Alphabet')}
+            label={t("AddStampRequest.alphabet", "Alphabet")}
             value={parameters.alphabet}
             onChange={(v) => {
-              const nextAlphabet = (v as any) || 'roman';
-              onParameterChange('alphabet', nextAlphabet);
+              const nextAlphabet = (v as any) || "roman";
+              onParameterChange("alphabet", nextAlphabet);
               const nextDefault = getDefaultFontSizeForAlphabet(nextAlphabet);
-              onParameterChange('fontSize', nextDefault);
+              onParameterChange("fontSize", nextDefault);
             }}
             data={[
-              { value: 'roman', label: 'Roman' },
-              { value: 'arabic', label: 'العربية' },
-              { value: 'japanese', label: '日本語' },
-              { value: 'korean', label: '한국어' },
-              { value: 'chinese', label: '简体中文' },
-              { value: 'thai', label: 'ไทย' },
+              { value: "roman", label: "Roman" },
+              { value: "arabic", label: "العربية" },
+              { value: "japanese", label: "日本語" },
+              { value: "korean", label: "한국어" },
+              { value: "chinese", label: "简体中文" },
+              { value: "thai", label: "ไทย" },
             ]}
             disabled={disabled}
             comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
@@ -381,26 +445,21 @@ const StampSetupSettings = ({ parameters, onParameterChange, disabled = false, f
         </>
       )}
 
-      {parameters.stampType === 'image' && (
+      {parameters.stampType === "image" && (
         <Stack gap="xs">
           <input
             type="file"
             accept=".png,.jpg,.jpeg,.gif,.bmp,.tiff,.tif,.webp"
             onChange={(e) => {
               const file = e.target.files?.[0];
-              if (file) onParameterChange('stampImage', file);
+              if (file) onParameterChange("stampImage", file);
             }}
             disabled={disabled}
-            style={{ display: 'none' }}
+            style={{ display: "none" }}
             id="stamp-image-input"
           />
-          <Button
-            size="xs"
-            component="label"
-            htmlFor="stamp-image-input"
-            disabled={disabled}
-          >
-            {t('chooseFile', 'Choose File')}
+          <Button size="xs" component="label" htmlFor="stamp-image-input" disabled={disabled}>
+            {t("chooseFile", "Choose File")}
           </Button>
           {parameters.stampImage && (
             <Stack gap="xs">
diff --git a/frontend/src/core/components/tools/addStamp/useAddStampOperation.ts b/frontend/src/core/components/tools/addStamp/useAddStampOperation.ts
index 12b9c0a1a1..b6e0bf79e3 100644
--- a/frontend/src/core/components/tools/addStamp/useAddStampOperation.ts
+++ b/frontend/src/core/components/tools/addStamp/useAddStampOperation.ts
@@ -1,29 +1,32 @@
-import { useTranslation } from 'react-i18next';
-import { ToolType, useToolOperation } from '@app/hooks/tools/shared/useToolOperation';
-import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
-import { AddStampParameters, defaultParameters } from '@app/components/tools/addStamp/useAddStampParameters';
+import { useTranslation } from "react-i18next";
+import { ToolType, useToolOperation } from "@app/hooks/tools/shared/useToolOperation";
+import { createStandardErrorHandler } from "@app/utils/toolErrorHandler";
+import { AddStampParameters, defaultParameters } from "@app/components/tools/addStamp/useAddStampParameters";
 
 export const buildAddStampFormData = (parameters: AddStampParameters, file: File): FormData => {
   const formData = new FormData();
-  formData.append('fileInput', file);
-  formData.append('pageNumbers', parameters.pageNumbers);
-  formData.append('customMargin', parameters.customMargin || 'medium'); 
-  formData.append('position', String(parameters.position));
+  formData.append("fileInput", file);
+  formData.append("pageNumbers", parameters.pageNumbers);
+  formData.append("customMargin", parameters.customMargin || "medium");
+  formData.append("position", String(parameters.position));
   const effectiveFontSize = parameters.fontSize;
-  formData.append('fontSize', String(effectiveFontSize));
-  formData.append('rotation', String(parameters.rotation));
-  formData.append('opacity', String(parameters.opacity / 100));
-  formData.append('overrideX', String(parameters.overrideX));
-  formData.append('overrideY', String(parameters.overrideY));
-  formData.append('customColor', parameters.customColor.startsWith('#') ? parameters.customColor : `#${parameters.customColor}`);
-  formData.append('alphabet', parameters.alphabet);
+  formData.append("fontSize", String(effectiveFontSize));
+  formData.append("rotation", String(parameters.rotation));
+  formData.append("opacity", String(parameters.opacity / 100));
+  formData.append("overrideX", String(parameters.overrideX));
+  formData.append("overrideY", String(parameters.overrideY));
+  formData.append(
+    "customColor",
+    parameters.customColor.startsWith("#") ? parameters.customColor : `#${parameters.customColor}`,
+  );
+  formData.append("alphabet", parameters.alphabet);
 
   // Stamp type and payload
-  formData.append('stampType', parameters.stampType || 'text');
-  if (parameters.stampType === 'text') {
-    formData.append('stampText', parameters.stampText);
-  } else if (parameters.stampType === 'image' && parameters.stampImage) {
-    formData.append('stampImage', parameters.stampImage);
+  formData.append("stampType", parameters.stampType || "text");
+  if (parameters.stampType === "text") {
+    formData.append("stampText", parameters.stampText);
+  } else if (parameters.stampType === "image" && parameters.stampImage) {
+    formData.append("stampImage", parameters.stampImage);
   }
 
   return formData;
@@ -32,8 +35,8 @@ export const buildAddStampFormData = (parameters: AddStampParameters, file: File
 export const addStampOperationConfig = {
   toolType: ToolType.singleFile,
   buildFormData: buildAddStampFormData,
-  operationType: 'addStamp',
-  endpoint: '/api/v1/misc/add-stamp',
+  operationType: "addStamp",
+  endpoint: "/api/v1/misc/add-stamp",
   defaultParameters,
 } as const;
 
@@ -43,9 +46,7 @@ export const useAddStampOperation = () => {
   return useToolOperation<AddStampParameters>({
     ...addStampOperationConfig,
     getErrorMessage: createStandardErrorHandler(
-      t('AddStampRequest.error.failed', 'An error occurred while adding stamp to the PDF.')
+      t("AddStampRequest.error.failed", "An error occurred while adding stamp to the PDF."),
     ),
   });
 };
-
-
diff --git a/frontend/src/core/components/tools/addStamp/useAddStampParameters.ts b/frontend/src/core/components/tools/addStamp/useAddStampParameters.ts
index df198e1192..89c85013b4 100644
--- a/frontend/src/core/components/tools/addStamp/useAddStampParameters.ts
+++ b/frontend/src/core/components/tools/addStamp/useAddStampParameters.ts
@@ -1,37 +1,37 @@
-import { BaseParameters } from '@app/types/parameters';
-import { useBaseParameters, type BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
+import { BaseParameters } from "@app/types/parameters";
+import { useBaseParameters, type BaseParametersHook } from "@app/hooks/tools/shared/useBaseParameters";
 
 export interface AddStampParameters extends BaseParameters {
-  stampType?: 'text' | 'image';
+  stampType?: "text" | "image";
   stampText: string;
   stampImage?: File;
-  alphabet: 'roman' | 'arabic' | 'japanese' | 'korean' | 'chinese' | 'thai';
-  fontSize: number; 
-  rotation: number; 
+  alphabet: "roman" | "arabic" | "japanese" | "korean" | "chinese" | "thai";
+  fontSize: number;
+  rotation: number;
   opacity: number;
-  position: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9; 
+  position: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9;
   overrideX: number;
-  overrideY: number; 
-  customMargin: 'small' | 'medium' | 'large' | 'x-large';
+  overrideY: number;
+  customMargin: "small" | "medium" | "large" | "x-large";
   customColor: string;
   pageNumbers: string;
-  _activePill: 'fontSize' | 'rotation' | 'opacity';
+  _activePill: "fontSize" | "rotation" | "opacity";
 }
 
 export const defaultParameters: AddStampParameters = {
-  stampType: 'text',
-  stampText: '',
-  alphabet: 'roman',
+  stampType: "text",
+  stampText: "",
+  alphabet: "roman",
   fontSize: 40,
   rotation: 0,
   opacity: 50,
   position: 5,
   overrideX: -1,
   overrideY: -1,
-  customMargin: 'medium',
-  customColor: '#d3d3d3',
-  pageNumbers: '1',
-  _activePill: 'fontSize',
+  customMargin: "medium",
+  customColor: "#d3d3d3",
+  pageNumbers: "1",
+  _activePill: "fontSize",
 };
 
 export type AddStampParametersHook = BaseParametersHook<AddStampParameters>;
@@ -39,15 +39,13 @@ export type AddStampParametersHook = BaseParametersHook<AddStampParameters>;
 export const useAddStampParameters = (): AddStampParametersHook => {
   return useBaseParameters<AddStampParameters>({
     defaultParameters,
-    endpointName: 'add-stamp',
+    endpointName: "add-stamp",
     validateFn: (params): boolean => {
       if (!params.stampType) return false;
-      if (params.stampType === 'text') {
+      if (params.stampType === "text") {
         return params.stampText.trim().length > 0;
       }
       return params.stampImage !== undefined;
     },
   });
 };
-
-
diff --git a/frontend/src/core/components/tools/addWatermark/AddWatermarkSingleStepSettings.tsx b/frontend/src/core/components/tools/addWatermark/AddWatermarkSingleStepSettings.tsx
index 347c4f1857..2c805fdc2c 100644
--- a/frontend/src/core/components/tools/addWatermark/AddWatermarkSingleStepSettings.tsx
+++ b/frontend/src/core/components/tools/addWatermark/AddWatermarkSingleStepSettings.tsx
@@ -20,7 +20,11 @@ interface AddWatermarkSingleStepSettingsProps {
   disabled?: boolean;
 }
 
-const AddWatermarkSingleStepSettings = ({ parameters, onParameterChange, disabled = false }: AddWatermarkSingleStepSettingsProps) => {
+const AddWatermarkSingleStepSettings = ({
+  parameters,
+  onParameterChange,
+  disabled = false,
+}: AddWatermarkSingleStepSettingsProps) => {
   return (
     <Stack gap="lg">
       {/* Watermark Type Selection */}
@@ -33,34 +37,18 @@ const AddWatermarkSingleStepSettings = ({ parameters, onParameterChange, disable
       {/* Conditional settings based on watermark type */}
       {parameters.watermarkType === "text" && (
         <>
-          <WatermarkWording
-            parameters={parameters}
-            onParameterChange={onParameterChange}
-            disabled={disabled}
-          />
-          <WatermarkTextStyle
-            parameters={parameters}
-            onParameterChange={onParameterChange}
-            disabled={disabled}
-          />
+          <WatermarkWording parameters={parameters} onParameterChange={onParameterChange} disabled={disabled} />
+          <WatermarkTextStyle parameters={parameters} onParameterChange={onParameterChange} disabled={disabled} />
         </>
       )}
 
       {parameters.watermarkType === "image" && (
-        <WatermarkImageFile
-          parameters={parameters}
-          onParameterChange={onParameterChange}
-          disabled={disabled}
-        />
+        <WatermarkImageFile parameters={parameters} onParameterChange={onParameterChange} disabled={disabled} />
       )}
 
       {/* Formatting settings for both text and image */}
       {parameters.watermarkType && (
-        <WatermarkFormatting
-          parameters={parameters}
-          onParameterChange={onParameterChange}
-          disabled={disabled}
-        />
+        <WatermarkFormatting parameters={parameters} onParameterChange={onParameterChange} disabled={disabled} />
       )}
     </Stack>
   );
diff --git a/frontend/src/core/components/tools/addWatermark/WatermarkFormatting.tsx b/frontend/src/core/components/tools/addWatermark/WatermarkFormatting.tsx
index 1e9b224e84..60d042d0a1 100644
--- a/frontend/src/core/components/tools/addWatermark/WatermarkFormatting.tsx
+++ b/frontend/src/core/components/tools/addWatermark/WatermarkFormatting.tsx
@@ -16,10 +16,10 @@ const WatermarkFormatting = ({ parameters, onParameterChange, disabled = false }
     <Stack gap="md">
       {/* Size - single row */}
       <NumberInputWithUnit
-        label={t('watermark.settings.size', 'Size')}
+        label={t("watermark.settings.size", "Size")}
         value={parameters.fontSize}
-        onChange={(value) => onParameterChange('fontSize', typeof value === 'number' ? value : 12)}
-        unit={parameters.watermarkType === 'text' ? 'pt' : 'px'}
+        onChange={(value) => onParameterChange("fontSize", typeof value === "number" ? value : 12)}
+        unit={parameters.watermarkType === "text" ? "pt" : "px"}
         min={1}
         disabled={disabled}
       />
@@ -27,18 +27,18 @@ const WatermarkFormatting = ({ parameters, onParameterChange, disabled = false }
       {/* Position & Appearance - 2 per row */}
       <Group grow align="flex-start">
         <NumberInputWithUnit
-          label={t('watermark.settings.rotation', 'Rotation')}
+          label={t("watermark.settings.rotation", "Rotation")}
           value={parameters.rotation}
-          onChange={(value) => onParameterChange('rotation', typeof value === 'number' ? value : 0)}
+          onChange={(value) => onParameterChange("rotation", typeof value === "number" ? value : 0)}
           unit="°"
           min={-360}
           max={360}
           disabled={disabled}
         />
         <NumberInputWithUnit
-          label={t('watermark.settings.opacity', 'Opacity')}
+          label={t("watermark.settings.opacity", "Opacity")}
           value={parameters.opacity}
-          onChange={(value) => onParameterChange('opacity', typeof value === 'number' ? value : 50)}
+          onChange={(value) => onParameterChange("opacity", typeof value === "number" ? value : 50)}
           unit="%"
           min={0}
           max={100}
@@ -49,18 +49,18 @@ const WatermarkFormatting = ({ parameters, onParameterChange, disabled = false }
       {/* Spacing - 2 per row */}
       <Group grow align="flex-start">
         <NumberInputWithUnit
-          label={t('watermark.settings.spacing.horizontal', 'Horizontal Spacing')}
+          label={t("watermark.settings.spacing.horizontal", "Horizontal Spacing")}
           value={parameters.widthSpacer}
-          onChange={(value) => onParameterChange('widthSpacer', typeof value === 'number' ? value : 50)}
+          onChange={(value) => onParameterChange("widthSpacer", typeof value === "number" ? value : 50)}
           unit="px"
           min={0}
           max={200}
           disabled={disabled}
         />
         <NumberInputWithUnit
-          label={t('watermark.settings.spacing.vertical', 'Vertical Spacing')}
+          label={t("watermark.settings.spacing.vertical", "Vertical Spacing")}
           value={parameters.heightSpacer}
-          onChange={(value) => onParameterChange('heightSpacer', typeof value === 'number' ? value : 50)}
+          onChange={(value) => onParameterChange("heightSpacer", typeof value === "number" ? value : 50)}
           unit="px"
           min={0}
           max={200}
@@ -70,9 +70,9 @@ const WatermarkFormatting = ({ parameters, onParameterChange, disabled = false }
 
       {/* Advanced Options */}
       <Checkbox
-        label={t('watermark.settings.convertToImage', 'Flatten PDF pages to images')}
+        label={t("watermark.settings.convertToImage", "Flatten PDF pages to images")}
         checked={parameters.convertPDFToImage}
-        onChange={(event) => onParameterChange('convertPDFToImage', event.currentTarget.checked)}
+        onChange={(event) => onParameterChange("convertPDFToImage", event.currentTarget.checked)}
         disabled={disabled}
       />
     </Stack>
diff --git a/frontend/src/core/components/tools/addWatermark/WatermarkImageFile.tsx b/frontend/src/core/components/tools/addWatermark/WatermarkImageFile.tsx
index 39f614845a..2cd970dcb3 100644
--- a/frontend/src/core/components/tools/addWatermark/WatermarkImageFile.tsx
+++ b/frontend/src/core/components/tools/addWatermark/WatermarkImageFile.tsx
@@ -16,10 +16,10 @@ const WatermarkImageFile = ({ parameters, onParameterChange, disabled = false }:
     <Stack gap="sm">
       <FileUploadButton
         file={parameters.watermarkImage}
-        onChange={(file) => onParameterChange('watermarkImage', file || undefined)}
+        onChange={(file) => onParameterChange("watermarkImage", file || undefined)}
         accept="image/*"
         disabled={disabled}
-        placeholder={t('watermark.settings.image.choose', 'Choose Image')}
+        placeholder={t("watermark.settings.image.choose", "Choose Image")}
       />
     </Stack>
   );
diff --git a/frontend/src/core/components/tools/addWatermark/WatermarkStyleSettings.tsx b/frontend/src/core/components/tools/addWatermark/WatermarkStyleSettings.tsx
index 89a74076d0..5e94701313 100644
--- a/frontend/src/core/components/tools/addWatermark/WatermarkStyleSettings.tsx
+++ b/frontend/src/core/components/tools/addWatermark/WatermarkStyleSettings.tsx
@@ -15,19 +15,27 @@ const WatermarkStyleSettings = ({ parameters, onParameterChange, disabled = fals
     <Stack gap="md">
       {/* Appearance Settings */}
       <Stack gap="sm">
-        <Text size="sm" fw={500}>{t('watermark.settings.rotation', 'Rotation (degrees)')}</Text>
+        <Text size="sm" fw={500}>
+          {t("watermark.settings.rotation", "Rotation (degrees)")}
+        </Text>
         <NumberInput
           value={parameters.rotation}
-          onChange={(value) => onParameterChange('rotation', typeof value === 'number' ? value : (parseInt(value as string, 10) || 0))}
+          onChange={(value) =>
+            onParameterChange("rotation", typeof value === "number" ? value : parseInt(value as string, 10) || 0)
+          }
           min={-360}
           max={360}
           disabled={disabled}
         />
 
-        <Text size="sm" fw={500}>{t('watermark.settings.opacity', 'Opacity (%)')}</Text>
+        <Text size="sm" fw={500}>
+          {t("watermark.settings.opacity", "Opacity (%)")}
+        </Text>
         <NumberInput
           value={parameters.opacity}
-          onChange={(value) => onParameterChange('opacity', typeof value === 'number' ? value : (parseInt(value as string, 10) || 50))}
+          onChange={(value) =>
+            onParameterChange("opacity", typeof value === "number" ? value : parseInt(value as string, 10) || 50)
+          }
           min={0}
           max={100}
           disabled={disabled}
@@ -36,25 +44,32 @@ const WatermarkStyleSettings = ({ parameters, onParameterChange, disabled = fals
 
       {/* Spacing Settings */}
       <Stack gap="sm">
-        <Text size="sm" fw={500}>{t('watermark.settings.spacing.width', 'Width Spacing')}</Text>
+        <Text size="sm" fw={500}>
+          {t("watermark.settings.spacing.width", "Width Spacing")}
+        </Text>
         <NumberInput
           value={parameters.widthSpacer}
-          onChange={(value) => onParameterChange('widthSpacer', typeof value === 'number' ? value : (parseInt(value as string, 10) || 50))}
+          onChange={(value) =>
+            onParameterChange("widthSpacer", typeof value === "number" ? value : parseInt(value as string, 10) || 50)
+          }
           min={0}
           max={200}
           disabled={disabled}
         />
 
-        <Text size="sm" fw={500}>{t('watermark.settings.spacing.height', 'Height Spacing')}</Text>
+        <Text size="sm" fw={500}>
+          {t("watermark.settings.spacing.height", "Height Spacing")}
+        </Text>
         <NumberInput
           value={parameters.heightSpacer}
-          onChange={(value) => onParameterChange('heightSpacer', typeof value === 'number' ? value : (parseInt(value as string, 10) || 50))}
+          onChange={(value) =>
+            onParameterChange("heightSpacer", typeof value === "number" ? value : parseInt(value as string, 10) || 50)
+          }
           min={0}
           max={200}
           disabled={disabled}
         />
       </Stack>
-
     </Stack>
   );
 };
diff --git a/frontend/src/core/components/tools/addWatermark/WatermarkTextStyle.tsx b/frontend/src/core/components/tools/addWatermark/WatermarkTextStyle.tsx
index e0aa22a7b3..15d373e835 100644
--- a/frontend/src/core/components/tools/addWatermark/WatermarkTextStyle.tsx
+++ b/frontend/src/core/components/tools/addWatermark/WatermarkTextStyle.tsx
@@ -13,7 +13,6 @@ interface WatermarkTextStyleProps {
 const WatermarkTextStyle = ({ parameters, onParameterChange, disabled = false }: WatermarkTextStyleProps) => {
   const { t } = useTranslation();
 
-
   return (
     <Stack gap="sm">
       <Stack gap="xs">
diff --git a/frontend/src/core/components/tools/addWatermark/WatermarkTypeSettings.tsx b/frontend/src/core/components/tools/addWatermark/WatermarkTypeSettings.tsx
index 19bb42d836..4f3caa4cab 100644
--- a/frontend/src/core/components/tools/addWatermark/WatermarkTypeSettings.tsx
+++ b/frontend/src/core/components/tools/addWatermark/WatermarkTypeSettings.tsx
@@ -2,8 +2,8 @@ import { useTranslation } from "react-i18next";
 import ButtonSelector from "@app/components/shared/ButtonSelector";
 
 interface WatermarkTypeSettingsProps {
-  watermarkType?: 'text' | 'image';
-  onWatermarkTypeChange: (type: 'text' | 'image') => void;
+  watermarkType?: "text" | "image";
+  onWatermarkTypeChange: (type: "text" | "image") => void;
   disabled?: boolean;
 }
 
@@ -16,12 +16,12 @@ const WatermarkTypeSettings = ({ watermarkType, onWatermarkTypeChange, disabled
       onChange={onWatermarkTypeChange}
       options={[
         {
-          value: 'text',
-          label: t('watermark.watermarkType.text', 'Text'),
+          value: "text",
+          label: t("watermark.watermarkType.text", "Text"),
         },
         {
-          value: 'image',
-          label: t('watermark.watermarkType.image', 'Image'),
+          value: "image",
+          label: t("watermark.watermarkType.image", "Image"),
         },
       ]}
       disabled={disabled}
diff --git a/frontend/src/core/components/tools/addWatermark/WatermarkWording.tsx b/frontend/src/core/components/tools/addWatermark/WatermarkWording.tsx
index eb3655c860..ef4695f838 100644
--- a/frontend/src/core/components/tools/addWatermark/WatermarkWording.tsx
+++ b/frontend/src/core/components/tools/addWatermark/WatermarkWording.tsx
@@ -16,13 +16,13 @@ const WatermarkWording = ({ parameters, onParameterChange, disabled = false }: W
   const handleTextChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const value = e.target.value;
     const filteredValue = removeEmojis(value);
-    onParameterChange('watermarkText', filteredValue);
+    onParameterChange("watermarkText", filteredValue);
   };
 
   return (
     <Stack gap="sm">
       <TextInput
-        placeholder={t('watermark.settings.text.placeholder', 'Enter watermark text')}
+        placeholder={t("watermark.settings.text.placeholder", "Enter watermark text")}
         value={parameters.watermarkText}
         onChange={handleTextChange}
         disabled={disabled}
diff --git a/frontend/src/core/components/tools/adjustContrast/AdjustContrastBasicSettings.tsx b/frontend/src/core/components/tools/adjustContrast/AdjustContrastBasicSettings.tsx
index 061eac659c..a40364b9eb 100644
--- a/frontend/src/core/components/tools/adjustContrast/AdjustContrastBasicSettings.tsx
+++ b/frontend/src/core/components/tools/adjustContrast/AdjustContrastBasicSettings.tsx
@@ -1,7 +1,7 @@
-import { Stack } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { AdjustContrastParameters } from '@app/hooks/tools/adjustContrast/useAdjustContrastParameters';
-import SliderWithInput from '@app/components/shared/sliderWithInput/SliderWithInput';
+import { Stack } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { AdjustContrastParameters } from "@app/hooks/tools/adjustContrast/useAdjustContrastParameters";
+import SliderWithInput from "@app/components/shared/sliderWithInput/SliderWithInput";
 
 interface Props {
   parameters: AdjustContrastParameters;
@@ -14,11 +14,24 @@ export default function AdjustContrastBasicSettings({ parameters, onParameterCha
 
   return (
     <Stack gap="md">
-      <SliderWithInput label={t('adjustContrast.contrast', 'Contrast')} value={parameters.contrast} onChange={(v) => onParameterChange('contrast', v as any)} disabled={disabled} />
-      <SliderWithInput label={t('adjustContrast.brightness', 'Brightness')} value={parameters.brightness} onChange={(v) => onParameterChange('brightness', v as any)} disabled={disabled} />
-      <SliderWithInput label={t('adjustContrast.saturation', 'Saturation')} value={parameters.saturation} onChange={(v) => onParameterChange('saturation', v as any)} disabled={disabled} />
+      <SliderWithInput
+        label={t("adjustContrast.contrast", "Contrast")}
+        value={parameters.contrast}
+        onChange={(v) => onParameterChange("contrast", v as any)}
+        disabled={disabled}
+      />
+      <SliderWithInput
+        label={t("adjustContrast.brightness", "Brightness")}
+        value={parameters.brightness}
+        onChange={(v) => onParameterChange("brightness", v as any)}
+        disabled={disabled}
+      />
+      <SliderWithInput
+        label={t("adjustContrast.saturation", "Saturation")}
+        value={parameters.saturation}
+        onChange={(v) => onParameterChange("saturation", v as any)}
+        disabled={disabled}
+      />
     </Stack>
   );
 }
-
-
diff --git a/frontend/src/core/components/tools/adjustContrast/AdjustContrastColorSettings.tsx b/frontend/src/core/components/tools/adjustContrast/AdjustContrastColorSettings.tsx
index f713ca24bd..3fd99bd5f3 100644
--- a/frontend/src/core/components/tools/adjustContrast/AdjustContrastColorSettings.tsx
+++ b/frontend/src/core/components/tools/adjustContrast/AdjustContrastColorSettings.tsx
@@ -1,7 +1,7 @@
-import { Stack } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { AdjustContrastParameters } from '@app/hooks/tools/adjustContrast/useAdjustContrastParameters';
-import SliderWithInput from '@app/components/shared/sliderWithInput/SliderWithInput';
+import { Stack } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { AdjustContrastParameters } from "@app/hooks/tools/adjustContrast/useAdjustContrastParameters";
+import SliderWithInput from "@app/components/shared/sliderWithInput/SliderWithInput";
 
 interface Props {
   parameters: AdjustContrastParameters;
@@ -14,11 +14,24 @@ export default function AdjustContrastColorSettings({ parameters, onParameterCha
 
   return (
     <Stack gap="md">
-      <SliderWithInput label={t('adjustContrast.red', 'Red')} value={parameters.red} onChange={(v) => onParameterChange('red', v as any)} disabled={disabled} />
-      <SliderWithInput label={t('adjustContrast.green', 'Green')} value={parameters.green} onChange={(v) => onParameterChange('green', v as any)} disabled={disabled} />
-      <SliderWithInput label={t('adjustContrast.blue', 'Blue')} value={parameters.blue} onChange={(v) => onParameterChange('blue', v as any)} disabled={disabled} />
+      <SliderWithInput
+        label={t("adjustContrast.red", "Red")}
+        value={parameters.red}
+        onChange={(v) => onParameterChange("red", v as any)}
+        disabled={disabled}
+      />
+      <SliderWithInput
+        label={t("adjustContrast.green", "Green")}
+        value={parameters.green}
+        onChange={(v) => onParameterChange("green", v as any)}
+        disabled={disabled}
+      />
+      <SliderWithInput
+        label={t("adjustContrast.blue", "Blue")}
+        value={parameters.blue}
+        onChange={(v) => onParameterChange("blue", v as any)}
+        disabled={disabled}
+      />
     </Stack>
   );
 }
-
-
diff --git a/frontend/src/core/components/tools/adjustContrast/AdjustContrastPreview.tsx b/frontend/src/core/components/tools/adjustContrast/AdjustContrastPreview.tsx
index 3fb42b46c6..ee96714057 100644
--- a/frontend/src/core/components/tools/adjustContrast/AdjustContrastPreview.tsx
+++ b/frontend/src/core/components/tools/adjustContrast/AdjustContrastPreview.tsx
@@ -1,10 +1,10 @@
-import { useEffect, useRef, useState } from 'react';
-import { AdjustContrastParameters } from '@app/hooks/tools/adjustContrast/useAdjustContrastParameters';
-import { useThumbnailGeneration } from '@app/hooks/useThumbnailGeneration';
-import ObscuredOverlay from '@app/components/shared/ObscuredOverlay';
-import { Text } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { applyAdjustmentsToCanvas } from '@app/components/tools/adjustContrast/utils';
+import { useEffect, useRef, useState } from "react";
+import { AdjustContrastParameters } from "@app/hooks/tools/adjustContrast/useAdjustContrastParameters";
+import { useThumbnailGeneration } from "@app/hooks/useThumbnailGeneration";
+import ObscuredOverlay from "@app/components/shared/ObscuredOverlay";
+import { Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { applyAdjustmentsToCanvas } from "@app/components/tools/adjustContrast/utils";
 
 interface Props {
   file: File | null;
@@ -21,13 +21,18 @@ export default function AdjustContrastPreview({ file, parameters }: Props) {
   useEffect(() => {
     let active = true;
     const load = async () => {
-      if (!file || file.type !== 'application/pdf') { setThumb(null); return; }
+      if (!file || file.type !== "application/pdf") {
+        setThumb(null);
+        return;
+      }
       const id = `${file.name}:${file.size}:${file.lastModified}:page:1`;
       const tUrl = await requestThumbnail(id, file, 1);
       if (active) setThumb(tUrl || null);
     };
     load();
-    return () => { active = false; };
+    return () => {
+      active = false;
+    };
   }, [file, requestThumbnail]);
 
   useEffect(() => {
@@ -35,7 +40,7 @@ export default function AdjustContrastPreview({ file, parameters }: Props) {
     const render = async () => {
       if (!thumb || !canvasRef.current) return;
       const img = new Image();
-      img.crossOrigin = 'anonymous';
+      img.crossOrigin = "anonymous";
       img.src = thumb;
       await new Promise<void>((resolve, reject) => {
         img.onload = () => resolve();
@@ -43,10 +48,10 @@ export default function AdjustContrastPreview({ file, parameters }: Props) {
       });
 
       // Draw thumbnail to a source canvas
-      const src = document.createElement('canvas');
+      const src = document.createElement("canvas");
       src.width = img.naturalWidth;
       src.height = img.naturalHeight;
-      const sctx = src.getContext('2d');
+      const sctx = src.getContext("2d");
       if (!sctx) return;
       sctx.drawImage(img, 0, 0);
 
@@ -57,7 +62,7 @@ export default function AdjustContrastPreview({ file, parameters }: Props) {
       const display = canvasRef.current;
       display.width = adjusted.width;
       display.height = adjusted.height;
-      const dctx = display.getContext('2d');
+      const dctx = display.getContext("2d");
       if (!dctx) return;
       dctx.clearRect(0, 0, display.width, display.height);
       dctx.drawImage(adjusted, 0, 0);
@@ -70,24 +75,33 @@ export default function AdjustContrastPreview({ file, parameters }: Props) {
 
   return (
     <div>
-      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 6 }}>
-        <div style={{ flex: 1, height: 1, background: 'var(--border-color)' }} />
-        <div style={{ fontSize: 12, color: 'var(--text-color-muted)' }}>{t('common.preview', 'Preview')}</div>
-        <div style={{ flex: 1, height: 1, background: 'var(--border-color)' }} />
+      <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 6 }}>
+        <div style={{ flex: 1, height: 1, background: "var(--border-color)" }} />
+        <div style={{ fontSize: 12, color: "var(--text-color-muted)" }}>{t("common.preview", "Preview")}</div>
+        <div style={{ flex: 1, height: 1, background: "var(--border-color)" }} />
       </div>
       <ObscuredOverlay
         obscured={!thumb}
-        overlayMessage={<Text size="sm" c="white" fw={600}>{t('adjustContrast.noPreview', 'Select a PDF to preview')}</Text>}
+        overlayMessage={
+          <Text size="sm" c="white" fw={600}>
+            {t("adjustContrast.noPreview", "Select a PDF to preview")}
+          </Text>
+        }
         borderRadius={6}
       >
-        <div ref={containerRef} style={{ aspectRatio: '8.5/11', width: '100%', border: '1px solid var(--border-color)', borderRadius: 8, overflow: 'hidden' }}>
-          {thumb && (
-            <canvas ref={canvasRef} style={{ width: '100%', height: '100%' }} />
-          )}
+        <div
+          ref={containerRef}
+          style={{
+            aspectRatio: "8.5/11",
+            width: "100%",
+            border: "1px solid var(--border-color)",
+            borderRadius: 8,
+            overflow: "hidden",
+          }}
+        >
+          {thumb && <canvas ref={canvasRef} style={{ width: "100%", height: "100%" }} />}
         </div>
       </ObscuredOverlay>
     </div>
   );
 }
-
-
diff --git a/frontend/src/core/components/tools/adjustContrast/AdjustContrastSingleStepSettings.tsx b/frontend/src/core/components/tools/adjustContrast/AdjustContrastSingleStepSettings.tsx
index 5fc9fe10f1..9288e1623c 100644
--- a/frontend/src/core/components/tools/adjustContrast/AdjustContrastSingleStepSettings.tsx
+++ b/frontend/src/core/components/tools/adjustContrast/AdjustContrastSingleStepSettings.tsx
@@ -1,7 +1,7 @@
-import { Stack } from '@mantine/core';
-import { AdjustContrastParameters } from '@app/hooks/tools/adjustContrast/useAdjustContrastParameters';
-import AdjustContrastBasicSettings from '@app/components/tools/adjustContrast/AdjustContrastBasicSettings';
-import AdjustContrastColorSettings from '@app/components/tools/adjustContrast/AdjustContrastColorSettings';
+import { Stack } from "@mantine/core";
+import { AdjustContrastParameters } from "@app/hooks/tools/adjustContrast/useAdjustContrastParameters";
+import AdjustContrastBasicSettings from "@app/components/tools/adjustContrast/AdjustContrastBasicSettings";
+import AdjustContrastColorSettings from "@app/components/tools/adjustContrast/AdjustContrastColorSettings";
 
 interface Props {
   parameters: AdjustContrastParameters;
@@ -13,18 +13,8 @@ interface Props {
 export default function AdjustContrastSingleStepSettings({ parameters, onParameterChange, disabled }: Props) {
   return (
     <Stack gap="lg">
-      <AdjustContrastBasicSettings
-        parameters={parameters}
-        onParameterChange={onParameterChange}
-        disabled={disabled}
-      />
-      <AdjustContrastColorSettings
-        parameters={parameters}
-        onParameterChange={onParameterChange}
-        disabled={disabled}
-      />
+      <AdjustContrastBasicSettings parameters={parameters} onParameterChange={onParameterChange} disabled={disabled} />
+      <AdjustContrastColorSettings parameters={parameters} onParameterChange={onParameterChange} disabled={disabled} />
     </Stack>
   );
 }
-
-
diff --git a/frontend/src/core/components/tools/adjustContrast/utils.ts b/frontend/src/core/components/tools/adjustContrast/utils.ts
index 939c05acc8..97ecc70cbc 100644
--- a/frontend/src/core/components/tools/adjustContrast/utils.ts
+++ b/frontend/src/core/components/tools/adjustContrast/utils.ts
@@ -1,10 +1,10 @@
-import { AdjustContrastParameters } from '@app/hooks/tools/adjustContrast/useAdjustContrastParameters';
+import { AdjustContrastParameters } from "@app/hooks/tools/adjustContrast/useAdjustContrastParameters";
 
 export function applyAdjustmentsToCanvas(src: HTMLCanvasElement, params: AdjustContrastParameters): HTMLCanvasElement {
-  const out = document.createElement('canvas');
+  const out = document.createElement("canvas");
   out.width = src.width;
   out.height = src.height;
-  const ctx = out.getContext('2d');
+  const ctx = out.getContext("2d");
   if (!ctx) return src;
   ctx.drawImage(src, 0, 0);
 
@@ -36,36 +36,48 @@ export function applyAdjustmentsToCanvas(src: HTMLCanvasElement, params: AdjustC
     b = clamp(b * brightness);
 
     // Saturation via HSL
-    const rn = r / 255, gn = g / 255, bn = b / 255;
-    const max = Math.max(rn, gn, bn); const min = Math.min(rn, gn, bn);
-    let h = 0, s = 0;
+    const rn = r / 255,
+      gn = g / 255,
+      bn = b / 255;
+    const max = Math.max(rn, gn, bn);
+    const min = Math.min(rn, gn, bn);
+    let h = 0,
+      s = 0;
     const l = (max + min) / 2;
     if (max !== min) {
       const d = max - min;
       s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
       switch (max) {
-        case rn: h = (gn - bn) / d + (gn < bn ? 6 : 0); break;
-        case gn: h = (bn - rn) / d + 2; break;
-        default: h = (rn - gn) / d + 4; break;
+        case rn:
+          h = (gn - bn) / d + (gn < bn ? 6 : 0);
+          break;
+        case gn:
+          h = (bn - rn) / d + 2;
+          break;
+        default:
+          h = (rn - gn) / d + 4;
+          break;
       }
       h /= 6;
     }
     s = Math.min(1, Math.max(0, s * saturation));
     const hue2rgb = (p: number, q: number, t: number) => {
-      if (t < 0) t += 1; if (t > 1) t -= 1;
-      if (t < 1/6) return p + (q - p) * 6 * t;
-      if (t < 1/2) return q;
-      if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
+      if (t < 0) t += 1;
+      if (t > 1) t -= 1;
+      if (t < 1 / 6) return p + (q - p) * 6 * t;
+      if (t < 1 / 2) return q;
+      if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
       return p;
     };
     let r2: number, g2: number, b2: number;
-    if (s === 0) { r2 = g2 = b2 = l; }
-    else {
+    if (s === 0) {
+      r2 = g2 = b2 = l;
+    } else {
       const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
       const p = 2 * l - q;
-      r2 = hue2rgb(p, q, h + 1/3);
+      r2 = hue2rgb(p, q, h + 1 / 3);
       g2 = hue2rgb(p, q, h);
-      b2 = hue2rgb(p, q, h - 1/3);
+      b2 = hue2rgb(p, q, h - 1 / 3);
     }
     data[i] = clamp(Math.round(r2 * 255));
     data[i + 1] = clamp(Math.round(g2 * 255));
@@ -75,5 +87,3 @@ export function applyAdjustmentsToCanvas(src: HTMLCanvasElement, params: AdjustC
   ctx.putImageData(imageData, 0, 0);
   return out;
 }
-
-
diff --git a/frontend/src/core/components/tools/adjustPageScale/AdjustPageScaleSettings.test.tsx b/frontend/src/core/components/tools/adjustPageScale/AdjustPageScaleSettings.test.tsx
index c5e5fc9336..26b7dddeed 100644
--- a/frontend/src/core/components/tools/adjustPageScale/AdjustPageScaleSettings.test.tsx
+++ b/frontend/src/core/components/tools/adjustPageScale/AdjustPageScaleSettings.test.tsx
@@ -1,21 +1,19 @@
-import { describe, expect, test, vi, beforeEach } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import { MantineProvider } from '@mantine/core';
-import AdjustPageScaleSettings from '@app/components/tools/adjustPageScale/AdjustPageScaleSettings';
-import { AdjustPageScaleParameters, PageSize } from '@app/hooks/tools/adjustPageScale/useAdjustPageScaleParameters';
+import { describe, expect, test, vi, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { MantineProvider } from "@mantine/core";
+import AdjustPageScaleSettings from "@app/components/tools/adjustPageScale/AdjustPageScaleSettings";
+import { AdjustPageScaleParameters, PageSize } from "@app/hooks/tools/adjustPageScale/useAdjustPageScaleParameters";
 
 // Mock useTranslation with predictable return values
 const mockT = vi.fn((key: string, fallback?: string) => fallback || `mock-${key}`);
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({ t: mockT })
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: mockT }),
 }));
 
 // Wrapper component to provide Mantine context
-const TestWrapper = ({ children }: { children: React.ReactNode }) => (
-  <MantineProvider>{children}</MantineProvider>
-);
+const TestWrapper = ({ children }: { children: React.ReactNode }) => <MantineProvider>{children}</MantineProvider>;
 
-describe('AdjustPageScaleSettings', () => {
+describe("AdjustPageScaleSettings", () => {
   const defaultParameters: AdjustPageScaleParameters = {
     scaleFactor: 1.0,
     pageSize: PageSize.KEEP,
@@ -27,22 +25,19 @@ describe('AdjustPageScaleSettings', () => {
     vi.clearAllMocks();
   });
 
-  test('should render without crashing', () => {
+  test("should render without crashing", () => {
     render(
       <TestWrapper>
-        <AdjustPageScaleSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <AdjustPageScaleSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
     // Basic render test - component renders without throwing
-    expect(screen.getByText('Scale Factor')).toBeInTheDocument();
-    expect(screen.getByText('Target Page Size')).toBeInTheDocument();
+    expect(screen.getByText("Scale Factor")).toBeInTheDocument();
+    expect(screen.getByText("Target Page Size")).toBeInTheDocument();
   });
 
-  test('should render with custom parameters', () => {
+  test("should render with custom parameters", () => {
     const customParameters: AdjustPageScaleParameters = {
       scaleFactor: 2.5,
       pageSize: PageSize.A4,
@@ -50,15 +45,12 @@ describe('AdjustPageScaleSettings', () => {
 
     render(
       <TestWrapper>
-        <AdjustPageScaleSettings
-          parameters={customParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <AdjustPageScaleSettings parameters={customParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
     // Component renders successfully with custom parameters
-    expect(screen.getByText('Scale Factor')).toBeInTheDocument();
-    expect(screen.getByText('Target Page Size')).toBeInTheDocument();
+    expect(screen.getByText("Scale Factor")).toBeInTheDocument();
+    expect(screen.getByText("Target Page Size")).toBeInTheDocument();
   });
 });
diff --git a/frontend/src/core/components/tools/adjustPageScale/AdjustPageScaleSettings.tsx b/frontend/src/core/components/tools/adjustPageScale/AdjustPageScaleSettings.tsx
index 5e2e0aa78e..26ce96f9cf 100644
--- a/frontend/src/core/components/tools/adjustPageScale/AdjustPageScaleSettings.tsx
+++ b/frontend/src/core/components/tools/adjustPageScale/AdjustPageScaleSettings.tsx
@@ -13,24 +13,24 @@ const AdjustPageScaleSettings = ({ parameters, onParameterChange, disabled = fal
   const { t } = useTranslation();
 
   const pageSizeOptions = [
-    { value: PageSize.KEEP, label: t('adjustPageScale.pageSize.keep', 'Keep Original Size') },
-    { value: PageSize.A0, label: 'A0' },
-    { value: PageSize.A1, label: 'A1' },
-    { value: PageSize.A2, label: 'A2' },
-    { value: PageSize.A3, label: 'A3' },
-    { value: PageSize.A4, label: 'A4' },
-    { value: PageSize.A5, label: 'A5' },
-    { value: PageSize.A6, label: 'A6' },
-    { value: PageSize.LETTER, label: t('adjustPageScale.pageSize.letter', 'Letter') },
-    { value: PageSize.LEGAL, label: t('adjustPageScale.pageSize.legal', 'Legal') },
+    { value: PageSize.KEEP, label: t("adjustPageScale.pageSize.keep", "Keep Original Size") },
+    { value: PageSize.A0, label: "A0" },
+    { value: PageSize.A1, label: "A1" },
+    { value: PageSize.A2, label: "A2" },
+    { value: PageSize.A3, label: "A3" },
+    { value: PageSize.A4, label: "A4" },
+    { value: PageSize.A5, label: "A5" },
+    { value: PageSize.A6, label: "A6" },
+    { value: PageSize.LETTER, label: t("adjustPageScale.pageSize.letter", "Letter") },
+    { value: PageSize.LEGAL, label: t("adjustPageScale.pageSize.legal", "Legal") },
   ];
 
   return (
     <Stack gap="md">
       <NumberInput
-        label={t('adjustPageScale.scaleFactor.label', 'Scale Factor')}
+        label={t("adjustPageScale.scaleFactor.label", "Scale Factor")}
         value={parameters.scaleFactor}
-        onChange={(value) => onParameterChange('scaleFactor', typeof value === 'number' ? value : 1.0)}
+        onChange={(value) => onParameterChange("scaleFactor", typeof value === "number" ? value : 1.0)}
         min={0.1}
         max={10.0}
         step={0.1}
@@ -39,11 +39,11 @@ const AdjustPageScaleSettings = ({ parameters, onParameterChange, disabled = fal
       />
 
       <Select
-        label={t('adjustPageScale.pageSize.label', 'Target Page Size')}
+        label={t("adjustPageScale.pageSize.label", "Target Page Size")}
         value={parameters.pageSize}
         onChange={(value) => {
           if (value && Object.values(PageSize).includes(value as PageSize)) {
-            onParameterChange('pageSize', value as PageSize);
+            onParameterChange("pageSize", value as PageSize);
           }
         }}
         data={pageSizeOptions}
diff --git a/frontend/src/core/components/tools/autoRename/AutoRenameSettings.tsx b/frontend/src/core/components/tools/autoRename/AutoRenameSettings.tsx
index f0e268d4ca..f0a9558df1 100644
--- a/frontend/src/core/components/tools/autoRename/AutoRenameSettings.tsx
+++ b/frontend/src/core/components/tools/autoRename/AutoRenameSettings.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { AutoRenameParameters } from '@app/hooks/tools/autoRename/useAutoRenameParameters';
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { AutoRenameParameters } from "@app/hooks/tools/autoRename/useAutoRenameParameters";
 
 interface AutoRenameSettingsProps {
   parameters: AutoRenameParameters;
@@ -8,14 +8,16 @@ interface AutoRenameSettingsProps {
   disabled?: boolean;
 }
 
-const AutoRenameSettings: React.FC<AutoRenameSettingsProps> = (
-  ) => {
+const AutoRenameSettings: React.FC<AutoRenameSettingsProps> = () => {
   const { t } = useTranslation();
 
   return (
     <div className="auto-rename-settings">
       <p className="text-muted">
-        {t('autoRename.description', 'This tool will automatically rename PDF files based on their content. It analyzes the document to find the most suitable title from the text.')}
+        {t(
+          "autoRename.description",
+          "This tool will automatically rename PDF files based on their content. It analyzes the document to find the most suitable title from the text.",
+        )}
       </p>
     </div>
   );
diff --git a/frontend/src/core/components/tools/automate/AutomationCreation.tsx b/frontend/src/core/components/tools/automate/AutomationCreation.tsx
index 30c839e55f..153b8a1e08 100644
--- a/frontend/src/core/components/tools/automate/AutomationCreation.tsx
+++ b/frontend/src/core/components/tools/automate/AutomationCreation.tsx
@@ -1,26 +1,16 @@
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  Button,
-  Text,
-  Stack,
-  Group,
-  TextInput,
-  Textarea,
-  Divider,
-  Modal
-} from '@mantine/core';
-import { Z_INDEX_AUTOMATE_MODAL } from '@app/styles/zIndex';
-import CheckIcon from '@mui/icons-material/Check';
-import DownloadIcon from '@mui/icons-material/Download';
-import { ToolRegistry } from '@app/data/toolsTaxonomy';
-import ToolConfigurationModal from '@app/components/tools/automate/ToolConfigurationModal';
-import ToolList from '@app/components/tools/automate/ToolList';
-import IconSelector from '@app/components/tools/automate/IconSelector';
-import { AutomationConfig, AutomationMode, AutomationTool } from '@app/types/automation';
-import { useAutomationForm } from '@app/hooks/tools/automate/useAutomationForm';
-import { downloadFolderScanningConfig } from '@app/utils/automationConverter';
-
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Button, Text, Stack, Group, TextInput, Textarea, Divider, Modal } from "@mantine/core";
+import { Z_INDEX_AUTOMATE_MODAL } from "@app/styles/zIndex";
+import CheckIcon from "@mui/icons-material/Check";
+import DownloadIcon from "@mui/icons-material/Download";
+import { ToolRegistry } from "@app/data/toolsTaxonomy";
+import ToolConfigurationModal from "@app/components/tools/automate/ToolConfigurationModal";
+import ToolList from "@app/components/tools/automate/ToolList";
+import IconSelector from "@app/components/tools/automate/IconSelector";
+import { AutomationConfig, AutomationMode, AutomationTool } from "@app/types/automation";
+import { useAutomationForm } from "@app/hooks/tools/automate/useAutomationForm";
+import { downloadFolderScanningConfig } from "@app/utils/automationConverter";
 
 interface AutomationCreationProps {
   mode: AutomationMode;
@@ -30,7 +20,13 @@ interface AutomationCreationProps {
   toolRegistry: Partial<ToolRegistry>;
 }
 
-export default function AutomationCreation({ mode, existingAutomation, onBack, onComplete, toolRegistry }: AutomationCreationProps) {
+export default function AutomationCreation({
+  mode,
+  existingAutomation,
+  onBack,
+  onComplete,
+  toolRegistry,
+}: AutomationCreationProps) {
   const { t } = useTranslation();
 
   const {
@@ -45,14 +41,13 @@ export default function AutomationCreation({ mode, existingAutomation, onBack, o
     updateTool,
     canSaveAutomation,
     getToolName,
-    getToolDefaultParameters
+    getToolDefaultParameters,
   } = useAutomationForm({ mode, existingAutomation, toolRegistry });
 
   const [configModalOpen, setConfigModalOpen] = useState(false);
   const [configuraingToolIndex, setConfiguringToolIndex] = useState(-1);
   const [unsavedWarningOpen, setUnsavedWarningOpen] = useState(false);
 
-
   const configureTool = (index: number) => {
     setConfiguringToolIndex(index);
     setConfigModalOpen(true);
@@ -62,7 +57,7 @@ export default function AutomationCreation({ mode, existingAutomation, onBack, o
     if (configuraingToolIndex >= 0) {
       updateTool(configuraingToolIndex, {
         configured: true,
-        parameters
+        parameters,
       });
     }
     setConfigModalOpen(false);
@@ -77,10 +72,10 @@ export default function AutomationCreation({ mode, existingAutomation, onBack, o
   const handleToolAdd = () => {
     const newTool: AutomationTool = {
       id: `tool-${Date.now()}`,
-      operation: '',
-      name: t('automate.creation.tools.selectTool', 'Select a tool...'),
+      operation: "",
+      name: t("automate.creation.tools.selectTool", "Select a tool..."),
       configured: false,
-      parameters: {}
+      parameters: {},
     };
     updateTool(selectedTools.length, newTool);
   };
@@ -101,14 +96,14 @@ export default function AutomationCreation({ mode, existingAutomation, onBack, o
       name: automationName.trim(),
       description: automationDescription.trim(),
       icon: automationIcon,
-      operations: selectedTools.map(tool => ({
+      operations: selectedTools.map((tool) => ({
         operation: tool.operation,
-        parameters: tool.parameters || {}
-      }))
+        parameters: tool.parameters || {},
+      })),
     };
 
     try {
-      const { automationStorage } = await import('@app/services/automationStorage');
+      const { automationStorage } = await import("@app/services/automationStorage");
       let savedAutomation;
 
       if (mode === AutomationMode.EDIT && existingAutomation) {
@@ -124,7 +119,7 @@ export default function AutomationCreation({ mode, existingAutomation, onBack, o
             ...existingAutomation,
             ...automationData,
             id: existingAutomation.id,
-            createdAt: existingAutomation.createdAt
+            createdAt: existingAutomation.createdAt,
           };
           savedAutomation = await automationStorage.updateAutomation(updatedAutomation);
         }
@@ -135,7 +130,7 @@ export default function AutomationCreation({ mode, existingAutomation, onBack, o
 
       onComplete(savedAutomation);
     } catch (error) {
-      console.error('Error saving automation:', error);
+      console.error("Error saving automation:", error);
     }
   };
 
@@ -143,9 +138,21 @@ export default function AutomationCreation({ mode, existingAutomation, onBack, o
 
   return (
     <div>
-        <Text size="sm" mb="md" p="md"  style={{borderRadius:'var(--mantine-radius-md)', background: 'var(--color-gray-200)', color: 'var(--mantine-color-text)' }}>
-            {t("automate.creation.intro", "Automations run tools sequentially. To get started, add tools in the order you want them to run.")}
-        </Text>
+      <Text
+        size="sm"
+        mb="md"
+        p="md"
+        style={{
+          borderRadius: "var(--mantine-radius-md)",
+          background: "var(--color-gray-200)",
+          color: "var(--mantine-color-text)",
+        }}
+      >
+        {t(
+          "automate.creation.intro",
+          "Automations run tools sequentially. To get started, add tools in the order you want them to run.",
+        )}
+      </Text>
       <Divider mb="md" />
 
       <Stack gap="md">
@@ -153,33 +160,28 @@ export default function AutomationCreation({ mode, existingAutomation, onBack, o
         <Group gap="xs" align="flex-end">
           <Stack gap="xs" style={{ flex: 1 }}>
             <TextInput
-              placeholder={t('automate.creation.name.placeholder', 'My Automation')}
+              placeholder={t("automate.creation.name.placeholder", "My Automation")}
               value={automationName}
               withAsterisk
-              label={t('automate.creation.name.label', 'Automation Name')}
+              label={t("automate.creation.name.label", "Automation Name")}
               onChange={(e) => setAutomationName(e.currentTarget.value)}
               size="sm"
             />
           </Stack>
 
-          <IconSelector
-            value={automationIcon || 'SettingsIcon'}
-            onChange={setAutomationIcon}
-            size="sm"
-          />
+          <IconSelector value={automationIcon || "SettingsIcon"} onChange={setAutomationIcon} size="sm" />
         </Group>
 
         {/* Automation Description */}
         <Textarea
-          placeholder={t('automate.creation.description.placeholder', 'Describe what this automation does...')}
+          placeholder={t("automate.creation.description.placeholder", "Describe what this automation does...")}
           value={automationDescription}
-          label={t('automate.creation.description.label', 'Description')}
+          label={t("automate.creation.description.label", "Description")}
           onChange={(e) => setAutomationDescription(e.currentTarget.value)}
           size="sm"
           rows={3}
         />
 
-
         {/* Selected Tools List */}
         {selectedTools.length > 0 && (
           <ToolList
@@ -198,13 +200,8 @@ export default function AutomationCreation({ mode, existingAutomation, onBack, o
 
         {/* Action Buttons */}
         <Stack gap="sm">
-          <Button
-            leftSection={<CheckIcon />}
-            onClick={saveAutomation}
-            disabled={!canSaveAutomation()}
-            fullWidth
-          >
-            {t('automate.creation.save', 'Save Automation')}
+          <Button leftSection={<CheckIcon />} onClick={saveAutomation} disabled={!canSaveAutomation()} fullWidth>
+            {t("automate.creation.save", "Save Automation")}
           </Button>
 
           <Button
@@ -212,16 +209,16 @@ export default function AutomationCreation({ mode, existingAutomation, onBack, o
             onClick={() => {
               // Create a temporary automation config from current state
               const tempAutomation: AutomationConfig = {
-                id: existingAutomation?.id || 'temp',
+                id: existingAutomation?.id || "temp",
                 name: automationName.trim(),
                 description: automationDescription.trim(),
                 icon: automationIcon,
-                operations: selectedTools.map(tool => ({
+                operations: selectedTools.map((tool) => ({
                   operation: tool.operation,
-                  parameters: tool.parameters || {}
+                  parameters: tool.parameters || {},
                 })),
                 createdAt: existingAutomation?.createdAt || new Date().toISOString(),
-                updatedAt: new Date().toISOString()
+                updatedAt: new Date().toISOString(),
               };
               downloadFolderScanningConfig(tempAutomation, toolRegistry);
             }}
@@ -229,7 +226,7 @@ export default function AutomationCreation({ mode, existingAutomation, onBack, o
             variant="light"
             fullWidth
           >
-            {t('automate.creation.exportForFolderScanning', 'Export for Folder Scanning')}
+            {t("automate.creation.exportForFolderScanning", "Export for Folder Scanning")}
           </Button>
         </Stack>
       </Stack>
@@ -249,20 +246,23 @@ export default function AutomationCreation({ mode, existingAutomation, onBack, o
       <Modal
         opened={unsavedWarningOpen}
         onClose={handleCancelBack}
-        title={t('automate.creation.unsavedChanges.title', 'Unsaved Changes')}
+        title={t("automate.creation.unsavedChanges.title", "Unsaved Changes")}
         centered
         zIndex={Z_INDEX_AUTOMATE_MODAL}
       >
         <Stack gap="md">
           <Text>
-            {t('automate.creation.unsavedChanges.message', 'You have unsaved changes. Are you sure you want to go back? All changes will be lost.')}
+            {t(
+              "automate.creation.unsavedChanges.message",
+              "You have unsaved changes. Are you sure you want to go back? All changes will be lost.",
+            )}
           </Text>
           <Group gap="md" justify="flex-end">
             <Button variant="outline" onClick={handleCancelBack}>
-              {t('automate.creation.unsavedChanges.cancel', 'Cancel')}
+              {t("automate.creation.unsavedChanges.cancel", "Cancel")}
             </Button>
             <Button color="red" onClick={handleConfirmBack}>
-              {t('automate.creation.unsavedChanges.confirm', 'Go Back')}
+              {t("automate.creation.unsavedChanges.confirm", "Go Back")}
             </Button>
           </Group>
         </Stack>
diff --git a/frontend/src/core/components/tools/automate/AutomationEntry.tsx b/frontend/src/core/components/tools/automate/AutomationEntry.tsx
index 9f40a07aee..e2042e191c 100644
--- a/frontend/src/core/components/tools/automate/AutomationEntry.tsx
+++ b/frontend/src/core/components/tools/automate/AutomationEntry.tsx
@@ -1,14 +1,14 @@
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Group, Text, ActionIcon, Menu, Button, Box } from '@mantine/core';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
-import EditIcon from '@mui/icons-material/Edit';
-import DeleteIcon from '@mui/icons-material/Delete';
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
-import DownloadIcon from '@mui/icons-material/Download';
-import { Tooltip } from '@app/components/shared/Tooltip';
-import { ToolIcon } from '@app/components/shared/ToolIcon';
-import { ToolRegistry } from '@app/data/toolsTaxonomy';
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Group, Text, ActionIcon, Menu, Button, Box } from "@mantine/core";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import EditIcon from "@mui/icons-material/Edit";
+import DeleteIcon from "@mui/icons-material/Delete";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import DownloadIcon from "@mui/icons-material/Download";
+import { Tooltip } from "@app/components/shared/Tooltip";
+import { ToolIcon } from "@app/components/shared/ToolIcon";
+import { ToolRegistry } from "@app/data/toolsTaxonomy";
 import { ToolId } from "@app/types/toolId";
 
 interface AutomationEntryProps {
@@ -50,7 +50,7 @@ export default function AutomationEntry({
   onDelete,
   onCopy,
   onExport,
-  toolRegistry
+  toolRegistry,
 }: AutomationEntryProps) {
   const { t } = useTranslation();
   const [isHovered, setIsHovered] = useState(false);
@@ -80,12 +80,12 @@ export default function AutomationEntry({
           size="sm"
           fw={600}
           style={{
-            color: 'var(--mantine-primary-color-filled)',
-            background: 'var(--mantine-primary-color-light)',
-            padding: '2px 6px',
-            borderRadius: '4px',
-            fontSize: '0.75rem',
-            whiteSpace: 'nowrap'
+            color: "var(--mantine-primary-color-filled)",
+            background: "var(--mantine-primary-color-light)",
+            padding: "2px 6px",
+            borderRadius: "4px",
+            fontSize: "0.75rem",
+            whiteSpace: "nowrap",
           }}
         >
           {getToolDisplayName(op)}
@@ -99,16 +99,14 @@ export default function AutomationEntry({
     ));
 
     return (
-      <div style={{ minWidth: '400px', width: 'auto' }}>
+      <div style={{ minWidth: "400px", width: "auto" }}>
         {description && (
-          <Text size="sm" mb={8} style={{ whiteSpace: 'normal', wordWrap: 'break-word' }}>
+          <Text size="sm" mb={8} style={{ whiteSpace: "normal", wordWrap: "break-word" }}>
             {description}
           </Text>
         )}
         {operations.length > 0 && (
-          <div style={{ display: 'flex', alignItems: 'center', gap: '4px', whiteSpace: 'nowrap' }}>
-            {toolChain}
-          </div>
+          <div style={{ display: "flex", alignItems: "center", gap: "4px", whiteSpace: "nowrap" }}>{toolChain}</div>
         )}
       </div>
     );
@@ -116,16 +114,11 @@ export default function AutomationEntry({
 
   const buttonContent = (
     <>
-      {BadgeIcon && (
-        <ToolIcon
-          icon={<BadgeIcon />}
-          {...(keepIconColor && { color: 'var(--mantine-primary-color-filled)' })}
-        />
-      )}
-      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', flex: 1, overflow: 'visible' }}>
+      {BadgeIcon && <ToolIcon icon={<BadgeIcon />} {...(keepIconColor && { color: "var(--mantine-primary-color-filled)" })} />}
+      <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", flex: 1, overflow: "visible" }}>
         {title ? (
           // Custom automation with title
-          <Text size="sm" style={{ textAlign: 'left' }}>
+          <Text size="sm" style={{ textAlign: "left" }}>
             {title}
           </Text>
         ) : (
@@ -133,9 +126,7 @@ export default function AutomationEntry({
           <Group gap="xs" justify="flex-start" style={{ flex: 1 }}>
             {operations.map((op, index) => (
               <React.Fragment key={`${op}-${index}`}>
-                <Text size="sm">
-                  {getToolDisplayName(op)}
-                </Text>
+                <Text size="sm">{getToolDisplayName(op)}</Text>
                 {index < operations.length - 1 && (
                   <Text size="sm" c="dimmed">
                     →
@@ -151,7 +142,7 @@ export default function AutomationEntry({
 
   const wrapperContent = (
     <Box
-      style={{ position: 'relative', width: '100%' }}
+      style={{ position: "relative", width: "100%" }}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}
     >
@@ -167,24 +158,19 @@ export default function AutomationEntry({
           root: {
             borderRadius: 0,
             color: "var(--tools-text-and-icon-color)",
-            overflow: 'visible',
-            backgroundColor: shouldShowMenu ? 'var(--automation-entry-hover-bg)' : undefined,
-            '&:hover': {
-              backgroundColor: 'var(--automation-entry-hover-bg)'
-            }
+            overflow: "visible",
+            backgroundColor: shouldShowMenu ? "var(--automation-entry-hover-bg)" : undefined,
+            "&:hover": {
+              backgroundColor: "var(--automation-entry-hover-bg)",
+            },
           },
-          label: { overflow: 'visible' }
+          label: { overflow: "visible" },
         }}
       >
         {buttonContent}
       </Button>
       {showMenu && (
-        <Menu
-          position="bottom-end"
-          withinPortal
-          onOpen={() => setIsMenuOpen(true)}
-          onClose={() => setIsMenuOpen(false)}
-        >
+        <Menu position="bottom-end" withinPortal onOpen={() => setIsMenuOpen(true)} onClose={() => setIsMenuOpen(false)}>
           <Menu.Target>
             <ActionIcon
               variant="subtle"
@@ -192,14 +178,14 @@ export default function AutomationEntry({
               size="md"
               onClick={(e) => e.stopPropagation()}
               style={{
-                position: 'absolute',
-                right: '0.5rem',
-                top: '50%',
-                transform: 'translateY(-50%)',
+                position: "absolute",
+                right: "0.5rem",
+                top: "50%",
+                transform: "translateY(-50%)",
                 zIndex: 1,
                 opacity: shouldShowMenu ? 1 : 0,
-                transition: 'opacity 0.2s ease',
-                pointerEvents: shouldShowMenu ? 'auto' : 'none'
+                transition: "opacity 0.2s ease",
+                pointerEvents: shouldShowMenu ? "auto" : "none",
               }}
             >
               <MoreVertIcon style={{ fontSize: 20 }} />
@@ -215,7 +201,7 @@ export default function AutomationEntry({
                   onCopy();
                 }}
               >
-                {t('automate.copyToSaved', 'Copy to Saved')}
+                {t("automate.copyToSaved", "Copy to Saved")}
               </Menu.Item>
             )}
             {onEdit && (
@@ -226,7 +212,7 @@ export default function AutomationEntry({
                   onEdit();
                 }}
               >
-                {t('edit', 'Edit')}
+                {t("edit", "Edit")}
               </Menu.Item>
             )}
             {onExport && (
@@ -237,7 +223,7 @@ export default function AutomationEntry({
                   onExport();
                 }}
               >
-                {t('automate.exportForFolderScanning', 'Export for Folder Scanning')}
+                {t("automate.exportForFolderScanning", "Export for Folder Scanning")}
               </Menu.Item>
             )}
             {onDelete && (
@@ -248,7 +234,7 @@ export default function AutomationEntry({
                   onDelete();
                 }}
               >
-                {t('delete', 'Delete')}
+                {t("delete", "Delete")}
               </Menu.Item>
             )}
           </Menu.Dropdown>
@@ -261,12 +247,7 @@ export default function AutomationEntry({
   const shouldShowTooltip = description || operations.length > 0;
 
   return shouldShowTooltip ? (
-    <Tooltip
-      content={createTooltipContent()}
-      position="right"
-      arrow={true}
-      delay={500}
-    >
+    <Tooltip content={createTooltipContent()} position="right" arrow={true} delay={500}>
       {wrapperContent}
     </Tooltip>
   ) : (
diff --git a/frontend/src/core/components/tools/automate/AutomationRun.tsx b/frontend/src/core/components/tools/automate/AutomationRun.tsx
index 073916f276..99bae42c87 100644
--- a/frontend/src/core/components/tools/automate/AutomationRun.tsx
+++ b/frontend/src/core/components/tools/automate/AutomationRun.tsx
@@ -39,7 +39,7 @@ export default function AutomationRun({ automation, onComplete, automateOperatio
           id: `${op.operation}-${index}`,
           operation: op.operation,
           name: tool?.name || op.operation,
-          status: EXECUTION_STATUS.PENDING
+          status: EXECUTION_STATUS.PENDING,
         };
       });
       setExecutionSteps(steps);
@@ -64,13 +64,13 @@ export default function AutomationRun({ automation, onComplete, automateOperatio
     }
 
     if (!automateOperation) {
-      console.error('No automateOperation provided');
+      console.error("No automateOperation provided");
       return;
     }
 
     // Reset progress tracking
     setCurrentStepIndex(0);
-    setExecutionSteps(prev => prev.map(step => ({ ...step, status: EXECUTION_STATUS.PENDING, error: undefined })));
+    setExecutionSteps((prev) => prev.map((step) => ({ ...step, status: EXECUTION_STATUS.PENDING, error: undefined })));
 
     try {
       // Use the automateOperation.executeOperation to handle file consumption properly
@@ -79,22 +79,22 @@ export default function AutomationRun({ automation, onComplete, automateOperatio
           automationConfig: automation,
           onStepStart: (stepIndex: number, _operationName: string) => {
             setCurrentStepIndex(stepIndex);
-            setExecutionSteps(prev => prev.map((step, idx) =>
-              idx === stepIndex ? { ...step, status: EXECUTION_STATUS.RUNNING } : step
-            ));
+            setExecutionSteps((prev) =>
+              prev.map((step, idx) => (idx === stepIndex ? { ...step, status: EXECUTION_STATUS.RUNNING } : step)),
+            );
           },
           onStepComplete: (stepIndex: number, _resultFiles: File[]) => {
-            setExecutionSteps(prev => prev.map((step, idx) =>
-              idx === stepIndex ? { ...step, status: EXECUTION_STATUS.COMPLETED } : step
-            ));
+            setExecutionSteps((prev) =>
+              prev.map((step, idx) => (idx === stepIndex ? { ...step, status: EXECUTION_STATUS.COMPLETED } : step)),
+            );
           },
           onStepError: (stepIndex: number, error: string) => {
-            setExecutionSteps(prev => prev.map((step, idx) =>
-              idx === stepIndex ? { ...step, status: EXECUTION_STATUS.ERROR, error } : step
-            ));
-          }
+            setExecutionSteps((prev) =>
+              prev.map((step, idx) => (idx === stepIndex ? { ...step, status: EXECUTION_STATUS.ERROR, error } : step)),
+            );
+          },
         },
-        selectedFiles
+        selectedFiles,
       );
 
       // Mark all as completed and reset current step
@@ -108,25 +108,29 @@ export default function AutomationRun({ automation, onComplete, automateOperatio
 
   const getProgress = () => {
     if (executionSteps.length === 0) return 0;
-    const completedSteps = executionSteps.filter(step => step.status === EXECUTION_STATUS.COMPLETED).length;
+    const completedSteps = executionSteps.filter((step) => step.status === EXECUTION_STATUS.COMPLETED).length;
     return (completedSteps / executionSteps.length) * 100;
   };
 
   const getStepIcon = (step: ExecutionStep) => {
     switch (step.status) {
       case EXECUTION_STATUS.COMPLETED:
-        return <CheckIcon style={{ fontSize: 16, color: 'green' }} />;
+        return <CheckIcon style={{ fontSize: 16, color: "green" }} />;
       case EXECUTION_STATUS.ERROR:
-        return <span style={{ fontSize: 16, color: 'red' }}>✕</span>;
+        return <span style={{ fontSize: 16, color: "red" }}>✕</span>;
       case EXECUTION_STATUS.RUNNING:
         return <Loader size={16} />;
       default:
-        return <div style={{
-          width: 16,
-          height: 16,
-          border: '2px solid #ccc',
-          borderRadius: '50%'
-        }} />;
+        return (
+          <div
+            style={{
+              width: 16,
+              height: 16,
+              border: "2px solid #ccc",
+              borderRadius: "50%",
+            }}
+          />
+        );
     }
   };
 
@@ -167,8 +171,9 @@ export default function AutomationRun({ automation, onComplete, automateOperatio
                 <Text
                   size="sm"
                   style={{
-                    color: step.status === EXECUTION_STATUS.RUNNING ? 'var(--mantine-color-blue-6)' : 'var(--mantine-color-text)',
-                    fontWeight: step.status === EXECUTION_STATUS.RUNNING ? 500 : 400
+                    color:
+                      step.status === EXECUTION_STATUS.RUNNING ? "var(--mantine-color-blue-6)" : "var(--mantine-color-text)",
+                    fontWeight: step.status === EXECUTION_STATUS.RUNNING ? 500 : 400,
                   }}
                 >
                   {step.name}
diff --git a/frontend/src/core/components/tools/automate/AutomationSelection.tsx b/frontend/src/core/components/tools/automate/AutomationSelection.tsx
index b7f600dda6..17017baad1 100644
--- a/frontend/src/core/components/tools/automate/AutomationSelection.tsx
+++ b/frontend/src/core/components/tools/automate/AutomationSelection.tsx
@@ -5,9 +5,9 @@ import SettingsIcon from "@mui/icons-material/Settings";
 import AutomationEntry from "@app/components/tools/automate/AutomationEntry";
 import { useSuggestedAutomations } from "@app/hooks/tools/automate/useSuggestedAutomations";
 import { AutomationConfig, SuggestedAutomation } from "@app/types/automation";
-import { iconMap } from '@app/components/tools/automate/iconMap';
-import { ToolRegistry } from '@app/data/toolsTaxonomy';
-import { downloadFolderScanningConfig } from '@app/utils/automationConverter';
+import { iconMap } from "@app/components/tools/automate/iconMap";
+import { ToolRegistry } from "@app/data/toolsTaxonomy";
+import { downloadFolderScanningConfig } from "@app/utils/automationConverter";
 
 interface AutomationSelectionProps {
   savedAutomations: AutomationConfig[];
@@ -26,69 +26,69 @@ export default function AutomationSelection({
   onEdit,
   onDelete,
   onCopyFromSuggested,
-  toolRegistry
+  toolRegistry,
 }: AutomationSelectionProps) {
   const { t } = useTranslation();
   const suggestedAutomations = useSuggestedAutomations();
 
   return (
     <div>
-      <Title order={3} size="h4" fw={600} mb="md" style={{color: 'var(--mantine-color-dimmed)'}}>
+      <Title order={3} size="h4" fw={600} mb="md" style={{ color: "var(--mantine-color-dimmed)" }}>
         {t("automate.selection.saved.title", "Saved")}
       </Title>
 
-    <Stack gap="xs">
-      <AutomationEntry
-        title={t("automate.selection.createNew.title", "Create New Automation")}
-        badgeIcon={AddCircleOutline}
-        operations={[]}
-        onClick={onCreateNew}
-        keepIconColor={true}
-        toolRegistry={toolRegistry}
-      />
-      {/* Saved Automations */}
-      {savedAutomations.map((automation) => {
-        const IconComponent = automation.icon ? iconMap[automation.icon as keyof typeof iconMap] : SettingsIcon;
-        return (
-          <AutomationEntry
-            key={automation.id}
-            title={automation.name}
-            description={automation.description}
-            badgeIcon={IconComponent || SettingsIcon}
-            operations={automation.operations.map(op => typeof op === 'string' ? op : op.operation)}
-            onClick={() => onRun(automation)}
-            showMenu={true}
-            onEdit={() => onEdit(automation)}
-            onExport={() => downloadFolderScanningConfig(automation, toolRegistry)}
-            onDelete={() => onDelete(automation)}
-            toolRegistry={toolRegistry}
-          />
-        );
-      })}
-      <Divider pb='sm' />
-
-      {/* Suggested Automations */}
-      <div>
-        <Title order={3} size="h4" fw={600} mb="md"style={ {color: 'var(--mantine-color-dimmed)'}}>
-          {t("automate.selection.suggested.title", "Suggested")}
-        </Title>
-        <Stack gap="xs">
-          {suggestedAutomations.map((automation) => (
+      <Stack gap="xs">
+        <AutomationEntry
+          title={t("automate.selection.createNew.title", "Create New Automation")}
+          badgeIcon={AddCircleOutline}
+          operations={[]}
+          onClick={onCreateNew}
+          keepIconColor={true}
+          toolRegistry={toolRegistry}
+        />
+        {/* Saved Automations */}
+        {savedAutomations.map((automation) => {
+          const IconComponent = automation.icon ? iconMap[automation.icon as keyof typeof iconMap] : SettingsIcon;
+          return (
             <AutomationEntry
               key={automation.id}
               title={automation.name}
               description={automation.description}
-              badgeIcon={automation.icon}
-              operations={automation.operations.map(op => op.operation)}
+              badgeIcon={IconComponent || SettingsIcon}
+              operations={automation.operations.map((op) => (typeof op === "string" ? op : op.operation))}
               onClick={() => onRun(automation)}
               showMenu={true}
-              onCopy={() => onCopyFromSuggested(automation)}
+              onEdit={() => onEdit(automation)}
+              onExport={() => downloadFolderScanningConfig(automation, toolRegistry)}
+              onDelete={() => onDelete(automation)}
               toolRegistry={toolRegistry}
             />
-          ))}
-        </Stack>
-      </div>
-    </Stack>
+          );
+        })}
+        <Divider pb="sm" />
+
+        {/* Suggested Automations */}
+        <div>
+          <Title order={3} size="h4" fw={600} mb="md" style={{ color: "var(--mantine-color-dimmed)" }}>
+            {t("automate.selection.suggested.title", "Suggested")}
+          </Title>
+          <Stack gap="xs">
+            {suggestedAutomations.map((automation) => (
+              <AutomationEntry
+                key={automation.id}
+                title={automation.name}
+                description={automation.description}
+                badgeIcon={automation.icon}
+                operations={automation.operations.map((op) => op.operation)}
+                onClick={() => onRun(automation)}
+                showMenu={true}
+                onCopy={() => onCopyFromSuggested(automation)}
+                toolRegistry={toolRegistry}
+              />
+            ))}
+          </Stack>
+        </div>
+      </Stack>
     </div>
   );
 }
diff --git a/frontend/src/core/components/tools/automate/IconSelector.tsx b/frontend/src/core/components/tools/automate/IconSelector.tsx
index 0bfcd01d8b..f6dab1ea06 100644
--- a/frontend/src/core/components/tools/automate/IconSelector.tsx
+++ b/frontend/src/core/components/tools/automate/IconSelector.tsx
@@ -2,8 +2,8 @@ import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Box, Text, Stack, Button, SimpleGrid, Tooltip, Popover } from "@mantine/core";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
-import { iconMap, iconOptions } from '@app/components/tools/automate/iconMap';
-import { Z_INDEX_AUTOMATE_DROPDOWN } from '@app/styles/zIndex';
+import { iconMap, iconOptions } from "@app/components/tools/automate/iconMap";
+import { Z_INDEX_AUTOMATE_DROPDOWN } from "@app/styles/zIndex";
 
 interface IconSelectorProps {
   value?: string;
@@ -53,7 +53,6 @@ export default function IconSelector({ value = "SettingsIcon", onChange, size =
               paddingLeft: "0.5rem",
               borderColor: "var(--mantine-color-gray-3)",
               color: "var(--mantine-color-text)",
-
             }}
           >
             {React.createElement(selectedIconComponent, { style: { fontSize: iconSize } })}
diff --git a/frontend/src/core/components/tools/automate/ToolConfigurationModal.tsx b/frontend/src/core/components/tools/automate/ToolConfigurationModal.tsx
index fbb51467af..9c17eb2d2c 100644
--- a/frontend/src/core/components/tools/automate/ToolConfigurationModal.tsx
+++ b/frontend/src/core/components/tools/automate/ToolConfigurationModal.tsx
@@ -1,22 +1,14 @@
-import { useState, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  Modal,
-  Title,
-  Button,
-  Group,
-  Stack,
-  Text,
-  Alert
-} from '@mantine/core';
-import { Z_INDEX_AUTOMATE_MODAL } from '@app/styles/zIndex';
-import SettingsIcon from '@mui/icons-material/Settings';
-import CheckIcon from '@mui/icons-material/Check';
-import CloseIcon from '@mui/icons-material/Close';
-import WarningIcon from '@mui/icons-material/Warning';
-import { ToolRegistry } from '@app/data/toolsTaxonomy';
-import { ToolId } from '@app/types/toolId';
-import { getAvailableToExtensions } from '@app/utils/convertUtils';
+import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { Modal, Title, Button, Group, Stack, Text, Alert } from "@mantine/core";
+import { Z_INDEX_AUTOMATE_MODAL } from "@app/styles/zIndex";
+import SettingsIcon from "@mui/icons-material/Settings";
+import CheckIcon from "@mui/icons-material/Check";
+import CloseIcon from "@mui/icons-material/Close";
+import WarningIcon from "@mui/icons-material/Warning";
+import { ToolRegistry } from "@app/data/toolsTaxonomy";
+import { ToolId } from "@app/types/toolId";
+import { getAvailableToExtensions } from "@app/utils/convertUtils";
 interface ToolConfigurationModalProps {
   opened: boolean;
   tool: {
@@ -57,15 +49,13 @@ export default function ToolConfigurationModal({ opened, tool, onSave, onCancel,
     if (!SettingsComponent) {
       return (
         <Alert icon={<WarningIcon />} color="orange">
-          <Text size="sm">
-            {t('automate.config.noSettings', 'This tool does not have configurable settings.')}
-          </Text>
+          <Text size="sm">{t("automate.config.noSettings", "This tool does not have configurable settings.")}</Text>
         </Alert>
       );
     }
 
     // Special handling for ConvertSettings which needs additional props
-    if (tool.operation === 'convert') {
+    if (tool.operation === "convert") {
       return (
         <SettingsComponent
           parameters={parameters}
@@ -101,9 +91,7 @@ export default function ToolConfigurationModal({ opened, tool, onSave, onCancel,
       title={
         <Group gap="xs">
           <SettingsIcon />
-          <Title order={3}>
-            {t('automate.config.title', 'Configure {{toolName}}', { toolName: tool.name })}
-          </Title>
+          <Title order={3}>{t("automate.config.title", "Configure {{toolName}}", { toolName: tool.name })}</Title>
         </Group>
       }
       size="lg"
@@ -112,26 +100,20 @@ export default function ToolConfigurationModal({ opened, tool, onSave, onCancel,
     >
       <Stack gap="md">
         <Text size="sm" c="dimmed">
-          {t('automate.config.description', 'Configure the settings for this tool. These settings will be applied when the automation runs.')}
+          {t(
+            "automate.config.description",
+            "Configure the settings for this tool. These settings will be applied when the automation runs.",
+          )}
         </Text>
 
-        <div style={{ maxHeight: '60vh', overflowY: 'auto', overflowX: "hidden" }}>
-          {renderToolSettings()}
-        </div>
+        <div style={{ maxHeight: "60vh", overflowY: "auto", overflowX: "hidden" }}>{renderToolSettings()}</div>
 
         <Group justify="flex-end" gap="sm">
-          <Button
-            variant="light"
-            leftSection={<CloseIcon />}
-            onClick={onCancel}
-          >
-            {t('automate.config.cancel', 'Cancel')}
+          <Button variant="light" leftSection={<CloseIcon />} onClick={onCancel}>
+            {t("automate.config.cancel", "Cancel")}
           </Button>
-          <Button
-            leftSection={<CheckIcon />}
-            onClick={handleSave}
-          >
-            {t('automate.config.save', 'Save Configuration')}
+          <Button leftSection={<CheckIcon />} onClick={handleSave}>
+            {t("automate.config.save", "Save Configuration")}
           </Button>
         </Group>
       </Stack>
diff --git a/frontend/src/core/components/tools/automate/ToolList.tsx b/frontend/src/core/components/tools/automate/ToolList.tsx
index 7a5c668600..0f7caf687d 100644
--- a/frontend/src/core/components/tools/automate/ToolList.tsx
+++ b/frontend/src/core/components/tools/automate/ToolList.tsx
@@ -58,9 +58,10 @@ export default function ToolList({
             <div
               style={{
                 border: "1px solid var(--mantine-color-gray-2)",
-                borderRadius: tool.operation && !tool.configured
-                  ? "var(--mantine-radius-lg) var(--mantine-radius-lg) 0 0"
-                  : "var(--mantine-radius-lg)",
+                borderRadius:
+                  tool.operation && !tool.configured
+                    ? "var(--mantine-radius-lg) var(--mantine-radius-lg) 0 0"
+                    : "var(--mantine-radius-lg)",
                 backgroundColor: "var(--mantine-color-gray-2)",
                 position: "relative",
                 padding: "var(--mantine-spacing-xs)",
@@ -127,7 +128,7 @@ export default function ToolList({
                   padding: "var(--mantine-spacing-xs)",
                 }}
               >
-                <Text pl="md" size="xs" >
+                <Text pl="md" size="xs">
                   {t("automate.creation.tools.notConfigured", "! Not Configured")}
                 </Text>
               </div>
diff --git a/frontend/src/core/components/tools/automate/ToolSelector.tsx b/frontend/src/core/components/tools/automate/ToolSelector.tsx
index 2d87ae69a9..7f5ea74b26 100644
--- a/frontend/src/core/components/tools/automate/ToolSelector.tsx
+++ b/frontend/src/core/components/tools/automate/ToolSelector.tsx
@@ -1,13 +1,13 @@
-import { useState, useMemo, useCallback, useRef, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Stack, Text, ScrollArea } from '@mantine/core';
-import { ToolRegistryEntry, ToolRegistry, getToolSupportsAutomate } from '@app/data/toolsTaxonomy';
-import { useToolSections } from '@app/hooks/useToolSections';
-import { renderToolButtons } from '@app/components/tools/shared/renderToolButtons';
-import ToolSearch from '@app/components/tools/toolPicker/ToolSearch';
-import ToolButton from '@app/components/tools/toolPicker/ToolButton';
-import { ToolId } from '@app/types/toolId';
-import { Z_INDEX_AUTOMATE_DROPDOWN } from '@app/styles/zIndex';
+import { useState, useMemo, useCallback, useRef, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { Stack, Text, ScrollArea } from "@mantine/core";
+import { ToolRegistryEntry, ToolRegistry, getToolSupportsAutomate } from "@app/data/toolsTaxonomy";
+import { useToolSections } from "@app/hooks/useToolSections";
+import { renderToolButtons } from "@app/components/tools/shared/renderToolButtons";
+import ToolSearch from "@app/components/tools/toolPicker/ToolSearch";
+import ToolButton from "@app/components/tools/toolPicker/ToolButton";
+import { ToolId } from "@app/types/toolId";
+import { Z_INDEX_AUTOMATE_DROPDOWN } from "@app/styles/zIndex";
 
 interface ToolSelectorProps {
   onSelect: (toolKey: string) => void;
@@ -22,18 +22,18 @@ export default function ToolSelector({
   excludeTools = [],
   toolRegistry,
   selectedValue,
-  placeholder
+  placeholder,
 }: ToolSelectorProps) {
   const { t } = useTranslation();
   const [opened, setOpened] = useState(false);
-  const [searchTerm, setSearchTerm] = useState('');
+  const [searchTerm, setSearchTerm] = useState("");
   const [shouldAutoFocus, setShouldAutoFocus] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
 
   // Filter out excluded tools (like 'automate' itself) and tools that don't support automation
   const baseFilteredTools = useMemo(() => {
-    return (Object.entries(toolRegistry) as [ToolId, ToolRegistryEntry][]).filter(([key, tool]) =>
-      !excludeTools.includes(key) && getToolSupportsAutomate(tool)
+    return (Object.entries(toolRegistry) as [ToolId, ToolRegistryEntry][]).filter(
+      ([key, tool]) => !excludeTools.includes(key) && getToolSupportsAutomate(tool),
     );
   }, [toolRegistry, excludeTools]);
 
@@ -80,30 +80,35 @@ export default function ToolSelector({
     if (!sections || sections.length === 0) {
       // If no sections, create a simple group from filtered tools
       if (baseFilteredTools.length > 0) {
-        return [{
-          name: 'Tools',
-          subcategoryId: 'all' as any,
-          tools: baseFilteredTools.map(([key, tool]) => ({ id: key, tool }))
-        }];
+        return [
+          {
+            name: "Tools",
+            subcategoryId: "all" as any,
+            tools: baseFilteredTools.map(([key, tool]) => ({ id: key, tool })),
+          },
+        ];
       }
       return [];
     }
 
     // Find the "all" section which contains all tools without duplicates
-    const allSection = sections.find(s => s.key === 'all');
+    const allSection = sections.find((s) => s.key === "all");
     return allSection?.subcategories || [];
   }, [isSearching, searchGroups, sections, baseFilteredTools]);
 
-  const handleToolSelect = useCallback((toolKey: string) => {
-    onSelect(toolKey);
-    setOpened(false);
-    setSearchTerm(''); // Clear search to show the selected tool display
-  }, [onSelect]);
+  const handleToolSelect = useCallback(
+    (toolKey: string) => {
+      onSelect(toolKey);
+      setOpened(false);
+      setSearchTerm(""); // Clear search to show the selected tool display
+    },
+    [onSelect],
+  );
 
-  const renderedTools = useMemo(() =>
-    displayGroups.map((subcategory) =>
-      renderToolButtons(t, subcategory as any, null, handleToolSelect, !isSearching, true)
-    ), [displayGroups, handleToolSelect, isSearching, t]
+  const renderedTools = useMemo(
+    () =>
+      displayGroups.map((subcategory) => renderToolButtons(t, subcategory as any, null, handleToolSelect, !isSearching, true)),
+    [displayGroups, handleToolSelect, isSearching, t],
   );
 
   const handleSearchFocus = () => {
@@ -116,17 +121,16 @@ export default function ToolSelector({
     const handleClickOutside = (event: MouseEvent) => {
       if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
         setOpened(false);
-        setSearchTerm('');
+        setSearchTerm("");
       }
     };
 
     if (opened) {
-      document.addEventListener('mousedown', handleClickOutside);
-      return () => document.removeEventListener('mousedown', handleClickOutside);
+      document.addEventListener("mousedown", handleClickOutside);
+      return () => document.removeEventListener("mousedown", handleClickOutside);
     }
   }, [opened]);
 
-
   const handleSearchChange = (value: string) => {
     setSearchTerm(value);
     if (!opened) {
@@ -147,65 +151,61 @@ export default function ToolSelector({
 
   const getDisplayValue = () => {
     if (selectedTool) return selectedTool.name;
-    return placeholder || t('automate.creation.tools.add', 'Add a tool...');
+    return placeholder || t("automate.creation.tools.add", "Add a tool...");
   };
 
   return (
-    <div ref={containerRef} className='rounded-xl'>
+    <div ref={containerRef} className="rounded-xl">
       {/* Always show the target - either selected tool or search input */}
 
-        {selectedTool && !opened ? (
-          // Show selected tool in AutomationEntry style when tool is selected and dropdown closed
-          <div onClick={handleSearchFocus} style={{ cursor: 'pointer',
-           borderRadius: "var(--mantine-radius-lg)" }}>
-            <ToolButton
-              id={'tool' as ToolId}
-              tool={selectedTool}
-              isSelected={false}
-              onSelect={()=>{}}
-              rounded={true}
-              disableNavigation={true}
-            />
-          </div>
-        ) : (
-          // Show search input when no tool selected OR when dropdown is opened
-          <ToolSearch
-            value={searchTerm}
-            onChange={handleSearchChange}
-            toolRegistry={filteredToolRegistry}
-            mode="unstyled"
-            placeholder={getDisplayValue()}
-            hideIcon={true}
-            onFocus={handleInputFocus}
-            autoFocus={shouldAutoFocus}
+      {selectedTool && !opened ? (
+        // Show selected tool in AutomationEntry style when tool is selected and dropdown closed
+        <div onClick={handleSearchFocus} style={{ cursor: "pointer", borderRadius: "var(--mantine-radius-lg)" }}>
+          <ToolButton
+            id={"tool" as ToolId}
+            tool={selectedTool}
+            isSelected={false}
+            onSelect={() => {}}
+            rounded={true}
+            disableNavigation={true}
           />
-        )}
+        </div>
+      ) : (
+        // Show search input when no tool selected OR when dropdown is opened
+        <ToolSearch
+          value={searchTerm}
+          onChange={handleSearchChange}
+          toolRegistry={filteredToolRegistry}
+          mode="unstyled"
+          placeholder={getDisplayValue()}
+          hideIcon={true}
+          onFocus={handleInputFocus}
+          autoFocus={shouldAutoFocus}
+        />
+      )}
 
       {/* Custom dropdown */}
       {opened && (
         <div
           style={{
-            position: 'absolute',
-            top: '100%',
+            position: "absolute",
+            top: "100%",
             left: 0,
             right: 0,
             zIndex: Z_INDEX_AUTOMATE_DROPDOWN,
-            backgroundColor: 'var(--mantine-color-body)',
-            border: '1px solid var(--mantine-color-gray-3)',
-            borderRadius: 'var(--mantine-radius-sm)',
-            boxShadow: 'var(--mantine-shadow-sm)',
-            marginTop: '4px',
-            minWidth: '16rem'
+            backgroundColor: "var(--mantine-color-body)",
+            border: "1px solid var(--mantine-color-gray-3)",
+            borderRadius: "var(--mantine-radius-sm)",
+            boxShadow: "var(--mantine-shadow-sm)",
+            marginTop: "4px",
+            minWidth: "16rem",
           }}
         >
           <ScrollArea h={350}>
             <Stack gap="sm" p="sm">
               {displayGroups.length === 0 ? (
                 <Text size="sm" c="dimmed" ta="center" p="md">
-                  {isSearching
-                    ? t('tools.noSearchResults', 'No tools found')
-                    : t('tools.noTools', 'No tools available')
-                  }
+                  {isSearching ? t("tools.noSearchResults", "No tools found") : t("tools.noTools", "No tools available")}
                 </Text>
               ) : (
                 renderedTools
diff --git a/frontend/src/core/components/tools/automate/iconMap.ts b/frontend/src/core/components/tools/automate/iconMap.ts
index cabd4f2dae..65d3f9421c 100644
--- a/frontend/src/core/components/tools/automate/iconMap.ts
+++ b/frontend/src/core/components/tools/automate/iconMap.ts
@@ -1,31 +1,31 @@
-import SettingsIcon from '@mui/icons-material/Settings';
-import CompressIcon from '@mui/icons-material/Compress';
-import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
-import CleaningServicesIcon from '@mui/icons-material/CleaningServices';
-import CropIcon from '@mui/icons-material/Crop';
-import TextFieldsIcon from '@mui/icons-material/TextFields';
-import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
-import EditIcon from '@mui/icons-material/Edit';
-import DeleteIcon from '@mui/icons-material/Delete';
-import FolderIcon from '@mui/icons-material/Folder';
-import CloudIcon from '@mui/icons-material/Cloud';
-import StorageIcon from '@mui/icons-material/Storage';
-import SearchIcon from '@mui/icons-material/Search';
-import DownloadIcon from '@mui/icons-material/Download';
-import UploadIcon from '@mui/icons-material/Upload';
-import PlayArrowIcon from '@mui/icons-material/PlayArrow';
-import RotateLeftIcon from '@mui/icons-material/RotateLeft';
-import RotateRightIcon from '@mui/icons-material/RotateRight';
-import VisibilityIcon from '@mui/icons-material/Visibility';
-import ContentCutIcon from '@mui/icons-material/ContentCut';
-import ContentCopyIcon from '@mui/icons-material/ContentCopy';
-import WorkIcon from '@mui/icons-material/Work';
-import BuildIcon from '@mui/icons-material/Build';
-import AutoAwesomeIcon from '@mui/icons-material/AutoAwesome';
-import SmartToyIcon from '@mui/icons-material/SmartToy';
-import CheckIcon from '@mui/icons-material/Check';
-import SecurityIcon from '@mui/icons-material/Security';
-import StarIcon from '@mui/icons-material/Star';
+import SettingsIcon from "@mui/icons-material/Settings";
+import CompressIcon from "@mui/icons-material/Compress";
+import SwapHorizIcon from "@mui/icons-material/SwapHoriz";
+import CleaningServicesIcon from "@mui/icons-material/CleaningServices";
+import CropIcon from "@mui/icons-material/Crop";
+import TextFieldsIcon from "@mui/icons-material/TextFields";
+import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
+import EditIcon from "@mui/icons-material/Edit";
+import DeleteIcon from "@mui/icons-material/Delete";
+import FolderIcon from "@mui/icons-material/Folder";
+import CloudIcon from "@mui/icons-material/Cloud";
+import StorageIcon from "@mui/icons-material/Storage";
+import SearchIcon from "@mui/icons-material/Search";
+import DownloadIcon from "@mui/icons-material/Download";
+import UploadIcon from "@mui/icons-material/Upload";
+import PlayArrowIcon from "@mui/icons-material/PlayArrow";
+import RotateLeftIcon from "@mui/icons-material/RotateLeft";
+import RotateRightIcon from "@mui/icons-material/RotateRight";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import ContentCutIcon from "@mui/icons-material/ContentCut";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import WorkIcon from "@mui/icons-material/Work";
+import BuildIcon from "@mui/icons-material/Build";
+import AutoAwesomeIcon from "@mui/icons-material/AutoAwesome";
+import SmartToyIcon from "@mui/icons-material/SmartToy";
+import CheckIcon from "@mui/icons-material/Check";
+import SecurityIcon from "@mui/icons-material/Security";
+import StarIcon from "@mui/icons-material/Star";
 
 export const iconMap = {
   SettingsIcon,
@@ -55,38 +55,38 @@ export const iconMap = {
   SmartToyIcon,
   CheckIcon,
   SecurityIcon,
-  StarIcon
+  StarIcon,
 };
 
 export const iconOptions = [
-  { value: 'SettingsIcon', label: 'Settings' },
-  { value: 'CompressIcon', label: 'Compress' },
-  { value: 'SwapHorizIcon', label: 'Convert' },
-  { value: 'CleaningServicesIcon', label: 'Clean' },
-  { value: 'CropIcon', label: 'Crop' },
-  { value: 'TextFieldsIcon', label: 'Text' },
-  { value: 'PictureAsPdfIcon', label: 'PDF' },
-  { value: 'EditIcon', label: 'Edit' },
-  { value: 'DeleteIcon', label: 'Delete' },
-  { value: 'FolderIcon', label: 'Folder' },
-  { value: 'CloudIcon', label: 'Cloud' },
-  { value: 'StorageIcon', label: 'Storage' },
-  { value: 'SearchIcon', label: 'Search' },
-  { value: 'DownloadIcon', label: 'Download' },
-  { value: 'UploadIcon', label: 'Upload' },
-  { value: 'PlayArrowIcon', label: 'Play' },
-  { value: 'RotateLeftIcon', label: 'Rotate Left' },
-  { value: 'RotateRightIcon', label: 'Rotate Right' },
-  { value: 'VisibilityIcon', label: 'View' },
-  { value: 'ContentCutIcon', label: 'Cut' },
-  { value: 'ContentCopyIcon', label: 'Copy' },
-  { value: 'WorkIcon', label: 'Work' },
-  { value: 'BuildIcon', label: 'Build' },
-  { value: 'AutoAwesomeIcon', label: 'Magic' },
-  { value: 'SmartToyIcon', label: 'Robot' },
-  { value: 'CheckIcon', label: 'Check' },
-  { value: 'SecurityIcon', label: 'Security' },
-  { value: 'StarIcon', label: 'Star' }
+  { value: "SettingsIcon", label: "Settings" },
+  { value: "CompressIcon", label: "Compress" },
+  { value: "SwapHorizIcon", label: "Convert" },
+  { value: "CleaningServicesIcon", label: "Clean" },
+  { value: "CropIcon", label: "Crop" },
+  { value: "TextFieldsIcon", label: "Text" },
+  { value: "PictureAsPdfIcon", label: "PDF" },
+  { value: "EditIcon", label: "Edit" },
+  { value: "DeleteIcon", label: "Delete" },
+  { value: "FolderIcon", label: "Folder" },
+  { value: "CloudIcon", label: "Cloud" },
+  { value: "StorageIcon", label: "Storage" },
+  { value: "SearchIcon", label: "Search" },
+  { value: "DownloadIcon", label: "Download" },
+  { value: "UploadIcon", label: "Upload" },
+  { value: "PlayArrowIcon", label: "Play" },
+  { value: "RotateLeftIcon", label: "Rotate Left" },
+  { value: "RotateRightIcon", label: "Rotate Right" },
+  { value: "VisibilityIcon", label: "View" },
+  { value: "ContentCutIcon", label: "Cut" },
+  { value: "ContentCopyIcon", label: "Copy" },
+  { value: "WorkIcon", label: "Work" },
+  { value: "BuildIcon", label: "Build" },
+  { value: "AutoAwesomeIcon", label: "Magic" },
+  { value: "SmartToyIcon", label: "Robot" },
+  { value: "CheckIcon", label: "Check" },
+  { value: "SecurityIcon", label: "Security" },
+  { value: "StarIcon", label: "Star" },
 ];
 
-export type IconKey = keyof typeof iconMap;
\ No newline at end of file
+export type IconKey = keyof typeof iconMap;
diff --git a/frontend/src/core/components/tools/bookletImposition/BookletImpositionSettings.tsx b/frontend/src/core/components/tools/bookletImposition/BookletImpositionSettings.tsx
index d9c6682295..cba54cd4ec 100644
--- a/frontend/src/core/components/tools/bookletImposition/BookletImpositionSettings.tsx
+++ b/frontend/src/core/components/tools/bookletImposition/BookletImpositionSettings.tsx
@@ -16,8 +16,7 @@ const BookletImpositionSettings = ({ parameters, onParameterChange, disabled = f
 
   return (
     <Stack gap="md">
-      <Divider ml='-md'></Divider>
-
+      <Divider ml="-md"></Divider>
 
       {/* Double Sided */}
       <Stack gap="sm">
@@ -25,20 +24,22 @@ const BookletImpositionSettings = ({ parameters, onParameterChange, disabled = f
           checked={parameters.doubleSided}
           onChange={(event) => {
             const isDoubleSided = event.currentTarget.checked;
-            onParameterChange('doubleSided', isDoubleSided);
+            onParameterChange("doubleSided", isDoubleSided);
             // Reset to BOTH when turning double-sided back on
             if (isDoubleSided) {
-              onParameterChange('duplexPass', 'BOTH');
+              onParameterChange("duplexPass", "BOTH");
             } else {
               // Default to FIRST pass when going to manual duplex
-              onParameterChange('duplexPass', 'FIRST');
+              onParameterChange("duplexPass", "FIRST");
             }
           }}
           disabled={disabled}
           label={
             <div>
-              <Text size="sm">{t('bookletImposition.doubleSided.label', 'Double-sided printing')}</Text>
-              <Text size="xs" c="dimmed">{t('bookletImposition.doubleSided.tooltip', 'Creates both front and back sides for proper booklet printing')}</Text>
+              <Text size="sm">{t("bookletImposition.doubleSided.label", "Double-sided printing")}</Text>
+              <Text size="xs" c="dimmed">
+                {t("bookletImposition.doubleSided.tooltip", "Creates both front and back sides for proper booklet printing")}
+              </Text>
             </div>
           }
         />
@@ -47,28 +48,33 @@ const BookletImpositionSettings = ({ parameters, onParameterChange, disabled = f
         {!parameters.doubleSided && (
           <Stack gap="xs" ml="lg">
             <Text size="sm" fw={500} c="orange">
-              {t('bookletImposition.manualDuplex.title', 'Manual Duplex Mode')}
+              {t("bookletImposition.manualDuplex.title", "Manual Duplex Mode")}
             </Text>
             <Text size="xs" c="dimmed">
-              {t('bookletImposition.manualDuplex.instructions', 'For printers without automatic duplex. You\'ll need to run this twice:')}
+              {t(
+                "bookletImposition.manualDuplex.instructions",
+                "For printers without automatic duplex. You'll need to run this twice:",
+              )}
             </Text>
 
             <ButtonSelector
-              label={t('bookletImposition.duplexPass.label', 'Print Pass')}
+              label={t("bookletImposition.duplexPass.label", "Print Pass")}
               value={parameters.duplexPass}
-              onChange={(value) => onParameterChange('duplexPass', value)}
+              onChange={(value) => onParameterChange("duplexPass", value)}
               options={[
-                { value: 'FIRST', label: t('bookletImposition.duplexPass.first', '1st Pass') },
-                { value: 'SECOND', label: t('bookletImposition.duplexPass.second', '2nd Pass') }
+                { value: "FIRST", label: t("bookletImposition.duplexPass.first", "1st Pass") },
+                { value: "SECOND", label: t("bookletImposition.duplexPass.second", "2nd Pass") },
               ]}
               disabled={disabled}
             />
 
             <Text size="xs" c="blue" fs="italic">
-              {parameters.duplexPass === 'FIRST'
-                ? t('bookletImposition.duplexPass.firstInstructions', 'Prints front sides → stack face-down → run again with 2nd Pass')
-                : t('bookletImposition.duplexPass.secondInstructions', 'Load printed stack face-down → prints back sides')
-              }
+              {parameters.duplexPass === "FIRST"
+                ? t(
+                    "bookletImposition.duplexPass.firstInstructions",
+                    "Prints front sides → stack face-down → run again with 2nd Pass",
+                  )
+                : t("bookletImposition.duplexPass.secondInstructions", "Load printed stack face-down → prints back sides")}
             </Text>
           </Stack>
         )}
@@ -78,25 +84,23 @@ const BookletImpositionSettings = ({ parameters, onParameterChange, disabled = f
 
       {/* Advanced Options */}
       <Stack gap="sm">
-        <Button
-          variant="subtle"
-          onClick={() => setAdvancedOpen(!advancedOpen)}
-          disabled={disabled}
-        >
-          {t('bookletImposition.advanced.toggle', 'Advanced Options')} {advancedOpen ? '▲' : '▼'}
+        <Button variant="subtle" onClick={() => setAdvancedOpen(!advancedOpen)} disabled={disabled}>
+          {t("bookletImposition.advanced.toggle", "Advanced Options")} {advancedOpen ? "▲" : "▼"}
         </Button>
 
         <Collapse in={advancedOpen}>
           <Stack gap="md" mt="md">
             {/* Right-to-Left Binding */}
             <Checkbox
-              checked={parameters.spineLocation === 'RIGHT'}
-              onChange={(event) => onParameterChange('spineLocation', event.currentTarget.checked ? 'RIGHT' : 'LEFT')}
+              checked={parameters.spineLocation === "RIGHT"}
+              onChange={(event) => onParameterChange("spineLocation", event.currentTarget.checked ? "RIGHT" : "LEFT")}
               disabled={disabled}
               label={
                 <div>
-                  <Text size="sm">{t('bookletImposition.rtlBinding.label', 'Right-to-left binding')}</Text>
-                  <Text size="xs" c="dimmed">{t('bookletImposition.rtlBinding.tooltip', 'For Arabic, Hebrew, or other right-to-left languages')}</Text>
+                  <Text size="sm">{t("bookletImposition.rtlBinding.label", "Right-to-left binding")}</Text>
+                  <Text size="xs" c="dimmed">
+                    {t("bookletImposition.rtlBinding.tooltip", "For Arabic, Hebrew, or other right-to-left languages")}
+                  </Text>
                 </div>
               }
             />
@@ -104,12 +108,17 @@ const BookletImpositionSettings = ({ parameters, onParameterChange, disabled = f
             {/* Add Border Option */}
             <Checkbox
               checked={parameters.addBorder}
-              onChange={(event) => onParameterChange('addBorder', event.currentTarget.checked)}
+              onChange={(event) => onParameterChange("addBorder", event.currentTarget.checked)}
               disabled={disabled}
               label={
                 <div>
-                  <Text size="sm">{t('bookletImposition.addBorder.label', 'Add borders around pages')}</Text>
-                  <Text size="xs" c="dimmed">{t('bookletImposition.addBorder.tooltip', 'Adds borders around each page section to help with cutting and alignment')}</Text>
+                  <Text size="sm">{t("bookletImposition.addBorder.label", "Add borders around pages")}</Text>
+                  <Text size="xs" c="dimmed">
+                    {t(
+                      "bookletImposition.addBorder.tooltip",
+                      "Adds borders around each page section to help with cutting and alignment",
+                    )}
+                  </Text>
                 </div>
               }
             />
@@ -118,21 +127,23 @@ const BookletImpositionSettings = ({ parameters, onParameterChange, disabled = f
             <Stack gap="xs">
               <Checkbox
                 checked={parameters.addGutter}
-                onChange={(event) => onParameterChange('addGutter', event.currentTarget.checked)}
+                onChange={(event) => onParameterChange("addGutter", event.currentTarget.checked)}
                 disabled={disabled}
                 label={
                   <div>
-                    <Text size="sm">{t('bookletImposition.addGutter.label', 'Add gutter margin')}</Text>
-                    <Text size="xs" c="dimmed">{t('bookletImposition.addGutter.tooltip', 'Adds inner margin space for binding')}</Text>
+                    <Text size="sm">{t("bookletImposition.addGutter.label", "Add gutter margin")}</Text>
+                    <Text size="xs" c="dimmed">
+                      {t("bookletImposition.addGutter.tooltip", "Adds inner margin space for binding")}
+                    </Text>
                   </div>
                 }
               />
 
               {parameters.addGutter && (
                 <NumberInput
-                  label={t('bookletImposition.gutterSize.label', 'Gutter size (points)')}
+                  label={t("bookletImposition.gutterSize.label", "Gutter size (points)")}
                   value={parameters.gutterSize}
-                  onChange={(value) => onParameterChange('gutterSize', value || 12)}
+                  onChange={(value) => onParameterChange("gutterSize", value || 12)}
                   min={6}
                   max={72}
                   step={6}
@@ -145,18 +156,23 @@ const BookletImpositionSettings = ({ parameters, onParameterChange, disabled = f
             {/* Flip on Short Edge */}
             <Checkbox
               checked={parameters.flipOnShortEdge}
-              onChange={(event) => onParameterChange('flipOnShortEdge', event.currentTarget.checked)}
+              onChange={(event) => onParameterChange("flipOnShortEdge", event.currentTarget.checked)}
               disabled={disabled || !parameters.doubleSided}
               label={
                 <div>
                   <Text size="sm" c={!parameters.doubleSided ? "dimmed" : undefined}>
-                    {t('bookletImposition.flipOnShortEdge.label', 'Flip on short edge')}
+                    {t("bookletImposition.flipOnShortEdge.label", "Flip on short edge")}
                   </Text>
                   <Text size="xs" c="dimmed">
                     {!parameters.doubleSided
-                      ? t('bookletImposition.flipOnShortEdge.manualNote', 'Not needed in manual mode - you flip the stack yourself')
-                      : t('bookletImposition.flipOnShortEdge.tooltip', 'Enable for short-edge duplex printing (automatic duplex only - ignored in manual mode)')
-                    }
+                      ? t(
+                          "bookletImposition.flipOnShortEdge.manualNote",
+                          "Not needed in manual mode - you flip the stack yourself",
+                        )
+                      : t(
+                          "bookletImposition.flipOnShortEdge.tooltip",
+                          "Enable for short-edge duplex printing (automatic duplex only - ignored in manual mode)",
+                        )}
                   </Text>
                 </div>
               }
@@ -164,7 +180,7 @@ const BookletImpositionSettings = ({ parameters, onParameterChange, disabled = f
 
             {/* Paper Size Note */}
             <Text size="xs" c="dimmed" fs="italic">
-              {t('bookletImposition.paperSizeNote', 'Paper size is automatically derived from your first page.')}
+              {t("bookletImposition.paperSizeNote", "Paper size is automatically derived from your first page.")}
             </Text>
           </Stack>
         </Collapse>
diff --git a/frontend/src/core/components/tools/certSign/CertSignAutomationSettings.tsx b/frontend/src/core/components/tools/certSign/CertSignAutomationSettings.tsx
index 0c4aed6a3a..c25567fe77 100644
--- a/frontend/src/core/components/tools/certSign/CertSignAutomationSettings.tsx
+++ b/frontend/src/core/components/tools/certSign/CertSignAutomationSettings.tsx
@@ -23,36 +23,20 @@ const CertSignAutomationSettings = ({ parameters, onParameterChange, disabled =
   return (
     <Stack gap="lg">
       {/* Sign Mode Selection (Manual vs Auto) */}
-      <CertificateTypeSettings
-        parameters={parameters}
-        onParameterChange={onParameterChange}
-        disabled={disabled}
-      />
+      <CertificateTypeSettings parameters={parameters} onParameterChange={onParameterChange} disabled={disabled} />
 
       {/* Certificate Format - only show for Manual mode */}
-      {parameters.signMode === 'MANUAL' && (
-        <CertificateFormatSettings
-          parameters={parameters}
-          onParameterChange={onParameterChange}
-          disabled={disabled}
-        />
+      {parameters.signMode === "MANUAL" && (
+        <CertificateFormatSettings parameters={parameters} onParameterChange={onParameterChange} disabled={disabled} />
       )}
 
       {/* Certificate Files - only show for Manual mode */}
-      {parameters.signMode === 'MANUAL' && (
-        <CertificateFilesSettings
-          parameters={parameters}
-          onParameterChange={onParameterChange}
-          disabled={disabled}
-        />
+      {parameters.signMode === "MANUAL" && (
+        <CertificateFilesSettings parameters={parameters} onParameterChange={onParameterChange} disabled={disabled} />
       )}
 
       {/* Signature Appearance Settings */}
-      <SignatureAppearanceSettings
-        parameters={parameters}
-        onParameterChange={onParameterChange}
-        disabled={disabled}
-      />
+      <SignatureAppearanceSettings parameters={parameters} onParameterChange={onParameterChange} disabled={disabled} />
     </Stack>
   );
 };
diff --git a/frontend/src/core/components/tools/certSign/CertificateFilesSettings.tsx b/frontend/src/core/components/tools/certSign/CertificateFilesSettings.tsx
index 6e6df830c1..6958cd103e 100644
--- a/frontend/src/core/components/tools/certSign/CertificateFilesSettings.tsx
+++ b/frontend/src/core/components/tools/certSign/CertificateFilesSettings.tsx
@@ -15,73 +15,72 @@ const CertificateFilesSettings = ({ parameters, onParameterChange, disabled = fa
   return (
     <Stack gap="md">
       {/* Certificate Files based on type */}
-      {parameters.certType === 'PEM' && (
+      {parameters.certType === "PEM" && (
         <Stack gap="sm">
           <FileUploadButton
             file={parameters.privateKeyFile}
-            onChange={(file) => onParameterChange('privateKeyFile', file || undefined)}
+            onChange={(file) => onParameterChange("privateKeyFile", file || undefined)}
             accept=".pem,.der,.key"
             disabled={disabled}
-            placeholder={t('certSign.choosePrivateKey', 'Choose Private Key File')}
+            placeholder={t("certSign.choosePrivateKey", "Choose Private Key File")}
           />
           {parameters.privateKeyFile && (
             <FileUploadButton
               file={parameters.certFile}
-              onChange={(file) => onParameterChange('certFile', file || undefined)}
+              onChange={(file) => onParameterChange("certFile", file || undefined)}
               accept=".pem,.der,.crt,.cer"
               disabled={disabled}
-              placeholder={t('certSign.chooseCertificate', 'Choose Certificate File')}
+              placeholder={t("certSign.chooseCertificate", "Choose Certificate File")}
             />
           )}
         </Stack>
       )}
 
-      {(parameters.certType === 'PKCS12' || parameters.certType === 'PFX') && (
+      {(parameters.certType === "PKCS12" || parameters.certType === "PFX") && (
         <FileUploadButton
           file={parameters.p12File}
-          onChange={(file) => onParameterChange('p12File', file || undefined)}
+          onChange={(file) => onParameterChange("p12File", file || undefined)}
           accept=".p12,.pfx"
           disabled={disabled}
           placeholder={
-            parameters.certType === 'PFX'
-              ? t('certSign.choosePfxFile', 'Choose PFX File')
-              : t('certSign.chooseP12File', 'Choose PKCS12 File')
+            parameters.certType === "PFX"
+              ? t("certSign.choosePfxFile", "Choose PFX File")
+              : t("certSign.chooseP12File", "Choose PKCS12 File")
           }
         />
       )}
 
-      {parameters.certType === 'JKS' && (
+      {parameters.certType === "JKS" && (
         <FileUploadButton
           file={parameters.jksFile}
-          onChange={(file) => onParameterChange('jksFile', file || undefined)}
+          onChange={(file) => onParameterChange("jksFile", file || undefined)}
           accept=".jks,.keystore"
           disabled={disabled}
-          placeholder={t('certSign.chooseJksFile', 'Choose JKS File')}
+          placeholder={t("certSign.chooseJksFile", "Choose JKS File")}
         />
       )}
 
-      {parameters.signMode === 'AUTO' && (
+      {parameters.signMode === "AUTO" && (
         <Text c="dimmed" size="sm">
-          {t('certSign.serverCertMessage', 'Using server certificate - no files or password required')}
+          {t("certSign.serverCertMessage", "Using server certificate - no files or password required")}
         </Text>
       )}
 
       {/* Password - only show when files are uploaded */}
-      {parameters.certType && (
-        (parameters.certType === 'PEM' && parameters.privateKeyFile && parameters.certFile) ||
-        (parameters.certType === 'PKCS12' && parameters.p12File) ||
-        (parameters.certType === 'PFX' && parameters.p12File) ||
-        (parameters.certType === 'JKS' && parameters.jksFile)
-      ) && (
-        <TextInput
-          label={t('certSign.password', 'Certificate Password')}
-          placeholder={t('certSign.passwordOptional', 'Leave empty if no password')}
-          type="password"
-          value={parameters.password}
-          onChange={(event) => onParameterChange('password', event.currentTarget.value)}
-          disabled={disabled}
-        />
-      )}
+      {parameters.certType &&
+        ((parameters.certType === "PEM" && parameters.privateKeyFile && parameters.certFile) ||
+          (parameters.certType === "PKCS12" && parameters.p12File) ||
+          (parameters.certType === "PFX" && parameters.p12File) ||
+          (parameters.certType === "JKS" && parameters.jksFile)) && (
+          <TextInput
+            label={t("certSign.password", "Certificate Password")}
+            placeholder={t("certSign.passwordOptional", "Leave empty if no password")}
+            type="password"
+            value={parameters.password}
+            onChange={(event) => onParameterChange("password", event.currentTarget.value)}
+            disabled={disabled}
+          />
+        )}
     </Stack>
   );
 };
diff --git a/frontend/src/core/components/tools/certSign/CertificateFormatSettings.tsx b/frontend/src/core/components/tools/certSign/CertificateFormatSettings.tsx
index 6e584618ee..7841041932 100644
--- a/frontend/src/core/components/tools/certSign/CertificateFormatSettings.tsx
+++ b/frontend/src/core/components/tools/certSign/CertificateFormatSettings.tsx
@@ -8,58 +8,49 @@ interface CertificateFormatSettingsProps {
 }
 
 const CertificateFormatSettings = ({ parameters, onParameterChange, disabled = false }: CertificateFormatSettingsProps) => {
-
   return (
     <Stack gap="md">
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
+      <div style={{ display: "flex", flexDirection: "column", gap: "4px" }}>
         {/* First row - PKCS#12 and PFX */}
-        <div style={{ display: 'flex', gap: '4px' }}>
+        <div style={{ display: "flex", gap: "4px" }}>
           <Button
-            variant={parameters.certType === 'PKCS12' ? 'filled' : 'outline'}
-            color={parameters.certType === 'PKCS12' ? 'blue' : 'var(--text-muted)'}
-            onClick={() => onParameterChange('certType', 'PKCS12')}
+            variant={parameters.certType === "PKCS12" ? "filled" : "outline"}
+            color={parameters.certType === "PKCS12" ? "blue" : "var(--text-muted)"}
+            onClick={() => onParameterChange("certType", "PKCS12")}
             disabled={disabled}
-            style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
+            style={{ flex: 1, height: "auto", minHeight: "40px", fontSize: "11px" }}
           >
-            <div style={{ textAlign: 'center', lineHeight: '1.1', fontSize: '11px' }}>
-              PKCS12
-            </div>
+            <div style={{ textAlign: "center", lineHeight: "1.1", fontSize: "11px" }}>PKCS12</div>
           </Button>
           <Button
-            variant={parameters.certType === 'PFX' ? 'filled' : 'outline'}
-            color={parameters.certType === 'PFX' ? 'blue' : 'var(--text-muted)'}
-            onClick={() => onParameterChange('certType', 'PFX')}
+            variant={parameters.certType === "PFX" ? "filled" : "outline"}
+            color={parameters.certType === "PFX" ? "blue" : "var(--text-muted)"}
+            onClick={() => onParameterChange("certType", "PFX")}
             disabled={disabled}
-            style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
+            style={{ flex: 1, height: "auto", minHeight: "40px", fontSize: "11px" }}
           >
-            <div style={{ textAlign: 'center', lineHeight: '1.1', fontSize: '11px' }}>
-              PFX
-            </div>
+            <div style={{ textAlign: "center", lineHeight: "1.1", fontSize: "11px" }}>PFX</div>
           </Button>
         </div>
         {/* Second row - PEM and JKS */}
-        <div style={{ display: 'flex', gap: '4px' }}>
+        <div style={{ display: "flex", gap: "4px" }}>
           <Button
-            variant={parameters.certType === 'PEM' ? 'filled' : 'outline'}
-            color={parameters.certType === 'PEM' ? 'blue' : 'var(--text-muted)'}
-            onClick={() => onParameterChange('certType', 'PEM')}
+            variant={parameters.certType === "PEM" ? "filled" : "outline"}
+            color={parameters.certType === "PEM" ? "blue" : "var(--text-muted)"}
+            onClick={() => onParameterChange("certType", "PEM")}
             disabled={disabled}
-            style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
+            style={{ flex: 1, height: "auto", minHeight: "40px", fontSize: "11px" }}
           >
-            <div style={{ textAlign: 'center', lineHeight: '1.1', fontSize: '11px' }}>
-              PEM
-            </div>
+            <div style={{ textAlign: "center", lineHeight: "1.1", fontSize: "11px" }}>PEM</div>
           </Button>
           <Button
-            variant={parameters.certType === 'JKS' ? 'filled' : 'outline'}
-            color={parameters.certType === 'JKS' ? 'blue' : 'var(--text-muted)'}
-            onClick={() => onParameterChange('certType', 'JKS')}
+            variant={parameters.certType === "JKS" ? "filled" : "outline"}
+            color={parameters.certType === "JKS" ? "blue" : "var(--text-muted)"}
+            onClick={() => onParameterChange("certType", "JKS")}
             disabled={disabled}
-            style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
+            style={{ flex: 1, height: "auto", minHeight: "40px", fontSize: "11px" }}
           >
-            <div style={{ textAlign: 'center', lineHeight: '1.1', fontSize: '11px' }}>
-              JKS
-            </div>
+            <div style={{ textAlign: "center", lineHeight: "1.1", fontSize: "11px" }}>JKS</div>
           </Button>
         </div>
       </div>
@@ -67,4 +58,4 @@ const CertificateFormatSettings = ({ parameters, onParameterChange, disabled = f
   );
 };
 
-export default CertificateFormatSettings;
\ No newline at end of file
+export default CertificateFormatSettings;
diff --git a/frontend/src/core/components/tools/certSign/CertificateSelector.tsx b/frontend/src/core/components/tools/certSign/CertificateSelector.tsx
index ab35e7e3ef..705fda116a 100644
--- a/frontend/src/core/components/tools/certSign/CertificateSelector.tsx
+++ b/frontend/src/core/components/tools/certSign/CertificateSelector.tsx
@@ -1,11 +1,11 @@
-import { Stack, Radio, Divider, TextInput, Text, Group, Button } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { useEffect } from 'react';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
-import FileUploadButton from '@app/components/shared/FileUploadButton';
+import { Stack, Radio, Divider, TextInput, Text, Group, Button } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { useEffect } from "react";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
+import FileUploadButton from "@app/components/shared/FileUploadButton";
 
-export type CertificateType = 'USER_CERT' | 'SERVER' | 'UPLOAD';
-export type UploadFormat = 'PKCS12' | 'PFX' | 'PEM' | 'JKS';
+export type CertificateType = "USER_CERT" | "SERVER" | "UPLOAD";
+export type UploadFormat = "PKCS12" | "PFX" | "PEM" | "JKS";
 
 interface CertificateSelectorProps {
   certType: CertificateType;
@@ -48,8 +48,8 @@ export const CertificateSelector: React.FC<CertificateSelectorProps> = ({
 
   // If managed cert types are not available, reset to UPLOAD
   useEffect(() => {
-    if (!isServerPlan && (certType === 'USER_CERT' || certType === 'SERVER')) {
-      onCertTypeChange('UPLOAD');
+    if (!isServerPlan && (certType === "USER_CERT" || certType === "SERVER")) {
+      onCertTypeChange("UPLOAD");
     }
   }, [isServerPlan, certType, onCertTypeChange]);
 
@@ -59,22 +59,19 @@ export const CertificateSelector: React.FC<CertificateSelectorProps> = ({
     onPrivateKeyFileChange(null);
     onCertFileChange(null);
     onJksFileChange(null);
-    onPasswordChange('');
+    onPasswordChange("");
   };
 
   const showPassword =
-    ((uploadFormat === 'PKCS12' || uploadFormat === 'PFX') && p12File) ||
-    (uploadFormat === 'PEM' && privateKeyFile && certFile) ||
-    (uploadFormat === 'JKS' && jksFile);
+    ((uploadFormat === "PKCS12" || uploadFormat === "PFX") && p12File) ||
+    (uploadFormat === "PEM" && privateKeyFile && certFile) ||
+    (uploadFormat === "JKS" && jksFile);
 
   return (
     <Stack gap="md">
       {/* Managed certificate options — server plan only */}
       {isServerPlan && (
-        <Radio.Group
-          value={certType}
-          onChange={(val) => onCertTypeChange(val as CertificateType)}
-        >
+        <Radio.Group value={certType} onChange={(val) => onCertTypeChange(val as CertificateType)}>
           <Stack gap="sm">
             <Radio
               value="USER_CERT"
@@ -82,10 +79,10 @@ export const CertificateSelector: React.FC<CertificateSelectorProps> = ({
               label={
                 <Stack gap={1}>
                   <Text size="sm" fw={500}>
-                    {t('certSign.collab.signRequest.usePersonalCert', 'Personal Certificate')}
+                    {t("certSign.collab.signRequest.usePersonalCert", "Personal Certificate")}
                   </Text>
                   <Text size="xs" c="dimmed">
-                    {t('certSign.collab.signRequest.usePersonalCertDesc', 'Auto-generated for your account')}
+                    {t("certSign.collab.signRequest.usePersonalCertDesc", "Auto-generated for your account")}
                   </Text>
                 </Stack>
               }
@@ -96,10 +93,10 @@ export const CertificateSelector: React.FC<CertificateSelectorProps> = ({
               label={
                 <Stack gap={1}>
                   <Text size="sm" fw={500}>
-                    {t('certSign.collab.signRequest.useServerCert', 'Organization Certificate')}
+                    {t("certSign.collab.signRequest.useServerCert", "Organization Certificate")}
                   </Text>
                   <Text size="xs" c="dimmed">
-                    {t('certSign.collab.signRequest.useServerCertDesc', 'Shared organization certificate')}
+                    {t("certSign.collab.signRequest.useServerCertDesc", "Shared organization certificate")}
                   </Text>
                 </Stack>
               }
@@ -109,7 +106,7 @@ export const CertificateSelector: React.FC<CertificateSelectorProps> = ({
               disabled={disabled}
               label={
                 <Text size="sm" fw={500}>
-                  {t('certSign.collab.signRequest.uploadCert', 'Custom Certificate')}
+                  {t("certSign.collab.signRequest.uploadCert", "Custom Certificate")}
                 </Text>
               }
             />
@@ -118,22 +115,19 @@ export const CertificateSelector: React.FC<CertificateSelectorProps> = ({
       )}
 
       {/* Upload section */}
-      {certType === 'UPLOAD' && (
+      {certType === "UPLOAD" && (
         <Stack gap="sm">
           {isServerPlan && (
-            <Divider
-              label={t('certSign.collab.signRequest.uploadCert', 'Custom Certificate')}
-              labelPosition="left"
-            />
+            <Divider label={t("certSign.collab.signRequest.uploadCert", "Custom Certificate")} labelPosition="left" />
           )}
 
           {/* Format picker */}
           <Group gap="xs">
-            {(['PKCS12', 'PFX', 'PEM', 'JKS'] as UploadFormat[]).map((fmt) => (
+            {(["PKCS12", "PFX", "PEM", "JKS"] as UploadFormat[]).map((fmt) => (
               <Button
                 key={fmt}
                 size="xs"
-                variant={uploadFormat === fmt ? 'filled' : 'light'}
+                variant={uploadFormat === fmt ? "filled" : "light"}
                 onClick={() => handleFormatChange(fmt)}
                 disabled={disabled}
               >
@@ -143,29 +137,29 @@ export const CertificateSelector: React.FC<CertificateSelectorProps> = ({
           </Group>
 
           {/* PKCS12 / PFX */}
-          {(uploadFormat === 'PKCS12' || uploadFormat === 'PFX') && (
+          {(uploadFormat === "PKCS12" || uploadFormat === "PFX") && (
             <FileUploadButton
               file={p12File ?? undefined}
               onChange={(file) => onP12FileChange(file || null)}
               accept=".p12,.pfx"
               disabled={disabled}
               placeholder={
-                uploadFormat === 'PFX'
-                  ? t('certSign.choosePfxFile', 'Choose PFX File')
-                  : t('certSign.chooseP12File', 'Choose PKCS12 File')
+                uploadFormat === "PFX"
+                  ? t("certSign.choosePfxFile", "Choose PFX File")
+                  : t("certSign.chooseP12File", "Choose PKCS12 File")
               }
             />
           )}
 
           {/* PEM */}
-          {uploadFormat === 'PEM' && (
+          {uploadFormat === "PEM" && (
             <Stack gap="xs">
               <FileUploadButton
                 file={privateKeyFile ?? undefined}
                 onChange={(file) => onPrivateKeyFileChange(file || null)}
                 accept=".pem,.der,.key"
                 disabled={disabled}
-                placeholder={t('certSign.choosePrivateKey', 'Choose Private Key File')}
+                placeholder={t("certSign.choosePrivateKey", "Choose Private Key File")}
               />
               {privateKeyFile && (
                 <FileUploadButton
@@ -173,29 +167,29 @@ export const CertificateSelector: React.FC<CertificateSelectorProps> = ({
                   onChange={(file) => onCertFileChange(file || null)}
                   accept=".pem,.der,.crt,.cer"
                   disabled={disabled}
-                  placeholder={t('certSign.chooseCertificate', 'Choose Certificate File')}
+                  placeholder={t("certSign.chooseCertificate", "Choose Certificate File")}
                 />
               )}
             </Stack>
           )}
 
           {/* JKS */}
-          {uploadFormat === 'JKS' && (
+          {uploadFormat === "JKS" && (
             <FileUploadButton
               file={jksFile ?? undefined}
               onChange={(file) => onJksFileChange(file || null)}
               accept=".jks,.keystore"
               disabled={disabled}
-              placeholder={t('certSign.chooseJksFile', 'Choose JKS File')}
+              placeholder={t("certSign.chooseJksFile", "Choose JKS File")}
             />
           )}
 
           {/* Password */}
           {showPassword && (
             <TextInput
-              label={t('certSign.collab.signRequest.password', 'Certificate Password')}
+              label={t("certSign.collab.signRequest.password", "Certificate Password")}
               type="password"
-              placeholder={t('certSign.passwordOptional', 'Leave empty if no password')}
+              placeholder={t("certSign.passwordOptional", "Leave empty if no password")}
               value={password}
               onChange={(e) => onPasswordChange(e.target.value)}
               disabled={disabled}
diff --git a/frontend/src/core/components/tools/certSign/CertificateTypeSettings.tsx b/frontend/src/core/components/tools/certSign/CertificateTypeSettings.tsx
index 4cf85c66cd..3c9c7848d7 100644
--- a/frontend/src/core/components/tools/certSign/CertificateTypeSettings.tsx
+++ b/frontend/src/core/components/tools/certSign/CertificateTypeSettings.tsx
@@ -13,45 +13,41 @@ const CertificateTypeSettings = ({ parameters, onParameterChange, disabled = fal
   const isServerCertificateEnabled = config?.serverCertificateEnabled ?? false;
 
   // Reset to MANUAL if AUTO is selected but feature is disabled
-  if (parameters.signMode === 'AUTO' && !isServerCertificateEnabled) {
-    onParameterChange('signMode', 'MANUAL');
+  if (parameters.signMode === "AUTO" && !isServerCertificateEnabled) {
+    onParameterChange("signMode", "MANUAL");
   }
 
   return (
     <Stack gap="md">
-      <div style={{ display: 'flex', gap: '4px' }}>
+      <div style={{ display: "flex", gap: "4px" }}>
         <Button
-          variant={parameters.signMode === 'MANUAL' ? 'filled' : 'outline'}
-          color={parameters.signMode === 'MANUAL' ? 'blue' : 'var(--text-muted)'}
+          variant={parameters.signMode === "MANUAL" ? "filled" : "outline"}
+          color={parameters.signMode === "MANUAL" ? "blue" : "var(--text-muted)"}
           onClick={() => {
-            onParameterChange('signMode', 'MANUAL');
+            onParameterChange("signMode", "MANUAL");
             // Reset cert type when switching to manual
-            if (parameters.signMode === 'AUTO') {
-              onParameterChange('certType', '');
+            if (parameters.signMode === "AUTO") {
+              onParameterChange("certType", "");
             }
           }}
           disabled={disabled}
-          style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
+          style={{ flex: 1, height: "auto", minHeight: "40px", fontSize: "11px" }}
         >
-          <div style={{ textAlign: 'center', lineHeight: '1.1', fontSize: '11px' }}>
-            Manual
-          </div>
+          <div style={{ textAlign: "center", lineHeight: "1.1", fontSize: "11px" }}>Manual</div>
         </Button>
         {isServerCertificateEnabled && (
           <Button
-            variant={parameters.signMode === 'AUTO' ? 'filled' : 'outline'}
-            color={parameters.signMode === 'AUTO' ? 'green' : 'var(--text-muted)'}
+            variant={parameters.signMode === "AUTO" ? "filled" : "outline"}
+            color={parameters.signMode === "AUTO" ? "green" : "var(--text-muted)"}
             onClick={() => {
-              onParameterChange('signMode', 'AUTO');
+              onParameterChange("signMode", "AUTO");
               // Clear cert type and files when switching to auto
-              onParameterChange('certType', '');
+              onParameterChange("certType", "");
             }}
             disabled={disabled}
-            style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
+            style={{ flex: 1, height: "auto", minHeight: "40px", fontSize: "11px" }}
           >
-            <div style={{ textAlign: 'center', lineHeight: '1.1', fontSize: '11px' }}>
-              Auto (server)
-            </div>
+            <div style={{ textAlign: "center", lineHeight: "1.1", fontSize: "11px" }}>Auto (server)</div>
           </Button>
         )}
       </div>
diff --git a/frontend/src/core/components/tools/certSign/SessionDetailWorkbenchView.tsx b/frontend/src/core/components/tools/certSign/SessionDetailWorkbenchView.tsx
index afb4c28a77..47f121f781 100644
--- a/frontend/src/core/components/tools/certSign/SessionDetailWorkbenchView.tsx
+++ b/frontend/src/core/components/tools/certSign/SessionDetailWorkbenchView.tsx
@@ -1,20 +1,24 @@
-import { useState, useEffect, useMemo, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Stack, Paper, Text, Group, Badge, Button, Divider, Modal, SegmentedControl } from '@mantine/core';
-import { useIsPhone } from '@app/hooks/useIsMobile';
-import { alert } from '@app/components/toast';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import DeleteIcon from '@mui/icons-material/Delete';
-import ZoomInIcon from '@mui/icons-material/ZoomIn';
-import ZoomOutIcon from '@mui/icons-material/ZoomOut';
-import ZoomOutMapIcon from '@mui/icons-material/ZoomOutMap';
-import { Z_INDEX_FULLSCREEN_SURFACE } from '@app/styles/zIndex';
-import { SessionDetail } from '@app/types/signingSession';
-import { LocalEmbedPDFWithAnnotations, SignaturePreview, AnnotationAPI } from '@app/components/viewer/LocalEmbedPDFWithAnnotations';
-import { getFileColor } from '@app/components/pageEditor/fileColors';
-import { ParticipantListPanel } from '@app/components/tools/certSign/panels/ParticipantListPanel';
-import { SessionActionsPanel } from '@app/components/tools/certSign/panels/SessionActionsPanel';
-import { AddParticipantsFlow } from '@app/components/tools/certSign/modals/AddParticipantsFlow';
+import { useState, useEffect, useMemo, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { Stack, Paper, Text, Group, Badge, Button, Divider, Modal, SegmentedControl } from "@mantine/core";
+import { useIsPhone } from "@app/hooks/useIsMobile";
+import { alert } from "@app/components/toast";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import DeleteIcon from "@mui/icons-material/Delete";
+import ZoomInIcon from "@mui/icons-material/ZoomIn";
+import ZoomOutIcon from "@mui/icons-material/ZoomOut";
+import ZoomOutMapIcon from "@mui/icons-material/ZoomOutMap";
+import { Z_INDEX_FULLSCREEN_SURFACE } from "@app/styles/zIndex";
+import { SessionDetail } from "@app/types/signingSession";
+import {
+  LocalEmbedPDFWithAnnotations,
+  SignaturePreview,
+  AnnotationAPI,
+} from "@app/components/viewer/LocalEmbedPDFWithAnnotations";
+import { getFileColor } from "@app/components/pageEditor/fileColors";
+import { ParticipantListPanel } from "@app/components/tools/certSign/panels/ParticipantListPanel";
+import { SessionActionsPanel } from "@app/components/tools/certSign/panels/SessionActionsPanel";
+import { AddParticipantsFlow } from "@app/components/tools/certSign/modals/AddParticipantsFlow";
 
 export interface SessionDetailWorkbenchData {
   session: SessionDetail;
@@ -35,7 +39,7 @@ interface SessionDetailWorkbenchViewProps {
 const SessionDetailWorkbenchView = ({ data }: SessionDetailWorkbenchViewProps) => {
   const { t } = useTranslation();
   const isPhone = useIsPhone();
-  const [mobilePanel, setMobilePanel] = useState<'participants' | 'pdf' | 'actions'>('pdf');
+  const [mobilePanel, setMobilePanel] = useState<"participants" | "pdf" | "actions">("pdf");
   const {
     session,
     pdfFile,
@@ -71,15 +75,15 @@ const SessionDetailWorkbenchView = ({ data }: SessionDetailWorkbenchViewProps) =
     try {
       await onAddParticipants(userIds, defaultReason);
       alert({
-        alertType: 'success',
-        title: t('success'),
-        body: t('certSign.collab.sessionDetail.participantsAdded', 'Participants added successfully'),
+        alertType: "success",
+        title: t("success"),
+        body: t("certSign.collab.sessionDetail.participantsAdded", "Participants added successfully"),
       });
     } catch (_error) {
       alert({
-        alertType: 'error',
-        title: t('common.error'),
-        body: t('certSign.collab.sessionDetail.addParticipantsError', 'Failed to add participants'),
+        alertType: "error",
+        title: t("common.error"),
+        body: t("certSign.collab.sessionDetail.addParticipantsError", "Failed to add participants"),
       });
       throw _error; // Re-throw so modal can handle loading state
     }
@@ -89,15 +93,15 @@ const SessionDetailWorkbenchView = ({ data }: SessionDetailWorkbenchViewProps) =
     try {
       await onRemoveParticipant(participantId);
       alert({
-        alertType: 'success',
-        title: t('success'),
-        body: t('certSign.collab.sessionDetail.participantRemoved', 'Participant removed'),
+        alertType: "success",
+        title: t("success"),
+        body: t("certSign.collab.sessionDetail.participantRemoved", "Participant removed"),
       });
     } catch (_error) {
       alert({
-        alertType: 'error',
-        title: t('common.error'),
-        body: t('certSign.collab.sessionDetail.removeParticipantError', 'Failed to remove participant'),
+        alertType: "error",
+        title: t("common.error"),
+        body: t("certSign.collab.sessionDetail.removeParticipantError", "Failed to remove participant"),
       });
     }
   };
@@ -108,9 +112,9 @@ const SessionDetailWorkbenchView = ({ data }: SessionDetailWorkbenchViewProps) =
       await onFinalize();
     } catch (_error) {
       alert({
-        alertType: 'error',
-        title: t('common.error'),
-        body: t('certSign.collab.sessionDetail.finalizeError', 'Failed to finalize session'),
+        alertType: "error",
+        title: t("common.error"),
+        body: t("certSign.collab.sessionDetail.finalizeError", "Failed to finalize session"),
       });
     } finally {
       setFinalizing(false);
@@ -123,15 +127,15 @@ const SessionDetailWorkbenchView = ({ data }: SessionDetailWorkbenchViewProps) =
       await onDelete();
       setDeleteModalOpen(false);
       alert({
-        alertType: 'success',
-        title: t('success'),
-        body: t('certSign.collab.sessionDetail.deleted', 'Session deleted'),
+        alertType: "success",
+        title: t("success"),
+        body: t("certSign.collab.sessionDetail.deleted", "Session deleted"),
       });
     } catch (_error) {
       alert({
-        alertType: 'error',
-        title: t('common.error'),
-        body: t('certSign.collab.sessionDetail.deleteError', 'Failed to delete session'),
+        alertType: "error",
+        title: t("common.error"),
+        body: t("certSign.collab.sessionDetail.deleteError", "Failed to delete session"),
       });
       setDeleting(false);
     }
@@ -143,9 +147,9 @@ const SessionDetailWorkbenchView = ({ data }: SessionDetailWorkbenchViewProps) =
       await onLoadSignedPdf();
     } catch (_error) {
       alert({
-        alertType: 'error',
-        title: t('common.error'),
-        body: t('certSign.collab.sessionDetail.loadPdfError', 'Failed to load signed PDF'),
+        alertType: "error",
+        title: t("common.error"),
+        body: t("certSign.collab.sessionDetail.loadPdfError", "Failed to load signed PDF"),
       });
     } finally {
       setLoadingPdf(false);
@@ -169,7 +173,7 @@ const SessionDetailWorkbenchView = ({ data }: SessionDetailWorkbenchViewProps) =
             width: wetSig.width,
             height: wetSig.height,
             signatureData: wetSig.data,
-            signatureType: 'image' as const,
+            signatureType: "image" as const,
             color,
             participantName,
           });
@@ -181,30 +185,35 @@ const SessionDetailWorkbenchView = ({ data }: SessionDetailWorkbenchViewProps) =
   }, [session.participants]);
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
+    <div style={{ display: "flex", flexDirection: "column", height: "100%", overflow: "hidden" }}>
       {/* Top Control Bar */}
       <Paper p="sm" shadow="sm" style={{ flexShrink: 0, zIndex: Z_INDEX_FULLSCREEN_SURFACE }}>
         <Group justify="space-between">
           <Group gap="md">
             <Button leftSection={<ArrowBackIcon />} variant="subtle" onClick={onBack} size="sm">
-              {t('certSign.collab.sessionDetail.backToList', 'Back to Sessions')}
+              {t("certSign.collab.sessionDetail.backToList", "Back to Sessions")}
             </Button>
             <Divider orientation="vertical" />
             <Stack gap={2}>
               <Group gap="sm">
-                <Text size="sm" fw={600} style={{ maxWidth: isPhone ? '140px' : undefined }} truncate={isPhone ? 'end' : undefined}>
+                <Text
+                  size="sm"
+                  fw={600}
+                  style={{ maxWidth: isPhone ? "140px" : undefined }}
+                  truncate={isPhone ? "end" : undefined}
+                >
                   {session.documentName}
                 </Text>
-                <Badge size="sm" color={session.finalized ? 'green' : 'blue'} variant="light">
+                <Badge size="sm" color={session.finalized ? "green" : "blue"} variant="light">
                   {session.finalized
-                    ? t('certSign.collab.sessionList.finalized', 'Finalized')
-                    : t('certSign.collab.sessionList.active', 'Active')}
+                    ? t("certSign.collab.sessionList.finalized", "Finalized")
+                    : t("certSign.collab.sessionList.active", "Active")}
                 </Badge>
               </Group>
               {!isPhone && (
                 <Text size="xs" c="dimmed">
-                  {session.ownerEmail && `${t('certSign.collab.sessionDetail.owner', 'Owner')}: ${session.ownerEmail}`}
-                  {session.ownerEmail && ' • '}
+                  {session.ownerEmail && `${t("certSign.collab.sessionDetail.owner", "Owner")}: ${session.ownerEmail}`}
+                  {session.ownerEmail && " • "}
                   {new Date(session.createdAt).toLocaleDateString()}
                 </Text>
               )}
@@ -219,7 +228,7 @@ const SessionDetailWorkbenchView = ({ data }: SessionDetailWorkbenchViewProps) =
                   variant="default"
                   size="sm"
                   onClick={() => annotationApiRef.current?.zoomOut()}
-                  title={t('viewer.zoomOut', 'Zoom out')}
+                  title={t("viewer.zoomOut", "Zoom out")}
                 >
                   <ZoomOutIcon fontSize="small" />
                 </Button>
@@ -227,7 +236,7 @@ const SessionDetailWorkbenchView = ({ data }: SessionDetailWorkbenchViewProps) =
                   variant="default"
                   size="sm"
                   onClick={() => annotationApiRef.current?.resetZoom()}
-                  title={t('viewer.resetZoom', 'Reset zoom')}
+                  title={t("viewer.resetZoom", "Reset zoom")}
                 >
                   <ZoomOutMapIcon fontSize="small" />
                 </Button>
@@ -235,7 +244,7 @@ const SessionDetailWorkbenchView = ({ data }: SessionDetailWorkbenchViewProps) =
                   variant="default"
                   size="sm"
                   onClick={() => annotationApiRef.current?.zoomIn()}
-                  title={t('viewer.zoomIn', 'Zoom in')}
+                  title={t("viewer.zoomIn", "Zoom in")}
                 >
                   <ZoomInIcon fontSize="small" />
                 </Button>
@@ -251,7 +260,7 @@ const SessionDetailWorkbenchView = ({ data }: SessionDetailWorkbenchViewProps) =
                 onClick={() => setDeleteModalOpen(true)}
                 size="sm"
               >
-                {t('certSign.collab.sessionDetail.deleteSession', 'Delete Session')}
+                {t("certSign.collab.sessionDetail.deleteSession", "Delete Session")}
               </Button>
             )}
           </Group>
@@ -261,16 +270,16 @@ const SessionDetailWorkbenchView = ({ data }: SessionDetailWorkbenchViewProps) =
       {/* Main Content Area */}
       {isPhone ? (
         // Phone: single-panel view — all three panels stay mounted (CSS display:none preserves state)
-        <div style={{ position: 'relative', flex: 1, overflow: 'hidden' }}>
+        <div style={{ position: "relative", flex: 1, overflow: "hidden" }}>
           <Paper
             p="md"
             shadow="sm"
             style={{
-              display: mobilePanel === 'participants' ? 'flex' : 'none',
-              flexDirection: 'column',
-              position: 'absolute',
+              display: mobilePanel === "participants" ? "flex" : "none",
+              flexDirection: "column",
+              position: "absolute",
               inset: 0,
-              overflowY: 'auto',
+              overflowY: "auto",
             }}
           >
             <ParticipantListPanel
@@ -282,8 +291,8 @@ const SessionDetailWorkbenchView = ({ data }: SessionDetailWorkbenchViewProps) =
 
           <div
             style={{
-              display: mobilePanel === 'pdf' ? 'flex' : 'none',
-              position: 'absolute',
+              display: mobilePanel === "pdf" ? "flex" : "none",
+              position: "absolute",
               inset: 0,
             }}
           >
@@ -299,11 +308,11 @@ const SessionDetailWorkbenchView = ({ data }: SessionDetailWorkbenchViewProps) =
             p="md"
             shadow="sm"
             style={{
-              display: mobilePanel === 'actions' ? 'flex' : 'none',
-              flexDirection: 'column',
-              position: 'absolute',
+              display: mobilePanel === "actions" ? "flex" : "none",
+              flexDirection: "column",
+              position: "absolute",
               inset: 0,
-              overflowY: 'auto',
+              overflowY: "auto",
             }}
           >
             <SessionActionsPanel
@@ -318,16 +327,16 @@ const SessionDetailWorkbenchView = ({ data }: SessionDetailWorkbenchViewProps) =
         </div>
       ) : (
         // Desktop/tablet: three-column flex layout
-        <div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
+        <div style={{ display: "flex", flex: 1, overflow: "hidden" }}>
           {/* Left Panel - Participants */}
           <Paper
             p="md"
             shadow="sm"
             style={{
-              width: '280px',
+              width: "280px",
               flexShrink: 0,
-              overflowY: 'auto',
-              borderRight: '1px solid var(--mantine-color-gray-3)',
+              overflowY: "auto",
+              borderRight: "1px solid var(--mantine-color-gray-3)",
             }}
           >
             <ParticipantListPanel
@@ -338,7 +347,7 @@ const SessionDetailWorkbenchView = ({ data }: SessionDetailWorkbenchViewProps) =
           </Paper>
 
           {/* Center - PDF Viewer */}
-          <div style={{ flex: 1, overflow: 'hidden', position: 'relative' }}>
+          <div style={{ flex: 1, overflow: "hidden", position: "relative" }}>
             <LocalEmbedPDFWithAnnotations
               ref={annotationApiRef}
               file={pdfFile ?? undefined}
@@ -352,10 +361,10 @@ const SessionDetailWorkbenchView = ({ data }: SessionDetailWorkbenchViewProps) =
             p="md"
             shadow="sm"
             style={{
-              width: '320px',
+              width: "320px",
               flexShrink: 0,
-              overflowY: 'auto',
-              borderLeft: '1px solid var(--mantine-color-gray-3)',
+              overflowY: "auto",
+              borderLeft: "1px solid var(--mantine-color-gray-3)",
             }}
           >
             <SessionActionsPanel
@@ -372,15 +381,15 @@ const SessionDetailWorkbenchView = ({ data }: SessionDetailWorkbenchViewProps) =
 
       {/* Phone bottom navigation */}
       {isPhone && (
-        <Paper shadow="sm" style={{ flexShrink: 0, borderTop: '1px solid var(--mantine-color-gray-3)' }}>
+        <Paper shadow="sm" style={{ flexShrink: 0, borderTop: "1px solid var(--mantine-color-gray-3)" }}>
           <SegmentedControl
             fullWidth
             value={mobilePanel}
             onChange={(v) => setMobilePanel(v as typeof mobilePanel)}
             data={[
-              { value: 'participants', label: t('certSign.mobile.panelPeople', 'People') },
-              { value: 'pdf', label: t('certSign.mobile.panelDocument', 'Document') },
-              { value: 'actions', label: t('certSign.mobile.panelActions', 'Actions') },
+              { value: "participants", label: t("certSign.mobile.panelPeople", "People") },
+              { value: "pdf", label: t("certSign.mobile.panelDocument", "Document") },
+              { value: "actions", label: t("certSign.mobile.panelActions", "Actions") },
             ]}
           />
         </Paper>
@@ -397,16 +406,16 @@ const SessionDetailWorkbenchView = ({ data }: SessionDetailWorkbenchViewProps) =
       <Modal
         opened={deleteModalOpen}
         onClose={() => setDeleteModalOpen(false)}
-        title={t('certSign.collab.sessionDetail.deleteSession', 'Delete Session')}
+        title={t("certSign.collab.sessionDetail.deleteSession", "Delete Session")}
       >
         <Stack gap="md">
-          <Text>{t('certSign.collab.sessionDetail.deleteConfirm', 'Are you sure? This cannot be undone.')}</Text>
+          <Text>{t("certSign.collab.sessionDetail.deleteConfirm", "Are you sure? This cannot be undone.")}</Text>
           <Group justify="flex-end">
             <Button variant="subtle" onClick={() => setDeleteModalOpen(false)}>
-              {t('cancel', 'Cancel')}
+              {t("cancel", "Cancel")}
             </Button>
             <Button color="red" onClick={handleDelete} loading={deleting}>
-              {t('delete', 'Delete')}
+              {t("delete", "Delete")}
             </Button>
           </Group>
         </Stack>
diff --git a/frontend/src/core/components/tools/certSign/SignControlsStrip.module.css b/frontend/src/core/components/tools/certSign/SignControlsStrip.module.css
index 99f2191f6c..a00a472f34 100644
--- a/frontend/src/core/components/tools/certSign/SignControlsStrip.module.css
+++ b/frontend/src/core/components/tools/certSign/SignControlsStrip.module.css
@@ -328,7 +328,9 @@
   align-items: center;
   justify-content: center;
   cursor: pointer;
-  transition: background-color 0.15s ease, color 0.15s ease;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
 }
 
 .zoomButton:hover {
@@ -366,7 +368,9 @@
   border: none;
   background: transparent;
   color: var(--text-secondary);
-  transition: background-color 0.15s ease, color 0.15s ease;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
 }
 
 .iconButton.iconTextButton {
diff --git a/frontend/src/core/components/tools/certSign/SignControlsStrip.tsx b/frontend/src/core/components/tools/certSign/SignControlsStrip.tsx
index 62e61baa9e..b28576f310 100644
--- a/frontend/src/core/components/tools/certSign/SignControlsStrip.tsx
+++ b/frontend/src/core/components/tools/certSign/SignControlsStrip.tsx
@@ -1,22 +1,22 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { ActionIcon, Box, Button, Group, Menu, Modal, SegmentedControl, Stack, Text } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import DrawIcon from '@mui/icons-material/Draw';
-import ImageIcon from '@mui/icons-material/Image';
-import OpenWithIcon from '@mui/icons-material/OpenWith';
-import TextFieldsIcon from '@mui/icons-material/TextFields';
-import CloseIcon from '@mui/icons-material/Close';
-import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
-import CheckIcon from '@mui/icons-material/Check';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { ActionIcon, Box, Button, Group, Menu, Modal, SegmentedControl, Stack, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import DrawIcon from "@mui/icons-material/Draw";
+import ImageIcon from "@mui/icons-material/Image";
+import OpenWithIcon from "@mui/icons-material/OpenWith";
+import TextFieldsIcon from "@mui/icons-material/TextFields";
+import CloseIcon from "@mui/icons-material/Close";
+import DeleteOutlineIcon from "@mui/icons-material/DeleteOutline";
+import CheckIcon from "@mui/icons-material/Check";
 
-import { DEFAULT_PARAMETERS, type SignParameters } from '@app/hooks/tools/sign/useSignParameters';
-import { useSavedSignatures, type SavedSignature } from '@app/hooks/tools/sign/useSavedSignatures';
-import { DrawingCanvas } from '@app/components/annotation/shared/DrawingCanvas';
-import { ColorPicker } from '@app/components/annotation/shared/ColorPicker';
-import { TextInputWithFont } from '@app/components/annotation/shared/TextInputWithFont';
-import { buildSignaturePreview } from '@app/utils/signaturePreview';
+import { DEFAULT_PARAMETERS, type SignParameters } from "@app/hooks/tools/sign/useSignParameters";
+import { useSavedSignatures, type SavedSignature } from "@app/hooks/tools/sign/useSavedSignatures";
+import { DrawingCanvas } from "@app/components/annotation/shared/DrawingCanvas";
+import { ColorPicker } from "@app/components/annotation/shared/ColorPicker";
+import { TextInputWithFont } from "@app/components/annotation/shared/TextInputWithFont";
+import { buildSignaturePreview } from "@app/utils/signaturePreview";
 
-import styles from '@app/components/tools/certSign/SignControlsStrip.module.css';
+import styles from "@app/components/tools/certSign/SignControlsStrip.module.css";
 
 interface SignControlsStripProps {
   visible: boolean;
@@ -42,43 +42,37 @@ export default function SignControlsStrip({
   onDeleteSelected,
 }: SignControlsStripProps) {
   const { t } = useTranslation();
-  const {
-    savedSignatures,
-    addSignature,
-    removeSignature,
-    isAtCapacity,
-    byTypeCounts,
-  } = useSavedSignatures();
+  const { savedSignatures, addSignature, removeSignature, isAtCapacity, byTypeCounts } = useSavedSignatures();
 
-  const [createSignatureType, setCreateSignatureType] = useState<'canvas' | 'text' | 'image' | null>(null);
+  const [createSignatureType, setCreateSignatureType] = useState<"canvas" | "text" | "image" | null>(null);
   const [canvasColorPickerOpen, setCanvasColorPickerOpen] = useState(false);
-  const [canvasColor, setCanvasColor] = useState('#000000');
+  const [canvasColor, setCanvasColor] = useState("#000000");
   const [canvasPenSize, setCanvasPenSize] = useState(2);
-  const [canvasPenSizeInput, setCanvasPenSizeInput] = useState('2');
+  const [canvasPenSizeInput, setCanvasPenSizeInput] = useState("2");
   const latestCanvasDataRef = useRef<string | undefined>(undefined);
 
   const fileInputRef = useRef<HTMLInputElement | null>(null);
-  const [textSignerName, setTextSignerName] = useState(DEFAULT_PARAMETERS.signerName ?? '');
-  const [textFontFamily, setTextFontFamily] = useState(DEFAULT_PARAMETERS.fontFamily ?? 'Helvetica');
+  const [textSignerName, setTextSignerName] = useState(DEFAULT_PARAMETERS.signerName ?? "");
+  const [textFontFamily, setTextFontFamily] = useState(DEFAULT_PARAMETERS.fontFamily ?? "Helvetica");
   const [textFontSize, setTextFontSize] = useState(DEFAULT_PARAMETERS.fontSize ?? 16);
-  const [textColor, setTextColor] = useState(DEFAULT_PARAMETERS.textColor ?? '#000000');
+  const [textColor, setTextColor] = useState(DEFAULT_PARAMETERS.textColor ?? "#000000");
 
   const renderSavedSignaturePreview = useCallback(
     (sig: SavedSignature) => {
-      if (sig.type === 'text') {
+      if (sig.type === "text") {
         return (
           <Box
             component="div"
             style={{
               width: 72,
               height: 28,
-              backgroundColor: '#ffffff',
+              backgroundColor: "#ffffff",
               borderRadius: 8,
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              padding: '0 8px',
-              overflow: 'hidden',
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              padding: "0 8px",
+              overflow: "hidden",
             }}
           >
             <Text
@@ -86,10 +80,10 @@ export default function SignControlsStrip({
               style={{
                 fontFamily: sig.fontFamily,
                 color: sig.textColor,
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                maxWidth: '100%',
+                whiteSpace: "nowrap",
+                overflow: "hidden",
+                textOverflow: "ellipsis",
+                maxWidth: "100%",
               }}
             >
               {sig.signerName}
@@ -104,29 +98,29 @@ export default function SignControlsStrip({
           style={{
             width: 72,
             height: 28,
-            backgroundColor: '#ffffff',
+            backgroundColor: "#ffffff",
             borderRadius: 8,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            padding: '2px 6px',
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: "2px 6px",
           }}
         >
           <Box
             component="img"
             src={sig.dataUrl}
-            alt={sig.label || t('certSign.collab.signRequest.saved.defaultLabel', 'Signature')}
+            alt={sig.label || t("certSign.collab.signRequest.saved.defaultLabel", "Signature")}
             style={{
-              maxWidth: '100%',
-              maxHeight: '100%',
-              objectFit: 'contain',
-              display: 'block',
+              maxWidth: "100%",
+              maxHeight: "100%",
+              objectFit: "contain",
+              display: "block",
             }}
           />
         </Box>
       );
     },
-    [t]
+    [t],
   );
 
   const sortedSavedSignatures = useMemo(() => {
@@ -142,10 +136,10 @@ export default function SignControlsStrip({
 
     hasAutoSelected.current = true;
     const lastSig = sortedSavedSignatures[0];
-    if (lastSig.type === 'text') {
+    if (lastSig.type === "text") {
       onSignatureSelected({
         ...DEFAULT_PARAMETERS,
-        signatureType: 'text',
+        signatureType: "text",
         signerName: lastSig.signerName,
         fontFamily: lastSig.fontFamily,
         fontSize: lastSig.fontSize,
@@ -171,14 +165,14 @@ export default function SignControlsStrip({
       onSignatureSelected(nextConfig);
       onPlacementModeChange(true);
     },
-    [onSignatureSelected, onPlacementModeChange]
+    [onSignatureSelected, onPlacementModeChange],
   );
 
   const applySavedSignature = useCallback(
     (sig: SavedSignature) => {
-      if (sig.type === 'text') {
+      if (sig.type === "text") {
         beginPlacement({
-          signatureType: 'text',
+          signatureType: "text",
           signerName: sig.signerName,
           fontFamily: sig.fontFamily,
           fontSize: sig.fontSize,
@@ -189,7 +183,7 @@ export default function SignControlsStrip({
       }
       beginPlacement({ signatureType: sig.type, signatureData: sig.dataUrl });
     },
-    [beginPlacement]
+    [beginPlacement],
   );
 
   const pausePlacement = useCallback(() => {
@@ -200,19 +194,19 @@ export default function SignControlsStrip({
     onPlacementModeChange(true);
   }, [onPlacementModeChange]);
 
-  const handleCreateSignature = useCallback((type: 'canvas' | 'text' | 'image') => {
-    if (type === 'image') {
+  const handleCreateSignature = useCallback((type: "canvas" | "text" | "image") => {
+    if (type === "image") {
       fileInputRef.current?.click();
       return;
     }
     setCreateSignatureType(type);
-    if (type === 'canvas') {
-      setCanvasColor('#000000');
+    if (type === "canvas") {
+      setCanvasColor("#000000");
       setCanvasPenSize(2);
-      setCanvasPenSizeInput('2');
+      setCanvasPenSizeInput("2");
       latestCanvasDataRef.current = undefined;
-    } else if (type === 'text') {
-      setTextSignerName('');
+    } else if (type === "text") {
+      setTextSignerName("");
     }
   }, []);
 
@@ -225,7 +219,7 @@ export default function SignControlsStrip({
     if (!signerName || isAtCapacity) return null;
 
     const preview = await buildSignaturePreview({
-      signatureType: 'text',
+      signatureType: "text",
       signerName,
       fontFamily: textFontFamily,
       fontSize: textFontSize,
@@ -234,10 +228,10 @@ export default function SignControlsStrip({
     if (!preview?.dataUrl) return null;
 
     const nextIndex = (byTypeCounts?.text ?? 0) + 1;
-    const baseLabel = t('certSign.collab.signRequest.saved.defaultTextLabel', 'Typed signature');
+    const baseLabel = t("certSign.collab.signRequest.saved.defaultTextLabel", "Typed signature");
     await addSignature(
       {
-        type: 'text',
+        type: "text",
         dataUrl: preview.dataUrl,
         signerName,
         fontFamily: textFontFamily,
@@ -245,7 +239,7 @@ export default function SignControlsStrip({
         textColor,
       },
       `${baseLabel} ${nextIndex}`,
-      'localStorage'
+      "localStorage",
     );
     return {
       signerName,
@@ -254,25 +248,16 @@ export default function SignControlsStrip({
       textColor,
       dataUrl: preview.dataUrl,
     };
-  }, [
-    addSignature,
-    byTypeCounts?.text,
-    isAtCapacity,
-    t,
-    textColor,
-    textFontFamily,
-    textFontSize,
-    textSignerName,
-  ]);
+  }, [addSignature, byTypeCounts?.text, isAtCapacity, t, textColor, textFontFamily, textFontSize, textSignerName]);
 
   const saveImageToLibrary = useCallback(
     async (dataUrl: string) => {
       if (!dataUrl || isAtCapacity) return;
       const nextIndex = (byTypeCounts?.image ?? 0) + 1;
-      const baseLabel = t('certSign.collab.signRequest.saved.defaultImageLabel', 'Uploaded signature');
-      await addSignature({ type: 'image', dataUrl }, `${baseLabel} ${nextIndex}`, 'localStorage');
+      const baseLabel = t("certSign.collab.signRequest.saved.defaultImageLabel", "Uploaded signature");
+      await addSignature({ type: "image", dataUrl }, `${baseLabel} ${nextIndex}`, "localStorage");
     },
-    [addSignature, byTypeCounts?.image, isAtCapacity, t]
+    [addSignature, byTypeCounts?.image, isAtCapacity, t],
   );
 
   const readFileAsDataUrl = useCallback(async (file: File): Promise<string> => {
@@ -280,10 +265,10 @@ export default function SignControlsStrip({
       const reader = new FileReader();
       reader.onload = () => {
         const value = reader.result;
-        if (typeof value === 'string') resolve(value);
-        else reject(new Error('Failed to read image as data URL'));
+        if (typeof value === "string") resolve(value);
+        else reject(new Error("Failed to read image as data URL"));
       };
-      reader.onerror = () => reject(reader.error ?? new Error('Failed to read file'));
+      reader.onerror = () => reject(reader.error ?? new Error("Failed to read file"));
       reader.readAsDataURL(file);
     });
   }, []);
@@ -292,10 +277,10 @@ export default function SignControlsStrip({
     async (dataUrl: string) => {
       if (!dataUrl || isAtCapacity) return;
       const nextIndex = (byTypeCounts?.canvas ?? 0) + 1;
-      const baseLabel = t('certSign.collab.signRequest.saved.defaultCanvasLabel', 'Drawing signature');
-      await addSignature({ type: 'canvas', dataUrl }, `${baseLabel} ${nextIndex}`, 'localStorage');
+      const baseLabel = t("certSign.collab.signRequest.saved.defaultCanvasLabel", "Drawing signature");
+      await addSignature({ type: "canvas", dataUrl }, `${baseLabel} ${nextIndex}`, "localStorage");
     },
-    [addSignature, byTypeCounts?.canvas, isAtCapacity, t]
+    [addSignature, byTypeCounts?.canvas, isAtCapacity, t],
   );
 
   useEffect(() => {
@@ -304,36 +289,33 @@ export default function SignControlsStrip({
     const onKeyDown = (event: KeyboardEvent) => {
       const target = event.target as HTMLElement | null;
       const isTypingTarget =
-        target?.tagName === 'INPUT' || target?.tagName === 'TEXTAREA' || (target as any)?.isContentEditable;
+        target?.tagName === "INPUT" || target?.tagName === "TEXTAREA" || (target as any)?.isContentEditable;
       if (isTypingTarget) return;
 
-      if (event.key === 'Escape') {
+      if (event.key === "Escape") {
         pausePlacement();
         return;
       }
 
-      if (event.key === 'Backspace') {
+      if (event.key === "Backspace") {
         event.preventDefault();
         onDeleteSelected?.();
       }
     };
 
-    window.addEventListener('keydown', onKeyDown);
-    return () => window.removeEventListener('keydown', onKeyDown);
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
   }, [pausePlacement, onDeleteSelected, signatureConfig, visible]);
 
-  const handleCanvasSignatureChange = useCallback(
-    (dataUrl: string | null) => {
-      latestCanvasDataRef.current = dataUrl ?? undefined;
-    },
-    []
-  );
+  const handleCanvasSignatureChange = useCallback((dataUrl: string | null) => {
+    latestCanvasDataRef.current = dataUrl ?? undefined;
+  }, []);
 
   const handleDrawingComplete = useCallback(async () => {
     const dataUrl = latestCanvasDataRef.current;
     if (!dataUrl) return;
     await saveCanvasToLibrary(dataUrl);
-    beginPlacement({ signatureType: 'canvas', signatureData: dataUrl });
+    beginPlacement({ signatureType: "canvas", signatureData: dataUrl });
     setCreateSignatureType(null);
     latestCanvasDataRef.current = undefined;
   }, [saveCanvasToLibrary, beginPlacement]);
@@ -342,7 +324,7 @@ export default function SignControlsStrip({
     const saved = await saveTextToLibrary();
     if (!saved) return;
     beginPlacement({
-      signatureType: 'text',
+      signatureType: "text",
       signerName: saved.signerName,
       fontFamily: saved.fontFamily,
       fontSize: saved.fontSize,
@@ -350,68 +332,68 @@ export default function SignControlsStrip({
       signatureData: saved.dataUrl,
     });
     setCreateSignatureType(null);
-    setTextSignerName('');
+    setTextSignerName("");
   }, [saveTextToLibrary, beginPlacement]);
 
   const handleImageSelected = useCallback(
     async (e: React.ChangeEvent<HTMLInputElement>) => {
       const file = e.target.files?.[0] ?? null;
-      e.target.value = '';
+      e.target.value = "";
       if (!file) return;
       try {
         const dataUrl = await readFileAsDataUrl(file);
         await saveImageToLibrary(dataUrl);
-        beginPlacement({ signatureType: 'image', signatureData: dataUrl });
+        beginPlacement({ signatureType: "image", signatureData: dataUrl });
         setCreateSignatureType(null);
       } catch (err) {
-        console.error('Failed to read signature image:', err);
+        console.error("Failed to read signature image:", err);
       }
     },
-    [readFileAsDataUrl, saveImageToLibrary, beginPlacement]
+    [readFileAsDataUrl, saveImageToLibrary, beginPlacement],
   );
 
   if (!visible || !signatureConfig) return null;
 
   const previewNode =
-    signatureConfig.signatureType === 'text' ? (
+    signatureConfig.signatureType === "text" ? (
       <div
         className={styles.signingPreviewFrame}
         style={{
-          fontFamily: signatureConfig.fontFamily ?? 'Helvetica',
-          color: signatureConfig.textColor ?? '#000000',
+          fontFamily: signatureConfig.fontFamily ?? "Helvetica",
+          color: signatureConfig.textColor ?? "#000000",
           fontSize: 14,
           lineHeight: 1.1,
-          whiteSpace: 'nowrap',
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
+          whiteSpace: "nowrap",
+          overflow: "hidden",
+          textOverflow: "ellipsis",
           maxWidth: 160,
         }}
       >
-        {(signatureConfig.signerName ?? '').trim() || t('certSign.collab.signRequest.preview.textFallback', 'Signature')}
+        {(signatureConfig.signerName ?? "").trim() || t("certSign.collab.signRequest.preview.textFallback", "Signature")}
       </div>
     ) : (
       <div className={styles.signingPreviewFrame}>
         {signatureConfig.signatureData ? (
           <img
             src={signatureConfig.signatureData}
-            alt={t('certSign.collab.signRequest.preview.imageAlt', 'Selected signature')}
-            style={{ maxWidth: 160, maxHeight: 32, objectFit: 'contain', display: 'block' }}
+            alt={t("certSign.collab.signRequest.preview.imageAlt", "Selected signature")}
+            style={{ maxWidth: 160, maxHeight: 32, objectFit: "contain", display: "block" }}
           />
         ) : (
           <Text size="xs" c="dimmed">
-            {t('certSign.collab.signRequest.preview.missing', 'No preview')}
+            {t("certSign.collab.signRequest.preview.missing", "No preview")}
           </Text>
         )}
       </div>
     );
 
   return (
-    <div className={styles.signStrip} data-open={visible ? 'true' : 'false'}>
+    <div className={styles.signStrip} data-open={visible ? "true" : "false"}>
       <div className={styles.signStripInner}>
         <div className={styles.signingRow}>
           <div className={styles.signingLeft}>
             <Text size="sm" fw={700} className={styles.signingTitle}>
-              {t('certSign.collab.signRequest.signingTitle', 'Signing')}
+              {t("certSign.collab.signRequest.signingTitle", "Signing")}
             </Text>
           </div>
 
@@ -420,34 +402,34 @@ export default function SignControlsStrip({
           <div className={styles.signingMode}>
             <SegmentedControl
               className={styles.signStripModeRadio}
-              value={placementMode ? 'place' : 'move'}
+              value={placementMode ? "place" : "move"}
               onChange={(value) => {
-                if (value === 'place') resumePlacement();
+                if (value === "place") resumePlacement();
                 else pausePlacement();
               }}
               data={[
                 {
-                  value: 'place',
+                  value: "place",
                   label: (
                     <Group gap={6} wrap="nowrap">
-                      <DrawIcon sx={{ fontSize: '1.1rem' }} />
-                      <span>{t('certSign.collab.signRequest.mode.place', 'Place Signature')}</span>
+                      <DrawIcon sx={{ fontSize: "1.1rem" }} />
+                      <span>{t("certSign.collab.signRequest.mode.place", "Place Signature")}</span>
                     </Group>
                   ),
                 },
                 {
-                  value: 'move',
+                  value: "move",
                   label: (
                     <Group gap={6} wrap="nowrap">
-                      <OpenWithIcon sx={{ fontSize: '1.1rem' }} />
-                      <span>{t('certSign.collab.signRequest.mode.move', 'Move Signature')}</span>
+                      <OpenWithIcon sx={{ fontSize: "1.1rem" }} />
+                      <span>{t("certSign.collab.signRequest.mode.move", "Move Signature")}</span>
                     </Group>
                   ),
                 },
               ]}
               size="xs"
               radius="xl"
-              aria-label={t('certSign.collab.signRequest.mode.title', 'Sign or move mode')}
+              aria-label={t("certSign.collab.signRequest.mode.title", "Sign or move mode")}
             />
           </div>
 
@@ -467,7 +449,7 @@ export default function SignControlsStrip({
                 <button
                   type="button"
                   className={styles.signingPreviewButton}
-                  aria-label={t('certSign.collab.signRequest.changeSignature', 'Change signature')}
+                  aria-label={t("certSign.collab.signRequest.changeSignature", "Change signature")}
                 >
                   {previewNode}
                 </button>
@@ -483,34 +465,37 @@ export default function SignControlsStrip({
                           size="xs"
                           color="red"
                           variant="subtle"
-                          onClick={(e) => { e.stopPropagation(); removeSignature(sig.id); }}
-                          aria-label={t('certSign.collab.signRequest.saved.delete', 'Delete signature')}
+                          onClick={(e) => {
+                            e.stopPropagation();
+                            removeSignature(sig.id);
+                          }}
+                          aria-label={t("certSign.collab.signRequest.saved.delete", "Delete signature")}
                         >
-                          <CloseIcon sx={{ fontSize: '0.9rem' }} />
+                          <CloseIcon sx={{ fontSize: "0.9rem" }} />
                         </ActionIcon>
                       </Group>
                     </Menu.Item>
                   ))
                 ) : (
-                  <Menu.Item disabled>{t('certSign.collab.signRequest.saved.none', 'No saved signatures')}</Menu.Item>
+                  <Menu.Item disabled>{t("certSign.collab.signRequest.saved.none", "No saved signatures")}</Menu.Item>
                 )}
                 <Menu.Divider />
-                <Menu.Item onClick={() => handleCreateSignature('canvas')} disabled={isAtCapacity}>
+                <Menu.Item onClick={() => handleCreateSignature("canvas")} disabled={isAtCapacity}>
                   <Group gap="xs">
-                    <DrawIcon sx={{ fontSize: '1rem' }} />
-                    <span>{t('certSign.collab.signRequest.modeTabs.draw', 'Draw')}</span>
+                    <DrawIcon sx={{ fontSize: "1rem" }} />
+                    <span>{t("certSign.collab.signRequest.modeTabs.draw", "Draw")}</span>
                   </Group>
                 </Menu.Item>
-                <Menu.Item onClick={() => handleCreateSignature('text')} disabled={isAtCapacity}>
+                <Menu.Item onClick={() => handleCreateSignature("text")} disabled={isAtCapacity}>
                   <Group gap="xs">
-                    <TextFieldsIcon sx={{ fontSize: '1rem' }} />
-                    <span>{t('certSign.collab.signRequest.modeTabs.text', 'Type')}</span>
+                    <TextFieldsIcon sx={{ fontSize: "1rem" }} />
+                    <span>{t("certSign.collab.signRequest.modeTabs.text", "Type")}</span>
                   </Group>
                 </Menu.Item>
-                <Menu.Item onClick={() => handleCreateSignature('image')} disabled={isAtCapacity}>
+                <Menu.Item onClick={() => handleCreateSignature("image")} disabled={isAtCapacity}>
                   <Group gap="xs">
-                    <ImageIcon sx={{ fontSize: '1rem' }} />
-                    <span>{t('certSign.collab.signRequest.modeTabs.image', 'Upload')}</span>
+                    <ImageIcon sx={{ fontSize: "1rem" }} />
+                    <span>{t("certSign.collab.signRequest.modeTabs.image", "Upload")}</span>
                   </Group>
                 </Menu.Item>
               </Menu.Dropdown>
@@ -523,10 +508,10 @@ export default function SignControlsStrip({
               className={`${styles.iconButton} ${styles.signStripMobileDelete}`}
               onClick={onDeleteSelected}
               disabled={!hasSelectedAnnotation}
-              aria-label={t('certSign.collab.signRequest.deleteSelected', 'Delete selected signature')}
-              title={t('certSign.collab.signRequest.deleteSelected', 'Delete selected signature')}
+              aria-label={t("certSign.collab.signRequest.deleteSelected", "Delete selected signature")}
+              title={t("certSign.collab.signRequest.deleteSelected", "Delete selected signature")}
             >
-              <DeleteOutlineIcon sx={{ fontSize: '1.2rem' }} />
+              <DeleteOutlineIcon sx={{ fontSize: "1.2rem" }} />
             </button>
 
             <button
@@ -534,20 +519,20 @@ export default function SignControlsStrip({
               className={`${styles.iconButton} ${styles.iconTextButton}`}
               onClick={onComplete}
               disabled={!canComplete}
-              aria-label={t('certSign.collab.signRequest.completeAndSign', 'Complete & Sign')}
-              title={t('certSign.collab.signRequest.completeAndSign', 'Complete & Sign')}
+              aria-label={t("certSign.collab.signRequest.completeAndSign", "Complete & Sign")}
+              title={t("certSign.collab.signRequest.completeAndSign", "Complete & Sign")}
             >
               <span className={styles.actionIcon}>
-                <CheckIcon sx={{ fontSize: '1.2rem' }} />
+                <CheckIcon sx={{ fontSize: "1.2rem" }} />
               </span>
-              <span className={styles.actionLabel}>{t('certSign.collab.signRequest.completeAndSign', 'Complete & Sign')}</span>
+              <span className={styles.actionLabel}>{t("certSign.collab.signRequest.completeAndSign", "Complete & Sign")}</span>
             </button>
           </div>
         </div>
       </div>
 
       {/* Draw Signature — auto-opens its inner canvas modal directly */}
-      {createSignatureType === 'canvas' && (
+      {createSignatureType === "canvas" && (
         <DrawingCanvas
           autoOpen
           selectedColor={canvasColor}
@@ -575,15 +560,15 @@ export default function SignControlsStrip({
 
       {/* Type Signature Modal */}
       <Modal
-        opened={createSignatureType === 'text'}
+        opened={createSignatureType === "text"}
         onClose={handleCancelCreate}
-        title={t('certSign.collab.signRequest.modeTabs.text', 'Type Signature')}
+        title={t("certSign.collab.signRequest.modeTabs.text", "Type Signature")}
         size="md"
         withinPortal
       >
         <Stack gap="md">
           <Text size="sm" c="dimmed">
-            {t('certSign.collab.signRequest.text.modalHint', 'Enter your name, then click Continue to place it on the PDF.')}
+            {t("certSign.collab.signRequest.text.modalHint", "Enter your name, then click Continue to place it on the PDF.")}
           </Text>
           <TextInputWithFont
             text={textSignerName}
@@ -594,19 +579,19 @@ export default function SignControlsStrip({
             onFontSizeChange={setTextFontSize}
             textColor={textColor}
             onTextColorChange={setTextColor}
-            label={t('certSign.collab.signRequest.text.label', 'Signature Text')}
-            placeholder={t('certSign.collab.signRequest.text.placeholder', 'Enter your name...')}
-            fontLabel={t('certSign.collab.signRequest.text.fontLabel', 'Font')}
-            fontSizeLabel={t('certSign.collab.signRequest.text.fontSizeLabel', 'Size')}
-            fontSizePlaceholder={t('certSign.collab.signRequest.text.fontSizePlaceholder', '16')}
-            colorLabel={t('certSign.collab.signRequest.text.colorLabel', 'Color')}
+            label={t("certSign.collab.signRequest.text.label", "Signature Text")}
+            placeholder={t("certSign.collab.signRequest.text.placeholder", "Enter your name...")}
+            fontLabel={t("certSign.collab.signRequest.text.fontLabel", "Font")}
+            fontSizeLabel={t("certSign.collab.signRequest.text.fontSizeLabel", "Size")}
+            fontSizePlaceholder={t("certSign.collab.signRequest.text.fontSizePlaceholder", "16")}
+            colorLabel={t("certSign.collab.signRequest.text.colorLabel", "Color")}
           />
           <Group justify="flex-end">
             <Button variant="subtle" onClick={handleCancelCreate}>
-              {t('cancel', 'Cancel')}
+              {t("cancel", "Cancel")}
             </Button>
             <Button onClick={handleSaveText} disabled={!textSignerName.trim()}>
-              {t('certSign.collab.signRequest.canvas.continue', 'Continue')}
+              {t("certSign.collab.signRequest.canvas.continue", "Continue")}
             </Button>
           </Group>
         </Stack>
@@ -618,17 +603,11 @@ export default function SignControlsStrip({
           onClose={() => setCanvasColorPickerOpen(false)}
           selectedColor={canvasColor}
           onColorChange={setCanvasColor}
-          title={t('certSign.collab.signRequest.canvas.colorPickerTitle', 'Choose stroke colour')}
+          title={t("certSign.collab.signRequest.canvas.colorPickerTitle", "Choose stroke colour")}
         />
       )}
 
-      <input
-        ref={fileInputRef}
-        type="file"
-        accept="image/*"
-        style={{ display: 'none' }}
-        onChange={handleImageSelected}
-      />
+      <input ref={fileInputRef} type="file" accept="image/*" style={{ display: "none" }} onChange={handleImageSelected} />
     </div>
   );
 }
diff --git a/frontend/src/core/components/tools/certSign/SignRequestWorkbenchView.tsx b/frontend/src/core/components/tools/certSign/SignRequestWorkbenchView.tsx
index 5298c61750..c44d232b7c 100644
--- a/frontend/src/core/components/tools/certSign/SignRequestWorkbenchView.tsx
+++ b/frontend/src/core/components/tools/certSign/SignRequestWorkbenchView.tsx
@@ -1,22 +1,22 @@
-import { useState, useRef, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Paper, Group, Button, Text, Divider, CloseButton } from '@mantine/core';
-import { useIsPhone } from '@app/hooks/useIsMobile';
-import CancelIcon from '@mui/icons-material/Cancel';
-import FolderOpenIcon from '@mui/icons-material/FolderOpen';
-import ZoomInIcon from '@mui/icons-material/ZoomIn';
-import ZoomOutIcon from '@mui/icons-material/ZoomOut';
-import ZoomOutMapIcon from '@mui/icons-material/ZoomOutMap';
-import { LocalIcon } from '@app/components/shared/LocalIcon';
-import { Z_INDEX_FULLSCREEN_SURFACE } from '@app/styles/zIndex';
-import { SignRequestDetail } from '@app/types/signingSession';
-import { LocalEmbedPDFWithAnnotations, AnnotationAPI } from '@app/components/viewer/LocalEmbedPDFWithAnnotations';
-import { alert } from '@app/components/toast';
-import SignControlsStrip from '@app/components/tools/certSign/SignControlsStrip';
-import { CertificateConfigModal } from '@app/components/tools/certSign/modals/CertificateConfigModal';
-import type { CertificateSubmitData } from '@app/components/tools/certSign/modals/CertificateConfigModal';
-import { SignParameters } from '@app/hooks/tools/sign/useSignParameters';
-import { useFileActions } from '@app/contexts/file/fileHooks';
+import { useState, useRef, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { Paper, Group, Button, Text, Divider, CloseButton } from "@mantine/core";
+import { useIsPhone } from "@app/hooks/useIsMobile";
+import CancelIcon from "@mui/icons-material/Cancel";
+import FolderOpenIcon from "@mui/icons-material/FolderOpen";
+import ZoomInIcon from "@mui/icons-material/ZoomIn";
+import ZoomOutIcon from "@mui/icons-material/ZoomOut";
+import ZoomOutMapIcon from "@mui/icons-material/ZoomOutMap";
+import { LocalIcon } from "@app/components/shared/LocalIcon";
+import { Z_INDEX_FULLSCREEN_SURFACE } from "@app/styles/zIndex";
+import { SignRequestDetail } from "@app/types/signingSession";
+import { LocalEmbedPDFWithAnnotations, AnnotationAPI } from "@app/components/viewer/LocalEmbedPDFWithAnnotations";
+import { alert } from "@app/components/toast";
+import SignControlsStrip from "@app/components/tools/certSign/SignControlsStrip";
+import { CertificateConfigModal } from "@app/components/tools/certSign/modals/CertificateConfigModal";
+import type { CertificateSubmitData } from "@app/components/tools/certSign/modals/CertificateConfigModal";
+import { SignParameters } from "@app/hooks/tools/sign/useSignParameters";
+import { useFileActions } from "@app/contexts/file/fileHooks";
 
 export interface SignRequestWorkbenchData {
   signRequest: SignRequestDetail;
@@ -44,13 +44,13 @@ const SignRequestWorkbenchView = ({ data }: SignRequestWorkbenchViewProps) => {
   const [signatureConfig, setSignatureConfig] = useState<SignParameters | null>(
     canSign
       ? {
-          signatureType: 'canvas',
-          signerName: '',
-          fontFamily: 'Helvetica',
+          signatureType: "canvas",
+          signerName: "",
+          fontFamily: "Helvetica",
           fontSize: 16,
-          textColor: '#000000',
+          textColor: "#000000",
         }
-      : null
+      : null,
   );
   const [previewCount, setPreviewCount] = useState(0);
   const [placementMode, setPlacementMode] = useState(true);
@@ -88,9 +88,9 @@ const SignRequestWorkbenchView = ({ data }: SignRequestWorkbenchViewProps) => {
   const handleOpenCertificateModal = () => {
     if (previewCount === 0) {
       alert({
-        alertType: 'error',
-        title: t('common.error'),
-        body: t('certSign.collab.signRequest.noSignatures', 'Please place at least one signature on the PDF'),
+        alertType: "error",
+        title: t("common.error"),
+        body: t("certSign.collab.signRequest.noSignatures", "Please place at least one signature on the PDF"),
       });
       return;
     }
@@ -99,85 +99,85 @@ const SignRequestWorkbenchView = ({ data }: SignRequestWorkbenchViewProps) => {
 
   const handleSign = async (certData: CertificateSubmitData, reason?: string, location?: string) => {
     const previews = annotationApiRef.current?.getSignaturePreviews() || [];
-    console.log('handleSign called, previews:', previews.length, 'signatures');
+    console.log("handleSign called, previews:", previews.length, "signatures");
 
     setSigning(true);
     try {
       const formData = new FormData();
 
-      if (certData.certType === 'UPLOAD') {
+      if (certData.certType === "UPLOAD") {
         const { uploadFormat, p12File, privateKeyFile, certFile, jksFile, password } = certData;
-        formData.append('certType', uploadFormat);
+        formData.append("certType", uploadFormat);
         switch (uploadFormat) {
-          case 'PKCS12':
-          case 'PFX':
+          case "PKCS12":
+          case "PFX":
             if (!p12File) {
               alert({
-                alertType: 'error',
-                title: t('common.error'),
-                body: t('certSign.collab.signRequest.noCertificate', 'Please select a certificate file'),
+                alertType: "error",
+                title: t("common.error"),
+                body: t("certSign.collab.signRequest.noCertificate", "Please select a certificate file"),
               });
               setSigning(false);
               return;
             }
-            formData.append('p12File', p12File);
+            formData.append("p12File", p12File);
             break;
-          case 'PEM':
+          case "PEM":
             if (!privateKeyFile || !certFile) {
               alert({
-                alertType: 'error',
-                title: t('common.error'),
-                body: t('certSign.collab.signRequest.noCertificate', 'Please select a certificate file'),
+                alertType: "error",
+                title: t("common.error"),
+                body: t("certSign.collab.signRequest.noCertificate", "Please select a certificate file"),
               });
               setSigning(false);
               return;
             }
-            formData.append('privateKeyFile', privateKeyFile);
-            formData.append('certFile', certFile);
+            formData.append("privateKeyFile", privateKeyFile);
+            formData.append("certFile", certFile);
             break;
-          case 'JKS':
+          case "JKS":
             if (!jksFile) {
               alert({
-                alertType: 'error',
-                title: t('common.error'),
-                body: t('certSign.collab.signRequest.noCertificate', 'Please select a certificate file'),
+                alertType: "error",
+                title: t("common.error"),
+                body: t("certSign.collab.signRequest.noCertificate", "Please select a certificate file"),
               });
               setSigning(false);
               return;
             }
-            formData.append('jksFile', jksFile);
+            formData.append("jksFile", jksFile);
             break;
         }
         if (password) {
-          formData.append('password', password);
+          formData.append("password", password);
         }
       } else {
-        formData.append('certType', certData.certType);
+        formData.append("certType", certData.certType);
       }
 
       // Add signature appearance settings from sign request
       if (signRequest.showSignature !== undefined) {
-        formData.append('showSignature', signRequest.showSignature.toString());
+        formData.append("showSignature", signRequest.showSignature.toString());
       }
       if (signRequest.pageNumber !== undefined && signRequest.pageNumber !== null) {
-        formData.append('pageNumber', signRequest.pageNumber.toString());
+        formData.append("pageNumber", signRequest.pageNumber.toString());
       }
 
       // Participant-provided reason/location override session defaults
       if (reason && reason.trim()) {
-        formData.append('reason', reason);
+        formData.append("reason", reason);
       } else if (signRequest.reason) {
-        formData.append('reason', signRequest.reason);
+        formData.append("reason", signRequest.reason);
       }
 
       if (location && location.trim()) {
-        formData.append('location', location);
+        formData.append("location", location);
       } else if (signRequest.location) {
-        formData.append('location', signRequest.location);
+        formData.append("location", signRequest.location);
       }
 
       if (signRequest.showLogo !== undefined) {
-        formData.append('showLogo', signRequest.showLogo.toString());
+        formData.append("showLogo", signRequest.showLogo.toString());
       }
 
       // Add all wet signatures from previews
@@ -192,14 +192,14 @@ const SignRequestWorkbenchView = ({ data }: SignRequestWorkbenchViewProps) => {
           height: preview.height,
         }));
 
-        console.log('Sending wet signatures to backend:', wetSignaturesJson.length, 'signatures');
-        formData.append('wetSignaturesData', JSON.stringify(wetSignaturesJson));
+        console.log("Sending wet signatures to backend:", wetSignaturesJson.length, "signatures");
+        formData.append("wetSignaturesData", JSON.stringify(wetSignaturesJson));
       }
 
       await onSign(formData);
       setCertificateModalOpen(false);
     } catch (error) {
-      console.error('Failed to sign document:', error);
+      console.error("Failed to sign document:", error);
     } finally {
       setSigning(false);
     }
@@ -210,7 +210,7 @@ const SignRequestWorkbenchView = ({ data }: SignRequestWorkbenchViewProps) => {
     try {
       await onDecline();
     } catch (error) {
-      console.error('Failed to decline request:', error);
+      console.error("Failed to decline request:", error);
       setDeclining(false);
     }
   };
@@ -218,9 +218,9 @@ const SignRequestWorkbenchView = ({ data }: SignRequestWorkbenchViewProps) => {
   const handleAddToActiveFiles = async () => {
     await fileActions.addFiles([pdfFile]);
     alert({
-      alertType: 'success',
-      title: t('success'),
-      body: t('certSign.collab.signRequest.addedToFiles', 'Document added to active files'),
+      alertType: "success",
+      title: t("success"),
+      body: t("certSign.collab.signRequest.addedToFiles", "Document added to active files"),
       expandable: false,
       durationMs: 2500,
     });
@@ -231,52 +231,50 @@ const SignRequestWorkbenchView = ({ data }: SignRequestWorkbenchViewProps) => {
     (annotationApiRef.current as any)?.deleteSelectedAnnotation?.();
   };
 
-  const handlePlaceSignature = (
-    id: string,
-    pageIndex: number,
-    x: number,
-    y: number,
-    width: number,
-    height: number
-  ) => {
-    console.log('Signature placed:', { id, pageIndex, x, y, width, height });
+  const handlePlaceSignature = (id: string, pageIndex: number, x: number, y: number, width: number, height: number) => {
+    console.log("Signature placed:", { id, pageIndex, x, y, width, height });
   };
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', height: '100%', overflow: 'hidden' }}>
+    <div style={{ display: "flex", flexDirection: "column", height: "100%", overflow: "hidden" }}>
       {/* Top Control Bar */}
-      <Paper p="sm" shadow="sm" style={{ flexShrink: 0, zIndex: Z_INDEX_FULLSCREEN_SURFACE, position: 'relative' }}>
-        <Group justify="space-between" style={{ flexWrap: isPhone ? 'wrap' : 'nowrap' }}>
+      <Paper p="sm" shadow="sm" style={{ flexShrink: 0, zIndex: Z_INDEX_FULLSCREEN_SURFACE, position: "relative" }}>
+        <Group justify="space-between" style={{ flexWrap: isPhone ? "wrap" : "nowrap" }}>
           <Group gap="md">
             <LocalIcon icon="signature-rounded" width="1.5rem" height="1.5rem" />
             <div>
-              <Text size="sm" fw={600} style={{ maxWidth: isPhone ? '180px' : undefined }} truncate={isPhone ? 'end' : undefined}>
+              <Text
+                size="sm"
+                fw={600}
+                style={{ maxWidth: isPhone ? "180px" : undefined }}
+                truncate={isPhone ? "end" : undefined}
+              >
                 {signRequest.documentName}
               </Text>
               {!isPhone && (
                 <Text size="xs" c="dimmed">
-                  {t('certSign.collab.signRequest.from', 'From')}: {signRequest.ownerUsername} •{' '}
+                  {t("certSign.collab.signRequest.from", "From")}: {signRequest.ownerUsername} •{" "}
                   {new Date(signRequest.createdAt).toLocaleDateString()}
                 </Text>
               )}
             </div>
           </Group>
 
-          <Group gap="xs" style={{ width: isPhone ? '100%' : undefined }} justify={isPhone ? 'flex-end' : undefined}>
+          <Group gap="xs" style={{ width: isPhone ? "100%" : undefined }} justify={isPhone ? "flex-end" : undefined}>
             <Button
               variant="light"
               size="sm"
               leftSection={<FolderOpenIcon fontSize="small" />}
               onClick={handleAddToActiveFiles}
               style={{
-                backgroundColor: 'var(--landing-inner-paper-bg)',
-                color: 'var(--btn-open-file)',
-                border: '1px solid var(--landing-inner-paper-border)',
+                backgroundColor: "var(--landing-inner-paper-bg)",
+                color: "var(--btn-open-file)",
+                border: "1px solid var(--landing-inner-paper-border)",
               }}
             >
-              {t('certSign.collab.signRequest.addToFiles', 'Add to Active Files')}
+              {t("certSign.collab.signRequest.addToFiles", "Add to Active Files")}
             </Button>
-            {signRequest.myStatus !== 'SIGNED' && signRequest.myStatus !== 'DECLINED' && (
+            {signRequest.myStatus !== "SIGNED" && signRequest.myStatus !== "DECLINED" && (
               <Button
                 variant="light"
                 color="red"
@@ -285,7 +283,7 @@ const SignRequestWorkbenchView = ({ data }: SignRequestWorkbenchViewProps) => {
                 onClick={handleDecline}
                 loading={declining}
               >
-                {t('certSign.collab.signRequest.decline', 'Decline Request')}
+                {t("certSign.collab.signRequest.decline", "Decline Request")}
               </Button>
             )}
             {!isPhone && (
@@ -296,7 +294,7 @@ const SignRequestWorkbenchView = ({ data }: SignRequestWorkbenchViewProps) => {
                     variant="subtle"
                     size="sm"
                     onClick={() => annotationApiRef.current?.zoomOut()}
-                    title={t('viewer.zoomOut', 'Zoom out')}
+                    title={t("viewer.zoomOut", "Zoom out")}
                   >
                     <ZoomOutIcon fontSize="small" />
                   </Button>
@@ -304,7 +302,7 @@ const SignRequestWorkbenchView = ({ data }: SignRequestWorkbenchViewProps) => {
                     variant="subtle"
                     size="sm"
                     onClick={() => annotationApiRef.current?.resetZoom()}
-                    title={t('viewer.resetZoom', 'Reset zoom')}
+                    title={t("viewer.resetZoom", "Reset zoom")}
                   >
                     <ZoomOutMapIcon fontSize="small" />
                   </Button>
@@ -312,7 +310,7 @@ const SignRequestWorkbenchView = ({ data }: SignRequestWorkbenchViewProps) => {
                     variant="subtle"
                     size="sm"
                     onClick={() => annotationApiRef.current?.zoomIn()}
-                    title={t('viewer.zoomIn', 'Zoom in')}
+                    title={t("viewer.zoomIn", "Zoom in")}
                   >
                     <ZoomInIcon fontSize="small" />
                   </Button>
@@ -320,7 +318,11 @@ const SignRequestWorkbenchView = ({ data }: SignRequestWorkbenchViewProps) => {
               </>
             )}
             <Divider orientation="vertical" />
-            <CloseButton size="md" onClick={onBack} title={t('certSign.collab.signRequest.backToList', 'Back to Sign Requests')} />
+            <CloseButton
+              size="md"
+              onClick={onBack}
+              title={t("certSign.collab.signRequest.backToList", "Back to Sign Requests")}
+            />
           </Group>
         </Group>
       </Paper>
@@ -341,7 +343,7 @@ const SignRequestWorkbenchView = ({ data }: SignRequestWorkbenchViewProps) => {
       )}
 
       {/* PDF Viewer (full width) */}
-      <div style={{ flex: 1, overflow: 'hidden', position: 'relative' }}>
+      <div style={{ flex: 1, overflow: "hidden", position: "relative" }}>
         <LocalEmbedPDFWithAnnotations
           ref={annotationApiRef}
           file={pdfFile}
@@ -362,11 +364,10 @@ const SignRequestWorkbenchView = ({ data }: SignRequestWorkbenchViewProps) => {
           onSign={handleSign}
           signatureCount={previewCount}
           disabled={signing}
-          defaultReason={signRequest.reason || ''}
-          defaultLocation={signRequest.location || ''}
+          defaultReason={signRequest.reason || ""}
+          defaultLocation={signRequest.location || ""}
         />
       )}
-
     </div>
   );
 };
diff --git a/frontend/src/core/components/tools/certSign/SignatureAppearanceSettings.tsx b/frontend/src/core/components/tools/certSign/SignatureAppearanceSettings.tsx
index f6ddbe241f..9e25257e0c 100644
--- a/frontend/src/core/components/tools/certSign/SignatureAppearanceSettings.tsx
+++ b/frontend/src/core/components/tools/certSign/SignatureAppearanceSettings.tsx
@@ -8,34 +8,38 @@ interface SignatureAppearanceSettingsProps {
   disabled?: boolean;
 }
 
-const SignatureAppearanceSettings = ({ parameters, onParameterChange, disabled = false }: SignatureAppearanceSettingsProps) => {
+const SignatureAppearanceSettings = ({
+  parameters,
+  onParameterChange,
+  disabled = false,
+}: SignatureAppearanceSettingsProps) => {
   const { t } = useTranslation();
 
   return (
     <Stack gap="md">
       {/* Signature Visibility */}
       <Stack gap="sm">
-        <div style={{ display: 'flex', gap: '4px' }}>
+        <div style={{ display: "flex", gap: "4px" }}>
           <Button
-            variant={!parameters.showSignature ? 'filled' : 'outline'}
-            color={!parameters.showSignature ? 'blue' : 'var(--text-muted)'}
-            onClick={() => onParameterChange('showSignature', false)}
+            variant={!parameters.showSignature ? "filled" : "outline"}
+            color={!parameters.showSignature ? "blue" : "var(--text-muted)"}
+            onClick={() => onParameterChange("showSignature", false)}
             disabled={disabled}
-            style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
+            style={{ flex: 1, height: "auto", minHeight: "40px", fontSize: "11px" }}
           >
-            <div style={{ textAlign: 'center', lineHeight: '1.1', fontSize: '11px' }}>
-              {t('certSign.appearance.invisible', 'Invisible')}
+            <div style={{ textAlign: "center", lineHeight: "1.1", fontSize: "11px" }}>
+              {t("certSign.appearance.invisible", "Invisible")}
             </div>
           </Button>
           <Button
-            variant={parameters.showSignature ? 'filled' : 'outline'}
-            color={parameters.showSignature ? 'blue' : 'var(--text-muted)'}
-            onClick={() => onParameterChange('showSignature', true)}
+            variant={parameters.showSignature ? "filled" : "outline"}
+            color={parameters.showSignature ? "blue" : "var(--text-muted)"}
+            onClick={() => onParameterChange("showSignature", true)}
             disabled={disabled}
-            style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
+            style={{ flex: 1, height: "auto", minHeight: "40px", fontSize: "11px" }}
           >
-            <div style={{ textAlign: 'center', lineHeight: '1.1', fontSize: '11px' }}>
-              {t('certSign.appearance.visible', 'Visible')}
+            <div style={{ textAlign: "center", lineHeight: "1.1", fontSize: "11px" }}>
+              {t("certSign.appearance.visible", "Visible")}
             </div>
           </Button>
         </div>
@@ -45,58 +49,58 @@ const SignatureAppearanceSettings = ({ parameters, onParameterChange, disabled =
       {parameters.showSignature && (
         <Stack gap="sm">
           <Text size="sm" fw={500}>
-            {t('certSign.appearance.options.title', 'Signature Details')}
+            {t("certSign.appearance.options.title", "Signature Details")}
           </Text>
           <TextInput
-            label={t('certSign.reason', 'Reason')}
+            label={t("certSign.reason", "Reason")}
             value={parameters.reason}
-            onChange={(event) => onParameterChange('reason', event.currentTarget.value)}
+            onChange={(event) => onParameterChange("reason", event.currentTarget.value)}
             disabled={disabled}
           />
           <TextInput
-            label={t('certSign.location', 'Location')}
+            label={t("certSign.location", "Location")}
             value={parameters.location}
-            onChange={(event) => onParameterChange('location', event.currentTarget.value)}
+            onChange={(event) => onParameterChange("location", event.currentTarget.value)}
             disabled={disabled}
           />
           <TextInput
-            label={t('certSign.name', 'Name')}
+            label={t("certSign.name", "Name")}
             value={parameters.name}
-            onChange={(event) => onParameterChange('name', event.currentTarget.value)}
+            onChange={(event) => onParameterChange("name", event.currentTarget.value)}
             disabled={disabled}
           />
           <NumberInput
-            label={t('certSign.pageNumber', 'Page Number')}
+            label={t("certSign.pageNumber", "Page Number")}
             value={parameters.pageNumber}
-            onChange={(value) => onParameterChange('pageNumber', value || 1)}
+            onChange={(value) => onParameterChange("pageNumber", value || 1)}
             min={1}
             disabled={disabled}
           />
           <Stack gap="xs">
             <Text size="sm" fw={500}>
-              {t('certSign.logoTitle', 'Logo')}
+              {t("certSign.logoTitle", "Logo")}
             </Text>
-            <div style={{ display: 'flex', gap: '4px' }}>
+            <div style={{ display: "flex", gap: "4px" }}>
               <Button
-                variant={!parameters.showLogo ? 'filled' : 'outline'}
-                color={!parameters.showLogo ? 'blue' : 'var(--text-muted)'}
-                onClick={() => onParameterChange('showLogo', false)}
+                variant={!parameters.showLogo ? "filled" : "outline"}
+                color={!parameters.showLogo ? "blue" : "var(--text-muted)"}
+                onClick={() => onParameterChange("showLogo", false)}
                 disabled={disabled}
-                style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
+                style={{ flex: 1, height: "auto", minHeight: "40px", fontSize: "11px" }}
               >
-                <div style={{ textAlign: 'center', lineHeight: '1.1', fontSize: '11px' }}>
-                  {t('certSign.noLogo', 'No Logo')}
+                <div style={{ textAlign: "center", lineHeight: "1.1", fontSize: "11px" }}>
+                  {t("certSign.noLogo", "No Logo")}
                 </div>
               </Button>
               <Button
-                variant={parameters.showLogo ? 'filled' : 'outline'}
-                color={parameters.showLogo ? 'blue' : 'var(--text-muted)'}
-                onClick={() => onParameterChange('showLogo', true)}
+                variant={parameters.showLogo ? "filled" : "outline"}
+                color={parameters.showLogo ? "blue" : "var(--text-muted)"}
+                onClick={() => onParameterChange("showLogo", true)}
                 disabled={disabled}
-                style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
+                style={{ flex: 1, height: "auto", minHeight: "40px", fontSize: "11px" }}
               >
-                <div style={{ textAlign: 'center', lineHeight: '1.1', fontSize: '11px' }}>
-                  {t('certSign.showLogo', 'Show Logo')}
+                <div style={{ textAlign: "center", lineHeight: "1.1", fontSize: "11px" }}>
+                  {t("certSign.showLogo", "Show Logo")}
                 </div>
               </Button>
             </div>
@@ -107,4 +111,4 @@ const SignatureAppearanceSettings = ({ parameters, onParameterChange, disabled =
   );
 };
 
-export default SignatureAppearanceSettings;
\ No newline at end of file
+export default SignatureAppearanceSettings;
diff --git a/frontend/src/core/components/tools/certSign/SignatureSettingsDisplay.tsx b/frontend/src/core/components/tools/certSign/SignatureSettingsDisplay.tsx
index 00d0658bbd..d40f9bb65e 100644
--- a/frontend/src/core/components/tools/certSign/SignatureSettingsDisplay.tsx
+++ b/frontend/src/core/components/tools/certSign/SignatureSettingsDisplay.tsx
@@ -1,9 +1,9 @@
-import { useTranslation } from 'react-i18next';
-import { Stack, Paper, Text, Group, Badge } from '@mantine/core';
-import VisibilityIcon from '@mui/icons-material/Visibility';
-import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
-import CheckIcon from '@mui/icons-material/Check';
-import CloseIcon from '@mui/icons-material/Close';
+import { useTranslation } from "react-i18next";
+import { Stack, Paper, Text, Group, Badge } from "@mantine/core";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+import CheckIcon from "@mui/icons-material/Check";
+import CloseIcon from "@mui/icons-material/Close";
 
 interface SignatureSettingsDisplayProps {
   showSignature: boolean;
@@ -28,21 +28,21 @@ const SignatureSettingsDisplay = ({
         <Stack gap="xs">
           <Group gap="xs" justify="space-between">
             <Text size="xs" c="dimmed">
-              {t('certSign.appearance.visibility', 'Visibility')}
+              {t("certSign.appearance.visibility", "Visibility")}
             </Text>
             <Group gap="xs">
               {showSignature ? (
                 <>
-                  <VisibilityIcon style={{ fontSize: '16px', color: 'var(--mantine-color-green-6)' }} />
+                  <VisibilityIcon style={{ fontSize: "16px", color: "var(--mantine-color-green-6)" }} />
                   <Badge size="sm" color="green" variant="light">
-                    {t('certSign.appearance.visible', 'Visible')}
+                    {t("certSign.appearance.visible", "Visible")}
                   </Badge>
                 </>
               ) : (
                 <>
-                  <VisibilityOffIcon style={{ fontSize: '16px', color: 'var(--mantine-color-gray-6)' }} />
+                  <VisibilityOffIcon style={{ fontSize: "16px", color: "var(--mantine-color-gray-6)" }} />
                   <Badge size="sm" color="gray" variant="light">
-                    {t('certSign.appearance.invisible', 'Invisible')}
+                    {t("certSign.appearance.invisible", "Invisible")}
                   </Badge>
                 </>
               )}
@@ -54,7 +54,7 @@ const SignatureSettingsDisplay = ({
               {pageNumber && (
                 <Group gap="xs" justify="space-between">
                   <Text size="xs" c="dimmed">
-                    {t('certSign.pageNumber', 'Page Number')}
+                    {t("certSign.pageNumber", "Page Number")}
                   </Text>
                   <Text size="xs" fw={600}>
                     {pageNumber}
@@ -65,7 +65,7 @@ const SignatureSettingsDisplay = ({
               {reason && (
                 <Stack gap={4}>
                   <Text size="xs" c="dimmed">
-                    {t('certSign.reason', 'Reason')}
+                    {t("certSign.reason", "Reason")}
                   </Text>
                   <Paper p="xs" withBorder bg="gray.0">
                     <Text size="xs">{reason}</Text>
@@ -76,7 +76,7 @@ const SignatureSettingsDisplay = ({
               {location && (
                 <Stack gap={4}>
                   <Text size="xs" c="dimmed">
-                    {t('certSign.location', 'Location')}
+                    {t("certSign.location", "Location")}
                   </Text>
                   <Paper p="xs" withBorder bg="gray.0">
                     <Text size="xs">{location}</Text>
@@ -86,21 +86,21 @@ const SignatureSettingsDisplay = ({
 
               <Group gap="xs" justify="space-between">
                 <Text size="xs" c="dimmed">
-                  {t('certSign.logoTitle', 'Logo')}
+                  {t("certSign.logoTitle", "Logo")}
                 </Text>
                 <Group gap="xs">
                   {showLogo ? (
                     <>
-                      <CheckIcon style={{ fontSize: '16px', color: 'var(--mantine-color-green-6)' }} />
+                      <CheckIcon style={{ fontSize: "16px", color: "var(--mantine-color-green-6)" }} />
                       <Badge size="sm" color="green" variant="light">
-                        {t('certSign.showLogo', 'Show Logo')}
+                        {t("certSign.showLogo", "Show Logo")}
                       </Badge>
                     </>
                   ) : (
                     <>
-                      <CloseIcon style={{ fontSize: '16px', color: 'var(--mantine-color-gray-6)' }} />
+                      <CloseIcon style={{ fontSize: "16px", color: "var(--mantine-color-gray-6)" }} />
                       <Badge size="sm" color="gray" variant="light">
-                        {t('certSign.noLogo', 'No Logo')}
+                        {t("certSign.noLogo", "No Logo")}
                       </Badge>
                     </>
                   )}
@@ -113,10 +113,7 @@ const SignatureSettingsDisplay = ({
 
       <Paper p="xs" withBorder bg="blue.0">
         <Text size="xs" c="blue.9">
-          {t(
-            'certSign.collab.signRequest.signatureInfo',
-            'These settings are configured by the document owner'
-          )}
+          {t("certSign.collab.signRequest.signatureInfo", "These settings are configured by the document owner")}
         </Text>
       </Paper>
     </Stack>
diff --git a/frontend/src/core/components/tools/certSign/SignatureSettingsInput.tsx b/frontend/src/core/components/tools/certSign/SignatureSettingsInput.tsx
index 194e0a6d09..12ba12286e 100644
--- a/frontend/src/core/components/tools/certSign/SignatureSettingsInput.tsx
+++ b/frontend/src/core/components/tools/certSign/SignatureSettingsInput.tsx
@@ -1,5 +1,5 @@
-import { Stack, Text, Button, TextInput, NumberInput, Switch } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
+import { Stack, Text, Button, TextInput, NumberInput, Switch } from "@mantine/core";
+import { useTranslation } from "react-i18next";
 
 export interface SignatureSettings {
   showSignature?: boolean;
@@ -26,34 +26,34 @@ const SignatureSettingsInput = ({ value, onChange, disabled = false }: Signature
   return (
     <Stack gap="sm">
       <Text size="sm" fw={600}>
-        {t('certSign.collab.signatureSettings.title', 'Signature Appearance')}
+        {t("certSign.collab.signatureSettings.title", "Signature Appearance")}
       </Text>
       <Text size="xs" c="dimmed">
-        {t('certSign.collab.signatureSettings.description', 'Configure how signatures will appear for all participants')}
+        {t("certSign.collab.signatureSettings.description", "Configure how signatures will appear for all participants")}
       </Text>
 
       {/* Signature Visibility */}
-      <div style={{ display: 'flex', gap: '4px' }}>
+      <div style={{ display: "flex", gap: "4px" }}>
         <Button
-          variant={!value.showSignature ? 'filled' : 'outline'}
-          color={!value.showSignature ? 'blue' : 'var(--text-muted)'}
-          onClick={() => handleChange('showSignature', false)}
+          variant={!value.showSignature ? "filled" : "outline"}
+          color={!value.showSignature ? "blue" : "var(--text-muted)"}
+          onClick={() => handleChange("showSignature", false)}
           disabled={disabled}
-          style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
+          style={{ flex: 1, height: "auto", minHeight: "40px", fontSize: "11px" }}
         >
-          <div style={{ textAlign: 'center', lineHeight: '1.1', fontSize: '11px' }}>
-            {t('certSign.appearance.invisible', 'Invisible')}
+          <div style={{ textAlign: "center", lineHeight: "1.1", fontSize: "11px" }}>
+            {t("certSign.appearance.invisible", "Invisible")}
           </div>
         </Button>
         <Button
-          variant={value.showSignature ? 'filled' : 'outline'}
-          color={value.showSignature ? 'blue' : 'var(--text-muted)'}
-          onClick={() => handleChange('showSignature', true)}
+          variant={value.showSignature ? "filled" : "outline"}
+          color={value.showSignature ? "blue" : "var(--text-muted)"}
+          onClick={() => handleChange("showSignature", true)}
           disabled={disabled}
-          style={{ flex: 1, height: 'auto', minHeight: '40px', fontSize: '11px' }}
+          style={{ flex: 1, height: "auto", minHeight: "40px", fontSize: "11px" }}
         >
-          <div style={{ textAlign: 'center', lineHeight: '1.1', fontSize: '11px' }}>
-            {t('certSign.appearance.visible', 'Visible')}
+          <div style={{ textAlign: "center", lineHeight: "1.1", fontSize: "11px" }}>
+            {t("certSign.appearance.visible", "Visible")}
           </div>
         </Button>
       </div>
@@ -62,31 +62,31 @@ const SignatureSettingsInput = ({ value, onChange, disabled = false }: Signature
       {value.showSignature && (
         <Stack gap="sm">
           <TextInput
-            label={t('certSign.reason', 'Reason')}
-            value={value.reason || ''}
-            onChange={(event) => handleChange('reason', event.currentTarget.value)}
+            label={t("certSign.reason", "Reason")}
+            value={value.reason || ""}
+            onChange={(event) => handleChange("reason", event.currentTarget.value)}
             disabled={disabled}
             size="xs"
           />
           <TextInput
-            label={t('certSign.location', 'Location')}
-            value={value.location || ''}
-            onChange={(event) => handleChange('location', event.currentTarget.value)}
+            label={t("certSign.location", "Location")}
+            value={value.location || ""}
+            onChange={(event) => handleChange("location", event.currentTarget.value)}
             disabled={disabled}
             size="xs"
           />
           <NumberInput
-            label={t('certSign.pageNumber', 'Page Number')}
+            label={t("certSign.pageNumber", "Page Number")}
             value={value.pageNumber || 1}
-            onChange={(val) => handleChange('pageNumber', val || 1)}
+            onChange={(val) => handleChange("pageNumber", val || 1)}
             min={1}
             disabled={disabled}
             size="xs"
           />
           <Switch
-            label={t('certSign.showLogo', 'Show Stirling PDF Logo')}
+            label={t("certSign.showLogo", "Show Stirling PDF Logo")}
             checked={value.showLogo || false}
-            onChange={(event) => handleChange('showLogo', event.currentTarget.checked)}
+            onChange={(event) => handleChange("showLogo", event.currentTarget.checked)}
             disabled={disabled}
             size="sm"
           />
@@ -95,10 +95,13 @@ const SignatureSettingsInput = ({ value, onChange, disabled = false }: Signature
 
       {/* Summary Page Toggle */}
       <Switch
-        label={t('certSign.collab.sessionCreation.includeSummaryPage', 'Include Signature Summary Page')}
-        description={t('certSign.collab.sessionCreation.includeSummaryPageHelp', 'A summary page will be added at the end with all signature metadata. The digital certificate signature boxes on individual pages will be suppressed (wet signatures are unaffected).')}
+        label={t("certSign.collab.sessionCreation.includeSummaryPage", "Include Signature Summary Page")}
+        description={t(
+          "certSign.collab.sessionCreation.includeSummaryPageHelp",
+          "A summary page will be added at the end with all signature metadata. The digital certificate signature boxes on individual pages will be suppressed (wet signatures are unaffected).",
+        )}
         checked={value.includeSummaryPage || false}
-        onChange={(event) => handleChange('includeSummaryPage', event.currentTarget.checked)}
+        onChange={(event) => handleChange("includeSummaryPage", event.currentTarget.checked)}
         disabled={disabled}
         size="sm"
       />
diff --git a/frontend/src/core/components/tools/certSign/WetSignatureInput.tsx b/frontend/src/core/components/tools/certSign/WetSignatureInput.tsx
index a2350ba1a4..ed5639e67e 100644
--- a/frontend/src/core/components/tools/certSign/WetSignatureInput.tsx
+++ b/frontend/src/core/components/tools/certSign/WetSignatureInput.tsx
@@ -1,21 +1,13 @@
-import { useState, useCallback, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  Stack,
-  SegmentedControl,
-  Text,
-  Radio,
-  FileInput,
-  PasswordInput,
-  Divider,
-} from '@mantine/core';
-import { DrawingCanvas } from '@app/components/annotation/shared/DrawingCanvas';
-import { ImageUploader } from '@app/components/annotation/shared/ImageUploader';
-import { TextInputWithFont } from '@app/components/annotation/shared/TextInputWithFont';
-import { ColorPicker } from '@app/components/annotation/shared/ColorPicker';
+import { useState, useCallback, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { Stack, SegmentedControl, Text, Radio, FileInput, PasswordInput, Divider } from "@mantine/core";
+import { DrawingCanvas } from "@app/components/annotation/shared/DrawingCanvas";
+import { ImageUploader } from "@app/components/annotation/shared/ImageUploader";
+import { TextInputWithFont } from "@app/components/annotation/shared/TextInputWithFont";
+import { ColorPicker } from "@app/components/annotation/shared/ColorPicker";
 
-type SignatureType = 'canvas' | 'image' | 'text';
-type CertificateType = 'SERVER' | 'USER_CERT' | 'UPLOAD';
+type SignatureType = "canvas" | "image" | "text";
+type CertificateType = "SERVER" | "USER_CERT" | "UPLOAD";
 
 interface WetSignatureInputProps {
   onSignatureDataChange: (data: string | undefined) => void;
@@ -43,12 +35,12 @@ const WetSignatureInput = ({
   const { t } = useTranslation();
 
   // Signature type state
-  const [signatureType, setSignatureType] = useState<SignatureType>('canvas');
+  const [signatureType, setSignatureType] = useState<SignatureType>("canvas");
 
   // Canvas drawing state
-  const [selectedColor, setSelectedColor] = useState('#000000');
+  const [selectedColor, setSelectedColor] = useState("#000000");
   const [penSize, setPenSize] = useState(2);
-  const [penSizeInput, setPenSizeInput] = useState('2');
+  const [penSizeInput, setPenSizeInput] = useState("2");
   const [isColorPickerOpen, setIsColorPickerOpen] = useState(false);
   const [canvasSignatureData, setCanvasSignatureData] = useState<string | undefined>();
 
@@ -56,10 +48,10 @@ const WetSignatureInput = ({
   const [imageSignatureData, setImageSignatureData] = useState<string | undefined>();
 
   // Text signature state
-  const [signerName, setSignerName] = useState('');
+  const [signerName, setSignerName] = useState("");
   const [fontSize, setFontSize] = useState(16);
-  const [fontFamily, setFontFamily] = useState('Helvetica');
-  const [textColor, setTextColor] = useState('#000000');
+  const [fontFamily, setFontFamily] = useState("Helvetica");
+  const [textColor, setTextColor] = useState("#000000");
 
   // Handle signature type change
   const handleSignatureTypeChange = useCallback(
@@ -68,16 +60,16 @@ const WetSignatureInput = ({
       onSignatureTypeChange(type);
 
       // Update signature data based on type
-      if (type === 'canvas') {
+      if (type === "canvas") {
         onSignatureDataChange(canvasSignatureData);
-      } else if (type === 'image') {
+      } else if (type === "image") {
         onSignatureDataChange(imageSignatureData);
-      } else if (type === 'text') {
+      } else if (type === "text") {
         // For text signatures, we pass the signer name
         onSignatureDataChange(signerName || undefined);
       }
     },
-    [canvasSignatureData, imageSignatureData, signerName, onSignatureTypeChange, onSignatureDataChange]
+    [canvasSignatureData, imageSignatureData, signerName, onSignatureTypeChange, onSignatureDataChange],
   );
 
   // Handle canvas signature change
@@ -85,11 +77,11 @@ const WetSignatureInput = ({
     (data: string | null) => {
       const nextValue = data ?? undefined;
       setCanvasSignatureData(nextValue);
-      if (signatureType === 'canvas') {
+      if (signatureType === "canvas") {
         onSignatureDataChange(nextValue);
       }
     },
-    [signatureType, onSignatureDataChange]
+    [signatureType, onSignatureDataChange],
   );
 
   // Handle image upload
@@ -103,7 +95,7 @@ const WetSignatureInput = ({
               if (e.target?.result) {
                 resolve(e.target.result as string);
               } else {
-                reject(new Error('Failed to read file'));
+                reject(new Error("Failed to read file"));
               }
             };
             reader.onerror = () => reject(reader.error);
@@ -111,35 +103,35 @@ const WetSignatureInput = ({
           });
 
           setImageSignatureData(result);
-          if (signatureType === 'image') {
+          if (signatureType === "image") {
             onSignatureDataChange(result);
           }
         } catch (error) {
-          console.error('Error reading file:', error);
+          console.error("Error reading file:", error);
         }
       } else if (!file) {
         setImageSignatureData(undefined);
-        if (signatureType === 'image') {
+        if (signatureType === "image") {
           onSignatureDataChange(undefined);
         }
       }
     },
-    [disabled, signatureType, onSignatureDataChange]
+    [disabled, signatureType, onSignatureDataChange],
   );
 
   // Handle text signature changes
   useEffect(() => {
-    if (signatureType === 'text') {
+    if (signatureType === "text") {
       onSignatureDataChange(signerName || undefined);
     }
   }, [signatureType, signerName, onSignatureDataChange]);
 
   const renderSignatureBuilder = () => {
-    if (signatureType === 'canvas') {
+    if (signatureType === "canvas") {
       return (
         <Stack gap="xs">
           <Text size="xs" c="dimmed">
-            {t('certSign.collab.signRequest.drawSignature', 'Draw your signature below')}
+            {t("certSign.collab.signRequest.drawSignature", "Draw your signature below")}
           </Text>
           <DrawingCanvas
             selectedColor={selectedColor}
@@ -157,11 +149,11 @@ const WetSignatureInput = ({
       );
     }
 
-    if (signatureType === 'image') {
+    if (signatureType === "image") {
       return (
         <Stack gap="xs">
           <Text size="xs" c="dimmed">
-            {t('certSign.collab.signRequest.uploadSignature', 'Upload your signature image')}
+            {t("certSign.collab.signRequest.uploadSignature", "Upload your signature image")}
           </Text>
           <ImageUploader onImageChange={handleImageChange} disabled={disabled} />
         </Stack>
@@ -171,7 +163,7 @@ const WetSignatureInput = ({
     return (
       <Stack gap="xs">
         <Text size="xs" c="dimmed">
-          {t('certSign.collab.signRequest.typeSignature', 'Type your name to create a signature')}
+          {t("certSign.collab.signRequest.typeSignature", "Type your name to create a signature")}
         </Text>
         <TextInputWithFont
           text={signerName}
@@ -184,11 +176,11 @@ const WetSignatureInput = ({
           onTextColorChange={setTextColor}
           disabled={disabled}
           onAnyChange={() => {}}
-          label={t('certSign.collab.signRequest.signatureText', 'Signature Text')}
-          placeholder={t('certSign.collab.signRequest.signatureTextPlaceholder', 'Enter your name...')}
-          fontLabel={t('certSign.collab.signRequest.fontFamily', 'Font Family')}
-          fontSizeLabel={t('certSign.collab.signRequest.fontSize', 'Font Size')}
-          fontSizePlaceholder={t('certSign.collab.signRequest.fontSizePlaceholder', 'Size')}
+          label={t("certSign.collab.signRequest.signatureText", "Signature Text")}
+          placeholder={t("certSign.collab.signRequest.signatureTextPlaceholder", "Enter your name...")}
+          fontLabel={t("certSign.collab.signRequest.fontFamily", "Font Family")}
+          fontSizeLabel={t("certSign.collab.signRequest.fontSize", "Font Size")}
+          fontSizePlaceholder={t("certSign.collab.signRequest.fontSizePlaceholder", "Size")}
         />
       </Stack>
     );
@@ -199,16 +191,16 @@ const WetSignatureInput = ({
       {/* Signature Type Selector */}
       <Stack gap="xs">
         <Text size="sm" fw={600}>
-          {t('certSign.collab.signRequest.signatureTypeLabel', 'Signature Type')}
+          {t("certSign.collab.signRequest.signatureTypeLabel", "Signature Type")}
         </Text>
         <SegmentedControl
           value={signatureType}
           fullWidth
           onChange={(value) => handleSignatureTypeChange(value as SignatureType)}
           data={[
-            { label: t('sign.type.canvas', 'Draw'), value: 'canvas' },
-            { label: t('sign.type.image', 'Upload'), value: 'image' },
-            { label: t('sign.type.text', 'Type'), value: 'text' },
+            { label: t("sign.type.canvas", "Draw"), value: "canvas" },
+            { label: t("sign.type.image", "Upload"), value: "image" },
+            { label: t("sign.type.text", "Type"), value: "text" },
           ]}
           disabled={disabled}
         />
@@ -222,39 +214,36 @@ const WetSignatureInput = ({
       {/* Certificate Selection */}
       <Stack gap="xs">
         <Text size="sm" fw={600}>
-          {t('certSign.collab.signRequest.certificateChoice', 'Certificate Choice')}
+          {t("certSign.collab.signRequest.certificateChoice", "Certificate Choice")}
         </Text>
-        <Radio.Group
-          value={certType}
-          onChange={(value) => onCertTypeChange(value as CertificateType)}
-        >
+        <Radio.Group value={certType} onChange={(value) => onCertTypeChange(value as CertificateType)}>
           <Stack gap="xs">
             <Radio
               value="USER_CERT"
-              label={t('certSign.collab.signRequest.usePersonalCert', 'Use My Personal Certificate')}
-              description={t('certSign.collab.signRequest.usePersonalCertDesc', 'Auto-generated for your account')}
+              label={t("certSign.collab.signRequest.usePersonalCert", "Use My Personal Certificate")}
+              description={t("certSign.collab.signRequest.usePersonalCertDesc", "Auto-generated for your account")}
               disabled={disabled}
             />
             <Radio
               value="SERVER"
-              label={t('certSign.collab.signRequest.useServerCert', 'Use Organization Certificate')}
-              description={t('certSign.collab.signRequest.useServerCertDesc', 'Shared organization certificate')}
+              label={t("certSign.collab.signRequest.useServerCert", "Use Organization Certificate")}
+              description={t("certSign.collab.signRequest.useServerCertDesc", "Shared organization certificate")}
               disabled={disabled}
             />
             <Radio
               value="UPLOAD"
-              label={t('certSign.collab.signRequest.uploadCert', 'Upload Custom Certificate')}
-              description={t('certSign.collab.signRequest.uploadCertDesc', 'Use your own PKCS12 certificate')}
+              label={t("certSign.collab.signRequest.uploadCert", "Upload Custom Certificate")}
+              description={t("certSign.collab.signRequest.uploadCertDesc", "Use your own PKCS12 certificate")}
               disabled={disabled}
             />
           </Stack>
         </Radio.Group>
 
-        {certType === 'UPLOAD' && (
+        {certType === "UPLOAD" && (
           <Stack gap="xs" mt="xs">
             <FileInput
-              label={t('certSign.collab.signRequest.p12File', 'P12/PFX Certificate File')}
-              placeholder={t('certSign.collab.signRequest.selectFile', 'Select file...')}
+              label={t("certSign.collab.signRequest.p12File", "P12/PFX Certificate File")}
+              placeholder={t("certSign.collab.signRequest.selectFile", "Select file...")}
               accept=".p12,.pfx"
               value={p12File}
               onChange={onP12FileChange}
@@ -262,7 +251,7 @@ const WetSignatureInput = ({
               disabled={disabled}
             />
             <PasswordInput
-              label={t('certSign.collab.signRequest.password', 'Certificate Password')}
+              label={t("certSign.collab.signRequest.password", "Certificate Password")}
               value={password}
               onChange={(event) => onPasswordChange(event.currentTarget.value)}
               size="xs"
@@ -278,7 +267,7 @@ const WetSignatureInput = ({
         onClose={() => setIsColorPickerOpen(false)}
         selectedColor={selectedColor}
         onColorChange={setSelectedColor}
-        title={t('sign.canvas.colorPickerTitle', 'Choose stroke colour')}
+        title={t("sign.canvas.colorPickerTitle", "Choose stroke colour")}
       />
     </Stack>
   );
diff --git a/frontend/src/core/components/tools/certSign/modals/AddParticipantsFlow.tsx b/frontend/src/core/components/tools/certSign/modals/AddParticipantsFlow.tsx
index 81b8d8560f..5113f317aa 100644
--- a/frontend/src/core/components/tools/certSign/modals/AddParticipantsFlow.tsx
+++ b/frontend/src/core/components/tools/certSign/modals/AddParticipantsFlow.tsx
@@ -1,8 +1,8 @@
-import { useState } from 'react';
-import { Modal, Stack, TextInput, Button, Group } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import AddIcon from '@mui/icons-material/Add';
-import UserSelector from '@app/components/shared/UserSelector';
+import { useState } from "react";
+import { Modal, Stack, TextInput, Button, Group } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import AddIcon from "@mui/icons-material/Add";
+import UserSelector from "@app/components/shared/UserSelector";
 
 interface AddParticipantsFlowProps {
   opened: boolean;
@@ -10,19 +10,15 @@ interface AddParticipantsFlowProps {
   onSubmit: (userIds: number[], defaultReason?: string) => Promise<void>;
 }
 
-export const AddParticipantsFlow: React.FC<AddParticipantsFlowProps> = ({
-  opened,
-  onClose,
-  onSubmit,
-}) => {
+export const AddParticipantsFlow: React.FC<AddParticipantsFlowProps> = ({ opened, onClose, onSubmit }) => {
   const { t } = useTranslation();
   const [selectedUserIds, setSelectedUserIds] = useState<number[]>([]);
-  const [defaultReason, setDefaultReason] = useState('');
+  const [defaultReason, setDefaultReason] = useState("");
   const [submitting, setSubmitting] = useState(false);
 
   const handleClose = () => {
     setSelectedUserIds([]);
-    setDefaultReason('');
+    setDefaultReason("");
     onClose();
   };
 
@@ -32,7 +28,7 @@ export const AddParticipantsFlow: React.FC<AddParticipantsFlowProps> = ({
       await onSubmit(selectedUserIds, defaultReason.trim() || undefined);
       handleClose();
     } catch (error) {
-      console.error('Failed to add participants:', error);
+      console.error("Failed to add participants:", error);
     } finally {
       setSubmitting(false);
     }
@@ -42,28 +38,31 @@ export const AddParticipantsFlow: React.FC<AddParticipantsFlowProps> = ({
     <Modal
       opened={opened}
       onClose={handleClose}
-      title={t('certSign.collab.sessionDetail.addParticipants', 'Add Participants')}
+      title={t("certSign.collab.sessionDetail.addParticipants", "Add Participants")}
       size="lg"
     >
       <Stack gap="md">
         <UserSelector
           value={selectedUserIds}
           onChange={setSelectedUserIds}
-          placeholder={t('certSign.collab.sessionDetail.selectUsers', 'Select users...')}
+          placeholder={t("certSign.collab.sessionDetail.selectUsers", "Select users...")}
         />
 
         <TextInput
-          label={t('certSign.reason', 'Default Reason')}
-          description={t('certSign.collab.addParticipants.reasonHelp', 'Pre-set a signing reason for these participants (optional, they can override when signing)')}
+          label={t("certSign.reason", "Default Reason")}
+          description={t(
+            "certSign.collab.addParticipants.reasonHelp",
+            "Pre-set a signing reason for these participants (optional, they can override when signing)",
+          )}
           value={defaultReason}
           onChange={(e) => setDefaultReason(e.currentTarget.value)}
-          placeholder={t('certSign.collab.addParticipants.reasonPlaceholder', 'e.g. Approval, Review...')}
+          placeholder={t("certSign.collab.addParticipants.reasonPlaceholder", "e.g. Approval, Review...")}
           size="sm"
         />
 
         <Group justify="flex-end">
           <Button variant="default" onClick={handleClose}>
-            {t('common.cancel', 'Cancel')}
+            {t("common.cancel", "Cancel")}
           </Button>
           <Button
             onClick={handleSubmit}
@@ -72,7 +71,7 @@ export const AddParticipantsFlow: React.FC<AddParticipantsFlowProps> = ({
             leftSection={<AddIcon sx={{ fontSize: 16 }} />}
             color="green"
           >
-            {t('certSign.collab.addParticipants.add', 'Add {{count}} Participant(s)', {
+            {t("certSign.collab.addParticipants.add", "Add {{count}} Participant(s)", {
               count: selectedUserIds.length,
             })}
           </Button>
diff --git a/frontend/src/core/components/tools/certSign/modals/CertificateConfigModal.tsx b/frontend/src/core/components/tools/certSign/modals/CertificateConfigModal.tsx
index d70cb7d1c1..4e7afd00b0 100644
--- a/frontend/src/core/components/tools/certSign/modals/CertificateConfigModal.tsx
+++ b/frontend/src/core/components/tools/certSign/modals/CertificateConfigModal.tsx
@@ -1,10 +1,10 @@
-import { Modal, Stack, Group, Button, Text, Collapse, TextInput, Loader } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { useState, useEffect, useRef } from 'react';
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import ErrorIcon from '@mui/icons-material/Error';
-import { CertificateSelector, CertificateType, UploadFormat } from '@app/components/tools/certSign/CertificateSelector';
-import apiClient from '@app/services/apiClient';
+import { Modal, Stack, Group, Button, Text, Collapse, TextInput, Loader } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { useState, useEffect, useRef } from "react";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import ErrorIcon from "@mui/icons-material/Error";
+import { CertificateSelector, CertificateType, UploadFormat } from "@app/components/tools/certSign/CertificateSelector";
+import apiClient from "@app/services/apiClient";
 
 export interface CertificateSubmitData {
   certType: CertificateType;
@@ -17,10 +17,10 @@ export interface CertificateSubmitData {
 }
 
 type CertValidationState =
-  | { status: 'idle' }
-  | { status: 'validating' }
-  | { status: 'valid'; subjectName: string | null; notAfter: string | null }
-  | { status: 'error'; message: string };
+  | { status: "idle" }
+  | { status: "validating" }
+  | { status: "valid"; subjectName: string | null; notAfter: string | null }
+  | { status: "error"; message: string };
 
 interface CertificateConfigModalProps {
   opened: boolean;
@@ -40,52 +40,52 @@ export const CertificateConfigModal: React.FC<CertificateConfigModalProps> = ({
   onSign,
   signatureCount,
   disabled = false,
-  defaultReason = '',
-  defaultLocation = '',
+  defaultReason = "",
+  defaultLocation = "",
   participantToken,
 }) => {
   const { t } = useTranslation();
 
-  const [certType, setCertType] = useState<CertificateType>('USER_CERT');
-  const [uploadFormat, setUploadFormat] = useState<UploadFormat>('PKCS12');
+  const [certType, setCertType] = useState<CertificateType>("USER_CERT");
+  const [uploadFormat, setUploadFormat] = useState<UploadFormat>("PKCS12");
   const [p12File, setP12File] = useState<File | null>(null);
   const [privateKeyFile, setPrivateKeyFile] = useState<File | null>(null);
   const [certFile, setCertFile] = useState<File | null>(null);
   const [jksFile, setJksFile] = useState<File | null>(null);
-  const [password, setPassword] = useState('');
+  const [password, setPassword] = useState("");
   const [signing, setSigning] = useState(false);
-  const [certValidation, setCertValidation] = useState<CertValidationState>({ status: 'idle' });
+  const [certValidation, setCertValidation] = useState<CertValidationState>({ status: "idle" });
   const validationTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   // Debounced certificate pre-validation: fires 600ms after cert file or password changes
   useEffect(() => {
     // Only validate uploaded keystores (not SERVER/USER_CERT, not PEM which uses separate files)
-    const keystoreFile = uploadFormat === 'JKS' ? jksFile : p12File;
-    if (certType !== 'UPLOAD' || !keystoreFile || uploadFormat === 'PEM') {
-      setCertValidation({ status: 'idle' });
+    const keystoreFile = uploadFormat === "JKS" ? jksFile : p12File;
+    if (certType !== "UPLOAD" || !keystoreFile || uploadFormat === "PEM") {
+      setCertValidation({ status: "idle" });
       return;
     }
 
     if (validationTimerRef.current) clearTimeout(validationTimerRef.current);
-    setCertValidation({ status: 'validating' });
+    setCertValidation({ status: "validating" });
 
     validationTimerRef.current = setTimeout(async () => {
       try {
         const formData = new FormData();
-        formData.append('certType', uploadFormat === 'JKS' ? 'JKS' : 'P12');
-        formData.append('password', password);
-        if (uploadFormat === 'JKS') {
-          formData.append('jksFile', keystoreFile);
+        formData.append("certType", uploadFormat === "JKS" ? "JKS" : "P12");
+        formData.append("password", password);
+        if (uploadFormat === "JKS") {
+          formData.append("jksFile", keystoreFile);
         } else {
-          formData.append('p12File', keystoreFile);
+          formData.append("p12File", keystoreFile);
         }
 
         const endpoint = participantToken
-          ? '/api/v1/workflow/participant/validate-certificate'
-          : '/api/v1/security/cert-sign/validate-certificate';
+          ? "/api/v1/workflow/participant/validate-certificate"
+          : "/api/v1/security/cert-sign/validate-certificate";
 
         if (participantToken) {
-          formData.append('participantToken', participantToken);
+          formData.append("participantToken", participantToken);
         }
 
         const response = await apiClient.post<{
@@ -93,19 +93,26 @@ export const CertificateConfigModal: React.FC<CertificateConfigModalProps> = ({
           subjectName: string | null;
           notAfter: string | null;
           error: string | null;
-        }>(endpoint, formData, { headers: { 'Content-Type': 'multipart/form-data' } });
+        }>(endpoint, formData, { headers: { "Content-Type": "multipart/form-data" } });
 
         if (response.data.valid) {
           setCertValidation({
-            status: 'valid',
+            status: "valid",
             subjectName: response.data.subjectName,
             notAfter: response.data.notAfter,
           });
         } else {
-          setCertValidation({ status: 'error', message: response.data.error ?? t('certSign.collab.signRequest.certModal.certInvalidFallback', 'Invalid certificate') });
+          setCertValidation({
+            status: "error",
+            message:
+              response.data.error ?? t("certSign.collab.signRequest.certModal.certInvalidFallback", "Invalid certificate"),
+          });
         }
       } catch {
-        setCertValidation({ status: 'error', message: t('certSign.collab.signRequest.certModal.certNetworkError', 'Could not validate certificate') });
+        setCertValidation({
+          status: "error",
+          message: t("certSign.collab.signRequest.certModal.certNetworkError", "Could not validate certificate"),
+        });
       }
     }, 600);
 
@@ -120,35 +127,28 @@ export const CertificateConfigModal: React.FC<CertificateConfigModalProps> = ({
   const [location, setLocation] = useState(defaultLocation);
 
   const isUploadValid = () => {
-    if (certType !== 'UPLOAD') return true;
+    if (certType !== "UPLOAD") return true;
     switch (uploadFormat) {
-      case 'PKCS12':
-      case 'PFX':
+      case "PKCS12":
+      case "PFX":
         return p12File !== null;
-      case 'PEM':
+      case "PEM":
         return privateKeyFile !== null && certFile !== null;
-      case 'JKS':
+      case "JKS":
         return jksFile !== null;
     }
   };
 
-  const isValid =
-    certType === 'USER_CERT' ||
-    certType === 'SERVER' ||
-    isUploadValid();
+  const isValid = certType === "USER_CERT" || certType === "SERVER" || isUploadValid();
 
   const handleSign = async () => {
     if (!isValid) return;
 
     setSigning(true);
     try {
-      await onSign(
-        { certType, uploadFormat, p12File, privateKeyFile, certFile, jksFile, password },
-        reason,
-        location
-      );
+      await onSign({ certType, uploadFormat, p12File, privateKeyFile, certFile, jksFile, password }, reason, location);
     } catch (error) {
-      console.error('Failed to sign document:', error);
+      console.error("Failed to sign document:", error);
     } finally {
       setSigning(false);
     }
@@ -158,16 +158,16 @@ export const CertificateConfigModal: React.FC<CertificateConfigModalProps> = ({
     <Modal
       opened={opened}
       onClose={onClose}
-      title={t('certSign.collab.signRequest.certModal.title', 'Configure Certificate')}
+      title={t("certSign.collab.signRequest.certModal.title", "Configure Certificate")}
       centered
       size="lg"
     >
       <Stack gap="md">
         <Text size="sm" c="dimmed">
           {t(
-            'certSign.collab.signRequest.certModal.description',
-            'You have placed {{count}} signature(s). Choose your certificate to complete signing.',
-            { count: signatureCount }
+            "certSign.collab.signRequest.certModal.description",
+            "You have placed {{count}} signature(s). Choose your certificate to complete signing.",
+            { count: signatureCount },
           )}
         </Text>
 
@@ -190,32 +190,30 @@ export const CertificateConfigModal: React.FC<CertificateConfigModalProps> = ({
         />
 
         {/* Certificate validation status */}
-        {certValidation.status === 'validating' && (
+        {certValidation.status === "validating" && (
           <Group gap="xs">
             <Loader size="xs" />
             <Text size="sm" c="dimmed">
-              {t('certSign.collab.signRequest.certModal.certValidating', 'Validating certificate...')}
+              {t("certSign.collab.signRequest.certModal.certValidating", "Validating certificate...")}
             </Text>
           </Group>
         )}
-        {certValidation.status === 'valid' && (
+        {certValidation.status === "valid" && (
           <Group gap="xs">
-            <CheckCircleIcon fontSize="small" style={{ color: 'var(--mantine-color-green-6)' }} />
+            <CheckCircleIcon fontSize="small" style={{ color: "var(--mantine-color-green-6)" }} />
             <Text size="sm" c="green">
-              {t('certSign.collab.signRequest.certModal.certValidUntil', 'Certificate valid until {{date}}', {
-                date: certValidation.notAfter
-                  ? new Date(certValidation.notAfter).toLocaleDateString()
-                  : '—',
+              {t("certSign.collab.signRequest.certModal.certValidUntil", "Certificate valid until {{date}}", {
+                date: certValidation.notAfter ? new Date(certValidation.notAfter).toLocaleDateString() : "—",
               })}
-              {certValidation.subjectName ? ` · ${certValidation.subjectName}` : ''}
+              {certValidation.subjectName ? ` · ${certValidation.subjectName}` : ""}
             </Text>
           </Group>
         )}
-        {certValidation.status === 'error' && (
+        {certValidation.status === "error" && (
           <Group gap="xs">
-            <ErrorIcon fontSize="small" style={{ color: 'var(--mantine-color-red-6)' }} />
+            <ErrorIcon fontSize="small" style={{ color: "var(--mantine-color-red-6)" }} />
             <Text size="sm" c="red">
-              {t('certSign.collab.signRequest.certModal.certInvalid', 'Certificate invalid: {{error}}', {
+              {t("certSign.collab.signRequest.certModal.certInvalid", "Certificate invalid: {{error}}", {
                 error: certValidation.message,
               })}
             </Text>
@@ -229,23 +227,23 @@ export const CertificateConfigModal: React.FC<CertificateConfigModalProps> = ({
             size="xs"
             onClick={() => setShowAdvanced(!showAdvanced)}
             disabled={disabled || signing}
-            style={{ marginBottom: '8px' }}
+            style={{ marginBottom: "8px" }}
           >
-            {t('certSign.collab.signRequest.advancedSettings', 'Advanced Settings')}
+            {t("certSign.collab.signRequest.advancedSettings", "Advanced Settings")}
           </Button>
 
           <Collapse in={showAdvanced}>
             <Stack gap="sm">
               <TextInput
-                label={t('certSign.collab.signRequest.reason', 'Reason (Optional)')}
-                placeholder={t('certSign.collab.signRequest.reasonPlaceholder', 'Why are you signing?')}
+                label={t("certSign.collab.signRequest.reason", "Reason (Optional)")}
+                placeholder={t("certSign.collab.signRequest.reasonPlaceholder", "Why are you signing?")}
                 value={reason}
                 onChange={(e) => setReason(e.currentTarget.value)}
                 disabled={disabled || signing}
               />
               <TextInput
-                label={t('certSign.collab.signRequest.location', 'Location (Optional)')}
-                placeholder={t('certSign.collab.signRequest.locationPlaceholder', 'Where are you signing from?')}
+                label={t("certSign.collab.signRequest.location", "Location (Optional)")}
+                placeholder={t("certSign.collab.signRequest.locationPlaceholder", "Where are you signing from?")}
                 value={location}
                 onChange={(e) => setLocation(e.currentTarget.value)}
                 disabled={disabled || signing}
@@ -256,14 +254,14 @@ export const CertificateConfigModal: React.FC<CertificateConfigModalProps> = ({
 
         <Group justify="space-between" wrap="wrap" mt="md">
           <Button variant="default" onClick={onClose} disabled={signing}>
-            {t('cancel', 'Cancel')}
+            {t("cancel", "Cancel")}
           </Button>
           <Button
             onClick={handleSign}
-            disabled={!isValid || disabled || signing || certValidation.status === 'validating'}
+            disabled={!isValid || disabled || signing || certValidation.status === "validating"}
             loading={signing}
           >
-            {t('certSign.collab.signRequest.certModal.sign', 'Sign Document')}
+            {t("certSign.collab.signRequest.certModal.sign", "Sign Document")}
           </Button>
         </Group>
       </Stack>
diff --git a/frontend/src/core/components/tools/certSign/modals/SelectSignatureModal.tsx b/frontend/src/core/components/tools/certSign/modals/SelectSignatureModal.tsx
index 6d79cc193b..bf09895976 100644
--- a/frontend/src/core/components/tools/certSign/modals/SelectSignatureModal.tsx
+++ b/frontend/src/core/components/tools/certSign/modals/SelectSignatureModal.tsx
@@ -1,16 +1,16 @@
-import { Modal, Stack, Button, Text, Group, Box, ActionIcon, UnstyledButton } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { useSavedSignatures, SavedSignature } from '@app/hooks/tools/sign/useSavedSignatures';
-import DrawIcon from '@mui/icons-material/Draw';
-import TextFieldsIcon from '@mui/icons-material/TextFields';
-import ImageIcon from '@mui/icons-material/Image';
-import CloseIcon from '@mui/icons-material/Close';
+import { Modal, Stack, Button, Text, Group, Box, ActionIcon, UnstyledButton } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { useSavedSignatures, SavedSignature } from "@app/hooks/tools/sign/useSavedSignatures";
+import DrawIcon from "@mui/icons-material/Draw";
+import TextFieldsIcon from "@mui/icons-material/TextFields";
+import ImageIcon from "@mui/icons-material/Image";
+import CloseIcon from "@mui/icons-material/Close";
 
 interface SelectSignatureModalProps {
   opened: boolean;
   onClose: () => void;
   onSignatureSelected: (signature: SavedSignature) => void;
-  onCreateNew: (type: 'canvas' | 'text' | 'image') => void;
+  onCreateNew: (type: "canvas" | "text" | "image") => void;
 }
 
 export const SelectSignatureModal: React.FC<SelectSignatureModalProps> = ({
@@ -23,24 +23,24 @@ export const SelectSignatureModal: React.FC<SelectSignatureModalProps> = ({
   const { savedSignatures, removeSignature } = useSavedSignatures();
 
   const sortedSavedSignatures = [...savedSignatures].sort(
-    (a, b) => (b.updatedAt ?? b.createdAt) - (a.updatedAt ?? a.createdAt)
+    (a, b) => (b.updatedAt ?? b.createdAt) - (a.updatedAt ?? a.createdAt),
   );
 
   const renderSignaturePreview = (sig: SavedSignature) => {
-    if (sig.type === 'text') {
+    if (sig.type === "text") {
       return (
         <Box
           style={{
             width: 72,
             height: 28,
-            backgroundColor: '#ffffff',
+            backgroundColor: "#ffffff",
             borderRadius: 8,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            padding: '0 8px',
-            overflow: 'hidden',
-            border: '1px solid var(--mantine-color-gray-3)',
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            padding: "0 8px",
+            overflow: "hidden",
+            border: "1px solid var(--mantine-color-gray-3)",
           }}
         >
           <Text
@@ -48,10 +48,10 @@ export const SelectSignatureModal: React.FC<SelectSignatureModalProps> = ({
             style={{
               fontFamily: sig.fontFamily,
               color: sig.textColor,
-              whiteSpace: 'nowrap',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              maxWidth: '100%',
+              whiteSpace: "nowrap",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              maxWidth: "100%",
             }}
           >
             {sig.signerName}
@@ -65,24 +65,24 @@ export const SelectSignatureModal: React.FC<SelectSignatureModalProps> = ({
         style={{
           width: 72,
           height: 28,
-          backgroundColor: '#ffffff',
+          backgroundColor: "#ffffff",
           borderRadius: 8,
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          padding: '2px 6px',
-          border: '1px solid var(--mantine-color-gray-3)',
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "2px 6px",
+          border: "1px solid var(--mantine-color-gray-3)",
         }}
       >
         <Box
           component="img"
           src={sig.dataUrl}
-          alt={sig.label || t('certSign.collab.signRequest.saved.defaultLabel', 'Signature')}
+          alt={sig.label || t("certSign.collab.signRequest.saved.defaultLabel", "Signature")}
           style={{
-            maxWidth: '100%',
-            maxHeight: '100%',
-            objectFit: 'contain',
-            display: 'block',
+            maxWidth: "100%",
+            maxHeight: "100%",
+            objectFit: "contain",
+            display: "block",
           }}
         />
       </Box>
@@ -93,7 +93,7 @@ export const SelectSignatureModal: React.FC<SelectSignatureModalProps> = ({
     <Modal
       opened={opened}
       onClose={onClose}
-      title={t('certSign.collab.signRequest.selectSignatureTitle', 'Select or Create Signature')}
+      title={t("certSign.collab.signRequest.selectSignatureTitle", "Select or Create Signature")}
       centered
       size="md"
     >
@@ -101,7 +101,7 @@ export const SelectSignatureModal: React.FC<SelectSignatureModalProps> = ({
         {sortedSavedSignatures.length > 0 && (
           <>
             <Text size="sm" fw={600}>
-              {t('certSign.collab.signRequest.savedSignatures', 'Saved Signatures')}
+              {t("certSign.collab.signRequest.savedSignatures", "Saved Signatures")}
             </Text>
             <Stack gap="xs">
               {sortedSavedSignatures.map((sig) => (
@@ -109,11 +109,14 @@ export const SelectSignatureModal: React.FC<SelectSignatureModalProps> = ({
                   key={sig.id}
                   gap={0}
                   wrap="nowrap"
-                  style={{ border: '1px solid var(--mantine-color-gray-3)', borderRadius: 8, overflow: 'hidden' }}
+                  style={{ border: "1px solid var(--mantine-color-gray-3)", borderRadius: 8, overflow: "hidden" }}
                 >
                   <UnstyledButton
-                    onClick={() => { onSignatureSelected(sig); onClose(); }}
-                    style={{ flex: 1, padding: '12px' }}
+                    onClick={() => {
+                      onSignatureSelected(sig);
+                      onClose();
+                    }}
+                    style={{ flex: 1, padding: "12px" }}
                   >
                     {renderSignaturePreview(sig)}
                   </UnstyledButton>
@@ -122,10 +125,10 @@ export const SelectSignatureModal: React.FC<SelectSignatureModalProps> = ({
                     variant="subtle"
                     size="sm"
                     onClick={() => removeSignature(sig.id)}
-                    aria-label={t('certSign.collab.signRequest.saved.delete', 'Delete signature')}
-                    style={{ margin: '0 6px' }}
+                    aria-label={t("certSign.collab.signRequest.saved.delete", "Delete signature")}
+                    style={{ margin: "0 6px" }}
                   >
-                    <CloseIcon sx={{ fontSize: '1rem' }} />
+                    <CloseIcon sx={{ fontSize: "1rem" }} />
                   </ActionIcon>
                 </Group>
               ))}
@@ -133,8 +136,8 @@ export const SelectSignatureModal: React.FC<SelectSignatureModalProps> = ({
           </>
         )}
 
-        <Text size="sm" fw={600} mt={sortedSavedSignatures.length > 0 ? 'md' : 0}>
-          {t('certSign.collab.signRequest.createNewSignature', 'Create New Signature')}
+        <Text size="sm" fw={600} mt={sortedSavedSignatures.length > 0 ? "md" : 0}>
+          {t("certSign.collab.signRequest.createNewSignature", "Create New Signature")}
         </Text>
 
         <Group grow>
@@ -142,31 +145,31 @@ export const SelectSignatureModal: React.FC<SelectSignatureModalProps> = ({
             variant="outline"
             leftSection={<DrawIcon />}
             onClick={() => {
-              onCreateNew('canvas');
+              onCreateNew("canvas");
               onClose();
             }}
           >
-            {t('certSign.collab.signRequest.modeTabs.draw', 'Draw')}
+            {t("certSign.collab.signRequest.modeTabs.draw", "Draw")}
           </Button>
           <Button
             variant="outline"
             leftSection={<TextFieldsIcon />}
             onClick={() => {
-              onCreateNew('text');
+              onCreateNew("text");
               onClose();
             }}
           >
-            {t('certSign.collab.signRequest.modeTabs.text', 'Type')}
+            {t("certSign.collab.signRequest.modeTabs.text", "Type")}
           </Button>
           <Button
             variant="outline"
             leftSection={<ImageIcon />}
             onClick={() => {
-              onCreateNew('image');
+              onCreateNew("image");
               onClose();
             }}
           >
-            {t('certSign.collab.signRequest.modeTabs.image', 'Upload')}
+            {t("certSign.collab.signRequest.modeTabs.image", "Upload")}
           </Button>
         </Group>
       </Stack>
diff --git a/frontend/src/core/components/tools/certSign/panels/ParticipantListPanel.tsx b/frontend/src/core/components/tools/certSign/panels/ParticipantListPanel.tsx
index 202c94c94d..aa7b5d8751 100644
--- a/frontend/src/core/components/tools/certSign/panels/ParticipantListPanel.tsx
+++ b/frontend/src/core/components/tools/certSign/panels/ParticipantListPanel.tsx
@@ -1,11 +1,11 @@
-import { Stack, Text, List, Group, Badge, ActionIcon } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import PendingIcon from '@mui/icons-material/Pending';
-import CancelIcon from '@mui/icons-material/Cancel';
-import DeleteIcon from '@mui/icons-material/Delete';
-import type { ParticipantInfo } from '@app/types/signingSession';
-import { getFileColor } from '@app/components/pageEditor/fileColors';
+import { Stack, Text, List, Group, Badge, ActionIcon } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import PendingIcon from "@mui/icons-material/Pending";
+import CancelIcon from "@mui/icons-material/Cancel";
+import DeleteIcon from "@mui/icons-material/Delete";
+import type { ParticipantInfo } from "@app/types/signingSession";
+import { getFileColor } from "@app/components/pageEditor/fileColors";
 
 interface ParticipantListPanelProps {
   participants: ParticipantInfo[];
@@ -13,35 +13,31 @@ interface ParticipantListPanelProps {
   onRemove: (participantId: number) => void;
 }
 
-export const ParticipantListPanel: React.FC<ParticipantListPanelProps> = ({
-  participants,
-  finalized,
-  onRemove,
-}) => {
+export const ParticipantListPanel: React.FC<ParticipantListPanelProps> = ({ participants, finalized, onRemove }) => {
   const { t } = useTranslation();
 
   const getIcon = (status: string) => {
-    if (status === 'SIGNED') return <CheckCircleIcon sx={{ color: 'green', fontSize: '1rem' }} />;
-    if (status === 'DECLINED') return <CancelIcon sx={{ color: 'red', fontSize: '1rem' }} />;
-    return <PendingIcon sx={{ color: 'orange', fontSize: '1rem' }} />;
+    if (status === "SIGNED") return <CheckCircleIcon sx={{ color: "green", fontSize: "1rem" }} />;
+    if (status === "DECLINED") return <CancelIcon sx={{ color: "red", fontSize: "1rem" }} />;
+    return <PendingIcon sx={{ color: "orange", fontSize: "1rem" }} />;
   };
 
   const getColor = (status: string) => {
-    if (status === 'SIGNED') return 'green';
-    if (status === 'DECLINED') return 'red';
-    return 'orange';
+    if (status === "SIGNED") return "green";
+    if (status === "DECLINED") return "red";
+    return "orange";
   };
 
   return (
     <Stack gap="md">
       <Text size="md" fw={600}>
-        {t('certSign.collab.sessionDetail.participants', 'Participants')}
+        {t("certSign.collab.sessionDetail.participants", "Participants")}
       </Text>
 
       <List spacing={8} size="sm">
         {participants.map((participant, participantIndex) => {
-          const isSigned = participant.status === 'SIGNED';
-          const isDeclined = participant.status === 'DECLINED';
+          const isSigned = participant.status === "SIGNED";
+          const isDeclined = participant.status === "DECLINED";
           const annotationColor = getFileColor(participantIndex);
 
           return (
@@ -49,7 +45,9 @@ export const ParticipantListPanel: React.FC<ParticipantListPanelProps> = ({
               <Group justify="space-between" wrap="nowrap" gap={4}>
                 <Stack gap={2} style={{ flex: 1, minWidth: 0 }}>
                   <Group gap={6} wrap="nowrap">
-                    <div style={{ width: 10, height: 10, borderRadius: '50%', backgroundColor: annotationColor, flexShrink: 0 }} />
+                    <div
+                      style={{ width: 10, height: 10, borderRadius: "50%", backgroundColor: annotationColor, flexShrink: 0 }}
+                    />
                     <Text size="xs" truncate>
                       {participant.name}
                     </Text>
@@ -69,9 +67,9 @@ export const ParticipantListPanel: React.FC<ParticipantListPanelProps> = ({
                     variant="subtle"
                     color="red"
                     onClick={() => onRemove(participant.id)}
-                    title={t('certSign.collab.sessionDetail.removeParticipant', 'Remove')}
+                    title={t("certSign.collab.sessionDetail.removeParticipant", "Remove")}
                   >
-                    <DeleteIcon sx={{ fontSize: '1rem' }} />
+                    <DeleteIcon sx={{ fontSize: "1rem" }} />
                   </ActionIcon>
                 )}
               </Group>
diff --git a/frontend/src/core/components/tools/certSign/panels/SessionActionsPanel.tsx b/frontend/src/core/components/tools/certSign/panels/SessionActionsPanel.tsx
index c3e9e2b287..a8a32b31f9 100644
--- a/frontend/src/core/components/tools/certSign/panels/SessionActionsPanel.tsx
+++ b/frontend/src/core/components/tools/certSign/panels/SessionActionsPanel.tsx
@@ -1,8 +1,8 @@
-import { Stack, Text, Button, Divider, Paper } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import AddIcon from '@mui/icons-material/Add';
-import type { SessionDetail } from '@app/types/signingSession';
+import { Stack, Text, Button, Divider, Paper } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import AddIcon from "@mui/icons-material/Add";
+import type { SessionDetail } from "@app/types/signingSession";
 
 interface SessionActionsPanelProps {
   session: SessionDetail;
@@ -23,7 +23,7 @@ export const SessionActionsPanel: React.FC<SessionActionsPanelProps> = ({
 }) => {
   const { t } = useTranslation();
 
-  const allSigned = session.participants.every((p) => p.status === 'SIGNED');
+  const allSigned = session.participants.every((p) => p.status === "SIGNED");
 
   return (
     <Stack gap="md">
@@ -31,12 +31,12 @@ export const SessionActionsPanel: React.FC<SessionActionsPanelProps> = ({
       {(session.dueDate || session.message) && (
         <Stack gap="xs">
           <Text size="sm" fw={600}>
-            {t('certSign.collab.sessionDetail.sessionInfo', 'Session Info')}
+            {t("certSign.collab.sessionDetail.sessionInfo", "Session Info")}
           </Text>
           {session.dueDate && (
             <Paper p="xs" withBorder>
               <Text size="xs" fw={600} c="dimmed">
-                {t('certSign.collab.sessionDetail.dueDate', 'Due Date')}
+                {t("certSign.collab.sessionDetail.dueDate", "Due Date")}
               </Text>
               <Text size="xs">{session.dueDate}</Text>
             </Paper>
@@ -44,7 +44,7 @@ export const SessionActionsPanel: React.FC<SessionActionsPanelProps> = ({
           {session.message && (
             <Paper p="xs" withBorder>
               <Text size="xs" fw={600} c="dimmed">
-                {t('certSign.collab.sessionDetail.messageLabel', 'Message')}
+                {t("certSign.collab.sessionDetail.messageLabel", "Message")}
               </Text>
               <Text size="xs">{session.message}</Text>
             </Paper>
@@ -56,41 +56,30 @@ export const SessionActionsPanel: React.FC<SessionActionsPanelProps> = ({
       {!session.finalized && (
         <>
           <Divider />
-          <Button
-            leftSection={<AddIcon />}
-            onClick={onAddParticipants}
-            variant="light"
-            fullWidth
-          >
-            {t('certSign.collab.sessionDetail.addParticipants', 'Add Participants')}
+          <Button leftSection={<AddIcon />} onClick={onAddParticipants} variant="light" fullWidth>
+            {t("certSign.collab.sessionDetail.addParticipants", "Add Participants")}
           </Button>
 
           <Divider />
 
           <Button
             leftSection={<CheckCircleIcon />}
-            color={allSigned ? 'green' : 'orange'}
+            color={allSigned ? "green" : "orange"}
             fullWidth
             onClick={onFinalize}
             loading={finalizing}
           >
             {allSigned
-              ? t('certSign.collab.finalize.button', 'Finalize and Load Signed PDF')
-              : t('certSign.collab.finalize.early', 'Finalize with Current Signatures')}
+              ? t("certSign.collab.finalize.button", "Finalize and Load Signed PDF")
+              : t("certSign.collab.finalize.early", "Finalize with Current Signatures")}
           </Button>
         </>
       )}
 
       {session.finalized && (
         <>
-          <Button
-            leftSection={<CheckCircleIcon />}
-            color="blue"
-            fullWidth
-            onClick={onLoadSignedPdf}
-            loading={loadingPdf}
-          >
-            {t('certSign.collab.sessionDetail.loadSignedPdf', 'Load Signed PDF into Active Files')}
+          <Button leftSection={<CheckCircleIcon />} color="blue" fullWidth onClick={onLoadSignedPdf} loading={loadingPdf}>
+            {t("certSign.collab.sessionDetail.loadSignedPdf", "Load Signed PDF into Active Files")}
           </Button>
         </>
       )}
diff --git a/frontend/src/core/components/tools/certSign/steps/AddSignaturesStep.tsx b/frontend/src/core/components/tools/certSign/steps/AddSignaturesStep.tsx
index b69ec0089f..6a2517650a 100644
--- a/frontend/src/core/components/tools/certSign/steps/AddSignaturesStep.tsx
+++ b/frontend/src/core/components/tools/certSign/steps/AddSignaturesStep.tsx
@@ -1,12 +1,12 @@
-import { useState } from 'react';
-import { Button, Stack, Text, Paper } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import AddIcon from '@mui/icons-material/Add';
-import CancelIcon from '@mui/icons-material/Cancel';
-import { SignatureTypeSelector, SignatureType } from '@app/components/shared/wetSignature/SignatureTypeSelector';
-import { DrawSignatureCanvas } from '@app/components/shared/wetSignature/DrawSignatureCanvas';
-import { UploadSignatureImage } from '@app/components/shared/wetSignature/UploadSignatureImage';
-import { TypeSignatureText } from '@app/components/shared/wetSignature/TypeSignatureText';
+import { useState } from "react";
+import { Button, Stack, Text, Paper } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import AddIcon from "@mui/icons-material/Add";
+import CancelIcon from "@mui/icons-material/Cancel";
+import { SignatureTypeSelector, SignatureType } from "@app/components/shared/wetSignature/SignatureTypeSelector";
+import { DrawSignatureCanvas } from "@app/components/shared/wetSignature/DrawSignatureCanvas";
+import { UploadSignatureImage } from "@app/components/shared/wetSignature/UploadSignatureImage";
+import { TypeSignatureText } from "@app/components/shared/wetSignature/TypeSignatureText";
 
 export interface PlacedSignature {
   id: string;
@@ -35,17 +35,17 @@ export const AddSignaturesStep: React.FC<AddSignaturesStepProps> = ({
   const { t } = useTranslation();
 
   // Current signature being created
-  const [signatureType, setSignatureType] = useState<SignatureType>('draw');
+  const [signatureType, setSignatureType] = useState<SignatureType>("draw");
   const [signature, setSignature] = useState<string | null>(null);
-  const [signatureText, setSignatureText] = useState('');
-  const [fontFamily, setFontFamily] = useState('Arial');
+  const [signatureText, setSignatureText] = useState("");
+  const [fontFamily, setFontFamily] = useState("Arial");
   const [fontSize, setFontSize] = useState(40);
-  const [textColor, setTextColor] = useState('#000000');
+  const [textColor, setTextColor] = useState("#000000");
 
   const hasSignature =
-    (signatureType === 'draw' && signature) ||
-    (signatureType === 'upload' && signature) ||
-    (signatureType === 'type' && signatureText && signature);
+    (signatureType === "draw" && signature) ||
+    (signatureType === "upload" && signature) ||
+    (signatureType === "type" && signatureText && signature);
 
   const handlePlaceSignature = () => {
     if (signature) {
@@ -58,33 +58,21 @@ export const AddSignaturesStep: React.FC<AddSignaturesStepProps> = ({
       {/* Signature Creation */}
       <Paper p="md" withBorder>
         <Text size="sm" fw={600} mb="md">
-          {t('certSign.collab.signRequest.steps.createSignature', 'Create Signature')}
+          {t("certSign.collab.signRequest.steps.createSignature", "Create Signature")}
         </Text>
 
         <Stack gap="md">
-          <SignatureTypeSelector
-            value={signatureType}
-            onChange={setSignatureType}
-            disabled={disabled || placementMode}
-          />
+          <SignatureTypeSelector value={signatureType} onChange={setSignatureType} disabled={disabled || placementMode} />
 
-          {signatureType === 'draw' && (
-            <DrawSignatureCanvas
-              signature={signature}
-              onChange={setSignature}
-              disabled={disabled || placementMode}
-            />
+          {signatureType === "draw" && (
+            <DrawSignatureCanvas signature={signature} onChange={setSignature} disabled={disabled || placementMode} />
           )}
 
-          {signatureType === 'upload' && (
-            <UploadSignatureImage
-              signature={signature}
-              onChange={setSignature}
-              disabled={disabled || placementMode}
-            />
+          {signatureType === "upload" && (
+            <UploadSignatureImage signature={signature} onChange={setSignature} disabled={disabled || placementMode} />
           )}
 
-          {signatureType === 'type' && (
+          {signatureType === "type" && (
             <TypeSignatureText
               text={signatureText}
               fontFamily={fontFamily}
@@ -100,22 +88,12 @@ export const AddSignaturesStep: React.FC<AddSignaturesStepProps> = ({
           )}
 
           {!placementMode ? (
-            <Button
-              leftSection={<AddIcon />}
-              onClick={handlePlaceSignature}
-              disabled={!hasSignature || disabled}
-            >
-              {t('certSign.collab.signRequest.steps.placeOnPdf', 'Place on PDF')}
+            <Button leftSection={<AddIcon />} onClick={handlePlaceSignature} disabled={!hasSignature || disabled}>
+              {t("certSign.collab.signRequest.steps.placeOnPdf", "Place on PDF")}
             </Button>
           ) : (
-            <Button
-              leftSection={<CancelIcon />}
-              onClick={onCancelPlacement}
-              disabled={disabled}
-              variant="light"
-              color="red"
-            >
-              {t('certSign.collab.signRequest.steps.cancelPlacement', 'Cancel Placement')}
+            <Button leftSection={<CancelIcon />} onClick={onCancelPlacement} disabled={disabled} variant="light" color="red">
+              {t("certSign.collab.signRequest.steps.cancelPlacement", "Cancel Placement")}
             </Button>
           )}
         </Stack>
@@ -123,7 +101,10 @@ export const AddSignaturesStep: React.FC<AddSignaturesStepProps> = ({
 
       {placementMode && (
         <Text size="xs" c="blue" ta="center">
-          {t('certSign.collab.signRequest.steps.clickMultipleTimes', 'Click on the PDF multiple times to place signatures. Drag any signature to move or resize it.')}
+          {t(
+            "certSign.collab.signRequest.steps.clickMultipleTimes",
+            "Click on the PDF multiple times to place signatures. Drag any signature to move or resize it.",
+          )}
         </Text>
       )}
     </Stack>
diff --git a/frontend/src/core/components/tools/certSign/steps/CertificateSelectionStep.tsx b/frontend/src/core/components/tools/certSign/steps/CertificateSelectionStep.tsx
index 7228156345..27e30a2da5 100644
--- a/frontend/src/core/components/tools/certSign/steps/CertificateSelectionStep.tsx
+++ b/frontend/src/core/components/tools/certSign/steps/CertificateSelectionStep.tsx
@@ -1,7 +1,7 @@
-import { Button, Stack, Group } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import { CertificateSelector, CertificateType, UploadFormat } from '@app/components/tools/certSign/CertificateSelector';
+import { Button, Stack, Group } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import { CertificateSelector, CertificateType, UploadFormat } from "@app/components/tools/certSign/CertificateSelector";
 
 interface CertificateSelectionStepProps {
   certType: CertificateType;
@@ -45,10 +45,7 @@ export const CertificateSelectionStep: React.FC<CertificateSelectionStepProps> =
   const { t } = useTranslation();
 
   // Validation: if UPLOAD type, need file and password
-  const isValid =
-    certType === 'USER_CERT' ||
-    certType === 'SERVER' ||
-    (certType === 'UPLOAD' && p12File && password);
+  const isValid = certType === "USER_CERT" || certType === "SERVER" || (certType === "UPLOAD" && p12File && password);
 
   return (
     <Stack gap="md">
@@ -72,10 +69,10 @@ export const CertificateSelectionStep: React.FC<CertificateSelectionStepProps> =
 
       <Group gap="sm">
         <Button variant="default" onClick={onBack} leftSection={<ArrowBackIcon sx={{ fontSize: 16 }} />}>
-          {t('certSign.collab.signRequest.steps.back', 'Back')}
+          {t("certSign.collab.signRequest.steps.back", "Back")}
         </Button>
         <Button onClick={onNext} disabled={!isValid || disabled} style={{ flex: 1 }}>
-          {t('certSign.collab.signRequest.steps.continueToPlacement', 'Continue to Placement')}
+          {t("certSign.collab.signRequest.steps.continueToPlacement", "Continue to Placement")}
         </Button>
       </Group>
     </Stack>
diff --git a/frontend/src/core/components/tools/certSign/steps/ReviewSignatureStep.tsx b/frontend/src/core/components/tools/certSign/steps/ReviewSignatureStep.tsx
index 1f4fe6437f..8833b70314 100644
--- a/frontend/src/core/components/tools/certSign/steps/ReviewSignatureStep.tsx
+++ b/frontend/src/core/components/tools/certSign/steps/ReviewSignatureStep.tsx
@@ -1,13 +1,13 @@
-import { Button, Stack, Text, Group, Divider, Paper } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
-import DrawIcon from '@mui/icons-material/Draw';
-import SecurityIcon from '@mui/icons-material/Security';
-import SettingsIcon from '@mui/icons-material/Settings';
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import CancelIcon from '@mui/icons-material/Cancel';
-import { CertificateType, UploadFormat } from '@app/components/tools/certSign/CertificateSelector';
-import type { SignRequestDetail } from '@app/types/signingSession';
+import { Button, Stack, Text, Group, Divider, Paper } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
+import DrawIcon from "@mui/icons-material/Draw";
+import SecurityIcon from "@mui/icons-material/Security";
+import SettingsIcon from "@mui/icons-material/Settings";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import CancelIcon from "@mui/icons-material/Cancel";
+import { CertificateType, UploadFormat } from "@app/components/tools/certSign/CertificateSelector";
+import type { SignRequestDetail } from "@app/types/signingSession";
 
 interface ReviewSignatureStepProps {
   signatureCount: number;
@@ -36,21 +36,21 @@ export const ReviewSignatureStep: React.FC<ReviewSignatureStepProps> = ({
 
   const getCertTypeName = () => {
     switch (certType) {
-      case 'USER_CERT':
-        return t('certSign.collab.signRequest.usePersonalCert', 'Personal Certificate');
-      case 'SERVER':
-        return t('certSign.collab.signRequest.useServerCert', 'Organization Certificate');
-      case 'UPLOAD':
-        return `${uploadFormat} — ${p12File?.name || t('certSign.collab.signRequest.uploadCert', 'Custom Certificate')}`;
+      case "USER_CERT":
+        return t("certSign.collab.signRequest.usePersonalCert", "Personal Certificate");
+      case "SERVER":
+        return t("certSign.collab.signRequest.useServerCert", "Organization Certificate");
+      case "UPLOAD":
+        return `${uploadFormat} — ${p12File?.name || t("certSign.collab.signRequest.uploadCert", "Custom Certificate")}`;
       default:
-        return '';
+        return "";
     }
   };
 
   return (
     <Stack gap="md">
       <Text size="sm" fw={600} c="dimmed">
-        {t('certSign.collab.signRequest.steps.reviewTitle', 'Review Before Signing')}
+        {t("certSign.collab.signRequest.steps.reviewTitle", "Review Before Signing")}
       </Text>
 
       {/* Signatures Summary */}
@@ -58,7 +58,7 @@ export const ReviewSignatureStep: React.FC<ReviewSignatureStepProps> = ({
         <Group gap="xs" mb="xs">
           <DrawIcon sx={{ fontSize: 18 }} />
           <Text size="sm" fw={600}>
-            {t('certSign.collab.signRequest.steps.yourSignatures', 'Your Signatures ({{count}})', {
+            {t("certSign.collab.signRequest.steps.yourSignatures", "Your Signatures ({{count}})", {
               count: signatureCount,
             })}
           </Text>
@@ -66,8 +66,8 @@ export const ReviewSignatureStep: React.FC<ReviewSignatureStepProps> = ({
         <Paper p="sm" withBorder>
           <Text size="sm">
             {signatureCount === 1
-              ? t('certSign.collab.signRequest.steps.oneSignature', '1 signature will be applied to the PDF')
-              : t('certSign.collab.signRequest.steps.multipleSignatures', '{{count}} signatures will be applied to the PDF', {
+              ? t("certSign.collab.signRequest.steps.oneSignature", "1 signature will be applied to the PDF")
+              : t("certSign.collab.signRequest.steps.multipleSignatures", "{{count}} signatures will be applied to the PDF", {
                   count: signatureCount,
                 })}
           </Text>
@@ -81,7 +81,7 @@ export const ReviewSignatureStep: React.FC<ReviewSignatureStepProps> = ({
         <Group gap="xs" mb="xs">
           <SecurityIcon sx={{ fontSize: 18 }} />
           <Text size="sm" fw={600}>
-            {t('certSign.collab.signRequest.steps.certificate', 'Certificate')}
+            {t("certSign.collab.signRequest.steps.certificate", "Certificate")}
           </Text>
         </Group>
         <Text size="sm">{getCertTypeName()}</Text>
@@ -94,29 +94,28 @@ export const ReviewSignatureStep: React.FC<ReviewSignatureStepProps> = ({
         <Group gap="xs" mb="xs">
           <SettingsIcon sx={{ fontSize: 18 }} />
           <Text size="sm" fw={600}>
-            {t('certSign.collab.signRequest.signatureSettings', 'Signature Settings')}
+            {t("certSign.collab.signRequest.signatureSettings", "Signature Settings")}
           </Text>
         </Group>
         <Paper p="sm" withBorder>
           <Text size="xs" c="dimmed" mb="xs">
-            {t('certSign.collab.signRequest.signatureInfo', 'These settings are configured by the document owner')}
+            {t("certSign.collab.signRequest.signatureInfo", "These settings are configured by the document owner")}
           </Text>
           <Stack gap="xs">
             <Text size="sm">
-              <strong>{t('certSign.collab.signRequest.steps.visibility', 'Visibility:')}</strong>{' '}
+              <strong>{t("certSign.collab.signRequest.steps.visibility", "Visibility:")}</strong>{" "}
               {signRequest.showSignature
-                ? t('certSign.collab.signRequest.steps.visible', 'Visible')
-                : t('certSign.collab.signRequest.steps.invisible', 'Invisible')}
+                ? t("certSign.collab.signRequest.steps.visible", "Visible")
+                : t("certSign.collab.signRequest.steps.invisible", "Invisible")}
             </Text>
             {signRequest.reason && (
               <Text size="sm">
-                <strong>{t('certSign.collab.signRequest.steps.reason', 'Reason:')}</strong> {signRequest.reason}
+                <strong>{t("certSign.collab.signRequest.steps.reason", "Reason:")}</strong> {signRequest.reason}
               </Text>
             )}
             {signRequest.location && (
               <Text size="sm">
-                <strong>{t('certSign.collab.signRequest.steps.location', 'Location:')}</strong>{' '}
-                {signRequest.location}
+                <strong>{t("certSign.collab.signRequest.steps.location", "Location:")}</strong> {signRequest.location}
               </Text>
             )}
           </Stack>
@@ -128,7 +127,7 @@ export const ReviewSignatureStep: React.FC<ReviewSignatureStepProps> = ({
       {/* Action Buttons */}
       <Group gap="sm" mt="md">
         <Button variant="default" onClick={onBack} leftSection={<ArrowBackIcon sx={{ fontSize: 16 }} />}>
-          {t('certSign.collab.signRequest.steps.back', 'Back')}
+          {t("certSign.collab.signRequest.steps.back", "Back")}
         </Button>
         <Button
           variant="light"
@@ -137,7 +136,7 @@ export const ReviewSignatureStep: React.FC<ReviewSignatureStepProps> = ({
           disabled={disabled}
           leftSection={<CancelIcon sx={{ fontSize: 16 }} />}
         >
-          {t('certSign.collab.signRequest.declineButton', 'Decline')}
+          {t("certSign.collab.signRequest.declineButton", "Decline")}
         </Button>
         <Button
           onClick={onSign}
@@ -146,7 +145,7 @@ export const ReviewSignatureStep: React.FC<ReviewSignatureStepProps> = ({
           color="green"
           leftSection={<CheckCircleIcon sx={{ fontSize: 16 }} />}
         >
-          {t('certSign.collab.signRequest.signButton', 'Sign Document')}
+          {t("certSign.collab.signRequest.signButton", "Sign Document")}
         </Button>
       </Group>
     </Stack>
diff --git a/frontend/src/core/components/tools/certSign/steps/SignatureCreationStep.tsx b/frontend/src/core/components/tools/certSign/steps/SignatureCreationStep.tsx
index 1eb0f6b5dd..b575a2ef46 100644
--- a/frontend/src/core/components/tools/certSign/steps/SignatureCreationStep.tsx
+++ b/frontend/src/core/components/tools/certSign/steps/SignatureCreationStep.tsx
@@ -1,9 +1,9 @@
-import { Button, Stack } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { SignatureTypeSelector, SignatureType } from '@app/components/shared/wetSignature/SignatureTypeSelector';
-import { DrawSignatureCanvas } from '@app/components/shared/wetSignature/DrawSignatureCanvas';
-import { UploadSignatureImage } from '@app/components/shared/wetSignature/UploadSignatureImage';
-import { TypeSignatureText } from '@app/components/shared/wetSignature/TypeSignatureText';
+import { Button, Stack } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { SignatureTypeSelector, SignatureType } from "@app/components/shared/wetSignature/SignatureTypeSelector";
+import { DrawSignatureCanvas } from "@app/components/shared/wetSignature/DrawSignatureCanvas";
+import { UploadSignatureImage } from "@app/components/shared/wetSignature/UploadSignatureImage";
+import { TypeSignatureText } from "@app/components/shared/wetSignature/TypeSignatureText";
 
 interface SignatureCreationStepProps {
   signatureType: SignatureType;
@@ -42,35 +42,23 @@ export const SignatureCreationStep: React.FC<SignatureCreationStepProps> = ({
   const { t } = useTranslation();
 
   const hasSignature =
-    (signatureType === 'draw' && signature) ||
-    (signatureType === 'upload' && signature) ||
-    (signatureType === 'type' && signatureText && signature);
+    (signatureType === "draw" && signature) ||
+    (signatureType === "upload" && signature) ||
+    (signatureType === "type" && signatureText && signature);
 
   return (
     <Stack gap="md">
-      <SignatureTypeSelector
-        value={signatureType}
-        onChange={onSignatureTypeChange}
-        disabled={disabled}
-      />
+      <SignatureTypeSelector value={signatureType} onChange={onSignatureTypeChange} disabled={disabled} />
 
-      {signatureType === 'draw' && (
-        <DrawSignatureCanvas
-          signature={signature}
-          onChange={onSignatureChange}
-          disabled={disabled}
-        />
+      {signatureType === "draw" && (
+        <DrawSignatureCanvas signature={signature} onChange={onSignatureChange} disabled={disabled} />
       )}
 
-      {signatureType === 'upload' && (
-        <UploadSignatureImage
-          signature={signature}
-          onChange={onSignatureChange}
-          disabled={disabled}
-        />
+      {signatureType === "upload" && (
+        <UploadSignatureImage signature={signature} onChange={onSignatureChange} disabled={disabled} />
       )}
 
-      {signatureType === 'type' && (
+      {signatureType === "type" && (
         <TypeSignatureText
           text={signatureText}
           fontFamily={fontFamily}
@@ -86,7 +74,7 @@ export const SignatureCreationStep: React.FC<SignatureCreationStepProps> = ({
       )}
 
       <Button onClick={onNext} disabled={!hasSignature || disabled} fullWidth>
-        {t('certSign.collab.signRequest.steps.continue', 'Continue to Certificate Selection')}
+        {t("certSign.collab.signRequest.steps.continue", "Continue to Certificate Selection")}
       </Button>
     </Stack>
   );
diff --git a/frontend/src/core/components/tools/certSign/steps/SignaturePlacementStep.tsx b/frontend/src/core/components/tools/certSign/steps/SignaturePlacementStep.tsx
index 529a1c58a5..a6e6e5e5da 100644
--- a/frontend/src/core/components/tools/certSign/steps/SignaturePlacementStep.tsx
+++ b/frontend/src/core/components/tools/certSign/steps/SignaturePlacementStep.tsx
@@ -1,6 +1,6 @@
-import { Button, Stack, Text, Group } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import { Button, Stack, Text, Group } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import ArrowBackIcon from "@mui/icons-material/ArrowBack";
 
 interface SignaturePlacementStepProps {
   isPlaced: boolean;
@@ -26,25 +26,25 @@ export const SignaturePlacementStep: React.FC<SignaturePlacementStepProps> = ({
       <Text size="xs" c="dimmed">
         {isPlaced
           ? t(
-              'certSign.collab.signRequest.steps.signaturePlaced',
-              'Signature placed on page {{page}}. You can adjust the position by clicking again or continue to review.',
-              { page: placementInfo?.page || 1 }
+              "certSign.collab.signRequest.steps.signaturePlaced",
+              "Signature placed on page {{page}}. You can adjust the position by clicking again or continue to review.",
+              { page: placementInfo?.page || 1 },
             )
           : t(
-              'certSign.collab.signRequest.steps.clickToPlace',
-              'Click on the PDF where you would like your signature to appear.'
+              "certSign.collab.signRequest.steps.clickToPlace",
+              "Click on the PDF where you would like your signature to appear.",
             )}
       </Text>
 
       {/* PDF Viewer (passed as children) */}
-      <div style={{ flex: 1, minHeight: '400px' }}>{children}</div>
+      <div style={{ flex: 1, minHeight: "400px" }}>{children}</div>
 
       <Group gap="sm">
         <Button variant="default" onClick={onBack} leftSection={<ArrowBackIcon sx={{ fontSize: 16 }} />}>
-          {t('certSign.collab.signRequest.steps.back', 'Back')}
+          {t("certSign.collab.signRequest.steps.back", "Back")}
         </Button>
         <Button onClick={onNext} disabled={!isPlaced || disabled} style={{ flex: 1 }}>
-          {t('certSign.collab.signRequest.steps.continueToReview', 'Continue to Review')}
+          {t("certSign.collab.signRequest.steps.continueToReview", "Continue to Review")}
         </Button>
       </Group>
     </Stack>
diff --git a/frontend/src/core/components/tools/changeMetadata/ChangeMetadataSingleStep.tsx b/frontend/src/core/components/tools/changeMetadata/ChangeMetadataSingleStep.tsx
index c13bb4f724..2b83da828d 100644
--- a/frontend/src/core/components/tools/changeMetadata/ChangeMetadataSingleStep.tsx
+++ b/frontend/src/core/components/tools/changeMetadata/ChangeMetadataSingleStep.tsx
@@ -1,6 +1,9 @@
 import { Stack, Divider, Text } from "@mantine/core";
 import { useTranslation } from "react-i18next";
-import { ChangeMetadataParameters, createCustomMetadataFunctions } from "@app/hooks/tools/changeMetadata/useChangeMetadataParameters";
+import {
+  ChangeMetadataParameters,
+  createCustomMetadataFunctions,
+} from "@app/hooks/tools/changeMetadata/useChangeMetadataParameters";
 import { useMetadataExtraction } from "@app/hooks/tools/changeMetadata/useMetadataExtraction";
 import DeleteAllStep from "@app/components/tools/changeMetadata/steps/DeleteAllStep";
 import StandardMetadataStep from "@app/components/tools/changeMetadata/steps/StandardMetadataStep";
@@ -13,17 +16,13 @@ interface ChangeMetadataSingleStepProps {
   disabled?: boolean;
 }
 
-const ChangeMetadataSingleStep = ({
-  parameters,
-  onParameterChange,
-  disabled = false
-}: ChangeMetadataSingleStepProps) => {
+const ChangeMetadataSingleStep = ({ parameters, onParameterChange, disabled = false }: ChangeMetadataSingleStepProps) => {
   const { t } = useTranslation();
 
   // Get custom metadata functions using the utility
   const { addCustomMetadata, removeCustomMetadata, updateCustomMetadata } = createCustomMetadataFunctions(
     parameters,
-    onParameterChange
+    onParameterChange,
   );
 
   // Extract metadata from uploaded files
@@ -39,13 +38,9 @@ const ChangeMetadataSingleStep = ({
       {/* Delete All */}
       <Stack gap="md">
         <Text size="sm" fw={500}>
-          {t('changeMetadata.deleteAll.label', 'Delete All Metadata')}
+          {t("changeMetadata.deleteAll.label", "Delete All Metadata")}
         </Text>
-        <DeleteAllStep
-          parameters={parameters}
-          onParameterChange={onParameterChange}
-          disabled={disabled}
-        />
+        <DeleteAllStep parameters={parameters} onParameterChange={onParameterChange} disabled={disabled} />
       </Stack>
 
       <Divider />
@@ -53,13 +48,9 @@ const ChangeMetadataSingleStep = ({
       {/* Standard Metadata Fields */}
       <Stack gap="md">
         <Text size="sm" fw={500}>
-          {t('changeMetadata.standardFields.title', 'Standard Metadata')}
+          {t("changeMetadata.standardFields.title", "Standard Metadata")}
         </Text>
-        <StandardMetadataStep
-          parameters={parameters}
-          onParameterChange={onParameterChange}
-          disabled={fieldsDisabled}
-        />
+        <StandardMetadataStep parameters={parameters} onParameterChange={onParameterChange} disabled={fieldsDisabled} />
       </Stack>
 
       <Divider />
@@ -67,13 +58,9 @@ const ChangeMetadataSingleStep = ({
       {/* Document Dates */}
       <Stack gap="md">
         <Text size="sm" fw={500}>
-          {t('changeMetadata.dates.title', 'Document Dates')}
+          {t("changeMetadata.dates.title", "Document Dates")}
         </Text>
-        <DocumentDatesStep
-          parameters={parameters}
-          onParameterChange={onParameterChange}
-          disabled={fieldsDisabled}
-        />
+        <DocumentDatesStep parameters={parameters} onParameterChange={onParameterChange} disabled={fieldsDisabled} />
       </Stack>
 
       <Divider />
@@ -81,7 +68,7 @@ const ChangeMetadataSingleStep = ({
       {/* Advanced Options */}
       <Stack gap="md">
         <Text size="sm" fw={500}>
-          {t('changeMetadata.advanced.title', 'Advanced Options')}
+          {t("changeMetadata.advanced.title", "Advanced Options")}
         </Text>
         <AdvancedOptionsStep
           parameters={parameters}
diff --git a/frontend/src/core/components/tools/changeMetadata/steps/AdvancedOptionsStep.tsx b/frontend/src/core/components/tools/changeMetadata/steps/AdvancedOptionsStep.tsx
index 6907a1018d..79b8eca220 100644
--- a/frontend/src/core/components/tools/changeMetadata/steps/AdvancedOptionsStep.tsx
+++ b/frontend/src/core/components/tools/changeMetadata/steps/AdvancedOptionsStep.tsx
@@ -20,7 +20,7 @@ const AdvancedOptionsStep = ({
   disabled = false,
   addCustomMetadata,
   removeCustomMetadata,
-  updateCustomMetadata
+  updateCustomMetadata,
 }: AdvancedOptionsStepProps) => {
   const { t } = useTranslation();
 
@@ -28,18 +28,18 @@ const AdvancedOptionsStep = ({
     <Stack gap="md">
       {/* Trapped Status */}
       <Select
-        label={t('changeMetadata.trapped.label', 'Trapped Status')}
+        label={t("changeMetadata.trapped.label", "Trapped Status")}
         value={parameters.trapped}
         onChange={(value) => {
           if (value) {
-            onParameterChange('trapped', value as TrappedStatus);
+            onParameterChange("trapped", value as TrappedStatus);
           }
         }}
         disabled={disabled || parameters.deleteAll}
         data={[
-          { value: TrappedStatus.UNKNOWN, label: t('changeMetadata.trapped.unknown', 'Unknown') },
-          { value: TrappedStatus.TRUE, label: t('changeMetadata.trapped.true', 'True') },
-          { value: TrappedStatus.FALSE, label: t('changeMetadata.trapped.false', 'False') }
+          { value: TrappedStatus.UNKNOWN, label: t("changeMetadata.trapped.unknown", "Unknown") },
+          { value: TrappedStatus.TRUE, label: t("changeMetadata.trapped.true", "True") },
+          { value: TrappedStatus.FALSE, label: t("changeMetadata.trapped.false", "False") },
         ]}
         comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
       />
diff --git a/frontend/src/core/components/tools/changeMetadata/steps/CustomMetadataStep.tsx b/frontend/src/core/components/tools/changeMetadata/steps/CustomMetadataStep.tsx
index 3231144078..d2cbab7b4f 100644
--- a/frontend/src/core/components/tools/changeMetadata/steps/CustomMetadataStep.tsx
+++ b/frontend/src/core/components/tools/changeMetadata/steps/CustomMetadataStep.tsx
@@ -16,7 +16,7 @@ const CustomMetadataStep = ({
   disabled = false,
   addCustomMetadata,
   removeCustomMetadata,
-  updateCustomMetadata
+  updateCustomMetadata,
 }: CustomMetadataStepProps) => {
   const { t } = useTranslation();
 
@@ -24,46 +24,35 @@ const CustomMetadataStep = ({
     <Stack gap="sm">
       <Group justify="space-between" align="center">
         <Text size="sm" fw={500}>
-          {t('changeMetadata.customFields.title', 'Custom Metadata')}
+          {t("changeMetadata.customFields.title", "Custom Metadata")}
         </Text>
-        <Button
-          size="xs"
-          variant="light"
-          onClick={() => addCustomMetadata()}
-          disabled={disabled}
-        >
-          {t('changeMetadata.customFields.add', 'Add Field')}
+        <Button size="xs" variant="light" onClick={() => addCustomMetadata()} disabled={disabled}>
+          {t("changeMetadata.customFields.add", "Add Field")}
         </Button>
       </Group>
 
       {parameters.customMetadata.length > 0 && (
         <Text size="xs" c="dimmed">
-          {t('changeMetadata.customFields.description', 'Add custom metadata fields to the document')}
+          {t("changeMetadata.customFields.description", "Add custom metadata fields to the document")}
         </Text>
       )}
 
       {parameters.customMetadata.map((entry) => (
         <Stack key={entry.id} gap="xs">
           <TextInput
-            placeholder={t('changeMetadata.customFields.keyPlaceholder', 'Custom key')}
+            placeholder={t("changeMetadata.customFields.keyPlaceholder", "Custom key")}
             value={entry.key}
             onChange={(e) => updateCustomMetadata(entry.id, e.target.value, entry.value)}
             disabled={disabled}
           />
           <TextInput
-            placeholder={t('changeMetadata.customFields.valuePlaceholder', 'Custom value')}
+            placeholder={t("changeMetadata.customFields.valuePlaceholder", "Custom value")}
             value={entry.value}
             onChange={(e) => updateCustomMetadata(entry.id, entry.key, e.target.value)}
             disabled={disabled}
           />
-          <Button
-            size="xs"
-            variant="light"
-            color="red"
-            onClick={() => removeCustomMetadata(entry.id)}
-            disabled={disabled}
-          >
-            {t('changeMetadata.customFields.remove', 'Remove')}
+          <Button size="xs" variant="light" color="red" onClick={() => removeCustomMetadata(entry.id)} disabled={disabled}>
+            {t("changeMetadata.customFields.remove", "Remove")}
           </Button>
         </Stack>
       ))}
diff --git a/frontend/src/core/components/tools/changeMetadata/steps/DeleteAllStep.tsx b/frontend/src/core/components/tools/changeMetadata/steps/DeleteAllStep.tsx
index ec86ea57dc..05cde06bbd 100644
--- a/frontend/src/core/components/tools/changeMetadata/steps/DeleteAllStep.tsx
+++ b/frontend/src/core/components/tools/changeMetadata/steps/DeleteAllStep.tsx
@@ -8,18 +8,14 @@ interface DeleteAllStepProps {
   disabled?: boolean;
 }
 
-const DeleteAllStep = ({
-  parameters,
-  onParameterChange,
-  disabled = false
-}: DeleteAllStepProps) => {
+const DeleteAllStep = ({ parameters, onParameterChange, disabled = false }: DeleteAllStepProps) => {
   const { t } = useTranslation();
 
   return (
     <Checkbox
-      label={t('changeMetadata.deleteAll.checkbox', 'Delete all metadata')}
+      label={t("changeMetadata.deleteAll.checkbox", "Delete all metadata")}
       checked={parameters.deleteAll}
-      onChange={(e) => onParameterChange('deleteAll', e.target.checked)}
+      onChange={(e) => onParameterChange("deleteAll", e.target.checked)}
       disabled={disabled}
     />
   );
diff --git a/frontend/src/core/components/tools/changeMetadata/steps/DocumentDatesStep.tsx b/frontend/src/core/components/tools/changeMetadata/steps/DocumentDatesStep.tsx
index abcf7330c9..0c406d661a 100644
--- a/frontend/src/core/components/tools/changeMetadata/steps/DocumentDatesStep.tsx
+++ b/frontend/src/core/components/tools/changeMetadata/steps/DocumentDatesStep.tsx
@@ -9,29 +9,25 @@ interface DocumentDatesStepProps {
   disabled?: boolean;
 }
 
-const DocumentDatesStep = ({
-  parameters,
-  onParameterChange,
-  disabled = false
-}: DocumentDatesStepProps) => {
+const DocumentDatesStep = ({ parameters, onParameterChange, disabled = false }: DocumentDatesStepProps) => {
   const { t } = useTranslation();
 
   return (
     <Stack gap="md">
       <DateTimePicker
-        label={t('changeMetadata.creationDate.label', 'Creation Date')}
-        placeholder={t('changeMetadata.creationDate.placeholder', 'Creation date')}
+        label={t("changeMetadata.creationDate.label", "Creation Date")}
+        placeholder={t("changeMetadata.creationDate.placeholder", "Creation date")}
         value={parameters.creationDate}
-        onChange={(date) => onParameterChange('creationDate', date ? new Date(date) : null)}
+        onChange={(date) => onParameterChange("creationDate", date ? new Date(date) : null)}
         disabled={disabled}
         clearable
       />
 
       <DateTimePicker
-        label={t('changeMetadata.modificationDate.label', 'Modification Date')}
-        placeholder={t('changeMetadata.modificationDate.placeholder', 'Modification date')}
+        label={t("changeMetadata.modificationDate.label", "Modification Date")}
+        placeholder={t("changeMetadata.modificationDate.placeholder", "Modification date")}
         value={parameters.modificationDate}
-        onChange={(date) => onParameterChange('modificationDate', date ? new Date(date) : null)}
+        onChange={(date) => onParameterChange("modificationDate", date ? new Date(date) : null)}
         disabled={disabled}
         clearable
       />
diff --git a/frontend/src/core/components/tools/changeMetadata/steps/StandardMetadataStep.tsx b/frontend/src/core/components/tools/changeMetadata/steps/StandardMetadataStep.tsx
index 3086dd587e..84cce5f150 100644
--- a/frontend/src/core/components/tools/changeMetadata/steps/StandardMetadataStep.tsx
+++ b/frontend/src/core/components/tools/changeMetadata/steps/StandardMetadataStep.tsx
@@ -8,60 +8,56 @@ interface StandardMetadataStepProps {
   disabled?: boolean;
 }
 
-const StandardMetadataStep = ({
-  parameters,
-  onParameterChange,
-  disabled = false
-}: StandardMetadataStepProps) => {
+const StandardMetadataStep = ({ parameters, onParameterChange, disabled = false }: StandardMetadataStepProps) => {
   const { t } = useTranslation();
 
   return (
     <Stack gap="md">
       <TextInput
-        label={t('changeMetadata.title.label', 'Title')}
-        placeholder={t('changeMetadata.title.placeholder', 'Document title')}
+        label={t("changeMetadata.title.label", "Title")}
+        placeholder={t("changeMetadata.title.placeholder", "Document title")}
         value={parameters.title}
-        onChange={(e) => onParameterChange('title', e.target.value)}
+        onChange={(e) => onParameterChange("title", e.target.value)}
         disabled={disabled}
       />
 
       <TextInput
-        label={t('changeMetadata.author.label', 'Author')}
-        placeholder={t('changeMetadata.author.placeholder', 'Document author')}
+        label={t("changeMetadata.author.label", "Author")}
+        placeholder={t("changeMetadata.author.placeholder", "Document author")}
         value={parameters.author}
-        onChange={(e) => onParameterChange('author', e.target.value)}
+        onChange={(e) => onParameterChange("author", e.target.value)}
         disabled={disabled}
       />
 
       <TextInput
-        label={t('changeMetadata.subject.label', 'Subject')}
-        placeholder={t('changeMetadata.subject.placeholder', 'Document subject')}
+        label={t("changeMetadata.subject.label", "Subject")}
+        placeholder={t("changeMetadata.subject.placeholder", "Document subject")}
         value={parameters.subject}
-        onChange={(e) => onParameterChange('subject', e.target.value)}
+        onChange={(e) => onParameterChange("subject", e.target.value)}
         disabled={disabled}
       />
 
       <TextInput
-        label={t('changeMetadata.keywords.label', 'Keywords')}
-        placeholder={t('changeMetadata.keywords.placeholder', 'Document keywords')}
+        label={t("changeMetadata.keywords.label", "Keywords")}
+        placeholder={t("changeMetadata.keywords.placeholder", "Document keywords")}
         value={parameters.keywords}
-        onChange={(e) => onParameterChange('keywords', e.target.value)}
+        onChange={(e) => onParameterChange("keywords", e.target.value)}
         disabled={disabled}
       />
 
       <TextInput
-        label={t('changeMetadata.creator.label', 'Creator')}
-        placeholder={t('changeMetadata.creator.placeholder', 'Document creator')}
+        label={t("changeMetadata.creator.label", "Creator")}
+        placeholder={t("changeMetadata.creator.placeholder", "Document creator")}
         value={parameters.creator}
-        onChange={(e) => onParameterChange('creator', e.target.value)}
+        onChange={(e) => onParameterChange("creator", e.target.value)}
         disabled={disabled}
       />
 
       <TextInput
-        label={t('changeMetadata.producer.label', 'Producer')}
-        placeholder={t('changeMetadata.producer.placeholder', 'Document producer')}
+        label={t("changeMetadata.producer.label", "Producer")}
+        placeholder={t("changeMetadata.producer.placeholder", "Document producer")}
         value={parameters.producer}
-        onChange={(e) => onParameterChange('producer', e.target.value)}
+        onChange={(e) => onParameterChange("producer", e.target.value)}
         disabled={disabled}
       />
     </Stack>
diff --git a/frontend/src/core/components/tools/changePermissions/ChangePermissionsSettings.test.tsx b/frontend/src/core/components/tools/changePermissions/ChangePermissionsSettings.test.tsx
index c50d20580c..cbf6c59445 100644
--- a/frontend/src/core/components/tools/changePermissions/ChangePermissionsSettings.test.tsx
+++ b/frontend/src/core/components/tools/changePermissions/ChangePermissionsSettings.test.tsx
@@ -1,162 +1,148 @@
-import { describe, expect, test, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { MantineProvider } from '@mantine/core';
-import ChangePermissionsSettings from '@app/components/tools/changePermissions/ChangePermissionsSettings';
-import { defaultParameters } from '@app/hooks/tools/changePermissions/useChangePermissionsParameters';
-import type { ChangePermissionsParameters } from '@app/hooks/tools/changePermissions/useChangePermissionsParameters';
+import { describe, expect, test, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { MantineProvider } from "@mantine/core";
+import ChangePermissionsSettings from "@app/components/tools/changePermissions/ChangePermissionsSettings";
+import { defaultParameters } from "@app/hooks/tools/changePermissions/useChangePermissionsParameters";
+import type { ChangePermissionsParameters } from "@app/hooks/tools/changePermissions/useChangePermissionsParameters";
 
 // Mock useTranslation with predictable return values
 const mockT = vi.fn((key: string) => `mock-${key}`);
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({ t: mockT })
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: mockT }),
 }));
 
 // Wrapper component to provide Mantine context
-const TestWrapper = ({ children }: { children: React.ReactNode }) => (
-  <MantineProvider>{children}</MantineProvider>
-);
+const TestWrapper = ({ children }: { children: React.ReactNode }) => <MantineProvider>{children}</MantineProvider>;
 
-describe('ChangePermissionsSettings', () => {
+describe("ChangePermissionsSettings", () => {
   const mockOnParameterChange = vi.fn();
 
   beforeEach(() => {
     vi.clearAllMocks();
   });
 
-  test('should render all permission checkboxes', () => {
+  test("should render all permission checkboxes", () => {
     render(
       <TestWrapper>
-        <ChangePermissionsSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <ChangePermissionsSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
     // Should render checkboxes for all permission types
     const permissionKeys = Object.keys(defaultParameters) as Array<keyof ChangePermissionsParameters>;
-    const checkboxes = screen.getAllByRole('checkbox');
+    const checkboxes = screen.getAllByRole("checkbox");
     expect(checkboxes).toHaveLength(permissionKeys.length);
 
     // Verify specific permission labels are rendered
-    expect(screen.getByText('mock-changePermissions.permissions.preventAssembly.label')).toBeInTheDocument();
-    expect(screen.getByText('mock-changePermissions.permissions.preventPrinting.label')).toBeInTheDocument();
-    expect(screen.getByText('mock-changePermissions.permissions.preventModify.label')).toBeInTheDocument();
-    expect(screen.getByText('mock-changePermissions.permissions.preventExtractContent.label')).toBeInTheDocument();
+    expect(screen.getByText("mock-changePermissions.permissions.preventAssembly.label")).toBeInTheDocument();
+    expect(screen.getByText("mock-changePermissions.permissions.preventPrinting.label")).toBeInTheDocument();
+    expect(screen.getByText("mock-changePermissions.permissions.preventModify.label")).toBeInTheDocument();
+    expect(screen.getByText("mock-changePermissions.permissions.preventExtractContent.label")).toBeInTheDocument();
   });
 
-  test('should render all permission types with correct labels', () => {
+  test("should render all permission types with correct labels", () => {
     render(
       <TestWrapper>
-        <ChangePermissionsSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <ChangePermissionsSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
     const permissionKeys = Object.keys(defaultParameters) as Array<keyof ChangePermissionsParameters>;
 
-    permissionKeys.forEach(permission => {
+    permissionKeys.forEach((permission) => {
       expect(screen.getByText(`mock-changePermissions.permissions.${permission}.label`)).toBeInTheDocument();
     });
   });
 
-  test('should show checkboxes as unchecked by default', () => {
+  test("should show checkboxes as unchecked by default", () => {
     render(
       <TestWrapper>
-        <ChangePermissionsSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <ChangePermissionsSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
-    const checkboxes = screen.getAllByRole('checkbox') as HTMLInputElement[];
-    checkboxes.forEach(checkbox => {
+    const checkboxes = screen.getAllByRole("checkbox") as HTMLInputElement[];
+    checkboxes.forEach((checkbox) => {
       expect(checkbox.checked).toBe(false);
     });
   });
 
-  test('should show checkboxes as checked when parameters are true', () => {
+  test("should show checkboxes as checked when parameters are true", () => {
     const checkedParameters: ChangePermissionsParameters = {
       ...defaultParameters,
       preventAssembly: true,
       preventPrinting: true,
-      preventModify: true
+      preventModify: true,
     };
 
     render(
       <TestWrapper>
-        <ChangePermissionsSettings
-          parameters={checkedParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <ChangePermissionsSettings parameters={checkedParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
     // Find specific checkboxes by their labels and verify they are checked
-    const assemblyCheckbox = screen.getByLabelText('mock-changePermissions.permissions.preventAssembly.label') as HTMLInputElement;
-    const printingCheckbox = screen.getByLabelText('mock-changePermissions.permissions.preventPrinting.label') as HTMLInputElement;
-    const modifyCheckbox = screen.getByLabelText('mock-changePermissions.permissions.preventModify.label') as HTMLInputElement;
-    const formCheckbox = screen.getByLabelText('mock-changePermissions.permissions.preventFillInForm.label') as HTMLInputElement;
+    const assemblyCheckbox = screen.getByLabelText(
+      "mock-changePermissions.permissions.preventAssembly.label",
+    ) as HTMLInputElement;
+    const printingCheckbox = screen.getByLabelText(
+      "mock-changePermissions.permissions.preventPrinting.label",
+    ) as HTMLInputElement;
+    const modifyCheckbox = screen.getByLabelText("mock-changePermissions.permissions.preventModify.label") as HTMLInputElement;
+    const formCheckbox = screen.getByLabelText(
+      "mock-changePermissions.permissions.preventFillInForm.label",
+    ) as HTMLInputElement;
 
     expect(assemblyCheckbox.checked).toBe(true);
     expect(printingCheckbox.checked).toBe(true);
     expect(modifyCheckbox.checked).toBe(true);
-    expect(formCheckbox.checked).toBe(false);  // Ensure other checkboxes are unaffected
+    expect(formCheckbox.checked).toBe(false); // Ensure other checkboxes are unaffected
   });
 
   test.each([
-    { initialValue: false, expectedValue: true, description: 'checking an unchecked box' },
-    { initialValue: true, expectedValue: false, description: 'unchecking a checked box' }
-  ])('should call onParameterChange with $expectedValue when $description', ({ initialValue, expectedValue }) => {
+    { initialValue: false, expectedValue: true, description: "checking an unchecked box" },
+    { initialValue: true, expectedValue: false, description: "unchecking a checked box" },
+  ])("should call onParameterChange with $expectedValue when $description", ({ initialValue, expectedValue }) => {
     const testParameters: ChangePermissionsParameters = {
       ...defaultParameters,
-      preventAssembly: initialValue
+      preventAssembly: initialValue,
     };
 
     render(
       <TestWrapper>
-        <ChangePermissionsSettings
-          parameters={testParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <ChangePermissionsSettings parameters={testParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
-    const assemblyCheckbox = screen.getByLabelText('mock-changePermissions.permissions.preventAssembly.label');
+    const assemblyCheckbox = screen.getByLabelText("mock-changePermissions.permissions.preventAssembly.label");
     fireEvent.click(assemblyCheckbox);
 
-    expect(mockOnParameterChange).toHaveBeenCalledWith('preventAssembly', expectedValue);
+    expect(mockOnParameterChange).toHaveBeenCalledWith("preventAssembly", expectedValue);
   });
 
-  test('should handle multiple checkbox interactions', () => {
+  test("should handle multiple checkbox interactions", () => {
     render(
       <TestWrapper>
-        <ChangePermissionsSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <ChangePermissionsSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
     // Click multiple checkboxes
-    const assemblyCheckbox = screen.getByLabelText('mock-changePermissions.permissions.preventAssembly.label');
-    const printingCheckbox = screen.getByLabelText('mock-changePermissions.permissions.preventPrinting.label');
+    const assemblyCheckbox = screen.getByLabelText("mock-changePermissions.permissions.preventAssembly.label");
+    const printingCheckbox = screen.getByLabelText("mock-changePermissions.permissions.preventPrinting.label");
 
     fireEvent.click(assemblyCheckbox);
     fireEvent.click(printingCheckbox);
 
-    expect(mockOnParameterChange).toHaveBeenCalledWith('preventAssembly', true);
-    expect(mockOnParameterChange).toHaveBeenCalledWith('preventPrinting', true);
+    expect(mockOnParameterChange).toHaveBeenCalledWith("preventAssembly", true);
+    expect(mockOnParameterChange).toHaveBeenCalledWith("preventPrinting", true);
     expect(mockOnParameterChange).toHaveBeenCalledTimes(2);
   });
 
   test.each([
     { disabled: true, expectedState: true },
-    { disabled: false, expectedState: false }
-  ])('should set checkboxes disabled=$disabled when disabled prop is $disabled', ({ disabled, expectedState }) => {
+    { disabled: false, expectedState: false },
+  ])("should set checkboxes disabled=$disabled when disabled prop is $disabled", ({ disabled, expectedState }) => {
     render(
       <TestWrapper>
         <ChangePermissionsSettings
@@ -164,47 +150,44 @@ describe('ChangePermissionsSettings', () => {
           onParameterChange={mockOnParameterChange}
           disabled={disabled}
         />
-      </TestWrapper>
+      </TestWrapper>,
     );
 
-    const checkboxes = screen.getAllByRole('checkbox') as HTMLInputElement[];
-    checkboxes.forEach(checkbox => {
+    const checkboxes = screen.getAllByRole("checkbox") as HTMLInputElement[];
+    checkboxes.forEach((checkbox) => {
       expect(checkbox.disabled).toBe(expectedState);
     });
   });
 
-  test('should call translation function with correct keys', () => {
+  test("should call translation function with correct keys", () => {
     render(
       <TestWrapper>
-        <ChangePermissionsSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <ChangePermissionsSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
     const permissionKeys = Object.keys(defaultParameters) as Array<keyof ChangePermissionsParameters>;
-    permissionKeys.forEach(permission => {
+    permissionKeys.forEach((permission) => {
       expect(mockT).toHaveBeenCalledWith(`changePermissions.permissions.${permission}.label`, permission);
     });
   });
 
-  test.each(Object.keys(defaultParameters) as Array<keyof ChangePermissionsParameters>)('should handle %s permission type individually', (permission) => {
-    const testParameters: ChangePermissionsParameters = {
-      ...defaultParameters,
-      [permission]: true
-    };
+  test.each(Object.keys(defaultParameters) as Array<keyof ChangePermissionsParameters>)(
+    "should handle %s permission type individually",
+    (permission) => {
+      const testParameters: ChangePermissionsParameters = {
+        ...defaultParameters,
+        [permission]: true,
+      };
 
-    render(
-      <TestWrapper>
-        <ChangePermissionsSettings
-          parameters={testParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
-    );
+      render(
+        <TestWrapper>
+          <ChangePermissionsSettings parameters={testParameters} onParameterChange={mockOnParameterChange} />
+        </TestWrapper>,
+      );
 
-    const checkbox = screen.getByLabelText(`mock-changePermissions.permissions.${permission}.label`) as HTMLInputElement;
-    expect(checkbox.checked).toBe(true);
-  });
+      const checkbox = screen.getByLabelText(`mock-changePermissions.permissions.${permission}.label`) as HTMLInputElement;
+      expect(checkbox.checked).toBe(true);
+    },
+  );
 });
diff --git a/frontend/src/core/components/tools/compare/CompareDocumentPane.tsx b/frontend/src/core/components/tools/compare/CompareDocumentPane.tsx
index c541c60f20..7a1e7c21c8 100644
--- a/frontend/src/core/components/tools/compare/CompareDocumentPane.tsx
+++ b/frontend/src/core/components/tools/compare/CompareDocumentPane.tsx
@@ -1,10 +1,15 @@
-import { Group, Loader, Stack, Text } from '@mantine/core';
-import { useMemo, useRef, useEffect, useState } from 'react';
-import type { PagePreview } from '@app/types/compare';
-import type { TokenBoundingBox, CompareDocumentPaneProps } from '@app/types/compare';
-import { mergeConnectedRects, normalizeRotation, groupWordRects, computePageLayoutMetrics } from '@app/components/tools/compare/compare';
-import CompareNavigationDropdown from '@app/components/tools/compare/CompareNavigationDropdown';
-import { useIsMobile } from '@app/hooks/useIsMobile';
+import { Group, Loader, Stack, Text } from "@mantine/core";
+import { useMemo, useRef, useEffect, useState } from "react";
+import type { PagePreview } from "@app/types/compare";
+import type { TokenBoundingBox, CompareDocumentPaneProps } from "@app/types/compare";
+import {
+  mergeConnectedRects,
+  normalizeRotation,
+  groupWordRects,
+  computePageLayoutMetrics,
+} from "@app/components/tools/compare/compare";
+import CompareNavigationDropdown from "@app/components/tools/compare/CompareNavigationDropdown";
+import { useIsMobile } from "@app/hooks/useIsMobile";
 
 // utilities moved to compare.ts
 
@@ -45,11 +50,18 @@ const CompareDocumentPane = ({
     return map;
   }, [pairedPages]);
 
-  const HIGHLIGHT_BG_VAR = pane === 'base' ? 'var(--spdf-compare-removed-bg)' : 'var(--spdf-compare-added-bg)';
-  const OFFSET_PIXELS = pane === 'base' ? 4 : 2;
-  const cursorStyle = isPanMode && zoom > 1 ? 'grab' : 'auto';
+  const HIGHLIGHT_BG_VAR = pane === "base" ? "var(--spdf-compare-removed-bg)" : "var(--spdf-compare-added-bg)";
+  const OFFSET_PIXELS = pane === "base" ? 4 : 2;
+  const cursorStyle = isPanMode && zoom > 1 ? "grab" : "auto";
   const pagePanRef = useRef<Map<number, { x: number; y: number }>>(new Map());
-  const dragRef = useRef<{ active: boolean; page: number | null; startX: number; startY: number; startPanX: number; startPanY: number }>({ active: false, page: null, startX: 0, startY: 0, startPanX: 0, startPanY: 0 });
+  const dragRef = useRef<{
+    active: boolean;
+    page: number | null;
+    startX: number;
+    startY: number;
+    startPanX: number;
+    startPanY: number;
+  }>({ active: false, page: null, startX: 0, startY: 0, startPanX: 0, startPanY: 0 });
 
   // Track which page images have finished loading to avoid flashing between states
   const imageLoadedRef = useRef<Map<number, boolean>>(new Map());
@@ -74,10 +86,7 @@ const CompareDocumentPane = ({
     }
   }, [zoom]);
 
-  const renderedPageNumbers = useMemo(
-    () => new Set(pages.map((p) => p.pageNumber)),
-    [pages]
-  );
+  const renderedPageNumbers = useMemo(() => new Set(pages.map((p) => p.pageNumber)), [pages]);
 
   return (
     <div className="compare-pane">
@@ -86,12 +95,12 @@ const CompareDocumentPane = ({
           <Text fw={600} size="lg">
             {title}
           </Text>
-          <Group justify="flex-end" align="center" gap="sm" wrap="nowrap"> 
+          <Group justify="flex-end" align="center" gap="sm" wrap="nowrap">
             {(changes.length > 0 || Boolean(dropdownPlaceholder)) && (
               <CompareNavigationDropdown
                 changes={changes}
                 placeholder={dropdownPlaceholder ?? null}
-                className={pane === 'comparison' ? 'compare-changes-select--comparison' : undefined}
+                className={pane === "comparison" ? "compare-changes-select--comparison" : undefined}
                 onNavigate={onNavigateChange}
                 renderedPageNumbers={renderedPageNumbers}
               />
@@ -115,7 +124,7 @@ const CompareDocumentPane = ({
             let bestDist = Number.POSITIVE_INFINITY;
             let nodes = pageNodesRef.current;
             if (!nodes || nodes.length !== pages.length) {
-              nodes = Array.from(container.querySelectorAll('.compare-diff-page')) as HTMLElement[];
+              nodes = Array.from(container.querySelectorAll(".compare-diff-page")) as HTMLElement[];
               pageNodesRef.current = nodes;
             }
             for (const el of nodes) {
@@ -125,12 +134,12 @@ const CompareDocumentPane = ({
               const dist = Math.abs(center - mid);
               if (dist < bestDist) {
                 bestDist = dist;
-                const attr = el.getAttribute('data-page-number');
+                const attr = el.getAttribute("data-page-number");
                 const pn = attr ? parseInt(attr, 10) : NaN;
                 if (!Number.isNaN(pn)) bestPage = pn;
               }
             }
-            if (typeof onVisiblePageChange === 'function' && bestPage !== lastReportedVisiblePageRef.current) {
+            if (typeof onVisiblePageChange === "function" && bestPage !== lastReportedVisiblePageRef.current) {
               lastReportedVisiblePageRef.current = bestPage;
               onVisiblePageChange(pane, bestPage);
             }
@@ -141,14 +150,17 @@ const CompareDocumentPane = ({
         onMouseMove={undefined}
         onMouseUp={undefined}
         onMouseLeave={undefined}
-        onWheel={(event) => { handleWheelZoom(pane, event); handleWheelOverscroll(pane, event); }}
+        onWheel={(event) => {
+          handleWheelZoom(pane, event);
+          handleWheelOverscroll(pane, event);
+        }}
         onTouchStart={(event) => onTouchStart(pane, event)}
         onTouchMove={onTouchMove}
         onTouchEnd={onTouchEnd}
         className="compare-pane__scroll"
         style={{ cursor: cursorStyle }}
       >
-        <Stack gap={zoom <= 0.6 ? 2 : zoom <= 0.85 ? 'xs' : 'sm'} className="compare-pane__content">
+        <Stack gap={zoom <= 0.6 ? 2 : zoom <= 0.85 ? "xs" : "sm"} className="compare-pane__content">
           {isLoading && (
             <Group justify="center" gap="xs" py="md">
               <Loader size="sm" />
@@ -158,7 +170,7 @@ const CompareDocumentPane = ({
 
           {pages.map((page) => {
             const peerPage = pairedPageMap.get(page.pageNumber);
-            const viewportWidth = typeof window !== 'undefined' ? window.innerWidth : 1200;
+            const viewportWidth = typeof window !== "undefined" ? window.innerWidth : 1200;
             const metrics = computePageLayoutMetrics({
               page,
               peerPage: peerPage ?? null,
@@ -192,7 +204,7 @@ const CompareDocumentPane = ({
                 >
                   <div
                     className="compare-page-title"
-                    style={{ width: `${containerWidth}px`, marginLeft: 'auto', marginRight: 'auto' }}
+                    style={{ width: `${containerWidth}px`, marginLeft: "auto", marginRight: "auto" }}
                   >
                     <Text size="xs" fw={600} c="dimmed" ta="center">
                       {documentLabel} · {pageLabel} {page.pageNumber}
@@ -200,7 +212,13 @@ const CompareDocumentPane = ({
                   </div>
                   <div
                     className="compare-diff-page__canvas compare-diff-page__canvas--zoom"
-                    style={{ width: `${containerWidth}px`, height: `${containerHeight}px`, marginLeft: 'auto', marginRight: 'auto', overflow: 'hidden' }}
+                    style={{
+                      width: `${containerWidth}px`,
+                      height: `${containerHeight}px`,
+                      marginLeft: "auto",
+                      marginRight: "auto",
+                      overflow: "hidden",
+                    }}
                     onMouseDown={(e) => {
                       if (!isPanMode || zoom <= 1) return;
                       dragRef.current.active = true;
@@ -210,7 +228,7 @@ const CompareDocumentPane = ({
                       const curr = pagePanRef.current.get(page.pageNumber) || { x: 0, y: 0 };
                       dragRef.current.startPanX = curr.x;
                       dragRef.current.startPanY = curr.y;
-                      (e.currentTarget as HTMLElement).style.cursor = 'grabbing';
+                      (e.currentTarget as HTMLElement).style.cursor = "grabbing";
                       e.preventDefault();
                     }}
                     onMouseMove={(e) => {
@@ -245,13 +263,13 @@ const CompareDocumentPane = ({
                     <div
                       className={`compare-diff-page__inner compare-diff-page__inner--${pane}`}
                       style={{
-                        transform: `scale(${innerScale}) translate3d(${-((clampedPanX) / innerScale)}px, ${-((clampedPanY) / innerScale)}px, 0)`,
-                        transformOrigin: 'top left'
+                        transform: `scale(${innerScale}) translate3d(${-(clampedPanX / innerScale)}px, ${-(clampedPanY / innerScale)}px, 0)`,
+                        transformOrigin: "top left",
                       }}
                     >
                       {/* Image layer */}
                       <img
-                        src={page.url ?? ''}
+                        src={page.url ?? ""}
                         alt={altLabel}
                         loading="lazy"
                         decoding="async"
@@ -264,7 +282,7 @@ const CompareDocumentPane = ({
                         }}
                       />
                       {/* Overlay loader until the page image is loaded */}
-                      {!((imageLoadedRef.current.get(page.pageNumber) ?? false)) && (
+                      {!(imageLoadedRef.current.get(page.pageNumber) ?? false) && (
                         <div className="compare-page-loader-overlay">
                           <Loader size="sm" />
                         </div>
@@ -287,12 +305,12 @@ const CompareDocumentPane = ({
                               }}
                             />
                           );
-                        })
+                        }),
                       )}
                     </div>
                   </div>
                 </div>
-                </>
+              </>
             );
           })}
         </Stack>
diff --git a/frontend/src/core/components/tools/compare/CompareNavigationDropdown.tsx b/frontend/src/core/components/tools/compare/CompareNavigationDropdown.tsx
index ab7a746897..2adef1167d 100644
--- a/frontend/src/core/components/tools/compare/CompareNavigationDropdown.tsx
+++ b/frontend/src/core/components/tools/compare/CompareNavigationDropdown.tsx
@@ -1,7 +1,7 @@
-import { Combobox, ScrollArea, useCombobox } from '@mantine/core';
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import type { NavigationDropdownProps } from '@app/types/compare';
+import { Combobox, ScrollArea, useCombobox } from "@mantine/core";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import type { NavigationDropdownProps } from "@app/types/compare";
 
 const CompareNavigationDropdown = ({
   changes,
@@ -11,7 +11,7 @@ const CompareNavigationDropdown = ({
   renderedPageNumbers,
 }: NavigationDropdownProps) => {
   const { t } = useTranslation();
-  const newLineLabel = t('compare.newLine', 'new-line');
+  const newLineLabel = t("compare.newLine", "new-line");
   const combobox = useCombobox({
     onDropdownClose: () => {
       combobox.resetSelectedOption();
@@ -26,10 +26,10 @@ const CompareNavigationDropdown = ({
       requestAnimationFrame(() => {
         const viewport = viewportRef.current;
         if (viewport) viewport.scrollTop = scrollTopRef.current;
-        const headers = Array.from((viewportRef.current?.querySelectorAll('.compare-dropdown-group') ?? [])) as HTMLElement[];
+        const headers = Array.from(viewportRef.current?.querySelectorAll(".compare-dropdown-group") ?? []) as HTMLElement[];
         groupOffsetsRef.current = headers.map((el) => {
-          const text = el.textContent || '';
-          const page = parseInt(text.replace(/[^0-9]/g, ''), 10) || 0;
+          const text = el.textContent || "";
+          const page = parseInt(text.replace(/[^0-9]/g, ""), 10) || 0;
           return { top: el.offsetTop, page };
         });
         // Update sticky label based on current scroll position
@@ -41,42 +41,40 @@ const CompareNavigationDropdown = ({
   const sanitize = (s: string) => {
     // Normalize and remove control/separator characters without regex ranges
     return s
-      .normalize('NFKC')
-      .split('')
-      .map(char => {
+      .normalize("NFKC")
+      .split("")
+      .map((char) => {
         const code = char.charCodeAt(0);
         // Replace control chars (0-31, 127) and special separators with space
-        if (code <= 31 || code === 127 || code === 0x2028 || code === 0x2029 || (code >= 0x200B && code <= 0x200F)) {
-          return ' ';
+        if (code <= 31 || code === 127 || code === 0x2028 || code === 0x2029 || (code >= 0x200b && code <= 0x200f)) {
+          return " ";
         }
         return char;
       })
-      .join('')
-      .replace(/\s+/g, ' ')
+      .join("")
+      .replace(/\s+/g, " ")
       .trim();
   };
 
   const isMeaningful = (s: string) => {
     const t = sanitize(s);
-  
+
     // Build a unicode-aware regex if supported; otherwise fall back to a plain ASCII class.
-    const rx =
-      (() => {
-        try {
-          // Construct at runtime so old engines don’t fail parse-time
-          return new RegExp('[\\p{L}\\p{N}\\p{P}\\p{S}]', 'u');
-        } catch {
-          // Fallback (no Unicode props): letters, digits, and common punctuation/symbols
-          return /[A-Za-z0-9.,!?;:(){}"'`~@#$%^&*+=|<>/[\]]/;
-        }
-      })();
-  
+    const rx = (() => {
+      try {
+        // Construct at runtime so old engines don’t fail parse-time
+        return new RegExp("[\\p{L}\\p{N}\\p{P}\\p{S}]", "u");
+      } catch {
+        // Fallback (no Unicode props): letters, digits, and common punctuation/symbols
+        return /[A-Za-z0-9.,!?;:(){}"'`~@#$%^&*+=|<>/[\]]/;
+      }
+    })();
+
     if (!rx.test(t)) return false;
     return t.length > 0;
   };
 
-  
-  const [query, setQuery] = useState('');
+  const [query, setQuery] = useState("");
   const viewportRef = useRef<HTMLDivElement | null>(null);
   const [stickyPage, setStickyPage] = useState<number | null>(null);
   const groupOffsetsRef = useRef<Array<{ top: number; page: number }>>([]);
@@ -85,11 +83,11 @@ const CompareNavigationDropdown = ({
 
   const normalizedChanges = useMemo(() => {
     // Helper to strip localized new-line marker occurrences from labels
-    const esc = (s: string) => s.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    const esc = (s: string) => s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
     const stripNewLine = (s: string) =>
       s
-        .replace(new RegExp(`\\b${esc(newLineLabel)}\\b`, 'gi'), ' ')
-        .replace(/\s+/g, ' ')
+        .replace(new RegExp(`\\b${esc(newLineLabel)}\\b`, "gi"), " ")
+        .replace(/\s+/g, " ")
         .trim();
 
     const cleaned = changes
@@ -105,10 +103,10 @@ const CompareNavigationDropdown = ({
     if (!isOpen) return;
     const viewport = viewportRef.current;
     if (!viewport) return;
-    const headers = Array.from(viewport.querySelectorAll('.compare-dropdown-group')) as HTMLElement[];
+    const headers = Array.from(viewport.querySelectorAll(".compare-dropdown-group")) as HTMLElement[];
     groupOffsetsRef.current = headers.map((el) => {
-      const text = el.textContent || '';
-      const page = parseInt(text.replace(/[^0-9]/g, ''), 10) || 0;
+      const text = el.textContent || "";
+      const page = parseInt(text.replace(/[^0-9]/g, ""), 10) || 0;
       return { top: el.offsetTop, page };
     });
     // Update sticky based on current scroll position
@@ -124,7 +122,8 @@ const CompareNavigationDropdown = ({
     let idx = 0;
     while (low <= high) {
       const mid = (low + high) >> 1;
-      if (offsets[mid].top <= y + 1) { // +1 to avoid jitter at exact boundary
+      if (offsets[mid].top <= y + 1) {
+        // +1 to avoid jitter at exact boundary
         idx = mid;
         low = mid + 1;
       } else {
@@ -148,7 +147,7 @@ const CompareNavigationDropdown = ({
     >
       <Combobox.Target>
         <div
-          className={['compare-changes-select', className].filter(Boolean).join(' ')}
+          className={["compare-changes-select", className].filter(Boolean).join(" ")}
           onClick={() => combobox.toggleDropdown()}
         >
           <span className="compare-changes-select__placeholder">{placeholder}</span>
@@ -160,7 +159,7 @@ const CompareNavigationDropdown = ({
         {/* Header sits outside scroll so it stays fixed at top */}
         <div>
           <Combobox.Search
-            placeholder={t('compare.dropdown.searchPlaceholder', 'Search changes...')}
+            placeholder={t("compare.dropdown.searchPlaceholder", "Search changes...")}
             value={query}
             onChange={(e) => setQuery(e.currentTarget.value)}
           />
@@ -171,52 +170,60 @@ const CompareNavigationDropdown = ({
             <ScrollArea.Autosize mah={300} viewportRef={viewportRef} onScrollPositionChange={handleScrollPos}>
               {stickyPage != null && (
                 <div className="compare-dropdown-sticky" style={{ top: 0 }}>
-                  {t('compare.summary.pageLabel', 'Page')}{' '}{stickyPage}
+                  {t("compare.summary.pageLabel", "Page")} {stickyPage}
                   {renderedPageNumbers && !renderedPageNumbers.has(stickyPage) && (
-                    <span className="compare-dropdown-rendering-flag"> — {t('compare.rendering.rendering', 'rendering')}</span>
+                    <span className="compare-dropdown-rendering-flag"> — {t("compare.rendering.rendering", "rendering")}</span>
                   )}
                 </div>
               )}
               <Combobox.Options className="compare-dropdown-options">
-              {normalizedChanges.length > 0 ? (
-                (() => {
-                  const nodes: React.ReactNode[] = [];
-                  let lastPage: number | null = null;
-                  for (const item of normalizedChanges) {
-                    if (item.pageNumber && item.pageNumber !== lastPage) {
-                      lastPage = item.pageNumber;
+                {normalizedChanges.length > 0 ? (
+                  (() => {
+                    const nodes: React.ReactNode[] = [];
+                    let lastPage: number | null = null;
+                    for (const item of normalizedChanges) {
+                      if (item.pageNumber && item.pageNumber !== lastPage) {
+                        lastPage = item.pageNumber;
+                        nodes.push(
+                          <div
+                            className={[
+                              "compare-dropdown-group",
+                              stickyPage === lastPage ? "compare-dropdown-group--hidden" : "",
+                            ]
+                              .filter(Boolean)
+                              .join(" ")}
+                            key={`group-${lastPage}`}
+                          >
+                            {t("compare.summary.pageLabel", "Page")} {lastPage}
+                            {renderedPageNumbers && !renderedPageNumbers.has(lastPage) && (
+                              <span className="compare-dropdown-rendering-flag">
+                                {" "}
+                                — {t("compare.rendering.rendering", "rendering")}
+                              </span>
+                            )}
+                          </div>,
+                        );
+                      }
                       nodes.push(
-                        <div
-                          className={["compare-dropdown-group", stickyPage === lastPage ? "compare-dropdown-group--hidden" : ""].filter(Boolean).join(" ")}
-                          key={`group-${lastPage}`}
+                        <Combobox.Option
+                          value={item.value}
+                          key={item.value}
+                          onClick={() => {
+                            onNavigate(item.value, item.pageNumber);
+                            combobox.closeDropdown();
+                          }}
                         >
-                          {t('compare.summary.pageLabel', 'Page')}{' '}{lastPage}
-                          {renderedPageNumbers && !renderedPageNumbers.has(lastPage) && (
-                            <span className="compare-dropdown-rendering-flag"> — {t('compare.rendering.rendering', 'rendering')}</span>
-                          )}
-                        </div>
+                          <div className="compare-dropdown-option">
+                            <span className="compare-dropdown-option__text">{item.label}</span>
+                          </div>
+                        </Combobox.Option>,
                       );
                     }
-                    nodes.push(
-                      <Combobox.Option
-                        value={item.value}
-                        key={item.value}
-                        onClick={() => {
-                          onNavigate(item.value, item.pageNumber);
-                          combobox.closeDropdown();
-                        }}
-                      >
-                        <div className="compare-dropdown-option">
-                          <span className="compare-dropdown-option__text">{item.label}</span>
-                        </div>
-                      </Combobox.Option>
-                    );
-                  }
-                  return nodes;
-                })()
-              ) : (
-                <Combobox.Empty>{t('compare.dropdown.noResults', 'No changes found')}</Combobox.Empty>
-              )}
+                    return nodes;
+                  })()
+                ) : (
+                  <Combobox.Empty>{t("compare.dropdown.noResults", "No changes found")}</Combobox.Empty>
+                )}
               </Combobox.Options>
             </ScrollArea.Autosize>
           </div>
diff --git a/frontend/src/core/components/tools/compare/CompareWorkbenchView.tsx b/frontend/src/core/components/tools/compare/CompareWorkbenchView.tsx
index b7006ae3d2..4df23fd32f 100644
--- a/frontend/src/core/components/tools/compare/CompareWorkbenchView.tsx
+++ b/frontend/src/core/components/tools/compare/CompareWorkbenchView.tsx
@@ -1,7 +1,7 @@
-import { useEffect, useMemo, useRef, useState, useCallback } from 'react';
-import { Loader, Stack } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { useIsMobile } from '@app/hooks/useIsMobile';
+import { useEffect, useMemo, useRef, useState, useCallback } from "react";
+import { Loader, Stack } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { useIsMobile } from "@app/hooks/useIsMobile";
 import {
   mapChangesForDropdown,
   getFileFromSelection,
@@ -10,22 +10,19 @@ import {
   computeProgressPct,
   computeCountsText,
   computeMaxSharedPages,
-} from '@app/components/tools/compare/compare';
-import {
-  CompareResultData,
-  CompareWorkbenchData,
-} from '@app/types/compare';
-import { useFileContext } from '@app/contexts/file/fileHooks';
-import { useRightRailButtons } from '@app/hooks/useRightRailButtons';
-import CompareDocumentPane from '@app/components/tools/compare/CompareDocumentPane';
-import { useComparePagePreviews } from '@app/components/tools/compare/hooks/useComparePagePreviews';
-import { useComparePanZoom } from '@app/components/tools/compare/hooks/useComparePanZoom';
-import { useCompareHighlights } from '@app/components/tools/compare/hooks/useCompareHighlights';
-import { useCompareChangeNavigation } from '@app/components/tools/compare/hooks/useCompareChangeNavigation';
-import '@app/components/tools/compare/compareView.css';
-import { useCompareRightRailButtons } from '@app/components/tools/compare/hooks/useCompareRightRailButtons';
-import { alert, updateToast, updateToastProgress, dismissToast } from '@app/components/toast';
-import type { ToastLocation } from '@app/components/toast/types';
+} from "@app/components/tools/compare/compare";
+import { CompareResultData, CompareWorkbenchData } from "@app/types/compare";
+import { useFileContext } from "@app/contexts/file/fileHooks";
+import { useRightRailButtons } from "@app/hooks/useRightRailButtons";
+import CompareDocumentPane from "@app/components/tools/compare/CompareDocumentPane";
+import { useComparePagePreviews } from "@app/components/tools/compare/hooks/useComparePagePreviews";
+import { useComparePanZoom } from "@app/components/tools/compare/hooks/useComparePanZoom";
+import { useCompareHighlights } from "@app/components/tools/compare/hooks/useCompareHighlights";
+import { useCompareChangeNavigation } from "@app/components/tools/compare/hooks/useCompareChangeNavigation";
+import "@app/components/tools/compare/compareView.css";
+import { useCompareRightRailButtons } from "@app/components/tools/compare/hooks/useCompareRightRailButtons";
+import { alert, updateToast, updateToastProgress, dismissToast } from "@app/components/toast";
+import type { ToastLocation } from "@app/components/toast/types";
 
 interface CompareWorkbenchViewProps {
   data: CompareWorkbenchData | null;
@@ -50,13 +47,23 @@ const CompareWorkbenchView = ({ data }: CompareWorkbenchViewProps) => {
 
   const processedAt = result?.totals.processedAt ?? null;
 
-  const { pages: basePages, loading: baseLoading, totalPages: baseTotal, renderedPages: baseRendered } = useComparePagePreviews({
+  const {
+    pages: basePages,
+    loading: baseLoading,
+    totalPages: baseTotal,
+    renderedPages: baseRendered,
+  } = useComparePagePreviews({
     file: baseFile,
     enabled: Boolean(result && baseFile),
     cacheKey: processedAt,
   });
 
-  const { pages: comparisonPages, loading: comparisonLoading, totalPages: compTotal, renderedPages: compRendered } = useComparePagePreviews({
+  const {
+    pages: comparisonPages,
+    loading: comparisonLoading,
+    totalPages: compTotal,
+    renderedPages: compRendered,
+  } = useComparePagePreviews({
     file: comparisonFile,
     enabled: Boolean(result && comparisonFile),
     cacheKey: processedAt,
@@ -76,7 +83,7 @@ const CompareWorkbenchView = ({ data }: CompareWorkbenchViewProps) => {
     isPanMode,
     setIsPanMode,
     baseZoom,
-    setBaseZoom,  
+    setBaseZoom,
     comparisonZoom,
     setComparisonZoom,
     setPanToTopLeft,
@@ -93,52 +100,61 @@ const CompareWorkbenchView = ({ data }: CompareWorkbenchViewProps) => {
     prefersStacked,
   });
 
-  const {
-    baseWordChanges,
-    comparisonWordChanges,
-    metaIndexToGroupId,
-    wordHighlightMaps,
-    getRowHeightPx,
-  } = useCompareHighlights(result, basePages, comparisonPages);
+  const { baseWordChanges, comparisonWordChanges, metaIndexToGroupId, wordHighlightMaps, getRowHeightPx } =
+    useCompareHighlights(result, basePages, comparisonPages);
 
-  const temporarilySuppressScrollLink = useCallback((fn: () => void, durationMs = 700) => {
-    const wasLinked = isScrollLinked;
-    if (wasLinked) setIsScrollLinked(false);
-    try {
-      fn();
-    } finally {
-      window.setTimeout(() => {
-        if (wasLinked) {
-          // recapture anchors to keep panes aligned when relinking
-          captureScrollLinkDelta();
-          setIsScrollLinked(true);
-        }
-      }, Math.max(200, durationMs));
-    }
-  }, [isScrollLinked, setIsScrollLinked, captureScrollLinkDelta]);
-
-  const handleChangeNavigation = useCompareChangeNavigation(
-    baseScrollRef,
-    comparisonScrollRef,
-    { temporarilySuppressScrollLink }
+  const temporarilySuppressScrollLink = useCallback(
+    (fn: () => void, durationMs = 700) => {
+      const wasLinked = isScrollLinked;
+      if (wasLinked) setIsScrollLinked(false);
+      try {
+        fn();
+      } finally {
+        window.setTimeout(
+          () => {
+            if (wasLinked) {
+              // recapture anchors to keep panes aligned when relinking
+              captureScrollLinkDelta();
+              setIsScrollLinked(true);
+            }
+          },
+          Math.max(200, durationMs),
+        );
+      }
+    },
+    [isScrollLinked, setIsScrollLinked, captureScrollLinkDelta],
   );
 
-  const processingMessage = t('compare.status.processing', 'Analyzing differences...');
-  const baseDocumentLabel = t('compare.summary.baseHeading', 'Original document');
-  const comparisonDocumentLabel = t('compare.summary.comparisonHeading', 'Edited document');
-  const pageLabel = t('compare.summary.pageLabel', 'Page');
+  const handleChangeNavigation = useCompareChangeNavigation(baseScrollRef, comparisonScrollRef, {
+    temporarilySuppressScrollLink,
+  });
+
+  const processingMessage = t("compare.status.processing", "Analyzing differences...");
+  const baseDocumentLabel = t("compare.summary.baseHeading", "Original document");
+  const comparisonDocumentLabel = t("compare.summary.comparisonHeading", "Edited document");
+  const pageLabel = t("compare.summary.pageLabel", "Page");
 
   // Always show the selected file names from the sidebar; they are known before diff results
-  const baseTitle = baseStub?.name || result?.base?.fileName || '';
-  const comparisonTitle = comparisonStub?.name || result?.comparison?.fileName || '';
+  const baseTitle = baseStub?.name || result?.base?.fileName || "";
+  const comparisonTitle = comparisonStub?.name || result?.comparison?.fileName || "";
 
   // During diff processing, show compact spinners in the dropdown badges
-  const baseDropdownPlaceholder = (isOperationLoading || !result)
-    ? (<span className="inline-flex flex-row items-center gap-1">{t('compare.dropdown.deletionsLabel', 'Deletions')} <Loader size="xs" color="currentColor" /></span>)
-    : t('compare.dropdown.deletions', 'Deletions ({{count}})', { count: baseWordChanges.length });
-  const comparisonDropdownPlaceholder = (isOperationLoading || !result)
-    ? (<span className="inline-flex flex-row items-center gap-1">{t('compare.dropdown.additionsLabel', 'Additions')} <Loader size="xs" color="currentColor" /></span>)
-    : t('compare.dropdown.additions', 'Additions ({{count}})', { count: comparisonWordChanges.length });
+  const baseDropdownPlaceholder =
+    isOperationLoading || !result ? (
+      <span className="inline-flex flex-row items-center gap-1">
+        {t("compare.dropdown.deletionsLabel", "Deletions")} <Loader size="xs" color="currentColor" />
+      </span>
+    ) : (
+      t("compare.dropdown.deletions", "Deletions ({{count}})", { count: baseWordChanges.length })
+    );
+  const comparisonDropdownPlaceholder =
+    isOperationLoading || !result ? (
+      <span className="inline-flex flex-row items-center gap-1">
+        {t("compare.dropdown.additionsLabel", "Additions")} <Loader size="xs" color="currentColor" />
+      </span>
+    ) : (
+      t("compare.dropdown.additions", "Additions ({{count}})", { count: comparisonWordChanges.length })
+    );
 
   const rightRailButtons = useCompareRightRailButtons({
     layout,
@@ -166,9 +182,10 @@ const CompareWorkbenchView = ({ data }: CompareWorkbenchViewProps) => {
   // Rendering progress toast for very large PDFs
   const LARGE_PAGE_THRESHOLD = 400; // show banner when one or both exceed threshold
   const totalsKnown = (baseTotal ?? 0) > 0 && (compTotal ?? 0) > 0;
-  const showProgressBanner = useMemo(() => (
-    computeShowProgressBanner(totalsKnown, baseTotal, compTotal, baseLoading, comparisonLoading, LARGE_PAGE_THRESHOLD)
-  ), [totalsKnown, baseTotal, compTotal, baseLoading, comparisonLoading]);
+  const showProgressBanner = useMemo(
+    () => computeShowProgressBanner(totalsKnown, baseTotal, compTotal, baseLoading, comparisonLoading, LARGE_PAGE_THRESHOLD),
+    [totalsKnown, baseTotal, compTotal, baseLoading, comparisonLoading],
+  );
 
   const progressPct = computeProgressPct(totalsKnown, baseTotal, compTotal, baseRendered, compRendered);
 
@@ -217,10 +234,13 @@ const CompareWorkbenchView = ({ data }: CompareWorkbenchViewProps) => {
       // Create toast if missing
       if (!progressToastIdRef.current) {
         const id = alert({
-          alertType: 'neutral',
-          title: t('compare.rendering.inProgress', "At least one of these PDFs are very large, scrolling won't be smooth until the rendering is complete"),
-          body: `${countsText} ${t('compare.rendering.pagesRendered', 'pages rendered')}`,
-          location: 'bottom-right' as ToastLocation,
+          alertType: "neutral",
+          title: t(
+            "compare.rendering.inProgress",
+            "At least one of these PDFs are very large, scrolling won't be smooth until the rendering is complete",
+          ),
+          body: `${countsText} ${t("compare.rendering.pagesRendered", "pages rendered")}`,
+          location: "bottom-right" as ToastLocation,
           isPersistentPopup: true,
           durationMs: 0,
           expandable: false,
@@ -229,11 +249,14 @@ const CompareWorkbenchView = ({ data }: CompareWorkbenchViewProps) => {
         progressToastIdRef.current = id;
       } else {
         updateToast(progressToastIdRef.current, {
-          title: t('compare.rendering.inProgress', "At least one of these PDFs are very large, scrolling won't be smooth until the rendering is complete"),
-          body: `${countsText} ${t('compare.rendering.pagesRendered', 'pages rendered')}`,
-          location: 'bottom-right' as ToastLocation,
+          title: t(
+            "compare.rendering.inProgress",
+            "At least one of these PDFs are very large, scrolling won't be smooth until the rendering is complete",
+          ),
+          body: `${countsText} ${t("compare.rendering.pagesRendered", "pages rendered")}`,
+          location: "bottom-right" as ToastLocation,
           isPersistentPopup: true,
-          alertType: 'neutral', // ensure it stays neutral until completion
+          alertType: "neutral", // ensure it stays neutral until completion
         });
         updateToastProgress(progressToastIdRef.current, progressPct);
       }
@@ -241,7 +264,7 @@ const CompareWorkbenchView = ({ data }: CompareWorkbenchViewProps) => {
       // Completed: update then auto-dismiss after 3s
       if (progressToastIdRef.current) {
         updateToast(progressToastIdRef.current, {
-          title: t('compare.rendering.complete', 'Page rendering complete'),
+          title: t("compare.rendering.complete", "Page rendering complete"),
           body: undefined,
           isPersistentPopup: false,
           durationMs: 3000,
@@ -267,14 +290,26 @@ const CompareWorkbenchView = ({ data }: CompareWorkbenchViewProps) => {
         completionTimerRef.current = null;
       }
     };
-  }, [showProgressBanner, allDone, progressPct, baseRendered, compRendered, baseTotal, compTotal, basePages.length, comparisonPages.length, t]);
+  }, [
+    showProgressBanner,
+    allDone,
+    progressPct,
+    baseRendered,
+    compRendered,
+    baseTotal,
+    compTotal,
+    basePages.length,
+    comparisonPages.length,
+    t,
+  ]);
 
   // Shared page navigation state/input
-  const maxSharedPages = useMemo(() => (
-    computeMaxSharedPages(baseTotal, compTotal, basePages.length, comparisonPages.length)
-  ), [baseTotal, compTotal, basePages.length, comparisonPages.length]);
+  const maxSharedPages = useMemo(
+    () => computeMaxSharedPages(baseTotal, compTotal, basePages.length, comparisonPages.length),
+    [baseTotal, compTotal, basePages.length, comparisonPages.length],
+  );
 
-  const [pageInputValue, setPageInputValue] = useState<string>('1');
+  const [pageInputValue, setPageInputValue] = useState<string>("1");
   const typingTimerRef = useRef<number | null>(null);
   const isTypingRef = useRef(false);
 
@@ -287,133 +322,139 @@ const CompareWorkbenchView = ({ data }: CompareWorkbenchViewProps) => {
     }
   }, [maxSharedPages]);
 
-  const scrollBothToPage = useCallback((pageNum: number) => {
-    const scrollOne = (container: HTMLDivElement | null) => {
-      if (!container) return false;
-      const pageEl = container.querySelector(`.compare-diff-page[data-page-number="${pageNum}"]`) as HTMLElement | null;
-      if (!pageEl) return false;
-      const maxTop = Math.max(0, container.scrollHeight - container.clientHeight);
-      const desired = Math.max(0, Math.min(maxTop, pageEl.offsetTop - Math.round(container.clientHeight * 0.2)));
-      container.scrollTop = desired;
-      return true;
-    };
+  const scrollBothToPage = useCallback(
+    (pageNum: number) => {
+      const scrollOne = (container: HTMLDivElement | null) => {
+        if (!container) return false;
+        const pageEl = container.querySelector(`.compare-diff-page[data-page-number="${pageNum}"]`) as HTMLElement | null;
+        if (!pageEl) return false;
+        const maxTop = Math.max(0, container.scrollHeight - container.clientHeight);
+        const desired = Math.max(0, Math.min(maxTop, pageEl.offsetTop - Math.round(container.clientHeight * 0.2)));
+        container.scrollTop = desired;
+        return true;
+      };
 
-    const hitBase = scrollOne(baseScrollRef.current);
-    const hitComp = scrollOne(comparisonScrollRef.current);
+      const hitBase = scrollOne(baseScrollRef.current);
+      const hitComp = scrollOne(comparisonScrollRef.current);
 
-    // Warn if one or both pages are not yet rendered
-    const baseHas = basePages.some(p => p.pageNumber === pageNum);
-    const compHas = comparisonPages.some(p => p.pageNumber === pageNum);
-    if (!baseHas || !compHas) {
-      alert({
-        alertType: 'warning',
-        title: t('compare.rendering.pageNotReadyTitle', 'Page not rendered yet'),
-        body: t('compare.rendering.pageNotReadyBody', 'Some pages are still rendering. Navigation will snap once they are ready.'),
-        location: 'bottom-right' as ToastLocation,
-        isPersistentPopup: false,
-        durationMs: 2500,
-      });
-    }
-
-    return hitBase || hitComp;
-  }, [basePages, comparisonPages, baseScrollRef, comparisonScrollRef, t]);
-
-  const handleTypingChange = useCallback((next: string) => {
-    // Only digits; allow empty while editing
-    const digits = next.replace(/[^0-9]/g, '');
-    if (digits.length === 0) {
-      setPageInputValue('');
-      if (typingTimerRef.current != null) {
-        window.clearTimeout(typingTimerRef.current);
-        typingTimerRef.current = null;
+      // Warn if one or both pages are not yet rendered
+      const baseHas = basePages.some((p) => p.pageNumber === pageNum);
+      const compHas = comparisonPages.some((p) => p.pageNumber === pageNum);
+      if (!baseHas || !compHas) {
+        alert({
+          alertType: "warning",
+          title: t("compare.rendering.pageNotReadyTitle", "Page not rendered yet"),
+          body: t(
+            "compare.rendering.pageNotReadyBody",
+            "Some pages are still rendering. Navigation will snap once they are ready.",
+          ),
+          location: "bottom-right" as ToastLocation,
+          isPersistentPopup: false,
+          durationMs: 2500,
+        });
       }
-      return;
-    }
 
-    const parsed = Math.max(1, parseInt(digits, 10));
-    const capped = maxSharedPages > 0 ? Math.min(parsed, maxSharedPages) : parsed;
-    const display = String(capped);
-    setPageInputValue(display);
+      return hitBase || hitComp;
+    },
+    [basePages, comparisonPages, baseScrollRef, comparisonScrollRef, t],
+  );
 
-    isTypingRef.current = true;
-    if (typingTimerRef.current != null) window.clearTimeout(typingTimerRef.current);
-    typingTimerRef.current = window.setTimeout(() => {
-      isTypingRef.current = false;
-      scrollBothToPage(capped);
-    }, 300);
-  }, [maxSharedPages, scrollBothToPage]);
+  const handleTypingChange = useCallback(
+    (next: string) => {
+      // Only digits; allow empty while editing
+      const digits = next.replace(/[^0-9]/g, "");
+      if (digits.length === 0) {
+        setPageInputValue("");
+        if (typingTimerRef.current != null) {
+          window.clearTimeout(typingTimerRef.current);
+          typingTimerRef.current = null;
+        }
+        return;
+      }
+
+      const parsed = Math.max(1, parseInt(digits, 10));
+      const capped = maxSharedPages > 0 ? Math.min(parsed, maxSharedPages) : parsed;
+      const display = String(capped);
+      setPageInputValue(display);
+
+      isTypingRef.current = true;
+      if (typingTimerRef.current != null) window.clearTimeout(typingTimerRef.current);
+      typingTimerRef.current = window.setTimeout(() => {
+        isTypingRef.current = false;
+        scrollBothToPage(capped);
+      }, 300);
+    },
+    [maxSharedPages, scrollBothToPage],
+  );
 
   return (
     <Stack className="compare-workbench">
-
-        <Stack gap="lg" className="compare-workbench__content">
-          <div
-            className={`compare-workbench__columns ${layout === 'stacked' ? 'compare-workbench__columns--stacked' : ''}`}
-          >
-            <CompareDocumentPane
-              pane="base"
-              layout={layout}
-              scrollRef={baseScrollRef}
-              peerScrollRef={comparisonScrollRef}
-              handleScrollSync={handleScrollSync}
-              handleWheelZoom={handleWheelZoom}
-              handleWheelOverscroll={handleWheelOverscroll}
-              onTouchStart={onTouchStart}
-              onTouchMove={onTouchMove}
-              onTouchEnd={onTouchEnd}
-              isPanMode={isPanMode}
-              zoom={baseZoom}
-              title={baseTitle}
-              dropdownPlaceholder={baseDropdownPlaceholder}
-              changes={mapChangesForDropdown(baseWordChanges)}
-              onNavigateChange={(value, pageNumber) => handleChangeNavigation(value, 'base', pageNumber)}
-              isLoading={isOperationLoading || baseLoading}
-              processingMessage={processingMessage}
-              pages={basePages}
-              pairedPages={comparisonPages}
-              getRowHeightPx={getRowHeightPx}
-              wordHighlightMap={wordHighlightMaps.base}
-              metaIndexToGroupId={metaIndexToGroupId.base}
-              documentLabel={baseDocumentLabel}
-              pageLabel={pageLabel}
-              altLabel={baseDocumentLabel}
+      <Stack gap="lg" className="compare-workbench__content">
+        <div className={`compare-workbench__columns ${layout === "stacked" ? "compare-workbench__columns--stacked" : ""}`}>
+          <CompareDocumentPane
+            pane="base"
+            layout={layout}
+            scrollRef={baseScrollRef}
+            peerScrollRef={comparisonScrollRef}
+            handleScrollSync={handleScrollSync}
+            handleWheelZoom={handleWheelZoom}
+            handleWheelOverscroll={handleWheelOverscroll}
+            onTouchStart={onTouchStart}
+            onTouchMove={onTouchMove}
+            onTouchEnd={onTouchEnd}
+            isPanMode={isPanMode}
+            zoom={baseZoom}
+            title={baseTitle}
+            dropdownPlaceholder={baseDropdownPlaceholder}
+            changes={mapChangesForDropdown(baseWordChanges)}
+            onNavigateChange={(value, pageNumber) => handleChangeNavigation(value, "base", pageNumber)}
+            isLoading={isOperationLoading || baseLoading}
+            processingMessage={processingMessage}
+            pages={basePages}
+            pairedPages={comparisonPages}
+            getRowHeightPx={getRowHeightPx}
+            wordHighlightMap={wordHighlightMaps.base}
+            metaIndexToGroupId={metaIndexToGroupId.base}
+            documentLabel={baseDocumentLabel}
+            pageLabel={pageLabel}
+            altLabel={baseDocumentLabel}
             pageInputValue={pageInputValue}
             onPageInputChange={handleTypingChange}
             maxSharedPages={maxSharedPages}
-            />
-            <CompareDocumentPane
-              pane="comparison"
-              layout={layout}
-              scrollRef={comparisonScrollRef}
-              peerScrollRef={baseScrollRef}
-              handleScrollSync={handleScrollSync}
-              handleWheelZoom={handleWheelZoom}
-              handleWheelOverscroll={handleWheelOverscroll}
-              onTouchStart={onTouchStart}
-              onTouchMove={onTouchMove}
-              onTouchEnd={onTouchEnd}
-              isPanMode={isPanMode}
-              zoom={comparisonZoom}
-              title={comparisonTitle}
-              dropdownPlaceholder={comparisonDropdownPlaceholder}
+          />
+          <CompareDocumentPane
+            pane="comparison"
+            layout={layout}
+            scrollRef={comparisonScrollRef}
+            peerScrollRef={baseScrollRef}
+            handleScrollSync={handleScrollSync}
+            handleWheelZoom={handleWheelZoom}
+            handleWheelOverscroll={handleWheelOverscroll}
+            onTouchStart={onTouchStart}
+            onTouchMove={onTouchMove}
+            onTouchEnd={onTouchEnd}
+            isPanMode={isPanMode}
+            zoom={comparisonZoom}
+            title={comparisonTitle}
+            dropdownPlaceholder={comparisonDropdownPlaceholder}
             changes={mapChangesForDropdown(comparisonWordChanges)}
-              onNavigateChange={(value, pageNumber) => handleChangeNavigation(value, 'comparison', pageNumber)}
-              isLoading={isOperationLoading || comparisonLoading}
-              processingMessage={processingMessage}
-              pages={comparisonPages}
-              pairedPages={basePages}
-              getRowHeightPx={getRowHeightPx}
-              wordHighlightMap={wordHighlightMaps.comparison}
-              metaIndexToGroupId={metaIndexToGroupId.comparison}
-              documentLabel={comparisonDocumentLabel}
-              pageLabel={pageLabel}
-              altLabel={comparisonDocumentLabel}
+            onNavigateChange={(value, pageNumber) => handleChangeNavigation(value, "comparison", pageNumber)}
+            isLoading={isOperationLoading || comparisonLoading}
+            processingMessage={processingMessage}
+            pages={comparisonPages}
+            pairedPages={basePages}
+            getRowHeightPx={getRowHeightPx}
+            wordHighlightMap={wordHighlightMaps.comparison}
+            metaIndexToGroupId={metaIndexToGroupId.comparison}
+            documentLabel={comparisonDocumentLabel}
+            pageLabel={pageLabel}
+            altLabel={comparisonDocumentLabel}
             pageInputValue={pageInputValue}
             onPageInputChange={handleTypingChange}
             maxSharedPages={maxSharedPages}
-            />
-          </div>
-        </Stack>
+          />
+        </div>
+      </Stack>
     </Stack>
   );
 };
diff --git a/frontend/src/core/components/tools/compare/compare.ts b/frontend/src/core/components/tools/compare/compare.ts
index e8b9fcbc92..5e5522dcf7 100644
--- a/frontend/src/core/components/tools/compare/compare.ts
+++ b/frontend/src/core/components/tools/compare/compare.ts
@@ -1,11 +1,11 @@
-import type { TokenBoundingBox, WordHighlightEntry } from '@app/types/compare';
-import type { FileId } from '@app/types/file';
-import type { StirlingFile, StirlingFileStub } from '@app/types/fileContext';
-import type { PagePreview } from '@app/types/compare';
+import type { TokenBoundingBox, WordHighlightEntry } from "@app/types/compare";
+import type { FileId } from "@app/types/file";
+import type { StirlingFile, StirlingFileStub } from "@app/types/fileContext";
+import type { PagePreview } from "@app/types/compare";
 
 /** Convert hex color (#rrggbb) to rgba() string with alpha; falls back to input if invalid. */
 export const toRgba = (hexColor: string, alpha: number): string => {
-  const hex = hexColor.replace('#', '');
+  const hex = hexColor.replace("#", "");
   if (hex.length !== 6) return hexColor;
   const r = parseInt(hex.slice(0, 2), 16);
   const g = parseInt(hex.slice(2, 4), 16);
@@ -15,7 +15,7 @@ export const toRgba = (hexColor: string, alpha: number): string => {
 
 /** Normalize rotation to [0, 360). */
 export const normalizeRotation = (deg: number | undefined | null): number => {
-  const n = ((deg ?? 0) % 360 + 360) % 360;
+  const n = (((deg ?? 0) % 360) + 360) % 360;
   return n;
 };
 
@@ -26,9 +26,7 @@ export const normalizeRotation = (deg: number | undefined | null): number => {
 export const mergeConnectedRects = (rects: TokenBoundingBox[]): TokenBoundingBox[] => {
   if (rects.length === 0) return rects;
   const EPS = 0.004; // small tolerance in normalized page coords
-  const sorted = rects
-    .slice()
-    .sort((a, b) => (a.top !== b.top ? a.top - b.top : a.left - b.left));
+  const sorted = rects.slice().sort((a, b) => (a.top !== b.top ? a.top - b.top : a.left - b.left));
   const merged: TokenBoundingBox[] = [];
 
   const overlapsOrTouches = (a: TokenBoundingBox, b: TokenBoundingBox) => {
@@ -67,7 +65,7 @@ export const mergeConnectedRects = (rects: TokenBoundingBox[]): TokenBoundingBox
 export const groupWordRects = (
   wordRects: WordHighlightEntry[],
   metaIndexToGroupId: Map<number, string>,
-  pane: 'base' | 'comparison'
+  pane: "base" | "comparison",
 ): Map<string, TokenBoundingBox[]> => {
   const groupedRects = new Map<string, TokenBoundingBox[]>();
   for (const { rect, metaIndex } of wordRects) {
@@ -83,7 +81,7 @@ export const groupWordRects = (
 export const computePageLayoutMetrics = (args: {
   page: PagePreview;
   peerPage?: PagePreview | null;
-  layout: 'side-by-side' | 'stacked';
+  layout: "side-by-side" | "stacked";
   isMobileViewport: boolean;
   scrollRefWidth: number | null;
   viewportWidth: number;
@@ -96,7 +94,7 @@ export const computePageLayoutMetrics = (args: {
   const highlightOffset = offsetPixels / page.height;
   const rotationNorm = normalizeRotation(page.rotation);
   const isPortrait = rotationNorm === 0 || rotationNorm === 180;
-  const isStackedPortrait = layout === 'stacked' && isPortrait;
+  const isStackedPortrait = layout === "stacked" && isPortrait;
 
   const containerW = scrollRefWidth ?? viewportWidth;
   const stackedWidth = isMobileViewport
@@ -135,10 +133,7 @@ export const computePageLayoutMetrics = (args: {
     innerScale = 1;
   }
 
-  const containerWidth = Math.max(
-    MIN_CONTAINER_WIDTH,
-    Math.min(containerMaxW, Math.round(baseWidth * containerScale))
-  );
+  const containerWidth = Math.max(MIN_CONTAINER_WIDTH, Math.min(containerMaxW, Math.round(baseWidth * containerScale)));
   const containerHeight = Math.round(baseHeight * (containerWidth / Math.max(1, baseWidth)));
 
   return {
@@ -158,15 +153,14 @@ export const computePageLayoutMetrics = (args: {
 };
 
 /** Map changes to dropdown options tuple. */
-export const mapChangesForDropdown = (
-  changes: Array<{ value: string; label: string; pageNumber: number }>
-) => changes.map(({ value, label, pageNumber }) => ({ value, label, pageNumber }));
+export const mapChangesForDropdown = (changes: Array<{ value: string; label: string; pageNumber: number }>) =>
+  changes.map(({ value, label, pageNumber }) => ({ value, label, pageNumber }));
 
 /** File selection helpers */
 export const getFileFromSelection = (
   explicit: StirlingFile | null | undefined,
   fileId: FileId | null,
-  selectors: { getFile: (id: FileId) => StirlingFile | undefined | null }
+  selectors: { getFile: (id: FileId) => StirlingFile | undefined | null },
 ): StirlingFile | null => {
   if (explicit) return explicit;
   if (!fileId) return null;
@@ -175,7 +169,7 @@ export const getFileFromSelection = (
 
 export const getStubFromSelection = (
   fileId: FileId | null,
-  selectors: { getStirlingFileStub: (id: FileId) => StirlingFileStub | undefined }
+  selectors: { getStirlingFileStub: (id: FileId) => StirlingFileStub | undefined },
 ): StirlingFileStub | null => {
   if (!fileId) return null;
   const stub = selectors.getStirlingFileStub(fileId);
@@ -189,7 +183,7 @@ export const computeShowProgressBanner = (
   compTotal: number | null | undefined,
   baseLoading: boolean,
   compLoading: boolean,
-  threshold: number = 400
+  threshold: number = 400,
 ): boolean => {
   if (!totalsKnown) return false;
   const totals = [baseTotal ?? 0, compTotal ?? 0];
@@ -201,13 +195,11 @@ export const computeProgressPct = (
   baseTotal: number | null | undefined,
   compTotal: number | null | undefined,
   baseRendered: number,
-  compRendered: number
+  compRendered: number,
 ): number => {
-  const totalCombined = totalsKnown ? ((baseTotal ?? 0) + (compTotal ?? 0)) : 0;
+  const totalCombined = totalsKnown ? (baseTotal ?? 0) + (compTotal ?? 0) : 0;
   const renderedCombined = baseRendered + compRendered;
-  return totalsKnown && totalCombined > 0
-    ? Math.min(100, Math.round((renderedCombined / totalCombined) * 100))
-    : 0;
+  return totalsKnown && totalCombined > 0 ? Math.min(100, Math.round((renderedCombined / totalCombined) * 100)) : 0;
 };
 
 export const computeCountsText = (
@@ -216,7 +208,7 @@ export const computeCountsText = (
   baseLength: number,
   compRendered: number,
   compTotal: number | null | undefined,
-  compLength: number
+  compLength: number,
 ): string => {
   const baseTotalShown = baseTotal || baseLength;
   const compTotalShown = compTotal || compLength;
@@ -227,7 +219,7 @@ export const computeMaxSharedPages = (
   baseTotal: number | null | undefined,
   compTotal: number | null | undefined,
   baseLen: number,
-  compLen: number
+  compLen: number,
 ): number => {
   const baseMax = baseTotal || baseLen || 0;
   const compMax = compTotal || compLen || 0;
@@ -235,5 +227,3 @@ export const computeMaxSharedPages = (
   if (!Number.isFinite(minKnown)) return 0;
   return Math.max(0, minKnown);
 };
-
-
diff --git a/frontend/src/core/components/tools/compare/compareView.css b/frontend/src/core/components/tools/compare/compareView.css
index fc58fa829b..d249a7a088 100644
--- a/frontend/src/core/components/tools/compare/compareView.css
+++ b/frontend/src/core/components/tools/compare/compareView.css
@@ -92,7 +92,7 @@
   position: sticky;
   top: 0;
   z-index: 10;
-  background: var(--bg-toolbar);  
+  background: var(--bg-toolbar);
   backdrop-filter: blur(8px);
   border-bottom: 1px solid var(--border-default);
   padding: 0.5rem;
@@ -154,7 +154,9 @@
   padding: 0 !important;
 }
 
-.compare-dropdown-scrollwrap { margin: 0; }
+.compare-dropdown-scrollwrap {
+  margin: 0;
+}
 
 /* Ensure search field sits flush and does not overflow */
 .compare-changes-dropdown .mantine-Combobox-search {
@@ -267,17 +269,17 @@
 /* Flash/pulse highlight for navigated change */
 @keyframes compare-flash {
   0% {
-    outline: 4px solid rgba(255, 235, 59, 0.0);
-    box-shadow: 0 0 0 rgba(255, 235, 59, 0.0);
+    outline: 4px solid rgba(255, 235, 59, 0);
+    box-shadow: 0 0 0 rgba(255, 235, 59, 0);
     background-color: rgba(255, 235, 59, 0.2) !important;
   }
   25% {
-    outline: 4px solid rgba(255, 235, 59, 1.0);
+    outline: 4px solid rgba(255, 235, 59, 1);
     box-shadow: 0 0 20px rgba(255, 235, 59, 0.8);
     background-color: rgba(255, 235, 59, 0.4) !important;
   }
   50% {
-    outline: 4px solid rgba(255, 235, 59, 1.0);
+    outline: 4px solid rgba(255, 235, 59, 1);
     box-shadow: 0 0 30px rgba(255, 235, 59, 0.9);
     background-color: rgba(255, 235, 59, 0.5) !important;
   }
@@ -287,9 +289,9 @@
     background-color: rgba(255, 235, 59, 0.3) !important;
   }
   100% {
-    outline: 4px solid rgba(255, 235, 59, 0.0);
-    box-shadow: 0 0 0 rgba(255, 235, 59, 0.0);
-    background-color: rgba(255, 235, 59, 0.0) !important;
+    outline: 4px solid rgba(255, 235, 59, 0);
+    box-shadow: 0 0 0 rgba(255, 235, 59, 0);
+    background-color: rgba(255, 235, 59, 0) !important;
   }
 }
 
@@ -415,7 +417,7 @@
 .compare-diff-highlight {
   position: absolute;
   pointer-events: none;
-  mix-blend-mode: normal; 
+  mix-blend-mode: normal;
 }
 
 /* Compare dropdown option formatting (page + clamped text) */
diff --git a/frontend/src/core/components/tools/compare/hooks/useCompareChangeNavigation.ts b/frontend/src/core/components/tools/compare/hooks/useCompareChangeNavigation.ts
index f137581e88..80620c7fc5 100644
--- a/frontend/src/core/components/tools/compare/hooks/useCompareChangeNavigation.ts
+++ b/frontend/src/core/components/tools/compare/hooks/useCompareChangeNavigation.ts
@@ -1,6 +1,6 @@
-import { RefObject, useCallback } from 'react';
+import { RefObject, useCallback } from "react";
 
-type Pane = 'base' | 'comparison';
+type Pane = "base" | "comparison";
 
 type SuppressOptions = {
   temporarilySuppressScrollLink?: (fn: () => void, durationMs?: number) => void;
@@ -21,50 +21,38 @@ export const useCompareChangeNavigation = (
         }
       };
 
-      const targetRef = pane === 'base' ? baseScrollRef : comparisonScrollRef;
+      const targetRef = pane === "base" ? baseScrollRef : comparisonScrollRef;
       const container = targetRef.current;
       if (!container) {
         return;
       }
 
       const findNodes = (): HTMLElement[] => {
-        return Array.from(
-          container.querySelectorAll(`[data-change-id="${changeValue}"]`)
-        ) as HTMLElement[];
+        return Array.from(container.querySelectorAll(`[data-change-id="${changeValue}"]`)) as HTMLElement[];
       };
 
       const scrollToPageIfNeeded = () => {
         if (!pageNumber) return false;
-        const pageEl = container.querySelector(
-          `.compare-diff-page[data-page-number="${pageNumber}"]`
-        ) as HTMLElement | null;
+        const pageEl = container.querySelector(`.compare-diff-page[data-page-number="${pageNumber}"]`) as HTMLElement | null;
         if (!pageEl) return false;
         const top = pageEl.offsetTop - Math.round(container.clientHeight * 0.2);
         suppress(() => {
-          container.scrollTo({ top: Math.max(0, top), behavior: 'auto' });
+          container.scrollTo({ top: Math.max(0, top), behavior: "auto" });
         });
         return true;
       };
 
       const scrollPeerPageIfPossible = () => {
         if (!pageNumber) return;
-        const peerRef = pane === 'base' ? comparisonScrollRef : baseScrollRef;
+        const peerRef = pane === "base" ? comparisonScrollRef : baseScrollRef;
         const peer = peerRef.current;
         if (!peer) return;
-        const peerPageEl = peer.querySelector(
-          `.compare-diff-page[data-page-number="${pageNumber}"]`
-        ) as HTMLElement | null;
+        const peerPageEl = peer.querySelector(`.compare-diff-page[data-page-number="${pageNumber}"]`) as HTMLElement | null;
         if (!peerPageEl) return;
         const peerMaxTop = Math.max(0, peer.scrollHeight - peer.clientHeight);
-        const top = Math.max(
-          0,
-          Math.min(
-            peerMaxTop,
-            peerPageEl.offsetTop - Math.round(peer.clientHeight * 0.2)
-          )
-        );
+        const top = Math.max(0, Math.min(peerMaxTop, peerPageEl.offsetTop - Math.round(peer.clientHeight * 0.2)));
         suppress(() => {
-          peer.scrollTo({ top, behavior: 'auto' });
+          peer.scrollTo({ top, behavior: "auto" });
         });
       };
 
@@ -73,20 +61,17 @@ export const useCompareChangeNavigation = (
 
         // Prefer a percent-in-page based vertical scroll, which is resilient to transforms.
         const anchor = nodes[0];
-        const pageEl = anchor.closest('.compare-diff-page') as HTMLElement | null;
-        const inner = anchor.closest('.compare-diff-page__inner') as HTMLElement | null;
-        const topPercent = parseFloat((anchor as HTMLElement).style.top || '0');
+        const pageEl = anchor.closest(".compare-diff-page") as HTMLElement | null;
+        const inner = anchor.closest(".compare-diff-page__inner") as HTMLElement | null;
+        const topPercent = parseFloat((anchor as HTMLElement).style.top || "0");
         if (pageEl && inner && !Number.isNaN(topPercent)) {
           const innerRect = inner.getBoundingClientRect();
           const innerHeight = Math.max(1, innerRect.height);
           const absoluteTopInPage = (topPercent / 100) * innerHeight;
           const maxTop = Math.max(0, container.scrollHeight - container.clientHeight);
-          const desiredTop = Math.max(
-            0,
-            Math.min(maxTop, pageEl.offsetTop + absoluteTopInPage - container.clientHeight / 2)
-          );
+          const desiredTop = Math.max(0, Math.min(maxTop, pageEl.offsetTop + absoluteTopInPage - container.clientHeight / 2));
           suppress(() => {
-            container.scrollTo({ top: desiredTop, behavior: 'auto' });
+            container.scrollTo({ top: desiredTop, behavior: "auto" });
           });
         } else {
           // Fallback to bounding-rect based centering if percent approach is unavailable.
@@ -95,7 +80,7 @@ export const useCompareChangeNavigation = (
           let minLeft = Number.POSITIVE_INFINITY;
           let maxBottom = Number.NEGATIVE_INFINITY;
           let maxRight = Number.NEGATIVE_INFINITY;
-  
+
           nodes.forEach((element) => {
             const rect = element.getBoundingClientRect();
             minTop = Math.min(minTop, rect.top);
@@ -103,7 +88,7 @@ export const useCompareChangeNavigation = (
             maxBottom = Math.max(maxBottom, rect.bottom);
             maxRight = Math.max(maxRight, rect.right);
           });
-  
+
           const boxHeight = Math.max(1, maxBottom - minTop);
           const boxWidth = Math.max(1, maxRight - minLeft);
           const absoluteTop = minTop - containerRect.top + container.scrollTop;
@@ -111,28 +96,28 @@ export const useCompareChangeNavigation = (
           const maxTop = Math.max(0, container.scrollHeight - container.clientHeight);
           const desiredTop = Math.max(0, Math.min(maxTop, absoluteTop - (container.clientHeight - boxHeight) / 2));
           const desiredLeft = Math.max(0, absoluteLeft - (container.clientWidth - boxWidth) / 2);
-  
+
           suppress(() => {
-            container.scrollTo({ top: desiredTop, left: desiredLeft, behavior: 'auto' });
+            container.scrollTo({ top: desiredTop, left: desiredLeft, behavior: "auto" });
           });
         }
 
         // Also scroll the peer container to the corresponding location in the
         // other PDF (same page and approximate vertical position within page),
         // not just the same list/scroll position.
-        const peerRef = pane === 'base' ? comparisonScrollRef : baseScrollRef;
+        const peerRef = pane === "base" ? comparisonScrollRef : baseScrollRef;
         const peer = peerRef.current;
         if (peer) {
           // Use the first node as the anchor
           const anchor = nodes[0];
-          const pageEl = anchor.closest('.compare-diff-page') as HTMLElement | null;
-          const pageNumAttr = pageEl?.getAttribute('data-page-number');
-          const topPercent = parseFloat((anchor as HTMLElement).style.top || '0');
+          const pageEl = anchor.closest(".compare-diff-page") as HTMLElement | null;
+          const pageNumAttr = pageEl?.getAttribute("data-page-number");
+          const topPercent = parseFloat((anchor as HTMLElement).style.top || "0");
           if (pageNumAttr) {
             const peerPageEl = peer.querySelector(
-              `.compare-diff-page[data-page-number="${pageNumAttr}"]`
+              `.compare-diff-page[data-page-number="${pageNumAttr}"]`,
             ) as HTMLElement | null;
-            const peerInner = peerPageEl?.querySelector('.compare-diff-page__inner') as HTMLElement | null;
+            const peerInner = peerPageEl?.querySelector(".compare-diff-page__inner") as HTMLElement | null;
             if (peerPageEl && peerInner) {
               const innerRect = peerInner.getBoundingClientRect();
               const innerHeight = Math.max(1, innerRect.height);
@@ -140,17 +125,17 @@ export const useCompareChangeNavigation = (
               const peerMaxTop = Math.max(0, peer.scrollHeight - peer.clientHeight);
               const peerDesiredTop = Math.max(
                 0,
-                Math.min(peerMaxTop, peerPageEl.offsetTop + absoluteTopInPage - peer.clientHeight / 2)
+                Math.min(peerMaxTop, peerPageEl.offsetTop + absoluteTopInPage - peer.clientHeight / 2),
               );
               suppress(() => {
-                peer.scrollTo({ top: peerDesiredTop, behavior: 'auto' });
+                peer.scrollTo({ top: peerDesiredTop, behavior: "auto" });
               });
             } else if (peerPageEl) {
               // Fallback: Scroll to page top (clamped)
               const peerMaxTop = Math.max(0, peer.scrollHeight - peer.clientHeight);
               const top = Math.max(0, Math.min(peerMaxTop, peerPageEl.offsetTop - Math.round(peer.clientHeight * 0.2)));
               suppress(() => {
-                peer.scrollTo({ top, behavior: 'auto' });
+                peer.scrollTo({ top, behavior: "auto" });
               });
             }
           }
@@ -158,7 +143,7 @@ export const useCompareChangeNavigation = (
 
         const groupsByInner = new Map<HTMLElement, HTMLElement[]>();
         nodes.forEach((element) => {
-          const inner = element.closest('.compare-diff-page__inner') as HTMLElement | null;
+          const inner = element.closest(".compare-diff-page__inner") as HTMLElement | null;
           if (!inner) return;
           const list = groupsByInner.get(inner) ?? [];
           list.push(element);
@@ -180,9 +165,9 @@ export const useCompareChangeNavigation = (
             maxR = Math.max(maxR, leftPercent + widthPercent);
             maxB = Math.max(maxB, topPercent + heightPercent);
           });
-          const overlay = document.createElement('span');
-          overlay.className = 'compare-diff-flash-overlay';
-          overlay.style.position = 'absolute';
+          const overlay = document.createElement("span");
+          overlay.className = "compare-diff-flash-overlay";
+          overlay.style.position = "absolute";
           overlay.style.left = `${minL}%`;
           overlay.style.top = `${minT}%`;
           overlay.style.width = `${Math.max(0.1, maxR - minL)}%`;
@@ -192,12 +177,12 @@ export const useCompareChangeNavigation = (
         });
 
         nodes.forEach((element) => {
-          element.classList.remove('compare-diff-highlight--flash');
+          element.classList.remove("compare-diff-highlight--flash");
         });
         void container.clientWidth; // Force reflow
         nodes.forEach((element) => {
-          element.classList.add('compare-diff-highlight--flash');
-          window.setTimeout(() => element.classList.remove('compare-diff-highlight--flash'), 1600);
+          element.classList.add("compare-diff-highlight--flash");
+          window.setTimeout(() => element.classList.remove("compare-diff-highlight--flash"), 1600);
         });
       };
 
@@ -240,7 +225,7 @@ export const useCompareChangeNavigation = (
         // We already scrolled to the page above; nothing else to do.
       }, 5000);
     },
-    [baseScrollRef, comparisonScrollRef]
+    [baseScrollRef, comparisonScrollRef],
   );
 };
 
diff --git a/frontend/src/core/components/tools/compare/hooks/useCompareHighlights.ts b/frontend/src/core/components/tools/compare/hooks/useCompareHighlights.ts
index f06b6b499e..08b5ceb048 100644
--- a/frontend/src/core/components/tools/compare/hooks/useCompareHighlights.ts
+++ b/frontend/src/core/components/tools/compare/hooks/useCompareHighlights.ts
@@ -1,11 +1,11 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo } from "react";
 import type {
   CompareFilteredTokenInfo,
   WordHighlightEntry,
   CompareResultData,
   CompareChangeOption,
   PagePreview,
-} from '@app/types/compare';
+} from "@app/types/compare";
 
 interface MetaGroupMap {
   base: Map<number, string>;
@@ -28,7 +28,7 @@ export interface UseCompareHighlightsResult {
 const buildWordChanges = (
   tokens: CompareFilteredTokenInfo[],
   metaIndexToGroupId: Map<number, string>,
-  groupPrefix: string
+  groupPrefix: string,
 ): CompareChangeOption[] => {
   metaIndexToGroupId.clear();
   if (!tokens.length) return [];
@@ -38,7 +38,10 @@ const buildWordChanges = (
 
   const flushRun = () => {
     if (currentRun.length === 0) return;
-    const label = currentRun.map((token) => token.token).join(' ').trim();
+    const label = currentRun
+      .map((token) => token.token)
+      .join(" ")
+      .trim();
     if (label.length === 0) {
       currentRun = [];
       return;
@@ -66,9 +69,7 @@ const buildWordChanges = (
   return items;
 };
 
-const buildHighlightMap = (
-  tokens: CompareFilteredTokenInfo[]
-): Map<number, WordHighlightEntry[]> => {
+const buildHighlightMap = (tokens: CompareFilteredTokenInfo[]): Map<number, WordHighlightEntry[]> => {
   const map = new Map<number, WordHighlightEntry[]>();
   for (const token of tokens) {
     if (!token.hasHighlight || !token.bbox || token.page == null) continue;
@@ -89,20 +90,12 @@ export const useCompareHighlights = (
 
   const baseWordChanges = useMemo(() => {
     if (!result) return [];
-    return buildWordChanges(
-      result.filteredTokenData.base,
-      baseMetaIndexToGroupId,
-      'base-group'
-    );
+    return buildWordChanges(result.filteredTokenData.base, baseMetaIndexToGroupId, "base-group");
   }, [baseMetaIndexToGroupId, result]);
 
   const comparisonWordChanges = useMemo(() => {
     if (!result) return [];
-    return buildWordChanges(
-      result.filteredTokenData.comparison,
-      comparisonMetaIndexToGroupId,
-      'comparison-group'
-    );
+    return buildWordChanges(result.filteredTokenData.comparison, comparisonMetaIndexToGroupId, "comparison-group");
   }, [comparisonMetaIndexToGroupId, result]);
 
   const wordHighlightMaps = useMemo(() => {
@@ -128,7 +121,7 @@ export const useCompareHighlights = (
       const rowHeight = Math.max(baseHeight, comparisonHeight);
       return Math.round(rowHeight);
     },
-    [basePages, comparisonPages]
+    [basePages, comparisonPages],
   );
 
   return {
diff --git a/frontend/src/core/components/tools/compare/hooks/useComparePagePreviews.ts b/frontend/src/core/components/tools/compare/hooks/useComparePagePreviews.ts
index 19e4c93632..70919db0b0 100644
--- a/frontend/src/core/components/tools/compare/hooks/useComparePagePreviews.ts
+++ b/frontend/src/core/components/tools/compare/hooks/useComparePagePreviews.ts
@@ -1,10 +1,10 @@
-import { useEffect, useRef, useState } from 'react';
-import { pdfWorkerManager } from '@app/services/pdfWorkerManager';
-import type { PagePreview } from '@app/types/compare';
+import { useEffect, useRef, useState } from "react";
+import { pdfWorkerManager } from "@app/services/pdfWorkerManager";
+import type { PagePreview } from "@app/types/compare";
 
 const DISPLAY_SCALE = 1;
 
-const getDevicePixelRatio = () => (typeof window !== 'undefined' ? window.devicePixelRatio : 1);
+const getDevicePixelRatio = () => (typeof window !== "undefined" ? window.devicePixelRatio : 1);
 
 // Observable preview cache so rendering progress can resume across remounts and view switches
 type CacheEntry = { pages: PagePreview[]; total: number; subscribers: Set<() => void> };
@@ -22,7 +22,11 @@ const getOrCreateEntry = (key: string): CacheEntry => {
 
 const notify = (entry: CacheEntry) => {
   entry.subscribers.forEach((fn) => {
-    try { fn(); } catch { /* no-op */ }
+    try {
+      fn();
+    } catch {
+      /* no-op */
+    }
   });
 };
 
@@ -37,10 +41,11 @@ const appendBatchToCache = (key: string, batch: PagePreview[], provisionalTotal?
   const next = entry.pages.slice();
   for (const p of batch) {
     const idx = next.findIndex((x) => x.pageNumber > p.pageNumber);
-    if (idx === -1) next.push(p); else next.splice(idx, 0, p);
+    if (idx === -1) next.push(p);
+    else next.splice(idx, 0, p);
   }
   entry.pages = next;
-  if (typeof provisionalTotal === 'number' && entry.total === 0) entry.total = provisionalTotal;
+  if (typeof provisionalTotal === "number" && entry.total === 0) entry.total = provisionalTotal;
   notify(entry);
 };
 
@@ -53,11 +58,10 @@ const setTotalInCache = (key: string, total: number) => {
 const replacePagesInCache = (key: string, pages: PagePreview[], total?: number) => {
   const entry = getOrCreateEntry(key);
   entry.pages = pages.slice();
-  if (typeof total === 'number') entry.total = total;
+  if (typeof total === "number") entry.total = total;
   notify(entry);
 };
 
-
 const renderPdfDocumentToImages = async (
   file: File,
   onBatch?: (previews: PagePreview[]) => void,
@@ -86,8 +90,8 @@ const renderPdfDocumentToImages = async (
       const page = await pdf.getPage(pageNumber);
       const displayViewport = page.getViewport({ scale: DISPLAY_SCALE });
       const renderViewport = page.getViewport({ scale: renderScale });
-      const canvas = document.createElement('canvas');
-      const context = canvas.getContext('2d');
+      const canvas = document.createElement("canvas");
+      const context = canvas.getContext("2d");
 
       canvas.width = Math.round(renderViewport.width);
       canvas.height = Math.round(renderViewport.height);
@@ -138,11 +142,7 @@ interface UseComparePagePreviewsOptions {
   cacheKey: number | null;
 }
 
-export const useComparePagePreviews = ({
-  file,
-  enabled,
-  cacheKey,
-}: UseComparePagePreviewsOptions) => {
+export const useComparePagePreviews = ({ file, enabled, cacheKey }: UseComparePagePreviewsOptions) => {
   const [pages, setPages] = useState<PagePreview[]>([]);
   const [loading, setLoading] = useState(false);
   const [totalPages, setTotalPages] = useState(0);
@@ -160,11 +160,11 @@ export const useComparePagePreviews = ({
       };
     }
 
-    const key = `${file.name || 'file'}:${file.size || 0}:${cacheKey ?? 'none'}`;
+    const key = `${file.name || "file"}:${file.size || 0}:${cacheKey ?? "none"}`;
     const refreshVersion = Symbol(key);
     latestVersionMap.set(key, refreshVersion);
     const entry = getOrCreateEntry(key);
-    const cachedTotal = entry.total ?? (entry.pages.length ?? 0);
+    const cachedTotal = entry.total ?? entry.pages.length ?? 0;
     let lastKnownTotal = cachedTotal;
     const isFullyCached = Boolean(entry.pages.length > 0 && cachedTotal > 0 && entry.pages.length >= cachedTotal);
 
@@ -212,7 +212,7 @@ export const useComparePagePreviews = ({
             }
           },
           startAt,
-          () => cancelled || current !== inFlightRef.current
+          () => cancelled || current !== inFlightRef.current,
         );
         if (!cancelled && current === inFlightRef.current) {
           const stillLatest = latestVersionMap.get(key) === refreshVersion;
@@ -228,7 +228,7 @@ export const useComparePagePreviews = ({
           replacePagesInCache(key, finalPages, finalTotal);
         }
       } catch (error) {
-        console.error('[compare] failed to render document preview', error);
+        console.error("[compare] failed to render document preview", error);
         if (!cancelled) {
           setPages([]);
         }
diff --git a/frontend/src/core/components/tools/compare/hooks/useComparePanZoom.ts b/frontend/src/core/components/tools/compare/hooks/useComparePanZoom.ts
index df5a275b97..75038acc9a 100644
--- a/frontend/src/core/components/tools/compare/hooks/useComparePanZoom.ts
+++ b/frontend/src/core/components/tools/compare/hooks/useComparePanZoom.ts
@@ -1,15 +1,5 @@
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import type {
-  MouseEvent as ReactMouseEvent,
-  TouchEvent as ReactTouchEvent,
-  WheelEvent as ReactWheelEvent,
-} from 'react';
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import type { MouseEvent as ReactMouseEvent, TouchEvent as ReactTouchEvent, WheelEvent as ReactWheelEvent } from "react";
 import type {
   PagePreview,
   ComparePane as Pane,
@@ -20,7 +10,7 @@ import type {
   PinchState,
   UseComparePanZoomOptions,
   UseComparePanZoomReturn,
-} from '@app/types/compare';
+} from "@app/types/compare";
 
 const ZOOM_MIN = 0.5;
 const ZOOM_MAX = 100000;
@@ -59,7 +49,7 @@ export const useComparePanZoom = ({
     targetStartPanX: 0,
     targetStartPanY: 0,
   });
-  const lastActivePaneRef = useRef<Pane>('base');
+  const lastActivePaneRef = useRef<Pane>("base");
   const [baseZoom, setBaseZoom] = useState(1);
   const [comparisonZoom, setComparisonZoom] = useState(1);
   const [basePan, setBasePan] = useState<PanState>({ x: 0, y: 0 });
@@ -70,21 +60,21 @@ export const useComparePanZoom = ({
   const [rowStructuralExtraPx, setRowStructuralExtraPx] = useState(DEFAULT_ROW_STRUCTURAL_EXTRA);
   const [rowGapPx, setRowGapPx] = useState(DEFAULT_ROW_GAP);
 
-  const [layout, setLayoutState] = useState<'side-by-side' | 'stacked'>(prefersStacked ? 'stacked' : 'side-by-side');
-  const setLayout = useCallback((next: 'side-by-side' | 'stacked') => {
+  const [layout, setLayoutState] = useState<"side-by-side" | "stacked">(prefersStacked ? "stacked" : "side-by-side");
+  const setLayout = useCallback((next: "side-by-side" | "stacked") => {
     setLayoutState(next);
   }, []);
   const toggleLayout = useCallback(() => {
-    setLayoutState(prev => (prev === 'side-by-side' ? 'stacked' : 'side-by-side'));
+    setLayoutState((prev) => (prev === "side-by-side" ? "stacked" : "side-by-side"));
   }, []);
 
   useEffect(() => {
-    setLayoutState(prev => (prefersStacked ? 'stacked' : prev === 'stacked' ? 'side-by-side' : prev));
+    setLayoutState((prev) => (prefersStacked ? "stacked" : prev === "stacked" ? "side-by-side" : prev));
   }, [prefersStacked]);
 
   const getPagesForPane = useCallback(
-    (pane: Pane) => (pane === 'base' ? basePages : comparisonPages),
-    [basePages, comparisonPages]
+    (pane: Pane) => (pane === "base" ? basePages : comparisonPages),
+    [basePages, comparisonPages],
   );
 
   // rAF-coalesced follower scroll writes
@@ -98,13 +88,10 @@ export const useComparePanZoom = ({
     for (const page of comparisonPages) compMap.set(page.pageNumber, page);
 
     const allPageNumbers = Array.from(
-      new Set([
-        ...basePages.map(p => p.pageNumber),
-        ...comparisonPages.map(p => p.pageNumber),
-      ])
+      new Set([...basePages.map((p) => p.pageNumber), ...comparisonPages.map((p) => p.pageNumber)]),
     ).sort((a, b) => a - b);
 
-    const rows = allPageNumbers.map(pageNumber => {
+    const rows = allPageNumbers.map((pageNumber) => {
       const basePage = baseMap.get(pageNumber) ?? null;
       const compPage = compMap.get(pageNumber) ?? null;
       const canonicalHeight = Math.max(basePage?.height ?? 0, compPage?.height ?? 0);
@@ -124,13 +111,13 @@ export const useComparePanZoom = ({
   // so the scroll mapper can account for real DOM layout instead of relying on
   // bare page image heights.
   useEffect(() => {
-    if (typeof window === 'undefined') return;
+    if (typeof window === "undefined") return;
     if (canonicalLayout.rows.length === 0) return;
 
     const raf = window.requestAnimationFrame(() => {
       const sourceContent =
-        baseScrollRef.current?.querySelector<HTMLElement>('.compare-pane__content') ??
-        comparisonScrollRef.current?.querySelector<HTMLElement>('.compare-pane__content');
+        baseScrollRef.current?.querySelector<HTMLElement>(".compare-pane__content") ??
+        comparisonScrollRef.current?.querySelector<HTMLElement>(".compare-pane__content");
       if (!sourceContent) return;
 
       const style = window.getComputedStyle(sourceContent);
@@ -144,9 +131,7 @@ export const useComparePanZoom = ({
       const totalGap = Math.max(0, canonicalLayout.rows.length - 1) * measuredGap;
       const contentHeight = Math.round(sourceContent.scrollHeight);
       const available = contentHeight - totalGap - canonicalLayout.totalCanonicalHeight;
-      const candidate = canonicalLayout.rows.length > 0
-        ? Math.max(0, Math.round(available / canonicalLayout.rows.length))
-        : 0;
+      const candidate = canonicalLayout.rows.length > 0 ? Math.max(0, Math.round(available / canonicalLayout.rows.length)) : 0;
 
       if (Math.abs(candidate - rowStructuralExtraPx) >= 1) {
         setRowStructuralExtraPx(candidate);
@@ -205,7 +190,8 @@ export const useComparePanZoom = ({
       let hi = srcHeights.length - 1;
       while (lo < hi) {
         const mid = Math.floor((lo + hi + 1) / 2);
-        if (srcPrefix[mid] <= top) lo = mid; else hi = mid - 1;
+        if (srcPrefix[mid] <= top) lo = mid;
+        else hi = mid - 1;
       }
       const i = lo;
       const within = top - srcPrefix[i];
@@ -215,17 +201,17 @@ export const useComparePanZoom = ({
       const dstTop = dstPrefix[j] + frac * (dstHeights[j] || 1);
       return dstTop;
     },
-    [rowHeights]
+    [rowHeights],
   );
 
   const getMaxCanvasSize = useCallback(
     (pane: Pane) => {
       const pages = getPagesForPane(pane);
-      const peers = getPagesForPane(pane === 'base' ? 'comparison' : 'base');
+      const peers = getPagesForPane(pane === "base" ? "comparison" : "base");
       let maxW = 0;
       let maxH = 0;
       for (const page of pages) {
-        const peer = peers.find(p => p.pageNumber === page.pageNumber);
+        const peer = peers.find((p) => p.pageNumber === page.pageNumber);
         const targetHeight = peer ? Math.max(page.height, peer.height) : page.height;
         const fit = targetHeight / page.height;
         const width = Math.round(page.width * fit);
@@ -235,13 +221,13 @@ export const useComparePanZoom = ({
       }
       return { maxW, maxH };
     },
-    [getPagesForPane]
+    [getPagesForPane],
   );
 
   const getPanBounds = useCallback(
     (pane: Pane, zoomOverride?: number) => {
-      const container = pane === 'base' ? baseScrollRef.current : comparisonScrollRef.current;
-      const canvasEl = container?.querySelector('.compare-diff-page__canvas') as HTMLElement | null;
+      const container = pane === "base" ? baseScrollRef.current : comparisonScrollRef.current;
+      const canvasEl = container?.querySelector(".compare-diff-page__canvas") as HTMLElement | null;
       let canvasW: number | null = null;
       let canvasH: number | null = null;
       if (canvasEl) {
@@ -253,12 +239,12 @@ export const useComparePanZoom = ({
       const fallback = getMaxCanvasSize(pane);
       const W = canvasW ?? fallback.maxW;
       const H = canvasH ?? fallback.maxH;
-      const zoom = zoomOverride !== undefined ? zoomOverride : pane === 'base' ? baseZoom : comparisonZoom;
+      const zoom = zoomOverride !== undefined ? zoomOverride : pane === "base" ? baseZoom : comparisonZoom;
       const extraX = Math.max(0, W * (Math.max(zoom, 1) - 1));
       const extraY = Math.max(0, H * (Math.max(zoom, 1) - 1));
       return { maxX: extraX, maxY: extraY };
     },
-    [baseZoom, comparisonZoom, getMaxCanvasSize]
+    [baseZoom, comparisonZoom, getMaxCanvasSize],
   );
 
   const getPaneRotation = useCallback(
@@ -268,7 +254,7 @@ export const useComparePanZoom = ({
       const normalized = ((rotation % 360) + 360) % 360;
       return normalized as 0 | 90 | 180 | 270 | number;
     },
-    [getPagesForPane]
+    [getPagesForPane],
   );
 
   const mapPanBetweenOrientations = useCallback(
@@ -300,24 +286,24 @@ export const useComparePanZoom = ({
       const targetY = Math.max(0, Math.min(targetBounds.maxY, targetNormY * targetBounds.maxY));
       return { x: targetX, y: targetY };
     },
-    [getPaneRotation, getPanBounds]
+    [getPaneRotation, getPanBounds],
   );
 
   const centerPanForZoom = useCallback(
     (pane: Pane, zoomValue: number) => {
       const bounds = getPanBounds(pane, zoomValue);
       const center = { x: Math.round(bounds.maxX / 2), y: Math.round(bounds.maxY / 2) };
-      if (pane === 'base') {
+      if (pane === "base") {
         setBasePan(center);
       } else {
         setComparisonPan(center);
       }
     },
-    [getPanBounds]
+    [getPanBounds],
   );
 
   const setPanToTopLeft = useCallback((pane: Pane) => {
-    if (pane === 'base') {
+    if (pane === "base") {
       setBasePan({ x: 0, y: 0 });
     } else {
       setComparisonPan({ x: 0, y: 0 });
@@ -327,18 +313,18 @@ export const useComparePanZoom = ({
   const clampPanForZoom = useCallback(
     (pane: Pane, zoomValue: number) => {
       const bounds = getPanBounds(pane, zoomValue);
-      const current = pane === 'base' ? basePan : comparisonPan;
+      const current = pane === "base" ? basePan : comparisonPan;
       const clamped = {
         x: Math.max(0, Math.min(bounds.maxX, current.x)),
         y: Math.max(0, Math.min(bounds.maxY, current.y)),
       };
-      if (pane === 'base') {
+      if (pane === "base") {
         setBasePan(clamped);
       } else {
         setComparisonPan(clamped);
       }
     },
-    [basePan, comparisonPan, getPanBounds]
+    [basePan, comparisonPan, getPanBounds],
   );
 
   const handleScrollSync = useCallback(
@@ -349,7 +335,7 @@ export const useComparePanZoom = ({
       }
 
       const sourceIsBase = source === baseScrollRef.current;
-      const sourceKey = sourceIsBase ? 'base' : 'comparison';
+      const sourceKey = sourceIsBase ? "base" : "comparison";
 
       // Only sync if this scroll was initiated by the user (wheel/scrollbar/keyboard),
       // not by our own programmatic scrolls.
@@ -357,7 +343,7 @@ export const useComparePanZoom = ({
         return;
       }
 
-      lastActivePaneRef.current = sourceIsBase ? 'base' : 'comparison';
+      lastActivePaneRef.current = sourceIsBase ? "base" : "comparison";
 
       const targetVerticalRange = Math.max(1, target.scrollHeight - target.clientHeight);
       const mappedTop = mapScrollTopBetweenPanes(source.scrollTop, sourceIsBase);
@@ -374,13 +360,14 @@ export const useComparePanZoom = ({
       // at that bound, skip writing to avoid any subtle feedback that could impede
       // continued scrolling in the source pane.
       const atTopBound = desiredTop === 0 && target.scrollTop === 0 && rawDesired < 0;
-      const atBottomBound = desiredTop === targetVerticalRange && target.scrollTop === targetVerticalRange && rawDesired > targetVerticalRange;
+      const atBottomBound =
+        desiredTop === targetVerticalRange && target.scrollTop === targetVerticalRange && rawDesired > targetVerticalRange;
       if (atTopBound || atBottomBound) {
         return;
       }
 
       const targetIsBase = target === baseScrollRef.current;
-      const key = targetIsBase ? 'base' : 'comparison';
+      const key = targetIsBase ? "base" : "comparison";
 
       desiredTopRef.current[key] = desiredTop;
       if (syncRafRef.current[key] == null) {
@@ -398,7 +385,7 @@ export const useComparePanZoom = ({
         });
       }
     },
-    [isScrollLinked, mapScrollTopBetweenPanes]
+    [isScrollLinked, mapScrollTopBetweenPanes],
   );
 
   // Track user-initiated scroll state per pane
@@ -407,15 +394,23 @@ export const useComparePanZoom = ({
     const compEl = comparisonScrollRef.current;
     if (!baseEl || !compEl) return;
 
-    const onUserScrollStartBase = () => { userScrollRef.current.base = true; };
-    const onUserScrollStartComp = () => { userScrollRef.current.comparison = true; };
-    const onUserScrollEndBase = () => { userScrollRef.current.base = false; };
-    const onUserScrollEndComp = () => { userScrollRef.current.comparison = false; };
+    const onUserScrollStartBase = () => {
+      userScrollRef.current.base = true;
+    };
+    const onUserScrollStartComp = () => {
+      userScrollRef.current.comparison = true;
+    };
+    const onUserScrollEndBase = () => {
+      userScrollRef.current.base = false;
+    };
+    const onUserScrollEndComp = () => {
+      userScrollRef.current.comparison = false;
+    };
 
     const addUserListeners = (el: HTMLDivElement, onStart: () => void, onEnd: () => void) => {
-      el.addEventListener('wheel', onStart, { passive: true });
-      el.addEventListener('mousedown', onStart, { passive: true });
-      el.addEventListener('touchstart', onStart, { passive: true });
+      el.addEventListener("wheel", onStart, { passive: true });
+      el.addEventListener("mousedown", onStart, { passive: true });
+      el.addEventListener("touchstart", onStart, { passive: true });
       // Heuristic: clear the flag shortly after scroll events settle
       let timeout: number | null = null;
       const onScroll = () => {
@@ -425,19 +420,22 @@ export const useComparePanZoom = ({
         if (timeout != null) window.clearTimeout(timeout);
         timeout = window.setTimeout(onEnd, 120);
       };
-      el.addEventListener('scroll', onScroll, { passive: true });
+      el.addEventListener("scroll", onScroll, { passive: true });
       return () => {
-        el.removeEventListener('wheel', onStart as any);
-        el.removeEventListener('mousedown', onStart as any);
-        el.removeEventListener('touchstart', onStart as any);
-        el.removeEventListener('scroll', onScroll as any);
+        el.removeEventListener("wheel", onStart as any);
+        el.removeEventListener("mousedown", onStart as any);
+        el.removeEventListener("touchstart", onStart as any);
+        el.removeEventListener("scroll", onScroll as any);
         if (timeout != null) window.clearTimeout(timeout);
       };
     };
 
     const cleanupBase = addUserListeners(baseEl, onUserScrollStartBase, onUserScrollEndBase);
     const cleanupComp = addUserListeners(compEl, onUserScrollStartComp, onUserScrollEndComp);
-    return () => { cleanupBase(); cleanupComp(); };
+    return () => {
+      cleanupBase();
+      cleanupComp();
+    };
   }, []);
 
   // Helpers for clearer pan-edge overscroll behavior
@@ -454,59 +452,65 @@ export const useComparePanZoom = ({
     return 0;
   }, []);
 
-  const applyIncrementalScroll = useCallback((container: HTMLDivElement, isBase: boolean, applyCandidate: number) => {
-    const STEP = 48; // pixels per incremental scroll
-    const key = isBase ? 'base' : 'comparison';
-    const deltaSinceLast = applyCandidate - edgeOverscrollRef.current[key];
-    const magnitude = Math.abs(deltaSinceLast);
-    if (magnitude < STEP) return;
+  const applyIncrementalScroll = useCallback(
+    (container: HTMLDivElement, isBase: boolean, applyCandidate: number) => {
+      const STEP = 48; // pixels per incremental scroll
+      const key = isBase ? "base" : "comparison";
+      const deltaSinceLast = applyCandidate - edgeOverscrollRef.current[key];
+      const magnitude = Math.abs(deltaSinceLast);
+      if (magnitude < STEP) return;
 
-    const stepDelta = Math.sign(deltaSinceLast) * Math.floor(magnitude / STEP) * STEP;
-    edgeOverscrollRef.current[key] += stepDelta;
+      const stepDelta = Math.sign(deltaSinceLast) * Math.floor(magnitude / STEP) * STEP;
+      edgeOverscrollRef.current[key] += stepDelta;
 
-    const prevTop = container.scrollTop;
-    const nextTop = Math.max(0, Math.min(container.scrollHeight - container.clientHeight, prevTop + stepDelta));
-    if (nextTop === prevTop) return;
+      const prevTop = container.scrollTop;
+      const nextTop = Math.max(0, Math.min(container.scrollHeight - container.clientHeight, prevTop + stepDelta));
+      if (nextTop === prevTop) return;
 
-    container.scrollTop = nextTop;
-    if (isScrollLinked) {
-      const sourceIsBase = isBase;
-      const target = isBase ? comparisonScrollRef.current : baseScrollRef.current;
-      if (target) {
-        const targetVerticalRange = Math.max(1, target.scrollHeight - target.clientHeight);
-        const mappedTop = mapScrollTopBetweenPanes(nextTop, sourceIsBase);
-        const deltaPx = sourceIsBase
-          ? scrollLinkAnchorsRef.current.deltaPixelsBaseToComp
-          : scrollLinkAnchorsRef.current.deltaPixelsCompToBase;
-        const desiredTop = Math.max(0, Math.min(targetVerticalRange, mappedTop + deltaPx));
-        target.scrollTop = desiredTop;
+      container.scrollTop = nextTop;
+      if (isScrollLinked) {
+        const sourceIsBase = isBase;
+        const target = isBase ? comparisonScrollRef.current : baseScrollRef.current;
+        if (target) {
+          const targetVerticalRange = Math.max(1, target.scrollHeight - target.clientHeight);
+          const mappedTop = mapScrollTopBetweenPanes(nextTop, sourceIsBase);
+          const deltaPx = sourceIsBase
+            ? scrollLinkAnchorsRef.current.deltaPixelsBaseToComp
+            : scrollLinkAnchorsRef.current.deltaPixelsCompToBase;
+          const desiredTop = Math.max(0, Math.min(targetVerticalRange, mappedTop + deltaPx));
+          target.scrollTop = desiredTop;
+        }
       }
-    }
-  }, [isScrollLinked, mapScrollTopBetweenPanes]);
+    },
+    [isScrollLinked, mapScrollTopBetweenPanes],
+  );
 
-  const handlePanEdgeOverscroll = useCallback((rawY: number, boundsMaxY: number, isBase: boolean) => {
-    const container = isBase ? baseScrollRef.current : comparisonScrollRef.current;
-    if (!container) return;
-    const overflowY = getVerticalOverflow(rawY, boundsMaxY);
-    const applyCandidate = normalizeApplyCandidate(overflowY);
-    if (applyCandidate !== 0) {
-      applyIncrementalScroll(container, isBase, applyCandidate);
-    } else {
-      // Reset accumulator when back within deadzone
-      edgeOverscrollRef.current[isBase ? 'base' : 'comparison'] = 0;
-    }
-  }, [applyIncrementalScroll, getVerticalOverflow, normalizeApplyCandidate]);
+  const handlePanEdgeOverscroll = useCallback(
+    (rawY: number, boundsMaxY: number, isBase: boolean) => {
+      const container = isBase ? baseScrollRef.current : comparisonScrollRef.current;
+      if (!container) return;
+      const overflowY = getVerticalOverflow(rawY, boundsMaxY);
+      const applyCandidate = normalizeApplyCandidate(overflowY);
+      if (applyCandidate !== 0) {
+        applyIncrementalScroll(container, isBase, applyCandidate);
+      } else {
+        // Reset accumulator when back within deadzone
+        edgeOverscrollRef.current[isBase ? "base" : "comparison"] = 0;
+      }
+    },
+    [applyIncrementalScroll, getVerticalOverflow, normalizeApplyCandidate],
+  );
 
   const beginPan = useCallback(
     (pane: Pane, event: ReactMouseEvent<HTMLDivElement>) => {
       if (!isPanMode) return;
-      const zoom = pane === 'base' ? baseZoom : comparisonZoom;
+      const zoom = pane === "base" ? baseZoom : comparisonZoom;
       if (zoom <= 1) return;
-      const container = pane === 'base' ? baseScrollRef.current : comparisonScrollRef.current;
+      const container = pane === "base" ? baseScrollRef.current : comparisonScrollRef.current;
       if (!container) return;
 
       const targetEl = event.target as HTMLElement | null;
-      const isOnImage = !!targetEl?.closest('.compare-diff-page__inner');
+      const isOnImage = !!targetEl?.closest(".compare-diff-page__inner");
       if (!isOnImage) return;
 
       event.preventDefault();
@@ -515,16 +519,16 @@ export const useComparePanZoom = ({
         source: pane,
         startX: event.clientX,
         startY: event.clientY,
-        startPanX: pane === 'base' ? basePan.x : comparisonPan.x,
-        startPanY: pane === 'base' ? basePan.y : comparisonPan.y,
-        targetStartPanX: pane === 'base' ? comparisonPan.x : basePan.x,
-        targetStartPanY: pane === 'base' ? comparisonPan.y : basePan.y,
+        startPanX: pane === "base" ? basePan.x : comparisonPan.x,
+        startPanY: pane === "base" ? basePan.y : comparisonPan.y,
+        targetStartPanX: pane === "base" ? comparisonPan.x : basePan.x,
+        targetStartPanY: pane === "base" ? comparisonPan.y : basePan.y,
       };
       edgeOverscrollRef.current[pane] = 0;
       lastActivePaneRef.current = pane;
-      (container as HTMLDivElement).style.cursor = 'grabbing';
+      (container as HTMLDivElement).style.cursor = "grabbing";
     },
-    [isPanMode, baseZoom, comparisonZoom, basePan, comparisonPan]
+    [isPanMode, baseZoom, comparisonZoom, basePan, comparisonPan],
   );
 
   const continuePan = useCallback(
@@ -536,7 +540,7 @@ export const useComparePanZoom = ({
       const dx = event.clientX - drag.startX;
       const dy = event.clientY - drag.startY;
 
-      const isBase = drag.source === 'base';
+      const isBase = drag.source === "base";
       const bounds = getPanBounds(drag.source);
       const rawX = drag.startPanX - dx;
       const rawY = drag.startPanY - dy;
@@ -554,16 +558,16 @@ export const useComparePanZoom = ({
         setComparisonPan(desired);
       }
     },
-    [getPanBounds, isPanMode, isScrollLinked, mapPanBetweenOrientations]
+    [getPanBounds, isPanMode, isScrollLinked, mapPanBetweenOrientations],
   );
 
   const endPan = useCallback(() => {
     const drag = panDragRef.current;
     if (!drag.active) return;
-    const sourceEl = drag.source === 'base' ? baseScrollRef.current : comparisonScrollRef.current;
+    const sourceEl = drag.source === "base" ? baseScrollRef.current : comparisonScrollRef.current;
     if (sourceEl) {
-      const zoom = drag.source === 'base' ? baseZoom : comparisonZoom;
-      (sourceEl as HTMLDivElement).style.cursor = isPanMode ? (zoom > 1 ? 'grab' : 'auto') : '';
+      const zoom = drag.source === "base" ? baseZoom : comparisonZoom;
+      (sourceEl as HTMLDivElement).style.cursor = isPanMode ? (zoom > 1 ? "grab" : "auto") : "";
     }
     panDragRef.current.active = false;
     panDragRef.current.source = null;
@@ -573,7 +577,7 @@ export const useComparePanZoom = ({
     (pane: Pane, event: ReactWheelEvent<HTMLDivElement>) => {
       if (!event.ctrlKey) return;
       event.preventDefault();
-      const key = pane === 'base' ? 'base' : 'comparison';
+      const key = pane === "base" ? "base" : "comparison";
       const accum = wheelZoomAccumRef.current;
       const threshold = 180;
       accum[key] += event.deltaY;
@@ -584,33 +588,34 @@ export const useComparePanZoom = ({
       const applySteps = (zoom: number) => {
         let next = zoom;
         for (let i = 0; i < steps; i += 1) {
-          next = direction > 0
-            ? Math.min(ZOOM_MAX, +(next + ZOOM_STEP).toFixed(2))
-            : Math.max(ZOOM_MIN, +(next - ZOOM_STEP).toFixed(2));
+          next =
+            direction > 0
+              ? Math.min(ZOOM_MAX, +(next + ZOOM_STEP).toFixed(2))
+              : Math.max(ZOOM_MIN, +(next - ZOOM_STEP).toFixed(2));
         }
         return next;
       };
-      if (pane === 'base') {
+      if (pane === "base") {
         const prev = baseZoom;
         const next = applySteps(prev);
         setBaseZoom(next);
         if (next < prev) {
-          centerPanForZoom('base', next);
+          centerPanForZoom("base", next);
         } else {
-          clampPanForZoom('base', next);
+          clampPanForZoom("base", next);
         }
       } else {
         const prev = comparisonZoom;
         const next = applySteps(prev);
         setComparisonZoom(next);
         if (next < prev) {
-          centerPanForZoom('comparison', next);
+          centerPanForZoom("comparison", next);
         } else {
-          clampPanForZoom('comparison', next);
+          clampPanForZoom("comparison", next);
         }
       }
     },
-    [baseZoom, clampPanForZoom, centerPanForZoom, comparisonZoom]
+    [baseZoom, clampPanForZoom, centerPanForZoom, comparisonZoom],
   );
 
   // When the source pane hits its scroll limit but the peer still has room,
@@ -620,8 +625,8 @@ export const useComparePanZoom = ({
       if (event.ctrlKey) return; // handled by zoom handler
       if (!isScrollLinked) return;
 
-      const source = pane === 'base' ? baseScrollRef.current : comparisonScrollRef.current;
-      const target = pane === 'base' ? comparisonScrollRef.current : baseScrollRef.current;
+      const source = pane === "base" ? baseScrollRef.current : comparisonScrollRef.current;
+      const target = pane === "base" ? comparisonScrollRef.current : baseScrollRef.current;
       if (!source || !target) return;
 
       const deltaY = event.deltaY;
@@ -634,7 +639,7 @@ export const useComparePanZoom = ({
       if (nextSource !== source.scrollTop) return;
 
       // Source is at a bound; push mapped delta into the target
-      const sourceIsBase = pane === 'base';
+      const sourceIsBase = pane === "base";
 
       // Map the desired new source position (scrollTop + deltaY) into target space
       const mappedBefore = mapScrollTopBetweenPanes(source.scrollTop, sourceIsBase);
@@ -660,7 +665,7 @@ export const useComparePanZoom = ({
         event.preventDefault();
       }
     },
-    [isScrollLinked, mapScrollTopBetweenPanes]
+    [isScrollLinked, mapScrollTopBetweenPanes],
   );
 
   const onTouchStart = useCallback(
@@ -673,15 +678,15 @@ export const useComparePanZoom = ({
           active: true,
           pane,
           startDistance: Math.hypot(dx, dy),
-          startZoom: pane === 'base' ? baseZoom : comparisonZoom,
+          startZoom: pane === "base" ? baseZoom : comparisonZoom,
         };
         event.preventDefault();
       } else if (event.touches.length === 1) {
         if (!isPanMode) return;
-        const zoom = pane === 'base' ? baseZoom : comparisonZoom;
+        const zoom = pane === "base" ? baseZoom : comparisonZoom;
         if (zoom <= 1) return;
         const targetEl = event.target as HTMLElement | null;
-        const isOnImage = !!targetEl?.closest('.compare-diff-page__inner');
+        const isOnImage = !!targetEl?.closest(".compare-diff-page__inner");
         if (!isOnImage) return;
         const touch = event.touches[0];
         panDragRef.current = {
@@ -689,16 +694,16 @@ export const useComparePanZoom = ({
           source: pane,
           startX: touch.clientX,
           startY: touch.clientY,
-          startPanX: pane === 'base' ? basePan.x : comparisonPan.x,
-          startPanY: pane === 'base' ? basePan.y : comparisonPan.y,
-          targetStartPanX: pane === 'base' ? comparisonPan.x : basePan.x,
-          targetStartPanY: pane === 'base' ? comparisonPan.y : basePan.y,
+          startPanX: pane === "base" ? basePan.x : comparisonPan.x,
+          startPanY: pane === "base" ? basePan.y : comparisonPan.y,
+          targetStartPanX: pane === "base" ? comparisonPan.x : basePan.x,
+          targetStartPanY: pane === "base" ? comparisonPan.y : basePan.y,
         };
         edgeOverscrollRef.current[pane] = 0;
         event.preventDefault();
       }
     },
-    [basePan, baseZoom, comparisonPan, comparisonZoom, isPanMode]
+    [basePan, baseZoom, comparisonPan, comparisonZoom, isPanMode],
   );
 
   const onTouchMove = useCallback(
@@ -712,21 +717,21 @@ export const useComparePanZoom = ({
         const dampened = 1 + (scale - 1) * 0.6;
         const pane = pinchRef.current.pane!;
         const startZoom = pinchRef.current.startZoom;
-        const previousZoom = pane === 'base' ? baseZoom : comparisonZoom;
+        const previousZoom = pane === "base" ? baseZoom : comparisonZoom;
         const nextZoom = Math.max(ZOOM_MIN, Math.min(ZOOM_MAX, +(startZoom * dampened).toFixed(2)));
-        if (pane === 'base') {
+        if (pane === "base") {
           setBaseZoom(nextZoom);
           if (nextZoom < previousZoom) {
-            centerPanForZoom('base', nextZoom);
+            centerPanForZoom("base", nextZoom);
           } else if (nextZoom > previousZoom) {
-            clampPanForZoom('base', nextZoom);
+            clampPanForZoom("base", nextZoom);
           }
         } else {
           setComparisonZoom(nextZoom);
           if (nextZoom < previousZoom) {
-            centerPanForZoom('comparison', nextZoom);
+            centerPanForZoom("comparison", nextZoom);
           } else if (nextZoom > previousZoom) {
-            clampPanForZoom('comparison', nextZoom);
+            clampPanForZoom("comparison", nextZoom);
           }
         }
         event.preventDefault();
@@ -737,7 +742,7 @@ export const useComparePanZoom = ({
         const touch = event.touches[0];
         const dx = touch.clientX - panDragRef.current.startX;
         const dy = touch.clientY - panDragRef.current.startY;
-        const isBase = panDragRef.current.source === 'base';
+        const isBase = panDragRef.current.source === "base";
         const bounds = getPanBounds(panDragRef.current.source!);
         const rawX = panDragRef.current.startPanX - dx;
         const rawY = panDragRef.current.startPanY - dy;
@@ -755,7 +760,7 @@ export const useComparePanZoom = ({
         event.preventDefault();
       }
     },
-    [baseZoom, clampPanForZoom, centerPanForZoom, comparisonZoom, getPanBounds, isScrollLinked, mapPanBetweenOrientations]
+    [baseZoom, clampPanForZoom, centerPanForZoom, comparisonZoom, getPanBounds, isScrollLinked, mapPanBetweenOrientations],
   );
 
   const onTouchEnd = useCallback(() => {
@@ -774,7 +779,7 @@ export const useComparePanZoom = ({
   // the follower continues tracking instead of getting stuck at its prior max.
   useEffect(() => {
     if (!isScrollLinked) return;
-    const sourceIsBase = lastActivePaneRef.current === 'base';
+    const sourceIsBase = lastActivePaneRef.current === "base";
     const source = sourceIsBase ? baseScrollRef.current : comparisonScrollRef.current;
     const target = sourceIsBase ? comparisonScrollRef.current : baseScrollRef.current;
     if (!source || !target) return;
@@ -789,7 +794,9 @@ export const useComparePanZoom = ({
     if (Math.abs(target.scrollTop - desiredTop) > 1) {
       isSyncingRef.current = true;
       target.scrollTop = desiredTop;
-      requestAnimationFrame(() => { isSyncingRef.current = false; });
+      requestAnimationFrame(() => {
+        isSyncingRef.current = false;
+      });
     }
   }, [basePages.length, comparisonPages.length, isScrollLinked, mapScrollTopBetweenPanes]);
 
@@ -797,8 +804,9 @@ export const useComparePanZoom = ({
     const onKeyDown = (event: KeyboardEvent) => {
       if (isScrollLinked) return;
       const target = event.target as HTMLElement | null;
-      const tag = (target?.tagName || '').toLowerCase();
-      const isEditable = target && (tag === 'input' || tag === 'textarea' || target.getAttribute('contenteditable') === 'true');
+      const tag = (target?.tagName || "").toLowerCase();
+      const isEditable =
+        target && (tag === "input" || tag === "textarea" || target.getAttribute("contenteditable") === "true");
       if (isEditable) return;
 
       const baseEl = baseScrollRef.current;
@@ -806,9 +814,9 @@ export const useComparePanZoom = ({
       if (!baseEl || !compEl) return;
 
       const STEP = 80;
-      if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
         event.preventDefault();
-        const delta = event.key === 'ArrowDown' ? STEP : -STEP;
+        const delta = event.key === "ArrowDown" ? STEP : -STEP;
         isSyncingRef.current = true;
         baseEl.scrollTop = Math.max(0, Math.min(baseEl.scrollTop + delta, baseEl.scrollHeight - baseEl.clientHeight));
         compEl.scrollTop = Math.max(0, Math.min(compEl.scrollTop + delta, compEl.scrollHeight - compEl.clientHeight));
@@ -817,8 +825,8 @@ export const useComparePanZoom = ({
         });
       }
     };
-    window.addEventListener('keydown', onKeyDown);
-    return () => window.removeEventListener('keydown', onKeyDown);
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
   }, [isScrollLinked]);
 
   const captureScrollLinkDelta = useCallback(() => {
diff --git a/frontend/src/core/components/tools/compare/hooks/useCompareRightRailButtons.tsx b/frontend/src/core/components/tools/compare/hooks/useCompareRightRailButtons.tsx
index 525957d95f..8fc5080b60 100644
--- a/frontend/src/core/components/tools/compare/hooks/useCompareRightRailButtons.tsx
+++ b/frontend/src/core/components/tools/compare/hooks/useCompareRightRailButtons.tsx
@@ -1,16 +1,16 @@
-import { useMemo } from 'react';
-import type React from 'react';
-import { useTranslation } from 'react-i18next';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { alert } from '@app/components/toast';
-import type { ToastLocation } from '@app/components/toast/types';
-import type { RightRailButtonWithAction } from '@app/hooks/useRightRailButtons';
-import { useIsMobile } from '@app/hooks/useIsMobile';
+import { useMemo } from "react";
+import type React from "react";
+import { useTranslation } from "react-i18next";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { alert } from "@app/components/toast";
+import type { ToastLocation } from "@app/components/toast/types";
+import type { RightRailButtonWithAction } from "@app/hooks/useRightRailButtons";
+import { useIsMobile } from "@app/hooks/useIsMobile";
 
-type Pane = 'base' | 'comparison';
+type Pane = "base" | "comparison";
 
 export interface UseCompareRightRailButtonsOptions {
-  layout: 'side-by-side' | 'stacked';
+  layout: "side-by-side" | "stacked";
   toggleLayout: () => void;
   isPanMode: boolean;
   setIsPanMode: (value: boolean) => void;
@@ -53,140 +53,139 @@ export const useCompareRightRailButtons = ({
   const { t, i18n } = useTranslation();
   const isMobile = useIsMobile();
 
-  return useMemo<RightRailButtonWithAction[]>(() => [
-    {
-      id: 'compare-toggle-layout',
-      icon: (
-        <LocalIcon
-          icon={layout === 'side-by-side' ? 'vertical-split-rounded' : 'horizontal-split-rounded'}
-          width="1.5rem"
-          height="1.5rem"
-        />
-      ),
-      tooltip: layout === 'side-by-side'
-        ? t('compare.actions.stackVertically', 'Stack vertically')
-        : t('compare.actions.placeSideBySide', 'Place side by side'),
-      ariaLabel: layout === 'side-by-side'
-        ? t('compare.actions.stackVertically', 'Stack vertically')
-        : t('compare.actions.placeSideBySide', 'Place side by side'),
-      section: 'top',
-      order: 10,
-      onClick: toggleLayout,
-    },
-    {
-      id: 'compare-zoom-out',
-      icon: <LocalIcon icon="zoom-out" width="1.5rem" height="1.5rem" />,
-      tooltip: t('compare.actions.zoomOut', 'Zoom out'),
-      ariaLabel: t('compare.actions.zoomOut', 'Zoom out'),
-      section: 'top',
-      order: 13,
-      onClick: () => {
-        const { min, step } = zoomLimits;
-        const nextBase = Math.max(min, +(baseZoom - step).toFixed(2));
-        const nextComparison = Math.max(min, +(comparisonZoom - step).toFixed(2));
-        setBaseZoom(nextBase);
-        setComparisonZoom(nextComparison);
-        centerPanForZoom('base', nextBase);
-        centerPanForZoom('comparison', nextComparison);
+  return useMemo<RightRailButtonWithAction[]>(
+    () => [
+      {
+        id: "compare-toggle-layout",
+        icon: (
+          <LocalIcon
+            icon={layout === "side-by-side" ? "vertical-split-rounded" : "horizontal-split-rounded"}
+            width="1.5rem"
+            height="1.5rem"
+          />
+        ),
+        tooltip:
+          layout === "side-by-side"
+            ? t("compare.actions.stackVertically", "Stack vertically")
+            : t("compare.actions.placeSideBySide", "Place side by side"),
+        ariaLabel:
+          layout === "side-by-side"
+            ? t("compare.actions.stackVertically", "Stack vertically")
+            : t("compare.actions.placeSideBySide", "Place side by side"),
+        section: "top",
+        order: 10,
+        onClick: toggleLayout,
       },
-    },
-    {
-      id: 'compare-zoom-in',
-      icon: <LocalIcon icon="zoom-in" width="1.5rem" height="1.5rem" />,
-      tooltip: t('compare.actions.zoomIn', 'Zoom in'),
-      ariaLabel: t('compare.actions.zoomIn', 'Zoom in'),
-      section: 'top',
-      order: 14,
-      onClick: () => {
-        const { max, step } = zoomLimits;
-        const nextBase = Math.min(max, +(baseZoom + step).toFixed(2));
-        const nextComparison = Math.min(max, +(comparisonZoom + step).toFixed(2));
-        setBaseZoom(nextBase);
-        setComparisonZoom(nextComparison);
-        clampPanForZoom('base', nextBase);
-        clampPanForZoom('comparison', nextComparison);
+      {
+        id: "compare-zoom-out",
+        icon: <LocalIcon icon="zoom-out" width="1.5rem" height="1.5rem" />,
+        tooltip: t("compare.actions.zoomOut", "Zoom out"),
+        ariaLabel: t("compare.actions.zoomOut", "Zoom out"),
+        section: "top",
+        order: 13,
+        onClick: () => {
+          const { min, step } = zoomLimits;
+          const nextBase = Math.max(min, +(baseZoom - step).toFixed(2));
+          const nextComparison = Math.max(min, +(comparisonZoom - step).toFixed(2));
+          setBaseZoom(nextBase);
+          setComparisonZoom(nextComparison);
+          centerPanForZoom("base", nextBase);
+          centerPanForZoom("comparison", nextComparison);
+        },
       },
-    },
-    {
-      id: 'compare-reset-view',
-      icon: <LocalIcon icon="refresh-rounded" width="1.5rem" height="1.5rem" />,
-      tooltip: t('compare.actions.resetView', 'Reset zoom and pan'),
-      ariaLabel: t('compare.actions.resetView', 'Reset zoom and pan'),
-      section: 'top',
-      order: 14.5,
-      disabled: baseZoom === 1 && comparisonZoom === 1,
-      onClick: () => {
-        setBaseZoom(1);
-        setComparisonZoom(1);
-    setPanToTopLeft('base');
-    setPanToTopLeft('comparison');
-        clearScrollLinkDelta();
-        // Reset scrollTop for both panes to realign view
-        if (baseScrollRef?.current) {
-          baseScrollRef.current.scrollTop = 0;
-        }
-        if (comparisonScrollRef?.current) {
-          comparisonScrollRef.current.scrollTop = 0;
-        }
+      {
+        id: "compare-zoom-in",
+        icon: <LocalIcon icon="zoom-in" width="1.5rem" height="1.5rem" />,
+        tooltip: t("compare.actions.zoomIn", "Zoom in"),
+        ariaLabel: t("compare.actions.zoomIn", "Zoom in"),
+        section: "top",
+        order: 14,
+        onClick: () => {
+          const { max, step } = zoomLimits;
+          const nextBase = Math.min(max, +(baseZoom + step).toFixed(2));
+          const nextComparison = Math.min(max, +(comparisonZoom + step).toFixed(2));
+          setBaseZoom(nextBase);
+          setComparisonZoom(nextComparison);
+          clampPanForZoom("base", nextBase);
+          clampPanForZoom("comparison", nextComparison);
+        },
       },
-    },
-    {
-      id: 'compare-toggle-scroll-link',
-      icon: (
-        <LocalIcon
-          icon={isScrollLinked ? 'link-rounded' : 'link-off-rounded'}
-          width="1.5rem"
-          height="1.5rem"
-        />
-      ),
-      tooltip: isScrollLinked
-        ? t('compare.actions.unlinkScroll', 'Unlink scroll')
-        : t('compare.actions.linkScroll', 'Link scroll'),
-      ariaLabel: isScrollLinked
-        ? t('compare.actions.unlinkScroll', 'Unlink scroll')
-        : t('compare.actions.linkScroll', 'Link scroll'),
-      section: 'top',
-      order: 15,
-      onClick: () => {
-        const next = !isScrollLinked;
-        if (next) {
-          captureScrollLinkDelta();
-        } else {
-          if (!isMobile) {
-            alert({
-              alertType: 'neutral',
-              title: t('compare.toasts.unlinkedTitle', 'Independent scroll enabled'),
-              body: t('compare.toasts.unlinkedBody', 'Tip: Arrow Up/Down scroll both panes when unlinked is off.'),
-              durationMs: 5000,
-              location: 'bottom-center' as ToastLocation,
-              expandable: false,
-            });
+      {
+        id: "compare-reset-view",
+        icon: <LocalIcon icon="refresh-rounded" width="1.5rem" height="1.5rem" />,
+        tooltip: t("compare.actions.resetView", "Reset zoom and pan"),
+        ariaLabel: t("compare.actions.resetView", "Reset zoom and pan"),
+        section: "top",
+        order: 14.5,
+        disabled: baseZoom === 1 && comparisonZoom === 1,
+        onClick: () => {
+          setBaseZoom(1);
+          setComparisonZoom(1);
+          setPanToTopLeft("base");
+          setPanToTopLeft("comparison");
+          clearScrollLinkDelta();
+          // Reset scrollTop for both panes to realign view
+          if (baseScrollRef?.current) {
+            baseScrollRef.current.scrollTop = 0;
           }
-        }
-        setIsScrollLinked(next);
+          if (comparisonScrollRef?.current) {
+            comparisonScrollRef.current.scrollTop = 0;
+          }
+        },
       },
-    },
-  ], [
-    layout,
-    toggleLayout,
-    isPanMode,
-    setIsPanMode,
-    baseZoom,
-    comparisonZoom,
-    setBaseZoom,
-    setComparisonZoom,
-    centerPanForZoom,
-    clampPanForZoom,
-  setPanToTopLeft,
-    clearScrollLinkDelta,
-    captureScrollLinkDelta,
-    isScrollLinked,
-    setIsScrollLinked,
-    zoomLimits,
-    t,
-    i18n.language,
-    isMobile,
-  ]);
+      {
+        id: "compare-toggle-scroll-link",
+        icon: <LocalIcon icon={isScrollLinked ? "link-rounded" : "link-off-rounded"} width="1.5rem" height="1.5rem" />,
+        tooltip: isScrollLinked
+          ? t("compare.actions.unlinkScroll", "Unlink scroll")
+          : t("compare.actions.linkScroll", "Link scroll"),
+        ariaLabel: isScrollLinked
+          ? t("compare.actions.unlinkScroll", "Unlink scroll")
+          : t("compare.actions.linkScroll", "Link scroll"),
+        section: "top",
+        order: 15,
+        onClick: () => {
+          const next = !isScrollLinked;
+          if (next) {
+            captureScrollLinkDelta();
+          } else {
+            if (!isMobile) {
+              alert({
+                alertType: "neutral",
+                title: t("compare.toasts.unlinkedTitle", "Independent scroll enabled"),
+                body: t("compare.toasts.unlinkedBody", "Tip: Arrow Up/Down scroll both panes when unlinked is off."),
+                durationMs: 5000,
+                location: "bottom-center" as ToastLocation,
+                expandable: false,
+              });
+            }
+          }
+          setIsScrollLinked(next);
+        },
+      },
+    ],
+    [
+      layout,
+      toggleLayout,
+      isPanMode,
+      setIsPanMode,
+      baseZoom,
+      comparisonZoom,
+      setBaseZoom,
+      setComparisonZoom,
+      centerPanForZoom,
+      clampPanForZoom,
+      setPanToTopLeft,
+      clearScrollLinkDelta,
+      captureScrollLinkDelta,
+      isScrollLinked,
+      setIsScrollLinked,
+      zoomLimits,
+      t,
+      i18n.language,
+      isMobile,
+    ],
+  );
 };
 
 export type UseCompareRightRailButtonsReturn = ReturnType<typeof useCompareRightRailButtons>;
diff --git a/frontend/src/core/components/tools/compress/CompressSettings.tsx b/frontend/src/core/components/tools/compress/CompressSettings.tsx
index a7f9949b7c..31f07a28b7 100644
--- a/frontend/src/core/components/tools/compress/CompressSettings.tsx
+++ b/frontend/src/core/components/tools/compress/CompressSettings.tsx
@@ -1,5 +1,5 @@
 import { Stack, Text, NumberInput, Select, Divider, Checkbox, Slider, SegmentedControl, Tooltip, Box } from "@mantine/core";
-import SliderWithInput from '@app/components/shared/sliderWithInput/SliderWithInput';
+import SliderWithInput from "@app/components/shared/sliderWithInput/SliderWithInput";
 import { useTranslation } from "react-i18next";
 import { CompressParameters } from "@app/hooks/tools/compress/useCompressParameters";
 import ButtonSelector from "@app/components/shared/ButtonSelector";
@@ -14,32 +14,31 @@ interface CompressSettingsProps {
 
 const CompressSettings = ({ parameters, onParameterChange, disabled = false }: CompressSettingsProps) => {
   const { t } = useTranslation();
-  const { enabled: imageMagickAvailable, unavailableReason: imageMagickReason } = useGroupEnabled('ImageMagick');
+  const { enabled: imageMagickAvailable, unavailableReason: imageMagickReason } = useGroupEnabled("ImageMagick");
 
   return (
     <Stack gap="md">
-
-      <Divider ml='-md'></Divider>
+      <Divider ml="-md"></Divider>
       {/* Compression Method */}
       <ButtonSelector
-        label={t('compress.method.title', 'Compression Method')}
+        label={t("compress.method.title", "Compression Method")}
         value={parameters.compressionMethod}
-        onChange={(value) => onParameterChange('compressionMethod', value)}
+        onChange={(value) => onParameterChange("compressionMethod", value)}
         options={[
-          { value: 'quality', label: t('compress.method.quality', 'Quality') },
-          { value: 'filesize', label: t('compress.method.filesize', 'File Size') },
+          { value: "quality", label: t("compress.method.quality", "Quality") },
+          { value: "filesize", label: t("compress.method.filesize", "File Size") },
         ]}
         disabled={disabled}
       />
 
       {/* Quality Adjustment */}
-      {parameters.compressionMethod === 'quality' && (
+      {parameters.compressionMethod === "quality" && (
         <Stack gap="md">
           <Divider />
           <SliderWithInput
-            label={t('compress.tooltip.qualityAdjustment.title', 'Compression Level')}
+            label={t("compress.tooltip.qualityAdjustment.title", "Compression Level")}
             value={parameters.compressionLevel}
-            onChange={(value) => onParameterChange('compressionLevel', value)}
+            onChange={(value) => onParameterChange("compressionLevel", value)}
             disabled={disabled}
             min={1}
             max={9}
@@ -47,24 +46,33 @@ const CompressSettings = ({ parameters, onParameterChange, disabled = false }: C
             suffix=""
           />
           <Text size="xs" c="dimmed" mt={-4}>
-            {parameters.compressionLevel <= 3 && t('compress.compressionLevel.range1to3', 'Lower values preserve quality but result in larger files')}
-            {parameters.compressionLevel >= 4 && parameters.compressionLevel <= 6 && t('compress.compressionLevel.range4to6', 'Medium compression with moderate quality reduction')}
-            {parameters.compressionLevel >= 7 && t('compress.compressionLevel.range7to9', 'Higher values reduce file size significantly but may reduce image clarity')}
+            {parameters.compressionLevel <= 3 &&
+              t("compress.compressionLevel.range1to3", "Lower values preserve quality but result in larger files")}
+            {parameters.compressionLevel >= 4 &&
+              parameters.compressionLevel <= 6 &&
+              t("compress.compressionLevel.range4to6", "Medium compression with moderate quality reduction")}
+            {parameters.compressionLevel >= 7 &&
+              t(
+                "compress.compressionLevel.range7to9",
+                "Higher values reduce file size significantly but may reduce image clarity",
+              )}
           </Text>
         </Stack>
       )}
 
-      <Divider/>
+      <Divider />
 
       {/* File Size Input */}
-      {parameters.compressionMethod === 'filesize' && (
+      {parameters.compressionMethod === "filesize" && (
         <Stack gap="sm">
-          <Text size="sm" fw={500}>Desired File Size</Text>
-          <div style={{ display: 'flex', gap: '8px', alignItems: 'flex-end' }}>
+          <Text size="sm" fw={500}>
+            Desired File Size
+          </Text>
+          <div style={{ display: "flex", gap: "8px", alignItems: "flex-end" }}>
             <NumberInput
               placeholder="Enter size"
               value={parameters.fileSizeValue}
-              onChange={(value) => onParameterChange('fileSizeValue', value?.toString() || '')}
+              onChange={(value) => onParameterChange("fileSizeValue", value?.toString() || "")}
               min={0}
               disabled={disabled}
               style={{ flex: 1 }}
@@ -74,15 +82,15 @@ const CompressSettings = ({ parameters, onParameterChange, disabled = false }: C
               onChange={(value) => {
                 // Prevent deselection - if value is null/undefined, keep the current value
                 if (value) {
-                  onParameterChange('fileSizeUnit', value as 'KB' | 'MB');
+                  onParameterChange("fileSizeUnit", value as "KB" | "MB");
                 }
               }}
               disabled={disabled}
               data={[
-                { value: 'KB', label: 'KB' },
-                { value: 'MB', label: 'MB' }
+                { value: "KB", label: "KB" },
+                { value: "MB", label: "MB" },
               ]}
-              style={{ width: '80px' }}
+              style={{ width: "80px" }}
               comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
             />
           </div>
@@ -93,7 +101,7 @@ const CompressSettings = ({ parameters, onParameterChange, disabled = false }: C
       <Stack gap="sm">
         <Checkbox
           checked={parameters.grayscale}
-          onChange={(event) => onParameterChange('grayscale', event.currentTarget.checked)}
+          onChange={(event) => onParameterChange("grayscale", event.currentTarget.checked)}
           disabled={disabled}
           label={t("compress.grayscale.label", "Apply Grayscale for compression")}
         />
@@ -102,36 +110,43 @@ const CompressSettings = ({ parameters, onParameterChange, disabled = false }: C
         <Stack gap="sm">
           <Checkbox
             checked={parameters.linearize}
-            onChange={(event) => onParameterChange('linearize', event.currentTarget.checked)}
+            onChange={(event) => onParameterChange("linearize", event.currentTarget.checked)}
             disabled={disabled}
             label={t("compress.linearize.label", "Linearize PDF for fast web viewing")}
           />
         </Stack>
 
         <Tooltip
-          label={imageMagickReason ?? t("compress.lineArt.unavailable", "ImageMagick is not installed or enabled on this server")}
+          label={
+            imageMagickReason ?? t("compress.lineArt.unavailable", "ImageMagick is not installed or enabled on this server")
+          }
           disabled={imageMagickAvailable !== false}
           multiline
           maw={280}
         >
-          <Box style={{ cursor: imageMagickAvailable === false ? 'not-allowed' : undefined }}>
+          <Box style={{ cursor: imageMagickAvailable === false ? "not-allowed" : undefined }}>
             <Checkbox
               checked={parameters.lineArt}
-              onChange={(event) => onParameterChange('lineArt', event.currentTarget.checked)}
+              onChange={(event) => onParameterChange("lineArt", event.currentTarget.checked)}
               disabled={disabled || imageMagickAvailable === false}
               label={t("compress.lineArt.label", "Convert images to line art (bilevel)")}
               description={
                 imageMagickAvailable !== false
-                  ? t("compress.lineArt.description", "Uses ImageMagick to reduce pages to high-contrast black and white for maximum size reduction.")
+                  ? t(
+                      "compress.lineArt.description",
+                      "Uses ImageMagick to reduce pages to high-contrast black and white for maximum size reduction.",
+                    )
                   : undefined
               }
-              style={{ pointerEvents: imageMagickAvailable === false ? 'none' : undefined }}
+              style={{ pointerEvents: imageMagickAvailable === false ? "none" : undefined }}
             />
           </Box>
         </Tooltip>
         {parameters.lineArt && (
-          <Stack gap="xs" style={{ opacity: (disabled || imageMagickAvailable === false) ? 0.6 : 1 }}>
-            <Text size="sm" fw={600}>{t('compress.lineArt.detailLevel', 'Detail level')}</Text>
+          <Stack gap="xs" style={{ opacity: disabled || imageMagickAvailable === false ? 0.6 : 1 }}>
+            <Text size="sm" fw={600}>
+              {t("compress.lineArt.detailLevel", "Detail level")}
+            </Text>
             <Slider
               min={1}
               max={5}
@@ -139,38 +154,38 @@ const CompressSettings = ({ parameters, onParameterChange, disabled = false }: C
               value={(() => {
                 // Map threshold to slider position
                 const thresholdMap = [20, 35, 50, 65, 80];
-                const closest = thresholdMap.reduce((prev, curr, idx) =>
-                  Math.abs(curr - parameters.lineArtThreshold) < Math.abs(thresholdMap[prev] - parameters.lineArtThreshold)
-                    ? idx : prev, 0);
+                const closest = thresholdMap.reduce(
+                  (prev, curr, idx) =>
+                    Math.abs(curr - parameters.lineArtThreshold) < Math.abs(thresholdMap[prev] - parameters.lineArtThreshold)
+                      ? idx
+                      : prev,
+                  0,
+                );
                 return closest + 1;
               })()}
               onChange={(value) => {
                 // Map slider position to threshold: 1=20%, 2=35%, 3=50%, 4=65%, 5=80%
                 const thresholdMap = [20, 35, 50, 65, 80];
-                onParameterChange('lineArtThreshold', thresholdMap[value - 1]);
+                onParameterChange("lineArtThreshold", thresholdMap[value - 1]);
               }}
               disabled={disabled || imageMagickAvailable === false}
               label={null}
-              marks={[
-                { value: 1 },
-                { value: 2 },
-                { value: 3 },
-                { value: 4 },
-                { value: 5 },
-              ]}
+              marks={[{ value: 1 }, { value: 2 }, { value: 3 }, { value: 4 }, { value: 5 }]}
             />
 
-            <Text size="sm" fw={600}>{t('compress.lineArt.edgeEmphasis', 'Edge emphasis')}</Text>
+            <Text size="sm" fw={600}>
+              {t("compress.lineArt.edgeEmphasis", "Edge emphasis")}
+            </Text>
             <SegmentedControl
               fullWidth
               disabled={disabled || imageMagickAvailable === false}
               data={[
-                { value: '1', label: t('compress.lineArt.edgeLow', 'Gentle') },
-                { value: '2', label: t('compress.lineArt.edgeMedium', 'Balanced') },
-                { value: '3', label: t('compress.lineArt.edgeHigh', 'Strong') },
+                { value: "1", label: t("compress.lineArt.edgeLow", "Gentle") },
+                { value: "2", label: t("compress.lineArt.edgeMedium", "Balanced") },
+                { value: "3", label: t("compress.lineArt.edgeHigh", "Strong") },
               ]}
               value={parameters.lineArtEdgeLevel.toString()}
-              onChange={(value) => onParameterChange('lineArtEdgeLevel', parseInt(value) as 1 | 2 | 3)}
+              onChange={(value) => onParameterChange("lineArtEdgeLevel", parseInt(value) as 1 | 2 | 3)}
             />
           </Stack>
         )}
diff --git a/frontend/src/core/components/tools/convert/ConvertFromCbrSettings.tsx b/frontend/src/core/components/tools/convert/ConvertFromCbrSettings.tsx
index 8f1a809469..1578033711 100644
--- a/frontend/src/core/components/tools/convert/ConvertFromCbrSettings.tsx
+++ b/frontend/src/core/components/tools/convert/ConvertFromCbrSettings.tsx
@@ -1,5 +1,5 @@
-import { Stack, Text, Checkbox } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
+import { Stack, Text, Checkbox } from "@mantine/core";
+import { useTranslation } from "react-i18next";
 import { ConvertParameters } from "@app/hooks/tools/convert/useConvertParameters";
 
 interface ConvertFromCbrSettingsProps {
@@ -8,24 +8,24 @@ interface ConvertFromCbrSettingsProps {
   disabled?: boolean;
 }
 
-const ConvertFromCbrSettings = ({
-  parameters,
-  onParameterChange,
-  disabled = false
-}: ConvertFromCbrSettingsProps) => {
+const ConvertFromCbrSettings = ({ parameters, onParameterChange, disabled = false }: ConvertFromCbrSettingsProps) => {
   const { t } = useTranslation();
 
   return (
     <Stack gap="sm" data-testid="cbr-settings">
-      <Text size="sm" fw={500}>{t("convert.cbrOptions", "CBR Options")}:</Text>
+      <Text size="sm" fw={500}>
+        {t("convert.cbrOptions", "CBR Options")}:
+      </Text>
 
       <Checkbox
-        label={t('convert.optimizeForEbook', 'Optimize PDF for ebook readers (uses Ghostscript)')}
+        label={t("convert.optimizeForEbook", "Optimize PDF for ebook readers (uses Ghostscript)")}
         checked={parameters.cbrOptions.optimizeForEbook}
-        onChange={(event) => onParameterChange('cbrOptions', {
-          ...parameters.cbrOptions,
-          optimizeForEbook: event.currentTarget.checked
-        })}
+        onChange={(event) =>
+          onParameterChange("cbrOptions", {
+            ...parameters.cbrOptions,
+            optimizeForEbook: event.currentTarget.checked,
+          })
+        }
         disabled={disabled}
         data-testid="optimize-ebook-checkbox"
       />
diff --git a/frontend/src/core/components/tools/convert/ConvertFromCbzSettings.tsx b/frontend/src/core/components/tools/convert/ConvertFromCbzSettings.tsx
index babb202559..8b005774a2 100644
--- a/frontend/src/core/components/tools/convert/ConvertFromCbzSettings.tsx
+++ b/frontend/src/core/components/tools/convert/ConvertFromCbzSettings.tsx
@@ -1,6 +1,6 @@
-import { Stack, Text, Checkbox } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { ConvertParameters } from '@app/hooks/tools/convert/useConvertParameters';
+import { Stack, Text, Checkbox } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { ConvertParameters } from "@app/hooks/tools/convert/useConvertParameters";
 
 interface ConvertFromCbzSettingsProps {
   parameters: ConvertParameters;
@@ -8,24 +8,24 @@ interface ConvertFromCbzSettingsProps {
   disabled?: boolean;
 }
 
-const ConvertFromCbzSettings = ({
-  parameters,
-  onParameterChange,
-  disabled = false
-}: ConvertFromCbzSettingsProps) => {
+const ConvertFromCbzSettings = ({ parameters, onParameterChange, disabled = false }: ConvertFromCbzSettingsProps) => {
   const { t } = useTranslation();
 
   return (
     <Stack gap="sm" data-testid="cbz-settings">
-      <Text size="sm" fw={500}>{t('convert.cbzOptions', 'CBZ to PDF Options')}:</Text>
+      <Text size="sm" fw={500}>
+        {t("convert.cbzOptions", "CBZ to PDF Options")}:
+      </Text>
 
       <Checkbox
-        label={t('convert.optimizeForEbook', 'Optimize PDF for ebook readers (uses Ghostscript)')}
+        label={t("convert.optimizeForEbook", "Optimize PDF for ebook readers (uses Ghostscript)")}
         checked={parameters.cbzOptions.optimizeForEbook}
-        onChange={(event) => onParameterChange('cbzOptions', {
-          ...parameters.cbzOptions,
-          optimizeForEbook: event.currentTarget.checked
-        })}
+        onChange={(event) =>
+          onParameterChange("cbzOptions", {
+            ...parameters.cbzOptions,
+            optimizeForEbook: event.currentTarget.checked,
+          })
+        }
         disabled={disabled}
         data-testid="optimize-ebook-checkbox"
       />
diff --git a/frontend/src/core/components/tools/convert/ConvertFromEbookSettings.tsx b/frontend/src/core/components/tools/convert/ConvertFromEbookSettings.tsx
index 5d8d2b28b6..dfe892398c 100644
--- a/frontend/src/core/components/tools/convert/ConvertFromEbookSettings.tsx
+++ b/frontend/src/core/components/tools/convert/ConvertFromEbookSettings.tsx
@@ -8,15 +8,11 @@ interface ConvertFromEbookSettingsProps {
   disabled?: boolean;
 }
 
-const ConvertFromEbookSettings = ({
-  parameters,
-  onParameterChange,
-  disabled = false
-}: ConvertFromEbookSettingsProps) => {
+const ConvertFromEbookSettings = ({ parameters, onParameterChange, disabled = false }: ConvertFromEbookSettingsProps) => {
   const { t } = useTranslation();
 
   const handleEmbedAllFontsChange = (value: boolean) => {
-    onParameterChange('ebookOptions', {
+    onParameterChange("ebookOptions", {
       embedAllFonts: value,
       includeTableOfContents: parameters.ebookOptions?.includeTableOfContents ?? false,
       includePageNumbers: parameters.ebookOptions?.includePageNumbers ?? false,
@@ -25,7 +21,7 @@ const ConvertFromEbookSettings = ({
   };
 
   const handleIncludeTableOfContentsChange = (value: boolean) => {
-    onParameterChange('ebookOptions', {
+    onParameterChange("ebookOptions", {
       embedAllFonts: parameters.ebookOptions?.embedAllFonts ?? false,
       includeTableOfContents: value,
       includePageNumbers: parameters.ebookOptions?.includePageNumbers ?? false,
@@ -34,7 +30,7 @@ const ConvertFromEbookSettings = ({
   };
 
   const handleIncludePageNumbersChange = (value: boolean) => {
-    onParameterChange('ebookOptions', {
+    onParameterChange("ebookOptions", {
       embedAllFonts: parameters.ebookOptions?.embedAllFonts ?? false,
       includeTableOfContents: parameters.ebookOptions?.includeTableOfContents ?? false,
       includePageNumbers: value,
@@ -43,7 +39,7 @@ const ConvertFromEbookSettings = ({
   };
 
   const handleOptimizeForEbookChange = (value: boolean) => {
-    onParameterChange('ebookOptions', {
+    onParameterChange("ebookOptions", {
       embedAllFonts: parameters.ebookOptions?.embedAllFonts ?? false,
       includeTableOfContents: parameters.ebookOptions?.includeTableOfContents ?? false,
       includePageNumbers: parameters.ebookOptions?.includePageNumbers ?? false,
@@ -70,7 +66,10 @@ const ConvertFromEbookSettings = ({
       />
       <Checkbox
         label={t("convert.ebookOptions.includeTableOfContents", "Include table of contents")}
-        description={t("convert.ebookOptions.includeTableOfContentsDesc", "Add a generated table of contents to the resulting PDF")}
+        description={t(
+          "convert.ebookOptions.includeTableOfContentsDesc",
+          "Add a generated table of contents to the resulting PDF",
+        )}
         checked={ebookOptions.includeTableOfContents}
         onChange={(event) => handleIncludeTableOfContentsChange(event.currentTarget.checked)}
         disabled={disabled}
@@ -84,7 +83,10 @@ const ConvertFromEbookSettings = ({
       />
       <Checkbox
         label={t("convert.ebookOptions.optimizeForEbookPdf", "Optimize for ebook readers")}
-        description={t("convert.ebookOptions.optimizeForEbookPdfDesc", "Optimize the PDF for eBook reading (smaller file size, better rendering on eInk devices)")}
+        description={t(
+          "convert.ebookOptions.optimizeForEbookPdfDesc",
+          "Optimize the PDF for eBook reading (smaller file size, better rendering on eInk devices)",
+        )}
         checked={ebookOptions.optimizeForEbook}
         onChange={(event) => handleOptimizeForEbookChange(event.currentTarget.checked)}
         disabled={disabled}
diff --git a/frontend/src/core/components/tools/convert/ConvertFromEmailSettings.tsx b/frontend/src/core/components/tools/convert/ConvertFromEmailSettings.tsx
index fd7b1ec977..57aca4253b 100644
--- a/frontend/src/core/components/tools/convert/ConvertFromEmailSettings.tsx
+++ b/frontend/src/core/components/tools/convert/ConvertFromEmailSettings.tsx
@@ -1,6 +1,6 @@
-import { Stack, Text, NumberInput, Checkbox } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { ConvertParameters } from '@app/hooks/tools/convert/useConvertParameters';
+import { Stack, Text, NumberInput, Checkbox } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { ConvertParameters } from "@app/hooks/tools/convert/useConvertParameters";
 
 interface ConvertFromEmailSettingsProps {
   parameters: ConvertParameters;
@@ -8,37 +8,41 @@ interface ConvertFromEmailSettingsProps {
   disabled?: boolean;
 }
 
-const ConvertFromEmailSettings = ({
-  parameters,
-  onParameterChange,
-  disabled = false
-}: ConvertFromEmailSettingsProps) => {
+const ConvertFromEmailSettings = ({ parameters, onParameterChange, disabled = false }: ConvertFromEmailSettingsProps) => {
   const { t } = useTranslation();
 
   return (
     <Stack gap="sm" data-testid="email-settings">
-      <Text size="sm" fw={500}>{t("convert.emailOptions", "Email to PDF Options")}:</Text>
+      <Text size="sm" fw={500}>
+        {t("convert.emailOptions", "Email to PDF Options")}:
+      </Text>
 
       <Checkbox
         label={t("convert.includeAttachments", "Include email attachments")}
         checked={parameters.emailOptions.includeAttachments}
-        onChange={(event) => onParameterChange('emailOptions', {
-          ...parameters.emailOptions,
-          includeAttachments: event.currentTarget.checked
-        })}
+        onChange={(event) =>
+          onParameterChange("emailOptions", {
+            ...parameters.emailOptions,
+            includeAttachments: event.currentTarget.checked,
+          })
+        }
         disabled={disabled}
         data-testid="include-attachments-checkbox"
       />
 
       {parameters.emailOptions.includeAttachments && (
         <Stack gap="xs">
-          <Text size="xs" fw={500}>{t("convert.maxAttachmentSize", "Maximum attachment size (MB)")}:</Text>
+          <Text size="xs" fw={500}>
+            {t("convert.maxAttachmentSize", "Maximum attachment size (MB)")}:
+          </Text>
           <NumberInput
             value={parameters.emailOptions.maxAttachmentSizeMB}
-            onChange={(value) => onParameterChange('emailOptions', {
-              ...parameters.emailOptions,
-              maxAttachmentSizeMB: Number(value) || 10
-            })}
+            onChange={(value) =>
+              onParameterChange("emailOptions", {
+                ...parameters.emailOptions,
+                maxAttachmentSizeMB: Number(value) || 10,
+              })
+            }
             min={1}
             max={100}
             step={1}
@@ -51,10 +55,12 @@ const ConvertFromEmailSettings = ({
       <Checkbox
         label={t("convert.includeAllRecipients", "Include CC and BCC recipients in header")}
         checked={parameters.emailOptions.includeAllRecipients}
-        onChange={(event) => onParameterChange('emailOptions', {
-          ...parameters.emailOptions,
-          includeAllRecipients: event.currentTarget.checked
-        })}
+        onChange={(event) =>
+          onParameterChange("emailOptions", {
+            ...parameters.emailOptions,
+            includeAllRecipients: event.currentTarget.checked,
+          })
+        }
         disabled={disabled}
         data-testid="include-all-recipients-checkbox"
       />
@@ -62,10 +68,12 @@ const ConvertFromEmailSettings = ({
       <Checkbox
         label={t("convert.downloadHtml", "Download HTML intermediate file instead of PDF")}
         checked={parameters.emailOptions.downloadHtml}
-        onChange={(event) => onParameterChange('emailOptions', {
-          ...parameters.emailOptions,
-          downloadHtml: event.currentTarget.checked
-        })}
+        onChange={(event) =>
+          onParameterChange("emailOptions", {
+            ...parameters.emailOptions,
+            downloadHtml: event.currentTarget.checked,
+          })
+        }
         disabled={disabled}
         data-testid="download-html-checkbox"
       />
diff --git a/frontend/src/core/components/tools/convert/ConvertFromImageSettings.tsx b/frontend/src/core/components/tools/convert/ConvertFromImageSettings.tsx
index ea07b60f54..f85b5baf4c 100644
--- a/frontend/src/core/components/tools/convert/ConvertFromImageSettings.tsx
+++ b/frontend/src/core/components/tools/convert/ConvertFromImageSettings.tsx
@@ -10,24 +10,25 @@ interface ConvertFromImageSettingsProps {
   disabled?: boolean;
 }
 
-const ConvertFromImageSettings = ({
-  parameters,
-  onParameterChange,
-  disabled = false
-}: ConvertFromImageSettingsProps) => {
+const ConvertFromImageSettings = ({ parameters, onParameterChange, disabled = false }: ConvertFromImageSettingsProps) => {
   const { t } = useTranslation();
 
   return (
     <Stack gap="sm" data-testid="pdf-options-section">
-      <Text size="sm" fw={500}>{t("convert.pdfOptions", "PDF Options")}:</Text>
+      <Text size="sm" fw={500}>
+        {t("convert.pdfOptions", "PDF Options")}:
+      </Text>
       <Select
         data-testid="color-type-select"
         label={t("convert.colorType", "Color Type")}
         value={parameters.imageOptions.colorType}
-        onChange={(val) => val && onParameterChange('imageOptions', {
-          ...parameters.imageOptions,
-          colorType: val as typeof COLOR_TYPES[keyof typeof COLOR_TYPES]
-        })}
+        onChange={(val) =>
+          val &&
+          onParameterChange("imageOptions", {
+            ...parameters.imageOptions,
+            colorType: val as (typeof COLOR_TYPES)[keyof typeof COLOR_TYPES],
+          })
+        }
         data={[
           { value: COLOR_TYPES.COLOR, label: t("convert.color", "Color") },
           { value: COLOR_TYPES.GRAYSCALE, label: t("convert.grayscale", "Grayscale") },
@@ -41,10 +42,13 @@ const ConvertFromImageSettings = ({
         data-testid="fit-option-select"
         label={t("convert.fitOption", "Fit Option")}
         value={parameters.imageOptions.fitOption}
-        onChange={(val) => val && onParameterChange('imageOptions', {
-          ...parameters.imageOptions,
-          fitOption: val as typeof FIT_OPTIONS[keyof typeof FIT_OPTIONS]
-        })}
+        onChange={(val) =>
+          val &&
+          onParameterChange("imageOptions", {
+            ...parameters.imageOptions,
+            fitOption: val as (typeof FIT_OPTIONS)[keyof typeof FIT_OPTIONS],
+          })
+        }
         data={[
           { value: FIT_OPTIONS.MAINTAIN_ASPECT, label: t("convert.maintainAspectRatio", "Maintain Aspect Ratio") },
           { value: FIT_OPTIONS.FIT_PAGE, label: t("convert.fitDocumentToPage", "Fit Document to Page") },
@@ -59,22 +63,29 @@ const ConvertFromImageSettings = ({
         label={t("convert.autoRotate", "Auto Rotate")}
         description={t("convert.autoRotateDescription", "Automatically rotate images to better fit the PDF page")}
         checked={parameters.imageOptions.autoRotate}
-        onChange={(event) => onParameterChange('imageOptions', {
-          ...parameters.imageOptions,
-          autoRotate: event.currentTarget.checked
-        })}
+        onChange={(event) =>
+          onParameterChange("imageOptions", {
+            ...parameters.imageOptions,
+            autoRotate: event.currentTarget.checked,
+          })
+        }
         disabled={disabled}
       />
 
       <Switch
         data-testid="combine-images-switch"
         label={t("convert.combineImages", "Combine Images")}
-        description={t("convert.combineImagesDescription", "Combine all images into one PDF, or create separate PDFs for each image")}
+        description={t(
+          "convert.combineImagesDescription",
+          "Combine all images into one PDF, or create separate PDFs for each image",
+        )}
         checked={parameters.imageOptions.combineImages}
-        onChange={(event) => onParameterChange('imageOptions', {
-          ...parameters.imageOptions,
-          combineImages: event.currentTarget.checked
-        })}
+        onChange={(event) =>
+          onParameterChange("imageOptions", {
+            ...parameters.imageOptions,
+            combineImages: event.currentTarget.checked,
+          })
+        }
         disabled={disabled}
       />
     </Stack>
diff --git a/frontend/src/core/components/tools/convert/ConvertFromSvgSettings.tsx b/frontend/src/core/components/tools/convert/ConvertFromSvgSettings.tsx
index eee786250d..335685d6a5 100644
--- a/frontend/src/core/components/tools/convert/ConvertFromSvgSettings.tsx
+++ b/frontend/src/core/components/tools/convert/ConvertFromSvgSettings.tsx
@@ -8,31 +8,37 @@ interface ConvertFromSvgSettingsProps {
   disabled?: boolean;
 }
 
-const ConvertFromSvgSettings = ({
-  parameters,
-  onParameterChange,
-  disabled = false
-}: ConvertFromSvgSettingsProps) => {
+const ConvertFromSvgSettings = ({ parameters, onParameterChange, disabled = false }: ConvertFromSvgSettingsProps) => {
   const { t } = useTranslation();
 
   return (
     <Stack gap="sm" data-testid="svg-pdf-options-section">
-      <Text size="sm" fw={500}>{t("convert.svgPdfOptions", "SVG to PDF Options")}:</Text>
-      
+      <Text size="sm" fw={500}>
+        {t("convert.svgPdfOptions", "SVG to PDF Options")}:
+      </Text>
+
       <Switch
         data-testid="combine-svgs-switch"
         label={t("convert.combineSvgs", "Combine SVGs into single PDF")}
-        description={t("convert.combineSvgsDescription", "Combine all SVG files into one PDF with multiple pages, or create separate PDFs for each SVG")}
+        description={t(
+          "convert.combineSvgsDescription",
+          "Combine all SVG files into one PDF with multiple pages, or create separate PDFs for each SVG",
+        )}
         checked={parameters.imageOptions.combineImages}
-        onChange={(event) => onParameterChange('imageOptions', {
-          ...parameters.imageOptions,
-          combineImages: event.currentTarget.checked
-        })}
+        onChange={(event) =>
+          onParameterChange("imageOptions", {
+            ...parameters.imageOptions,
+            combineImages: event.currentTarget.checked,
+          })
+        }
         disabled={disabled}
       />
 
       <Text size="xs" c="dimmed" mt="xs">
-        {t("convert.svgVectorNote", "SVG files are rendered as vector graphics for crisp output at any resolution. Dimensions from the SVG determine the PDF page size.")}
+        {t(
+          "convert.svgVectorNote",
+          "SVG files are rendered as vector graphics for crisp output at any resolution. Dimensions from the SVG determine the PDF page size.",
+        )}
       </Text>
     </Stack>
   );
diff --git a/frontend/src/core/components/tools/convert/ConvertFromWebSettings.tsx b/frontend/src/core/components/tools/convert/ConvertFromWebSettings.tsx
index f2832cb3a0..d82a4e74ea 100644
--- a/frontend/src/core/components/tools/convert/ConvertFromWebSettings.tsx
+++ b/frontend/src/core/components/tools/convert/ConvertFromWebSettings.tsx
@@ -1,6 +1,6 @@
-import { Stack, Text, NumberInput, Slider } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { ConvertParameters } from '@app/hooks/tools/convert/useConvertParameters';
+import { Stack, Text, NumberInput, Slider } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { ConvertParameters } from "@app/hooks/tools/convert/useConvertParameters";
 
 interface ConvertFromWebSettingsProps {
   parameters: ConvertParameters;
@@ -8,25 +8,27 @@ interface ConvertFromWebSettingsProps {
   disabled?: boolean;
 }
 
-const ConvertFromWebSettings = ({
-  parameters,
-  onParameterChange,
-  disabled = false
-}: ConvertFromWebSettingsProps) => {
+const ConvertFromWebSettings = ({ parameters, onParameterChange, disabled = false }: ConvertFromWebSettingsProps) => {
   const { t } = useTranslation();
 
   return (
     <Stack gap="sm" data-testid="web-settings">
-      <Text size="sm" fw={500}>{t("convert.webOptions", "Web to PDF Options")}:</Text>
+      <Text size="sm" fw={500}>
+        {t("convert.webOptions", "Web to PDF Options")}:
+      </Text>
 
       <Stack gap="xs">
-        <Text size="xs" fw={500}>{t("convert.zoomLevel", "Zoom Level")}:</Text>
+        <Text size="xs" fw={500}>
+          {t("convert.zoomLevel", "Zoom Level")}:
+        </Text>
         <NumberInput
           value={parameters.htmlOptions.zoomLevel}
-          onChange={(value) => onParameterChange('htmlOptions', {
-            ...parameters.htmlOptions,
-            zoomLevel: Number(value) || 1.0
-          })}
+          onChange={(value) =>
+            onParameterChange("htmlOptions", {
+              ...parameters.htmlOptions,
+              zoomLevel: Number(value) || 1.0,
+            })
+          }
           min={0.1}
           max={3.0}
           step={0.1}
@@ -35,10 +37,12 @@ const ConvertFromWebSettings = ({
         />
         <Slider
           value={parameters.htmlOptions.zoomLevel}
-          onChange={(value) => onParameterChange('htmlOptions', {
-            ...parameters.htmlOptions,
-            zoomLevel: value
-          })}
+          onChange={(value) =>
+            onParameterChange("htmlOptions", {
+              ...parameters.htmlOptions,
+              zoomLevel: value,
+            })
+          }
           min={0.1}
           max={3.0}
           step={0.1}
diff --git a/frontend/src/core/components/tools/convert/ConvertSettings.tsx b/frontend/src/core/components/tools/convert/ConvertSettings.tsx
index 2f3459a436..41af198326 100644
--- a/frontend/src/core/components/tools/convert/ConvertSettings.tsx
+++ b/frontend/src/core/components/tools/convert/ConvertSettings.tsx
@@ -30,14 +30,14 @@ import {
   EXTENSION_TO_ENDPOINT,
   COLOR_TYPES,
   OUTPUT_OPTIONS,
-  FIT_OPTIONS
+  FIT_OPTIONS,
 } from "@app/constants/convertConstants";
 import { StirlingFile } from "@app/types/fileContext";
 
 interface ConvertSettingsProps {
   parameters: ConvertParameters;
   onParameterChange: <K extends keyof ConvertParameters>(key: K, value: ConvertParameters[K]) => void;
-  getAvailableToExtensions: (fromExtension: string) => Array<{value: string, label: string, group: string}>;
+  getAvailableToExtensions: (fromExtension: string) => Array<{ value: string; label: string; group: string }>;
   selectedFiles: StirlingFile[];
   disabled?: boolean;
 }
@@ -47,7 +47,7 @@ const ConvertSettings = ({
   onParameterChange,
   getAvailableToExtensions,
   selectedFiles,
-  disabled = false
+  disabled = false,
 }: ConvertSettingsProps) => {
   const { t } = useTranslation();
   const theme = useMantineTheme();
@@ -89,33 +89,33 @@ const ConvertSettings = ({
 
   // Enhanced FROM options with endpoint availability
   const enhancedFromOptions = useMemo(() => {
-    const baseOptions = FROM_FORMAT_OPTIONS.map(option => {
+    const baseOptions = FROM_FORMAT_OPTIONS.map((option) => {
       // Check if this source format has any available conversions
       const availableConversions = getAvailableToExtensions(option.value) || [];
-      const hasAvailableConversions = availableConversions.some(targetOption =>
-        isConversionAvailable(option.value, targetOption.value)
+      const hasAvailableConversions = availableConversions.some((targetOption) =>
+        isConversionAvailable(option.value, targetOption.value),
       );
 
       return {
         ...option,
-        enabled: hasAvailableConversions
+        enabled: hasAvailableConversions,
       };
     });
 
     // Filter out unavailable source formats if preference is enabled
     let filteredOptions = baseOptions;
     if (preferences.hideUnavailableConversions) {
-      filteredOptions = baseOptions.filter(opt => opt.enabled !== false);
+      filteredOptions = baseOptions.filter((opt) => opt.enabled !== false);
     }
 
     // Add dynamic format option if current selection is a file-<extension> format
-    if (parameters.fromExtension && parameters.fromExtension.startsWith('file-')) {
-      const extension = parameters.fromExtension.replace('file-', '');
+    if (parameters.fromExtension && parameters.fromExtension.startsWith("file-")) {
+      const extension = parameters.fromExtension.replace("file-", "");
       const dynamicOption = {
         value: parameters.fromExtension,
         label: extension.toUpperCase(),
-        group: 'File',
-        enabled: true
+        group: "File",
+        enabled: true,
       };
 
       // Add the dynamic option at the beginning
@@ -130,26 +130,26 @@ const ConvertSettings = ({
     if (!parameters.fromExtension) return [];
 
     const availableOptions = getAvailableToExtensions(parameters.fromExtension) || [];
-    const enhanced = availableOptions.map(option => {
+    const enhanced = availableOptions.map((option) => {
       const enabled = isConversionAvailable(parameters.fromExtension, option.value);
       const usesCloud = doesConversionUseCloud(parameters.fromExtension, option.value);
       return {
         ...option,
         enabled,
-        usesCloud
+        usesCloud,
       };
     });
 
     // Filter out unavailable conversions if preference is enabled
     if (preferences.hideUnavailableConversions) {
-      return enhanced.filter(opt => opt.enabled !== false);
+      return enhanced.filter((opt) => opt.enabled !== false);
     }
 
     return enhanced;
   }, [parameters.fromExtension, endpointStatus, preferences.hideUnavailableConversions, conversionStatus]);
 
   const resetParametersToDefaults = () => {
-    onParameterChange('imageOptions', {
+    onParameterChange("imageOptions", {
       colorType: COLOR_TYPES.COLOR,
       dpi: 300,
       singleOrMultiple: OUTPUT_OPTIONS.MULTIPLE,
@@ -157,60 +157,60 @@ const ConvertSettings = ({
       autoRotate: true,
       combineImages: true,
     });
-    onParameterChange('emailOptions', {
+    onParameterChange("emailOptions", {
       includeAttachments: true,
       maxAttachmentSizeMB: 10,
       downloadHtml: false,
       includeAllRecipients: false,
     });
-    onParameterChange('pdfaOptions', {
-      outputFormat: 'pdfa-2b',
+    onParameterChange("pdfaOptions", {
+      outputFormat: "pdfa-2b",
       strict: false,
     });
-    onParameterChange('pdfxOptions', {
-      outputFormat: 'pdfx',
+    onParameterChange("pdfxOptions", {
+      outputFormat: "pdfx",
     });
-    onParameterChange('cbrOptions', {
+    onParameterChange("cbrOptions", {
       optimizeForEbook: false,
     });
-    onParameterChange('pdfToCbrOptions', {
+    onParameterChange("pdfToCbrOptions", {
       dpi: 150,
     });
-    onParameterChange('cbzOptions', {
+    onParameterChange("cbzOptions", {
       optimizeForEbook: false,
     });
-    onParameterChange('cbzOutputOptions', {
+    onParameterChange("cbzOutputOptions", {
       dpi: 150,
     });
-    onParameterChange('ebookOptions', {
+    onParameterChange("ebookOptions", {
       embedAllFonts: false,
       includeTableOfContents: false,
       includePageNumbers: false,
       optimizeForEbook: false,
     });
-    onParameterChange('epubOptions', {
+    onParameterChange("epubOptions", {
       detectChapters: true,
-      targetDevice: 'TABLET_PHONE_IMAGES',
-      outputFormat: 'EPUB',
+      targetDevice: "TABLET_PHONE_IMAGES",
+      outputFormat: "EPUB",
     });
-    onParameterChange('isSmartDetection', false);
-    onParameterChange('smartDetectionType', 'none');
+    onParameterChange("isSmartDetection", false);
+    onParameterChange("smartDetectionType", "none");
   };
 
   const setAutoTargetExtension = (fromExtension: string) => {
     const availableToOptions = getAvailableToExtensions(fromExtension);
-    const autoTarget = availableToOptions.length === 1 ? availableToOptions[0].value : '';
-    onParameterChange('toExtension', autoTarget);
+    const autoTarget = availableToOptions.length === 1 ? availableToOptions[0].value : "";
+    onParameterChange("toExtension", autoTarget);
   };
 
   const filterFilesByExtension = (extension: string) => {
-    const files = activeFiles.map(fileId => selectors.getFile(fileId)).filter(Boolean) as StirlingFile[];
-    return files.filter(file => {
+    const files = activeFiles.map((fileId) => selectors.getFile(fileId)).filter(Boolean) as StirlingFile[];
+    return files.filter((file) => {
       const fileExtension = detectFileExtension(file.name);
 
-      if (extension === 'any') {
+      if (extension === "any") {
         return true;
-      } else if (extension === 'image') {
+      } else if (extension === "image") {
         return isImageFormat(fileExtension);
       } else {
         return fileExtension === extension;
@@ -219,12 +219,12 @@ const ConvertSettings = ({
   };
 
   const updateFileSelection = (files: StirlingFile[]) => {
-    const fileIds = files.map(file => file.fileId);
+    const fileIds = files.map((file) => file.fileId);
     setSelectedFiles(fileIds);
   };
 
   const handleFromExtensionChange = (value: string) => {
-    onParameterChange('fromExtension', value);
+    onParameterChange("fromExtension", value);
     setAutoTargetExtension(value);
     resetParametersToDefaults();
 
@@ -237,8 +237,8 @@ const ConvertSettings = ({
   };
 
   const handleToExtensionChange = (value: string) => {
-    onParameterChange('toExtension', value);
-    onParameterChange('imageOptions', {
+    onParameterChange("toExtension", value);
+    onParameterChange("imageOptions", {
       colorType: COLOR_TYPES.COLOR,
       dpi: 300,
       singleOrMultiple: OUTPUT_OPTIONS.MULTIPLE,
@@ -246,37 +246,35 @@ const ConvertSettings = ({
       autoRotate: true,
       combineImages: true,
     });
-    onParameterChange('emailOptions', {
+    onParameterChange("emailOptions", {
       includeAttachments: true,
       maxAttachmentSizeMB: 10,
       downloadHtml: false,
       includeAllRecipients: false,
     });
-    onParameterChange('pdfaOptions', {
-      outputFormat: 'pdfa-2b',
+    onParameterChange("pdfaOptions", {
+      outputFormat: "pdfa-2b",
       strict: false,
     });
-    onParameterChange('pdfxOptions', {
-      outputFormat: 'pdfx',
+    onParameterChange("pdfxOptions", {
+      outputFormat: "pdfx",
     });
-    onParameterChange('cbrOptions', {
+    onParameterChange("cbrOptions", {
       optimizeForEbook: false,
     });
-    onParameterChange('pdfToCbrOptions', {
+    onParameterChange("pdfToCbrOptions", {
       dpi: 150,
     });
-    onParameterChange('cbzOptions', {
+    onParameterChange("cbzOptions", {
       optimizeForEbook: false,
     });
-    onParameterChange('cbzOutputOptions', {
+    onParameterChange("cbzOutputOptions", {
       dpi: 150,
     });
   };
 
-
   return (
     <Stack gap="md">
-
       {/* Format Selection */}
       <Stack gap="sm">
         <Text size="sm" fw={500}>
@@ -301,20 +299,20 @@ const ConvertSettings = ({
         {!parameters.fromExtension ? (
           <UnstyledButton
             style={{
-              padding: '0.5rem 0.75rem',
+              padding: "0.5rem 0.75rem",
               border: `0.0625rem solid ${theme.colors.gray[4]}`,
               borderRadius: theme.radius.sm,
-              backgroundColor: colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1],
-              color: colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6],
-              cursor: 'not-allowed'
+              backgroundColor: colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[1],
+              color: colorScheme === "dark" ? theme.colors.dark[2] : theme.colors.gray[6],
+              cursor: "not-allowed",
             }}
           >
             <Group justify="space-between">
               <Text size="sm">{t("convert.selectSourceFormatFirst", "Select a source format first")}</Text>
               <KeyboardArrowDownIcon
                 style={{
-                  fontSize: '1rem',
-                  color: colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6]
+                  fontSize: "1rem",
+                  color: colorScheme === "dark" ? theme.colors.dark[2] : theme.colors.gray[6],
                 }}
               />
             </Group>
@@ -337,91 +335,62 @@ const ConvertSettings = ({
       {isImageFormat(parameters.toExtension) && (
         <>
           <Divider />
-          <ConvertToImageSettings
-            parameters={parameters}
-            onParameterChange={onParameterChange}
-            disabled={disabled}
-          />
+          <ConvertToImageSettings parameters={parameters} onParameterChange={onParameterChange} disabled={disabled} />
         </>
       )}
 
-
       {/* Color options for image to PDF conversion */}
-      {(isImageFormat(parameters.fromExtension) && parameters.toExtension === 'pdf') ||
-       (parameters.isSmartDetection && parameters.smartDetectionType === 'images') ? (
+      {(isImageFormat(parameters.fromExtension) && parameters.toExtension === "pdf") ||
+      (parameters.isSmartDetection && parameters.smartDetectionType === "images") ? (
         <>
           <Divider />
-          <ConvertFromImageSettings
-            parameters={parameters}
-            onParameterChange={onParameterChange}
-            disabled={disabled}
-          />
+          <ConvertFromImageSettings parameters={parameters} onParameterChange={onParameterChange} disabled={disabled} />
         </>
       ) : null}
 
       {/* SVG to PDF options */}
-      {parameters.fromExtension === 'svg' && parameters.toExtension === 'pdf' && (
+      {parameters.fromExtension === "svg" && parameters.toExtension === "pdf" && (
         <>
           <Divider />
-          <ConvertFromSvgSettings
-            parameters={parameters}
-            onParameterChange={onParameterChange}
-            disabled={disabled}
-          />
+          <ConvertFromSvgSettings parameters={parameters} onParameterChange={onParameterChange} disabled={disabled} />
         </>
       )}
 
       {/* Web to PDF options */}
-      {((isWebFormat(parameters.fromExtension) && parameters.toExtension === 'pdf') ||
-       (parameters.isSmartDetection && parameters.smartDetectionType === 'web')) ? (
+      {(isWebFormat(parameters.fromExtension) && parameters.toExtension === "pdf") ||
+      (parameters.isSmartDetection && parameters.smartDetectionType === "web") ? (
         <>
           <Divider />
-          <ConvertFromWebSettings
-            parameters={parameters}
-            onParameterChange={onParameterChange}
-            disabled={disabled}
-          />
+          <ConvertFromWebSettings parameters={parameters} onParameterChange={onParameterChange} disabled={disabled} />
         </>
       ) : null}
 
       {/* Email to PDF options (EML and MSG formats) */}
-      {(parameters.fromExtension === 'eml' || parameters.fromExtension === 'msg') && parameters.toExtension === 'pdf' && (
+      {(parameters.fromExtension === "eml" || parameters.fromExtension === "msg") && parameters.toExtension === "pdf" && (
         <>
           <Divider />
-          <ConvertFromEmailSettings
-            parameters={parameters}
-            onParameterChange={onParameterChange}
-            disabled={disabled}
-          />
+          <ConvertFromEmailSettings parameters={parameters} onParameterChange={onParameterChange} disabled={disabled} />
         </>
       )}
 
       {/* CBZ to PDF options */}
-      {parameters.fromExtension === 'cbz' && parameters.toExtension === 'pdf' && (
+      {parameters.fromExtension === "cbz" && parameters.toExtension === "pdf" && (
         <>
           <Divider />
-          <ConvertFromCbzSettings
-            parameters={parameters}
-            onParameterChange={onParameterChange}
-            disabled={disabled}
-          />
+          <ConvertFromCbzSettings parameters={parameters} onParameterChange={onParameterChange} disabled={disabled} />
         </>
       )}
 
       {/* PDF to CBZ options */}
-      {parameters.fromExtension === 'pdf' && parameters.toExtension === 'cbz' && (
+      {parameters.fromExtension === "pdf" && parameters.toExtension === "cbz" && (
         <>
           <Divider />
-          <ConvertToCbzSettings
-            parameters={parameters}
-            onParameterChange={onParameterChange}
-            disabled={disabled}
-          />
+          <ConvertToCbzSettings parameters={parameters} onParameterChange={onParameterChange} disabled={disabled} />
         </>
       )}
 
       {/* PDF to PDF/A options */}
-      {parameters.fromExtension === 'pdf' && parameters.toExtension === 'pdfa' && (
+      {parameters.fromExtension === "pdf" && parameters.toExtension === "pdfa" && (
         <>
           <Divider />
           <ConvertToPdfaSettings
@@ -434,7 +403,7 @@ const ConvertSettings = ({
       )}
 
       {/* PDF to PDF/X options */}
-      {parameters.fromExtension === 'pdf' && parameters.toExtension === 'pdfx' && (
+      {parameters.fromExtension === "pdf" && parameters.toExtension === "pdfx" && (
         <>
           <Divider />
           <ConvertToPdfxSettings
@@ -447,53 +416,36 @@ const ConvertSettings = ({
       )}
 
       {/* eBook to PDF options */}
-      {['epub', 'mobi', 'azw3', 'fb2'].includes(parameters.fromExtension) && parameters.toExtension === 'pdf' && (
+      {["epub", "mobi", "azw3", "fb2"].includes(parameters.fromExtension) && parameters.toExtension === "pdf" && (
         <>
           <Divider />
-          <ConvertFromEbookSettings
-            parameters={parameters}
-            onParameterChange={onParameterChange}
-            disabled={disabled}
-          />
+          <ConvertFromEbookSettings parameters={parameters} onParameterChange={onParameterChange} disabled={disabled} />
         </>
       )}
 
       {/* CBR to PDF options */}
-      {parameters.fromExtension === 'cbr' && parameters.toExtension === 'pdf' && (
+      {parameters.fromExtension === "cbr" && parameters.toExtension === "pdf" && (
         <>
           <Divider />
-          <ConvertFromCbrSettings
-            parameters={parameters}
-            onParameterChange={onParameterChange}
-            disabled={disabled}
-          />
+          <ConvertFromCbrSettings parameters={parameters} onParameterChange={onParameterChange} disabled={disabled} />
         </>
       )}
 
       {/* PDF to CBR options */}
-      {parameters.fromExtension === 'pdf' && parameters.toExtension === 'cbr' && (
+      {parameters.fromExtension === "pdf" && parameters.toExtension === "cbr" && (
         <>
           <Divider />
-          <ConvertToCbrSettings
-            parameters={parameters}
-            onParameterChange={onParameterChange}
-            disabled={disabled}
-          />
+          <ConvertToCbrSettings parameters={parameters} onParameterChange={onParameterChange} disabled={disabled} />
         </>
       )}
 
       {/* PDF to EPUB/AZW3 options */}
-      {parameters.fromExtension === 'pdf' && ['epub', 'azw3'].includes(parameters.toExtension) && (
+      {parameters.fromExtension === "pdf" && ["epub", "azw3"].includes(parameters.toExtension) && (
         <>
           <Divider />
-          <ConvertToEpubSettings
-            parameters={parameters}
-            onParameterChange={onParameterChange}
-            disabled={disabled}
-          />
+          <ConvertToEpubSettings parameters={parameters} onParameterChange={onParameterChange} disabled={disabled} />
         </>
       )}
-
     </Stack>
   );
 };
diff --git a/frontend/src/core/components/tools/convert/ConvertToCbrSettings.tsx b/frontend/src/core/components/tools/convert/ConvertToCbrSettings.tsx
index db85eda774..ce02062134 100644
--- a/frontend/src/core/components/tools/convert/ConvertToCbrSettings.tsx
+++ b/frontend/src/core/components/tools/convert/ConvertToCbrSettings.tsx
@@ -8,24 +8,21 @@ interface ConvertToCbrSettingsProps {
   disabled?: boolean;
 }
 
-const ConvertToCbrSettings = ({
-  parameters,
-  onParameterChange,
-  disabled = false
-}: ConvertToCbrSettingsProps) => {
+const ConvertToCbrSettings = ({ parameters, onParameterChange, disabled = false }: ConvertToCbrSettingsProps) => {
   const { t } = useTranslation();
 
   return (
     <Stack gap="sm" data-testid="cbr-output-settings">
-      <Text size="sm" fw={500}>{t("convert.cbrOutputOptions", "PDF to CBR Options")}:</Text>
+      <Text size="sm" fw={500}>
+        {t("convert.cbrOutputOptions", "PDF to CBR Options")}:
+      </Text>
 
       <NumberInput
         data-testid="cbr-dpi-input"
         label={t("convert.cbrDpi", "DPI for image rendering")}
         value={parameters.pdfToCbrOptions.dpi}
         onChange={(val) =>
-          typeof val === 'number' &&
-          onParameterChange('pdfToCbrOptions', { ...parameters.pdfToCbrOptions, dpi: val })
+          typeof val === "number" && onParameterChange("pdfToCbrOptions", { ...parameters.pdfToCbrOptions, dpi: val })
         }
         min={72}
         max={600}
diff --git a/frontend/src/core/components/tools/convert/ConvertToCbzSettings.tsx b/frontend/src/core/components/tools/convert/ConvertToCbzSettings.tsx
index 774219ea57..23ffc3ce1e 100644
--- a/frontend/src/core/components/tools/convert/ConvertToCbzSettings.tsx
+++ b/frontend/src/core/components/tools/convert/ConvertToCbzSettings.tsx
@@ -1,6 +1,6 @@
-import { Stack, Text, NumberInput } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { ConvertParameters } from '@app/hooks/tools/convert/useConvertParameters';
+import { Stack, Text, NumberInput } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { ConvertParameters } from "@app/hooks/tools/convert/useConvertParameters";
 
 interface ConvertToCbzSettingsProps {
   parameters: ConvertParameters;
@@ -8,25 +8,26 @@ interface ConvertToCbzSettingsProps {
   disabled?: boolean;
 }
 
-const ConvertToCbzSettings = ({
-  parameters,
-  onParameterChange,
-  disabled = false
-}: ConvertToCbzSettingsProps) => {
+const ConvertToCbzSettings = ({ parameters, onParameterChange, disabled = false }: ConvertToCbzSettingsProps) => {
   const { t } = useTranslation();
 
   return (
     <Stack gap="sm" data-testid="cbz-output-settings">
-      <Text size="sm" fw={500}>{t('convert.cbzOutputOptions', 'PDF to CBZ Options')}:</Text>
+      <Text size="sm" fw={500}>
+        {t("convert.cbzOutputOptions", "PDF to CBZ Options")}:
+      </Text>
 
       <NumberInput
         data-testid="cbz-dpi-input"
-        label={t('convert.cbzDpi', 'DPI for image rendering')}
+        label={t("convert.cbzDpi", "DPI for image rendering")}
         value={parameters.cbzOutputOptions.dpi}
-        onChange={(val) => typeof val === 'number' && onParameterChange('cbzOutputOptions', {
-          ...parameters.cbzOutputOptions,
-          dpi: val
-        })}
+        onChange={(val) =>
+          typeof val === "number" &&
+          onParameterChange("cbzOutputOptions", {
+            ...parameters.cbzOutputOptions,
+            dpi: val,
+          })
+        }
         min={72}
         max={600}
         step={1}
diff --git a/frontend/src/core/components/tools/convert/ConvertToEpubSettings.tsx b/frontend/src/core/components/tools/convert/ConvertToEpubSettings.tsx
index e732ea330f..b871a2760f 100644
--- a/frontend/src/core/components/tools/convert/ConvertToEpubSettings.tsx
+++ b/frontend/src/core/components/tools/convert/ConvertToEpubSettings.tsx
@@ -9,36 +9,32 @@ interface ConvertToEpubSettingsProps {
   disabled?: boolean;
 }
 
-const ConvertToEpubSettings = ({
-  parameters,
-  onParameterChange,
-  disabled = false
-}: ConvertToEpubSettingsProps) => {
+const ConvertToEpubSettings = ({ parameters, onParameterChange, disabled = false }: ConvertToEpubSettingsProps) => {
   const { t } = useTranslation();
 
   const handleDetectChaptersChange = (value: boolean) => {
-    onParameterChange('epubOptions', {
+    onParameterChange("epubOptions", {
       detectChapters: value,
-      targetDevice: parameters.epubOptions?.targetDevice ?? 'TABLET_PHONE_IMAGES',
-      outputFormat: parameters.epubOptions?.outputFormat ?? parameters.toExtension === 'azw3' ? 'AZW3' : 'EPUB',
+      targetDevice: parameters.epubOptions?.targetDevice ?? "TABLET_PHONE_IMAGES",
+      outputFormat: (parameters.epubOptions?.outputFormat ?? parameters.toExtension === "azw3") ? "AZW3" : "EPUB",
     });
   };
 
   const handleTargetDeviceChange = (value: string | null) => {
     if (value) {
-      onParameterChange('epubOptions', {
+      onParameterChange("epubOptions", {
         detectChapters: parameters.epubOptions?.detectChapters ?? true,
         targetDevice: value,
-        outputFormat: parameters.epubOptions?.outputFormat ?? parameters.toExtension === 'azw3' ? 'AZW3' : 'EPUB',
+        outputFormat: (parameters.epubOptions?.outputFormat ?? parameters.toExtension === "azw3") ? "AZW3" : "EPUB",
       });
     }
   };
 
   const handleOutputFormatChange = (value: string | null) => {
     if (value) {
-      onParameterChange('epubOptions', {
+      onParameterChange("epubOptions", {
         detectChapters: parameters.epubOptions?.detectChapters ?? true,
-        targetDevice: parameters.epubOptions?.targetDevice ?? 'TABLET_PHONE_IMAGES',
+        targetDevice: parameters.epubOptions?.targetDevice ?? "TABLET_PHONE_IMAGES",
         outputFormat: value,
       });
     }
@@ -47,27 +43,30 @@ const ConvertToEpubSettings = ({
   // Initialize epubOptions if not present, set output format based on toExtension
   const epubOptions = parameters.epubOptions || {
     detectChapters: true,
-    targetDevice: 'TABLET_PHONE_IMAGES',
-    outputFormat: parameters.toExtension === 'azw3' ? 'AZW3' : 'EPUB',
+    targetDevice: "TABLET_PHONE_IMAGES",
+    outputFormat: parameters.toExtension === "azw3" ? "AZW3" : "EPUB",
   };
 
   // Sync output format with selected target extension if not manually set
-  if (parameters.toExtension === 'azw3' && epubOptions.outputFormat !== 'AZW3') {
-    handleOutputFormatChange('AZW3');
-  } else if (parameters.toExtension === 'epub' && epubOptions.outputFormat !== 'EPUB') {
-    handleOutputFormatChange('EPUB');
+  if (parameters.toExtension === "azw3" && epubOptions.outputFormat !== "AZW3") {
+    handleOutputFormatChange("AZW3");
+  } else if (parameters.toExtension === "epub" && epubOptions.outputFormat !== "EPUB") {
+    handleOutputFormatChange("EPUB");
   }
 
   return (
     <Stack gap="sm" data-testid="epub-settings">
       <Checkbox
         label={t("convert.epubOptions.detectChapters", "Detect chapters")}
-        description={t("convert.epubOptions.detectChaptersDesc", "Detect headings that look like chapters and insert EPUB page breaks")}
+        description={t(
+          "convert.epubOptions.detectChaptersDesc",
+          "Detect headings that look like chapters and insert EPUB page breaks",
+        )}
         checked={epubOptions.detectChapters}
         onChange={(event) => handleDetectChaptersChange(event.currentTarget.checked)}
         disabled={disabled}
       />
-      
+
       <Select
         label={t("convert.epubOptions.targetDevice", "Target device")}
         description={t("convert.epubOptions.targetDeviceDesc", "Choose an output profile optimized for the reader device")}
@@ -75,14 +74,14 @@ const ConvertToEpubSettings = ({
         onChange={handleTargetDeviceChange}
         disabled={disabled}
         data={[
-          { 
-            value: 'TABLET_PHONE_IMAGES', 
-            label: t("convert.epubOptions.tabletPhone", "Tablet/Phone (with images)") 
+          {
+            value: "TABLET_PHONE_IMAGES",
+            label: t("convert.epubOptions.tabletPhone", "Tablet/Phone (with images)"),
+          },
+          {
+            value: "KINDLE_EINK_TEXT",
+            label: t("convert.epubOptions.kindleEink", "Kindle e-Ink (text optimized)"),
           },
-          { 
-            value: 'KINDLE_EINK_TEXT', 
-            label: t("convert.epubOptions.kindleEink", "Kindle e-Ink (text optimized)") 
-          }
         ]}
         comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
       />
@@ -94,8 +93,8 @@ const ConvertToEpubSettings = ({
         onChange={handleOutputFormatChange}
         disabled={disabled}
         data={[
-          { value: 'EPUB', label: 'EPUB' },
-          { value: 'AZW3', label: 'AZW3' }
+          { value: "EPUB", label: "EPUB" },
+          { value: "AZW3", label: "AZW3" },
         ]}
         comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
       />
diff --git a/frontend/src/core/components/tools/convert/ConvertToImageSettings.tsx b/frontend/src/core/components/tools/convert/ConvertToImageSettings.tsx
index 98eb66c93e..f5ddae4663 100644
--- a/frontend/src/core/components/tools/convert/ConvertToImageSettings.tsx
+++ b/frontend/src/core/components/tools/convert/ConvertToImageSettings.tsx
@@ -10,25 +10,26 @@ interface ConvertToImageSettingsProps {
   disabled?: boolean;
 }
 
-const ConvertToImageSettings = ({
-  parameters,
-  onParameterChange,
-  disabled = false
-}: ConvertToImageSettingsProps) => {
+const ConvertToImageSettings = ({ parameters, onParameterChange, disabled = false }: ConvertToImageSettingsProps) => {
   const { t } = useTranslation();
 
   return (
     <Stack gap="sm" data-testid="image-options-section">
-      <Text size="sm" fw={500} data-testid="image-options-title">{t("convert.imageOptions", "Image Options")}:</Text>
+      <Text size="sm" fw={500} data-testid="image-options-title">
+        {t("convert.imageOptions", "Image Options")}:
+      </Text>
       <Group grow>
         <Select
           data-testid="color-type-select"
           label={t("convert.colorType", "Color Type")}
           value={parameters.imageOptions.colorType}
-          onChange={(val) => val && onParameterChange('imageOptions', {
-            ...parameters.imageOptions,
-            colorType: val as typeof COLOR_TYPES[keyof typeof COLOR_TYPES]
-          })}
+          onChange={(val) =>
+            val &&
+            onParameterChange("imageOptions", {
+              ...parameters.imageOptions,
+              colorType: val as (typeof COLOR_TYPES)[keyof typeof COLOR_TYPES],
+            })
+          }
           data={[
             { value: COLOR_TYPES.COLOR, label: t("convert.color", "Color") },
             { value: COLOR_TYPES.GRAYSCALE, label: t("convert.grayscale", "Grayscale") },
@@ -41,10 +42,13 @@ const ConvertToImageSettings = ({
           data-testid="dpi-input"
           label={t("convert.dpi", "DPI")}
           value={parameters.imageOptions.dpi}
-          onChange={(val) => typeof val === 'number' && onParameterChange('imageOptions', {
-            ...parameters.imageOptions,
-            dpi: val
-          })}
+          onChange={(val) =>
+            typeof val === "number" &&
+            onParameterChange("imageOptions", {
+              ...parameters.imageOptions,
+              dpi: val,
+            })
+          }
           min={72}
           max={600}
           step={1}
@@ -55,10 +59,13 @@ const ConvertToImageSettings = ({
         data-testid="output-type-select"
         label={t("convert.output", "Output")}
         value={parameters.imageOptions.singleOrMultiple}
-        onChange={(val) => val && onParameterChange('imageOptions', {
-          ...parameters.imageOptions,
-          singleOrMultiple: val as typeof OUTPUT_OPTIONS[keyof typeof OUTPUT_OPTIONS]
-        })}
+        onChange={(val) =>
+          val &&
+          onParameterChange("imageOptions", {
+            ...parameters.imageOptions,
+            singleOrMultiple: val as (typeof OUTPUT_OPTIONS)[keyof typeof OUTPUT_OPTIONS],
+          })
+        }
         data={[
           { value: OUTPUT_OPTIONS.SINGLE, label: t("convert.single", "Single") },
           { value: OUTPUT_OPTIONS.MULTIPLE, label: t("convert.multiple", "Multiple") },
diff --git a/frontend/src/core/components/tools/convert/ConvertToPdfaSettings.tsx b/frontend/src/core/components/tools/convert/ConvertToPdfaSettings.tsx
index 85746688e7..23b22f69c0 100644
--- a/frontend/src/core/components/tools/convert/ConvertToPdfaSettings.tsx
+++ b/frontend/src/core/components/tools/convert/ConvertToPdfaSettings.tsx
@@ -1,8 +1,8 @@
-import { Stack, Text, Select, Alert, Checkbox } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { ConvertParameters } from '@app/hooks/tools/convert/useConvertParameters';
-import { usePdfSignatureDetection } from '@app/hooks/usePdfSignatureDetection';
-import { StirlingFile } from '@app/types/fileContext';
+import { Stack, Text, Select, Alert, Checkbox } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { ConvertParameters } from "@app/hooks/tools/convert/useConvertParameters";
+import { usePdfSignatureDetection } from "@app/hooks/usePdfSignatureDetection";
+import { StirlingFile } from "@app/types/fileContext";
 import { Z_INDEX_AUTOMATE_DROPDOWN } from "@app/styles/zIndex";
 
 interface ConvertToPdfaSettingsProps {
@@ -16,44 +16,56 @@ const ConvertToPdfaSettings = ({
   parameters,
   onParameterChange,
   selectedFiles,
-  disabled = false
+  disabled = false,
 }: ConvertToPdfaSettingsProps) => {
   const { t } = useTranslation();
   const { hasDigitalSignatures, isChecking } = usePdfSignatureDetection(selectedFiles);
 
   const pdfaFormatOptions = [
-    { value: 'pdfa-1', label: 'PDF/A-1b' },
-    { value: 'pdfa-2b', label: 'PDF/A-2b' },
-    { value: 'pdfa-3b', label: 'PDF/A-3b' }
+    { value: "pdfa-1", label: "PDF/A-1b" },
+    { value: "pdfa-2b", label: "PDF/A-2b" },
+    { value: "pdfa-3b", label: "PDF/A-3b" },
   ];
 
   return (
     <Stack gap="sm" data-testid="pdfa-settings">
-      <Text size="sm" fw={500}>{t("convert.pdfaOptions", "PDF/A Options")}:</Text>
+      <Text size="sm" fw={500}>
+        {t("convert.pdfaOptions", "PDF/A Options")}:
+      </Text>
 
       {hasDigitalSignatures && (
         <Alert color="yellow">
           <Text size="sm">
-            {t("convert.pdfaDigitalSignatureWarning", "The PDF contains a digital signature. This will be removed in the next step.")}
+            {t(
+              "convert.pdfaDigitalSignatureWarning",
+              "The PDF contains a digital signature. This will be removed in the next step.",
+            )}
           </Text>
         </Alert>
       )}
 
       <Stack gap="xs">
-        <Text size="xs" fw={500}>{t("convert.outputFormat", "Output Format")}:</Text>
+        <Text size="xs" fw={500}>
+          {t("convert.outputFormat", "Output Format")}:
+        </Text>
         <Select
           value={parameters.pdfaOptions.outputFormat}
-          onChange={(value) => onParameterChange('pdfaOptions', {
-            ...parameters.pdfaOptions,
-            outputFormat: value || 'pdfa-2b'
-          })}
+          onChange={(value) =>
+            onParameterChange("pdfaOptions", {
+              ...parameters.pdfaOptions,
+              outputFormat: value || "pdfa-2b",
+            })
+          }
           data={pdfaFormatOptions}
           disabled={disabled || isChecking}
           data-testid="pdfa-output-format-select"
           comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
         />
         <Text size="xs" c="dimmed">
-          {t("convert.pdfaNote", "PDF/A-1b is more compatible, PDF/A-2b supports more features, PDF/A-3b supports embedded files.")}
+          {t(
+            "convert.pdfaNote",
+            "PDF/A-1b is more compatible, PDF/A-2b supports more features, PDF/A-3b supports embedded files.",
+          )}
         </Text>
       </Stack>
 
@@ -61,10 +73,12 @@ const ConvertToPdfaSettings = ({
         label={t("convert.strictMode", "Strict Mode")}
         description={t("convert.strictModeDesc", "Error if conversion is not perfect (uses VeraPDF verification)")}
         checked={parameters.pdfaOptions.strict}
-        onChange={(event) => onParameterChange('pdfaOptions', {
-          ...parameters.pdfaOptions,
-          strict: event.currentTarget.checked
-        })}
+        onChange={(event) =>
+          onParameterChange("pdfaOptions", {
+            ...parameters.pdfaOptions,
+            strict: event.currentTarget.checked,
+          })
+        }
         disabled={disabled || isChecking}
       />
     </Stack>
diff --git a/frontend/src/core/components/tools/convert/ConvertToPdfxSettings.tsx b/frontend/src/core/components/tools/convert/ConvertToPdfxSettings.tsx
index 6d2d3ce632..da00373bf6 100644
--- a/frontend/src/core/components/tools/convert/ConvertToPdfxSettings.tsx
+++ b/frontend/src/core/components/tools/convert/ConvertToPdfxSettings.tsx
@@ -1,6 +1,6 @@
-import { useEffect } from 'react';
-import { ConvertParameters } from '@app/hooks/tools/convert/useConvertParameters';
-import { StirlingFile } from '@app/types/fileContext';
+import { useEffect } from "react";
+import { ConvertParameters } from "@app/hooks/tools/convert/useConvertParameters";
+import { StirlingFile } from "@app/types/fileContext";
 
 interface ConvertToPdfxSettingsProps {
   parameters: ConvertParameters;
@@ -13,14 +13,14 @@ const ConvertToPdfxSettings = ({
   parameters,
   onParameterChange,
   selectedFiles: _selectedFiles,
-  disabled: _disabled = false
+  disabled: _disabled = false,
 }: ConvertToPdfxSettingsProps) => {
   // Automatically set PDF/X-3 format when this component is rendered
   useEffect(() => {
-    if (parameters.pdfxOptions.outputFormat !== 'pdfx-3') {
-      onParameterChange('pdfxOptions', {
+    if (parameters.pdfxOptions.outputFormat !== "pdfx-3") {
+      onParameterChange("pdfxOptions", {
         ...parameters.pdfxOptions,
-        outputFormat: 'pdfx-3'
+        outputFormat: "pdfx-3",
       });
     }
   }, [parameters.pdfxOptions.outputFormat, onParameterChange]);
diff --git a/frontend/src/core/components/tools/convert/GroupedFormatDropdown.tsx b/frontend/src/core/components/tools/convert/GroupedFormatDropdown.tsx
index e4b9a040a3..2a9dde0610 100644
--- a/frontend/src/core/components/tools/convert/GroupedFormatDropdown.tsx
+++ b/frontend/src/core/components/tools/convert/GroupedFormatDropdown.tsx
@@ -1,5 +1,15 @@
 import { useState, useMemo } from "react";
-import { Stack, Text, Group, Button, Box, Popover, UnstyledButton, useMantineTheme, useMantineColorScheme } from "@mantine/core";
+import {
+  Stack,
+  Text,
+  Group,
+  Button,
+  Box,
+  Popover,
+  UnstyledButton,
+  useMantineTheme,
+  useMantineColorScheme,
+} from "@mantine/core";
 import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
 import CloudOutlinedIcon from "@mui/icons-material/CloudOutlined";
 import { Z_INDEX_AUTOMATE_DROPDOWN } from "@app/styles/zIndex";
@@ -33,7 +43,7 @@ const GroupedFormatDropdown = ({
   minWidth = "18.75rem",
   name,
   withinPortal = true,
-  zIndex = Z_INDEX_AUTOMATE_DROPDOWN
+  zIndex = Z_INDEX_AUTOMATE_DROPDOWN,
 }: GroupedFormatDropdownProps) => {
   const [dropdownOpened, setDropdownOpened] = useState(false);
   const theme = useMantineTheme();
@@ -42,7 +52,7 @@ const GroupedFormatDropdown = ({
   const groupedOptions = useMemo(() => {
     const groups: Record<string, FormatOption[]> = {};
 
-    options.forEach(option => {
+    options.forEach((option) => {
       if (!groups[option.group]) {
         groups[option.group] = [];
       }
@@ -54,7 +64,7 @@ const GroupedFormatDropdown = ({
 
   const selectedLabel = useMemo(() => {
     if (!value) return placeholder;
-    const selected = options.find(opt => opt.value === value);
+    const selected = options.find((opt) => opt.value === value);
     return selected ? `${selected.group} (${selected.label})` : value.toUpperCase();
   }, [value, options, placeholder]);
 
@@ -83,31 +93,31 @@ const GroupedFormatDropdown = ({
           onClick={() => setDropdownOpened(!dropdownOpened)}
           disabled={disabled}
           style={{
-            padding: '0.5rem 0.75rem',
+            padding: "0.5rem 0.75rem",
             border: `0.0625rem solid ${theme.colors.gray[4]}`,
             borderRadius: theme.radius.sm,
-            backgroundColor: disabled
-              ? theme.colors.gray[1]
-              : colorScheme === 'dark'
-                ? theme.colors.dark[6]
-                : theme.white,
-            cursor: disabled ? 'not-allowed' : 'pointer',
-            width: '100%',
+            backgroundColor: disabled ? theme.colors.gray[1] : colorScheme === "dark" ? theme.colors.dark[6] : theme.white,
+            cursor: disabled ? "not-allowed" : "pointer",
+            width: "100%",
             color: disabled
-              ? colorScheme === 'dark' ? theme.colors.dark[1] : theme.colors.dark[7]
-              : colorScheme === 'dark' ? theme.colors.dark[0] : theme.colors.dark[9]
+              ? colorScheme === "dark"
+                ? theme.colors.dark[1]
+                : theme.colors.dark[7]
+              : colorScheme === "dark"
+                ? theme.colors.dark[0]
+                : theme.colors.dark[9],
           }}
         >
           <Group justify="space-between">
-            <Text size="sm" c={value ? undefined : 'dimmed'}>
+            <Text size="sm" c={value ? undefined : "dimmed"}>
               {selectedLabel}
             </Text>
             <KeyboardArrowDownIcon
               style={{
-                fontSize: '1rem',
-                transform: dropdownOpened ? 'rotate(180deg)' : 'rotate(0deg)',
-                transition: 'transform 0.2s ease',
-                color: colorScheme === 'dark' ? theme.colors.dark[2] : theme.colors.gray[6]
+                fontSize: "1rem",
+                transform: dropdownOpened ? "rotate(180deg)" : "rotate(0deg)",
+                transition: "transform 0.2s ease",
+                color: colorScheme === "dark" ? theme.colors.dark[2] : theme.colors.gray[6],
               }}
             />
           </Group>
@@ -115,26 +125,21 @@ const GroupedFormatDropdown = ({
       </Popover.Target>
       <Popover.Dropdown
         style={{
-          minWidth: Math.min(350, parseInt(minWidth.replace('rem', '')) * 16),
-          maxWidth: '90vw',
-          maxHeight: '40vh',
-          overflow: 'auto',
-          backgroundColor: colorScheme === 'dark' ? theme.colors.dark[7] : theme.white,
-          border: `0.0625rem solid ${colorScheme === 'dark' ? theme.colors.dark[4] : theme.colors.gray[4]}`,
+          minWidth: Math.min(350, parseInt(minWidth.replace("rem", "")) * 16),
+          maxWidth: "90vw",
+          maxHeight: "40vh",
+          overflow: "auto",
+          backgroundColor: colorScheme === "dark" ? theme.colors.dark[7] : theme.white,
+          border: `0.0625rem solid ${colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[4]}`,
         }}
       >
         <Stack gap="md">
           {Object.entries(groupedOptions).map(([groupName, groupOptions]) => (
             <Box key={groupName}>
-              <Text
-                size="sm"
-                fw={600}
-                c={colorScheme === 'dark' ? 'dark.2' : 'gray.6'}
-                mb="xs"
-              >
+              <Text size="sm" fw={600} c={colorScheme === "dark" ? "dark.2" : "gray.6"} mb="xs">
                 {groupName}
               </Text>
-              <Group gap="xs" style={{ flexWrap: 'wrap' }}>
+              <Group gap="xs" style={{ flexWrap: "wrap" }}>
                 {groupOptions.map((option) => (
                   <Button
                     key={option.value}
@@ -144,20 +149,20 @@ const GroupedFormatDropdown = ({
                     onClick={() => handleOptionSelect(option.value)}
                     disabled={option.enabled === false}
                     style={{
-                      fontSize: '0.75rem',
-                      height: '2rem',
-                      padding: '0 0.75rem',
+                      fontSize: "0.75rem",
+                      height: "2rem",
+                      padding: "0 0.75rem",
                       flexShrink: 0,
-                      position: 'relative'
+                      position: "relative",
                     }}
                   >
                     {option.label}
                     {option.usesCloud && (
                       <CloudOutlinedIcon
                         style={{
-                          fontSize: '0.625rem',
-                          marginLeft: '0.25rem',
-                          opacity: 0.7
+                          fontSize: "0.625rem",
+                          marginLeft: "0.25rem",
+                          opacity: 0.7,
                         }}
                       />
                     )}
diff --git a/frontend/src/core/components/tools/crop/CropAreaSelector.tsx b/frontend/src/core/components/tools/crop/CropAreaSelector.tsx
index 5139f99efe..ce48d592b9 100644
--- a/frontend/src/core/components/tools/crop/CropAreaSelector.tsx
+++ b/frontend/src/core/components/tools/crop/CropAreaSelector.tsx
@@ -1,14 +1,14 @@
-import React, { useRef, useState, useCallback, useEffect } from 'react';
-import { Box, useMantineTheme, MantineTheme } from '@mantine/core';
+import React, { useRef, useState, useCallback, useEffect } from "react";
+import { Box, useMantineTheme, MantineTheme } from "@mantine/core";
 import {
   PDFBounds,
   Rectangle,
   domToPDFCoordinates,
   pdfToDOMCoordinates,
   constrainDOMRectToThumbnail,
-  isPointInThumbnail
-} from '@app/utils/cropCoordinates';
-import { type ResizeHandle } from '@app/constants/cropConstants';
+  isPointInThumbnail,
+} from "@app/utils/cropCoordinates";
+import { type ResizeHandle } from "@app/constants/cropConstants";
 
 interface CropAreaSelectorProps {
   /** PDF bounds for coordinate conversion */
@@ -28,7 +28,7 @@ const CropAreaSelector: React.FC<CropAreaSelectorProps> = ({
   cropArea,
   onCropAreaChange,
   disabled = false,
-  children
+  children,
 }) => {
   const theme = useMantineTheme();
   const containerRef = useRef<HTMLDivElement>(null);
@@ -43,87 +43,95 @@ const CropAreaSelector: React.FC<CropAreaSelectorProps> = ({
   const domRect = pdfToDOMCoordinates(cropArea, pdfBounds);
 
   // Handle mouse down on overlay (start dragging or resizing)
-  const handleOverlayMouseDown = useCallback((e: React.MouseEvent) => {
-    if (disabled || !containerRef.current) return;
+  const handleOverlayMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      if (disabled || !containerRef.current) return;
 
-    e.preventDefault();
-    e.stopPropagation();
+      e.preventDefault();
+      e.stopPropagation();
 
-    const rect = containerRef.current.getBoundingClientRect();
-    const x = e.clientX - rect.left;
-    const y = e.clientY - rect.top;
+      const rect = containerRef.current.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
 
-    // Check if we're clicking on a resize handle first (higher priority)
-    const handle = getResizeHandle(x, y, domRect);
+      // Check if we're clicking on a resize handle first (higher priority)
+      const handle = getResizeHandle(x, y, domRect);
 
-    if (handle) {
-      setIsResizing(handle);
-      setInitialCropArea(cropArea);
-      setIsDragging(false); // Ensure we're not dragging when resizing
-    } else if (isPointInCropArea(x, y, domRect)) {
-      // Only allow dragging if we're not on a resize handle
-      setIsDragging(true);
-      setIsResizing(null); // Ensure we're not resizing when dragging
-      setDragStart({ x: x - domRect.x, y: y - domRect.y });
-    }
-  }, [disabled, cropArea, domRect]);
+      if (handle) {
+        setIsResizing(handle);
+        setInitialCropArea(cropArea);
+        setIsDragging(false); // Ensure we're not dragging when resizing
+      } else if (isPointInCropArea(x, y, domRect)) {
+        // Only allow dragging if we're not on a resize handle
+        setIsDragging(true);
+        setIsResizing(null); // Ensure we're not resizing when dragging
+        setDragStart({ x: x - domRect.x, y: y - domRect.y });
+      }
+    },
+    [disabled, cropArea, domRect],
+  );
 
   // Handle mouse down on container (start new selection)
-  const handleContainerMouseDown = useCallback((e: React.MouseEvent) => {
-    if (disabled || !containerRef.current) return;
+  const handleContainerMouseDown = useCallback(
+    (e: React.MouseEvent) => {
+      if (disabled || !containerRef.current) return;
 
-    const rect = containerRef.current.getBoundingClientRect();
-    const x = e.clientX - rect.left;
-    const y = e.clientY - rect.top;
+      const rect = containerRef.current.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
 
-    // Only start new selection if clicking within thumbnail area
-    if (!isPointInThumbnail(x, y, pdfBounds)) return;
+      // Only start new selection if clicking within thumbnail area
+      if (!isPointInThumbnail(x, y, pdfBounds)) return;
 
-    e.preventDefault();
-    e.stopPropagation();
+      e.preventDefault();
+      e.stopPropagation();
 
-    // Start new crop selection
-    const newDomRect: Rectangle = { x, y, width: 20, height: 20 };
-    const constrainedRect = constrainDOMRectToThumbnail(newDomRect, pdfBounds);
-    const newCropArea = domToPDFCoordinates(constrainedRect, pdfBounds);
+      // Start new crop selection
+      const newDomRect: Rectangle = { x, y, width: 20, height: 20 };
+      const constrainedRect = constrainDOMRectToThumbnail(newDomRect, pdfBounds);
+      const newCropArea = domToPDFCoordinates(constrainedRect, pdfBounds);
 
-    onCropAreaChange(newCropArea);
-    setIsResizing('se'); // Start resizing from the southeast corner
-    setInitialCropArea(newCropArea);
-  }, [disabled, pdfBounds, onCropAreaChange]);
+      onCropAreaChange(newCropArea);
+      setIsResizing("se"); // Start resizing from the southeast corner
+      setInitialCropArea(newCropArea);
+    },
+    [disabled, pdfBounds, onCropAreaChange],
+  );
 
   // Handle mouse move
-  const handleMouseMove = useCallback((e: MouseEvent) => {
-    if (disabled || !containerRef.current) return;
+  const handleMouseMove = useCallback(
+    (e: MouseEvent) => {
+      if (disabled || !containerRef.current) return;
 
-    const rect = containerRef.current.getBoundingClientRect();
-    const x = e.clientX - rect.left;
-    const y = e.clientY - rect.top;
+      const rect = containerRef.current.getBoundingClientRect();
+      const x = e.clientX - rect.left;
+      const y = e.clientY - rect.top;
 
-    if (isDragging) {
-      // Dragging the entire crop area
-      const newX = x - dragStart.x;
-      const newY = y - dragStart.y;
+      if (isDragging) {
+        // Dragging the entire crop area
+        const newX = x - dragStart.x;
+        const newY = y - dragStart.y;
 
-      const newDomRect: Rectangle = {
-        x: newX,
-        y: newY,
-        width: domRect.width,
-        height: domRect.height
-      };
+        const newDomRect: Rectangle = {
+          x: newX,
+          y: newY,
+          width: domRect.width,
+          height: domRect.height,
+        };
 
-      const constrainedRect = constrainDOMRectToThumbnail(newDomRect, pdfBounds);
-      const newCropArea = domToPDFCoordinates(constrainedRect, pdfBounds);
-      onCropAreaChange(newCropArea);
-
-    } else if (isResizing) {
-      // Resizing the crop area
-      const newDomRect = calculateResizedRect(isResizing, domRect, x, y);
-      const constrainedRect = constrainDOMRectToThumbnail(newDomRect, pdfBounds);
-      const newCropArea = domToPDFCoordinates(constrainedRect, pdfBounds);
-      onCropAreaChange(newCropArea);
-    }
-  }, [disabled, isDragging, isResizing, dragStart, domRect, initialCropArea, pdfBounds, onCropAreaChange]);
+        const constrainedRect = constrainDOMRectToThumbnail(newDomRect, pdfBounds);
+        const newCropArea = domToPDFCoordinates(constrainedRect, pdfBounds);
+        onCropAreaChange(newCropArea);
+      } else if (isResizing) {
+        // Resizing the crop area
+        const newDomRect = calculateResizedRect(isResizing, domRect, x, y);
+        const constrainedRect = constrainDOMRectToThumbnail(newDomRect, pdfBounds);
+        const newCropArea = domToPDFCoordinates(constrainedRect, pdfBounds);
+        onCropAreaChange(newCropArea);
+      }
+    },
+    [disabled, isDragging, isResizing, dragStart, domRect, initialCropArea, pdfBounds, onCropAreaChange],
+  );
 
   // Handle mouse up
   const handleMouseUp = useCallback(() => {
@@ -134,12 +142,12 @@ const CropAreaSelector: React.FC<CropAreaSelectorProps> = ({
   // Add global mouse event listeners
   useEffect(() => {
     if (isDragging || isResizing) {
-      document.addEventListener('mousemove', handleMouseMove);
-      document.addEventListener('mouseup', handleMouseUp);
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleMouseUp);
 
       return () => {
-        document.removeEventListener('mousemove', handleMouseMove);
-        document.removeEventListener('mouseup', handleMouseUp);
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleMouseUp);
       };
     }
   }, [isDragging, isResizing, handleMouseMove, handleMouseUp]);
@@ -148,11 +156,11 @@ const CropAreaSelector: React.FC<CropAreaSelectorProps> = ({
     <Box
       ref={containerRef}
       style={{
-        position: 'relative',
-        width: '100%',
-        height: '100%',
-        cursor: 'crosshair',
-        userSelect: 'none'
+        position: "relative",
+        width: "100%",
+        height: "100%",
+        cursor: "crosshair",
+        userSelect: "none",
       }}
       onMouseDown={handleContainerMouseDown}
     >
@@ -164,16 +172,16 @@ const CropAreaSelector: React.FC<CropAreaSelectorProps> = ({
         <Box
           ref={overlayRef}
           style={{
-            position: 'absolute',
+            position: "absolute",
             left: domRect.x,
             top: domRect.y,
             width: domRect.width,
             height: domRect.height,
             border: `2px solid ${theme.other.crop.overlayBorder}`,
             backgroundColor: theme.other.crop.overlayBackground,
-            cursor: 'move',
-            pointerEvents: 'auto',
-            transition: (isDragging || isResizing) ? undefined : 'all 1s ease-in-out'
+            cursor: "move",
+            pointerEvents: "auto",
+            transition: isDragging || isResizing ? undefined : "all 1s ease-in-out",
           }}
           onMouseDown={handleOverlayMouseDown}
         >
@@ -192,16 +200,16 @@ function getResizeHandle(x: number, y: number, domRect: Rectangle): ResizeHandle
   const tolerance = handleSize;
 
   // Corner handles (check these first, they have priority)
-  if (isNear(x, domRect.x, tolerance) && isNear(y, domRect.y, tolerance)) return 'nw';
-  if (isNear(x, domRect.x + domRect.width, tolerance) && isNear(y, domRect.y, tolerance)) return 'ne';
-  if (isNear(x, domRect.x, tolerance) && isNear(y, domRect.y + domRect.height, tolerance)) return 'sw';
-  if (isNear(x, domRect.x + domRect.width, tolerance) && isNear(y, domRect.y + domRect.height, tolerance)) return 'se';
+  if (isNear(x, domRect.x, tolerance) && isNear(y, domRect.y, tolerance)) return "nw";
+  if (isNear(x, domRect.x + domRect.width, tolerance) && isNear(y, domRect.y, tolerance)) return "ne";
+  if (isNear(x, domRect.x, tolerance) && isNear(y, domRect.y + domRect.height, tolerance)) return "sw";
+  if (isNear(x, domRect.x + domRect.width, tolerance) && isNear(y, domRect.y + domRect.height, tolerance)) return "se";
 
   // Edge handles (only if not in corner area)
-  if (isNear(x, domRect.x + domRect.width / 2, tolerance) && isNear(y, domRect.y, tolerance)) return 'n';
-  if (isNear(x, domRect.x + domRect.width, tolerance) && isNear(y, domRect.y + domRect.height / 2, tolerance)) return 'e';
-  if (isNear(x, domRect.x + domRect.width / 2, tolerance) && isNear(y, domRect.y + domRect.height, tolerance)) return 's';
-  if (isNear(x, domRect.x, tolerance) && isNear(y, domRect.y + domRect.height / 2, tolerance)) return 'w';
+  if (isNear(x, domRect.x + domRect.width / 2, tolerance) && isNear(y, domRect.y, tolerance)) return "n";
+  if (isNear(x, domRect.x + domRect.width, tolerance) && isNear(y, domRect.y + domRect.height / 2, tolerance)) return "e";
+  if (isNear(x, domRect.x + domRect.width / 2, tolerance) && isNear(y, domRect.y + domRect.height, tolerance)) return "s";
+  if (isNear(x, domRect.x, tolerance) && isNear(y, domRect.y + domRect.height / 2, tolerance)) return "w";
 
   return null;
 }
@@ -211,50 +219,44 @@ function isNear(a: number, b: number, tolerance: number): boolean {
 }
 
 function isPointInCropArea(x: number, y: number, domRect: Rectangle): boolean {
-  return x >= domRect.x && x <= domRect.x + domRect.width &&
-         y >= domRect.y && y <= domRect.y + domRect.height;
+  return x >= domRect.x && x <= domRect.x + domRect.width && y >= domRect.y && y <= domRect.y + domRect.height;
 }
 
-function calculateResizedRect(
-  handle: ResizeHandle,
-  currentRect: Rectangle,
-  mouseX: number,
-  mouseY: number,
-): Rectangle {
+function calculateResizedRect(handle: ResizeHandle, currentRect: Rectangle, mouseX: number, mouseY: number): Rectangle {
   let { x, y, width, height } = currentRect;
 
   switch (handle) {
-    case 'nw':
+    case "nw":
       width += x - mouseX;
       height += y - mouseY;
       x = mouseX;
       y = mouseY;
       break;
-    case 'ne':
+    case "ne":
       width = mouseX - x;
       height += y - mouseY;
       y = mouseY;
       break;
-    case 'sw':
+    case "sw":
       width += x - mouseX;
       height = mouseY - y;
       x = mouseX;
       break;
-    case 'se':
+    case "se":
       width = mouseX - x;
       height = mouseY - y;
       break;
-    case 'n':
+    case "n":
       height += y - mouseY;
       y = mouseY;
       break;
-    case 'e':
+    case "e":
       width = mouseX - x;
       break;
-    case 's':
+    case "s":
       height = mouseY - y;
       break;
-    case 'w':
+    case "w":
       width += x - mouseX;
       x = mouseX;
       break;
@@ -272,28 +274,28 @@ function renderResizeHandles(disabled: boolean, theme: MantineTheme) {
 
   const handleSize = 8;
   const handleStyle = {
-    position: 'absolute' as const,
+    position: "absolute" as const,
     width: handleSize,
     height: handleSize,
     backgroundColor: theme.other.crop.handleColor,
     border: `1px solid ${theme.other.crop.handleBorder}`,
-    borderRadius: '2px',
-    pointerEvents: 'auto' as const
+    borderRadius: "2px",
+    pointerEvents: "auto" as const,
   };
 
   return (
     <>
       {/* Corner handles */}
-      <Box style={{ ...handleStyle, left: -handleSize/2, top: -handleSize/2, cursor: 'nw-resize' }} />
-      <Box style={{ ...handleStyle, right: -handleSize/2, top: -handleSize/2, cursor: 'ne-resize' }} />
-      <Box style={{ ...handleStyle, left: -handleSize/2, bottom: -handleSize/2, cursor: 'sw-resize' }} />
-      <Box style={{ ...handleStyle, right: -handleSize/2, bottom: -handleSize/2, cursor: 'se-resize' }} />
+      <Box style={{ ...handleStyle, left: -handleSize / 2, top: -handleSize / 2, cursor: "nw-resize" }} />
+      <Box style={{ ...handleStyle, right: -handleSize / 2, top: -handleSize / 2, cursor: "ne-resize" }} />
+      <Box style={{ ...handleStyle, left: -handleSize / 2, bottom: -handleSize / 2, cursor: "sw-resize" }} />
+      <Box style={{ ...handleStyle, right: -handleSize / 2, bottom: -handleSize / 2, cursor: "se-resize" }} />
 
       {/* Edge handles */}
-      <Box style={{ ...handleStyle, left: '50%', marginLeft: -handleSize/2, top: -handleSize/2, cursor: 'n-resize' }} />
-      <Box style={{ ...handleStyle, right: -handleSize/2, top: '50%', marginTop: -handleSize/2, cursor: 'e-resize' }} />
-      <Box style={{ ...handleStyle, left: '50%', marginLeft: -handleSize/2, bottom: -handleSize/2, cursor: 's-resize' }} />
-      <Box style={{ ...handleStyle, left: -handleSize/2, top: '50%', marginTop: -handleSize/2, cursor: 'w-resize' }} />
+      <Box style={{ ...handleStyle, left: "50%", marginLeft: -handleSize / 2, top: -handleSize / 2, cursor: "n-resize" }} />
+      <Box style={{ ...handleStyle, right: -handleSize / 2, top: "50%", marginTop: -handleSize / 2, cursor: "e-resize" }} />
+      <Box style={{ ...handleStyle, left: "50%", marginLeft: -handleSize / 2, bottom: -handleSize / 2, cursor: "s-resize" }} />
+      <Box style={{ ...handleStyle, left: -handleSize / 2, top: "50%", marginTop: -handleSize / 2, cursor: "w-resize" }} />
     </>
   );
 }
diff --git a/frontend/src/core/components/tools/crop/CropAutomationSettings.tsx b/frontend/src/core/components/tools/crop/CropAutomationSettings.tsx
index dd668c6072..ba860a8586 100644
--- a/frontend/src/core/components/tools/crop/CropAutomationSettings.tsx
+++ b/frontend/src/core/components/tools/crop/CropAutomationSettings.tsx
@@ -19,11 +19,11 @@ interface CropAutomationSettingsProps {
 const CropAutomationSettings = ({ parameters, onParameterChange, disabled = false }: CropAutomationSettingsProps) => {
   // Handle coordinate changes
   const handleCoordinateChange = (field: keyof Rectangle, value: number | string) => {
-    const numValue = typeof value === 'string' ? parseFloat(value) : value;
+    const numValue = typeof value === "string" ? parseFloat(value) : value;
     if (isNaN(numValue)) return;
 
     const newCropArea = { ...parameters.cropArea, [field]: numValue };
-    onParameterChange('cropArea', newCropArea);
+    onParameterChange("cropArea", newCropArea);
   };
 
   return (
diff --git a/frontend/src/core/components/tools/crop/CropCoordinateInputs.tsx b/frontend/src/core/components/tools/crop/CropCoordinateInputs.tsx
index abed4fd47e..5b6f660a80 100644
--- a/frontend/src/core/components/tools/crop/CropCoordinateInputs.tsx
+++ b/frontend/src/core/components/tools/crop/CropCoordinateInputs.tsx
@@ -15,7 +15,7 @@ const CropCoordinateInputs = ({
   onCoordinateChange,
   disabled = false,
   pdfBounds,
-  showAutomationInfo = false
+  showAutomationInfo = false,
 }: CropCoordinateInputsProps) => {
   const { t } = useTranslation();
 
@@ -24,7 +24,10 @@ const CropCoordinateInputs = ({
       {showAutomationInfo && (
         <Alert color="blue" variant="light">
           <Text size="xs">
-            {t("crop.automation.info", "Enter crop coordinates in PDF points. Origin (0,0) is at bottom-left. These values will be applied to all PDFs processed in this automation.")}
+            {t(
+              "crop.automation.info",
+              "Enter crop coordinates in PDF points. Origin (0,0) is at bottom-left. These values will be applied to all PDFs processed in this automation.",
+            )}
           </Text>
         </Alert>
       )}
@@ -38,7 +41,7 @@ const CropCoordinateInputs = ({
           label={t("crop.coordinates.x.label", "X Position")}
           description={showAutomationInfo ? t("crop.coordinates.x.desc", "Left edge (points)") : undefined}
           value={Math.round(cropArea.x * 10) / 10}
-          onChange={(value) => onCoordinateChange('x', value)}
+          onChange={(value) => onCoordinateChange("x", value)}
           disabled={disabled}
           min={0}
           max={pdfBounds?.actualWidth}
@@ -50,7 +53,7 @@ const CropCoordinateInputs = ({
           label={t("crop.coordinates.y.label", "Y Position")}
           description={showAutomationInfo ? t("crop.coordinates.y.desc", "Bottom edge (points)") : undefined}
           value={Math.round(cropArea.y * 10) / 10}
-          onChange={(value) => onCoordinateChange('y', value)}
+          onChange={(value) => onCoordinateChange("y", value)}
           disabled={disabled}
           min={0}
           max={pdfBounds?.actualHeight}
@@ -65,7 +68,7 @@ const CropCoordinateInputs = ({
           label={t("crop.coordinates.width.label", "Width")}
           description={showAutomationInfo ? t("crop.coordinates.width.desc", "Crop width (points)") : undefined}
           value={Math.round(cropArea.width * 10) / 10}
-          onChange={(value) => onCoordinateChange('width', value)}
+          onChange={(value) => onCoordinateChange("width", value)}
           disabled={disabled}
           min={0.1}
           max={pdfBounds?.actualWidth}
@@ -77,7 +80,7 @@ const CropCoordinateInputs = ({
           label={t("crop.coordinates.height.label", "Height")}
           description={showAutomationInfo ? t("crop.coordinates.height.desc", "Crop height (points)") : undefined}
           value={Math.round(cropArea.height * 10) / 10}
-          onChange={(value) => onCoordinateChange('height', value)}
+          onChange={(value) => onCoordinateChange("height", value)}
           disabled={disabled}
           min={0.1}
           max={pdfBounds?.actualHeight}
@@ -90,7 +93,10 @@ const CropCoordinateInputs = ({
       {showAutomationInfo && (
         <Alert color="gray" variant="light">
           <Text size="xs">
-            {t("crop.automation.reference", "Reference: A4 page is 595.28 × 841.89 points (210mm × 297mm). 1 inch = 72 points.")}
+            {t(
+              "crop.automation.reference",
+              "Reference: A4 page is 595.28 × 841.89 points (210mm × 297mm). 1 inch = 72 points.",
+            )}
           </Text>
         </Alert>
       )}
diff --git a/frontend/src/core/components/tools/crop/CropSettings.tsx b/frontend/src/core/components/tools/crop/CropSettings.tsx
index 441186e033..c461cf3688 100644
--- a/frontend/src/core/components/tools/crop/CropSettings.tsx
+++ b/frontend/src/core/components/tools/crop/CropSettings.tsx
@@ -8,11 +8,7 @@ import CropAreaSelector from "@app/components/tools/crop/CropAreaSelector";
 import CropCoordinateInputs from "@app/components/tools/crop/CropCoordinateInputs";
 import { DEFAULT_CROP_AREA } from "@app/constants/cropConstants";
 import { PAGE_SIZES } from "@app/constants/pageSizeConstants";
-import {
-  calculatePDFBounds,
-  PDFBounds,
-  Rectangle
-} from "@app/utils/cropCoordinates";
+import { calculatePDFBounds, PDFBounds, Rectangle } from "@app/utils/cropCoordinates";
 import { pdfWorkerManager } from "@app/services/pdfWorkerManager";
 import DocumentThumbnail from "@app/components/shared/filePreview/DocumentThumbnail";
 
@@ -59,7 +55,7 @@ const CropSettings = ({ parameters, disabled = false }: CropSettingsProps) => {
         const pdf = await pdfWorkerManager.createDocument(arrayBuffer, {
           disableAutoFetch: true,
           disableStream: true,
-          stopAtErrors: false
+          stopAtErrors: false,
         });
 
         const firstPage = await pdf.getPage(1);
@@ -79,12 +75,15 @@ const CropSettings = ({ parameters, disabled = false }: CropSettingsProps) => {
         // Cleanup PDF
         pdfWorkerManager.destroyDocument(pdf);
       } catch (error) {
-        console.error('Failed to load PDF dimensions:', error);
+        console.error("Failed to load PDF dimensions:", error);
         // Fallback to A4 dimensions if PDF loading fails
         const bounds = calculatePDFBounds(PAGE_SIZES.A4.width, PAGE_SIZES.A4.height, CONTAINER_SIZE, CONTAINER_SIZE);
         setPdfBounds(bounds);
 
-        if (parameters.parameters.cropArea.width === PAGE_SIZES.A4.width && parameters.parameters.cropArea.height === PAGE_SIZES.A4.height) {
+        if (
+          parameters.parameters.cropArea.width === PAGE_SIZES.A4.width &&
+          parameters.parameters.cropArea.height === PAGE_SIZES.A4.height
+        ) {
           parameters.resetToFullPDF(bounds);
         }
       }
@@ -102,14 +101,13 @@ const CropSettings = ({ parameters, disabled = false }: CropSettingsProps) => {
       }
     };
 
-    window.addEventListener('tour:setCropArea', handleSetCropArea);
-    return () => window.removeEventListener('tour:setCropArea', handleSetCropArea);
+    window.addEventListener("tour:setCropArea", handleSetCropArea);
+    return () => window.removeEventListener("tour:setCropArea", handleSetCropArea);
   }, [parameters, pdfBounds]);
 
   // Current crop area
   const cropArea = parameters.getCropArea();
 
-
   // Handle crop area changes from the selector
   const handleCropAreaChange = (newCropArea: Rectangle) => {
     if (pdfBounds) {
@@ -119,7 +117,7 @@ const CropSettings = ({ parameters, disabled = false }: CropSettingsProps) => {
 
   // Handle manual coordinate input changes
   const handleCoordinateChange = (field: keyof Rectangle, value: number | string) => {
-    const numValue = typeof value === 'string' ? parseFloat(value) : value;
+    const numValue = typeof value === "string" ? parseFloat(value) : value;
     if (isNaN(numValue)) return;
 
     const newCropArea = { ...cropArea, [field]: numValue };
@@ -135,13 +133,10 @@ const CropSettings = ({ parameters, disabled = false }: CropSettingsProps) => {
     }
   };
 
-
   if (!selectedStub || !pdfBounds) {
     return (
-      <Center style={{ height: '200px' }}>
-        <Text color="dimmed">
-          {t("crop.noFileSelected", "Select a PDF file to begin cropping")}
-        </Text>
+      <Center style={{ height: "200px" }}>
+        <Text color="dimmed">{t("crop.noFileSelected", "Select a PDF file to begin cropping")}</Text>
       </Center>
     );
   }
@@ -155,7 +150,7 @@ const CropSettings = ({ parameters, disabled = false }: CropSettingsProps) => {
       <Checkbox
         label={t("crop.autoCrop", "Auto-crop whitespace")}
         checked={parameters.parameters.autoCrop}
-        onChange={(e) => parameters.updateParameter('autoCrop', e.currentTarget.checked)}
+        onChange={(e) => parameters.updateParameter("autoCrop", e.currentTarget.checked)}
         disabled={disabled}
       />
 
@@ -173,7 +168,7 @@ const CropSettings = ({ parameters, disabled = false }: CropSettingsProps) => {
               title={t("crop.reset", "Reset to full PDF")}
               aria-label={t("crop.reset", "Reset to full PDF")}
             >
-              <RestartAltIcon style={{ fontSize: '1rem' }} />
+              <RestartAltIcon style={{ fontSize: "1rem" }} />
             </ActionIcon>
           </Group>
 
@@ -182,11 +177,11 @@ const CropSettings = ({ parameters, disabled = false }: CropSettingsProps) => {
               style={{
                 width: CONTAINER_SIZE,
                 height: CONTAINER_SIZE,
-                border: '1px solid var(--mantine-color-gray-3)',
-                borderRadius: '8px',
-                backgroundColor: 'var(--mantine-color-gray-0)',
-                overflow: 'hidden',
-                position: 'relative'
+                border: "1px solid var(--mantine-color-gray-3)",
+                borderRadius: "8px",
+                backgroundColor: "var(--mantine-color-gray-0)",
+                overflow: "hidden",
+                position: "relative",
               }}
             >
               <CropAreaSelector
@@ -201,15 +196,14 @@ const CropSettings = ({ parameters, disabled = false }: CropSettingsProps) => {
                   style={{
                     width: pdfBounds.thumbnailWidth,
                     height: pdfBounds.thumbnailHeight,
-                    position: 'absolute',
+                    position: "absolute",
                     left: pdfBounds.offsetX,
-                    top: pdfBounds.offsetY
+                    top: pdfBounds.offsetY,
                   }}
                 />
               </CropAreaSelector>
             </Box>
           </Center>
-
         </Stack>
       )}
 
@@ -227,9 +221,7 @@ const CropSettings = ({ parameters, disabled = false }: CropSettingsProps) => {
       {/* Validation Alert - Only show when autoCrop is false */}
       {!parameters.parameters.autoCrop && !isCropValid && (
         <Alert color="red" variant="light">
-          <Text size="xs">
-            {t("crop.error.invalidArea", "Crop area extends beyond PDF boundaries")}
-          </Text>
+          <Text size="xs">{t("crop.error.invalidArea", "Crop area extends beyond PDF boundaries")}</Text>
         </Alert>
       )}
     </Stack>
diff --git a/frontend/src/core/components/tools/editTableOfContents/BookmarkEditor.tsx b/frontend/src/core/components/tools/editTableOfContents/BookmarkEditor.tsx
index 2d01cbb8a0..7ebbccc9b2 100644
--- a/frontend/src/core/components/tools/editTableOfContents/BookmarkEditor.tsx
+++ b/frontend/src/core/components/tools/editTableOfContents/BookmarkEditor.tsx
@@ -1,20 +1,8 @@
-import { Fragment, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  ActionIcon,
-  Badge,
-  Button,
-  Flex,
-  Group,
-  NumberInput,
-  Paper,
-  Stack,
-  Text,
-  TextInput,
-  Tooltip,
-} from '@mantine/core';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { BookmarkNode, createBookmarkNode } from '@app/utils/editTableOfContents';
+import { Fragment, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ActionIcon, Badge, Button, Flex, Group, NumberInput, Paper, Stack, Text, TextInput, Tooltip } from "@mantine/core";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { BookmarkNode, createBookmarkNode } from "@app/utils/editTableOfContents";
 
 interface BookmarkEditorProps {
   bookmarks: BookmarkNode[];
@@ -27,7 +15,7 @@ const updateTree = (
   targetId: string,
   updater: (bookmark: BookmarkNode) => BookmarkNode,
 ): BookmarkNode[] => {
-  return nodes.map(node => {
+  return nodes.map((node) => {
     if (node.id === targetId) {
       return updater(node);
     }
@@ -47,8 +35,8 @@ const updateTree = (
 
 const removeFromTree = (nodes: BookmarkNode[], targetId: string): BookmarkNode[] => {
   return nodes
-    .filter(node => node.id !== targetId)
-    .map(node => ({
+    .filter((node) => node.id !== targetId)
+    .map((node) => ({
       ...node,
       children: removeFromTree(node.children, targetId),
     }));
@@ -60,7 +48,7 @@ const addChildToTree = (
   child: BookmarkNode,
 ): { nodes: BookmarkNode[]; added: boolean } => {
   let added = false;
-  const next = nodes.map(node => {
+  const next = nodes.map((node) => {
     if (node.id === parentId) {
       added = true;
       return { ...node, expanded: true, children: [...node.children, child] };
@@ -90,7 +78,7 @@ const addSiblingInTree = (
   let added = false;
   const result: BookmarkNode[] = [];
 
-  nodes.forEach(node => {
+  nodes.forEach((node) => {
     let currentNode = node;
 
     if (!added && node.children.length > 0) {
@@ -116,58 +104,60 @@ export default function BookmarkEditor({ bookmarks, onChange, disabled }: Bookma
   const { t } = useTranslation();
 
   const [editingId, setEditingId] = useState<string | null>(null);
-  const [currentTitleInput, setCurrentTitleInput] = useState<string>('');
+  const [currentTitleInput, setCurrentTitleInput] = useState<string>("");
 
   const getLatestTree = () => {
     if (editingId) {
-      return updateTree(bookmarks, editingId, bookmark => ({ ...bookmark, title: currentTitleInput }));
+      return updateTree(bookmarks, editingId, (bookmark) => ({ ...bookmark, title: currentTitleInput }));
     }
     return bookmarks;
   };
 
   const handleAddTopLevel = () => {
-    const newBookmark = createBookmarkNode({ title: t('editTableOfContents.editor.defaultTitle', 'New bookmark') });
+    const newBookmark = createBookmarkNode({ title: t("editTableOfContents.editor.defaultTitle", "New bookmark") });
     onChange([...getLatestTree(), newBookmark]);
   };
 
   const handleTitleChange = (id: string, value: string) => {
-    onChange(updateTree(bookmarks, id, bookmark => ({ ...bookmark, title: value })));
+    onChange(updateTree(bookmarks, id, (bookmark) => ({ ...bookmark, title: value })));
   };
 
   const handlePageChange = (id: string, value: number | string) => {
-    const page = typeof value === 'number' ? value : parseInt(value, 10);
-    onChange(updateTree(getLatestTree(), id, bookmark => ({ ...bookmark, pageNumber: Number.isFinite(page) && page > 0 ? page : 1 })));
+    const page = typeof value === "number" ? value : parseInt(value, 10);
+    onChange(
+      updateTree(getLatestTree(), id, (bookmark) => ({
+        ...bookmark,
+        pageNumber: Number.isFinite(page) && page > 0 ? page : 1,
+      })),
+    );
   };
 
   const handleToggle = (id: string) => {
-    onChange(updateTree(getLatestTree(), id, bookmark => ({ ...bookmark, expanded: !bookmark.expanded })));
+    onChange(updateTree(getLatestTree(), id, (bookmark) => ({ ...bookmark, expanded: !bookmark.expanded })));
   };
 
   const handleRemove = (id: string) => {
-    const confirmation = t(
-      'editTableOfContents.editor.confirmRemove',
-      'Remove this bookmark and all of its children?'
-    );
+    const confirmation = t("editTableOfContents.editor.confirmRemove", "Remove this bookmark and all of its children?");
     if (window.confirm(confirmation)) {
       onChange(removeFromTree(getLatestTree(), id));
     }
   };
 
   const handleAddChild = (parentId: string) => {
-    const child = createBookmarkNode({ title: t('editTableOfContents.editor.defaultChildTitle', 'Child bookmark') });
+    const child = createBookmarkNode({ title: t("editTableOfContents.editor.defaultChildTitle", "Child bookmark") });
     const { nodes, added } = addChildToTree(getLatestTree(), parentId, child);
     onChange(added ? nodes : [...getLatestTree(), child]);
   };
 
   const handleAddSibling = (targetId: string) => {
-    const sibling = createBookmarkNode({ title: t('editTableOfContents.editor.defaultSiblingTitle', 'New bookmark') });
+    const sibling = createBookmarkNode({ title: t("editTableOfContents.editor.defaultSiblingTitle", "New bookmark") });
     const { nodes, added } = addSiblingInTree(getLatestTree(), targetId, sibling);
     onChange(added ? nodes : [...getLatestTree(), sibling]);
   };
 
   const renderBookmark = (bookmark: BookmarkNode, level = 0) => {
     const hasChildren = bookmark.children.length > 0;
-    const chevronIcon = bookmark.expanded ? 'expand-more-rounded' : 'chevron-right-rounded';
+    const chevronIcon = bookmark.expanded ? "expand-more-rounded" : "chevron-right-rounded";
 
     return (
       <Paper
@@ -176,8 +166,8 @@ export default function BookmarkEditor({ bookmarks, onChange, disabled }: Bookma
         withBorder
         p="md"
         style={{
-          borderColor: 'var(--border-default)',
-          background: level === 0 ? 'var(--bg-surface)' : 'var(--bg-muted)',
+          borderColor: "var(--border-default)",
+          background: level === 0 ? "var(--bg-surface)" : "var(--bg-muted)",
         }}
       >
         <Stack gap="sm">
@@ -191,59 +181,59 @@ export default function BookmarkEditor({ bookmarks, onChange, disabled }: Bookma
                   if (hasChildren) handleToggle(bookmark.id);
                 }}
                 disabled={disabled || !hasChildren}
-                aria-label={t('editTableOfContents.editor.actions.toggle', 'Toggle children')}
+                aria-label={t("editTableOfContents.editor.actions.toggle", "Toggle children")}
                 style={{ marginTop: 4 }}
               >
                 <LocalIcon icon={chevronIcon} />
               </ActionIcon>
               <Stack gap={2}>
                 <Group gap="xs" align="center">
-                  <Text fw={600}>{bookmark.title || t('editTableOfContents.editor.untitled', 'Untitled bookmark')}</Text>
+                  <Text fw={600}>{bookmark.title || t("editTableOfContents.editor.untitled", "Untitled bookmark")}</Text>
                   {level > 0 && (
                     <Badge size="xs" variant="light" color="blue">
-                      {t('editTableOfContents.editor.childBadge', 'Child')}
+                      {t("editTableOfContents.editor.childBadge", "Child")}
                     </Badge>
                   )}
                 </Group>
                 <Text size="sm" c="dimmed">
-                  {t('editTableOfContents.editor.pagePreview', { page: bookmark.pageNumber })}
+                  {t("editTableOfContents.editor.pagePreview", { page: bookmark.pageNumber })}
                 </Text>
               </Stack>
             </Group>
             <Group gap="xs">
-              <Tooltip label={t('editTableOfContents.editor.actions.addChild', 'Add child bookmark')}>
+              <Tooltip label={t("editTableOfContents.editor.actions.addChild", "Add child bookmark")}>
                 <ActionIcon
                   variant="subtle"
                   color="green"
                   onMouseDown={(e) => {
-                    e.preventDefault()
-                    handleAddChild(bookmark.id)
+                    e.preventDefault();
+                    handleAddChild(bookmark.id);
                   }}
                   disabled={disabled}
                 >
                   <LocalIcon icon="subdirectory-arrow-right-rounded" />
                 </ActionIcon>
               </Tooltip>
-              <Tooltip label={t('editTableOfContents.editor.actions.addSibling', 'Add sibling bookmark')}>
+              <Tooltip label={t("editTableOfContents.editor.actions.addSibling", "Add sibling bookmark")}>
                 <ActionIcon
                   variant="subtle"
                   color="blue"
                   onMouseDown={(e) => {
-                    e.preventDefault()
-                    handleAddSibling(bookmark.id)
+                    e.preventDefault();
+                    handleAddSibling(bookmark.id);
                   }}
                   disabled={disabled}
                 >
                   <LocalIcon icon="add-rounded" />
                 </ActionIcon>
               </Tooltip>
-              <Tooltip label={t('editTableOfContents.editor.actions.remove', 'Remove bookmark')}>
+              <Tooltip label={t("editTableOfContents.editor.actions.remove", "Remove bookmark")}>
                 <ActionIcon
                   variant="subtle"
                   color="red"
                   onMouseDown={(e) => {
-                    e.preventDefault()
-                    handleRemove(bookmark.id)
+                    e.preventDefault();
+                    handleRemove(bookmark.id);
                   }}
                   disabled={disabled}
                 >
@@ -257,7 +247,7 @@ export default function BookmarkEditor({ bookmarks, onChange, disabled }: Bookma
             <Stack gap="sm">
               <TextInput
                 size="sm"
-                label={t('editTableOfContents.editor.field.title', 'Bookmark title')}
+                label={t("editTableOfContents.editor.field.title", "Bookmark title")}
                 value={editingId === bookmark.id ? currentTitleInput : bookmark.title}
                 onFocus={() => {
                   setEditingId(bookmark.id);
@@ -269,24 +259,24 @@ export default function BookmarkEditor({ bookmarks, onChange, disabled }: Bookma
                   }
                   setEditingId(null);
                 }}
-                onChange={event => setCurrentTitleInput(event.currentTarget.value)}
+                onChange={(event) => setCurrentTitleInput(event.currentTarget.value)}
                 disabled={disabled}
               />
               <NumberInput
                 size="sm"
-                label={t('editTableOfContents.editor.field.page', 'Target page number')}
+                label={t("editTableOfContents.editor.field.page", "Target page number")}
                 min={1}
                 clampBehavior="strict"
                 value={bookmark.pageNumber}
-                onChange={value => handlePageChange(bookmark.id, value ?? 1)}
+                onChange={(value) => handlePageChange(bookmark.id, value ?? 1)}
                 disabled={disabled}
               />
             </Stack>
           )}
 
           {bookmark.expanded && hasChildren && (
-            <Stack gap="sm" pl="lg" style={{ borderLeft: '1px solid var(--border-default)' }}>
-              {bookmark.children.map(child => (
+            <Stack gap="sm" pl="lg" style={{ borderLeft: "1px solid var(--border-default)" }}>
+              {bookmark.children.map((child) => (
                 <Fragment key={child.id}>{renderBookmark(child, level + 1)}</Fragment>
               ))}
             </Stack>
@@ -300,9 +290,9 @@ export default function BookmarkEditor({ bookmarks, onChange, disabled }: Bookma
     <Stack gap="md">
       <Group justify="space-between" align="flex-start">
         <div>
-          <Text fw={600}>{t('editTableOfContents.editor.heading', 'Bookmark editor')}</Text>
+          <Text fw={600}>{t("editTableOfContents.editor.heading", "Bookmark editor")}</Text>
           <Text size="sm" c="dimmed">
-            {t('editTableOfContents.editor.description', 'Add, nest, and reorder bookmarks to craft your PDF outline.')}
+            {t("editTableOfContents.editor.description", "Add, nest, and reorder bookmarks to craft your PDF outline.")}
           </Text>
         </div>
         <Button
@@ -315,17 +305,20 @@ export default function BookmarkEditor({ bookmarks, onChange, disabled }: Bookma
           }}
           disabled={disabled}
         >
-          {t('editTableOfContents.editor.addTopLevel', 'Add top-level bookmark')}
+          {t("editTableOfContents.editor.addTopLevel", "Add top-level bookmark")}
         </Button>
       </Group>
 
       {bookmarks.length === 0 ? (
         <Paper withBorder radius="md" ta="center" py="xl">
           <Stack gap="xs" align="center" px="lg">
-            <LocalIcon icon="bookmark-add-rounded" style={{ fontSize: '2.25rem' }} />
-            <Text fw={600}>{t('editTableOfContents.editor.empty.title', 'No bookmarks yet')}</Text>
+            <LocalIcon icon="bookmark-add-rounded" style={{ fontSize: "2.25rem" }} />
+            <Text fw={600}>{t("editTableOfContents.editor.empty.title", "No bookmarks yet")}</Text>
             <Text size="sm" c="dimmed" maw={420}>
-              {t('editTableOfContents.editor.empty.description', 'Import existing bookmarks or start by adding your first entry.')}
+              {t(
+                "editTableOfContents.editor.empty.description",
+                "Import existing bookmarks or start by adding your first entry.",
+              )}
             </Text>
             <Button
               variant="subtle"
@@ -337,14 +330,12 @@ export default function BookmarkEditor({ bookmarks, onChange, disabled }: Bookma
               }}
               disabled={disabled}
             >
-              {t('editTableOfContents.editor.empty.action', 'Add first bookmark')}
+              {t("editTableOfContents.editor.empty.action", "Add first bookmark")}
             </Button>
           </Stack>
         </Paper>
       ) : (
-        <Stack gap="sm">
-          {bookmarks.map(bookmark => renderBookmark(bookmark))}
-        </Stack>
+        <Stack gap="sm">{bookmarks.map((bookmark) => renderBookmark(bookmark))}</Stack>
       )}
     </Stack>
   );
diff --git a/frontend/src/core/components/tools/editTableOfContents/EditTableOfContentsSettings.tsx b/frontend/src/core/components/tools/editTableOfContents/EditTableOfContentsSettings.tsx
index aa644acfd2..261fa27282 100644
--- a/frontend/src/core/components/tools/editTableOfContents/EditTableOfContentsSettings.tsx
+++ b/frontend/src/core/components/tools/editTableOfContents/EditTableOfContentsSettings.tsx
@@ -1,17 +1,8 @@
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  Alert,
-  Button,
-  Divider,
-  FileButton,
-  Stack,
-  Switch,
-  Text,
-  Tooltip,
-} from '@mantine/core';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { BookmarkNode } from '@app/utils/editTableOfContents';
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { Alert, Button, Divider, FileButton, Stack, Switch, Text, Tooltip } from "@mantine/core";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { BookmarkNode } from "@app/utils/editTableOfContents";
 
 interface EditTableOfContentsSettingsProps {
   bookmarks: BookmarkNode[];
@@ -50,36 +41,41 @@ export default function EditTableOfContentsSettings({
 }: EditTableOfContentsSettingsProps) {
   const { t } = useTranslation();
 
-  const infoLines = useMemo(() => ([
-    t('editTableOfContents.info.line1', 'Each bookmark needs a descriptive title and the page it should open.'),
-    t('editTableOfContents.info.line2', 'Use child bookmarks to build a hierarchy for chapters, sections, or subsections.'),
-    t('editTableOfContents.info.line3', 'Import bookmarks from the selected PDF or from a JSON file to save time.'),
-  ]), [t]);
+  const infoLines = useMemo(
+    () => [
+      t("editTableOfContents.info.line1", "Each bookmark needs a descriptive title and the page it should open."),
+      t("editTableOfContents.info.line2", "Use child bookmarks to build a hierarchy for chapters, sections, or subsections."),
+      t("editTableOfContents.info.line3", "Import bookmarks from the selected PDF or from a JSON file to save time."),
+    ],
+    [t],
+  );
 
   return (
     <Stack gap="md">
       <Stack gap="xs">
-        <Text size="sm" fw={500}>{t('editTableOfContents.actions.source', 'Load bookmarks')}</Text>
+        <Text size="sm" fw={500}>
+          {t("editTableOfContents.actions.source", "Load bookmarks")}
+        </Text>
         <Text size="xs" c="dimmed">
           {selectedFileName
-            ? t('editTableOfContents.actions.selectedFile', { file: selectedFileName })
-            : t('editTableOfContents.actions.noFile', 'Select a PDF to extract existing bookmarks.')}
+            ? t("editTableOfContents.actions.selectedFile", { file: selectedFileName })
+            : t("editTableOfContents.actions.noFile", "Select a PDF to extract existing bookmarks.")}
         </Text>
       </Stack>
 
       <Stack gap="sm">
-        <Button
-          variant="light"
-          leftSection={<LocalIcon icon="folder-rounded" />}
-          onClick={onSelectFiles}
-          fullWidth
-        >
+        <Button variant="light" leftSection={<LocalIcon icon="folder-rounded" />} onClick={onSelectFiles} fullWidth>
           {selectedFileName
-            ? t('editTableOfContents.workbench.changeFile', 'Change PDF')
-            : t('editTableOfContents.workbench.selectFile', 'Select PDF')}
+            ? t("editTableOfContents.workbench.changeFile", "Change PDF")
+            : t("editTableOfContents.workbench.selectFile", "Select PDF")}
         </Button>
 
-        <Tooltip label={!selectedFileName ? t('editTableOfContents.actions.noFile', 'Select a PDF to extract existing bookmarks.') : ''} disabled={Boolean(selectedFileName)}>
+        <Tooltip
+          label={
+            !selectedFileName ? t("editTableOfContents.actions.noFile", "Select a PDF to extract existing bookmarks.") : ""
+          }
+          disabled={Boolean(selectedFileName)}
+        >
           <Button
             variant="default"
             leftSection={<LocalIcon icon="picture-as-pdf-rounded" />}
@@ -88,15 +84,11 @@ export default function EditTableOfContentsSettings({
             disabled={disabled || !selectedFileName}
             fullWidth
           >
-            {t('editTableOfContents.actions.loadFromPdf', 'Load from PDF')}
+            {t("editTableOfContents.actions.loadFromPdf", "Load from PDF")}
           </Button>
         </Tooltip>
 
-        <FileButton
-          onChange={file => file && onImportJson(file)}
-          accept="application/json"
-          disabled={disabled}
-        >
+        <FileButton onChange={(file) => file && onImportJson(file)} accept="application/json" disabled={disabled}>
           {(props) => (
             <Button
               {...props}
@@ -105,13 +97,17 @@ export default function EditTableOfContentsSettings({
               disabled={disabled}
               fullWidth
             >
-              {t('editTableOfContents.actions.importJson', 'Import JSON')}
+              {t("editTableOfContents.actions.importJson", "Import JSON")}
             </Button>
           )}
         </FileButton>
 
         <Tooltip
-          label={canReadClipboard ? '' : t('editTableOfContents.actions.clipboardUnavailable', 'Clipboard access is not available in this browser.')}
+          label={
+            canReadClipboard
+              ? ""
+              : t("editTableOfContents.actions.clipboardUnavailable", "Clipboard access is not available in this browser.")
+          }
           disabled={canReadClipboard}
         >
           <Button
@@ -121,7 +117,7 @@ export default function EditTableOfContentsSettings({
             disabled={disabled || !canReadClipboard}
             fullWidth
           >
-            {t('editTableOfContents.actions.importClipboard', 'Paste from clipboard')}
+            {t("editTableOfContents.actions.importClipboard", "Paste from clipboard")}
           </Button>
         </Tooltip>
       </Stack>
@@ -135,7 +131,9 @@ export default function EditTableOfContentsSettings({
       <Divider />
 
       <Stack gap="xs">
-        <Text size="sm" fw={500}>{t('editTableOfContents.actions.export', 'Export bookmarks')}</Text>
+        <Text size="sm" fw={500}>
+          {t("editTableOfContents.actions.export", "Export bookmarks")}
+        </Text>
       </Stack>
 
       <Stack gap="sm">
@@ -146,11 +144,15 @@ export default function EditTableOfContentsSettings({
           disabled={disabled || bookmarks.length === 0}
           fullWidth
         >
-          {t('editTableOfContents.actions.exportJson', 'Download JSON')}
+          {t("editTableOfContents.actions.exportJson", "Download JSON")}
         </Button>
 
         <Tooltip
-          label={canWriteClipboard ? '' : t('editTableOfContents.actions.clipboardUnavailable', 'Clipboard access is not available in this browser.')}
+          label={
+            canWriteClipboard
+              ? ""
+              : t("editTableOfContents.actions.clipboardUnavailable", "Clipboard access is not available in this browser.")
+          }
           disabled={canWriteClipboard}
         >
           <Button
@@ -160,7 +162,7 @@ export default function EditTableOfContentsSettings({
             disabled={disabled || bookmarks.length === 0 || !canWriteClipboard}
             fullWidth
           >
-            {t('editTableOfContents.actions.exportClipboard', 'Copy to clipboard')}
+            {t("editTableOfContents.actions.exportClipboard", "Copy to clipboard")}
           </Button>
         </Tooltip>
       </Stack>
@@ -170,8 +172,11 @@ export default function EditTableOfContentsSettings({
       <Switch
         checked={replaceExisting}
         onChange={(event) => onReplaceExistingChange(event.currentTarget.checked)}
-        label={t('editTableOfContents.settings.replaceExisting', 'Replace existing bookmarks')}
-        description={t('editTableOfContents.settings.replaceExistingHint', 'When disabled, the new outline is appended after the current bookmarks.')}
+        label={t("editTableOfContents.settings.replaceExisting", "Replace existing bookmarks")}
+        description={t(
+          "editTableOfContents.settings.replaceExistingHint",
+          "When disabled, the new outline is appended after the current bookmarks.",
+        )}
         disabled={disabled}
       />
 
diff --git a/frontend/src/core/components/tools/editTableOfContents/EditTableOfContentsWorkbenchView.tsx b/frontend/src/core/components/tools/editTableOfContents/EditTableOfContentsWorkbenchView.tsx
index 3cbc3979c2..54d080782b 100644
--- a/frontend/src/core/components/tools/editTableOfContents/EditTableOfContentsWorkbenchView.tsx
+++ b/frontend/src/core/components/tools/editTableOfContents/EditTableOfContentsWorkbenchView.tsx
@@ -1,21 +1,13 @@
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  Box,
-  Button,
-  Card,
-  Divider,
-  Group,
-  Stack,
-  Text,
-} from '@mantine/core';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { BookmarkNode } from '@app/utils/editTableOfContents';
-import ErrorNotification from '@app/components/tools/shared/ErrorNotification';
-import ResultsPreview from '@app/components/tools/shared/ResultsPreview';
-import BookmarkEditor from '@app/components/tools/editTableOfContents/BookmarkEditor';
-import { useFileActionTerminology } from '@app/hooks/useFileActionTerminology';
-import { downloadFromUrl } from '@app/services/downloadService';
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { Box, Button, Card, Divider, Group, Stack, Text } from "@mantine/core";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { BookmarkNode } from "@app/utils/editTableOfContents";
+import ErrorNotification from "@app/components/tools/shared/ErrorNotification";
+import ResultsPreview from "@app/components/tools/shared/ResultsPreview";
+import BookmarkEditor from "@app/components/tools/editTableOfContents/BookmarkEditor";
+import { useFileActionTerminology } from "@app/hooks/useFileActionTerminology";
+import { downloadFromUrl } from "@app/services/downloadService";
 
 export interface EditTableOfContentsWorkbenchViewData {
   bookmarks: BookmarkNode[];
@@ -51,7 +43,7 @@ const EditTableOfContentsWorkbenchView = ({ data }: EditTableOfContentsWorkbench
         file,
         thumbnail: thumbnails[index],
       })),
-    [files, thumbnails]
+    [files, thumbnails],
   );
 
   if (!data) {
@@ -59,9 +51,12 @@ const EditTableOfContentsWorkbenchView = ({ data }: EditTableOfContentsWorkbench
       <Box p="xl">
         <Card withBorder radius="md">
           <Stack gap="sm">
-            <Text fw={600}>{t('editTableOfContents.workbench.empty.title', 'Open the tool to start editing')}</Text>
+            <Text fw={600}>{t("editTableOfContents.workbench.empty.title", "Open the tool to start editing")}</Text>
             <Text size="sm" c="dimmed">
-              {t('editTableOfContents.workbench.empty.description', 'Select the Edit Table of Contents tool to load its workspace.')}
+              {t(
+                "editTableOfContents.workbench.empty.description",
+                "Select the Edit Table of Contents tool to load its workspace.",
+              )}
             </Text>
           </Stack>
         </Card>
@@ -86,27 +81,28 @@ const EditTableOfContentsWorkbenchView = ({ data }: EditTableOfContentsWorkbench
     onFileClick,
   } = data;
 
-  const showResults = Boolean(
-    previewFiles.length > 0 || downloadUrl || errorMessage
-  );
+  const showResults = Boolean(previewFiles.length > 0 || downloadUrl || errorMessage);
 
   return (
     <Box
       p="lg"
       style={{
-        width: '100%',
-        height: '100%',
-        overflowY: 'auto',
-        background: 'var(--bg-raised)',
+        width: "100%",
+        height: "100%",
+        overflowY: "auto",
+        background: "var(--bg-raised)",
       }}
     >
       <Stack gap="xl" maw={1200} mx="auto">
         <Stack gap={4}>
           <Text size="xl" fw={700}>
-            {t('home.editTableOfContents.title', 'Edit Table of Contents')}
+            {t("home.editTableOfContents.title", "Edit Table of Contents")}
           </Text>
           <Text size="sm" c="dimmed">
-            {t('editTableOfContents.workbench.subtitle', 'Import bookmarks, build hierarchies, and apply the outline without cramped side panels.')}
+            {t(
+              "editTableOfContents.workbench.subtitle",
+              "Import bookmarks, build hierarchies, and apply the outline without cramped side panels.",
+            )}
           </Text>
         </Stack>
 
@@ -115,18 +111,21 @@ const EditTableOfContentsWorkbenchView = ({ data }: EditTableOfContentsWorkbench
           radius="md"
           p="xl"
           style={{
-            backgroundColor: 'var(--bg-surface)',
-            borderColor: 'var(--border-default)',
-            boxShadow: 'var(--shadow-md)',
+            backgroundColor: "var(--bg-surface)",
+            borderColor: "var(--border-default)",
+            boxShadow: "var(--shadow-md)",
           }}
         >
           <Stack gap="md">
             <Stack gap={2}>
-              <Text fw={600}>{t('editTableOfContents.editor.heading', 'Bookmark editor')}</Text>
+              <Text fw={600}>{t("editTableOfContents.editor.heading", "Bookmark editor")}</Text>
               <Text size="sm" c="dimmed">
                 {selectedFileName
-                  ? t('editTableOfContents.actions.selectedFile', { file: selectedFileName })
-                  : t('editTableOfContents.workbench.filePrompt', 'Select a PDF from your library or upload a new one to begin.')}
+                  ? t("editTableOfContents.actions.selectedFile", { file: selectedFileName })
+                  : t(
+                      "editTableOfContents.workbench.filePrompt",
+                      "Select a PDF from your library or upload a new one to begin.",
+                    )}
               </Text>
             </Stack>
             <BookmarkEditor bookmarks={bookmarks} onChange={onBookmarksChange} disabled={disabled} />
@@ -139,7 +138,7 @@ const EditTableOfContentsWorkbenchView = ({ data }: EditTableOfContentsWorkbench
                 disabled={isExecuteDisabled}
                 loading={isExecuting}
               >
-                {t('editTableOfContents.submit', 'Apply table of contents')}
+                {t("editTableOfContents.submit", "Apply table of contents")}
               </Button>
             </Group>
           </Stack>
@@ -151,16 +150,16 @@ const EditTableOfContentsWorkbenchView = ({ data }: EditTableOfContentsWorkbench
             radius="md"
             p="xl"
             style={{
-              backgroundColor: 'var(--bg-surface)',
-              borderColor: 'var(--border-default)',
-              boxShadow: 'var(--shadow-md)',
+              backgroundColor: "var(--bg-surface)",
+              borderColor: "var(--border-default)",
+              boxShadow: "var(--shadow-md)",
             }}
           >
             <Stack gap="md">
               <Stack gap={4}>
-                <Text fw={600}>{t('editTableOfContents.results.title', 'Updated PDF with bookmarks')}</Text>
+                <Text fw={600}>{t("editTableOfContents.results.title", "Updated PDF with bookmarks")}</Text>
                 <Text size="sm" c="dimmed">
-                  {t('editTableOfContents.results.subtitle', 'Download the processed file or undo the operation below.')}
+                  {t("editTableOfContents.results.subtitle", "Download the processed file or undo the operation below.")}
                 </Text>
               </Stack>
 
@@ -177,7 +176,7 @@ const EditTableOfContentsWorkbenchView = ({ data }: EditTableOfContentsWorkbench
               <Group justify="flex-end" gap="sm">
                 {downloadUrl && (
                   <Button
-                    leftSection={<LocalIcon icon='download-rounded' />}
+                    leftSection={<LocalIcon icon="download-rounded" />}
                     onClick={() => downloadFromUrl(downloadUrl, downloadFilename ?? "download")}
                   >
                     {terminology.download}
@@ -189,7 +188,7 @@ const EditTableOfContentsWorkbenchView = ({ data }: EditTableOfContentsWorkbench
                   onClick={onUndo}
                   disabled={isExecuting}
                 >
-                  {t('undo', 'Undo')}
+                  {t("undo", "Undo")}
                 </Button>
               </Group>
             </Stack>
diff --git a/frontend/src/core/components/tools/extractImages/ExtractImagesSettings.tsx b/frontend/src/core/components/tools/extractImages/ExtractImagesSettings.tsx
index 9a6b347222..2ecede95ef 100644
--- a/frontend/src/core/components/tools/extractImages/ExtractImagesSettings.tsx
+++ b/frontend/src/core/components/tools/extractImages/ExtractImagesSettings.tsx
@@ -1,6 +1,6 @@
-import { useTranslation } from 'react-i18next';
-import { Stack, Select } from '@mantine/core';
-import { ExtractImagesParameters } from '@app/hooks/tools/extractImages/useExtractImagesParameters';
+import { useTranslation } from "react-i18next";
+import { Stack, Select } from "@mantine/core";
+import { ExtractImagesParameters } from "@app/hooks/tools/extractImages/useExtractImagesParameters";
 import { Z_INDEX_AUTOMATE_DROPDOWN } from "@app/styles/zIndex";
 
 interface ExtractImagesSettingsProps {
@@ -9,27 +9,23 @@ interface ExtractImagesSettingsProps {
   disabled?: boolean;
 }
 
-const ExtractImagesSettings = ({
-  parameters,
-  onParameterChange,
-  disabled = false
-}: ExtractImagesSettingsProps) => {
+const ExtractImagesSettings = ({ parameters, onParameterChange, disabled = false }: ExtractImagesSettingsProps) => {
   const { t } = useTranslation();
 
   return (
     <Stack gap="md">
       <Select
-        label={t('extractImages.selectText', 'Output Format')}
+        label={t("extractImages.selectText", "Output Format")}
         value={parameters.format}
         onChange={(value) => {
-          const allowedFormats = ['png', 'jpg', 'gif'] as const;
-          const format = allowedFormats.includes(value as any) ? (value as typeof allowedFormats[number]) : 'png';
-          onParameterChange('format', format);
+          const allowedFormats = ["png", "jpg", "gif"] as const;
+          const format = allowedFormats.includes(value as any) ? (value as (typeof allowedFormats)[number]) : "png";
+          onParameterChange("format", format);
         }}
         data={[
-          { value: 'png', label: 'PNG' },
-          { value: 'jpg', label: 'JPG' },
-          { value: 'gif', label: 'GIF' },
+          { value: "png", label: "PNG" },
+          { value: "jpg", label: "JPG" },
+          { value: "gif", label: "GIF" },
         ]}
         disabled={disabled}
         comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
@@ -45,4 +41,4 @@ const ExtractImagesSettings = ({
   );
 };
 
-export default ExtractImagesSettings;
\ No newline at end of file
+export default ExtractImagesSettings;
diff --git a/frontend/src/core/components/tools/extractPages/ExtractPagesSettings.tsx b/frontend/src/core/components/tools/extractPages/ExtractPagesSettings.tsx
index 4489458dbd..31a6266124 100644
--- a/frontend/src/core/components/tools/extractPages/ExtractPagesSettings.tsx
+++ b/frontend/src/core/components/tools/extractPages/ExtractPagesSettings.tsx
@@ -13,24 +13,22 @@ const ExtractPagesSettings = ({ parameters, onParameterChange, disabled = false
   const { t } = useTranslation();
 
   const handleChange = (value: string) => {
-    onParameterChange('pageNumbers', value);
+    onParameterChange("pageNumbers", value);
   };
 
   return (
     <Stack gap="md">
       <TextInput
-        label={t('extractPages.pageNumbers.label', 'Pages to Extract')}
-        value={parameters.pageNumbers || ''}
+        label={t("extractPages.pageNumbers.label", "Pages to Extract")}
+        value={parameters.pageNumbers || ""}
         onChange={(event) => handleChange(event.currentTarget.value)}
-        placeholder={t('extractPages.pageNumbers.placeholder', 'e.g., 1,3,5-8 or odd & 1-10')}
+        placeholder={t("extractPages.pageNumbers.placeholder", "e.g., 1,3,5-8 or odd & 1-10")}
         disabled={disabled}
         required
       />
-      <PageSelectionSyntaxHint input={parameters.pageNumbers || ''} variant="compact" />
+      <PageSelectionSyntaxHint input={parameters.pageNumbers || ""} variant="compact" />
     </Stack>
   );
 };
 
 export default ExtractPagesSettings;
-
-
diff --git a/frontend/src/core/components/tools/flatten/FlattenSettings.tsx b/frontend/src/core/components/tools/flatten/FlattenSettings.tsx
index b8e97f8ef5..40323cfbb4 100644
--- a/frontend/src/core/components/tools/flatten/FlattenSettings.tsx
+++ b/frontend/src/core/components/tools/flatten/FlattenSettings.tsx
@@ -16,13 +16,16 @@ const FlattenSettings = ({ parameters, onParameterChange, disabled = false }: Fl
       <Stack gap="sm">
         <Checkbox
           checked={parameters.flattenOnlyForms}
-          onChange={(event) => onParameterChange('flattenOnlyForms', event.currentTarget.checked)}
+          onChange={(event) => onParameterChange("flattenOnlyForms", event.currentTarget.checked)}
           disabled={disabled}
           label={
             <div>
-              <Text size="sm">{t('flatten.options.flattenOnlyForms.label', 'Flatten only forms')}</Text>
+              <Text size="sm">{t("flatten.options.flattenOnlyForms.label", "Flatten only forms")}</Text>
               <Text size="xs" c="dimmed">
-                {t('flatten.options.flattenOnlyForms.desc', 'Only flatten form fields, leaving other interactive elements intact')}
+                {t(
+                  "flatten.options.flattenOnlyForms.desc",
+                  "Only flatten form fields, leaving other interactive elements intact",
+                )}
               </Text>
             </div>
           }
@@ -31,11 +34,14 @@ const FlattenSettings = ({ parameters, onParameterChange, disabled = false }: Fl
 
       {!parameters.flattenOnlyForms && (
         <NumberInput
-          label={t('flatten.renderDpi.label', 'Rendering DPI')}
-          description={t('flatten.renderDpi.help', 'Leave blank to use the system default. Higher DPI sharpens output but increases processing time and file size.')}
-          placeholder={t('flatten.renderDpi.placeholder', 'e.g. 150')}
+          label={t("flatten.renderDpi.label", "Rendering DPI")}
+          description={t(
+            "flatten.renderDpi.help",
+            "Leave blank to use the system default. Higher DPI sharpens output but increases processing time and file size.",
+          )}
+          placeholder={t("flatten.renderDpi.placeholder", "e.g. 150")}
           value={parameters.renderDpi ?? undefined}
-          onChange={(value) => onParameterChange('renderDpi', value != null && value !== '' ? Number(value) : undefined)}
+          onChange={(value) => onParameterChange("renderDpi", value != null && value !== "" ? Number(value) : undefined)}
           disabled={disabled}
           min={72}
           max={2400}
@@ -46,4 +52,4 @@ const FlattenSettings = ({ parameters, onParameterChange, disabled = false }: Fl
   );
 };
 
-export default FlattenSettings;
\ No newline at end of file
+export default FlattenSettings;
diff --git a/frontend/src/core/components/tools/fullscreen/CompactToolItem.tsx b/frontend/src/core/components/tools/fullscreen/CompactToolItem.tsx
index d52fac33b7..7cba1801f8 100644
--- a/frontend/src/core/components/tools/fullscreen/CompactToolItem.tsx
+++ b/frontend/src/core/components/tools/fullscreen/CompactToolItem.tsx
@@ -1,11 +1,17 @@
-import React from 'react';
-import { Text, Badge } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { Tooltip } from '@app/components/shared/Tooltip';
-import HotkeyDisplay from '@app/components/hotkeys/HotkeyDisplay';
-import FavoriteStar from '@app/components/tools/toolPicker/FavoriteStar';
-import { ToolRegistryEntry, getSubcategoryColor } from '@app/data/toolsTaxonomy';
-import { getIconBackground, getIconStyle, getItemClasses, useToolMeta, getDisabledLabel } from '@app/components/tools/fullscreen/shared';
+import React from "react";
+import { Text, Badge } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { Tooltip } from "@app/components/shared/Tooltip";
+import HotkeyDisplay from "@app/components/hotkeys/HotkeyDisplay";
+import FavoriteStar from "@app/components/tools/toolPicker/FavoriteStar";
+import { ToolRegistryEntry, getSubcategoryColor } from "@app/data/toolsTaxonomy";
+import {
+  getIconBackground,
+  getIconStyle,
+  getItemClasses,
+  useToolMeta,
+  getDisabledLabel,
+} from "@app/components/tools/fullscreen/shared";
 
 interface CompactToolItemProps {
   id: string;
@@ -20,7 +26,7 @@ const CompactToolItem: React.FC<CompactToolItemProps> = ({ id, tool, isSelected,
   const { binding, isFav, toggleFavorite, disabled, disabledReason } = useToolMeta(id, tool);
   const categoryColor = getSubcategoryColor(tool.subcategoryId);
   const iconBg = getIconBackground(categoryColor, false);
-  const iconClasses = 'tool-panel__fullscreen-list-icon';
+  const iconClasses = "tool-panel__fullscreen-list-icon";
 
   let iconNode: React.ReactNode;
   if (React.isValidElement<{ style?: React.CSSProperties }>(tool.icon)) {
@@ -28,7 +34,7 @@ const CompactToolItem: React.FC<CompactToolItemProps> = ({ id, tool, isSelected,
     iconNode = React.cloneElement(element, {
       style: {
         ...(element.props.style || {}),
-        fontSize: '1.5rem',
+        fontSize: "1.5rem",
       },
     });
   } else {
@@ -38,7 +44,7 @@ const CompactToolItem: React.FC<CompactToolItemProps> = ({ id, tool, isSelected,
   const compactButton = (
     <button
       type="button"
-      className={`tool-panel__fullscreen-list-item ${getItemClasses(false)} ${isSelected ? 'tool-panel__fullscreen-list-item--selected' : ''} ${!disabled ? 'tool-panel__fullscreen-list-item--with-star' : ''}`}
+      className={`tool-panel__fullscreen-list-item ${getItemClasses(false)} ${isSelected ? "tool-panel__fullscreen-list-item--selected" : ""} ${!disabled ? "tool-panel__fullscreen-list-item--with-star" : ""}`}
       onClick={onClick}
       aria-disabled={disabled}
       disabled={disabled}
@@ -57,28 +63,20 @@ const CompactToolItem: React.FC<CompactToolItemProps> = ({ id, tool, isSelected,
         </span>
       ) : null}
       <span className="tool-panel__fullscreen-list-body">
-        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+        <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
           <Text fw={600} size="sm" className="tool-panel__fullscreen-name">
             {tool.name}
           </Text>
-          {tool.versionStatus === 'alpha' && (
-            <Badge
-              size="xs"
-              variant="light"
-              color="orange"
-            >
-              {t('toolPanel.alpha', 'Alpha')}
+          {tool.versionStatus === "alpha" && (
+            <Badge size="xs" variant="light" color="orange">
+              {t("toolPanel.alpha", "Alpha")}
             </Badge>
           )}
         </div>
       </span>
       {!disabled && (
         <div className="tool-panel__fullscreen-star-compact">
-          <FavoriteStar
-            isFavorite={isFav}
-            onToggle={toggleFavorite}
-            size="xs"
-          />
+          <FavoriteStar isFavorite={isFav} onToggle={toggleFavorite} size="xs" />
         </div>
       )}
     </button>
@@ -87,36 +85,29 @@ const CompactToolItem: React.FC<CompactToolItemProps> = ({ id, tool, isSelected,
   const { key: disabledKey, fallback: disabledFallback } = getDisabledLabel(disabledReason);
   const disabledMessage = t(disabledKey, disabledFallback);
 
-  const tooltipContent = disabled
-    ? (
-      <span><strong>{disabledMessage}</strong> {tool.description}</span>
-    )
-    : (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.35rem' }}>
-        <span>{tool.description}</span>
-        {binding && (
-          <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '0.75rem' }}>
-            <span style={{ color: 'var(--mantine-color-dimmed)', fontWeight: 500 }}>
-              {t('settings.hotkeys.shortcut', 'Shortcut')}
-            </span>
-            <HotkeyDisplay binding={binding} />
-          </div>
-        )}
-      </div>
-    );
+  const tooltipContent = disabled ? (
+    <span>
+      <strong>{disabledMessage}</strong> {tool.description}
+    </span>
+  ) : (
+    <div style={{ display: "flex", flexDirection: "column", gap: "0.35rem" }}>
+      <span>{tool.description}</span>
+      {binding && (
+        <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", fontSize: "0.75rem" }}>
+          <span style={{ color: "var(--mantine-color-dimmed)", fontWeight: 500 }}>
+            {t("settings.hotkeys.shortcut", "Shortcut")}
+          </span>
+          <HotkeyDisplay binding={binding} />
+        </div>
+      )}
+    </div>
+  );
 
   return (
-    <Tooltip
-      content={tooltipContent}
-      position="top"
-      portalTarget={tooltipPortalTarget}
-      arrow
-      delay={80}
-    >
+    <Tooltip content={tooltipContent} position="top" portalTarget={tooltipPortalTarget} arrow delay={80}>
       {compactButton}
     </Tooltip>
   );
 };
 
 export default CompactToolItem;
-
diff --git a/frontend/src/core/components/tools/fullscreen/DetailedToolItem.tsx b/frontend/src/core/components/tools/fullscreen/DetailedToolItem.tsx
index 1ff93fbdf8..78e1ec1718 100644
--- a/frontend/src/core/components/tools/fullscreen/DetailedToolItem.tsx
+++ b/frontend/src/core/components/tools/fullscreen/DetailedToolItem.tsx
@@ -1,10 +1,16 @@
-import React from 'react';
-import { Text, Badge } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import HotkeyDisplay from '@app/components/hotkeys/HotkeyDisplay';
-import FavoriteStar from '@app/components/tools/toolPicker/FavoriteStar';
-import { ToolRegistryEntry, getSubcategoryColor } from '@app/data/toolsTaxonomy';
-import { getIconBackground, getIconStyle, getItemClasses, useToolMeta, getDisabledLabel } from '@app/components/tools/fullscreen/shared';
+import React from "react";
+import { Text, Badge } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import HotkeyDisplay from "@app/components/hotkeys/HotkeyDisplay";
+import FavoriteStar from "@app/components/tools/toolPicker/FavoriteStar";
+import { ToolRegistryEntry, getSubcategoryColor } from "@app/data/toolsTaxonomy";
+import {
+  getIconBackground,
+  getIconStyle,
+  getItemClasses,
+  useToolMeta,
+  getDisabledLabel,
+} from "@app/components/tools/fullscreen/shared";
 
 interface DetailedToolItemProps {
   id: string;
@@ -19,7 +25,7 @@ const DetailedToolItem: React.FC<DetailedToolItemProps> = ({ id, tool, isSelecte
 
   const categoryColor = getSubcategoryColor(tool.subcategoryId);
   const iconBg = getIconBackground(categoryColor, true);
-  const iconClasses = 'tool-panel__fullscreen-icon';
+  const iconClasses = "tool-panel__fullscreen-icon";
 
   let iconNode: React.ReactNode;
   if (React.isValidElement<{ style?: React.CSSProperties }>(tool.icon)) {
@@ -27,7 +33,7 @@ const DetailedToolItem: React.FC<DetailedToolItemProps> = ({ id, tool, isSelecte
     iconNode = React.cloneElement(element, {
       style: {
         ...(element.props.style || {}),
-        fontSize: '1.75rem',
+        fontSize: "1.75rem",
       },
     });
   } else {
@@ -40,7 +46,7 @@ const DetailedToolItem: React.FC<DetailedToolItemProps> = ({ id, tool, isSelecte
   return (
     <button
       type="button"
-      className={`tool-panel__fullscreen-item ${getItemClasses(true)} ${isSelected ? 'tool-panel__fullscreen-item--selected' : ''} tool-panel__fullscreen-item--with-star`}
+      className={`tool-panel__fullscreen-item ${getItemClasses(true)} ${isSelected ? "tool-panel__fullscreen-item--selected" : ""} tool-panel__fullscreen-item--with-star`}
       onClick={onClick}
       aria-disabled={disabled}
       disabled={disabled}
@@ -59,18 +65,14 @@ const DetailedToolItem: React.FC<DetailedToolItemProps> = ({ id, tool, isSelecte
         </span>
       ) : null}
       <span className="tool-panel__fullscreen-body">
-        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+        <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
           <Text fw={600} size="sm" className="tool-panel__fullscreen-name">
             {tool.name}
           </Text>
-          {tool.versionStatus === 'alpha' && (
-            <Badge
-              size="xs"
-              variant="light"
-              color="orange"
-            >
+          {tool.versionStatus === "alpha" && (
+            <Badge size="xs" variant="light" color="orange">
               {/* we can add more translations for different badges in future, like beta, etc. */}
-            {t('toolPanel.alpha', 'Alpha')}
+              {t("toolPanel.alpha", "Alpha")}
             </Badge>
           )}
         </div>
@@ -80,12 +82,14 @@ const DetailedToolItem: React.FC<DetailedToolItemProps> = ({ id, tool, isSelecte
               <strong>{disabledMessage} </strong>
               {tool.description}
             </>
-          ) : tool.description}
+          ) : (
+            tool.description
+          )}
         </Text>
         {binding && (
           <div className="tool-panel__fullscreen-shortcut">
-            <span style={{ color: 'var(--mantine-color-dimmed)', fontSize: '0.75rem' }}>
-              {t('settings.hotkeys.shortcut', 'Shortcut')}
+            <span style={{ color: "var(--mantine-color-dimmed)", fontSize: "0.75rem" }}>
+              {t("settings.hotkeys.shortcut", "Shortcut")}
             </span>
             <HotkeyDisplay binding={binding} size="sm" />
           </div>
@@ -93,11 +97,7 @@ const DetailedToolItem: React.FC<DetailedToolItemProps> = ({ id, tool, isSelecte
       </span>
       {!disabled && (
         <div className="tool-panel__fullscreen-star">
-          <FavoriteStar
-            isFavorite={isFav}
-            onToggle={toggleFavorite}
-            size="sm"
-          />
+          <FavoriteStar isFavorite={isFav} onToggle={toggleFavorite} size="sm" />
         </div>
       )}
     </button>
@@ -105,4 +105,3 @@ const DetailedToolItem: React.FC<DetailedToolItemProps> = ({ id, tool, isSelecte
 };
 
 export default DetailedToolItem;
-
diff --git a/frontend/src/core/components/tools/fullscreen/shared.ts b/frontend/src/core/components/tools/fullscreen/shared.ts
index 7de37c3e41..79d333a486 100644
--- a/frontend/src/core/components/tools/fullscreen/shared.ts
+++ b/frontend/src/core/components/tools/fullscreen/shared.ts
@@ -1,18 +1,18 @@
-import { useHotkeys } from '@app/contexts/HotkeyContext';
-import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
-import { ToolRegistryEntry } from '@app/data/toolsTaxonomy';
-import { ToolId } from '@app/types/toolId';
-import type { ToolAvailabilityMap } from '@app/hooks/useToolManagement';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
+import { useHotkeys } from "@app/contexts/HotkeyContext";
+import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
+import { ToolRegistryEntry } from "@app/data/toolsTaxonomy";
+import { ToolId } from "@app/types/toolId";
+import type { ToolAvailabilityMap } from "@app/hooks/useToolManagement";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
 
 export const getItemClasses = (isDetailed: boolean): string => {
-  return isDetailed ? 'tool-panel__fullscreen-item--detailed' : '';
+  return isDetailed ? "tool-panel__fullscreen-item--detailed" : "";
 };
 
 export const getIconBackground = (categoryColor: string, isDetailed: boolean): string => {
-  const baseColor = isDetailed ? 'var(--fullscreen-bg-icon-detailed)' : 'var(--fullscreen-bg-icon-compact)';
-  const blend1 = isDetailed ? '18%' : '15%';
-  const blend2 = isDetailed ? '8%' : '6%';
+  const baseColor = isDetailed ? "var(--fullscreen-bg-icon-detailed)" : "var(--fullscreen-bg-icon-compact)";
+  const blend1 = isDetailed ? "18%" : "15%";
+  const blend2 = isDetailed ? "8%" : "6%";
 
   return `linear-gradient(135deg,
     color-mix(in srgb, ${categoryColor} ${blend1}, ${baseColor}),
@@ -24,70 +24,75 @@ export const getIconStyle = (): Record<string, string> => {
   return {};
 };
 
-export type ToolDisabledReason = 'comingSoon' | 'disabledByAdmin' | 'missingDependency' | 'unknownUnavailable' | 'requiresPremium' | 'selfHostedOffline' | null;
+export type ToolDisabledReason =
+  | "comingSoon"
+  | "disabledByAdmin"
+  | "missingDependency"
+  | "unknownUnavailable"
+  | "requiresPremium"
+  | "selfHostedOffline"
+  | null;
 
 export const getToolDisabledReason = (
   id: string,
   tool: ToolRegistryEntry,
   toolAvailability?: ToolAvailabilityMap,
-  premiumEnabled?: boolean
+  premiumEnabled?: boolean,
 ): ToolDisabledReason => {
-  if (!tool.component && !tool.link && id !== 'read' && id !== 'multiTool') {
-    return 'comingSoon';
+  if (!tool.component && !tool.link && id !== "read" && id !== "multiTool") {
+    return "comingSoon";
   }
 
   // Check if tool requires premium but premium is not enabled
   if (tool.requiresPremium === true && premiumEnabled !== true) {
-    return 'requiresPremium';
+    return "requiresPremium";
   }
 
   const availabilityInfo = toolAvailability?.[id as ToolId];
   if (availabilityInfo && availabilityInfo.available === false) {
-    if (availabilityInfo.reason === 'selfHostedOffline') {
-      return 'selfHostedOffline';
+    if (availabilityInfo.reason === "selfHostedOffline") {
+      return "selfHostedOffline";
     }
-    if (availabilityInfo.reason === 'missingDependency') {
-      return 'missingDependency';
+    if (availabilityInfo.reason === "missingDependency") {
+      return "missingDependency";
     }
-    if (availabilityInfo.reason === 'disabledByAdmin') {
-      return 'disabledByAdmin';
+    if (availabilityInfo.reason === "disabledByAdmin") {
+      return "disabledByAdmin";
     }
-    return 'unknownUnavailable';
+    return "unknownUnavailable";
   }
 
   return null;
 };
 
-export const getDisabledLabel = (
-  disabledReason: ToolDisabledReason
-): { key: string; fallback: string } => {
-  if (disabledReason === 'requiresPremium') {
+export const getDisabledLabel = (disabledReason: ToolDisabledReason): { key: string; fallback: string } => {
+  if (disabledReason === "requiresPremium") {
     return {
-      key: 'toolPanel.premiumFeature',
-      fallback: 'Premium feature:'
+      key: "toolPanel.premiumFeature",
+      fallback: "Premium feature:",
     };
   }
-  if (disabledReason === 'selfHostedOffline') {
+  if (disabledReason === "selfHostedOffline") {
     return {
-      key: 'toolPanel.fullscreen.selfHostedOffline',
-      fallback: 'Requires your Stirling-PDF server (currently offline):'
+      key: "toolPanel.fullscreen.selfHostedOffline",
+      fallback: "Requires your Stirling-PDF server (currently offline):",
     };
   }
-  if (disabledReason === 'missingDependency') {
+  if (disabledReason === "missingDependency") {
     return {
-      key: 'toolPanel.fullscreen.unavailableDependency',
-      fallback: 'Unavailable - required tool missing on server:'
+      key: "toolPanel.fullscreen.unavailableDependency",
+      fallback: "Unavailable - required tool missing on server:",
     };
   }
-  if (disabledReason === 'disabledByAdmin' || disabledReason === 'unknownUnavailable') {
+  if (disabledReason === "disabledByAdmin" || disabledReason === "unknownUnavailable") {
     return {
-      key: 'toolPanel.fullscreen.unavailable',
-      fallback: 'Disabled by server administrator:'
+      key: "toolPanel.fullscreen.unavailable",
+      fallback: "Disabled by server administrator:",
     };
   }
   return {
-    key: 'toolPanel.fullscreen.comingSoon',
-    fallback: 'Coming soon:'
+    key: "toolPanel.fullscreen.comingSoon",
+    fallback: "Coming soon:",
   };
 };
 
@@ -110,5 +115,3 @@ export function useToolMeta(id: string, tool: ToolRegistryEntry) {
     disabledReason,
   };
 }
-
-
diff --git a/frontend/src/core/components/tools/getPdfInfo/GetPdfInfoReportView.tsx b/frontend/src/core/components/tools/getPdfInfo/GetPdfInfoReportView.tsx
index cda86d9987..a066325c32 100644
--- a/frontend/src/core/components/tools/getPdfInfo/GetPdfInfoReportView.tsx
+++ b/frontend/src/core/components/tools/getPdfInfo/GetPdfInfoReportView.tsx
@@ -1,25 +1,28 @@
-import React, { useEffect, useMemo, useRef } from 'react';
-import { Badge, Divider, Stack, Text } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import type {
-  PdfInfoReportData,
-  PdfInfoReportEntry,
-  PdfInfoBackendData,
-  ParsedPdfSections,
-} from '@app/types/getPdfInfo';
-import '@app/components/tools/validateSignature/reportView/styles.css';
-import SummarySection from '@app/components/tools/getPdfInfo/sections/SummarySection';
-import KeyValueSection from '@app/components/tools/getPdfInfo/sections/KeyValueSection';
-import TableOfContentsSection from '@app/components/tools/getPdfInfo/sections/TableOfContentsSection';
-import OtherSection from '@app/components/tools/getPdfInfo/sections/OtherSection';
-import PerPageSection from '@app/components/tools/getPdfInfo/sections/PerPageSection';
-import ComplianceSection from '@app/components/tools/getPdfInfo/sections/ComplianceSection';
-
+import React, { useEffect, useMemo, useRef } from "react";
+import { Badge, Divider, Stack, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import type { PdfInfoReportData, PdfInfoReportEntry, PdfInfoBackendData, ParsedPdfSections } from "@app/types/getPdfInfo";
+import "@app/components/tools/validateSignature/reportView/styles.css";
+import SummarySection from "@app/components/tools/getPdfInfo/sections/SummarySection";
+import KeyValueSection from "@app/components/tools/getPdfInfo/sections/KeyValueSection";
+import TableOfContentsSection from "@app/components/tools/getPdfInfo/sections/TableOfContentsSection";
+import OtherSection from "@app/components/tools/getPdfInfo/sections/OtherSection";
+import PerPageSection from "@app/components/tools/getPdfInfo/sections/PerPageSection";
+import ComplianceSection from "@app/components/tools/getPdfInfo/sections/ComplianceSection";
 
 /** Valid section anchor IDs for navigation */
 const VALID_ANCHORS = new Set([
-  'summary', 'metadata', 'formFields', 'basicInfo', 'documentInfo',
-  'compliance', 'encryption', 'permissions', 'toc', 'other', 'perPage',
+  "summary",
+  "metadata",
+  "formFields",
+  "basicInfo",
+  "documentInfo",
+  "compliance",
+  "encryption",
+  "permissions",
+  "toc",
+  "other",
+  "perPage",
 ]);
 
 interface GetPdfInfoReportViewProps {
@@ -43,14 +46,14 @@ const GetPdfInfoReportView: React.FC<GetPdfInfoReportViewProps> = ({ data }) =>
       const containerTop = container.getBoundingClientRect().top;
       const currentScroll = container.scrollTop;
       const targetScroll = currentScroll + (elementTop - containerTop) - bufferPx;
-      
-      container.scrollTo({ top: Math.max(0, targetScroll), behavior: 'smooth' });
-      
+
+      container.scrollTo({ top: Math.max(0, targetScroll), behavior: "smooth" });
+
       // Flash highlight the section
-      el.classList.remove('section-flash-highlight');
+      el.classList.remove("section-flash-highlight");
       void el.offsetWidth; // Force reflow
-      el.classList.add('section-flash-highlight');
-      setTimeout(() => el.classList.remove('section-flash-highlight'), 1500);
+      el.classList.add("section-flash-highlight");
+      setTimeout(() => el.classList.remove("section-flash-highlight"), 1500);
     }
   }, [data.scrollTo]);
 
@@ -58,15 +61,15 @@ const GetPdfInfoReportView: React.FC<GetPdfInfoReportViewProps> = ({ data }) =>
     const raw: PdfInfoBackendData = entry?.data ?? {};
     return {
       metadata: raw.Metadata ?? null,
-      formFields: raw.FormFields ?? raw['Form Fields'] ?? null,
-      basicInfo: raw.BasicInfo ?? raw['Basic Info'] ?? null,
-      documentInfo: raw.DocumentInfo ?? raw['Document Info'] ?? null,
+      formFields: raw.FormFields ?? raw["Form Fields"] ?? null,
+      basicInfo: raw.BasicInfo ?? raw["Basic Info"] ?? null,
+      documentInfo: raw.DocumentInfo ?? raw["Document Info"] ?? null,
       compliance: raw.Compliancy ?? raw.Compliance ?? null,
       encryption: raw.Encryption ?? null,
       permissions: raw.Permissions ?? null,
-      toc: raw['Bookmarks/Outline/TOC'] ?? raw['Table of Contents'] ?? null,
+      toc: raw["Bookmarks/Outline/TOC"] ?? raw["Table of Contents"] ?? null,
       other: raw.Other ?? null,
-      perPage: raw.PerPageInfo ?? raw['Per Page Info'] ?? null,
+      perPage: raw.PerPageInfo ?? raw["Per Page Info"] ?? null,
       summaryData: raw.SummaryData ?? null,
     };
   }, [entry]);
@@ -75,8 +78,12 @@ const GetPdfInfoReportView: React.FC<GetPdfInfoReportViewProps> = ({ data }) =>
     return (
       <div className="report-container">
         <Stack gap="md" align="center">
-          <Badge color="gray" variant="light">No Data</Badge>
-          <Text size="sm" c="dimmed">Run the tool to generate the report.</Text>
+          <Badge color="gray" variant="light">
+            No Data
+          </Badge>
+          <Text size="sm" c="dimmed">
+            Run the tool to generate the report.
+          </Text>
         </Stack>
       </div>
     );
@@ -85,36 +92,62 @@ const GetPdfInfoReportView: React.FC<GetPdfInfoReportViewProps> = ({ data }) =>
   return (
     <div className="report-container" ref={containerRef}>
       <Stack gap="xl" align="center">
-
         <div className="simulated-page">
           <Stack gap="lg">
             <Stack gap="xs">
-              <Text fw={700} size="xl" style={{ lineHeight: 1.3, wordBreak: 'break-word' }}>
+              <Text fw={700} size="xl" style={{ lineHeight: 1.3, wordBreak: "break-word" }}>
                 {entry.fileName}
-                <Text component="span" fw={700}> - {t('getPdfInfo.summary.title', 'PDF Summary')}</Text>
+                <Text component="span" fw={700}>
+                  {" "}
+                  - {t("getPdfInfo.summary.title", "PDF Summary")}
+                </Text>
               </Text>
               <Divider />
             </Stack>
 
             <SummarySection sections={sections} hideSectionTitle />
 
-            <KeyValueSection title={t('getPdfInfo.sections.metadata', 'Metadata')} anchorId="metadata" obj={sections.metadata} />
-
-            <KeyValueSection title={t('getPdfInfo.sections.formFields', 'Form Fields')} anchorId="formFields" obj={sections.formFields} />
-
-            <KeyValueSection title={t('getPdfInfo.sections.basicInfo', 'Basic Info')} anchorId="basicInfo" obj={sections.basicInfo} />
-
-            <KeyValueSection title={t('getPdfInfo.sections.documentInfo', 'Document Info')} anchorId="documentInfo" obj={sections.documentInfo} />
-
-            <ComplianceSection 
-              anchorId="compliance" 
-              complianceSummary={sections.summaryData?.Compliance} 
-              legacyCompliance={sections.compliance} 
+            <KeyValueSection
+              title={t("getPdfInfo.sections.metadata", "Metadata")}
+              anchorId="metadata"
+              obj={sections.metadata}
             />
 
-            <KeyValueSection title={t('getPdfInfo.sections.encryption', 'Encryption')} anchorId="encryption" obj={sections.encryption} />
+            <KeyValueSection
+              title={t("getPdfInfo.sections.formFields", "Form Fields")}
+              anchorId="formFields"
+              obj={sections.formFields}
+            />
 
-            <KeyValueSection title={t('getPdfInfo.sections.permissions', 'Permissions')} anchorId="permissions" obj={sections.permissions} />
+            <KeyValueSection
+              title={t("getPdfInfo.sections.basicInfo", "Basic Info")}
+              anchorId="basicInfo"
+              obj={sections.basicInfo}
+            />
+
+            <KeyValueSection
+              title={t("getPdfInfo.sections.documentInfo", "Document Info")}
+              anchorId="documentInfo"
+              obj={sections.documentInfo}
+            />
+
+            <ComplianceSection
+              anchorId="compliance"
+              complianceSummary={sections.summaryData?.Compliance}
+              legacyCompliance={sections.compliance}
+            />
+
+            <KeyValueSection
+              title={t("getPdfInfo.sections.encryption", "Encryption")}
+              anchorId="encryption"
+              obj={sections.encryption}
+            />
+
+            <KeyValueSection
+              title={t("getPdfInfo.sections.permissions", "Permissions")}
+              anchorId="permissions"
+              obj={sections.permissions}
+            />
 
             <TableOfContentsSection anchorId="toc" tocArray={sections.toc ?? []} />
 
@@ -129,5 +162,3 @@ const GetPdfInfoReportView: React.FC<GetPdfInfoReportViewProps> = ({ data }) =>
 };
 
 export default GetPdfInfoReportView;
-
-
diff --git a/frontend/src/core/components/tools/getPdfInfo/GetPdfInfoResults.tsx b/frontend/src/core/components/tools/getPdfInfo/GetPdfInfoResults.tsx
index a6be1bcc11..ffc2ac3e1d 100644
--- a/frontend/src/core/components/tools/getPdfInfo/GetPdfInfoResults.tsx
+++ b/frontend/src/core/components/tools/getPdfInfo/GetPdfInfoResults.tsx
@@ -1,8 +1,8 @@
-import { useCallback, useMemo } from 'react';
-import { Alert, Button, Group, Loader, Stack, Text } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import type { GetPdfInfoOperationHook } from '@app/hooks/tools/getPdfInfo/useGetPdfInfoOperation';
-import { downloadFile } from '@app/services/downloadService';
+import { useCallback, useMemo } from "react";
+import { Alert, Button, Group, Loader, Stack, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import type { GetPdfInfoOperationHook } from "@app/hooks/tools/getPdfInfo/useGetPdfInfoOperation";
+import { downloadFile } from "@app/services/downloadService";
 
 interface GetPdfInfoResultsProps {
   operation: GetPdfInfoOperationHook;
@@ -17,9 +17,9 @@ const findFileByExtension = (files: File[], extension: string) => {
 const GetPdfInfoResults = ({ operation, isLoading, errorMessage }: GetPdfInfoResultsProps) => {
   const { t } = useTranslation();
 
-  const jsonFile = useMemo(() => findFileByExtension(operation.files, '.json'), [operation.files]);
+  const jsonFile = useMemo(() => findFileByExtension(operation.files, ".json"), [operation.files]);
   const selectedFile = useMemo(() => jsonFile ?? null, [jsonFile]);
-  const selectedDownloadLabel = useMemo(() => t('getPdfInfo.downloadJson', 'Download JSON'), [t]);
+  const selectedDownloadLabel = useMemo(() => t("getPdfInfo.downloadJson", "Download JSON"), [t]);
 
   const handleDownload = useCallback((file: File) => {
     void downloadFile({ data: file, filename: file.name });
@@ -29,15 +29,15 @@ const GetPdfInfoResults = ({ operation, isLoading, errorMessage }: GetPdfInfoRes
     return (
       <Group justify="center" gap="sm" py="md">
         <Loader size="sm" />
-        <Text>{t('getPdfInfo.processing', 'Extracting information...')}</Text>
+        <Text>{t("getPdfInfo.processing", "Extracting information...")}</Text>
       </Group>
     );
   }
 
   if (!isLoading && operation.results.length === 0) {
     return (
-      <Alert color="gray" variant="light" title={t('getPdfInfo.results', 'Results')}>
-        <Text size="sm">{t('getPdfInfo.noResults', 'Run the tool to generate a report.')}</Text>
+      <Alert color="gray" variant="light" title={t("getPdfInfo.results", "Results")}>
+        <Text size="sm">{t("getPdfInfo.noResults", "Run the tool to generate a report.")}</Text>
       </Alert>
     );
   }
@@ -53,14 +53,9 @@ const GetPdfInfoResults = ({ operation, isLoading, errorMessage }: GetPdfInfoRes
 
       <Stack gap="xs">
         <Text size="sm" fw={600}>
-          {t('getPdfInfo.downloads', 'Downloads')}
+          {t("getPdfInfo.downloads", "Downloads")}
         </Text>
-        <Button
-          color="blue"
-          onClick={() => selectedFile && handleDownload(selectedFile)}
-          disabled={!selectedFile}
-          fullWidth
-        >
+        <Button color="blue" onClick={() => selectedFile && handleDownload(selectedFile)} disabled={!selectedFile} fullWidth>
           {selectedDownloadLabel}
         </Button>
       </Stack>
@@ -69,4 +64,3 @@ const GetPdfInfoResults = ({ operation, isLoading, errorMessage }: GetPdfInfoRes
 };
 
 export default GetPdfInfoResults;
-
diff --git a/frontend/src/core/components/tools/getPdfInfo/sections/ComplianceSection.tsx b/frontend/src/core/components/tools/getPdfInfo/sections/ComplianceSection.tsx
index b82128a688..2390269f57 100644
--- a/frontend/src/core/components/tools/getPdfInfo/sections/ComplianceSection.tsx
+++ b/frontend/src/core/components/tools/getPdfInfo/sections/ComplianceSection.tsx
@@ -1,11 +1,11 @@
-import React, { useMemo } from 'react';
-import { Badge, Group, Stack, Text, ThemeIcon, Paper, Tooltip, Divider } from '@mantine/core';
-import CheckIcon from '@mui/icons-material/Check';
-import CloseIcon from '@mui/icons-material/Close';
-import InfoIcon from '@mui/icons-material/InfoOutlined';
-import SectionBlock from '@app/components/tools/getPdfInfo/shared/SectionBlock';
-import type { PdfCompliance, PdfComplianceSummary } from '@app/types/getPdfInfo';
-import { useTranslation } from 'react-i18next';
+import React, { useMemo } from "react";
+import { Badge, Group, Stack, Text, ThemeIcon, Paper, Tooltip, Divider } from "@mantine/core";
+import CheckIcon from "@mui/icons-material/Check";
+import CloseIcon from "@mui/icons-material/Close";
+import InfoIcon from "@mui/icons-material/InfoOutlined";
+import SectionBlock from "@app/components/tools/getPdfInfo/shared/SectionBlock";
+import type { PdfCompliance, PdfComplianceSummary } from "@app/types/getPdfInfo";
+import { useTranslation } from "react-i18next";
 
 interface ComplianceSectionProps {
   anchorId: string;
@@ -35,21 +35,21 @@ const parseStandardDisplayName = (standardId: string): { displayName: string; ca
   const pdfaMatch = id.match(/^pdf[_-]?a[_-]?(\d+)([abuf])?$/i);
   if (pdfaMatch) {
     const version = pdfaMatch[1];
-    const level = pdfaMatch[2]?.toUpperCase() || '';
+    const level = pdfaMatch[2]?.toUpperCase() || "";
     return {
       displayName: `PDF/A-${version}${level}`,
-      category: 'PDF/A',
-      sortOrder: 10 + parseInt(version) * 10 + (level === 'A' ? 1 : level === 'B' ? 2 : level === 'U' ? 3 : 0),
+      category: "PDF/A",
+      sortOrder: 10 + parseInt(version) * 10 + (level === "A" ? 1 : level === "B" ? 2 : level === "U" ? 3 : 0),
     };
   }
 
   // PDF/UA variants: pdfua-1, pdfua-2, etc.
   const pdfuaMatch = id.match(/^pdf[_-]?ua[_-]?(\d+)?$/i);
   if (pdfuaMatch) {
-    const version = pdfuaMatch[1] || '1';
+    const version = pdfuaMatch[1] || "1";
     return {
       displayName: `PDF/UA-${version}`,
-      category: 'PDF/UA',
+      category: "PDF/UA",
       sortOrder: 200 + parseInt(version),
     };
   }
@@ -57,10 +57,10 @@ const parseStandardDisplayName = (standardId: string): { displayName: string; ca
   // PDF/X variants
   const pdfxMatch = id.match(/^pdf[_-]?x[_-]?(.+)?$/i);
   if (pdfxMatch) {
-    const version = pdfxMatch[1]?.toUpperCase() || '';
+    const version = pdfxMatch[1]?.toUpperCase() || "";
     return {
-      displayName: `PDF/X${version ? `-${version}` : ''}`,
-      category: 'PDF/X',
+      displayName: `PDF/X${version ? `-${version}` : ""}`,
+      category: "PDF/X",
       sortOrder: 300,
     };
   }
@@ -68,40 +68,40 @@ const parseStandardDisplayName = (standardId: string): { displayName: string; ca
   // PDF/E variants
   const pdfeMatch = id.match(/^pdf[_-]?e[_-]?(.+)?$/i);
   if (pdfeMatch) {
-    const version = pdfeMatch[1]?.toUpperCase() || '';
+    const version = pdfeMatch[1]?.toUpperCase() || "";
     return {
-      displayName: `PDF/E${version ? `-${version}` : ''}`,
-      category: 'PDF/E',
+      displayName: `PDF/E${version ? `-${version}` : ""}`,
+      category: "PDF/E",
       sortOrder: 400,
     };
   }
 
   // PDF/VT
-  if (id.includes('pdfvt') || id.includes('pdf-vt') || id.includes('pdf_vt')) {
-    return { displayName: 'PDF/VT', category: 'PDF/VT', sortOrder: 500 };
+  if (id.includes("pdfvt") || id.includes("pdf-vt") || id.includes("pdf_vt")) {
+    return { displayName: "PDF/VT", category: "PDF/VT", sortOrder: 500 };
   }
 
   // SEC (EDGAR) compliance
-  if (id.includes('sec') || id.includes('edgar')) {
-    return { displayName: 'SEC (EDGAR)', category: 'SEC', sortOrder: 600 };
+  if (id.includes("sec") || id.includes("edgar")) {
+    return { displayName: "SEC (EDGAR)", category: "SEC", sortOrder: 600 };
   }
 
   // Not PDF/A indicator
-  if (id === 'not-pdfa' || id === 'not_pdfa') {
-    return { displayName: 'PDF/A Detection', category: 'Detection', sortOrder: 1 };
+  if (id === "not-pdfa" || id === "not_pdfa") {
+    return { displayName: "PDF/A Detection", category: "Detection", sortOrder: 1 };
   }
 
   // Fallback: capitalize and format
   return {
-    displayName: standardId.toUpperCase().replace(/[-_]/g, '/'),
-    category: 'Other',
+    displayName: standardId.toUpperCase().replace(/[-_]/g, "/"),
+    category: "Other",
     sortOrder: 999,
   };
 };
 
 const buildComplianceResults = (
   complianceSummary?: PdfComplianceSummary[] | null,
-  legacyCompliance?: PdfCompliance | null
+  legacyCompliance?: PdfCompliance | null,
 ): ComplianceCheckResult[] => {
   const results: ComplianceCheckResult[] = [];
   const processedCategories = new Set<string>();
@@ -109,7 +109,7 @@ const buildComplianceResults = (
   if (complianceSummary && complianceSummary.length > 0) {
     for (const item of complianceSummary) {
       // Skip the "not-pdfa" detection marker - it's informational, not a compliance check
-      if (item.Standard.toLowerCase() === 'not-pdfa') {
+      if (item.Standard.toLowerCase() === "not-pdfa") {
         continue;
       }
 
@@ -129,16 +129,16 @@ const buildComplianceResults = (
 
   // Then, add SEC compliance from legacy data if not already present
   // SEC compliance is checked separately by PDFBox, not VeraPDF
-  if (legacyCompliance && 'IsPDF/SECCompliant' in legacyCompliance && !processedCategories.has('SEC')) {
-    const isSecCompliant = legacyCompliance['IsPDF/SECCompliant'] as boolean;
+  if (legacyCompliance && "IsPDF/SECCompliant" in legacyCompliance && !processedCategories.has("SEC")) {
+    const isSecCompliant = legacyCompliance["IsPDF/SECCompliant"] as boolean;
     results.push({
-      displayName: 'SEC (EDGAR)',
-      category: 'SEC',
+      displayName: "SEC (EDGAR)",
+      category: "SEC",
       isCompliant: isSecCompliant,
       summary: isSecCompliant
-        ? 'Document meets SEC EDGAR filing requirements'
-        : 'Document does not meet SEC EDGAR filing requirements',
-      standardId: 'sec-edgar',
+        ? "Document meets SEC EDGAR filing requirements"
+        : "Document does not meet SEC EDGAR filing requirements",
+      standardId: "sec-edgar",
       sortOrder: 600,
     });
   }
@@ -150,9 +150,7 @@ const buildComplianceResults = (
 };
 
 const getConformanceLevel = (results: ComplianceCheckResult[]): string | null => {
-  const passingPdfA = results
-    .filter(r => r.category === 'PDF/A' && r.isCompliant)
-    .sort((a, b) => b.sortOrder - a.sortOrder);
+  const passingPdfA = results.filter((r) => r.category === "PDF/A" && r.isCompliant).sort((a, b) => b.sortOrder - a.sortOrder);
 
   if (passingPdfA.length > 0) {
     return passingPdfA[0].displayName;
@@ -166,10 +164,10 @@ const ComplianceRow: React.FC<{
 }> = ({ result }) => {
   const { t } = useTranslation();
   const Icon = result.isCompliant ? CheckIcon : CloseIcon;
-  const color = result.isCompliant ? 'teal' : 'red';
+  const color = result.isCompliant ? "teal" : "red";
   const statusText = result.isCompliant
-    ? t('getPdfInfo.compliance.passed', 'Passed')
-    : t('getPdfInfo.compliance.failed', 'Failed');
+    ? t("getPdfInfo.compliance.passed", "Passed")
+    : t("getPdfInfo.compliance.failed", "Failed");
 
   return (
     <Paper
@@ -183,25 +181,20 @@ const ComplianceRow: React.FC<{
       <Group justify="space-between" wrap="nowrap">
         <Group gap="sm" wrap="nowrap" style={{ minWidth: 0 }}>
           <ThemeIcon color={color} variant="light" size="lg" radius="xl">
-            <Icon style={{ fontSize: '1.2rem' }} />
+            <Icon style={{ fontSize: "1.2rem" }} />
           </ThemeIcon>
           <Stack gap={2} style={{ minWidth: 0 }}>
             <Text size="sm" fw={600} truncate>
               {result.displayName}
             </Text>
             <Tooltip label={result.summary} multiline maw={400} withArrow>
-              <Text size="xs" c="dimmed" lineClamp={1} style={{ cursor: 'help' }}>
+              <Text size="xs" c="dimmed" lineClamp={1} style={{ cursor: "help" }}>
                 {result.summary}
               </Text>
             </Tooltip>
           </Stack>
         </Group>
-        <Badge
-          color={color}
-          variant="light"
-          size="md"
-          leftSection={<Icon style={{ width: 12, height: 12 }} />}
-        >
+        <Badge color={color} variant="light" size="md" leftSection={<Icon style={{ width: 12, height: 12 }} />}>
           {statusText}
         </Badge>
       </Group>
@@ -215,14 +208,14 @@ const EmptyComplianceState: React.FC = () => {
     <Paper p="md" radius="sm" withBorder>
       <Group gap="sm">
         <ThemeIcon color="gray" variant="light" size="lg" radius="xl">
-          <InfoIcon style={{ fontSize: '1.2rem' }} />
+          <InfoIcon style={{ fontSize: "1.2rem" }} />
         </ThemeIcon>
         <Stack gap={2}>
           <Text size="sm" fw={500}>
-            {t('getPdfInfo.compliance.noVerification', 'No Verification Performed')}
+            {t("getPdfInfo.compliance.noVerification", "No Verification Performed")}
           </Text>
           <Text size="xs" c="dimmed">
-            {t('getPdfInfo.compliance.noVerificationDesc', 'PDF standards compliance was not verified for this document.')}
+            {t("getPdfInfo.compliance.noVerificationDesc", "PDF standards compliance was not verified for this document.")}
           </Text>
         </Stack>
       </Group>
@@ -230,30 +223,23 @@ const EmptyComplianceState: React.FC = () => {
   );
 };
 
-const ComplianceSection: React.FC<ComplianceSectionProps> = ({
-  anchorId,
-  complianceSummary,
-  legacyCompliance,
-}) => {
+const ComplianceSection: React.FC<ComplianceSectionProps> = ({ anchorId, complianceSummary, legacyCompliance }) => {
   const { t } = useTranslation();
 
   const complianceResults = useMemo(
     () => buildComplianceResults(complianceSummary, legacyCompliance),
-    [complianceSummary, legacyCompliance]
+    [complianceSummary, legacyCompliance],
   );
 
-  const conformanceLevel = useMemo(
-    () => getConformanceLevel(complianceResults),
-    [complianceResults]
-  );
+  const conformanceLevel = useMemo(() => getConformanceLevel(complianceResults), [complianceResults]);
 
-  const passedCount = complianceResults.filter(r => r.isCompliant).length;
-  const failedCount = complianceResults.filter(r => !r.isCompliant).length;
+  const passedCount = complianceResults.filter((r) => r.isCompliant).length;
+  const failedCount = complianceResults.filter((r) => !r.isCompliant).length;
 
   const hasResults = complianceResults.length > 0;
 
   return (
-    <SectionBlock title={t('getPdfInfo.sections.compliance', 'Compliance')} anchorId={anchorId}>
+    <SectionBlock title={t("getPdfInfo.sections.compliance", "Compliance")} anchorId={anchorId}>
       <Stack gap="md">
         {/* Summary header when there are results */}
         {hasResults && (
@@ -267,12 +253,12 @@ const ComplianceSection: React.FC<ComplianceSectionProps> = ({
                 )}
                 {passedCount > 0 && (
                   <Badge color="teal" variant="outline" size="sm">
-                    {passedCount} {t('getPdfInfo.compliance.passedCount', 'passed')}
+                    {passedCount} {t("getPdfInfo.compliance.passedCount", "passed")}
                   </Badge>
                 )}
                 {failedCount > 0 && (
                   <Badge color="red" variant="outline" size="sm">
-                    {failedCount} {t('getPdfInfo.compliance.failedCount', 'failed')}
+                    {failedCount} {t("getPdfInfo.compliance.failedCount", "failed")}
                   </Badge>
                 )}
               </Group>
diff --git a/frontend/src/core/components/tools/getPdfInfo/sections/KeyValueSection.tsx b/frontend/src/core/components/tools/getPdfInfo/sections/KeyValueSection.tsx
index a98a475688..6b4e4b8a45 100644
--- a/frontend/src/core/components/tools/getPdfInfo/sections/KeyValueSection.tsx
+++ b/frontend/src/core/components/tools/getPdfInfo/sections/KeyValueSection.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import SectionBlock from '@app/components/tools/getPdfInfo/shared/SectionBlock';
-import KeyValueList from '@app/components/tools/getPdfInfo/shared/KeyValueList';
+import React from "react";
+import SectionBlock from "@app/components/tools/getPdfInfo/shared/SectionBlock";
+import KeyValueList from "@app/components/tools/getPdfInfo/shared/KeyValueList";
 
 interface KeyValueSectionProps {
   title: string;
@@ -18,5 +18,3 @@ const KeyValueSection: React.FC<KeyValueSectionProps> = ({ title, anchorId, obj,
 };
 
 export default KeyValueSection;
-
-
diff --git a/frontend/src/core/components/tools/getPdfInfo/sections/OtherSection.tsx b/frontend/src/core/components/tools/getPdfInfo/sections/OtherSection.tsx
index 3bc515a1a2..b80dbf8db1 100644
--- a/frontend/src/core/components/tools/getPdfInfo/sections/OtherSection.tsx
+++ b/frontend/src/core/components/tools/getPdfInfo/sections/OtherSection.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
-import { Accordion, Stack, Text } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import type { PdfOtherInfo, PdfAttachmentInfo, PdfEmbeddedFileInfo } from '@app/types/getPdfInfo';
-import SectionBlock from '@app/components/tools/getPdfInfo/shared/SectionBlock';
-import ScrollableCodeBlock from '@app/components/tools/getPdfInfo/shared/ScrollableCodeBlock';
-import { pdfInfoAccordionStyles } from '@app/components/tools/getPdfInfo/shared/accordionStyles';
+import React from "react";
+import { Accordion, Stack, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import type { PdfOtherInfo, PdfAttachmentInfo, PdfEmbeddedFileInfo } from "@app/types/getPdfInfo";
+import SectionBlock from "@app/components/tools/getPdfInfo/shared/SectionBlock";
+import ScrollableCodeBlock from "@app/components/tools/getPdfInfo/shared/ScrollableCodeBlock";
+import { pdfInfoAccordionStyles } from "@app/components/tools/getPdfInfo/shared/accordionStyles";
 
 interface OtherSectionProps {
   anchorId: string;
@@ -12,13 +12,18 @@ interface OtherSectionProps {
 }
 
 const renderAttachmentsList = (attachments: PdfAttachmentInfo[] | undefined, emptyText: string) => {
-  if (!attachments || attachments.length === 0) return <Text size="sm" c="dimmed">{emptyText}</Text>;
+  if (!attachments || attachments.length === 0)
+    return (
+      <Text size="sm" c="dimmed">
+        {emptyText}
+      </Text>
+    );
   return (
     <Stack gap={4}>
       {attachments.map((attachment, idx) => (
-        <div key={idx} style={{ wordBreak: 'break-word', overflowWrap: 'break-word' }}>
+        <div key={idx} style={{ wordBreak: "break-word", overflowWrap: "break-word" }}>
           <Text size="sm" c="dimmed">
-            <strong>{attachment.Name || 'Unnamed attachment'}</strong>
+            <strong>{attachment.Name || "Unnamed attachment"}</strong>
             {attachment.Description && ` - ${attachment.Description}`}
             {attachment.FileSize != null && ` (${attachment.FileSize} bytes)`}
           </Text>
@@ -29,13 +34,18 @@ const renderAttachmentsList = (attachments: PdfAttachmentInfo[] | undefined, emp
 };
 
 const renderEmbeddedFilesList = (embeddedFiles: PdfEmbeddedFileInfo[] | undefined, emptyText: string) => {
-  if (!embeddedFiles || embeddedFiles.length === 0) return <Text size="sm" c="dimmed">{emptyText}</Text>;
+  if (!embeddedFiles || embeddedFiles.length === 0)
+    return (
+      <Text size="sm" c="dimmed">
+        {emptyText}
+      </Text>
+    );
   return (
     <Stack gap={4}>
       {embeddedFiles.map((file, idx) => (
-        <div key={idx} style={{ wordBreak: 'break-word', overflowWrap: 'break-word' }}>
+        <div key={idx} style={{ wordBreak: "break-word", overflowWrap: "break-word" }}>
           <Text size="sm" c="dimmed">
-            <strong>{file.Name || 'Unnamed file'}</strong>
+            <strong>{file.Name || "Unnamed file"}</strong>
             {file.FileSize != null && ` (${file.FileSize} bytes)`}
             {file.MimeType && ` - ${file.MimeType}`}
             {file.CreationDate && ` - Created: ${file.CreationDate}`}
@@ -48,12 +58,17 @@ const renderEmbeddedFilesList = (embeddedFiles: PdfEmbeddedFileInfo[] | undefine
 };
 
 const renderList = (arr: unknown[] | undefined, emptyText: string) => {
-  if (!arr || arr.length === 0) return <Text size="sm" c="dimmed">{emptyText}</Text>;
+  if (!arr || arr.length === 0)
+    return (
+      <Text size="sm" c="dimmed">
+        {emptyText}
+      </Text>
+    );
   return (
     <Stack gap={4}>
       {arr.map((item, idx) => (
-        <Text key={idx} size="sm" c="dimmed" style={{ wordBreak: 'break-word', overflowWrap: 'break-word' }}>
-          {typeof item === 'string' ? item : JSON.stringify(item)}
+        <Text key={idx} size="sm" c="dimmed" style={{ wordBreak: "break-word", overflowWrap: "break-word" }}>
+          {typeof item === "string" ? item : JSON.stringify(item)}
         </Text>
       ))}
     </Stack>
@@ -62,40 +77,46 @@ const renderList = (arr: unknown[] | undefined, emptyText: string) => {
 
 const OtherSection: React.FC<OtherSectionProps> = ({ anchorId, other }) => {
   const { t } = useTranslation();
-  const noneDetected = t('getPdfInfo.noneDetected', 'None detected');
+  const noneDetected = t("getPdfInfo.noneDetected", "None detected");
 
-  const structureTreeContent = Array.isArray(other?.StructureTree) && other.StructureTree.length > 0
-    ? JSON.stringify(other.StructureTree, null, 2)
-    : null;
+  const structureTreeContent =
+    Array.isArray(other?.StructureTree) && other.StructureTree.length > 0
+      ? JSON.stringify(other.StructureTree, null, 2)
+      : null;
 
   return (
-    <SectionBlock title={t('getPdfInfo.sections.other', 'Other')} anchorId={anchorId}>
+    <SectionBlock title={t("getPdfInfo.sections.other", "Other")} anchorId={anchorId}>
       <Stack gap="sm">
         <Stack gap={6}>
-          <Text fw={600} size="sm">{t('getPdfInfo.other.attachments', 'Attachments')}</Text>
+          <Text fw={600} size="sm">
+            {t("getPdfInfo.other.attachments", "Attachments")}
+          </Text>
           {renderAttachmentsList(other?.Attachments, noneDetected)}
         </Stack>
         <Stack gap={6}>
-          <Text fw={600} size="sm">{t('getPdfInfo.other.embeddedFiles', 'Embedded Files')}</Text>
+          <Text fw={600} size="sm">
+            {t("getPdfInfo.other.embeddedFiles", "Embedded Files")}
+          </Text>
           {renderEmbeddedFilesList(other?.EmbeddedFiles, noneDetected)}
         </Stack>
         <Stack gap={6}>
-          <Text fw={600} size="sm">{t('getPdfInfo.other.javaScript', 'JavaScript')}</Text>
+          <Text fw={600} size="sm">
+            {t("getPdfInfo.other.javaScript", "JavaScript")}
+          </Text>
           {renderList(other?.JavaScript, noneDetected)}
         </Stack>
         <Stack gap={6}>
-          <Text fw={600} size="sm">{t('getPdfInfo.other.layers', 'Layers')}</Text>
+          <Text fw={600} size="sm">
+            {t("getPdfInfo.other.layers", "Layers")}
+          </Text>
           {renderList(other?.Layers, noneDetected)}
         </Stack>
-        <Accordion
-          variant="separated"
-          radius="md"
-          defaultValue=""
-          styles={pdfInfoAccordionStyles}
-        >
+        <Accordion variant="separated" radius="md" defaultValue="" styles={pdfInfoAccordionStyles}>
           <Accordion.Item value="structureTree">
             <Accordion.Control>
-              <Text fw={600} size="sm">{t('getPdfInfo.other.structureTree', 'StructureTree')}</Text>
+              <Text fw={600} size="sm">
+                {t("getPdfInfo.other.structureTree", "StructureTree")}
+              </Text>
             </Accordion.Control>
             <Accordion.Panel>
               <ScrollableCodeBlock content={structureTreeContent} maxHeight="20rem" />
@@ -103,7 +124,9 @@ const OtherSection: React.FC<OtherSectionProps> = ({ anchorId, other }) => {
           </Accordion.Item>
           <Accordion.Item value="xmp">
             <Accordion.Control>
-              <Text fw={600} size="sm">{t('getPdfInfo.other.xmp', 'XMPMetadata')}</Text>
+              <Text fw={600} size="sm">
+                {t("getPdfInfo.other.xmp", "XMPMetadata")}
+              </Text>
             </Accordion.Control>
             <Accordion.Panel>
               <ScrollableCodeBlock content={other?.XMPMetadata} maxHeight="400px" />
@@ -116,5 +139,3 @@ const OtherSection: React.FC<OtherSectionProps> = ({ anchorId, other }) => {
 };
 
 export default OtherSection;
-
-
diff --git a/frontend/src/core/components/tools/getPdfInfo/sections/PerPageSection.tsx b/frontend/src/core/components/tools/getPdfInfo/sections/PerPageSection.tsx
index 36bd7bf1c1..30b4920162 100644
--- a/frontend/src/core/components/tools/getPdfInfo/sections/PerPageSection.tsx
+++ b/frontend/src/core/components/tools/getPdfInfo/sections/PerPageSection.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
-import { Accordion, Stack, Text } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import type { PdfPerPageInfo, PdfPageInfo, PdfFontInfo, PdfImageInfo } from '@app/types/getPdfInfo';
-import SectionBlock from '@app/components/tools/getPdfInfo/shared/SectionBlock';
-import KeyValueList from '@app/components/tools/getPdfInfo/shared/KeyValueList';
-import { pdfInfoAccordionStyles } from '@app/components/tools/getPdfInfo/shared/accordionStyles';
+import React from "react";
+import { Accordion, Stack, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import type { PdfPerPageInfo, PdfPageInfo, PdfFontInfo, PdfImageInfo } from "@app/types/getPdfInfo";
+import SectionBlock from "@app/components/tools/getPdfInfo/shared/SectionBlock";
+import KeyValueList from "@app/components/tools/getPdfInfo/shared/KeyValueList";
+import { pdfInfoAccordionStyles } from "@app/components/tools/getPdfInfo/shared/accordionStyles";
 
 interface PerPageSectionProps {
   anchorId: string;
@@ -12,15 +12,19 @@ interface PerPageSectionProps {
 }
 
 const renderImagesList = (images: PdfImageInfo[] | undefined, emptyText: string) => {
-  if (!images || images.length === 0) return <Text size="sm" c="dimmed">{emptyText}</Text>;
+  if (!images || images.length === 0)
+    return (
+      <Text size="sm" c="dimmed">
+        {emptyText}
+      </Text>
+    );
   return (
     <Stack gap={4}>
       {images.map((image, idx) => (
-        <div key={idx} style={{ wordBreak: 'break-word', overflowWrap: 'break-word' }}>
+        <div key={idx} style={{ wordBreak: "break-word", overflowWrap: "break-word" }}>
           <Text size="sm" c="dimmed">
-            {image.Name ? `${image.Name} ` : 'Image '}
-            ({image.Width}×{image.Height}px
-            {image.ColorSpace ? `, ${image.ColorSpace}` : ''})
+            {image.Name ? `${image.Name} ` : "Image "}({image.Width}×{image.Height}px
+            {image.ColorSpace ? `, ${image.ColorSpace}` : ""})
           </Text>
         </div>
       ))}
@@ -29,12 +33,17 @@ const renderImagesList = (images: PdfImageInfo[] | undefined, emptyText: string)
 };
 
 const renderList = (arr: unknown[] | undefined, emptyText: string) => {
-  if (!arr || arr.length === 0) return <Text size="sm" c="dimmed">{emptyText}</Text>;
+  if (!arr || arr.length === 0)
+    return (
+      <Text size="sm" c="dimmed">
+        {emptyText}
+      </Text>
+    );
   return (
     <Stack gap={4}>
       {arr.map((item, idx) => (
-        <Text key={idx} size="sm" c="dimmed" style={{ wordBreak: 'break-word', overflowWrap: 'break-word' }}>
-          {typeof item === 'string' ? item : JSON.stringify(item)}
+        <Text key={idx} size="sm" c="dimmed" style={{ wordBreak: "break-word", overflowWrap: "break-word" }}>
+          {typeof item === "string" ? item : JSON.stringify(item)}
         </Text>
       ))}
     </Stack>
@@ -42,12 +51,17 @@ const renderList = (arr: unknown[] | undefined, emptyText: string) => {
 };
 
 const renderFontsList = (fonts: PdfFontInfo[] | undefined, emptyText: string) => {
-  if (!fonts || fonts.length === 0) return <Text size="sm" c="dimmed">{emptyText}</Text>;
+  if (!fonts || fonts.length === 0)
+    return (
+      <Text size="sm" c="dimmed">
+        {emptyText}
+      </Text>
+    );
   return (
     <Stack gap={4}>
       {fonts.map((font, idx) => (
-        <Text key={idx} size="sm" c="dimmed" style={{ wordBreak: 'break-word', overflowWrap: 'break-word' }}>
-          {`${font.Name ?? 'Unknown'}${font.IsEmbedded ? ' (embedded)' : ''}`}
+        <Text key={idx} size="sm" c="dimmed" style={{ wordBreak: "break-word", overflowWrap: "break-word" }}>
+          {`${font.Name ?? "Unknown"}${font.IsEmbedded ? " (embedded)" : ""}`}
         </Text>
       ))}
     </Stack>
@@ -56,69 +70,84 @@ const renderFontsList = (fonts: PdfFontInfo[] | undefined, emptyText: string) =>
 
 const PerPageSection: React.FC<PerPageSectionProps> = ({ anchorId, perPage }) => {
   const { t } = useTranslation();
-  const noneDetected = t('getPdfInfo.noneDetected', 'None detected');
+  const noneDetected = t("getPdfInfo.noneDetected", "None detected");
 
   const hasPages = perPage && Object.keys(perPage).length > 0;
 
   return (
-    <SectionBlock title={t('getPdfInfo.sections.perPageInfo', 'Per Page Info')} anchorId={anchorId}>
+    <SectionBlock title={t("getPdfInfo.sections.perPageInfo", "Per Page Info")} anchorId={anchorId}>
       {hasPages ? (
-        <Accordion
-          variant="separated"
-          radius="md"
-          defaultValue=""
-          styles={pdfInfoAccordionStyles}
-        >
+        <Accordion variant="separated" radius="md" defaultValue="" styles={pdfInfoAccordionStyles}>
           {Object.entries(perPage).map(([pageLabel, pageInfo]: [string, PdfPageInfo]) => (
             <Accordion.Item key={pageLabel} value={pageLabel}>
               <Accordion.Control>
-                <Text fw={600} size="sm">{pageLabel}</Text>
+                <Text fw={600} size="sm">
+                  {pageLabel}
+                </Text>
               </Accordion.Control>
               <Accordion.Panel>
-                <div style={{ backgroundColor: 'var(--bg-raised)', color: 'var(--text-primary)', borderRadius: 8, padding: 12 }}>
+                <div
+                  style={{ backgroundColor: "var(--bg-raised)", color: "var(--text-primary)", borderRadius: 8, padding: 12 }}
+                >
                   <Stack gap="sm">
                     {pageInfo?.Size && (
                       <Stack gap={4}>
-                        <Text fw={600} size="sm">{t('getPdfInfo.perPage.size', 'Size')}</Text>
+                        <Text fw={600} size="sm">
+                          {t("getPdfInfo.perPage.size", "Size")}
+                        </Text>
                         <KeyValueList obj={pageInfo.Size} />
                       </Stack>
                     )}
-                    <KeyValueList obj={{
-                      'Rotation': pageInfo?.Rotation,
-                      'Page Orientation': pageInfo?.['Page Orientation'],
-                      'MediaBox': pageInfo?.MediaBox,
-                      'CropBox': pageInfo?.CropBox,
-                      'BleedBox': pageInfo?.BleedBox,
-                      'TrimBox': pageInfo?.TrimBox,
-                      'ArtBox': pageInfo?.ArtBox,
-                      'Text Characters Count': pageInfo?.['Text Characters Count'],
-                    }} />
+                    <KeyValueList
+                      obj={{
+                        Rotation: pageInfo?.Rotation,
+                        "Page Orientation": pageInfo?.["Page Orientation"],
+                        MediaBox: pageInfo?.MediaBox,
+                        CropBox: pageInfo?.CropBox,
+                        BleedBox: pageInfo?.BleedBox,
+                        TrimBox: pageInfo?.TrimBox,
+                        ArtBox: pageInfo?.ArtBox,
+                        "Text Characters Count": pageInfo?.["Text Characters Count"],
+                      }}
+                    />
                     {pageInfo?.Annotations && (
                       <Stack gap={4}>
-                        <Text fw={600} size="sm">{t('getPdfInfo.perPage.annotations', 'Annotations')}</Text>
+                        <Text fw={600} size="sm">
+                          {t("getPdfInfo.perPage.annotations", "Annotations")}
+                        </Text>
                         <KeyValueList obj={pageInfo.Annotations} />
                       </Stack>
                     )}
                     <Stack gap={4}>
-                      <Text fw={600} size="sm">{t('getPdfInfo.perPage.images', 'Images')}</Text>
+                      <Text fw={600} size="sm">
+                        {t("getPdfInfo.perPage.images", "Images")}
+                      </Text>
                       {renderImagesList(pageInfo?.Images, noneDetected)}
                     </Stack>
                     <Stack gap={4}>
-                      <Text fw={600} size="sm">{t('getPdfInfo.perPage.links', 'Links')}</Text>
+                      <Text fw={600} size="sm">
+                        {t("getPdfInfo.perPage.links", "Links")}
+                      </Text>
                       {renderList(pageInfo?.Links, noneDetected)}
                     </Stack>
                     <Stack gap={4}>
-                      <Text fw={600} size="sm">{t('getPdfInfo.perPage.fonts', 'Fonts')}</Text>
+                      <Text fw={600} size="sm">
+                        {t("getPdfInfo.perPage.fonts", "Fonts")}
+                      </Text>
                       {renderFontsList(pageInfo?.Fonts, noneDetected)}
                     </Stack>
                     {pageInfo?.XObjectCounts && (
                       <Stack gap={4}>
-                        <Text fw={600} size="sm">{t('getPdfInfo.perPage.xobjects', 'XObject Counts')}</Text>
+                        <Text fw={600} size="sm">
+                          {t("getPdfInfo.perPage.xobjects", "XObject Counts")}
+                        </Text>
                         <KeyValueList obj={pageInfo.XObjectCounts} />
                       </Stack>
                     )}
                     <Stack gap={4}>
-                      <Text fw={600} size="sm">{t('getPdfInfo.perPage.multimedia', 'Multimedia')}</Text>
+                      <Text fw={600} size="sm">
+                        {t("getPdfInfo.perPage.multimedia", "Multimedia")}
+                      </Text>
                       {renderList(pageInfo?.Multimedia, noneDetected)}
                     </Stack>
                   </Stack>
@@ -128,12 +157,12 @@ const PerPageSection: React.FC<PerPageSectionProps> = ({ anchorId, perPage }) =>
           ))}
         </Accordion>
       ) : (
-        <Text size="sm" c="dimmed">{noneDetected}</Text>
+        <Text size="sm" c="dimmed">
+          {noneDetected}
+        </Text>
       )}
     </SectionBlock>
   );
 };
 
 export default PerPageSection;
-
-
diff --git a/frontend/src/core/components/tools/getPdfInfo/sections/SummarySection.tsx b/frontend/src/core/components/tools/getPdfInfo/sections/SummarySection.tsx
index f5e5149b68..c120810d68 100644
--- a/frontend/src/core/components/tools/getPdfInfo/sections/SummarySection.tsx
+++ b/frontend/src/core/components/tools/getPdfInfo/sections/SummarySection.tsx
@@ -1,9 +1,9 @@
-import React, { useMemo } from 'react';
-import { Stack, Text } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import type { ParsedPdfSections, PdfFontInfo, PdfComplianceSummary } from '@app/types/getPdfInfo';
-import SectionBlock from '@app/components/tools/getPdfInfo/shared/SectionBlock';
-import KeyValueList from '@app/components/tools/getPdfInfo/shared/KeyValueList';
+import React, { useMemo } from "react";
+import { Stack, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import type { ParsedPdfSections, PdfFontInfo, PdfComplianceSummary } from "@app/types/getPdfInfo";
+import SectionBlock from "@app/components/tools/getPdfInfo/shared/SectionBlock";
+import KeyValueList from "@app/components/tools/getPdfInfo/shared/KeyValueList";
 
 interface SummarySectionProps {
   sections: ParsedPdfSections;
@@ -15,38 +15,36 @@ interface SummarySectionProps {
  * Uses the authoritative complianceSummary data when available.
  */
 const getComplianceSummaryInfo = (
-  complianceSummary?: PdfComplianceSummary[] | null
+  complianceSummary?: PdfComplianceSummary[] | null,
 ): { hasCompliance: boolean; passedStandards: string[]; failedCount: number } => {
   if (!complianceSummary || complianceSummary.length === 0) {
     return { hasCompliance: false, passedStandards: [], failedCount: 0 };
   }
 
   // Filter out informational markers like "not-pdfa"
-  const actualChecks = complianceSummary.filter(
-    item => item.Standard.toLowerCase() !== 'not-pdfa'
-  );
+  const actualChecks = complianceSummary.filter((item) => item.Standard.toLowerCase() !== "not-pdfa");
 
   if (actualChecks.length === 0) {
     return { hasCompliance: false, passedStandards: [], failedCount: 0 };
   }
 
   const passedStandards = actualChecks
-    .filter(item => item.Compliant)
-    .map(item => {
+    .filter((item) => item.Compliant)
+    .map((item) => {
       // Format standard ID to display name (e.g., "pdfa-3b" -> "PDF/A-3B")
       const id = item.Standard.toLowerCase();
       const pdfaMatch = id.match(/^pdf[_-]?a[_-]?(\d+)([abuf])?$/i);
       if (pdfaMatch) {
-        return `PDF/A-${pdfaMatch[1]}${pdfaMatch[2]?.toUpperCase() || ''}`;
+        return `PDF/A-${pdfaMatch[1]}${pdfaMatch[2]?.toUpperCase() || ""}`;
       }
       const pdfuaMatch = id.match(/^pdf[_-]?ua[_-]?(\d+)?$/i);
       if (pdfuaMatch) {
-        return `PDF/UA-${pdfuaMatch[1] || '1'}`;
+        return `PDF/UA-${pdfuaMatch[1] || "1"}`;
       }
       return item.Standard.toUpperCase();
     });
 
-  const failedCount = actualChecks.filter(item => !item.Compliant).length;
+  const failedCount = actualChecks.filter((item) => !item.Compliant).length;
 
   return { hasCompliance: true, passedStandards, failedCount };
 };
@@ -69,83 +67,91 @@ const SummarySection: React.FC<SummarySectionProps> = ({ sections, hideSectionTi
     const other = sections.other ?? {};
     const perPage = sections.perPage ?? {};
 
-    const pages = basic['Number of pages'];
+    const pages = basic["Number of pages"];
     const fileSizeBytes = basic.FileSizeInBytes;
-    const pdfVersion = docInfo['PDF version'];
+    const pdfVersion = docInfo["PDF version"];
     const language = basic.Language;
 
     const basicInformation: Record<string, unknown> = {
-      [t('getPdfInfo.summary.pages', 'Pages')]: pages,
-      [t('getPdfInfo.summary.fileSize', 'File Size')]: typeof fileSizeBytes === 'number' ? `${(fileSizeBytes / 1024).toFixed(2)} KB` : fileSizeBytes,
-      [t('getPdfInfo.summary.pdfVersion', 'PDF Version')]: pdfVersion,
-      [t('getPdfInfo.summary.language', 'Language')]: language,
+      [t("getPdfInfo.summary.pages", "Pages")]: pages,
+      [t("getPdfInfo.summary.fileSize", "File Size")]:
+        typeof fileSizeBytes === "number" ? `${(fileSizeBytes / 1024).toFixed(2)} KB` : fileSizeBytes,
+      [t("getPdfInfo.summary.pdfVersion", "PDF Version")]: pdfVersion,
+      [t("getPdfInfo.summary.language", "Language")]: language,
     };
 
     const documentInformation: Record<string, unknown> = {
-      [t('getPdfInfo.summary.title', 'Title')]: metadata.Title,
-      [t('getPdfInfo.summary.author', 'Author')]: metadata.Author,
-      [t('getPdfInfo.summary.created', 'Created')]: metadata.CreationDate,
-      [t('getPdfInfo.summary.modified', 'Modified')]: metadata.ModificationDate,
+      [t("getPdfInfo.summary.title", "Title")]: metadata.Title,
+      [t("getPdfInfo.summary.author", "Author")]: metadata.Author,
+      [t("getPdfInfo.summary.created", "Created")]: metadata.CreationDate,
+      [t("getPdfInfo.summary.modified", "Modified")]: metadata.ModificationDate,
     };
 
     const securityStatusText = encryption.IsEncrypted
-      ? t('getPdfInfo.summary.security.encrypted', 'Encrypted PDF - Password protection present')
-      : t('getPdfInfo.summary.security.unencrypted', 'Unencrypted PDF - No password protection');
+      ? t("getPdfInfo.summary.security.encrypted", "Encrypted PDF - Password protection present")
+      : t("getPdfInfo.summary.security.unencrypted", "Unencrypted PDF - No password protection");
 
     const restrictedCount = summary.restrictedPermissionsCount ?? 0;
-    const permissionsAllAllowed = Object.values(permissions).every((v) => v === 'Allowed');
+    const permissionsAllAllowed = Object.values(permissions).every((v) => v === "Allowed");
     const permSummary = permissionsAllAllowed
-      ? t('getPdfInfo.summary.permsAll', 'All Permissions Allowed')
+      ? t("getPdfInfo.summary.permsAll", "All Permissions Allowed")
       : restrictedCount > 0
-        ? t('getPdfInfo.summary.permsRestricted', '{{count}} restrictions', { count: restrictedCount })
-        : t('getPdfInfo.summary.permsMixed', 'Some permissions restricted');
+        ? t("getPdfInfo.summary.permsRestricted", "{{count}} restrictions", { count: restrictedCount })
+        : t("getPdfInfo.summary.permsMixed", "Some permissions restricted");
 
     // Use authoritative VeraPDF results for compliance summary
     const complianceInfo = getComplianceSummaryInfo(summary.Compliance);
     const complianceText = complianceInfo.hasCompliance
       ? complianceInfo.passedStandards.length > 0
-        ? t('getPdfInfo.summary.compliancePassed', '{{standards}} compliant', { 
-            standards: complianceInfo.passedStandards.join(', ') 
+        ? t("getPdfInfo.summary.compliancePassed", "{{standards}} compliant", {
+            standards: complianceInfo.passedStandards.join(", "),
           })
-        : t('getPdfInfo.summary.complianceChecked', 'Standards verified ({{failed}} failed)', { 
-            failed: complianceInfo.failedCount 
+        : t("getPdfInfo.summary.complianceChecked", "Standards verified ({{failed}} failed)", {
+            failed: complianceInfo.failedCount,
           })
-      : t('getPdfInfo.summary.noCompliance', 'No Compliance Standards');
+      : t("getPdfInfo.summary.noCompliance", "No Compliance Standards");
 
     // Helper to get first page data
-    const firstPage = perPage['Page 1'];
+    const firstPage = perPage["Page 1"];
     const firstPageFonts: PdfFontInfo[] = firstPage?.Fonts ?? [];
 
     const technical: Record<string, unknown> = {
-      [t('getPdfInfo.summary.tech.images', 'Images')]: (() => {
+      [t("getPdfInfo.summary.tech.images", "Images")]: (() => {
         const total = basic.TotalImages;
-        if (typeof total === 'number') return total === 0 ? 'None' : `${total}`;
-        return 'None';
+        if (typeof total === "number") return total === 0 ? "None" : `${total}`;
+        return "None";
       })(),
-      [t('getPdfInfo.summary.tech.fonts', 'Fonts')]: (() => {
-        if (firstPageFonts.length === 0) return 'None';
+      [t("getPdfInfo.summary.tech.fonts", "Fonts")]: (() => {
+        if (firstPageFonts.length === 0) return "None";
         const embedded = firstPageFonts.filter((f) => f.IsEmbedded).length;
         return `${firstPageFonts.length} (${embedded} embedded)`;
       })(),
-      [t('getPdfInfo.summary.tech.formFields', 'Form Fields')]: sections.formFields && Object.keys(sections.formFields).length > 0 ? Object.keys(sections.formFields).length : 'None',
-      [t('getPdfInfo.summary.tech.embeddedFiles', 'Embedded Files')]: other.EmbeddedFiles?.length ?? 'None',
-      [t('getPdfInfo.summary.tech.javaScript', 'JavaScript')]: other.JavaScript?.length ?? 'None',
-      [t('getPdfInfo.summary.tech.layers', 'Layers')]: other.Layers?.length ?? 'None',
-      [t('getPdfInfo.summary.tech.bookmarks', 'Bookmarks')]: sections.toc?.length ?? 'None',
-      [t('getPdfInfo.summary.tech.multimedia', 'Multimedia')]: firstPage?.Multimedia?.length ?? 'None',
+      [t("getPdfInfo.summary.tech.formFields", "Form Fields")]:
+        sections.formFields && Object.keys(sections.formFields).length > 0 ? Object.keys(sections.formFields).length : "None",
+      [t("getPdfInfo.summary.tech.embeddedFiles", "Embedded Files")]: other.EmbeddedFiles?.length ?? "None",
+      [t("getPdfInfo.summary.tech.javaScript", "JavaScript")]: other.JavaScript?.length ?? "None",
+      [t("getPdfInfo.summary.tech.layers", "Layers")]: other.Layers?.length ?? "None",
+      [t("getPdfInfo.summary.tech.bookmarks", "Bookmarks")]: sections.toc?.length ?? "None",
+      [t("getPdfInfo.summary.tech.multimedia", "Multimedia")]: firstPage?.Multimedia?.length ?? "None",
     };
 
     const overview = (() => {
-      const tTitle = metadata.Title ? `"${metadata.Title}"` : t('getPdfInfo.summary.overview.untitled', 'an untitled document');
-      const author = metadata.Author || t('getPdfInfo.summary.overview.unknown', 'Unknown Author');
-      const pagesCount = typeof pages === 'number' ? pages : '?';
-      const version = pdfVersion ?? '?';
-      return t('getPdfInfo.summary.overview.text', 'This is a {{pages}}-page PDF titled {{title}} created by {{author}} (PDF version {{version}}).', {
-        pages: pagesCount,
-        title: tTitle,
-        author,
-        version,
-      });
+      const tTitle = metadata.Title
+        ? `"${metadata.Title}"`
+        : t("getPdfInfo.summary.overview.untitled", "an untitled document");
+      const author = metadata.Author || t("getPdfInfo.summary.overview.unknown", "Unknown Author");
+      const pagesCount = typeof pages === "number" ? pages : "?";
+      const version = pdfVersion ?? "?";
+      return t(
+        "getPdfInfo.summary.overview.text",
+        "This is a {{pages}}-page PDF titled {{title}} created by {{author}} (PDF version {{version}}).",
+        {
+          pages: pagesCount,
+          title: tTitle,
+          author,
+          version,
+        },
+      );
     })();
 
     return {
@@ -162,26 +168,44 @@ const SummarySection: React.FC<SummarySectionProps> = ({ sections, hideSectionTi
   const content = (
     <Stack gap="md">
       <Stack gap={6}>
-        <Text fw={600} size="sm">{t('getPdfInfo.summary.basic', 'Basic Information')}</Text>
+        <Text fw={600} size="sm">
+          {t("getPdfInfo.summary.basic", "Basic Information")}
+        </Text>
         <KeyValueList obj={summaryBlocks.basicInformation} />
       </Stack>
       <Stack gap={6}>
-        <Text fw={600} size="sm">{t('getPdfInfo.summary.documentInfo', 'Document Information')}</Text>
+        <Text fw={600} size="sm">
+          {t("getPdfInfo.summary.documentInfo", "Document Information")}
+        </Text>
         <KeyValueList obj={summaryBlocks.documentInformation} />
       </Stack>
       <Stack gap={6}>
-        <Text fw={600} size="sm">{t('getPdfInfo.summary.securityTitle', 'Security Status')}</Text>
-        <Text size="sm" c="dimmed">{summaryBlocks.securityStatusText}</Text>
-        <Text size="sm" c="dimmed">{summaryBlocks.permSummary}</Text>
-        <Text size="sm" c="dimmed">{summaryBlocks.complianceText}</Text>
+        <Text fw={600} size="sm">
+          {t("getPdfInfo.summary.securityTitle", "Security Status")}
+        </Text>
+        <Text size="sm" c="dimmed">
+          {summaryBlocks.securityStatusText}
+        </Text>
+        <Text size="sm" c="dimmed">
+          {summaryBlocks.permSummary}
+        </Text>
+        <Text size="sm" c="dimmed">
+          {summaryBlocks.complianceText}
+        </Text>
       </Stack>
       <Stack gap={6}>
-        <Text fw={600} size="sm">{t('getPdfInfo.summary.technical', 'Technical')}</Text>
+        <Text fw={600} size="sm">
+          {t("getPdfInfo.summary.technical", "Technical")}
+        </Text>
         <KeyValueList obj={summaryBlocks.technical} />
       </Stack>
       <Stack gap={6}>
-        <Text fw={600} size="sm">{t('getPdfInfo.summary.overviewTitle', 'PDF Overview')}</Text>
-        <Text size="sm" c="dimmed">{summaryBlocks.overview}</Text>
+        <Text fw={600} size="sm">
+          {t("getPdfInfo.summary.overviewTitle", "PDF Overview")}
+        </Text>
+        <Text size="sm" c="dimmed">
+          {summaryBlocks.overview}
+        </Text>
       </Stack>
     </Stack>
   );
@@ -191,12 +215,10 @@ const SummarySection: React.FC<SummarySectionProps> = ({ sections, hideSectionTi
   }
 
   return (
-    <SectionBlock title={t('getPdfInfo.summary.title', 'PDF Summary')} anchorId="summary">
+    <SectionBlock title={t("getPdfInfo.summary.title", "PDF Summary")} anchorId="summary">
       {content}
     </SectionBlock>
   );
 };
 
 export default SummarySection;
-
-
diff --git a/frontend/src/core/components/tools/getPdfInfo/sections/TableOfContentsSection.tsx b/frontend/src/core/components/tools/getPdfInfo/sections/TableOfContentsSection.tsx
index 57e4ac2fed..0f769a319e 100644
--- a/frontend/src/core/components/tools/getPdfInfo/sections/TableOfContentsSection.tsx
+++ b/frontend/src/core/components/tools/getPdfInfo/sections/TableOfContentsSection.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import { Stack, Text } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import type { PdfTocEntry } from '@app/types/getPdfInfo';
-import SectionBlock from '@app/components/tools/getPdfInfo/shared/SectionBlock';
+import React from "react";
+import { Stack, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import type { PdfTocEntry } from "@app/types/getPdfInfo";
+import SectionBlock from "@app/components/tools/getPdfInfo/shared/SectionBlock";
 
 interface TableOfContentsSectionProps {
   anchorId: string;
@@ -11,17 +11,19 @@ interface TableOfContentsSectionProps {
 
 const TableOfContentsSection: React.FC<TableOfContentsSectionProps> = ({ anchorId, tocArray }) => {
   const { t } = useTranslation();
-  const noneDetected = t('getPdfInfo.noneDetected', 'None detected');
+  const noneDetected = t("getPdfInfo.noneDetected", "None detected");
 
   return (
-    <SectionBlock title={t('getPdfInfo.sections.tableOfContents', 'Table of Contents')} anchorId={anchorId}>
+    <SectionBlock title={t("getPdfInfo.sections.tableOfContents", "Table of Contents")} anchorId={anchorId}>
       {!tocArray || tocArray.length === 0 ? (
-        <Text size="sm" c="dimmed">{noneDetected}</Text>
+        <Text size="sm" c="dimmed">
+          {noneDetected}
+        </Text>
       ) : (
         <Stack gap={4}>
           {tocArray.map((item, idx) => (
             <Text key={idx} size="sm" c="dimmed">
-              {typeof item === 'string' ? item : JSON.stringify(item)}
+              {typeof item === "string" ? item : JSON.stringify(item)}
             </Text>
           ))}
         </Stack>
@@ -31,5 +33,3 @@ const TableOfContentsSection: React.FC<TableOfContentsSectionProps> = ({ anchorI
 };
 
 export default TableOfContentsSection;
-
-
diff --git a/frontend/src/core/components/tools/getPdfInfo/shared/KeyValueList.tsx b/frontend/src/core/components/tools/getPdfInfo/shared/KeyValueList.tsx
index e0cd809cc4..55e7e5d12e 100644
--- a/frontend/src/core/components/tools/getPdfInfo/shared/KeyValueList.tsx
+++ b/frontend/src/core/components/tools/getPdfInfo/shared/KeyValueList.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { Group, Stack, Text } from '@mantine/core';
+import React from "react";
+import { Group, Stack, Text } from "@mantine/core";
 
 interface KeyValueListProps {
   obj?: Record<string, unknown> | null;
@@ -8,15 +8,21 @@ interface KeyValueListProps {
 
 const KeyValueList: React.FC<KeyValueListProps> = ({ obj, emptyLabel }) => {
   if (!obj || Object.keys(obj).length === 0) {
-    return <Text size="sm" c="dimmed">{emptyLabel ?? 'None detected'}</Text>;
+    return (
+      <Text size="sm" c="dimmed">
+        {emptyLabel ?? "None detected"}
+      </Text>
+    );
   }
   return (
     <Stack gap={6}>
       {Object.entries(obj).map(([k, v]) => (
-        <Group key={k} wrap="nowrap" align="flex-start" style={{ width: '100%' }}>
-          <Text size="sm" style={{ minWidth: 180, maxWidth: 180, flexShrink: 0 }}>{k}</Text>
-          <Text size="sm" c="dimmed" style={{ wordBreak: 'break-word', overflowWrap: 'break-word', flex: 1 }}>
-            {v == null ? '' : String(v)}
+        <Group key={k} wrap="nowrap" align="flex-start" style={{ width: "100%" }}>
+          <Text size="sm" style={{ minWidth: 180, maxWidth: 180, flexShrink: 0 }}>
+            {k}
+          </Text>
+          <Text size="sm" c="dimmed" style={{ wordBreak: "break-word", overflowWrap: "break-word", flex: 1 }}>
+            {v == null ? "" : String(v)}
           </Text>
         </Group>
       ))}
@@ -25,5 +31,3 @@ const KeyValueList: React.FC<KeyValueListProps> = ({ obj, emptyLabel }) => {
 };
 
 export default KeyValueList;
-
-
diff --git a/frontend/src/core/components/tools/getPdfInfo/shared/ScrollableCodeBlock.tsx b/frontend/src/core/components/tools/getPdfInfo/shared/ScrollableCodeBlock.tsx
index bf04264268..fd01cdaf26 100644
--- a/frontend/src/core/components/tools/getPdfInfo/shared/ScrollableCodeBlock.tsx
+++ b/frontend/src/core/components/tools/getPdfInfo/shared/ScrollableCodeBlock.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import { Code, Text } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
+import React from "react";
+import { Code, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
 
 interface ScrollableCodeBlockProps {
   content: string | null | undefined;
@@ -12,17 +12,13 @@ interface ScrollableCodeBlockProps {
  * A reusable scrollable code block component with consistent styling.
  * Used for displaying large text content like XMP metadata or structure trees.
  */
-const ScrollableCodeBlock: React.FC<ScrollableCodeBlockProps> = ({
-  content,
-  maxHeight = '400px',
-  emptyMessage,
-}) => {
+const ScrollableCodeBlock: React.FC<ScrollableCodeBlockProps> = ({ content, maxHeight = "400px", emptyMessage }) => {
   const { t } = useTranslation();
 
   if (!content) {
     return (
       <Text size="sm" c="dimmed">
-        {emptyMessage ?? t('getPdfInfo.noneDetected', 'None detected')}
+        {emptyMessage ?? t("getPdfInfo.noneDetected", "None detected")}
       </Text>
     );
   }
@@ -31,11 +27,11 @@ const ScrollableCodeBlock: React.FC<ScrollableCodeBlockProps> = ({
     <Code
       block
       style={{
-        whiteSpace: 'pre-wrap',
-        backgroundColor: 'var(--bg-raised)',
-        color: 'var(--text-primary)',
+        whiteSpace: "pre-wrap",
+        backgroundColor: "var(--bg-raised)",
+        color: "var(--text-primary)",
         maxHeight,
-        overflowY: 'auto',
+        overflowY: "auto",
       }}
     >
       {content}
@@ -44,4 +40,3 @@ const ScrollableCodeBlock: React.FC<ScrollableCodeBlockProps> = ({
 };
 
 export default ScrollableCodeBlock;
-
diff --git a/frontend/src/core/components/tools/getPdfInfo/shared/SectionBlock.tsx b/frontend/src/core/components/tools/getPdfInfo/shared/SectionBlock.tsx
index 0faa993f60..fef88e9a75 100644
--- a/frontend/src/core/components/tools/getPdfInfo/shared/SectionBlock.tsx
+++ b/frontend/src/core/components/tools/getPdfInfo/shared/SectionBlock.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { Stack, Text, Divider } from '@mantine/core';
+import React from "react";
+import { Stack, Text, Divider } from "@mantine/core";
 
 interface SectionBlockProps {
   title: string;
@@ -10,7 +10,9 @@ interface SectionBlockProps {
 const SectionBlock: React.FC<SectionBlockProps> = ({ title, anchorId, children }) => {
   return (
     <Stack gap="sm" id={anchorId}>
-      <Text fw={700} size="lg">{title}</Text>
+      <Text fw={700} size="lg">
+        {title}
+      </Text>
       <Divider />
       {children}
     </Stack>
@@ -18,5 +20,3 @@ const SectionBlock: React.FC<SectionBlockProps> = ({ title, anchorId, children }
 };
 
 export default SectionBlock;
-
-
diff --git a/frontend/src/core/components/tools/getPdfInfo/shared/accordionStyles.ts b/frontend/src/core/components/tools/getPdfInfo/shared/accordionStyles.ts
index e974c98450..73e45eee63 100644
--- a/frontend/src/core/components/tools/getPdfInfo/shared/accordionStyles.ts
+++ b/frontend/src/core/components/tools/getPdfInfo/shared/accordionStyles.ts
@@ -1,14 +1,13 @@
-import type { AccordionStylesNames } from '@mantine/core';
-import type { CSSProperties } from 'react';
+import type { AccordionStylesNames } from "@mantine/core";
+import type { CSSProperties } from "react";
 
 type AccordionStyles = Partial<Record<AccordionStylesNames, CSSProperties>>;
 
 export const pdfInfoAccordionStyles: AccordionStyles = {
   item: {
-    backgroundColor: 'var(--accordion-item-bg)',
+    backgroundColor: "var(--accordion-item-bg)",
   },
   control: {
-    backgroundColor: 'transparent',
+    backgroundColor: "transparent",
   },
 };
-
diff --git a/frontend/src/core/components/tools/merge/MergeFileSorter.test.tsx b/frontend/src/core/components/tools/merge/MergeFileSorter.test.tsx
index b60c7565b1..9900809ff2 100644
--- a/frontend/src/core/components/tools/merge/MergeFileSorter.test.tsx
+++ b/frontend/src/core/components/tools/merge/MergeFileSorter.test.tsx
@@ -1,142 +1,140 @@
-import { describe, expect, test, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { MantineProvider } from '@mantine/core';
-import MergeFileSorter from '@app/components/tools/merge/MergeFileSorter';
+import { describe, expect, test, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { MantineProvider } from "@mantine/core";
+import MergeFileSorter from "@app/components/tools/merge/MergeFileSorter";
 
 // Mock useTranslation with predictable return values
 const mockT = vi.fn((key: string) => `mock-${key}`);
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({ t: mockT })
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: mockT }),
 }));
 
 // Wrapper component to provide Mantine context
-const TestWrapper = ({ children }: { children: React.ReactNode }) => (
-  <MantineProvider>{children}</MantineProvider>
-);
+const TestWrapper = ({ children }: { children: React.ReactNode }) => <MantineProvider>{children}</MantineProvider>;
 
-describe('MergeFileSorter', () => {
+describe("MergeFileSorter", () => {
   const mockOnSortFiles = vi.fn();
 
   beforeEach(() => {
     vi.clearAllMocks();
   });
 
-  test('should render sort options dropdown, direction toggle, and sort button', () => {
+  test("should render sort options dropdown, direction toggle, and sort button", () => {
     render(
       <TestWrapper>
         <MergeFileSorter onSortFiles={mockOnSortFiles} />
-      </TestWrapper>
+      </TestWrapper>,
     );
 
     // Should have a select dropdown (Mantine Select uses textbox role)
-    expect(screen.getByRole('textbox')).toBeInTheDocument();
+    expect(screen.getByRole("textbox")).toBeInTheDocument();
 
     // Should have direction toggle button
-    const buttons = screen.getAllByRole('button');
+    const buttons = screen.getAllByRole("button");
     expect(buttons).toHaveLength(2); // ActionIcon + Sort Button
 
     // Should have sort button with text
-    expect(screen.getByText('mock-merge.sortBy.sort')).toBeInTheDocument();
+    expect(screen.getByText("mock-merge.sortBy.sort")).toBeInTheDocument();
   });
 
-  test('should render description text', () => {
+  test("should render description text", () => {
     render(
       <TestWrapper>
         <MergeFileSorter onSortFiles={mockOnSortFiles} />
-      </TestWrapper>
+      </TestWrapper>,
     );
 
-    expect(screen.getByText('mock-merge.sortBy.description')).toBeInTheDocument();
+    expect(screen.getByText("mock-merge.sortBy.description")).toBeInTheDocument();
   });
 
-  test('should have filename selected by default', () => {
+  test("should have filename selected by default", () => {
     render(
       <TestWrapper>
         <MergeFileSorter onSortFiles={mockOnSortFiles} />
-      </TestWrapper>
+      </TestWrapper>,
     );
 
-    const select = screen.getByRole('textbox');
-    expect(select).toHaveValue('mock-merge.sortBy.filename');
+    const select = screen.getByRole("textbox");
+    expect(select).toHaveValue("mock-merge.sortBy.filename");
   });
 
-  test('should show ascending direction by default', () => {
+  test("should show ascending direction by default", () => {
     render(
       <TestWrapper>
         <MergeFileSorter onSortFiles={mockOnSortFiles} />
-      </TestWrapper>
+      </TestWrapper>,
     );
 
     // Should show ascending arrow icon
-    const directionButton = screen.getAllByRole('button')[0];
-    expect(directionButton).toHaveAttribute('title', 'mock-merge.sortBy.ascending');
+    const directionButton = screen.getAllByRole("button")[0];
+    expect(directionButton).toHaveAttribute("title", "mock-merge.sortBy.ascending");
   });
 
-  test('should toggle direction when direction button is clicked', () => {
+  test("should toggle direction when direction button is clicked", () => {
     render(
       <TestWrapper>
         <MergeFileSorter onSortFiles={mockOnSortFiles} />
-      </TestWrapper>
+      </TestWrapper>,
     );
 
-    const directionButton = screen.getAllByRole('button')[0];
+    const directionButton = screen.getAllByRole("button")[0];
 
     // Initially ascending
-    expect(directionButton).toHaveAttribute('title', 'mock-merge.sortBy.ascending');
+    expect(directionButton).toHaveAttribute("title", "mock-merge.sortBy.ascending");
 
     // Click to toggle to descending
     fireEvent.click(directionButton);
-    expect(directionButton).toHaveAttribute('title', 'mock-merge.sortBy.descending');
+    expect(directionButton).toHaveAttribute("title", "mock-merge.sortBy.descending");
 
     // Click again to toggle back to ascending
     fireEvent.click(directionButton);
-    expect(directionButton).toHaveAttribute('title', 'mock-merge.sortBy.ascending');
+    expect(directionButton).toHaveAttribute("title", "mock-merge.sortBy.ascending");
   });
 
-  test('should call onSortFiles with correct parameters when sort button is clicked', () => {
+  test("should call onSortFiles with correct parameters when sort button is clicked", () => {
     render(
       <TestWrapper>
         <MergeFileSorter onSortFiles={mockOnSortFiles} />
-      </TestWrapper>
+      </TestWrapper>,
     );
 
-    const sortButton = screen.getByText('mock-merge.sortBy.sort');
+    const sortButton = screen.getByText("mock-merge.sortBy.sort");
     fireEvent.click(sortButton);
 
     // Should be called with default values (filename, ascending)
-    expect(mockOnSortFiles).toHaveBeenCalledWith('filename', true);
+    expect(mockOnSortFiles).toHaveBeenCalledWith("filename", true);
   });
 
-  test('should call onSortFiles with dateModified when dropdown is changed', () => {
+  test("should call onSortFiles with dateModified when dropdown is changed", () => {
     render(
       <TestWrapper>
         <MergeFileSorter onSortFiles={mockOnSortFiles} />
-      </TestWrapper>
+      </TestWrapper>,
     );
 
     // Open the dropdown by clicking on the current selected value
-    const currentSelection = screen.getByText('mock-merge.sortBy.filename');
+    const currentSelection = screen.getByText("mock-merge.sortBy.filename");
     fireEvent.mouseDown(currentSelection);
-    
+
     // Click on the dateModified option
-    const dateModifiedOption = screen.getByText('mock-merge.sortBy.dateModified');
+    const dateModifiedOption = screen.getByText("mock-merge.sortBy.dateModified");
     fireEvent.click(dateModifiedOption);
 
-    const sortButton = screen.getByText('mock-merge.sortBy.sort');
+    const sortButton = screen.getByText("mock-merge.sortBy.sort");
     fireEvent.click(sortButton);
 
-    expect(mockOnSortFiles).toHaveBeenCalledWith('dateModified', true);
+    expect(mockOnSortFiles).toHaveBeenCalledWith("dateModified", true);
   });
 
-  test('should call onSortFiles with descending direction when toggled', () => {
+  test("should call onSortFiles with descending direction when toggled", () => {
     render(
       <TestWrapper>
         <MergeFileSorter onSortFiles={mockOnSortFiles} />
-      </TestWrapper>
+      </TestWrapper>,
     );
 
-    const directionButton = screen.getAllByRole('button')[0];
-    const sortButton = screen.getByText('mock-merge.sortBy.sort');
+    const directionButton = screen.getAllByRole("button")[0];
+    const sortButton = screen.getByText("mock-merge.sortBy.sort");
 
     // Toggle to descending
     fireEvent.click(directionButton);
@@ -144,23 +142,23 @@ describe('MergeFileSorter', () => {
     // Click sort
     fireEvent.click(sortButton);
 
-    expect(mockOnSortFiles).toHaveBeenCalledWith('filename', false);
+    expect(mockOnSortFiles).toHaveBeenCalledWith("filename", false);
   });
 
-  test('should handle complex user interaction sequence', () => {
+  test("should handle complex user interaction sequence", () => {
     render(
       <TestWrapper>
         <MergeFileSorter onSortFiles={mockOnSortFiles} />
-      </TestWrapper>
+      </TestWrapper>,
     );
 
-    const directionButton = screen.getAllByRole('button')[0];
-    const sortButton = screen.getByText('mock-merge.sortBy.sort');
+    const directionButton = screen.getAllByRole("button")[0];
+    const sortButton = screen.getByText("mock-merge.sortBy.sort");
 
     // 1. Change to dateModified
-    const currentSelection = screen.getByText('mock-merge.sortBy.filename');
+    const currentSelection = screen.getByText("mock-merge.sortBy.filename");
     fireEvent.mouseDown(currentSelection);
-    const dateModifiedOption = screen.getByText('mock-merge.sortBy.dateModified');
+    const dateModifiedOption = screen.getByText("mock-merge.sortBy.dateModified");
     fireEvent.click(dateModifiedOption);
 
     // 2. Toggle to descending
@@ -169,7 +167,7 @@ describe('MergeFileSorter', () => {
     // 3. Click sort
     fireEvent.click(sortButton);
 
-    expect(mockOnSortFiles).toHaveBeenCalledWith('dateModified', false);
+    expect(mockOnSortFiles).toHaveBeenCalledWith("dateModified", false);
 
     // 4. Toggle back to ascending
     fireEvent.click(directionButton);
@@ -177,6 +175,6 @@ describe('MergeFileSorter', () => {
     // 5. Sort again
     fireEvent.click(sortButton);
 
-    expect(mockOnSortFiles).toHaveBeenCalledWith('dateModified', true);
+    expect(mockOnSortFiles).toHaveBeenCalledWith("dateModified", true);
   });
 });
diff --git a/frontend/src/core/components/tools/merge/MergeFileSorter.tsx b/frontend/src/core/components/tools/merge/MergeFileSorter.tsx
index be6d21786e..30ad25a52a 100644
--- a/frontend/src/core/components/tools/merge/MergeFileSorter.tsx
+++ b/frontend/src/core/components/tools/merge/MergeFileSorter.tsx
@@ -1,27 +1,24 @@
-import React, { useState } from 'react';
-import { Group, Button, Text, ActionIcon, Stack, Select } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import SortIcon from '@mui/icons-material/Sort';
-import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward';
-import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward';
+import React, { useState } from "react";
+import { Group, Button, Text, ActionIcon, Stack, Select } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import SortIcon from "@mui/icons-material/Sort";
+import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
+import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
 import { Z_INDEX_AUTOMATE_DROPDOWN } from "@app/styles/zIndex";
 
 interface MergeFileSorterProps {
-  onSortFiles: (sortType: 'filename' | 'dateModified', ascending: boolean) => void;
+  onSortFiles: (sortType: "filename" | "dateModified", ascending: boolean) => void;
   disabled?: boolean;
 }
 
-const MergeFileSorter: React.FC<MergeFileSorterProps> = ({
-  onSortFiles,
-  disabled = false,
-}) => {
+const MergeFileSorter: React.FC<MergeFileSorterProps> = ({ onSortFiles, disabled = false }) => {
   const { t } = useTranslation();
-  const [sortType, setSortType] = useState<'filename' | 'dateModified'>('filename');
+  const [sortType, setSortType] = useState<"filename" | "dateModified">("filename");
   const [ascending, setAscending] = useState(true);
 
   const sortOptions = [
-    { value: 'filename', label: t('merge.sortBy.filename', 'File Name') },
-    { value: 'dateModified', label: t('merge.sortBy.dateModified', 'Date Modified') },
+    { value: "filename", label: t("merge.sortBy.filename", "File Name") },
+    { value: "dateModified", label: t("merge.sortBy.dateModified", "Date Modified") },
   ];
 
   const handleSort = () => {
@@ -35,17 +32,17 @@ const MergeFileSorter: React.FC<MergeFileSorterProps> = ({
   return (
     <Stack gap="xs">
       <Text size="sm" fw={500}>
-        {t('merge.sortBy.description', "Files will be merged in the order they're selected. Drag to reorder or sort below.")}
+        {t("merge.sortBy.description", "Files will be merged in the order they're selected. Drag to reorder or sort below.")}
       </Text>
       <Stack gap="xs">
         <Group gap="xs" align="end" justify="space-between">
           <Select
             data={sortOptions}
             value={sortType}
-            onChange={(value) => setSortType(value as 'filename' | 'dateModified')}
+            onChange={(value) => setSortType(value as "filename" | "dateModified")}
             disabled={disabled}
-            label={t('merge.sortBy.label', 'Sort By')}
-            size='xs'
+            label={t("merge.sortBy.label", "Sort By")}
+            size="xs"
             style={{ flex: 1 }}
             comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
           />
@@ -55,21 +52,14 @@ const MergeFileSorter: React.FC<MergeFileSorterProps> = ({
             size="md"
             onClick={handleDirectionToggle}
             disabled={disabled}
-            title={ascending ? t('merge.sortBy.ascending', 'Ascending') : t('merge.sortBy.descending', 'Descending')}
+            title={ascending ? t("merge.sortBy.ascending", "Ascending") : t("merge.sortBy.descending", "Descending")}
           >
             {ascending ? <ArrowUpwardIcon /> : <ArrowDownwardIcon />}
           </ActionIcon>
         </Group>
 
-        <Button
-          variant="light"
-          size="xs"
-          leftSection={<SortIcon />}
-          onClick={handleSort}
-          disabled={disabled}
-          fullWidth
-        >
-          {t('merge.sortBy.sort', 'Sort')}
+        <Button variant="light" size="xs" leftSection={<SortIcon />} onClick={handleSort} disabled={disabled} fullWidth>
+          {t("merge.sortBy.sort", "Sort")}
         </Button>
       </Stack>
     </Stack>
diff --git a/frontend/src/core/components/tools/merge/MergeSettings.test.tsx b/frontend/src/core/components/tools/merge/MergeSettings.test.tsx
index c467f70307..93dec1b634 100644
--- a/frontend/src/core/components/tools/merge/MergeSettings.test.tsx
+++ b/frontend/src/core/components/tools/merge/MergeSettings.test.tsx
@@ -1,21 +1,19 @@
-import { describe, expect, test, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { MantineProvider } from '@mantine/core';
-import MergeSettings from '@app/components/tools/merge/MergeSettings';
-import { MergeParameters } from '@app/hooks/tools/merge/useMergeParameters';
+import { describe, expect, test, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { MantineProvider } from "@mantine/core";
+import MergeSettings from "@app/components/tools/merge/MergeSettings";
+import { MergeParameters } from "@app/hooks/tools/merge/useMergeParameters";
 
 // Mock useTranslation with predictable return values
 const mockT = vi.fn((key: string) => `mock-${key}`);
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({ t: mockT })
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: mockT }),
 }));
 
 // Wrapper component to provide Mantine context
-const TestWrapper = ({ children }: { children: React.ReactNode }) => (
-  <MantineProvider>{children}</MantineProvider>
-);
+const TestWrapper = ({ children }: { children: React.ReactNode }) => <MantineProvider>{children}</MantineProvider>;
 
-describe('MergeSettings', () => {
+describe("MergeSettings", () => {
   const defaultParameters: MergeParameters = {
     removeDigitalSignature: false,
     generateTableOfContents: false,
@@ -27,74 +25,64 @@ describe('MergeSettings', () => {
     vi.clearAllMocks();
   });
 
-  test('should render both merge option checkboxes', () => {
+  test("should render both merge option checkboxes", () => {
     render(
       <TestWrapper>
-        <MergeSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <MergeSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
     // Should render one checkbox for each parameter
     const expectedCheckboxCount = Object.keys(defaultParameters).length;
-    const checkboxes = screen.getAllByRole('checkbox');
+    const checkboxes = screen.getAllByRole("checkbox");
     expect(checkboxes).toHaveLength(expectedCheckboxCount);
   });
 
-  test('should show correct initial checkbox states based on parameters', () => {
+  test("should show correct initial checkbox states based on parameters", () => {
     render(
       <TestWrapper>
-        <MergeSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <MergeSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
-    const checkboxes = screen.getAllByRole('checkbox');
+    const checkboxes = screen.getAllByRole("checkbox");
 
     // Both checkboxes should be unchecked initially
-    checkboxes.forEach(checkbox => {
+    checkboxes.forEach((checkbox) => {
       expect(checkbox).not.toBeChecked();
     });
   });
 
-  test('should call onParameterChange with correct parameters when checkboxes are clicked', () => {
+  test("should call onParameterChange with correct parameters when checkboxes are clicked", () => {
     render(
       <TestWrapper>
-        <MergeSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <MergeSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
-    const checkboxes = screen.getAllByRole('checkbox');
+    const checkboxes = screen.getAllByRole("checkbox");
 
     // Click the first checkbox (removeDigitalSignature - should toggle from false to true)
     fireEvent.click(checkboxes[0]);
-    expect(mockOnParameterChange).toHaveBeenCalledWith('removeDigitalSignature', true);
+    expect(mockOnParameterChange).toHaveBeenCalledWith("removeDigitalSignature", true);
 
     // Click the second checkbox (generateTableOfContents - should toggle from false to true)
     fireEvent.click(checkboxes[1]);
-    expect(mockOnParameterChange).toHaveBeenCalledWith('generateTableOfContents', true);
+    expect(mockOnParameterChange).toHaveBeenCalledWith("generateTableOfContents", true);
   });
 
-  test('should call translation function with correct keys', () => {
+  test("should call translation function with correct keys", () => {
     render(
       <TestWrapper>
-        <MergeSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <MergeSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
     // Verify that translation keys are being called
-    expect(mockT).toHaveBeenCalledWith('merge.removeDigitalSignature.label', 'Remove digital signature in the merged file?');
-    expect(mockT).toHaveBeenCalledWith('merge.generateTableOfContents.label', 'Generate table of contents in the merged file?');
+    expect(mockT).toHaveBeenCalledWith("merge.removeDigitalSignature.label", "Remove digital signature in the merged file?");
+    expect(mockT).toHaveBeenCalledWith(
+      "merge.generateTableOfContents.label",
+      "Generate table of contents in the merged file?",
+    );
   });
-  
 });
diff --git a/frontend/src/core/components/tools/merge/MergeSettings.tsx b/frontend/src/core/components/tools/merge/MergeSettings.tsx
index e154d4ddbe..feb64215ef 100644
--- a/frontend/src/core/components/tools/merge/MergeSettings.tsx
+++ b/frontend/src/core/components/tools/merge/MergeSettings.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
-import { Stack, Checkbox } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { MergeParameters } from '@app/hooks/tools/merge/useMergeParameters';
+import React from "react";
+import { Stack, Checkbox } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { MergeParameters } from "@app/hooks/tools/merge/useMergeParameters";
 
 interface MergeSettingsProps {
   parameters: MergeParameters;
@@ -9,26 +9,22 @@ interface MergeSettingsProps {
   disabled?: boolean;
 }
 
-const MergeSettings: React.FC<MergeSettingsProps> = ({
-  parameters,
-  onParameterChange,
-  disabled = false,
-}) => {
+const MergeSettings: React.FC<MergeSettingsProps> = ({ parameters, onParameterChange, disabled = false }) => {
   const { t } = useTranslation();
 
   return (
     <Stack gap="md">
       <Checkbox
-        label={t('merge.removeDigitalSignature.label', 'Remove digital signature in the merged file?')}
+        label={t("merge.removeDigitalSignature.label", "Remove digital signature in the merged file?")}
         checked={parameters.removeDigitalSignature}
-        onChange={(event) => onParameterChange('removeDigitalSignature', event.currentTarget.checked)}
+        onChange={(event) => onParameterChange("removeDigitalSignature", event.currentTarget.checked)}
         disabled={disabled}
       />
 
       <Checkbox
-        label={t('merge.generateTableOfContents.label', 'Generate table of contents in the merged file?')}
+        label={t("merge.generateTableOfContents.label", "Generate table of contents in the merged file?")}
         checked={parameters.generateTableOfContents}
-        onChange={(event) => onParameterChange('generateTableOfContents', event.currentTarget.checked)}
+        onChange={(event) => onParameterChange("generateTableOfContents", event.currentTarget.checked)}
         disabled={disabled}
       />
     </Stack>
diff --git a/frontend/src/core/components/tools/ocr/AdvancedOCRSettings.tsx b/frontend/src/core/components/tools/ocr/AdvancedOCRSettings.tsx
index ca4d5fc242..07688c808b 100644
--- a/frontend/src/core/components/tools/ocr/AdvancedOCRSettings.tsx
+++ b/frontend/src/core/components/tools/ocr/AdvancedOCRSettings.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
-import { Stack, Text, Checkbox } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { OCRParameters } from '@app/hooks/tools/ocr/useOCRParameters';
+import React from "react";
+import { Stack, Text, Checkbox } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { OCRParameters } from "@app/hooks/tools/ocr/useOCRParameters";
 
 export interface AdvancedOCRParameters {
   advancedOptions: string[];
@@ -22,43 +22,43 @@ interface AdvancedOCRSettingsProps {
 
 const AdvancedOCRSettings: React.FC<AdvancedOCRSettingsProps> = ({
   advancedOptions,
-  ocrRenderType = 'hocr',
+  ocrRenderType = "hocr",
   onParameterChange,
-  disabled = false
+  disabled = false,
 }) => {
   const { t } = useTranslation();
 
   // Define the advanced options available
   const advancedOptionsData: AdvancedOption[] = [
-    { value: 'compatibilityMode', label: t('ocr.settings.compatibilityMode.label', 'Compatibility Mode'), isSpecial: true },
-    { value: 'sidecar', label: t('ocr.settings.advancedOptions.sidecar', 'Create a text file'), isSpecial: false },
-    { value: 'deskew', label: t('ocr.settings.advancedOptions.deskew', 'Deskew pages'), isSpecial: false },
-    { value: 'clean', label: t('ocr.settings.advancedOptions.clean', 'Clean input file'), isSpecial: false },
-    { value: 'cleanFinal', label: t('ocr.settings.advancedOptions.cleanFinal', 'Clean final output'), isSpecial: false },
+    { value: "compatibilityMode", label: t("ocr.settings.compatibilityMode.label", "Compatibility Mode"), isSpecial: true },
+    { value: "sidecar", label: t("ocr.settings.advancedOptions.sidecar", "Create a text file"), isSpecial: false },
+    { value: "deskew", label: t("ocr.settings.advancedOptions.deskew", "Deskew pages"), isSpecial: false },
+    { value: "clean", label: t("ocr.settings.advancedOptions.clean", "Clean input file"), isSpecial: false },
+    { value: "cleanFinal", label: t("ocr.settings.advancedOptions.cleanFinal", "Clean final output"), isSpecial: false },
   ];
 
   // Handle individual checkbox changes
   const handleCheckboxChange = (optionValue: string, checked: boolean) => {
-    const option = advancedOptionsData.find(opt => opt.value === optionValue);
+    const option = advancedOptionsData.find((opt) => opt.value === optionValue);
 
     if (option?.isSpecial) {
       // Handle special options (like compatibility mode) differently
-      if (optionValue === 'compatibilityMode') {
-        onParameterChange('ocrRenderType', checked ? 'sandwich' : 'hocr');
+      if (optionValue === "compatibilityMode") {
+        onParameterChange("ocrRenderType", checked ? "sandwich" : "hocr");
       }
     } else {
       // Handle regular advanced options
       const newOptions = checked
         ? [...advancedOptions, optionValue]
-        : advancedOptions.filter(option => option !== optionValue);
-      onParameterChange('additionalOptions', newOptions);
+        : advancedOptions.filter((option) => option !== optionValue);
+      onParameterChange("additionalOptions", newOptions);
     }
   };
 
   // Check if a special option is selected
   const isSpecialOptionSelected = (optionValue: string) => {
-    if (optionValue === 'compatibilityMode') {
-      return ocrRenderType === 'sandwich';
+    if (optionValue === "compatibilityMode") {
+      return ocrRenderType === "sandwich";
     }
     return false;
   };
@@ -67,7 +67,7 @@ const AdvancedOCRSettings: React.FC<AdvancedOCRSettingsProps> = ({
     <Stack gap="md">
       <div>
         <Text size="sm" fw={500} mb="md">
-          {t('ocr.settings.advancedOptions.label', 'Processing Options')}
+          {t("ocr.settings.advancedOptions.label", "Processing Options")}
         </Text>
 
         <Stack gap="sm">
diff --git a/frontend/src/core/components/tools/ocr/LanguagePicker.module.css b/frontend/src/core/components/tools/ocr/LanguagePicker.module.css
index c44e752915..3dc22f589a 100644
--- a/frontend/src/core/components/tools/ocr/LanguagePicker.module.css
+++ b/frontend/src/core/components/tools/ocr/LanguagePicker.module.css
@@ -83,8 +83,6 @@
   background-color: var(--mantine-color-dark-5);
 }
 
-
-
 /* Additional helper classes for the component */
 .languagePickerTarget {
   width: 100%;
@@ -123,4 +121,4 @@
 /* Dark mode link */
 [data-mantine-color-scheme="dark"] .languagePickerLink {
   color: var(--mantine-color-blue-4);
-} 
\ No newline at end of file
+}
diff --git a/frontend/src/core/components/tools/ocr/LanguagePicker.tsx b/frontend/src/core/components/tools/ocr/LanguagePicker.tsx
index 7e023e9ccd..f7e406ab2b 100644
--- a/frontend/src/core/components/tools/ocr/LanguagePicker.tsx
+++ b/frontend/src/core/components/tools/ocr/LanguagePicker.tsx
@@ -1,9 +1,9 @@
-import React, { useState, useEffect } from 'react';
-import { Text, Loader } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { getAutoOcrLanguage, getBrowserLanguagesForOcr, getOcrDisplayName } from '@app/utils/languageMapping';
-import apiClient from '@app/services/apiClient';
-import DropdownListWithFooter, { DropdownItem } from '@app/components/shared/DropdownListWithFooter';
+import React, { useState, useEffect } from "react";
+import { Text, Loader } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { getAutoOcrLanguage, getBrowserLanguagesForOcr, getOcrDisplayName } from "@app/utils/languageMapping";
+import apiClient from "@app/services/apiClient";
+import DropdownListWithFooter, { DropdownItem } from "@app/components/shared/DropdownListWithFooter";
 
 export interface LanguageOption {
   value: string;
@@ -23,10 +23,10 @@ export interface LanguagePickerProps {
 const LanguagePicker: React.FC<LanguagePickerProps> = ({
   value,
   onChange,
-  placeholder = 'Select languages',
+  placeholder = "Select languages",
   disabled = false,
   label,
-  languagesEndpoint = '/api/v1/ui-data/ocr-pdf',
+  languagesEndpoint = "/api/v1/ui-data/ocr-pdf",
   autoFillFromBrowserLanguage = true,
 }) => {
   const { t, i18n } = useTranslation();
@@ -40,9 +40,8 @@ const LanguagePicker: React.FC<LanguagePickerProps> = ({
       try {
         const { data } = await apiClient.get<{ languages: string[] }>(languagesEndpoint);
 
-        const displayNames = typeof Intl.DisplayNames !== 'undefined'
-          ? new Intl.DisplayNames([i18n.language], { type: 'language' })
-          : null;
+        const displayNames =
+          typeof Intl.DisplayNames !== "undefined" ? new Intl.DisplayNames([i18n.language], { type: "language" }) : null;
 
         const languageOptions = [...new Set(data.languages)]
           .map((lang) => {
@@ -54,31 +53,27 @@ const LanguagePicker: React.FC<LanguagePickerProps> = ({
             const hasKeyTranslation = translatedFromKey !== langKey;
 
             const intlTranslatedName = displayNames
-              ? browserLanguageCodes
-                  .map((code) => displayNames.of(code))
-                  .find((name): name is string => Boolean(name))
+              ? browserLanguageCodes.map((code) => displayNames.of(code)).find((name): name is string => Boolean(name))
               : null;
 
             const translatedName =
-              (hasKeyTranslation ? translatedFromKey : null)
-              || intlTranslatedName
-              || t(`ocr.languages.${lang}`, displayName);
+              (hasKeyTranslation ? translatedFromKey : null) || intlTranslatedName || t(`ocr.languages.${lang}`, displayName);
 
             return {
               value: lang,
               name: translatedName,
-              label: translatedName
+              label: translatedName,
             };
           })
           .sort((a, b) => a.name.localeCompare(b.name, i18n.language));
 
         setAvailableLanguages(languageOptions);
       } catch (error) {
-        console.error('[LanguagePicker] Fetch failed with error:', error);
-        console.error('[LanguagePicker] Error details:', {
-          name: error instanceof Error ? error.name : 'Unknown',
+        console.error("[LanguagePicker] Fetch failed with error:", error);
+        console.error("[LanguagePicker] Error details:", {
+          name: error instanceof Error ? error.name : "Unknown",
           message: error instanceof Error ? error.message : String(error),
-          stack: error instanceof Error ? error.stack : undefined
+          stack: error instanceof Error ? error.stack : undefined,
         });
       } finally {
         setIsLoadingLanguages(false);
@@ -90,30 +85,41 @@ const LanguagePicker: React.FC<LanguagePickerProps> = ({
 
   // Auto-fill OCR language based on browser language when languages are loaded
   useEffect(() => {
-    const shouldAutoFillLanguage = autoFillFromBrowserLanguage && !isLoadingLanguages && availableLanguages.length > 0 && !hasAutoFilled && value.length === 0;
+    const shouldAutoFillLanguage =
+      autoFillFromBrowserLanguage &&
+      !isLoadingLanguages &&
+      availableLanguages.length > 0 &&
+      !hasAutoFilled &&
+      value.length === 0;
 
     if (shouldAutoFillLanguage) {
       // Use the comprehensive language mapping from languageMapping.ts
       const suggestedOcrLanguages = getAutoOcrLanguage(i18n.language);
-      
+
       if (suggestedOcrLanguages.length > 0) {
         // Find the first suggested language that's available in the backend
-        const matchingLanguage = availableLanguages.find(lang => 
-          suggestedOcrLanguages.includes(lang.value)
-        );
-        
+        const matchingLanguage = availableLanguages.find((lang) => suggestedOcrLanguages.includes(lang.value));
+
         if (matchingLanguage) {
           onChange([matchingLanguage.value]);
         }
       }
-      
+
       setHasAutoFilled(true);
     }
-  }, [autoFillFromBrowserLanguage, isLoadingLanguages, availableLanguages, hasAutoFilled, value.length, i18n.language, onChange]);
+  }, [
+    autoFillFromBrowserLanguage,
+    isLoadingLanguages,
+    availableLanguages,
+    hasAutoFilled,
+    value.length,
+    i18n.language,
+    onChange,
+  ]);
 
   if (isLoadingLanguages) {
     return (
-      <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
+      <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
         <Loader size="xs" />
         <Text size="sm">Loading available languages...</Text>
       </div>
@@ -122,23 +128,23 @@ const LanguagePicker: React.FC<LanguagePickerProps> = ({
 
   const footer = (
     <>
-    <div className="flex flex-col items-center gap-1 text-center">
-      <Text size="xs" c="dimmed" className="text-center">
-        {t('ocr.languagePicker.additionalLanguages', 'Looking for additional languages?')}
-      </Text>
-      <Text 
-        size="xs" 
-        style={{ 
-          color: '#3b82f6', 
-          cursor: 'pointer',
-          textDecoration: 'underline',
-          textAlign: 'center'
-        }}
-        onClick={() => window.open('https://docs.stirlingpdf.com/Configuration/OCR', '_blank')}
-      >
-        {t('ocr.languagePicker.viewSetupGuide', 'View setup guide →')}
-      </Text>
-    </div>
+      <div className="flex flex-col items-center gap-1 text-center">
+        <Text size="xs" c="dimmed" className="text-center">
+          {t("ocr.languagePicker.additionalLanguages", "Looking for additional languages?")}
+        </Text>
+        <Text
+          size="xs"
+          style={{
+            color: "#3b82f6",
+            cursor: "pointer",
+            textDecoration: "underline",
+            textAlign: "center",
+          }}
+          onClick={() => window.open("https://docs.stirlingpdf.com/Configuration/OCR", "_blank")}
+        >
+          {t("ocr.languagePicker.viewSetupGuide", "View setup guide →")}
+        </Text>
+      </div>
     </>
   );
 
@@ -158,4 +164,4 @@ const LanguagePicker: React.FC<LanguagePickerProps> = ({
   );
 };
 
-export default LanguagePicker; 
+export default LanguagePicker;
diff --git a/frontend/src/core/components/tools/ocr/OCRSettings.tsx b/frontend/src/core/components/tools/ocr/OCRSettings.tsx
index 487d970705..19fc82878d 100644
--- a/frontend/src/core/components/tools/ocr/OCRSettings.tsx
+++ b/frontend/src/core/components/tools/ocr/OCRSettings.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
-import { Stack, Select, Divider } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import LanguagePicker from '@app/components/tools/ocr/LanguagePicker';
-import { OCRParameters } from '@app/hooks/tools/ocr/useOCRParameters';
-import { Z_INDEX_AUTOMATE_DROPDOWN } from '@app/styles/zIndex';
+import React from "react";
+import { Stack, Select, Divider } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import LanguagePicker from "@app/components/tools/ocr/LanguagePicker";
+import { OCRParameters } from "@app/hooks/tools/ocr/useOCRParameters";
+import { Z_INDEX_AUTOMATE_DROPDOWN } from "@app/styles/zIndex";
 
 interface OCRSettingsProps {
   parameters: OCRParameters;
@@ -11,24 +11,19 @@ interface OCRSettingsProps {
   disabled?: boolean;
 }
 
-const OCRSettings: React.FC<OCRSettingsProps> = ({
-  parameters,
-  onParameterChange,
-  disabled = false
-}) => {
+const OCRSettings: React.FC<OCRSettingsProps> = ({ parameters, onParameterChange, disabled = false }) => {
   const { t } = useTranslation();
 
   return (
     <Stack gap="md">
-
       <Select
-        label={t('ocr.settings.ocrMode.label', 'OCR Mode')}
+        label={t("ocr.settings.ocrMode.label", "OCR Mode")}
         value={parameters.ocrType}
-        onChange={(value) => onParameterChange('ocrType', value || 'skip-text')}
+        onChange={(value) => onParameterChange("ocrType", value || "skip-text")}
         data={[
-          { value: 'skip-text', label: t('ocr.settings.ocrMode.auto', 'Auto (skip text layers)') },
-          { value: 'force-ocr', label: t('ocr.settings.ocrMode.force', 'Force (re-OCR all, replace text)') },
-          { value: 'Normal', label: t('ocr.settings.ocrMode.strict', 'Strict (abort if text found)') },
+          { value: "skip-text", label: t("ocr.settings.ocrMode.auto", "Auto (skip text layers)") },
+          { value: "force-ocr", label: t("ocr.settings.ocrMode.force", "Force (re-OCR all, replace text)") },
+          { value: "Normal", label: t("ocr.settings.ocrMode.strict", "Strict (abort if text found)") },
         ]}
         disabled={disabled}
         comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
@@ -38,10 +33,10 @@ const OCRSettings: React.FC<OCRSettingsProps> = ({
 
       <LanguagePicker
         value={parameters.languages || []}
-        onChange={(value) => onParameterChange('languages', value)}
-        placeholder={t('ocr.settings.languages.placeholder', 'Select languages')}
+        onChange={(value) => onParameterChange("languages", value)}
+        placeholder={t("ocr.settings.languages.placeholder", "Select languages")}
         disabled={disabled}
-        label={t('ocr.settings.languages.label', 'Languages')}
+        label={t("ocr.settings.languages.label", "Languages")}
       />
     </Stack>
   );
diff --git a/frontend/src/core/components/tools/overlayPdfs/OverlayPdfsSettings.tsx b/frontend/src/core/components/tools/overlayPdfs/OverlayPdfsSettings.tsx
index 512dc6da4d..eb0daf3edc 100644
--- a/frontend/src/core/components/tools/overlayPdfs/OverlayPdfsSettings.tsx
+++ b/frontend/src/core/components/tools/overlayPdfs/OverlayPdfsSettings.tsx
@@ -1,9 +1,9 @@
-import { Stack, Text, Group, Select, SegmentedControl, NumberInput, Button, ActionIcon, Divider } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { type OverlayPdfsParameters, type OverlayMode } from '@app/hooks/tools/overlayPdfs/useOverlayPdfsParameters';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { useFilesModalContext } from '@app/contexts/FilesModalContext';
-import styles from '@app/components/tools/overlayPdfs/OverlayPdfsSettings.module.css';
+import { Stack, Text, Group, Select, SegmentedControl, NumberInput, Button, ActionIcon, Divider } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { type OverlayPdfsParameters, type OverlayMode } from "@app/hooks/tools/overlayPdfs/useOverlayPdfsParameters";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { useFilesModalContext } from "@app/contexts/FilesModalContext";
+import styles from "@app/components/tools/overlayPdfs/OverlayPdfsSettings.module.css";
 import { Z_INDEX_AUTOMATE_DROPDOWN } from "@app/styles/zIndex";
 
 interface OverlayPdfsSettingsProps {
@@ -17,20 +17,23 @@ export default function OverlayPdfsSettings({ parameters, onParameterChange, dis
   const { openFilesModal } = useFilesModalContext();
 
   const handleOverlayFilesChange = (files: File[]) => {
-    onParameterChange('overlayFiles', files);
+    onParameterChange("overlayFiles", files);
     // Reset counts to match number of files if in FixedRepeatOverlay
-    if (parameters.overlayMode === 'FixedRepeatOverlay') {
-      const nextCounts = files.map((_, i) => parameters.counts[i] && parameters.counts[i] > 0 ? parameters.counts[i] : 1);
-      onParameterChange('counts', nextCounts);
+    if (parameters.overlayMode === "FixedRepeatOverlay") {
+      const nextCounts = files.map((_, i) => (parameters.counts[i] && parameters.counts[i] > 0 ? parameters.counts[i] : 1));
+      onParameterChange("counts", nextCounts);
     }
   };
 
   const handleModeChange = (mode: OverlayMode) => {
-    onParameterChange('overlayMode', mode);
-    if (mode !== 'FixedRepeatOverlay') {
-      onParameterChange('counts', []);
+    onParameterChange("overlayMode", mode);
+    if (mode !== "FixedRepeatOverlay") {
+      onParameterChange("counts", []);
     } else if (parameters.overlayFiles?.length > 0) {
-      onParameterChange('counts', parameters.overlayFiles.map((_, i) => parameters.counts[i] && parameters.counts[i] > 0 ? parameters.counts[i] : 1));
+      onParameterChange(
+        "counts",
+        parameters.overlayFiles.map((_, i) => (parameters.counts[i] && parameters.counts[i] > 0 ? parameters.counts[i] : 1)),
+      );
     }
   };
 
@@ -39,23 +42,24 @@ export default function OverlayPdfsSettings({ parameters, onParameterChange, dis
     openFilesModal({
       customHandler: (files: File[]) => {
         handleOverlayFilesChange([...(parameters.overlayFiles || []), ...files]);
-      }
+      },
     });
   };
 
   return (
     <Stack gap="md">
-
       <Stack gap="xs">
-        <Text size="sm" fw={500}>{t('overlay-pdfs.mode.label', 'Overlay Mode')}</Text>
+        <Text size="sm" fw={500}>
+          {t("overlay-pdfs.mode.label", "Overlay Mode")}
+        </Text>
         <Select
           data={[
-            { value: 'SequentialOverlay', label: t('overlay-pdfs.mode.sequential', 'Sequential Overlay') },
-            { value: 'InterleavedOverlay', label: t('overlay-pdfs.mode.interleaved', 'Interleaved Overlay') },
-            { value: 'FixedRepeatOverlay', label: t('overlay-pdfs.mode.fixedRepeat', 'Fixed Repeat Overlay') },
+            { value: "SequentialOverlay", label: t("overlay-pdfs.mode.sequential", "Sequential Overlay") },
+            { value: "InterleavedOverlay", label: t("overlay-pdfs.mode.interleaved", "Interleaved Overlay") },
+            { value: "FixedRepeatOverlay", label: t("overlay-pdfs.mode.fixedRepeat", "Fixed Repeat Overlay") },
           ]}
           value={parameters.overlayMode}
-          onChange={(v) => handleModeChange((v || 'SequentialOverlay') as OverlayMode)}
+          onChange={(v) => handleModeChange((v || "SequentialOverlay") as OverlayMode)}
           disabled={disabled}
           comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
         />
@@ -64,29 +68,33 @@ export default function OverlayPdfsSettings({ parameters, onParameterChange, dis
       <Divider />
 
       <Stack gap="xs">
-        <Text size="sm" fw={500}>{t('overlay-pdfs.position.label', 'Overlay Position')}</Text>
+        <Text size="sm" fw={500}>
+          {t("overlay-pdfs.position.label", "Overlay Position")}
+        </Text>
         <SegmentedControl
           value={String(parameters.overlayPosition)}
-          onChange={(v) => onParameterChange('overlayPosition', (v === '1' ? 1 : 0) as 0 | 1)}
+          onChange={(v) => onParameterChange("overlayPosition", (v === "1" ? 1 : 0) as 0 | 1)}
           data={[
-            { label: t('overlay-pdfs.position.foreground', 'Foreground'), value: '0' },
-            { label: t('overlay-pdfs.position.background', 'Background'), value: '1' },
+            { label: t("overlay-pdfs.position.foreground", "Foreground"), value: "0" },
+            { label: t("overlay-pdfs.position.background", "Background"), value: "1" },
           ]}
           disabled={disabled}
         />
       </Stack>
 
-      {parameters.overlayMode === 'FixedRepeatOverlay' && (
+      {parameters.overlayMode === "FixedRepeatOverlay" && (
         <>
           <Divider />
           <Stack gap="xs">
-            <Text size="sm" fw={500}>{t('overlay-pdfs.counts.label', 'Overlay Counts')}</Text>
+            <Text size="sm" fw={500}>
+              {t("overlay-pdfs.counts.label", "Overlay Counts")}
+            </Text>
             {parameters.overlayFiles?.length > 0 ? (
               <Stack gap="xs">
                 {parameters.overlayFiles.map((_, index) => (
                   <Group key={index} gap="xs" wrap="nowrap">
                     <Text size="sm" className={styles.countLabel}>
-                      {t('overlay-pdfs.counts.item', 'Count for file')} {index + 1}
+                      {t("overlay-pdfs.counts.item", "Count for file")} {index + 1}
                     </Text>
                     <NumberInput
                       min={1}
@@ -95,7 +103,7 @@ export default function OverlayPdfsSettings({ parameters, onParameterChange, dis
                       onChange={(value) => {
                         const next = [...(parameters.counts || [])];
                         next[index] = Number(value) || 1;
-                        onParameterChange('counts', next);
+                        onParameterChange("counts", next);
                       }}
                       disabled={disabled}
                     />
@@ -104,7 +112,7 @@ export default function OverlayPdfsSettings({ parameters, onParameterChange, dis
               </Stack>
             ) : (
               <Text size="sm" c="dimmed">
-                {t('overlay-pdfs.counts.noFiles', 'Add overlay files to configure counts')}
+                {t("overlay-pdfs.counts.noFiles", "Add overlay files to configure counts")}
               </Text>
             )}
           </Stack>
@@ -114,7 +122,9 @@ export default function OverlayPdfsSettings({ parameters, onParameterChange, dis
       <Divider />
 
       <Stack gap="xs">
-        <Text size="sm" fw={500}>{t('overlay-pdfs.overlayFiles.label', 'Overlay Files')}</Text>
+        <Text size="sm" fw={500}>
+          {t("overlay-pdfs.overlayFiles.label", "Overlay Files")}
+        </Text>
         <Button
           size="xs"
           color="blue"
@@ -124,55 +134,47 @@ export default function OverlayPdfsSettings({ parameters, onParameterChange, dis
           fullWidth
         >
           {parameters.overlayFiles?.length > 0
-            ? t('overlay-pdfs.overlayFiles.addMore', 'Add more PDFs...')
-            : t('overlay-pdfs.overlayFiles.placeholder', 'Choose PDF(s)...')}
+            ? t("overlay-pdfs.overlayFiles.addMore", "Add more PDFs...")
+            : t("overlay-pdfs.overlayFiles.placeholder", "Choose PDF(s)...")}
         </Button>
 
-        {parameters.overlayFiles?.length > 0 && (() => {
-          return (
-            <div className={styles.fileListContainer}>
-              <Stack gap="xs">
-                {parameters.overlayFiles.map((file, index) => (
-                  <Group
-                    key={index}
-                    justify="space-between"
-                    p="xs"
-                    className={styles.fileItem}
-                  >
-                    <Group gap="xs" className={styles.fileGroup}>
-                      <div className={styles.fileNameContainer}>
-                        <div
-                          className={styles.fileName}
-                          title={file.name}
-                        >
-                          {file.name}
+        {parameters.overlayFiles?.length > 0 &&
+          (() => {
+            return (
+              <div className={styles.fileListContainer}>
+                <Stack gap="xs">
+                  {parameters.overlayFiles.map((file, index) => (
+                    <Group key={index} justify="space-between" p="xs" className={styles.fileItem}>
+                      <Group gap="xs" className={styles.fileGroup}>
+                        <div className={styles.fileNameContainer}>
+                          <div className={styles.fileName} title={file.name}>
+                            {file.name}
+                          </div>
                         </div>
-                      </div>
-                      <Text size="xs" c="dimmed" className={styles.fileSize}>
-                        ({(file.size / 1024).toFixed(1)} KB)
-                      </Text>
+                        <Text size="xs" c="dimmed" className={styles.fileSize}>
+                          ({(file.size / 1024).toFixed(1)} KB)
+                        </Text>
+                      </Group>
+                      <ActionIcon
+                        size="sm"
+                        variant="subtle"
+                        color="red"
+                        className={styles.removeButton}
+                        onClick={() => {
+                          const next = (parameters.overlayFiles || []).filter((_, i) => i !== index);
+                          handleOverlayFilesChange(next);
+                        }}
+                        disabled={disabled}
+                      >
+                        <LocalIcon icon="close-rounded" width="14" height="14" />
+                      </ActionIcon>
                     </Group>
-                    <ActionIcon
-                      size="sm"
-                      variant="subtle"
-                      color="red"
-                      className={styles.removeButton}
-                      onClick={() => {
-                        const next = (parameters.overlayFiles || []).filter((_, i) => i !== index);
-                        handleOverlayFilesChange(next);
-                      }}
-                      disabled={disabled}
-                    >
-                      <LocalIcon icon="close-rounded" width="14" height="14" />
-                    </ActionIcon>
-                  </Group>
-                ))}
-              </Stack>
-            </div>
-          );
-        })()}
+                  ))}
+                </Stack>
+              </div>
+            );
+          })()}
       </Stack>
-
     </Stack>
   );
 }
diff --git a/frontend/src/core/components/tools/pageLayout/LayoutPreview.tsx b/frontend/src/core/components/tools/pageLayout/LayoutPreview.tsx
index 04b029d2a0..086d29c099 100644
--- a/frontend/src/core/components/tools/pageLayout/LayoutPreview.tsx
+++ b/frontend/src/core/components/tools/pageLayout/LayoutPreview.tsx
@@ -1,18 +1,13 @@
-import { PageLayoutParameters } from '@app/hooks/tools/pageLayout/usePageLayoutParameters';
-import { computeBoxes } from '@app/components/tools/pageLayout/utils/computeBoxes';
-
-export default function LayoutPreview({
-  parameters
-}: {
-  parameters: PageLayoutParameters
-}) {
+import { PageLayoutParameters } from "@app/hooks/tools/pageLayout/usePageLayoutParameters";
+import { computeBoxes } from "@app/components/tools/pageLayout/utils/computeBoxes";
 
+export default function LayoutPreview({ parameters }: { parameters: PageLayoutParameters }) {
   const sheet = {
     x: 0,
     y: 0,
     width: parameters.orientation === "LANDSCAPE" ? 297 : 210,
-    height: parameters.orientation === "LANDSCAPE" ? 210 : 297
-  }
+    height: parameters.orientation === "LANDSCAPE" ? 210 : 297,
+  };
 
   const boxes = computeBoxes(sheet, parameters);
   const aspectRatio = sheet.width / sheet.height;
@@ -24,10 +19,11 @@ export default function LayoutPreview({
       style={{
         width: parameters.orientation === "PORTRAIT" ? "50%" : `${50 * aspectRatio}%`,
         aspectRatio: `${aspectRatio}`,
-        display: 'block',
-        margin: '0 auto',
-        padding: '10px',
-      }}>
+        display: "block",
+        margin: "0 auto",
+        padding: "10px",
+      }}
+    >
       <rect
         x={sheet.x}
         y={sheet.y}
@@ -39,7 +35,7 @@ export default function LayoutPreview({
         stroke="black"
         strokeWidth={2}
       />
-      {boxes.map(box => (
+      {boxes.map((box) => (
         <g key={box.label}>
           <rect
             x={box.x}
@@ -64,9 +60,8 @@ export default function LayoutPreview({
           >
             {box.label}
           </text>
-        </g>))
-      }
+        </g>
+      ))}
     </svg>
-
-  )
+  );
 }
diff --git a/frontend/src/core/components/tools/pageLayout/PageLayoutAdvancedSettings.tsx b/frontend/src/core/components/tools/pageLayout/PageLayoutAdvancedSettings.tsx
index 82b0992e24..5496fd944b 100644
--- a/frontend/src/core/components/tools/pageLayout/PageLayoutAdvancedSettings.tsx
+++ b/frontend/src/core/components/tools/pageLayout/PageLayoutAdvancedSettings.tsx
@@ -1,6 +1,6 @@
-import { Divider, Select, Stack } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { PageLayoutParameters } from '@app/hooks/tools/pageLayout/usePageLayoutParameters';
+import { Divider, Select, Stack } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { PageLayoutParameters } from "@app/hooks/tools/pageLayout/usePageLayoutParameters";
 import { Z_INDEX_AUTOMATE_DROPDOWN } from "@app/styles/zIndex";
 
 export default function PageLayoutAdvancedSettings({
@@ -9,26 +9,22 @@ export default function PageLayoutAdvancedSettings({
   disabled,
 }: {
   parameters: PageLayoutParameters;
-  onParameterChange: <K extends keyof PageLayoutParameters>(
-    key: K,
-    value: PageLayoutParameters[K]
-  ) => void;
+  onParameterChange: <K extends keyof PageLayoutParameters>(key: K, value: PageLayoutParameters[K]) => void;
   disabled?: boolean;
 }) {
   const { t } = useTranslation();
   return (
     <Stack gap="sm">
-
       <Select
-        label={t('pageLayout.orientation.label', 'Orientation:')}
+        label={t("pageLayout.orientation.label", "Orientation:")}
         data={[
-          { value: 'PORTRAIT', label: t('pageLayout.orientation.portrait', 'Portrait') },
-          { value: 'LANDSCAPE', label: t('pageLayout.orientation.landscape', 'Landscape') },
+          { value: "PORTRAIT", label: t("pageLayout.orientation.portrait", "Portrait") },
+          { value: "LANDSCAPE", label: t("pageLayout.orientation.landscape", "Landscape") },
         ]}
         value={String(parameters.orientation)}
         onChange={(v) => {
           if (v === "PORTRAIT" || v === "LANDSCAPE") {
-            onParameterChange('orientation', v)
+            onParameterChange("orientation", v);
           }
         }}
         disabled={disabled}
@@ -38,15 +34,15 @@ export default function PageLayoutAdvancedSettings({
       <Divider />
 
       <Select
-        label={t('pageLayout.arrangement.label', 'Page arrangement:')}
+        label={t("pageLayout.arrangement.label", "Page arrangement:")}
         data={[
-          { value: 'BY_ROWS', label: t('pageLayout.arrangement.byRows', 'By Rows') },
-          { value: 'BY_COLUMNS', label: t('pageLayout.arrangement.byColumns', 'By Columns') },
+          { value: "BY_ROWS", label: t("pageLayout.arrangement.byRows", "By Rows") },
+          { value: "BY_COLUMNS", label: t("pageLayout.arrangement.byColumns", "By Columns") },
         ]}
         value={String(parameters.arrangement)}
         onChange={(v) => {
           if (v === "BY_COLUMNS" || v === "BY_ROWS") {
-            onParameterChange('arrangement', v)
+            onParameterChange("arrangement", v);
           }
         }}
         disabled={disabled}
@@ -54,15 +50,15 @@ export default function PageLayoutAdvancedSettings({
       />
 
       <Select
-        label={t('pageLayout.readingDirection.label', 'Reading Direction:')}
+        label={t("pageLayout.readingDirection.label", "Reading Direction:")}
         data={[
-          { value: 'LTR', label: t('pageLayout.readingDirection.ltr', 'Left to Right') },
-          { value: 'RTL', label: t('pageLayout.readingDirection.rtl', 'Right to Left') },
+          { value: "LTR", label: t("pageLayout.readingDirection.ltr", "Left to Right") },
+          { value: "RTL", label: t("pageLayout.readingDirection.rtl", "Right to Left") },
         ]}
         value={String(parameters.readingDirection)}
         onChange={(v) => {
           if (v === "LTR" || v === "RTL") {
-            onParameterChange('readingDirection', v)
+            onParameterChange("readingDirection", v);
           }
         }}
         disabled={disabled}
@@ -71,5 +67,3 @@ export default function PageLayoutAdvancedSettings({
     </Stack>
   );
 }
-
-
diff --git a/frontend/src/core/components/tools/pageLayout/PageLayoutMarginsBordersSettings.tsx b/frontend/src/core/components/tools/pageLayout/PageLayoutMarginsBordersSettings.tsx
index 1c6b22b3dd..89f5dc6ac4 100644
--- a/frontend/src/core/components/tools/pageLayout/PageLayoutMarginsBordersSettings.tsx
+++ b/frontend/src/core/components/tools/pageLayout/PageLayoutMarginsBordersSettings.tsx
@@ -1,6 +1,6 @@
-import { Divider, Stack, NumberInput, Switch } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { PageLayoutParameters } from '@app/hooks/tools/pageLayout/usePageLayoutParameters';
+import { Divider, Stack, NumberInput, Switch } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { PageLayoutParameters } from "@app/hooks/tools/pageLayout/usePageLayoutParameters";
 
 export default function PageLayoutMarginsBordersSettings({
   parameters,
@@ -8,10 +8,7 @@ export default function PageLayoutMarginsBordersSettings({
   disabled,
 }: {
   parameters: PageLayoutParameters;
-  onParameterChange: <K extends keyof PageLayoutParameters>(
-    key: K,
-    value: PageLayoutParameters[K]
-  ) => void;
+  onParameterChange: <K extends keyof PageLayoutParameters>(key: K, value: PageLayoutParameters[K]) => void;
   disabled?: boolean;
 }) {
   const { t } = useTranslation();
@@ -25,13 +22,15 @@ export default function PageLayoutMarginsBordersSettings({
   const bottom = parameters.bottomMargin ?? 0;
   const inner = parameters.innerMargin ?? 0;
 
-  const pageWidth = parameters.orientation === "PORTRAIT"
-    ? 595.28 // A4 width in points
-    : 841.89 ; // A4 height in points
+  const pageWidth =
+    parameters.orientation === "PORTRAIT"
+      ? 595.28 // A4 width in points
+      : 841.89; // A4 height in points
 
-  const pageHeight = parameters.orientation === "PORTRAIT"
-    ? 841.89 // A4 height in points
-    : 595.28; // A4 width in points
+  const pageHeight =
+    parameters.orientation === "PORTRAIT"
+      ? 841.89 // A4 height in points
+      : 595.28; // A4 width in points
 
   const cellWidth = (pageWidth - left - right) / cols;
   const cellHeight = (pageHeight - top - bottom) / rows;
@@ -43,92 +42,89 @@ export default function PageLayoutMarginsBordersSettings({
   const invalidInnerSize = (innerWidth <= 0 || innerHeight <= 0) && inner > 0;
 
   const outerHeightError = invalidOuterHeight
-    ? t('pageLayout.error.outerVerticalMarginsTooLarge', 'Top/Bottom margins are too large for this page size.')
+    ? t("pageLayout.error.outerVerticalMarginsTooLarge", "Top/Bottom margins are too large for this page size.")
     : undefined;
 
   const outerWidthError = invalidOuterWidth
-    ? t('pageLayout.error.outerHorizontalMarginsTooLarge', 'Left/Right margins are too large for this page size.')
+    ? t("pageLayout.error.outerHorizontalMarginsTooLarge", "Left/Right margins are too large for this page size.")
     : undefined;
 
   const innerError = invalidInnerSize
-    ? t('pageLayout.error.innerMarginTooLarge', 'Inner margin is too large for the selected layout.')
+    ? t("pageLayout.error.innerMarginTooLarge", "Inner margin is too large for the selected layout.")
     : undefined;
 
   return (
     <Stack gap="sm">
       <NumberInput
-        label={t('pageLayout.top', 'Top Margin')}
+        label={t("pageLayout.top", "Top Margin")}
         placeholder="Enter top margin"
         value={parameters.topMargin}
-        onChange={(v) => onParameterChange('topMargin', Number(v))}
+        onChange={(v) => onParameterChange("topMargin", Number(v))}
         min={0}
         disabled={disabled}
         style={{ flex: 1 }}
         error={outerHeightError}
       />
       <NumberInput
-        label={t('pageLayout.bottom', 'Bottom Margin')}
+        label={t("pageLayout.bottom", "Bottom Margin")}
         placeholder="Enter bottom margin"
         value={parameters.bottomMargin}
-        onChange={(v) => onParameterChange('bottomMargin', Number(v))}
+        onChange={(v) => onParameterChange("bottomMargin", Number(v))}
         min={0}
         disabled={disabled}
         style={{ flex: 1 }}
         error={outerHeightError}
       />
       <NumberInput
-        label={t('pageLayout.left', 'Left Margin')}
+        label={t("pageLayout.left", "Left Margin")}
         placeholder="Enter left margin"
         value={parameters.leftMargin}
-        onChange={(v) => onParameterChange('leftMargin', Number(v))}
+        onChange={(v) => onParameterChange("leftMargin", Number(v))}
         min={0}
         disabled={disabled}
         error={outerWidthError}
       />
       <NumberInput
-        label={t('pageLayout.right', 'Right Margin')}
+        label={t("pageLayout.right", "Right Margin")}
         placeholder="Enter right margin"
         value={parameters.rightMargin}
-        onChange={(v) => onParameterChange('rightMargin', Number(v))}
+        onChange={(v) => onParameterChange("rightMargin", Number(v))}
         min={0}
         disabled={disabled}
         style={{ flex: 1 }}
         error={outerWidthError}
       />
       <NumberInput
-        label={t('pageLayout.innerMargin', 'Inner Margin')}
+        label={t("pageLayout.innerMargin", "Inner Margin")}
         placeholder="Enter inner margin"
         value={parameters.innerMargin}
-        onChange={(v) => onParameterChange('innerMargin', Number(v))}
+        onChange={(v) => onParameterChange("innerMargin", Number(v))}
         min={0}
         disabled={disabled}
         style={{ flex: 1 }}
         error={innerError}
       />
 
-    <Divider />
+      <Divider />
 
-    <Switch
-      checked={parameters.addBorder}
-      onChange={(e) => onParameterChange('addBorder', e.currentTarget.checked)}
-      label={t('pageLayout.addBorder', 'Add Borders')}
-      disabled={disabled}
-    />
-
-    {parameters.addBorder && (
-      <NumberInput
-        label={t('pageLayout.borderWidth', 'Border Thickness')}
-        placeholder="Enter border thickness"
-        value={parameters.borderWidth}
-        onChange={(v) => onParameterChange('borderWidth', Number(v))}
-        min={1}
+      <Switch
+        checked={parameters.addBorder}
+        onChange={(e) => onParameterChange("addBorder", e.currentTarget.checked)}
+        label={t("pageLayout.addBorder", "Add Borders")}
         disabled={disabled}
-        style={{ flex: 1 }}
       />
-    )}
 
+      {parameters.addBorder && (
+        <NumberInput
+          label={t("pageLayout.borderWidth", "Border Thickness")}
+          placeholder="Enter border thickness"
+          value={parameters.borderWidth}
+          onChange={(v) => onParameterChange("borderWidth", Number(v))}
+          min={1}
+          disabled={disabled}
+          style={{ flex: 1 }}
+        />
+      )}
     </Stack>
   );
 }
-
-
diff --git a/frontend/src/core/components/tools/pageLayout/PageLayoutPreview.tsx b/frontend/src/core/components/tools/pageLayout/PageLayoutPreview.tsx
index 5d35c9c379..e07587f105 100644
--- a/frontend/src/core/components/tools/pageLayout/PageLayoutPreview.tsx
+++ b/frontend/src/core/components/tools/pageLayout/PageLayoutPreview.tsx
@@ -1,18 +1,11 @@
-import { PageLayoutParameters } from '@app/hooks/tools/pageLayout/usePageLayoutParameters';
-import LayoutPreview from '@app/components/tools/pageLayout/LayoutPreview';
-import { Stack } from '@mantine/core';
-
-export default function PageLayoutPreview({
-  parameters,
-}: {
-  parameters: PageLayoutParameters;
-}) {
+import { PageLayoutParameters } from "@app/hooks/tools/pageLayout/usePageLayoutParameters";
+import LayoutPreview from "@app/components/tools/pageLayout/LayoutPreview";
+import { Stack } from "@mantine/core";
 
+export default function PageLayoutPreview({ parameters }: { parameters: PageLayoutParameters }) {
   return (
     <Stack gap="sm">
       <LayoutPreview parameters={parameters} />
     </Stack>
   );
 }
-
-
diff --git a/frontend/src/core/components/tools/pageLayout/PageLayoutSettings.tsx b/frontend/src/core/components/tools/pageLayout/PageLayoutSettings.tsx
index 738f863298..18e093e282 100644
--- a/frontend/src/core/components/tools/pageLayout/PageLayoutSettings.tsx
+++ b/frontend/src/core/components/tools/pageLayout/PageLayoutSettings.tsx
@@ -1,9 +1,9 @@
-import { Select, Stack, NumberInput } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { PageLayoutParameters } from '@app/hooks/tools/pageLayout/usePageLayoutParameters';
-import { getPagesPerSheetOptions } from '@app/components/tools/pageLayout/constants';
+import { Select, Stack, NumberInput } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { PageLayoutParameters } from "@app/hooks/tools/pageLayout/usePageLayoutParameters";
+import { getPagesPerSheetOptions } from "@app/components/tools/pageLayout/constants";
 import { Z_INDEX_AUTOMATE_DROPDOWN } from "@app/styles/zIndex";
-import ButtonSelector from '@app/components/shared/ButtonSelector';
+import ButtonSelector from "@app/components/shared/ButtonSelector";
 
 export default function PageLayoutSettings({
   parameters,
@@ -11,85 +11,84 @@ export default function PageLayoutSettings({
   disabled,
 }: {
   parameters: PageLayoutParameters;
-  onParameterChange: <K extends keyof PageLayoutParameters>(
-    key: K,
-    value: PageLayoutParameters[K]
-  ) => void;
+  onParameterChange: <K extends keyof PageLayoutParameters>(key: K, value: PageLayoutParameters[K]) => void;
   disabled?: boolean;
 }) {
   const { t } = useTranslation();
 
   const pagesPerSheetOptions = getPagesPerSheetOptions(t);
-  const selectedPagesPerSheetOption = pagesPerSheetOptions.find((o) => o.value === parameters.pagesPerSheet) || pagesPerSheetOptions[0];
-
+  const selectedPagesPerSheetOption =
+    pagesPerSheetOptions.find((o) => o.value === parameters.pagesPerSheet) || pagesPerSheetOptions[0];
 
   return (
     <Stack gap="sm">
       <ButtonSelector
-        label={t('pageLayout.mode.label', 'Mode:')}
+        label={t("pageLayout.mode.label", "Mode:")}
         options={[
-          {value: "DEFAULT", label: t('pageLayout.mode.default', 'Default')},
-          {value: "CUSTOM", label: t('pageLayout.mode.custom', 'Custom')}
+          { value: "DEFAULT", label: t("pageLayout.mode.default", "Default") },
+          { value: "CUSTOM", label: t("pageLayout.mode.custom", "Custom") },
         ]}
         value={String(parameters.mode)}
         onChange={(v) => {
-          if (v ===  "CUSTOM" || v === "DEFAULT") {
-            onParameterChange('mode', v)
+          if (v === "CUSTOM" || v === "DEFAULT") {
+            onParameterChange("mode", v);
           }
         }}
         disabled={disabled}
       />
 
-      {parameters.mode === "DEFAULT" && <>
-        <Select
-          label={t('pageLayout.pagesPerSheet', 'Pages per sheet:')}
-          data={pagesPerSheetOptions.map(o => ({ value: String(o.value), label: o.label }))}
-          value={String(parameters.pagesPerSheet)}
-          onChange={(v) => onParameterChange('pagesPerSheet', Number(v))}
-          allowDeselect={false}
-          disabled={disabled}
-          comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
-        />
-        {selectedPagesPerSheetOption && (
-          <div
-            style={{
-              backgroundColor: 'var(--information-text-bg)',
-              color: 'var(--information-text-color)',
-              padding: '8px 12px',
-              borderRadius: '8px',
-              marginTop: '4px',
-              fontSize: '0.75rem',
-              textAlign: 'center',
-            }}
-          >
-            {selectedPagesPerSheetOption.description}
-          </div>
-        )}
-      </>}
+      {parameters.mode === "DEFAULT" && (
+        <>
+          <Select
+            label={t("pageLayout.pagesPerSheet", "Pages per sheet:")}
+            data={pagesPerSheetOptions.map((o) => ({ value: String(o.value), label: o.label }))}
+            value={String(parameters.pagesPerSheet)}
+            onChange={(v) => onParameterChange("pagesPerSheet", Number(v))}
+            allowDeselect={false}
+            disabled={disabled}
+            comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
+          />
+          {selectedPagesPerSheetOption && (
+            <div
+              style={{
+                backgroundColor: "var(--information-text-bg)",
+                color: "var(--information-text-color)",
+                padding: "8px 12px",
+                borderRadius: "8px",
+                marginTop: "4px",
+                fontSize: "0.75rem",
+                textAlign: "center",
+              }}
+            >
+              {selectedPagesPerSheetOption.description}
+            </div>
+          )}
+        </>
+      )}
 
-      {parameters.mode === "CUSTOM" && <>
-        <NumberInput
-          label={t('pageLayout.rows', 'Rows')}
-          placeholder="Enter rows"
-          value={parameters.rows}
-          onChange={(v) => onParameterChange('rows', Number(v))}
-          min={1}
-          disabled={disabled}
-          style={{ flex: 1 }}
-        />
+      {parameters.mode === "CUSTOM" && (
+        <>
+          <NumberInput
+            label={t("pageLayout.rows", "Rows")}
+            placeholder="Enter rows"
+            value={parameters.rows}
+            onChange={(v) => onParameterChange("rows", Number(v))}
+            min={1}
+            disabled={disabled}
+            style={{ flex: 1 }}
+          />
 
-        <NumberInput
-          label={t('pageLayout.cols', 'Columns')}
-          placeholder="Enter columns"
-          value={parameters.cols}
-          onChange={(v) => onParameterChange('cols', Number(v))}
-          min={1}
-          disabled={disabled}
-          style={{ flex: 1 }}
-        />
-      </>}
+          <NumberInput
+            label={t("pageLayout.cols", "Columns")}
+            placeholder="Enter columns"
+            value={parameters.cols}
+            onChange={(v) => onParameterChange("cols", Number(v))}
+            min={1}
+            disabled={disabled}
+            style={{ flex: 1 }}
+          />
+        </>
+      )}
     </Stack>
   );
 }
-
-
diff --git a/frontend/src/core/components/tools/pageLayout/constants.ts b/frontend/src/core/components/tools/pageLayout/constants.ts
index c6114b6f66..6b06b243fe 100644
--- a/frontend/src/core/components/tools/pageLayout/constants.ts
+++ b/frontend/src/core/components/tools/pageLayout/constants.ts
@@ -1,4 +1,4 @@
-import { TFunction } from 'i18next';
+import { TFunction } from "i18next";
 
 export type PagesPerSheetOption = {
   value: number;
@@ -9,24 +9,22 @@ export type PagesPerSheetOption = {
 export const getPagesPerSheetOptions = (t: TFunction): PagesPerSheetOption[] => [
   {
     value: 2,
-    label: '2',
-    description: t('pageLayout.desc.2', 'Place 2 pages side-by-side on a single sheet.')
+    label: "2",
+    description: t("pageLayout.desc.2", "Place 2 pages side-by-side on a single sheet."),
   },
   {
     value: 4,
-    label: '4',
-    description: t('pageLayout.desc.4', 'Place 4 pages on a single sheet (2 × 2 grid).')
+    label: "4",
+    description: t("pageLayout.desc.4", "Place 4 pages on a single sheet (2 × 2 grid)."),
   },
   {
     value: 9,
-    label: '9',
-    description: t('pageLayout.desc.9', 'Place 9 pages on a single sheet (3 × 3 grid).')
+    label: "9",
+    description: t("pageLayout.desc.9", "Place 9 pages on a single sheet (3 × 3 grid)."),
   },
   {
     value: 16,
-    label: '16',
-    description: t('pageLayout.desc.16', 'Place 16 pages on a single sheet (4 × 4 grid).')
+    label: "16",
+    description: t("pageLayout.desc.16", "Place 16 pages on a single sheet (4 × 4 grid)."),
   },
 ];
-
-
diff --git a/frontend/src/core/components/tools/pageLayout/utils/computeBoxes.ts b/frontend/src/core/components/tools/pageLayout/utils/computeBoxes.ts
index 2d762644f1..f00d1bc7e8 100644
--- a/frontend/src/core/components/tools/pageLayout/utils/computeBoxes.ts
+++ b/frontend/src/core/components/tools/pageLayout/utils/computeBoxes.ts
@@ -6,17 +6,16 @@ export type Box = {
   width: number;
   height: number;
   label: number;
-}
+};
 
 export type Sheet = {
   x: number;
   y: number;
   width: number;
   height: number;
-}
+};
 
 export function computeBoxes(sheet: Sheet, parameters: PageLayoutParameters): Box[] {
-
   const { mode, arrangement, readingDirection } = parameters;
 
   const cols = mode === "DEFAULT" ? Math.ceil(Math.sqrt(parameters.pagesPerSheet)) : parameters.cols;
@@ -31,19 +30,18 @@ export function computeBoxes(sheet: Sheet, parameters: PageLayoutParameters): Bo
   const margin = Math.min(cellWidth, cellHeight) * 0.1;
 
   for (let i = 0; i < pagesPerSheet; i++) {
-
     let rowIndex, colIndex;
 
-    if ( arrangement === "BY_ROWS" ) {
+    if (arrangement === "BY_ROWS") {
       rowIndex = Math.floor(i / cols);
-      if ( readingDirection === "LTR" ) {
+      if (readingDirection === "LTR") {
         colIndex = i % cols;
       } else {
         colIndex = cols - 1 - (i % cols);
       }
     } else {
       rowIndex = i % rows;
-      if ( readingDirection === "LTR" ) {
+      if (readingDirection === "LTR") {
         colIndex = Math.floor(i / rows);
       } else {
         colIndex = cols - 1 - Math.floor(i / rows);
@@ -54,7 +52,7 @@ export function computeBoxes(sheet: Sheet, parameters: PageLayoutParameters): Bo
       y: sheet.y + rowIndex * cellHeight + margin,
       width: cellWidth - margin * 2,
       height: cellHeight - margin * 2,
-      label: i + 1
+      label: i + 1,
     });
   }
 
diff --git a/frontend/src/core/components/tools/pdfTextEditor/FontStatusPanel.tsx b/frontend/src/core/components/tools/pdfTextEditor/FontStatusPanel.tsx
index 2c600c2319..f6bec87825 100644
--- a/frontend/src/core/components/tools/pdfTextEditor/FontStatusPanel.tsx
+++ b/frontend/src/core/components/tools/pdfTextEditor/FontStatusPanel.tsx
@@ -1,37 +1,24 @@
-import React, { useMemo, useState } from 'react';
-import {
-  Badge,
-  Box,
-  Code,
-  Collapse,
-  Divider,
-  Flex,
-  Group,
-  List,
-  Paper,
-  Stack,
-  Text,
-  Tooltip,
-} from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import WarningIcon from '@mui/icons-material/Warning';
-import ErrorIcon from '@mui/icons-material/Error';
-import InfoIcon from '@mui/icons-material/Info';
-import FontDownloadIcon from '@mui/icons-material/FontDownload';
-import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import ExpandLessIcon from '@mui/icons-material/ExpandLess';
+import React, { useMemo, useState } from "react";
+import { Badge, Box, Code, Collapse, Divider, Flex, Group, List, Paper, Stack, Text, Tooltip } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import WarningIcon from "@mui/icons-material/Warning";
+import ErrorIcon from "@mui/icons-material/Error";
+import InfoIcon from "@mui/icons-material/Info";
+import FontDownloadIcon from "@mui/icons-material/FontDownload";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import ExpandLessIcon from "@mui/icons-material/ExpandLess";
 
-import { PdfJsonDocument } from '@app/tools/pdfTextEditor/pdfTextEditorTypes';
+import { PdfJsonDocument } from "@app/tools/pdfTextEditor/pdfTextEditorTypes";
 import {
   analyzeDocumentFonts,
   DocumentFontAnalysis,
   FontAnalysis,
   getFontStatusColor,
   getFontStatusDescription,
-} from '@app/tools/pdfTextEditor/fontAnalysis';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { Tooltip as CustomTooltip } from '@app/components/shared/Tooltip';
+} from "@app/tools/pdfTextEditor/fontAnalysis";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { Tooltip as CustomTooltip } from "@app/components/shared/Tooltip";
 
 interface FontStatusPanelProps {
   document: PdfJsonDocument | null;
@@ -46,13 +33,13 @@ const FontStatusBadge = ({ analysis }: { analysis: FontAnalysis }) => {
 
   const icon = useMemo(() => {
     switch (analysis.status) {
-      case 'perfect':
+      case "perfect":
         return <CheckCircleIcon sx={{ fontSize: 14 }} />;
-      case 'embedded-subset':
+      case "embedded-subset":
         return <InfoIcon sx={{ fontSize: 14 }} />;
-      case 'system-fallback':
+      case "system-fallback":
         return <WarningIcon sx={{ fontSize: 14 }} />;
-      case 'missing':
+      case "missing":
         return <ErrorIcon sx={{ fontSize: 14 }} />;
       default:
         return <InfoIcon sx={{ fontSize: 14 }} />;
@@ -61,14 +48,8 @@ const FontStatusBadge = ({ analysis }: { analysis: FontAnalysis }) => {
 
   return (
     <Tooltip label={description} position="top" withArrow>
-      <Badge
-        size="xs"
-        color={color}
-        variant="light"
-        leftSection={icon}
-        style={{ cursor: 'help' }}
-      >
-        {analysis.status.replace('-', ' ')}
+      <Badge size="xs" color={color} variant="light" leftSection={icon} style={{ cursor: "help" }}>
+        {analysis.status.replace("-", " ")}
       </Badge>
     </Tooltip>
   );
@@ -79,16 +60,12 @@ const FontDetailItem = ({ analysis }: { analysis: FontAnalysis }) => {
   const [expanded, setExpanded] = useState(false);
 
   return (
-    <Paper withBorder px="sm" py="md" style={{ cursor: 'pointer' }} onClick={() => setExpanded(!expanded)}>
+    <Paper withBorder px="sm" py="md" style={{ cursor: "pointer" }} onClick={() => setExpanded(!expanded)}>
       <Stack gap={4}>
         <Flex align="center" justify="space-between" wrap="nowrap">
           <Group gap={4} wrap="nowrap" style={{ flex: 1, minWidth: 0 }}>
             <FontDownloadIcon sx={{ fontSize: 16, flexShrink: 0 }} />
-            <CustomTooltip
-              sidebarTooltip={false}
-              content={analysis.baseName}
-              position="top"
-            >
+            <CustomTooltip sidebarTooltip={false} content={analysis.baseName} position="top">
               <Text size="xs" fw={500} lineClamp={1} style={{ flex: 1, minWidth: 0 }}>
                 {analysis.baseName}
               </Text>
@@ -110,29 +87,29 @@ const FontDetailItem = ({ analysis }: { analysis: FontAnalysis }) => {
             {/* Font Details */}
             <Box>
               <Text size="xs" c="dimmed" mb={2}>
-                {t('pdfTextEditor.fontAnalysis.details', 'Font Details')}:
+                {t("pdfTextEditor.fontAnalysis.details", "Font Details")}:
               </Text>
               <Stack gap={2}>
                 <Group gap={4}>
                   <Text size="xs" c="dimmed">
-                    {t('pdfTextEditor.fontAnalysis.embedded', 'Embedded')}:
+                    {t("pdfTextEditor.fontAnalysis.embedded", "Embedded")}:
                   </Text>
-                  <Code style={{ fontSize: '0.65rem', padding: '0 4px' }}>{analysis.embedded ? 'Yes' : 'No'}</Code>
+                  <Code style={{ fontSize: "0.65rem", padding: "0 4px" }}>{analysis.embedded ? "Yes" : "No"}</Code>
                 </Group>
                 {analysis.subtype && (
                   <Group gap={4}>
                     <Text size="xs" c="dimmed">
-                      {t('pdfTextEditor.fontAnalysis.type', 'Type')}:
+                      {t("pdfTextEditor.fontAnalysis.type", "Type")}:
                     </Text>
-                    <Code style={{ fontSize: '0.65rem', padding: '0 4px' }}>{analysis.subtype}</Code>
+                    <Code style={{ fontSize: "0.65rem", padding: "0 4px" }}>{analysis.subtype}</Code>
                   </Group>
                 )}
                 {analysis.webFormat && (
                   <Group gap={4}>
                     <Text size="xs" c="dimmed">
-                      {t('pdfTextEditor.fontAnalysis.webFormat', 'Web Format')}:
+                      {t("pdfTextEditor.fontAnalysis.webFormat", "Web Format")}:
                     </Text>
-                    <Code style={{ fontSize: '0.65rem', padding: '0 4px' }}>{analysis.webFormat}</Code>
+                    <Code style={{ fontSize: "0.65rem", padding: "0 4px" }}>{analysis.webFormat}</Code>
                   </Group>
                 )}
               </Stack>
@@ -142,7 +119,7 @@ const FontDetailItem = ({ analysis }: { analysis: FontAnalysis }) => {
             {analysis.warnings.length > 0 && (
               <Box>
                 <Text size="xs" c="orange" fw={500}>
-                  {t('pdfTextEditor.fontAnalysis.warnings', 'Warnings')}:
+                  {t("pdfTextEditor.fontAnalysis.warnings", "Warnings")}:
                 </Text>
                 <List size="xs" spacing={2} withPadding>
                   {analysis.warnings.map((warning, index) => (
@@ -158,7 +135,7 @@ const FontDetailItem = ({ analysis }: { analysis: FontAnalysis }) => {
             {analysis.suggestions.length > 0 && (
               <Box>
                 <Text size="xs" c="blue" fw={500}>
-                  {t('pdfTextEditor.fontAnalysis.suggestions', 'Notes')}:
+                  {t("pdfTextEditor.fontAnalysis.suggestions", "Notes")}:
                 </Text>
                 <List size="xs" spacing={2} withPadding>
                   {analysis.suggestions.map((suggestion, index) => (
@@ -176,18 +153,10 @@ const FontDetailItem = ({ analysis }: { analysis: FontAnalysis }) => {
   );
 };
 
-const FontStatusPanel: React.FC<FontStatusPanelProps> = ({
-  document,
-  pageIndex,
-  isCollapsed = false,
-  onCollapsedChange
-}) => {
+const FontStatusPanel: React.FC<FontStatusPanelProps> = ({ document, pageIndex, isCollapsed = false, onCollapsedChange }) => {
   const { t } = useTranslation();
 
-  const fontAnalysis: DocumentFontAnalysis = useMemo(
-    () => analyzeDocumentFonts(document, pageIndex),
-    [document, pageIndex]
-  );
+  const fontAnalysis: DocumentFontAnalysis = useMemo(() => analyzeDocumentFonts(document, pageIndex), [document, pageIndex]);
 
   const { canReproducePerfectly, hasWarnings, summary, fonts } = fontAnalysis;
 
@@ -196,28 +165,29 @@ const FontStatusPanel: React.FC<FontStatusPanelProps> = ({
     return null;
   }
 
-  const statusColor = canReproducePerfectly ? 'green' : hasWarnings ? 'yellow' : 'blue';
+  const statusColor = canReproducePerfectly ? "green" : hasWarnings ? "yellow" : "blue";
 
-  const pageLabel = pageIndex !== undefined
-    ? t('pdfTextEditor.fontAnalysis.currentPageFonts', 'Fonts on this page')
-    : t('pdfTextEditor.fontAnalysis.allFonts', 'All fonts');
+  const pageLabel =
+    pageIndex !== undefined
+      ? t("pdfTextEditor.fontAnalysis.currentPageFonts", "Fonts on this page")
+      : t("pdfTextEditor.fontAnalysis.allFonts", "All fonts");
 
   return (
     <div>
       <div
         style={{
-          padding: '0.5rem',
+          padding: "0.5rem",
           opacity: isCollapsed ? 0.8 : 1,
-          color: isCollapsed ? 'var(--mantine-color-dimmed)' : 'inherit',
-          transition: 'opacity 0.2s ease, color 0.2s ease'
+          color: isCollapsed ? "var(--mantine-color-dimmed)" : "inherit",
+          transition: "opacity 0.2s ease, color 0.2s ease",
         }}
       >
         {/* Header - matches ToolStep style */}
         <Flex
           align="center"
           justify="space-between"
-          mb={isCollapsed ? 0 : 'sm'}
-          style={{ cursor: 'pointer' }}
+          mb={isCollapsed ? 0 : "sm"}
+          style={{ cursor: "pointer" }}
           onClick={() => onCollapsedChange?.(!isCollapsed)}
         >
           <Flex align="center" gap="xs">
@@ -230,13 +200,23 @@ const FontStatusPanel: React.FC<FontStatusPanelProps> = ({
           </Flex>
 
           {isCollapsed ? (
-            <LocalIcon icon="chevron-right-rounded" width="1.2rem" height="1.2rem" style={{
-              color: 'var(--mantine-color-dimmed)'
-            }} />
+            <LocalIcon
+              icon="chevron-right-rounded"
+              width="1.2rem"
+              height="1.2rem"
+              style={{
+                color: "var(--mantine-color-dimmed)",
+              }}
+            />
           ) : (
-            <LocalIcon icon="expand-more-rounded" width="1.2rem" height="1.2rem" style={{
-              color: 'var(--mantine-color-dimmed)'
-            }} />
+            <LocalIcon
+              icon="expand-more-rounded"
+              width="1.2rem"
+              height="1.2rem"
+              style={{
+                color: "var(--mantine-color-dimmed)",
+              }}
+            />
           )}
         </Flex>
 
@@ -246,41 +226,32 @@ const FontStatusPanel: React.FC<FontStatusPanelProps> = ({
             {/* Overall Status Message */}
             <Text size="xs" c="dimmed">
               {canReproducePerfectly
-                ? t(
-                    'pdfTextEditor.fontAnalysis.perfectMessage',
-                    'All fonts can be reproduced perfectly.'
-                  )
+                ? t("pdfTextEditor.fontAnalysis.perfectMessage", "All fonts can be reproduced perfectly.")
                 : hasWarnings
-                ? t(
-                    'pdfTextEditor.fontAnalysis.warningMessage',
-                    'Some fonts may not render correctly.'
-                  )
-                : t(
-                    'pdfTextEditor.fontAnalysis.infoMessage',
-                    'Font reproduction information available.'
-                  )}
+                  ? t("pdfTextEditor.fontAnalysis.warningMessage", "Some fonts may not render correctly.")
+                  : t("pdfTextEditor.fontAnalysis.infoMessage", "Font reproduction information available.")}
             </Text>
 
             {/* Summary Statistics */}
             <Group gap={4} wrap="wrap">
               {summary.perfect > 0 && (
                 <Badge size="xs" color="green" variant="light" leftSection={<CheckCircleIcon sx={{ fontSize: 12 }} />}>
-                  {summary.perfect} {t('pdfTextEditor.fontAnalysis.perfect', 'perfect')}
+                  {summary.perfect} {t("pdfTextEditor.fontAnalysis.perfect", "perfect")}
                 </Badge>
               )}
               {summary.embeddedSubset > 0 && (
                 <Badge size="xs" color="blue" variant="light" leftSection={<InfoIcon sx={{ fontSize: 12 }} />}>
-                  {summary.embeddedSubset} {t('pdfTextEditor.fontAnalysis.subset', 'subset')}
+                  {summary.embeddedSubset} {t("pdfTextEditor.fontAnalysis.subset", "subset")}
                 </Badge>
               )}
               {summary.systemFallback > 0 && (
                 <Badge size="xs" color="yellow" variant="light" leftSection={<WarningIcon sx={{ fontSize: 12 }} />}>
-                  {summary.systemFallback} {t('pdfTextEditor.fontAnalysis.fallback', 'fallback')}
+                  {summary.systemFallback} {t("pdfTextEditor.fontAnalysis.fallback", "fallback")}
                 </Badge>
               )}
               {summary.missing > 0 && (
                 <Badge size="xs" color="red" variant="light" leftSection={<ErrorIcon sx={{ fontSize: 12 }} />}>
-                  {summary.missing} {t('pdfTextEditor.fontAnalysis.missing', 'missing')}
+                  {summary.missing} {t("pdfTextEditor.fontAnalysis.missing", "missing")}
                 </Badge>
               )}
             </Group>
@@ -294,7 +265,7 @@ const FontStatusPanel: React.FC<FontStatusPanelProps> = ({
           </Stack>
         )}
       </div>
-      <Divider style={{ color: '#E2E8F0', marginLeft: '1rem', marginRight: '-0.5rem' }} />
+      <Divider style={{ color: "#E2E8F0", marginLeft: "1rem", marginRight: "-0.5rem" }} />
     </div>
   );
 };
diff --git a/frontend/src/core/components/tools/pdfTextEditor/PdfTextEditorSidebar.tsx b/frontend/src/core/components/tools/pdfTextEditor/PdfTextEditorSidebar.tsx
index 6ad1fec331..f1b0bdeb75 100644
--- a/frontend/src/core/components/tools/pdfTextEditor/PdfTextEditorSidebar.tsx
+++ b/frontend/src/core/components/tools/pdfTextEditor/PdfTextEditorSidebar.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useState } from "react";
 import {
   ActionIcon,
   Badge,
@@ -13,41 +13,36 @@ import {
   Stack,
   Switch,
   Text,
-} from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import AutorenewIcon from '@mui/icons-material/Autorenew';
-import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
-import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
-import FileDownloadIcon from '@mui/icons-material/FileDownloadOutlined';
+} from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import AutorenewIcon from "@mui/icons-material/Autorenew";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
+import FileDownloadIcon from "@mui/icons-material/FileDownloadOutlined";
 
-import { PdfTextEditorViewData, TextGroup } from '@app/tools/pdfTextEditor/pdfTextEditorTypes';
-import { pageDimensions } from '@app/tools/pdfTextEditor/pdfTextEditorUtils';
-import FontStatusPanel from '@app/components/tools/pdfTextEditor/FontStatusPanel';
-import ToolStep from '@app/components/tools/shared/ToolStep';
-import { usePdfTextEditorTips } from '@app/components/tooltips/usePdfTextEditorTips';
-import { Tooltip } from '@app/components/shared/Tooltip';
-import LocalIcon from '@app/components/shared/LocalIcon';
+import { PdfTextEditorViewData, TextGroup } from "@app/tools/pdfTextEditor/pdfTextEditorTypes";
+import { pageDimensions } from "@app/tools/pdfTextEditor/pdfTextEditorUtils";
+import FontStatusPanel from "@app/components/tools/pdfTextEditor/FontStatusPanel";
+import ToolStep from "@app/components/tools/shared/ToolStep";
+import { usePdfTextEditorTips } from "@app/components/tooltips/usePdfTextEditorTips";
+import { Tooltip } from "@app/components/shared/Tooltip";
+import LocalIcon from "@app/components/shared/LocalIcon";
 
-type GroupingMode = 'auto' | 'paragraph' | 'singleLine';
+type GroupingMode = "auto" | "paragraph" | "singleLine";
 
 interface PdfTextEditorSidebarProps {
   data: PdfTextEditorViewData;
 }
 
 // Analyze page content to determine if it's paragraph-heavy
-const analyzePageContentType = (
-  groups: TextGroup[],
-  pageWidth: number,
-): boolean => {
+const analyzePageContentType = (groups: TextGroup[], pageWidth: number): boolean => {
   if (groups.length < 3) {
     return false;
   }
 
   const widths = groups.map((g) => Math.max(g.bounds.right - g.bounds.left, 1));
   const avgWidth = widths.reduce((sum, w) => sum + w, 0) / widths.length;
-  const stdDev = Math.sqrt(
-    widths.reduce((sum, w) => sum + Math.pow(w - avgWidth, 2), 0) / widths.length,
-  );
+  const stdDev = Math.sqrt(widths.reduce((sum, w) => sum + Math.pow(w - avgWidth, 2), 0) / widths.length);
   const coefficientOfVariation = avgWidth > 0 ? stdDev / avgWidth : 0;
   const fullWidthRatio = widths.filter((w) => w > pageWidth * 0.65).length / widths.length;
 
@@ -97,13 +92,16 @@ const PdfTextEditorSidebar = ({ data }: PdfTextEditorSidebarProps) => {
     return analyzePageContentType(pageGroups, pageWidth);
   }, [pageGroups, pageWidth]);
 
-  const handleModeChangeRequest = useCallback((newMode: GroupingMode) => {
-    if (hasChanges && newMode !== externalGroupingMode) {
-      setPendingModeChange(newMode);
-    } else {
-      onGroupingModeChange(newMode);
-    }
-  }, [hasChanges, externalGroupingMode, onGroupingModeChange]);
+  const handleModeChangeRequest = useCallback(
+    (newMode: GroupingMode) => {
+      if (hasChanges && newMode !== externalGroupingMode) {
+        setPendingModeChange(newMode);
+      } else {
+        onGroupingModeChange(newMode);
+      }
+    },
+    [hasChanges, externalGroupingMode, onGroupingModeChange],
+  );
 
   const handleConfirmModeChange = useCallback(() => {
     if (pendingModeChange) {
@@ -118,7 +116,7 @@ const PdfTextEditorSidebar = ({ data }: PdfTextEditorSidebarProps) => {
 
   return (
     <>
-      <Stack style={{ height: '100%', display: 'flex' }} gap={0}>
+      <Stack style={{ height: "100%", display: "flex" }} gap={0}>
         <ScrollArea style={{ flex: 1 }} offsetScrollbars>
           <Stack gap="md">
             <Stack gap="xs" pl="md" pr={0} pt="md">
@@ -126,18 +124,13 @@ const PdfTextEditorSidebar = ({ data }: PdfTextEditorSidebarProps) => {
               <Flex align="center" justify="space-between">
                 <Flex align="center" gap="xs">
                   <Text fw={600} size="sm">
-                    {t('pdfTextEditor.title', 'PDF Text Editor')}
+                    {t("pdfTextEditor.title", "PDF Text Editor")}
                   </Text>
                   <Badge size="xs" variant="light" color="orange">
-                    {t('toolPanel.alpha', 'Alpha')}
+                    {t("toolPanel.alpha", "Alpha")}
                   </Badge>
                 </Flex>
-                <Tooltip
-                  sidebarTooltip={true}
-                  tips={pdfTextEditorTips.tips}
-                  header={pdfTextEditorTips.header}
-                  pinOnClick
-                >
+                <Tooltip sidebarTooltip={true} tips={pdfTextEditorTips.tips} header={pdfTextEditorTips.header} pinOnClick>
                   <ActionIcon variant="subtle" color="blue" size="sm">
                     <LocalIcon icon="info-outline-rounded" width="1.25rem" height="1.25rem" />
                   </ActionIcon>
@@ -146,13 +139,13 @@ const PdfTextEditorSidebar = ({ data }: PdfTextEditorSidebarProps) => {
 
               {fileName && (
                 <Text size="sm" c="dimmed">
-                  {t('pdfTextEditor.currentFile', 'Current file: {{name}}', { name: fileName })}
+                  {t("pdfTextEditor.currentFile", "Current file: {{name}}", { name: fileName })}
                 </Text>
               )}
             </Stack>
 
             <ToolStep
-              title={t('pdfTextEditor.options.advanced.title', 'Advanced Settings')}
+              title={t("pdfTextEditor.options.advanced.title", "Advanced Settings")}
               isCollapsed={advancedSettingsCollapsed}
               onCollapsedClick={() => setAdvancedSettingsCollapsed(!advancedSettingsCollapsed)}
             >
@@ -163,8 +156,8 @@ const PdfTextEditorSidebar = ({ data }: PdfTextEditorSidebarProps) => {
                     <Tooltip
                       sidebarTooltip={false}
                       content={t(
-                        'pdfTextEditor.options.autoScaleText.description',
-                        'Automatically scales text horizontally to fit within its original bounding box when font rendering differs from PDF.'
+                        "pdfTextEditor.options.autoScaleText.description",
+                        "Automatically scales text horizontally to fit within its original bounding box when font rendering differs from PDF.",
                       )}
                       position="top"
                     >
@@ -173,7 +166,7 @@ const PdfTextEditorSidebar = ({ data }: PdfTextEditorSidebarProps) => {
                       </ActionIcon>
                     </Tooltip>
                     <Text fw={500} size="sm" style={{ flex: 1 }}>
-                      {t('pdfTextEditor.options.autoScaleText.title', 'Auto-scale text to fit boxes')}
+                      {t("pdfTextEditor.options.autoScaleText.title", "Auto-scale text to fit boxes")}
                     </Text>
                   </Group>
                   <Switch
@@ -188,42 +181,42 @@ const PdfTextEditorSidebar = ({ data }: PdfTextEditorSidebarProps) => {
                 <Stack gap="xs">
                   <Group gap={4} align="center">
                     <Text fw={500} size="sm">
-                      {t('pdfTextEditor.options.groupingMode.title', 'Text Grouping Mode')}
+                      {t("pdfTextEditor.options.groupingMode.title", "Text Grouping Mode")}
                     </Text>
-                    {externalGroupingMode === 'auto' && isParagraphPage && (
+                    {externalGroupingMode === "auto" && isParagraphPage && (
                       <Badge size="xs" color="blue" variant="light" key={`para-${selectedPage}`}>
-                        {t('pdfTextEditor.pageType.paragraph', 'Paragraph page')}
+                        {t("pdfTextEditor.pageType.paragraph", "Paragraph page")}
                       </Badge>
                     )}
-                    {externalGroupingMode === 'auto' && !isParagraphPage && hasDocument && (
+                    {externalGroupingMode === "auto" && !isParagraphPage && hasDocument && (
                       <Badge size="xs" color="gray" variant="light" key={`sparse-${selectedPage}`}>
-                        {t('pdfTextEditor.pageType.sparse', 'Sparse text')}
+                        {t("pdfTextEditor.pageType.sparse", "Sparse text")}
                       </Badge>
                     )}
                   </Group>
                   <Text size="xs" c="dimmed">
-                    {externalGroupingMode === 'auto'
+                    {externalGroupingMode === "auto"
                       ? t(
-                          'pdfTextEditor.options.groupingMode.autoDescription',
-                          'Automatically detects page type and groups text appropriately.'
+                          "pdfTextEditor.options.groupingMode.autoDescription",
+                          "Automatically detects page type and groups text appropriately.",
                         )
-                      : externalGroupingMode === 'paragraph'
+                      : externalGroupingMode === "paragraph"
                         ? t(
-                            'pdfTextEditor.options.groupingMode.paragraphDescription',
-                            'Groups aligned lines into multi-line paragraph text boxes.'
+                            "pdfTextEditor.options.groupingMode.paragraphDescription",
+                            "Groups aligned lines into multi-line paragraph text boxes.",
                           )
                         : t(
-                            'pdfTextEditor.options.groupingMode.singleLineDescription',
-                            'Keeps each PDF text line as a separate text box.'
+                            "pdfTextEditor.options.groupingMode.singleLineDescription",
+                            "Keeps each PDF text line as a separate text box.",
                           )}
                   </Text>
                   <SegmentedControl
                     value={externalGroupingMode}
                     onChange={(value) => handleModeChangeRequest(value as GroupingMode)}
                     data={[
-                      { label: t('pdfTextEditor.groupingMode.auto', 'Auto'), value: 'auto' },
-                      { label: t('pdfTextEditor.groupingMode.paragraph', 'Paragraph'), value: 'paragraph' },
-                      { label: t('pdfTextEditor.groupingMode.singleLine', 'Single Line'), value: 'singleLine' },
+                      { label: t("pdfTextEditor.groupingMode.auto", "Auto"), value: "auto" },
+                      { label: t("pdfTextEditor.groupingMode.paragraph", "Paragraph"), value: "paragraph" },
+                      { label: t("pdfTextEditor.groupingMode.singleLine", "Single Line"), value: "singleLine" },
                     ]}
                     fullWidth
                   />
@@ -236,8 +229,8 @@ const PdfTextEditorSidebar = ({ data }: PdfTextEditorSidebarProps) => {
                     <Tooltip
                       sidebarTooltip={false}
                       content={t(
-                        'pdfTextEditor.options.forceSingleElement.description',
-                        'When enabled, the editor exports each edited text box as one PDF text element to avoid overlapping glyphs or mixed fonts.'
+                        "pdfTextEditor.options.forceSingleElement.description",
+                        "When enabled, the editor exports each edited text box as one PDF text element to avoid overlapping glyphs or mixed fonts.",
                       )}
                       position="top"
                     >
@@ -246,7 +239,7 @@ const PdfTextEditorSidebar = ({ data }: PdfTextEditorSidebarProps) => {
                       </ActionIcon>
                     </Tooltip>
                     <Text fw={500} size="sm" style={{ flex: 1 }}>
-                      {t('pdfTextEditor.options.forceSingleElement.title', 'Lock edited text to a single PDF element')}
+                      {t("pdfTextEditor.options.forceSingleElement.title", "Lock edited text to a single PDF element")}
                     </Text>
                   </Group>
                   <Switch
@@ -270,22 +263,18 @@ const PdfTextEditorSidebar = ({ data }: PdfTextEditorSidebarProps) => {
         </ScrollArea>
 
         <Group gap="xs" wrap="nowrap" p="md">
-            <Button
-              variant="filled"
-              onClick={onSaveToWorkbench}
-              loading={isSavingToWorkbench}
-              disabled={!hasDocument || !hasChanges || isConverting}
-              style={{ flex: 1 }}
-            >
-              {t('pdfTextEditor.actions.applyChanges', 'Apply Changes')}
-            </Button>
+          <Button
+            variant="filled"
+            onClick={onSaveToWorkbench}
+            loading={isSavingToWorkbench}
+            disabled={!hasDocument || !hasChanges || isConverting}
+            style={{ flex: 1 }}
+          >
+            {t("pdfTextEditor.actions.applyChanges", "Apply Changes")}
+          </Button>
           <Menu position="bottom-end" withinPortal>
             <Menu.Target>
-              <ActionIcon
-                variant="default"
-                size="lg"
-                disabled={!hasDocument || isConverting}
-              >
+              <ActionIcon variant="default" size="lg" disabled={!hasDocument || isConverting}>
                 <MoreHorizIcon fontSize="small" />
               </ActionIcon>
             </Menu.Target>
@@ -295,14 +284,10 @@ const PdfTextEditorSidebar = ({ data }: PdfTextEditorSidebarProps) => {
                 onClick={() => onGeneratePdf()}
                 disabled={!hasChanges || isGeneratingPdf}
               >
-                {t('pdfTextEditor.actions.downloadCopy', 'Download Copy')}
+                {t("pdfTextEditor.actions.downloadCopy", "Download Copy")}
               </Menu.Item>
-              <Menu.Item
-                leftSection={<AutorenewIcon fontSize="small" />}
-                onClick={onReset}
-                color="red"
-              >
-                {t('pdfTextEditor.actions.reset', 'Reset Changes')}
+              <Menu.Item leftSection={<AutorenewIcon fontSize="small" />} onClick={onReset} color="red">
+                {t("pdfTextEditor.actions.reset", "Reset Changes")}
               </Menu.Item>
             </Menu.Dropdown>
           </Menu>
@@ -313,22 +298,22 @@ const PdfTextEditorSidebar = ({ data }: PdfTextEditorSidebarProps) => {
       <Modal
         opened={pendingModeChange !== null}
         onClose={handleCancelModeChange}
-        title={t('pdfTextEditor.modeChange.title', 'Confirm Mode Change')}
+        title={t("pdfTextEditor.modeChange.title", "Confirm Mode Change")}
         centered
       >
         <Stack gap="md">
           <Text>
             {t(
-              'pdfTextEditor.modeChange.warning',
-              'Changing the text grouping mode will reset all unsaved changes. Are you sure you want to continue?'
+              "pdfTextEditor.modeChange.warning",
+              "Changing the text grouping mode will reset all unsaved changes. Are you sure you want to continue?",
             )}
           </Text>
           <Group justify="flex-end" gap="sm">
             <Button variant="default" onClick={handleCancelModeChange}>
-              {t('pdfTextEditor.modeChange.cancel', 'Cancel')}
+              {t("pdfTextEditor.modeChange.cancel", "Cancel")}
             </Button>
             <Button color="red" onClick={handleConfirmModeChange}>
-              {t('pdfTextEditor.modeChange.confirm', 'Reset and Change Mode')}
+              {t("pdfTextEditor.modeChange.confirm", "Reset and Change Mode")}
             </Button>
           </Group>
         </Stack>
diff --git a/frontend/src/core/components/tools/pdfTextEditor/PdfTextEditorView.tsx b/frontend/src/core/components/tools/pdfTextEditor/PdfTextEditorView.tsx
index 119ec4e381..5ebcf5b639 100644
--- a/frontend/src/core/components/tools/pdfTextEditor/PdfTextEditorView.tsx
+++ b/frontend/src/core/components/tools/pdfTextEditor/PdfTextEditorView.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import {
   ActionIcon,
   Alert,
@@ -16,75 +16,70 @@ import {
   Stack,
   Text,
   Tooltip,
-} from '@mantine/core';
-import { Dropzone } from '@mantine/dropzone';
-import { useTranslation } from 'react-i18next';
-import AutorenewIcon from '@mui/icons-material/Autorenew';
-import WarningAmberIcon from '@mui/icons-material/WarningAmber';
-import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
-import CloseIcon from '@mui/icons-material/Close';
-import MergeTypeIcon from '@mui/icons-material/MergeType';
-import CallSplitIcon from '@mui/icons-material/CallSplit';
-import MoreVertIcon from '@mui/icons-material/MoreVert';
-import UploadFileIcon from '@mui/icons-material/UploadFileOutlined';
-import { Rnd } from 'react-rnd';
-import { useNavigationGuard } from '@app/contexts/NavigationContext';
+} from "@mantine/core";
+import { Dropzone } from "@mantine/dropzone";
+import { useTranslation } from "react-i18next";
+import AutorenewIcon from "@mui/icons-material/Autorenew";
+import WarningAmberIcon from "@mui/icons-material/WarningAmber";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import CloseIcon from "@mui/icons-material/Close";
+import MergeTypeIcon from "@mui/icons-material/MergeType";
+import CallSplitIcon from "@mui/icons-material/CallSplit";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import UploadFileIcon from "@mui/icons-material/UploadFileOutlined";
+import { Rnd } from "react-rnd";
+import { useNavigationGuard } from "@app/contexts/NavigationContext";
 
-import { useFileContext } from '@app/contexts/FileContext';
-import {
-  PdfTextEditorViewData,
-  PdfJsonFont,
-  PdfJsonPage,
-  TextGroup,
-} from '@app/tools/pdfTextEditor/pdfTextEditorTypes';
-import { getImageBounds, pageDimensions } from '@app/tools/pdfTextEditor/pdfTextEditorUtils';
+import { useFileContext } from "@app/contexts/FileContext";
+import { PdfTextEditorViewData, PdfJsonFont, PdfJsonPage, TextGroup } from "@app/tools/pdfTextEditor/pdfTextEditorTypes";
+import { getImageBounds, pageDimensions } from "@app/tools/pdfTextEditor/pdfTextEditorUtils";
 
 const MAX_RENDER_WIDTH = 820;
 const MIN_BOX_SIZE = 18;
 
 const normalizeFontFormat = (format?: string | null): string => {
   if (!format) {
-    return 'ttf';
+    return "ttf";
   }
   const lower = format.toLowerCase();
-  if (lower.includes('woff2')) {
-    return 'woff2';
+  if (lower.includes("woff2")) {
+    return "woff2";
   }
-  if (lower.includes('woff')) {
-    return 'woff';
+  if (lower.includes("woff")) {
+    return "woff";
   }
-  if (lower.includes('otf')) {
-    return 'otf';
+  if (lower.includes("otf")) {
+    return "otf";
   }
-  if (lower.includes('cff')) {
-    return 'otf';
+  if (lower.includes("cff")) {
+    return "otf";
   }
-  return 'ttf';
+  return "ttf";
 };
 
 const getFontMimeType = (format: string): string => {
   switch (format) {
-    case 'woff2':
-      return 'font/woff2';
-    case 'woff':
-      return 'font/woff';
-    case 'otf':
-      return 'font/otf';
+    case "woff2":
+      return "font/woff2";
+    case "woff":
+      return "font/woff";
+    case "otf":
+      return "font/otf";
     default:
-      return 'font/ttf';
+      return "font/ttf";
   }
 };
 
 const getFontFormatHint = (format: string): string | null => {
   switch (format) {
-    case 'woff2':
-      return 'woff2';
-    case 'woff':
-      return 'woff';
-    case 'otf':
-      return 'opentype';
-    case 'ttf':
-      return 'truetype';
+    case "woff2":
+      return "woff2";
+    case "woff":
+      return "woff";
+    case "otf":
+      return "opentype";
+    case "ttf":
+      return "truetype";
     default:
       return null;
   }
@@ -100,9 +95,9 @@ const decodeBase64ToUint8Array = (value: string): Uint8Array => {
 };
 
 const buildFontFamilyName = (font: PdfJsonFont): string => {
-  const preferred = (font.baseName ?? '').trim();
-  const identifier = preferred.length > 0 ? preferred : (font.uid ?? font.id ?? 'font').toString();
-  return `pdf-font-${identifier.replace(/[^a-zA-Z0-9_-]/g, '')}`;
+  const preferred = (font.baseName ?? "").trim();
+  const identifier = preferred.length > 0 ? preferred : (font.uid ?? font.id ?? "font").toString();
+  return `pdf-font-${identifier.replace(/[^a-zA-Z0-9_-]/g, "")}`;
 };
 
 const getCaretOffset = (element: HTMLElement): number => {
@@ -148,28 +143,28 @@ const setCaretOffset = (element: HTMLElement, offset: number): void => {
 };
 
 const extractTextWithSoftBreaks = (element: HTMLElement): { text: string; insertedBreaks: boolean } => {
-  const normalized = element.innerText.replace(/\u00A0/g, ' ');
+  const normalized = element.innerText.replace(/\u00A0/g, " ");
   if (!element.isConnected) {
     return { text: normalized, insertedBreaks: false };
   }
 
   const walker = document.createTreeWalker(element, NodeFilter.SHOW_TEXT, null);
   const range = document.createRange();
-  let result = '';
+  let result = "";
   let previousTop: number | null = null;
   let insertedBreaks = false;
 
   while (walker.nextNode()) {
     const node = walker.currentNode as Text;
-    const nodeText = node.textContent ?? '';
+    const nodeText = node.textContent ?? "";
     for (let index = 0; index < nodeText.length; index += 1) {
       const char = nodeText[index];
       range.setStart(node, index);
       range.setEnd(node, index + 1);
       const rect = range.getClientRects()[0];
 
-      if (previousTop !== null && rect && Math.abs(rect.top - previousTop) > 0.5 && result[result.length - 1] !== '\n') {
-        result += '\n';
+      if (previousTop !== null && rect && Math.abs(rect.top - previousTop) > 0.5 && result[result.length - 1] !== "\n") {
+        result += "\n";
         insertedBreaks = true;
       }
 
@@ -177,14 +172,14 @@ const extractTextWithSoftBreaks = (element: HTMLElement): { text: string; insert
       if (rect) {
         previousTop = rect.top;
       }
-      if (char === '\n') {
+      if (char === "\n") {
         previousTop = null;
       }
     }
   }
 
   return {
-    text: result.replace(/\u00A0/g, ' '),
+    text: result.replace(/\u00A0/g, " "),
     insertedBreaks,
   };
 };
@@ -259,7 +254,7 @@ const analyzePageContentType = (groups: TextGroup[], pageWidth: number): boolean
   const fullWidthThreshold = pageWidth * 0.7;
 
   groups.forEach((group) => {
-    const text = (group.text || '').trim();
+    const text = (group.text || "").trim();
     if (text.length === 0) return;
 
     totalGroups++;
@@ -287,10 +282,11 @@ const analyzePageContentType = (groups: TextGroup[], pageWidth: number): boolean
   const fullWidthRatio = fullWidthLines / totalGroups;
 
   // Calculate variance in line lengths
-  const variance = wordCounts.reduce((sum, count) => {
-    const diff = count - avgWordsPerGroup;
-    return sum + diff * diff;
-  }, 0) / totalGroups;
+  const variance =
+    wordCounts.reduce((sum, count) => {
+      const diff = count - avgWordsPerGroup;
+      return sum + diff * diff;
+    }, 0) / totalGroups;
   const stdDev = Math.sqrt(variance);
   const coefficientOfVariation = avgWordsPerGroup > 0 ? stdDev / avgWordsPerGroup : 0;
 
@@ -317,7 +313,7 @@ const PdfTextEditorView = ({ data }: PdfTextEditorViewProps) => {
   const pendingDragUpdateRef = useRef<number | null>(null);
   const [fontFamilies, setFontFamilies] = useState<Map<string, string>>(new Map());
   const [textScales, setTextScales] = useState<Map<string, number>>(new Map());
-  const measurementKeyRef = useRef<string>('');
+  const measurementKeyRef = useRef<string>("");
   const containerRef = useRef<HTMLDivElement | null>(null);
   const editorRefs = useRef<Map<string, HTMLDivElement>>(new Map());
   const caretOffsetsRef = useRef<Map<string, number>>(new Map());
@@ -335,7 +331,7 @@ const PdfTextEditorView = ({ data }: PdfTextEditorViewProps) => {
   // First-time banner state
   const [showWelcomeBanner, setShowWelcomeBanner] = useState(() => {
     try {
-      return localStorage.getItem('pdfTextEditor.welcomeBannerDismissed') !== 'true';
+      return localStorage.getItem("pdfTextEditor.welcomeBannerDismissed") !== "true";
     } catch {
       return true;
     }
@@ -349,7 +345,7 @@ const PdfTextEditorView = ({ data }: PdfTextEditorViewProps) => {
   const handleDontShowAgain = useCallback(() => {
     // Save to localStorage to never show again
     try {
-      localStorage.setItem('pdfTextEditor.welcomeBannerDismissed', 'true');
+      localStorage.setItem("pdfTextEditor.welcomeBannerDismissed", "true");
     } catch {
       // Ignore localStorage errors
     }
@@ -403,16 +399,20 @@ const PdfTextEditorView = ({ data }: PdfTextEditorViewProps) => {
   console.log(`📐 [PdfTextEditor] Page ${selectedPage + 1} Dimensions:`, {
     pageWidth,
     pageHeight,
-    aspectRatio: pageHeight > 0 ? (pageWidth / pageHeight).toFixed(3) : 'N/A',
-    currentPage: currentPage ? {
-      mediaBox: currentPage.mediaBox,
-      cropBox: currentPage.cropBox,
-      rotation: currentPage.rotation,
-    } : null,
-    documentMetadata: pdfDocument?.metadata ? {
-      title: pdfDocument.metadata.title,
-      pageCount: pages.length,
-    } : null,
+    aspectRatio: pageHeight > 0 ? (pageWidth / pageHeight).toFixed(3) : "N/A",
+    currentPage: currentPage
+      ? {
+          mediaBox: currentPage.mediaBox,
+          cropBox: currentPage.cropBox,
+          rotation: currentPage.rotation,
+        }
+      : null,
+    documentMetadata: pdfDocument?.metadata
+      ? {
+          title: pdfDocument.metadata.title,
+          pageCount: pages.length,
+        }
+      : null,
   });
 
   // Register navigation warning handlers for the global modal
@@ -433,62 +433,68 @@ const PdfTextEditorView = ({ data }: PdfTextEditorViewProps) => {
     widthOverridesRef.current = widthOverrides;
   }, [widthOverrides]);
 
-  const resolveFont = useCallback((fontId: string | null | undefined, pageIndex: number | null | undefined): PdfJsonFont | null => {
-    if (!fontId || !pdfDocument?.fonts) {
-      return null;
-    }
-    const fonts = pdfDocument.fonts;
-    const pageNumber = normalizePageNumber(pageIndex);
-    if (pageNumber !== null) {
-      const pageMatch = fonts.find((font) => font?.id === fontId && font?.pageNumber === pageNumber);
-      if (pageMatch) {
-        return pageMatch;
+  const resolveFont = useCallback(
+    (fontId: string | null | undefined, pageIndex: number | null | undefined): PdfJsonFont | null => {
+      if (!fontId || !pdfDocument?.fonts) {
+        return null;
       }
-      const uidKey = `${pageNumber}:${fontId}`;
-      const uidMatch = fonts.find((font) => font?.uid === uidKey);
-      if (uidMatch) {
-        return uidMatch;
+      const fonts = pdfDocument.fonts;
+      const pageNumber = normalizePageNumber(pageIndex);
+      if (pageNumber !== null) {
+        const pageMatch = fonts.find((font) => font?.id === fontId && font?.pageNumber === pageNumber);
+        if (pageMatch) {
+          return pageMatch;
+        }
+        const uidKey = `${pageNumber}:${fontId}`;
+        const uidMatch = fonts.find((font) => font?.uid === uidKey);
+        if (uidMatch) {
+          return uidMatch;
+        }
       }
-    }
-    const directUid = fonts.find((font) => font?.uid === fontId);
-    if (directUid) {
-      return directUid;
-    }
-    return fonts.find((font) => font?.id === fontId) ?? null;
-  }, [pdfDocument?.fonts]);
-
-  const getFontFamily = useCallback((fontId: string | null | undefined, pageIndex: number | null | undefined): string => {
-    if (!fontId) {
-      return 'sans-serif';
-    }
-
-    const font = resolveFont(fontId, pageIndex);
-    const lookupKeys = buildFontLookupKeys(fontId, font ?? undefined, pageIndex);
-    for (const key of lookupKeys) {
-      const loadedFamily = fontFamilies.get(key);
-      if (loadedFamily) {
-        return `'${loadedFamily}', sans-serif`;
+      const directUid = fonts.find((font) => font?.uid === fontId);
+      if (directUid) {
+        return directUid;
       }
-    }
+      return fonts.find((font) => font?.id === fontId) ?? null;
+    },
+    [pdfDocument?.fonts],
+  );
 
-    const fontName = font?.standard14Name || font?.baseName || '';
-    const lowerName = fontName.toLowerCase();
+  const getFontFamily = useCallback(
+    (fontId: string | null | undefined, pageIndex: number | null | undefined): string => {
+      if (!fontId) {
+        return "sans-serif";
+      }
 
-    if (lowerName.includes('times')) {
-      return '"Times New Roman", Times, serif';
-    }
-    if (lowerName.includes('helvetica') || lowerName.includes('arial')) {
-      return 'Arial, Helvetica, sans-serif';
-    }
-    if (lowerName.includes('courier')) {
-      return '"Courier New", Courier, monospace';
-    }
-    if (lowerName.includes('symbol')) {
-      return 'Symbol, serif';
-    }
+      const font = resolveFont(fontId, pageIndex);
+      const lookupKeys = buildFontLookupKeys(fontId, font ?? undefined, pageIndex);
+      for (const key of lookupKeys) {
+        const loadedFamily = fontFamilies.get(key);
+        if (loadedFamily) {
+          return `'${loadedFamily}', sans-serif`;
+        }
+      }
 
-    return 'Arial, Helvetica, sans-serif';
-  }, [resolveFont, fontFamilies]);
+      const fontName = font?.standard14Name || font?.baseName || "";
+      const lowerName = fontName.toLowerCase();
+
+      if (lowerName.includes("times")) {
+        return '"Times New Roman", Times, serif';
+      }
+      if (lowerName.includes("helvetica") || lowerName.includes("arial")) {
+        return "Arial, Helvetica, sans-serif";
+      }
+      if (lowerName.includes("courier")) {
+        return '"Courier New", Courier, monospace';
+      }
+      if (lowerName.includes("symbol")) {
+        return "Symbol, serif";
+      }
+
+      return "Arial, Helvetica, sans-serif";
+    },
+    [resolveFont, fontFamilies],
+  );
 
   useEffect(() => {
     clearSelection();
@@ -527,11 +533,10 @@ const PdfTextEditorView = ({ data }: PdfTextEditorViewProps) => {
   // Detect if current page contains paragraph-heavy content
   const isParagraphPage = useMemo(() => {
     const result = analyzePageContentType(pageGroups, pageWidth);
-    console.log(`🏷️ Page ${selectedPage} badge: ${result ? 'PARAGRAPH' : 'SPARSE'} (${pageGroups.length} groups)`);
+    console.log(`🏷️ Page ${selectedPage} badge: ${result ? "PARAGRAPH" : "SPARSE"} (${pageGroups.length} groups)`);
     return result;
   }, [pageGroups, pageWidth, selectedPage]);
-  const isParagraphLayout =
-    externalGroupingMode === 'paragraph' || (externalGroupingMode === 'auto' && isParagraphPage);
+  const isParagraphLayout = externalGroupingMode === "paragraph" || (externalGroupingMode === "auto" && isParagraphPage);
 
   const resolveGroupWidth = useCallback(
     (group: TextGroup): { width: number; base: number; max: number } => {
@@ -551,24 +556,22 @@ const PdfTextEditorView = ({ data }: PdfTextEditorViewProps) => {
       .filter((index) => index >= 0)
       .sort((a, b) => a - b);
   }, [pageGroups, selectedGroupIdsArray]);
-  const canMergeSelection = selectionIndices.length >= 2 && selectionIndices.every((value, idx, array) => idx === 0 || value === array[idx - 1] + 1);
-  const paragraphSelectionIds = useMemo(() =>
-    selectedGroupIdsArray.filter((id) => {
-      const target = pageGroups.find((group) => group.id === id);
-      return target ? (target.childLineGroups?.length ?? 0) > 1 : false;
-    }),
-  [pageGroups, selectedGroupIdsArray]);
+  const canMergeSelection =
+    selectionIndices.length >= 2 && selectionIndices.every((value, idx, array) => idx === 0 || value === array[idx - 1] + 1);
+  const paragraphSelectionIds = useMemo(
+    () =>
+      selectedGroupIdsArray.filter((id) => {
+        const target = pageGroups.find((group) => group.id === id);
+        return target ? (target.childLineGroups?.length ?? 0) > 1 : false;
+      }),
+    [pageGroups, selectedGroupIdsArray],
+  );
   const canUngroupSelection = paragraphSelectionIds.length > 0;
   const hasWidthOverrides = selectedGroupIdsArray.some((id) => widthOverrides.has(id));
   const hasSelection = selectedGroupIdsArray.length > 0;
 
   const syncEditorValue = useCallback(
-    (
-      element: HTMLElement,
-      pageIndex: number,
-      groupId: string,
-      options?: { skipCaretRestore?: boolean },
-    ) => {
+    (element: HTMLElement, pageIndex: number, groupId: string, options?: { skipCaretRestore?: boolean }) => {
       const { text: value } = extractTextWithSoftBreaks(element);
       const offset = getCaretOffset(element);
       caretOffsetsRef.current.set(groupId, offset);
@@ -635,11 +638,11 @@ const PdfTextEditorView = ({ data }: PdfTextEditorViewProps) => {
   }, [canUngroupSelection, paragraphSelectionIds, onUngroupGroup, selectedPage, clearSelection]);
 
   const handleWidthAdjustment = useCallback(
-    (mode: 'expand' | 'reset') => {
-      if (mode === 'expand' && !hasSelection) {
+    (mode: "expand" | "reset") => {
+      if (mode === "expand" && !hasSelection) {
         return;
       }
-      if (mode === 'reset' && !hasWidthOverrides) {
+      if (mode === "reset" && !hasWidthOverrides) {
         return;
       }
       const selectedGroups = selectedGroupIdsArray
@@ -653,7 +656,7 @@ const PdfTextEditorView = ({ data }: PdfTextEditorViewProps) => {
         selectedGroups.forEach((group) => {
           const baseWidth = Math.max(group.bounds.right - group.bounds.left, 1);
           const maxWidth = Math.max(pageWidth - group.bounds.left, baseWidth);
-          if (mode === 'expand') {
+          if (mode === "expand") {
             next.set(group.id, maxWidth);
           } else {
             next.delete(group.id);
@@ -737,7 +740,7 @@ const PdfTextEditorView = ({ data }: PdfTextEditorViewProps) => {
   }, [pdfDocument?.fonts]);
 
   useEffect(() => {
-    if (typeof FontFace === 'undefined') {
+    if (typeof FontFace === "undefined") {
       setFontFamilies(new Map());
       return undefined;
     }
@@ -754,16 +757,16 @@ const PdfTextEditorView = ({ data }: PdfTextEditorViewProps) => {
 
       const next = new Map<string, string>();
       const pickFontSource = (
-        font: PdfJsonFont
-      ): { data: string; format?: string | null; source: 'pdfProgram' | 'webProgram' | 'program' } | null => {
+        font: PdfJsonFont,
+      ): { data: string; format?: string | null; source: "pdfProgram" | "webProgram" | "program" } | null => {
         if (font.pdfProgram && font.pdfProgram.length > 0) {
-          return { data: font.pdfProgram, format: font.pdfProgramFormat, source: 'pdfProgram' };
+          return { data: font.pdfProgram, format: font.pdfProgramFormat, source: "pdfProgram" };
         }
         if (font.webProgram && font.webProgram.length > 0) {
-          return { data: font.webProgram, format: font.webProgramFormat, source: 'webProgram' };
+          return { data: font.webProgram, format: font.webProgramFormat, source: "webProgram" };
         }
         if (font.program && font.program.length > 0) {
-          return { data: font.program, format: font.programFormat, source: 'program' };
+          return { data: font.program, format: font.programFormat, source: "program" };
         }
         return null;
       };
@@ -807,7 +810,7 @@ const PdfTextEditorView = ({ data }: PdfTextEditorViewProps) => {
             dataLength: data.length,
             hasPdfProgram: !!font.pdfProgram,
             hasWebProgram: !!font.webProgram,
-            hasProgram: !!font.program
+            hasProgram: !!font.program,
           });
 
           await fontFace.load();
@@ -826,7 +829,7 @@ const PdfTextEditorView = ({ data }: PdfTextEditorViewProps) => {
             formatSource: selection.format,
             hasPdfProgram: !!font.pdfProgram,
             hasWebProgram: !!font.webProgram,
-            hasProgram: !!font.program
+            hasProgram: !!font.program,
           });
           // Fallback to web-safe fonts is already implemented via getFontFamily()
         }
@@ -858,155 +861,157 @@ const PdfTextEditorView = ({ data }: PdfTextEditorViewProps) => {
   }, [pdfDocument?.fonts]);
 
   // Define helper functions that depend on hooks AFTER all hook calls
-  const getFontMetricsFor = useCallback((
-    fontId: string | null | undefined,
-    pageIndex: number | null | undefined,
-  ): { unitsPerEm: number; ascent: number; descent: number } | undefined => {
-    if (!fontId) {
-      return undefined;
-    }
-    const font = resolveFont(fontId, pageIndex);
-    const lookupKeys = buildFontLookupKeys(fontId, font ?? undefined, pageIndex);
-    for (const key of lookupKeys) {
-      const metrics = fontMetrics.get(key);
-      if (metrics) {
-        return metrics;
+  const getFontMetricsFor = useCallback(
+    (
+      fontId: string | null | undefined,
+      pageIndex: number | null | undefined,
+    ): { unitsPerEm: number; ascent: number; descent: number } | undefined => {
+      if (!fontId) {
+        return undefined;
+      }
+      const font = resolveFont(fontId, pageIndex);
+      const lookupKeys = buildFontLookupKeys(fontId, font ?? undefined, pageIndex);
+      for (const key of lookupKeys) {
+        const metrics = fontMetrics.get(key);
+        if (metrics) {
+          return metrics;
+        }
       }
-    }
-    return undefined;
-  }, [resolveFont, fontMetrics]);
-
-  const getLineHeightPx = useCallback((
-    fontId: string | null | undefined,
-    pageIndex: number | null | undefined,
-    fontSizePx: number,
-  ): number => {
-    if (fontSizePx <= 0) {
-      return fontSizePx;
-    }
-    const metrics = getFontMetricsFor(fontId, pageIndex);
-    if (!metrics || metrics.unitsPerEm <= 0) {
-      return fontSizePx * 1.2;
-    }
-    const unitsPerEm = metrics.unitsPerEm > 0 ? metrics.unitsPerEm : 1000;
-    const ascentUnits = metrics.ascent ?? unitsPerEm;
-    const descentUnits = Math.abs(metrics.descent ?? -(unitsPerEm * 0.2));
-    const totalUnits = Math.max(unitsPerEm, ascentUnits + descentUnits);
-    if (totalUnits <= 0) {
-      return fontSizePx * 1.2;
-    }
-    const lineHeight = (totalUnits / unitsPerEm) * fontSizePx;
-    return Math.max(lineHeight, fontSizePx * 1.05);
-  }, [getFontMetricsFor]);
-
-  const getFontGeometry = useCallback((
-    fontId: string | null | undefined,
-    pageIndex: number | null | undefined,
-  ): {
-    unitsPerEm: number;
-    ascentUnits: number;
-    descentUnits: number;
-    totalUnits: number;
-    ascentRatio: number;
-    descentRatio: number;
-  } | undefined => {
-    const metrics = getFontMetricsFor(fontId, pageIndex);
-    if (!metrics) {
       return undefined;
-    }
-    const unitsPerEm = metrics.unitsPerEm > 0 ? metrics.unitsPerEm : 1000;
-    const rawAscent = metrics.ascent ?? unitsPerEm;
-    const rawDescent = metrics.descent ?? -(unitsPerEm * 0.2);
-    const ascentUnits = Number.isFinite(rawAscent) ? rawAscent : unitsPerEm;
-    const descentUnits = Number.isFinite(rawDescent) ? Math.abs(rawDescent) : unitsPerEm * 0.2;
-    const totalUnits = Math.max(unitsPerEm, ascentUnits + descentUnits);
-    if (totalUnits <= 0 || !Number.isFinite(totalUnits)) {
-      return undefined;
-    }
-    return {
-      unitsPerEm,
-      ascentUnits,
-      descentUnits,
-      totalUnits,
-      ascentRatio: ascentUnits / totalUnits,
-      descentRatio: descentUnits / totalUnits,
-    };
-  }, [getFontMetricsFor]);
+    },
+    [resolveFont, fontMetrics],
+  );
 
-  const getFontWeight = useCallback((
-    fontId: string | null | undefined,
-    pageIndex: number | null | undefined,
-  ): number | 'normal' | 'bold' => {
-    if (!fontId) {
-      return 'normal';
-    }
-    const font = resolveFont(fontId, pageIndex);
-    if (!font || !font.fontDescriptorFlags) {
-      return 'normal';
-    }
+  const getLineHeightPx = useCallback(
+    (fontId: string | null | undefined, pageIndex: number | null | undefined, fontSizePx: number): number => {
+      if (fontSizePx <= 0) {
+        return fontSizePx;
+      }
+      const metrics = getFontMetricsFor(fontId, pageIndex);
+      if (!metrics || metrics.unitsPerEm <= 0) {
+        return fontSizePx * 1.2;
+      }
+      const unitsPerEm = metrics.unitsPerEm > 0 ? metrics.unitsPerEm : 1000;
+      const ascentUnits = metrics.ascent ?? unitsPerEm;
+      const descentUnits = Math.abs(metrics.descent ?? -(unitsPerEm * 0.2));
+      const totalUnits = Math.max(unitsPerEm, ascentUnits + descentUnits);
+      if (totalUnits <= 0) {
+        return fontSizePx * 1.2;
+      }
+      const lineHeight = (totalUnits / unitsPerEm) * fontSizePx;
+      return Math.max(lineHeight, fontSizePx * 1.05);
+    },
+    [getFontMetricsFor],
+  );
 
-    // PDF font descriptor flag bit 18 (value 262144 = 0x40000) indicates ForceBold
-    const FORCE_BOLD_FLAG = 262144;
-    if ((font.fontDescriptorFlags & FORCE_BOLD_FLAG) !== 0) {
-      return 'bold';
-    }
+  const getFontGeometry = useCallback(
+    (
+      fontId: string | null | undefined,
+      pageIndex: number | null | undefined,
+    ):
+      | {
+          unitsPerEm: number;
+          ascentUnits: number;
+          descentUnits: number;
+          totalUnits: number;
+          ascentRatio: number;
+          descentRatio: number;
+        }
+      | undefined => {
+      const metrics = getFontMetricsFor(fontId, pageIndex);
+      if (!metrics) {
+        return undefined;
+      }
+      const unitsPerEm = metrics.unitsPerEm > 0 ? metrics.unitsPerEm : 1000;
+      const rawAscent = metrics.ascent ?? unitsPerEm;
+      const rawDescent = metrics.descent ?? -(unitsPerEm * 0.2);
+      const ascentUnits = Number.isFinite(rawAscent) ? rawAscent : unitsPerEm;
+      const descentUnits = Number.isFinite(rawDescent) ? Math.abs(rawDescent) : unitsPerEm * 0.2;
+      const totalUnits = Math.max(unitsPerEm, ascentUnits + descentUnits);
+      if (totalUnits <= 0 || !Number.isFinite(totalUnits)) {
+        return undefined;
+      }
+      return {
+        unitsPerEm,
+        ascentUnits,
+        descentUnits,
+        totalUnits,
+        ascentRatio: ascentUnits / totalUnits,
+        descentRatio: descentUnits / totalUnits,
+      };
+    },
+    [getFontMetricsFor],
+  );
 
-    // Also check if font name contains "Bold"
-    const fontName = font.standard14Name || font.baseName || '';
-    if (fontName.toLowerCase().includes('bold')) {
-      return 'bold';
-    }
+  const getFontWeight = useCallback(
+    (fontId: string | null | undefined, pageIndex: number | null | undefined): number | "normal" | "bold" => {
+      if (!fontId) {
+        return "normal";
+      }
+      const font = resolveFont(fontId, pageIndex);
+      if (!font || !font.fontDescriptorFlags) {
+        return "normal";
+      }
 
-    return 'normal';
-  }, [resolveFont]);
+      // PDF font descriptor flag bit 18 (value 262144 = 0x40000) indicates ForceBold
+      const FORCE_BOLD_FLAG = 262144;
+      if ((font.fontDescriptorFlags & FORCE_BOLD_FLAG) !== 0) {
+        return "bold";
+      }
+
+      // Also check if font name contains "Bold"
+      const fontName = font.standard14Name || font.baseName || "";
+      if (fontName.toLowerCase().includes("bold")) {
+        return "bold";
+      }
+
+      return "normal";
+    },
+    [resolveFont],
+  );
 
   const visibleGroups = useMemo(
     () =>
       pageGroups
         .map((group, index) => ({ group, pageGroupIndex: index }))
         .filter(({ group }) => {
-          const hasContent =
-            ((group.text ?? '').trim().length > 0) ||
-            ((group.originalText ?? '').trim().length > 0);
+          const hasContent = (group.text ?? "").trim().length > 0 || (group.originalText ?? "").trim().length > 0;
           return hasContent || editingGroupId === group.id;
         }),
     [editingGroupId, pageGroups],
   );
 
-const orderedImages = useMemo(
-  () =>
-    [...pageImages].sort(
-      (first, second) => (first?.zOrder ?? -1_000_000) - (second?.zOrder ?? -1_000_000),
-    ),
-  [pageImages],
-);
-const scale = useMemo(() => {
-  const calculatedScale = Math.min(MAX_RENDER_WIDTH / pageWidth, 2.5);
-  console.log(`🔍 [PdfTextEditor] Scale Calculation:`, {
-    MAX_RENDER_WIDTH,
-    pageWidth,
-    pageHeight,
-    calculatedScale: calculatedScale.toFixed(3),
-    scaledWidth: (pageWidth * calculatedScale).toFixed(2),
-    scaledHeight: (pageHeight * calculatedScale).toFixed(2),
-  });
-  return calculatedScale;
-}, [pageWidth, pageHeight]);
-const scaledWidth = pageWidth * scale;
-const scaledHeight = pageHeight * scale;
-const selectionToolbarPosition = useMemo(() => {
-  if (!hasSelection) {
-    return null;
-  }
-  const firstSelected = pageGroups.find((group) => selectedGroupIds.has(group.id));
-  if (!firstSelected) {
-    return null;
-  }
-  const bounds = toCssBounds(currentPage, pageHeight, scale, firstSelected.bounds);
-  const top = Math.max(bounds.top - 40, 8);
-  const left = Math.min(Math.max(bounds.left, 8), Math.max(scaledWidth - 220, 8));
-  return { left, top };
-}, [hasSelection, pageGroups, selectedGroupIds, currentPage, pageHeight, scale, scaledWidth]);
+  const orderedImages = useMemo(
+    () => [...pageImages].sort((first, second) => (first?.zOrder ?? -1_000_000) - (second?.zOrder ?? -1_000_000)),
+    [pageImages],
+  );
+  const scale = useMemo(() => {
+    const calculatedScale = Math.min(MAX_RENDER_WIDTH / pageWidth, 2.5);
+    console.log(`🔍 [PdfTextEditor] Scale Calculation:`, {
+      MAX_RENDER_WIDTH,
+      pageWidth,
+      pageHeight,
+      calculatedScale: calculatedScale.toFixed(3),
+      scaledWidth: (pageWidth * calculatedScale).toFixed(2),
+      scaledHeight: (pageHeight * calculatedScale).toFixed(2),
+    });
+    return calculatedScale;
+  }, [pageWidth, pageHeight]);
+  const scaledWidth = pageWidth * scale;
+  const scaledHeight = pageHeight * scale;
+  const selectionToolbarPosition = useMemo(() => {
+    if (!hasSelection) {
+      return null;
+    }
+    const firstSelected = pageGroups.find((group) => selectedGroupIds.has(group.id));
+    if (!firstSelected) {
+      return null;
+    }
+    const bounds = toCssBounds(currentPage, pageHeight, scale, firstSelected.bounds);
+    const top = Math.max(bounds.top - 40, 8);
+    const left = Math.min(Math.max(bounds.left, 8), Math.max(scaledWidth - 220, 8));
+    return { left, top };
+  }, [hasSelection, pageGroups, selectedGroupIds, currentPage, pageHeight, scale, scaledWidth]);
 
   useEffect(() => {
     if (!hasDocument || !hasVectorPreview) {
@@ -1023,7 +1028,7 @@ const selectionToolbarPosition = useMemo(() => {
     setEditingGroupId(null);
     setActiveImageId(null);
     setTextScales(new Map());
-    measurementKeyRef.current = '';
+    measurementKeyRef.current = "";
   }, [selectedPage]);
 
   // Measure text widths once per page/configuration and apply static scaling
@@ -1031,7 +1036,7 @@ const selectionToolbarPosition = useMemo(() => {
     if (!autoScaleText) {
       // Clear all scales when auto-scale is disabled
       setTextScales(new Map());
-      measurementKeyRef.current = '';
+      measurementKeyRef.current = "";
       return;
     }
 
@@ -1063,7 +1068,7 @@ const selectionToolbarPosition = useMemo(() => {
           return;
         }
 
-        const lineCount = (group.text || '').split('\n').length;
+        const lineCount = (group.text || "").split("\n").length;
 
         // Skip multi-line paragraphs - auto-scaling doesn't work well with wrapped text
         if (lineCount > 1) {
@@ -1076,14 +1081,14 @@ const selectionToolbarPosition = useMemo(() => {
           return;
         }
 
-        const textSpan = element.querySelector<HTMLSpanElement>('span[data-text-content]');
+        const textSpan = element.querySelector<HTMLSpanElement>("span[data-text-content]");
         if (!textSpan) {
           return;
         }
 
         // Temporarily remove any existing transform to get natural width
         const originalTransform = textSpan.style.transform;
-        textSpan.style.transform = 'none';
+        textSpan.style.transform = "none";
 
         const _bounds = toCssBounds(currentPage, pageHeight, scale, group.bounds);
         const { width: resolvedWidth } = resolveGroupWidth(group);
@@ -1258,10 +1263,7 @@ const selectionToolbarPosition = useMemo(() => {
         moveEvent.preventDefault();
         const deltaPx = moveEvent.clientX - context.startX;
         const deltaWidth = deltaPx / scale;
-        const nextWidth = Math.min(
-          Math.max(context.startWidth + deltaWidth, context.baseWidth),
-          context.maxWidth,
-        );
+        const nextWidth = Math.min(Math.max(context.startWidth + deltaWidth, context.baseWidth), context.maxWidth);
         setWidthOverrides((prev) => {
           const next = new Map(prev);
           if (Math.abs(nextWidth - context.baseWidth) <= 0.5) {
@@ -1274,8 +1276,8 @@ const selectionToolbarPosition = useMemo(() => {
       };
       const handleMouseUp = () => {
         resizingRef.current = null;
-        window.removeEventListener('mousemove', handleMouseMove);
-        window.removeEventListener('mouseup', handleMouseUp);
+        window.removeEventListener("mousemove", handleMouseMove);
+        window.removeEventListener("mouseup", handleMouseUp);
       };
       resizingRef.current = {
         groupId: group.id,
@@ -1284,8 +1286,8 @@ const selectionToolbarPosition = useMemo(() => {
         baseWidth,
         maxWidth,
       };
-      window.addEventListener('mousemove', handleMouseMove);
-      window.addEventListener('mouseup', handleMouseUp);
+      window.addEventListener("mousemove", handleMouseMove);
+      window.addEventListener("mouseup", handleMouseUp);
     },
     [pageWidth, scale],
   );
@@ -1304,34 +1306,34 @@ const selectionToolbarPosition = useMemo(() => {
     <Box
       component="div"
       style={{
-        width: 'calc(100% + 4px)',
-        height: 'calc(100% + 6px)',
-        marginLeft: '-2px',
-        marginTop: '-3px',
+        width: "calc(100% + 4px)",
+        height: "calc(100% + 6px)",
+        marginLeft: "-2px",
+        marginTop: "-3px",
         outline: isActive
-          ? '2px solid var(--mantine-color-blue-5)'
+          ? "2px solid var(--mantine-color-blue-5)"
           : isSelected
-            ? '1px solid var(--mantine-color-violet-5)'
+            ? "1px solid var(--mantine-color-violet-5)"
             : isChanged
-              ? '1px solid var(--mantine-color-yellow-5)'
-              : 'none',
-        outlineOffset: '-1px',
+              ? "1px solid var(--mantine-color-yellow-5)"
+              : "none",
+        outlineOffset: "-1px",
         borderRadius: 6,
         backgroundColor: isActive
-          ? 'rgba(184,212,255,0.35)'
+          ? "rgba(184,212,255,0.35)"
           : isSelected
-            ? 'rgba(206,190,255,0.32)'
+            ? "rgba(206,190,255,0.32)"
             : isChanged
-              ? 'rgba(250,255,189,0.28)'
-              : 'transparent',
-        transition: 'outline 120ms ease, background-color 120ms ease',
-        pointerEvents: 'auto',
-        overflow: 'visible',
-        display: 'flex',
-        alignItems: 'flex-start',
-        justifyContent: 'flex-start',
-        padding: '3px 2px 3px 2px',
-        position: 'relative',
+              ? "rgba(250,255,189,0.28)"
+              : "transparent",
+        transition: "outline 120ms ease, background-color 120ms ease",
+        pointerEvents: "auto",
+        overflow: "visible",
+        display: "flex",
+        alignItems: "flex-start",
+        justifyContent: "flex-start",
+        padding: "3px 2px 3px 2px",
+        position: "relative",
       }}
       onClick={(event) => {
         event.stopPropagation();
@@ -1351,12 +1353,12 @@ const selectionToolbarPosition = useMemo(() => {
           color="red"
           radius="xl"
           style={{
-            position: 'absolute',
+            position: "absolute",
             top: -8,
             right: -8,
             zIndex: 9999,
-            cursor: 'pointer',
-            pointerEvents: 'auto',
+            cursor: "pointer",
+            pointerEvents: "auto",
           }}
           onMouseDown={(event) => {
             console.log(`❌ MOUSEDOWN on X button for group ${groupId}`);
@@ -1365,8 +1367,8 @@ const selectionToolbarPosition = useMemo(() => {
 
             // Find the current group to check if it's already empty
             const currentGroups = groupsByPage[pageIndex] ?? [];
-            const currentGroup = currentGroups.find(g => g.id === groupId);
-            const currentText = (currentGroup?.text ?? '').trim();
+            const currentGroup = currentGroups.find((g) => g.id === groupId);
+            const currentText = (currentGroup?.text ?? "").trim();
 
             if (currentText.length === 0) {
               // Already empty - remove the textbox entirely
@@ -1377,7 +1379,7 @@ const selectionToolbarPosition = useMemo(() => {
             } else {
               // Has text - clear it but keep the textbox
               console.log(`   Clearing text (textbox remains)`);
-              onGroupEdit(pageIndex, groupId, '');
+              onGroupEdit(pageIndex, groupId, "");
             }
             console.log(`   Operation completed`);
           }}
@@ -1394,13 +1396,7 @@ const selectionToolbarPosition = useMemo(() => {
   );
 
   const emitImageTransform = useCallback(
-    (
-      imageId: string,
-      leftPx: number,
-      topPx: number,
-      widthPx: number,
-      heightPx: number,
-    ) => {
+    (imageId: string, leftPx: number, topPx: number, widthPx: number, heightPx: number) => {
       const rawLeft = leftPx / scale;
       const rawTop = pageHeight - topPx / scale;
       const width = Math.max(widthPx / scale, 0.01);
@@ -1420,60 +1416,54 @@ const selectionToolbarPosition = useMemo(() => {
       gap="xl"
       className="h-full"
       style={{
-        padding: '1.5rem',
-        overflow: 'hidden',
-        height: '100%',
-        display: 'flex',
-        flexDirection: 'column',
+        padding: "1.5rem",
+        overflow: "hidden",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
       }}
     >
       {errorMessage && (
-        <Alert
-          icon={<WarningAmberIcon fontSize="small" />}
-          color="red"
-          radius="md"
-          mb="md"
-        >
+        <Alert icon={<WarningAmberIcon fontSize="small" />} color="red" radius="md" mb="md">
           {errorMessage}
         </Alert>
       )}
 
       {!hasDocument && !isConverting && (
-        <Stack
-          align="center"
-          justify="center"
-          style={{ flex: 1, height: '100%' }}
-        >
+        <Stack align="center" justify="center" style={{ flex: 1, height: "100%" }}>
           <Dropzone
             onDrop={(files) => {
               if (files.length > 0) {
                 onLoadFile(files[0]);
               }
             }}
-            accept={['application/pdf', 'application/json']}
+            accept={["application/pdf", "application/json"]}
             maxFiles={1}
             style={{
-              width: '100%',
+              width: "100%",
               maxWidth: 480,
               minHeight: 200,
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              border: '2px dashed var(--mantine-color-gray-4)',
-              borderRadius: 'var(--mantine-radius-lg)',
-              cursor: 'pointer',
-              transition: 'border-color 150ms ease, background-color 150ms ease',
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              border: "2px dashed var(--mantine-color-gray-4)",
+              borderRadius: "var(--mantine-radius-lg)",
+              cursor: "pointer",
+              transition: "border-color 150ms ease, background-color 150ms ease",
             }}
           >
-            <Stack align="center" gap="md" style={{ pointerEvents: 'none' }}>
-              <UploadFileIcon sx={{ fontSize: 48, color: 'var(--mantine-color-blue-5)' }} />
+            <Stack align="center" gap="md" style={{ pointerEvents: "none" }}>
+              <UploadFileIcon sx={{ fontSize: 48, color: "var(--mantine-color-blue-5)" }} />
               <Text size="lg" fw={600}>
-                {t('pdfTextEditor.empty.title', 'No document loaded')}
+                {t("pdfTextEditor.empty.title", "No document loaded")}
               </Text>
               <Text size="sm" c="dimmed" ta="center" maw={420}>
                 {activeFiles.length > 0
-                  ? t('pdfTextEditor.empty.dropzoneWithFiles', 'Select a file from the Files tab, or drag and drop a PDF here, or click to browse')
-                  : t('pdfTextEditor.empty.dropzone', 'Drag and drop a PDF here, or click to browse')}
+                  ? t(
+                      "pdfTextEditor.empty.dropzoneWithFiles",
+                      "Select a file from the Files tab, or drag and drop a PDF here, or click to browse",
+                    )
+                  : t("pdfTextEditor.empty.dropzone", "Drag and drop a PDF here, or click to browse")}
               </Text>
             </Stack>
           </Dropzone>
@@ -1488,19 +1478,18 @@ const selectionToolbarPosition = useMemo(() => {
                 <Text size="lg" fw={600} mb="xs">
                   {conversionProgress
                     ? conversionProgress.message
-                    : t('pdfTextEditor.converting', 'Converting PDF to editable format...')}
+                    : t("pdfTextEditor.converting", "Converting PDF to editable format...")}
                 </Text>
                 {conversionProgress && (
                   <Group gap="xs">
                     <Text size="sm" c="dimmed" tt="capitalize">
                       {t(`pdfTextEditor.stages.${conversionProgress.stage}`, conversionProgress.stage)}
                     </Text>
-                    {conversionProgress.current !== undefined &&
-                      conversionProgress.total !== undefined && (
-                        <Text size="sm" c="dimmed">
-                          • Page {conversionProgress.current} of {conversionProgress.total}
-                        </Text>
-                      )}
+                    {conversionProgress.current !== undefined && conversionProgress.total !== undefined && (
+                      <Text size="sm" c="dimmed">
+                        • Page {conversionProgress.current} of {conversionProgress.total}
+                      </Text>
+                    )}
                   </Group>
                 )}
               </div>
@@ -1518,33 +1507,28 @@ const selectionToolbarPosition = useMemo(() => {
           style={{
             minHeight: 0,
             flex: 1,
-            overflow: 'hidden',
+            overflow: "hidden",
           }}
         >
           <Group justify="space-between" align="center">
             <Group gap="sm">
               <Text fw={500}>
-                {t('pdfTextEditor.pageSummary', 'Page {{number}} of {{total}}', {
+                {t("pdfTextEditor.pageSummary", "Page {{number}} of {{total}}", {
                   number: selectedPage + 1,
                   total: pages.length,
                 })}
               </Text>
               {dirtyPages[selectedPage] && (
                 <Badge color="yellow" size="xs">
-                  {t('pdfTextEditor.badges.modified', 'Edited')}
+                  {t("pdfTextEditor.badges.modified", "Edited")}
                 </Badge>
               )}
               <Badge color="blue" variant="dot" size="xs">
-                {t('pdfTextEditor.badges.earlyAccess', 'Early Access')}
+                {t("pdfTextEditor.badges.earlyAccess", "Early Access")}
               </Badge>
             </Group>
             {pages.length > 1 && (
-              <Pagination
-                value={selectedPage + 1}
-                onChange={handlePageChange}
-                total={pages.length}
-                size="sm"
-              />
+              <Pagination value={selectedPage + 1} onChange={handlePageChange} total={pages.length} size="sm" />
             )}
           </Group>
 
@@ -1554,12 +1538,7 @@ const selectionToolbarPosition = useMemo(() => {
             title={
               <Group gap="xs">
                 <InfoOutlinedIcon fontSize="small" />
-                <Text fw={600}>
-                  {t(
-                    'pdfTextEditor.welcomeBanner.title',
-                    'Welcome to PDF Text Editor (Early Access)',
-                  )}
-                </Text>
+                <Text fw={600}>{t("pdfTextEditor.welcomeBanner.title", "Welcome to PDF Text Editor (Early Access)")}</Text>
               </Group>
             }
             centered
@@ -1568,33 +1547,33 @@ const selectionToolbarPosition = useMemo(() => {
           >
             <div
               style={{
-                display: 'flex',
-                flexDirection: 'column',
-                maxHeight: '70vh',
-                width: '100%',
+                display: "flex",
+                flexDirection: "column",
+                maxHeight: "70vh",
+                width: "100%",
               }}
             >
               {/* Header (fixed) */}
               <div
                 style={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  gap: '0.5rem',
-                  marginBottom: '0.75rem',
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "0.5rem",
+                  marginBottom: "0.75rem",
                 }}
               >
                 <Alert color="orange" variant="light" radius="md">
                   <Text size="sm" fw={500}>
                     {t(
-                      'pdfTextEditor.welcomeBanner.experimental',
-                      'This is an experimental feature in active development. Expect some instability and issues during use.',
+                      "pdfTextEditor.welcomeBanner.experimental",
+                      "This is an experimental feature in active development. Expect some instability and issues during use.",
                     )}
                   </Text>
                 </Alert>
                 <Text size="sm">
                   {t(
-                    'pdfTextEditor.welcomeBanner.howItWorks',
-                    'This tool converts your PDF to an editable format where you can modify text content and reposition images. Changes are saved back as a new PDF.',
+                    "pdfTextEditor.welcomeBanner.howItWorks",
+                    "This tool converts your PDF to an editable format where you can modify text content and reposition images. Changes are saved back as a new PDF.",
                   )}
                 </Text>
               </div>
@@ -1604,139 +1583,84 @@ const selectionToolbarPosition = useMemo(() => {
                 style={{
                   flex: 1,
                   minHeight: 0,
-                  overflowY: 'auto',
-                  paddingRight: '0.25rem',
+                  overflowY: "auto",
+                  paddingRight: "0.25rem",
                 }}
               >
                 <div
                   style={{
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: '0.5rem',
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "0.5rem",
                   }}
                 >
                   <Divider />
                   <Text size="sm" fw={500} c="green.7">
-                    {t('pdfTextEditor.welcomeBanner.bestFor', 'Works Best With:')}
+                    {t("pdfTextEditor.welcomeBanner.bestFor", "Works Best With:")}
                   </Text>
-                  <Text
-                    size="sm"
-                    component="ul"
-                    style={{ marginLeft: '1rem', marginTop: '0.25rem' }}
-                  >
-                    <li>
-                      {t(
-                        'pdfTextEditor.welcomeBanner.bestFor1',
-                        'Simple PDFs containing primarily text and images',
-                      )}
-                    </li>
-                    <li>
-                      {t(
-                        'pdfTextEditor.welcomeBanner.bestFor2',
-                        'Documents with standard paragraph formatting',
-                      )}
-                    </li>
-                    <li>
-                      {t(
-                        'pdfTextEditor.welcomeBanner.bestFor3',
-                        'Letters, essays, reports, and basic documents',
-                      )}
-                    </li>
+                  <Text size="sm" component="ul" style={{ marginLeft: "1rem", marginTop: "0.25rem" }}>
+                    <li>{t("pdfTextEditor.welcomeBanner.bestFor1", "Simple PDFs containing primarily text and images")}</li>
+                    <li>{t("pdfTextEditor.welcomeBanner.bestFor2", "Documents with standard paragraph formatting")}</li>
+                    <li>{t("pdfTextEditor.welcomeBanner.bestFor3", "Letters, essays, reports, and basic documents")}</li>
                   </Text>
                   <Divider />
                   <Text size="sm" fw={500} c="orange.7">
-                    {t('pdfTextEditor.welcomeBanner.notIdealFor', 'Not Ideal For:')}
+                    {t("pdfTextEditor.welcomeBanner.notIdealFor", "Not Ideal For:")}
                   </Text>
-                  <Text
-                    size="sm"
-                    component="ul"
-                    style={{ marginLeft: '1rem', marginTop: '0.25rem' }}
-                  >
+                  <Text size="sm" component="ul" style={{ marginLeft: "1rem", marginTop: "0.25rem" }}>
                     <li>
                       {t(
-                        'pdfTextEditor.welcomeBanner.notIdealFor1',
-                        'PDFs with special formatting like bullet points, tables, or multi-column layouts',
+                        "pdfTextEditor.welcomeBanner.notIdealFor1",
+                        "PDFs with special formatting like bullet points, tables, or multi-column layouts",
                       )}
                     </li>
                     <li>
-                      {t(
-                        'pdfTextEditor.welcomeBanner.notIdealFor2',
-                        'Magazines, brochures, or heavily designed documents',
-                      )}
-                    </li>
-                    <li>
-                      {t(
-                        'pdfTextEditor.welcomeBanner.notIdealFor3',
-                        'Instruction manuals with complex layouts',
-                      )}
+                      {t("pdfTextEditor.welcomeBanner.notIdealFor2", "Magazines, brochures, or heavily designed documents")}
                     </li>
+                    <li>{t("pdfTextEditor.welcomeBanner.notIdealFor3", "Instruction manuals with complex layouts")}</li>
                   </Text>
                   <Divider />
                   <Text size="sm" fw={500}>
-                    {t('pdfTextEditor.welcomeBanner.limitations', 'Current Limitations:')}
+                    {t("pdfTextEditor.welcomeBanner.limitations", "Current Limitations:")}
                   </Text>
-                  <Text
-                    size="sm"
-                    component="ul"
-                    style={{ marginLeft: '1rem', marginTop: '0.25rem' }}
-                  >
+                  <Text size="sm" component="ul" style={{ marginLeft: "1rem", marginTop: "0.25rem" }}>
                     <li>
                       {t(
-                        'pdfTextEditor.welcomeBanner.limitation1',
-                        'Font rendering may differ slightly from the original PDF',
+                        "pdfTextEditor.welcomeBanner.limitation1",
+                        "Font rendering may differ slightly from the original PDF",
                       )}
                     </li>
                     <li>
                       {t(
-                        'pdfTextEditor.welcomeBanner.limitation2',
-                        'Complex graphics, form fields, and annotations are preserved but not editable',
-                      )}
-                    </li>
-                    <li>
-                      {t(
-                        'pdfTextEditor.welcomeBanner.limitation3',
-                        'Large files may take time to convert and process',
+                        "pdfTextEditor.welcomeBanner.limitation2",
+                        "Complex graphics, form fields, and annotations are preserved but not editable",
                       )}
                     </li>
+                    <li>{t("pdfTextEditor.welcomeBanner.limitation3", "Large files may take time to convert and process")}</li>
                   </Text>
                   <Divider />
                   <Text size="sm" fw={500}>
-                    {t('pdfTextEditor.welcomeBanner.knownIssues', 'Known Issues (Being Fixed):')}
+                    {t("pdfTextEditor.welcomeBanner.knownIssues", "Known Issues (Being Fixed):")}
                   </Text>
-                  <Text
-                    size="sm"
-                    component="ul"
-                    style={{ marginLeft: '1rem', marginTop: '0.25rem' }}
-                  >
+                  <Text size="sm" component="ul" style={{ marginLeft: "1rem", marginTop: "0.25rem" }}>
+                    <li>
+                      {t("pdfTextEditor.welcomeBanner.issue1", "Text colour is not currently preserved (will be added soon)")}
+                    </li>
                     <li>
                       {t(
-                        'pdfTextEditor.welcomeBanner.issue1',
-                        'Text colour is not currently preserved (will be added soon)',
+                        "pdfTextEditor.welcomeBanner.issue2",
+                        "Paragraph mode has more alignment and spacing issues - Single Line mode recommended",
                       )}
                     </li>
                     <li>
                       {t(
-                        'pdfTextEditor.welcomeBanner.issue2',
-                        'Paragraph mode has more alignment and spacing issues - Single Line mode recommended',
+                        "pdfTextEditor.welcomeBanner.issue3",
+                        "The preview display differs from the exported PDF - exported PDFs are closer to the original",
                       )}
                     </li>
+                    <li>{t("pdfTextEditor.welcomeBanner.issue4", "Rotated text alignment may need manual adjustment")}</li>
                     <li>
-                      {t(
-                        'pdfTextEditor.welcomeBanner.issue3',
-                        'The preview display differs from the exported PDF - exported PDFs are closer to the original',
-                      )}
-                    </li>
-                    <li>
-                      {t(
-                        'pdfTextEditor.welcomeBanner.issue4',
-                        'Rotated text alignment may need manual adjustment',
-                      )}
-                    </li>
-                    <li>
-                      {t(
-                        'pdfTextEditor.welcomeBanner.issue5',
-                        'Transparency and layering effects may vary from original',
-                      )}
+                      {t("pdfTextEditor.welcomeBanner.issue5", "Transparency and layering effects may vary from original")}
                     </li>
                   </Text>
                 </div>
@@ -1745,22 +1669,22 @@ const selectionToolbarPosition = useMemo(() => {
               {/* Footer (fixed) */}
               <div
                 style={{
-                  marginTop: '0.75rem',
+                  marginTop: "0.75rem",
                 }}
               >
                 <Divider />
                 <Text size="xs" c="dimmed" mt="xs">
                   {t(
-                    'pdfTextEditor.welcomeBanner.feedback',
-                    'This is an early access feature. Please report any issues you encounter to help us improve!',
+                    "pdfTextEditor.welcomeBanner.feedback",
+                    "This is an early access feature. Please report any issues you encounter to help us improve!",
                   )}
                 </Text>
                 <Group justify="flex-end" gap="sm" mt="xs">
                   <Button variant="default" onClick={handleDismissWelcomeBanner}>
-                    {t('pdfTextEditor.welcomeBanner.gotIt', 'Got it')}
+                    {t("pdfTextEditor.welcomeBanner.gotIt", "Got it")}
                   </Button>
                   <Button onClick={handleDontShowAgain}>
-                    {t('pdfTextEditor.welcomeBanner.dontShowAgain', "Don't show again")}
+                    {t("pdfTextEditor.welcomeBanner.dontShowAgain", "Don't show again")}
                   </Button>
                 </Group>
               </div>
@@ -1772,35 +1696,35 @@ const selectionToolbarPosition = useMemo(() => {
             padding="md"
             radius="md"
             shadow="xs"
-            style={{ flex: 1, minHeight: 0, height: '100%', overflow: 'hidden' }}
+            style={{ flex: 1, minHeight: 0, height: "100%", overflow: "hidden" }}
           >
-            <ScrollArea style={{ height: '100%', maxHeight: '100%' }} offsetScrollbars>
+            <ScrollArea style={{ height: "100%", maxHeight: "100%" }} offsetScrollbars>
               <Box
                 style={{
-                  display: 'flex',
-                  justifyContent: 'center',
-                  alignItems: 'flex-start',
-                  width: '100%',
-                  minHeight: '100%',
+                  display: "flex",
+                  justifyContent: "center",
+                  alignItems: "flex-start",
+                  width: "100%",
+                  minHeight: "100%",
                 }}
               >
                 <Box
                   style={{
-                    background: '#f3f4f6',
-                    padding: '0.5rem',
-                    borderRadius: '0.75rem',
+                    background: "#f3f4f6",
+                    padding: "0.5rem",
+                    borderRadius: "0.75rem",
                   }}
                   onClick={handleBackgroundClick}
                 >
                   <Box
                     style={{
-                      position: 'relative',
+                      position: "relative",
                       width: `${scaledWidth}px`,
                       height: `${scaledHeight}px`,
-                      backgroundColor: '#ffffff',
-                      boxShadow: '0 0 12px rgba(15, 23, 42, 0.12)',
-                      borderRadius: '0.5rem',
-                      overflow: 'hidden',
+                      backgroundColor: "#ffffff",
+                      boxShadow: "0 0 12px rgba(15, 23, 42, 0.12)",
+                      borderRadius: "0.5rem",
+                      overflow: "hidden",
                     }}
                     ref={(node) => {
                       containerRef.current = node;
@@ -1818,15 +1742,15 @@ const selectionToolbarPosition = useMemo(() => {
                     {pagePreview && (
                       <img
                         src={pagePreview}
-                        alt={t('pdfTextEditor.pagePreviewAlt', 'Page preview')}
+                        alt={t("pdfTextEditor.pagePreviewAlt", "Page preview")}
                         style={{
-                          position: 'absolute',
+                          position: "absolute",
                           inset: 0,
-                          width: '100%',
-                          height: '100%',
-                          objectFit: 'contain',
-                          pointerEvents: 'none',
-                          userSelect: 'none',
+                          width: "100%",
+                          height: "100%",
+                          objectFit: "contain",
+                          pointerEvents: "none",
+                          userSelect: "none",
                           zIndex: 0,
                         }}
                       />
@@ -1835,15 +1759,15 @@ const selectionToolbarPosition = useMemo(() => {
                       <Group
                         gap={6}
                         style={{
-                          position: 'absolute',
+                          position: "absolute",
                           left: `${selectionToolbarPosition.left}px`,
                           top: `${selectionToolbarPosition.top}px`,
                           zIndex: 3_000_000,
-                          backgroundColor: 'rgba(15, 23, 42, 0.92)',
+                          backgroundColor: "rgba(15, 23, 42, 0.92)",
                           borderRadius: 999,
-                          padding: '4px 8px',
-                          boxShadow: '0 4px 16px rgba(15, 23, 42, 0.45)',
-                          pointerEvents: 'auto',
+                          padding: "4px 8px",
+                          boxShadow: "0 4px 16px rgba(15, 23, 42, 0.45)",
+                          pointerEvents: "auto",
                         }}
                         onMouseDown={(event) => {
                           event.stopPropagation();
@@ -1852,548 +1776,531 @@ const selectionToolbarPosition = useMemo(() => {
                           event.stopPropagation();
                         }}
                       >
-                {canMergeSelection && (
-                  <Tooltip label={t('pdfTextEditor.manual.mergeTooltip', 'Merge selected boxes')}>
-                    <ActionIcon
-                      size="sm"
-                      variant="light"
-                      color="blue"
-                      aria-label={t('pdfTextEditor.manual.merge', 'Merge selection')}
-                      onClick={handleMergeSelection}
-                    >
-                      <MergeTypeIcon fontSize="small" />
-                    </ActionIcon>
-                  </Tooltip>
-                )}
-                {canUngroupSelection && (
-                  <Tooltip label={t('pdfTextEditor.manual.ungroupTooltip', 'Split paragraph back into lines')}>
-                    <ActionIcon
-                      size="sm"
-                      variant="light"
-                      color="blue"
-                      aria-label={t('pdfTextEditor.manual.ungroup', 'Ungroup selection')}
-                      onClick={handleUngroupSelection}
-                    >
-                      <CallSplitIcon fontSize="small" />
-                    </ActionIcon>
-                  </Tooltip>
-                )}
-                <Menu withinPortal position="bottom-end" shadow="md" disabled={!hasSelection && !hasWidthOverrides}>
-                  <Menu.Target>
-                    <ActionIcon
-                      size="sm"
-                      variant="light"
-                      color="blue"
-                      aria-label={t('pdfTextEditor.manual.widthMenu', 'Width options')}
-                      onMouseDown={(event) => event.stopPropagation()}
-                      onClick={(event) => event.stopPropagation()}
-                    >
-                      <MoreVertIcon fontSize="small" />
-                    </ActionIcon>
-                  </Menu.Target>
-                  <Menu.Dropdown>
-                            <Menu.Item
-                              disabled={!hasSelection}
-                              onClick={() => handleWidthAdjustment('expand')}
+                        {canMergeSelection && (
+                          <Tooltip label={t("pdfTextEditor.manual.mergeTooltip", "Merge selected boxes")}>
+                            <ActionIcon
+                              size="sm"
+                              variant="light"
+                              color="blue"
+                              aria-label={t("pdfTextEditor.manual.merge", "Merge selection")}
+                              onClick={handleMergeSelection}
                             >
-                              {t('pdfTextEditor.manual.expandWidth', 'Expand to page edge')}
+                              <MergeTypeIcon fontSize="small" />
+                            </ActionIcon>
+                          </Tooltip>
+                        )}
+                        {canUngroupSelection && (
+                          <Tooltip label={t("pdfTextEditor.manual.ungroupTooltip", "Split paragraph back into lines")}>
+                            <ActionIcon
+                              size="sm"
+                              variant="light"
+                              color="blue"
+                              aria-label={t("pdfTextEditor.manual.ungroup", "Ungroup selection")}
+                              onClick={handleUngroupSelection}
+                            >
+                              <CallSplitIcon fontSize="small" />
+                            </ActionIcon>
+                          </Tooltip>
+                        )}
+                        <Menu withinPortal position="bottom-end" shadow="md" disabled={!hasSelection && !hasWidthOverrides}>
+                          <Menu.Target>
+                            <ActionIcon
+                              size="sm"
+                              variant="light"
+                              color="blue"
+                              aria-label={t("pdfTextEditor.manual.widthMenu", "Width options")}
+                              onMouseDown={(event) => event.stopPropagation()}
+                              onClick={(event) => event.stopPropagation()}
+                            >
+                              <MoreVertIcon fontSize="small" />
+                            </ActionIcon>
+                          </Menu.Target>
+                          <Menu.Dropdown>
+                            <Menu.Item disabled={!hasSelection} onClick={() => handleWidthAdjustment("expand")}>
+                              {t("pdfTextEditor.manual.expandWidth", "Expand to page edge")}
                             </Menu.Item>
-                            <Menu.Item
-                              disabled={!hasWidthOverrides}
-                              onClick={() => handleWidthAdjustment('reset')}
-                            >
-                              {t('pdfTextEditor.manual.resetWidth', 'Reset width')}
+                            <Menu.Item disabled={!hasWidthOverrides} onClick={() => handleWidthAdjustment("reset")}>
+                              {t("pdfTextEditor.manual.resetWidth", "Reset width")}
                             </Menu.Item>
                           </Menu.Dropdown>
                         </Menu>
                       </Group>
                     )}
                     {orderedImages.map((image, imageIndex) => {
-                    if (!image?.imageData) {
-                      return null;
-                    }
-                    const bounds = getImageBounds(image);
-                    const width = Math.max(bounds.right - bounds.left, 1);
-                    const height = Math.max(bounds.top - bounds.bottom, 1);
-                    const cssWidth = Math.max(width * scale, 2);
-                    const cssHeight = Math.max(height * scale, 2);
-                    const cssLeft = bounds.left * scale;
-                    const cssTop = (pageHeight - bounds.top) * scale;
-                    const imageId = image.id ?? `page-${selectedPage}-image-${imageIndex}`;
-                    const isActive = activeImageId === imageId;
-                    const src = `data:image/${image.imageFormat ?? 'png'};base64,${image.imageData}`;
-                    const baseZIndex = (image.zOrder ?? -1_000_000) + 1_050_000;
-                    const zIndex = isActive ? baseZIndex + 1_000_000 : baseZIndex;
+                      if (!image?.imageData) {
+                        return null;
+                      }
+                      const bounds = getImageBounds(image);
+                      const width = Math.max(bounds.right - bounds.left, 1);
+                      const height = Math.max(bounds.top - bounds.bottom, 1);
+                      const cssWidth = Math.max(width * scale, 2);
+                      const cssHeight = Math.max(height * scale, 2);
+                      const cssLeft = bounds.left * scale;
+                      const cssTop = (pageHeight - bounds.top) * scale;
+                      const imageId = image.id ?? `page-${selectedPage}-image-${imageIndex}`;
+                      const isActive = activeImageId === imageId;
+                      const src = `data:image/${image.imageFormat ?? "png"};base64,${image.imageData}`;
+                      const baseZIndex = (image.zOrder ?? -1_000_000) + 1_050_000;
+                      const zIndex = isActive ? baseZIndex + 1_000_000 : baseZIndex;
 
-                    return (
-                      <Rnd
-                        ref={(ref) => {
-                          if (ref) {
-                            rndRefs.current.set(imageId, ref);
-                          } else {
-                            rndRefs.current.delete(imageId);
-                          }
-                        }}
-                        key={`image-${imageId}`}
-                        bounds="parent"
-                        size={{ width: cssWidth, height: cssHeight }}
-                        position={{ x: cssLeft, y: cssTop }}
-                        onDragStart={(_event, _data) => {
-                          setActiveGroupId(null);
-                          setEditingGroupId(null);
-                          setActiveImageId(imageId);
-                          draggingImageRef.current = imageId;
-                        }}
-                        onDrag={(_event, data) => {
-                          // Cancel any pending update
-                          if (pendingDragUpdateRef.current) {
-                            cancelAnimationFrame(pendingDragUpdateRef.current);
-                          }
-
-                          // Schedule update on next frame to batch rapid drag events
-                          pendingDragUpdateRef.current = requestAnimationFrame(() => {
-                            const rndRef = rndRefs.current.get(imageId);
-                            if (rndRef && rndRef.updatePosition) {
-                              rndRef.updatePosition({ x: data.x, y: data.y });
+                      return (
+                        <Rnd
+                          ref={(ref) => {
+                            if (ref) {
+                              rndRefs.current.set(imageId, ref);
+                            } else {
+                              rndRefs.current.delete(imageId);
                             }
-                          });
-                        }}
-                        onDragStop={(_event, data) => {
-                          if (pendingDragUpdateRef.current) {
-                            cancelAnimationFrame(pendingDragUpdateRef.current);
-                            pendingDragUpdateRef.current = null;
-                          }
-                          draggingImageRef.current = null;
-                          emitImageTransform(
-                            imageId,
-                            data.x,
-                            data.y,
-                            cssWidth,
-                            cssHeight,
-                          );
-                        }}
-                        onResizeStart={() => {
-                          setActiveImageId(imageId);
-                          setActiveGroupId(null);
-                          setEditingGroupId(null);
-                          draggingImageRef.current = imageId;
-                        }}
-                        onResizeStop={(_event, _direction, ref, _delta, position) => {
-                          draggingImageRef.current = null;
-                          const nextWidth = parseFloat(ref.style.width);
-                          const nextHeight = parseFloat(ref.style.height);
-                          emitImageTransform(
-                            imageId,
-                            position.x,
-                            position.y,
-                            nextWidth,
-                            nextHeight,
-                          );
-                        }}
-                        style={{ zIndex }}
-                      >
-                        <Box
-                          onMouseEnter={() => setActiveImageId(imageId)}
-                          onMouseLeave={() => {
-                            setActiveImageId((current) => (current === imageId ? null : current));
                           }}
-                          onDoubleClick={(event) => {
-                            event.stopPropagation();
-                            onImageReset(selectedPage, imageId);
+                          key={`image-${imageId}`}
+                          bounds="parent"
+                          size={{ width: cssWidth, height: cssHeight }}
+                          position={{ x: cssLeft, y: cssTop }}
+                          onDragStart={(_event, _data) => {
+                            setActiveGroupId(null);
+                            setEditingGroupId(null);
+                            setActiveImageId(imageId);
+                            draggingImageRef.current = imageId;
                           }}
-                          style={{
-                            width: '100%',
-                            height: '100%',
-                            cursor: isActive ? 'grabbing' : 'grab',
-                            outline: isActive
-                              ? '2px solid rgba(59, 130, 246, 0.9)'
-                              : '1px solid rgba(148, 163, 184, 0.4)',
-                            outlineOffset: '-1px',
-                            borderRadius: 4,
-                            backgroundColor: 'rgba(255,255,255,0.04)',
-                            transition: 'outline 120ms ease',
+                          onDrag={(_event, data) => {
+                            // Cancel any pending update
+                            if (pendingDragUpdateRef.current) {
+                              cancelAnimationFrame(pendingDragUpdateRef.current);
+                            }
+
+                            // Schedule update on next frame to batch rapid drag events
+                            pendingDragUpdateRef.current = requestAnimationFrame(() => {
+                              const rndRef = rndRefs.current.get(imageId);
+                              if (rndRef && rndRef.updatePosition) {
+                                rndRef.updatePosition({ x: data.x, y: data.y });
+                              }
+                            });
                           }}
+                          onDragStop={(_event, data) => {
+                            if (pendingDragUpdateRef.current) {
+                              cancelAnimationFrame(pendingDragUpdateRef.current);
+                              pendingDragUpdateRef.current = null;
+                            }
+                            draggingImageRef.current = null;
+                            emitImageTransform(imageId, data.x, data.y, cssWidth, cssHeight);
+                          }}
+                          onResizeStart={() => {
+                            setActiveImageId(imageId);
+                            setActiveGroupId(null);
+                            setEditingGroupId(null);
+                            draggingImageRef.current = imageId;
+                          }}
+                          onResizeStop={(_event, _direction, ref, _delta, position) => {
+                            draggingImageRef.current = null;
+                            const nextWidth = parseFloat(ref.style.width);
+                            const nextHeight = parseFloat(ref.style.height);
+                            emitImageTransform(imageId, position.x, position.y, nextWidth, nextHeight);
+                          }}
+                          style={{ zIndex }}
                         >
-                          <img
-                            src={src}
-                            alt={t('pdfTextEditor.imageLabel', 'Placed image')}
-                            style={{
-                              width: '100%',
-                              height: '100%',
-                              objectFit: 'contain',
-                              pointerEvents: 'none',
-                              userSelect: 'none',
+                          <Box
+                            onMouseEnter={() => setActiveImageId(imageId)}
+                            onMouseLeave={() => {
+                              setActiveImageId((current) => (current === imageId ? null : current));
                             }}
-                          />
-                        </Box>
-                      </Rnd>
-                    );
-                  })}
-                  {visibleGroups.length === 0 && orderedImages.length === 0 ? (
-                    <Group justify="center" align="center" style={{ height: '100%' }}>
-                      <Stack gap={4} align="center">
-                        <Text size="sm" c="dimmed">
-                          {t('pdfTextEditor.noTextOnPage', 'No editable text was detected on this page.')}
-                        </Text>
-                      </Stack>
-                    </Group>
-                  ) : (
-                    visibleGroups.map(({ group, pageGroupIndex }) => {
-                      const bounds = toCssBounds(currentPage, pageHeight, scale, group.bounds);
-                      const changed = group.text !== group.originalText;
-                      const isActive = activeGroupId === group.id || editingGroupId === group.id;
-                      const isEditing = editingGroupId === group.id;
-                      const baseFontSize = group.fontMatrixSize ?? group.fontSize ?? 12;
-                      const fontSizePx = Math.max(baseFontSize * scale, 6);
-                      const effectiveFontId = resolveFontIdForIndex(pageGroupIndex) ?? group.fontId;
-                      const fontFamily = getFontFamily(effectiveFontId, group.pageIndex);
-                      let lineHeightPx = getLineHeightPx(effectiveFontId, group.pageIndex, fontSizePx);
-                      let lineHeightRatio = fontSizePx > 0 ? Math.max(lineHeightPx / fontSizePx, 1.05) : 1.2;
-                      const rotation = group.rotation ?? 0;
-                      const hasRotation = Math.abs(rotation) > 0.5;
-                      const baselineLength = group.baselineLength ?? Math.max(group.bounds.right - group.bounds.left, 0);
-                      const geometry = getFontGeometry(effectiveFontId, group.pageIndex);
-                      const ascentPx = geometry ? Math.max(fontSizePx * geometry.ascentRatio, fontSizePx * 0.7) : fontSizePx * 0.82;
-                      const descentPx = geometry ? Math.max(fontSizePx * geometry.descentRatio, fontSizePx * 0.2) : fontSizePx * 0.22;
-                      lineHeightPx = Math.max(lineHeightPx, ascentPx + descentPx);
-                      if (fontSizePx > 0) {
-                        lineHeightRatio = Math.max(lineHeightRatio, lineHeightPx / fontSizePx);
-                      }
-                      const detectedSpacingPx =
-                        group.lineSpacing && group.lineSpacing > 0 ? group.lineSpacing * scale : undefined;
-                      if (detectedSpacingPx && detectedSpacingPx > 0) {
-                        lineHeightPx = Math.max(lineHeightPx, detectedSpacingPx);
+                            onDoubleClick={(event) => {
+                              event.stopPropagation();
+                              onImageReset(selectedPage, imageId);
+                            }}
+                            style={{
+                              width: "100%",
+                              height: "100%",
+                              cursor: isActive ? "grabbing" : "grab",
+                              outline: isActive ? "2px solid rgba(59, 130, 246, 0.9)" : "1px solid rgba(148, 163, 184, 0.4)",
+                              outlineOffset: "-1px",
+                              borderRadius: 4,
+                              backgroundColor: "rgba(255,255,255,0.04)",
+                              transition: "outline 120ms ease",
+                            }}
+                          >
+                            <img
+                              src={src}
+                              alt={t("pdfTextEditor.imageLabel", "Placed image")}
+                              style={{
+                                width: "100%",
+                                height: "100%",
+                                objectFit: "contain",
+                                pointerEvents: "none",
+                                userSelect: "none",
+                              }}
+                            />
+                          </Box>
+                        </Rnd>
+                      );
+                    })}
+                    {visibleGroups.length === 0 && orderedImages.length === 0 ? (
+                      <Group justify="center" align="center" style={{ height: "100%" }}>
+                        <Stack gap={4} align="center">
+                          <Text size="sm" c="dimmed">
+                            {t("pdfTextEditor.noTextOnPage", "No editable text was detected on this page.")}
+                          </Text>
+                        </Stack>
+                      </Group>
+                    ) : (
+                      visibleGroups.map(({ group, pageGroupIndex }) => {
+                        const bounds = toCssBounds(currentPage, pageHeight, scale, group.bounds);
+                        const changed = group.text !== group.originalText;
+                        const isActive = activeGroupId === group.id || editingGroupId === group.id;
+                        const isEditing = editingGroupId === group.id;
+                        const baseFontSize = group.fontMatrixSize ?? group.fontSize ?? 12;
+                        const fontSizePx = Math.max(baseFontSize * scale, 6);
+                        const effectiveFontId = resolveFontIdForIndex(pageGroupIndex) ?? group.fontId;
+                        const fontFamily = getFontFamily(effectiveFontId, group.pageIndex);
+                        let lineHeightPx = getLineHeightPx(effectiveFontId, group.pageIndex, fontSizePx);
+                        let lineHeightRatio = fontSizePx > 0 ? Math.max(lineHeightPx / fontSizePx, 1.05) : 1.2;
+                        const rotation = group.rotation ?? 0;
+                        const hasRotation = Math.abs(rotation) > 0.5;
+                        const baselineLength = group.baselineLength ?? Math.max(group.bounds.right - group.bounds.left, 0);
+                        const geometry = getFontGeometry(effectiveFontId, group.pageIndex);
+                        const ascentPx = geometry
+                          ? Math.max(fontSizePx * geometry.ascentRatio, fontSizePx * 0.7)
+                          : fontSizePx * 0.82;
+                        const descentPx = geometry
+                          ? Math.max(fontSizePx * geometry.descentRatio, fontSizePx * 0.2)
+                          : fontSizePx * 0.22;
+                        lineHeightPx = Math.max(lineHeightPx, ascentPx + descentPx);
                         if (fontSizePx > 0) {
-                          lineHeightRatio = Math.max(lineHeightRatio, detectedSpacingPx / fontSizePx);
+                          lineHeightRatio = Math.max(lineHeightRatio, lineHeightPx / fontSizePx);
                         }
-                      }
-                      const lineCount = Math.max(group.text.split('\n').length, 1);
-                      const paragraphHeightPx =
-                        lineCount > 1
-                          ? lineHeightPx + (lineCount - 1) * (detectedSpacingPx ?? lineHeightPx)
-                          : lineHeightPx;
+                        const detectedSpacingPx =
+                          group.lineSpacing && group.lineSpacing > 0 ? group.lineSpacing * scale : undefined;
+                        if (detectedSpacingPx && detectedSpacingPx > 0) {
+                          lineHeightPx = Math.max(lineHeightPx, detectedSpacingPx);
+                          if (fontSizePx > 0) {
+                            lineHeightRatio = Math.max(lineHeightRatio, detectedSpacingPx / fontSizePx);
+                          }
+                        }
+                        const lineCount = Math.max(group.text.split("\n").length, 1);
+                        const paragraphHeightPx =
+                          lineCount > 1 ? lineHeightPx + (lineCount - 1) * (detectedSpacingPx ?? lineHeightPx) : lineHeightPx;
 
-                      let containerLeft = bounds.left;
-                      let containerTop = bounds.top;
-                      const { width: resolvedWidth, base: baseWidth, max: _maxWidth } = resolveGroupWidth(group);
-                      let containerWidth = Math.max(resolvedWidth * scale, fontSizePx);
-                      let containerHeight = Math.max(bounds.height, paragraphHeightPx);
-                      let transform: string | undefined;
-                      let transformOrigin: React.CSSProperties['transformOrigin'];
+                        let containerLeft = bounds.left;
+                        let containerTop = bounds.top;
+                        const { width: resolvedWidth, base: baseWidth, max: _maxWidth } = resolveGroupWidth(group);
+                        let containerWidth = Math.max(resolvedWidth * scale, fontSizePx);
+                        let containerHeight = Math.max(bounds.height, paragraphHeightPx);
+                        let transform: string | undefined;
+                        let transformOrigin: React.CSSProperties["transformOrigin"];
 
-                      if (hasRotation) {
-                        const anchorX = group.anchor?.x ?? group.bounds.left;
-                        const anchorY = group.anchor?.y ?? group.bounds.bottom;
-                        containerLeft = anchorX * scale;
-                        const anchorTop = Math.max(pageHeight - anchorY, 0) * scale;
-                        containerWidth = Math.max(baselineLength * scale, MIN_BOX_SIZE);
-                        containerHeight = Math.max(lineHeightPx, fontSizePx * lineHeightRatio);
-                        transformOrigin = 'left bottom';
-                        // Negate rotation because Y-axis is flipped from PDF to web coordinates
-                        transform = `rotate(${-rotation}deg)`;
-                        // Align the baseline (PDF anchor) with the bottom edge used as the
-                        // transform origin. Without this adjustment rotated text appears shifted
-                        // downward by roughly one line height.
-                        containerTop = anchorTop - containerHeight;
-                      }
+                        if (hasRotation) {
+                          const anchorX = group.anchor?.x ?? group.bounds.left;
+                          const anchorY = group.anchor?.y ?? group.bounds.bottom;
+                          containerLeft = anchorX * scale;
+                          const anchorTop = Math.max(pageHeight - anchorY, 0) * scale;
+                          containerWidth = Math.max(baselineLength * scale, MIN_BOX_SIZE);
+                          containerHeight = Math.max(lineHeightPx, fontSizePx * lineHeightRatio);
+                          transformOrigin = "left bottom";
+                          // Negate rotation because Y-axis is flipped from PDF to web coordinates
+                          transform = `rotate(${-rotation}deg)`;
+                          // Align the baseline (PDF anchor) with the bottom edge used as the
+                          // transform origin. Without this adjustment rotated text appears shifted
+                          // downward by roughly one line height.
+                          containerTop = anchorTop - containerHeight;
+                        }
 
-                      if (
-                        lineCount === 1 &&
-                        !hasRotation &&
-                        group.baseline !== null &&
-                        group.baseline !== undefined &&
-                        geometry
-                      ) {
-                        const cssBaselineTop = (pageHeight - group.baseline) * scale;
-                        containerTop = Math.max(cssBaselineTop - ascentPx, 0);
-                        containerHeight = Math.max(containerHeight, ascentPx + descentPx);
-                      }
+                        if (
+                          lineCount === 1 &&
+                          !hasRotation &&
+                          group.baseline !== null &&
+                          group.baseline !== undefined &&
+                          geometry
+                        ) {
+                          const cssBaselineTop = (pageHeight - group.baseline) * scale;
+                          containerTop = Math.max(cssBaselineTop - ascentPx, 0);
+                          containerHeight = Math.max(containerHeight, ascentPx + descentPx);
+                        }
 
-                      // Extract styling from group
-                      const textColor = group.color || '#111827';
-                      const fontWeight = group.fontWeight || getFontWeight(effectiveFontId, group.pageIndex);
+                        // Extract styling from group
+                        const textColor = group.color || "#111827";
+                        const fontWeight = group.fontWeight || getFontWeight(effectiveFontId, group.pageIndex);
 
-                      // Determine text wrapping behavior based on whether text has been changed
-                      const hasChanges = changed;
-                      const widthExtended = resolvedWidth - baseWidth > 0.5;
-                      // Only enable wrapping if:
-                      // 1. It's paragraph layout (multi-line groups should wrap)
-                      // 2. Width was manually extended (user explicitly made space for wrapping)
-                      // 3. Has changes AND was already wrapping (preserve existing wrap state)
-                      // DO NOT enable wrapping just because isEditing - text should only wrap when it actually overflows
-                      const wasWrapping = isParagraphLayout || widthExtended;
-                      const enableWrap = wasWrapping || (hasChanges && wasWrapping);
-                      const whiteSpace = enableWrap ? 'pre-wrap' : 'pre';
-                      const wordBreak = enableWrap ? 'break-word' : 'normal';
-                      const overflowWrap = enableWrap ? 'break-word' : 'normal';
+                        // Determine text wrapping behavior based on whether text has been changed
+                        const hasChanges = changed;
+                        const widthExtended = resolvedWidth - baseWidth > 0.5;
+                        // Only enable wrapping if:
+                        // 1. It's paragraph layout (multi-line groups should wrap)
+                        // 2. Width was manually extended (user explicitly made space for wrapping)
+                        // 3. Has changes AND was already wrapping (preserve existing wrap state)
+                        // DO NOT enable wrapping just because isEditing - text should only wrap when it actually overflows
+                        const wasWrapping = isParagraphLayout || widthExtended;
+                        const enableWrap = wasWrapping || (hasChanges && wasWrapping);
+                        const whiteSpace = enableWrap ? "pre-wrap" : "pre";
+                        const wordBreak = enableWrap ? "break-word" : "normal";
+                        const overflowWrap = enableWrap ? "break-word" : "normal";
 
-                      // For paragraph mode, allow height to grow to accommodate lines without wrapping
-                      // For single-line mode, maintain fixed height based on PDF bounds
-                      const useFlexibleHeight = enableWrap || (isParagraphLayout && lineCount > 1);
+                        // For paragraph mode, allow height to grow to accommodate lines without wrapping
+                        // For single-line mode, maintain fixed height based on PDF bounds
+                        const useFlexibleHeight = enableWrap || (isParagraphLayout && lineCount > 1);
 
-                      // The renderGroupContainer wrapper adds 4px horizontal padding (2px left + 2px right)
-                      // We need to add this to the container width to compensate, so the inner content
-                      // has the full PDF-defined width available for text
-                      const WRAPPER_HORIZONTAL_PADDING = 4;
+                        // The renderGroupContainer wrapper adds 4px horizontal padding (2px left + 2px right)
+                        // We need to add this to the container width to compensate, so the inner content
+                        // has the full PDF-defined width available for text
+                        const WRAPPER_HORIZONTAL_PADDING = 4;
 
-                      const containerStyle: React.CSSProperties = {
-                        position: 'absolute',
-                        left: `${containerLeft}px`,
-                        top: `${containerTop}px`,
-                        width: `${containerWidth + WRAPPER_HORIZONTAL_PADDING}px`,
-                        height: useFlexibleHeight ? 'auto' : `${containerHeight}px`,
-                        minHeight: useFlexibleHeight ? 'auto' : `${containerHeight}px`,
-                        display: 'flex',
-                        alignItems: 'flex-start',
-                        justifyContent: 'flex-start',
-                        pointerEvents: 'auto',
-                        cursor: 'text',
-                        zIndex: 2_000_000,
-                        transform,
-                        transformOrigin,
-                      };
+                        const containerStyle: React.CSSProperties = {
+                          position: "absolute",
+                          left: `${containerLeft}px`,
+                          top: `${containerTop}px`,
+                          width: `${containerWidth + WRAPPER_HORIZONTAL_PADDING}px`,
+                          height: useFlexibleHeight ? "auto" : `${containerHeight}px`,
+                          minHeight: useFlexibleHeight ? "auto" : `${containerHeight}px`,
+                          display: "flex",
+                          alignItems: "flex-start",
+                          justifyContent: "flex-start",
+                          pointerEvents: "auto",
+                          cursor: "text",
+                          zIndex: 2_000_000,
+                          transform,
+                          transformOrigin,
+                        };
 
-                      const showResizeHandle = !hasRotation && (selectedGroupIds.has(group.id) || activeGroupId === group.id);
-                      const resizeHandle = showResizeHandle ? (
-                        <Box
-                          role="button"
-                          aria-label={t('pdfTextEditor.manual.resizeHandle', 'Adjust text width')}
-                          onMouseDown={(event) => handleResizeStart(event, group, resolvedWidth)}
-                          style={{
-                            position: 'absolute',
-                            top: '50%',
-                            right: -6,
-                            width: 12,
-                            height: 32,
-                            marginTop: -16,
-                            cursor: 'ew-resize',
-                            borderRadius: 6,
-                            backgroundColor: 'rgba(76, 110, 245, 0.35)',
-                            border: '1px solid rgba(76, 110, 245, 0.8)',
-                            display: 'flex',
-                            alignItems: 'center',
-                            justifyContent: 'center',
-                            color: 'white',
-                            fontSize: 9,
-                            userSelect: 'none',
-                          }}
-                        >
-                          ||
-                        </Box>
-                      ) : null;
+                        const showResizeHandle =
+                          !hasRotation && (selectedGroupIds.has(group.id) || activeGroupId === group.id);
+                        const resizeHandle = showResizeHandle ? (
+                          <Box
+                            role="button"
+                            aria-label={t("pdfTextEditor.manual.resizeHandle", "Adjust text width")}
+                            onMouseDown={(event) => handleResizeStart(event, group, resolvedWidth)}
+                            style={{
+                              position: "absolute",
+                              top: "50%",
+                              right: -6,
+                              width: 12,
+                              height: 32,
+                              marginTop: -16,
+                              cursor: "ew-resize",
+                              borderRadius: 6,
+                              backgroundColor: "rgba(76, 110, 245, 0.35)",
+                              border: "1px solid rgba(76, 110, 245, 0.8)",
+                              display: "flex",
+                              alignItems: "center",
+                              justifyContent: "center",
+                              color: "white",
+                              fontSize: 9,
+                              userSelect: "none",
+                            }}
+                          >
+                            ||
+                          </Box>
+                        ) : null;
+
+                        if (isEditing) {
+                          return (
+                            <Box key={group.id} style={containerStyle}>
+                              {renderGroupContainer(
+                                group.id,
+                                group.pageIndex,
+                                true,
+                                changed,
+                                <div
+                                  ref={(node) => {
+                                    if (node) {
+                                      editorRefs.current.set(group.id, node);
+                                    } else {
+                                      editorRefs.current.delete(group.id);
+                                    }
+                                  }}
+                                  contentEditable
+                                  suppressContentEditableWarning
+                                  data-editor-group={group.id}
+                                  onCompositionStart={() => handleCompositionStart(group.id)}
+                                  onCompositionEnd={(event) =>
+                                    handleCompositionEnd(event.currentTarget, group.pageIndex, group.id)
+                                  }
+                                  onFocus={(event) => {
+                                    const primaryFont = fontFamily.split(",")[0]?.replace(/['"]/g, "").trim();
+                                    if (primaryFont && typeof document !== "undefined") {
+                                      try {
+                                        if (document.queryCommandSupported?.("styleWithCSS")) {
+                                          document.execCommand("styleWithCSS", false, "true");
+                                        }
+                                        if (document.queryCommandSupported?.("fontName")) {
+                                          document.execCommand("fontName", false, primaryFont);
+                                        }
+                                      } catch {
+                                        // ignore execCommand failures; inline style already enforces font
+                                      }
+                                    }
+                                    event.currentTarget.style.fontFamily = fontFamily;
+                                  }}
+                                  onClick={(event) => {
+                                    // Allow click position to determine cursor placement
+                                    event.stopPropagation();
+                                  }}
+                                  onBlur={(event) => {
+                                    composingGroupsRef.current.delete(group.id);
+                                    syncEditorValue(event.currentTarget, group.pageIndex, group.id, {
+                                      skipCaretRestore: true,
+                                    });
+                                    caretOffsetsRef.current.delete(group.id);
+                                    editorRefs.current.delete(group.id);
+                                    setActiveGroupId(null);
+                                    setEditingGroupId(null);
+                                  }}
+                                  onInput={(event) => {
+                                    if (composingGroupsRef.current.has(group.id)) {
+                                      return;
+                                    }
+                                    syncEditorValue(event.currentTarget, group.pageIndex, group.id);
+                                  }}
+                                  style={{
+                                    width: "100%",
+                                    minHeight: "100%",
+                                    height: "auto",
+                                    padding: "2px",
+                                    backgroundColor: "rgba(255,255,255,0.95)",
+                                    color: textColor,
+                                    fontSize: `${fontSizePx}px`,
+                                    fontFamily,
+                                    fontWeight,
+                                    lineHeight: lineHeightRatio,
+                                    outline: "none",
+                                    border: "none",
+                                    display: "block",
+                                    whiteSpace,
+                                    wordBreak,
+                                    overflowWrap,
+                                    cursor: "text",
+                                    overflow: "visible",
+                                  }}
+                                >
+                                  {group.text || "\u00A0"}
+                                </div>,
+                                undefined,
+                                undefined,
+                                selectedGroupIds.has(group.id),
+                                resizeHandle,
+                              )}
+                            </Box>
+                          );
+                        }
+
+                        const textScale = textScales.get(group.id) ?? 1;
+                        const shouldScale = autoScaleText && textScale < 0.98;
 
-                      if (isEditing) {
                         return (
                           <Box key={group.id} style={containerStyle}>
                             {renderGroupContainer(
                               group.id,
                               group.pageIndex,
-                              true,
+                              isActive,
                               changed,
                               <div
-                                ref={(node) => {
-                                  if (node) {
-                                    editorRefs.current.set(group.id, node);
-                                  } else {
-                                    editorRefs.current.delete(group.id);
-                                  }
-                                }}
-                                contentEditable
-                                suppressContentEditableWarning
-                                data-editor-group={group.id}
-                                onCompositionStart={() => handleCompositionStart(group.id)}
-                                onCompositionEnd={(event) =>
-                                  handleCompositionEnd(event.currentTarget, group.pageIndex, group.id)
-                                }
-                                onFocus={(event) => {
-                                  const primaryFont = fontFamily.split(',')[0]?.replace(/['"]/g, '').trim();
-                                  if (primaryFont && typeof document !== 'undefined') {
-                                    try {
-                                      if (document.queryCommandSupported?.('styleWithCSS')) {
-                                        document.execCommand('styleWithCSS', false, 'true');
-                                      }
-                                      if (document.queryCommandSupported?.('fontName')) {
-                                        document.execCommand('fontName', false, primaryFont);
-                                      }
-                                    } catch {
-                                      // ignore execCommand failures; inline style already enforces font
-                                    }
-                                  }
-                                  event.currentTarget.style.fontFamily = fontFamily;
-                                }}
-                                onClick={(event) => {
-                                  // Allow click position to determine cursor placement
-                                  event.stopPropagation();
-                                }}
-                                onBlur={(event) => {
-                                  composingGroupsRef.current.delete(group.id);
-                                  syncEditorValue(event.currentTarget, group.pageIndex, group.id, {
-                                    skipCaretRestore: true,
-                                  });
-                                  caretOffsetsRef.current.delete(group.id);
-                                  editorRefs.current.delete(group.id);
-                                  setActiveGroupId(null);
-                                  setEditingGroupId(null);
-                                }}
-                                onInput={(event) => {
-                                  if (composingGroupsRef.current.has(group.id)) {
-                                    return;
-                                  }
-                                  syncEditorValue(event.currentTarget, group.pageIndex, group.id);
-                                }}
+                                data-text-group={group.id}
                                 style={{
-                                  width: '100%',
-                                  minHeight: '100%',
-                                  height: 'auto',
-                                  padding: '2px',
-                                backgroundColor: 'rgba(255,255,255,0.95)',
-                                  color: textColor,
+                                  width: "100%",
+                                  minHeight: "100%",
+                                  padding: "2px",
+                                  whiteSpace,
+                                  wordBreak,
+                                  overflowWrap,
                                   fontSize: `${fontSizePx}px`,
                                   fontFamily,
                                   fontWeight,
                                   lineHeight: lineHeightRatio,
-                                  outline: 'none',
-                                  border: 'none',
-                                  display: 'block',
-                                  whiteSpace,
-                                  wordBreak,
-                                  overflowWrap,
-                                  cursor: 'text',
-                                  overflow: 'visible',
+                                  color: textColor,
+                                  display: "block",
+                                  cursor: "text",
+                                  overflow: enableWrap ? "visible" : "hidden",
                                 }}
                               >
-                                {group.text || '\u00A0'}
+                                <span
+                                  data-text-content
+                                  style={{
+                                    pointerEvents: "none",
+                                    display: enableWrap ? "inline" : "inline-block",
+                                    transform: shouldScale ? `scaleX(${textScale})` : "none",
+                                    transformOrigin: "left center",
+                                    whiteSpace,
+                                  }}
+                                >
+                                  {group.text || "\u00A0"}
+                                </span>
                               </div>,
                               undefined,
-                              undefined,
+                              (event: React.MouseEvent) => {
+                                const shouldActivate = handleSelectionInteraction(group.id, pageGroupIndex, event);
+                                if (!shouldActivate) {
+                                  setActiveGroupId(null);
+                                  setEditingGroupId(null);
+                                  return;
+                                }
+
+                                const clickX = event.clientX;
+                                const clickY = event.clientY;
+
+                                setActiveGroupId(group.id);
+                                setEditingGroupId(group.id);
+                                caretOffsetsRef.current.delete(group.id);
+
+                                // Log group stats when selected
+                                const lines = (group.text ?? "").split("\n");
+                                const words = (group.text ?? "").split(/\s+/).filter((w) => w.length > 0).length;
+                                const chars = (group.text ?? "").length;
+                                const width = group.bounds.right - group.bounds.left;
+                                const height = group.bounds.bottom - group.bounds.top;
+                                const isMultiLine = lines.length > 1;
+                                console.log(`📝 Selected Text Group "${group.id}":`);
+                                console.log(`   Lines: ${lines.length}, Words: ${words}, Chars: ${chars}`);
+                                console.log(`   Dimensions: ${width.toFixed(1)}pt × ${height.toFixed(1)}pt`);
+                                console.log(`   Type: ${isMultiLine ? "MULTI-LINE (paragraph)" : "SINGLE-LINE"}`);
+                                console.log(
+                                  `   Text preview: "${(group.text ?? "").substring(0, 80)}${(group.text ?? "").length > 80 ? "..." : ""}"`,
+                                );
+                                if (isMultiLine) {
+                                  console.log(`   Line spacing: ${group.lineSpacing?.toFixed(1) ?? "unknown"}pt`);
+                                }
+
+                                requestAnimationFrame(() => {
+                                  const editor = document.querySelector<HTMLElement>(`[data-editor-group="${group.id}"]`);
+                                  if (!editor) return;
+                                  editor.focus();
+
+                                  setTimeout(() => {
+                                    if (document.caretRangeFromPoint) {
+                                      const range = document.caretRangeFromPoint(clickX, clickY);
+                                      if (range) {
+                                        const selection = window.getSelection();
+                                        if (selection) {
+                                          selection.removeAllRanges();
+                                          selection.addRange(range);
+                                        }
+                                      }
+                                    } else if ((document as any).caretPositionFromPoint) {
+                                      const pos = (document as any).caretPositionFromPoint(clickX, clickY);
+                                      if (pos) {
+                                        const range = document.createRange();
+                                        range.setStart(pos.offsetNode, pos.offset);
+                                        range.collapse(true);
+                                        const selection = window.getSelection();
+                                        if (selection) {
+                                          selection.removeAllRanges();
+                                          selection.addRange(range);
+                                        }
+                                      }
+                                    }
+                                  }, 10);
+                                });
+                              },
                               selectedGroupIds.has(group.id),
                               resizeHandle,
                             )}
                           </Box>
                         );
-                      }
-
-                      const textScale = textScales.get(group.id) ?? 1;
-                      const shouldScale = autoScaleText && textScale < 0.98;
-
-                      return (
-                        <Box key={group.id} style={containerStyle}>
-                          {renderGroupContainer(
-                            group.id,
-                            group.pageIndex,
-                            isActive,
-                            changed,
-                            <div
-                              data-text-group={group.id}
-                              style={{
-                                width: '100%',
-                                minHeight: '100%',
-                                padding: '2px',
-                                whiteSpace,
-                                wordBreak,
-                                overflowWrap,
-                                fontSize: `${fontSizePx}px`,
-                                fontFamily,
-                                fontWeight,
-                                lineHeight: lineHeightRatio,
-                                color: textColor,
-                                display: 'block',
-                                cursor: 'text',
-                                overflow: enableWrap ? 'visible' : 'hidden',
-                              }}
-                            >
-                              <span
-                                data-text-content
-                                style={{
-                                  pointerEvents: 'none',
-                                  display: enableWrap ? 'inline' : 'inline-block',
-                                  transform: shouldScale ? `scaleX(${textScale})` : 'none',
-                                  transformOrigin: 'left center',
-                                  whiteSpace,
-                                }}
-                              >
-                                {group.text || '\u00A0'}
-                              </span>
-                            </div>,
-                            undefined,
-                            (event: React.MouseEvent) => {
-                              const shouldActivate = handleSelectionInteraction(group.id, pageGroupIndex, event);
-                              if (!shouldActivate) {
-                                setActiveGroupId(null);
-                                setEditingGroupId(null);
-                                return;
-                              }
-
-                              const clickX = event.clientX;
-                              const clickY = event.clientY;
-
-                              setActiveGroupId(group.id);
-                              setEditingGroupId(group.id);
-                              caretOffsetsRef.current.delete(group.id);
-
-                              // Log group stats when selected
-                              const lines = (group.text ?? '').split('\n');
-                              const words = (group.text ?? '').split(/\s+/).filter(w => w.length > 0).length;
-                              const chars = (group.text ?? '').length;
-                              const width = group.bounds.right - group.bounds.left;
-                              const height = group.bounds.bottom - group.bounds.top;
-                              const isMultiLine = lines.length > 1;
-                              console.log(`📝 Selected Text Group "${group.id}":`);
-                              console.log(`   Lines: ${lines.length}, Words: ${words}, Chars: ${chars}`);
-                              console.log(`   Dimensions: ${width.toFixed(1)}pt × ${height.toFixed(1)}pt`);
-                              console.log(`   Type: ${isMultiLine ? 'MULTI-LINE (paragraph)' : 'SINGLE-LINE'}`);
-                              console.log(`   Text preview: "${(group.text ?? '').substring(0, 80)}${(group.text ?? '').length > 80 ? '...' : ''}"`);
-                              if (isMultiLine) {
-                                console.log(`   Line spacing: ${group.lineSpacing?.toFixed(1) ?? 'unknown'}pt`);
-                              }
-
-                              requestAnimationFrame(() => {
-                                const editor = document.querySelector<HTMLElement>(`[data-editor-group="${group.id}"]`);
-                                if (!editor) return;
-                                editor.focus();
-
-                                setTimeout(() => {
-                                  if (document.caretRangeFromPoint) {
-                                    const range = document.caretRangeFromPoint(clickX, clickY);
-                                    if (range) {
-                                      const selection = window.getSelection();
-                                      if (selection) {
-                                        selection.removeAllRanges();
-                                        selection.addRange(range);
-                                      }
-                                    }
-                                  } else if ((document as any).caretPositionFromPoint) {
-                                    const pos = (document as any).caretPositionFromPoint(clickX, clickY);
-                                    if (pos) {
-                                      const range = document.createRange();
-                                      range.setStart(pos.offsetNode, pos.offset);
-                                      range.collapse(true);
-                                      const selection = window.getSelection();
-                                      if (selection) {
-                                        selection.removeAllRanges();
-                                        selection.addRange(range);
-                                      }
-                                    }
-                                  }
-                                }, 10);
-                              });
-                            },
-                            selectedGroupIds.has(group.id),
-                            resizeHandle,
-                          )}
-                        </Box>
-                      );
-                    })
-                  )}
+                      })
+                    )}
                   </Box>
                 </Box>
               </Box>
             </ScrollArea>
           </Card>
-
         </Stack>
       )}
-
     </Stack>
   );
 };
diff --git a/frontend/src/core/components/tools/redact/ManualRedactionControls.tsx b/frontend/src/core/components/tools/redact/ManualRedactionControls.tsx
index dd75d926d6..a9f32e4aa9 100644
--- a/frontend/src/core/components/tools/redact/ManualRedactionControls.tsx
+++ b/frontend/src/core/components/tools/redact/ManualRedactionControls.tsx
@@ -1,10 +1,10 @@
-import { useTranslation } from 'react-i18next';
-import { useEffect, useRef, useCallback } from 'react';
-import { Button, Stack, Text, Divider, ColorInput } from '@mantine/core';
-import { useRedaction, useRedactionMode } from '@app/contexts/RedactionContext';
-import { useViewer } from '@app/contexts/ViewerContext';
-import { useSignature } from '@app/contexts/SignatureContext';
-import { useNavigationGuard } from '@app/contexts/NavigationContext';
+import { useTranslation } from "react-i18next";
+import { useEffect, useRef, useCallback } from "react";
+import { Button, Stack, Text, Divider, ColorInput } from "@mantine/core";
+import { useRedaction, useRedactionMode } from "@app/contexts/RedactionContext";
+import { useViewer } from "@app/contexts/ViewerContext";
+import { useSignature } from "@app/contexts/SignatureContext";
+import { useNavigationGuard } from "@app/contexts/NavigationContext";
 
 interface ManualRedactionControlsProps {
   disabled?: boolean;
@@ -50,7 +50,7 @@ export default function ManualRedactionControls({ disabled = false }: ManualReda
           try {
             signatureApiRef.current.deactivateTools();
           } catch (error) {
-            console.log('Unable to deactivate annotation tools:', error);
+            console.log("Unable to deactivate annotation tools:", error);
           }
         }
       }
@@ -62,7 +62,16 @@ export default function ManualRedactionControls({ disabled = false }: ManualReda
       }, 50);
       return () => clearTimeout(timer);
     }
-  }, [isRedacting, isAnnotationMode, disabled, isBridgeReady, showNavigationWarning, setAnnotationMode, signatureApiRef, activateManualRedact]);
+  }, [
+    isRedacting,
+    isAnnotationMode,
+    disabled,
+    isBridgeReady,
+    showNavigationWarning,
+    setAnnotationMode,
+    signatureApiRef,
+    activateManualRedact,
+  ]);
 
   // Reset redaction tool when switching between files
   // The new PDF gets a fresh EmbedPDF instance
@@ -99,15 +108,15 @@ export default function ManualRedactionControls({ disabled = false }: ManualReda
       <Divider my="sm" />
       <Stack gap="md">
         <Text size="sm" fw={500}>
-          {t('redact.manual.title', 'Redaction Tools')}
+          {t("redact.manual.title", "Redaction Tools")}
         </Text>
 
         <Text size="xs" c="dimmed">
-          {t('redact.manual.instructions', 'Select text or draw areas on the PDF to mark content for redaction.')}
+          {t("redact.manual.instructions", "Select text or draw areas on the PDF to mark content for redaction.")}
         </Text>
 
         <ColorInput
-          label={t('redact.manual.colorLabel', 'Redaction Colour')}
+          label={t("redact.manual.colorLabel", "Redaction Colour")}
           value={manualRedactColor}
           onChange={setManualRedactColor}
           disabled={disabled || !isApiReady}
@@ -127,7 +136,7 @@ export default function ManualRedactionControls({ disabled = false }: ManualReda
           disabled={!hasUnsavedChanges}
           onClick={handleSaveChanges}
         >
-          {t('annotation.saveChanges', 'Save Changes')}
+          {t("annotation.saveChanges", "Save Changes")}
         </Button>
       </Stack>
     </>
diff --git a/frontend/src/core/components/tools/redact/RedactAdvancedSettings.test.tsx b/frontend/src/core/components/tools/redact/RedactAdvancedSettings.test.tsx
index 064a0b2a8b..045dbc02fc 100644
--- a/frontend/src/core/components/tools/redact/RedactAdvancedSettings.test.tsx
+++ b/frontend/src/core/components/tools/redact/RedactAdvancedSettings.test.tsx
@@ -1,48 +1,43 @@
-import { describe, expect, test, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { MantineProvider } from '@mantine/core';
-import RedactAdvancedSettings from '@app/components/tools/redact/RedactAdvancedSettings';
-import { defaultParameters } from '@app/hooks/tools/redact/useRedactParameters';
+import { describe, expect, test, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { MantineProvider } from "@mantine/core";
+import RedactAdvancedSettings from "@app/components/tools/redact/RedactAdvancedSettings";
+import { defaultParameters } from "@app/hooks/tools/redact/useRedactParameters";
 
 // Mock useTranslation
 const mockT = vi.fn((_key: string, fallback: string) => fallback);
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({ t: mockT })
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: mockT }),
 }));
 
 // Wrapper component to provide Mantine context
-const TestWrapper = ({ children }: { children: React.ReactNode }) => (
-  <MantineProvider>{children}</MantineProvider>
-);
+const TestWrapper = ({ children }: { children: React.ReactNode }) => <MantineProvider>{children}</MantineProvider>;
 
-describe('RedactAdvancedSettings', () => {
+describe("RedactAdvancedSettings", () => {
   const mockOnParameterChange = vi.fn();
 
   beforeEach(() => {
     vi.clearAllMocks();
   });
 
-  test('should render all advanced settings controls', () => {
+  test("should render all advanced settings controls", () => {
     render(
       <TestWrapper>
-        <RedactAdvancedSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <RedactAdvancedSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
-    expect(screen.getByText('Box Colour')).toBeInTheDocument();
-    expect(screen.getByText('Custom Extra Padding')).toBeInTheDocument();
-    expect(screen.getByText('Use Regex')).toBeInTheDocument();
-    expect(screen.getByText('Whole Word Search')).toBeInTheDocument();
-    expect(screen.getByText('Convert PDF to PDF-Image (Used to remove text behind the box)')).toBeInTheDocument();
+    expect(screen.getByText("Box Colour")).toBeInTheDocument();
+    expect(screen.getByText("Custom Extra Padding")).toBeInTheDocument();
+    expect(screen.getByText("Use Regex")).toBeInTheDocument();
+    expect(screen.getByText("Whole Word Search")).toBeInTheDocument();
+    expect(screen.getByText("Convert PDF to PDF-Image (Used to remove text behind the box)")).toBeInTheDocument();
   });
 
-  test('should display current parameter values', () => {
+  test("should display current parameter values", () => {
     const customParameters = {
       ...defaultParameters,
-      redactColor: '#FF0000',
+      redactColor: "#FF0000",
       customPadding: 0.5,
       useRegex: true,
       wholeWordSearch: true,
@@ -51,161 +46,145 @@ describe('RedactAdvancedSettings', () => {
 
     render(
       <TestWrapper>
-        <RedactAdvancedSettings
-          parameters={customParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <RedactAdvancedSettings parameters={customParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
     // Check color input value
-    const colorInput = screen.getByDisplayValue('#FF0000');
+    const colorInput = screen.getByDisplayValue("#FF0000");
     expect(colorInput).toBeInTheDocument();
 
     // Check number input value
-    const paddingInput = screen.getByDisplayValue('0.5');
+    const paddingInput = screen.getByDisplayValue("0.5");
     expect(paddingInput).toBeInTheDocument();
 
     // Check checkbox states
-    const useRegexCheckbox = screen.getByLabelText('Use Regex');
-    const wholeWordCheckbox = screen.getByLabelText('Whole Word Search');
-    const convertCheckbox = screen.getByLabelText('Convert PDF to PDF-Image (Used to remove text behind the box)');
+    const useRegexCheckbox = screen.getByLabelText("Use Regex");
+    const wholeWordCheckbox = screen.getByLabelText("Whole Word Search");
+    const convertCheckbox = screen.getByLabelText("Convert PDF to PDF-Image (Used to remove text behind the box)");
 
     expect(useRegexCheckbox).toBeChecked();
     expect(wholeWordCheckbox).toBeChecked();
     expect(convertCheckbox).not.toBeChecked();
   });
 
-  test('should call onParameterChange when color is changed', () => {
+  test("should call onParameterChange when color is changed", () => {
     render(
       <TestWrapper>
-        <RedactAdvancedSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <RedactAdvancedSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
-    const colorInput = screen.getByDisplayValue('#000000');
-    fireEvent.change(colorInput, { target: { value: '#FF0000' } });
+    const colorInput = screen.getByDisplayValue("#000000");
+    fireEvent.change(colorInput, { target: { value: "#FF0000" } });
 
-    expect(mockOnParameterChange).toHaveBeenCalledWith('redactColor', '#FF0000');
+    expect(mockOnParameterChange).toHaveBeenCalledWith("redactColor", "#FF0000");
   });
 
-  test('should call onParameterChange when padding is changed', () => {
+  test("should call onParameterChange when padding is changed", () => {
     render(
       <TestWrapper>
-        <RedactAdvancedSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <RedactAdvancedSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
-    const paddingInput = screen.getByDisplayValue('0.1');
-    fireEvent.change(paddingInput, { target: { value: '0.5' } });
+    const paddingInput = screen.getByDisplayValue("0.1");
+    fireEvent.change(paddingInput, { target: { value: "0.5" } });
 
-    expect(mockOnParameterChange).toHaveBeenCalledWith('customPadding', 0.5);
+    expect(mockOnParameterChange).toHaveBeenCalledWith("customPadding", 0.5);
   });
 
-  test('should handle invalid padding values', () => {
+  test("should handle invalid padding values", () => {
     render(
       <TestWrapper>
-        <RedactAdvancedSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <RedactAdvancedSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
-    const paddingInput = screen.getByDisplayValue('0.1');
+    const paddingInput = screen.getByDisplayValue("0.1");
 
     // Simulate NumberInput onChange with invalid value (empty string)
-    const numberInput = paddingInput.closest('.mantine-NumberInput-root');
+    const numberInput = paddingInput.closest(".mantine-NumberInput-root");
     if (numberInput) {
       // Find the input and trigger change with empty value
-      fireEvent.change(paddingInput, { target: { value: '' } });
+      fireEvent.change(paddingInput, { target: { value: "" } });
 
       // The component should default to 0.1 for invalid values
-      expect(mockOnParameterChange).toHaveBeenCalledWith('customPadding', 0.1);
+      expect(mockOnParameterChange).toHaveBeenCalledWith("customPadding", 0.1);
     }
   });
 
   test.each([
     {
-      paramName: 'useRegex' as const,
-      label: 'Use Regex',
+      paramName: "useRegex" as const,
+      label: "Use Regex",
       initialValue: false,
       expectedValue: true,
     },
     {
-      paramName: 'wholeWordSearch' as const,
-      label: 'Whole Word Search',
+      paramName: "wholeWordSearch" as const,
+      label: "Whole Word Search",
       initialValue: false,
       expectedValue: true,
     },
     {
-      paramName: 'convertPDFToImage' as const,
-      label: 'Convert PDF to PDF-Image (Used to remove text behind the box)',
+      paramName: "convertPDFToImage" as const,
+      label: "Convert PDF to PDF-Image (Used to remove text behind the box)",
       initialValue: true,
       expectedValue: false,
     },
-  ])('should call onParameterChange when $paramName checkbox is toggled', ({ paramName, label, initialValue, expectedValue }) => {
-    const customParameters = {
-      ...defaultParameters,
-      [paramName]: initialValue,
-    };
+  ])(
+    "should call onParameterChange when $paramName checkbox is toggled",
+    ({ paramName, label, initialValue, expectedValue }) => {
+      const customParameters = {
+        ...defaultParameters,
+        [paramName]: initialValue,
+      };
 
-    render(
-      <TestWrapper>
-        <RedactAdvancedSettings
-          parameters={customParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
-    );
+      render(
+        <TestWrapper>
+          <RedactAdvancedSettings parameters={customParameters} onParameterChange={mockOnParameterChange} />
+        </TestWrapper>,
+      );
 
-    const checkbox = screen.getByLabelText(label);
-    fireEvent.click(checkbox);
+      const checkbox = screen.getByLabelText(label);
+      fireEvent.click(checkbox);
 
-    expect(mockOnParameterChange).toHaveBeenCalledWith(paramName, expectedValue);
-  });
+      expect(mockOnParameterChange).toHaveBeenCalledWith(paramName, expectedValue);
+    },
+  );
 
   test.each([
-    { controlType: 'color input', getValue: () => screen.getByDisplayValue('#000000') },
-    { controlType: 'padding input', getValue: () => screen.getByDisplayValue('0.1') },
-    { controlType: 'useRegex checkbox', getValue: () => screen.getByLabelText('Use Regex') },
-    { controlType: 'wholeWordSearch checkbox', getValue: () => screen.getByLabelText('Whole Word Search') },
-    { controlType: 'convertPDFToImage checkbox', getValue: () => screen.getByLabelText('Convert PDF to PDF-Image (Used to remove text behind the box)') },
-  ])('should disable $controlType when disabled prop is true', ({ getValue }) => {
+    { controlType: "color input", getValue: () => screen.getByDisplayValue("#000000") },
+    { controlType: "padding input", getValue: () => screen.getByDisplayValue("0.1") },
+    { controlType: "useRegex checkbox", getValue: () => screen.getByLabelText("Use Regex") },
+    { controlType: "wholeWordSearch checkbox", getValue: () => screen.getByLabelText("Whole Word Search") },
+    {
+      controlType: "convertPDFToImage checkbox",
+      getValue: () => screen.getByLabelText("Convert PDF to PDF-Image (Used to remove text behind the box)"),
+    },
+  ])("should disable $controlType when disabled prop is true", ({ getValue }) => {
     render(
       <TestWrapper>
-        <RedactAdvancedSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-          disabled={true}
-        />
-      </TestWrapper>
+        <RedactAdvancedSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} disabled={true} />
+      </TestWrapper>,
     );
 
     const control = getValue();
     expect(control).toBeDisabled();
   });
 
-  test('should have correct padding input constraints', () => {
+  test("should have correct padding input constraints", () => {
     render(
       <TestWrapper>
-        <RedactAdvancedSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <RedactAdvancedSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
     // NumberInput in Mantine might not expose these attributes directly on the input element
     // Instead, check that the NumberInput component is rendered with correct placeholder
-    const paddingInput = screen.getByPlaceholderText('0.1');
+    const paddingInput = screen.getByPlaceholderText("0.1");
     expect(paddingInput).toBeInTheDocument();
-    expect(paddingInput).toHaveDisplayValue('0.1');
+    expect(paddingInput).toHaveDisplayValue("0.1");
   });
 });
diff --git a/frontend/src/core/components/tools/redact/RedactAdvancedSettings.tsx b/frontend/src/core/components/tools/redact/RedactAdvancedSettings.tsx
index e9570e84e8..875c46b3c0 100644
--- a/frontend/src/core/components/tools/redact/RedactAdvancedSettings.tsx
+++ b/frontend/src/core/components/tools/redact/RedactAdvancedSettings.tsx
@@ -16,9 +16,9 @@ const RedactAdvancedSettings = ({ parameters, onParameterChange, disabled = fals
     <Stack gap="md">
       {/* Box Color */}
       <ColorInput
-        label={t('redact.auto.colorLabel', 'Box Colour')}
+        label={t("redact.auto.colorLabel", "Box Colour")}
         value={parameters.redactColor}
-        onChange={(value) => onParameterChange('redactColor', value)}
+        onChange={(value) => onParameterChange("redactColor", value)}
         disabled={disabled}
         size="sm"
         format="hex"
@@ -27,9 +27,9 @@ const RedactAdvancedSettings = ({ parameters, onParameterChange, disabled = fals
 
       {/* Box Padding */}
       <NumberInput
-        label={t('redact.auto.customPaddingLabel', 'Custom Extra Padding')}
+        label={t("redact.auto.customPaddingLabel", "Custom Extra Padding")}
         value={parameters.customPadding}
-        onChange={(value) => onParameterChange('customPadding', typeof value === 'number' ? value : 0.1)}
+        onChange={(value) => onParameterChange("customPadding", typeof value === "number" ? value : 0.1)}
         min={0}
         max={10}
         step={0.1}
@@ -40,27 +40,27 @@ const RedactAdvancedSettings = ({ parameters, onParameterChange, disabled = fals
 
       {/* Use Regex */}
       <Checkbox
-        label={t('redact.auto.useRegexLabel', 'Use Regex')}
+        label={t("redact.auto.useRegexLabel", "Use Regex")}
         checked={parameters.useRegex}
-        onChange={(e) => onParameterChange('useRegex', e.currentTarget.checked)}
+        onChange={(e) => onParameterChange("useRegex", e.currentTarget.checked)}
         disabled={disabled}
         size="sm"
       />
 
       {/* Whole Word Search */}
       <Checkbox
-        label={t('redact.auto.wholeWordSearchLabel', 'Whole Word Search')}
+        label={t("redact.auto.wholeWordSearchLabel", "Whole Word Search")}
         checked={parameters.wholeWordSearch}
-        onChange={(e) => onParameterChange('wholeWordSearch', e.currentTarget.checked)}
+        onChange={(e) => onParameterChange("wholeWordSearch", e.currentTarget.checked)}
         disabled={disabled}
         size="sm"
       />
 
       {/* Convert PDF to PDF-Image */}
       <Checkbox
-        label={t('redact.auto.convertPDFToImageLabel', 'Convert PDF to PDF-Image (Used to remove text behind the box)')}
+        label={t("redact.auto.convertPDFToImageLabel", "Convert PDF to PDF-Image (Used to remove text behind the box)")}
         checked={parameters.convertPDFToImage}
-        onChange={(e) => onParameterChange('convertPDFToImage', e.currentTarget.checked)}
+        onChange={(e) => onParameterChange("convertPDFToImage", e.currentTarget.checked)}
         disabled={disabled}
         size="sm"
       />
diff --git a/frontend/src/core/components/tools/redact/RedactModeSelector.tsx b/frontend/src/core/components/tools/redact/RedactModeSelector.tsx
index 7bc4960772..db4801e18f 100644
--- a/frontend/src/core/components/tools/redact/RedactModeSelector.tsx
+++ b/frontend/src/core/components/tools/redact/RedactModeSelector.tsx
@@ -1,6 +1,6 @@
-import { useTranslation } from 'react-i18next';
-import { RedactMode } from '@app/hooks/tools/redact/useRedactParameters';
-import ButtonSelector from '@app/components/shared/ButtonSelector';
+import { useTranslation } from "react-i18next";
+import { RedactMode } from "@app/hooks/tools/redact/useRedactParameters";
+import ButtonSelector from "@app/components/shared/ButtonSelector";
 
 interface RedactModeSelectorProps {
   mode: RedactMode;
@@ -9,31 +9,26 @@ interface RedactModeSelectorProps {
   hasAnyFiles?: boolean;
 }
 
-export default function RedactModeSelector({
-  mode,
-  onModeChange,
-  disabled,
-  hasAnyFiles = false
-}: RedactModeSelectorProps) {
+export default function RedactModeSelector({ mode, onModeChange, disabled, hasAnyFiles = false }: RedactModeSelectorProps) {
   const { t } = useTranslation();
 
   return (
     <ButtonSelector
-      label={t('redact.modeSelector.mode', 'Mode')}
+      label={t("redact.modeSelector.mode", "Mode")}
       value={mode}
       onChange={onModeChange}
       options={[
         {
-          value: 'automatic' as const,
-          label: t('redact.modeSelector.automatic', 'Automatic'),
+          value: "automatic" as const,
+          label: t("redact.modeSelector.automatic", "Automatic"),
           disabled: !hasAnyFiles, // Allow switching to automatic whenever files exist; selection can happen after
           tooltip: !hasAnyFiles
-            ? t('redact.modeSelector.automaticDisabledTooltip', 'Upload files to use automatic redaction')
+            ? t("redact.modeSelector.automaticDisabledTooltip", "Upload files to use automatic redaction")
             : undefined,
         },
         {
-          value: 'manual' as const,
-          label: t('redact.modeSelector.manual', 'Manual'),
+          value: "manual" as const,
+          label: t("redact.modeSelector.manual", "Manual"),
           disabled: !hasAnyFiles, // Manual mode works if any files exist in workbench
         },
       ]}
diff --git a/frontend/src/core/components/tools/redact/RedactSingleStepSettings.test.tsx b/frontend/src/core/components/tools/redact/RedactSingleStepSettings.test.tsx
index 4b516aa3b4..57f1808aba 100644
--- a/frontend/src/core/components/tools/redact/RedactSingleStepSettings.test.tsx
+++ b/frontend/src/core/components/tools/redact/RedactSingleStepSettings.test.tsx
@@ -1,183 +1,156 @@
-import { describe, expect, test, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { MantineProvider } from '@mantine/core';
-import RedactSingleStepSettings from '@app/components/tools/redact/RedactSingleStepSettings';
-import { defaultParameters } from '@app/hooks/tools/redact/useRedactParameters';
+import { describe, expect, test, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { MantineProvider } from "@mantine/core";
+import RedactSingleStepSettings from "@app/components/tools/redact/RedactSingleStepSettings";
+import { defaultParameters } from "@app/hooks/tools/redact/useRedactParameters";
 
 // Mock useTranslation
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({ t: vi.fn((_key: string, fallback: string) => fallback) })
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: vi.fn((_key: string, fallback: string) => fallback) }),
 }));
 
 // Wrapper component to provide Mantine context
-const TestWrapper = ({ children }: { children: React.ReactNode }) => (
-  <MantineProvider>{children}</MantineProvider>
-);
+const TestWrapper = ({ children }: { children: React.ReactNode }) => <MantineProvider>{children}</MantineProvider>;
 
-describe('RedactSingleStepSettings', () => {
+describe("RedactSingleStepSettings", () => {
   const mockOnParameterChange = vi.fn();
 
   beforeEach(() => {
     vi.clearAllMocks();
   });
 
-  test('should render mode selector', () => {
+  test("should render mode selector", () => {
     render(
       <TestWrapper>
-        <RedactSingleStepSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <RedactSingleStepSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
-    expect(screen.getByText('Mode')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Automatic' })).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: 'Manual' })).toBeInTheDocument();
+    expect(screen.getByText("Mode")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Automatic" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Manual" })).toBeInTheDocument();
   });
 
-  test('should render automatic mode settings when mode is automatic', () => {
+  test("should render automatic mode settings when mode is automatic", () => {
     render(
       <TestWrapper>
-        <RedactSingleStepSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <RedactSingleStepSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
     // Default mode is automatic, so these should be visible
-    expect(screen.getByText('Words to Redact')).toBeInTheDocument();
-    expect(screen.getByPlaceholderText('Enter a word')).toBeInTheDocument();
-    expect(screen.getByText('Box Colour')).toBeInTheDocument();
-    expect(screen.getByText('Use Regex')).toBeInTheDocument();
+    expect(screen.getByText("Words to Redact")).toBeInTheDocument();
+    expect(screen.getByPlaceholderText("Enter a word")).toBeInTheDocument();
+    expect(screen.getByText("Box Colour")).toBeInTheDocument();
+    expect(screen.getByText("Use Regex")).toBeInTheDocument();
   });
 
-  test('should render manual mode settings when mode is manual', () => {
+  test("should render manual mode settings when mode is manual", () => {
     const manualParameters = {
       ...defaultParameters,
-      mode: 'manual' as const,
+      mode: "manual" as const,
     };
 
     render(
       <TestWrapper>
-        <RedactSingleStepSettings
-          parameters={manualParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <RedactSingleStepSettings parameters={manualParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
     // Manual mode should show placeholder text
-    expect(screen.getByText('Manual redaction interface will be available here when implemented.')).toBeInTheDocument();
+    expect(screen.getByText("Manual redaction interface will be available here when implemented.")).toBeInTheDocument();
 
     // Automatic mode settings should not be visible
-    expect(screen.queryByText('Words to Redact')).not.toBeInTheDocument();
+    expect(screen.queryByText("Words to Redact")).not.toBeInTheDocument();
   });
 
-  test('should pass through parameter changes from automatic settings', () => {
+  test("should pass through parameter changes from automatic settings", () => {
     render(
       <TestWrapper>
-        <RedactSingleStepSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <RedactSingleStepSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
     // Test adding a word
-    const input = screen.getByPlaceholderText('Enter a word');
-    const addButton = screen.getByRole('button', { name: '+ Add' });
+    const input = screen.getByPlaceholderText("Enter a word");
+    const addButton = screen.getByRole("button", { name: "+ Add" });
 
-    fireEvent.change(input, { target: { value: 'TestWord' } });
+    fireEvent.change(input, { target: { value: "TestWord" } });
     fireEvent.click(addButton);
 
-    expect(mockOnParameterChange).toHaveBeenCalledWith('wordsToRedact', ['TestWord']);
+    expect(mockOnParameterChange).toHaveBeenCalledWith("wordsToRedact", ["TestWord"]);
   });
 
-  test('should pass through parameter changes from advanced settings', () => {
+  test("should pass through parameter changes from advanced settings", () => {
     render(
       <TestWrapper>
-        <RedactSingleStepSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <RedactSingleStepSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
     // Test changing color
-    const colorInput = screen.getByDisplayValue('#000000');
-    fireEvent.change(colorInput, { target: { value: '#FF0000' } });
+    const colorInput = screen.getByDisplayValue("#000000");
+    fireEvent.change(colorInput, { target: { value: "#FF0000" } });
 
-    expect(mockOnParameterChange).toHaveBeenCalledWith('redactColor', '#FF0000');
+    expect(mockOnParameterChange).toHaveBeenCalledWith("redactColor", "#FF0000");
   });
 
-  test('should disable all controls when disabled prop is true', () => {
+  test("should disable all controls when disabled prop is true", () => {
     render(
       <TestWrapper>
-        <RedactSingleStepSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-          disabled={true}
-        />
-      </TestWrapper>
+        <RedactSingleStepSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} disabled={true} />
+      </TestWrapper>,
     );
 
     // Mode selector buttons should be disabled
-    expect(screen.getByRole('button', { name: 'Automatic' })).toBeDisabled();
-    expect(screen.getByRole('button', { name: 'Manual' })).toBeDisabled();
+    expect(screen.getByRole("button", { name: "Automatic" })).toBeDisabled();
+    expect(screen.getByRole("button", { name: "Manual" })).toBeDisabled();
 
     // Automatic settings controls should be disabled
-    expect(screen.getByPlaceholderText('Enter a word')).toBeDisabled();
-    expect(screen.getByRole('button', { name: '+ Add' })).toBeDisabled();
-    expect(screen.getByDisplayValue('#000000')).toBeDisabled();
+    expect(screen.getByPlaceholderText("Enter a word")).toBeDisabled();
+    expect(screen.getByRole("button", { name: "+ Add" })).toBeDisabled();
+    expect(screen.getByDisplayValue("#000000")).toBeDisabled();
   });
 
-  test('should show current parameter values in automatic mode', () => {
+  test("should show current parameter values in automatic mode", () => {
     const customParameters = {
       ...defaultParameters,
-      wordsToRedact: ['Word1', 'Word2'],
-      redactColor: '#FF0000',
+      wordsToRedact: ["Word1", "Word2"],
+      redactColor: "#FF0000",
       useRegex: true,
       customPadding: 0.5,
     };
 
     render(
       <TestWrapper>
-        <RedactSingleStepSettings
-          parameters={customParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <RedactSingleStepSettings parameters={customParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
     // Check that word tags are displayed
-    expect(screen.getByText('Word1')).toBeInTheDocument();
-    expect(screen.getByText('Word2')).toBeInTheDocument();
+    expect(screen.getByText("Word1")).toBeInTheDocument();
+    expect(screen.getByText("Word2")).toBeInTheDocument();
 
     // Check that color is displayed
-    expect(screen.getByDisplayValue('#FF0000')).toBeInTheDocument();
+    expect(screen.getByDisplayValue("#FF0000")).toBeInTheDocument();
 
     // Check that regex checkbox is checked
-    const useRegexCheckbox = screen.getByLabelText('Use Regex');
+    const useRegexCheckbox = screen.getByLabelText("Use Regex");
     expect(useRegexCheckbox).toBeChecked();
 
     // Check that padding value is displayed
-    expect(screen.getByDisplayValue('0.5')).toBeInTheDocument();
+    expect(screen.getByDisplayValue("0.5")).toBeInTheDocument();
   });
 
-  test('should maintain consistent spacing and layout', () => {
+  test("should maintain consistent spacing and layout", () => {
     render(
       <TestWrapper>
-        <RedactSingleStepSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <RedactSingleStepSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
     // Check that the Stack container exists
-    const container = screen.getByText('Mode').closest('.mantine-Stack-root');
+    const container = screen.getByText("Mode").closest(".mantine-Stack-root");
     expect(container).toBeInTheDocument();
   });
 });
diff --git a/frontend/src/core/components/tools/redact/RedactSingleStepSettings.tsx b/frontend/src/core/components/tools/redact/RedactSingleStepSettings.tsx
index badea46343..eec80a2e7a 100644
--- a/frontend/src/core/components/tools/redact/RedactSingleStepSettings.tsx
+++ b/frontend/src/core/components/tools/redact/RedactSingleStepSettings.tsx
@@ -16,39 +16,35 @@ const RedactSingleStepSettings = ({ parameters, onParameterChange, disabled = fa
       {/* Mode Selection */}
       <RedactModeSelector
         mode={parameters.mode}
-        onModeChange={(mode) => onParameterChange('mode', mode)}
+        onModeChange={(mode) => onParameterChange("mode", mode)}
         disabled={disabled}
       />
 
       {/* Automatic Mode Settings */}
-      {parameters.mode === 'automatic' && (
+      {parameters.mode === "automatic" && (
         <>
           <Divider />
 
           {/* Words to Redact */}
           <WordsToRedactInput
             wordsToRedact={parameters.wordsToRedact}
-            onWordsChange={(words) => onParameterChange('wordsToRedact', words)}
+            onWordsChange={(words) => onParameterChange("wordsToRedact", words)}
             disabled={disabled}
           />
 
           <Divider />
 
           {/* Advanced Settings */}
-          <RedactAdvancedSettings
-            parameters={parameters}
-            onParameterChange={onParameterChange}
-            disabled={disabled}
-          />
+          <RedactAdvancedSettings parameters={parameters} onParameterChange={onParameterChange} disabled={disabled} />
         </>
       )}
 
       {/* Manual Mode Placeholder */}
-      {parameters.mode === 'manual' && (
+      {parameters.mode === "manual" && (
         <>
           <Divider />
           <Stack gap="md">
-            <div style={{ padding: '20px', textAlign: 'center', color: '#666' }}>
+            <div style={{ padding: "20px", textAlign: "center", color: "#666" }}>
               Manual redaction interface will be available here when implemented.
             </div>
           </Stack>
diff --git a/frontend/src/core/components/tools/redact/WordsToRedactInput.test.tsx b/frontend/src/core/components/tools/redact/WordsToRedactInput.test.tsx
index 84d6f65b99..5347d17d73 100644
--- a/frontend/src/core/components/tools/redact/WordsToRedactInput.test.tsx
+++ b/frontend/src/core/components/tools/redact/WordsToRedactInput.test.tsx
@@ -1,191 +1,161 @@
-import { describe, expect, test, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { MantineProvider } from '@mantine/core';
-import WordsToRedactInput from '@app/components/tools/redact/WordsToRedactInput';
+import { describe, expect, test, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { MantineProvider } from "@mantine/core";
+import WordsToRedactInput from "@app/components/tools/redact/WordsToRedactInput";
 
 // Mock useTranslation
 const mockT = vi.fn((_key: string, fallback: string) => fallback);
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({ t: mockT })
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: mockT }),
 }));
 
 // Wrapper component to provide Mantine context
-const TestWrapper = ({ children }: { children: React.ReactNode }) => (
-  <MantineProvider>{children}</MantineProvider>
-);
+const TestWrapper = ({ children }: { children: React.ReactNode }) => <MantineProvider>{children}</MantineProvider>;
 
-describe('WordsToRedactInput', () => {
+describe("WordsToRedactInput", () => {
   const mockOnWordsChange = vi.fn();
 
   beforeEach(() => {
     vi.clearAllMocks();
   });
 
-  test('should render with title and input field', () => {
+  test("should render with title and input field", () => {
     render(
       <TestWrapper>
-        <WordsToRedactInput
-          wordsToRedact={[]}
-          onWordsChange={mockOnWordsChange}
-        />
-      </TestWrapper>
+        <WordsToRedactInput wordsToRedact={[]} onWordsChange={mockOnWordsChange} />
+      </TestWrapper>,
     );
 
-    expect(screen.getByText('Words to Redact')).toBeInTheDocument();
-    expect(screen.getByPlaceholderText('Enter a word')).toBeInTheDocument();
-    expect(screen.getByRole('button', { name: '+ Add' })).toBeInTheDocument();
+    expect(screen.getByText("Words to Redact")).toBeInTheDocument();
+    expect(screen.getByPlaceholderText("Enter a word")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "+ Add" })).toBeInTheDocument();
   });
 
   test.each([
-    { trigger: 'Add button click', action: (_input: HTMLElement, addButton: HTMLElement) => fireEvent.click(addButton) },
-    { trigger: 'Enter key press', action: (input: HTMLElement) => fireEvent.keyDown(input, { key: 'Enter', code: 'Enter' }) },
-  ])('should add word when $trigger', ({ action }) => {
+    { trigger: "Add button click", action: (_input: HTMLElement, addButton: HTMLElement) => fireEvent.click(addButton) },
+    { trigger: "Enter key press", action: (input: HTMLElement) => fireEvent.keyDown(input, { key: "Enter", code: "Enter" }) },
+  ])("should add word when $trigger", ({ action }) => {
     render(
       <TestWrapper>
-        <WordsToRedactInput
-          wordsToRedact={[]}
-          onWordsChange={mockOnWordsChange}
-        />
-      </TestWrapper>
+        <WordsToRedactInput wordsToRedact={[]} onWordsChange={mockOnWordsChange} />
+      </TestWrapper>,
     );
 
-    const input = screen.getByPlaceholderText('Enter a word');
-    const addButton = screen.getByRole('button', { name: '+ Add' });
+    const input = screen.getByPlaceholderText("Enter a word");
+    const addButton = screen.getByRole("button", { name: "+ Add" });
 
-    fireEvent.change(input, { target: { value: 'TestWord' } });
+    fireEvent.change(input, { target: { value: "TestWord" } });
     action(input, addButton);
 
-    expect(mockOnWordsChange).toHaveBeenCalledWith(['TestWord']);
+    expect(mockOnWordsChange).toHaveBeenCalledWith(["TestWord"]);
   });
 
-  test('should not add empty word', () => {
+  test("should not add empty word", () => {
     render(
       <TestWrapper>
-        <WordsToRedactInput
-          wordsToRedact={[]}
-          onWordsChange={mockOnWordsChange}
-        />
-      </TestWrapper>
+        <WordsToRedactInput wordsToRedact={[]} onWordsChange={mockOnWordsChange} />
+      </TestWrapper>,
     );
 
-    const addButton = screen.getByRole('button', { name: '+ Add' });
+    const addButton = screen.getByRole("button", { name: "+ Add" });
 
     fireEvent.click(addButton);
 
     expect(mockOnWordsChange).not.toHaveBeenCalled();
   });
 
-  test('should not add duplicate word', () => {
+  test("should not add duplicate word", () => {
     render(
       <TestWrapper>
-        <WordsToRedactInput
-          wordsToRedact={['Existing']}
-          onWordsChange={mockOnWordsChange}
-        />
-      </TestWrapper>
+        <WordsToRedactInput wordsToRedact={["Existing"]} onWordsChange={mockOnWordsChange} />
+      </TestWrapper>,
     );
 
-    const input = screen.getByPlaceholderText('Enter a word');
-    const addButton = screen.getByRole('button', { name: '+ Add' });
+    const input = screen.getByPlaceholderText("Enter a word");
+    const addButton = screen.getByRole("button", { name: "+ Add" });
 
-    fireEvent.change(input, { target: { value: 'Existing' } });
+    fireEvent.change(input, { target: { value: "Existing" } });
     fireEvent.click(addButton);
 
     expect(mockOnWordsChange).not.toHaveBeenCalled();
   });
 
-  test('should trim whitespace when adding word', () => {
+  test("should trim whitespace when adding word", () => {
     render(
       <TestWrapper>
-        <WordsToRedactInput
-          wordsToRedact={[]}
-          onWordsChange={mockOnWordsChange}
-        />
-      </TestWrapper>
+        <WordsToRedactInput wordsToRedact={[]} onWordsChange={mockOnWordsChange} />
+      </TestWrapper>,
     );
 
-    const input = screen.getByPlaceholderText('Enter a word');
-    const addButton = screen.getByRole('button', { name: '+ Add' });
+    const input = screen.getByPlaceholderText("Enter a word");
+    const addButton = screen.getByRole("button", { name: "+ Add" });
 
-    fireEvent.change(input, { target: { value: '  TestWord  ' } });
+    fireEvent.change(input, { target: { value: "  TestWord  " } });
     fireEvent.click(addButton);
 
-    expect(mockOnWordsChange).toHaveBeenCalledWith(['TestWord']);
+    expect(mockOnWordsChange).toHaveBeenCalledWith(["TestWord"]);
   });
 
-  test('should remove word when x button is clicked', () => {
+  test("should remove word when x button is clicked", () => {
     render(
       <TestWrapper>
-        <WordsToRedactInput
-          wordsToRedact={['Word1', 'Word2']}
-          onWordsChange={mockOnWordsChange}
-        />
-      </TestWrapper>
+        <WordsToRedactInput wordsToRedact={["Word1", "Word2"]} onWordsChange={mockOnWordsChange} />
+      </TestWrapper>,
     );
 
-    const removeButtons = screen.getAllByText('×');
+    const removeButtons = screen.getAllByText("×");
     fireEvent.click(removeButtons[0]);
 
-    expect(mockOnWordsChange).toHaveBeenCalledWith(['Word2']);
+    expect(mockOnWordsChange).toHaveBeenCalledWith(["Word2"]);
   });
 
-  test('should clear input after adding word', () => {
+  test("should clear input after adding word", () => {
     render(
       <TestWrapper>
-        <WordsToRedactInput
-          wordsToRedact={[]}
-          onWordsChange={mockOnWordsChange}
-        />
-      </TestWrapper>
+        <WordsToRedactInput wordsToRedact={[]} onWordsChange={mockOnWordsChange} />
+      </TestWrapper>,
     );
 
-    const input = screen.getByPlaceholderText('Enter a word') as HTMLInputElement;
-    const addButton = screen.getByRole('button', { name: '+ Add' });
+    const input = screen.getByPlaceholderText("Enter a word") as HTMLInputElement;
+    const addButton = screen.getByRole("button", { name: "+ Add" });
 
-    fireEvent.change(input, { target: { value: 'TestWord' } });
+    fireEvent.change(input, { target: { value: "TestWord" } });
     fireEvent.click(addButton);
 
-    expect(input.value).toBe('');
+    expect(input.value).toBe("");
   });
 
   test.each([
-    { description: 'disable Add button when input is empty', inputValue: '', expectedDisabled: true },
-    { description: 'enable Add button when input has text', inputValue: 'TestWord', expectedDisabled: false },
-  ])('should $description', ({ inputValue, expectedDisabled }) => {
+    { description: "disable Add button when input is empty", inputValue: "", expectedDisabled: true },
+    { description: "enable Add button when input has text", inputValue: "TestWord", expectedDisabled: false },
+  ])("should $description", ({ inputValue, expectedDisabled }) => {
     render(
       <TestWrapper>
-        <WordsToRedactInput
-          wordsToRedact={[]}
-          onWordsChange={mockOnWordsChange}
-        />
-      </TestWrapper>
+        <WordsToRedactInput wordsToRedact={[]} onWordsChange={mockOnWordsChange} />
+      </TestWrapper>,
     );
 
-    const input = screen.getByPlaceholderText('Enter a word');
-    const addButton = screen.getByRole('button', { name: '+ Add' });
+    const input = screen.getByPlaceholderText("Enter a word");
+    const addButton = screen.getByRole("button", { name: "+ Add" });
 
     fireEvent.change(input, { target: { value: inputValue } });
 
-    expect(addButton).toHaveProperty('disabled', expectedDisabled);
+    expect(addButton).toHaveProperty("disabled", expectedDisabled);
   });
 
-  test('should disable all controls when disabled prop is true', () => {
+  test("should disable all controls when disabled prop is true", () => {
     render(
       <TestWrapper>
-        <WordsToRedactInput
-          wordsToRedact={['Word1']}
-          onWordsChange={mockOnWordsChange}
-          disabled={true}
-        />
-      </TestWrapper>
+        <WordsToRedactInput wordsToRedact={["Word1"]} onWordsChange={mockOnWordsChange} disabled={true} />
+      </TestWrapper>,
     );
 
-    const input = screen.getByPlaceholderText('Enter a word');
-    const addButton = screen.getByRole('button', { name: '+ Add' });
-    const removeButton = screen.getByText('×');
+    const input = screen.getByPlaceholderText("Enter a word");
+    const addButton = screen.getByRole("button", { name: "+ Add" });
+    const removeButton = screen.getByText("×");
 
     expect(input).toBeDisabled();
     expect(addButton).toBeDisabled();
-    expect(removeButton.closest('button')).toBeDisabled();
+    expect(removeButton.closest("button")).toBeDisabled();
   });
 });
diff --git a/frontend/src/core/components/tools/redact/WordsToRedactInput.tsx b/frontend/src/core/components/tools/redact/WordsToRedactInput.tsx
index 90c97f0e34..ee061759c4 100644
--- a/frontend/src/core/components/tools/redact/WordsToRedactInput.tsx
+++ b/frontend/src/core/components/tools/redact/WordsToRedactInput.tsx
@@ -1,6 +1,6 @@
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Stack, Text, TextInput, Button, Group, ActionIcon } from '@mantine/core';
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Stack, Text, TextInput, Button, Group, ActionIcon } from "@mantine/core";
 
 interface WordsToRedactInputProps {
   wordsToRedact: string[];
@@ -10,12 +10,12 @@ interface WordsToRedactInputProps {
 
 export default function WordsToRedactInput({ wordsToRedact, onWordsChange, disabled }: WordsToRedactInputProps) {
   const { t } = useTranslation();
-  const [currentWord, setCurrentWord] = useState('');
+  const [currentWord, setCurrentWord] = useState("");
 
   const addWord = () => {
     if (currentWord.trim() && !wordsToRedact.includes(currentWord.trim())) {
       onWordsChange([...wordsToRedact, currentWord.trim()]);
-      setCurrentWord('');
+      setCurrentWord("");
     }
   };
 
@@ -24,7 +24,7 @@ export default function WordsToRedactInput({ wordsToRedact, onWordsChange, disab
   };
 
   const handleKeyPress = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter') {
+    if (e.key === "Enter") {
       e.preventDefault();
       addWord();
     }
@@ -33,35 +33,34 @@ export default function WordsToRedactInput({ wordsToRedact, onWordsChange, disab
   return (
     <Stack gap="sm">
       <Text size="sm" fw={500}>
-        {t('redact.auto.wordsToRedact.title', 'Words to Redact')}
+        {t("redact.auto.wordsToRedact.title", "Words to Redact")}
       </Text>
 
       {/* Current words */}
       {wordsToRedact.map((word, index) => (
-        <Group key={index} justify="space-between" p="sm" style={{
-          borderRadius: 'var(--mantine-radius-sm)',
-          border: `1px solid var(--mantine-color-gray-3)`,
-          backgroundColor: 'var(--mantine-color-gray-0)'
-        }}>
+        <Group
+          key={index}
+          justify="space-between"
+          p="sm"
+          style={{
+            borderRadius: "var(--mantine-radius-sm)",
+            border: `1px solid var(--mantine-color-gray-3)`,
+            backgroundColor: "var(--mantine-color-gray-0)",
+          }}
+        >
           <Text
             size="sm"
             style={{
-              maxWidth: '80%',
-              overflow: 'hidden',
-              textOverflow: 'ellipsis',
-              whiteSpace: 'nowrap'
+              maxWidth: "80%",
+              overflow: "hidden",
+              textOverflow: "ellipsis",
+              whiteSpace: "nowrap",
             }}
             title={word}
           >
             {word}
           </Text>
-          <ActionIcon
-            size="sm"
-            variant="subtle"
-            color="red"
-            onClick={() => removeWord(index)}
-            disabled={disabled}
-          >
+          <ActionIcon size="sm" variant="subtle" color="red" onClick={() => removeWord(index)} disabled={disabled}>
             ×
           </ActionIcon>
         </Group>
@@ -70,7 +69,7 @@ export default function WordsToRedactInput({ wordsToRedact, onWordsChange, disab
       {/* Add new word input */}
       <Group gap="sm" align="end">
         <TextInput
-          placeholder={t('redact.auto.wordsToRedact.placeholder', 'Enter a word')}
+          placeholder={t("redact.auto.wordsToRedact.placeholder", "Enter a word")}
           value={currentWord}
           onChange={(e) => setCurrentWord(e.target.value)}
           onKeyDown={handleKeyPress}
@@ -78,20 +77,15 @@ export default function WordsToRedactInput({ wordsToRedact, onWordsChange, disab
           size="sm"
           style={{ flex: 1 }}
         />
-        <Button
-          size="sm"
-          variant="light"
-          onClick={addWord}
-          disabled={disabled || !currentWord.trim()}
-        >
-          + {t('redact.auto.wordsToRedact.add', 'Add')}
+        <Button size="sm" variant="light" onClick={addWord} disabled={disabled || !currentWord.trim()}>
+          + {t("redact.auto.wordsToRedact.add", "Add")}
         </Button>
       </Group>
 
       {/* Examples */}
       {wordsToRedact.length === 0 && (
         <Text size="xs" c="dimmed">
-          {t('redact.auto.wordsToRedact.examples', 'Examples: Confidential, Top-Secret')}
+          {t("redact.auto.wordsToRedact.examples", "Examples: Confidential, Top-Secret")}
         </Text>
       )}
     </Stack>
diff --git a/frontend/src/core/components/tools/removeAnnotations/RemoveAnnotationsSettings.tsx b/frontend/src/core/components/tools/removeAnnotations/RemoveAnnotationsSettings.tsx
index f8eb749c1c..c7c3711025 100644
--- a/frontend/src/core/components/tools/removeAnnotations/RemoveAnnotationsSettings.tsx
+++ b/frontend/src/core/components/tools/removeAnnotations/RemoveAnnotationsSettings.tsx
@@ -1,11 +1,7 @@
-import { Stack } from '@mantine/core';
+import { Stack } from "@mantine/core";
 
 const RemoveAnnotationsSettings = () => {
-  return (
-    <Stack gap="md">
-      {/* No settings needed for this tool - description is in tooltip */}
-    </Stack>
-  );
+  return <Stack gap="md">{/* No settings needed for this tool - description is in tooltip */}</Stack>;
 };
 
-export default RemoveAnnotationsSettings;
\ No newline at end of file
+export default RemoveAnnotationsSettings;
diff --git a/frontend/src/core/components/tools/removeBlanks/RemoveBlanksSettings.tsx b/frontend/src/core/components/tools/removeBlanks/RemoveBlanksSettings.tsx
index e39cab96ce..9720f715ff 100644
--- a/frontend/src/core/components/tools/removeBlanks/RemoveBlanksSettings.tsx
+++ b/frontend/src/core/components/tools/removeBlanks/RemoveBlanksSettings.tsx
@@ -16,10 +16,10 @@ const RemoveBlanksSettings = ({ parameters, onParameterChange, disabled = false
     <Stack gap="lg" mt="md">
       <Stack gap="xs">
         <NumberInputWithUnit
-          label={t('removeBlanks.threshold.label', 'Pixel Whiteness Threshold')}
+          label={t("removeBlanks.threshold.label", "Pixel Whiteness Threshold")}
           value={parameters.threshold}
-          onChange={(v) => onParameterChange('threshold', typeof v === 'string' ? Number(v) : v)}
-          unit=''
+          onChange={(v) => onParameterChange("threshold", typeof v === "string" ? Number(v) : v)}
+          unit=""
           min={0}
           max={255}
           disabled={disabled}
@@ -28,23 +28,23 @@ const RemoveBlanksSettings = ({ parameters, onParameterChange, disabled = false
 
       <Stack gap="xs">
         <Text size="sm" fw={500}>
-          {t('removeBlanks.whitePercent.label', 'White Percent')}
+          {t("removeBlanks.whitePercent.label", "White Percent")}
         </Text>
         <Group align="center">
           <NumberInput
             value={parameters.whitePercent}
-            onChange={(v) => onParameterChange('whitePercent', typeof v === 'number' ? v : 0.1)}
+            onChange={(v) => onParameterChange("whitePercent", typeof v === "number" ? v : 0.1)}
             min={0.1}
             max={100}
             step={0.1}
             size="sm"
             rightSection="%"
-            style={{ width: '80px' }}
+            style={{ width: "80px" }}
             disabled={disabled}
           />
           <Slider
             value={parameters.whitePercent}
-            onChange={(value) => onParameterChange('whitePercent', value)}
+            onChange={(value) => onParameterChange("whitePercent", value)}
             min={0.1}
             max={100}
             step={0.1}
@@ -57,11 +57,11 @@ const RemoveBlanksSettings = ({ parameters, onParameterChange, disabled = false
       <Stack gap="xs">
         <Checkbox
           checked={parameters.includeBlankPages}
-          onChange={(event) => onParameterChange('includeBlankPages', event.currentTarget.checked)}
+          onChange={(event) => onParameterChange("includeBlankPages", event.currentTarget.checked)}
           disabled={disabled}
           label={
             <div>
-              <Text size="sm">{t('removeBlanks.includeBlankPages.label', 'Include detected blank pages')}</Text>
+              <Text size="sm">{t("removeBlanks.includeBlankPages.label", "Include detected blank pages")}</Text>
             </div>
           }
         />
@@ -71,5 +71,3 @@ const RemoveBlanksSettings = ({ parameters, onParameterChange, disabled = false
 };
 
 export default RemoveBlanksSettings;
-
-
diff --git a/frontend/src/core/components/tools/removeCertificateSign/RemoveCertificateSignSettings.tsx b/frontend/src/core/components/tools/removeCertificateSign/RemoveCertificateSignSettings.tsx
index c9463ad76c..836ea354ff 100644
--- a/frontend/src/core/components/tools/removeCertificateSign/RemoveCertificateSignSettings.tsx
+++ b/frontend/src/core/components/tools/removeCertificateSign/RemoveCertificateSignSettings.tsx
@@ -1,10 +1,13 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { RemoveCertificateSignParameters } from '@app/hooks/tools/removeCertificateSign/useRemoveCertificateSignParameters';
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { RemoveCertificateSignParameters } from "@app/hooks/tools/removeCertificateSign/useRemoveCertificateSignParameters";
 
 interface RemoveCertificateSignSettingsProps {
   parameters: RemoveCertificateSignParameters;
-  onParameterChange: <K extends keyof RemoveCertificateSignParameters>(parameter: K, value: RemoveCertificateSignParameters[K]) => void;
+  onParameterChange: <K extends keyof RemoveCertificateSignParameters>(
+    parameter: K,
+    value: RemoveCertificateSignParameters[K],
+  ) => void;
   disabled?: boolean;
 }
 
@@ -14,7 +17,7 @@ const RemoveCertificateSignSettings: React.FC<RemoveCertificateSignSettingsProps
   return (
     <div className="remove-certificate-sign-settings">
       <p className="text-muted">
-        {t('removeCertSign.description', 'This tool will remove digital certificate signatures from your PDF document.')}
+        {t("removeCertSign.description", "This tool will remove digital certificate signatures from your PDF document.")}
       </p>
     </div>
   );
diff --git a/frontend/src/core/components/tools/removePages/RemovePagesSettings.tsx b/frontend/src/core/components/tools/removePages/RemovePagesSettings.tsx
index 13b3ded2bf..2b666b7d3d 100644
--- a/frontend/src/core/components/tools/removePages/RemovePagesSettings.tsx
+++ b/frontend/src/core/components/tools/removePages/RemovePagesSettings.tsx
@@ -14,24 +14,31 @@ const RemovePagesSettings = ({ parameters, onParameterChange, disabled = false }
 
   const handlePageNumbersChange = (value: string) => {
     // Allow user to type naturally - don't normalize input in real-time
-    onParameterChange('pageNumbers', value);
+    onParameterChange("pageNumbers", value);
   };
-  console.log('Current pageNumbers input:', parameters.pageNumbers, disabled);
+  console.log("Current pageNumbers input:", parameters.pageNumbers, disabled);
 
   // Check if current input is valid
-  const isValid = validatePageNumbers(parameters.pageNumbers || '');
+  const isValid = validatePageNumbers(parameters.pageNumbers || "");
   const hasValue = (parameters?.pageNumbers?.trim().length ?? 0) > 0;
 
   return (
     <Stack gap="md">
       <TextInput
-        label={t('removePages.pageNumbers.label', 'Pages to Remove')}
-        value={parameters.pageNumbers || ''}
+        label={t("removePages.pageNumbers.label", "Pages to Remove")}
+        value={parameters.pageNumbers || ""}
         onChange={(event) => handlePageNumbersChange(event.currentTarget.value)}
-        placeholder={t('removePages.pageNumbers.placeholder', 'e.g., 1,3,5-8,10')}
+        placeholder={t("removePages.pageNumbers.placeholder", "e.g., 1,3,5-8,10")}
         disabled={disabled}
         required
-        error={hasValue && !isValid ? t('removePages.pageNumbers.error', 'Invalid page number format. Use numbers, ranges (1-5), or mathematical expressions (2n+1)') : undefined}
+        error={
+          hasValue && !isValid
+            ? t(
+                "removePages.pageNumbers.error",
+                "Invalid page number format. Use numbers, ranges (1-5), or mathematical expressions (2n+1)",
+              )
+            : undefined
+        }
       />
     </Stack>
   );
diff --git a/frontend/src/core/components/tools/removePassword/RemovePasswordSettings.test.tsx b/frontend/src/core/components/tools/removePassword/RemovePasswordSettings.test.tsx
index bf0a006d6a..f59a8c3291 100644
--- a/frontend/src/core/components/tools/removePassword/RemovePasswordSettings.test.tsx
+++ b/frontend/src/core/components/tools/removePassword/RemovePasswordSettings.test.tsx
@@ -1,127 +1,102 @@
-import { describe, expect, test, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { MantineProvider } from '@mantine/core';
-import RemovePasswordSettings from '@app/components/tools/removePassword/RemovePasswordSettings';
-import { defaultParameters } from '@app/hooks/tools/removePassword/useRemovePasswordParameters';
+import { describe, expect, test, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { MantineProvider } from "@mantine/core";
+import RemovePasswordSettings from "@app/components/tools/removePassword/RemovePasswordSettings";
+import { defaultParameters } from "@app/hooks/tools/removePassword/useRemovePasswordParameters";
 
 // Mock useTranslation with predictable return values
 const mockT = vi.fn((key: string) => `mock-${key}`);
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({ t: mockT })
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: mockT }),
 }));
 
 // Wrapper component to provide Mantine context
-const TestWrapper = ({ children }: { children: React.ReactNode }) => (
-  <MantineProvider>{children}</MantineProvider>
-);
+const TestWrapper = ({ children }: { children: React.ReactNode }) => <MantineProvider>{children}</MantineProvider>;
 
-describe('RemovePasswordSettings', () => {
+describe("RemovePasswordSettings", () => {
   const mockOnParameterChange = vi.fn();
 
   beforeEach(() => {
     vi.clearAllMocks();
   });
 
-  test('should render password input field', () => {
+  test("should render password input field", () => {
     render(
       <TestWrapper>
-        <RemovePasswordSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <RemovePasswordSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
-    expect(screen.getByText('mock-removePassword.password.label')).toBeInTheDocument();
+    expect(screen.getByText("mock-removePassword.password.label")).toBeInTheDocument();
   });
 
-  test('should call onParameterChange when password is entered', () => {
+  test("should call onParameterChange when password is entered", () => {
     render(
       <TestWrapper>
-        <RemovePasswordSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <RemovePasswordSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
-    const passwordInput = screen.getByPlaceholderText('mock-removePassword.password.placeholder');
-    fireEvent.change(passwordInput, { target: { value: 'test-password' } });
+    const passwordInput = screen.getByPlaceholderText("mock-removePassword.password.placeholder");
+    fireEvent.change(passwordInput, { target: { value: "test-password" } });
 
-    expect(mockOnParameterChange).toHaveBeenCalledWith('password', 'test-password');
+    expect(mockOnParameterChange).toHaveBeenCalledWith("password", "test-password");
   });
 
-  test('should display current password value', () => {
-    const parametersWithPassword = { ...defaultParameters, password: 'current-password' };
+  test("should display current password value", () => {
+    const parametersWithPassword = { ...defaultParameters, password: "current-password" };
 
     render(
       <TestWrapper>
-        <RemovePasswordSettings
-          parameters={parametersWithPassword}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <RemovePasswordSettings parameters={parametersWithPassword} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
-    const passwordInput = screen.getByPlaceholderText('mock-removePassword.password.placeholder') as HTMLInputElement;
-    expect(passwordInput.value).toBe('current-password');
+    const passwordInput = screen.getByPlaceholderText("mock-removePassword.password.placeholder") as HTMLInputElement;
+    expect(passwordInput.value).toBe("current-password");
   });
 
-  test('should disable password input when disabled prop is true', () => {
+  test("should disable password input when disabled prop is true", () => {
     render(
       <TestWrapper>
-        <RemovePasswordSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-          disabled={true}
-        />
-      </TestWrapper>
+        <RemovePasswordSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} disabled={true} />
+      </TestWrapper>,
     );
 
-    const passwordInput = screen.getByPlaceholderText('mock-removePassword.password.placeholder');
+    const passwordInput = screen.getByPlaceholderText("mock-removePassword.password.placeholder");
     expect(passwordInput).toBeDisabled();
   });
 
-  test('should enable password input when disabled prop is false', () => {
+  test("should enable password input when disabled prop is false", () => {
     render(
       <TestWrapper>
-        <RemovePasswordSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-          disabled={false}
-        />
-      </TestWrapper>
+        <RemovePasswordSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} disabled={false} />
+      </TestWrapper>,
     );
 
-    const passwordInput = screen.getByPlaceholderText('mock-removePassword.password.placeholder');
+    const passwordInput = screen.getByPlaceholderText("mock-removePassword.password.placeholder");
     expect(passwordInput).not.toBeDisabled();
   });
 
-  test('should show password input as required', () => {
+  test("should show password input as required", () => {
     render(
       <TestWrapper>
-        <RemovePasswordSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <RemovePasswordSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
-    const passwordInput = screen.getByPlaceholderText('mock-removePassword.password.placeholder');
-    expect(passwordInput).toHaveAttribute('required');
+    const passwordInput = screen.getByPlaceholderText("mock-removePassword.password.placeholder");
+    expect(passwordInput).toHaveAttribute("required");
   });
 
-  test('should call translation function with correct keys', () => {
+  test("should call translation function with correct keys", () => {
     render(
       <TestWrapper>
-        <RemovePasswordSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <RemovePasswordSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
-    expect(mockT).toHaveBeenCalledWith('removePassword.password.label', 'Current Password');
-    expect(mockT).toHaveBeenCalledWith('removePassword.password.placeholder', 'Enter current password');
+    expect(mockT).toHaveBeenCalledWith("removePassword.password.label", "Current Password");
+    expect(mockT).toHaveBeenCalledWith("removePassword.password.placeholder", "Enter current password");
   });
 });
diff --git a/frontend/src/core/components/tools/removePassword/RemovePasswordSettings.tsx b/frontend/src/core/components/tools/removePassword/RemovePasswordSettings.tsx
index edc07de7e3..6401206164 100644
--- a/frontend/src/core/components/tools/removePassword/RemovePasswordSettings.tsx
+++ b/frontend/src/core/components/tools/removePassword/RemovePasswordSettings.tsx
@@ -15,10 +15,10 @@ const RemovePasswordSettings = ({ parameters, onParameterChange, disabled = fals
     <Stack gap="md">
       <Stack gap="sm">
         <PasswordInput
-          label={t('removePassword.password.label', 'Current Password')}
-          placeholder={t('removePassword.password.placeholder', 'Enter current password')}
+          label={t("removePassword.password.label", "Current Password")}
+          placeholder={t("removePassword.password.placeholder", "Enter current password")}
           value={parameters.password}
-          onChange={(e) => onParameterChange('password', e.target.value)}
+          onChange={(e) => onParameterChange("password", e.target.value)}
           disabled={disabled}
           required
         />
diff --git a/frontend/src/core/components/tools/reorganizePages/ReorganizePagesSettings.tsx b/frontend/src/core/components/tools/reorganizePages/ReorganizePagesSettings.tsx
index cc3b18cfb7..2e566edace 100644
--- a/frontend/src/core/components/tools/reorganizePages/ReorganizePagesSettings.tsx
+++ b/frontend/src/core/components/tools/reorganizePages/ReorganizePagesSettings.tsx
@@ -1,8 +1,8 @@
-import { Divider, Select, Stack, TextInput } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { ReorganizePagesParameters } from '@app/hooks/tools/reorganizePages/useReorganizePagesParameters';
-import { getReorganizePagesModeData } from '@app/components/tools/reorganizePages/constants';
-import { Z_INDEX_AUTOMATE_DROPDOWN } from '@app/styles/zIndex';
+import { Divider, Select, Stack, TextInput } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { ReorganizePagesParameters } from "@app/hooks/tools/reorganizePages/useReorganizePagesParameters";
+import { getReorganizePagesModeData } from "@app/components/tools/reorganizePages/constants";
+import { Z_INDEX_AUTOMATE_DROPDOWN } from "@app/styles/zIndex";
 
 export default function ReorganizePagesSettings({
   parameters,
@@ -10,37 +10,34 @@ export default function ReorganizePagesSettings({
   disabled,
 }: {
   parameters: ReorganizePagesParameters;
-  onParameterChange: <K extends keyof ReorganizePagesParameters>(
-    key: K,
-    value: ReorganizePagesParameters[K]
-  ) => void;
+  onParameterChange: <K extends keyof ReorganizePagesParameters>(key: K, value: ReorganizePagesParameters[K]) => void;
   disabled?: boolean;
 }) {
   const { t } = useTranslation();
   const modeData = getReorganizePagesModeData(t);
 
-  const requiresOrder = parameters.customMode === '' || parameters.customMode === 'DUPLICATE';
-  const selectedMode = modeData.find(mode => mode.value === parameters.customMode) || modeData[0];
+  const requiresOrder = parameters.customMode === "" || parameters.customMode === "DUPLICATE";
+  const selectedMode = modeData.find((mode) => mode.value === parameters.customMode) || modeData[0];
   return (
     <Stack gap="sm">
       <Select
-        label={t('pdfOrganiser.mode._value', 'Organization mode')}
+        label={t("pdfOrganiser.mode._value", "Organization mode")}
         data={modeData}
         value={parameters.customMode}
-        onChange={(v) => onParameterChange('customMode', v ?? '')}
+        onChange={(v) => onParameterChange("customMode", v ?? "")}
         disabled={disabled}
         comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
       />
       {selectedMode && (
         <div
           style={{
-            backgroundColor: 'var(--information-text-bg)',
-            color: 'var(--information-text-color)',
-            padding: '8px 12px',
-            borderRadius: '8px',
-            marginTop: '4px',
-            fontSize: '0.75rem',
-            textAlign: 'center'
+            backgroundColor: "var(--information-text-bg)",
+            color: "var(--information-text-color)",
+            padding: "8px 12px",
+            borderRadius: "8px",
+            marginTop: "4px",
+            fontSize: "0.75rem",
+            textAlign: "center",
           }}
         >
           {selectedMode.description}
@@ -49,18 +46,16 @@ export default function ReorganizePagesSettings({
 
       {requiresOrder && (
         <>
-        <Divider/>
-        <TextInput
-          label={t('pageOrderPrompt', 'Page order / ranges')}
-          placeholder={t('pdfOrganiser.placeholder', 'e.g. 1,3,2,4-6')}
-          value={parameters.pageNumbers}
-          onChange={(e) => onParameterChange('pageNumbers', e.currentTarget.value)}
-          disabled={disabled}
-        />
+          <Divider />
+          <TextInput
+            label={t("pageOrderPrompt", "Page order / ranges")}
+            placeholder={t("pdfOrganiser.placeholder", "e.g. 1,3,2,4-6")}
+            value={parameters.pageNumbers}
+            onChange={(e) => onParameterChange("pageNumbers", e.currentTarget.value)}
+            disabled={disabled}
+          />
         </>
       )}
     </Stack>
   );
 }
-
-
diff --git a/frontend/src/core/components/tools/reorganizePages/constants.ts b/frontend/src/core/components/tools/reorganizePages/constants.ts
index a61ec38711..5fd4260f7c 100644
--- a/frontend/src/core/components/tools/reorganizePages/constants.ts
+++ b/frontend/src/core/components/tools/reorganizePages/constants.ts
@@ -1,59 +1,80 @@
-import { TFunction } from 'i18next';
+import { TFunction } from "i18next";
 
 export const getReorganizePagesModeData = (t: TFunction) => [
-  { 
-    value: '', 
-    label: t('pdfOrganiser.mode.1', 'Custom Page Order'),
-    description: t('pdfOrganiser.mode.desc.CUSTOM', 'Use a custom sequence of page numbers or expressions to define a new order.')
+  {
+    value: "",
+    label: t("pdfOrganiser.mode.1", "Custom Page Order"),
+    description: t(
+      "pdfOrganiser.mode.desc.CUSTOM",
+      "Use a custom sequence of page numbers or expressions to define a new order.",
+    ),
   },
-  { 
-    value: 'REVERSE_ORDER', 
-    label: t('pdfOrganiser.mode.2', 'Reverse Order'),
-    description: t('pdfOrganiser.mode.desc.REVERSE_ORDER', 'Flip the document so the last page becomes first and so on.')
+  {
+    value: "REVERSE_ORDER",
+    label: t("pdfOrganiser.mode.2", "Reverse Order"),
+    description: t("pdfOrganiser.mode.desc.REVERSE_ORDER", "Flip the document so the last page becomes first and so on."),
   },
-  { 
-    value: 'DUPLEX_SORT', 
-    label: t('pdfOrganiser.mode.3', 'Duplex Sort'),
-    description: t('pdfOrganiser.mode.desc.DUPLEX_SORT', 'Interleave fronts then backs as if a duplex scanner scanned all fronts, then all backs (1, n, 2, n-1, …).')
+  {
+    value: "DUPLEX_SORT",
+    label: t("pdfOrganiser.mode.3", "Duplex Sort"),
+    description: t(
+      "pdfOrganiser.mode.desc.DUPLEX_SORT",
+      "Interleave fronts then backs as if a duplex scanner scanned all fronts, then all backs (1, n, 2, n-1, …).",
+    ),
   },
-  { 
-    value: 'BOOKLET_SORT', 
-    label: t('pdfOrganiser.mode.4', 'Booklet Sort'),
-    description: t('pdfOrganiser.mode.desc.BOOKLET_SORT', 'Arrange pages for booklet printing (last, first, second, second last, …).')
+  {
+    value: "BOOKLET_SORT",
+    label: t("pdfOrganiser.mode.4", "Booklet Sort"),
+    description: t(
+      "pdfOrganiser.mode.desc.BOOKLET_SORT",
+      "Arrange pages for booklet printing (last, first, second, second last, …).",
+    ),
   },
-  { 
-    value: 'SIDE_STITCH_BOOKLET_SORT', 
-    label: t('pdfOrganiser.mode.5', 'Side Stitch Booklet Sort'),
-    description: t('pdfOrganiser.mode.desc.SIDE_STITCH_BOOKLET_SORT', 'Arrange pages for side‑stitch booklet printing (optimized for binding on the side).')
+  {
+    value: "SIDE_STITCH_BOOKLET_SORT",
+    label: t("pdfOrganiser.mode.5", "Side Stitch Booklet Sort"),
+    description: t(
+      "pdfOrganiser.mode.desc.SIDE_STITCH_BOOKLET_SORT",
+      "Arrange pages for side‑stitch booklet printing (optimized for binding on the side).",
+    ),
   },
-  { 
-    value: 'ODD_EVEN_SPLIT', 
-    label: t('pdfOrganiser.mode.6', 'Odd-Even Split'),
-    description: t('pdfOrganiser.mode.desc.ODD_EVEN_SPLIT', 'Split the document into two outputs: all odd pages and all even pages.')
+  {
+    value: "ODD_EVEN_SPLIT",
+    label: t("pdfOrganiser.mode.6", "Odd-Even Split"),
+    description: t(
+      "pdfOrganiser.mode.desc.ODD_EVEN_SPLIT",
+      "Split the document into two outputs: all odd pages and all even pages.",
+    ),
   },
-  { 
-    value: 'ODD_EVEN_MERGE', 
-    label: t('pdfOrganiser.mode.10', 'Odd-Even Merge'),
-    description: t('pdfOrganiser.mode.desc.ODD_EVEN_MERGE', 'Merge two PDFs by alternating pages: odd from the first, even from the second.')
+  {
+    value: "ODD_EVEN_MERGE",
+    label: t("pdfOrganiser.mode.10", "Odd-Even Merge"),
+    description: t(
+      "pdfOrganiser.mode.desc.ODD_EVEN_MERGE",
+      "Merge two PDFs by alternating pages: odd from the first, even from the second.",
+    ),
   },
-  { 
-    value: 'DUPLICATE', 
-    label: t('pdfOrganiser.mode.11', 'Duplicate all pages'),
-    description: t('pdfOrganiser.mode.desc.DUPLICATE', 'Duplicate each page according to the custom order count (e.g., 4 duplicates each page 4×).')
+  {
+    value: "DUPLICATE",
+    label: t("pdfOrganiser.mode.11", "Duplicate all pages"),
+    description: t(
+      "pdfOrganiser.mode.desc.DUPLICATE",
+      "Duplicate each page according to the custom order count (e.g., 4 duplicates each page 4×).",
+    ),
   },
-  { 
-    value: 'REMOVE_FIRST', 
-    label: t('pdfOrganiser.mode.7', 'Remove First'),
-    description: t('pdfOrganiser.mode.desc.REMOVE_FIRST', 'Remove the first page from the document.')
+  {
+    value: "REMOVE_FIRST",
+    label: t("pdfOrganiser.mode.7", "Remove First"),
+    description: t("pdfOrganiser.mode.desc.REMOVE_FIRST", "Remove the first page from the document."),
   },
-  { 
-    value: 'REMOVE_LAST', 
-    label: t('pdfOrganiser.mode.8', 'Remove Last'),
-    description: t('pdfOrganiser.mode.desc.REMOVE_LAST', 'Remove the last page from the document.')
+  {
+    value: "REMOVE_LAST",
+    label: t("pdfOrganiser.mode.8", "Remove Last"),
+    description: t("pdfOrganiser.mode.desc.REMOVE_LAST", "Remove the last page from the document."),
   },
-  { 
-    value: 'REMOVE_FIRST_AND_LAST', 
-    label: t('pdfOrganiser.mode.9', 'Remove First and Last'),
-    description: t('pdfOrganiser.mode.desc.REMOVE_FIRST_AND_LAST', 'Remove both the first and last pages from the document.')
+  {
+    value: "REMOVE_FIRST_AND_LAST",
+    label: t("pdfOrganiser.mode.9", "Remove First and Last"),
+    description: t("pdfOrganiser.mode.desc.REMOVE_FIRST_AND_LAST", "Remove both the first and last pages from the document."),
   },
 ];
diff --git a/frontend/src/core/components/tools/repair/RepairSettings.tsx b/frontend/src/core/components/tools/repair/RepairSettings.tsx
index a18664f7fa..95f1fda1a3 100644
--- a/frontend/src/core/components/tools/repair/RepairSettings.tsx
+++ b/frontend/src/core/components/tools/repair/RepairSettings.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { RepairParameters } from '@app/hooks/tools/repair/useRepairParameters';
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { RepairParameters } from "@app/hooks/tools/repair/useRepairParameters";
 
 interface RepairSettingsProps {
   parameters: RepairParameters;
@@ -14,7 +14,10 @@ const RepairSettings: React.FC<RepairSettingsProps> = (_) => {
   return (
     <div className="repair-settings">
       <p className="text-muted">
-        {t('repair.description', 'This tool will attempt to repair corrupted or damaged PDF files. No additional settings are required.')}
+        {t(
+          "repair.description",
+          "This tool will attempt to repair corrupted or damaged PDF files. No additional settings are required.",
+        )}
       </p>
     </div>
   );
diff --git a/frontend/src/core/components/tools/replaceColor/ReplaceColorSettings.tsx b/frontend/src/core/components/tools/replaceColor/ReplaceColorSettings.tsx
index 3617a57f62..714ef4a30e 100644
--- a/frontend/src/core/components/tools/replaceColor/ReplaceColorSettings.tsx
+++ b/frontend/src/core/components/tools/replaceColor/ReplaceColorSettings.tsx
@@ -14,65 +14,73 @@ const ReplaceColorSettings = ({ parameters, onParameterChange, disabled = false
 
   const replaceAndInvertOptions = [
     {
-      value: 'HIGH_CONTRAST_COLOR',
-      label: t('replaceColor.options.highContrast', 'High contrast')
+      value: "HIGH_CONTRAST_COLOR",
+      label: t("replaceColor.options.highContrast", "High contrast"),
     },
     {
-      value: 'FULL_INVERSION',
-      label: t('replaceColor.options.invertAll', 'Invert all colours')
+      value: "FULL_INVERSION",
+      label: t("replaceColor.options.invertAll", "Invert all colours"),
     },
     {
-      value: 'CUSTOM_COLOR',
-      label: t('replaceColor.options.custom', 'Custom')
+      value: "CUSTOM_COLOR",
+      label: t("replaceColor.options.custom", "Custom"),
     },
     {
-      value: 'COLOR_SPACE_CONVERSION',
-      label: t('replaceColor.options.cmyk', 'Convert to CMYK')
-    }
+      value: "COLOR_SPACE_CONVERSION",
+      label: t("replaceColor.options.cmyk", "Convert to CMYK"),
+    },
   ];
 
   const highContrastOptions = [
     {
-      value: 'WHITE_TEXT_ON_BLACK',
-      label: t('replace-color.selectText.6', 'White text on black background')
+      value: "WHITE_TEXT_ON_BLACK",
+      label: t("replace-color.selectText.6", "White text on black background"),
     },
     {
-      value: 'BLACK_TEXT_ON_WHITE',
-      label: t('replace-color.selectText.7', 'Black text on white background')
+      value: "BLACK_TEXT_ON_WHITE",
+      label: t("replace-color.selectText.7", "Black text on white background"),
     },
     {
-      value: 'YELLOW_TEXT_ON_BLACK',
-      label: t('replace-color.selectText.8', 'Yellow text on black background')
+      value: "YELLOW_TEXT_ON_BLACK",
+      label: t("replace-color.selectText.8", "Yellow text on black background"),
     },
     {
-      value: 'GREEN_TEXT_ON_BLACK',
-      label: t('replace-color.selectText.9', 'Green text on black background')
-    }
+      value: "GREEN_TEXT_ON_BLACK",
+      label: t("replace-color.selectText.9", "Green text on black background"),
+    },
   ];
 
   return (
     <Stack gap="md">
       <Stack gap="xs">
         <Text size="sm" fw={500}>
-          {t('replaceColor.labels.colourOperation', 'Colour operation')}
+          {t("replaceColor.labels.colourOperation", "Colour operation")}
         </Text>
         <Select
           value={parameters.replaceAndInvertOption}
-          onChange={(value) => value && onParameterChange('replaceAndInvertOption', value as ReplaceColorParameters['replaceAndInvertOption'])}
+          onChange={(value) =>
+            value && onParameterChange("replaceAndInvertOption", value as ReplaceColorParameters["replaceAndInvertOption"])
+          }
           data={replaceAndInvertOptions}
           disabled={disabled}
           comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
         />
       </Stack>
 
-      {parameters.replaceAndInvertOption === 'HIGH_CONTRAST_COLOR' && (
+      {parameters.replaceAndInvertOption === "HIGH_CONTRAST_COLOR" && (
         <Stack gap="xs">
           <Text size="sm" fw={500}>
-            {t('replace-color.selectText.5', 'High contrast color options')}
+            {t("replace-color.selectText.5", "High contrast color options")}
           </Text>
           <Select
             value={parameters.highContrastColorCombination}
-            onChange={(value) => value && onParameterChange('highContrastColorCombination', value as ReplaceColorParameters['highContrastColorCombination'])}
+            onChange={(value) =>
+              value &&
+              onParameterChange(
+                "highContrastColorCombination",
+                value as ReplaceColorParameters["highContrastColorCombination"],
+              )
+            }
             data={highContrastOptions}
             disabled={disabled}
             comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
@@ -80,15 +88,15 @@ const ReplaceColorSettings = ({ parameters, onParameterChange, disabled = false
         </Stack>
       )}
 
-      {parameters.replaceAndInvertOption === 'CUSTOM_COLOR' && (
+      {parameters.replaceAndInvertOption === "CUSTOM_COLOR" && (
         <>
           <Stack gap="xs">
             <Text size="sm" fw={500}>
-              {t('replace-color.selectText.10', 'Choose text Color')}
+              {t("replace-color.selectText.10", "Choose text Color")}
             </Text>
             <ColorInput
               value={parameters.textColor}
-              onChange={(value) => onParameterChange('textColor', value)}
+              onChange={(value) => onParameterChange("textColor", value)}
               format="hex"
               disabled={disabled}
               popoverProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
@@ -97,11 +105,11 @@ const ReplaceColorSettings = ({ parameters, onParameterChange, disabled = false
 
           <Stack gap="xs">
             <Text size="sm" fw={500}>
-              {t('replace-color.selectText.11', 'Choose background Color')}
+              {t("replace-color.selectText.11", "Choose background Color")}
             </Text>
             <ColorInput
               value={parameters.backGroundColor}
-              onChange={(value) => onParameterChange('backGroundColor', value)}
+              onChange={(value) => onParameterChange("backGroundColor", value)}
               format="hex"
               disabled={disabled}
               popoverProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
diff --git a/frontend/src/core/components/tools/rotate/RotateAutomationSettings.tsx b/frontend/src/core/components/tools/rotate/RotateAutomationSettings.tsx
index d449578b12..11cbf3eef9 100644
--- a/frontend/src/core/components/tools/rotate/RotateAutomationSettings.tsx
+++ b/frontend/src/core/components/tools/rotate/RotateAutomationSettings.tsx
@@ -27,7 +27,7 @@ const RotateAutomationSettings = ({ parameters, onParameterChange, disabled = fa
 
       <ButtonSelector
         value={parameters.angle}
-        onChange={(value: number) => onParameterChange('angle', value)}
+        onChange={(value: number) => onParameterChange("angle", value)}
         options={[
           { value: 0, label: "0°" },
           { value: 90, label: "90°" },
diff --git a/frontend/src/core/components/tools/rotate/RotateSettings.tsx b/frontend/src/core/components/tools/rotate/RotateSettings.tsx
index 9ac4748aea..e7197feec3 100644
--- a/frontend/src/core/components/tools/rotate/RotateSettings.tsx
+++ b/frontend/src/core/components/tools/rotate/RotateSettings.tsx
@@ -33,19 +33,19 @@ const RotateSettings = ({ parameters, disabled = false }: RotateSettingsProps) =
 
   useEffect(() => {
     const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key === 'ArrowLeft') {
+      if (event.key === "ArrowLeft") {
         event.preventDefault();
         parameters.rotateAnticlockwise();
-      } else if (event.key === 'ArrowRight') {
+      } else if (event.key === "ArrowRight") {
         event.preventDefault();
         parameters.rotateClockwise();
       }
     };
 
-    window.addEventListener('keydown', handleKeyDown);
+    window.addEventListener("keydown", handleKeyDown);
 
     return () => {
-      window.removeEventListener('keydown', handleKeyDown);
+      window.removeEventListener("keydown", handleKeyDown);
     };
   }, [parameters]);
 
@@ -60,32 +60,29 @@ const RotateSettings = ({ parameters, disabled = false }: RotateSettingsProps) =
         <Center>
           <Box
             style={{
-              width: '280px',
-              height: '280px',
-              border: '1px solid var(--mantine-color-gray-3)',
-              borderRadius: '8px',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              backgroundColor: 'var(--mantine-color-gray-0)',
-              overflow: 'hidden',
+              width: "280px",
+              height: "280px",
+              border: "1px solid var(--mantine-color-gray-3)",
+              borderRadius: "8px",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              backgroundColor: "var(--mantine-color-gray-0)",
+              overflow: "hidden",
             }}
           >
             <Box
               style={{
-                width: '100%',
-                height: '100%',
+                width: "100%",
+                height: "100%",
                 transform: `rotate(${currentAngle}deg)`,
-                transition: 'transform 0.3s ease-in-out',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
+                transition: "transform 0.3s ease-in-out",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
               }}
             >
-              <DocumentThumbnail
-                file={selectedStub}
-                thumbnail={thumbnail}
-              />
+              <DocumentThumbnail file={selectedStub} thumbnail={thumbnail} />
             </Box>
           </Box>
         </Center>
@@ -101,7 +98,7 @@ const RotateSettings = ({ parameters, disabled = false }: RotateSettingsProps) =
           aria-label={t("rotate.rotateLeft", "Rotate Anticlockwise")}
           title={t("rotate.rotateLeft", "Rotate Anticlockwise")}
         >
-          <RotateLeftIcon style={{ fontSize: '1.5rem' }} />
+          <RotateLeftIcon style={{ fontSize: "1.5rem" }} />
         </ActionIcon>
 
         <ActionIcon
@@ -112,7 +109,7 @@ const RotateSettings = ({ parameters, disabled = false }: RotateSettingsProps) =
           aria-label={t("rotate.rotateRight", "Rotate Clockwise")}
           title={t("rotate.rotateRight", "Rotate Clockwise")}
         >
-          <RotateRightIcon style={{ fontSize: '1.5rem' }} />
+          <RotateRightIcon style={{ fontSize: "1.5rem" }} />
         </ActionIcon>
       </Group>
     </Stack>
diff --git a/frontend/src/core/components/tools/sanitize/SanitizeSettings.test.tsx b/frontend/src/core/components/tools/sanitize/SanitizeSettings.test.tsx
index 2d1c3b68fe..de30976eef 100644
--- a/frontend/src/core/components/tools/sanitize/SanitizeSettings.test.tsx
+++ b/frontend/src/core/components/tools/sanitize/SanitizeSettings.test.tsx
@@ -1,21 +1,19 @@
-import { describe, expect, test, vi, beforeEach } from 'vitest';
-import { render, screen, fireEvent } from '@testing-library/react';
-import { MantineProvider } from '@mantine/core';
-import SanitizeSettings from '@app/components/tools/sanitize/SanitizeSettings';
-import { SanitizeParameters } from '@app/hooks/tools/sanitize/useSanitizeParameters';
+import { describe, expect, test, vi, beforeEach } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import { MantineProvider } from "@mantine/core";
+import SanitizeSettings from "@app/components/tools/sanitize/SanitizeSettings";
+import { SanitizeParameters } from "@app/hooks/tools/sanitize/useSanitizeParameters";
 
 // Mock useTranslation with predictable return values
 const mockT = vi.fn((key: string) => `mock-${key}`);
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({ t: mockT })
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: mockT }),
 }));
 
 // Wrapper component to provide Mantine context
-const TestWrapper = ({ children }: { children: React.ReactNode }) => (
-  <MantineProvider>{children}</MantineProvider>
-);
+const TestWrapper = ({ children }: { children: React.ReactNode }) => <MantineProvider>{children}</MantineProvider>;
 
-describe('SanitizeSettings', () => {
+describe("SanitizeSettings", () => {
   const defaultParameters: SanitizeParameters = {
     removeJavaScript: true,
     removeEmbeddedFiles: true,
@@ -31,33 +29,27 @@ describe('SanitizeSettings', () => {
     vi.clearAllMocks();
   });
 
-  test('should render all sanitization option checkboxes', () => {
+  test("should render all sanitization option checkboxes", () => {
     render(
       <TestWrapper>
-        <SanitizeSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <SanitizeSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
     // Should render one checkbox for each parameter
     const expectedCheckboxCount = Object.keys(defaultParameters).length;
-    const checkboxes = screen.getAllByRole('checkbox');
+    const checkboxes = screen.getAllByRole("checkbox");
     expect(checkboxes).toHaveLength(expectedCheckboxCount);
   });
 
-  test('should show correct initial checkbox states based on parameters', () => {
+  test("should show correct initial checkbox states based on parameters", () => {
     render(
       <TestWrapper>
-        <SanitizeSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <SanitizeSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
-    const checkboxes = screen.getAllByRole('checkbox');
+    const checkboxes = screen.getAllByRole("checkbox");
     const parameterValues = Object.values(defaultParameters);
 
     parameterValues.forEach((value, index) => {
@@ -69,62 +61,51 @@ describe('SanitizeSettings', () => {
     });
   });
 
-  test('should call onParameterChange with correct parameters when checkboxes are clicked', () => {
+  test("should call onParameterChange with correct parameters when checkboxes are clicked", () => {
     render(
       <TestWrapper>
-        <SanitizeSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <SanitizeSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
-    const checkboxes = screen.getAllByRole('checkbox');
+    const checkboxes = screen.getAllByRole("checkbox");
 
     // Click the first checkbox (removeJavaScript - should toggle from true to false)
     fireEvent.click(checkboxes[0]);
-    expect(mockOnParameterChange).toHaveBeenCalledWith('removeJavaScript', false);
+    expect(mockOnParameterChange).toHaveBeenCalledWith("removeJavaScript", false);
 
     // Click the third checkbox (removeXMPMetadata - should toggle from false to true)
     fireEvent.click(checkboxes[2]);
-    expect(mockOnParameterChange).toHaveBeenCalledWith('removeXMPMetadata', true);
+    expect(mockOnParameterChange).toHaveBeenCalledWith("removeXMPMetadata", true);
   });
 
-  test('should disable all checkboxes when disabled prop is true', () => {
+  test("should disable all checkboxes when disabled prop is true", () => {
     render(
       <TestWrapper>
-        <SanitizeSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-          disabled={true}
-        />
-      </TestWrapper>
+        <SanitizeSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} disabled={true} />
+      </TestWrapper>,
     );
 
-    const checkboxes = screen.getAllByRole('checkbox');
-    checkboxes.forEach(checkbox => {
+    const checkboxes = screen.getAllByRole("checkbox");
+    checkboxes.forEach((checkbox) => {
       expect(checkbox).toBeDisabled();
     });
   });
 
-  test('should enable all checkboxes when disabled prop is false or undefined', () => {
+  test("should enable all checkboxes when disabled prop is false or undefined", () => {
     render(
       <TestWrapper>
-        <SanitizeSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-          disabled={false}
-        />
-      </TestWrapper>
+        <SanitizeSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} disabled={false} />
+      </TestWrapper>,
     );
 
-    const checkboxes = screen.getAllByRole('checkbox');
-    checkboxes.forEach(checkbox => {
+    const checkboxes = screen.getAllByRole("checkbox");
+    checkboxes.forEach((checkbox) => {
       expect(checkbox).not.toBeDisabled();
     });
   });
 
-  test('should handle different parameter combinations', () => {
+  test("should handle different parameter combinations", () => {
     const allEnabledParameters: SanitizeParameters = {
       removeJavaScript: true,
       removeEmbeddedFiles: true,
@@ -136,51 +117,41 @@ describe('SanitizeSettings', () => {
 
     render(
       <TestWrapper>
-        <SanitizeSettings
-          parameters={allEnabledParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <SanitizeSettings parameters={allEnabledParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
-    const checkboxes = screen.getAllByRole('checkbox');
-    checkboxes.forEach(checkbox => {
+    const checkboxes = screen.getAllByRole("checkbox");
+    checkboxes.forEach((checkbox) => {
       expect(checkbox).toBeChecked();
     });
   });
 
-  test('should call translation function with correct keys', () => {
+  test("should call translation function with correct keys", () => {
     render(
       <TestWrapper>
-        <SanitizeSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-        />
-      </TestWrapper>
+        <SanitizeSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} />
+      </TestWrapper>,
     );
 
     // Verify that translation keys are being called (just check that it was called, not specific order)
-    expect(mockT).toHaveBeenCalledWith('sanitize.options.title', expect.any(String));
-    expect(mockT).toHaveBeenCalledWith('sanitize.options.removeJavaScript.label', expect.any(String));
-    expect(mockT).toHaveBeenCalledWith('sanitize.options.removeEmbeddedFiles.label', expect.any(String));
-    expect(mockT).toHaveBeenCalledWith('sanitize.options.note', expect.any(String));
+    expect(mockT).toHaveBeenCalledWith("sanitize.options.title", expect.any(String));
+    expect(mockT).toHaveBeenCalledWith("sanitize.options.removeJavaScript.label", expect.any(String));
+    expect(mockT).toHaveBeenCalledWith("sanitize.options.removeEmbeddedFiles.label", expect.any(String));
+    expect(mockT).toHaveBeenCalledWith("sanitize.options.note", expect.any(String));
   });
 
-  test('should not call onParameterChange when disabled', () => {
+  test("should not call onParameterChange when disabled", () => {
     render(
       <TestWrapper>
-        <SanitizeSettings
-          parameters={defaultParameters}
-          onParameterChange={mockOnParameterChange}
-          disabled={true}
-        />
-      </TestWrapper>
+        <SanitizeSettings parameters={defaultParameters} onParameterChange={mockOnParameterChange} disabled={true} />
+      </TestWrapper>,
     );
 
-    const checkboxes = screen.getAllByRole('checkbox');
+    const checkboxes = screen.getAllByRole("checkbox");
 
     // Verify checkboxes are disabled
-    checkboxes.forEach(checkbox => {
+    checkboxes.forEach((checkbox) => {
       expect(checkbox).toBeDisabled();
     });
 
diff --git a/frontend/src/core/components/tools/sanitize/SanitizeSettings.tsx b/frontend/src/core/components/tools/sanitize/SanitizeSettings.tsx
index ff53def58c..13f7a5720e 100644
--- a/frontend/src/core/components/tools/sanitize/SanitizeSettings.tsx
+++ b/frontend/src/core/components/tools/sanitize/SanitizeSettings.tsx
@@ -21,7 +21,7 @@ const SanitizeSettings = ({ parameters, onParameterChange, disabled = false }: S
   return (
     <Stack gap="md">
       <Text size="sm" fw={500}>
-        {t('sanitize.options.title', 'Sanitization Options')}
+        {t("sanitize.options.title", "Sanitization Options")}
       </Text>
 
       <Stack gap="sm">
@@ -34,7 +34,9 @@ const SanitizeSettings = ({ parameters, onParameterChange, disabled = false }: S
             label={
               <div>
                 <Text size="sm">{option.label}</Text>
-                <Text size="xs" c="dimmed">{option.description}</Text>
+                <Text size="xs" c="dimmed">
+                  {option.description}
+                </Text>
               </div>
             }
           />
@@ -42,7 +44,10 @@ const SanitizeSettings = ({ parameters, onParameterChange, disabled = false }: S
       </Stack>
 
       <Text size="xs" c="dimmed">
-        {t('sanitize.options.note', 'Select the elements you want to remove from the PDF. At least one option must be selected.')}
+        {t(
+          "sanitize.options.note",
+          "Select the elements you want to remove from the PDF. At least one option must be selected.",
+        )}
       </Text>
     </Stack>
   );
diff --git a/frontend/src/core/components/tools/scannerImageSplit/ScannerImageSplitSettings.tsx b/frontend/src/core/components/tools/scannerImageSplit/ScannerImageSplitSettings.tsx
index 28afd15d15..4cf2cad2e0 100644
--- a/frontend/src/core/components/tools/scannerImageSplit/ScannerImageSplitSettings.tsx
+++ b/frontend/src/core/components/tools/scannerImageSplit/ScannerImageSplitSettings.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { NumberInput, Stack } from '@mantine/core';
-import { ScannerImageSplitParameters } from '@app/hooks/tools/scannerImageSplit/useScannerImageSplitParameters';
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { NumberInput, Stack } from "@mantine/core";
+import { ScannerImageSplitParameters } from "@app/hooks/tools/scannerImageSplit/useScannerImageSplitParameters";
 
 interface ScannerImageSplitSettingsProps {
   parameters: ScannerImageSplitParameters;
@@ -12,57 +12,66 @@ interface ScannerImageSplitSettingsProps {
 const ScannerImageSplitSettings: React.FC<ScannerImageSplitSettingsProps> = ({
   parameters,
   onParameterChange,
-  disabled = false
+  disabled = false,
 }) => {
   const { t } = useTranslation();
 
   return (
     <Stack gap="md">
       <NumberInput
-        label={t('ScannerImageSplit.selectText.1', 'Angle Threshold:')}
-        description={t('ScannerImageSplit.selectText.2', 'Sets the minimum absolute angle required for the image to be rotated (default: 10).')}
+        label={t("ScannerImageSplit.selectText.1", "Angle Threshold:")}
+        description={t(
+          "ScannerImageSplit.selectText.2",
+          "Sets the minimum absolute angle required for the image to be rotated (default: 10).",
+        )}
         value={parameters.angle_threshold}
-        onChange={(value) => onParameterChange('angle_threshold', Number(value) || 10)}
+        onChange={(value) => onParameterChange("angle_threshold", Number(value) || 10)}
         min={0}
         step={1}
         disabled={disabled}
       />
 
       <NumberInput
-        label={t('ScannerImageSplit.selectText.3', 'Tolerance:')}
-        description={t('ScannerImageSplit.selectText.4', 'Determines the range of colour variation around the estimated background colour (default: 30).')}
+        label={t("ScannerImageSplit.selectText.3", "Tolerance:")}
+        description={t(
+          "ScannerImageSplit.selectText.4",
+          "Determines the range of colour variation around the estimated background colour (default: 30).",
+        )}
         value={parameters.tolerance}
-        onChange={(value) => onParameterChange('tolerance', Number(value) || 30)}
+        onChange={(value) => onParameterChange("tolerance", Number(value) || 30)}
         min={0}
         step={1}
         disabled={disabled}
       />
 
       <NumberInput
-        label={t('ScannerImageSplit.selectText.5', 'Minimum Area:')}
-        description={t('ScannerImageSplit.selectText.6', 'Sets the minimum area threshold for a photo (default: 10000).')}
+        label={t("ScannerImageSplit.selectText.5", "Minimum Area:")}
+        description={t("ScannerImageSplit.selectText.6", "Sets the minimum area threshold for a photo (default: 10000).")}
         value={parameters.min_area}
-        onChange={(value) => onParameterChange('min_area', Number(value) || 10000)}
+        onChange={(value) => onParameterChange("min_area", Number(value) || 10000)}
         min={0}
         step={100}
         disabled={disabled}
       />
 
       <NumberInput
-        label={t('ScannerImageSplit.selectText.7', 'Minimum Contour Area:')}
-        description={t('ScannerImageSplit.selectText.8', 'Sets the minimum contour area threshold for a photo.')}
+        label={t("ScannerImageSplit.selectText.7", "Minimum Contour Area:")}
+        description={t("ScannerImageSplit.selectText.8", "Sets the minimum contour area threshold for a photo.")}
         value={parameters.min_contour_area}
-        onChange={(value) => onParameterChange('min_contour_area', Number(value) || 500)}
+        onChange={(value) => onParameterChange("min_contour_area", Number(value) || 500)}
         min={0}
         step={10}
         disabled={disabled}
       />
 
       <NumberInput
-        label={t('ScannerImageSplit.selectText.9', 'Border Size:')}
-        description={t('ScannerImageSplit.selectText.10', 'Sets the size of the border added and removed to prevent white borders in the output (default: 1).')}
+        label={t("ScannerImageSplit.selectText.9", "Border Size:")}
+        description={t(
+          "ScannerImageSplit.selectText.10",
+          "Sets the size of the border added and removed to prevent white borders in the output (default: 1).",
+        )}
         value={parameters.border_size}
-        onChange={(value) => onParameterChange('border_size', Number(value) || 1)}
+        onChange={(value) => onParameterChange("border_size", Number(value) || 1)}
         min={0}
         step={1}
         disabled={disabled}
@@ -71,4 +80,4 @@ const ScannerImageSplitSettings: React.FC<ScannerImageSplitSettingsProps> = ({
   );
 };
 
-export default ScannerImageSplitSettings;
\ No newline at end of file
+export default ScannerImageSplitSettings;
diff --git a/frontend/src/core/components/tools/shared/ErrorNotification.tsx b/frontend/src/core/components/tools/shared/ErrorNotification.tsx
index 5b51ab11ec..557a637640 100644
--- a/frontend/src/core/components/tools/shared/ErrorNotification.tsx
+++ b/frontend/src/core/components/tools/shared/ErrorNotification.tsx
@@ -1,5 +1,5 @@
-import { Notification } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
+import { Notification } from "@mantine/core";
+import { useTranslation } from "react-i18next";
 
 export interface ErrorNotificationProps {
   error: string | null;
@@ -9,24 +9,13 @@ export interface ErrorNotificationProps {
   mb?: string;
 }
 
-const ErrorNotification = ({
-  error,
-  onClose,
-  title,
-  color = 'red',
-  mb = 'md'
-}: ErrorNotificationProps) => {
+const ErrorNotification = ({ error, onClose, title, color = "red", mb = "md" }: ErrorNotificationProps) => {
   const { t } = useTranslation();
 
   if (!error) return null;
 
   return (
-    <Notification
-      color={color}
-      title={title || t("error._value", "Error")}
-      onClose={onClose}
-      mb={mb}
-    >
+    <Notification color={color} title={title || t("error._value", "Error")} onClose={onClose} mb={mb}>
       {error}
     </Notification>
   );
diff --git a/frontend/src/core/components/tools/shared/FileMetadata.tsx b/frontend/src/core/components/tools/shared/FileMetadata.tsx
index 017934c203..3a11ff1be3 100644
--- a/frontend/src/core/components/tools/shared/FileMetadata.tsx
+++ b/frontend/src/core/components/tools/shared/FileMetadata.tsx
@@ -1,5 +1,5 @@
-import { Stack, Text } from '@mantine/core';
-import { formatFileSize, getFileDate } from '@app/utils/fileUtils';
+import { Stack, Text } from "@mantine/core";
+import { formatFileSize, getFileDate } from "@app/utils/fileUtils";
 
 export interface FileMetadataProps {
   file: File;
@@ -13,7 +13,7 @@ const FileMetadata = ({ file }: FileMetadataProps) => {
           {formatFileSize(file.size)}
         </Text>
         <Text size="xs" c="dimmed">
-          {file.type || 'Unknown'}
+          {file.type || "Unknown"}
         </Text>
         <Text size="xs" c="dimmed">
           {getFileDate(file)}
diff --git a/frontend/src/core/components/tools/shared/FileStatusIndicator.tsx b/frontend/src/core/components/tools/shared/FileStatusIndicator.tsx
index b463b6bb6e..4570418ed6 100644
--- a/frontend/src/core/components/tools/shared/FileStatusIndicator.tsx
+++ b/frontend/src/core/components/tools/shared/FileStatusIndicator.tsx
@@ -1,23 +1,20 @@
 import { useState, useEffect } from "react";
 import { Text, Anchor } from "@mantine/core";
 import { useTranslation } from "react-i18next";
-import FolderIcon from '@mui/icons-material/Folder';
-import UploadIcon from '@mui/icons-material/Upload';
+import FolderIcon from "@mui/icons-material/Folder";
+import UploadIcon from "@mui/icons-material/Upload";
 import { useFilesModalContext } from "@app/contexts/FilesModalContext";
 import { useAllFiles } from "@app/contexts/FileContext";
 import { useFileManager } from "@app/hooks/useFileManager";
 import { StirlingFile } from "@app/types/fileContext";
-import { PrivateContent } from "@app/components/shared/PrivateContent"
+import { PrivateContent } from "@app/components/shared/PrivateContent";
 
 export interface FileStatusIndicatorProps {
   selectedFiles?: StirlingFile[];
   minFiles?: number;
 }
 
-const FileStatusIndicator = ({
-  selectedFiles = [],
-  minFiles = 1,
-}: FileStatusIndicatorProps) => {
+const FileStatusIndicator = ({ selectedFiles = [], minFiles = 1 }: FileStatusIndicatorProps) => {
   const { t } = useTranslation();
   const { openFilesModal, onFileUpload } = useFilesModalContext();
   const { files: stirlingFileStubs } = useAllFiles();
@@ -39,10 +36,10 @@ const FileStatusIndicator = ({
 
   // Handle native file picker
   const handleNativeUpload = () => {
-    const input = document.createElement('input');
-    input.type = 'file';
+    const input = document.createElement("input");
+    input.type = "file";
     input.multiple = true;
-    input.accept = '.pdf,application/pdf';
+    input.accept = ".pdf,application/pdf";
     input.onchange = (event) => {
       const files = Array.from((event.target as HTMLInputElement).files || []);
       if (files.length > 0) {
@@ -61,7 +58,9 @@ const FileStatusIndicator = ({
     if (minFiles === undefined || minFiles === 1) {
       return t("files.selectFromWorkbench", "Select files from the workbench or ");
     } else {
-      return t("files.selectMultipleFromWorkbench", "Select at least {{count}} files from the workbench or ", { count: minFiles });
+      return t("files.selectMultipleFromWorkbench", "Select at least {{count}} files from the workbench or ", {
+        count: minFiles,
+      });
     }
   };
 
@@ -74,9 +73,9 @@ const FileStatusIndicator = ({
           <Anchor
             size="sm"
             onClick={handleNativeUpload}
-            style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}
+            style={{ cursor: "pointer", display: "inline-flex", alignItems: "center", gap: "0.25rem" }}
           >
-            <UploadIcon style={{ fontSize: '0.875rem' }} />
+            <UploadIcon style={{ fontSize: "0.875rem" }} />
             {t("files.upload", "Upload")}
           </Anchor>
         </Text>
@@ -88,9 +87,9 @@ const FileStatusIndicator = ({
           <Anchor
             size="sm"
             onClick={() => openFilesModal({})}
-            style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}
+            style={{ cursor: "pointer", display: "inline-flex", alignItems: "center", gap: "0.25rem" }}
           >
-            <FolderIcon style={{ fontSize: '0.875rem' }} />
+            <FolderIcon style={{ fontSize: "0.875rem" }} />
             {t("files.addFiles", "Add files")}
           </Anchor>
         </Text>
@@ -108,9 +107,9 @@ const FileStatusIndicator = ({
           <Anchor
             size="sm"
             onClick={handleNativeUpload}
-            style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}
+            style={{ cursor: "pointer", display: "inline-flex", alignItems: "center", gap: "0.25rem" }}
           >
-            <UploadIcon style={{ fontSize: '0.875rem' }} />
+            <UploadIcon style={{ fontSize: "0.875rem" }} />
             {t("files.uploadFiles", "Upload Files")}
           </Anchor>
         </Text>
@@ -123,9 +122,9 @@ const FileStatusIndicator = ({
           <Anchor
             size="sm"
             onClick={() => openFilesModal({})}
-            style={{ cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: '0.25rem' }}
+            style={{ cursor: "pointer", display: "inline-flex", alignItems: "center", gap: "0.25rem" }}
           >
-            <FolderIcon style={{ fontSize: '0.875rem' }} />
+            <FolderIcon style={{ fontSize: "0.875rem" }} />
             {t("files.addFiles", "Add files")}
           </Anchor>
         </Text>
@@ -134,10 +133,13 @@ const FileStatusIndicator = ({
   }
 
   return (
-   <Text size="sm" c="dimmed" style={{ wordBreak: 'break-word', whiteSpace: 'normal' }}>
-      ✓ {selectedFiles.length === 1
-          ? <PrivateContent>{t("fileSelected", "Selected: {{filename}}", { filename: selectedFiles[0]?.name }) }</PrivateContent>
-          : t("filesSelected", "{{count}} files selected", { count: selectedFiles.length })}
+    <Text size="sm" c="dimmed" style={{ wordBreak: "break-word", whiteSpace: "normal" }}>
+      ✓{" "}
+      {selectedFiles.length === 1 ? (
+        <PrivateContent>{t("fileSelected", "Selected: {{filename}}", { filename: selectedFiles[0]?.name })}</PrivateContent>
+      ) : (
+        t("filesSelected", "{{count}} files selected", { count: selectedFiles.length })
+      )}
     </Text>
   );
 };
diff --git a/frontend/src/core/components/tools/shared/FilesToolStep.tsx b/frontend/src/core/components/tools/shared/FilesToolStep.tsx
index 1d71196ac0..1d98a52c59 100644
--- a/frontend/src/core/components/tools/shared/FilesToolStep.tsx
+++ b/frontend/src/core/components/tools/shared/FilesToolStep.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
-import FileStatusIndicator from '@app/components/tools/shared/FileStatusIndicator';
-import { StirlingFile } from '@app/types/fileContext';
-import i18n from '@app/i18n';
+import React from "react";
+import FileStatusIndicator from "@app/components/tools/shared/FileStatusIndicator";
+import { StirlingFile } from "@app/types/fileContext";
+import i18n from "@app/i18n";
 
 export interface FilesToolStepProps {
   selectedFiles: StirlingFile[];
@@ -12,16 +12,15 @@ export interface FilesToolStepProps {
 
 export function createFilesToolStep(
   createStep: (title: string, props: any, children?: React.ReactNode) => React.ReactElement,
-  props: FilesToolStepProps
+  props: FilesToolStepProps,
 ): React.ReactElement {
-  return createStep(i18n.t("files.title", "Files"), {
-    isVisible: true,
-    isCollapsed: props.isCollapsed,
-    onCollapsedClick: props.onCollapsedClick
-  }, (
-    <FileStatusIndicator
-      selectedFiles={props.selectedFiles}
-      minFiles={props.minFiles}
-    />
-  ));
+  return createStep(
+    i18n.t("files.title", "Files"),
+    {
+      isVisible: true,
+      isCollapsed: props.isCollapsed,
+      onCollapsedClick: props.onCollapsedClick,
+    },
+    <FileStatusIndicator selectedFiles={props.selectedFiles} minFiles={props.minFiles} />,
+  );
 }
diff --git a/frontend/src/core/components/tools/shared/NavigationControls.tsx b/frontend/src/core/components/tools/shared/NavigationControls.tsx
index f67c1ca557..d656a7c587 100644
--- a/frontend/src/core/components/tools/shared/NavigationControls.tsx
+++ b/frontend/src/core/components/tools/shared/NavigationControls.tsx
@@ -1,6 +1,6 @@
-import { Stack, Group, ActionIcon, Text } from '@mantine/core';
-import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
-import ChevronRightIcon from '@mui/icons-material/ChevronRight';
+import { Stack, Group, ActionIcon, Text } from "@mantine/core";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
 
 export interface NavigationControlsProps {
   currentIndex: number;
@@ -9,38 +9,21 @@ export interface NavigationControlsProps {
   onNext: () => void;
 }
 
-const NavigationControls = ({
-  currentIndex,
-  totalFiles,
-  onPrevious,
-  onNext,
-}: NavigationControlsProps) => {
+const NavigationControls = ({ currentIndex, totalFiles, onPrevious, onNext }: NavigationControlsProps) => {
   if (totalFiles <= 1) return null;
 
   return (
     <Stack align="center" gap="xs" mt="xs">
       <Group justify="center" gap="xs">
-        <ActionIcon
-          variant="light"
-          size="sm"
-          onClick={onPrevious}
-          disabled={totalFiles <= 1}
-          data-testid="review-panel-prev"
-        >
-          <ChevronLeftIcon style={{ fontSize: '1rem' }} />
+        <ActionIcon variant="light" size="sm" onClick={onPrevious} disabled={totalFiles <= 1} data-testid="review-panel-prev">
+          <ChevronLeftIcon style={{ fontSize: "1rem" }} />
         </ActionIcon>
         <Text size="xs" c="dimmed">
-        {currentIndex + 1} of {totalFiles}
+          {currentIndex + 1} of {totalFiles}
         </Text>
 
-        <ActionIcon
-          variant="light"
-          size="sm"
-          onClick={onNext}
-          disabled={totalFiles <= 1}
-          data-testid="review-panel-next"
-        >
-          <ChevronRightIcon style={{ fontSize: '1rem' }} />
+        <ActionIcon variant="light" size="sm" onClick={onNext} disabled={totalFiles <= 1} data-testid="review-panel-next">
+          <ChevronRightIcon style={{ fontSize: "1rem" }} />
         </ActionIcon>
       </Group>
     </Stack>
diff --git a/frontend/src/core/components/tools/shared/NoToolsFound.tsx b/frontend/src/core/components/tools/shared/NoToolsFound.tsx
index 1b60f0cb79..5e0d67eed6 100644
--- a/frontend/src/core/components/tools/shared/NoToolsFound.tsx
+++ b/frontend/src/core/components/tools/shared/NoToolsFound.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
-import { Text } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
+import React from "react";
+import { Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
 
 const NoToolsFound: React.FC = () => {
   const { t } = useTranslation();
-  
+
   return (
     <Text c="dimmed" size="sm" p="sm">
       {t("toolPicker.noToolsFound", "No tools found")}
diff --git a/frontend/src/core/components/tools/shared/NumberInputWithUnit.tsx b/frontend/src/core/components/tools/shared/NumberInputWithUnit.tsx
index bf28aa0486..168bb13713 100644
--- a/frontend/src/core/components/tools/shared/NumberInputWithUnit.tsx
+++ b/frontend/src/core/components/tools/shared/NumberInputWithUnit.tsx
@@ -11,15 +11,7 @@ interface NumberInputWithUnitProps {
   disabled?: boolean;
 }
 
-const NumberInputWithUnit = ({
-  label,
-  value,
-  onChange,
-  unit,
-  min,
-  max,
-  disabled = false
-}: NumberInputWithUnitProps) => {
+const NumberInputWithUnit = ({ label, value, onChange, unit, min, max, disabled = false }: NumberInputWithUnitProps) => {
   const [localValue, setLocalValue] = useState<number | string>(value);
 
   // Sync local value when external value changes
@@ -33,7 +25,7 @@ const NumberInputWithUnit = ({
 
   return (
     <Stack gap="xs" style={{ flex: 1 }}>
-      <Text size="xs" fw={500} style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
+      <Text size="xs" fw={500} style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
         {label}
       </Text>
       <NumberInput
diff --git a/frontend/src/core/components/tools/shared/OperationButton.tsx b/frontend/src/core/components/tools/shared/OperationButton.tsx
index 7cc913a263..f9474ec6ea 100644
--- a/frontend/src/core/components/tools/shared/OperationButton.tsx
+++ b/frontend/src/core/components/tools/shared/OperationButton.tsx
@@ -1,10 +1,10 @@
-import { Button, Box } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { Tooltip } from '@app/components/shared/Tooltip';
-import { useBackendHealth } from '@app/hooks/useBackendHealth';
-import { CloudBadge } from '@app/components/shared/CloudBadge';
-import type { ExecuteDisabledReason } from '@app/hooks/tools/shared/toolOperationTypes';
-import { useToolActions } from '@app/contexts/ToolActionsContext';
+import { Button, Box } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { Tooltip } from "@app/components/shared/Tooltip";
+import { useBackendHealth } from "@app/hooks/useBackendHealth";
+import { CloudBadge } from "@app/components/shared/CloudBadge";
+import type { ExecuteDisabledReason } from "@app/hooks/tools/shared/toolOperationTypes";
+import { useToolActions } from "@app/contexts/ToolActionsContext";
 
 export interface OperationButtonProps {
   onClick?: () => void;
@@ -13,14 +13,14 @@ export interface OperationButtonProps {
   disabledReason?: ExecuteDisabledReason;
   loadingText?: string;
   submitText?: string;
-  variant?: 'filled' | 'outline' | 'subtle';
+  variant?: "filled" | "outline" | "subtle";
   color?: string;
   fullWidth?: boolean;
   mt?: string;
-  type?: 'button' | 'submit' | 'reset';
+  type?: "button" | "submit" | "reset";
   showCloudBadge?: boolean;
-  'data-testid'?: string;
-  'data-tour'?: string;
+  "data-testid"?: string;
+  "data-tour"?: string;
 }
 
 const OperationButton = ({
@@ -30,43 +30,45 @@ const OperationButton = ({
   disabledReason,
   loadingText,
   submitText,
-  variant = 'filled',
-  color = 'blue',
+  variant = "filled",
+  color = "blue",
   fullWidth = false,
-  mt = 'md',
-  type = 'button',
+  mt = "md",
+  type = "button",
   showCloudBadge = false,
-  'data-testid': dataTestId,
-  'data-tour': dataTour
+  "data-testid": dataTestId,
+  "data-tour": dataTour,
 }: OperationButtonProps) => {
   const { t } = useTranslation();
   const { isOnline, message: backendMessage } = useBackendHealth();
   const { onEndpointUnavailableClick } = useToolActions();
   const blockedByBackend = !isOnline;
 
-  const effectiveDisabled = disabled || disabledReason !== null && disabledReason !== undefined;
+  const effectiveDisabled = disabled || (disabledReason !== null && disabledReason !== undefined);
   const combinedDisabled = effectiveDisabled || blockedByBackend;
 
   const reasonTooltip: Record<NonNullable<ExecuteDisabledReason>, string> = {
     endpointUnavailable: onEndpointUnavailableClick
-      ? t('tool.endpointUnavailableClickable', "Not available in this mode. Click to sign in.")
-      : t('tool.endpointUnavailable', 'This tool is unavailable on your server.'),
-    noFiles: t('tool.noFiles', 'Add a file to get started.'),
-    invalidParams: t('tool.invalidParams', 'Fill in the required settings.'),
-    viewerMode: t('tool.viewerMode', 'Switch to the file editor to select multiple files.'),
+      ? t("tool.endpointUnavailableClickable", "Not available in this mode. Click to sign in.")
+      : t("tool.endpointUnavailable", "This tool is unavailable on your server."),
+    noFiles: t("tool.noFiles", "Add a file to get started."),
+    invalidParams: t("tool.invalidParams", "Fill in the required settings."),
+    viewerMode: t("tool.viewerMode", "Switch to the file editor to select multiple files."),
   };
 
   const tooltipLabel = blockedByBackend
-    ? (backendMessage ?? t('backendHealth.checking', 'Checking backend status...'))
-    : (disabledReason ? (reasonTooltip[disabledReason] ?? null) : null);
+    ? (backendMessage ?? t("backendHealth.checking", "Checking backend status..."))
+    : disabledReason
+      ? (reasonTooltip[disabledReason] ?? null)
+      : null;
 
   const button = (
     <Button
       type={type}
       onClick={onClick}
       fullWidth={fullWidth || !!tooltipLabel}
-      mr={tooltipLabel ? 0 : 'md'}
-      ml={tooltipLabel ? 0 : 'md'}
+      mr={tooltipLabel ? 0 : "md"}
+      ml={tooltipLabel ? 0 : "md"}
       mt={tooltipLabel ? 0 : mt}
       loading={isLoading}
       disabled={combinedDisabled}
@@ -74,14 +76,11 @@ const OperationButton = ({
       color={color}
       data-testid={dataTestId}
       data-tour={dataTour}
-      style={{ minHeight: '2.5rem', position: 'relative' }}
+      style={{ minHeight: "2.5rem", position: "relative" }}
     >
-      {isLoading
-        ? (loadingText || t("loading", "Loading..."))
-        : (submitText || t("submit", "Submit"))
-      }
+      {isLoading ? loadingText || t("loading", "Loading...") : submitText || t("submit", "Submit")}
       {showCloudBadge && (
-        <Box style={{ position: 'absolute', top: 4, right: 4 }}>
+        <Box style={{ position: "absolute", top: 4, right: 4 }}>
           <CloudBadge />
         </Box>
       )}
@@ -93,14 +92,14 @@ const OperationButton = ({
     // cloneElement handlers would never fire. Wrap in a Box to capture them instead.
     // When endpointUnavailable and a click handler is provided (desktop), the Box
     // also acts as the click target to open the sign-in / connect modal.
-    const boxClickHandler = disabledReason === 'endpointUnavailable' ? onEndpointUnavailableClick : undefined;
+    const boxClickHandler = disabledReason === "endpointUnavailable" ? onEndpointUnavailableClick : undefined;
     return (
       <Tooltip content={tooltipLabel} position="top" arrow>
         <Box
           mr="md"
           ml="md"
           mt={mt}
-          style={{ display: 'block', cursor: boxClickHandler ? 'pointer' : undefined }}
+          style={{ display: "block", cursor: boxClickHandler ? "pointer" : undefined }}
           onClick={boxClickHandler}
         >
           {button}
diff --git a/frontend/src/core/components/tools/shared/ResultsPreview.tsx b/frontend/src/core/components/tools/shared/ResultsPreview.tsx
index 9a4921af0d..a955f445ac 100644
--- a/frontend/src/core/components/tools/shared/ResultsPreview.tsx
+++ b/frontend/src/core/components/tools/shared/ResultsPreview.tsx
@@ -1,9 +1,9 @@
-import { useState } from 'react';
-import { Box, Text, Loader, Stack, Center, Flex } from '@mantine/core';
-import FilePreview from '@app/components/shared/FilePreview';
-import FileMetadata from '@app/components/tools/shared/FileMetadata';
-import NavigationControls from '@app/components/tools/shared/NavigationControls';
-import { PrivateContent } from '@app/components/shared/PrivateContent';
+import { useState } from "react";
+import { Box, Text, Loader, Stack, Center, Flex } from "@mantine/core";
+import FilePreview from "@app/components/shared/FilePreview";
+import FileMetadata from "@app/components/tools/shared/FileMetadata";
+import NavigationControls from "@app/components/tools/shared/NavigationControls";
+import { PrivateContent } from "@app/components/shared/PrivateContent";
 
 export interface ReviewFile {
   file: File;
@@ -23,7 +23,7 @@ const ResultsPreview = ({
   isGeneratingThumbnails = false,
   onFileClick,
   emptyMessage = "No files to preview",
-  loadingMessage = "Generating previews..."
+  loadingMessage = "Generating previews...",
 }: ResultsPreviewProps) => {
   const [currentIndex, setCurrentIndex] = useState(0);
 
@@ -48,7 +48,9 @@ const ResultsPreview = ({
       <Center p="lg" data-testid="review-panel-loading">
         <Stack align="center" gap="sm">
           <Loader size="sm" />
-          <Text size="sm" c="dimmed">{loadingMessage}</Text>
+          <Text size="sm" c="dimmed">
+            {loadingMessage}
+          </Text>
         </Stack>
       </Center>
     );
@@ -58,16 +60,19 @@ const ResultsPreview = ({
   if (!currentFile) return null;
 
   return (
-    <Box p="sm" style={{ backgroundColor: 'var(--mantine-color-gray-1)', borderRadius: '0.5rem', maxWidth: '100%' }} data-testid="review-panel-container">
-
+    <Box
+      p="sm"
+      style={{ backgroundColor: "var(--mantine-color-gray-1)", borderRadius: "0.5rem", maxWidth: "100%" }}
+      data-testid="review-panel-container"
+    >
       {/* File name at the top */}
-      <Box mb="sm" style={{ minHeight: '3rem', display: 'flex', alignItems: 'flex-start' }}>
+      <Box mb="sm" style={{ minHeight: "3rem", display: "flex", alignItems: "flex-start" }}>
         <Text
           size="sm"
           fw={500}
           style={{
-            wordBreak: 'break-word',
-            lineHeight: 1.4
+            wordBreak: "break-word",
+            lineHeight: 1.4,
           }}
           title={currentFile.file.name}
         >
@@ -75,8 +80,13 @@ const ResultsPreview = ({
         </Text>
       </Box>
 
-      <Flex gap="md" align="flex-start" style={{ minHeight: '7.5rem', maxWidth: '100%' }} data-testid={`review-panel-item-${currentIndex}`}>
-        <Box style={{ width: '6.25rem', height: '7.5rem', flexShrink: 0 }}>
+      <Flex
+        gap="md"
+        align="flex-start"
+        style={{ minHeight: "7.5rem", maxWidth: "100%" }}
+        data-testid={`review-panel-item-${currentIndex}`}
+      >
+        <Box style={{ width: "6.25rem", height: "7.5rem", flexShrink: 0 }}>
           <FilePreview
             file={currentFile.file}
             thumbnail={currentFile.thumbnail}
diff --git a/frontend/src/core/components/tools/shared/ReviewToolStep.tsx b/frontend/src/core/components/tools/shared/ReviewToolStep.tsx
index 019bb14d36..3e8495d96c 100644
--- a/frontend/src/core/components/tools/shared/ReviewToolStep.tsx
+++ b/frontend/src/core/components/tools/shared/ReviewToolStep.tsx
@@ -70,9 +70,9 @@ function ReviewStepContent<TParams = unknown>({
           const stub = selectors.getStirlingFileStub(fileId as FileId);
           fileActions.updateStirlingFileStub(fileId as FileId, {
             localFilePath: stub?.localFilePath ?? savedPath,
-            isDirty: false
+            isDirty: false,
           });
-        }
+        },
       });
     } catch (error) {
       const message = error instanceof Error ? error.message : String(error);
@@ -149,9 +149,9 @@ export function createReviewToolStep<TParams = unknown>(
       _excludeFromCount?: boolean;
       _noPadding?: boolean;
     },
-    children?: React.ReactNode
+    children?: React.ReactNode,
   ) => React.ReactElement,
-  props: ReviewToolStepProps<TParams>
+  props: ReviewToolStepProps<TParams>,
 ): React.ReactElement {
   return createStep(
     i18n.t("review", "Review"),
@@ -162,6 +162,6 @@ export function createReviewToolStep<TParams = unknown>(
       _excludeFromCount: true,
       _noPadding: true,
     },
-    <ReviewStepContent operation={props.operation} onFileClick={props.onFileClick} onUndo={props.onUndo} />
+    <ReviewStepContent operation={props.operation} onFileClick={props.onFileClick} onUndo={props.onUndo} />,
   );
 }
diff --git a/frontend/src/core/components/tools/shared/ScopedOperationButton.tsx b/frontend/src/core/components/tools/shared/ScopedOperationButton.tsx
index a171383fab..55f083e571 100644
--- a/frontend/src/core/components/tools/shared/ScopedOperationButton.tsx
+++ b/frontend/src/core/components/tools/shared/ScopedOperationButton.tsx
@@ -1,10 +1,10 @@
-import { Text } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import OperationButton, { OperationButtonProps } from '@app/components/tools/shared/OperationButton';
-import { StirlingFile } from '@app/types/fileContext';
-import { useAllFiles } from '@app/contexts/FileContext';
-import { useViewer } from '@app/contexts/ViewerContext';
-import { useNavigationState } from '@app/contexts/NavigationContext';
+import { Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import OperationButton, { OperationButtonProps } from "@app/components/tools/shared/OperationButton";
+import { StirlingFile } from "@app/types/fileContext";
+import { useAllFiles } from "@app/contexts/FileContext";
+import { useViewer } from "@app/contexts/ViewerContext";
+import { useNavigationState } from "@app/contexts/NavigationContext";
 
 export interface ScopedOperationButtonProps extends OperationButtonProps {
   selectedFiles: StirlingFile[];
@@ -26,25 +26,26 @@ export function ScopedOperationButton({ selectedFiles, disableScopeHints, ...pro
   const { activeFileIndex } = useViewer();
   const { files: allFiles } = useAllFiles();
 
-  const isViewerMode = workbench === 'viewer';
-  const isFileEditorMode = workbench === 'fileEditor';
+  const isViewerMode = workbench === "viewer";
+  const isFileEditorMode = workbench === "fileEditor";
   const hasMultipleFilesLoaded = allFiles.length > 1;
-  const baseText = props.submitText ?? t('submit', 'Submit');
+  const baseText = props.submitText ?? t("submit", "Submit");
 
-  const disabledForViewerMode = props.disabledReason === 'viewerMode';
+  const disabledForViewerMode = props.disabledReason === "viewerMode";
 
   let scopedText = baseText;
   if (!disableScopeHints && !disabledForViewerMode) {
     if (isViewerMode && hasMultipleFilesLoaded) {
-      scopedText = `${baseText} (${t('tool.scopeThisFile', 'this file')})`;
+      scopedText = `${baseText} (${t("tool.scopeThisFile", "this file")})`;
     } else if (!isViewerMode && selectedFiles.length > 1) {
-      scopedText = `${baseText} (${selectedFiles.length} ${t('tool.scopeFiles', 'files')})`;
+      scopedText = `${baseText} (${selectedFiles.length} ${t("tool.scopeFiles", "files")})`;
     }
   }
 
-  const viewerFileName = !disableScopeHints && !disabledForViewerMode && isViewerMode && hasMultipleFilesLoaded
-    ? allFiles[activeFileIndex]?.name
-    : null;
+  const viewerFileName =
+    !disableScopeHints && !disabledForViewerMode && isViewerMode && hasMultipleFilesLoaded
+      ? allFiles[activeFileIndex]?.name
+      : null;
 
   const showSelectFilesHint = !disableScopeHints && isFileEditorMode && allFiles.length > 0 && selectedFiles.length === 0;
 
@@ -53,12 +54,12 @@ export function ScopedOperationButton({ selectedFiles, disableScopeHints, ...pro
       <OperationButton {...props} submitText={scopedText} />
       {viewerFileName && (
         <Text size="xs" c="dimmed" ta="center" mx="md" mt={2}>
-          {t('tool.singleFileScope', 'Only applying to: {{fileName}}', { fileName: viewerFileName })}
+          {t("tool.singleFileScope", "Only applying to: {{fileName}}", { fileName: viewerFileName })}
         </Text>
       )}
       {showSelectFilesHint && (
         <Text size="xs" c="dimmed" ta="center" mx="md" mt={2}>
-          {t('tool.selectFilesHint', 'Select files in Active Files to run this tool')}
+          {t("tool.selectFilesHint", "Select files in Active Files to run this tool")}
         </Text>
       )}
     </>
diff --git a/frontend/src/core/components/tools/shared/SubcategoryHeader.tsx b/frontend/src/core/components/tools/shared/SubcategoryHeader.tsx
index b403ebae8d..2f0b80440d 100644
--- a/frontend/src/core/components/tools/shared/SubcategoryHeader.tsx
+++ b/frontend/src/core/components/tools/shared/SubcategoryHeader.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 interface SubcategoryHeaderProps {
   label: string;
@@ -6,8 +6,8 @@ interface SubcategoryHeaderProps {
   mb?: string | number;
 }
 
-export const SubcategoryHeader: React.FC<SubcategoryHeaderProps> = ({ label, mt = '1rem', mb = '0.25rem' }) => (
-  <div className="tool-subcategory-row" style={{ marginLeft: '1rem', marginRight: '1rem', marginTop: mt, marginBottom: mb }}>
+export const SubcategoryHeader: React.FC<SubcategoryHeaderProps> = ({ label, mt = "1rem", mb = "0.25rem" }) => (
+  <div className="tool-subcategory-row" style={{ marginLeft: "1rem", marginRight: "1rem", marginTop: mt, marginBottom: mb }}>
     <div className="tool-subcategory-row-rule" />
     <span className="tool-subcategory-row-title">{label}</span>
     <div className="tool-subcategory-row-rule" />
diff --git a/frontend/src/core/components/tools/shared/SuggestedToolsSection.tsx b/frontend/src/core/components/tools/shared/SuggestedToolsSection.tsx
index bd7517c791..790989ff80 100644
--- a/frontend/src/core/components/tools/shared/SuggestedToolsSection.tsx
+++ b/frontend/src/core/components/tools/shared/SuggestedToolsSection.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import { Stack, Text, Divider, Card, Group, Anchor } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { useSuggestedTools } from '@app/hooks/useSuggestedTools';
-import { ToolIcon } from '@app/components/shared/ToolIcon';
+import React from "react";
+import { Stack, Text, Divider, Card, Group, Anchor } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { useSuggestedTools } from "@app/hooks/useSuggestedTools";
+import { ToolIcon } from "@app/components/shared/ToolIcon";
 
 export function SuggestedToolsSection(): React.ReactElement {
   const { t } = useTranslation();
@@ -13,24 +13,15 @@ export function SuggestedToolsSection(): React.ReactElement {
       <Divider />
 
       <Text size="lg" fw={600}>
-        {t('editYourNewFiles', 'Edit your new file(s)')}
+        {t("editYourNewFiles", "Edit your new file(s)")}
       </Text>
 
       <Stack gap="xs">
         {suggestedTools.map((tool) => {
           const IconComponent = tool.icon;
           return (
-            <Anchor
-              key={tool.id}
-              href={tool.href}
-              onClick={tool.onClick}
-              style={{ textDecoration: 'none', color: 'inherit' }}
-            >
-              <Card
-                p="sm"
-                withBorder
-                style={{ cursor: 'pointer' }}
-              >
+            <Anchor key={tool.id} href={tool.href} onClick={tool.onClick} style={{ textDecoration: "none", color: "inherit" }}>
+              <Card p="sm" withBorder style={{ cursor: "pointer" }}>
                 <Group gap="xs">
                   <ToolIcon icon={<IconComponent />} />
                   <Text size="sm" fw={500}>
diff --git a/frontend/src/core/components/tools/shared/ToolStep.tsx b/frontend/src/core/components/tools/shared/ToolStep.tsx
index 8d2d95513f..040580d612 100644
--- a/frontend/src/core/components/tools/shared/ToolStep.tsx
+++ b/frontend/src/core/components/tools/shared/ToolStep.tsx
@@ -1,10 +1,10 @@
-import React, { createContext, useContext, useMemo } from 'react';
-import { Text, Stack, Flex, Divider } from '@mantine/core';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { Tooltip } from '@app/components/shared/Tooltip';
-import { TooltipTip } from '@app/types/tips';
-import { createFilesToolStep, FilesToolStepProps } from '@app/components/tools/shared/FilesToolStep';
-import { createReviewToolStep, ReviewToolStepProps } from '@app/components/tools/shared/ReviewToolStep';
+import React, { createContext, useContext, useMemo } from "react";
+import { Text, Stack, Flex, Divider } from "@mantine/core";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { Tooltip } from "@app/components/shared/Tooltip";
+import { TooltipTip } from "@app/types/tips";
+import { createFilesToolStep, FilesToolStepProps } from "@app/components/tools/shared/FilesToolStep";
+import { createReviewToolStep, ReviewToolStepProps } from "@app/components/tools/shared/ReviewToolStep";
 
 interface ToolStepContextType {
   visibleStepCount: number;
@@ -37,24 +37,23 @@ export interface ToolStepProps {
 
 const renderTooltipTitle = (
   title: string,
-  tooltip: ToolStepProps['tooltip'],
+  tooltip: ToolStepProps["tooltip"],
   isCollapsed: boolean,
-  alwaysShowTooltip: boolean = false
+  alwaysShowTooltip: boolean = false,
 ) => {
   if (tooltip && (!isCollapsed || alwaysShowTooltip)) {
     return (
-      <Tooltip
-        content={tooltip.content}
-        tips={tooltip.tips}
-        header={tooltip.header}
-        sidebarTooltip={true}
-        pinOnClick={true}
-      >
+      <Tooltip content={tooltip.content} tips={tooltip.tips} header={tooltip.header} sidebarTooltip={true} pinOnClick={true}>
         <Flex align="center" gap="xs" onClick={(e) => e.stopPropagation()}>
           <Text fw={400} size="sm">
             {title}
           </Text>
-          <LocalIcon icon="info-outline-rounded" width="1.25rem" height="1.25rem" style={{ color: 'var(--icon-files-color)' }} />
+          <LocalIcon
+            icon="info-outline-rounded"
+            width="1.25rem"
+            height="1.25rem"
+            style={{ color: "var(--icon-files-color)" }}
+          />
         </Flex>
       </Tooltip>
     );
@@ -78,7 +77,7 @@ const ToolStep = ({
   _stepNumber,
   _noPadding,
   alwaysShowTooltip = false,
-  tooltip
+  tooltip,
 }: ToolStepProps) => {
   const parent = useContext(ToolStepContext);
 
@@ -97,56 +96,66 @@ const ToolStep = ({
     <div>
       <div
         style={{
-          padding: '0.5rem',
+          padding: "0.5rem",
           opacity: isCollapsed ? 0.8 : 1,
-          color: isCollapsed ? 'var(--mantine-color-dimmed)' : 'inherit',
-          transition: 'opacity 0.2s ease, color 0.2s ease'
+          color: isCollapsed ? "var(--mantine-color-dimmed)" : "inherit",
+          transition: "opacity 0.2s ease, color 0.2s ease",
         }}
       >
-      {/* Chevron icon to collapse/expand the step */}
-      <Flex
-        align="center"
-        justify="space-between"
-        mb="sm"
-        style={{
-          cursor: onCollapsedClick ? 'pointer' : 'default'
-        }}
-        onClick={onCollapsedClick}
-      >
-        <Flex align="center" gap="sm">
-          {shouldShowNumber && (
-            <Text fw={500} size="sm" c="dimmed" mr="0.5rem">
-              {stepNumber}
-            </Text>
+        {/* Chevron icon to collapse/expand the step */}
+        <Flex
+          align="center"
+          justify="space-between"
+          mb="sm"
+          style={{
+            cursor: onCollapsedClick ? "pointer" : "default",
+          }}
+          onClick={onCollapsedClick}
+        >
+          <Flex align="center" gap="sm">
+            {shouldShowNumber && (
+              <Text fw={500} size="sm" c="dimmed" mr="0.5rem">
+                {stepNumber}
+              </Text>
+            )}
+            {renderTooltipTitle(title, tooltip, isCollapsed, alwaysShowTooltip)}
+          </Flex>
+
+          {isCollapsed ? (
+            <LocalIcon
+              icon="chevron-right-rounded"
+              width="1.2rem"
+              height="1.2rem"
+              style={{
+                color: "var(--mantine-color-dimmed)",
+                opacity: onCollapsedClick ? 1 : 0.5,
+              }}
+            />
+          ) : (
+            <LocalIcon
+              icon="expand-more-rounded"
+              width="1.2rem"
+              height="1.2rem"
+              style={{
+                color: "var(--mantine-color-dimmed)",
+                opacity: onCollapsedClick ? 1 : 0.5,
+              }}
+            />
           )}
-          {renderTooltipTitle(title, tooltip, isCollapsed, alwaysShowTooltip)}
         </Flex>
 
-        {isCollapsed ? (
-          <LocalIcon icon="chevron-right-rounded" width="1.2rem" height="1.2rem" style={{
-            color: 'var(--mantine-color-dimmed)',
-            opacity: onCollapsedClick ? 1 : 0.5
-          }} />
-        ) : (
-          <LocalIcon icon="expand-more-rounded" width="1.2rem" height="1.2rem" style={{
-            color: 'var(--mantine-color-dimmed)',
-            opacity: onCollapsedClick ? 1 : 0.5
-          }} />
+        {!isCollapsed && (
+          <Stack gap="sm" pl={_noPadding ? 0 : "sm"}>
+            {helpText && (
+              <Text size="sm" c="dimmed">
+                {helpText}
+              </Text>
+            )}
+            {children}
+          </Stack>
         )}
-      </Flex>
-
-      {!isCollapsed && (
-        <Stack gap="sm" pl={_noPadding ? 0 : "sm"}>
-          {helpText && (
-            <Text size="sm" c="dimmed">
-              {helpText}
-            </Text>
-          )}
-          {children}
-        </Stack>
-      )}
       </div>
-      <Divider style={{ color: '#E2E8F0', marginLeft: '1rem', marginRight: '-0.5rem' }} />
+      <Divider style={{ color: "#E2E8F0", marginLeft: "1rem", marginRight: "-0.5rem" }} />
     </div>
   );
 };
@@ -158,8 +167,8 @@ export function createToolSteps() {
 
   const create = (
     title: string,
-    props: Omit<ToolStepProps, 'title' | '_stepNumber'> = {},
-    children?: React.ReactNode
+    props: Omit<ToolStepProps, "title" | "_stepNumber"> = {},
+    children?: React.ReactNode,
   ): React.ReactElement => {
     const isVisible = props.isVisible !== false;
     const currentStepNumber = isVisible ? stepNumber++ : undefined;
@@ -170,9 +179,9 @@ export function createToolSteps() {
         ...props,
         title,
         _stepNumber: currentStepNumber,
-        key: `step-${title.toLowerCase().replace(/\s+/g, '-')}`
+        key: `step-${title.toLowerCase().replace(/\s+/g, "-")}`,
       },
-      children
+      children,
     );
 
     steps.push(step);
@@ -183,12 +192,12 @@ export function createToolSteps() {
     return createFilesToolStep(create, props);
   };
 
-  const createReviewStep = <TParams = unknown>(props: ReviewToolStepProps<TParams>): React.ReactElement => {
+  const createReviewStep = <TParams = unknown,>(props: ReviewToolStepProps<TParams>): React.ReactElement => {
     return createReviewToolStep(create, props);
   };
 
   const getVisibleCount = () => {
-    return steps.filter(step => {
+    return steps.filter((step) => {
       const stepProps = step.props as ToolStepProps;
       const isVisible = stepProps.isVisible !== false;
       const excludeFromCount = stepProps._excludeFromCount === true;
@@ -215,18 +224,17 @@ export function ToolStepProvider({ children, forceStepNumbers }: { children: Rea
     return count;
   }, [children]);
 
-  const contextValue = useMemo(() => ({
-    visibleStepCount,
-    forceStepNumbers
-  }), [visibleStepCount, forceStepNumbers]);
-
-  return (
-    <ToolStepContext.Provider value={contextValue}>
-      {children}
-    </ToolStepContext.Provider>
+  const contextValue = useMemo(
+    () => ({
+      visibleStepCount,
+      forceStepNumbers,
+    }),
+    [visibleStepCount, forceStepNumbers],
   );
+
+  return <ToolStepContext.Provider value={contextValue}>{children}</ToolStepContext.Provider>;
 }
 
-export type { FilesToolStepProps } from '@app/components/tools/shared/FilesToolStep';
-export type { ReviewToolStepProps } from '@app/components/tools/shared/ReviewToolStep';
+export type { FilesToolStepProps } from "@app/components/tools/shared/FilesToolStep";
+export type { ReviewToolStepProps } from "@app/components/tools/shared/ReviewToolStep";
 export default ToolStep;
diff --git a/frontend/src/core/components/tools/shared/ToolWorkflowTitle.tsx b/frontend/src/core/components/tools/shared/ToolWorkflowTitle.tsx
index 8090b85aaa..101a378b44 100644
--- a/frontend/src/core/components/tools/shared/ToolWorkflowTitle.tsx
+++ b/frontend/src/core/components/tools/shared/ToolWorkflowTitle.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
-import { Flex, Text, Divider } from '@mantine/core';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { Tooltip } from '@app/components/shared/Tooltip';
+import React from "react";
+import { Flex, Text, Divider } from "@mantine/core";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { Tooltip } from "@app/components/shared/Tooltip";
 
 export interface ToolWorkflowTitleProps {
   title: string;
@@ -22,7 +22,9 @@ export function ToolWorkflowTitle({ title, tooltip, description }: ToolWorkflowT
       <Text fw={500} size="lg" p="xs">
         {title}
       </Text>
-      {tooltip && <LocalIcon icon="info-outline-rounded" width="1.25rem" height="1.25rem" style={{ color: 'var(--icon-files-color)' }} />}
+      {tooltip && (
+        <LocalIcon icon="info-outline-rounded" width="1.25rem" height="1.25rem" style={{ color: "var(--icon-files-color)" }} />
+      )}
     </Flex>
   );
 
@@ -30,12 +32,7 @@ export function ToolWorkflowTitle({ title, tooltip, description }: ToolWorkflowT
     <>
       {tooltip ? (
         <Flex justify="center" w="100%">
-          <Tooltip
-            content={tooltip.content}
-            tips={tooltip.tips}
-            header={tooltip.header}
-            sidebarTooltip={true}
-          >
+          <Tooltip content={tooltip.content} tips={tooltip.tips} header={tooltip.header} sidebarTooltip={true}>
             {titleContent}
           </Tooltip>
         </Flex>
@@ -43,7 +40,16 @@ export function ToolWorkflowTitle({ title, tooltip, description }: ToolWorkflowT
         titleContent
       )}
 
-      <Text size="sm" mb="md" p="sm" style={{borderRadius:'var(--mantine-radius-md)', background: 'var(--color-gray-200)', color: 'var(--mantine-color-text)' }}>
+      <Text
+        size="sm"
+        mb="md"
+        p="sm"
+        style={{
+          borderRadius: "var(--mantine-radius-md)",
+          background: "var(--color-gray-200)",
+          color: "var(--mantine-color-text)",
+        }}
+      >
         {description}
       </Text>
       <Divider mb="sm" />
diff --git a/frontend/src/core/components/tools/shared/createToolFlow.tsx b/frontend/src/core/components/tools/shared/createToolFlow.tsx
index caeb8b3fb4..f7a8aed561 100644
--- a/frontend/src/core/components/tools/shared/createToolFlow.tsx
+++ b/frontend/src/core/components/tools/shared/createToolFlow.tsx
@@ -1,12 +1,12 @@
-import React from 'react';
-import { Stack } from '@mantine/core';
-import { createToolSteps, ToolStepProvider } from '@app/components/tools/shared/ToolStep';
-import { ScopedOperationButton } from '@app/components/tools/shared/ScopedOperationButton';
-import { ToolOperationHook } from '@app/hooks/tools/shared/useToolOperation';
-import { ToolWorkflowTitle, ToolWorkflowTitleProps } from '@app/components/tools/shared/ToolWorkflowTitle';
-import { StirlingFile } from '@app/types/fileContext';
-import type { TooltipTip } from '@app/types/tips';
-import type { ExecuteDisabledReason } from '@app/hooks/tools/shared/toolOperationTypes';
+import React from "react";
+import { Stack } from "@mantine/core";
+import { createToolSteps, ToolStepProvider } from "@app/components/tools/shared/ToolStep";
+import { ScopedOperationButton } from "@app/components/tools/shared/ScopedOperationButton";
+import { ToolOperationHook } from "@app/hooks/tools/shared/useToolOperation";
+import { ToolWorkflowTitle, ToolWorkflowTitleProps } from "@app/components/tools/shared/ToolWorkflowTitle";
+import { StirlingFile } from "@app/types/fileContext";
+import type { TooltipTip } from "@app/types/tips";
+import type { ExecuteDisabledReason } from "@app/hooks/tools/shared/toolOperationTypes";
 
 export interface FilesStepConfig {
   selectedFiles: StirlingFile[];
@@ -93,27 +93,32 @@ export function createToolFlow<TParams = unknown>(config: ToolFlowConfig<TParams
   const steps = createToolSteps();
 
   return (
-    <Stack gap="sm" p="sm" >
-    {/* <Stack gap="sm" p="sm" h="100%" w="100%" style={{ overflow: 'auto' }}> */}
+    <Stack gap="sm" p="sm">
+      {/* <Stack gap="sm" p="sm" h="100%" w="100%" style={{ overflow: 'auto' }}> */}
       <ToolStepProvider forceStepNumbers={config.forceStepNumbers}>
         {config.title && <ToolWorkflowTitle {...config.title} />}
 
         {/* Files Step */}
-        {config.files.isVisible !== false && steps.createFilesStep({
-          selectedFiles: config.files.selectedFiles,
-          isCollapsed: config.files.isCollapsed,
-          minFiles: config.files.minFiles,
-          onCollapsedClick: config.files.onCollapsedClick
-        })}
+        {config.files.isVisible !== false &&
+          steps.createFilesStep({
+            selectedFiles: config.files.selectedFiles,
+            isCollapsed: config.files.isCollapsed,
+            minFiles: config.files.minFiles,
+            onCollapsedClick: config.files.onCollapsedClick,
+          })}
 
         {/* Middle Steps */}
         {config.steps.map((stepConfig) =>
-          steps.create(stepConfig.title, {
-            isVisible: stepConfig.isVisible,
-            isCollapsed: stepConfig.isCollapsed,
-            onCollapsedClick: stepConfig.onCollapsedClick,
-            tooltip: stepConfig.tooltip
-          }, stepConfig.content)
+          steps.create(
+            stepConfig.title,
+            {
+              isVisible: stepConfig.isVisible,
+              isCollapsed: stepConfig.isCollapsed,
+              onCollapsedClick: stepConfig.onCollapsedClick,
+              tooltip: stepConfig.tooltip,
+            },
+            stepConfig.content,
+          ),
         )}
 
         {/* Preview (outside steps, above execute button).
@@ -121,35 +126,41 @@ export function createToolFlow<TParams = unknown>(config: ToolFlowConfig<TParams
         {!config.review.isVisible && (config.files.selectedFiles?.length ?? 0) > 0 && config.preview}
 
         {/* Execute Button */}
-        {config.executeButton && config.executeButton.isVisible !== false && (() => {
-          const eb = config.executeButton;
-          const hasFiles = (config.files.selectedFiles?.length ?? 0) > 0;
-          // Compute the disabled reason from structured fields; explicit disabledReason wins if set.
-          const effectiveDisabledReason: ExecuteDisabledReason =
-            eb.disabledReason !== undefined ? eb.disabledReason
-            : eb.endpointEnabled === false  ? 'endpointUnavailable'
-            : !hasFiles                     ? 'noFiles'
-            : eb.paramsValid === false       ? 'invalidParams'
-            : null;
-          return (
-            <>
-              <ScopedOperationButton
-                selectedFiles={config.files.selectedFiles ?? []}
-                disableScopeHints={eb.disableScopeHints}
-                onClick={eb.onClick}
-                isLoading={config.review.operation.isLoading}
-                disabled={eb.disabled}
-                disabledReason={effectiveDisabledReason}
-                loadingText={eb.loadingText}
-                submitText={eb.text}
-                showCloudBadge={eb.showCloudBadge ?? config.review.operation.willUseCloud ?? false}
-                data-testid={eb.testId}
-                data-tour="run-button"
-              />
-              {config.belowExecuteButton}
-            </>
-          );
-        })()}
+        {config.executeButton &&
+          config.executeButton.isVisible !== false &&
+          (() => {
+            const eb = config.executeButton;
+            const hasFiles = (config.files.selectedFiles?.length ?? 0) > 0;
+            // Compute the disabled reason from structured fields; explicit disabledReason wins if set.
+            const effectiveDisabledReason: ExecuteDisabledReason =
+              eb.disabledReason !== undefined
+                ? eb.disabledReason
+                : eb.endpointEnabled === false
+                  ? "endpointUnavailable"
+                  : !hasFiles
+                    ? "noFiles"
+                    : eb.paramsValid === false
+                      ? "invalidParams"
+                      : null;
+            return (
+              <>
+                <ScopedOperationButton
+                  selectedFiles={config.files.selectedFiles ?? []}
+                  disableScopeHints={eb.disableScopeHints}
+                  onClick={eb.onClick}
+                  isLoading={config.review.operation.isLoading}
+                  disabled={eb.disabled}
+                  disabledReason={effectiveDisabledReason}
+                  loadingText={eb.loadingText}
+                  submitText={eb.text}
+                  showCloudBadge={eb.showCloudBadge ?? config.review.operation.willUseCloud ?? false}
+                  data-testid={eb.testId}
+                  data-tour="run-button"
+                />
+                {config.belowExecuteButton}
+              </>
+            );
+          })()}
 
         {/* Review Step */}
         {steps.createReviewStep({
@@ -157,9 +168,9 @@ export function createToolFlow<TParams = unknown>(config: ToolFlowConfig<TParams
           operation: config.review.operation,
           title: config.review.title,
           onFileClick: config.review.onFileClick,
-          onUndo: config.review.onUndo
+          onUndo: config.review.onUndo,
         })}
       </ToolStepProvider>
     </Stack>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/core/components/tools/shared/renderToolButtons.tsx b/frontend/src/core/components/tools/shared/renderToolButtons.tsx
index 8e1b986cf0..78d5bcdc40 100644
--- a/frontend/src/core/components/tools/shared/renderToolButtons.tsx
+++ b/frontend/src/core/components/tools/shared/renderToolButtons.tsx
@@ -1,10 +1,10 @@
-import { Box } from '@mantine/core';
-import ToolButton from '@app/components/tools/toolPicker/ToolButton';
-import SubcategoryHeader from '@app/components/tools/shared/SubcategoryHeader';
+import { Box } from "@mantine/core";
+import ToolButton from "@app/components/tools/toolPicker/ToolButton";
+import SubcategoryHeader from "@app/components/tools/shared/SubcategoryHeader";
 
 import { getSubcategoryLabel } from "@app/data/toolsTaxonomy";
-import { TFunction } from 'i18next';
-import { SubcategoryGroup } from '@app/hooks/useToolSections';
+import { TFunction } from "i18next";
+import { SubcategoryGroup } from "@app/hooks/useToolSections";
 import { ToolId } from "@app/types/toolId";
 
 // Helper function to render tool buttons for a subcategory
@@ -16,7 +16,7 @@ export const renderToolButtons = (
   showSubcategoryHeader: boolean = true,
   disableNavigation: boolean = false,
   searchResults?: Array<{ item: [string, any]; matchedText?: string }>,
-  hasStars: boolean = false
+  hasStars: boolean = false,
 ) => {
   // Create a map of matched text for quick lookup
   const matchedTextMap = new Map<string, string>();
@@ -28,9 +28,7 @@ export const renderToolButtons = (
 
   return (
     <Box key={subcategory.subcategoryId} w="100%">
-      {showSubcategoryHeader && (
-        <SubcategoryHeader label={getSubcategoryLabel(t, subcategory.subcategoryId)} />
-      )}
+      {showSubcategoryHeader && <SubcategoryHeader label={getSubcategoryLabel(t, subcategory.subcategoryId)} />}
       <div>
         {subcategory.tools.map(({ id, tool }) => {
           const matchedSynonym = matchedTextMap.get(id);
diff --git a/frontend/src/core/components/tools/sign/PenSizeSelector.tsx b/frontend/src/core/components/tools/sign/PenSizeSelector.tsx
index 7c74bf47a3..1acb1d6481 100644
--- a/frontend/src/core/components/tools/sign/PenSizeSelector.tsx
+++ b/frontend/src/core/components/tools/sign/PenSizeSelector.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { TextInput, Combobox, useCombobox } from '@mantine/core';
+import React from "react";
+import { TextInput, Combobox, useCombobox } from "@mantine/core";
 
 interface PenSizeSelectorProps {
   value: number;
@@ -20,11 +20,11 @@ const PenSizeSelector = ({
   disabled = false,
   placeholder = "Type or select pen size (1-200)",
   style,
-  size
+  size,
 }: PenSizeSelectorProps) => {
   const combobox = useCombobox();
 
-  const penSizeOptions = ['1', '2', '3', '4', '5', '8', '10', '12', '15', '20'];
+  const penSizeOptions = ["1", "2", "3", "4", "5", "8", "10", "12", "15", "20"];
 
   return (
     <Combobox
@@ -83,4 +83,4 @@ const PenSizeSelector = ({
   );
 };
 
-export default PenSizeSelector;
\ No newline at end of file
+export default PenSizeSelector;
diff --git a/frontend/src/core/components/tools/sign/SavedSignaturesSection.tsx b/frontend/src/core/components/tools/sign/SavedSignaturesSection.tsx
index 13b828498b..4efe9fccd8 100644
--- a/frontend/src/core/components/tools/sign/SavedSignaturesSection.tsx
+++ b/frontend/src/core/components/tools/sign/SavedSignaturesSection.tsx
@@ -1,9 +1,9 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { ActionIcon, Alert, Badge, Box, Card, Group, Stack, Text, TextInput, Tooltip } from '@mantine/core';
-import { LocalIcon } from '@app/components/shared/LocalIcon';
-import { SavedSignature, SavedSignatureType } from '@app/hooks/tools/sign/useSavedSignatures';
-import type { StorageType } from '@app/services/signatureStorageService';
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { ActionIcon, Alert, Badge, Box, Card, Group, Stack, Text, TextInput, Tooltip } from "@mantine/core";
+import { LocalIcon } from "@app/components/shared/LocalIcon";
+import { SavedSignature, SavedSignatureType } from "@app/hooks/tools/sign/useSavedSignatures";
+import type { StorageType } from "@app/services/signatureStorageService";
 
 interface SavedSignaturesSectionProps {
   signatures: SavedSignature[];
@@ -19,9 +19,9 @@ interface SavedSignaturesSectionProps {
 }
 
 const typeBadgeColor: Record<SavedSignatureType, string> = {
-  canvas: 'indigo',
-  image: 'teal',
-  text: 'grape',
+  canvas: "indigo",
+  image: "teal",
+  text: "grape",
 };
 
 export const SavedSignaturesSection = ({
@@ -34,21 +34,21 @@ export const SavedSignaturesSection = ({
   onUseSignature,
   onDeleteSignature,
   onRenameSignature,
-  translationScope = 'sign',
+  translationScope = "sign",
 }: SavedSignaturesSectionProps) => {
   const { t } = useTranslation();
   const translate = useCallback(
     (key: string, defaultValue: string, options?: Record<string, unknown>) =>
       t(`${translationScope}.${key}`, { defaultValue, ...options }),
-    [t, translationScope]
+    [t, translationScope],
   );
   const [labelDrafts, setLabelDrafts] = useState<Record<string, string>>({});
 
   // Group signatures by scope
   const groupedSignatures = useMemo(() => {
-    const personal = signatures.filter(sig => sig.scope === 'personal');
-    const shared = signatures.filter(sig => sig.scope === 'shared');
-    const localStorage = signatures.filter(sig => sig.scope === 'localStorage');
+    const personal = signatures.filter((sig) => sig.scope === "personal");
+    const shared = signatures.filter((sig) => sig.scope === "shared");
+    const localStorage = signatures.filter((sig) => sig.scope === "localStorage");
     return { personal, shared, localStorage };
   }, [signatures]);
 
@@ -68,10 +68,10 @@ export const SavedSignaturesSection = ({
   }, [onUseSignature]);
 
   useEffect(() => {
-    setLabelDrafts(prev => {
+    setLabelDrafts((prev) => {
       const nextDrafts: Record<string, string> = {};
-      signatures.forEach(sig => {
-        nextDrafts[sig.id] = prev[sig.id] ?? sig.label ?? '';
+      signatures.forEach((sig) => {
+        nextDrafts[sig.id] = prev[sig.id] ?? sig.label ?? "";
       });
       return nextDrafts;
     });
@@ -79,19 +79,19 @@ export const SavedSignaturesSection = ({
 
   // Reset carousel indices when categories change
   useEffect(() => {
-    setActivePersonalIndex(prev => Math.min(prev, Math.max(groupedSignatures.personal.length - 1, 0)));
+    setActivePersonalIndex((prev) => Math.min(prev, Math.max(groupedSignatures.personal.length - 1, 0)));
   }, [groupedSignatures.personal.length]);
 
   useEffect(() => {
-    setActiveSharedIndex(prev => Math.min(prev, Math.max(groupedSignatures.shared.length - 1, 0)));
+    setActiveSharedIndex((prev) => Math.min(prev, Math.max(groupedSignatures.shared.length - 1, 0)));
   }, [groupedSignatures.shared.length]);
 
   useEffect(() => {
-    setActiveLocalStorageIndex(prev => Math.min(prev, Math.max(groupedSignatures.localStorage.length - 1, 0)));
+    setActiveLocalStorageIndex((prev) => Math.min(prev, Math.max(groupedSignatures.localStorage.length - 1, 0)));
   }, [groupedSignatures.localStorage.length]);
 
   const renderPreview = (signature: SavedSignature) => {
-    if (signature.type === 'text') {
+    if (signature.type === "text") {
       return (
         <Box
           component="div"
@@ -99,15 +99,15 @@ export const SavedSignaturesSection = ({
             fontFamily: signature.fontFamily,
             fontSize: `${signature.fontSize}px`,
             color: signature.textColor,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            height: '120px',
-            borderRadius: '0.5rem',
-            backgroundColor: '#ffffff',
-            padding: '0.5rem',
-            textAlign: 'center',
-            overflow: 'hidden',
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            height: "120px",
+            borderRadius: "0.5rem",
+            backgroundColor: "#ffffff",
+            padding: "0.5rem",
+            textAlign: "center",
+            overflow: "hidden",
           }}
         >
           <Text
@@ -115,7 +115,7 @@ export const SavedSignaturesSection = ({
             style={{
               fontFamily: signature.fontFamily,
               color: signature.textColor,
-              whiteSpace: 'nowrap',
+              whiteSpace: "nowrap",
             }}
           >
             {signature.signerName}
@@ -128,13 +128,13 @@ export const SavedSignaturesSection = ({
       <Box
         component="div"
         style={{
-          backgroundColor: '#ffffff',
-          borderRadius: '0.5rem',
-          height: '120px',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          padding: '0.5rem',
+          backgroundColor: "#ffffff",
+          borderRadius: "0.5rem",
+          height: "120px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          padding: "0.5rem",
         }}
       >
         <Box
@@ -142,9 +142,9 @@ export const SavedSignaturesSection = ({
           src={signature.dataUrl}
           alt={signature.label}
           style={{
-            maxWidth: '100%',
-            maxHeight: '100%',
-            objectFit: 'contain',
+            maxWidth: "100%",
+            maxHeight: "100%",
+            objectFit: "contain",
           }}
         />
       </Box>
@@ -154,12 +154,12 @@ export const SavedSignaturesSection = ({
   const emptyState = (
     <Card withBorder>
       <Stack gap="xs">
-        <Text fw={500}>{translate('saved.emptyTitle', 'No saved signatures yet')}</Text>
+        <Text fw={500}>{translate("saved.emptyTitle", "No saved signatures yet")}</Text>
         <Text size="sm" c="dimmed">
           {translate(
-            'saved.emptyDescription',
+            "saved.emptyDescription",
             'Draw, upload, or type a signature above, then use "Save to library" to keep up to {{max}} favourites ready to use.',
-            { max: maxLimit }
+            { max: maxLimit },
           )}
         </Text>
       </Stack>
@@ -168,21 +168,21 @@ export const SavedSignaturesSection = ({
 
   const typeLabel = (type: SavedSignatureType) => {
     switch (type) {
-      case 'canvas':
-        return translate('saved.type.canvas', 'Drawing');
-      case 'image':
-        return translate('saved.type.image', 'Upload');
-      case 'text':
-        return translate('saved.type.text', 'Text');
+      case "canvas":
+        return translate("saved.type.canvas", "Drawing");
+      case "image":
+        return translate("saved.type.image", "Upload");
+      case "text":
+        return translate("saved.type.text", "Text");
       default:
         return type;
     }
   };
 
   const handleLabelBlur = (signature: SavedSignature) => {
-    const nextValue = labelDrafts[signature.id]?.trim() ?? '';
+    const nextValue = labelDrafts[signature.id]?.trim() ?? "";
     if (!nextValue || nextValue === signature.label) {
-      setLabelDrafts(prev => ({ ...prev, [signature.id]: signature.label }));
+      setLabelDrafts((prev) => ({ ...prev, [signature.id]: signature.label }));
       return;
     }
     onRenameSignature(signature.id, nextValue);
@@ -190,15 +190,15 @@ export const SavedSignaturesSection = ({
 
   const handleLabelChange = (event: React.ChangeEvent<HTMLInputElement>, signature: SavedSignature) => {
     const { value } = event.currentTarget;
-    setLabelDrafts(prev => ({ ...prev, [signature.id]: value }));
+    setLabelDrafts((prev) => ({ ...prev, [signature.id]: value }));
   };
 
   const handleLabelKeyDown = (event: React.KeyboardEvent<HTMLInputElement>, signature: SavedSignature) => {
-    if (event.key === 'Enter') {
+    if (event.key === "Enter") {
       event.currentTarget.blur();
     }
-    if (event.key === 'Escape') {
-      setLabelDrafts(prev => ({ ...prev, [signature.id]: signature.label }));
+    if (event.key === "Escape") {
+      setLabelDrafts((prev) => ({ ...prev, [signature.id]: signature.label }));
       event.currentTarget.blur();
     }
   };
@@ -208,18 +208,18 @@ export const SavedSignaturesSection = ({
       <Group justify="space-between" align="flex-start">
         <Stack gap={0}>
           <Text fw={600} size="md">
-            {translate('saved.heading', 'Saved signatures')}
+            {translate("saved.heading", "Saved signatures")}
           </Text>
           <Text size="sm" c="dimmed">
-            {translate('saved.description', 'Reuse saved signatures at any time.')}
+            {translate("saved.description", "Reuse saved signatures at any time.")}
           </Text>
         </Stack>
       </Group>
 
       {isAtCapacity && (
-        <Alert color="yellow" title={translate('saved.limitTitle', 'Limit reached')}>
+        <Alert color="yellow" title={translate("saved.limitTitle", "Limit reached")}>
           <Text size="sm">
-            {translate('saved.limitDescription', 'Remove a saved signature before adding new ones (max {{max}}).', {
+            {translate("saved.limitDescription", "Remove a saved signature before adding new ones (max {{max}}).", {
               max: maxLimit,
             })}
           </Text>
@@ -236,16 +236,16 @@ export const SavedSignaturesSection = ({
               <Group gap="xs">
                 <LocalIcon icon="person-rounded" width={18} height={18} />
                 <Text fw={600} size="sm">
-                  {translate('saved.personalHeading', 'Personal Signatures')}
+                  {translate("saved.personalHeading", "Personal Signatures")}
                 </Text>
               </Group>
               <Text size="xs" c="dimmed">
-                {translate('saved.personalDescription', 'Only you can see these signatures.')}
+                {translate("saved.personalDescription", "Only you can see these signatures.")}
               </Text>
 
               <Group justify="space-between" align="center">
                 <Text size="sm" c="dimmed">
-                  {translate('saved.carouselPosition', '{{current}} of {{total}}', {
+                  {translate("saved.carouselPosition", "{{current}} of {{total}}", {
                     current: activePersonalIndex + 1,
                     total: groupedSignatures.personal.length,
                   })}
@@ -253,16 +253,16 @@ export const SavedSignaturesSection = ({
                 <Group gap={4}>
                   <ActionIcon
                     variant="light"
-                    aria-label={translate('saved.prev', 'Previous')}
-                    onClick={() => setActivePersonalIndex(prev => Math.max(0, prev - 1))}
+                    aria-label={translate("saved.prev", "Previous")}
+                    onClick={() => setActivePersonalIndex((prev) => Math.max(0, prev - 1))}
                     disabled={disabled || activePersonalIndex === 0}
                   >
                     <LocalIcon icon="chevron-left-rounded" width={18} height={18} />
                   </ActionIcon>
                   <ActionIcon
                     variant="light"
-                    aria-label={translate('saved.next', 'Next')}
-                    onClick={() => setActivePersonalIndex(prev => Math.min(groupedSignatures.personal.length - 1, prev + 1))}
+                    aria-label={translate("saved.next", "Next")}
+                    onClick={() => setActivePersonalIndex((prev) => Math.min(groupedSignatures.personal.length - 1, prev + 1))}
                     disabled={disabled || activePersonalIndex >= groupedSignatures.personal.length - 1}
                   >
                     <LocalIcon icon="chevron-right-rounded" width={18} height={18} />
@@ -286,11 +286,11 @@ export const SavedSignaturesSection = ({
                       >
                         <LocalIcon icon="check-circle-outline-rounded" width={18} height={18} />
                       </ActionIcon>
-                      <Tooltip label={translate('saved.delete', 'Remove')}>
+                      <Tooltip label={translate("saved.delete", "Remove")}>
                         <ActionIcon
                           variant="subtle"
                           color="red"
-                          aria-label={translate('saved.delete', 'Remove')}
+                          aria-label={translate("saved.delete", "Remove")}
                           onClick={() => onDeleteSignature(activePersonalSignature)}
                           disabled={disabled}
                         >
@@ -301,11 +301,11 @@ export const SavedSignaturesSection = ({
                   </Group>
                   {renderPreview(activePersonalSignature)}
                   <TextInput
-                    label={translate('saved.label', 'Label')}
+                    label={translate("saved.label", "Label")}
                     value={labelDrafts[activePersonalSignature.id] ?? activePersonalSignature.label}
-                    onChange={event => handleLabelChange(event, activePersonalSignature)}
+                    onChange={(event) => handleLabelChange(event, activePersonalSignature)}
                     onBlur={() => handleLabelBlur(activePersonalSignature)}
-                    onKeyDown={event => handleLabelKeyDown(event, activePersonalSignature)}
+                    onKeyDown={(event) => handleLabelKeyDown(event, activePersonalSignature)}
                     disabled={disabled}
                   />
                 </Stack>
@@ -319,16 +319,16 @@ export const SavedSignaturesSection = ({
               <Group gap="xs">
                 <LocalIcon icon="groups-rounded" width={18} height={18} />
                 <Text fw={600} size="sm">
-                  {translate('saved.sharedHeading', 'Shared Signatures')}
+                  {translate("saved.sharedHeading", "Shared Signatures")}
                 </Text>
               </Group>
               <Text size="xs" c="dimmed">
-                {translate('saved.sharedDescription', 'All users can see and use these signatures.')}
+                {translate("saved.sharedDescription", "All users can see and use these signatures.")}
               </Text>
 
               <Group justify="space-between" align="center">
                 <Text size="sm" c="dimmed">
-                  {translate('saved.carouselPosition', '{{current}} of {{total}}', {
+                  {translate("saved.carouselPosition", "{{current}} of {{total}}", {
                     current: activeSharedIndex + 1,
                     total: groupedSignatures.shared.length,
                   })}
@@ -336,16 +336,16 @@ export const SavedSignaturesSection = ({
                 <Group gap={4}>
                   <ActionIcon
                     variant="light"
-                    aria-label={translate('saved.prev', 'Previous')}
-                    onClick={() => setActiveSharedIndex(prev => Math.max(0, prev - 1))}
+                    aria-label={translate("saved.prev", "Previous")}
+                    onClick={() => setActiveSharedIndex((prev) => Math.max(0, prev - 1))}
                     disabled={disabled || activeSharedIndex === 0}
                   >
                     <LocalIcon icon="chevron-left-rounded" width={18} height={18} />
                   </ActionIcon>
                   <ActionIcon
                     variant="light"
-                    aria-label={translate('saved.next', 'Next')}
-                    onClick={() => setActiveSharedIndex(prev => Math.min(groupedSignatures.shared.length - 1, prev + 1))}
+                    aria-label={translate("saved.next", "Next")}
+                    onClick={() => setActiveSharedIndex((prev) => Math.min(groupedSignatures.shared.length - 1, prev + 1))}
                     disabled={disabled || activeSharedIndex >= groupedSignatures.shared.length - 1}
                   >
                     <LocalIcon icon="chevron-right-rounded" width={18} height={18} />
@@ -370,11 +370,11 @@ export const SavedSignaturesSection = ({
                         <LocalIcon icon="check-circle-outline-rounded" width={18} height={18} />
                       </ActionIcon>
                       {isAdmin && (
-                        <Tooltip label={translate('saved.delete', 'Remove')}>
+                        <Tooltip label={translate("saved.delete", "Remove")}>
                           <ActionIcon
                             variant="subtle"
                             color="red"
-                            aria-label={translate('saved.delete', 'Remove')}
+                            aria-label={translate("saved.delete", "Remove")}
                             onClick={() => onDeleteSignature(activeSharedSignature)}
                             disabled={disabled}
                           >
@@ -386,11 +386,11 @@ export const SavedSignaturesSection = ({
                   </Group>
                   {renderPreview(activeSharedSignature)}
                   <TextInput
-                    label={translate('saved.label', 'Label')}
+                    label={translate("saved.label", "Label")}
                     value={labelDrafts[activeSharedSignature.id] ?? activeSharedSignature.label}
-                    onChange={event => handleLabelChange(event, activeSharedSignature)}
+                    onChange={(event) => handleLabelChange(event, activeSharedSignature)}
                     onBlur={() => handleLabelBlur(activeSharedSignature)}
-                    onKeyDown={event => handleLabelKeyDown(event, activeSharedSignature)}
+                    onKeyDown={(event) => handleLabelKeyDown(event, activeSharedSignature)}
                     disabled={disabled}
                   />
                 </Stack>
@@ -401,18 +401,18 @@ export const SavedSignaturesSection = ({
           {/* Browser Storage (localStorage) - Temporary */}
           {groupedSignatures.localStorage.length > 0 && activeLocalStorageSignature && (
             <Stack gap="xs">
-              <Alert color="blue" title={translate('saved.tempStorageTitle', 'Temporary browser storage')}>
+              <Alert color="blue" title={translate("saved.tempStorageTitle", "Temporary browser storage")}>
                 <Text size="xs">
                   {translate(
-                    'saved.tempStorageDescription',
-                    'Signatures are stored in your browser only. They will be lost if you clear browser data or switch browsers.'
+                    "saved.tempStorageDescription",
+                    "Signatures are stored in your browser only. They will be lost if you clear browser data or switch browsers.",
                   )}
                 </Text>
               </Alert>
 
               <Group justify="space-between" align="center">
                 <Text size="sm" c="dimmed">
-                  {translate('saved.carouselPosition', '{{current}} of {{total}}', {
+                  {translate("saved.carouselPosition", "{{current}} of {{total}}", {
                     current: activeLocalStorageIndex + 1,
                     total: groupedSignatures.localStorage.length,
                   })}
@@ -420,16 +420,18 @@ export const SavedSignaturesSection = ({
                 <Group gap={4}>
                   <ActionIcon
                     variant="light"
-                    aria-label={translate('saved.prev', 'Previous')}
-                    onClick={() => setActiveLocalStorageIndex(prev => Math.max(0, prev - 1))}
+                    aria-label={translate("saved.prev", "Previous")}
+                    onClick={() => setActiveLocalStorageIndex((prev) => Math.max(0, prev - 1))}
                     disabled={disabled || activeLocalStorageIndex === 0}
                   >
                     <LocalIcon icon="chevron-left-rounded" width={18} height={18} />
                   </ActionIcon>
                   <ActionIcon
                     variant="light"
-                    aria-label={translate('saved.next', 'Next')}
-                    onClick={() => setActiveLocalStorageIndex(prev => Math.min(groupedSignatures.localStorage.length - 1, prev + 1))}
+                    aria-label={translate("saved.next", "Next")}
+                    onClick={() =>
+                      setActiveLocalStorageIndex((prev) => Math.min(groupedSignatures.localStorage.length - 1, prev + 1))
+                    }
                     disabled={disabled || activeLocalStorageIndex >= groupedSignatures.localStorage.length - 1}
                   >
                     <LocalIcon icon="chevron-right-rounded" width={18} height={18} />
@@ -453,11 +455,11 @@ export const SavedSignaturesSection = ({
                       >
                         <LocalIcon icon="check-circle-outline-rounded" width={18} height={18} />
                       </ActionIcon>
-                      <Tooltip label={translate('saved.delete', 'Remove')}>
+                      <Tooltip label={translate("saved.delete", "Remove")}>
                         <ActionIcon
                           variant="subtle"
                           color="red"
-                          aria-label={translate('saved.delete', 'Remove')}
+                          aria-label={translate("saved.delete", "Remove")}
                           onClick={() => onDeleteSignature(activeLocalStorageSignature)}
                           disabled={disabled}
                         >
@@ -468,11 +470,11 @@ export const SavedSignaturesSection = ({
                   </Group>
                   {renderPreview(activeLocalStorageSignature)}
                   <TextInput
-                    label={translate('saved.label', 'Label')}
+                    label={translate("saved.label", "Label")}
                     value={labelDrafts[activeLocalStorageSignature.id] ?? activeLocalStorageSignature.label}
-                    onChange={event => handleLabelChange(event, activeLocalStorageSignature)}
+                    onChange={(event) => handleLabelChange(event, activeLocalStorageSignature)}
                     onBlur={() => handleLabelBlur(activeLocalStorageSignature)}
-                    onKeyDown={event => handleLabelKeyDown(event, activeLocalStorageSignature)}
+                    onKeyDown={(event) => handleLabelKeyDown(event, activeLocalStorageSignature)}
                     disabled={disabled}
                   />
                 </Stack>
diff --git a/frontend/src/core/components/tools/sign/SignSettings.tsx b/frontend/src/core/components/tools/sign/SignSettings.tsx
index 921091eca2..fee7fb8bfc 100644
--- a/frontend/src/core/components/tools/sign/SignSettings.tsx
+++ b/frontend/src/core/components/tools/sign/SignSettings.tsx
@@ -1,11 +1,11 @@
-import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
+import { useState, useEffect, useMemo, useRef, useCallback } from "react";
 import { useTranslation } from "react-i18next";
-import { Stack, Button, Text, Alert, SegmentedControl, Divider, ActionIcon, Tooltip, Group, Box } from '@mantine/core';
+import { Stack, Button, Text, Alert, SegmentedControl, Divider, ActionIcon, Tooltip, Group, Box } from "@mantine/core";
 import { SignParameters } from "@app/hooks/tools/sign/useSignParameters";
 import { SuggestedToolsSection } from "@app/components/tools/shared/SuggestedToolsSection";
 import { useSignature } from "@app/contexts/SignatureContext";
 import { useViewer } from "@app/contexts/ViewerContext";
-import { PLACEMENT_ACTIVATION_DELAY, FILE_SWITCH_ACTIVATION_DELAY } from '@app/constants/signConstants';
+import { PLACEMENT_ACTIVATION_DELAY, FILE_SWITCH_ACTIVATION_DELAY } from "@app/constants/signConstants";
 
 // Import the new reusable components
 import { DrawingCanvas } from "@app/components/annotation/shared/DrawingCanvas";
@@ -14,9 +14,15 @@ import { ImageUploader } from "@app/components/annotation/shared/ImageUploader";
 import { TextInputWithFont } from "@app/components/annotation/shared/TextInputWithFont";
 import { ColorPicker } from "@app/components/annotation/shared/ColorPicker";
 import { LocalIcon } from "@app/components/shared/LocalIcon";
-import { useSavedSignatures, SavedSignature, SavedSignaturePayload, SavedSignatureType, AddSignatureResult } from '@app/hooks/tools/sign/useSavedSignatures';
-import { SavedSignaturesSection } from '@app/components/tools/sign/SavedSignaturesSection';
-import { buildSignaturePreview } from '@app/utils/signaturePreview';
+import {
+  useSavedSignatures,
+  SavedSignature,
+  SavedSignaturePayload,
+  SavedSignatureType,
+  AddSignatureResult,
+} from "@app/hooks/tools/sign/useSavedSignatures";
+import { SavedSignaturesSection } from "@app/components/tools/sign/SavedSignaturesSection";
+import { buildSignaturePreview } from "@app/utils/signaturePreview";
 
 type SignatureDrafts = {
   canvas?: string;
@@ -45,9 +51,9 @@ interface SignSettingsProps {
   defaultSignatureSource?: SignatureSource;
 }
 
-export type SignatureSource = 'canvas' | 'image' | 'text' | 'saved';
+export type SignatureSource = "canvas" | "image" | "text" | "saved";
 
-const DEFAULT_SIGNATURE_SOURCES: SignatureSource[] = ['canvas', 'image', 'text', 'saved'];
+const DEFAULT_SIGNATURE_SOURCES: SignatureSource[] = ["canvas", "image", "text", "saved"];
 
 const SignSettings = ({
   parameters,
@@ -59,7 +65,7 @@ const SignSettings = ({
   onUndo,
   onRedo,
   onSave,
-  translationScope = 'sign',
+  translationScope = "sign",
   allowedSignatureSources = DEFAULT_SIGNATURE_SOURCES,
   defaultSignatureSource,
 }: SignSettingsProps) => {
@@ -71,18 +77,18 @@ const SignSettings = ({
   const translate = useCallback(
     (key: string, defaultValue: string, options?: Record<string, unknown>) =>
       t(`${translationScope}.${key}`, { defaultValue, ...options }),
-    [t, translationScope]
+    [t, translationScope],
   );
   const effectiveDefaultSource =
     (defaultSignatureSource && allowedSignatureSources.includes(defaultSignatureSource)
       ? defaultSignatureSource
-      : allowedSignatureSources[0]) ?? 'text';
-  const canUseSavedLibrary = allowedSignatureSources.includes('saved');
+      : allowedSignatureSources[0]) ?? "text";
+  const canUseSavedLibrary = allowedSignatureSources.includes("saved");
 
   // State for drawing
-  const [selectedColor, setSelectedColor] = useState('#000000');
+  const [selectedColor, setSelectedColor] = useState("#000000");
   const [penSize, setPenSize] = useState(2);
-  const [penSizeInput, setPenSizeInput] = useState('2');
+  const [penSizeInput, setPenSizeInput] = useState("2");
   const [isColorPickerOpen, setIsColorPickerOpen] = useState(false);
   const [isPlacementManuallyPaused, setPlacementManuallyPaused] = useState(false);
 
@@ -90,7 +96,7 @@ const SignSettings = ({
   const [canvasSignatureData, setCanvasSignatureData] = useState<string | undefined>();
   const [imageSignatureData, setImageSignatureData] = useState<string | undefined>();
   const [signatureDrafts, setSignatureDrafts] = useState<SignatureDrafts>({});
-  const lastSyncedTextDraft = useRef<SignatureDrafts['text'] | null>(null);
+  const lastSyncedTextDraft = useRef<SignatureDrafts["text"] | null>(null);
   const lastAppliedPlacementKey = useRef<string | null>(null);
   const previousFileIndexRef = useRef(activeFileIndex);
   const {
@@ -125,124 +131,145 @@ const SignSettings = ({
         fontFamily,
         textColor,
       }),
-    []
+    [],
   );
 
   const getDefaultSavedLabel = useCallback(
     (type: SavedSignatureType) => {
       const nextIndex = (byTypeCounts[type] ?? 0) + 1;
-      let baseLabel = translate('saved.defaultLabel', 'Signature');
-      if (type === 'canvas') {
-        baseLabel = translate('saved.defaultCanvasLabel', 'Drawing signature');
-      } else if (type === 'image') {
-        baseLabel = translate('saved.defaultImageLabel', 'Uploaded signature');
-      } else if (type === 'text') {
-        baseLabel = translate('saved.defaultTextLabel', 'Typed signature');
+      let baseLabel = translate("saved.defaultLabel", "Signature");
+      if (type === "canvas") {
+        baseLabel = translate("saved.defaultCanvasLabel", "Drawing signature");
+      } else if (type === "image") {
+        baseLabel = translate("saved.defaultImageLabel", "Uploaded signature");
+      } else if (type === "text") {
+        baseLabel = translate("saved.defaultTextLabel", "Typed signature");
       }
       return `${baseLabel} ${nextIndex}`;
     },
-    [byTypeCounts, t, translate]
+    [byTypeCounts, t, translate],
   );
 
   const signatureKeysByType = useMemo(() => {
     const canvasKey = canvasSignatureData ?? null;
     const imageKey = imageSignatureData ?? null;
     const textKey = buildTextSignatureKey(
-      parameters.signerName ?? '',
+      parameters.signerName ?? "",
       parameters.fontSize ?? 16,
-      parameters.fontFamily ?? 'Helvetica',
-      parameters.textColor ?? '#000000'
+      parameters.fontFamily ?? "Helvetica",
+      parameters.textColor ?? "#000000",
     );
     return {
       canvas: canvasKey,
       image: imageKey,
       text: textKey,
     };
-  }, [canvasSignatureData, imageSignatureData, buildTextSignatureKey, parameters.signerName, parameters.fontSize, parameters.fontFamily, parameters.textColor]);
+  }, [
+    canvasSignatureData,
+    imageSignatureData,
+    buildTextSignatureKey,
+    parameters.signerName,
+    parameters.fontSize,
+    parameters.fontFamily,
+    parameters.textColor,
+  ]);
 
   const saveSignatureToLibrary = useCallback(
-    async (payload: SavedSignaturePayload, type: SavedSignatureType, scope: 'personal' | 'shared'): Promise<AddSignatureResult> => {
+    async (
+      payload: SavedSignaturePayload,
+      type: SavedSignatureType,
+      scope: "personal" | "shared",
+    ): Promise<AddSignatureResult> => {
       if (isSavedSignatureLimitReached) {
-        return { success: false, reason: 'limit' };
+        return { success: false, reason: "limit" };
       }
       return await addSignature(payload, getDefaultSavedLabel(type), scope);
     },
-    [addSignature, getDefaultSavedLabel, isSavedSignatureLimitReached]
+    [addSignature, getDefaultSavedLabel, isSavedSignatureLimitReached],
   );
 
   const setLastSavedKeyForType = useCallback(
     (type: SavedSignatureType, explicitKey?: string | null) => {
-      setLastSavedSignatureKeys(prev => ({
+      setLastSavedSignatureKeys((prev) => ({
         ...prev,
-        [type]: explicitKey !== undefined ? explicitKey : signatureKeysByType[type] ?? null,
+        [type]: explicitKey !== undefined ? explicitKey : (signatureKeysByType[type] ?? null),
       }));
     },
-    [signatureKeysByType]
+    [signatureKeysByType],
   );
 
-  const handleSaveCanvasSignature = useCallback(async (scope: 'personal' | 'shared') => {
-    if (!canvasSignatureData) {
-      return;
-    }
-    const result = await saveSignatureToLibrary({ type: 'canvas', dataUrl: canvasSignatureData }, 'canvas', scope);
-    if (result.success) {
-      setLastSavedKeyForType('canvas');
-    }
-  }, [canvasSignatureData, saveSignatureToLibrary, setLastSavedKeyForType]);
+  const handleSaveCanvasSignature = useCallback(
+    async (scope: "personal" | "shared") => {
+      if (!canvasSignatureData) {
+        return;
+      }
+      const result = await saveSignatureToLibrary({ type: "canvas", dataUrl: canvasSignatureData }, "canvas", scope);
+      if (result.success) {
+        setLastSavedKeyForType("canvas");
+      }
+    },
+    [canvasSignatureData, saveSignatureToLibrary, setLastSavedKeyForType],
+  );
 
-  const handleSaveImageSignature = useCallback(async (scope: 'personal' | 'shared') => {
-    if (!imageSignatureData) {
-      return;
-    }
-    const result = await saveSignatureToLibrary({ type: 'image', dataUrl: imageSignatureData }, 'image', scope);
-    if (result.success) {
-      setLastSavedKeyForType('image');
-    }
-  }, [imageSignatureData, saveSignatureToLibrary, setLastSavedKeyForType]);
+  const handleSaveImageSignature = useCallback(
+    async (scope: "personal" | "shared") => {
+      if (!imageSignatureData) {
+        return;
+      }
+      const result = await saveSignatureToLibrary({ type: "image", dataUrl: imageSignatureData }, "image", scope);
+      if (result.success) {
+        setLastSavedKeyForType("image");
+      }
+    },
+    [imageSignatureData, saveSignatureToLibrary, setLastSavedKeyForType],
+  );
 
-  const handleSaveTextSignature = useCallback(async (scope: 'personal' | 'shared') => {
-    const signerName = (parameters.signerName ?? '').trim();
-    if (!signerName) {
-      return;
-    }
+  const handleSaveTextSignature = useCallback(
+    async (scope: "personal" | "shared") => {
+      const signerName = (parameters.signerName ?? "").trim();
+      if (!signerName) {
+        return;
+      }
 
-    // Generate image from text signature
-    const preview = await buildSignaturePreview({
-      signatureType: 'text',
-      signerName,
-      fontFamily: parameters.fontFamily ?? 'Helvetica',
-      fontSize: parameters.fontSize ?? 16,
-      textColor: parameters.textColor ?? '#000000',
-    });
-
-    if (!preview?.dataUrl) {
-      console.error('Failed to generate text signature preview');
-      return;
-    }
-
-    const result = await saveSignatureToLibrary(
-      {
-        type: 'text',
-        dataUrl: preview.dataUrl,
+      // Generate image from text signature
+      const preview = await buildSignaturePreview({
+        signatureType: "text",
         signerName,
-        fontFamily: parameters.fontFamily ?? 'Helvetica',
+        fontFamily: parameters.fontFamily ?? "Helvetica",
         fontSize: parameters.fontSize ?? 16,
-        textColor: parameters.textColor ?? '#000000',
-      },
-      'text',
-      scope
-    );
-    if (result.success) {
-      setLastSavedKeyForType('text');
-    }
-  }, [
-    parameters.fontFamily,
-    parameters.fontSize,
-    parameters.signerName,
-    parameters.textColor,
-    saveSignatureToLibrary,
-    setLastSavedKeyForType,
-  ]);
+        textColor: parameters.textColor ?? "#000000",
+      });
+
+      if (!preview?.dataUrl) {
+        console.error("Failed to generate text signature preview");
+        return;
+      }
+
+      const result = await saveSignatureToLibrary(
+        {
+          type: "text",
+          dataUrl: preview.dataUrl,
+          signerName,
+          fontFamily: parameters.fontFamily ?? "Helvetica",
+          fontSize: parameters.fontSize ?? 16,
+          textColor: parameters.textColor ?? "#000000",
+        },
+        "text",
+        scope,
+      );
+      if (result.success) {
+        setLastSavedKeyForType("text");
+      }
+    },
+    [
+      parameters.fontFamily,
+      parameters.fontSize,
+      parameters.signerName,
+      parameters.textColor,
+      saveSignatureToLibrary,
+      setLastSavedKeyForType,
+    ],
+  );
 
   const handleUseSavedSignature = useCallback(
     (signature: SavedSignature) => {
@@ -251,34 +278,34 @@ const SignSettings = ({
       // Use the data URL directly (already converted to base64 when loaded)
       const dataUrlToUse = signature.dataUrl;
 
-      if (signature.type === 'canvas') {
-        if (parameters.signatureType !== 'canvas') {
-          onParameterChange('signatureType', 'canvas');
+      if (signature.type === "canvas") {
+        if (parameters.signatureType !== "canvas") {
+          onParameterChange("signatureType", "canvas");
         }
         setCanvasSignatureData(dataUrlToUse);
-      } else if (signature.type === 'image') {
-        if (parameters.signatureType !== 'image') {
-          onParameterChange('signatureType', 'image');
+      } else if (signature.type === "image") {
+        if (parameters.signatureType !== "image") {
+          onParameterChange("signatureType", "image");
         }
         setImageSignatureData(dataUrlToUse);
-      } else if (signature.type === 'text') {
-        if (parameters.signatureType !== 'text') {
-          onParameterChange('signatureType', 'text');
+      } else if (signature.type === "text") {
+        if (parameters.signatureType !== "text") {
+          onParameterChange("signatureType", "text");
         }
-        onParameterChange('signerName', signature.signerName);
-        onParameterChange('fontFamily', signature.fontFamily);
-        onParameterChange('fontSize', signature.fontSize);
-        onParameterChange('textColor', signature.textColor);
+        onParameterChange("signerName", signature.signerName);
+        onParameterChange("fontFamily", signature.fontFamily);
+        onParameterChange("fontSize", signature.fontSize);
+        onParameterChange("textColor", signature.textColor);
       }
 
       const savedKey =
-        signature.type === 'text'
+        signature.type === "text"
           ? buildTextSignatureKey(signature.signerName, signature.fontSize, signature.fontFamily, signature.textColor)
           : dataUrlToUse;
       setLastSavedKeyForType(signature.type, savedKey);
 
       const activate = () => onActivateSignaturePlacement?.();
-      if (typeof window !== 'undefined') {
+      if (typeof window !== "undefined") {
         window.setTimeout(activate, PLACEMENT_ACTIVATION_DELAY);
       } else {
         activate();
@@ -293,24 +320,31 @@ const SignSettings = ({
       setImageSignatureData,
       setPlacementManuallyPaused,
       setLastSavedKeyForType,
-    ]
+    ],
   );
 
   const handleDeleteSavedSignature = useCallback(
     (signature: SavedSignature) => {
       removeSignature(signature.id);
     },
-    [removeSignature]
+    [removeSignature],
   );
 
   const handleRenameSavedSignature = useCallback(
     (id: string, label: string) => {
       updateSignatureLabel(id, label);
     },
-    [updateSignatureLabel]
+    [updateSignatureLabel],
   );
 
-  const renderSaveButton = (type: SavedSignatureType, isReady: boolean, onClick: (scope: 'personal' | 'shared') => void, scope: 'personal' | 'shared', icon: string, label: string) => {
+  const renderSaveButton = (
+    type: SavedSignatureType,
+    isReady: boolean,
+    onClick: (scope: "personal" | "shared") => void,
+    scope: "personal" | "shared",
+    icon: string,
+    label: string,
+  ) => {
     if (!canUseSavedLibrary) {
       return null;
     }
@@ -320,27 +354,31 @@ const SignSettings = ({
     const isSaved = isReady && !hasChanges;
 
     // Only show backend storage buttons when backend is available
-    const showButton = storageType === 'backend' || storageType === null;
+    const showButton = storageType === "backend" || storageType === null;
     if (!showButton) {
       return null;
     }
 
     let tooltipMessage: string | undefined;
     if (!isReady) {
-      tooltipMessage = translate('saved.saveUnavailable', 'Create a signature first to save it.');
+      tooltipMessage = translate("saved.saveUnavailable", "Create a signature first to save it.");
     } else if (isSaved) {
-      tooltipMessage = translate('saved.noChanges', 'Current signature is already saved.');
+      tooltipMessage = translate("saved.noChanges", "Current signature is already saved.");
     } else if (isSavedSignatureLimitReached) {
-      tooltipMessage = translate('saved.limitDescription', 'You have reached the maximum limit of {{max}} saved signatures. Remove a saved signature before adding new ones.', {
-        max: maxLimit,
-      });
+      tooltipMessage = translate(
+        "saved.limitDescription",
+        "You have reached the maximum limit of {{max}} saved signatures. Remove a saved signature before adding new ones.",
+        {
+          max: maxLimit,
+        },
+      );
     }
 
     const button = (
       <Button
         size="xs"
         variant="outline"
-        color={isSaved ? 'green' : undefined}
+        color={isSaved ? "green" : undefined}
         onClick={() => onClick(scope)}
         disabled={!isReady || disabled || isSavedSignatureLimitReached || !hasChanges}
         leftSection={<LocalIcon icon={icon} width={16} height={16} />}
@@ -352,7 +390,7 @@ const SignSettings = ({
     if (tooltipMessage) {
       return (
         <Tooltip label={tooltipMessage}>
-          <span style={{ display: 'inline-block' }}>{button}</span>
+          <span style={{ display: "inline-block" }}>{button}</span>
         </Tooltip>
       );
     }
@@ -360,7 +398,11 @@ const SignSettings = ({
     return button;
   };
 
-  const renderSaveButtonRow = (type: SavedSignatureType, isReady: boolean, onClick: (scope: 'personal' | 'shared') => void) => {
+  const renderSaveButtonRow = (
+    type: SavedSignatureType,
+    isReady: boolean,
+    onClick: (scope: "personal" | "shared") => void,
+  ) => {
     if (!canUseSavedLibrary) {
       return null;
     }
@@ -369,18 +411,18 @@ const SignSettings = ({
       type,
       isReady,
       onClick,
-      'personal',
-      'person-rounded',
-      translate('saved.savePersonal', 'Save Personal')
+      "personal",
+      "person-rounded",
+      translate("saved.savePersonal", "Save Personal"),
     );
 
     const sharedButton = renderSaveButton(
       type,
       isReady,
       onClick,
-      'shared',
-      'groups-rounded',
-      translate('saved.saveShared', 'Save Shared')
+      "shared",
+      "groups-rounded",
+      translate("saved.saveShared", "Save Shared"),
     );
 
     if (!personalButton && !sharedButton) {
@@ -388,7 +430,7 @@ const SignSettings = ({
     }
 
     return (
-      <Group gap="xs" style={{ alignSelf: 'flex-start', marginTop: '0.4rem' }}>
+      <Group gap="xs" style={{ alignSelf: "flex-start", marginTop: "0.4rem" }}>
         {personalButton}
         {sharedButton}
       </Group>
@@ -396,11 +438,11 @@ const SignSettings = ({
   };
 
   useEffect(() => {
-    if (signatureSource === 'saved' && !canUseSavedLibrary) {
+    if (signatureSource === "saved" && !canUseSavedLibrary) {
       setSignatureSource(effectiveDefaultSource);
       return;
     }
-    if (signatureSource === 'saved') {
+    if (signatureSource === "saved") {
       return;
     }
     const nextSource = allowedSignatureSources.includes(parameters.signatureType as SignatureSource)
@@ -420,14 +462,14 @@ const SignSettings = ({
   const handleSignatureSourceChange = useCallback(
     (value: SignatureSource) => {
       setSignatureSource(value);
-      if (value === 'saved') {
+      if (value === "saved") {
         return;
       }
       if (parameters.signatureType !== value) {
-        onParameterChange('signatureType', value);
+        onParameterChange("signatureType", value);
       }
     },
-    [onParameterChange, parameters.signatureType]
+    [onParameterChange, parameters.signatureType],
   );
 
   useEffect(() => {
@@ -470,13 +512,13 @@ const SignSettings = ({
         // try to set the image data, potentially with the wrong version
 
         // Directly activate placement on image upload
-        if (typeof window !== 'undefined') {
+        if (typeof window !== "undefined") {
           window.setTimeout(() => onActivateSignaturePlacement?.(), PLACEMENT_ACTIVATION_DELAY);
         } else {
           onActivateSignaturePlacement?.();
         }
       } catch (error) {
-        console.error('Error reading file:', error);
+        console.error("Error reading file:", error);
       }
     } else if (!file) {
       setImageSignatureData(undefined);
@@ -485,41 +527,44 @@ const SignSettings = ({
   };
 
   // Handle signature data changes
-  const handleCanvasSignatureChange = useCallback((data: string | null) => {
-    const nextValue = data ?? undefined;
-    setCanvasSignatureData(prevData => {
-      // Reset pause state and trigger placement for signature changes
-      // (onDrawingComplete handles initial activation)
-      if (prevData && prevData !== nextValue && nextValue) {
-        setPlacementManuallyPaused(false);
-        lastAppliedPlacementKey.current = null;
-        // Directly activate placement on signature change
-        if (typeof window !== 'undefined') {
-          window.setTimeout(() => onActivateSignaturePlacement?.(), PLACEMENT_ACTIVATION_DELAY);
-        } else {
-          onActivateSignaturePlacement?.();
+  const handleCanvasSignatureChange = useCallback(
+    (data: string | null) => {
+      const nextValue = data ?? undefined;
+      setCanvasSignatureData((prevData) => {
+        // Reset pause state and trigger placement for signature changes
+        // (onDrawingComplete handles initial activation)
+        if (prevData && prevData !== nextValue && nextValue) {
+          setPlacementManuallyPaused(false);
+          lastAppliedPlacementKey.current = null;
+          // Directly activate placement on signature change
+          if (typeof window !== "undefined") {
+            window.setTimeout(() => onActivateSignaturePlacement?.(), PLACEMENT_ACTIVATION_DELAY);
+          } else {
+            onActivateSignaturePlacement?.();
+          }
         }
-      }
-      return nextValue;
-    });
-  }, [onActivateSignaturePlacement]);
+        return nextValue;
+      });
+    },
+    [onActivateSignaturePlacement],
+  );
 
   const hasCanvasSignature = useMemo(() => Boolean(canvasSignatureData), [canvasSignatureData]);
   const hasImageSignature = useMemo(() => Boolean(imageSignatureData), [imageSignatureData]);
   const hasTextSignature = useMemo(
-    () => Boolean(parameters.signerName && parameters.signerName.trim() !== ''),
-    [parameters.signerName]
+    () => Boolean(parameters.signerName && parameters.signerName.trim() !== ""),
+    [parameters.signerName],
   );
 
   const hasAnySignature = hasCanvasSignature || hasImageSignature || hasTextSignature;
 
   const isCurrentTypeReady = useMemo(() => {
     switch (parameters.signatureType) {
-      case 'canvas':
+      case "canvas":
         return hasCanvasSignature;
-      case 'image':
+      case "image":
         return hasImageSignature;
-      case 'text':
+      case "text":
         return hasTextSignature;
       default:
         return false;
@@ -541,7 +586,7 @@ const SignSettings = ({
   const shouldAutoActivate = shouldEnablePlacement && !isPlacementManuallyPaused && !signaturesApplied;
 
   useEffect(() => {
-    setSignatureDrafts(prev => {
+    setSignatureDrafts((prev) => {
       if (canvasSignatureData) {
         if (prev.canvas === canvasSignatureData) {
           return prev;
@@ -560,7 +605,7 @@ const SignSettings = ({
   }, [canvasSignatureData]);
 
   useEffect(() => {
-    setSignatureDrafts(prev => {
+    setSignatureDrafts((prev) => {
       if (imageSignatureData) {
         if (prev.image === imageSignatureData) {
           return prev;
@@ -580,13 +625,13 @@ const SignSettings = ({
 
   useEffect(() => {
     const nextDraft = {
-      signerName: parameters.signerName || '',
+      signerName: parameters.signerName || "",
       fontSize: parameters.fontSize || 16,
-      fontFamily: parameters.fontFamily || 'Helvetica',
-      textColor: parameters.textColor || '#000000',
+      fontFamily: parameters.fontFamily || "Helvetica",
+      textColor: parameters.textColor || "#000000",
     };
 
-    setSignatureDrafts(prev => {
+    setSignatureDrafts((prev) => {
       const prevDraft = prev.text;
       if (
         prevDraft &&
@@ -603,17 +648,17 @@ const SignSettings = ({
   }, [parameters.signerName, parameters.fontSize, parameters.fontFamily, parameters.textColor]);
 
   useEffect(() => {
-    if (parameters.signatureType === 'text') {
+    if (parameters.signatureType === "text") {
       const draft = signatureDrafts.text;
       if (!draft) {
         lastSyncedTextDraft.current = null;
         return;
       }
 
-      const currentSignerName = parameters.signerName ?? '';
+      const currentSignerName = parameters.signerName ?? "";
       const currentFontSize = parameters.fontSize ?? 16;
-      const currentFontFamily = parameters.fontFamily ?? 'Helvetica';
-      const currentTextColor = parameters.textColor ?? '#000000';
+      const currentFontFamily = parameters.fontFamily ?? "Helvetica";
+      const currentTextColor = parameters.textColor ?? "#000000";
 
       const isSynced =
         draft.signerName === currentSignerName &&
@@ -637,16 +682,16 @@ const SignSettings = ({
       if (!alreadyAttempted) {
         lastSyncedTextDraft.current = draft;
         if (draft.signerName !== currentSignerName) {
-          onParameterChange('signerName', draft.signerName);
+          onParameterChange("signerName", draft.signerName);
         }
         if (draft.fontSize !== currentFontSize) {
-          onParameterChange('fontSize', draft.fontSize);
+          onParameterChange("fontSize", draft.fontSize);
         }
         if (draft.fontFamily !== currentFontFamily) {
-          onParameterChange('fontFamily', draft.fontFamily);
+          onParameterChange("fontFamily", draft.fontFamily);
         }
         if (draft.textColor !== currentTextColor) {
-          onParameterChange('textColor', draft.textColor);
+          onParameterChange("textColor", draft.textColor);
         }
       }
     } else {
@@ -665,14 +710,14 @@ const SignSettings = ({
   useEffect(() => {
     let newSignatureData: string | undefined = undefined;
 
-    if (parameters.signatureType === 'image' && imageSignatureData) {
+    if (parameters.signatureType === "image" && imageSignatureData) {
       newSignatureData = imageSignatureData;
-    } else if (parameters.signatureType === 'canvas' && canvasSignatureData) {
+    } else if (parameters.signatureType === "canvas" && canvasSignatureData) {
       newSignatureData = canvasSignatureData;
     }
 
     if (parameters.signatureData !== newSignatureData) {
-      onParameterChange('signatureData', newSignatureData);
+      onParameterChange("signatureData", newSignatureData);
     }
   }, [parameters.signatureType, parameters.signatureData, canvasSignatureData, imageSignatureData, onParameterChange]);
 
@@ -691,7 +736,7 @@ const SignSettings = ({
       return;
     }
 
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       const timer = window.setTimeout(() => {
         onActivateSignaturePlacement?.();
       }, PLACEMENT_ACTIVATION_DELAY);
@@ -731,7 +776,7 @@ const SignSettings = ({
       lastAppliedPlacementKey.current = placementSignatureKey;
     };
 
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       const timer = window.setTimeout(trigger, PLACEMENT_ACTIVATION_DELAY);
       return () => window.clearTimeout(timer);
     }
@@ -752,7 +797,7 @@ const SignSettings = ({
     setPlacementManuallyPaused(false);
     lastAppliedPlacementKey.current = null;
 
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       const timer = window.setTimeout(() => {
         onActivateSignaturePlacement?.();
       }, FILE_SWITCH_ACTIVATION_DELAY);
@@ -763,19 +808,19 @@ const SignSettings = ({
   }, [activeFileIndex, shouldEnablePlacement, signaturesApplied, onActivateSignaturePlacement]);
 
   const sourceLabels: Record<SignatureSource, string> = {
-    canvas: translate('type.canvas', 'Draw'),
-    image: translate('type.image', 'Upload'),
-    text: translate('type.text', 'Type'),
-    saved: translate('type.saved', 'Saved'),
+    canvas: translate("type.canvas", "Draw"),
+    image: translate("type.image", "Upload"),
+    text: translate("type.text", "Type"),
+    saved: translate("type.saved", "Saved"),
   };
 
-  const sourceOptions = allowedSignatureSources.map(source => ({
+  const sourceOptions = allowedSignatureSources.map((source) => ({
     label: sourceLabels[source],
     value: source,
   }));
 
   const renderSignatureBuilder = () => {
-    if (signatureSource === 'saved') {
+    if (signatureSource === "saved") {
       if (!canUseSavedLibrary) {
         return null;
       }
@@ -795,7 +840,7 @@ const SignSettings = ({
       );
     }
 
-    if (signatureSource === 'canvas') {
+    if (signatureSource === "canvas") {
       return (
         <Stack gap="xs">
           <DrawingCanvas
@@ -812,12 +857,12 @@ const SignSettings = ({
             disabled={disabled}
             initialSignatureData={canvasSignatureData}
           />
-          {renderSaveButtonRow('canvas', hasCanvasSignature, handleSaveCanvasSignature)}
+          {renderSaveButtonRow("canvas", hasCanvasSignature, handleSaveCanvasSignature)}
         </Stack>
       );
     }
 
-    if (signatureSource === 'image') {
+    if (signatureSource === "image") {
       return (
         <Stack gap="xs">
           <ImageUploader
@@ -830,7 +875,7 @@ const SignSettings = ({
               }
             }}
           />
-          {renderSaveButtonRow('image', hasImageSignature, handleSaveImageSignature)}
+          {renderSaveButtonRow("image", hasImageSignature, handleSaveImageSignature)}
         </Stack>
       );
     }
@@ -838,76 +883,70 @@ const SignSettings = ({
     return (
       <Stack gap="xs">
         <TextInputWithFont
-          text={parameters.signerName || ''}
-          onTextChange={(text) => onParameterChange('signerName', text)}
+          text={parameters.signerName || ""}
+          onTextChange={(text) => onParameterChange("signerName", text)}
           fontSize={parameters.fontSize || 16}
-          onFontSizeChange={(size) => onParameterChange('fontSize', size)}
-          fontFamily={parameters.fontFamily || 'Helvetica'}
-          onFontFamilyChange={(family) => onParameterChange('fontFamily', family)}
-          textColor={parameters.textColor || '#000000'}
-          onTextColorChange={(color) => onParameterChange('textColor', color)}
+          onFontSizeChange={(size) => onParameterChange("fontSize", size)}
+          fontFamily={parameters.fontFamily || "Helvetica"}
+          onFontFamilyChange={(family) => onParameterChange("fontFamily", family)}
+          textColor={parameters.textColor || "#000000"}
+          onTextColorChange={(color) => onParameterChange("textColor", color)}
           disabled={disabled}
-          label={translate('text.name', 'Text')}
-          placeholder={translate('text.placeholder', 'Enter text')}
-          fontLabel={translate('text.fontLabel', 'Font')}
-          fontSizeLabel={translate('text.fontSizeLabel', 'Font size')}
-          fontSizePlaceholder={translate('text.fontSizePlaceholder', 'Type or select font size (8-200)')}
-          colorLabel={translate('text.colorLabel', 'Text colour')}
+          label={translate("text.name", "Text")}
+          placeholder={translate("text.placeholder", "Enter text")}
+          fontLabel={translate("text.fontLabel", "Font")}
+          fontSizeLabel={translate("text.fontSizeLabel", "Font size")}
+          fontSizePlaceholder={translate("text.fontSizePlaceholder", "Type or select font size (8-200)")}
+          colorLabel={translate("text.colorLabel", "Text colour")}
           onAnyChange={() => {
             setPlacementManuallyPaused(false);
             lastAppliedPlacementKey.current = null;
             // Directly activate placement on text changes
-            if (typeof window !== 'undefined') {
+            if (typeof window !== "undefined") {
               window.setTimeout(() => onActivateSignaturePlacement?.(), PLACEMENT_ACTIVATION_DELAY);
             } else {
               onActivateSignaturePlacement?.();
             }
           }}
         />
-        {renderSaveButtonRow('text', hasTextSignature, handleSaveTextSignature)}
+        {renderSaveButtonRow("text", hasTextSignature, handleSaveTextSignature)}
       </Stack>
     );
   };
 
   const placementInstructions = () => {
-    if (signatureSource === 'saved') {
+    if (signatureSource === "saved") {
+      return translate("instructions.saved", "Select a saved signature above, then click anywhere on the PDF to place it.");
+    }
+    if (parameters.signatureType === "canvas") {
       return translate(
-        'instructions.saved',
-        'Select a saved signature above, then click anywhere on the PDF to place it.'
+        "instructions.canvas",
+        "After drawing your signature and closing the canvas, click anywhere on the PDF to place it.",
       );
     }
-    if (parameters.signatureType === 'canvas') {
-      return translate(
-        'instructions.canvas',
-        'After drawing your signature and closing the canvas, click anywhere on the PDF to place it.'
-      );
-    }
-    if (parameters.signatureType === 'image') {
-      return translate(
-        'instructions.image',
-        'After uploading your signature image, click anywhere on the PDF to place it.'
-      );
+    if (parameters.signatureType === "image") {
+      return translate("instructions.image", "After uploading your signature image, click anywhere on the PDF to place it.");
     }
     return translate(
-      'instructions.text',
-      'After entering your name above, click anywhere on the PDF to place your signature.'
+      "instructions.text",
+      "After entering your name above, click anywhere on the PDF to place your signature.",
     );
   };
 
   const placementAlert = isCurrentTypeReady
     ? {
-        color: isPlacementMode ? 'blue' : 'teal',
+        color: isPlacementMode ? "blue" : "teal",
         title: isPlacementMode
-          ? translate('instructions.title', 'How to add your signature')
-          : translate('instructions.paused', 'Placement paused'),
+          ? translate("instructions.title", "How to add your signature")
+          : translate("instructions.paused", "Placement paused"),
         message: isPlacementMode
           ? placementInstructions()
-          : translate('instructions.resumeHint', 'Resume placement to click and add your signature.'),
+          : translate("instructions.resumeHint", "Resume placement to click and add your signature."),
       }
     : {
-        color: 'yellow',
-        title: translate('instructions.title', 'How to add your signature'),
-        message: translate('instructions.noSignature', 'Create a signature above to enable placement tools.'),
+        color: "yellow",
+        title: translate("instructions.title", "How to add your signature"),
+        message: translate("instructions.noSignature", "Create a signature above to enable placement tools."),
       };
 
   const handlePausePlacement = () => {
@@ -925,7 +964,7 @@ const SignSettings = ({
     if (!isCurrentTypeReady) return;
 
     const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
+      if (e.key === "Escape") {
         e.preventDefault();
         if (isPlacementMode) {
           handlePausePlacement();
@@ -935,66 +974,64 @@ const SignSettings = ({
       }
     };
 
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
   }, [isCurrentTypeReady, isPlacementMode, isPlacementManuallyPaused]);
 
   const placementToggleControl =
-    onActivateSignaturePlacement || onDeactivateSignature
-      ? isPlacementMode
-        ? (
-            <Tooltip label={translate('mode.pause', 'Pause placement')}>
-              <ActionIcon
-                variant="default"
-                size="lg"
-                aria-label={translate('mode.pause', 'Pause placement')}
-                onClick={handlePausePlacement}
-                disabled={disabled || !onDeactivateSignature}
-                style={{
-                  width: 'auto',
-                  paddingInline: '0.75rem',
-                  display: 'inline-flex',
-                  alignItems: 'center',
-                  gap: '0.4rem',
-                }}
-              >
-                <LocalIcon icon="pause-rounded" width={20} height={20} />
-                <Text component="span" size="sm" fw={500}>
-                  {translate('mode.pause', 'Pause placement')}
-                </Text>
-              </ActionIcon>
-            </Tooltip>
-          )
-        : (
-            <Tooltip label={translate('mode.resume', 'Resume placement')}>
-              <ActionIcon
-                variant="default"
-                size="lg"
-                aria-label={translate('mode.resume', 'Resume placement')}
-                onClick={handleResumePlacement}
-                disabled={disabled || !isCurrentTypeReady || !onActivateSignaturePlacement}
-                style={{
-                  width: 'auto',
-                  paddingInline: '0.75rem',
-                  display: 'inline-flex',
-                  alignItems: 'center',
-                  gap: '0.4rem',
-                }}
-              >
-                <LocalIcon icon="play-arrow-rounded" width={20} height={20} />
-                <Text component="span" size="sm" fw={500}>
-                  {translate('mode.resume', 'Resume placement')}
-                </Text>
-              </ActionIcon>
-            </Tooltip>
-          )
-      : null;
+    onActivateSignaturePlacement || onDeactivateSignature ? (
+      isPlacementMode ? (
+        <Tooltip label={translate("mode.pause", "Pause placement")}>
+          <ActionIcon
+            variant="default"
+            size="lg"
+            aria-label={translate("mode.pause", "Pause placement")}
+            onClick={handlePausePlacement}
+            disabled={disabled || !onDeactivateSignature}
+            style={{
+              width: "auto",
+              paddingInline: "0.75rem",
+              display: "inline-flex",
+              alignItems: "center",
+              gap: "0.4rem",
+            }}
+          >
+            <LocalIcon icon="pause-rounded" width={20} height={20} />
+            <Text component="span" size="sm" fw={500}>
+              {translate("mode.pause", "Pause placement")}
+            </Text>
+          </ActionIcon>
+        </Tooltip>
+      ) : (
+        <Tooltip label={translate("mode.resume", "Resume placement")}>
+          <ActionIcon
+            variant="default"
+            size="lg"
+            aria-label={translate("mode.resume", "Resume placement")}
+            onClick={handleResumePlacement}
+            disabled={disabled || !isCurrentTypeReady || !onActivateSignaturePlacement}
+            style={{
+              width: "auto",
+              paddingInline: "0.75rem",
+              display: "inline-flex",
+              alignItems: "center",
+              gap: "0.4rem",
+            }}
+          >
+            <LocalIcon icon="play-arrow-rounded" width={20} height={20} />
+            <Text component="span" size="sm" fw={500}>
+              {translate("mode.resume", "Resume placement")}
+            </Text>
+          </ActionIcon>
+        </Tooltip>
+      )
+    ) : null;
 
   return (
     <Stack>
       <Stack gap="sm">
         <Text size="sm" c="dimmed">
-          {translate('step.createDesc', 'Choose how you want to create the signature')}
+          {translate("step.createDesc", "Choose how you want to create the signature")}
         </Text>
         {sourceOptions.length > 1 && (
           <SegmentedControl
@@ -1011,10 +1048,10 @@ const SignSettings = ({
 
       <Stack gap="sm">
         <Text fw={600} size="md">
-          {translate('step.place', 'Place & save')}
+          {translate("step.place", "Place & save")}
         </Text>
         <Text size="sm" c="dimmed">
-          {translate('step.placeDesc', 'Position the signature on your PDF')}
+          {translate("step.placeDesc", "Position the signature on your PDF")}
         </Text>
 
         <Group gap="xs" wrap="nowrap" align="center">
@@ -1027,17 +1064,12 @@ const SignSettings = ({
             disabled={disabled}
             showPlaceButton={false}
           />
-          <Box style={{ marginLeft: 'auto' }}>
-            {placementToggleControl}
-          </Box>
+          <Box style={{ marginLeft: "auto" }}>{placementToggleControl}</Box>
         </Group>
 
         <Alert color={placementAlert.color} title={placementAlert.title}>
-          <Text size="sm">
-            {placementAlert.message}
-          </Text>
+          <Text size="sm">{placementAlert.message}</Text>
         </Alert>
-
       </Stack>
 
       <ColorPicker
@@ -1045,17 +1077,12 @@ const SignSettings = ({
         onClose={() => setIsColorPickerOpen(false)}
         selectedColor={selectedColor}
         onColorChange={setSelectedColor}
-        title={translate('canvas.colorPickerTitle', 'Choose stroke colour')}
+        title={translate("canvas.colorPickerTitle", "Choose stroke colour")}
       />
 
       {onSave && (
-        <Button
-          onClick={onSave}
-          color="blue"
-          variant="filled"
-          fullWidth
-        >
-          {translate('applySignatures', 'Apply Signatures')}
+        <Button onClick={onSave} color="blue" variant="filled" fullWidth>
+          {translate("applySignatures", "Apply Signatures")}
         </Button>
       )}
 
diff --git a/frontend/src/core/components/tools/singleLargePage/SingleLargePageSettings.tsx b/frontend/src/core/components/tools/singleLargePage/SingleLargePageSettings.tsx
index dbd9ccb1a8..c22acb2acc 100644
--- a/frontend/src/core/components/tools/singleLargePage/SingleLargePageSettings.tsx
+++ b/frontend/src/core/components/tools/singleLargePage/SingleLargePageSettings.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { SingleLargePageParameters } from '@app/hooks/tools/singleLargePage/useSingleLargePageParameters';
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { SingleLargePageParameters } from "@app/hooks/tools/singleLargePage/useSingleLargePageParameters";
 
 interface SingleLargePageSettingsProps {
   parameters: SingleLargePageParameters;
@@ -14,7 +14,10 @@ const SingleLargePageSettings: React.FC<SingleLargePageSettingsProps> = (_) => {
   return (
     <div className="single-large-page-settings">
       <p className="text-muted">
-        {t('pdfToSinglePage.description', 'This tool will merge all pages of your PDF into one large single page. The width will remain the same as the original pages, but the height will be the sum of all page heights.')}
+        {t(
+          "pdfToSinglePage.description",
+          "This tool will merge all pages of your PDF into one large single page. The width will remain the same as the original pages, but the height will be the sum of all page heights.",
+        )}
       </p>
     </div>
   );
diff --git a/frontend/src/core/components/tools/split/SplitAutomationSettings.tsx b/frontend/src/core/components/tools/split/SplitAutomationSettings.tsx
index 7ae1971928..91b2f1e056 100644
--- a/frontend/src/core/components/tools/split/SplitAutomationSettings.tsx
+++ b/frontend/src/core/components/tools/split/SplitAutomationSettings.tsx
@@ -38,7 +38,7 @@ const SplitAutomationSettings = ({ parameters, onParameterChange, disabled = fal
         label={t("split.steps.chooseMethod", "Choose Method")}
         placeholder={t("split.selectMethod", "Select a split method")}
         value={parameters.method}
-        onChange={(value) => onParameterChange('method', value as SplitMethod | null)}
+        onChange={(value) => onParameterChange("method", value as SplitMethod | null)}
         data={methodSelectOptions}
         disabled={disabled}
         comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
@@ -50,11 +50,7 @@ const SplitAutomationSettings = ({ parameters, onParameterChange, disabled = fal
           <Text size="sm" fw={500}>
             {t("split.steps.settings", "Settings")}
           </Text>
-          <SplitSettings
-            parameters={parameters}
-            onParameterChange={onParameterChange}
-            disabled={disabled}
-          />
+          <SplitSettings parameters={parameters} onParameterChange={onParameterChange} disabled={disabled} />
         </>
       )}
     </Stack>
diff --git a/frontend/src/core/components/tools/split/SplitSettings.tsx b/frontend/src/core/components/tools/split/SplitSettings.tsx
index ee33210c87..652650b649 100644
--- a/frontend/src/core/components/tools/split/SplitSettings.tsx
+++ b/frontend/src/core/components/tools/split/SplitSettings.tsx
@@ -1,8 +1,8 @@
-import { Stack, TextInput, Checkbox, Anchor, Text, Select } from '@mantine/core';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { useTranslation } from 'react-i18next';
-import { SPLIT_METHODS } from '@app/constants/splitConstants';
-import { SplitParameters } from '@app/hooks/tools/split/useSplitParameters';
+import { Stack, TextInput, Checkbox, Anchor, Text, Select } from "@mantine/core";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { useTranslation } from "react-i18next";
+import { SPLIT_METHODS } from "@app/constants/splitConstants";
+import { SplitParameters } from "@app/hooks/tools/split/useSplitParameters";
 import { Z_INDEX_AUTOMATE_DROPDOWN } from "@app/styles/zIndex";
 
 export interface SplitSettingsProps {
@@ -11,11 +11,7 @@ export interface SplitSettingsProps {
   disabled?: boolean;
 }
 
-const SplitSettings = ({
-  parameters,
-  onParameterChange,
-  disabled = false
-}: SplitSettingsProps) => {
+const SplitSettings = ({ parameters, onParameterChange, disabled = false }: SplitSettingsProps) => {
   const { t } = useTranslation();
 
   const renderByPagesForm = () => (
@@ -23,7 +19,7 @@ const SplitSettings = ({
       label={t("split.splitPages", "Pages")}
       placeholder={t("pageSelectionPrompt", "e.g. 1,3,5-10")}
       value={parameters.pages}
-      onChange={(e) => onParameterChange('pages', e.target.value)}
+      onChange={(e) => onParameterChange("pages", e.target.value)}
       disabled={disabled}
     />
   );
@@ -36,7 +32,7 @@ const SplitSettings = ({
         min="0"
         max="300"
         value={parameters.hDiv}
-        onChange={(e) => onParameterChange('hDiv', e.target.value)}
+        onChange={(e) => onParameterChange("hDiv", e.target.value)}
         placeholder={t("split-by-sections.horizontal.placeholder", "Enter number of horizontal divisions")}
         disabled={disabled}
       />
@@ -46,38 +42,47 @@ const SplitSettings = ({
         min="0"
         max="300"
         value={parameters.vDiv}
-        onChange={(e) => onParameterChange('vDiv', e.target.value)}
+        onChange={(e) => onParameterChange("vDiv", e.target.value)}
         placeholder={t("split-by-sections.vertical.placeholder", "Enter number of vertical divisions")}
         disabled={disabled}
       />
       <Select
         label={t("split-by-sections.splitMode.label", "Split Mode")}
-        value={parameters.splitMode || 'SPLIT_ALL'}
-        onChange={(value) => onParameterChange('splitMode', value || 'SPLIT_ALL')}
+        value={parameters.splitMode || "SPLIT_ALL"}
+        onChange={(value) => onParameterChange("splitMode", value || "SPLIT_ALL")}
         description={t("split-by-sections.splitMode.description", "Choose how to split the pages")}
         data={[
-          { value: 'SPLIT_ALL', label: t("split-by-sections.splitMode.splitAll", "Split all pages") },
-          { value: 'SPLIT_ALL_EXCEPT_FIRST', label: t("split-by-sections.splitMode.splitAllExceptFirst", "Split all except first") },
-          { value: 'SPLIT_ALL_EXCEPT_LAST', label: t("split-by-sections.splitMode.splitAllExceptLast", "Split all except last") },
-          { value: 'SPLIT_ALL_EXCEPT_FIRST_AND_LAST', label: t("split-by-sections.splitMode.splitAllExceptFirstAndLast", "Split all except first and last") },
-          { value: 'CUSTOM', label: t("split-by-sections.splitMode.custom", "Custom pages") },
+          { value: "SPLIT_ALL", label: t("split-by-sections.splitMode.splitAll", "Split all pages") },
+          {
+            value: "SPLIT_ALL_EXCEPT_FIRST",
+            label: t("split-by-sections.splitMode.splitAllExceptFirst", "Split all except first"),
+          },
+          {
+            value: "SPLIT_ALL_EXCEPT_LAST",
+            label: t("split-by-sections.splitMode.splitAllExceptLast", "Split all except last"),
+          },
+          {
+            value: "SPLIT_ALL_EXCEPT_FIRST_AND_LAST",
+            label: t("split-by-sections.splitMode.splitAllExceptFirstAndLast", "Split all except first and last"),
+          },
+          { value: "CUSTOM", label: t("split-by-sections.splitMode.custom", "Custom pages") },
         ]}
         disabled={disabled}
         comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
       />
-      {parameters.splitMode === 'CUSTOM' && (
+      {parameters.splitMode === "CUSTOM" && (
         <TextInput
           label={t("split-by-sections.customPages.label", "Custom Page Numbers")}
           placeholder={t("split-by-sections.customPages.placeholder", "e.g. 2,4,6")}
-          value={parameters.customPages || ''}
-          onChange={(e) => onParameterChange('customPages', e.target.value)}
+          value={parameters.customPages || ""}
+          onChange={(e) => onParameterChange("customPages", e.target.value)}
           disabled={disabled}
         />
       )}
       <Checkbox
         label={t("split-by-sections.merge", "Merge sections into one PDF")}
         checked={parameters.merge}
-        onChange={(e) => onParameterChange('merge', e.currentTarget.checked)}
+        onChange={(e) => onParameterChange("merge", e.currentTarget.checked)}
         disabled={disabled}
       />
     </Stack>
@@ -109,7 +114,7 @@ const SplitSettings = ({
         label={label}
         placeholder={placeholder}
         value={parameters.splitValue}
-        onChange={(e) => onParameterChange('splitValue', e.target.value)}
+        onChange={(e) => onParameterChange("splitValue", e.target.value)}
         disabled={disabled}
       />
     );
@@ -121,19 +126,19 @@ const SplitSettings = ({
         label={t("splitByChapters.bookmarkLevel", "Bookmark Level")}
         type="number"
         value={parameters.bookmarkLevel}
-        onChange={(e) => onParameterChange('bookmarkLevel', e.target.value)}
+        onChange={(e) => onParameterChange("bookmarkLevel", e.target.value)}
         disabled={disabled}
       />
       <Checkbox
         label={t("splitByChapters.includeMetadata", "Include Metadata")}
         checked={parameters.includeMetadata}
-        onChange={(e) => onParameterChange('includeMetadata', e.currentTarget.checked)}
+        onChange={(e) => onParameterChange("includeMetadata", e.currentTarget.checked)}
         disabled={disabled}
       />
       <Checkbox
         label={t("splitByChapters.allowDuplicates", "Allow Duplicate Bookmarks")}
         checked={parameters.allowDuplicates}
-        onChange={(e) => onParameterChange('allowDuplicates', e.currentTarget.checked)}
+        onChange={(e) => onParameterChange("allowDuplicates", e.currentTarget.checked)}
         disabled={disabled}
       />
     </Stack>
@@ -145,7 +150,7 @@ const SplitSettings = ({
         href="https://stirlingpdf.io/files/Auto%20Splitter%20Divider%20(with%20instructions).pdf"
         target="_blank"
         size="sm"
-        style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}
+        style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}
       >
         <LocalIcon icon="download-rounded" width="2rem" height="2rem" />
         {t("autoSplitPDF.dividerDownload2", "Download 'Auto Splitter Divider (with instructions).pdf'")}
@@ -154,7 +159,7 @@ const SplitSettings = ({
       <Checkbox
         label={t("autoSplitPDF.duplexMode", "Duplex Mode (Front and back scanning)")}
         checked={parameters.duplexMode}
-        onChange={(e) => onParameterChange('duplexMode', e.currentTarget.checked)}
+        onChange={(e) => onParameterChange("duplexMode", e.currentTarget.checked)}
         disabled={disabled}
       />
     </Stack>
@@ -165,15 +170,15 @@ const SplitSettings = ({
       <Select
         label={t("split.poster.pageSize.label", "Target Page Size")}
         description={t("split.poster.pageSize.description", "Size of output pages for printing")}
-        value={parameters.pageSize || 'A4'}
-        onChange={(value) => onParameterChange('pageSize', value || 'A4')}
+        value={parameters.pageSize || "A4"}
+        onChange={(value) => onParameterChange("pageSize", value || "A4")}
         data={[
-          { value: 'A4', label: 'A4 (210 × 297 mm)' },
-          { value: 'Letter', label: 'Letter (8.5 × 11 in)' },
-          { value: 'A3', label: 'A3 (297 × 420 mm)' },
-          { value: 'A5', label: 'A5 (148 × 210 mm)' },
-          { value: 'Legal', label: 'Legal (8.5 × 14 in)' },
-          { value: 'Tabloid', label: 'Tabloid (11 × 17 in)' },
+          { value: "A4", label: "A4 (210 × 297 mm)" },
+          { value: "Letter", label: "Letter (8.5 × 11 in)" },
+          { value: "A3", label: "A3 (297 × 420 mm)" },
+          { value: "A5", label: "A5 (148 × 210 mm)" },
+          { value: "Legal", label: "Legal (8.5 × 14 in)" },
+          { value: "Tabloid", label: "Tabloid (11 × 17 in)" },
         ]}
         disabled={disabled}
         comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_AUTOMATE_DROPDOWN }}
@@ -185,7 +190,7 @@ const SplitSettings = ({
         min="1"
         max="10"
         value={parameters.xFactor || 2}
-        onChange={(e) => onParameterChange('xFactor', e.target.value)}
+        onChange={(e) => onParameterChange("xFactor", e.target.value)}
         placeholder="2"
         disabled={disabled}
       />
@@ -196,14 +201,14 @@ const SplitSettings = ({
         min="1"
         max="10"
         value={parameters.yFactor || 2}
-        onChange={(e) => onParameterChange('yFactor', e.target.value)}
+        onChange={(e) => onParameterChange("yFactor", e.target.value)}
         placeholder="2"
         disabled={disabled}
       />
       <Checkbox
         label={t("split.poster.rightToLeft", "Split right-to-left")}
         checked={parameters.rightToLeft || false}
-        onChange={(e) => onParameterChange('rightToLeft', e.currentTarget.checked)}
+        onChange={(e) => onParameterChange("rightToLeft", e.currentTarget.checked)}
         disabled={disabled}
       />
     </Stack>
@@ -227,7 +232,8 @@ const SplitSettings = ({
       {parameters.method === SPLIT_METHODS.BY_SECTIONS && renderBySectionsForm()}
       {(parameters.method === SPLIT_METHODS.BY_SIZE ||
         parameters.method === SPLIT_METHODS.BY_PAGE_COUNT ||
-        parameters.method === SPLIT_METHODS.BY_DOC_COUNT) && renderSplitValueForm()}
+        parameters.method === SPLIT_METHODS.BY_DOC_COUNT) &&
+        renderSplitValueForm()}
       {parameters.method === SPLIT_METHODS.BY_CHAPTERS && renderByChaptersForm()}
       {parameters.method === SPLIT_METHODS.BY_PAGE_DIVIDER && renderByPageDividerForm()}
       {parameters.method === SPLIT_METHODS.BY_POSTER && renderByPosterForm()}
diff --git a/frontend/src/core/components/tools/timestampPdf/TimestampPdfSettings.tsx b/frontend/src/core/components/tools/timestampPdf/TimestampPdfSettings.tsx
index 55eb923961..b106ed3c03 100644
--- a/frontend/src/core/components/tools/timestampPdf/TimestampPdfSettings.tsx
+++ b/frontend/src/core/components/tools/timestampPdf/TimestampPdfSettings.tsx
@@ -1,26 +1,16 @@
 import { useEffect, useRef } from "react";
 import { Stack, Text, Select } from "@mantine/core";
 import { useTranslation } from "react-i18next";
-import {
-  TimestampPdfParameters,
-  FALLBACK_TSA_PRESETS,
-} from "@app/hooks/tools/timestampPdf/useTimestampPdfParameters";
+import { TimestampPdfParameters, FALLBACK_TSA_PRESETS } from "@app/hooks/tools/timestampPdf/useTimestampPdfParameters";
 import { useAppConfig } from "@app/contexts/AppConfigContext";
 
 interface TimestampPdfSettingsProps {
   parameters: TimestampPdfParameters;
-  onParameterChange: <K extends keyof TimestampPdfParameters>(
-    key: K,
-    value: TimestampPdfParameters[K]
-  ) => void;
+  onParameterChange: <K extends keyof TimestampPdfParameters>(key: K, value: TimestampPdfParameters[K]) => void;
   disabled?: boolean;
 }
 
-const TimestampPdfSettings = ({
-  parameters,
-  onParameterChange,
-  disabled = false,
-}: TimestampPdfSettingsProps) => {
+const TimestampPdfSettings = ({ parameters, onParameterChange, disabled = false }: TimestampPdfSettingsProps) => {
   const { t } = useTranslation();
   const { config } = useAppConfig();
   const defaultApplied = useRef(false);
@@ -30,9 +20,7 @@ const TimestampPdfSettings = ({
 
   // Build dropdown: presets + admin custom URLs, deduplicated (TASK-9)
   const presetUrls = new Set(presets.map((p) => p.url));
-  const adminCustomUrls = (config?.timestampCustomTsaUrls ?? []).filter(
-    (url) => !presetUrls.has(url)
-  );
+  const adminCustomUrls = (config?.timestampCustomTsaUrls ?? []).filter((url) => !presetUrls.has(url));
   const selectData = [
     ...presets.map((preset) => ({ value: preset.url, label: preset.label })),
     ...adminCustomUrls.map((url) => ({ value: url, label: url })),
@@ -57,10 +45,7 @@ const TimestampPdfSettings = ({
 
       <Select
         label={t("timestampPdf.options.tsaUrl.label", "Select a TSA server")}
-        description={t(
-          "timestampPdf.options.tsaUrl.desc",
-          "Pick a trusted Time Stamp Authority"
-        )}
+        description={t("timestampPdf.options.tsaUrl.desc", "Pick a trusted Time Stamp Authority")}
         data={selectData}
         value={parameters.tsaUrl}
         onChange={(value) => onParameterChange("tsaUrl", value ?? presets[0].url)}
@@ -70,7 +55,7 @@ const TimestampPdfSettings = ({
       <Text size="xs" c="dimmed">
         {t(
           "timestampPdf.options.note",
-          "Only a SHA-256 hash of your document is sent to the TSA server; the PDF file itself is never sent to the TSA server."
+          "Only a SHA-256 hash of your document is sent to the TSA server; the PDF file itself is never sent to the TSA server.",
         )}
       </Text>
     </Stack>
diff --git a/frontend/src/core/components/tools/toolPicker/FavoriteStar.tsx b/frontend/src/core/components/tools/toolPicker/FavoriteStar.tsx
index c0f7e8af9e..26d80cb308 100644
--- a/frontend/src/core/components/tools/toolPicker/FavoriteStar.tsx
+++ b/frontend/src/core/components/tools/toolPicker/FavoriteStar.tsx
@@ -2,8 +2,8 @@ import React from "react";
 import { ActionIcon } from "@mantine/core";
 import type { MantineSize } from "@mantine/core";
 import { useTranslation } from "react-i18next";
-import StarRoundedIcon from '@mui/icons-material/StarRounded';
-import StarBorderRoundedIcon from '@mui/icons-material/StarBorderRounded';
+import StarRoundedIcon from "@mui/icons-material/StarRounded";
+import StarBorderRoundedIcon from "@mui/icons-material/StarBorderRounded";
 
 interface FavoriteStarProps {
   isFavorite: boolean;
@@ -32,17 +32,19 @@ const FavoriteStar: React.FC<FavoriteStarProps> = ({ isFavorite, onToggle, class
         e.stopPropagation();
       }}
       className={className}
-      aria-label={isFavorite ? t('toolPanel.fullscreen.unfavorite', 'Remove from favourites') : t('toolPanel.fullscreen.favorite', 'Add to favourites')}
+      aria-label={
+        isFavorite
+          ? t("toolPanel.fullscreen.unfavorite", "Remove from favourites")
+          : t("toolPanel.fullscreen.favorite", "Add to favourites")
+      }
     >
       {isFavorite ? (
-        <StarRoundedIcon fontSize="inherit" style={{ color: 'var(--special-color-favorites)', fontSize: '1rem' }} />
+        <StarRoundedIcon fontSize="inherit" style={{ color: "var(--special-color-favorites)", fontSize: "1rem" }} />
       ) : (
-        <StarBorderRoundedIcon fontSize="inherit" style={{ fontSize: '1rem' }} />
+        <StarBorderRoundedIcon fontSize="inherit" style={{ fontSize: "1rem" }} />
       )}
     </ActionIcon>
   );
 };
 
 export default FavoriteStar;
-
-
diff --git a/frontend/src/core/components/tools/toolPicker/ToolButton.tsx b/frontend/src/core/components/tools/toolPicker/ToolButton.tsx
index 6202a6af8c..399ed73add 100644
--- a/frontend/src/core/components/tools/toolPicker/ToolButton.tsx
+++ b/frontend/src/core/components/tools/toolPicker/ToolButton.tsx
@@ -30,7 +30,16 @@ interface ToolButtonProps {
   onUnavailableClick?: () => void;
 }
 
-const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect, disableNavigation = false, matchedSynonym, hasStars = false, onUnavailableClick }) => {
+const ToolButton: React.FC<ToolButtonProps> = ({
+  id,
+  tool,
+  isSelected,
+  onSelect,
+  disableNavigation = false,
+  matchedSynonym,
+  hasStars = false,
+  onUnavailableClick,
+}) => {
   const { t } = useTranslation();
   const { config } = useAppConfig();
   const premiumEnabled = config?.premiumEnabled;
@@ -39,7 +48,8 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect,
   const isUnavailable = disabledReason !== null;
   // If onUnavailableClick is provided for a non-comingSoon tool, render as "cloud-available":
   // full opacity, cloud badge, normal tooltip — clicking still fires onUnavailableClick (e.g. sign-in).
-  const showAsCloudAvailable = isUnavailable && !!onUnavailableClick && disabledReason !== 'comingSoon' && disabledReason !== 'selfHostedOffline';
+  const showAsCloudAvailable =
+    isUnavailable && !!onUnavailableClick && disabledReason !== "comingSoon" && disabledReason !== "selfHostedOffline";
   const visuallyUnavailable = isUnavailable && !showAsCloudAvailable;
   const { hotkeys } = useHotkeys();
   const binding = hotkeys[id];
@@ -48,7 +58,7 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect,
 
   // Check if this tool will route to SaaS backend (desktop only)
   const rawEndpoint = tool.operationConfig?.endpoint;
-  const endpointString = typeof rawEndpoint === 'string' ? rawEndpoint : undefined;
+  const endpointString = typeof rawEndpoint === "string" ? rawEndpoint : undefined;
   const usesCloud = useWillUseCloud(endpointString);
 
   const handleClick = (id: ToolId) => {
@@ -58,7 +68,7 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect,
     }
     if (tool.link) {
       // Open external link in new tab
-      window.open(tool.link, '_blank', 'noopener,noreferrer');
+      window.open(tool.link, "_blank", "noopener,noreferrer");
       return;
     }
     // Normal tool selection
@@ -71,62 +81,60 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect,
   const { key: disabledKey, fallback: disabledFallback } = getDisabledLabel(disabledReason);
   const disabledMessage = t(disabledKey, disabledFallback);
 
-  const tooltipContent = visuallyUnavailable
-    ? (<span><strong>{disabledMessage}</strong> {tool.description}</span>)
-    : (
-      <div style={{ display: 'flex', flexDirection: 'column', gap: '0.35rem' }}>
-        <span>{tool.description}</span>
-        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '0.75rem' }}>
+  const tooltipContent = visuallyUnavailable ? (
+    <span>
+      <strong>{disabledMessage}</strong> {tool.description}
+    </span>
+  ) : (
+    <div style={{ display: "flex", flexDirection: "column", gap: "0.35rem" }}>
+      <span>{tool.description}</span>
+      <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", fontSize: "0.75rem" }}>
         {binding ? (
           <>
-            <span style={{ color: 'var(--mantine-color-dimmed)', fontWeight: 500 }}>{t('settings.hotkeys.shortcut', 'Shortcut')}</span>
+            <span style={{ color: "var(--mantine-color-dimmed)", fontWeight: 500 }}>
+              {t("settings.hotkeys.shortcut", "Shortcut")}
+            </span>
             <HotkeyDisplay binding={binding} />
           </>
         ) : (
-          <span style={{ color: 'var(--mantine-color-dimmed)', fontWeight: 500, fontStyle: 'italic' }}>{t('settings.hotkeys.noShortcut', 'No shortcut set')}</span>
+          <span style={{ color: "var(--mantine-color-dimmed)", fontWeight: 500, fontStyle: "italic" }}>
+            {t("settings.hotkeys.noShortcut", "No shortcut set")}
+          </span>
         )}
-        </div>
       </div>
-    );
+    </div>
+  );
 
   const buttonContent = (
     <>
-      <ToolIcon
-        icon={tool.icon}
-        opacity={visuallyUnavailable ? 0.25 : 1}
-      />
-      <div style={{ display: 'flex', flexDirection: 'column', alignItems: 'flex-start', flex: 1, overflow: 'visible' }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', width: '100%' }}>
+      <ToolIcon icon={tool.icon} opacity={visuallyUnavailable ? 0.25 : 1} />
+      <div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", flex: 1, overflow: "visible" }}>
+        <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", width: "100%" }}>
           <FitText
             text={tool.name}
             lines={1}
             minimumFontScale={0.8}
             as="span"
-            style={{ display: 'inline-block', maxWidth: '100%', opacity: visuallyUnavailable ? 0.25 : 1 }}
+            style={{ display: "inline-block", maxWidth: "100%", opacity: visuallyUnavailable ? 0.25 : 1 }}
           />
-          {tool.versionStatus === 'alpha' && (
-            <Badge
-              size="xs"
-              variant="light"
-              color="orange"
-              style={{ flexShrink: 0, opacity: visuallyUnavailable ? 0.25 : 1 }}
-            >
-              {t('toolPanel.alpha', 'Alpha')}
+          {tool.versionStatus === "alpha" && (
+            <Badge size="xs" variant="light" color="orange" style={{ flexShrink: 0, opacity: visuallyUnavailable ? 0.25 : 1 }}>
+              {t("toolPanel.alpha", "Alpha")}
             </Badge>
           )}
-          {(usesCloud && !visuallyUnavailable) && (
-            <CloudBadge />
-          )}
+          {usesCloud && !visuallyUnavailable && <CloudBadge />}
         </div>
         {matchedSynonym && (
-          <span style={{
-            fontSize: '0.75rem',
-            color: 'var(--mantine-color-dimmed)',
-            opacity: visuallyUnavailable ? 0.25 : 1,
-            marginTop: '1px',
-            overflow: 'visible',
-            whiteSpace: 'nowrap'
-          }}>
+          <span
+            style={{
+              fontSize: "0.75rem",
+              color: "var(--mantine-color-dimmed)",
+              opacity: visuallyUnavailable ? 0.25 : 1,
+              marginTop: "1px",
+              overflow: "visible",
+              whiteSpace: "nowrap",
+            }}
+          >
             {matchedSynonym}
           </span>
         )}
@@ -155,9 +163,9 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect,
         root: {
           borderRadius: 0,
           color: "var(--tools-text-and-icon-color)",
-          overflow: 'visible'
+          overflow: "visible",
         },
-        label: { overflow: 'visible' }
+        label: { overflow: "visible" },
       }}
     >
       {buttonContent}
@@ -181,9 +189,9 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect,
         root: {
           borderRadius: 0,
           color: "var(--tools-text-and-icon-color)",
-          overflow: 'visible'
+          overflow: "visible",
         },
-        label: { overflow: 'visible' }
+        label: { overflow: "visible" },
       }}
     >
       {buttonContent}
@@ -204,24 +212,20 @@ const ToolButton: React.FC<ToolButtonProps> = ({ id, tool, isSelected, onSelect,
         root: {
           borderRadius: 0,
           color: "var(--tools-text-and-icon-color)",
-          cursor: visuallyUnavailable ? 'not-allowed' : undefined,
-          overflow: 'visible'
+          cursor: visuallyUnavailable ? "not-allowed" : undefined,
+          overflow: "visible",
         },
-        label: { overflow: 'visible' }
+        label: { overflow: "visible" },
       }}
     >
       {buttonContent}
     </Button>
   );
 
-  const star = hasStars && !visuallyUnavailable ? (
-    <FavoriteStar
-      isFavorite={fav}
-      onToggle={() => toggleFavorite(id as ToolId)}
-      className="tool-button-star"
-      size="xs"
-    />
-  ) : null;
+  const star =
+    hasStars && !visuallyUnavailable ? (
+      <FavoriteStar isFavorite={fav} onToggle={() => toggleFavorite(id as ToolId)} className="tool-button-star" size="xs" />
+    ) : null;
 
   return (
     <div className="tool-button-container">
diff --git a/frontend/src/core/components/tools/toolPicker/ToolPicker.css b/frontend/src/core/components/tools/toolPicker/ToolPicker.css
index b88215471a..a7b73bee54 100644
--- a/frontend/src/core/components/tools/toolPicker/ToolPicker.css
+++ b/frontend/src/core/components/tools/toolPicker/ToolPicker.css
@@ -63,7 +63,7 @@
 }
 
 .tool-button .mantine-Button-label {
-  font-size: .85rem;
+  font-size: 0.85rem;
 }
 
 .tool-button-icon {
diff --git a/frontend/src/core/components/tools/toolPicker/ToolSearch.tsx b/frontend/src/core/components/tools/toolPicker/ToolSearch.tsx
index 00c6de54d2..5de431fe9e 100644
--- a/frontend/src/core/components/tools/toolPicker/ToolSearch.tsx
+++ b/frontend/src/core/components/tools/toolPicker/ToolSearch.tsx
@@ -1,7 +1,7 @@
 import { useState, useRef, useEffect, useMemo } from "react";
 import { Stack, Button, Text } from "@mantine/core";
 import { useTranslation } from "react-i18next";
-import LocalIcon from '@app/components/shared/LocalIcon';
+import LocalIcon from "@app/components/shared/LocalIcon";
 import { ToolRegistryEntry } from "@app/data/toolsTaxonomy";
 import { TextInput } from "@app/components/shared/TextInput";
 import "@app/components/tools/toolPicker/ToolPicker.css";
@@ -45,7 +45,7 @@ const ToolSearch = ({
       ([key]) => idToWords(key),
       ([, v]) => v.name,
       ([, v]) => v.description,
-      ([, v]) => v.synonyms?.join(' ') || '',
+      ([, v]) => v.synonyms?.join(" ") || "",
     ]).slice(0, 6);
     return ranked.map(({ item: [id, tool] }) => ({ id, tool }));
   }, [value, toolRegistry, mode, selectedToolKey]);
@@ -82,17 +82,17 @@ const ToolSearch = ({
   }, [autoFocus]);
 
   const searchInput = (
-      <TextInput
-        id="tool-search-input"
-        name="tool-search-input"
-        ref={searchRef}
-        value={value}
-        onChange={handleSearchChange}
-        placeholder={placeholder || t("toolPicker.searchPlaceholder", "Search tools...")}
-        icon={hideIcon ? undefined : <LocalIcon icon="search-rounded" width="1.5rem" height="1.5rem" />}
-        autoComplete="off"
-        onFocus={onFocus}
-      />
+    <TextInput
+      id="tool-search-input"
+      name="tool-search-input"
+      ref={searchRef}
+      value={value}
+      onChange={handleSearchChange}
+      placeholder={placeholder || t("toolPicker.searchPlaceholder", "Search tools...")}
+      icon={hideIcon ? undefined : <LocalIcon icon="search-rounded" width="1.5rem" height="1.5rem" />}
+      autoComplete="off"
+      onFocus={onFocus}
+    />
   );
 
   if (mode === "filter") {
diff --git a/frontend/src/core/components/tools/unlockPdfForms/UnlockPdfFormsSettings.tsx b/frontend/src/core/components/tools/unlockPdfForms/UnlockPdfFormsSettings.tsx
index d1eea7debe..0821be5a85 100644
--- a/frontend/src/core/components/tools/unlockPdfForms/UnlockPdfFormsSettings.tsx
+++ b/frontend/src/core/components/tools/unlockPdfForms/UnlockPdfFormsSettings.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { UnlockPdfFormsParameters } from '@app/hooks/tools/unlockPdfForms/useUnlockPdfFormsParameters';
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { UnlockPdfFormsParameters } from "@app/hooks/tools/unlockPdfForms/useUnlockPdfFormsParameters";
 
 interface UnlockPdfFormsSettingsProps {
   parameters: UnlockPdfFormsParameters;
@@ -14,7 +14,10 @@ const UnlockPdfFormsSettings: React.FC<UnlockPdfFormsSettingsProps> = (_) => {
   return (
     <div className="unlock-pdf-forms-settings">
       <p className="text-muted">
-        {t('unlockPDFForms.description', 'This tool will remove read-only restrictions from PDF form fields, making them editable and fillable.')}
+        {t(
+          "unlockPDFForms.description",
+          "This tool will remove read-only restrictions from PDF form fields, making them editable and fillable.",
+        )}
       </p>
     </div>
   );
diff --git a/frontend/src/core/components/tools/validateSignature/ValidateSignatureReportView.tsx b/frontend/src/core/components/tools/validateSignature/ValidateSignatureReportView.tsx
index 16e0b90a77..d203a76c3e 100644
--- a/frontend/src/core/components/tools/validateSignature/ValidateSignatureReportView.tsx
+++ b/frontend/src/core/components/tools/validateSignature/ValidateSignatureReportView.tsx
@@ -1,22 +1,22 @@
-import React, { useMemo } from 'react';
-import { Badge, Group, Stack, Text, Divider } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import type { SignatureValidationReportData } from '@app/types/validateSignature';
-import '@app/components/tools/validateSignature/reportView/styles.css';
-import ThumbnailPreview from '@app/components/tools/validateSignature/reportView/ThumbnailPreview';
-import FileSummaryHeader from '@app/components/tools/validateSignature/reportView/FileSummaryHeader';
-import SignatureSection from '@app/components/tools/validateSignature/reportView/SignatureSection';
+import React, { useMemo } from "react";
+import { Badge, Group, Stack, Text, Divider } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import type { SignatureValidationReportData } from "@app/types/validateSignature";
+import "@app/components/tools/validateSignature/reportView/styles.css";
+import ThumbnailPreview from "@app/components/tools/validateSignature/reportView/ThumbnailPreview";
+import FileSummaryHeader from "@app/components/tools/validateSignature/reportView/FileSummaryHeader";
+import SignatureSection from "@app/components/tools/validateSignature/reportView/SignatureSection";
 
 interface ValidateSignatureReportViewProps {
   data: SignatureValidationReportData;
 }
 
 const NoSignatureSection = ({ message, label }: { message: string; label: string }) => (
-  <Stack align="center" justify="center" gap="xs" style={{ minHeight: 360, width: '100%' }}>
-    <Badge color="gray" variant="light" size="lg" style={{ textTransform: 'uppercase' }}>
+  <Stack align="center" justify="center" gap="xs" style={{ minHeight: 360, width: "100%" }}>
+    <Badge color="gray" variant="light" size="lg" style={{ textTransform: "uppercase" }}>
       {label}
     </Badge>
-    <Text size="sm" c="dimmed" style={{ textAlign: 'center' }}>
+    <Text size="sm" c="dimmed" style={{ textAlign: "center" }}>
       {message}
     </Text>
   </Stack>
@@ -24,11 +24,11 @@ const NoSignatureSection = ({ message, label }: { message: string; label: string
 
 const ValidateSignatureReportView: React.FC<ValidateSignatureReportViewProps> = ({ data }) => {
   const { t } = useTranslation();
-  const noSignaturesLabel = t('validateSignature.noSignaturesShort', 'No signatures');
+  const noSignaturesLabel = t("validateSignature.noSignaturesShort", "No signatures");
 
   const pages = useMemo(() => {
     const result: Array<{
-      entry: SignatureValidationReportData['entries'][number];
+      entry: SignatureValidationReportData["entries"][number];
       signatureIndex: number | null;
       includeSummary: boolean;
     }> = [];
@@ -56,11 +56,10 @@ const ValidateSignatureReportView: React.FC<ValidateSignatureReportViewProps> =
       <Stack gap="xl" align="center">
         <Stack gap="xs" align="center">
           <Badge size="lg" color="blue" variant="light">
-            {t('validateSignature.report.title', 'Signature Validation Report')}
+            {t("validateSignature.report.title", "Signature Validation Report")}
           </Badge>
           <Text size="sm" c="dimmed">
-            {t('validateSignature.report.generatedAt', 'Generated')}{' '}
-            {new Date(data.generatedAt).toLocaleString()}
+            {t("validateSignature.report.generatedAt", "Generated")} {new Date(data.generatedAt).toLocaleString()}
           </Text>
         </Stack>
 
@@ -70,10 +69,7 @@ const ValidateSignatureReportView: React.FC<ValidateSignatureReportViewProps> =
               {pageDef.includeSummary && (
                 <>
                   <Group align="flex-start" gap="lg">
-                    <ThumbnailPreview
-                      thumbnailUrl={pageDef.entry.thumbnailUrl}
-                      fileName={pageDef.entry.fileName}
-                    />
+                    <ThumbnailPreview thumbnailUrl={pageDef.entry.thumbnailUrl} fileName={pageDef.entry.fileName} />
                     <Stack gap="sm" style={{ flex: 1 }}>
                       <Group justify="space-between" align="flex-start">
                         <div>
@@ -81,11 +77,11 @@ const ValidateSignatureReportView: React.FC<ValidateSignatureReportViewProps> =
                             {pageDef.entry.fileName}
                           </Text>
                           <Text size="sm" c="dimmed">
-                            {t('validateSignature.report.entryLabel', 'Signature Summary')}
+                            {t("validateSignature.report.entryLabel", "Signature Summary")}
                           </Text>
                         </div>
                         <Badge color="gray" variant="light">
-                          {t('validateSignature.report.page', 'Page')} {index + 1}
+                          {t("validateSignature.report.page", "Page")} {index + 1}
                         </Badge>
                       </Group>
 
@@ -103,16 +99,10 @@ const ValidateSignatureReportView: React.FC<ValidateSignatureReportViewProps> =
               )}
 
               {pageDef.entry.error ? (
-                <NoSignatureSection
-                  message={pageDef.entry.error}
-                  label={t('validateSignature.status.invalid', 'Invalid')}
-                />
+                <NoSignatureSection message={pageDef.entry.error} label={t("validateSignature.status.invalid", "Invalid")} />
               ) : pageDef.entry.signatures.length === 0 ? (
                 <NoSignatureSection
-                  message={t(
-                    'validateSignature.noSignatures',
-                    'No digital signatures found in this document'
-                  )}
+                  message={t("validateSignature.noSignatures", "No digital signatures found in this document")}
                   label={noSignaturesLabel}
                 />
               ) : (
@@ -129,10 +119,10 @@ const ValidateSignatureReportView: React.FC<ValidateSignatureReportViewProps> =
 
             <Group justify="space-between" align="center" mt="auto" pt="md">
               <Text size="xs" c="dimmed">
-                {t('validateSignature.report.footer', 'Validated via Stirling PDF')}
+                {t("validateSignature.report.footer", "Validated via Stirling PDF")}
               </Text>
               <Text size="xs" c="dimmed">
-                {t('validateSignature.report.page', 'Page')} {index + 1} / {pages.length}
+                {t("validateSignature.report.page", "Page")} {index + 1} / {pages.length}
               </Text>
             </Group>
           </div>
diff --git a/frontend/src/core/components/tools/validateSignature/ValidateSignatureResults.tsx b/frontend/src/core/components/tools/validateSignature/ValidateSignatureResults.tsx
index acbc1158e0..d95457c900 100644
--- a/frontend/src/core/components/tools/validateSignature/ValidateSignatureResults.tsx
+++ b/frontend/src/core/components/tools/validateSignature/ValidateSignatureResults.tsx
@@ -1,12 +1,12 @@
-import { useCallback, useMemo, useState } from 'react';
-import { Alert, Badge, Button, Divider, Group, Loader, Stack, Text, SegmentedControl } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import type { SignatureValidationReportEntry } from '@app/types/validateSignature';
-import type { ValidateSignatureOperationHook } from '@app/hooks/tools/validateSignature/useValidateSignatureOperation';
-import '@app/components/tools/validateSignature/reportView/styles.css';
-import FitText from '@app/components/shared/FitText';
-import { SuggestedToolsSection } from '@app/components/tools/shared/SuggestedToolsSection';
-import { downloadFile } from '@app/services/downloadService';
+import { useCallback, useMemo, useState } from "react";
+import { Alert, Badge, Button, Divider, Group, Loader, Stack, Text, SegmentedControl } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import type { SignatureValidationReportEntry } from "@app/types/validateSignature";
+import type { ValidateSignatureOperationHook } from "@app/hooks/tools/validateSignature/useValidateSignatureOperation";
+import "@app/components/tools/validateSignature/reportView/styles.css";
+import FitText from "@app/components/shared/FitText";
+import { SuggestedToolsSection } from "@app/components/tools/shared/SuggestedToolsSection";
+import { downloadFile } from "@app/services/downloadService";
 
 interface ValidateSignatureResultsProps {
   operation: ValidateSignatureOperationHook;
@@ -47,37 +47,32 @@ const findFileByExtension = (files: File[], extension: string) => {
   return files.find((file) => file.name.toLowerCase().endsWith(extension));
 };
 
-const ValidateSignatureResults = ({
-  operation,
-  results,
-  isLoading,
-  errorMessage,
-}: ValidateSignatureResultsProps) => {
+const ValidateSignatureResults = ({ operation, results, isLoading, errorMessage }: ValidateSignatureResultsProps) => {
   const { t } = useTranslation();
   const summary = useFileSummary(results);
 
-  const pdfFile = useMemo(() => findFileByExtension(operation.files, '.pdf'), [operation.files]);
-  const csvFile = useMemo(() => findFileByExtension(operation.files, '.csv'), [operation.files]);
-  const jsonFile = useMemo(() => findFileByExtension(operation.files, '.json'), [operation.files]);
+  const pdfFile = useMemo(() => findFileByExtension(operation.files, ".pdf"), [operation.files]);
+  const csvFile = useMemo(() => findFileByExtension(operation.files, ".csv"), [operation.files]);
+  const jsonFile = useMemo(() => findFileByExtension(operation.files, ".json"), [operation.files]);
 
-  const [selectedType, setSelectedType] = useState<'pdf' | 'csv' | 'json'>('pdf');
+  const [selectedType, setSelectedType] = useState<"pdf" | "csv" | "json">("pdf");
 
   const selectedFile = useMemo(() => {
-    if (selectedType === 'pdf') return pdfFile ?? null;
-    if (selectedType === 'csv') return csvFile ?? null;
+    if (selectedType === "pdf") return pdfFile ?? null;
+    if (selectedType === "csv") return csvFile ?? null;
     return jsonFile ?? null;
   }, [selectedType, pdfFile, csvFile, jsonFile]);
 
   const selectedDownloadLabel = useMemo(() => {
-    if (selectedType === 'pdf') return t('validateSignature.downloadPdf', 'Download PDF Report');
-    if (selectedType === 'csv') return t('validateSignature.downloadCsv', 'Download CSV');
-    return t('validateSignature.downloadJson', 'Download JSON');
+    if (selectedType === "pdf") return t("validateSignature.downloadPdf", "Download PDF Report");
+    if (selectedType === "csv") return t("validateSignature.downloadCsv", "Download CSV");
+    return t("validateSignature.downloadJson", "Download JSON");
   }, [selectedType, t]);
 
   const downloadTypeOptions = [
-    { label: t('validateSignature.downloadType.pdf', 'PDF'), value: 'pdf' },
-    { label: t('validateSignature.downloadType.csv', 'CSV'), value: 'csv' },
-    { label: t('validateSignature.downloadType.json', 'JSON'), value: 'json' },
+    { label: t("validateSignature.downloadType.pdf", "PDF"), value: "pdf" },
+    { label: t("validateSignature.downloadType.csv", "CSV"), value: "csv" },
+    { label: t("validateSignature.downloadType.json", "JSON"), value: "json" },
   ];
 
   const handleDownload = useCallback((file: File) => {
@@ -89,15 +84,15 @@ const ValidateSignatureResults = ({
     return (
       <Group justify="center" gap="sm" py="md">
         <Loader size="sm" />
-        <Text>{t('validateSignature.processing', 'Validating signatures...')}</Text>
+        <Text>{t("validateSignature.processing", "Validating signatures...")}</Text>
       </Group>
     );
   }
 
   if (!isLoading && results.length === 0) {
     return (
-      <Alert color="gray" variant="light" title={t('validateSignature.results', 'Validation Results')}>
-        <Text size="sm">{t('validateSignature.noResults', 'Run the validation to generate a report.')}</Text>
+      <Alert color="gray" variant="light" title={t("validateSignature.results", "Validation Results")}>
+        <Text size="sm">{t("validateSignature.noResults", "Run the validation to generate a report.")}</Text>
       </Alert>
     );
   }
@@ -109,7 +104,7 @@ const ValidateSignatureResults = ({
       {isLoading && results.length > 0 && (
         <Group justify="center" gap="xs">
           <Loader size="xs" />
-          <Text size="sm">{t('validateSignature.finalizing', 'Preparing downloads...')}</Text>
+          <Text size="sm">{t("validateSignature.finalizing", "Preparing downloads...")}</Text>
         </Group>
       )}
       {errorMessage && (
@@ -120,46 +115,46 @@ const ValidateSignatureResults = ({
 
       <Group gap="sm">
         <Badge color="blue" variant="light">
-          {t('validateSignature.report.filesEvaluated', '{{count}} files evaluated', {
+          {t("validateSignature.report.filesEvaluated", "{{count}} files evaluated", {
             count: summary.fileCount,
           })}
         </Badge>
         <Badge color="teal" variant="light">
-          {t('validateSignature.report.signaturesFound', '{{count}} signatures detected', {
+          {t("validateSignature.report.signaturesFound", "{{count}} signatures detected", {
             count: summary.signatureCount,
           })}
         </Badge>
         {summary.signatureCount > 0 && (
           <Badge color="green" variant="light">
-            {t('validateSignature.report.signaturesValid', '{{count}} fully valid', {
+            {t("validateSignature.report.signaturesValid", "{{count}} fully valid", {
               count: summary.fullyValidCount,
             })}
           </Badge>
         )}
       </Group>
 
-      <Stack gap="sm" style={{ maxHeight: '20rem', overflowY: 'auto' }}>
+      <Stack gap="sm" style={{ maxHeight: "20rem", overflowY: "auto" }}>
         {results.map((result) => {
           const hasError = Boolean(result.error);
           const hasSignatures = result.signatures.length > 0;
           const allValid = hasSignatures && result.signatures.every((signature) => signature.valid);
           const badgeLabel = hasError
-            ? t('validateSignature.status.invalid', 'Invalid')
+            ? t("validateSignature.status.invalid", "Invalid")
             : hasSignatures
-            ? allValid
-              ? t('validateSignature.status.valid', 'Valid')
-              : t('validateSignature.status.invalid', 'Invalid')
-            : t('validateSignature.noSignaturesShort', 'No signatures');
+              ? allValid
+                ? t("validateSignature.status.valid", "Valid")
+                : t("validateSignature.status.invalid", "Invalid")
+              : t("validateSignature.noSignaturesShort", "No signatures");
           const badgeClass = hasError
-            ? 'status-badge status-badge--invalid'
+            ? "status-badge status-badge--invalid"
             : hasSignatures
-            ? allValid
-              ? 'status-badge status-badge--valid'
-              : 'status-badge status-badge--warning'
-            : 'status-badge status-badge--neutral';
+              ? allValid
+                ? "status-badge status-badge--valid"
+                : "status-badge status-badge--warning"
+              : "status-badge status-badge--neutral";
 
           return (
-            <Stack key={result.fileId} gap={4} p="xs" style={{ borderLeft: '2px solid var(--mantine-color-gray-4)' }}>
+            <Stack key={result.fileId} gap={4} p="xs" style={{ borderLeft: "2px solid var(--mantine-color-gray-4)" }}>
               <Group justify="space-between" align="flex-start">
                 <div style={{ flex: 1, minWidth: 0 }}>
                   <FitText text={result.fileName} lines={2} as="div" minimumFontScale={0.5} style={{ fontWeight: 600 }} />
@@ -169,13 +164,13 @@ const ValidateSignatureResults = ({
                 </Badge>
               </Group>
               <Text size="xs" c="dimmed">
-                {t('validateSignature.report.signatureCountLabel', '{{count}} signatures', {
+                {t("validateSignature.report.signatureCountLabel", "{{count}} signatures", {
                   count: result.signatures.length,
                 })}
               </Text>
               {!result.error && result.signatures.length === 0 && (
                 <Text size="xs" c="dimmed">
-                  {t('validateSignature.noSignatures', 'No digital signatures found in this document')}
+                  {t("validateSignature.noSignatures", "No digital signatures found in this document")}
                 </Text>
               )}
             </Stack>
@@ -187,24 +182,19 @@ const ValidateSignatureResults = ({
 
       <Stack gap="xs">
         <Text size="sm" fw={600}>
-          {t('validateSignature.report.downloads', 'Downloads')}
+          {t("validateSignature.report.downloads", "Downloads")}
         </Text>
         <SegmentedControl
           value={selectedType}
-          onChange={(v) => setSelectedType(v as 'pdf' | 'csv' | 'json')}
+          onChange={(v) => setSelectedType(v as "pdf" | "csv" | "json")}
           data={downloadTypeOptions}
         />
-        <Button
-          color="blue"
-          onClick={() => selectedFile && handleDownload(selectedFile)}
-          disabled={!selectedFile}
-          fullWidth
-        >
+        <Button color="blue" onClick={() => selectedFile && handleDownload(selectedFile)} disabled={!selectedFile} fullWidth>
           {selectedDownloadLabel}
         </Button>
-        {selectedType === 'pdf' && !pdfFile && (
+        {selectedType === "pdf" && !pdfFile && (
           <Text size="xs" c="dimmed">
-            {t('validateSignature.report.noPdf', 'PDF report will be available after a successful validation.')}
+            {t("validateSignature.report.noPdf", "PDF report will be available after a successful validation.")}
           </Text>
         )}
       </Stack>
diff --git a/frontend/src/core/components/tools/validateSignature/ValidateSignatureSettings.tsx b/frontend/src/core/components/tools/validateSignature/ValidateSignatureSettings.tsx
index a744212a4a..47b50fad57 100644
--- a/frontend/src/core/components/tools/validateSignature/ValidateSignatureSettings.tsx
+++ b/frontend/src/core/components/tools/validateSignature/ValidateSignatureSettings.tsx
@@ -1,35 +1,34 @@
-import { Card, Group, Stack, Text, Button } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import FileUploadButton from '@app/components/shared/FileUploadButton';
-import { ValidateSignatureParameters } from '@app/hooks/tools/validateSignature/useValidateSignatureParameters';
+import { Card, Group, Stack, Text, Button } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import FileUploadButton from "@app/components/shared/FileUploadButton";
+import { ValidateSignatureParameters } from "@app/hooks/tools/validateSignature/useValidateSignatureParameters";
 
 interface ValidateSignatureSettingsProps {
   parameters: ValidateSignatureParameters;
-  onParameterChange: <K extends keyof ValidateSignatureParameters>(parameter: K, value: ValidateSignatureParameters[K]) => void;
+  onParameterChange: <K extends keyof ValidateSignatureParameters>(
+    parameter: K,
+    value: ValidateSignatureParameters[K],
+  ) => void;
   disabled?: boolean;
 }
 
-const ValidateSignatureSettings = ({
-  parameters,
-  onParameterChange,
-  disabled = false,
-}: ValidateSignatureSettingsProps) => {
+const ValidateSignatureSettings = ({ parameters, onParameterChange, disabled = false }: ValidateSignatureSettingsProps) => {
   const { t } = useTranslation();
   const certFile = parameters.certFile;
 
   const handleCertFileChange = (file: File | null) => {
-    onParameterChange('certFile', file);
+    onParameterChange("certFile", file);
   };
 
   return (
     <Card withBorder radius="md" padding="md">
       <Stack gap="sm">
         <div>
-          <Text fw={600}>{t('validateSignature.selectCustomCert', 'Custom Certificate File X.509 (Optional)')}</Text>
+          <Text fw={600}>{t("validateSignature.selectCustomCert", "Custom Certificate File X.509 (Optional)")}</Text>
           <Text size="sm" c="dimmed">
             {t(
-              'validateSignature.settings.certHint',
-              'Upload a trusted X.509 certificate to validate against a custom trust source.'
+              "validateSignature.settings.certHint",
+              "Upload a trusted X.509 certificate to validate against a custom trust source.",
             )}
           </Text>
         </div>
@@ -43,20 +42,15 @@ const ValidateSignatureSettings = ({
             variant="filled"
           />
           {certFile && (
-            <Button
-              variant="subtle"
-              color="gray"
-              onClick={() => handleCertFileChange(null)}
-              disabled={disabled}
-            >
-              {t('sign.clear', 'Clear')}
+            <Button variant="subtle" color="gray" onClick={() => handleCertFileChange(null)} disabled={disabled}>
+              {t("sign.clear", "Clear")}
             </Button>
           )}
         </Group>
 
         {certFile && (
           <Text size="xs" c="dimmed">
-            {t('size', 'Size')}: {Math.round(certFile.size / 1024)} KB
+            {t("size", "Size")}: {Math.round(certFile.size / 1024)} KB
           </Text>
         )}
       </Stack>
diff --git a/frontend/src/core/components/tools/validateSignature/reportView/FieldBlock.tsx b/frontend/src/core/components/tools/validateSignature/reportView/FieldBlock.tsx
index d981662e16..fd50e62b6e 100644
--- a/frontend/src/core/components/tools/validateSignature/reportView/FieldBlock.tsx
+++ b/frontend/src/core/components/tools/validateSignature/reportView/FieldBlock.tsx
@@ -1,10 +1,9 @@
-import React from 'react';
-import { Text } from '@mantine/core';
-import '@app/components/tools/validateSignature/reportView/styles.css';
+import React from "react";
+import { Text } from "@mantine/core";
+import "@app/components/tools/validateSignature/reportView/styles.css";
 
 const FieldBlock = (label: string, value: React.ReactNode) => {
-  const displayValue =
-    value === null || value === undefined || value === '' ? '-' : value;
+  const displayValue = value === null || value === undefined || value === "" ? "-" : value;
 
   return (
     <div className="field-container" key={label}>
@@ -12,7 +11,7 @@ const FieldBlock = (label: string, value: React.ReactNode) => {
         {label}
       </Text>
       <div className="field-value">
-        <Text size="sm" fw={500} style={{ lineHeight: 1.35, whiteSpace: 'pre-wrap' }}>
+        <Text size="sm" fw={500} style={{ lineHeight: 1.35, whiteSpace: "pre-wrap" }}>
           {displayValue}
         </Text>
       </div>
diff --git a/frontend/src/core/components/tools/validateSignature/reportView/FileSummaryHeader.tsx b/frontend/src/core/components/tools/validateSignature/reportView/FileSummaryHeader.tsx
index 68b95e3b7a..912a2efc4f 100644
--- a/frontend/src/core/components/tools/validateSignature/reportView/FileSummaryHeader.tsx
+++ b/frontend/src/core/components/tools/validateSignature/reportView/FileSummaryHeader.tsx
@@ -1,9 +1,9 @@
-import { useTranslation } from 'react-i18next';
-import '@app/components/tools/validateSignature/reportView/styles.css';
-import FieldBlock from '@app/components/tools/validateSignature/reportView/FieldBlock';
+import { useTranslation } from "react-i18next";
+import "@app/components/tools/validateSignature/reportView/styles.css";
+import FieldBlock from "@app/components/tools/validateSignature/reportView/FieldBlock";
 
 const formatDate = (value?: string | null) => {
-  if (!value) return '--';
+  if (!value) return "--";
   const parsed = Date.parse(value);
   if (!Number.isNaN(parsed)) {
     return new Date(parsed).toLocaleString();
@@ -12,9 +12,9 @@ const formatDate = (value?: string | null) => {
 };
 
 const formatFileSize = (bytes?: number | null) => {
-  if (bytes === undefined || bytes === null) return '--';
-  if (bytes === 0) return '0 B';
-  const units = ['B', 'KB', 'MB', 'GB', 'TB'];
+  if (bytes === undefined || bytes === null) return "--";
+  if (bytes === 0) return "0 B";
+  const units = ["B", "KB", "MB", "GB", "TB"];
   const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
   const size = bytes / Math.pow(1024, exponent);
   return `${size.toFixed(exponent === 0 ? 0 : 1)} ${units[exponent]}`;
@@ -33,14 +33,13 @@ const FileSummaryHeader = ({
 }) => {
   const { t } = useTranslation();
   const infoBlocks = [
-    FieldBlock(t('files.size', 'File Size'), formatFileSize(fileSize ?? null)),
-    FieldBlock(t('files.created', 'Created'), createdAt || '-'),
-    FieldBlock(t('validateSignature.signatureDate', 'Signature Date'), formatDate(lastSignatureDate)),
-    FieldBlock(t('validateSignature.totalSignatures', 'Total Signatures'), totalSignatures.toString()),
+    FieldBlock(t("files.size", "File Size"), formatFileSize(fileSize ?? null)),
+    FieldBlock(t("files.created", "Created"), createdAt || "-"),
+    FieldBlock(t("validateSignature.signatureDate", "Signature Date"), formatDate(lastSignatureDate)),
+    FieldBlock(t("validateSignature.totalSignatures", "Total Signatures"), totalSignatures.toString()),
   ];
 
   return <div className="grid-container">{infoBlocks}</div>;
 };
 
 export default FileSummaryHeader;
-
diff --git a/frontend/src/core/components/tools/validateSignature/reportView/SignatureSection.tsx b/frontend/src/core/components/tools/validateSignature/reportView/SignatureSection.tsx
index c6bef701fb..e4aaf9f1bf 100644
--- a/frontend/src/core/components/tools/validateSignature/reportView/SignatureSection.tsx
+++ b/frontend/src/core/components/tools/validateSignature/reportView/SignatureSection.tsx
@@ -1,12 +1,12 @@
-import { Divider, Group, Stack, Text } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import type { SignatureValidationSignature } from '@app/types/validateSignature';
-import SignatureStatusBadge from '@app/components/tools/validateSignature/reportView/SignatureStatusBadge';
-import FieldBlock from '@app/components/tools/validateSignature/reportView/FieldBlock';
-import '@app/components/tools/validateSignature/reportView/styles.css';
+import { Divider, Group, Stack, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import type { SignatureValidationSignature } from "@app/types/validateSignature";
+import SignatureStatusBadge from "@app/components/tools/validateSignature/reportView/SignatureStatusBadge";
+import FieldBlock from "@app/components/tools/validateSignature/reportView/FieldBlock";
+import "@app/components/tools/validateSignature/reportView/styles.css";
 
 const formatDate = (value?: string | null) => {
-  if (!value) return '-';
+  if (!value) return "-";
   const parsed = Date.parse(value);
   if (!Number.isNaN(parsed)) {
     return new Date(parsed).toLocaleString();
@@ -14,38 +14,32 @@ const formatDate = (value?: string | null) => {
   return value;
 };
 
-const SignatureSection = ({
-  signature,
-  index,
-}: {
-  signature: SignatureValidationSignature;
-  index: number;
-}) => {
+const SignatureSection = ({ signature, index }: { signature: SignatureValidationSignature; index: number }) => {
   const { t } = useTranslation();
   const signatureFields = [
-    FieldBlock(t('validateSignature.signer', 'Signer'), signature.signerName || '-'),
-    FieldBlock(t('validateSignature.date', 'Date'), formatDate(signature.signatureDate)),
-    FieldBlock(t('validateSignature.reason', 'Reason'), signature.reason || '-'),
-    FieldBlock(t('validateSignature.location', 'Location'), signature.location || '-'),
+    FieldBlock(t("validateSignature.signer", "Signer"), signature.signerName || "-"),
+    FieldBlock(t("validateSignature.date", "Date"), formatDate(signature.signatureDate)),
+    FieldBlock(t("validateSignature.reason", "Reason"), signature.reason || "-"),
+    FieldBlock(t("validateSignature.location", "Location"), signature.location || "-"),
   ];
 
   const certificateFields = [
-    FieldBlock(t('validateSignature.cert.issuer', 'Issuer'), signature.issuerDN || '-'),
-    FieldBlock(t('validateSignature.cert.subject', 'Subject'), signature.subjectDN || '-'),
-    FieldBlock(t('validateSignature.cert.serialNumber', 'Serial Number'), signature.serialNumber || '-'),
-    FieldBlock(t('validateSignature.cert.validFrom', 'Valid From'), formatDate(signature.validFrom)),
-    FieldBlock(t('validateSignature.cert.validUntil', 'Valid Until'), formatDate(signature.validUntil)),
-    FieldBlock(t('validateSignature.cert.algorithm', 'Algorithm'), signature.signatureAlgorithm || '-'),
+    FieldBlock(t("validateSignature.cert.issuer", "Issuer"), signature.issuerDN || "-"),
+    FieldBlock(t("validateSignature.cert.subject", "Subject"), signature.subjectDN || "-"),
+    FieldBlock(t("validateSignature.cert.serialNumber", "Serial Number"), signature.serialNumber || "-"),
+    FieldBlock(t("validateSignature.cert.validFrom", "Valid From"), formatDate(signature.validFrom)),
+    FieldBlock(t("validateSignature.cert.validUntil", "Valid Until"), formatDate(signature.validUntil)),
+    FieldBlock(t("validateSignature.cert.algorithm", "Algorithm"), signature.signatureAlgorithm || "-"),
     FieldBlock(
-      t('validateSignature.cert.keySize', 'Key Size'),
-      signature.keySize != null ? `${signature.keySize} ${t('validateSignature.cert.bits', 'bits')}` : '--'
+      t("validateSignature.cert.keySize", "Key Size"),
+      signature.keySize != null ? `${signature.keySize} ${t("validateSignature.cert.bits", "bits")}` : "--",
     ),
-    FieldBlock(t('validateSignature.cert.version', 'Version'), signature.version || '-'),
+    FieldBlock(t("validateSignature.cert.version", "Version"), signature.version || "-"),
     FieldBlock(
-      t('validateSignature.cert.keyUsage', 'Key Usage'),
-      signature.keyUsages.length > 0 ? signature.keyUsages.join(', ') : '--'
+      t("validateSignature.cert.keyUsage", "Key Usage"),
+      signature.keyUsages.length > 0 ? signature.keyUsages.join(", ") : "--",
     ),
-    FieldBlock(t('validateSignature.cert.selfSigned', 'Self-Signed'), signature.selfSigned ? t('yes', 'Yes') : t('no', 'No')),
+    FieldBlock(t("validateSignature.cert.selfSigned", "Self-Signed"), signature.selfSigned ? t("yes", "Yes") : t("no", "No")),
   ];
 
   return (
@@ -53,12 +47,14 @@ const SignatureSection = ({
       <Group justify="space-between" align="center">
         <Group gap="sm">
           <Text fw={700} size="lg">
-            {t('validateSignature.signature._value', 'Signature')} {index + 1}
+            {t("validateSignature.signature._value", "Signature")} {index + 1}
           </Text>
           <SignatureStatusBadge signature={signature} />
         </Group>
         {signature.errorMessage && (
-          <Text c="red" size="sm">{signature.errorMessage}</Text>
+          <Text c="red" size="sm">
+            {signature.errorMessage}
+          </Text>
         )}
       </Group>
 
@@ -67,7 +63,7 @@ const SignatureSection = ({
       <Divider my="sm" />
 
       <Text fw={600} size="sm" c="dimmed" tt="uppercase" style={{ letterSpacing: 0.8 }}>
-        {t('validateSignature.cert.details', 'Certificate Details')}
+        {t("validateSignature.cert.details", "Certificate Details")}
       </Text>
       <div className="grid-container">{certificateFields}</div>
     </Stack>
diff --git a/frontend/src/core/components/tools/validateSignature/reportView/SignatureStatusBadge.tsx b/frontend/src/core/components/tools/validateSignature/reportView/SignatureStatusBadge.tsx
index 342c6713e6..22cca32ea9 100644
--- a/frontend/src/core/components/tools/validateSignature/reportView/SignatureStatusBadge.tsx
+++ b/frontend/src/core/components/tools/validateSignature/reportView/SignatureStatusBadge.tsx
@@ -1,29 +1,35 @@
-import { Badge, Popover, Text } from '@mantine/core';
-import '@app/components/tools/validateSignature/reportView/styles.css';
-import { useTranslation } from 'react-i18next';
-import { computeSignatureStatus } from '@app/hooks/tools/validateSignature/utils/signatureStatus';
-import type { SignatureValidationSignature } from '@app/types/validateSignature';
+import { Badge, Popover, Text } from "@mantine/core";
+import "@app/components/tools/validateSignature/reportView/styles.css";
+import { useTranslation } from "react-i18next";
+import { computeSignatureStatus } from "@app/hooks/tools/validateSignature/utils/signatureStatus";
+import type { SignatureValidationSignature } from "@app/types/validateSignature";
 
 const SignatureStatusBadge = ({ signature }: { signature: SignatureValidationSignature }) => {
   const { t } = useTranslation();
   const status = computeSignatureStatus(signature, t);
   const classMap = {
-    valid: 'status-badge status-badge--valid',
-    warning: 'status-badge status-badge--warning',
-    invalid: 'status-badge status-badge--invalid',
-    neutral: 'status-badge status-badge--neutral',
+    valid: "status-badge status-badge--valid",
+    warning: "status-badge status-badge--warning",
+    invalid: "status-badge status-badge--invalid",
+    neutral: "status-badge status-badge--neutral",
   } as const;
 
   return (
     <Popover withinPortal position="bottom" withArrow shadow="md" disabled={status.details.length === 0}>
       <Popover.Target>
-        <Badge className={classMap[status.kind]} variant="light" style={{ cursor: status.details.length ? 'pointer' : 'default' }}>
+        <Badge
+          className={classMap[status.kind]}
+          variant="light"
+          style={{ cursor: status.details.length ? "pointer" : "default" }}
+        >
           {status.label}
         </Badge>
       </Popover.Target>
       {status.details.length > 0 && (
         <Popover.Dropdown>
-          <Text size="sm" fw={600} mb={4}>{t('details', 'Details')}</Text>
+          <Text size="sm" fw={600} mb={4}>
+            {t("details", "Details")}
+          </Text>
           {status.details.map((d, i) => (
             <Text size="sm" key={i}>
               - {d}
@@ -36,4 +42,3 @@ const SignatureStatusBadge = ({ signature }: { signature: SignatureValidationSig
 };
 
 export default SignatureStatusBadge;
-
diff --git a/frontend/src/core/components/tools/validateSignature/reportView/ThumbnailPreview.tsx b/frontend/src/core/components/tools/validateSignature/reportView/ThumbnailPreview.tsx
index 33d76144f3..ca9430ebb8 100644
--- a/frontend/src/core/components/tools/validateSignature/reportView/ThumbnailPreview.tsx
+++ b/frontend/src/core/components/tools/validateSignature/reportView/ThumbnailPreview.tsx
@@ -1,21 +1,11 @@
-import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
-import '@app/components/tools/validateSignature/reportView/styles.css';
+import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
+import "@app/components/tools/validateSignature/reportView/styles.css";
 
-const ThumbnailPreview = ({
-  thumbnailUrl,
-  fileName,
-}: {
-  thumbnailUrl?: string | null;
-  fileName: string;
-}) => {
+const ThumbnailPreview = ({ thumbnailUrl, fileName }: { thumbnailUrl?: string | null; fileName: string }) => {
   if (thumbnailUrl) {
     return (
       <div className="thumbnail-container">
-        <img
-          src={thumbnailUrl}
-          alt={`${fileName} thumbnail`}
-          className="thumbnail-image"
-        />
+        <img src={thumbnailUrl} alt={`${fileName} thumbnail`} className="thumbnail-image" />
       </div>
     );
   }
diff --git a/frontend/src/core/components/tooltips/PageLayout/usePageLayoutAdvancedTips.ts b/frontend/src/core/components/tooltips/PageLayout/usePageLayoutAdvancedTips.ts
index 8cfa963348..06f772e160 100644
--- a/frontend/src/core/components/tooltips/PageLayout/usePageLayoutAdvancedTips.ts
+++ b/frontend/src/core/components/tooltips/PageLayout/usePageLayoutAdvancedTips.ts
@@ -1,41 +1,41 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '@app/types/tips';
+import { useTranslation } from "react-i18next";
+import { TooltipContent } from "@app/types/tips";
 
 export const usePageLayoutAdvancedTips = (): TooltipContent => {
   const { t } = useTranslation();
 
   return {
     header: {
-      title: t('pageLayout.advanced.tooltip.header.title', 'Advanced Layout Options'),
+      title: t("pageLayout.advanced.tooltip.header.title", "Advanced Layout Options"),
     },
     tips: [
       {
-        title: t('pageLayout.advanced.tooltip.orientation.title', 'Orientation'),
+        title: t("pageLayout.advanced.tooltip.orientation.title", "Orientation"),
         description: t(
-          'pageLayout.advanced.tooltip.orientation.text',
-          'Choose the final sheet direction. Portrait works better for tall content, while landscape fits wider layouts.'
+          "pageLayout.advanced.tooltip.orientation.text",
+          "Choose the final sheet direction. Portrait works better for tall content, while landscape fits wider layouts.",
         ),
       },
       {
-        title: t('pageLayout.advanced.tooltip.arrangement.title', 'Page Arrangement'),
+        title: t("pageLayout.advanced.tooltip.arrangement.title", "Page Arrangement"),
         description: t(
-          'pageLayout.advanced.tooltip.arrangement.text',
-          'Controls whether pages fill the grid row-by-row or column-by-column.'
+          "pageLayout.advanced.tooltip.arrangement.text",
+          "Controls whether pages fill the grid row-by-row or column-by-column.",
         ),
         bullets: [
-          t('pageLayout.advanced.tooltip.arrangement.bullet1', 'By Rows: Fill each row first.'),
-          t('pageLayout.advanced.tooltip.arrangement.bullet2', 'By Columns: Fill each column first.'),
+          t("pageLayout.advanced.tooltip.arrangement.bullet1", "By Rows: Fill each row first."),
+          t("pageLayout.advanced.tooltip.arrangement.bullet2", "By Columns: Fill each column first."),
         ],
       },
       {
-        title: t('pageLayout.advanced.tooltip.readingDirection.title', 'Reading Direction'),
+        title: t("pageLayout.advanced.tooltip.readingDirection.title", "Reading Direction"),
         description: t(
-          'pageLayout.advanced.tooltip.readingDirection.text',
-          'Sets horizontal ordering in the grid, useful for left-to-right and right-to-left document conventions.'
+          "pageLayout.advanced.tooltip.readingDirection.text",
+          "Sets horizontal ordering in the grid, useful for left-to-right and right-to-left document conventions.",
         ),
         bullets: [
-          t('pageLayout.advanced.tooltip.readingDirection.bullet1', 'LTR: Left to right order.'),
-          t('pageLayout.advanced.tooltip.readingDirection.bullet2', 'RTL: Right to left order.'),
+          t("pageLayout.advanced.tooltip.readingDirection.bullet1", "LTR: Left to right order."),
+          t("pageLayout.advanced.tooltip.readingDirection.bullet2", "RTL: Right to left order."),
         ],
       },
     ],
diff --git a/frontend/src/core/components/tooltips/PageLayout/usePageLayoutMarginsBordersTips.ts b/frontend/src/core/components/tooltips/PageLayout/usePageLayoutMarginsBordersTips.ts
index ae36f9c84e..9027a635b4 100644
--- a/frontend/src/core/components/tooltips/PageLayout/usePageLayoutMarginsBordersTips.ts
+++ b/frontend/src/core/components/tooltips/PageLayout/usePageLayoutMarginsBordersTips.ts
@@ -1,40 +1,40 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '@app/types/tips';
+import { useTranslation } from "react-i18next";
+import { TooltipContent } from "@app/types/tips";
 
 export const usePageLayoutMarginsBordersTips = (): TooltipContent => {
   const { t } = useTranslation();
 
   return {
     header: {
-      title: t('pageLayout.marginsBorders.tooltip.header.title', 'Margins and Borders'),
+      title: t("pageLayout.marginsBorders.tooltip.header.title", "Margins and Borders"),
     },
     tips: [
       {
-        title: t('pageLayout.marginsBorders.tooltip.margins.title', 'Margins'),
+        title: t("pageLayout.marginsBorders.tooltip.margins.title", "Margins"),
         description: t(
-          'pageLayout.marginsBorders.tooltip.margins.text',
-          'Use top, bottom, left, and right margins to control spacing around the full sheet output.'
+          "pageLayout.marginsBorders.tooltip.margins.text",
+          "Use top, bottom, left, and right margins to control spacing around the full sheet output.",
         ),
       },
       {
-        title: t('pageLayout.marginsBorders.tooltip.innerMargin.title', 'Inner Margin'),
+        title: t("pageLayout.marginsBorders.tooltip.innerMargin.title", "Inner Margin"),
         description: t(
-          'pageLayout.marginsBorders.tooltip.innerMargin.text',
-          'Inner margin adds spacing between cells in the page grid to improve separation and readability.'
+          "pageLayout.marginsBorders.tooltip.innerMargin.text",
+          "Inner margin adds spacing between cells in the page grid to improve separation and readability.",
         ),
       },
       {
-        title: t('pageLayout.marginsBorders.tooltip.borders.title', 'Add Borders'),
+        title: t("pageLayout.marginsBorders.tooltip.borders.title", "Add Borders"),
         description: t(
-          'pageLayout.marginsBorders.tooltip.borders.text',
-          'Enable borders to draw lines around each placed page. This can help visual separation or trimming.'
+          "pageLayout.marginsBorders.tooltip.borders.text",
+          "Enable borders to draw lines around each placed page. This can help visual separation or trimming.",
         ),
       },
       {
-        title: t('pageLayout.marginsBorders.tooltip.borderWidth.title', 'Border Thickness'),
+        title: t("pageLayout.marginsBorders.tooltip.borderWidth.title", "Border Thickness"),
         description: t(
-          'pageLayout.marginsBorders.tooltip.borderWidth.text',
-          'Border thickness is only applied when borders are enabled. Higher values produce thicker lines.'
+          "pageLayout.marginsBorders.tooltip.borderWidth.text",
+          "Border thickness is only applied when borders are enabled. Higher values produce thicker lines.",
         ),
       },
     ],
diff --git a/frontend/src/core/components/tooltips/PageLayout/usePageLayoutTips.ts b/frontend/src/core/components/tooltips/PageLayout/usePageLayoutTips.ts
index 4b3d158d02..dfda8328a4 100644
--- a/frontend/src/core/components/tooltips/PageLayout/usePageLayoutTips.ts
+++ b/frontend/src/core/components/tooltips/PageLayout/usePageLayoutTips.ts
@@ -1,34 +1,40 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '@app/types/tips';
+import { useTranslation } from "react-i18next";
+import { TooltipContent } from "@app/types/tips";
 
 export const usePageLayoutTips = (): TooltipContent => {
   const { t } = useTranslation();
 
   return {
     header: {
-      title: t("pageLayout.tooltip.header.title", "Page Layout Guide")
+      title: t("pageLayout.tooltip.header.title", "Page Layout Guide"),
     },
     tips: [
       {
         title: t("pageLayout.tooltip.overview.title", "What is Page Layout?"),
-        description: t("pageLayout.tooltip.overview.text", "Fit multiple pages onto a single sheet for handouts or to save paper.")
+        description: t(
+          "pageLayout.tooltip.overview.text",
+          "Fit multiple pages onto a single sheet for handouts or to save paper.",
+        ),
       },
       {
         title: t("pageLayout.tooltip.mode.title", "Mode"),
         description: t("pageLayout.tooltip.mode.text", "Choose how the grid is configured:"),
         bullets: [
           t("pageLayout.tooltip.mode.bullet1", "Default: Pick a preset and the grid is calculated automatically."),
-          t("pageLayout.tooltip.mode.bullet2", "Custom: Set rows and columns manually.")
-        ]
+          t("pageLayout.tooltip.mode.bullet2", "Custom: Set rows and columns manually."),
+        ],
       },
       {
         title: t("pageLayout.tooltip.pagesPerSheet.title", "Pages per Sheet (Default Mode)"),
-        description: t("pageLayout.tooltip.pagesPerSheet.text", "Choose how many pages per sheet (e.g. 4 → 2×2, 9 → 3×3).")
+        description: t("pageLayout.tooltip.pagesPerSheet.text", "Choose how many pages per sheet (e.g. 4 → 2×2, 9 → 3×3)."),
       },
       {
         title: t("pageLayout.tooltip.rowsCols.title", "Rows & Columns (Custom Mode)"),
-        description: t("pageLayout.tooltip.rowsCols.text", "Set exact grid dimensions. Total pages per sheet = rows × columns.")
-      }
-    ]
+        description: t(
+          "pageLayout.tooltip.rowsCols.text",
+          "Set exact grid dimensions. Total pages per sheet = rows × columns.",
+        ),
+      },
+    ],
   };
 };
diff --git a/frontend/src/core/components/tooltips/useAddAttachmentsTips.ts b/frontend/src/core/components/tooltips/useAddAttachmentsTips.ts
index 50f924501b..da23853f1a 100644
--- a/frontend/src/core/components/tooltips/useAddAttachmentsTips.ts
+++ b/frontend/src/core/components/tooltips/useAddAttachmentsTips.ts
@@ -1,18 +1,21 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '@app/types/tips';
+import { useTranslation } from "react-i18next";
+import { TooltipContent } from "@app/types/tips";
 
 export const useAddAttachmentsTips = (): TooltipContent => {
   const { t } = useTranslation();
 
   return {
     header: {
-      title: t("AddAttachmentsRequest.tooltip.header.title", "About Add Attachments")
+      title: t("AddAttachmentsRequest.tooltip.header.title", "About Add Attachments"),
     },
     tips: [
       {
         title: t("AddAttachmentsRequest.tooltip.description.title", "What it does"),
-        description: t("AddAttachmentsRequest.info", "Select files to attach to your PDF. These files will be embedded and accessible through the PDF's attachment panel."),
-      }
-    ]
+        description: t(
+          "AddAttachmentsRequest.info",
+          "Select files to attach to your PDF. These files will be embedded and accessible through the PDF's attachment panel.",
+        ),
+      },
+    ],
   };
 };
diff --git a/frontend/src/core/components/tooltips/useAddPasswordPermissionsTips.ts b/frontend/src/core/components/tooltips/useAddPasswordPermissionsTips.ts
index 624dc31dba..83004cb54c 100644
--- a/frontend/src/core/components/tooltips/useAddPasswordPermissionsTips.ts
+++ b/frontend/src/core/components/tooltips/useAddPasswordPermissionsTips.ts
@@ -1,17 +1,20 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '@app/types/tips';
+import { useTranslation } from "react-i18next";
+import { TooltipContent } from "@app/types/tips";
 
 export const useAddPasswordPermissionsTips = (): TooltipContent => {
   const { t } = useTranslation();
 
   return {
     header: {
-      title: t("addPassword.tooltip.permissions.title", "Change Permissions")
+      title: t("addPassword.tooltip.permissions.title", "Change Permissions"),
     },
     tips: [
       {
-        description: t("addPassword.tooltip.permissions.text", "These permissions control what users can do with the PDF. Most effective when combined with an owner password."),
-      }
-    ]
+        description: t(
+          "addPassword.tooltip.permissions.text",
+          "These permissions control what users can do with the PDF. Most effective when combined with an owner password.",
+        ),
+      },
+    ],
   };
 };
diff --git a/frontend/src/core/components/tooltips/useAddPasswordTips.ts b/frontend/src/core/components/tooltips/useAddPasswordTips.ts
index 7a361a64c5..a0de3098d6 100644
--- a/frontend/src/core/components/tooltips/useAddPasswordTips.ts
+++ b/frontend/src/core/components/tooltips/useAddPasswordTips.ts
@@ -1,31 +1,40 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '@app/types/tips';
+import { useTranslation } from "react-i18next";
+import { TooltipContent } from "@app/types/tips";
 
 export const useAddPasswordTips = (): TooltipContent => {
   const { t } = useTranslation();
 
   return {
     header: {
-      title: t("addPassword.tooltip.header.title", "Password Protection Overview")
+      title: t("addPassword.tooltip.header.title", "Password Protection Overview"),
     },
     tips: [
       {
         title: t("addPassword.tooltip.passwords.title", "Password Types"),
-        description: t("addPassword.tooltip.passwords.text", "User passwords restrict opening the document, while owner passwords control what can be done with the document once opened. You can set both or just one."),
+        description: t(
+          "addPassword.tooltip.passwords.text",
+          "User passwords restrict opening the document, while owner passwords control what can be done with the document once opened. You can set both or just one.",
+        ),
         bullets: [
           t("addPassword.tooltip.passwords.bullet1", "User Password: Required to open the PDF"),
-          t("addPassword.tooltip.passwords.bullet2", "Owner Password: Controls document permissions (not supported by all PDF viewers)")
-        ]
+          t(
+            "addPassword.tooltip.passwords.bullet2",
+            "Owner Password: Controls document permissions (not supported by all PDF viewers)",
+          ),
+        ],
       },
       {
         title: t("addPassword.tooltip.encryption.title", "Encryption Levels"),
-        description: t("addPassword.tooltip.encryption.text", "Higher encryption levels provide better security but may not be supported by older PDF viewers."),
+        description: t(
+          "addPassword.tooltip.encryption.text",
+          "Higher encryption levels provide better security but may not be supported by older PDF viewers.",
+        ),
         bullets: [
           t("addPassword.tooltip.encryption.bullet1", "40-bit: Basic security, compatible with older viewers"),
           t("addPassword.tooltip.encryption.bullet2", "128-bit: Standard security, widely supported"),
-          t("addPassword.tooltip.encryption.bullet3", "256-bit: Maximum security, requires modern viewers")
-        ]
+          t("addPassword.tooltip.encryption.bullet3", "256-bit: Maximum security, requires modern viewers"),
+        ],
       },
-    ]
+    ],
   };
 };
diff --git a/frontend/src/core/components/tooltips/useAdjustPageScaleTips.ts b/frontend/src/core/components/tooltips/useAdjustPageScaleTips.ts
index 71bef0dd6c..316c2e4a48 100644
--- a/frontend/src/core/components/tooltips/useAdjustPageScaleTips.ts
+++ b/frontend/src/core/components/tooltips/useAdjustPageScaleTips.ts
@@ -1,31 +1,40 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '@app/types/tips';
+import { useTranslation } from "react-i18next";
+import { TooltipContent } from "@app/types/tips";
 
 export const useAdjustPageScaleTips = (): TooltipContent => {
   const { t } = useTranslation();
 
   return {
     header: {
-      title: t("adjustPageScale.tooltip.header.title", "Page Scale Settings Overview")
+      title: t("adjustPageScale.tooltip.header.title", "Page Scale Settings Overview"),
     },
     tips: [
       {
         title: t("adjustPageScale.tooltip.description.title", "Description"),
-        description: t("adjustPageScale.tooltip.description.text", "Adjust the size of PDF content and change the page dimensions.")
+        description: t(
+          "adjustPageScale.tooltip.description.text",
+          "Adjust the size of PDF content and change the page dimensions.",
+        ),
       },
       {
         title: t("adjustPageScale.tooltip.scaleFactor.title", "Scale Factor"),
-        description: t("adjustPageScale.tooltip.scaleFactor.text", "Controls how large or small the content appears on the page. Content is scaled and centered - if scaled content is larger than the page size, it may be cropped."),
+        description: t(
+          "adjustPageScale.tooltip.scaleFactor.text",
+          "Controls how large or small the content appears on the page. Content is scaled and centered - if scaled content is larger than the page size, it may be cropped.",
+        ),
         bullets: [
           t("adjustPageScale.tooltip.scaleFactor.bullet1", "1.0 = Original size"),
           t("adjustPageScale.tooltip.scaleFactor.bullet2", "0.5 = Half size (50% smaller)"),
-          t("adjustPageScale.tooltip.scaleFactor.bullet3", "2.0 = Double size (200% larger, may crop)")
-        ]
+          t("adjustPageScale.tooltip.scaleFactor.bullet3", "2.0 = Double size (200% larger, may crop)"),
+        ],
       },
       {
         title: t("adjustPageScale.tooltip.pageSize.title", "Target Page Size"),
-        description: t("adjustPageScale.tooltip.pageSize.text", "Sets the dimensions of the output PDF pages. 'Keep Original Size' maintains current dimensions, while other options resize to standard paper sizes.")
-      }
-    ]
+        description: t(
+          "adjustPageScale.tooltip.pageSize.text",
+          "Sets the dimensions of the output PDF pages. 'Keep Original Size' maintains current dimensions, while other options resize to standard paper sizes.",
+        ),
+      },
+    ],
   };
 };
diff --git a/frontend/src/core/components/tooltips/useAdvancedOCRTips.ts b/frontend/src/core/components/tooltips/useAdvancedOCRTips.ts
index 004a970664..6b813a89e5 100644
--- a/frontend/src/core/components/tooltips/useAdvancedOCRTips.ts
+++ b/frontend/src/core/components/tooltips/useAdvancedOCRTips.ts
@@ -1,5 +1,5 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '@app/types/tips';
+import { useTranslation } from "react-i18next";
+import { TooltipContent } from "@app/types/tips";
 
 export const useAdvancedOCRTips = (): TooltipContent => {
   const { t } = useTranslation();
@@ -11,24 +11,39 @@ export const useAdvancedOCRTips = (): TooltipContent => {
     tips: [
       {
         title: t("ocr.tooltip.advanced.compatibility.title", "Compatibility Mode"),
-        description: t("ocr.tooltip.advanced.compatibility.text", "Uses OCR 'sandwich PDF' mode: results in larger files, but more reliable with certain languages and older PDF software. By default we use hOCR for smaller, modern PDFs.")
+        description: t(
+          "ocr.tooltip.advanced.compatibility.text",
+          "Uses OCR 'sandwich PDF' mode: results in larger files, but more reliable with certain languages and older PDF software. By default we use hOCR for smaller, modern PDFs.",
+        ),
       },
       {
         title: t("ocr.tooltip.advanced.sidecar.title", "Create Text File"),
-        description: t("ocr.tooltip.advanced.sidecar.text", "Generates a separate .txt file alongside the PDF containing all extracted text content for easy access and processing.")
+        description: t(
+          "ocr.tooltip.advanced.sidecar.text",
+          "Generates a separate .txt file alongside the PDF containing all extracted text content for easy access and processing.",
+        ),
       },
       {
         title: t("ocr.tooltip.advanced.deskew.title", "Deskew Pages"),
-        description: t("ocr.tooltip.advanced.deskew.text", "Automatically corrects skewed or tilted pages to improve OCR accuracy. Useful for scanned documents that weren't perfectly aligned.")
+        description: t(
+          "ocr.tooltip.advanced.deskew.text",
+          "Automatically corrects skewed or tilted pages to improve OCR accuracy. Useful for scanned documents that weren't perfectly aligned.",
+        ),
       },
       {
         title: t("ocr.tooltip.advanced.clean.title", "Clean Input File"),
-        description: t("ocr.tooltip.advanced.clean.text", "Preprocesses the input by removing noise, enhancing contrast, and optimising the image for better OCR recognition before processing.")
+        description: t(
+          "ocr.tooltip.advanced.clean.text",
+          "Preprocesses the input by removing noise, enhancing contrast, and optimising the image for better OCR recognition before processing.",
+        ),
       },
       {
         title: t("ocr.tooltip.advanced.cleanFinal.title", "Clean Final Output"),
-        description: t("ocr.tooltip.advanced.cleanFinal.text", "Post-processes the final PDF by removing OCR artefacts and optimising the text layer for better readability and smaller file size.")
-      }
-    ]
+        description: t(
+          "ocr.tooltip.advanced.cleanFinal.text",
+          "Post-processes the final PDF by removing OCR artefacts and optimising the text layer for better readability and smaller file size.",
+        ),
+      },
+    ],
   };
 };
diff --git a/frontend/src/core/components/tooltips/useAutoRenameTips.ts b/frontend/src/core/components/tooltips/useAutoRenameTips.ts
index d46c86c75f..01b2e3e840 100644
--- a/frontend/src/core/components/tooltips/useAutoRenameTips.ts
+++ b/frontend/src/core/components/tooltips/useAutoRenameTips.ts
@@ -1,26 +1,29 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '@app/types/tips';
+import { useTranslation } from "react-i18next";
+import { TooltipContent } from "@app/types/tips";
 
 export const useAutoRenameTips = (): TooltipContent => {
   const { t } = useTranslation();
 
   return {
     header: {
-      title: t("auto-rename.tooltip.header.title", "How Auto-Rename Works")
+      title: t("auto-rename.tooltip.header.title", "How Auto-Rename Works"),
     },
     tips: [
       {
         title: t("auto-rename.tooltip.description.title", "What it does"),
-        description: t("auto-rename.description", "Automatically finds the title from your PDF content and uses it as the filename."),
+        description: t(
+          "auto-rename.description",
+          "Automatically finds the title from your PDF content and uses it as the filename.",
+        ),
       },
       {
         title: t("auto-rename.tooltip.howItWorks.title", "Smart Renaming"),
         bullets: [
           t("auto-rename.tooltip.howItWorks.bullet1", "Looks for text that appears to be a title or heading"),
           t("auto-rename.tooltip.howItWorks.bullet2", "Creates a clean, valid filename from the detected title"),
-          t("auto-rename.tooltip.howItWorks.bullet3", "Keeps the original name if no suitable title is found")
-        ]
-      }
-    ]
+          t("auto-rename.tooltip.howItWorks.bullet3", "Keeps the original name if no suitable title is found"),
+        ],
+      },
+    ],
   };
 };
diff --git a/frontend/src/core/components/tooltips/useBookletImpositionTips.ts b/frontend/src/core/components/tooltips/useBookletImpositionTips.ts
index f453f22b8b..fc9768859b 100644
--- a/frontend/src/core/components/tooltips/useBookletImpositionTips.ts
+++ b/frontend/src/core/components/tooltips/useBookletImpositionTips.ts
@@ -1,17 +1,20 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '@app/types/tips';
+import { useTranslation } from "react-i18next";
+import { TooltipContent } from "@app/types/tips";
 
 export const useBookletImpositionTips = (): TooltipContent => {
   const { t } = useTranslation();
 
   return {
     header: {
-      title: t("bookletImposition.tooltip.header.title", "Booklet Creation Guide")
+      title: t("bookletImposition.tooltip.header.title", "Booklet Creation Guide"),
     },
     tips: [
       {
         title: t("bookletImposition.tooltip.description.title", "What is Booklet Imposition?"),
-        description: t("bookletImposition.tooltip.description.text", "Creates professional booklets by arranging pages in the correct printing order. Your PDF pages are placed 2-up on landscape sheets so when folded and bound, they read in proper sequence like a real book.")
+        description: t(
+          "bookletImposition.tooltip.description.text",
+          "Creates professional booklets by arranging pages in the correct printing order. Your PDF pages are placed 2-up on landscape sheets so when folded and bound, they read in proper sequence like a real book.",
+        ),
       },
       {
         title: t("bookletImposition.tooltip.example.title", "Example: 8-Page Booklet"),
@@ -19,8 +22,8 @@ export const useBookletImpositionTips = (): TooltipContent => {
         bullets: [
           t("bookletImposition.tooltip.example.bullet1", "Sheet 1 Front: Pages 8, 1  |  Back: Pages 2, 7"),
           t("bookletImposition.tooltip.example.bullet2", "Sheet 2 Front: Pages 6, 3  |  Back: Pages 4, 5"),
-          t("bookletImposition.tooltip.example.bullet3", "When folded & stacked: Reads 1→2→3→4→5→6→7→8")
-        ]
+          t("bookletImposition.tooltip.example.bullet3", "When folded & stacked: Reads 1→2→3→4→5→6→7→8"),
+        ],
       },
       {
         title: t("bookletImposition.tooltip.printing.title", "How to Print & Assemble"),
@@ -29,8 +32,8 @@ export const useBookletImpositionTips = (): TooltipContent => {
           t("bookletImposition.tooltip.printing.bullet1", "Print double-sided with 'Flip on long edge'"),
           t("bookletImposition.tooltip.printing.bullet2", "Stack sheets in order, fold in half"),
           t("bookletImposition.tooltip.printing.bullet3", "Staple or bind along the folded spine"),
-          t("bookletImposition.tooltip.printing.bullet4", "For short-edge printers: Enable 'Flip on short edge' option")
-        ]
+          t("bookletImposition.tooltip.printing.bullet4", "For short-edge printers: Enable 'Flip on short edge' option"),
+        ],
       },
       {
         title: t("bookletImposition.tooltip.manualDuplex.title", "Manual Duplex (Single-sided Printers)"),
@@ -39,8 +42,8 @@ export const useBookletImpositionTips = (): TooltipContent => {
           t("bookletImposition.tooltip.manualDuplex.bullet1", "Turn OFF 'Double-sided printing'"),
           t("bookletImposition.tooltip.manualDuplex.bullet2", "Select '1st Pass' → Print → Stack face-down"),
           t("bookletImposition.tooltip.manualDuplex.bullet3", "Select '2nd Pass' → Load stack → Print backs"),
-          t("bookletImposition.tooltip.manualDuplex.bullet4", "Fold and assemble as normal")
-        ]
+          t("bookletImposition.tooltip.manualDuplex.bullet4", "Fold and assemble as normal"),
+        ],
       },
       {
         title: t("bookletImposition.tooltip.advanced.title", "Advanced Options"),
@@ -49,9 +52,9 @@ export const useBookletImpositionTips = (): TooltipContent => {
           t("bookletImposition.tooltip.advanced.bullet1", "Right-to-Left Binding: For Arabic, Hebrew, or RTL languages"),
           t("bookletImposition.tooltip.advanced.bullet2", "Borders: Shows cut lines for trimming"),
           t("bookletImposition.tooltip.advanced.bullet3", "Gutter Margin: Adds space for binding/stapling"),
-          t("bookletImposition.tooltip.advanced.bullet4", "Short-edge Flip: Only for automatic duplex printers")
-        ]
-      }
-    ]
+          t("bookletImposition.tooltip.advanced.bullet4", "Short-edge Flip: Only for automatic duplex printers"),
+        ],
+      },
+    ],
   };
-};
\ No newline at end of file
+};
diff --git a/frontend/src/core/components/tooltips/useCertSignTooltips.ts b/frontend/src/core/components/tooltips/useCertSignTooltips.ts
index 4cc4805020..d3c7b8eee1 100644
--- a/frontend/src/core/components/tooltips/useCertSignTooltips.ts
+++ b/frontend/src/core/components/tooltips/useCertSignTooltips.ts
@@ -1,45 +1,54 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '@app/types/tips';
+import { useTranslation } from "react-i18next";
+import { TooltipContent } from "@app/types/tips";
 
 export const useCertSignTooltips = (): TooltipContent => {
   const { t } = useTranslation();
 
   return {
     header: {
-      title: t("certSign.tooltip.header.title", "About Managing Signatures")
+      title: t("certSign.tooltip.header.title", "About Managing Signatures"),
     },
     tips: [
       {
         title: t("certSign.tooltip.overview.title", "What can this tool do?"),
-        description: t("certSign.tooltip.overview.text", "This tool lets you check if your PDFs are digitally signed and add new digital signatures. Digital signatures prove who created or approved a document and show if it has been changed since signing."),
+        description: t(
+          "certSign.tooltip.overview.text",
+          "This tool lets you check if your PDFs are digitally signed and add new digital signatures. Digital signatures prove who created or approved a document and show if it has been changed since signing.",
+        ),
         bullets: [
           t("certSign.tooltip.overview.bullet1", "Check existing signatures and their validity"),
           t("certSign.tooltip.overview.bullet2", "View detailed information about signers and certificates"),
           t("certSign.tooltip.overview.bullet3", "Add new digital signatures to secure your documents"),
-          t("certSign.tooltip.overview.bullet4", "Multiple files supported with easy navigation")
-        ]
+          t("certSign.tooltip.overview.bullet4", "Multiple files supported with easy navigation"),
+        ],
       },
       {
         title: t("certSign.tooltip.validation.title", "Checking Signatures"),
-        description: t("certSign.tooltip.validation.text", "When you check signatures, the tool tells you if they're valid, who signed the document, when it was signed, and whether the document has been changed since signing."),
+        description: t(
+          "certSign.tooltip.validation.text",
+          "When you check signatures, the tool tells you if they're valid, who signed the document, when it was signed, and whether the document has been changed since signing.",
+        ),
         bullets: [
           t("certSign.tooltip.validation.bullet1", "Shows if signatures are valid or invalid"),
           t("certSign.tooltip.validation.bullet2", "Displays signer information and signing date"),
           t("certSign.tooltip.validation.bullet3", "Checks if the document was modified after signing"),
-          t("certSign.tooltip.validation.bullet4", "Can use custom certificates for verification")
-        ]
+          t("certSign.tooltip.validation.bullet4", "Can use custom certificates for verification"),
+        ],
       },
       {
         title: t("certSign.tooltip.signing.title", "Adding Signatures"),
-        description: t("certSign.tooltip.signing.text", "To sign a PDF, you need a digital certificate (like PEM, PKCS12, or JKS). You can choose to make the signature visible on the document or keep it invisible for security only."),
+        description: t(
+          "certSign.tooltip.signing.text",
+          "To sign a PDF, you need a digital certificate (like PEM, PKCS12, or JKS). You can choose to make the signature visible on the document or keep it invisible for security only.",
+        ),
         bullets: [
           t("certSign.tooltip.signing.bullet1", "Supports PEM, PKCS12, JKS, and server certificate formats"),
           t("certSign.tooltip.signing.bullet2", "Option to show or hide signature on the PDF"),
           t("certSign.tooltip.signing.bullet3", "Add reason, location, and signer name"),
           t("certSign.tooltip.signing.bullet4", "Choose which page to place visible signatures"),
-          t("certSign.tooltip.signing.bullet5", "Use server certificate for simple 'Sign with Stirling-PDF' option")
-        ]
-      }
-    ]
+          t("certSign.tooltip.signing.bullet5", "Use server certificate for simple 'Sign with Stirling-PDF' option"),
+        ],
+      },
+    ],
   };
-};
\ No newline at end of file
+};
diff --git a/frontend/src/core/components/tooltips/useCertificateChoiceTips.ts b/frontend/src/core/components/tooltips/useCertificateChoiceTips.ts
index 26f1d41f72..a46e8162ff 100644
--- a/frontend/src/core/components/tooltips/useCertificateChoiceTips.ts
+++ b/frontend/src/core/components/tooltips/useCertificateChoiceTips.ts
@@ -1,51 +1,51 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '@app/types/tips';
+import { useTranslation } from "react-i18next";
+import { TooltipContent } from "@app/types/tips";
 
 export const useCertificateChoiceTips = (): TooltipContent => {
   const { t } = useTranslation();
 
   return {
     header: {
-      title: t('certificateChoice.tooltip.header', 'Certificate Types'),
+      title: t("certificateChoice.tooltip.header", "Certificate Types"),
     },
     tips: [
       {
-        title: t('certificateChoice.tooltip.personal.title', 'Personal Certificate'),
+        title: t("certificateChoice.tooltip.personal.title", "Personal Certificate"),
         description: t(
-          'certificateChoice.tooltip.personal.description',
-          'An auto-generated certificate unique to your user account. Suitable for individual signatures.'
+          "certificateChoice.tooltip.personal.description",
+          "An auto-generated certificate unique to your user account. Suitable for individual signatures.",
         ),
         bullets: [
-          t('certificateChoice.tooltip.personal.bullet1', 'Generated automatically on first use'),
-          t('certificateChoice.tooltip.personal.bullet2', 'Tied to your user account'),
-          t('certificateChoice.tooltip.personal.bullet3', 'Cannot be shared with other users'),
-          t('certificateChoice.tooltip.personal.bullet4', 'Best for: Personal documents, individual accountability'),
+          t("certificateChoice.tooltip.personal.bullet1", "Generated automatically on first use"),
+          t("certificateChoice.tooltip.personal.bullet2", "Tied to your user account"),
+          t("certificateChoice.tooltip.personal.bullet3", "Cannot be shared with other users"),
+          t("certificateChoice.tooltip.personal.bullet4", "Best for: Personal documents, individual accountability"),
         ],
       },
       {
-        title: t('certificateChoice.tooltip.organization.title', 'Organization Certificate'),
+        title: t("certificateChoice.tooltip.organization.title", "Organization Certificate"),
         description: t(
-          'certificateChoice.tooltip.organization.description',
-          'A shared certificate provided by your organization. Used for company-wide signing authority.'
+          "certificateChoice.tooltip.organization.description",
+          "A shared certificate provided by your organization. Used for company-wide signing authority.",
         ),
         bullets: [
-          t('certificateChoice.tooltip.organization.bullet1', 'Managed by system administrators'),
-          t('certificateChoice.tooltip.organization.bullet2', 'Shared across authorized users'),
-          t('certificateChoice.tooltip.organization.bullet3', 'Represents company identity, not individual'),
-          t('certificateChoice.tooltip.organization.bullet4', 'Best for: Official documents, team signatures'),
+          t("certificateChoice.tooltip.organization.bullet1", "Managed by system administrators"),
+          t("certificateChoice.tooltip.organization.bullet2", "Shared across authorized users"),
+          t("certificateChoice.tooltip.organization.bullet3", "Represents company identity, not individual"),
+          t("certificateChoice.tooltip.organization.bullet4", "Best for: Official documents, team signatures"),
         ],
       },
       {
-        title: t('certificateChoice.tooltip.upload.title', 'Upload Custom P12'),
+        title: t("certificateChoice.tooltip.upload.title", "Upload Custom P12"),
         description: t(
-          'certificateChoice.tooltip.upload.description',
-          'Use your own PKCS#12 certificate file. Provides full control over certificate properties.'
+          "certificateChoice.tooltip.upload.description",
+          "Use your own PKCS#12 certificate file. Provides full control over certificate properties.",
         ),
         bullets: [
-          t('certificateChoice.tooltip.upload.bullet1', 'Requires P12/PFX file and password'),
-          t('certificateChoice.tooltip.upload.bullet2', 'Can be issued by external Certificate Authorities'),
-          t('certificateChoice.tooltip.upload.bullet3', 'Higher trust level for legal documents'),
-          t('certificateChoice.tooltip.upload.bullet4', 'Best for: Legally binding contracts, external validation'),
+          t("certificateChoice.tooltip.upload.bullet1", "Requires P12/PFX file and password"),
+          t("certificateChoice.tooltip.upload.bullet2", "Can be issued by external Certificate Authorities"),
+          t("certificateChoice.tooltip.upload.bullet3", "Higher trust level for legal documents"),
+          t("certificateChoice.tooltip.upload.bullet4", "Best for: Legally binding contracts, external validation"),
         ],
       },
     ],
diff --git a/frontend/src/core/components/tooltips/useCertificateTypeTips.ts b/frontend/src/core/components/tooltips/useCertificateTypeTips.ts
index 23633e8a49..1d1689c1f9 100644
--- a/frontend/src/core/components/tooltips/useCertificateTypeTips.ts
+++ b/frontend/src/core/components/tooltips/useCertificateTypeTips.ts
@@ -1,17 +1,20 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '@app/types/tips';
+import { useTranslation } from "react-i18next";
+import { TooltipContent } from "@app/types/tips";
 
 export const useCertificateTypeTips = (): TooltipContent => {
   const { t } = useTranslation();
 
   return {
     header: {
-      title: t("certSign.certType.tooltip.header.title", "About Certificate Types")
+      title: t("certSign.certType.tooltip.header.title", "About Certificate Types"),
     },
     tips: [
       {
         title: t("certSign.certType.tooltip.what.title", "What's a certificate?"),
-        description: t("certSign.certType.tooltip.what.text", "It's a secure ID for your signature that proves you signed. Unless you're required to sign via certificate, we recommend using another secure method like Type, Draw, or Upload.")
+        description: t(
+          "certSign.certType.tooltip.what.text",
+          "It's a secure ID for your signature that proves you signed. Unless you're required to sign via certificate, we recommend using another secure method like Type, Draw, or Upload.",
+        ),
       },
       {
         title: t("certSign.certType.tooltip.which.title", "Which option should I use?"),
@@ -20,13 +23,16 @@ export const useCertificateTypeTips = (): TooltipContent => {
           t("certSign.certType.tooltip.which.bullet1", "PKCS12 (.p12) – one combined file (most common)"),
           t("certSign.certType.tooltip.which.bullet2", "PFX (.pfx) – Microsoft's version of PKCS12"),
           t("certSign.certType.tooltip.which.bullet3", "PEM – separate private-key and certificate .pem files"),
-          t("certSign.certType.tooltip.which.bullet4", "JKS – Java .jks keystore for dev / CI-CD workflows")
-        ]
+          t("certSign.certType.tooltip.which.bullet4", "JKS – Java .jks keystore for dev / CI-CD workflows"),
+        ],
       },
       {
         title: t("certSign.certType.tooltip.convert.title", "Key not listed?"),
-        description: t("certSign.certType.tooltip.convert.text", "Convert your file to a Java keystore (.jks) with keytool, then pick JKS.")
-      }
-    ]
+        description: t(
+          "certSign.certType.tooltip.convert.text",
+          "Convert your file to a Java keystore (.jks) with keytool, then pick JKS.",
+        ),
+      },
+    ],
   };
-};
\ No newline at end of file
+};
diff --git a/frontend/src/core/components/tooltips/useChangeMetadataTips.ts b/frontend/src/core/components/tooltips/useChangeMetadataTips.ts
index 60e2e17d26..f1efcc7ce0 100644
--- a/frontend/src/core/components/tooltips/useChangeMetadataTips.ts
+++ b/frontend/src/core/components/tooltips/useChangeMetadataTips.ts
@@ -1,18 +1,18 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '@app/types/tips';
+import { useTranslation } from "react-i18next";
+import { TooltipContent } from "@app/types/tips";
 
 export const useDeleteAllTips = (): TooltipContent => {
   const { t } = useTranslation();
 
   return {
     header: {
-      title: t("changeMetadata.tooltip.deleteAll.title", "Remove Existing Metadata")
+      title: t("changeMetadata.tooltip.deleteAll.title", "Remove Existing Metadata"),
     },
     tips: [
       {
         description: t("changeMetadata.tooltip.deleteAll.text", "Complete metadata deletion to ensure privacy."),
-      }
-    ]
+      },
+    ],
   };
 };
 
@@ -21,7 +21,7 @@ export const useStandardMetadataTips = (): TooltipContent => {
 
   return {
     header: {
-      title: t("changeMetadata.tooltip.standardFields.title", "Standard Fields")
+      title: t("changeMetadata.tooltip.standardFields.title", "Standard Fields"),
     },
     tips: [
       {
@@ -31,10 +31,10 @@ export const useStandardMetadataTips = (): TooltipContent => {
           t("changeMetadata.tooltip.standardFields.bullet2", "Author: Person who created the document"),
           t("changeMetadata.tooltip.standardFields.bullet3", "Subject: Brief description of content"),
           t("changeMetadata.tooltip.standardFields.bullet4", "Keywords: Search terms for the document"),
-          t("changeMetadata.tooltip.standardFields.bullet5", "Creator/Producer: Software used to create the PDF")
-        ]
-      }
-    ]
+          t("changeMetadata.tooltip.standardFields.bullet5", "Creator/Producer: Software used to create the PDF"),
+        ],
+      },
+    ],
   };
 };
 
@@ -43,7 +43,7 @@ export const useDocumentDatesTips = (): TooltipContent => {
 
   return {
     header: {
-      title: t("changeMetadata.tooltip.dates.title", "Date Fields")
+      title: t("changeMetadata.tooltip.dates.title", "Date Fields"),
     },
     tips: [
       {
@@ -51,9 +51,9 @@ export const useDocumentDatesTips = (): TooltipContent => {
         bullets: [
           t("changeMetadata.tooltip.dates.bullet1", "Creation Date: When original document was made"),
           t("changeMetadata.tooltip.dates.bullet2", "Modification Date: When last changed"),
-        ]
-      }
-    ]
+        ],
+      },
+    ],
   };
 };
 
@@ -62,7 +62,7 @@ export const useCustomMetadataTips = (): TooltipContent => {
 
   return {
     header: {
-      title: t("changeMetadata.tooltip.customFields.title", "Custom Metadata")
+      title: t("changeMetadata.tooltip.customFields.title", "Custom Metadata"),
     },
     tips: [
       {
@@ -70,10 +70,10 @@ export const useCustomMetadataTips = (): TooltipContent => {
         bullets: [
           t("changeMetadata.tooltip.customFields.bullet1", "Add any custom fields relevant to your document"),
           t("changeMetadata.tooltip.customFields.bullet2", "Examples: Department, Project, Version, Status"),
-          t("changeMetadata.tooltip.customFields.bullet3", "Both key and value are required for each entry")
-        ]
-      }
-    ]
+          t("changeMetadata.tooltip.customFields.bullet3", "Both key and value are required for each entry"),
+        ],
+      },
+    ],
   };
 };
 
@@ -82,17 +82,20 @@ export const useAdvancedOptionsTips = (): TooltipContent => {
 
   return {
     header: {
-      title: t("changeMetadata.tooltip.advanced.title", "Advanced Options")
+      title: t("changeMetadata.tooltip.advanced.title", "Advanced Options"),
     },
     tips: [
       {
         title: t("changeMetadata.tooltip.advanced.trapped.title", "Trapped Status"),
-        description: t("changeMetadata.tooltip.advanced.trapped.description", "Indicates if document is prepared for high-quality printing."),
+        description: t(
+          "changeMetadata.tooltip.advanced.trapped.description",
+          "Indicates if document is prepared for high-quality printing.",
+        ),
         bullets: [
           t("changeMetadata.tooltip.advanced.trapped.bullet1", "True: Document has been trapped for printing"),
           t("changeMetadata.tooltip.advanced.trapped.bullet2", "False: Document has not been trapped"),
-          t("changeMetadata.tooltip.advanced.trapped.bullet3", "Unknown: Trapped status is not specified")
-        ]
+          t("changeMetadata.tooltip.advanced.trapped.bullet3", "Unknown: Trapped status is not specified"),
+        ],
       },
       {
         title: t("changeMetadata.tooltip.customFields.title", "Custom Metadata"),
@@ -100,9 +103,9 @@ export const useAdvancedOptionsTips = (): TooltipContent => {
         bullets: [
           t("changeMetadata.tooltip.customFields.bullet1", "Add any custom fields relevant to your document"),
           t("changeMetadata.tooltip.customFields.bullet2", "Examples: Department, Project, Version, Status"),
-          t("changeMetadata.tooltip.customFields.bullet3", "Both key and value are required for each entry")
-        ]
-      }
-    ]
+          t("changeMetadata.tooltip.customFields.bullet3", "Both key and value are required for each entry"),
+        ],
+      },
+    ],
   };
 };
diff --git a/frontend/src/core/components/tooltips/useChangePermissionsTips.ts b/frontend/src/core/components/tooltips/useChangePermissionsTips.ts
index 9075f8a960..9bd20bc207 100644
--- a/frontend/src/core/components/tooltips/useChangePermissionsTips.ts
+++ b/frontend/src/core/components/tooltips/useChangePermissionsTips.ts
@@ -1,21 +1,27 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '@app/types/tips';
+import { useTranslation } from "react-i18next";
+import { TooltipContent } from "@app/types/tips";
 
 export const useChangePermissionsTips = (): TooltipContent => {
   const { t } = useTranslation();
 
   return {
     header: {
-      title: t("changePermissions.tooltip.header.title", "Change Permissions")
+      title: t("changePermissions.tooltip.header.title", "Change Permissions"),
     },
     tips: [
       {
-        description: t("changePermissions.tooltip.description.text", "Changes document permissions, allowing/disallowing access to different features in PDF readers.")
+        description: t(
+          "changePermissions.tooltip.description.text",
+          "Changes document permissions, allowing/disallowing access to different features in PDF readers.",
+        ),
       },
       {
         title: t("warning.tooltipTitle", "Warning"),
-        description: t("changePermissions.tooltip.warning.text", "To make these permissions unchangeable, use the Add Password tool to set an owner password.")
-      }
-    ]
+        description: t(
+          "changePermissions.tooltip.warning.text",
+          "To make these permissions unchangeable, use the Add Password tool to set an owner password.",
+        ),
+      },
+    ],
   };
 };
diff --git a/frontend/src/core/components/tooltips/useCompressTips.ts b/frontend/src/core/components/tooltips/useCompressTips.ts
index 3b5299e08e..9cef4a9d77 100644
--- a/frontend/src/core/components/tooltips/useCompressTips.ts
+++ b/frontend/src/core/components/tooltips/useCompressTips.ts
@@ -1,37 +1,46 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '@app/types/tips';
+import { useTranslation } from "react-i18next";
+import { TooltipContent } from "@app/types/tips";
 
 export const useCompressTips = (): TooltipContent => {
   const { t } = useTranslation();
 
   return {
     header: {
-      title: t("compress.tooltip.header.title", "Compress Settings Overview")
+      title: t("compress.tooltip.header.title", "Compress Settings Overview"),
     },
     tips: [
       {
         title: t("compress.tooltip.description.title", "Description"),
-        description: t("compress.tooltip.description.text", "Compression is an easy way to reduce your file size. Pick File Size to enter a target size and have us adjust quality for you. Pick Quality to set compression strength manually.")
+        description: t(
+          "compress.tooltip.description.text",
+          "Compression is an easy way to reduce your file size. Pick File Size to enter a target size and have us adjust quality for you. Pick Quality to set compression strength manually.",
+        ),
       },
       {
         title: t("compress.tooltip.qualityAdjustment.title", "Quality Adjustment"),
-        description: t("compress.tooltip.qualityAdjustment.text", "Drag the slider to adjust the compression strength. Lower values (1-3) preserve quality but result in larger files. Higher values (7-9) shrink the file more but reduce image clarity."),
+        description: t(
+          "compress.tooltip.qualityAdjustment.text",
+          "Drag the slider to adjust the compression strength. Lower values (1-3) preserve quality but result in larger files. Higher values (7-9) shrink the file more but reduce image clarity.",
+        ),
         bullets: [
           t("compress.tooltip.qualityAdjustment.bullet1", "Lower values preserve quality"),
-          t("compress.tooltip.qualityAdjustment.bullet2", "Higher values reduce file size")
-        ]
+          t("compress.tooltip.qualityAdjustment.bullet2", "Higher values reduce file size"),
+        ],
       },
       {
         title: t("compress.tooltip.grayscale.title", "Grayscale"),
-        description: t("compress.tooltip.grayscale.text", "Select this option to convert all images to black and white, which can significantly reduce file size especially for scanned PDFs or image-heavy documents.")
+        description: t(
+          "compress.tooltip.grayscale.text",
+          "Select this option to convert all images to black and white, which can significantly reduce file size especially for scanned PDFs or image-heavy documents.",
+        ),
       },
       {
         title: t("compress.tooltip.lineArt.title", "Line Art"),
         description: t(
           "compress.tooltip.lineArt.text",
-          "Convert pages to high-contrast black and white using ImageMagick. Use line thickness to control the threshold percentage and detection strength to choose how aggressively edges are outlined."
-        )
-      }
-    ]
+          "Convert pages to high-contrast black and white using ImageMagick. Use line thickness to control the threshold percentage and detection strength to choose how aggressively edges are outlined.",
+        ),
+      },
+    ],
   };
 };
diff --git a/frontend/src/core/components/tooltips/useCropTooltips.ts b/frontend/src/core/components/tooltips/useCropTooltips.ts
index 5ca0ebaecc..a0fd203a69 100644
--- a/frontend/src/core/components/tooltips/useCropTooltips.ts
+++ b/frontend/src/core/components/tooltips/useCropTooltips.ts
@@ -1,21 +1,24 @@
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
 
 export function useCropTooltips() {
   const { t } = useTranslation();
 
   return {
     header: {
-      title: t("crop.tooltip.title", "How to Crop PDFs")
+      title: t("crop.tooltip.title", "How to Crop PDFs"),
     },
     tips: [
       {
-        description: t("crop.tooltip.description", "Select the area to crop from your PDF by dragging and resizing the blue overlay on the thumbnail."),
+        description: t(
+          "crop.tooltip.description",
+          "Select the area to crop from your PDF by dragging and resizing the blue overlay on the thumbnail.",
+        ),
         bullets: [
           t("crop.tooltip.drag", "Drag the overlay to move the crop area"),
           t("crop.tooltip.resize", "Drag the corner and edge handles to resize"),
           t("crop.tooltip.precision", "Use coordinate inputs for precise positioning"),
-        ]
-      }
-    ]
+        ],
+      },
+    ],
   };
 }
diff --git a/frontend/src/core/components/tooltips/useExtractPagesTips.ts b/frontend/src/core/components/tooltips/useExtractPagesTips.ts
index 7c13b30c2a..f82504c575 100644
--- a/frontend/src/core/components/tooltips/useExtractPagesTips.ts
+++ b/frontend/src/core/components/tooltips/useExtractPagesTips.ts
@@ -1,6 +1,6 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '@app/types/tips';
-import { usePageSelectionTips } from '@app/components/tooltips/usePageSelectionTips';
+import { useTranslation } from "react-i18next";
+import { TooltipContent } from "@app/types/tips";
+import { usePageSelectionTips } from "@app/components/tooltips/usePageSelectionTips";
 
 export const useExtractPagesTips = (): TooltipContent => {
   const { t } = useTranslation();
@@ -10,13 +10,11 @@ export const useExtractPagesTips = (): TooltipContent => {
     header: base.header,
     tips: [
       {
-        description: t('extractPages.tooltip.description', 'Extracts the selected pages into a new PDF, preserving order.')
+        description: t("extractPages.tooltip.description", "Extracts the selected pages into a new PDF, preserving order."),
       },
-      ...(base.tips || [])
-    ]
+      ...(base.tips || []),
+    ],
   };
 };
 
 export default useExtractPagesTips;
-
-
diff --git a/frontend/src/core/components/tooltips/useFlattenTips.ts b/frontend/src/core/components/tooltips/useFlattenTips.ts
index aa927594ba..a5a6ccf402 100644
--- a/frontend/src/core/components/tooltips/useFlattenTips.ts
+++ b/frontend/src/core/components/tooltips/useFlattenTips.ts
@@ -1,34 +1,40 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '@app/types/tips';
+import { useTranslation } from "react-i18next";
+import { TooltipContent } from "@app/types/tips";
 
 export const useFlattenTips = (): TooltipContent => {
   const { t } = useTranslation();
 
   return {
     header: {
-      title: t("flatten.tooltip.header.title", "About Flattening PDFs")
+      title: t("flatten.tooltip.header.title", "About Flattening PDFs"),
     },
     tips: [
       {
         title: t("flatten.tooltip.description.title", "What does flattening do?"),
-        description: t("flatten.tooltip.description.text", "Flattening makes your PDF non-editable by turning fillable forms and buttons into regular text and images. The PDF will look exactly the same, but no one can change or fill in the forms anymore. Perfect for sharing completed forms, creating final documents for records, or ensuring the PDF looks the same everywhere."),
+        description: t(
+          "flatten.tooltip.description.text",
+          "Flattening makes your PDF non-editable by turning fillable forms and buttons into regular text and images. The PDF will look exactly the same, but no one can change or fill in the forms anymore. Perfect for sharing completed forms, creating final documents for records, or ensuring the PDF looks the same everywhere.",
+        ),
         bullets: [
           t("flatten.tooltip.description.bullet1", "Text boxes become regular text (can't be edited)"),
           t("flatten.tooltip.description.bullet2", "Checkboxes and buttons become pictures"),
           t("flatten.tooltip.description.bullet3", "Great for final versions you don't want changed"),
-          t("flatten.tooltip.description.bullet4", "Ensures consistent appearance across all devices")
-        ]
+          t("flatten.tooltip.description.bullet4", "Ensures consistent appearance across all devices"),
+        ],
       },
       {
         title: t("flatten.tooltip.formsOnly.title", "What does 'Flatten only forms' mean?"),
-        description: t("flatten.tooltip.formsOnly.text", "This option only removes the ability to fill in forms, but keeps other features working like clicking links, viewing bookmarks, and reading comments."),
+        description: t(
+          "flatten.tooltip.formsOnly.text",
+          "This option only removes the ability to fill in forms, but keeps other features working like clicking links, viewing bookmarks, and reading comments.",
+        ),
         bullets: [
           t("flatten.tooltip.formsOnly.bullet1", "Forms become non-editable"),
           t("flatten.tooltip.formsOnly.bullet2", "Links still work when clicked"),
           t("flatten.tooltip.formsOnly.bullet3", "Comments and notes remain visible"),
-          t("flatten.tooltip.formsOnly.bullet4", "Bookmarks still help you navigate")
-        ]
-      }
-    ]
+          t("flatten.tooltip.formsOnly.bullet4", "Bookmarks still help you navigate"),
+        ],
+      },
+    ],
   };
-};
\ No newline at end of file
+};
diff --git a/frontend/src/core/components/tooltips/useGroupSigningTips.ts b/frontend/src/core/components/tooltips/useGroupSigningTips.ts
index d653b59560..dfa5907b75 100644
--- a/frontend/src/core/components/tooltips/useGroupSigningTips.ts
+++ b/frontend/src/core/components/tooltips/useGroupSigningTips.ts
@@ -1,48 +1,57 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '@app/types/tips';
+import { useTranslation } from "react-i18next";
+import { TooltipContent } from "@app/types/tips";
 
 export const useGroupSigningTips = (): TooltipContent => {
   const { t } = useTranslation();
 
   return {
     header: {
-      title: t('groupSigning.tooltip.header', 'About Group Signing'),
+      title: t("groupSigning.tooltip.header", "About Group Signing"),
     },
     tips: [
       {
-        title: t('groupSigning.tooltip.sequential.title', 'Sequential Signing'),
+        title: t("groupSigning.tooltip.sequential.title", "Sequential Signing"),
         description: t(
-          'groupSigning.tooltip.sequential.description',
-          'Participants sign documents in the order you specify. Each signer receives a notification when it is their turn.'
+          "groupSigning.tooltip.sequential.description",
+          "Participants sign documents in the order you specify. Each signer receives a notification when it is their turn.",
         ),
         bullets: [
-          t('groupSigning.tooltip.sequential.bullet1', 'First participant must sign before the second can access the document'),
-          t('groupSigning.tooltip.sequential.bullet2', 'Ensures proper signing order for legal compliance'),
-          t('groupSigning.tooltip.sequential.bullet3', 'You can reorder participants by dragging them in the list'),
+          t(
+            "groupSigning.tooltip.sequential.bullet1",
+            "First participant must sign before the second can access the document",
+          ),
+          t("groupSigning.tooltip.sequential.bullet2", "Ensures proper signing order for legal compliance"),
+          t("groupSigning.tooltip.sequential.bullet3", "You can reorder participants by dragging them in the list"),
         ],
       },
       {
-        title: t('groupSigning.tooltip.roles.title', 'Participant Roles'),
+        title: t("groupSigning.tooltip.roles.title", "Participant Roles"),
         description: t(
-          'groupSigning.tooltip.roles.description',
-          'You control the signature appearance settings for all participants.'
+          "groupSigning.tooltip.roles.description",
+          "You control the signature appearance settings for all participants.",
         ),
         bullets: [
-          t('groupSigning.tooltip.roles.bullet1', 'Owner (you): Creates session, configures signature defaults, finalizes document'),
-          t('groupSigning.tooltip.roles.bullet2', 'Participants: Create their signature, choose certificate, place on PDF'),
-          t('groupSigning.tooltip.roles.bullet3', 'Participants cannot modify signature visibility, reason, or location settings'),
+          t(
+            "groupSigning.tooltip.roles.bullet1",
+            "Owner (you): Creates session, configures signature defaults, finalizes document",
+          ),
+          t("groupSigning.tooltip.roles.bullet2", "Participants: Create their signature, choose certificate, place on PDF"),
+          t(
+            "groupSigning.tooltip.roles.bullet3",
+            "Participants cannot modify signature visibility, reason, or location settings",
+          ),
         ],
       },
       {
-        title: t('groupSigning.tooltip.finalization.title', 'Finalization Process'),
+        title: t("groupSigning.tooltip.finalization.title", "Finalization Process"),
         description: t(
-          'groupSigning.tooltip.finalization.description',
-          'Once all participants have signed (or you choose to finalize early), you can generate the final signed PDF.'
+          "groupSigning.tooltip.finalization.description",
+          "Once all participants have signed (or you choose to finalize early), you can generate the final signed PDF.",
         ),
         bullets: [
-          t('groupSigning.tooltip.finalization.bullet1', 'All signatures are applied in the participant order you specified'),
-          t('groupSigning.tooltip.finalization.bullet2', 'You can finalize with partial signatures if needed'),
-          t('groupSigning.tooltip.finalization.bullet3', 'Once finalized, the session cannot be modified'),
+          t("groupSigning.tooltip.finalization.bullet1", "All signatures are applied in the participant order you specified"),
+          t("groupSigning.tooltip.finalization.bullet2", "You can finalize with partial signatures if needed"),
+          t("groupSigning.tooltip.finalization.bullet3", "Once finalized, the session cannot be modified"),
         ],
       },
     ],
diff --git a/frontend/src/core/components/tooltips/useMergeTips.tsx b/frontend/src/core/components/tooltips/useMergeTips.tsx
index 741adccce5..aa0707c4c8 100644
--- a/frontend/src/core/components/tooltips/useMergeTips.tsx
+++ b/frontend/src/core/components/tooltips/useMergeTips.tsx
@@ -1,22 +1,28 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '@app/types/tips';
+import { useTranslation } from "react-i18next";
+import { TooltipContent } from "@app/types/tips";
 
 export const useMergeTips = (): TooltipContent => {
   const { t } = useTranslation();
 
   return {
     header: {
-      title: t('merge.tooltip.header.title', 'Merge Settings Overview')
+      title: t("merge.tooltip.header.title", "Merge Settings Overview"),
     },
     tips: [
       {
-        title: t('merge.removeDigitalSignature.tooltip.title', 'Remove Digital Signature'),
-        description: t('merge.removeDigitalSignature.tooltip.description', 'Digital signatures will be invalidated when merging files. Check this to remove them from the final merged PDF.')
+        title: t("merge.removeDigitalSignature.tooltip.title", "Remove Digital Signature"),
+        description: t(
+          "merge.removeDigitalSignature.tooltip.description",
+          "Digital signatures will be invalidated when merging files. Check this to remove them from the final merged PDF.",
+        ),
       },
       {
-        title: t('merge.generateTableOfContents.tooltip.title', 'Generate Table of Contents'),
-        description: t('merge.generateTableOfContents.tooltip.description', 'Automatically creates a clickable table of contents in the merged PDF based on the original file names and page numbers.')
-      }
-    ]
+        title: t("merge.generateTableOfContents.tooltip.title", "Generate Table of Contents"),
+        description: t(
+          "merge.generateTableOfContents.tooltip.description",
+          "Automatically creates a clickable table of contents in the merged PDF based on the original file names and page numbers.",
+        ),
+      },
+    ],
   };
 };
diff --git a/frontend/src/core/components/tooltips/useOCRTips.ts b/frontend/src/core/components/tooltips/useOCRTips.ts
index d571827119..7564fa0773 100644
--- a/frontend/src/core/components/tooltips/useOCRTips.ts
+++ b/frontend/src/core/components/tooltips/useOCRTips.ts
@@ -1,5 +1,5 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '@app/types/tips';
+import { useTranslation } from "react-i18next";
+import { TooltipContent } from "@app/types/tips";
 
 export const useOCRTips = (): TooltipContent => {
   const { t } = useTranslation();
@@ -11,16 +11,22 @@ export const useOCRTips = (): TooltipContent => {
     tips: [
       {
         title: t("ocr.tooltip.mode.title", "OCR Mode"),
-        description: t("ocr.tooltip.mode.text", "Optical Character Recognition (OCR) helps you turn scanned or screenshotted pages into text you can search, copy, or highlight."),
+        description: t(
+          "ocr.tooltip.mode.text",
+          "Optical Character Recognition (OCR) helps you turn scanned or screenshotted pages into text you can search, copy, or highlight.",
+        ),
         bullets: [
           t("ocr.tooltip.mode.bullet1", "Auto skips pages that already contain text layers."),
           t("ocr.tooltip.mode.bullet2", "Force re-OCRs every page and replaces all the text."),
-          t("ocr.tooltip.mode.bullet3", "Strict halts if any selectable text is found.")
-        ]
+          t("ocr.tooltip.mode.bullet3", "Strict halts if any selectable text is found."),
+        ],
       },
       {
         title: t("ocr.tooltip.languages.title", "Languages"),
-        description: t("ocr.tooltip.languages.text", "Improve OCR accuracy by specifying the expected languages. Choose one or more languages to guide detection.")
+        description: t(
+          "ocr.tooltip.languages.text",
+          "Improve OCR accuracy by specifying the expected languages. Choose one or more languages to guide detection.",
+        ),
       },
       {
         title: t("ocr.tooltip.output.title", "Output"),
@@ -28,9 +34,9 @@ export const useOCRTips = (): TooltipContent => {
         bullets: [
           t("ocr.tooltip.output.bullet1", "Searchable PDF embeds text behind the original image."),
           t("ocr.tooltip.output.bullet2", "HOCR XML returns a structured machine-readable file."),
-          t("ocr.tooltip.output.bullet3", "Plain-text sidecar creates a separate .txt file with raw content.")
-        ]
-      }
-    ]
+          t("ocr.tooltip.output.bullet3", "Plain-text sidecar creates a separate .txt file with raw content."),
+        ],
+      },
+    ],
   };
 };
diff --git a/frontend/src/core/components/tooltips/useOverlayPdfsTips.ts b/frontend/src/core/components/tooltips/useOverlayPdfsTips.ts
index cde2cd33b9..1bc8192a42 100644
--- a/frontend/src/core/components/tooltips/useOverlayPdfsTips.ts
+++ b/frontend/src/core/components/tooltips/useOverlayPdfsTips.ts
@@ -1,56 +1,60 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '@app/types/tips';
+import { useTranslation } from "react-i18next";
+import { TooltipContent } from "@app/types/tips";
 
 export const useOverlayPdfsTips = (): TooltipContent => {
   const { t } = useTranslation();
 
   return {
     header: {
-      title: t('overlay-pdfs.tooltip.header.title', 'Overlay PDFs Overview')
+      title: t("overlay-pdfs.tooltip.header.title", "Overlay PDFs Overview"),
     },
     tips: [
       {
-        title: t('overlay-pdfs.tooltip.description.title', 'Description'),
+        title: t("overlay-pdfs.tooltip.description.title", "Description"),
         description: t(
-          'overlay-pdfs.tooltip.description.text',
-          'Combine a original PDF with one or more overlay PDFs. Overlays can be applied page-by-page in different modes and placed in the foreground or background.'
-        )
+          "overlay-pdfs.tooltip.description.text",
+          "Combine a original PDF with one or more overlay PDFs. Overlays can be applied page-by-page in different modes and placed in the foreground or background.",
+        ),
       },
       {
-        title: t('overlay-pdfs.tooltip.mode.title', 'Overlay Mode'),
+        title: t("overlay-pdfs.tooltip.mode.title", "Overlay Mode"),
         description: t(
-          'overlay-pdfs.tooltip.mode.text',
-          'Choose how to distribute overlay pages across the original PDF pages.'
+          "overlay-pdfs.tooltip.mode.text",
+          "Choose how to distribute overlay pages across the original PDF pages.",
         ),
         bullets: [
-          t('overlay-pdfs.tooltip.mode.sequential', 'Sequential Overlay: Use pages from the first overlay PDF until it ends, then move to the next.'),
-          t('overlay-pdfs.tooltip.mode.interleaved', 'Interleaved Overlay: Take one page from each overlay in turn.'),
-          t('overlay-pdfs.tooltip.mode.fixedRepeat', 'Fixed Repeat Overlay: Take a set number of pages from each overlay before moving to the next. Use Counts to set the numbers.')
-        ]
+          t(
+            "overlay-pdfs.tooltip.mode.sequential",
+            "Sequential Overlay: Use pages from the first overlay PDF until it ends, then move to the next.",
+          ),
+          t("overlay-pdfs.tooltip.mode.interleaved", "Interleaved Overlay: Take one page from each overlay in turn."),
+          t(
+            "overlay-pdfs.tooltip.mode.fixedRepeat",
+            "Fixed Repeat Overlay: Take a set number of pages from each overlay before moving to the next. Use Counts to set the numbers.",
+          ),
+        ],
       },
       {
-        title: t('overlay-pdfs.tooltip.position.title', 'Overlay Position'),
+        title: t("overlay-pdfs.tooltip.position.title", "Overlay Position"),
         description: t(
-          'overlay-pdfs.tooltip.position.text',
-          'Foreground places the overlay on top of the page. Background places it behind.'
-        )
+          "overlay-pdfs.tooltip.position.text",
+          "Foreground places the overlay on top of the page. Background places it behind.",
+        ),
       },
       {
-        title: t('overlay-pdfs.tooltip.overlayFiles.title', 'Overlay Files'),
+        title: t("overlay-pdfs.tooltip.overlayFiles.title", "Overlay Files"),
         description: t(
-          'overlay-pdfs.tooltip.overlayFiles.text',
-          'Select one or more PDFs to overlay on the original. The order of these files affects how pages are applied in Sequential and Fixed Repeat modes.'
-        )
+          "overlay-pdfs.tooltip.overlayFiles.text",
+          "Select one or more PDFs to overlay on the original. The order of these files affects how pages are applied in Sequential and Fixed Repeat modes.",
+        ),
       },
       {
-        title: t('overlay-pdfs.tooltip.counts.title', 'Counts (Fixed Repeat only)'),
+        title: t("overlay-pdfs.tooltip.counts.title", "Counts (Fixed Repeat only)"),
         description: t(
-          'overlay-pdfs.tooltip.counts.text',
-          'Provide a positive number for each overlay file showing how many pages to take before moving to the next. Required when mode is Fixed Repeat.'
-        )
-      }
-    ]
+          "overlay-pdfs.tooltip.counts.text",
+          "Provide a positive number for each overlay file showing how many pages to take before moving to the next. Required when mode is Fixed Repeat.",
+        ),
+      },
+    ],
   };
 };
-
-
diff --git a/frontend/src/core/components/tooltips/usePageSelectionTips.ts b/frontend/src/core/components/tooltips/usePageSelectionTips.ts
index 19c03116fa..9c094b6da6 100644
--- a/frontend/src/core/components/tooltips/usePageSelectionTips.ts
+++ b/frontend/src/core/components/tooltips/usePageSelectionTips.ts
@@ -1,44 +1,48 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '@app/types/tips';
+import { useTranslation } from "react-i18next";
+import { TooltipContent } from "@app/types/tips";
 
 export const usePageSelectionTips = (): TooltipContent => {
   const { t } = useTranslation();
 
   return {
     header: {
-      title: t('bulkSelection.header.title', 'Page Selection Guide'),
+      title: t("bulkSelection.header.title", "Page Selection Guide"),
     },
     tips: [
       {
-        title: t('bulkSelection.syntax.title', 'Syntax Basics'),
-        description: t('bulkSelection.syntax.text', 'Use numbers, ranges, keywords, and progressions (n starts at 0). Parentheses are supported.'),
+        title: t("bulkSelection.syntax.title", "Syntax Basics"),
+        description: t(
+          "bulkSelection.syntax.text",
+          "Use numbers, ranges, keywords, and progressions (n starts at 0). Parentheses are supported.",
+        ),
         bullets: [
-          t('bulkSelection.syntax.bullets.numbers', 'Numbers/ranges: 5, 10-20'),
-          t('bulkSelection.syntax.bullets.keywords', 'Keywords: odd, even'),
-          t('bulkSelection.syntax.bullets.progressions', 'Progressions: 3n, 4n+1'),
-        ]
+          t("bulkSelection.syntax.bullets.numbers", "Numbers/ranges: 5, 10-20"),
+          t("bulkSelection.syntax.bullets.keywords", "Keywords: odd, even"),
+          t("bulkSelection.syntax.bullets.progressions", "Progressions: 3n, 4n+1"),
+        ],
       },
       {
-        title: t('bulkSelection.operators.title', 'Operators'),
-        description: t('bulkSelection.operators.text', 'AND has higher precedence than comma. NOT applies within the document range.'),
+        title: t("bulkSelection.operators.title", "Operators"),
+        description: t(
+          "bulkSelection.operators.text",
+          "AND has higher precedence than comma. NOT applies within the document range.",
+        ),
         bullets: [
-          t('bulkSelection.operators.and', 'AND: & or "and" — require both conditions (e.g., 1-50 & even)'),
-          t('bulkSelection.operators.comma', 'Comma: , or | — combine selections (e.g., 1-10, 20)'),
-          t('bulkSelection.operators.not', 'NOT: ! or "not" — exclude pages (e.g., 3n & not 30)'),
-        ]
+          t("bulkSelection.operators.and", 'AND: & or "and" — require both conditions (e.g., 1-50 & even)'),
+          t("bulkSelection.operators.comma", "Comma: , or | — combine selections (e.g., 1-10, 20)"),
+          t("bulkSelection.operators.not", 'NOT: ! or "not" — exclude pages (e.g., 3n & not 30)'),
+        ],
       },
       {
-        title: t('bulkSelection.examples.title', 'Examples'),
+        title: t("bulkSelection.examples.title", "Examples"),
         bullets: [
-          `${t('bulkSelection.examples.first50', 'First 50')}: 1-50`,
-          `${t('bulkSelection.examples.last50', 'Last 50')}: 451-500`,
-          `${t('bulkSelection.examples.every3rd', 'Every 3rd')}: 3n`,
-          `${t('bulkSelection.examples.oddWithinExcluding', 'Odd within 1-20 excluding 5-7')}: 1-20 & odd & !5-7`,
-          `${t('bulkSelection.examples.combineSets', 'Combine sets')}: 1-50, 451-500`,
-        ]
-      }
-    ]
+          `${t("bulkSelection.examples.first50", "First 50")}: 1-50`,
+          `${t("bulkSelection.examples.last50", "Last 50")}: 451-500`,
+          `${t("bulkSelection.examples.every3rd", "Every 3rd")}: 3n`,
+          `${t("bulkSelection.examples.oddWithinExcluding", "Odd within 1-20 excluding 5-7")}: 1-20 & odd & !5-7`,
+          `${t("bulkSelection.examples.combineSets", "Combine sets")}: 1-50, 451-500`,
+        ],
+      },
+    ],
   };
 };
-
-
diff --git a/frontend/src/core/components/tooltips/usePageSelectionTips.tsx b/frontend/src/core/components/tooltips/usePageSelectionTips.tsx
index aed449cd40..d31f750c74 100644
--- a/frontend/src/core/components/tooltips/usePageSelectionTips.tsx
+++ b/frontend/src/core/components/tooltips/usePageSelectionTips.tsx
@@ -1,5 +1,5 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '@app/types/tips';
+import { useTranslation } from "react-i18next";
+import { TooltipContent } from "@app/types/tips";
 
 /**
  * Reusable tooltip for page selection functionality.
@@ -10,19 +10,22 @@ export const usePageSelectionTips = (): TooltipContent => {
 
   return {
     header: {
-      title: t("pageSelection.tooltip.header.title", "Page Selection Guide")
+      title: t("pageSelection.tooltip.header.title", "Page Selection Guide"),
     },
     tips: [
       {
-        description: t("pageSelection.tooltip.description", "Choose which pages to use for the operation. Supports single pages, ranges, formulas, and the all keyword.")
+        description: t(
+          "pageSelection.tooltip.description",
+          "Choose which pages to use for the operation. Supports single pages, ranges, formulas, and the all keyword.",
+        ),
       },
       {
         title: t("pageSelection.tooltip.individual.title", "Individual Pages"),
         description: t("pageSelection.tooltip.individual.description", "Enter numbers separated by commas."),
         bullets: [
           t("pageSelection.tooltip.individual.bullet1", "<strong>1,3,5</strong> → selects pages 1, 3, 5"),
-          t("pageSelection.tooltip.individual.bullet2", "<strong>2,7,12</strong> → selects pages 2, 7, 12")
-        ]
+          t("pageSelection.tooltip.individual.bullet2", "<strong>2,7,12</strong> → selects pages 2, 7, 12"),
+        ],
       },
       {
         title: t("pageSelection.tooltip.ranges.title", "Page Ranges"),
@@ -30,33 +33,31 @@ export const usePageSelectionTips = (): TooltipContent => {
         bullets: [
           t("pageSelection.tooltip.ranges.bullet1", "<strong>3-6</strong> → selects pages 3–6"),
           t("pageSelection.tooltip.ranges.bullet2", "<strong>10-15</strong> → selects pages 10–15"),
-          t("pageSelection.tooltip.ranges.bullet3", "<strong>5-</strong> → selects pages 5 to end")
-        ]
+          t("pageSelection.tooltip.ranges.bullet3", "<strong>5-</strong> → selects pages 5 to end"),
+        ],
       },
       {
         title: t("pageSelection.tooltip.mathematical.title", "Mathematical Functions"),
         description: t("pageSelection.tooltip.mathematical.description", "Use n in formulas for patterns."),
         bullets: [
-		  t("pageSelection.tooltip.mathematical.bullet2", "<strong>2n-1</strong> → all odd pages (1, 3, 5…)"),
+          t("pageSelection.tooltip.mathematical.bullet2", "<strong>2n-1</strong> → all odd pages (1, 3, 5…)"),
           t("pageSelection.tooltip.mathematical.bullet1", "<strong>2n</strong> → all even pages (2, 4, 6…)"),
           t("pageSelection.tooltip.mathematical.bullet3", "<strong>3n</strong> → every 3rd page (3, 6, 9…)"),
-          t("pageSelection.tooltip.mathematical.bullet4", "<strong>4n-1</strong> → pages 3, 7, 11, 15…")
-        ]
+          t("pageSelection.tooltip.mathematical.bullet4", "<strong>4n-1</strong> → pages 3, 7, 11, 15…"),
+        ],
       },
       {
         title: t("pageSelection.tooltip.special.title", "Special Keywords"),
-        bullets: [
-          t("pageSelection.tooltip.special.bullet1", "<strong>all</strong> → selects all pages"),
-        ]
+        bullets: [t("pageSelection.tooltip.special.bullet1", "<strong>all</strong> → selects all pages")],
       },
       {
         title: t("pageSelection.tooltip.complex.title", "Complex Combinations"),
         description: t("pageSelection.tooltip.complex.description", "Mix different types."),
         bullets: [
           t("pageSelection.tooltip.complex.bullet1", "<strong>1,3-5,8,2n</strong> → pages 1, 3–5, 8, plus evens"),
-          t("pageSelection.tooltip.complex.bullet2", "<strong>10-,2n-1</strong> → from page 10 to end + odd pages")
-        ]
-      }
-    ]
+          t("pageSelection.tooltip.complex.bullet2", "<strong>10-,2n-1</strong> → from page 10 to end + odd pages"),
+        ],
+      },
+    ],
   };
-};
\ No newline at end of file
+};
diff --git a/frontend/src/core/components/tooltips/usePdfTextEditorTips.ts b/frontend/src/core/components/tooltips/usePdfTextEditorTips.ts
index 3d9e473b1a..4999eee798 100644
--- a/frontend/src/core/components/tooltips/usePdfTextEditorTips.ts
+++ b/frontend/src/core/components/tooltips/usePdfTextEditorTips.ts
@@ -1,36 +1,35 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '@app/types/tips';
+import { useTranslation } from "react-i18next";
+import { TooltipContent } from "@app/types/tips";
 
 export const usePdfTextEditorTips = (): TooltipContent => {
   const { t } = useTranslation();
 
   return {
     header: {
-      title: t('pdfTextEditor.tooltip.header.title', 'Preview Limitations'),
+      title: t("pdfTextEditor.tooltip.header.title", "Preview Limitations"),
     },
     tips: [
       {
-        title: t('pdfTextEditor.tooltip.textFocus.title', 'Text and Image Focus'),
+        title: t("pdfTextEditor.tooltip.textFocus.title", "Text and Image Focus"),
         description: t(
-          'pdfTextEditor.tooltip.textFocus.text',
-          'This workspace focuses on editing text and repositioning embedded images. Complex page artwork, form widgets, and layered graphics are preserved for export but are not fully editable here.'
+          "pdfTextEditor.tooltip.textFocus.text",
+          "This workspace focuses on editing text and repositioning embedded images. Complex page artwork, form widgets, and layered graphics are preserved for export but are not fully editable here.",
         ),
       },
       {
-        title: t('pdfTextEditor.tooltip.previewVariance.title', 'Preview Variance'),
+        title: t("pdfTextEditor.tooltip.previewVariance.title", "Preview Variance"),
         description: t(
-          'pdfTextEditor.tooltip.previewVariance.text',
-          'Some visuals (such as table borders, shapes, or annotation appearances) may not display exactly in the preview. The exported PDF keeps the original drawing commands whenever possible.'
+          "pdfTextEditor.tooltip.previewVariance.text",
+          "Some visuals (such as table borders, shapes, or annotation appearances) may not display exactly in the preview. The exported PDF keeps the original drawing commands whenever possible.",
         ),
       },
       {
-        title: t('pdfTextEditor.tooltip.alpha.title', 'Alpha Viewer'),
+        title: t("pdfTextEditor.tooltip.alpha.title", "Alpha Viewer"),
         description: t(
-          'pdfTextEditor.tooltip.alpha.text',
-          'This alpha viewer is still evolving—certain fonts, colours, transparency effects, and layout details may shift slightly. Please double-check the generated PDF before sharing.'
+          "pdfTextEditor.tooltip.alpha.text",
+          "This alpha viewer is still evolving—certain fonts, colours, transparency effects, and layout details may shift slightly. Please double-check the generated PDF before sharing.",
         ),
       },
     ],
   };
 };
-
diff --git a/frontend/src/core/components/tooltips/useRedactTips.ts b/frontend/src/core/components/tooltips/useRedactTips.ts
index e76cb032f6..04f4fd945a 100644
--- a/frontend/src/core/components/tooltips/useRedactTips.ts
+++ b/frontend/src/core/components/tooltips/useRedactTips.ts
@@ -1,23 +1,29 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '@app/types/tips';
+import { useTranslation } from "react-i18next";
+import { TooltipContent } from "@app/types/tips";
 
 export const useRedactModeTips = (): TooltipContent => {
   const { t } = useTranslation();
 
   return {
     header: {
-      title: t("redact.tooltip.mode.header.title", "Redaction Method")
+      title: t("redact.tooltip.mode.header.title", "Redaction Method"),
     },
     tips: [
       {
         title: t("redact.tooltip.mode.automatic.title", "Automatic Redaction"),
-        description: t("redact.tooltip.mode.automatic.text", "Automatically finds and redacts specified text throughout the document. Perfect for removing consistent sensitive information like names, SSNs, or confidential markers.")
+        description: t(
+          "redact.tooltip.mode.automatic.text",
+          "Automatically finds and redacts specified text throughout the document. Perfect for removing consistent sensitive information like names, SSNs, or confidential markers.",
+        ),
       },
       {
         title: t("redact.tooltip.mode.manual.title", "Manual Redaction"),
-        description: t("redact.tooltip.mode.manual.text", "Click and drag to manually select specific areas to redact. Gives you precise control over what gets redacted. (Coming soon)")
-      }
-    ]
+        description: t(
+          "redact.tooltip.mode.manual.text",
+          "Click and drag to manually select specific areas to redact. Gives you precise control over what gets redacted. (Coming soon)",
+        ),
+      },
+    ],
   };
 };
 
@@ -26,23 +32,29 @@ export const useRedactWordsTips = (): TooltipContent => {
 
   return {
     header: {
-      title: t("redact.tooltip.words.header.title", "Words to Redact")
+      title: t("redact.tooltip.words.header.title", "Words to Redact"),
     },
     tips: [
       {
         title: t("redact.tooltip.words.description.title", "Text Matching"),
-        description: t("redact.tooltip.words.description.text", "Enter words or phrases to find and redact in your document. Each word will be searched for separately."),
+        description: t(
+          "redact.tooltip.words.description.text",
+          "Enter words or phrases to find and redact in your document. Each word will be searched for separately.",
+        ),
         bullets: [
           t("redact.tooltip.words.bullet1", "Add one word at a time"),
           t("redact.tooltip.words.bullet2", "Press Enter or click 'Add Another' to add"),
-          t("redact.tooltip.words.bullet3", "Click × to remove words")
-        ]
+          t("redact.tooltip.words.bullet3", "Click × to remove words"),
+        ],
       },
       {
         title: t("redact.tooltip.words.examples.title", "Common Examples"),
-        description: t("redact.tooltip.words.examples.text", "Typical words to redact include: bank details, email addresses, or specific names.")
-      }
-    ]
+        description: t(
+          "redact.tooltip.words.examples.text",
+          "Typical words to redact include: bank details, email addresses, or specific names.",
+        ),
+      },
+    ],
   };
 };
 
@@ -51,30 +63,42 @@ export const useRedactAdvancedTips = (): TooltipContent => {
 
   return {
     header: {
-      title: t("redact.tooltip.advanced.header.title", "Advanced Redaction Settings")
+      title: t("redact.tooltip.advanced.header.title", "Advanced Redaction Settings"),
     },
     tips: [
       {
         title: t("redact.tooltip.advanced.color.title", "Box Colour & Padding"),
-        description: t("redact.tooltip.advanced.color.text", "Customise the appearance of redaction boxes. Black is standard, but you can choose any colour. Padding adds extra space around the found text."),
+        description: t(
+          "redact.tooltip.advanced.color.text",
+          "Customise the appearance of redaction boxes. Black is standard, but you can choose any colour. Padding adds extra space around the found text.",
+        ),
       },
       {
         title: t("redact.tooltip.advanced.regex.title", "Use Regex"),
-        description: t("redact.tooltip.advanced.regex.text", "Enable regular expressions for advanced pattern matching. Useful for finding phone numbers, emails, or complex patterns."),
+        description: t(
+          "redact.tooltip.advanced.regex.text",
+          "Enable regular expressions for advanced pattern matching. Useful for finding phone numbers, emails, or complex patterns.",
+        ),
         bullets: [
           t("redact.tooltip.advanced.regex.bullet1", "Example: \\d{4}-\\d{2}-\\d{2} to match any dates in YYYY-MM-DD format"),
-          t("redact.tooltip.advanced.regex.bullet2", "Use with caution - test thoroughly")
-        ]
+          t("redact.tooltip.advanced.regex.bullet2", "Use with caution - test thoroughly"),
+        ],
       },
       {
         title: t("redact.tooltip.advanced.wholeWord.title", "Whole Word Search"),
-        description: t("redact.tooltip.advanced.wholeWord.text", "Only match complete words, not partial matches. 'John' won't match 'Johnson' when enabled.")
+        description: t(
+          "redact.tooltip.advanced.wholeWord.text",
+          "Only match complete words, not partial matches. 'John' won't match 'Johnson' when enabled.",
+        ),
       },
       {
         title: t("redact.tooltip.advanced.convert.title", "Convert to PDF-Image"),
-        description: t("redact.tooltip.advanced.convert.text", "Converts the PDF to an image-based PDF after redaction. This ensures text behind redaction boxes is completely removed and unrecoverable.")
-      }
-    ]
+        description: t(
+          "redact.tooltip.advanced.convert.text",
+          "Converts the PDF to an image-based PDF after redaction. This ensures text behind redaction boxes is completely removed and unrecoverable.",
+        ),
+      },
+    ],
   };
 };
 
@@ -83,26 +107,35 @@ export const useRedactManualTips = (): TooltipContent => {
 
   return {
     header: {
-      title: t("redact.tooltip.manual.header.title", "Manual Redaction Controls")
+      title: t("redact.tooltip.manual.header.title", "Manual Redaction Controls"),
     },
     tips: [
       {
         title: t("redact.tooltip.manual.markText.title", "Mark Text Tool"),
-        description: t("redact.tooltip.manual.markText.text", "Select text directly on the PDF to mark it for redaction. Click and drag to highlight specific text that you want to redact."),
+        description: t(
+          "redact.tooltip.manual.markText.text",
+          "Select text directly on the PDF to mark it for redaction. Click and drag to highlight specific text that you want to redact.",
+        ),
       },
       {
         title: t("redact.tooltip.manual.markArea.title", "Mark Area Tool"),
-        description: t("redact.tooltip.manual.markArea.text", "Draw rectangular areas on the PDF to mark regions for redaction. Useful for redacting images, signatures, or irregular shapes."),
+        description: t(
+          "redact.tooltip.manual.markArea.text",
+          "Draw rectangular areas on the PDF to mark regions for redaction. Useful for redacting images, signatures, or irregular shapes.",
+        ),
       },
       {
         title: t("redact.tooltip.manual.apply.title", "Apply Redactions"),
-        description: t("redact.tooltip.manual.apply.text", "After marking content, click 'Apply' to permanently redact all marked areas. The pending count shows how many redactions are ready to be applied."),
+        description: t(
+          "redact.tooltip.manual.apply.text",
+          "After marking content, click 'Apply' to permanently redact all marked areas. The pending count shows how many redactions are ready to be applied.",
+        ),
         bullets: [
           t("redact.tooltip.manual.apply.bullet1", "Mark as many areas as needed before applying"),
           t("redact.tooltip.manual.apply.bullet2", "All pending redactions are applied at once"),
-          t("redact.tooltip.manual.apply.bullet3", "Redactions cannot be undone after applying")
-        ]
-      }
-    ]
+          t("redact.tooltip.manual.apply.bullet3", "Redactions cannot be undone after applying"),
+        ],
+      },
+    ],
   };
 };
diff --git a/frontend/src/core/components/tooltips/useRemoveAnnotationsTips.ts b/frontend/src/core/components/tooltips/useRemoveAnnotationsTips.ts
index edaa039236..7b917fdbc6 100644
--- a/frontend/src/core/components/tooltips/useRemoveAnnotationsTips.ts
+++ b/frontend/src/core/components/tooltips/useRemoveAnnotationsTips.ts
@@ -1,20 +1,21 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '@app/types/tips';
+import { useTranslation } from "react-i18next";
+import { TooltipContent } from "@app/types/tips";
 
 export const useRemoveAnnotationsTips = (): TooltipContent => {
   const { t } = useTranslation();
 
   return {
     header: {
-      title: t("removeAnnotations.tooltip.header.title", "About Remove Annotations")
+      title: t("removeAnnotations.tooltip.header.title", "About Remove Annotations"),
     },
     tips: [
       {
         title: t("removeAnnotations.tooltip.description.title", "What it does"),
-        description: t('removeAnnotations.info.description',
-          'This tool will remove all annotations (comments, highlights, notes, etc.) from your PDF documents.'
+        description: t(
+          "removeAnnotations.info.description",
+          "This tool will remove all annotations (comments, highlights, notes, etc.) from your PDF documents.",
         ),
-      }
-    ]
+      },
+    ],
   };
 };
diff --git a/frontend/src/core/components/tooltips/useRemoveBlanksTips.ts b/frontend/src/core/components/tooltips/useRemoveBlanksTips.ts
index ef054bdb83..7c90068d62 100644
--- a/frontend/src/core/components/tooltips/useRemoveBlanksTips.ts
+++ b/frontend/src/core/components/tooltips/useRemoveBlanksTips.ts
@@ -1,5 +1,5 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '@app/types/tips';
+import { useTranslation } from "react-i18next";
+import { TooltipContent } from "@app/types/tips";
 
 export const useRemoveBlanksTips = (): TooltipContent => {
   const { t } = useTranslation();
@@ -11,31 +11,40 @@ export const useRemoveBlanksTips = (): TooltipContent => {
     tips: [
       {
         title: t("removeBlanks.tooltip.threshold.title", "Pixel Whiteness Threshold"),
-        description: t("removeBlanks.tooltip.threshold.text", "Controls how white a pixel must be to be considered 'white'. This helps determine what counts as a blank area on the page."),
+        description: t(
+          "removeBlanks.tooltip.threshold.text",
+          "Controls how white a pixel must be to be considered 'white'. This helps determine what counts as a blank area on the page.",
+        ),
         bullets: [
           t("removeBlanks.tooltip.threshold.bullet1", "0 = Pure black (most restrictive)"),
           t("removeBlanks.tooltip.threshold.bullet2", "128 = Medium gray"),
-          t("removeBlanks.tooltip.threshold.bullet3", "255 = Pure white (least restrictive)")
-        ]
+          t("removeBlanks.tooltip.threshold.bullet3", "255 = Pure white (least restrictive)"),
+        ],
       },
       {
         title: t("removeBlanks.tooltip.whitePercent.title", "White Percentage Threshold"),
-        description: t("removeBlanks.tooltip.whitePercent.text", "Sets the minimum percentage of white pixels required for a page to be considered blank and removed."),
+        description: t(
+          "removeBlanks.tooltip.whitePercent.text",
+          "Sets the minimum percentage of white pixels required for a page to be considered blank and removed.",
+        ),
         bullets: [
           t("removeBlanks.tooltip.whitePercent.bullet1", "Lower values (e.g., 80%) = More pages removed"),
           t("removeBlanks.tooltip.whitePercent.bullet2", "Higher values (e.g., 95%) = Only very blank pages removed"),
-          t("removeBlanks.tooltip.whitePercent.bullet3", "Use higher values for documents with light backgrounds")
-        ]
+          t("removeBlanks.tooltip.whitePercent.bullet3", "Use higher values for documents with light backgrounds"),
+        ],
       },
       {
         title: t("removeBlanks.tooltip.includeBlankPages.title", "Include Detected Blank Pages"),
-        description: t("removeBlanks.tooltip.includeBlankPages.text", "When enabled, creates a separate PDF containing all the blank pages that were detected and removed from the original document."),
+        description: t(
+          "removeBlanks.tooltip.includeBlankPages.text",
+          "When enabled, creates a separate PDF containing all the blank pages that were detected and removed from the original document.",
+        ),
         bullets: [
           t("removeBlanks.tooltip.includeBlankPages.bullet1", "Useful for reviewing what was removed"),
           t("removeBlanks.tooltip.includeBlankPages.bullet2", "Helps verify the detection accuracy"),
-          t("removeBlanks.tooltip.includeBlankPages.bullet3", "Can be disabled to reduce output file size")
-        ]
-      }
-    ]
+          t("removeBlanks.tooltip.includeBlankPages.bullet3", "Can be disabled to reduce output file size"),
+        ],
+      },
+    ],
   };
 };
diff --git a/frontend/src/core/components/tooltips/useRemovePagesTips.ts b/frontend/src/core/components/tooltips/useRemovePagesTips.ts
index a20fbc81da..cfb856d382 100644
--- a/frontend/src/core/components/tooltips/useRemovePagesTips.ts
+++ b/frontend/src/core/components/tooltips/useRemovePagesTips.ts
@@ -1,5 +1,5 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '@app/types/tips';
+import { useTranslation } from "react-i18next";
+import { TooltipContent } from "@app/types/tips";
 
 export const useRemovePagesTips = (): TooltipContent => {
   const { t } = useTranslation();
@@ -11,13 +11,16 @@ export const useRemovePagesTips = (): TooltipContent => {
     tips: [
       {
         title: t("removePages.tooltip.pageNumbers.title", "Page Selection"),
-        description: t("removePages.tooltip.pageNumbers.text", "Specify which pages to remove from your PDF. You can select individual pages, ranges, or use mathematical expressions."),
+        description: t(
+          "removePages.tooltip.pageNumbers.text",
+          "Specify which pages to remove from your PDF. You can select individual pages, ranges, or use mathematical expressions.",
+        ),
         bullets: [
           t("removePages.tooltip.pageNumbers.bullet1", "Individual pages: 1,3,5 (removes pages 1, 3, and 5)"),
           t("removePages.tooltip.pageNumbers.bullet2", "Page ranges: 1-5,10-15 (removes pages 1-5 and 10-15)"),
           t("removePages.tooltip.pageNumbers.bullet3", "Mathematical: 2n+1 (removes odd pages)"),
-          t("removePages.tooltip.pageNumbers.bullet4", "Open ranges: 5- (removes from page 5 to end)")
-        ]
+          t("removePages.tooltip.pageNumbers.bullet4", "Open ranges: 5- (removes from page 5 to end)"),
+        ],
       },
       {
         title: t("removePages.tooltip.examples.title", "Common Examples"),
@@ -26,9 +29,9 @@ export const useRemovePagesTips = (): TooltipContent => {
           t("removePages.tooltip.examples.bullet1", "Remove first page: 1"),
           t("removePages.tooltip.examples.bullet2", "Remove last 3 pages: -3"),
           t("removePages.tooltip.examples.bullet3", "Remove every other page: 2n"),
-          t("removePages.tooltip.examples.bullet4", "Remove specific scattered pages: 1,5,10,15")
-        ]
-      }
-    ]
+          t("removePages.tooltip.examples.bullet4", "Remove specific scattered pages: 1,5,10,15"),
+        ],
+      },
+    ],
   };
 };
diff --git a/frontend/src/core/components/tooltips/useRemovePasswordTips.ts b/frontend/src/core/components/tooltips/useRemovePasswordTips.ts
index 06ad72abf6..6148e9c8be 100644
--- a/frontend/src/core/components/tooltips/useRemovePasswordTips.ts
+++ b/frontend/src/core/components/tooltips/useRemovePasswordTips.ts
@@ -1,20 +1,20 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '@app/types/tips';
+import { useTranslation } from "react-i18next";
+import { TooltipContent } from "@app/types/tips";
 
 export const useRemovePasswordTips = (): TooltipContent => {
   const { t } = useTranslation();
 
   return {
     header: {
-      title: t("removePassword.title", "Remove Password")
+      title: t("removePassword.title", "Remove Password"),
     },
     tips: [
       {
         description: t(
           "removePassword.tooltip.description",
-          "Removing password protection requires the current password that was used to encrypt the PDF. This will decrypt the document, making it accessible without a password."
-        )
-      }
-    ]
+          "Removing password protection requires the current password that was used to encrypt the PDF. This will decrypt the document, making it accessible without a password.",
+        ),
+      },
+    ],
   };
 };
diff --git a/frontend/src/core/components/tooltips/useReplaceColorTips.ts b/frontend/src/core/components/tooltips/useReplaceColorTips.ts
index a6c3808d11..18332402c6 100644
--- a/frontend/src/core/components/tooltips/useReplaceColorTips.ts
+++ b/frontend/src/core/components/tooltips/useReplaceColorTips.ts
@@ -1,44 +1,59 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '@app/types/tips';
+import { useTranslation } from "react-i18next";
+import { TooltipContent } from "@app/types/tips";
 
 export const useReplaceColorTips = (): TooltipContent => {
   const { t } = useTranslation();
 
   return {
     header: {
-      title: t("replaceColor.tooltip.header.title", "Replace & Invert Colour Settings Overview")
+      title: t("replaceColor.tooltip.header.title", "Replace & Invert Colour Settings Overview"),
     },
     tips: [
       {
         title: t("replaceColor.tooltip.description.title", "Description"),
-        description: t("replaceColor.tooltip.description.text", "Transform PDF colours to improve readability and accessibility. Choose from high contrast presets, invert all colours, or create custom colour schemes.")
+        description: t(
+          "replaceColor.tooltip.description.text",
+          "Transform PDF colours to improve readability and accessibility. Choose from high contrast presets, invert all colours, or create custom colour schemes.",
+        ),
       },
       {
         title: t("replaceColor.tooltip.highContrast.title", "High Contrast"),
-        description: t("replaceColor.tooltip.highContrast.text", "Apply predefined high contrast colour combinations designed for better readability and accessibility compliance."),
+        description: t(
+          "replaceColor.tooltip.highContrast.text",
+          "Apply predefined high contrast colour combinations designed for better readability and accessibility compliance.",
+        ),
         bullets: [
           t("replaceColor.tooltip.highContrast.bullet1", "White text on black background - Classic dark mode"),
           t("replaceColor.tooltip.highContrast.bullet2", "Black text on white background - Standard high contrast"),
           t("replaceColor.tooltip.highContrast.bullet3", "Yellow text on black background - High visibility option"),
-          t("replaceColor.tooltip.highContrast.bullet4", "Green text on black background - Alternative high contrast")
-        ]
+          t("replaceColor.tooltip.highContrast.bullet4", "Green text on black background - Alternative high contrast"),
+        ],
       },
       {
         title: t("replaceColor.tooltip.invertAll.title", "Invert All Colours"),
-        description: t("replaceColor.tooltip.invertAll.text", "Completely invert all colours in the PDF, creating a negative-like effect. Useful for creating dark mode versions of documents or reducing eye strain in low-light conditions.")
+        description: t(
+          "replaceColor.tooltip.invertAll.text",
+          "Completely invert all colours in the PDF, creating a negative-like effect. Useful for creating dark mode versions of documents or reducing eye strain in low-light conditions.",
+        ),
       },
       {
         title: t("replaceColor.tooltip.custom.title", "Custom Colours"),
-        description: t("replaceColor.tooltip.custom.text", "Define your own text and background colours using the colour pickers. Perfect for creating branded documents or specific accessibility requirements."),
+        description: t(
+          "replaceColor.tooltip.custom.text",
+          "Define your own text and background colours using the colour pickers. Perfect for creating branded documents or specific accessibility requirements.",
+        ),
         bullets: [
           t("replaceColor.tooltip.custom.bullet1", "Text colour - Choose the colour for text elements"),
-          t("replaceColor.tooltip.custom.bullet2", "Background colour - Set the background colour for the document")
-        ]
+          t("replaceColor.tooltip.custom.bullet2", "Background colour - Set the background colour for the document"),
+        ],
       },
       {
         title: t("replaceColor.tooltip.cmyk.title", "Convert to CMYK"),
-        description: t("replaceColor.tooltip.cmyk.text", "Convert the PDF from RGB colour space to CMYK colour space, optimized for professional printing. This process converts colours to the Cyan, Magenta, Yellow, Black model used by printers.")
-      }
-    ]
+        description: t(
+          "replaceColor.tooltip.cmyk.text",
+          "Convert the PDF from RGB colour space to CMYK colour space, optimized for professional printing. This process converts colours to the Cyan, Magenta, Yellow, Black model used by printers.",
+        ),
+      },
+    ],
   };
 };
diff --git a/frontend/src/core/components/tooltips/useRotateTips.ts b/frontend/src/core/components/tooltips/useRotateTips.ts
index 83ad3e85ec..6da47f909b 100644
--- a/frontend/src/core/components/tooltips/useRotateTips.ts
+++ b/frontend/src/core/components/tooltips/useRotateTips.ts
@@ -1,5 +1,5 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '@app/types/tips';
+import { useTranslation } from "react-i18next";
+import { TooltipContent } from "@app/types/tips";
 
 export const useRotateTips = (): TooltipContent => {
   const { t } = useTranslation();
@@ -10,11 +10,17 @@ export const useRotateTips = (): TooltipContent => {
     },
     tips: [
       {
-        description: t("rotate.tooltip.description.text", "Rotate your PDF pages clockwise or anticlockwise in 90-degree increments. All pages in the PDF will be rotated. The preview shows how your document will look after rotation."),
+        description: t(
+          "rotate.tooltip.description.text",
+          "Rotate your PDF pages clockwise or anticlockwise in 90-degree increments. All pages in the PDF will be rotated. The preview shows how your document will look after rotation.",
+        ),
       },
       {
         title: t("rotate.tooltip.controls.title", "Controls"),
-        description: t("rotate.tooltip.controls.text", "Use the rotation buttons to adjust orientation. Left button rotates anticlockwise, right button rotates clockwise. Each click rotates by 90 degrees."),
+        description: t(
+          "rotate.tooltip.controls.text",
+          "Use the rotation buttons to adjust orientation. Left button rotates anticlockwise, right button rotates clockwise. Each click rotates by 90 degrees.",
+        ),
       },
     ],
   };
diff --git a/frontend/src/core/components/tooltips/useScannerImageSplitTips.ts b/frontend/src/core/components/tooltips/useScannerImageSplitTips.ts
index 022a305534..0b613714af 100644
--- a/frontend/src/core/components/tooltips/useScannerImageSplitTips.ts
+++ b/frontend/src/core/components/tooltips/useScannerImageSplitTips.ts
@@ -1,54 +1,56 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '@app/types/tips';
+import { useTranslation } from "react-i18next";
+import { TooltipContent } from "@app/types/tips";
 
 export const useScannerImageSplitTips = (): TooltipContent => {
   const { t } = useTranslation();
 
   return {
     header: {
-      title: t('scannerImageSplit.tooltip.title', 'Photo Splitter')
+      title: t("scannerImageSplit.tooltip.title", "Photo Splitter"),
     },
     tips: [
       {
-        title: t('scannerImageSplit.tooltip.whatThisDoes', 'What this does'),
-        description: t('scannerImageSplit.tooltip.whatThisDoesDesc',
-          'Automatically finds and extracts each photo from a scanned page or composite image—no manual cropping.'
-        )
+        title: t("scannerImageSplit.tooltip.whatThisDoes", "What this does"),
+        description: t(
+          "scannerImageSplit.tooltip.whatThisDoesDesc",
+          "Automatically finds and extracts each photo from a scanned page or composite image—no manual cropping.",
+        ),
       },
       {
-        title: t('scannerImageSplit.tooltip.whenToUse', 'When to use'),
+        title: t("scannerImageSplit.tooltip.whenToUse", "When to use"),
         bullets: [
-          t('scannerImageSplit.tooltip.useCase1', 'Scan whole album pages in one go'),
-          t('scannerImageSplit.tooltip.useCase2', 'Split flatbed batches into separate files'),
-          t('scannerImageSplit.tooltip.useCase3', 'Break collages into individual photos'),
-          t('scannerImageSplit.tooltip.useCase4', 'Pull photos from documents')
-        ]
+          t("scannerImageSplit.tooltip.useCase1", "Scan whole album pages in one go"),
+          t("scannerImageSplit.tooltip.useCase2", "Split flatbed batches into separate files"),
+          t("scannerImageSplit.tooltip.useCase3", "Break collages into individual photos"),
+          t("scannerImageSplit.tooltip.useCase4", "Pull photos from documents"),
+        ],
       },
       {
-        title: t('scannerImageSplit.tooltip.quickFixes', 'Quick fixes'),
+        title: t("scannerImageSplit.tooltip.quickFixes", "Quick fixes"),
         bullets: [
-          t('scannerImageSplit.tooltip.problem1', 'Photos not detected → increase Tolerance to 30–50'),
-          t('scannerImageSplit.tooltip.problem2', 'Too many false detections → increase Minimum Area to 15,000–20,000'),
-          t('scannerImageSplit.tooltip.problem3', 'Crops are too tight → increase Border Size to 5–10'),
-          t('scannerImageSplit.tooltip.problem4', 'Tilted photos not straightened → lower Angle Threshold to ~5°'),
-          t('scannerImageSplit.tooltip.problem5', 'Dust/noise boxes → increase Minimum Contour Area to 1000–2000')
-        ]
+          t("scannerImageSplit.tooltip.problem1", "Photos not detected → increase Tolerance to 30–50"),
+          t("scannerImageSplit.tooltip.problem2", "Too many false detections → increase Minimum Area to 15,000–20,000"),
+          t("scannerImageSplit.tooltip.problem3", "Crops are too tight → increase Border Size to 5–10"),
+          t("scannerImageSplit.tooltip.problem4", "Tilted photos not straightened → lower Angle Threshold to ~5°"),
+          t("scannerImageSplit.tooltip.problem5", "Dust/noise boxes → increase Minimum Contour Area to 1000–2000"),
+        ],
       },
       {
-        title: t('scannerImageSplit.tooltip.setupTips', 'Setup tips'),
+        title: t("scannerImageSplit.tooltip.setupTips", "Setup tips"),
         bullets: [
-          t('scannerImageSplit.tooltip.tip1', 'Use a plain, light background'),
-          t('scannerImageSplit.tooltip.tip2', 'Leave a small gap (≈1 cm) between photos'),
-          t('scannerImageSplit.tooltip.tip3', 'Scan at 300–600 DPI'),
-          t('scannerImageSplit.tooltip.tip4', 'Clean the scanner glass')
-        ]
+          t("scannerImageSplit.tooltip.tip1", "Use a plain, light background"),
+          t("scannerImageSplit.tooltip.tip2", "Leave a small gap (≈1 cm) between photos"),
+          t("scannerImageSplit.tooltip.tip3", "Scan at 300–600 DPI"),
+          t("scannerImageSplit.tooltip.tip4", "Clean the scanner glass"),
+        ],
       },
       {
-        title: t('scannerImageSplit.tooltip.headsUp', 'Heads-up'),
-        description: t('scannerImageSplit.tooltip.headsUpDesc',
-          'Overlapping photos or backgrounds very close in colour to the photos can reduce accuracy—try a lighter or darker background and leave more space.'
-        )
-      }
-    ]
+        title: t("scannerImageSplit.tooltip.headsUp", "Heads-up"),
+        description: t(
+          "scannerImageSplit.tooltip.headsUpDesc",
+          "Overlapping photos or backgrounds very close in colour to the photos can reduce accuracy—try a lighter or darker background and leave more space.",
+        ),
+      },
+    ],
   };
-};
\ No newline at end of file
+};
diff --git a/frontend/src/core/components/tooltips/useSessionManagementTips.ts b/frontend/src/core/components/tooltips/useSessionManagementTips.ts
index e532bed049..99e1344c09 100644
--- a/frontend/src/core/components/tooltips/useSessionManagementTips.ts
+++ b/frontend/src/core/components/tooltips/useSessionManagementTips.ts
@@ -1,61 +1,70 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '@app/types/tips';
+import { useTranslation } from "react-i18next";
+import { TooltipContent } from "@app/types/tips";
 
 export const useSessionManagementTips = (): TooltipContent => {
   const { t } = useTranslation();
 
   return {
     header: {
-      title: t('sessionManagement.tooltip.header', 'Managing Signing Sessions'),
+      title: t("sessionManagement.tooltip.header", "Managing Signing Sessions"),
     },
     tips: [
       {
-        title: t('sessionManagement.tooltip.addParticipants.title', 'Adding Participants'),
+        title: t("sessionManagement.tooltip.addParticipants.title", "Adding Participants"),
         description: t(
-          'sessionManagement.tooltip.addParticipants.description',
-          'You can add more participants to an active session at any time before finalization.'
+          "sessionManagement.tooltip.addParticipants.description",
+          "You can add more participants to an active session at any time before finalization.",
         ),
         bullets: [
-          t('sessionManagement.tooltip.addParticipants.bullet1', 'New participants added to the end of signing order'),
-          t('sessionManagement.tooltip.addParticipants.bullet2', 'Cannot add participants after session is finalized'),
-          t('sessionManagement.tooltip.addParticipants.bullet3', 'Each participant receives a notification when it\'s their turn'),
+          t("sessionManagement.tooltip.addParticipants.bullet1", "New participants added to the end of signing order"),
+          t("sessionManagement.tooltip.addParticipants.bullet2", "Cannot add participants after session is finalized"),
+          t(
+            "sessionManagement.tooltip.addParticipants.bullet3",
+            "Each participant receives a notification when it's their turn",
+          ),
         ],
       },
       {
-        title: t('sessionManagement.tooltip.finalization.title', 'Session Finalization'),
+        title: t("sessionManagement.tooltip.finalization.title", "Session Finalization"),
         description: t(
-          'sessionManagement.tooltip.finalization.description',
-          'Finalization combines all signatures into a single signed PDF. This action cannot be undone.'
+          "sessionManagement.tooltip.finalization.description",
+          "Finalization combines all signatures into a single signed PDF. This action cannot be undone.",
         ),
         bullets: [
-          t('sessionManagement.tooltip.finalization.bullet1', '<b>Full finalization</b>: All participants have signed'),
-          t('sessionManagement.tooltip.finalization.bullet2', '<b>Partial finalization</b>: Some participants haven\'t signed yet'),
-          t('sessionManagement.tooltip.finalization.bullet3', 'Unsigned participants will be excluded from the final document'),
-          t('sessionManagement.tooltip.finalization.bullet4', 'Once finalized, you can load the signed PDF into active files'),
+          t("sessionManagement.tooltip.finalization.bullet1", "<b>Full finalization</b>: All participants have signed"),
+          t(
+            "sessionManagement.tooltip.finalization.bullet2",
+            "<b>Partial finalization</b>: Some participants haven't signed yet",
+          ),
+          t(
+            "sessionManagement.tooltip.finalization.bullet3",
+            "Unsigned participants will be excluded from the final document",
+          ),
+          t("sessionManagement.tooltip.finalization.bullet4", "Once finalized, you can load the signed PDF into active files"),
         ],
       },
       {
-        title: t('sessionManagement.tooltip.signatureOrder.title', 'Signature Order'),
+        title: t("sessionManagement.tooltip.signatureOrder.title", "Signature Order"),
         description: t(
-          'sessionManagement.tooltip.signatureOrder.description',
-          'The order you specify when creating the session determines who signs first.'
+          "sessionManagement.tooltip.signatureOrder.description",
+          "The order you specify when creating the session determines who signs first.",
         ),
         bullets: [
-          t('sessionManagement.tooltip.signatureOrder.bullet1', 'Each signature is applied sequentially to the PDF'),
-          t('sessionManagement.tooltip.signatureOrder.bullet2', 'Later signers can see earlier signatures'),
-          t('sessionManagement.tooltip.signatureOrder.bullet3', 'Critical for approval workflows and legal chains of custody'),
+          t("sessionManagement.tooltip.signatureOrder.bullet1", "Each signature is applied sequentially to the PDF"),
+          t("sessionManagement.tooltip.signatureOrder.bullet2", "Later signers can see earlier signatures"),
+          t("sessionManagement.tooltip.signatureOrder.bullet3", "Critical for approval workflows and legal chains of custody"),
         ],
       },
       {
-        title: t('sessionManagement.tooltip.participantRemoval.title', 'Removing Participants'),
+        title: t("sessionManagement.tooltip.participantRemoval.title", "Removing Participants"),
         description: t(
-          'sessionManagement.tooltip.participantRemoval.description',
-          'Participants can be removed from sessions before they sign.'
+          "sessionManagement.tooltip.participantRemoval.description",
+          "Participants can be removed from sessions before they sign.",
         ),
         bullets: [
-          t('sessionManagement.tooltip.participantRemoval.bullet1', 'Cannot remove participants who have already signed'),
-          t('sessionManagement.tooltip.participantRemoval.bullet2', 'Removed participants no longer receive notifications'),
-          t('sessionManagement.tooltip.participantRemoval.bullet3', 'Signing order adjusts automatically'),
+          t("sessionManagement.tooltip.participantRemoval.bullet1", "Cannot remove participants who have already signed"),
+          t("sessionManagement.tooltip.participantRemoval.bullet2", "Removed participants no longer receive notifications"),
+          t("sessionManagement.tooltip.participantRemoval.bullet3", "Signing order adjusts automatically"),
         ],
       },
     ],
diff --git a/frontend/src/core/components/tooltips/useSignModeTips.ts b/frontend/src/core/components/tooltips/useSignModeTips.ts
index a8cbaf49ec..617be2bc85 100644
--- a/frontend/src/core/components/tooltips/useSignModeTips.ts
+++ b/frontend/src/core/components/tooltips/useSignModeTips.ts
@@ -1,36 +1,49 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '@app/types/tips';
+import { useTranslation } from "react-i18next";
+import { TooltipContent } from "@app/types/tips";
 
 export const useSignModeTips = (): TooltipContent => {
   const { t } = useTranslation();
 
   return {
     header: {
-      title: t("certSign.signMode.tooltip.header.title", "About PDF Signatures")
+      title: t("certSign.signMode.tooltip.header.title", "About PDF Signatures"),
     },
     tips: [
       {
         title: t("certSign.signMode.tooltip.overview.title", "How signatures work"),
-        description: t("certSign.signMode.tooltip.overview.text", "Both modes seal the document (any edits are flagged as tampering) and record who/when/how for auditing. Viewer trust depends on the certificate chain.")
+        description: t(
+          "certSign.signMode.tooltip.overview.text",
+          "Both modes seal the document (any edits are flagged as tampering) and record who/when/how for auditing. Viewer trust depends on the certificate chain.",
+        ),
       },
       {
         title: t("certSign.signMode.tooltip.manual.title", "Manual - Bring your certificate"),
-        description: t("certSign.signMode.tooltip.manual.text", "Use your own certificate files for brand-aligned identity. Can display <b>Trusted</b> when your CA/chain is recognized."),
-        bullets: [
-          t("certSign.signMode.tooltip.manual.use", "Use for: customer-facing, legal, compliance.")
-        ]
+        description: t(
+          "certSign.signMode.tooltip.manual.text",
+          "Use your own certificate files for brand-aligned identity. Can display <b>Trusted</b> when your CA/chain is recognized.",
+        ),
+        bullets: [t("certSign.signMode.tooltip.manual.use", "Use for: customer-facing, legal, compliance.")],
       },
       {
         title: t("certSign.signMode.tooltip.auto.title", "Auto - Zero-setup, instant system seal"),
-        description: t("certSign.signMode.tooltip.auto.text", "Signs with a server <b>self-signed</b> certificate. Same <b>tamper-evident seal</b> and <b>audit trail</b>; typically shows <b>Unverified</b> in viewers."),
+        description: t(
+          "certSign.signMode.tooltip.auto.text",
+          "Signs with a server <b>self-signed</b> certificate. Same <b>tamper-evident seal</b> and <b>audit trail</b>; typically shows <b>Unverified</b> in viewers.",
+        ),
         bullets: [
-          t("certSign.signMode.tooltip.auto.use", "Use when: you need speed and consistent internal identity across reviews and records.")
-        ]
+          t(
+            "certSign.signMode.tooltip.auto.use",
+            "Use when: you need speed and consistent internal identity across reviews and records.",
+          ),
+        ],
       },
       {
         title: t("certSign.signMode.tooltip.rule.title", "Rule of thumb"),
-        description: t("certSign.signMode.tooltip.rule.text", "Need recipient <b>Trusted</b> status? <b>Manual</b>. Need a fast, tamper-evident seal and audit trail with no setup? <b>Auto</b>.")
-      }
-    ]
+        description: t(
+          "certSign.signMode.tooltip.rule.text",
+          "Need recipient <b>Trusted</b> status? <b>Manual</b>. Need a fast, tamper-evident seal and audit trail with no setup? <b>Auto</b>.",
+        ),
+      },
+    ],
   };
-};
\ No newline at end of file
+};
diff --git a/frontend/src/core/components/tooltips/useSignatureAppearanceTips.ts b/frontend/src/core/components/tooltips/useSignatureAppearanceTips.ts
index 43ec619143..3a64aaf56c 100644
--- a/frontend/src/core/components/tooltips/useSignatureAppearanceTips.ts
+++ b/frontend/src/core/components/tooltips/useSignatureAppearanceTips.ts
@@ -1,33 +1,39 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '@app/types/tips';
+import { useTranslation } from "react-i18next";
+import { TooltipContent } from "@app/types/tips";
 
 export const useSignatureAppearanceTips = (): TooltipContent => {
   const { t } = useTranslation();
 
   return {
     header: {
-      title: t("certSign.appearance.tooltip.header.title", "About Signature Appearance")
+      title: t("certSign.appearance.tooltip.header.title", "About Signature Appearance"),
     },
     tips: [
       {
         title: t("certSign.appearance.tooltip.invisible.title", "Invisible Signatures"),
-        description: t("certSign.appearance.tooltip.invisible.text", "The signature is added to the PDF for security but won't be visible when viewing the document. Perfect for legal requirements without changing the document's appearance."),
+        description: t(
+          "certSign.appearance.tooltip.invisible.text",
+          "The signature is added to the PDF for security but won't be visible when viewing the document. Perfect for legal requirements without changing the document's appearance.",
+        ),
         bullets: [
           t("certSign.appearance.tooltip.invisible.bullet1", "Provides security without visual changes"),
           t("certSign.appearance.tooltip.invisible.bullet2", "Meets legal requirements for digital signing"),
-          t("certSign.appearance.tooltip.invisible.bullet3", "Doesn't affect document layout or design")
-        ]
+          t("certSign.appearance.tooltip.invisible.bullet3", "Doesn't affect document layout or design"),
+        ],
       },
       {
         title: t("certSign.appearance.tooltip.visible.title", "Visible Signatures"),
-        description: t("certSign.appearance.tooltip.visible.text", "Shows a signature block on the PDF with your name, date, and optional details. Useful when you want readers to clearly see the document is signed."),
+        description: t(
+          "certSign.appearance.tooltip.visible.text",
+          "Shows a signature block on the PDF with your name, date, and optional details. Useful when you want readers to clearly see the document is signed.",
+        ),
         bullets: [
           t("certSign.appearance.tooltip.visible.bullet1", "Shows signer name and date on the document"),
           t("certSign.appearance.tooltip.visible.bullet2", "Can include reason and location for signing"),
           t("certSign.appearance.tooltip.visible.bullet3", "Choose which page to place the signature"),
-          t("certSign.appearance.tooltip.visible.bullet4", "Optional logo can be included")
-        ]
-      }
-    ]
+          t("certSign.appearance.tooltip.visible.bullet4", "Optional logo can be included"),
+        ],
+      },
+    ],
   };
-};
\ No newline at end of file
+};
diff --git a/frontend/src/core/components/tooltips/useSignatureSettingsTips.ts b/frontend/src/core/components/tooltips/useSignatureSettingsTips.ts
index c1da24955f..4b8a7a8694 100644
--- a/frontend/src/core/components/tooltips/useSignatureSettingsTips.ts
+++ b/frontend/src/core/components/tooltips/useSignatureSettingsTips.ts
@@ -1,60 +1,60 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '@app/types/tips';
+import { useTranslation } from "react-i18next";
+import { TooltipContent } from "@app/types/tips";
 
 export const useSignatureSettingsTips = (): TooltipContent => {
   const { t } = useTranslation();
 
   return {
     header: {
-      title: t('signatureSettings.tooltip.header', 'Signature Appearance Settings'),
+      title: t("signatureSettings.tooltip.header", "Signature Appearance Settings"),
     },
     tips: [
       {
-        title: t('signatureSettings.tooltip.visibility.title', 'Signature Visibility'),
+        title: t("signatureSettings.tooltip.visibility.title", "Signature Visibility"),
         description: t(
-          'signatureSettings.tooltip.visibility.description',
-          'Controls whether the signature is visible on the document or embedded invisibly.'
+          "signatureSettings.tooltip.visibility.description",
+          "Controls whether the signature is visible on the document or embedded invisibly.",
         ),
         bullets: [
-          t('signatureSettings.tooltip.visibility.bullet1', '<b>Visible</b>: Signature appears on PDF with custom appearance'),
-          t('signatureSettings.tooltip.visibility.bullet2', '<b>Invisible</b>: Certificate embedded without visual mark'),
-          t('signatureSettings.tooltip.visibility.bullet3', 'Invisible signatures still provide cryptographic validation'),
+          t("signatureSettings.tooltip.visibility.bullet1", "<b>Visible</b>: Signature appears on PDF with custom appearance"),
+          t("signatureSettings.tooltip.visibility.bullet2", "<b>Invisible</b>: Certificate embedded without visual mark"),
+          t("signatureSettings.tooltip.visibility.bullet3", "Invisible signatures still provide cryptographic validation"),
         ],
       },
       {
-        title: t('signatureSettings.tooltip.reason.title', 'Signature Reason'),
+        title: t("signatureSettings.tooltip.reason.title", "Signature Reason"),
         description: t(
-          'signatureSettings.tooltip.reason.description',
-          'Optional text explaining why the document is being signed. Stored in certificate metadata.'
+          "signatureSettings.tooltip.reason.description",
+          "Optional text explaining why the document is being signed. Stored in certificate metadata.",
         ),
         bullets: [
-          t('signatureSettings.tooltip.reason.bullet1', 'Examples: "Approval", "Contract Agreement", "Review Complete"'),
-          t('signatureSettings.tooltip.reason.bullet2', 'Visible in PDF signature properties'),
-          t('signatureSettings.tooltip.reason.bullet3', 'Useful for audit trails and compliance'),
+          t("signatureSettings.tooltip.reason.bullet1", 'Examples: "Approval", "Contract Agreement", "Review Complete"'),
+          t("signatureSettings.tooltip.reason.bullet2", "Visible in PDF signature properties"),
+          t("signatureSettings.tooltip.reason.bullet3", "Useful for audit trails and compliance"),
         ],
       },
       {
-        title: t('signatureSettings.tooltip.location.title', 'Signature Location'),
+        title: t("signatureSettings.tooltip.location.title", "Signature Location"),
         description: t(
-          'signatureSettings.tooltip.location.description',
-          'Optional geographic location where the signature was applied. Stored in certificate metadata.'
+          "signatureSettings.tooltip.location.description",
+          "Optional geographic location where the signature was applied. Stored in certificate metadata.",
         ),
         bullets: [
-          t('signatureSettings.tooltip.location.bullet1', 'Examples: "New York, USA", "London Office", "Remote"'),
-          t('signatureSettings.tooltip.location.bullet2', 'Not the same as page position'),
-          t('signatureSettings.tooltip.location.bullet3', 'May be required for certain legal jurisdictions'),
+          t("signatureSettings.tooltip.location.bullet1", 'Examples: "New York, USA", "London Office", "Remote"'),
+          t("signatureSettings.tooltip.location.bullet2", "Not the same as page position"),
+          t("signatureSettings.tooltip.location.bullet3", "May be required for certain legal jurisdictions"),
         ],
       },
       {
-        title: t('signatureSettings.tooltip.logo.title', 'Company Logo'),
+        title: t("signatureSettings.tooltip.logo.title", "Company Logo"),
         description: t(
-          'signatureSettings.tooltip.logo.description',
-          'Add a company logo to visible signatures for branding and authenticity.'
+          "signatureSettings.tooltip.logo.description",
+          "Add a company logo to visible signatures for branding and authenticity.",
         ),
         bullets: [
-          t('signatureSettings.tooltip.logo.bullet1', 'Displayed alongside signature and text'),
-          t('signatureSettings.tooltip.logo.bullet2', 'Supports PNG, JPG formats'),
-          t('signatureSettings.tooltip.logo.bullet3', 'Enhances professional appearance'),
+          t("signatureSettings.tooltip.logo.bullet1", "Displayed alongside signature and text"),
+          t("signatureSettings.tooltip.logo.bullet2", "Supports PNG, JPG formats"),
+          t("signatureSettings.tooltip.logo.bullet3", "Enhances professional appearance"),
         ],
       },
     ],
diff --git a/frontend/src/core/components/tooltips/useSplitMethodTips.ts b/frontend/src/core/components/tooltips/useSplitMethodTips.ts
index 57105be6e8..7641bfe6e6 100644
--- a/frontend/src/core/components/tooltips/useSplitMethodTips.ts
+++ b/frontend/src/core/components/tooltips/useSplitMethodTips.ts
@@ -1,24 +1,27 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '@app/types/tips';
+import { useTranslation } from "react-i18next";
+import { TooltipContent } from "@app/types/tips";
 
 export const useSplitMethodTips = (): TooltipContent => {
   const { t } = useTranslation();
 
   return {
     header: {
-      title: t("split.methodSelection.tooltip.title", "Choose Your Split Method")
+      title: t("split.methodSelection.tooltip.title", "Choose Your Split Method"),
     },
     tips: [
       {
         title: t("split.methodSelection.tooltip.header.title", "Split Method Selection"),
-        description: t("split.methodSelection.tooltip.header.text", "Choose how you want to split your PDF document. Each method is optimized for different use cases and document types."),
+        description: t(
+          "split.methodSelection.tooltip.header.text",
+          "Choose how you want to split your PDF document. Each method is optimized for different use cases and document types.",
+        ),
         bullets: [
           t("split.methodSelection.tooltip.bullet1", "Click on a method card to select it"),
           t("split.methodSelection.tooltip.bullet2", "Hover over each card to see a quick description"),
           t("split.methodSelection.tooltip.bullet3", "The settings step will appear after you select a method"),
-          t("split.methodSelection.tooltip.bullet4", "You can change methods at any time before processing")
-        ]
-      }
-    ]
+          t("split.methodSelection.tooltip.bullet4", "You can change methods at any time before processing"),
+        ],
+      },
+    ],
   };
-};
\ No newline at end of file
+};
diff --git a/frontend/src/core/components/tooltips/useSplitSettingsTips.ts b/frontend/src/core/components/tooltips/useSplitSettingsTips.ts
index 37fff5aa57..8d9835bfae 100644
--- a/frontend/src/core/components/tooltips/useSplitSettingsTips.ts
+++ b/frontend/src/core/components/tooltips/useSplitSettingsTips.ts
@@ -1,6 +1,6 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '@app/types/tips';
-import { SPLIT_METHODS, type SplitMethod } from '@app/constants/splitConstants';
+import { useTranslation } from "react-i18next";
+import { TooltipContent } from "@app/types/tips";
+import { SPLIT_METHODS, type SplitMethod } from "@app/constants/splitConstants";
 
 export const useSplitSettingsTips = (method: SplitMethod | null): TooltipContent | null => {
   const { t } = useTranslation();
@@ -10,142 +10,166 @@ export const useSplitSettingsTips = (method: SplitMethod | null): TooltipContent
   const tooltipMap: Record<SplitMethod, TooltipContent> = {
     [SPLIT_METHODS.BY_PAGES]: {
       header: {
-        title: t("split.tooltip.byPages.title", "Split at Page Numbers")
+        title: t("split.tooltip.byPages.title", "Split at Page Numbers"),
       },
       tips: [
         {
           title: t("split.tooltip.byPages.title", "Split at Page Numbers"),
-          description: t("split.tooltip.byPages.text", "Extract specific pages or ranges from your PDF. Use commas to separate individual pages and hyphens for ranges."),
+          description: t(
+            "split.tooltip.byPages.text",
+            "Extract specific pages or ranges from your PDF. Use commas to separate individual pages and hyphens for ranges.",
+          ),
           bullets: [
             t("split.tooltip.byPages.bullet1", "Single pages: 1,3,5"),
             t("split.tooltip.byPages.bullet2", "Page ranges: 1-5,10-15"),
-            t("split.tooltip.byPages.bullet3", "Mixed: 1,3-7,12,15-20")
-          ]
-        }
-      ]
+            t("split.tooltip.byPages.bullet3", "Mixed: 1,3-7,12,15-20"),
+          ],
+        },
+      ],
     },
 
     [SPLIT_METHODS.BY_SECTIONS]: {
       header: {
-        title: t("split.tooltip.bySections.title", "Split by Grid Sections")
+        title: t("split.tooltip.bySections.title", "Split by Grid Sections"),
       },
       tips: [
         {
           title: t("split.tooltip.bySections.title", "Split by Grid Sections"),
-          description: t("split.tooltip.bySections.text", "Divide each page into a grid of sections. Useful for splitting documents with multiple columns or extracting specific areas."),
+          description: t(
+            "split.tooltip.bySections.text",
+            "Divide each page into a grid of sections. Useful for splitting documents with multiple columns or extracting specific areas.",
+          ),
           bullets: [
             t("split.tooltip.bySections.bullet1", "Horizontal: Number of rows to create"),
             t("split.tooltip.bySections.bullet2", "Vertical: Number of columns to create"),
-            t("split.tooltip.bySections.bullet3", "Merge: Combine all sections into one PDF")
-          ]
-        }
-      ]
+            t("split.tooltip.bySections.bullet3", "Merge: Combine all sections into one PDF"),
+          ],
+        },
+      ],
     },
 
     [SPLIT_METHODS.BY_SIZE]: {
       header: {
-        title: t("split.tooltip.bySize.title", "Split by File Size")
+        title: t("split.tooltip.bySize.title", "Split by File Size"),
       },
       tips: [
         {
           title: t("split.tooltip.bySize.title", "Split by File Size"),
-          description: t("split.tooltip.bySize.text", "Create multiple PDFs that don't exceed a specified file size. Ideal for file size limitations or email attachments."),
+          description: t(
+            "split.tooltip.bySize.text",
+            "Create multiple PDFs that don't exceed a specified file size. Ideal for file size limitations or email attachments.",
+          ),
           bullets: [
             t("split.tooltip.bySize.bullet1", "Use MB for larger files (e.g., 10MB)"),
             t("split.tooltip.bySize.bullet2", "Use KB for smaller files (e.g., 500KB)"),
-            t("split.tooltip.bySize.bullet3", "System will split at page boundaries")
-          ]
-        }
-      ]
+            t("split.tooltip.bySize.bullet3", "System will split at page boundaries"),
+          ],
+        },
+      ],
     },
 
     [SPLIT_METHODS.BY_PAGE_COUNT]: {
       header: {
-        title: t("split.tooltip.byPageCount.title", "Split by Page Count")
+        title: t("split.tooltip.byPageCount.title", "Split by Page Count"),
       },
       tips: [
         {
           title: t("split.tooltip.byPageCount.title", "Split by Page Count"),
-          description: t("split.tooltip.byPageCount.text", "Create multiple PDFs with a specific number of pages each. Perfect for creating uniform document chunks."),
+          description: t(
+            "split.tooltip.byPageCount.text",
+            "Create multiple PDFs with a specific number of pages each. Perfect for creating uniform document chunks.",
+          ),
           bullets: [
             t("split.tooltip.byPageCount.bullet1", "Enter the number of pages per output file"),
             t("split.tooltip.byPageCount.bullet2", "Last file may have fewer pages if not evenly divisible"),
-            t("split.tooltip.byPageCount.bullet3", "Useful for batch processing workflows")
-          ]
-        }
-      ]
+            t("split.tooltip.byPageCount.bullet3", "Useful for batch processing workflows"),
+          ],
+        },
+      ],
     },
 
     [SPLIT_METHODS.BY_DOC_COUNT]: {
       header: {
-        title: t("split.tooltip.byDocCount.title", "Split by Document Count")
+        title: t("split.tooltip.byDocCount.title", "Split by Document Count"),
       },
       tips: [
         {
           title: t("split.tooltip.byDocCount.title", "Split by Document Count"),
-          description: t("split.tooltip.byDocCount.text", "Create a specific number of output files by evenly distributing pages across them."),
+          description: t(
+            "split.tooltip.byDocCount.text",
+            "Create a specific number of output files by evenly distributing pages across them.",
+          ),
           bullets: [
             t("split.tooltip.byDocCount.bullet1", "Enter the number of output files you want"),
             t("split.tooltip.byDocCount.bullet2", "Pages are distributed as evenly as possible"),
-            t("split.tooltip.byDocCount.bullet3", "Useful when you need a specific number of files")
-          ]
-        }
-      ]
+            t("split.tooltip.byDocCount.bullet3", "Useful when you need a specific number of files"),
+          ],
+        },
+      ],
     },
 
     [SPLIT_METHODS.BY_CHAPTERS]: {
       header: {
-        title: t("split.tooltip.byChapters.title", "Split by Chapters")
+        title: t("split.tooltip.byChapters.title", "Split by Chapters"),
       },
       tips: [
         {
           title: t("split.tooltip.byChapters.title", "Split by Chapters"),
-          description: t("split.tooltip.byChapters.text", "Use PDF bookmarks to automatically split at chapter boundaries. Requires PDFs with bookmark structure."),
+          description: t(
+            "split.tooltip.byChapters.text",
+            "Use PDF bookmarks to automatically split at chapter boundaries. Requires PDFs with bookmark structure.",
+          ),
           bullets: [
             t("split.tooltip.byChapters.bullet1", "Bookmark Level: Which level to split on (1=top level)"),
             t("split.tooltip.byChapters.bullet2", "Include Metadata: Preserve document properties"),
-            t("split.tooltip.byChapters.bullet3", "Allow Duplicates: Handle repeated bookmark names")
-          ]
-        }
-      ]
+            t("split.tooltip.byChapters.bullet3", "Allow Duplicates: Handle repeated bookmark names"),
+          ],
+        },
+      ],
     },
 
     [SPLIT_METHODS.BY_PAGE_DIVIDER]: {
       header: {
-        title: t("split.tooltip.byPageDivider.title", "Split by Page Divider")
+        title: t("split.tooltip.byPageDivider.title", "Split by Page Divider"),
       },
       tips: [
         {
           title: t("split.tooltip.byPageDivider.title", "Split by Page Divider"),
-          description: t("split.tooltip.byPageDivider.text", "Automatically split scanned documents using physical divider sheets with QR codes. Perfect for processing multiple documents scanned together."),
+          description: t(
+            "split.tooltip.byPageDivider.text",
+            "Automatically split scanned documents using physical divider sheets with QR codes. Perfect for processing multiple documents scanned together.",
+          ),
           bullets: [
             t("split.tooltip.byPageDivider.bullet1", "Print divider sheets from the download link"),
             t("split.tooltip.byPageDivider.bullet2", "Insert divider sheets between your documents"),
             t("split.tooltip.byPageDivider.bullet3", "Scan all documents together as one PDF"),
             t("split.tooltip.byPageDivider.bullet4", "Upload - divider pages are automatically detected and removed"),
-            t("split.tooltip.byPageDivider.bullet5", "Enable Duplex Mode if scanning both sides of divider sheets")
-          ]
-        }
-      ]
+            t("split.tooltip.byPageDivider.bullet5", "Enable Duplex Mode if scanning both sides of divider sheets"),
+          ],
+        },
+      ],
     },
 
     [SPLIT_METHODS.BY_POSTER]: {
       header: {
-        title: t("split.tooltip.byPoster.title", "Split for Poster Print")
+        title: t("split.tooltip.byPoster.title", "Split for Poster Print"),
       },
       tips: [
         {
           title: t("split.tooltip.byPoster.title", "Split for Poster Print"),
-          description: t("split.tooltip.byPoster.text", "Split large PDF pages into smaller printable chunks suitable for standard paper sizes. Perfect for creating poster prints from oversized pages."),
+          description: t(
+            "split.tooltip.byPoster.text",
+            "Split large PDF pages into smaller printable chunks suitable for standard paper sizes. Perfect for creating poster prints from oversized pages.",
+          ),
           bullets: [
             t("split.tooltip.byPoster.bullet1", "Target Page Size: Choose output paper size (A4, Letter, etc.)"),
             t("split.tooltip.byPoster.bullet2", "Horizontal/Vertical Divisions: Grid size for splitting"),
             t("split.tooltip.byPoster.bullet3", "Right-to-Left: Reverse column order for RTL layouts"),
-            t("split.tooltip.byPoster.bullet4", "Print and assemble the pieces to create your poster")
-          ]
-        }
-      ]
-    }
+            t("split.tooltip.byPoster.bullet4", "Print and assemble the pieces to create your poster"),
+          ],
+        },
+      ],
+    },
   };
 
   return tooltipMap[method];
diff --git a/frontend/src/core/components/tooltips/useWatermarkTips.ts b/frontend/src/core/components/tooltips/useWatermarkTips.ts
index ede2b0bf39..55159fcc2f 100644
--- a/frontend/src/core/components/tooltips/useWatermarkTips.ts
+++ b/frontend/src/core/components/tooltips/useWatermarkTips.ts
@@ -1,5 +1,5 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent, TooltipTip } from '@app/types/tips';
+import { useTranslation } from "react-i18next";
+import { TooltipContent, TooltipTip } from "@app/types/tips";
 
 // Shared tooltip content to reduce duplication
 const useSharedWatermarkContent = () => {
@@ -7,7 +7,10 @@ const useSharedWatermarkContent = () => {
 
   const languageSupportTip: TooltipTip = {
     title: t("watermark.tooltip.language.title", "Language Support"),
-    description: t("watermark.tooltip.language.text", "Choose the appropriate language setting to ensure proper font rendering for your text.")
+    description: t(
+      "watermark.tooltip.language.text",
+      "Choose the appropriate language setting to ensure proper font rendering for your text.",
+    ),
   };
 
   const appearanceTip: TooltipTip = {
@@ -16,8 +19,8 @@ const useSharedWatermarkContent = () => {
     bullets: [
       t("watermark.tooltip.appearance.bullet1", "Rotation: -360° to 360° for angled watermarks"),
       t("watermark.tooltip.appearance.bullet2", "Opacity: 0-100% for transparency control"),
-      t("watermark.tooltip.appearance.bullet3", "Lower opacity creates subtle watermarks")
-    ]
+      t("watermark.tooltip.appearance.bullet3", "Lower opacity creates subtle watermarks"),
+    ],
   };
 
   const spacingTip: TooltipTip = {
@@ -26,8 +29,8 @@ const useSharedWatermarkContent = () => {
     bullets: [
       t("watermark.tooltip.spacing.bullet1", "Width spacing: Horizontal distance between watermarks"),
       t("watermark.tooltip.spacing.bullet2", "Height spacing: Vertical distance between watermarks"),
-      t("watermark.tooltip.spacing.bullet3", "Higher values create more spread out patterns")
-    ]
+      t("watermark.tooltip.spacing.bullet3", "Higher values create more spread out patterns"),
+    ],
   };
 
   return { languageSupportTip, appearanceTip, spacingTip };
@@ -38,55 +41,65 @@ export const useWatermarkTypeTips = (): TooltipContent => {
 
   return {
     header: {
-      title: t("watermark.tooltip.type.header.title", "Watermark Type Selection")
+      title: t("watermark.tooltip.type.header.title", "Watermark Type Selection"),
     },
     tips: [
       {
         title: t("watermark.tooltip.type.description.title", "Choose Your Watermark"),
-        description: t("watermark.tooltip.type.description.text", "Select between text or image watermarks based on your needs.")
+        description: t(
+          "watermark.tooltip.type.description.text",
+          "Select between text or image watermarks based on your needs.",
+        ),
       },
       {
         title: t("watermark.tooltip.type.text.title", "Text Watermarks"),
-        description: t("watermark.tooltip.type.text.text", "Perfect for adding copyright notices, company names, or confidentiality labels. Supports multiple languages and custom colors."),
+        description: t(
+          "watermark.tooltip.type.text.text",
+          "Perfect for adding copyright notices, company names, or confidentiality labels. Supports multiple languages and custom colors.",
+        ),
         bullets: [
           t("watermark.tooltip.type.text.bullet1", "Customizable fonts and languages"),
           t("watermark.tooltip.type.text.bullet2", "Adjustable colors and transparency"),
-          t("watermark.tooltip.type.text.bullet3", "Ideal for legal or branding text")
-        ]
+          t("watermark.tooltip.type.text.bullet3", "Ideal for legal or branding text"),
+        ],
       },
       {
         title: t("watermark.tooltip.type.image.title", "Image Watermarks"),
-        description: t("watermark.tooltip.type.image.text", "Use logos, stamps, or any image as a watermark. Great for branding and visual identification."),
+        description: t(
+          "watermark.tooltip.type.image.text",
+          "Use logos, stamps, or any image as a watermark. Great for branding and visual identification.",
+        ),
         bullets: [
           t("watermark.tooltip.type.image.bullet1", "Upload any image format"),
           t("watermark.tooltip.type.image.bullet2", "Maintains image quality"),
-          t("watermark.tooltip.type.image.bullet3", "Perfect for logos and stamps")
-        ]
-      }
-    ]
+          t("watermark.tooltip.type.image.bullet3", "Perfect for logos and stamps"),
+        ],
+      },
+    ],
   };
 };
 
-
-
 export const useWatermarkWordingTips = (): TooltipContent => {
   const { t } = useTranslation();
 
   return {
     header: {
-      title: t("watermark.tooltip.wording.header.title", "Text Content")
+      title: t("watermark.tooltip.wording.header.title", "Text Content"),
     },
     tips: [
       {
         title: t("watermark.tooltip.wording.text.title", "Watermark Text"),
-        description: t("watermark.tooltip.wording.text.text", "Enter the text that will appear as your watermark across the document."),
+        description: t(
+          "watermark.tooltip.wording.text.text",
+          "Enter the text that will appear as your watermark across the document.",
+        ),
         bullets: [
           t("watermark.tooltip.wording.text.bullet1", "Keep it concise for better readability"),
           t("watermark.tooltip.wording.text.bullet2", "Common examples: 'CONFIDENTIAL', 'DRAFT', company name"),
-          t("watermark.tooltip.wording.text.bullet3", "Emoji characters are not supported and will be filtered out")
-        ]
-      }
-    ]
+          t("watermark.tooltip.wording.text.bullet3", "Emoji characters are not supported and will be filtered out"),
+        ],
+      },
+    ],
   };
 };
 
@@ -96,20 +109,23 @@ export const useWatermarkTextStyleTips = (): TooltipContent => {
 
   return {
     header: {
-      title: t("watermark.tooltip.textStyle.header.title", "Text Style")
+      title: t("watermark.tooltip.textStyle.header.title", "Text Style"),
     },
     tips: [
       {
         title: t("watermark.tooltip.textStyle.color.title", "Color Selection"),
-        description: t("watermark.tooltip.textStyle.color.text", "Choose a color that provides good contrast with your document content."),
+        description: t(
+          "watermark.tooltip.textStyle.color.text",
+          "Choose a color that provides good contrast with your document content.",
+        ),
         bullets: [
           t("watermark.tooltip.textStyle.color.bullet1", "Light gray (#d3d3d3) for subtle watermarks"),
           t("watermark.tooltip.textStyle.color.bullet2", "Black or dark colors for high contrast"),
-          t("watermark.tooltip.textStyle.color.bullet3", "Custom colors for branding purposes")
-        ]
+          t("watermark.tooltip.textStyle.color.bullet3", "Custom colors for branding purposes"),
+        ],
       },
-      languageSupportTip
-    ]
+      languageSupportTip,
+    ],
   };
 };
 
@@ -118,7 +134,7 @@ export const useWatermarkFileTips = (): TooltipContent => {
 
   return {
     header: {
-      title: t("watermark.tooltip.file.header.title", "Image Upload")
+      title: t("watermark.tooltip.file.header.title", "Image Upload"),
     },
     tips: [
       {
@@ -127,8 +143,8 @@ export const useWatermarkFileTips = (): TooltipContent => {
         bullets: [
           t("watermark.tooltip.file.upload.bullet1", "Supports common formats: PNG, JPG, GIF, BMP"),
           t("watermark.tooltip.file.upload.bullet2", "PNG with transparency works best"),
-          t("watermark.tooltip.file.upload.bullet3", "Higher resolution images maintain quality better")
-        ]
+          t("watermark.tooltip.file.upload.bullet3", "Higher resolution images maintain quality better"),
+        ],
       },
       {
         title: t("watermark.tooltip.file.recommendations.title", "Best Practices"),
@@ -136,10 +152,10 @@ export const useWatermarkFileTips = (): TooltipContent => {
         bullets: [
           t("watermark.tooltip.file.recommendations.bullet1", "Use logos or stamps with transparent backgrounds"),
           t("watermark.tooltip.file.recommendations.bullet2", "Simple designs work better than complex images"),
-          t("watermark.tooltip.file.recommendations.bullet3", "Consider the final document size when choosing resolution")
-        ]
-      }
-    ]
+          t("watermark.tooltip.file.recommendations.bullet3", "Consider the final document size when choosing resolution"),
+        ],
+      },
+    ],
   };
 };
 
@@ -149,28 +165,29 @@ export const useWatermarkFormattingTips = (): TooltipContent => {
 
   return {
     header: {
-      title: t("watermark.tooltip.formatting.header.title", "Formatting & Layout")
+      title: t("watermark.tooltip.formatting.header.title", "Formatting & Layout"),
     },
     tips: [
       {
         title: t("watermark.tooltip.formatting.size.title", "Size Control"),
         description: t("watermark.tooltip.formatting.size.text", "Adjust the size of your watermark (text or image)."),
-        bullets: [
-          t("watermark.tooltip.formatting.size.bullet1", "Larger sizes create more prominent watermarks")
-        ]
+        bullets: [t("watermark.tooltip.formatting.size.bullet1", "Larger sizes create more prominent watermarks")],
       },
       appearanceTip,
       spacingTip,
       {
         title: t("watermark.tooltip.formatting.security.title", "Security Option"),
-        description: t("watermark.tooltip.formatting.security.text", "Convert the final PDF to an image-based format for enhanced security."),
+        description: t(
+          "watermark.tooltip.formatting.security.text",
+          "Convert the final PDF to an image-based format for enhanced security.",
+        ),
         bullets: [
           t("watermark.tooltip.formatting.security.bullet1", "Prevents text selection and copying"),
           t("watermark.tooltip.formatting.security.bullet2", "Makes watermarks harder to remove"),
           t("watermark.tooltip.formatting.security.bullet3", "Results in larger file sizes"),
-          t("watermark.tooltip.formatting.security.bullet4", "Best for sensitive or copyrighted content")
-        ]
-      }
-    ]
+          t("watermark.tooltip.formatting.security.bullet4", "Best for sensitive or copyrighted content"),
+        ],
+      },
+    ],
   };
-};
\ No newline at end of file
+};
diff --git a/frontend/src/core/components/tooltips/useWetSignatureTips.ts b/frontend/src/core/components/tooltips/useWetSignatureTips.ts
index 00e7c39025..580e347fda 100644
--- a/frontend/src/core/components/tooltips/useWetSignatureTips.ts
+++ b/frontend/src/core/components/tooltips/useWetSignatureTips.ts
@@ -1,48 +1,48 @@
-import { useTranslation } from 'react-i18next';
-import { TooltipContent } from '@app/types/tips';
+import { useTranslation } from "react-i18next";
+import { TooltipContent } from "@app/types/tips";
 
 export const useWetSignatureTips = (): TooltipContent => {
   const { t } = useTranslation();
 
   return {
     header: {
-      title: t('wetSignature.tooltip.header', 'Signature Creation Methods'),
+      title: t("wetSignature.tooltip.header", "Signature Creation Methods"),
     },
     tips: [
       {
-        title: t('wetSignature.tooltip.draw.title', 'Draw Signature'),
+        title: t("wetSignature.tooltip.draw.title", "Draw Signature"),
         description: t(
-          'wetSignature.tooltip.draw.description',
-          'Create a handwritten signature using your mouse or touchscreen. Best for personal, authentic signatures.'
+          "wetSignature.tooltip.draw.description",
+          "Create a handwritten signature using your mouse or touchscreen. Best for personal, authentic signatures.",
         ),
         bullets: [
-          t('wetSignature.tooltip.draw.bullet1', 'Customize pen color and thickness'),
-          t('wetSignature.tooltip.draw.bullet2', 'Clear and redraw until satisfied'),
-          t('wetSignature.tooltip.draw.bullet3', 'Works on touch devices (tablets, phones)'),
+          t("wetSignature.tooltip.draw.bullet1", "Customize pen color and thickness"),
+          t("wetSignature.tooltip.draw.bullet2", "Clear and redraw until satisfied"),
+          t("wetSignature.tooltip.draw.bullet3", "Works on touch devices (tablets, phones)"),
         ],
       },
       {
-        title: t('wetSignature.tooltip.upload.title', 'Upload Signature Image'),
+        title: t("wetSignature.tooltip.upload.title", "Upload Signature Image"),
         description: t(
-          'wetSignature.tooltip.upload.description',
-          'Upload a pre-created signature image. Ideal if you have a scanned signature or company logo.'
+          "wetSignature.tooltip.upload.description",
+          "Upload a pre-created signature image. Ideal if you have a scanned signature or company logo.",
         ),
         bullets: [
-          t('wetSignature.tooltip.upload.bullet1', 'Supports PNG, JPG, and other image formats'),
-          t('wetSignature.tooltip.upload.bullet2', 'Transparent backgrounds recommended for best results'),
-          t('wetSignature.tooltip.upload.bullet3', 'Image will be resized to fit signature area'),
+          t("wetSignature.tooltip.upload.bullet1", "Supports PNG, JPG, and other image formats"),
+          t("wetSignature.tooltip.upload.bullet2", "Transparent backgrounds recommended for best results"),
+          t("wetSignature.tooltip.upload.bullet3", "Image will be resized to fit signature area"),
         ],
       },
       {
-        title: t('wetSignature.tooltip.type.title', 'Type Signature'),
+        title: t("wetSignature.tooltip.type.title", "Type Signature"),
         description: t(
-          'wetSignature.tooltip.type.description',
-          'Generate a signature from typed text. Fast and consistent, suitable for business documents.'
+          "wetSignature.tooltip.type.description",
+          "Generate a signature from typed text. Fast and consistent, suitable for business documents.",
         ),
         bullets: [
-          t('wetSignature.tooltip.type.bullet1', 'Choose from multiple fonts'),
-          t('wetSignature.tooltip.type.bullet2', 'Customize text size and color'),
-          t('wetSignature.tooltip.type.bullet3', 'Perfect for standardized signatures'),
+          t("wetSignature.tooltip.type.bullet1", "Choose from multiple fonts"),
+          t("wetSignature.tooltip.type.bullet2", "Customize text size and color"),
+          t("wetSignature.tooltip.type.bullet3", "Perfect for standardized signatures"),
         ],
       },
     ],
diff --git a/frontend/src/core/components/viewer/ActiveDocumentContext.tsx b/frontend/src/core/components/viewer/ActiveDocumentContext.tsx
index 663f6e6d43..e897636905 100644
--- a/frontend/src/core/components/viewer/ActiveDocumentContext.tsx
+++ b/frontend/src/core/components/viewer/ActiveDocumentContext.tsx
@@ -1,5 +1,5 @@
-import React, { createContext, useContext, useState, useEffect, useRef } from 'react';
-import { useDocumentManagerPlugin } from '@embedpdf/plugin-document-manager/react';
+import React, { createContext, useContext, useState, useEffect, useRef } from "react";
+import { useDocumentManagerPlugin } from "@embedpdf/plugin-document-manager/react";
 
 interface ActiveDocumentContextType {
   documentId: string | null;
@@ -51,11 +51,7 @@ export function ActiveDocumentProvider({ children }: { children: React.ReactNode
     };
   }, []);
 
-  return (
-    <ActiveDocumentContext.Provider value={{ documentId }}>
-      {children}
-    </ActiveDocumentContext.Provider>
-  );
+  return <ActiveDocumentContext.Provider value={{ documentId }}>{children}</ActiveDocumentContext.Provider>;
 }
 
 export function useActiveDocument(): string | null {
diff --git a/frontend/src/core/components/viewer/AnnotationAPIBridge.tsx b/frontend/src/core/components/viewer/AnnotationAPIBridge.tsx
index b5626b18c2..3308563b55 100644
--- a/frontend/src/core/components/viewer/AnnotationAPIBridge.tsx
+++ b/frontend/src/core/components/viewer/AnnotationAPIBridge.tsx
@@ -1,6 +1,6 @@
-import { useImperativeHandle, forwardRef, useCallback } from 'react';
-import { useAnnotationCapability } from '@embedpdf/plugin-annotation/react';
-import { PdfAnnotationSubtype, PdfAnnotationIcon } from '@embedpdf/models';
+import { useImperativeHandle, forwardRef, useCallback } from "react";
+import { useAnnotationCapability } from "@embedpdf/plugin-annotation/react";
+import { PdfAnnotationSubtype, PdfAnnotationIcon } from "@embedpdf/models";
 import type {
   AnnotationToolId,
   AnnotationToolOptions,
@@ -9,10 +9,10 @@ import type {
   AnnotationPatch,
   AnnotationRect,
   AnnotationSelection,
-} from '@app/components/viewer/viewerTypes';
-import { useDocumentReady } from '@app/components/viewer/hooks/useDocumentReady';
+} from "@app/components/viewer/viewerTypes";
+import { useDocumentReady } from "@app/components/viewer/hooks/useDocumentReady";
 
-type NoteIcon = NonNullable<AnnotationToolOptions['icon']>;
+type NoteIcon = NonNullable<AnnotationToolOptions["icon"]>;
 
 type AnnotationDefaults =
   | {
@@ -125,23 +125,22 @@ const NOTE_ICON_MAP: Record<NoteIcon, PdfAnnotationIcon> = {
 };
 
 const DEFAULTS = {
-  highlight: '#ffd54f',
-  underline: '#ffb300',
-  strikeout: '#e53935',
-  squiggly: '#00acc1',
-  ink: '#1f2933',
-  inkHighlighter: '#ffd54f',
-  text: '#111111',
-  note: '#ffd54f',
-  shapeFill: '#0000ff',
-  shapeStroke: '#cf5b5b',
+  highlight: "#ffd54f",
+  underline: "#ffb300",
+  strikeout: "#e53935",
+  squiggly: "#00acc1",
+  ink: "#1f2933",
+  inkHighlighter: "#ffd54f",
+  text: "#111111",
+  note: "#ffd54f",
+  shapeFill: "#0000ff",
+  shapeStroke: "#cf5b5b",
   shapeOpacity: 0.5,
 };
 
-const withCustomData = (options?: AnnotationToolOptions) =>
-  options?.customData ? { customData: options.customData } : {};
+const withCustomData = (options?: AnnotationToolOptions) => (options?.customData ? { customData: options.customData } : {});
 
-const getIconEnum = (icon?: NoteIcon) => NOTE_ICON_MAP[icon ?? 'Comment'] ?? PdfAnnotationIcon.Comment;
+const getIconEnum = (icon?: NoteIcon) => NOTE_ICON_MAP[icon ?? "Comment"] ?? PdfAnnotationIcon.Comment;
 
 const buildStampDefaults: ToolDefaultsBuilder = (options) => ({
   type: PdfAnnotationSubtype.STAMP,
@@ -212,7 +211,7 @@ const TOOL_DEFAULT_BUILDERS: Record<AnnotationToolId, ToolDefaultsBuilder> = {
     type: PdfAnnotationSubtype.FREETEXT,
     fontColor: options?.color ?? DEFAULTS.text,
     fontSize: options?.fontSize ?? 14,
-    fontFamily: options?.fontFamily ?? 'Helvetica',
+    fontFamily: options?.fontFamily ?? "Helvetica",
     textAlign: options?.textAlign ?? 0,
     opacity: options?.opacity ?? 1,
     borderWidth: options?.thickness ?? 1,
@@ -225,14 +224,14 @@ const TOOL_DEFAULT_BUILDERS: Record<AnnotationToolId, ToolDefaultsBuilder> = {
     return {
       type: PdfAnnotationSubtype.FREETEXT,
       fontColor,
-      fontFamily: options?.fontFamily ?? 'Helvetica',
+      fontFamily: options?.fontFamily ?? "Helvetica",
       textAlign: options?.textAlign ?? 0,
       fontSize: options?.fontSize ?? 12,
       opacity: options?.opacity ?? 1,
       color: bgColor,
       interiorColor: bgColor,
       borderWidth: options?.thickness ?? 0,
-      contents: options?.contents ?? 'Note',
+      contents: options?.contents ?? "Note",
       icon: getIconEnum(options?.icon),
       ...withCustomData(options),
     };
@@ -263,8 +262,8 @@ const TOOL_DEFAULT_BUILDERS: Record<AnnotationToolId, ToolDefaultsBuilder> = {
   }),
   line: (options) => ({
     type: PdfAnnotationSubtype.LINE,
-    color: options?.color ?? '#1565c0',
-    strokeColor: options?.color ?? '#1565c0',
+    color: options?.color ?? "#1565c0",
+    strokeColor: options?.color ?? "#1565c0",
     opacity: options?.opacity ?? 1,
     borderWidth: options?.borderWidth ?? 2,
     strokeWidth: options?.borderWidth ?? 2,
@@ -273,20 +272,20 @@ const TOOL_DEFAULT_BUILDERS: Record<AnnotationToolId, ToolDefaultsBuilder> = {
   }),
   lineArrow: (options) => ({
     type: PdfAnnotationSubtype.LINE,
-    color: options?.color ?? '#1565c0',
-    strokeColor: options?.color ?? '#1565c0',
+    color: options?.color ?? "#1565c0",
+    strokeColor: options?.color ?? "#1565c0",
     opacity: options?.opacity ?? 1,
     borderWidth: options?.borderWidth ?? 2,
     strokeWidth: options?.borderWidth ?? 2,
     lineWidth: options?.borderWidth ?? 2,
-    startStyle: 'None',
-    endStyle: 'ClosedArrow',
-    lineEndingStyles: { start: 'None', end: 'ClosedArrow' },
+    startStyle: "None",
+    endStyle: "ClosedArrow",
+    lineEndingStyles: { start: "None", end: "ClosedArrow" },
     ...withCustomData(options),
   }),
   polyline: (options) => ({
     type: PdfAnnotationSubtype.POLYLINE,
-    color: options?.color ?? '#1565c0',
+    color: options?.color ?? "#1565c0",
     opacity: options?.opacity ?? 1,
     borderWidth: options?.borderWidth ?? 2,
     ...withCustomData(options),
@@ -314,13 +313,13 @@ const TOOL_DEFAULT_BUILDERS: Record<AnnotationToolId, ToolDefaultsBuilder> = {
   }),
   insertText: (options) => ({
     type: PdfAnnotationSubtype.CARET,
-    strokeColor: options?.color ?? '#E44234',
+    strokeColor: options?.color ?? "#E44234",
     opacity: options?.opacity ?? 1,
     ...withCustomData(options),
   }),
   replaceText: (options) => ({
     type: PdfAnnotationSubtype.CARET,
-    strokeColor: options?.color ?? '#E44234',
+    strokeColor: options?.color ?? "#E44234",
     opacity: options?.opacity ?? 1,
     ...withCustomData(options),
   }),
@@ -332,9 +331,8 @@ export const AnnotationAPIBridge = forwardRef<AnnotationAPI>(function Annotation
   const documentReady = useDocumentReady();
 
   const buildAnnotationDefaults = useCallback(
-    (toolId: AnnotationToolId, options?: AnnotationToolOptions) =>
-      TOOL_DEFAULT_BUILDERS[toolId]?.(options) ?? null,
-    []
+    (toolId: AnnotationToolId, options?: AnnotationToolOptions) => TOOL_DEFAULT_BUILDERS[toolId]?.(options) ?? null,
+    [],
   );
 
   const configureAnnotationTool = useCallback(
@@ -346,7 +344,7 @@ export const AnnotationAPIBridge = forwardRef<AnnotationAPI>(function Annotation
 
       // Reset tool first, then activate (like SignatureAPIBridge does)
       api.setActiveTool(null);
-      api.setActiveTool(toolId === 'select' ? null : toolId);
+      api.setActiveTool(toolId === "select" ? null : toolId);
 
       // Verify tool was activated before setting defaults (like SignatureAPIBridge does)
       const activeTool = api.getActiveTool?.();
@@ -354,7 +352,7 @@ export const AnnotationAPIBridge = forwardRef<AnnotationAPI>(function Annotation
         api.setToolDefaults?.(toolId, defaults);
       }
     },
-    [annotationApi, buildAnnotationDefaults]
+    [annotationApi, buildAnnotationDefaults],
   );
 
   useImperativeHandle(
@@ -385,8 +383,8 @@ export const AnnotationAPIBridge = forwardRef<AnnotationAPI>(function Annotation
           // instead of crashing the entire annotations tool.
           // Only log unexpected errors - "No active document" is a common expected state during init
           const errorMessage = error instanceof Error ? error.message : String(error);
-          if (!errorMessage.includes('No active document')) {
-            console.error('[AnnotationAPIBridge] getSelectedAnnotation failed:', error);
+          if (!errorMessage.includes("No active document")) {
+            console.error("[AnnotationAPIBridge] getSelectedAnnotation failed:", error);
           }
           return null;
         }
@@ -445,7 +443,7 @@ export const AnnotationAPIBridge = forwardRef<AnnotationAPI>(function Annotation
         api?.moveAnnotation?.(pageIndex, annotationId, newRect);
       },
     }),
-    [annotationApi, configureAnnotationTool, buildAnnotationDefaults]
+    [annotationApi, configureAnnotationTool, buildAnnotationDefaults],
   );
 
   return null;
diff --git a/frontend/src/core/components/viewer/AnnotationMenuButtons.tsx b/frontend/src/core/components/viewer/AnnotationMenuButtons.tsx
index 8a471d7a52..0fab5e3d46 100644
--- a/frontend/src/core/components/viewer/AnnotationMenuButtons.tsx
+++ b/frontend/src/core/components/viewer/AnnotationMenuButtons.tsx
@@ -1,24 +1,24 @@
-import { ActionIcon, Tooltip, Popover, TextInput, Button, Stack } from '@mantine/core';
-import { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import DeleteIcon from '@mui/icons-material/Delete';
-import EditIcon from '@mui/icons-material/Edit';
-import CommentIcon from '@mui/icons-material/ChatBubbleOutlineRounded';
-import AddCommentIcon from '@mui/icons-material/AddCommentOutlined';
-import OpenInNewIcon from '@mui/icons-material/OpenInNewRounded';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import type { FirstLinkTarget } from '@app/components/viewer/useAnnotationMenuHandlers';
+import { ActionIcon, Tooltip, Popover, TextInput, Button, Stack } from "@mantine/core";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import DeleteIcon from "@mui/icons-material/Delete";
+import EditIcon from "@mui/icons-material/Edit";
+import CommentIcon from "@mui/icons-material/ChatBubbleOutlineRounded";
+import AddCommentIcon from "@mui/icons-material/AddCommentOutlined";
+import OpenInNewIcon from "@mui/icons-material/OpenInNewRounded";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import type { FirstLinkTarget } from "@app/components/viewer/useAnnotationMenuHandlers";
 
 export const commonButtonStyles = {
   root: {
     flexShrink: 0,
-    backgroundColor: 'var(--bg-raised)',
-    border: '1px solid var(--border-default)',
-    color: 'var(--text-secondary)',
-    '&:hover': {
-      backgroundColor: 'var(--hover-bg)',
-      borderColor: 'var(--border-strong)',
-      color: 'var(--text-primary)',
+    backgroundColor: "var(--bg-raised)",
+    border: "1px solid var(--border-default)",
+    color: "var(--text-secondary)",
+    "&:hover": {
+      backgroundColor: "var(--hover-bg)",
+      borderColor: "var(--border-strong)",
+      color: "var(--text-primary)",
     },
   },
 };
@@ -26,7 +26,7 @@ export const commonButtonStyles = {
 export function DeleteButton({ onDelete }: { onDelete: () => void }) {
   const { t } = useTranslation();
   return (
-    <Tooltip label={t('annotation.delete', 'Delete')}>
+    <Tooltip label={t("annotation.delete", "Delete")}>
       <ActionIcon
         variant="subtle"
         color="red"
@@ -35,10 +35,10 @@ export function DeleteButton({ onDelete }: { onDelete: () => void }) {
         styles={{
           root: {
             ...commonButtonStyles.root,
-            '&:hover': {
-              backgroundColor: 'var(--mantine-color-red-1)',
-              borderColor: 'var(--mantine-color-red-4)',
-              color: 'var(--mantine-color-red-7)',
+            "&:hover": {
+              backgroundColor: "var(--mantine-color-red-1)",
+              borderColor: "var(--mantine-color-red-4)",
+              color: "var(--mantine-color-red-7)",
             },
           },
         }}
@@ -52,7 +52,7 @@ export function DeleteButton({ onDelete }: { onDelete: () => void }) {
 export function EditTextButton({ onEdit }: { onEdit: () => void }) {
   const { t } = useTranslation();
   return (
-    <Tooltip label={t('annotation.editText', 'Edit Text')}>
+    <Tooltip label={t("annotation.editText", "Edit Text")}>
       <ActionIcon variant="subtle" color="gray" size="md" onClick={onEdit} styles={commonButtonStyles}>
         <EditIcon style={{ fontSize: 18 }} />
       </ActionIcon>
@@ -69,10 +69,12 @@ interface AttachCommentButtonProps {
 export function AttachCommentButton({ isInSidebar, onView, onAdd }: AttachCommentButtonProps) {
   const { t } = useTranslation();
   return (
-    <Tooltip label={isInSidebar ? t('viewer.comments.viewComment', 'View comment') : t('viewer.comments.addComment', 'Add comment')}>
+    <Tooltip
+      label={isInSidebar ? t("viewer.comments.viewComment", "View comment") : t("viewer.comments.addComment", "Add comment")}
+    >
       <ActionIcon
-        variant={isInSidebar ? 'filled' : 'subtle'}
-        color={isInSidebar ? 'blue' : 'gray'}
+        variant={isInSidebar ? "filled" : "subtle"}
+        color={isInSidebar ? "blue" : "gray"}
         size="md"
         onClick={isInSidebar ? onView : onAdd}
         styles={isInSidebar ? undefined : commonButtonStyles}
@@ -91,7 +93,9 @@ interface CommentButtonProps {
 export function CommentButton({ hasContent, onClick }: CommentButtonProps) {
   const { t } = useTranslation();
   return (
-    <Tooltip label={hasContent ? t('viewer.comments.viewComment', 'View comment') : t('viewer.comments.addComment', 'Add comment')}>
+    <Tooltip
+      label={hasContent ? t("viewer.comments.viewComment", "View comment") : t("viewer.comments.addComment", "Add comment")}
+    >
       <ActionIcon variant="subtle" color="gray" size="md" onClick={onClick} styles={commonButtonStyles}>
         <CommentIcon style={{ fontSize: 18 }} />
       </ActionIcon>
@@ -108,11 +112,11 @@ interface LinkButtonProps {
 export function LinkButton({ firstLinkTarget, onGoToLink, onAddLink }: LinkButtonProps) {
   const { t } = useTranslation();
   const [open, setOpen] = useState(false);
-  const [url, setUrl] = useState('');
+  const [url, setUrl] = useState("");
 
   if (firstLinkTarget) {
     return (
-      <Tooltip label={t('viewer.comments.goToLink', 'Go to link')}>
+      <Tooltip label={t("viewer.comments.goToLink", "Go to link")}>
         <ActionIcon variant="subtle" color="gray" size="md" onClick={onGoToLink} styles={commonButtonStyles}>
           <OpenInNewIcon style={{ fontSize: 18 }} />
         </ActionIcon>
@@ -123,7 +127,7 @@ export function LinkButton({ firstLinkTarget, onGoToLink, onAddLink }: LinkButto
   return (
     <Popover opened={open} onClose={() => setOpen(false)} position="top">
       <Popover.Target>
-        <Tooltip label={t('viewer.comments.addLink', 'Add link')}>
+        <Tooltip label={t("viewer.comments.addLink", "Add link")}>
           <ActionIcon variant="subtle" color="gray" size="md" onClick={() => setOpen((o) => !o)} styles={commonButtonStyles}>
             <LocalIcon icon="link" width="1.25rem" height="1.25rem" />
           </ActionIcon>
@@ -143,11 +147,11 @@ export function LinkButton({ firstLinkTarget, onGoToLink, onAddLink }: LinkButto
             disabled={!url.trim()}
             onClick={() => {
               onAddLink(url);
-              setUrl('');
+              setUrl("");
               setOpen(false);
             }}
           >
-            {t('viewer.comments.addLink', 'Add link')}
+            {t("viewer.comments.addLink", "Add link")}
           </Button>
         </Stack>
       </Popover.Dropdown>
diff --git a/frontend/src/core/components/viewer/AnnotationSelectionMenu.tsx b/frontend/src/core/components/viewer/AnnotationSelectionMenu.tsx
index ceae6587e3..e3468d7df5 100644
--- a/frontend/src/core/components/viewer/AnnotationSelectionMenu.tsx
+++ b/frontend/src/core/components/viewer/AnnotationSelectionMenu.tsx
@@ -1,14 +1,14 @@
-import { Group } from '@mantine/core';
-import { createPortal } from 'react-dom';
-import { useEffect, useState, useRef, useCallback } from 'react';
-import { useAnnotation } from '@embedpdf/plugin-annotation/react';
-import type { TrackedAnnotation } from '@embedpdf/plugin-annotation';
-import { PdfAnnotationSubtype, type PdfAnnotationObject } from '@embedpdf/models';
-import type { AnnotationObject } from '@app/components/viewer/viewerTypes';
-import { useActiveDocumentId } from '@app/components/viewer/useActiveDocumentId';
-import { useViewer } from '@app/contexts/ViewerContext';
-import { useAnnotationMenuHandlers } from '@app/components/viewer/useAnnotationMenuHandlers';
-import { AnnotationTypeButtons } from '@app/components/viewer/AnnotationTypeButtons';
+import { Group } from "@mantine/core";
+import { createPortal } from "react-dom";
+import { useEffect, useState, useRef, useCallback } from "react";
+import { useAnnotation } from "@embedpdf/plugin-annotation/react";
+import type { TrackedAnnotation } from "@embedpdf/plugin-annotation";
+import { PdfAnnotationSubtype, type PdfAnnotationObject } from "@embedpdf/models";
+import type { AnnotationObject } from "@app/components/viewer/viewerTypes";
+import { useActiveDocumentId } from "@app/components/viewer/useActiveDocumentId";
+import { useViewer } from "@app/contexts/ViewerContext";
+import { useAnnotationMenuHandlers } from "@app/components/viewer/useAnnotationMenuHandlers";
+import { AnnotationTypeButtons } from "@app/components/viewer/AnnotationTypeButtons";
 
 /**
  * Props interface matching EmbedPDF's annotation selection menu pattern
@@ -17,7 +17,7 @@ import { AnnotationTypeButtons } from '@app/components/viewer/AnnotationTypeButt
 export interface AnnotationSelectionMenuProps {
   documentId?: string;
   context?: {
-    type: 'annotation';
+    type: "annotation";
     annotation: TrackedAnnotation<PdfAnnotationObject>;
     pageIndex: number;
   };
@@ -65,10 +65,10 @@ function AnnotationSelectionMenuInner({
     const toolId = annObj?.customData?.toolId;
     const annType = annObj?.type;
     const isComment =
-      (annType === PdfAnnotationSubtype.TEXT && toolId === 'textComment') ||
-      (annType === PdfAnnotationSubtype.CARET && (toolId === 'insertText' || toolId === 'replaceText'));
+      (annType === PdfAnnotationSubtype.TEXT && toolId === "textComment") ||
+      (annType === PdfAnnotationSubtype.CARET && (toolId === "insertText" || toolId === "replaceText"));
     if (!isComment) return;
-    requestCommentFocus(documentId, pageIndex, annId, (annObj?.contents ?? '').trim().length > 0);
+    requestCommentFocus(documentId, pageIndex, annId, (annObj?.contents ?? "").trim().length > 0);
   }, [selected, annotation?.object]);
 
   // Click outside to deselect
@@ -76,20 +76,23 @@ function AnnotationSelectionMenuInner({
     if (!selected) return;
     const handlePointerDown = (e: PointerEvent) => {
       const target = e.target as HTMLElement;
-      if (target.closest('[data-annotation-selection-menu]')) return;
-      if (target.closest('[data-no-interaction]')) return;
-      if (target.closest('.mantine-Popover-dropdown')) return;
+      if (target.closest("[data-annotation-selection-menu]")) return;
+      if (target.closest("[data-no-interaction]")) return;
+      if (target.closest(".mantine-Popover-dropdown")) return;
       provides?.deselectAnnotation?.();
     };
-    document.addEventListener('pointerdown', handlePointerDown);
-    return () => document.removeEventListener('pointerdown', handlePointerDown);
+    document.addEventListener("pointerdown", handlePointerDown);
+    return () => document.removeEventListener("pointerdown", handlePointerDown);
   }, [selected, provides]);
 
   // Merge refs — menuWrapperProps.ref is a callback ref from EmbedPDF
-  const setRef = useCallback((node: HTMLDivElement | null) => {
-    wrapperRef.current = node;
-    menuWrapperProps?.ref?.(node);
-  }, [menuWrapperProps]);
+  const setRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      wrapperRef.current = node;
+      menuWrapperProps?.ref?.(node);
+    },
+    [menuWrapperProps],
+  );
 
   // Track menu position via MutationObserver (handles drag repositioning)
   useEffect(() => {
@@ -100,7 +103,10 @@ function AnnotationSelectionMenuInner({
 
     const updatePosition = () => {
       const wrapper = wrapperRef.current;
-      if (!wrapper) { setMenuPosition(null); return; }
+      if (!wrapper) {
+        setMenuPosition(null);
+        return;
+      }
       const rect = wrapper.getBoundingClientRect();
       setMenuPosition({ top: rect.bottom + 8, left: rect.left + rect.width / 2 });
     };
@@ -108,14 +114,14 @@ function AnnotationSelectionMenuInner({
     updatePosition();
 
     const observer = new MutationObserver(updatePosition);
-    observer.observe(wrapperRef.current, { attributes: true, attributeFilter: ['style'] });
-    window.addEventListener('scroll', updatePosition, true);
-    window.addEventListener('resize', updatePosition);
+    observer.observe(wrapperRef.current, { attributes: true, attributeFilter: ["style"] });
+    window.addEventListener("scroll", updatePosition, true);
+    window.addEventListener("resize", updatePosition);
 
     return () => {
       observer.disconnect();
-      window.removeEventListener('scroll', updatePosition, true);
-      window.removeEventListener('resize', updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
     };
   }, [selected]);
 
@@ -125,20 +131,20 @@ function AnnotationSelectionMenuInner({
     <div
       data-annotation-selection-menu
       style={{
-        position: 'fixed',
+        position: "fixed",
         top: `${menuPosition.top}px`,
         left: `${menuPosition.left}px`,
-        transform: 'translateX(-50%)',
-        pointerEvents: 'auto',
+        transform: "translateX(-50%)",
+        pointerEvents: "auto",
         zIndex: 10000,
-        backgroundColor: 'var(--mantine-color-body)',
+        backgroundColor: "var(--mantine-color-body)",
         borderRadius: 8,
-        padding: '8px 12px',
-        boxShadow: '0 2px 12px rgba(0, 0, 0, 0.25)',
-        border: '1px solid var(--mantine-color-default-border)',
-        fontSize: '14px',
+        padding: "8px 12px",
+        boxShadow: "0 2px 12px rgba(0, 0, 0, 0.25)",
+        border: "1px solid var(--mantine-color-default-border)",
+        fontSize: "14px",
         minWidth: `${handlers.menuWidth}px`,
-        transition: 'min-width 0.2s ease',
+        transition: "min-width 0.2s ease",
       }}
     >
       <Group gap="sm" wrap="nowrap" justify="center">
@@ -156,8 +162,8 @@ function AnnotationSelectionMenuInner({
   return (
     <>
       {/* Invisible wrapper for EmbedPDF positioning — pointer-events:none so drag still works */}
-      <div ref={setRef} style={{ ...menuWrapperProps?.style, opacity: 0, pointerEvents: 'none' }} />
-      {typeof document !== 'undefined' && menuContent ? createPortal(menuContent, document.body) : null}
+      <div ref={setRef} style={{ ...menuWrapperProps?.style, opacity: 0, pointerEvents: "none" }} />
+      {typeof document !== "undefined" && menuContent ? createPortal(menuContent, document.body) : null}
     </>
   );
 }
diff --git a/frontend/src/core/components/viewer/AnnotationTypeButtons.tsx b/frontend/src/core/components/viewer/AnnotationTypeButtons.tsx
index ec626291bd..e1e08a69e0 100644
--- a/frontend/src/core/components/viewer/AnnotationTypeButtons.tsx
+++ b/frontend/src/core/components/viewer/AnnotationTypeButtons.tsx
@@ -1,18 +1,22 @@
-import { useTranslation } from 'react-i18next';
-import type { TrackedAnnotation } from '@embedpdf/plugin-annotation';
-import type { PdfAnnotationObject } from '@embedpdf/models';
-import { OpacityControl } from '@app/components/annotation/shared/OpacityControl';
-import { WidthControl } from '@app/components/annotation/shared/WidthControl';
-import { PropertiesPopover, type PropertiesAnnotationType } from '@app/components/annotation/shared/PropertiesPopover';
-import { ColorControl } from '@app/components/annotation/shared/ColorControl';
+import { useTranslation } from "react-i18next";
+import type { TrackedAnnotation } from "@embedpdf/plugin-annotation";
+import type { PdfAnnotationObject } from "@embedpdf/models";
+import { OpacityControl } from "@app/components/annotation/shared/OpacityControl";
+import { WidthControl } from "@app/components/annotation/shared/WidthControl";
+import { PropertiesPopover, type PropertiesAnnotationType } from "@app/components/annotation/shared/PropertiesPopover";
+import { ColorControl } from "@app/components/annotation/shared/ColorControl";
 import {
   DeleteButton,
   EditTextButton,
   AttachCommentButton,
   CommentButton,
   LinkButton,
-} from '@app/components/viewer/AnnotationMenuButtons';
-import type { AnnotationType, AnnotationMenuState, AnnotationMenuHandlers } from '@app/components/viewer/useAnnotationMenuHandlers';
+} from "@app/components/viewer/AnnotationMenuButtons";
+import type {
+  AnnotationType,
+  AnnotationMenuState,
+  AnnotationMenuHandlers,
+} from "@app/components/viewer/useAnnotationMenuHandlers";
 
 export interface AnnotationTypeButtonsProps extends AnnotationMenuState, AnnotationMenuHandlers {
   annotation: TrackedAnnotation<PdfAnnotationObject> | undefined;
@@ -50,47 +54,45 @@ export function AnnotationTypeButtons(props: AnnotationTypeButtonsProps) {
     onCommentColorChange,
   } = props;
 
-  const attachCommentButton = (
-    <AttachCommentButton isInSidebar={isInSidebar} onView={onViewComment} onAdd={onAddToSidebar} />
-  );
+  const attachCommentButton = <AttachCommentButton isInSidebar={isInSidebar} onView={onViewComment} onAdd={onAddToSidebar} />;
 
   switch (annotationType as AnnotationType) {
-    case 'textMarkup':
+    case "textMarkup":
       return (
         <>
           {attachCommentButton}
           <ColorControl
             value={currentColor}
-            onChange={(color) => onColorChange(color, 'main')}
-            label={t('annotation.changeColor', 'Change Colour')}
+            onChange={(color) => onColorChange(color, "main")}
+            label={t("annotation.changeColor", "Change Colour")}
           />
           <OpacityControl value={currentOpacity} onChange={onOpacityChange} />
           <DeleteButton onDelete={onDelete} />
         </>
       );
 
-    case 'ink':
+    case "ink":
       return (
         <>
           {attachCommentButton}
           <ColorControl
             value={currentColor}
-            onChange={(color) => onColorChange(color, 'main')}
-            label={t('annotation.changeColor', 'Change Colour')}
+            onChange={(color) => onColorChange(color, "main")}
+            label={t("annotation.changeColor", "Change Colour")}
           />
           <WidthControl value={currentWidth} onChange={onWidthChange} min={1} max={12} />
           <DeleteButton onDelete={onDelete} />
         </>
       );
 
-    case 'inkHighlighter':
+    case "inkHighlighter":
       return (
         <>
           {attachCommentButton}
           <ColorControl
             value={currentColor}
-            onChange={(color) => onColorChange(color, 'main')}
-            label={t('annotation.changeColor', 'Change Colour')}
+            onChange={(color) => onColorChange(color, "main")}
+            label={t("annotation.changeColor", "Change Colour")}
           />
           <WidthControl value={currentWidth} onChange={onWidthChange} min={1} max={20} />
           <OpacityControl value={currentOpacity} onChange={onOpacityChange} />
@@ -98,20 +100,20 @@ export function AnnotationTypeButtons(props: AnnotationTypeButtonsProps) {
         </>
       );
 
-    case 'text':
-    case 'note':
+    case "text":
+    case "note":
       return (
         <>
           {attachCommentButton}
           <ColorControl
             value={textColor}
-            onChange={(color) => onColorChange(color, 'text')}
-            label={t('annotation.color', 'Color')}
+            onChange={(color) => onColorChange(color, "text")}
+            label={t("annotation.color", "Color")}
           />
           <ColorControl
             value={backgroundColor}
-            onChange={(color) => onColorChange(color, 'background')}
-            label={t('annotation.backgroundColor', 'Background color')}
+            onChange={(color) => onColorChange(color, "background")}
+            label={t("annotation.backgroundColor", "Background color")}
           />
           <EditTextButton onEdit={onEdit} />
           <PropertiesPopover
@@ -123,59 +125,55 @@ export function AnnotationTypeButtons(props: AnnotationTypeButtonsProps) {
         </>
       );
 
-    case 'comment':
+    case "comment":
       return (
         <>
           <CommentButton hasContent={hasCommentContent} onClick={onViewComment} />
           <EditTextButton onEdit={onEdit} />
           <ColorControl
-            value={obj?.strokeColor || obj?.color || '#ffa000'}
+            value={obj?.strokeColor || obj?.color || "#ffa000"}
             onChange={onCommentColorChange}
-            label={t('annotation.annotationStyle', 'Annotation style')}
+            label={t("annotation.annotationStyle", "Annotation style")}
           />
           <LinkButton firstLinkTarget={firstLinkTarget} onGoToLink={onGoToLink} onAddLink={onAddLink} />
           <DeleteButton onDelete={onDelete} />
         </>
       );
 
-    case 'shape':
+    case "shape":
       return (
         <>
           {attachCommentButton}
           <ColorControl
             value={strokeColor}
-            onChange={(color) => onColorChange(color, 'stroke')}
-            label={t('annotation.strokeColor', 'Stroke Colour')}
+            onChange={(color) => onColorChange(color, "stroke")}
+            label={t("annotation.strokeColor", "Stroke Colour")}
           />
           <ColorControl
             value={fillColor}
-            onChange={(color) => onColorChange(color, 'fill')}
-            label={t('annotation.fillColor', 'Fill Colour')}
-          />
-          <PropertiesPopover
-            annotationType="shape"
-            annotation={annotation}
-            onUpdate={onPropertiesUpdate}
+            onChange={(color) => onColorChange(color, "fill")}
+            label={t("annotation.fillColor", "Fill Colour")}
           />
+          <PropertiesPopover annotationType="shape" annotation={annotation} onUpdate={onPropertiesUpdate} />
           <DeleteButton onDelete={onDelete} />
         </>
       );
 
-    case 'line':
+    case "line":
       return (
         <>
           {attachCommentButton}
           <ColorControl
             value={currentColor}
-            onChange={(color) => onColorChange(color, 'main')}
-            label={t('annotation.changeColor', 'Change Colour')}
+            onChange={(color) => onColorChange(color, "main")}
+            label={t("annotation.changeColor", "Change Colour")}
           />
           <WidthControl value={currentWidth} onChange={onWidthChange} min={1} max={12} />
           <DeleteButton onDelete={onDelete} />
         </>
       );
 
-    case 'stamp':
+    case "stamp":
       return (
         <>
           {attachCommentButton}
@@ -191,8 +189,8 @@ export function AnnotationTypeButtons(props: AnnotationTypeButtonsProps) {
           <LinkButton firstLinkTarget={firstLinkTarget} onGoToLink={onGoToLink} onAddLink={onAddLink} />
           <ColorControl
             value={currentColor}
-            onChange={(color) => onColorChange(color, 'main')}
-            label={t('annotation.changeColor', 'Change Colour')}
+            onChange={(color) => onColorChange(color, "main")}
+            label={t("annotation.changeColor", "Change Colour")}
           />
           <DeleteButton onDelete={onDelete} />
         </>
diff --git a/frontend/src/core/components/viewer/AttachmentAPIBridge.tsx b/frontend/src/core/components/viewer/AttachmentAPIBridge.tsx
index 26e722a3bc..5e98794201 100644
--- a/frontend/src/core/components/viewer/AttachmentAPIBridge.tsx
+++ b/frontend/src/core/components/viewer/AttachmentAPIBridge.tsx
@@ -1,9 +1,9 @@
-import { useEffect, useMemo, useState, useCallback } from 'react';
-import { useAttachmentCapability } from '@embedpdf/plugin-attachment/react';
-import { useViewer } from '@app/contexts/ViewerContext';
-import { AttachmentState, AttachmentAPIWrapper } from '@app/contexts/viewer/viewerBridges';
-import { PdfAttachmentObject } from '@embedpdf/models';
-import { useDocumentReady } from '@app/components/viewer/hooks/useDocumentReady';
+import { useEffect, useMemo, useState, useCallback } from "react";
+import { useAttachmentCapability } from "@embedpdf/plugin-attachment/react";
+import { useViewer } from "@app/contexts/ViewerContext";
+import { AttachmentState, AttachmentAPIWrapper } from "@app/contexts/viewer/viewerBridges";
+import { PdfAttachmentObject } from "@embedpdf/models";
+import { useDocumentReady } from "@app/components/viewer/hooks/useDocumentReady";
 
 /**
  * Connects the PDF attachment plugin to the shared ViewerContext.
@@ -18,45 +18,42 @@ export function AttachmentAPIBridge() {
   });
   const documentReady = useDocumentReady();
 
-  const fetchAttachments = useCallback(
-    async () => {
-      if (!attachmentCapability || !documentReady) {
-        // Set error state instead of throwing for better user experience
-        setState(prev => ({
-          ...prev,
-          error: 'Document not ready or attachment capability not available',
-          isLoading: false
-        }));
-        return [];
-      }
+  const fetchAttachments = useCallback(async () => {
+    if (!attachmentCapability || !documentReady) {
+      // Set error state instead of throwing for better user experience
+      setState((prev) => ({
+        ...prev,
+        error: "Document not ready or attachment capability not available",
+        isLoading: false,
+      }));
+      return [];
+    }
 
-      setState(prev => ({ ...prev, isLoading: true, error: null }));
-      try {
-        const task = attachmentCapability.getAttachments();
+    setState((prev) => ({ ...prev, isLoading: true, error: null }));
+    try {
+      const task = attachmentCapability.getAttachments();
 
-        const timeoutPromise = new Promise<never>((_, reject) => {
-          setTimeout(() => reject(new Error('Attachment fetch timeout after 10 seconds')), 10000);
-        });
+      const timeoutPromise = new Promise<never>((_, reject) => {
+        setTimeout(() => reject(new Error("Attachment fetch timeout after 10 seconds")), 10000);
+      });
 
-        const result = await Promise.race([task.toPromise(), timeoutPromise]);
-        setState({
-          attachments: result ?? [],
-          isLoading: false,
-          error: null,
-        });
-        return result ?? [];
-      } catch (error) {
-        const message = error instanceof Error ? error.message : 'Failed to load attachments';
-        setState({
-          attachments: null,
-          isLoading: false,
-          error: message,
-        });
-        throw error;
-      }
-    },
-    [attachmentCapability, documentReady]
-  );
+      const result = await Promise.race([task.toPromise(), timeoutPromise]);
+      setState({
+        attachments: result ?? [],
+        isLoading: false,
+        error: null,
+      });
+      return result ?? [];
+    } catch (error) {
+      const message = error instanceof Error ? error.message : "Failed to load attachments";
+      setState({
+        attachments: null,
+        isLoading: false,
+        error: message,
+      });
+      throw error;
+    }
+  }, [attachmentCapability, documentReady]);
 
   const api = useMemo<AttachmentAPIWrapper | null>(() => {
     // Only provide API when both capability AND document are ready
@@ -70,17 +67,17 @@ export function AttachmentAPIBridge() {
           const buffer = await task.toPromise();
 
           // Create a blob and trigger download
-          const blob = new Blob([buffer], { type: 'application/octet-stream' });
+          const blob = new Blob([buffer], { type: "application/octet-stream" });
           const url = window.URL.createObjectURL(blob);
-          const link = document.createElement('a');
+          const link = document.createElement("a");
           link.href = url;
-          link.download = attachment.name || 'attachment';
+          link.download = attachment.name || "attachment";
           document.body.appendChild(link);
           link.click();
           document.body.removeChild(link);
           window.URL.revokeObjectURL(url);
         } catch (error) {
-          console.error('Failed to download attachment:', error);
+          console.error("Failed to download attachment:", error);
         }
       },
       clearAttachments: () => {
@@ -103,17 +100,17 @@ export function AttachmentAPIBridge() {
   useEffect(() => {
     if (!api) {
       // If API becomes null (e.g. document transitions), ensure we unregister stale bridge
-      registerBridge('attachment', null);
+      registerBridge("attachment", null);
       return;
     }
 
-    registerBridge('attachment', {
+    registerBridge("attachment", {
       state,
       api,
     });
 
     return () => {
-      registerBridge('attachment', null);
+      registerBridge("attachment", null);
     };
   }, [api, state, registerBridge]);
 
diff --git a/frontend/src/core/components/viewer/AttachmentSidebar.tsx b/frontend/src/core/components/viewer/AttachmentSidebar.tsx
index 1e5d6cd91a..e26c90fe71 100644
--- a/frontend/src/core/components/viewer/AttachmentSidebar.tsx
+++ b/frontend/src/core/components/viewer/AttachmentSidebar.tsx
@@ -1,13 +1,13 @@
-import { useEffect, useMemo, useRef, useState, useCallback } from 'react';
-import { Box, ScrollArea, Text, ActionIcon, Loader, Stack, TextInput } from '@mantine/core';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { useViewer } from '@app/contexts/ViewerContext';
-import { PdfAttachmentObject } from '@embedpdf/models';
-import AttachmentIcon from '@mui/icons-material/AttachmentRounded';
-import DownloadIcon from '@mui/icons-material/DownloadRounded';
-import { useTranslation } from 'react-i18next';
-import '@app/components/viewer/SidebarBase.css';
-import '@app/components/viewer/AttachmentSidebar.css';
+import { useEffect, useMemo, useRef, useState, useCallback } from "react";
+import { Box, ScrollArea, Text, ActionIcon, Loader, Stack, TextInput } from "@mantine/core";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { useViewer } from "@app/contexts/ViewerContext";
+import { PdfAttachmentObject } from "@embedpdf/models";
+import AttachmentIcon from "@mui/icons-material/AttachmentRounded";
+import DownloadIcon from "@mui/icons-material/DownloadRounded";
+import { useTranslation } from "react-i18next";
+import "@app/components/viewer/SidebarBase.css";
+import "@app/components/viewer/AttachmentSidebar.css";
 
 interface AttachmentSidebarProps {
   visible: boolean;
@@ -17,27 +17,33 @@ interface AttachmentSidebarProps {
   preloadCacheKeys?: string[];
 }
 
-const SIDEBAR_WIDTH = '15rem';
+const SIDEBAR_WIDTH = "15rem";
 
 interface AttachmentCacheEntry {
-  status: 'idle' | 'loading' | 'success' | 'error';
+  status: "idle" | "loading" | "success" | "error";
   attachments: PdfAttachmentObject[] | null;
   error: string | null;
   lastFetched: number | null;
 }
 
 const createEntry = (overrides: Partial<AttachmentCacheEntry> = {}): AttachmentCacheEntry => ({
-  status: 'idle',
+  status: "idle",
   attachments: null,
   error: null,
   lastFetched: null,
   ...overrides,
 });
 
-export const AttachmentSidebar = ({ visible, thumbnailVisible, bookmarkVisible, documentCacheKey, preloadCacheKeys = [] }: AttachmentSidebarProps) => {
+export const AttachmentSidebar = ({
+  visible,
+  thumbnailVisible,
+  bookmarkVisible,
+  documentCacheKey,
+  preloadCacheKeys = [],
+}: AttachmentSidebarProps) => {
   const { t } = useTranslation();
   const { attachmentActions, hasAttachmentSupport } = useViewer();
-  const [searchTerm, setSearchTerm] = useState('');
+  const [searchTerm, setSearchTerm] = useState("");
   const [attachmentSupport, setAttachmentSupport] = useState(() => hasAttachmentSupport());
   const [activeEntry, setActiveEntry] = useState<AttachmentCacheEntry>(() => createEntry());
   const cacheRef = useRef<Map<string, AttachmentCacheEntry>>(new Map());
@@ -67,7 +73,7 @@ export const AttachmentSidebar = ({ visible, thumbnailVisible, bookmarkVisible,
 
   // Reset UI and load cached entry (if any) when switching documents
   useEffect(() => {
-    setSearchTerm('');
+    setSearchTerm("");
 
     if (!documentCacheKey) {
       setActiveEntry(createEntry());
@@ -78,9 +84,9 @@ export const AttachmentSidebar = ({ visible, thumbnailVisible, bookmarkVisible,
     const cached = cacheRef.current.get(documentCacheKey);
     if (cached) {
       setActiveEntry(cached);
-      if (cached.status === 'success') {
+      if (cached.status === "success") {
         attachmentActions.setLocalAttachments(cached.attachments ?? [], null);
-      } else if (cached.status === 'error') {
+      } else if (cached.status === "error") {
         attachmentActions.setLocalAttachments(cached.attachments ?? null, cached.error);
       } else {
         attachmentActions.clearAttachments();
@@ -97,7 +103,7 @@ export const AttachmentSidebar = ({ visible, thumbnailVisible, bookmarkVisible,
     if (documentCacheKey) {
       allowed.add(documentCacheKey);
     }
-    preloadCacheKeys.forEach(key => {
+    preloadCacheKeys.forEach((key) => {
       if (key) {
         allowed.add(key);
       }
@@ -116,7 +122,7 @@ export const AttachmentSidebar = ({ visible, thumbnailVisible, bookmarkVisible,
 
     const key = documentCacheKey;
     const cached = cacheRef.current.get(key);
-    if (cached && (cached.status === 'loading' || cached.status === 'success')) {
+    if (cached && (cached.status === "loading" || cached.status === "success")) {
       return;
     }
 
@@ -128,11 +134,13 @@ export const AttachmentSidebar = ({ visible, thumbnailVisible, bookmarkVisible,
       }
     };
 
-    updateEntry(createEntry({
-      status: 'loading',
-      attachments: cached?.attachments ?? null,
-      lastFetched: cached?.lastFetched ?? null,
-    }));
+    updateEntry(
+      createEntry({
+        status: "loading",
+        attachments: cached?.attachments ?? null,
+        lastFetched: cached?.lastFetched ?? null,
+      }),
+    );
 
     const fetchWithRetry = async () => {
       const maxAttempts = 10;
@@ -141,27 +149,24 @@ export const AttachmentSidebar = ({ visible, thumbnailVisible, bookmarkVisible,
           const result = await attachmentActions.getAttachments();
           return Array.isArray(result) ? result : [];
         } catch (error: any) {
-          const message = typeof error?.message === 'string' ? error.message.toLowerCase() : '';
-          const notReady =
-            message.includes('document') &&
-            message.includes('not') &&
-            message.includes('open');
+          const message = typeof error?.message === "string" ? error.message.toLowerCase() : "";
+          const notReady = message.includes("document") && message.includes("not") && message.includes("open");
 
           if (!notReady || attempt === maxAttempts - 1) {
             throw error;
           }
 
-          await new Promise(resolve => setTimeout(resolve, 50));
+          await new Promise((resolve) => setTimeout(resolve, 50));
         }
       }
       return [];
     };
 
     fetchWithRetry()
-      .then(attachments => {
+      .then((attachments) => {
         if (cancelled) return;
         const entry = createEntry({
-          status: 'success',
+          status: "success",
           attachments,
           lastFetched: Date.now(),
         });
@@ -170,12 +175,12 @@ export const AttachmentSidebar = ({ visible, thumbnailVisible, bookmarkVisible,
           attachmentActions.setLocalAttachments(attachments, null);
         }
       })
-      .catch(error => {
+      .catch((error) => {
         if (cancelled) return;
-        const message = error instanceof Error ? error.message : 'Failed to load attachments';
+        const message = error instanceof Error ? error.message : "Failed to load attachments";
         const fallback = cacheRef.current.get(key);
         const entry = createEntry({
-          status: 'error',
+          status: "error",
           attachments: fallback?.attachments ?? null,
           error: message,
           lastFetched: fallback?.lastFetched ?? null,
@@ -196,7 +201,7 @@ export const AttachmentSidebar = ({ visible, thumbnailVisible, bookmarkVisible,
     cacheRef.current.delete(documentCacheKey);
     setActiveEntry(createEntry());
     attachmentActions.clearAttachments();
-    setFetchNonce(value => value + 1);
+    setFetchNonce((value) => value + 1);
   }, [documentCacheKey, attachmentActions]);
 
   const handleDownload = (attachment: PdfAttachmentObject, event: React.MouseEvent) => {
@@ -208,16 +213,16 @@ export const AttachmentSidebar = ({ visible, thumbnailVisible, bookmarkVisible,
     const attachments = Array.isArray(activeEntry.attachments) ? activeEntry.attachments : [];
     if (!searchTerm.trim()) return attachments;
     const term = searchTerm.trim().toLowerCase();
-    return attachments.filter(a => a.name?.toLowerCase().includes(term));
+    return attachments.filter((a) => a.name?.toLowerCase().includes(term));
   }, [activeEntry.attachments, searchTerm]);
 
   const formatFileSize = (bytes?: number) => {
-    if (bytes === undefined) return '';
-    if (bytes === 0) return '0 B';
+    if (bytes === undefined) return "";
+    if (bytes === 0) return "0 B";
     const k = 1024;
-    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const sizes = ["B", "KB", "MB", "GB"];
     const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
   };
 
   const renderAttachments = (attachments: PdfAttachmentObject[]) => {
@@ -229,7 +234,7 @@ export const AttachmentSidebar = ({ visible, thumbnailVisible, bookmarkVisible,
           role="button"
           tabIndex={0}
           onKeyDown={(event) => {
-            if (event.key === 'Enter' || event.key === ' ') {
+            if (event.key === "Enter" || event.key === " ") {
               event.preventDefault();
               handleDownload(attachment, event as any);
             }
@@ -237,11 +242,11 @@ export const AttachmentSidebar = ({ visible, thumbnailVisible, bookmarkVisible,
         >
           <div className="attachment-item__content">
             <Text size="sm" fw={500} className="attachment-item__title">
-              {attachment.name || 'Untitled'}
+              {attachment.name || "Untitled"}
             </Text>
             {(attachment.size !== undefined || attachment.description) && (
               <Text size="xs" c="dimmed" className="attachment-item__meta">
-                {[formatFileSize(attachment.size), attachment.description].filter(Boolean).join(' • ')}
+                {[formatFileSize(attachment.size), attachment.description].filter(Boolean).join(" • ")}
               </Text>
             )}
           </div>
@@ -251,7 +256,7 @@ export const AttachmentSidebar = ({ visible, thumbnailVisible, bookmarkVisible,
             className="attachment-item__download-icon"
             onClick={(event) => handleDownload(attachment, event)}
           >
-            <DownloadIcon sx={{ fontSize: '1.2rem' }} />
+            <DownloadIcon sx={{ fontSize: "1.2rem" }} />
           </ActionIcon>
         </div>
       </div>
@@ -264,8 +269,8 @@ export const AttachmentSidebar = ({ visible, thumbnailVisible, bookmarkVisible,
 
   const isSearchActive = searchTerm.trim().length > 0;
   const hasAttachments = Array.isArray(activeEntry.attachments) && activeEntry.attachments.length > 0;
-  const isLocalLoading = attachmentSupport && activeEntry.status === 'loading';
-  const currentError = attachmentSupport && activeEntry.status === 'error' ? activeEntry.error : null;
+  const isLocalLoading = attachmentSupport && activeEntry.status === "loading";
+  const currentError = attachmentSupport && activeEntry.status === "error" ? activeEntry.error : null;
 
   const showAttachmentList = attachmentSupport && documentCacheKey && filteredAttachments.length > 0;
   const showEmptyState =
@@ -273,21 +278,17 @@ export const AttachmentSidebar = ({ visible, thumbnailVisible, bookmarkVisible,
     documentCacheKey &&
     !isLocalLoading &&
     !currentError &&
-    activeEntry.status === 'success' &&
+    activeEntry.status === "success" &&
     !hasAttachments;
   const showSearchEmpty =
-    attachmentSupport &&
-    documentCacheKey &&
-    isSearchActive &&
-    hasAttachments &&
-    filteredAttachments.length === 0;
+    attachmentSupport && documentCacheKey && isSearchActive && hasAttachments && filteredAttachments.length === 0;
   const showNoDocument = attachmentSupport && !documentCacheKey;
 
   return (
     <Box
       className="sidebar-base attachment-sidebar"
       style={{
-        position: 'fixed',
+        position: "fixed",
         right: `${(thumbnailVisible ? 15 : 0) + (bookmarkVisible ? 15 : 0)}rem`,
         top: 0,
         bottom: 0,
@@ -301,7 +302,7 @@ export const AttachmentSidebar = ({ visible, thumbnailVisible, bookmarkVisible,
             <AttachmentIcon />
           </span>
           <Text fw={600} size="sm" tt="uppercase" lts={0.5}>
-            {t('viewer.attachments.title', 'Attachments')}
+            {t("viewer.attachments.title", "Attachments")}
           </Text>
         </div>
       </div>
@@ -309,7 +310,7 @@ export const AttachmentSidebar = ({ visible, thumbnailVisible, bookmarkVisible,
       <Box px="sm" pb="sm" className="sidebar-base__search attachment-sidebar__search">
         <TextInput
           value={searchTerm}
-          placeholder={t('viewer.attachments.searchPlaceholder', 'Search attachments')}
+          placeholder={t("viewer.attachments.searchPlaceholder", "Search attachments")}
           onChange={(event) => setSearchTerm(event.currentTarget.value)}
           leftSection={<LocalIcon icon="search" width="1.1rem" height="1.1rem" />}
           size="xs"
@@ -321,7 +322,7 @@ export const AttachmentSidebar = ({ visible, thumbnailVisible, bookmarkVisible,
           {!attachmentSupport && (
             <div className="sidebar-base__empty-state">
               <Text size="sm" c="dimmed" ta="center">
-                {t('viewer.attachments.noSupport', 'Attachment support is unavailable for this viewer.')}
+                {t("viewer.attachments.noSupport", "Attachment support is unavailable for this viewer.")}
               </Text>
             </div>
           )}
@@ -329,7 +330,7 @@ export const AttachmentSidebar = ({ visible, thumbnailVisible, bookmarkVisible,
           {attachmentSupport && showNoDocument && (
             <div className="sidebar-base__empty-state">
               <Text size="sm" c="dimmed" ta="center">
-                {t('viewer.attachments.noDocument', 'Open a PDF to view its attachments.')}
+                {t("viewer.attachments.noDocument", "Open a PDF to view its attachments.")}
               </Text>
             </div>
           )}
@@ -349,7 +350,7 @@ export const AttachmentSidebar = ({ visible, thumbnailVisible, bookmarkVisible,
             <Stack gap="md" align="center" c="dimmed" py="xl" className="sidebar-base__loading">
               <Loader size="md" type="dots" />
               <Text size="sm" ta="center">
-                {t('viewer.attachments.loading', 'Loading attachments...')}
+                {t("viewer.attachments.loading", "Loading attachments...")}
               </Text>
             </Stack>
           )}
@@ -357,21 +358,17 @@ export const AttachmentSidebar = ({ visible, thumbnailVisible, bookmarkVisible,
           {showEmptyState && (
             <div className="sidebar-base__empty-state">
               <Text size="sm" c="dimmed" ta="center">
-                {t('viewer.attachments.empty', 'No attachments in this document')}
+                {t("viewer.attachments.empty", "No attachments in this document")}
               </Text>
             </div>
           )}
 
-          {showAttachmentList && (
-            <div className="attachment-list">
-              {renderAttachments(filteredAttachments)}
-            </div>
-          )}
+          {showAttachmentList && <div className="attachment-list">{renderAttachments(filteredAttachments)}</div>}
 
           {showSearchEmpty && (
             <div className="sidebar-base__empty-state">
               <Text size="sm" c="dimmed" ta="center">
-                {t('viewer.attachments.noMatch', 'No attachments match your search')}
+                {t("viewer.attachments.noMatch", "No attachments match your search")}
               </Text>
             </div>
           )}
diff --git a/frontend/src/core/components/viewer/BookmarkAPIBridge.tsx b/frontend/src/core/components/viewer/BookmarkAPIBridge.tsx
index 900dcb8090..3a6290e28d 100644
--- a/frontend/src/core/components/viewer/BookmarkAPIBridge.tsx
+++ b/frontend/src/core/components/viewer/BookmarkAPIBridge.tsx
@@ -1,8 +1,8 @@
-import { useEffect, useMemo, useState, useCallback } from 'react';
-import { useBookmarkCapability, BookmarkCapability } from '@embedpdf/plugin-bookmark/react';
-import { useViewer } from '@app/contexts/ViewerContext';
-import { BookmarkState, BookmarkAPIWrapper } from '@app/contexts/viewer/viewerBridges';
-import { useDocumentReady } from '@app/components/viewer/hooks/useDocumentReady';
+import { useEffect, useMemo, useState, useCallback } from "react";
+import { useBookmarkCapability, BookmarkCapability } from "@embedpdf/plugin-bookmark/react";
+import { useViewer } from "@app/contexts/ViewerContext";
+import { BookmarkState, BookmarkAPIWrapper } from "@app/contexts/viewer/viewerBridges";
+import { useDocumentReady } from "@app/components/viewer/hooks/useDocumentReady";
 
 /**
  * Connects the PDF bookmark plugin to the shared ViewerContext.
@@ -20,15 +20,15 @@ export function BookmarkAPIBridge() {
   const fetchBookmarks = useCallback(
     async (capability: BookmarkCapability) => {
       if (!documentReady) {
-        setState(prev => ({
+        setState((prev) => ({
           ...prev,
-          error: 'Document not ready or bookmark capability not available',
+          error: "Document not ready or bookmark capability not available",
           isLoading: false,
         }));
         return [];
       }
 
-      setState(prev => ({ ...prev, isLoading: true, error: null }));
+      setState((prev) => ({ ...prev, isLoading: true, error: null }));
       try {
         const task = capability.getBookmarks();
         const result = await task.toPromise();
@@ -39,7 +39,7 @@ export function BookmarkAPIBridge() {
         });
         return result.bookmarks ?? [];
       } catch (error) {
-        const message = error instanceof Error ? error.message : 'Failed to load bookmarks';
+        const message = error instanceof Error ? error.message : "Failed to load bookmarks";
         setState({
           bookmarks: null,
           isLoading: false,
@@ -48,7 +48,7 @@ export function BookmarkAPIBridge() {
         throw error;
       }
     },
-    [documentReady]
+    [documentReady],
   );
 
   const api = useMemo<BookmarkAPIWrapper | null>(() => {
@@ -76,17 +76,17 @@ export function BookmarkAPIBridge() {
 
   useEffect(() => {
     if (!api) {
-      registerBridge('bookmark', null);
+      registerBridge("bookmark", null);
       return;
     }
 
-    registerBridge('bookmark', {
+    registerBridge("bookmark", {
       state,
       api,
     });
 
     return () => {
-      registerBridge('bookmark', null);
+      registerBridge("bookmark", null);
     };
   }, [api, state, registerBridge]);
 
diff --git a/frontend/src/core/components/viewer/BookmarkSidebar.tsx b/frontend/src/core/components/viewer/BookmarkSidebar.tsx
index 505ccaca6f..2cd5eb37b9 100644
--- a/frontend/src/core/components/viewer/BookmarkSidebar.tsx
+++ b/frontend/src/core/components/viewer/BookmarkSidebar.tsx
@@ -1,11 +1,11 @@
-import { useEffect, useMemo, useRef, useState, useCallback } from 'react';
-import { Box, ScrollArea, Text, ActionIcon, Loader, Stack, TextInput, Button } from '@mantine/core';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { useViewer } from '@app/contexts/ViewerContext';
-import { PdfBookmarkObject, PdfActionType } from '@embedpdf/models';
-import BookmarksIcon from '@mui/icons-material/BookmarksRounded';
-import '@app/components/viewer/SidebarBase.css';
-import '@app/components/viewer/BookmarkSidebar.css';
+import { useEffect, useMemo, useRef, useState, useCallback } from "react";
+import { Box, ScrollArea, Text, ActionIcon, Loader, Stack, TextInput, Button } from "@mantine/core";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { useViewer } from "@app/contexts/ViewerContext";
+import { PdfBookmarkObject, PdfActionType } from "@embedpdf/models";
+import BookmarksIcon from "@mui/icons-material/BookmarksRounded";
+import "@app/components/viewer/SidebarBase.css";
+import "@app/components/viewer/BookmarkSidebar.css";
 
 interface BookmarkSidebarProps {
   visible: boolean;
@@ -14,11 +14,11 @@ interface BookmarkSidebarProps {
   preloadCacheKeys?: string[];
 }
 
-const SIDEBAR_WIDTH = '15rem';
+const SIDEBAR_WIDTH = "15rem";
 
 type BookmarkNode = PdfBookmarkObject & { id: string };
 
-type BookmarkCacheStatus = 'idle' | 'loading' | 'success' | 'error';
+type BookmarkCacheStatus = "idle" | "loading" | "success" | "error";
 
 interface BookmarkCacheEntry {
   status: BookmarkCacheStatus;
@@ -28,7 +28,7 @@ interface BookmarkCacheEntry {
 }
 
 const createEntry = (overrides: Partial<BookmarkCacheEntry> = {}): BookmarkCacheEntry => ({
-  status: 'idle',
+  status: "idle",
   bookmarks: null,
   error: null,
   lastFetched: null,
@@ -39,29 +39,29 @@ const resolvePageNumber = (bookmark: PdfBookmarkObject): number | null => {
   const target = bookmark.target;
   if (!target) return null;
 
-  if (target.type === 'destination') {
+  if (target.type === "destination") {
     return target.destination.pageIndex + 1;
   }
 
-  if (target.type === 'action') {
+  if (target.type === "action") {
     const action = target.action;
-    if (
-      action.type === PdfActionType.Goto ||
-      action.type === PdfActionType.RemoteGoto
-    ) {
-      return action.destination?.pageIndex !== undefined
-        ? action.destination.pageIndex + 1
-        : null;
+    if (action.type === PdfActionType.Goto || action.type === PdfActionType.RemoteGoto) {
+      return action.destination?.pageIndex !== undefined ? action.destination.pageIndex + 1 : null;
     }
   }
 
   return null;
 };
 
-export const BookmarkSidebar = ({ visible, thumbnailVisible, documentCacheKey, preloadCacheKeys = [] }: BookmarkSidebarProps) => {
+export const BookmarkSidebar = ({
+  visible,
+  thumbnailVisible,
+  documentCacheKey,
+  preloadCacheKeys = [],
+}: BookmarkSidebarProps) => {
   const { bookmarkActions, scrollActions, hasBookmarkSupport } = useViewer();
   const [expanded, setExpanded] = useState<Record<string, boolean>>({});
-  const [searchTerm, setSearchTerm] = useState('');
+  const [searchTerm, setSearchTerm] = useState("");
   const [bookmarkSupport, setBookmarkSupport] = useState(() => hasBookmarkSupport());
   const [activeEntry, setActiveEntry] = useState<BookmarkCacheEntry>(() => createEntry());
   const cacheRef = useRef<Map<string, BookmarkCacheEntry>>(new Map());
@@ -92,7 +92,7 @@ export const BookmarkSidebar = ({ visible, thumbnailVisible, documentCacheKey, p
   // Reset UI and load cached entry (if any) when switching documents
   useEffect(() => {
     setExpanded({});
-    setSearchTerm('');
+    setSearchTerm("");
 
     if (!documentCacheKey) {
       setActiveEntry(createEntry());
@@ -103,9 +103,9 @@ export const BookmarkSidebar = ({ visible, thumbnailVisible, documentCacheKey, p
     const cached = cacheRef.current.get(documentCacheKey);
     if (cached) {
       setActiveEntry(cached);
-      if (cached.status === 'success') {
+      if (cached.status === "success") {
         bookmarkActions.setLocalBookmarks(cached.bookmarks ?? [], null);
-      } else if (cached.status === 'error') {
+      } else if (cached.status === "error") {
         bookmarkActions.setLocalBookmarks(cached.bookmarks ?? null, cached.error);
       } else {
         bookmarkActions.clearBookmarks();
@@ -122,7 +122,7 @@ export const BookmarkSidebar = ({ visible, thumbnailVisible, documentCacheKey, p
     if (documentCacheKey) {
       allowed.add(documentCacheKey);
     }
-    preloadCacheKeys.forEach(key => {
+    preloadCacheKeys.forEach((key) => {
       if (key) {
         allowed.add(key);
       }
@@ -141,7 +141,7 @@ export const BookmarkSidebar = ({ visible, thumbnailVisible, documentCacheKey, p
 
     const key = documentCacheKey;
     const cached = cacheRef.current.get(key);
-    if (cached && (cached.status === 'loading' || cached.status === 'success')) {
+    if (cached && (cached.status === "loading" || cached.status === "success")) {
       return;
     }
 
@@ -153,11 +153,13 @@ export const BookmarkSidebar = ({ visible, thumbnailVisible, documentCacheKey, p
       }
     };
 
-    updateEntry(createEntry({
-      status: 'loading',
-      bookmarks: cached?.bookmarks ?? null,
-      lastFetched: cached?.lastFetched ?? null,
-    }));
+    updateEntry(
+      createEntry({
+        status: "loading",
+        bookmarks: cached?.bookmarks ?? null,
+        lastFetched: cached?.lastFetched ?? null,
+      }),
+    );
 
     const fetchWithRetry = async () => {
       const maxAttempts = 10;
@@ -166,27 +168,24 @@ export const BookmarkSidebar = ({ visible, thumbnailVisible, documentCacheKey, p
           const result = await bookmarkActions.fetchBookmarks();
           return Array.isArray(result) ? result : [];
         } catch (error: any) {
-          const message = typeof error?.message === 'string' ? error.message.toLowerCase() : '';
-          const notReady =
-            message.includes('document') &&
-            message.includes('not') &&
-            message.includes('open');
+          const message = typeof error?.message === "string" ? error.message.toLowerCase() : "";
+          const notReady = message.includes("document") && message.includes("not") && message.includes("open");
 
           if (!notReady || attempt === maxAttempts - 1) {
             throw error;
           }
 
-          await new Promise(resolve => setTimeout(resolve, 50));
+          await new Promise((resolve) => setTimeout(resolve, 50));
         }
       }
       return [];
     };
 
     fetchWithRetry()
-      .then(bookmarks => {
+      .then((bookmarks) => {
         if (cancelled) return;
         const entry = createEntry({
-          status: 'success',
+          status: "success",
           bookmarks,
           lastFetched: Date.now(),
         });
@@ -195,12 +194,12 @@ export const BookmarkSidebar = ({ visible, thumbnailVisible, documentCacheKey, p
           bookmarkActions.setLocalBookmarks(bookmarks, null);
         }
       })
-      .catch(error => {
+      .catch((error) => {
         if (cancelled) return;
-        const message = error instanceof Error ? error.message : 'Failed to load bookmarks';
+        const message = error instanceof Error ? error.message : "Failed to load bookmarks";
         const fallback = cacheRef.current.get(key);
         const entry = createEntry({
-          status: 'error',
+          status: "error",
           bookmarks: fallback?.bookmarks ?? null,
           error: message,
           lastFetched: fallback?.lastFetched ?? null,
@@ -221,11 +220,11 @@ export const BookmarkSidebar = ({ visible, thumbnailVisible, documentCacheKey, p
     cacheRef.current.delete(documentCacheKey);
     setActiveEntry(createEntry());
     bookmarkActions.clearBookmarks();
-    setFetchNonce(value => value + 1);
+    setFetchNonce((value) => value + 1);
   }, [documentCacheKey, bookmarkActions]);
 
   const bookmarksWithIds = useMemo(() => {
-    const assignIds = (nodes: PdfBookmarkObject[], prefix = 'root'): BookmarkNode[] => {
+    const assignIds = (nodes: PdfBookmarkObject[], prefix = "root"): BookmarkNode[] => {
       if (!Array.isArray(nodes)) {
         return [];
       }
@@ -245,11 +244,11 @@ export const BookmarkSidebar = ({ visible, thumbnailVisible, documentCacheKey, p
   }, [activeEntry.bookmarks]);
 
   const currentStatus = activeEntry.status;
-  const isLocalLoading = bookmarkSupport && currentStatus === 'loading';
-  const currentError = bookmarkSupport && currentStatus === 'error' ? activeEntry.error : null;
+  const isLocalLoading = bookmarkSupport && currentStatus === "loading";
+  const currentError = bookmarkSupport && currentStatus === "error" ? activeEntry.error : null;
 
   const toggleNode = (nodeId: string) => {
-    setExpanded(prev => ({
+    setExpanded((prev) => ({
       ...prev,
       [nodeId]: !(prev[nodeId] ?? true),
     }));
@@ -258,7 +257,7 @@ export const BookmarkSidebar = ({ visible, thumbnailVisible, documentCacheKey, p
   const expandAll = useCallback(() => {
     const allExpanded: Record<string, boolean> = {};
     const expandRecursive = (nodes: BookmarkNode[]) => {
-      nodes.forEach(node => {
+      nodes.forEach((node) => {
         if (node.children && node.children.length > 0) {
           allExpanded[node.id] = true;
           expandRecursive(node.children as BookmarkNode[]);
@@ -272,7 +271,7 @@ export const BookmarkSidebar = ({ visible, thumbnailVisible, documentCacheKey, p
   const collapseAll = useCallback(() => {
     const allCollapsed: Record<string, boolean> = {};
     const collapseRecursive = (nodes: BookmarkNode[]) => {
-      nodes.forEach(node => {
+      nodes.forEach((node) => {
         if (node.children && node.children.length > 0) {
           allCollapsed[node.id] = false;
           collapseRecursive(node.children as BookmarkNode[]);
@@ -285,16 +284,16 @@ export const BookmarkSidebar = ({ visible, thumbnailVisible, documentCacheKey, p
 
   const handleBookmarkClick = (bookmark: PdfBookmarkObject, event: React.MouseEvent) => {
     const target = bookmark.target;
-    if (target?.type === 'action') {
+    if (target?.type === "action") {
       const action = target.action;
       if (action.type === PdfActionType.URI && action.uri) {
         event.preventDefault();
-        window.open(action.uri, '_blank', 'noopener');
+        window.open(action.uri, "_blank", "noopener");
         return;
       }
       if (action.type === PdfActionType.LaunchAppOrOpenFile && action.path) {
         event.preventDefault();
-        window.open(action.path, '_blank', 'noopener');
+        window.open(action.path, "_blank", "noopener");
         return;
       }
     }
@@ -347,20 +346,24 @@ export const BookmarkSidebar = ({ visible, thumbnailVisible, documentCacheKey, p
           key={node.id}
           className="bookmark-item-wrapper"
           style={{
-            marginLeft: depth > 0 ? `${depth * 0.75}rem` : '0',
+            marginLeft: depth > 0 ? `${depth * 0.75}rem` : "0",
           }}
         >
           <div
-            className={`bookmark-item ${pageNumber ? 'bookmark-item--clickable' : ''}`}
+            className={`bookmark-item ${pageNumber ? "bookmark-item--clickable" : ""}`}
             onClick={(event) => handleBookmarkClick(node, event)}
             role={pageNumber ? "button" : undefined}
             tabIndex={pageNumber ? 0 : undefined}
-            onKeyDown={pageNumber ? (event) => {
-              if (event.key === 'Enter' || event.key === ' ') {
-                event.preventDefault();
-                handleBookmarkClick(node, event as any);
-              }
-            } : undefined}
+            onKeyDown={
+              pageNumber
+                ? (event) => {
+                    if (event.key === "Enter" || event.key === " ") {
+                      event.preventDefault();
+                      handleBookmarkClick(node, event as any);
+                    }
+                  }
+                : undefined
+            }
           >
             {hasChildren ? (
               <ActionIcon
@@ -372,22 +375,14 @@ export const BookmarkSidebar = ({ visible, thumbnailVisible, documentCacheKey, p
                   toggleNode(node.id);
                 }}
               >
-                <LocalIcon
-                  icon={isNodeExpanded ? 'keyboard-arrow-up' : 'keyboard-arrow-down'}
-                  width="1rem"
-                  height="1rem"
-                />
+                <LocalIcon icon={isNodeExpanded ? "keyboard-arrow-up" : "keyboard-arrow-down"} width="1rem" height="1rem" />
               </ActionIcon>
             ) : (
               <span className="bookmark-item__dash">-</span>
             )}
             <div className="bookmark-item__content">
-              <Text
-                size="sm"
-                fw={500}
-                className="bookmark-item__title"
-              >
-                {node.title || 'Untitled'}
+              <Text size="sm" fw={500} className="bookmark-item__title">
+                {node.title || "Untitled"}
               </Text>
               {pageNumber && (
                 <Text size="xs" c="dimmed" className="bookmark-item__page">
@@ -397,9 +392,7 @@ export const BookmarkSidebar = ({ visible, thumbnailVisible, documentCacheKey, p
             </div>
           </div>
           {hasChildren && isNodeExpanded && (
-            <div className="bookmark-item__children">
-              {renderBookmarks(node.children as BookmarkNode[], depth + 1)}
-            </div>
+            <div className="bookmark-item__children">{renderBookmarks(node.children as BookmarkNode[], depth + 1)}</div>
           )}
         </div>
       );
@@ -410,18 +403,9 @@ export const BookmarkSidebar = ({ visible, thumbnailVisible, documentCacheKey, p
   const hasBookmarks = bookmarksWithIds.length > 0;
   const showBookmarkList = bookmarkSupport && documentCacheKey && filteredBookmarks.length > 0;
   const showEmptyState =
-    bookmarkSupport &&
-    documentCacheKey &&
-    !isLocalLoading &&
-    !currentError &&
-    currentStatus === 'success' &&
-    !hasBookmarks;
+    bookmarkSupport && documentCacheKey && !isLocalLoading && !currentError && currentStatus === "success" && !hasBookmarks;
   const showSearchEmpty =
-    bookmarkSupport &&
-    documentCacheKey &&
-    isSearchActive &&
-    hasBookmarks &&
-    filteredBookmarks.length === 0;
+    bookmarkSupport && documentCacheKey && isSearchActive && hasBookmarks && filteredBookmarks.length === 0;
   const showNoDocument = bookmarkSupport && !documentCacheKey;
 
   if (!visible) {
@@ -432,7 +416,7 @@ export const BookmarkSidebar = ({ visible, thumbnailVisible, documentCacheKey, p
     <Box
       className="sidebar-base bookmark-sidebar"
       style={{
-        position: 'fixed',
+        position: "fixed",
         right: thumbnailVisible ? SIDEBAR_WIDTH : 0,
         top: 0,
         bottom: 0,
@@ -451,14 +435,8 @@ export const BookmarkSidebar = ({ visible, thumbnailVisible, documentCacheKey, p
         </div>
         {bookmarkSupport && bookmarksWithIds.length > 0 && (
           <>
-            {Object.values(expanded).some(val => val === false) ? (
-              <ActionIcon
-                variant="subtle"
-                size="sm"
-                onClick={expandAll}
-                aria-label="Expand all bookmarks"
-                title="Expand all"
-              >
+            {Object.values(expanded).some((val) => val === false) ? (
+              <ActionIcon variant="subtle" size="sm" onClick={expandAll} aria-label="Expand all bookmarks" title="Expand all">
                 <LocalIcon icon="unfold-more" width="1.1rem" height="1.1rem" />
               </ActionIcon>
             ) : (
@@ -532,11 +510,7 @@ export const BookmarkSidebar = ({ visible, thumbnailVisible, documentCacheKey, p
             </div>
           )}
 
-          {showBookmarkList && (
-            <div className="bookmark-list">
-              {renderBookmarks(filteredBookmarks)}
-            </div>
-          )}
+          {showBookmarkList && <div className="bookmark-list">{renderBookmarks(filteredBookmarks)}</div>}
 
           {showSearchEmpty && (
             <div className="sidebar-base__empty-state">
diff --git a/frontend/src/core/components/viewer/CommentsSidebar.tsx b/frontend/src/core/components/viewer/CommentsSidebar.tsx
index b037c8f157..33a7376b25 100644
--- a/frontend/src/core/components/viewer/CommentsSidebar.tsx
+++ b/frontend/src/core/components/viewer/CommentsSidebar.tsx
@@ -1,27 +1,41 @@
-import { useMemo, useState, useCallback, useEffect, useRef } from 'react';
-import { Box, ScrollArea, Text, Textarea, Stack, ActionIcon, Group, Tooltip, TextInput, Menu, Modal, Button, UnstyledButton } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import DeleteIcon from '@mui/icons-material/Delete';
-import CheckIcon from '@mui/icons-material/CheckRounded';
-import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
-import EditIcon from '@mui/icons-material/Edit';
-import VisibilityIcon from '@mui/icons-material/Visibility';
-import { useAnnotation } from '@embedpdf/plugin-annotation/react';
-import { getSidebarAnnotationsWithRepliesGroupedByPage } from '@embedpdf/plugin-annotation';
-import { PdfAnnotationSubtype, PdfAnnotationReplyType } from '@embedpdf/models';
-import { useCommentAuthor } from '@app/contexts/CommentAuthorContext';
-import { useViewer } from '@app/contexts/ViewerContext';
-import LocalIcon from '@app/components/shared/LocalIcon';
+import { useMemo, useState, useCallback, useEffect, useRef } from "react";
+import {
+  Box,
+  ScrollArea,
+  Text,
+  Textarea,
+  Stack,
+  ActionIcon,
+  Group,
+  Tooltip,
+  TextInput,
+  Menu,
+  Modal,
+  Button,
+  UnstyledButton,
+} from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import DeleteIcon from "@mui/icons-material/Delete";
+import CheckIcon from "@mui/icons-material/CheckRounded";
+import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
+import EditIcon from "@mui/icons-material/Edit";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import { useAnnotation } from "@embedpdf/plugin-annotation/react";
+import { getSidebarAnnotationsWithRepliesGroupedByPage } from "@embedpdf/plugin-annotation";
+import { PdfAnnotationSubtype, PdfAnnotationReplyType } from "@embedpdf/models";
+import { useCommentAuthor } from "@app/contexts/CommentAuthorContext";
+import { useViewer } from "@app/contexts/ViewerContext";
+import LocalIcon from "@app/components/shared/LocalIcon";
 
-const SIDEBAR_WIDTH = '18rem';
+const SIDEBAR_WIDTH = "18rem";
 
 /** Format annotation date for display (e.g. "Mar 11, 6:05 PM"). */
 function formatCommentDate(obj: any): string {
   const raw = obj?.modifiedDate ?? obj?.creationDate ?? obj?.customData?.modifiedDate ?? obj?.M;
-  if (raw == null) return '';
+  if (raw == null) return "";
   const d = raw instanceof Date ? raw : new Date(raw);
-  if (Number.isNaN(d.getTime())) return '';
-  return d.toLocaleString(undefined, { month: 'short', day: 'numeric', hour: 'numeric', minute: '2-digit' });
+  if (Number.isNaN(d.getTime())) return "";
+  return d.toLocaleString(undefined, { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" });
 }
 
 interface CommentsSidebarProps {
@@ -35,75 +49,75 @@ function getCommentDisplayContent(entry: { annotation: { object: any }; replies:
   if (main != null && String(main).trim()) return String(main).trim();
   const firstReply = entry.replies?.[0]?.object?.contents;
   if (firstReply != null && String(firstReply).trim()) return String(firstReply).trim();
-  return '';
+  return "";
 }
 
 /** Placeholder authors we never show; use current user's name from context instead. */
-const PLACEHOLDER_AUTHORS = new Set(['Guest', 'Digital Signature', '']);
+const PLACEHOLDER_AUTHORS = new Set(["Guest", "Digital Signature", ""]);
 
 function getAuthorName(obj: any, currentDisplayName: string): string {
-  const stored = (obj?.author ?? 'Guest').trim() || 'Guest';
-  if (PLACEHOLDER_AUTHORS.has(stored)) return currentDisplayName || 'Guest';
+  const stored = (obj?.author ?? "Guest").trim() || "Guest";
+  if (PLACEHOLDER_AUTHORS.has(stored)) return currentDisplayName || "Guest";
   return stored;
 }
 
 /** Replies store an explicit author; only allow edit when it matches the current comment author name. */
 function isReplyAuthoredByCurrentUser(obj: any, currentDisplayName: string): boolean {
-  const stored = (obj?.author ?? '').trim() || 'Guest';
+  const stored = (obj?.author ?? "").trim() || "Guest";
   // Resolve current user the same way getAuthorName does
-  const resolvedMine = PLACEHOLDER_AUTHORS.has((currentDisplayName ?? '').trim())
-    ? 'Guest'
-    : (currentDisplayName ?? '').trim();
-  const resolvedStored = PLACEHOLDER_AUTHORS.has(stored) ? 'Guest' : stored;
+  const resolvedMine = PLACEHOLDER_AUTHORS.has((currentDisplayName ?? "").trim())
+    ? "Guest"
+    : (currentDisplayName ?? "").trim();
+  const resolvedStored = PLACEHOLDER_AUTHORS.has(stored) ? "Guest" : stored;
   // Both are guest/anonymous → same unauthenticated user, allow editing
-  if (resolvedStored === 'Guest' && resolvedMine === 'Guest') return true;
+  if (resolvedStored === "Guest" && resolvedMine === "Guest") return true;
   if (!resolvedMine) return false;
   return resolvedStored === resolvedMine;
 }
 
 // Map toolId → LocalIcon icon name (matches AnnotationPanel icon definitions)
 const TOOL_ICON_MAP: Record<string, string> = {
-  highlight: 'highlight',
-  underline: 'format-underlined',
-  strikeout: 'strikethrough-s',
-  squiggly: 'show-chart',
-  ink: 'edit',
-  inkHighlighter: 'brush',
-  square: 'crop-square',
-  circle: 'radio-button-unchecked',
-  line: 'show-chart',
-  lineArrow: 'show-chart',
-  polyline: 'show-chart',
-  polygon: 'change-history',
-  text: 'text-fields',
-  note: 'sticky-note-2',
-  stamp: 'add-photo-alternate',
-  textComment: 'comment',
-  insertText: 'add-comment',
-  replaceText: 'find-replace',
+  highlight: "highlight",
+  underline: "format-underlined",
+  strikeout: "strikethrough-s",
+  squiggly: "show-chart",
+  ink: "edit",
+  inkHighlighter: "brush",
+  square: "crop-square",
+  circle: "radio-button-unchecked",
+  line: "show-chart",
+  lineArrow: "show-chart",
+  polyline: "show-chart",
+  polygon: "change-history",
+  text: "text-fields",
+  note: "sticky-note-2",
+  stamp: "add-photo-alternate",
+  textComment: "comment",
+  insertText: "add-comment",
+  replaceText: "find-replace",
 };
 
 // Type-based fallback icon when no toolId is present
 function getIconByType(type: number | undefined): string {
-  if (type === 1) return 'comment';
-  if (type === 3) return 'sticky-note-2';
-  if (type === 4 || type === 8) return 'show-chart';
-  if (type === 5) return 'crop-square';
-  if (type === 6) return 'radio-button-unchecked';
-  if (type === 7 || type === 8) return 'change-history';
-  if (type === 9) return 'highlight';
-  if (type === 10) return 'format-underlined';
-  if (type === 11) return 'show-chart';
-  if (type === 12) return 'strikethrough-s';
-  if (type === 13) return 'add-photo-alternate';
-  if (type === 14) return 'add-comment';
-  if (type === 15) return 'edit';
-  return 'comment';
+  if (type === 1) return "comment";
+  if (type === 3) return "sticky-note-2";
+  if (type === 4 || type === 8) return "show-chart";
+  if (type === 5) return "crop-square";
+  if (type === 6) return "radio-button-unchecked";
+  if (type === 7 || type === 8) return "change-history";
+  if (type === 9) return "highlight";
+  if (type === 10) return "format-underlined";
+  if (type === 11) return "show-chart";
+  if (type === 12) return "strikethrough-s";
+  if (type === 13) return "add-photo-alternate";
+  if (type === 14) return "add-comment";
+  if (type === 15) return "edit";
+  return "comment";
 }
 
 function isCommentAnnotation(ann: any): boolean {
   const toolId = ann?.customData?.toolId ?? ann?.customData?.annotationToolId;
-  if (toolId === 'textComment' || toolId === 'insertText' || toolId === 'replaceText') return true;
+  if (toolId === "textComment" || toolId === "insertText" || toolId === "replaceText") return true;
   // Any annotation explicitly added to comments via the "Add comment" button
   if (ann?.customData?.isComment === true) return true;
   // CARET (type 14) = insertText/replaceText; TEXT (type 1) = textComment
@@ -112,37 +126,37 @@ function isCommentAnnotation(ann: any): boolean {
 }
 
 function getAnnotationToolId(ann: any): string {
-  return ann?.customData?.toolId ?? ann?.customData?.annotationToolId ?? '';
+  return ann?.customData?.toolId ?? ann?.customData?.annotationToolId ?? "";
 }
 
 function getAnnotationTypeLabel(ann: any, t: (key: string, fallback: string) => string): string {
   const toolId = getAnnotationToolId(ann);
   const labels: Record<string, string> = {
-    highlight: t('annotation.highlight', 'Highlight'),
-    underline: t('annotation.underline', 'Underline'),
-    strikeout: t('annotation.strikeout', 'Strikeout'),
-    squiggly: t('annotation.squiggly', 'Squiggly'),
-    ink: t('annotation.pen', 'Pen'),
-    inkHighlighter: t('annotation.freehandHighlighter', 'Freehand Highlighter'),
-    square: t('annotation.square', 'Square'),
-    circle: t('annotation.circle', 'Circle'),
-    line: t('annotation.line', 'Line'),
-    lineArrow: t('annotation.lineArrow', 'Arrow'),
-    polyline: t('annotation.polyline', 'Polyline'),
-    polygon: t('annotation.polygon', 'Polygon'),
-    text: t('annotation.text', 'Text box'),
-    note: t('annotation.note', 'Note'),
-    stamp: t('annotation.stamp', 'Stamp'),
-    textComment: t('viewer.comments.typeComment', 'Comment'),
-    insertText: t('viewer.comments.typeInsertText', 'Insert Text'),
-    replaceText: t('viewer.comments.typeReplaceText', 'Replace Text'),
+    highlight: t("annotation.highlight", "Highlight"),
+    underline: t("annotation.underline", "Underline"),
+    strikeout: t("annotation.strikeout", "Strikeout"),
+    squiggly: t("annotation.squiggly", "Squiggly"),
+    ink: t("annotation.pen", "Pen"),
+    inkHighlighter: t("annotation.freehandHighlighter", "Freehand Highlighter"),
+    square: t("annotation.square", "Square"),
+    circle: t("annotation.circle", "Circle"),
+    line: t("annotation.line", "Line"),
+    lineArrow: t("annotation.lineArrow", "Arrow"),
+    polyline: t("annotation.polyline", "Polyline"),
+    polygon: t("annotation.polygon", "Polygon"),
+    text: t("annotation.text", "Text box"),
+    note: t("annotation.note", "Note"),
+    stamp: t("annotation.stamp", "Stamp"),
+    textComment: t("viewer.comments.typeComment", "Comment"),
+    insertText: t("viewer.comments.typeInsertText", "Insert Text"),
+    replaceText: t("viewer.comments.typeReplaceText", "Replace Text"),
   };
   if (labels[toolId]) return labels[toolId];
   // Type-based fallback (mirrors getIconByType) for annotations without customData.toolId
   const type = ann?.type;
-  if (type === 14) return t('viewer.comments.typeInsertText', 'Insert Text');
-  if (type === 1) return t('viewer.comments.typeComment', 'Comment');
-  return t('viewer.comments.typeComment', 'Comment');
+  if (type === 14) return t("viewer.comments.typeInsertText", "Insert Text");
+  if (type === 1) return t("viewer.comments.typeComment", "Comment");
+  return t("viewer.comments.typeComment", "Comment");
 }
 
 function AnnotationTypeIcon({ ann }: { ann: any }) {
@@ -153,7 +167,7 @@ function AnnotationTypeIcon({ ann }: { ann: any }) {
       icon={iconName}
       width="1.25rem"
       height="1.25rem"
-      style={{ flexShrink: 0, color: 'var(--mantine-color-blue-5)' }}
+      style={{ flexShrink: 0, color: "var(--mantine-color-blue-5)" }}
     />
   );
 }
@@ -185,19 +199,19 @@ export function CommentsSidebar({ documentId, visible, rightOffset }: CommentsSi
       clearHighlightCommentRequest?.();
       return;
     }
-    card.scrollIntoView({ behavior: 'smooth', block: 'center' });
-    if (action === 'highlight') {
-      card.classList.remove('comment-card-flash-highlight');
+    card.scrollIntoView({ behavior: "smooth", block: "center" });
+    if (action === "highlight") {
+      card.classList.remove("comment-card-flash-highlight");
       void card.offsetWidth;
-      card.classList.add('comment-card-flash-highlight');
+      card.classList.add("comment-card-flash-highlight");
       const tId = window.setTimeout(() => {
-        card.classList.remove('comment-card-flash-highlight');
+        card.classList.remove("comment-card-flash-highlight");
         clearHighlightCommentRequest?.();
       }, 1500);
       return () => window.clearTimeout(tId);
     }
     // action === 'focus': focus the first textarea or reply input in the card
-    const input = card.querySelector<HTMLTextAreaElement | HTMLInputElement>('textarea, input');
+    const input = card.querySelector<HTMLTextAreaElement | HTMLInputElement>("textarea, input");
     if (input) {
       requestAnimationFrame(() => {
         input.focus();
@@ -206,16 +220,17 @@ export function CommentsSidebar({ documentId, visible, rightOffset }: CommentsSi
     clearHighlightCommentRequest?.();
   }, [visible, highlightCommentRequest, documentId, clearHighlightCommentRequest]);
 
-  const handleLocateAnnotation = useCallback((pageIndex: number, ann: any) => {
-    scrollActions?.scrollToPage(pageIndex + 1, 'smooth');
-    setTimeout(() => {
-      const pageEl = document.querySelector<HTMLElement>(`[data-page-index="${pageIndex}"]`);
-      if (!pageEl || !ann?.rect) return;
-      const zoom = getZoomState?.()?.currentZoom ?? 1;
-      const { origin, size } = ann.rect as { origin: { x: number; y: number }; size: { width: number; height: number } };
-      const flashEl = document.createElement('div');
-      // Append to page element so it scrolls with the page (position: absolute relative to page)
-      flashEl.style.cssText = `
+  const handleLocateAnnotation = useCallback(
+    (pageIndex: number, ann: any) => {
+      scrollActions?.scrollToPage(pageIndex + 1, "smooth");
+      setTimeout(() => {
+        const pageEl = document.querySelector<HTMLElement>(`[data-page-index="${pageIndex}"]`);
+        if (!pageEl || !ann?.rect) return;
+        const zoom = getZoomState?.()?.currentZoom ?? 1;
+        const { origin, size } = ann.rect as { origin: { x: number; y: number }; size: { width: number; height: number } };
+        const flashEl = document.createElement("div");
+        // Append to page element so it scrolls with the page (position: absolute relative to page)
+        flashEl.style.cssText = `
         position: absolute;
         left: ${origin.x * zoom}px;
         top: ${origin.y * zoom}px;
@@ -228,30 +243,30 @@ export function CommentsSidebar({ documentId, visible, rightOffset }: CommentsSi
         z-index: 9998;
         animation: annotation-locate-flash 1.6s ease-out forwards;
       `;
-      if (!document.getElementById('annotation-locate-flash-style')) {
-        const style = document.createElement('style');
-        style.id = 'annotation-locate-flash-style';
-        style.textContent = `@keyframes annotation-locate-flash {
+        if (!document.getElementById("annotation-locate-flash-style")) {
+          const style = document.createElement("style");
+          style.id = "annotation-locate-flash-style";
+          style.textContent = `@keyframes annotation-locate-flash {
           0%   { opacity: 0; transform: scale(1.08); }
           15%  { opacity: 1; transform: scale(1); }
           70%  { opacity: 1; }
           100% { opacity: 0; }
         }`;
-        document.head.appendChild(style);
-      }
-      pageEl.appendChild(flashEl);
-      setTimeout(() => flashEl.remove(), 1700);
-    }, 550);
-  }, [scrollActions, getZoomState]);
+          document.head.appendChild(style);
+        }
+        pageEl.appendChild(flashEl);
+        setTimeout(() => flashEl.remove(), 1700);
+      }, 550);
+    },
+    [scrollActions, getZoomState],
+  );
 
   const byPage = useMemo(() => {
     try {
       const all = getSidebarAnnotationsWithRepliesGroupedByPage(state) ?? {};
       const filtered: typeof all = {};
       for (const [page, entries] of Object.entries(all)) {
-        const commentEntries = (entries as typeof entries).filter(
-          (e) => isCommentAnnotation((e as any).annotation?.object)
-        );
+        const commentEntries = (entries as typeof entries).filter((e) => isCommentAnnotation((e as any).annotation?.object));
         if (commentEntries.length > 0) {
           filtered[Number(page)] = commentEntries;
         }
@@ -277,24 +292,31 @@ export function CommentsSidebar({ documentId, visible, rightOffset }: CommentsSi
     return ids;
   }, [state]);
 
-  const pageNumbers = useMemo(() => Object.keys(byPage).map(Number).sort((a, b) => a - b), [byPage]);
+  const pageNumbers = useMemo(
+    () =>
+      Object.keys(byPage)
+        .map(Number)
+        .sort((a, b) => a - b),
+    [byPage],
+  );
   const totalCount = useMemo(() => pageNumbers.reduce((sum, p) => sum + (byPage[p]?.length ?? 0), 0), [pageNumbers, byPage]);
 
   const handleContentsChange = useCallback(
     (pageIndex: number, annotationId: string, value: string) => {
-      setDraftContents((prev) => ({ ...prev, [pageIndex + '_' + annotationId]: value }));
+      setDraftContents((prev) => ({ ...prev, [pageIndex + "_" + annotationId]: value }));
       if (!provides?.updateAnnotation) return;
       provides.updateAnnotation(pageIndex, annotationId, { contents: value });
     },
-    [provides]
+    [provides],
   );
 
   const [deleteModal, setDeleteModal] = useState<{ pageIndex: number; id: string; ann: any } | null>(null);
 
   const isLinkedAnnotation = (ann: any) => {
     const toolId = ann?.customData?.toolId ?? ann?.customData?.annotationToolId;
-    return ann?.customData?.isComment === true &&
-      toolId !== 'textComment' && toolId !== 'insertText' && toolId !== 'replaceText';
+    return (
+      ann?.customData?.isComment === true && toolId !== "textComment" && toolId !== "insertText" && toolId !== "replaceText"
+    );
   };
 
   const handleDeleteClick = useCallback(
@@ -305,7 +327,7 @@ export function CommentsSidebar({ documentId, visible, rightOffset }: CommentsSi
         provides?.deleteAnnotation?.(pageIndex, annotationId);
       }
     },
-    [provides]
+    [provides],
   );
 
   const handleRemoveFromSidebar = useCallback(() => {
@@ -328,9 +350,9 @@ export function CommentsSidebar({ documentId, visible, rightOffset }: CommentsSi
       const trimmed = value.trim();
       if (!trimmed || !provides?.updateAnnotation) return;
       provides.updateAnnotation(pageIndex, annotationId, { contents: trimmed, author: displayName });
-      setDraftContents((prev) => ({ ...prev, [pageIndex + '_' + annotationId]: trimmed }));
+      setDraftContents((prev) => ({ ...prev, [pageIndex + "_" + annotationId]: trimmed }));
     },
-    [provides, displayName]
+    [provides, displayName],
   );
 
   const handleSendReply = useCallback(
@@ -349,9 +371,9 @@ export function CommentsSidebar({ documentId, visible, rightOffset }: CommentsSi
         replyType: PdfAnnotationReplyType.Reply,
         author: displayName,
       } as any);
-      setReplyDrafts((prev) => ({ ...prev, [key]: '' }));
+      setReplyDrafts((prev) => ({ ...prev, [key]: "" }));
     },
-    [provides, replyDrafts, displayName]
+    [provides, replyDrafts, displayName],
   );
 
   const handleSaveReplyEdit = useCallback(
@@ -366,7 +388,7 @@ export function CommentsSidebar({ documentId, visible, rightOffset }: CommentsSi
       });
       setEditingReplyKey(null);
     },
-    [provides, displayName]
+    [provides, displayName],
   );
 
   if (!visible) return null;
@@ -375,38 +397,46 @@ export function CommentsSidebar({ documentId, visible, rightOffset }: CommentsSi
     <Box
       ref={scrollViewportRef}
       style={{
-        position: 'fixed',
+        position: "fixed",
         right: rightOffset,
         top: 0,
         bottom: 0,
         width: SIDEBAR_WIDTH,
-        backgroundColor: 'var(--right-rail-bg)',
-        borderLeft: '1px solid var(--border-subtle)',
+        backgroundColor: "var(--right-rail-bg)",
+        borderLeft: "1px solid var(--border-subtle)",
         zIndex: 998,
-        display: 'flex',
-        flexDirection: 'column',
-        boxShadow: '-2px 0 8px rgba(0, 0, 0, 0.1)',
+        display: "flex",
+        flexDirection: "column",
+        boxShadow: "-2px 0 8px rgba(0, 0, 0, 0.1)",
       }}
     >
       <div
         style={{
-          padding: '0.75rem 1rem',
-          borderBottom: '1px solid var(--border-subtle)',
-          display: 'flex',
-          alignItems: 'center',
-          gap: '0.5rem',
+          padding: "0.75rem 1rem",
+          borderBottom: "1px solid var(--border-subtle)",
+          display: "flex",
+          alignItems: "center",
+          gap: "0.5rem",
         }}
       >
-        <LocalIcon icon="comment" width="1.25rem" height="1.25rem" style={{ color: 'var(--mantine-color-dimmed)', flexShrink: 0 }} />
+        <LocalIcon
+          icon="comment"
+          width="1.25rem"
+          height="1.25rem"
+          style={{ color: "var(--mantine-color-dimmed)", flexShrink: 0 }}
+        />
         <Text fw={600} size="sm" tt="uppercase" lts={0.5}>
-          {t('viewer.comments.title', 'Comments')}
+          {t("viewer.comments.title", "Comments")}
         </Text>
       </div>
       <ScrollArea style={{ flex: 1 }}>
         <Stack p="sm" gap="md">
           {totalCount === 0 ? (
             <Text size="sm" c="dimmed">
-              {t('viewer.comments.hint', 'Place comments with the Comment, Insert Text, or Replace Text tools. They will appear here by page.')}
+              {t(
+                "viewer.comments.hint",
+                "Place comments with the Comment, Insert Text, or Replace Text tools. They will appear here by page.",
+              )}
             </Text>
           ) : (
             pageNumbers.map((pageIndex) => {
@@ -415,17 +445,17 @@ export function CommentsSidebar({ documentId, visible, rightOffset }: CommentsSi
               return (
                 <Box key={pageIndex} mb="md">
                   <Text size="sm" fw={700} mb={2}>
-                    {t('viewer.comments.pageLabel', 'Page {{page}}', { page: pageNum })}
+                    {t("viewer.comments.pageLabel", "Page {{page}}", { page: pageNum })}
                   </Text>
                   <Text size="xs" c="dimmed" mb="sm">
                     {entries.length === 1
-                      ? t('viewer.comments.oneComment', '1 comment')
-                      : t('viewer.comments.nComments', '{{count}} comments', { count: entries.length })}
+                      ? t("viewer.comments.oneComment", "1 comment")
+                      : t("viewer.comments.nComments", "{{count}} comments", { count: entries.length })}
                   </Text>
                   <Box
                     mb="xs"
                     style={{
-                      borderBottom: '1px solid var(--border-subtle)',
+                      borderBottom: "1px solid var(--border-subtle)",
                     }}
                   />
                   <Stack gap="sm">
@@ -437,10 +467,10 @@ export function CommentsSidebar({ documentId, visible, rightOffset }: CommentsSi
                       const replyKey = `${pageIndex}_${id}_reply`;
                       const displayContent = getCommentDisplayContent(entry);
                       const draft = draftContents[key] !== undefined ? draftContents[key] : displayContent;
-                      const replyDraft = replyDrafts[replyKey] ?? '';
+                      const replyDraft = replyDrafts[replyKey] ?? "";
                       const authorName = getAuthorName(ann, displayName);
                       /** Only treat as "comment posted" when annotation actually has content (user clicked Send), not on every keystroke. */
-                      const hasMainContent = (displayContent ?? '').trim().length > 0;
+                      const hasMainContent = (displayContent ?? "").trim().length > 0;
                       const isEditingMain = editingMainKey === key;
 
                       const mainTimestamp = formatCommentDate(ann);
@@ -453,10 +483,10 @@ export function CommentsSidebar({ documentId, visible, rightOffset }: CommentsSi
                           p="sm"
                           style={{
                             border: selectedAnnotationIds.has(id)
-                              ? '1px solid var(--mantine-color-blue-3)'
-                              : '1px solid var(--border-subtle)',
+                              ? "1px solid var(--mantine-color-blue-3)"
+                              : "1px solid var(--border-subtle)",
                             borderRadius: 8,
-                            backgroundColor: 'var(--bg-raised)',
+                            backgroundColor: "var(--bg-raised)",
                           }}
                         >
                           <Group wrap="nowrap" gap="xs" justify="space-between" align="flex-start" mb="xs">
@@ -467,12 +497,13 @@ export function CommentsSidebar({ documentId, visible, rightOffset }: CommentsSi
                                   {authorName}
                                 </Text>
                                 <Text size="xs" c="dimmed">
-                                  {typeLabel}{mainTimestamp ? ` · ${mainTimestamp}` : ''}
+                                  {typeLabel}
+                                  {mainTimestamp ? ` · ${mainTimestamp}` : ""}
                                 </Text>
                               </Box>
                             </Group>
                             <Group gap={2} wrap="nowrap" style={{ flexShrink: 0 }}>
-                              <Tooltip label={t('viewer.comments.locateAnnotation', 'Locate in document')}>
+                              <Tooltip label={t("viewer.comments.locateAnnotation", "Locate in document")}>
                                 <ActionIcon
                                   variant="subtle"
                                   size="sm"
@@ -483,28 +514,28 @@ export function CommentsSidebar({ documentId, visible, rightOffset }: CommentsSi
                                 </ActionIcon>
                               </Tooltip>
                               <Menu position="bottom-end" withArrow>
-                              <Menu.Target>
-                                <Tooltip label={t('viewer.comments.moreActions', 'More actions')}>
-                                  <ActionIcon variant="subtle" size="sm" color="gray">
-                                    <MoreHorizIcon style={{ fontSize: 20 }} />
-                                  </ActionIcon>
-                                </Tooltip>
-                              </Menu.Target>
-                              <Menu.Dropdown>
-                                <Menu.Item
-                                  leftSection={<EditIcon style={{ fontSize: 18 }} />}
-                                  onClick={() => setEditingMainKey(key)}
-                                >
-                                  {t('annotation.editText', 'Edit')}
-                                </Menu.Item>
-                                <Menu.Item
-                                  leftSection={<DeleteIcon style={{ fontSize: 18 }} />}
-                                  color="red"
-                                  onClick={() => handleDeleteClick(pageIndex, id, ann)}
-                                >
-                                  {t('annotation.delete', 'Delete')}
-                                </Menu.Item>
-                              </Menu.Dropdown>
+                                <Menu.Target>
+                                  <Tooltip label={t("viewer.comments.moreActions", "More actions")}>
+                                    <ActionIcon variant="subtle" size="sm" color="gray">
+                                      <MoreHorizIcon style={{ fontSize: 20 }} />
+                                    </ActionIcon>
+                                  </Tooltip>
+                                </Menu.Target>
+                                <Menu.Dropdown>
+                                  <Menu.Item
+                                    leftSection={<EditIcon style={{ fontSize: 18 }} />}
+                                    onClick={() => setEditingMainKey(key)}
+                                  >
+                                    {t("annotation.editText", "Edit")}
+                                  </Menu.Item>
+                                  <Menu.Item
+                                    leftSection={<DeleteIcon style={{ fontSize: 18 }} />}
+                                    color="red"
+                                    onClick={() => handleDeleteClick(pageIndex, id, ann)}
+                                  >
+                                    {t("annotation.delete", "Delete")}
+                                  </Menu.Item>
+                                </Menu.Dropdown>
                               </Menu>
                             </Group>
                           </Group>
@@ -512,40 +543,40 @@ export function CommentsSidebar({ documentId, visible, rightOffset }: CommentsSi
                           {!hasMainContent || isEditingMain ? (
                             <>
                               <Textarea
-                                placeholder={t('viewer.comments.addCommentPlaceholder', 'Add comment...')}
+                                placeholder={t("viewer.comments.addCommentPlaceholder", "Add comment...")}
                                 minRows={2}
                                 autosize
-                                value={draft ?? ''}
+                                value={draft ?? ""}
                                 onChange={(e) => {
-                                  const v = (e?.currentTarget ?? e?.target)?.value ?? '';
+                                  const v = (e?.currentTarget ?? e?.target)?.value ?? "";
                                   setDraftContents((prev) => ({ ...prev, [key]: v }));
                                   if (isEditingMain) {
                                     handleContentsChange(pageIndex, id, v);
                                   }
                                 }}
-                                styles={{ root: { width: '100%' } }}
+                                styles={{ root: { width: "100%" } }}
                                 mb="xs"
                               />
                               <Group gap={4} wrap="nowrap" justify="flex-end">
-                                <Tooltip label={t('viewer.comments.addComment', 'Add comment')}>
+                                <Tooltip label={t("viewer.comments.addComment", "Add comment")}>
                                   <ActionIcon
                                     variant="filled"
                                     size="sm"
                                     color="blue"
                                     onClick={() => {
-                                      handleSendMainComment(pageIndex, id, draft ?? '');
+                                      handleSendMainComment(pageIndex, id, draft ?? "");
                                       setEditingMainKey(null);
                                     }}
-                                    disabled={!(draft ?? '').trim()}
+                                    disabled={!(draft ?? "").trim()}
                                   >
-                                    <CheckIcon style={{ fontSize: 18, color: 'white' }} />
+                                    <CheckIcon style={{ fontSize: 18, color: "white" }} />
                                   </ActionIcon>
                                 </Tooltip>
                               </Group>
                             </>
                           ) : (
                             <>
-                              <Text size="sm" mb="sm" style={{ whiteSpace: 'pre-wrap' }}>
+                              <Text size="sm" mb="sm" style={{ whiteSpace: "pre-wrap" }}>
                                 {displayContent}
                               </Text>
 
@@ -563,9 +594,9 @@ export function CommentsSidebar({ documentId, visible, rightOffset }: CommentsSi
                                     const replyBody =
                                       replyEditDrafts[replyEditKey] !== undefined
                                         ? replyEditDrafts[replyEditKey]
-                                        : (rObj?.contents ?? '');
+                                        : (rObj?.contents ?? "");
                                     return (
-                                      <Box key={rId} pl="xs" style={{ borderLeft: '2px solid var(--mantine-color-blue-3)' }}>
+                                      <Box key={rId} pl="xs" style={{ borderLeft: "2px solid var(--mantine-color-blue-3)" }}>
                                         <Box style={{ minWidth: 0 }}>
                                           <Group wrap="nowrap" justify="space-between" align="flex-start" gap={4} mb={2}>
                                             <Text size="sm" fw={600}>
@@ -578,12 +609,12 @@ export function CommentsSidebar({ documentId, visible, rightOffset }: CommentsSi
                                                   onClick={() => {
                                                     setEditingReplyKey(replyEditKey);
                                                     setReplyEditDrafts(() => ({
-                                                      [replyEditKey]: String(rObj?.contents ?? ''),
+                                                      [replyEditKey]: String(rObj?.contents ?? ""),
                                                     }));
                                                   }}
                                                 >
                                                   <Text size="xs" c="blue">
-                                                    {t('annotation.editText', 'Edit')}
+                                                    {t("annotation.editText", "Edit")}
                                                   </Text>
                                                 </UnstyledButton>
                                               ) : null}
@@ -601,14 +632,14 @@ export function CommentsSidebar({ documentId, visible, rightOffset }: CommentsSi
                                                 autosize
                                                 value={replyBody}
                                                 onChange={(e) => {
-                                                  const v = (e?.currentTarget ?? e?.target)?.value ?? '';
+                                                  const v = (e?.currentTarget ?? e?.target)?.value ?? "";
                                                   setReplyEditDrafts((p) => ({ ...p, [replyEditKey]: v }));
                                                 }}
-                                                styles={{ root: { width: '100%' } }}
+                                                styles={{ root: { width: "100%" } }}
                                                 mb="xs"
                                               />
                                               <Group gap={4} wrap="nowrap" justify="flex-end">
-                                                <Tooltip label={t('viewer.comments.saveReply', 'Save reply')}>
+                                                <Tooltip label={t("viewer.comments.saveReply", "Save reply")}>
                                                   <ActionIcon
                                                     variant="filled"
                                                     size="sm"
@@ -618,14 +649,14 @@ export function CommentsSidebar({ documentId, visible, rightOffset }: CommentsSi
                                                     }
                                                     disabled={!replyBody.trim()}
                                                   >
-                                                    <CheckIcon style={{ fontSize: 18, color: 'white' }} />
+                                                    <CheckIcon style={{ fontSize: 18, color: "white" }} />
                                                   </ActionIcon>
                                                 </Tooltip>
                                               </Group>
                                             </>
                                           ) : (
-                                            <Text size="sm" style={{ whiteSpace: 'pre-wrap' }}>
-                                              {rObj?.contents ?? ''}
+                                            <Text size="sm" style={{ whiteSpace: "pre-wrap" }}>
+                                              {rObj?.contents ?? ""}
                                             </Text>
                                           )}
                                         </Box>
@@ -637,30 +668,30 @@ export function CommentsSidebar({ documentId, visible, rightOffset }: CommentsSi
 
                               <Group gap="xs" wrap="nowrap" align="flex-end">
                                 <TextInput
-                                  placeholder={t('viewer.comments.addReplyPlaceholder', 'Add reply...')}
+                                  placeholder={t("viewer.comments.addReplyPlaceholder", "Add reply...")}
                                   size="xs"
                                   value={replyDraft}
                                   onChange={(e) => {
-                                    const v = (e?.currentTarget ?? e?.target)?.value ?? '';
+                                    const v = (e?.currentTarget ?? e?.target)?.value ?? "";
                                     setReplyDrafts((p) => ({ ...p, [replyKey]: v }));
                                   }}
                                   style={{ flex: 1, minWidth: 0 }}
                                   styles={{
                                     input: {
-                                      borderColor: 'var(--mantine-color-blue-3)',
+                                      borderColor: "var(--mantine-color-blue-3)",
                                     },
                                   }}
                                 />
-                                <Tooltip label={t('viewer.comments.addComment', 'Add comment')}>
+                                <Tooltip label={t("viewer.comments.addComment", "Add comment")}>
                                   <ActionIcon
                                     variant="filled"
                                     size="md"
                                     color="blue"
-                                    style={{ backgroundColor: 'var(--mantine-color-blue-6)' }}
+                                    style={{ backgroundColor: "var(--mantine-color-blue-6)" }}
                                     onClick={() => handleSendReply(pageIndex, id, ann?.rect)}
                                     disabled={!replyDraft.trim()}
                                   >
-                                    <CheckIcon style={{ fontSize: 20, color: 'white' }} />
+                                    <CheckIcon style={{ fontSize: 20, color: "white" }} />
                                   </ActionIcon>
                                 </Tooltip>
                               </Group>
@@ -680,22 +711,22 @@ export function CommentsSidebar({ documentId, visible, rightOffset }: CommentsSi
       <Modal
         opened={!!deleteModal}
         onClose={() => setDeleteModal(null)}
-        title={t('viewer.comments.deleteTitle', 'Remove annotation from comments?')}
+        title={t("viewer.comments.deleteTitle", "Remove annotation from comments?")}
         centered
         size="sm"
       >
         <Text size="sm" c="dimmed" mb="lg">
           {t(
-            'viewer.comments.deleteDescription',
-            'This annotation has a comment attached. You can remove just the comment from the sidebar while keeping the annotation, or delete everything.'
+            "viewer.comments.deleteDescription",
+            "This annotation has a comment attached. You can remove just the comment from the sidebar while keeping the annotation, or delete everything.",
           )}
         </Text>
         <Group justify="flex-end" gap="sm">
           <Button variant="default" onClick={handleRemoveFromSidebar}>
-            {t('viewer.comments.removeCommentOnly', 'Remove comment only')}
+            {t("viewer.comments.removeCommentOnly", "Remove comment only")}
           </Button>
           <Button color="red" onClick={handleDeleteAnnotation}>
-            {t('viewer.comments.deleteAnnotationAndComment', 'Delete annotation & comment')}
+            {t("viewer.comments.deleteAnnotationAndComment", "Delete annotation & comment")}
           </Button>
         </Group>
       </Modal>
diff --git a/frontend/src/core/components/viewer/CustomSearchLayer.tsx b/frontend/src/core/components/viewer/CustomSearchLayer.tsx
index 7320e1bdb4..5038475e04 100644
--- a/frontend/src/core/components/viewer/CustomSearchLayer.tsx
+++ b/frontend/src/core/components/viewer/CustomSearchLayer.tsx
@@ -1,7 +1,7 @@
-import { useState, useEffect, useMemo } from 'react';
-import { useDocumentState } from '@embedpdf/core/react';
-import { useSearch } from '@embedpdf/plugin-search/react';
-import { SEARCH_CONSTANTS } from '@app/components/viewer/constants/search';
+import { useState, useEffect, useMemo } from "react";
+import { useDocumentState } from "@embedpdf/core/react";
+import { useSearch } from "@embedpdf/plugin-search/react";
+import { SEARCH_CONSTANTS } from "@app/components/viewer/constants/search";
 
 interface SearchLayerProps {
   documentId?: string;
@@ -26,14 +26,14 @@ interface SearchResultState {
 }
 
 export function CustomSearchLayer({
-  documentId = '',
+  documentId = "",
   pageIndex,
   scale: scaleProp,
   highlightColor = SEARCH_CONSTANTS.HIGHLIGHT_COLORS.BACKGROUND,
   activeHighlightColor = SEARCH_CONSTANTS.HIGHLIGHT_COLORS.ACTIVE_BACKGROUND,
   opacity = SEARCH_CONSTANTS.HIGHLIGHT_COLORS.OPACITY,
   padding = SEARCH_CONSTANTS.UI.HIGHLIGHT_PADDING,
-  borderRadius = 4
+  borderRadius = 4,
 }: SearchLayerProps) {
   const { provides: searchProvides } = useSearch(documentId);
   const documentState = useDocumentState(documentId);
@@ -55,7 +55,6 @@ export function CustomSearchLayer({
       setSearchResultState(state);
     });
 
-
     return unsubscribe;
   }, [searchProvides, pageIndex]);
 
@@ -77,38 +76,40 @@ export function CustomSearchLayer({
   }
 
   return (
-    <div style={{
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      width: '100%',
-      height: '100%',
-      pointerEvents: 'none',
-      zIndex: 10
-    }}>
+    <div
+      style={{
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        pointerEvents: "none",
+        zIndex: 10,
+      }}
+    >
       {pageResults.map(({ result, originalIndex }, idx) => (
         <div key={`result-${idx}`}>
           {result.rects.map((rect, rectIdx) => (
             <div
               key={`rect-${idx}-${rectIdx}`}
               style={{
-                position: 'absolute',
+                position: "absolute",
                 top: `${rect.origin.y * scale - padding}px`,
                 left: `${rect.origin.x * scale - padding}px`,
-                width: `${rect.size.width * scale + (padding * 2)}px`,
-                height: `${rect.size.height * scale + (padding * 2)}px`,
-                backgroundColor: originalIndex === searchResultState?.activeResultIndex
-                  ? activeHighlightColor
-                  : highlightColor,
+                width: `${rect.size.width * scale + padding * 2}px`,
+                height: `${rect.size.height * scale + padding * 2}px`,
+                backgroundColor:
+                  originalIndex === searchResultState?.activeResultIndex ? activeHighlightColor : highlightColor,
                 opacity: opacity,
                 borderRadius: `${borderRadius}px`,
-                transform: 'scale(1.02)',
-                transformOrigin: 'center',
-                transition: 'opacity 0.2s ease-in-out, background-color 0.2s ease-in-out',
-                pointerEvents: 'none',
-                boxShadow: originalIndex === searchResultState?.activeResultIndex
-                  ? `0 0 0 1px ${SEARCH_CONSTANTS.HIGHLIGHT_COLORS.ACTIVE_BACKGROUND}80`
-                  : 'none'
+                transform: "scale(1.02)",
+                transformOrigin: "center",
+                transition: "opacity 0.2s ease-in-out, background-color 0.2s ease-in-out",
+                pointerEvents: "none",
+                boxShadow:
+                  originalIndex === searchResultState?.activeResultIndex
+                    ? `0 0 0 1px ${SEARCH_CONSTANTS.HIGHLIGHT_COLORS.ACTIVE_BACKGROUND}80`
+                    : "none",
               }}
             />
           ))}
diff --git a/frontend/src/core/components/viewer/DocumentPermissionsAPIBridge.tsx b/frontend/src/core/components/viewer/DocumentPermissionsAPIBridge.tsx
index c16b37b432..3c6a495e3a 100644
--- a/frontend/src/core/components/viewer/DocumentPermissionsAPIBridge.tsx
+++ b/frontend/src/core/components/viewer/DocumentPermissionsAPIBridge.tsx
@@ -1,11 +1,11 @@
-import { useEffect, useMemo } from 'react';
-import { useViewer } from '@app/contexts/ViewerContext';
-import { useDocumentReady } from '@app/components/viewer/hooks/useDocumentReady';
+import { useEffect, useMemo } from "react";
+import { useViewer } from "@app/contexts/ViewerContext";
+import { useDocumentReady } from "@app/components/viewer/hooks/useDocumentReady";
 import {
   PdfPermissionFlag,
   DocumentPermissionsState,
   DocumentPermissionsAPIWrapper,
-} from '@app/contexts/viewer/viewerBridges';
+} from "@app/contexts/viewer/viewerBridges";
 
 function hasPermissionFlag(permissions: number, flag: PdfPermissionFlag): boolean {
   if (permissions === 0 || permissions === PdfPermissionFlag.AllowAll) {
@@ -28,40 +28,45 @@ export function DocumentPermissionsAPIBridge({
   const { registerBridge } = useViewer();
   const documentReady = useDocumentReady();
 
-  const state = useMemo<DocumentPermissionsState>(() => ({
-    isEncrypted,
-    isOwnerUnlocked,
-    permissions,
-    canPrint: hasPermissionFlag(permissions, PdfPermissionFlag.Print),
-    canModifyContents: hasPermissionFlag(permissions, PdfPermissionFlag.ModifyContents),
-    canCopyContents: hasPermissionFlag(permissions, PdfPermissionFlag.CopyContents),
-    canModifyAnnotations: hasPermissionFlag(permissions, PdfPermissionFlag.ModifyAnnotations),
-    canFillForms: hasPermissionFlag(permissions, PdfPermissionFlag.FillForms),
-    canExtractForAccessibility: hasPermissionFlag(permissions, PdfPermissionFlag.ExtractForAccessibility),
-    canAssembleDocument: hasPermissionFlag(permissions, PdfPermissionFlag.AssembleDocument),
-    canPrintHighQuality: hasPermissionFlag(permissions, PdfPermissionFlag.PrintHighQuality),
-  }), [isEncrypted, isOwnerUnlocked, permissions]);
+  const state = useMemo<DocumentPermissionsState>(
+    () => ({
+      isEncrypted,
+      isOwnerUnlocked,
+      permissions,
+      canPrint: hasPermissionFlag(permissions, PdfPermissionFlag.Print),
+      canModifyContents: hasPermissionFlag(permissions, PdfPermissionFlag.ModifyContents),
+      canCopyContents: hasPermissionFlag(permissions, PdfPermissionFlag.CopyContents),
+      canModifyAnnotations: hasPermissionFlag(permissions, PdfPermissionFlag.ModifyAnnotations),
+      canFillForms: hasPermissionFlag(permissions, PdfPermissionFlag.FillForms),
+      canExtractForAccessibility: hasPermissionFlag(permissions, PdfPermissionFlag.ExtractForAccessibility),
+      canAssembleDocument: hasPermissionFlag(permissions, PdfPermissionFlag.AssembleDocument),
+      canPrintHighQuality: hasPermissionFlag(permissions, PdfPermissionFlag.PrintHighQuality),
+    }),
+    [isEncrypted, isOwnerUnlocked, permissions],
+  );
 
-  const api = useMemo<DocumentPermissionsAPIWrapper>(() => ({
-    hasPermission: (flag: PdfPermissionFlag) => hasPermissionFlag(permissions, flag),
-    hasAllPermissions: (flags: PdfPermissionFlag[]) =>
-      flags.every(flag => hasPermissionFlag(permissions, flag)),
-    getEffectivePermission: (flag: PdfPermissionFlag) => {
-      if (isOwnerUnlocked) return true;
-      return hasPermissionFlag(permissions, flag);
-    },
-  }), [permissions, isOwnerUnlocked]);
+  const api = useMemo<DocumentPermissionsAPIWrapper>(
+    () => ({
+      hasPermission: (flag: PdfPermissionFlag) => hasPermissionFlag(permissions, flag),
+      hasAllPermissions: (flags: PdfPermissionFlag[]) => flags.every((flag) => hasPermissionFlag(permissions, flag)),
+      getEffectivePermission: (flag: PdfPermissionFlag) => {
+        if (isOwnerUnlocked) return true;
+        return hasPermissionFlag(permissions, flag);
+      },
+    }),
+    [permissions, isOwnerUnlocked],
+  );
 
   useEffect(() => {
     if (documentReady) {
-      registerBridge('permissions', {
+      registerBridge("permissions", {
         state,
         api,
       });
     }
 
     return () => {
-      registerBridge('permissions', null);
+      registerBridge("permissions", null);
     };
   }, [registerBridge, state, api, documentReady]);
 
diff --git a/frontend/src/core/components/viewer/DocumentReadyWrapper.tsx b/frontend/src/core/components/viewer/DocumentReadyWrapper.tsx
index 879ba9288b..59e4b59b37 100644
--- a/frontend/src/core/components/viewer/DocumentReadyWrapper.tsx
+++ b/frontend/src/core/components/viewer/DocumentReadyWrapper.tsx
@@ -1,5 +1,5 @@
-import React, { useState, useEffect } from 'react';
-import { useDocumentManagerPlugin } from '@embedpdf/plugin-document-manager/react';
+import React, { useState, useEffect } from "react";
+import { useDocumentManagerPlugin } from "@embedpdf/plugin-document-manager/react";
 
 interface DocumentReadyWrapperProps {
   children: (documentId: string) => React.ReactNode;
@@ -38,7 +38,7 @@ export function DocumentReadyWrapper({ children, fallback = null }: DocumentRead
       });
 
       return () => {
-        if (typeof unsubscribe === 'function') {
+        if (typeof unsubscribe === "function") {
           unsubscribe();
         }
       };
diff --git a/frontend/src/core/components/viewer/EmbedPdfViewer.tsx b/frontend/src/core/components/viewer/EmbedPdfViewer.tsx
index 6aa1eebd7c..7d40b2b4d7 100644
--- a/frontend/src/core/components/viewer/EmbedPdfViewer.tsx
+++ b/frontend/src/core/components/viewer/EmbedPdfViewer.tsx
@@ -1,55 +1,58 @@
-import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from 'react';
-import { Box, Center, Text, ActionIcon } from '@mantine/core';
-import CloseIcon from '@mui/icons-material/Close';
+import React, { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Box, Center, Text, ActionIcon } from "@mantine/core";
+import CloseIcon from "@mui/icons-material/Close";
 
 import { useFileState, useFileActions } from "@app/contexts/FileContext";
 import { useFileWithUrl } from "@app/hooks/useFileWithUrl";
 import { useViewer } from "@app/contexts/ViewerContext";
-import { LocalEmbedPDF } from '@app/components/viewer/LocalEmbedPDF';
-import { PdfViewerToolbar } from '@app/components/viewer/PdfViewerToolbar';
-import { ThumbnailSidebar } from '@app/components/viewer/ThumbnailSidebar';
-import { BookmarkSidebar } from '@app/components/viewer/BookmarkSidebar';
-import { AttachmentSidebar } from '@app/components/viewer/AttachmentSidebar';
-import { LayerSidebar } from '@app/components/viewer/LayerSidebar';
-import { useNavigationGuard, useNavigationState } from '@app/contexts/NavigationContext';
-import { useSignature } from '@app/contexts/SignatureContext';
-import { useRedaction } from '@app/contexts/RedactionContext';
-import type { RedactionPendingTrackerAPI } from '@app/components/viewer/RedactionPendingTracker';
-import { createStirlingFilesAndStubs } from '@app/services/fileStubHelpers';
-import { isStirlingFile, getFormFillFileId } from '@app/types/fileContext';
-import { useViewerRightRailButtons } from '@app/components/viewer/useViewerRightRailButtons';
-import { StampPlacementOverlay } from '@app/components/viewer/StampPlacementOverlay';
-import { RulerOverlay, type PageMeasureScales, type PageScaleInfo, type ViewportScale } from '@app/components/viewer/RulerOverlay';
-import type { PDFDict, PDFNumber } from '@cantoo/pdf-lib';
-import { useWheelZoom } from '@app/hooks/useWheelZoom';
-import { useFormFill } from '@app/tools/formFill/FormFillContext';
-import { FormSaveBar } from '@app/tools/formFill/FormSaveBar';
-import { useViewerKeyCommand } from '@app/hooks/useViewerKeyCommand';
+import { LocalEmbedPDF } from "@app/components/viewer/LocalEmbedPDF";
+import { PdfViewerToolbar } from "@app/components/viewer/PdfViewerToolbar";
+import { ThumbnailSidebar } from "@app/components/viewer/ThumbnailSidebar";
+import { BookmarkSidebar } from "@app/components/viewer/BookmarkSidebar";
+import { AttachmentSidebar } from "@app/components/viewer/AttachmentSidebar";
+import { LayerSidebar } from "@app/components/viewer/LayerSidebar";
+import { useNavigationGuard, useNavigationState } from "@app/contexts/NavigationContext";
+import { useSignature } from "@app/contexts/SignatureContext";
+import { useRedaction } from "@app/contexts/RedactionContext";
+import type { RedactionPendingTrackerAPI } from "@app/components/viewer/RedactionPendingTracker";
+import { createStirlingFilesAndStubs } from "@app/services/fileStubHelpers";
+import { isStirlingFile, getFormFillFileId } from "@app/types/fileContext";
+import { useViewerRightRailButtons } from "@app/components/viewer/useViewerRightRailButtons";
+import { StampPlacementOverlay } from "@app/components/viewer/StampPlacementOverlay";
+import {
+  RulerOverlay,
+  type PageMeasureScales,
+  type PageScaleInfo,
+  type ViewportScale,
+} from "@app/components/viewer/RulerOverlay";
+import type { PDFDict, PDFNumber } from "@cantoo/pdf-lib";
+import { useWheelZoom } from "@app/hooks/useWheelZoom";
+import { useFormFill } from "@app/tools/formFill/FormFillContext";
+import { FormSaveBar } from "@app/tools/formFill/FormSaveBar";
+import { useViewerKeyCommand } from "@app/hooks/useViewerKeyCommand";
 
 // ─── Measure dictionary extraction ────────────────────────────────────────────
 
 async function extractPageMeasureScales(file: Blob): Promise<PageMeasureScales | null> {
   try {
-    const { PDFDocument, PDFDict, PDFName, PDFArray, PDFNumber, PDFString, PDFHexString } = await import('@cantoo/pdf-lib');
+    const { PDFDocument, PDFDict, PDFName, PDFArray, PDFNumber, PDFString, PDFHexString } = await import("@cantoo/pdf-lib");
     const pdfDoc = await PDFDocument.load(await file.arrayBuffer(), { ignoreEncryption: true });
 
     // Parse a Measure dict into a MeasureScale, or return null if malformed.
     const parseScale = (measureObj: unknown) => {
       if (!(measureObj instanceof PDFDict)) return null;
-      const rObj = measureObj.lookup(PDFName.of('R'));
-      const ratioLabel = (rObj instanceof PDFString || rObj instanceof PDFHexString)
-              ? rObj.decodeText() : '';
+      const rObj = measureObj.lookup(PDFName.of("R"));
+      const ratioLabel = rObj instanceof PDFString || rObj instanceof PDFHexString ? rObj.decodeText() : "";
       // D = distance array, X = x-axis fallback
-      let fmtArray = measureObj.lookup(PDFName.of('D'));
-      if (!(fmtArray instanceof PDFArray)) fmtArray = measureObj.lookup(PDFName.of('X'));
+      let fmtArray = measureObj.lookup(PDFName.of("D"));
+      if (!(fmtArray instanceof PDFArray)) fmtArray = measureObj.lookup(PDFName.of("X"));
       if (!(fmtArray instanceof PDFArray)) return null;
       const firstFmt = fmtArray.lookup(0);
       if (!(firstFmt instanceof PDFDict)) return null;
-      const cObj = firstFmt.lookup(PDFName.of('C'));
-      const uObj = firstFmt.lookup(PDFName.of('U'));
+      const cObj = firstFmt.lookup(PDFName.of("C"));
+      const uObj = firstFmt.lookup(PDFName.of("U"));
       if (!(cObj instanceof PDFNumber) || cObj.asNumber() <= 0) return null;
-      const unit = (uObj instanceof PDFString || uObj instanceof PDFHexString)
-        ? uObj.decodeText() : 'units';
+      const unit = uObj instanceof PDFString || uObj instanceof PDFHexString ? uObj.decodeText() : "units";
       return { factor: cObj.asNumber(), unit, ratioLabel };
     };
 
@@ -62,15 +65,15 @@ async function extractPageMeasureScales(file: Blob): Promise<PageMeasureScales |
       const viewports: ViewportScale[] = [];
 
       // Spec-conformant: /VP array — each viewport can have its own scale and BBox
-      const vpObj = pageNode.lookup(PDFName.of('VP'));
+      const vpObj = pageNode.lookup(PDFName.of("VP"));
       if (vpObj instanceof PDFArray) {
         for (let j = 0; j < vpObj.size(); j++) {
           const vpEntry = vpObj.lookup(j);
           if (!(vpEntry instanceof PDFDict)) continue;
-          const scale = parseScale(vpEntry.lookup(PDFName.of('Measure')));
+          const scale = parseScale(vpEntry.lookup(PDFName.of("Measure")));
           if (!scale) continue;
-          let bbox: ViewportScale['bbox'] = null;
-          const bboxObj = vpEntry.lookup(PDFName.of('BBox'));
+          let bbox: ViewportScale["bbox"] = null;
+          const bboxObj = vpEntry.lookup(PDFName.of("BBox"));
           if (bboxObj instanceof PDFArray && bboxObj.size() >= 4) {
             bbox = [
               (bboxObj.lookup(0) as PDFNumber).asNumber(),
@@ -85,7 +88,7 @@ async function extractPageMeasureScales(file: Blob): Promise<PageMeasureScales |
 
       // Fallback: /Measure directly on page (non-conforming but seen in the wild)
       if (viewports.length === 0) {
-        const scale = parseScale(pageNode.lookup(PDFName.of('Measure')));
+        const scale = parseScale(pageNode.lookup(PDFName.of("Measure")));
         if (scale) viewports.push({ bbox: null, scale });
       }
 
@@ -191,29 +194,36 @@ const EmbedPdfViewerContent = ({
   const activeFiles = selectors.getFiles();
   const activeFilesRef = useRef(activeFiles);
   activeFilesRef.current = activeFiles;
-  const activeFileIds = activeFiles.map(f => f.fileId);
+  const activeFileIds = activeFiles.map((f) => f.fileId);
 
   // Navigation guard for unsaved changes
-  const { setHasUnsavedChanges, registerUnsavedChangesChecker, unregisterUnsavedChangesChecker, registerNavigationWarningHandlers, unregisterNavigationWarningHandlers } = useNavigationGuard();
+  const {
+    setHasUnsavedChanges,
+    registerUnsavedChangesChecker,
+    unregisterUnsavedChangesChecker,
+    registerNavigationWarningHandlers,
+    unregisterNavigationWarningHandlers,
+  } = useNavigationGuard();
 
   const { selectedTool } = useNavigationState();
 
   // Form fill context
   const { fetchFields: fetchFormFields, setProviderMode } = useFormFill();
 
-  const isInAnnotationTool = selectedTool === 'sign' || selectedTool === 'addText' || selectedTool === 'addImage' || selectedTool === 'annotate';
+  const isInAnnotationTool =
+    selectedTool === "sign" || selectedTool === "addText" || selectedTool === "addImage" || selectedTool === "annotate";
   const isSignatureMode = isInAnnotationTool;
-  const isManualRedactMode = selectedTool === 'redact';
+  const isManualRedactMode = selectedTool === "redact";
 
   // Enable annotations when annotation tool is selected OR when annotations are visible
   // (so users can interact with existing comment annotations in reader/viewer mode)
-  const shouldEnableAnnotations = selectedTool === 'annotate' || isSignatureMode || isAnnotationsVisible;
+  const shouldEnableAnnotations = selectedTool === "annotate" || isSignatureMode || isAnnotationsVisible;
 
   // Enable redaction only when redaction tool is selected
-  const shouldEnableRedaction = selectedTool === 'redact';
+  const shouldEnableRedaction = selectedTool === "redact";
 
   // FormFill tool mode — uses PDFBox backend for full-fidelity form handling
-  const isFormFillToolActive = (selectedTool as string) === 'formFill';
+  const isFormFillToolActive = (selectedTool as string) === "formFill";
 
   // Form overlays are shown in BOTH modes:
   // - Normal viewer: form overlays visible (PDFium WASM, frontend-only)
@@ -222,7 +232,7 @@ const EmbedPdfViewerContent = ({
 
   // Switch the provider when the tool mode changes
   useEffect(() => {
-    setProviderMode(isFormFillToolActive ? 'pdfbox' : 'pdflib');
+    setProviderMode(isFormFillToolActive ? "pdfbox" : "pdflib");
   }, [isFormFillToolActive, setProviderMode]);
 
   // Track previous annotation/redaction state to detect tool switches
@@ -268,9 +278,7 @@ const EmbedPdfViewerContent = ({
       setAnnotationMode(true);
     }
   }, [isInAnnotationTool, setAnnotationMode]);
-  const isPlacementOverlayActive = Boolean(
-    isInAnnotationTool && isPlacementMode && signatureConfig
-  );
+  const isPlacementOverlayActive = Boolean(isInAnnotationTool && isPlacementMode && signatureConfig);
 
   // Track which file tab is active
   const [internalActiveFileIndex, setInternalActiveFileIndex] = useState(0);
@@ -284,12 +292,12 @@ const EmbedPdfViewerContent = ({
   // Stable string key representing the current file list order.
   // Using a joined ID string avoids depending on the activeFiles array reference,
   // which is a new object every render and would cause an infinite effect loop.
-  const fileIdsKey = activeFiles.map(f => f.fileId).join(',');
+  const fileIdsKey = activeFiles.map((f) => f.fileId).join(",");
 
   // When the file list actually changes, re-derive activeFileIndex from the stable activeFileId.
   useEffect(() => {
     if (!activeFileId || activeFiles.length === 0) return;
-    const newIndex = activeFiles.findIndex(f => f.fileId === activeFileId);
+    const newIndex = activeFiles.findIndex((f) => f.fileId === activeFileId);
     if (newIndex !== -1 && newIndex !== activeFileIndex) {
       setActiveFileIndex(newIndex);
     }
@@ -348,7 +356,7 @@ const EmbedPdfViewerContent = ({
     }
 
     if (previewFile) {
-      const uniquePreviewId = `${previewFile.name}-${previewFile.size}-${previewFile.lastModified ?? 'na'}`;
+      const uniquePreviewId = `${previewFile.name}-${previewFile.size}-${previewFile.lastModified ?? "na"}`;
       return `preview-${uniquePreviewId}`;
     }
 
@@ -358,7 +366,7 @@ const EmbedPdfViewerContent = ({
 
     if (effectiveFile?.file instanceof File) {
       const fileObj = effectiveFile.file;
-      return `file-${fileObj.name}-${fileObj.size}-${fileObj.lastModified ?? 'na'}`;
+      return `file-${fileObj.name}-${fileObj.size}-${fileObj.lastModified ?? "na"}`;
     }
 
     return undefined;
@@ -370,12 +378,14 @@ const EmbedPdfViewerContent = ({
       return [bookmarkCacheKey].filter(Boolean) as string[];
     }
 
-    return activeFiles.map(file => {
-      if (isStirlingFile(file)) {
-        return file.fileId;
-      }
-      return undefined;
-    }).filter(Boolean) as string[];
+    return activeFiles
+      .map((file) => {
+        if (isStirlingFile(file)) {
+          return file.fileId;
+        }
+        return undefined;
+      })
+      .filter(Boolean) as string[];
   }, [activeFiles, previewFile, bookmarkCacheKey]);
 
   useWheelZoom({
@@ -400,16 +410,14 @@ const EmbedPdfViewerContent = ({
       if (mod) {
         const target = event.target as Element;
         const isInTextInput =
-          target.tagName === 'INPUT' ||
-          target.tagName === 'TEXTAREA' ||
-          (target as HTMLElement).isContentEditable;
+          target.tagName === "INPUT" || target.tagName === "TEXTAREA" || (target as HTMLElement).isContentEditable;
 
         if (!isInTextInput) {
-          const wasOverridden = viewerKeyCommand(event)
-          if (!wasOverridden){
+          const wasOverridden = viewerKeyCommand(event);
+          if (!wasOverridden) {
             switch (event.key) {
-              case 'p':
-              case 'P':
+              case "p":
+              case "P":
                 event.preventDefault();
                 printActions.print();
                 return;
@@ -426,37 +434,37 @@ const EmbedPdfViewerContent = ({
       // Modifier key shortcuts (Ctrl/Cmd + key)
       if (mod) {
         switch (event.key) {
-          case '=':
-          case '+':
+          case "=":
+          case "+":
             event.preventDefault();
             zoomActions.zoomIn();
             return;
-          case '-':
-          case '_':
+          case "-":
+          case "_":
             event.preventDefault();
             zoomActions.zoomOut();
             return;
-          case '0':
+          case "0":
             // Ctrl+0: Reset zoom to fit width
             event.preventDefault();
-            zoomActions.requestZoom('fit-width');
+            zoomActions.requestZoom("fit-width");
             return;
-          case 'a':
-          case 'A':
+          case "a":
+          case "A":
             // Ctrl+A: Prevent browser from selecting all UI text
             event.preventDefault();
             return;
-          case 'f':
-          case 'F':
+          case "f":
+          case "F":
             event.preventDefault();
             if (isSearchInterfaceVisible) {
-              window.dispatchEvent(new CustomEvent('refocus-search-input'));
+              window.dispatchEvent(new CustomEvent("refocus-search-input"));
             } else {
               searchInterfaceActions.open();
             }
             return;
-          case 's':
-          case 'S':
+          case "s":
+          case "S":
             // Ctrl+S: Save/apply changes
             if (!event.shiftKey) {
               event.preventDefault();
@@ -466,8 +474,8 @@ const EmbedPdfViewerContent = ({
             }
             return;
 
-          case 'z':
-          case 'Z':
+          case "z":
+          case "Z":
             // Ctrl+Z: Undo; Ctrl+Shift+Z: Redo
             event.preventDefault();
             if (event.shiftKey) {
@@ -476,8 +484,8 @@ const EmbedPdfViewerContent = ({
               historyApiRef.current?.undo?.();
             }
             return;
-          case 'y':
-          case 'Y':
+          case "y":
+          case "Y":
             // Ctrl+Y: Redo
             event.preventDefault();
             historyApiRef.current?.redo?.();
@@ -488,23 +496,23 @@ const EmbedPdfViewerContent = ({
 
       // Non-modifier shortcuts
       switch (event.key) {
-        case 'Home':
+        case "Home":
           event.preventDefault();
           scrollActions.scrollToFirstPage();
           return;
-        case 'End':
+        case "End":
           event.preventDefault();
           scrollActions.scrollToLastPage();
           return;
-        case 'PageUp':
+        case "PageUp":
           event.preventDefault();
           scrollActions.scrollToPreviousPage();
           return;
-        case 'PageDown':
+        case "PageDown":
           event.preventDefault();
           scrollActions.scrollToNextPage();
           return;
-        case 'Escape':
+        case "Escape":
           if (isSearchInterfaceVisible) {
             event.preventDefault();
             searchInterfaceActions.close();
@@ -513,14 +521,23 @@ const EmbedPdfViewerContent = ({
       }
     };
 
-    document.addEventListener('keydown', handleKeyDown);
+    document.addEventListener("keydown", handleKeyDown);
     return () => {
-      document.removeEventListener('keydown', handleKeyDown);
+      document.removeEventListener("keydown", handleKeyDown);
     };
   }, [
-    isViewerHovered, isSearchInterfaceVisible, zoomActions, searchInterfaceActions,
-    scrollActions, printActions, exportActions, rotationActions, historyApiRef,
-    viewerApplyChanges, cyclePdfRenderMode, viewerKeyCommand,
+    isViewerHovered,
+    isSearchInterfaceVisible,
+    zoomActions,
+    searchInterfaceActions,
+    scrollActions,
+    printActions,
+    exportActions,
+    rotationActions,
+    historyApiRef,
+    viewerApplyChanges,
+    cyclePdfRenderMode,
+    viewerKeyCommand,
   ]);
 
   // Watch the annotation history API to detect when the document becomes "dirty".
@@ -542,7 +559,7 @@ const EmbedPdfViewerContent = ({
 
     const unsubscribe = historyApi.subscribe(updateHasChanges);
     return () => {
-      if (typeof unsubscribe === 'function') {
+      if (typeof unsubscribe === "function") {
         unsubscribe();
       }
     };
@@ -572,14 +589,21 @@ const EmbedPdfViewerContent = ({
     return () => {
       unregisterUnsavedChangesChecker();
     };
-  }, [historyApiRef, previewFile, registerUnsavedChangesChecker, unregisterUnsavedChangesChecker, isManualRedactMode, redactionsApplied]);
+  }, [
+    historyApiRef,
+    previewFile,
+    registerUnsavedChangesChecker,
+    unregisterUnsavedChangesChecker,
+    isManualRedactMode,
+    redactionsApplied,
+  ]);
 
   // Save changes - save annotations and redactions to file (overwrites active file)
   const applyChanges = useCallback(async () => {
     if (!currentFile || activeFileIds.length === 0) return;
 
     try {
-      console.log('[Viewer] Applying changes - exporting PDF with annotations/redactions');
+      console.log("[Viewer] Applying changes - exporting PDF with annotations/redactions");
 
       // Use the continuously tracked scroll position - more reliable than reading at this moment
       const pageToRestore = lastKnownScrollPageRef.current;
@@ -597,32 +621,32 @@ const EmbedPdfViewerContent = ({
       }
 
       if (hadPendingRedactions) {
-        console.log('[Viewer] Committing pending redactions before export');
+        console.log("[Viewer] Committing pending redactions before export");
         redactionTrackerRef.current?.commitAllPending();
         // Give a small delay for the commit to process
-        await new Promise(resolve => setTimeout(resolve, 100));
+        await new Promise((resolve) => setTimeout(resolve, 100));
       }
 
       // Step 1: Export PDF with annotations using EmbedPDF
       const arrayBuffer = await exportActions.saveAsCopy();
       if (!arrayBuffer) {
-        throw new Error('Failed to export PDF');
+        throw new Error("Failed to export PDF");
       }
 
       // Step 2: Convert ArrayBuffer to File
-      const blob = new Blob([arrayBuffer], { type: 'application/pdf' });
-      const filename = currentFile.name || 'document.pdf';
-      const file = new File([blob], filename, { type: 'application/pdf' });
+      const blob = new Blob([arrayBuffer], { type: "application/pdf" });
+      const filename = currentFile.name || "document.pdf";
+      const file = new File([blob], filename, { type: "application/pdf" });
 
       // Step 3: Create StirlingFiles and stubs for version history
       // Only consume the current file, not all active files
       const currentFileId = activeFiles[activeFileIndex]?.fileId;
-      if (!currentFileId) throw new Error('Current file ID not found');
+      if (!currentFileId) throw new Error("Current file ID not found");
 
       const parentStub = selectors.getStirlingFileStub(currentFileId);
-      if (!parentStub) throw new Error('Parent stub not found');
+      if (!parentStub) throw new Error("Parent stub not found");
 
-      const { stirlingFiles, stubs } = await createStirlingFilesAndStubs([file], parentStub, selectedTool ?? 'multiTool');
+      const { stirlingFiles, stubs } = await createStirlingFilesAndStubs([file], parentStub, selectedTool ?? "multiTool");
 
       // Store the page to restore after file replacement triggers re-render
       pendingScrollRestoreRef.current = pageToRestore;
@@ -643,61 +667,74 @@ const EmbedPdfViewerContent = ({
       setHasUnsavedChanges(false);
       setRedactionsApplied(false);
     } catch (error) {
-      console.error('Apply changes failed:', error);
+      console.error("Apply changes failed:", error);
     }
-  }, [currentFile, activeFiles, activeFileIndex, exportActions, actions, selectors, setHasUnsavedChanges, setRedactionsApplied, rotationState.rotation]);
+  }, [
+    currentFile,
+    activeFiles,
+    activeFileIndex,
+    exportActions,
+    actions,
+    selectors,
+    setHasUnsavedChanges,
+    setRedactionsApplied,
+    rotationState.rotation,
+  ]);
 
   // Apply form fill changes - reload the filled PDF into the viewer
-  const handleFormApply = useCallback(async (filledBlob: Blob) => {
-    if (formApplyInProgressRef.current) return;
-    if (!currentFile || activeFileIds.length === 0) return;
+  const handleFormApply = useCallback(
+    async (filledBlob: Blob) => {
+      if (formApplyInProgressRef.current) return;
+      if (!currentFile || activeFileIds.length === 0) return;
 
-    formApplyInProgressRef.current = true;
-    try {
-      console.log('[Viewer] Applying form fill changes - reloading filled PDF');
+      formApplyInProgressRef.current = true;
+      try {
+        console.log("[Viewer] Applying form fill changes - reloading filled PDF");
 
-      // Use the continuously tracked scroll position
-      const pageToRestore = lastKnownScrollPageRef.current;
+        // Use the continuously tracked scroll position
+        const pageToRestore = lastKnownScrollPageRef.current;
 
-      // Save the current rotation to restore after reload
-      const currentRotation = rotationState.rotation ?? 0;
+        // Save the current rotation to restore after reload
+        const currentRotation = rotationState.rotation ?? 0;
 
-      // Convert Blob to File
-      const filename = currentFile.name || 'document.pdf';
-      const file = new File([filledBlob], filename, { type: 'application/pdf' });
+        // Convert Blob to File
+        const filename = currentFile.name || "document.pdf";
+        const file = new File([filledBlob], filename, { type: "application/pdf" });
 
-      // Get current file info for creating the updated version
-      const currentFileId = activeFiles[activeFileIndex]?.fileId;
-      if (!currentFileId) throw new Error('Current file ID not found');
+        // Get current file info for creating the updated version
+        const currentFileId = activeFiles[activeFileIndex]?.fileId;
+        if (!currentFileId) throw new Error("Current file ID not found");
 
-      const parentStub = selectors.getStirlingFileStub(currentFileId);
-      if (!parentStub) throw new Error('Parent stub not found');
+        const parentStub = selectors.getStirlingFileStub(currentFileId);
+        if (!parentStub) throw new Error("Parent stub not found");
 
-      // Create StirlingFiles and stubs for version history
-      const { stirlingFiles, stubs } = await createStirlingFilesAndStubs([file], parentStub, selectedTool ?? 'multiTool');
+        // Create StirlingFiles and stubs for version history
+        const { stirlingFiles, stubs } = await createStirlingFilesAndStubs([file], parentStub, selectedTool ?? "multiTool");
 
-      // Store the page to restore after file replacement
-      pendingScrollRestoreRef.current = pageToRestore;
-      scrollRestoreAttemptsRef.current = 0;
+        // Store the page to restore after file replacement
+        pendingScrollRestoreRef.current = pageToRestore;
+        scrollRestoreAttemptsRef.current = 0;
 
-      // Store the rotation to restore after file replacement
-      pendingRotationRestoreRef.current = currentRotation;
-      rotationRestoreAttemptsRef.current = 0;
+        // Store the rotation to restore after file replacement
+        pendingRotationRestoreRef.current = currentRotation;
+        rotationRestoreAttemptsRef.current = 0;
 
-      // Track the new file ID so the viewer follows it after the list reorders
-      const newFileId = stubs[0]?.id;
-      if (newFileId) setActiveFileId(newFileId);
+        // Track the new file ID so the viewer follows it after the list reorders
+        const newFileId = stubs[0]?.id;
+        if (newFileId) setActiveFileId(newFileId);
 
-      // Replace the current file in context
-      await actions.consumeFiles([currentFileId], stirlingFiles, stubs);
+        // Replace the current file in context
+        await actions.consumeFiles([currentFileId], stirlingFiles, stubs);
 
-      console.log('[Viewer] Form fill changes applied successfully');
-    } catch (error) {
-      console.error('[Viewer] Apply form changes failed:', error);
-    } finally {
-      formApplyInProgressRef.current = false;
-    }
-  }, [currentFile, activeFiles, activeFileIndex, actions, selectors, activeFileIds.length, rotationState.rotation]);
+        console.log("[Viewer] Form fill changes applied successfully");
+      } catch (error) {
+        console.error("[Viewer] Apply form changes failed:", error);
+      } finally {
+        formApplyInProgressRef.current = false;
+      }
+    },
+    [currentFile, activeFiles, activeFileIndex, actions, selectors, activeFileIds.length, rotationState.rotation],
+  );
 
   useEffect(() => {
     const handler = (e: Event) => {
@@ -706,47 +743,50 @@ const EmbedPdfViewerContent = ({
         handleFormApply(blob);
       }
     };
-    window.addEventListener('formfill:apply', handler);
-    return () => window.removeEventListener('formfill:apply', handler);
+    window.addEventListener("formfill:apply", handler);
+    return () => window.removeEventListener("formfill:apply", handler);
   }, [handleFormApply]);
 
   // Apply layer visibility changes - reload the modified PDF into the viewer
   const layerApplyInProgressRef = useRef(false);
-  const handleLayerApply = useCallback(async (modifiedBlob: Blob) => {
-    if (layerApplyInProgressRef.current) return;
-    if (!currentFile || activeFileIds.length === 0) return;
+  const handleLayerApply = useCallback(
+    async (modifiedBlob: Blob) => {
+      if (layerApplyInProgressRef.current) return;
+      if (!currentFile || activeFileIds.length === 0) return;
 
-    layerApplyInProgressRef.current = true;
-    try {
-      const pageToRestore = lastKnownScrollPageRef.current;
-      const currentRotation = rotationState.rotation ?? 0;
+      layerApplyInProgressRef.current = true;
+      try {
+        const pageToRestore = lastKnownScrollPageRef.current;
+        const currentRotation = rotationState.rotation ?? 0;
 
-      const filename = currentFile.name || 'document.pdf';
-      const file = new File([modifiedBlob], filename, { type: 'application/pdf' });
+        const filename = currentFile.name || "document.pdf";
+        const file = new File([modifiedBlob], filename, { type: "application/pdf" });
 
-      const currentFileId = activeFiles[activeFileIndex]?.fileId;
-      if (!currentFileId) throw new Error('Current file ID not found');
+        const currentFileId = activeFiles[activeFileIndex]?.fileId;
+        if (!currentFileId) throw new Error("Current file ID not found");
 
-      const parentStub = selectors.getStirlingFileStub(currentFileId);
-      if (!parentStub) throw new Error('Parent stub not found');
+        const parentStub = selectors.getStirlingFileStub(currentFileId);
+        if (!parentStub) throw new Error("Parent stub not found");
 
-      const { stirlingFiles, stubs } = await createStirlingFilesAndStubs([file], parentStub, selectedTool ?? 'multiTool');
+        const { stirlingFiles, stubs } = await createStirlingFilesAndStubs([file], parentStub, selectedTool ?? "multiTool");
 
-      pendingScrollRestoreRef.current = pageToRestore;
-      scrollRestoreAttemptsRef.current = 0;
-      pendingRotationRestoreRef.current = currentRotation;
-      rotationRestoreAttemptsRef.current = 0;
+        pendingScrollRestoreRef.current = pageToRestore;
+        scrollRestoreAttemptsRef.current = 0;
+        pendingRotationRestoreRef.current = currentRotation;
+        rotationRestoreAttemptsRef.current = 0;
 
-      const newFileId = stubs[0]?.id;
-      if (newFileId) setActiveFileId(newFileId);
+        const newFileId = stubs[0]?.id;
+        if (newFileId) setActiveFileId(newFileId);
 
-      await actions.consumeFiles([currentFileId], stirlingFiles, stubs);
-    } catch (error) {
-      console.error('[Viewer] Apply layer changes failed:', error);
-    } finally {
-      layerApplyInProgressRef.current = false;
-    }
-  }, [currentFile, activeFiles, activeFileIndex, actions, selectors, activeFileIds.length, rotationState.rotation]);
+        await actions.consumeFiles([currentFileId], stirlingFiles, stubs);
+      } catch (error) {
+        console.error("[Viewer] Apply layer changes failed:", error);
+      } finally {
+        layerApplyInProgressRef.current = false;
+      }
+    },
+    [currentFile, activeFiles, activeFileIndex, actions, selectors, activeFileIds.length, rotationState.rotation],
+  );
 
   // Discard pending redactions but save already-applied ones
   // This is called when user clicks "Discard & Leave" - we want to:
@@ -759,7 +799,7 @@ const EmbedPdfViewerContent = ({
     }
 
     try {
-      console.log('[Viewer] Discarding pending marks but saving applied redactions');
+      console.log("[Viewer] Discarding pending marks but saving applied redactions");
 
       // Save current view state to restore after file replacement
       const pageToRestore = lastKnownScrollPageRef.current;
@@ -768,22 +808,22 @@ const EmbedPdfViewerContent = ({
       // Export PDF WITHOUT committing pending marks - this saves only applied redactions
       const arrayBuffer = await exportActions.saveAsCopy();
       if (!arrayBuffer) {
-        throw new Error('Failed to export PDF');
+        throw new Error("Failed to export PDF");
       }
 
       // Convert ArrayBuffer to File
-      const blob = new Blob([arrayBuffer], { type: 'application/pdf' });
-      const filename = currentFile.name || 'document.pdf';
-      const file = new File([blob], filename, { type: 'application/pdf' });
+      const blob = new Blob([arrayBuffer], { type: "application/pdf" });
+      const filename = currentFile.name || "document.pdf";
+      const file = new File([blob], filename, { type: "application/pdf" });
 
       // Create StirlingFiles and stubs for version history
       const currentFileId = activeFiles[activeFileIndex]?.fileId;
-      if (!currentFileId) throw new Error('Current file ID not found');
+      if (!currentFileId) throw new Error("Current file ID not found");
 
       const parentStub = selectors.getStirlingFileStub(currentFileId);
-      if (!parentStub) throw new Error('Parent stub not found');
+      if (!parentStub) throw new Error("Parent stub not found");
 
-      const { stirlingFiles, stubs } = await createStirlingFilesAndStubs([file], parentStub, selectedTool ?? 'multiTool');
+      const { stirlingFiles, stubs } = await createStirlingFilesAndStubs([file], parentStub, selectedTool ?? "multiTool");
 
       // Store view state to restore after file replacement
       pendingScrollRestoreRef.current = pageToRestore;
@@ -798,11 +838,22 @@ const EmbedPdfViewerContent = ({
       hasAnnotationChangesRef.current = false;
       setRedactionsApplied(false);
 
-      console.log('[Viewer] Applied redactions saved, pending marks discarded');
+      console.log("[Viewer] Applied redactions saved, pending marks discarded");
     } catch (error) {
-      console.error('Failed to save applied redactions:', error);
+      console.error("Failed to save applied redactions:", error);
     }
-  }, [redactionsApplied, currentFile, activeFiles, activeFileIndex, activeFileIds.length, exportActions, actions, selectors, setRedactionsApplied, rotationState.rotation]);
+  }, [
+    redactionsApplied,
+    currentFile,
+    activeFiles,
+    activeFileIndex,
+    activeFileIds.length,
+    exportActions,
+    actions,
+    selectors,
+    setRedactionsApplied,
+    rotationState.rotation,
+  ]);
 
   // Register navigation warning handlers so the global modal can call our save/discard logic
   useEffect(() => {
@@ -824,7 +875,13 @@ const EmbedPdfViewerContent = ({
       },
     });
     return () => unregisterNavigationWarningHandlers();
-  }, [previewFile, applyChanges, discardAndSaveApplied, registerNavigationWarningHandlers, unregisterNavigationWarningHandlers]);
+  }, [
+    previewFile,
+    applyChanges,
+    discardAndSaveApplied,
+    registerNavigationWarningHandlers,
+    unregisterNavigationWarningHandlers,
+  ]);
 
   // Restore scroll position after file replacement or tool switch
   // Uses polling with retries to ensure the scroll succeeds
@@ -841,7 +898,7 @@ const EmbedPdfViewerContent = ({
 
       // Only attempt if we have valid state (totalPages > 0 means PDF is loaded)
       if (currentState.totalPages > 0 && targetPage > 0) {
-        scrollActions.scrollToPage(targetPage, 'instant');
+        scrollActions.scrollToPage(targetPage, "instant");
 
         // Check if scroll succeeded after a brief delay
         setTimeout(() => {
@@ -943,10 +1000,17 @@ const EmbedPdfViewerContent = ({
 
   useEffect(() => {
     const file = effectiveFile?.file;
-    if (!file) { setPageMeasureScales(null); return; }
+    if (!file) {
+      setPageMeasureScales(null);
+      return;
+    }
     let cancelled = false;
-    extractPageMeasureScales(file).then(scales => { if (!cancelled) setPageMeasureScales(scales); });
-    return () => { cancelled = true; };
+    extractPageMeasureScales(file).then((scales) => {
+      if (!cancelled) setPageMeasureScales(scales);
+    });
+    return () => {
+      cancelled = true;
+    };
   }, [effectiveFile]);
 
   // Register viewer right-rail buttons
@@ -969,7 +1033,7 @@ const EmbedPdfViewerContent = ({
     formFillProviderRef.current = isFormFillToolActive;
 
     if (fileChanged) {
-      console.log('[FormFill] File changed. Old:', formFillFileIdRef.current, 'New:', currentFileId);
+      console.log("[FormFill] File changed. Old:", formFillFileIdRef.current, "New:", currentFileId);
       formFillFileIdRef.current = currentFileId;
       // NOTE: Don't call resetFormFill() here — fetchFormFields() handles
       // clearing old state internally. Calling reset() before fetch() would
@@ -978,7 +1042,7 @@ const EmbedPdfViewerContent = ({
     }
 
     if (currentFile && (fileChanged || providerChanged)) {
-      console.log('[FormFill] Fetching form fields for:', currentFileId);
+      console.log("[FormFill] Fetching form fields for:", currentFileId);
       fetchFormFields(currentFile, currentFileId ?? undefined);
     }
   }, [isFormFillToolActive, currentFile, currentFileId, fetchFormFields]);
@@ -998,20 +1062,21 @@ const EmbedPdfViewerContent = ({
       onMouseEnter={() => setIsViewerHovered(true)}
       onMouseLeave={() => setIsViewerHovered(false)}
       style={{
-        position: 'relative',
-        height: '100%',
-        display: 'flex',
-        flexDirection: 'column',
-        overflow: 'hidden',
-        contain: 'layout style paint'
-      }}>
+        position: "relative",
+        height: "100%",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+        contain: "layout style paint",
+      }}
+    >
       {/* Close Button - Only show in preview mode */}
       {onClose && previewFile && (
         <ActionIcon
           variant="filled"
           color="gray"
           size="lg"
-          style={{ position: 'absolute', top: '1rem', right: '1rem', zIndex: 1000, borderRadius: '50%' }}
+          style={{ position: "absolute", top: "1rem", right: "1rem", zIndex: 1000, borderRadius: "50%" }}
           onClick={onClose}
         >
           <CloseIcon />
@@ -1028,26 +1093,31 @@ const EmbedPdfViewerContent = ({
           <Box
             ref={pdfContainerRef}
             style={{
-              position: 'relative',
+              position: "relative",
               flex: 1,
-              overflow: 'hidden',
+              overflow: "hidden",
               minHeight: 0,
               minWidth: 0,
               marginRight: `${totalRightMargin}rem`,
-              transition: 'margin-right 0.3s ease'
-            }}>
+              transition: "margin-right 0.3s ease",
+            }}
+          >
             <LocalEmbedPDF
-              key={currentFileId || 'no-file'}
+              key={currentFileId || "no-file"}
               pdfRenderMode={pdfRenderMode}
               file={effectiveFile.file}
               url={effectiveFile.url}
               fileName={
-                previewFile ? previewFile.name :
-                (currentFile && isStirlingFile(currentFile) ? currentFile.name :
-                (effectiveFile?.file instanceof File ? effectiveFile.file.name : undefined))
+                previewFile
+                  ? previewFile.name
+                  : currentFile && isStirlingFile(currentFile)
+                    ? currentFile.name
+                    : effectiveFile?.file instanceof File
+                      ? effectiveFile.file.name
+                      : undefined
               }
               enableAnnotations={shouldEnableAnnotations}
-              isSignMode={selectedTool === 'sign'}
+              isSignMode={selectedTool === "sign"}
               showBakedAnnotations={isAnnotationsVisible}
               enableRedaction={shouldEnableRedaction}
               enableFormFill={shouldEnableFormFill}
@@ -1065,21 +1135,13 @@ const EmbedPdfViewerContent = ({
               }}
             />
             {/* Floating save bar for form-filled PDFs (like Chrome/Firefox PDF viewers) */}
-            <FormSaveBar
-              file={currentFile ?? null}
-              isFormFillToolActive={isFormFillToolActive}
-              onApply={handleFormApply}
-            />
+            <FormSaveBar file={currentFile ?? null} isFormFillToolActive={isFormFillToolActive} onApply={handleFormApply} />
             <StampPlacementOverlay
               containerRef={pdfContainerRef}
               isActive={isPlacementOverlayActive}
               signatureConfig={signatureConfig}
             />
-            <RulerOverlay
-              containerRef={pdfContainerRef}
-              isActive={isRulerActive}
-              pageMeasureScales={pageMeasureScales}
-            />
+            <RulerOverlay containerRef={pdfContainerRef} isActive={isRulerActive} pageMeasureScales={pageMeasureScales} />
           </Box>
         </>
       )}
@@ -1100,15 +1162,11 @@ const EmbedPdfViewerContent = ({
           }}
         >
           <div style={{ pointerEvents: "auto" }}>
-            <PdfViewerToolbar
-              currentPage={scrollState.currentPage}
-              totalPages={scrollState.totalPages}
-            />
+            <PdfViewerToolbar currentPage={scrollState.currentPage} totalPages={scrollState.totalPages} />
           </div>
         </div>
       )}
 
-
       {/* Thumbnail Sidebar */}
       <ThumbnailSidebar
         visible={isThumbnailSidebarVisible}
@@ -1140,15 +1198,12 @@ const EmbedPdfViewerContent = ({
         onApplyLayers={handleLayerApply}
         onLayersDetected={setHasLayers}
       />
-
     </Box>
   );
 };
 
 const EmbedPdfViewer = (props: EmbedPdfViewerProps) => {
-  return (
-    <EmbedPdfViewerContent {...props} />
-  );
+  return <EmbedPdfViewerContent {...props} />;
 };
 
 export default EmbedPdfViewer;
diff --git a/frontend/src/core/components/viewer/ExportAPIBridge.tsx b/frontend/src/core/components/viewer/ExportAPIBridge.tsx
index 9ae2b1bb41..ec81bef5e6 100644
--- a/frontend/src/core/components/viewer/ExportAPIBridge.tsx
+++ b/frontend/src/core/components/viewer/ExportAPIBridge.tsx
@@ -1,7 +1,7 @@
-import { useEffect } from 'react';
-import { useExportCapability } from '@embedpdf/plugin-export/react';
-import { useViewer } from '@app/contexts/ViewerContext';
-import { useDocumentReady } from '@app/components/viewer/hooks/useDocumentReady';
+import { useEffect } from "react";
+import { useExportCapability } from "@embedpdf/plugin-export/react";
+import { useViewer } from "@app/contexts/ViewerContext";
+import { useDocumentReady } from "@app/components/viewer/hooks/useDocumentReady";
 
 /**
  * Component that runs inside EmbedPDF context and provides export functionality
@@ -14,16 +14,16 @@ export function ExportAPIBridge() {
   useEffect(() => {
     if (exportApi && documentReady) {
       // Register this bridge with ViewerContext
-      registerBridge('export', {
+      registerBridge("export", {
         state: {
           canExport: true,
         },
-        api: exportApi
+        api: exportApi,
       });
     }
 
     return () => {
-      registerBridge('export', null);
+      registerBridge("export", null);
     };
   }, [exportApi, documentReady, registerBridge]);
 
diff --git a/frontend/src/core/components/viewer/HistoryAPIBridge.tsx b/frontend/src/core/components/viewer/HistoryAPIBridge.tsx
index e6fed94713..444e3ffbaf 100644
--- a/frontend/src/core/components/viewer/HistoryAPIBridge.tsx
+++ b/frontend/src/core/components/viewer/HistoryAPIBridge.tsx
@@ -1,11 +1,11 @@
-import { useImperativeHandle, forwardRef, useEffect, useRef } from 'react';
-import { useHistoryCapability } from '@embedpdf/plugin-history/react';
-import { useAnnotationCapability } from '@embedpdf/plugin-annotation/react';
-import { useSignature } from '@app/contexts/SignatureContext';
-import { uuidV4, PdfAnnotationSubtype } from '@embedpdf/models';
-import type { HistoryAPI } from '@app/components/viewer/viewerTypes';
-import { ANNOTATION_RECREATION_DELAY_MS, ANNOTATION_VERIFICATION_DELAY_MS } from '@app/constants/app';
-import { useDocumentReady } from '@app/components/viewer/hooks/useDocumentReady';
+import { useImperativeHandle, forwardRef, useEffect, useRef } from "react";
+import { useHistoryCapability } from "@embedpdf/plugin-history/react";
+import { useAnnotationCapability } from "@embedpdf/plugin-annotation/react";
+import { useSignature } from "@app/contexts/SignatureContext";
+import { uuidV4, PdfAnnotationSubtype } from "@embedpdf/models";
+import type { HistoryAPI } from "@app/components/viewer/viewerTypes";
+import { ANNOTATION_RECREATION_DELAY_MS, ANNOTATION_VERIFICATION_DELAY_MS } from "@app/constants/app";
+import { useDocumentReady } from "@app/components/viewer/hooks/useDocumentReady";
 
 /**
  * Connects the PDF history (undo/redo) plugin to the shared ViewerContext.
@@ -56,8 +56,8 @@ export const HistoryAPIBridge = forwardRef<HistoryAPI>(function HistoryAPIBridge
               annotationApi.createAnnotation(pageIndex, {
                 type: annotation.type,
                 rect,
-                author: annotation.author || 'Digital Signature',
-                subject: annotation.subject || 'Digital Signature',
+                author: annotation.author || "Digital Signature",
+                subject: annotation.subject || "Digital Signature",
                 pageIndex,
                 id: newId,
                 created: annotation.created || new Date(),
@@ -68,14 +68,14 @@ export const HistoryAPIBridge = forwardRef<HistoryAPI>(function HistoryAPIBridge
               });
             }, ANNOTATION_RECREATION_DELAY_MS);
           } catch (restoreError) {
-            console.error('HistoryAPI: Failed to restore cropped signature:', restoreError);
+            console.error("HistoryAPI: Failed to restore cropped signature:", restoreError);
           }
           return;
         }
       }
 
       // Handle annotation restoration after undo operations
-      if (event.type === 'create' && event.committed) {
+      if (event.type === "create" && event.committed) {
         // Check if this is a STAMP annotation (signature) that might need image data restoration
         if (annotation && annotation.type === PdfAnnotationSubtype.STAMP && annotation.id) {
           getImageData(annotation.id);
@@ -85,7 +85,6 @@ export const HistoryAPIBridge = forwardRef<HistoryAPI>(function HistoryAPIBridge
             const currentStoredData = getImageData(annotation.id);
             // Check if the annotation lacks image data but we have it stored
             if (currentStoredData && (!annotation.imageSrc || annotation.imageSrc !== currentStoredData)) {
-
               // Generate new ID to avoid React key conflicts
               const newId = uuidV4();
 
@@ -93,12 +92,12 @@ export const HistoryAPIBridge = forwardRef<HistoryAPI>(function HistoryAPIBridge
               const restoredData = {
                 type: annotation.type,
                 rect: annotation.rect,
-                author: annotation.author || 'Digital Signature',
-                subject: annotation.subject || 'Digital Signature',
+                author: annotation.author || "Digital Signature",
+                subject: annotation.subject || "Digital Signature",
                 pageIndex: event.pageIndex,
                 id: newId,
                 created: annotation.created || new Date(),
-                imageSrc: currentStoredData
+                imageSrc: currentStoredData,
               };
 
               // Update stored data to use new ID
@@ -112,7 +111,7 @@ export const HistoryAPIBridge = forwardRef<HistoryAPI>(function HistoryAPIBridge
                   annotationApi.createAnnotation(event.pageIndex, restoredData);
                 }, ANNOTATION_RECREATION_DELAY_MS);
               } catch (error) {
-                console.error('HistoryAPI: Failed to restore annotation:', error);
+                console.error("HistoryAPI: Failed to restore annotation:", error);
               }
             }
           }, ANNOTATION_VERIFICATION_DELAY_MS);
@@ -130,54 +129,57 @@ export const HistoryAPIBridge = forwardRef<HistoryAPI>(function HistoryAPIBridge
     };
   }, [annotationApi, getImageData, storeImageData]);
 
+  useImperativeHandle(
+    ref,
+    () => ({
+      undo: () => {
+        if (historyApi) {
+          historyApi.undo();
+        }
+      },
 
-  useImperativeHandle(ref, () => ({
-    undo: () => {
-      if (historyApi) {
-        historyApi.undo();
-      }
-    },
+      redo: () => {
+        if (historyApi) {
+          historyApi.redo();
+        }
+      },
 
-    redo: () => {
-      if (historyApi) {
-        historyApi.redo();
-      }
-    },
+      canUndo: () => {
+        return historyApi ? historyApi.canUndo() : false;
+      },
 
-    canUndo: () => {
-      return historyApi ? historyApi.canUndo() : false;
-    },
+      canRedo: () => {
+        return historyApi ? historyApi.canRedo() : false;
+      },
 
-    canRedo: () => {
-      return historyApi ? historyApi.canRedo() : false;
-    },
+      isReady: () => !!historyApi && documentReady,
 
-    isReady: () => !!historyApi && documentReady,
+      purgeByMetadata: <T,>(predicate: (metadata: T | undefined) => boolean, topic?: string) => {
+        if (historyApi?.purgeByMetadata) {
+          return historyApi.purgeByMetadata(predicate, topic);
+        }
+        return 0;
+      },
 
-    purgeByMetadata: <T,>(predicate: (metadata: T | undefined) => boolean, topic?: string) => {
-      if (historyApi?.purgeByMetadata) {
-        return historyApi.purgeByMetadata(predicate, topic);
-      }
-      return 0;
-    },
+      subscribe: (listener: () => void) => {
+        if (!historyApi?.onHistoryChange) {
+          return () => {};
+        }
 
-    subscribe: (listener: () => void) => {
-      if (!historyApi?.onHistoryChange) {
+        const wrapped = () => listener();
+        const unsubscribe = historyApi.onHistoryChange(wrapped);
+        listener();
+
+        if (typeof unsubscribe === "function") {
+          return unsubscribe;
+        }
         return () => {};
-      }
-
-      const wrapped = () => listener();
-      const unsubscribe = historyApi.onHistoryChange(wrapped);
-      listener();
-
-      if (typeof unsubscribe === 'function') {
-        return unsubscribe;
-      }
-      return () => {};
-    },
-  }), [historyApi]);
+      },
+    }),
+    [historyApi],
+  );
 
   return null; // This is a bridge component with no UI
 });
 
-HistoryAPIBridge.displayName = 'HistoryAPIBridge';
+HistoryAPIBridge.displayName = "HistoryAPIBridge";
diff --git a/frontend/src/core/components/viewer/LayerSidebar.css b/frontend/src/core/components/viewer/LayerSidebar.css
index 66d0d90862..7f2b791a15 100644
--- a/frontend/src/core/components/viewer/LayerSidebar.css
+++ b/frontend/src/core/components/viewer/LayerSidebar.css
@@ -28,7 +28,9 @@
   padding: 0.375rem 0.65rem;
   border-radius: 0.5rem;
   cursor: pointer;
-  transition: background 0.15s ease, border-color 0.15s ease;
+  transition:
+    background 0.15s ease,
+    border-color 0.15s ease;
   background: transparent;
   border: 1px solid transparent;
   width: 100%;
diff --git a/frontend/src/core/components/viewer/LayerSidebar.tsx b/frontend/src/core/components/viewer/LayerSidebar.tsx
index 0234b49318..c8ca2d1021 100644
--- a/frontend/src/core/components/viewer/LayerSidebar.tsx
+++ b/frontend/src/core/components/viewer/LayerSidebar.tsx
@@ -1,13 +1,13 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
-import { Box, ScrollArea, Text, Checkbox, Stack, Loader, ActionIcon, Tooltip } from '@mantine/core';
-import LayersIcon from '@mui/icons-material/Layers';
-import VisibilityIcon from '@mui/icons-material/Visibility';
-import VisibilityOffIcon from '@mui/icons-material/VisibilityOff';
-import '@app/components/viewer/SidebarBase.css';
-import '@app/components/viewer/LayerSidebar.css';
-import { readPdfLayers, applyOCGVisibilityToPdf, collectLeafIds } from '@app/components/viewer/layerUtils';
+import { useState, useEffect, useCallback, useRef } from "react";
+import { Box, ScrollArea, Text, Checkbox, Stack, Loader, ActionIcon, Tooltip } from "@mantine/core";
+import LayersIcon from "@mui/icons-material/Layers";
+import VisibilityIcon from "@mui/icons-material/Visibility";
+import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
+import "@app/components/viewer/SidebarBase.css";
+import "@app/components/viewer/LayerSidebar.css";
+import { readPdfLayers, applyOCGVisibilityToPdf, collectLeafIds } from "@app/components/viewer/layerUtils";
 
-import type { LayerInfo } from '@app/components/viewer/layerUtils';
+import type { LayerInfo } from "@app/components/viewer/layerUtils";
 export type { LayerInfo };
 
 interface LayerSidebarProps {
@@ -24,9 +24,9 @@ interface LayerSidebarProps {
   onLayersDetected?: (hasLayers: boolean) => void;
 }
 
-const SIDEBAR_WIDTH = '15rem';
+const SIDEBAR_WIDTH = "15rem";
 
-type LoadStatus = 'idle' | 'loading' | 'ready' | 'no-layers' | 'error';
+type LoadStatus = "idle" | "loading" | "ready" | "no-layers" | "error";
 
 export function LayerSidebar({
   visible,
@@ -38,7 +38,7 @@ export function LayerSidebar({
 }: LayerSidebarProps) {
   const [layers, setLayers] = useState<LayerInfo[]>([]);
   const [visibility, setVisibility] = useState<Record<string, boolean>>({});
-  const [status, setStatus] = useState<LoadStatus>('idle');
+  const [status, setStatus] = useState<LoadStatus>("idle");
   const [loadError, setLoadError] = useState<string | null>(null);
   const [isApplying, setIsApplying] = useState(false);
   const [expanded, setExpanded] = useState<Record<string, boolean>>({});
@@ -49,7 +49,7 @@ export function LayerSidebar({
   // Load layers when the document changes
   useEffect(() => {
     if (!file || !documentCacheKey) {
-      setStatus('idle');
+      setStatus("idle");
       setLayers([]);
       setVisibility({});
       loadedKeyRef.current = null;
@@ -60,18 +60,18 @@ export function LayerSidebar({
 
     if (loadedKeyRef.current === documentCacheKey) return;
 
-    setStatus('loading');
+    setStatus("loading");
     setLoadError(null);
     userChangedRef.current = false;
 
     let cancelled = false;
 
     readPdfLayers(file)
-      .then(layerList => {
+      .then((layerList) => {
         if (cancelled) return;
 
         if (layerList.length === 0) {
-          setStatus('no-layers');
+          setStatus("no-layers");
           setLayers([]);
           setVisibility({});
           loadedKeyRef.current = documentCacheKey;
@@ -94,14 +94,14 @@ export function LayerSidebar({
 
         setLayers(layerList);
         setVisibility(visMap);
-        setStatus('ready');
+        setStatus("ready");
         loadedKeyRef.current = documentCacheKey;
         onLayersDetected?.(true);
       })
-      .catch(err => {
+      .catch((err) => {
         if (cancelled) return;
-        setStatus('error');
-        setLoadError(err instanceof Error ? err.message : 'Failed to read PDF layers');
+        setStatus("error");
+        setLoadError(err instanceof Error ? err.message : "Failed to read PDF layers");
         onLayersDetected?.(false);
       });
 
@@ -137,11 +137,11 @@ export function LayerSidebar({
 
         const arrayBuffer = await file.arrayBuffer();
         const modifiedBytes = await applyOCGVisibilityToPdf(arrayBuffer, nameVisibility);
-        const blob = new Blob([new Uint8Array(modifiedBytes)], { type: 'application/pdf' });
+        const blob = new Blob([new Uint8Array(modifiedBytes)], { type: "application/pdf" });
 
         await onApplyLayers(blob);
       } catch (err) {
-        console.error('[LayerSidebar] Failed to apply layer changes:', err);
+        console.error("[LayerSidebar] Failed to apply layer changes:", err);
       } finally {
         setIsApplying(false);
         userChangedRef.current = false;
@@ -153,12 +153,12 @@ export function LayerSidebar({
 
   const toggleLayerVisibility = useCallback((id: string) => {
     userChangedRef.current = true;
-    setVisibility(prev => ({ ...prev, [id]: !prev[id] }));
+    setVisibility((prev) => ({ ...prev, [id]: !prev[id] }));
   }, []);
 
   const showAll = useCallback(() => {
     userChangedRef.current = true;
-    setVisibility(prev => {
+    setVisibility((prev) => {
       const updated: Record<string, boolean> = {};
       for (const id of Object.keys(prev)) {
         updated[id] = true;
@@ -169,7 +169,7 @@ export function LayerSidebar({
 
   const hideAll = useCallback(() => {
     userChangedRef.current = true;
-    setVisibility(prev => {
+    setVisibility((prev) => {
       const updated: Record<string, boolean> = {};
       for (const id of Object.keys(prev)) {
         updated[id] = false;
@@ -179,7 +179,7 @@ export function LayerSidebar({
   }, []);
 
   const toggleExpanded = useCallback((id: string) => {
-    setExpanded(prev => ({ ...prev, [id]: !(prev[id] ?? true) }));
+    setExpanded((prev) => ({ ...prev, [id]: !(prev[id] ?? true) }));
   }, []);
 
   const renderLayer = (layer: LayerInfo & { depth: number }) => {
@@ -188,17 +188,17 @@ export function LayerSidebar({
     const isLeaf = !hasChildren;
 
     const isVisible = isLeaf
-      ? visibility[layer.id] ?? layer.visible
-      : collectLeafIds(layer.children ?? []).every(id => visibility[id] ?? true);
+      ? (visibility[layer.id] ?? layer.visible)
+      : collectLeafIds(layer.children ?? []).every((id) => visibility[id] ?? true);
 
     return (
       <div
         key={layer.id}
         className="layer-item-wrapper"
-        style={{ marginLeft: layer.depth > 0 ? `${layer.depth * 0.875}rem` : '0' }}
+        style={{ marginLeft: layer.depth > 0 ? `${layer.depth * 0.875}rem` : "0" }}
       >
         <div
-          className={`layer-item ${!isVisible ? 'layer-item--hidden' : ''}`}
+          className={`layer-item ${!isVisible ? "layer-item--hidden" : ""}`}
           onClick={() => {
             if (hasChildren) {
               toggleExpanded(layer.id);
@@ -208,8 +208,8 @@ export function LayerSidebar({
           }}
           role="button"
           tabIndex={0}
-          onKeyDown={e => {
-            if (e.key === 'Enter' || e.key === ' ') {
+          onKeyDown={(e) => {
+            if (e.key === "Enter" || e.key === " ") {
               e.preventDefault();
               if (hasChildren) {
                 toggleExpanded(layer.id);
@@ -222,7 +222,7 @@ export function LayerSidebar({
           {hasChildren ? (
             <span
               className="layer-item__expand-btn"
-              onClick={e => {
+              onClick={(e) => {
                 e.stopPropagation();
                 toggleExpanded(layer.id);
               }}
@@ -246,26 +246,19 @@ export function LayerSidebar({
               size="xs"
               checked={visibility[layer.id] ?? layer.visible}
               onChange={() => toggleLayerVisibility(layer.id)}
-              onClick={e => e.stopPropagation()}
+              onClick={(e) => e.stopPropagation()}
               style={{ flexShrink: 0 }}
             />
           )}
 
-          <Tooltip
-            label={layer.name}
-            position="left"
-            withinPortal
-            disabled={layer.name.length < 20}
-          >
-            <span className="layer-item__label">
-              {layer.name}
-            </span>
+          <Tooltip label={layer.name} position="left" withinPortal disabled={layer.name.length < 20}>
+            <span className="layer-item__label">{layer.name}</span>
           </Tooltip>
         </div>
 
         {hasChildren && isExpanded && (
           <div className="layer-item__children">
-            {(layer.children ?? []).map(child => renderLayer({ ...child, depth: 0 }))}
+            {(layer.children ?? []).map((child) => renderLayer({ ...child, depth: 0 }))}
           </div>
         )}
       </div>
@@ -275,14 +268,14 @@ export function LayerSidebar({
   if (!visible) return null;
 
   const leafIds = collectLeafIds(layers);
-  const allVisible = leafIds.every(id => visibility[id] !== false);
-  const allHidden = leafIds.every(id => visibility[id] === false);
+  const allVisible = leafIds.every((id) => visibility[id] !== false);
+  const allHidden = leafIds.every((id) => visibility[id] === false);
 
   return (
     <Box
       className="sidebar-base layer-sidebar"
       style={{
-        position: 'fixed',
+        position: "fixed",
         right: `${rightOffset}rem`,
         top: 0,
         bottom: 0,
@@ -302,7 +295,7 @@ export function LayerSidebar({
           {isApplying && <Loader size="xs" type="dots" />}
         </div>
 
-        {status === 'ready' && leafIds.length > 0 && (
+        {status === "ready" && leafIds.length > 0 && (
           <div className="layer-sidebar__header-actions">
             <ActionIcon
               variant="subtle"
@@ -312,7 +305,7 @@ export function LayerSidebar({
               aria-label="Show all layers"
               title="Show all"
             >
-              <VisibilityIcon sx={{ fontSize: '1rem' }} />
+              <VisibilityIcon sx={{ fontSize: "1rem" }} />
             </ActionIcon>
             <ActionIcon
               variant="subtle"
@@ -322,7 +315,7 @@ export function LayerSidebar({
               aria-label="Hide all layers"
               title="Hide all"
             >
-              <VisibilityOffIcon sx={{ fontSize: '1rem' }} />
+              <VisibilityOffIcon sx={{ fontSize: "1rem" }} />
             </ActionIcon>
           </div>
         )}
@@ -331,7 +324,7 @@ export function LayerSidebar({
       {/* Content */}
       <ScrollArea style={{ flex: 1 }}>
         <Box p="sm" className="sidebar-base__content">
-          {status === 'idle' && (
+          {status === "idle" && (
             <div className="sidebar-base__empty-state">
               <Text size="sm" c="dimmed" ta="center">
                 Open a PDF to view its layers.
@@ -339,7 +332,7 @@ export function LayerSidebar({
             </div>
           )}
 
-          {status === 'loading' && (
+          {status === "loading" && (
             <Stack gap="md" align="center" c="dimmed" py="xl" className="sidebar-base__loading">
               <Loader size="md" type="dots" />
               <Text size="sm" ta="center">
@@ -348,15 +341,15 @@ export function LayerSidebar({
             </Stack>
           )}
 
-          {status === 'error' && (
+          {status === "error" && (
             <div className="sidebar-base__error">
               <Text size="sm" c="red" ta="center">
-                {loadError ?? 'Failed to load layers.'}
+                {loadError ?? "Failed to load layers."}
               </Text>
             </div>
           )}
 
-          {status === 'no-layers' && (
+          {status === "no-layers" && (
             <div className="sidebar-base__empty-state">
               <Text size="sm" c="dimmed" ta="center">
                 This document has no layers.
@@ -364,14 +357,11 @@ export function LayerSidebar({
             </div>
           )}
 
-          {status === 'ready' && layers.length > 0 && (
-            <div className="layer-list">
-              {layers.map(layer => renderLayer({ ...layer, depth: 0 }))}
-            </div>
+          {status === "ready" && layers.length > 0 && (
+            <div className="layer-list">{layers.map((layer) => renderLayer({ ...layer, depth: 0 }))}</div>
           )}
         </Box>
       </ScrollArea>
-
     </Box>
   );
 }
diff --git a/frontend/src/core/components/viewer/LinkLayer.tsx b/frontend/src/core/components/viewer/LinkLayer.tsx
index 34e12f71d9..9a7c54ac5f 100644
--- a/frontend/src/core/components/viewer/LinkLayer.tsx
+++ b/frontend/src/core/components/viewer/LinkLayer.tsx
@@ -1,8 +1,8 @@
-import React, { useCallback, useState, useMemo, useRef } from 'react';
-import { useDocumentState } from '@embedpdf/core/react';
-import { useScroll } from '@embedpdf/plugin-scroll/react';
-import { useAnnotation } from '@embedpdf/plugin-annotation/react';
-import { PdfAnnotationSubtype, PdfActionType, type PdfLinkAnnoObject } from '@embedpdf/models';
+import React, { useCallback, useState, useMemo, useRef } from "react";
+import { useDocumentState } from "@embedpdf/core/react";
+import { useScroll } from "@embedpdf/plugin-scroll/react";
+import { useAnnotation } from "@embedpdf/plugin-annotation/react";
+import { PdfAnnotationSubtype, PdfActionType, type PdfLinkAnnoObject } from "@embedpdf/models";
 
 // ---------------------------------------------------------------------------
 // Inline SVG icons (thin-stroke, modern)
@@ -41,13 +41,7 @@ const PageIcon: React.FC<{ size?: number }> = ({ size = 12 }) => (
       strokeLinecap="round"
       strokeLinejoin="round"
     />
-    <path
-      d="M6 2.5v2h2"
-      stroke="currentColor"
-      strokeWidth="1.2"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-    />
+    <path d="M6 2.5v2h2" stroke="currentColor" strokeWidth="1.2" strokeLinecap="round" strokeLinejoin="round" />
   </svg>
 );
 
@@ -58,32 +52,32 @@ const PageIcon: React.FC<{ size?: number }> = ({ size = 12 }) => (
 function truncateUrl(url: string, maxLen = 32): string {
   try {
     const u = new URL(url);
-    const display = u.hostname + (u.pathname !== '/' ? u.pathname : '');
-    return display.length > maxLen ? display.slice(0, maxLen) + '\u2026' : display;
+    const display = u.hostname + (u.pathname !== "/" ? u.pathname : "");
+    return display.length > maxLen ? display.slice(0, maxLen) + "\u2026" : display;
   } catch {
-    return url.length > maxLen ? url.slice(0, maxLen) + '\u2026' : url;
+    return url.length > maxLen ? url.slice(0, maxLen) + "\u2026" : url;
   }
 }
 
 function getLinkLabel(annotationLink: PdfLinkAnnoObject): string {
-  if (!annotationLink.target) return 'Open Link';
+  if (!annotationLink.target) return "Open Link";
 
-  if (annotationLink.target.type === 'action') {
+  if (annotationLink.target.type === "action") {
     const action = annotationLink.target.action;
     if (action.type === PdfActionType.URI) return truncateUrl(action.uri);
     if (action.type === PdfActionType.Goto) return `Page ${action.destination.pageIndex + 1}`;
     if (action.type === PdfActionType.RemoteGoto) return `Page ${action.destination.pageIndex + 1}`;
-  } else if (annotationLink.target.type === 'destination') {
+  } else if (annotationLink.target.type === "destination") {
     return `Page ${annotationLink.target.destination.pageIndex + 1}`;
   }
 
-  return 'Open Link';
+  return "Open Link";
 }
 
 function isInternalLink(annotationLink: PdfLinkAnnoObject): boolean {
   if (!annotationLink.target) return false;
-  if (annotationLink.target.type === 'destination') return true;
-  if (annotationLink.target.type === 'action') {
+  if (annotationLink.target.type === "destination") return true;
+  if (annotationLink.target.type === "action") {
     const { type } = annotationLink.target.action;
     return type === PdfActionType.Goto || type === PdfActionType.RemoteGoto;
   }
@@ -119,7 +113,7 @@ const LinkToolbar: React.FC<LinkToolbarProps> = React.memo(
 
     return (
       <div
-        className={`pdf-link-toolbar${flipped ? ' pdf-link-toolbar--below' : ''}`}
+        className={`pdf-link-toolbar${flipped ? " pdf-link-toolbar--below" : ""}`}
         style={{ left: `${centerX}px`, top: `${topY}px` }}
         onMouseEnter={onMouseEnter}
         onMouseLeave={onMouseLeave}
@@ -148,7 +142,11 @@ const LinkToolbar: React.FC<LinkToolbarProps> = React.memo(
             e.stopPropagation();
             onNavigate(annotationLink);
           }}
-          aria-label={internal ? `Go to page ${annotationLink.target?.type === 'destination' ? annotationLink.target.destination.pageIndex + 1 : ''}` : 'Open link'}
+          aria-label={
+            internal
+              ? `Go to page ${annotationLink.target?.type === "destination" ? annotationLink.target.destination.pageIndex + 1 : ""}`
+              : "Open link"
+          }
           title={label}
         >
           {internal ? <PageIcon /> : <ExternalLinkIcon />}
@@ -159,7 +157,7 @@ const LinkToolbar: React.FC<LinkToolbarProps> = React.memo(
   },
 );
 
-LinkToolbar.displayName = 'LinkToolbar';
+LinkToolbar.displayName = "LinkToolbar";
 
 // ---------------------------------------------------------------------------
 // LinkLayer
@@ -185,11 +183,7 @@ export const LinkLayer: React.FC<LinkLayerProps> = ({ documentId, pageIndex }) =
     const result: PdfLinkAnnoObject[] = [];
     for (const uid of uids) {
       const ta = state.byUid[uid];
-      if (
-        ta &&
-        ta.commitState !== 'deleted' &&
-        ta.object.type === PdfAnnotationSubtype.LINK
-      ) {
+      if (ta && ta.commitState !== "deleted" && ta.object.type === PdfAnnotationSubtype.LINK) {
         const annotationLink = ta.object as PdfLinkAnnoObject;
         if (annotationLink.rect.size.width > 0 && annotationLink.rect.size.height > 0) {
           result.push(annotationLink);
@@ -243,34 +237,34 @@ export const LinkLayer: React.FC<LinkLayerProps> = ({ documentId, pageIndex }) =
         return;
       }
 
-      if (annotationLink.target.type === 'destination' && scroll) {
+      if (annotationLink.target.type === "destination" && scroll) {
         scroll.scrollToPage({
           pageNumber: annotationLink.target.destination.pageIndex + 1,
-          behavior: 'smooth',
+          behavior: "smooth",
         });
-      } else if (annotationLink.target.type === 'action') {
+      } else if (annotationLink.target.type === "action") {
         const action = annotationLink.target.action;
         if (action.type === PdfActionType.Goto && scroll) {
           scroll.scrollToPage({
             pageNumber: action.destination.pageIndex + 1,
-            behavior: 'smooth',
+            behavior: "smooth",
           });
         } else if (action.type === PdfActionType.RemoteGoto && scroll) {
           scroll.scrollToPage({
             pageNumber: action.destination.pageIndex + 1,
-            behavior: 'smooth',
+            behavior: "smooth",
           });
         } else if (action.type === PdfActionType.URI) {
           const uri = action.uri;
           try {
             const url = new URL(uri, window.location.href);
-            if (['http:', 'https:', 'mailto:'].includes(url.protocol)) {
-              window.open(uri, '_blank', 'noopener,noreferrer');
+            if (["http:", "https:", "mailto:"].includes(url.protocol)) {
+              window.open(uri, "_blank", "noopener,noreferrer");
             } else {
-              console.warn('[LinkLayer] Blocked unsafe URL protocol:', url.protocol);
+              console.warn("[LinkLayer] Blocked unsafe URL protocol:", url.protocol);
             }
           } catch {
-            window.open(uri, '_blank', 'noopener,noreferrer');
+            window.open(uri, "_blank", "noopener,noreferrer");
           }
         }
       }
@@ -292,10 +286,7 @@ export const LinkLayer: React.FC<LinkLayerProps> = ({ documentId, pageIndex }) =
   if (linkAnnotations.length === 0) return null;
 
   return (
-    <div
-      className="absolute inset-0"
-      style={{ pointerEvents: 'none', zIndex: 10 }}
-    >
+    <div className="absolute inset-0" style={{ pointerEvents: "none", zIndex: 10 }}>
       {linkAnnotations.map((annotationLink) => {
         const isHovered = hoveredLinkId === annotationLink.id;
         const left = annotationLink.rect.origin.x * scale;
@@ -319,14 +310,14 @@ export const LinkLayer: React.FC<LinkLayerProps> = ({ documentId, pageIndex }) =
               onMouseDown={(e) => e.stopPropagation()}
               onMouseEnter={() => handleLinkMouseEnter(annotationLink.id)}
               onMouseLeave={handleLinkMouseLeave}
-              className={`pdf-link-overlay${isHovered ? ' pdf-link-overlay--active' : ''}`}
+              className={`pdf-link-overlay${isHovered ? " pdf-link-overlay--active" : ""}`}
               style={{
                 left: `${left}px`,
                 top: `${top}px`,
                 width: `${width}px`,
                 height: `${height}px`,
-                minWidth: '6px',
-                minHeight: '6px',
+                minWidth: "6px",
+                minHeight: "6px",
               }}
               role="link"
               tabIndex={0}
diff --git a/frontend/src/core/components/viewer/LocalEmbedPDF.tsx b/frontend/src/core/components/viewer/LocalEmbedPDF.tsx
index db3227d3b2..d67f4451e4 100644
--- a/frontend/src/core/components/viewer/LocalEmbedPDF.tsx
+++ b/frontend/src/core/components/viewer/LocalEmbedPDF.tsx
@@ -1,72 +1,76 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { createPluginRegistration } from '@embedpdf/core';
-import type { PluginRegistry } from '@embedpdf/core';
-import { EmbedPDF } from '@embedpdf/core/react';
-import { usePdfiumEngine } from '@embedpdf/engines/react';
-import { PrivateContent } from '@app/components/shared/PrivateContent';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
+import React, { useEffect, useMemo, useState } from "react";
+import { createPluginRegistration } from "@embedpdf/core";
+import type { PluginRegistry } from "@embedpdf/core";
+import { EmbedPDF } from "@embedpdf/core/react";
+import { usePdfiumEngine } from "@embedpdf/engines/react";
+import { PrivateContent } from "@app/components/shared/PrivateContent";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
 
 // Import the essential plugins
-import { Viewport, ViewportPluginPackage } from '@embedpdf/plugin-viewport/react';
-import { Scroller, ScrollPluginPackage } from '@embedpdf/plugin-scroll/react';
-import { DocumentManagerPluginPackage } from '@embedpdf/plugin-document-manager/react';
-import { RenderPluginPackage } from '@embedpdf/plugin-render/react';
-import { ZoomPluginPackage, ZoomMode } from '@embedpdf/plugin-zoom/react';
-import { InteractionManagerPluginPackage, PagePointerProvider, GlobalPointerProvider } from '@embedpdf/plugin-interaction-manager/react';
-import { SelectionLayer, SelectionPluginPackage } from '@embedpdf/plugin-selection/react';
-import { TilingLayer, TilingPluginPackage } from '@embedpdf/plugin-tiling/react';
-import { PanPluginPackage } from '@embedpdf/plugin-pan/react';
-import { SpreadPluginPackage, SpreadMode } from '@embedpdf/plugin-spread/react';
-import { SearchPluginPackage } from '@embedpdf/plugin-search/react';
-import { ThumbnailPluginPackage } from '@embedpdf/plugin-thumbnail/react';
-import { RotatePluginPackage, Rotate } from '@embedpdf/plugin-rotate/react';
-import { ExportPluginPackage } from '@embedpdf/plugin-export/react';
-import { BookmarkPluginPackage } from '@embedpdf/plugin-bookmark/react';
-import { AttachmentPluginPackage } from '@embedpdf/plugin-attachment/react';
-import { PrintPluginPackage } from '@embedpdf/plugin-print/react';
-import { HistoryPluginPackage } from '@embedpdf/plugin-history/react';
-import { AnnotationLayer, AnnotationPluginPackage } from '@embedpdf/plugin-annotation/react';
-import type { AnnotationTool, AnnotationEvent } from '@embedpdf/plugin-annotation';
-import { PdfAnnotationSubtype } from '@embedpdf/models';
-import type { PdfAnnotationObject, Rect } from '@embedpdf/models';
-import { RedactionPluginPackage, RedactionLayer } from '@embedpdf/plugin-redaction/react';
-import { CustomSearchLayer } from '@app/components/viewer/CustomSearchLayer';
-import { ZoomAPIBridge } from '@app/components/viewer/ZoomAPIBridge';
-import ToolLoadingFallback from '@app/components/tools/ToolLoadingFallback';
-import { Center, Stack, Text } from '@mantine/core';
-import { ScrollAPIBridge } from '@app/components/viewer/ScrollAPIBridge';
-import { SelectionAPIBridge } from '@app/components/viewer/SelectionAPIBridge';
-import { PanAPIBridge } from '@app/components/viewer/PanAPIBridge';
-import { SpreadAPIBridge } from '@app/components/viewer/SpreadAPIBridge';
-import { SearchAPIBridge } from '@app/components/viewer/SearchAPIBridge';
-import { ThumbnailAPIBridge } from '@app/components/viewer/ThumbnailAPIBridge';
-import { RotateAPIBridge } from '@app/components/viewer/RotateAPIBridge';
-import { SignatureAPIBridge } from '@app/components/viewer/SignatureAPIBridge';
-import { AnnotationAPIBridge } from '@app/components/viewer/AnnotationAPIBridge';
-import { HistoryAPIBridge } from '@app/components/viewer/HistoryAPIBridge';
-import type { SignatureAPI, AnnotationAPI, HistoryAPI } from '@app/components/viewer/viewerTypes';
-import { ExportAPIBridge } from '@app/components/viewer/ExportAPIBridge';
-import { BookmarkAPIBridge } from '@app/components/viewer/BookmarkAPIBridge';
-import { AttachmentAPIBridge } from '@app/components/viewer/AttachmentAPIBridge';
-import { PrintAPIBridge } from '@app/components/viewer/PrintAPIBridge';
-import { isPdfFile } from '@app/utils/fileUtils';
-import { useTranslation } from 'react-i18next';
-import { LinkLayer } from '@app/components/viewer/LinkLayer';
-import { TextSelectionHandler } from '@app/components/viewer/TextSelectionHandler';
-import { RedactionSelectionMenu } from '@app/components/viewer/RedactionSelectionMenu';
-import { AnnotationSelectionMenu } from '@app/components/viewer/AnnotationSelectionMenu';
-import { RedactionPendingTracker, RedactionPendingTrackerAPI } from '@app/components/viewer/RedactionPendingTracker';
-import { RedactionAPIBridge } from '@app/components/viewer/RedactionAPIBridge';
-import { DocumentPermissionsAPIBridge } from '@app/components/viewer/DocumentPermissionsAPIBridge';
-import { DocumentReadyWrapper } from '@app/components/viewer/DocumentReadyWrapper';
-import { ActiveDocumentProvider } from '@app/components/viewer/ActiveDocumentContext';
-import { absoluteWithBasePath } from '@app/constants/app';
-import { FormFieldOverlay } from '@app/tools/formFill/FormFieldOverlay';
-import { ButtonAppearanceOverlay } from '@app/tools/formFill/ButtonAppearanceOverlay';
-import SignatureFieldOverlay from '@app/components/viewer/SignatureFieldOverlay';
-import { CommentsSidebar } from '@app/components/viewer/CommentsSidebar';
-import { CommentAuthorProvider } from '@app/contexts/CommentAuthorContext';
-import { accountService } from '@app/services/accountService';
+import { Viewport, ViewportPluginPackage } from "@embedpdf/plugin-viewport/react";
+import { Scroller, ScrollPluginPackage } from "@embedpdf/plugin-scroll/react";
+import { DocumentManagerPluginPackage } from "@embedpdf/plugin-document-manager/react";
+import { RenderPluginPackage } from "@embedpdf/plugin-render/react";
+import { ZoomPluginPackage, ZoomMode } from "@embedpdf/plugin-zoom/react";
+import {
+  InteractionManagerPluginPackage,
+  PagePointerProvider,
+  GlobalPointerProvider,
+} from "@embedpdf/plugin-interaction-manager/react";
+import { SelectionLayer, SelectionPluginPackage } from "@embedpdf/plugin-selection/react";
+import { TilingLayer, TilingPluginPackage } from "@embedpdf/plugin-tiling/react";
+import { PanPluginPackage } from "@embedpdf/plugin-pan/react";
+import { SpreadPluginPackage, SpreadMode } from "@embedpdf/plugin-spread/react";
+import { SearchPluginPackage } from "@embedpdf/plugin-search/react";
+import { ThumbnailPluginPackage } from "@embedpdf/plugin-thumbnail/react";
+import { RotatePluginPackage, Rotate } from "@embedpdf/plugin-rotate/react";
+import { ExportPluginPackage } from "@embedpdf/plugin-export/react";
+import { BookmarkPluginPackage } from "@embedpdf/plugin-bookmark/react";
+import { AttachmentPluginPackage } from "@embedpdf/plugin-attachment/react";
+import { PrintPluginPackage } from "@embedpdf/plugin-print/react";
+import { HistoryPluginPackage } from "@embedpdf/plugin-history/react";
+import { AnnotationLayer, AnnotationPluginPackage } from "@embedpdf/plugin-annotation/react";
+import type { AnnotationTool, AnnotationEvent } from "@embedpdf/plugin-annotation";
+import { PdfAnnotationSubtype } from "@embedpdf/models";
+import type { PdfAnnotationObject, Rect } from "@embedpdf/models";
+import { RedactionPluginPackage, RedactionLayer } from "@embedpdf/plugin-redaction/react";
+import { CustomSearchLayer } from "@app/components/viewer/CustomSearchLayer";
+import { ZoomAPIBridge } from "@app/components/viewer/ZoomAPIBridge";
+import ToolLoadingFallback from "@app/components/tools/ToolLoadingFallback";
+import { Center, Stack, Text } from "@mantine/core";
+import { ScrollAPIBridge } from "@app/components/viewer/ScrollAPIBridge";
+import { SelectionAPIBridge } from "@app/components/viewer/SelectionAPIBridge";
+import { PanAPIBridge } from "@app/components/viewer/PanAPIBridge";
+import { SpreadAPIBridge } from "@app/components/viewer/SpreadAPIBridge";
+import { SearchAPIBridge } from "@app/components/viewer/SearchAPIBridge";
+import { ThumbnailAPIBridge } from "@app/components/viewer/ThumbnailAPIBridge";
+import { RotateAPIBridge } from "@app/components/viewer/RotateAPIBridge";
+import { SignatureAPIBridge } from "@app/components/viewer/SignatureAPIBridge";
+import { AnnotationAPIBridge } from "@app/components/viewer/AnnotationAPIBridge";
+import { HistoryAPIBridge } from "@app/components/viewer/HistoryAPIBridge";
+import type { SignatureAPI, AnnotationAPI, HistoryAPI } from "@app/components/viewer/viewerTypes";
+import { ExportAPIBridge } from "@app/components/viewer/ExportAPIBridge";
+import { BookmarkAPIBridge } from "@app/components/viewer/BookmarkAPIBridge";
+import { AttachmentAPIBridge } from "@app/components/viewer/AttachmentAPIBridge";
+import { PrintAPIBridge } from "@app/components/viewer/PrintAPIBridge";
+import { isPdfFile } from "@app/utils/fileUtils";
+import { useTranslation } from "react-i18next";
+import { LinkLayer } from "@app/components/viewer/LinkLayer";
+import { TextSelectionHandler } from "@app/components/viewer/TextSelectionHandler";
+import { RedactionSelectionMenu } from "@app/components/viewer/RedactionSelectionMenu";
+import { AnnotationSelectionMenu } from "@app/components/viewer/AnnotationSelectionMenu";
+import { RedactionPendingTracker, RedactionPendingTrackerAPI } from "@app/components/viewer/RedactionPendingTracker";
+import { RedactionAPIBridge } from "@app/components/viewer/RedactionAPIBridge";
+import { DocumentPermissionsAPIBridge } from "@app/components/viewer/DocumentPermissionsAPIBridge";
+import { DocumentReadyWrapper } from "@app/components/viewer/DocumentReadyWrapper";
+import { ActiveDocumentProvider } from "@app/components/viewer/ActiveDocumentContext";
+import { absoluteWithBasePath } from "@app/constants/app";
+import { FormFieldOverlay } from "@app/tools/formFill/FormFieldOverlay";
+import { ButtonAppearanceOverlay } from "@app/tools/formFill/ButtonAppearanceOverlay";
+import SignatureFieldOverlay from "@app/components/viewer/SignatureFieldOverlay";
+import { CommentsSidebar } from "@app/components/viewer/CommentsSidebar";
+import { CommentAuthorProvider } from "@app/contexts/CommentAuthorContext";
+import { accountService } from "@app/services/accountService";
 
 interface LocalEmbedPDFProps {
   file?: File | Blob;
@@ -90,21 +94,45 @@ interface LocalEmbedPDFProps {
   /** When true, blocks the general ink/pen annotation tool (sign tool context). */
   isSignMode?: boolean;
   /** Controls CSS filter applied only to rendered PDF canvas tiles */
-  pdfRenderMode?: 'normal' | 'dark' | 'sepia';
+  pdfRenderMode?: "normal" | "dark" | "sepia";
 }
 
-export function LocalEmbedPDF({ file, url, fileName, enableAnnotations = false, enableRedaction = false, enableFormFill = false, isManualRedactionMode = false, showBakedAnnotations = true, onSignatureAdded, signatureApiRef, annotationApiRef, historyApiRef, redactionTrackerRef, fileId, isCommentsSidebarVisible = false, commentsSidebarRightOffset = '0rem', isSignMode = false, pdfRenderMode = 'normal' }: LocalEmbedPDFProps) {
+export function LocalEmbedPDF({
+  file,
+  url,
+  fileName,
+  enableAnnotations = false,
+  enableRedaction = false,
+  enableFormFill = false,
+  isManualRedactionMode = false,
+  showBakedAnnotations = true,
+  onSignatureAdded,
+  signatureApiRef,
+  annotationApiRef,
+  historyApiRef,
+  redactionTrackerRef,
+  fileId,
+  isCommentsSidebarVisible = false,
+  commentsSidebarRightOffset = "0rem",
+  isSignMode = false,
+  pdfRenderMode = "normal",
+}: LocalEmbedPDFProps) {
   const { t } = useTranslation();
   const { config } = useAppConfig();
   const [pdfUrl, setPdfUrl] = useState<string | null>(null);
-  const [, setAnnotations] = useState<Array<{id: string, pageIndex: number, rect: Rect}>>([]);
-  const [commentAuthorName, setCommentAuthorName] = useState<string>('Guest');
+  const [, setAnnotations] = useState<Array<{ id: string; pageIndex: number; rect: Rect }>>([]);
+  const [commentAuthorName, setCommentAuthorName] = useState<string>("Guest");
 
   useEffect(() => {
     if (!config?.enableLogin) return;
-    accountService.getAccountData().then((data) => {
-      if (data?.username) setCommentAuthorName(data.username);
-    }).catch(() => {/* not logged in or security disabled */});
+    accountService
+      .getAccountData()
+      .then((data) => {
+        if (data?.username) setCommentAuthorName(data.username);
+      })
+      .catch(() => {
+        /* not logged in or security disabled */
+      });
   }, [config?.enableLogin]);
 
   // Convert File to URL if needed
@@ -127,22 +155,24 @@ export function LocalEmbedPDF({ file, url, fileName, enableAnnotations = false,
     const viewportGap = rootFontSize * 3.5;
 
     // Determine export filename - use provided fileName, or extract from file/url
-    let exportFileName = 'document.pdf';
+    let exportFileName = "document.pdf";
     if (fileName) {
       exportFileName = fileName;
-    } else if (file && 'name' in file) {
+    } else if (file && "name" in file) {
       exportFileName = file.name;
     } else if (url) {
-      const urlPath = url.split('/').pop() || 'document.pdf';
-      exportFileName = urlPath.split('?')[0]; // Remove query params
+      const urlPath = url.split("/").pop() || "document.pdf";
+      exportFileName = urlPath.split("?")[0]; // Remove query params
     }
 
     return [
       createPluginRegistration(DocumentManagerPluginPackage, {
-        initialDocuments: [{
-          url: pdfUrl,
-          name: exportFileName,
-        }],
+        initialDocuments: [
+          {
+            url: pdfUrl,
+            name: exportFileName,
+          },
+        ],
       }),
       createPluginRegistration(ViewportPluginPackage, {
         viewportGap,
@@ -169,7 +199,7 @@ export function LocalEmbedPDF({ file, url, fileName, enableAnnotations = false,
       // Register annotation plugin (depends on InteractionManager, Selection, History)
       // Always register for reading existing annotations like links
       createPluginRegistration(AnnotationPluginPackage, {
-        annotationAuthor: 'Digital Signature',
+        annotationAuthor: "Digital Signature",
         autoCommit: true,
         deactivateToolAfterCreate: false,
         selectAfterCreate: true,
@@ -184,7 +214,7 @@ export function LocalEmbedPDF({ file, url, fileName, enableAnnotations = false,
 
       // Register pan plugin (depends on Viewport, InteractionManager)
       createPluginRegistration(PanPluginPackage, {
-        defaultMode: 'mobile', // Try mobile mode which might be more permissive
+        defaultMode: "mobile", // Try mobile mode which might be more permissive
       }),
       // Register pan plugin (depends on Viewport, InteractionManager) - keep disabled to prevent drag panning
       createPluginRegistration(PanPluginPackage, {}),
@@ -235,16 +265,15 @@ export function LocalEmbedPDF({ file, url, fileName, enableAnnotations = false,
 
   // Initialize the engine with the React hook - use local WASM for offline support
   const { engine, isLoading, error } = usePdfiumEngine({
-    wasmUrl: absoluteWithBasePath('/pdfium/pdfium.wasm'),
+    wasmUrl: absoluteWithBasePath("/pdfium/pdfium.wasm"),
   });
 
-
   // Early return if no file or URL provided
   if (!file && !url) {
     return (
       <Center h="100%" w="100%">
         <Stack align="center" gap="md">
-          <div style={{ fontSize: '24px' }}>📄</div>
+          <div style={{ fontSize: "24px" }}>📄</div>
           <Text c="dimmed" size="sm">
             No PDF provided
           </Text>
@@ -255,19 +284,19 @@ export function LocalEmbedPDF({ file, url, fileName, enableAnnotations = false,
 
   // Check if the file is actually a PDF
   if (file && !isPdfFile(file)) {
-    const fileName = 'name' in file ? file.name : t('viewer.unknownFile');
+    const fileName = "name" in file ? file.name : t("viewer.unknownFile");
     return (
       <Center h="100%" w="100%">
         <Stack align="center" gap="md">
-          <div style={{ fontSize: '48px' }}>📄</div>
+          <div style={{ fontSize: "48px" }}>📄</div>
           <Text size="lg" fw={600} c="dimmed">
-            {t('viewer.cannotPreviewFile')}
+            {t("viewer.cannotPreviewFile")}
           </Text>
-          <Text c="dimmed" size="sm" style={{ textAlign: 'center', maxWidth: '400px' }}>
-            {t('viewer.onlyPdfSupported')}
+          <Text c="dimmed" size="sm" style={{ textAlign: "center", maxWidth: "400px" }}>
+            {t("viewer.onlyPdfSupported")}
           </Text>
           <PrivateContent>
-            <Text c="dimmed" size="xs" style={{ fontFamily: 'monospace' }}>
+            <Text c="dimmed" size="xs" style={{ fontFamily: "monospace" }}>
               {fileName}
             </Text>
           </PrivateContent>
@@ -284,8 +313,8 @@ export function LocalEmbedPDF({ file, url, fileName, enableAnnotations = false,
     return (
       <Center h="100%" w="100%">
         <Stack align="center" gap="md">
-          <div style={{ fontSize: '24px' }}>❌</div>
-          <Text c="red" size="sm" style={{ textAlign: 'center' }}>
+          <div style={{ fontSize: "24px" }}>❌</div>
+          <Text c="red" size="sm" style={{ textAlign: "center" }}>
             Error loading PDF engine: {error.message}
           </Text>
         </Stack>
@@ -298,596 +327,615 @@ export function LocalEmbedPDF({ file, url, fileName, enableAnnotations = false,
     <PrivateContent>
       <div
         style={{
-          height: '100%',
-          width: '100%',
-          position: 'relative',
+          height: "100%",
+          width: "100%",
+          position: "relative",
           flex: 1,
           minHeight: 0,
           minWidth: 0,
-      }}>
-      <EmbedPDF
-        engine={engine}
-        plugins={plugins}
-        onInitialized={async (registry: PluginRegistry) => {
-          // v2.0: Use registry.getPlugin() to access plugin APIs
-          const annotationPlugin = registry.getPlugin('annotation');
-          if (!annotationPlugin || !annotationPlugin.provides) return;
-
-          const annotationApi = annotationPlugin.provides();
-          if (!annotationApi) return;
-
-          if (enableAnnotations) {
-            // LooseAnnotationTool bypasses strict Partial<T> defaults typing from the library —
-            // EmbedPDF accepts extra runtime properties (borderWidth, textColor, finishOnDoubleClick,
-            // etc.) that aren't reflected in the TypeScript model types.
-            type LooseAnnotationTool = {
-              id: string;
-              name: string;
-              interaction?: { exclusive: boolean; cursor: string; textSelection?: boolean; isRotatable?: boolean };
-              matchScore?: (annotation: PdfAnnotationObject) => number;
-              defaults?: Record<string, unknown>;
-              clickBehavior?: Record<string, unknown>;
-              behavior?: { deactivateToolAfterCreate?: boolean; selectAfterCreate?: boolean };
-            };
-            const ensureTool = (tool: LooseAnnotationTool) => {
-              const existing = annotationApi.getTool?.(tool.id);
-              if (!existing) {
-                annotationApi.addTool(tool as unknown as AnnotationTool);
-              }
-            };
-
-            ensureTool({
-              id: 'highlight',
-              name: 'Highlight',
-              interaction: { exclusive: true, cursor: 'text', textSelection: true },
-              matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.HIGHLIGHT ? 10 : 0),
-              defaults: {
-                type: PdfAnnotationSubtype.HIGHLIGHT,
-                strokeColor: '#ffd54f',
-                color: '#ffd54f',
-                opacity: 0.6,
-              },
-              behavior: {
-                deactivateToolAfterCreate: false,
-                selectAfterCreate: true,
-              },
-            });
-
-            ensureTool({
-              id: 'underline',
-              name: 'Underline',
-              interaction: { exclusive: true, cursor: 'text', textSelection: true },
-              matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.UNDERLINE ? 10 : 0),
-              defaults: {
-                type: PdfAnnotationSubtype.UNDERLINE,
-                strokeColor: '#ffb300',
-                color: '#ffb300',
-                opacity: 1,
-              },
-              behavior: {
-                deactivateToolAfterCreate: false,
-                selectAfterCreate: true,
-              },
-            });
-
-            ensureTool({
-              id: 'strikeout',
-              name: 'Strikeout',
-              interaction: { exclusive: true, cursor: 'text', textSelection: true },
-              matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.STRIKEOUT ? 10 : 0),
-              defaults: {
-                type: PdfAnnotationSubtype.STRIKEOUT,
-                strokeColor: '#e53935',
-                color: '#e53935',
-                opacity: 1,
-              },
-              behavior: {
-                deactivateToolAfterCreate: false,
-                selectAfterCreate: true,
-              },
-            });
-
-            ensureTool({
-              id: 'squiggly',
-              name: 'Squiggly',
-              interaction: { exclusive: true, cursor: 'text', textSelection: true },
-              matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.SQUIGGLY ? 10 : 0),
-              defaults: {
-                type: PdfAnnotationSubtype.SQUIGGLY,
-                strokeColor: '#00acc1',
-                color: '#00acc1',
-                opacity: 1,
-              },
-              behavior: {
-                deactivateToolAfterCreate: false,
-                selectAfterCreate: true,
-              },
-            });
-
-            ensureTool({
-              id: 'ink',
-              name: 'Pen',
-              interaction: { exclusive: true, cursor: 'crosshair' },
-              matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.INK ? 10 : 0),
-              defaults: {
-                type: PdfAnnotationSubtype.INK,
-                strokeColor: '#1f2933',
-                color: '#1f2933',
-                opacity: 1,
-                borderWidth: 2,
-                lineWidth: 2,
-                strokeWidth: 2,
-              },
-              behavior: {
-                deactivateToolAfterCreate: false,
-                selectAfterCreate: true,
-              },
-            });
-
-            ensureTool({
-              id: 'inkHighlighter',
-              name: 'Ink Highlighter',
-              interaction: { exclusive: true, cursor: 'crosshair' },
-              matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.INK && (annotation.strokeColor === '#ffd54f' || annotation.color === '#ffd54f') ? 8 : 0),
-              defaults: {
-                type: PdfAnnotationSubtype.INK,
-                strokeColor: '#ffd54f',
-                color: '#ffd54f',
-                opacity: 0.5,
-                borderWidth: 6,
-                lineWidth: 6,
-                strokeWidth: 6,
-              },
-              behavior: {
-                deactivateToolAfterCreate: false,
-                selectAfterCreate: true,
-              },
-            });
-
-            ensureTool({
-              id: 'square',
-              name: 'Square',
-              interaction: { exclusive: true, cursor: 'crosshair' },
-              matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.SQUARE ? 10 : 0),
-              defaults: {
-                type: PdfAnnotationSubtype.SQUARE,
-                color: '#0000ff', // fill color (blue)
-                strokeColor: '#cf5b5b', // border color (reddish pink)
-                opacity: 0.5,
-                borderWidth: 1,
-                strokeWidth: 1,
-                lineWidth: 1,
-              },
-              clickBehavior: {
-                enabled: true,
-                defaultSize: { width: 120, height: 90 },
-              },
-              behavior: {
-                deactivateToolAfterCreate: true,
-                selectAfterCreate: true,
-              },
-            });
-
-            ensureTool({
-              id: 'circle',
-              name: 'Circle',
-              interaction: { exclusive: true, cursor: 'crosshair' },
-              matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.CIRCLE ? 10 : 0),
-              defaults: {
-                type: PdfAnnotationSubtype.CIRCLE,
-                color: '#0000ff', // fill color (blue)
-                strokeColor: '#cf5b5b', // border color (reddish pink)
-                opacity: 0.5,
-                borderWidth: 1,
-                strokeWidth: 1,
-                lineWidth: 1,
-              },
-              clickBehavior: {
-                enabled: true,
-                defaultSize: { width: 100, height: 100 },
-              },
-              behavior: {
-                deactivateToolAfterCreate: true,
-                selectAfterCreate: true,
-              },
-            });
-
-            ensureTool({
-              id: 'line',
-              name: 'Line',
-              interaction: { exclusive: true, cursor: 'crosshair' },
-              matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.LINE ? 10 : 0),
-              defaults: {
-                type: PdfAnnotationSubtype.LINE,
-                color: '#1565c0',
-                opacity: 1,
-                borderWidth: 2,
-                strokeWidth: 2,
-                lineWidth: 2,
-              },
-              clickBehavior: {
-                enabled: true,
-                defaultLength: 120,
-                defaultAngle: 0,
-              },
-              behavior: {
-                deactivateToolAfterCreate: true,
-                selectAfterCreate: true,
-              },
-            });
-
-            ensureTool({
-              id: 'lineArrow',
-              name: 'Arrow',
-              interaction: { exclusive: true, cursor: 'crosshair' },
-              matchScore: (annotation: PdfAnnotationObject) => {
-                if (annotation.type !== PdfAnnotationSubtype.LINE) return 0;
-                // EmbedPDF stores endStyle/lineEndingStyles at runtime; library types use lineEndings
-                const ann = annotation as PdfAnnotationObject & { endStyle?: string; lineEndingStyles?: { end?: string } };
-                return (ann.endStyle === 'ClosedArrow' || ann.lineEndingStyles?.end === 'ClosedArrow') ? 9 : 0;
-              },
-              defaults: {
-                type: PdfAnnotationSubtype.LINE,
-                color: '#1565c0',
-                opacity: 1,
-                borderWidth: 2,
-                startStyle: 'None',
-                endStyle: 'ClosedArrow',
-                lineEndingStyles: { start: 'None', end: 'ClosedArrow' },
-              },
-              clickBehavior: {
-                enabled: true,
-                defaultLength: 120,
-                defaultAngle: 0,
-              },
-              behavior: {
-                deactivateToolAfterCreate: true,
-                selectAfterCreate: true,
-              },
-            });
-
-            ensureTool({
-              id: 'polyline',
-              name: 'Polyline',
-              interaction: { exclusive: true, cursor: 'crosshair' },
-              matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.POLYLINE ? 10 : 0),
-              defaults: {
-                type: PdfAnnotationSubtype.POLYLINE,
-                color: '#1565c0',
-                opacity: 1,
-                borderWidth: 2,
-              },
-              clickBehavior: {
-                enabled: true,
-                finishOnDoubleClick: true,
-              },
-              behavior: {
-                deactivateToolAfterCreate: true,
-                selectAfterCreate: true,
-              },
-            });
-
-            ensureTool({
-              id: 'polygon',
-              name: 'Polygon',
-              interaction: { exclusive: true, cursor: 'crosshair' },
-              matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.POLYGON ? 10 : 0),
-              defaults: {
-                type: PdfAnnotationSubtype.POLYGON,
-                color: '#0000ff', // fill color (blue)
-                strokeColor: '#cf5b5b', // border color (reddish pink)
-                opacity: 0.5,
-                borderWidth: 1,
-              },
-              clickBehavior: {
-                enabled: true,
-                finishOnDoubleClick: true,
-                defaultSize: { width: 140, height: 100 },
-              },
-              behavior: {
-                deactivateToolAfterCreate: true,
-                selectAfterCreate: true,
-              },
-            });
-
-            ensureTool({
-              id: 'text',
-              name: 'Text',
-              interaction: { exclusive: true, cursor: 'text', isRotatable: false },
-              matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.FREETEXT ? 10 : 0),
-              defaults: {
-                type: PdfAnnotationSubtype.FREETEXT,
-                textColor: '#111111',
-                fontSize: 14,
-                fontFamily: 'Helvetica',
-                opacity: 1,
-                interiorColor: '#fffef7',
-                contents: 'Text',
-              },
-              behavior: {
-                deactivateToolAfterCreate: true,
-                selectAfterCreate: true,
-              },
-            });
-
-            ensureTool({
-              id: 'note',
-              name: 'Note',
-              interaction: { exclusive: true, cursor: 'pointer', isRotatable: false },
-              matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.FREETEXT ? 8 : 0),
-              defaults: {
-                type: PdfAnnotationSubtype.FREETEXT,
-                textColor: '#1b1b1b',
-                color: '#ffa000',
-                interiorColor: '#fff8e1',
-                opacity: 1,
-                contents: 'Note',
-                fontSize: 12,
-              },
-              clickBehavior: {
-                enabled: true,
-                defaultSize: { width: 160, height: 100 },
-              },
-              behavior: {
-                deactivateToolAfterCreate: true,
-                selectAfterCreate: true,
-              },
-            });
-
-            ensureTool({
-              id: 'stamp',
-              name: 'Image Stamp',
-              interaction: { exclusive: false, cursor: 'copy' },
-              matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.STAMP ? 5 : 0),
-              defaults: {
-                type: PdfAnnotationSubtype.STAMP,
-              },
-              behavior: {
-                deactivateToolAfterCreate: true,
-                selectAfterCreate: true,
-              },
-            });
-
-            ensureTool({
-              id: 'signatureStamp',
-              name: 'Digital Signature',
-              interaction: { exclusive: false, cursor: 'copy' },
-              matchScore: () => 0,
-              defaults: {
-                type: PdfAnnotationSubtype.STAMP,
-              },
-            });
-
-            ensureTool({
-              id: 'signatureInk',
-              name: 'Signature Draw',
-              interaction: { exclusive: true, cursor: 'crosshair' },
-              matchScore: () => 0,
-              defaults: {
-                type: PdfAnnotationSubtype.INK,
-                strokeColor: '#000000',
-                color: '#000000',
-                opacity: 1.0,
-                borderWidth: 2,
-              },
-            });
-
-            annotationApi.onAnnotationEvent((event: AnnotationEvent) => {
-              if (event.type === 'create' && event.committed) {
-                setAnnotations(prev => [...prev, {
-                  id: event.annotation.id,
-                  pageIndex: event.pageIndex,
-                  rect: event.annotation.rect
-                }]);
-
-                // If the annotation doesn't have customData.toolId, patch it from the active tool.
-                // EmbedPDF doesn't always persist customData from setToolDefaults into created annotations.
-                const annotationId = event.annotation.id;
-                const existingCustomData = (event.annotation as unknown as { customData?: Record<string, unknown> }).customData;
-                if (annotationId && !existingCustomData?.toolId) {
-                  const activeTool = (annotationApi as unknown as { getActiveTool?: () => { id: string } | null }).getActiveTool?.();
-                  if (activeTool?.id && activeTool.id !== 'select') {
-                    (annotationApi as unknown as { updateAnnotation?: (page: number, id: string, patch: Record<string, unknown>) => void })
-                      .updateAnnotation?.(event.pageIndex, annotationId, {
-                        customData: { ...(existingCustomData ?? {}), toolId: activeTool.id },
-                      });
-                  }
-                }
-
-                // Auto-select the annotation after creation so the selection menu appears immediately,
-                // letting users discover the editing options before they click away.
-                if (annotationId) {
-                  (annotationApi as unknown as { selectAnnotation?: (pageIndex: number, id: string) => void })
-                    .selectAnnotation?.(event.pageIndex, annotationId);
-                }
-
-                if (onSignatureAdded) {
-                  onSignatureAdded(event.annotation);
-                }
-              } else if (event.type === 'delete' && event.committed) {
-                setAnnotations(prev => prev.filter(ann => ann.id !== event.annotation.id));
-              }
-            });
-          }
         }}
       >
-        <ActiveDocumentProvider>
-        <ZoomAPIBridge />
-        <ScrollAPIBridge />
-        <SelectionAPIBridge />
-        <PanAPIBridge />
-        <SpreadAPIBridge />
-        <SearchAPIBridge />
-        <ThumbnailAPIBridge />
-        <RotateAPIBridge />
-        {(enableAnnotations || enableRedaction || isManualRedactionMode) && <HistoryAPIBridge ref={historyApiRef} />}
-        {/* Always render RedactionAPIBridge when in manual redaction mode so buttons can switch from annotation mode */}
-        {(enableRedaction || isManualRedactionMode) && <RedactionAPIBridge />}
-        {/* Always render SignatureAPIBridge so annotation tools (draw) can be activated even when starting in redaction mode */}
-        {(enableAnnotations || enableRedaction || isManualRedactionMode) && <SignatureAPIBridge ref={signatureApiRef} isSignMode={isSignMode} />}
-        {(enableRedaction || isManualRedactionMode) && <RedactionPendingTracker ref={redactionTrackerRef} />}
-        {enableAnnotations && <AnnotationAPIBridge ref={annotationApiRef} />}
+        <EmbedPDF
+          engine={engine}
+          plugins={plugins}
+          onInitialized={async (registry: PluginRegistry) => {
+            // v2.0: Use registry.getPlugin() to access plugin APIs
+            const annotationPlugin = registry.getPlugin("annotation");
+            if (!annotationPlugin || !annotationPlugin.provides) return;
 
-        <ExportAPIBridge />
-        <BookmarkAPIBridge />
-        <AttachmentAPIBridge />
-        <PrintAPIBridge
-          file={file}
-          url={pdfUrl}
-          fileName={fileName}
-        />
-        <DocumentPermissionsAPIBridge />
-        <DocumentReadyWrapper
-          fallback={
-            <Center style={{ height: '100%', width: '100%' }}>
-              <ToolLoadingFallback />
-            </Center>
-          }
+            const annotationApi = annotationPlugin.provides();
+            if (!annotationApi) return;
+
+            if (enableAnnotations) {
+              // LooseAnnotationTool bypasses strict Partial<T> defaults typing from the library —
+              // EmbedPDF accepts extra runtime properties (borderWidth, textColor, finishOnDoubleClick,
+              // etc.) that aren't reflected in the TypeScript model types.
+              type LooseAnnotationTool = {
+                id: string;
+                name: string;
+                interaction?: { exclusive: boolean; cursor: string; textSelection?: boolean; isRotatable?: boolean };
+                matchScore?: (annotation: PdfAnnotationObject) => number;
+                defaults?: Record<string, unknown>;
+                clickBehavior?: Record<string, unknown>;
+                behavior?: { deactivateToolAfterCreate?: boolean; selectAfterCreate?: boolean };
+              };
+              const ensureTool = (tool: LooseAnnotationTool) => {
+                const existing = annotationApi.getTool?.(tool.id);
+                if (!existing) {
+                  annotationApi.addTool(tool as unknown as AnnotationTool);
+                }
+              };
+
+              ensureTool({
+                id: "highlight",
+                name: "Highlight",
+                interaction: { exclusive: true, cursor: "text", textSelection: true },
+                matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.HIGHLIGHT ? 10 : 0),
+                defaults: {
+                  type: PdfAnnotationSubtype.HIGHLIGHT,
+                  strokeColor: "#ffd54f",
+                  color: "#ffd54f",
+                  opacity: 0.6,
+                },
+                behavior: {
+                  deactivateToolAfterCreate: false,
+                  selectAfterCreate: true,
+                },
+              });
+
+              ensureTool({
+                id: "underline",
+                name: "Underline",
+                interaction: { exclusive: true, cursor: "text", textSelection: true },
+                matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.UNDERLINE ? 10 : 0),
+                defaults: {
+                  type: PdfAnnotationSubtype.UNDERLINE,
+                  strokeColor: "#ffb300",
+                  color: "#ffb300",
+                  opacity: 1,
+                },
+                behavior: {
+                  deactivateToolAfterCreate: false,
+                  selectAfterCreate: true,
+                },
+              });
+
+              ensureTool({
+                id: "strikeout",
+                name: "Strikeout",
+                interaction: { exclusive: true, cursor: "text", textSelection: true },
+                matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.STRIKEOUT ? 10 : 0),
+                defaults: {
+                  type: PdfAnnotationSubtype.STRIKEOUT,
+                  strokeColor: "#e53935",
+                  color: "#e53935",
+                  opacity: 1,
+                },
+                behavior: {
+                  deactivateToolAfterCreate: false,
+                  selectAfterCreate: true,
+                },
+              });
+
+              ensureTool({
+                id: "squiggly",
+                name: "Squiggly",
+                interaction: { exclusive: true, cursor: "text", textSelection: true },
+                matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.SQUIGGLY ? 10 : 0),
+                defaults: {
+                  type: PdfAnnotationSubtype.SQUIGGLY,
+                  strokeColor: "#00acc1",
+                  color: "#00acc1",
+                  opacity: 1,
+                },
+                behavior: {
+                  deactivateToolAfterCreate: false,
+                  selectAfterCreate: true,
+                },
+              });
+
+              ensureTool({
+                id: "ink",
+                name: "Pen",
+                interaction: { exclusive: true, cursor: "crosshair" },
+                matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.INK ? 10 : 0),
+                defaults: {
+                  type: PdfAnnotationSubtype.INK,
+                  strokeColor: "#1f2933",
+                  color: "#1f2933",
+                  opacity: 1,
+                  borderWidth: 2,
+                  lineWidth: 2,
+                  strokeWidth: 2,
+                },
+                behavior: {
+                  deactivateToolAfterCreate: false,
+                  selectAfterCreate: true,
+                },
+              });
+
+              ensureTool({
+                id: "inkHighlighter",
+                name: "Ink Highlighter",
+                interaction: { exclusive: true, cursor: "crosshair" },
+                matchScore: (annotation: PdfAnnotationObject) =>
+                  annotation.type === PdfAnnotationSubtype.INK &&
+                  (annotation.strokeColor === "#ffd54f" || annotation.color === "#ffd54f")
+                    ? 8
+                    : 0,
+                defaults: {
+                  type: PdfAnnotationSubtype.INK,
+                  strokeColor: "#ffd54f",
+                  color: "#ffd54f",
+                  opacity: 0.5,
+                  borderWidth: 6,
+                  lineWidth: 6,
+                  strokeWidth: 6,
+                },
+                behavior: {
+                  deactivateToolAfterCreate: false,
+                  selectAfterCreate: true,
+                },
+              });
+
+              ensureTool({
+                id: "square",
+                name: "Square",
+                interaction: { exclusive: true, cursor: "crosshair" },
+                matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.SQUARE ? 10 : 0),
+                defaults: {
+                  type: PdfAnnotationSubtype.SQUARE,
+                  color: "#0000ff", // fill color (blue)
+                  strokeColor: "#cf5b5b", // border color (reddish pink)
+                  opacity: 0.5,
+                  borderWidth: 1,
+                  strokeWidth: 1,
+                  lineWidth: 1,
+                },
+                clickBehavior: {
+                  enabled: true,
+                  defaultSize: { width: 120, height: 90 },
+                },
+                behavior: {
+                  deactivateToolAfterCreate: true,
+                  selectAfterCreate: true,
+                },
+              });
+
+              ensureTool({
+                id: "circle",
+                name: "Circle",
+                interaction: { exclusive: true, cursor: "crosshair" },
+                matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.CIRCLE ? 10 : 0),
+                defaults: {
+                  type: PdfAnnotationSubtype.CIRCLE,
+                  color: "#0000ff", // fill color (blue)
+                  strokeColor: "#cf5b5b", // border color (reddish pink)
+                  opacity: 0.5,
+                  borderWidth: 1,
+                  strokeWidth: 1,
+                  lineWidth: 1,
+                },
+                clickBehavior: {
+                  enabled: true,
+                  defaultSize: { width: 100, height: 100 },
+                },
+                behavior: {
+                  deactivateToolAfterCreate: true,
+                  selectAfterCreate: true,
+                },
+              });
+
+              ensureTool({
+                id: "line",
+                name: "Line",
+                interaction: { exclusive: true, cursor: "crosshair" },
+                matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.LINE ? 10 : 0),
+                defaults: {
+                  type: PdfAnnotationSubtype.LINE,
+                  color: "#1565c0",
+                  opacity: 1,
+                  borderWidth: 2,
+                  strokeWidth: 2,
+                  lineWidth: 2,
+                },
+                clickBehavior: {
+                  enabled: true,
+                  defaultLength: 120,
+                  defaultAngle: 0,
+                },
+                behavior: {
+                  deactivateToolAfterCreate: true,
+                  selectAfterCreate: true,
+                },
+              });
+
+              ensureTool({
+                id: "lineArrow",
+                name: "Arrow",
+                interaction: { exclusive: true, cursor: "crosshair" },
+                matchScore: (annotation: PdfAnnotationObject) => {
+                  if (annotation.type !== PdfAnnotationSubtype.LINE) return 0;
+                  // EmbedPDF stores endStyle/lineEndingStyles at runtime; library types use lineEndings
+                  const ann = annotation as PdfAnnotationObject & { endStyle?: string; lineEndingStyles?: { end?: string } };
+                  return ann.endStyle === "ClosedArrow" || ann.lineEndingStyles?.end === "ClosedArrow" ? 9 : 0;
+                },
+                defaults: {
+                  type: PdfAnnotationSubtype.LINE,
+                  color: "#1565c0",
+                  opacity: 1,
+                  borderWidth: 2,
+                  startStyle: "None",
+                  endStyle: "ClosedArrow",
+                  lineEndingStyles: { start: "None", end: "ClosedArrow" },
+                },
+                clickBehavior: {
+                  enabled: true,
+                  defaultLength: 120,
+                  defaultAngle: 0,
+                },
+                behavior: {
+                  deactivateToolAfterCreate: true,
+                  selectAfterCreate: true,
+                },
+              });
+
+              ensureTool({
+                id: "polyline",
+                name: "Polyline",
+                interaction: { exclusive: true, cursor: "crosshair" },
+                matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.POLYLINE ? 10 : 0),
+                defaults: {
+                  type: PdfAnnotationSubtype.POLYLINE,
+                  color: "#1565c0",
+                  opacity: 1,
+                  borderWidth: 2,
+                },
+                clickBehavior: {
+                  enabled: true,
+                  finishOnDoubleClick: true,
+                },
+                behavior: {
+                  deactivateToolAfterCreate: true,
+                  selectAfterCreate: true,
+                },
+              });
+
+              ensureTool({
+                id: "polygon",
+                name: "Polygon",
+                interaction: { exclusive: true, cursor: "crosshair" },
+                matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.POLYGON ? 10 : 0),
+                defaults: {
+                  type: PdfAnnotationSubtype.POLYGON,
+                  color: "#0000ff", // fill color (blue)
+                  strokeColor: "#cf5b5b", // border color (reddish pink)
+                  opacity: 0.5,
+                  borderWidth: 1,
+                },
+                clickBehavior: {
+                  enabled: true,
+                  finishOnDoubleClick: true,
+                  defaultSize: { width: 140, height: 100 },
+                },
+                behavior: {
+                  deactivateToolAfterCreate: true,
+                  selectAfterCreate: true,
+                },
+              });
+
+              ensureTool({
+                id: "text",
+                name: "Text",
+                interaction: { exclusive: true, cursor: "text", isRotatable: false },
+                matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.FREETEXT ? 10 : 0),
+                defaults: {
+                  type: PdfAnnotationSubtype.FREETEXT,
+                  textColor: "#111111",
+                  fontSize: 14,
+                  fontFamily: "Helvetica",
+                  opacity: 1,
+                  interiorColor: "#fffef7",
+                  contents: "Text",
+                },
+                behavior: {
+                  deactivateToolAfterCreate: true,
+                  selectAfterCreate: true,
+                },
+              });
+
+              ensureTool({
+                id: "note",
+                name: "Note",
+                interaction: { exclusive: true, cursor: "pointer", isRotatable: false },
+                matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.FREETEXT ? 8 : 0),
+                defaults: {
+                  type: PdfAnnotationSubtype.FREETEXT,
+                  textColor: "#1b1b1b",
+                  color: "#ffa000",
+                  interiorColor: "#fff8e1",
+                  opacity: 1,
+                  contents: "Note",
+                  fontSize: 12,
+                },
+                clickBehavior: {
+                  enabled: true,
+                  defaultSize: { width: 160, height: 100 },
+                },
+                behavior: {
+                  deactivateToolAfterCreate: true,
+                  selectAfterCreate: true,
+                },
+              });
+
+              ensureTool({
+                id: "stamp",
+                name: "Image Stamp",
+                interaction: { exclusive: false, cursor: "copy" },
+                matchScore: (annotation: PdfAnnotationObject) => (annotation.type === PdfAnnotationSubtype.STAMP ? 5 : 0),
+                defaults: {
+                  type: PdfAnnotationSubtype.STAMP,
+                },
+                behavior: {
+                  deactivateToolAfterCreate: true,
+                  selectAfterCreate: true,
+                },
+              });
+
+              ensureTool({
+                id: "signatureStamp",
+                name: "Digital Signature",
+                interaction: { exclusive: false, cursor: "copy" },
+                matchScore: () => 0,
+                defaults: {
+                  type: PdfAnnotationSubtype.STAMP,
+                },
+              });
+
+              ensureTool({
+                id: "signatureInk",
+                name: "Signature Draw",
+                interaction: { exclusive: true, cursor: "crosshair" },
+                matchScore: () => 0,
+                defaults: {
+                  type: PdfAnnotationSubtype.INK,
+                  strokeColor: "#000000",
+                  color: "#000000",
+                  opacity: 1.0,
+                  borderWidth: 2,
+                },
+              });
+
+              annotationApi.onAnnotationEvent((event: AnnotationEvent) => {
+                if (event.type === "create" && event.committed) {
+                  setAnnotations((prev) => [
+                    ...prev,
+                    {
+                      id: event.annotation.id,
+                      pageIndex: event.pageIndex,
+                      rect: event.annotation.rect,
+                    },
+                  ]);
+
+                  // If the annotation doesn't have customData.toolId, patch it from the active tool.
+                  // EmbedPDF doesn't always persist customData from setToolDefaults into created annotations.
+                  const annotationId = event.annotation.id;
+                  const existingCustomData = (event.annotation as unknown as { customData?: Record<string, unknown> })
+                    .customData;
+                  if (annotationId && !existingCustomData?.toolId) {
+                    const activeTool = (
+                      annotationApi as unknown as { getActiveTool?: () => { id: string } | null }
+                    ).getActiveTool?.();
+                    if (activeTool?.id && activeTool.id !== "select") {
+                      (
+                        annotationApi as unknown as {
+                          updateAnnotation?: (page: number, id: string, patch: Record<string, unknown>) => void;
+                        }
+                      ).updateAnnotation?.(event.pageIndex, annotationId, {
+                        customData: { ...(existingCustomData ?? {}), toolId: activeTool.id },
+                      });
+                    }
+                  }
+
+                  // Auto-select the annotation after creation so the selection menu appears immediately,
+                  // letting users discover the editing options before they click away.
+                  if (annotationId) {
+                    (
+                      annotationApi as unknown as { selectAnnotation?: (pageIndex: number, id: string) => void }
+                    ).selectAnnotation?.(event.pageIndex, annotationId);
+                  }
+
+                  if (onSignatureAdded) {
+                    onSignatureAdded(event.annotation);
+                  }
+                } else if (event.type === "delete" && event.committed) {
+                  setAnnotations((prev) => prev.filter((ann) => ann.id !== event.annotation.id));
+                }
+              });
+            }
+          }}
         >
-          {(documentId) => (
-            <>
-            <GlobalPointerProvider documentId={documentId}>
-              <Viewport
-                documentId={documentId}
-                style={{
-                  backgroundColor: 'var(--bg-background)',
-                  height: '100%',
-                  width: '100%',
-                  maxHeight: '100%',
-                  maxWidth: '100%',
-                  overflow: 'auto',
-                  position: 'relative',
-                  flex: 1,
-                  minHeight: 0,
-                  minWidth: 0,
-                  contain: 'strict',
-                }}
-              >
-              <Scroller
-                documentId={documentId}
-                renderPage={({ width, height, pageIndex }) => {
-                  return (
-                    <Rotate key={`${documentId}-${pageIndex}`} documentId={documentId} pageIndex={pageIndex}>
-                      <PagePointerProvider documentId={documentId} pageIndex={pageIndex}>
-                        <div
-                          data-page-index={pageIndex}
-                          data-page-width={width}
-                          data-page-height={height}
-                          style={{
-                            width,
-                            height,
-                            position: 'relative',
-                            overflow: 'hidden', // clip overlays (buttons, fields) that extend beyond the page rect
-                            userSelect: 'none',
-                            WebkitUserSelect: 'none',
-                            MozUserSelect: 'none',
-                            msUserSelect: 'none',
-                            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)'
-                          }}
-                          draggable={false}
-                          onDragStart={(e) => e.preventDefault()}
-                          onDrop={(e) => e.preventDefault()}
-                          onDragOver={(e) => e.preventDefault()}
-                        >
-                          <div style={{
-                            position: 'absolute',
-                            inset: 0,
-                            transition: 'filter 0.25s ease',
-                            filter:
-                              pdfRenderMode === 'dark'
-                                ? 'invert(1) hue-rotate(180deg)'
-                                : pdfRenderMode === 'sepia'
-                                  ? 'sepia(0.7) brightness(0.85)'
-                                  : undefined,
-                          }}>
-                            <TilingLayer documentId={documentId} pageIndex={pageIndex} />
-                          </div>
-
-                          <CustomSearchLayer documentId={documentId} pageIndex={pageIndex} />
-
-                          <div className="pdf-selection-layer" style={{ position: 'absolute', inset: 0, pointerEvents: 'none' }}>
-                            <SelectionLayer documentId={documentId} pageIndex={pageIndex} background="var(--pdf-selection-bg)" />
-                          </div>
-                          <TextSelectionHandler documentId={documentId} pageIndex={pageIndex} />
-
-                          {/* ButtonAppearanceOverlay — renders PDF-native button visuals as bitmaps */}
-                          {enableFormFill && file && (
-                            <ButtonAppearanceOverlay
-                              pageIndex={pageIndex}
-                              pdfSource={file}
-                              pageWidth={width}
-                              pageHeight={height}
-                            />
-                          )}
-
-                          {/* FormFieldOverlay for interactive form filling */}
-                          {enableFormFill && (
-                            <FormFieldOverlay
-                              documentId={documentId}
-                              pageIndex={pageIndex}
-                              pageWidth={width}
-                              pageHeight={height}
-                              fileId={fileId}
-                            />
-                          )}
-
-                          {/* SignatureFieldOverlay — bitmaps of digital-signature appearances */}
-                          {file && (
-                            <SignatureFieldOverlay
-                              documentId={documentId}
-                              pageIndex={pageIndex}
-                              pdfSource={file}
-                              pageWidth={width}
-                              pageHeight={height}
-                            />
-                          )}
-
-                          {/* AnnotationLayer for annotation editing and annotation-based redactions */}
-                          {(enableAnnotations || enableRedaction) && (
-                            <AnnotationLayer
-                              documentId={documentId}
-                              pageIndex={pageIndex}
-                              selectionOutline={{ color: "#007ACC" }}
-                              selectionMenu={(props) => <AnnotationSelectionMenu {...props} />}
-                              style={!showBakedAnnotations ? { opacity: 0, pointerEvents: 'none' } : undefined}
-                            />
-                          )}
-
-                          {enableRedaction && (
-                            <RedactionLayer
-                              documentId={documentId}
-                              pageIndex={pageIndex}
-                              selectionMenu={(props) => <RedactionSelectionMenu {...props} />}
-                            />
-                          )}
-
-                          {/* LinkLayer – uses EmbedPDF annotation state for link rendering */}
-                          <LinkLayer
-                            documentId={documentId}
-                            pageIndex={pageIndex}
-                          />
-                        </div>
-                      </PagePointerProvider>
-                    </Rotate>
-                  );
-                }}
-              />
-              </Viewport>
-            </GlobalPointerProvider>
-            {enableAnnotations && (
-              <CommentAuthorProvider displayName={commentAuthorName}>
-                <CommentsSidebar
-                  documentId={documentId}
-                  visible={isCommentsSidebarVisible}
-                  rightOffset={commentsSidebarRightOffset}
-                />
-              </CommentAuthorProvider>
+          <ActiveDocumentProvider>
+            <ZoomAPIBridge />
+            <ScrollAPIBridge />
+            <SelectionAPIBridge />
+            <PanAPIBridge />
+            <SpreadAPIBridge />
+            <SearchAPIBridge />
+            <ThumbnailAPIBridge />
+            <RotateAPIBridge />
+            {(enableAnnotations || enableRedaction || isManualRedactionMode) && <HistoryAPIBridge ref={historyApiRef} />}
+            {/* Always render RedactionAPIBridge when in manual redaction mode so buttons can switch from annotation mode */}
+            {(enableRedaction || isManualRedactionMode) && <RedactionAPIBridge />}
+            {/* Always render SignatureAPIBridge so annotation tools (draw) can be activated even when starting in redaction mode */}
+            {(enableAnnotations || enableRedaction || isManualRedactionMode) && (
+              <SignatureAPIBridge ref={signatureApiRef} isSignMode={isSignMode} />
             )}
-            </>
-          )}
-        </DocumentReadyWrapper>
-        </ActiveDocumentProvider>
-      </EmbedPDF>
+            {(enableRedaction || isManualRedactionMode) && <RedactionPendingTracker ref={redactionTrackerRef} />}
+            {enableAnnotations && <AnnotationAPIBridge ref={annotationApiRef} />}
+
+            <ExportAPIBridge />
+            <BookmarkAPIBridge />
+            <AttachmentAPIBridge />
+            <PrintAPIBridge file={file} url={pdfUrl} fileName={fileName} />
+            <DocumentPermissionsAPIBridge />
+            <DocumentReadyWrapper
+              fallback={
+                <Center style={{ height: "100%", width: "100%" }}>
+                  <ToolLoadingFallback />
+                </Center>
+              }
+            >
+              {(documentId) => (
+                <>
+                  <GlobalPointerProvider documentId={documentId}>
+                    <Viewport
+                      documentId={documentId}
+                      style={{
+                        backgroundColor: "var(--bg-background)",
+                        height: "100%",
+                        width: "100%",
+                        maxHeight: "100%",
+                        maxWidth: "100%",
+                        overflow: "auto",
+                        position: "relative",
+                        flex: 1,
+                        minHeight: 0,
+                        minWidth: 0,
+                        contain: "strict",
+                      }}
+                    >
+                      <Scroller
+                        documentId={documentId}
+                        renderPage={({ width, height, pageIndex }) => {
+                          return (
+                            <Rotate key={`${documentId}-${pageIndex}`} documentId={documentId} pageIndex={pageIndex}>
+                              <PagePointerProvider documentId={documentId} pageIndex={pageIndex}>
+                                <div
+                                  data-page-index={pageIndex}
+                                  data-page-width={width}
+                                  data-page-height={height}
+                                  style={{
+                                    width,
+                                    height,
+                                    position: "relative",
+                                    overflow: "hidden", // clip overlays (buttons, fields) that extend beyond the page rect
+                                    userSelect: "none",
+                                    WebkitUserSelect: "none",
+                                    MozUserSelect: "none",
+                                    msUserSelect: "none",
+                                    boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+                                  }}
+                                  draggable={false}
+                                  onDragStart={(e) => e.preventDefault()}
+                                  onDrop={(e) => e.preventDefault()}
+                                  onDragOver={(e) => e.preventDefault()}
+                                >
+                                  <div
+                                    style={{
+                                      position: "absolute",
+                                      inset: 0,
+                                      transition: "filter 0.25s ease",
+                                      filter:
+                                        pdfRenderMode === "dark"
+                                          ? "invert(1) hue-rotate(180deg)"
+                                          : pdfRenderMode === "sepia"
+                                            ? "sepia(0.7) brightness(0.85)"
+                                            : undefined,
+                                    }}
+                                  >
+                                    <TilingLayer documentId={documentId} pageIndex={pageIndex} />
+                                  </div>
+
+                                  <CustomSearchLayer documentId={documentId} pageIndex={pageIndex} />
+
+                                  <div
+                                    className="pdf-selection-layer"
+                                    style={{ position: "absolute", inset: 0, pointerEvents: "none" }}
+                                  >
+                                    <SelectionLayer
+                                      documentId={documentId}
+                                      pageIndex={pageIndex}
+                                      background="var(--pdf-selection-bg)"
+                                    />
+                                  </div>
+                                  <TextSelectionHandler documentId={documentId} pageIndex={pageIndex} />
+
+                                  {/* ButtonAppearanceOverlay — renders PDF-native button visuals as bitmaps */}
+                                  {enableFormFill && file && (
+                                    <ButtonAppearanceOverlay
+                                      pageIndex={pageIndex}
+                                      pdfSource={file}
+                                      pageWidth={width}
+                                      pageHeight={height}
+                                    />
+                                  )}
+
+                                  {/* FormFieldOverlay for interactive form filling */}
+                                  {enableFormFill && (
+                                    <FormFieldOverlay
+                                      documentId={documentId}
+                                      pageIndex={pageIndex}
+                                      pageWidth={width}
+                                      pageHeight={height}
+                                      fileId={fileId}
+                                    />
+                                  )}
+
+                                  {/* SignatureFieldOverlay — bitmaps of digital-signature appearances */}
+                                  {file && (
+                                    <SignatureFieldOverlay
+                                      documentId={documentId}
+                                      pageIndex={pageIndex}
+                                      pdfSource={file}
+                                      pageWidth={width}
+                                      pageHeight={height}
+                                    />
+                                  )}
+
+                                  {/* AnnotationLayer for annotation editing and annotation-based redactions */}
+                                  {(enableAnnotations || enableRedaction) && (
+                                    <AnnotationLayer
+                                      documentId={documentId}
+                                      pageIndex={pageIndex}
+                                      selectionOutline={{ color: "#007ACC" }}
+                                      selectionMenu={(props) => <AnnotationSelectionMenu {...props} />}
+                                      style={!showBakedAnnotations ? { opacity: 0, pointerEvents: "none" } : undefined}
+                                    />
+                                  )}
+
+                                  {enableRedaction && (
+                                    <RedactionLayer
+                                      documentId={documentId}
+                                      pageIndex={pageIndex}
+                                      selectionMenu={(props) => <RedactionSelectionMenu {...props} />}
+                                    />
+                                  )}
+
+                                  {/* LinkLayer – uses EmbedPDF annotation state for link rendering */}
+                                  <LinkLayer documentId={documentId} pageIndex={pageIndex} />
+                                </div>
+                              </PagePointerProvider>
+                            </Rotate>
+                          );
+                        }}
+                      />
+                    </Viewport>
+                  </GlobalPointerProvider>
+                  {enableAnnotations && (
+                    <CommentAuthorProvider displayName={commentAuthorName}>
+                      <CommentsSidebar
+                        documentId={documentId}
+                        visible={isCommentsSidebarVisible}
+                        rightOffset={commentsSidebarRightOffset}
+                      />
+                    </CommentAuthorProvider>
+                  )}
+                </>
+              )}
+            </DocumentReadyWrapper>
+          </ActiveDocumentProvider>
+        </EmbedPDF>
       </div>
     </PrivateContent>
   );
diff --git a/frontend/src/core/components/viewer/LocalEmbedPDFWithAnnotations.tsx b/frontend/src/core/components/viewer/LocalEmbedPDFWithAnnotations.tsx
index fc234c6d9c..b1fac4d247 100644
--- a/frontend/src/core/components/viewer/LocalEmbedPDFWithAnnotations.tsx
+++ b/frontend/src/core/components/viewer/LocalEmbedPDFWithAnnotations.tsx
@@ -1,50 +1,56 @@
-import { useEffect, useMemo, useState, useImperativeHandle, forwardRef, useRef } from 'react';
-import { createPluginRegistration } from '@embedpdf/core';
-import type { PluginRegistry } from '@embedpdf/core';
-import { EmbedPDF } from '@embedpdf/core/react';
-import { usePdfiumEngine } from '@embedpdf/engines/react';
+import { useEffect, useMemo, useState, useImperativeHandle, forwardRef, useRef } from "react";
+import { createPluginRegistration } from "@embedpdf/core";
+import type { PluginRegistry } from "@embedpdf/core";
+import { EmbedPDF } from "@embedpdf/core/react";
+import { usePdfiumEngine } from "@embedpdf/engines/react";
 
 // Import the essential plugins
-import { Viewport, ViewportPluginPackage } from '@embedpdf/plugin-viewport/react';
-import { Scroller, ScrollPluginPackage } from '@embedpdf/plugin-scroll/react';
-import { DocumentManagerPluginPackage } from '@embedpdf/plugin-document-manager/react';
-import { RenderPluginPackage } from '@embedpdf/plugin-render/react';
-import { ZoomPluginPackage, ZoomMode } from '@embedpdf/plugin-zoom/react';
-import { InteractionManagerPluginPackage, PagePointerProvider, GlobalPointerProvider, useInteractionManagerCapability } from '@embedpdf/plugin-interaction-manager/react';
-import { SelectionLayer, SelectionPluginPackage } from '@embedpdf/plugin-selection/react';
-import { TilingLayer, TilingPluginPackage } from '@embedpdf/plugin-tiling/react';
-import { PanPluginPackage } from '@embedpdf/plugin-pan/react';
-import { SpreadPluginPackage, SpreadMode } from '@embedpdf/plugin-spread/react';
-import { SearchPluginPackage } from '@embedpdf/plugin-search/react';
-import { ThumbnailPluginPackage } from '@embedpdf/plugin-thumbnail/react';
-import { RotatePluginPackage, Rotate } from '@embedpdf/plugin-rotate/react';
-import { Rotation, PdfAnnotationSubtype } from '@embedpdf/models';
-
+import { Viewport, ViewportPluginPackage } from "@embedpdf/plugin-viewport/react";
+import { Scroller, ScrollPluginPackage } from "@embedpdf/plugin-scroll/react";
+import { DocumentManagerPluginPackage } from "@embedpdf/plugin-document-manager/react";
+import { RenderPluginPackage } from "@embedpdf/plugin-render/react";
+import { ZoomPluginPackage, ZoomMode } from "@embedpdf/plugin-zoom/react";
+import {
+  InteractionManagerPluginPackage,
+  PagePointerProvider,
+  GlobalPointerProvider,
+  useInteractionManagerCapability,
+} from "@embedpdf/plugin-interaction-manager/react";
+import { SelectionLayer, SelectionPluginPackage } from "@embedpdf/plugin-selection/react";
+import { TilingLayer, TilingPluginPackage } from "@embedpdf/plugin-tiling/react";
+import { PanPluginPackage } from "@embedpdf/plugin-pan/react";
+import { SpreadPluginPackage, SpreadMode } from "@embedpdf/plugin-spread/react";
+import { SearchPluginPackage } from "@embedpdf/plugin-search/react";
+import { ThumbnailPluginPackage } from "@embedpdf/plugin-thumbnail/react";
+import { RotatePluginPackage, Rotate } from "@embedpdf/plugin-rotate/react";
+import { Rotation, PdfAnnotationSubtype } from "@embedpdf/models";
 
 // Import annotation plugins
-import { HistoryPluginPackage } from '@embedpdf/plugin-history/react';
-import { AnnotationLayer, AnnotationPluginPackage } from '@embedpdf/plugin-annotation/react';
+import { HistoryPluginPackage } from "@embedpdf/plugin-history/react";
+import { AnnotationLayer, AnnotationPluginPackage } from "@embedpdf/plugin-annotation/react";
 
-import { CustomSearchLayer } from '@app/components/viewer/CustomSearchLayer';
-import ToolLoadingFallback from '@app/components/tools/ToolLoadingFallback';
-import { ActionIcon, Center, Stack, Text, Tooltip } from '@mantine/core';
-import CloseIcon from '@mui/icons-material/Close';
-import { ScrollAPIBridge } from '@app/components/viewer/ScrollAPIBridge';
-import { SelectionAPIBridge } from '@app/components/viewer/SelectionAPIBridge';
-import { PanAPIBridge } from '@app/components/viewer/PanAPIBridge';
-import { SpreadAPIBridge } from '@app/components/viewer/SpreadAPIBridge';
-import { SearchAPIBridge } from '@app/components/viewer/SearchAPIBridge';
-import { ThumbnailAPIBridge } from '@app/components/viewer/ThumbnailAPIBridge';
-import { RotateAPIBridge } from '@app/components/viewer/RotateAPIBridge';
-import { DocumentReadyWrapper } from '@app/components/viewer/DocumentReadyWrapper';
+import { CustomSearchLayer } from "@app/components/viewer/CustomSearchLayer";
+import ToolLoadingFallback from "@app/components/tools/ToolLoadingFallback";
+import { ActionIcon, Center, Stack, Text, Tooltip } from "@mantine/core";
+import CloseIcon from "@mui/icons-material/Close";
+import { ScrollAPIBridge } from "@app/components/viewer/ScrollAPIBridge";
+import { SelectionAPIBridge } from "@app/components/viewer/SelectionAPIBridge";
+import { PanAPIBridge } from "@app/components/viewer/PanAPIBridge";
+import { SpreadAPIBridge } from "@app/components/viewer/SpreadAPIBridge";
+import { SearchAPIBridge } from "@app/components/viewer/SearchAPIBridge";
+import { ThumbnailAPIBridge } from "@app/components/viewer/ThumbnailAPIBridge";
+import { RotateAPIBridge } from "@app/components/viewer/RotateAPIBridge";
+import { DocumentReadyWrapper } from "@app/components/viewer/DocumentReadyWrapper";
 import {
   Z_INDEX_SIGNATURE_OVERLAY,
   Z_INDEX_SIGNATURE_OVERLAY_DELETE,
   Z_INDEX_SIGNATURE_OVERLAY_HANDLE,
-} from '@app/styles/zIndex';
+} from "@app/styles/zIndex";
 
 /** Rendered inside EmbedPDF context; exposes interaction manager pause/resume via ref. */
-function InteractionPauseBridge({ bridgeRef }: {
+function InteractionPauseBridge({
+  bridgeRef,
+}: {
   bridgeRef: React.MutableRefObject<{ pause: () => void; resume: () => void } | null>;
 }) {
   const { provides } = useInteractionManagerCapability();
@@ -52,12 +58,14 @@ function InteractionPauseBridge({ bridgeRef }: {
     if (provides) {
       bridgeRef.current = { pause: () => provides.pause(), resume: () => provides.resume() };
     }
-    return () => { bridgeRef.current = null; };
+    return () => {
+      bridgeRef.current = null;
+    };
   }, [provides, bridgeRef]);
   return null;
 }
 
-const DOCUMENT_NAME = 'stirling-pdf-signing-viewer';
+const DOCUMENT_NAME = "stirling-pdf-signing-viewer";
 
 export interface SignaturePreview {
   id: string;
@@ -67,7 +75,7 @@ export interface SignaturePreview {
   width: number;
   height: number;
   signatureData: string; // Base64 PNG image
-  signatureType: 'canvas' | 'image' | 'text';
+  signatureType: "canvas" | "image" | "text";
   color?: string; // Per-participant color (rgb(...) string); falls back to default blue
   participantName?: string; // Shown in tooltip on hover
 }
@@ -78,7 +86,7 @@ interface LocalEmbedPDFWithAnnotationsProps {
   onAnnotationChange?: (annotations: SignaturePreview[]) => void;
   placementMode?: boolean;
   signatureData?: string;
-  signatureType?: 'canvas' | 'image' | 'text';
+  signatureType?: "canvas" | "image" | "text";
   onPlaceSignature?: (id: string, pageIndex: number, x: number, y: number, width: number, height: number) => void;
   onPreviewCountChange?: (count: number) => void;
   initialSignatures?: SignaturePreview[]; // Initial signatures to display (read-only preview)
@@ -98,622 +106,653 @@ export interface AnnotationAPI {
   resetZoom: () => void;
 }
 
-export const LocalEmbedPDFWithAnnotations = forwardRef<AnnotationAPI | null, LocalEmbedPDFWithAnnotationsProps>(({
-  file,
-  url,
-  onAnnotationChange,
-  placementMode = false,
-  signatureData,
-  signatureType,
-  onPlaceSignature,
-  onPreviewCountChange,
-  initialSignatures = [],
-  readOnly = false
-}, ref) => {
-  const [pdfUrl, setPdfUrl] = useState<string | null>(null);
-  const annotationApiRef = useRef<any>(null);
-  const zoomApiRef = useRef<any>(null);
-  const containerRef = useRef<HTMLDivElement>(null);
-
-  // State for signature preview overlays (support multiple)
-  const [signaturePreviews, setSignaturePreviews] = useState<SignaturePreview[]>(initialSignatures);
-
-  // Track if a drag operation just occurred to prevent click from firing
-  const isDraggingRef = useRef(false);
-  const interactionPauseRef = useRef<{ pause: () => void; resume: () => void } | null>(null);
-
-  // Track cursor position over a specific page for hover preview
-  const [cursorOnPage, setCursorOnPage] = useState<{ pageIndex: number; x: number; y: number } | null>(null);
-
-  // Expose annotation API to parent
-  useImperativeHandle(ref, () => ({
-    setActiveTool: (toolId: string | null) => {
-      annotationApiRef.current?.setActiveTool(toolId);
+export const LocalEmbedPDFWithAnnotations = forwardRef<AnnotationAPI | null, LocalEmbedPDFWithAnnotationsProps>(
+  (
+    {
+      file,
+      url,
+      onAnnotationChange,
+      placementMode = false,
+      signatureData,
+      signatureType,
+      onPlaceSignature,
+      onPreviewCountChange,
+      initialSignatures = [],
+      readOnly = false,
     },
-    setToolDefaults: (toolId: string, defaults: any) => {
-      annotationApiRef.current?.setToolDefaults(toolId, defaults);
-    },
-    getActiveTool: () => {
-      return annotationApiRef.current?.getActiveTool();
-    },
-    getPageAnnotations: async (pageIndex: number) => {
-      if (!annotationApiRef.current?.getPageAnnotations) return [];
-      const task = annotationApiRef.current.getPageAnnotations({ pageIndex });
-      if (task?.toPromise) {
-        return await task.toPromise();
-      }
-      return [];
-    },
-    getAllAnnotations: async () => {
-      // Get all annotations across all pages
-      // Note: In practice, we'll use getPageAnnotations for the specific page
-      // where the user placed their signature, so this method is optional
-      if (!annotationApiRef.current?.getPageAnnotations) return [];
+    ref,
+  ) => {
+    const [pdfUrl, setPdfUrl] = useState<string | null>(null);
+    const annotationApiRef = useRef<any>(null);
+    const zoomApiRef = useRef<any>(null);
+    const containerRef = useRef<HTMLDivElement>(null);
 
-      // Would need document page count to iterate through all pages
-      // For signing workflow, we track annotations via onAnnotationChange callback instead
-      return [];
-    },
-    getSignaturePreviews: () => {
-      return signaturePreviews;
-    },
-    clearPreviews: () => {
-      setSignaturePreviews([]);
-    },
-    zoomIn: () => {
-      zoomApiRef.current?.zoomIn();
-    },
-    zoomOut: () => {
-      zoomApiRef.current?.zoomOut();
-    },
-    resetZoom: () => {
-      zoomApiRef.current?.resetZoom();
-    },
-  }), [signaturePreviews]);
+    // State for signature preview overlays (support multiple)
+    const [signaturePreviews, setSignaturePreviews] = useState<SignaturePreview[]>(initialSignatures);
 
-  // Convert File to URL if needed
-  useEffect(() => {
-    if (file) {
-      const objectUrl = URL.createObjectURL(file);
-      setPdfUrl(objectUrl);
-      return () => URL.revokeObjectURL(objectUrl);
-    } else if (url) {
-      setPdfUrl(url);
-    }
-  }, [file, url]);
+    // Track if a drag operation just occurred to prevent click from firing
+    const isDraggingRef = useRef(false);
+    const interactionPauseRef = useRef<{ pause: () => void; resume: () => void } | null>(null);
 
-  // Notify parent when signature previews change
-  useEffect(() => {
-    if (onAnnotationChange) {
-      onAnnotationChange(signaturePreviews);
-    }
-    if (onPreviewCountChange) {
-      onPreviewCountChange(signaturePreviews.length);
-    }
-  }, [signaturePreviews, onAnnotationChange, onPreviewCountChange]);
+    // Track cursor position over a specific page for hover preview
+    const [cursorOnPage, setCursorOnPage] = useState<{ pageIndex: number; x: number; y: number } | null>(null);
 
-  // Create plugins configuration with annotation support
-  const plugins = useMemo(() => {
-    if (!pdfUrl) return [];
-
-    // Calculate 3.5rem in pixels dynamically based on root font size
-    const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
-    const viewportGap = rootFontSize * 3.5;
-
-    return [
-      createPluginRegistration(DocumentManagerPluginPackage, {
-        initialDocuments: [{
-          url: pdfUrl,
-          name: DOCUMENT_NAME,
-        }],
-      }),
-      createPluginRegistration(ViewportPluginPackage, {
-        viewportGap,
-      }),
-      createPluginRegistration(ScrollPluginPackage),
-      createPluginRegistration(RenderPluginPackage, {
-        withForms: true,
-        withAnnotations: true,
-      }),
-
-      // Register interaction manager (required for annotations)
-      createPluginRegistration(InteractionManagerPluginPackage),
-
-      // Register selection plugin (depends on InteractionManager)
-      createPluginRegistration(SelectionPluginPackage),
-
-      // Register history plugin for undo/redo (recommended for annotations)
-      createPluginRegistration(HistoryPluginPackage),
-
-      // Register annotation plugin (depends on InteractionManager, Selection, History)
-      createPluginRegistration(AnnotationPluginPackage, {
-        annotationAuthor: 'Digital Signature',
-        autoCommit: true,
-        deactivateToolAfterCreate: false,
-        selectAfterCreate: true,
-      }),
-
-      // Register pan plugin
-      createPluginRegistration(PanPluginPackage, {
-        defaultMode: 'mobile',
-      }),
-
-      // Register zoom plugin
-      createPluginRegistration(ZoomPluginPackage, {
-        defaultZoomLevel: ZoomMode.FitWidth,
-        minZoom: 0.2,
-        maxZoom: 3.0,
-      }),
-
-      // Register tiling plugin
-      createPluginRegistration(TilingPluginPackage, {
-        tileSize: 768,
-        overlapPx: 5,
-        extraRings: 1,
-      }),
-
-      // Register spread plugin
-      createPluginRegistration(SpreadPluginPackage, {
-        defaultSpreadMode: SpreadMode.None,
-      }),
-
-      // Register search plugin
-      createPluginRegistration(SearchPluginPackage),
-
-      // Register thumbnail plugin
-      createPluginRegistration(ThumbnailPluginPackage),
-
-      // Register rotate plugin
-      createPluginRegistration(RotatePluginPackage, {
-        defaultRotation: Rotation.Degree0,
-      }),
-    ];
-  }, [pdfUrl]);
-
-  // Initialize the engine
-  const { engine, isLoading, error } = usePdfiumEngine();
-
-  // Early return if no file or URL provided
-  if (!file && !url) {
-    return (
-      <Center h="100%" w="100%">
-        <Stack align="center" gap="md">
-          <div style={{ fontSize: '24px' }}>📄</div>
-          <Text c="dimmed" size="sm">
-            No PDF provided
-          </Text>
-        </Stack>
-      </Center>
-    );
-  }
-
-  if (isLoading || !engine || !pdfUrl) {
-    return <ToolLoadingFallback toolName="PDF Engine" />;
-  }
-
-  if (error) {
-    return (
-      <Center h="100%" w="100%">
-        <Stack align="center" gap="md">
-          <div style={{ fontSize: '24px' }}>❌</div>
-          <Text c="red" size="sm" style={{ textAlign: 'center' }}>
-            Error loading PDF engine: {error.message}
-          </Text>
-        </Stack>
-      </Center>
-    );
-  }
-
-  return (
-    <div ref={containerRef} style={{
-      height: '100%',
-      width: '100%',
-      position: 'relative',
-      overflow: 'hidden',
-      flex: 1,
-      minHeight: 0,
-      minWidth: 0
-    }}>
-      <EmbedPDF
-        key={pdfUrl}
-        engine={engine}
-        plugins={plugins}
-        onInitialized={async (registry: PluginRegistry) => {
-          // v2.0: Use registry.getPlugin() to access plugin APIs
-          const annotationPlugin = registry.getPlugin('annotation');
-          if (!annotationPlugin || !annotationPlugin.provides) return;
-
-          const annotationApi = annotationPlugin.provides();
-          if (!annotationApi) return;
-
-          // Store reference for parent component access
-          annotationApiRef.current = annotationApi;
-
-          // Add custom signature image tool
-          // Using FreeText with appearance for better image support
-          annotationApi.addTool({
-            id: 'signatureStamp',
-            name: 'Digital Signature',
-            interaction: { exclusive: false, cursor: 'crosshair' },
-            matchScore: () => 0,
-            defaults: {
-              type: PdfAnnotationSubtype.STAMP,
-              // Image data will be set dynamically via setToolDefaults
-              width: 150,
-              height: 75,
-            },
-          });
-
-          // Add custom ink signature tool
-          annotationApi.addTool({
-            id: 'signatureInk',
-            name: 'Signature Draw',
-            interaction: { exclusive: true, cursor: 'crosshair' },
-            matchScore: () => 0,
-            defaults: {
-              type: PdfAnnotationSubtype.INK,
-              color: '#000000',
-              opacity: 1.0,
-              borderWidth: 2,
-            },
-          });
-
-          // Wire zoom API so parent can call zoomIn/zoomOut/resetZoom
-          const zoomPlugin = registry.getPlugin('zoom');
-          if (zoomPlugin?.provides) {
-            const zoomApi = zoomPlugin.provides();
-            zoomApiRef.current = {
-              zoomIn:    () => zoomApi.zoomIn?.(),
-              zoomOut:   () => zoomApi.zoomOut?.(),
-              resetZoom: () => zoomApi.requestZoom?.(ZoomMode.FitWidth, { vx: 0.5, vy: 0 }),
-            };
+    // Expose annotation API to parent
+    useImperativeHandle(
+      ref,
+      () => ({
+        setActiveTool: (toolId: string | null) => {
+          annotationApiRef.current?.setActiveTool(toolId);
+        },
+        setToolDefaults: (toolId: string, defaults: any) => {
+          annotationApiRef.current?.setToolDefaults(toolId, defaults);
+        },
+        getActiveTool: () => {
+          return annotationApiRef.current?.getActiveTool();
+        },
+        getPageAnnotations: async (pageIndex: number) => {
+          if (!annotationApiRef.current?.getPageAnnotations) return [];
+          const task = annotationApiRef.current.getPageAnnotations({ pageIndex });
+          if (task?.toPromise) {
+            return await task.toPromise();
           }
+          return [];
+        },
+        getAllAnnotations: async () => {
+          // Get all annotations across all pages
+          // Note: In practice, we'll use getPageAnnotations for the specific page
+          // where the user placed their signature, so this method is optional
+          if (!annotationApiRef.current?.getPageAnnotations) return [];
 
+          // Would need document page count to iterate through all pages
+          // For signing workflow, we track annotations via onAnnotationChange callback instead
+          return [];
+        },
+        getSignaturePreviews: () => {
+          return signaturePreviews;
+        },
+        clearPreviews: () => {
+          setSignaturePreviews([]);
+        },
+        zoomIn: () => {
+          zoomApiRef.current?.zoomIn();
+        },
+        zoomOut: () => {
+          zoomApiRef.current?.zoomOut();
+        },
+        resetZoom: () => {
+          zoomApiRef.current?.resetZoom();
+        },
+      }),
+      [signaturePreviews],
+    );
 
+    // Convert File to URL if needed
+    useEffect(() => {
+      if (file) {
+        const objectUrl = URL.createObjectURL(file);
+        setPdfUrl(objectUrl);
+        return () => URL.revokeObjectURL(objectUrl);
+      } else if (url) {
+        setPdfUrl(url);
+      }
+    }, [file, url]);
+
+    // Notify parent when signature previews change
+    useEffect(() => {
+      if (onAnnotationChange) {
+        onAnnotationChange(signaturePreviews);
+      }
+      if (onPreviewCountChange) {
+        onPreviewCountChange(signaturePreviews.length);
+      }
+    }, [signaturePreviews, onAnnotationChange, onPreviewCountChange]);
+
+    // Create plugins configuration with annotation support
+    const plugins = useMemo(() => {
+      if (!pdfUrl) return [];
+
+      // Calculate 3.5rem in pixels dynamically based on root font size
+      const rootFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+      const viewportGap = rootFontSize * 3.5;
+
+      return [
+        createPluginRegistration(DocumentManagerPluginPackage, {
+          initialDocuments: [
+            {
+              url: pdfUrl,
+              name: DOCUMENT_NAME,
+            },
+          ],
+        }),
+        createPluginRegistration(ViewportPluginPackage, {
+          viewportGap,
+        }),
+        createPluginRegistration(ScrollPluginPackage),
+        createPluginRegistration(RenderPluginPackage, {
+          withForms: true,
+          withAnnotations: true,
+        }),
+
+        // Register interaction manager (required for annotations)
+        createPluginRegistration(InteractionManagerPluginPackage),
+
+        // Register selection plugin (depends on InteractionManager)
+        createPluginRegistration(SelectionPluginPackage),
+
+        // Register history plugin for undo/redo (recommended for annotations)
+        createPluginRegistration(HistoryPluginPackage),
+
+        // Register annotation plugin (depends on InteractionManager, Selection, History)
+        createPluginRegistration(AnnotationPluginPackage, {
+          annotationAuthor: "Digital Signature",
+          autoCommit: true,
+          deactivateToolAfterCreate: false,
+          selectAfterCreate: true,
+        }),
+
+        // Register pan plugin
+        createPluginRegistration(PanPluginPackage, {
+          defaultMode: "mobile",
+        }),
+
+        // Register zoom plugin
+        createPluginRegistration(ZoomPluginPackage, {
+          defaultZoomLevel: ZoomMode.FitWidth,
+          minZoom: 0.2,
+          maxZoom: 3.0,
+        }),
+
+        // Register tiling plugin
+        createPluginRegistration(TilingPluginPackage, {
+          tileSize: 768,
+          overlapPx: 5,
+          extraRings: 1,
+        }),
+
+        // Register spread plugin
+        createPluginRegistration(SpreadPluginPackage, {
+          defaultSpreadMode: SpreadMode.None,
+        }),
+
+        // Register search plugin
+        createPluginRegistration(SearchPluginPackage),
+
+        // Register thumbnail plugin
+        createPluginRegistration(ThumbnailPluginPackage),
+
+        // Register rotate plugin
+        createPluginRegistration(RotatePluginPackage, {
+          defaultRotation: Rotation.Degree0,
+        }),
+      ];
+    }, [pdfUrl]);
+
+    // Initialize the engine
+    const { engine, isLoading, error } = usePdfiumEngine();
+
+    // Early return if no file or URL provided
+    if (!file && !url) {
+      return (
+        <Center h="100%" w="100%">
+          <Stack align="center" gap="md">
+            <div style={{ fontSize: "24px" }}>📄</div>
+            <Text c="dimmed" size="sm">
+              No PDF provided
+            </Text>
+          </Stack>
+        </Center>
+      );
+    }
+
+    if (isLoading || !engine || !pdfUrl) {
+      return <ToolLoadingFallback toolName="PDF Engine" />;
+    }
+
+    if (error) {
+      return (
+        <Center h="100%" w="100%">
+          <Stack align="center" gap="md">
+            <div style={{ fontSize: "24px" }}>❌</div>
+            <Text c="red" size="sm" style={{ textAlign: "center" }}>
+              Error loading PDF engine: {error.message}
+            </Text>
+          </Stack>
+        </Center>
+      );
+    }
+
+    return (
+      <div
+        ref={containerRef}
+        style={{
+          height: "100%",
+          width: "100%",
+          position: "relative",
+          overflow: "hidden",
+          flex: 1,
+          minHeight: 0,
+          minWidth: 0,
         }}
       >
-        <InteractionPauseBridge bridgeRef={interactionPauseRef} />
-        <ScrollAPIBridge />
-        <SelectionAPIBridge />
-        <PanAPIBridge />
-        <SpreadAPIBridge />
-        <SearchAPIBridge />
-        <ThumbnailAPIBridge />
-        <RotateAPIBridge />
-        <DocumentReadyWrapper
-          fallback={
-            <Center style={{ height: '100%', width: '100%' }}>
-              <ToolLoadingFallback />
-            </Center>
-          }
+        <EmbedPDF
+          key={pdfUrl}
+          engine={engine}
+          plugins={plugins}
+          onInitialized={async (registry: PluginRegistry) => {
+            // v2.0: Use registry.getPlugin() to access plugin APIs
+            const annotationPlugin = registry.getPlugin("annotation");
+            if (!annotationPlugin || !annotationPlugin.provides) return;
+
+            const annotationApi = annotationPlugin.provides();
+            if (!annotationApi) return;
+
+            // Store reference for parent component access
+            annotationApiRef.current = annotationApi;
+
+            // Add custom signature image tool
+            // Using FreeText with appearance for better image support
+            annotationApi.addTool({
+              id: "signatureStamp",
+              name: "Digital Signature",
+              interaction: { exclusive: false, cursor: "crosshair" },
+              matchScore: () => 0,
+              defaults: {
+                type: PdfAnnotationSubtype.STAMP,
+                // Image data will be set dynamically via setToolDefaults
+                width: 150,
+                height: 75,
+              },
+            });
+
+            // Add custom ink signature tool
+            annotationApi.addTool({
+              id: "signatureInk",
+              name: "Signature Draw",
+              interaction: { exclusive: true, cursor: "crosshair" },
+              matchScore: () => 0,
+              defaults: {
+                type: PdfAnnotationSubtype.INK,
+                color: "#000000",
+                opacity: 1.0,
+                borderWidth: 2,
+              },
+            });
+
+            // Wire zoom API so parent can call zoomIn/zoomOut/resetZoom
+            const zoomPlugin = registry.getPlugin("zoom");
+            if (zoomPlugin?.provides) {
+              const zoomApi = zoomPlugin.provides();
+              zoomApiRef.current = {
+                zoomIn: () => zoomApi.zoomIn?.(),
+                zoomOut: () => zoomApi.zoomOut?.(),
+                resetZoom: () => zoomApi.requestZoom?.(ZoomMode.FitWidth, { vx: 0.5, vy: 0 }),
+              };
+            }
+          }}
         >
-          {(documentId) => (
-            <GlobalPointerProvider documentId={documentId}>
-              <Viewport
-                documentId={documentId}
-                style={{
-                  backgroundColor: 'var(--bg-background)',
-                  height: '100%',
-                  width: '100%',
-                  maxHeight: '100%',
-                  maxWidth: '100%',
-                  overflow: 'auto',
-                  position: 'relative',
-                  flex: 1,
-                  minHeight: 0,
-                  minWidth: 0,
-                  contain: 'strict',
-                }}
-              >
-                <Scroller
+          <InteractionPauseBridge bridgeRef={interactionPauseRef} />
+          <ScrollAPIBridge />
+          <SelectionAPIBridge />
+          <PanAPIBridge />
+          <SpreadAPIBridge />
+          <SearchAPIBridge />
+          <ThumbnailAPIBridge />
+          <RotateAPIBridge />
+          <DocumentReadyWrapper
+            fallback={
+              <Center style={{ height: "100%", width: "100%" }}>
+                <ToolLoadingFallback />
+              </Center>
+            }
+          >
+            {(documentId) => (
+              <GlobalPointerProvider documentId={documentId}>
+                <Viewport
                   documentId={documentId}
-                  renderPage={({ width, height, pageIndex }) => (
-                    <Rotate key={`${documentId}-${pageIndex}`} documentId={documentId} pageIndex={pageIndex}>
-                      <PagePointerProvider documentId={documentId} pageIndex={pageIndex}>
-                        <div
-                          style={{
-                            width,
-                            height,
-                            position: 'relative',
-                            userSelect: 'none',
-                            WebkitUserSelect: 'none',
-                            MozUserSelect: 'none',
-                            msUserSelect: 'none',
-                            cursor: placementMode ? 'crosshair' : 'default',
-                            boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
-                          }}
-                          draggable={false}
-                          onDragStart={(e) => e.preventDefault()}
-                          onDrop={(e) => e.preventDefault()}
-                          onDragOver={(e) => e.preventDefault()}
-                          onMouseMove={(e) => {
-                            if (!placementMode || !signatureData) return;
-                            const rect = e.currentTarget.getBoundingClientRect();
-                            setCursorOnPage({ pageIndex, x: e.clientX - rect.left, y: e.clientY - rect.top });
-                          }}
-                          onMouseLeave={() => {
-                            setCursorOnPage(prev => prev?.pageIndex === pageIndex ? null : prev);
-                          }}
-                          onClick={(e) => {
-                            if (isDraggingRef.current) return;
-
-                            if (placementMode && onPlaceSignature) {
+                  style={{
+                    backgroundColor: "var(--bg-background)",
+                    height: "100%",
+                    width: "100%",
+                    maxHeight: "100%",
+                    maxWidth: "100%",
+                    overflow: "auto",
+                    position: "relative",
+                    flex: 1,
+                    minHeight: 0,
+                    minWidth: 0,
+                    contain: "strict",
+                  }}
+                >
+                  <Scroller
+                    documentId={documentId}
+                    renderPage={({ width, height, pageIndex }) => (
+                      <Rotate key={`${documentId}-${pageIndex}`} documentId={documentId} pageIndex={pageIndex}>
+                        <PagePointerProvider documentId={documentId} pageIndex={pageIndex}>
+                          <div
+                            style={{
+                              width,
+                              height,
+                              position: "relative",
+                              userSelect: "none",
+                              WebkitUserSelect: "none",
+                              MozUserSelect: "none",
+                              msUserSelect: "none",
+                              cursor: placementMode ? "crosshair" : "default",
+                              boxShadow: "0 2px 8px rgba(0, 0, 0, 0.15)",
+                            }}
+                            draggable={false}
+                            onDragStart={(e) => e.preventDefault()}
+                            onDrop={(e) => e.preventDefault()}
+                            onDragOver={(e) => e.preventDefault()}
+                            onMouseMove={(e) => {
+                              if (!placementMode || !signatureData) return;
                               const rect = e.currentTarget.getBoundingClientRect();
-                              // Store as fractions (0–1) of the rendered page so overlays
-                              // remain correct at any zoom level (scale not in new API)
-                              const sigWidth = 150 / width;
-                              const sigHeight = 75 / height;
-                              const rawX = (e.clientX - rect.left) / width;
-                              const rawY = (e.clientY - rect.top) / height;
-                              const x = Math.max(0, Math.min(rawX - sigWidth / 2, 1 - sigWidth));
-                              const y = Math.max(0, Math.min(rawY - sigHeight / 2, 1 - sigHeight));
+                              setCursorOnPage({ pageIndex, x: e.clientX - rect.left, y: e.clientY - rect.top });
+                            }}
+                            onMouseLeave={() => {
+                              setCursorOnPage((prev) => (prev?.pageIndex === pageIndex ? null : prev));
+                            }}
+                            onClick={(e) => {
+                              if (isDraggingRef.current) return;
 
-                              const newPreview = {
-                                id: `sig-preview-${Date.now()}-${Math.random()}`,
-                                pageIndex,
-                                x,
-                                y,
-                                width: sigWidth,
-                                height: sigHeight,
-                                signatureData: signatureData || '',
-                                signatureType: signatureType || 'image',
-                              };
-                              setSignaturePreviews(prev => [...prev, newPreview]);
-                              onPlaceSignature(newPreview.id, pageIndex, x * width, y * height, sigWidth * width, sigHeight * height);
-                            }
-                          }}
-                        >
-                          <TilingLayer documentId={documentId} pageIndex={pageIndex} />
+                              if (placementMode && onPlaceSignature) {
+                                const rect = e.currentTarget.getBoundingClientRect();
+                                // Store as fractions (0–1) of the rendered page so overlays
+                                // remain correct at any zoom level (scale not in new API)
+                                const sigWidth = 150 / width;
+                                const sigHeight = 75 / height;
+                                const rawX = (e.clientX - rect.left) / width;
+                                const rawY = (e.clientY - rect.top) / height;
+                                const x = Math.max(0, Math.min(rawX - sigWidth / 2, 1 - sigWidth));
+                                const y = Math.max(0, Math.min(rawY - sigHeight / 2, 1 - sigHeight));
 
-                          <CustomSearchLayer documentId={documentId} pageIndex={pageIndex} />
+                                const newPreview = {
+                                  id: `sig-preview-${Date.now()}-${Math.random()}`,
+                                  pageIndex,
+                                  x,
+                                  y,
+                                  width: sigWidth,
+                                  height: sigHeight,
+                                  signatureData: signatureData || "",
+                                  signatureType: signatureType || "image",
+                                };
+                                setSignaturePreviews((prev) => [...prev, newPreview]);
+                                onPlaceSignature(
+                                  newPreview.id,
+                                  pageIndex,
+                                  x * width,
+                                  y * height,
+                                  sigWidth * width,
+                                  sigHeight * height,
+                                );
+                              }
+                            }}
+                          >
+                            <TilingLayer documentId={documentId} pageIndex={pageIndex} />
 
-                          <SelectionLayer documentId={documentId} pageIndex={pageIndex} />
+                            <CustomSearchLayer documentId={documentId} pageIndex={pageIndex} />
 
-                          {/* Annotation layer for signatures */}
-                          <AnnotationLayer
-                            documentId={documentId}
-                            pageIndex={pageIndex}
-                            selectionOutline={{ color: "#007ACC" }}
-                          />
+                            <SelectionLayer documentId={documentId} pageIndex={pageIndex} />
 
-                          {/* Signature preview overlays (support multiple) */}
-                          {signaturePreviews
-                            .filter(preview => preview.pageIndex === pageIndex)
-                            .map((preview) => {
-                              if (!preview.signatureData) return null;
-                              const color = preview.color ?? 'rgb(0, 122, 204)';
-                              const colorOpacity = (opacity: number) =>
-                                color.startsWith('rgb(')
-                                  ? color.replace('rgb(', 'rgba(').replace(')', `, ${opacity})`)
-                                  : color;
-                              return (
-                              <Tooltip
-                                key={preview.id}
-                                label={preview.participantName ?? ''}
-                                position="top"
-                                withArrow
-                                disabled={!preview.participantName}
-                              >
-                              <div
-                                style={{
-                                  position: 'absolute',
-                                  left: preview.x * width,
-                                  top: preview.y * height,
-                                  width: preview.width * width,
-                                  height: preview.height * height,
-                                  border: readOnly ? `1px dashed ${colorOpacity(0.4)}` : `2px solid ${color}`,
-                                  boxShadow: readOnly ? 'none' : `0 0 10px ${colorOpacity(0.5)}`,
-                                  cursor: readOnly ? 'default' : 'move',
-                                  zIndex: Z_INDEX_SIGNATURE_OVERLAY,
-                                  backgroundColor: readOnly ? 'transparent' : 'rgba(255, 255, 255, 0.1)',
-                                  pointerEvents: 'auto',
-                                }}
-                              >
-                                {/* Delete button - only show when not read-only */}
-                                {!readOnly && (
-                                  <ActionIcon
-                                    size="sm"
-                                    radius="xl"
-                                    variant="filled"
-                                    color="red"
-                                    style={{
-                                      position: 'absolute',
-                                      top: -10,
-                                      right: -10,
-                                      zIndex: Z_INDEX_SIGNATURE_OVERLAY_DELETE,
-                                      pointerEvents: 'auto',
-                                      boxShadow: '0 1px 4px rgba(0,0,0,0.25)',
-                                      border: '2px solid white',
-                                    }}
-                                    onClick={(e) => {
-                                      e.stopPropagation();
-                                      setSignaturePreviews(prev => prev.filter(p => p.id !== preview.id));
-                                    }}
-                                    aria-label="Delete signature"
-                                  >
-                                    <CloseIcon style={{ fontSize: '0.8rem' }} />
-                                  </ActionIcon>
-                                )}
-
-                                <div
-                                  style={{
-                                    width: '100%',
-                                    height: '100%',
-                                    pointerEvents: readOnly ? 'none' : 'auto',
-                                  }}
-                                  onPointerDown={readOnly ? undefined : (e) => {
-                                    if ((e.target as HTMLElement).dataset.resizeHandle) return;
-                                    e.stopPropagation();
-                                    e.preventDefault();
-                                    const el = e.currentTarget;
-                                    el.setPointerCapture(e.pointerId);
-                                    interactionPauseRef.current?.pause();
-
-                                    const startX = e.clientX;
-                                    const startY = e.clientY;
-                                    const startLeft = preview.x;
-                                    const startTop = preview.y;
-
-                                    const handlePointerMove = (moveEvent: PointerEvent) => {
-                                      isDraggingRef.current = true;
-                                      const deltaX = (moveEvent.clientX - startX) / width;
-                                      const deltaY = (moveEvent.clientY - startY) / height;
-                                      setSignaturePreviews(prev => prev.map(p =>
-                                        p.id === preview.id
-                                          ? { ...p, x: startLeft + deltaX, y: startTop + deltaY }
-                                          : p
-                                      ));
-                                    };
-
-                                    const handlePointerUp = (upEvent: PointerEvent) => {
-                                      el.removeEventListener('pointermove', handlePointerMove);
-                                      el.removeEventListener('pointerup', handlePointerUp);
-                                      el.releasePointerCapture(upEvent.pointerId);
-                                      interactionPauseRef.current?.resume();
-                                      window.getSelection()?.removeAllRanges();
-                                      setTimeout(() => { isDraggingRef.current = false; }, 10);
-                                    };
-
-                                    el.addEventListener('pointermove', handlePointerMove);
-                                    el.addEventListener('pointerup', handlePointerUp);
-                                  }}
-                                >
-                                  <img
-                                    src={preview.signatureData}
-                                    alt="Signature preview"
-                                    style={{
-                                      width: '100%',
-                                      height: '100%',
-                                      objectFit: 'contain',
-                                      pointerEvents: 'none',
-                                    }}
-                                  />
-
-                                  {/* Resize handles */}
-                                  {[
-                                    { position: 'nw', cursor: 'nw-resize', top: -4, left: -4 },
-                                    { position: 'ne', cursor: 'ne-resize', top: -4, right: -4 },
-                                    { position: 'sw', cursor: 'sw-resize', bottom: -4, left: -4 },
-                                    { position: 'se', cursor: 'se-resize', bottom: -4, right: -4 },
-                                  ].map((handle) => (
-                                    <div
-                                      key={handle.position}
-                                      data-resize-handle="true"
-                                      style={{
-                                        position: 'absolute',
-                                        width: 8,
-                                        height: 8,
-                                        backgroundColor: color,
-                                        border: '1px solid white',
-                                        cursor: handle.cursor,
-                                        zIndex: Z_INDEX_SIGNATURE_OVERLAY_HANDLE,
-                                        ...(handle.top !== undefined && { top: handle.top }),
-                                        ...(handle.bottom !== undefined && { bottom: handle.bottom }),
-                                        ...(handle.left !== undefined && { left: handle.left }),
-                                        ...(handle.right !== undefined && { right: handle.right }),
-                                      }}
-                                      onPointerDown={(e) => {
-                                        e.stopPropagation();
-                                        e.preventDefault();
-                                        const el = e.currentTarget;
-                                        el.setPointerCapture(e.pointerId);
-                                        interactionPauseRef.current?.pause();
-
-                                        const startX = e.clientX;
-                                        const startY = e.clientY;
-                                        const startWidth = preview.width;
-                                        const startHeight = preview.height;
-                                        const startLeft = preview.x;
-                                        const startTop = preview.y;
-
-                                        const handlePointerMove = (moveEvent: PointerEvent) => {
-                                          isDraggingRef.current = true;
-                                          const deltaX = (moveEvent.clientX - startX) / width;
-                                          const deltaY = (moveEvent.clientY - startY) / height;
-
-                                          let newWidth = startWidth;
-                                          let newHeight = startHeight;
-                                          let newX = startLeft;
-                                          let newY = startTop;
-
-                                          // Min sizes as fractions: 50px / pageWidth, 25px / pageHeight
-                                          const minW = 50 / width;
-                                          const minH = 25 / height;
-
-                                          if (handle.position.includes('e')) {
-                                            newWidth = Math.max(minW, startWidth + deltaX);
-                                          }
-                                          if (handle.position.includes('w')) {
-                                            newWidth = Math.max(minW, startWidth - deltaX);
-                                            newX = startLeft + (startWidth - newWidth);
-                                          }
-                                          if (handle.position.includes('s')) {
-                                            newHeight = Math.max(minH, startHeight + deltaY);
-                                          }
-                                          if (handle.position.includes('n')) {
-                                            newHeight = Math.max(minH, startHeight - deltaY);
-                                            newY = startTop + (startHeight - newHeight);
-                                          }
-
-                                          setSignaturePreviews(prev => prev.map(p =>
-                                            p.id === preview.id
-                                              ? { ...p, x: newX, y: newY, width: newWidth, height: newHeight }
-                                              : p
-                                          ));
-                                        };
-
-                                        const handlePointerUp = (upEvent: PointerEvent) => {
-                                          el.removeEventListener('pointermove', handlePointerMove);
-                                          el.removeEventListener('pointerup', handlePointerUp);
-                                          el.releasePointerCapture(upEvent.pointerId);
-                                          interactionPauseRef.current?.resume();
-                                          window.getSelection()?.removeAllRanges();
-                                          setTimeout(() => { isDraggingRef.current = false; }, 10);
-                                        };
-
-                                        el.addEventListener('pointermove', handlePointerMove);
-                                        el.addEventListener('pointerup', handlePointerUp);
-                                      }}
-                                    />
-                                  ))}
-                                </div>
-                              </div>
-                              </Tooltip>
-                              );
-                            })}
-
-                          {/* Hover preview: ghost signature following cursor in placement mode */}
-                          {placementMode && signatureData && cursorOnPage?.pageIndex === pageIndex && (
-                            <img
-                              src={signatureData}
-                              alt=""
-                              style={{
-                                position: 'absolute',
-                                left: Math.max(0, Math.min(cursorOnPage.x - 75, width - 150)),
-                                top: Math.max(0, Math.min(cursorOnPage.y - 37.5, height - 75)),
-                                width: 150,
-                                height: 75,
-                                opacity: 0.6,
-                                pointerEvents: 'none',
-                                objectFit: 'contain',
-                                boxShadow: '0 0 0 1px rgba(30, 136, 229, 0.55), 0 6px 18px rgba(30, 136, 229, 0.25)',
-                                borderRadius: '4px',
-                                zIndex: Z_INDEX_SIGNATURE_OVERLAY + 1,
-                              }}
+                            {/* Annotation layer for signatures */}
+                            <AnnotationLayer
+                              documentId={documentId}
+                              pageIndex={pageIndex}
+                              selectionOutline={{ color: "#007ACC" }}
                             />
-                          )}
-                        </div>
-                      </PagePointerProvider>
-                    </Rotate>
-                  )}
-                />
-              </Viewport>
-            </GlobalPointerProvider>
-          )}
-        </DocumentReadyWrapper>
-      </EmbedPDF>
-    </div>
-  );
-});
 
-LocalEmbedPDFWithAnnotations.displayName = 'LocalEmbedPDFWithAnnotations';
+                            {/* Signature preview overlays (support multiple) */}
+                            {signaturePreviews
+                              .filter((preview) => preview.pageIndex === pageIndex)
+                              .map((preview) => {
+                                if (!preview.signatureData) return null;
+                                const color = preview.color ?? "rgb(0, 122, 204)";
+                                const colorOpacity = (opacity: number) =>
+                                  color.startsWith("rgb(")
+                                    ? color.replace("rgb(", "rgba(").replace(")", `, ${opacity})`)
+                                    : color;
+                                return (
+                                  <Tooltip
+                                    key={preview.id}
+                                    label={preview.participantName ?? ""}
+                                    position="top"
+                                    withArrow
+                                    disabled={!preview.participantName}
+                                  >
+                                    <div
+                                      style={{
+                                        position: "absolute",
+                                        left: preview.x * width,
+                                        top: preview.y * height,
+                                        width: preview.width * width,
+                                        height: preview.height * height,
+                                        border: readOnly ? `1px dashed ${colorOpacity(0.4)}` : `2px solid ${color}`,
+                                        boxShadow: readOnly ? "none" : `0 0 10px ${colorOpacity(0.5)}`,
+                                        cursor: readOnly ? "default" : "move",
+                                        zIndex: Z_INDEX_SIGNATURE_OVERLAY,
+                                        backgroundColor: readOnly ? "transparent" : "rgba(255, 255, 255, 0.1)",
+                                        pointerEvents: "auto",
+                                      }}
+                                    >
+                                      {/* Delete button - only show when not read-only */}
+                                      {!readOnly && (
+                                        <ActionIcon
+                                          size="sm"
+                                          radius="xl"
+                                          variant="filled"
+                                          color="red"
+                                          style={{
+                                            position: "absolute",
+                                            top: -10,
+                                            right: -10,
+                                            zIndex: Z_INDEX_SIGNATURE_OVERLAY_DELETE,
+                                            pointerEvents: "auto",
+                                            boxShadow: "0 1px 4px rgba(0,0,0,0.25)",
+                                            border: "2px solid white",
+                                          }}
+                                          onClick={(e) => {
+                                            e.stopPropagation();
+                                            setSignaturePreviews((prev) => prev.filter((p) => p.id !== preview.id));
+                                          }}
+                                          aria-label="Delete signature"
+                                        >
+                                          <CloseIcon style={{ fontSize: "0.8rem" }} />
+                                        </ActionIcon>
+                                      )}
+
+                                      <div
+                                        style={{
+                                          width: "100%",
+                                          height: "100%",
+                                          pointerEvents: readOnly ? "none" : "auto",
+                                        }}
+                                        onPointerDown={
+                                          readOnly
+                                            ? undefined
+                                            : (e) => {
+                                                if ((e.target as HTMLElement).dataset.resizeHandle) return;
+                                                e.stopPropagation();
+                                                e.preventDefault();
+                                                const el = e.currentTarget;
+                                                el.setPointerCapture(e.pointerId);
+                                                interactionPauseRef.current?.pause();
+
+                                                const startX = e.clientX;
+                                                const startY = e.clientY;
+                                                const startLeft = preview.x;
+                                                const startTop = preview.y;
+
+                                                const handlePointerMove = (moveEvent: PointerEvent) => {
+                                                  isDraggingRef.current = true;
+                                                  const deltaX = (moveEvent.clientX - startX) / width;
+                                                  const deltaY = (moveEvent.clientY - startY) / height;
+                                                  setSignaturePreviews((prev) =>
+                                                    prev.map((p) =>
+                                                      p.id === preview.id
+                                                        ? { ...p, x: startLeft + deltaX, y: startTop + deltaY }
+                                                        : p,
+                                                    ),
+                                                  );
+                                                };
+
+                                                const handlePointerUp = (upEvent: PointerEvent) => {
+                                                  el.removeEventListener("pointermove", handlePointerMove);
+                                                  el.removeEventListener("pointerup", handlePointerUp);
+                                                  el.releasePointerCapture(upEvent.pointerId);
+                                                  interactionPauseRef.current?.resume();
+                                                  window.getSelection()?.removeAllRanges();
+                                                  setTimeout(() => {
+                                                    isDraggingRef.current = false;
+                                                  }, 10);
+                                                };
+
+                                                el.addEventListener("pointermove", handlePointerMove);
+                                                el.addEventListener("pointerup", handlePointerUp);
+                                              }
+                                        }
+                                      >
+                                        <img
+                                          src={preview.signatureData}
+                                          alt="Signature preview"
+                                          style={{
+                                            width: "100%",
+                                            height: "100%",
+                                            objectFit: "contain",
+                                            pointerEvents: "none",
+                                          }}
+                                        />
+
+                                        {/* Resize handles */}
+                                        {[
+                                          { position: "nw", cursor: "nw-resize", top: -4, left: -4 },
+                                          { position: "ne", cursor: "ne-resize", top: -4, right: -4 },
+                                          { position: "sw", cursor: "sw-resize", bottom: -4, left: -4 },
+                                          { position: "se", cursor: "se-resize", bottom: -4, right: -4 },
+                                        ].map((handle) => (
+                                          <div
+                                            key={handle.position}
+                                            data-resize-handle="true"
+                                            style={{
+                                              position: "absolute",
+                                              width: 8,
+                                              height: 8,
+                                              backgroundColor: color,
+                                              border: "1px solid white",
+                                              cursor: handle.cursor,
+                                              zIndex: Z_INDEX_SIGNATURE_OVERLAY_HANDLE,
+                                              ...(handle.top !== undefined && { top: handle.top }),
+                                              ...(handle.bottom !== undefined && { bottom: handle.bottom }),
+                                              ...(handle.left !== undefined && { left: handle.left }),
+                                              ...(handle.right !== undefined && { right: handle.right }),
+                                            }}
+                                            onPointerDown={(e) => {
+                                              e.stopPropagation();
+                                              e.preventDefault();
+                                              const el = e.currentTarget;
+                                              el.setPointerCapture(e.pointerId);
+                                              interactionPauseRef.current?.pause();
+
+                                              const startX = e.clientX;
+                                              const startY = e.clientY;
+                                              const startWidth = preview.width;
+                                              const startHeight = preview.height;
+                                              const startLeft = preview.x;
+                                              const startTop = preview.y;
+
+                                              const handlePointerMove = (moveEvent: PointerEvent) => {
+                                                isDraggingRef.current = true;
+                                                const deltaX = (moveEvent.clientX - startX) / width;
+                                                const deltaY = (moveEvent.clientY - startY) / height;
+
+                                                let newWidth = startWidth;
+                                                let newHeight = startHeight;
+                                                let newX = startLeft;
+                                                let newY = startTop;
+
+                                                // Min sizes as fractions: 50px / pageWidth, 25px / pageHeight
+                                                const minW = 50 / width;
+                                                const minH = 25 / height;
+
+                                                if (handle.position.includes("e")) {
+                                                  newWidth = Math.max(minW, startWidth + deltaX);
+                                                }
+                                                if (handle.position.includes("w")) {
+                                                  newWidth = Math.max(minW, startWidth - deltaX);
+                                                  newX = startLeft + (startWidth - newWidth);
+                                                }
+                                                if (handle.position.includes("s")) {
+                                                  newHeight = Math.max(minH, startHeight + deltaY);
+                                                }
+                                                if (handle.position.includes("n")) {
+                                                  newHeight = Math.max(minH, startHeight - deltaY);
+                                                  newY = startTop + (startHeight - newHeight);
+                                                }
+
+                                                setSignaturePreviews((prev) =>
+                                                  prev.map((p) =>
+                                                    p.id === preview.id
+                                                      ? { ...p, x: newX, y: newY, width: newWidth, height: newHeight }
+                                                      : p,
+                                                  ),
+                                                );
+                                              };
+
+                                              const handlePointerUp = (upEvent: PointerEvent) => {
+                                                el.removeEventListener("pointermove", handlePointerMove);
+                                                el.removeEventListener("pointerup", handlePointerUp);
+                                                el.releasePointerCapture(upEvent.pointerId);
+                                                interactionPauseRef.current?.resume();
+                                                window.getSelection()?.removeAllRanges();
+                                                setTimeout(() => {
+                                                  isDraggingRef.current = false;
+                                                }, 10);
+                                              };
+
+                                              el.addEventListener("pointermove", handlePointerMove);
+                                              el.addEventListener("pointerup", handlePointerUp);
+                                            }}
+                                          />
+                                        ))}
+                                      </div>
+                                    </div>
+                                  </Tooltip>
+                                );
+                              })}
+
+                            {/* Hover preview: ghost signature following cursor in placement mode */}
+                            {placementMode && signatureData && cursorOnPage?.pageIndex === pageIndex && (
+                              <img
+                                src={signatureData}
+                                alt=""
+                                style={{
+                                  position: "absolute",
+                                  left: Math.max(0, Math.min(cursorOnPage.x - 75, width - 150)),
+                                  top: Math.max(0, Math.min(cursorOnPage.y - 37.5, height - 75)),
+                                  width: 150,
+                                  height: 75,
+                                  opacity: 0.6,
+                                  pointerEvents: "none",
+                                  objectFit: "contain",
+                                  boxShadow: "0 0 0 1px rgba(30, 136, 229, 0.55), 0 6px 18px rgba(30, 136, 229, 0.25)",
+                                  borderRadius: "4px",
+                                  zIndex: Z_INDEX_SIGNATURE_OVERLAY + 1,
+                                }}
+                              />
+                            )}
+                          </div>
+                        </PagePointerProvider>
+                      </Rotate>
+                    )}
+                  />
+                </Viewport>
+              </GlobalPointerProvider>
+            )}
+          </DocumentReadyWrapper>
+        </EmbedPDF>
+      </div>
+    );
+  },
+);
+
+LocalEmbedPDFWithAnnotations.displayName = "LocalEmbedPDFWithAnnotations";
diff --git a/frontend/src/core/components/viewer/NonPdfViewer.tsx b/frontend/src/core/components/viewer/NonPdfViewer.tsx
index dd13a4a889..214ac3fc03 100644
--- a/frontend/src/core/components/viewer/NonPdfViewer.tsx
+++ b/frontend/src/core/components/viewer/NonPdfViewer.tsx
@@ -1,20 +1,20 @@
-import { useCallback, useMemo } from 'react';
-import { Box, Button, Center, Stack, Text } from '@mantine/core';
-import ArticleIcon from '@mui/icons-material/Article';
-import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
+import { useCallback, useMemo } from "react";
+import { Box, Button, Center, Stack, Text } from "@mantine/core";
+import ArticleIcon from "@mui/icons-material/Article";
+import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
 
-import { useFileState } from '@app/contexts/FileContext';
-import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
-import { detectFileExtension, detectNonPdfFileType } from '@app/utils/fileUtils';
-import { CONVERSION_MATRIX } from '@app/constants/convertConstants';
+import { useFileState } from "@app/contexts/FileContext";
+import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
+import { detectFileExtension, detectNonPdfFileType } from "@app/utils/fileUtils";
+import { CONVERSION_MATRIX } from "@app/constants/convertConstants";
 
-import { NonPdfBanner } from '@app/components/viewer/nonpdf/NonPdfBanner';
-import { getFileTypeMeta } from '@app/components/viewer/nonpdf/types';
-import { ImageViewer } from '@app/components/viewer/nonpdf/ImageViewer';
-import { CsvViewer } from '@app/components/viewer/nonpdf/CsvViewer';
-import { JsonViewer } from '@app/components/viewer/nonpdf/JsonViewer';
-import { TextViewer } from '@app/components/viewer/nonpdf/TextViewer';
-import { HtmlViewer } from '@app/components/viewer/nonpdf/HtmlViewer';
+import { NonPdfBanner } from "@app/components/viewer/nonpdf/NonPdfBanner";
+import { getFileTypeMeta } from "@app/components/viewer/nonpdf/types";
+import { ImageViewer } from "@app/components/viewer/nonpdf/ImageViewer";
+import { CsvViewer } from "@app/components/viewer/nonpdf/CsvViewer";
+import { JsonViewer } from "@app/components/viewer/nonpdf/JsonViewer";
+import { TextViewer } from "@app/components/viewer/nonpdf/TextViewer";
+import { HtmlViewer } from "@app/components/viewer/nonpdf/HtmlViewer";
 
 export interface ViewerProps {
   sidebarsVisible: boolean;
@@ -38,34 +38,35 @@ export function NonPdfViewer({ file }: NonPdfViewerProps) {
   const fileExtension = detectFileExtension(file.name);
   // Only show convert when the extension has an explicit entry in the conversion matrix
   // (skip the 'any'/'image' wildcard fallbacks that would match everything)
-  const isConvertAvailable = toolAvailability['convert']?.available === true
-    && fileExtension !== ''
-    && fileExtension in CONVERSION_MATRIX;
+  const isConvertAvailable =
+    toolAvailability["convert"]?.available === true && fileExtension !== "" && fileExtension in CONVERSION_MATRIX;
 
   const handleConvertToPdf = useCallback(() => {
-    handleToolSelect('convert');
+    handleToolSelect("convert");
   }, [handleToolSelect]);
 
   const renderContent = () => {
     switch (fileType) {
-      case 'image':
+      case "image":
         return <ImageViewer file={file} fileName={file.name} />;
-      case 'csv':
-        return <CsvViewer file={file} isTsv={file.name.toLowerCase().endsWith('.tsv')} />;
-      case 'json':
+      case "csv":
+        return <CsvViewer file={file} isTsv={file.name.toLowerCase().endsWith(".tsv")} />;
+      case "json":
         return <JsonViewer file={file} />;
-      case 'markdown':
+      case "markdown":
         return <TextViewer file={file} isMarkdown />;
-      case 'text':
+      case "text":
         return <TextViewer file={file} isMarkdown={false} />;
-      case 'html':
+      case "html":
         return <HtmlViewer file={file} />;
       default:
         return (
           <Center style={{ flex: 1 }}>
             <Stack align="center" gap="sm">
-              <ArticleIcon style={{ fontSize: '3rem', color: 'var(--mantine-color-gray-4)' }} />
-              <Text c="dimmed" size="sm">Preview not available for this file type</Text>
+              <ArticleIcon style={{ fontSize: "3rem", color: "var(--mantine-color-gray-4)" }} />
+              <Text c="dimmed" size="sm">
+                Preview not available for this file type
+              </Text>
               {isConvertAvailable && (
                 <Button variant="light" color="orange" leftSection={<PictureAsPdfIcon />} onClick={handleConvertToPdf}>
                   Convert to PDF
@@ -78,14 +79,9 @@ export function NonPdfViewer({ file }: NonPdfViewerProps) {
   };
 
   return (
-    <Stack gap={0} style={{ height: '100%', flex: 1, overflow: 'hidden', position: 'relative' }}>
-      <NonPdfBanner
-        meta={meta}
-        onConvertToPdf={isConvertAvailable ? handleConvertToPdf : undefined}
-      />
-      <Box style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
-        {renderContent()}
-      </Box>
+    <Stack gap={0} style={{ height: "100%", flex: 1, overflow: "hidden", position: "relative" }}>
+      <NonPdfBanner meta={meta} onConvertToPdf={isConvertAvailable ? handleConvertToPdf : undefined} />
+      <Box style={{ flex: 1, display: "flex", flexDirection: "column", overflow: "hidden" }}>{renderContent()}</Box>
     </Stack>
   );
 }
@@ -102,7 +98,9 @@ export function NonPdfViewerWrapper(props: ViewerProps) {
   if (!file) {
     return (
       <Center style={{ flex: 1 }}>
-        <Text c="dimmed" size="sm">No file selected</Text>
+        <Text c="dimmed" size="sm">
+          No file selected
+        </Text>
       </Center>
     );
   }
diff --git a/frontend/src/core/components/viewer/PanAPIBridge.tsx b/frontend/src/core/components/viewer/PanAPIBridge.tsx
index 057a316cbb..deebd5f494 100644
--- a/frontend/src/core/components/viewer/PanAPIBridge.tsx
+++ b/frontend/src/core/components/viewer/PanAPIBridge.tsx
@@ -1,8 +1,8 @@
-import { useEffect, useRef } from 'react';
-import { usePan } from '@embedpdf/plugin-pan/react';
-import { useViewer } from '@app/contexts/ViewerContext';
-import { useActiveDocumentId } from '@app/components/viewer/useActiveDocumentId';
-import { useDocumentReady } from '@app/components/viewer/hooks/useDocumentReady';
+import { useEffect, useRef } from "react";
+import { usePan } from "@embedpdf/plugin-pan/react";
+import { useViewer } from "@app/contexts/ViewerContext";
+import { useActiveDocumentId } from "@app/components/viewer/useActiveDocumentId";
+import { useDocumentReady } from "@app/components/viewer/hooks/useDocumentReady";
 
 /**
  * Connects the PDF pan (hand tool) plugin to the shared ViewerContext.
@@ -36,11 +36,11 @@ function PanAPIBridgeInner({ documentId }: { documentId: string }) {
     const currentPan = panRef.current;
     if (currentPan) {
       const newState = {
-        isPanning
+        isPanning,
       };
 
       // Register this bridge with ViewerContext
-      registerBridge('pan', {
+      registerBridge("pan", {
         state: newState,
         api: {
           enable: () => {
@@ -54,13 +54,13 @@ function PanAPIBridgeInner({ documentId }: { documentId: string }) {
           },
           makePanDefault: () => {
             // v2.5.0: makePanDefault may not exist, enable pan as fallback
-            if ('makePanDefault' in currentPan && typeof (currentPan as any).makePanDefault === 'function') {
+            if ("makePanDefault" in currentPan && typeof (currentPan as any).makePanDefault === "function") {
               (currentPan as any).makePanDefault();
             } else {
               currentPan.enablePan();
             }
           },
-        }
+        },
       });
 
       if (prevIsPanningRef.current !== isPanning) {
@@ -70,7 +70,7 @@ function PanAPIBridgeInner({ documentId }: { documentId: string }) {
     }
 
     return () => {
-      registerBridge('pan', null);
+      registerBridge("pan", null);
     };
   }, [isPanning, registerBridge, triggerImmediatePanUpdate]);
 
diff --git a/frontend/src/core/components/viewer/PdfViewerToolbar.tsx b/frontend/src/core/components/viewer/PdfViewerToolbar.tsx
index 0fa11e360e..dd1f25f752 100644
--- a/frontend/src/core/components/viewer/PdfViewerToolbar.tsx
+++ b/frontend/src/core/components/viewer/PdfViewerToolbar.tsx
@@ -1,17 +1,17 @@
-import { useState, useEffect } from 'react';
-import { Button, Paper, Group, NumberInput } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { useViewer } from '@app/contexts/ViewerContext';
-import { Tooltip } from '@app/components/shared/Tooltip';
-import FirstPageIcon from '@mui/icons-material/FirstPage';
-import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
-import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
-import LastPageIcon from '@mui/icons-material/LastPage';
-import DescriptionIcon from '@mui/icons-material/Description';
-import ViewWeekIcon from '@mui/icons-material/ViewWeek';
-import DarkModeIcon from '@mui/icons-material/DarkMode';
-import WbSunnyIcon from '@mui/icons-material/WbSunny';
-import WbTwilightIcon from '@mui/icons-material/WbTwilight';
+import { useState, useEffect } from "react";
+import { Button, Paper, Group, NumberInput } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { useViewer } from "@app/contexts/ViewerContext";
+import { Tooltip } from "@app/components/shared/Tooltip";
+import FirstPageIcon from "@mui/icons-material/FirstPage";
+import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
+import ArrowForwardIosIcon from "@mui/icons-material/ArrowForwardIos";
+import LastPageIcon from "@mui/icons-material/LastPage";
+import DescriptionIcon from "@mui/icons-material/Description";
+import ViewWeekIcon from "@mui/icons-material/ViewWeek";
+import DarkModeIcon from "@mui/icons-material/DarkMode";
+import WbSunnyIcon from "@mui/icons-material/WbSunny";
+import WbTwilightIcon from "@mui/icons-material/WbTwilight";
 
 interface PdfViewerToolbarProps {
   // Page navigation props (placeholders for now)
@@ -20,11 +20,7 @@ interface PdfViewerToolbarProps {
   onPageChange?: (page: number) => void;
 }
 
-export function PdfViewerToolbar({
-  currentPage = 1,
-  totalPages: _totalPages = 1,
-  onPageChange,
-}: PdfViewerToolbarProps) {
+export function PdfViewerToolbar({ currentPage = 1, totalPages: _totalPages = 1, onPageChange }: PdfViewerToolbarProps) {
   const { t } = useTranslation();
   const {
     getScrollState,
@@ -117,190 +113,183 @@ export function PdfViewerToolbar({
 
   return (
     <Paper
-        radius="xl xl 0 0"
-        shadow="sm"
-        p={12}
-        pb={12}
-        style={{
-          display: "flex",
-          alignItems: "center",
-          gap: 10,
-          borderTopLeftRadius: 16,
-          borderTopRightRadius: 16,
-          borderBottomLeftRadius: 0,
-          borderBottomRightRadius: 0,
-          boxShadow: "0 -2px 8px rgba(0,0,0,0.04)",
-          pointerEvents: "auto",
-          minWidth: '30rem',
-        }}
+      radius="xl xl 0 0"
+      shadow="sm"
+      p={12}
+      pb={12}
+      style={{
+        display: "flex",
+        alignItems: "center",
+        gap: 10,
+        borderTopLeftRadius: 16,
+        borderTopRightRadius: 16,
+        borderBottomLeftRadius: 0,
+        borderBottomRightRadius: 0,
+        boxShadow: "0 -2px 8px rgba(0,0,0,0.04)",
+        pointerEvents: "auto",
+        minWidth: "30rem",
+      }}
+    >
+      {/* First Page Button */}
+      <Button
+        variant="subtle"
+        color="blue"
+        size="md"
+        px={8}
+        radius="xl"
+        onClick={handleFirstPage}
+        disabled={scrollState.currentPage === 1}
+        style={{ minWidth: "2.5rem" }}
+        title={t("viewer.firstPage", "First Page")}
       >
-        {/* First Page Button */}
-        <Button
-          variant="subtle"
-          color="blue"
-          size="md"
-          px={8}
-          radius="xl"
-          onClick={handleFirstPage}
-          disabled={scrollState.currentPage === 1}
-          style={{ minWidth: '2.5rem' }}
-          title={t("viewer.firstPage", "First Page")}
-        >
-          <FirstPageIcon fontSize="small" />
-        </Button>
+        <FirstPageIcon fontSize="small" />
+      </Button>
 
-        {/* Previous Page Button */}
-        <Button
-          variant="subtle"
-          color="blue"
-          size="md"
-          px={8}
-          radius="xl"
-          onClick={handlePreviousPage}
-          disabled={scrollState.currentPage === 1}
-          style={{ minWidth: '2.5rem' }}
-          title={t("viewer.previousPage", "Previous Page")}
-        >
-          <ArrowBackIosIcon fontSize="small" />
-        </Button>
+      {/* Previous Page Button */}
+      <Button
+        variant="subtle"
+        color="blue"
+        size="md"
+        px={8}
+        radius="xl"
+        onClick={handlePreviousPage}
+        disabled={scrollState.currentPage === 1}
+        style={{ minWidth: "2.5rem" }}
+        title={t("viewer.previousPage", "Previous Page")}
+      >
+        <ArrowBackIosIcon fontSize="small" />
+      </Button>
 
-        {/* Page Input */}
-        <NumberInput
-          value={pageInput}
-          onChange={(value) => {
-            const page = Number(value);
-            setPageInput(page);
-            if (!isNaN(page) && page >= 1 && page <= scrollState.totalPages) {
-              handlePageNavigation(page);
-            }
-          }}
-          min={1}
-          max={scrollState.totalPages}
-          hideControls
-          styles={{
-            input: { width: 48, textAlign: "center", fontWeight: 500, fontSize: 16 },
-          }}
-        />
-
-        <span style={{ fontWeight: 500, fontSize: 16 }}>
-          / {scrollState.totalPages}
-        </span>
-
-        {/* Next Page Button */}
-        <Button
-          variant="subtle"
-          color="blue"
-          size="md"
-          px={8}
-          radius="xl"
-          onClick={handleNextPage}
-          disabled={scrollState.currentPage === scrollState.totalPages}
-          style={{ minWidth: '2.5rem' }}
-          title={t("viewer.nextPage", "Next Page")}
-        >
-          <ArrowForwardIosIcon fontSize="small" />
-        </Button>
-
-        {/* Last Page Button */}
-        <Button
-          variant="subtle"
-          color="blue"
-          size="md"
-          px={8}
-          radius="xl"
-          onClick={handleLastPage}
-          disabled={scrollState.currentPage === scrollState.totalPages}
-          style={{ minWidth: '2.5rem' }}
-          title={t("viewer.lastPage", "Last Page")}
-        >
-          <LastPageIcon fontSize="small" />
-        </Button>
-
-        {/* Dual Page Toggle */}
-        <Tooltip
-          content={
-            isDualPageActive
-              ? t("viewer.singlePageView", "Single Page View")
-              : t("viewer.dualPageView", "Dual Page View")
+      {/* Page Input */}
+      <NumberInput
+        value={pageInput}
+        onChange={(value) => {
+          const page = Number(value);
+          setPageInput(page);
+          if (!isNaN(page) && page >= 1 && page <= scrollState.totalPages) {
+            handlePageNavigation(page);
           }
-          position="top"
-          arrow
-        >
-          <Button
-            variant={isDualPageActive ? "filled" : "light"}
-            color="blue"
-            size="md"
-            radius="xl"
-            onClick={handleDualPageToggle}
-            disabled={scrollState.totalPages <= 1}
-            style={{ minWidth: '2.5rem' }}
-          >
-            {isDualPageActive ? <DescriptionIcon fontSize="small" /> : <ViewWeekIcon fontSize="small" />}
-          </Button>
-        </Tooltip>
+        }}
+        min={1}
+        max={scrollState.totalPages}
+        hideControls
+        styles={{
+          input: { width: 48, textAlign: "center", fontWeight: 500, fontSize: 16 },
+        }}
+      />
 
-        {/* PDF Render Mode Toggle */}
-        <Tooltip
-          content={
-            pdfRenderMode === 'normal'
+      <span style={{ fontWeight: 500, fontSize: 16 }}>/ {scrollState.totalPages}</span>
+
+      {/* Next Page Button */}
+      <Button
+        variant="subtle"
+        color="blue"
+        size="md"
+        px={8}
+        radius="xl"
+        onClick={handleNextPage}
+        disabled={scrollState.currentPage === scrollState.totalPages}
+        style={{ minWidth: "2.5rem" }}
+        title={t("viewer.nextPage", "Next Page")}
+      >
+        <ArrowForwardIosIcon fontSize="small" />
+      </Button>
+
+      {/* Last Page Button */}
+      <Button
+        variant="subtle"
+        color="blue"
+        size="md"
+        px={8}
+        radius="xl"
+        onClick={handleLastPage}
+        disabled={scrollState.currentPage === scrollState.totalPages}
+        style={{ minWidth: "2.5rem" }}
+        title={t("viewer.lastPage", "Last Page")}
+      >
+        <LastPageIcon fontSize="small" />
+      </Button>
+
+      {/* Dual Page Toggle */}
+      <Tooltip
+        content={
+          isDualPageActive ? t("viewer.singlePageView", "Single Page View") : t("viewer.dualPageView", "Dual Page View")
+        }
+        position="top"
+        arrow
+      >
+        <Button
+          variant={isDualPageActive ? "filled" : "light"}
+          color="blue"
+          size="md"
+          radius="xl"
+          onClick={handleDualPageToggle}
+          disabled={scrollState.totalPages <= 1}
+          style={{ minWidth: "2.5rem" }}
+        >
+          {isDualPageActive ? <DescriptionIcon fontSize="small" /> : <ViewWeekIcon fontSize="small" />}
+        </Button>
+      </Tooltip>
+
+      {/* PDF Render Mode Toggle */}
+      <Tooltip
+        content={
+          pdfRenderMode === "normal"
+            ? t("viewer.enableDarkFilter", "Enable Dark Filter")
+            : pdfRenderMode === "dark"
+              ? t("viewer.enableSepiaFilter", "Enable Sepia Filter")
+              : t("viewer.disableColorFilter", "Disable Color Filter")
+        }
+        position="top"
+        arrow
+      >
+        <Button
+          variant={pdfRenderMode !== "normal" ? "filled" : "light"}
+          color="blue"
+          size="md"
+          radius="xl"
+          onClick={cyclePdfRenderMode}
+          style={{ minWidth: "2.5rem" }}
+          aria-label={
+            pdfRenderMode === "normal"
               ? t("viewer.enableDarkFilter", "Enable Dark Filter")
-              : pdfRenderMode === 'dark'
+              : pdfRenderMode === "dark"
                 ? t("viewer.enableSepiaFilter", "Enable Sepia Filter")
                 : t("viewer.disableColorFilter", "Disable Color Filter")
           }
-          position="top"
-          arrow
         >
-          <Button
-            variant={pdfRenderMode !== 'normal' ? "filled" : "light"}
-            color="blue"
-            size="md"
-            radius="xl"
-            onClick={cyclePdfRenderMode}
-            style={{ minWidth: '2.5rem' }}
-            aria-label={
-              pdfRenderMode === 'normal'
-                ? t("viewer.enableDarkFilter", "Enable Dark Filter")
-                : pdfRenderMode === 'dark'
-                  ? t("viewer.enableSepiaFilter", "Enable Sepia Filter")
-                  : t("viewer.disableColorFilter", "Disable Color Filter")
-            }
-          >
-            {pdfRenderMode === 'normal' && <DarkModeIcon fontSize="small" />}
-            {pdfRenderMode === 'dark' && <WbTwilightIcon fontSize="small" />}
-            {pdfRenderMode === 'sepia' && <WbSunnyIcon fontSize="small" />}
-          </Button>
-        </Tooltip>
+          {pdfRenderMode === "normal" && <DarkModeIcon fontSize="small" />}
+          {pdfRenderMode === "dark" && <WbTwilightIcon fontSize="small" />}
+          {pdfRenderMode === "sepia" && <WbSunnyIcon fontSize="small" />}
+        </Button>
+      </Tooltip>
 
-        {/* Zoom Controls */}
-        <Group gap={4} align="center" style={{ marginLeft: 16 }}>
-          <Button
-            variant="subtle"
-            color="blue"
-            size="md"
-            radius="xl"
-            onClick={handleZoomOut}
-            style={{ minWidth: '2rem', padding: 0 }}
-            title={t("viewer.zoomOut", "Zoom out")}
-          >
-            −
-          </Button>
-          <span style={{ minWidth: '2.5rem', textAlign: "center" }}>
-            {displayZoomPercent}%
-          </span>
-          <Button
-            variant="subtle"
-            color="blue"
-            size="md"
-            radius="xl"
-            onClick={handleZoomIn}
-            style={{ minWidth: '2rem', padding: 0 }}
-            title={t("viewer.zoomIn", "Zoom in")}
-          >
-            +
-          </Button>
-
-        </Group>
-      </Paper>
+      {/* Zoom Controls */}
+      <Group gap={4} align="center" style={{ marginLeft: 16 }}>
+        <Button
+          variant="subtle"
+          color="blue"
+          size="md"
+          radius="xl"
+          onClick={handleZoomOut}
+          style={{ minWidth: "2rem", padding: 0 }}
+          title={t("viewer.zoomOut", "Zoom out")}
+        >
+          −
+        </Button>
+        <span style={{ minWidth: "2.5rem", textAlign: "center" }}>{displayZoomPercent}%</span>
+        <Button
+          variant="subtle"
+          color="blue"
+          size="md"
+          radius="xl"
+          onClick={handleZoomIn}
+          style={{ minWidth: "2rem", padding: 0 }}
+          title={t("viewer.zoomIn", "Zoom in")}
+        >
+          +
+        </Button>
+      </Group>
+    </Paper>
   );
 }
diff --git a/frontend/src/core/components/viewer/PrintAPIBridge.tsx b/frontend/src/core/components/viewer/PrintAPIBridge.tsx
index d56a42cae6..fd3492a2b5 100644
--- a/frontend/src/core/components/viewer/PrintAPIBridge.tsx
+++ b/frontend/src/core/components/viewer/PrintAPIBridge.tsx
@@ -1,7 +1,7 @@
-import { useEffect } from 'react';
-import { usePrintCapability } from '@embedpdf/plugin-print/react';
-import { useViewer } from '@app/contexts/ViewerContext';
-import { useDocumentReady } from '@app/components/viewer/hooks/useDocumentReady';
+import { useEffect } from "react";
+import { usePrintCapability } from "@embedpdf/plugin-print/react";
+import { useViewer } from "@app/contexts/ViewerContext";
+import { useDocumentReady } from "@app/components/viewer/hooks/useDocumentReady";
 
 export interface PrintAPIBridgeProps {
   file?: File | Blob;
@@ -20,16 +20,16 @@ export function PrintAPIBridge(_props: PrintAPIBridgeProps) {
   useEffect(() => {
     if (print && documentReady) {
       // Register this bridge with ViewerContext
-      registerBridge('print', {
+      registerBridge("print", {
         state: {},
         api: {
           print: () => print.print(),
-        }
+        },
       });
     }
 
     return () => {
-      registerBridge('print', null);
+      registerBridge("print", null);
     };
   }, [print, documentReady, registerBridge]);
 
diff --git a/frontend/src/core/components/viewer/RedactionAPIBridge.tsx b/frontend/src/core/components/viewer/RedactionAPIBridge.tsx
index 4d78abce05..6035f48d04 100644
--- a/frontend/src/core/components/viewer/RedactionAPIBridge.tsx
+++ b/frontend/src/core/components/viewer/RedactionAPIBridge.tsx
@@ -1,10 +1,10 @@
-import { useEffect, useImperativeHandle } from 'react';
-import { useRedaction as useEmbedPdfRedaction } from '@embedpdf/plugin-redaction/react';
-import { PdfAnnotationSubtype } from '@embedpdf/models';
-import { useRedaction } from '@app/contexts/RedactionContext';
-import { useActiveDocumentId } from '@app/components/viewer/useActiveDocumentId';
-import { useAnnotationCapability } from '@embedpdf/plugin-annotation/react';
-import { useDocumentReady } from '@app/components/viewer/hooks/useDocumentReady';
+import { useEffect, useImperativeHandle } from "react";
+import { useRedaction as useEmbedPdfRedaction } from "@embedpdf/plugin-redaction/react";
+import { PdfAnnotationSubtype } from "@embedpdf/models";
+import { useRedaction } from "@app/contexts/RedactionContext";
+import { useActiveDocumentId } from "@app/components/viewer/useActiveDocumentId";
+import { useAnnotationCapability } from "@embedpdf/plugin-annotation/react";
+import { useDocumentReady } from "@app/components/viewer/hooks/useDocumentReady";
 
 /**
  * Bridges between the EmbedPDF redaction plugin and the Stirling-PDF RedactionContext.
@@ -25,14 +25,8 @@ export function RedactionAPIBridge() {
 function RedactionAPIBridgeInner({ documentId }: { documentId: string }) {
   const { state, provides: redactionProvides } = useEmbedPdfRedaction(documentId);
   const { provides: annotationProvides } = useAnnotationCapability();
-  const {
-    redactionApiRef,
-    setPendingCount,
-    setActiveType,
-    setIsRedacting,
-    setBridgeReady,
-    manualRedactColor
-  } = useRedaction();
+  const { redactionApiRef, setPendingCount, setActiveType, setIsRedacting, setBridgeReady, manualRedactColor } =
+    useRedaction();
 
   // Mark bridge as ready on mount, not ready on unmount
   useEffect(() => {
@@ -56,7 +50,7 @@ function RedactionAPIBridgeInner({ documentId }: { documentId: string }) {
   useEffect(() => {
     const annotationApi = annotationProvides as any;
     if (annotationApi?.setToolDefaults) {
-      annotationApi.setToolDefaults('redact', {
+      annotationApi.setToolDefaults("redact", {
         type: PdfAnnotationSubtype.REDACT,
         strokeColor: manualRedactColor,
         color: manualRedactColor,
@@ -64,34 +58,38 @@ function RedactionAPIBridgeInner({ documentId }: { documentId: string }) {
         fillColor: manualRedactColor,
         interiorColor: manualRedactColor,
         backgroundColor: manualRedactColor,
-        opacity: 1
+        opacity: 1,
       });
     }
   }, [annotationProvides, manualRedactColor]);
 
   // Expose the EmbedPDF API through our context's ref
-  useImperativeHandle(redactionApiRef, () => ({
-    toggleRedact: () => {
-      redactionProvides?.toggleRedact();
-    },
-    enableRedact: () => {
-      redactionProvides?.enableRedact();
-    },
-    isRedactActive: () => {
-      return redactionProvides?.isRedactActive() ?? false;
-    },
-    endRedact: () => {
-      redactionProvides?.endRedact();
-    },
-    // Common methods
-    commitAllPending: () => {
-      redactionProvides?.commitAllPending();
-      // Don't set redactionsApplied here - it should only be set after the file is saved
-      // The save operation in applyChanges will handle setting/clearing this flag
-    },
-    getActiveType: () => state?.activeType ?? null,
-    getPendingCount: () => state?.pendingCount ?? 0,
-  }), [redactionProvides, state]);
+  useImperativeHandle(
+    redactionApiRef,
+    () => ({
+      toggleRedact: () => {
+        redactionProvides?.toggleRedact();
+      },
+      enableRedact: () => {
+        redactionProvides?.enableRedact();
+      },
+      isRedactActive: () => {
+        return redactionProvides?.isRedactActive() ?? false;
+      },
+      endRedact: () => {
+        redactionProvides?.endRedact();
+      },
+      // Common methods
+      commitAllPending: () => {
+        redactionProvides?.commitAllPending();
+        // Don't set redactionsApplied here - it should only be set after the file is saved
+        // The save operation in applyChanges will handle setting/clearing this flag
+      },
+      getActiveType: () => state?.activeType ?? null,
+      getPendingCount: () => state?.pendingCount ?? 0,
+    }),
+    [redactionProvides, state],
+  );
 
   return null;
 }
diff --git a/frontend/src/core/components/viewer/RedactionPendingTracker.tsx b/frontend/src/core/components/viewer/RedactionPendingTracker.tsx
index f5cf3b4f7d..7af9e9f4eb 100644
--- a/frontend/src/core/components/viewer/RedactionPendingTracker.tsx
+++ b/frontend/src/core/components/viewer/RedactionPendingTracker.tsx
@@ -1,47 +1,48 @@
-import { useEffect, useRef, useImperativeHandle, forwardRef } from 'react';
-import { useRedaction as useEmbedPdfRedaction } from '@embedpdf/plugin-redaction/react';
-import { useActiveDocumentId } from '@app/components/viewer/useActiveDocumentId';
+import { useEffect, useRef, useImperativeHandle, forwardRef } from "react";
+import { useRedaction as useEmbedPdfRedaction } from "@embedpdf/plugin-redaction/react";
+import { useActiveDocumentId } from "@app/components/viewer/useActiveDocumentId";
 
 export interface RedactionPendingTrackerAPI {
   commitAllPending: () => void;
   getPendingCount: () => number;
 }
 
-export const RedactionPendingTracker = forwardRef<RedactionPendingTrackerAPI>(
-  function RedactionPendingTracker(_, ref) {
-    const activeDocumentId = useActiveDocumentId();
-    
-    // Don't render the inner component until we have a valid document ID
-    if (!activeDocumentId) {
-      return null;
-    }
-    
-    return <RedactionPendingTrackerInner documentId={activeDocumentId} ref={ref} />;
+export const RedactionPendingTracker = forwardRef<RedactionPendingTrackerAPI>(function RedactionPendingTracker(_, ref) {
+  const activeDocumentId = useActiveDocumentId();
+
+  // Don't render the inner component until we have a valid document ID
+  if (!activeDocumentId) {
+    return null;
   }
-);
+
+  return <RedactionPendingTrackerInner documentId={activeDocumentId} ref={ref} />;
+});
 
 const RedactionPendingTrackerInner = forwardRef<RedactionPendingTrackerAPI, { documentId: string }>(
   function RedactionPendingTrackerInner({ documentId }, ref) {
     const { state, provides } = useEmbedPdfRedaction(documentId);
-    
+
     const pendingCountRef = useRef(0);
-    
+
     // Expose API through ref
-    useImperativeHandle(ref, () => ({
-      commitAllPending: () => {
-        if (provides?.commitAllPending) {
-          provides.commitAllPending();
-        }
-      },
-      getPendingCount: () => pendingCountRef.current,
-    }), [provides]);
-    
+    useImperativeHandle(
+      ref,
+      () => ({
+        commitAllPending: () => {
+          if (provides?.commitAllPending) {
+            provides.commitAllPending();
+          }
+        },
+        getPendingCount: () => pendingCountRef.current,
+      }),
+      [provides],
+    );
+
     // Update ref when pending count changes
     useEffect(() => {
       pendingCountRef.current = state?.pendingCount ?? 0;
     }, [state?.pendingCount]);
 
     return null;
-  }
+  },
 );
-
diff --git a/frontend/src/core/components/viewer/RedactionSelectionMenu.tsx b/frontend/src/core/components/viewer/RedactionSelectionMenu.tsx
index 995a2ddda3..e37fb805a0 100644
--- a/frontend/src/core/components/viewer/RedactionSelectionMenu.tsx
+++ b/frontend/src/core/components/viewer/RedactionSelectionMenu.tsx
@@ -1,13 +1,13 @@
-import { useRedaction as useEmbedPdfRedaction, RedactionSelectionMenuProps } from '@embedpdf/plugin-redaction/react';
-import { PdfAnnotationSubtype } from '@embedpdf/models';
-import { ActionIcon, Tooltip, Button, Group } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { createPortal } from 'react-dom';
-import { useEffect, useState, useRef, useCallback } from 'react';
-import DeleteIcon from '@mui/icons-material/Delete';
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import { useRedaction } from '@app/contexts/RedactionContext';
-import { useActiveDocumentId } from '@app/components/viewer/useActiveDocumentId';
+import { useRedaction as useEmbedPdfRedaction, RedactionSelectionMenuProps } from "@embedpdf/plugin-redaction/react";
+import { PdfAnnotationSubtype } from "@embedpdf/models";
+import { ActionIcon, Tooltip, Button, Group } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { createPortal } from "react-dom";
+import { useEffect, useState, useRef, useCallback } from "react";
+import DeleteIcon from "@mui/icons-material/Delete";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import { useRedaction } from "@app/contexts/RedactionContext";
+import { useActiveDocumentId } from "@app/components/viewer/useActiveDocumentId";
 
 export type { RedactionSelectionMenuProps };
 
@@ -19,12 +19,7 @@ export function RedactionSelectionMenu(props: any) {
     return null;
   }
 
-  return (
-    <RedactionSelectionMenuInner
-      documentId={activeDocumentId}
-      {...props}
-    />
-  );
+  return <RedactionSelectionMenuInner documentId={activeDocumentId} {...props} />;
 }
 
 function RedactionSelectionMenuInner({
@@ -33,11 +28,11 @@ function RedactionSelectionMenuInner({
   selected,
   menuWrapperProps,
 }: RedactionSelectionMenuProps & { documentId: string }) {
-  const item = context?.type === 'redaction'
-    ? context.item
-    : (context?.type === 'annotation' ? (context as any).annotation?.object : null);
+  const item =
+    context?.type === "redaction" ? context.item : context?.type === "annotation" ? (context as any).annotation?.object : null;
 
-  const isRedaction = context?.type === 'redaction' || (context?.type === 'annotation' && item?.type === PdfAnnotationSubtype.REDACT);
+  const isRedaction =
+    context?.type === "redaction" || (context?.type === "annotation" && item?.type === PdfAnnotationSubtype.REDACT);
 
   const pageIndex = context?.pageIndex;
   const { t } = useTranslation();
@@ -47,11 +42,14 @@ function RedactionSelectionMenuInner({
   const [menuPosition, setMenuPosition] = useState<{ top: number; left: number } | null>(null);
 
   // Merge refs - menuWrapperProps.ref is a callback ref
-  const setRef = useCallback((node: HTMLDivElement | null) => {
-    wrapperRef.current = node;
-    // Call the EmbedPDF ref callback
-    menuWrapperProps?.ref?.(node);
-  }, [menuWrapperProps]);
+  const setRef = useCallback(
+    (node: HTMLDivElement | null) => {
+      wrapperRef.current = node;
+      // Call the EmbedPDF ref callback
+      menuWrapperProps?.ref?.(node);
+    },
+    [menuWrapperProps],
+  );
 
   const handleRemove = useCallback(() => {
     if (provides?.removePending && item && pageIndex !== undefined) {
@@ -95,12 +93,12 @@ function RedactionSelectionMenuInner({
     updatePosition();
 
     // Update position on scroll/resize
-    window.addEventListener('scroll', updatePosition, true);
-    window.addEventListener('resize', updatePosition);
+    window.addEventListener("scroll", updatePosition, true);
+    window.addEventListener("resize", updatePosition);
 
     return () => {
-      window.removeEventListener('scroll', updatePosition, true);
-      window.removeEventListener('resize', updatePosition);
+      window.removeEventListener("scroll", updatePosition, true);
+      window.removeEventListener("resize", updatePosition);
     };
   }, [selected, item]);
 
@@ -110,68 +108,71 @@ function RedactionSelectionMenuInner({
   const menuContent = menuPosition ? (
     <div
       style={{
-        position: 'fixed',
+        position: "fixed",
         top: `${menuPosition.top}px`,
         left: `${menuPosition.left}px`,
-        transform: 'translateX(-50%)',
-        pointerEvents: 'auto',
+        transform: "translateX(-50%)",
+        pointerEvents: "auto",
         zIndex: 10000, // Very high z-index to appear above everything
-        backgroundColor: 'var(--mantine-color-body)',
+        backgroundColor: "var(--mantine-color-body)",
         borderRadius: 8,
-        padding: '8px 12px',
-        boxShadow: '0 2px 12px rgba(0, 0, 0, 0.25)',
-        border: '1px solid var(--mantine-color-default-border)',
+        padding: "8px 12px",
+        boxShadow: "0 2px 12px rgba(0, 0, 0, 0.25)",
+        border: "1px solid var(--mantine-color-default-border)",
         // Fixed size to prevent browser zoom affecting layout
-        fontSize: '14px',
-        minWidth: '180px',
+        fontSize: "14px",
+        minWidth: "180px",
       }}
     >
-        <Group gap="sm" wrap="nowrap" justify="center">
-          <Tooltip label="Remove this mark">
-            <ActionIcon
-              variant="subtle"
-              color="gray"
-              size="md"
-              onClick={handleRemove}
-              styles={{
-                root: {
-                  flexShrink: 0,
-                  backgroundColor: 'var(--bg-raised)',
-                  border: '1px solid var(--border-default)',
-                  color: 'var(--text-secondary)',
-                  '&:hover': {
-                    backgroundColor: 'var(--hover-bg)',
-                    borderColor: 'var(--border-strong)',
-                    color: 'var(--text-primary)',
-                  },
+      <Group gap="sm" wrap="nowrap" justify="center">
+        <Tooltip label="Remove this mark">
+          <ActionIcon
+            variant="subtle"
+            color="gray"
+            size="md"
+            onClick={handleRemove}
+            styles={{
+              root: {
+                flexShrink: 0,
+                backgroundColor: "var(--bg-raised)",
+                border: "1px solid var(--border-default)",
+                color: "var(--text-secondary)",
+                "&:hover": {
+                  backgroundColor: "var(--hover-bg)",
+                  borderColor: "var(--border-strong)",
+                  color: "var(--text-primary)",
                 },
-              }}
-            >
-              <DeleteIcon style={{ fontSize: 18 }} />
-            </ActionIcon>
-          </Tooltip>
-
-          <Tooltip
-            label={t('redact.manual.applyWarning', '⚠️ Permanent application, cannot be undone and the data underneath will be deleted')}
-            withArrow
-            position="top"
+              },
+            }}
           >
-            <Button
-              variant="filled"
-              color="red"
-              size="xs"
-              onClick={handleApply}
-              leftSection={<CheckCircleIcon style={{ fontSize: 16 }} />}
-              styles={{
-                root: { flexShrink: 0, whiteSpace: 'nowrap' },
-              }}
-            >
-              Apply (permanent)
-            </Button>
-          </Tooltip>
-        </Group>
-      </div>
-    ) : null;
+            <DeleteIcon style={{ fontSize: 18 }} />
+          </ActionIcon>
+        </Tooltip>
+
+        <Tooltip
+          label={t(
+            "redact.manual.applyWarning",
+            "⚠️ Permanent application, cannot be undone and the data underneath will be deleted",
+          )}
+          withArrow
+          position="top"
+        >
+          <Button
+            variant="filled"
+            color="red"
+            size="xs"
+            onClick={handleApply}
+            leftSection={<CheckCircleIcon style={{ fontSize: 16 }} />}
+            styles={{
+              root: { flexShrink: 0, whiteSpace: "nowrap" },
+            }}
+          >
+            Apply (permanent)
+          </Button>
+        </Tooltip>
+      </Group>
+    </div>
+  ) : null;
 
   return (
     <>
@@ -183,12 +184,10 @@ function RedactionSelectionMenuInner({
           ...menuWrapperProps?.style,
           // Keep the wrapper invisible but still occupying space for positioning
           opacity: 0,
-          pointerEvents: 'none',
+          pointerEvents: "none",
         }}
       />
-      {typeof document !== 'undefined' && menuContent
-        ? createPortal(menuContent, document.body)
-        : null}
+      {typeof document !== "undefined" && menuContent ? createPortal(menuContent, document.body) : null}
     </>
   );
 }
diff --git a/frontend/src/core/components/viewer/RotateAPIBridge.tsx b/frontend/src/core/components/viewer/RotateAPIBridge.tsx
index 762e805989..45ea0b7ea5 100644
--- a/frontend/src/core/components/viewer/RotateAPIBridge.tsx
+++ b/frontend/src/core/components/viewer/RotateAPIBridge.tsx
@@ -1,8 +1,8 @@
-import { useEffect, useRef } from 'react';
-import { useRotate } from '@embedpdf/plugin-rotate/react';
-import { useViewer } from '@app/contexts/ViewerContext';
-import { useActiveDocumentId } from '@app/components/viewer/useActiveDocumentId';
-import { useDocumentReady } from '@app/components/viewer/hooks/useDocumentReady';
+import { useEffect, useRef } from "react";
+import { useRotate } from "@embedpdf/plugin-rotate/react";
+import { useViewer } from "@app/contexts/ViewerContext";
+import { useActiveDocumentId } from "@app/components/viewer/useActiveDocumentId";
+import { useDocumentReady } from "@app/components/viewer/hooks/useDocumentReady";
 
 /**
  * Connects the PDF rotation plugin to the shared ViewerContext.
@@ -33,23 +33,23 @@ function RotateAPIBridgeInner({ documentId }: { documentId: string }) {
     const currentRotate = rotateRef.current;
     if (currentRotate) {
       const newState = {
-        rotation
+        rotation,
       };
 
       // Register this bridge with ViewerContext
-      registerBridge('rotation', {
+      registerBridge("rotation", {
         state: newState,
         api: {
           rotateForward: () => currentRotate.rotateForward(),
           rotateBackward: () => currentRotate.rotateBackward(),
           setRotation: (rotationValue: number) => currentRotate.setRotation(rotationValue),
           getRotation: () => rotation,
-        }
+        },
       });
     }
 
     return () => {
-      registerBridge('rotation', null);
+      registerBridge("rotation", null);
     };
   }, [rotation, registerBridge]);
 
diff --git a/frontend/src/core/components/viewer/RulerOverlay.tsx b/frontend/src/core/components/viewer/RulerOverlay.tsx
index 3d8f91a74d..9d3e359551 100644
--- a/frontend/src/core/components/viewer/RulerOverlay.tsx
+++ b/frontend/src/core/components/viewer/RulerOverlay.tsx
@@ -1,5 +1,5 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { useViewer } from '@app/contexts/ViewerContext';
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { useViewer } from "@app/contexts/ViewerContext";
 
 // ─── Types ────────────────────────────────────────────────────────────────────
 
@@ -63,7 +63,7 @@ function angleDeg(a: Point, b: Point): number {
 
 function formatDist(pts: number): string {
   const mm = (pts / 72) * 25.4;
-  if (mm < 100)  return `${mm.toFixed(1)} mm`;
+  if (mm < 100) return `${mm.toFixed(1)} mm`;
   if (mm < 1000) return `${(mm / 10).toFixed(1)} cm`;
   return `${(mm / 1000).toFixed(2)} m`;
 }
@@ -102,11 +102,7 @@ export type PageMeasureScales = Map<number, PageScaleInfo>;
  * viewport whose BBox contains the midpoint. Falls back to the first viewport
  * if none contains it (handles whole-page viewports with bbox=null).
  */
-function pickScale(
-  start: PagePoint,
-  end: PagePoint,
-  pageMeasureScales: PageMeasureScales,
-): MeasureScale | null {
+function pickScale(start: PagePoint, end: PagePoint, pageMeasureScales: PageMeasureScales): MeasureScale | null {
   if (start.pageIndex !== end.pageIndex) return null;
   const info = pageMeasureScales.get(start.pageIndex);
   if (!info?.viewports.length) return null;
@@ -119,8 +115,7 @@ function pickScale(
   for (const { bbox, scale } of info.viewports) {
     if (!bbox) return scale; // whole-page viewport
     const [x0, y0, x1, y1] = bbox;
-    if (mx >= Math.min(x0, x1) && mx <= Math.max(x0, x1) &&
-        my >= Math.min(y0, y1) && my <= Math.max(y0, y1)) {
+    if (mx >= Math.min(x0, x1) && mx <= Math.max(x0, x1) && my >= Math.min(y0, y1) && my <= Math.max(y0, y1)) {
       return scale;
     }
   }
@@ -130,25 +125,31 @@ function pickScale(
 function formatScaled(pts: number, scale: MeasureScale): string {
   const val = pts * scale.factor;
   if (val >= 1000) return `${val.toFixed(0)} ${scale.unit}`;
-  if (val >= 100)  return `${val.toFixed(1)} ${scale.unit}`;
-  if (val >= 10)   return `${val.toFixed(2)} ${scale.unit}`;
+  if (val >= 100) return `${val.toFixed(1)} ${scale.unit}`;
+  if (val >= 10) return `${val.toFixed(2)} ${scale.unit}`;
   return `${val.toFixed(3)} ${scale.unit}`;
 }
 
 // Conversion factors to metres for known units
 const TO_METRES: Record<string, number> = {
-  m: 1, cm: 0.01, mm: 0.001, km: 1000,
-  ft: 0.3048, in: 0.0254, yd: 0.9144, mi: 1609.344,
+  m: 1,
+  cm: 0.01,
+  mm: 0.001,
+  km: 1000,
+  ft: 0.3048,
+  in: 0.0254,
+  yd: 0.9144,
+  mi: 1609.344,
 };
 
 function isImperialUnit(unit: string): boolean {
-  return ['ft', 'in', 'yd', 'mi'].includes(unit.toLowerCase().trim());
+  return ["ft", "in", "yd", "mi"].includes(unit.toLowerCase().trim());
 }
 
 function formatMetricFromMetres(m: number): string {
   if (m >= 1000) return `${(m / 1000).toFixed(2)} km`;
-  if (m >= 1)    return `${m.toFixed(1)} m`;
-  if (m >= 0.1)  return `${(m * 100).toFixed(1)} cm`;
+  if (m >= 1) return `${m.toFixed(1)} m`;
+  if (m >= 0.1) return `${(m * 100).toFixed(1)} cm`;
   return `${(m * 1000).toFixed(1)} mm`;
 }
 
@@ -167,9 +168,7 @@ function scaledCross(pts: number, scale: MeasureScale): string | null {
   const toM = TO_METRES[scale.unit.toLowerCase().trim()];
   if (!toM) return null;
   const metres = pts * scale.factor * toM;
-  return isImperialUnit(scale.unit)
-    ? formatMetricFromMetres(metres)
-    : formatImperialFromFeet(metres / 0.3048);
+  return isImperialUnit(scale.unit) ? formatMetricFromMetres(metres) : formatImperialFromFeet(metres / 0.3048);
 }
 
 // ─── DOM helpers ──────────────────────────────────────────────────────────────
@@ -181,7 +180,7 @@ function findScrollEl(root: HTMLElement): HTMLElement | null {
     const el = node as HTMLElement;
     if (el === root) continue;
     const { overflow, overflowY, overflowX } = window.getComputedStyle(el);
-    if ([overflow, overflowY, overflowX].some(v => v === 'auto' || v === 'scroll')) {
+    if ([overflow, overflowY, overflowX].some((v) => v === "auto" || v === "scroll")) {
       return el;
     }
   }
@@ -189,7 +188,7 @@ function findScrollEl(root: HTMLElement): HTMLElement | null {
 }
 
 function isOverPage(e: MouseEvent): boolean {
-  return !!(e.target as Element).closest?.('[data-page-index]');
+  return !!(e.target as Element).closest?.("[data-page-index]");
 }
 
 /**
@@ -197,33 +196,29 @@ function isOverPage(e: MouseEvent): boolean {
  * an SVG screen coordinate and a PagePoint (page-relative PDF units).
  * Used to clamp the live line when the cursor drifts off the page.
  */
-function nearestPageDocPt(
-  cursor: Point,
-  container: HTMLElement,
-  zoom: number,
-): { screenPt: Point; docPt: PagePoint } | null {
-  const pages = container.querySelectorAll('[data-page-index]');
+function nearestPageDocPt(cursor: Point, container: HTMLElement, zoom: number): { screenPt: Point; docPt: PagePoint } | null {
+  const pages = container.querySelectorAll("[data-page-index]");
   if (!pages.length) return null;
 
   const cr = container.getBoundingClientRect();
   let bestDist = Infinity;
   let best: { screenPt: Point; docPt: PagePoint } | null = null;
 
-  pages.forEach(pageNode => {
+  pages.forEach((pageNode) => {
     const pageEl = pageNode as HTMLElement;
     const r = pageEl.getBoundingClientRect();
-    const pageIndex = parseInt(pageEl.dataset.pageIndex ?? '0', 10);
+    const pageIndex = parseInt(pageEl.dataset.pageIndex ?? "0", 10);
 
     // Page bounds in SVG (container-relative) space
-    const left   = r.left   - cr.left;
-    const top    = r.top    - cr.top;
-    const right  = r.right  - cr.left;
+    const left = r.left - cr.left;
+    const top = r.top - cr.top;
+    const right = r.right - cr.left;
     const bottom = r.bottom - cr.top;
 
     // Nearest point on this rect to the cursor (SVG space)
-    const cx = Math.max(left, Math.min(right,  cursor.x));
-    const cy = Math.max(top,  Math.min(bottom, cursor.y));
-    const d  = Math.sqrt((cursor.x - cx) ** 2 + (cursor.y - cy) ** 2);
+    const cx = Math.max(left, Math.min(right, cursor.x));
+    const cy = Math.max(top, Math.min(bottom, cursor.y));
+    const d = Math.sqrt((cursor.x - cx) ** 2 + (cursor.y - cy) ** 2);
 
     if (d < bestDist) {
       bestDist = d;
@@ -236,7 +231,7 @@ function nearestPageDocPt(
         docPt: {
           pageIndex,
           x: (cr.left + cx - r.left) / zoom,
-          y: (cr.top  + cy - r.top ) / zoom,
+          y: (cr.top + cy - r.top) / zoom,
         },
       };
     }
@@ -249,10 +244,10 @@ function nearestPageDocPt(
 
 const TICK = 10;
 const DOT_R = 5;
-const LH  = 26;   // label height (normal — 1 line)
-const LH2 = 44;   // label height (hovered, no scale — 2 lines)
-const LH3 = 62;   // label height (hovered, with scale — 3 lines)
-const LP  = 10;   // label horizontal padding
+const LH = 26; // label height (normal — 1 line)
+const LH2 = 44; // label height (hovered, no scale — 2 lines)
+const LH3 = 62; // label height (hovered, with scale — 3 lines)
+const LP = 10; // label horizontal padding
 const DEL_R = 8;
 
 interface MeasurementLineProps {
@@ -285,8 +280,8 @@ function MeasurementLine({ id, startS, endS, distPts, hovered, onDelete, onHover
   //   no scale:     "25.4 mm / 1.00 in"  (metric first, default)
   const hoverLine1 = measureScale
     ? (() => {
-        const primary  = formatScaled(distPts, measureScale);
-        const cross    = scaledCross(distPts, measureScale);
+        const primary = formatScaled(distPts, measureScale);
+        const cross = scaledCross(distPts, measureScale);
         return cross ? `${primary} / ${cross}` : primary;
       })()
     : `${formatDist(distPts)} / ${formatInches(distPts)}`;
@@ -295,21 +290,19 @@ function MeasurementLine({ id, startS, endS, distPts, hovered, onDelete, onHover
   //   imperial PDF: "1.00 in / 25.4 mm"
   //   metric PDF or no scale: "25.4 mm / 1.00 in"
   const hoverLine2 = measureScale
-    ? (imperialFirst
-        ? `${formatInches(distPts)} / ${formatDist(distPts)}`
-        : `${formatDist(distPts)} / ${formatInches(distPts)}`)
+    ? imperialFirst
+      ? `${formatInches(distPts)} / ${formatDist(distPts)}`
+      : `${formatDist(distPts)} / ${formatInches(distPts)}`
     : null;
 
   // Hover line 3 (scaled) / line 2 (no scale) — ratio label + angle
-  const contextLabel = measureScale?.ratioLabel
-    ? `${measureScale.ratioLabel}   ${angLabel}`
-    : angLabel;
+  const contextLabel = measureScale?.ratioLabel ? `${measureScale.ratioLabel}   ${angLabel}` : angLabel;
 
   const maxHoverLh = measureScale ? LH3 : LH2;
   const lh = hovered ? maxHoverLh : LH;
 
   const lwNormal = Math.max(distLabel.length * 8 + LP * 2, 80);
-  const lwHover  = Math.max(
+  const lwHover = Math.max(
     hoverLine1.length * 8 + LP * 2,
     (hoverLine2?.length ?? 0) * 8 + LP * 2,
     contextLabel.length * 8 + LP * 2,
@@ -321,71 +314,170 @@ function MeasurementLine({ id, startS, endS, distPts, hovered, onDelete, onHover
   const delX = mid.x + lwHover / 2 + DEL_R + 4;
   const delY = mid.y;
 
-  const hitLeft   = mid.x - lwHover / 2 - 4;
-  const hitTop    = mid.y - maxHoverLh / 2 - 4;
-  const hitWidth  = (delX + DEL_R + 4) - hitLeft;
+  const hitLeft = mid.x - lwHover / 2 - 4;
+  const hitTop = mid.y - maxHoverLh / 2 - 4;
+  const hitWidth = delX + DEL_R + 4 - hitLeft;
   const hitHeight = maxHoverLh + 8;
 
   const mono = "'Roboto Mono','Consolas',monospace";
 
   return (
-    <g
-      onMouseEnter={() => onHover(id)}
-      onMouseLeave={() => onHover(null)}
-      style={{ pointerEvents: 'all' }}
-    >
-      <rect x={hitLeft} y={hitTop} width={hitWidth} height={hitHeight}
-        fill="transparent" stroke="none" style={{ pointerEvents: 'all' }} />
+    <g onMouseEnter={() => onHover(id)} onMouseLeave={() => onHover(null)} style={{ pointerEvents: "all" }}>
+      <rect
+        x={hitLeft}
+        y={hitTop}
+        width={hitWidth}
+        height={hitHeight}
+        fill="transparent"
+        stroke="none"
+        style={{ pointerEvents: "all" }}
+      />
 
-      <line x1={startS.x} y1={startS.y} x2={endS.x} y2={endS.y}
-        stroke="#1e88e5" strokeWidth={sw} strokeLinecap="round" />
-      <line x1={startS.x + nx * TICK / 2} y1={startS.y + ny * TICK / 2}
-            x2={startS.x - nx * TICK / 2} y2={startS.y - ny * TICK / 2}
-            stroke="#1e88e5" strokeWidth={sw} strokeLinecap="round" />
-      <line x1={endS.x + nx * TICK / 2} y1={endS.y + ny * TICK / 2}
-            x2={endS.x - nx * TICK / 2} y2={endS.y - ny * TICK / 2}
-            stroke="#1e88e5" strokeWidth={sw} strokeLinecap="round" />
+      <line x1={startS.x} y1={startS.y} x2={endS.x} y2={endS.y} stroke="#1e88e5" strokeWidth={sw} strokeLinecap="round" />
+      <line
+        x1={startS.x + (nx * TICK) / 2}
+        y1={startS.y + (ny * TICK) / 2}
+        x2={startS.x - (nx * TICK) / 2}
+        y2={startS.y - (ny * TICK) / 2}
+        stroke="#1e88e5"
+        strokeWidth={sw}
+        strokeLinecap="round"
+      />
+      <line
+        x1={endS.x + (nx * TICK) / 2}
+        y1={endS.y + (ny * TICK) / 2}
+        x2={endS.x - (nx * TICK) / 2}
+        y2={endS.y - (ny * TICK) / 2}
+        stroke="#1e88e5"
+        strokeWidth={sw}
+        strokeLinecap="round"
+      />
       <circle cx={startS.x} cy={startS.y} r={DOT_R} fill="#1e88e5" stroke="white" strokeWidth={2} />
       <circle cx={endS.x} cy={endS.y} r={DOT_R} fill="#1e88e5" stroke="white" strokeWidth={2} />
 
-      <g style={{ pointerEvents: 'all', cursor: 'default' }}>
-        <rect x={mid.x - lw / 2} y={mid.y - lh / 2} width={lw} height={lh}
-          rx={5} fill="white" stroke="#1e88e5" strokeWidth={1.5} filter="url(#ruler-shadow)" />
+      <g style={{ pointerEvents: "all", cursor: "default" }}>
+        <rect
+          x={mid.x - lw / 2}
+          y={mid.y - lh / 2}
+          width={lw}
+          height={lh}
+          rx={5}
+          fill="white"
+          stroke="#1e88e5"
+          strokeWidth={1.5}
+          filter="url(#ruler-shadow)"
+        />
 
         {hovered && measureScale ? (
           // 3-line scaled hover
           <>
-            <text x={mid.x} y={mid.y - 17} textAnchor="middle" dominantBaseline="middle"
-              fill="#1e88e5" fontSize={12} fontFamily={mono} fontWeight={600}
-              style={{ userSelect: 'none' }}>{hoverLine1}</text>
-            <text x={mid.x} y={mid.y} textAnchor="middle" dominantBaseline="middle"
-              fill="#546e7a" fontSize={11} fontFamily={mono} fontWeight={500}
-              style={{ userSelect: 'none' }}>{hoverLine2}</text>
-            <text x={mid.x} y={mid.y + 17} textAnchor="middle" dominantBaseline="middle"
-              fill="#5c6bc0" fontSize={10} fontFamily={mono} fontWeight={500}
-              style={{ userSelect: 'none' }}>{contextLabel}</text>
+            <text
+              x={mid.x}
+              y={mid.y - 17}
+              textAnchor="middle"
+              dominantBaseline="middle"
+              fill="#1e88e5"
+              fontSize={12}
+              fontFamily={mono}
+              fontWeight={600}
+              style={{ userSelect: "none" }}
+            >
+              {hoverLine1}
+            </text>
+            <text
+              x={mid.x}
+              y={mid.y}
+              textAnchor="middle"
+              dominantBaseline="middle"
+              fill="#546e7a"
+              fontSize={11}
+              fontFamily={mono}
+              fontWeight={500}
+              style={{ userSelect: "none" }}
+            >
+              {hoverLine2}
+            </text>
+            <text
+              x={mid.x}
+              y={mid.y + 17}
+              textAnchor="middle"
+              dominantBaseline="middle"
+              fill="#5c6bc0"
+              fontSize={10}
+              fontFamily={mono}
+              fontWeight={500}
+              style={{ userSelect: "none" }}
+            >
+              {contextLabel}
+            </text>
           </>
         ) : hovered ? (
           // 2-line no-scale hover
           <>
-            <text x={mid.x} y={mid.y - 6} textAnchor="middle" dominantBaseline="middle"
-              fill="#1e88e5" fontSize={12} fontFamily={mono} fontWeight={600}
-              style={{ userSelect: 'none' }}>{hoverLine1}</text>
-            <text x={mid.x} y={mid.y + 13} textAnchor="middle" dominantBaseline="middle"
-              fill="#5c6bc0" fontSize={11} fontFamily={mono} fontWeight={500}
-              style={{ userSelect: 'none' }}>{contextLabel}</text>
+            <text
+              x={mid.x}
+              y={mid.y - 6}
+              textAnchor="middle"
+              dominantBaseline="middle"
+              fill="#1e88e5"
+              fontSize={12}
+              fontFamily={mono}
+              fontWeight={600}
+              style={{ userSelect: "none" }}
+            >
+              {hoverLine1}
+            </text>
+            <text
+              x={mid.x}
+              y={mid.y + 13}
+              textAnchor="middle"
+              dominantBaseline="middle"
+              fill="#5c6bc0"
+              fontSize={11}
+              fontFamily={mono}
+              fontWeight={500}
+              style={{ userSelect: "none" }}
+            >
+              {contextLabel}
+            </text>
           </>
         ) : (
           // Idle — single line
-          <text x={mid.x} y={mid.y + 1} textAnchor="middle" dominantBaseline="middle"
-            fill="#1e88e5" fontSize={12} fontFamily={mono} fontWeight={600}
-            style={{ userSelect: 'none' }}>{distLabel}</text>
+          <text
+            x={mid.x}
+            y={mid.y + 1}
+            textAnchor="middle"
+            dominantBaseline="middle"
+            fill="#1e88e5"
+            fontSize={12}
+            fontFamily={mono}
+            fontWeight={600}
+            style={{ userSelect: "none" }}
+          >
+            {distLabel}
+          </text>
         )}
 
-        <g style={{ cursor: 'pointer' }} onClick={(e) => { e.stopPropagation(); onDelete(id); }}>
+        <g
+          style={{ cursor: "pointer" }}
+          onClick={(e) => {
+            e.stopPropagation();
+            onDelete(id);
+          }}
+        >
           <circle cx={delX} cy={delY} r={DEL_R} fill="#ef5350" stroke="white" strokeWidth={1.5} />
-          <text x={delX} y={delY} textAnchor="middle" dominantBaseline="middle"
-            fill="white" fontSize={12} fontWeight={700} style={{ userSelect: 'none' }}>×</text>
+          <text
+            x={delX}
+            y={delY}
+            textAnchor="middle"
+            dominantBaseline="middle"
+            fill="white"
+            fontSize={12}
+            fontWeight={700}
+            style={{ userSelect: "none" }}
+          >
+            ×
+          </text>
         </g>
       </g>
     </g>
@@ -409,28 +501,62 @@ function LiveLine({ startS, endS, zoom, measureScale }: LiveLineProps) {
 
   return (
     <g>
-      <line x1={startS.x} y1={startS.y} x2={endS.x} y2={endS.y}
-        stroke="#1e88e5" strokeWidth={2} strokeDasharray="7 4"
-        strokeLinecap="round" opacity={0.85} />
-      <line x1={startS.x + nx * TICK / 2} y1={startS.y + ny * TICK / 2}
-            x2={startS.x - nx * TICK / 2} y2={startS.y - ny * TICK / 2}
-            stroke="#1e88e5" strokeWidth={2} strokeLinecap="round" />
+      <line
+        x1={startS.x}
+        y1={startS.y}
+        x2={endS.x}
+        y2={endS.y}
+        stroke="#1e88e5"
+        strokeWidth={2}
+        strokeDasharray="7 4"
+        strokeLinecap="round"
+        opacity={0.85}
+      />
+      <line
+        x1={startS.x + (nx * TICK) / 2}
+        y1={startS.y + (ny * TICK) / 2}
+        x2={startS.x - (nx * TICK) / 2}
+        y2={startS.y - (ny * TICK) / 2}
+        stroke="#1e88e5"
+        strokeWidth={2}
+        strokeLinecap="round"
+      />
       {d > 4 && (
         <g>
-          <rect x={mid.x - lw / 2} y={mid.y - LH2 / 2} width={lw} height={LH2}
-            rx={5} fill="#1e88e5" stroke="white" strokeWidth={1} />
-          <text x={mid.x} y={mid.y - 6}
-            textAnchor="middle" dominantBaseline="middle"
-            fill="white" fontSize={12}
-            fontFamily="'Roboto Mono','Consolas',monospace" fontWeight={600}
-            style={{ userSelect: 'none' }}>
+          <rect
+            x={mid.x - lw / 2}
+            y={mid.y - LH2 / 2}
+            width={lw}
+            height={LH2}
+            rx={5}
+            fill="#1e88e5"
+            stroke="white"
+            strokeWidth={1}
+          />
+          <text
+            x={mid.x}
+            y={mid.y - 6}
+            textAnchor="middle"
+            dominantBaseline="middle"
+            fill="white"
+            fontSize={12}
+            fontFamily="'Roboto Mono','Consolas',monospace"
+            fontWeight={600}
+            style={{ userSelect: "none" }}
+          >
             {distLabel}
           </text>
-          <text x={mid.x} y={mid.y + 13}
-            textAnchor="middle" dominantBaseline="middle"
-            fill="rgba(255,255,255,0.85)" fontSize={11}
-            fontFamily="'Roboto Mono','Consolas',monospace" fontWeight={500}
-            style={{ userSelect: 'none' }}>
+          <text
+            x={mid.x}
+            y={mid.y + 13}
+            textAnchor="middle"
+            dominantBaseline="middle"
+            fill="rgba(255,255,255,0.85)"
+            fontSize={11}
+            fontFamily="'Roboto Mono','Consolas',monospace"
+            fontWeight={500}
+            style={{ userSelect: "none" }}
+          >
             {`∠ ${ang.toFixed(1)}°`}
           </text>
         </g>
@@ -463,7 +589,9 @@ export const RulerOverlay = React.forwardRef<RulerOverlayHandle, RulerOverlayPro
     const idCounter = useRef(0);
 
     const firstPtRef = useRef<PagePoint | null>(null);
-    useEffect(() => { firstPtRef.current = firstPt; }, [firstPt]);
+    useEffect(() => {
+      firstPtRef.current = firstPt;
+    }, [firstPt]);
 
     const cursorDocRef = useRef<PagePoint | null>(null);
 
@@ -472,21 +600,26 @@ export const RulerOverlay = React.forwardRef<RulerOverlayHandle, RulerOverlayPro
     const { registerImmediateZoomUpdate } = viewer;
 
     const [zoom, setZoom] = useState<number>(() => {
-      try { return ((viewer.getZoomState() as any)?.zoomPercent ?? 140) / 100; }
-      catch { return 1.4; }
+      try {
+        return ((viewer.getZoomState() as any)?.zoomPercent ?? 140) / 100;
+      } catch {
+        return 1.4;
+      }
     });
 
     const zoomRef = useRef(zoom);
-    useEffect(() => { zoomRef.current = zoom; }, [zoom]);
+    useEffect(() => {
+      zoomRef.current = zoom;
+    }, [zoom]);
 
     useEffect(() => {
       return registerImmediateZoomUpdate((pct) => {
         const newZoom = pct / 100;
         zoomRef.current = newZoom; // immediate for event-listener closures
-        setZoom(newZoom);          // re-render #1: zoom updated, but PDF.js DOM may not be yet
+        setZoom(newZoom); // re-render #1: zoom updated, but PDF.js DOM may not be yet
         // re-render #2: after PDF.js has updated page element dimensions in the DOM,
         // so getBoundingClientRect returns the correct positions for the new zoom level.
-        requestAnimationFrame(() => setScrollVersion(n => n + 1));
+        requestAnimationFrame(() => setScrollVersion((n) => n + 1));
       });
     }, [registerImmediateZoomUpdate]);
 
@@ -497,9 +630,9 @@ export const RulerOverlay = React.forwardRef<RulerOverlayHandle, RulerOverlayPro
     const attachScrollEl = useCallback((el: HTMLElement) => {
       scrollCleanupRef.current?.();
       scrollElRef.current = el;
-      const handler = () => setScrollVersion(n => n + 1);
-      el.addEventListener('scroll', handler, { passive: true });
-      scrollCleanupRef.current = () => el.removeEventListener('scroll', handler);
+      const handler = () => setScrollVersion((n) => n + 1);
+      el.addEventListener("scroll", handler, { passive: true });
+      scrollCleanupRef.current = () => el.removeEventListener("scroll", handler);
     }, []);
 
     useEffect(() => {
@@ -508,13 +641,19 @@ export const RulerOverlay = React.forwardRef<RulerOverlayHandle, RulerOverlayPro
 
       const tryAttach = () => {
         const el = findScrollEl(container);
-        if (el) { attachScrollEl(el); return true; }
+        if (el) {
+          attachScrollEl(el);
+          return true;
+        }
         return false;
       };
 
       if (!tryAttach()) {
         const timer = setTimeout(() => tryAttach(), 600);
-        return () => { clearTimeout(timer); scrollCleanupRef.current?.(); };
+        return () => {
+          clearTimeout(timer);
+          scrollCleanupRef.current?.();
+        };
       }
       return () => scrollCleanupRef.current?.();
     }, [containerRef, attachScrollEl]);
@@ -529,12 +668,21 @@ export const RulerOverlay = React.forwardRef<RulerOverlayHandle, RulerOverlayPro
 
     // ── Imperative handle ──────────────────────────────────────────────────────
     React.useImperativeHandle(ref, () => ({
-      clearAll: () => { setMeasurements([]); setFirstPt(null); setCursorS(null); setCursorDoc(null); },
+      clearAll: () => {
+        setMeasurements([]);
+        setFirstPt(null);
+        setCursorS(null);
+        setCursorDoc(null);
+      },
     }));
 
     // ── Reset when deactivated ─────────────────────────────────────────────────
     useEffect(() => {
-      if (!isActive) { setFirstPt(null); setCursorS(null); setCursorDoc(null); }
+      if (!isActive) {
+        setFirstPt(null);
+        setCursorS(null);
+        setCursorDoc(null);
+      }
     }, [isActive]);
 
     // ── Mouse events ───────────────────────────────────────────────────────────
@@ -552,9 +700,9 @@ export const RulerOverlay = React.forwardRef<RulerOverlayHandle, RulerOverlayPro
        * Returns null if the cursor is not directly over a page element.
        */
       const toDocPagePt = (e: MouseEvent): PagePoint | null => {
-        const pageEl = (e.target as Element).closest?.('[data-page-index]') as HTMLElement | null;
+        const pageEl = (e.target as Element).closest?.("[data-page-index]") as HTMLElement | null;
         if (!pageEl) return null;
-        const pageIndex = parseInt(pageEl.dataset.pageIndex ?? '0', 10);
+        const pageIndex = parseInt(pageEl.dataset.pageIndex ?? "0", 10);
         const r = pageEl.getBoundingClientRect();
         const z = zoomRef.current;
         return { pageIndex, x: (e.clientX - r.left) / z, y: (e.clientY - r.top) / z };
@@ -570,14 +718,14 @@ export const RulerOverlay = React.forwardRef<RulerOverlayHandle, RulerOverlayPro
         const screenPt = toScreenPt(e);
 
         if (isOverPage(e)) {
-          el.style.cursor = 'crosshair';
+          el.style.cursor = "crosshair";
           const docPt = toDocPagePt(e);
           setCursorS(screenPt);
           setCursorDoc(docPt);
           cursorDocRef.current = docPt;
         } else if (firstPtRef.current !== null) {
           // First point placed, cursor wandered off page — clamp to nearest edge
-          el.style.cursor = 'crosshair';
+          el.style.cursor = "crosshair";
           const result = nearestPageDocPt(screenPt, el, zoomRef.current);
           if (result) {
             setCursorS(result.screenPt);
@@ -585,14 +733,14 @@ export const RulerOverlay = React.forwardRef<RulerOverlayHandle, RulerOverlayPro
             cursorDocRef.current = result.docPt;
           }
         } else {
-          el.style.cursor = 'default';
+          el.style.cursor = "default";
           clearCursor();
         }
       };
 
       const onClick = (e: MouseEvent) => {
         if (e.button !== 0) return;
-        if ((e.target as Element).closest?.('[data-ruler-interactive]')) return;
+        if ((e.target as Element).closest?.("[data-ruler-interactive]")) return;
 
         const overPage = isOverPage(e);
         if (!overPage && firstPtRef.current === null) return;
@@ -601,38 +749,45 @@ export const RulerOverlay = React.forwardRef<RulerOverlayHandle, RulerOverlayPro
         const dp = overPage ? toDocPagePt(e) : cursorDocRef.current;
         if (!dp) return;
 
-        setFirstPt(prev => {
-          if (!prev) { firstPtRef.current = dp; return dp; }
+        setFirstPt((prev) => {
+          if (!prev) {
+            firstPtRef.current = dp;
+            return dp;
+          }
           firstPtRef.current = null;
           const id = `ruler-${++idCounter.current}`;
-          setMeasurements(m => [...m, { id, start: prev, end: dp }]);
+          setMeasurements((m) => [...m, { id, start: prev, end: dp }]);
           return null;
         });
       };
 
       const onLeave = () => {
-        el.style.cursor = '';
+        el.style.cursor = "";
         if (firstPtRef.current === null) clearCursor();
       };
       const onKey = (e: KeyboardEvent) => {
-        if (e.key === 'Escape') { setFirstPt(null); setCursorS(null); setCursorDoc(null); }
+        if (e.key === "Escape") {
+          setFirstPt(null);
+          setCursorS(null);
+          setCursorDoc(null);
+        }
       };
 
-      el.addEventListener('mousemove', onMove);
-      el.addEventListener('click', onClick);
-      el.addEventListener('mouseleave', onLeave);
-      document.addEventListener('keydown', onKey);
+      el.addEventListener("mousemove", onMove);
+      el.addEventListener("click", onClick);
+      el.addEventListener("mouseleave", onLeave);
+      document.addEventListener("keydown", onKey);
       return () => {
-        el.removeEventListener('mousemove', onMove);
-        el.removeEventListener('click', onClick);
-        el.removeEventListener('mouseleave', onLeave);
-        document.removeEventListener('keydown', onKey);
-        el.style.cursor = '';
+        el.removeEventListener("mousemove", onMove);
+        el.removeEventListener("click", onClick);
+        el.removeEventListener("mouseleave", onLeave);
+        document.removeEventListener("keydown", onKey);
+        el.style.cursor = "";
       };
     }, [containerRef, isActive]);
 
     const deleteMeasurement = useCallback((id: string) => {
-      setMeasurements(prev => prev.filter(m => m.id !== id));
+      setMeasurements((prev) => prev.filter((m) => m.id !== id));
     }, []);
 
     if (!isActive && measurements.length === 0) return null;
@@ -657,7 +812,7 @@ export const RulerOverlay = React.forwardRef<RulerOverlayHandle, RulerOverlayPro
       const containerRect = container.getBoundingClientRect();
       return {
         x: pageRect.left - containerRect.left + pt.x * zoom,
-        y: pageRect.top  - containerRect.top  + pt.y * zoom,
+        y: pageRect.top - containerRect.top + pt.y * zoom,
       };
     };
 
@@ -666,13 +821,13 @@ export const RulerOverlay = React.forwardRef<RulerOverlayHandle, RulerOverlayPro
     return (
       <svg
         style={{
-          position: 'absolute',
+          position: "absolute",
           top: 0,
           left: 0,
-          width: '100%',
-          height: '100%',
-          pointerEvents: 'none',
-          overflow: 'visible',
+          width: "100%",
+          height: "100%",
+          pointerEvents: "none",
+          overflow: "visible",
           zIndex: 100,
         }}
       >
@@ -683,9 +838,9 @@ export const RulerOverlay = React.forwardRef<RulerOverlayHandle, RulerOverlayPro
         </defs>
 
         {/* Completed measurements */}
-        {measurements.map(m => {
+        {measurements.map((m) => {
           const startS = pagePointToScreen(m.start);
-          const endS   = pagePointToScreen(m.end);
+          const endS = pagePointToScreen(m.end);
           if (!startS || !endS) return null;
           const mScale = pageMeasureScales ? pickScale(m.start, m.end, pageMeasureScales) : null;
           return (
@@ -706,10 +861,10 @@ export const RulerOverlay = React.forwardRef<RulerOverlayHandle, RulerOverlayPro
         {/* Live line while drawing */}
         {isActive && firstPtS && cursorS && (
           <LiveLine
-            startS={firstPtS} endS={cursorS} zoom={zoom}
-            measureScale={pageMeasureScales && firstPt && cursorDoc
-              ? pickScale(firstPt, cursorDoc, pageMeasureScales)
-              : null}
+            startS={firstPtS}
+            endS={cursorS}
+            zoom={zoom}
+            measureScale={pageMeasureScales && firstPt && cursorDoc ? pickScale(firstPt, cursorDoc, pageMeasureScales) : null}
           />
         )}
 
@@ -729,19 +884,32 @@ export const RulerOverlay = React.forwardRef<RulerOverlayHandle, RulerOverlayPro
 
         {/* Clear all */}
         {measurements.length > 0 && (
-          <g data-ruler-interactive="true" style={{ pointerEvents: 'all', cursor: 'pointer' }}
-            onClick={(e) => { e.stopPropagation(); setMeasurements([]); }}>
-            <rect x={8} y={8} width={88} height={26} rx={5}
-              fill="rgba(239,83,80,0.9)" stroke="white" strokeWidth={1} />
-            <text x={52} y={25} textAnchor="middle" fill="white" fontSize={12}
-              fontFamily="sans-serif" fontWeight={600} style={{ userSelect: 'none' }}>
+          <g
+            data-ruler-interactive="true"
+            style={{ pointerEvents: "all", cursor: "pointer" }}
+            onClick={(e) => {
+              e.stopPropagation();
+              setMeasurements([]);
+            }}
+          >
+            <rect x={8} y={8} width={88} height={26} rx={5} fill="rgba(239,83,80,0.9)" stroke="white" strokeWidth={1} />
+            <text
+              x={52}
+              y={25}
+              textAnchor="middle"
+              fill="white"
+              fontSize={12}
+              fontFamily="sans-serif"
+              fontWeight={600}
+              style={{ userSelect: "none" }}
+            >
               Clear all
             </text>
           </g>
         )}
       </svg>
     );
-  }
+  },
 );
 
-RulerOverlay.displayName = 'RulerOverlay';
+RulerOverlay.displayName = "RulerOverlay";
diff --git a/frontend/src/core/components/viewer/ScrollAPIBridge.tsx b/frontend/src/core/components/viewer/ScrollAPIBridge.tsx
index 9e1add3d6a..1230bf247e 100644
--- a/frontend/src/core/components/viewer/ScrollAPIBridge.tsx
+++ b/frontend/src/core/components/viewer/ScrollAPIBridge.tsx
@@ -1,8 +1,8 @@
-import { useEffect, useRef } from 'react';
-import { useScroll } from '@embedpdf/plugin-scroll/react';
-import { useViewer } from '@app/contexts/ViewerContext';
-import { useActiveDocumentId } from '@app/components/viewer/useActiveDocumentId';
-import { useDocumentReady } from '@app/components/viewer/hooks/useDocumentReady';
+import { useEffect, useRef } from "react";
+import { useScroll } from "@embedpdf/plugin-scroll/react";
+import { useViewer } from "@app/contexts/ViewerContext";
+import { useActiveDocumentId } from "@app/components/viewer/useActiveDocumentId";
+import { useDocumentReady } from "@app/components/viewer/hooks/useDocumentReady";
 
 /**
  * Connects the PDF scroll plugin to the shared ViewerContext.
@@ -44,14 +44,14 @@ function ScrollAPIBridgeInner({ documentId }: { documentId: string }) {
       // Trigger immediate update for responsive UI
       triggerImmediateScrollUpdate(newState.currentPage, newState.totalPages);
 
-      registerBridge('scroll', {
+      registerBridge("scroll", {
         state: newState,
-        api: currentScroll
+        api: currentScroll,
       });
     }
 
     return () => {
-      registerBridge('scroll', null);
+      registerBridge("scroll", null);
     };
   }, [currentPage, totalPages, registerBridge, triggerImmediateScrollUpdate]);
 
diff --git a/frontend/src/core/components/viewer/SearchAPIBridge.tsx b/frontend/src/core/components/viewer/SearchAPIBridge.tsx
index af06221b7a..696fbe9b72 100644
--- a/frontend/src/core/components/viewer/SearchAPIBridge.tsx
+++ b/frontend/src/core/components/viewer/SearchAPIBridge.tsx
@@ -1,8 +1,8 @@
-import { useEffect, useState, useRef } from 'react';
-import { useSearch } from '@embedpdf/plugin-search/react';
-import { useViewer } from '@app/contexts/ViewerContext';
-import { useActiveDocumentId } from '@app/components/viewer/useActiveDocumentId';
-import { useDocumentReady } from '@app/components/viewer/hooks/useDocumentReady';
+import { useEffect, useState, useRef } from "react";
+import { useSearch } from "@embedpdf/plugin-search/react";
+import { useViewer } from "@app/contexts/ViewerContext";
+import { useActiveDocumentId } from "@app/components/viewer/useActiveDocumentId";
+import { useDocumentReady } from "@app/components/viewer/hooks/useDocumentReady";
 
 interface SearchResult {
   pageIndex: number;
@@ -43,7 +43,7 @@ function SearchAPIBridgeInner({ documentId }: { documentId: string }) {
 
   const [localState, setLocalState] = useState({
     results: null as SearchResult[] | null,
-    activeIndex: 0
+    activeIndex: 0,
   });
 
   // Subscribe to search result changes from EmbedPDF
@@ -58,22 +58,23 @@ function SearchAPIBridgeInner({ documentId }: { documentId: string }) {
 
     if (!search) return;
 
-    subscriptionRef.current = search.onSearchResultStateChange?.((state: any) => {
-      if (!state) return;
+    subscriptionRef.current =
+      search.onSearchResultStateChange?.((state: any) => {
+        if (!state) return;
 
-      const newState = {
-        results: state.results || null,
-        activeIndex: (state.activeResultIndex || 0) + 1 // Convert to 1-based index
-      };
+        const newState = {
+          results: state.results || null,
+          activeIndex: (state.activeResultIndex || 0) + 1, // Convert to 1-based index
+        };
 
-      setLocalState(prevState => {
-        // Only update if state actually changed
-        if (prevState.results !== newState.results || prevState.activeIndex !== newState.activeIndex) {
-          return newState;
-        }
-        return prevState;
-      });
-    }) ?? null;
+        setLocalState((prevState) => {
+          // Only update if state actually changed
+          if (prevState.results !== newState.results || prevState.activeIndex !== newState.activeIndex) {
+            return newState;
+          }
+          return prevState;
+        });
+      }) ?? null;
 
     return () => {
       if (subscriptionRef.current) {
@@ -96,9 +97,11 @@ function SearchAPIBridgeInner({ documentId }: { documentId: string }) {
 
     // Only scroll if the active index actually changed
     const activeResultIndex = localActiveIndex - 1; // Convert back to 0-based
-    if (activeResultIndex >= 0 &&
-        activeResultIndex < localResults.length &&
-        lastScrolledIndexRef.current !== activeResultIndex) {
+    if (
+      activeResultIndex >= 0 &&
+      activeResultIndex < localResults.length &&
+      lastScrolledIndexRef.current !== activeResultIndex
+    ) {
       const activeResult = localResults[activeResultIndex];
       if (activeResult) {
         const pageNumber = activeResult.pageIndex + 1; // Convert to 1-based page number
@@ -112,7 +115,7 @@ function SearchAPIBridgeInner({ documentId }: { documentId: string }) {
   useEffect(() => {
     const currentSearch = searchRef.current;
     if (currentSearch) {
-      registerBridge('search', {
+      registerBridge("search", {
         state: { results: localResults, activeIndex: localActiveIndex },
         api: {
           search: async (query: string) => {
@@ -133,11 +136,11 @@ function SearchAPIBridgeInner({ documentId }: { documentId: string }) {
               return results;
             } catch (error: any) {
               // Handle abort errors gracefully - these occur when searches overlap
-              if (error?.type === 'abort' || error?.message?.includes('abort')) {
+              if (error?.type === "abort" || error?.message?.includes("abort")) {
                 // Silently handle abort - this is expected when user types quickly
                 return null;
               }
-              console.error('Search failed:', error);
+              console.error("Search failed:", error);
               return null;
             } finally {
               isSearchingRef.current = false;
@@ -149,7 +152,7 @@ function SearchAPIBridgeInner({ documentId }: { documentId: string }) {
                 currentSearch.stopSearch();
               }
             } catch (error) {
-              console.warn('Error stopping search:', error);
+              console.warn("Error stopping search:", error);
             }
             setLocalState({ results: null, activeIndex: 0 });
           },
@@ -157,29 +160,29 @@ function SearchAPIBridgeInner({ documentId }: { documentId: string }) {
             try {
               currentSearch?.nextResult?.();
             } catch (error) {
-              console.warn('Error navigating to next result:', error);
+              console.warn("Error navigating to next result:", error);
             }
           },
           previous: () => {
             try {
               currentSearch?.previousResult?.();
             } catch (error) {
-              console.warn('Error navigating to previous result:', error);
+              console.warn("Error navigating to previous result:", error);
             }
           },
           goToResult: (index: number) => {
             try {
               currentSearch?.goToResult?.(index);
             } catch (error) {
-              console.warn('Error going to result:', error);
+              console.warn("Error going to result:", error);
             }
           },
-        }
+        },
       });
     }
 
     return () => {
-      registerBridge('search', null);
+      registerBridge("search", null);
     };
   }, [localResults, localActiveIndex, registerBridge]);
 
diff --git a/frontend/src/core/components/viewer/SearchInterface.tsx b/frontend/src/core/components/viewer/SearchInterface.tsx
index eefac81544..879a32c8de 100644
--- a/frontend/src/core/components/viewer/SearchInterface.tsx
+++ b/frontend/src/core/components/viewer/SearchInterface.tsx
@@ -1,8 +1,8 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { Box, TextInput, ActionIcon, Text, Group } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { LocalIcon } from '@app/components/shared/LocalIcon';
-import { ViewerContext } from '@app/contexts/ViewerContext';
+import React, { useState, useEffect, useRef } from "react";
+import { Box, TextInput, ActionIcon, Text, Group } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { LocalIcon } from "@app/components/shared/LocalIcon";
+import { ViewerContext } from "@app/contexts/ViewerContext";
 
 interface SearchInterfaceProps {
   visible: boolean;
@@ -19,8 +19,8 @@ export function SearchInterface({ visible, onClose }: SearchInterfaceProps) {
   const searchResults = searchState?.results;
   const searchActiveIndex = searchState?.activeIndex;
   const searchActions = viewerContext?.searchActions;
-  const [searchQuery, setSearchQuery] = useState('');
-  const [jumpToValue, setJumpToValue] = useState('');
+  const [searchQuery, setSearchQuery] = useState("");
+  const [jumpToValue, setJumpToValue] = useState("");
   const [resultInfo, setResultInfo] = useState<{
     currentIndex: number;
     totalResults: number;
@@ -42,9 +42,9 @@ export function SearchInterface({ visible, onClose }: SearchInterfaceProps) {
       inputRef.current?.select();
     };
 
-    window.addEventListener('refocus-search-input', handleRefocus);
+    window.addEventListener("refocus-search-input", handleRefocus);
     return () => {
-      window.removeEventListener('refocus-search-input', handleRefocus);
+      window.removeEventListener("refocus-search-input", handleRefocus);
     };
   }, []);
 
@@ -69,7 +69,7 @@ export function SearchInterface({ visible, onClose }: SearchInterfaceProps) {
         try {
           await searchActions.search(searchQuery.trim());
         } catch (error) {
-          console.error('Search failed:', error);
+          console.error("Search failed:", error);
         } finally {
           setIsSearching(false);
         }
@@ -95,14 +95,14 @@ export function SearchInterface({ visible, onClose }: SearchInterfaceProps) {
         setResultInfo({
           currentIndex: activeIndex,
           totalResults: searchResults.length,
-          query: searchQuery // Use local search query
+          query: searchQuery, // Use local search query
         });
       } else if (searchQuery && searchResults?.length === 0) {
         // Show "no results" state
         setResultInfo({
           currentIndex: 0,
           totalResults: 0,
-          query: searchQuery
+          query: searchQuery,
         });
       } else {
         setResultInfo(null);
@@ -117,17 +117,17 @@ export function SearchInterface({ visible, onClose }: SearchInterfaceProps) {
   }, [visible, searchResults, searchActiveIndex, searchQuery]);
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Enter') {
+    if (event.key === "Enter") {
       // Navigate to next result on Enter
       event.preventDefault();
       handleNext();
-    } else if (event.key === 'Escape') {
+    } else if (event.key === "Escape") {
       onClose();
-    } else if (event.key === 'ArrowDown') {
+    } else if (event.key === "ArrowDown") {
       // Navigate to next result
       event.preventDefault();
       handleNext();
-    } else if (event.key === 'ArrowUp') {
+    } else if (event.key === "ArrowUp") {
       // Navigate to previous result
       event.preventDefault();
       handlePrevious();
@@ -144,7 +144,7 @@ export function SearchInterface({ visible, onClose }: SearchInterfaceProps) {
 
   const handleClearSearch = () => {
     searchActions?.clear();
-    setSearchQuery('');
+    setSearchQuery("");
     setResultInfo(null);
   };
 
@@ -161,12 +161,12 @@ export function SearchInterface({ visible, onClose }: SearchInterfaceProps) {
     const index = parseInt(jumpToValue, 10);
     if (!isNaN(index) && resultInfo && index >= 1 && index <= resultInfo.totalResults) {
       handleJumpToResult(index);
-      setJumpToValue(''); // Clear the input after jumping
+      setJumpToValue(""); // Clear the input after jumping
     }
   };
 
   const handleJumpToKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter') {
+    if (e.key === "Enter") {
       handleJumpToSubmit();
     }
   };
@@ -183,24 +183,18 @@ export function SearchInterface({ visible, onClose }: SearchInterfaceProps) {
     onClose();
   };
 
-
   return (
     <Box
       style={{
-        padding: '0px'
+        padding: "0px",
       }}
     >
       {/* Header with close button */}
       <Group mb="md" justify="space-between">
         <Text size="sm" fw={600}>
-          {t('search.title', 'Search PDF')}
+          {t("search.title", "Search PDF")}
         </Text>
-        <ActionIcon
-          variant="subtle"
-          size="sm"
-          onClick={handleCloseClick}
-          aria-label="Close search"
-        >
+        <ActionIcon variant="subtle" size="sm" onClick={handleCloseClick} aria-label="Close search">
           <LocalIcon icon="close" width="1rem" height="1rem" />
         </ActionIcon>
       </Group>
@@ -209,7 +203,7 @@ export function SearchInterface({ visible, onClose }: SearchInterfaceProps) {
       <Group mb="md">
         <TextInput
           ref={inputRef}
-          placeholder={t('search.placeholder', 'Enter search term...')}
+          placeholder={t("search.placeholder", "Enter search term...")}
           value={searchQuery}
           onChange={(e) => {
             const newValue = e.currentTarget.value;
@@ -220,11 +214,7 @@ export function SearchInterface({ visible, onClose }: SearchInterfaceProps) {
           style={{ flex: 1 }}
           rightSection={
             searchQuery.trim() && (
-              <ActionIcon
-                variant="subtle"
-                onClick={handleClearSearch}
-                aria-label="Clear search"
-              >
+              <ActionIcon variant="subtle" onClick={handleClearSearch} aria-label="Clear search">
                 <LocalIcon icon="close" width="0.875rem" height="0.875rem" />
               </ActionIcon>
             )
@@ -249,9 +239,9 @@ export function SearchInterface({ visible, onClose }: SearchInterfaceProps) {
               }
             }}
             onKeyDown={handleJumpToKeyDown}
-            onBlur={() => setJumpToValue('')} // Clear on blur instead of submit
+            onBlur={() => setJumpToValue("")} // Clear on blur instead of submit
             placeholder={(resultInfo?.currentIndex || 0).toString()}
-            style={{ width: '3rem' }}
+            style={{ width: "3rem" }}
             type="number"
             min="1"
             max={resultInfo?.totalResults || 0}
@@ -287,9 +277,9 @@ export function SearchInterface({ visible, onClose }: SearchInterfaceProps) {
       {/* Loading state */}
       {isSearching && (
         <Text size="xs" c="dimmed" ta="center" mt="sm">
-          {t('search.searching', 'Searching...')}
+          {t("search.searching", "Searching...")}
         </Text>
       )}
     </Box>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/core/components/viewer/SelectionAPIBridge.tsx b/frontend/src/core/components/viewer/SelectionAPIBridge.tsx
index 78eff1d1ae..49f1daf034 100644
--- a/frontend/src/core/components/viewer/SelectionAPIBridge.tsx
+++ b/frontend/src/core/components/viewer/SelectionAPIBridge.tsx
@@ -1,7 +1,7 @@
-import { useEffect, useRef } from 'react';
-import { useSelectionCapability } from '@embedpdf/plugin-selection/react';
-import { useViewer } from '@app/contexts/ViewerContext';
-import { useDocumentReady } from '@app/components/viewer/hooks/useDocumentReady';
+import { useEffect, useRef } from "react";
+import { useSelectionCapability } from "@embedpdf/plugin-selection/react";
+import { useViewer } from "@app/contexts/ViewerContext";
+import { useDocumentReady } from "@app/components/viewer/hooks/useDocumentReady";
 
 /**
  * Connects the PDF selection plugin to the shared ViewerContext.
@@ -11,9 +11,8 @@ export function SelectionAPIBridge() {
   const { registerBridge } = useViewer();
   const documentReady = useDocumentReady();
 
-
   const hasSelectionRef = useRef(false);
-  const selectedTextRef = useRef('');
+  const selectedTextRef = useRef("");
 
   useEffect(() => {
     if (!selection || !documentReady) return;
@@ -24,56 +23,63 @@ export function SelectionAPIBridge() {
       getFormattedSelection: () => selection.getFormattedSelection(),
     });
 
-    registerBridge('selection', { state: { hasSelection: false }, api: buildApi() });
+    registerBridge("selection", { state: { hasSelection: false }, api: buildApi() });
 
     const unsubChange = selection.onSelectionChange((event: any) => {
       const hasText = !!event?.selection;
       hasSelectionRef.current = hasText;
 
-      registerBridge('selection', { state: { hasSelection: hasText }, api: buildApi() });
+      registerBridge("selection", { state: { hasSelection: hasText }, api: buildApi() });
 
       if (hasText) {
         try {
           const result = selection.getSelectedText();
-          result?.wait?.((texts: string[]) => {
-            selectedTextRef.current = texts.join('\n');
-          }, () => { /* ignore errors */ });
+          result?.wait?.(
+            (texts: string[]) => {
+              selectedTextRef.current = texts.join("\n");
+            },
+            () => {
+              /* ignore errors */
+            },
+          );
         } catch {
           // Engine access failed
         }
       } else {
-        selectedTextRef.current = '';
+        selectedTextRef.current = "";
       }
     });
 
     // Fallback: subscribe to the plugin's copy event for navigator.clipboard writes
     const unsubCopy = selection.onCopyToClipboard(({ text }: { text: string }) => {
       if (text) {
-        navigator.clipboard.writeText(text).catch(() => { /* ignore */ });
+        navigator.clipboard.writeText(text).catch(() => {
+          /* ignore */
+        });
       }
     });
 
     const handleCopy = (event: ClipboardEvent) => {
       if (!hasSelectionRef.current || !selectedTextRef.current) return;
-      event.clipboardData?.setData('text/plain', selectedTextRef.current);
+      event.clipboardData?.setData("text/plain", selectedTextRef.current);
       event.preventDefault();
     };
 
     const handleKeyDown = (event: KeyboardEvent) => {
-      if ((event.ctrlKey || event.metaKey) && event.key === 'c' && hasSelectionRef.current) {
+      if ((event.ctrlKey || event.metaKey) && event.key === "c" && hasSelectionRef.current) {
         selection.copyToClipboard();
       }
     };
 
-    document.addEventListener('copy', handleCopy);
-    document.addEventListener('keydown', handleKeyDown);
+    document.addEventListener("copy", handleCopy);
+    document.addEventListener("keydown", handleKeyDown);
 
     return () => {
       unsubChange?.();
       unsubCopy?.();
-      document.removeEventListener('copy', handleCopy);
-      document.removeEventListener('keydown', handleKeyDown);
-      registerBridge('selection', null);
+      document.removeEventListener("copy", handleCopy);
+      document.removeEventListener("keydown", handleKeyDown);
+      registerBridge("selection", null);
     };
   }, [selection, documentReady, registerBridge]);
 
diff --git a/frontend/src/core/components/viewer/SignatureAPIBridge.tsx b/frontend/src/core/components/viewer/SignatureAPIBridge.tsx
index 1aac54bd0a..25b7d86fcd 100644
--- a/frontend/src/core/components/viewer/SignatureAPIBridge.tsx
+++ b/frontend/src/core/components/viewer/SignatureAPIBridge.tsx
@@ -1,11 +1,11 @@
-import { useImperativeHandle, forwardRef, useEffect, useCallback, useRef, useState } from 'react';
-import { useAnnotationCapability } from '@embedpdf/plugin-annotation/react';
-import { PdfAnnotationSubtype, uuidV4 } from '@embedpdf/models';
-import { useSignature } from '@app/contexts/SignatureContext';
-import type { SignatureAPI, AnnotationRect } from '@app/components/viewer/viewerTypes';
-import type { SignParameters } from '@app/hooks/tools/sign/useSignParameters';
-import { useViewer } from '@app/contexts/ViewerContext';
-import { useDocumentReady } from '@app/components/viewer/hooks/useDocumentReady';
+import { useImperativeHandle, forwardRef, useEffect, useCallback, useRef, useState } from "react";
+import { useAnnotationCapability } from "@embedpdf/plugin-annotation/react";
+import { PdfAnnotationSubtype, uuidV4 } from "@embedpdf/models";
+import { useSignature } from "@app/contexts/SignatureContext";
+import type { SignatureAPI, AnnotationRect } from "@app/components/viewer/viewerTypes";
+import type { SignParameters } from "@app/hooks/tools/sign/useSignParameters";
+import { useViewer } from "@app/contexts/ViewerContext";
+import { useDocumentReady } from "@app/components/viewer/hooks/useDocumentReady";
 
 /**
  * Connects the PDF signature (stamp/ink) tools to the shared ViewerContext and SignatureContext.
@@ -23,15 +23,15 @@ const extractDataUrl = (value: unknown, depth = 0, visited: Set<unknown> = new S
   if (!value || depth > 6) return undefined;
 
   // Prevent circular references
-  if (typeof value === 'object' && visited.has(value)) {
+  if (typeof value === "object" && visited.has(value)) {
     return undefined;
   }
 
-  if (typeof value === 'string') {
-    return value.startsWith('data:image') ? value : undefined;
+  if (typeof value === "string") {
+    return value.startsWith("data:image") ? value : undefined;
   }
 
-  if (typeof value === 'object') {
+  if (typeof value === "object") {
     visited.add(value);
 
     if (Array.isArray(value)) {
@@ -52,22 +52,22 @@ const extractDataUrl = (value: unknown, depth = 0, visited: Set<unknown> = new S
 
 const createTextStampImage = (
   config: SignParameters,
-  displaySize?: { width: number; height: number } | null
+  displaySize?: { width: number; height: number } | null,
 ): { dataUrl: string; pixelWidth: number; pixelHeight: number; displayWidth: number; displayHeight: number } | null => {
-  const text = (config.signerName ?? '').trim();
+  const text = (config.signerName ?? "").trim();
   if (!text) {
     return null;
   }
 
   const fontSize = config.fontSize ?? 16;
-  const fontFamily = config.fontFamily ?? 'Helvetica';
-  const textColor = config.textColor ?? '#000000';
+  const fontFamily = config.fontFamily ?? "Helvetica";
+  const textColor = config.textColor ?? "#000000";
 
   const paddingX = Math.max(4, Math.round(fontSize * 0.8));
   const paddingY = Math.max(4, Math.round(fontSize * 0.6));
 
-  const measureCanvas = document.createElement('canvas');
-  const measureCtx = measureCanvas.getContext('2d');
+  const measureCanvas = document.createElement("canvas");
+  const measureCtx = measureCanvas.getContext("2d");
   if (!measureCtx) {
     return null;
   }
@@ -86,20 +86,14 @@ const createTextStampImage = (
   const displayWidth = Math.max(MIN_SIGNATURE_DIMENSION, naturalWidth * scale);
   const displayHeight = Math.max(MIN_SIGNATURE_DIMENSION, naturalHeight * scale);
 
-  const canvasWidth = Math.max(
-    MIN_SIGNATURE_DIMENSION,
-    Math.round(displayWidth * TEXT_OVERSAMPLE_FACTOR)
-  );
-  const canvasHeight = Math.max(
-    MIN_SIGNATURE_DIMENSION,
-    Math.round(displayHeight * TEXT_OVERSAMPLE_FACTOR)
-  );
+  const canvasWidth = Math.max(MIN_SIGNATURE_DIMENSION, Math.round(displayWidth * TEXT_OVERSAMPLE_FACTOR));
+  const canvasHeight = Math.max(MIN_SIGNATURE_DIMENSION, Math.round(displayHeight * TEXT_OVERSAMPLE_FACTOR));
 
-  const canvas = document.createElement('canvas');
+  const canvas = document.createElement("canvas");
   canvas.width = canvasWidth;
   canvas.height = canvasHeight;
 
-  const ctx = canvas.getContext('2d');
+  const ctx = canvas.getContext("2d");
   if (!ctx) {
     return null;
   }
@@ -109,23 +103,23 @@ const createTextStampImage = (
 
   ctx.fillStyle = textColor;
   ctx.font = `${fontSize}px ${fontFamily}`;
-  ctx.textAlign = config.textAlign || 'left';
-  ctx.textBaseline = 'middle';
+  ctx.textAlign = config.textAlign || "left";
+  ctx.textBaseline = "middle";
 
   const horizontalPadding = paddingX;
   const verticalCenter = naturalHeight / 2;
 
   let xPosition = horizontalPadding;
-  if (config.textAlign === 'center') {
+  if (config.textAlign === "center") {
     xPosition = naturalWidth / 2;
-  } else if (config.textAlign === 'right') {
+  } else if (config.textAlign === "right") {
     xPosition = naturalWidth - horizontalPadding;
   }
 
   ctx.fillText(text, xPosition, verticalCenter);
 
   return {
-    dataUrl: canvas.toDataURL('image/png'),
+    dataUrl: canvas.toDataURL("image/png"),
     pixelWidth: canvasWidth,
     pixelHeight: canvasHeight,
     displayWidth,
@@ -138,7 +132,10 @@ interface SignatureAPIBridgeProps {
   isSignMode?: boolean;
 }
 
-export const SignatureAPIBridge = forwardRef<SignatureAPI, SignatureAPIBridgeProps>(function SignatureAPIBridge({ isSignMode = false }, ref) {
+export const SignatureAPIBridge = forwardRef<SignatureAPI, SignatureAPIBridgeProps>(function SignatureAPIBridge(
+  { isSignMode = false },
+  ref,
+) {
   const { provides: annotationApi } = useAnnotationCapability();
   const { signatureConfig, storeImageData, isPlacementMode, placementPreviewSize, setSignaturesApplied } = useSignature();
   const { getZoomState, registerImmediateZoomUpdate } = useViewer();
@@ -148,7 +145,7 @@ export const SignatureAPIBridge = forwardRef<SignatureAPI, SignatureAPIBridgePro
 
   useEffect(() => {
     setCurrentZoom(getZoomState()?.currentZoom ?? 1);
-    const unregister = registerImmediateZoomUpdate(percent => {
+    const unregister = registerImmediateZoomUpdate((percent) => {
       setCurrentZoom(Math.max(percent / 100, 0.01));
     });
     return () => {
@@ -173,7 +170,7 @@ export const SignatureAPIBridge = forwardRef<SignatureAPI, SignatureAPIBridgePro
         height: size.height * factor,
       };
     },
-    [currentZoom]
+    [currentZoom],
   );
 
   const applyStampDefaults = useCallback(
@@ -181,17 +178,17 @@ export const SignatureAPIBridge = forwardRef<SignatureAPI, SignatureAPIBridgePro
       if (!annotationApi) return;
 
       annotationApi.setActiveTool(null);
-      annotationApi.setActiveTool('stamp');
+      annotationApi.setActiveTool("stamp");
       const stampTool = annotationApi.getActiveTool();
-      if (stampTool && stampTool.id === 'stamp') {
-        annotationApi.setToolDefaults('stamp', {
+      if (stampTool && stampTool.id === "stamp") {
+        annotationApi.setToolDefaults("stamp", {
           imageSrc,
           subject,
           ...(size ? { imageSize: { width: size.width, height: size.height } } : {}),
         });
       }
     },
-    [annotationApi]
+    [annotationApi],
   );
 
   const configureStampDefaults = useCallback(async () => {
@@ -200,14 +197,13 @@ export const SignatureAPIBridge = forwardRef<SignatureAPI, SignatureAPIBridgePro
     }
 
     try {
-      if (signatureConfig.signatureType === 'text' && signatureConfig.signerName) {
+      if (signatureConfig.signatureType === "text" && signatureConfig.signerName) {
         const textStamp = createTextStampImage(signatureConfig, placementPreviewSize);
         if (textStamp) {
-          const displaySize =
-            placementPreviewSize ?? {
-              width: textStamp.displayWidth,
-              height: textStamp.displayHeight,
-            };
+          const displaySize = placementPreviewSize ?? {
+            width: textStamp.displayWidth,
+            height: textStamp.displayHeight,
+          };
           const pdfSize = cssToPdfSize(displaySize);
           lastStampImageRef.current = textStamp.dataUrl;
           applyStampDefaults(textStamp.dataUrl, `Text Signature - ${signatureConfig.signerName}`, pdfSize);
@@ -218,30 +214,33 @@ export const SignatureAPIBridge = forwardRef<SignatureAPI, SignatureAPIBridgePro
       if (signatureConfig.signatureData) {
         const pdfSize = placementPreviewSize ? cssToPdfSize(placementPreviewSize) : undefined;
         lastStampImageRef.current = signatureConfig.signatureData;
-        applyStampDefaults(signatureConfig.signatureData, `Digital Signature - ${signatureConfig.reason || 'Document signing'}`, pdfSize);
+        applyStampDefaults(
+          signatureConfig.signatureData,
+          `Digital Signature - ${signatureConfig.reason || "Document signing"}`,
+          pdfSize,
+        );
         return;
       }
     } catch (error) {
-      console.error('Error preparing signature defaults:', error);
+      console.error("Error preparing signature defaults:", error);
     }
   }, [annotationApi, signatureConfig, placementPreviewSize, applyStampDefaults, cssToPdfSize]);
 
-
   // Enable keyboard deletion of selected annotations
   useEffect(() => {
     // Always enable delete key when we have annotation API and are in sign mode
-    if (!annotationApi || (isPlacementMode === undefined) || !documentReady) return;
+    if (!annotationApi || isPlacementMode === undefined || !documentReady) return;
 
     const handleKeyDown = (event: KeyboardEvent) => {
       // Skip delete/backspace while a text input/textarea is focused (e.g., editing textbox)
       const target = event.target as HTMLElement | null;
       const tag = target?.tagName?.toLowerCase();
-      const editable = target?.getAttribute?.('contenteditable');
-      if (tag === 'input' || tag === 'textarea' || editable === 'true') {
+      const editable = target?.getAttribute?.("contenteditable");
+      if (tag === "input" || tag === "textarea" || editable === "true") {
         return;
       }
 
-      if (event.key === 'Delete' || event.key === 'Backspace') {
+      if (event.key === "Delete" || event.key === "Backspace") {
         const selectedAnnotation = annotationApi.getSelectedAnnotation?.();
 
         if (selectedAnnotation) {
@@ -254,13 +253,16 @@ export const SignatureAPIBridge = forwardRef<SignatureAPI, SignatureAPIBridgePro
             // Get current annotation data to ensure we have latest image data stored
             const pageAnnotationsTask = annotationApi.getPageAnnotations?.({ pageIndex });
             if (pageAnnotationsTask) {
-              pageAnnotationsTask.toPromise().then((pageAnnotations: any) => {
-                const currentAnn = pageAnnotations?.find((ann: any) => ann.id === id);
-                if (currentAnn && currentAnn.imageSrc) {
-                  // Ensure the image data is stored in our persistent store
-                  storeImageData(id, currentAnn.imageSrc);
-                }
-              }).catch(console.error);
+              pageAnnotationsTask
+                .toPromise()
+                .then((pageAnnotations: any) => {
+                  const currentAnn = pageAnnotations?.find((ann: any) => ann.id === id);
+                  if (currentAnn && currentAnn.imageSrc) {
+                    // Ensure the image data is stored in our persistent store
+                    storeImageData(id, currentAnn.imageSrc);
+                  }
+                })
+                .catch(console.error);
             }
           }
 
@@ -277,156 +279,163 @@ export const SignatureAPIBridge = forwardRef<SignatureAPI, SignatureAPIBridgePro
       }
     };
 
-    document.addEventListener('keydown', handleKeyDown);
-    return () => document.removeEventListener('keydown', handleKeyDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
   }, [annotationApi, storeImageData, isPlacementMode]);
 
-  useImperativeHandle(ref, () => ({
-    addImageSignature: (signatureData: string, x: number, y: number, width: number, height: number, pageIndex: number) => {
-      if (!annotationApi) return;
+  useImperativeHandle(
+    ref,
+    () => ({
+      addImageSignature: (signatureData: string, x: number, y: number, width: number, height: number, pageIndex: number) => {
+        if (!annotationApi) return;
 
-      // Create image stamp annotation with proper image data
+        // Create image stamp annotation with proper image data
 
-      const annotationId = uuidV4();
+        const annotationId = uuidV4();
 
-      // Store image data in our persistent store
-      storeImageData(annotationId, signatureData);
+        // Store image data in our persistent store
+        storeImageData(annotationId, signatureData);
 
-      annotationApi.createAnnotation(pageIndex, {
-        type: PdfAnnotationSubtype.STAMP,
-        rect: {
-          origin: { x, y },
-          size: { width, height }
-        },
-        author: 'Digital Signature',
-        subject: 'Digital Signature',
-        pageIndex: pageIndex,
-        id: annotationId,
-        created: new Date(),
-        // Store image data in multiple places to ensure history captures it
-        imageSrc: signatureData,
-        contents: signatureData, // Some annotation systems use contents
-        data: signatureData, // Try data field
-        imageData: signatureData, // Try imageData field
-        appearance: signatureData // Try appearance field
-      });
-    },
-
-    activateDrawMode: () => {
-      if (!annotationApi) return;
-
-      // Use signatureInk (not ink) so the annotation pen tool stays unaffected
-      annotationApi.setActiveTool('signatureInk');
-
-      const activeTool = annotationApi.getActiveTool();
-      if (activeTool && activeTool.id === 'signatureInk') {
-        annotationApi.setToolDefaults('signatureInk', {
-          color: '#000000',
-          thickness: 2,
-          lineWidth: 2,
-          strokeWidth: 2,
-          width: 2
+        annotationApi.createAnnotation(pageIndex, {
+          type: PdfAnnotationSubtype.STAMP,
+          rect: {
+            origin: { x, y },
+            size: { width, height },
+          },
+          author: "Digital Signature",
+          subject: "Digital Signature",
+          pageIndex: pageIndex,
+          id: annotationId,
+          created: new Date(),
+          // Store image data in multiple places to ensure history captures it
+          imageSrc: signatureData,
+          contents: signatureData, // Some annotation systems use contents
+          data: signatureData, // Try data field
+          imageData: signatureData, // Try imageData field
+          appearance: signatureData, // Try appearance field
         });
-      }
-    },
+      },
 
-    activateSignaturePlacementMode: () => {
-      if (!annotationApi || !signatureConfig) return;
+      activateDrawMode: () => {
+        if (!annotationApi) return;
 
-      configureStampDefaults().catch((error) => {
-        console.error('Error activating signature tool:', error);
-      });
-    },
+        // Use signatureInk (not ink) so the annotation pen tool stays unaffected
+        annotationApi.setActiveTool("signatureInk");
 
-    updateDrawSettings: (color: string, size: number) => {
-      if (!annotationApi) return;
-
-      // Always update ink tool defaults - use multiple property names for compatibility
-      annotationApi.setToolDefaults('ink', {
-        color: color,
-        thickness: size,
-        lineWidth: size,
-        strokeWidth: size,
-        width: size
-      });
-
-      // Only reactivate ink if it was already the active tool — never auto-activate it.
-      // This prevents the ink (pen annotation) tool from being activated when
-      // updateDrawSettings is called on sign-tool mount.
-      const currentTool = annotationApi.getActiveTool();
-      if (currentTool?.id === 'ink') {
-        annotationApi.setActiveTool(null);
-        setTimeout(() => {
-          annotationApi.setActiveTool('ink');
-        }, 50);
-      }
-    },
-
-    activateDeleteMode: () => {
-      if (!annotationApi) return;
-      // Activate selection tool to allow selecting and deleting annotations
-      // Users can click annotations to select them, then press Delete key or right-click to delete
-      annotationApi.setActiveTool('select');
-    },
-
-    deleteAnnotation: (annotationId: string, pageIndex: number) => {
-      if (!annotationApi) return;
-
-      // Before deleting, try to preserve image data for potential undo
-      const pageAnnotationsTask = annotationApi.getPageAnnotations?.({ pageIndex });
-      if (pageAnnotationsTask) {
-        pageAnnotationsTask.toPromise().then((pageAnnotations: any) => {
-          const annotation = pageAnnotations?.find((ann: any) => ann.id === annotationId);
-          if (annotation && annotation.type === PdfAnnotationSubtype.STAMP && annotation.imageSrc) {
-            // Store image data before deletion
-            storeImageData(annotationId, annotation.imageSrc);
-          }
-        }).catch(console.error);
-      }
-
-      // Delete specific annotation by ID
-      annotationApi.deleteAnnotation(pageIndex, annotationId);
-    },
-
-    deactivateTools: () => {
-      if (!annotationApi) return;
-      annotationApi.setActiveTool(null);
-    },
-
-    getPageAnnotations: async (pageIndex: number): Promise<any[]> => {
-      if (!annotationApi || !annotationApi.getPageAnnotations) {
-        console.warn('getPageAnnotations not available');
-        return [];
-      }
-
-      try {
-        const pageAnnotationsTask = annotationApi.getPageAnnotations({ pageIndex });
-        if (pageAnnotationsTask && pageAnnotationsTask.toPromise) {
-          const annotations = await pageAnnotationsTask.toPromise();
-          return annotations || [];
+        const activeTool = annotationApi.getActiveTool();
+        if (activeTool && activeTool.id === "signatureInk") {
+          annotationApi.setToolDefaults("signatureInk", {
+            color: "#000000",
+            thickness: 2,
+            lineWidth: 2,
+            strokeWidth: 2,
+            width: 2,
+          });
         }
-        return [];
-      } catch (error) {
-        console.error(`Error getting annotations for page ${pageIndex}:`, error);
-        return [];
-      }
-    },
+      },
 
-    moveAnnotation: (pageIndex: number, annotationId: string, newRect: AnnotationRect) => {
-      if (!annotationApi) return;
-      // v2.7.0: move signature stamp to newRect without regenerating the AP stream,
-      // preserving the original appearance (image data stays intact).
-      (annotationApi as any).moveAnnotation?.(pageIndex, annotationId, newRect);
-    },
-  }), [annotationApi, signatureConfig, placementPreviewSize, applyStampDefaults]);
+      activateSignaturePlacementMode: () => {
+        if (!annotationApi || !signatureConfig) return;
+
+        configureStampDefaults().catch((error) => {
+          console.error("Error activating signature tool:", error);
+        });
+      },
+
+      updateDrawSettings: (color: string, size: number) => {
+        if (!annotationApi) return;
+
+        // Always update ink tool defaults - use multiple property names for compatibility
+        annotationApi.setToolDefaults("ink", {
+          color: color,
+          thickness: size,
+          lineWidth: size,
+          strokeWidth: size,
+          width: size,
+        });
+
+        // Only reactivate ink if it was already the active tool — never auto-activate it.
+        // This prevents the ink (pen annotation) tool from being activated when
+        // updateDrawSettings is called on sign-tool mount.
+        const currentTool = annotationApi.getActiveTool();
+        if (currentTool?.id === "ink") {
+          annotationApi.setActiveTool(null);
+          setTimeout(() => {
+            annotationApi.setActiveTool("ink");
+          }, 50);
+        }
+      },
+
+      activateDeleteMode: () => {
+        if (!annotationApi) return;
+        // Activate selection tool to allow selecting and deleting annotations
+        // Users can click annotations to select them, then press Delete key or right-click to delete
+        annotationApi.setActiveTool("select");
+      },
+
+      deleteAnnotation: (annotationId: string, pageIndex: number) => {
+        if (!annotationApi) return;
+
+        // Before deleting, try to preserve image data for potential undo
+        const pageAnnotationsTask = annotationApi.getPageAnnotations?.({ pageIndex });
+        if (pageAnnotationsTask) {
+          pageAnnotationsTask
+            .toPromise()
+            .then((pageAnnotations: any) => {
+              const annotation = pageAnnotations?.find((ann: any) => ann.id === annotationId);
+              if (annotation && annotation.type === PdfAnnotationSubtype.STAMP && annotation.imageSrc) {
+                // Store image data before deletion
+                storeImageData(annotationId, annotation.imageSrc);
+              }
+            })
+            .catch(console.error);
+        }
+
+        // Delete specific annotation by ID
+        annotationApi.deleteAnnotation(pageIndex, annotationId);
+      },
+
+      deactivateTools: () => {
+        if (!annotationApi) return;
+        annotationApi.setActiveTool(null);
+      },
+
+      getPageAnnotations: async (pageIndex: number): Promise<any[]> => {
+        if (!annotationApi || !annotationApi.getPageAnnotations) {
+          console.warn("getPageAnnotations not available");
+          return [];
+        }
+
+        try {
+          const pageAnnotationsTask = annotationApi.getPageAnnotations({ pageIndex });
+          if (pageAnnotationsTask && pageAnnotationsTask.toPromise) {
+            const annotations = await pageAnnotationsTask.toPromise();
+            return annotations || [];
+          }
+          return [];
+        } catch (error) {
+          console.error(`Error getting annotations for page ${pageIndex}:`, error);
+          return [];
+        }
+      },
+
+      moveAnnotation: (pageIndex: number, annotationId: string, newRect: AnnotationRect) => {
+        if (!annotationApi) return;
+        // v2.7.0: move signature stamp to newRect without regenerating the AP stream,
+        // preserving the original appearance (image data stays intact).
+        (annotationApi as any).moveAnnotation?.(pageIndex, annotationId, newRect);
+      },
+    }),
+    [annotationApi, signatureConfig, placementPreviewSize, applyStampDefaults],
+  );
 
   useEffect(() => {
     if (!annotationApi?.onAnnotationEvent || !documentReady) {
       return;
     }
 
-    const unsubscribe = annotationApi.onAnnotationEvent(event => {
-      if (event.type !== 'create' && event.type !== 'update') {
+    const unsubscribe = annotationApi.onAnnotationEvent((event) => {
+      if (event.type !== "create" && event.type !== "update") {
         return;
       }
 
@@ -437,7 +446,7 @@ export const SignatureAPIBridge = forwardRef<SignatureAPI, SignatureAPIBridgePro
       }
 
       // Mark signatures as not applied when a new signature is placed
-      if (event.type === 'create') {
+      if (event.type === "create") {
         setSignaturesApplied(false);
       }
 
@@ -470,7 +479,7 @@ export const SignatureAPIBridge = forwardRef<SignatureAPI, SignatureAPIBridgePro
     let cancelled = false;
     configureStampDefaults().catch((error) => {
       if (!cancelled) {
-        console.error('Error updating signature defaults:', error);
+        console.error("Error updating signature defaults:", error);
       }
     });
 
@@ -479,8 +488,7 @@ export const SignatureAPIBridge = forwardRef<SignatureAPI, SignatureAPIBridgePro
     };
   }, [isPlacementMode, configureStampDefaults, placementPreviewSize, signatureConfig, documentReady]);
 
-
   return null; // This is a bridge component with no UI
 });
 
-SignatureAPIBridge.displayName = 'SignatureAPIBridge';
+SignatureAPIBridge.displayName = "SignatureAPIBridge";
diff --git a/frontend/src/core/components/viewer/SignatureFieldOverlay.tsx b/frontend/src/core/components/viewer/SignatureFieldOverlay.tsx
index a311460e63..404fa7b040 100644
--- a/frontend/src/core/components/viewer/SignatureFieldOverlay.tsx
+++ b/frontend/src/core/components/viewer/SignatureFieldOverlay.tsx
@@ -11,12 +11,12 @@
  * For widgets without an appearance stream (unsigned fields, or fields whose
  * PDF writer didn't embed one), we fall back to a translucent badge overlay.
  */
-import React, { useEffect, useMemo, useRef, useState, memo } from 'react';
+import React, { useEffect, useMemo, useRef, useState, memo } from "react";
 import {
   renderSignatureFieldAppearances,
   extractSignatures,
   type SignatureFieldAppearance,
-} from '@app/services/pdfiumService';
+} from "@app/services/pdfiumService";
 
 interface SignatureFieldOverlayProps {
   pageIndex: number;
@@ -42,18 +42,13 @@ let _cachedSource: File | Blob | null = null;
 let _cachedFields: ResolvedSignatureField[] = [];
 let _cachePromise: Promise<ResolvedSignatureField[]> | null = null;
 
-async function resolveFields(
-  source: File | Blob,
-): Promise<ResolvedSignatureField[]> {
+async function resolveFields(source: File | Blob): Promise<ResolvedSignatureField[]> {
   if (source === _cachedSource && _cachePromise) return _cachePromise;
   _cachedSource = source;
 
   _cachePromise = (async () => {
     const buf = await source.arrayBuffer();
-    const [appearances, signatures] = await Promise.all([
-      renderSignatureFieldAppearances(buf),
-      extractSignatures(buf),
-    ]);
+    const [appearances, signatures] = await Promise.all([renderSignatureFieldAppearances(buf), extractSignatures(buf)]);
 
     return appearances.map((f, i) => {
       // Positional correlation is only reliable when both arrays have the same
@@ -69,7 +64,6 @@ async function resolveFields(
         time: matchedSig?.time,
       };
     });
-
   })();
 
   _cachedFields = await _cachePromise;
@@ -92,7 +86,7 @@ function SignatureBitmapCanvas({
     if (!canvas) return;
     canvas.width = imageData.width;
     canvas.height = imageData.height;
-    const ctx = canvas.getContext('2d');
+    const ctx = canvas.getContext("2d");
     if (ctx) ctx.putImageData(imageData, 0, 0);
   }, [imageData]);
 
@@ -102,7 +96,7 @@ function SignatureBitmapCanvas({
       style={{
         width: cssWidth,
         height: cssHeight,
-        display: 'block',
+        display: "block",
       }}
     />
   );
@@ -123,30 +117,31 @@ function SignatureFieldOverlayInner({
       return;
     }
     let cancelled = false;
-    resolveFields(pdfSource).then((res) => {
-      if (!cancelled) setFields(res);
-    }).catch(() => {
-      if (!cancelled) setFields([]);
-    });
-    return () => { cancelled = true; };
+    resolveFields(pdfSource)
+      .then((res) => {
+        if (!cancelled) setFields(res);
+      })
+      .catch(() => {
+        if (!cancelled) setFields([]);
+      });
+    return () => {
+      cancelled = true;
+    };
   }, [pdfSource]);
 
-  const pageFields = useMemo(
-    () => fields.filter((f) => f.pageIndex === pageIndex),
-    [fields, pageIndex],
-  );
+  const pageFields = useMemo(() => fields.filter((f) => f.pageIndex === pageIndex), [fields, pageIndex]);
 
   if (pageFields.length === 0) return null;
 
   return (
     <div
       style={{
-        position: 'absolute',
+        position: "absolute",
         top: 0,
         left: 0,
-        width: '100%',
-        height: '100%',
-        pointerEvents: 'none',
+        width: "100%",
+        height: "100%",
+        pointerEvents: "none",
         zIndex: 6,
       }}
       data-signature-overlay-page={pageIndex}
@@ -155,7 +150,7 @@ function SignatureFieldOverlayInner({
         // Use the source PDF page dimensions that the extraction used for
         // coordinate computation. This avoids mismatches with pdfPage.size
         // from EmbedPDF which may report different dimensions.
-        const sx = field.sourcePageWidth  > 0 ? pageWidth  / field.sourcePageWidth  : 1;
+        const sx = field.sourcePageWidth > 0 ? pageWidth / field.sourcePageWidth : 1;
         const sy = field.sourcePageHeight > 0 ? pageHeight / field.sourcePageHeight : 1;
         const left = field.x * sx;
         const top = field.y * sy;
@@ -168,26 +163,22 @@ function SignatureFieldOverlayInner({
             <div
               key={`sig-${field.fieldName}-${idx}`}
               style={{
-                position: 'absolute',
+                position: "absolute",
                 left,
                 top,
                 width,
                 height,
-                overflow: 'hidden',
-                pointerEvents: 'auto',
-                cursor: 'default',
+                overflow: "hidden",
+                pointerEvents: "auto",
+                cursor: "default",
               }}
               title={
                 field.isSigned
-                  ? `Signed${field.reason ? `: ${field.reason}` : ''}${field.time ? ` (${field.time})` : ''}`
+                  ? `Signed${field.reason ? `: ${field.reason}` : ""}${field.time ? ` (${field.time})` : ""}`
                   : `Signature field: ${field.fieldName}`
               }
             >
-              <SignatureBitmapCanvas
-                imageData={field.imageData}
-                cssWidth={width}
-                cssHeight={height}
-              />
+              <SignatureBitmapCanvas imageData={field.imageData} cssWidth={width} cssHeight={height} />
             </div>
           );
         }
@@ -197,47 +188,43 @@ function SignatureFieldOverlayInner({
           <div
             key={`sig-${field.fieldName}-${idx}`}
             style={{
-              position: 'absolute',
+              position: "absolute",
               left,
               top,
               width,
               height,
-              border: field.isSigned
-                ? '2px solid rgba(34, 139, 34, 0.7)'
-                : '2px dashed rgba(180, 180, 180, 0.7)',
+              border: field.isSigned ? "2px solid rgba(34, 139, 34, 0.7)" : "2px dashed rgba(180, 180, 180, 0.7)",
               borderRadius: 4,
-              background: field.isSigned
-                ? 'rgba(34, 139, 34, 0.08)'
-                : 'rgba(200, 200, 200, 0.08)',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              overflow: 'hidden',
-              pointerEvents: 'auto',
-              cursor: 'default',
+              background: field.isSigned ? "rgba(34, 139, 34, 0.08)" : "rgba(200, 200, 200, 0.08)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              overflow: "hidden",
+              pointerEvents: "auto",
+              cursor: "default",
             }}
             title={
               field.isSigned
-                ? `Signed${field.reason ? `: ${field.reason}` : ''}${field.time ? ` (${field.time})` : ''}`
+                ? `Signed${field.reason ? `: ${field.reason}` : ""}${field.time ? ` (${field.time})` : ""}`
                 : `Unsigned signature field: ${field.fieldName}`
             }
           >
             <span
               style={{
                 fontSize: Math.min(height * 0.35, 14),
-                color: field.isSigned ? 'rgba(34, 139, 34, 0.85)' : 'rgba(120, 120, 120, 0.85)',
+                color: field.isSigned ? "rgba(34, 139, 34, 0.85)" : "rgba(120, 120, 120, 0.85)",
                 fontWeight: 600,
-                textAlign: 'center',
+                textAlign: "center",
                 lineHeight: 1.2,
-                padding: '2px 4px',
-                userSelect: 'none',
-                whiteSpace: 'nowrap',
-                textOverflow: 'ellipsis',
-                overflow: 'hidden',
-                maxWidth: '100%',
+                padding: "2px 4px",
+                userSelect: "none",
+                whiteSpace: "nowrap",
+                textOverflow: "ellipsis",
+                overflow: "hidden",
+                maxWidth: "100%",
               }}
             >
-              {field.isSigned ? '🔒 Signed' : '✎ Signature'}
+              {field.isSigned ? "🔒 Signed" : "✎ Signature"}
             </span>
           </div>
         );
diff --git a/frontend/src/core/components/viewer/SignaturePlacementOverlay.tsx b/frontend/src/core/components/viewer/SignaturePlacementOverlay.tsx
index be5257deb8..8d6fa3d73e 100644
--- a/frontend/src/core/components/viewer/SignaturePlacementOverlay.tsx
+++ b/frontend/src/core/components/viewer/SignaturePlacementOverlay.tsx
@@ -1,8 +1,8 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { Box } from '@mantine/core';
-import type { SignParameters } from '@app/hooks/tools/sign/useSignParameters';
-import { buildSignaturePreview, SignaturePreview } from '@app/utils/signaturePreview';
-import { useSignature } from '@app/contexts/SignatureContext';
+import React, { useEffect, useMemo, useState } from "react";
+import { Box } from "@mantine/core";
+import type { SignParameters } from "@app/hooks/tools/sign/useSignParameters";
+import { buildSignaturePreview, SignaturePreview } from "@app/utils/signaturePreview";
+import { useSignature } from "@app/contexts/SignatureContext";
 import {
   MAX_PREVIEW_WIDTH_RATIO,
   MAX_PREVIEW_HEIGHT_RATIO,
@@ -10,7 +10,7 @@ import {
   MAX_PREVIEW_HEIGHT_REM,
   MIN_SIGNATURE_DIMENSION_REM,
   OVERLAY_EDGE_PADDING_REM,
-} from '@app/constants/signConstants';
+} from "@app/constants/signConstants";
 
 // Convert rem to pixels using browser's base font size (typically 16px)
 const remToPx = (rem: number) => rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
@@ -40,7 +40,7 @@ export const SignaturePlacementOverlay: React.FC<SignaturePlacementOverlayProps>
           setPreview(value);
         }
       } catch (error) {
-        console.error('Failed to build signature preview:', error);
+        console.error("Failed to build signature preview:", error);
         if (!cancelled) {
           setPreview(null);
         }
@@ -71,12 +71,12 @@ export const SignaturePlacementOverlay: React.FC<SignaturePlacementOverlayProps>
 
     const handleLeave = () => setCursor(null);
 
-    element.addEventListener('mousemove', handleMove);
-    element.addEventListener('mouseleave', handleLeave);
+    element.addEventListener("mousemove", handleMove);
+    element.addEventListener("mouseleave", handleLeave);
 
     return () => {
-      element.removeEventListener('mousemove', handleMove);
-      element.removeEventListener('mouseleave', handleLeave);
+      element.removeEventListener("mousemove", handleMove);
+      element.removeEventListener("mouseleave", handleLeave);
     };
   }, [containerRef, isActive]);
 
@@ -92,11 +92,7 @@ export const SignaturePlacementOverlay: React.FC<SignaturePlacementOverlayProps>
     const maxWidth = Math.min(containerWidth * MAX_PREVIEW_WIDTH_RATIO, remToPx(MAX_PREVIEW_WIDTH_REM));
     const maxHeight = Math.min(containerHeight * MAX_PREVIEW_HEIGHT_RATIO, remToPx(MAX_PREVIEW_HEIGHT_REM));
 
-    const scale = Math.min(
-      1,
-      maxWidth / Math.max(preview.width, 1),
-      maxHeight / Math.max(preview.height, 1)
-    );
+    const scale = Math.min(1, maxWidth / Math.max(preview.width, 1), maxHeight / Math.max(preview.height, 1));
 
     return {
       width: Math.max(remToPx(MIN_SIGNATURE_DIMENSION_REM), preview.width * scale),
@@ -150,20 +146,20 @@ export const SignaturePlacementOverlay: React.FC<SignaturePlacementOverlayProps>
   return (
     <Box
       style={{
-        position: 'absolute',
-        pointerEvents: 'none',
+        position: "absolute",
+        pointerEvents: "none",
         left: `${display.left}px`,
         top: `${display.top}px`,
         width: `${display.width}px`,
         height: `${display.height}px`,
         backgroundImage: `url(${display.dataUrl})`,
-        backgroundSize: '100% 100%',
-        backgroundRepeat: 'no-repeat',
-        backgroundPosition: 'center',
-        boxShadow: '0 0 0 1px rgba(30, 136, 229, 0.55), 0 6px 18px rgba(30, 136, 229, 0.25)',
-        borderRadius: '4px',
-        transition: 'transform 70ms ease-out',
-        transform: 'translateZ(0)',
+        backgroundSize: "100% 100%",
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "center",
+        boxShadow: "0 0 0 1px rgba(30, 136, 229, 0.55), 0 6px 18px rgba(30, 136, 229, 0.25)",
+        borderRadius: "4px",
+        transition: "transform 70ms ease-out",
+        transform: "translateZ(0)",
         opacity: 0.6,
       }}
     />
diff --git a/frontend/src/core/components/viewer/SpreadAPIBridge.tsx b/frontend/src/core/components/viewer/SpreadAPIBridge.tsx
index 46f11c876c..ea46980a81 100644
--- a/frontend/src/core/components/viewer/SpreadAPIBridge.tsx
+++ b/frontend/src/core/components/viewer/SpreadAPIBridge.tsx
@@ -1,8 +1,8 @@
-import { useEffect, useRef } from 'react';
-import { useSpread, SpreadMode } from '@embedpdf/plugin-spread/react';
-import { useViewer } from '@app/contexts/ViewerContext';
-import { useActiveDocumentId } from '@app/components/viewer/useActiveDocumentId';
-import { useDocumentReady } from '@app/components/viewer/hooks/useDocumentReady';
+import { useEffect, useRef } from "react";
+import { useSpread, SpreadMode } from "@embedpdf/plugin-spread/react";
+import { useViewer } from "@app/contexts/ViewerContext";
+import { useActiveDocumentId } from "@app/components/viewer/useActiveDocumentId";
+import { useDocumentReady } from "@app/components/viewer/hooks/useDocumentReady";
 
 /**
  * SpreadAPIBridge - Updated for embedPDF v2.6.0
@@ -41,7 +41,7 @@ function SpreadAPIBridgeInner({ documentId }: { documentId: string }) {
       isDualPage: spreadMode !== SpreadMode.None,
     };
 
-    registerBridge('spread', {
+    registerBridge("spread", {
       state: newState,
       api: {
         setSpreadMode: (mode: SpreadMode) => {
@@ -60,7 +60,7 @@ function SpreadAPIBridgeInner({ documentId }: { documentId: string }) {
     triggerImmediateSpreadUpdate(spreadMode);
 
     return () => {
-      registerBridge('spread', null);
+      registerBridge("spread", null);
     };
   }, [spreadMode, registerBridge, triggerImmediateSpreadUpdate]);
 
diff --git a/frontend/src/core/components/viewer/StampPlacementOverlay.tsx b/frontend/src/core/components/viewer/StampPlacementOverlay.tsx
index 92417e53b9..b9c4d5a48a 100644
--- a/frontend/src/core/components/viewer/StampPlacementOverlay.tsx
+++ b/frontend/src/core/components/viewer/StampPlacementOverlay.tsx
@@ -1,8 +1,8 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { Box } from '@mantine/core';
-import type { SignParameters } from '@app/hooks/tools/sign/useSignParameters';
-import { buildSignaturePreview, SignaturePreview } from '@app/utils/signaturePreview';
-import { useSignature } from '@app/contexts/SignatureContext';
+import React, { useEffect, useMemo, useState } from "react";
+import { Box } from "@mantine/core";
+import type { SignParameters } from "@app/hooks/tools/sign/useSignParameters";
+import { buildSignaturePreview, SignaturePreview } from "@app/utils/signaturePreview";
+import { useSignature } from "@app/contexts/SignatureContext";
 import {
   MAX_PREVIEW_WIDTH_RATIO,
   MAX_PREVIEW_HEIGHT_RATIO,
@@ -10,7 +10,7 @@ import {
   MAX_PREVIEW_HEIGHT_REM,
   MIN_SIGNATURE_DIMENSION_REM,
   OVERLAY_EDGE_PADDING_REM,
-} from '@app/constants/signConstants';
+} from "@app/constants/signConstants";
 
 // Convert rem to pixels using browser's base font size (typically 16px)
 const remToPx = (rem: number) => rem * parseFloat(getComputedStyle(document.documentElement).fontSize);
@@ -21,11 +21,7 @@ interface StampPlacementOverlayProps {
   signatureConfig: SignParameters | null;
 }
 
-export const StampPlacementOverlay: React.FC<StampPlacementOverlayProps> = ({
-  containerRef,
-  isActive,
-  signatureConfig,
-}) => {
+export const StampPlacementOverlay: React.FC<StampPlacementOverlayProps> = ({ containerRef, isActive, signatureConfig }) => {
   const [preview, setPreview] = useState<SignaturePreview | null>(null);
   const [cursor, setCursor] = useState<{ x: number; y: number } | null>(null);
   const { setPlacementPreviewSize } = useSignature();
@@ -40,7 +36,7 @@ export const StampPlacementOverlay: React.FC<StampPlacementOverlayProps> = ({
           setPreview(value);
         }
       } catch (error) {
-        console.error('Failed to build signature preview:', error);
+        console.error("Failed to build signature preview:", error);
         if (!cancelled) {
           setPreview(null);
         }
@@ -71,12 +67,12 @@ export const StampPlacementOverlay: React.FC<StampPlacementOverlayProps> = ({
 
     const handleLeave = () => setCursor(null);
 
-    element.addEventListener('mousemove', handleMove);
-    element.addEventListener('mouseleave', handleLeave);
+    element.addEventListener("mousemove", handleMove);
+    element.addEventListener("mouseleave", handleLeave);
 
     return () => {
-      element.removeEventListener('mousemove', handleMove);
-      element.removeEventListener('mouseleave', handleLeave);
+      element.removeEventListener("mousemove", handleMove);
+      element.removeEventListener("mouseleave", handleLeave);
     };
   }, [containerRef, isActive]);
 
@@ -92,11 +88,7 @@ export const StampPlacementOverlay: React.FC<StampPlacementOverlayProps> = ({
     const maxWidth = Math.min(containerWidth * MAX_PREVIEW_WIDTH_RATIO, remToPx(MAX_PREVIEW_WIDTH_REM));
     const maxHeight = Math.min(containerHeight * MAX_PREVIEW_HEIGHT_RATIO, remToPx(MAX_PREVIEW_HEIGHT_REM));
 
-    const scale = Math.min(
-      1,
-      maxWidth / Math.max(preview.width, 1),
-      maxHeight / Math.max(preview.height, 1)
-    );
+    const scale = Math.min(1, maxWidth / Math.max(preview.width, 1), maxHeight / Math.max(preview.height, 1));
 
     return {
       width: Math.max(remToPx(MIN_SIGNATURE_DIMENSION_REM), preview.width * scale),
@@ -150,20 +142,20 @@ export const StampPlacementOverlay: React.FC<StampPlacementOverlayProps> = ({
   return (
     <Box
       style={{
-        position: 'absolute',
-        pointerEvents: 'none',
+        position: "absolute",
+        pointerEvents: "none",
         left: `${display.left}px`,
         top: `${display.top}px`,
         width: `${display.width}px`,
         height: `${display.height}px`,
         backgroundImage: `url(${display.dataUrl})`,
-        backgroundSize: '100% 100%',
-        backgroundRepeat: 'no-repeat',
-        backgroundPosition: 'center',
-        boxShadow: '0 0 0 1px rgba(30, 136, 229, 0.55), 0 6px 18px rgba(30, 136, 229, 0.25)',
-        borderRadius: '4px',
-        transition: 'transform 70ms ease-out',
-        transform: 'translateZ(0)',
+        backgroundSize: "100% 100%",
+        backgroundRepeat: "no-repeat",
+        backgroundPosition: "center",
+        boxShadow: "0 0 0 1px rgba(30, 136, 229, 0.55), 0 6px 18px rgba(30, 136, 229, 0.25)",
+        borderRadius: "4px",
+        transition: "transform 70ms ease-out",
+        transform: "translateZ(0)",
         opacity: 0.6,
       }}
     />
diff --git a/frontend/src/core/components/viewer/TextSelectionHandler.tsx b/frontend/src/core/components/viewer/TextSelectionHandler.tsx
index d1d2ab2deb..a3fc9f0842 100644
--- a/frontend/src/core/components/viewer/TextSelectionHandler.tsx
+++ b/frontend/src/core/components/viewer/TextSelectionHandler.tsx
@@ -1,7 +1,7 @@
-import { useEffect, useRef } from 'react';
-import { useSelectionPlugin, useSelectionCapability, glyphAt } from '@embedpdf/plugin-selection/react';
-import { useInteractionManagerCapability } from '@embedpdf/plugin-interaction-manager/react';
-import type { Position, PdfPageGeometry, PdfRun } from '@embedpdf/models';
+import { useEffect, useRef } from "react";
+import { useSelectionPlugin, useSelectionCapability, glyphAt } from "@embedpdf/plugin-selection/react";
+import { useInteractionManagerCapability } from "@embedpdf/plugin-interaction-manager/react";
+import type { Position, PdfPageGeometry, PdfRun } from "@embedpdf/models";
 
 interface TextSelectionHandlerProps {
   documentId: string;
@@ -106,13 +106,7 @@ function findLineBoundaries(geo: PdfPageGeometry, glyphIndex: number): { start:
   };
 }
 
-function setSelectionRange(
-  selPlugin: any,
-  documentId: string,
-  pageIndex: number,
-  startIndex: number,
-  endIndex: number
-): void {
+function setSelectionRange(selPlugin: any, documentId: string, pageIndex: number, startIndex: number, endIndex: number): void {
   selPlugin.clearSelection(documentId);
   selPlugin.beginSelection(documentId, pageIndex, startIndex);
   selPlugin.updateSelection(documentId, pageIndex, endIndex);
@@ -160,27 +154,36 @@ export function TextSelectionHandler({ documentId, pageIndex }: TextSelectionHan
           const coreDoc = plugin.getCoreDocument(documentId);
           if (!coreDoc?.document) return;
 
-          const task = plugin.engine.getTextSlices(coreDoc.document, [{
-            pageIndex,
-            charIndex: run.charStart,
-            charCount: run.glyphs.length,
-          }]);
+          const task = plugin.engine.getTextSlices(coreDoc.document, [
+            {
+              pageIndex,
+              charIndex: run.charStart,
+              charCount: run.glyphs.length,
+            },
+          ]);
 
-          task.wait((texts: string[]) => {
-            const text = texts[0];
-            if (!text) return;
+          task.wait(
+            (texts: string[]) => {
+              const text = texts[0];
+              if (!text) return;
 
-            const boundaries = findWordBoundariesInText(text, localIndex);
-            if (!boundaries) return;
+              const boundaries = findWordBoundariesInText(text, localIndex);
+              if (!boundaries) return;
 
-            lastDblClickRef.current = { time: Date.now(), x: pos.x, y: pos.y };
+              lastDblClickRef.current = { time: Date.now(), x: pos.x, y: pos.y };
 
-            setSelectionRange(
-              selPlugin, documentId, pageIndex,
-              run.charStart + boundaries.start,
-              run.charStart + boundaries.end
-            );
-          }, () => { /* ignore errors */ });
+              setSelectionRange(
+                selPlugin,
+                documentId,
+                pageIndex,
+                run.charStart + boundaries.start,
+                run.charStart + boundaries.end,
+              );
+            },
+            () => {
+              /* ignore errors */
+            },
+          );
         } catch {
           // Engine access failed - silently ignore
         }
@@ -222,7 +225,7 @@ export function TextSelectionHandler({ documentId, pageIndex }: TextSelectionHan
     };
 
     return imCapability.registerAlways({
-      scope: { type: 'page', documentId, pageIndex },
+      scope: { type: "page", documentId, pageIndex },
       handlers,
     });
   }, [selPlugin, selCapability, imCapability, documentId, pageIndex]);
diff --git a/frontend/src/core/components/viewer/ThumbnailAPIBridge.tsx b/frontend/src/core/components/viewer/ThumbnailAPIBridge.tsx
index b1786b4eed..19b9c8442f 100644
--- a/frontend/src/core/components/viewer/ThumbnailAPIBridge.tsx
+++ b/frontend/src/core/components/viewer/ThumbnailAPIBridge.tsx
@@ -1,7 +1,7 @@
-import { useEffect } from 'react';
-import { useThumbnailCapability } from '@embedpdf/plugin-thumbnail/react';
-import { useViewer } from '@app/contexts/ViewerContext';
-import { useDocumentReady } from '@app/components/viewer/hooks/useDocumentReady';
+import { useEffect } from "react";
+import { useThumbnailCapability } from "@embedpdf/plugin-thumbnail/react";
+import { useViewer } from "@app/contexts/ViewerContext";
+import { useDocumentReady } from "@app/components/viewer/hooks/useDocumentReady";
 
 /**
  * ThumbnailAPIBridge - Updated for embedPDF v2.6.0
@@ -14,14 +14,14 @@ export function ThumbnailAPIBridge() {
 
   useEffect(() => {
     if (thumbnail && documentReady) {
-      registerBridge('thumbnail', {
+      registerBridge("thumbnail", {
         state: null, // No state - just provides API
-        api: thumbnail
+        api: thumbnail,
       });
     }
 
     return () => {
-      registerBridge('thumbnail', null);
+      registerBridge("thumbnail", null);
     };
   }, [thumbnail, documentReady, registerBridge]);
 
diff --git a/frontend/src/core/components/viewer/ThumbnailSidebar.tsx b/frontend/src/core/components/viewer/ThumbnailSidebar.tsx
index 45eb3b710a..2642ae1e38 100644
--- a/frontend/src/core/components/viewer/ThumbnailSidebar.tsx
+++ b/frontend/src/core/components/viewer/ThumbnailSidebar.tsx
@@ -1,7 +1,7 @@
-import { useState, useEffect, useRef } from 'react';
-import { Box, ScrollArea } from '@mantine/core';
-import { useViewer } from '@app/contexts/ViewerContext';
-import { PrivateContent } from '@app/components/shared/PrivateContent';
+import { useState, useEffect, useRef } from "react";
+import { Box, ScrollArea } from "@mantine/core";
+import { useViewer } from "@app/contexts/ViewerContext";
+import { PrivateContent } from "@app/components/shared/PrivateContent";
 
 interface ThumbnailSidebarProps {
   visible: boolean;
@@ -20,7 +20,7 @@ export function ThumbnailSidebar({ visible, onToggle: _onToggle, activeFileIndex
   useEffect(() => {
     // Revoke old blob URLs to prevent memory leaks
     Object.values(thumbnails).forEach((thumbUrl) => {
-      if (typeof thumbUrl === 'string' && thumbUrl.startsWith('blob:')) {
+      if (typeof thumbUrl === "string" && thumbUrl.startsWith("blob:")) {
         URL.revokeObjectURL(thumbUrl);
       }
     });
@@ -38,7 +38,7 @@ export function ThumbnailSidebar({ visible, onToggle: _onToggle, activeFileIndex
     if (!visible) {
       Object.values(thumbnailsRef.current).forEach((thumbUrl) => {
         // Only revoke if it's a blob URL (not 'error')
-        if (typeof thumbUrl === 'string' && thumbUrl.startsWith('blob:')) {
+        if (typeof thumbUrl === "string" && thumbUrl.startsWith("blob:")) {
           URL.revokeObjectURL(thumbUrl);
         }
       });
@@ -50,7 +50,7 @@ export function ThumbnailSidebar({ visible, onToggle: _onToggle, activeFileIndex
   useEffect(() => {
     return () => {
       Object.values(thumbnailsRef.current).forEach((thumbUrl) => {
-        if (typeof thumbUrl === 'string' && thumbUrl.startsWith('blob:')) {
+        if (typeof thumbUrl === "string" && thumbUrl.startsWith("blob:")) {
           URL.revokeObjectURL(thumbUrl);
         }
       });
@@ -73,9 +73,9 @@ export function ThumbnailSidebar({ visible, onToggle: _onToggle, activeFileIndex
       // 2. Visible neighbors (current +/- 3)
       // 3. Everything else
       const prioritized = [
-        ...allPages.filter(i => i === currentPage),
-        ...allPages.filter(i => i !== currentPage && Math.abs(i - currentPage) <= 3),
-        ...allPages.filter(i => Math.abs(i - currentPage) > 3)
+        ...allPages.filter((i) => i === currentPage),
+        ...allPages.filter((i) => i !== currentPage && Math.abs(i - currentPage) <= 3),
+        ...allPages.filter((i) => Math.abs(i - currentPage) > 3),
       ];
 
       const CONCURRENCY_LIMIT = 3;
@@ -99,16 +99,16 @@ export function ThumbnailSidebar({ visible, onToggle: _onToggle, activeFileIndex
           }
           const thumbUrl = URL.createObjectURL(thumbBlob);
 
-          setThumbnails(prev => ({
+          setThumbnails((prev) => ({
             ...prev,
-            [pageIndex]: thumbUrl
+            [pageIndex]: thumbUrl,
           }));
         } catch (error) {
-          console.error('Failed to generate thumbnail for page', pageIndex + 1, error);
+          console.error("Failed to generate thumbnail for page", pageIndex + 1, error);
           if (!isCancelled) {
-            setThumbnails(prev => ({
+            setThumbnails((prev) => ({
               ...prev,
-              [pageIndex]: 'error'
+              [pageIndex]: "error",
             }));
           }
         }
@@ -139,113 +139,118 @@ export function ThumbnailSidebar({ visible, onToggle: _onToggle, activeFileIndex
       {visible && (
         <Box
           style={{
-            position: 'fixed',
+            position: "fixed",
             right: 0,
             top: 0,
             bottom: 0,
-            width: '15rem',
-            backgroundColor: 'var(--bg-surface)',
-            borderLeft: '1px solid var(--border-subtle)',
+            width: "15rem",
+            backgroundColor: "var(--bg-surface)",
+            borderLeft: "1px solid var(--border-subtle)",
             zIndex: 998,
-            display: 'flex',
-            flexDirection: 'column',
-            boxShadow: '-2px 0 8px rgba(0, 0, 0, 0.1)'
+            display: "flex",
+            flexDirection: "column",
+            boxShadow: "-2px 0 8px rgba(0, 0, 0, 0.1)",
           }}
         >
           {/* Thumbnails Container */}
           <ScrollArea style={{ flex: 1 }}>
             <Box p="sm">
-              <div style={{
-                display: 'flex',
-                flexDirection: 'column',
-                gap: '12px'
-              }}>
+              <div
+                style={{
+                  display: "flex",
+                  flexDirection: "column",
+                  gap: "12px",
+                }}
+              >
                 {Array.from({ length: scrollState.totalPages }, (_, pageIndex) => (
                   <Box
                     key={pageIndex}
                     onClick={() => handlePageClick(pageIndex)}
                     style={{
-                      cursor: 'pointer',
-                      borderRadius: '8px',
-                      padding: '8px',
-                      backgroundColor: scrollState.currentPage === pageIndex + 1
-                        ? 'var(--color-primary-100)'
-                        : 'transparent',
-                      border: scrollState.currentPage === pageIndex + 1
-                        ? '2px solid var(--color-primary-500)'
-                        : '2px solid transparent',
-                      transition: 'all 0.2s ease',
-                      display: 'flex',
-                      flexDirection: 'column',
-                      alignItems: 'center',
-                      gap: '8px'
+                      cursor: "pointer",
+                      borderRadius: "8px",
+                      padding: "8px",
+                      backgroundColor: scrollState.currentPage === pageIndex + 1 ? "var(--color-primary-100)" : "transparent",
+                      border:
+                        scrollState.currentPage === pageIndex + 1
+                          ? "2px solid var(--color-primary-500)"
+                          : "2px solid transparent",
+                      transition: "all 0.2s ease",
+                      display: "flex",
+                      flexDirection: "column",
+                      alignItems: "center",
+                      gap: "8px",
                     }}
                     onMouseEnter={(e) => {
                       if (scrollState.currentPage !== pageIndex + 1) {
-                        e.currentTarget.style.backgroundColor = 'var(--hover-bg)';
+                        e.currentTarget.style.backgroundColor = "var(--hover-bg)";
                       }
                     }}
                     onMouseLeave={(e) => {
                       if (scrollState.currentPage !== pageIndex + 1) {
-                        e.currentTarget.style.backgroundColor = 'transparent';
+                        e.currentTarget.style.backgroundColor = "transparent";
                       }
                     }}
                   >
                     {/* Thumbnail Image */}
-                    {thumbnails[pageIndex] && thumbnails[pageIndex] !== 'error' ? (
+                    {thumbnails[pageIndex] && thumbnails[pageIndex] !== "error" ? (
                       <PrivateContent>
                         <img
                           src={thumbnails[pageIndex]}
                           alt={`Page ${pageIndex + 1} thumbnail`}
                           style={{
-                            maxWidth: '100%',
-                            height: 'auto',
-                            borderRadius: '4px',
-                            boxShadow: '0 2px 4px rgba(0, 0, 0, 0.1)',
-                            border: '1px solid var(--border-subtle)'
+                            maxWidth: "100%",
+                            height: "auto",
+                            borderRadius: "4px",
+                            boxShadow: "0 2px 4px rgba(0, 0, 0, 0.1)",
+                            border: "1px solid var(--border-subtle)",
                           }}
                         />
                       </PrivateContent>
-                    ) : thumbnails[pageIndex] === 'error' ? (
-                      <div style={{
-                        width: '11.5rem',
-                        height: '15rem',
-                        backgroundColor: 'var(--color-red-50)',
-                        border: '1px solid var(--color-red-200)',
-                        borderRadius: '4px',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        color: 'var(--color-red-500)',
-                        fontSize: '12px'
-                      }}>
+                    ) : thumbnails[pageIndex] === "error" ? (
+                      <div
+                        style={{
+                          width: "11.5rem",
+                          height: "15rem",
+                          backgroundColor: "var(--color-red-50)",
+                          border: "1px solid var(--color-red-200)",
+                          borderRadius: "4px",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          color: "var(--color-red-500)",
+                          fontSize: "12px",
+                        }}
+                      >
                         Failed
                       </div>
                     ) : (
-                      <div style={{
-                        width: '11.5rem',
-                        height: '15rem',
-                        backgroundColor: 'var(--bg-muted)',
-                        border: '1px solid var(--border-subtle)',
-                        borderRadius: '4px',
-                        display: 'flex',
-                        alignItems: 'center',
-                        justifyContent: 'center',
-                        color: 'var(--text-muted)',
-                        fontSize: '12px'
-                      }}>
+                      <div
+                        style={{
+                          width: "11.5rem",
+                          height: "15rem",
+                          backgroundColor: "var(--bg-muted)",
+                          border: "1px solid var(--border-subtle)",
+                          borderRadius: "4px",
+                          display: "flex",
+                          alignItems: "center",
+                          justifyContent: "center",
+                          color: "var(--text-muted)",
+                          fontSize: "12px",
+                        }}
+                      >
                         Loading...
                       </div>
                     )}
 
                     {/* Page Number */}
-                    <div style={{
-                      fontSize: '12px',
-                      fontWeight: 500,
-                      color: scrollState.currentPage === pageIndex + 1
-                        ? 'var(--color-primary-500)'
-                        : 'var(--text-muted)'
-                    }}>
+                    <div
+                      style={{
+                        fontSize: "12px",
+                        fontWeight: 500,
+                        color: scrollState.currentPage === pageIndex + 1 ? "var(--color-primary-500)" : "var(--text-muted)",
+                      }}
+                    >
                       Page {pageIndex + 1}
                     </div>
                   </Box>
diff --git a/frontend/src/core/components/viewer/Viewer.tsx b/frontend/src/core/components/viewer/Viewer.tsx
index adea7d8145..aac7a7ed1d 100644
--- a/frontend/src/core/components/viewer/Viewer.tsx
+++ b/frontend/src/core/components/viewer/Viewer.tsx
@@ -1,8 +1,8 @@
-import { useMemo } from 'react';
-import EmbedPdfViewer from '@app/components/viewer/EmbedPdfViewer';
-import { NonPdfViewerWrapper, type ViewerProps } from '@app/components/viewer/NonPdfViewer';
-import { useFileState } from '@app/contexts/FileContext';
-import { isPdfFile } from '@app/utils/fileUtils';
+import { useMemo } from "react";
+import EmbedPdfViewer from "@app/components/viewer/EmbedPdfViewer";
+import { NonPdfViewerWrapper, type ViewerProps } from "@app/components/viewer/NonPdfViewer";
+import { useFileState } from "@app/contexts/FileContext";
+import { isPdfFile } from "@app/utils/fileUtils";
 
 export type { ViewerProps };
 
diff --git a/frontend/src/core/components/viewer/ZoomAPIBridge.tsx b/frontend/src/core/components/viewer/ZoomAPIBridge.tsx
index 836716682b..dc06d238f0 100644
--- a/frontend/src/core/components/viewer/ZoomAPIBridge.tsx
+++ b/frontend/src/core/components/viewer/ZoomAPIBridge.tsx
@@ -1,18 +1,18 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { useZoom, ZoomMode } from '@embedpdf/plugin-zoom/react';
-import { useSpread, SpreadMode } from '@embedpdf/plugin-spread/react';
-import { useViewer } from '@app/contexts/ViewerContext';
-import { useActiveDocumentId } from '@app/components/viewer/useActiveDocumentId';
-import { useFileState } from '@app/contexts/FileContext';
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useZoom, ZoomMode } from "@embedpdf/plugin-zoom/react";
+import { useSpread, SpreadMode } from "@embedpdf/plugin-spread/react";
+import { useViewer } from "@app/contexts/ViewerContext";
+import { useActiveDocumentId } from "@app/components/viewer/useActiveDocumentId";
+import { useFileState } from "@app/contexts/FileContext";
 import {
   determineAutoZoom,
   DEFAULT_FALLBACK_ZOOM,
   DEFAULT_VISIBILITY_THRESHOLD,
   useFitWidthResize,
-} from '@app/utils/viewerZoom';
-import { getFirstPageAspectRatioFromStub } from '@app/utils/pageMetadata';
-import { useDocumentReady } from '@app/components/viewer/hooks/useDocumentReady';
-import { preferencesService, type ViewerZoomSetting } from '@app/services/preferencesService';
+} from "@app/utils/viewerZoom";
+import { getFirstPageAspectRatioFromStub } from "@app/utils/pageMetadata";
+import { useDocumentReady } from "@app/components/viewer/hooks/useDocumentReady";
+import { preferencesService, type ViewerZoomSetting } from "@app/services/preferencesService";
 
 /**
  * Connects the PDF zoom plugin to the shared ViewerContext.
@@ -90,23 +90,15 @@ function ZoomAPIBridgeInner({ documentId }: { documentId: string }) {
       lastSpreadMode.current = currentSpreadMode;
 
       const hadTrackedAutoZoom = lastAppliedZoom.current !== null;
-      if (
-        zoomLevel === ZoomMode.FitWidth ||
-        zoomLevel === ZoomMode.Automatic ||
-        hadTrackedAutoZoom
-      ) {
+      if (zoomLevel === ZoomMode.FitWidth || zoomLevel === ZoomMode.Automatic || hadTrackedAutoZoom) {
         requestFitWidth();
         scheduleAutoZoom();
       }
     }
   }, [spreadMode, zoomLevel, scheduleAutoZoom, requestFitWidth]);
 
-
   const isManagedZoom =
-    !!zoom &&
-    (zoomLevel === ZoomMode.FitWidth ||
-      zoomLevel === ZoomMode.Automatic ||
-      lastAppliedZoom.current !== null);
+    !!zoom && (zoomLevel === ZoomMode.FitWidth || zoomLevel === ZoomMode.Automatic || lastAppliedZoom.current !== null);
 
   useFitWidthResize({
     isManaged: isManagedZoom,
@@ -157,11 +149,11 @@ function ZoomAPIBridgeInner({ documentId }: { documentId: string }) {
       }
 
       // Check user preference for default viewer zoom
-      const zoomPref: ViewerZoomSetting = preferencesService.getPreference('defaultViewerZoom');
-      if (zoomPref !== 'auto') {
-        if (zoomPref === 'fitWidth') {
+      const zoomPref: ViewerZoomSetting = preferencesService.getPreference("defaultViewerZoom");
+      if (zoomPref !== "auto") {
+        if (zoomPref === "fitWidth") {
           applyTrackedZoom(ZoomMode.FitWidth, fitWidthZoom);
-        } else if (zoomPref === 'fitPage') {
+        } else if (zoomPref === "fitPage") {
           applyTrackedZoom(ZoomMode.FitPage, fitWidthZoom);
         } else {
           // Numeric zoom: '50', '75', '100', '125', '150', '200'
@@ -189,12 +181,12 @@ function ZoomAPIBridgeInner({ documentId }: { documentId: string }) {
         fallbackZoom: DEFAULT_FALLBACK_ZOOM,
       });
 
-      if (decision.type === 'fallback') {
+      if (decision.type === "fallback") {
         applyTrackedZoom(decision.zoom, decision.zoom);
         return;
       }
 
-      if (decision.type === 'fitWidth') {
+      if (decision.type === "fitWidth") {
         applyTrackedZoom(ZoomMode.FitWidth, fitWidthZoom);
         return;
       }
@@ -234,7 +226,7 @@ function ZoomAPIBridgeInner({ documentId }: { documentId: string }) {
     }
 
     zoomSubscriptionRef.current = zoom.onZoomChange((event: { newZoom?: number }) => {
-      if (typeof event?.newZoom !== 'number') {
+      if (typeof event?.newZoom !== "number") {
         return;
       }
       lastAppliedZoom.current = event.newZoom;
@@ -259,8 +251,7 @@ function ZoomAPIBridgeInner({ documentId }: { documentId: string }) {
       return;
     }
 
-    const currentZoomLevel =
-      lastAppliedZoom.current ?? zoomStateCurrentZoomLevel ?? 1;
+    const currentZoomLevel = lastAppliedZoom.current ?? zoomStateCurrentZoomLevel ?? 1;
 
     const newState = {
       currentZoom: currentZoomLevel,
@@ -269,7 +260,7 @@ function ZoomAPIBridgeInner({ documentId }: { documentId: string }) {
 
     triggerImmediateZoomUpdate(newState.zoomPercent);
 
-    registerBridge('zoom', {
+    registerBridge("zoom", {
       state: newState,
       api: currentZoom,
     });
diff --git a/frontend/src/core/components/viewer/constants/search.ts b/frontend/src/core/components/viewer/constants/search.ts
index 0da10a7cb6..7b9df3a736 100644
--- a/frontend/src/core/components/viewer/constants/search.ts
+++ b/frontend/src/core/components/viewer/constants/search.ts
@@ -1,7 +1,7 @@
 export const SEARCH_CONSTANTS = {
   HIGHLIGHT_COLORS: {
-    BACKGROUND: '#ffff00',
-    ACTIVE_BACKGROUND: '#ff6b35',
+    BACKGROUND: "#ffff00",
+    ACTIVE_BACKGROUND: "#ff6b35",
     OPACITY: 0.4,
   },
   TIMING: {
@@ -11,5 +11,5 @@ export const SEARCH_CONSTANTS = {
     HIGHLIGHT_PADDING: 2,
     MIN_SEARCH_LENGTH: 1,
     MAX_RESULTS_DISPLAY: 100,
-  }
-} as const;
\ No newline at end of file
+  },
+} as const;
diff --git a/frontend/src/core/components/viewer/hooks/useDocumentReady.ts b/frontend/src/core/components/viewer/hooks/useDocumentReady.ts
index ba52a73802..f84f6e6d9e 100644
--- a/frontend/src/core/components/viewer/hooks/useDocumentReady.ts
+++ b/frontend/src/core/components/viewer/hooks/useDocumentReady.ts
@@ -1,5 +1,5 @@
-import { useState, useEffect } from 'react';
-import { useDocumentManagerCapability } from '@embedpdf/plugin-document-manager/react';
+import { useState, useEffect } from "react";
+import { useDocumentManagerCapability } from "@embedpdf/plugin-document-manager/react";
 
 /**
  * useDocumentReady - Custom hook to track whether a PDF document is fully loaded
@@ -54,10 +54,10 @@ export function useDocumentReady() {
 
     return () => {
       mounted = false;
-      if (typeof unsubOpen === 'function') {
+      if (typeof unsubOpen === "function") {
         unsubOpen();
       }
-      if (typeof unsubClose === 'function') {
+      if (typeof unsubClose === "function") {
         unsubClose();
       }
     };
diff --git a/frontend/src/core/components/viewer/layerUtils.ts b/frontend/src/core/components/viewer/layerUtils.ts
index d7923b3d4b..f760de2ce8 100644
--- a/frontend/src/core/components/viewer/layerUtils.ts
+++ b/frontend/src/core/components/viewer/layerUtils.ts
@@ -10,13 +10,10 @@ export interface LayerInfo {
  * Returns a flat list of all OCG groups with their names and default visibility.
  */
 export async function readPdfLayers(file: Blob): Promise<LayerInfo[]> {
-  const { getDocument, GlobalWorkerOptions } = await import('pdfjs-dist/legacy/build/pdf.mjs');
+  const { getDocument, GlobalWorkerOptions } = await import("pdfjs-dist/legacy/build/pdf.mjs");
 
   if (!GlobalWorkerOptions.workerSrc) {
-    GlobalWorkerOptions.workerSrc = new URL(
-      'pdfjs-dist/legacy/build/pdf.worker.min.mjs',
-      import.meta.url
-    ).toString();
+    GlobalWorkerOptions.workerSrc = new URL("pdfjs-dist/legacy/build/pdf.worker.min.mjs", import.meta.url).toString();
   }
 
   const arrayBuffer = await file.arrayBuffer();
@@ -65,15 +62,11 @@ export async function readPdfLayers(file: Blob): Promise<LayerInfo[]> {
  *  - { name: string, order: any[] }: a named group with children
  *  - array: a nested group
  */
-function buildLayerTree(
-  order: any[],
-  groups: Record<string, any>,
-  visited = new Set<string>()
-): LayerInfo[] {
+function buildLayerTree(order: any[], groups: Record<string, any>, visited = new Set<string>()): LayerInfo[] {
   const result: LayerInfo[] = [];
 
   for (const item of order) {
-    if (typeof item === 'string') {
+    if (typeof item === "string") {
       // It's an OCG id
       if (visited.has(item)) continue;
       visited.add(item);
@@ -89,7 +82,7 @@ function buildLayerTree(
       // Nested group (unlabeled)
       const children = buildLayerTree(item, groups, visited);
       result.push(...children);
-    } else if (item && typeof item === 'object') {
+    } else if (item && typeof item === "object") {
       // Named group with nested items
       const { name, order: subOrder } = item as { name?: string; order?: any[] };
       const children = subOrder ? buildLayerTree(subOrder, groups, visited) : [];
@@ -98,7 +91,7 @@ function buildLayerTree(
         result.push({
           id: `group-${name}`,
           name: name,
-          visible: children.every(c => c.visible),
+          visible: children.every((c) => c.visible),
           children,
         });
       } else {
@@ -121,10 +114,9 @@ function buildLayerTree(
  */
 export async function applyOCGVisibilityToPdf(
   pdfBytes: ArrayBuffer,
-  layerVisibility: Record<string, boolean>
+  layerVisibility: Record<string, boolean>,
 ): Promise<Uint8Array> {
-  const { PDFDocument, PDFDict, PDFName, PDFArray, PDFString, PDFHexString } =
-    await import('@cantoo/pdf-lib');
+  const { PDFDocument, PDFDict, PDFName, PDFArray, PDFString, PDFHexString } = await import("@cantoo/pdf-lib");
 
   const doc = await PDFDocument.load(pdfBytes, { ignoreEncryption: true });
   const context = doc.context;
@@ -134,7 +126,7 @@ export async function applyOCGVisibilityToPdf(
   const catalog = context.lookup(catalogRef) as unknown as typeof PDFDict.prototype;
 
   // Get OCProperties dict (may be a direct dict or an indirect reference)
-  const ocPropsRaw = (catalog as any).lookup(PDFName.of('OCProperties'));
+  const ocPropsRaw = (catalog as any).lookup(PDFName.of("OCProperties"));
   if (!ocPropsRaw) {
     return doc.save();
   }
@@ -143,20 +135,18 @@ export async function applyOCGVisibilityToPdf(
     : context.lookup(ocPropsRaw)) as unknown as typeof PDFDict.prototype;
 
   // Get the /OCGs array
-  const ocgsRaw = (ocProps as any).lookup(PDFName.of('OCGs'));
+  const ocgsRaw = (ocProps as any).lookup(PDFName.of("OCGs"));
   if (!(ocgsRaw instanceof PDFArray)) {
     return doc.save();
   }
   const ocgsArray = ocgsRaw as unknown as typeof PDFArray.prototype;
 
   // Get or create the /D (default config) dict
-  const dRaw = (ocProps as any).lookup(PDFName.of('D'));
+  const dRaw = (ocProps as any).lookup(PDFName.of("D"));
   if (!dRaw) {
     return doc.save();
   }
-  const dDict = (dRaw instanceof PDFDict
-    ? dRaw
-    : context.lookup(dRaw)) as unknown as typeof PDFDict.prototype;
+  const dDict = (dRaw instanceof PDFDict ? dRaw : context.lookup(dRaw)) as unknown as typeof PDFDict.prototype;
 
   // Collect OCG refs for ON vs OFF based on user visibility settings
   const onRefs: any[] = [];
@@ -169,10 +159,10 @@ export async function applyOCGVisibilityToPdf(
     if (!ocgDict) continue;
 
     // Get the OCG name
-    const nameRaw = (ocgDict as any).lookup(PDFName.of('Name'));
-    let ocgName = '';
+    const nameRaw = (ocgDict as any).lookup(PDFName.of("Name"));
+    let ocgName = "";
     if (nameRaw instanceof PDFString || nameRaw instanceof PDFHexString) {
-      ocgName = (nameRaw as any).decodeText?.() ?? (nameRaw as any).asString?.() ?? '';
+      ocgName = (nameRaw as any).decodeText?.() ?? (nameRaw as any).asString?.() ?? "";
     } else if (nameRaw) {
       ocgName = String(nameRaw);
     }
@@ -189,25 +179,25 @@ export async function applyOCGVisibilityToPdf(
 
   // Set /BaseState to /OFF so all layers start hidden, then /ON lists visible ones.
   // This is unambiguous and avoids conflicts between /BaseState and /ON//OFF.
-  (dDict as any).set(PDFName.of('BaseState'), PDFName.of('OFF'));
+  (dDict as any).set(PDFName.of("BaseState"), PDFName.of("OFF"));
 
   // Set /ON to only the visible layers
   if (onRefs.length > 0) {
-    (dDict as any).set(PDFName.of('ON'), context.obj(onRefs));
+    (dDict as any).set(PDFName.of("ON"), context.obj(onRefs));
   } else {
-    (dDict as any).delete?.(PDFName.of('ON'));
+    (dDict as any).delete?.(PDFName.of("ON"));
   }
 
   // Set /OFF to only the hidden layers (for viewers that check it)
   if (offRefs.length > 0) {
-    (dDict as any).set(PDFName.of('OFF'), context.obj(offRefs));
+    (dDict as any).set(PDFName.of("OFF"), context.obj(offRefs));
   } else {
-    (dDict as any).delete?.(PDFName.of('OFF'));
+    (dDict as any).delete?.(PDFName.of("OFF"));
   }
 
   // Remove /AS (auto-state) array — it can contain usage-based overrides
   // (e.g., print vs view) that conflict with our explicit visibility settings.
-  (dDict as any).delete?.(PDFName.of('AS'));
+  (dDict as any).delete?.(PDFName.of("AS"));
 
   return doc.save();
 }
diff --git a/frontend/src/core/components/viewer/nonpdf/CsvViewer.tsx b/frontend/src/core/components/viewer/nonpdf/CsvViewer.tsx
index 298109a9e7..e8ee83b13b 100644
--- a/frontend/src/core/components/viewer/nonpdf/CsvViewer.tsx
+++ b/frontend/src/core/components/viewer/nonpdf/CsvViewer.tsx
@@ -1,15 +1,15 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { Badge, Center, Group, Paper, ScrollArea, Stack, Table, Text } from '@mantine/core';
-import SortIcon from '@mui/icons-material/Sort';
-import { useTranslation } from 'react-i18next';
+import React, { useEffect, useMemo, useState } from "react";
+import { Badge, Center, Group, Paper, ScrollArea, Stack, Table, Text } from "@mantine/core";
+import SortIcon from "@mui/icons-material/Sort";
+import { useTranslation } from "react-i18next";
 
-import { formatFileSize } from '@app/utils/fileUtils';
+import { formatFileSize } from "@app/utils/fileUtils";
 
 // ─── CSV parser ───────────────────────────────────────────────────────────────
 
 function parseCsv(text: string, delimiter: string): string[][] {
   const rows: string[][] = [];
-  let field = '';
+  let field = "";
   let inQuotes = false;
   let row: string[] = [];
 
@@ -30,16 +30,16 @@ function parseCsv(text: string, delimiter: string): string[][] {
       inQuotes = true;
     } else if (ch === delimiter) {
       row.push(field);
-      field = '';
-    } else if (ch === '\r' && next === '\n') {
+      field = "";
+    } else if (ch === "\r" && next === "\n") {
       row.push(field);
-      field = '';
+      field = "";
       rows.push(row);
       row = [];
       i++;
-    } else if (ch === '\n' || ch === '\r') {
+    } else if (ch === "\n" || ch === "\r") {
       row.push(field);
-      field = '';
+      field = "";
       rows.push(row);
       row = [];
     } else {
@@ -51,7 +51,7 @@ function parseCsv(text: string, delimiter: string): string[][] {
     rows.push(row);
   }
   // Remove trailing empty row
-  if (rows.length > 0 && rows[rows.length - 1].every(f => f === '')) {
+  if (rows.length > 0 && rows[rows.length - 1].every((f) => f === "")) {
     rows.pop();
   }
   return rows;
@@ -73,8 +73,8 @@ export function CsvViewer({ file, isTsv }: CsvViewerProps) {
 
   useEffect(() => {
     setLoading(true);
-    file.text().then(text => {
-      const delimiter = isTsv ? '\t' : ',';
+    file.text().then((text) => {
+      const delimiter = isTsv ? "\t" : ",";
       setRows(parseCsv(text, delimiter));
       setLoading(false);
     });
@@ -86,18 +86,18 @@ export function CsvViewer({ file, isTsv }: CsvViewerProps) {
   const sortedDataRows = useMemo(() => {
     if (sortCol === null) return dataRows;
     return [...dataRows].sort((a, b) => {
-      const av = a[sortCol] ?? '';
-      const bv = b[sortCol] ?? '';
+      const av = a[sortCol] ?? "";
+      const bv = b[sortCol] ?? "";
       const numA = Number(av);
       const numB = Number(bv);
-      const cmp = (!isNaN(numA) && !isNaN(numB)) ? numA - numB : av.localeCompare(bv);
+      const cmp = !isNaN(numA) && !isNaN(numB) ? numA - numB : av.localeCompare(bv);
       return sortAsc ? cmp : -cmp;
     });
   }, [dataRows, sortCol, sortAsc]);
 
   const handleSort = (colIdx: number) => {
     if (sortCol === colIdx) {
-      setSortAsc(a => !a);
+      setSortAsc((a) => !a);
     } else {
       setSortCol(colIdx);
       setSortAsc(true);
@@ -105,30 +105,52 @@ export function CsvViewer({ file, isTsv }: CsvViewerProps) {
   };
 
   if (loading) {
-    return <Center style={{ flex: 1 }}><Text c="dimmed" size="sm">{t('viewer.nonPdf.loading')}</Text></Center>;
+    return (
+      <Center style={{ flex: 1 }}>
+        <Text c="dimmed" size="sm">
+          {t("viewer.nonPdf.loading")}
+        </Text>
+      </Center>
+    );
   }
 
   if (rows.length === 0) {
-    return <Center style={{ flex: 1 }}><Text c="dimmed" size="sm">{t('viewer.nonPdf.emptyFile')}</Text></Center>;
+    return (
+      <Center style={{ flex: 1 }}>
+        <Text c="dimmed" size="sm">
+          {t("viewer.nonPdf.emptyFile")}
+        </Text>
+      </Center>
+    );
   }
 
   return (
-    <Stack gap={0} style={{ height: '100%', flex: 1 }}>
+    <Stack gap={0} style={{ height: "100%", flex: 1 }}>
       {/* Stats bar */}
-      <Paper radius={0} p="xs" style={{ borderBottom: '1px solid var(--mantine-color-gray-2)', flexShrink: 0 }}>
+      <Paper radius={0} p="xs" style={{ borderBottom: "1px solid var(--mantine-color-gray-2)", flexShrink: 0 }}>
         <Group gap="md" align="center">
           <Text size="xs" c="dimmed">
-            {t('viewer.nonPdf.csvStats', { rows: dataRows.length.toLocaleString(), columns: headers.length, size: formatFileSize(file.size) })}
+            {t("viewer.nonPdf.csvStats", {
+              rows: dataRows.length.toLocaleString(),
+              columns: headers.length,
+              size: formatFileSize(file.size),
+            })}
           </Text>
           {sortCol !== null && (
             <Badge
               variant="light"
               color="teal"
               size="xs"
-              style={{ cursor: 'pointer' }}
-              onClick={() => { setSortCol(null); setSortAsc(true); }}
+              style={{ cursor: "pointer" }}
+              onClick={() => {
+                setSortCol(null);
+                setSortAsc(true);
+              }}
             >
-              {t('viewer.nonPdf.sortedBy', { column: headers[sortCol] || t('viewer.nonPdf.columnDefault', { index: sortCol + 1 }) })} {sortAsc ? '\u2191' : '\u2193'} \u2715
+              {t("viewer.nonPdf.sortedBy", {
+                column: headers[sortCol] || t("viewer.nonPdf.columnDefault", { index: sortCol + 1 }),
+              })}{" "}
+              {sortAsc ? "\u2191" : "\u2193"} \u2715
             </Badge>
           )}
         </Group>
@@ -141,28 +163,26 @@ export function CsvViewer({ file, isTsv }: CsvViewerProps) {
           highlightOnHover
           withColumnBorders
           withTableBorder={false}
-          style={{ fontSize: 'var(--mantine-font-size-xs)', whiteSpace: 'nowrap' }}
+          style={{ fontSize: "var(--mantine-font-size-xs)", whiteSpace: "nowrap" }}
           stickyHeader
         >
           <Table.Thead>
             <Table.Tr>
-              <Table.Th style={{ width: 48, color: 'var(--mantine-color-dimmed)', textAlign: 'center', paddingInline: 8 }}>
+              <Table.Th style={{ width: 48, color: "var(--mantine-color-dimmed)", textAlign: "center", paddingInline: 8 }}>
                 #
               </Table.Th>
               {headers.map((h, i) => (
-                <Table.Th
-                  key={i}
-                  style={{ cursor: 'pointer', paddingInline: 8 }}
-                  onClick={() => handleSort(i)}
-                >
+                <Table.Th key={i} style={{ cursor: "pointer", paddingInline: 8 }} onClick={() => handleSort(i)}>
                   <Group gap={4} align="center" wrap="nowrap">
-                    <Text size="xs" fw={600} truncate style={{ maxWidth: 200 }}>{h || t('viewer.nonPdf.columnDefault', { index: i + 1 })}</Text>
+                    <Text size="xs" fw={600} truncate style={{ maxWidth: 200 }}>
+                      {h || t("viewer.nonPdf.columnDefault", { index: i + 1 })}
+                    </Text>
                     <SortIcon
                       style={{
-                        fontSize: '0.85rem',
+                        fontSize: "0.85rem",
                         opacity: sortCol === i ? 1 : 0.3,
-                        color: sortCol === i ? 'var(--mantine-color-teal-6)' : undefined,
-                        transform: sortCol === i && !sortAsc ? 'scaleY(-1)' : undefined,
+                        color: sortCol === i ? "var(--mantine-color-teal-6)" : undefined,
+                        transform: sortCol === i && !sortAsc ? "scaleY(-1)" : undefined,
                       }}
                     />
                   </Group>
@@ -173,12 +193,14 @@ export function CsvViewer({ file, isTsv }: CsvViewerProps) {
           <Table.Tbody>
             {sortedDataRows.map((row, ri) => (
               <Table.Tr key={ri}>
-                <Table.Td style={{ color: 'var(--mantine-color-dimmed)', textAlign: 'center', paddingInline: 8 }}>
+                <Table.Td style={{ color: "var(--mantine-color-dimmed)", textAlign: "center", paddingInline: 8 }}>
                   {ri + 1}
                 </Table.Td>
                 {headers.map((_, ci) => (
                   <Table.Td key={ci} style={{ paddingInline: 8, maxWidth: 300 }}>
-                    <Text size="xs" truncate title={row[ci]}>{row[ci] ?? ''}</Text>
+                    <Text size="xs" truncate title={row[ci]}>
+                      {row[ci] ?? ""}
+                    </Text>
                   </Table.Td>
                 ))}
               </Table.Tr>
diff --git a/frontend/src/core/components/viewer/nonpdf/HtmlViewer.tsx b/frontend/src/core/components/viewer/nonpdf/HtmlViewer.tsx
index d970c353b8..1d9ca997c3 100644
--- a/frontend/src/core/components/viewer/nonpdf/HtmlViewer.tsx
+++ b/frontend/src/core/components/viewer/nonpdf/HtmlViewer.tsx
@@ -1,8 +1,8 @@
-import { useEffect, useState } from 'react';
-import { Box, Paper, Text } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
+import { useEffect, useState } from "react";
+import { Box, Paper, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
 
-import { formatFileSize } from '@app/utils/fileUtils';
+import { formatFileSize } from "@app/utils/fileUtils";
 
 interface HtmlViewerProps {
   file: File;
@@ -19,16 +19,18 @@ export function HtmlViewer({ file }: HtmlViewerProps) {
   }, [file]);
 
   return (
-    <Box style={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
-      <Paper radius={0} p="xs" style={{ borderBottom: '1px solid var(--mantine-color-gray-2)', flexShrink: 0 }}>
-        <Text size="xs" c="dimmed">{t('viewer.nonPdf.htmlPreviewWarning', { size: formatFileSize(file.size) })}</Text>
+    <Box style={{ flex: 1, display: "flex", flexDirection: "column" }}>
+      <Paper radius={0} p="xs" style={{ borderBottom: "1px solid var(--mantine-color-gray-2)", flexShrink: 0 }}>
+        <Text size="xs" c="dimmed">
+          {t("viewer.nonPdf.htmlPreviewWarning", { size: formatFileSize(file.size) })}
+        </Text>
       </Paper>
       {objectUrl && (
         <iframe
           src={objectUrl}
-          title={t('viewer.nonPdf.htmlPreview')}
+          title={t("viewer.nonPdf.htmlPreview")}
           sandbox="allow-scripts"
-          style={{ flex: 1, border: 'none', background: '#fff' }}
+          style={{ flex: 1, border: "none", background: "#fff" }}
         />
       )}
     </Box>
diff --git a/frontend/src/core/components/viewer/nonpdf/ImageViewer.tsx b/frontend/src/core/components/viewer/nonpdf/ImageViewer.tsx
index 187d2b17fb..7d5acad0cc 100644
--- a/frontend/src/core/components/viewer/nonpdf/ImageViewer.tsx
+++ b/frontend/src/core/components/viewer/nonpdf/ImageViewer.tsx
@@ -1,5 +1,5 @@
-import { useEffect, useState } from 'react';
-import { Box } from '@mantine/core';
+import { useEffect, useState } from "react";
+import { Box } from "@mantine/core";
 
 interface ImageViewerProps {
   file: File;
@@ -19,11 +19,11 @@ export function ImageViewer({ file, fileName }: ImageViewerProps) {
     <Box
       style={{
         flex: 1,
-        overflow: 'hidden',
-        background: 'var(--mantine-color-gray-1)',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'center',
+        overflow: "hidden",
+        background: "var(--mantine-color-gray-1)",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
       }}
     >
       {objectUrl && (
@@ -32,10 +32,10 @@ export function ImageViewer({ file, fileName }: ImageViewerProps) {
           alt={fileName}
           draggable={false}
           style={{
-            maxWidth: '100%',
-            maxHeight: '100%',
-            objectFit: 'contain',
-            display: 'block',
+            maxWidth: "100%",
+            maxHeight: "100%",
+            objectFit: "contain",
+            display: "block",
           }}
         />
       )}
diff --git a/frontend/src/core/components/viewer/nonpdf/JsonViewer.tsx b/frontend/src/core/components/viewer/nonpdf/JsonViewer.tsx
index 9dabf3f6e1..87551b48eb 100644
--- a/frontend/src/core/components/viewer/nonpdf/JsonViewer.tsx
+++ b/frontend/src/core/components/viewer/nonpdf/JsonViewer.tsx
@@ -1,6 +1,6 @@
-import { useEffect, useState } from 'react';
-import { Box, Center, Paper, ScrollArea, Stack, Text } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
+import { useEffect, useState } from "react";
+import { Box, Center, Paper, ScrollArea, Stack, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
 
 interface JsonViewerProps {
   file: File;
@@ -12,7 +12,7 @@ export function JsonViewer({ file }: JsonViewerProps) {
   const [isInvalidJson, setIsInvalidJson] = useState(false);
 
   useEffect(() => {
-    file.text().then(text => {
+    file.text().then((text) => {
       try {
         const parsed = JSON.parse(text);
         setContent(JSON.stringify(parsed, null, 2));
@@ -26,14 +26,30 @@ export function JsonViewer({ file }: JsonViewerProps) {
   }, [file]);
 
   if (content === null) {
-    return <Center style={{ flex: 1 }}><Text c="dimmed" size="sm">{t('viewer.nonPdf.loading')}</Text></Center>;
+    return (
+      <Center style={{ flex: 1 }}>
+        <Text c="dimmed" size="sm">
+          {t("viewer.nonPdf.loading")}
+        </Text>
+      </Center>
+    );
   }
 
   return (
-    <Stack gap={0} style={{ height: '100%', flex: 1 }}>
+    <Stack gap={0} style={{ height: "100%", flex: 1 }}>
       {isInvalidJson && (
-        <Paper radius={0} p="xs" style={{ borderBottom: '1px solid var(--mantine-color-red-2)', background: 'var(--mantine-color-red-0)', flexShrink: 0 }}>
-          <Text size="xs" c="red">{t('viewer.nonPdf.invalidJson')}</Text>
+        <Paper
+          radius={0}
+          p="xs"
+          style={{
+            borderBottom: "1px solid var(--mantine-color-red-2)",
+            background: "var(--mantine-color-red-0)",
+            flexShrink: 0,
+          }}
+        >
+          <Text size="xs" c="red">
+            {t("viewer.nonPdf.invalidJson")}
+          </Text>
         </Paper>
       )}
       <ScrollArea style={{ flex: 1 }} type="auto">
@@ -41,12 +57,12 @@ export function JsonViewer({ file }: JsonViewerProps) {
           component="pre"
           style={{
             margin: 0,
-            padding: 'var(--mantine-spacing-sm)',
-            fontFamily: 'monospace',
-            fontSize: '0.8rem',
+            padding: "var(--mantine-spacing-sm)",
+            fontFamily: "monospace",
+            fontSize: "0.8rem",
             lineHeight: 1.6,
-            whiteSpace: 'pre',
-            overflowX: 'auto',
+            whiteSpace: "pre",
+            overflowX: "auto",
           }}
         >
           {content}
diff --git a/frontend/src/core/components/viewer/nonpdf/NonPdfBanner.tsx b/frontend/src/core/components/viewer/nonpdf/NonPdfBanner.tsx
index b890f889ac..f9ec5ed003 100644
--- a/frontend/src/core/components/viewer/nonpdf/NonPdfBanner.tsx
+++ b/frontend/src/core/components/viewer/nonpdf/NonPdfBanner.tsx
@@ -1,8 +1,8 @@
-import { Badge, Box, Button, Group } from '@mantine/core';
-import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
-import { useTranslation } from 'react-i18next';
+import { Badge, Box, Button, Group } from "@mantine/core";
+import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
+import { useTranslation } from "react-i18next";
 
-import type { FileTypeMeta } from '@app/components/viewer/nonpdf/types';
+import type { FileTypeMeta } from "@app/components/viewer/nonpdf/types";
 
 interface NonPdfBannerProps {
   meta: FileTypeMeta;
@@ -18,34 +18,30 @@ export function NonPdfBanner({ meta, onConvertToPdf }: NonPdfBannerProps) {
       wrap="nowrap"
       align="center"
       style={{
-        position: 'absolute',
+        position: "absolute",
         top: 8,
         right: 8,
         zIndex: 10,
-        pointerEvents: 'auto',
+        pointerEvents: "auto",
       }}
     >
       <Badge
         variant="default"
         size="lg"
-        leftSection={
-          <Box style={{ display: 'flex', alignItems: 'center', fontSize: '0.85rem' }}>
-            {meta.icon}
-          </Box>
-        }
+        leftSection={<Box style={{ display: "flex", alignItems: "center", fontSize: "0.85rem" }}>{meta.icon}</Box>}
         style={{ fontWeight: 600 }}
       >
-        {t('viewer.nonPdf.fileTypeBadge', { type: meta.label })}
+        {t("viewer.nonPdf.fileTypeBadge", { type: meta.label })}
       </Badge>
       {onConvertToPdf && (
         <Button
           size="xs"
           variant="light"
           color="orange"
-          leftSection={<PictureAsPdfIcon style={{ fontSize: '0.9rem' }} />}
+          leftSection={<PictureAsPdfIcon style={{ fontSize: "0.9rem" }} />}
           onClick={onConvertToPdf}
         >
-          {t('viewer.nonPdf.convertToPdf')}
+          {t("viewer.nonPdf.convertToPdf")}
         </Button>
       )}
     </Group>
diff --git a/frontend/src/core/components/viewer/nonpdf/TextViewer.tsx b/frontend/src/core/components/viewer/nonpdf/TextViewer.tsx
index f25daa21c6..57cf9eb354 100644
--- a/frontend/src/core/components/viewer/nonpdf/TextViewer.tsx
+++ b/frontend/src/core/components/viewer/nonpdf/TextViewer.tsx
@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from 'react';
-import { Box, Center, Checkbox, Group, Paper, ScrollArea, Stack, Text } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
+import React, { useEffect, useState } from "react";
+import { Box, Center, Checkbox, Group, Paper, ScrollArea, Stack, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
 
-import { formatFileSize } from '@app/utils/fileUtils';
+import { formatFileSize } from "@app/utils/fileUtils";
 
 // ─── Markdown renderer ────────────────────────────────────────────────────────
 
@@ -17,8 +17,33 @@ function renderInline(text: string): React.ReactNode[] {
     if (match.index > last) parts.push(text.slice(last, match.index));
     if (match[2]) parts.push(<strong key={key++}>{match[2]}</strong>);
     else if (match[3]) parts.push(<em key={key++}>{match[3]}</em>);
-    else if (match[4]) parts.push(<code key={key++} style={{ background: 'var(--mantine-color-gray-1)', padding: '0 3px', borderRadius: 3, fontFamily: 'monospace', fontSize: '0.85em' }}>{match[4]}</code>);
-    else if (match[5]) parts.push(<a key={key++} href={match[6]} target="_blank" rel="noopener noreferrer" style={{ color: 'var(--mantine-color-blue-6)' }}>{match[5]}</a>);
+    else if (match[4])
+      parts.push(
+        <code
+          key={key++}
+          style={{
+            background: "var(--mantine-color-gray-1)",
+            padding: "0 3px",
+            borderRadius: 3,
+            fontFamily: "monospace",
+            fontSize: "0.85em",
+          }}
+        >
+          {match[4]}
+        </code>,
+      );
+    else if (match[5])
+      parts.push(
+        <a
+          key={key++}
+          href={match[6]}
+          target="_blank"
+          rel="noopener noreferrer"
+          style={{ color: "var(--mantine-color-blue-6)" }}
+        >
+          {match[5]}
+        </a>,
+      );
     last = match.index + match[0].length;
   }
   if (last < text.length) parts.push(text.slice(last));
@@ -26,7 +51,7 @@ function renderInline(text: string): React.ReactNode[] {
 }
 
 function renderMarkdown(text: string): React.ReactNode[] {
-  const lines = text.split('\n');
+  const lines = text.split("\n");
   const elements: React.ReactNode[] = [];
   let inCodeBlock = false;
   let codeLines: string[] = [];
@@ -35,12 +60,22 @@ function renderMarkdown(text: string): React.ReactNode[] {
   while (i < lines.length) {
     const line = lines[i];
 
-    if (line.startsWith('```')) {
+    if (line.startsWith("```")) {
       if (inCodeBlock) {
         elements.push(
-          <pre key={i} style={{ background: 'var(--mantine-color-gray-1)', padding: '8px 12px', borderRadius: 4, overflowX: 'auto', fontSize: '0.85em', margin: '4px 0' }}>
-            <code>{codeLines.join('\n')}</code>
-          </pre>
+          <pre
+            key={i}
+            style={{
+              background: "var(--mantine-color-gray-1)",
+              padding: "8px 12px",
+              borderRadius: 4,
+              overflowX: "auto",
+              fontSize: "0.85em",
+              margin: "4px 0",
+            }}
+          >
+            <code>{codeLines.join("\n")}</code>
+          </pre>,
         );
         codeLines = [];
         inCodeBlock = false;
@@ -57,32 +92,56 @@ function renderMarkdown(text: string): React.ReactNode[] {
       continue;
     }
 
-    if (line.startsWith('### ')) {
-      elements.push(<Text key={i} fw={600} size="md" mt="xs" mb={2}>{renderInline(line.slice(4))}</Text>);
-    } else if (line.startsWith('## ')) {
-      elements.push(<Text key={i} fw={700} size="lg" mt="sm" mb={4}>{renderInline(line.slice(3))}</Text>);
-    } else if (line.startsWith('# ')) {
-      elements.push(<Text key={i} fw={800} size="xl" mt="md" mb={6}>{renderInline(line.slice(2))}</Text>);
-    } else if (line.startsWith('- ') || line.startsWith('* ')) {
+    if (line.startsWith("### ")) {
+      elements.push(
+        <Text key={i} fw={600} size="md" mt="xs" mb={2}>
+          {renderInline(line.slice(4))}
+        </Text>,
+      );
+    } else if (line.startsWith("## ")) {
+      elements.push(
+        <Text key={i} fw={700} size="lg" mt="sm" mb={4}>
+          {renderInline(line.slice(3))}
+        </Text>,
+      );
+    } else if (line.startsWith("# ")) {
+      elements.push(
+        <Text key={i} fw={800} size="xl" mt="md" mb={6}>
+          {renderInline(line.slice(2))}
+        </Text>,
+      );
+    } else if (line.startsWith("- ") || line.startsWith("* ")) {
       elements.push(
         <Group key={i} gap={6} align="flex-start" style={{ paddingLeft: 16 }}>
-          <Text size="sm" style={{ lineHeight: 1.6, flexShrink: 0 }}>{'\u2022'}</Text>
-          <Text size="sm" style={{ lineHeight: 1.6 }}>{renderInline(line.slice(2))}</Text>
-        </Group>
+          <Text size="sm" style={{ lineHeight: 1.6, flexShrink: 0 }}>
+            {"\u2022"}
+          </Text>
+          <Text size="sm" style={{ lineHeight: 1.6 }}>
+            {renderInline(line.slice(2))}
+          </Text>
+        </Group>,
       );
     } else if (/^\d+\.\s/.test(line)) {
       const num = line.match(/^(\d+)\.\s/)?.[1];
-      const rest = line.replace(/^\d+\.\s/, '');
+      const rest = line.replace(/^\d+\.\s/, "");
       elements.push(
         <Group key={i} gap={6} align="flex-start" style={{ paddingLeft: 16 }}>
-          <Text size="sm" style={{ lineHeight: 1.6, flexShrink: 0 }}>{num}.</Text>
-          <Text size="sm" style={{ lineHeight: 1.6 }}>{renderInline(rest)}</Text>
-        </Group>
+          <Text size="sm" style={{ lineHeight: 1.6, flexShrink: 0 }}>
+            {num}.
+          </Text>
+          <Text size="sm" style={{ lineHeight: 1.6 }}>
+            {renderInline(rest)}
+          </Text>
+        </Group>,
       );
-    } else if (line.trim() === '' || line === '---' || line === '***') {
+    } else if (line.trim() === "" || line === "---" || line === "***") {
       elements.push(<Box key={i} style={{ height: 8 }} />);
     } else {
-      elements.push(<Text key={i} size="sm" style={{ lineHeight: 1.7 }}>{renderInline(line)}</Text>);
+      elements.push(
+        <Text key={i} size="sm" style={{ lineHeight: 1.7 }}>
+          {renderInline(line)}
+        </Text>,
+      );
     }
     i++;
   }
@@ -107,27 +166,29 @@ export function TextViewer({ file, isMarkdown }: TextViewerProps) {
     file.text().then(setContent);
   }, [file]);
 
-  const lines = content?.split('\n') ?? [];
+  const lines = content?.split("\n") ?? [];
 
   return (
-    <Stack gap={0} style={{ height: '100%', flex: 1 }}>
+    <Stack gap={0} style={{ height: "100%", flex: 1 }}>
       {/* Toolbar */}
-      <Paper radius={0} p="xs" style={{ borderBottom: '1px solid var(--mantine-color-gray-2)', flexShrink: 0 }}>
+      <Paper radius={0} p="xs" style={{ borderBottom: "1px solid var(--mantine-color-gray-2)", flexShrink: 0 }}>
         <Group gap="md" align="center">
-          <Text size="xs" c="dimmed">{t('viewer.nonPdf.textStats', { lines: lines.length.toLocaleString(), size: formatFileSize(file.size) })}</Text>
+          <Text size="xs" c="dimmed">
+            {t("viewer.nonPdf.textStats", { lines: lines.length.toLocaleString(), size: formatFileSize(file.size) })}
+          </Text>
           {!isMarkdown && (
             <Checkbox
-              label={<Text size="xs">{t('viewer.nonPdf.lineNumbers')}</Text>}
+              label={<Text size="xs">{t("viewer.nonPdf.lineNumbers")}</Text>}
               checked={showLineNumbers}
-              onChange={e => setShowLineNumbers(e.currentTarget.checked)}
+              onChange={(e) => setShowLineNumbers(e.currentTarget.checked)}
               size="xs"
             />
           )}
           {isMarkdown && (
             <Checkbox
-              label={<Text size="xs">{t('viewer.nonPdf.renderMarkdown')}</Text>}
+              label={<Text size="xs">{t("viewer.nonPdf.renderMarkdown")}</Text>}
               checked={renderMd}
-              onChange={e => setRenderMd(e.currentTarget.checked)}
+              onChange={(e) => setRenderMd(e.currentTarget.checked)}
               size="xs"
             />
           )}
@@ -137,50 +198,48 @@ export function TextViewer({ file, isMarkdown }: TextViewerProps) {
       {/* Content */}
       <ScrollArea style={{ flex: 1 }} p="md">
         {content === null ? (
-          <Center><Text c="dimmed" size="sm">{t('viewer.nonPdf.loading')}</Text></Center>
+          <Center>
+            <Text c="dimmed" size="sm">
+              {t("viewer.nonPdf.loading")}
+            </Text>
+          </Center>
         ) : isMarkdown && renderMd ? (
-          <Box style={{ maxWidth: 800, margin: '0 auto', padding: '8px 0' }}>
-            {renderMarkdown(content)}
-          </Box>
+          <Box style={{ maxWidth: 800, margin: "0 auto", padding: "8px 0" }}>{renderMarkdown(content)}</Box>
         ) : (
           <Box
             component="pre"
             style={{
-              fontFamily: 'monospace',
-              fontSize: '0.8rem',
+              fontFamily: "monospace",
+              fontSize: "0.8rem",
               lineHeight: 1.6,
               margin: 0,
-              whiteSpace: 'pre-wrap',
-              wordBreak: 'break-word',
-              display: 'table',
-              width: '100%',
+              whiteSpace: "pre-wrap",
+              wordBreak: "break-word",
+              display: "table",
+              width: "100%",
             }}
           >
             {lines.map((line, i) => (
-              <Box
-                key={i}
-                component="div"
-                style={{ display: 'table-row' }}
-              >
+              <Box key={i} component="div" style={{ display: "table-row" }}>
                 {showLineNumbers && (
                   <Box
                     component="span"
                     style={{
-                      display: 'table-cell',
+                      display: "table-cell",
                       paddingRight: 16,
                       paddingLeft: 4,
-                      textAlign: 'right',
-                      color: 'var(--mantine-color-gray-5)',
-                      userSelect: 'none',
-                      borderRight: '1px solid var(--mantine-color-gray-2)',
+                      textAlign: "right",
+                      color: "var(--mantine-color-gray-5)",
+                      userSelect: "none",
+                      borderRight: "1px solid var(--mantine-color-gray-2)",
                       minWidth: `${String(lines.length).length + 1}ch`,
                     }}
                   >
                     {i + 1}
                   </Box>
                 )}
-                <Box component="span" style={{ display: 'table-cell', paddingLeft: showLineNumbers ? 12 : 0 }}>
-                  {line || '\u00A0'}
+                <Box component="span" style={{ display: "table-cell", paddingLeft: showLineNumbers ? 12 : 0 }}>
+                  {line || "\u00A0"}
                 </Box>
               </Box>
             ))}
diff --git a/frontend/src/core/components/viewer/nonpdf/types.ts b/frontend/src/core/components/viewer/nonpdf/types.ts
index 92c69fd88d..d32e961d4f 100644
--- a/frontend/src/core/components/viewer/nonpdf/types.ts
+++ b/frontend/src/core/components/viewer/nonpdf/types.ts
@@ -1,12 +1,12 @@
-import React from 'react';
-import ImageIcon from '@mui/icons-material/Image';
-import TableChartIcon from '@mui/icons-material/TableChart';
-import ArticleIcon from '@mui/icons-material/Article';
-import CodeIcon from '@mui/icons-material/Code';
-import DataObjectIcon from '@mui/icons-material/DataObject';
-import HtmlIcon from '@mui/icons-material/Html';
+import React from "react";
+import ImageIcon from "@mui/icons-material/Image";
+import TableChartIcon from "@mui/icons-material/TableChart";
+import ArticleIcon from "@mui/icons-material/Article";
+import CodeIcon from "@mui/icons-material/Code";
+import DataObjectIcon from "@mui/icons-material/DataObject";
+import HtmlIcon from "@mui/icons-material/Html";
 
-import type { NonPdfFileType } from '@app/utils/fileUtils';
+import type { NonPdfFileType } from "@app/utils/fileUtils";
 
 export interface FileTypeMeta {
   label: string;
@@ -20,32 +20,32 @@ export interface FileTypeMeta {
 
 // Shared neutral color scheme for all file type badges — consistent in light & dark mode
 const BADGE_COLORS = {
-  color: 'gray' as const,
-  accentColor: 'var(--mantine-color-gray-6)',
-  borderColor: 'var(--mantine-color-gray-3)',
-  bgColor: 'var(--mantine-color-gray-0)',
-  textColor: 'var(--mantine-color-gray-9)',
+  color: "gray" as const,
+  accentColor: "var(--mantine-color-gray-6)",
+  borderColor: "var(--mantine-color-gray-3)",
+  bgColor: "var(--mantine-color-gray-0)",
+  textColor: "var(--mantine-color-gray-9)",
 };
 
 export function getFileTypeMeta(type: NonPdfFileType, fileName?: string): FileTypeMeta {
   switch (type) {
-    case 'image':
-      return { label: 'Image', icon: React.createElement(ImageIcon, { fontSize: 'small' }), ...BADGE_COLORS };
-    case 'csv':
-      return { label: 'Spreadsheet', icon: React.createElement(TableChartIcon, { fontSize: 'small' }), ...BADGE_COLORS };
-    case 'json':
-      return { label: 'JSON', icon: React.createElement(DataObjectIcon, { fontSize: 'small' }), ...BADGE_COLORS };
-    case 'markdown':
-      return { label: 'Markdown', icon: React.createElement(CodeIcon, { fontSize: 'small' }), ...BADGE_COLORS };
-    case 'html':
-      return { label: 'HTML', icon: React.createElement(HtmlIcon, { fontSize: 'small' }), ...BADGE_COLORS };
-    case 'text':
-      return { label: 'Text', icon: React.createElement(ArticleIcon, { fontSize: 'small' }), ...BADGE_COLORS };
+    case "image":
+      return { label: "Image", icon: React.createElement(ImageIcon, { fontSize: "small" }), ...BADGE_COLORS };
+    case "csv":
+      return { label: "Spreadsheet", icon: React.createElement(TableChartIcon, { fontSize: "small" }), ...BADGE_COLORS };
+    case "json":
+      return { label: "JSON", icon: React.createElement(DataObjectIcon, { fontSize: "small" }), ...BADGE_COLORS };
+    case "markdown":
+      return { label: "Markdown", icon: React.createElement(CodeIcon, { fontSize: "small" }), ...BADGE_COLORS };
+    case "html":
+      return { label: "HTML", icon: React.createElement(HtmlIcon, { fontSize: "small" }), ...BADGE_COLORS };
+    case "text":
+      return { label: "Text", icon: React.createElement(ArticleIcon, { fontSize: "small" }), ...BADGE_COLORS };
     default: {
       // For unknown types, derive label from the file extension (e.g. ".docx" → "DOCX")
-      const ext = fileName?.split('.').pop()?.toUpperCase();
-      const label = ext || 'File';
-      return { label, icon: React.createElement(ArticleIcon, { fontSize: 'small' }), ...BADGE_COLORS };
+      const ext = fileName?.split(".").pop()?.toUpperCase();
+      const label = ext || "File";
+      return { label, icon: React.createElement(ArticleIcon, { fontSize: "small" }), ...BADGE_COLORS };
     }
   }
 }
diff --git a/frontend/src/core/components/viewer/readAloudHighlight.test.ts b/frontend/src/core/components/viewer/readAloudHighlight.test.ts
index 6f1cd540fd..cf2ca9a764 100644
--- a/frontend/src/core/components/viewer/readAloudHighlight.test.ts
+++ b/frontend/src/core/components/viewer/readAloudHighlight.test.ts
@@ -1,15 +1,15 @@
-import { describe, expect, it } from 'vitest';
-import { computeReadAloudHighlightRect } from '@app/components/viewer/readAloudHighlight';
+import { describe, expect, it } from "vitest";
+import { computeReadAloudHighlightRect } from "@app/components/viewer/readAloudHighlight";
 
-describe('computeReadAloudHighlightRect', () => {
-  it('returns page-relative coordinates for an unrotated text item', () => {
+describe("computeReadAloudHighlightRect", () => {
+  it("returns page-relative coordinates for an unrotated text item", () => {
     expect(
       computeReadAloudHighlightRect({
         viewportTransform: [2, 0, 0, -2, 0, 1000],
         textTransform: [1, 0, 0, 1, 120, 300],
         itemWidth: 40,
         itemHeight: 10,
-      })
+      }),
     ).toEqual({
       left: 240,
       top: 380,
@@ -18,14 +18,14 @@ describe('computeReadAloudHighlightRect', () => {
     });
   });
 
-  it('enforces minimum visible highlight dimensions', () => {
+  it("enforces minimum visible highlight dimensions", () => {
     expect(
       computeReadAloudHighlightRect({
         viewportTransform: [1, 0, 0, -1, 0, 600],
         textTransform: [1, 0, 0, 1, 12, 40],
         itemWidth: 2,
         itemHeight: 4,
-      })
+      }),
     ).toEqual({
       left: 12,
       top: 548,
@@ -34,25 +34,25 @@ describe('computeReadAloudHighlightRect', () => {
     });
   });
 
-  it('returns null for invalid geometry', () => {
+  it("returns null for invalid geometry", () => {
     expect(
       computeReadAloudHighlightRect({
         viewportTransform: [1, 0, 0, -1, 0, 600],
         textTransform: [1, 0, 0, 1, 0, 0],
         itemWidth: 10,
         itemHeight: 0,
-      })
+      }),
     ).toBeNull();
   });
 
-  it('returns the correct box for a 90 degree rotated viewport', () => {
+  it("returns the correct box for a 90 degree rotated viewport", () => {
     expect(
       computeReadAloudHighlightRect({
         viewportTransform: [0, 2, 2, 0, 0, 0],
         textTransform: [1, 0, 0, 1, 120, 300],
         itemWidth: 40,
         itemHeight: 10,
-      })
+      }),
     ).toEqual({
       left: 600,
       top: 220,
diff --git a/frontend/src/core/components/viewer/useActiveDocumentId.ts b/frontend/src/core/components/viewer/useActiveDocumentId.ts
index aff97eeda4..f889e6f8e3 100644
--- a/frontend/src/core/components/viewer/useActiveDocumentId.ts
+++ b/frontend/src/core/components/viewer/useActiveDocumentId.ts
@@ -1,4 +1,4 @@
-import { useActiveDocument } from '@app/components/viewer/ActiveDocumentContext';
+import { useActiveDocument } from "@app/components/viewer/ActiveDocumentContext";
 
 /**
  * Hook to get the currently active document ID.
diff --git a/frontend/src/core/components/viewer/useAnnotationMenuHandlers.ts b/frontend/src/core/components/viewer/useAnnotationMenuHandlers.ts
index 56b4ee9d1d..ea4c337c2c 100644
--- a/frontend/src/core/components/viewer/useAnnotationMenuHandlers.ts
+++ b/frontend/src/core/components/viewer/useAnnotationMenuHandlers.ts
@@ -1,24 +1,22 @@
-import { useCallback, useMemo, type RefObject } from 'react';
-import { PdfActionType, PdfAnnotationSubtype, PdfAnnotationReplyType, type PdfAnnotationObject } from '@embedpdf/models';
-import type { TrackedAnnotation, AnnotationScope } from '@embedpdf/plugin-annotation';
-import type { AnnotationObject, AnnotationPatch } from '@app/components/viewer/viewerTypes';
-import type { ScrollActions } from '@app/contexts/viewer/viewerActions';
+import { useCallback, useMemo, type RefObject } from "react";
+import { PdfActionType, PdfAnnotationSubtype, PdfAnnotationReplyType, type PdfAnnotationObject } from "@embedpdf/models";
+import type { TrackedAnnotation, AnnotationScope } from "@embedpdf/plugin-annotation";
+import type { AnnotationObject, AnnotationPatch } from "@app/components/viewer/viewerTypes";
+import type { ScrollActions } from "@app/contexts/viewer/viewerActions";
 
 export type AnnotationType =
-  | 'textMarkup'
-  | 'ink'
-  | 'inkHighlighter'
-  | 'text'
-  | 'note'
-  | 'comment'
-  | 'shape'
-  | 'line'
-  | 'stamp'
-  | 'unknown';
+  | "textMarkup"
+  | "ink"
+  | "inkHighlighter"
+  | "text"
+  | "note"
+  | "comment"
+  | "shape"
+  | "line"
+  | "stamp"
+  | "unknown";
 
-export type FirstLinkTarget =
-  | { type: 'uri'; uri: string }
-  | { type: 'goto'; pageIndex: number };
+export type FirstLinkTarget = { type: "uri"; uri: string } | { type: "goto"; pageIndex: number };
 
 interface UseAnnotationMenuHandlersParams {
   annotation: TrackedAnnotation<PdfAnnotationObject> | undefined;
@@ -50,7 +48,7 @@ export interface AnnotationMenuState {
 export interface AnnotationMenuHandlers {
   onDelete: () => void;
   onEdit: () => void;
-  onColorChange: (color: string, target: 'main' | 'stroke' | 'fill' | 'text' | 'background') => void;
+  onColorChange: (color: string, target: "main" | "stroke" | "fill" | "text" | "background") => void;
   onOpacityChange: (opacity: number) => void;
   onWidthChange: (width: number) => void;
   onPropertiesUpdate: (patch: AnnotationPatch) => void;
@@ -83,17 +81,19 @@ export function useAnnotationMenuHandlers({
   }, [annotationId, provides]);
 
   const firstLinkTarget = useMemo<FirstLinkTarget | null>(() => {
-    const linkObj = (attachedLinks[0]?.object as {
-      target?: {
-        type: string;
-        action?: { type: number; uri?: string; destination?: { pageIndex: number } };
-      };
-    } | undefined);
-    if (!linkObj?.target || linkObj.target.type !== 'action') return null;
+    const linkObj = attachedLinks[0]?.object as
+      | {
+          target?: {
+            type: string;
+            action?: { type: number; uri?: string; destination?: { pageIndex: number } };
+          };
+        }
+      | undefined;
+    if (!linkObj?.target || linkObj.target.type !== "action") return null;
     const act = linkObj.target.action;
-    if (act && act.type === PdfActionType.URI && act.uri) return { type: 'uri', uri: act.uri };
+    if (act && act.type === PdfActionType.URI && act.uri) return { type: "uri", uri: act.uri };
     if (act && (act.type === PdfActionType.Goto || act.type === PdfActionType.RemoteGoto) && act.destination)
-      return { type: 'goto', pageIndex: act.destination.pageIndex };
+      return { type: "goto", pageIndex: act.destination.pageIndex };
     return null;
   }, [attachedLinks]);
 
@@ -101,45 +101,49 @@ export function useAnnotationMenuHandlers({
     const type = annotation?.object?.type;
     const toolId = (annotation?.object as AnnotationObject | undefined)?.customData?.toolId;
 
-    if (type !== undefined && [9, 10, 11, 12].includes(type)) return 'textMarkup';
-    if (type === 15) return toolId === 'inkHighlighter' ? 'inkHighlighter' : 'ink';
-    if (type === 1 && toolId === 'textComment') return 'comment';
-    if (type === 14 && (toolId === 'insertText' || toolId === 'replaceText')) return 'comment';
-    if (type === 3) return 'note';
-    if (type !== undefined && [5, 6, 7].includes(type)) return 'shape';
-    if (type !== undefined && [4, 8].includes(type)) return 'line';
-    if (type === 13) return 'stamp';
-    return 'unknown';
+    if (type !== undefined && [9, 10, 11, 12].includes(type)) return "textMarkup";
+    if (type === 15) return toolId === "inkHighlighter" ? "inkHighlighter" : "ink";
+    if (type === 1 && toolId === "textComment") return "comment";
+    if (type === 14 && (toolId === "insertText" || toolId === "replaceText")) return "comment";
+    if (type === 3) return "note";
+    if (type !== undefined && [5, 6, 7].includes(type)) return "shape";
+    if (type !== undefined && [4, 8].includes(type)) return "line";
+    if (type === 13) return "stamp";
+    return "unknown";
   }, [annotation]);
 
   const menuWidth = useMemo((): number => {
     switch (annotationType) {
-      case 'stamp': return 80;
-      case 'inkHighlighter':
-      case 'comment':
-      case 'textMarkup':
-      case 'text':
-      case 'note': return 280;
-      case 'shape': return 200;
-      default: return 260;
+      case "stamp":
+        return 80;
+      case "inkHighlighter":
+      case "comment":
+      case "textMarkup":
+      case "text":
+      case "note":
+        return 280;
+      case "shape":
+        return 200;
+      default:
+        return 260;
     }
   }, [annotationType]);
 
-  const hasCommentContent = (obj?.contents ?? '').trim().length > 0;
+  const hasCommentContent = (obj?.contents ?? "").trim().length > 0;
   const isInSidebar = (obj?.customData as Record<string, unknown> | undefined)?.isComment === true;
 
   // Derived style values
   const currentColor = (() => {
-    if (!obj) return '#000000';
+    if (!obj) return "#000000";
     const type = obj.type;
-    if (type === 3) return obj.textColor || obj.color || '#000000';
-    if (type !== undefined && [4, 5, 6, 7, 8].includes(type)) return obj.strokeColor || obj.color || '#000000';
-    return obj.color || obj.strokeColor || '#000000';
+    if (type === 3) return obj.textColor || obj.color || "#000000";
+    if (type !== undefined && [4, 5, 6, 7, 8].includes(type)) return obj.strokeColor || obj.color || "#000000";
+    return obj.color || obj.strokeColor || "#000000";
   })();
-  const strokeColor = obj?.strokeColor || obj?.color || '#000000';
-  const fillColor = obj?.color || obj?.fillColor || '#0000ff';
-  const backgroundColor = obj?.backgroundColor || obj?.fillColor || obj?.color || '#ffffff';
-  const textColor = obj?.textColor || obj?.color || '#000000';
+  const strokeColor = obj?.strokeColor || obj?.color || "#000000";
+  const fillColor = obj?.color || obj?.fillColor || "#0000ff";
+  const backgroundColor = obj?.backgroundColor || obj?.fillColor || obj?.color || "#ffffff";
+  const textColor = obj?.textColor || obj?.color || "#000000";
   const currentOpacity = Math.round((obj?.opacity ?? 1) * 100);
   const currentWidth = obj?.strokeWidth ?? obj?.borderWidth ?? obj?.lineWidth ?? obj?.thickness ?? 2;
 
@@ -151,95 +155,110 @@ export function useAnnotationMenuHandlers({
   }, [provides, annotationId, pageIndex]);
 
   const onEdit = useCallback(() => {
-    const root = wrapperRef.current?.closest('[data-no-interaction]');
+    const root = wrapperRef.current?.closest("[data-no-interaction]");
     const main = root?.firstElementChild;
     const hitArea = main?.lastElementChild ?? main?.firstElementChild;
     if (!hitArea) return;
-    hitArea.dispatchEvent(new MouseEvent('dblclick', { bubbles: true, cancelable: true, view: window }));
+    hitArea.dispatchEvent(new MouseEvent("dblclick", { bubbles: true, cancelable: true, view: window }));
   }, [wrapperRef]);
 
-  const onColorChange = useCallback((color: string, target: 'main' | 'stroke' | 'fill' | 'text' | 'background') => {
-    if (!provides?.updateAnnotation || !annotationId || pageIndex === undefined) return;
-    const type = obj?.type;
-    const patch: AnnotationPatch = {};
+  const onColorChange = useCallback(
+    (color: string, target: "main" | "stroke" | "fill" | "text" | "background") => {
+      if (!provides?.updateAnnotation || !annotationId || pageIndex === undefined) return;
+      const type = obj?.type;
+      const patch: AnnotationPatch = {};
 
-    if (target === 'stroke') {
-      patch.strokeColor = color;
-      patch.color = obj?.color || '#0000ff';
-      patch.strokeWidth = currentWidth;
-    } else if (target === 'fill') {
-      patch.color = color;
-      patch.strokeColor = obj?.strokeColor || '#000000';
-      patch.strokeWidth = currentWidth;
-    } else if (target === 'background') {
-      patch.backgroundColor = color;
-      patch.fillColor = color;
-      patch.color = color;
-    } else if (target === 'text') {
-      patch.textColor = color;
-      patch.fontColor = color;
-      patch.fontSize = obj?.fontSize ?? 14;
-      patch.fontFamily = obj?.fontFamily ?? 'Helvetica';
-      patch.contents = obj?.contents ?? '';
-    } else {
-      patch.color = color;
-      if (type !== undefined && [9, 10, 11, 12].includes(type)) {
+      if (target === "stroke") {
         patch.strokeColor = color;
+        patch.color = obj?.color || "#0000ff";
+        patch.strokeWidth = currentWidth;
+      } else if (target === "fill") {
+        patch.color = color;
+        patch.strokeColor = obj?.strokeColor || "#000000";
+        patch.strokeWidth = currentWidth;
+      } else if (target === "background") {
+        patch.backgroundColor = color;
         patch.fillColor = color;
-        patch.opacity = obj?.opacity ?? 1;
+        patch.color = color;
+      } else if (target === "text") {
+        patch.textColor = color;
+        patch.fontColor = color;
+        patch.fontSize = obj?.fontSize ?? 14;
+        patch.fontFamily = obj?.fontFamily ?? "Helvetica";
+        patch.contents = obj?.contents ?? "";
+      } else {
+        patch.color = color;
+        if (type !== undefined && [9, 10, 11, 12].includes(type)) {
+          patch.strokeColor = color;
+          patch.fillColor = color;
+          patch.opacity = obj?.opacity ?? 1;
+        }
+        if (type !== undefined && [4, 8].includes(type)) {
+          patch.strokeColor = color;
+          patch.strokeWidth = obj?.strokeWidth ?? obj?.lineWidth ?? 2;
+          patch.lineWidth = obj?.lineWidth ?? obj?.strokeWidth ?? 2;
+        }
+        if (type === 15) {
+          patch.strokeColor = color;
+          patch.strokeWidth = obj?.strokeWidth ?? obj?.thickness ?? 2;
+          patch.opacity = obj?.opacity ?? 1;
+        }
       }
-      if (type !== undefined && [4, 8].includes(type)) {
-        patch.strokeColor = color;
-        patch.strokeWidth = obj?.strokeWidth ?? obj?.lineWidth ?? 2;
-        patch.lineWidth = obj?.lineWidth ?? obj?.strokeWidth ?? 2;
-      }
-      if (type === 15) {
-        patch.strokeColor = color;
-        patch.strokeWidth = obj?.strokeWidth ?? obj?.thickness ?? 2;
-        patch.opacity = obj?.opacity ?? 1;
-      }
-    }
 
-    provides.updateAnnotation(pageIndex, annotationId, patch);
-  }, [provides, annotationId, pageIndex, obj, currentWidth]);
+      provides.updateAnnotation(pageIndex, annotationId, patch);
+    },
+    [provides, annotationId, pageIndex, obj, currentWidth],
+  );
 
-  const onOpacityChange = useCallback((opacity: number) => {
-    if (!provides?.updateAnnotation || !annotationId || pageIndex === undefined) return;
-    provides.updateAnnotation(pageIndex, annotationId, { opacity: opacity / 100 });
-  }, [provides, annotationId, pageIndex]);
+  const onOpacityChange = useCallback(
+    (opacity: number) => {
+      if (!provides?.updateAnnotation || !annotationId || pageIndex === undefined) return;
+      provides.updateAnnotation(pageIndex, annotationId, { opacity: opacity / 100 });
+    },
+    [provides, annotationId, pageIndex],
+  );
 
-  const onWidthChange = useCallback((width: number) => {
-    if (!provides?.updateAnnotation || !annotationId || pageIndex === undefined) return;
-    provides.updateAnnotation(pageIndex, annotationId, { strokeWidth: width });
-  }, [provides, annotationId, pageIndex]);
+  const onWidthChange = useCallback(
+    (width: number) => {
+      if (!provides?.updateAnnotation || !annotationId || pageIndex === undefined) return;
+      provides.updateAnnotation(pageIndex, annotationId, { strokeWidth: width });
+    },
+    [provides, annotationId, pageIndex],
+  );
 
-  const onPropertiesUpdate = useCallback((patch: Record<string, unknown>) => {
-    if (!provides?.updateAnnotation || !annotationId || pageIndex === undefined) return;
-    provides.updateAnnotation(pageIndex, annotationId, patch);
-  }, [provides, annotationId, pageIndex]);
+  const onPropertiesUpdate = useCallback(
+    (patch: Record<string, unknown>) => {
+      if (!provides?.updateAnnotation || !annotationId || pageIndex === undefined) return;
+      provides.updateAnnotation(pageIndex, annotationId, patch);
+    },
+    [provides, annotationId, pageIndex],
+  );
 
   const onGoToLink = useCallback(() => {
     if (!firstLinkTarget) return;
-    if (firstLinkTarget.type === 'uri') {
-      window.open(firstLinkTarget.uri, '_blank', 'noopener,noreferrer');
+    if (firstLinkTarget.type === "uri") {
+      window.open(firstLinkTarget.uri, "_blank", "noopener,noreferrer");
     } else {
       scrollActions.scrollToPage(firstLinkTarget.pageIndex + 1);
     }
   }, [firstLinkTarget, scrollActions]);
 
-  const onAddLink = useCallback((url: string) => {
-    const uri = url.trim();
-    if (!uri || !provides?.createAnnotation || pageIndex === undefined || !annotationId || !obj?.rect) return;
-    provides.createAnnotation(pageIndex, {
-      type: PdfAnnotationSubtype.LINK,
-      id: `link-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
-      pageIndex,
-      rect: obj.rect,
-      target: { type: 'action', action: { type: PdfActionType.URI, uri } },
-      inReplyToId: annotationId,
-      replyType: PdfAnnotationReplyType.Group,
-    });
-  }, [provides, pageIndex, annotationId, obj?.rect]);
+  const onAddLink = useCallback(
+    (url: string) => {
+      const uri = url.trim();
+      if (!uri || !provides?.createAnnotation || pageIndex === undefined || !annotationId || !obj?.rect) return;
+      provides.createAnnotation(pageIndex, {
+        type: PdfAnnotationSubtype.LINK,
+        id: `link-${Date.now()}-${Math.random().toString(36).slice(2, 9)}`,
+        pageIndex,
+        rect: obj.rect,
+        target: { type: "action", action: { type: PdfActionType.URI, uri } },
+        inReplyToId: annotationId,
+        replyType: PdfAnnotationReplyType.Group,
+      });
+    },
+    [provides, pageIndex, annotationId, obj?.rect],
+  );
 
   const onAddToSidebar = useCallback(() => {
     if (!provides?.updateAnnotation || !annotationId || pageIndex === undefined) return;
@@ -251,13 +270,16 @@ export function useAnnotationMenuHandlers({
   }, [provides, annotationId, pageIndex, obj, documentId, requestCommentFocus]);
 
   const onViewComment = useCallback(() => {
-    requestCommentFocus(documentId, pageIndex ?? 0, annotationId ?? '', hasCommentContent);
+    requestCommentFocus(documentId, pageIndex ?? 0, annotationId ?? "", hasCommentContent);
   }, [requestCommentFocus, documentId, pageIndex, annotationId, hasCommentContent]);
 
-  const onCommentColorChange = useCallback((color: string) => {
-    if (!provides?.updateAnnotation || !annotationId || pageIndex === undefined) return;
-    provides.updateAnnotation(pageIndex, annotationId, { strokeColor: color, color });
-  }, [provides, annotationId, pageIndex]);
+  const onCommentColorChange = useCallback(
+    (color: string) => {
+      if (!provides?.updateAnnotation || !annotationId || pageIndex === undefined) return;
+      provides.updateAnnotation(pageIndex, annotationId, { strokeColor: color, color });
+    },
+    [provides, annotationId, pageIndex],
+  );
 
   return {
     annotationType,
diff --git a/frontend/src/core/components/viewer/useStopReadAloudOnNavigation.ts b/frontend/src/core/components/viewer/useStopReadAloudOnNavigation.ts
index 5faa82964e..1de680f400 100644
--- a/frontend/src/core/components/viewer/useStopReadAloudOnNavigation.ts
+++ b/frontend/src/core/components/viewer/useStopReadAloudOnNavigation.ts
@@ -1,15 +1,12 @@
-import { useEffect, useRef } from 'react';
-import { useNavigationState } from '@app/contexts/NavigationContext';
-import { useViewer } from '@app/contexts/ViewerContext';
+import { useEffect, useRef } from "react";
+import { useNavigationState } from "@app/contexts/NavigationContext";
+import { useViewer } from "@app/contexts/ViewerContext";
 
 /**
  * Hook that automatically stops read-aloud when navigating away from the viewer.
  * Monitors: workbench changes and active file changes.
  */
-export function useStopReadAloudOnNavigation(
-  isReadingAloud: boolean,
-  onStop: () => void
-) {
+export function useStopReadAloudOnNavigation(isReadingAloud: boolean, onStop: () => void) {
   const { workbench } = useNavigationState();
   const viewer = useViewer();
 
@@ -46,7 +43,7 @@ export function useStopReadAloudOnNavigation(
       onStop();
     };
 
-    window.addEventListener('beforeunload', handleBeforeUnload);
-    return () => window.removeEventListener('beforeunload', handleBeforeUnload);
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => window.removeEventListener("beforeunload", handleBeforeUnload);
   }, [isReadingAloud, onStop]);
 }
diff --git a/frontend/src/core/components/viewer/useViewerReadAloud.ts b/frontend/src/core/components/viewer/useViewerReadAloud.ts
index cf8eb3ed31..400e81bab9 100644
--- a/frontend/src/core/components/viewer/useViewerReadAloud.ts
+++ b/frontend/src/core/components/viewer/useViewerReadAloud.ts
@@ -1,11 +1,11 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { computeReadAloudHighlightRect } from '@app/components/viewer/readAloudHighlight';
-import { useFileState } from '@app/contexts/FileContext';
-import { useViewer } from '@app/contexts/ViewerContext';
-import { useStopReadAloudOnNavigation } from '@app/components/viewer/useStopReadAloudOnNavigation';
-import { pdfWorkerManager } from '@app/services/pdfWorkerManager';
-import { StirlingFile } from '@app/types/fileContext';
-import { ZINDEX } from '@app/constants/zIndex';
+import { useCallback, useEffect, useRef, useState } from "react";
+import { computeReadAloudHighlightRect } from "@app/components/viewer/readAloudHighlight";
+import { useFileState } from "@app/contexts/FileContext";
+import { useViewer } from "@app/contexts/ViewerContext";
+import { useStopReadAloudOnNavigation } from "@app/components/viewer/useStopReadAloudOnNavigation";
+import { pdfWorkerManager } from "@app/services/pdfWorkerManager";
+import { StirlingFile } from "@app/types/fileContext";
+import { ZINDEX } from "@app/constants/zIndex";
 
 interface TextItemWithGeometry {
   str: string;
@@ -21,13 +21,13 @@ function isTextItem(value: unknown): value is {
   width: number;
   height: number;
 } {
-  if (!value || typeof value !== 'object') return false;
+  if (!value || typeof value !== "object") return false;
   const item = value as Record<string, unknown>;
   return (
-    typeof item.str === 'string' &&
+    typeof item.str === "string" &&
     Array.isArray(item.transform) &&
-    typeof item.width === 'number' &&
-    typeof item.height === 'number'
+    typeof item.width === "number" &&
+    typeof item.height === "number"
   );
 }
 
@@ -40,16 +40,16 @@ function createHighlightElement(item: TextItemWithGeometry, pageEl: HTMLElement)
   });
   if (!highlightRect) return null;
 
-  const highlight = document.createElement('div');
-  highlight.style.position = 'absolute';
+  const highlight = document.createElement("div");
+  highlight.style.position = "absolute";
   highlight.style.left = `${highlightRect.left}px`;
   highlight.style.top = `${highlightRect.top}px`;
   highlight.style.width = `${highlightRect.width}px`;
   highlight.style.height = `${highlightRect.height}px`;
-  highlight.style.backgroundColor = 'rgba(255, 193, 7, 0.6)';
-  highlight.style.pointerEvents = 'none';
+  highlight.style.backgroundColor = "rgba(255, 193, 7, 0.6)";
+  highlight.style.pointerEvents = "none";
   highlight.style.zIndex = String(ZINDEX.VIEWER_HIGHLIGHT);
-  highlight.style.borderRadius = '2px';
+  highlight.style.borderRadius = "2px";
   pageEl.appendChild(highlight);
 
   return highlight;
@@ -61,14 +61,14 @@ export function useViewerReadAloud(defaultLanguage?: string) {
 
   const [isReadingAloud, setIsReadingAloud] = useState(false);
   const [speechRate, setSpeechRate] = useState(1);
-  const [speechLanguage, setSpeechLanguage] = useState(defaultLanguage || 'en-US');
+  const [speechLanguage, setSpeechLanguage] = useState(defaultLanguage || "en-US");
   const [speechVoice, setSpeechVoice] = useState<SpeechSynthesisVoice | null>(null);
   const [supportedLanguageCodes, setSupportedLanguageCodes] = useState<Set<string>>(new Set());
 
   const utteranceRef = useRef<SpeechSynthesisUtterance | null>(null);
   const highlightedElementsRef = useRef<HTMLElement[]>([]);
   const textItemsRef = useRef<TextItemWithGeometry[]>([]);
-  const speechTextRef = useRef('');
+  const speechTextRef = useRef("");
   const speechWordsRef = useRef<string[]>([]);
   const speechCharIndexRef = useRef(0);
   const currentWordIndexRef = useRef(0);
@@ -78,8 +78,8 @@ export function useViewerReadAloud(defaultLanguage?: string) {
   const pageAdvanceTimeoutRef = useRef<number | null>(null);
   const currentFileRef = useRef<StirlingFile | null>(null);
   const totalPagesRef = useRef(0);
-  const speechRateRef = useRef(1);  // Keep track of current rate without recreating dependent functions
-  const speechLanguageRef = useRef(defaultLanguage || 'en-US');
+  const speechRateRef = useRef(1); // Keep track of current rate without recreating dependent functions
+  const speechLanguageRef = useRef(defaultLanguage || "en-US");
 
   // Cache parsed PDF document and page text items to avoid reparsing on every zoom/scroll
   const cachedPdfDocRef = useRef<Awaited<ReturnType<typeof pdfWorkerManager.createDocument>> | null>(null);
@@ -88,24 +88,24 @@ export function useViewerReadAloud(defaultLanguage?: string) {
 
   // Helper to find best voice for language
   const findVoiceForLanguage = useCallback((languageCode: string): SpeechSynthesisVoice | null => {
-    if (typeof window === 'undefined' || !window.speechSynthesis) return null;
+    if (typeof window === "undefined" || !window.speechSynthesis) return null;
 
     const voices = window.speechSynthesis.getVoices();
     if (!voices || voices.length === 0) return null;
 
     // Try exact match first
-    const exactMatch = voices.find(v => v.lang === languageCode);
+    const exactMatch = voices.find((v) => v.lang === languageCode);
     if (exactMatch) return exactMatch;
 
     // Try matching just the language part (e.g., 'es' from 'es-ES')
-    const baseLang = languageCode.split('-')[0];
-    const baseMatch = voices.find(v => v.lang.startsWith(baseLang));
+    const baseLang = languageCode.split("-")[0];
+    const baseMatch = voices.find((v) => v.lang.startsWith(baseLang));
     if (baseMatch) {
       return baseMatch;
     }
 
     // Fallback to any English voice if requested language not found
-    const englishMatch = voices.find(v => v.lang.startsWith('en'));
+    const englishMatch = voices.find((v) => v.lang.startsWith("en"));
     if (englishMatch) {
       return englishMatch;
     }
@@ -126,29 +126,29 @@ export function useViewerReadAloud(defaultLanguage?: string) {
 
   // Helper to get supported language codes from available voices
   const getSupportedLanguageCodes = useCallback((): Set<string> => {
-    if (typeof window === 'undefined' || !window.speechSynthesis) return new Set();
+    if (typeof window === "undefined" || !window.speechSynthesis) return new Set();
 
     const voices = window.speechSynthesis.getVoices();
     const supportedCodes = new Set<string>();
 
     // For each voice, add its language code and base language code
-    voices.forEach(voice => {
+    voices.forEach((voice) => {
       supportedCodes.add(voice.lang);
-      const baseLang = voice.lang.split('-')[0];
+      const baseLang = voice.lang.split("-")[0];
       supportedCodes.add(baseLang);
     });
 
     // Also add English as fallback
-    supportedCodes.add('en');
-    supportedCodes.add('en-GB');
-    supportedCodes.add('en-US');
+    supportedCodes.add("en");
+    supportedCodes.add("en-GB");
+    supportedCodes.add("en-US");
 
     return supportedCodes;
   }, []);
 
   // Wait for voices to load, then check if default language has a voice
   useEffect(() => {
-    if (typeof window === 'undefined' || !window.speechSynthesis) return;
+    if (typeof window === "undefined" || !window.speechSynthesis) return;
 
     const handleVoicesChanged = () => {
       const supportedCodes = getSupportedLanguageCodes();
@@ -166,9 +166,9 @@ export function useViewerReadAloud(defaultLanguage?: string) {
       setSpeechVoice(voice);
     } else {
       // Voices not loaded yet, listen for voiceschanged event
-      window.speechSynthesis.addEventListener('voiceschanged', handleVoicesChanged);
+      window.speechSynthesis.addEventListener("voiceschanged", handleVoicesChanged);
       return () => {
-        window.speechSynthesis.removeEventListener('voiceschanged', handleVoicesChanged);
+        window.speechSynthesis.removeEventListener("voiceschanged", handleVoicesChanged);
       };
     }
   }, [speechLanguage, findVoiceForLanguage, getSupportedLanguageCodes]);
@@ -189,7 +189,7 @@ export function useViewerReadAloud(defaultLanguage?: string) {
   }, []);
 
   const stopReadingAloud = useCallback(() => {
-    if (typeof window !== 'undefined' && window.speechSynthesis) {
+    if (typeof window !== "undefined" && window.speechSynthesis) {
       window.speechSynthesis.cancel();
     }
     if (pageAdvanceTimeoutRef.current !== null) {
@@ -206,285 +206,301 @@ export function useViewerReadAloud(defaultLanguage?: string) {
   // Stop reading when navigating away (workbench, file, or window change)
   useStopReadAloudOnNavigation(isReadingAloud, stopReadingAloud);
 
-  const highlightWord = useCallback((wordIndex: number, words: string[], pageNumber: number) => {
-    clearHighlights();
-    if (wordIndex < 0 || wordIndex >= words.length) return;
+  const highlightWord = useCallback(
+    (wordIndex: number, words: string[], pageNumber: number) => {
+      clearHighlights();
+      if (wordIndex < 0 || wordIndex >= words.length) return;
 
-    const wordToFind = words[wordIndex];
-    if (!wordToFind) return;
+      const wordToFind = words[wordIndex];
+      if (!wordToFind) return;
 
-    try {
-      let currentWordCount = 0;
-      const currentPageIndex = pageNumber - 1;
-      const pageEl = document.querySelector(`[data-page-index="${currentPageIndex}"]`) as HTMLElement | null;
-      if (!pageEl) return;
+      try {
+        let currentWordCount = 0;
+        const currentPageIndex = pageNumber - 1;
+        const pageEl = document.querySelector(`[data-page-index="${currentPageIndex}"]`) as HTMLElement | null;
+        if (!pageEl) return;
 
-      for (const item of textItemsRef.current) {
-        const itemText = item.str.trim();
-        if (!itemText) continue;
+        for (const item of textItemsRef.current) {
+          const itemText = item.str.trim();
+          if (!itemText) continue;
 
-        const subWords = itemText.split(/\s+/);
-        for (let i = 0; i < subWords.length; i++) {
-          if (currentWordCount === wordIndex && subWords[i].toLowerCase() === wordToFind.toLowerCase()) {
-            const highlight = createHighlightElement(item, pageEl);
-            if (highlight) {
-              highlightedElementsRef.current.push(highlight);
+          const subWords = itemText.split(/\s+/);
+          for (let i = 0; i < subWords.length; i++) {
+            if (currentWordCount === wordIndex && subWords[i].toLowerCase() === wordToFind.toLowerCase()) {
+              const highlight = createHighlightElement(item, pageEl);
+              if (highlight) {
+                highlightedElementsRef.current.push(highlight);
+              }
+              return;
             }
-            return;
+            currentWordCount++;
           }
-          currentWordCount++;
         }
+      } catch {
+        // Highlighting is best-effort only.
       }
-    } catch {
-      // Highlighting is best-effort only.
-    }
-  }, [clearHighlights]);
+    },
+    [clearHighlights],
+  );
 
-  const readPage = useCallback(async (
-    currentFile: StirlingFile | File,
-    pageNumber: number,
-    options?: {
-      preserveSpeechState?: boolean;
-      highlightWordIndex?: number;
-    }
-  ) => {
-    let pdfDoc: Awaited<ReturnType<typeof pdfWorkerManager.createDocument>> | null = null;
+  const readPage = useCallback(
+    async (
+      currentFile: StirlingFile | File,
+      pageNumber: number,
+      options?: {
+        preserveSpeechState?: boolean;
+        highlightWordIndex?: number;
+      },
+    ) => {
+      let pdfDoc: Awaited<ReturnType<typeof pdfWorkerManager.createDocument>> | null = null;
 
-    try {
-      const zoom = (viewer.getZoomState().zoomPercent || 100) / 100;
+      try {
+        const zoom = (viewer.getZoomState().zoomPercent || 100) / 100;
 
-      // If we have a cached document for the same file, reuse it instead of recreating
-      if (cachedPdfDocRef.current) {
-        pdfDoc = cachedPdfDocRef.current;
-      } else {
-        pdfDoc = await pdfWorkerManager.createDocument(await currentFile.arrayBuffer());
-        cachedPdfDocRef.current = pdfDoc;
-      }
+        // If we have a cached document for the same file, reuse it instead of recreating
+        if (cachedPdfDocRef.current) {
+          pdfDoc = cachedPdfDocRef.current;
+        } else {
+          pdfDoc = await pdfWorkerManager.createDocument(await currentFile.arrayBuffer());
+          cachedPdfDocRef.current = pdfDoc;
+        }
 
-      const page = await pdfDoc.getPage(pageNumber);
-      const textContent = await page.getTextContent();
-      // The highlight is rendered inside the page element, so we keep geometry in
-      // page-local coordinates and let the viewer's own rotation transform it.
-      const viewportTransform = page.getViewport({ scale: zoom }).transform;
+        const page = await pdfDoc.getPage(pageNumber);
+        const textContent = await page.getTextContent();
+        // The highlight is rendered inside the page element, so we keep geometry in
+        // page-local coordinates and let the viewer's own rotation transform it.
+        const viewportTransform = page.getViewport({ scale: zoom }).transform;
 
-      const textItems: TextItemWithGeometry[] = [];
-      for (const item of textContent.items) {
-        if (!isTextItem(item)) continue;
-        textItems.push({
-          ...item,
-          viewportTransform,
+        const textItems: TextItemWithGeometry[] = [];
+        for (const item of textContent.items) {
+          if (!isTextItem(item)) continue;
+          textItems.push({
+            ...item,
+            viewportTransform,
+          });
+        }
+
+        // Sort text items by visual position (top-to-bottom, then left-to-right)
+        // to preserve reading order instead of PDF internal order
+        const sortedItems = [...textItems].sort((a, b) => {
+          // transform array is [a, b, c, d, e, f] where e=x, f=y (translation components)
+          const yA = a.transform[5] ?? 0; // y position
+          const yB = b.transform[5] ?? 0;
+          const xA = a.transform[4] ?? 0; // x position
+          const xB = b.transform[4] ?? 0;
+
+          // Sort top-to-bottom (higher y first in PDF coordinates), then left-to-right
+          // 5px threshold for "same line" to group text on same horizontal line
+          if (Math.abs(yA - yB) > 5) {
+            return yB - yA; // Top to bottom
+          }
+          return xA - xB; // Left to right
         });
-      }
 
-      // Sort text items by visual position (top-to-bottom, then left-to-right)
-      // to preserve reading order instead of PDF internal order
-      const sortedItems = [...textItems].sort((a, b) => {
-        // transform array is [a, b, c, d, e, f] where e=x, f=y (translation components)
-        const yA = a.transform[5] ?? 0;  // y position
-        const yB = b.transform[5] ?? 0;
-        const xA = a.transform[4] ?? 0;  // x position
-        const xB = b.transform[4] ?? 0;
+        // Merge adjacent text items on same line, using PDF spaces as word boundaries
+        // This fixes PDFs where characters/syllables are individual text items
+        const mergedItems: TextItemWithGeometry[] = [];
+        const CHAR_MERGE_THRESHOLD = 5; // px - merge adjacent chars/syllables closer than this
 
-        // Sort top-to-bottom (higher y first in PDF coordinates), then left-to-right
-        // 5px threshold for "same line" to group text on same horizontal line
-        if (Math.abs(yA - yB) > 5) {
-          return yB - yA; // Top to bottom
-        }
-        return xA - xB; // Left to right
-      });
+        for (const item of sortedItems) {
+          const itemText = item.str;
+          const isSpace = itemText.trim() === "";
 
-      // Merge adjacent text items on same line, using PDF spaces as word boundaries
-      // This fixes PDFs where characters/syllables are individual text items
-      const mergedItems: TextItemWithGeometry[] = [];
-      const CHAR_MERGE_THRESHOLD = 5; // px - merge adjacent chars/syllables closer than this
-
-      for (const item of sortedItems) {
-        const itemText = item.str;
-        const isSpace = itemText.trim() === '';
-
-        // Spaces mark word boundaries - always push them separately
-        if (isSpace) {
-          mergedItems.push(item);
-          continue;
-        }
-
-        const lastItem = mergedItems[mergedItems.length - 1];
-
-        // Only merge if last item exists, is not a space, and items are on same line
-        if (lastItem && lastItem.str.trim()) {
-          const yDiff = Math.abs((lastItem.transform[5] ?? 0) - (item.transform[5] ?? 0));
-          const xGap = (item.transform[4] ?? 0) - ((lastItem.transform[4] ?? 0) + (lastItem.width ?? 0));
-
-          // Same line and very close horizontally?
-          if (yDiff < 5 && xGap < CHAR_MERGE_THRESHOLD) {
-            lastItem.str += itemText;
-            // Update width: add the new item's width plus any gap between them
-            lastItem.width = (lastItem.width ?? 0) + Math.max(0, xGap) + (item.width ?? 0);
+          // Spaces mark word boundaries - always push them separately
+          if (isSpace) {
+            mergedItems.push(item);
             continue;
           }
-        }
-        mergedItems.push({ ...item, str: itemText });
-      }
 
-      // Use merged items for both highlighting and caching
-      // This ensures word counting in highlightWord matches the spoken text order
-      textItemsRef.current = mergedItems;
-      cachedTextItemsRef.current = mergedItems;
-      cachedPageNumberRef.current = pageNumber;
+          const lastItem = mergedItems[mergedItems.length - 1];
 
-      const spokenText = mergedItems
-        .map((item) => item.str)
-        .join(' ')
-        .replace(/\s+/g, ' ')
-        .trim();
+          // Only merge if last item exists, is not a space, and items are on same line
+          if (lastItem && lastItem.str.trim()) {
+            const yDiff = Math.abs((lastItem.transform[5] ?? 0) - (item.transform[5] ?? 0));
+            const xGap = (item.transform[4] ?? 0) - ((lastItem.transform[4] ?? 0) + (lastItem.width ?? 0));
 
-      if (!spokenText) {
-        return null;
-      }
-
-      const words = spokenText.split(/\s+/).filter(Boolean);
-
-      if (!options?.preserveSpeechState) {
-        speechTextRef.current = spokenText;
-        speechWordsRef.current = words;
-        speechCharIndexRef.current = 0;
-        currentWordIndexRef.current = 0;
-      }
-
-      const highlightIndex = Math.max(0, Math.min(options?.highlightWordIndex ?? 0, Math.max(words.length - 1, 0)));
-      highlightWord(highlightIndex, words, pageNumber);
-      return { spokenText, words };
-    } catch (error) {
-      // Clear cache on error to avoid stale state
-      if (pdfDoc && pdfDoc === cachedPdfDocRef.current) {
-        cachedPdfDocRef.current = null;
-      }
-      throw error;
-    }
-  }, [highlightWord, viewer]);
-
-  const speakFromCharIndex = useCallback((
-    spokenText: string,
-    words: string[],
-    startCharIndex: number,
-    pageNumber: number,
-    rateOverride?: number,
-    languageOverride?: string,
-  ) => {
-    if (typeof window === 'undefined' || !window.speechSynthesis) {
-      return;
-    }
-
-    const clampedStart = Math.max(0, Math.min(startCharIndex, spokenText.length));
-    const remainingText = spokenText.slice(clampedStart).trimStart();
-    const trimmedDelta = spokenText.slice(clampedStart).length - remainingText.length;
-    const baseCharIndex = clampedStart + trimmedDelta;
-
-    if (!remainingText) {
-      clearHighlights();
-      setIsReadingAloud(false);
-      currentFileRef.current = null;
-      currentWordIndexRef.current = 0;
-      utteranceRef.current = null;
-      cleanupReadingSession();
-      return;
-    }
-
-    const utterance = new SpeechSynthesisUtterance(remainingText);
-    utterance.rate = rateOverride ?? speechRateRef.current;
-    const currentLang = languageOverride ?? speechLanguageRef.current;
-    utterance.lang = currentLang;
-
-    // Set specific voice if available
-    const voice = findVoiceForLanguage(currentLang);
-    if (voice) {
-      utterance.voice = voice;
-    }
-
-    utterance.onstart = () => setIsReadingAloud(true);
-    utterance.onend = () => {
-      utteranceRef.current = null;
-      if (restartingSpeechRef.current) {
-        return;
-      }
-      if (currentFileRef.current && pageNumber < totalPagesRef.current) {
-        clearHighlights();
-        speechCharIndexRef.current = 0;
-        currentWordIndexRef.current = 0;
-        currentPageNumberRef.current = pageNumber + 1;
-        viewer.scrollActions.scrollToPage(pageNumber + 1, 'smooth');
-        if (pageAdvanceTimeoutRef.current !== null) {
-          window.clearTimeout(pageAdvanceTimeoutRef.current);
-        }
-        pageAdvanceTimeoutRef.current = window.setTimeout(async () => {
-          pageAdvanceTimeoutRef.current = null;
-          try {
-            if (!currentFileRef.current) {
-              currentFileRef.current = null;
-              setIsReadingAloud(false);
-              cleanupReadingSession();
-              return;
+            // Same line and very close horizontally?
+            if (yDiff < 5 && xGap < CHAR_MERGE_THRESHOLD) {
+              lastItem.str += itemText;
+              // Update width: add the new item's width plus any gap between them
+              lastItem.width = (lastItem.width ?? 0) + Math.max(0, xGap) + (item.width ?? 0);
+              continue;
             }
-            const nextPageData = await readPage(currentFileRef.current, pageNumber + 1);
-            if (!nextPageData) {
-              currentFileRef.current = null;
-              setIsReadingAloud(false);
-              cleanupReadingSession();
-              return;
-            }
-            speakFromCharIndex(nextPageData.spokenText, nextPageData.words, 0, pageNumber + 1, speechRateRef.current, speechLanguageRef.current);
-          } catch (error) {
-            console.error('Read aloud page advance failed', error);
-            currentFileRef.current = null;
-            clearHighlights();
-            setIsReadingAloud(false);
-            cleanupReadingSession();
           }
-        }, 250);
-        return;
-      }
-      clearHighlights();
-      setIsReadingAloud(false);
-      speechCharIndexRef.current = spokenText.length;
-      currentFileRef.current = null;
-      currentWordIndexRef.current = 0;
-      cleanupReadingSession();
-    };
-    utterance.onerror = () => {
-      utteranceRef.current = null;
-      if (restartingSpeechRef.current) {
-        return;
-      }
-      restartingSpeechRef.current = false;
-      currentFileRef.current = null;
-      currentWordIndexRef.current = 0;
-      clearHighlights();
-      setIsReadingAloud(false);
-      cleanupReadingSession();
-    };
-    utterance.onboundary = (event: SpeechSynthesisEvent) => {
-      if (event.name !== 'word') return;
-
-      const absoluteCharIndex = baseCharIndex + event.charIndex;
-      speechCharIndexRef.current = absoluteCharIndex;
-
-      let charCount = 0;
-      for (let i = 0; i < words.length; i++) {
-        const wordStart = charCount;
-        const wordEnd = charCount + words[i].length;
-        if (absoluteCharIndex >= wordStart && absoluteCharIndex < wordEnd) {
-          currentWordIndexRef.current = i;
-          currentPageNumberRef.current = pageNumber;
-          highlightWord(i, words, pageNumber);
-          break;
+          mergedItems.push({ ...item, str: itemText });
         }
-        charCount = wordEnd + 1;
-      }
-    };
 
-    utteranceRef.current = utterance;
-    window.speechSynthesis.speak(utterance);
-  }, [clearHighlights, cleanupReadingSession, readPage, viewer.scrollActions]);
+        // Use merged items for both highlighting and caching
+        // This ensures word counting in highlightWord matches the spoken text order
+        textItemsRef.current = mergedItems;
+        cachedTextItemsRef.current = mergedItems;
+        cachedPageNumberRef.current = pageNumber;
+
+        const spokenText = mergedItems
+          .map((item) => item.str)
+          .join(" ")
+          .replace(/\s+/g, " ")
+          .trim();
+
+        if (!spokenText) {
+          return null;
+        }
+
+        const words = spokenText.split(/\s+/).filter(Boolean);
+
+        if (!options?.preserveSpeechState) {
+          speechTextRef.current = spokenText;
+          speechWordsRef.current = words;
+          speechCharIndexRef.current = 0;
+          currentWordIndexRef.current = 0;
+        }
+
+        const highlightIndex = Math.max(0, Math.min(options?.highlightWordIndex ?? 0, Math.max(words.length - 1, 0)));
+        highlightWord(highlightIndex, words, pageNumber);
+        return { spokenText, words };
+      } catch (error) {
+        // Clear cache on error to avoid stale state
+        if (pdfDoc && pdfDoc === cachedPdfDocRef.current) {
+          cachedPdfDocRef.current = null;
+        }
+        throw error;
+      }
+    },
+    [highlightWord, viewer],
+  );
+
+  const speakFromCharIndex = useCallback(
+    (
+      spokenText: string,
+      words: string[],
+      startCharIndex: number,
+      pageNumber: number,
+      rateOverride?: number,
+      languageOverride?: string,
+    ) => {
+      if (typeof window === "undefined" || !window.speechSynthesis) {
+        return;
+      }
+
+      const clampedStart = Math.max(0, Math.min(startCharIndex, spokenText.length));
+      const remainingText = spokenText.slice(clampedStart).trimStart();
+      const trimmedDelta = spokenText.slice(clampedStart).length - remainingText.length;
+      const baseCharIndex = clampedStart + trimmedDelta;
+
+      if (!remainingText) {
+        clearHighlights();
+        setIsReadingAloud(false);
+        currentFileRef.current = null;
+        currentWordIndexRef.current = 0;
+        utteranceRef.current = null;
+        cleanupReadingSession();
+        return;
+      }
+
+      const utterance = new SpeechSynthesisUtterance(remainingText);
+      utterance.rate = rateOverride ?? speechRateRef.current;
+      const currentLang = languageOverride ?? speechLanguageRef.current;
+      utterance.lang = currentLang;
+
+      // Set specific voice if available
+      const voice = findVoiceForLanguage(currentLang);
+      if (voice) {
+        utterance.voice = voice;
+      }
+
+      utterance.onstart = () => setIsReadingAloud(true);
+      utterance.onend = () => {
+        utteranceRef.current = null;
+        if (restartingSpeechRef.current) {
+          return;
+        }
+        if (currentFileRef.current && pageNumber < totalPagesRef.current) {
+          clearHighlights();
+          speechCharIndexRef.current = 0;
+          currentWordIndexRef.current = 0;
+          currentPageNumberRef.current = pageNumber + 1;
+          viewer.scrollActions.scrollToPage(pageNumber + 1, "smooth");
+          if (pageAdvanceTimeoutRef.current !== null) {
+            window.clearTimeout(pageAdvanceTimeoutRef.current);
+          }
+          pageAdvanceTimeoutRef.current = window.setTimeout(async () => {
+            pageAdvanceTimeoutRef.current = null;
+            try {
+              if (!currentFileRef.current) {
+                currentFileRef.current = null;
+                setIsReadingAloud(false);
+                cleanupReadingSession();
+                return;
+              }
+              const nextPageData = await readPage(currentFileRef.current, pageNumber + 1);
+              if (!nextPageData) {
+                currentFileRef.current = null;
+                setIsReadingAloud(false);
+                cleanupReadingSession();
+                return;
+              }
+              speakFromCharIndex(
+                nextPageData.spokenText,
+                nextPageData.words,
+                0,
+                pageNumber + 1,
+                speechRateRef.current,
+                speechLanguageRef.current,
+              );
+            } catch (error) {
+              console.error("Read aloud page advance failed", error);
+              currentFileRef.current = null;
+              clearHighlights();
+              setIsReadingAloud(false);
+              cleanupReadingSession();
+            }
+          }, 250);
+          return;
+        }
+        clearHighlights();
+        setIsReadingAloud(false);
+        speechCharIndexRef.current = spokenText.length;
+        currentFileRef.current = null;
+        currentWordIndexRef.current = 0;
+        cleanupReadingSession();
+      };
+      utterance.onerror = () => {
+        utteranceRef.current = null;
+        if (restartingSpeechRef.current) {
+          return;
+        }
+        restartingSpeechRef.current = false;
+        currentFileRef.current = null;
+        currentWordIndexRef.current = 0;
+        clearHighlights();
+        setIsReadingAloud(false);
+        cleanupReadingSession();
+      };
+      utterance.onboundary = (event: SpeechSynthesisEvent) => {
+        if (event.name !== "word") return;
+
+        const absoluteCharIndex = baseCharIndex + event.charIndex;
+        speechCharIndexRef.current = absoluteCharIndex;
+
+        let charCount = 0;
+        for (let i = 0; i < words.length; i++) {
+          const wordStart = charCount;
+          const wordEnd = charCount + words[i].length;
+          if (absoluteCharIndex >= wordStart && absoluteCharIndex < wordEnd) {
+            currentWordIndexRef.current = i;
+            currentPageNumberRef.current = pageNumber;
+            highlightWord(i, words, pageNumber);
+            break;
+          }
+          charCount = wordEnd + 1;
+        }
+      };
+
+      utteranceRef.current = utterance;
+      window.speechSynthesis.speak(utterance);
+    },
+    [clearHighlights, cleanupReadingSession, readPage, viewer.scrollActions],
+  );
 
   const refreshActiveHighlight = useCallback(() => {
     if (!isReadingAloud || !currentFileRef.current || !cachedTextItemsRef.current) {
@@ -501,7 +517,7 @@ export function useViewerReadAloud(defaultLanguage?: string) {
   }, [isReadingAloud, highlightWord]);
 
   const handleReadAloud = useCallback(async () => {
-    if (typeof window === 'undefined' || !window.speechSynthesis) {
+    if (typeof window === "undefined" || !window.speechSynthesis) {
       return;
     }
 
@@ -540,12 +556,19 @@ export function useViewerReadAloud(defaultLanguage?: string) {
         }
 
         window.speechSynthesis.cancel();
-        speakFromCharIndex(pageData.spokenText, pageData.words, 0, currentPage, speechRateRef.current, speechLanguageRef.current);
+        speakFromCharIndex(
+          pageData.spokenText,
+          pageData.words,
+          0,
+          currentPage,
+          speechRateRef.current,
+          speechLanguageRef.current,
+        );
       } finally {
         // readPage handles pdf worker cleanup
       }
     } catch (error) {
-      console.error('Read aloud failed', error);
+      console.error("Read aloud failed", error);
       currentFileRef.current = null;
       clearHighlights();
       setIsReadingAloud(false);
@@ -553,36 +576,45 @@ export function useViewerReadAloud(defaultLanguage?: string) {
     }
   }, [clearHighlights, cleanupReadingSession, highlightWord, isReadingAloud, selectors, speakFromCharIndex, viewer]);
 
-  const handleSpeechRateChange = useCallback((nextRate: number) => {
-    setSpeechRate(nextRate);
+  const handleSpeechRateChange = useCallback(
+    (nextRate: number) => {
+      setSpeechRate(nextRate);
 
-    if (!isReadingAloud || !utteranceRef.current || !speechTextRef.current || typeof window === 'undefined' || !window.speechSynthesis) {
-      return;
-    }
-
-    restartingSpeechRef.current = true;
-    setIsReadingAloud(true);
-    window.speechSynthesis.cancel();
-    utteranceRef.current = null;
-    if (restartTimeoutRef.current !== null) {
-      window.clearTimeout(restartTimeoutRef.current);
-    }
-    restartTimeoutRef.current = window.setTimeout(() => {
-      restartTimeoutRef.current = null;
-      if (!restartingSpeechRef.current) {
+      if (
+        !isReadingAloud ||
+        !utteranceRef.current ||
+        !speechTextRef.current ||
+        typeof window === "undefined" ||
+        !window.speechSynthesis
+      ) {
         return;
       }
-      restartingSpeechRef.current = false;
-      speakFromCharIndex(
-        speechTextRef.current,
-        speechWordsRef.current,
-        speechCharIndexRef.current,
-        currentPageNumberRef.current,
-        nextRate,
-        speechLanguageRef.current
-      );
-    }, 80);
-  }, [isReadingAloud, speakFromCharIndex, viewer]);
+
+      restartingSpeechRef.current = true;
+      setIsReadingAloud(true);
+      window.speechSynthesis.cancel();
+      utteranceRef.current = null;
+      if (restartTimeoutRef.current !== null) {
+        window.clearTimeout(restartTimeoutRef.current);
+      }
+      restartTimeoutRef.current = window.setTimeout(() => {
+        restartTimeoutRef.current = null;
+        if (!restartingSpeechRef.current) {
+          return;
+        }
+        restartingSpeechRef.current = false;
+        speakFromCharIndex(
+          speechTextRef.current,
+          speechWordsRef.current,
+          speechCharIndexRef.current,
+          currentPageNumberRef.current,
+          nextRate,
+          speechLanguageRef.current,
+        );
+      }, 80);
+    },
+    [isReadingAloud, speakFromCharIndex, viewer],
+  );
 
   useEffect(() => {
     return viewer.registerImmediateZoomUpdate(() => {
@@ -608,7 +640,7 @@ export function useViewerReadAloud(defaultLanguage?: string) {
       if (pageAdvanceTimeoutRef.current !== null) {
         window.clearTimeout(pageAdvanceTimeoutRef.current);
       }
-      if (typeof window !== 'undefined' && window.speechSynthesis) {
+      if (typeof window !== "undefined" && window.speechSynthesis) {
         window.speechSynthesis.cancel();
       }
       restartingSpeechRef.current = false;
@@ -620,39 +652,48 @@ export function useViewerReadAloud(defaultLanguage?: string) {
     };
   }, [clearHighlights, cleanupReadingSession]);
 
-  const handleSpeechLanguageChange = useCallback((nextLanguage: string) => {
-    setSpeechLanguage(nextLanguage);
-    speechLanguageRef.current = nextLanguage;
-    const voice = findVoiceForLanguage(nextLanguage);
-    setSpeechVoice(voice);
+  const handleSpeechLanguageChange = useCallback(
+    (nextLanguage: string) => {
+      setSpeechLanguage(nextLanguage);
+      speechLanguageRef.current = nextLanguage;
+      const voice = findVoiceForLanguage(nextLanguage);
+      setSpeechVoice(voice);
 
-    if (!isReadingAloud || !utteranceRef.current || !speechTextRef.current || typeof window === 'undefined' || !window.speechSynthesis) {
-      return;
-    }
-
-    restartingSpeechRef.current = true;
-    setIsReadingAloud(true);
-    window.speechSynthesis.cancel();
-    utteranceRef.current = null;
-    if (restartTimeoutRef.current !== null) {
-      window.clearTimeout(restartTimeoutRef.current);
-    }
-    restartTimeoutRef.current = window.setTimeout(() => {
-      restartTimeoutRef.current = null;
-      if (!restartingSpeechRef.current) {
+      if (
+        !isReadingAloud ||
+        !utteranceRef.current ||
+        !speechTextRef.current ||
+        typeof window === "undefined" ||
+        !window.speechSynthesis
+      ) {
         return;
       }
-      restartingSpeechRef.current = false;
-      speakFromCharIndex(
-        speechTextRef.current,
-        speechWordsRef.current,
-        speechCharIndexRef.current,
-        currentPageNumberRef.current,
-        speechRateRef.current,
-        nextLanguage
-      );
-    }, 80);
-  }, [isReadingAloud, speakFromCharIndex]);
+
+      restartingSpeechRef.current = true;
+      setIsReadingAloud(true);
+      window.speechSynthesis.cancel();
+      utteranceRef.current = null;
+      if (restartTimeoutRef.current !== null) {
+        window.clearTimeout(restartTimeoutRef.current);
+      }
+      restartTimeoutRef.current = window.setTimeout(() => {
+        restartTimeoutRef.current = null;
+        if (!restartingSpeechRef.current) {
+          return;
+        }
+        restartingSpeechRef.current = false;
+        speakFromCharIndex(
+          speechTextRef.current,
+          speechWordsRef.current,
+          speechCharIndexRef.current,
+          currentPageNumberRef.current,
+          speechRateRef.current,
+          nextLanguage,
+        );
+      }, 80);
+    },
+    [isReadingAloud, speakFromCharIndex],
+  );
 
   return {
     isReadingAloud,
diff --git a/frontend/src/core/components/viewer/useViewerRightRailButtons.tsx b/frontend/src/core/components/viewer/useViewerRightRailButtons.tsx
index 290963f5b2..a1b4796044 100644
--- a/frontend/src/core/components/viewer/useViewerRightRailButtons.tsx
+++ b/frontend/src/core/components/viewer/useViewerRightRailButtons.tsx
@@ -1,33 +1,40 @@
-import { useMemo, useState, useEffect, useCallback } from 'react';
-import { ActionIcon, Slider, Popover, Select } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { supportedLanguages } from '@app/i18n';
-import { useViewer } from '@app/contexts/ViewerContext';
-import { useRightRailButtons, RightRailButtonWithAction } from '@app/hooks/useRightRailButtons';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { Tooltip } from '@app/components/shared/Tooltip';
-import { SearchInterface } from '@app/components/viewer/SearchInterface';
-import ViewerAnnotationControls from '@app/components/shared/rightRail/ViewerAnnotationControls';
-import { useSidebarContext } from '@app/contexts/SidebarContext';
-import { useRightRailTooltipSide } from '@app/hooks/useRightRailTooltipSide';
-import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
-import { useNavigationState, useNavigationGuard } from '@app/contexts/NavigationContext';
-import { BASE_PATH, withBasePath } from '@app/constants/app';
-import { useRedaction, useRedactionMode } from '@app/contexts/RedactionContext';
-import TextFieldsIcon from '@mui/icons-material/TextFields';
-import StraightenIcon from '@mui/icons-material/Straighten';
-import LayersIcon from '@mui/icons-material/Layers';
-import VolumeUpIcon from '@mui/icons-material/VolumeUp';
-import StopIcon from '@mui/icons-material/Stop';
-import { useViewerReadAloud } from '@app/components/viewer/useViewerReadAloud';
+import { useMemo, useState, useEffect, useCallback } from "react";
+import { ActionIcon, Slider, Popover, Select } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { supportedLanguages } from "@app/i18n";
+import { useViewer } from "@app/contexts/ViewerContext";
+import { useRightRailButtons, RightRailButtonWithAction } from "@app/hooks/useRightRailButtons";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { Tooltip } from "@app/components/shared/Tooltip";
+import { SearchInterface } from "@app/components/viewer/SearchInterface";
+import ViewerAnnotationControls from "@app/components/shared/rightRail/ViewerAnnotationControls";
+import { useSidebarContext } from "@app/contexts/SidebarContext";
+import { useRightRailTooltipSide } from "@app/hooks/useRightRailTooltipSide";
+import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
+import { useNavigationState, useNavigationGuard } from "@app/contexts/NavigationContext";
+import { BASE_PATH, withBasePath } from "@app/constants/app";
+import { useRedaction, useRedactionMode } from "@app/contexts/RedactionContext";
+import TextFieldsIcon from "@mui/icons-material/TextFields";
+import StraightenIcon from "@mui/icons-material/Straighten";
+import LayersIcon from "@mui/icons-material/Layers";
+import VolumeUpIcon from "@mui/icons-material/VolumeUp";
+import StopIcon from "@mui/icons-material/Stop";
+import { useViewerReadAloud } from "@app/components/viewer/useViewerReadAloud";
 
-export function useViewerRightRailButtons(
-  isRulerActive?: boolean,
-  setIsRulerActive?: (v: boolean) => void,
-) {
+export function useViewerRightRailButtons(isRulerActive?: boolean, setIsRulerActive?: (v: boolean) => void) {
   const { t, i18n } = useTranslation();
   const viewer = useViewer();
-  const { isThumbnailSidebarVisible, isBookmarkSidebarVisible, isAttachmentSidebarVisible, isLayerSidebarVisible, hasLayers, isCommentsSidebarVisible, toggleCommentsSidebar, isSearchInterfaceVisible, registerImmediatePanUpdate } = viewer;
+  const {
+    isThumbnailSidebarVisible,
+    isBookmarkSidebarVisible,
+    isAttachmentSidebarVisible,
+    isLayerSidebarVisible,
+    hasLayers,
+    isCommentsSidebarVisible,
+    toggleCommentsSidebar,
+    isSearchInterfaceVisible,
+    registerImmediatePanUpdate,
+  } = viewer;
   const [isPanning, setIsPanning] = useState<boolean>(() => viewer.getPanState()?.isPanning ?? false);
   const { sidebarRefs } = useSidebarContext();
   const { position: tooltipPosition } = useRightRailTooltipSide(sidebarRefs, 12);
@@ -36,9 +43,16 @@ export function useViewerRightRailButtons(
   const { requestNavigation } = useNavigationGuard();
   const { redactionsApplied, activeType: redactionActiveType } = useRedaction();
   const { pendingCount } = useRedactionMode();
-  const { isReadingAloud, speechRate, speechLanguage, speechVoice, supportedLanguageCodes, handleReadAloud, handleSpeechRateChange, handleSpeechLanguageChange } = useViewerReadAloud(
-    i18n.language || 'en-US'
-  );
+  const {
+    isReadingAloud,
+    speechRate,
+    speechLanguage,
+    speechVoice,
+    supportedLanguageCodes,
+    handleReadAloud,
+    handleSpeechRateChange,
+    handleSpeechLanguageChange,
+  } = useViewerReadAloud(i18n.language || "en-US");
 
   useEffect(() => {
     return registerImmediatePanUpdate((newIsPanning) => {
@@ -48,20 +62,20 @@ export function useViewerRightRailButtons(
 
   const stripBasePath = useCallback((path: string) => {
     if (BASE_PATH && path.startsWith(BASE_PATH)) {
-      return path.slice(BASE_PATH.length) || '/';
+      return path.slice(BASE_PATH.length) || "/";
     }
     return path;
   }, []);
 
   const isAnnotationsPath = useCallback(() => {
     const cleanPath = stripBasePath(window.location.pathname).toLowerCase();
-    return cleanPath === '/annotations' || cleanPath.endsWith('/annotations');
+    return cleanPath === "/annotations" || cleanPath.endsWith("/annotations");
   }, [stripBasePath]);
 
   const [isAnnotationsActive, setIsAnnotationsActive] = useState<boolean>(() => isAnnotationsPath());
 
   useEffect(() => {
-    if (selectedTool === 'annotate') {
+    if (selectedTool === "annotate") {
       setIsAnnotationsActive(true);
     } else if (selectedTool) {
       setIsAnnotationsActive(false);
@@ -72,38 +86,44 @@ export function useViewerRightRailButtons(
 
   useEffect(() => {
     const handlePopState = () => setIsAnnotationsActive(isAnnotationsPath());
-    window.addEventListener('popstate', handlePopState);
-    return () => window.removeEventListener('popstate', handlePopState);
+    window.addEventListener("popstate", handlePopState);
+    return () => window.removeEventListener("popstate", handlePopState);
   }, [isAnnotationsPath]);
 
-  const searchLabel = t('rightRail.search', 'Search PDF');
-  const panLabel = t('rightRail.panMode', 'Pan Mode');
-  const applyRedactionsLabel = t('rightRail.applyRedactionsFirst', 'Apply redactions first');
-  const rotateLeftLabel = t('rightRail.rotateLeft', 'Rotate Left');
-  const rotateRightLabel = t('rightRail.rotateRight', 'Rotate Right');
-  const sidebarLabel = t('rightRail.toggleSidebar', 'Toggle Sidebar');
-  const bookmarkLabel = t('rightRail.toggleBookmarks', 'Toggle Bookmarks');
-  const attachmentLabel = t('rightRail.toggleAttachments', 'Toggle Attachments');
-  const layersLabel = t('rightRail.toggleLayers', 'Toggle Layers');
-  const commentsLabel = t('rightRail.toggleComments', 'Comments');
-  const printLabel = t('rightRail.print', 'Print PDF');
-  const annotationsLabel = t('rightRail.annotations', 'Annotations');
-  const formFillLabel = t('rightRail.formFill', 'Fill Form');
-  const rulerLabel = t('rightRail.ruler', 'Ruler / Measure');
-  const readAloudLabel = t('rightRail.readAloud', 'Read Aloud');
-  const readAloudSpeedLabel = t('rightRail.readAloudSpeed', 'Speed');
+  const searchLabel = t("rightRail.search", "Search PDF");
+  const panLabel = t("rightRail.panMode", "Pan Mode");
+  const applyRedactionsLabel = t("rightRail.applyRedactionsFirst", "Apply redactions first");
+  const rotateLeftLabel = t("rightRail.rotateLeft", "Rotate Left");
+  const rotateRightLabel = t("rightRail.rotateRight", "Rotate Right");
+  const sidebarLabel = t("rightRail.toggleSidebar", "Toggle Sidebar");
+  const bookmarkLabel = t("rightRail.toggleBookmarks", "Toggle Bookmarks");
+  const attachmentLabel = t("rightRail.toggleAttachments", "Toggle Attachments");
+  const layersLabel = t("rightRail.toggleLayers", "Toggle Layers");
+  const commentsLabel = t("rightRail.toggleComments", "Comments");
+  const printLabel = t("rightRail.print", "Print PDF");
+  const annotationsLabel = t("rightRail.annotations", "Annotations");
+  const formFillLabel = t("rightRail.formFill", "Fill Form");
+  const rulerLabel = t("rightRail.ruler", "Ruler / Measure");
+  const readAloudLabel = t("rightRail.readAloud", "Read Aloud");
+  const readAloudSpeedLabel = t("rightRail.readAloudSpeed", "Speed");
 
-  const isFormFillActive = (selectedTool as string) === 'formFill';
+  const isFormFillActive = (selectedTool as string) === "formFill";
 
   // Filter languages based on available voices
-  const filteredLanguages = useMemo(() =>
-    Object.entries(supportedLanguages)
-      .filter(([code]) => supportedLanguageCodes.size === 0 || supportedLanguageCodes.has(code) || supportedLanguageCodes.has(code.split('-')[0]))
-      .map(([code, label]) => ({
-        value: code,
-        label: label,
-      })),
-    [supportedLanguageCodes]
+  const filteredLanguages = useMemo(
+    () =>
+      Object.entries(supportedLanguages)
+        .filter(
+          ([code]) =>
+            supportedLanguageCodes.size === 0 ||
+            supportedLanguageCodes.has(code) ||
+            supportedLanguageCodes.has(code.split("-")[0]),
+        )
+        .map(([code, label]) => ({
+          value: code,
+          label: label,
+        })),
+    [supportedLanguageCodes],
   );
 
   const shouldShowLanguageSelector = supportedLanguageCodes.size === 0 || filteredLanguages.length > 1;
@@ -111,10 +131,10 @@ export function useViewerRightRailButtons(
   const viewerButtons = useMemo<RightRailButtonWithAction[]>(() => {
     const buttons: RightRailButtonWithAction[] = [
       {
-        id: 'viewer-search',
+        id: "viewer-search",
         tooltip: searchLabel,
         ariaLabel: searchLabel,
-        section: 'top' as const,
+        section: "top" as const,
         order: 10,
         render: ({ disabled }) => (
           <Tooltip content={searchLabel} position={tooltipPosition} offset={12} arrow portalTarget={document.body}>
@@ -127,7 +147,7 @@ export function useViewerRightRailButtons(
               onClose={viewer.searchInterfaceActions.close}
             >
               <Popover.Target>
-                <div style={{ display: 'inline-flex' }}>
+                <div style={{ display: "inline-flex" }}>
                   <ActionIcon
                     variant="subtle"
                     radius="md"
@@ -141,34 +161,34 @@ export function useViewerRightRailButtons(
                 </div>
               </Popover.Target>
               <Popover.Dropdown>
-                <div style={{ minWidth: '20rem' }}>
+                <div style={{ minWidth: "20rem" }}>
                   <SearchInterface visible={isSearchInterfaceVisible} onClose={viewer.searchInterfaceActions.close} />
                 </div>
               </Popover.Dropdown>
             </Popover>
           </Tooltip>
-        )
+        ),
       },
       {
-        id: 'viewer-pan-mode',
+        id: "viewer-pan-mode",
         icon: <LocalIcon icon="pan-tool-rounded" width="1.5rem" height="1.5rem" />,
-        tooltip: (!isPanning && pendingCount > 0 && redactionActiveType !== null) ? applyRedactionsLabel : panLabel,
-        ariaLabel: (!isPanning && pendingCount > 0 && redactionActiveType !== null) ? applyRedactionsLabel : panLabel,
-        section: 'top' as const,
+        tooltip: !isPanning && pendingCount > 0 && redactionActiveType !== null ? applyRedactionsLabel : panLabel,
+        ariaLabel: !isPanning && pendingCount > 0 && redactionActiveType !== null ? applyRedactionsLabel : panLabel,
+        section: "top" as const,
         order: 20,
         active: isPanning,
         disabled: !isPanning && pendingCount > 0 && redactionActiveType !== null,
         onClick: () => {
           viewer.panActions.togglePan();
-          setIsPanning(prev => !prev);
+          setIsPanning((prev) => !prev);
         },
       },
       {
-        id: 'viewer-ruler',
-        icon: <StraightenIcon sx={{ fontSize: '1.5rem' }} />,
+        id: "viewer-ruler",
+        icon: <StraightenIcon sx={{ fontSize: "1.5rem" }} />,
         tooltip: rulerLabel,
         ariaLabel: rulerLabel,
-        section: 'top' as const,
+        section: "top" as const,
         order: 25,
         active: Boolean(isRulerActive),
         onClick: () => {
@@ -181,103 +201,107 @@ export function useViewerRightRailButtons(
         },
       },
       {
-        id: 'viewer-rotate-left',
+        id: "viewer-rotate-left",
         icon: <LocalIcon icon="rotate-left" width="1.5rem" height="1.5rem" />,
         tooltip: rotateLeftLabel,
         ariaLabel: rotateLeftLabel,
-        section: 'top' as const,
+        section: "top" as const,
         order: 30,
         onClick: () => {
           viewer.rotationActions.rotateBackward();
-        }
+        },
       },
       {
-        id: 'viewer-rotate-right',
+        id: "viewer-rotate-right",
         icon: <LocalIcon icon="rotate-right" width="1.5rem" height="1.5rem" />,
         tooltip: rotateRightLabel,
         ariaLabel: rotateRightLabel,
-        section: 'top' as const,
+        section: "top" as const,
         order: 40,
         onClick: () => {
           viewer.rotationActions.rotateForward();
-        }
+        },
       },
       {
-        id: 'viewer-toggle-sidebar',
+        id: "viewer-toggle-sidebar",
         icon: <LocalIcon icon="view-list" width="1.5rem" height="1.5rem" />,
         tooltip: sidebarLabel,
         ariaLabel: sidebarLabel,
-        section: 'top' as const,
+        section: "top" as const,
         order: 50,
         active: isThumbnailSidebarVisible,
         onClick: () => {
           viewer.toggleThumbnailSidebar();
-        }
+        },
       },
       {
-        id: 'viewer-toggle-bookmarks',
+        id: "viewer-toggle-bookmarks",
         icon: <LocalIcon icon="bookmark-add-rounded" width="1.5rem" height="1.5rem" />,
         tooltip: bookmarkLabel,
         ariaLabel: bookmarkLabel,
-        section: 'top' as const,
+        section: "top" as const,
         order: 55,
         active: isBookmarkSidebarVisible,
         onClick: () => {
           viewer.toggleBookmarkSidebar();
-        }
+        },
       },
       {
-        id: 'viewer-toggle-attachments',
+        id: "viewer-toggle-attachments",
         icon: <LocalIcon icon="attachment-rounded" width="1.5rem" height="1.5rem" />,
         tooltip: attachmentLabel,
         ariaLabel: attachmentLabel,
-        section: 'top' as const,
+        section: "top" as const,
         order: 56,
         active: isAttachmentSidebarVisible,
         onClick: () => {
           viewer.toggleAttachmentSidebar();
-        }
+        },
       },
-      ...(hasLayers ? [{
-        id: 'viewer-toggle-layers',
-        icon: <LayersIcon sx={{ fontSize: '1.5rem' }} />,
-        tooltip: layersLabel,
-        ariaLabel: layersLabel,
-        section: 'top' as const,
-        order: 56.3,
-        active: isLayerSidebarVisible,
-        onClick: () => {
-          viewer.toggleLayerSidebar();
-        }
-      }] : []),
+      ...(hasLayers
+        ? [
+            {
+              id: "viewer-toggle-layers",
+              icon: <LayersIcon sx={{ fontSize: "1.5rem" }} />,
+              tooltip: layersLabel,
+              ariaLabel: layersLabel,
+              section: "top" as const,
+              order: 56.3,
+              active: isLayerSidebarVisible,
+              onClick: () => {
+                viewer.toggleLayerSidebar();
+              },
+            },
+          ]
+        : []),
       {
-        id: 'viewer-toggle-comments',
+        id: "viewer-toggle-comments",
         icon: <LocalIcon icon="comment" width="1.5rem" height="1.5rem" />,
         tooltip: commentsLabel,
         ariaLabel: commentsLabel,
-        section: 'top' as const,
+        section: "top" as const,
         order: 56.5,
         active: isCommentsSidebarVisible,
         onClick: () => {
           toggleCommentsSidebar();
-        }
+        },
       },
       {
-        id: 'viewer-print',
+        id: "viewer-print",
         icon: <LocalIcon icon="print" width="1.5rem" height="1.5rem" />,
         tooltip: printLabel,
         ariaLabel: printLabel,
-        section: 'top' as const,
+        section: "top" as const,
         order: 57,
         onClick: () => {
           viewer.printActions.print();
-        }
+        },
       },
       {
-        id: 'viewer-read-aloud',
+        id: "viewer-read-aloud",
         tooltip: readAloudLabel,
         ariaLabel: readAloudLabel,
-        section: 'top' as const,
+        section: "top" as const,
         order: 57,
         active: isReadingAloud,
         render: ({ disabled }) => (
@@ -291,25 +315,25 @@ export function useViewerRightRailButtons(
             withinPortal
           >
             <Popover.Target>
-              <div style={{ display: 'inline-flex' }}>
+              <div style={{ display: "inline-flex" }}>
                 <Tooltip content={readAloudLabel} position={tooltipPosition} offset={12} arrow portalTarget={document.body}>
                   <ActionIcon
-                    variant={isReadingAloud ? 'filled' : 'subtle'}
+                    variant={isReadingAloud ? "filled" : "subtle"}
                     radius="md"
                     className="right-rail-icon"
-                    disabled={disabled || typeof window === 'undefined' || !window.speechSynthesis}
+                    disabled={disabled || typeof window === "undefined" || !window.speechSynthesis}
                     aria-label={readAloudLabel}
                     onClick={handleReadAloud}
-                    color={isReadingAloud ? 'blue' : undefined}
+                    color={isReadingAloud ? "blue" : undefined}
                   >
-                    {isReadingAloud ? <StopIcon sx={{ fontSize: '1.5rem' }} /> : <VolumeUpIcon sx={{ fontSize: '1.5rem' }} />}
+                    {isReadingAloud ? <StopIcon sx={{ fontSize: "1.5rem" }} /> : <VolumeUpIcon sx={{ fontSize: "1.5rem" }} />}
                   </ActionIcon>
                 </Tooltip>
               </div>
             </Popover.Target>
             <Popover.Dropdown>
-              <div style={{ width: '16rem', padding: '0.5rem' }}>
-                <div style={{ fontSize: '0.75rem', marginBottom: '0.5rem', textAlign: 'center' }}>
+              <div style={{ width: "16rem", padding: "0.5rem" }}>
+                <div style={{ fontSize: "0.75rem", marginBottom: "0.5rem", textAlign: "center" }}>
                   {readAloudSpeedLabel}: {speechRate.toFixed(1)}x
                 </div>
                 <Slider
@@ -319,19 +343,19 @@ export function useViewerRightRailButtons(
                   max={2}
                   step={0.1}
                   marks={[
-                    { value: 0.5, label: '0.5x' },
-                    { value: 1, label: '1x' },
-                    { value: 2, label: '2x' },
+                    { value: 0.5, label: "0.5x" },
+                    { value: 1, label: "1x" },
+                    { value: 2, label: "2x" },
                   ]}
                   styles={{
-                    markLabel: { fontSize: '0.6rem' },
+                    markLabel: { fontSize: "0.6rem" },
                   }}
                   mb="md"
                 />
                 {shouldShowLanguageSelector && (
                   <Select
-                    label={t('rightRail.readAloudLanguage', 'Language')}
-                    placeholder={t('rightRail.selectLanguage', 'Select language')}
+                    label={t("rightRail.readAloudLanguage", "Language")}
+                    placeholder={t("rightRail.selectLanguage", "Select language")}
                     value={speechLanguage}
                     onChange={(value) => {
                       if (value) {
@@ -347,19 +371,19 @@ export function useViewerRightRailButtons(
               </div>
             </Popover.Dropdown>
           </Popover>
-        )
+        ),
       },
       {
-        id: 'viewer-annotations',
+        id: "viewer-annotations",
         tooltip: annotationsLabel,
         ariaLabel: annotationsLabel,
-        section: 'top' as const,
+        section: "top" as const,
         order: 58,
         active: isAnnotationsActive,
         render: ({ disabled }) => (
           <Tooltip content={annotationsLabel} position={tooltipPosition} offset={12} arrow portalTarget={document.body}>
             <ActionIcon
-              variant={isAnnotationsActive ? 'filled' : 'subtle'}
+              variant={isAnnotationsActive ? "filled" : "subtle"}
               radius="md"
               className="right-rail-icon"
               onClick={() => {
@@ -368,14 +392,14 @@ export function useViewerRightRailButtons(
                 const hasRedactionChanges = pendingCount > 0 || redactionsApplied;
 
                 const switchToAnnotations = () => {
-                  const targetPath = withBasePath('/annotations');
+                  const targetPath = withBasePath("/annotations");
                   if (window.location.pathname !== targetPath) {
-                    window.history.pushState(null, '', targetPath);
+                    window.history.pushState(null, "", targetPath);
                   }
                   setIsAnnotationsActive(true);
                   // Use handleToolSelectForced to bypass the unsaved-changes guard —
                   // the navigation warning modal already handled that check.
-                  handleToolSelectForced('annotate');
+                  handleToolSelectForced("annotate");
                 };
 
                 if (hasRedactionChanges) {
@@ -386,31 +410,29 @@ export function useViewerRightRailButtons(
               }}
               disabled={disabled}
               aria-pressed={isAnnotationsActive}
-              color={isAnnotationsActive ? 'blue' : undefined}
+              color={isAnnotationsActive ? "blue" : undefined}
             >
               <LocalIcon icon="edit" width="1.5rem" height="1.5rem" />
             </ActionIcon>
           </Tooltip>
-        )
+        ),
       },
       {
-        id: 'viewer-annotation-controls',
-        section: 'top' as const,
+        id: "viewer-annotation-controls",
+        section: "top" as const,
         order: 60,
-        render: ({ disabled }) => (
-          <ViewerAnnotationControls currentView="viewer" disabled={disabled} />
-        )
+        render: ({ disabled }) => <ViewerAnnotationControls currentView="viewer" disabled={disabled} />,
       },
       {
-        id: 'viewer-form-fill',
+        id: "viewer-form-fill",
         tooltip: formFillLabel,
         ariaLabel: formFillLabel,
-        section: 'top' as const,
+        section: "top" as const,
         order: 62,
         render: ({ disabled }) => (
           <Tooltip content={formFillLabel} position={tooltipPosition} offset={12} arrow portalTarget={document.body}>
             <ActionIcon
-              variant={isFormFillActive ? 'filled' : 'subtle'}
+              variant={isFormFillActive ? "filled" : "subtle"}
               radius="md"
               className="right-rail-icon"
               onClick={() => {
@@ -418,17 +440,17 @@ export function useViewerRightRailButtons(
                 if (isFormFillActive) {
                   handleBackToTools();
                 } else {
-                  handleToolSelect('formFill' as any);
+                  handleToolSelect("formFill" as any);
                 }
               }}
               disabled={disabled}
               aria-pressed={isFormFillActive}
-              color={isFormFillActive ? 'blue' : undefined}
+              color={isFormFillActive ? "blue" : undefined}
             >
-              <TextFieldsIcon sx={{ fontSize: '1.5rem' }} />
+              <TextFieldsIcon sx={{ fontSize: "1.5rem" }} />
             </ActionIcon>
           </Tooltip>
-        )
+        ),
       },
     ];
 
diff --git a/frontend/src/core/components/viewer/viewerTypes.ts b/frontend/src/core/components/viewer/viewerTypes.ts
index c904919b80..d02ce5e47c 100644
--- a/frontend/src/core/components/viewer/viewerTypes.ts
+++ b/frontend/src/core/components/viewer/viewerTypes.ts
@@ -4,14 +4,7 @@ export interface AnnotationRect {
 }
 
 export interface SignatureAPI {
-  addImageSignature: (
-    signatureData: string,
-    x: number,
-    y: number,
-    width: number,
-    height: number,
-    pageIndex: number
-  ) => void;
+  addImageSignature: (signatureData: string, x: number, y: number, width: number, height: number, pageIndex: number) => void;
   activateDrawMode: () => void;
   activateSignaturePlacementMode: () => void;
   activateDeleteMode: () => void;
@@ -62,31 +55,31 @@ export interface HistoryAPI {
 }
 
 export type AnnotationToolId =
-  | 'select'
-  | 'highlight'
-  | 'underline'
-  | 'strikeout'
-  | 'squiggly'
-  | 'ink'
-  | 'inkHighlighter'
-  | 'text'
-  | 'note'
-  | 'textComment'
-  | 'insertText'
-  | 'replaceText'
-  | 'square'
-  | 'circle'
-  | 'line'
-  | 'lineArrow'
-  | 'polyline'
-  | 'polygon'
-  | 'stamp'
-  | 'signatureStamp'
-  | 'signatureInk';
+  | "select"
+  | "highlight"
+  | "underline"
+  | "strikeout"
+  | "squiggly"
+  | "ink"
+  | "inkHighlighter"
+  | "text"
+  | "note"
+  | "textComment"
+  | "insertText"
+  | "replaceText"
+  | "square"
+  | "circle"
+  | "line"
+  | "lineArrow"
+  | "polyline"
+  | "polygon"
+  | "stamp"
+  | "signatureStamp"
+  | "signatureInk";
 
 // Import for internal use within this file, and re-export for external consumers
-import type { AnnotationEvent } from '@embedpdf/plugin-annotation';
-export type { AnnotationEvent } from '@embedpdf/plugin-annotation';
+import type { AnnotationEvent } from "@embedpdf/plugin-annotation";
+export type { AnnotationEvent } from "@embedpdf/plugin-annotation";
 
 export type AnnotationPatch = Record<string, unknown>;
 
@@ -141,8 +134,8 @@ export interface AnnotationToolOptions {
   textAlign?: number; // 0 = Left, 1 = Center, 2 = Right
   imageSrc?: string;
   imageSize?: { width: number; height: number };
-  icon?: 'Comment' | 'Key' | 'Note' | 'Help' | 'NewParagraph' | 'Paragraph' | 'Insert';
+  icon?: "Comment" | "Key" | "Note" | "Help" | "NewParagraph" | "Paragraph" | "Insert";
   contents?: string;
   customData?: Record<string, unknown>;
-  flags?: ('invisible' | 'hidden' | 'print' | 'noZoom' | 'noRotate' | 'noView' | 'readOnly' | 'locked' | 'toggleNoView')[];
+  flags?: ("invisible" | "hidden" | "print" | "noZoom" | "noRotate" | "noView" | "readOnly" | "locked" | "toggleNoView")[];
 }
diff --git a/frontend/src/core/constants/app.ts b/frontend/src/core/constants/app.ts
index aedb81a681..07c9705211 100644
--- a/frontend/src/core/constants/app.ts
+++ b/frontend/src/core/constants/app.ts
@@ -1,21 +1,20 @@
-
 // Base path - read from <base> tag at runtime to support dynamic subpaths
 // Falls back to Vite's BASE_URL for build-time subpaths
 // Normalized: no trailing slash, empty string instead of '.' or '/'
 function getBasePath(): string {
   // Try to read from <base> tag first (runtime subpath support)
-  if (typeof document !== 'undefined') {
-    const baseElement = document.querySelector('base');
+  if (typeof document !== "undefined") {
+    const baseElement = document.querySelector("base");
     if (baseElement) {
-      const href = baseElement.getAttribute('href');
-      if (href && href !== '%BASE_URL%') {
-        return href.replace(/\/$/, '').replace(/^\.$/, '').replace(/^\/$/, '');
+      const href = baseElement.getAttribute("href");
+      if (href && href !== "%BASE_URL%") {
+        return href.replace(/\/$/, "").replace(/^\.$/, "").replace(/^\/$/, "");
       }
     }
   }
 
   // Fall back to Vite's BASE_URL (build-time subpath)
-  return (import.meta.env.BASE_URL || '/').replace(/\/$/, '').replace(/^\.$/, '').replace(/^\/$/, '');
+  return (import.meta.env.BASE_URL || "/").replace(/\/$/, "").replace(/^\.$/, "").replace(/^\/$/, "");
 }
 
 export const BASE_PATH = getBasePath();
@@ -27,12 +26,12 @@ export const ANNOTATION_VERIFICATION_DELAY_MS = 100;
 
 /** For in-app navigations when you must touch window.location (rare). */
 export const withBasePath = (path: string): string => {
-  const clean = path.startsWith('/') ? path : `/${path}`;
+  const clean = path.startsWith("/") ? path : `/${path}`;
   return `${BASE_PATH}${clean}`;
 };
 
 /** For OAuth (needs absolute URL with scheme+host) */
 export const absoluteWithBasePath = (path: string): string => {
-  const clean = path.startsWith('/') ? path : `/${path}`;
+  const clean = path.startsWith("/") ? path : `/${path}`;
   return `${window.location.origin}${BASE_PATH}${clean}`;
 };
diff --git a/frontend/src/core/constants/automation.ts b/frontend/src/core/constants/automation.ts
index c1aeaeff0a..56fc7ee35f 100644
--- a/frontend/src/core/constants/automation.ts
+++ b/frontend/src/core/constants/automation.ts
@@ -5,38 +5,38 @@
 export const AUTOMATION_CONSTANTS = {
   // Timeouts
   OPERATION_TIMEOUT: 300000, // 5 minutes in milliseconds
-  
+
   // Default values
   DEFAULT_TOOL_COUNT: 2,
   MIN_TOOL_COUNT: 2,
-  
+
   // File prefixes
-  FILE_PREFIX: 'automated_',
-  RESPONSE_ZIP_PREFIX: 'response_',
-  RESULT_FILE_PREFIX: 'result_',
-  PROCESSED_FILE_PREFIX: 'processed_',
-  
+  FILE_PREFIX: "automated_",
+  RESPONSE_ZIP_PREFIX: "response_",
+  RESULT_FILE_PREFIX: "result_",
+  PROCESSED_FILE_PREFIX: "processed_",
+
   // Operation types
-  CONVERT_OPERATION_TYPE: 'convert',
-  
+  CONVERT_OPERATION_TYPE: "convert",
+
   // Storage keys
-  DB_NAME: 'StirlingPDF_Automations',
+  DB_NAME: "StirlingPDF_Automations",
   DB_VERSION: 1,
-  STORE_NAME: 'automations',
-  
+  STORE_NAME: "automations",
+
   // UI delays
-  SPINNER_ANIMATION_DURATION: '1s'
+  SPINNER_ANIMATION_DURATION: "1s",
 } as const;
 
 export const AUTOMATION_STEPS = {
-  SELECTION: 'selection',
-  CREATION: 'creation',
-  RUN: 'run'
+  SELECTION: "selection",
+  CREATION: "creation",
+  RUN: "run",
 } as const;
 
 export const EXECUTION_STATUS = {
-  PENDING: 'pending',
-  RUNNING: 'running',
-  COMPLETED: 'completed',
-  ERROR: 'error'
-} as const;
\ No newline at end of file
+  PENDING: "pending",
+  RUNNING: "running",
+  COMPLETED: "completed",
+  ERROR: "error",
+} as const;
diff --git a/frontend/src/core/constants/convertConstants.ts b/frontend/src/core/constants/convertConstants.ts
index 1016d5f6c0..a29d05ee5a 100644
--- a/frontend/src/core/constants/convertConstants.ts
+++ b/frontend/src/core/constants/convertConstants.ts
@@ -1,221 +1,286 @@
-
 export const COLOR_TYPES = {
-  COLOR: 'color',
-  GRAYSCALE: 'grayscale',
-  BLACK_WHITE: 'blackwhite'
+  COLOR: "color",
+  GRAYSCALE: "grayscale",
+  BLACK_WHITE: "blackwhite",
 } as const;
 
 export const OUTPUT_OPTIONS = {
-  SINGLE: 'single',
-  MULTIPLE: 'multiple'
+  SINGLE: "single",
+  MULTIPLE: "multiple",
 } as const;
 
 export const FIT_OPTIONS = {
-  FIT_PAGE: 'fitDocumentToPage',
-  MAINTAIN_ASPECT: 'maintainAspectRatio',
-  FILL_PAGE: 'fillPage'
+  FIT_PAGE: "fitDocumentToPage",
+  MAINTAIN_ASPECT: "maintainAspectRatio",
+  FILL_PAGE: "fillPage",
 } as const;
 
-
 export const CONVERSION_ENDPOINTS = {
-  'office-pdf': '/api/v1/convert/file/pdf',
-  'pdf-image': '/api/v1/convert/pdf/img',
-  'image-pdf': '/api/v1/convert/img/pdf',
-  'svg-pdf': '/api/v1/convert/svg/pdf',
-  'cbz-pdf': '/api/v1/convert/cbz/pdf',
-  'pdf-cbz': '/api/v1/convert/pdf/cbz',
-  'pdf-office-word': '/api/v1/convert/pdf/word',
-  'pdf-office-presentation': '/api/v1/convert/pdf/presentation',
-  'pdf-office-text': '/api/v1/convert/pdf/text',
-  'pdf-csv': '/api/v1/convert/pdf/csv',
-  'pdf-xlsx': '/api/v1/convert/pdf/xlsx',
-  'pdf-markdown': '/api/v1/convert/pdf/markdown',
-  'pdf-html': '/api/v1/convert/pdf/html',
-  'pdf-xml': '/api/v1/convert/pdf/xml',
-  'pdf-pdfa': '/api/v1/convert/pdf/pdfa',
-  'html-pdf': '/api/v1/convert/html/pdf',
-  'markdown-pdf': '/api/v1/convert/markdown/pdf',
-  'eml-pdf': '/api/v1/convert/eml/pdf',
-  'cbr-pdf': '/api/v1/convert/cbr/pdf',
-  'pdf-cbr': '/api/v1/convert/pdf/cbr',
-  'ebook-pdf': '/api/v1/convert/ebook/pdf',
-  'pdf-epub': '/api/v1/convert/pdf/epub',
-  'pdf-text-editor': '/api/v1/convert/pdf/text-editor',
-  'text-editor-pdf': '/api/v1/convert/text-editor/pdf'
+  "office-pdf": "/api/v1/convert/file/pdf",
+  "pdf-image": "/api/v1/convert/pdf/img",
+  "image-pdf": "/api/v1/convert/img/pdf",
+  "svg-pdf": "/api/v1/convert/svg/pdf",
+  "cbz-pdf": "/api/v1/convert/cbz/pdf",
+  "pdf-cbz": "/api/v1/convert/pdf/cbz",
+  "pdf-office-word": "/api/v1/convert/pdf/word",
+  "pdf-office-presentation": "/api/v1/convert/pdf/presentation",
+  "pdf-office-text": "/api/v1/convert/pdf/text",
+  "pdf-csv": "/api/v1/convert/pdf/csv",
+  "pdf-xlsx": "/api/v1/convert/pdf/xlsx",
+  "pdf-markdown": "/api/v1/convert/pdf/markdown",
+  "pdf-html": "/api/v1/convert/pdf/html",
+  "pdf-xml": "/api/v1/convert/pdf/xml",
+  "pdf-pdfa": "/api/v1/convert/pdf/pdfa",
+  "html-pdf": "/api/v1/convert/html/pdf",
+  "markdown-pdf": "/api/v1/convert/markdown/pdf",
+  "eml-pdf": "/api/v1/convert/eml/pdf",
+  "cbr-pdf": "/api/v1/convert/cbr/pdf",
+  "pdf-cbr": "/api/v1/convert/pdf/cbr",
+  "ebook-pdf": "/api/v1/convert/ebook/pdf",
+  "pdf-epub": "/api/v1/convert/pdf/epub",
+  "pdf-text-editor": "/api/v1/convert/pdf/text-editor",
+  "text-editor-pdf": "/api/v1/convert/text-editor/pdf",
 } as const;
 
 export const ENDPOINT_NAMES = {
-  'office-pdf': 'file-to-pdf',
-  'pdf-image': 'pdf-to-img',
-  'image-pdf': 'img-to-pdf',
-  'svg-pdf': 'svg-to-pdf',
-  'cbz-pdf': 'cbz-to-pdf',
-  'pdf-cbz': 'pdf-to-cbz',
-  'pdf-office-word': 'pdf-to-word',
-  'pdf-office-presentation': 'pdf-to-presentation',
-  'pdf-office-text': 'pdf-to-text',
-  'pdf-csv': 'pdf-to-csv',
-  'pdf-xlsx': 'pdf-to-xlsx',
-  'pdf-markdown': 'pdf-to-markdown',
-  'pdf-html': 'pdf-to-html',
-  'pdf-xml': 'pdf-to-xml',
-  'pdf-pdfa': 'pdf-to-pdfa',
-  'html-pdf': 'html-to-pdf',
-  'markdown-pdf': 'markdown-to-pdf',
-  'eml-pdf': 'eml-to-pdf',
-  'ebook-pdf': 'ebook-to-pdf',
-  'cbr-pdf': 'cbr-to-pdf',
-  'pdf-cbr': 'pdf-to-cbr',
-  'pdf-epub': 'pdf-to-epub',
-  'pdf-text-editor': 'pdf-to-text-editor',
-  'text-editor-pdf': 'text-editor-to-pdf'
+  "office-pdf": "file-to-pdf",
+  "pdf-image": "pdf-to-img",
+  "image-pdf": "img-to-pdf",
+  "svg-pdf": "svg-to-pdf",
+  "cbz-pdf": "cbz-to-pdf",
+  "pdf-cbz": "pdf-to-cbz",
+  "pdf-office-word": "pdf-to-word",
+  "pdf-office-presentation": "pdf-to-presentation",
+  "pdf-office-text": "pdf-to-text",
+  "pdf-csv": "pdf-to-csv",
+  "pdf-xlsx": "pdf-to-xlsx",
+  "pdf-markdown": "pdf-to-markdown",
+  "pdf-html": "pdf-to-html",
+  "pdf-xml": "pdf-to-xml",
+  "pdf-pdfa": "pdf-to-pdfa",
+  "html-pdf": "html-to-pdf",
+  "markdown-pdf": "markdown-to-pdf",
+  "eml-pdf": "eml-to-pdf",
+  "ebook-pdf": "ebook-to-pdf",
+  "cbr-pdf": "cbr-to-pdf",
+  "pdf-cbr": "pdf-to-cbr",
+  "pdf-epub": "pdf-to-epub",
+  "pdf-text-editor": "pdf-to-text-editor",
+  "text-editor-pdf": "text-editor-to-pdf",
 } as const;
 
 /** Maps conversion endpoint → [i18n key, English fallback] for display names */
 export const ENDPOINT_I18N: Record<string, [string, string]> = {
-  'img-to-pdf':          ['imageToPDF.header',         'Image → PDF'],
-  'html-to-pdf':         ['HTMLToPDF.header',          'HTML → PDF'],
-  'markdown-to-pdf':     ['MarkdownToPDF.header',      'Markdown → PDF'],
-  'pdf-to-img':          ['pdfToImage.title',          'PDF → Image'],
-  'pdf-to-word':         ['PDFToWord.header',          'PDF → Word'],
-  'pdf-to-presentation': ['PDFToPresentation.header',  'PDF → Presentation'],
-  'pdf-to-text':         ['PDFToText.header',          'PDF → Text'],
-  'pdf-to-csv':          ['PDFToCSV.header',           'PDF → CSV'],
-  'pdf-to-xlsx':         ['PDFToXLSX.header',          'PDF → Excel'],
-  'pdf-to-markdown':     ['PDFToMarkdown.header',      'PDF → Markdown'],
-  'pdf-to-html':         ['PDFToHTML.header',          'PDF → HTML'],
-  'pdf-to-xml':          ['PDFToXML.header',           'PDF → XML'],
-  'pdf-to-pdfa':         ['pdfToPDFA.header',          'PDF → PDF/A'],
-  'file-to-pdf':         ['convert.fileToPdf',         'Office/Document → PDF'],
-  'cbr-to-pdf':          ['convert.cbrToPdf',          'CBR → PDF'],
-  'cbz-to-pdf':          ['convert.cbzToPdf',          'CBZ → PDF'],
-  'eml-to-pdf':          ['convert.emlToPdf',          'Email → PDF'],
-  'ebook-to-pdf':        ['convert.ebookToPdf',        'eBook → PDF'],
-  'svg-to-pdf':          ['convert.svgToPdf',          'SVG → PDF'],
-  'pdf-to-cbr':          ['convert.pdfToCbr',          'PDF → CBR'],
-  'pdf-to-cbz':          ['convert.pdfToCbz',          'PDF → CBZ'],
-  'pdf-to-epub':         ['convert.pdfToEpub',         'PDF → EPUB'],
+  "img-to-pdf": ["imageToPDF.header", "Image → PDF"],
+  "html-to-pdf": ["HTMLToPDF.header", "HTML → PDF"],
+  "markdown-to-pdf": ["MarkdownToPDF.header", "Markdown → PDF"],
+  "pdf-to-img": ["pdfToImage.title", "PDF → Image"],
+  "pdf-to-word": ["PDFToWord.header", "PDF → Word"],
+  "pdf-to-presentation": ["PDFToPresentation.header", "PDF → Presentation"],
+  "pdf-to-text": ["PDFToText.header", "PDF → Text"],
+  "pdf-to-csv": ["PDFToCSV.header", "PDF → CSV"],
+  "pdf-to-xlsx": ["PDFToXLSX.header", "PDF → Excel"],
+  "pdf-to-markdown": ["PDFToMarkdown.header", "PDF → Markdown"],
+  "pdf-to-html": ["PDFToHTML.header", "PDF → HTML"],
+  "pdf-to-xml": ["PDFToXML.header", "PDF → XML"],
+  "pdf-to-pdfa": ["pdfToPDFA.header", "PDF → PDF/A"],
+  "file-to-pdf": ["convert.fileToPdf", "Office/Document → PDF"],
+  "cbr-to-pdf": ["convert.cbrToPdf", "CBR → PDF"],
+  "cbz-to-pdf": ["convert.cbzToPdf", "CBZ → PDF"],
+  "eml-to-pdf": ["convert.emlToPdf", "Email → PDF"],
+  "ebook-to-pdf": ["convert.ebookToPdf", "eBook → PDF"],
+  "svg-to-pdf": ["convert.svgToPdf", "SVG → PDF"],
+  "pdf-to-cbr": ["convert.pdfToCbr", "PDF → CBR"],
+  "pdf-to-cbz": ["convert.pdfToCbz", "PDF → CBZ"],
+  "pdf-to-epub": ["convert.pdfToEpub", "PDF → EPUB"],
 };
 
 // Grouped file extensions for dropdowns
 export const FROM_FORMAT_OPTIONS = [
-  { value: 'any', label: 'Any', group: 'Multiple Files' },
-  { value: 'image', label: 'Images', group: 'Multiple Files' },
-  { value: 'pdf', label: 'PDF', group: 'Document' },
-  { value: 'cbz', label: 'CBZ', group: 'Archive' },
-  { value: 'cbr', label: 'CBR', group: 'Archive' },
-  { value: 'docx', label: 'DOCX', group: 'Document' },
-  { value: 'doc', label: 'DOC', group: 'Document' },
-  { value: 'odt', label: 'ODT', group: 'Document' },
-  { value: 'xlsx', label: 'XLSX', group: 'Spreadsheet' },
-  { value: 'xls', label: 'XLS', group: 'Spreadsheet' },
-  { value: 'ods', label: 'ODS', group: 'Spreadsheet' },
-  { value: 'pptx', label: 'PPTX', group: 'Presentation' },
-  { value: 'ppt', label: 'PPT', group: 'Presentation' },
-  { value: 'odp', label: 'ODP', group: 'Presentation' },
-  { value: 'jpg', label: 'JPG', group: 'Image' },
-  { value: 'jpeg', label: 'JPEG', group: 'Image' },
-  { value: 'png', label: 'PNG', group: 'Image' },
-  { value: 'gif', label: 'GIF', group: 'Image' },
-  { value: 'bmp', label: 'BMP', group: 'Image' },
-  { value: 'tiff', label: 'TIFF', group: 'Image' },
-  { value: 'webp', label: 'WEBP', group: 'Image' },
-  { value: 'svg', label: 'SVG', group: 'Image' },
-  { value: 'html', label: 'HTML', group: 'Web' },
-  { value: 'zip', label: 'ZIP', group: 'Web' },
-  { value: 'md', label: 'MD', group: 'Text' },
-  { value: 'txt', label: 'TXT', group: 'Text' },
-  { value: 'rtf', label: 'RTF', group: 'Text' },
-  { value: 'eml', label: 'EML', group: 'Email' },
-  { value: 'msg', label: 'MSG (Outlook)', group: 'Email' },
-  { value: 'epub', label: 'EPUB', group: 'eBook' },
-  { value: 'mobi', label: 'MOBI', group: 'eBook' },
-  { value: 'azw3', label: 'AZW3', group: 'eBook' },
-  { value: 'fb2', label: 'FB2', group: 'eBook' },
+  { value: "any", label: "Any", group: "Multiple Files" },
+  { value: "image", label: "Images", group: "Multiple Files" },
+  { value: "pdf", label: "PDF", group: "Document" },
+  { value: "cbz", label: "CBZ", group: "Archive" },
+  { value: "cbr", label: "CBR", group: "Archive" },
+  { value: "docx", label: "DOCX", group: "Document" },
+  { value: "doc", label: "DOC", group: "Document" },
+  { value: "odt", label: "ODT", group: "Document" },
+  { value: "xlsx", label: "XLSX", group: "Spreadsheet" },
+  { value: "xls", label: "XLS", group: "Spreadsheet" },
+  { value: "ods", label: "ODS", group: "Spreadsheet" },
+  { value: "pptx", label: "PPTX", group: "Presentation" },
+  { value: "ppt", label: "PPT", group: "Presentation" },
+  { value: "odp", label: "ODP", group: "Presentation" },
+  { value: "jpg", label: "JPG", group: "Image" },
+  { value: "jpeg", label: "JPEG", group: "Image" },
+  { value: "png", label: "PNG", group: "Image" },
+  { value: "gif", label: "GIF", group: "Image" },
+  { value: "bmp", label: "BMP", group: "Image" },
+  { value: "tiff", label: "TIFF", group: "Image" },
+  { value: "webp", label: "WEBP", group: "Image" },
+  { value: "svg", label: "SVG", group: "Image" },
+  { value: "html", label: "HTML", group: "Web" },
+  { value: "zip", label: "ZIP", group: "Web" },
+  { value: "md", label: "MD", group: "Text" },
+  { value: "txt", label: "TXT", group: "Text" },
+  { value: "rtf", label: "RTF", group: "Text" },
+  { value: "eml", label: "EML", group: "Email" },
+  { value: "msg", label: "MSG (Outlook)", group: "Email" },
+  { value: "epub", label: "EPUB", group: "eBook" },
+  { value: "mobi", label: "MOBI", group: "eBook" },
+  { value: "azw3", label: "AZW3", group: "eBook" },
+  { value: "fb2", label: "FB2", group: "eBook" },
 ];
 
 export const TO_FORMAT_OPTIONS = [
-  { value: 'pdf', label: 'PDF', group: 'Document' },
-  { value: 'pdfa', label: 'PDF/A', group: 'Document' },
-  { value: 'pdfx', label: 'PDF/X', group: 'Document' },
-  { value: 'docx', label: 'DOCX', group: 'Document' },
-  { value: 'odt', label: 'ODT', group: 'Document' },
-  { value: 'cbz', label: 'CBZ', group: 'Archive' },
-  { value: 'cbr', label: 'CBR', group: 'Archive' },
-  { value: 'csv', label: 'CSV', group: 'Spreadsheet' },
-  { value: 'xlsx', label: 'XLSX', group: 'Spreadsheet' },
-  { value: 'pptx', label: 'PPTX', group: 'Presentation' },
-  { value: 'odp', label: 'ODP', group: 'Presentation' },
-  { value: 'txt', label: 'TXT', group: 'Text' },
-  { value: 'rtf', label: 'RTF', group: 'Text' },
-  { value: 'md', label: 'MD', group: 'Text' },
-  { value: 'png', label: 'PNG', group: 'Image' },
-  { value: 'jpg', label: 'JPG', group: 'Image' },
-  { value: 'gif', label: 'GIF', group: 'Image' },
-  { value: 'tiff', label: 'TIFF', group: 'Image' },
-  { value: 'bmp', label: 'BMP', group: 'Image' },
-  { value: 'webp', label: 'WEBP', group: 'Image' },
-  { value: 'html', label: 'HTML', group: 'Web' },
-  { value: 'xml', label: 'XML', group: 'Web' },
-  { value: 'epub', label: 'EPUB', group: 'eBook' },
-  { value: 'azw3', label: 'AZW3', group: 'eBook' },
+  { value: "pdf", label: "PDF", group: "Document" },
+  { value: "pdfa", label: "PDF/A", group: "Document" },
+  { value: "pdfx", label: "PDF/X", group: "Document" },
+  { value: "docx", label: "DOCX", group: "Document" },
+  { value: "odt", label: "ODT", group: "Document" },
+  { value: "cbz", label: "CBZ", group: "Archive" },
+  { value: "cbr", label: "CBR", group: "Archive" },
+  { value: "csv", label: "CSV", group: "Spreadsheet" },
+  { value: "xlsx", label: "XLSX", group: "Spreadsheet" },
+  { value: "pptx", label: "PPTX", group: "Presentation" },
+  { value: "odp", label: "ODP", group: "Presentation" },
+  { value: "txt", label: "TXT", group: "Text" },
+  { value: "rtf", label: "RTF", group: "Text" },
+  { value: "md", label: "MD", group: "Text" },
+  { value: "png", label: "PNG", group: "Image" },
+  { value: "jpg", label: "JPG", group: "Image" },
+  { value: "gif", label: "GIF", group: "Image" },
+  { value: "tiff", label: "TIFF", group: "Image" },
+  { value: "bmp", label: "BMP", group: "Image" },
+  { value: "webp", label: "WEBP", group: "Image" },
+  { value: "html", label: "HTML", group: "Web" },
+  { value: "xml", label: "XML", group: "Web" },
+  { value: "epub", label: "EPUB", group: "eBook" },
+  { value: "azw3", label: "AZW3", group: "eBook" },
 ];
 
 // Conversion matrix - what each source format can convert to
 export const CONVERSION_MATRIX: Record<string, string[]> = {
-  'any': ['pdf'], // Mixed files always convert to PDF
-  'image': ['pdf'], // Multiple images always convert to PDF
-  'pdf': ['png', 'jpg', 'gif', 'tiff', 'bmp', 'webp', 'docx', 'odt', 'pptx', 'odp', 'csv', 'xlsx', 'txt', 'rtf', 'md', 'html', 'xml', 'pdfa', 'pdfx', 'cbz', 'cbr', 'epub', 'azw3'],
-  'cbz': ['pdf'],
-  'docx': ['pdf'], 'doc': ['pdf'], 'odt': ['pdf'],
-  'xlsx': ['pdf'], 'xls': ['pdf'], 'ods': ['pdf'],
-  'pptx': ['pdf'], 'ppt': ['pdf'], 'odp': ['pdf'],
-  'jpg': ['pdf'], 'jpeg': ['pdf'], 'png': ['pdf'], 'gif': ['pdf'], 'bmp': ['pdf'], 'tiff': ['pdf'], 'webp': ['pdf'], 'svg': ['pdf'],
-  'html': ['pdf'],
-  'zip': ['pdf'],
-  'md': ['pdf'],
-  'txt': ['pdf'], 'rtf': ['pdf'],
-  'eml': ['pdf'],
-  'msg': ['pdf'],
-  'cbr': ['pdf'],
-  'epub': ['pdf'], 'mobi': ['pdf'], 'azw3': ['pdf'], 'fb2': ['pdf']
+  any: ["pdf"], // Mixed files always convert to PDF
+  image: ["pdf"], // Multiple images always convert to PDF
+  pdf: [
+    "png",
+    "jpg",
+    "gif",
+    "tiff",
+    "bmp",
+    "webp",
+    "docx",
+    "odt",
+    "pptx",
+    "odp",
+    "csv",
+    "xlsx",
+    "txt",
+    "rtf",
+    "md",
+    "html",
+    "xml",
+    "pdfa",
+    "pdfx",
+    "cbz",
+    "cbr",
+    "epub",
+    "azw3",
+  ],
+  cbz: ["pdf"],
+  docx: ["pdf"],
+  doc: ["pdf"],
+  odt: ["pdf"],
+  xlsx: ["pdf"],
+  xls: ["pdf"],
+  ods: ["pdf"],
+  pptx: ["pdf"],
+  ppt: ["pdf"],
+  odp: ["pdf"],
+  jpg: ["pdf"],
+  jpeg: ["pdf"],
+  png: ["pdf"],
+  gif: ["pdf"],
+  bmp: ["pdf"],
+  tiff: ["pdf"],
+  webp: ["pdf"],
+  svg: ["pdf"],
+  html: ["pdf"],
+  zip: ["pdf"],
+  md: ["pdf"],
+  txt: ["pdf"],
+  rtf: ["pdf"],
+  eml: ["pdf"],
+  msg: ["pdf"],
+  cbr: ["pdf"],
+  epub: ["pdf"],
+  mobi: ["pdf"],
+  azw3: ["pdf"],
+  fb2: ["pdf"],
 };
 
 // Map extensions to endpoint keys
 export const EXTENSION_TO_ENDPOINT: Record<string, Record<string, string>> = {
-  'any': { 'pdf': 'file-to-pdf' }, // Mixed files use file-to-pdf endpoint
-  'image': { 'pdf': 'img-to-pdf' }, // Multiple images use img-to-pdf endpoint
-  'pdf': {
-    'png': 'pdf-to-img', 'jpg': 'pdf-to-img', 'gif': 'pdf-to-img', 'tiff': 'pdf-to-img', 'bmp': 'pdf-to-img', 'webp': 'pdf-to-img',
-    'docx': 'pdf-to-word', 'odt': 'pdf-to-word',
-    'pptx': 'pdf-to-presentation', 'odp': 'pdf-to-presentation',
-    'csv': 'pdf-to-csv',
-    'xlsx': 'pdf-to-xlsx',
-    'txt': 'pdf-to-text', 'rtf': 'pdf-to-text', 'md': 'pdf-to-markdown',
-    'html': 'pdf-to-html', 'xml': 'pdf-to-xml',
-    'pdfa': 'pdf-to-pdfa',
-    'pdfx': 'pdf-to-pdfa',  // PDF/X uses the same endpoint as PDF/A
-    'cbr': 'pdf-to-cbr',
-    'cbz': 'pdf-to-cbz',
-    'epub': 'pdf-to-epub', 'azw3': 'pdf-to-epub'
+  any: { pdf: "file-to-pdf" }, // Mixed files use file-to-pdf endpoint
+  image: { pdf: "img-to-pdf" }, // Multiple images use img-to-pdf endpoint
+  pdf: {
+    png: "pdf-to-img",
+    jpg: "pdf-to-img",
+    gif: "pdf-to-img",
+    tiff: "pdf-to-img",
+    bmp: "pdf-to-img",
+    webp: "pdf-to-img",
+    docx: "pdf-to-word",
+    odt: "pdf-to-word",
+    pptx: "pdf-to-presentation",
+    odp: "pdf-to-presentation",
+    csv: "pdf-to-csv",
+    xlsx: "pdf-to-xlsx",
+    txt: "pdf-to-text",
+    rtf: "pdf-to-text",
+    md: "pdf-to-markdown",
+    html: "pdf-to-html",
+    xml: "pdf-to-xml",
+    pdfa: "pdf-to-pdfa",
+    pdfx: "pdf-to-pdfa", // PDF/X uses the same endpoint as PDF/A
+    cbr: "pdf-to-cbr",
+    cbz: "pdf-to-cbz",
+    epub: "pdf-to-epub",
+    azw3: "pdf-to-epub",
   },
-  'cbz': { 'pdf': 'cbz-to-pdf' },
-  'docx': { 'pdf': 'file-to-pdf' }, 'doc': { 'pdf': 'file-to-pdf' }, 'odt': { 'pdf': 'file-to-pdf' },
-  'xlsx': { 'pdf': 'file-to-pdf' }, 'xls': { 'pdf': 'file-to-pdf' }, 'ods': { 'pdf': 'file-to-pdf' },
-  'pptx': { 'pdf': 'file-to-pdf' }, 'ppt': { 'pdf': 'file-to-pdf' }, 'odp': { 'pdf': 'file-to-pdf' },
-  'jpg': { 'pdf': 'img-to-pdf' }, 'jpeg': { 'pdf': 'img-to-pdf' }, 'png': { 'pdf': 'img-to-pdf' },
-  'gif': { 'pdf': 'img-to-pdf' }, 'bmp': { 'pdf': 'img-to-pdf' }, 'tiff': { 'pdf': 'img-to-pdf' }, 'webp': { 'pdf': 'img-to-pdf' },
-  'svg': { 'pdf': 'svg-to-pdf' },
-  'html': { 'pdf': 'html-to-pdf' },
-  'zip': { 'pdf': 'html-to-pdf' },
-  'md': { 'pdf': 'markdown-to-pdf' },
-  'txt': { 'pdf': 'file-to-pdf' }, 'rtf': { 'pdf': 'file-to-pdf' },
-  'cbr': { 'pdf': 'cbr-to-pdf' },
-  'eml': { 'pdf': 'eml-to-pdf' },
-  'msg': { 'pdf': 'eml-to-pdf' }, // MSG uses same endpoint as EML
-  'epub': { 'pdf': 'ebook-to-pdf' }, 'mobi': { 'pdf': 'ebook-to-pdf' }, 'azw3': { 'pdf': 'ebook-to-pdf' }, 'fb2': { 'pdf': 'ebook-to-pdf' }
+  cbz: { pdf: "cbz-to-pdf" },
+  docx: { pdf: "file-to-pdf" },
+  doc: { pdf: "file-to-pdf" },
+  odt: { pdf: "file-to-pdf" },
+  xlsx: { pdf: "file-to-pdf" },
+  xls: { pdf: "file-to-pdf" },
+  ods: { pdf: "file-to-pdf" },
+  pptx: { pdf: "file-to-pdf" },
+  ppt: { pdf: "file-to-pdf" },
+  odp: { pdf: "file-to-pdf" },
+  jpg: { pdf: "img-to-pdf" },
+  jpeg: { pdf: "img-to-pdf" },
+  png: { pdf: "img-to-pdf" },
+  gif: { pdf: "img-to-pdf" },
+  bmp: { pdf: "img-to-pdf" },
+  tiff: { pdf: "img-to-pdf" },
+  webp: { pdf: "img-to-pdf" },
+  svg: { pdf: "svg-to-pdf" },
+  html: { pdf: "html-to-pdf" },
+  zip: { pdf: "html-to-pdf" },
+  md: { pdf: "markdown-to-pdf" },
+  txt: { pdf: "file-to-pdf" },
+  rtf: { pdf: "file-to-pdf" },
+  cbr: { pdf: "cbr-to-pdf" },
+  eml: { pdf: "eml-to-pdf" },
+  msg: { pdf: "eml-to-pdf" }, // MSG uses same endpoint as EML
+  epub: { pdf: "ebook-to-pdf" },
+  mobi: { pdf: "ebook-to-pdf" },
+  azw3: { pdf: "ebook-to-pdf" },
+  fb2: { pdf: "ebook-to-pdf" },
 };
 
-export type ColorType = typeof COLOR_TYPES[keyof typeof COLOR_TYPES];
-export type OutputOption = typeof OUTPUT_OPTIONS[keyof typeof OUTPUT_OPTIONS];
-export type FitOption = typeof FIT_OPTIONS[keyof typeof FIT_OPTIONS];
+export type ColorType = (typeof COLOR_TYPES)[keyof typeof COLOR_TYPES];
+export type OutputOption = (typeof OUTPUT_OPTIONS)[keyof typeof OUTPUT_OPTIONS];
+export type FitOption = (typeof FIT_OPTIONS)[keyof typeof FIT_OPTIONS];
diff --git a/frontend/src/core/constants/convertSupportedFornats.ts b/frontend/src/core/constants/convertSupportedFornats.ts
index adfcce7e3d..9d829a0770 100644
--- a/frontend/src/core/constants/convertSupportedFornats.ts
+++ b/frontend/src/core/constants/convertSupportedFornats.ts
@@ -1,21 +1,89 @@
 // Central list of formats supported by Convert operations
 export const CONVERT_SUPPORTED_FORMATS = [
   // Microsoft Office
-  'doc', 'docx', 'dot', 'dotx', 'csv', 'xls', 'xlsx', 'xlt', 'xltx', 'slk', 'dif', 'ppt', 'pptx',
+  "doc",
+  "docx",
+  "dot",
+  "dotx",
+  "csv",
+  "xls",
+  "xlsx",
+  "xlt",
+  "xltx",
+  "slk",
+  "dif",
+  "ppt",
+  "pptx",
   // OpenDocument
-  'odt', 'ott', 'ods', 'ots', 'odp', 'otp', 'odg', 'otg',
+  "odt",
+  "ott",
+  "ods",
+  "ots",
+  "odp",
+  "otp",
+  "odg",
+  "otg",
   // Text formats
-  'txt', 'text', 'xml', 'rtf', 'html', 'lwp', 'md', 'json',
+  "txt",
+  "text",
+  "xml",
+  "rtf",
+  "html",
+  "lwp",
+  "md",
+  "json",
   // Images
-  'bmp', 'gif', 'jpeg', 'jpg', 'png', 'tif', 'tiff', 'pbm', 'pgm', 'ppm', 'ras', 'xbm', 'xpm', 'svg', 'svm', 'wmf', 'webp',
+  "bmp",
+  "gif",
+  "jpeg",
+  "jpg",
+  "png",
+  "tif",
+  "tiff",
+  "pbm",
+  "pgm",
+  "ppm",
+  "ras",
+  "xbm",
+  "xpm",
+  "svg",
+  "svm",
+  "wmf",
+  "webp",
   // StarOffice
-  'sda', 'sdc', 'sdd', 'sdw', 'stc', 'std', 'sti', 'stw', 'sxd', 'sxg', 'sxi', 'sxw',
+  "sda",
+  "sdc",
+  "sdd",
+  "sdw",
+  "stc",
+  "std",
+  "sti",
+  "stw",
+  "sxd",
+  "sxg",
+  "sxi",
+  "sxw",
   // Email formats
-  'eml', 'msg',
+  "eml",
+  "msg",
   // Ebook formats
-  'epub', 'mobi', 'azw3', 'fb2',
+  "epub",
+  "mobi",
+  "azw3",
+  "fb2",
   // Archive formats
-  'zip', 'cbr', 'cbz',
+  "zip",
+  "cbr",
+  "cbz",
   // Other
-  'dbf', 'fods', 'vsd', 'vor', 'vor3', 'vor4', 'uop', 'pct', 'ps', 'pdf',
+  "dbf",
+  "fods",
+  "vsd",
+  "vor",
+  "vor3",
+  "vor4",
+  "uop",
+  "pct",
+  "ps",
+  "pdf",
 ];
diff --git a/frontend/src/core/constants/cropConstants.ts b/frontend/src/core/constants/cropConstants.ts
index deff3cfe4f..7548b14601 100644
--- a/frontend/src/core/constants/cropConstants.ts
+++ b/frontend/src/core/constants/cropConstants.ts
@@ -8,5 +8,4 @@ export const DEFAULT_CROP_AREA = {
   height: PAGE_SIZES.A4.height,
 } as const;
 
-
-export type ResizeHandle = 'nw' | 'ne' | 'sw' | 'se' | 'n' | 'e' | 's' | 'w' | null;
+export type ResizeHandle = "nw" | "ne" | "sw" | "se" | "n" | "e" | "s" | "w" | null;
diff --git a/frontend/src/core/constants/downloads.ts b/frontend/src/core/constants/downloads.ts
index 5eee10a281..e67f8f7daf 100644
--- a/frontend/src/core/constants/downloads.ts
+++ b/frontend/src/core/constants/downloads.ts
@@ -1,10 +1,9 @@
 // Centralized download URLs for Stirling PDF desktop installers
 export const DOWNLOAD_URLS = {
-  WINDOWS: 'https://files.stirlingpdf.com/win-installer.exe',
-  MAC_APPLE_SILICON: 'https://files.stirlingpdf.com/mac-installer.dmg',
-  MAC_INTEL: 'https://files.stirlingpdf.com/mac-x86_64-installer.dmg',
-  LINUX_DOCS: 'https://docs.stirlingpdf.com/Installation/Unix%20Installation/',
+  WINDOWS: "https://files.stirlingpdf.com/win-installer.exe",
+  MAC_APPLE_SILICON: "https://files.stirlingpdf.com/mac-installer.dmg",
+  MAC_INTEL: "https://files.stirlingpdf.com/mac-x86_64-installer.dmg",
+  LINUX_DOCS: "https://docs.stirlingpdf.com/Installation/Unix%20Installation/",
 } as const;
 
-export const DOWNLOAD_BASE_URL = 'https://files.stirlingpdf.com/';
-
+export const DOWNLOAD_BASE_URL = "https://files.stirlingpdf.com/";
diff --git a/frontend/src/core/constants/events.ts b/frontend/src/core/constants/events.ts
index a7455fc3fe..1e2480394c 100644
--- a/frontend/src/core/constants/events.ts
+++ b/frontend/src/core/constants/events.ts
@@ -1,10 +1,10 @@
-import type { LicenseNotice } from '@app/types/types';
+import type { LicenseNotice } from "@app/types/types";
 
-export const SERVER_LICENSE_REQUEST_EVENT = 'stirling:server-license-requested';
-export const UPGRADE_BANNER_TEST_EVENT = 'stirling:upgrade-banner-test';
-export const UPGRADE_BANNER_ALERT_EVENT = 'stirling:upgrade-banner-alert';
-export const START_TOUR_EVENT = 'stirling:start-tour';
-export const TOUR_STATE_EVENT = 'stirling:tour-state';
+export const SERVER_LICENSE_REQUEST_EVENT = "stirling:server-license-requested";
+export const UPGRADE_BANNER_TEST_EVENT = "stirling:upgrade-banner-test";
+export const UPGRADE_BANNER_ALERT_EVENT = "stirling:upgrade-banner-alert";
+export const START_TOUR_EVENT = "stirling:start-tour";
+export const TOUR_STATE_EVENT = "stirling:tour-state";
 
 export interface ServerLicenseRequestPayload {
   licenseNotice?: Partial<LicenseNotice>;
@@ -12,7 +12,7 @@ export interface ServerLicenseRequestPayload {
   selfReportedAdmin?: boolean;
 }
 
-export type UpgradeBannerTestScenario = 'friendly' | 'urgent-admin' | 'urgent-user' | null;
+export type UpgradeBannerTestScenario = "friendly" | "urgent-admin" | "urgent-user" | null;
 
 export interface UpgradeBannerTestPayload {
   scenario: UpgradeBannerTestScenario;
@@ -20,12 +20,12 @@ export interface UpgradeBannerTestPayload {
 
 export interface UpgradeBannerAlertPayload {
   active: boolean;
-  audience?: 'admin' | 'user';
+  audience?: "admin" | "user";
   totalUsers?: number | null;
   freeTierLimit?: number;
 }
 
-export type TourType = 'admin' | 'tools' | 'whatsnew';
+export type TourType = "admin" | "tools" | "whatsnew";
 
 export interface StartTourPayload {
   tourType: TourType;
@@ -37,17 +37,12 @@ export interface TourStatePayload {
 
 /** Helper to dispatch the start tour event */
 export function requestStartTour(tourType: TourType): void {
-  if (typeof window === 'undefined') return;
-  window.dispatchEvent(
-    new CustomEvent<StartTourPayload>(START_TOUR_EVENT, { detail: { tourType } })
-  );
+  if (typeof window === "undefined") return;
+  window.dispatchEvent(new CustomEvent<StartTourPayload>(START_TOUR_EVENT, { detail: { tourType } }));
 }
 
 /** Helper to dispatch tour state changes (for hiding cookie consent during tour) */
 export function dispatchTourState(isOpen: boolean): void {
-  if (typeof window === 'undefined') return;
-  window.dispatchEvent(
-    new CustomEvent<TourStatePayload>(TOUR_STATE_EVENT, { detail: { isOpen } })
-  );
+  if (typeof window === "undefined") return;
+  window.dispatchEvent(new CustomEvent<TourStatePayload>(TOUR_STATE_EVENT, { detail: { isOpen } }));
 }
-
diff --git a/frontend/src/core/constants/logo.ts b/frontend/src/core/constants/logo.ts
index 7838f396b3..d73f14b4a7 100644
--- a/frontend/src/core/constants/logo.ts
+++ b/frontend/src/core/constants/logo.ts
@@ -1,15 +1,14 @@
-import type { LogoVariant } from '@app/services/preferencesService';
+import type { LogoVariant } from "@app/services/preferencesService";
 
 export const LOGO_FOLDER_BY_VARIANT: Record<LogoVariant, string> = {
-  modern: 'modern-logo',
-  classic: 'classic-logo',
+  modern: "modern-logo",
+  classic: "classic-logo",
 };
 
 export const ensureLogoVariant = (value?: string | null): LogoVariant => {
-  return value === 'classic' ? 'classic' : 'modern';
+  return value === "classic" ? "classic" : "modern";
 };
 
 export const getLogoFolder = (variant?: LogoVariant | null): string => {
   return LOGO_FOLDER_BY_VARIANT[ensureLogoVariant(variant)];
 };
-
diff --git a/frontend/src/core/constants/routes.ts b/frontend/src/core/constants/routes.ts
index 98081b7c4f..458e52e5f0 100644
--- a/frontend/src/core/constants/routes.ts
+++ b/frontend/src/core/constants/routes.ts
@@ -7,14 +7,7 @@
  * These are authentication-related pages where users are not yet logged in or
  * the main app chrome is not displayed.
  */
-export const AUTH_ROUTES = [
-  '/login',
-  '/signup',
-  '/auth',
-  '/invite',
-  '/forgot-password',
-  '/reset-password',
-];
+export const AUTH_ROUTES = ["/login", "/signup", "/auth", "/invite", "/forgot-password", "/reset-password"];
 
 /**
  * Check if a pathname matches any auth route
@@ -22,4 +15,3 @@ export const AUTH_ROUTES = [
 export function isAuthRoute(pathname: string): boolean {
   return AUTH_ROUTES.some((route) => pathname.startsWith(route));
 }
-
diff --git a/frontend/src/core/constants/signConstants.ts b/frontend/src/core/constants/signConstants.ts
index ade726a6c5..c7e46ef852 100644
--- a/frontend/src/core/constants/signConstants.ts
+++ b/frontend/src/core/constants/signConstants.ts
@@ -1,14 +1,14 @@
 // Timeout delays (ms) to allow PDF viewer to complete rendering before activating placement mode
-export const PLACEMENT_ACTIVATION_DELAY = 60;  // Standard delay for signature changes
+export const PLACEMENT_ACTIVATION_DELAY = 60; // Standard delay for signature changes
 export const FILE_SWITCH_ACTIVATION_DELAY = 80; // Slightly longer delay when switching files
 
 // Signature preview sizing
-export const MAX_PREVIEW_WIDTH_RATIO = 0.35;   // Max preview width as percentage of container
-export const MAX_PREVIEW_HEIGHT_RATIO = 0.35;  // Max preview height as percentage of container
-export const MAX_PREVIEW_WIDTH_REM = 15;       // Absolute max width in rem
-export const MAX_PREVIEW_HEIGHT_REM = 10;      // Absolute max height in rem
+export const MAX_PREVIEW_WIDTH_RATIO = 0.35; // Max preview width as percentage of container
+export const MAX_PREVIEW_HEIGHT_RATIO = 0.35; // Max preview height as percentage of container
+export const MAX_PREVIEW_WIDTH_REM = 15; // Absolute max width in rem
+export const MAX_PREVIEW_HEIGHT_REM = 10; // Absolute max height in rem
 export const MIN_SIGNATURE_DIMENSION_REM = 0.75; // Min dimension for visibility
-export const OVERLAY_EDGE_PADDING_REM = 0.25;  // Padding from container edges
+export const OVERLAY_EDGE_PADDING_REM = 0.25; // Padding from container edges
 
 // Text signature padding (relative to font size)
 export const HORIZONTAL_PADDING_RATIO = 0.8;
diff --git a/frontend/src/core/constants/splitConstants.ts b/frontend/src/core/constants/splitConstants.ts
index c4add6ed25..5561ae957f 100644
--- a/frontend/src/core/constants/splitConstants.ts
+++ b/frontend/src/core/constants/splitConstants.ts
@@ -1,32 +1,31 @@
 export const SPLIT_METHODS = {
-  BY_PAGES: 'byPages',
-  BY_SECTIONS: 'bySections',
-  BY_SIZE: 'bySize',
-  BY_PAGE_COUNT: 'byPageCount',
-  BY_DOC_COUNT: 'byDocCount',
-  BY_CHAPTERS: 'byChapters',
-  BY_PAGE_DIVIDER: 'byPageDivider',
-  BY_POSTER: 'byPoster'
+  BY_PAGES: "byPages",
+  BY_SECTIONS: "bySections",
+  BY_SIZE: "bySize",
+  BY_PAGE_COUNT: "byPageCount",
+  BY_DOC_COUNT: "byDocCount",
+  BY_CHAPTERS: "byChapters",
+  BY_PAGE_DIVIDER: "byPageDivider",
+  BY_POSTER: "byPoster",
 } as const;
 
-
 export const ENDPOINTS = {
-  [SPLIT_METHODS.BY_PAGES]: 'split-pages',
-  [SPLIT_METHODS.BY_SECTIONS]: 'split-pdf-by-sections',
-  [SPLIT_METHODS.BY_SIZE]: 'split-by-size-or-count',
-  [SPLIT_METHODS.BY_PAGE_COUNT]: 'split-by-size-or-count',
-  [SPLIT_METHODS.BY_DOC_COUNT]: 'split-by-size-or-count',
-  [SPLIT_METHODS.BY_CHAPTERS]: 'split-pdf-by-chapters',
-  [SPLIT_METHODS.BY_PAGE_DIVIDER]: 'auto-split-pdf',
-  [SPLIT_METHODS.BY_POSTER]: 'split-for-poster-print'
+  [SPLIT_METHODS.BY_PAGES]: "split-pages",
+  [SPLIT_METHODS.BY_SECTIONS]: "split-pdf-by-sections",
+  [SPLIT_METHODS.BY_SIZE]: "split-by-size-or-count",
+  [SPLIT_METHODS.BY_PAGE_COUNT]: "split-by-size-or-count",
+  [SPLIT_METHODS.BY_DOC_COUNT]: "split-by-size-or-count",
+  [SPLIT_METHODS.BY_CHAPTERS]: "split-pdf-by-chapters",
+  [SPLIT_METHODS.BY_PAGE_DIVIDER]: "auto-split-pdf",
+  [SPLIT_METHODS.BY_POSTER]: "split-for-poster-print",
 } as const;
 
-export type SplitMethod = typeof SPLIT_METHODS[keyof typeof SPLIT_METHODS];
+export type SplitMethod = (typeof SPLIT_METHODS)[keyof typeof SPLIT_METHODS];
 export const isSplitMethod = (value: string | null): value is SplitMethod => {
   return Object.values(SPLIT_METHODS).includes(value as SplitMethod);
 };
 
-import { CardOption } from '@app/components/shared/CardSelector';
+import { CardOption } from "@app/components/shared/CardSelector";
 
 export interface MethodOption extends CardOption<SplitMethod> {
   tooltipKey: string;
@@ -37,50 +36,48 @@ export const METHOD_OPTIONS: MethodOption[] = [
     value: SPLIT_METHODS.BY_PAGES,
     prefixKey: "split.methods.prefix.splitAt",
     nameKey: "split.methods.byPages.name",
-    tooltipKey: "split.methods.byPages.tooltip"
+    tooltipKey: "split.methods.byPages.tooltip",
   },
   {
     value: SPLIT_METHODS.BY_CHAPTERS,
     prefixKey: "split.methods.prefix.splitBy",
     nameKey: "split.methods.byChapters.name",
-    tooltipKey: "split.methods.byChapters.tooltip"
+    tooltipKey: "split.methods.byChapters.tooltip",
   },
   {
     value: SPLIT_METHODS.BY_SECTIONS,
     prefixKey: "split.methods.prefix.splitBy",
     nameKey: "split.methods.bySections.name",
-    tooltipKey: "split.methods.bySections.tooltip"
+    tooltipKey: "split.methods.bySections.tooltip",
   },
   {
     value: SPLIT_METHODS.BY_SIZE,
     prefixKey: "split.methods.prefix.splitBy",
     nameKey: "split.methods.bySize.name",
-    tooltipKey: "split.methods.bySize.tooltip"
+    tooltipKey: "split.methods.bySize.tooltip",
   },
   {
     value: SPLIT_METHODS.BY_PAGE_COUNT,
     prefixKey: "split.methods.prefix.splitBy",
     nameKey: "split.methods.byPageCount.name",
-    tooltipKey: "split.methods.byPageCount.tooltip"
+    tooltipKey: "split.methods.byPageCount.tooltip",
   },
   {
     value: SPLIT_METHODS.BY_DOC_COUNT,
     prefixKey: "split.methods.prefix.splitBy",
     nameKey: "split.methods.byDocCount.name",
-    tooltipKey: "split.methods.byDocCount.tooltip"
+    tooltipKey: "split.methods.byDocCount.tooltip",
   },
   {
     value: SPLIT_METHODS.BY_PAGE_DIVIDER,
     prefixKey: "split.methods.prefix.splitBy",
     nameKey: "split.methods.byPageDivider.name",
-    tooltipKey: "split.methods.byPageDivider.tooltip"
+    tooltipKey: "split.methods.byPageDivider.tooltip",
   },
   {
     value: SPLIT_METHODS.BY_POSTER,
     prefixKey: "split.methods.prefix.splitInto",
     nameKey: "split.methods.byPoster.name",
-    tooltipKey: "split.methods.byPoster.tooltip"
-  }
+    tooltipKey: "split.methods.byPoster.tooltip",
+  },
 ];
-
-
diff --git a/frontend/src/core/constants/theme.ts b/frontend/src/core/constants/theme.ts
index f16c1c4554..ab88799bf3 100644
--- a/frontend/src/core/constants/theme.ts
+++ b/frontend/src/core/constants/theme.ts
@@ -1,8 +1,8 @@
 // Theme constants and utilities
 
-export type ThemeMode = 'light' | 'dark' | 'rainbow';
+export type ThemeMode = "light" | "dark" | "rainbow";
 
 // Detect OS theme preference
-export function getSystemTheme(): 'light' | 'dark' {
-  return window?.matchMedia?.('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+export function getSystemTheme(): "light" | "dark" {
+  return window?.matchMedia?.("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
diff --git a/frontend/src/core/constants/toolPanel.ts b/frontend/src/core/constants/toolPanel.ts
index 01e556fcf5..e292d7e926 100644
--- a/frontend/src/core/constants/toolPanel.ts
+++ b/frontend/src/core/constants/toolPanel.ts
@@ -1,5 +1,5 @@
 // Tool panel constants
 
-export type ToolPanelMode = 'sidebar' | 'fullscreen';
+export type ToolPanelMode = "sidebar" | "fullscreen";
 
-export const DEFAULT_TOOL_PANEL_MODE: ToolPanelMode = 'sidebar';
+export const DEFAULT_TOOL_PANEL_MODE: ToolPanelMode = "sidebar";
diff --git a/frontend/src/core/contexts/AdminTourOrchestrationContext.tsx b/frontend/src/core/contexts/AdminTourOrchestrationContext.tsx
index 3bac8f101e..6aba4956fb 100644
--- a/frontend/src/core/contexts/AdminTourOrchestrationContext.tsx
+++ b/frontend/src/core/contexts/AdminTourOrchestrationContext.tsx
@@ -1,5 +1,5 @@
-import React, { createContext, useContext, useCallback, useRef } from 'react';
-import { useNavigate, useLocation } from 'react-router-dom';
+import React, { createContext, useContext, useCallback, useRef } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
 
 interface AdminTourOrchestrationContextType {
   // State management
@@ -23,41 +23,44 @@ export const AdminTourOrchestrationProvider: React.FC<{ children: React.ReactNod
   const location = useLocation();
 
   // Store the user's location before tour starts
-  const savedLocationRef = useRef<string>('');
+  const savedLocationRef = useRef<string>("");
 
   const saveAdminState = useCallback(() => {
     savedLocationRef.current = location.pathname;
-    console.log('Saving admin state, location:', location.pathname);
+    console.log("Saving admin state, location:", location.pathname);
   }, [location.pathname]);
 
   const restoreAdminState = useCallback(() => {
-    console.log('Restoring admin state, saved location:', savedLocationRef.current);
+    console.log("Restoring admin state, saved location:", savedLocationRef.current);
 
     // Navigate back to saved location or home
-    const targetPath = savedLocationRef.current || '/';
+    const targetPath = savedLocationRef.current || "/";
     navigate(targetPath, { replace: true });
 
-    savedLocationRef.current = '';
+    savedLocationRef.current = "";
   }, [navigate]);
 
   const openConfigModal = useCallback(() => {
     // Navigate to settings overview to open the modal
-    navigate('/settings/overview');
+    navigate("/settings/overview");
   }, [navigate]);
 
   const closeConfigModal = useCallback(() => {
     // Navigate back to home to close the modal
-    navigate('/', { replace: true });
+    navigate("/", { replace: true });
   }, [navigate]);
 
-  const navigateToSection = useCallback((section: string) => {
-    navigate(`/settings/${section}`);
-  }, [navigate]);
+  const navigateToSection = useCallback(
+    (section: string) => {
+      navigate(`/settings/${section}`);
+    },
+    [navigate],
+  );
 
   const scrollNavToSection = useCallback((section: string): Promise<void> => {
     return new Promise((resolve) => {
       const navElement = document.querySelector(`[data-tour="admin-${section}-nav"]`) as HTMLElement;
-      const scrollContainer = document.querySelector('.modal-nav-scroll') as HTMLElement;
+      const scrollContainer = document.querySelector(".modal-nav-scroll") as HTMLElement;
 
       if (navElement && scrollContainer) {
         // Get the position of the nav element relative to the scroll container
@@ -66,12 +69,12 @@ export const AdminTourOrchestrationProvider: React.FC<{ children: React.ReactNod
         const navHeight = navElement.offsetHeight;
 
         // Calculate scroll position to center the element
-        const scrollTo = navTop - (containerHeight / 2) + (navHeight / 2);
+        const scrollTo = navTop - containerHeight / 2 + navHeight / 2;
 
         // Instant scroll to avoid timing issues
         scrollContainer.scrollTo({
           top: Math.max(0, scrollTo),
-          behavior: 'auto'
+          behavior: "auto",
         });
 
         // Use multiple animation frames to ensure browser has fully updated
@@ -93,7 +96,7 @@ export const AdminTourOrchestrationProvider: React.FC<{ children: React.ReactNod
     setTimeout(() => {
       const element = document.querySelector(`[data-tour="${settingId}"]`);
       if (element) {
-        element.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        element.scrollIntoView({ behavior: "smooth", block: "center" });
       }
     }, 300);
   }, []);
@@ -108,17 +111,13 @@ export const AdminTourOrchestrationProvider: React.FC<{ children: React.ReactNod
     scrollToSetting,
   };
 
-  return (
-    <AdminTourOrchestrationContext.Provider value={value}>
-      {children}
-    </AdminTourOrchestrationContext.Provider>
-  );
+  return <AdminTourOrchestrationContext.Provider value={value}>{children}</AdminTourOrchestrationContext.Provider>;
 };
 
 export const useAdminTourOrchestration = (): AdminTourOrchestrationContextType => {
   const context = useContext(AdminTourOrchestrationContext);
   if (!context) {
-    throw new Error('useAdminTourOrchestration must be used within AdminTourOrchestrationProvider');
+    throw new Error("useAdminTourOrchestration must be used within AdminTourOrchestrationProvider");
   }
   return context;
 };
diff --git a/frontend/src/core/contexts/AnnotationContext.tsx b/frontend/src/core/contexts/AnnotationContext.tsx
index fff0a7d94f..c1be92a68e 100644
--- a/frontend/src/core/contexts/AnnotationContext.tsx
+++ b/frontend/src/core/contexts/AnnotationContext.tsx
@@ -1,5 +1,5 @@
-import React, { createContext, useContext, ReactNode, useRef } from 'react';
-import type { AnnotationAPI } from '@app/components/viewer/viewerTypes';
+import React, { createContext, useContext, ReactNode, useRef } from "react";
+import type { AnnotationAPI } from "@app/components/viewer/viewerTypes";
 
 interface AnnotationContextValue {
   annotationApiRef: React.RefObject<AnnotationAPI | null>;
@@ -20,7 +20,7 @@ export const AnnotationProvider: React.FC<{ children: ReactNode }> = ({ children
 export const useAnnotation = (): AnnotationContextValue => {
   const context = useContext(AnnotationContext);
   if (!context) {
-    throw new Error('useAnnotation must be used within an AnnotationProvider');
+    throw new Error("useAnnotation must be used within an AnnotationProvider");
   }
   return context;
 };
diff --git a/frontend/src/core/contexts/AppConfigContext.test.tsx b/frontend/src/core/contexts/AppConfigContext.test.tsx
index 8ec3a79ad0..fdd5ee2c1a 100644
--- a/frontend/src/core/contexts/AppConfigContext.test.tsx
+++ b/frontend/src/core/contexts/AppConfigContext.test.tsx
@@ -1,18 +1,18 @@
-import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest';
-import { waitFor, renderHook, act } from '@testing-library/react';
-import { AppConfigProvider, useAppConfig } from '@app/contexts/AppConfigContext';
-import apiClient from '@app/services/apiClient';
-import { ReactNode } from 'react';
+import { describe, it, expect, beforeEach, vi, afterEach } from "vitest";
+import { waitFor, renderHook, act } from "@testing-library/react";
+import { AppConfigProvider, useAppConfig } from "@app/contexts/AppConfigContext";
+import apiClient from "@app/services/apiClient";
+import { ReactNode } from "react";
 
 // Mock apiClient
-vi.mock('@app/services/apiClient');
+vi.mock("@app/services/apiClient");
 
-describe('AppConfigContext', () => {
+describe("AppConfigContext", () => {
   beforeEach(() => {
     vi.clearAllMocks();
     // Mock window.location.pathname
-    Object.defineProperty(window, 'location', {
-      value: { pathname: '/' },
+    Object.defineProperty(window, "location", {
+      value: { pathname: "/" },
       writable: true,
     });
   });
@@ -21,15 +21,13 @@ describe('AppConfigContext', () => {
     vi.restoreAllMocks();
   });
 
-  const wrapper = ({ children }: { children: ReactNode }) => (
-    <AppConfigProvider>{children}</AppConfigProvider>
-  );
+  const wrapper = ({ children }: { children: ReactNode }) => <AppConfigProvider>{children}</AppConfigProvider>;
 
-  it('should fetch and provide app config on non-auth pages', async () => {
+  it("should fetch and provide app config on non-auth pages", async () => {
     const mockConfig = {
       enableLogin: false,
-      appNameNavbar: 'Stirling PDF',
-      languages: ['en-US', 'en-GB'],
+      appNameNavbar: "Stirling PDF",
+      languages: ["en-US", "en-GB"],
     };
 
     vi.mocked(apiClient.get).mockResolvedValueOnce({
@@ -49,16 +47,16 @@ describe('AppConfigContext', () => {
       expect(result.current.error).toBeNull();
     });
 
-    expect(apiClient.get).toHaveBeenCalledWith('/api/v1/config/app-config', {
+    expect(apiClient.get).toHaveBeenCalledWith("/api/v1/config/app-config", {
       suppressErrorToast: true,
       skipAuthRedirect: true,
     });
   });
 
-  it('should skip fetch on auth pages and use default config', async () => {
+  it("should skip fetch on auth pages and use default config", async () => {
     // Mock being on login page
-    Object.defineProperty(window, 'location', {
-      value: { pathname: '/login' },
+    Object.defineProperty(window, "location", {
+      value: { pathname: "/login" },
       writable: true,
     });
 
@@ -73,8 +71,8 @@ describe('AppConfigContext', () => {
     expect(apiClient.get).not.toHaveBeenCalled();
   });
 
-  it('should handle 401 error gracefully', async () => {
-    const mockError = Object.assign(new Error('Unauthorized'), {
+  it("should handle 401 error gracefully", async () => {
+    const mockError = Object.assign(new Error("Unauthorized"), {
       response: { status: 401, data: {} },
     });
     vi.mocked(apiClient.get).mockRejectedValueOnce(mockError);
@@ -88,8 +86,8 @@ describe('AppConfigContext', () => {
     });
   });
 
-  it('should handle network errors', async () => {
-    const errorMessage = 'Network error occurred';
+  it("should handle network errors", async () => {
+    const errorMessage = "Network error occurred";
     const mockError = new Error(errorMessage);
     // Network errors don't have response property
     // Mock rejection for all retry attempts (default is 3 attempts)
@@ -107,9 +105,9 @@ describe('AppConfigContext', () => {
     });
   });
 
-  it('should skip fetch on signup page', async () => {
-    Object.defineProperty(window, 'location', {
-      value: { pathname: '/signup' },
+  it("should skip fetch on signup page", async () => {
+    Object.defineProperty(window, "location", {
+      value: { pathname: "/signup" },
       writable: true,
     });
 
@@ -123,9 +121,9 @@ describe('AppConfigContext', () => {
     expect(apiClient.get).not.toHaveBeenCalled();
   });
 
-  it('should skip fetch on auth callback page', async () => {
-    Object.defineProperty(window, 'location', {
-      value: { pathname: '/auth/callback' },
+  it("should skip fetch on auth callback page", async () => {
+    Object.defineProperty(window, "location", {
+      value: { pathname: "/auth/callback" },
       writable: true,
     });
 
@@ -139,9 +137,9 @@ describe('AppConfigContext', () => {
     expect(apiClient.get).not.toHaveBeenCalled();
   });
 
-  it('should skip fetch on invite accept page', async () => {
-    Object.defineProperty(window, 'location', {
-      value: { pathname: '/invite/abc123' },
+  it("should skip fetch on invite accept page", async () => {
+    Object.defineProperty(window, "location", {
+      value: { pathname: "/invite/abc123" },
       writable: true,
     });
 
@@ -155,15 +153,15 @@ describe('AppConfigContext', () => {
     expect(apiClient.get).not.toHaveBeenCalled();
   });
 
-  it('should refetch config when jwt-available event is triggered', async () => {
+  it("should refetch config when jwt-available event is triggered", async () => {
     const initialConfig = {
       enableLogin: true,
-      appNameNavbar: 'Stirling PDF',
+      appNameNavbar: "Stirling PDF",
     };
 
     const updatedConfig = {
       enableLogin: true,
-      appNameNavbar: 'Stirling PDF',
+      appNameNavbar: "Stirling PDF",
       isAdmin: true,
       enableAnalytics: true,
     };
@@ -188,7 +186,7 @@ describe('AppConfigContext', () => {
 
     // Trigger jwt-available event wrapped in act
     await act(async () => {
-      window.dispatchEvent(new CustomEvent('jwt-available'));
+      window.dispatchEvent(new CustomEvent("jwt-available"));
       // Wait a tick for event handler to run
       await new Promise((resolve) => setTimeout(resolve, 0));
     });
@@ -200,10 +198,10 @@ describe('AppConfigContext', () => {
     expect(apiClient.get).toHaveBeenCalledTimes(2);
   });
 
-  it('should provide refetch function', async () => {
+  it("should provide refetch function", async () => {
     const mockConfig = {
       enableLogin: false,
-      appNameNavbar: 'Test App',
+      appNameNavbar: "Test App",
     };
 
     vi.mocked(apiClient.get).mockResolvedValue({
@@ -225,7 +223,7 @@ describe('AppConfigContext', () => {
     expect(apiClient.get).toHaveBeenCalledTimes(2);
   });
 
-  it('should not fetch twice without force flag', async () => {
+  it("should not fetch twice without force flag", async () => {
     const mockConfig = {
       enableLogin: false,
     };
@@ -245,16 +243,14 @@ describe('AppConfigContext', () => {
     expect(apiClient.get).toHaveBeenCalledTimes(1);
   });
 
-  it('should handle initial config prop', async () => {
+  it("should handle initial config prop", async () => {
     const initialConfig = {
       enableLogin: false,
-      appNameNavbar: 'Initial App',
+      appNameNavbar: "Initial App",
     };
 
     const customWrapper = ({ children }: { children: ReactNode }) => (
-      <AppConfigProvider initialConfig={initialConfig}>
-        {children}
-      </AppConfigProvider>
+      <AppConfigProvider initialConfig={initialConfig}>{children}</AppConfigProvider>
     );
 
     const { result } = renderHook(() => useAppConfig(), {
@@ -270,7 +266,7 @@ describe('AppConfigContext', () => {
     expect(apiClient.get).toHaveBeenCalled();
   });
 
-  it('should use suppressErrorToast for all config requests', async () => {
+  it("should use suppressErrorToast for all config requests", async () => {
     const mockConfig = { enableLogin: true };
 
     vi.mocked(apiClient.get).mockResolvedValueOnce({
@@ -281,7 +277,7 @@ describe('AppConfigContext', () => {
     renderHook(() => useAppConfig(), { wrapper });
 
     await waitFor(() => {
-      expect(apiClient.get).toHaveBeenCalledWith('/api/v1/config/app-config', {
+      expect(apiClient.get).toHaveBeenCalledWith("/api/v1/config/app-config", {
         suppressErrorToast: true,
         skipAuthRedirect: true,
       });
diff --git a/frontend/src/core/contexts/AppConfigContext.tsx b/frontend/src/core/contexts/AppConfigContext.tsx
index 8ffac68772..994219ad52 100644
--- a/frontend/src/core/contexts/AppConfigContext.tsx
+++ b/frontend/src/core/contexts/AppConfigContext.tsx
@@ -1,14 +1,14 @@
-import React, { createContext, useContext, useState, useEffect, ReactNode, useCallback } from 'react';
-import apiClient from '@app/services/apiClient';
-import { getSimulatedAppConfig } from '@app/testing/serverExperienceSimulations';
-import type { AppConfig, AppConfigBootstrapMode } from '@app/types/appConfig';
-import { useJwtConfigSync } from '@app/hooks/useJwtConfigSync';
+import React, { createContext, useContext, useState, useEffect, ReactNode, useCallback } from "react";
+import apiClient from "@app/services/apiClient";
+import { getSimulatedAppConfig } from "@app/testing/serverExperienceSimulations";
+import type { AppConfig, AppConfigBootstrapMode } from "@app/types/appConfig";
+import { useJwtConfigSync } from "@app/hooks/useJwtConfigSync";
 
 /**
  * Sleep utility for delays
  */
 function sleep(ms: number): Promise<void> {
-  return new Promise(resolve => setTimeout(resolve, ms));
+  return new Promise((resolve) => setTimeout(resolve, ms));
 }
 
 export interface AppConfigRetryOptions {
@@ -49,11 +49,11 @@ export const AppConfigProvider: React.FC<AppConfigProviderProps> = ({
   children,
   retryOptions,
   initialConfig = null,
-  bootstrapMode = 'blocking',
+  bootstrapMode = "blocking",
   autoFetch = true,
   onConfigLoaded,
 }) => {
-  const isBlockingMode = bootstrapMode === 'blocking';
+  const isBlockingMode = bootstrapMode === "blocking";
   const [config, setConfig] = useState<AppConfig | null>(initialConfig);
   const [error, setError] = useState<string | null>(null);
   // Track how many times we've attempted to fetch. useRef avoids re-renders that can trigger loops.
@@ -67,102 +67,106 @@ export const AppConfigProvider: React.FC<AppConfigProviderProps> = ({
   const maxRetries = retryOptions?.maxRetries ?? 0;
   const initialDelay = retryOptions?.initialDelay ?? 1000;
 
-  const fetchConfig = useCallback(async (force = false) => {
-    // Prevent duplicate fetches unless forced
-    if (!force && fetchCountRef.current > 0) {
-      console.debug('[AppConfig] Already fetched, skipping');
-      return;
-    }
+  const fetchConfig = useCallback(
+    async (force = false) => {
+      // Prevent duplicate fetches unless forced
+      if (!force && fetchCountRef.current > 0) {
+        console.debug("[AppConfig] Already fetched, skipping");
+        return;
+      }
 
-    // Mark that we've attempted a fetch to prevent repeated auto-fetch loops
-    fetchCountRef.current += 1;
+      // Mark that we've attempted a fetch to prevent repeated auto-fetch loops
+      fetchCountRef.current += 1;
 
-    const shouldBlockUI = !hasResolvedConfig || isBlockingMode;
-    if (shouldBlockUI) {
-      setLoading(true);
-    }
-    setError(null);
+      const shouldBlockUI = !hasResolvedConfig || isBlockingMode;
+      if (shouldBlockUI) {
+        setLoading(true);
+      }
+      setError(null);
 
-    const startTime = performance.now();
-    for (let attempt = 0; attempt <= maxRetries; attempt++) {
-      try {
-        const testConfig = getSimulatedAppConfig();
-        if (testConfig) {
-          setConfig(testConfig);
-          setHasResolvedConfig(true);
-          setLoading(false);
-          return;
-        }
+      const startTime = performance.now();
+      for (let attempt = 0; attempt <= maxRetries; attempt++) {
+        try {
+          const testConfig = getSimulatedAppConfig();
+          if (testConfig) {
+            setConfig(testConfig);
+            setHasResolvedConfig(true);
+            setLoading(false);
+            return;
+          }
 
-        if (attempt > 0) {
-          const delay = initialDelay * Math.pow(2, attempt - 1);
-          console.log(`[AppConfig] Retry attempt ${attempt}/${maxRetries} after ${delay}ms delay...`);
-          await sleep(delay);
-        } else {
-          console.log('[AppConfig] Fetching app config...');
-        }
+          if (attempt > 0) {
+            const delay = initialDelay * Math.pow(2, attempt - 1);
+            console.log(`[AppConfig] Retry attempt ${attempt}/${maxRetries} after ${delay}ms delay...`);
+            await sleep(delay);
+          } else {
+            console.log("[AppConfig] Fetching app config...");
+          }
 
-        // apiClient automatically adds JWT header if available via interceptors
-        // Always suppress error toast - we handle 401 errors locally
-        console.debug('[AppConfig] Fetching app config', { attempt, force, path: window.location.pathname });
-        const response = await apiClient.get<AppConfig>(
-          '/api/v1/config/app-config',
-          {
+          // apiClient automatically adds JWT header if available via interceptors
+          // Always suppress error toast - we handle 401 errors locally
+          console.debug("[AppConfig] Fetching app config", { attempt, force, path: window.location.pathname });
+          const response = await apiClient.get<AppConfig>("/api/v1/config/app-config", {
             suppressErrorToast: true,
             skipAuthRedirect: true,
-          } as any,
-        );
-        const data = response.data;
+          } as any);
+          const data = response.data;
 
-        console.debug('[AppConfig] Config fetched successfully:', data);
-        console.debug('[AppConfig] Fetch duration ms:', (performance.now() - startTime).toFixed(2));
-        setConfig(data);
-        setHasResolvedConfig(true);
-        setLoading(false);
-        onConfigLoadedRef.current?.(data);
-        return; // Success - exit function
-      } catch (err: any) {
-        const status = err?.response?.status;
-
-        // On 401 (not authenticated), use default config with login enabled
-        // This allows the app to work even without authentication
-        if (status === 401) {
-          console.debug('[AppConfig] 401 error - using default config (login enabled)');
-          console.debug('[AppConfig] Fetch duration ms:', (performance.now() - startTime).toFixed(2));
-          setConfig({ enableLogin: true });
+          console.debug("[AppConfig] Config fetched successfully:", data);
+          console.debug("[AppConfig] Fetch duration ms:", (performance.now() - startTime).toFixed(2));
+          setConfig(data);
           setHasResolvedConfig(true);
           setLoading(false);
-          return;
+          onConfigLoadedRef.current?.(data);
+          return; // Success - exit function
+        } catch (err: any) {
+          const status = err?.response?.status;
+
+          // On 401 (not authenticated), use default config with login enabled
+          // This allows the app to work even without authentication
+          if (status === 401) {
+            console.debug("[AppConfig] 401 error - using default config (login enabled)");
+            console.debug("[AppConfig] Fetch duration ms:", (performance.now() - startTime).toFixed(2));
+            setConfig({ enableLogin: true });
+            setHasResolvedConfig(true);
+            setLoading(false);
+            return;
+          }
+
+          // Check if we should retry (network errors or 5xx errors)
+          const shouldRetry = (!status || status >= 500) && attempt < maxRetries;
+
+          if (shouldRetry) {
+            console.warn(
+              `[AppConfig] Attempt ${attempt + 1} failed (status ${status || "network error"}):`,
+              err.message,
+              "- will retry...",
+            );
+            continue;
+          }
+
+          // Final attempt failed or non-retryable error (4xx)
+          const errorMessage = err?.response?.data?.message || err?.message || "Unknown error occurred";
+          setError(errorMessage);
+          console.error(`[AppConfig] Failed to fetch app config after ${attempt + 1} attempts:`, err);
+          console.debug("[AppConfig] Fetch duration ms:", (performance.now() - startTime).toFixed(2));
+          // Preserve existing config (initial default or previous fetch). If nothing is set, assume login enabled.
+          setConfig((current) => current ?? { enableLogin: true });
+          setHasResolvedConfig(true);
+          break;
         }
-
-        // Check if we should retry (network errors or 5xx errors)
-        const shouldRetry = (!status || status >= 500) && attempt < maxRetries;
-
-        if (shouldRetry) {
-          console.warn(`[AppConfig] Attempt ${attempt + 1} failed (status ${status || 'network error'}):`, err.message, '- will retry...');
-          continue;
-        }
-
-        // Final attempt failed or non-retryable error (4xx)
-        const errorMessage = err?.response?.data?.message || err?.message || 'Unknown error occurred';
-        setError(errorMessage);
-        console.error(`[AppConfig] Failed to fetch app config after ${attempt + 1} attempts:`, err);
-        console.debug('[AppConfig] Fetch duration ms:', (performance.now() - startTime).toFixed(2));
-        // Preserve existing config (initial default or previous fetch). If nothing is set, assume login enabled.
-        setConfig((current) => current ?? { enableLogin: true });
-        setHasResolvedConfig(true);
-        break;
       }
-    }
 
-    setLoading(false);
-  }, [hasResolvedConfig, isBlockingMode, maxRetries, initialDelay]);
+      setLoading(false);
+    },
+    [hasResolvedConfig, isBlockingMode, maxRetries, initialDelay],
+  );
 
   const { isAuthPage } = useJwtConfigSync(fetchConfig);
 
   useEffect(() => {
     if (isAuthPage) {
-      console.debug('[AppConfig] On auth page - using default config, skipping fetch', { path: window.location.pathname });
+      console.debug("[AppConfig] On auth page - using default config, skipping fetch", { path: window.location.pathname });
       setConfig({ enableLogin: true });
       setHasResolvedConfig(true);
       setLoading(false);
@@ -183,11 +187,7 @@ export const AppConfigProvider: React.FC<AppConfigProviderProps> = ({
     refetch,
   };
 
-  return (
-    <AppConfigContext.Provider value={value}>
-      {children}
-    </AppConfigContext.Provider>
-  );
+  return <AppConfigContext.Provider value={value}>{children}</AppConfigContext.Provider>;
 };
 
 /**
@@ -198,7 +198,7 @@ export function useAppConfig(): AppConfigContextValue {
   const context = useContext(AppConfigContext);
 
   if (context === undefined) {
-    throw new Error('useAppConfig must be used within AppConfigProvider');
+    throw new Error("useAppConfig must be used within AppConfigProvider");
   }
 
   return context;
diff --git a/frontend/src/core/contexts/BannerContext.tsx b/frontend/src/core/contexts/BannerContext.tsx
index 810d50bd65..d01c46ec5d 100644
--- a/frontend/src/core/contexts/BannerContext.tsx
+++ b/frontend/src/core/contexts/BannerContext.tsx
@@ -1,4 +1,4 @@
-import { createContext, useContext, useState, ReactNode } from 'react';
+import { createContext, useContext, useState, ReactNode } from "react";
 
 interface BannerContextType {
   banner: ReactNode;
@@ -10,17 +10,13 @@ const BannerContext = createContext<BannerContextType | undefined>(undefined);
 export function BannerProvider({ children }: { children: ReactNode }) {
   const [banner, setBanner] = useState<ReactNode>(null);
 
-  return (
-    <BannerContext.Provider value={{ banner, setBanner }}>
-      {children}
-    </BannerContext.Provider>
-  );
+  return <BannerContext.Provider value={{ banner, setBanner }}>{children}</BannerContext.Provider>;
 }
 
 export function useBanner() {
   const context = useContext(BannerContext);
   if (!context) {
-    throw new Error('useBanner must be used within BannerProvider');
+    throw new Error("useBanner must be used within BannerProvider");
   }
   return context;
 }
diff --git a/frontend/src/core/contexts/CommentAuthorContext.tsx b/frontend/src/core/contexts/CommentAuthorContext.tsx
index 67602c0a3b..5bd7026d3f 100644
--- a/frontend/src/core/contexts/CommentAuthorContext.tsx
+++ b/frontend/src/core/contexts/CommentAuthorContext.tsx
@@ -1,25 +1,15 @@
-import { createContext, useContext, type ReactNode } from 'react';
+import { createContext, useContext, type ReactNode } from "react";
 
 export interface CommentAuthorValue {
   displayName: string;
 }
 
-const defaultValue: CommentAuthorValue = { displayName: 'Guest' };
+const defaultValue: CommentAuthorValue = { displayName: "Guest" };
 
 const CommentAuthorContext = createContext<CommentAuthorValue>(defaultValue);
 
-export function CommentAuthorProvider({
-  children,
-  displayName = 'Guest',
-}: {
-  children: ReactNode;
-  displayName?: string;
-}) {
-  return (
-    <CommentAuthorContext.Provider value={{ displayName }}>
-      {children}
-    </CommentAuthorContext.Provider>
-  );
+export function CommentAuthorProvider({ children, displayName = "Guest" }: { children: ReactNode; displayName?: string }) {
+  return <CommentAuthorContext.Provider value={{ displayName }}>{children}</CommentAuthorContext.Provider>;
 }
 
 export function useCommentAuthor(): CommentAuthorValue {
diff --git a/frontend/src/core/contexts/FileContext.tsx b/frontend/src/core/contexts/FileContext.tsx
index 2e2eb1aa44..a4ec2ec1e1 100644
--- a/frontend/src/core/contexts/FileContext.tsx
+++ b/frontend/src/core/contexts/FileContext.tsx
@@ -12,7 +12,7 @@
  * Memory management handled by FileLifecycleManager (PDF.js cleanup, blob URL revocation).
  */
 
-import { useReducer, useCallback, useEffect, useRef, useMemo, useState } from 'react';
+import { useReducer, useCallback, useEffect, useRef, useMemo, useState } from "react";
 import {
   FileContextProviderProps,
   FileContextSelectors,
@@ -23,35 +23,39 @@ import {
   StirlingFileStub,
   StirlingFile,
   createStirlingFile,
-} from '@app/types/fileContext';
+} from "@app/types/fileContext";
 
 // Import modular components
-import { fileContextReducer, initialFileContextState } from '@app/contexts/file/FileReducer';
-import { createFileSelectors } from '@app/contexts/file/fileSelectors';
-import { addFiles, addStirlingFileStubs, consumeFiles, undoConsumeFiles, createFileActions, createChildStub, generateProcessedFileMetadata } from '@app/contexts/file/fileActions';
-import { FileLifecycleManager } from '@app/contexts/file/lifecycle';
-import { FileStateContext, FileActionsContext } from '@app/contexts/file/contexts';
-import { IndexedDBProvider, useIndexedDB } from '@app/contexts/IndexedDBContext';
-import { useZipConfirmation } from '@app/hooks/useZipConfirmation';
-import ZipWarningModal from '@app/components/shared/ZipWarningModal';
-import EncryptedPdfUnlockModal from '@app/components/shared/EncryptedPdfUnlockModal';
-import { useTranslation } from 'react-i18next';
-import { alert } from '@app/components/toast';
-import { buildRemovePasswordFormData } from '@app/hooks/tools/removePassword/buildRemovePasswordFormData';
-import type { RemovePasswordParameters } from '@app/hooks/tools/removePassword/useRemovePasswordParameters';
-import apiClient from '@app/services/apiClient';
-import { processResponse } from '@app/utils/toolResponseProcessor';
-import { ToolOperation } from '@app/types/file';
-import { handlePasswordError } from '@app/utils/toolErrorHandler';
-
-const DEBUG = process.env.NODE_ENV === 'development';
+import { fileContextReducer, initialFileContextState } from "@app/contexts/file/FileReducer";
+import { createFileSelectors } from "@app/contexts/file/fileSelectors";
+import {
+  addFiles,
+  addStirlingFileStubs,
+  consumeFiles,
+  undoConsumeFiles,
+  createFileActions,
+  createChildStub,
+  generateProcessedFileMetadata,
+} from "@app/contexts/file/fileActions";
+import { FileLifecycleManager } from "@app/contexts/file/lifecycle";
+import { FileStateContext, FileActionsContext } from "@app/contexts/file/contexts";
+import { IndexedDBProvider, useIndexedDB } from "@app/contexts/IndexedDBContext";
+import { useZipConfirmation } from "@app/hooks/useZipConfirmation";
+import ZipWarningModal from "@app/components/shared/ZipWarningModal";
+import EncryptedPdfUnlockModal from "@app/components/shared/EncryptedPdfUnlockModal";
+import { useTranslation } from "react-i18next";
+import { alert } from "@app/components/toast";
+import { buildRemovePasswordFormData } from "@app/hooks/tools/removePassword/buildRemovePasswordFormData";
+import type { RemovePasswordParameters } from "@app/hooks/tools/removePassword/useRemovePasswordParameters";
+import apiClient from "@app/services/apiClient";
+import { processResponse } from "@app/utils/toolResponseProcessor";
+import { ToolOperation } from "@app/types/file";
+import { handlePasswordError } from "@app/utils/toolErrorHandler";
 
+const DEBUG = process.env.NODE_ENV === "development";
 
 // Inner provider component that has access to IndexedDB
-function FileContextInner({
-  children,
-  enablePersistence = true
-}: FileContextProviderProps) {
+function FileContextInner({ children, enablePersistence = true }: FileContextProviderProps) {
   const [state, dispatch] = useReducer(fileContextReducer, initialFileContextState);
 
   // Always call the hook unconditionally to satisfy React's rules of hooks.
@@ -79,27 +83,30 @@ function FileContextInner({
 
   const [encryptedQueue, setEncryptedQueue] = useState<FileId[]>([]);
   const [activeEncryptedFileId, setActiveEncryptedFileId] = useState<FileId | null>(null);
-  const [unlockPassword, setUnlockPassword] = useState('');
+  const [unlockPassword, setUnlockPassword] = useState("");
   const [unlockError, setUnlockError] = useState<string | null>(null);
   const [isUnlocking, setIsUnlocking] = useState(false);
   const dismissedEncryptedFilesRef = useRef<Set<FileId>>(new Set());
   const observedFileIdsRef = useRef<Set<FileId>>(new Set());
 
-  const enqueueEncryptedFiles = useCallback((fileIds: FileId[]) => {
-    if (fileIds.length === 0) return;
-    setEncryptedQueue(prevQueue => {
-      const existing = new Set(prevQueue);
-      const next = [...prevQueue];
-      for (const id of fileIds) {
-        if (dismissedEncryptedFilesRef.current.has(id)) continue;
-        if (id === activeEncryptedFileId) continue;
-        if (existing.has(id)) continue;
-        existing.add(id);
-        next.push(id);
-      }
-      return next;
-    });
-  }, [activeEncryptedFileId]);
+  const enqueueEncryptedFiles = useCallback(
+    (fileIds: FileId[]) => {
+      if (fileIds.length === 0) return;
+      setEncryptedQueue((prevQueue) => {
+        const existing = new Set(prevQueue);
+        const next = [...prevQueue];
+        for (const id of fileIds) {
+          if (dismissedEncryptedFilesRef.current.has(id)) continue;
+          if (id === activeEncryptedFileId) continue;
+          if (existing.has(id)) continue;
+          existing.add(id);
+          next.push(id);
+        }
+        return next;
+      });
+    },
+    [activeEncryptedFileId],
+  );
 
   useEffect(() => {
     const previousIds = observedFileIdsRef.current;
@@ -125,7 +132,7 @@ function FileContextInner({
   useEffect(() => {
     if (!activeEncryptedFileId && encryptedQueue.length > 0) {
       setActiveEncryptedFileId(encryptedQueue[0]);
-      setEncryptedQueue(prev => prev.slice(1));
+      setEncryptedQueue((prev) => prev.slice(1));
     }
   }, [activeEncryptedFileId, encryptedQueue]);
 
@@ -136,7 +143,7 @@ function FileContextInner({
   }, [activeEncryptedFileId, state.files.ids]);
 
   useEffect(() => {
-    setUnlockPassword('');
+    setUnlockPassword("");
     setUnlockError(null);
   }, [activeEncryptedFileId]);
 
@@ -155,12 +162,12 @@ function FileContextInner({
 
     dismissedEncryptedFilesRef.current.delete(fileId);
 
-    setEncryptedQueue(prevQueue => prevQueue.filter(id => id !== fileId));
+    setEncryptedQueue((prevQueue) => prevQueue.filter((id) => id !== fileId));
 
-    setActiveEncryptedFileId(currentActiveId => {
+    setActiveEncryptedFileId((currentActiveId) => {
       if (currentActiveId && currentActiveId !== fileId) {
-        setEncryptedQueue(prevQueue => {
-          const withoutDuplicates = prevQueue.filter(id => id !== currentActiveId && id !== fileId);
+        setEncryptedQueue((prevQueue) => {
+          const withoutDuplicates = prevQueue.filter((id) => id !== currentActiveId && id !== fileId);
           return [currentActiveId, ...withoutDuplicates];
         });
       }
@@ -169,50 +176,56 @@ function FileContextInner({
   }, []);
 
   // Create stable selectors (memoized once to avoid re-renders)
-  const selectors = useMemo<FileContextSelectors>(() =>
-    createFileSelectors(stateRef, filesRef),
-    [] // Empty deps - selectors are stable
+  const selectors = useMemo<FileContextSelectors>(
+    () => createFileSelectors(stateRef, filesRef),
+    [], // Empty deps - selectors are stable
   );
 
   // Navigation management removed - moved to NavigationContext
 
   // Navigation guard system functions
   const setHasUnsavedChanges = useCallback((hasChanges: boolean) => {
-    dispatch({ type: 'SET_UNSAVED_CHANGES', payload: { hasChanges } });
+    dispatch({ type: "SET_UNSAVED_CHANGES", payload: { hasChanges } });
   }, []);
 
   const selectFiles = (stirlingFiles: StirlingFile[]) => {
     const currentSelection = stateRef.current.ui.selectedFileIds;
-    const newFileIds = stirlingFiles.map(stirlingFile => stirlingFile.fileId);
-    dispatch({ type: 'SET_SELECTED_FILES', payload: { fileIds: [...currentSelection, ...newFileIds] } });
+    const newFileIds = stirlingFiles.map((stirlingFile) => stirlingFile.fileId);
+    dispatch({ type: "SET_SELECTED_FILES", payload: { fileIds: [...currentSelection, ...newFileIds] } });
   };
 
   // File operations using unified addFiles helper with persistence
-  const addRawFiles = useCallback(async (files: File[], options?: { insertAfterPageId?: string; selectFiles?: boolean; skipAutoUnzip?: boolean }): Promise<StirlingFile[]> => {
-    const stirlingFiles = await addFiles(
-      {
-        files,
-        ...options,
-        // For direct file uploads: ALWAYS unzip (except HTML ZIPs)
-        // skipAutoUnzip bypasses preference checks - HTML detection still applies
-        skipAutoUnzip: true,
-        // Provide confirmation callback for large ZIP files
-        confirmLargeExtraction: requestConfirmation
-      },
-      stateRef,
-      filesRef,
-      dispatch,
-      lifecycleManager,
-      enablePersistence
-    );
+  const addRawFiles = useCallback(
+    async (
+      files: File[],
+      options?: { insertAfterPageId?: string; selectFiles?: boolean; skipAutoUnzip?: boolean },
+    ): Promise<StirlingFile[]> => {
+      const stirlingFiles = await addFiles(
+        {
+          files,
+          ...options,
+          // For direct file uploads: ALWAYS unzip (except HTML ZIPs)
+          // skipAutoUnzip bypasses preference checks - HTML detection still applies
+          skipAutoUnzip: true,
+          // Provide confirmation callback for large ZIP files
+          confirmLargeExtraction: requestConfirmation,
+        },
+        stateRef,
+        filesRef,
+        dispatch,
+        lifecycleManager,
+        enablePersistence,
+      );
 
-    // Auto-select the newly added files if requested
-    if (options?.selectFiles && stirlingFiles.length > 0) {
-      selectFiles(stirlingFiles);
-    }
+      // Auto-select the newly added files if requested
+      if (options?.selectFiles && stirlingFiles.length > 0) {
+        selectFiles(stirlingFiles);
+      }
 
-    return stirlingFiles;
-  }, [enablePersistence, requestConfirmation]);
+      return stirlingFiles;
+    },
+    [enablePersistence, requestConfirmation],
+  );
 
   const addFilesWithOptions = useCallback(
     async (
@@ -225,7 +238,7 @@ function FileContextInner({
         skipAutoUnzip?: boolean;
         confirmLargeExtraction?: (fileCount: number, fileName: string) => Promise<boolean>;
         allowDuplicates?: boolean;
-      }
+      },
     ): Promise<StirlingFile[]> => {
       const stirlingFiles = await addFiles(
         {
@@ -236,7 +249,7 @@ function FileContextInner({
         filesRef,
         dispatch,
         lifecycleManager,
-        enablePersistence
+        enablePersistence,
       );
 
       if (options?.selectFiles && stirlingFiles.length > 0) {
@@ -245,70 +258,85 @@ function FileContextInner({
 
       return stirlingFiles;
     },
-    [enablePersistence]
+    [enablePersistence],
   );
 
-  const addStirlingFileStubsAction = useCallback(async (stirlingFileStubs: StirlingFileStub[], options?: { insertAfterPageId?: string; selectFiles?: boolean }): Promise<StirlingFile[]> => {
-    // StirlingFileStubs preserve all metadata - perfect for FileManager use case!
-    const result = await addStirlingFileStubs(stirlingFileStubs, options, stateRef, filesRef, dispatch, lifecycleManager);
+  const addStirlingFileStubsAction = useCallback(
+    async (
+      stirlingFileStubs: StirlingFileStub[],
+      options?: { insertAfterPageId?: string; selectFiles?: boolean },
+    ): Promise<StirlingFile[]> => {
+      // StirlingFileStubs preserve all metadata - perfect for FileManager use case!
+      const result = await addStirlingFileStubs(stirlingFileStubs, options, stateRef, filesRef, dispatch, lifecycleManager);
 
-    // Auto-select the newly added files if requested
-    if (options?.selectFiles && result.length > 0) {
-      selectFiles(result);
-    }
-
-    return result;
-  }, []);
+      // Auto-select the newly added files if requested
+      if (options?.selectFiles && result.length > 0) {
+        selectFiles(result);
+      }
 
+      return result;
+    },
+    [],
+  );
 
   // Action creators
   const baseActions = useMemo(() => createFileActions(dispatch), []);
 
   // Helper functions for pinned files
-  const consumeFilesWrapper = useCallback(async (inputFileIds: FileId[], outputStirlingFiles: StirlingFile[], outputStirlingFileStubs: StirlingFileStub[]): Promise<FileId[]> => {
-    return consumeFiles(inputFileIds, outputStirlingFiles, outputStirlingFileStubs, filesRef, dispatch);
-  }, []);
+  const consumeFilesWrapper = useCallback(
+    async (
+      inputFileIds: FileId[],
+      outputStirlingFiles: StirlingFile[],
+      outputStirlingFileStubs: StirlingFileStub[],
+    ): Promise<FileId[]> => {
+      return consumeFiles(inputFileIds, outputStirlingFiles, outputStirlingFileStubs, filesRef, dispatch);
+    },
+    [],
+  );
 
-  const runAutomaticPasswordRemoval = useCallback(async (fileId: FileId, password: string): Promise<void> => {
-    const file = filesRef.current.get(fileId);
-    const parentStub = stateRef.current.files.byId[fileId];
+  const runAutomaticPasswordRemoval = useCallback(
+    async (fileId: FileId, password: string): Promise<void> => {
+      const file = filesRef.current.get(fileId);
+      const parentStub = stateRef.current.files.byId[fileId];
 
-    if (!file || !parentStub) {
-      throw new Error(t('encryptedPdfUnlock.missingFile', 'The selected file is no longer available.'));
-    }
+      if (!file || !parentStub) {
+        throw new Error(t("encryptedPdfUnlock.missingFile", "The selected file is no longer available."));
+      }
 
-    const params: RemovePasswordParameters = { password };
-    const formData = buildRemovePasswordFormData(params, file);
+      const params: RemovePasswordParameters = { password };
+      const formData = buildRemovePasswordFormData(params, file);
 
-    const response = await apiClient.post('/api/v1/security/remove-password', formData, {
-      responseType: 'blob',
-      suppressErrorToast: true  // Handle errors in modal UI instead of toast
-    });
-    const responseFiles = await processResponse(response.data, [file]);
+      const response = await apiClient.post("/api/v1/security/remove-password", formData, {
+        responseType: "blob",
+        suppressErrorToast: true, // Handle errors in modal UI instead of toast
+      });
+      const responseFiles = await processResponse(response.data, [file]);
 
-    const unlockedFile = responseFiles[0];
-    if (!unlockedFile) {
-      throw new Error(t('encryptedPdfUnlock.emptyResponse', 'Password removal did not produce a file.'));
-    }
+      const unlockedFile = responseFiles[0];
+      if (!unlockedFile) {
+        throw new Error(t("encryptedPdfUnlock.emptyResponse", "Password removal did not produce a file."));
+      }
 
-    const processedMetadata = await generateProcessedFileMetadata(unlockedFile);
-    const thumbnail = processedMetadata?.thumbnailUrl;
+      const processedMetadata = await generateProcessedFileMetadata(unlockedFile);
+      const thumbnail = processedMetadata?.thumbnailUrl;
 
-    const operation: ToolOperation = {
-      toolId: 'removePassword',
-      timestamp: Date.now()
-    };
+      const operation: ToolOperation = {
+        toolId: "removePassword",
+        timestamp: Date.now(),
+      };
 
-    const childStub = createChildStub(parentStub, operation, unlockedFile, thumbnail, processedMetadata);
-    const stirlingUnlockedFile = createStirlingFile(unlockedFile, childStub.id);
+      const childStub = createChildStub(parentStub, operation, unlockedFile, thumbnail, processedMetadata);
+      const stirlingUnlockedFile = createStirlingFile(unlockedFile, childStub.id);
 
-    await consumeFilesWrapper([fileId], [stirlingUnlockedFile], [childStub]);
-  }, [consumeFilesWrapper, t]);
+      await consumeFilesWrapper([fileId], [stirlingUnlockedFile], [childStub]);
+    },
+    [consumeFilesWrapper, t],
+  );
 
   const handleUnlockSubmit = useCallback(async () => {
     if (!activeEncryptedFileId) return;
     if (!unlockPassword.trim()) {
-      setUnlockError(t('encryptedPdfUnlock.required', 'Enter the password to continue.'));
+      setUnlockError(t("encryptedPdfUnlock.required", "Enter the password to continue."));
       return;
     }
 
@@ -318,14 +346,14 @@ function FileContextInner({
       await runAutomaticPasswordRemoval(activeEncryptedFileId, unlockPassword.trim());
       const fileName = stateRef.current.files.byId[activeEncryptedFileId]?.name;
       alert({
-        alertType: 'success',
-        title: t('encryptedPdfUnlock.successTitle', 'Password removed'),
+        alertType: "success",
+        title: t("encryptedPdfUnlock.successTitle", "Password removed"),
         body: fileName
-          ? t('encryptedPdfUnlock.successBodyWithName', {
-              defaultValue: 'Removed password from {{fileName}}',
+          ? t("encryptedPdfUnlock.successBodyWithName", {
+              defaultValue: "Removed password from {{fileName}}",
               fileName,
             })
-          : t('encryptedPdfUnlock.successBody', 'Password removed successfully.'),
+          : t("encryptedPdfUnlock.successBody", "Password removed successfully."),
         expandable: false,
         isPersistentPopup: false,
       });
@@ -334,8 +362,8 @@ function FileContextInner({
     } catch (error) {
       const errorMessage = await handlePasswordError(
         error,
-        t('encryptedPdfUnlock.incorrectPassword', 'Incorrect password'),
-        t('removePassword.error.failed', 'An error occurred while removing the password from the PDF.')
+        t("encryptedPdfUnlock.incorrectPassword", "Incorrect password"),
+        t("removePassword.error.failed", "An error occurred while removing the password from the PDF."),
       );
       setUnlockError(errorMessage);
     } finally {
@@ -343,102 +371,119 @@ function FileContextInner({
     }
   }, [activeEncryptedFileId, unlockPassword, runAutomaticPasswordRemoval, t]);
 
-  const undoConsumeFilesWrapper = useCallback(async (inputFiles: File[], inputStirlingFileStubs: StirlingFileStub[], outputFileIds: FileId[]): Promise<void> => {
-    return undoConsumeFiles(inputFiles, inputStirlingFileStubs, outputFileIds, filesRef, dispatch, indexedDB);
-  }, [indexedDB]);
+  const undoConsumeFilesWrapper = useCallback(
+    async (inputFiles: File[], inputStirlingFileStubs: StirlingFileStub[], outputFileIds: FileId[]): Promise<void> => {
+      return undoConsumeFiles(inputFiles, inputStirlingFileStubs, outputFileIds, filesRef, dispatch, indexedDB);
+    },
+    [indexedDB],
+  );
 
   // File pinning functions - use StirlingFile directly
-  const pinFileWrapper = useCallback((file: StirlingFile) => {
-    baseActions.pinFile(file.fileId);
-  }, [baseActions]);
+  const pinFileWrapper = useCallback(
+    (file: StirlingFile) => {
+      baseActions.pinFile(file.fileId);
+    },
+    [baseActions],
+  );
 
-  const unpinFileWrapper = useCallback((file: StirlingFile) => {
-    baseActions.unpinFile(file.fileId);
-  }, [baseActions]);
+  const unpinFileWrapper = useCallback(
+    (file: StirlingFile) => {
+      baseActions.unpinFile(file.fileId);
+    },
+    [baseActions],
+  );
 
   // Complete actions object
-  const actions = useMemo<FileContextActions>(() => ({
-    ...baseActions,
-    addFiles: addRawFiles,
-    addFilesWithOptions,
-    addStirlingFileStubs: addStirlingFileStubsAction,
-    removeFiles: async (fileIds: FileId[], deleteFromStorage?: boolean) => {
-      // Remove from memory and cleanup resources
-      lifecycleManager.removeFiles(fileIds, stateRef);
+  const actions = useMemo<FileContextActions>(
+    () => ({
+      ...baseActions,
+      addFiles: addRawFiles,
+      addFilesWithOptions,
+      addStirlingFileStubs: addStirlingFileStubsAction,
+      removeFiles: async (fileIds: FileId[], deleteFromStorage?: boolean) => {
+        // Remove from memory and cleanup resources
+        lifecycleManager.removeFiles(fileIds, stateRef);
 
-      // Remove from IndexedDB if enabled
-      if (indexedDB && enablePersistence && deleteFromStorage !== false) {
-        try {
-          await indexedDB.deleteMultiple(fileIds);
-        } catch (error) {
-          console.error('Failed to delete files from IndexedDB:', error);
+        // Remove from IndexedDB if enabled
+        if (indexedDB && enablePersistence && deleteFromStorage !== false) {
+          try {
+            await indexedDB.deleteMultiple(fileIds);
+          } catch (error) {
+            console.error("Failed to delete files from IndexedDB:", error);
+          }
         }
-      }
-    },
-    updateStirlingFileStub: (fileId: FileId, updates: Partial<StirlingFileStub>) =>
-      lifecycleManager.updateStirlingFileStub(fileId, updates, stateRef),
-    reorderFiles: (orderedFileIds: FileId[]) => {
-      dispatch({ type: 'REORDER_FILES', payload: { orderedFileIds } });
-    },
-    clearAllFiles: async () => {
-      lifecycleManager.cleanupAllFiles();
-      filesRef.current.clear();
-      dispatch({ type: 'RESET_CONTEXT' });
+      },
+      updateStirlingFileStub: (fileId: FileId, updates: Partial<StirlingFileStub>) =>
+        lifecycleManager.updateStirlingFileStub(fileId, updates, stateRef),
+      reorderFiles: (orderedFileIds: FileId[]) => {
+        dispatch({ type: "REORDER_FILES", payload: { orderedFileIds } });
+      },
+      clearAllFiles: async () => {
+        lifecycleManager.cleanupAllFiles();
+        filesRef.current.clear();
+        dispatch({ type: "RESET_CONTEXT" });
 
-      // Don't clear IndexedDB automatically - only clear in-memory state
-      // IndexedDB should only be cleared when explicitly requested by user
-    },
-    clearAllData: async () => {
-      // First clear all files from memory
-      lifecycleManager.cleanupAllFiles();
-      filesRef.current.clear();
-      dispatch({ type: 'RESET_CONTEXT' });
+        // Don't clear IndexedDB automatically - only clear in-memory state
+        // IndexedDB should only be cleared when explicitly requested by user
+      },
+      clearAllData: async () => {
+        // First clear all files from memory
+        lifecycleManager.cleanupAllFiles();
+        filesRef.current.clear();
+        dispatch({ type: "RESET_CONTEXT" });
 
-      // Then clear IndexedDB storage
-      if (indexedDB && enablePersistence) {
-        try {
-          await indexedDB.clearAll();
-        } catch (error) {
-          console.error('Failed to clear IndexedDB:', error);
+        // Then clear IndexedDB storage
+        if (indexedDB && enablePersistence) {
+          try {
+            await indexedDB.clearAll();
+          } catch (error) {
+            console.error("Failed to clear IndexedDB:", error);
+          }
         }
-      }
-    },
-    // Pinned files functionality with File object wrappers
-    pinFile: pinFileWrapper,
-    unpinFile: unpinFileWrapper,
-    consumeFiles: consumeFilesWrapper,
-    undoConsumeFiles: undoConsumeFilesWrapper,
-    setHasUnsavedChanges,
-    trackBlobUrl: lifecycleManager.trackBlobUrl,
-    cleanupFile: (fileId: FileId) => lifecycleManager.cleanupFile(fileId, stateRef),
-    scheduleCleanup: (fileId: FileId, delay?: number) =>
-      lifecycleManager.scheduleCleanup(fileId, delay, stateRef),
-    openEncryptedUnlockPrompt: promptEncryptedUnlock
-  }), [
-    baseActions,
-    addRawFiles,
-    addStirlingFileStubsAction,
-    lifecycleManager,
-    setHasUnsavedChanges,
-    consumeFilesWrapper,
-    undoConsumeFilesWrapper,
-    pinFileWrapper,
-    unpinFileWrapper,
-    indexedDB,
-    enablePersistence,
-    promptEncryptedUnlock
-  ]);
+      },
+      // Pinned files functionality with File object wrappers
+      pinFile: pinFileWrapper,
+      unpinFile: unpinFileWrapper,
+      consumeFiles: consumeFilesWrapper,
+      undoConsumeFiles: undoConsumeFilesWrapper,
+      setHasUnsavedChanges,
+      trackBlobUrl: lifecycleManager.trackBlobUrl,
+      cleanupFile: (fileId: FileId) => lifecycleManager.cleanupFile(fileId, stateRef),
+      scheduleCleanup: (fileId: FileId, delay?: number) => lifecycleManager.scheduleCleanup(fileId, delay, stateRef),
+      openEncryptedUnlockPrompt: promptEncryptedUnlock,
+    }),
+    [
+      baseActions,
+      addRawFiles,
+      addStirlingFileStubsAction,
+      lifecycleManager,
+      setHasUnsavedChanges,
+      consumeFilesWrapper,
+      undoConsumeFilesWrapper,
+      pinFileWrapper,
+      unpinFileWrapper,
+      indexedDB,
+      enablePersistence,
+      promptEncryptedUnlock,
+    ],
+  );
 
   // Split context values to minimize re-renders
-  const stateValue = useMemo<FileContextStateValue>(() => ({
-    state,
-    selectors
-  }), [state, selectors]);
+  const stateValue = useMemo<FileContextStateValue>(
+    () => ({
+      state,
+      selectors,
+    }),
+    [state, selectors],
+  );
 
-  const actionsValue = useMemo<FileContextActionsValue>(() => ({
-    actions,
-    dispatch
-  }), [actions]);
+  const actionsValue = useMemo<FileContextActionsValue>(
+    () => ({
+      actions,
+      dispatch,
+    }),
+    [actions],
+  );
 
   const activeEncryptedStub = activeEncryptedFileId ? state.files.byId[activeEncryptedFileId] : undefined;
   const isUnlockModalOpen = Boolean(activeEncryptedFileId && activeEncryptedStub);
@@ -453,7 +498,7 @@ function FileContextInner({
   // Cleanup on unmount
   useEffect(() => {
     return () => {
-      if (DEBUG) console.log('FileContext unmounting - cleaning up all resources');
+      if (DEBUG) console.log("FileContext unmounting - cleaning up all resources");
       lifecycleManager.destroy();
     };
   }, [lifecycleManager]);
@@ -485,28 +530,18 @@ function FileContextInner({
 }
 
 // Outer provider component that wraps with IndexedDBProvider
-export function FileContextProvider({
-  children,
-  enableUrlSync = true,
-  enablePersistence = true
-}: FileContextProviderProps) {
+export function FileContextProvider({ children, enableUrlSync = true, enablePersistence = true }: FileContextProviderProps) {
   if (enablePersistence) {
     return (
       <IndexedDBProvider>
-        <FileContextInner
-          enableUrlSync={enableUrlSync}
-          enablePersistence={enablePersistence}
-        >
+        <FileContextInner enableUrlSync={enableUrlSync} enablePersistence={enablePersistence}>
           {children}
         </FileContextInner>
       </IndexedDBProvider>
     );
   } else {
     return (
-      <FileContextInner
-        enableUrlSync={enableUrlSync}
-        enablePersistence={enablePersistence}
-      >
+      <FileContextInner enableUrlSync={enableUrlSync} enablePersistence={enablePersistence}>
         {children}
       </FileContextInner>
     );
@@ -525,5 +560,5 @@ export {
   useAllFiles,
   useSelectedFiles,
   // Primary API hooks for tools
-  useFileContext
-} from '@app/contexts/file/fileHooks';
+  useFileContext,
+} from "@app/contexts/file/fileHooks";
diff --git a/frontend/src/core/contexts/FileManagerContext.tsx b/frontend/src/core/contexts/FileManagerContext.tsx
index 3ca5307314..5f7cc98baf 100644
--- a/frontend/src/core/contexts/FileManagerContext.tsx
+++ b/frontend/src/core/contexts/FileManagerContext.tsx
@@ -1,28 +1,25 @@
-import React, { createContext, useContext, useState, useRef, useCallback, useEffect, useMemo } from 'react';
-import { Button, Group, Modal, Stack, Text } from '@mantine/core';
-import { fileStorage } from '@app/services/fileStorage';
-import { useFileActions } from '@app/contexts/FileContext';
-import { zipFileService } from '@app/services/zipFileService';
-import { StirlingFileStub } from '@app/types/fileContext';
-import { downloadFiles } from '@app/utils/downloadUtils';
-import { FileId } from '@app/types/file';
-import { groupFilesByOriginal } from '@app/utils/fileHistoryUtils';
-import { Z_INDEX_OVER_FILE_MANAGER_MODAL } from '@app/styles/zIndex';
-import apiClient from '@app/services/apiClient';
-import { alert } from '@app/components/toast';
-import {
-  extractLatestFilesFromBundle,
-  parseContentDispositionFilename,
-} from '@app/services/shareBundleUtils';
-import { useTranslation } from 'react-i18next';
-import { openFilesFromDisk } from '@app/services/openFilesFromDisk';
-export { pendingFilePathMappings } from '@app/services/pendingFilePathMappings';
+import React, { createContext, useContext, useState, useRef, useCallback, useEffect, useMemo } from "react";
+import { Button, Group, Modal, Stack, Text } from "@mantine/core";
+import { fileStorage } from "@app/services/fileStorage";
+import { useFileActions } from "@app/contexts/FileContext";
+import { zipFileService } from "@app/services/zipFileService";
+import { StirlingFileStub } from "@app/types/fileContext";
+import { downloadFiles } from "@app/utils/downloadUtils";
+import { FileId } from "@app/types/file";
+import { groupFilesByOriginal } from "@app/utils/fileHistoryUtils";
+import { Z_INDEX_OVER_FILE_MANAGER_MODAL } from "@app/styles/zIndex";
+import apiClient from "@app/services/apiClient";
+import { alert } from "@app/components/toast";
+import { extractLatestFilesFromBundle, parseContentDispositionFilename } from "@app/services/shareBundleUtils";
+import { useTranslation } from "react-i18next";
+import { openFilesFromDisk } from "@app/services/openFilesFromDisk";
+export { pendingFilePathMappings } from "@app/services/pendingFilePathMappings";
 
 // Type for the context value - now contains everything directly
 interface FileManagerContextValue {
   // State
-  activeSource: 'recent' | 'local' | 'drive';
-  storageFilter: 'all' | 'local' | 'sharedWithMe' | 'sharedByMe';
+  activeSource: "recent" | "local" | "drive";
+  storageFilter: "all" | "local" | "sharedWithMe" | "sharedByMe";
   selectedFileIds: FileId[];
   searchTerm: string;
   selectedFiles: StirlingFileStub[];
@@ -36,8 +33,8 @@ interface FileManagerContextValue {
   activeFileIds: FileId[];
 
   // Handlers
-  onSourceChange: (source: 'recent' | 'local' | 'drive') => void;
-  onStorageFilterChange: (filter: 'all' | 'local' | 'sharedWithMe' | 'sharedByMe') => void;
+  onSourceChange: (source: "recent" | "local" | "drive") => void;
+  onStorageFilterChange: (filter: "all" | "local" | "sharedWithMe" | "sharedByMe") => void;
   onLocalFileClick: () => void;
   onFileSelect: (file: StirlingFileStub, index: number, shiftKey?: boolean) => void;
   onFileRemove: (index: number) => void;
@@ -83,7 +80,7 @@ interface FileManagerProviderProps {
   activeFileIds: FileId[];
 }
 
-type RemoteDeleteChoice = 'local' | 'server' | 'both' | 'leave' | 'cancel';
+type RemoteDeleteChoice = "local" | "server" | "both" | "leave" | "cancel";
 
 export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
   children,
@@ -99,12 +96,10 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
   isLoading,
   activeFileIds,
 }) => {
-  const [activeSource, setActiveSource] = useState<'recent' | 'local' | 'drive'>('recent');
-  const [storageFilter, setStorageFilter] = useState<
-    'all' | 'local' | 'sharedWithMe' | 'sharedByMe'
-  >('all');
+  const [activeSource, setActiveSource] = useState<"recent" | "local" | "drive">("recent");
+  const [storageFilter, setStorageFilter] = useState<"all" | "local" | "sharedWithMe" | "sharedByMe">("all");
   const [selectedFileIds, setSelectedFileIds] = useState<FileId[]>([]);
-  const [searchTerm, setSearchTerm] = useState('');
+  const [searchTerm, setSearchTerm] = useState("");
   const [lastClickedIndex, setLastClickedIndex] = useState<number | null>(null);
   const [expandedFileIds, setExpandedFileIds] = useState<Set<FileId>>(new Set());
   const [loadedHistoryFiles, setLoadedHistoryFiles] = useState<Map<FileId, StirlingFileStub[]>>(new Map()); // Cache for loaded history
@@ -117,7 +112,6 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
   // Track blob URLs for cleanup
   const createdBlobUrls = useRef<Set<string>>(new Set());
 
-
   // Computed values (with null safety)
   const selectedFilesSet = new Set(selectedFileIds);
 
@@ -126,10 +120,10 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
     if (!recentFiles || recentFiles.length === 0) return new Map();
 
     // Convert StirlingFileStub to FileRecord-like objects for grouping utility
-    const recordsForGrouping = recentFiles.map(file => ({
+    const recordsForGrouping = recentFiles.map((file) => ({
       ...file,
       originalFileId: file.originalFileId,
-      versionNumber: file.versionNumber || 1
+      versionNumber: file.versionNumber || 1,
     }));
 
     return groupFilesByOriginal(recordsForGrouping);
@@ -140,49 +134,39 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
     if (!recentFiles || recentFiles.length === 0) return [];
 
     // Only return leaf files - history files will be handled by separate components
-    if (storageFilter === 'sharedWithMe') {
-      return recentFiles.filter(
-        (file) => file.remoteOwnedByCurrentUser === false || file.remoteSharedViaLink
-      );
+    if (storageFilter === "sharedWithMe") {
+      return recentFiles.filter((file) => file.remoteOwnedByCurrentUser === false || file.remoteSharedViaLink);
     }
-    if (storageFilter === 'sharedByMe') {
-      return recentFiles.filter(
-        (file) => file.remoteOwnedByCurrentUser !== false && file.remoteHasShareLinks
-      );
+    if (storageFilter === "sharedByMe") {
+      return recentFiles.filter((file) => file.remoteOwnedByCurrentUser !== false && file.remoteHasShareLinks);
     }
-    if (storageFilter === 'local') {
-      return recentFiles.filter(
-        (file) => !file.remoteStorageId && !file.remoteSharedViaLink
-      );
+    if (storageFilter === "local") {
+      return recentFiles.filter((file) => !file.remoteStorageId && !file.remoteSharedViaLink);
     }
     return recentFiles;
   }, [recentFiles, storageFilter]);
 
-  const selectedFiles = selectedFileIds.length === 0 ? [] :
-    displayFiles.filter(file => selectedFilesSet.has(file.id));
+  const selectedFiles = selectedFileIds.length === 0 ? [] : displayFiles.filter((file) => selectedFilesSet.has(file.id));
 
+  const filteredFiles = !searchTerm
+    ? displayFiles
+    : displayFiles.filter((file) => file.name.toLowerCase().includes(searchTerm.toLowerCase()));
 
-  const filteredFiles = !searchTerm ? displayFiles :
-    displayFiles.filter(file =>
-      file.name.toLowerCase().includes(searchTerm.toLowerCase())
-    );
-
-  const handleSourceChange = useCallback((source: 'recent' | 'local' | 'drive') => {
+  const handleSourceChange = useCallback((source: "recent" | "local" | "drive") => {
     setActiveSource(source);
-    if (source !== 'recent') {
+    if (source !== "recent") {
       setSelectedFileIds([]);
-      setSearchTerm('');
+      setSearchTerm("");
       setLastClickedIndex(null);
     }
   }, []);
 
-  const handleStorageFilterChange = useCallback((filter: 'all' | 'local' | 'sharedWithMe' | 'sharedByMe') => {
+  const handleStorageFilterChange = useCallback((filter: "all" | "local" | "sharedWithMe" | "sharedByMe") => {
     setStorageFilter(filter);
     setSelectedFileIds([]);
     setLastClickedIndex(null);
   }, []);
 
-
   const requestDeleteChoice = useCallback((file: StirlingFileStub): Promise<RemoteDeleteChoice> => {
     return new Promise((resolve) => {
       deletePromptResolveRef.current = resolve;
@@ -198,16 +182,19 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
   }, []);
 
   const handleLocalFileClick = useCallback(async () => {
-    console.log('[FileManager] Opening file dialog...');
+    console.log("[FileManager] Opening file dialog...");
 
     // Try native dialog first (desktop), falls back to empty array (web)
     const files = await openFilesFromDisk({
       multiple: true,
-      onFallbackOpen: () => fileInputRef.current?.click()
+      onFallbackOpen: () => fileInputRef.current?.click(),
     });
 
     if (files.length > 0) {
-      console.log('[FileManager] Passing files to FileContext:', files.map(f => f.name));
+      console.log(
+        "[FileManager] Passing files to FileContext:",
+        files.map((f) => f.name),
+      );
       onNewFilesSelect(files);
 
       await refreshRecentFiles();
@@ -215,53 +202,53 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
     }
   }, [onNewFilesSelect, refreshRecentFiles, onClose]);
 
-  const handleFileSelect = useCallback((file: StirlingFileStub, currentIndex: number, shiftKey?: boolean) => {
-    const fileId = file.id;
-    if (!fileId) return;
+  const handleFileSelect = useCallback(
+    (file: StirlingFileStub, currentIndex: number, shiftKey?: boolean) => {
+      const fileId = file.id;
+      if (!fileId) return;
 
-    if (shiftKey && lastClickedIndex !== null) {
-      // Range selection with shift-click
-      const startIndex = Math.min(lastClickedIndex, currentIndex);
-      const endIndex = Math.max(lastClickedIndex, currentIndex);
+      if (shiftKey && lastClickedIndex !== null) {
+        // Range selection with shift-click
+        const startIndex = Math.min(lastClickedIndex, currentIndex);
+        const endIndex = Math.max(lastClickedIndex, currentIndex);
 
-      setSelectedFileIds(prev => {
-        const selectedSet = new Set(prev);
+        setSelectedFileIds((prev) => {
+          const selectedSet = new Set(prev);
 
-        // Add all files in the range to selection
-        for (let i = startIndex; i <= endIndex; i++) {
-          const rangeFileId = filteredFiles[i]?.id;
-          if (rangeFileId) {
-            selectedSet.add(rangeFileId);
+          // Add all files in the range to selection
+          for (let i = startIndex; i <= endIndex; i++) {
+            const rangeFileId = filteredFiles[i]?.id;
+            if (rangeFileId) {
+              selectedSet.add(rangeFileId);
+            }
           }
-        }
 
-        return Array.from(selectedSet);
-      });
-    } else {
-      // Normal click behavior - optimized with Set for O(1) lookup
-      setSelectedFileIds(prev => {
-        const selectedSet = new Set(prev);
+          return Array.from(selectedSet);
+        });
+      } else {
+        // Normal click behavior - optimized with Set for O(1) lookup
+        setSelectedFileIds((prev) => {
+          const selectedSet = new Set(prev);
 
-        if (selectedSet.has(fileId)) {
-          selectedSet.delete(fileId);
-        } else {
-          selectedSet.add(fileId);
-        }
+          if (selectedSet.has(fileId)) {
+            selectedSet.delete(fileId);
+          } else {
+            selectedSet.add(fileId);
+          }
 
-        return Array.from(selectedSet);
-      });
+          return Array.from(selectedSet);
+        });
 
-      // Update last clicked index for future range selections
-      setLastClickedIndex(currentIndex);
-    }
-  }, [filteredFiles, lastClickedIndex]);
+        // Update last clicked index for future range selections
+        setLastClickedIndex(currentIndex);
+      }
+    },
+    [filteredFiles, lastClickedIndex],
+  );
 
   // Helper function to safely determine which files can be deleted
-  const getSafeFilesToDelete = useCallback((
-    fileIds: FileId[],
-    allStoredStubs: StirlingFileStub[]
-  ): FileId[] => {
-    const fileMap = new Map(allStoredStubs.map(f => [f.id, f]));
+  const getSafeFilesToDelete = useCallback((fileIds: FileId[], allStoredStubs: StirlingFileStub[]): FileId[] => {
+    const fileMap = new Map(allStoredStubs.map((f) => [f.id, f]));
     const filesToDelete = new Set<FileId>();
     const filesToPreserve = new Set<FileId>();
 
@@ -278,12 +265,12 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
         const originalFileId = currentFile.originalFileId || currentFile.id;
 
         // Find all files in this history chain
-        const chainFiles = allStoredStubs.filter((file: StirlingFileStub) =>
-          (file.originalFileId || file.id) === originalFileId
+        const chainFiles = allStoredStubs.filter(
+          (file: StirlingFileStub) => (file.originalFileId || file.id) === originalFileId,
         );
 
         // Add all files in this lineage as candidates for deletion
-        chainFiles.forEach(file => filesToDelete.add(file.id));
+        chainFiles.forEach((file) => filesToDelete.add(file.id));
       }
     }
 
@@ -294,20 +281,20 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
       // If this file is a leaf node (not being deleted) and its lineage overlaps with files we want to delete
       if (file.isLeaf !== false && !fileIds.includes(file.id)) {
         // Find all files in this preserved lineage
-        const preservedChainFiles = allStoredStubs.filter((chainFile: StirlingFileStub) =>
-          (chainFile.originalFileId || chainFile.id) === fileOriginalId
+        const preservedChainFiles = allStoredStubs.filter(
+          (chainFile: StirlingFileStub) => (chainFile.originalFileId || chainFile.id) === fileOriginalId,
         );
 
         // Mark all files in this preserved lineage as must-preserve
-        preservedChainFiles.forEach(chainFile => filesToPreserve.add(chainFile.id));
+        preservedChainFiles.forEach((chainFile) => filesToPreserve.add(chainFile.id));
       }
     }
 
     // Final list: files to delete minus files that must be preserved
-    let safeToDelete = Array.from(filesToDelete).filter(fileId => !filesToPreserve.has(fileId));
+    let safeToDelete = Array.from(filesToDelete).filter((fileId) => !filesToPreserve.has(fileId));
 
     // Check for orphaned non-leaf files after main deletion
-    const remainingFiles = allStoredStubs.filter(file => !safeToDelete.includes(file.id));
+    const remainingFiles = allStoredStubs.filter((file) => !safeToDelete.includes(file.id));
     const orphanedNonLeafFiles: FileId[] = [];
 
     for (const file of remainingFiles) {
@@ -316,7 +303,7 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
         const fileOriginalId = file.originalFileId || file.id;
 
         // Check if this non-leaf file has any living descendants
-        const hasLivingDescendants = remainingFiles.some(otherFile => {
+        const hasLivingDescendants = remainingFiles.some((otherFile) => {
           // Check if otherFile is a descendant of this file
           const otherOriginalId = otherFile.originalFileId || otherFile.id;
           return (
@@ -340,222 +327,228 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
   }, []);
 
   // Shared internal delete logic
-  const performFileDelete = useCallback(async (fileToRemove: StirlingFileStub, fileIndex: number) => {
-    let deleteChoice: RemoteDeleteChoice = 'local';
-    if (fileToRemove.remoteStorageId) {
-      deleteChoice = await requestDeleteChoice(fileToRemove);
-      if (deleteChoice === 'cancel') {
-        return;
-      }
-    }
-
-    const canDeleteServer = fileToRemove.remoteOwnedByCurrentUser !== false;
-    const shouldDeleteServer =
-      canDeleteServer && (deleteChoice === 'server' || deleteChoice === 'both');
-    const shouldDeleteLocal = deleteChoice === 'local' || deleteChoice === 'both';
-    const isServerOnly =
-      Boolean(fileToRemove.remoteStorageId) && fileToRemove.id.startsWith('server-');
-    const canLeaveShare =
-      fileToRemove.remoteOwnedByCurrentUser === false &&
-      !fileToRemove.remoteSharedViaLink &&
-      Boolean(fileToRemove.remoteStorageId);
-
-    if (deleteChoice === 'leave' && canLeaveShare && fileToRemove.remoteStorageId) {
-      try {
-        await apiClient.delete(
-          `/api/v1/storage/files/${fileToRemove.remoteStorageId}/shares/self`,
-          { suppressErrorToast: true } as any
-        );
-        await refreshRecentFiles();
-        alert({
-          alertType: 'success',
-          title: t('fileManager.leaveShareSuccess', 'Removed from your shared list.'),
-          expandable: false,
-          durationMs: 2500,
-        });
-        return;
-      } catch (error) {
-        console.error('Failed to leave shared file:', error);
-        alert({
-          alertType: 'error',
-          title: t('fileManager.leaveShareFailed', 'Could not remove the shared file.'),
-          expandable: false,
-          durationMs: 3500,
-        });
-        return;
-      }
-    }
-
-    if (shouldDeleteServer && fileToRemove.remoteStorageId) {
-      try {
-        await apiClient.delete(
-          `/api/v1/storage/files/${fileToRemove.remoteStorageId}`,
-          { suppressErrorToast: true } as any
-        );
-      } catch (error) {
-        console.error('Failed to delete file from server:', error);
-        alert({
-          alertType: 'error',
-          title: t(
-            'fileManager.removeServerFailed',
-            'Could not remove the file from the server.'
-          ),
-          expandable: false,
-          durationMs: 3500,
-        });
-        return;
+  const performFileDelete = useCallback(
+    async (fileToRemove: StirlingFileStub, fileIndex: number) => {
+      let deleteChoice: RemoteDeleteChoice = "local";
+      if (fileToRemove.remoteStorageId) {
+        deleteChoice = await requestDeleteChoice(fileToRemove);
+        if (deleteChoice === "cancel") {
+          return;
+        }
       }
 
-      if (!shouldDeleteLocal) {
-        const originalFileId = (fileToRemove.originalFileId || fileToRemove.id) as FileId;
-        const chain = await fileStorage.getHistoryChainStubs(originalFileId);
-        for (const stub of chain) {
-          await fileStorage.updateFileMetadata(stub.id, {
-            remoteStorageId: undefined,
-            remoteStorageUpdatedAt: undefined,
+      const canDeleteServer = fileToRemove.remoteOwnedByCurrentUser !== false;
+      const shouldDeleteServer = canDeleteServer && (deleteChoice === "server" || deleteChoice === "both");
+      const shouldDeleteLocal = deleteChoice === "local" || deleteChoice === "both";
+      const isServerOnly = Boolean(fileToRemove.remoteStorageId) && fileToRemove.id.startsWith("server-");
+      const canLeaveShare =
+        fileToRemove.remoteOwnedByCurrentUser === false &&
+        !fileToRemove.remoteSharedViaLink &&
+        Boolean(fileToRemove.remoteStorageId);
+
+      if (deleteChoice === "leave" && canLeaveShare && fileToRemove.remoteStorageId) {
+        try {
+          await apiClient.delete(`/api/v1/storage/files/${fileToRemove.remoteStorageId}/shares/self`, {
+            suppressErrorToast: true,
+          } as any);
+          await refreshRecentFiles();
+          alert({
+            alertType: "success",
+            title: t("fileManager.leaveShareSuccess", "Removed from your shared list."),
+            expandable: false,
+            durationMs: 2500,
           });
+          return;
+        } catch (error) {
+          console.error("Failed to leave shared file:", error);
+          alert({
+            alertType: "error",
+            title: t("fileManager.leaveShareFailed", "Could not remove the shared file."),
+            expandable: false,
+            durationMs: 3500,
+          });
+          return;
         }
+      }
+
+      if (shouldDeleteServer && fileToRemove.remoteStorageId) {
+        try {
+          await apiClient.delete(`/api/v1/storage/files/${fileToRemove.remoteStorageId}`, { suppressErrorToast: true } as any);
+        } catch (error) {
+          console.error("Failed to delete file from server:", error);
+          alert({
+            alertType: "error",
+            title: t("fileManager.removeServerFailed", "Could not remove the file from the server."),
+            expandable: false,
+            durationMs: 3500,
+          });
+          return;
+        }
+
+        if (!shouldDeleteLocal) {
+          const originalFileId = (fileToRemove.originalFileId || fileToRemove.id) as FileId;
+          const chain = await fileStorage.getHistoryChainStubs(originalFileId);
+          for (const stub of chain) {
+            await fileStorage.updateFileMetadata(stub.id, {
+              remoteStorageId: undefined,
+              remoteStorageUpdatedAt: undefined,
+            });
+          }
+          await refreshRecentFiles();
+          alert({
+            alertType: "success",
+            title: t("fileManager.removeServerSuccess", "Removed from server."),
+            expandable: false,
+            durationMs: 2500,
+          });
+          return;
+        }
+      }
+
+      if (shouldDeleteLocal && isServerOnly) {
         await refreshRecentFiles();
-        alert({
-          alertType: 'success',
-          title: t('fileManager.removeServerSuccess', 'Removed from server.'),
-          expandable: false,
-          durationMs: 2500,
-        });
         return;
       }
-    }
 
-    if (shouldDeleteLocal && isServerOnly) {
-      await refreshRecentFiles();
-      return;
-    }
+      const deletedFileId = fileToRemove.id;
 
-    const deletedFileId = fileToRemove.id;
+      // Get all stored files to analyze lineages
+      const allStoredStubs = await fileStorage.getAllStirlingFileStubs();
 
-    // Get all stored files to analyze lineages
-    const allStoredStubs = await fileStorage.getAllStirlingFileStubs();
+      // Get safe files to delete (respecting shared lineages)
+      const filesToDelete = getSafeFilesToDelete([deletedFileId], allStoredStubs);
 
-    // Get safe files to delete (respecting shared lineages)
-    const filesToDelete = getSafeFilesToDelete([deletedFileId], allStoredStubs);
+      // Clear from selection immediately
+      setSelectedFileIds((prev) => prev.filter((id) => !filesToDelete.includes(id)));
 
-    // Clear from selection immediately
-    setSelectedFileIds(prev => prev.filter(id => !filesToDelete.includes(id)));
+      // Clear from expanded state to prevent ghost entries
+      setExpandedFileIds((prev) => {
+        const newExpanded = new Set(prev);
+        filesToDelete.forEach((id) => newExpanded.delete(id));
+        return newExpanded;
+      });
 
-    // Clear from expanded state to prevent ghost entries
-    setExpandedFileIds(prev => {
-      const newExpanded = new Set(prev);
-      filesToDelete.forEach(id => newExpanded.delete(id));
-      return newExpanded;
-    });
+      // Clear from history cache - remove all files in the chain
+      setLoadedHistoryFiles((prev) => {
+        const newCache = new Map(prev);
 
-    // Clear from history cache - remove all files in the chain
-    setLoadedHistoryFiles(prev => {
-      const newCache = new Map(prev);
+        // Remove cache entries for all deleted files
+        filesToDelete.forEach((id) => newCache.delete(id as FileId));
 
-      // Remove cache entries for all deleted files
-      filesToDelete.forEach(id => newCache.delete(id as FileId));
-
-      // Also remove deleted files from any other file's history cache
-      for (const [mainFileId, historyFiles] of newCache.entries()) {
-        const filteredHistory = historyFiles.filter(histFile => !filesToDelete.includes(histFile.id));
-        if (filteredHistory.length !== historyFiles.length) {
-          newCache.set(mainFileId, filteredHistory);
+        // Also remove deleted files from any other file's history cache
+        for (const [mainFileId, historyFiles] of newCache.entries()) {
+          const filteredHistory = historyFiles.filter((histFile) => !filesToDelete.includes(histFile.id));
+          if (filteredHistory.length !== historyFiles.length) {
+            newCache.set(mainFileId, filteredHistory);
+          }
         }
+
+        return newCache;
+      });
+
+      // Delete safe files from IndexedDB
+      try {
+        for (const fileId of filesToDelete) {
+          await fileStorage.deleteStirlingFile(fileId as FileId);
+        }
+      } catch (error) {
+        console.error("Failed to delete files from chain:", error);
       }
 
-      return newCache;
-    });
+      // Call the parent's deletion logic for the main file only
+      onFileRemove(fileIndex);
 
-    // Delete safe files from IndexedDB
-    try {
-      for (const fileId of filesToDelete) {
-        await fileStorage.deleteStirlingFile(fileId as FileId);
+      // Refresh to ensure consistent state
+      await refreshRecentFiles();
+    },
+    [
+      getSafeFilesToDelete,
+      setSelectedFileIds,
+      setExpandedFileIds,
+      setLoadedHistoryFiles,
+      onFileRemove,
+      refreshRecentFiles,
+      requestDeleteChoice,
+      t,
+    ],
+  );
+
+  const handleFileRemove = useCallback(
+    async (index: number) => {
+      const fileToRemove = filteredFiles[index];
+      if (fileToRemove) {
+        await performFileDelete(fileToRemove, index);
       }
-    } catch (error) {
-      console.error('Failed to delete files from chain:', error);
-    }
-
-    // Call the parent's deletion logic for the main file only
-    onFileRemove(fileIndex);
-
-    // Refresh to ensure consistent state
-    await refreshRecentFiles();
-  }, [
-    getSafeFilesToDelete,
-    setSelectedFileIds,
-    setExpandedFileIds,
-    setLoadedHistoryFiles,
-    onFileRemove,
-    refreshRecentFiles,
-    requestDeleteChoice,
-    t,
-  ]);
-
-  const handleFileRemove = useCallback(async (index: number) => {
-    const fileToRemove = filteredFiles[index];
-    if (fileToRemove) {
-      await performFileDelete(fileToRemove, index);
-    }
-  }, [filteredFiles, performFileDelete]);
+    },
+    [filteredFiles, performFileDelete],
+  );
 
   // Handle deletion by fileId (more robust than index-based)
-  const handleFileRemoveById = useCallback(async (fileId: FileId) => {
-    // Find the file and its index in filteredFiles
-    const fileIndex = filteredFiles.findIndex(file => file.id === fileId);
-    const fileToRemove = filteredFiles[fileIndex];
+  const handleFileRemoveById = useCallback(
+    async (fileId: FileId) => {
+      // Find the file and its index in filteredFiles
+      const fileIndex = filteredFiles.findIndex((file) => file.id === fileId);
+      const fileToRemove = filteredFiles[fileIndex];
 
-    if (fileToRemove && fileIndex !== -1) {
-      await performFileDelete(fileToRemove, fileIndex);
-    }
-  }, [filteredFiles, performFileDelete]);
+      if (fileToRemove && fileIndex !== -1) {
+        await performFileDelete(fileToRemove, fileIndex);
+      }
+    },
+    [filteredFiles, performFileDelete],
+  );
 
   // Handle deletion of specific history files (not index-based)
-  const handleHistoryFileRemove = useCallback(async (fileToRemove: StirlingFileStub) => {
-    const deletedFileId = fileToRemove.id;
+  const handleHistoryFileRemove = useCallback(
+    async (fileToRemove: StirlingFileStub) => {
+      const deletedFileId = fileToRemove.id;
 
-    // Clear from expanded state to prevent ghost entries
-    setExpandedFileIds(prev => {
-      const newExpanded = new Set(prev);
-      newExpanded.delete(deletedFileId);
-      return newExpanded;
-    });
+      // Clear from expanded state to prevent ghost entries
+      setExpandedFileIds((prev) => {
+        const newExpanded = new Set(prev);
+        newExpanded.delete(deletedFileId);
+        return newExpanded;
+      });
 
-    // Clear from history cache - remove all files in the chain
-    setLoadedHistoryFiles(prev => {
-      const newCache = new Map(prev);
+      // Clear from history cache - remove all files in the chain
+      setLoadedHistoryFiles((prev) => {
+        const newCache = new Map(prev);
 
-      // Remove cache entries for all deleted files
-      newCache.delete(deletedFileId);
+        // Remove cache entries for all deleted files
+        newCache.delete(deletedFileId);
 
-      // Also remove deleted files from any other file's history cache
-      for (const [mainFileId, historyFiles] of newCache.entries()) {
-        const filteredHistory = historyFiles.filter(histFile => deletedFileId != histFile.id);
-        if (filteredHistory.length !== historyFiles.length) {
-          newCache.set(mainFileId, filteredHistory);
+        // Also remove deleted files from any other file's history cache
+        for (const [mainFileId, historyFiles] of newCache.entries()) {
+          const filteredHistory = historyFiles.filter((histFile) => deletedFileId != histFile.id);
+          if (filteredHistory.length !== historyFiles.length) {
+            newCache.set(mainFileId, filteredHistory);
+          }
         }
+
+        return newCache;
+      });
+
+      // Delete safe files from IndexedDB
+      try {
+        await fileStorage.deleteStirlingFile(deletedFileId);
+      } catch (error) {
+        console.error("Failed to delete files from chain:", error);
       }
 
-      return newCache;
-    });
+      // Refresh to ensure consistent state
+      await refreshRecentFiles();
+    },
+    [filteredFiles, onFileRemove, refreshRecentFiles, getSafeFilesToDelete],
+  );
 
-    // Delete safe files from IndexedDB
-    try {
-        await fileStorage.deleteStirlingFile(deletedFileId);
-    } catch (error) {
-      console.error('Failed to delete files from chain:', error);
-    }
-
-    // Refresh to ensure consistent state
-    await refreshRecentFiles();
-  }, [filteredFiles, onFileRemove, refreshRecentFiles, getSafeFilesToDelete]);
-
-  const handleFileDoubleClick = useCallback((file: StirlingFileStub) => {
-    if (isFileSupported(file.name)) {
-      onRecentFilesSelected([file]);
-      onClose();
-    }
-  }, [isFileSupported, onRecentFilesSelected, onClose]);
+  const handleFileDoubleClick = useCallback(
+    (file: StirlingFileStub) => {
+      if (isFileSupported(file.name)) {
+        onRecentFilesSelected([file]);
+        onClose();
+      }
+    },
+    [isFileSupported, onRecentFilesSelected, onClose],
+  );
 
   const handleOpenFiles = useCallback(() => {
     if (selectedFiles.length > 0) {
@@ -568,20 +561,23 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
     setSearchTerm(value);
   }, []);
 
-  const handleFileInputChange = useCallback(async (event: React.ChangeEvent<HTMLInputElement>) => {
-    const files = Array.from(event.target.files || []);
-    if (files.length > 0) {
-      try {
-        // For local file uploads, pass File objects directly to FileContext
-        onNewFilesSelect(files);
-        await refreshRecentFiles();
-        onClose();
-      } catch (error) {
-        console.error('Failed to process selected files:', error);
+  const handleFileInputChange = useCallback(
+    async (event: React.ChangeEvent<HTMLInputElement>) => {
+      const files = Array.from(event.target.files || []);
+      if (files.length > 0) {
+        try {
+          // For local file uploads, pass File objects directly to FileContext
+          onNewFilesSelect(files);
+          await refreshRecentFiles();
+          onClose();
+        } catch (error) {
+          console.error("Failed to process selected files:", error);
+        }
       }
-    }
-    event.target.value = '';
-  }, [onNewFilesSelect, refreshRecentFiles, onClose]);
+      event.target.value = "";
+    },
+    [onNewFilesSelect, refreshRecentFiles, onClose],
+  );
 
   const handleSelectAll = useCallback(() => {
     const allFilesSelected = filteredFiles.length > 0 && selectedFileIds.length === filteredFiles.length;
@@ -591,7 +587,7 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
       setLastClickedIndex(null);
     } else {
       // Select all filtered files
-      setSelectedFileIds(filteredFiles.map(file => file.id).filter(Boolean));
+      setSelectedFileIds(filteredFiles.map((file) => file.id).filter(Boolean));
       setLastClickedIndex(null);
     }
   }, [filteredFiles, selectedFileIds]);
@@ -605,7 +601,7 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
         await handleFileRemoveById(fileId);
       }
     } catch (error) {
-      console.error('Failed to delete selected files:', error);
+      console.error("Failed to delete selected files:", error);
     }
   }, [selectedFileIds, handleFileRemoveById]);
 
@@ -614,16 +610,14 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
 
     try {
       // Get selected files
-      const selectedFilesToDownload = filteredFiles.filter(file =>
-        selectedFileIds.includes(file.id)
-      );
+      const selectedFilesToDownload = filteredFiles.filter((file) => selectedFileIds.includes(file.id));
 
       // Use generic download utility
       await downloadFiles(selectedFilesToDownload, {
-        zipFilename: `selected-files-${new Date().toISOString().slice(0, 19).replace(/[:-]/g, '')}.zip`
+        zipFilename: `selected-files-${new Date().toISOString().slice(0, 19).replace(/[:-]/g, "")}.zip`,
       });
     } catch (error) {
-      console.error('Failed to download selected files:', error);
+      console.error("Failed to download selected files:", error);
     }
   }, [selectedFileIds, filteredFiles]);
 
@@ -631,135 +625,147 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
     try {
       await downloadFiles([file]);
     } catch (error) {
-      console.error('Failed to download file:', error);
+      console.error("Failed to download file:", error);
     }
   }, []);
 
-  const handleToggleExpansion = useCallback(async (fileId: FileId) => {
-    const isCurrentlyExpanded = expandedFileIds.has(fileId);
+  const handleToggleExpansion = useCallback(
+    async (fileId: FileId) => {
+      const isCurrentlyExpanded = expandedFileIds.has(fileId);
 
-    // Update expansion state
-    setExpandedFileIds(prev => {
-      const newSet = new Set(prev);
-      if (newSet.has(fileId)) {
-        newSet.delete(fileId);
-      } else {
-        newSet.add(fileId);
-      }
-      return newSet;
-    });
+      // Update expansion state
+      setExpandedFileIds((prev) => {
+        const newSet = new Set(prev);
+        if (newSet.has(fileId)) {
+          newSet.delete(fileId);
+        } else {
+          newSet.add(fileId);
+        }
+        return newSet;
+      });
 
-    // Load complete history chain if expanding
-    if (!isCurrentlyExpanded) {
-      const currentFileMetadata = recentFiles.find(f => f.id === fileId);
-      if (currentFileMetadata && (currentFileMetadata.versionNumber || 1) > 1) {
-        try {
-          // Get all stored file metadata for chain traversal
-          const allStoredStubs = await fileStorage.getAllStirlingFileStubs();
-          const fileMap = new Map(allStoredStubs.map(f => [f.id, f]));
+      // Load complete history chain if expanding
+      if (!isCurrentlyExpanded) {
+        const currentFileMetadata = recentFiles.find((f) => f.id === fileId);
+        if (currentFileMetadata && (currentFileMetadata.versionNumber || 1) > 1) {
+          try {
+            // Get all stored file metadata for chain traversal
+            const allStoredStubs = await fileStorage.getAllStirlingFileStubs();
+            const fileMap = new Map(allStoredStubs.map((f) => [f.id, f]));
 
-          // Get the current file's IndexedDB data
-          const currentStoredStub = fileMap.get(fileId as FileId);
-          if (!currentStoredStub) {
-            console.warn(`No stored file found for ${fileId}`);
-            return;
-          }
-
-          // Build complete history chain using IndexedDB metadata
-          const historyFiles: StirlingFileStub[] = [];
-
-          // Find the original file
-
-          // Collect only files in this specific branch (ancestors of current file)
-          const chainFiles: StirlingFileStub[] = [];
-          const allFiles = Array.from(fileMap.values());
-
-          // Build a map for fast parent lookups
-          const fileIdMap = new Map<FileId, StirlingFileStub>();
-          allFiles.forEach(f => fileIdMap.set(f.id, f));
-
-          // Trace back from current file through parent chain
-          let currentFile = fileIdMap.get(fileId);
-          while (currentFile?.parentFileId) {
-            const parentFile = fileIdMap.get(currentFile.parentFileId);
-            if (parentFile) {
-              chainFiles.push(parentFile);
-              currentFile = parentFile;
-            } else {
-              break; // Parent not found, stop tracing
+            // Get the current file's IndexedDB data
+            const currentStoredStub = fileMap.get(fileId as FileId);
+            if (!currentStoredStub) {
+              console.warn(`No stored file found for ${fileId}`);
+              return;
             }
+
+            // Build complete history chain using IndexedDB metadata
+            const historyFiles: StirlingFileStub[] = [];
+
+            // Find the original file
+
+            // Collect only files in this specific branch (ancestors of current file)
+            const chainFiles: StirlingFileStub[] = [];
+            const allFiles = Array.from(fileMap.values());
+
+            // Build a map for fast parent lookups
+            const fileIdMap = new Map<FileId, StirlingFileStub>();
+            allFiles.forEach((f) => fileIdMap.set(f.id, f));
+
+            // Trace back from current file through parent chain
+            let currentFile = fileIdMap.get(fileId);
+            while (currentFile?.parentFileId) {
+              const parentFile = fileIdMap.get(currentFile.parentFileId);
+              if (parentFile) {
+                chainFiles.push(parentFile);
+                currentFile = parentFile;
+              } else {
+                break; // Parent not found, stop tracing
+              }
+            }
+
+            // Sort by version number (oldest first for history display)
+            chainFiles.sort((a, b) => (a.versionNumber || 1) - (b.versionNumber || 1));
+
+            // StirlingFileStubs already have all the data we need - no conversion required!
+            historyFiles.push(...chainFiles);
+
+            // Cache the loaded history files
+            setLoadedHistoryFiles((prev) => new Map(prev.set(fileId as FileId, historyFiles)));
+          } catch (error) {
+            console.warn(`Failed to load history chain for file ${fileId}:`, error);
           }
+        }
+      } else {
+        // Clear loaded history when collapsing
+        setLoadedHistoryFiles((prev) => {
+          const newMap = new Map(prev);
+          newMap.delete(fileId as FileId);
+          return newMap;
+        });
+      }
+    },
+    [expandedFileIds, recentFiles],
+  );
 
-          // Sort by version number (oldest first for history display)
-          chainFiles.sort((a, b) => (a.versionNumber || 1) - (b.versionNumber || 1));
+  const handleAddToRecents = useCallback(
+    async (file: StirlingFileStub) => {
+      try {
+        // Mark the file as a leaf node so it appears in recent files
+        await fileStorage.markFileAsLeaf(file.id);
 
-          // StirlingFileStubs already have all the data we need - no conversion required!
-          historyFiles.push(...chainFiles);
+        // Refresh the recent files list to show updated state
+        await refreshRecentFiles();
+      } catch (error) {
+        console.error("Failed to add to recents:", error);
+      }
+    },
+    [refreshRecentFiles],
+  );
 
-          // Cache the loaded history files
-          setLoadedHistoryFiles(prev => new Map(prev.set(fileId as FileId, historyFiles)));
+  const handleGoogleDriveSelect = useCallback(
+    async (files: File[]) => {
+      if (files.length > 0) {
+        try {
+          // Process Google Drive files same as local files
+          onNewFilesSelect(files);
+          await refreshRecentFiles();
+          onClose();
         } catch (error) {
-          console.warn(`Failed to load history chain for file ${fileId}:`, error);
+          console.error("Failed to process Google Drive files:", error);
         }
       }
-    } else {
-      // Clear loaded history when collapsing
-      setLoadedHistoryFiles(prev => {
-        const newMap = new Map(prev);
-        newMap.delete(fileId as FileId);
-        return newMap;
-      });
-    }
-  }, [expandedFileIds, recentFiles]);
+    },
+    [onNewFilesSelect, refreshRecentFiles, onClose],
+  );
 
-  const handleAddToRecents = useCallback(async (file: StirlingFileStub) => {
-    try {
-      // Mark the file as a leaf node so it appears in recent files
-      await fileStorage.markFileAsLeaf(file.id);
-
-      // Refresh the recent files list to show updated state
-      await refreshRecentFiles();
-    } catch (error) {
-      console.error('Failed to add to recents:', error);
-    }
-  }, [refreshRecentFiles]);
-
-  const handleGoogleDriveSelect = useCallback(async (files: File[]) => {
-    if (files.length > 0) {
+  const handleUnzipFile = useCallback(
+    async (file: StirlingFileStub) => {
       try {
-        // Process Google Drive files same as local files
-        onNewFilesSelect(files);
-        await refreshRecentFiles();
-        onClose();
+        // Load the full file from storage
+        const stirlingFile = await fileStorage.getStirlingFile(file.id);
+        if (!stirlingFile) {
+          return;
+        }
+
+        // Extract and store files using shared service method
+        const result = await zipFileService.extractAndStoreFilesWithHistory(stirlingFile, file);
+
+        if (result.success) {
+          // Refresh file manager to show new files
+          await refreshRecentFiles();
+        }
+
+        if (result.errors.length > 0) {
+          console.error("Errors during unzip:", result.errors);
+        }
       } catch (error) {
-        console.error('Failed to process Google Drive files:', error);
+        console.error("Failed to unzip file:", error);
       }
-    }
-  }, [onNewFilesSelect, refreshRecentFiles, onClose]);
-
-  const handleUnzipFile = useCallback(async (file: StirlingFileStub) => {
-    try {
-      // Load the full file from storage
-      const stirlingFile = await fileStorage.getStirlingFile(file.id);
-      if (!stirlingFile) {
-        return;
-      }
-
-      // Extract and store files using shared service method
-      const result = await zipFileService.extractAndStoreFilesWithHistory(stirlingFile, file);
-
-      if (result.success) {
-        // Refresh file manager to show new files
-        await refreshRecentFiles();
-      }
-
-      if (result.errors.length > 0) {
-        console.error('Errors during unzip:', result.errors);
-      }
-    } catch (error) {
-      console.error('Failed to unzip file:', error);
-    }
-  }, [refreshRecentFiles]);
+    },
+    [refreshRecentFiles],
+  );
 
   const handleMakeCopy = useCallback(
     async (file: StirlingFileStub) => {
@@ -767,26 +773,18 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
         return;
       }
       try {
-        const response = await apiClient.get(
-          `/api/v1/storage/files/${file.remoteStorageId}/download`,
-          { responseType: 'blob', suppressErrorToast: true, skipAuthRedirect: true } as any
-        );
-        const contentType =
-          (response.headers &&
-            (response.headers['content-type'] || response.headers['Content-Type'])) ||
-          '';
+        const response = await apiClient.get(`/api/v1/storage/files/${file.remoteStorageId}/download`, {
+          responseType: "blob",
+          suppressErrorToast: true,
+          skipAuthRedirect: true,
+        } as any);
+        const contentType = (response.headers && (response.headers["content-type"] || response.headers["Content-Type"])) || "";
         const disposition =
-          (response.headers &&
-            (response.headers['content-disposition'] || response.headers['Content-Disposition'])) ||
-          '';
-        const filename = parseContentDispositionFilename(disposition) || file.name || 'shared-file';
+          (response.headers && (response.headers["content-disposition"] || response.headers["Content-Disposition"])) || "";
+        const filename = parseContentDispositionFilename(disposition) || file.name || "shared-file";
         const blob = response.data as Blob;
         const contentTypeValue = contentType || blob.type;
-        const latestFiles = await extractLatestFilesFromBundle(
-          blob,
-          filename,
-          contentTypeValue
-        );
+        const latestFiles = await extractLatestFilesFromBundle(blob, filename, contentTypeValue);
         if (latestFiles.length > 0) {
           await actions.addFilesWithOptions(latestFiles, {
             selectFiles: true,
@@ -796,30 +794,30 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
           });
           await refreshRecentFiles();
           alert({
-            alertType: 'success',
-            title: t('fileManager.copyCreated', 'Copy saved to this device.'),
+            alertType: "success",
+            title: t("fileManager.copyCreated", "Copy saved to this device."),
             expandable: false,
             durationMs: 2500,
           });
         }
       } catch (error) {
-        console.error('Failed to create a copy:', error);
+        console.error("Failed to create a copy:", error);
         alert({
-          alertType: 'error',
-          title: t('fileManager.copyFailed', 'Could not create a copy.'),
+          alertType: "error",
+          title: t("fileManager.copyFailed", "Could not create a copy."),
           expandable: false,
           durationMs: 3500,
         });
       }
     },
-    [actions, refreshRecentFiles, t]
+    [actions, refreshRecentFiles, t],
   );
 
   // Cleanup blob URLs when component unmounts
   useEffect(() => {
     return () => {
       // Clean up all created blob URLs
-      createdBlobUrls.current.forEach(url => {
+      createdBlobUrls.current.forEach((url) => {
         URL.revokeObjectURL(url);
       });
       createdBlobUrls.current.clear();
@@ -829,112 +827,112 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
   // Reset state when modal closes
   useEffect(() => {
     if (!isOpen) {
-      setActiveSource('recent');
-      setStorageFilter('all');
+      setActiveSource("recent");
+      setStorageFilter("all");
       setSelectedFileIds([]);
-      setSearchTerm('');
+      setSearchTerm("");
       setLastClickedIndex(null);
     }
   }, [isOpen]);
 
-  const contextValue: FileManagerContextValue = useMemo(() => ({
-    // State
-    activeSource,
-    storageFilter,
-    selectedFileIds,
-    searchTerm,
-    selectedFiles,
-    filteredFiles,
-    fileInputRef,
-    selectedFilesSet,
-    expandedFileIds,
-    fileGroups,
-    loadedHistoryFiles,
-    isLoading,
-    activeFileIds,
+  const contextValue: FileManagerContextValue = useMemo(
+    () => ({
+      // State
+      activeSource,
+      storageFilter,
+      selectedFileIds,
+      searchTerm,
+      selectedFiles,
+      filteredFiles,
+      fileInputRef,
+      selectedFilesSet,
+      expandedFileIds,
+      fileGroups,
+      loadedHistoryFiles,
+      isLoading,
+      activeFileIds,
 
-    // Handlers
-    onSourceChange: handleSourceChange,
-    onStorageFilterChange: handleStorageFilterChange,
-    onLocalFileClick: handleLocalFileClick,
-    onFileSelect: handleFileSelect,
-    onFileRemove: handleFileRemove,
-    onHistoryFileRemove: handleHistoryFileRemove,
-    onFileDoubleClick: handleFileDoubleClick,
-    onOpenFiles: handleOpenFiles,
-    onSearchChange: handleSearchChange,
-    onFileInputChange: handleFileInputChange,
-    onSelectAll: handleSelectAll,
-    onDeleteSelected: handleDeleteSelected,
-    onDownloadSelected: handleDownloadSelected,
-    onDownloadSingle: handleDownloadSingle,
-    onToggleExpansion: handleToggleExpansion,
-    onAddToRecents: handleAddToRecents,
-    onUnzipFile: handleUnzipFile,
-    onMakeCopy: handleMakeCopy,
-    onNewFilesSelect,
-    onGoogleDriveSelect: handleGoogleDriveSelect,
-    refreshRecentFiles,
+      // Handlers
+      onSourceChange: handleSourceChange,
+      onStorageFilterChange: handleStorageFilterChange,
+      onLocalFileClick: handleLocalFileClick,
+      onFileSelect: handleFileSelect,
+      onFileRemove: handleFileRemove,
+      onHistoryFileRemove: handleHistoryFileRemove,
+      onFileDoubleClick: handleFileDoubleClick,
+      onOpenFiles: handleOpenFiles,
+      onSearchChange: handleSearchChange,
+      onFileInputChange: handleFileInputChange,
+      onSelectAll: handleSelectAll,
+      onDeleteSelected: handleDeleteSelected,
+      onDownloadSelected: handleDownloadSelected,
+      onDownloadSingle: handleDownloadSingle,
+      onToggleExpansion: handleToggleExpansion,
+      onAddToRecents: handleAddToRecents,
+      onUnzipFile: handleUnzipFile,
+      onMakeCopy: handleMakeCopy,
+      onNewFilesSelect,
+      onGoogleDriveSelect: handleGoogleDriveSelect,
+      refreshRecentFiles,
 
-    // External props
-    recentFiles,
-    isFileSupported,
-    modalHeight,
-  }), [
-    activeSource,
-    storageFilter,
-    selectedFileIds,
-    searchTerm,
-    selectedFiles,
-    filteredFiles,
-    fileInputRef,
-    expandedFileIds,
-    fileGroups,
-    loadedHistoryFiles,
-    isLoading,
-    activeFileIds,
-    handleSourceChange,
-    handleStorageFilterChange,
-    handleLocalFileClick,
-    handleFileSelect,
-    handleFileRemove,
-    handleFileRemoveById,
-    performFileDelete,
-    handleFileDoubleClick,
-    handleOpenFiles,
-    handleSearchChange,
-    handleFileInputChange,
-    handleSelectAll,
-    handleDeleteSelected,
-    handleDownloadSelected,
-    handleToggleExpansion,
-    handleAddToRecents,
-    handleUnzipFile,
-    handleMakeCopy,
-    onNewFilesSelect,
-    handleGoogleDriveSelect,
-    recentFiles,
-    isFileSupported,
-    modalHeight,
-   refreshRecentFiles,
- ]);
+      // External props
+      recentFiles,
+      isFileSupported,
+      modalHeight,
+    }),
+    [
+      activeSource,
+      storageFilter,
+      selectedFileIds,
+      searchTerm,
+      selectedFiles,
+      filteredFiles,
+      fileInputRef,
+      expandedFileIds,
+      fileGroups,
+      loadedHistoryFiles,
+      isLoading,
+      activeFileIds,
+      handleSourceChange,
+      handleStorageFilterChange,
+      handleLocalFileClick,
+      handleFileSelect,
+      handleFileRemove,
+      handleFileRemoveById,
+      performFileDelete,
+      handleFileDoubleClick,
+      handleOpenFiles,
+      handleSearchChange,
+      handleFileInputChange,
+      handleSelectAll,
+      handleDeleteSelected,
+      handleDownloadSelected,
+      handleToggleExpansion,
+      handleAddToRecents,
+      handleUnzipFile,
+      handleMakeCopy,
+      onNewFilesSelect,
+      handleGoogleDriveSelect,
+      recentFiles,
+      isFileSupported,
+      modalHeight,
+      refreshRecentFiles,
+    ],
+  );
 
-  const deletePromptIsServerOnly =
-    Boolean(deletePromptFile?.remoteStorageId) && deletePromptFile?.id?.startsWith('server-');
+  const deletePromptIsServerOnly = Boolean(deletePromptFile?.remoteStorageId) && deletePromptFile?.id?.startsWith("server-");
   const deletePromptIsShared = deletePromptFile?.remoteOwnedByCurrentUser === false;
   const deletePromptCanLeaveShare =
-    deletePromptIsShared &&
-    !deletePromptFile?.remoteSharedViaLink &&
-    Boolean(deletePromptFile?.remoteStorageId);
+    deletePromptIsShared && !deletePromptFile?.remoteSharedViaLink && Boolean(deletePromptFile?.remoteStorageId);
 
   return (
     <FileManagerContext.Provider value={contextValue}>
       {children}
       <Modal
         opened={Boolean(deletePromptFile)}
-        onClose={() => resolveDeleteChoice('cancel')}
+        onClose={() => resolveDeleteChoice("cancel")}
         centered
-        title={t('fileManager.removeFileTitle', 'Remove file')}
+        title={t("fileManager.removeFileTitle", "Remove file")}
         zIndex={Z_INDEX_OVER_FILE_MANAGER_MODAL}
       >
         <Stack gap="sm">
@@ -943,52 +941,52 @@ export const FileManagerProvider: React.FC<FileManagerProviderProps> = ({
               ? deletePromptIsShared
                 ? deletePromptCanLeaveShare
                   ? t(
-                      'fileManager.removeSharedServerOnlyPrompt',
-                      'This file is shared with you and stored only on the server. Remove it from your list?'
+                      "fileManager.removeSharedServerOnlyPrompt",
+                      "This file is shared with you and stored only on the server. Remove it from your list?",
                     )
                   : t(
-                      'fileManager.removeSharedServerOnlyBlockedPrompt',
-                      'This file is shared with you and stored only on the server.'
+                      "fileManager.removeSharedServerOnlyBlockedPrompt",
+                      "This file is shared with you and stored only on the server.",
                     )
                 : t(
-                    'fileManager.removeServerOnlyPrompt',
-                    'This file is stored only on your server. Would you like to remove it from the server?'
+                    "fileManager.removeServerOnlyPrompt",
+                    "This file is stored only on your server. Would you like to remove it from the server?",
                   )
               : deletePromptIsShared
                 ? t(
-                    'fileManager.removeSharedPrompt',
-                    'This file is shared with you. You can remove it from this device or your shared list.'
+                    "fileManager.removeSharedPrompt",
+                    "This file is shared with you. You can remove it from this device or your shared list.",
                   )
                 : t(
-                    'fileManager.removeFilePrompt',
-                    'This file is saved on this device and on your server. Where would you like to remove it from?'
+                    "fileManager.removeFilePrompt",
+                    "This file is saved on this device and on your server. Where would you like to remove it from?",
                   )}
           </Text>
           <Text size="sm" c="dimmed">
             {deletePromptFile?.name}
           </Text>
           <Group justify="flex-end" gap="sm">
-            <Button variant="default" onClick={() => resolveDeleteChoice('cancel')}>
-              {t('cancel', 'Cancel')}
+            <Button variant="default" onClick={() => resolveDeleteChoice("cancel")}>
+              {t("cancel", "Cancel")}
             </Button>
             {!deletePromptIsServerOnly && (
-              <Button variant="light" onClick={() => resolveDeleteChoice('local')}>
-                {t('fileManager.removeLocalOnly', 'This device only')}
+              <Button variant="light" onClick={() => resolveDeleteChoice("local")}>
+                {t("fileManager.removeLocalOnly", "This device only")}
               </Button>
             )}
             {deletePromptCanLeaveShare && (
-              <Button variant="light" onClick={() => resolveDeleteChoice('leave')}>
-                {t('fileManager.leaveShare', 'Remove from my list')}
+              <Button variant="light" onClick={() => resolveDeleteChoice("leave")}>
+                {t("fileManager.leaveShare", "Remove from my list")}
               </Button>
             )}
             {deletePromptFile?.remoteOwnedByCurrentUser !== false && (
               <>
-                <Button variant="light" onClick={() => resolveDeleteChoice('server')}>
-                  {t('fileManager.removeServerOnly', 'Server only')}
+                <Button variant="light" onClick={() => resolveDeleteChoice("server")}>
+                  {t("fileManager.removeServerOnly", "Server only")}
                 </Button>
                 {!deletePromptIsServerOnly && (
-                  <Button color="red" onClick={() => resolveDeleteChoice('both')}>
-                    {t('fileManager.removeBoth', 'Remove from both')}
+                  <Button color="red" onClick={() => resolveDeleteChoice("both")}>
+                    {t("fileManager.removeBoth", "Remove from both")}
                   </Button>
                 )}
               </>
@@ -1006,8 +1004,8 @@ export const useFileManagerContext = (): FileManagerContextValue => {
 
   if (!context) {
     throw new Error(
-      'useFileManagerContext must be used within a FileManagerProvider. ' +
-      'Make sure you wrap your component with <FileManagerProvider>.'
+      "useFileManagerContext must be used within a FileManagerProvider. " +
+        "Make sure you wrap your component with <FileManagerProvider>.",
     );
   }
 
diff --git a/frontend/src/core/contexts/FilesModalContext.tsx b/frontend/src/core/contexts/FilesModalContext.tsx
index d9d1c3a406..c0bc729977 100644
--- a/frontend/src/core/contexts/FilesModalContext.tsx
+++ b/frontend/src/core/contexts/FilesModalContext.tsx
@@ -1,23 +1,26 @@
-import React, { createContext, useContext, useState, useCallback, useMemo } from 'react';
-import { useFileHandler } from '@app/hooks/useFileHandler';
-import { useFileActions } from '@app/contexts/FileContext';
-import { useFileContext } from '@app/contexts/file/fileHooks';
-import { StirlingFileStub } from '@app/types/fileContext';
-import type { FileId } from '@app/types/file';
-import { fileStorage } from '@app/services/fileStorage';
-import apiClient from '@app/services/apiClient';
-import { alert } from '@app/components/toast';
+import React, { createContext, useContext, useState, useCallback, useMemo } from "react";
+import { useFileHandler } from "@app/hooks/useFileHandler";
+import { useFileActions } from "@app/contexts/FileContext";
+import { useFileContext } from "@app/contexts/file/fileHooks";
+import { StirlingFileStub } from "@app/types/fileContext";
+import type { FileId } from "@app/types/file";
+import { fileStorage } from "@app/services/fileStorage";
+import apiClient from "@app/services/apiClient";
+import { alert } from "@app/components/toast";
 import {
   extractLatestFilesFromBundle,
   getShareBundleEntryRootId,
   isZipBundle,
   loadShareBundleEntries,
   parseContentDispositionFilename,
-} from '@app/services/shareBundleUtils';
+} from "@app/services/shareBundleUtils";
 
 interface FilesModalContextType {
   isFilesModalOpen: boolean;
-  openFilesModal: (options?: { insertAfterPage?: number; customHandler?: (files: File[], insertAfterPage?: number) => void }) => void;
+  openFilesModal: (options?: {
+    insertAfterPage?: number;
+    customHandler?: (files: File[], insertAfterPage?: number) => void;
+  }) => void;
   closeFilesModal: () => void;
   onFileUpload: (files: File[]) => void;
   onRecentFileSelect: (stirlingFileStubs: StirlingFileStub[]) => void;
@@ -46,7 +49,7 @@ export const FilesModalProvider: React.FC<{ children: React.ReactNode }> = ({ ch
       remoteOwnerUsername?: string,
       remoteOwnedByCurrentUser?: boolean,
       remoteSharedViaLink?: boolean,
-      remoteShareToken?: string
+      remoteShareToken?: string,
     ): Promise<FileId[]> => {
       const bundle = isZipBundle(contentType, filename) ? await loadShareBundleEntries(blob) : null;
       if (bundle) {
@@ -76,13 +79,9 @@ export const FilesModalProvider: React.FC<{ children: React.ReactNode }> = ({ ch
         for (const entry of sortedEntries) {
           const newId = idMap.get(entry.logicalId);
           if (!newId) continue;
-          const parentId = entry.parentLogicalId
-            ? idMap.get(entry.parentLogicalId)
-            : undefined;
+          const parentId = entry.parentLogicalId ? idMap.get(entry.parentLogicalId) : undefined;
           const rootId =
-            rootIdMap.get(getShareBundleEntryRootId(manifest, entry)) ||
-            idMap.get(manifest.rootLogicalId) ||
-            newId;
+            rootIdMap.get(getShareBundleEntryRootId(manifest, entry)) || idMap.get(manifest.rootLogicalId) || newId;
           const updates = {
             versionNumber: entry.versionNumber,
             originalFileId: rootId,
@@ -102,9 +101,7 @@ export const FilesModalProvider: React.FC<{ children: React.ReactNode }> = ({ ch
 
         const selectedIds: FileId[] = [];
         for (const rootId of rootOrder) {
-          const rootEntries = sortedEntries.filter(
-            (entry) => getShareBundleEntryRootId(manifest, entry) === rootId
-          );
+          const rootEntries = sortedEntries.filter((entry) => getShareBundleEntryRootId(manifest, entry) === rootId);
           const latestEntry = rootEntries[rootEntries.length - 1];
           if (!latestEntry) {
             continue;
@@ -141,23 +138,19 @@ export const FilesModalProvider: React.FC<{ children: React.ReactNode }> = ({ ch
       }
       return fileId ? [fileId] : [];
     },
-    [actions, fileStorage]
+    [actions, fileStorage],
   );
 
   const downloadServerFile = useCallback(async (remoteId: number) => {
     const response = await apiClient.get(`/api/v1/storage/files/${remoteId}/download`, {
-      responseType: 'blob',
+      responseType: "blob",
       suppressErrorToast: true,
       skipAuthRedirect: true,
     } as any);
-    const contentType =
-      (response.headers && (response.headers['content-type'] || response.headers['Content-Type'])) ||
-      '';
+    const contentType = (response.headers && (response.headers["content-type"] || response.headers["Content-Type"])) || "";
     const disposition =
-      (response.headers &&
-        (response.headers['content-disposition'] || response.headers['Content-Disposition'])) ||
-      '';
-    const filename = parseContentDispositionFilename(disposition) || 'server-file';
+      (response.headers && (response.headers["content-disposition"] || response.headers["Content-Disposition"])) || "";
+    const filename = parseContentDispositionFilename(disposition) || "server-file";
     const blob = response.data as Blob;
     const contentTypeValue = contentType || blob.type;
     return { blob, filename, contentType: contentTypeValue };
@@ -165,28 +158,27 @@ export const FilesModalProvider: React.FC<{ children: React.ReactNode }> = ({ ch
 
   const downloadShareLinkFile = useCallback(async (shareToken: string) => {
     const response = await apiClient.get(`/api/v1/storage/share-links/${shareToken}`, {
-      responseType: 'blob',
+      responseType: "blob",
       suppressErrorToast: true,
       skipAuthRedirect: true,
     } as any);
-    const contentType =
-      (response.headers && (response.headers['content-type'] || response.headers['Content-Type'])) ||
-      '';
+    const contentType = (response.headers && (response.headers["content-type"] || response.headers["Content-Type"])) || "";
     const disposition =
-      (response.headers &&
-        (response.headers['content-disposition'] || response.headers['Content-Disposition'])) ||
-      '';
-    const filename = parseContentDispositionFilename(disposition) || 'shared-file';
+      (response.headers && (response.headers["content-disposition"] || response.headers["Content-Disposition"])) || "";
+    const filename = parseContentDispositionFilename(disposition) || "shared-file";
     const blob = response.data as Blob;
     const contentTypeValue = contentType || blob.type;
     return { blob, filename, contentType: contentTypeValue };
   }, []);
 
-  const openFilesModal = useCallback((options?: { insertAfterPage?: number; customHandler?: (files: File[], insertAfterPage?: number) => void }) => {
-    setInsertAfterPage(options?.insertAfterPage);
-    setCustomHandler(() => options?.customHandler);
-    setIsFilesModalOpen(true);
-  }, []);
+  const openFilesModal = useCallback(
+    (options?: { insertAfterPage?: number; customHandler?: (files: File[], insertAfterPage?: number) => void }) => {
+      setInsertAfterPage(options?.insertAfterPage);
+      setCustomHandler(() => options?.customHandler);
+      setIsFilesModalOpen(true);
+    },
+    [],
+  );
 
   const closeFilesModal = useCallback(() => {
     setIsFilesModalOpen(false);
@@ -195,177 +187,174 @@ export const FilesModalProvider: React.FC<{ children: React.ReactNode }> = ({ ch
     onModalClose?.();
   }, [onModalClose]);
 
-  const handleFileUpload = useCallback(async (files: File[]) => {
-    if (customHandler) {
-      // Use custom handler for special cases (like page insertion)
-      customHandler(files, insertAfterPage);
-    } else {
-      // 1) Add via standard flow (auto-selects new files)
-      await addFiles(files);
-      // 2) Merge all requested file IDs (covers already-present files too)
-      const ids = files
-        .map((f) => fileCtx.findFileId(f) as FileId | undefined)
-        .filter((id): id is FileId => Boolean(id));
-      if (ids.length > 0) {
-        const currentSelected = fileCtx.selectors.getSelectedStirlingFileStubs().map((s) => s.id);
-        const nextSelection = Array.from(new Set([...currentSelected, ...ids]));
-        actions.setSelectedFiles(nextSelection);
-      }
-    }
-    closeFilesModal();
-  }, [addFiles, closeFilesModal, insertAfterPage, customHandler, actions, fileCtx]);
-
-  const handleRecentFileSelect = useCallback(async (stirlingFileStubs: StirlingFileStub[]) => {
-    const serverOnlyStubs = stirlingFileStubs.filter(
-      (stub) => stub.remoteStorageId && stub.id.startsWith('server-')
-    );
-    const sharedLinkStubs = stirlingFileStubs.filter(
-      (stub) => stub.remoteShareToken
-    );
-    const localStubs = stirlingFileStubs.filter(
-      (stub) => !serverOnlyStubs.includes(stub) && !sharedLinkStubs.includes(stub)
-    );
-
-    if (customHandler) {
-      try {
-        const loadedFiles: File[] = [];
-        for (const stub of localStubs) {
-          const stirlingFile = await fileStorage.getStirlingFile(stub.id);
-          if (stirlingFile) {
-            loadedFiles.push(stirlingFile);
-          }
+  const handleFileUpload = useCallback(
+    async (files: File[]) => {
+      if (customHandler) {
+        // Use custom handler for special cases (like page insertion)
+        customHandler(files, insertAfterPage);
+      } else {
+        // 1) Add via standard flow (auto-selects new files)
+        await addFiles(files);
+        // 2) Merge all requested file IDs (covers already-present files too)
+        const ids = files.map((f) => fileCtx.findFileId(f) as FileId | undefined).filter((id): id is FileId => Boolean(id));
+        if (ids.length > 0) {
+          const currentSelected = fileCtx.selectors.getSelectedStirlingFileStubs().map((s) => s.id);
+          const nextSelection = Array.from(new Set([...currentSelected, ...ids]));
+          actions.setSelectedFiles(nextSelection);
         }
+      }
+      closeFilesModal();
+    },
+    [addFiles, closeFilesModal, insertAfterPage, customHandler, actions, fileCtx],
+  );
+
+  const handleRecentFileSelect = useCallback(
+    async (stirlingFileStubs: StirlingFileStub[]) => {
+      const serverOnlyStubs = stirlingFileStubs.filter((stub) => stub.remoteStorageId && stub.id.startsWith("server-"));
+      const sharedLinkStubs = stirlingFileStubs.filter((stub) => stub.remoteShareToken);
+      const localStubs = stirlingFileStubs.filter(
+        (stub) => !serverOnlyStubs.includes(stub) && !sharedLinkStubs.includes(stub),
+      );
+
+      if (customHandler) {
+        try {
+          const loadedFiles: File[] = [];
+          for (const stub of localStubs) {
+            const stirlingFile = await fileStorage.getStirlingFile(stub.id);
+            if (stirlingFile) {
+              loadedFiles.push(stirlingFile);
+            }
+          }
+          for (const stub of serverOnlyStubs) {
+            if (!stub.remoteStorageId) continue;
+            const { blob, filename, contentType } = await downloadServerFile(stub.remoteStorageId);
+            const latestFiles = await extractLatestFilesFromBundle(blob, filename, contentType);
+            loadedFiles.push(...latestFiles);
+          }
+          for (const stub of sharedLinkStubs) {
+            if (!stub.remoteShareToken) continue;
+            const { blob, filename, contentType } = await downloadShareLinkFile(stub.remoteShareToken);
+            const latestFiles = await extractLatestFilesFromBundle(blob, filename, contentType);
+            loadedFiles.push(...latestFiles);
+          }
+
+          if (loadedFiles.length > 0) {
+            customHandler(loadedFiles, insertAfterPage);
+          }
+        } catch (error) {
+          console.error("Failed to load files for custom handler:", error);
+          alert({
+            alertType: "error",
+            title: "Unable to download one or more server files.",
+            expandable: false,
+            durationMs: 3500,
+          });
+        }
+        closeFilesModal();
+        return;
+      }
+
+      const selectedFromServer: FileId[] = [];
+      try {
         for (const stub of serverOnlyStubs) {
           if (!stub.remoteStorageId) continue;
           const { blob, filename, contentType } = await downloadServerFile(stub.remoteStorageId);
-          const latestFiles = await extractLatestFilesFromBundle(blob, filename, contentType);
-          loadedFiles.push(...latestFiles);
+          const importedIds = await importBundleToWorkbench(
+            blob,
+            filename,
+            contentType,
+            stub.remoteStorageId,
+            stub.remoteStorageUpdatedAt,
+            stub.remoteOwnerUsername,
+            stub.remoteOwnedByCurrentUser,
+            stub.remoteSharedViaLink,
+            stub.remoteShareToken,
+          );
+          selectedFromServer.push(...importedIds);
         }
         for (const stub of sharedLinkStubs) {
           if (!stub.remoteShareToken) continue;
           const { blob, filename, contentType } = await downloadShareLinkFile(stub.remoteShareToken);
-          const latestFiles = await extractLatestFilesFromBundle(blob, filename, contentType);
-          loadedFiles.push(...latestFiles);
-        }
-
-        if (loadedFiles.length > 0) {
-          customHandler(loadedFiles, insertAfterPage);
+          const importedIds = await importBundleToWorkbench(
+            blob,
+            filename,
+            contentType,
+            stub.remoteStorageId,
+            stub.remoteStorageUpdatedAt,
+            stub.remoteOwnerUsername,
+            stub.remoteOwnedByCurrentUser,
+            true,
+            stub.remoteShareToken,
+          );
+          selectedFromServer.push(...importedIds);
         }
       } catch (error) {
-        console.error('Failed to load files for custom handler:', error);
+        console.error("Failed to load server files:", error);
         alert({
-          alertType: 'error',
-          title: 'Unable to download one or more server files.',
+          alertType: "error",
+          title: "Unable to download one or more server files.",
           expandable: false,
           durationMs: 3500,
         });
       }
+
+      if (actions.addStirlingFileStubs) {
+        await actions.addStirlingFileStubs(localStubs, { selectFiles: false });
+        const requestedIds = localStubs.map((s) => s.id);
+        const nextSelection = Array.from(new Set([...requestedIds, ...selectedFromServer]));
+        actions.setSelectedFiles(nextSelection);
+      } else {
+        console.error("addStirlingFileStubs action not available");
+      }
+
       closeFilesModal();
-      return;
-    }
-
-    const selectedFromServer: FileId[] = [];
-    try {
-      for (const stub of serverOnlyStubs) {
-        if (!stub.remoteStorageId) continue;
-        const { blob, filename, contentType } = await downloadServerFile(stub.remoteStorageId);
-        const importedIds = await importBundleToWorkbench(
-          blob,
-          filename,
-          contentType,
-          stub.remoteStorageId,
-          stub.remoteStorageUpdatedAt,
-          stub.remoteOwnerUsername,
-          stub.remoteOwnedByCurrentUser,
-          stub.remoteSharedViaLink,
-          stub.remoteShareToken
-        );
-        selectedFromServer.push(...importedIds);
-      }
-      for (const stub of sharedLinkStubs) {
-        if (!stub.remoteShareToken) continue;
-        const { blob, filename, contentType } = await downloadShareLinkFile(stub.remoteShareToken);
-        const importedIds = await importBundleToWorkbench(
-          blob,
-          filename,
-          contentType,
-          stub.remoteStorageId,
-          stub.remoteStorageUpdatedAt,
-          stub.remoteOwnerUsername,
-          stub.remoteOwnedByCurrentUser,
-          true,
-          stub.remoteShareToken
-        );
-        selectedFromServer.push(...importedIds);
-      }
-    } catch (error) {
-      console.error('Failed to load server files:', error);
-      alert({
-        alertType: 'error',
-        title: 'Unable to download one or more server files.',
-        expandable: false,
-        durationMs: 3500,
-      });
-    }
-
-    if (actions.addStirlingFileStubs) {
-      await actions.addStirlingFileStubs(localStubs, { selectFiles: false });
-      const requestedIds = localStubs.map((s) => s.id);
-      const nextSelection = Array.from(
-        new Set([...requestedIds, ...selectedFromServer])
-      );
-      actions.setSelectedFiles(nextSelection);
-    } else {
-      console.error('addStirlingFileStubs action not available');
-    }
-
-    closeFilesModal();
-  }, [
-    actions.addStirlingFileStubs,
-    actions,
-    closeFilesModal,
-    customHandler,
-    insertAfterPage,
-    fileCtx,
-    downloadServerFile,
-    downloadShareLinkFile,
-    extractLatestFilesFromBundle,
-    importBundleToWorkbench,
-  ]);
+    },
+    [
+      actions.addStirlingFileStubs,
+      actions,
+      closeFilesModal,
+      customHandler,
+      insertAfterPage,
+      fileCtx,
+      downloadServerFile,
+      downloadShareLinkFile,
+      extractLatestFilesFromBundle,
+      importBundleToWorkbench,
+    ],
+  );
 
   const setModalCloseCallback = useCallback((callback: () => void) => {
     setOnModalClose(() => callback);
   }, []);
 
-  const contextValue: FilesModalContextType = useMemo(() => ({
-    isFilesModalOpen,
-    openFilesModal,
-    closeFilesModal,
-    onFileUpload: handleFileUpload,
-    onRecentFileSelect: handleRecentFileSelect,
-    onModalClose,
-    setOnModalClose: setModalCloseCallback,
-  }), [
-    isFilesModalOpen,
-    openFilesModal,
-    closeFilesModal,
-    handleFileUpload,
-    handleRecentFileSelect,
-    onModalClose,
-    setModalCloseCallback,
-  ]);
-
-  return (
-    <FilesModalContext.Provider value={contextValue}>
-      {children}
-    </FilesModalContext.Provider>
+  const contextValue: FilesModalContextType = useMemo(
+    () => ({
+      isFilesModalOpen,
+      openFilesModal,
+      closeFilesModal,
+      onFileUpload: handleFileUpload,
+      onRecentFileSelect: handleRecentFileSelect,
+      onModalClose,
+      setOnModalClose: setModalCloseCallback,
+    }),
+    [
+      isFilesModalOpen,
+      openFilesModal,
+      closeFilesModal,
+      handleFileUpload,
+      handleRecentFileSelect,
+      onModalClose,
+      setModalCloseCallback,
+    ],
   );
+
+  return <FilesModalContext.Provider value={contextValue}>{children}</FilesModalContext.Provider>;
 };
 
 export const useFilesModalContext = () => {
   const context = useContext(FilesModalContext);
   if (!context) {
-    throw new Error('useFilesModalContext must be used within FilesModalProvider');
+    throw new Error("useFilesModalContext must be used within FilesModalProvider");
   }
   return context;
 };
diff --git a/frontend/src/core/contexts/HotkeyContext.tsx b/frontend/src/core/contexts/HotkeyContext.tsx
index c7d353c410..3049287971 100644
--- a/frontend/src/core/contexts/HotkeyContext.tsx
+++ b/frontend/src/core/contexts/HotkeyContext.tsx
@@ -1,8 +1,17 @@
-import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import { HotkeyBinding, bindingEquals, bindingMatchesEvent, deserializeBindings, getDisplayParts, isMacLike, normalizeBinding, serializeBindings } from '@app/utils/hotkeys';
-import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
-import { ToolId } from '@app/types/toolId';
-import { ToolCategoryId, ToolRegistryEntry } from '@app/data/toolsTaxonomy';
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from "react";
+import {
+  HotkeyBinding,
+  bindingEquals,
+  bindingMatchesEvent,
+  deserializeBindings,
+  getDisplayParts,
+  isMacLike,
+  normalizeBinding,
+  serializeBindings,
+} from "@app/utils/hotkeys";
+import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
+import { ToolId } from "@app/types/toolId";
+import { ToolCategoryId, ToolRegistryEntry } from "@app/data/toolsTaxonomy";
 
 type Bindings = Partial<Record<ToolId, HotkeyBinding>>;
 
@@ -21,7 +30,7 @@ interface HotkeyContextValue {
 
 const HotkeyContext = createContext<HotkeyContextValue | undefined>(undefined);
 
-const STORAGE_KEY = 'stirlingpdf.hotkeys';
+const STORAGE_KEY = "stirlingpdf.hotkeys";
 
 const generateDefaultHotkeys = (toolEntries: [ToolId, ToolRegistryEntry][], macLike: boolean): Bindings => {
   const defaults: Bindings = {};
@@ -33,7 +42,8 @@ const generateDefaultHotkeys = (toolEntries: [ToolId, ToolRegistryEntry][], macL
 
   // Assign Cmd+Option+Number (Mac) or Ctrl+Alt+Number (Windows) to Quick Access tools
   quickAccessTools.forEach((toolId, index) => {
-    if (index < 9) { // Limit to Digit1-9
+    if (index < 9) {
+      // Limit to Digit1-9
       const digitNumber = index + 1;
       defaults[toolId] = {
         code: `Digit${digitNumber}`,
@@ -61,7 +71,7 @@ export const HotkeyProvider: React.FC<{ children: React.ReactNode }> = ({ childr
   const { toolRegistry, handleToolSelect } = useToolWorkflow();
   const isMac = useMemo(() => isMacLike(), []);
   const [customBindings, setCustomBindings] = useState<Bindings>(() => {
-    if (typeof window === 'undefined') {
+    if (typeof window === "undefined") {
       return {};
     }
     return deserializeBindings(window.localStorage?.getItem(STORAGE_KEY));
@@ -74,7 +84,7 @@ export const HotkeyProvider: React.FC<{ children: React.ReactNode }> = ({ childr
 
   // Remove bindings for tools that are no longer present
   useEffect(() => {
-    setCustomBindings(prev => {
+    setCustomBindings((prev) => {
       const next: Bindings = {};
       let changed = false;
       (Object.entries(prev) as [ToolId, HotkeyBinding][]).forEach(([toolId, binding]) => {
@@ -106,38 +116,44 @@ export const HotkeyProvider: React.FC<{ children: React.ReactNode }> = ({ childr
   }, [customBindings, defaults, toolEntries]);
 
   useEffect(() => {
-    if (typeof window === 'undefined') {
+    if (typeof window === "undefined") {
       return;
     }
     window.localStorage.setItem(STORAGE_KEY, serializeBindings(customBindings));
   }, [customBindings]);
 
-  const isBindingAvailable = useCallback((binding: HotkeyBinding, excludeToolId?: ToolId) => {
-    const normalized = normalizeBinding(binding);
-    return Object.entries(resolved).every(([toolId, existing]) => {
-      if (toolId === excludeToolId) {
-        return true;
-      }
-      return !bindingEquals(existing, normalized);
-    });
-  }, [resolved]);
-
-  const updateHotkey = useCallback((toolId: ToolId, binding: HotkeyBinding) => {
-    setCustomBindings(prev => {
+  const isBindingAvailable = useCallback(
+    (binding: HotkeyBinding, excludeToolId?: ToolId) => {
       const normalized = normalizeBinding(binding);
-      const defaultsForTool = defaults[toolId];
-      const next = { ...prev };
-      if (defaultsForTool && bindingEquals(defaultsForTool, normalized)) {
-        delete next[toolId];
-      } else {
-        next[toolId] = normalized;
-      }
-      return next;
-    });
-  }, [defaults]);
+      return Object.entries(resolved).every(([toolId, existing]) => {
+        if (toolId === excludeToolId) {
+          return true;
+        }
+        return !bindingEquals(existing, normalized);
+      });
+    },
+    [resolved],
+  );
+
+  const updateHotkey = useCallback(
+    (toolId: ToolId, binding: HotkeyBinding) => {
+      setCustomBindings((prev) => {
+        const normalized = normalizeBinding(binding);
+        const defaultsForTool = defaults[toolId];
+        const next = { ...prev };
+        if (defaultsForTool && bindingEquals(defaultsForTool, normalized)) {
+          delete next[toolId];
+        } else {
+          next[toolId] = normalized;
+        }
+        return next;
+      });
+    },
+    [defaults],
+  );
 
   const resetHotkey = useCallback((toolId: ToolId) => {
-    setCustomBindings(prev => {
+    setCustomBindings((prev) => {
       if (!(toolId in prev)) {
         return prev;
       }
@@ -170,36 +186,35 @@ export const HotkeyProvider: React.FC<{ children: React.ReactNode }> = ({ childr
       }
     };
 
-    window.addEventListener('keydown', handler, true);
+    window.addEventListener("keydown", handler, true);
     return () => {
-      window.removeEventListener('keydown', handler, true);
+      window.removeEventListener("keydown", handler, true);
     };
   }, [resolved, areHotkeysPaused, handleToolSelect]);
 
-  const contextValue = useMemo<HotkeyContextValue>(() => ({
-    hotkeys: resolved,
-    defaults,
-    isMac,
-    updateHotkey,
-    resetHotkey,
-    isBindingAvailable,
-    pauseHotkeys,
-    resumeHotkeys,
-    areHotkeysPaused,
-    getDisplayParts: (binding) => getDisplayParts(binding ?? null, isMac),
-  }), [resolved, defaults, isMac, updateHotkey, resetHotkey, isBindingAvailable, pauseHotkeys, resumeHotkeys, areHotkeysPaused]);
-
-  return (
-    <HotkeyContext.Provider value={contextValue}>
-      {children}
-    </HotkeyContext.Provider>
+  const contextValue = useMemo<HotkeyContextValue>(
+    () => ({
+      hotkeys: resolved,
+      defaults,
+      isMac,
+      updateHotkey,
+      resetHotkey,
+      isBindingAvailable,
+      pauseHotkeys,
+      resumeHotkeys,
+      areHotkeysPaused,
+      getDisplayParts: (binding) => getDisplayParts(binding ?? null, isMac),
+    }),
+    [resolved, defaults, isMac, updateHotkey, resetHotkey, isBindingAvailable, pauseHotkeys, resumeHotkeys, areHotkeysPaused],
   );
+
+  return <HotkeyContext.Provider value={contextValue}>{children}</HotkeyContext.Provider>;
 };
 
 export const useHotkeys = (): HotkeyContextValue => {
   const context = useContext(HotkeyContext);
   if (!context) {
-    throw new Error('useHotkeys must be used within a HotkeyProvider');
+    throw new Error("useHotkeys must be used within a HotkeyProvider");
   }
   return context;
 };
diff --git a/frontend/src/core/contexts/IndexedDBContext.tsx b/frontend/src/core/contexts/IndexedDBContext.tsx
index 4a29cd97ed..9a91e2a151 100644
--- a/frontend/src/core/contexts/IndexedDBContext.tsx
+++ b/frontend/src/core/contexts/IndexedDBContext.tsx
@@ -3,13 +3,13 @@
  * Integrates with FileContext to provide transparent file persistence
  */
 
-import React, { createContext, useContext, useCallback, useRef } from 'react';
-import { fileStorage } from '@app/services/fileStorage';
-import { FileId } from '@app/types/file';
-import { StirlingFileStub, createStirlingFile, createQuickKey } from '@app/types/fileContext';
-import { generateThumbnailForFile } from '@app/utils/thumbnailUtils';
+import React, { createContext, useContext, useCallback, useRef } from "react";
+import { fileStorage } from "@app/services/fileStorage";
+import { FileId } from "@app/types/file";
+import { StirlingFileStub, createStirlingFile, createQuickKey } from "@app/types/fileContext";
+import { generateThumbnailForFile } from "@app/utils/thumbnailUtils";
 
-const DEBUG = process.env.NODE_ENV === 'development';
+const DEBUG = process.env.NODE_ENV === "development";
 
 interface IndexedDBContextValue {
   // Core CRUD operations
@@ -46,8 +46,7 @@ export function IndexedDBProvider({ children }: IndexedDBProviderProps) {
     if (fileCache.current.size <= MAX_CACHE_SIZE) return;
 
     // Convert to array and sort by last accessed time (oldest first)
-    const entries = Array.from(fileCache.current.entries())
-      .sort(([, a], [, b]) => a.lastAccessed - b.lastAccessed);
+    const entries = Array.from(fileCache.current.entries()).sort(([, a], [, b]) => a.lastAccessed - b.lastAccessed);
 
     // Remove the least recently used entries
     const toRemove = entries.slice(0, fileCache.current.size - MAX_CACHE_SIZE);
@@ -60,7 +59,7 @@ export function IndexedDBProvider({ children }: IndexedDBProviderProps) {
 
   const saveFile = useCallback(async (file: File, fileId: FileId, existingThumbnail?: string): Promise<StirlingFileStub> => {
     // Use existing thumbnail or generate new one if none provided
-    const thumbnail = existingThumbnail || await generateThumbnailForFile(file);
+    const thumbnail = existingThumbnail || (await generateThumbnailForFile(file));
 
     // Store in IndexedDB (no history data - that's handled by direct fileStorage calls now)
     const stirlingFile = createStirlingFile(file, fileId);
@@ -78,7 +77,7 @@ export function IndexedDBProvider({ children }: IndexedDBProviderProps) {
       createdAt: Date.now(),
       versionNumber: 1,
       originalFileId: fileId,
-      toolHistory: []
+      toolHistory: [],
     };
 
     await fileStorage.storeStirlingFile(stirlingFile, stub);
@@ -96,28 +95,31 @@ export function IndexedDBProvider({ children }: IndexedDBProviderProps) {
     return storedFile;
   }, []);
 
-  const loadFile = useCallback(async (fileId: FileId): Promise<File | null> => {
-    // Check cache first
-    const cached = fileCache.current.get(fileId);
-    if (cached) {
-      // Update last accessed time for LRU
-      cached.lastAccessed = Date.now();
-      return cached.file;
-    }
+  const loadFile = useCallback(
+    async (fileId: FileId): Promise<File | null> => {
+      // Check cache first
+      const cached = fileCache.current.get(fileId);
+      if (cached) {
+        // Update last accessed time for LRU
+        cached.lastAccessed = Date.now();
+        return cached.file;
+      }
 
-    // Load from IndexedDB
-    const storedFile = await fileStorage.getStirlingFile(fileId);
-    if (!storedFile) return null;
+      // Load from IndexedDB
+      const storedFile = await fileStorage.getStirlingFile(fileId);
+      if (!storedFile) return null;
 
-    // StirlingFile is already a File object, no reconstruction needed
-    const file = storedFile;
+      // StirlingFile is already a File object, no reconstruction needed
+      const file = storedFile;
 
-    // Cache for future use with LRU eviction
-    fileCache.current.set(fileId, { file, lastAccessed: Date.now() });
-    evictLRUEntries();
+      // Cache for future use with LRU eviction
+      fileCache.current.set(fileId, { file, lastAccessed: Date.now() });
+      evictLRUEntries();
 
-    return file;
-  }, [evictLRUEntries]);
+      return file;
+    },
+    [evictLRUEntries],
+  );
 
   const loadMetadata = useCallback(async (fileId: FileId): Promise<StirlingFileStub | null> => {
     // Load stub directly from storage service
@@ -137,7 +139,6 @@ export function IndexedDBProvider({ children }: IndexedDBProviderProps) {
 
     // All files are already StirlingFileStub objects, no processing needed
     return metadata;
-
   }, []);
 
   const loadAllMetadata = useCallback(async (): Promise<StirlingFileStub[]> => {
@@ -149,10 +150,10 @@ export function IndexedDBProvider({ children }: IndexedDBProviderProps) {
 
   const deleteMultiple = useCallback(async (fileIds: FileId[]): Promise<void> => {
     // Remove from cache
-    fileIds.forEach(id => fileCache.current.delete(id));
+    fileIds.forEach((id) => fileCache.current.delete(id));
 
     // Remove from IndexedDB in parallel
-    await Promise.all(fileIds.map(id => fileStorage.deleteStirlingFile(id)));
+    await Promise.all(fileIds.map((id) => fileStorage.deleteStirlingFile(id)));
   }, []);
 
   const clearAll = useCallback(async (): Promise<void> => {
@@ -186,20 +187,16 @@ export function IndexedDBProvider({ children }: IndexedDBProviderProps) {
     clearAll,
     getStorageStats,
     updateThumbnail,
-    markFileAsProcessed
+    markFileAsProcessed,
   };
 
-  return (
-    <IndexedDBContext.Provider value={value}>
-      {children}
-    </IndexedDBContext.Provider>
-  );
+  return <IndexedDBContext.Provider value={value}>{children}</IndexedDBContext.Provider>;
 }
 
 export function useIndexedDB() {
   const context = useContext(IndexedDBContext);
   if (!context) {
-    throw new Error('useIndexedDB must be used within an IndexedDBProvider');
+    throw new Error("useIndexedDB must be used within an IndexedDBProvider");
   }
   return context;
 }
diff --git a/frontend/src/core/contexts/NavigationContext.tsx b/frontend/src/core/contexts/NavigationContext.tsx
index cde8c44ab0..2316402ad7 100644
--- a/frontend/src/core/contexts/NavigationContext.tsx
+++ b/frontend/src/core/contexts/NavigationContext.tsx
@@ -1,7 +1,7 @@
-import React, { createContext, useContext, useReducer, useCallback, useMemo, useRef } from 'react';
-import { WorkbenchType, getDefaultWorkbench } from '@app/types/workbench';
-import { ToolId, isValidToolId } from '@app/types/toolId';
-import { useToolRegistry } from '@app/contexts/ToolRegistryContext';
+import React, { createContext, useContext, useReducer, useCallback, useMemo, useRef } from "react";
+import { WorkbenchType, getDefaultWorkbench } from "@app/types/workbench";
+import { ToolId, isValidToolId } from "@app/types/toolId";
+import { useToolRegistry } from "@app/contexts/ToolRegistryContext";
 
 /**
  * NavigationContext - Complete navigation management system
@@ -22,36 +22,36 @@ interface NavigationContextState {
 
 // Navigation actions
 type NavigationAction =
-  | { type: 'SET_WORKBENCH'; payload: { workbench: WorkbenchType } }
-  | { type: 'SET_SELECTED_TOOL'; payload: { toolId: ToolId | null } }
-  | { type: 'SET_TOOL_AND_WORKBENCH'; payload: { toolId: ToolId | null; workbench: WorkbenchType } }
-  | { type: 'SET_UNSAVED_CHANGES'; payload: { hasChanges: boolean } }
-  | { type: 'SET_PENDING_NAVIGATION'; payload: { navigationFn: (() => void) | null } }
-  | { type: 'SHOW_NAVIGATION_WARNING'; payload: { show: boolean } };
+  | { type: "SET_WORKBENCH"; payload: { workbench: WorkbenchType } }
+  | { type: "SET_SELECTED_TOOL"; payload: { toolId: ToolId | null } }
+  | { type: "SET_TOOL_AND_WORKBENCH"; payload: { toolId: ToolId | null; workbench: WorkbenchType } }
+  | { type: "SET_UNSAVED_CHANGES"; payload: { hasChanges: boolean } }
+  | { type: "SET_PENDING_NAVIGATION"; payload: { navigationFn: (() => void) | null } }
+  | { type: "SHOW_NAVIGATION_WARNING"; payload: { show: boolean } };
 
 // Navigation reducer
 const navigationReducer = (state: NavigationContextState, action: NavigationAction): NavigationContextState => {
   switch (action.type) {
-    case 'SET_WORKBENCH':
+    case "SET_WORKBENCH":
       return { ...state, workbench: action.payload.workbench };
 
-    case 'SET_SELECTED_TOOL':
+    case "SET_SELECTED_TOOL":
       return { ...state, selectedTool: action.payload.toolId };
 
-    case 'SET_TOOL_AND_WORKBENCH':
+    case "SET_TOOL_AND_WORKBENCH":
       return {
         ...state,
         selectedTool: action.payload.toolId,
-        workbench: action.payload.workbench
+        workbench: action.payload.workbench,
       };
 
-    case 'SET_UNSAVED_CHANGES':
+    case "SET_UNSAVED_CHANGES":
       return { ...state, hasUnsavedChanges: action.payload.hasChanges };
 
-    case 'SET_PENDING_NAVIGATION':
+    case "SET_PENDING_NAVIGATION":
       return { ...state, pendingNavigation: action.payload.navigationFn };
 
-    case 'SHOW_NAVIGATION_WARNING':
+    case "SHOW_NAVIGATION_WARNING":
       return { ...state, showNavigationWarning: action.payload.show };
 
     default:
@@ -65,7 +65,7 @@ const initialState: NavigationContextState = {
   selectedTool: null,
   hasUnsavedChanges: false,
   pendingNavigation: null,
-  showNavigationWarning: false
+  showNavigationWarning: false,
 };
 
 // Handlers that editors register for the navigation warning modal
@@ -122,141 +122,151 @@ export const NavigationProvider: React.FC<{
   const navigationWarningHandlersRef = useRef<NavigationWarningHandlers | null>(null);
 
   // Memoize individual callbacks
-  const setWorkbench = useCallback((workbench: WorkbenchType) => {
+  const setWorkbench = useCallback(
+    (workbench: WorkbenchType) => {
       // Check for unsaved changes using registered checker or state
       const hasUnsavedChanges = unsavedChangesCheckerRef.current?.() || state.hasUnsavedChanges;
-      console.log('[NavigationContext] setWorkbench:', {
+      console.log("[NavigationContext] setWorkbench:", {
         from: state.workbench,
         to: workbench,
         hasChecker: !!unsavedChangesCheckerRef.current,
-        hasUnsavedChanges
+        hasUnsavedChanges,
       });
 
       // If we're leaving pageEditor, viewer, or custom workbench and have unsaved changes, request navigation
       const leavingWorkbenchWithChanges =
-        (state.workbench === 'pageEditor' && workbench !== 'pageEditor' && hasUnsavedChanges) ||
-        (state.workbench === 'viewer' && workbench !== 'viewer' && hasUnsavedChanges) ||
-        (state.workbench.startsWith('custom:') && workbench !== state.workbench && hasUnsavedChanges);
+        (state.workbench === "pageEditor" && workbench !== "pageEditor" && hasUnsavedChanges) ||
+        (state.workbench === "viewer" && workbench !== "viewer" && hasUnsavedChanges) ||
+        (state.workbench.startsWith("custom:") && workbench !== state.workbench && hasUnsavedChanges);
 
       if (leavingWorkbenchWithChanges) {
         // Update state to reflect unsaved changes so modal knows
         if (!state.hasUnsavedChanges) {
-          dispatch({ type: 'SET_UNSAVED_CHANGES', payload: { hasChanges: true } });
+          dispatch({ type: "SET_UNSAVED_CHANGES", payload: { hasChanges: true } });
         }
         const performWorkbenchChange = () => {
           // When leaving a custom workbench, clear the selected tool
-          console.log('[NavigationContext] performWorkbenchChange executing', {
+          console.log("[NavigationContext] performWorkbenchChange executing", {
             from: state.workbench,
             to: workbench,
-            isCustom: state.workbench.startsWith('custom:')
+            isCustom: state.workbench.startsWith("custom:"),
           });
-          if (state.workbench.startsWith('custom:')) {
-            console.log('[NavigationContext] Clearing tool and changing workbench to:', workbench);
-            dispatch({ type: 'SET_TOOL_AND_WORKBENCH', payload: { toolId: null, workbench } });
+          if (state.workbench.startsWith("custom:")) {
+            console.log("[NavigationContext] Clearing tool and changing workbench to:", workbench);
+            dispatch({ type: "SET_TOOL_AND_WORKBENCH", payload: { toolId: null, workbench } });
           } else {
-            console.log('[NavigationContext] Just changing workbench to:', workbench);
-            dispatch({ type: 'SET_WORKBENCH', payload: { workbench } });
+            console.log("[NavigationContext] Just changing workbench to:", workbench);
+            dispatch({ type: "SET_WORKBENCH", payload: { workbench } });
           }
         };
-        dispatch({ type: 'SET_PENDING_NAVIGATION', payload: { navigationFn: performWorkbenchChange } });
-        dispatch({ type: 'SHOW_NAVIGATION_WARNING', payload: { show: true } });
+        dispatch({ type: "SET_PENDING_NAVIGATION", payload: { navigationFn: performWorkbenchChange } });
+        dispatch({ type: "SHOW_NAVIGATION_WARNING", payload: { show: true } });
       } else {
-        dispatch({ type: 'SET_WORKBENCH', payload: { workbench } });
+        dispatch({ type: "SET_WORKBENCH", payload: { workbench } });
       }
-    }, [state.workbench, state.hasUnsavedChanges]);
+    },
+    [state.workbench, state.hasUnsavedChanges],
+  );
 
-    const setSelectedTool = useCallback((toolId: ToolId | null) => {
-      dispatch({ type: 'SET_SELECTED_TOOL', payload: { toolId } });
-    }, []);
+  const setSelectedTool = useCallback((toolId: ToolId | null) => {
+    dispatch({ type: "SET_SELECTED_TOOL", payload: { toolId } });
+  }, []);
 
-    const setToolAndWorkbench = useCallback((toolId: ToolId | null, workbench: WorkbenchType) => {
+  const setToolAndWorkbench = useCallback(
+    (toolId: ToolId | null, workbench: WorkbenchType) => {
       // Check for unsaved changes using registered checker or state
       const hasUnsavedChanges = unsavedChangesCheckerRef.current?.() || state.hasUnsavedChanges;
 
       // If we're leaving pageEditor, viewer, or custom workbench and have unsaved changes, request navigation
       const leavingWorkbenchWithChanges =
-        (state.workbench === 'pageEditor' && workbench !== 'pageEditor' && hasUnsavedChanges) ||
-        (state.workbench === 'viewer' && workbench !== 'viewer' && hasUnsavedChanges) ||
-        (state.workbench.startsWith('custom:') && workbench !== state.workbench && hasUnsavedChanges);
+        (state.workbench === "pageEditor" && workbench !== "pageEditor" && hasUnsavedChanges) ||
+        (state.workbench === "viewer" && workbench !== "viewer" && hasUnsavedChanges) ||
+        (state.workbench.startsWith("custom:") && workbench !== state.workbench && hasUnsavedChanges);
 
       if (leavingWorkbenchWithChanges) {
         const performWorkbenchChange = () => {
-          dispatch({ type: 'SET_TOOL_AND_WORKBENCH', payload: { toolId, workbench } });
+          dispatch({ type: "SET_TOOL_AND_WORKBENCH", payload: { toolId, workbench } });
         };
-        dispatch({ type: 'SET_PENDING_NAVIGATION', payload: { navigationFn: performWorkbenchChange } });
-        dispatch({ type: 'SHOW_NAVIGATION_WARNING', payload: { show: true } });
+        dispatch({ type: "SET_PENDING_NAVIGATION", payload: { navigationFn: performWorkbenchChange } });
+        dispatch({ type: "SHOW_NAVIGATION_WARNING", payload: { show: true } });
       } else {
-        dispatch({ type: 'SET_TOOL_AND_WORKBENCH', payload: { toolId, workbench } });
+        dispatch({ type: "SET_TOOL_AND_WORKBENCH", payload: { toolId, workbench } });
       }
-    }, [state.workbench, state.hasUnsavedChanges]);
+    },
+    [state.workbench, state.hasUnsavedChanges],
+  );
 
-    const setHasUnsavedChanges = useCallback((hasChanges: boolean) => {
-      dispatch({ type: 'SET_UNSAVED_CHANGES', payload: { hasChanges } });
-    }, []);
+  const setHasUnsavedChanges = useCallback((hasChanges: boolean) => {
+    dispatch({ type: "SET_UNSAVED_CHANGES", payload: { hasChanges } });
+  }, []);
 
-    const registerUnsavedChangesChecker = useCallback((checker: () => boolean) => {
-      unsavedChangesCheckerRef.current = checker;
-    }, []);
+  const registerUnsavedChangesChecker = useCallback((checker: () => boolean) => {
+    unsavedChangesCheckerRef.current = checker;
+  }, []);
 
-    const unregisterUnsavedChangesChecker = useCallback(() => {
-      unsavedChangesCheckerRef.current = null;
-    }, []);
+  const unregisterUnsavedChangesChecker = useCallback(() => {
+    unsavedChangesCheckerRef.current = null;
+  }, []);
 
-    const registerNavigationWarningHandlers = useCallback((handlers: NavigationWarningHandlers) => {
-      navigationWarningHandlersRef.current = handlers;
-    }, []);
+  const registerNavigationWarningHandlers = useCallback((handlers: NavigationWarningHandlers) => {
+    navigationWarningHandlersRef.current = handlers;
+  }, []);
 
-    const unregisterNavigationWarningHandlers = useCallback(() => {
-      navigationWarningHandlersRef.current = null;
-    }, []);
+  const unregisterNavigationWarningHandlers = useCallback(() => {
+    navigationWarningHandlersRef.current = null;
+  }, []);
 
-    const showNavigationWarning = useCallback((show: boolean) => {
-      dispatch({ type: 'SHOW_NAVIGATION_WARNING', payload: { show } });
-    }, []);
+  const showNavigationWarning = useCallback((show: boolean) => {
+    dispatch({ type: "SHOW_NAVIGATION_WARNING", payload: { show } });
+  }, []);
 
-    const requestNavigation = useCallback((navigationFn: () => void) => {
+  const requestNavigation = useCallback(
+    (navigationFn: () => void) => {
       if (!state.hasUnsavedChanges) {
         navigationFn();
         return;
       }
 
-      dispatch({ type: 'SET_PENDING_NAVIGATION', payload: { navigationFn } });
-      dispatch({ type: 'SHOW_NAVIGATION_WARNING', payload: { show: true } });
-    }, [state.hasUnsavedChanges]);
+      dispatch({ type: "SET_PENDING_NAVIGATION", payload: { navigationFn } });
+      dispatch({ type: "SHOW_NAVIGATION_WARNING", payload: { show: true } });
+    },
+    [state.hasUnsavedChanges],
+  );
 
-    const confirmNavigation = useCallback(() => {
-      console.log('[NavigationContext] confirmNavigation called', {
-        hasPendingNav: !!state.pendingNavigation,
-        currentWorkbench: state.workbench,
-        currentTool: state.selectedTool
-      });
-      if (state.pendingNavigation) {
-        state.pendingNavigation();
-      }
+  const confirmNavigation = useCallback(() => {
+    console.log("[NavigationContext] confirmNavigation called", {
+      hasPendingNav: !!state.pendingNavigation,
+      currentWorkbench: state.workbench,
+      currentTool: state.selectedTool,
+    });
+    if (state.pendingNavigation) {
+      state.pendingNavigation();
+    }
 
-      dispatch({ type: 'SET_PENDING_NAVIGATION', payload: { navigationFn: null } });
-      dispatch({ type: 'SHOW_NAVIGATION_WARNING', payload: { show: false } });
-      console.log('[NavigationContext] confirmNavigation completed');
-    }, [state.pendingNavigation, state.workbench, state.selectedTool]);
+    dispatch({ type: "SET_PENDING_NAVIGATION", payload: { navigationFn: null } });
+    dispatch({ type: "SHOW_NAVIGATION_WARNING", payload: { show: false } });
+    console.log("[NavigationContext] confirmNavigation completed");
+  }, [state.pendingNavigation, state.workbench, state.selectedTool]);
 
-    const cancelNavigation = useCallback(() => {
-      dispatch({ type: 'SET_PENDING_NAVIGATION', payload: { navigationFn: null } });
-      dispatch({ type: 'SHOW_NAVIGATION_WARNING', payload: { show: false } });
-    }, []);
+  const cancelNavigation = useCallback(() => {
+    dispatch({ type: "SET_PENDING_NAVIGATION", payload: { navigationFn: null } });
+    dispatch({ type: "SHOW_NAVIGATION_WARNING", payload: { show: false } });
+  }, []);
 
-    const clearToolSelection = useCallback(() => {
-      dispatch({ type: 'SET_TOOL_AND_WORKBENCH', payload: { toolId: null, workbench: getDefaultWorkbench() } });
-    }, []);
+  const clearToolSelection = useCallback(() => {
+    dispatch({ type: "SET_TOOL_AND_WORKBENCH", payload: { toolId: null, workbench: getDefaultWorkbench() } });
+  }, []);
 
-    const handleToolSelect = useCallback((toolId: string) => {
+  const handleToolSelect = useCallback(
+    (toolId: string) => {
       const performToolSelect = () => {
-        if (toolId === 'allTools') {
-          dispatch({ type: 'SET_TOOL_AND_WORKBENCH', payload: { toolId: null, workbench: getDefaultWorkbench() } });
+        if (toolId === "allTools") {
+          dispatch({ type: "SET_TOOL_AND_WORKBENCH", payload: { toolId: null, workbench: getDefaultWorkbench() } });
           return;
         }
 
-        if (toolId === 'read' || toolId === 'view-pdf') {
-          dispatch({ type: 'SET_TOOL_AND_WORKBENCH', payload: { toolId: null, workbench: 'viewer' } });
+        if (toolId === "read" || toolId === "view-pdf") {
+          dispatch({ type: "SET_TOOL_AND_WORKBENCH", payload: { toolId: null, workbench: "viewer" } });
           return;
         }
 
@@ -264,78 +274,84 @@ export const NavigationProvider: React.FC<{
         // Regular tools have no workbench preference — keep the current view so
         // opening a tool doesn't unexpectedly switch the user to the viewer.
         const tool = isValidToolId(toolId) ? toolRegistry[toolId] : null;
-        const workbench = (tool && tool.workbench) ? tool.workbench : state.workbench;
+        const workbench = tool && tool.workbench ? tool.workbench : state.workbench;
 
         // Validate toolId and convert to ToolId type
         const validToolId = isValidToolId(toolId) ? toolId : null;
-        dispatch({ type: 'SET_TOOL_AND_WORKBENCH', payload: { toolId: validToolId, workbench } });
+        dispatch({ type: "SET_TOOL_AND_WORKBENCH", payload: { toolId: validToolId, workbench } });
       };
 
       // Check for unsaved changes using registered checker or state
       const hasUnsavedChanges = unsavedChangesCheckerRef.current?.() || state.hasUnsavedChanges;
-      
+
       // If switching away from current tool and have unsaved changes, show warning
       if (hasUnsavedChanges && state.selectedTool && state.selectedTool !== toolId) {
-        dispatch({ type: 'SET_PENDING_NAVIGATION', payload: { navigationFn: performToolSelect } });
-        dispatch({ type: 'SHOW_NAVIGATION_WARNING', payload: { show: true } });
+        dispatch({ type: "SET_PENDING_NAVIGATION", payload: { navigationFn: performToolSelect } });
+        dispatch({ type: "SHOW_NAVIGATION_WARNING", payload: { show: true } });
       } else {
         performToolSelect();
       }
-    }, [toolRegistry, state.hasUnsavedChanges, state.selectedTool]);
+    },
+    [toolRegistry, state.hasUnsavedChanges, state.selectedTool],
+  );
 
   // Memoize the actions object to prevent unnecessary context updates
   // This is critical to avoid infinite loops when effects depend on actions
-  const actions: NavigationContextActions = useMemo(() => ({
-    setWorkbench,
-    setSelectedTool,
-    setToolAndWorkbench,
-    setHasUnsavedChanges,
-    registerUnsavedChangesChecker,
-    unregisterUnsavedChangesChecker,
-    showNavigationWarning,
-    requestNavigation,
-    confirmNavigation,
-    cancelNavigation,
-    clearToolSelection,
-    handleToolSelect,
-    registerNavigationWarningHandlers,
-    unregisterNavigationWarningHandlers,
-    navigationWarningHandlersRef,
-  }), [
-    setWorkbench,
-    setSelectedTool,
-    setToolAndWorkbench,
-    setHasUnsavedChanges,
-    registerUnsavedChangesChecker,
-    unregisterUnsavedChangesChecker,
-    showNavigationWarning,
-    requestNavigation,
-    confirmNavigation,
-    cancelNavigation,
-    clearToolSelection,
-    handleToolSelect,
-    registerNavigationWarningHandlers,
-    unregisterNavigationWarningHandlers,
-  ]);
+  const actions: NavigationContextActions = useMemo(
+    () => ({
+      setWorkbench,
+      setSelectedTool,
+      setToolAndWorkbench,
+      setHasUnsavedChanges,
+      registerUnsavedChangesChecker,
+      unregisterUnsavedChangesChecker,
+      showNavigationWarning,
+      requestNavigation,
+      confirmNavigation,
+      cancelNavigation,
+      clearToolSelection,
+      handleToolSelect,
+      registerNavigationWarningHandlers,
+      unregisterNavigationWarningHandlers,
+      navigationWarningHandlersRef,
+    }),
+    [
+      setWorkbench,
+      setSelectedTool,
+      setToolAndWorkbench,
+      setHasUnsavedChanges,
+      registerUnsavedChangesChecker,
+      unregisterUnsavedChangesChecker,
+      showNavigationWarning,
+      requestNavigation,
+      confirmNavigation,
+      cancelNavigation,
+      clearToolSelection,
+      handleToolSelect,
+      registerNavigationWarningHandlers,
+      unregisterNavigationWarningHandlers,
+    ],
+  );
 
   const stateValue: NavigationContextStateValue = {
     workbench: state.workbench,
     selectedTool: state.selectedTool,
     hasUnsavedChanges: state.hasUnsavedChanges,
     pendingNavigation: state.pendingNavigation,
-    showNavigationWarning: state.showNavigationWarning
+    showNavigationWarning: state.showNavigationWarning,
   };
 
   // Also memoize the context value to prevent unnecessary re-renders
-  const actionsValue: NavigationContextActionsValue = useMemo(() => ({
-    actions
-  }), [actions]);
+  const actionsValue: NavigationContextActionsValue = useMemo(
+    () => ({
+      actions,
+    }),
+    [actions],
+  );
 
   return (
     <NavigationStateContext.Provider value={stateValue}>
-      <NavigationActionsContext.Provider value={actionsValue}>
-        {children}
-      </NavigationActionsContext.Provider>
+      <NavigationActionsContext.Provider value={actionsValue}>{children}</NavigationActionsContext.Provider>
     </NavigationStateContext.Provider>
   );
 };
@@ -344,7 +360,7 @@ export const NavigationProvider: React.FC<{
 export const useNavigationState = () => {
   const context = useContext(NavigationStateContext);
   if (context === undefined) {
-    throw new Error('useNavigationState must be used within NavigationProvider');
+    throw new Error("useNavigationState must be used within NavigationProvider");
   }
   return context;
 };
@@ -352,7 +368,7 @@ export const useNavigationState = () => {
 export const useNavigationActions = () => {
   const context = useContext(NavigationActionsContext);
   if (context === undefined) {
-    throw new Error('useNavigationActions must be used within NavigationProvider');
+    throw new Error("useNavigationActions must be used within NavigationProvider");
   }
   return context;
 };
diff --git a/frontend/src/core/contexts/PageEditorContext.tsx b/frontend/src/core/contexts/PageEditorContext.tsx
index 60e5969d83..ffabdf52d0 100644
--- a/frontend/src/core/contexts/PageEditorContext.tsx
+++ b/frontend/src/core/contexts/PageEditorContext.tsx
@@ -1,9 +1,9 @@
-import React, { createContext, useContext, useState, useCallback, ReactNode, useMemo, useRef, useEffect } from 'react';
-import { FileId } from '@app/types/file';
-import { useFileActions, useFileState } from '@app/contexts/FileContext';
-import { PDFDocument, PDFPage } from '@app/types/pageEditor';
-import { MAX_PAGE_EDITOR_FILES } from '@app/components/pageEditor/fileColors';
-import { useNavigationState } from '@app/contexts/NavigationContext';
+import React, { createContext, useContext, useState, useCallback, ReactNode, useMemo, useRef, useEffect } from "react";
+import { FileId } from "@app/types/file";
+import { useFileActions, useFileState } from "@app/contexts/FileContext";
+import { PDFDocument, PDFPage } from "@app/types/pageEditor";
+import { MAX_PAGE_EDITOR_FILES } from "@app/components/pageEditor/fileColors";
+import { useNavigationState } from "@app/contexts/NavigationContext";
 
 // PageEditorFile is now defined locally in consuming components
 // Components should derive file list directly from FileContext
@@ -29,7 +29,7 @@ function computeFileOrderFromPages(pages: PDFPage[]): FileId[] {
   // Sort files by their first page position
   const fileOrder = Array.from(fileFirstPagePositions.entries())
     .sort((a, b) => a[1] - b[1])
-    .map(entry => entry[0]);
+    .map((entry) => entry[0]);
 
   return fileOrder;
 }
@@ -46,7 +46,7 @@ function reorderPagesForFileMove(
   currentPages: PDFPage[],
   fromIndex: number,
   toIndex: number,
-  orderedFileIds: FileId[]
+  orderedFileIds: FileId[],
 ): PDFPage[] {
   // Get the file ID being moved
   const movedFileId = orderedFileIds[fromIndex];
@@ -56,7 +56,7 @@ function reorderPagesForFileMove(
   const movedFilePages: PDFPage[] = [];
   const remainingPages: PDFPage[] = [];
 
-  currentPages.forEach(page => {
+  currentPages.forEach((page) => {
     if (page.originalFileId === movedFileId) {
       movedFilePages.push(page);
     } else {
@@ -92,13 +92,13 @@ function reorderPagesForFileMove(
   const reorderedPages = [
     ...remainingPages.slice(0, insertionIndex),
     ...movedFilePages,
-    ...remainingPages.slice(insertionIndex)
+    ...remainingPages.slice(insertionIndex),
   ];
 
   // Renumber all pages sequentially (clone to avoid mutation)
   return reorderedPages.map((page, index) => ({
     ...page,
-    pageNumber: index + 1
+    pageNumber: index + 1,
   }));
 }
 
@@ -155,7 +155,7 @@ export function PageEditorProvider({ children }: PageEditorProviderProps) {
   }, []);
 
   const clearPersistedDocument = useCallback(() => {
-    console.log('[PageEditorContext] Clearing persisted document');
+    console.log("[PageEditorContext] Clearing persisted document");
     setPersistedDocument(null);
     setPersistedDocumentSignature(null);
     setCurrentPages(null);
@@ -173,8 +173,8 @@ export function PageEditorProvider({ children }: PageEditorProviderProps) {
   useEffect(() => {
     const prevWorkbench = prevWorkbenchRef.current;
     const nextWorkbench = navigationState.workbench;
-    const isLeavingPageEditor = prevWorkbench === 'pageEditor' && nextWorkbench !== 'pageEditor';
-    const isEnteringPageEditor = prevWorkbench !== 'pageEditor' && nextWorkbench === 'pageEditor';
+    const isLeavingPageEditor = prevWorkbench === "pageEditor" && nextWorkbench !== "pageEditor";
+    const isEnteringPageEditor = prevWorkbench !== "pageEditor" && nextWorkbench === "pageEditor";
 
     if (isLeavingPageEditor) {
       clearPersistedDocument();
@@ -184,9 +184,9 @@ export function PageEditorProvider({ children }: PageEditorProviderProps) {
       prevFileContextIdsRef.current = state.files.ids;
       setReorderedPages(null);
       setCurrentPages(null); // Force clear current pages when entering
-      setFileOrder(currentOrder => {
-        const validOrder = currentOrder.filter(id => state.files.ids.includes(id));
-        const newIds = state.files.ids.filter(id => !validOrder.includes(id));
+      setFileOrder((currentOrder) => {
+        const validOrder = currentOrder.filter((id) => state.files.ids.includes(id));
+        const newIds = state.files.ids.filter((id) => !validOrder.includes(id));
         if (newIds.length === 0 && validOrder.length === currentOrder.length) {
           return currentOrder;
         }
@@ -196,18 +196,10 @@ export function PageEditorProvider({ children }: PageEditorProviderProps) {
     }
 
     prevWorkbenchRef.current = nextWorkbench;
-  }, [
-    navigationState.workbench,
-    clearPersistedDocument,
-    state.files.ids,
-    setFileOrder,
-    setReorderedPages,
-  ]);
+  }, [navigationState.workbench, clearPersistedDocument, state.files.ids, setFileOrder, setReorderedPages]);
 
   const fileContextSignature = useMemo(() => {
-    return state.files.ids
-      .map(id => `${id}:${state.files.byId[id]?.versionNumber ?? 0}`)
-      .join(',');
+    return state.files.ids.map((id) => `${id}:${state.files.byId[id]?.versionNumber ?? 0}`).join(",");
   }, [state.files.ids, state.files.byId]);
 
   const prevFileContextSignature = useRef<string | null>(null);
@@ -240,7 +232,7 @@ export function PageEditorProvider({ children }: PageEditorProviderProps) {
       return;
     }
 
-    console.log('[PageEditorContext] File signature changed (IDs/versions changed), clearing persisted document:', {
+    console.log("[PageEditorContext] File signature changed (IDs/versions changed), clearing persisted document:", {
       prev: previousSignature?.substring(0, 50),
       current: fileContextSignature.substring(0, 50),
     });
@@ -268,11 +260,11 @@ export function PageEditorProvider({ children }: PageEditorProviderProps) {
       return;
     }
 
-    console.log('[PageEditorContext] FileContext files changed:', {
+    console.log("[PageEditorContext] FileContext files changed:", {
       prevCount: prevFileIds.length,
       currentCount: currentFileIds.length,
-      added: currentFileIds.filter(id => !prevFileIds.includes(id)).length,
-      removed: prevFileIds.filter(id => !currentFileIds.includes(id)).length,
+      added: currentFileIds.filter((id) => !prevFileIds.includes(id)).length,
+      removed: prevFileIds.filter((id) => !currentFileIds.includes(id)).length,
     });
 
     clearPersistedDocument();
@@ -283,13 +275,13 @@ export function PageEditorProvider({ children }: PageEditorProviderProps) {
     let newFileIdsToProcess: FileId[] = [];
 
     // Use functional setState to read latest fileOrder without depending on it
-    setFileOrder(currentOrder => {
+    setFileOrder((currentOrder) => {
       // Identify new files
-      const newFileIds = currentFileIds.filter(id => !currentOrder.includes(id));
+      const newFileIds = currentFileIds.filter((id) => !currentOrder.includes(id));
       newFileIdsToProcess = newFileIds; // Store for cleanup
 
       // Remove deleted files
-      const validFileOrder = currentOrder.filter(id => currentFileIds.includes(id));
+      const validFileOrder = currentOrder.filter((id) => currentFileIds.includes(id));
 
       if (newFileIds.length === 0 && validFileOrder.length === currentOrder.length) {
         return currentOrder; // No changes needed
@@ -302,14 +294,14 @@ export function PageEditorProvider({ children }: PageEditorProviderProps) {
 
     // Clear insertAfterPageId after a delay to allow usePageDocument to consume it first
     setTimeout(() => {
-      newFileIdsToProcess.forEach(fileId => {
+      newFileIdsToProcess.forEach((fileId) => {
         const stub = state.files.byId[fileId];
         if (stub?.insertAfterPageId) {
           fileActions.updateStirlingFileStub(fileId, { insertAfterPageId: undefined });
         }
       });
     }, 100);
-    }, [state.files.ids, state.files.byId, fileActions]);
+  }, [state.files.ids, state.files.byId, fileActions]);
 
   const updateCurrentPages = useCallback((pages: PDFPage[] | null) => {
     setCurrentPages(pages);
@@ -319,47 +311,53 @@ export function PageEditorProvider({ children }: PageEditorProviderProps) {
     setReorderedPages(null);
   }, []);
 
-  const setFileSelection = useCallback((fileId: FileId, selected: boolean) => {
-    const currentSelection = stateRef.current.ui.selectedFileIds;
-    const isAlreadySelected = currentSelection.includes(fileId);
+  const setFileSelection = useCallback(
+    (fileId: FileId, selected: boolean) => {
+      const currentSelection = stateRef.current.ui.selectedFileIds;
+      const isAlreadySelected = currentSelection.includes(fileId);
 
-    // Check if we're trying to select when at limit
-    if (selected && !isAlreadySelected && currentSelection.length >= MAX_PAGE_EDITOR_FILES) {
-      console.warn(`Page editor supports maximum ${MAX_PAGE_EDITOR_FILES} files. Cannot select more files.`);
-      return;
-    }
+      // Check if we're trying to select when at limit
+      if (selected && !isAlreadySelected && currentSelection.length >= MAX_PAGE_EDITOR_FILES) {
+        console.warn(`Page editor supports maximum ${MAX_PAGE_EDITOR_FILES} files. Cannot select more files.`);
+        return;
+      }
 
-    // Update FileContext selection
-    const newSelectedIds = selected
-      ? [...currentSelection, fileId]
-      : currentSelection.filter(id => id !== fileId);
+      // Update FileContext selection
+      const newSelectedIds = selected ? [...currentSelection, fileId] : currentSelection.filter((id) => id !== fileId);
 
-    fileActions.setSelectedFiles(newSelectedIds);
-  }, [fileActions]);
+      fileActions.setSelectedFiles(newSelectedIds);
+    },
+    [fileActions],
+  );
 
-  const toggleFileSelection = useCallback((fileId: FileId) => {
-    const currentSelection = stateRef.current.ui.selectedFileIds;
-    const isCurrentlySelected = currentSelection.includes(fileId);
+  const toggleFileSelection = useCallback(
+    (fileId: FileId) => {
+      const currentSelection = stateRef.current.ui.selectedFileIds;
+      const isCurrentlySelected = currentSelection.includes(fileId);
 
-    // If toggling on and at limit, don't allow
-    if (!isCurrentlySelected && currentSelection.length >= MAX_PAGE_EDITOR_FILES) {
-      console.warn(`Page editor supports maximum ${MAX_PAGE_EDITOR_FILES} files. Cannot select more files.`);
-      return;
-    }
+      // If toggling on and at limit, don't allow
+      if (!isCurrentlySelected && currentSelection.length >= MAX_PAGE_EDITOR_FILES) {
+        console.warn(`Page editor supports maximum ${MAX_PAGE_EDITOR_FILES} files. Cannot select more files.`);
+        return;
+      }
 
-    // Update FileContext selection
-    const newSelectedIds = isCurrentlySelected
-      ? currentSelection.filter(id => id !== fileId)
-      : [...currentSelection, fileId];
+      // Update FileContext selection
+      const newSelectedIds = isCurrentlySelected
+        ? currentSelection.filter((id) => id !== fileId)
+        : [...currentSelection, fileId];
 
-    fileActions.setSelectedFiles(newSelectedIds);
-  }, [fileActions]);
+      fileActions.setSelectedFiles(newSelectedIds);
+    },
+    [fileActions],
+  );
 
   const selectAll = useCallback(() => {
     const allFileIds = stateRef.current.files.ids;
 
     if (allFileIds.length > MAX_PAGE_EDITOR_FILES) {
-      console.warn(`Page editor supports maximum ${MAX_PAGE_EDITOR_FILES} files. Only first ${MAX_PAGE_EDITOR_FILES} files will be selected.`);
+      console.warn(
+        `Page editor supports maximum ${MAX_PAGE_EDITOR_FILES} files. Only first ${MAX_PAGE_EDITOR_FILES} files will be selected.`,
+      );
       fileActions.setSelectedFiles(allFileIds.slice(0, MAX_PAGE_EDITOR_FILES));
     } else {
       fileActions.setSelectedFiles(allFileIds);
@@ -370,44 +368,53 @@ export function PageEditorProvider({ children }: PageEditorProviderProps) {
     fileActions.setSelectedFiles([]);
   }, [fileActions]);
 
-  const reorderFiles = useCallback((fromIndex: number, toIndex: number) => {
-    // Reorder local fileOrder array (page editor workspace only)
-    const newOrder = [...fileOrder];
-    const [movedFileId] = newOrder.splice(fromIndex, 1);
-    newOrder.splice(toIndex, 0, movedFileId);
-    setFileOrder(newOrder);
+  const reorderFiles = useCallback(
+    (fromIndex: number, toIndex: number) => {
+      // Reorder local fileOrder array (page editor workspace only)
+      const newOrder = [...fileOrder];
+      const [movedFileId] = newOrder.splice(fromIndex, 1);
+      newOrder.splice(toIndex, 0, movedFileId);
+      setFileOrder(newOrder);
 
-    // If current pages available, reorder them based on file move
-    if (currentPages && currentPages.length > 0 && fromIndex !== toIndex) {
-      // Get the current file order from pages (files that have pages loaded)
-      const currentFileOrder: FileId[] = [];
-      const filesSeen = new Set<FileId>();
-      currentPages.forEach(page => {
-        const fileId = page.originalFileId;
-        if (fileId && !filesSeen.has(fileId)) {
-          filesSeen.add(fileId);
-          currentFileOrder.push(fileId);
+      // If current pages available, reorder them based on file move
+      if (currentPages && currentPages.length > 0 && fromIndex !== toIndex) {
+        // Get the current file order from pages (files that have pages loaded)
+        const currentFileOrder: FileId[] = [];
+        const filesSeen = new Set<FileId>();
+        currentPages.forEach((page) => {
+          const fileId = page.originalFileId;
+          if (fileId && !filesSeen.has(fileId)) {
+            filesSeen.add(fileId);
+            currentFileOrder.push(fileId);
+          }
+        });
+
+        // Get the target file ID from the NEW order (after the move)
+        // When moving down: we want to position after the file at toIndex-1 (file just before insertion)
+        // When moving up: we want to position before the file at toIndex+1 (file just after insertion)
+        const targetFileId =
+          fromIndex < toIndex
+            ? newOrder[toIndex - 1] // Moving down: target is the file just before where we inserted
+            : newOrder[toIndex + 1]; // Moving up: target is the file just after where we inserted
+
+        // Find their positions in the current page order (not the full file list)
+        const pageOrderFromIndex = currentFileOrder.findIndex((id) => id === movedFileId);
+        const pageOrderToIndex = currentFileOrder.findIndex((id) => id === targetFileId);
+
+        // Only reorder pages if both files have pages loaded
+        if (pageOrderFromIndex >= 0 && pageOrderToIndex >= 0) {
+          const reorderedPagesResult = reorderPagesForFileMove(
+            currentPages,
+            pageOrderFromIndex,
+            pageOrderToIndex,
+            currentFileOrder,
+          );
+          setReorderedPages(reorderedPagesResult);
         }
-      });
-
-      // Get the target file ID from the NEW order (after the move)
-      // When moving down: we want to position after the file at toIndex-1 (file just before insertion)
-      // When moving up: we want to position before the file at toIndex+1 (file just after insertion)
-      const targetFileId = fromIndex < toIndex
-        ? newOrder[toIndex - 1]  // Moving down: target is the file just before where we inserted
-        : newOrder[toIndex + 1];  // Moving up: target is the file just after where we inserted
-
-      // Find their positions in the current page order (not the full file list)
-      const pageOrderFromIndex = currentFileOrder.findIndex(id => id === movedFileId);
-      const pageOrderToIndex = currentFileOrder.findIndex(id => id === targetFileId);
-
-      // Only reorder pages if both files have pages loaded
-      if (pageOrderFromIndex >= 0 && pageOrderToIndex >= 0) {
-        const reorderedPagesResult = reorderPagesForFileMove(currentPages, pageOrderFromIndex, pageOrderToIndex, currentFileOrder);
-        setReorderedPages(reorderedPagesResult);
       }
-    }
-  }, [fileOrder, currentPages]);
+    },
+    [fileOrder, currentPages],
+  );
 
   const updateFileOrderFromPages = useCallback((pages: PDFPage[]) => {
     if (!pages || pages.length === 0) return;
@@ -421,53 +428,51 @@ export function PageEditorProvider({ children }: PageEditorProviderProps) {
     }
   }, []);
 
-
-  const value: PageEditorContextValue = useMemo(() => ({
-    currentPages,
-    updateCurrentPages,
-    reorderedPages,
-    clearReorderedPages,
-    fileOrder,
-    setFileOrder,
-    setFileSelection,
-    toggleFileSelection,
-    selectAll,
-    deselectAll,
-    reorderFiles,
-    updateFileOrderFromPages,
-    persistedDocument,
-    persistedDocumentSignature,
-    savePersistedDocument,
-    clearPersistedDocument,
-  }), [
-    currentPages,
-    updateCurrentPages,
-    reorderedPages,
-    clearReorderedPages,
-    fileOrder,
-    setFileSelection,
-    toggleFileSelection,
-    selectAll,
-    deselectAll,
-    reorderFiles,
-    updateFileOrderFromPages,
-    persistedDocument,
-    persistedDocumentSignature,
-    savePersistedDocument,
-    clearPersistedDocument,
-  ]);
-
-  return (
-    <PageEditorContext.Provider value={value}>
-      {children}
-    </PageEditorContext.Provider>
+  const value: PageEditorContextValue = useMemo(
+    () => ({
+      currentPages,
+      updateCurrentPages,
+      reorderedPages,
+      clearReorderedPages,
+      fileOrder,
+      setFileOrder,
+      setFileSelection,
+      toggleFileSelection,
+      selectAll,
+      deselectAll,
+      reorderFiles,
+      updateFileOrderFromPages,
+      persistedDocument,
+      persistedDocumentSignature,
+      savePersistedDocument,
+      clearPersistedDocument,
+    }),
+    [
+      currentPages,
+      updateCurrentPages,
+      reorderedPages,
+      clearReorderedPages,
+      fileOrder,
+      setFileSelection,
+      toggleFileSelection,
+      selectAll,
+      deselectAll,
+      reorderFiles,
+      updateFileOrderFromPages,
+      persistedDocument,
+      persistedDocumentSignature,
+      savePersistedDocument,
+      clearPersistedDocument,
+    ],
   );
+
+  return <PageEditorContext.Provider value={value}>{children}</PageEditorContext.Provider>;
 }
 
 export function usePageEditor() {
   const context = useContext(PageEditorContext);
   if (!context) {
-    throw new Error('usePageEditor must be used within PageEditorProvider');
+    throw new Error("usePageEditor must be used within PageEditorProvider");
   }
   return context;
 }
diff --git a/frontend/src/core/contexts/PreferencesContext.tsx b/frontend/src/core/contexts/PreferencesContext.tsx
index e8dc32eb4d..7b28e9a1ef 100644
--- a/frontend/src/core/contexts/PreferencesContext.tsx
+++ b/frontend/src/core/contexts/PreferencesContext.tsx
@@ -1,12 +1,9 @@
-import React, { createContext, useContext, useState, useCallback } from 'react';
-import { preferencesService, UserPreferences } from '@app/services/preferencesService';
+import React, { createContext, useContext, useState, useCallback } from "react";
+import { preferencesService, UserPreferences } from "@app/services/preferencesService";
 
 interface PreferencesContextValue {
   preferences: UserPreferences;
-  updatePreference: <K extends keyof UserPreferences>(
-    key: K,
-    value: UserPreferences[K]
-  ) => void;
+  updatePreference: <K extends keyof UserPreferences>(key: K, value: UserPreferences[K]) => void;
   resetPreferences: () => void;
   updateServerDefaults: (defaults: Partial<UserPreferences>) => void;
 }
@@ -21,16 +18,13 @@ export const PreferencesProvider: React.FC<{
     return preferencesService.getAllPreferences();
   });
 
-  const updatePreference = useCallback(
-    <K extends keyof UserPreferences>(key: K, value: UserPreferences[K]) => {
-      preferencesService.setPreference(key, value);
-      setPreferences((prev) => ({
-        ...prev,
-        [key]: value,
-      }));
-    },
-    []
-  );
+  const updatePreference = useCallback(<K extends keyof UserPreferences>(key: K, value: UserPreferences[K]) => {
+    preferencesService.setPreference(key, value);
+    setPreferences((prev) => ({
+      ...prev,
+      [key]: value,
+    }));
+  }, []);
 
   const resetPreferences = useCallback(() => {
     preferencesService.clearAllPreferences();
@@ -60,7 +54,7 @@ export const PreferencesProvider: React.FC<{
 export const usePreferences = (): PreferencesContextValue => {
   const context = useContext(PreferencesContext);
   if (!context) {
-    throw new Error('usePreferences must be used within a PreferencesProvider');
+    throw new Error("usePreferences must be used within a PreferencesProvider");
   }
   return context;
 };
diff --git a/frontend/src/core/contexts/RedactionContext.tsx b/frontend/src/core/contexts/RedactionContext.tsx
index f1b98adc52..716de08af7 100644
--- a/frontend/src/core/contexts/RedactionContext.tsx
+++ b/frontend/src/core/contexts/RedactionContext.tsx
@@ -1,7 +1,7 @@
-import React, { createContext, useContext, useState, ReactNode, useCallback, useRef, useEffect } from 'react';
-import { RedactParameters } from '@app/hooks/tools/redact/useRedactParameters';
-import { useNavigationGuard } from '@app/contexts/NavigationContext';
-import { RedactionMode } from '@embedpdf/plugin-redaction';
+import React, { createContext, useContext, useState, ReactNode, useCallback, useRef, useEffect } from "react";
+import { RedactParameters } from "@app/hooks/tools/redact/useRedactParameters";
+import { useNavigationGuard } from "@app/contexts/NavigationContext";
+import { RedactionMode } from "@embedpdf/plugin-redaction";
 
 /**
  * API interface that the EmbedPDF bridge will implement
@@ -84,7 +84,7 @@ const initialState: RedactionState = {
   activeType: null,
   isRedacting: false,
   isBridgeReady: false,
-  manualRedactColor: '#000000',
+  manualRedactColor: "#000000",
 };
 
 /**
@@ -98,21 +98,21 @@ export const RedactionProvider: React.FC<{ children: ReactNode }> = ({ children
 
   // Actions for tool configuration
   const setRedactionConfig = useCallback((config: RedactParameters | null) => {
-    setState(prev => ({
+    setState((prev) => ({
       ...prev,
       redactionConfig: config,
     }));
   }, []);
 
   const setRedactionMode = useCallback((enabled: boolean) => {
-    setState(prev => ({
+    setState((prev) => ({
       ...prev,
       isRedactionMode: enabled,
     }));
   }, []);
 
   const setRedactionsApplied = useCallback((applied: boolean) => {
-    setState(prev => ({
+    setState((prev) => ({
       ...prev,
       redactionsApplied: applied,
     }));
@@ -120,35 +120,35 @@ export const RedactionProvider: React.FC<{ children: ReactNode }> = ({ children
 
   // Synced state setters (called from bridge inside EmbedPDF)
   const setPendingCount = useCallback((count: number) => {
-    setState(prev => ({
+    setState((prev) => ({
       ...prev,
       pendingCount: count,
     }));
   }, []);
 
   const setActiveType = useCallback((type: RedactionMode | null) => {
-    setState(prev => ({
+    setState((prev) => ({
       ...prev,
       activeType: type,
     }));
   }, []);
 
   const setIsRedacting = useCallback((isRedacting: boolean) => {
-    setState(prev => ({
+    setState((prev) => ({
       ...prev,
       isRedacting,
     }));
   }, []);
 
   const setBridgeReady = useCallback((ready: boolean) => {
-    setState(prev => ({
+    setState((prev) => ({
       ...prev,
       isBridgeReady: ready,
     }));
   }, []);
 
   const setManualRedactColor = useCallback((color: string) => {
-    setState(prev => ({
+    setState((prev) => ({
       ...prev,
       manualRedactColor: color,
     }));
@@ -200,14 +200,14 @@ export const RedactionProvider: React.FC<{ children: ReactNode }> = ({ children
   const activateTextSelection = useCallback(() => {
     if (redactionApiRef.current) {
       redactionApiRef.current.enableRedact();
-      setActiveType('redactSelection' as RedactionMode);
+      setActiveType("redactSelection" as RedactionMode);
     }
   }, [setActiveType]);
 
   const activateMarquee = useCallback(() => {
     if (redactionApiRef.current) {
       redactionApiRef.current.enableRedact();
-      setActiveType('marqueeRedact' as RedactionMode);
+      setActiveType("marqueeRedact" as RedactionMode);
     }
   }, [setActiveType]);
 
@@ -230,11 +230,7 @@ export const RedactionProvider: React.FC<{ children: ReactNode }> = ({ children
     activateMarquee,
   };
 
-  return (
-    <RedactionContext.Provider value={contextValue}>
-      {children}
-    </RedactionContext.Provider>
-  );
+  return <RedactionContext.Provider value={contextValue}>{children}</RedactionContext.Provider>;
 };
 
 /**
@@ -243,7 +239,7 @@ export const RedactionProvider: React.FC<{ children: ReactNode }> = ({ children
 export const useRedaction = (): RedactionContextValue => {
   const context = useContext(RedactionContext);
   if (context === undefined) {
-    throw new Error('useRedaction must be used within a RedactionProvider');
+    throw new Error("useRedaction must be used within a RedactionProvider");
   }
   return context;
 };
@@ -260,7 +256,6 @@ export const useRedactionMode = () => {
     activeType: context?.activeType || null,
     isRedacting: context?.isRedacting || false,
     isBridgeReady: context?.isBridgeReady || false,
-    manualRedactColor: context?.manualRedactColor || '#000000',
+    manualRedactColor: context?.manualRedactColor || "#000000",
   };
 };
-
diff --git a/frontend/src/core/contexts/RightRailContext.tsx b/frontend/src/core/contexts/RightRailContext.tsx
index 5919a53e41..77c23c5a24 100644
--- a/frontend/src/core/contexts/RightRailContext.tsx
+++ b/frontend/src/core/contexts/RightRailContext.tsx
@@ -1,88 +1,96 @@
-import React, { createContext, useCallback, useContext, useMemo, useState } from 'react';
-import { RightRailAction, RightRailButtonConfig } from '@app/types/rightRail';
+import React, { createContext, useCallback, useContext, useMemo, useState } from "react";
+import { RightRailAction, RightRailButtonConfig } from "@app/types/rightRail";
 
 interface RightRailContextValue {
-	buttons: RightRailButtonConfig[];
-	actions: Record<string, RightRailAction>;
-	allButtonsDisabled: boolean;
-	registerButtons: (buttons: RightRailButtonConfig[]) => void;
-	unregisterButtons: (ids: string[]) => void;
-	setAction: (id: string, action?: RightRailAction) => void;
-	setAllRightRailButtonsDisabled: (disabled: boolean) => void;
-	clear: () => void;
+  buttons: RightRailButtonConfig[];
+  actions: Record<string, RightRailAction>;
+  allButtonsDisabled: boolean;
+  registerButtons: (buttons: RightRailButtonConfig[]) => void;
+  unregisterButtons: (ids: string[]) => void;
+  setAction: (id: string, action?: RightRailAction) => void;
+  setAllRightRailButtonsDisabled: (disabled: boolean) => void;
+  clear: () => void;
 }
 
 const RightRailContext = createContext<RightRailContextValue | undefined>(undefined);
 
 export function RightRailProvider({ children }: { children: React.ReactNode }) {
-	const [buttons, setButtons] = useState<RightRailButtonConfig[]>([]);
-	const [actions, setActions] = useState<Record<string, RightRailAction>>({});
-	const [allButtonsDisabled, setAllButtonsDisabled] = useState<boolean>(false);
+  const [buttons, setButtons] = useState<RightRailButtonConfig[]>([]);
+  const [actions, setActions] = useState<Record<string, RightRailAction>>({});
+  const [allButtonsDisabled, setAllButtonsDisabled] = useState<boolean>(false);
 
-	const registerButtons = useCallback((newButtons: RightRailButtonConfig[]) => {
-		setButtons(prev => {
-			const byId = new Map(prev.map(b => [b.id, b] as const));
-			newButtons.forEach(nb => {
-				const existing = byId.get(nb.id) || ({} as RightRailButtonConfig);
-				byId.set(nb.id, { ...existing, ...nb });
-			});
-			const merged = Array.from(byId.values());
-			merged.sort((a, b) => (a.order ?? 0) - (b.order ?? 0) || a.id.localeCompare(b.id));
-			if (process.env.NODE_ENV === 'development') {
-				const ids = newButtons.map(b => b.id);
-				const dupes = ids.filter((id, idx) => ids.indexOf(id) !== idx);
-				if (dupes.length) console.warn('[RightRail] Duplicate ids in registerButtons:', dupes);
-			}
-			return merged;
-		});
-	}, []);
+  const registerButtons = useCallback((newButtons: RightRailButtonConfig[]) => {
+    setButtons((prev) => {
+      const byId = new Map(prev.map((b) => [b.id, b] as const));
+      newButtons.forEach((nb) => {
+        const existing = byId.get(nb.id) || ({} as RightRailButtonConfig);
+        byId.set(nb.id, { ...existing, ...nb });
+      });
+      const merged = Array.from(byId.values());
+      merged.sort((a, b) => (a.order ?? 0) - (b.order ?? 0) || a.id.localeCompare(b.id));
+      if (process.env.NODE_ENV === "development") {
+        const ids = newButtons.map((b) => b.id);
+        const dupes = ids.filter((id, idx) => ids.indexOf(id) !== idx);
+        if (dupes.length) console.warn("[RightRail] Duplicate ids in registerButtons:", dupes);
+      }
+      return merged;
+    });
+  }, []);
 
-	const unregisterButtons = useCallback((ids: string[]) => {
-		setButtons(prev => prev.filter(b => !ids.includes(b.id)));
-		setActions(prev => Object.fromEntries(Object.entries(prev).filter(([id]) => !ids.includes(id))));
-	}, []);
+  const unregisterButtons = useCallback((ids: string[]) => {
+    setButtons((prev) => prev.filter((b) => !ids.includes(b.id)));
+    setActions((prev) => Object.fromEntries(Object.entries(prev).filter(([id]) => !ids.includes(id))));
+  }, []);
 
-	const setAction = useCallback((id: string, action?: RightRailAction) => {
-		setActions(prev => {
-			if (!action) {
-				if (!(id in prev)) return prev;
-				const next = { ...prev };
-				delete next[id];
-				return next;
-			}
-			return { ...prev, [id]: action };
-		});
-	}, []);
+  const setAction = useCallback((id: string, action?: RightRailAction) => {
+    setActions((prev) => {
+      if (!action) {
+        if (!(id in prev)) return prev;
+        const next = { ...prev };
+        delete next[id];
+        return next;
+      }
+      return { ...prev, [id]: action };
+    });
+  }, []);
 
-	const setAllRightRailButtonsDisabled = useCallback((disabled: boolean) => {
-		setAllButtonsDisabled(disabled);
-	}, []);
+  const setAllRightRailButtonsDisabled = useCallback((disabled: boolean) => {
+    setAllButtonsDisabled(disabled);
+  }, []);
 
-	const clear = useCallback(() => {
-		setButtons([]);
-		setActions({});
-	}, []);
+  const clear = useCallback(() => {
+    setButtons([]);
+    setActions({});
+  }, []);
 
-	const value = useMemo<RightRailContextValue>(() => ({ 
-		buttons, 
-		actions, 
-		allButtonsDisabled, 
-		registerButtons, 
-		unregisterButtons, 
-		setAction, 
-		setAllRightRailButtonsDisabled, 
-		clear 
-	}), [buttons, actions, allButtonsDisabled, registerButtons, unregisterButtons, setAction, setAllRightRailButtonsDisabled, clear]);
+  const value = useMemo<RightRailContextValue>(
+    () => ({
+      buttons,
+      actions,
+      allButtonsDisabled,
+      registerButtons,
+      unregisterButtons,
+      setAction,
+      setAllRightRailButtonsDisabled,
+      clear,
+    }),
+    [
+      buttons,
+      actions,
+      allButtonsDisabled,
+      registerButtons,
+      unregisterButtons,
+      setAction,
+      setAllRightRailButtonsDisabled,
+      clear,
+    ],
+  );
 
-	return (
-		<RightRailContext.Provider value={value}>
-			{children}
-		</RightRailContext.Provider>
-	);
+  return <RightRailContext.Provider value={value}>{children}</RightRailContext.Provider>;
 }
 
 export function useRightRail() {
-	const ctx = useContext(RightRailContext);
-	if (!ctx) throw new Error('useRightRail must be used within RightRailProvider');
-	return ctx;
+  const ctx = useContext(RightRailContext);
+  if (!ctx) throw new Error("useRightRail must be used within RightRailProvider");
+  return ctx;
 }
diff --git a/frontend/src/core/contexts/SaaSTeamContext.tsx b/frontend/src/core/contexts/SaaSTeamContext.tsx
index 81baeb2bc1..f85789cded 100644
--- a/frontend/src/core/contexts/SaaSTeamContext.tsx
+++ b/frontend/src/core/contexts/SaaSTeamContext.tsx
@@ -1,4 +1,4 @@
-import { createContext, ReactNode } from 'react';
+import { createContext, ReactNode } from "react";
 
 /**
  * Core stub for SaaS Team Context
diff --git a/frontend/src/core/contexts/SidebarContext.tsx b/frontend/src/core/contexts/SidebarContext.tsx
index 6568c9ff40..568ae06470 100644
--- a/frontend/src/core/contexts/SidebarContext.tsx
+++ b/frontend/src/core/contexts/SidebarContext.tsx
@@ -1,5 +1,5 @@
-import { createContext, useContext, useState, useRef, useMemo } from 'react';
-import { SidebarState, SidebarRefs, SidebarContextValue, SidebarProviderProps } from '@app/types/sidebar';
+import { createContext, useContext, useState, useRef, useMemo } from "react";
+import { SidebarState, SidebarRefs, SidebarContextValue, SidebarProviderProps } from "@app/types/sidebar";
 
 const SidebarContext = createContext<SidebarContextValue | undefined>(undefined);
 
@@ -10,40 +10,45 @@ export function SidebarProvider({ children }: SidebarProviderProps) {
   const rightRailRef = useRef<HTMLDivElement>(null);
 
   const [sidebarsVisible, setSidebarsVisible] = useState(true);
-  const [leftPanelView, setLeftPanelView] = useState<'toolPicker' | 'toolContent'>('toolPicker');
+  const [leftPanelView, setLeftPanelView] = useState<"toolPicker" | "toolContent">("toolPicker");
   const [readerMode, setReaderMode] = useState(false);
 
-  const sidebarState: SidebarState = useMemo(() => ({
-    sidebarsVisible,
-    leftPanelView,
-    readerMode,
-  }), [sidebarsVisible, leftPanelView, readerMode]);
-
-  const sidebarRefs: SidebarRefs = useMemo(() => ({
-    quickAccessRef,
-    toolPanelRef,
-    rightRailRef,
-  }), [quickAccessRef, toolPanelRef, rightRailRef]);
-
-  const contextValue: SidebarContextValue = useMemo(() => ({
-    sidebarState,
-    sidebarRefs,
-    setSidebarsVisible,
-    setLeftPanelView,
-    setReaderMode,
-  }), [sidebarState, sidebarRefs, setSidebarsVisible, setLeftPanelView, setReaderMode]);
-
-  return (
-    <SidebarContext.Provider value={contextValue}>
-      {children}
-    </SidebarContext.Provider>
+  const sidebarState: SidebarState = useMemo(
+    () => ({
+      sidebarsVisible,
+      leftPanelView,
+      readerMode,
+    }),
+    [sidebarsVisible, leftPanelView, readerMode],
   );
+
+  const sidebarRefs: SidebarRefs = useMemo(
+    () => ({
+      quickAccessRef,
+      toolPanelRef,
+      rightRailRef,
+    }),
+    [quickAccessRef, toolPanelRef, rightRailRef],
+  );
+
+  const contextValue: SidebarContextValue = useMemo(
+    () => ({
+      sidebarState,
+      sidebarRefs,
+      setSidebarsVisible,
+      setLeftPanelView,
+      setReaderMode,
+    }),
+    [sidebarState, sidebarRefs, setSidebarsVisible, setLeftPanelView, setReaderMode],
+  );
+
+  return <SidebarContext.Provider value={contextValue}>{children}</SidebarContext.Provider>;
 }
 
 export function useSidebarContext(): SidebarContextValue {
   const context = useContext(SidebarContext);
   if (context === undefined) {
-    throw new Error('useSidebarContext must be used within a SidebarProvider');
+    throw new Error("useSidebarContext must be used within a SidebarProvider");
   }
   return context;
 }
diff --git a/frontend/src/core/contexts/SignatureContext.tsx b/frontend/src/core/contexts/SignatureContext.tsx
index e8f10fc40f..f5e8897c4a 100644
--- a/frontend/src/core/contexts/SignatureContext.tsx
+++ b/frontend/src/core/contexts/SignatureContext.tsx
@@ -1,6 +1,6 @@
-import React, { createContext, useContext, useState, ReactNode, useCallback, useRef } from 'react';
-import { SignParameters } from '@app/hooks/tools/sign/useSignParameters';
-import type { SignatureAPI, HistoryAPI, AnnotationAPI } from '@app/components/viewer/viewerTypes';
+import React, { createContext, useContext, useState, ReactNode, useCallback, useRef } from "react";
+import { SignParameters } from "@app/hooks/tools/sign/useSignParameters";
+import type { SignatureAPI, HistoryAPI, AnnotationAPI } from "@app/components/viewer/viewerTypes";
 
 // Signature state interface
 interface SignatureState {
@@ -59,14 +59,14 @@ export const SignatureProvider: React.FC<{ children: ReactNode }> = ({ children
 
   // Actions
   const setSignatureConfig = useCallback((config: SignParameters | null) => {
-    setState(prev => ({
+    setState((prev) => ({
       ...prev,
       signatureConfig: config,
     }));
   }, []);
 
   const setPlacementMode = useCallback((enabled: boolean) => {
-    setState(prev => ({
+    setState((prev) => ({
       ...prev,
       isPlacementMode: enabled,
     }));
@@ -127,14 +127,14 @@ export const SignatureProvider: React.FC<{ children: ReactNode }> = ({ children
   }, []);
 
   const setSignaturesApplied = useCallback((applied: boolean) => {
-    setState(prev => ({
+    setState((prev) => ({
       ...prev,
       signaturesApplied: applied,
     }));
   }, []);
 
   const setPlacementPreviewSize = useCallback((size: { width: number; height: number } | null) => {
-    setState(prev => {
+    setState((prev) => {
       const prevSize = prev.placementPreviewSize;
       const same =
         (prevSize === null && size === null) ||
@@ -176,18 +176,14 @@ export const SignatureProvider: React.FC<{ children: ReactNode }> = ({ children
     setPlacementPreviewSize,
   };
 
-  return (
-    <SignatureContext.Provider value={contextValue}>
-      {children}
-    </SignatureContext.Provider>
-  );
+  return <SignatureContext.Provider value={contextValue}>{children}</SignatureContext.Provider>;
 };
 
 // Hook to use signature context
 export const useSignature = (): SignatureContextValue => {
   const context = useContext(SignatureContext);
   if (context === undefined) {
-    throw new Error('useSignature must be used within a SignatureProvider');
+    throw new Error("useSignature must be used within a SignatureProvider");
   }
   return context;
 };
diff --git a/frontend/src/core/contexts/ToolActionsContext.tsx b/frontend/src/core/contexts/ToolActionsContext.tsx
index 6d87543e0c..8a2e6e5356 100644
--- a/frontend/src/core/contexts/ToolActionsContext.tsx
+++ b/frontend/src/core/contexts/ToolActionsContext.tsx
@@ -1,4 +1,4 @@
-import { createContext, useContext } from 'react';
+import { createContext, useContext } from "react";
 
 interface ToolActionsContextValue {
   /**
diff --git a/frontend/src/core/contexts/ToolRegistryContext.tsx b/frontend/src/core/contexts/ToolRegistryContext.tsx
index 6a131ebed2..af8bf35602 100644
--- a/frontend/src/core/contexts/ToolRegistryContext.tsx
+++ b/frontend/src/core/contexts/ToolRegistryContext.tsx
@@ -1,4 +1,4 @@
-import { createContext, useContext } from 'react';
+import { createContext, useContext } from "react";
 
 import type {
   ToolRegistryEntry,
@@ -6,8 +6,8 @@ import type {
   RegularToolRegistry,
   SuperToolRegistry,
   LinkToolRegistry,
-} from '@app/data/toolsTaxonomy';
-import type { ToolId } from '@app/types/toolId';
+} from "@app/data/toolsTaxonomy";
+import type { ToolId } from "@app/types/toolId";
 
 export interface ToolRegistryCatalog {
   regularTools: RegularToolRegistry;
@@ -22,7 +22,7 @@ const ToolRegistryContext = createContext<ToolRegistryCatalog | null>(null);
 export const useToolRegistry = (): ToolRegistryCatalog => {
   const context = useContext(ToolRegistryContext);
   if (context === null) {
-    throw new Error('useToolRegistry must be used within a ToolRegistryProvider');
+    throw new Error("useToolRegistry must be used within a ToolRegistryProvider");
   }
   return context;
 };
diff --git a/frontend/src/core/contexts/ToolRegistryProvider.tsx b/frontend/src/core/contexts/ToolRegistryProvider.tsx
index fb8e5e48f6..c7b501f101 100644
--- a/frontend/src/core/contexts/ToolRegistryProvider.tsx
+++ b/frontend/src/core/contexts/ToolRegistryProvider.tsx
@@ -1,9 +1,9 @@
-import { useMemo } from 'react';
+import { useMemo } from "react";
 
-import type { ToolId } from '@app/types/toolId';
-import type { ToolRegistry } from '@app/data/toolsTaxonomy';
-import ToolRegistryContext, { ToolRegistryCatalog } from '@app/contexts/ToolRegistryContext';
-import { useTranslatedToolCatalog } from '@app/data/useTranslatedToolRegistry';
+import type { ToolId } from "@app/types/toolId";
+import type { ToolRegistry } from "@app/data/toolsTaxonomy";
+import ToolRegistryContext, { ToolRegistryCatalog } from "@app/contexts/ToolRegistryContext";
+import { useTranslatedToolCatalog } from "@app/data/useTranslatedToolRegistry";
 
 interface ToolRegistryProviderProps {
   children: React.ReactNode;
@@ -36,9 +36,5 @@ export const ToolRegistryProvider: React.FC<ToolRegistryProviderProps> = ({ chil
     };
   }, [catalog]);
 
-  return (
-    <ToolRegistryContext.Provider value={contextValue}>
-      {children}
-    </ToolRegistryContext.Provider>
-  );
+  return <ToolRegistryContext.Provider value={contextValue}>{children}</ToolRegistryContext.Provider>;
 };
diff --git a/frontend/src/core/contexts/ToolWorkflowContext.tsx b/frontend/src/core/contexts/ToolWorkflowContext.tsx
index 6cd83598c8..5093868541 100644
--- a/frontend/src/core/contexts/ToolWorkflowContext.tsx
+++ b/frontend/src/core/contexts/ToolWorkflowContext.tsx
@@ -3,24 +3,20 @@
  * Eliminates prop drilling with a single, simple context
  */
 
-import React, { createContext, useContext, useReducer, useCallback, useMemo, useEffect } from 'react';
-import { useToolManagement, type ToolAvailabilityMap } from '@app/hooks/useToolManagement';
-import { PageEditorFunctions } from '@app/types/pageEditor';
-import { ToolRegistryEntry, ToolRegistry } from '@app/data/toolsTaxonomy';
-import { useNavigationActions, useNavigationState } from '@app/contexts/NavigationContext';
-import { ToolId, isValidToolId } from '@app/types/toolId';
-import { WorkbenchType, getDefaultWorkbench, isBaseWorkbench } from '@app/types/workbench';
-import { useNavigationUrlSync } from '@app/hooks/useUrlSync';
-import { filterToolRegistryByQuery } from '@app/utils/toolSearch';
-import { useToolHistory } from '@app/hooks/tools/useUserToolActivity';
-import {
-  ToolWorkflowState,
-  createInitialState,
-  toolWorkflowReducer,
-} from '@app/contexts/toolWorkflow/toolWorkflowState';
-import type { ToolPanelMode } from '@app/constants/toolPanel';
-import { usePreferences } from '@app/contexts/PreferencesContext';
-import { useToolRegistry } from '@app/contexts/ToolRegistryContext';
+import React, { createContext, useContext, useReducer, useCallback, useMemo, useEffect } from "react";
+import { useToolManagement, type ToolAvailabilityMap } from "@app/hooks/useToolManagement";
+import { PageEditorFunctions } from "@app/types/pageEditor";
+import { ToolRegistryEntry, ToolRegistry } from "@app/data/toolsTaxonomy";
+import { useNavigationActions, useNavigationState } from "@app/contexts/NavigationContext";
+import { ToolId, isValidToolId } from "@app/types/toolId";
+import { WorkbenchType, getDefaultWorkbench, isBaseWorkbench } from "@app/types/workbench";
+import { useNavigationUrlSync } from "@app/hooks/useUrlSync";
+import { filterToolRegistryByQuery } from "@app/utils/toolSearch";
+import { useToolHistory } from "@app/hooks/tools/useUserToolActivity";
+import { ToolWorkflowState, createInitialState, toolWorkflowReducer } from "@app/contexts/toolWorkflow/toolWorkflowState";
+import type { ToolPanelMode } from "@app/constants/toolPanel";
+import { usePreferences } from "@app/contexts/PreferencesContext";
+import { useToolRegistry } from "@app/contexts/ToolRegistryContext";
 
 // State interface
 // Types and reducer/state moved to './toolWorkflow/state'
@@ -50,14 +46,13 @@ interface ToolWorkflowContextValue extends ToolWorkflowState {
 
   // UI Actions
   setSidebarsVisible: (visible: boolean) => void;
-  setLeftPanelView: (view: 'toolPicker' | 'toolContent' | 'hidden') => void;
+  setLeftPanelView: (view: "toolPicker" | "toolContent" | "hidden") => void;
   setReaderMode: (mode: boolean) => void;
   setToolPanelMode: (mode: ToolPanelMode) => void;
   setPreviewFile: (file: File | null) => void;
   setPageEditorFunctions: (functions: PageEditorFunctions | null) => void;
   setSearchQuery: (query: string) => void;
 
-
   selectTool: (toolId: ToolId | null) => void;
   clearToolSelection: () => void;
 
@@ -92,8 +87,10 @@ interface ToolWorkflowContextValue extends ToolWorkflowState {
 }
 
 // Ensure a single context instance across HMR to avoid provider/consumer mismatches
-const __GLOBAL_CONTEXT_KEY__ = '__ToolWorkflowContext__';
-const existingContext = (globalThis as any)[__GLOBAL_CONTEXT_KEY__] as React.Context<ToolWorkflowContextValue | undefined> | undefined;
+const __GLOBAL_CONTEXT_KEY__ = "__ToolWorkflowContext__";
+const existingContext = (globalThis as any)[__GLOBAL_CONTEXT_KEY__] as
+  | React.Context<ToolWorkflowContextValue | undefined>
+  | undefined;
 const ToolWorkflowContext = existingContext ?? createContext<ToolWorkflowContextValue | undefined>(undefined);
 if (!existingContext) {
   (globalThis as any)[__GLOBAL_CONTEXT_KEY__] = ToolWorkflowContext;
@@ -123,98 +120,103 @@ export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
   const { allTools } = useToolRegistry();
 
   // Tool history hook
-  const {
-    favoriteTools,
-    toggleFavorite,
-    isFavorite,
-  } = useToolHistory();
+  const { favoriteTools, toggleFavorite, isFavorite } = useToolHistory();
 
   // Get selected tool from navigation context
   const selectedTool = getSelectedTool(navigationState.selectedTool);
 
   // UI Action creators
   const setSidebarsVisible = useCallback((visible: boolean) => {
-    dispatch({ type: 'SET_SIDEBARS_VISIBLE', payload: visible });
+    dispatch({ type: "SET_SIDEBARS_VISIBLE", payload: visible });
   }, []);
 
-  const setLeftPanelView = useCallback((view: 'toolPicker' | 'toolContent' | 'hidden') => {
-    dispatch({ type: 'SET_LEFT_PANEL_VIEW', payload: view });
+  const setLeftPanelView = useCallback((view: "toolPicker" | "toolContent" | "hidden") => {
+    dispatch({ type: "SET_LEFT_PANEL_VIEW", payload: view });
   }, []);
 
-  const setReaderMode = useCallback((mode: boolean) => {
-    if (mode) {
-      actions.setWorkbench('viewer');
-      actions.setSelectedTool('read');
-    }
-    dispatch({ type: 'SET_READER_MODE', payload: mode });
-  }, [actions]);
+  const setReaderMode = useCallback(
+    (mode: boolean) => {
+      if (mode) {
+        actions.setWorkbench("viewer");
+        actions.setSelectedTool("read");
+      }
+      dispatch({ type: "SET_READER_MODE", payload: mode });
+    },
+    [actions],
+  );
 
-  const setToolPanelMode = useCallback((mode: ToolPanelMode) => {
-    dispatch({ type: 'SET_TOOL_PANEL_MODE', payload: mode });
-    updatePreference('defaultToolPanelMode', mode);
-    updatePreference('hasSelectedToolPanelMode', true);
-  }, [updatePreference]);
+  const setToolPanelMode = useCallback(
+    (mode: ToolPanelMode) => {
+      dispatch({ type: "SET_TOOL_PANEL_MODE", payload: mode });
+      updatePreference("defaultToolPanelMode", mode);
+      updatePreference("hasSelectedToolPanelMode", true);
+    },
+    [updatePreference],
+  );
 
-
-  const setPreviewFile = useCallback((file: File | null) => {
-    dispatch({ type: 'SET_PREVIEW_FILE', payload: file });
-    if (file) {
-      actions.setWorkbench('viewer');
-    }
-  }, [actions]);
+  const setPreviewFile = useCallback(
+    (file: File | null) => {
+      dispatch({ type: "SET_PREVIEW_FILE", payload: file });
+      if (file) {
+        actions.setWorkbench("viewer");
+      }
+    },
+    [actions],
+  );
 
   const setPageEditorFunctions = useCallback((functions: PageEditorFunctions | null) => {
-    dispatch({ type: 'SET_PAGE_EDITOR_FUNCTIONS', payload: functions });
+    dispatch({ type: "SET_PAGE_EDITOR_FUNCTIONS", payload: functions });
   }, []);
 
   const setSearchQuery = useCallback((query: string) => {
-    dispatch({ type: 'SET_SEARCH_QUERY', payload: query });
+    dispatch({ type: "SET_SEARCH_QUERY", payload: query });
   }, []);
 
   const registerCustomWorkbenchView = useCallback((view: CustomWorkbenchViewRegistration) => {
-    setCustomViewRegistry(prev => ({ ...prev, [view.id]: view }));
+    setCustomViewRegistry((prev) => ({ ...prev, [view.id]: view }));
   }, []);
 
-  const unregisterCustomWorkbenchView = useCallback((id: string) => {
-    let removedView: CustomWorkbenchViewRegistration | undefined;
+  const unregisterCustomWorkbenchView = useCallback(
+    (id: string) => {
+      let removedView: CustomWorkbenchViewRegistration | undefined;
 
-    setCustomViewRegistry(prev => {
-      const existing = prev[id];
-      if (!existing) {
-        return prev;
+      setCustomViewRegistry((prev) => {
+        const existing = prev[id];
+        if (!existing) {
+          return prev;
+        }
+        removedView = existing;
+        const updated = { ...prev };
+        delete updated[id];
+        return updated;
+      });
+
+      setCustomViewData((prev) => {
+        if (!(id in prev)) {
+          return prev;
+        }
+        const updated = { ...prev };
+        delete updated[id];
+        return updated;
+      });
+
+      if (removedView && navigationState.workbench === removedView.workbenchId) {
+        actions.setWorkbench(getDefaultWorkbench());
       }
-      removedView = existing;
-      const updated = { ...prev };
-      delete updated[id];
-      return updated;
-    });
-
-    setCustomViewData(prev => {
-      if (!(id in prev)) {
-        return prev;
-      }
-      const updated = { ...prev };
-      delete updated[id];
-      return updated;
-    });
-
-    if (removedView && navigationState.workbench === removedView.workbenchId) {
-      actions.setWorkbench(getDefaultWorkbench());
-    }
-  }, [actions, navigationState.workbench]);
+    },
+    [actions, navigationState.workbench],
+  );
 
   const setCustomWorkbenchViewData = useCallback((id: string, dataOrUpdater: any | ((prev: any) => any)) => {
-    setCustomViewData(prev => {
+    setCustomViewData((prev) => {
       const currentData = prev[id];
-      const newData = typeof dataOrUpdater === 'function'
-        ? dataOrUpdater(currentData)
-        : dataOrUpdater;
+      const newData = typeof dataOrUpdater === "function" ? dataOrUpdater(currentData) : dataOrUpdater;
       return { ...prev, [id]: newData };
     });
   }, []);
 
   const clearCustomWorkbenchViewData = useCallback((id: string) => {
-    setCustomViewData(prev => {
+    setCustomViewData((prev) => {
       if (!(id in prev)) {
         return prev;
       }
@@ -225,7 +227,7 @@ export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
   }, []);
 
   const customWorkbenchViews = useMemo<CustomWorkbenchViewInstance[]>(() => {
-    return Object.values(customViewRegistry).map(view => ({
+    return Object.values(customViewRegistry).map((view) => ({
       ...view,
       data: Object.prototype.hasOwnProperty.call(customViewData, view.id) ? customViewData[view.id] : null,
     }));
@@ -240,11 +242,17 @@ export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
       return;
     }
 
-    const currentCustomView = customWorkbenchViews.find(view => view.workbenchId === navigationState.workbench);
+    const currentCustomView = customWorkbenchViews.find((view) => view.workbenchId === navigationState.workbench);
     if (!currentCustomView || currentCustomView.data == null) {
       actions.setWorkbench(getDefaultWorkbench());
     }
-  }, [actions, customWorkbenchViews, navigationState.workbench, navigationState.pendingNavigation, navigationState.showNavigationWarning]);
+  }, [
+    actions,
+    customWorkbenchViews,
+    navigationState.workbench,
+    navigationState.pendingNavigation,
+    navigationState.showNavigationWarning,
+  ]);
 
   // Persisted via PreferencesContext; no direct localStorage writes needed here
 
@@ -254,7 +262,7 @@ export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
   useEffect(() => {
     const preferredMode = preferences.defaultToolPanelMode;
     if (preferredMode !== state.toolPanelMode) {
-      dispatch({ type: 'SET_TOOL_PANEL_MODE', payload: preferredMode });
+      dispatch({ type: "SET_TOOL_PANEL_MODE", payload: preferredMode });
     }
   }, [preferences.defaultToolPanelMode, state.toolPanelMode]);
 
@@ -265,29 +273,29 @@ export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
   useEffect(() => {
     if (hasAppliedStartupView.current) return;
     const startupView = preferences.defaultStartupView;
-    if (startupView === 'read') {
+    if (startupView === "read") {
       hasAppliedStartupView.current = true;
       setReaderMode(true);
-      actions.setSelectedTool('read');
-    } else if (startupView === 'automate') {
+      actions.setSelectedTool("read");
+    } else if (startupView === "automate") {
       hasAppliedStartupView.current = true;
-      actions.setSelectedTool('automate');
-      setLeftPanelView('toolContent');
+      actions.setSelectedTool("automate");
+      setLeftPanelView("toolContent");
     }
     // 'tools' is the default — no action needed
-    if (startupView === 'tools') {
+    if (startupView === "tools") {
       hasAppliedStartupView.current = true;
     }
   }, [preferences.defaultStartupView, actions, setReaderMode, setLeftPanelView]);
 
   // Tool reset methods
   const registerToolReset = useCallback((toolId: string, resetFunction: () => void) => {
-    setToolResetFunctions(prev => ({ ...prev, [toolId]: resetFunction }));
+    setToolResetFunctions((prev) => ({ ...prev, [toolId]: resetFunction }));
   }, []);
 
   const resetTool = useCallback((toolId: string) => {
     // Use the current state directly instead of depending on the state in the closure
-    setToolResetFunctions(current => {
+    setToolResetFunctions((current) => {
       const resetFunction = current[toolId];
       if (resetFunction) {
         resetFunction();
@@ -297,79 +305,95 @@ export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
   }, []); // Empty dependency array makes this stable
 
   // Workflow actions (compound actions that coordinate multiple state changes)
-  const handleToolSelect = useCallback((toolId: ToolId) => {
-    const availabilityInfo = toolAvailability[toolId];
-    const isExplicitlyDisabled = availabilityInfo ? availabilityInfo.available === false : false;
-    if (toolId !== 'read' && toolId !== 'multiTool' && isExplicitlyDisabled) {
-      return;
-    }
+  const handleToolSelect = useCallback(
+    (toolId: ToolId) => {
+      const availabilityInfo = toolAvailability[toolId];
+      const isExplicitlyDisabled = availabilityInfo ? availabilityInfo.available === false : false;
+      if (toolId !== "read" && toolId !== "multiTool" && isExplicitlyDisabled) {
+        return;
+      }
 
-    // Guard: if there are unsaved changes and we're switching away from the current tool,
-    // show the save modal before proceeding.
-    const hasUnsavedChanges = navigationState.hasUnsavedChanges;
-    if (hasUnsavedChanges && navigationState.selectedTool && navigationState.selectedTool !== toolId) {
-      actions.requestNavigation(() => handleToolSelect(toolId));
-      return;
-    }
+      // Guard: if there are unsaved changes and we're switching away from the current tool,
+      // show the save modal before proceeding.
+      const hasUnsavedChanges = navigationState.hasUnsavedChanges;
+      if (hasUnsavedChanges && navigationState.selectedTool && navigationState.selectedTool !== toolId) {
+        actions.requestNavigation(() => handleToolSelect(toolId));
+        return;
+      }
 
-    // If we're currently on a custom workbench (e.g., Validate Signature report),
-    // selecting any tool should take the user back to the default file manager view.
-    const wasInCustomWorkbench = !isBaseWorkbench(navigationState.workbench);
+      // If we're currently on a custom workbench (e.g., Validate Signature report),
+      // selecting any tool should take the user back to the default file manager view.
+      const wasInCustomWorkbench = !isBaseWorkbench(navigationState.workbench);
 
-    // Handle read tool selection - should behave exactly like QuickAccessBar read button
-    if (toolId === 'read') {
-      setReaderMode(true);
-      actions.setSelectedTool('read');
-      actions.setWorkbench(wasInCustomWorkbench ? getDefaultWorkbench() : 'viewer');
-      setSearchQuery('');
-      return;
-    }
+      // Handle read tool selection - should behave exactly like QuickAccessBar read button
+      if (toolId === "read") {
+        setReaderMode(true);
+        actions.setSelectedTool("read");
+        actions.setWorkbench(wasInCustomWorkbench ? getDefaultWorkbench() : "viewer");
+        setSearchQuery("");
+        return;
+      }
 
-    // Handle multiTool selection - enable page editor workbench
-    if (toolId === 'multiTool') {
+      // Handle multiTool selection - enable page editor workbench
+      if (toolId === "multiTool") {
+        setReaderMode(false);
+        setLeftPanelView("hidden");
+        actions.setSelectedTool("multiTool");
+        actions.setWorkbench(wasInCustomWorkbench ? getDefaultWorkbench() : "pageEditor");
+        setSearchQuery("");
+        return;
+      }
+
+      // Set the selected tool and determine the appropriate workbench
+      const validToolId = isValidToolId(toolId) ? toolId : null;
+      actions.setSelectedTool(validToolId);
+
+      // Switch workbench only when required: leaving a custom view, or the tool declares one.
+      const tool = getSelectedTool(toolId);
+      if (wasInCustomWorkbench) {
+        actions.setWorkbench(getDefaultWorkbench());
+      } else if (tool && tool.workbench) {
+        actions.setWorkbench(tool.workbench);
+      }
+
+      // Clear search query when selecting a tool
+      setSearchQuery("");
+      setLeftPanelView("toolContent");
+      setReaderMode(false); // Disable read mode when selecting tools
+    },
+    [
+      actions,
+      getSelectedTool,
+      navigationState.workbench,
+      navigationState.hasUnsavedChanges,
+      navigationState.selectedTool,
+      setLeftPanelView,
+      setReaderMode,
+      setSearchQuery,
+      toolAvailability,
+    ],
+  );
+
+  const handleToolSelectForced = useCallback(
+    (toolId: ToolId) => {
+      const validToolId = isValidToolId(toolId) ? toolId : null;
+      actions.setSelectedTool(validToolId);
+      const tool = getSelectedTool(toolId);
+      const wasInCustomWorkbench = !isBaseWorkbench(navigationState.workbench);
+      if (wasInCustomWorkbench) {
+        actions.setWorkbench(getDefaultWorkbench());
+      } else if (tool && tool.workbench) {
+        actions.setWorkbench(tool.workbench);
+      }
+      setSearchQuery("");
+      setLeftPanelView("toolContent");
       setReaderMode(false);
-      setLeftPanelView('hidden');
-      actions.setSelectedTool('multiTool');
-      actions.setWorkbench(wasInCustomWorkbench ? getDefaultWorkbench() : 'pageEditor');
-      setSearchQuery('');
-      return;
-    }
-
-    // Set the selected tool and determine the appropriate workbench
-    const validToolId = isValidToolId(toolId) ? toolId : null;
-    actions.setSelectedTool(validToolId);
-
-    // Switch workbench only when required: leaving a custom view, or the tool declares one.
-    const tool = getSelectedTool(toolId);
-    if (wasInCustomWorkbench) {
-      actions.setWorkbench(getDefaultWorkbench());
-    } else if (tool && tool.workbench) {
-      actions.setWorkbench(tool.workbench);
-    }
-
-    // Clear search query when selecting a tool
-    setSearchQuery('');
-    setLeftPanelView('toolContent');
-    setReaderMode(false); // Disable read mode when selecting tools
-  }, [actions, getSelectedTool, navigationState.workbench, navigationState.hasUnsavedChanges, navigationState.selectedTool, setLeftPanelView, setReaderMode, setSearchQuery, toolAvailability]);
-
-  const handleToolSelectForced = useCallback((toolId: ToolId) => {
-    const validToolId = isValidToolId(toolId) ? toolId : null;
-    actions.setSelectedTool(validToolId);
-    const tool = getSelectedTool(toolId);
-    const wasInCustomWorkbench = !isBaseWorkbench(navigationState.workbench);
-    if (wasInCustomWorkbench) {
-      actions.setWorkbench(getDefaultWorkbench());
-    } else if (tool && tool.workbench) {
-      actions.setWorkbench(tool.workbench);
-    }
-    setSearchQuery('');
-    setLeftPanelView('toolContent');
-    setReaderMode(false);
-  }, [actions, getSelectedTool, navigationState.workbench, setLeftPanelView, setReaderMode, setSearchQuery]);
+    },
+    [actions, getSelectedTool, navigationState.workbench, setLeftPanelView, setReaderMode, setSearchQuery],
+  );
 
   const handleBackToTools = useCallback(() => {
-    setLeftPanelView('toolPicker');
+    setLeftPanelView("toolPicker");
     setReaderMode(false);
     actions.setSelectedTool(null);
   }, [setLeftPanelView, setReaderMode, actions.setSelectedTool]);
@@ -384,111 +408,104 @@ export function ToolWorkflowProvider({ children }: ToolWorkflowProviderProps) {
     return filterToolRegistryByQuery(toolRegistry, state.searchQuery);
   }, [toolRegistry, state.searchQuery]);
 
-  const isPanelVisible = useMemo(() =>
-    state.sidebarsVisible && !state.readerMode && state.leftPanelView !== 'hidden',
-    [state.sidebarsVisible, state.readerMode, state.leftPanelView]
+  const isPanelVisible = useMemo(
+    () => state.sidebarsVisible && !state.readerMode && state.leftPanelView !== "hidden",
+    [state.sidebarsVisible, state.readerMode, state.leftPanelView],
   );
 
-  useNavigationUrlSync(
-    navigationState.selectedTool,
-    handleToolSelect,
-    handleBackToTools,
-    allTools,
-    true
-  );
+  useNavigationUrlSync(navigationState.selectedTool, handleToolSelect, handleBackToTools, allTools, true);
 
   // Properly memoized context value
-  const contextValue = useMemo((): ToolWorkflowContextValue => ({
-    // State
-    ...state,
-    selectedToolKey: navigationState.selectedTool,
-    selectedTool,
-    toolRegistry,
-    getSelectedTool,
+  const contextValue = useMemo(
+    (): ToolWorkflowContextValue => ({
+      // State
+      ...state,
+      selectedToolKey: navigationState.selectedTool,
+      selectedTool,
+      toolRegistry,
+      getSelectedTool,
 
-    // Actions
-    setSidebarsVisible,
-    setLeftPanelView,
-    setReaderMode,
-    setToolPanelMode,
-    setPreviewFile,
-    setPageEditorFunctions,
-    setSearchQuery,
-    selectTool: actions.setSelectedTool,
-    clearToolSelection: () => actions.setSelectedTool(null),
+      // Actions
+      setSidebarsVisible,
+      setLeftPanelView,
+      setReaderMode,
+      setToolPanelMode,
+      setPreviewFile,
+      setPageEditorFunctions,
+      setSearchQuery,
+      selectTool: actions.setSelectedTool,
+      clearToolSelection: () => actions.setSelectedTool(null),
 
-    // Tool Reset Actions
-    toolResetFunctions,
-    registerToolReset,
-    resetTool,
-    toolAvailability,
+      // Tool Reset Actions
+      toolResetFunctions,
+      registerToolReset,
+      resetTool,
+      toolAvailability,
 
-    // Workflow Actions
-    handleToolSelect,
-    handleToolSelectForced,
-    handleBackToTools,
-    handleReaderToggle,
+      // Workflow Actions
+      handleToolSelect,
+      handleToolSelectForced,
+      handleBackToTools,
+      handleReaderToggle,
 
-    // Computed
-    filteredTools,
-    isPanelVisible,
+      // Computed
+      filteredTools,
+      isPanelVisible,
 
-    // Tool History
-    favoriteTools,
-    toggleFavorite,
-    isFavorite,
+      // Tool History
+      favoriteTools,
+      toggleFavorite,
+      isFavorite,
 
-    // Custom workbench views
-    customWorkbenchViews,
-    registerCustomWorkbenchView,
-    unregisterCustomWorkbenchView,
-    setCustomWorkbenchViewData,
-    clearCustomWorkbenchViewData,
-  }), [
-    state,
-    navigationState.selectedTool,
-    selectedTool,
-    toolRegistry,
-    getSelectedTool,
-    toolAvailability,
-    setSidebarsVisible,
-    setLeftPanelView,
-    setReaderMode,
-    setToolPanelMode,
-    setPreviewFile,
-    setPageEditorFunctions,
-    setSearchQuery,
-    actions.setSelectedTool,
-    registerToolReset,
-    resetTool,
-    handleToolSelect,
-    handleBackToTools,
-    handleReaderToggle,
-    filteredTools,
-    isPanelVisible,
-    favoriteTools,
-    toggleFavorite,
-    isFavorite,
-    customWorkbenchViews,
-    registerCustomWorkbenchView,
-    unregisterCustomWorkbenchView,
-    setCustomWorkbenchViewData,
-    clearCustomWorkbenchViewData,
-  ]);
-
-  return (
-    <ToolWorkflowContext.Provider value={contextValue}>
-      {children}
-    </ToolWorkflowContext.Provider>
+      // Custom workbench views
+      customWorkbenchViews,
+      registerCustomWorkbenchView,
+      unregisterCustomWorkbenchView,
+      setCustomWorkbenchViewData,
+      clearCustomWorkbenchViewData,
+    }),
+    [
+      state,
+      navigationState.selectedTool,
+      selectedTool,
+      toolRegistry,
+      getSelectedTool,
+      toolAvailability,
+      setSidebarsVisible,
+      setLeftPanelView,
+      setReaderMode,
+      setToolPanelMode,
+      setPreviewFile,
+      setPageEditorFunctions,
+      setSearchQuery,
+      actions.setSelectedTool,
+      registerToolReset,
+      resetTool,
+      handleToolSelect,
+      handleBackToTools,
+      handleReaderToggle,
+      filteredTools,
+      isPanelVisible,
+      favoriteTools,
+      toggleFavorite,
+      isFavorite,
+      customWorkbenchViews,
+      registerCustomWorkbenchView,
+      unregisterCustomWorkbenchView,
+      setCustomWorkbenchViewData,
+      clearCustomWorkbenchViewData,
+    ],
   );
+
+  return <ToolWorkflowContext.Provider value={contextValue}>{children}</ToolWorkflowContext.Provider>;
 }
 
 // Custom hook to use the context
 export function useToolWorkflow(): ToolWorkflowContextValue {
   const context = useContext(ToolWorkflowContext);
   if (!context) {
-    console.error('ToolWorkflowContext not found. Current stack:', new Error().stack);
-    throw new Error('useToolWorkflow must be used within a ToolWorkflowProvider');
+    console.error("ToolWorkflowContext not found. Current stack:", new Error().stack);
+    throw new Error("useToolWorkflow must be used within a ToolWorkflowProvider");
   }
   return context;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/core/contexts/TourOrchestrationContext.tsx b/frontend/src/core/contexts/TourOrchestrationContext.tsx
index 2c5b9dda52..38a0b1d056 100644
--- a/frontend/src/core/contexts/TourOrchestrationContext.tsx
+++ b/frontend/src/core/contexts/TourOrchestrationContext.tsx
@@ -1,12 +1,12 @@
-import React, { createContext, useContext, useCallback, useRef } from 'react';
-import { BASE_PATH } from '@app/constants/app';
-import { useFileHandler } from '@app/hooks/useFileHandler';
-import { useFilesModalContext } from '@app/contexts/FilesModalContext';
-import { useNavigationActions } from '@app/contexts/NavigationContext';
-import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
-import { useAllFiles, useFileManagement } from '@app/contexts/FileContext';
-import { StirlingFile } from '@app/types/fileContext';
-import { fileStorage } from '@app/services/fileStorage';
+import React, { createContext, useContext, useCallback, useRef } from "react";
+import { BASE_PATH } from "@app/constants/app";
+import { useFileHandler } from "@app/hooks/useFileHandler";
+import { useFilesModalContext } from "@app/contexts/FilesModalContext";
+import { useNavigationActions } from "@app/contexts/NavigationContext";
+import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
+import { useAllFiles, useFileManagement } from "@app/contexts/FileContext";
+import { StirlingFile } from "@app/types/fileContext";
+import { fileStorage } from "@app/services/fileStorage";
 
 interface TourOrchestrationContextType {
   // State management
@@ -60,14 +60,14 @@ export const TourOrchestrationProvider: React.FC<{ children: React.ReactNode }>
   const saveWorkbenchState = useCallback(() => {
     // Get fresh files from ref
     const currentFiles = filesRef.current;
-    console.log('Saving workbench state, files count:', currentFiles.length);
+    console.log("Saving workbench state, files count:", currentFiles.length);
     savedFilesRef.current = [...currentFiles];
     // Clear all files for clean demo
     clearAllFiles();
   }, [clearAllFiles]);
 
   const restoreWorkbenchState = useCallback(async () => {
-    console.log('Restoring workbench state, saved files count:', savedFilesRef.current.length);
+    console.log("Restoring workbench state, saved files count:", savedFilesRef.current.length);
 
     // Go back to Tools
     handleBackToTools();
@@ -79,10 +79,10 @@ export const TourOrchestrationProvider: React.FC<{ children: React.ReactNode }>
     const currentFiles = filesRef.current;
     if (currentFiles.length > 0) {
       try {
-        await Promise.all(currentFiles.map(file => fileStorage.deleteStirlingFile(file.fileId)));
+        await Promise.all(currentFiles.map((file) => fileStorage.deleteStirlingFile(file.fileId)));
         console.log(`Deleted ${currentFiles.length} file(s) from storage`);
       } catch (error) {
-        console.error('Failed to delete files from storage:', error);
+        console.error("Failed to delete files from storage:", error);
       }
     }
 
@@ -93,9 +93,12 @@ export const TourOrchestrationProvider: React.FC<{ children: React.ReactNode }>
         savedFilesRef.current.map(async (sf) => {
           const buffer = await sf.arrayBuffer();
           return new File([buffer], sf.name, { type: sf.type, lastModified: sf.lastModified });
-        })
+        }),
+      );
+      console.log(
+        "Restoring files:",
+        filesToRestore.map((f) => f.name),
       );
-      console.log('Restoring files:', filesToRestore.map(f => f.name));
       await addFiles(filesToRestore);
       savedFilesRef.current = [];
     }
@@ -106,7 +109,7 @@ export const TourOrchestrationProvider: React.FC<{ children: React.ReactNode }>
   }, [handleBackToTools]);
 
   const selectCropTool = useCallback(() => {
-    handleToolSelect('crop');
+    handleToolSelect("crop");
   }, [handleToolSelect]);
 
   const loadSampleFile = useCallback(async () => {
@@ -115,25 +118,25 @@ export const TourOrchestrationProvider: React.FC<{ children: React.ReactNode }>
       closeFilesModal();
       const response = await fetch(`${BASE_PATH}/samples/Sample.pdf`);
       const blob = await response.blob();
-      const file = new File([blob], 'Sample.pdf', { type: 'application/pdf' });
+      const file = new File([blob], "Sample.pdf", { type: "application/pdf" });
 
       await addFiles([file]);
       closeFilesModal();
     } catch (error) {
-      console.error('Failed to load sample file:', error);
+      console.error("Failed to load sample file:", error);
     }
   }, [addFiles, closeFilesModal]);
 
   const switchToViewer = useCallback(() => {
-    navActions.setWorkbench('viewer');
+    navActions.setWorkbench("viewer");
   }, [navActions]);
 
   const switchToPageEditor = useCallback(() => {
-    navActions.setWorkbench('pageEditor');
+    navActions.setWorkbench("pageEditor");
   }, [navActions]);
 
   const switchToActiveFiles = useCallback(() => {
-    navActions.setWorkbench('fileEditor');
+    navActions.setWorkbench("fileEditor");
   }, [navActions]);
 
   const selectFirstFile = useCallback(() => {
@@ -142,7 +145,7 @@ export const TourOrchestrationProvider: React.FC<{ children: React.ReactNode }>
     const firstFileCard = document.querySelector('[data-tour="file-card-checkbox"]') as HTMLElement;
     if (firstFileCard) {
       // Check if already selected (data-selected attribute)
-      const isSelected = firstFileCard.getAttribute('data-selected') === 'true';
+      const isSelected = firstFileCard.getAttribute("data-selected") === "true";
       // Only click if not already selected (to avoid toggling off)
       if (!isSelected) {
         firstFileCard.click();
@@ -160,13 +163,13 @@ export const TourOrchestrationProvider: React.FC<{ children: React.ReactNode }>
 
   const modifyCropSettings = useCallback(() => {
     // Dispatch a custom event to modify crop settings
-    const event = new CustomEvent('tour:setCropArea', {
+    const event = new CustomEvent("tour:setCropArea", {
       detail: {
         x: 80,
         y: 435,
         width: 440,
         height: 170,
-      }
+      },
     });
     window.dispatchEvent(event);
   }, []);
@@ -194,17 +197,13 @@ export const TourOrchestrationProvider: React.FC<{ children: React.ReactNode }>
     executeTool,
   };
 
-  return (
-    <TourOrchestrationContext.Provider value={value}>
-      {children}
-    </TourOrchestrationContext.Provider>
-  );
+  return <TourOrchestrationContext.Provider value={value}>{children}</TourOrchestrationContext.Provider>;
 };
 
 export const useTourOrchestration = (): TourOrchestrationContextType => {
   const context = useContext(TourOrchestrationContext);
   if (!context) {
-    throw new Error('useTourOrchestration must be used within TourOrchestrationProvider');
+    throw new Error("useTourOrchestration must be used within TourOrchestrationProvider");
   }
   return context;
 };
diff --git a/frontend/src/core/contexts/UnsavedChangesContext.tsx b/frontend/src/core/contexts/UnsavedChangesContext.tsx
index 057239400a..c4a66959ca 100644
--- a/frontend/src/core/contexts/UnsavedChangesContext.tsx
+++ b/frontend/src/core/contexts/UnsavedChangesContext.tsx
@@ -1,6 +1,6 @@
-import React, { createContext, useContext, useState, useCallback, ReactNode } from 'react';
-import { Modal, Text, Button, Group, Stack } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
+import React, { createContext, useContext, useState, useCallback, ReactNode } from "react";
+import { Modal, Text, Button, Group, Stack } from "@mantine/core";
+import { useTranslation } from "react-i18next";
 
 interface UnsavedChangesContextType {
   isDirty: boolean;
@@ -62,21 +62,21 @@ export function UnsavedChangesProvider({ children }: UnsavedChangesProviderProps
       <Modal
         opened={modalOpen}
         onClose={handleCancel}
-        title={t('admin.settings.unsavedChanges.title', 'Unsaved Changes')}
+        title={t("admin.settings.unsavedChanges.title", "Unsaved Changes")}
         centered
         size="sm"
         zIndex={1500}
       >
         <Stack gap="md">
           <Text size="sm">
-            {t('admin.settings.unsavedChanges.message', 'You have unsaved changes. Do you want to discard them?')}
+            {t("admin.settings.unsavedChanges.message", "You have unsaved changes. Do you want to discard them?")}
           </Text>
           <Group justify="flex-end" gap="sm">
             <Button variant="default" onClick={handleCancel}>
-              {t('admin.settings.unsavedChanges.cancel', 'Keep Editing')}
+              {t("admin.settings.unsavedChanges.cancel", "Keep Editing")}
             </Button>
             <Button color="red" onClick={handleDiscard}>
-              {t('admin.settings.unsavedChanges.discard', 'Discard Changes')}
+              {t("admin.settings.unsavedChanges.discard", "Discard Changes")}
             </Button>
           </Group>
         </Stack>
@@ -88,8 +88,7 @@ export function UnsavedChangesProvider({ children }: UnsavedChangesProviderProps
 export function useUnsavedChanges(): UnsavedChangesContextType {
   const context = useContext(UnsavedChangesContext);
   if (!context) {
-    throw new Error('useUnsavedChanges must be used within an UnsavedChangesProvider');
+    throw new Error("useUnsavedChanges must be used within an UnsavedChangesProvider");
   }
   return context;
 }
-
diff --git a/frontend/src/core/contexts/ViewerContext.tsx b/frontend/src/core/contexts/ViewerContext.tsx
index 8730c23f1c..d483e205ff 100644
--- a/frontend/src/core/contexts/ViewerContext.tsx
+++ b/frontend/src/core/contexts/ViewerContext.tsx
@@ -1,13 +1,6 @@
-import React, {
-  createContext,
-  useContext,
-  useState,
-  ReactNode,
-  useRef,
-  useCallback,
-} from 'react';
-import { useNavigation } from '@app/contexts/NavigationContext';
-import { preferencesService, type PdfRenderMode } from '@app/services/preferencesService';
+import React, { createContext, useContext, useState, ReactNode, useRef, useCallback } from "react";
+import { useNavigation } from "@app/contexts/NavigationContext";
+import { preferencesService, type PdfRenderMode } from "@app/services/preferencesService";
 import {
   createViewerActions,
   ScrollActions,
@@ -21,7 +14,7 @@ import {
   BookmarkActions,
   AttachmentActions,
   PrintActions,
-} from '@app/contexts/viewer/viewerActions';
+} from "@app/contexts/viewer/viewerActions";
 import {
   BridgeRef,
   BridgeApiMap,
@@ -43,8 +36,8 @@ import {
   AttachmentState,
   DocumentPermissionsState,
   PdfPermissionFlag,
-} from '@app/contexts/viewer/viewerBridges';
-import { SpreadMode } from '@embedpdf/plugin-spread/react';
+} from "@app/contexts/viewer/viewerBridges";
+import { SpreadMode } from "@embedpdf/plugin-spread/react";
 
 function useImmediateNotifier<Args extends unknown[]>() {
   const callbacksRef = useRef(new Set<(...args: Args) => void>());
@@ -57,11 +50,11 @@ function useImmediateNotifier<Args extends unknown[]>() {
   }, []);
 
   const trigger = useCallback((...args: Args) => {
-    callbacksRef.current.forEach(cb => {
+    callbacksRef.current.forEach((cb) => {
       try {
         cb(...args);
       } catch (error) {
-        console.error('Immediate callback error:', error);
+        console.error("Immediate callback error:", error);
       }
     });
   }, []);
@@ -99,7 +92,7 @@ export interface ViewerContextType {
     documentId: string;
     pageIndex: number;
     annotationId: string;
-    action: 'focus' | 'highlight';
+    action: "focus" | "highlight";
   } | null;
   requestCommentFocus: (documentId: string, pageIndex: number, annotationId: string, hasContent: boolean) => void;
   clearHighlightCommentRequest: () => void;
@@ -169,10 +162,7 @@ export interface ViewerContextType {
   printActions: PrintActions;
 
   // Bridge registration - internal use by bridges
-  registerBridge: <K extends BridgeKey>(
-    type: K,
-    ref: BridgeRef<BridgeStateMap[K], BridgeApiMap[K]> | null
-  ) => void;
+  registerBridge: <K extends BridgeKey>(type: K, ref: BridgeRef<BridgeStateMap[K], BridgeApiMap[K]> | null) => void;
 
   // Save changes function - registered by EmbedPdfViewer
   applyChanges: (() => Promise<void>) | null;
@@ -201,15 +191,15 @@ export const ViewerProvider: React.FC<ViewerProviderProps> = ({ children }) => {
     documentId: string;
     pageIndex: number;
     annotationId: string;
-    action: 'focus' | 'highlight';
+    action: "focus" | "highlight";
   } | null>(null);
   const [isSearchInterfaceVisible, setSearchInterfaceVisible] = useState(false);
   const [isAnnotationsVisible, setIsAnnotationsVisible] = useState(true);
   const [isAnnotationMode, setIsAnnotationModeState] = useState(false);
   const [activeFileId, setActiveFileId] = useState<string | null>(null);
   const [activeFileIndex, setActiveFileIndex] = useState(0);
-  const [pdfRenderMode, setPdfRenderModeState] = useState<PdfRenderMode>(
-    () => preferencesService.getPreference('pdfRenderMode')
+  const [pdfRenderMode, setPdfRenderModeState] = useState<PdfRenderMode>(() =>
+    preferencesService.getPreference("pdfRenderMode"),
   );
 
   // Get current navigation state to check if we're in sign mode
@@ -231,75 +221,62 @@ export const ViewerProvider: React.FC<ViewerProviderProps> = ({ children }) => {
     }
   }, []);
 
-  const {
-    register: registerImmediateZoomUpdate,
-    trigger: triggerImmediateZoomInternal,
-  } = useImmediateNotifier<[number]>();
-  const {
-    register: registerImmediateScrollUpdate,
-    trigger: triggerImmediateScrollInternal,
-  } = useImmediateNotifier<[number, number]>();
-  const {
-    register: registerImmediateSpreadUpdate,
-    trigger: triggerImmediateSpreadInternal,
-  } = useImmediateNotifier<[SpreadMode, boolean]>();
-  const {
-    register: registerImmediatePanUpdate,
-    trigger: triggerImmediatePanInternal,
-  } = useImmediateNotifier<[boolean]>();
+  const { register: registerImmediateZoomUpdate, trigger: triggerImmediateZoomInternal } = useImmediateNotifier<[number]>();
+  const { register: registerImmediateScrollUpdate, trigger: triggerImmediateScrollInternal } =
+    useImmediateNotifier<[number, number]>();
+  const { register: registerImmediateSpreadUpdate, trigger: triggerImmediateSpreadInternal } =
+    useImmediateNotifier<[SpreadMode, boolean]>();
+  const { register: registerImmediatePanUpdate, trigger: triggerImmediatePanInternal } = useImmediateNotifier<[boolean]>();
 
   const triggerImmediateZoomUpdate = useCallback(
     (percent: number) => {
       triggerImmediateZoomInternal(percent);
     },
-    [triggerImmediateZoomInternal]
+    [triggerImmediateZoomInternal],
   );
 
   const triggerImmediateScrollUpdate = useCallback(
     (currentPage: number, totalPages: number) => {
       triggerImmediateScrollInternal(currentPage, totalPages);
     },
-    [triggerImmediateScrollInternal]
+    [triggerImmediateScrollInternal],
   );
 
   const triggerImmediateSpreadUpdate = useCallback(
     (mode: SpreadMode, isDualPage: boolean = mode !== SpreadMode.None) => {
       triggerImmediateSpreadInternal(mode, isDualPage);
     },
-    [triggerImmediateSpreadInternal]
+    [triggerImmediateSpreadInternal],
   );
 
   const triggerImmediatePanUpdate = useCallback(
     (isPanning: boolean) => {
       triggerImmediatePanInternal(isPanning);
     },
-    [triggerImmediatePanInternal]
+    [triggerImmediatePanInternal],
   );
 
   const registerBridge = useCallback(
-    <K extends BridgeKey>(
-      type: K,
-      ref: BridgeRef<BridgeStateMap[K], BridgeApiMap[K]> | null
-    ) => {
+    <K extends BridgeKey>(type: K, ref: BridgeRef<BridgeStateMap[K], BridgeApiMap[K]> | null) => {
       setBridgeRef(bridgeRefs.current, type, ref);
     },
-    []
+    [],
   );
 
   const toggleThumbnailSidebar = () => {
-    setIsThumbnailSidebarVisible(prev => !prev);
+    setIsThumbnailSidebarVisible((prev) => !prev);
   };
 
   const toggleBookmarkSidebar = () => {
-    setIsBookmarkSidebarVisible(prev => !prev);
+    setIsBookmarkSidebarVisible((prev) => !prev);
   };
 
   const toggleAttachmentSidebar = () => {
-    setIsAttachmentSidebarVisible(prev => !prev);
+    setIsAttachmentSidebarVisible((prev) => !prev);
   };
 
   const toggleLayerSidebar = () => {
-    setIsLayerSidebarVisible(prev => !prev);
+    setIsLayerSidebarVisible((prev) => !prev);
   };
 
   const setCommentsSidebarVisible = (visible: boolean) => {
@@ -307,7 +284,7 @@ export const ViewerProvider: React.FC<ViewerProviderProps> = ({ children }) => {
   };
 
   const toggleCommentsSidebar = () => {
-    setIsCommentsSidebarVisible(prev => !prev);
+    setIsCommentsSidebarVisible((prev) => !prev);
   };
 
   const requestCommentFocus = useCallback(
@@ -317,10 +294,10 @@ export const ViewerProvider: React.FC<ViewerProviderProps> = ({ children }) => {
         documentId,
         pageIndex,
         annotationId,
-        action: hasContent ? 'highlight' : 'focus',
+        action: hasContent ? "highlight" : "focus",
       });
     },
-    []
+    [],
   );
 
   const clearHighlightCommentRequest = useCallback(() => {
@@ -330,11 +307,11 @@ export const ViewerProvider: React.FC<ViewerProviderProps> = ({ children }) => {
   const searchInterfaceActions = {
     open: () => setSearchInterfaceVisible(true),
     close: () => setSearchInterfaceVisible(false),
-    toggle: () => setSearchInterfaceVisible(prev => !prev),
+    toggle: () => setSearchInterfaceVisible((prev) => !prev),
   };
 
   const toggleAnnotationsVisibility = () => {
-    setIsAnnotationsVisible(prev => !prev);
+    setIsAnnotationsVisible((prev) => !prev);
   };
 
   const setAnnotationMode = (enabled: boolean) => {
@@ -342,10 +319,9 @@ export const ViewerProvider: React.FC<ViewerProviderProps> = ({ children }) => {
   };
 
   const cyclePdfRenderMode = useCallback(() => {
-    setPdfRenderModeState(prev => {
-      const next: PdfRenderMode =
-        prev === 'normal' ? 'dark' : prev === 'dark' ? 'sepia' : 'normal';
-      preferencesService.setPreference('pdfRenderMode', next);
+    setPdfRenderModeState((prev) => {
+      const next: PdfRenderMode = prev === "normal" ? "dark" : prev === "dark" ? "sepia" : "normal";
+      preferencesService.setPreference("pdfRenderMode", next);
       return next;
     });
   }, []);
@@ -412,19 +388,21 @@ export const ViewerProvider: React.FC<ViewerProviderProps> = ({ children }) => {
   const hasAttachmentSupport = () => Boolean(bridgeRefs.current.attachment);
 
   const getDocumentPermissions = (): DocumentPermissionsState => {
-    return bridgeRefs.current.permissions?.state || {
-      isEncrypted: false,
-      isOwnerUnlocked: false,
-      permissions: PdfPermissionFlag.AllowAll,
-      canPrint: true,
-      canModifyContents: true,
-      canCopyContents: true,
-      canModifyAnnotations: true,
-      canFillForms: true,
-      canExtractForAccessibility: true,
-      canAssembleDocument: true,
-      canPrintHighQuality: true,
-    };
+    return (
+      bridgeRefs.current.permissions?.state || {
+        isEncrypted: false,
+        isOwnerUnlocked: false,
+        permissions: PdfPermissionFlag.AllowAll,
+        canPrint: true,
+        canModifyContents: true,
+        canCopyContents: true,
+        canModifyAnnotations: true,
+        canFillForms: true,
+        canExtractForAccessibility: true,
+        canAssembleDocument: true,
+        canPrintHighQuality: true,
+      }
+    );
   };
 
   const hasPermission = (flag: PdfPermissionFlag): boolean => {
@@ -433,8 +411,8 @@ export const ViewerProvider: React.FC<ViewerProviderProps> = ({ children }) => {
       return api.hasPermission(flag);
     }
     // Default: allow all permissions - warn in development
-    if (process.env.NODE_ENV === 'development') {
-      console.warn('[ViewerContext] Permissions API not available, defaulting to allow');
+    if (process.env.NODE_ENV === "development") {
+      console.warn("[ViewerContext] Permissions API not available, defaulting to allow");
     }
     return true;
   };
@@ -546,17 +524,13 @@ export const ViewerProvider: React.FC<ViewerProviderProps> = ({ children }) => {
     cyclePdfRenderMode,
   };
 
-  return (
-    <ViewerContext.Provider value={value}>
-      {children}
-    </ViewerContext.Provider>
-  );
+  return <ViewerContext.Provider value={value}>{children}</ViewerContext.Provider>;
 };
 
 export const useViewer = (): ViewerContextType => {
   const context = useContext(ViewerContext);
   if (!context) {
-    throw new Error('useViewer must be used within a ViewerProvider');
+    throw new Error("useViewer must be used within a ViewerProvider");
   }
   return context;
 };
diff --git a/frontend/src/core/contexts/file/FileReducer.ts b/frontend/src/core/contexts/file/FileReducer.ts
index db567b1288..7fd0838f65 100644
--- a/frontend/src/core/contexts/file/FileReducer.ts
+++ b/frontend/src/core/contexts/file/FileReducer.ts
@@ -2,18 +2,14 @@
  * FileContext reducer - Pure state management for file operations
  */
 
-import { FileId } from '@app/types/file';
-import {
-  FileContextState,
-  FileContextAction,
-  StirlingFileStub
-} from '@app/types/fileContext';
+import { FileId } from "@app/types/file";
+import { FileContextState, FileContextAction, StirlingFileStub } from "@app/types/fileContext";
 
 // Initial state
 export const initialFileContextState: FileContextState = {
   files: {
     ids: [],
-    byId: {}
+    byId: {},
   },
   pinnedFiles: new Set(),
   ui: {
@@ -22,29 +18,25 @@ export const initialFileContextState: FileContextState = {
     isProcessing: false,
     processingProgress: 0,
     hasUnsavedChanges: false,
-    errorFileIds: []
-  }
+    errorFileIds: [],
+  },
 };
 
 // Helper function for consume/undo operations
-function processFileSwap(
-  state: FileContextState,
-  filesToRemove: FileId[],
-  filesToAdd: StirlingFileStub[]
-): FileContextState {
+function processFileSwap(state: FileContextState, filesToRemove: FileId[], filesToAdd: StirlingFileStub[]): FileContextState {
   // Only remove unpinned files
-  const unpinnedRemoveIds = filesToRemove.filter(id => !state.pinnedFiles.has(id));
-  const remainingIds = state.files.ids.filter(id => !unpinnedRemoveIds.includes(id));
+  const unpinnedRemoveIds = filesToRemove.filter((id) => !state.pinnedFiles.has(id));
+  const remainingIds = state.files.ids.filter((id) => !unpinnedRemoveIds.includes(id));
 
   // Remove unpinned files from state
   const newById = { ...state.files.byId };
-  unpinnedRemoveIds.forEach(id => {
+  unpinnedRemoveIds.forEach((id) => {
     delete newById[id];
   });
 
   // Add new files
   const addedIds: FileId[] = [];
-  filesToAdd.forEach(record => {
+  filesToAdd.forEach((record) => {
     if (!newById[record.id]) {
       addedIds.push(record.id);
       newById[record.id] = record;
@@ -52,31 +44,31 @@ function processFileSwap(
   });
 
   // Clear selections that reference removed files and add new files to selection
-  const validSelectedFileIds = state.ui.selectedFileIds.filter(id => !unpinnedRemoveIds.includes(id));
+  const validSelectedFileIds = state.ui.selectedFileIds.filter((id) => !unpinnedRemoveIds.includes(id));
   const newSelectedFileIds = [...validSelectedFileIds, ...addedIds];
 
   return {
     ...state,
     files: {
       ids: [...addedIds, ...remainingIds],
-      byId: newById
+      byId: newById,
     },
     ui: {
       ...state.ui,
-      selectedFileIds: newSelectedFileIds
-    }
+      selectedFileIds: newSelectedFileIds,
+    },
   };
 }
 
 // Pure reducer function
 export function fileContextReducer(state: FileContextState, action: FileContextAction): FileContextState {
   switch (action.type) {
-    case 'ADD_FILES': {
+    case "ADD_FILES": {
       const { stirlingFileStubs } = action.payload;
       const newIds: FileId[] = [];
       const newById: Record<FileId, StirlingFileStub> = { ...state.files.byId };
 
-      stirlingFileStubs.forEach(record => {
+      stirlingFileStubs.forEach((record) => {
         // Only add if not already present (dedupe by stable ID)
         if (!newById[record.id]) {
           newIds.push(record.id);
@@ -88,38 +80,38 @@ export function fileContextReducer(state: FileContextState, action: FileContextA
         ...state,
         files: {
           ids: [...state.files.ids, ...newIds],
-          byId: newById
-        }
+          byId: newById,
+        },
       };
     }
 
-    case 'REMOVE_FILES': {
+    case "REMOVE_FILES": {
       const { fileIds } = action.payload;
-      const remainingIds = state.files.ids.filter(id => !fileIds.includes(id));
+      const remainingIds = state.files.ids.filter((id) => !fileIds.includes(id));
       const newById = { ...state.files.byId };
 
       // Remove files from state (resource cleanup handled by lifecycle manager)
-      fileIds.forEach(id => {
+      fileIds.forEach((id) => {
         delete newById[id];
       });
 
       // Clear selections that reference removed files
-      const validSelectedFileIds = state.ui.selectedFileIds.filter(id => !fileIds.includes(id));
+      const validSelectedFileIds = state.ui.selectedFileIds.filter((id) => !fileIds.includes(id));
 
       return {
         ...state,
         files: {
           ids: remainingIds,
-          byId: newById
+          byId: newById,
         },
         ui: {
           ...state.ui,
-          selectedFileIds: validSelectedFileIds
-        }
+          selectedFileIds: validSelectedFileIds,
+        },
       };
     }
 
-    case 'UPDATE_FILE_RECORD': {
+    case "UPDATE_FILE_RECORD": {
       const { id, updates } = action.payload;
       const existingRecord = state.files.byId[id];
 
@@ -129,7 +121,7 @@ export function fileContextReducer(state: FileContextState, action: FileContextA
 
       const updatedRecord = {
         ...existingRecord,
-        ...updates
+        ...updates,
       };
 
       return {
@@ -138,149 +130,148 @@ export function fileContextReducer(state: FileContextState, action: FileContextA
           ...state.files,
           byId: {
             ...state.files.byId,
-            [id]: updatedRecord
-          }
-        }
+            [id]: updatedRecord,
+          },
+        },
       };
     }
 
-    case 'REORDER_FILES': {
+    case "REORDER_FILES": {
       const { orderedFileIds } = action.payload;
 
       // Validate that all IDs exist in current state
-      const validIds = orderedFileIds.filter(id => state.files.byId[id]);
+      const validIds = orderedFileIds.filter((id) => state.files.byId[id]);
 
       // Reorder selected files by passed order
-      const selectedFileIds = orderedFileIds.filter(id => state.ui.selectedFileIds.includes(id));
+      const selectedFileIds = orderedFileIds.filter((id) => state.ui.selectedFileIds.includes(id));
 
       return {
         ...state,
         files: {
           ...state.files,
-          ids: validIds
+          ids: validIds,
         },
         ui: {
           ...state.ui,
           selectedFileIds,
-        }
+        },
       };
     }
 
-    case 'SET_SELECTED_FILES': {
+    case "SET_SELECTED_FILES": {
       const { fileIds } = action.payload;
       return {
         ...state,
         ui: {
           ...state.ui,
-          selectedFileIds: fileIds
-        }
+          selectedFileIds: fileIds,
+        },
       };
     }
 
-    case 'SET_SELECTED_PAGES': {
+    case "SET_SELECTED_PAGES": {
       const { pageNumbers } = action.payload;
       return {
         ...state,
         ui: {
           ...state.ui,
-          selectedPageNumbers: pageNumbers
-        }
+          selectedPageNumbers: pageNumbers,
+        },
       };
     }
 
-    case 'CLEAR_SELECTIONS': {
+    case "CLEAR_SELECTIONS": {
       return {
         ...state,
         ui: {
           ...state.ui,
           selectedFileIds: [],
-          selectedPageNumbers: []
-        }
+          selectedPageNumbers: [],
+        },
       };
     }
 
-    case 'SET_PROCESSING': {
+    case "SET_PROCESSING": {
       const { isProcessing, progress } = action.payload;
       return {
         ...state,
         ui: {
           ...state.ui,
           isProcessing,
-          processingProgress: progress
-        }
+          processingProgress: progress,
+        },
       };
     }
 
-    case 'SET_UNSAVED_CHANGES': {
+    case "SET_UNSAVED_CHANGES": {
       return {
         ...state,
         ui: {
           ...state.ui,
-          hasUnsavedChanges: action.payload.hasChanges
-        }
+          hasUnsavedChanges: action.payload.hasChanges,
+        },
       };
     }
 
-    case 'MARK_FILE_ERROR': {
+    case "MARK_FILE_ERROR": {
       const { fileId } = action.payload;
       if (state.ui.errorFileIds.includes(fileId)) return state;
       return {
         ...state,
-        ui: { ...state.ui, errorFileIds: [...state.ui.errorFileIds, fileId] }
+        ui: { ...state.ui, errorFileIds: [...state.ui.errorFileIds, fileId] },
       };
     }
 
-    case 'CLEAR_FILE_ERROR': {
+    case "CLEAR_FILE_ERROR": {
       const { fileId } = action.payload;
       return {
         ...state,
-        ui: { ...state.ui, errorFileIds: state.ui.errorFileIds.filter(id => id !== fileId) }
+        ui: { ...state.ui, errorFileIds: state.ui.errorFileIds.filter((id) => id !== fileId) },
       };
     }
 
-    case 'CLEAR_ALL_FILE_ERRORS': {
+    case "CLEAR_ALL_FILE_ERRORS": {
       return {
         ...state,
-        ui: { ...state.ui, errorFileIds: [] }
+        ui: { ...state.ui, errorFileIds: [] },
       };
     }
 
-    case 'PIN_FILE': {
+    case "PIN_FILE": {
       const { fileId } = action.payload;
       const newPinnedFiles = new Set(state.pinnedFiles);
       newPinnedFiles.add(fileId);
 
       return {
         ...state,
-        pinnedFiles: newPinnedFiles
+        pinnedFiles: newPinnedFiles,
       };
     }
 
-    case 'UNPIN_FILE': {
+    case "UNPIN_FILE": {
       const { fileId } = action.payload;
       const newPinnedFiles = new Set(state.pinnedFiles);
       newPinnedFiles.delete(fileId);
 
       return {
         ...state,
-        pinnedFiles: newPinnedFiles
+        pinnedFiles: newPinnedFiles,
       };
     }
 
-    case 'CONSUME_FILES': {
+    case "CONSUME_FILES": {
       const { inputFileIds, outputStirlingFileStubs } = action.payload;
 
       return processFileSwap(state, inputFileIds, outputStirlingFileStubs);
     }
 
-
-    case 'UNDO_CONSUME_FILES': {
+    case "UNDO_CONSUME_FILES": {
       const { inputStirlingFileStubs, outputFileIds } = action.payload;
 
       return processFileSwap(state, outputFileIds, inputStirlingFileStubs);
     }
 
-    case 'RESET_CONTEXT': {
+    case "RESET_CONTEXT": {
       // Reset UI state to clean slate (resource cleanup handled by lifecycle manager)
       return { ...initialFileContextState };
     }
diff --git a/frontend/src/core/contexts/file/contexts.ts b/frontend/src/core/contexts/file/contexts.ts
index c37da46bbc..a10208dfd7 100644
--- a/frontend/src/core/contexts/file/contexts.ts
+++ b/frontend/src/core/contexts/file/contexts.ts
@@ -2,12 +2,12 @@
  * React contexts for file state and actions
  */
 
-import { createContext } from 'react';
-import { FileContextStateValue, FileContextActionsValue } from '@app/types/fileContext';
+import { createContext } from "react";
+import { FileContextStateValue, FileContextActionsValue } from "@app/types/fileContext";
 
 // Split contexts for performance
 export const FileStateContext = createContext<FileContextStateValue | undefined>(undefined);
 export const FileActionsContext = createContext<FileContextActionsValue | undefined>(undefined);
 
 // Export types for use in hooks
-export type { FileContextStateValue, FileContextActionsValue };
\ No newline at end of file
+export type { FileContextStateValue, FileContextActionsValue };
diff --git a/frontend/src/core/contexts/file/fileActions.ts b/frontend/src/core/contexts/file/fileActions.ts
index 771247ef11..17caafbb38 100644
--- a/frontend/src/core/contexts/file/fileActions.ts
+++ b/frontend/src/core/contexts/file/fileActions.ts
@@ -11,15 +11,15 @@ import {
   createQuickKey,
   createStirlingFile,
   ProcessedFileMetadata,
-} from '@app/types/fileContext';
-import { FileId, ToolOperation } from '@app/types/file';
-import { generateThumbnailWithMetadata } from '@app/utils/thumbnailUtils';
-import { FileLifecycleManager } from '@app/contexts/file/lifecycle';
-import { buildQuickKeySet } from '@app/contexts/file/fileSelectors';
-import { StirlingFile } from '@app/types/fileContext';
-import { fileStorage } from '@app/services/fileStorage';
-import { zipFileService } from '@app/services/zipFileService';
-const DEBUG = process.env.NODE_ENV === 'development';
+} from "@app/types/fileContext";
+import { FileId, ToolOperation } from "@app/types/file";
+import { generateThumbnailWithMetadata } from "@app/utils/thumbnailUtils";
+import { FileLifecycleManager } from "@app/contexts/file/lifecycle";
+import { buildQuickKeySet } from "@app/contexts/file/fileSelectors";
+import { StirlingFile } from "@app/types/fileContext";
+import { fileStorage } from "@app/services/fileStorage";
+import { zipFileService } from "@app/services/zipFileService";
+const DEBUG = process.env.NODE_ENV === "development";
 const HYDRATION_CONCURRENCY = 2;
 let activeHydrations = 0;
 const hydrationQueue: Array<() => Promise<void>> = [];
@@ -40,7 +40,7 @@ const drainHydrationQueue = (): void => {
   activeHydrations++;
   nextTask()
     .catch((error) => {
-      console.error('[Hydration] Task failed with error:', error);
+      console.error("[Hydration] Task failed with error:", error);
     })
     .finally(() => {
       activeHydrations--;
@@ -89,7 +89,7 @@ export function createProcessedFile(
   pageCount: number,
   thumbnail?: string,
   pageRotations?: number[],
-  pageDimensions?: Array<{ width: number; height: number }>
+  pageDimensions?: Array<{ width: number; height: number }>,
 ): ProcessedFileMetadata {
   return {
     totalPages: pageCount,
@@ -99,10 +99,10 @@ export function createProcessedFile(
       rotation: pageRotations?.[index] ?? 0,
       splitBefore: false,
       width: pageDimensions?.[index]?.width,
-      height: pageDimensions?.[index]?.height
+      height: pageDimensions?.[index]?.height,
     })),
     thumbnailUrl: thumbnail,
-    lastProcessed: Date.now()
+    lastProcessed: Date.now(),
   };
 }
 
@@ -112,7 +112,7 @@ export function createProcessedFile(
  */
 export async function generateProcessedFileMetadata(file: File): Promise<ProcessedFileMetadata | undefined> {
   // Only generate metadata for PDF files
-  if (!file.type.startsWith('application/pdf')) {
+  if (!file.type.startsWith("application/pdf")) {
     return undefined;
   }
 
@@ -127,7 +127,7 @@ export async function generateProcessedFileMetadata(file: File): Promise<Process
       unrotatedResult.pageCount,
       unrotatedResult.thumbnail, // Page thumbnails (unrotated)
       unrotatedResult.pageRotations,
-      unrotatedResult.pageDimensions
+      unrotatedResult.pageDimensions,
     );
 
     // Use rotated thumbnail for file manager
@@ -161,7 +161,7 @@ export function createChildStub(
   operation: ToolOperation,
   resultingFile: File,
   thumbnail?: string,
-  processedFileMetadata?: ProcessedFileMetadata
+  processedFileMetadata?: ProcessedFileMetadata,
 ): StirlingFileStub {
   const newFileId = createFileId();
 
@@ -200,17 +200,17 @@ export function createChildStub(
     processedFile: processedFileMetadata,
 
     // Mark as dirty if parent has a localFilePath (modified file not yet saved to disk)
-    isDirty: parentStub.localFilePath ? true : undefined
+    isDirty: parentStub.localFilePath ? true : undefined,
   };
 
   if (DEBUG) {
-    console.log('[createChildStub] Created child:', {
+    console.log("[createChildStub] Created child:", {
       childId: newFileId,
       parentId: parentStub.id,
       parentLocalFilePath: parentStub.localFilePath,
       childLocalFilePath: childStub.localFilePath,
       childIsDirty: childStub.isDirty,
-      versionNumber: newVersionNumber
+      versionNumber: newVersionNumber,
     });
   }
 
@@ -246,7 +246,7 @@ export async function addFiles(
   filesRef: React.MutableRefObject<Map<FileId, File>>,
   dispatch: React.Dispatch<FileContextAction>,
   lifecycleManager: FileLifecycleManager,
-  enablePersistence: boolean = false
+  enablePersistence: boolean = false,
 ): Promise<StirlingFile[]> {
   // Acquire mutex to prevent race conditions
   await addFilesMutex.lock();
@@ -256,181 +256,183 @@ export async function addFiles(
     const stirlingFiles: StirlingFile[] = [];
     // Hydration tasks are scheduled per-file to update thumbnails/metadata without blocking add flow
 
-  // Build quickKey lookup from existing files for deduplication
-  const existingQuickKeys = buildQuickKeySet(stateRef.current.files.byId);
+    // Build quickKey lookup from existing files for deduplication
+    const existingQuickKeys = buildQuickKeySet(stateRef.current.files.byId);
 
-  const { files = [], allowDuplicates = false } = options;
+    const { files = [], allowDuplicates = false } = options;
 
-  // ZIP pre-processing: Extract ZIP files with configurable behavior
-  // - File uploads: skipAutoUnzip=true → always extract (except HTML)
-  // - Tool outputs: skipAutoUnzip=false → respect user preferences
-  const filesToProcess: File[] = [];
-  const autoUnzip = options.autoUnzip ?? true; // Default to true
-  const autoUnzipFileLimit = options.autoUnzipFileLimit ?? 4; // Default limit
-  const skipAutoUnzip = options.skipAutoUnzip ?? false;
-  const confirmLargeExtraction = options.confirmLargeExtraction;
+    // ZIP pre-processing: Extract ZIP files with configurable behavior
+    // - File uploads: skipAutoUnzip=true → always extract (except HTML)
+    // - Tool outputs: skipAutoUnzip=false → respect user preferences
+    const filesToProcess: File[] = [];
+    const autoUnzip = options.autoUnzip ?? true; // Default to true
+    const autoUnzipFileLimit = options.autoUnzipFileLimit ?? 4; // Default limit
+    const skipAutoUnzip = options.skipAutoUnzip ?? false;
+    const confirmLargeExtraction = options.confirmLargeExtraction;
 
-  for (const file of files) {
-    // Check if file is a ZIP
-    if (zipFileService.isZipFile(file)) {
-      try {
-        if (DEBUG) console.log(`📄 addFiles: Detected ZIP file: ${file.name}`);
+    for (const file of files) {
+      // Check if file is a ZIP
+      if (zipFileService.isZipFile(file)) {
+        try {
+          if (DEBUG) console.log(`📄 addFiles: Detected ZIP file: ${file.name}`);
 
-        // Check if ZIP contains HTML files - if so, keep as ZIP
-        const containsHtml = await zipFileService.containsHtmlFiles(file);
-        if (containsHtml) {
-          if (DEBUG) console.log(`📄 addFiles: ZIP contains HTML, keeping as ZIP: ${file.name}`);
+          // Check if ZIP contains HTML files - if so, keep as ZIP
+          const containsHtml = await zipFileService.containsHtmlFiles(file);
+          if (containsHtml) {
+            if (DEBUG) console.log(`📄 addFiles: ZIP contains HTML, keeping as ZIP: ${file.name}`);
+            filesToProcess.push(file);
+            continue;
+          }
+
+          // Apply extraction with preferences
+          const extractedFiles = await zipFileService.extractWithPreferences(file, {
+            autoUnzip,
+            autoUnzipFileLimit,
+            skipAutoUnzip,
+            confirmLargeExtraction,
+          });
+
+          if (extractedFiles.length === 1 && extractedFiles[0] === file) {
+            // ZIP was not extracted (over limit or autoUnzip disabled)
+            if (DEBUG) console.log(`📄 addFiles: ZIP not extracted (preferences): ${file.name}`);
+          } else {
+            // ZIP was extracted
+            if (DEBUG) console.log(`📄 addFiles: Extracted ${extractedFiles.length} files from ZIP: ${file.name}`);
+          }
+
+          filesToProcess.push(...extractedFiles);
+        } catch (error) {
+          console.error(`📄 addFiles: Failed to process ZIP file ${file.name}:`, error);
+          // On error, keep the ZIP file as-is
           filesToProcess.push(file);
-          continue;
         }
-
-        // Apply extraction with preferences
-        const extractedFiles = await zipFileService.extractWithPreferences(file, {
-          autoUnzip,
-          autoUnzipFileLimit,
-          skipAutoUnzip,
-          confirmLargeExtraction
-        });
-
-        if (extractedFiles.length === 1 && extractedFiles[0] === file) {
-          // ZIP was not extracted (over limit or autoUnzip disabled)
-          if (DEBUG) console.log(`📄 addFiles: ZIP not extracted (preferences): ${file.name}`);
-        } else {
-          // ZIP was extracted
-          if (DEBUG) console.log(`📄 addFiles: Extracted ${extractedFiles.length} files from ZIP: ${file.name}`);
-        }
-
-        filesToProcess.push(...extractedFiles);
-      } catch (error) {
-        console.error(`📄 addFiles: Failed to process ZIP file ${file.name}:`, error);
-        // On error, keep the ZIP file as-is
+      } else {
+        // Not a ZIP file, add as-is
         filesToProcess.push(file);
       }
-    } else {
-      // Not a ZIP file, add as-is
-      filesToProcess.push(file);
-    }
-  }
-
-  if (DEBUG) console.log(`📄 addFiles: After ZIP processing, ${filesToProcess.length} files to add`);
-
-  for (const file of filesToProcess) {
-    const quickKey = createQuickKey(file);
-
-    // Soft deduplication: Check if file already exists by metadata
-    if (!allowDuplicates && existingQuickKeys.has(quickKey)) {
-      continue;
     }
 
-    const fileId = createFileId();
-    filesRef.current.set(fileId, file);
+    if (DEBUG) console.log(`📄 addFiles: After ZIP processing, ${filesToProcess.length} files to add`);
 
-    // Create new filestub with minimal metadata; hydrate thumbnails/processedFile asynchronously
-    const fileStub = createNewStirlingFileStub(file, fileId);
+    for (const file of filesToProcess) {
+      const quickKey = createQuickKey(file);
 
-    // Check for pending file path mapping from Tauri file dialog (desktop only)
-    try {
-      const { pendingFilePathMappings } = await import('@app/services/pendingFilePathMappings');
-      console.log(`[FileActions] Checking for localFilePath mapping for quickKey: ${quickKey}`);
-      console.log(`[FileActions] Available mappings:`, Array.from(pendingFilePathMappings.keys()));
-      const localFilePath = pendingFilePathMappings.get(quickKey);
-      if (localFilePath) {
-        console.log(`[FileActions] ✓ Found localFilePath: ${localFilePath}`);
-        fileStub.localFilePath = localFilePath;
-        pendingFilePathMappings.delete(quickKey); // Clean up after use
-        console.log(`[FileActions] Applied localFilePath to file: ${file.name}`);
-      } else {
-        console.log(`[FileActions] ✗ No localFilePath found for this file`);
-      }
-    } catch (error) {
-      console.log('[FileActions] Could not check for localFilePath:', error);
-      // FileManagerContext may not be available in all contexts
-    }
-
-    // Store insertion position if provided
-    if (options.insertAfterPageId !== undefined) {
-      fileStub.insertAfterPageId = options.insertAfterPageId;
-    }
-
-    if (!allowDuplicates) {
-      existingQuickKeys.add(quickKey);
-    }
-    stirlingFileStubs.push(fileStub);
-
-    // Dispatch immediately so each file appears as soon as it is processed
-    dispatch({ type: 'ADD_FILES', payload: { stirlingFileStubs: [fileStub] } });
-
-    // Create StirlingFile directly
-    const stirlingFile = createStirlingFile(file, fileId);
-    stirlingFiles.push(stirlingFile);
-
-    // Queue background hydration so add flow doesn't block on thumbnail/metadata work
-    scheduleMetadataHydration(async () => {
-      const targetFile = filesRef.current.get(fileId);
-      if (!targetFile) {
-        return;
+      // Soft deduplication: Check if file already exists by metadata
+      if (!allowDuplicates && existingQuickKeys.has(quickKey)) {
+        continue;
       }
 
-      let processedFileMetadata: ProcessedFileMetadata | undefined;
-      let thumbnail: string | undefined;
+      const fileId = createFileId();
+      filesRef.current.set(fileId, file);
 
-      if (targetFile.type.startsWith('application/pdf')) {
-        processedFileMetadata = await generateProcessedFileMetadata(targetFile);
-        thumbnail = processedFileMetadata?.thumbnailUrl;
-      } else {
-        try {
-          const { generateThumbnailForFile } = await import('@app/utils/thumbnailUtils');
-          thumbnail = await generateThumbnailForFile(targetFile);
-        } catch (error) {
-          console.warn(`[addFiles] Thumbnail generation failed for ${fileId}:`, error);
-        }
-      }
+      // Create new filestub with minimal metadata; hydrate thumbnails/processedFile asynchronously
+      const fileStub = createNewStirlingFileStub(file, fileId);
 
-      const updates: Partial<StirlingFileStub> = {};
-      const primaryThumbnail = thumbnail || processedFileMetadata?.thumbnailUrl || processedFileMetadata?.pages?.[0]?.thumbnail;
-
-      if (processedFileMetadata) {
-        updates.processedFile = processedFileMetadata;
-        updates.thumbnailUrl = primaryThumbnail;
-      } else if (thumbnail) {
-        updates.thumbnailUrl = primaryThumbnail;
-      }
-
-      if (primaryThumbnail && primaryThumbnail.startsWith('blob:')) {
-        lifecycleManager.trackBlobUrl(primaryThumbnail);
-      }
-
-      if (Object.keys(updates).length > 0) {
-        lifecycleManager.updateStirlingFileStub(fileId, updates, stateRef);
-      }
-    });
-  }
-
-  // Persist to storage if enabled using fileStorage service
-  if (enablePersistence && stirlingFiles.length > 0) {
-    await Promise.all(stirlingFiles.map(async (stirlingFile, index) => {
+      // Check for pending file path mapping from Tauri file dialog (desktop only)
       try {
-        // Get corresponding stub with all metadata
-        const fileStub = stirlingFileStubs[index];
-
-        // Store using the cleaner signature - pass StirlingFile + StirlingFileStub directly
-        await fileStorage.storeStirlingFile(stirlingFile, fileStub);
-
-        if (DEBUG) console.log(`📄 addFiles: Stored file ${stirlingFile.name} with metadata:`, fileStub);
+        const { pendingFilePathMappings } = await import("@app/services/pendingFilePathMappings");
+        console.log(`[FileActions] Checking for localFilePath mapping for quickKey: ${quickKey}`);
+        console.log(`[FileActions] Available mappings:`, Array.from(pendingFilePathMappings.keys()));
+        const localFilePath = pendingFilePathMappings.get(quickKey);
+        if (localFilePath) {
+          console.log(`[FileActions] ✓ Found localFilePath: ${localFilePath}`);
+          fileStub.localFilePath = localFilePath;
+          pendingFilePathMappings.delete(quickKey); // Clean up after use
+          console.log(`[FileActions] Applied localFilePath to file: ${file.name}`);
+        } else {
+          console.log(`[FileActions] ✗ No localFilePath found for this file`);
+        }
       } catch (error) {
-        console.error('Failed to persist file to storage:', stirlingFile.name, error);
+        console.log("[FileActions] Could not check for localFilePath:", error);
+        // FileManagerContext may not be available in all contexts
       }
-    }));
-  }
 
-  return stirlingFiles;
+      // Store insertion position if provided
+      if (options.insertAfterPageId !== undefined) {
+        fileStub.insertAfterPageId = options.insertAfterPageId;
+      }
+
+      if (!allowDuplicates) {
+        existingQuickKeys.add(quickKey);
+      }
+      stirlingFileStubs.push(fileStub);
+
+      // Dispatch immediately so each file appears as soon as it is processed
+      dispatch({ type: "ADD_FILES", payload: { stirlingFileStubs: [fileStub] } });
+
+      // Create StirlingFile directly
+      const stirlingFile = createStirlingFile(file, fileId);
+      stirlingFiles.push(stirlingFile);
+
+      // Queue background hydration so add flow doesn't block on thumbnail/metadata work
+      scheduleMetadataHydration(async () => {
+        const targetFile = filesRef.current.get(fileId);
+        if (!targetFile) {
+          return;
+        }
+
+        let processedFileMetadata: ProcessedFileMetadata | undefined;
+        let thumbnail: string | undefined;
+
+        if (targetFile.type.startsWith("application/pdf")) {
+          processedFileMetadata = await generateProcessedFileMetadata(targetFile);
+          thumbnail = processedFileMetadata?.thumbnailUrl;
+        } else {
+          try {
+            const { generateThumbnailForFile } = await import("@app/utils/thumbnailUtils");
+            thumbnail = await generateThumbnailForFile(targetFile);
+          } catch (error) {
+            console.warn(`[addFiles] Thumbnail generation failed for ${fileId}:`, error);
+          }
+        }
+
+        const updates: Partial<StirlingFileStub> = {};
+        const primaryThumbnail =
+          thumbnail || processedFileMetadata?.thumbnailUrl || processedFileMetadata?.pages?.[0]?.thumbnail;
+
+        if (processedFileMetadata) {
+          updates.processedFile = processedFileMetadata;
+          updates.thumbnailUrl = primaryThumbnail;
+        } else if (thumbnail) {
+          updates.thumbnailUrl = primaryThumbnail;
+        }
+
+        if (primaryThumbnail && primaryThumbnail.startsWith("blob:")) {
+          lifecycleManager.trackBlobUrl(primaryThumbnail);
+        }
+
+        if (Object.keys(updates).length > 0) {
+          lifecycleManager.updateStirlingFileStub(fileId, updates, stateRef);
+        }
+      });
+    }
+
+    // Persist to storage if enabled using fileStorage service
+    if (enablePersistence && stirlingFiles.length > 0) {
+      await Promise.all(
+        stirlingFiles.map(async (stirlingFile, index) => {
+          try {
+            // Get corresponding stub with all metadata
+            const fileStub = stirlingFileStubs[index];
+
+            // Store using the cleaner signature - pass StirlingFile + StirlingFileStub directly
+            await fileStorage.storeStirlingFile(stirlingFile, fileStub);
+
+            if (DEBUG) console.log(`📄 addFiles: Stored file ${stirlingFile.name} with metadata:`, fileStub);
+          } catch (error) {
+            console.error("Failed to persist file to storage:", stirlingFile.name, error);
+          }
+        }),
+      );
+    }
+
+    return stirlingFiles;
   } finally {
     // Always release mutex even if error occurs
     addFilesMutex.unlock();
   }
 }
 
-
 /**
  * Consume files helper - replace unpinned input files with output files
  * Now accepts pre-created StirlingFiles and StirlingFileStubs to preserve all metadata
@@ -440,13 +442,18 @@ export async function consumeFiles(
   outputStirlingFiles: StirlingFile[],
   outputStirlingFileStubs: StirlingFileStub[],
   filesRef: React.MutableRefObject<Map<FileId, File>>,
-  dispatch: React.Dispatch<FileContextAction>
+  dispatch: React.Dispatch<FileContextAction>,
 ): Promise<FileId[]> {
-  if (DEBUG) console.log(`📄 consumeFiles: Processing ${inputFileIds.length} input files, ${outputStirlingFiles.length} output files with pre-created stubs`);
+  if (DEBUG)
+    console.log(
+      `📄 consumeFiles: Processing ${inputFileIds.length} input files, ${outputStirlingFiles.length} output files with pre-created stubs`,
+    );
 
   // Validate that we have matching files and stubs
   if (outputStirlingFiles.length !== outputStirlingFileStubs.length) {
-    throw new Error(`Mismatch between output files (${outputStirlingFiles.length}) and stubs (${outputStirlingFileStubs.length})`);
+    throw new Error(
+      `Mismatch between output files (${outputStirlingFiles.length}) and stubs (${outputStirlingFileStubs.length})`,
+    );
   }
 
   // Store StirlingFiles in filesRef using their existing IDs (no ID generation needed)
@@ -464,7 +471,7 @@ export async function consumeFiles(
   }
 
   // Mark input files as processed in storage (no longer leaf nodes)
-  if(!outputStirlingFileStubs.reduce((areAllV1, stub) => areAllV1 && (stub.versionNumber == 1), true)) {
+  if (!outputStirlingFileStubs.reduce((areAllV1, stub) => areAllV1 && stub.versionNumber == 1, true)) {
     await Promise.all(
       inputFileIds.map(async (fileId) => {
         try {
@@ -473,7 +480,7 @@ export async function consumeFiles(
         } catch (error) {
           if (DEBUG) console.warn(`📄 Failed to mark file ${fileId} as processed:`, error);
         }
-      })
+      }),
     );
   }
 
@@ -486,30 +493,34 @@ export async function consumeFiles(
       // Use fileStorage directly with complete metadata from stub
       await fileStorage.storeStirlingFile(stirlingFile, stub);
 
-      if (DEBUG) console.log(`📄 Saved StirlingFile ${stirlingFile.name} directly to storage with complete metadata:`, {
-        fileId: stirlingFile.fileId,
-        versionNumber: stub.versionNumber,
-        originalFileId: stub.originalFileId,
-        parentFileId: stub.parentFileId,
-        toolChainLength: stub.toolHistory?.length || 0
-      });
+      if (DEBUG)
+        console.log(`📄 Saved StirlingFile ${stirlingFile.name} directly to storage with complete metadata:`, {
+          fileId: stirlingFile.fileId,
+          versionNumber: stub.versionNumber,
+          originalFileId: stub.originalFileId,
+          parentFileId: stub.parentFileId,
+          toolChainLength: stub.toolHistory?.length || 0,
+        });
     } catch (error) {
-      console.error('Failed to persist output file to fileStorage:', stirlingFile.name, error);
+      console.error("Failed to persist output file to fileStorage:", stirlingFile.name, error);
     }
   }
 
   // Dispatch the consume action with pre-created stubs (no processing needed)
   dispatch({
-    type: 'CONSUME_FILES',
+    type: "CONSUME_FILES",
     payload: {
       inputFileIds,
-      outputStirlingFileStubs: outputStirlingFileStubs
-    }
+      outputStirlingFileStubs: outputStirlingFileStubs,
+    },
   });
 
-  if (DEBUG) console.log(`📄 consumeFiles: Successfully consumed files - removed ${inputFileIds.length} inputs, added ${outputStirlingFileStubs.length} outputs`);
+  if (DEBUG)
+    console.log(
+      `📄 consumeFiles: Successfully consumed files - removed ${inputFileIds.length} inputs, added ${outputStirlingFileStubs.length} outputs`,
+    );
   // Return the output file IDs for undo tracking
-  return outputStirlingFileStubs.map(stub => stub.id);
+  return outputStirlingFileStubs.map((stub) => stub.id);
 }
 
 /**
@@ -519,10 +530,10 @@ async function restoreFilesAndCleanup(
   filesToRestore: Array<{ file: File; record: StirlingFileStub }>,
   fileIdsToRemove: FileId[],
   filesRef: React.MutableRefObject<Map<FileId, File>>,
-  indexedDB?: { deleteFile: (fileId: FileId) => Promise<void> } | null
+  indexedDB?: { deleteFile: (fileId: FileId) => Promise<void> } | null,
 ): Promise<void> {
   // Remove files from filesRef
-  fileIdsToRemove.forEach(id => {
+  fileIdsToRemove.forEach((id) => {
     if (filesRef.current.has(id)) {
       if (DEBUG) console.log(`📄 Removing file ${id} from filesRef`);
       filesRef.current.delete(id);
@@ -548,11 +559,11 @@ async function restoreFilesAndCleanup(
 
   // Clean up IndexedDB
   if (indexedDB) {
-    const indexedDBPromises = fileIdsToRemove.map(fileId =>
-      indexedDB.deleteFile(fileId).catch(error => {
-        console.error('Failed to delete file from IndexedDB:', fileId, error);
+    const indexedDBPromises = fileIdsToRemove.map((fileId) =>
+      indexedDB.deleteFile(fileId).catch((error) => {
+        console.error("Failed to delete file from IndexedDB:", fileId, error);
         throw error; // Re-throw to trigger rollback
-      })
+      }),
     );
 
     // Execute all IndexedDB operations
@@ -569,9 +580,15 @@ export async function undoConsumeFiles(
   outputFileIds: FileId[],
   filesRef: React.MutableRefObject<Map<FileId, File>>,
   dispatch: React.Dispatch<FileContextAction>,
-  indexedDB?: { saveFile: (file: File, fileId: FileId, existingThumbnail?: string) => Promise<any>; deleteFile: (fileId: FileId) => Promise<void> } | null
+  indexedDB?: {
+    saveFile: (file: File, fileId: FileId, existingThumbnail?: string) => Promise<any>;
+    deleteFile: (fileId: FileId) => Promise<void>;
+  } | null,
 ): Promise<void> {
-  if (DEBUG) console.log(`📄 undoConsumeFiles: Restoring ${inputStirlingFileStubs.length} input files, removing ${outputFileIds.length} output files`);
+  if (DEBUG)
+    console.log(
+      `📄 undoConsumeFiles: Restoring ${inputStirlingFileStubs.length} input files, removing ${outputFileIds.length} output files`,
+    );
 
   // Validate inputs
   if (inputFiles.length !== inputStirlingFileStubs.length) {
@@ -585,20 +602,15 @@ export async function undoConsumeFiles(
     // Prepare files to restore
     const filesToRestore = inputFiles.map((file, index) => ({
       file,
-      record: inputStirlingFileStubs[index]
+      record: inputStirlingFileStubs[index],
     }));
 
     // Restore input files and clean up output files
-    await restoreFilesAndCleanup(
-      filesToRestore,
-      outputFileIds,
-      filesRef,
-      indexedDB
-    );
+    await restoreFilesAndCleanup(filesToRestore, outputFileIds, filesRef, indexedDB);
 
     // Mark restored files as dirty if they have localFilePath
     // (they now differ from what's saved on disk)
-    const stubsWithDirtyMarked = inputStirlingFileStubs.map(stub => {
+    const stubsWithDirtyMarked = inputStirlingFileStubs.map((stub) => {
       if (stub.localFilePath) {
         return { ...stub, isDirty: true };
       }
@@ -607,17 +619,20 @@ export async function undoConsumeFiles(
 
     // Dispatch the undo action (only if everything else succeeded)
     dispatch({
-      type: 'UNDO_CONSUME_FILES',
+      type: "UNDO_CONSUME_FILES",
       payload: {
         inputStirlingFileStubs: stubsWithDirtyMarked,
-        outputFileIds
-      }
+        outputFileIds,
+      },
     });
 
-    if (DEBUG) console.log(`📄 undoConsumeFiles: Successfully undone consume operation - restored ${inputStirlingFileStubs.length} inputs, removed ${outputFileIds.length} outputs`);
+    if (DEBUG)
+      console.log(
+        `📄 undoConsumeFiles: Successfully undone consume operation - restored ${inputStirlingFileStubs.length} inputs, removed ${outputFileIds.length} outputs`,
+      );
   } catch (error) {
     // Rollback filesRef to previous state
-    if (DEBUG) console.error('📄 undoConsumeFiles: Error during undo, rolling back filesRef', error);
+    if (DEBUG) console.error("📄 undoConsumeFiles: Error during undo, rolling back filesRef", error);
     filesRef.current.clear();
     backupFilesRef.forEach((file, id) => {
       filesRef.current.set(id, file);
@@ -641,14 +656,14 @@ export async function addStirlingFileStubs(
   stateRef: React.MutableRefObject<FileContextState>,
   filesRef: React.MutableRefObject<Map<FileId, File>>,
   dispatch: React.Dispatch<FileContextAction>,
-  lifecycleManager: FileLifecycleManager
+  lifecycleManager: FileLifecycleManager,
 ): Promise<StirlingFile[]> {
   await addFilesMutex.lock();
 
   try {
     // Show loading indicator while preparing files from storage
     if (stirlingFileStubs.length > 0) {
-      dispatch({ type: 'SET_PROCESSING', payload: { isProcessing: true, progress: 0 } });
+      dispatch({ type: "SET_PROCESSING", payload: { isProcessing: true, progress: 0 } });
     }
 
     const existingQuickKeys = buildQuickKeySet(stateRef.current.files.byId);
@@ -658,7 +673,7 @@ export async function addStirlingFileStubs(
     // Process and dispatch files one by one for progressive UI updates
     for (const stub of stirlingFileStubs) {
       // Check for duplicates using quickKey
-      if (existingQuickKeys.has(stub.quickKey || '')) {
+      if (existingQuickKeys.has(stub.quickKey || "")) {
         if (DEBUG) console.log(`📄 Skipping duplicate StirlingFileStub: ${stub.name}`);
         continue;
       }
@@ -671,15 +686,15 @@ export async function addStirlingFileStubs(
         record.insertAfterPageId = options.insertAfterPageId;
       }
 
-      existingQuickKeys.add(stub.quickKey || '');
+      existingQuickKeys.add(stub.quickKey || "");
 
       // Dispatch each file immediately as we process it (progressive loading)
-      dispatch({ type: 'ADD_FILES', payload: { stirlingFileStubs: [record] } });
+      dispatch({ type: "ADD_FILES", payload: { stirlingFileStubs: [record] } });
 
       // Clear loading indicator after first file appears
       if (!firstFileDispatched) {
         firstFileDispatched = true;
-        dispatch({ type: 'SET_PROCESSING', payload: { isProcessing: false, progress: 0 } });
+        dispatch({ type: "SET_PROCESSING", payload: { isProcessing: false, progress: 0 } });
       }
 
       // Load File object and hydrate metadata in background (non-blocking)
@@ -696,11 +711,12 @@ export async function addStirlingFileStubs(
         filesRef.current.set(fileId, stirlingFile);
 
         // Check if processedFile data needs regeneration
-        if (stirlingFile.type.startsWith('application/pdf')) {
-          const needsProcessing = !stub.processedFile ||
-                                  !stub.processedFile.pages ||
-                                  stub.processedFile.pages.length === 0 ||
-                                  stub.processedFile.totalPages !== stub.processedFile.pages.length;
+        if (stirlingFile.type.startsWith("application/pdf")) {
+          const needsProcessing =
+            !stub.processedFile ||
+            !stub.processedFile.pages ||
+            stub.processedFile.pages.length === 0 ||
+            stub.processedFile.totalPages !== stub.processedFile.pages.length;
 
           if (needsProcessing) {
             // Regenerate metadata
@@ -708,14 +724,14 @@ export async function addStirlingFileStubs(
 
             if (processedFileMetadata) {
               const updates: Partial<StirlingFileStub> = {
-                processedFile: processedFileMetadata
+                processedFile: processedFileMetadata,
               };
 
               // Update thumbnail only if current stub doesn't have one
               const currentStub = stateRef.current.files.byId[fileId];
               if (!currentStub?.thumbnailUrl && processedFileMetadata.thumbnailUrl) {
                 updates.thumbnailUrl = processedFileMetadata.thumbnailUrl;
-                if (processedFileMetadata.thumbnailUrl.startsWith('blob:')) {
+                if (processedFileMetadata.thumbnailUrl.startsWith("blob:")) {
                   lifecycleManager.trackBlobUrl(processedFileMetadata.thumbnailUrl);
                 }
               }
@@ -734,16 +750,18 @@ export async function addStirlingFileStubs(
 }
 
 export const createFileActions = (dispatch: React.Dispatch<FileContextAction>) => ({
-  setSelectedFiles: (fileIds: FileId[]) => dispatch({ type: 'SET_SELECTED_FILES', payload: { fileIds } }),
-  setSelectedPages: (pageNumbers: number[]) => dispatch({ type: 'SET_SELECTED_PAGES', payload: { pageNumbers } }),
-  clearSelections: () => dispatch({ type: 'CLEAR_SELECTIONS' }),
-  setProcessing: (isProcessing: boolean, progress = 0) => dispatch({ type: 'SET_PROCESSING', payload: { isProcessing, progress } }),
-  setHasUnsavedChanges: (hasChanges: boolean) => dispatch({ type: 'SET_UNSAVED_CHANGES', payload: { hasChanges } }),
-  pinFile: (fileId: FileId) => dispatch({ type: 'PIN_FILE', payload: { fileId } }),
-  unpinFile: (fileId: FileId) => dispatch({ type: 'UNPIN_FILE', payload: { fileId } }),
-  resetContext: () => dispatch({ type: 'RESET_CONTEXT' }),
-  markFileError: (fileId: FileId) => dispatch({ type: 'MARK_FILE_ERROR', payload: { fileId } }),
-  clearFileError: (fileId: FileId) => dispatch({ type: 'CLEAR_FILE_ERROR', payload: { fileId } }),
-  clearAllFileErrors: () => dispatch({ type: 'CLEAR_ALL_FILE_ERRORS' }),
-  updateStirlingFileStub: (fileId: FileId, updates: Partial<StirlingFileStub>) => dispatch({ type: 'UPDATE_FILE_RECORD', payload: { id: fileId, updates } })
+  setSelectedFiles: (fileIds: FileId[]) => dispatch({ type: "SET_SELECTED_FILES", payload: { fileIds } }),
+  setSelectedPages: (pageNumbers: number[]) => dispatch({ type: "SET_SELECTED_PAGES", payload: { pageNumbers } }),
+  clearSelections: () => dispatch({ type: "CLEAR_SELECTIONS" }),
+  setProcessing: (isProcessing: boolean, progress = 0) =>
+    dispatch({ type: "SET_PROCESSING", payload: { isProcessing, progress } }),
+  setHasUnsavedChanges: (hasChanges: boolean) => dispatch({ type: "SET_UNSAVED_CHANGES", payload: { hasChanges } }),
+  pinFile: (fileId: FileId) => dispatch({ type: "PIN_FILE", payload: { fileId } }),
+  unpinFile: (fileId: FileId) => dispatch({ type: "UNPIN_FILE", payload: { fileId } }),
+  resetContext: () => dispatch({ type: "RESET_CONTEXT" }),
+  markFileError: (fileId: FileId) => dispatch({ type: "MARK_FILE_ERROR", payload: { fileId } }),
+  clearFileError: (fileId: FileId) => dispatch({ type: "CLEAR_FILE_ERROR", payload: { fileId } }),
+  clearAllFileErrors: () => dispatch({ type: "CLEAR_ALL_FILE_ERRORS" }),
+  updateStirlingFileStub: (fileId: FileId, updates: Partial<StirlingFileStub>) =>
+    dispatch({ type: "UPDATE_FILE_RECORD", payload: { id: fileId, updates } }),
 });
diff --git a/frontend/src/core/contexts/file/fileHooks.ts b/frontend/src/core/contexts/file/fileHooks.ts
index 6b5614c118..c02d145266 100644
--- a/frontend/src/core/contexts/file/fileHooks.ts
+++ b/frontend/src/core/contexts/file/fileHooks.ts
@@ -2,15 +2,15 @@
  * Performant file hooks - Clean API using FileContext
  */
 
-import { useContext, useMemo } from 'react';
+import { useContext, useMemo } from "react";
 import {
   FileStateContext,
   FileActionsContext,
   FileContextStateValue,
-  FileContextActionsValue
-} from '@app/contexts/file/contexts';
-import { StirlingFileStub, StirlingFile } from '@app/types/fileContext';
-import { FileId } from '@app/types/file';
+  FileContextActionsValue,
+} from "@app/contexts/file/contexts";
+import { StirlingFileStub, StirlingFile } from "@app/types/fileContext";
+import { FileId } from "@app/types/file";
 
 /**
  * Hook for accessing file state (will re-render on any state change)
@@ -19,7 +19,7 @@ import { FileId } from '@app/types/file';
 export function useFileState(): FileContextStateValue {
   const context = useContext(FileStateContext);
   if (!context) {
-    throw new Error('useFileState must be used within a FileContextProvider');
+    throw new Error("useFileState must be used within a FileContextProvider");
   }
   return context;
 }
@@ -30,7 +30,7 @@ export function useFileState(): FileContextStateValue {
 export function useFileActions(): FileContextActionsValue {
   const context = useContext(FileActionsContext);
   if (!context) {
-    throw new Error('useFileActions must be used within a FileContextProvider');
+    throw new Error("useFileActions must be used within a FileContextProvider");
   }
   return context;
 }
@@ -44,10 +44,13 @@ export function useCurrentFile(): { file?: File; record?: StirlingFileStub } {
   const primaryFileId = state.files.ids[0];
   const primaryFileRecord = primaryFileId ? state.files.byId[primaryFileId] : undefined;
 
-  return useMemo(() => ({
-    file: primaryFileId ? selectors.getFile(primaryFileId) : undefined,
-    record: primaryFileId ? selectors.getStirlingFileStub(primaryFileId) : undefined
-  }), [primaryFileId, primaryFileRecord, selectors]);
+  return useMemo(
+    () => ({
+      file: primaryFileId ? selectors.getFile(primaryFileId) : undefined,
+      record: primaryFileId ? selectors.getStirlingFileStub(primaryFileId) : undefined,
+    }),
+    [primaryFileId, primaryFileRecord, selectors],
+  );
 }
 
 /**
@@ -62,21 +65,24 @@ export function useFileSelection() {
     return selectors.getSelectedFiles();
   }, [state.ui.selectedFileIds, state.files.byId, selectors]);
 
-  return useMemo(() => ({
-    selectedFiles,
-    selectedFileIds: state.ui.selectedFileIds,
-    selectedPageNumbers: state.ui.selectedPageNumbers,
-    setSelectedFiles: actions.setSelectedFiles,
-    setSelectedPages: actions.setSelectedPages,
-    clearSelections: actions.clearSelections
-  }), [
-    selectedFiles,
-    state.ui.selectedFileIds,
-    state.ui.selectedPageNumbers,
-    actions.setSelectedFiles,
-    actions.setSelectedPages,
-    actions.clearSelections
-  ]);
+  return useMemo(
+    () => ({
+      selectedFiles,
+      selectedFileIds: state.ui.selectedFileIds,
+      selectedPageNumbers: state.ui.selectedPageNumbers,
+      setSelectedFiles: actions.setSelectedFiles,
+      setSelectedPages: actions.setSelectedPages,
+      clearSelections: actions.clearSelections,
+    }),
+    [
+      selectedFiles,
+      state.ui.selectedFileIds,
+      state.ui.selectedPageNumbers,
+      actions.setSelectedFiles,
+      actions.setSelectedPages,
+      actions.clearSelections,
+    ],
+  );
 }
 
 /**
@@ -85,13 +91,16 @@ export function useFileSelection() {
 export function useFileManagement() {
   const { actions } = useFileActions();
 
-  return useMemo(() => ({
-    addFiles: actions.addFiles,
-    removeFiles: actions.removeFiles,
-    clearAllFiles: actions.clearAllFiles,
-    updateStirlingFileStub: actions.updateStirlingFileStub,
-    reorderFiles: actions.reorderFiles
-  }), [actions]);
+  return useMemo(
+    () => ({
+      addFiles: actions.addFiles,
+      removeFiles: actions.removeFiles,
+      clearAllFiles: actions.clearAllFiles,
+      updateStirlingFileStub: actions.updateStirlingFileStub,
+      reorderFiles: actions.reorderFiles,
+    }),
+    [actions],
+  );
 }
 
 /**
@@ -101,13 +110,16 @@ export function useFileUI() {
   const { state } = useFileState();
   const { actions } = useFileActions();
 
-  return useMemo(() => ({
-    isProcessing: state.ui.isProcessing,
-    processingProgress: state.ui.processingProgress,
-    hasUnsavedChanges: state.ui.hasUnsavedChanges,
-    setProcessing: actions.setProcessing,
-    setUnsavedChanges: actions.setHasUnsavedChanges
-  }), [state.ui, actions]);
+  return useMemo(
+    () => ({
+      isProcessing: state.ui.isProcessing,
+      processingProgress: state.ui.processingProgress,
+      hasUnsavedChanges: state.ui.hasUnsavedChanges,
+      setProcessing: actions.setProcessing,
+      setUnsavedChanges: actions.setHasUnsavedChanges,
+    }),
+    [state.ui, actions],
+  );
 }
 
 /**
@@ -117,10 +129,13 @@ export function useStirlingFileStub(fileId: FileId): { file?: File; record?: Sti
   const { state, selectors } = useFileState();
   const fileRecord = state.files.byId[fileId];
 
-  return useMemo(() => ({
-    file: selectors.getFile(fileId),
-    record: selectors.getStirlingFileStub(fileId)
-  }), [fileId, fileRecord, selectors]);
+  return useMemo(
+    () => ({
+      file: selectors.getFile(fileId),
+      record: selectors.getStirlingFileStub(fileId),
+    }),
+    [fileId, fileRecord, selectors],
+  );
 }
 
 /**
@@ -129,24 +144,34 @@ export function useStirlingFileStub(fileId: FileId): { file?: File; record?: Sti
 export function useAllFiles(): { files: StirlingFile[]; fileStubs: StirlingFileStub[]; fileIds: FileId[] } {
   const { state, selectors } = useFileState();
 
-  return useMemo(() => ({
-    files: selectors.getFiles(),
-    fileStubs: selectors.getStirlingFileStubs(),
-    fileIds: state.files.ids
-  }), [state.files.ids, state.files.byId, selectors]);
+  return useMemo(
+    () => ({
+      files: selectors.getFiles(),
+      fileStubs: selectors.getStirlingFileStubs(),
+      fileIds: state.files.ids,
+    }),
+    [state.files.ids, state.files.byId, selectors],
+  );
 }
 
 /**
  * Hook for selected files (optimized for selection-based UI)
  */
-export function useSelectedFiles(): { selectedFiles: StirlingFile[]; selectedFileStubs: StirlingFileStub[]; selectedFileIds: FileId[] } {
+export function useSelectedFiles(): {
+  selectedFiles: StirlingFile[];
+  selectedFileStubs: StirlingFileStub[];
+  selectedFileIds: FileId[];
+} {
   const { state, selectors } = useFileState();
 
-  return useMemo(() => ({
-    selectedFiles: selectors.getSelectedFiles(),
-    selectedFileStubs: selectors.getSelectedStirlingFileStubs(),
-    selectedFileIds: state.ui.selectedFileIds
-  }), [state.ui.selectedFileIds, state.files.byId, selectors]);
+  return useMemo(
+    () => ({
+      selectedFiles: selectors.getSelectedFiles(),
+      selectedFileStubs: selectors.getSelectedStirlingFileStubs(),
+      selectedFileIds: state.ui.selectedFileIds,
+    }),
+    [state.ui.selectedFileIds, state.files.byId, selectors],
+  );
 }
 
 // Navigation management removed - moved to NavigationContext
@@ -159,44 +184,42 @@ export function useFileContext() {
   const { state, selectors } = useFileState();
   const { actions } = useFileActions();
 
-  return useMemo(() => ({
-    // Lifecycle management
-    trackBlobUrl: actions.trackBlobUrl,
-    scheduleCleanup: actions.scheduleCleanup,
-    setUnsavedChanges: actions.setHasUnsavedChanges,
+  return useMemo(
+    () => ({
+      // Lifecycle management
+      trackBlobUrl: actions.trackBlobUrl,
+      scheduleCleanup: actions.scheduleCleanup,
+      setUnsavedChanges: actions.setHasUnsavedChanges,
 
-    // File management
-    addFiles: actions.addFiles,
-    consumeFiles: actions.consumeFiles,
-    undoConsumeFiles: actions.undoConsumeFiles,
-    recordOperation: (_fileId: FileId, _operation: any) => {}, // Operation tracking not implemented
-    markOperationApplied: (_fileId: FileId, _operationId: string) => {}, // Operation tracking not implemented
-    markOperationFailed: (_fileId: FileId, _operationId: string, _error: string) => {}, // Operation tracking not implemented
-    // File ID lookup
-    findFileId: (file: File) => {
-      return state.files.ids.find(id => {
-        const record = state.files.byId[id];
-        return record &&
-               record.name === file.name &&
-               record.size === file.size &&
-               record.lastModified === file.lastModified;
-      });
-    },
+      // File management
+      addFiles: actions.addFiles,
+      consumeFiles: actions.consumeFiles,
+      undoConsumeFiles: actions.undoConsumeFiles,
+      recordOperation: (_fileId: FileId, _operation: any) => {}, // Operation tracking not implemented
+      markOperationApplied: (_fileId: FileId, _operationId: string) => {}, // Operation tracking not implemented
+      markOperationFailed: (_fileId: FileId, _operationId: string, _error: string) => {}, // Operation tracking not implemented
+      // File ID lookup
+      findFileId: (file: File) => {
+        return state.files.ids.find((id) => {
+          const record = state.files.byId[id];
+          return record && record.name === file.name && record.size === file.size && record.lastModified === file.lastModified;
+        });
+      },
 
-    // Pinned files
-    pinnedFiles: state.pinnedFiles,
-    pinFile: actions.pinFile,
-    unpinFile: actions.unpinFile,
-    isFilePinned: selectors.isFilePinned,
+      // Pinned files
+      pinnedFiles: state.pinnedFiles,
+      pinFile: actions.pinFile,
+      unpinFile: actions.unpinFile,
+      isFilePinned: selectors.isFilePinned,
 
-    // Active files
-    activeFiles: selectors.getFiles(),
-    openEncryptedUnlockPrompt: actions.openEncryptedUnlockPrompt,
+      // Active files
+      activeFiles: selectors.getFiles(),
+      openEncryptedUnlockPrompt: actions.openEncryptedUnlockPrompt,
 
-    // Direct access to actions and selectors (for advanced use cases)
-    actions,
-    selectors
-  }), [state, selectors, actions]);
+      // Direct access to actions and selectors (for advanced use cases)
+      actions,
+      selectors,
+    }),
+    [state, selectors, actions],
+  );
 }
-
-
diff --git a/frontend/src/core/contexts/file/fileSelectors.ts b/frontend/src/core/contexts/file/fileSelectors.ts
index 5fa54f33c5..d817b51439 100644
--- a/frontend/src/core/contexts/file/fileSelectors.ts
+++ b/frontend/src/core/contexts/file/fileSelectors.ts
@@ -2,21 +2,21 @@
  * File selectors - Pure functions for accessing file state
  */
 
-import { FileId } from '@app/types/file';
+import { FileId } from "@app/types/file";
 import {
   StirlingFileStub,
   FileContextState,
   FileContextSelectors,
   StirlingFile,
-  createStirlingFile
-} from '@app/types/fileContext';
+  createStirlingFile,
+} from "@app/types/fileContext";
 
 /**
  * Create stable selectors using stateRef and filesRef
  */
 export function createFileSelectors(
   stateRef: React.MutableRefObject<FileContextState>,
-  filesRef: React.MutableRefObject<Map<FileId, File>>
+  filesRef: React.MutableRefObject<Map<FileId, File>>,
 ): FileContextSelectors {
   return {
     getFile: (id: FileId) => {
@@ -27,7 +27,7 @@ export function createFileSelectors(
     getFiles: (ids?: FileId[]) => {
       const currentIds = ids || stateRef.current.files.ids;
       return currentIds
-        .map(id => {
+        .map((id) => {
           const file = filesRef.current.get(id);
           return file ? createStirlingFile(file, id) : undefined;
         })
@@ -38,14 +38,14 @@ export function createFileSelectors(
 
     getStirlingFileStubs: (ids?: FileId[]) => {
       const currentIds = ids || stateRef.current.files.ids;
-      return currentIds.map(id => stateRef.current.files.byId[id]).filter(Boolean);
+      return currentIds.map((id) => stateRef.current.files.byId[id]).filter(Boolean);
     },
 
     getAllFileIds: () => stateRef.current.files.ids,
 
     getSelectedFiles: () => {
       return stateRef.current.ui.selectedFileIds
-        .map(id => {
+        .map((id) => {
           const file = filesRef.current.get(id);
           return file ? createStirlingFile(file, id) : undefined;
         })
@@ -53,9 +53,7 @@ export function createFileSelectors(
     },
 
     getSelectedStirlingFileStubs: () => {
-      return stateRef.current.ui.selectedFileIds
-        .map(id => stateRef.current.files.byId[id])
-        .filter(Boolean);
+      return stateRef.current.ui.selectedFileIds.map((id) => stateRef.current.files.byId[id]).filter(Boolean);
     },
 
     // Pinned files selectors
@@ -65,7 +63,7 @@ export function createFileSelectors(
 
     getPinnedFiles: () => {
       return Array.from(stateRef.current.pinnedFiles)
-        .map(id => {
+        .map((id) => {
           const file = filesRef.current.get(id);
           return file ? createStirlingFile(file, id) : undefined;
         })
@@ -74,7 +72,7 @@ export function createFileSelectors(
 
     getPinnedStirlingFileStubs: () => {
       return Array.from(stateRef.current.pinnedFiles)
-        .map(id => stateRef.current.files.byId[id])
+        .map((id) => stateRef.current.files.byId[id])
         .filter(Boolean);
     },
 
@@ -85,13 +83,12 @@ export function createFileSelectors(
     // Stable signature for effects - prevents unnecessary re-renders
     getFilesSignature: () => {
       return stateRef.current.files.ids
-        .map(id => {
+        .map((id) => {
           const record = stateRef.current.files.byId[id];
-          return record ? `${id}:${record.size}:${record.lastModified}` : '';
+          return record ? `${id}:${record.size}:${record.lastModified}` : "";
         })
-        .join('|');
+        .join("|");
     },
-
   };
 }
 
@@ -100,7 +97,7 @@ export function createFileSelectors(
  */
 export function buildQuickKeySet(stirlingFileStubs: Record<FileId, StirlingFileStub>): Set<string> {
   const quickKeys = new Set<string>();
-  Object.values(stirlingFileStubs).forEach(record => {
+  Object.values(stirlingFileStubs).forEach((record) => {
     if (record.quickKey) {
       quickKeys.add(record.quickKey);
     }
@@ -111,9 +108,11 @@ export function buildQuickKeySet(stirlingFileStubs: Record<FileId, StirlingFileS
 /**
  * Helper for building quickKey sets from IndexedDB metadata
  */
-export function buildQuickKeySetFromMetadata(metadata: Array<{ name: string; size: number; lastModified: number }>): Set<string> {
+export function buildQuickKeySetFromMetadata(
+  metadata: Array<{ name: string; size: number; lastModified: number }>,
+): Set<string> {
   const quickKeys = new Set<string>();
-  metadata.forEach(meta => {
+  metadata.forEach((meta) => {
     // Format: name|size|lastModified (same as createQuickKey)
     const quickKey = `${meta.name}|${meta.size}|${meta.lastModified}`;
     quickKeys.add(quickKey);
@@ -126,13 +125,13 @@ export function buildQuickKeySetFromMetadata(metadata: Array<{ name: string; siz
  */
 export function getPrimaryFile(
   stateRef: React.MutableRefObject<FileContextState>,
-  filesRef: React.MutableRefObject<Map<FileId, File>>
+  filesRef: React.MutableRefObject<Map<FileId, File>>,
 ): { file?: File; record?: StirlingFileStub } {
   const primaryFileId = stateRef.current.files.ids[0];
   if (!primaryFileId) return {};
 
   return {
     file: filesRef.current.get(primaryFileId),
-    record: stateRef.current.files.byId[primaryFileId]
+    record: stateRef.current.files.byId[primaryFileId],
   };
 }
diff --git a/frontend/src/core/contexts/file/lifecycle.ts b/frontend/src/core/contexts/file/lifecycle.ts
index 93feac3754..de662e7da9 100644
--- a/frontend/src/core/contexts/file/lifecycle.ts
+++ b/frontend/src/core/contexts/file/lifecycle.ts
@@ -2,10 +2,10 @@
  * File lifecycle management - Resource cleanup and memory management
  */
 
-import { FileId } from '@app/types/file';
-import { FileContextAction, StirlingFileStub, ProcessedFilePage } from '@app/types/fileContext';
+import { FileId } from "@app/types/file";
+import { FileContextAction, StirlingFileStub, ProcessedFilePage } from "@app/types/fileContext";
 
-const DEBUG = process.env.NODE_ENV === 'development';
+const DEBUG = process.env.NODE_ENV === "development";
 
 /**
  * Resource tracking and cleanup utilities
@@ -17,7 +17,7 @@ export class FileLifecycleManager {
 
   constructor(
     private filesRef: React.MutableRefObject<Map<FileId, File>>,
-    private dispatch: React.Dispatch<FileContextAction>
+    private dispatch: React.Dispatch<FileContextAction>,
   ) {}
 
   /**
@@ -25,12 +25,11 @@ export class FileLifecycleManager {
    */
   trackBlobUrl = (url: string): void => {
     // Only track actual blob URLs to avoid trying to revoke other schemes
-    if (url.startsWith('blob:')) {
+    if (url.startsWith("blob:")) {
       this.blobUrls.add(url);
     }
   };
 
-
   /**
    * Clean up resources for a specific file (with stateRef access for complete cleanup)
    */
@@ -39,7 +38,7 @@ export class FileLifecycleManager {
     this.cleanupAllResourcesForFile(fileId, stateRef);
 
     // Remove file from state
-    this.dispatch({ type: 'REMOVE_FILES', payload: { fileIds: [fileId] } });
+    this.dispatch({ type: "REMOVE_FILES", payload: { fileIds: [fileId] } });
   };
 
   /**
@@ -47,7 +46,7 @@ export class FileLifecycleManager {
    */
   cleanupAllFiles = (): void => {
     // Revoke all blob URLs
-    this.blobUrls.forEach(url => {
+    this.blobUrls.forEach((url) => {
       try {
         URL.revokeObjectURL(url);
       } catch {
@@ -57,7 +56,7 @@ export class FileLifecycleManager {
     this.blobUrls.clear();
 
     // Clear all cleanup timers and generations
-    this.cleanupTimers.forEach(timer => clearTimeout(timer));
+    this.cleanupTimers.forEach((timer) => clearTimeout(timer));
     this.cleanupTimers.clear();
     this.fileGenerations.clear();
 
@@ -102,13 +101,13 @@ export class FileLifecycleManager {
    * Remove a file immediately with complete resource cleanup
    */
   removeFiles = (fileIds: FileId[], stateRef?: React.MutableRefObject<any>): void => {
-    fileIds.forEach(fileId => {
+    fileIds.forEach((fileId) => {
       // Clean up all resources for this file
       this.cleanupAllResourcesForFile(fileId, stateRef);
     });
 
     // Dispatch removal action once for all files (reducer only updates state)
-    this.dispatch({ type: 'REMOVE_FILES', payload: { fileIds } });
+    this.dispatch({ type: "REMOVE_FILES", payload: { fileIds } });
   };
 
   /**
@@ -131,7 +130,7 @@ export class FileLifecycleManager {
       const record = stateRef.current.files.byId[fileId];
       if (record) {
         // Clean up thumbnail blob URLs
-        if (record.thumbnailUrl && record.thumbnailUrl.startsWith('blob:')) {
+        if (record.thumbnailUrl && record.thumbnailUrl.startsWith("blob:")) {
           try {
             URL.revokeObjectURL(record.thumbnailUrl);
           } catch {
@@ -139,7 +138,7 @@ export class FileLifecycleManager {
           }
         }
 
-        if (record.blobUrl && record.blobUrl.startsWith('blob:')) {
+        if (record.blobUrl && record.blobUrl.startsWith("blob:")) {
           try {
             URL.revokeObjectURL(record.blobUrl);
           } catch {
@@ -150,7 +149,7 @@ export class FileLifecycleManager {
         // Clean up processed file thumbnails
         if (record.processedFile?.pages) {
           record.processedFile.pages.forEach((page: ProcessedFilePage) => {
-            if (page.thumbnail && page.thumbnail.startsWith('blob:')) {
+            if (page.thumbnail && page.thumbnail.startsWith("blob:")) {
               try {
                 URL.revokeObjectURL(page.thumbnail);
               } catch {
@@ -166,7 +165,11 @@ export class FileLifecycleManager {
   /**
    * Update file record with race condition guards
    */
-  updateStirlingFileStub = (fileId: FileId, updates: Partial<StirlingFileStub>, stateRef?: React.MutableRefObject<any>): void => {
+  updateStirlingFileStub = (
+    fileId: FileId,
+    updates: Partial<StirlingFileStub>,
+    stateRef?: React.MutableRefObject<any>,
+  ): void => {
     // Guard against updating removed files (race condition protection)
     if (!this.filesRef.current.has(fileId)) {
       if (DEBUG) console.warn(`🗂️ Attempted to update removed file (filesRef): ${fileId}`);
@@ -179,7 +182,7 @@ export class FileLifecycleManager {
       return;
     }
 
-    this.dispatch({ type: 'UPDATE_FILE_RECORD', payload: { id: fileId, updates } });
+    this.dispatch({ type: "UPDATE_FILE_RECORD", payload: { id: fileId, updates } });
   };
 
   /**
diff --git a/frontend/src/core/contexts/toolWorkflow/toolWorkflowState.ts b/frontend/src/core/contexts/toolWorkflow/toolWorkflowState.ts
index 42fdd6f159..9ebc1980e2 100644
--- a/frontend/src/core/contexts/toolWorkflow/toolWorkflowState.ts
+++ b/frontend/src/core/contexts/toolWorkflow/toolWorkflowState.ts
@@ -1,10 +1,10 @@
-import { PageEditorFunctions } from '@app/types/pageEditor';
-import { type ToolPanelMode, DEFAULT_TOOL_PANEL_MODE } from '@app/constants/toolPanel';
+import { PageEditorFunctions } from "@app/types/pageEditor";
+import { type ToolPanelMode, DEFAULT_TOOL_PANEL_MODE } from "@app/constants/toolPanel";
 
 export interface ToolWorkflowState {
   // UI State
   sidebarsVisible: boolean;
-  leftPanelView: 'toolPicker' | 'toolContent' | 'hidden';
+  leftPanelView: "toolPicker" | "toolContent" | "hidden";
   readerMode: boolean;
   toolPanelMode: ToolPanelMode;
 
@@ -17,23 +17,22 @@ export interface ToolWorkflowState {
 
 // Actions
 export type ToolWorkflowAction =
-  | { type: 'SET_SIDEBARS_VISIBLE'; payload: boolean }
-  | { type: 'SET_LEFT_PANEL_VIEW'; payload: 'toolPicker' | 'toolContent' | 'hidden' }
-  | { type: 'SET_READER_MODE'; payload: boolean }
-  | { type: 'SET_TOOL_PANEL_MODE'; payload: ToolPanelMode }
-  | { type: 'SET_PREVIEW_FILE'; payload: File | null }
-  | { type: 'SET_PAGE_EDITOR_FUNCTIONS'; payload: PageEditorFunctions | null }
-  | { type: 'SET_SEARCH_QUERY'; payload: string }
-  | { type: 'RESET_UI_STATE' };
+  | { type: "SET_SIDEBARS_VISIBLE"; payload: boolean }
+  | { type: "SET_LEFT_PANEL_VIEW"; payload: "toolPicker" | "toolContent" | "hidden" }
+  | { type: "SET_READER_MODE"; payload: boolean }
+  | { type: "SET_TOOL_PANEL_MODE"; payload: ToolPanelMode }
+  | { type: "SET_PREVIEW_FILE"; payload: File | null }
+  | { type: "SET_PAGE_EDITOR_FUNCTIONS"; payload: PageEditorFunctions | null }
+  | { type: "SET_SEARCH_QUERY"; payload: string }
+  | { type: "RESET_UI_STATE" };
 
-  
-export const baseState: Omit<ToolWorkflowState, 'toolPanelMode'> = {
+export const baseState: Omit<ToolWorkflowState, "toolPanelMode"> = {
   sidebarsVisible: true,
-  leftPanelView: 'toolPicker',
+  leftPanelView: "toolPicker",
   readerMode: false,
   previewFile: null,
   pageEditorFunctions: null,
-  searchQuery: '',
+  searchQuery: "",
 };
 
 export const createInitialState = (): ToolWorkflowState => ({
@@ -43,21 +42,21 @@ export const createInitialState = (): ToolWorkflowState => ({
 
 export function toolWorkflowReducer(state: ToolWorkflowState, action: ToolWorkflowAction): ToolWorkflowState {
   switch (action.type) {
-    case 'SET_SIDEBARS_VISIBLE':
+    case "SET_SIDEBARS_VISIBLE":
       return { ...state, sidebarsVisible: action.payload };
-    case 'SET_LEFT_PANEL_VIEW':
+    case "SET_LEFT_PANEL_VIEW":
       return { ...state, leftPanelView: action.payload };
-    case 'SET_READER_MODE':
+    case "SET_READER_MODE":
       return { ...state, readerMode: action.payload };
-    case 'SET_TOOL_PANEL_MODE':
+    case "SET_TOOL_PANEL_MODE":
       return { ...state, toolPanelMode: action.payload };
-    case 'SET_PREVIEW_FILE':
+    case "SET_PREVIEW_FILE":
       return { ...state, previewFile: action.payload };
-    case 'SET_PAGE_EDITOR_FUNCTIONS':
+    case "SET_PAGE_EDITOR_FUNCTIONS":
       return { ...state, pageEditorFunctions: action.payload };
-    case 'SET_SEARCH_QUERY':
+    case "SET_SEARCH_QUERY":
       return { ...state, searchQuery: action.payload };
-    case 'RESET_UI_STATE':
+    case "RESET_UI_STATE":
       return {
         ...baseState,
         toolPanelMode: state.toolPanelMode,
@@ -67,5 +66,3 @@ export function toolWorkflowReducer(state: ToolWorkflowState, action: ToolWorkfl
       return state;
   }
 }
-
-
diff --git a/frontend/src/core/contexts/viewer/viewerActions.ts b/frontend/src/core/contexts/viewer/viewerActions.ts
index 2a704163e4..33f5678b8a 100644
--- a/frontend/src/core/contexts/viewer/viewerActions.ts
+++ b/frontend/src/core/contexts/viewer/viewerActions.ts
@@ -1,14 +1,10 @@
-import { MutableRefObject } from 'react';
-import { SpreadMode } from '@embedpdf/plugin-spread/react';
-import {
-  ViewerBridgeRegistry,
-  ScrollState,
-  ZoomState,
-} from '@app/contexts/viewer/viewerBridges';
-import { PdfBookmarkObject, PdfAttachmentObject } from '@embedpdf/models';
+import { MutableRefObject } from "react";
+import { SpreadMode } from "@embedpdf/plugin-spread/react";
+import { ViewerBridgeRegistry, ScrollState, ZoomState } from "@app/contexts/viewer/viewerBridges";
+import { PdfBookmarkObject, PdfAttachmentObject } from "@embedpdf/models";
 
 export interface ScrollActions {
-  scrollToPage: (page: number, behavior?: 'smooth' | 'instant') => void;
+  scrollToPage: (page: number, behavior?: "smooth" | "instant") => void;
   scrollToFirstPage: () => void;
   scrollToPreviousPage: () => void;
   scrollToNextPage: () => void;
@@ -104,15 +100,15 @@ export function createViewerActions({
   triggerImmediateZoomUpdate,
 }: ViewerActionDependencies): ViewerActionsBundle {
   const scrollActions: ScrollActions = {
-    scrollToPage: (page: number, behavior?: 'smooth' | 'instant') => {
+    scrollToPage: (page: number, behavior?: "smooth" | "instant") => {
       const api = registry.current.scroll?.api;
       if (api?.scrollToPage) {
         try {
-          api.scrollToPage({ pageNumber: page, behavior: behavior || 'smooth' });
+          api.scrollToPage({ pageNumber: page, behavior: behavior || "smooth" });
         } catch (error) {
           // Silently handle "Strategy not found" errors that occur during document transitions
-          if (process.env.NODE_ENV === 'development') {
-            console.warn('[ScrollActions] scrollToPage failed (document may be transitioning):', error);
+          if (process.env.NODE_ENV === "development") {
+            console.warn("[ScrollActions] scrollToPage failed (document may be transitioning):", error);
           }
         }
       }
@@ -123,8 +119,8 @@ export function createViewerActions({
         try {
           api.scrollToPage({ pageNumber: 1 });
         } catch (error) {
-          if (process.env.NODE_ENV === 'development') {
-            console.warn('[ScrollActions] scrollToFirstPage failed:', error);
+          if (process.env.NODE_ENV === "development") {
+            console.warn("[ScrollActions] scrollToFirstPage failed:", error);
           }
         }
       }
@@ -135,8 +131,8 @@ export function createViewerActions({
         try {
           api.scrollToPreviousPage();
         } catch (error) {
-          if (process.env.NODE_ENV === 'development') {
-            console.warn('[ScrollActions] scrollToPreviousPage failed:', error);
+          if (process.env.NODE_ENV === "development") {
+            console.warn("[ScrollActions] scrollToPreviousPage failed:", error);
           }
         }
       }
@@ -147,8 +143,8 @@ export function createViewerActions({
         try {
           api.scrollToNextPage();
         } catch (error) {
-          if (process.env.NODE_ENV === 'development') {
-            console.warn('[ScrollActions] scrollToNextPage failed:', error);
+          if (process.env.NODE_ENV === "development") {
+            console.warn("[ScrollActions] scrollToNextPage failed:", error);
           }
         }
       }
@@ -160,8 +156,8 @@ export function createViewerActions({
         try {
           api.scrollToPage({ pageNumber: state.totalPages });
         } catch (error) {
-          if (process.env.NODE_ENV === 'development') {
-            console.warn('[ScrollActions] scrollToLastPage failed:', error);
+          if (process.env.NODE_ENV === "development") {
+            console.warn("[ScrollActions] scrollToLastPage failed:", error);
           }
         }
       }
@@ -173,10 +169,7 @@ export function createViewerActions({
       const api = registry.current.zoom?.api;
       if (api?.zoomIn) {
         const currentState = getZoomState();
-        const newPercent = Math.min(
-          Math.round(currentState.zoomPercent * 1.2),
-          300
-        );
+        const newPercent = Math.min(Math.round(currentState.zoomPercent * 1.2), 300);
         triggerImmediateZoomUpdate(newPercent);
         api.zoomIn();
       }
@@ -185,10 +178,7 @@ export function createViewerActions({
       const api = registry.current.zoom?.api;
       if (api?.zoomOut) {
         const currentState = getZoomState();
-        const newPercent = Math.max(
-          Math.round(currentState.zoomPercent / 1.2),
-          20
-        );
+        const newPercent = Math.max(Math.round(currentState.zoomPercent / 1.2), 20);
         triggerImmediateZoomUpdate(newPercent);
         api.zoomOut();
       }
@@ -238,9 +228,9 @@ export function createViewerActions({
     getSelectedText: () => {
       const api = registry.current.selection?.api;
       if (api?.getSelectedText) {
-        return api.getSelectedText() ?? '';
+        return api.getSelectedText() ?? "";
       }
-      return '';
+      return "";
     },
     getFormattedSelection: () => {
       const api = registry.current.selection?.api;
@@ -342,7 +332,7 @@ export function createViewerActions({
           const result = api.saveAsCopy();
           return await result.toPromise();
         } catch (error) {
-          console.error('Failed to save PDF copy:', error);
+          console.error("Failed to save PDF copy:", error);
           return null;
         }
       }
diff --git a/frontend/src/core/contexts/viewer/viewerBridges.ts b/frontend/src/core/contexts/viewer/viewerBridges.ts
index 3812acaf59..f28cdf92bc 100644
--- a/frontend/src/core/contexts/viewer/viewerBridges.ts
+++ b/frontend/src/core/contexts/viewer/viewerBridges.ts
@@ -1,5 +1,5 @@
-import { SpreadMode } from '@embedpdf/plugin-spread/react';
-import { PdfBookmarkObject, PdfAttachmentObject } from '@embedpdf/models';
+import { SpreadMode } from "@embedpdf/plugin-spread/react";
+import { PdfBookmarkObject, PdfAttachmentObject } from "@embedpdf/models";
 
 export enum PdfPermissionFlag {
   Print = 0x0004,
@@ -86,7 +86,10 @@ export interface PrintAPIWrapper {
 }
 
 export interface ThumbnailAPIWrapper {
-  renderThumb: (pageIndex: number, scale: number) => {
+  renderThumb: (
+    pageIndex: number,
+    scale: number,
+  ) => {
     toPromise: () => Promise<Blob>;
   };
 }
@@ -226,7 +229,7 @@ export const createBridgeRegistry = (): ViewerBridgeRegistry => ({
 export function registerBridge<K extends BridgeKey>(
   registry: ViewerBridgeRegistry,
   type: K,
-  ref: BridgeRef<BridgeStateMap[K], BridgeApiMap[K]> | null
+  ref: BridgeRef<BridgeStateMap[K], BridgeApiMap[K]> | null,
 ): void {
   registry[type] = ref as ViewerBridgeRegistry[K];
 }
@@ -234,14 +237,11 @@ export function registerBridge<K extends BridgeKey>(
 export function getBridgeState<K extends BridgeKey>(
   registry: ViewerBridgeRegistry,
   type: K,
-  fallback: BridgeStateMap[K]
+  fallback: BridgeStateMap[K],
 ): BridgeStateMap[K] {
   return registry[type]?.state ?? fallback;
 }
 
-export function getBridgeApi<K extends BridgeKey>(
-  registry: ViewerBridgeRegistry,
-  type: K
-): BridgeApiMap[K] | null {
+export function getBridgeApi<K extends BridgeKey>(registry: ViewerBridgeRegistry, type: K): BridgeApiMap[K] | null {
   return registry[type]?.api ?? null;
 }
diff --git a/frontend/src/core/data/toolsTaxonomy.ts b/frontend/src/core/data/toolsTaxonomy.ts
index bb22dfeb7b..a3d5dfb100 100644
--- a/frontend/src/core/data/toolsTaxonomy.ts
+++ b/frontend/src/core/data/toolsTaxonomy.ts
@@ -1,69 +1,69 @@
-import { type TFunction } from 'i18next';
-import React from 'react';
-import { ToolOperationConfig } from '@app/hooks/tools/shared/toolOperationTypes';
-import { BaseToolProps } from '@app/types/tool';
-import { WorkbenchType } from '@app/types/workbench';
-import { LinkToolId, RegularToolId, SuperToolId, ToolId, ToolKind } from '@app/types/toolId';
-import DrawRoundedIcon from '@mui/icons-material/DrawRounded';
-import SecurityRoundedIcon from '@mui/icons-material/SecurityRounded';
-import VerifiedUserRoundedIcon from '@mui/icons-material/VerifiedUserRounded';
-import RateReviewRoundedIcon from '@mui/icons-material/RateReviewRounded';
-import ViewAgendaRoundedIcon from '@mui/icons-material/ViewAgendaRounded';
-import FileDownloadRoundedIcon from '@mui/icons-material/FileDownloadRounded';
-import DeleteSweepRoundedIcon from '@mui/icons-material/DeleteSweepRounded';
-import SmartToyRoundedIcon from '@mui/icons-material/SmartToyRounded';
-import BuildRoundedIcon from '@mui/icons-material/BuildRounded';
-import TuneRoundedIcon from '@mui/icons-material/TuneRounded';
-import CodeRoundedIcon from '@mui/icons-material/CodeRounded';
-import { ProprietaryToolId } from '@app/types/proprietaryToolId';
+import { type TFunction } from "i18next";
+import React from "react";
+import { ToolOperationConfig } from "@app/hooks/tools/shared/toolOperationTypes";
+import { BaseToolProps } from "@app/types/tool";
+import { WorkbenchType } from "@app/types/workbench";
+import { LinkToolId, RegularToolId, SuperToolId, ToolId, ToolKind } from "@app/types/toolId";
+import DrawRoundedIcon from "@mui/icons-material/DrawRounded";
+import SecurityRoundedIcon from "@mui/icons-material/SecurityRounded";
+import VerifiedUserRoundedIcon from "@mui/icons-material/VerifiedUserRounded";
+import RateReviewRoundedIcon from "@mui/icons-material/RateReviewRounded";
+import ViewAgendaRoundedIcon from "@mui/icons-material/ViewAgendaRounded";
+import FileDownloadRoundedIcon from "@mui/icons-material/FileDownloadRounded";
+import DeleteSweepRoundedIcon from "@mui/icons-material/DeleteSweepRounded";
+import SmartToyRoundedIcon from "@mui/icons-material/SmartToyRounded";
+import BuildRoundedIcon from "@mui/icons-material/BuildRounded";
+import TuneRoundedIcon from "@mui/icons-material/TuneRounded";
+import CodeRoundedIcon from "@mui/icons-material/CodeRounded";
+import { ProprietaryToolId } from "@app/types/proprietaryToolId";
 
 export enum SubcategoryId {
-  SIGNING = 'signing',
-  DOCUMENT_SECURITY = 'documentSecurity',
-  VERIFICATION = 'verification',
-  DOCUMENT_REVIEW = 'documentReview',
-  PAGE_FORMATTING = 'pageFormatting',
-  EXTRACTION = 'extraction',
-  REMOVAL = 'removal',
-  AUTOMATION = 'automation',
-  GENERAL = 'general',
-  ADVANCED_FORMATTING = 'advancedFormatting',
-  DEVELOPER_TOOLS = 'developerTools'
+  SIGNING = "signing",
+  DOCUMENT_SECURITY = "documentSecurity",
+  VERIFICATION = "verification",
+  DOCUMENT_REVIEW = "documentReview",
+  PAGE_FORMATTING = "pageFormatting",
+  EXTRACTION = "extraction",
+  REMOVAL = "removal",
+  AUTOMATION = "automation",
+  GENERAL = "general",
+  ADVANCED_FORMATTING = "advancedFormatting",
+  DEVELOPER_TOOLS = "developerTools",
 }
 
 export enum ToolCategoryId {
-  STANDARD_TOOLS = 'standardTools',
-  ADVANCED_TOOLS = 'advancedTools',
-  RECOMMENDED_TOOLS = 'recommendedTools'
+  STANDARD_TOOLS = "standardTools",
+  ADVANCED_TOOLS = "advancedTools",
+  RECOMMENDED_TOOLS = "recommendedTools",
 }
 
 export type ToolRegistryEntry = {
-	icon: React.ReactNode;
-	name: string;
-	component: React.ComponentType<BaseToolProps> | null;
-	description: string;
-	categoryId: ToolCategoryId;
-	subcategoryId: SubcategoryId;
-	maxFiles?: number;
-	supportedFormats?: string[];
-	endpoints?: string[];
-	link?: string;
-	kind?: ToolKind;
-	// Workbench type for navigation
-	workbench?: WorkbenchType;
-	// Operation configuration for automation
-	operationConfig?: ToolOperationConfig<any>;
-	// Settings component for automation configuration
-	automationSettings: React.ComponentType<any> | null;
-	// Whether this tool supports automation (defaults to true)
-	supportsAutomate?: boolean;
-	// Synonyms for search (optional)
-	synonyms?: string[];
-	// Version status indicator (e.g., "alpha", "beta")
-	versionStatus?: "alpha" | "beta";
-	// Whether this tool requires premium access
-	requiresPremium?: boolean;
-}
+  icon: React.ReactNode;
+  name: string;
+  component: React.ComponentType<BaseToolProps> | null;
+  description: string;
+  categoryId: ToolCategoryId;
+  subcategoryId: SubcategoryId;
+  maxFiles?: number;
+  supportedFormats?: string[];
+  endpoints?: string[];
+  link?: string;
+  kind?: ToolKind;
+  // Workbench type for navigation
+  workbench?: WorkbenchType;
+  // Operation configuration for automation
+  operationConfig?: ToolOperationConfig<any>;
+  // Settings component for automation configuration
+  automationSettings: React.ComponentType<any> | null;
+  // Whether this tool supports automation (defaults to true)
+  supportsAutomate?: boolean;
+  // Synonyms for search (optional)
+  synonyms?: string[];
+  // Version status indicator (e.g., "alpha", "beta")
+  versionStatus?: "alpha" | "beta";
+  // Whether this tool requires premium access
+  requiresPremium?: boolean;
+};
 
 export type RegularToolRegistry = Record<RegularToolId, ToolRegistryEntry>;
 export type SuperToolRegistry = Record<SuperToolId, ToolRegistryEntry>;
@@ -86,17 +86,17 @@ export const SUBCATEGORY_ORDER: SubcategoryId[] = [
 ];
 
 export const SUBCATEGORY_COLOR_MAP: Record<SubcategoryId, string> = {
-  [SubcategoryId.SIGNING]: 'var(--category-color-signing)',           // Green
-  [SubcategoryId.DOCUMENT_SECURITY]: 'var(--category-color-security)', // Orange
-  [SubcategoryId.VERIFICATION]: 'var(--category-color-verification)',      // Orange
-  [SubcategoryId.DOCUMENT_REVIEW]: 'var(--category-color-general)',   // Blue
-  [SubcategoryId.PAGE_FORMATTING]: 'var(--category-color-formatting)',   // Purple
-  [SubcategoryId.EXTRACTION]: 'var(--category-color-extraction)',        // Cyan
-  [SubcategoryId.REMOVAL]: 'var(--category-color-removal)',           // Red
-  [SubcategoryId.AUTOMATION]: 'var(--category-color-automation)',        // Pink
-  [SubcategoryId.GENERAL]: 'var(--category-color-general)',           // Blue
-  [SubcategoryId.ADVANCED_FORMATTING]: 'var(--category-color-formatting)', // Purple
-  [SubcategoryId.DEVELOPER_TOOLS]: 'var(--category-color-developer)',   // Gray
+  [SubcategoryId.SIGNING]: "var(--category-color-signing)", // Green
+  [SubcategoryId.DOCUMENT_SECURITY]: "var(--category-color-security)", // Orange
+  [SubcategoryId.VERIFICATION]: "var(--category-color-verification)", // Orange
+  [SubcategoryId.DOCUMENT_REVIEW]: "var(--category-color-general)", // Blue
+  [SubcategoryId.PAGE_FORMATTING]: "var(--category-color-formatting)", // Purple
+  [SubcategoryId.EXTRACTION]: "var(--category-color-extraction)", // Cyan
+  [SubcategoryId.REMOVAL]: "var(--category-color-removal)", // Red
+  [SubcategoryId.AUTOMATION]: "var(--category-color-automation)", // Pink
+  [SubcategoryId.GENERAL]: "var(--category-color-general)", // Blue
+  [SubcategoryId.ADVANCED_FORMATTING]: "var(--category-color-formatting)", // Purple
+  [SubcategoryId.DEVELOPER_TOOLS]: "var(--category-color-developer)", // Gray
 };
 
 export const getSubcategoryIcon = (subcategory: SubcategoryId): React.ReactNode => {
@@ -130,13 +130,11 @@ export const getSubcategoryIcon = (subcategory: SubcategoryId): React.ReactNode
 
 export const getCategoryLabel = (t: TFunction, id: ToolCategoryId): string => t(`toolPicker.categories.${id}`, id);
 export const getSubcategoryLabel = (t: TFunction, id: SubcategoryId): string => t(`toolPicker.subcategories.${id}`, id);
-export const getSubcategoryColor = (subcategory: SubcategoryId): string => SUBCATEGORY_COLOR_MAP[subcategory] || '#7882FF';
-
-
+export const getSubcategoryColor = (subcategory: SubcategoryId): string => SUBCATEGORY_COLOR_MAP[subcategory] || "#7882FF";
 
 export const getAllEndpoints = (registry: ToolRegistry): string[] => {
   const lists: string[][] = [];
-  Object.values(registry).forEach(entry => {
+  Object.values(registry).forEach((entry) => {
     if (entry.endpoints && entry.endpoints.length > 0) {
       lists.push(entry.endpoints);
     }
@@ -146,8 +144,8 @@ export const getAllEndpoints = (registry: ToolRegistry): string[] => {
 
 export const getConversionEndpoints = (extensionToEndpoint: Record<string, Record<string, string>>): string[] => {
   const endpoints = new Set<string>();
-  Object.values(extensionToEndpoint).forEach(toEndpoints => {
-    Object.values(toEndpoints).forEach(endpoint => {
+  Object.values(extensionToEndpoint).forEach((toEndpoints) => {
+    Object.values(toEndpoints).forEach((endpoint) => {
       endpoints.add(endpoint);
     });
   });
@@ -156,7 +154,7 @@ export const getConversionEndpoints = (extensionToEndpoint: Record<string, Recor
 
 export const getAllApplicationEndpoints = (
   registry: ToolRegistry,
-  extensionToEndpoint?: Record<string, Record<string, string>>
+  extensionToEndpoint?: Record<string, Record<string, string>>,
 ): string[] => {
   const toolEp = getAllEndpoints(registry);
   const convEp = extensionToEndpoint ? getConversionEndpoints(extensionToEndpoint) : [];
@@ -167,7 +165,7 @@ export const getAllApplicationEndpoints = (
  * Default workbench for tools that don't specify one
  * Returns null to trigger the default case in Workbench component (ToolRenderer)
  */
-export const getDefaultToolWorkbench = (): WorkbenchType => 'fileEditor';
+export const getDefaultToolWorkbench = (): WorkbenchType => "fileEditor";
 
 /**
  * Get workbench type for a tool
@@ -180,7 +178,7 @@ export const getToolWorkbench = (tool: ToolRegistryEntry): WorkbenchType => {
  * Get URL path for a tool
  */
 export const getToolUrlPath = (toolId: string): string => {
-  return `/${toolId.replace(/([A-Z])/g, '-$1').toLowerCase()}`;
+  return `/${toolId.replace(/([A-Z])/g, "-$1").toLowerCase()}`;
 };
 
 /**
diff --git a/frontend/src/core/data/useProprietaryToolRegistry.tsx b/frontend/src/core/data/useProprietaryToolRegistry.tsx
index d0a64efa58..8b0d0440cf 100644
--- a/frontend/src/core/data/useProprietaryToolRegistry.tsx
+++ b/frontend/src/core/data/useProprietaryToolRegistry.tsx
@@ -11,5 +11,5 @@ import { type ProprietaryToolRegistry } from "@app/data/toolsTaxonomy";
 
 // Empty hook that returns empty registry (overridden in proprietary version)
 export function useProprietaryToolRegistry(): ProprietaryToolRegistry {
-  return useMemo(() => ({} as ProprietaryToolRegistry), []);
+  return useMemo(() => ({}) as ProprietaryToolRegistry, []);
 }
diff --git a/frontend/src/core/data/useTranslatedToolRegistry.tsx b/frontend/src/core/data/useTranslatedToolRegistry.tsx
index 3c021d0306..67dca499f9 100644
--- a/frontend/src/core/data/useTranslatedToolRegistry.tsx
+++ b/frontend/src/core/data/useTranslatedToolRegistry.tsx
@@ -22,7 +22,7 @@ import {
   SuperToolRegistry,
   LinkToolRegistry,
 } from "@app/data/toolsTaxonomy";
-import { isSuperToolId, isLinkToolId } from '@app/types/toolId';
+import { isSuperToolId, isLinkToolId } from "@app/types/toolId";
 import AdjustContrast from "@app/tools/AdjustContrast";
 import AdjustContrastSingleStepSettings from "@app/components/tools/adjustContrast/AdjustContrastSingleStepSettings";
 import { adjustContrastOperationConfig } from "@app/hooks/tools/adjustContrast/useAdjustContrastOperation";
@@ -32,8 +32,8 @@ import GetPdfInfo from "@app/tools/GetPdfInfo";
 import AddWatermark from "@app/tools/AddWatermark";
 import AddStamp from "@app/tools/AddStamp";
 import AddAttachments from "@app/tools/AddAttachments";
-import Merge from '@app/tools/Merge';
-import EditTableOfContents from '@app/tools/EditTableOfContents';
+import Merge from "@app/tools/Merge";
+import EditTableOfContents from "@app/tools/EditTableOfContents";
 import Repair from "@app/tools/Repair";
 import AutoRename from "@app/tools/AutoRename";
 import SingleLargePage from "@app/tools/SingleLargePage";
@@ -72,8 +72,8 @@ import { changePermissionsOperationConfig } from "@app/hooks/tools/changePermiss
 import { certSignOperationConfig } from "@app/hooks/tools/certSign/useCertSignOperation";
 import { timestampPdfOperationConfig } from "@app/hooks/tools/timestampPdf/useTimestampPdfOperation";
 import { bookletImpositionOperationConfig } from "@app/hooks/tools/bookletImposition/useBookletImpositionOperation";
-import { mergeOperationConfig } from '@app/hooks/tools/merge/useMergeOperation';
-import { editTableOfContentsOperationConfig } from '@app/hooks/tools/editTableOfContents/useEditTableOfContentsOperation';
+import { mergeOperationConfig } from "@app/hooks/tools/merge/useMergeOperation";
+import { editTableOfContentsOperationConfig } from "@app/hooks/tools/editTableOfContents/useEditTableOfContentsOperation";
 import { autoRenameOperationConfig } from "@app/hooks/tools/autoRename/useAutoRenameOperation";
 import { flattenOperationConfig } from "@app/hooks/tools/flatten/useFlattenOperation";
 import { redactOperationConfig } from "@app/hooks/tools/redact/useRedactOperation";
@@ -91,7 +91,7 @@ import { adjustPageScaleOperationConfig } from "@app/hooks/tools/adjustPageScale
 import { scannerImageSplitOperationConfig } from "@app/hooks/tools/scannerImageSplit/useScannerImageSplitOperation";
 import { addPageNumbersOperationConfig } from "@app/components/tools/addPageNumbers/useAddPageNumbersOperation";
 import { extractPagesOperationConfig } from "@app/hooks/tools/extractPages/useExtractPagesOperation";
-import { ENDPOINTS as SPLIT_ENDPOINT_NAMES } from '@app/constants/splitConstants';
+import { ENDPOINTS as SPLIT_ENDPOINT_NAMES } from "@app/constants/splitConstants";
 import CompressSettings from "@app/components/tools/compress/CompressSettings";
 import AddPasswordSettings from "@app/components/tools/addPassword/AddPasswordSettings";
 import RemovePasswordSettings from "@app/components/tools/removePassword/RemovePasswordSettings";
@@ -109,7 +109,7 @@ import ReplaceColor from "@app/tools/ReplaceColor";
 import ScannerImageSplit from "@app/tools/ScannerImageSplit";
 import OverlayPdfs from "@app/tools/OverlayPdfs";
 import { ToolId } from "@app/types/toolId";
-import MergeSettings from '@app/components/tools/merge/MergeSettings';
+import MergeSettings from "@app/components/tools/merge/MergeSettings";
 import AdjustPageScaleSettings from "@app/components/tools/adjustPageScale/AdjustPageScaleSettings";
 import ScannerImageSplitSettings from "@app/components/tools/scannerImageSplit/ScannerImageSplitSettings";
 import ChangeMetadataSingleStep from "@app/components/tools/changeMetadata/ChangeMetadataSingleStep";
@@ -138,8 +138,6 @@ import Automate from "@app/tools/Automate";
 import Compare from "@app/tools/Compare";
 import { CONVERT_SUPPORTED_FORMATS } from "@app/constants/convertSupportedFornats";
 
-
-
 export interface TranslatedToolCatalog {
   allTools: ToolRegistry;
   regularTools: RegularToolRegistry;
@@ -163,7 +161,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         component: PdfTextEditor,
         description: t(
           "home.pdfTextEditor.desc",
-          "Review and edit text and images in PDFs with grouped text editing and PDF regeneration"
+          "Review and edit text and images in PDFs with grouped text editing and PDF regeneration",
         ),
         categoryId: ToolCategoryId.RECOMMENDED_TOOLS,
         subcategoryId: SubcategoryId.GENERAL,
@@ -186,7 +184,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         endpoints: ["multi-tool"],
         synonyms: getSynonyms(t, "multiTool"),
         supportsAutomate: false,
-        automationSettings: null
+        automationSettings: null,
       },
       merge: {
         icon: <LocalIcon icon="library-add-rounded" width="1.5rem" height="1.5rem" />,
@@ -199,7 +197,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         endpoints: ["merge-pdfs"],
         operationConfig: mergeOperationConfig,
         automationSettings: MergeSettings,
-        synonyms: getSynonyms(t, "merge")
+        synonyms: getSynonyms(t, "merge"),
       },
       // Signing
       certSign: {
@@ -243,42 +241,42 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
       },
       addText: {
         icon: <LocalIcon icon="text-fields-rounded" width="1.5rem" height="1.5rem" />,
-        name: t('home.addText.title', 'Add Text'),
+        name: t("home.addText.title", "Add Text"),
         component: AddText,
-        description: t('home.addText.desc', 'Add custom text anywhere in your PDF'),
+        description: t("home.addText.desc", "Add custom text anywhere in your PDF"),
         categoryId: ToolCategoryId.STANDARD_TOOLS,
         subcategoryId: SubcategoryId.GENERAL,
         endpoints: ["sign"],
         operationConfig: signOperationConfig,
         automationSettings: null,
-        synonyms: getSynonyms(t, 'addText'),
+        synonyms: getSynonyms(t, "addText"),
         supportsAutomate: false,
       },
       addImage: {
         icon: <LocalIcon icon="image-rounded" width="1.5rem" height="1.5rem" />,
-        name: t('home.addImage.title', 'Add Image'),
+        name: t("home.addImage.title", "Add Image"),
         component: AddImage,
-        description: t('home.addImage.desc', 'Add images anywhere in your PDF'),
+        description: t("home.addImage.desc", "Add images anywhere in your PDF"),
         categoryId: ToolCategoryId.STANDARD_TOOLS,
         subcategoryId: SubcategoryId.GENERAL,
         endpoints: ["add-image"],
         operationConfig: signOperationConfig,
         automationSettings: null,
-        synonyms: getSynonyms(t, 'addImage'),
+        synonyms: getSynonyms(t, "addImage"),
         supportsAutomate: false,
       },
       annotate: {
         icon: <LocalIcon icon="edit" width="1.5rem" height="1.5rem" />,
-        name: t('home.annotate.title', 'Annotate'),
+        name: t("home.annotate.title", "Annotate"),
         component: Annotate,
-        description: t('home.annotate.desc', 'Highlight, draw, add notes, and shapes directly in the viewer'),
+        description: t("home.annotate.desc", "Highlight, draw, add notes, and shapes directly in the viewer"),
         categoryId: ToolCategoryId.STANDARD_TOOLS,
         subcategoryId: SubcategoryId.GENERAL,
-        workbench: 'viewer',
+        workbench: "viewer",
         endpoints: ["view-pdf"],
         operationConfig: signOperationConfig,
         automationSettings: null,
-        synonyms: getSynonyms(t, 'annotate'),
+        synonyms: getSynonyms(t, "annotate"),
         supportsAutomate: false,
       },
 
@@ -295,8 +293,8 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         endpoints: ["add-password"],
         operationConfig: addPasswordOperationConfig,
         automationSettings: AddPasswordSettings,
-        synonyms: getSynonyms(t, "addPassword")
-     },
+        synonyms: getSynonyms(t, "addPassword"),
+      },
       watermark: {
         icon: <LocalIcon icon="branding-watermark-outline-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.watermark.title", "Add Watermark"),
@@ -308,7 +306,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         endpoints: ["add-watermark"],
         operationConfig: addWatermarkOperationConfig,
         automationSettings: AddWatermarkSingleStepSettings,
-        synonyms: getSynonyms(t, "watermark")
+        synonyms: getSynonyms(t, "watermark"),
       },
       addStamp: {
         icon: <LocalIcon icon="approval-rounded" width="1.5rem" height="1.5rem" />,
@@ -334,7 +332,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         endpoints: ["sanitize-pdf"],
         operationConfig: sanitizeOperationConfig,
         automationSettings: SanitizeSettings,
-        synonyms: getSynonyms(t, "sanitize")
+        synonyms: getSynonyms(t, "sanitize"),
       },
       flatten: {
         icon: <LocalIcon icon="layers-clear-rounded" width="1.5rem" height="1.5rem" />,
@@ -347,7 +345,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         endpoints: ["flatten"],
         operationConfig: flattenOperationConfig,
         automationSettings: FlattenSettings,
-        synonyms: getSynonyms(t, "flatten")
+        synonyms: getSynonyms(t, "flatten"),
       },
       unlockPDFForms: {
         icon: <LocalIcon icon="preview-off-rounded" width="1.5rem" height="1.5rem" />,
@@ -360,20 +358,20 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         endpoints: ["unlock-pdf-forms"],
         operationConfig: unlockPdfFormsOperationConfig,
         synonyms: getSynonyms(t, "unlockPDFForms"),
-        automationSettings: null
+        automationSettings: null,
       },
       formFill: {
         icon: <LocalIcon icon="text-fields-rounded" width="1.5rem" height="1.5rem" />,
-        name: t('home.formFill.title', 'Fill Form'),
+        name: t("home.formFill.title", "Fill Form"),
         component: FormFill,
-        description: t('home.formFill.desc', 'Fill PDF form fields interactively with a visual editor'),
+        description: t("home.formFill.desc", "Fill PDF form fields interactively with a visual editor"),
         categoryId: ToolCategoryId.STANDARD_TOOLS,
         subcategoryId: SubcategoryId.GENERAL,
-        workbench: 'viewer' as const,
-        endpoints: ['form-fill'],
+        workbench: "viewer" as const,
+        endpoints: ["form-fill"],
         automationSettings: null,
         supportsAutomate: false,
-        synonyms: ['form', 'fill', 'fillable', 'input', 'field', 'acroform'],
+        synonyms: ["form", "fill", "fillable", "input", "field", "acroform"],
       },
       changePermissions: {
         icon: <LocalIcon icon="lock-outline" width="1.5rem" height="1.5rem" />,
@@ -411,7 +409,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         maxFiles: -1,
         endpoints: ["validate-signature"],
         synonyms: getSynonyms(t, "validateSignature"),
-        automationSettings: null
+        automationSettings: null,
       },
 
       // Document Review
@@ -423,14 +421,14 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         workbench: "viewer",
         description: t(
           "home.read.desc",
-          "View and annotate PDFs. Highlight text, draw, or insert comments for review and collaboration."
+          "View and annotate PDFs. Highlight text, draw, or insert comments for review and collaboration.",
         ),
         categoryId: ToolCategoryId.STANDARD_TOOLS,
         subcategoryId: SubcategoryId.DOCUMENT_REVIEW,
         endpoints: ["view-pdf"],
         synonyms: getSynonyms(t, "read"),
         supportsAutomate: false,
-        automationSettings: null
+        automationSettings: null,
       },
       changeMetadata: {
         icon: <LocalIcon icon="assignment-rounded" width="1.5rem" height="1.5rem" />,
@@ -443,16 +441,13 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         endpoints: ["update-metadata"],
         operationConfig: changeMetadataOperationConfig,
         automationSettings: ChangeMetadataSingleStep,
-        synonyms: getSynonyms(t, "changeMetadata")
+        synonyms: getSynonyms(t, "changeMetadata"),
       },
       editTableOfContents: {
         icon: <LocalIcon icon="toc-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.editTableOfContents.title", "Edit Table of Contents"),
         component: EditTableOfContents,
-        description: t(
-          "home.editTableOfContents.desc",
-          "Add or edit bookmarks and table of contents in PDF documents"
-        ),
+        description: t("home.editTableOfContents.desc", "Add or edit bookmarks and table of contents in PDF documents"),
         categoryId: ToolCategoryId.STANDARD_TOOLS,
         subcategoryId: SubcategoryId.DOCUMENT_REVIEW,
         maxFiles: 1,
@@ -487,7 +482,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         endpoints: ["rotate-pdf"],
         operationConfig: rotateOperationConfig,
         automationSettings: RotateAutomationSettings,
-        synonyms: getSynonyms(t, "rotate")
+        synonyms: getSynonyms(t, "rotate"),
       },
       split: {
         icon: <LocalIcon icon="content-cut-rounded" width="1.5rem" height="1.5rem" />,
@@ -499,7 +494,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         endpoints: Array.from(new Set(Object.values(SPLIT_ENDPOINT_NAMES))),
         operationConfig: splitOperationConfig,
         automationSettings: SplitAutomationSettings,
-        synonyms: getSynonyms(t, "split")
+        synonyms: getSynonyms(t, "split"),
       },
       reorganizePages: {
         icon: <LocalIcon icon="move-down-rounded" width="1.5rem" height="1.5rem" />,
@@ -507,15 +502,14 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         component: ReorganizePages,
         description: t(
           "home.reorganizePages.desc",
-          "Rearrange, duplicate, or delete PDF pages with visual drag-and-drop control."
+          "Rearrange, duplicate, or delete PDF pages with visual drag-and-drop control.",
         ),
         categoryId: ToolCategoryId.STANDARD_TOOLS,
         subcategoryId: SubcategoryId.PAGE_FORMATTING,
         endpoints: ["rearrange-pages"],
         operationConfig: reorganizePagesOperationConfig,
         synonyms: getSynonyms(t, "reorganizePages"),
-        automationSettings: null
-
+        automationSettings: null,
       },
       scalePages: {
         icon: <LocalIcon icon="crop-free-rounded" width="1.5rem" height="1.5rem" />,
@@ -528,7 +522,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         endpoints: ["scale-pages"],
         operationConfig: adjustPageScaleOperationConfig,
         automationSettings: AdjustPageScaleSettings,
-        synonyms: getSynonyms(t, "scalePages")
+        synonyms: getSynonyms(t, "scalePages"),
       },
       addPageNumbers: {
         icon: <LocalIcon icon="123-rounded" width="1.5rem" height="1.5rem" />,
@@ -541,7 +535,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         maxFiles: -1,
         endpoints: ["add-page-numbers"],
         operationConfig: addPageNumbersOperationConfig,
-        synonyms: getSynonyms(t, "addPageNumbers")
+        synonyms: getSynonyms(t, "addPageNumbers"),
       },
       pageLayout: {
         icon: <LocalIcon icon="dashboard-rounded" width="1.5rem" height="1.5rem" />,
@@ -553,7 +547,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         maxFiles: -1,
         endpoints: ["multi-page-layout"],
         automationSettings: PageLayoutSettings,
-        synonyms: getSynonyms(t, "pageLayout")
+        synonyms: getSynonyms(t, "pageLayout"),
       },
       bookletImposition: {
         icon: <LocalIcon icon="menu-book-rounded" width="1.5rem" height="1.5rem" />,
@@ -561,13 +555,15 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         component: BookletImposition,
         operationConfig: bookletImpositionOperationConfig,
         automationSettings: BookletImpositionSettings,
-        description: t("home.bookletImposition.desc", "Create booklets with proper page ordering and multi-page layout for printing and binding"),
+        description: t(
+          "home.bookletImposition.desc",
+          "Create booklets with proper page ordering and multi-page layout for printing and binding",
+        ),
         categoryId: ToolCategoryId.STANDARD_TOOLS,
         subcategoryId: SubcategoryId.PAGE_FORMATTING,
         endpoints: ["booklet-imposition"],
       },
       pdfToSinglePage: {
-
         icon: <LocalIcon icon="looks-one-outline-rounded" width="1.5rem" height="1.5rem" />,
         name: t("home.pdfToSinglePage.title", "PDF to Single Large Page"),
         component: SingleLargePage,
@@ -620,7 +616,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         endpoints: ["extract-images"],
         operationConfig: extractImagesOperationConfig,
         automationSettings: ExtractImagesSettings,
-        synonyms: getSynonyms(t, "extractImages")
+        synonyms: getSynonyms(t, "extractImages"),
       },
 
       // Removal
@@ -662,7 +658,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         endpoints: ["remove-annotations"],
         operationConfig: removeAnnotationsOperationConfig,
         automationSettings: null,
-        synonyms: getSynonyms(t, "removeAnnotations")
+        synonyms: getSynonyms(t, "removeAnnotations"),
       },
       removeImage: {
         icon: <LocalIcon icon="remove-selection-rounded" width="1.5rem" height="1.5rem" />,
@@ -688,7 +684,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         maxFiles: -1,
         operationConfig: removePasswordOperationConfig,
         automationSettings: RemovePasswordSettings,
-        synonyms: getSynonyms(t, "removePassword")
+        synonyms: getSynonyms(t, "removePassword"),
       },
       removeCertSign: {
         icon: <LocalIcon icon="remove-moderator-outline-rounded" width="1.5rem" height="1.5rem" />,
@@ -712,7 +708,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         component: Automate,
         description: t(
           "home.automate.desc",
-          "Build multi-step workflows by chaining together PDF actions. Ideal for recurring tasks."
+          "Build multi-step workflows by chaining together PDF actions. Ideal for recurring tasks.",
         ),
         categoryId: ToolCategoryId.ADVANCED_TOOLS,
         subcategoryId: SubcategoryId.AUTOMATION,
@@ -762,7 +758,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         endpoints: ["repair"],
         operationConfig: repairOperationConfig,
         synonyms: getSynonyms(t, "repair"),
-        automationSettings: null
+        automationSettings: null,
       },
       scannerImageSplit: {
         icon: <LocalIcon icon="scanner-rounded" width="1.5rem" height="1.5rem" />,
@@ -787,7 +783,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         endpoints: ["overlay-pdf"],
         operationConfig: overlayPdfsOperationConfig,
         synonyms: getSynonyms(t, "overlay-pdfs"),
-        automationSettings: OverlayPdfsSettings
+        automationSettings: OverlayPdfsSettings,
       },
       replaceColor: {
         icon: <LocalIcon icon="format-color-fill-rounded" width="1.5rem" height="1.5rem" />,
@@ -811,7 +807,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         subcategoryId: SubcategoryId.ADVANCED_FORMATTING,
         endpoints: ["scanner-effect"],
         synonyms: getSynonyms(t, "scannerEffect"),
-        automationSettings: null
+        automationSettings: null,
       },
 
       // Developer Tools
@@ -827,7 +823,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         endpoints: ["show-javascript"],
         synonyms: getSynonyms(t, "showJS"),
         supportsAutomate: false,
-        automationSettings: null
+        automationSettings: null,
       },
       devApi: {
         icon: <LocalIcon icon="open-in-new-rounded" width="1.5rem" height="1.5rem" style={{ color: "#2F7BF6" }} />,
@@ -840,7 +836,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         endpoints: ["dev-api-docs"],
         synonyms: getSynonyms(t, "devApi"),
         supportsAutomate: false,
-        automationSettings: null
+        automationSettings: null,
       },
       devFolderScanning: {
         icon: <LocalIcon icon="open-in-new-rounded" width="1.5rem" height="1.5rem" style={{ color: "#2F7BF6" }} />,
@@ -853,7 +849,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         endpoints: ["dev-folder-scanning-docs"],
         synonyms: getSynonyms(t, "devFolderScanning"),
         supportsAutomate: false,
-        automationSettings: null
+        automationSettings: null,
       },
       devSsoGuide: {
         icon: <LocalIcon icon="open-in-new-rounded" width="1.5rem" height="1.5rem" style={{ color: "#2F7BF6" }} />,
@@ -866,7 +862,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         endpoints: ["dev-sso-guide-docs"],
         synonyms: getSynonyms(t, "devSsoGuide"),
         supportsAutomate: false,
-        automationSettings: null
+        automationSettings: null,
       },
       devAirgapped: {
         icon: <LocalIcon icon="open-in-new-rounded" width="1.5rem" height="1.5rem" style={{ color: "#2F7BF6" }} />,
@@ -879,7 +875,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         endpoints: ["dev-airgapped-docs"],
         synonyms: getSynonyms(t, "devAirgapped"),
         supportsAutomate: false,
-        automationSettings: null
+        automationSettings: null,
       },
 
       // Recommended Tools
@@ -895,7 +891,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         operationConfig: undefined,
         automationSettings: null,
         synonyms: getSynonyms(t, "compare"),
-        supportsAutomate: false
+        supportsAutomate: false,
       },
       compress: {
         icon: <LocalIcon icon="zoom-in-map-rounded" width="1.5rem" height="1.5rem" />,
@@ -908,7 +904,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         endpoints: ["compress-pdf"],
         operationConfig: compressOperationConfig,
         automationSettings: CompressSettings,
-        synonyms: getSynonyms(t, "compress")
+        synonyms: getSynonyms(t, "compress"),
       },
       convert: {
         icon: <LocalIcon icon="sync-alt-rounded" width="1.5rem" height="1.5rem" />,
@@ -940,7 +936,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
 
         operationConfig: convertOperationConfig,
         automationSettings: ConvertSettings,
-        synonyms: getSynonyms(t, "convert")
+        synonyms: getSynonyms(t, "convert"),
       },
 
       ocr: {
@@ -954,7 +950,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         endpoints: ["ocr-pdf"],
         operationConfig: ocrOperationConfig,
         automationSettings: OCRSettings,
-        synonyms: getSynonyms(t, "ocr")
+        synonyms: getSynonyms(t, "ocr"),
       },
       redact: {
         icon: <LocalIcon icon="visibility-off-rounded" width="1.5rem" height="1.5rem" />,
@@ -967,7 +963,7 @@ export function useTranslatedToolCatalog(): TranslatedToolCatalog {
         endpoints: ["auto-redact"],
         operationConfig: redactOperationConfig,
         automationSettings: RedactSingleStepSettings,
-        synonyms: getSynonyms(t, "redact")
+        synonyms: getSynonyms(t, "redact"),
       },
     };
 
diff --git a/frontend/src/core/env.test.ts b/frontend/src/core/env.test.ts
index 794f0551b4..64555dfd83 100644
--- a/frontend/src/core/env.test.ts
+++ b/frontend/src/core/env.test.ts
@@ -1,16 +1,16 @@
-import { readFileSync, readdirSync, statSync } from 'fs';
-import { join, extname } from 'path';
-import { fileURLToPath } from 'url';
-import { describe, it, expect } from 'vitest';
+import { readFileSync, readdirSync, statSync } from "fs";
+import { join, extname } from "path";
+import { fileURLToPath } from "url";
+import { describe, it, expect } from "vitest";
 
 // frontend/ root — this file lives at src/core/env.test.ts
-const frontendRoot = join(fileURLToPath(import.meta.url), '../../..');
+const frontendRoot = join(fileURLToPath(import.meta.url), "../../..");
 
 function parseEnvKeys(content: string): Set<string> {
   const keys = new Set<string>();
-  for (const line of content.split('\n')) {
+  for (const line of content.split("\n")) {
     const trimmed = line.trim();
-    if (trimmed && !trimmed.startsWith('#')) {
+    if (trimmed && !trimmed.startsWith("#")) {
       const match = trimmed.match(/^([A-Z_][A-Z0-9_]*)=/);
       if (match) keys.add(match[1]);
     }
@@ -23,9 +23,9 @@ function collectSourceFiles(dir: string): string[] {
   for (const entry of readdirSync(dir)) {
     const fullPath = join(dir, entry);
     const stat = statSync(fullPath);
-    if (stat.isDirectory() && entry !== 'node_modules' && entry !== 'assets') {
+    if (stat.isDirectory() && entry !== "node_modules" && entry !== "assets") {
       files.push(...collectSourceFiles(fullPath));
-    } else if (stat.isFile() && (extname(entry) === '.ts' || extname(entry) === '.tsx') && !entry.endsWith('.d.ts')) {
+    } else if (stat.isFile() && (extname(entry) === ".ts" || extname(entry) === ".tsx") && !entry.endsWith(".d.ts")) {
       files.push(fullPath);
     }
   }
@@ -35,7 +35,7 @@ function collectSourceFiles(dir: string): string[] {
 function findViteEnvVars(srcDir: string): Set<string> {
   const vars = new Set<string>();
   for (const file of collectSourceFiles(srcDir)) {
-    const content = readFileSync(file, 'utf-8');
+    const content = readFileSync(file, "utf-8");
     for (const match of content.matchAll(/import\.meta\.env\.(VITE_\w+)/g)) {
       vars.add(match[1]);
     }
@@ -43,16 +43,16 @@ function findViteEnvVars(srcDir: string): Set<string> {
   return vars;
 }
 
-describe('env vars', () => {
-  it('every VITE_ var used in source is present in an example env file', () => {
-    const baseEnv = readFileSync(join(frontendRoot, 'config/.env.example'), 'utf-8');
-    const desktopEnv = readFileSync(join(frontendRoot, 'config/.env.desktop.example'), 'utf-8');
-    const saasEnv = readFileSync(join(frontendRoot, 'config/.env.saas.example'), 'utf-8');
+describe("env vars", () => {
+  it("every VITE_ var used in source is present in an example env file", () => {
+    const baseEnv = readFileSync(join(frontendRoot, "config/.env.example"), "utf-8");
+    const desktopEnv = readFileSync(join(frontendRoot, "config/.env.desktop.example"), "utf-8");
+    const saasEnv = readFileSync(join(frontendRoot, "config/.env.saas.example"), "utf-8");
 
     const exampleKeys = new Set([...parseEnvKeys(baseEnv), ...parseEnvKeys(desktopEnv), ...parseEnvKeys(saasEnv)]);
-    const sourceVars = findViteEnvVars(join(frontendRoot, 'src'));
+    const sourceVars = findViteEnvVars(join(frontendRoot, "src"));
 
-    const missing = [...sourceVars].filter(v => !exampleKeys.has(v));
-    expect(missing, `Missing from 'frontend/config/.env.example' files: ${missing.join(', ')}`).toHaveLength(0);
+    const missing = [...sourceVars].filter((v) => !exampleKeys.has(v));
+    expect(missing, `Missing from 'frontend/config/.env.example' files: ${missing.join(", ")}`).toHaveLength(0);
   });
 });
diff --git a/frontend/src/core/extensions/accountLogout.ts b/frontend/src/core/extensions/accountLogout.ts
index dba0114574..9afda2918c 100644
--- a/frontend/src/core/extensions/accountLogout.ts
+++ b/frontend/src/core/extensions/accountLogout.ts
@@ -12,8 +12,8 @@ interface AccountLogoutDeps {
 export function useAccountLogout() {
   return async ({ signOut, redirectToLogin }: AccountLogoutDeps): Promise<void> => {
     try {
-      if (typeof window !== 'undefined') {
-        window.sessionStorage.setItem('stirling_sso_auto_login_logged_out', '1');
+      if (typeof window !== "undefined") {
+        window.sessionStorage.setItem("stirling_sso_auto_login_logged_out", "1");
       }
       await signOut();
     } finally {
diff --git a/frontend/src/core/hooks/signing/useSigningSessions.ts b/frontend/src/core/hooks/signing/useSigningSessions.ts
index 8f049d6a1d..afe11e3c1c 100644
--- a/frontend/src/core/hooks/signing/useSigningSessions.ts
+++ b/frontend/src/core/hooks/signing/useSigningSessions.ts
@@ -1,8 +1,8 @@
-import { useState, useCallback, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import apiClient from '@app/services/apiClient';
-import { alert } from '@app/components/toast';
-import { SignRequestSummary, SessionSummary } from '@app/types/signingSession';
+import { useState, useCallback, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import apiClient from "@app/services/apiClient";
+import { alert } from "@app/components/toast";
+import { SignRequestSummary, SessionSummary } from "@app/types/signingSession";
 
 export interface UseSigningSessionsOptions {
   enabled?: boolean;
@@ -21,9 +21,7 @@ export interface UseSigningSessionsResult {
  * Hook to fetch signing sessions data (sign requests and user's sessions).
  * Supports auto-refresh for real-time updates.
  */
-export const useSigningSessions = (
-  options: UseSigningSessionsOptions = {}
-): UseSigningSessionsResult => {
+export const useSigningSessions = (options: UseSigningSessionsOptions = {}): UseSigningSessionsResult => {
   const { enabled = true, autoRefreshInterval = 0 } = options;
   const { t } = useTranslation();
 
@@ -40,21 +38,21 @@ export const useSigningSessions = (
 
     try {
       const [requestsResponse, sessionsResponse] = await Promise.all([
-        apiClient.get<SignRequestSummary[]>('/api/v1/security/cert-sign/sign-requests'),
-        apiClient.get<SessionSummary[]>('/api/v1/security/cert-sign/sessions'),
+        apiClient.get<SignRequestSummary[]>("/api/v1/security/cert-sign/sign-requests"),
+        apiClient.get<SessionSummary[]>("/api/v1/security/cert-sign/sessions"),
       ]);
 
       setSignRequests(requestsResponse.data);
       setMySessions(sessionsResponse.data);
     } catch (err) {
-      const errorObj = err instanceof Error ? err : new Error('Failed to fetch signing data');
+      const errorObj = err instanceof Error ? err : new Error("Failed to fetch signing data");
       setError(errorObj);
-      console.error('Failed to fetch signing data:', err);
+      console.error("Failed to fetch signing data:", err);
 
       alert({
-        alertType: 'warning',
-        title: t('common.error'),
-        body: t('certSign.fetchFailed', 'Failed to load signing data'),
+        alertType: "warning",
+        title: t("common.error"),
+        body: t("certSign.fetchFailed", "Failed to load signing data"),
         expandable: false,
         durationMs: 2500,
       });
diff --git a/frontend/src/core/hooks/signing/useSigningWorkbench.ts b/frontend/src/core/hooks/signing/useSigningWorkbench.ts
index 63a6e8b3bc..3a6dae5481 100644
--- a/frontend/src/core/hooks/signing/useSigningWorkbench.ts
+++ b/frontend/src/core/hooks/signing/useSigningWorkbench.ts
@@ -1,8 +1,8 @@
-import { useEffect, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
-import SignRequestWorkbenchView from '@app/components/tools/certSign/SignRequestWorkbenchView';
-import SessionDetailWorkbenchView from '@app/components/tools/certSign/SessionDetailWorkbenchView';
+import { useEffect, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
+import SignRequestWorkbenchView from "@app/components/tools/certSign/SignRequestWorkbenchView";
+import SessionDetailWorkbenchView from "@app/components/tools/certSign/SessionDetailWorkbenchView";
 
 export interface WorkbenchRegistration {
   id: string;
@@ -28,30 +28,27 @@ export interface UseSigningWorkbenchResult {
  */
 export const useSigningWorkbench = (): UseSigningWorkbenchResult => {
   const { t } = useTranslation();
-  const {
-    registerCustomWorkbenchView,
-    unregisterCustomWorkbenchView,
-  } = useToolWorkflow();
+  const { registerCustomWorkbenchView, unregisterCustomWorkbenchView } = useToolWorkflow();
 
   // Define workbench IDs as constants
-  const SIGN_REQUEST_WORKBENCH_ID = 'signRequestWorkbench';
-  const SIGN_REQUEST_WORKBENCH_TYPE = 'custom:signRequestWorkbench' as const;
-  const SESSION_DETAIL_WORKBENCH_ID = 'sessionDetailWorkbench';
-  const SESSION_DETAIL_WORKBENCH_TYPE = 'custom:sessionDetailWorkbench' as const;
+  const SIGN_REQUEST_WORKBENCH_ID = "signRequestWorkbench";
+  const SIGN_REQUEST_WORKBENCH_TYPE = "custom:signRequestWorkbench" as const;
+  const SESSION_DETAIL_WORKBENCH_ID = "sessionDetailWorkbench";
+  const SESSION_DETAIL_WORKBENCH_TYPE = "custom:sessionDetailWorkbench" as const;
 
   // Register workbenches on mount
   useEffect(() => {
     registerCustomWorkbenchView({
       id: SIGN_REQUEST_WORKBENCH_ID,
       workbenchId: SIGN_REQUEST_WORKBENCH_TYPE,
-      label: t('certSign.collab.signRequest.workbenchTitle', 'Sign Request'),
+      label: t("certSign.collab.signRequest.workbenchTitle", "Sign Request"),
       component: SignRequestWorkbenchView,
     });
 
     registerCustomWorkbenchView({
       id: SESSION_DETAIL_WORKBENCH_ID,
       workbenchId: SESSION_DETAIL_WORKBENCH_TYPE,
-      label: t('certSign.collab.sessionDetail.workbenchTitle', 'Session Management'),
+      label: t("certSign.collab.sessionDetail.workbenchTitle", "Session Management"),
       component: SessionDetailWorkbenchView,
     });
 
@@ -72,6 +69,6 @@ export const useSigningWorkbench = (): UseSigningWorkbenchResult => {
         type: SESSION_DETAIL_WORKBENCH_TYPE,
       },
     }),
-    []
+    [],
   );
 };
diff --git a/frontend/src/core/hooks/tools/addAttachments/useAddAttachmentsOperation.ts b/frontend/src/core/hooks/tools/addAttachments/useAddAttachmentsOperation.ts
index 4614a9cbf7..bdacb3169e 100644
--- a/frontend/src/core/hooks/tools/addAttachments/useAddAttachmentsOperation.ts
+++ b/frontend/src/core/hooks/tools/addAttachments/useAddAttachmentsOperation.ts
@@ -1,7 +1,7 @@
-import { useTranslation } from 'react-i18next';
-import { useToolOperation, ToolOperationConfig, ToolType } from '@app/hooks/tools/shared/useToolOperation';
-import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
-import { AddAttachmentsParameters } from '@app/hooks/tools/addAttachments/useAddAttachmentsParameters';
+import { useTranslation } from "react-i18next";
+import { useToolOperation, ToolOperationConfig, ToolType } from "@app/hooks/tools/shared/useToolOperation";
+import { createStandardErrorHandler } from "@app/utils/toolErrorHandler";
+import { AddAttachmentsParameters } from "@app/hooks/tools/addAttachments/useAddAttachmentsParameters";
 
 const buildFormData = (parameters: AddAttachmentsParameters, file: File): FormData => {
   const formData = new FormData();
@@ -25,8 +25,8 @@ const buildFormData = (parameters: AddAttachmentsParameters, file: File): FormDa
 export const addAttachmentsOperationConfig: ToolOperationConfig<AddAttachmentsParameters> = {
   toolType: ToolType.singleFile,
   buildFormData,
-  operationType: 'addAttachments',
-  endpoint: '/api/v1/misc/add-attachments',
+  operationType: "addAttachments",
+  endpoint: "/api/v1/misc/add-attachments",
 };
 
 export const useAddAttachmentsOperation = () => {
@@ -34,6 +34,8 @@ export const useAddAttachmentsOperation = () => {
 
   return useToolOperation<AddAttachmentsParameters>({
     ...addAttachmentsOperationConfig,
-    getErrorMessage: createStandardErrorHandler(t('addAttachments.error.failed', 'An error occurred while adding attachments to the PDF.'))
+    getErrorMessage: createStandardErrorHandler(
+      t("addAttachments.error.failed", "An error occurred while adding attachments to the PDF."),
+    ),
   });
 };
diff --git a/frontend/src/core/hooks/tools/addAttachments/useAddAttachmentsParameters.ts b/frontend/src/core/hooks/tools/addAttachments/useAddAttachmentsParameters.ts
index 1e66120b7c..93eb654141 100644
--- a/frontend/src/core/hooks/tools/addAttachments/useAddAttachmentsParameters.ts
+++ b/frontend/src/core/hooks/tools/addAttachments/useAddAttachmentsParameters.ts
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState } from "react";
 
 export interface AddAttachmentsParameters {
   attachments: File[];
@@ -7,17 +7,14 @@ export interface AddAttachmentsParameters {
 
 const defaultParameters: AddAttachmentsParameters = {
   attachments: [],
-  convertToPdfA3b: false
+  convertToPdfA3b: false,
 };
 
 export const useAddAttachmentsParameters = () => {
   const [parameters, setParameters] = useState<AddAttachmentsParameters>(defaultParameters);
 
-  const updateParameter = <K extends keyof AddAttachmentsParameters>(
-    key: K,
-    value: AddAttachmentsParameters[K]
-  ) => {
-    setParameters(prev => ({ ...prev, [key]: value }));
+  const updateParameter = <K extends keyof AddAttachmentsParameters>(key: K, value: AddAttachmentsParameters[K]) => {
+    setParameters((prev) => ({ ...prev, [key]: value }));
   };
 
   const resetParameters = () => {
@@ -32,7 +29,7 @@ export const useAddAttachmentsParameters = () => {
     parameters,
     updateParameter,
     resetParameters,
-    validateParameters
+    validateParameters,
   };
 };
 
diff --git a/frontend/src/core/hooks/tools/addPassword/useAddPasswordOperation.test.ts b/frontend/src/core/hooks/tools/addPassword/useAddPasswordOperation.test.ts
index 7a1b1753ea..560c453c0f 100644
--- a/frontend/src/core/hooks/tools/addPassword/useAddPasswordOperation.test.ts
+++ b/frontend/src/core/hooks/tools/addPassword/useAddPasswordOperation.test.ts
@@ -1,45 +1,50 @@
-import { describe, expect, test, vi, beforeEach } from 'vitest';
-import { renderHook } from '@testing-library/react';
-import { useAddPasswordOperation } from '@app/hooks/tools/addPassword/useAddPasswordOperation';
-import type { AddPasswordFullParameters } from '@app/hooks/tools/addPassword/useAddPasswordParameters';
+import { describe, expect, test, vi, beforeEach } from "vitest";
+import { renderHook } from "@testing-library/react";
+import { useAddPasswordOperation } from "@app/hooks/tools/addPassword/useAddPasswordOperation";
+import type { AddPasswordFullParameters } from "@app/hooks/tools/addPassword/useAddPasswordParameters";
 
 // Mock the useToolOperation hook
-vi.mock('../shared/useToolOperation', async () => {
-  const actual = await vi.importActual('../shared/useToolOperation');  // Need to keep ToolType etc.
+vi.mock("../shared/useToolOperation", async () => {
+  const actual = await vi.importActual("../shared/useToolOperation"); // Need to keep ToolType etc.
   return {
     ...actual,
-    useToolOperation: vi.fn()
+    useToolOperation: vi.fn(),
   };
 });
 
 // Mock the translation hook
 const mockT = vi.fn((key: string) => `translated-${key}`);
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({ t: mockT })
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: mockT }),
 }));
 
 // Mock the error handler
-vi.mock('../../../utils/toolErrorHandler', () => ({
-  createStandardErrorHandler: vi.fn(() => 'error-handler-function')
+vi.mock("../../../utils/toolErrorHandler", () => ({
+  createStandardErrorHandler: vi.fn(() => "error-handler-function"),
 }));
 
 // Import the mocked function
-import { SingleFileToolOperationConfig, ToolOperationHook, ToolType, useToolOperation } from '@app/hooks/tools/shared/useToolOperation';
+import {
+  SingleFileToolOperationConfig,
+  ToolOperationHook,
+  ToolType,
+  useToolOperation,
+} from "@app/hooks/tools/shared/useToolOperation";
 
-
-describe('useAddPasswordOperation', () => {
+describe("useAddPasswordOperation", () => {
   const mockUseToolOperation = vi.mocked(useToolOperation);
 
-  const getToolConfig = () => mockUseToolOperation.mock.calls[0][0] as SingleFileToolOperationConfig<AddPasswordFullParameters>;
+  const getToolConfig = () =>
+    mockUseToolOperation.mock.calls[0][0] as SingleFileToolOperationConfig<AddPasswordFullParameters>;
 
   const mockToolOperationReturn: ToolOperationHook<unknown> = {
     files: [],
     thumbnails: [],
     downloadUrl: null,
-    downloadFilename: '',
+    downloadFilename: "",
     isLoading: false,
     errorMessage: null,
-    status: '',
+    status: "",
     isGeneratingThumbnails: false,
     progress: null,
     executeOperation: vi.fn(),
@@ -56,24 +61,24 @@ describe('useAddPasswordOperation', () => {
 
   test.each([
     {
-      description: 'with all parameters filled',
-      password: 'user-password',
-      ownerPassword: 'owner-password',
-      keyLength: 256
+      description: "with all parameters filled",
+      password: "user-password",
+      ownerPassword: "owner-password",
+      keyLength: 256,
     },
     {
-      description: 'with empty passwords',
-      password: '',
-      ownerPassword: '',
-      keyLength: 128
+      description: "with empty passwords",
+      password: "",
+      ownerPassword: "",
+      keyLength: 128,
     },
     {
-      description: 'with 40-bit key length',
-      password: 'test',
-      ownerPassword: '',
-      keyLength: 40
-    }
-  ])('should create form data correctly $description', ({ password, ownerPassword, keyLength }) => {
+      description: "with 40-bit key length",
+      password: "test",
+      ownerPassword: "",
+      keyLength: 40,
+    },
+  ])("should create form data correctly $description", ({ password, ownerPassword, keyLength }) => {
     renderHook(() => useAddPasswordOperation());
 
     const callArgs = getToolConfig();
@@ -91,36 +96,33 @@ describe('useAddPasswordOperation', () => {
         preventModify: false,
         preventModifyAnnotations: false,
         preventPrinting: false,
-        preventPrintingFaithful: false
-      }
+        preventPrintingFaithful: false,
+      },
     };
 
-    const testFile = new File(['test content'], 'test.pdf', { type: 'application/pdf' });
+    const testFile = new File(["test content"], "test.pdf", { type: "application/pdf" });
     const formData = buildFormData(testParameters, testFile);
 
     // Verify the form data contains the file
-    expect(formData.get('fileInput')).toBe(testFile);
+    expect(formData.get("fileInput")).toBe(testFile);
 
     // Verify password parameters
-    expect(formData.get('password')).toBe(password);
-    expect(formData.get('ownerPassword')).toBe(ownerPassword);
-    expect(formData.get('keyLength')).toBe(keyLength.toString());
+    expect(formData.get("password")).toBe(password);
+    expect(formData.get("ownerPassword")).toBe(ownerPassword);
+    expect(formData.get("keyLength")).toBe(keyLength.toString());
   });
 
-  test('should use correct translation for error messages', () => {
+  test("should use correct translation for error messages", () => {
     renderHook(() => useAddPasswordOperation());
 
-    expect(mockT).toHaveBeenCalledWith(
-      'addPassword.error.failed',
-      'An error occurred while encrypting the PDF.'
-    );
+    expect(mockT).toHaveBeenCalledWith("addPassword.error.failed", "An error occurred while encrypting the PDF.");
   });
 
   test.each([
-    { property: 'toolType' as const, expectedValue: ToolType.singleFile },
-    { property: 'endpoint' as const, expectedValue: '/api/v1/security/add-password' },
-    { property: 'operationType' as const, expectedValue: 'addPassword' }
-  ])('should configure $property correctly', ({ property, expectedValue }) => {
+    { property: "toolType" as const, expectedValue: ToolType.singleFile },
+    { property: "endpoint" as const, expectedValue: "/api/v1/security/add-password" },
+    { property: "operationType" as const, expectedValue: "addPassword" },
+  ])("should configure $property correctly", ({ property, expectedValue }) => {
     renderHook(() => useAddPasswordOperation());
 
     const callArgs = getToolConfig();
diff --git a/frontend/src/core/hooks/tools/addPassword/useAddPasswordOperation.ts b/frontend/src/core/hooks/tools/addPassword/useAddPasswordOperation.ts
index 7b8e003f78..09df94c791 100644
--- a/frontend/src/core/hooks/tools/addPassword/useAddPasswordOperation.ts
+++ b/frontend/src/core/hooks/tools/addPassword/useAddPasswordOperation.ts
@@ -1,9 +1,9 @@
-import { useTranslation } from 'react-i18next';
-import { ToolType, useToolOperation } from '@app/hooks/tools/shared/useToolOperation';
-import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
-import { AddPasswordFullParameters, defaultParameters } from '@app/hooks/tools/addPassword/useAddPasswordParameters';
-import { defaultParameters as permissionsDefaults } from '@app/hooks/tools/changePermissions/useChangePermissionsParameters';
-import { getFormData } from '@app/hooks/tools/changePermissions/useChangePermissionsOperation';
+import { useTranslation } from "react-i18next";
+import { ToolType, useToolOperation } from "@app/hooks/tools/shared/useToolOperation";
+import { createStandardErrorHandler } from "@app/utils/toolErrorHandler";
+import { AddPasswordFullParameters, defaultParameters } from "@app/hooks/tools/addPassword/useAddPasswordParameters";
+import { defaultParameters as permissionsDefaults } from "@app/hooks/tools/changePermissions/useChangePermissionsParameters";
+import { getFormData } from "@app/hooks/tools/changePermissions/useChangePermissionsOperation";
 
 // Static function that can be used by both the hook and automation executor
 export const buildAddPasswordFormData = (parameters: AddPasswordFullParameters, file: File): FormData => {
@@ -28,8 +28,8 @@ const fullDefaultParameters: AddPasswordFullParameters = {
 export const addPasswordOperationConfig = {
   toolType: ToolType.singleFile,
   buildFormData: buildAddPasswordFormData,
-  operationType: 'addPassword',
-  endpoint: '/api/v1/security/add-password',
+  operationType: "addPassword",
+  endpoint: "/api/v1/security/add-password",
   defaultParameters: fullDefaultParameters,
 } as const;
 
@@ -38,6 +38,6 @@ export const useAddPasswordOperation = () => {
 
   return useToolOperation<AddPasswordFullParameters>({
     ...addPasswordOperationConfig,
-    getErrorMessage: createStandardErrorHandler(t('addPassword.error.failed', 'An error occurred while encrypting the PDF.'))
+    getErrorMessage: createStandardErrorHandler(t("addPassword.error.failed", "An error occurred while encrypting the PDF.")),
   });
 };
diff --git a/frontend/src/core/hooks/tools/addPassword/useAddPasswordParameters.test.ts b/frontend/src/core/hooks/tools/addPassword/useAddPasswordParameters.test.ts
index 7c09938c57..fcbbcd2f00 100644
--- a/frontend/src/core/hooks/tools/addPassword/useAddPasswordParameters.test.ts
+++ b/frontend/src/core/hooks/tools/addPassword/useAddPasswordParameters.test.ts
@@ -1,20 +1,27 @@
-import { describe, expect, test } from 'vitest';
-import { renderHook, act } from '@testing-library/react';
-import { useAddPasswordParameters, defaultParameters, AddPasswordParametersHook } from '@app/hooks/tools/addPassword/useAddPasswordParameters';
-import { defaultParameters as defaultChangePermissionsParameters, ChangePermissionsParameters } from '@app/hooks/tools/changePermissions/useChangePermissionsParameters';
+import { describe, expect, test } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import {
+  useAddPasswordParameters,
+  defaultParameters,
+  AddPasswordParametersHook,
+} from "@app/hooks/tools/addPassword/useAddPasswordParameters";
+import {
+  defaultParameters as defaultChangePermissionsParameters,
+  ChangePermissionsParameters,
+} from "@app/hooks/tools/changePermissions/useChangePermissionsParameters";
 
-describe('useAddPasswordParameters', () => {
-  test('should initialize with default parameters', () => {
+describe("useAddPasswordParameters", () => {
+  test("should initialize with default parameters", () => {
     const { result } = renderHook(() => useAddPasswordParameters());
 
     expect(result.current.parameters).toStrictEqual(defaultParameters);
   });
 
   test.each([
-    { paramName: 'password' as const, value: 'test-password' },
-    { paramName: 'ownerPassword' as const, value: 'owner-password' },
-    { paramName: 'keyLength' as const, value: 256 }
-  ])('should update parameter $paramName', ({ paramName, value }) => {
+    { paramName: "password" as const, value: "test-password" },
+    { paramName: "ownerPassword" as const, value: "owner-password" },
+    { paramName: "keyLength" as const, value: 256 },
+  ])("should update parameter $paramName", ({ paramName, value }) => {
     const { result } = renderHook(() => useAddPasswordParameters());
 
     act(() => {
@@ -24,30 +31,30 @@ describe('useAddPasswordParameters', () => {
     expect(result.current.parameters[paramName]).toBe(value);
   });
 
-  test.each([
-    { paramName: 'preventAssembly' as const },
-    { paramName: 'preventPrinting' as const }
-  ])('should update boolean permission parameter $paramName', ({ paramName }) => {
-    const { result } = renderHook(() => useAddPasswordParameters());
+  test.each([{ paramName: "preventAssembly" as const }, { paramName: "preventPrinting" as const }])(
+    "should update boolean permission parameter $paramName",
+    ({ paramName }) => {
+      const { result } = renderHook(() => useAddPasswordParameters());
 
-    act(() => {
-      result.current.permissions.updateParameter(paramName, true);
-    });
+      act(() => {
+        result.current.permissions.updateParameter(paramName, true);
+      });
 
-    expect(result.current.permissions.parameters[paramName]).toBe(true);
-  });
+      expect(result.current.permissions.parameters[paramName]).toBe(true);
+    },
+  );
 
-  test('should reset parameters to defaults', () => {
+  test("should reset parameters to defaults", () => {
     const { result } = renderHook(() => useAddPasswordParameters());
 
     // First, change some parameters
     act(() => {
-      result.current.updateParameter('password', 'test');
-      result.current.updateParameter('keyLength', 256);
-      result.current.permissions.updateParameter('preventAssembly', true);
+      result.current.updateParameter("password", "test");
+      result.current.updateParameter("keyLength", 256);
+      result.current.permissions.updateParameter("preventAssembly", true);
     });
 
-    expect(result.current.parameters.password).toBe('test');
+    expect(result.current.parameters.password).toBe("test");
     expect(result.current.parameters.keyLength).toBe(256);
     expect(result.current.permissions.parameters.preventAssembly).toBe(true);
 
@@ -59,59 +66,59 @@ describe('useAddPasswordParameters', () => {
     expect(result.current.parameters).toStrictEqual(defaultParameters);
   });
 
-  test('should return correct endpoint name', () => {
+  test("should return correct endpoint name", () => {
     const { result } = renderHook(() => useAddPasswordParameters());
 
-    expect(result.current.getEndpointName()).toBe('add-password');
+    expect(result.current.getEndpointName()).toBe("add-password");
   });
 
   test.each([
     {
-      description: 'with user password only',
+      description: "with user password only",
       setup: (hook: AddPasswordParametersHook) => {
-        hook.updateParameter('password', 'user-password');
-      }
+        hook.updateParameter("password", "user-password");
+      },
     },
     {
-      description: 'with owner password only',
+      description: "with owner password only",
       setup: (hook: AddPasswordParametersHook) => {
-        hook.updateParameter('ownerPassword', 'owner-password');
-      }
+        hook.updateParameter("ownerPassword", "owner-password");
+      },
     },
     {
-      description: 'with both passwords',
+      description: "with both passwords",
       setup: (hook: AddPasswordParametersHook) => {
-        hook.updateParameter('password', 'user-password');
-        hook.updateParameter('ownerPassword', 'owner-password');
-      }
+        hook.updateParameter("password", "user-password");
+        hook.updateParameter("ownerPassword", "owner-password");
+      },
     },
     {
-      description: 'with whitespace only password',
+      description: "with whitespace only password",
       setup: (hook: AddPasswordParametersHook) => {
-        hook.updateParameter('password', '  \t  ');
-      }
+        hook.updateParameter("password", "  \t  ");
+      },
     },
     {
-      description: 'with whitespace only owner password',
+      description: "with whitespace only owner password",
       setup: (hook: AddPasswordParametersHook) => {
-        hook.updateParameter('ownerPassword', '  \t  ');
-      }
+        hook.updateParameter("ownerPassword", "  \t  ");
+      },
     },
     {
-      description: 'with restrictions only',
+      description: "with restrictions only",
       setup: (hook: AddPasswordParametersHook) => {
-        hook.permissions.updateParameter('preventAssembly', true);
-        hook.permissions.updateParameter('preventPrinting', true);
-      }
+        hook.permissions.updateParameter("preventAssembly", true);
+        hook.permissions.updateParameter("preventPrinting", true);
+      },
     },
     {
-      description: 'with passwords and restrictions',
+      description: "with passwords and restrictions",
       setup: (hook: AddPasswordParametersHook) => {
-        hook.updateParameter('password', 'test-password');
-        hook.permissions.updateParameter('preventAssembly', true);
-      }
-    }
-  ])('should validate parameters correctly $description', ({ setup }) => {
+        hook.updateParameter("password", "test-password");
+        hook.permissions.updateParameter("preventAssembly", true);
+      },
+    },
+  ])("should validate parameters correctly $description", ({ setup }) => {
     const { result } = renderHook(() => useAddPasswordParameters());
 
     // Default state should be valid
@@ -125,27 +132,30 @@ describe('useAddPasswordParameters', () => {
     expect(result.current.validateParameters()).toBe(true);
   });
 
-  test.each(Object.keys(defaultChangePermissionsParameters) as Array<keyof ChangePermissionsParameters>)('should handle boolean restriction parameter %s', (param) => {
+  test.each(Object.keys(defaultChangePermissionsParameters) as Array<keyof ChangePermissionsParameters>)(
+    "should handle boolean restriction parameter %s",
+    (param) => {
+      const { result } = renderHook(() => useAddPasswordParameters());
+
+      act(() => {
+        result.current.resetParameters();
+        result.current.permissions.updateParameter(param, true);
+      });
+
+      expect(result.current.validateParameters()).toBe(true);
+    },
+  );
+
+  test("should handle mixed parameter types in updateParameter", () => {
     const { result } = renderHook(() => useAddPasswordParameters());
 
     act(() => {
-      result.current.resetParameters();
-      result.current.permissions.updateParameter(param, true);
+      result.current.updateParameter("password", "test-string");
+      result.current.updateParameter("keyLength", 40);
+      result.current.permissions.updateParameter("preventAssembly", true);
     });
 
-    expect(result.current.validateParameters()).toBe(true);
-  });
-
-  test('should handle mixed parameter types in updateParameter', () => {
-    const { result } = renderHook(() => useAddPasswordParameters());
-
-    act(() => {
-      result.current.updateParameter('password', 'test-string');
-      result.current.updateParameter('keyLength', 40);
-      result.current.permissions.updateParameter('preventAssembly', true);
-    });
-
-    expect(result.current.parameters.password).toBe('test-string');
+    expect(result.current.parameters.password).toBe("test-string");
     expect(result.current.parameters.keyLength).toBe(40);
     expect(result.current.permissions.parameters.preventAssembly).toBe(true);
   });
diff --git a/frontend/src/core/hooks/tools/addPassword/useAddPasswordParameters.ts b/frontend/src/core/hooks/tools/addPassword/useAddPasswordParameters.ts
index 9c05e8f015..82744e9f54 100644
--- a/frontend/src/core/hooks/tools/addPassword/useAddPasswordParameters.ts
+++ b/frontend/src/core/hooks/tools/addPassword/useAddPasswordParameters.ts
@@ -1,6 +1,10 @@
-import { ChangePermissionsParameters, ChangePermissionsParametersHook, useChangePermissionsParameters } from '@app/hooks/tools/changePermissions/useChangePermissionsParameters';
-import { BaseParameters } from '@app/types/parameters';
-import { useBaseParameters, BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
+import {
+  ChangePermissionsParameters,
+  ChangePermissionsParametersHook,
+  useChangePermissionsParameters,
+} from "@app/hooks/tools/changePermissions/useChangePermissionsParameters";
+import { BaseParameters } from "@app/types/parameters";
+import { useBaseParameters, BaseParametersHook } from "@app/hooks/tools/shared/useBaseParameters";
 
 export interface AddPasswordParameters extends BaseParameters {
   password: string;
@@ -18,8 +22,8 @@ export interface AddPasswordParametersHook extends BaseParametersHook<AddPasswor
 }
 
 export const defaultParameters: AddPasswordParameters = {
-  password: '',
-  ownerPassword: '',
+  password: "",
+  ownerPassword: "",
   keyLength: 128,
 };
 
@@ -28,7 +32,7 @@ export const useAddPasswordParameters = (): AddPasswordParametersHook => {
 
   const baseHook = useBaseParameters({
     defaultParameters,
-    endpointName: 'add-password',
+    endpointName: "add-password",
     validateFn: () => {
       // No required parameters for Add Password. Defer to permissions validation.
       return permissions.validateParameters();
diff --git a/frontend/src/core/hooks/tools/addWatermark/useAddWatermarkOperation.ts b/frontend/src/core/hooks/tools/addWatermark/useAddWatermarkOperation.ts
index a02b95290c..4857dd7807 100644
--- a/frontend/src/core/hooks/tools/addWatermark/useAddWatermarkOperation.ts
+++ b/frontend/src/core/hooks/tools/addWatermark/useAddWatermarkOperation.ts
@@ -1,7 +1,7 @@
-import { useTranslation } from 'react-i18next';
-import { ToolType, useToolOperation } from '@app/hooks/tools/shared/useToolOperation';
-import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
-import { AddWatermarkParameters, defaultParameters } from '@app/hooks/tools/addWatermark/useAddWatermarkParameters';
+import { useTranslation } from "react-i18next";
+import { ToolType, useToolOperation } from "@app/hooks/tools/shared/useToolOperation";
+import { createStandardErrorHandler } from "@app/utils/toolErrorHandler";
+import { AddWatermarkParameters, defaultParameters } from "@app/hooks/tools/addWatermark/useAddWatermarkParameters";
 
 // Static function that can be used by both the hook and automation executor
 export const buildAddWatermarkFormData = (parameters: AddWatermarkParameters, file: File): FormData => {
@@ -12,9 +12,9 @@ export const buildAddWatermarkFormData = (parameters: AddWatermarkParameters, fi
   formData.append("watermarkType", parameters.watermarkType || "text");
 
   // Add watermark content based on type
-  if (parameters.watermarkType === 'text') {
+  if (parameters.watermarkType === "text") {
     formData.append("watermarkText", parameters.watermarkText);
-  } else if (parameters.watermarkType === 'image' && parameters.watermarkImage) {
+  } else if (parameters.watermarkType === "image" && parameters.watermarkImage) {
     formData.append("watermarkImage", parameters.watermarkImage);
   }
 
@@ -37,8 +37,8 @@ export const buildAddWatermarkFormData = (parameters: AddWatermarkParameters, fi
 export const addWatermarkOperationConfig = {
   toolType: ToolType.singleFile,
   buildFormData: buildAddWatermarkFormData,
-  operationType: 'watermark',
-  endpoint: '/api/v1/security/add-watermark',
+  operationType: "watermark",
+  endpoint: "/api/v1/security/add-watermark",
   defaultParameters,
 } as const;
 
@@ -47,6 +47,8 @@ export const useAddWatermarkOperation = () => {
 
   return useToolOperation<AddWatermarkParameters>({
     ...addWatermarkOperationConfig,
-    getErrorMessage: createStandardErrorHandler(t('watermark.error.failed', 'An error occurred while adding watermark to the PDF.'))
+    getErrorMessage: createStandardErrorHandler(
+      t("watermark.error.failed", "An error occurred while adding watermark to the PDF."),
+    ),
   });
 };
diff --git a/frontend/src/core/hooks/tools/addWatermark/useAddWatermarkParameters.ts b/frontend/src/core/hooks/tools/addWatermark/useAddWatermarkParameters.ts
index 53a89abb9b..a7435241df 100644
--- a/frontend/src/core/hooks/tools/addWatermark/useAddWatermarkParameters.ts
+++ b/frontend/src/core/hooks/tools/addWatermark/useAddWatermarkParameters.ts
@@ -1,8 +1,8 @@
-import { BaseParameters } from '@app/types/parameters';
-import { useBaseParameters, BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
+import { BaseParameters } from "@app/types/parameters";
+import { useBaseParameters, BaseParametersHook } from "@app/hooks/tools/shared/useBaseParameters";
 
 export interface AddWatermarkParameters extends BaseParameters {
-  watermarkType?: 'text' | 'image';
+  watermarkType?: "text" | "image";
   watermarkText: string;
   watermarkImage?: File;
   fontSize: number; // Used for both text size and image size
@@ -17,15 +17,15 @@ export interface AddWatermarkParameters extends BaseParameters {
 
 export const defaultParameters: AddWatermarkParameters = {
   watermarkType: undefined,
-  watermarkText: '',
+  watermarkText: "",
   fontSize: 12,
   rotation: 0,
   opacity: 50,
   widthSpacer: 50,
   heightSpacer: 50,
-  alphabet: 'roman',
-  customColor: '#d3d3d3',
-  convertPDFToImage: false
+  alphabet: "roman",
+  customColor: "#d3d3d3",
+  convertPDFToImage: false,
 };
 
 export type AddWatermarkParametersHook = BaseParametersHook<AddWatermarkParameters>;
@@ -33,12 +33,12 @@ export type AddWatermarkParametersHook = BaseParametersHook<AddWatermarkParamete
 export const useAddWatermarkParameters = (): AddWatermarkParametersHook => {
   return useBaseParameters({
     defaultParameters: defaultParameters,
-    endpointName: 'add-watermark',
+    endpointName: "add-watermark",
     validateFn: (params): boolean => {
       if (!params.watermarkType) {
         return false;
       }
-      if (params.watermarkType === 'text') {
+      if (params.watermarkType === "text") {
         return params.watermarkText.trim().length > 0;
       } else {
         return params.watermarkImage !== undefined;
@@ -46,4 +46,3 @@ export const useAddWatermarkParameters = (): AddWatermarkParametersHook => {
     },
   });
 };
-
diff --git a/frontend/src/core/hooks/tools/adjustContrast/useAdjustContrastOperation.ts b/frontend/src/core/hooks/tools/adjustContrast/useAdjustContrastOperation.ts
index fe862fb392..70a31a2086 100644
--- a/frontend/src/core/hooks/tools/adjustContrast/useAdjustContrastOperation.ts
+++ b/frontend/src/core/hooks/tools/adjustContrast/useAdjustContrastOperation.ts
@@ -1,123 +1,124 @@
-import { useTranslation } from 'react-i18next';
-import { ToolType, useToolOperation, CustomProcessorResult } from '@app/hooks/tools/shared/useToolOperation';
-import { AdjustContrastParameters, defaultParameters } from '@app/hooks/tools/adjustContrast/useAdjustContrastParameters';
-import { applyAdjustmentsToCanvas } from '@app/components/tools/adjustContrast/utils';
-import { pdfWorkerManager } from '@app/services/pdfWorkerManager';
-import { createFileFromApiResponse } from '@app/utils/fileResponseUtils';
-import {
-  getPdfiumModule,
-  saveRawDocument,
-} from '@app/services/pdfiumService';
-import { copyRgbaToBgraHeap } from '@app/utils/pdfiumBitmapUtils';
+import { useTranslation } from "react-i18next";
+import { ToolType, useToolOperation, CustomProcessorResult } from "@app/hooks/tools/shared/useToolOperation";
+import { AdjustContrastParameters, defaultParameters } from "@app/hooks/tools/adjustContrast/useAdjustContrastParameters";
+import { applyAdjustmentsToCanvas } from "@app/components/tools/adjustContrast/utils";
+import { pdfWorkerManager } from "@app/services/pdfWorkerManager";
+import { createFileFromApiResponse } from "@app/utils/fileResponseUtils";
+import { getPdfiumModule, saveRawDocument } from "@app/services/pdfiumService";
+import { copyRgbaToBgraHeap } from "@app/utils/pdfiumBitmapUtils";
 
 async function renderPdfPageToCanvas(pdf: any, pageNumber: number, scale: number): Promise<HTMLCanvasElement> {
   const page = await pdf.getPage(pageNumber);
   const viewport = page.getViewport({ scale });
-  const canvas = document.createElement('canvas');
+  const canvas = document.createElement("canvas");
   canvas.width = viewport.width;
   canvas.height = viewport.height;
-  const ctx = canvas.getContext('2d');
-  if (!ctx) throw new Error('Canvas 2D context unavailable');
+  const ctx = canvas.getContext("2d");
+  if (!ctx) throw new Error("Canvas 2D context unavailable");
   await page.render({ canvasContext: ctx, viewport }).promise;
   return canvas;
 }
 
 // Render, adjust, and assemble all pages of a single PDF into a new PDF using PDFium
 async function buildAdjustedPdfForFile(file: File, params: AdjustContrastParameters): Promise<File> {
-    const m = await getPdfiumModule();
-    const arrayBuffer = await file.arrayBuffer();
-    const pdf = await pdfWorkerManager.createDocument(arrayBuffer, {});
-    const pageCount = pdf.numPages;
+  const m = await getPdfiumModule();
+  const arrayBuffer = await file.arrayBuffer();
+  const pdf = await pdfWorkerManager.createDocument(arrayBuffer, {});
+  const pageCount = pdf.numPages;
 
-    const docPtr = m.FPDF_CreateNewDocument();
-    if (!docPtr) throw new Error('PDFium: failed to create document');
+  const docPtr = m.FPDF_CreateNewDocument();
+  if (!docPtr) throw new Error("PDFium: failed to create document");
 
-    try {
-      for (let p = 1; p <= pageCount; p++) {
-        const srcCanvas = await renderPdfPageToCanvas(pdf, p, 2);
-        const adjusted = applyAdjustmentsToCanvas(srcCanvas, params);
-        const ctx = adjusted.getContext('2d');
-        if (!ctx) {
-          console.warn(`[adjustContrast] Skipping page ${p}: failed to get canvas context`);
-          continue;
-        }
-
-        const imageData = ctx.getImageData(0, 0, adjusted.width, adjusted.height);
-        const imgWidth = imageData.width;
-        const imgHeight = imageData.height;
-
-        // Since we render at scale 2, the actual PDF page size is half
-        const pdfPageWidth = imgWidth / 2;
-        const pdfPageHeight = imgHeight / 2;
-
-        const pagePtr = m.FPDFPage_New(docPtr, p - 1, pdfPageWidth, pdfPageHeight);
-        if (!pagePtr) {
-          console.warn(`[adjustContrast] Skipping page ${p}: failed to create PDFium page`);
-          continue;
-        }
-
-        let bitmapPtr = 0;
-        try {
-          bitmapPtr = m.FPDFBitmap_Create(imgWidth, imgHeight, 1);
-          if (!bitmapPtr) {
-            console.warn(`[adjustContrast] Skipping page ${p}: failed to create bitmap`);
-            continue;
-          }
-
-          const bufferPtr = m.FPDFBitmap_GetBuffer(bitmapPtr);
-          const stride = m.FPDFBitmap_GetStride(bitmapPtr);
-          copyRgbaToBgraHeap(m, new Uint8Array(imageData.data.buffer), bufferPtr, imgWidth, imgHeight, stride);
-
-          const imageObjPtr = m.FPDFPageObj_NewImageObj(docPtr);
-          if (imageObjPtr) {
-            const setBitmapOk = m.FPDFImageObj_SetBitmap(pagePtr, 0, imageObjPtr, bitmapPtr);
-            if (setBitmapOk) {
-              const matrixPtr = m.pdfium.wasmExports.malloc(6 * 4);
-              try {
-                m.pdfium.setValue(matrixPtr, pdfPageWidth, 'float');
-                m.pdfium.setValue(matrixPtr + 4, 0, 'float');
-                m.pdfium.setValue(matrixPtr + 8, 0, 'float');
-                m.pdfium.setValue(matrixPtr + 12, pdfPageHeight, 'float');
-                m.pdfium.setValue(matrixPtr + 16, 0, 'float');
-                m.pdfium.setValue(matrixPtr + 20, 0, 'float');
-
-                if (m.FPDFPageObj_SetMatrix(imageObjPtr, matrixPtr)) {
-                  m.FPDFPage_InsertObject(pagePtr, imageObjPtr);
-                } else {
-                  m.FPDFPageObj_Destroy(imageObjPtr);
-                }
-              } finally {
-                m.pdfium.wasmExports.free(matrixPtr);
-              }
-            } else {
-              m.FPDFPageObj_Destroy(imageObjPtr);
-            }
-          }
-        } finally {
-          if (bitmapPtr) m.FPDFBitmap_Destroy(bitmapPtr);
-          m.FPDFPage_GenerateContent(pagePtr);
-          m.FPDF_ClosePage(pagePtr);
-        }
+  try {
+    for (let p = 1; p <= pageCount; p++) {
+      const srcCanvas = await renderPdfPageToCanvas(pdf, p, 2);
+      const adjusted = applyAdjustmentsToCanvas(srcCanvas, params);
+      const ctx = adjusted.getContext("2d");
+      if (!ctx) {
+        console.warn(`[adjustContrast] Skipping page ${p}: failed to get canvas context`);
+        continue;
       }
 
-      const pdfBytes = await saveRawDocument(docPtr);
-      const out = createFileFromApiResponse(pdfBytes, { 'content-type': 'application/pdf' }, file.name);
-      pdfWorkerManager.destroyDocument(pdf);
-      return out;
-    } finally {
-      m.FPDF_CloseDocument(docPtr);
+      const imageData = ctx.getImageData(0, 0, adjusted.width, adjusted.height);
+      const imgWidth = imageData.width;
+      const imgHeight = imageData.height;
+
+      // Since we render at scale 2, the actual PDF page size is half
+      const pdfPageWidth = imgWidth / 2;
+      const pdfPageHeight = imgHeight / 2;
+
+      const pagePtr = m.FPDFPage_New(docPtr, p - 1, pdfPageWidth, pdfPageHeight);
+      if (!pagePtr) {
+        console.warn(`[adjustContrast] Skipping page ${p}: failed to create PDFium page`);
+        continue;
+      }
+
+      let bitmapPtr = 0;
+      try {
+        bitmapPtr = m.FPDFBitmap_Create(imgWidth, imgHeight, 1);
+        if (!bitmapPtr) {
+          console.warn(`[adjustContrast] Skipping page ${p}: failed to create bitmap`);
+          continue;
+        }
+
+        const bufferPtr = m.FPDFBitmap_GetBuffer(bitmapPtr);
+        const stride = m.FPDFBitmap_GetStride(bitmapPtr);
+        copyRgbaToBgraHeap(m, new Uint8Array(imageData.data.buffer), bufferPtr, imgWidth, imgHeight, stride);
+
+        const imageObjPtr = m.FPDFPageObj_NewImageObj(docPtr);
+        if (imageObjPtr) {
+          const setBitmapOk = m.FPDFImageObj_SetBitmap(pagePtr, 0, imageObjPtr, bitmapPtr);
+          if (setBitmapOk) {
+            const matrixPtr = m.pdfium.wasmExports.malloc(6 * 4);
+            try {
+              m.pdfium.setValue(matrixPtr, pdfPageWidth, "float");
+              m.pdfium.setValue(matrixPtr + 4, 0, "float");
+              m.pdfium.setValue(matrixPtr + 8, 0, "float");
+              m.pdfium.setValue(matrixPtr + 12, pdfPageHeight, "float");
+              m.pdfium.setValue(matrixPtr + 16, 0, "float");
+              m.pdfium.setValue(matrixPtr + 20, 0, "float");
+
+              if (m.FPDFPageObj_SetMatrix(imageObjPtr, matrixPtr)) {
+                m.FPDFPage_InsertObject(pagePtr, imageObjPtr);
+              } else {
+                m.FPDFPageObj_Destroy(imageObjPtr);
+              }
+            } finally {
+              m.pdfium.wasmExports.free(matrixPtr);
+            }
+          } else {
+            m.FPDFPageObj_Destroy(imageObjPtr);
+          }
+        }
+      } finally {
+        if (bitmapPtr) m.FPDFBitmap_Destroy(bitmapPtr);
+        m.FPDFPage_GenerateContent(pagePtr);
+        m.FPDF_ClosePage(pagePtr);
+      }
     }
+
+    const pdfBytes = await saveRawDocument(docPtr);
+    const out = createFileFromApiResponse(pdfBytes, { "content-type": "application/pdf" }, file.name);
+    pdfWorkerManager.destroyDocument(pdf);
+    return out;
+  } finally {
+    m.FPDF_CloseDocument(docPtr);
+  }
 }
 
 async function processPdfClientSide(params: AdjustContrastParameters, files: File[]): Promise<CustomProcessorResult> {
   let CONCURRENCY_LIMIT = 2;
-  if (typeof navigator !== 'undefined' && typeof navigator.hardwareConcurrency === 'number') {
+  if (typeof navigator !== "undefined" && typeof navigator.hardwareConcurrency === "number") {
     if (navigator.hardwareConcurrency >= 8) CONCURRENCY_LIMIT = 4;
     else if (navigator.hardwareConcurrency >= 4) CONCURRENCY_LIMIT = 3;
   }
   CONCURRENCY_LIMIT = Math.min(CONCURRENCY_LIMIT, files.length);
 
-  const mapWithConcurrency = async <T, R>(items: T[], limit: number, worker: (item: T, index: number) => Promise<R>): Promise<R[]> => {
+  const mapWithConcurrency = async <T, R>(
+    items: T[],
+    limit: number,
+    worker: (item: T, index: number) => Promise<R>,
+  ): Promise<R[]> => {
     const results: R[] = new Array(items.length);
     let nextIndex = 0;
 
@@ -144,15 +145,15 @@ async function processPdfClientSide(params: AdjustContrastParameters, files: Fil
 export const adjustContrastOperationConfig = {
   toolType: ToolType.custom,
   customProcessor: processPdfClientSide,
-  operationType: 'adjustContrast',
+  operationType: "adjustContrast",
   defaultParameters,
-  settingsComponentPath: 'components/tools/adjustContrast/AdjustContrastSingleStepSettings',
+  settingsComponentPath: "components/tools/adjustContrast/AdjustContrastSingleStepSettings",
 } as const;
 
 export const useAdjustContrastOperation = () => {
   const { t } = useTranslation();
   return useToolOperation<AdjustContrastParameters>({
     ...adjustContrastOperationConfig,
-    getErrorMessage: () => t('adjustContrast.error.failed', 'Failed to adjust colors/contrast')
+    getErrorMessage: () => t("adjustContrast.error.failed", "Failed to adjust colors/contrast"),
   });
 };
diff --git a/frontend/src/core/hooks/tools/adjustContrast/useAdjustContrastParameters.ts b/frontend/src/core/hooks/tools/adjustContrast/useAdjustContrastParameters.ts
index 9160c0ce74..7b9d045b49 100644
--- a/frontend/src/core/hooks/tools/adjustContrast/useAdjustContrastParameters.ts
+++ b/frontend/src/core/hooks/tools/adjustContrast/useAdjustContrastParameters.ts
@@ -1,4 +1,4 @@
-import { useBaseParameters, BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
+import { useBaseParameters, BaseParametersHook } from "@app/hooks/tools/shared/useBaseParameters";
 
 export interface AdjustContrastParameters {
   contrast: number; // 0-200 (%), 100 = neutral
@@ -23,8 +23,6 @@ export type AdjustContrastParametersHook = BaseParametersHook<AdjustContrastPara
 export const useAdjustContrastParameters = (): AdjustContrastParametersHook => {
   return useBaseParameters<AdjustContrastParameters>({
     defaultParameters,
-    endpointName: '',
+    endpointName: "",
   });
 };
-
-
diff --git a/frontend/src/core/hooks/tools/adjustPageScale/useAdjustPageScaleOperation.ts b/frontend/src/core/hooks/tools/adjustPageScale/useAdjustPageScaleOperation.ts
index bf95b9854f..13323446bc 100644
--- a/frontend/src/core/hooks/tools/adjustPageScale/useAdjustPageScaleOperation.ts
+++ b/frontend/src/core/hooks/tools/adjustPageScale/useAdjustPageScaleOperation.ts
@@ -1,7 +1,7 @@
-import { useTranslation } from 'react-i18next';
-import { useToolOperation, ToolType } from '@app/hooks/tools/shared/useToolOperation';
-import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
-import { AdjustPageScaleParameters, defaultParameters } from '@app/hooks/tools/adjustPageScale/useAdjustPageScaleParameters';
+import { useTranslation } from "react-i18next";
+import { useToolOperation, ToolType } from "@app/hooks/tools/shared/useToolOperation";
+import { createStandardErrorHandler } from "@app/utils/toolErrorHandler";
+import { AdjustPageScaleParameters, defaultParameters } from "@app/hooks/tools/adjustPageScale/useAdjustPageScaleParameters";
 
 export const buildAdjustPageScaleFormData = (parameters: AdjustPageScaleParameters, file: File): FormData => {
   const formData = new FormData();
@@ -14,8 +14,8 @@ export const buildAdjustPageScaleFormData = (parameters: AdjustPageScaleParamete
 export const adjustPageScaleOperationConfig = {
   toolType: ToolType.singleFile,
   buildFormData: buildAdjustPageScaleFormData,
-  operationType: 'scalePages',
-  endpoint: '/api/v1/general/scale-pages',
+  operationType: "scalePages",
+  endpoint: "/api/v1/general/scale-pages",
   defaultParameters,
 } as const;
 
@@ -24,6 +24,8 @@ export const useAdjustPageScaleOperation = () => {
 
   return useToolOperation<AdjustPageScaleParameters>({
     ...adjustPageScaleOperationConfig,
-    getErrorMessage: createStandardErrorHandler(t('adjustPageScale.error.failed', 'An error occurred while adjusting the page scale.'))
+    getErrorMessage: createStandardErrorHandler(
+      t("adjustPageScale.error.failed", "An error occurred while adjusting the page scale."),
+    ),
   });
 };
diff --git a/frontend/src/core/hooks/tools/adjustPageScale/useAdjustPageScaleParameters.test.ts b/frontend/src/core/hooks/tools/adjustPageScale/useAdjustPageScaleParameters.test.ts
index 6fb9ef71e3..9603bfba70 100644
--- a/frontend/src/core/hooks/tools/adjustPageScale/useAdjustPageScaleParameters.test.ts
+++ b/frontend/src/core/hooks/tools/adjustPageScale/useAdjustPageScaleParameters.test.ts
@@ -1,9 +1,14 @@
-import { describe, expect, test } from 'vitest';
-import { renderHook, act } from '@testing-library/react';
-import { useAdjustPageScaleParameters, defaultParameters, PageSize, AdjustPageScaleParametersHook } from '@app/hooks/tools/adjustPageScale/useAdjustPageScaleParameters';
+import { describe, expect, test } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import {
+  useAdjustPageScaleParameters,
+  defaultParameters,
+  PageSize,
+  AdjustPageScaleParametersHook,
+} from "@app/hooks/tools/adjustPageScale/useAdjustPageScaleParameters";
 
-describe('useAdjustPageScaleParameters', () => {
-  test('should initialize with default parameters', () => {
+describe("useAdjustPageScaleParameters", () => {
+  test("should initialize with default parameters", () => {
     const { result } = renderHook(() => useAdjustPageScaleParameters());
 
     expect(result.current.parameters).toStrictEqual(defaultParameters);
@@ -12,13 +17,13 @@ describe('useAdjustPageScaleParameters', () => {
   });
 
   test.each([
-    { paramName: 'scaleFactor' as const, value: 0.5 },
-    { paramName: 'scaleFactor' as const, value: 2.0 },
-    { paramName: 'scaleFactor' as const, value: 10.0 },
-    { paramName: 'pageSize' as const, value: PageSize.A4 },
-    { paramName: 'pageSize' as const, value: PageSize.LETTER },
-    { paramName: 'pageSize' as const, value: PageSize.LEGAL },
-  ])('should update parameter $paramName to $value', ({ paramName, value }) => {
+    { paramName: "scaleFactor" as const, value: 0.5 },
+    { paramName: "scaleFactor" as const, value: 2.0 },
+    { paramName: "scaleFactor" as const, value: 10.0 },
+    { paramName: "pageSize" as const, value: PageSize.A4 },
+    { paramName: "pageSize" as const, value: PageSize.LETTER },
+    { paramName: "pageSize" as const, value: PageSize.LEGAL },
+  ])("should update parameter $paramName to $value", ({ paramName, value }) => {
     const { result } = renderHook(() => useAdjustPageScaleParameters());
 
     act(() => {
@@ -28,13 +33,13 @@ describe('useAdjustPageScaleParameters', () => {
     expect(result.current.parameters[paramName]).toBe(value);
   });
 
-  test('should reset parameters to defaults', () => {
+  test("should reset parameters to defaults", () => {
     const { result } = renderHook(() => useAdjustPageScaleParameters());
 
     // First, change some parameters
     act(() => {
-      result.current.updateParameter('scaleFactor', 2.5);
-      result.current.updateParameter('pageSize', PageSize.A3);
+      result.current.updateParameter("scaleFactor", 2.5);
+      result.current.updateParameter("pageSize", PageSize.A3);
     });
 
     expect(result.current.parameters.scaleFactor).toBe(2.5);
@@ -48,54 +53,54 @@ describe('useAdjustPageScaleParameters', () => {
     expect(result.current.parameters).toStrictEqual(defaultParameters);
   });
 
-  test('should return correct endpoint name', () => {
+  test("should return correct endpoint name", () => {
     const { result } = renderHook(() => useAdjustPageScaleParameters());
 
-    expect(result.current.getEndpointName()).toBe('scale-pages');
+    expect(result.current.getEndpointName()).toBe("scale-pages");
   });
 
   test.each([
     {
-      description: 'with default parameters',
+      description: "with default parameters",
       setup: () => {},
-      expected: true
+      expected: true,
     },
     {
-      description: 'with valid scale factor 0.1',
+      description: "with valid scale factor 0.1",
       setup: (hook: AdjustPageScaleParametersHook) => {
-        hook.updateParameter('scaleFactor', 0.1);
+        hook.updateParameter("scaleFactor", 0.1);
       },
-      expected: true
+      expected: true,
     },
     {
-      description: 'with valid scale factor 10.0',
+      description: "with valid scale factor 10.0",
       setup: (hook: AdjustPageScaleParametersHook) => {
-        hook.updateParameter('scaleFactor', 10.0);
+        hook.updateParameter("scaleFactor", 10.0);
       },
-      expected: true
+      expected: true,
     },
     {
-      description: 'with A4 page size',
+      description: "with A4 page size",
       setup: (hook: AdjustPageScaleParametersHook) => {
-        hook.updateParameter('pageSize', PageSize.A4);
+        hook.updateParameter("pageSize", PageSize.A4);
       },
-      expected: true
+      expected: true,
     },
     {
-      description: 'with invalid scale factor 0',
+      description: "with invalid scale factor 0",
       setup: (hook: AdjustPageScaleParametersHook) => {
-        hook.updateParameter('scaleFactor', 0);
+        hook.updateParameter("scaleFactor", 0);
       },
-      expected: false
+      expected: false,
     },
     {
-      description: 'with negative scale factor',
+      description: "with negative scale factor",
       setup: (hook: AdjustPageScaleParametersHook) => {
-        hook.updateParameter('scaleFactor', -0.5);
+        hook.updateParameter("scaleFactor", -0.5);
       },
-      expected: false
-    }
-  ])('should validate parameters correctly $description', ({ setup, expected }) => {
+      expected: false,
+    },
+  ])("should validate parameters correctly $description", ({ setup, expected }) => {
     const { result } = renderHook(() => useAdjustPageScaleParameters());
 
     act(() => {
@@ -105,12 +110,12 @@ describe('useAdjustPageScaleParameters', () => {
     expect(result.current.validateParameters()).toBe(expected);
   });
 
-  test('should handle all PageSize enum values', () => {
+  test("should handle all PageSize enum values", () => {
     const { result } = renderHook(() => useAdjustPageScaleParameters());
 
-    Object.values(PageSize).forEach(pageSize => {
+    Object.values(PageSize).forEach((pageSize) => {
       act(() => {
-        result.current.updateParameter('pageSize', pageSize);
+        result.current.updateParameter("pageSize", pageSize);
       });
 
       expect(result.current.parameters.pageSize).toBe(pageSize);
@@ -118,24 +123,24 @@ describe('useAdjustPageScaleParameters', () => {
     });
   });
 
-  test('should handle scale factor edge cases', () => {
+  test("should handle scale factor edge cases", () => {
     const { result } = renderHook(() => useAdjustPageScaleParameters());
 
     // Test very small valid scale factor
     act(() => {
-      result.current.updateParameter('scaleFactor', 0.01);
+      result.current.updateParameter("scaleFactor", 0.01);
     });
     expect(result.current.validateParameters()).toBe(true);
 
     // Test scale factor just above zero
     act(() => {
-      result.current.updateParameter('scaleFactor', 0.001);
+      result.current.updateParameter("scaleFactor", 0.001);
     });
     expect(result.current.validateParameters()).toBe(true);
 
     // Test exactly zero (invalid)
     act(() => {
-      result.current.updateParameter('scaleFactor', 0);
+      result.current.updateParameter("scaleFactor", 0);
     });
     expect(result.current.validateParameters()).toBe(false);
   });
diff --git a/frontend/src/core/hooks/tools/adjustPageScale/useAdjustPageScaleParameters.ts b/frontend/src/core/hooks/tools/adjustPageScale/useAdjustPageScaleParameters.ts
index 07c6dff842..6507d1d223 100644
--- a/frontend/src/core/hooks/tools/adjustPageScale/useAdjustPageScaleParameters.ts
+++ b/frontend/src/core/hooks/tools/adjustPageScale/useAdjustPageScaleParameters.ts
@@ -1,17 +1,17 @@
-import { BaseParameters } from '@app/types/parameters';
-import { useBaseParameters, BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
+import { BaseParameters } from "@app/types/parameters";
+import { useBaseParameters, BaseParametersHook } from "@app/hooks/tools/shared/useBaseParameters";
 
 export enum PageSize {
-  KEEP = 'KEEP',
-  A0 = 'A0',
-  A1 = 'A1',
-  A2 = 'A2',
-  A3 = 'A3',
-  A4 = 'A4',
-  A5 = 'A5',
-  A6 = 'A6',
-  LETTER = 'LETTER',
-  LEGAL = 'LEGAL'
+  KEEP = "KEEP",
+  A0 = "A0",
+  A1 = "A1",
+  A2 = "A2",
+  A3 = "A3",
+  A4 = "A4",
+  A5 = "A5",
+  A6 = "A6",
+  LETTER = "LETTER",
+  LEGAL = "LEGAL",
 }
 
 export interface AdjustPageScaleParameters extends BaseParameters {
@@ -29,7 +29,7 @@ export type AdjustPageScaleParametersHook = BaseParametersHook<AdjustPageScalePa
 export const useAdjustPageScaleParameters = (): AdjustPageScaleParametersHook => {
   return useBaseParameters({
     defaultParameters,
-    endpointName: 'scale-pages',
+    endpointName: "scale-pages",
     validateFn: (params) => {
       return params.scaleFactor > 0;
     },
diff --git a/frontend/src/core/hooks/tools/autoRename/useAutoRenameOperation.ts b/frontend/src/core/hooks/tools/autoRename/useAutoRenameOperation.ts
index 60c7887ff7..014620f89b 100644
--- a/frontend/src/core/hooks/tools/autoRename/useAutoRenameOperation.ts
+++ b/frontend/src/core/hooks/tools/autoRename/useAutoRenameOperation.ts
@@ -1,13 +1,10 @@
-import { useTranslation } from 'react-i18next';
-import { ToolType, useToolOperation } from '@app/hooks/tools/shared/useToolOperation';
-import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
-import { AutoRenameParameters, defaultParameters } from '@app/hooks/tools/autoRename/useAutoRenameParameters';
+import { useTranslation } from "react-i18next";
+import { ToolType, useToolOperation } from "@app/hooks/tools/shared/useToolOperation";
+import { createStandardErrorHandler } from "@app/utils/toolErrorHandler";
+import { AutoRenameParameters, defaultParameters } from "@app/hooks/tools/autoRename/useAutoRenameParameters";
 
-export const getFormData = ((parameters: AutoRenameParameters) =>
-  Object.entries(parameters).map(([key, value]) =>
-    [key, value.toString()]
-  ) as string[][]
-);
+export const getFormData = (parameters: AutoRenameParameters) =>
+  Object.entries(parameters).map(([key, value]) => [key, value.toString()]) as string[][];
 
 // Static function that can be used by both the hook and automation executor
 export const buildAutoRenameFormData = (parameters: AutoRenameParameters, file: File): FormData => {
@@ -26,8 +23,8 @@ export const buildAutoRenameFormData = (parameters: AutoRenameParameters, file:
 export const autoRenameOperationConfig = {
   toolType: ToolType.singleFile,
   buildFormData: buildAutoRenameFormData,
-  operationType: 'autoRename',
-  endpoint: '/api/v1/misc/auto-rename',
+  operationType: "autoRename",
+  endpoint: "/api/v1/misc/auto-rename",
   preserveBackendFilename: true, // Use filename from backend response headers
   defaultParameters,
 } as const;
@@ -37,6 +34,8 @@ export const useAutoRenameOperation = () => {
 
   return useToolOperation({
     ...autoRenameOperationConfig,
-    getErrorMessage: createStandardErrorHandler(t('auto-rename.error.failed', 'An error occurred while auto-renaming the PDF.'))
+    getErrorMessage: createStandardErrorHandler(
+      t("auto-rename.error.failed", "An error occurred while auto-renaming the PDF."),
+    ),
   });
 };
diff --git a/frontend/src/core/hooks/tools/autoRename/useAutoRenameParameters.ts b/frontend/src/core/hooks/tools/autoRename/useAutoRenameParameters.ts
index 7e6e149ce3..21b22caba0 100644
--- a/frontend/src/core/hooks/tools/autoRename/useAutoRenameParameters.ts
+++ b/frontend/src/core/hooks/tools/autoRename/useAutoRenameParameters.ts
@@ -1,5 +1,5 @@
-import { BaseParameters } from '@app/types/parameters';
-import { useBaseParameters, BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
+import { BaseParameters } from "@app/types/parameters";
+import { useBaseParameters, BaseParametersHook } from "@app/hooks/tools/shared/useBaseParameters";
 
 export interface AutoRenameParameters extends BaseParameters {
   useFirstTextAsFallback: boolean;
@@ -14,6 +14,6 @@ export type AutoRenameParametersHook = BaseParametersHook<AutoRenameParameters>;
 export const useAutoRenameParameters = (): AutoRenameParametersHook => {
   return useBaseParameters({
     defaultParameters,
-    endpointName: 'auto-rename',
+    endpointName: "auto-rename",
   });
-};
\ No newline at end of file
+};
diff --git a/frontend/src/core/hooks/tools/automate/useAutomateOperation.ts b/frontend/src/core/hooks/tools/automate/useAutomateOperation.ts
index d885076360..76c7045f40 100644
--- a/frontend/src/core/hooks/tools/automate/useAutomateOperation.ts
+++ b/frontend/src/core/hooks/tools/automate/useAutomateOperation.ts
@@ -1,50 +1,53 @@
-import { ToolType, useToolOperation } from '@app/hooks/tools/shared/useToolOperation';
-import { useCallback } from 'react';
-import { executeAutomationSequence } from '@app/utils/automationExecutor';
-import { useToolRegistry } from '@app/contexts/ToolRegistryContext';
-import { AutomateParameters } from '@app/types/automation';
+import { ToolType, useToolOperation } from "@app/hooks/tools/shared/useToolOperation";
+import { useCallback } from "react";
+import { executeAutomationSequence } from "@app/utils/automationExecutor";
+import { useToolRegistry } from "@app/contexts/ToolRegistryContext";
+import { AutomateParameters } from "@app/types/automation";
 
 export function useAutomateOperation() {
   const { allTools } = useToolRegistry();
   const toolRegistry = allTools;
 
-  const customProcessor = useCallback(async (params: AutomateParameters, files: File[]) => {
-    console.log('🚀 Starting automation execution via customProcessor', { params, files });
+  const customProcessor = useCallback(
+    async (params: AutomateParameters, files: File[]) => {
+      console.log("🚀 Starting automation execution via customProcessor", { params, files });
 
-    if (!params.automationConfig) {
-      throw new Error('No automation configuration provided');
-    }
-
-    // Execute the automation sequence and return the final results
-    const finalResults = await executeAutomationSequence(
-      params.automationConfig!,
-      files,
-      toolRegistry,
-      (stepIndex: number, operationName: string) => {
-        console.log(`Step ${stepIndex + 1} started: ${operationName}`);
-        params.onStepStart?.(stepIndex, operationName);
-      },
-      (stepIndex: number, resultFiles: File[]) => {
-        console.log(`Step ${stepIndex + 1} completed with ${resultFiles.length} files`);
-        params.onStepComplete?.(stepIndex, resultFiles);
-      },
-      (stepIndex: number, error: string) => {
-        console.error(`Step ${stepIndex + 1} failed:`, error);
-        params.onStepError?.(stepIndex, error);
-        throw new Error(`Automation step ${stepIndex + 1} failed: ${error}`);
+      if (!params.automationConfig) {
+        throw new Error("No automation configuration provided");
       }
-    );
 
-    console.log(`✅ Automation completed, returning ${finalResults.length} files`);
-    return {
-      files: finalResults,
-      consumedAllInputs: true,
-    };
-  }, [toolRegistry]);
+      // Execute the automation sequence and return the final results
+      const finalResults = await executeAutomationSequence(
+        params.automationConfig!,
+        files,
+        toolRegistry,
+        (stepIndex: number, operationName: string) => {
+          console.log(`Step ${stepIndex + 1} started: ${operationName}`);
+          params.onStepStart?.(stepIndex, operationName);
+        },
+        (stepIndex: number, resultFiles: File[]) => {
+          console.log(`Step ${stepIndex + 1} completed with ${resultFiles.length} files`);
+          params.onStepComplete?.(stepIndex, resultFiles);
+        },
+        (stepIndex: number, error: string) => {
+          console.error(`Step ${stepIndex + 1} failed:`, error);
+          params.onStepError?.(stepIndex, error);
+          throw new Error(`Automation step ${stepIndex + 1} failed: ${error}`);
+        },
+      );
+
+      console.log(`✅ Automation completed, returning ${finalResults.length} files`);
+      return {
+        files: finalResults,
+        consumedAllInputs: true,
+      };
+    },
+    [toolRegistry],
+  );
 
   return useToolOperation<AutomateParameters>({
     toolType: ToolType.custom,
-    operationType: 'automate',
+    operationType: "automate",
     customProcessor,
     consumesAllInputs: true,
   });
diff --git a/frontend/src/core/hooks/tools/automate/useAutomationForm.ts b/frontend/src/core/hooks/tools/automate/useAutomationForm.ts
index 3bcfad53ba..e36e21c40c 100644
--- a/frontend/src/core/hooks/tools/automate/useAutomationForm.ts
+++ b/frontend/src/core/hooks/tools/automate/useAutomationForm.ts
@@ -1,11 +1,10 @@
-import { useState, useEffect, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { AutomationTool, AutomationConfig, AutomationMode } from '@app/types/automation';
-import { AUTOMATION_CONSTANTS } from '@app/constants/automation';
-import { ToolRegistry } from '@app/data/toolsTaxonomy';
+import { useState, useEffect, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { AutomationTool, AutomationConfig, AutomationMode } from "@app/types/automation";
+import { AUTOMATION_CONSTANTS } from "@app/constants/automation";
+import { ToolRegistry } from "@app/data/toolsTaxonomy";
 import { ToolId } from "@app/types/toolId";
 
-
 interface UseAutomationFormProps {
   mode: AutomationMode;
   existingAutomation?: AutomationConfig;
@@ -15,34 +14,40 @@ interface UseAutomationFormProps {
 export function useAutomationForm({ mode, existingAutomation, toolRegistry }: UseAutomationFormProps) {
   const { t } = useTranslation();
 
-  const [automationName, setAutomationName] = useState('');
-  const [automationDescription, setAutomationDescription] = useState('');
-  const [automationIcon, setAutomationIcon] = useState<string>('');
+  const [automationName, setAutomationName] = useState("");
+  const [automationDescription, setAutomationDescription] = useState("");
+  const [automationIcon, setAutomationIcon] = useState<string>("");
   const [selectedTools, setSelectedTools] = useState<AutomationTool[]>([]);
 
-  const getToolName = useCallback((operation: string) => {
-    const tool = toolRegistry?.[operation as ToolId] as any;
-    return tool?.name || t(`tools.${operation}.name`, operation);
-  }, [toolRegistry, t]);
+  const getToolName = useCallback(
+    (operation: string) => {
+      const tool = toolRegistry?.[operation as ToolId] as any;
+      return tool?.name || t(`tools.${operation}.name`, operation);
+    },
+    [toolRegistry, t],
+  );
 
-  const getToolDefaultParameters = useCallback((operation: string): Record<string, any> => {
-    const config = toolRegistry[operation as ToolId]?.operationConfig;
-    if (config?.defaultParameters) {
-      return { ...config.defaultParameters };
-    }
-    return {};
-  }, [toolRegistry]);
+  const getToolDefaultParameters = useCallback(
+    (operation: string): Record<string, any> => {
+      const config = toolRegistry[operation as ToolId]?.operationConfig;
+      if (config?.defaultParameters) {
+        return { ...config.defaultParameters };
+      }
+      return {};
+    },
+    [toolRegistry],
+  );
 
   // Initialize based on mode and existing automation
   useEffect(() => {
     if ((mode === AutomationMode.SUGGESTED || mode === AutomationMode.EDIT) && existingAutomation) {
-      setAutomationName(existingAutomation.name || '');
-      setAutomationDescription(existingAutomation.description || '');
-      setAutomationIcon(existingAutomation.icon || '');
+      setAutomationName(existingAutomation.name || "");
+      setAutomationDescription(existingAutomation.description || "");
+      setAutomationIcon(existingAutomation.icon || "");
 
       const operations = existingAutomation.operations || [];
       const tools = operations.map((op, index) => {
-        const operation = typeof op === 'string' ? op : op.operation;
+        const operation = typeof op === "string" ? op : op.operation;
         const toolEntry = toolRegistry[operation as ToolId];
         // If tool has no settingsComponent, it's automatically configured
         const isConfigured = mode === AutomationMode.EDIT ? true : !toolEntry?.automationSettings;
@@ -52,7 +57,10 @@ export function useAutomationForm({ mode, existingAutomation, toolRegistry }: Us
           operation: operation,
           name: getToolName(operation),
           configured: isConfigured,
-          parameters: typeof op === 'object' ? { ...getToolDefaultParameters(operation), ...(op.parameters || {}) } : getToolDefaultParameters(operation)
+          parameters:
+            typeof op === "object"
+              ? { ...getToolDefaultParameters(operation), ...(op.parameters || {}) }
+              : getToolDefaultParameters(operation),
         };
       });
 
@@ -61,10 +69,10 @@ export function useAutomationForm({ mode, existingAutomation, toolRegistry }: Us
       // Initialize with default empty tools for new automation
       const defaultTools = Array.from({ length: AUTOMATION_CONSTANTS.DEFAULT_TOOL_COUNT }, (_, index) => ({
         id: `tool-${index + 1}-${Date.now()}`,
-        operation: '',
-        name: t('automate.creation.tools.selectTool', 'Select a tool...'),
+        operation: "",
+        name: t("automate.creation.tools.selectTool", "Select a tool..."),
         configured: false,
-        parameters: {}
+        parameters: {},
       }));
       setSelectedTools(defaultTools);
     }
@@ -80,7 +88,7 @@ export function useAutomationForm({ mode, existingAutomation, toolRegistry }: Us
       operation,
       name: getToolName(operation),
       configured: isConfigured,
-      parameters: getToolDefaultParameters(operation)
+      parameters: getToolDefaultParameters(operation),
     };
 
     setSelectedTools([...selectedTools, newTool]);
@@ -98,17 +106,14 @@ export function useAutomationForm({ mode, existingAutomation, toolRegistry }: Us
   };
 
   const hasUnsavedChanges = () => {
-    return (
-      automationName.trim() !== '' ||
-      selectedTools.some(tool => tool.operation !== '' || tool.configured)
-    );
+    return automationName.trim() !== "" || selectedTools.some((tool) => tool.operation !== "" || tool.configured);
   };
 
   const canSaveAutomation = () => {
     return (
-      automationName.trim() !== '' &&
+      automationName.trim() !== "" &&
       selectedTools.length > 0 &&
-      selectedTools.every(tool => tool.configured && tool.operation !== '')
+      selectedTools.every((tool) => tool.configured && tool.operation !== "")
     );
   };
 
@@ -127,6 +132,6 @@ export function useAutomationForm({ mode, existingAutomation, toolRegistry }: Us
     hasUnsavedChanges,
     canSaveAutomation,
     getToolName,
-    getToolDefaultParameters
+    getToolDefaultParameters,
   };
 }
diff --git a/frontend/src/core/hooks/tools/automate/useSavedAutomations.ts b/frontend/src/core/hooks/tools/automate/useSavedAutomations.ts
index a4bba4857a..f6fecb412f 100644
--- a/frontend/src/core/hooks/tools/automate/useSavedAutomations.ts
+++ b/frontend/src/core/hooks/tools/automate/useSavedAutomations.ts
@@ -1,6 +1,6 @@
-import { useState, useEffect, useCallback } from 'react';
-import { AutomationConfig } from '@app/services/automationStorage';
-import { SuggestedAutomation } from '@app/types/automation';
+import { useState, useEffect, useCallback } from "react";
+import { AutomationConfig } from "@app/services/automationStorage";
+import { SuggestedAutomation } from "@app/types/automation";
 
 export interface SavedAutomation extends AutomationConfig {}
 
@@ -13,11 +13,11 @@ export function useSavedAutomations() {
     try {
       setLoading(true);
       setError(null);
-      const { automationStorage } = await import('@app/services/automationStorage');
+      const { automationStorage } = await import("@app/services/automationStorage");
       const automations = await automationStorage.getAllAutomations();
       setSavedAutomations(automations);
     } catch (err) {
-      console.error('Error loading saved automations:', err);
+      console.error("Error loading saved automations:", err);
       setError(err as Error);
       setSavedAutomations([]);
     } finally {
@@ -29,54 +29,60 @@ export function useSavedAutomations() {
     loadSavedAutomations();
   }, [loadSavedAutomations]);
 
-  const deleteAutomation = useCallback(async (id: string) => {
-    try {
-      const { automationStorage } = await import('@app/services/automationStorage');
-      await automationStorage.deleteAutomation(id);
-      // Refresh the list after deletion
-      refreshAutomations();
-    } catch (err) {
-      console.error('Error deleting automation:', err);
-      throw err;
-    }
-  }, [refreshAutomations]);
+  const deleteAutomation = useCallback(
+    async (id: string) => {
+      try {
+        const { automationStorage } = await import("@app/services/automationStorage");
+        await automationStorage.deleteAutomation(id);
+        // Refresh the list after deletion
+        refreshAutomations();
+      } catch (err) {
+        console.error("Error deleting automation:", err);
+        throw err;
+      }
+    },
+    [refreshAutomations],
+  );
 
-  const copyFromSuggested = useCallback(async (suggestedAutomation: SuggestedAutomation) => {
-    try {
-      const { automationStorage } = await import('@app/services/automationStorage');
+  const copyFromSuggested = useCallback(
+    async (suggestedAutomation: SuggestedAutomation) => {
+      try {
+        const { automationStorage } = await import("@app/services/automationStorage");
 
-      // Map suggested automation icons to MUI icon keys
-      const getIconKey = (_suggestedIcon: {id: string}): string => {
-        // Check the automation ID or name to determine the appropriate icon
-        switch (suggestedAutomation.id) {
-          case 'secure-pdf-ingestion':
-          case 'secure-workflow':
-            return 'SecurityIcon'; // Security icon for security workflows
-          case 'email-preparation':
-            return 'CompressIcon'; // Compression icon
-          case 'process-images':
-            return 'StarIcon'; // Star icon for process images
-          default:
-            return 'SettingsIcon'; // Default fallback
-        }
-      };
+        // Map suggested automation icons to MUI icon keys
+        const getIconKey = (_suggestedIcon: { id: string }): string => {
+          // Check the automation ID or name to determine the appropriate icon
+          switch (suggestedAutomation.id) {
+            case "secure-pdf-ingestion":
+            case "secure-workflow":
+              return "SecurityIcon"; // Security icon for security workflows
+            case "email-preparation":
+              return "CompressIcon"; // Compression icon
+            case "process-images":
+              return "StarIcon"; // Star icon for process images
+            default:
+              return "SettingsIcon"; // Default fallback
+          }
+        };
 
-      // Convert suggested automation to saved automation format
-      const savedAutomation = {
-        name: suggestedAutomation.name,
-        description: suggestedAutomation.description,
-        icon: getIconKey(suggestedAutomation.icon),
-        operations: suggestedAutomation.operations
-      };
+        // Convert suggested automation to saved automation format
+        const savedAutomation = {
+          name: suggestedAutomation.name,
+          description: suggestedAutomation.description,
+          icon: getIconKey(suggestedAutomation.icon),
+          operations: suggestedAutomation.operations,
+        };
 
-      await automationStorage.saveAutomation(savedAutomation);
-      // Refresh the list after saving
-      refreshAutomations();
-    } catch (err) {
-      console.error('Error copying suggested automation:', err);
-      throw err;
-    }
-  }, [refreshAutomations]);
+        await automationStorage.saveAutomation(savedAutomation);
+        // Refresh the list after saving
+        refreshAutomations();
+      } catch (err) {
+        console.error("Error copying suggested automation:", err);
+        throw err;
+      }
+    },
+    [refreshAutomations],
+  );
 
   // Load automations on mount
   useEffect(() => {
@@ -89,6 +95,6 @@ export function useSavedAutomations() {
     error,
     refreshAutomations,
     deleteAutomation,
-    copyFromSuggested
+    copyFromSuggested,
   };
 }
diff --git a/frontend/src/core/hooks/tools/automate/useSuggestedAutomations.ts b/frontend/src/core/hooks/tools/automate/useSuggestedAutomations.ts
index 082a2f975f..809a437ceb 100644
--- a/frontend/src/core/hooks/tools/automate/useSuggestedAutomations.ts
+++ b/frontend/src/core/hooks/tools/automate/useSuggestedAutomations.ts
@@ -1,15 +1,15 @@
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import React from 'react';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { SuggestedAutomation } from '@app/types/automation';
-import { SPLIT_METHODS } from '@app/constants/splitConstants';
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import React from "react";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { SuggestedAutomation } from "@app/types/automation";
+import { SPLIT_METHODS } from "@app/constants/splitConstants";
 
 // Create icon components
-const CompressIcon = () => React.createElement(LocalIcon, { icon: 'compress', width: '1.5rem', height: '1.5rem' });
-const SecurityIcon = () => React.createElement(LocalIcon, { icon: 'security', width: '1.5rem', height: '1.5rem' });
-const StarIcon = () => React.createElement(LocalIcon, { icon: 'star', width: '1.5rem', height: '1.5rem' });
-const PrivacyIcon = () => React.createElement(LocalIcon, { icon: 'shield-lock', width: '1.5rem', height: '1.5rem' });
+const CompressIcon = () => React.createElement(LocalIcon, { icon: "compress", width: "1.5rem", height: "1.5rem" });
+const SecurityIcon = () => React.createElement(LocalIcon, { icon: "security", width: "1.5rem", height: "1.5rem" });
+const StarIcon = () => React.createElement(LocalIcon, { icon: "star", width: "1.5rem", height: "1.5rem" });
+const PrivacyIcon = () => React.createElement(LocalIcon, { icon: "shield-lock", width: "1.5rem", height: "1.5rem" });
 
 export function useSuggestedAutomations(): SuggestedAutomation[] {
   const { t } = useTranslation();
@@ -20,7 +20,10 @@ export function useSuggestedAutomations(): SuggestedAutomation[] {
       {
         id: "secure-pdf-ingestion",
         name: t("automation.suggested.securePdfIngestion", "Secure PDF Ingestion"),
-        description: t("automation.suggested.securePdfIngestionDesc", "Comprehensive PDF processing workflow that sanitizes documents, applies OCR with cleanup, converts to PDF/A format for long-term archival, and optimizes file size."),
+        description: t(
+          "automation.suggested.securePdfIngestionDesc",
+          "Comprehensive PDF processing workflow that sanitizes documents, applies OCR with cleanup, converts to PDF/A format for long-term archival, and optimizes file size.",
+        ),
         operations: [
           {
             operation: "sanitize",
@@ -31,39 +34,39 @@ export function useSuggestedAutomations(): SuggestedAutomation[] {
               removeMetadata: true,
               removeLinks: false,
               removeFonts: false,
-            }
+            },
           },
           {
             operation: "ocr",
             parameters: {
-              languages: ['eng'],
-              ocrType: 'skip-text',
-              ocrRenderType: 'hocr',
-              additionalOptions: ['clean', 'cleanFinal'],
-            }
+              languages: ["eng"],
+              ocrType: "skip-text",
+              ocrRenderType: "hocr",
+              additionalOptions: ["clean", "cleanFinal"],
+            },
           },
           {
             operation: "convert",
             parameters: {
-              fromExtension: 'pdf',
-              toExtension: 'pdfa',
+              fromExtension: "pdf",
+              toExtension: "pdfa",
               pdfaOptions: {
-                outputFormat: 'pdfa-2b',
+                outputFormat: "pdfa-2b",
                 strict: false,
-              }
-            }
+              },
+            },
           },
           {
             operation: "compress",
             parameters: {
               compressionLevel: 5,
               grayscale: false,
-              expectedSize: '',
-              compressionMethod: 'quality',
-              fileSizeValue: '',
-              fileSizeUnit: 'MB',
-            }
-          }
+              expectedSize: "",
+              compressionMethod: "quality",
+              fileSizeValue: "",
+              fileSizeUnit: "MB",
+            },
+          },
         ],
         createdAt: now,
         updatedAt: now,
@@ -72,7 +75,10 @@ export function useSuggestedAutomations(): SuggestedAutomation[] {
       {
         id: "pre-publish-sanitization",
         name: t("automation.suggested.prePublishSanitization", "Pre-publish Sanitization"),
-        description: t("automation.suggested.prePublishSanitizationDesc", "Sanitization workflow that removes all hidden metadata, JavaScript, embedded files, annotations, and flattens forms to prevent data leakage before publishing PDFs online."),
+        description: t(
+          "automation.suggested.prePublishSanitizationDesc",
+          "Sanitization workflow that removes all hidden metadata, JavaScript, embedded files, annotations, and flattens forms to prevent data leakage before publishing PDFs online.",
+        ),
         operations: [
           {
             operation: "sanitize",
@@ -83,43 +89,43 @@ export function useSuggestedAutomations(): SuggestedAutomation[] {
               removeMetadata: true,
               removeLinks: true,
               removeFonts: false,
-            }
+            },
           },
           {
             operation: "flatten",
             parameters: {
               flattenOnlyForms: true,
-            }
+            },
           },
           {
             operation: "removeAnnotations",
-            parameters: {}
+            parameters: {},
           },
           {
             operation: "changeMetadata",
             parameters: {
               deleteAll: true,
-              author: '',
-              creationDate: '',
-              creator: '',
-              keywords: '',
-              modificationDate: '',
-              producer: '',
-              subject: '',
-              title: '',
-              trapped: '',
-            }
+              author: "",
+              creationDate: "",
+              creator: "",
+              keywords: "",
+              modificationDate: "",
+              producer: "",
+              subject: "",
+              title: "",
+              trapped: "",
+            },
           },
           {
             operation: "compress",
             parameters: {
               compressionLevel: 3,
               grayscale: false,
-              expectedSize: '',
-              compressionMethod: 'quality',
-              fileSizeValue: '',
-              fileSizeUnit: 'MB',
-            }
+              expectedSize: "",
+              compressionMethod: "quality",
+              fileSizeValue: "",
+              fileSizeUnit: "MB",
+            },
           },
         ],
         createdAt: now,
@@ -129,33 +135,36 @@ export function useSuggestedAutomations(): SuggestedAutomation[] {
       {
         id: "email-preparation",
         name: t("automation.suggested.emailPreparation", "Email Preparation"),
-        description: t("automation.suggested.emailPreparationDesc", "Optimizes PDFs for email distribution by compressing files, splitting large documents into 20MB chunks for email compatibility, and removing metadata for privacy."),
+        description: t(
+          "automation.suggested.emailPreparationDesc",
+          "Optimizes PDFs for email distribution by compressing files, splitting large documents into 20MB chunks for email compatibility, and removing metadata for privacy.",
+        ),
         operations: [
           {
             operation: "compress",
             parameters: {
               compressionLevel: 5,
               grayscale: false,
-              expectedSize: '',
-              compressionMethod: 'quality',
-              fileSizeValue: '',
-              fileSizeUnit: 'MB',
-            }
+              expectedSize: "",
+              compressionMethod: "quality",
+              fileSizeValue: "",
+              fileSizeUnit: "MB",
+            },
           },
           {
             operation: "split",
             parameters: {
               method: SPLIT_METHODS.BY_SIZE,
-              pages: '',
-              hDiv: '1',
-              vDiv: '1',
+              pages: "",
+              hDiv: "1",
+              vDiv: "1",
               merge: false,
-              splitValue: '20MB',
-              bookmarkLevel: '1',
+              splitValue: "20MB",
+              bookmarkLevel: "1",
               includeMetadata: false,
               allowDuplicates: false,
               duplexMode: false,
-            }
+            },
           },
           {
             operation: "sanitize",
@@ -166,8 +175,8 @@ export function useSuggestedAutomations(): SuggestedAutomation[] {
               removeMetadata: true,
               removeLinks: false,
               removeFonts: false,
-            }
-          }
+            },
+          },
         ],
         createdAt: now,
         updatedAt: now,
@@ -176,7 +185,10 @@ export function useSuggestedAutomations(): SuggestedAutomation[] {
       {
         id: "secure-workflow",
         name: t("automation.suggested.secureWorkflow", "Security Workflow"),
-        description: t("automation.suggested.secureWorkflowDesc", "Secures PDF documents by removing potentially malicious content like JavaScript and embedded files, then adds password protection to prevent unauthorized access. Password is set to 'password' by default."),
+        description: t(
+          "automation.suggested.secureWorkflowDesc",
+          "Secures PDF documents by removing potentially malicious content like JavaScript and embedded files, then adds password protection to prevent unauthorized access. Password is set to 'password' by default.",
+        ),
         operations: [
           {
             operation: "sanitize",
@@ -187,13 +199,13 @@ export function useSuggestedAutomations(): SuggestedAutomation[] {
               removeMetadata: false,
               removeLinks: false,
               removeFonts: false,
-            }
+            },
           },
           {
             operation: "addPassword",
             parameters: {
-              password: 'password',
-              ownerPassword: '',
+              password: "password",
+              ownerPassword: "",
               keyLength: 128,
               permissions: {
                 preventAssembly: false,
@@ -204,9 +216,9 @@ export function useSuggestedAutomations(): SuggestedAutomation[] {
                 preventModifyAnnotations: false,
                 preventPrinting: false,
                 preventPrintingFaithful: false,
-              }
-            }
-          }
+              },
+            },
+          },
         ],
         createdAt: now,
         updatedAt: now,
@@ -215,32 +227,35 @@ export function useSuggestedAutomations(): SuggestedAutomation[] {
       {
         id: "process-images",
         name: t("automation.suggested.processImages", "Process Images"),
-        description: t("automation.suggested.processImagesDesc", "Converts multiple image files into a single PDF document, then applies OCR technology to extract searchable text from the images."),
+        description: t(
+          "automation.suggested.processImagesDesc",
+          "Converts multiple image files into a single PDF document, then applies OCR technology to extract searchable text from the images.",
+        ),
         operations: [
           {
             operation: "convert",
             parameters: {
-              fromExtension: 'image',
-              toExtension: 'pdf',
+              fromExtension: "image",
+              toExtension: "pdf",
               imageOptions: {
-                colorType: 'color',
+                colorType: "color",
                 dpi: 300,
-                singleOrMultiple: 'multiple',
-                fitOption: 'maintainAspectRatio',
+                singleOrMultiple: "multiple",
+                fitOption: "maintainAspectRatio",
                 autoRotate: true,
                 combineImages: true,
-              }
-            }
+              },
+            },
           },
           {
             operation: "ocr",
             parameters: {
-              languages: ['eng'],
-              ocrType: 'skip-text',
-              ocrRenderType: 'hocr',
+              languages: ["eng"],
+              ocrType: "skip-text",
+              ocrRenderType: "hocr",
               additionalOptions: [],
-            }
-          }
+            },
+          },
         ],
         createdAt: now,
         updatedAt: now,
diff --git a/frontend/src/core/hooks/tools/bookletImposition/useBookletImpositionOperation.ts b/frontend/src/core/hooks/tools/bookletImposition/useBookletImpositionOperation.ts
index c01fde036d..d9ff509b6e 100644
--- a/frontend/src/core/hooks/tools/bookletImposition/useBookletImpositionOperation.ts
+++ b/frontend/src/core/hooks/tools/bookletImposition/useBookletImpositionOperation.ts
@@ -1,7 +1,10 @@
-import { useTranslation } from 'react-i18next';
-import { useToolOperation, ToolType } from '@app/hooks/tools/shared/useToolOperation';
-import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
-import { BookletImpositionParameters, defaultParameters } from '@app/hooks/tools/bookletImposition/useBookletImpositionParameters';
+import { useTranslation } from "react-i18next";
+import { useToolOperation, ToolType } from "@app/hooks/tools/shared/useToolOperation";
+import { createStandardErrorHandler } from "@app/utils/toolErrorHandler";
+import {
+  BookletImpositionParameters,
+  defaultParameters,
+} from "@app/hooks/tools/bookletImposition/useBookletImpositionParameters";
 
 // Static configuration that can be used by both the hook and automation executor
 export const buildBookletImpositionFormData = (parameters: BookletImpositionParameters, file: File): FormData => {
@@ -22,8 +25,8 @@ export const buildBookletImpositionFormData = (parameters: BookletImpositionPara
 export const bookletImpositionOperationConfig = {
   toolType: ToolType.singleFile,
   buildFormData: buildBookletImpositionFormData,
-  operationType: 'bookletImposition',
-  endpoint: '/api/v1/general/booklet-imposition',
+  operationType: "bookletImposition",
+  endpoint: "/api/v1/general/booklet-imposition",
   defaultParameters,
 } as const;
 
@@ -32,6 +35,8 @@ export const useBookletImpositionOperation = () => {
 
   return useToolOperation<BookletImpositionParameters>({
     ...bookletImpositionOperationConfig,
-    getErrorMessage: createStandardErrorHandler(t('bookletImposition.error.failed', 'An error occurred while creating the booklet imposition.'))
+    getErrorMessage: createStandardErrorHandler(
+      t("bookletImposition.error.failed", "An error occurred while creating the booklet imposition."),
+    ),
   });
-};
\ No newline at end of file
+};
diff --git a/frontend/src/core/hooks/tools/bookletImposition/useBookletImpositionParameters.ts b/frontend/src/core/hooks/tools/bookletImposition/useBookletImpositionParameters.ts
index dd7442398d..1204ffaf63 100644
--- a/frontend/src/core/hooks/tools/bookletImposition/useBookletImpositionParameters.ts
+++ b/frontend/src/core/hooks/tools/bookletImposition/useBookletImpositionParameters.ts
@@ -1,25 +1,25 @@
-import { BaseParameters } from '@app/types/parameters';
-import { useBaseParameters, BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
+import { BaseParameters } from "@app/types/parameters";
+import { useBaseParameters, BaseParametersHook } from "@app/hooks/tools/shared/useBaseParameters";
 
 export interface BookletImpositionParameters extends BaseParameters {
   pagesPerSheet: 2;
   addBorder: boolean;
-  spineLocation: 'LEFT' | 'RIGHT';
+  spineLocation: "LEFT" | "RIGHT";
   addGutter: boolean;
   gutterSize: number;
   doubleSided: boolean;
-  duplexPass: 'BOTH' | 'FIRST' | 'SECOND';
+  duplexPass: "BOTH" | "FIRST" | "SECOND";
   flipOnShortEdge: boolean;
 }
 
 export const defaultParameters: BookletImpositionParameters = {
   pagesPerSheet: 2,
   addBorder: false,
-  spineLocation: 'LEFT',
+  spineLocation: "LEFT",
   addGutter: false,
   gutterSize: 12,
   doubleSided: true,
-  duplexPass: 'BOTH',
+  duplexPass: "BOTH",
   flipOnShortEdge: false,
 };
 
@@ -28,9 +28,9 @@ export type BookletImpositionParametersHook = BaseParametersHook<BookletImpositi
 export const useBookletImpositionParameters = (): BookletImpositionParametersHook => {
   return useBaseParameters({
     defaultParameters,
-    endpointName: 'booklet-imposition',
+    endpointName: "booklet-imposition",
     validateFn: (params) => {
       return params.pagesPerSheet === 2;
     },
   });
-};
\ No newline at end of file
+};
diff --git a/frontend/src/core/hooks/tools/certSign/useCertSignOperation.ts b/frontend/src/core/hooks/tools/certSign/useCertSignOperation.ts
index d8c580fe2a..6d92346f89 100644
--- a/frontend/src/core/hooks/tools/certSign/useCertSignOperation.ts
+++ b/frontend/src/core/hooks/tools/certSign/useCertSignOperation.ts
@@ -1,39 +1,39 @@
-import { useTranslation } from 'react-i18next';
-import { ToolType, useToolOperation } from '@app/hooks/tools/shared/useToolOperation';
-import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
-import { CertSignParameters, defaultParameters } from '@app/hooks/tools/certSign/useCertSignParameters';
+import { useTranslation } from "react-i18next";
+import { ToolType, useToolOperation } from "@app/hooks/tools/shared/useToolOperation";
+import { createStandardErrorHandler } from "@app/utils/toolErrorHandler";
+import { CertSignParameters, defaultParameters } from "@app/hooks/tools/certSign/useCertSignParameters";
 
 // Build form data for signing
 export const buildCertSignFormData = (parameters: CertSignParameters, file: File): FormData => {
   const formData = new FormData();
-  formData.append('fileInput', file);
+  formData.append("fileInput", file);
 
   // Handle sign mode
-  if (parameters.signMode === 'AUTO') {
-    formData.append('certType', 'SERVER');
+  if (parameters.signMode === "AUTO") {
+    formData.append("certType", "SERVER");
   } else {
-    formData.append('certType', parameters.certType);
-    formData.append('password', parameters.password);
+    formData.append("certType", parameters.certType);
+    formData.append("password", parameters.password);
 
     // Add certificate files based on type (only for manual mode)
     switch (parameters.certType) {
-      case 'PEM':
+      case "PEM":
         if (parameters.privateKeyFile) {
-          formData.append('privateKeyFile', parameters.privateKeyFile);
+          formData.append("privateKeyFile", parameters.privateKeyFile);
         }
         if (parameters.certFile) {
-          formData.append('certFile', parameters.certFile);
+          formData.append("certFile", parameters.certFile);
         }
         break;
-      case 'PKCS12':
-      case 'PFX':
+      case "PKCS12":
+      case "PFX":
         if (parameters.p12File) {
-          formData.append('p12File', parameters.p12File);
+          formData.append("p12File", parameters.p12File);
         }
         break;
-      case 'JKS':
+      case "JKS":
         if (parameters.jksFile) {
-          formData.append('jksFile', parameters.jksFile);
+          formData.append("jksFile", parameters.jksFile);
         }
         break;
     }
@@ -41,12 +41,12 @@ export const buildCertSignFormData = (parameters: CertSignParameters, file: File
 
   // Add signature appearance options if enabled
   if (parameters.showSignature) {
-    formData.append('showSignature', 'true');
-    formData.append('reason', parameters.reason);
-    formData.append('location', parameters.location);
-    formData.append('name', parameters.name);
-    formData.append('pageNumber', parameters.pageNumber.toString());
-    formData.append('showLogo', parameters.showLogo.toString());
+    formData.append("showSignature", "true");
+    formData.append("reason", parameters.reason);
+    formData.append("location", parameters.location);
+    formData.append("name", parameters.name);
+    formData.append("pageNumber", parameters.pageNumber.toString());
+    formData.append("showLogo", parameters.showLogo.toString());
   }
 
   return formData;
@@ -56,8 +56,8 @@ export const buildCertSignFormData = (parameters: CertSignParameters, file: File
 export const certSignOperationConfig = {
   toolType: ToolType.singleFile,
   buildFormData: buildCertSignFormData,
-  operationType: 'certSign',
-  endpoint: '/api/v1/security/cert-sign',
+  operationType: "certSign",
+  endpoint: "/api/v1/security/cert-sign",
   multiFileEndpoint: false,
   defaultParameters,
 } as const;
@@ -67,6 +67,6 @@ export const useCertSignOperation = () => {
 
   return useToolOperation<CertSignParameters>({
     ...certSignOperationConfig,
-    getErrorMessage: createStandardErrorHandler(t('certSign.error.failed', 'An error occurred while processing signatures.'))
+    getErrorMessage: createStandardErrorHandler(t("certSign.error.failed", "An error occurred while processing signatures.")),
   });
 };
diff --git a/frontend/src/core/hooks/tools/certSign/useCertSignParameters.ts b/frontend/src/core/hooks/tools/certSign/useCertSignParameters.ts
index 374cffd2c3..3cbd32cabc 100644
--- a/frontend/src/core/hooks/tools/certSign/useCertSignParameters.ts
+++ b/frontend/src/core/hooks/tools/certSign/useCertSignParameters.ts
@@ -1,17 +1,17 @@
-import { BaseParameters } from '@app/types/parameters';
-import { useBaseParameters, BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
+import { BaseParameters } from "@app/types/parameters";
+import { useBaseParameters, BaseParametersHook } from "@app/hooks/tools/shared/useBaseParameters";
 
 export interface CertSignParameters extends BaseParameters {
   // Sign mode selection
-  signMode: 'MANUAL' | 'AUTO';
+  signMode: "MANUAL" | "AUTO";
   // Certificate signing options (only for manual mode)
-  certType: '' | 'PEM' | 'PKCS12' | 'PFX' | 'JKS';
+  certType: "" | "PEM" | "PKCS12" | "PFX" | "JKS";
   privateKeyFile?: File;
   certFile?: File;
   p12File?: File;
   jksFile?: File;
   password: string;
-  
+
   // Signature appearance options
   showSignature: boolean;
   reason: string;
@@ -22,13 +22,13 @@ export interface CertSignParameters extends BaseParameters {
 }
 
 export const defaultParameters: CertSignParameters = {
-  signMode: 'MANUAL',
-  certType: '',
-  password: '',
+  signMode: "MANUAL",
+  certType: "",
+  password: "",
   showSignature: false,
-  reason: '',
-  location: '',
-  name: '',
+  reason: "",
+  location: "",
+  name: "",
   pageNumber: 1,
   showLogo: true,
 };
@@ -38,30 +38,30 @@ export type CertSignParametersHook = BaseParametersHook<CertSignParameters>;
 export const useCertSignParameters = (): CertSignParametersHook => {
   return useBaseParameters({
     defaultParameters,
-    endpointName: 'cert-sign',
+    endpointName: "cert-sign",
     validateFn: (params) => {
       // Auto mode (server certificate) - no additional validation needed
-      if (params.signMode === 'AUTO') {
+      if (params.signMode === "AUTO") {
         return true;
       }
-      
+
       // Manual mode - requires certificate type and files
       if (!params.certType) {
         return false;
       }
-      
+
       // Check for required files based on cert type
       switch (params.certType) {
-        case 'PEM':
+        case "PEM":
           return !!(params.privateKeyFile && params.certFile);
-        case 'PKCS12':
-        case 'PFX':
+        case "PKCS12":
+        case "PFX":
           return !!params.p12File;
-        case 'JKS':
+        case "JKS":
           return !!params.jksFile;
         default:
           return false;
       }
     },
   });
-};
\ No newline at end of file
+};
diff --git a/frontend/src/core/hooks/tools/changeMetadata/useChangeMetadataOperation.test.ts b/frontend/src/core/hooks/tools/changeMetadata/useChangeMetadataOperation.test.ts
index cade2be5a6..2a2bf35886 100644
--- a/frontend/src/core/hooks/tools/changeMetadata/useChangeMetadataOperation.test.ts
+++ b/frontend/src/core/hooks/tools/changeMetadata/useChangeMetadataOperation.test.ts
@@ -1,18 +1,18 @@
-import { buildChangeMetadataFormData } from '@app/hooks/tools/changeMetadata/useChangeMetadataOperation';
-import { ChangeMetadataParameters } from '@app/hooks/tools/changeMetadata/useChangeMetadataParameters';
-import { TrappedStatus } from '@app/types/metadata';
-import { describe, expect, test } from 'vitest';
+import { buildChangeMetadataFormData } from "@app/hooks/tools/changeMetadata/useChangeMetadataOperation";
+import { ChangeMetadataParameters } from "@app/hooks/tools/changeMetadata/useChangeMetadataParameters";
+import { TrappedStatus } from "@app/types/metadata";
+import { describe, expect, test } from "vitest";
 
-describe('buildChangeMetadataFormData', () => {
-  const mockFile = new File(['test'], 'test.pdf', { type: 'application/pdf' });
+describe("buildChangeMetadataFormData", () => {
+  const mockFile = new File(["test"], "test.pdf", { type: "application/pdf" });
 
   const defaultParams: ChangeMetadataParameters = {
-    title: '',
-    author: '',
-    subject: '',
-    keywords: '',
-    creator: '',
-    producer: '',
+    title: "",
+    author: "",
+    subject: "",
+    keywords: "",
+    creator: "",
+    producer: "",
     creationDate: null,
     modificationDate: null,
     trapped: TrappedStatus.UNKNOWN,
@@ -22,63 +22,63 @@ describe('buildChangeMetadataFormData', () => {
 
   test.each([
     {
-      name: 'should build FormData with basic parameters',
+      name: "should build FormData with basic parameters",
       params: {
         ...defaultParams,
-        title: 'Test Document',
-        author: 'John Doe',
+        title: "Test Document",
+        author: "John Doe",
         deleteAll: true,
       },
       expectedFormData: {
         fileInput: mockFile,
-        title: 'Test Document',
-        author: 'John Doe',
-        deleteAll: 'true',
+        title: "Test Document",
+        author: "John Doe",
+        deleteAll: "true",
       },
     },
     {
-      name: 'should handle empty string values',
+      name: "should handle empty string values",
       params: defaultParams,
       expectedFormData: {
-        title: '',
-        author: '',
-        subject: '',
-        keywords: '',
-        creator: '',
-        producer: '',
-        creationDate: '',
-        modificationDate: '',
+        title: "",
+        author: "",
+        subject: "",
+        keywords: "",
+        creator: "",
+        producer: "",
+        creationDate: "",
+        modificationDate: "",
         trapped: TrappedStatus.UNKNOWN,
-        deleteAll: 'false',
+        deleteAll: "false",
       },
     },
     {
-      name: 'should include all standard metadata fields',
+      name: "should include all standard metadata fields",
       params: {
         ...defaultParams,
-        title: 'Test Title',
-        author: 'Test Author',
-        subject: 'Test Subject',
-        keywords: 'test, keywords',
-        creator: 'Test Creator',
-        producer: 'Test Producer',
-        creationDate: new Date('2025/01/17 14:30:00'),
-        modificationDate: new Date('2025/01/17 15:30:00'),
+        title: "Test Title",
+        author: "Test Author",
+        subject: "Test Subject",
+        keywords: "test, keywords",
+        creator: "Test Creator",
+        producer: "Test Producer",
+        creationDate: new Date("2025/01/17 14:30:00"),
+        modificationDate: new Date("2025/01/17 15:30:00"),
         trapped: TrappedStatus.TRUE,
       },
       expectedFormData: {
-        title: 'Test Title',
-        author: 'Test Author',
-        subject: 'Test Subject',
-        keywords: 'test, keywords',
-        creator: 'Test Creator',
-        producer: 'Test Producer',
-        creationDate: '2025/01/17 14:30:00',
-        modificationDate: '2025/01/17 15:30:00',
+        title: "Test Title",
+        author: "Test Author",
+        subject: "Test Subject",
+        keywords: "test, keywords",
+        creator: "Test Creator",
+        producer: "Test Producer",
+        creationDate: "2025/01/17 14:30:00",
+        modificationDate: "2025/01/17 15:30:00",
         trapped: TrappedStatus.TRUE,
       },
     },
-  ])('$name', ({ params, expectedFormData }) => {
+  ])("$name", ({ params, expectedFormData }) => {
     const formData = buildChangeMetadataFormData(params, mockFile);
 
     Object.entries(expectedFormData).forEach(([key, value]) => {
@@ -86,59 +86,57 @@ describe('buildChangeMetadataFormData', () => {
     });
   });
 
-  test('should handle custom metadata with proper indexing', () => {
+  test("should handle custom metadata with proper indexing", () => {
     const params = {
       ...defaultParams,
       customMetadata: [
-        { key: 'Department', value: 'Engineering', id: 'custom1' },
-        { key: 'Project', value: 'Test Project', id: 'custom2' },
-        { key: 'Status', value: 'Draft', id: 'custom3' },
+        { key: "Department", value: "Engineering", id: "custom1" },
+        { key: "Project", value: "Test Project", id: "custom2" },
+        { key: "Status", value: "Draft", id: "custom3" },
       ],
     };
 
     const formData = buildChangeMetadataFormData(params, mockFile);
 
-    expect(formData.get('allRequestParams[customKey1]')).toBe('Department');
-    expect(formData.get('allRequestParams[customValue1]')).toBe('Engineering');
-    expect(formData.get('allRequestParams[customKey2]')).toBe('Project');
-    expect(formData.get('allRequestParams[customValue2]')).toBe('Test Project');
-    expect(formData.get('allRequestParams[customKey3]')).toBe('Status');
-    expect(formData.get('allRequestParams[customValue3]')).toBe('Draft');
+    expect(formData.get("allRequestParams[customKey1]")).toBe("Department");
+    expect(formData.get("allRequestParams[customValue1]")).toBe("Engineering");
+    expect(formData.get("allRequestParams[customKey2]")).toBe("Project");
+    expect(formData.get("allRequestParams[customValue2]")).toBe("Test Project");
+    expect(formData.get("allRequestParams[customKey3]")).toBe("Status");
+    expect(formData.get("allRequestParams[customValue3]")).toBe("Draft");
   });
 
-  test('should skip custom metadata with empty keys or values', () => {
+  test("should skip custom metadata with empty keys or values", () => {
     const params = {
       ...defaultParams,
       customMetadata: [
-        { key: 'Department', value: 'Engineering', id: 'custom1' },
-        { key: '', value: 'No Key', id: 'custom2' },
-        { key: 'No Value', value: '', id: 'custom3' },
-        { key: '   ', value: 'Whitespace Key', id: 'custom4' },
-        { key: 'Valid', value: 'Valid Value', id: 'custom5' },
+        { key: "Department", value: "Engineering", id: "custom1" },
+        { key: "", value: "No Key", id: "custom2" },
+        { key: "No Value", value: "", id: "custom3" },
+        { key: "   ", value: "Whitespace Key", id: "custom4" },
+        { key: "Valid", value: "Valid Value", id: "custom5" },
       ],
     };
 
     const formData = buildChangeMetadataFormData(params, mockFile);
 
-    expect(formData.get('allRequestParams[customKey1]')).toBe('Department');
-    expect(formData.get('allRequestParams[customValue1]')).toBe('Engineering');
-    expect(formData.get('allRequestParams[customKey2]')).toBe('Valid');
-    expect(formData.get('allRequestParams[customValue2]')).toBe('Valid Value');
-    expect(formData.get('allRequestParams[customKey3]')).toBeNull();
-    expect(formData.get('allRequestParams[customKey4]')).toBeNull();
+    expect(formData.get("allRequestParams[customKey1]")).toBe("Department");
+    expect(formData.get("allRequestParams[customValue1]")).toBe("Engineering");
+    expect(formData.get("allRequestParams[customKey2]")).toBe("Valid");
+    expect(formData.get("allRequestParams[customValue2]")).toBe("Valid Value");
+    expect(formData.get("allRequestParams[customKey3]")).toBeNull();
+    expect(formData.get("allRequestParams[customKey4]")).toBeNull();
   });
 
-  test('should trim whitespace from custom metadata', () => {
+  test("should trim whitespace from custom metadata", () => {
     const params = {
       ...defaultParams,
-      customMetadata: [
-        { key: '  Department  ', value: '  Engineering  ', id: 'custom1' },
-      ],
+      customMetadata: [{ key: "  Department  ", value: "  Engineering  ", id: "custom1" }],
     };
 
     const formData = buildChangeMetadataFormData(params, mockFile);
 
-    expect(formData.get('allRequestParams[customKey1]')).toBe('Department');
-    expect(formData.get('allRequestParams[customValue1]')).toBe('Engineering');
+    expect(formData.get("allRequestParams[customKey1]")).toBe("Department");
+    expect(formData.get("allRequestParams[customValue1]")).toBe("Engineering");
   });
 });
diff --git a/frontend/src/core/hooks/tools/changeMetadata/useChangeMetadataOperation.ts b/frontend/src/core/hooks/tools/changeMetadata/useChangeMetadataOperation.ts
index b0692e5d6a..d7edcc9be9 100644
--- a/frontend/src/core/hooks/tools/changeMetadata/useChangeMetadataOperation.ts
+++ b/frontend/src/core/hooks/tools/changeMetadata/useChangeMetadataOperation.ts
@@ -1,17 +1,17 @@
-import { useTranslation } from 'react-i18next';
-import { useToolOperation, ToolType } from '@app/hooks/tools/shared/useToolOperation';
-import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
-import { ChangeMetadataParameters, defaultParameters } from '@app/hooks/tools/changeMetadata/useChangeMetadataParameters';
+import { useTranslation } from "react-i18next";
+import { useToolOperation, ToolType } from "@app/hooks/tools/shared/useToolOperation";
+import { createStandardErrorHandler } from "@app/utils/toolErrorHandler";
+import { ChangeMetadataParameters, defaultParameters } from "@app/hooks/tools/changeMetadata/useChangeMetadataParameters";
 
 // Helper function to format Date object to string
 const formatDateForBackend = (date: Date | null): string => {
-  if (!date) return '';
+  if (!date) return "";
   const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, '0');
-  const day = String(date.getDate()).padStart(2, '0');
-  const hours = String(date.getHours()).padStart(2, '0');
-  const minutes = String(date.getMinutes()).padStart(2, '0');
-  const seconds = String(date.getSeconds()).padStart(2, '0');
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  const hours = String(date.getHours()).padStart(2, "0");
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+  const seconds = String(date.getSeconds()).padStart(2, "0");
   return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
 };
 
@@ -57,8 +57,8 @@ export const buildChangeMetadataFormData = (parameters: ChangeMetadataParameters
 export const changeMetadataOperationConfig = {
   toolType: ToolType.singleFile,
   buildFormData: buildChangeMetadataFormData,
-  operationType: 'changeMetadata',
-  endpoint: '/api/v1/misc/update-metadata',
+  operationType: "changeMetadata",
+  endpoint: "/api/v1/misc/update-metadata",
   defaultParameters,
 } as const;
 
@@ -67,7 +67,9 @@ export const useChangeMetadataOperation = () => {
 
   return useToolOperation<ChangeMetadataParameters>({
     ...changeMetadataOperationConfig,
-    filePrefix: t('changeMetadata.filenamePrefix', 'metadata') + '_',
-    getErrorMessage: createStandardErrorHandler(t('changeMetadata.error.failed', 'An error occurred while changing the PDF metadata.'))
+    filePrefix: t("changeMetadata.filenamePrefix", "metadata") + "_",
+    getErrorMessage: createStandardErrorHandler(
+      t("changeMetadata.error.failed", "An error occurred while changing the PDF metadata."),
+    ),
   });
 };
diff --git a/frontend/src/core/hooks/tools/changeMetadata/useChangeMetadataParameters.test.ts b/frontend/src/core/hooks/tools/changeMetadata/useChangeMetadataParameters.test.ts
index f932f658f1..234a0488ee 100644
--- a/frontend/src/core/hooks/tools/changeMetadata/useChangeMetadataParameters.test.ts
+++ b/frontend/src/core/hooks/tools/changeMetadata/useChangeMetadataParameters.test.ts
@@ -1,28 +1,28 @@
-import { renderHook, act } from '@testing-library/react';
-import { defaultParameters, useChangeMetadataParameters } from '@app/hooks/tools/changeMetadata/useChangeMetadataParameters';
-import { TrappedStatus } from '@app/types/metadata';
-import { describe, expect, test } from 'vitest';
+import { renderHook, act } from "@testing-library/react";
+import { defaultParameters, useChangeMetadataParameters } from "@app/hooks/tools/changeMetadata/useChangeMetadataParameters";
+import { TrappedStatus } from "@app/types/metadata";
+import { describe, expect, test } from "vitest";
 
-describe('useChangeMetadataParameters', () => {
-  test('should initialize with default parameters', () => {
+describe("useChangeMetadataParameters", () => {
+  test("should initialize with default parameters", () => {
     const { result } = renderHook(() => useChangeMetadataParameters());
 
     expect(result.current.parameters).toStrictEqual(defaultParameters);
   });
 
-  describe('parameter updates', () => {
+  describe("parameter updates", () => {
     test.each([
-      { paramName: 'title', value: 'Test Document' },
-      { paramName: 'author', value: 'John Doe' },
-      { paramName: 'subject', value: 'Test Subject' },
-      { paramName: 'keywords', value: 'test, metadata' },
-      { paramName: 'creator', value: 'Test Creator' },
-      { paramName: 'producer', value: 'Test Producer' },
-      { paramName: 'creationDate', value: new Date('2025/01/17 14:30:00') },
-      { paramName: 'modificationDate', value: new Date('2025/01/17 15:30:00') },
-      { paramName: 'trapped', value: TrappedStatus.TRUE },
-      { paramName: 'deleteAll', value: true },
-    ] as const)('should update $paramName parameter', ({ paramName, value }) => {
+      { paramName: "title", value: "Test Document" },
+      { paramName: "author", value: "John Doe" },
+      { paramName: "subject", value: "Test Subject" },
+      { paramName: "keywords", value: "test, metadata" },
+      { paramName: "creator", value: "Test Creator" },
+      { paramName: "producer", value: "Test Producer" },
+      { paramName: "creationDate", value: new Date("2025/01/17 14:30:00") },
+      { paramName: "modificationDate", value: new Date("2025/01/17 15:30:00") },
+      { paramName: "trapped", value: TrappedStatus.TRUE },
+      { paramName: "deleteAll", value: true },
+    ] as const)("should update $paramName parameter", ({ paramName, value }) => {
       const { result } = renderHook(() => useChangeMetadataParameters());
 
       act(() => {
@@ -33,21 +33,21 @@ describe('useChangeMetadataParameters', () => {
     });
   });
 
-  describe('validation', () => {
+  describe("validation", () => {
     test.each([
-      { description: 'deleteAll is true', updates: { deleteAll: true }, expected: true },
-      { description: 'has title', updates: { title: 'Test Document' }, expected: true },
-      { description: 'has author', updates: { author: 'John Doe' }, expected: true },
-      { description: 'has subject', updates: { subject: 'Test Subject' }, expected: true },
-      { description: 'has keywords', updates: { keywords: 'test' }, expected: true },
-      { description: 'has creator', updates: { creator: 'Test Creator' }, expected: true },
-      { description: 'has producer', updates: { producer: 'Test Producer' }, expected: true },
-      { description: 'has creation date', updates: { creationDate: new Date('2025/01/17 14:30:00') }, expected: true },
-      { description: 'has modification date', updates: { modificationDate: new Date('2025/01/17 14:30:00') }, expected: true },
-      { description: 'has trapped status', updates: { trapped: TrappedStatus.TRUE }, expected: true },
-      { description: 'no meaningful content', updates: {}, expected: false },
-      { description: 'whitespace only', updates: { title: '   ', author: '   ' }, expected: false },
-    ])('should validate correctly when $description', ({ updates, expected }) => {
+      { description: "deleteAll is true", updates: { deleteAll: true }, expected: true },
+      { description: "has title", updates: { title: "Test Document" }, expected: true },
+      { description: "has author", updates: { author: "John Doe" }, expected: true },
+      { description: "has subject", updates: { subject: "Test Subject" }, expected: true },
+      { description: "has keywords", updates: { keywords: "test" }, expected: true },
+      { description: "has creator", updates: { creator: "Test Creator" }, expected: true },
+      { description: "has producer", updates: { producer: "Test Producer" }, expected: true },
+      { description: "has creation date", updates: { creationDate: new Date("2025/01/17 14:30:00") }, expected: true },
+      { description: "has modification date", updates: { modificationDate: new Date("2025/01/17 14:30:00") }, expected: true },
+      { description: "has trapped status", updates: { trapped: TrappedStatus.TRUE }, expected: true },
+      { description: "no meaningful content", updates: {}, expected: false },
+      { description: "whitespace only", updates: { title: "   ", author: "   " }, expected: false },
+    ])("should validate correctly when $description", ({ updates, expected }) => {
       const { result } = renderHook(() => useChangeMetadataParameters());
 
       act(() => {
@@ -60,10 +60,22 @@ describe('useChangeMetadataParameters', () => {
     });
 
     test.each([
-      { description: 'valid creation date', updates: { title: 'Test', creationDate: new Date('2025/01/17 14:30:00') }, expected: true },
-      { description: 'valid modification date', updates: { title: 'Test', modificationDate: new Date('2025/01/17 14:30:00') }, expected: true },
-      { description: 'empty dates are valid', updates: { title: 'Test', creationDate: null, modificationDate: null }, expected: true },
-    ])('should validate dates correctly with $description', ({ updates, expected }) => {
+      {
+        description: "valid creation date",
+        updates: { title: "Test", creationDate: new Date("2025/01/17 14:30:00") },
+        expected: true,
+      },
+      {
+        description: "valid modification date",
+        updates: { title: "Test", modificationDate: new Date("2025/01/17 14:30:00") },
+        expected: true,
+      },
+      {
+        description: "empty dates are valid",
+        updates: { title: "Test", creationDate: null, modificationDate: null },
+        expected: true,
+      },
+    ])("should validate dates correctly with $description", ({ updates, expected }) => {
       const { result } = renderHook(() => useChangeMetadataParameters());
 
       act(() => {
@@ -76,8 +88,8 @@ describe('useChangeMetadataParameters', () => {
     });
   });
 
-  describe('custom metadata', () => {
-    test('should add custom metadata with sequential IDs', () => {
+  describe("custom metadata", () => {
+    test("should add custom metadata with sequential IDs", () => {
       const { result } = renderHook(() => useChangeMetadataParameters());
 
       act(() => {
@@ -86,13 +98,13 @@ describe('useChangeMetadataParameters', () => {
 
       expect(result.current.parameters.customMetadata).toHaveLength(1);
       expect(result.current.parameters.customMetadata[0]).toEqual({
-        key: '',
-        value: '',
-        id: expect.stringMatching(/^custom\d+$/)
+        key: "",
+        value: "",
+        id: expect.stringMatching(/^custom\d+$/),
       });
     });
 
-    test('should remove custom metadata by ID', () => {
+    test("should remove custom metadata by ID", () => {
       const { result } = renderHook(() => useChangeMetadataParameters());
 
       act(() => {
@@ -108,7 +120,7 @@ describe('useChangeMetadataParameters', () => {
       expect(result.current.parameters.customMetadata).toHaveLength(0);
     });
 
-    test('should update custom metadata by ID', () => {
+    test("should update custom metadata by ID", () => {
       const { result } = renderHook(() => useChangeMetadataParameters());
 
       act(() => {
@@ -118,17 +130,17 @@ describe('useChangeMetadataParameters', () => {
       const customId = result.current.parameters.customMetadata[0].id;
 
       act(() => {
-        result.current.updateCustomMetadata(customId, 'Department', 'Engineering');
+        result.current.updateCustomMetadata(customId, "Department", "Engineering");
       });
 
       expect(result.current.parameters.customMetadata[0]).toEqual({
-        key: 'Department',
-        value: 'Engineering',
-        id: customId
+        key: "Department",
+        value: "Engineering",
+        id: customId,
       });
     });
 
-    test('should validate with custom metadata', () => {
+    test("should validate with custom metadata", () => {
       const { result } = renderHook(() => useChangeMetadataParameters());
 
       act(() => {
@@ -138,13 +150,13 @@ describe('useChangeMetadataParameters', () => {
       const customId = result.current.parameters.customMetadata[0].id;
 
       act(() => {
-        result.current.updateCustomMetadata(customId, 'Department', 'Engineering');
+        result.current.updateCustomMetadata(customId, "Department", "Engineering");
       });
 
       expect(result.current.validateParameters()).toBe(true);
     });
 
-    test('should generate unique IDs for multiple custom entries', () => {
+    test("should generate unique IDs for multiple custom entries", () => {
       const { result } = renderHook(() => useChangeMetadataParameters());
 
       for (let i = 0; i < 3; i++) {
@@ -153,16 +165,16 @@ describe('useChangeMetadataParameters', () => {
         });
       }
 
-      const ids = result.current.parameters.customMetadata.map(entry => entry.id);
+      const ids = result.current.parameters.customMetadata.map((entry) => entry.id);
       expect(ids).toHaveLength(3);
       expect(new Set(ids).size).toBe(3); // All unique
-      expect(ids.every(id => id.startsWith('custom'))).toBe(true);
+      expect(ids.every((id) => id.startsWith("custom"))).toBe(true);
     });
   });
 
-  test('should return correct endpoint name', () => {
+  test("should return correct endpoint name", () => {
     const { result } = renderHook(() => useChangeMetadataParameters());
 
-    expect(result.current.getEndpointName()).toBe('update-metadata');
+    expect(result.current.getEndpointName()).toBe("update-metadata");
   });
 });
diff --git a/frontend/src/core/hooks/tools/changeMetadata/useChangeMetadataParameters.ts b/frontend/src/core/hooks/tools/changeMetadata/useChangeMetadataParameters.ts
index cbc07ed6c9..924779f3e7 100644
--- a/frontend/src/core/hooks/tools/changeMetadata/useChangeMetadataParameters.ts
+++ b/frontend/src/core/hooks/tools/changeMetadata/useChangeMetadataParameters.ts
@@ -1,6 +1,6 @@
-import { BaseParameters } from '@app/types/parameters';
-import { TrappedStatus, CustomMetadataEntry } from '@app/types/metadata';
-import { useBaseParameters, BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
+import { BaseParameters } from "@app/types/parameters";
+import { TrappedStatus, CustomMetadataEntry } from "@app/types/metadata";
+import { useBaseParameters, BaseParametersHook } from "@app/hooks/tools/shared/useBaseParameters";
 
 export interface ChangeMetadataParameters extends BaseParameters {
   // Standard PDF metadata fields
@@ -26,12 +26,12 @@ export interface ChangeMetadataParameters extends BaseParameters {
 }
 
 export const defaultParameters: ChangeMetadataParameters = {
-  title: '',
-  author: '',
-  subject: '',
-  keywords: '',
-  creator: '',
-  producer: '',
+  title: "",
+  author: "",
+  subject: "",
+  keywords: "",
+  creator: "",
+  producer: "",
   creationDate: null,
   modificationDate: null,
   trapped: TrappedStatus.UNKNOWN,
@@ -45,39 +45,36 @@ let customMetadataIdCounter = 1;
 // Utility functions that can work with external parameters
 export const createCustomMetadataFunctions = (
   parameters: ChangeMetadataParameters,
-  onParameterChange: <K extends keyof ChangeMetadataParameters>(key: K, value: ChangeMetadataParameters[K]) => void
+  onParameterChange: <K extends keyof ChangeMetadataParameters>(key: K, value: ChangeMetadataParameters[K]) => void,
 ) => {
-  const addCustomMetadata = (key: string = '', value: string = '') => {
+  const addCustomMetadata = (key: string = "", value: string = "") => {
     const newEntry: CustomMetadataEntry = {
       key,
       value,
       id: `custom${customMetadataIdCounter++}`,
     };
 
-    onParameterChange('customMetadata', [
-      ...parameters.customMetadata,
-      newEntry,
-    ]);
+    onParameterChange("customMetadata", [...parameters.customMetadata, newEntry]);
   };
 
   const removeCustomMetadata = (id: string) => {
-    onParameterChange('customMetadata',
-      parameters.customMetadata.filter(entry => entry.id !== id)
+    onParameterChange(
+      "customMetadata",
+      parameters.customMetadata.filter((entry) => entry.id !== id),
     );
   };
 
   const updateCustomMetadata = (id: string, key: string, value: string) => {
-    onParameterChange('customMetadata',
-      parameters.customMetadata.map(entry =>
-        entry.id === id ? { ...entry, key, value } : entry
-      )
+    onParameterChange(
+      "customMetadata",
+      parameters.customMetadata.map((entry) => (entry.id === id ? { ...entry, key, value } : entry)),
     );
   };
 
   return {
     addCustomMetadata,
     removeCustomMetadata,
-    updateCustomMetadata
+    updateCustomMetadata,
   };
 };
 
@@ -90,20 +87,18 @@ const validateParameters = (params: ChangeMetadataParameters): boolean => {
 
   // At least one field should have content for the operation to be meaningful
   const hasStandardMetadata = !!(
-    params.title.trim()
-    || params.author.trim()
-    || params.subject.trim()
-    || params.keywords.trim()
-    || params.creator.trim()
-    || params.producer.trim()
-    || params.creationDate
-    || params.modificationDate
-    || params.trapped !== TrappedStatus.UNKNOWN
+    params.title.trim() ||
+    params.author.trim() ||
+    params.subject.trim() ||
+    params.keywords.trim() ||
+    params.creator.trim() ||
+    params.producer.trim() ||
+    params.creationDate ||
+    params.modificationDate ||
+    params.trapped !== TrappedStatus.UNKNOWN
   );
 
-  const hasCustomMetadata = params.customMetadata.some(
-    entry => entry.key.trim() && entry.value.trim()
-  );
+  const hasCustomMetadata = params.customMetadata.some((entry) => entry.key.trim() && entry.value.trim());
 
   return hasStandardMetadata || hasCustomMetadata;
 };
@@ -117,7 +112,7 @@ export type ChangeMetadataParametersHook = BaseParametersHook<ChangeMetadataPara
 export const useChangeMetadataParameters = (): ChangeMetadataParametersHook => {
   const base = useBaseParameters({
     defaultParameters,
-    endpointName: 'update-metadata',
+    endpointName: "update-metadata",
     validateFn: validateParameters,
   });
 
@@ -131,6 +126,6 @@ export const useChangeMetadataParameters = (): ChangeMetadataParametersHook => {
     ...base,
     addCustomMetadata,
     removeCustomMetadata,
-    updateCustomMetadata
+    updateCustomMetadata,
   };
 };
diff --git a/frontend/src/core/hooks/tools/changeMetadata/useMetadataExtraction.ts b/frontend/src/core/hooks/tools/changeMetadata/useMetadataExtraction.ts
index 9df398b661..e0d6e78131 100644
--- a/frontend/src/core/hooks/tools/changeMetadata/useMetadataExtraction.ts
+++ b/frontend/src/core/hooks/tools/changeMetadata/useMetadataExtraction.ts
@@ -41,20 +41,20 @@ export const useMetadataExtraction = (params: MetadataExtractionParams) => {
         const metadata = result.metadata;
 
         // Pre-populate all fields with extracted metadata
-        params.updateParameter('title', metadata.title);
-        params.updateParameter('author', metadata.author);
-        params.updateParameter('subject', metadata.subject);
-        params.updateParameter('keywords', metadata.keywords);
-        params.updateParameter('creator', metadata.creator);
-        params.updateParameter('producer', metadata.producer);
-        params.updateParameter('creationDate', metadata.creationDate ? new Date(metadata.creationDate) : null);
-        params.updateParameter('modificationDate', metadata.modificationDate ? new Date(metadata.modificationDate) : null);
-        params.updateParameter('trapped', metadata.trapped);
-        params.updateParameter('customMetadata', metadata.customMetadata);
+        params.updateParameter("title", metadata.title);
+        params.updateParameter("author", metadata.author);
+        params.updateParameter("subject", metadata.subject);
+        params.updateParameter("keywords", metadata.keywords);
+        params.updateParameter("creator", metadata.creator);
+        params.updateParameter("producer", metadata.producer);
+        params.updateParameter("creationDate", metadata.creationDate ? new Date(metadata.creationDate) : null);
+        params.updateParameter("modificationDate", metadata.modificationDate ? new Date(metadata.modificationDate) : null);
+        params.updateParameter("trapped", metadata.trapped);
+        params.updateParameter("customMetadata", metadata.customMetadata);
 
         setHasExtractedMetadata(true);
       } else {
-        console.warn('Failed to extract metadata:', result.error);
+        console.warn("Failed to extract metadata:", result.error);
       }
 
       setIsExtractingMetadata(false);
diff --git a/frontend/src/core/hooks/tools/changePermissions/useChangePermissionsOperation.test.ts b/frontend/src/core/hooks/tools/changePermissions/useChangePermissionsOperation.test.ts
index 22cd5c67c5..bfee0394aa 100644
--- a/frontend/src/core/hooks/tools/changePermissions/useChangePermissionsOperation.test.ts
+++ b/frontend/src/core/hooks/tools/changePermissions/useChangePermissionsOperation.test.ts
@@ -1,44 +1,50 @@
-import { describe, expect, test, vi, beforeEach } from 'vitest';
-import { renderHook } from '@testing-library/react';
-import { useChangePermissionsOperation } from '@app/hooks/tools/changePermissions/useChangePermissionsOperation';
-import type { ChangePermissionsParameters } from '@app/hooks/tools/changePermissions/useChangePermissionsParameters';
+import { describe, expect, test, vi, beforeEach } from "vitest";
+import { renderHook } from "@testing-library/react";
+import { useChangePermissionsOperation } from "@app/hooks/tools/changePermissions/useChangePermissionsOperation";
+import type { ChangePermissionsParameters } from "@app/hooks/tools/changePermissions/useChangePermissionsParameters";
 
 // Mock the useToolOperation hook
-vi.mock('../shared/useToolOperation', async () => {
-  const actual = await vi.importActual('../shared/useToolOperation');  // Need to keep ToolType etc.
+vi.mock("../shared/useToolOperation", async () => {
+  const actual = await vi.importActual("../shared/useToolOperation"); // Need to keep ToolType etc.
   return {
     ...actual,
-    useToolOperation: vi.fn()
+    useToolOperation: vi.fn(),
   };
 });
 
 // Mock the translation hook
 const mockT = vi.fn((key: string) => `translated-${key}`);
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({ t: mockT })
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: mockT }),
 }));
 
 // Mock the error handler
-vi.mock('../../../utils/toolErrorHandler', () => ({
-  createStandardErrorHandler: vi.fn(() => 'error-handler-function')
+vi.mock("../../../utils/toolErrorHandler", () => ({
+  createStandardErrorHandler: vi.fn(() => "error-handler-function"),
 }));
 
 // Import the mocked function
-import { SingleFileToolOperationConfig, ToolOperationHook, ToolType, useToolOperation } from '@app/hooks/tools/shared/useToolOperation';
+import {
+  SingleFileToolOperationConfig,
+  ToolOperationHook,
+  ToolType,
+  useToolOperation,
+} from "@app/hooks/tools/shared/useToolOperation";
 
-describe('useChangePermissionsOperation', () => {
+describe("useChangePermissionsOperation", () => {
   const mockUseToolOperation = vi.mocked(useToolOperation);
 
-  const getToolConfig = () => mockUseToolOperation.mock.calls[0][0] as SingleFileToolOperationConfig<ChangePermissionsParameters>;
+  const getToolConfig = () =>
+    mockUseToolOperation.mock.calls[0][0] as SingleFileToolOperationConfig<ChangePermissionsParameters>;
 
   const mockToolOperationReturn: ToolOperationHook<unknown> = {
     files: [],
     thumbnails: [],
     downloadUrl: null,
-    downloadFilename: '',
+    downloadFilename: "",
     isLoading: false,
     errorMessage: null,
-    status: '',
+    status: "",
     isGeneratingThumbnails: false,
     progress: null,
     executeOperation: vi.fn(),
@@ -84,37 +90,34 @@ describe('useChangePermissionsOperation', () => {
       preventPrinting: true,
       preventPrintingFaithful: true,
     },
-  ])('should create form data correctly', (testParameters: ChangePermissionsParameters) => {
+  ])("should create form data correctly", (testParameters: ChangePermissionsParameters) => {
     renderHook(() => useChangePermissionsOperation());
 
     const callArgs = getToolConfig();
     const buildFormData = callArgs.buildFormData;
 
-    const testFile = new File(['test content'], 'test.pdf', { type: 'application/pdf' });
+    const testFile = new File(["test content"], "test.pdf", { type: "application/pdf" });
     const formData = buildFormData(testParameters, testFile);
 
     // Verify the form data contains the file
-    expect(formData.get('fileInput')).toBe(testFile);
+    expect(formData.get("fileInput")).toBe(testFile);
 
-    (Object.keys(testParameters) as Array<keyof ChangePermissionsParameters>).forEach(key => {
+    (Object.keys(testParameters) as Array<keyof ChangePermissionsParameters>).forEach((key) => {
       expect(formData.get(key), `Parameter ${key} should be set correctly`).toBe(testParameters[key].toString());
     });
   });
 
-  test('should use correct translation for error messages', () => {
+  test("should use correct translation for error messages", () => {
     renderHook(() => useChangePermissionsOperation());
 
-    expect(mockT).toHaveBeenCalledWith(
-      'changePermissions.error.failed',
-      'An error occurred while changing PDF permissions.'
-    );
+    expect(mockT).toHaveBeenCalledWith("changePermissions.error.failed", "An error occurred while changing PDF permissions.");
   });
 
   test.each([
-    { property: 'toolType' as const, expectedValue: ToolType.singleFile },
-    { property: 'endpoint' as const, expectedValue: '/api/v1/security/add-password' },
-    { property: 'operationType' as const, expectedValue: 'changePermissions' }
-  ])('should configure $property correctly', ({ property, expectedValue }) => {
+    { property: "toolType" as const, expectedValue: ToolType.singleFile },
+    { property: "endpoint" as const, expectedValue: "/api/v1/security/add-password" },
+    { property: "operationType" as const, expectedValue: "changePermissions" },
+  ])("should configure $property correctly", ({ property, expectedValue }) => {
     renderHook(() => useChangePermissionsOperation());
 
     const callArgs = getToolConfig();
diff --git a/frontend/src/core/hooks/tools/changePermissions/useChangePermissionsOperation.ts b/frontend/src/core/hooks/tools/changePermissions/useChangePermissionsOperation.ts
index e854b58655..99d1482899 100644
--- a/frontend/src/core/hooks/tools/changePermissions/useChangePermissionsOperation.ts
+++ b/frontend/src/core/hooks/tools/changePermissions/useChangePermissionsOperation.ts
@@ -1,14 +1,15 @@
-import { useTranslation } from 'react-i18next';
-import { ToolType, useToolOperation } from '@app/hooks/tools/shared/useToolOperation';
-import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
-import { ChangePermissionsParameters, defaultParameters } from '@app/hooks/tools/changePermissions/useChangePermissionsParameters';
+import { useTranslation } from "react-i18next";
+import { ToolType, useToolOperation } from "@app/hooks/tools/shared/useToolOperation";
+import { createStandardErrorHandler } from "@app/utils/toolErrorHandler";
+import {
+  ChangePermissionsParameters,
+  defaultParameters,
+} from "@app/hooks/tools/changePermissions/useChangePermissionsParameters";
 
-export const getFormData = ((parameters: ChangePermissionsParameters) => {
+export const getFormData = (parameters: ChangePermissionsParameters) => {
   if (!parameters) return [];
-  return Object.entries(parameters).map(([key, value]) =>
-    [key, (value ?? false).toString()]
-  ) as string[][];
-});
+  return Object.entries(parameters).map(([key, value]) => [key, (value ?? false).toString()]) as string[][];
+};
 
 // Static function that can be used by both the hook and automation executor
 export const buildChangePermissionsFormData = (parameters: ChangePermissionsParameters, file: File): FormData => {
@@ -27,8 +28,8 @@ export const buildChangePermissionsFormData = (parameters: ChangePermissionsPara
 export const changePermissionsOperationConfig = {
   toolType: ToolType.singleFile,
   buildFormData: buildChangePermissionsFormData,
-  operationType: 'changePermissions',
-  endpoint: '/api/v1/security/add-password', // Change Permissions is a fake endpoint for the Add Password tool
+  operationType: "changePermissions",
+  endpoint: "/api/v1/security/add-password", // Change Permissions is a fake endpoint for the Add Password tool
   defaultParameters,
 } as const;
 
@@ -38,7 +39,7 @@ export const useChangePermissionsOperation = () => {
   return useToolOperation({
     ...changePermissionsOperationConfig,
     getErrorMessage: createStandardErrorHandler(
-      t('changePermissions.error.failed', 'An error occurred while changing PDF permissions.')
+      t("changePermissions.error.failed", "An error occurred while changing PDF permissions."),
     ),
   });
 };
diff --git a/frontend/src/core/hooks/tools/changePermissions/useChangePermissionsParameters.test.ts b/frontend/src/core/hooks/tools/changePermissions/useChangePermissionsParameters.test.ts
index 585f1c1725..ac47d159df 100644
--- a/frontend/src/core/hooks/tools/changePermissions/useChangePermissionsParameters.test.ts
+++ b/frontend/src/core/hooks/tools/changePermissions/useChangePermissionsParameters.test.ts
@@ -1,68 +1,72 @@
-import { describe, expect, test } from 'vitest';
-import { renderHook, act } from '@testing-library/react';
-import { useChangePermissionsParameters, defaultParameters, ChangePermissionsParameters } from '@app/hooks/tools/changePermissions/useChangePermissionsParameters';
+import { describe, expect, test } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import {
+  useChangePermissionsParameters,
+  defaultParameters,
+  ChangePermissionsParameters,
+} from "@app/hooks/tools/changePermissions/useChangePermissionsParameters";
 
-describe('useChangePermissionsParameters', () => {
-  test('should initialize with default parameters', () => {
+describe("useChangePermissionsParameters", () => {
+  test("should initialize with default parameters", () => {
     const { result } = renderHook(() => useChangePermissionsParameters());
 
     expect(result.current.parameters).toStrictEqual(defaultParameters);
   });
 
-  test('should update individual boolean parameters', () => {
+  test("should update individual boolean parameters", () => {
     const { result } = renderHook(() => useChangePermissionsParameters());
 
     act(() => {
-      result.current.updateParameter('preventAssembly', true);
+      result.current.updateParameter("preventAssembly", true);
     });
 
     expect(result.current.parameters.preventAssembly).toBe(true);
     expect(result.current.parameters.preventPrinting).toBe(false); // Other parameters should remain unchanged
 
     act(() => {
-      result.current.updateParameter('preventPrinting', true);
+      result.current.updateParameter("preventPrinting", true);
     });
 
     expect(result.current.parameters.preventPrinting).toBe(true);
     expect(result.current.parameters.preventAssembly).toBe(true);
   });
 
-  test('should update all permission parameters', () => {
+  test("should update all permission parameters", () => {
     const { result } = renderHook(() => useChangePermissionsParameters());
 
     const permissionKeys = Object.keys(defaultParameters) as Array<keyof ChangePermissionsParameters>;
 
     // Set all to true
     act(() => {
-      permissionKeys.forEach(key => {
+      permissionKeys.forEach((key) => {
         result.current.updateParameter(key, true);
       });
     });
 
-    permissionKeys.forEach(key => {
+    permissionKeys.forEach((key) => {
       expect(result.current.parameters[key]).toBe(true);
     });
 
     // Set all to false
     act(() => {
-      permissionKeys.forEach(key => {
+      permissionKeys.forEach((key) => {
         result.current.updateParameter(key, false);
       });
     });
 
-    permissionKeys.forEach(key => {
+    permissionKeys.forEach((key) => {
       expect(result.current.parameters[key]).toBe(false);
     });
   });
 
-  test('should reset parameters to defaults', () => {
+  test("should reset parameters to defaults", () => {
     const { result } = renderHook(() => useChangePermissionsParameters());
 
     // First, change some parameters
     act(() => {
-      result.current.updateParameter('preventAssembly', true);
-      result.current.updateParameter('preventPrinting', true);
-      result.current.updateParameter('preventModify', true);
+      result.current.updateParameter("preventAssembly", true);
+      result.current.updateParameter("preventPrinting", true);
+      result.current.updateParameter("preventModify", true);
     });
 
     expect(result.current.parameters.preventAssembly).toBe(true);
@@ -77,13 +81,13 @@ describe('useChangePermissionsParameters', () => {
     expect(result.current.parameters).toStrictEqual(defaultParameters);
   });
 
-  test('should return correct endpoint name', () => {
+  test("should return correct endpoint name", () => {
     const { result } = renderHook(() => useChangePermissionsParameters());
 
-    expect(result.current.getEndpointName()).toBe('add-password');
+    expect(result.current.getEndpointName()).toBe("add-password");
   });
 
-  test('should always validate as true', () => {
+  test("should always validate as true", () => {
     const { result } = renderHook(() => useChangePermissionsParameters());
 
     // Default state should be valid
@@ -91,8 +95,8 @@ describe('useChangePermissionsParameters', () => {
 
     // Set some restrictions - should still be valid
     act(() => {
-      result.current.updateParameter('preventAssembly', true);
-      result.current.updateParameter('preventPrinting', true);
+      result.current.updateParameter("preventAssembly", true);
+      result.current.updateParameter("preventPrinting", true);
     });
 
     expect(result.current.validateParameters()).toBe(true);
@@ -100,7 +104,7 @@ describe('useChangePermissionsParameters', () => {
     // Set all restrictions - should still be valid
     act(() => {
       const permissionKeys = Object.keys(defaultParameters) as Array<keyof ChangePermissionsParameters>;
-      permissionKeys.forEach(key => {
+      permissionKeys.forEach((key) => {
         result.current.updateParameter(key, true);
       });
     });
diff --git a/frontend/src/core/hooks/tools/changePermissions/useChangePermissionsParameters.ts b/frontend/src/core/hooks/tools/changePermissions/useChangePermissionsParameters.ts
index 4a28df2a54..7a72e96e12 100644
--- a/frontend/src/core/hooks/tools/changePermissions/useChangePermissionsParameters.ts
+++ b/frontend/src/core/hooks/tools/changePermissions/useChangePermissionsParameters.ts
@@ -1,5 +1,5 @@
-import { BaseParameters } from '@app/types/parameters';
-import { useBaseParameters, BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
+import { BaseParameters } from "@app/types/parameters";
+import { useBaseParameters, BaseParametersHook } from "@app/hooks/tools/shared/useBaseParameters";
 
 export interface ChangePermissionsParameters extends BaseParameters {
   preventAssembly: boolean;
@@ -28,6 +28,6 @@ export type ChangePermissionsParametersHook = BaseParametersHook<ChangePermissio
 export const useChangePermissionsParameters = (): ChangePermissionsParametersHook => {
   return useBaseParameters({
     defaultParameters,
-    endpointName: 'add-password', // Change Permissions is a fake endpoint for the Add Password tool
+    endpointName: "add-password", // Change Permissions is a fake endpoint for the Add Password tool
   });
 };
diff --git a/frontend/src/core/hooks/tools/compare/operationUtils.ts b/frontend/src/core/hooks/tools/compare/operationUtils.ts
index 552ee8dd37..f33ca0479d 100644
--- a/frontend/src/core/hooks/tools/compare/operationUtils.ts
+++ b/frontend/src/core/hooks/tools/compare/operationUtils.ts
@@ -1,15 +1,15 @@
-import { pdfWorkerManager } from '@app/services/pdfWorkerManager';
-import { appendWord as sharedAppendWord } from '@app/utils/textDiff';
-import { PARAGRAPH_SENTINEL } from '@app/types/compare';
-import type { StirlingFile } from '@app/types/fileContext';
-import type { PDFPageProxy, TextContent, TextItem } from 'pdfjs-dist/types/src/display/api';
+import { pdfWorkerManager } from "@app/services/pdfWorkerManager";
+import { appendWord as sharedAppendWord } from "@app/utils/textDiff";
+import { PARAGRAPH_SENTINEL } from "@app/types/compare";
+import type { StirlingFile } from "@app/types/fileContext";
+import type { PDFPageProxy, TextContent, TextItem } from "pdfjs-dist/types/src/display/api";
 import type {
   CompareChange,
   CompareDiffToken,
   CompareResultData,
   TokenBoundingBox,
   CompareParagraph,
-} from '@app/types/compare';
+} from "@app/types/compare";
 
 export interface TokenMetadata {
   page: number;
@@ -24,10 +24,10 @@ export interface ExtractedContent {
   paragraphs: CompareParagraph[];
 }
 
-const measurementCanvas = typeof document !== 'undefined' ? document.createElement('canvas') : null;
-const measurementContext = measurementCanvas ? measurementCanvas.getContext('2d') : null;
+const measurementCanvas = typeof document !== "undefined" ? document.createElement("canvas") : null;
+const measurementContext = measurementCanvas ? measurementCanvas.getContext("2d") : null;
 const textMeasurementCache: Map<string, number> | null = measurementContext ? new Map() : null;
-let lastMeasurementFont = '';
+let lastMeasurementFont = "";
 
 const DEFAULT_CHAR_WIDTH = 1;
 const DEFAULT_SPACE_WIDTH = 0.33;
@@ -35,7 +35,7 @@ const DEFAULT_SPACE_WIDTH = 0.33;
 export const measureTextWidth = (fontSpec: string, text: string): number => {
   if (!measurementContext) {
     if (!text) return 0;
-    if (text === ' ') return DEFAULT_SPACE_WIDTH;
+    if (text === " ") return DEFAULT_SPACE_WIDTH;
     return text.length * DEFAULT_CHAR_WIDTH;
   }
 
@@ -57,7 +57,7 @@ export const measureTextWidth = (fontSpec: string, text: string): number => {
 
 export const appendWord = (existing: string, word: string) => {
   if (!existing) {
-    return sharedAppendWord('', word);
+    return sharedAppendWord("", word);
   }
   return sharedAppendWord(existing, word);
 };
@@ -65,14 +65,15 @@ export const appendWord = (existing: string, word: string) => {
 export const aggregateTotals = (tokens: CompareDiffToken[]) => {
   return tokens.reduce(
     (totals, token) => {
-      if (token.text === '\uE000PARA') { // PARAGRAPH_SENTINEL safeguard if serialized
+      if (token.text === "\uE000PARA") {
+        // PARAGRAPH_SENTINEL safeguard if serialized
         return totals;
       }
       switch (token.type) {
-        case 'added':
+        case "added":
           totals.added += 1;
           break;
-        case 'removed':
+        case "removed":
           totals.removed += 1;
           break;
         default:
@@ -80,14 +81,14 @@ export const aggregateTotals = (tokens: CompareDiffToken[]) => {
       }
       return totals;
     },
-    { added: 0, removed: 0, unchanged: 0 }
+    { added: 0, removed: 0, unchanged: 0 },
   );
 };
 
 export const buildChanges = (
   tokens: CompareDiffToken[],
   baseMetadata: TokenMetadata[],
-  comparisonMetadata: TokenMetadata[]
+  comparisonMetadata: TokenMetadata[],
 ): CompareChange[] => {
   const changes: CompareChange[] = [];
   let baseIndex = 0;
@@ -116,7 +117,10 @@ export const buildChanges = (
         current.comparison.text = current.comparison.text.trim();
       }
 
-      if ((current.base?.text && current.base.text.length > 0) || (current.comparison?.text && current.comparison.text.length > 0)) {
+      if (
+        (current.base?.text && current.base.text.length > 0) ||
+        (current.comparison?.text && current.comparison.text.length > 0)
+      ) {
         changes.push(current);
       }
     }
@@ -126,7 +130,7 @@ export const buildChanges = (
   };
 
   for (const token of tokens) {
-    if (token.type === 'removed') {
+    if (token.type === "removed") {
       const meta = baseMetadata[baseIndex] ?? null;
       const active = ensureCurrent();
       const paragraph = meta?.paragraph ?? null;
@@ -170,7 +174,7 @@ export const buildChanges = (
       continue;
     }
 
-    if (token.type === 'added') {
+    if (token.type === "added") {
       const meta = comparisonMetadata[comparisonIndex] ?? null;
       const active = ensureCurrent();
       const paragraph = meta?.paragraph ?? null;
@@ -253,15 +257,15 @@ export const createSummaryFile = (result: CompareResultData): File => {
     warnings: result.warnings,
   };
 
-  const filename = `compare-summary-${new Date(result.totals.processedAt).toISOString().replace(/[:.]/g, '-')}.json`;
-  return new File([JSON.stringify(exportPayload, null, 2)], filename, { type: 'application/json' });
+  const filename = `compare-summary-${new Date(result.totals.processedAt).toISOString().replace(/[:.]/g, "-")}.json`;
+  return new File([JSON.stringify(exportPayload, null, 2)], filename, { type: "application/json" });
 };
 
 export const clamp = (value: number): number => Math.min(1, Math.max(0, value));
 
-export const getWorkerErrorCode = (value: unknown): 'EMPTY_TEXT' | 'TOO_LARGE' | 'TOO_DISSIMILAR' | undefined => {
-  if (typeof value === 'object' && value !== null && 'code' in value) {
-    const potentialCode = (value as { code?: 'EMPTY_TEXT' | 'TOO_LARGE' | 'TOO_DISSIMILAR' }).code;
+export const getWorkerErrorCode = (value: unknown): "EMPTY_TEXT" | "TOO_LARGE" | "TOO_DISSIMILAR" | undefined => {
+  if (typeof value === "object" && value !== null && "code" in value) {
+    const potentialCode = (value as { code?: "EMPTY_TEXT" | "TOO_LARGE" | "TOO_DISSIMILAR" }).code;
     return potentialCode;
   }
   return undefined;
@@ -278,7 +282,7 @@ export const filterTokensForDiff = (
   const map: number[] = [];
   for (let i = 0; i < tokens.length; i += 1) {
     const t = tokens[i];
-    const isPara = t === PARAGRAPH_SENTINEL || t.startsWith('\uE000') || t.includes('PARA');
+    const isPara = t === PARAGRAPH_SENTINEL || t.startsWith("\uE000") || t.includes("PARA");
     if (!isPara) {
       outTokens.push(t);
       if (metadata[i]) outMeta.push(metadata[i]);
@@ -305,28 +309,28 @@ export const extractContentFromPdf = async (file: StirlingFile): Promise<Extract
       const viewport = page.getViewport({ scale: 1 });
       const content: TextContent = await page.getTextContent({
         disableCombineTextItems: true,
-      } as Parameters<PDFPageProxy['getTextContent']>[0]);
+      } as Parameters<PDFPageProxy["getTextContent"]>[0]);
       const styles: Record<string, { fontFamily?: string; ascent?: number; descent?: number }> = content.styles ?? {};
 
       let paragraphIndex = 1;
-      let paragraphBuffer = '';
+      let paragraphBuffer = "";
       let prevItem: TextItem | null = null;
 
       pageSizes.push({ width: viewport.width, height: viewport.height });
 
       const normalizeToken = (s: string) =>
         s
-          .normalize('NFKC')
-          .replace(/[\u00AD\u200B-\u200F\u202A-\u202E]/g, '')
+          .normalize("NFKC")
+          .replace(/[\u00AD\u200B-\u200F\u202A-\u202E]/g, "")
           .replace(/[“”]/g, '"')
           .replace(/[‘’]/g, "'")
-          .replace(/[–—]/g, '-')
-          .replace(/\u00A0/g, ' ')
-          .replace(/\s+/g, ' ')
+          .replace(/[–—]/g, "-")
+          .replace(/\u00A0/g, " ")
+          .replace(/\s+/g, " ")
           .trim();
 
       const isParagraphBreak = (curr: TextItem, prev: TextItem | null) => {
-        const hasHardBreak = 'hasEOL' in curr && (curr as TextItem).hasEOL;
+        const hasHardBreak = "hasEOL" in curr && (curr as TextItem).hasEOL;
         if (hasHardBreak) return true;
         if (!prev) return false;
         const prevY = prev.transform[5];
@@ -391,26 +395,26 @@ export const extractContentFromPdf = async (file: StirlingFile): Promise<Extract
         const rawText = item.str;
         const totalLen = Math.max(rawText.length, 1);
         const textStyle = item.fontName ? styles[item.fontName] : undefined;
-        const fontFamily = textStyle?.fontFamily ?? 'sans-serif';
+        const fontFamily = textStyle?.fontFamily ?? "sans-serif";
         const fontScale = Math.max(0.5, Math.hypot(item.transform[0], item.transform[1]) || 0);
         const fontSpec = `${fontScale}px ${fontFamily}`;
 
         const weights: number[] = new Array(totalLen);
-        let runningText = '';
+        let runningText = "";
         let previousAdvance = 0;
         for (let i = 0; i < totalLen; i += 1) {
           runningText += rawText[i];
           const advance = measureTextWidth(fontSpec, runningText);
           let width = advance - previousAdvance;
           if (!Number.isFinite(width) || width <= 0) {
-            width = rawText[i] === ' ' ? DEFAULT_SPACE_WIDTH : DEFAULT_CHAR_WIDTH;
+            width = rawText[i] === " " ? DEFAULT_SPACE_WIDTH : DEFAULT_CHAR_WIDTH;
           }
           weights[i] = width;
           previousAdvance = advance;
         }
         if (!Number.isFinite(previousAdvance) || previousAdvance <= 0) {
           for (let i = 0; i < totalLen; i += 1) {
-            weights[i] = rawText[i] === ' ' ? DEFAULT_SPACE_WIDTH : DEFAULT_CHAR_WIDTH;
+            weights[i] = rawText[i] === " " ? DEFAULT_SPACE_WIDTH : DEFAULT_CHAR_WIDTH;
           }
         }
         const prefix: number[] = new Array(totalLen + 1);
@@ -439,21 +443,15 @@ export const extractContentFromPdf = async (file: StirlingFile): Promise<Extract
         }
 
         const [baselineStart, baselineEnd, verticalEnd] = transformed;
-        const baselineVector: [number, number] = [
-          baselineEnd[0] - baselineStart[0],
-          baselineEnd[1] - baselineStart[1],
-        ];
-        const verticalVector: [number, number] = [
-          verticalEnd[0] - baselineStart[0],
-          verticalEnd[1] - baselineStart[1],
-        ];
+        const baselineVector: [number, number] = [baselineEnd[0] - baselineStart[0], baselineEnd[1] - baselineStart[1]];
+        const verticalVector: [number, number] = [verticalEnd[0] - baselineStart[0], verticalEnd[1] - baselineStart[1]];
         const baselineMagnitude = Math.hypot(baselineVector[0], baselineVector[1]);
         const verticalMagnitude = Math.hypot(verticalVector[0], verticalVector[1]);
         const hasOrientationVectors = baselineMagnitude > 1e-6 && verticalMagnitude > 1e-6;
 
         const font = item.fontName ? styles[item.fontName] : undefined;
-        const ascent = typeof font?.ascent === 'number' ? Math.max(0.7, Math.min(1.1, font.ascent)) : 0.9;
-        const descent = typeof font?.descent === 'number' ? Math.max(0.0, Math.min(0.5, Math.abs(font.descent))) : 0.2;
+        const ascent = typeof font?.ascent === "number" ? Math.max(0.7, Math.min(1.1, font.ascent)) : 0.9;
+        const descent = typeof font?.descent === "number" ? Math.max(0.0, Math.min(0.5, Math.abs(font.descent))) : 0.2;
         const verticalScale = Math.min(1, Math.max(0.75, ascent + descent));
 
         const wordRegex = /[A-Za-z0-9]+|[^\sA-Za-z0-9]/g;
@@ -541,9 +539,9 @@ export const extractContentFromPdf = async (file: StirlingFile): Promise<Extract
         if (isParagraphBreak(item as TextItem, prevItem)) {
           if (paragraphBuffer.trim().length > 0) {
             paragraphs.push({ page: pageIndex, paragraph: paragraphIndex, text: paragraphBuffer.trim() });
-            paragraphBuffer = '';
+            paragraphBuffer = "";
           }
-          tokens.push('\uE000PARA');
+          tokens.push("\uE000PARA");
           metadata.push({ page: pageIndex, paragraph: paragraphIndex, bbox: null });
           paragraphIndex += 1;
         }
@@ -552,8 +550,8 @@ export const extractContentFromPdf = async (file: StirlingFile): Promise<Extract
 
       if (paragraphBuffer.trim().length > 0) {
         paragraphs.push({ page: pageIndex, paragraph: paragraphIndex, text: paragraphBuffer.trim() });
-        paragraphBuffer = '';
-        tokens.push('\uE000PARA');
+        paragraphBuffer = "";
+        tokens.push("\uE000PARA");
         metadata.push({ page: pageIndex, paragraph: paragraphIndex, bbox: null });
       }
     }
@@ -562,5 +560,3 @@ export const extractContentFromPdf = async (file: StirlingFile): Promise<Extract
     pdfWorkerManager.destroyDocument(pdfDoc);
   }
 };
-
-
diff --git a/frontend/src/core/hooks/tools/compare/useCompareOperation.ts b/frontend/src/core/hooks/tools/compare/useCompareOperation.ts
index 0dd3706f05..93d359c986 100644
--- a/frontend/src/core/hooks/tools/compare/useCompareOperation.ts
+++ b/frontend/src/core/hooks/tools/compare/useCompareOperation.ts
@@ -1,5 +1,5 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
 import {
   ADDITION_HIGHLIGHT,
   CompareDiffToken,
@@ -9,11 +9,11 @@ import {
   CompareWorkerResponse,
   CompareWorkerWarnings,
   REMOVAL_HIGHLIGHT,
-} from '@app/types/compare';
-import { CompareParameters } from '@app/hooks/tools/compare/useCompareParameters';
-import { ToolOperationHook } from '@app/hooks/tools/shared/useToolOperation';
-import type { StirlingFile } from '@app/types/fileContext';
-import { useFileContext } from '@app/contexts/file/fileHooks';
+} from "@app/types/compare";
+import { CompareParameters } from "@app/hooks/tools/compare/useCompareParameters";
+import { ToolOperationHook } from "@app/hooks/tools/shared/useToolOperation";
+import type { StirlingFile } from "@app/types/fileContext";
+import { useFileContext } from "@app/contexts/file/fileHooks";
 import {
   aggregateTotals,
   buildChanges,
@@ -21,10 +21,10 @@ import {
   extractContentFromPdf,
   getWorkerErrorCode,
   filterTokensForDiff,
-} from '@app/hooks/tools/compare/operationUtils';
-import { alert, dismissToast } from '@app/components/toast';
-import type { ToastLocation } from '@app/components/toast/types';
-import CompareWorkerCtor from '@app/workers/compareWorker?worker';
+} from "@app/hooks/tools/compare/operationUtils";
+import { alert, dismissToast } from "@app/components/toast";
+import type { ToastLocation } from "@app/components/toast/types";
+import CompareWorkerCtor from "@app/workers/compareWorker?worker";
 const LONG_RUNNING_PAGE_THRESHOLD = 2000;
 
 export interface CompareOperationHook extends ToolOperationHook<CompareParameters> {
@@ -42,14 +42,14 @@ export const useCompareOperation = (): CompareOperationHook => {
   const activeRunIdRef = useRef(0);
   const cancelledRef = useRef(false);
 
-  type OperationStatus = 'idle' | 'extracting' | 'processing' | 'complete' | 'cancelled' | 'error';
+  type OperationStatus = "idle" | "extracting" | "processing" | "complete" | "cancelled" | "error";
   const [isLoading, setIsLoading] = useState(false);
-  const [statusState, setStatusState] = useState<OperationStatus>('idle');
+  const [statusState, setStatusState] = useState<OperationStatus>("idle");
   const [statusDetailMs, setStatusDetailMs] = useState<number | null>(null);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [files, setFiles] = useState<File[]>([]);
   const [downloadUrl, setDownloadUrl] = useState<string | null>(null);
-  const [downloadFilename, setDownloadFilename] = useState('');
+  const [downloadFilename, setDownloadFilename] = useState("");
   const [result, setResult] = useState<CompareResultData | null>(null);
   const [warnings, setWarnings] = useState<string[]>([]);
   const longRunningToastIdRef = useRef<string | null>(null);
@@ -76,8 +76,8 @@ export const useCompareOperation = (): CompareOperationHook => {
     setFiles([]);
     cleanupDownloadUrl();
     setDownloadUrl(null);
-    setDownloadFilename('');
-    setStatusState('idle');
+    setDownloadFilename("");
+    setStatusState("idle");
     setStatusDetailMs(null);
     setErrorMessage(null);
   }, [cleanupDownloadUrl]);
@@ -87,7 +87,12 @@ export const useCompareOperation = (): CompareOperationHook => {
   }, []);
 
   const runCompareWorker = useCallback(
-    async (baseTokens: string[], comparisonTokens: string[], warningMessages: CompareWorkerWarnings, onChunk?: (chunk: CompareDiffToken[]) => void) => {
+    async (
+      baseTokens: string[],
+      comparisonTokens: string[],
+      warningMessages: CompareWorkerWarnings,
+      onChunk?: (chunk: CompareDiffToken[]) => void,
+    ) => {
       const worker = ensureWorker();
 
       return await new Promise<{
@@ -101,7 +106,7 @@ export const useCompareOperation = (): CompareOperationHook => {
         const handleMessage = (event: MessageEvent<CompareWorkerResponse>) => {
           if (cancelledRef.current) {
             cleanup();
-            reject(Object.assign(new Error('Operation cancelled'), { code: 'CANCELLED' as const }));
+            reject(Object.assign(new Error("Operation cancelled"), { code: "CANCELLED" as const }));
             return;
           }
           const message = event.data;
@@ -110,14 +115,14 @@ export const useCompareOperation = (): CompareOperationHook => {
           }
 
           switch (message.type) {
-            case 'chunk': {
+            case "chunk": {
               if (message.tokens.length > 0) {
                 collectedTokens.push(...message.tokens);
                 onChunk?.(message.tokens);
               }
               break;
             }
-            case 'success':
+            case "success":
               cleanup();
               if (longRunningToastIdRef.current) {
                 dismissToast(longRunningToastIdRef.current);
@@ -129,16 +134,16 @@ export const useCompareOperation = (): CompareOperationHook => {
                 warnings: collectedWarnings,
               });
               break;
-            case 'warning':
+            case "warning":
               collectedWarnings.push(message.message);
               break;
-            case 'error': {
+            case "error": {
               cleanup();
               if (longRunningToastIdRef.current) {
                 dismissToast(longRunningToastIdRef.current);
                 longRunningToastIdRef.current = null;
               }
-              const error: Error & { code?: 'EMPTY_TEXT' | 'TOO_LARGE' | 'TOO_DISSIMILAR' } = new Error(message.message);
+              const error: Error & { code?: "EMPTY_TEXT" | "TOO_LARGE" | "TOO_DISSIMILAR" } = new Error(message.message);
               error.code = message.code;
               reject(error);
               break;
@@ -151,22 +156,22 @@ export const useCompareOperation = (): CompareOperationHook => {
         const handleError = (event: ErrorEvent) => {
           cleanup();
           if (cancelledRef.current) {
-            reject(Object.assign(new Error('Operation cancelled'), { code: 'CANCELLED' as const }));
+            reject(Object.assign(new Error("Operation cancelled"), { code: "CANCELLED" as const }));
           } else {
             reject(event.error ?? new Error(event.message));
           }
         };
 
         const cleanup = () => {
-          worker.removeEventListener('message', handleMessage as EventListener);
-          worker.removeEventListener('error', handleError as EventListener);
+          worker.removeEventListener("message", handleMessage as EventListener);
+          worker.removeEventListener("error", handleError as EventListener);
         };
 
-        worker.addEventListener('message', handleMessage as EventListener);
-        worker.addEventListener('error', handleError as EventListener);
+        worker.addEventListener("message", handleMessage as EventListener);
+        worker.addEventListener("error", handleError as EventListener);
 
         const request: CompareWorkerRequest = {
-          type: 'compare',
+          type: "compare",
           payload: {
             baseTokens,
             comparisonTokens,
@@ -183,7 +188,7 @@ export const useCompareOperation = (): CompareOperationHook => {
         worker.postMessage(request);
       });
     },
-    [ensureWorker]
+    [ensureWorker],
   );
 
   const executeOperation = useCallback(
@@ -192,22 +197,21 @@ export const useCompareOperation = (): CompareOperationHook => {
       const runId = ++activeRunIdRef.current;
       cancelledRef.current = false;
       if (!params.baseFileId || !params.comparisonFileId) {
-        setErrorMessage(t('compare.error.selectRequired', 'Select the original and edited document.'));
+        setErrorMessage(t("compare.error.selectRequired", "Select the original and edited document."));
         return;
       }
 
-      const baseFile = selectedFiles.find((file) => file.fileId === params.baseFileId)
-        ?? selectors.getFile(params.baseFileId);
-      const comparisonFile = selectedFiles.find((file) => file.fileId === params.comparisonFileId)
-        ?? selectors.getFile(params.comparisonFileId);
+      const baseFile = selectedFiles.find((file) => file.fileId === params.baseFileId) ?? selectors.getFile(params.baseFileId);
+      const comparisonFile =
+        selectedFiles.find((file) => file.fileId === params.comparisonFileId) ?? selectors.getFile(params.comparisonFileId);
 
       if (!baseFile || !comparisonFile) {
-        setErrorMessage(t('compare.error.filesMissing', 'Unable to locate the selected files. Please re-select them.'));
+        setErrorMessage(t("compare.error.filesMissing", "Unable to locate the selected files. Please re-select them."));
         return;
       }
 
       setIsLoading(true);
-      setStatusState('extracting');
+      setStatusState("extracting");
       setStatusDetailMs(null);
       setErrorMessage(null);
       setWarnings([]);
@@ -215,21 +219,21 @@ export const useCompareOperation = (): CompareOperationHook => {
       setFiles([]);
       cleanupDownloadUrl();
       setDownloadUrl(null);
-      setDownloadFilename('');
+      setDownloadFilename("");
 
       const warningMessages: CompareWorkerWarnings = {
         // No accuracy warning any more
         tooLargeMessage: t(
-          'compare.large.file.message',
-          'These documents are very large; comparison may take several minutes. Please keep this tab open.'
+          "compare.large.file.message",
+          "These documents are very large; comparison may take several minutes. Please keep this tab open.",
         ),
         emptyTextMessage: t(
-          'compare.no.text.message',
-          'One or both of the selected PDFs have no text content. Please choose PDFs with text for comparison.'
+          "compare.no.text.message",
+          "One or both of the selected PDFs have no text content. Please choose PDFs with text for comparison.",
         ),
         tooDissimilarMessage: t(
-          'compare.too.dissimilar.message',
-          'These documents appear highly dissimilar. Comparison was stopped to save time.'
+          "compare.too.dissimilar.message",
+          "These documents appear highly dissimilar. Comparison was stopped to save time.",
         ),
       };
 
@@ -244,30 +248,23 @@ export const useCompareOperation = (): CompareOperationHook => {
         if (cancelledRef.current || activeRunIdRef.current !== runId) return;
 
         if (baseContent.tokens.length === 0 || comparisonContent.tokens.length === 0) {
-          throw Object.assign(new Error(warningMessages.emptyTextMessage), { code: 'EMPTY_TEXT' });
+          throw Object.assign(new Error(warningMessages.emptyTextMessage), { code: "EMPTY_TEXT" });
         }
 
-        setStatusState('processing');
+        setStatusState("processing");
 
         // Filter out paragraph sentinels before diffing to avoid large false-positive runs
         const baseFiltered = filterTokensForDiff(baseContent.tokens, baseContent.metadata);
         const comparisonFiltered = filterTokensForDiff(comparisonContent.tokens, comparisonContent.metadata);
 
-        const combinedPageCount =
-          (baseContent.pageSizes?.length ?? 0) + (comparisonContent.pageSizes?.length ?? 0);
+        const combinedPageCount = (baseContent.pageSizes?.length ?? 0) + (comparisonContent.pageSizes?.length ?? 0);
 
-        if (
-          combinedPageCount >= LONG_RUNNING_PAGE_THRESHOLD &&
-          !longRunningToastIdRef.current
-        ) {
+        if (combinedPageCount >= LONG_RUNNING_PAGE_THRESHOLD && !longRunningToastIdRef.current) {
           const toastId = alert({
-            alertType: 'neutral',
-            title: t('compare.longJob.title', 'Large comparison in progress'),
-            body: t(
-              'compare.longJob.body',
-              'These PDFs together exceed 2,000 pages. Processing can take several minutes.'
-            ),
-            location: 'bottom-right' as ToastLocation,
+            alertType: "neutral",
+            title: t("compare.longJob.title", "Large comparison in progress"),
+            body: t("compare.longJob.body", "These PDFs together exceed 2,000 pages. Processing can take several minutes."),
+            location: "bottom-right" as ToastLocation,
             isPersistentPopup: true,
             expandable: false,
           });
@@ -276,29 +273,33 @@ export const useCompareOperation = (): CompareOperationHook => {
 
         // Heuristic: surface an early warning toast when we observe a very high ratio of differences
         const EARLY_TOAST_MIN_TOKENS = 15000; // wait for some signal before warning
-        const EARLY_TOAST_DIFF_RATIO = 0.8;   // 80% added/removed vs unchanged
+        const EARLY_TOAST_DIFF_RATIO = 0.8; // 80% added/removed vs unchanged
         let observedAddedRemoved = 0;
         let observedUnchanged = 0;
 
         const handleEarlyDissimilarity = () => {
           if (dissimilarityToastShownRef.current || dissimilarityToastIdRef.current) return;
           const toastId = alert({
-            alertType: 'warning',
-            title: t('compare.earlyDissimilarity.title', 'These PDFs look highly different'),
+            alertType: "warning",
+            title: t("compare.earlyDissimilarity.title", "These PDFs look highly different"),
             body: t(
-              'compare.earlyDissimilarity.body',
-              "We're seeing very few similarities so far. You can stop the comparison if these aren't related documents."
+              "compare.earlyDissimilarity.body",
+              "We're seeing very few similarities so far. You can stop the comparison if these aren't related documents.",
             ),
-            location: 'bottom-right' as ToastLocation,
+            location: "bottom-right" as ToastLocation,
             isPersistentPopup: true,
             expandable: false,
-            buttonText: t('compare.earlyDissimilarity.stopButton', 'Stop comparison'),
+            buttonText: t("compare.earlyDissimilarity.stopButton", "Stop comparison"),
             buttonCallback: () => {
-              try { cancelOperation(); } catch {
-                console.error('Failed to cancel operation');
+              try {
+                cancelOperation();
+              } catch {
+                console.error("Failed to cancel operation");
               }
-              try { window.dispatchEvent(new CustomEvent('compare:clear-selected')); } catch {
-                console.error('Failed to dispatch clear selected event');
+              try {
+                window.dispatchEvent(new CustomEvent("compare:clear-selected"));
+              } catch {
+                console.error("Failed to dispatch clear selected event");
               }
               if (dissimilarityToastIdRef.current) {
                 dismissToast(dissimilarityToastIdRef.current);
@@ -310,26 +311,25 @@ export const useCompareOperation = (): CompareOperationHook => {
           dissimilarityToastShownRef.current = true;
         };
 
-        const { tokens, stats, warnings: workerWarnings } = await runCompareWorker(
-          baseFiltered.tokens,
-          comparisonFiltered.tokens,
-          warningMessages,
-          (chunk) => {
-            // Incremental ratio tracking for early warning
-            for (const tok of chunk) {
-              if (tok.type === 'unchanged') observedUnchanged += 1;
-              else observedAddedRemoved += 1;
-            }
-            const seen = observedAddedRemoved + observedUnchanged;
-            if (
-              !dissimilarityToastShownRef.current &&
-              seen >= EARLY_TOAST_MIN_TOKENS &&
-              observedAddedRemoved / Math.max(1, seen) >= EARLY_TOAST_DIFF_RATIO
-            ) {
-              handleEarlyDissimilarity();
-            }
+        const {
+          tokens,
+          stats,
+          warnings: workerWarnings,
+        } = await runCompareWorker(baseFiltered.tokens, comparisonFiltered.tokens, warningMessages, (chunk) => {
+          // Incremental ratio tracking for early warning
+          for (const tok of chunk) {
+            if (tok.type === "unchanged") observedUnchanged += 1;
+            else observedAddedRemoved += 1;
           }
-        );
+          const seen = observedAddedRemoved + observedUnchanged;
+          if (
+            !dissimilarityToastShownRef.current &&
+            seen >= EARLY_TOAST_MIN_TOKENS &&
+            observedAddedRemoved / Math.max(1, seen) >= EARLY_TOAST_DIFF_RATIO
+          ) {
+            handleEarlyDissimilarity();
+          }
+        });
 
         if (cancelledRef.current || activeRunIdRef.current !== runId) return;
 
@@ -339,12 +339,12 @@ export const useCompareOperation = (): CompareOperationHook => {
         let baseTokenPointer = 0;
         let comparisonTokenPointer = 0;
         for (const diffToken of tokens) {
-          if (diffToken.type === 'removed') {
+          if (diffToken.type === "removed") {
             if (baseTokenPointer < baseHasHighlight.length) {
               baseHasHighlight[baseTokenPointer] = true;
             }
             baseTokenPointer += 1;
-          } else if (diffToken.type === 'added') {
+          } else if (diffToken.type === "added") {
             if (comparisonTokenPointer < comparisonHasHighlight.length) {
               comparisonHasHighlight[comparisonTokenPointer] = true;
             }
@@ -362,7 +362,7 @@ export const useCompareOperation = (): CompareOperationHook => {
         const buildFilteredTokenData = (
           tokensList: typeof baseFiltered.tokens,
           metadataList: typeof baseFiltered.metadata,
-          highlightFlags: boolean[]
+          highlightFlags: boolean[],
         ): CompareFilteredTokenInfo[] =>
           tokensList.map((token, index) => {
             const meta = metadataList[index];
@@ -411,11 +411,7 @@ export const useCompareOperation = (): CompareOperationHook => {
           },
           filteredTokenData: {
             base: buildFilteredTokenData(baseFiltered.tokens, baseFiltered.metadata, baseHasHighlight),
-            comparison: buildFilteredTokenData(
-              comparisonFiltered.tokens,
-              comparisonFiltered.metadata,
-              comparisonHasHighlight
-            ),
+            comparison: buildFilteredTokenData(comparisonFiltered.tokens, comparisonFiltered.metadata, comparisonHasHighlight),
           },
           sourceTokens: {
             base: baseContent.tokens,
@@ -439,17 +435,17 @@ export const useCompareOperation = (): CompareOperationHook => {
         setDownloadUrl(blobUrl);
         setDownloadFilename(summaryFile.name);
 
-        setStatusState('complete');
+        setStatusState("complete");
       } catch (error: unknown) {
-        console.error('[compare] operation failed', error);
+        console.error("[compare] operation failed", error);
         const errorCode = getWorkerErrorCode(error);
-        if (errorCode === 'EMPTY_TEXT') {
-          setErrorMessage(warningMessages.emptyTextMessage ?? t('compare.error.generic', 'Unable to compare these files.'));
+        if (errorCode === "EMPTY_TEXT") {
+          setErrorMessage(warningMessages.emptyTextMessage ?? t("compare.error.generic", "Unable to compare these files."));
         } else {
-          const fallbackMessage = t('compare.error.generic', 'Unable to compare these files.');
+          const fallbackMessage = t("compare.error.generic", "Unable to compare these files.");
           if (error instanceof Error && error.message) {
             setErrorMessage(error.message);
-          } else if (typeof error === 'string' && error.trim().length > 0) {
+          } else if (typeof error === "string" && error.trim().length > 0) {
             setErrorMessage(error);
           } else {
             setErrorMessage(fallbackMessage);
@@ -470,18 +466,18 @@ export const useCompareOperation = (): CompareOperationHook => {
         dissimilarityToastShownRef.current = false;
       }
     },
-    [cleanupDownloadUrl, runCompareWorker, selectors, t]
+    [cleanupDownloadUrl, runCompareWorker, selectors, t],
   );
 
   const cancelOperation = useCallback(() => {
     if (!isLoading) return;
     cancelledRef.current = true;
     setIsLoading(false);
-    setStatusState('cancelled');
+    setStatusState("cancelled");
     if (workerRef.current) {
       try {
         workerRef.current.terminate();
-      // eslint-disable-next-line no-empty
+        // eslint-disable-next-line no-empty
       } catch {}
       workerRef.current = null;
     }
@@ -511,12 +507,17 @@ export const useCompareOperation = (): CompareOperationHook => {
 
   const status = useMemo(() => {
     const label =
-      statusState === 'idle' ? ''
-        : statusState === 'extracting' ? t('compare.status.extracting', 'Extracting text...')
-        : statusState === 'processing' ? t('compare.status.processing', 'Analyzing differences...')
-        : statusState === 'complete' ? t('compare.status.complete', 'Comparison ready')
-        : statusState === 'cancelled' ? t('operationCancelled', 'Operation cancelled')
-        : '';
+      statusState === "idle"
+        ? ""
+        : statusState === "extracting"
+          ? t("compare.status.extracting", "Extracting text...")
+          : statusState === "processing"
+            ? t("compare.status.processing", "Analyzing differences...")
+            : statusState === "complete"
+              ? t("compare.status.complete", "Comparison ready")
+              : statusState === "cancelled"
+                ? t("operationCancelled", "Operation cancelled")
+                : "";
     if (label && statusDetailMs != null) return `${label} (${statusDetailMs} ms)`;
     return label;
   }, [statusState, statusDetailMs, t]);
@@ -554,6 +555,6 @@ export const useCompareOperation = (): CompareOperationHook => {
       status,
       undoOperation,
       warnings,
-    ]
+    ],
   );
 };
diff --git a/frontend/src/core/hooks/tools/compare/useCompareParameters.ts b/frontend/src/core/hooks/tools/compare/useCompareParameters.ts
index 98cba87539..f323fcc261 100644
--- a/frontend/src/core/hooks/tools/compare/useCompareParameters.ts
+++ b/frontend/src/core/hooks/tools/compare/useCompareParameters.ts
@@ -1,5 +1,5 @@
-import { BaseParametersHook, useBaseParameters } from '@app/hooks/tools/shared/useBaseParameters';
-import type { FileId } from '@app/types/file';
+import { BaseParametersHook, useBaseParameters } from "@app/hooks/tools/shared/useBaseParameters";
+import type { FileId } from "@app/types/file";
 
 export interface CompareParameters {
   baseFileId: FileId | null;
@@ -16,7 +16,7 @@ export type CompareParametersHook = BaseParametersHook<CompareParameters>;
 export const useCompareParameters = (): CompareParametersHook => {
   return useBaseParameters({
     defaultParameters,
-    endpointName: 'compare',
+    endpointName: "compare",
     validateFn: (params) =>
       Boolean(params.baseFileId && params.comparisonFileId && params.baseFileId !== params.comparisonFileId),
   });
diff --git a/frontend/src/core/hooks/tools/compress/useCompressOperation.ts b/frontend/src/core/hooks/tools/compress/useCompressOperation.ts
index c10bea5355..521a3a1b3e 100644
--- a/frontend/src/core/hooks/tools/compress/useCompressOperation.ts
+++ b/frontend/src/core/hooks/tools/compress/useCompressOperation.ts
@@ -1,18 +1,18 @@
-import { useTranslation } from 'react-i18next';
-import { useToolOperation, ToolType } from '@app/hooks/tools/shared/useToolOperation';
-import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
-import { CompressParameters, defaultParameters } from '@app/hooks/tools/compress/useCompressParameters';
+import { useTranslation } from "react-i18next";
+import { useToolOperation, ToolType } from "@app/hooks/tools/shared/useToolOperation";
+import { createStandardErrorHandler } from "@app/utils/toolErrorHandler";
+import { CompressParameters, defaultParameters } from "@app/hooks/tools/compress/useCompressParameters";
 
 // Static configuration that can be used by both the hook and automation executor
 export const buildCompressFormData = (parameters: CompressParameters, file: File): FormData => {
   const formData = new FormData();
   formData.append("fileInput", file);
 
-  if (parameters.compressionMethod === 'quality') {
+  if (parameters.compressionMethod === "quality") {
     formData.append("optimizeLevel", parameters.compressionLevel.toString());
   } else {
     // File size method
-    const fileSize = parameters.fileSizeValue ? `${parameters.fileSizeValue}${parameters.fileSizeUnit}` : '';
+    const fileSize = parameters.fileSizeValue ? `${parameters.fileSizeValue}${parameters.fileSizeUnit}` : "";
     if (fileSize) {
       formData.append("expectedOutputSize", fileSize);
     }
@@ -32,8 +32,8 @@ export const buildCompressFormData = (parameters: CompressParameters, file: File
 export const compressOperationConfig = {
   toolType: ToolType.singleFile,
   buildFormData: buildCompressFormData,
-  operationType: 'compress',
-  endpoint: '/api/v1/misc/compress-pdf',
+  operationType: "compress",
+  endpoint: "/api/v1/misc/compress-pdf",
   defaultParameters,
 } as const;
 
@@ -42,6 +42,6 @@ export const useCompressOperation = () => {
 
   return useToolOperation<CompressParameters>({
     ...compressOperationConfig,
-    getErrorMessage: createStandardErrorHandler(t('compress.error.failed', 'An error occurred while compressing the PDF.'))
+    getErrorMessage: createStandardErrorHandler(t("compress.error.failed", "An error occurred while compressing the PDF.")),
   });
 };
diff --git a/frontend/src/core/hooks/tools/compress/useCompressParameters.ts b/frontend/src/core/hooks/tools/compress/useCompressParameters.ts
index 1df68b6adc..e753f7872f 100644
--- a/frontend/src/core/hooks/tools/compress/useCompressParameters.ts
+++ b/frontend/src/core/hooks/tools/compress/useCompressParameters.ts
@@ -1,5 +1,5 @@
-import { BaseParameters } from '@app/types/parameters';
-import { useBaseParameters, BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
+import { BaseParameters } from "@app/types/parameters";
+import { useBaseParameters, BaseParametersHook } from "@app/hooks/tools/shared/useBaseParameters";
 
 export interface CompressParameters extends BaseParameters {
   compressionLevel: number;
@@ -8,9 +8,9 @@ export interface CompressParameters extends BaseParameters {
   lineArtThreshold: number;
   lineArtEdgeLevel: 1 | 2 | 3;
   expectedSize: string;
-  compressionMethod: 'quality' | 'filesize';
+  compressionMethod: "quality" | "filesize";
   fileSizeValue: string;
-  fileSizeUnit: 'KB' | 'MB';
+  fileSizeUnit: "KB" | "MB";
   linearize: boolean;
 }
 
@@ -20,10 +20,10 @@ export const defaultParameters: CompressParameters = {
   lineArt: false,
   lineArtThreshold: 50,
   lineArtEdgeLevel: 3,
-  expectedSize: '',
-  compressionMethod: 'quality',
-  fileSizeValue: '',
-  fileSizeUnit: 'MB',
+  expectedSize: "",
+  compressionMethod: "quality",
+  fileSizeValue: "",
+  fileSizeUnit: "MB",
   linearize: false,
 };
 
@@ -32,7 +32,7 @@ export type CompressParametersHook = BaseParametersHook<CompressParameters>;
 export const useCompressParameters = (): CompressParametersHook => {
   return useBaseParameters({
     defaultParameters,
-    endpointName: 'compress-pdf',
+    endpointName: "compress-pdf",
     validateFn: (params) => {
       // For compression, we only need to validate that compression level is within range
       return params.compressionLevel >= 1 && params.compressionLevel <= 9;
diff --git a/frontend/src/core/hooks/tools/convert/useConvertOperation.ts b/frontend/src/core/hooks/tools/convert/useConvertOperation.ts
index 945199ee16..1fd00b1e16 100644
--- a/frontend/src/core/hooks/tools/convert/useConvertOperation.ts
+++ b/frontend/src/core/hooks/tools/convert/useConvertOperation.ts
@@ -1,110 +1,121 @@
-import { useCallback, useMemo } from 'react';
-import apiClient from '@app/services/apiClient';
-import { useTranslation } from 'react-i18next';
-import { ConvertParameters, defaultParameters } from '@app/hooks/tools/convert/useConvertParameters';
-import { createFileFromApiResponse } from '@app/utils/fileResponseUtils';
-import { useToolOperation, ToolType, CustomProcessorResult } from '@app/hooks/tools/shared/useToolOperation';
-import { getEndpointUrl, getEndpointName, isImageFormat, isWebFormat, isOfficeFormat } from '@app/utils/convertUtils';
-import { useToolCloudStatus } from '@app/hooks/useToolCloudStatus';
+import { useCallback, useMemo } from "react";
+import apiClient from "@app/services/apiClient";
+import { useTranslation } from "react-i18next";
+import { ConvertParameters, defaultParameters } from "@app/hooks/tools/convert/useConvertParameters";
+import { createFileFromApiResponse } from "@app/utils/fileResponseUtils";
+import { useToolOperation, ToolType, CustomProcessorResult } from "@app/hooks/tools/shared/useToolOperation";
+import { getEndpointUrl, getEndpointName, isImageFormat, isWebFormat, isOfficeFormat } from "@app/utils/convertUtils";
+import { useToolCloudStatus } from "@app/hooks/useToolCloudStatus";
 
 // Static function that can be used by both the hook and automation executor
-export const shouldProcessFilesSeparately = (
-  selectedFiles: File[],
-  parameters: ConvertParameters
-): boolean => {
-  return selectedFiles.length > 1 && (
+export const shouldProcessFilesSeparately = (selectedFiles: File[], parameters: ConvertParameters): boolean => {
+  return (
+    selectedFiles.length > 1 &&
     // Image to PDF with combineImages = false
-    ((isImageFormat(parameters.fromExtension) || parameters.fromExtension === 'image') &&
-     parameters.toExtension === 'pdf' && !parameters.imageOptions.combineImages) ||
-    // SVG to PDF with combineIntoSinglePdf = false
-    (parameters.fromExtension === 'svg' && parameters.toExtension === 'pdf' && !parameters.imageOptions.combineImages) ||
-    // PDF to image conversions (each PDF should generate its own image file)
-    (parameters.fromExtension === 'pdf' && isImageFormat(parameters.toExtension)) ||
-    // PDF to PDF/A and PDF/X conversions (each PDF should be processed separately)
-    (parameters.fromExtension === 'pdf' && (parameters.toExtension === 'pdfa' || parameters.toExtension === 'pdfx')) ||
-    // PDF to text-like/spreadsheet formats should be one output per input
-    (parameters.fromExtension === 'pdf' && ['txt', 'rtf', 'csv', 'xlsx'].includes(parameters.toExtension)) ||
-  // PDF to CBR conversions (each PDF should generate its own archive)
-  (parameters.fromExtension === 'pdf' && parameters.toExtension === 'cbr') ||
-    // PDF to EPUB/AZW3 conversions (each PDF should generate its own ebook)
-    (parameters.fromExtension === 'pdf' && ['epub', 'azw3'].includes(parameters.toExtension)) ||
-    // PDF to office format conversions (each PDF should generate its own office file)
-    (parameters.fromExtension === 'pdf' && isOfficeFormat(parameters.toExtension)) ||
-    // Office files to PDF conversions (each file should be processed separately via LibreOffice)
-    (isOfficeFormat(parameters.fromExtension) && parameters.toExtension === 'pdf') ||
-    // Web files to PDF conversions (each web file should generate its own PDF)
-    ((isWebFormat(parameters.fromExtension) || parameters.fromExtension === 'web') &&
-     parameters.toExtension === 'pdf') ||
-    // eBook files to PDF conversions (each file should be processed separately via Calibre)
-    (['epub', 'mobi', 'azw3', 'fb2'].includes(parameters.fromExtension) && parameters.toExtension === 'pdf') ||
-    // Web files smart detection
-    (parameters.isSmartDetection && parameters.smartDetectionType === 'web') ||
-    // Mixed file types (smart detection)
-    (parameters.isSmartDetection && parameters.smartDetectionType === 'mixed')
+    (((isImageFormat(parameters.fromExtension) || parameters.fromExtension === "image") &&
+      parameters.toExtension === "pdf" &&
+      !parameters.imageOptions.combineImages) ||
+      // SVG to PDF with combineIntoSinglePdf = false
+      (parameters.fromExtension === "svg" && parameters.toExtension === "pdf" && !parameters.imageOptions.combineImages) ||
+      // PDF to image conversions (each PDF should generate its own image file)
+      (parameters.fromExtension === "pdf" && isImageFormat(parameters.toExtension)) ||
+      // PDF to PDF/A and PDF/X conversions (each PDF should be processed separately)
+      (parameters.fromExtension === "pdf" && (parameters.toExtension === "pdfa" || parameters.toExtension === "pdfx")) ||
+      // PDF to text-like/spreadsheet formats should be one output per input
+      (parameters.fromExtension === "pdf" && ["txt", "rtf", "csv", "xlsx"].includes(parameters.toExtension)) ||
+      // PDF to CBR conversions (each PDF should generate its own archive)
+      (parameters.fromExtension === "pdf" && parameters.toExtension === "cbr") ||
+      // PDF to EPUB/AZW3 conversions (each PDF should generate its own ebook)
+      (parameters.fromExtension === "pdf" && ["epub", "azw3"].includes(parameters.toExtension)) ||
+      // PDF to office format conversions (each PDF should generate its own office file)
+      (parameters.fromExtension === "pdf" && isOfficeFormat(parameters.toExtension)) ||
+      // Office files to PDF conversions (each file should be processed separately via LibreOffice)
+      (isOfficeFormat(parameters.fromExtension) && parameters.toExtension === "pdf") ||
+      // Web files to PDF conversions (each web file should generate its own PDF)
+      ((isWebFormat(parameters.fromExtension) || parameters.fromExtension === "web") && parameters.toExtension === "pdf") ||
+      // eBook files to PDF conversions (each file should be processed separately via Calibre)
+      (["epub", "mobi", "azw3", "fb2"].includes(parameters.fromExtension) && parameters.toExtension === "pdf") ||
+      // Web files smart detection
+      (parameters.isSmartDetection && parameters.smartDetectionType === "web") ||
+      // Mixed file types (smart detection)
+      (parameters.isSmartDetection && parameters.smartDetectionType === "mixed"))
   );
 };
 
 // Static function that can be used by both the hook and automation executor
 export const buildConvertFormData = (parameters: ConvertParameters, selectedFiles: File[]): FormData => {
   const formData = new FormData();
-  const { fromExtension, toExtension, imageOptions, htmlOptions, emailOptions, pdfaOptions, pdfxOptions, cbrOptions, pdfToCbrOptions, cbzOptions, cbzOutputOptions, ebookOptions, epubOptions } = parameters;
+  const {
+    fromExtension,
+    toExtension,
+    imageOptions,
+    htmlOptions,
+    emailOptions,
+    pdfaOptions,
+    pdfxOptions,
+    cbrOptions,
+    pdfToCbrOptions,
+    cbzOptions,
+    cbzOutputOptions,
+    ebookOptions,
+    epubOptions,
+  } = parameters;
 
-  selectedFiles.forEach(file => {
+  selectedFiles.forEach((file) => {
     formData.append("fileInput", file);
   });
 
-
   if (isImageFormat(toExtension)) {
     formData.append("imageFormat", toExtension);
     formData.append("colorType", imageOptions.colorType);
     formData.append("dpi", imageOptions.dpi.toString());
     formData.append("singleOrMultiple", imageOptions.singleOrMultiple);
-  } else if (fromExtension === 'pdf' && ['docx', 'odt'].includes(toExtension)) {
+  } else if (fromExtension === "pdf" && ["docx", "odt"].includes(toExtension)) {
     formData.append("outputFormat", toExtension);
-  } else if (fromExtension === 'pdf' && ['pptx', 'odp'].includes(toExtension)) {
+  } else if (fromExtension === "pdf" && ["pptx", "odp"].includes(toExtension)) {
     formData.append("outputFormat", toExtension);
-  } else if (fromExtension === 'pdf' && ['txt', 'rtf'].includes(toExtension)) {
+  } else if (fromExtension === "pdf" && ["txt", "rtf"].includes(toExtension)) {
     formData.append("outputFormat", toExtension);
-  } else if ((isImageFormat(fromExtension) || fromExtension === 'image') && toExtension === 'pdf') {
+  } else if ((isImageFormat(fromExtension) || fromExtension === "image") && toExtension === "pdf") {
     formData.append("fitOption", imageOptions.fitOption);
     formData.append("colorType", imageOptions.colorType);
     formData.append("autoRotate", imageOptions.autoRotate.toString());
-  } else if (fromExtension === 'svg' && toExtension === 'pdf') {
+  } else if (fromExtension === "svg" && toExtension === "pdf") {
     formData.append("combineIntoSinglePdf", imageOptions.combineImages.toString());
-  } else if ((fromExtension === 'html' || fromExtension === 'zip') && toExtension === 'pdf') {
+  } else if ((fromExtension === "html" || fromExtension === "zip") && toExtension === "pdf") {
     formData.append("zoom", htmlOptions.zoomLevel.toString());
-  } else if ((fromExtension === 'eml' || fromExtension === 'msg') && toExtension === 'pdf') {
+  } else if ((fromExtension === "eml" || fromExtension === "msg") && toExtension === "pdf") {
     formData.append("includeAttachments", emailOptions.includeAttachments.toString());
     formData.append("maxAttachmentSizeMB", emailOptions.maxAttachmentSizeMB.toString());
     formData.append("downloadHtml", emailOptions.downloadHtml.toString());
     formData.append("includeAllRecipients", emailOptions.includeAllRecipients.toString());
-  } else if (fromExtension === 'pdf' && toExtension === 'pdfa') {
+  } else if (fromExtension === "pdf" && toExtension === "pdfa") {
     formData.append("outputFormat", pdfaOptions.outputFormat);
     formData.append("strict", String(!!pdfaOptions.strict));
-  } else if (fromExtension === 'pdf' && toExtension === 'pdfx') {
+  } else if (fromExtension === "pdf" && toExtension === "pdfx") {
     // Use PDF/A endpoint with PDF/X format parameter
-    formData.append("outputFormat", pdfxOptions?.outputFormat || 'pdfx');
-  } else if (fromExtension === 'pdf' && toExtension === 'csv') {
+    formData.append("outputFormat", pdfxOptions?.outputFormat || "pdfx");
+  } else if (fromExtension === "pdf" && toExtension === "csv") {
     formData.append("pageNumbers", "all");
-  } else if (fromExtension === 'pdf' && toExtension === 'xlsx') {
+  } else if (fromExtension === "pdf" && toExtension === "xlsx") {
     formData.append("pageNumbers", "all");
-  } else if (fromExtension === 'cbr' && toExtension === 'pdf') {
+  } else if (fromExtension === "cbr" && toExtension === "pdf") {
     formData.append("optimizeForEbook", cbrOptions.optimizeForEbook.toString());
-  } else if (fromExtension === 'pdf' && toExtension === 'cbr') {
+  } else if (fromExtension === "pdf" && toExtension === "cbr") {
     formData.append("dpi", pdfToCbrOptions.dpi.toString());
-  } else if (fromExtension === 'cbz' && toExtension === 'pdf') {
+  } else if (fromExtension === "cbz" && toExtension === "pdf") {
     formData.append("optimizeForEbook", (cbzOptions?.optimizeForEbook ?? false).toString());
-  } else if (fromExtension === 'pdf' && toExtension === 'cbz') {
+  } else if (fromExtension === "pdf" && toExtension === "cbz") {
     formData.append("dpi", (cbzOutputOptions?.dpi ?? 150).toString());
-  } else if (['epub', 'mobi', 'azw3', 'fb2'].includes(fromExtension) && toExtension === 'pdf') {
+  } else if (["epub", "mobi", "azw3", "fb2"].includes(fromExtension) && toExtension === "pdf") {
     formData.append("embedAllFonts", (ebookOptions?.embedAllFonts ?? false).toString());
     formData.append("includeTableOfContents", (ebookOptions?.includeTableOfContents ?? false).toString());
     formData.append("includePageNumbers", (ebookOptions?.includePageNumbers ?? false).toString());
     formData.append("optimizeForEbook", (ebookOptions?.optimizeForEbook ?? false).toString());
-  } else if (fromExtension === 'pdf' && ['epub', 'azw3'].includes(toExtension)) {
+  } else if (fromExtension === "pdf" && ["epub", "azw3"].includes(toExtension)) {
     formData.append("detectChapters", (epubOptions?.detectChapters ?? true).toString());
-    formData.append("targetDevice", epubOptions?.targetDevice ?? 'TABLET_PHONE_IMAGES');
-    formData.append("outputFormat", epubOptions?.outputFormat ?? (toExtension === 'azw3' ? 'AZW3' : 'EPUB'));
+    formData.append("targetDevice", epubOptions?.targetDevice ?? "TABLET_PHONE_IMAGES");
+    formData.append("outputFormat", epubOptions?.outputFormat ?? (toExtension === "azw3" ? "AZW3" : "EPUB"));
   }
 
   return formData;
@@ -115,13 +126,13 @@ export const createFileFromResponse = (
   responseData: any,
   headers: any,
   originalFileName: string,
-  targetExtension: string
+  targetExtension: string,
 ): File => {
-  const originalName = originalFileName.split('.')[0];
+  const originalName = originalFileName.split(".")[0];
 
   // Map both pdfa and pdfx to pdf since they both result in PDF files
-  if (targetExtension == 'pdfa' || targetExtension == 'pdfx') {
-    targetExtension = 'pdf';
+  if (targetExtension == "pdfa" || targetExtension == "pdfx") {
+    targetExtension = "pdf";
   }
 
   const fallbackFilename = `${originalName}.${targetExtension}`;
@@ -132,23 +143,23 @@ export const createFileFromResponse = (
 // Static processor that can be used by both the hook and automation executor
 export const convertProcessor = async (
   parameters: ConvertParameters,
-  selectedFiles: File[]
+  selectedFiles: File[],
 ): Promise<CustomProcessorResult> => {
   const processedFiles: File[] = [];
 
   // Map PDF/X to use PDF/A endpoint
-  const actualToExtension = parameters.toExtension === 'pdfx' ? 'pdfa' : parameters.toExtension;
+  const actualToExtension = parameters.toExtension === "pdfx" ? "pdfa" : parameters.toExtension;
   const endpoint = getEndpointUrl(parameters.fromExtension, actualToExtension);
 
   if (!endpoint) {
-    throw new Error('Unsupported conversion format');
+    throw new Error("Unsupported conversion format");
   }
 
   // Convert-specific routing logic: decide batch vs individual processing
   // For PDF/X, we want to treat it similar to PDF/A (separate processing)
   const isSeparateProcessing = shouldProcessFilesSeparately(selectedFiles, {
     ...parameters,
-    toExtension: actualToExtension  // Use the mapped extension for decision logic
+    toExtension: actualToExtension, // Use the mapped extension for decision logic
   });
 
   if (isSeparateProcessing) {
@@ -156,9 +167,14 @@ export const convertProcessor = async (
     for (const file of selectedFiles) {
       try {
         const formData = buildConvertFormData(parameters, [file]);
-        const response = await apiClient.post(endpoint, formData, { responseType: 'blob' });
+        const response = await apiClient.post(endpoint, formData, { responseType: "blob" });
 
-        const convertedFile = createFileFromResponse(response.data, response.headers, file.name, actualToExtension === 'pdfa' ? 'pdfx' : parameters.toExtension);
+        const convertedFile = createFileFromResponse(
+          response.data,
+          response.headers,
+          file.name,
+          actualToExtension === "pdfa" ? "pdfx" : parameters.toExtension,
+        );
 
         processedFiles.push(convertedFile);
       } catch (error) {
@@ -168,13 +184,16 @@ export const convertProcessor = async (
   } else {
     // Batch processing for simple cases (image→PDF combine)
     const formData = buildConvertFormData(parameters, selectedFiles);
-    const response = await apiClient.post(endpoint, formData, { responseType: 'blob' });
+    const response = await apiClient.post(endpoint, formData, { responseType: "blob" });
 
-    const baseFilename = selectedFiles.length === 1
-      ? selectedFiles[0].name
-      : 'converted_files';
+    const baseFilename = selectedFiles.length === 1 ? selectedFiles[0].name : "converted_files";
 
-    const convertedFile = createFileFromResponse(response.data, response.headers, baseFilename, actualToExtension === 'pdfa' ? 'pdfx' : parameters.toExtension);
+    const convertedFile = createFileFromResponse(
+      response.data,
+      response.headers,
+      baseFilename,
+      actualToExtension === "pdfa" ? "pdfx" : parameters.toExtension,
+    );
     processedFiles.push(convertedFile);
   }
 
@@ -192,11 +211,11 @@ export const convertProcessor = async (
 export const convertOperationConfig = {
   toolType: ToolType.custom,
   customProcessor: convertProcessor, // Can't use callback version here
-  operationType: 'convert',
+  operationType: "convert",
   defaultParameters,
   endpoint: (params: ConvertParameters): string | undefined => {
     if (!params.fromExtension || !params.toExtension) return undefined;
-    const actualToExtension = params.toExtension === 'pdfx' ? 'pdfa' : params.toExtension;
+    const actualToExtension = params.toExtension === "pdfx" ? "pdfa" : params.toExtension;
     return getEndpointUrl(params.fromExtension, actualToExtension) ?? undefined;
   },
 } as const;
@@ -209,25 +228,25 @@ export const useConvertOperation = (parameters?: ConvertParameters) => {
     if (!parameters?.fromExtension || !parameters?.toExtension) return undefined;
 
     // Map PDF/X to use PDF/A endpoint (same as in convertProcessor)
-    const actualToExtension = parameters.toExtension === 'pdfx' ? 'pdfa' : parameters.toExtension;
+    const actualToExtension = parameters.toExtension === "pdfx" ? "pdfa" : parameters.toExtension;
     return getEndpointName(parameters.fromExtension, actualToExtension);
   }, [parameters?.fromExtension, parameters?.toExtension]);
 
   // Check if current conversion will use cloud
   const willUseCloud = useToolCloudStatus(currentEndpointName);
 
-  const customConvertProcessor = useCallback(async (
-    parameters: ConvertParameters,
-    selectedFiles: File[]
-  ): Promise<CustomProcessorResult> => {
-    return convertProcessor(parameters, selectedFiles);
-  }, []);
+  const customConvertProcessor = useCallback(
+    async (parameters: ConvertParameters, selectedFiles: File[]): Promise<CustomProcessorResult> => {
+      return convertProcessor(parameters, selectedFiles);
+    },
+    [],
+  );
 
   const operation = useToolOperation<ConvertParameters>({
     ...convertOperationConfig,
     customProcessor: customConvertProcessor, // Use instance-specific processor for translation support
     getErrorMessage: (error) => {
-      if (error.response?.data && typeof error.response.data === 'string') {
+      if (error.response?.data && typeof error.response.data === "string") {
         return error.response.data;
       }
       if (error.message) {
diff --git a/frontend/src/core/hooks/tools/convert/useConvertParameters.test.ts b/frontend/src/core/hooks/tools/convert/useConvertParameters.test.ts
index 70299b8bf9..b203090b8f 100644
--- a/frontend/src/core/hooks/tools/convert/useConvertParameters.test.ts
+++ b/frontend/src/core/hooks/tools/convert/useConvertParameters.test.ts
@@ -2,85 +2,83 @@
  * Unit tests for useConvertParameters hook
  */
 
-import { describe, test, expect } from 'vitest';
-import { renderHook, act } from '@testing-library/react';
-import { useConvertParameters } from '@app/hooks/tools/convert/useConvertParameters';
-import { FIT_OPTIONS } from '@app/constants/convertConstants';
+import { describe, test, expect } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { useConvertParameters } from "@app/hooks/tools/convert/useConvertParameters";
+import { FIT_OPTIONS } from "@app/constants/convertConstants";
 
-describe('useConvertParameters', () => {
-
-  describe('Parameter Management', () => {
-
-    test('should initialize with default parameters', () => {
+describe("useConvertParameters", () => {
+  describe("Parameter Management", () => {
+    test("should initialize with default parameters", () => {
       const { result } = renderHook(() => useConvertParameters());
 
-      expect(result.current.parameters.fromExtension).toBe('');
-      expect(result.current.parameters.toExtension).toBe('');
-      expect(result.current.parameters.imageOptions.colorType).toBe('color');
+      expect(result.current.parameters.fromExtension).toBe("");
+      expect(result.current.parameters.toExtension).toBe("");
+      expect(result.current.parameters.imageOptions.colorType).toBe("color");
       expect(result.current.parameters.imageOptions.dpi).toBe(300);
-      expect(result.current.parameters.imageOptions.singleOrMultiple).toBe('multiple');
+      expect(result.current.parameters.imageOptions.singleOrMultiple).toBe("multiple");
       expect(result.current.parameters.htmlOptions.zoomLevel).toBe(1.0);
       expect(result.current.parameters.emailOptions.includeAttachments).toBe(true);
       expect(result.current.parameters.emailOptions.maxAttachmentSizeMB).toBe(10);
       expect(result.current.parameters.emailOptions.downloadHtml).toBe(false);
       expect(result.current.parameters.emailOptions.includeAllRecipients).toBe(false);
-      expect(result.current.parameters.pdfaOptions.outputFormat).toBe('pdfa-2b');
+      expect(result.current.parameters.pdfaOptions.outputFormat).toBe("pdfa-2b");
     });
 
-    test('should update individual parameters', () => {
+    test("should update individual parameters", () => {
       const { result } = renderHook(() => useConvertParameters());
 
       act(() => {
-        result.current.updateParameter('fromExtension', 'pdf');
+        result.current.updateParameter("fromExtension", "pdf");
       });
 
-      expect(result.current.parameters.fromExtension).toBe('pdf');
-      expect(result.current.parameters.toExtension).toBe(''); // Should not affect other params
+      expect(result.current.parameters.fromExtension).toBe("pdf");
+      expect(result.current.parameters.toExtension).toBe(""); // Should not affect other params
     });
 
-    test('should update nested image options', () => {
+    test("should update nested image options", () => {
       const { result } = renderHook(() => useConvertParameters());
 
       act(() => {
-        result.current.updateParameter('imageOptions', {
-          colorType: 'grayscale',
+        result.current.updateParameter("imageOptions", {
+          colorType: "grayscale",
           dpi: 150,
-          singleOrMultiple: 'single',
+          singleOrMultiple: "single",
           fitOption: FIT_OPTIONS.FILL_PAGE,
           autoRotate: false,
           combineImages: false,
         });
       });
 
-      expect(result.current.parameters.imageOptions.colorType).toBe('grayscale');
+      expect(result.current.parameters.imageOptions.colorType).toBe("grayscale");
       expect(result.current.parameters.imageOptions.dpi).toBe(150);
-      expect(result.current.parameters.imageOptions.singleOrMultiple).toBe('single');
+      expect(result.current.parameters.imageOptions.singleOrMultiple).toBe("single");
       expect(result.current.parameters.imageOptions.fitOption).toBe(FIT_OPTIONS.FILL_PAGE);
       expect(result.current.parameters.imageOptions.autoRotate).toBe(false);
       expect(result.current.parameters.imageOptions.combineImages).toBe(false);
     });
 
-    test('should update nested HTML options', () => {
+    test("should update nested HTML options", () => {
       const { result } = renderHook(() => useConvertParameters());
 
       act(() => {
-        result.current.updateParameter('htmlOptions', {
-          zoomLevel: 1.5
+        result.current.updateParameter("htmlOptions", {
+          zoomLevel: 1.5,
         });
       });
 
       expect(result.current.parameters.htmlOptions.zoomLevel).toBe(1.5);
     });
 
-    test('should update nested email options', () => {
+    test("should update nested email options", () => {
       const { result } = renderHook(() => useConvertParameters());
 
       act(() => {
-        result.current.updateParameter('emailOptions', {
+        result.current.updateParameter("emailOptions", {
           includeAttachments: false,
           maxAttachmentSizeMB: 20,
           downloadHtml: true,
-          includeAllRecipients: true
+          includeAllRecipients: true,
         });
       });
 
@@ -90,41 +88,40 @@ describe('useConvertParameters', () => {
       expect(result.current.parameters.emailOptions.includeAllRecipients).toBe(true);
     });
 
-    test('should update nested PDF/A options', () => {
+    test("should update nested PDF/A options", () => {
       const { result } = renderHook(() => useConvertParameters());
 
       act(() => {
-        result.current.updateParameter('pdfaOptions', {
-          outputFormat: 'pdfa',
-          strict: false
+        result.current.updateParameter("pdfaOptions", {
+          outputFormat: "pdfa",
+          strict: false,
         });
       });
 
-      expect(result.current.parameters.pdfaOptions.outputFormat).toBe('pdfa');
+      expect(result.current.parameters.pdfaOptions.outputFormat).toBe("pdfa");
     });
 
-    test('should reset parameters to defaults', () => {
+    test("should reset parameters to defaults", () => {
       const { result } = renderHook(() => useConvertParameters());
 
       act(() => {
-        result.current.updateParameter('fromExtension', 'pdf');
-        result.current.updateParameter('toExtension', 'png');
+        result.current.updateParameter("fromExtension", "pdf");
+        result.current.updateParameter("toExtension", "png");
       });
 
-      expect(result.current.parameters.fromExtension).toBe('pdf');
+      expect(result.current.parameters.fromExtension).toBe("pdf");
 
       act(() => {
         result.current.resetParameters();
       });
 
-      expect(result.current.parameters.fromExtension).toBe('');
-      expect(result.current.parameters.toExtension).toBe('');
+      expect(result.current.parameters.fromExtension).toBe("");
+      expect(result.current.parameters.toExtension).toBe("");
     });
   });
 
-  describe('Parameter Validation', () => {
-
-    test('should validate parameters correctly', () => {
+  describe("Parameter Validation", () => {
+    test("should validate parameters correctly", () => {
       const { result } = renderHook(() => useConvertParameters());
 
       // No parameters - should be invalid
@@ -132,100 +129,98 @@ describe('useConvertParameters', () => {
 
       // Only fromExtension - should be invalid
       act(() => {
-        result.current.updateParameter('fromExtension', 'pdf');
+        result.current.updateParameter("fromExtension", "pdf");
       });
       expect(result.current.validateParameters()).toBe(false);
 
       // Both extensions with supported conversion - should be valid
       act(() => {
-        result.current.updateParameter('toExtension', 'png');
+        result.current.updateParameter("toExtension", "png");
       });
       expect(result.current.validateParameters()).toBe(true);
     });
 
-    test('should validate unsupported conversions', () => {
+    test("should validate unsupported conversions", () => {
       const { result } = renderHook(() => useConvertParameters());
 
       act(() => {
-        result.current.updateParameter('fromExtension', 'pdf');
-        result.current.updateParameter('toExtension', 'unsupported');
+        result.current.updateParameter("fromExtension", "pdf");
+        result.current.updateParameter("toExtension", "unsupported");
       });
 
       expect(result.current.validateParameters()).toBe(false);
     });
-
   });
 
-  describe('Endpoint Generation', () => {
-
-    test('should generate correct endpoint names', () => {
+  describe("Endpoint Generation", () => {
+    test("should generate correct endpoint names", () => {
       const { result } = renderHook(() => useConvertParameters());
 
       act(() => {
-        result.current.updateParameter('fromExtension', 'pdf');
-        result.current.updateParameter('toExtension', 'png');
+        result.current.updateParameter("fromExtension", "pdf");
+        result.current.updateParameter("toExtension", "png");
       });
 
       const endpointName = result.current.getEndpointName();
-      expect(endpointName).toBe('pdf-to-img');
+      expect(endpointName).toBe("pdf-to-img");
     });
 
-    test('should generate correct endpoint URLs', () => {
+    test("should generate correct endpoint URLs", () => {
       const { result } = renderHook(() => useConvertParameters());
 
       act(() => {
-        result.current.updateParameter('fromExtension', 'pdf');
-        result.current.updateParameter('toExtension', 'png');
+        result.current.updateParameter("fromExtension", "pdf");
+        result.current.updateParameter("toExtension", "png");
       });
 
       const endpoint = result.current.getEndpoint();
-      expect(endpoint).toBe('/api/v1/convert/pdf/img');
+      expect(endpoint).toBe("/api/v1/convert/pdf/img");
     });
 
-    test('should return empty strings for invalid conversions', () => {
+    test("should return empty strings for invalid conversions", () => {
       const { result } = renderHook(() => useConvertParameters());
 
       act(() => {
-        result.current.updateParameter('fromExtension', 'invalid');
-        result.current.updateParameter('toExtension', 'invalid');
+        result.current.updateParameter("fromExtension", "invalid");
+        result.current.updateParameter("toExtension", "invalid");
       });
 
-      expect(result.current.getEndpointName()).toBe('');
-      expect(result.current.getEndpoint()).toBe('');
+      expect(result.current.getEndpointName()).toBe("");
+      expect(result.current.getEndpoint()).toBe("");
     });
   });
 
-  describe('Available Extensions', () => {
-
-    test('should return available extensions for valid source format', () => {
+  describe("Available Extensions", () => {
+    test("should return available extensions for valid source format", () => {
       const { result } = renderHook(() => useConvertParameters());
 
-      const availableExtensions = result.current.getAvailableToExtensions('pdf');
+      const availableExtensions = result.current.getAvailableToExtensions("pdf");
 
       expect(availableExtensions.length).toBeGreaterThan(0);
-      expect(availableExtensions.some(ext => ext.value === 'png')).toBe(true);
-      expect(availableExtensions.some(ext => ext.value === 'jpg')).toBe(true);
+      expect(availableExtensions.some((ext) => ext.value === "png")).toBe(true);
+      expect(availableExtensions.some((ext) => ext.value === "jpg")).toBe(true);
     });
 
-    test('should return empty array for invalid source format', () => {
+    test("should return empty array for invalid source format", () => {
       const { result } = renderHook(() => useConvertParameters());
 
-      const availableExtensions = result.current.getAvailableToExtensions('invalid');
+      const availableExtensions = result.current.getAvailableToExtensions("invalid");
 
-      expect(availableExtensions).toEqual([{
-        "group": "Document",
-        "label": "PDF",
-        "value": "pdf",
-      }]);
+      expect(availableExtensions).toEqual([
+        {
+          group: "Document",
+          label: "PDF",
+          value: "pdf",
+        },
+      ]);
     });
 
-    test('should return empty array for empty source format', () => {
+    test("should return empty array for empty source format", () => {
       const { result } = renderHook(() => useConvertParameters());
 
-      const availableExtensions = result.current.getAvailableToExtensions('');
+      const availableExtensions = result.current.getAvailableToExtensions("");
 
       expect(availableExtensions).toEqual([]);
     });
   });
-
 });
diff --git a/frontend/src/core/hooks/tools/convert/useConvertParameters.ts b/frontend/src/core/hooks/tools/convert/useConvertParameters.ts
index ed9df40513..3b9796607b 100644
--- a/frontend/src/core/hooks/tools/convert/useConvertParameters.ts
+++ b/frontend/src/core/hooks/tools/convert/useConvertParameters.ts
@@ -5,13 +5,19 @@ import {
   CONVERSION_MATRIX,
   type ColorType,
   type OutputOption,
-  type FitOption
-} from '@app/constants/convertConstants';
-import { getEndpointName as getEndpointNameUtil, getEndpointUrl, isImageFormat, isWebFormat, getAvailableToExtensions as getAvailableToExtensionsUtil } from '@app/utils/convertUtils';
-import { detectFileExtension as detectFileExtensionUtil } from '@app/utils/fileUtils';
-import { BaseParameters } from '@app/types/parameters';
-import { useBaseParameters, BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
-import { useCallback, useMemo } from 'react';
+  type FitOption,
+} from "@app/constants/convertConstants";
+import {
+  getEndpointName as getEndpointNameUtil,
+  getEndpointUrl,
+  isImageFormat,
+  isWebFormat,
+  getAvailableToExtensions as getAvailableToExtensionsUtil,
+} from "@app/utils/convertUtils";
+import { detectFileExtension as detectFileExtensionUtil } from "@app/utils/fileUtils";
+import { BaseParameters } from "@app/types/parameters";
+import { useBaseParameters, BaseParametersHook } from "@app/hooks/tools/shared/useBaseParameters";
+import { useCallback, useMemo } from "react";
 
 export interface ConvertParameters extends BaseParameters {
   fromExtension: string;
@@ -64,18 +70,18 @@ export interface ConvertParameters extends BaseParameters {
     outputFormat: string;
   };
   isSmartDetection: boolean;
-  smartDetectionType: 'mixed' | 'images' | 'web' | 'none';
+  smartDetectionType: "mixed" | "images" | "web" | "none";
 }
 
 export interface ConvertParametersHook extends BaseParametersHook<ConvertParameters> {
   getEndpoint: () => string;
-  getAvailableToExtensions: (fromExtension: string) => Array<{value: string, label: string, group: string}>;
-  analyzeFileTypes: (files: Array<{name: string}>) => void;
+  getAvailableToExtensions: (fromExtension: string) => Array<{ value: string; label: string; group: string }>;
+  analyzeFileTypes: (files: Array<{ name: string }>) => void;
 }
 
 export const defaultParameters: ConvertParameters = {
-  fromExtension: '',
-  toExtension: '',
+  fromExtension: "",
+  toExtension: "",
   imageOptions: {
     colorType: COLOR_TYPES.COLOR,
     dpi: 300,
@@ -94,11 +100,11 @@ export const defaultParameters: ConvertParameters = {
     includeAllRecipients: false,
   },
   pdfaOptions: {
-    outputFormat: 'pdfa-2b',
+    outputFormat: "pdfa-2b",
     strict: false,
   },
   pdfxOptions: {
-    outputFormat: 'pdfx',
+    outputFormat: "pdfx",
   },
   cbrOptions: {
     optimizeForEbook: false,
@@ -120,11 +126,11 @@ export const defaultParameters: ConvertParameters = {
   },
   epubOptions: {
     detectChapters: true,
-    targetDevice: 'TABLET_PHONE_IMAGES',
-    outputFormat: 'EPUB',
+    targetDevice: "TABLET_PHONE_IMAGES",
+    outputFormat: "EPUB",
   },
   isSmartDetection: false,
-  smartDetectionType: 'none',
+  smartDetectionType: "none",
 };
 
 const validateParameters = (params: ConvertParameters): boolean => {
@@ -134,9 +140,9 @@ const validateParameters = (params: ConvertParameters): boolean => {
 
   // Handle dynamic format identifiers (file-<extension>)
   let supportedToExtensions: string[];
-  if (fromExtension.startsWith('file-')) {
+  if (fromExtension.startsWith("file-")) {
     // Dynamic format - use 'any' conversion options
-    supportedToExtensions = CONVERSION_MATRIX['any'] || [];
+    supportedToExtensions = CONVERSION_MATRIX["any"] || [];
   } else {
     // Regular format - check conversion matrix
     supportedToExtensions = CONVERSION_MATRIX[fromExtension] || [];
@@ -153,33 +159,36 @@ const getEndpointName = (params: ConvertParameters): string => {
   const { fromExtension, toExtension, isSmartDetection, smartDetectionType } = params;
 
   if (isSmartDetection) {
-    if (smartDetectionType === 'mixed') {
+    if (smartDetectionType === "mixed") {
       // Mixed file types -> PDF using file-to-pdf endpoint
-      return 'file-to-pdf';
-    } else if (smartDetectionType === 'images') {
+      return "file-to-pdf";
+    } else if (smartDetectionType === "images") {
       // All images -> PDF using img-to-pdf endpoint
-      return 'img-to-pdf';
-    } else if (smartDetectionType === 'web') {
+      return "img-to-pdf";
+    } else if (smartDetectionType === "web") {
       // All web files -> PDF using html-to-pdf endpoint
-      return 'html-to-pdf';
+      return "html-to-pdf";
     }
   }
 
   // Handle dynamic format identifiers (file-<extension>)
-  if (fromExtension.startsWith('file-')) {
+  if (fromExtension.startsWith("file-")) {
     // Dynamic format - use file-to-pdf endpoint
-    return 'file-to-pdf';
+    return "file-to-pdf";
   }
 
   return getEndpointNameUtil(fromExtension, toExtension);
 };
 
 export const useConvertParameters = (): ConvertParametersHook => {
-  const config = useMemo(() => ({
-    defaultParameters,
-    endpointName: getEndpointName,
-    validateFn: validateParameters,
-  }), []);
+  const config = useMemo(
+    () => ({
+      defaultParameters,
+      endpointName: getEndpointName,
+      validateFn: validateParameters,
+    }),
+    [],
+  );
 
   const baseHook = useBaseParameters(config);
 
@@ -187,22 +196,22 @@ export const useConvertParameters = (): ConvertParametersHook => {
     const { fromExtension, toExtension, isSmartDetection, smartDetectionType } = baseHook.parameters;
 
     if (isSmartDetection) {
-      if (smartDetectionType === 'mixed') {
+      if (smartDetectionType === "mixed") {
         // Mixed file types -> PDF using file-to-pdf endpoint
-        return '/api/v1/convert/file/pdf';
-      } else if (smartDetectionType === 'images') {
+        return "/api/v1/convert/file/pdf";
+      } else if (smartDetectionType === "images") {
         // All images -> PDF using img-to-pdf endpoint
-        return '/api/v1/convert/img/pdf';
-      } else if (smartDetectionType === 'web') {
+        return "/api/v1/convert/img/pdf";
+      } else if (smartDetectionType === "web") {
         // All web files -> PDF using html-to-pdf endpoint
-        return '/api/v1/convert/html/pdf';
+        return "/api/v1/convert/html/pdf";
       }
     }
 
     // Handle dynamic format identifiers (file-<extension>)
-    if (fromExtension.startsWith('file-')) {
+    if (fromExtension.startsWith("file-")) {
       // Dynamic format - use file-to-pdf endpoint
-      return '/api/v1/convert/file/pdf';
+      return "/api/v1/convert/file/pdf";
     }
 
     return getEndpointUrl(fromExtension, toExtension);
@@ -210,195 +219,203 @@ export const useConvertParameters = (): ConvertParametersHook => {
 
   const getAvailableToExtensions = getAvailableToExtensionsUtil;
 
-
-  const analyzeFileTypes = useCallback((files: Array<{name: string}>) => {
-    if (files.length === 0) {
-      // No files - only reset smart detection, keep user's format choices
-      baseHook.setParameters(prev => {
-        // Only update if something actually changed
-        if (prev.isSmartDetection === false && prev.smartDetectionType === 'none') {
-          return prev; // No change needed
-        }
-
-        return {
-          ...prev,
-          isSmartDetection: false,
-          smartDetectionType: 'none'
-          // Don't reset fromExtension and toExtension - let user keep their choices
-        };
-      });
-      return;
-    }
-
-    if (files.length === 1) {
-      // Single file - use regular detection with smart target selection
-      const detectedExt = detectFileExtensionUtil(files[0].name);
-      let fromExt = detectedExt;
-      let availableTargets = detectedExt ? CONVERSION_MATRIX[detectedExt] || [] : [];
-
-      // If no explicit conversion exists for this file type, create a dynamic format entry
-      // and fall back to 'any' conversion logic for the actual endpoint
-      if (availableTargets.length === 0 && detectedExt) {
-        fromExt = `file-${detectedExt}`; // Create dynamic format identifier
-        availableTargets = CONVERSION_MATRIX['any'] || [];
-      } else if (availableTargets.length === 0) {
-        // No extension detected - fall back to 'any'
-        fromExt = 'any';
-        availableTargets = CONVERSION_MATRIX['any'] || [];
-      }
-
-      baseHook.setParameters(prev => {
-        // Check if current toExtension is still valid for the new fromExtension
-        const currentToExt = prev.toExtension;
-        const isCurrentToExtValid = availableTargets.includes(currentToExt);
-
-        // Auto-select target only if:
-        // 1. No current target is set, OR
-        // 2. Current target is invalid for new source type, OR
-        // 3. There's only one possible target (forced conversion)
-        let newToExtension = currentToExt;
-        if (!currentToExt || !isCurrentToExtValid) {
-          newToExtension = availableTargets.length === 1 ? availableTargets[0] : '';
-        }
-
-        const newState = {
-          ...prev,
-          isSmartDetection: false,
-          smartDetectionType: 'none' as const,
-          fromExtension: fromExt,
-          toExtension: newToExtension
-        };
-
-        // Only update if something actually changed
-        if (
-          prev.isSmartDetection === newState.isSmartDetection &&
-          prev.smartDetectionType === newState.smartDetectionType &&
-          prev.fromExtension === newState.fromExtension &&
-          prev.toExtension === newState.toExtension
-        ) {
-          return prev; // Return the same object to prevent re-render
-        }
-
-        return newState;
-      });
-      return;
-    }
-
-    // Multiple files - analyze file types
-    const extensions = files.map(file => detectFileExtensionUtil(file.name));
-    const uniqueExtensions = [...new Set(extensions)];
-
-    if (uniqueExtensions.length === 1) {
-      // All files are the same type - use regular detection with smart target selection
-      const detectedExt = uniqueExtensions[0];
-      let fromExt = detectedExt;
-      let availableTargets = CONVERSION_MATRIX[detectedExt] || [];
-
-      // If no explicit conversion exists for this file type, fall back to 'any'
-      if (availableTargets.length === 0) {
-        fromExt = 'any';
-        availableTargets = CONVERSION_MATRIX['any'] || [];
-      }
-
-      baseHook.setParameters(prev => {
-        // Check if current toExtension is still valid for the new fromExtension
-        const currentToExt = prev.toExtension;
-        const isCurrentToExtValid = availableTargets.includes(currentToExt);
-
-        // Auto-select target only if:
-        // 1. No current target is set, OR
-        // 2. Current target is invalid for new source type, OR
-        // 3. There's only one possible target (forced conversion)
-        let newToExtension = currentToExt;
-        if (!currentToExt || !isCurrentToExtValid) {
-          newToExtension = availableTargets.length === 1 ? availableTargets[0] : '';
-        }
-
-        const newState = {
-          ...prev,
-          isSmartDetection: false,
-          smartDetectionType: 'none' as const,
-          fromExtension: fromExt,
-          toExtension: newToExtension
-        };
-
-        // Only update if something actually changed
-        if (
-          prev.isSmartDetection === newState.isSmartDetection &&
-          prev.smartDetectionType === newState.smartDetectionType &&
-          prev.fromExtension === newState.fromExtension &&
-          prev.toExtension === newState.toExtension
-        ) {
-          return prev; // Return the same object to prevent re-render
-        }
-
-        return newState;
-      });
-    } else {
-      // Mixed file types
-      const allImages = uniqueExtensions.every(ext => isImageFormat(ext));
-      const allWeb = uniqueExtensions.every(ext => isWebFormat(ext));
-
-      if (allImages) {
-        // All files are images - use image-to-pdf conversion
-        baseHook.setParameters(prev => {
+  const analyzeFileTypes = useCallback(
+    (files: Array<{ name: string }>) => {
+      if (files.length === 0) {
+        // No files - only reset smart detection, keep user's format choices
+        baseHook.setParameters((prev) => {
           // Only update if something actually changed
-          if (prev.isSmartDetection === true &&
-              prev.smartDetectionType === 'images' &&
-              prev.fromExtension === 'image' &&
-              prev.toExtension === 'pdf') {
+          if (prev.isSmartDetection === false && prev.smartDetectionType === "none") {
             return prev; // No change needed
           }
 
           return {
             ...prev,
-            isSmartDetection: true,
-            smartDetectionType: 'images',
-            fromExtension: 'image',
-            toExtension: 'pdf'
+            isSmartDetection: false,
+            smartDetectionType: "none",
+            // Don't reset fromExtension and toExtension - let user keep their choices
           };
         });
-      } else if (allWeb) {
-        // All files are web files - use html-to-pdf conversion
-        baseHook.setParameters(prev => {
-          // Only update if something actually changed
-          if (prev.isSmartDetection === true &&
-              prev.smartDetectionType === 'web' &&
-              prev.fromExtension === 'html' &&
-              prev.toExtension === 'pdf') {
-            return prev; // No change needed
+        return;
+      }
+
+      if (files.length === 1) {
+        // Single file - use regular detection with smart target selection
+        const detectedExt = detectFileExtensionUtil(files[0].name);
+        let fromExt = detectedExt;
+        let availableTargets = detectedExt ? CONVERSION_MATRIX[detectedExt] || [] : [];
+
+        // If no explicit conversion exists for this file type, create a dynamic format entry
+        // and fall back to 'any' conversion logic for the actual endpoint
+        if (availableTargets.length === 0 && detectedExt) {
+          fromExt = `file-${detectedExt}`; // Create dynamic format identifier
+          availableTargets = CONVERSION_MATRIX["any"] || [];
+        } else if (availableTargets.length === 0) {
+          // No extension detected - fall back to 'any'
+          fromExt = "any";
+          availableTargets = CONVERSION_MATRIX["any"] || [];
+        }
+
+        baseHook.setParameters((prev) => {
+          // Check if current toExtension is still valid for the new fromExtension
+          const currentToExt = prev.toExtension;
+          const isCurrentToExtValid = availableTargets.includes(currentToExt);
+
+          // Auto-select target only if:
+          // 1. No current target is set, OR
+          // 2. Current target is invalid for new source type, OR
+          // 3. There's only one possible target (forced conversion)
+          let newToExtension = currentToExt;
+          if (!currentToExt || !isCurrentToExtValid) {
+            newToExtension = availableTargets.length === 1 ? availableTargets[0] : "";
           }
 
-          return {
+          const newState = {
             ...prev,
-            isSmartDetection: true,
-            smartDetectionType: 'web',
-            fromExtension: 'html',
-            toExtension: 'pdf'
+            isSmartDetection: false,
+            smartDetectionType: "none" as const,
+            fromExtension: fromExt,
+            toExtension: newToExtension,
           };
+
+          // Only update if something actually changed
+          if (
+            prev.isSmartDetection === newState.isSmartDetection &&
+            prev.smartDetectionType === newState.smartDetectionType &&
+            prev.fromExtension === newState.fromExtension &&
+            prev.toExtension === newState.toExtension
+          ) {
+            return prev; // Return the same object to prevent re-render
+          }
+
+          return newState;
+        });
+        return;
+      }
+
+      // Multiple files - analyze file types
+      const extensions = files.map((file) => detectFileExtensionUtil(file.name));
+      const uniqueExtensions = [...new Set(extensions)];
+
+      if (uniqueExtensions.length === 1) {
+        // All files are the same type - use regular detection with smart target selection
+        const detectedExt = uniqueExtensions[0];
+        let fromExt = detectedExt;
+        let availableTargets = CONVERSION_MATRIX[detectedExt] || [];
+
+        // If no explicit conversion exists for this file type, fall back to 'any'
+        if (availableTargets.length === 0) {
+          fromExt = "any";
+          availableTargets = CONVERSION_MATRIX["any"] || [];
+        }
+
+        baseHook.setParameters((prev) => {
+          // Check if current toExtension is still valid for the new fromExtension
+          const currentToExt = prev.toExtension;
+          const isCurrentToExtValid = availableTargets.includes(currentToExt);
+
+          // Auto-select target only if:
+          // 1. No current target is set, OR
+          // 2. Current target is invalid for new source type, OR
+          // 3. There's only one possible target (forced conversion)
+          let newToExtension = currentToExt;
+          if (!currentToExt || !isCurrentToExtValid) {
+            newToExtension = availableTargets.length === 1 ? availableTargets[0] : "";
+          }
+
+          const newState = {
+            ...prev,
+            isSmartDetection: false,
+            smartDetectionType: "none" as const,
+            fromExtension: fromExt,
+            toExtension: newToExtension,
+          };
+
+          // Only update if something actually changed
+          if (
+            prev.isSmartDetection === newState.isSmartDetection &&
+            prev.smartDetectionType === newState.smartDetectionType &&
+            prev.fromExtension === newState.fromExtension &&
+            prev.toExtension === newState.toExtension
+          ) {
+            return prev; // Return the same object to prevent re-render
+          }
+
+          return newState;
         });
       } else {
-        // Mixed non-image types - use file-to-pdf conversion
-        baseHook.setParameters(prev => {
-          // Only update if something actually changed
-          if (prev.isSmartDetection === true &&
-              prev.smartDetectionType === 'mixed' &&
-              prev.fromExtension === 'any' &&
-              prev.toExtension === 'pdf') {
-            return prev; // No change needed
-          }
+        // Mixed file types
+        const allImages = uniqueExtensions.every((ext) => isImageFormat(ext));
+        const allWeb = uniqueExtensions.every((ext) => isWebFormat(ext));
 
-          return {
-            ...prev,
-            isSmartDetection: true,
-            smartDetectionType: 'mixed',
-            fromExtension: 'any',
-            toExtension: 'pdf'
-          };
-        });
+        if (allImages) {
+          // All files are images - use image-to-pdf conversion
+          baseHook.setParameters((prev) => {
+            // Only update if something actually changed
+            if (
+              prev.isSmartDetection === true &&
+              prev.smartDetectionType === "images" &&
+              prev.fromExtension === "image" &&
+              prev.toExtension === "pdf"
+            ) {
+              return prev; // No change needed
+            }
+
+            return {
+              ...prev,
+              isSmartDetection: true,
+              smartDetectionType: "images",
+              fromExtension: "image",
+              toExtension: "pdf",
+            };
+          });
+        } else if (allWeb) {
+          // All files are web files - use html-to-pdf conversion
+          baseHook.setParameters((prev) => {
+            // Only update if something actually changed
+            if (
+              prev.isSmartDetection === true &&
+              prev.smartDetectionType === "web" &&
+              prev.fromExtension === "html" &&
+              prev.toExtension === "pdf"
+            ) {
+              return prev; // No change needed
+            }
+
+            return {
+              ...prev,
+              isSmartDetection: true,
+              smartDetectionType: "web",
+              fromExtension: "html",
+              toExtension: "pdf",
+            };
+          });
+        } else {
+          // Mixed non-image types - use file-to-pdf conversion
+          baseHook.setParameters((prev) => {
+            // Only update if something actually changed
+            if (
+              prev.isSmartDetection === true &&
+              prev.smartDetectionType === "mixed" &&
+              prev.fromExtension === "any" &&
+              prev.toExtension === "pdf"
+            ) {
+              return prev; // No change needed
+            }
+
+            return {
+              ...prev,
+              isSmartDetection: true,
+              smartDetectionType: "mixed",
+              fromExtension: "any",
+              toExtension: "pdf",
+            };
+          });
+        }
       }
-    }
-  }, [baseHook.setParameters]);
+    },
+    [baseHook.setParameters],
+  );
 
   return {
     ...baseHook,
diff --git a/frontend/src/core/hooks/tools/convert/useConvertParametersAutoDetection.test.ts b/frontend/src/core/hooks/tools/convert/useConvertParametersAutoDetection.test.ts
index e626671f91..aad61d4b78 100644
--- a/frontend/src/core/hooks/tools/convert/useConvertParametersAutoDetection.test.ts
+++ b/frontend/src/core/hooks/tools/convert/useConvertParametersAutoDetection.test.ts
@@ -3,354 +3,299 @@
  * This covers the analyzeFileTypes function and related smart detection logic
  */
 
-import { describe, test, expect } from 'vitest';
-import { renderHook, act } from '@testing-library/react';
-import { useConvertParameters } from '@app/hooks/tools/convert/useConvertParameters';
+import { describe, test, expect } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { useConvertParameters } from "@app/hooks/tools/convert/useConvertParameters";
 
-describe('useConvertParameters - Auto Detection & Smart Conversion', () => {
-
-  describe('Single File Detection', () => {
-
-    test('should detect single file extension and set auto-target', () => {
+describe("useConvertParameters - Auto Detection & Smart Conversion", () => {
+  describe("Single File Detection", () => {
+    test("should detect single file extension and set auto-target", () => {
       const { result } = renderHook(() => useConvertParameters());
 
-      const pdfFile = [{ name: 'document.pdf' }];
+      const pdfFile = [{ name: "document.pdf" }];
 
       act(() => {
         result.current.analyzeFileTypes(pdfFile);
       });
 
-      expect(result.current.parameters.fromExtension).toBe('pdf');
-      expect(result.current.parameters.toExtension).toBe(''); // No auto-selection for multiple targets
+      expect(result.current.parameters.fromExtension).toBe("pdf");
+      expect(result.current.parameters.toExtension).toBe(""); // No auto-selection for multiple targets
       expect(result.current.parameters.isSmartDetection).toBe(false);
-      expect(result.current.parameters.smartDetectionType).toBe('none');
+      expect(result.current.parameters.smartDetectionType).toBe("none");
     });
 
-    test('should handle unknown file types with file-to-pdf fallback', () => {
+    test("should handle unknown file types with file-to-pdf fallback", () => {
       const { result } = renderHook(() => useConvertParameters());
 
-      const unknownFile = [{ name: 'document.xyz' }, { name: 'image.jpggg' }];
+      const unknownFile = [{ name: "document.xyz" }, { name: "image.jpggg" }];
 
       act(() => {
         result.current.analyzeFileTypes(unknownFile);
       });
 
-      expect(result.current.parameters.fromExtension).toBe('any');
-      expect(result.current.parameters.toExtension).toBe('pdf'); // Fallback to file-to-pdf
+      expect(result.current.parameters.fromExtension).toBe("any");
+      expect(result.current.parameters.toExtension).toBe("pdf"); // Fallback to file-to-pdf
       expect(result.current.parameters.isSmartDetection).toBe(true);
     });
 
-    test('should handle files without extensions', () => {
+    test("should handle files without extensions", () => {
       const { result } = renderHook(() => useConvertParameters());
 
-      const noExtFile = [{ name: 'document' }];
+      const noExtFile = [{ name: "document" }];
 
       act(() => {
         result.current.analyzeFileTypes(noExtFile);
       });
 
-      expect(result.current.parameters.fromExtension).toBe('any');
-      expect(result.current.parameters.toExtension).toBe('pdf'); // Fallback to file-to-pdf
+      expect(result.current.parameters.fromExtension).toBe("any");
+      expect(result.current.parameters.toExtension).toBe("pdf"); // Fallback to file-to-pdf
     });
-
-
   });
 
-  describe('Multiple Identical Files', () => {
-
-    test('should detect multiple PDF files and set auto-target', () => {
+  describe("Multiple Identical Files", () => {
+    test("should detect multiple PDF files and set auto-target", () => {
       const { result } = renderHook(() => useConvertParameters());
 
-      const pdfFiles = [
-        { name: 'doc1.pdf' },
-        { name: 'doc2.pdf' },
-        { name: 'doc3.pdf' }
-      ];
+      const pdfFiles = [{ name: "doc1.pdf" }, { name: "doc2.pdf" }, { name: "doc3.pdf" }];
 
       act(() => {
         result.current.analyzeFileTypes(pdfFiles);
       });
 
-      expect(result.current.parameters.fromExtension).toBe('pdf');
-      expect(result.current.parameters.toExtension).toBe(''); // Auto-selected
+      expect(result.current.parameters.fromExtension).toBe("pdf");
+      expect(result.current.parameters.toExtension).toBe(""); // Auto-selected
       expect(result.current.parameters.isSmartDetection).toBe(false);
-      expect(result.current.parameters.smartDetectionType).toBe('none');
+      expect(result.current.parameters.smartDetectionType).toBe("none");
     });
 
-    test('should handle multiple unknown file types with fallback', () => {
+    test("should handle multiple unknown file types with fallback", () => {
       const { result } = renderHook(() => useConvertParameters());
 
-      const unknownFiles = [
-        { name: 'file1.xyz' },
-        { name: 'file2.xyz' }
-      ];
+      const unknownFiles = [{ name: "file1.xyz" }, { name: "file2.xyz" }];
 
       act(() => {
         result.current.analyzeFileTypes(unknownFiles);
       });
 
-      expect(result.current.parameters.fromExtension).toBe('any');
-      expect(result.current.parameters.toExtension).toBe('pdf');
+      expect(result.current.parameters.fromExtension).toBe("any");
+      expect(result.current.parameters.toExtension).toBe("pdf");
       expect(result.current.parameters.isSmartDetection).toBe(false);
     });
   });
 
-  describe('Smart Detection - All Images', () => {
-
-    test('should detect all image files and enable smart detection', () => {
+  describe("Smart Detection - All Images", () => {
+    test("should detect all image files and enable smart detection", () => {
       const { result } = renderHook(() => useConvertParameters());
 
-      const imageFiles = [
-        { name: 'photo1.jpg' },
-        { name: 'photo2.png' },
-        { name: 'photo3.gif' }
-      ];
+      const imageFiles = [{ name: "photo1.jpg" }, { name: "photo2.png" }, { name: "photo3.gif" }];
 
       act(() => {
         result.current.analyzeFileTypes(imageFiles);
       });
 
-      expect(result.current.parameters.fromExtension).toBe('image');
-      expect(result.current.parameters.toExtension).toBe('pdf');
+      expect(result.current.parameters.fromExtension).toBe("image");
+      expect(result.current.parameters.toExtension).toBe("pdf");
       expect(result.current.parameters.isSmartDetection).toBe(true);
-      expect(result.current.parameters.smartDetectionType).toBe('images');
+      expect(result.current.parameters.smartDetectionType).toBe("images");
     });
 
-    test('should handle mixed case image extensions', () => {
+    test("should handle mixed case image extensions", () => {
       const { result } = renderHook(() => useConvertParameters());
 
-      const imageFiles = [
-        { name: 'photo1.JPG' },
-        { name: 'photo2.PNG' }
-      ];
+      const imageFiles = [{ name: "photo1.JPG" }, { name: "photo2.PNG" }];
 
       act(() => {
         result.current.analyzeFileTypes(imageFiles);
       });
 
       expect(result.current.parameters.isSmartDetection).toBe(true);
-      expect(result.current.parameters.smartDetectionType).toBe('images');
+      expect(result.current.parameters.smartDetectionType).toBe("images");
     });
   });
 
-  describe('Smart Detection - All Web Files', () => {
-
-    test('should detect all web files and enable web smart detection', () => {
+  describe("Smart Detection - All Web Files", () => {
+    test("should detect all web files and enable web smart detection", () => {
       const { result } = renderHook(() => useConvertParameters());
 
-      const webFiles = [
-        { name: 'page1.html' },
-        { name: 'archive.zip' }
-      ];
+      const webFiles = [{ name: "page1.html" }, { name: "archive.zip" }];
 
       act(() => {
         result.current.analyzeFileTypes(webFiles);
       });
 
-      expect(result.current.parameters.fromExtension).toBe('html');
-      expect(result.current.parameters.toExtension).toBe('pdf');
+      expect(result.current.parameters.fromExtension).toBe("html");
+      expect(result.current.parameters.toExtension).toBe("pdf");
       expect(result.current.parameters.isSmartDetection).toBe(true);
-      expect(result.current.parameters.smartDetectionType).toBe('web');
+      expect(result.current.parameters.smartDetectionType).toBe("web");
     });
 
-    test('should handle mixed case web extensions', () => {
+    test("should handle mixed case web extensions", () => {
       const { result } = renderHook(() => useConvertParameters());
 
-      const webFiles = [
-        { name: 'page1.HTML' },
-        { name: 'archive.ZIP' }
-      ];
+      const webFiles = [{ name: "page1.HTML" }, { name: "archive.ZIP" }];
 
       act(() => {
         result.current.analyzeFileTypes(webFiles);
       });
 
       expect(result.current.parameters.isSmartDetection).toBe(true);
-      expect(result.current.parameters.smartDetectionType).toBe('web');
+      expect(result.current.parameters.smartDetectionType).toBe("web");
     });
 
-    test('should detect multiple web files and enable web smart detection', () => {
+    test("should detect multiple web files and enable web smart detection", () => {
       const { result } = renderHook(() => useConvertParameters());
 
-      const zipFiles = [
-        { name: 'site1.zip' },
-        { name: 'site2.html' }
-      ];
+      const zipFiles = [{ name: "site1.zip" }, { name: "site2.html" }];
 
       act(() => {
         result.current.analyzeFileTypes(zipFiles);
       });
 
-      expect(result.current.parameters.fromExtension).toBe('html');
-      expect(result.current.parameters.toExtension).toBe('pdf');
+      expect(result.current.parameters.fromExtension).toBe("html");
+      expect(result.current.parameters.toExtension).toBe("pdf");
       expect(result.current.parameters.isSmartDetection).toBe(true);
-      expect(result.current.parameters.smartDetectionType).toBe('web');
+      expect(result.current.parameters.smartDetectionType).toBe("web");
     });
   });
 
-  describe('Smart Detection - Mixed File Types', () => {
-
-    test('should detect mixed file types and enable smart detection', () => {
+  describe("Smart Detection - Mixed File Types", () => {
+    test("should detect mixed file types and enable smart detection", () => {
       const { result } = renderHook(() => useConvertParameters());
 
-      const mixedFiles = [
-        { name: 'document.pdf' },
-        { name: 'spreadsheet.xlsx' },
-        { name: 'presentation.pptx' }
-      ];
+      const mixedFiles = [{ name: "document.pdf" }, { name: "spreadsheet.xlsx" }, { name: "presentation.pptx" }];
 
       act(() => {
         result.current.analyzeFileTypes(mixedFiles);
       });
 
-      expect(result.current.parameters.fromExtension).toBe('any');
-      expect(result.current.parameters.toExtension).toBe('pdf');
+      expect(result.current.parameters.fromExtension).toBe("any");
+      expect(result.current.parameters.toExtension).toBe("pdf");
       expect(result.current.parameters.isSmartDetection).toBe(true);
-      expect(result.current.parameters.smartDetectionType).toBe('mixed');
+      expect(result.current.parameters.smartDetectionType).toBe("mixed");
     });
 
-    test('should detect mixed images and documents as mixed type', () => {
+    test("should detect mixed images and documents as mixed type", () => {
       const { result } = renderHook(() => useConvertParameters());
 
-      const mixedFiles = [
-        { name: 'photo.jpg' },
-        { name: 'document.pdf' },
-        { name: 'text.txt' }
-      ];
+      const mixedFiles = [{ name: "photo.jpg" }, { name: "document.pdf" }, { name: "text.txt" }];
 
       act(() => {
         result.current.analyzeFileTypes(mixedFiles);
       });
 
       expect(result.current.parameters.isSmartDetection).toBe(true);
-      expect(result.current.parameters.smartDetectionType).toBe('mixed');
+      expect(result.current.parameters.smartDetectionType).toBe("mixed");
     });
 
-    test('should handle mixed with unknown file types', () => {
+    test("should handle mixed with unknown file types", () => {
       const { result } = renderHook(() => useConvertParameters());
 
-      const mixedFiles = [
-        { name: 'document.pdf' },
-        { name: 'unknown.xyz' },
-        { name: 'noextension' }
-      ];
+      const mixedFiles = [{ name: "document.pdf" }, { name: "unknown.xyz" }, { name: "noextension" }];
 
       act(() => {
         result.current.analyzeFileTypes(mixedFiles);
       });
 
       expect(result.current.parameters.isSmartDetection).toBe(true);
-      expect(result.current.parameters.smartDetectionType).toBe('mixed');
+      expect(result.current.parameters.smartDetectionType).toBe("mixed");
     });
   });
 
-  describe('Smart Detection Endpoint Resolution', () => {
-
-    test('should return correct endpoint for image smart detection', () => {
+  describe("Smart Detection Endpoint Resolution", () => {
+    test("should return correct endpoint for image smart detection", () => {
       const { result } = renderHook(() => useConvertParameters());
 
-      const imageFiles = [
-        { name: 'photo1.jpg' },
-        { name: 'photo2.png' }
-      ];
+      const imageFiles = [{ name: "photo1.jpg" }, { name: "photo2.png" }];
 
       act(() => {
         result.current.analyzeFileTypes(imageFiles);
       });
 
-      expect(result.current.getEndpointName()).toBe('img-to-pdf');
-      expect(result.current.getEndpoint()).toBe('/api/v1/convert/img/pdf');
+      expect(result.current.getEndpointName()).toBe("img-to-pdf");
+      expect(result.current.getEndpoint()).toBe("/api/v1/convert/img/pdf");
     });
 
-    test('should return correct endpoint for web smart detection', () => {
+    test("should return correct endpoint for web smart detection", () => {
       const { result } = renderHook(() => useConvertParameters());
 
-      const webFiles = [
-        { name: 'page1.html' },
-        { name: 'archive.zip' }
-      ];
+      const webFiles = [{ name: "page1.html" }, { name: "archive.zip" }];
 
       act(() => {
         result.current.analyzeFileTypes(webFiles);
       });
 
-      expect(result.current.getEndpointName()).toBe('html-to-pdf');
-      expect(result.current.getEndpoint()).toBe('/api/v1/convert/html/pdf');
+      expect(result.current.getEndpointName()).toBe("html-to-pdf");
+      expect(result.current.getEndpoint()).toBe("/api/v1/convert/html/pdf");
     });
 
-    test('should return correct endpoint for mixed smart detection', () => {
+    test("should return correct endpoint for mixed smart detection", () => {
       const { result } = renderHook(() => useConvertParameters());
 
-      const mixedFiles = [
-        { name: 'document.pdf' },
-        { name: 'spreadsheet.xlsx' }
-      ];
+      const mixedFiles = [{ name: "document.pdf" }, { name: "spreadsheet.xlsx" }];
 
       act(() => {
         result.current.analyzeFileTypes(mixedFiles);
       });
 
-      expect(result.current.getEndpointName()).toBe('file-to-pdf');
-      expect(result.current.getEndpoint()).toBe('/api/v1/convert/file/pdf');
+      expect(result.current.getEndpointName()).toBe("file-to-pdf");
+      expect(result.current.getEndpoint()).toBe("/api/v1/convert/file/pdf");
     });
   });
 
-  describe('Auto-Target Selection Logic', () => {
-
-    test('should select single available target automatically', () => {
+  describe("Auto-Target Selection Logic", () => {
+    test("should select single available target automatically", () => {
       const { result } = renderHook(() => useConvertParameters());
 
       // Markdown has only one conversion target (PDF)
-      const mdFile = [{ name: 'readme.md' }];
+      const mdFile = [{ name: "readme.md" }];
 
       act(() => {
         result.current.analyzeFileTypes(mdFile);
       });
 
-      expect(result.current.parameters.fromExtension).toBe('md');
-      expect(result.current.parameters.toExtension).toBe('pdf'); // Only available target
+      expect(result.current.parameters.fromExtension).toBe("md");
+      expect(result.current.parameters.toExtension).toBe("pdf"); // Only available target
     });
 
-    test('should not auto-select when multiple targets available', () => {
+    test("should not auto-select when multiple targets available", () => {
       const { result } = renderHook(() => useConvertParameters());
 
       // PDF has multiple conversion targets, so no auto-selection
-      const pdfFile = [{ name: 'document.pdf' }];
+      const pdfFile = [{ name: "document.pdf" }];
 
       act(() => {
         result.current.analyzeFileTypes(pdfFile);
       });
 
-      expect(result.current.parameters.fromExtension).toBe('pdf');
+      expect(result.current.parameters.fromExtension).toBe("pdf");
       // Should NOT auto-select when multiple targets available
-      expect(result.current.parameters.toExtension).toBe('');
+      expect(result.current.parameters.toExtension).toBe("");
     });
   });
 
-  describe('Edge Cases', () => {
-
-    test('should handle empty file names', () => {
+  describe("Edge Cases", () => {
+    test("should handle empty file names", () => {
       const { result } = renderHook(() => useConvertParameters());
 
-      const emptyFiles = [{ name: '' }];
+      const emptyFiles = [{ name: "" }];
 
       act(() => {
         result.current.analyzeFileTypes(emptyFiles);
       });
 
-      expect(result.current.parameters.fromExtension).toBe('any');
-      expect(result.current.parameters.toExtension).toBe('pdf');
+      expect(result.current.parameters.fromExtension).toBe("any");
+      expect(result.current.parameters.toExtension).toBe("pdf");
     });
 
-    test('should handle malformed file objects', () => {
+    test("should handle malformed file objects", () => {
       const { result } = renderHook(() => useConvertParameters());
 
-      const malformedFiles: Array<{name: string}> = [
-        { name: 'valid.pdf' },
+      const malformedFiles: Array<{ name: string }> = [
+        { name: "valid.pdf" },
         // @ts-expect-error - Testing runtime resilience
         { name: null },
         // @ts-expect-error - Testing runtime resilience
-        { name: undefined }
+        { name: undefined },
       ];
 
       act(() => {
@@ -359,7 +304,7 @@ describe('useConvertParameters - Auto Detection & Smart Conversion', () => {
 
       // Should still process the valid file and handle gracefully
       expect(result.current.parameters.isSmartDetection).toBe(true);
-      expect(result.current.parameters.smartDetectionType).toBe('mixed');
+      expect(result.current.parameters.smartDetectionType).toBe("mixed");
     });
   });
 });
diff --git a/frontend/src/core/hooks/tools/crop/useCropOperation.ts b/frontend/src/core/hooks/tools/crop/useCropOperation.ts
index 6cc9aa469c..f7f48838e7 100644
--- a/frontend/src/core/hooks/tools/crop/useCropOperation.ts
+++ b/frontend/src/core/hooks/tools/crop/useCropOperation.ts
@@ -1,7 +1,7 @@
-import { useTranslation } from 'react-i18next';
-import { useToolOperation, ToolType } from '@app/hooks/tools/shared/useToolOperation';
-import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
-import { CropParameters, defaultParameters } from '@app/hooks/tools/crop/useCropParameters';
+import { useTranslation } from "react-i18next";
+import { useToolOperation, ToolType } from "@app/hooks/tools/shared/useToolOperation";
+import { createStandardErrorHandler } from "@app/utils/toolErrorHandler";
+import { CropParameters, defaultParameters } from "@app/hooks/tools/crop/useCropParameters";
 
 // Static configuration that can be used by both the hook and automation executor
 export const buildCropFormData = (parameters: CropParameters, file: File): FormData => {
@@ -26,8 +26,8 @@ export const buildCropFormData = (parameters: CropParameters, file: File): FormD
 export const cropOperationConfig = {
   toolType: ToolType.singleFile,
   buildFormData: buildCropFormData,
-  operationType: 'crop',
-  endpoint: '/api/v1/general/crop',
+  operationType: "crop",
+  endpoint: "/api/v1/general/crop",
   defaultParameters,
 } as const;
 
@@ -36,8 +36,6 @@ export const useCropOperation = () => {
 
   return useToolOperation<CropParameters>({
     ...cropOperationConfig,
-    getErrorMessage: createStandardErrorHandler(
-      t('crop.error.failed', 'An error occurred while cropping the PDF.')
-    )
+    getErrorMessage: createStandardErrorHandler(t("crop.error.failed", "An error occurred while cropping the PDF.")),
   });
 };
diff --git a/frontend/src/core/hooks/tools/crop/useCropParameters.ts b/frontend/src/core/hooks/tools/crop/useCropParameters.ts
index 16314160e8..960197bb04 100644
--- a/frontend/src/core/hooks/tools/crop/useCropParameters.ts
+++ b/frontend/src/core/hooks/tools/crop/useCropParameters.ts
@@ -1,8 +1,15 @@
-import { BaseParameters } from '@app/types/parameters';
-import { useBaseParameters, BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
-import { useCallback } from 'react';
-import { Rectangle, PDFBounds, constrainCropAreaToPDF, createFullPDFCropArea, roundCropArea, isRectangle } from '@app/utils/cropCoordinates';
-import { DEFAULT_CROP_AREA } from '@app/constants/cropConstants';
+import { BaseParameters } from "@app/types/parameters";
+import { useBaseParameters, BaseParametersHook } from "@app/hooks/tools/shared/useBaseParameters";
+import { useCallback } from "react";
+import {
+  Rectangle,
+  PDFBounds,
+  constrainCropAreaToPDF,
+  createFullPDFCropArea,
+  roundCropArea,
+  isRectangle,
+} from "@app/utils/cropCoordinates";
+import { DEFAULT_CROP_AREA } from "@app/constants/cropConstants";
 
 export interface CropParameters extends BaseParameters {
   cropArea: Rectangle;
@@ -32,14 +39,11 @@ export type CropParametersHook = BaseParametersHook<CropParameters> & {
 export const useCropParameters = (): CropParametersHook => {
   const baseHook = useBaseParameters({
     defaultParameters,
-    endpointName: 'crop',
+    endpointName: "crop",
     validateFn: (params) => {
       const rect = params.cropArea;
       // Basic validation - coordinates and dimensions must be positive
-      return rect.x >= 0 &&
-             rect.y >= 0 &&
-             rect.width > 0 &&
-             rect.height > 0;
+      return rect.x >= 0 && rect.y >= 0 && rect.width > 0 && rect.height > 0;
     },
   });
 
@@ -49,85 +53,102 @@ export const useCropParameters = (): CropParametersHook => {
   }, [baseHook.parameters]);
 
   // Set crop area with optional PDF bounds validation
-  const setCropArea = useCallback((cropArea: Rectangle, pdfBounds?: PDFBounds) => {
-    let finalCropArea = roundCropArea(cropArea);
+  const setCropArea = useCallback(
+    (cropArea: Rectangle, pdfBounds?: PDFBounds) => {
+      let finalCropArea = roundCropArea(cropArea);
 
-    // Apply PDF bounds constraints if provided
-    if (pdfBounds) {
-      finalCropArea = constrainCropAreaToPDF(finalCropArea, pdfBounds);
-    }
-    baseHook.updateParameter('cropArea', finalCropArea);
-  }, [baseHook]);
+      // Apply PDF bounds constraints if provided
+      if (pdfBounds) {
+        finalCropArea = constrainCropAreaToPDF(finalCropArea, pdfBounds);
+      }
+      baseHook.updateParameter("cropArea", finalCropArea);
+    },
+    [baseHook],
+  );
 
   // Reset to cover entire PDF
-  const resetToFullPDF = useCallback((pdfBounds: PDFBounds) => {
-    const fullCropArea = createFullPDFCropArea(pdfBounds);
-    setCropArea(fullCropArea);
-  }, [setCropArea]);
+  const resetToFullPDF = useCallback(
+    (pdfBounds: PDFBounds) => {
+      const fullCropArea = createFullPDFCropArea(pdfBounds);
+      setCropArea(fullCropArea);
+    },
+    [setCropArea],
+  );
 
   // Check if current crop area is valid for the given PDF bounds
-  const isCropAreaValid = useCallback((pdfBounds?: PDFBounds): boolean => {
-    const cropArea = getCropArea();
+  const isCropAreaValid = useCallback(
+    (pdfBounds?: PDFBounds): boolean => {
+      const cropArea = getCropArea();
 
-    // Basic validation
-    if (cropArea.x < 0 || cropArea.y < 0 || cropArea.width <= 0 || cropArea.height <= 0) {
-      return false;
-    }
+      // Basic validation
+      if (cropArea.x < 0 || cropArea.y < 0 || cropArea.width <= 0 || cropArea.height <= 0) {
+        return false;
+      }
 
-    // PDF bounds validation if provided
-    if (pdfBounds) {
-      const tolerance = 0.01; // Small tolerance for floating point precision
-      return cropArea.x + cropArea.width <= pdfBounds.actualWidth + tolerance &&
-             cropArea.y + cropArea.height <= pdfBounds.actualHeight + tolerance;
-    }
+      // PDF bounds validation if provided
+      if (pdfBounds) {
+        const tolerance = 0.01; // Small tolerance for floating point precision
+        return (
+          cropArea.x + cropArea.width <= pdfBounds.actualWidth + tolerance &&
+          cropArea.y + cropArea.height <= pdfBounds.actualHeight + tolerance
+        );
+      }
 
-    return true;
-  }, [getCropArea]);
+      return true;
+    },
+    [getCropArea],
+  );
 
   // Check if crop area covers the entire PDF
-  const isFullPDFCrop = useCallback((pdfBounds?: PDFBounds): boolean => {
-    if (!pdfBounds) return false;
+  const isFullPDFCrop = useCallback(
+    (pdfBounds?: PDFBounds): boolean => {
+      if (!pdfBounds) return false;
 
-    const cropArea = getCropArea();
-    const tolerance = 0.5; // Allow 0.5 point tolerance for floating point precision
+      const cropArea = getCropArea();
+      const tolerance = 0.5; // Allow 0.5 point tolerance for floating point precision
 
-    return Math.abs(cropArea.x) < tolerance &&
-           Math.abs(cropArea.y) < tolerance &&
-           Math.abs(cropArea.width - pdfBounds.actualWidth) < tolerance &&
-           Math.abs(cropArea.height - pdfBounds.actualHeight) < tolerance;
-  }, [getCropArea]);
+      return (
+        Math.abs(cropArea.x) < tolerance &&
+        Math.abs(cropArea.y) < tolerance &&
+        Math.abs(cropArea.width - pdfBounds.actualWidth) < tolerance &&
+        Math.abs(cropArea.height - pdfBounds.actualHeight) < tolerance
+      );
+    },
+    [getCropArea],
+  );
 
   // Update crop area with constraints applied
-  const updateCropAreaConstrained = useCallback((
-    partialCropArea: Partial<Rectangle>,
-    pdfBounds?: PDFBounds
-  ) => {
-    const currentCropArea = getCropArea();
-    const newCropArea = { ...currentCropArea, ...partialCropArea };
-    setCropArea(newCropArea, pdfBounds);
-  }, [getCropArea, setCropArea]);
+  const updateCropAreaConstrained = useCallback(
+    (partialCropArea: Partial<Rectangle>, pdfBounds?: PDFBounds) => {
+      const currentCropArea = getCropArea();
+      const newCropArea = { ...currentCropArea, ...partialCropArea };
+      setCropArea(newCropArea, pdfBounds);
+    },
+    [getCropArea, setCropArea],
+  );
 
   // Enhanced validation that considers PDF bounds
-  const validateParameters = useCallback((pdfBounds?: PDFBounds): boolean => {
-    return baseHook.validateParameters() && isCropAreaValid(pdfBounds);
-  }, [baseHook, isCropAreaValid]);
+  const validateParameters = useCallback(
+    (pdfBounds?: PDFBounds): boolean => {
+      return baseHook.validateParameters() && isCropAreaValid(pdfBounds);
+    },
+    [baseHook, isCropAreaValid],
+  );
 
   // Override updateParameter to ensure positive values
-  const updateParameter = useCallback(<K extends keyof CropParameters>(
-    parameter: K,
-    value: CropParameters[K]
-  ) => {
-
-    if(isRectangle(value)) {
-      value.x = Math.max(0.1, value.x); // Minimum 0.1 point
-      value.x = Math.max(0.1, value.y); // Minimum 0.1 point
-      value.width = Math.max(0, value.width); // Minimum 0 point
-      value.height = Math.max(0, value.height); // Minimum 0 point
-    }
-
-    baseHook.updateParameter(parameter, value);
-  }, [baseHook]);
+  const updateParameter = useCallback(
+    <K extends keyof CropParameters>(parameter: K, value: CropParameters[K]) => {
+      if (isRectangle(value)) {
+        value.x = Math.max(0.1, value.x); // Minimum 0.1 point
+        value.x = Math.max(0.1, value.y); // Minimum 0.1 point
+        value.width = Math.max(0, value.width); // Minimum 0 point
+        value.height = Math.max(0, value.height); // Minimum 0 point
+      }
 
+      baseHook.updateParameter(parameter, value);
+    },
+    [baseHook],
+  );
 
   return {
     ...baseHook,
diff --git a/frontend/src/core/hooks/tools/editTableOfContents/useEditTableOfContentsOperation.ts b/frontend/src/core/hooks/tools/editTableOfContents/useEditTableOfContentsOperation.ts
index 58878d8115..d9dc006b86 100644
--- a/frontend/src/core/hooks/tools/editTableOfContents/useEditTableOfContentsOperation.ts
+++ b/frontend/src/core/hooks/tools/editTableOfContents/useEditTableOfContentsOperation.ts
@@ -1,21 +1,21 @@
-import { useTranslation } from 'react-i18next';
-import { ToolType, type ToolOperationConfig, useToolOperation } from '@app/hooks/tools/shared/useToolOperation';
-import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
-import { EditTableOfContentsParameters } from '@app/hooks/tools/editTableOfContents/useEditTableOfContentsParameters';
-import { serializeBookmarkNodes } from '@app/utils/editTableOfContents';
+import { useTranslation } from "react-i18next";
+import { ToolType, type ToolOperationConfig, useToolOperation } from "@app/hooks/tools/shared/useToolOperation";
+import { createStandardErrorHandler } from "@app/utils/toolErrorHandler";
+import { EditTableOfContentsParameters } from "@app/hooks/tools/editTableOfContents/useEditTableOfContentsParameters";
+import { serializeBookmarkNodes } from "@app/utils/editTableOfContents";
 
 const buildFormData = (parameters: EditTableOfContentsParameters, file: File): FormData => {
   const formData = new FormData();
-  formData.append('fileInput', file);
-  formData.append('replaceExisting', String(parameters.replaceExisting));
-  formData.append('bookmarkData', JSON.stringify(serializeBookmarkNodes(parameters.bookmarks)));
+  formData.append("fileInput", file);
+  formData.append("replaceExisting", String(parameters.replaceExisting));
+  formData.append("bookmarkData", JSON.stringify(serializeBookmarkNodes(parameters.bookmarks)));
   return formData;
 };
 
 export const editTableOfContentsOperationConfig: ToolOperationConfig<EditTableOfContentsParameters> = {
   toolType: ToolType.singleFile,
-  operationType: 'editTableOfContents',
-  endpoint: '/api/v1/general/edit-table-of-contents',
+  operationType: "editTableOfContents",
+  endpoint: "/api/v1/general/edit-table-of-contents",
   buildFormData,
 };
 
@@ -24,8 +24,7 @@ export const useEditTableOfContentsOperation = () => {
   return useToolOperation<EditTableOfContentsParameters>({
     ...editTableOfContentsOperationConfig,
     getErrorMessage: createStandardErrorHandler(
-      t('editTableOfContents.error.failed', 'Failed to update the table of contents')
+      t("editTableOfContents.error.failed", "Failed to update the table of contents"),
     ),
   });
 };
-
diff --git a/frontend/src/core/hooks/tools/editTableOfContents/useEditTableOfContentsParameters.ts b/frontend/src/core/hooks/tools/editTableOfContents/useEditTableOfContentsParameters.ts
index 5c68661682..772688aa49 100644
--- a/frontend/src/core/hooks/tools/editTableOfContents/useEditTableOfContentsParameters.ts
+++ b/frontend/src/core/hooks/tools/editTableOfContents/useEditTableOfContentsParameters.ts
@@ -1,6 +1,6 @@
-import { useCallback } from 'react';
-import { useBaseParameters, type BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
-import { BookmarkNode } from '@app/utils/editTableOfContents';
+import { useCallback } from "react";
+import { useBaseParameters, type BaseParametersHook } from "@app/hooks/tools/shared/useBaseParameters";
+import { BookmarkNode } from "@app/utils/editTableOfContents";
 
 export interface EditTableOfContentsParameters {
   replaceExisting: boolean;
@@ -19,19 +19,21 @@ const defaultParameters: EditTableOfContentsParameters = {
 export const useEditTableOfContentsParameters = (): EditTableOfContentsParametersHook => {
   const base = useBaseParameters<EditTableOfContentsParameters>({
     defaultParameters,
-    endpointName: 'edit-table-of-contents',
+    endpointName: "edit-table-of-contents",
   });
 
-  const setBookmarks = useCallback((bookmarks: BookmarkNode[]) => {
-    base.setParameters(prev => ({
-      ...prev,
-      bookmarks,
-    }));
-  }, [base.setParameters]);
+  const setBookmarks = useCallback(
+    (bookmarks: BookmarkNode[]) => {
+      base.setParameters((prev) => ({
+        ...prev,
+        bookmarks,
+      }));
+    },
+    [base.setParameters],
+  );
 
   return {
     ...base,
     setBookmarks,
   };
 };
-
diff --git a/frontend/src/core/hooks/tools/extractImages/useExtractImagesOperation.ts b/frontend/src/core/hooks/tools/extractImages/useExtractImagesOperation.ts
index ac691baf08..beb6803dc9 100644
--- a/frontend/src/core/hooks/tools/extractImages/useExtractImagesOperation.ts
+++ b/frontend/src/core/hooks/tools/extractImages/useExtractImagesOperation.ts
@@ -1,9 +1,9 @@
-import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useToolOperation, ToolType } from '@app/hooks/tools/shared/useToolOperation';
-import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
-import { ExtractImagesParameters, defaultParameters } from '@app/hooks/tools/extractImages/useExtractImagesParameters';
-import { useToolResources } from '@app/hooks/tools/shared/useToolResources';
+import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { useToolOperation, ToolType } from "@app/hooks/tools/shared/useToolOperation";
+import { createStandardErrorHandler } from "@app/utils/toolErrorHandler";
+import { ExtractImagesParameters, defaultParameters } from "@app/hooks/tools/extractImages/useExtractImagesParameters";
+import { useToolResources } from "@app/hooks/tools/shared/useToolResources";
 
 // Static configuration that can be used by both the hook and automation executor
 export const buildExtractImagesFormData = (parameters: ExtractImagesParameters, file: File): FormData => {
@@ -18,8 +18,8 @@ export const buildExtractImagesFormData = (parameters: ExtractImagesParameters,
 export const extractImagesOperationConfig = {
   toolType: ToolType.singleFile,
   buildFormData: buildExtractImagesFormData,
-  operationType: 'extractImages',
-  endpoint: '/api/v1/misc/extract-images',
+  operationType: "extractImages",
+  endpoint: "/api/v1/misc/extract-images",
   defaultParameters,
 } as const;
 
@@ -28,14 +28,19 @@ export const useExtractImagesOperation = () => {
   const { extractZipFiles } = useToolResources();
 
   // Response handler that respects auto-unzip preferences
-  const responseHandler = useCallback(async (blob: Blob, _originalFiles: File[]): Promise<File[]> => {
-    // Extract images returns a ZIP file - use preference-aware extraction
-    return await extractZipFiles(blob);
-  }, [extractZipFiles]);
+  const responseHandler = useCallback(
+    async (blob: Blob, _originalFiles: File[]): Promise<File[]> => {
+      // Extract images returns a ZIP file - use preference-aware extraction
+      return await extractZipFiles(blob);
+    },
+    [extractZipFiles],
+  );
 
   return useToolOperation<ExtractImagesParameters>({
     ...extractImagesOperationConfig,
     responseHandler,
-    getErrorMessage: createStandardErrorHandler(t('extractImages.error.failed', 'An error occurred while extracting images from the PDF.'))
+    getErrorMessage: createStandardErrorHandler(
+      t("extractImages.error.failed", "An error occurred while extracting images from the PDF."),
+    ),
   });
-};
\ No newline at end of file
+};
diff --git a/frontend/src/core/hooks/tools/extractImages/useExtractImagesParameters.ts b/frontend/src/core/hooks/tools/extractImages/useExtractImagesParameters.ts
index 4321bfe9f2..5d8805c465 100644
--- a/frontend/src/core/hooks/tools/extractImages/useExtractImagesParameters.ts
+++ b/frontend/src/core/hooks/tools/extractImages/useExtractImagesParameters.ts
@@ -1,19 +1,19 @@
-import { useBaseParameters } from '@app/hooks/tools/shared/useBaseParameters';
+import { useBaseParameters } from "@app/hooks/tools/shared/useBaseParameters";
 
 export interface ExtractImagesParameters {
-  format: 'png' | 'jpg' | 'gif';
+  format: "png" | "jpg" | "gif";
   // allowDuplicates: boolean;
 }
 
 export const defaultParameters: ExtractImagesParameters = {
-  format: 'png',
+  format: "png",
   // allowDuplicates: false,
 };
 
 export const useExtractImagesParameters = () => {
   return useBaseParameters<ExtractImagesParameters>({
     defaultParameters,
-    endpointName: 'extract-images',
+    endpointName: "extract-images",
     validateFn: () => true, // All parameters have valid defaults
   });
-};
\ No newline at end of file
+};
diff --git a/frontend/src/core/hooks/tools/extractPages/useExtractPagesOperation.ts b/frontend/src/core/hooks/tools/extractPages/useExtractPagesOperation.ts
index 687dde1700..0f25e6a5a9 100644
--- a/frontend/src/core/hooks/tools/extractPages/useExtractPagesOperation.ts
+++ b/frontend/src/core/hooks/tools/extractPages/useExtractPagesOperation.ts
@@ -1,10 +1,10 @@
-import apiClient from '@app/services/apiClient';
-import { useTranslation } from 'react-i18next';
-import { ToolType, useToolOperation, CustomProcessorResult } from '@app/hooks/tools/shared/useToolOperation';
-import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
-import { ExtractPagesParameters, defaultParameters } from '@app/hooks/tools/extractPages/useExtractPagesParameters';
-import { pdfWorkerManager } from '@app/services/pdfWorkerManager';
-import { parseSelection } from '@app/utils/bulkselection/parseSelection';
+import apiClient from "@app/services/apiClient";
+import { useTranslation } from "react-i18next";
+import { ToolType, useToolOperation, CustomProcessorResult } from "@app/hooks/tools/shared/useToolOperation";
+import { createStandardErrorHandler } from "@app/utils/toolErrorHandler";
+import { ExtractPagesParameters, defaultParameters } from "@app/hooks/tools/extractPages/useExtractPagesParameters";
+import { pdfWorkerManager } from "@app/services/pdfWorkerManager";
+import { parseSelection } from "@app/utils/bulkselection/parseSelection";
 
 // Convert advanced page selection expression into CSV of explicit one-based page numbers
 async function resolveSelectionToCsv(expression: string, file: File): Promise<string> {
@@ -13,8 +13,8 @@ async function resolveSelectionToCsv(expression: string, file: File): Promise<st
   const pdf = await pdfWorkerManager.createDocument(arrayBuffer, { disableAutoFetch: true, disableStream: true });
   try {
     const maxPages = pdf.numPages;
-    const pages = parseSelection(expression || '', maxPages);
-    return pages.join(',');
+    const pages = parseSelection(expression || "", maxPages);
+    return pages.join(",");
   } finally {
     pdfWorkerManager.destroyDocument(pdf);
   }
@@ -22,7 +22,7 @@ async function resolveSelectionToCsv(expression: string, file: File): Promise<st
 
 export const extractPagesOperationConfig = {
   toolType: ToolType.custom,
-  operationType: 'extractPages',
+  operationType: "extractPages",
   customProcessor: async (parameters: ExtractPagesParameters, files: File[]): Promise<CustomProcessorResult> => {
     const outputs: File[] = [];
 
@@ -31,15 +31,15 @@ export const extractPagesOperationConfig = {
       const csv = await resolveSelectionToCsv(parameters.pageNumbers, file);
 
       const formData = new FormData();
-      formData.append('fileInput', file);
-      formData.append('pageNumbers', csv);
+      formData.append("fileInput", file);
+      formData.append("pageNumbers", csv);
 
-      const response = await apiClient.post('/api/v1/general/rearrange-pages', formData, { responseType: 'blob' });
+      const response = await apiClient.post("/api/v1/general/rearrange-pages", formData, { responseType: "blob" });
 
       // Name output file with suffix
-      const base = (file.name || 'document.pdf').replace(/\.[^.]+$/, '');
+      const base = (file.name || "document.pdf").replace(/\.[^.]+$/, "");
       const outName = `${base}_extracted_pages.pdf`;
-      const outFile = new File([response.data], outName, { type: 'application/pdf' });
+      const outFile = new File([response.data], outName, { type: "application/pdf" });
       outputs.push(outFile);
     }
 
@@ -55,8 +55,6 @@ export const useExtractPagesOperation = () => {
   const { t } = useTranslation();
   return useToolOperation<ExtractPagesParameters>({
     ...extractPagesOperationConfig,
-    getErrorMessage: createStandardErrorHandler(t('extractPages.error.failed', 'Failed to extract pages'))
+    getErrorMessage: createStandardErrorHandler(t("extractPages.error.failed", "Failed to extract pages")),
   });
 };
-
-
diff --git a/frontend/src/core/hooks/tools/extractPages/useExtractPagesParameters.ts b/frontend/src/core/hooks/tools/extractPages/useExtractPagesParameters.ts
index 8ff2201662..cdbc4c3c69 100644
--- a/frontend/src/core/hooks/tools/extractPages/useExtractPagesParameters.ts
+++ b/frontend/src/core/hooks/tools/extractPages/useExtractPagesParameters.ts
@@ -1,12 +1,12 @@
-import { BaseParameters } from '@app/types/parameters';
-import { useBaseParameters, BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
+import { BaseParameters } from "@app/types/parameters";
+import { useBaseParameters, BaseParametersHook } from "@app/hooks/tools/shared/useBaseParameters";
 
 export interface ExtractPagesParameters extends BaseParameters {
   pageNumbers: string;
 }
 
 export const defaultParameters: ExtractPagesParameters = {
-  pageNumbers: '',
+  pageNumbers: "",
 };
 
 export type ExtractPagesParametersHook = BaseParametersHook<ExtractPagesParameters>;
@@ -14,9 +14,7 @@ export type ExtractPagesParametersHook = BaseParametersHook<ExtractPagesParamete
 export const useExtractPagesParameters = (): ExtractPagesParametersHook => {
   return useBaseParameters({
     defaultParameters,
-    endpointName: 'rearrange-pages',
-    validateFn: (p) => (p.pageNumbers || '').trim().length > 0,
+    endpointName: "rearrange-pages",
+    validateFn: (p) => (p.pageNumbers || "").trim().length > 0,
   });
 };
-
-
diff --git a/frontend/src/core/hooks/tools/flatten/useFlattenOperation.ts b/frontend/src/core/hooks/tools/flatten/useFlattenOperation.ts
index 49b83a0bb1..4a314dbe94 100644
--- a/frontend/src/core/hooks/tools/flatten/useFlattenOperation.ts
+++ b/frontend/src/core/hooks/tools/flatten/useFlattenOperation.ts
@@ -1,15 +1,15 @@
-import { useTranslation } from 'react-i18next';
-import { ToolType, useToolOperation } from '@app/hooks/tools/shared/useToolOperation';
-import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
-import { FlattenParameters, defaultParameters } from '@app/hooks/tools/flatten/useFlattenParameters';
+import { useTranslation } from "react-i18next";
+import { ToolType, useToolOperation } from "@app/hooks/tools/shared/useToolOperation";
+import { createStandardErrorHandler } from "@app/utils/toolErrorHandler";
+import { FlattenParameters, defaultParameters } from "@app/hooks/tools/flatten/useFlattenParameters";
 
 // Static function that can be used by both the hook and automation executor
 export const buildFlattenFormData = (parameters: FlattenParameters, file: File): FormData => {
   const formData = new FormData();
-  formData.append('fileInput', file);
-  formData.append('flattenOnlyForms', parameters.flattenOnlyForms.toString());
+  formData.append("fileInput", file);
+  formData.append("flattenOnlyForms", parameters.flattenOnlyForms.toString());
   if (parameters.renderDpi != null) {
-    formData.append('renderDpi', parameters.renderDpi.toString());
+    formData.append("renderDpi", parameters.renderDpi.toString());
   }
   return formData;
 };
@@ -18,8 +18,8 @@ export const buildFlattenFormData = (parameters: FlattenParameters, file: File):
 export const flattenOperationConfig = {
   toolType: ToolType.singleFile,
   buildFormData: buildFlattenFormData,
-  operationType: 'flatten',
-  endpoint: '/api/v1/misc/flatten',
+  operationType: "flatten",
+  endpoint: "/api/v1/misc/flatten",
   multiFileEndpoint: false,
   defaultParameters,
 } as const;
@@ -29,6 +29,6 @@ export const useFlattenOperation = () => {
 
   return useToolOperation<FlattenParameters>({
     ...flattenOperationConfig,
-    getErrorMessage: createStandardErrorHandler(t('flatten.error.failed', 'An error occurred while flattening the PDF.'))
+    getErrorMessage: createStandardErrorHandler(t("flatten.error.failed", "An error occurred while flattening the PDF.")),
   });
 };
diff --git a/frontend/src/core/hooks/tools/flatten/useFlattenParameters.ts b/frontend/src/core/hooks/tools/flatten/useFlattenParameters.ts
index 3a383d6740..ecb310102c 100644
--- a/frontend/src/core/hooks/tools/flatten/useFlattenParameters.ts
+++ b/frontend/src/core/hooks/tools/flatten/useFlattenParameters.ts
@@ -1,5 +1,5 @@
-import { BaseParameters } from '@app/types/parameters';
-import { useBaseParameters, BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
+import { BaseParameters } from "@app/types/parameters";
+import { useBaseParameters, BaseParametersHook } from "@app/hooks/tools/shared/useBaseParameters";
 
 export interface FlattenParameters extends BaseParameters {
   flattenOnlyForms: boolean;
@@ -16,6 +16,6 @@ export type FlattenParametersHook = BaseParametersHook<FlattenParameters>;
 export const useFlattenParameters = (): FlattenParametersHook => {
   return useBaseParameters({
     defaultParameters,
-    endpointName: 'flatten',
+    endpointName: "flatten",
   });
-};
\ No newline at end of file
+};
diff --git a/frontend/src/core/hooks/tools/getPdfInfo/useGetPdfInfoOperation.ts b/frontend/src/core/hooks/tools/getPdfInfo/useGetPdfInfoOperation.ts
index 019968bcac..ad16126ca2 100644
--- a/frontend/src/core/hooks/tools/getPdfInfo/useGetPdfInfoOperation.ts
+++ b/frontend/src/core/hooks/tools/getPdfInfo/useGetPdfInfoOperation.ts
@@ -1,15 +1,12 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import apiClient from '@app/services/apiClient';
-import { useFileContext } from '@app/contexts/file/fileHooks';
-import { ToolOperationHook } from '@app/hooks/tools/shared/useToolOperation';
-import type { StirlingFile } from '@app/types/fileContext';
-import { extractErrorMessage } from '@app/utils/toolErrorHandler';
-import {
-  PdfInfoReportEntry,
-  INFO_JSON_FILENAME,
-} from '@app/types/getPdfInfo';
-import type { GetPdfInfoParameters } from '@app/hooks/tools/getPdfInfo/useGetPdfInfoParameters';
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import apiClient from "@app/services/apiClient";
+import { useFileContext } from "@app/contexts/file/fileHooks";
+import { ToolOperationHook } from "@app/hooks/tools/shared/useToolOperation";
+import type { StirlingFile } from "@app/types/fileContext";
+import { extractErrorMessage } from "@app/utils/toolErrorHandler";
+import { PdfInfoReportEntry, INFO_JSON_FILENAME } from "@app/types/getPdfInfo";
+import type { GetPdfInfoParameters } from "@app/hooks/tools/getPdfInfo/useGetPdfInfoParameters";
 
 export interface GetPdfInfoOperationHook extends ToolOperationHook<GetPdfInfoParameters> {
   results: PdfInfoReportEntry[];
@@ -19,11 +16,11 @@ export const useGetPdfInfoOperation = (): GetPdfInfoOperationHook => {
   const { t } = useTranslation();
   const { selectors } = useFileContext();
   const [isLoading, setIsLoading] = useState(false);
-  const [status, setStatus] = useState('');
+  const [status, setStatus] = useState("");
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [files, setFiles] = useState<File[]>([]);
   const [downloadUrl, setDownloadUrl] = useState<string | null>(null);
-  const [downloadFilename, setDownloadFilename] = useState('');
+  const [downloadFilename, setDownloadFilename] = useState("");
   const [results, setResults] = useState<PdfInfoReportEntry[]>([]);
 
   const cancelRequested = useRef(false);
@@ -42,8 +39,8 @@ export const useGetPdfInfoOperation = (): GetPdfInfoOperationHook => {
     setFiles([]);
     cleanupDownloadUrl();
     setDownloadUrl(null);
-    setDownloadFilename('');
-    setStatus('');
+    setDownloadFilename("");
+    setStatus("");
     setErrorMessage(null);
   }, [cleanupDownloadUrl]);
 
@@ -54,19 +51,19 @@ export const useGetPdfInfoOperation = (): GetPdfInfoOperationHook => {
   const executeOperation = useCallback(
     async (_params: GetPdfInfoParameters, selectedFiles: StirlingFile[]) => {
       if (selectedFiles.length === 0) {
-        setErrorMessage(t('noFileSelected', 'No files selected'));
+        setErrorMessage(t("noFileSelected", "No files selected"));
         return;
       }
 
       cancelRequested.current = false;
       setIsLoading(true);
-      setStatus(t('getPdfInfo.processing', 'Extracting information...'));
+      setStatus(t("getPdfInfo.processing", "Extracting information..."));
       setErrorMessage(null);
       setResults([]);
       setFiles([]);
       cleanupDownloadUrl();
       setDownloadUrl(null);
-      setDownloadFilename('');
+      setDownloadFilename("");
 
       try {
         const aggregated: PdfInfoReportEntry[] = [];
@@ -76,11 +73,11 @@ export const useGetPdfInfoOperation = (): GetPdfInfoOperationHook => {
           if (cancelRequested.current) break;
 
           const formData = new FormData();
-          formData.append('fileInput', file);
+          formData.append("fileInput", file);
 
           try {
-            const response = await apiClient.post('/api/v1/security/get-info-on-pdf', formData, {
-              headers: { 'Content-Type': 'multipart/form-data' },
+            const response = await apiClient.post("/api/v1/security/get-info-on-pdf", formData, {
+              headers: { "Content-Type": "multipart/form-data" },
             });
 
             const stub = selectors.getStirlingFileStub(file.fileId);
@@ -114,36 +111,34 @@ export const useGetPdfInfoOperation = (): GetPdfInfoOperationHook => {
           setResults(aggregated);
           if (aggregated.length > 0) {
             // Build V1-compatible JSON: use backend payloads directly.
-            const payloads = aggregated
-              .filter((e) => !e.error)
-              .map((e) => e.data);
+            const payloads = aggregated.filter((e) => !e.error).map((e) => e.data);
             const content = payloads.length === 1 ? payloads[0] : payloads;
             const json = JSON.stringify(content, null, 2);
-            const resultFile = new File([json], INFO_JSON_FILENAME, { type: 'application/json' });
+            const resultFile = new File([json], INFO_JSON_FILENAME, { type: "application/json" });
             setFiles([resultFile]);
           }
 
           const anyError = aggregated.some((item) => item.error);
           if (anyError) {
-            setErrorMessage(t('getPdfInfo.error.partial', 'Some files could not be processed.'));
+            setErrorMessage(t("getPdfInfo.error.partial", "Some files could not be processed."));
           }
-          setStatus(t('getPdfInfo.status.complete', 'Extraction complete'));
+          setStatus(t("getPdfInfo.status.complete", "Extraction complete"));
         }
       } catch (e) {
-        console.error('[getPdfInfo] unexpected failure', e);
-        setErrorMessage(t('getPdfInfo.error.unexpected', 'Unexpected error during extraction.'));
+        console.error("[getPdfInfo] unexpected failure", e);
+        setErrorMessage(t("getPdfInfo.error.unexpected", "Unexpected error during extraction."));
       } finally {
         setIsLoading(false);
       }
     },
-    [cleanupDownloadUrl, selectors, t]
+    [cleanupDownloadUrl, selectors, t],
   );
 
   const cancelOperation = useCallback(() => {
     if (isLoading) {
       cancelRequested.current = true;
       setIsLoading(false);
-      setStatus(t('operationCancelled', 'Operation cancelled'));
+      setStatus(t("operationCancelled", "Operation cancelled"));
     }
   }, [isLoading, t]);
 
@@ -187,8 +182,6 @@ export const useGetPdfInfoOperation = (): GetPdfInfoOperationHook => {
       resetResults,
       results,
       status,
-    ]
+    ],
   );
 };
-
-
diff --git a/frontend/src/core/hooks/tools/getPdfInfo/useGetPdfInfoParameters.ts b/frontend/src/core/hooks/tools/getPdfInfo/useGetPdfInfoParameters.ts
index 488484809a..5d03ce836b 100644
--- a/frontend/src/core/hooks/tools/getPdfInfo/useGetPdfInfoParameters.ts
+++ b/frontend/src/core/hooks/tools/getPdfInfo/useGetPdfInfoParameters.ts
@@ -1,5 +1,5 @@
-import { BaseParameters } from '@app/types/parameters';
-import { useBaseParameters, BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
+import { BaseParameters } from "@app/types/parameters";
+import { useBaseParameters, BaseParametersHook } from "@app/hooks/tools/shared/useBaseParameters";
 
 export interface GetPdfInfoParameters extends BaseParameters {
   // No parameters needed
@@ -12,8 +12,6 @@ export type GetPdfInfoParametersHook = BaseParametersHook<GetPdfInfoParameters>;
 export const useGetPdfInfoParameters = (): GetPdfInfoParametersHook => {
   return useBaseParameters({
     defaultParameters,
-    endpointName: 'get-info-on-pdf',
+    endpointName: "get-info-on-pdf",
   });
 };
-
-
diff --git a/frontend/src/core/hooks/tools/merge/useMergeOperation.test.ts b/frontend/src/core/hooks/tools/merge/useMergeOperation.test.ts
index bcdd621679..1f1cba6407 100644
--- a/frontend/src/core/hooks/tools/merge/useMergeOperation.test.ts
+++ b/frontend/src/core/hooks/tools/merge/useMergeOperation.test.ts
@@ -1,32 +1,32 @@
-import { describe, expect, test, vi, beforeEach } from 'vitest';
-import { renderHook } from '@testing-library/react';
-import { useMergeOperation } from '@app/hooks/tools/merge/useMergeOperation';
-import type { MergeParameters } from '@app/hooks/tools/merge/useMergeParameters';
+import { describe, expect, test, vi, beforeEach } from "vitest";
+import { renderHook } from "@testing-library/react";
+import { useMergeOperation } from "@app/hooks/tools/merge/useMergeOperation";
+import type { MergeParameters } from "@app/hooks/tools/merge/useMergeParameters";
 
 // Mock the useToolOperation hook
-vi.mock('../shared/useToolOperation', async () => {
-  const actual = await vi.importActual('../shared/useToolOperation');
+vi.mock("../shared/useToolOperation", async () => {
+  const actual = await vi.importActual("../shared/useToolOperation");
   return {
     ...actual,
-    useToolOperation: vi.fn()
+    useToolOperation: vi.fn(),
   };
 });
 
 // Mock the translation hook
 const mockT = vi.fn((key: string) => `translated-${key}`);
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({ t: mockT })
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: mockT }),
 }));
 
 // Mock the error handler
-vi.mock('../../../utils/toolErrorHandler', () => ({
-  createStandardErrorHandler: vi.fn(() => 'error-handler-function')
+vi.mock("../../../utils/toolErrorHandler", () => ({
+  createStandardErrorHandler: vi.fn(() => "error-handler-function"),
 }));
 
 // Import the mocked function
-import { MultiFileToolOperationConfig, ToolOperationHook, useToolOperation } from '@app/hooks/tools/shared/useToolOperation';
+import { MultiFileToolOperationConfig, ToolOperationHook, useToolOperation } from "@app/hooks/tools/shared/useToolOperation";
 
-describe('useMergeOperation', () => {
+describe("useMergeOperation", () => {
   const mockUseToolOperation = vi.mocked(useToolOperation<MergeParameters>);
 
   const getToolConfig = () => mockUseToolOperation.mock.calls[0][0] as MultiFileToolOperationConfig<MergeParameters>;
@@ -35,10 +35,10 @@ describe('useMergeOperation', () => {
     files: [],
     thumbnails: [],
     downloadUrl: null,
-    downloadFilename: '',
+    downloadFilename: "",
     isLoading: false,
     errorMessage: null,
-    status: '',
+    status: "",
     isGeneratingThumbnails: false,
     progress: null,
     executeOperation: vi.fn(),
@@ -46,8 +46,8 @@ describe('useMergeOperation', () => {
     clearError: vi.fn(),
     cancelOperation: vi.fn(),
     undoOperation: function (): Promise<void> {
-      throw new Error('Function not implemented.');
-    }
+      throw new Error("Function not implemented.");
+    },
   };
 
   beforeEach(() => {
@@ -55,66 +55,66 @@ describe('useMergeOperation', () => {
     mockUseToolOperation.mockReturnValue(mockToolOperationReturn);
   });
 
-  test('should build FormData correctly', () => {
+  test("should build FormData correctly", () => {
     renderHook(() => useMergeOperation());
 
     const config = getToolConfig();
     const mockFiles = [
-      new File(['content1'], 'file1.pdf', { type: 'application/pdf' }),
-      new File(['content2'], 'file2.pdf', { type: 'application/pdf' })
+      new File(["content1"], "file1.pdf", { type: "application/pdf" }),
+      new File(["content2"], "file2.pdf", { type: "application/pdf" }),
     ];
     const parameters: MergeParameters = {
       removeDigitalSignature: true,
-      generateTableOfContents: false
+      generateTableOfContents: false,
     };
 
     const formData = config.buildFormData(parameters, mockFiles);
 
     // Verify files are appended
-    expect(formData.getAll('fileInput')).toHaveLength(2);
-    expect(formData.getAll('fileInput')[0]).toBe(mockFiles[0]);
-    expect(formData.getAll('fileInput')[1]).toBe(mockFiles[1]);
+    expect(formData.getAll("fileInput")).toHaveLength(2);
+    expect(formData.getAll("fileInput")[0]).toBe(mockFiles[0]);
+    expect(formData.getAll("fileInput")[1]).toBe(mockFiles[1]);
 
     // Verify parameters are appended correctly
-    expect(formData.get('sortType')).toBe('orderProvided');
-    expect(formData.get('removeCertSign')).toBe('true');
-    expect(formData.get('generateToc')).toBe('false');
+    expect(formData.get("sortType")).toBe("orderProvided");
+    expect(formData.get("removeCertSign")).toBe("true");
+    expect(formData.get("generateToc")).toBe("false");
   });
 
-  test('should return the hook result from useToolOperation', () => {
+  test("should return the hook result from useToolOperation", () => {
     const { result } = renderHook(() => useMergeOperation());
 
     expect(result.current).toBe(mockToolOperationReturn);
   });
 
-  test('should use correct translation keys for error handling', () => {
+  test("should use correct translation keys for error handling", () => {
     renderHook(() => useMergeOperation());
 
-    expect(mockT).toHaveBeenCalledWith('merge.error.failed', 'An error occurred while merging the PDFs.');
+    expect(mockT).toHaveBeenCalledWith("merge.error.failed", "An error occurred while merging the PDFs.");
   });
 
-  test('should build FormData with different parameter combinations', () => {
+  test("should build FormData with different parameter combinations", () => {
     renderHook(() => useMergeOperation());
 
     const config = getToolConfig();
-    const mockFiles = [new File(['test'], 'test.pdf', { type: 'application/pdf' })];
+    const mockFiles = [new File(["test"], "test.pdf", { type: "application/pdf" })];
 
     // Test case 1: All options disabled
     const params1: MergeParameters = {
       removeDigitalSignature: false,
-      generateTableOfContents: false
+      generateTableOfContents: false,
     };
     const formData1 = config.buildFormData(params1, mockFiles);
-    expect(formData1.get('removeCertSign')).toBe('false');
-    expect(formData1.get('generateToc')).toBe('false');
+    expect(formData1.get("removeCertSign")).toBe("false");
+    expect(formData1.get("generateToc")).toBe("false");
 
     // Test case 2: All options enabled
     const params2: MergeParameters = {
       removeDigitalSignature: true,
-      generateTableOfContents: true
+      generateTableOfContents: true,
     };
     const formData2 = config.buildFormData(params2, mockFiles);
-    expect(formData2.get('removeCertSign')).toBe('true');
-    expect(formData2.get('generateToc')).toBe('true');
+    expect(formData2.get("removeCertSign")).toBe("true");
+    expect(formData2.get("generateToc")).toBe("true");
   });
 });
diff --git a/frontend/src/core/hooks/tools/merge/useMergeOperation.ts b/frontend/src/core/hooks/tools/merge/useMergeOperation.ts
index 3bed214796..da08250371 100644
--- a/frontend/src/core/hooks/tools/merge/useMergeOperation.ts
+++ b/frontend/src/core/hooks/tools/merge/useMergeOperation.ts
@@ -1,7 +1,7 @@
-import { useTranslation } from 'react-i18next';
-import { useToolOperation, ToolOperationConfig, ToolType } from '@app/hooks/tools/shared/useToolOperation';
-import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
-import { MergeParameters, defaultParameters } from '@app/hooks/tools/merge/useMergeParameters';
+import { useTranslation } from "react-i18next";
+import { useToolOperation, ToolOperationConfig, ToolType } from "@app/hooks/tools/shared/useToolOperation";
+import { createStandardErrorHandler } from "@app/utils/toolErrorHandler";
+import { MergeParameters, defaultParameters } from "@app/hooks/tools/merge/useMergeParameters";
 
 const buildFormData = (parameters: MergeParameters, files: File[]): FormData => {
   const formData = new FormData();
@@ -11,7 +11,7 @@ const buildFormData = (parameters: MergeParameters, files: File[]): FormData =>
   });
   // Provide stable client file IDs (align with files order)
   const clientIds: string[] = files.map((f: any) => String((f as any).fileId || f.name));
-  formData.append('clientFileIds', JSON.stringify(clientIds));
+  formData.append("clientFileIds", JSON.stringify(clientIds));
   formData.append("sortType", "orderProvided"); // Always use orderProvided since UI handles sorting
   formData.append("removeCertSign", (parameters.removeDigitalSignature ?? false).toString());
   formData.append("generateToc", (parameters.generateTableOfContents ?? false).toString());
@@ -23,9 +23,9 @@ const buildFormData = (parameters: MergeParameters, files: File[]): FormData =>
 export const mergeOperationConfig: ToolOperationConfig<MergeParameters> = {
   toolType: ToolType.multiFile,
   buildFormData,
-  operationType: 'merge',
-  endpoint: '/api/v1/general/merge-pdfs',
-  filePrefix: 'merged_',
+  operationType: "merge",
+  endpoint: "/api/v1/general/merge-pdfs",
+  filePrefix: "merged_",
   defaultParameters,
 };
 
@@ -34,6 +34,6 @@ export const useMergeOperation = () => {
 
   return useToolOperation<MergeParameters>({
     ...mergeOperationConfig,
-    getErrorMessage: createStandardErrorHandler(t('merge.error.failed', 'An error occurred while merging the PDFs.'))
+    getErrorMessage: createStandardErrorHandler(t("merge.error.failed", "An error occurred while merging the PDFs.")),
   });
 };
diff --git a/frontend/src/core/hooks/tools/merge/useMergeParameters.test.ts b/frontend/src/core/hooks/tools/merge/useMergeParameters.test.ts
index d5fbf5ef91..6464629b73 100644
--- a/frontend/src/core/hooks/tools/merge/useMergeParameters.test.ts
+++ b/frontend/src/core/hooks/tools/merge/useMergeParameters.test.ts
@@ -1,20 +1,20 @@
-import { describe, expect, test } from 'vitest';
-import { renderHook, act } from '@testing-library/react';
-import { useMergeParameters, defaultParameters } from '@app/hooks/tools/merge/useMergeParameters';
+import { describe, expect, test } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { useMergeParameters, defaultParameters } from "@app/hooks/tools/merge/useMergeParameters";
 
-describe('useMergeParameters', () => {
-  test('should initialize with default parameters', () => {
+describe("useMergeParameters", () => {
+  test("should initialize with default parameters", () => {
     const { result } = renderHook(() => useMergeParameters());
 
     expect(result.current.parameters).toStrictEqual(defaultParameters);
   });
 
   test.each([
-    { paramName: 'removeDigitalSignature' as const, value: true },
-    { paramName: 'removeDigitalSignature' as const, value: false },
-    { paramName: 'generateTableOfContents' as const, value: true },
-    { paramName: 'generateTableOfContents' as const, value: false }
-  ])('should update parameter $paramName to $value', ({ paramName, value }) => {
+    { paramName: "removeDigitalSignature" as const, value: true },
+    { paramName: "removeDigitalSignature" as const, value: false },
+    { paramName: "generateTableOfContents" as const, value: true },
+    { paramName: "generateTableOfContents" as const, value: false },
+  ])("should update parameter $paramName to $value", ({ paramName, value }) => {
     const { result } = renderHook(() => useMergeParameters());
 
     act(() => {
@@ -24,13 +24,13 @@ describe('useMergeParameters', () => {
     expect(result.current.parameters[paramName]).toBe(value);
   });
 
-  test('should reset parameters to defaults', () => {
+  test("should reset parameters to defaults", () => {
     const { result } = renderHook(() => useMergeParameters());
 
     // First, change some parameters
     act(() => {
-      result.current.updateParameter('removeDigitalSignature', true);
-      result.current.updateParameter('generateTableOfContents', true);
+      result.current.updateParameter("removeDigitalSignature", true);
+      result.current.updateParameter("generateTableOfContents", true);
     });
 
     expect(result.current.parameters.removeDigitalSignature).toBe(true);
@@ -44,7 +44,7 @@ describe('useMergeParameters', () => {
     expect(result.current.parameters).toStrictEqual(defaultParameters);
   });
 
-  test('should validate parameters correctly - always returns true', () => {
+  test("should validate parameters correctly - always returns true", () => {
     const { result } = renderHook(() => useMergeParameters());
 
     // Default state should be valid
@@ -52,8 +52,8 @@ describe('useMergeParameters', () => {
 
     // Change parameters and validate again
     act(() => {
-      result.current.updateParameter('removeDigitalSignature', true);
-      result.current.updateParameter('generateTableOfContents', true);
+      result.current.updateParameter("removeDigitalSignature", true);
+      result.current.updateParameter("generateTableOfContents", true);
     });
 
     expect(result.current.validateParameters()).toBe(true);
diff --git a/frontend/src/core/hooks/tools/merge/useMergeParameters.ts b/frontend/src/core/hooks/tools/merge/useMergeParameters.ts
index b9b0c3b7a9..4f5092a941 100644
--- a/frontend/src/core/hooks/tools/merge/useMergeParameters.ts
+++ b/frontend/src/core/hooks/tools/merge/useMergeParameters.ts
@@ -1,10 +1,10 @@
-import { BaseParameters } from '@app/types/parameters';
-import { BaseParametersHook, useBaseParameters } from '@app/hooks/tools/shared/useBaseParameters';
+import { BaseParameters } from "@app/types/parameters";
+import { BaseParametersHook, useBaseParameters } from "@app/hooks/tools/shared/useBaseParameters";
 
 export interface MergeParameters extends BaseParameters {
   removeDigitalSignature: boolean;
   generateTableOfContents: boolean;
-};
+}
 
 export const defaultParameters: MergeParameters = {
   removeDigitalSignature: false,
diff --git a/frontend/src/core/hooks/tools/ocr/useOCROperation.ts b/frontend/src/core/hooks/tools/ocr/useOCROperation.ts
index 8b3950e7f3..8734dc5a7f 100644
--- a/frontend/src/core/hooks/tools/ocr/useOCROperation.ts
+++ b/frontend/src/core/hooks/tools/ocr/useOCROperation.ts
@@ -1,30 +1,34 @@
-import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { OCRParameters, defaultParameters } from '@app/hooks/tools/ocr/useOCRParameters';
-import { useToolOperation, ToolOperationConfig, ToolType } from '@app/hooks/tools/shared/useToolOperation';
-import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
-import { useToolResources } from '@app/hooks/tools/shared/useToolResources';
+import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { OCRParameters, defaultParameters } from "@app/hooks/tools/ocr/useOCRParameters";
+import { useToolOperation, ToolOperationConfig, ToolType } from "@app/hooks/tools/shared/useToolOperation";
+import { createStandardErrorHandler } from "@app/utils/toolErrorHandler";
+import { useToolResources } from "@app/hooks/tools/shared/useToolResources";
 
 // Helper: get MIME type based on file extension
 function getMimeType(filename: string): string {
-  const ext = filename.toLowerCase().split('.').pop();
+  const ext = filename.toLowerCase().split(".").pop();
   switch (ext) {
-    case 'pdf': return 'application/pdf';
-    case 'txt': return 'text/plain';
-    case 'zip': return 'application/zip';
-    default: return 'application/octet-stream';
+    case "pdf":
+      return "application/pdf";
+    case "txt":
+      return "text/plain";
+    case "zip":
+      return "application/zip";
+    default:
+      return "application/octet-stream";
   }
 }
 
 // Lightweight ZIP extractor (keep or replace with a shared util if you have one)
 async function extractZipFile(zipBlob: Blob): Promise<File[]> {
-  const JSZip = await import('jszip');
+  const JSZip = await import("jszip");
   const zip = new JSZip.default();
   const zipContent = await zip.loadAsync(await zipBlob.arrayBuffer());
   const out: File[] = [];
   for (const [filename, file] of Object.entries(zipContent.files)) {
     if (!file.dir) {
-      const content = await file.async('blob');
+      const content = await file.async("blob");
       out.push(new File([content], filename, { type: getMimeType(filename) }));
     }
   }
@@ -33,73 +37,81 @@ async function extractZipFile(zipBlob: Blob): Promise<File[]> {
 
 // Helper: strip extension
 function stripExt(name: string): string {
-  const i = name.lastIndexOf('.');
+  const i = name.lastIndexOf(".");
   return i > 0 ? name.slice(0, i) : name;
 }
 
 // Static function that can be used by both the hook and automation executor
 export const buildOCRFormData = (parameters: OCRParameters, file: File): FormData => {
   const formData = new FormData();
-  formData.append('fileInput', file);
-  parameters.languages.forEach((lang) => formData.append('languages', lang));
-  formData.append('ocrType', parameters.ocrType);
-  formData.append('ocrRenderType', parameters.ocrRenderType);
-  
+  formData.append("fileInput", file);
+  parameters.languages.forEach((lang) => formData.append("languages", lang));
+  formData.append("ocrType", parameters.ocrType);
+  formData.append("ocrRenderType", parameters.ocrRenderType);
+
   const options = parameters.additionalOptions || [];
-  formData.append('sidecar', options.includes('sidecar').toString());
-  formData.append('deskew', options.includes('deskew').toString());
-  formData.append('clean', options.includes('clean').toString());
-  formData.append('cleanFinal', options.includes('cleanFinal').toString());
-  formData.append('removeImagesAfter', options.includes('removeImagesAfter').toString());
+  formData.append("sidecar", options.includes("sidecar").toString());
+  formData.append("deskew", options.includes("deskew").toString());
+  formData.append("clean", options.includes("clean").toString());
+  formData.append("cleanFinal", options.includes("cleanFinal").toString());
+  formData.append("removeImagesAfter", options.includes("removeImagesAfter").toString());
   return formData;
 };
 
 // Static response handler for OCR - can be used by automation executor
-export const ocrResponseHandler = async (blob: Blob, originalFiles: File[], extractZipFiles: (blob: Blob) => Promise<File[]>): Promise<File[]> => {
+export const ocrResponseHandler = async (
+  blob: Blob,
+  originalFiles: File[],
+  extractZipFiles: (blob: Blob) => Promise<File[]>,
+): Promise<File[]> => {
   const headBuf = await blob.slice(0, 8).arrayBuffer();
   const head = new TextDecoder().decode(new Uint8Array(headBuf));
 
   // ZIP: sidecar or multi-asset output
-  if (head.startsWith('PK')) {
+  if (head.startsWith("PK")) {
     const base = stripExt(originalFiles[0].name);
     try {
       const extractedFiles = await extractZipFiles(blob);
       if (extractedFiles.length > 0) return extractedFiles;
-    } catch { /* ignore and try local extractor */ }
+    } catch {
+      /* ignore and try local extractor */
+    }
     try {
       const local = await extractZipFile(blob); // local fallback
       if (local.length > 0) return local;
-    } catch { /* fall through */ }
-    return [new File([blob], `ocr_${base}.zip`, { type: 'application/zip' })];
+    } catch {
+      /* fall through */
+    }
+    return [new File([blob], `ocr_${base}.zip`, { type: "application/zip" })];
   }
 
   // Not a PDF: surface error details if present
-  if (!head.startsWith('%PDF')) {
+  if (!head.startsWith("%PDF")) {
     const textBuf = await blob.slice(0, 1024).arrayBuffer();
     const text = new TextDecoder().decode(new Uint8Array(textBuf));
     if (/error|exception|html/i.test(text)) {
-      if (text.includes('OCR tools') && text.includes('not installed')) {
-        throw new Error('OCR tools (OCRmyPDF or Tesseract) are not installed on the server. Use the standard or fat Docker image instead of ultra-lite, or install OCR tools manually.');
+      if (text.includes("OCR tools") && text.includes("not installed")) {
+        throw new Error(
+          "OCR tools (OCRmyPDF or Tesseract) are not installed on the server. Use the standard or fat Docker image instead of ultra-lite, or install OCR tools manually.",
+        );
       }
       const title =
-        text.match(/<title[^>]*>([^<]+)<\/title>/i)?.[1] ||
-        text.match(/<h1[^>]*>([^<]+)<\/h1>/i)?.[1] ||
-        'Unknown error';
+        text.match(/<title[^>]*>([^<]+)<\/title>/i)?.[1] || text.match(/<h1[^>]*>([^<]+)<\/h1>/i)?.[1] || "Unknown error";
       throw new Error(`OCR service error: ${title}`);
     }
     throw new Error(`Response is not a valid PDF. Header: "${head}"`);
   }
 
   const originalName = originalFiles[0].name;
-  return [new File([blob], originalName, { type: 'application/pdf' })];
+  return [new File([blob], originalName, { type: "application/pdf" })];
 };
 
 // Static configuration object (without t function dependencies)
 export const ocrOperationConfig = {
   toolType: ToolType.singleFile,
   buildFormData: buildOCRFormData,
-  operationType: 'ocr',
-  endpoint: '/api/v1/misc/ocr-pdf',
+  operationType: "ocr",
+  endpoint: "/api/v1/misc/ocr-pdf",
   defaultParameters,
 } as const;
 
@@ -108,19 +120,22 @@ export const useOCROperation = () => {
   const { extractZipFiles } = useToolResources();
 
   // OCR-specific parsing: ZIP (sidecar) vs PDF vs HTML error
-  const responseHandler = useCallback(async (blob: Blob, originalFiles: File[]): Promise<File[]> => {
-    // extractZipFiles from useToolResources already returns File[] directly
-    const simpleExtractZipFiles = extractZipFiles;
-    return ocrResponseHandler(blob, originalFiles, simpleExtractZipFiles);
-  }, [extractZipFiles]);
+  const responseHandler = useCallback(
+    async (blob: Blob, originalFiles: File[]): Promise<File[]> => {
+      // extractZipFiles from useToolResources already returns File[] directly
+      const simpleExtractZipFiles = extractZipFiles;
+      return ocrResponseHandler(blob, originalFiles, simpleExtractZipFiles);
+    },
+    [extractZipFiles],
+  );
 
   const ocrConfig: ToolOperationConfig<OCRParameters> = {
     ...ocrOperationConfig,
     responseHandler,
     getErrorMessage: (error) =>
-      error.message?.includes('OCR tools') && error.message?.includes('not installed')
-        ? 'OCR tools (OCRmyPDF or Tesseract) are not installed on the server. Use the standard or fat Docker image instead of ultra-lite, or install OCR tools manually.'
-        : createStandardErrorHandler(t('ocr.error.failed', 'OCR operation failed'))(error),
+      error.message?.includes("OCR tools") && error.message?.includes("not installed")
+        ? "OCR tools (OCRmyPDF or Tesseract) are not installed on the server. Use the standard or fat Docker image instead of ultra-lite, or install OCR tools manually."
+        : createStandardErrorHandler(t("ocr.error.failed", "OCR operation failed"))(error),
   };
 
   return useToolOperation(ocrConfig);
diff --git a/frontend/src/core/hooks/tools/ocr/useOCRParameters.ts b/frontend/src/core/hooks/tools/ocr/useOCRParameters.ts
index a2b6870317..7e0a3f966c 100644
--- a/frontend/src/core/hooks/tools/ocr/useOCRParameters.ts
+++ b/frontend/src/core/hooks/tools/ocr/useOCRParameters.ts
@@ -1,5 +1,5 @@
-import { BaseParameters } from '@app/types/parameters';
-import { useBaseParameters, BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
+import { BaseParameters } from "@app/types/parameters";
+import { useBaseParameters, BaseParametersHook } from "@app/hooks/tools/shared/useBaseParameters";
 
 export interface OCRParameters extends BaseParameters {
   languages: string[];
@@ -12,15 +12,15 @@ export type OCRParametersHook = BaseParametersHook<OCRParameters>;
 
 export const defaultParameters: OCRParameters = {
   languages: [],
-  ocrType: 'skip-text',
-  ocrRenderType: 'hocr',
+  ocrType: "skip-text",
+  ocrRenderType: "hocr",
   additionalOptions: [],
 };
 
 export const useOCRParameters = (): OCRParametersHook => {
   return useBaseParameters({
     defaultParameters,
-    endpointName: 'ocr-pdf',
+    endpointName: "ocr-pdf",
     validateFn: (params) => {
       // At minimum, we need at least one language selected
       return params.languages.length > 0;
diff --git a/frontend/src/core/hooks/tools/overlayPdfs/useOverlayPdfsOperation.ts b/frontend/src/core/hooks/tools/overlayPdfs/useOverlayPdfsOperation.ts
index a3499eb78f..4ca8737e3d 100644
--- a/frontend/src/core/hooks/tools/overlayPdfs/useOverlayPdfsOperation.ts
+++ b/frontend/src/core/hooks/tools/overlayPdfs/useOverlayPdfsOperation.ts
@@ -1,25 +1,25 @@
-import { useTranslation } from 'react-i18next';
-import { useToolOperation, ToolType, type ToolOperationConfig } from '@app/hooks/tools/shared/useToolOperation';
-import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
-import { type OverlayPdfsParameters } from '@app/hooks/tools/overlayPdfs/useOverlayPdfsParameters';
+import { useTranslation } from "react-i18next";
+import { useToolOperation, ToolType, type ToolOperationConfig } from "@app/hooks/tools/shared/useToolOperation";
+import { createStandardErrorHandler } from "@app/utils/toolErrorHandler";
+import { type OverlayPdfsParameters } from "@app/hooks/tools/overlayPdfs/useOverlayPdfsParameters";
 
 const buildFormData = (parameters: OverlayPdfsParameters, file: File): FormData => {
   const formData = new FormData();
-  formData.append('fileInput', file);
+  formData.append("fileInput", file);
 
   // Overlay files
   for (const overlay of parameters.overlayFiles || []) {
-    formData.append('overlayFiles', overlay);
+    formData.append("overlayFiles", overlay);
   }
 
   // Mode and position
-  formData.append('overlayMode', parameters.overlayMode);
-  formData.append('overlayPosition', String(parameters.overlayPosition));
+  formData.append("overlayMode", parameters.overlayMode);
+  formData.append("overlayPosition", String(parameters.overlayPosition));
 
   // Counts (only relevant for FixedRepeatOverlay, server accepts repeated 'counts' fields)
-  if (parameters.overlayMode === 'FixedRepeatOverlay') {
+  if (parameters.overlayMode === "FixedRepeatOverlay") {
     for (const count of parameters.counts || []) {
-      formData.append('counts', String(count));
+      formData.append("counts", String(count));
     }
   }
 
@@ -29,18 +29,14 @@ const buildFormData = (parameters: OverlayPdfsParameters, file: File): FormData
 export const overlayPdfsOperationConfig: ToolOperationConfig<OverlayPdfsParameters> = {
   toolType: ToolType.singleFile,
   buildFormData,
-  operationType: 'overlayPdfs',
-  endpoint: '/api/v1/general/overlay-pdfs'
+  operationType: "overlayPdfs",
+  endpoint: "/api/v1/general/overlay-pdfs",
 };
 
 export const useOverlayPdfsOperation = () => {
   const { t } = useTranslation();
   return useToolOperation<OverlayPdfsParameters>({
     ...overlayPdfsOperationConfig,
-    getErrorMessage: createStandardErrorHandler(
-      t('overlay-pdfs.error.failed', 'An error occurred while overlaying PDFs.')
-    ),
+    getErrorMessage: createStandardErrorHandler(t("overlay-pdfs.error.failed", "An error occurred while overlaying PDFs.")),
   });
 };
-
-
diff --git a/frontend/src/core/hooks/tools/overlayPdfs/useOverlayPdfsParameters.ts b/frontend/src/core/hooks/tools/overlayPdfs/useOverlayPdfsParameters.ts
index 2f9073da09..3cfeb1bcb0 100644
--- a/frontend/src/core/hooks/tools/overlayPdfs/useOverlayPdfsParameters.ts
+++ b/frontend/src/core/hooks/tools/overlayPdfs/useOverlayPdfsParameters.ts
@@ -1,8 +1,8 @@
-import { useCallback } from 'react';
-import { BaseParameters } from '@app/types/parameters';
-import { useBaseParameters, type BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
+import { useCallback } from "react";
+import { BaseParameters } from "@app/types/parameters";
+import { useBaseParameters, type BaseParametersHook } from "@app/hooks/tools/shared/useBaseParameters";
 
-export type OverlayMode = 'SequentialOverlay' | 'InterleavedOverlay' | 'FixedRepeatOverlay';
+export type OverlayMode = "SequentialOverlay" | "InterleavedOverlay" | "FixedRepeatOverlay";
 
 export interface OverlayPdfsParameters extends BaseParameters {
   overlayFiles: File[];
@@ -13,9 +13,9 @@ export interface OverlayPdfsParameters extends BaseParameters {
 
 export const defaultParameters: OverlayPdfsParameters = {
   overlayFiles: [],
-  overlayMode: 'SequentialOverlay',
+  overlayMode: "SequentialOverlay",
   overlayPosition: 0,
-  counts: []
+  counts: [],
 };
 
 export type OverlayPdfsParametersHook = BaseParametersHook<OverlayPdfsParameters>;
@@ -23,10 +23,10 @@ export type OverlayPdfsParametersHook = BaseParametersHook<OverlayPdfsParameters
 export const useOverlayPdfsParameters = (): OverlayPdfsParametersHook => {
   const base = useBaseParameters<OverlayPdfsParameters>({
     defaultParameters,
-    endpointName: 'overlay-pdfs',
+    endpointName: "overlay-pdfs",
     validateFn: (params) => {
       if (!params.overlayFiles || params.overlayFiles.length === 0) return false;
-      if (params.overlayMode === 'FixedRepeatOverlay') {
+      if (params.overlayMode === "FixedRepeatOverlay") {
         if (!params.counts || params.counts.length !== params.overlayFiles.length) return false;
         if (params.counts.some((c) => !Number.isFinite(c) || c <= 0)) return false;
       }
@@ -38,7 +38,7 @@ export const useOverlayPdfsParameters = (): OverlayPdfsParametersHook => {
   // must survive the parameter reset that fires when the workbench selection
   // transitions from 0 → 1+ files. Only mode/position/counts are reset.
   const resetParameters = useCallback(() => {
-    base.setParameters(prev => ({
+    base.setParameters((prev) => ({
       ...defaultParameters,
       overlayFiles: prev.overlayFiles,
     }));
@@ -46,5 +46,3 @@ export const useOverlayPdfsParameters = (): OverlayPdfsParametersHook => {
 
   return { ...base, resetParameters };
 };
-
-
diff --git a/frontend/src/core/hooks/tools/pageLayout/usePageLayoutOperation.ts b/frontend/src/core/hooks/tools/pageLayout/usePageLayoutOperation.ts
index 905f232459..11d32bf466 100644
--- a/frontend/src/core/hooks/tools/pageLayout/usePageLayoutOperation.ts
+++ b/frontend/src/core/hooks/tools/pageLayout/usePageLayoutOperation.ts
@@ -1,33 +1,33 @@
-import { useTranslation } from 'react-i18next';
-import { ToolType, useToolOperation } from '@app/hooks/tools/shared/useToolOperation';
-import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
-import { PageLayoutParameters, defaultParameters } from '@app/hooks/tools/pageLayout/usePageLayoutParameters';
+import { useTranslation } from "react-i18next";
+import { ToolType, useToolOperation } from "@app/hooks/tools/shared/useToolOperation";
+import { createStandardErrorHandler } from "@app/utils/toolErrorHandler";
+import { PageLayoutParameters, defaultParameters } from "@app/hooks/tools/pageLayout/usePageLayoutParameters";
 
 export const buildPageLayoutFormData = (parameters: PageLayoutParameters, file: File): FormData => {
   const formData = new FormData();
-  formData.append('fileInput', file);
-  formData.append('mode', String(parameters.mode));
-  formData.append('pagesPerSheet', String(parameters.pagesPerSheet));
-  formData.append('rows', String(parameters.rows));
-  formData.append('cols', String(parameters.cols));
-  formData.append('orientation', String(parameters.orientation));
-  formData.append('arrangement', String(parameters.arrangement));
-  formData.append('readingDirection', String(parameters.readingDirection));
-  formData.append('innerMargin', String(parameters.innerMargin ?? 0));
-  formData.append('topMargin', String(parameters.topMargin ?? 0));
-  formData.append('bottomMargin', String(parameters.bottomMargin ?? 0));
-  formData.append('leftMargin', String(parameters.leftMargin ?? 0));
-  formData.append('rightMargin', String(parameters.rightMargin ?? 0));
-  formData.append('addBorder', String(parameters.addBorder));
-  formData.append('borderWidth', String(parameters.borderWidth ?? 1));
+  formData.append("fileInput", file);
+  formData.append("mode", String(parameters.mode));
+  formData.append("pagesPerSheet", String(parameters.pagesPerSheet));
+  formData.append("rows", String(parameters.rows));
+  formData.append("cols", String(parameters.cols));
+  formData.append("orientation", String(parameters.orientation));
+  formData.append("arrangement", String(parameters.arrangement));
+  formData.append("readingDirection", String(parameters.readingDirection));
+  formData.append("innerMargin", String(parameters.innerMargin ?? 0));
+  formData.append("topMargin", String(parameters.topMargin ?? 0));
+  formData.append("bottomMargin", String(parameters.bottomMargin ?? 0));
+  formData.append("leftMargin", String(parameters.leftMargin ?? 0));
+  formData.append("rightMargin", String(parameters.rightMargin ?? 0));
+  formData.append("addBorder", String(parameters.addBorder));
+  formData.append("borderWidth", String(parameters.borderWidth ?? 1));
   return formData;
 };
 
 export const pageLayoutOperationConfig = {
   toolType: ToolType.singleFile,
   buildFormData: buildPageLayoutFormData,
-  operationType: 'pageLayout',
-  endpoint: '/api/v1/general/multi-page-layout',
+  operationType: "pageLayout",
+  endpoint: "/api/v1/general/multi-page-layout",
   defaultParameters,
 } as const;
 
@@ -37,9 +37,7 @@ export const usePageLayoutOperation = () => {
   return useToolOperation<PageLayoutParameters>({
     ...pageLayoutOperationConfig,
     getErrorMessage: createStandardErrorHandler(
-      t('pageLayout.error.failed', 'An error occurred while creating the multi-page layout.')
-    )
+      t("pageLayout.error.failed", "An error occurred while creating the multi-page layout."),
+    ),
   });
 };
-
-
diff --git a/frontend/src/core/hooks/tools/pageLayout/usePageLayoutParameters.ts b/frontend/src/core/hooks/tools/pageLayout/usePageLayoutParameters.ts
index 592ec9c2ef..eab1ea995b 100644
--- a/frontend/src/core/hooks/tools/pageLayout/usePageLayoutParameters.ts
+++ b/frontend/src/core/hooks/tools/pageLayout/usePageLayoutParameters.ts
@@ -1,14 +1,14 @@
-import { BaseParameters } from '@app/types/parameters';
-import { useBaseParameters, BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
+import { BaseParameters } from "@app/types/parameters";
+import { useBaseParameters, BaseParametersHook } from "@app/hooks/tools/shared/useBaseParameters";
 
 export interface PageLayoutParameters extends BaseParameters {
-  mode: 'DEFAULT' | 'CUSTOM';
+  mode: "DEFAULT" | "CUSTOM";
   pagesPerSheet: number;
   rows: number;
   cols: number;
-  orientation: 'PORTRAIT' | 'LANDSCAPE';
-  arrangement: 'BY_COLUMNS' | 'BY_ROWS';
-  readingDirection: 'LTR' | 'RTL';
+  orientation: "PORTRAIT" | "LANDSCAPE";
+  arrangement: "BY_COLUMNS" | "BY_ROWS";
+  readingDirection: "LTR" | "RTL";
   innerMargin?: number;
   topMargin?: number;
   bottomMargin?: number;
@@ -19,13 +19,13 @@ export interface PageLayoutParameters extends BaseParameters {
 }
 
 export const defaultParameters: PageLayoutParameters = {
-  mode: 'DEFAULT',
+  mode: "DEFAULT",
   pagesPerSheet: 4,
   rows: 1,
   cols: 1,
-  orientation: 'PORTRAIT',
-  arrangement: 'BY_COLUMNS',
-  readingDirection: 'LTR',
+  orientation: "PORTRAIT",
+  arrangement: "BY_COLUMNS",
+  readingDirection: "LTR",
   addBorder: false,
   innerMargin: 0,
   topMargin: 0,
@@ -40,19 +40,15 @@ export type PageLayoutParametersHook = BaseParametersHook<PageLayoutParameters>;
 export const usePageLayoutParameters = (): PageLayoutParametersHook => {
   return useBaseParameters<PageLayoutParameters>({
     defaultParameters,
-    endpointName: 'multi-page-layout',
+    endpointName: "multi-page-layout",
     validateFn: (params) => {
-      const cols = params.mode === 'DEFAULT'
-        ? Math.ceil(Math.sqrt(params.pagesPerSheet))
-        : params.cols;
-      const rows = params.mode === 'DEFAULT'
-        ? Math.ceil(params.pagesPerSheet / cols)
-        : params.rows;
+      const cols = params.mode === "DEFAULT" ? Math.ceil(Math.sqrt(params.pagesPerSheet)) : params.cols;
+      const rows = params.mode === "DEFAULT" ? Math.ceil(params.pagesPerSheet / cols) : params.rows;
 
       if (cols <= 0 || rows <= 0) return false;
 
-      const pageWidth = params.orientation === 'PORTRAIT' ? 595.28 : 841.89;
-      const pageHeight = params.orientation === 'PORTRAIT' ? 841.89 : 595.28;
+      const pageWidth = params.orientation === "PORTRAIT" ? 595.28 : 841.89;
+      const pageHeight = params.orientation === "PORTRAIT" ? 841.89 : 595.28;
 
       const left = params.leftMargin ?? 0;
       const right = params.rightMargin ?? 0;
@@ -73,5 +69,3 @@ export const usePageLayoutParameters = (): PageLayoutParametersHook => {
     },
   });
 };
-
-
diff --git a/frontend/src/core/hooks/tools/redact/useRedactOperation.test.ts b/frontend/src/core/hooks/tools/redact/useRedactOperation.test.ts
index a7a46bc3b9..23a25a39f2 100644
--- a/frontend/src/core/hooks/tools/redact/useRedactOperation.test.ts
+++ b/frontend/src/core/hooks/tools/redact/useRedactOperation.test.ts
@@ -1,96 +1,96 @@
-import { describe, expect, test, vi, beforeEach } from 'vitest';
-import { renderHook } from '@testing-library/react';
-import { buildRedactFormData, redactOperationConfig, useRedactOperation } from '@app/hooks/tools/redact/useRedactOperation';
-import { defaultParameters, RedactParameters } from '@app/hooks/tools/redact/useRedactParameters';
+import { describe, expect, test, vi, beforeEach } from "vitest";
+import { renderHook } from "@testing-library/react";
+import { buildRedactFormData, redactOperationConfig, useRedactOperation } from "@app/hooks/tools/redact/useRedactOperation";
+import { defaultParameters, RedactParameters } from "@app/hooks/tools/redact/useRedactParameters";
 
 // Mock the useToolOperation hook
-vi.mock('../shared/useToolOperation', async () => {
-  const actual = await vi.importActual('../shared/useToolOperation');  // Need to keep ToolType etc.
+vi.mock("../shared/useToolOperation", async () => {
+  const actual = await vi.importActual("../shared/useToolOperation"); // Need to keep ToolType etc.
   return {
     ...actual,
-    useToolOperation: vi.fn()
+    useToolOperation: vi.fn(),
   };
 });
 
 // Mock the translation hook
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({ t: vi.fn((_key: string, fallback: string) => fallback) })
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: vi.fn((_key: string, fallback: string) => fallback) }),
 }));
 
 // Mock the error handler utility
-vi.mock('../../../utils/toolErrorHandler', () => ({
-  createStandardErrorHandler: vi.fn(() => vi.fn())
+vi.mock("../../../utils/toolErrorHandler", () => ({
+  createStandardErrorHandler: vi.fn(() => vi.fn()),
 }));
 
-describe('buildRedactFormData', () => {
-  const mockFile = new File(['test content'], 'test.pdf', { type: 'application/pdf' });
+describe("buildRedactFormData", () => {
+  const mockFile = new File(["test content"], "test.pdf", { type: "application/pdf" });
 
-  test('should build form data for automatic mode', () => {
+  test("should build form data for automatic mode", () => {
     const parameters: RedactParameters = {
       ...defaultParameters,
-      mode: 'automatic',
-      wordsToRedact: ['Confidential', 'Secret'],
+      mode: "automatic",
+      wordsToRedact: ["Confidential", "Secret"],
       useRegex: true,
       wholeWordSearch: true,
-      redactColor: '#FF0000',
+      redactColor: "#FF0000",
       customPadding: 0.5,
       convertPDFToImage: false,
     };
 
     const formData = buildRedactFormData(parameters, mockFile);
 
-    expect(formData.get('fileInput')).toBe(mockFile);
-    expect(formData.get('listOfText')).toBe('Confidential\nSecret');
-    expect(formData.get('useRegex')).toBe('true');
-    expect(formData.get('wholeWordSearch')).toBe('true');
-    expect(formData.get('redactColor')).toBe('FF0000'); // Hash should be removed
-    expect(formData.get('customPadding')).toBe('0.5');
-    expect(formData.get('convertPDFToImage')).toBe('false');
+    expect(formData.get("fileInput")).toBe(mockFile);
+    expect(formData.get("listOfText")).toBe("Confidential\nSecret");
+    expect(formData.get("useRegex")).toBe("true");
+    expect(formData.get("wholeWordSearch")).toBe("true");
+    expect(formData.get("redactColor")).toBe("FF0000"); // Hash should be removed
+    expect(formData.get("customPadding")).toBe("0.5");
+    expect(formData.get("convertPDFToImage")).toBe("false");
   });
 
-  test('should handle empty words array', () => {
+  test("should handle empty words array", () => {
     const parameters: RedactParameters = {
       ...defaultParameters,
-      mode: 'automatic',
+      mode: "automatic",
       wordsToRedact: [],
     };
 
     const formData = buildRedactFormData(parameters, mockFile);
 
-    expect(formData.get('listOfText')).toBe('');
+    expect(formData.get("listOfText")).toBe("");
   });
 
-  test('should join multiple words with newlines', () => {
+  test("should join multiple words with newlines", () => {
     const parameters: RedactParameters = {
       ...defaultParameters,
-      mode: 'automatic',
-      wordsToRedact: ['Word1', 'Word2', 'Word3'],
+      mode: "automatic",
+      wordsToRedact: ["Word1", "Word2", "Word3"],
     };
 
     const formData = buildRedactFormData(parameters, mockFile);
 
-    expect(formData.get('listOfText')).toBe('Word1\nWord2\nWord3');
+    expect(formData.get("listOfText")).toBe("Word1\nWord2\nWord3");
   });
 
   test.each([
-    { description: 'remove hash from redact color', redactColor: '#123456', expected: '123456' },
-    { description: 'handle redact color without hash', redactColor: 'ABCDEF', expected: 'ABCDEF' },
-  ])('should $description', ({ redactColor, expected }) => {
+    { description: "remove hash from redact color", redactColor: "#123456", expected: "123456" },
+    { description: "handle redact color without hash", redactColor: "ABCDEF", expected: "ABCDEF" },
+  ])("should $description", ({ redactColor, expected }) => {
     const parameters: RedactParameters = {
       ...defaultParameters,
-      mode: 'automatic',
+      mode: "automatic",
       redactColor,
     };
 
     const formData = buildRedactFormData(parameters, mockFile);
 
-    expect(formData.get('redactColor')).toBe(expected);
+    expect(formData.get("redactColor")).toBe(expected);
   });
 
-  test('should convert boolean parameters to strings', () => {
+  test("should convert boolean parameters to strings", () => {
     const parameters: RedactParameters = {
       ...defaultParameters,
-      mode: 'automatic',
+      mode: "automatic",
       useRegex: false,
       wholeWordSearch: true,
       convertPDFToImage: false,
@@ -98,29 +98,29 @@ describe('buildRedactFormData', () => {
 
     const formData = buildRedactFormData(parameters, mockFile);
 
-    expect(formData.get('useRegex')).toBe('false');
-    expect(formData.get('wholeWordSearch')).toBe('true');
-    expect(formData.get('convertPDFToImage')).toBe('false');
+    expect(formData.get("useRegex")).toBe("false");
+    expect(formData.get("wholeWordSearch")).toBe("true");
+    expect(formData.get("convertPDFToImage")).toBe("false");
   });
 
-  test('should return empty form data for manual mode (handled client-side)', () => {
+  test("should return empty form data for manual mode (handled client-side)", () => {
     const parameters: RedactParameters = {
       ...defaultParameters,
-      mode: 'manual',
+      mode: "manual",
     };
 
     const formData = buildRedactFormData(parameters, mockFile);
-    expect(formData.get('fileInput')).toBeNull();
+    expect(formData.get("fileInput")).toBeNull();
   });
 });
 
-describe('useRedactOperation', () => {
+describe("useRedactOperation", () => {
   beforeEach(() => {
     vi.clearAllMocks();
   });
 
-  test('should call useToolOperation with correct configuration', async () => {
-    const { useToolOperation } = await import('@app/hooks/tools/shared/useToolOperation');
+  test("should call useToolOperation with correct configuration", async () => {
+    const { useToolOperation } = await import("@app/hooks/tools/shared/useToolOperation");
     const mockUseToolOperation = vi.mocked(useToolOperation);
 
     renderHook(() => useRedactOperation());
@@ -131,13 +131,13 @@ describe('useRedactOperation', () => {
     });
   });
 
-  test('should provide error handler to useToolOperation', async () => {
-    const { useToolOperation } = await import('@app/hooks/tools/shared/useToolOperation');
+  test("should provide error handler to useToolOperation", async () => {
+    const { useToolOperation } = await import("@app/hooks/tools/shared/useToolOperation");
     const mockUseToolOperation = vi.mocked(useToolOperation);
 
     renderHook(() => useRedactOperation());
 
     const callArgs = mockUseToolOperation.mock.calls[0][0];
-    expect(typeof callArgs.getErrorMessage).toBe('function');
+    expect(typeof callArgs.getErrorMessage).toBe("function");
   });
 });
diff --git a/frontend/src/core/hooks/tools/redact/useRedactOperation.ts b/frontend/src/core/hooks/tools/redact/useRedactOperation.ts
index fea3c53fdb..1285380905 100644
--- a/frontend/src/core/hooks/tools/redact/useRedactOperation.ts
+++ b/frontend/src/core/hooks/tools/redact/useRedactOperation.ts
@@ -1,20 +1,20 @@
-import { useTranslation } from 'react-i18next';
-import { useToolOperation, ToolType } from '@app/hooks/tools/shared/useToolOperation';
-import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
-import { RedactParameters, defaultParameters } from '@app/hooks/tools/redact/useRedactParameters';
+import { useTranslation } from "react-i18next";
+import { useToolOperation, ToolType } from "@app/hooks/tools/shared/useToolOperation";
+import { createStandardErrorHandler } from "@app/utils/toolErrorHandler";
+import { RedactParameters, defaultParameters } from "@app/hooks/tools/redact/useRedactParameters";
 
 // Static configuration that can be used by both the hook and automation executor
 export const buildRedactFormData = (parameters: RedactParameters, file: File): FormData => {
   const formData = new FormData();
 
   // For automatic mode we hit the backend and need full payload
-  if (parameters.mode === 'automatic') {
+  if (parameters.mode === "automatic") {
     formData.append("fileInput", file);
     // Convert array to newline-separated string as expected by backend
-    formData.append("listOfText", parameters.wordsToRedact.join('\n'));
+    formData.append("listOfText", parameters.wordsToRedact.join("\n"));
     formData.append("useRegex", parameters.useRegex.toString());
     formData.append("wholeWordSearch", parameters.wholeWordSearch.toString());
-    formData.append("redactColor", parameters.redactColor.replace('#', ''));
+    formData.append("redactColor", parameters.redactColor.replace("#", ""));
     formData.append("customPadding", parameters.customPadding.toString());
     formData.append("convertPDFToImage", parameters.convertPDFToImage.toString());
   } else {
@@ -29,13 +29,13 @@ export const buildRedactFormData = (parameters: RedactParameters, file: File): F
 export const redactOperationConfig = {
   toolType: ToolType.singleFile,
   buildFormData: buildRedactFormData,
-  operationType: 'redact',
+  operationType: "redact",
   endpoint: (parameters: RedactParameters) => {
-    if (parameters.mode === 'automatic') {
-      return '/api/v1/security/auto-redact';
+    if (parameters.mode === "automatic") {
+      return "/api/v1/security/auto-redact";
     }
     // Manual redaction is handled by EmbedPDF in the viewer; no endpoint call.
-    return "";  
+    return "";
   },
   defaultParameters,
 } as const;
@@ -45,6 +45,6 @@ export const useRedactOperation = () => {
 
   return useToolOperation<RedactParameters>({
     ...redactOperationConfig,
-    getErrorMessage: createStandardErrorHandler(t('redact.error.failed', 'An error occurred while redacting the PDF.'))
+    getErrorMessage: createStandardErrorHandler(t("redact.error.failed", "An error occurred while redacting the PDF.")),
   });
 };
diff --git a/frontend/src/core/hooks/tools/redact/useRedactParameters.test.ts b/frontend/src/core/hooks/tools/redact/useRedactParameters.test.ts
index 8689e6715e..3dbcdf33fd 100644
--- a/frontend/src/core/hooks/tools/redact/useRedactParameters.test.ts
+++ b/frontend/src/core/hooks/tools/redact/useRedactParameters.test.ts
@@ -1,23 +1,23 @@
-import { describe, expect, test } from 'vitest';
-import { renderHook, act } from '@testing-library/react';
-import { useRedactParameters, defaultParameters } from '@app/hooks/tools/redact/useRedactParameters';
+import { describe, expect, test } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { useRedactParameters, defaultParameters } from "@app/hooks/tools/redact/useRedactParameters";
 
-describe('useRedactParameters', () => {
-  test('should initialize with default parameters', () => {
+describe("useRedactParameters", () => {
+  test("should initialize with default parameters", () => {
     const { result } = renderHook(() => useRedactParameters());
 
     expect(result.current.parameters).toStrictEqual(defaultParameters);
   });
 
   test.each([
-    { paramName: 'mode' as const, value: 'manual' as const },
-    { paramName: 'wordsToRedact' as const, value: ['word1', 'word2'] },
-    { paramName: 'useRegex' as const, value: true },
-    { paramName: 'wholeWordSearch' as const, value: true },
-    { paramName: 'redactColor' as const, value: '#FF0000' },
-    { paramName: 'customPadding' as const, value: 0.5 },
-    { paramName: 'convertPDFToImage' as const, value: false }
-  ])('should update parameter $paramName', ({ paramName, value }) => {
+    { paramName: "mode" as const, value: "manual" as const },
+    { paramName: "wordsToRedact" as const, value: ["word1", "word2"] },
+    { paramName: "useRegex" as const, value: true },
+    { paramName: "wholeWordSearch" as const, value: true },
+    { paramName: "redactColor" as const, value: "#FF0000" },
+    { paramName: "customPadding" as const, value: 0.5 },
+    { paramName: "convertPDFToImage" as const, value: false },
+  ])("should update parameter $paramName", ({ paramName, value }) => {
     const { result } = renderHook(() => useRedactParameters());
 
     act(() => {
@@ -27,14 +27,14 @@ describe('useRedactParameters', () => {
     expect(result.current.parameters[paramName]).toStrictEqual(value);
   });
 
-  test('should reset parameters to defaults', () => {
+  test("should reset parameters to defaults", () => {
     const { result } = renderHook(() => useRedactParameters());
 
     // Modify some parameters
     act(() => {
-      result.current.updateParameter('mode', 'manual');
-      result.current.updateParameter('wordsToRedact', ['test']);
-      result.current.updateParameter('useRegex', true);
+      result.current.updateParameter("mode", "manual");
+      result.current.updateParameter("wordsToRedact", ["test"]);
+      result.current.updateParameter("useRegex", true);
     });
 
     // Reset parameters
@@ -45,90 +45,102 @@ describe('useRedactParameters', () => {
     expect(result.current.parameters).toStrictEqual(defaultParameters);
   });
 
-  describe('validation', () => {
+  describe("validation", () => {
     test.each([
-      { description: 'validate when wordsToRedact has non-empty words in automatic mode', wordsToRedact: ['word1', 'word2'], expected: true },
-      { description: 'not validate when wordsToRedact is empty in automatic mode', wordsToRedact: [], expected: false },
-      { description: 'not validate when wordsToRedact contains only empty strings in automatic mode', wordsToRedact: ['', '  ', ''], expected: false },
-      { description: 'validate when wordsToRedact contains at least one non-empty word in automatic mode', wordsToRedact: ['', 'valid', '  '], expected: true },
-    ])('should $description', ({ wordsToRedact, expected }) => {
+      {
+        description: "validate when wordsToRedact has non-empty words in automatic mode",
+        wordsToRedact: ["word1", "word2"],
+        expected: true,
+      },
+      { description: "not validate when wordsToRedact is empty in automatic mode", wordsToRedact: [], expected: false },
+      {
+        description: "not validate when wordsToRedact contains only empty strings in automatic mode",
+        wordsToRedact: ["", "  ", ""],
+        expected: false,
+      },
+      {
+        description: "validate when wordsToRedact contains at least one non-empty word in automatic mode",
+        wordsToRedact: ["", "valid", "  "],
+        expected: true,
+      },
+    ])("should $description", ({ wordsToRedact, expected }) => {
       const { result } = renderHook(() => useRedactParameters());
 
       act(() => {
-        result.current.updateParameter('mode', 'automatic');
-        result.current.updateParameter('wordsToRedact', wordsToRedact);
+        result.current.updateParameter("mode", "automatic");
+        result.current.updateParameter("wordsToRedact", wordsToRedact);
       });
 
       expect(result.current.validateParameters()).toBe(expected);
     });
 
-    test('should not validate in manual mode (not implemented)', () => {
+    test("should not validate in manual mode (not implemented)", () => {
       const { result } = renderHook(() => useRedactParameters());
 
       act(() => {
-        result.current.updateParameter('mode', 'manual');
+        result.current.updateParameter("mode", "manual");
       });
 
       expect(result.current.validateParameters()).toBe(false);
     });
   });
 
-  describe('endpoint handling', () => {
-    test('should return correct endpoint for automatic mode', () => {
+  describe("endpoint handling", () => {
+    test("should return correct endpoint for automatic mode", () => {
       const { result } = renderHook(() => useRedactParameters());
 
       act(() => {
-        result.current.updateParameter('mode', 'automatic');
+        result.current.updateParameter("mode", "automatic");
       });
 
-      expect(result.current.getEndpointName()).toBe('/api/v1/security/auto-redact');
+      expect(result.current.getEndpointName()).toBe("/api/v1/security/auto-redact");
     });
 
-    test('should return empty endpoint for manual mode (handled client-side)', () => {
+    test("should return empty endpoint for manual mode (handled client-side)", () => {
       const { result } = renderHook(() => useRedactParameters());
 
       act(() => {
-        result.current.updateParameter('mode', 'manual');
+        result.current.updateParameter("mode", "manual");
       });
 
-      expect(result.current.getEndpointName()).toBe('');
+      expect(result.current.getEndpointName()).toBe("");
     });
   });
 
-  test('should maintain parameter state across updates', () => {
+  test("should maintain parameter state across updates", () => {
     const { result } = renderHook(() => useRedactParameters());
 
     act(() => {
-      result.current.updateParameter('redactColor', '#FF0000');
-      result.current.updateParameter('customPadding', 0.5);
-      result.current.updateParameter('wordsToRedact', ['word1']);
+      result.current.updateParameter("redactColor", "#FF0000");
+      result.current.updateParameter("customPadding", 0.5);
+      result.current.updateParameter("wordsToRedact", ["word1"]);
     });
 
     // All parameters should be updated
-    expect(result.current.parameters.redactColor).toBe('#FF0000');
+    expect(result.current.parameters.redactColor).toBe("#FF0000");
     expect(result.current.parameters.customPadding).toBe(0.5);
-    expect(result.current.parameters.wordsToRedact).toEqual(['word1']);
+    expect(result.current.parameters.wordsToRedact).toEqual(["word1"]);
 
     // Other parameters should remain at defaults
-    expect(result.current.parameters.mode).toBe('automatic');
+    expect(result.current.parameters.mode).toBe("automatic");
     expect(result.current.parameters.useRegex).toBe(false);
     expect(result.current.parameters.wholeWordSearch).toBe(false);
     expect(result.current.parameters.convertPDFToImage).toBe(true);
   });
 
-  test('should handle array parameter updates correctly', () => {
+  test("should handle array parameter updates correctly", () => {
     const { result } = renderHook(() => useRedactParameters());
 
     act(() => {
-      result.current.updateParameter('wordsToRedact', ['initial']);
+      result.current.updateParameter("wordsToRedact", ["initial"]);
     });
 
-    expect(result.current.parameters.wordsToRedact).toEqual(['initial']);
+    expect(result.current.parameters.wordsToRedact).toEqual(["initial"]);
 
     act(() => {
-      result.current.updateParameter('wordsToRedact', ['updated', 'multiple']);
+      result.current.updateParameter("wordsToRedact", ["updated", "multiple"]);
     });
 
-    expect(result.current.parameters.wordsToRedact).toEqual(['updated', 'multiple']);
+    expect(result.current.parameters.wordsToRedact).toEqual(["updated", "multiple"]);
   });
 });
diff --git a/frontend/src/core/hooks/tools/redact/useRedactParameters.ts b/frontend/src/core/hooks/tools/redact/useRedactParameters.ts
index 630592838c..731a0c4501 100644
--- a/frontend/src/core/hooks/tools/redact/useRedactParameters.ts
+++ b/frontend/src/core/hooks/tools/redact/useRedactParameters.ts
@@ -1,7 +1,7 @@
-import { BaseParameters } from '@app/types/parameters';
-import { useBaseParameters, BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
+import { BaseParameters } from "@app/types/parameters";
+import { useBaseParameters, BaseParametersHook } from "@app/hooks/tools/shared/useBaseParameters";
 
-export type RedactMode = 'automatic' | 'manual';
+export type RedactMode = "automatic" | "manual";
 
 export interface RedactParameters extends BaseParameters {
   mode: RedactMode;
@@ -16,11 +16,11 @@ export interface RedactParameters extends BaseParameters {
 }
 
 export const defaultParameters: RedactParameters = {
-  mode: 'automatic',
+  mode: "automatic",
   wordsToRedact: [],
   useRegex: false,
   wholeWordSearch: false,
-  redactColor: '#000000',
+  redactColor: "#000000",
   customPadding: 0.1,
   convertPDFToImage: true,
 };
@@ -31,18 +31,18 @@ export const useRedactParameters = (): RedactParametersHook => {
   return useBaseParameters({
     defaultParameters,
     endpointName: (params) => {
-      if (params.mode === 'automatic') {
-        return '/api/v1/security/auto-redact';
+      if (params.mode === "automatic") {
+        return "/api/v1/security/auto-redact";
       }
       // Manual redaction handled client-side (validation prevents this path)
-      return '';
+      return "";
     },
     validateFn: (params) => {
-      if (params.mode === 'automatic') {
-        return params.wordsToRedact.length > 0 && params.wordsToRedact.some(word => word.trim().length > 0);
+      if (params.mode === "automatic") {
+        return params.wordsToRedact.length > 0 && params.wordsToRedact.some((word) => word.trim().length > 0);
       }
       // Manual mode is not yet supported via this flow
       return false;
-    }
+    },
   });
 };
diff --git a/frontend/src/core/hooks/tools/removeAnnotations/useRemoveAnnotationsOperation.ts b/frontend/src/core/hooks/tools/removeAnnotations/useRemoveAnnotationsOperation.ts
index 0f60593bc3..5b785589ba 100644
--- a/frontend/src/core/hooks/tools/removeAnnotations/useRemoveAnnotationsOperation.ts
+++ b/frontend/src/core/hooks/tools/removeAnnotations/useRemoveAnnotationsOperation.ts
@@ -1,16 +1,17 @@
-import { useTranslation } from 'react-i18next';
-import { useToolOperation, ToolType, CustomProcessorResult } from '@app/hooks/tools/shared/useToolOperation';
-import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
-import { RemoveAnnotationsParameters, defaultParameters } from '@app/hooks/tools/removeAnnotations/useRemoveAnnotationsParameters';
+import { useTranslation } from "react-i18next";
+import { useToolOperation, ToolType, CustomProcessorResult } from "@app/hooks/tools/shared/useToolOperation";
+import { createStandardErrorHandler } from "@app/utils/toolErrorHandler";
 import {
-  getPdfiumModule,
-  openRawDocumentSafe,
-  closeDocAndFreeBuffer,
-  saveRawDocument,
-} from '@app/services/pdfiumService';
+  RemoveAnnotationsParameters,
+  defaultParameters,
+} from "@app/hooks/tools/removeAnnotations/useRemoveAnnotationsParameters";
+import { getPdfiumModule, openRawDocumentSafe, closeDocAndFreeBuffer, saveRawDocument } from "@app/services/pdfiumService";
 
 // Client-side PDF processing using PDFium WASM
-const removeAnnotationsProcessor = async (_parameters: RemoveAnnotationsParameters, files: File[]): Promise<CustomProcessorResult> => {
+const removeAnnotationsProcessor = async (
+  _parameters: RemoveAnnotationsParameters,
+  files: File[],
+): Promise<CustomProcessorResult> => {
   const processedFiles: File[] = [];
 
   for (const file of files) {
@@ -40,17 +41,16 @@ const removeAnnotationsProcessor = async (_parameters: RemoveAnnotationsParamete
         }
 
         const outBytes = await saveRawDocument(docPtr);
-        const processedFile = new File([outBytes], file.name, { type: 'application/pdf' });
+        const processedFile = new File([outBytes], file.name, { type: "application/pdf" });
         processedFiles.push(processedFile);
       } finally {
         closeDocAndFreeBuffer(m, docPtr);
       }
     } catch (error) {
-      console.error('Error processing file:', file.name, error);
-      throw new Error(
-        `Failed to process ${file.name}: ${error instanceof Error ? error.message : 'Unknown error'}`,
-        { cause: error }
-      );
+      console.error("Error processing file:", file.name, error);
+      throw new Error(`Failed to process ${file.name}: ${error instanceof Error ? error.message : "Unknown error"}`, {
+        cause: error,
+      });
     }
   }
 
@@ -63,7 +63,7 @@ const removeAnnotationsProcessor = async (_parameters: RemoveAnnotationsParamete
 // Static configuration object
 export const removeAnnotationsOperationConfig = {
   toolType: ToolType.custom,
-  operationType: 'removeAnnotations',
+  operationType: "removeAnnotations",
   customProcessor: removeAnnotationsProcessor,
   defaultParameters,
 } as const;
@@ -73,6 +73,8 @@ export const useRemoveAnnotationsOperation = () => {
 
   return useToolOperation<RemoveAnnotationsParameters>({
     ...removeAnnotationsOperationConfig,
-    getErrorMessage: createStandardErrorHandler(t('removeAnnotations.error.failed', 'An error occurred while removing annotations from the PDF.'))
+    getErrorMessage: createStandardErrorHandler(
+      t("removeAnnotations.error.failed", "An error occurred while removing annotations from the PDF."),
+    ),
   });
 };
diff --git a/frontend/src/core/hooks/tools/removeAnnotations/useRemoveAnnotationsParameters.ts b/frontend/src/core/hooks/tools/removeAnnotations/useRemoveAnnotationsParameters.ts
index 55a5c81f9a..2da2f4005b 100644
--- a/frontend/src/core/hooks/tools/removeAnnotations/useRemoveAnnotationsParameters.ts
+++ b/frontend/src/core/hooks/tools/removeAnnotations/useRemoveAnnotationsParameters.ts
@@ -1,14 +1,13 @@
-import { useBaseParameters } from '@app/hooks/tools/shared/useBaseParameters';
+import { useBaseParameters } from "@app/hooks/tools/shared/useBaseParameters";
 
-export type RemoveAnnotationsParameters = Record<string, never>
+export type RemoveAnnotationsParameters = Record<string, never>;
 
-export const defaultParameters: RemoveAnnotationsParameters = {
-};
+export const defaultParameters: RemoveAnnotationsParameters = {};
 
 export const useRemoveAnnotationsParameters = () => {
   return useBaseParameters<RemoveAnnotationsParameters>({
     defaultParameters,
-    endpointName: 'remove-annotations', // Not used for client-side processing, but required by base hook
+    endpointName: "remove-annotations", // Not used for client-side processing, but required by base hook
     validateFn: () => true, // No parameters to validate
   });
-};
\ No newline at end of file
+};
diff --git a/frontend/src/core/hooks/tools/removeBlanks/useRemoveBlanksOperation.ts b/frontend/src/core/hooks/tools/removeBlanks/useRemoveBlanksOperation.ts
index ddb0ba2d24..cb51a0df53 100644
--- a/frontend/src/core/hooks/tools/removeBlanks/useRemoveBlanksOperation.ts
+++ b/frontend/src/core/hooks/tools/removeBlanks/useRemoveBlanksOperation.ts
@@ -1,15 +1,15 @@
-import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { ToolType, useToolOperation, ToolOperationConfig } from '@app/hooks/tools/shared/useToolOperation';
-import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
-import { RemoveBlanksParameters, defaultParameters } from '@app/hooks/tools/removeBlanks/useRemoveBlanksParameters';
-import { useToolResources } from '@app/hooks/tools/shared/useToolResources';
+import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { ToolType, useToolOperation, ToolOperationConfig } from "@app/hooks/tools/shared/useToolOperation";
+import { createStandardErrorHandler } from "@app/utils/toolErrorHandler";
+import { RemoveBlanksParameters, defaultParameters } from "@app/hooks/tools/removeBlanks/useRemoveBlanksParameters";
+import { useToolResources } from "@app/hooks/tools/shared/useToolResources";
 
 export const buildRemoveBlanksFormData = (parameters: RemoveBlanksParameters, file: File): FormData => {
   const formData = new FormData();
-  formData.append('fileInput', file);
-  formData.append('threshold', String(parameters.threshold));
-  formData.append('whitePercent', String(parameters.whitePercent));
+  formData.append("fileInput", file);
+  formData.append("threshold", String(parameters.threshold));
+  formData.append("whitePercent", String(parameters.whitePercent));
   // Note: includeBlankPages is not sent to backend as it always returns both files in a ZIP
   return formData;
 };
@@ -17,8 +17,8 @@ export const buildRemoveBlanksFormData = (parameters: RemoveBlanksParameters, fi
 export const removeBlanksOperationConfig = {
   toolType: ToolType.singleFile,
   buildFormData: buildRemoveBlanksFormData,
-  operationType: 'removeBlanks',
-  endpoint: '/api/v1/misc/remove-blanks',
+  operationType: "removeBlanks",
+  endpoint: "/api/v1/misc/remove-blanks",
   defaultParameters,
 } as const satisfies ToolOperationConfig<RemoveBlanksParameters>;
 
@@ -26,18 +26,17 @@ export const useRemoveBlanksOperation = () => {
   const { t } = useTranslation();
   const { extractZipFiles } = useToolResources();
 
-  const responseHandler = useCallback(async (blob: Blob): Promise<File[]> => {
-    // Backend always returns a ZIP file containing the processed PDFs
-    return await extractZipFiles(blob);
-  }, [extractZipFiles]);
+  const responseHandler = useCallback(
+    async (blob: Blob): Promise<File[]> => {
+      // Backend always returns a ZIP file containing the processed PDFs
+      return await extractZipFiles(blob);
+    },
+    [extractZipFiles],
+  );
 
   return useToolOperation<RemoveBlanksParameters>({
     ...removeBlanksOperationConfig,
     responseHandler,
-    getErrorMessage: createStandardErrorHandler(
-      t('removeBlanks.error.failed', 'Failed to remove blank pages')
-    )
+    getErrorMessage: createStandardErrorHandler(t("removeBlanks.error.failed", "Failed to remove blank pages")),
   });
 };
-
-
diff --git a/frontend/src/core/hooks/tools/removeBlanks/useRemoveBlanksParameters.ts b/frontend/src/core/hooks/tools/removeBlanks/useRemoveBlanksParameters.ts
index 4a57f8bf84..fffff30400 100644
--- a/frontend/src/core/hooks/tools/removeBlanks/useRemoveBlanksParameters.ts
+++ b/frontend/src/core/hooks/tools/removeBlanks/useRemoveBlanksParameters.ts
@@ -1,5 +1,5 @@
-import { BaseParameters } from '@app/types/parameters';
-import { useBaseParameters, BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
+import { BaseParameters } from "@app/types/parameters";
+import { useBaseParameters, BaseParametersHook } from "@app/hooks/tools/shared/useBaseParameters";
 
 export interface RemoveBlanksParameters extends BaseParameters {
   threshold: number; // 0-255
@@ -18,9 +18,7 @@ export type RemoveBlanksParametersHook = BaseParametersHook<RemoveBlanksParamete
 export const useRemoveBlanksParameters = (): RemoveBlanksParametersHook => {
   return useBaseParameters({
     defaultParameters,
-    endpointName: 'remove-blanks',
+    endpointName: "remove-blanks",
     validateFn: (p) => p.threshold >= 0 && p.threshold <= 255 && p.whitePercent > 0 && p.whitePercent <= 100,
   });
 };
-
-
diff --git a/frontend/src/core/hooks/tools/removeCertificateSign/useRemoveCertificateSignOperation.ts b/frontend/src/core/hooks/tools/removeCertificateSign/useRemoveCertificateSignOperation.ts
index a2a1277b90..f404d659b2 100644
--- a/frontend/src/core/hooks/tools/removeCertificateSign/useRemoveCertificateSignOperation.ts
+++ b/frontend/src/core/hooks/tools/removeCertificateSign/useRemoveCertificateSignOperation.ts
@@ -1,7 +1,10 @@
-import { useTranslation } from 'react-i18next';
-import { ToolType, useToolOperation } from '@app/hooks/tools/shared/useToolOperation';
-import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
-import { RemoveCertificateSignParameters, defaultParameters } from '@app/hooks/tools/removeCertificateSign/useRemoveCertificateSignParameters';
+import { useTranslation } from "react-i18next";
+import { ToolType, useToolOperation } from "@app/hooks/tools/shared/useToolOperation";
+import { createStandardErrorHandler } from "@app/utils/toolErrorHandler";
+import {
+  RemoveCertificateSignParameters,
+  defaultParameters,
+} from "@app/hooks/tools/removeCertificateSign/useRemoveCertificateSignParameters";
 
 // Static function that can be used by both the hook and automation executor
 export const buildRemoveCertificateSignFormData = (_parameters: RemoveCertificateSignParameters, file: File): FormData => {
@@ -14,8 +17,8 @@ export const buildRemoveCertificateSignFormData = (_parameters: RemoveCertificat
 export const removeCertificateSignOperationConfig = {
   toolType: ToolType.singleFile,
   buildFormData: buildRemoveCertificateSignFormData,
-  operationType: 'removeCertSign',
-  endpoint: '/api/v1/security/remove-cert-sign',
+  operationType: "removeCertSign",
+  endpoint: "/api/v1/security/remove-cert-sign",
   defaultParameters,
 } as const;
 
@@ -24,6 +27,8 @@ export const useRemoveCertificateSignOperation = () => {
 
   return useToolOperation<RemoveCertificateSignParameters>({
     ...removeCertificateSignOperationConfig,
-    getErrorMessage: createStandardErrorHandler(t('removeCertSign.error.failed', 'An error occurred while removing certificate signatures.'))
+    getErrorMessage: createStandardErrorHandler(
+      t("removeCertSign.error.failed", "An error occurred while removing certificate signatures."),
+    ),
   });
 };
diff --git a/frontend/src/core/hooks/tools/removeCertificateSign/useRemoveCertificateSignParameters.ts b/frontend/src/core/hooks/tools/removeCertificateSign/useRemoveCertificateSignParameters.ts
index 838d672e5c..20871d113a 100644
--- a/frontend/src/core/hooks/tools/removeCertificateSign/useRemoveCertificateSignParameters.ts
+++ b/frontend/src/core/hooks/tools/removeCertificateSign/useRemoveCertificateSignParameters.ts
@@ -1,5 +1,5 @@
-import { BaseParameters } from '@app/types/parameters';
-import { useBaseParameters, BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
+import { BaseParameters } from "@app/types/parameters";
+import { useBaseParameters, BaseParametersHook } from "@app/hooks/tools/shared/useBaseParameters";
 
 export interface RemoveCertificateSignParameters extends BaseParameters {
   // Extends BaseParameters - ready for future parameter additions if needed
@@ -14,6 +14,6 @@ export type RemoveCertificateSignParametersHook = BaseParametersHook<RemoveCerti
 export const useRemoveCertificateSignParameters = (): RemoveCertificateSignParametersHook => {
   return useBaseParameters({
     defaultParameters,
-    endpointName: 'remove-cert-sign',
+    endpointName: "remove-cert-sign",
   });
-};
\ No newline at end of file
+};
diff --git a/frontend/src/core/hooks/tools/removeImage/useRemoveImageOperation.ts b/frontend/src/core/hooks/tools/removeImage/useRemoveImageOperation.ts
index e975cf8d5b..75ee3ccfe8 100644
--- a/frontend/src/core/hooks/tools/removeImage/useRemoveImageOperation.ts
+++ b/frontend/src/core/hooks/tools/removeImage/useRemoveImageOperation.ts
@@ -1,19 +1,19 @@
-import { useTranslation } from 'react-i18next';
-import { useToolOperation, ToolOperationConfig, ToolType } from '@app/hooks/tools/shared/useToolOperation';
-import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
-import type { RemoveImageParameters } from '@app/hooks/tools/removeImage/useRemoveImageParameters';
+import { useTranslation } from "react-i18next";
+import { useToolOperation, ToolOperationConfig, ToolType } from "@app/hooks/tools/shared/useToolOperation";
+import { createStandardErrorHandler } from "@app/utils/toolErrorHandler";
+import type { RemoveImageParameters } from "@app/hooks/tools/removeImage/useRemoveImageParameters";
 
 export const buildRemoveImageFormData = (_params: RemoveImageParameters, file: File): FormData => {
   const formData = new FormData();
-  formData.append('fileInput', file);
+  formData.append("fileInput", file);
   return formData;
 };
 
 export const removeImageOperationConfig: ToolOperationConfig<RemoveImageParameters> = {
   toolType: ToolType.singleFile,
   buildFormData: buildRemoveImageFormData,
-  operationType: 'removeImage',
-  endpoint: '/api/v1/general/remove-image-pdf',
+  operationType: "removeImage",
+  endpoint: "/api/v1/general/remove-image-pdf",
 };
 
 export const useRemoveImageOperation = () => {
@@ -21,10 +21,6 @@ export const useRemoveImageOperation = () => {
 
   return useToolOperation<RemoveImageParameters>({
     ...removeImageOperationConfig,
-    getErrorMessage: createStandardErrorHandler(
-      t('removeImage.error.failed', 'Failed to remove images from the PDF.')
-    ),
+    getErrorMessage: createStandardErrorHandler(t("removeImage.error.failed", "Failed to remove images from the PDF.")),
   });
 };
-
-
diff --git a/frontend/src/core/hooks/tools/removeImage/useRemoveImageParameters.ts b/frontend/src/core/hooks/tools/removeImage/useRemoveImageParameters.ts
index 5684bc003d..73d896fe6f 100644
--- a/frontend/src/core/hooks/tools/removeImage/useRemoveImageParameters.ts
+++ b/frontend/src/core/hooks/tools/removeImage/useRemoveImageParameters.ts
@@ -1,5 +1,5 @@
-import { useBaseParameters } from '@app/hooks/tools/shared/useBaseParameters';
-import type { BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
+import { useBaseParameters } from "@app/hooks/tools/shared/useBaseParameters";
+import type { BaseParametersHook } from "@app/hooks/tools/shared/useBaseParameters";
 
 export type RemoveImageParameters = Record<string, never>;
 
@@ -10,8 +10,6 @@ export type RemoveImageParametersHook = BaseParametersHook<RemoveImageParameters
 export const useRemoveImageParameters = (): RemoveImageParametersHook => {
   return useBaseParameters({
     defaultParameters,
-    endpointName: 'remove-image-pdf',
+    endpointName: "remove-image-pdf",
   });
 };
-
-
diff --git a/frontend/src/core/hooks/tools/removePages/useRemovePagesOperation.ts b/frontend/src/core/hooks/tools/removePages/useRemovePagesOperation.ts
index 85ca86545a..75e90df455 100644
--- a/frontend/src/core/hooks/tools/removePages/useRemovePagesOperation.ts
+++ b/frontend/src/core/hooks/tools/removePages/useRemovePagesOperation.ts
@@ -1,22 +1,22 @@
-import { useTranslation } from 'react-i18next';
-import { ToolType, useToolOperation, ToolOperationConfig } from '@app/hooks/tools/shared/useToolOperation';
-import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
-import { RemovePagesParameters, defaultParameters } from '@app/hooks/tools/removePages/useRemovePagesParameters';
+import { useTranslation } from "react-i18next";
+import { ToolType, useToolOperation, ToolOperationConfig } from "@app/hooks/tools/shared/useToolOperation";
+import { createStandardErrorHandler } from "@app/utils/toolErrorHandler";
+import { RemovePagesParameters, defaultParameters } from "@app/hooks/tools/removePages/useRemovePagesParameters";
 // import { useToolResources } from '@app/hooks/tools/shared/useToolResources';
 
 export const buildRemovePagesFormData = (parameters: RemovePagesParameters, file: File): FormData => {
   const formData = new FormData();
-  formData.append('fileInput', file);
-  const cleaned = parameters.pageNumbers.replace(/\s+/g, '');
-  formData.append('pageNumbers', cleaned);
+  formData.append("fileInput", file);
+  const cleaned = parameters.pageNumbers.replace(/\s+/g, "");
+  formData.append("pageNumbers", cleaned);
   return formData;
 };
 
 export const removePagesOperationConfig = {
   toolType: ToolType.singleFile,
   buildFormData: buildRemovePagesFormData,
-  operationType: 'removePages',
-  endpoint: '/api/v1/general/remove-pages',
+  operationType: "removePages",
+  endpoint: "/api/v1/general/remove-pages",
   defaultParameters,
 } as const satisfies ToolOperationConfig<RemovePagesParameters>;
 
@@ -25,8 +25,6 @@ export const useRemovePagesOperation = () => {
 
   return useToolOperation<RemovePagesParameters>({
     ...removePagesOperationConfig,
-    getErrorMessage: createStandardErrorHandler(
-      t('removePages.error.failed', 'Failed to remove pages')
-    )
+    getErrorMessage: createStandardErrorHandler(t("removePages.error.failed", "Failed to remove pages")),
   });
 };
diff --git a/frontend/src/core/hooks/tools/removePages/useRemovePagesParameters.ts b/frontend/src/core/hooks/tools/removePages/useRemovePagesParameters.ts
index e2b0139098..3e6552df2a 100644
--- a/frontend/src/core/hooks/tools/removePages/useRemovePagesParameters.ts
+++ b/frontend/src/core/hooks/tools/removePages/useRemovePagesParameters.ts
@@ -1,13 +1,13 @@
-import { BaseParameters } from '@app/types/parameters';
-import { useBaseParameters, BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
-import { validatePageNumbers } from '@app/utils/pageSelection';
+import { BaseParameters } from "@app/types/parameters";
+import { useBaseParameters, BaseParametersHook } from "@app/hooks/tools/shared/useBaseParameters";
+import { validatePageNumbers } from "@app/utils/pageSelection";
 
 export interface RemovePagesParameters extends BaseParameters {
   pageNumbers: string; // comma-separated page numbers or ranges (e.g., "1,3,5-8")
 }
 
 export const defaultParameters: RemovePagesParameters = {
-  pageNumbers: '',
+  pageNumbers: "",
 };
 
 export type RemovePagesParametersHook = BaseParametersHook<RemovePagesParameters>;
@@ -15,7 +15,7 @@ export type RemovePagesParametersHook = BaseParametersHook<RemovePagesParameters
 export const useRemovePagesParameters = (): RemovePagesParametersHook => {
   return useBaseParameters({
     defaultParameters,
-    endpointName: 'remove-pages',
+    endpointName: "remove-pages",
     validateFn: (p) => validatePageNumbers(p.pageNumbers),
   });
 };
diff --git a/frontend/src/core/hooks/tools/removePassword/buildRemovePasswordFormData.ts b/frontend/src/core/hooks/tools/removePassword/buildRemovePasswordFormData.ts
index cf3619afc3..a9dc496706 100644
--- a/frontend/src/core/hooks/tools/removePassword/buildRemovePasswordFormData.ts
+++ b/frontend/src/core/hooks/tools/removePassword/buildRemovePasswordFormData.ts
@@ -1,4 +1,4 @@
-import { RemovePasswordParameters } from '@app/hooks/tools/removePassword/useRemovePasswordParameters';
+import { RemovePasswordParameters } from "@app/hooks/tools/removePassword/useRemovePasswordParameters";
 
 /**
  * Builds FormData for remove password API request.
diff --git a/frontend/src/core/hooks/tools/removePassword/useRemovePasswordOperation.test.ts b/frontend/src/core/hooks/tools/removePassword/useRemovePasswordOperation.test.ts
index f29ba15111..81f9e85567 100644
--- a/frontend/src/core/hooks/tools/removePassword/useRemovePasswordOperation.test.ts
+++ b/frontend/src/core/hooks/tools/removePassword/useRemovePasswordOperation.test.ts
@@ -1,31 +1,36 @@
-import { describe, expect, test, vi, beforeEach } from 'vitest';
-import { renderHook } from '@testing-library/react';
-import { useRemovePasswordOperation } from '@app/hooks/tools/removePassword/useRemovePasswordOperation';
-import type { RemovePasswordParameters } from '@app/hooks/tools/removePassword/useRemovePasswordParameters';
+import { describe, expect, test, vi, beforeEach } from "vitest";
+import { renderHook } from "@testing-library/react";
+import { useRemovePasswordOperation } from "@app/hooks/tools/removePassword/useRemovePasswordOperation";
+import type { RemovePasswordParameters } from "@app/hooks/tools/removePassword/useRemovePasswordParameters";
 
-vi.mock('../shared/useToolOperation', async () => {
-  const actual = await vi.importActual('../shared/useToolOperation');  // Need to keep ToolType etc.
+vi.mock("../shared/useToolOperation", async () => {
+  const actual = await vi.importActual("../shared/useToolOperation"); // Need to keep ToolType etc.
   return {
     ...actual,
-    useToolOperation: vi.fn()
+    useToolOperation: vi.fn(),
   };
 });
 
 // Mock the translation hook
 const mockT = vi.fn((key: string) => `translated-${key}`);
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({ t: mockT })
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: mockT }),
 }));
 
 // Mock the error handler
-vi.mock('../../../utils/toolErrorHandler', () => ({
-  createStandardErrorHandler: vi.fn(() => 'error-handler-function')
+vi.mock("../../../utils/toolErrorHandler", () => ({
+  createStandardErrorHandler: vi.fn(() => "error-handler-function"),
 }));
 
 // Import the mocked function
-import { SingleFileToolOperationConfig, ToolOperationHook, ToolType, useToolOperation } from '@app/hooks/tools/shared/useToolOperation';
+import {
+  SingleFileToolOperationConfig,
+  ToolOperationHook,
+  ToolType,
+  useToolOperation,
+} from "@app/hooks/tools/shared/useToolOperation";
 
-describe('useRemovePasswordOperation', () => {
+describe("useRemovePasswordOperation", () => {
   const mockUseToolOperation = vi.mocked(useToolOperation);
 
   const getToolConfig = () => mockUseToolOperation.mock.calls[0][0] as SingleFileToolOperationConfig<RemovePasswordParameters>;
@@ -34,10 +39,10 @@ describe('useRemovePasswordOperation', () => {
     files: [],
     thumbnails: [],
     downloadUrl: null,
-    downloadFilename: '',
+    downloadFilename: "",
     isLoading: false,
     errorMessage: null,
-    status: '',
+    status: "",
     isGeneratingThumbnails: false,
     progress: null,
     executeOperation: vi.fn(),
@@ -54,51 +59,51 @@ describe('useRemovePasswordOperation', () => {
 
   test.each([
     {
-      description: 'with valid password',
-      password: 'test-password'
+      description: "with valid password",
+      password: "test-password",
     },
     {
-      description: 'with complex password',
-      password: 'C0mpl3x@P@ssw0rd!'
+      description: "with complex password",
+      password: "C0mpl3x@P@ssw0rd!",
     },
     {
-      description: 'with single character password',
-      password: 'a'
-    }
-  ])('should create form data correctly $description', ({ password }) => {
+      description: "with single character password",
+      password: "a",
+    },
+  ])("should create form data correctly $description", ({ password }) => {
     renderHook(() => useRemovePasswordOperation());
 
     const callArgs = getToolConfig();
     const buildFormData = callArgs.buildFormData;
 
     const testParameters: RemovePasswordParameters = {
-      password
+      password,
     };
 
-    const testFile = new File(['test content'], 'test.pdf', { type: 'application/pdf' });
+    const testFile = new File(["test content"], "test.pdf", { type: "application/pdf" });
     const formData = buildFormData(testParameters, testFile as any);
 
     // Verify the form data contains the file
-    expect(formData.get('fileInput')).toBe(testFile);
+    expect(formData.get("fileInput")).toBe(testFile);
 
     // Verify password parameter
-    expect(formData.get('password')).toBe(password);
+    expect(formData.get("password")).toBe(password);
   });
 
-  test('should use correct translation for error messages', () => {
+  test("should use correct translation for error messages", () => {
     renderHook(() => useRemovePasswordOperation());
 
     expect(mockT).toHaveBeenCalledWith(
-      'removePassword.error.failed',
-      'An error occurred while removing the password from the PDF.'
+      "removePassword.error.failed",
+      "An error occurred while removing the password from the PDF.",
     );
   });
 
   test.each([
-    { property: 'toolType' as const, expectedValue: ToolType.singleFile },
-    { property: 'endpoint' as const, expectedValue: '/api/v1/security/remove-password' },
-    { property: 'operationType' as const, expectedValue: 'removePassword' }
-  ])('should configure $property correctly', ({ property, expectedValue }) => {
+    { property: "toolType" as const, expectedValue: ToolType.singleFile },
+    { property: "endpoint" as const, expectedValue: "/api/v1/security/remove-password" },
+    { property: "operationType" as const, expectedValue: "removePassword" },
+  ])("should configure $property correctly", ({ property, expectedValue }) => {
     renderHook(() => useRemovePasswordOperation());
 
     const callArgs = getToolConfig();
diff --git a/frontend/src/core/hooks/tools/removePassword/useRemovePasswordOperation.ts b/frontend/src/core/hooks/tools/removePassword/useRemovePasswordOperation.ts
index 4f31e8078f..82fcdf294f 100644
--- a/frontend/src/core/hooks/tools/removePassword/useRemovePasswordOperation.ts
+++ b/frontend/src/core/hooks/tools/removePassword/useRemovePasswordOperation.ts
@@ -1,8 +1,8 @@
-import { useTranslation } from 'react-i18next';
-import { ToolType, useToolOperation } from '@app/hooks/tools/shared/useToolOperation';
-import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
-import { RemovePasswordParameters, defaultParameters } from '@app/hooks/tools/removePassword/useRemovePasswordParameters';
-import { buildRemovePasswordFormData } from '@app/hooks/tools/removePassword/buildRemovePasswordFormData';
+import { useTranslation } from "react-i18next";
+import { ToolType, useToolOperation } from "@app/hooks/tools/shared/useToolOperation";
+import { createStandardErrorHandler } from "@app/utils/toolErrorHandler";
+import { RemovePasswordParameters, defaultParameters } from "@app/hooks/tools/removePassword/useRemovePasswordParameters";
+import { buildRemovePasswordFormData } from "@app/hooks/tools/removePassword/buildRemovePasswordFormData";
 
 // Re-export for backwards compatibility with any other imports
 export { buildRemovePasswordFormData };
@@ -11,8 +11,8 @@ export { buildRemovePasswordFormData };
 export const removePasswordOperationConfig = {
   toolType: ToolType.singleFile,
   buildFormData: buildRemovePasswordFormData,
-  operationType: 'removePassword',
-  endpoint: '/api/v1/security/remove-password',
+  operationType: "removePassword",
+  endpoint: "/api/v1/security/remove-password",
   defaultParameters,
 } as const;
 
@@ -21,6 +21,8 @@ export const useRemovePasswordOperation = () => {
 
   return useToolOperation<RemovePasswordParameters>({
     ...removePasswordOperationConfig,
-    getErrorMessage: createStandardErrorHandler(t('removePassword.error.failed', 'An error occurred while removing the password from the PDF.'))
+    getErrorMessage: createStandardErrorHandler(
+      t("removePassword.error.failed", "An error occurred while removing the password from the PDF."),
+    ),
   });
 };
diff --git a/frontend/src/core/hooks/tools/removePassword/useRemovePasswordParameters.test.ts b/frontend/src/core/hooks/tools/removePassword/useRemovePasswordParameters.test.ts
index d3d2a4c5cb..ca08eb6769 100644
--- a/frontend/src/core/hooks/tools/removePassword/useRemovePasswordParameters.test.ts
+++ b/frontend/src/core/hooks/tools/removePassword/useRemovePasswordParameters.test.ts
@@ -1,33 +1,33 @@
-import { describe, expect, test } from 'vitest';
-import { renderHook, act } from '@testing-library/react';
-import { useRemovePasswordParameters, defaultParameters } from '@app/hooks/tools/removePassword/useRemovePasswordParameters';
+import { describe, expect, test } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { useRemovePasswordParameters, defaultParameters } from "@app/hooks/tools/removePassword/useRemovePasswordParameters";
 
-describe('useRemovePasswordParameters', () => {
-  test('should initialize with default parameters', () => {
+describe("useRemovePasswordParameters", () => {
+  test("should initialize with default parameters", () => {
     const { result } = renderHook(() => useRemovePasswordParameters());
 
     expect(result.current.parameters).toStrictEqual(defaultParameters);
   });
 
-  test('should update password parameter', () => {
+  test("should update password parameter", () => {
     const { result } = renderHook(() => useRemovePasswordParameters());
 
     act(() => {
-      result.current.updateParameter('password', 'test-password');
+      result.current.updateParameter("password", "test-password");
     });
 
-    expect(result.current.parameters.password).toBe('test-password');
+    expect(result.current.parameters.password).toBe("test-password");
   });
 
-  test('should reset parameters to defaults', () => {
+  test("should reset parameters to defaults", () => {
     const { result } = renderHook(() => useRemovePasswordParameters());
 
     // First, change the password
     act(() => {
-      result.current.updateParameter('password', 'test-password');
+      result.current.updateParameter("password", "test-password");
     });
 
-    expect(result.current.parameters.password).toBe('test-password');
+    expect(result.current.parameters.password).toBe("test-password");
 
     // Then reset
     act(() => {
@@ -37,43 +37,43 @@ describe('useRemovePasswordParameters', () => {
     expect(result.current.parameters).toStrictEqual(defaultParameters);
   });
 
-  test('should return correct endpoint name', () => {
+  test("should return correct endpoint name", () => {
     const { result } = renderHook(() => useRemovePasswordParameters());
 
-    expect(result.current.getEndpointName()).toBe('remove-password');
+    expect(result.current.getEndpointName()).toBe("remove-password");
   });
 
   test.each([
     {
-      description: 'with valid password',
-      password: 'valid-password',
-      expectedValid: true
+      description: "with valid password",
+      password: "valid-password",
+      expectedValid: true,
     },
     {
-      description: 'with empty password',
-      password: '',
-      expectedValid: false
+      description: "with empty password",
+      password: "",
+      expectedValid: false,
     },
     {
-      description: 'with whitespace only password',
-      password: '   \t   ',
-      expectedValid: true
+      description: "with whitespace only password",
+      password: "   \t   ",
+      expectedValid: true,
     },
     {
-      description: 'with password containing special characters',
-      password: 'p@ssw0rd!',
-      expectedValid: true
+      description: "with password containing special characters",
+      password: "p@ssw0rd!",
+      expectedValid: true,
     },
     {
-      description: 'with single character password',
-      password: 'a',
-      expectedValid: true
-    }
-  ])('should validate parameters correctly $description', ({ password, expectedValid }) => {
+      description: "with single character password",
+      password: "a",
+      expectedValid: true,
+    },
+  ])("should validate parameters correctly $description", ({ password, expectedValid }) => {
     const { result } = renderHook(() => useRemovePasswordParameters());
 
     act(() => {
-      result.current.updateParameter('password', password);
+      result.current.updateParameter("password", password);
     });
 
     expect(result.current.validateParameters()).toBe(expectedValid);
diff --git a/frontend/src/core/hooks/tools/removePassword/useRemovePasswordParameters.ts b/frontend/src/core/hooks/tools/removePassword/useRemovePasswordParameters.ts
index 9c2ad4981a..0eb886b9d8 100644
--- a/frontend/src/core/hooks/tools/removePassword/useRemovePasswordParameters.ts
+++ b/frontend/src/core/hooks/tools/removePassword/useRemovePasswordParameters.ts
@@ -1,5 +1,5 @@
-import { BaseParameters } from '@app/types/parameters';
-import { useBaseParameters, BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
+import { BaseParameters } from "@app/types/parameters";
+import { useBaseParameters, BaseParametersHook } from "@app/hooks/tools/shared/useBaseParameters";
 
 export interface RemovePasswordParameters extends BaseParameters {
   password: string;
@@ -8,15 +8,15 @@ export interface RemovePasswordParameters extends BaseParameters {
 export type RemovePasswordParametersHook = BaseParametersHook<RemovePasswordParameters>;
 
 export const defaultParameters: RemovePasswordParameters = {
-  password: '',
+  password: "",
 };
 
 export const useRemovePasswordParameters = (): RemovePasswordParametersHook => {
   return useBaseParameters({
     defaultParameters,
-    endpointName: 'remove-password',
+    endpointName: "remove-password",
     validateFn: (params) => {
-      return params.password !== '';
+      return params.password !== "";
     },
   });
 };
diff --git a/frontend/src/core/hooks/tools/reorganizePages/useReorganizePagesOperation.ts b/frontend/src/core/hooks/tools/reorganizePages/useReorganizePagesOperation.ts
index de18207fbd..7dec826f38 100644
--- a/frontend/src/core/hooks/tools/reorganizePages/useReorganizePagesOperation.ts
+++ b/frontend/src/core/hooks/tools/reorganizePages/useReorganizePagesOperation.ts
@@ -1,17 +1,17 @@
-import { useTranslation } from 'react-i18next';
-import { ToolOperationConfig, ToolType, useToolOperation } from '@app/hooks/tools/shared/useToolOperation';
-import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
-import { ReorganizePagesParameters } from '@app/hooks/tools/reorganizePages/useReorganizePagesParameters';
+import { useTranslation } from "react-i18next";
+import { ToolOperationConfig, ToolType, useToolOperation } from "@app/hooks/tools/shared/useToolOperation";
+import { createStandardErrorHandler } from "@app/utils/toolErrorHandler";
+import { ReorganizePagesParameters } from "@app/hooks/tools/reorganizePages/useReorganizePagesParameters";
 
 const buildFormData = (parameters: ReorganizePagesParameters, file: File): FormData => {
   const formData = new FormData();
-  formData.append('fileInput', file);
+  formData.append("fileInput", file);
   if (parameters.customMode) {
-    formData.append('customMode', parameters.customMode);
+    formData.append("customMode", parameters.customMode);
   }
   if (parameters.pageNumbers) {
-    const cleaned = parameters.pageNumbers.replace(/\s+/g, '');
-    formData.append('pageNumbers', cleaned);
+    const cleaned = parameters.pageNumbers.replace(/\s+/g, "");
+    formData.append("pageNumbers", cleaned);
   }
   return formData;
 };
@@ -19,18 +19,14 @@ const buildFormData = (parameters: ReorganizePagesParameters, file: File): FormD
 export const reorganizePagesOperationConfig: ToolOperationConfig<ReorganizePagesParameters> = {
   toolType: ToolType.singleFile,
   buildFormData,
-  operationType: 'reorganizePages',
-  endpoint: '/api/v1/general/rearrange-pages',
+  operationType: "reorganizePages",
+  endpoint: "/api/v1/general/rearrange-pages",
 };
 
 export const useReorganizePagesOperation = () => {
   const { t } = useTranslation();
   return useToolOperation<ReorganizePagesParameters>({
     ...reorganizePagesOperationConfig,
-    getErrorMessage: createStandardErrorHandler(
-      t('reorganizePages.error.failed', 'Failed to reorganize pages')
-    )
+    getErrorMessage: createStandardErrorHandler(t("reorganizePages.error.failed", "Failed to reorganize pages")),
   });
 };
-
-
diff --git a/frontend/src/core/hooks/tools/reorganizePages/useReorganizePagesParameters.ts b/frontend/src/core/hooks/tools/reorganizePages/useReorganizePagesParameters.ts
index 799ed26df1..408bc1287e 100644
--- a/frontend/src/core/hooks/tools/reorganizePages/useReorganizePagesParameters.ts
+++ b/frontend/src/core/hooks/tools/reorganizePages/useReorganizePagesParameters.ts
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState } from "react";
 
 export interface ReorganizePagesParameters {
   customMode: string; // empty string means custom order using pageNumbers
@@ -6,25 +6,22 @@ export interface ReorganizePagesParameters {
 }
 
 export const defaultReorganizePagesParameters: ReorganizePagesParameters = {
-  customMode: '',
-  pageNumbers: '',
+  customMode: "",
+  pageNumbers: "",
 };
 
 export const useReorganizePagesParameters = () => {
   const [parameters, setParameters] = useState<ReorganizePagesParameters>(defaultReorganizePagesParameters);
 
-  const updateParameter = <K extends keyof ReorganizePagesParameters>(
-    key: K,
-    value: ReorganizePagesParameters[K]
-  ) => {
-    setParameters(prev => ({ ...prev, [key]: value }));
+  const updateParameter = <K extends keyof ReorganizePagesParameters>(key: K, value: ReorganizePagesParameters[K]) => {
+    setParameters((prev) => ({ ...prev, [key]: value }));
   };
 
   const resetParameters = () => setParameters(defaultReorganizePagesParameters);
 
   // If customMode is '' (custom) or 'DUPLICATE', a page order is required; otherwise it's optional/ignored
   const validateParameters = (): boolean => {
-    const requiresOrder = parameters.customMode === '' || parameters.customMode === 'DUPLICATE';
+    const requiresOrder = parameters.customMode === "" || parameters.customMode === "DUPLICATE";
     return requiresOrder ? parameters.pageNumbers.trim().length > 0 : true;
   };
 
@@ -35,5 +32,3 @@ export const useReorganizePagesParameters = () => {
     validateParameters,
   };
 };
-
-
diff --git a/frontend/src/core/hooks/tools/repair/useRepairOperation.ts b/frontend/src/core/hooks/tools/repair/useRepairOperation.ts
index 59f8c9eeae..9f8250fbb1 100644
--- a/frontend/src/core/hooks/tools/repair/useRepairOperation.ts
+++ b/frontend/src/core/hooks/tools/repair/useRepairOperation.ts
@@ -1,7 +1,7 @@
-import { useTranslation } from 'react-i18next';
-import { ToolType, useToolOperation } from '@app/hooks/tools/shared/useToolOperation';
-import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
-import { RepairParameters, defaultParameters } from '@app/hooks/tools/repair/useRepairParameters';
+import { useTranslation } from "react-i18next";
+import { ToolType, useToolOperation } from "@app/hooks/tools/shared/useToolOperation";
+import { createStandardErrorHandler } from "@app/utils/toolErrorHandler";
+import { RepairParameters, defaultParameters } from "@app/hooks/tools/repair/useRepairParameters";
 
 // Static function that can be used by both the hook and automation executor
 export const buildRepairFormData = (_parameters: RepairParameters, file: File): FormData => {
@@ -14,8 +14,8 @@ export const buildRepairFormData = (_parameters: RepairParameters, file: File):
 export const repairOperationConfig = {
   toolType: ToolType.singleFile,
   buildFormData: buildRepairFormData,
-  operationType: 'repair',
-  endpoint: '/api/v1/misc/repair',
+  operationType: "repair",
+  endpoint: "/api/v1/misc/repair",
   defaultParameters,
 } as const;
 
@@ -24,6 +24,6 @@ export const useRepairOperation = () => {
 
   return useToolOperation<RepairParameters>({
     ...repairOperationConfig,
-    getErrorMessage: createStandardErrorHandler(t('repair.error.failed', 'An error occurred while repairing the PDF.'))
+    getErrorMessage: createStandardErrorHandler(t("repair.error.failed", "An error occurred while repairing the PDF.")),
   });
 };
diff --git a/frontend/src/core/hooks/tools/repair/useRepairParameters.ts b/frontend/src/core/hooks/tools/repair/useRepairParameters.ts
index 9b613d764b..61685c5f66 100644
--- a/frontend/src/core/hooks/tools/repair/useRepairParameters.ts
+++ b/frontend/src/core/hooks/tools/repair/useRepairParameters.ts
@@ -1,5 +1,5 @@
-import { BaseParameters } from '@app/types/parameters';
-import { useBaseParameters, BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
+import { BaseParameters } from "@app/types/parameters";
+import { useBaseParameters, BaseParametersHook } from "@app/hooks/tools/shared/useBaseParameters";
 
 export interface RepairParameters extends BaseParameters {
   // Extends BaseParameters - ready for future parameter additions if needed
@@ -14,7 +14,7 @@ export type RepairParametersHook = BaseParametersHook<RepairParameters>;
 export const useRepairParameters = (): RepairParametersHook => {
   return useBaseParameters({
     defaultParameters,
-    endpointName: 'repair',
+    endpointName: "repair",
     // validateFn: optional custom validation if needed in future
   });
-};
\ No newline at end of file
+};
diff --git a/frontend/src/core/hooks/tools/replaceColor/useReplaceColorOperation.ts b/frontend/src/core/hooks/tools/replaceColor/useReplaceColorOperation.ts
index 87713a5b4b..0917e00a36 100644
--- a/frontend/src/core/hooks/tools/replaceColor/useReplaceColorOperation.ts
+++ b/frontend/src/core/hooks/tools/replaceColor/useReplaceColorOperation.ts
@@ -1,19 +1,19 @@
-import { useTranslation } from 'react-i18next';
-import { ToolType, useToolOperation } from '@app/hooks/tools/shared/useToolOperation';
-import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
-import { ReplaceColorParameters, defaultParameters } from '@app/hooks/tools/replaceColor/useReplaceColorParameters';
+import { useTranslation } from "react-i18next";
+import { ToolType, useToolOperation } from "@app/hooks/tools/shared/useToolOperation";
+import { createStandardErrorHandler } from "@app/utils/toolErrorHandler";
+import { ReplaceColorParameters, defaultParameters } from "@app/hooks/tools/replaceColor/useReplaceColorParameters";
 
 export const buildReplaceColorFormData = (parameters: ReplaceColorParameters, file: File): FormData => {
   const formData = new FormData();
-  formData.append('fileInput', file);
+  formData.append("fileInput", file);
 
-  formData.append('replaceAndInvertOption', parameters.replaceAndInvertOption);
+  formData.append("replaceAndInvertOption", parameters.replaceAndInvertOption);
 
-  if (parameters.replaceAndInvertOption === 'HIGH_CONTRAST_COLOR') {
-    formData.append('highContrastColorCombination', parameters.highContrastColorCombination);
-  } else if (parameters.replaceAndInvertOption === 'CUSTOM_COLOR') {
-    formData.append('textColor', parameters.textColor);
-    formData.append('backGroundColor', parameters.backGroundColor);
+  if (parameters.replaceAndInvertOption === "HIGH_CONTRAST_COLOR") {
+    formData.append("highContrastColorCombination", parameters.highContrastColorCombination);
+  } else if (parameters.replaceAndInvertOption === "CUSTOM_COLOR") {
+    formData.append("textColor", parameters.textColor);
+    formData.append("backGroundColor", parameters.backGroundColor);
   }
 
   return formData;
@@ -22,8 +22,8 @@ export const buildReplaceColorFormData = (parameters: ReplaceColorParameters, fi
 export const replaceColorOperationConfig = {
   toolType: ToolType.singleFile,
   buildFormData: buildReplaceColorFormData,
-  operationType: 'replaceColor',
-  endpoint: '/api/v1/misc/replace-invert-pdf',
+  operationType: "replaceColor",
+  endpoint: "/api/v1/misc/replace-invert-pdf",
   multiFileEndpoint: false,
   defaultParameters,
 } as const;
@@ -33,6 +33,8 @@ export const useReplaceColorOperation = () => {
 
   return useToolOperation<ReplaceColorParameters>({
     ...replaceColorOperationConfig,
-    getErrorMessage: createStandardErrorHandler(t('replaceColor.error.failed', 'An error occurred while processing the colour replacement.'))
+    getErrorMessage: createStandardErrorHandler(
+      t("replaceColor.error.failed", "An error occurred while processing the colour replacement."),
+    ),
   });
 };
diff --git a/frontend/src/core/hooks/tools/replaceColor/useReplaceColorParameters.ts b/frontend/src/core/hooks/tools/replaceColor/useReplaceColorParameters.ts
index a0a0099c4c..24a8d1271b 100644
--- a/frontend/src/core/hooks/tools/replaceColor/useReplaceColorParameters.ts
+++ b/frontend/src/core/hooks/tools/replaceColor/useReplaceColorParameters.ts
@@ -1,18 +1,18 @@
-import { BaseParameters } from '@app/types/parameters';
-import { useBaseParameters, BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
+import { BaseParameters } from "@app/types/parameters";
+import { useBaseParameters, BaseParametersHook } from "@app/hooks/tools/shared/useBaseParameters";
 
 export interface ReplaceColorParameters extends BaseParameters {
-  replaceAndInvertOption: 'HIGH_CONTRAST_COLOR' | 'CUSTOM_COLOR' | 'FULL_INVERSION' | 'COLOR_SPACE_CONVERSION';
-  highContrastColorCombination: 'WHITE_TEXT_ON_BLACK' | 'BLACK_TEXT_ON_WHITE' | 'YELLOW_TEXT_ON_BLACK' | 'GREEN_TEXT_ON_BLACK';
+  replaceAndInvertOption: "HIGH_CONTRAST_COLOR" | "CUSTOM_COLOR" | "FULL_INVERSION" | "COLOR_SPACE_CONVERSION";
+  highContrastColorCombination: "WHITE_TEXT_ON_BLACK" | "BLACK_TEXT_ON_WHITE" | "YELLOW_TEXT_ON_BLACK" | "GREEN_TEXT_ON_BLACK";
   textColor: string;
   backGroundColor: string;
 }
 
 export const defaultParameters: ReplaceColorParameters = {
-  replaceAndInvertOption: 'HIGH_CONTRAST_COLOR',
-  highContrastColorCombination: 'WHITE_TEXT_ON_BLACK',
-  textColor: '#000000',
-  backGroundColor: '#ffffff',
+  replaceAndInvertOption: "HIGH_CONTRAST_COLOR",
+  highContrastColorCombination: "WHITE_TEXT_ON_BLACK",
+  textColor: "#000000",
+  backGroundColor: "#ffffff",
 };
 
 export type ReplaceColorParametersHook = BaseParametersHook<ReplaceColorParameters>;
@@ -20,10 +20,10 @@ export type ReplaceColorParametersHook = BaseParametersHook<ReplaceColorParamete
 export const useReplaceColorParameters = (): ReplaceColorParametersHook => {
   return useBaseParameters({
     defaultParameters,
-    endpointName: 'replace-invert-pdf',
+    endpointName: "replace-invert-pdf",
     validateFn: () => {
       // All parameters are always valid as they have defaults
       return true;
     },
   });
-};
\ No newline at end of file
+};
diff --git a/frontend/src/core/hooks/tools/rotate/useRotateOperation.test.ts b/frontend/src/core/hooks/tools/rotate/useRotateOperation.test.ts
index 93dd6a5604..2e46efc304 100644
--- a/frontend/src/core/hooks/tools/rotate/useRotateOperation.test.ts
+++ b/frontend/src/core/hooks/tools/rotate/useRotateOperation.test.ts
@@ -1,32 +1,37 @@
-import { describe, expect, test, vi, beforeEach } from 'vitest';
-import { renderHook } from '@testing-library/react';
-import { useRotateOperation } from '@app/hooks/tools/rotate/useRotateOperation';
-import type { RotateParameters } from '@app/hooks/tools/rotate/useRotateParameters';
+import { describe, expect, test, vi, beforeEach } from "vitest";
+import { renderHook } from "@testing-library/react";
+import { useRotateOperation } from "@app/hooks/tools/rotate/useRotateOperation";
+import type { RotateParameters } from "@app/hooks/tools/rotate/useRotateParameters";
 
 // Mock the useToolOperation hook
-vi.mock('../shared/useToolOperation', async () => {
-  const actual = await vi.importActual('../shared/useToolOperation');
+vi.mock("../shared/useToolOperation", async () => {
+  const actual = await vi.importActual("../shared/useToolOperation");
   return {
     ...actual,
-    useToolOperation: vi.fn()
+    useToolOperation: vi.fn(),
   };
 });
 
 // Mock the translation hook
 const mockT = vi.fn((key: string) => `translated-${key}`);
-vi.mock('react-i18next', () => ({
-  useTranslation: () => ({ t: mockT })
+vi.mock("react-i18next", () => ({
+  useTranslation: () => ({ t: mockT }),
 }));
 
 // Mock the error handler
-vi.mock('../../../utils/toolErrorHandler', () => ({
-  createStandardErrorHandler: vi.fn(() => 'error-handler-function')
+vi.mock("../../../utils/toolErrorHandler", () => ({
+  createStandardErrorHandler: vi.fn(() => "error-handler-function"),
 }));
 
 // Import the mocked function
-import { SingleFileToolOperationConfig, ToolOperationHook, ToolType, useToolOperation } from '@app/hooks/tools/shared/useToolOperation';
+import {
+  SingleFileToolOperationConfig,
+  ToolOperationHook,
+  ToolType,
+  useToolOperation,
+} from "@app/hooks/tools/shared/useToolOperation";
 
-describe('useRotateOperation', () => {
+describe("useRotateOperation", () => {
   const mockUseToolOperation = vi.mocked(useToolOperation);
 
   const getToolConfig = () => mockUseToolOperation.mock.calls[0][0] as SingleFileToolOperationConfig<RotateParameters>;
@@ -35,10 +40,10 @@ describe('useRotateOperation', () => {
     files: [],
     thumbnails: [],
     downloadUrl: null,
-    downloadFilename: '',
+    downloadFilename: "",
     isLoading: false,
     errorMessage: null,
-    status: '',
+    status: "",
     isGeneratingThumbnails: false,
     progress: null,
     executeOperation: vi.fn(),
@@ -63,36 +68,36 @@ describe('useRotateOperation', () => {
     { angle: -180, expectedNormalized: 180 },
     { angle: -270, expectedNormalized: 90 },
     { angle: 450, expectedNormalized: 90 },
-  ])('should create form data correctly with angle $angle (normalized to $expectedNormalized)', ({ angle, expectedNormalized }) => {
+  ])(
+    "should create form data correctly with angle $angle (normalized to $expectedNormalized)",
+    ({ angle, expectedNormalized }) => {
+      renderHook(() => useRotateOperation());
+
+      const callArgs = getToolConfig();
+
+      const testParameters: RotateParameters = { angle };
+      const testFile = new File(["test content"], "test.pdf", { type: "application/pdf" });
+      const formData = callArgs.buildFormData(testParameters, testFile);
+
+      // Verify the form data contains the file
+      expect(formData.get("fileInput")).toBe(testFile);
+
+      // Verify angle parameter is normalized for backend
+      expect(formData.get("angle")).toBe(expectedNormalized.toString());
+    },
+  );
+
+  test("should use correct translation for error messages", () => {
     renderHook(() => useRotateOperation());
 
-    const callArgs = getToolConfig();
-
-    const testParameters: RotateParameters = { angle };
-    const testFile = new File(['test content'], 'test.pdf', { type: 'application/pdf' });
-    const formData = callArgs.buildFormData(testParameters, testFile);
-
-    // Verify the form data contains the file
-    expect(formData.get('fileInput')).toBe(testFile);
-
-    // Verify angle parameter is normalized for backend
-    expect(formData.get('angle')).toBe(expectedNormalized.toString());
-  });
-
-  test('should use correct translation for error messages', () => {
-    renderHook(() => useRotateOperation());
-
-    expect(mockT).toHaveBeenCalledWith(
-      'rotate.error.failed',
-      'An error occurred while rotating the PDF.'
-    );
+    expect(mockT).toHaveBeenCalledWith("rotate.error.failed", "An error occurred while rotating the PDF.");
   });
 
   test.each([
-    { property: 'toolType' as const, expectedValue: ToolType.singleFile },
-    { property: 'endpoint' as const, expectedValue: '/api/v1/general/rotate-pdf' },
-    { property: 'operationType' as const, expectedValue: 'rotate' }
-  ])('should configure $property correctly', ({ property, expectedValue }) => {
+    { property: "toolType" as const, expectedValue: ToolType.singleFile },
+    { property: "endpoint" as const, expectedValue: "/api/v1/general/rotate-pdf" },
+    { property: "operationType" as const, expectedValue: "rotate" },
+  ])("should configure $property correctly", ({ property, expectedValue }) => {
     renderHook(() => useRotateOperation());
 
     const callArgs = getToolConfig();
diff --git a/frontend/src/core/hooks/tools/rotate/useRotateOperation.ts b/frontend/src/core/hooks/tools/rotate/useRotateOperation.ts
index c7b1e1a5e7..fe29e05c59 100644
--- a/frontend/src/core/hooks/tools/rotate/useRotateOperation.ts
+++ b/frontend/src/core/hooks/tools/rotate/useRotateOperation.ts
@@ -1,7 +1,7 @@
-import { useTranslation } from 'react-i18next';
-import { useToolOperation, ToolType } from '@app/hooks/tools/shared/useToolOperation';
-import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
-import { RotateParameters, defaultParameters, normalizeAngle } from '@app/hooks/tools/rotate/useRotateParameters';
+import { useTranslation } from "react-i18next";
+import { useToolOperation, ToolType } from "@app/hooks/tools/shared/useToolOperation";
+import { createStandardErrorHandler } from "@app/utils/toolErrorHandler";
+import { RotateParameters, defaultParameters, normalizeAngle } from "@app/hooks/tools/rotate/useRotateParameters";
 
 // Static configuration that can be used by both the hook and automation executor
 export const buildRotateFormData = (parameters: RotateParameters, file: File): FormData => {
@@ -16,8 +16,8 @@ export const buildRotateFormData = (parameters: RotateParameters, file: File): F
 export const rotateOperationConfig = {
   toolType: ToolType.singleFile,
   buildFormData: buildRotateFormData,
-  operationType: 'rotate',
-  endpoint: '/api/v1/general/rotate-pdf',
+  operationType: "rotate",
+  endpoint: "/api/v1/general/rotate-pdf",
   defaultParameters,
 } as const;
 
@@ -26,6 +26,6 @@ export const useRotateOperation = () => {
 
   return useToolOperation<RotateParameters>({
     ...rotateOperationConfig,
-    getErrorMessage: createStandardErrorHandler(t('rotate.error.failed', 'An error occurred while rotating the PDF.'))
+    getErrorMessage: createStandardErrorHandler(t("rotate.error.failed", "An error occurred while rotating the PDF.")),
   });
 };
diff --git a/frontend/src/core/hooks/tools/rotate/useRotateParameters.test.ts b/frontend/src/core/hooks/tools/rotate/useRotateParameters.test.ts
index 1c9233e9a5..267493d6aa 100644
--- a/frontend/src/core/hooks/tools/rotate/useRotateParameters.test.ts
+++ b/frontend/src/core/hooks/tools/rotate/useRotateParameters.test.ts
@@ -1,9 +1,9 @@
-import { describe, expect, test } from 'vitest';
-import { renderHook, act } from '@testing-library/react';
-import { useRotateParameters, defaultParameters, normalizeAngle } from '@app/hooks/tools/rotate/useRotateParameters';
+import { describe, expect, test } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { useRotateParameters, defaultParameters, normalizeAngle } from "@app/hooks/tools/rotate/useRotateParameters";
 
-describe('useRotateParameters', () => {
-  test('should initialize with default parameters', () => {
+describe("useRotateParameters", () => {
+  test("should initialize with default parameters", () => {
     const { result } = renderHook(() => useRotateParameters());
 
     expect(result.current.parameters).toEqual(defaultParameters);
@@ -11,7 +11,7 @@ describe('useRotateParameters', () => {
     expect(result.current.hasRotation).toBe(false);
   });
 
-  test('should validate parameters correctly', () => {
+  test("should validate parameters correctly", () => {
     const { result } = renderHook(() => useRotateParameters());
 
     // Default should be valid
@@ -19,18 +19,18 @@ describe('useRotateParameters', () => {
 
     // Set invalid angle
     act(() => {
-      result.current.updateParameter('angle', 45);
+      result.current.updateParameter("angle", 45);
     });
     expect(result.current.validateParameters()).toBe(false);
 
     // Set valid angle
     act(() => {
-      result.current.updateParameter('angle', 90);
+      result.current.updateParameter("angle", 90);
     });
     expect(result.current.validateParameters()).toBe(true);
   });
 
-  test('should rotate clockwise correctly', () => {
+  test("should rotate clockwise correctly", () => {
     const { result } = renderHook(() => useRotateParameters());
 
     act(() => {
@@ -57,7 +57,7 @@ describe('useRotateParameters', () => {
     expect(result.current.hasRotation).toBe(false);
   });
 
-  test('should rotate anticlockwise correctly', () => {
+  test("should rotate anticlockwise correctly", () => {
     const { result } = renderHook(() => useRotateParameters());
 
     act(() => {
@@ -84,7 +84,7 @@ describe('useRotateParameters', () => {
     expect(result.current.hasRotation).toBe(false);
   });
 
-  test('should normalize angles correctly', () => {
+  test("should normalize angles correctly", () => {
     const { result } = renderHook(() => useRotateParameters());
 
     expect(result.current.normalizeAngle(360)).toBe(0);
@@ -93,7 +93,7 @@ describe('useRotateParameters', () => {
     expect(result.current.normalizeAngle(-180)).toBe(180);
   });
 
-  test('should reset parameters correctly', () => {
+  test("should reset parameters correctly", () => {
     const { result } = renderHook(() => useRotateParameters());
 
     // Set some rotation
@@ -115,29 +115,29 @@ describe('useRotateParameters', () => {
     expect(result.current.hasRotation).toBe(false);
   });
 
-  test('should update parameters', () => {
+  test("should update parameters", () => {
     const { result } = renderHook(() => useRotateParameters());
 
     act(() => {
-      result.current.updateParameter('angle', 450);
+      result.current.updateParameter("angle", 450);
     });
     expect(result.current.parameters.angle).toBe(450);
     expect(normalizeAngle(result.current.parameters.angle)).toBe(90);
 
     act(() => {
-      result.current.updateParameter('angle', -90);
+      result.current.updateParameter("angle", -90);
     });
     expect(result.current.parameters.angle).toBe(-90);
     expect(normalizeAngle(result.current.parameters.angle)).toBe(270);
   });
 
-  test('should return correct endpoint name', () => {
+  test("should return correct endpoint name", () => {
     const { result } = renderHook(() => useRotateParameters());
 
-    expect(result.current.getEndpointName()).toBe('rotate-pdf');
+    expect(result.current.getEndpointName()).toBe("rotate-pdf");
   });
 
-  test('should detect rotation state correctly', () => {
+  test("should detect rotation state correctly", () => {
     const { result } = renderHook(() => useRotateParameters());
 
     // Initially no rotation
diff --git a/frontend/src/core/hooks/tools/rotate/useRotateParameters.ts b/frontend/src/core/hooks/tools/rotate/useRotateParameters.ts
index f69f98caf7..68f3afb8c5 100644
--- a/frontend/src/core/hooks/tools/rotate/useRotateParameters.ts
+++ b/frontend/src/core/hooks/tools/rotate/useRotateParameters.ts
@@ -1,6 +1,6 @@
-import { BaseParameters } from '@app/types/parameters';
-import { useBaseParameters, BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
-import { useMemo, useCallback } from 'react';
+import { BaseParameters } from "@app/types/parameters";
+import { useBaseParameters, BaseParametersHook } from "@app/hooks/tools/shared/useBaseParameters";
+import { useMemo, useCallback } from "react";
 
 // Normalize angle to number between 0 and 359
 export const normalizeAngle = (angle: number): number => {
@@ -25,7 +25,7 @@ export type RotateParametersHook = BaseParametersHook<RotateParameters> & {
 export const useRotateParameters = (): RotateParametersHook => {
   const baseHook = useBaseParameters({
     defaultParameters,
-    endpointName: 'rotate-pdf',
+    endpointName: "rotate-pdf",
     validateFn: (params) => {
       // Angle must be a multiple of 90
       return params.angle % 90 === 0;
@@ -34,12 +34,12 @@ export const useRotateParameters = (): RotateParametersHook => {
 
   // Rotate clockwise by 90 degrees
   const rotateClockwise = useCallback(() => {
-    baseHook.updateParameter('angle', baseHook.parameters.angle + 90);
+    baseHook.updateParameter("angle", baseHook.parameters.angle + 90);
   }, [baseHook]);
 
   // Rotate anticlockwise by 90 degrees
   const rotateAnticlockwise = useCallback(() => {
-    baseHook.updateParameter('angle', baseHook.parameters.angle - 90);
+    baseHook.updateParameter("angle", baseHook.parameters.angle - 90);
   }, [baseHook]);
 
   // Check if rotation will actually change the document
@@ -49,12 +49,12 @@ export const useRotateParameters = (): RotateParametersHook => {
   }, [baseHook.parameters.angle, normalizeAngle]);
 
   // Override updateParameter - no longer normalize angles here
-  const updateParameter = useCallback(<K extends keyof RotateParameters>(
-    parameter: K,
-    value: RotateParameters[K]
-  ) => {
-    baseHook.updateParameter(parameter, value);
-  }, [baseHook]);
+  const updateParameter = useCallback(
+    <K extends keyof RotateParameters>(parameter: K, value: RotateParameters[K]) => {
+      baseHook.updateParameter(parameter, value);
+    },
+    [baseHook],
+  );
 
   return {
     ...baseHook,
diff --git a/frontend/src/core/hooks/tools/sanitize/useSanitizeOperation.ts b/frontend/src/core/hooks/tools/sanitize/useSanitizeOperation.ts
index b4de356016..6516708743 100644
--- a/frontend/src/core/hooks/tools/sanitize/useSanitizeOperation.ts
+++ b/frontend/src/core/hooks/tools/sanitize/useSanitizeOperation.ts
@@ -1,20 +1,20 @@
-import { useTranslation } from 'react-i18next';
-import { ToolType, useToolOperation } from '@app/hooks/tools/shared/useToolOperation';
-import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
-import { SanitizeParameters, defaultParameters } from '@app/hooks/tools/sanitize/useSanitizeParameters';
+import { useTranslation } from "react-i18next";
+import { ToolType, useToolOperation } from "@app/hooks/tools/shared/useToolOperation";
+import { createStandardErrorHandler } from "@app/utils/toolErrorHandler";
+import { SanitizeParameters, defaultParameters } from "@app/hooks/tools/sanitize/useSanitizeParameters";
 
 // Static function that can be used by both the hook and automation executor
 export const buildSanitizeFormData = (parameters: SanitizeParameters, file: File): FormData => {
   const formData = new FormData();
-  formData.append('fileInput', file);
+  formData.append("fileInput", file);
 
   // Add parameters
-  formData.append('removeJavaScript', (parameters.removeJavaScript ?? false).toString());
-  formData.append('removeEmbeddedFiles', (parameters.removeEmbeddedFiles ?? false).toString());
-  formData.append('removeXMPMetadata', (parameters.removeXMPMetadata ?? false).toString());
-  formData.append('removeMetadata', (parameters.removeMetadata ?? false).toString());
-  formData.append('removeLinks', (parameters.removeLinks ?? false).toString());
-  formData.append('removeFonts', (parameters.removeFonts ?? false).toString());
+  formData.append("removeJavaScript", (parameters.removeJavaScript ?? false).toString());
+  formData.append("removeEmbeddedFiles", (parameters.removeEmbeddedFiles ?? false).toString());
+  formData.append("removeXMPMetadata", (parameters.removeXMPMetadata ?? false).toString());
+  formData.append("removeMetadata", (parameters.removeMetadata ?? false).toString());
+  formData.append("removeLinks", (parameters.removeLinks ?? false).toString());
+  formData.append("removeFonts", (parameters.removeFonts ?? false).toString());
 
   return formData;
 };
@@ -23,8 +23,8 @@ export const buildSanitizeFormData = (parameters: SanitizeParameters, file: File
 export const sanitizeOperationConfig = {
   toolType: ToolType.singleFile,
   buildFormData: buildSanitizeFormData,
-  operationType: 'sanitize',
-  endpoint: '/api/v1/security/sanitize-pdf',
+  operationType: "sanitize",
+  endpoint: "/api/v1/security/sanitize-pdf",
   multiFileEndpoint: false,
   defaultParameters,
 } as const;
@@ -34,6 +34,6 @@ export const useSanitizeOperation = () => {
 
   return useToolOperation<SanitizeParameters>({
     ...sanitizeOperationConfig,
-    getErrorMessage: createStandardErrorHandler(t('sanitize.error.failed', 'An error occurred while sanitising the PDF.'))
+    getErrorMessage: createStandardErrorHandler(t("sanitize.error.failed", "An error occurred while sanitising the PDF.")),
   });
 };
diff --git a/frontend/src/core/hooks/tools/sanitize/useSanitizeParameters.test.ts b/frontend/src/core/hooks/tools/sanitize/useSanitizeParameters.test.ts
index 60559e5487..dcd695f851 100644
--- a/frontend/src/core/hooks/tools/sanitize/useSanitizeParameters.test.ts
+++ b/frontend/src/core/hooks/tools/sanitize/useSanitizeParameters.test.ts
@@ -1,19 +1,19 @@
-import { describe, expect, test } from 'vitest';
-import { renderHook, act } from '@testing-library/react';
-import { defaultParameters, useSanitizeParameters } from '@app/hooks/tools/sanitize/useSanitizeParameters';
+import { describe, expect, test } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { defaultParameters, useSanitizeParameters } from "@app/hooks/tools/sanitize/useSanitizeParameters";
 
-describe('useSanitizeParameters', () => {
-  test('should initialize with default parameters', () => {
+describe("useSanitizeParameters", () => {
+  test("should initialize with default parameters", () => {
     const { result } = renderHook(() => useSanitizeParameters());
 
     expect(result.current.parameters).toStrictEqual(defaultParameters);
   });
 
-  test('should update individual parameters', () => {
+  test("should update individual parameters", () => {
     const { result } = renderHook(() => useSanitizeParameters());
 
     act(() => {
-      result.current.updateParameter('removeXMPMetadata', true);
+      result.current.updateParameter("removeXMPMetadata", true);
     });
 
     expect(result.current.parameters).toStrictEqual({
@@ -22,13 +22,13 @@ describe('useSanitizeParameters', () => {
     });
   });
 
-  test('should reset parameters to defaults', () => {
+  test("should reset parameters to defaults", () => {
     const { result } = renderHook(() => useSanitizeParameters());
 
     // First, change some parameters
     act(() => {
-      result.current.updateParameter('removeXMPMetadata', true);
-      result.current.updateParameter('removeJavaScript', false);
+      result.current.updateParameter("removeXMPMetadata", true);
+      result.current.updateParameter("removeJavaScript", false);
     });
 
     expect(result.current.parameters.removeXMPMetadata).toBe(true);
@@ -42,13 +42,13 @@ describe('useSanitizeParameters', () => {
     expect(result.current.parameters).toStrictEqual(defaultParameters);
   });
 
-  test('should return correct endpoint name', () => {
+  test("should return correct endpoint name", () => {
     const { result } = renderHook(() => useSanitizeParameters());
 
-    expect(result.current.getEndpointName()).toBe('sanitize-pdf');
+    expect(result.current.getEndpointName()).toBe("sanitize-pdf");
   });
 
-  test('should validate parameters correctly', () => {
+  test("should validate parameters correctly", () => {
     const { result } = renderHook(() => useSanitizeParameters());
 
     // Default state should be valid (has removeJavaScript and removeEmbeddedFiles enabled)
@@ -56,26 +56,26 @@ describe('useSanitizeParameters', () => {
 
     // Turn off all parameters - should be invalid
     act(() => {
-      result.current.updateParameter('removeJavaScript', false);
-      result.current.updateParameter('removeEmbeddedFiles', false);
+      result.current.updateParameter("removeJavaScript", false);
+      result.current.updateParameter("removeEmbeddedFiles", false);
     });
 
     expect(result.current.validateParameters()).toBe(false);
 
     // Turn on one parameter - should be valid again
     act(() => {
-      result.current.updateParameter('removeLinks', true);
+      result.current.updateParameter("removeLinks", true);
     });
 
     expect(result.current.validateParameters()).toBe(true);
   });
 
-  test('should handle all parameter types correctly', () => {
+  test("should handle all parameter types correctly", () => {
     const { result } = renderHook(() => useSanitizeParameters());
 
     const allParameters = Object.keys(defaultParameters) as (keyof typeof defaultParameters)[];
 
-    allParameters.forEach(param => {
+    allParameters.forEach((param) => {
       act(() => {
         result.current.updateParameter(param, true);
       });
diff --git a/frontend/src/core/hooks/tools/sanitize/useSanitizeParameters.ts b/frontend/src/core/hooks/tools/sanitize/useSanitizeParameters.ts
index 18978f9459..6c479a0c72 100644
--- a/frontend/src/core/hooks/tools/sanitize/useSanitizeParameters.ts
+++ b/frontend/src/core/hooks/tools/sanitize/useSanitizeParameters.ts
@@ -1,5 +1,5 @@
-import { BaseParameters } from '@app/types/parameters';
-import { useBaseParameters, BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
+import { BaseParameters } from "@app/types/parameters";
+import { useBaseParameters, BaseParametersHook } from "@app/hooks/tools/shared/useBaseParameters";
 
 export interface SanitizeParameters extends BaseParameters {
   removeJavaScript: boolean;
@@ -24,9 +24,9 @@ export type SanitizeParametersHook = BaseParametersHook<SanitizeParameters>;
 export const useSanitizeParameters = (): SanitizeParametersHook => {
   return useBaseParameters({
     defaultParameters,
-    endpointName: 'sanitize-pdf',
+    endpointName: "sanitize-pdf",
     validateFn: (params) => {
-      return Object.values(params).some(value => value === true);
+      return Object.values(params).some((value) => value === true);
     },
   });
 };
diff --git a/frontend/src/core/hooks/tools/scannerImageSplit/useScannerImageSplitOperation.ts b/frontend/src/core/hooks/tools/scannerImageSplit/useScannerImageSplitOperation.ts
index 144a316785..9919dac78f 100644
--- a/frontend/src/core/hooks/tools/scannerImageSplit/useScannerImageSplitOperation.ts
+++ b/frontend/src/core/hooks/tools/scannerImageSplit/useScannerImageSplitOperation.ts
@@ -1,18 +1,21 @@
-import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { ToolType, useToolOperation, ToolOperationConfig } from '@app/hooks/tools/shared/useToolOperation';
-import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
-import { ScannerImageSplitParameters, defaultParameters } from '@app/hooks/tools/scannerImageSplit/useScannerImageSplitParameters';
-import { useToolResources } from '@app/hooks/tools/shared/useToolResources';
+import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { ToolType, useToolOperation, ToolOperationConfig } from "@app/hooks/tools/shared/useToolOperation";
+import { createStandardErrorHandler } from "@app/utils/toolErrorHandler";
+import {
+  ScannerImageSplitParameters,
+  defaultParameters,
+} from "@app/hooks/tools/scannerImageSplit/useScannerImageSplitParameters";
+import { useToolResources } from "@app/hooks/tools/shared/useToolResources";
 
 export const buildScannerImageSplitFormData = (parameters: ScannerImageSplitParameters, file: File): FormData => {
   const formData = new FormData();
-  formData.append('fileInput', file);
-  formData.append('angle_threshold', parameters.angle_threshold.toString());
-  formData.append('tolerance', parameters.tolerance.toString());
-  formData.append('min_area', parameters.min_area.toString());
-  formData.append('min_contour_area', parameters.min_contour_area.toString());
-  formData.append('border_size', parameters.border_size.toString());
+  formData.append("fileInput", file);
+  formData.append("angle_threshold", parameters.angle_threshold.toString());
+  formData.append("tolerance", parameters.tolerance.toString());
+  formData.append("min_area", parameters.min_area.toString());
+  formData.append("min_contour_area", parameters.min_contour_area.toString());
+  formData.append("border_size", parameters.border_size.toString());
   return formData;
 };
 
@@ -20,8 +23,8 @@ export const buildScannerImageSplitFormData = (parameters: ScannerImageSplitPara
 export const scannerImageSplitOperationConfig = {
   toolType: ToolType.singleFile,
   buildFormData: buildScannerImageSplitFormData,
-  operationType: 'scannerImageSplit',
-  endpoint: '/api/v1/misc/extract-image-scans',
+  operationType: "scannerImageSplit",
+  endpoint: "/api/v1/misc/extract-image-scans",
   defaultParameters,
 } as const;
 
@@ -31,31 +34,36 @@ export const useScannerImageSplitOperation = () => {
 
   // Custom response handler that extracts ZIP files containing images
   // Can't add to exported config because it requires access to the hook so must be part of the hook
-  const responseHandler = useCallback(async (blob: Blob, originalFiles: File[]): Promise<File[]> => {
-    try {
-      // Scanner image split returns ZIP files with multiple images
-      const extractedFiles = await extractZipFiles(blob);
+  const responseHandler = useCallback(
+    async (blob: Blob, originalFiles: File[]): Promise<File[]> => {
+      try {
+        // Scanner image split returns ZIP files with multiple images
+        const extractedFiles = await extractZipFiles(blob);
 
-      // If extraction succeeded and returned files, use them
-      if (extractedFiles.length > 0) {
-        return extractedFiles;
+        // If extraction succeeded and returned files, use them
+        if (extractedFiles.length > 0) {
+          return extractedFiles;
+        }
+      } catch (error) {
+        console.warn("Failed to extract as ZIP, treating as single file:", error);
       }
-    } catch (error) {
-      console.warn('Failed to extract as ZIP, treating as single file:', error);
-    }
 
-    // Fallback: treat as single file (PNG image)
-    const inputFileName = originalFiles[0]?.name || 'document';
-    const baseFileName = inputFileName.replace(/\.[^.]+$/, '');
-    const singleFile = new File([blob], `${baseFileName}.png`, { type: 'image/png' });
-    return [singleFile];
-  }, [extractZipFiles]);
+      // Fallback: treat as single file (PNG image)
+      const inputFileName = originalFiles[0]?.name || "document";
+      const baseFileName = inputFileName.replace(/\.[^.]+$/, "");
+      const singleFile = new File([blob], `${baseFileName}.png`, { type: "image/png" });
+      return [singleFile];
+    },
+    [extractZipFiles],
+  );
 
   const config: ToolOperationConfig<ScannerImageSplitParameters> = {
     ...scannerImageSplitOperationConfig,
     responseHandler,
-    getErrorMessage: createStandardErrorHandler(t('scannerImageSplit.error.failed', 'An error occurred while extracting image scans.'))
+    getErrorMessage: createStandardErrorHandler(
+      t("scannerImageSplit.error.failed", "An error occurred while extracting image scans."),
+    ),
   };
 
   return useToolOperation(config);
-};
\ No newline at end of file
+};
diff --git a/frontend/src/core/hooks/tools/scannerImageSplit/useScannerImageSplitParameters.ts b/frontend/src/core/hooks/tools/scannerImageSplit/useScannerImageSplitParameters.ts
index ef4b89b94c..f1177d528d 100644
--- a/frontend/src/core/hooks/tools/scannerImageSplit/useScannerImageSplitParameters.ts
+++ b/frontend/src/core/hooks/tools/scannerImageSplit/useScannerImageSplitParameters.ts
@@ -1,5 +1,5 @@
-import { BaseParameters } from '@app/types/parameters';
-import { useBaseParameters, BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
+import { BaseParameters } from "@app/types/parameters";
+import { useBaseParameters, BaseParametersHook } from "@app/hooks/tools/shared/useBaseParameters";
 
 export interface ScannerImageSplitParameters extends BaseParameters {
   angle_threshold: number;
@@ -22,10 +22,10 @@ export type ScannerImageSplitParametersHook = BaseParametersHook<ScannerImageSpl
 export const useScannerImageSplitParameters = (): ScannerImageSplitParametersHook => {
   return useBaseParameters({
     defaultParameters,
-    endpointName: 'extract-image-scans',
+    endpointName: "extract-image-scans",
     validateFn: () => {
       // All parameters are numeric with defaults, validation handled by form
       return true;
     },
   });
-};
\ No newline at end of file
+};
diff --git a/frontend/src/core/hooks/tools/shared/toolOperationHelpers.ts b/frontend/src/core/hooks/tools/shared/toolOperationHelpers.ts
index 56551fcc6c..d8d458e6e9 100644
--- a/frontend/src/core/hooks/tools/shared/toolOperationHelpers.ts
+++ b/frontend/src/core/hooks/tools/shared/toolOperationHelpers.ts
@@ -1,4 +1,11 @@
-import { StirlingFile, FileId, StirlingFileStub, createStirlingFile, ProcessedFileMetadata, createNewStirlingFileStub } from '@app/types/fileContext';
+import {
+  StirlingFile,
+  FileId,
+  StirlingFileStub,
+  createStirlingFile,
+  ProcessedFileMetadata,
+  createNewStirlingFileStub,
+} from "@app/types/fileContext";
 
 /**
  * Builds parallel inputFileIds and inputStirlingFileStubs arrays from the valid input files.
@@ -7,7 +14,7 @@ import { StirlingFile, FileId, StirlingFileStub, createStirlingFile, ProcessedFi
  */
 export function buildInputTracking(
   validFiles: StirlingFile[],
-  selectors: { getStirlingFileStub: (id: FileId) => StirlingFileStub | undefined }
+  selectors: { getStirlingFileStub: (id: FileId) => StirlingFileStub | undefined },
 ): { inputFileIds: FileId[]; inputStirlingFileStubs: StirlingFileStub[] } {
   const inputFileIds: FileId[] = [];
   const inputStirlingFileStubs: StirlingFileStub[] = [];
@@ -34,13 +41,11 @@ export function buildOutputPairs(
   processedFiles: File[],
   thumbnails: string[],
   metadataArray: Array<ProcessedFileMetadata | undefined>,
-  stubFactory: (file: File, thumbnail: string, metadata: ProcessedFileMetadata | undefined, index: number) => StirlingFileStub
+  stubFactory: (file: File, thumbnail: string, metadata: ProcessedFileMetadata | undefined, index: number) => StirlingFileStub,
 ): { outputStirlingFileStubs: StirlingFileStub[]; outputStirlingFiles: StirlingFile[] } {
   const outputStirlingFileStubs = processedFiles.map((file, index) =>
-    stubFactory(file, thumbnails[index], metadataArray[index], index)
-  );
-  const outputStirlingFiles = processedFiles.map((file, index) =>
-    createStirlingFile(file, outputStirlingFileStubs[index].id)
+    stubFactory(file, thumbnails[index], metadataArray[index], index),
   );
+  const outputStirlingFiles = processedFiles.map((file, index) => createStirlingFile(file, outputStirlingFileStubs[index].id));
   return { outputStirlingFileStubs, outputStirlingFiles };
 }
diff --git a/frontend/src/core/hooks/tools/shared/toolOperationTypes.ts b/frontend/src/core/hooks/tools/shared/toolOperationTypes.ts
index a22c1dae84..65f668b2f7 100644
--- a/frontend/src/core/hooks/tools/shared/toolOperationTypes.ts
+++ b/frontend/src/core/hooks/tools/shared/toolOperationTypes.ts
@@ -1,7 +1,7 @@
-import { StirlingFile } from '@app/types/fileContext';
-import type { ResponseHandler } from '@app/utils/toolResponseProcessor';
-import { ToolId } from '@app/types/toolId';
-import type { ProcessingProgress } from '@app/hooks/tools/shared/useToolState';
+import { StirlingFile } from "@app/types/fileContext";
+import type { ResponseHandler } from "@app/utils/toolResponseProcessor";
+import { ToolId } from "@app/types/toolId";
+import type { ProcessingProgress } from "@app/hooks/tools/shared/useToolState";
 
 export type { ProcessingProgress, ResponseHandler };
 
@@ -15,12 +15,7 @@ export enum ToolType {
  * Reason the execute button is disabled. Resolved to a translated tooltip by OperationButton.
  * null means the button is enabled.
  */
-export type ExecuteDisabledReason =
-  | 'endpointUnavailable'
-  | 'noFiles'
-  | 'invalidParams'
-  | 'viewerMode'
-  | null;
+export type ExecuteDisabledReason = "endpointUnavailable" | "noFiles" | "invalidParams" | "viewerMode" | null;
 
 /**
  * Result from custom processor with optional metadata about input consumption.
@@ -83,7 +78,7 @@ export interface SingleFileToolOperationConfig<TParams> extends BaseToolOperatio
   toolType: ToolType.singleFile;
 
   /** Builds FormData for API request. */
-  buildFormData: ((params: TParams, file: File) => FormData);
+  buildFormData: (params: TParams, file: File) => FormData;
 
   /** API endpoint for the operation. Can be static string or function for dynamic routing. */
   endpoint: string | ((params: TParams) => string);
@@ -99,7 +94,7 @@ export interface MultiFileToolOperationConfig<TParams> extends BaseToolOperation
   filePrefix: string;
 
   /** Builds FormData for API request. */
-  buildFormData: ((params: TParams, files: File[]) => FormData);
+  buildFormData: (params: TParams, files: File[]) => FormData;
 
   /** API endpoint for the operation. Can be static string or function for dynamic routing. */
   endpoint: string | ((params: TParams) => string);
diff --git a/frontend/src/core/hooks/tools/shared/useAccordionSteps.ts b/frontend/src/core/hooks/tools/shared/useAccordionSteps.ts
index cfd3def258..6587b69a87 100644
--- a/frontend/src/core/hooks/tools/shared/useAccordionSteps.ts
+++ b/frontend/src/core/hooks/tools/shared/useAccordionSteps.ts
@@ -1,4 +1,4 @@
-import { useState, useCallback, useMemo, useEffect } from 'react';
+import { useState, useCallback, useMemo, useEffect } from "react";
 
 /**
  * State conditions that affect accordion behavior
@@ -49,7 +49,7 @@ export interface AccordionStepsAPI<T extends string | number | symbol> {
  * with configurable collapse conditions.
  */
 export function useAccordionSteps<T extends string | number | symbol>(
-  config: UseAccordionStepsConfig<T>
+  config: UseAccordionStepsConfig<T>,
 ): AccordionStepsAPI<T> {
   const { initialStep, stateConditions, noneValue } = config;
 
@@ -61,44 +61,46 @@ export function useAccordionSteps<T extends string | number | symbol>(
       return false;
     }
 
-    return (
-      (stateConditions.hasFiles === false) ||
-      (stateConditions.hasResults === true) ||
-      (stateConditions.disabled === true)
-    );
+    return stateConditions.hasFiles === false || stateConditions.hasResults === true || stateConditions.disabled === true;
   }, [stateConditions]);
 
   // Get collapsed state for a specific step
-  const getCollapsedState = useCallback((step: T): boolean => {
-    if (shouldCollapseAll) {
-      return true;
-    } else {
-      return openStep !== step;
-    }
-  }, [openStep, shouldCollapseAll]);
+  const getCollapsedState = useCallback(
+    (step: T): boolean => {
+      if (shouldCollapseAll) {
+        return true;
+      } else {
+        return openStep !== step;
+      }
+    },
+    [openStep, shouldCollapseAll],
+  );
 
   // Handle step toggle with accordion behavior
-  const handleStepToggle = useCallback((step: T) => {
-    if (stateConditions?.hasResults) {
-      config.afterResults?.();
-    }
-
-    // If all steps should be collapsed, don't allow opening
-    if (shouldCollapseAll) {
-      return;
-    }
-
-    // Accordion behavior: if clicking the open step, close it; otherwise open the clicked step
-    setOpenStep(currentStep => {
-      if (currentStep === step) {
-        // Clicking the open step - close it
-        return noneValue;
-      } else {
-        // Open the clicked step
-        return step;
+  const handleStepToggle = useCallback(
+    (step: T) => {
+      if (stateConditions?.hasResults) {
+        config.afterResults?.();
       }
-    });
-  }, [shouldCollapseAll, noneValue, stateConditions?.hasResults, config.afterResults]);
+
+      // If all steps should be collapsed, don't allow opening
+      if (shouldCollapseAll) {
+        return;
+      }
+
+      // Accordion behavior: if clicking the open step, close it; otherwise open the clicked step
+      setOpenStep((currentStep) => {
+        if (currentStep === step) {
+          // Clicking the open step - close it
+          return noneValue;
+        } else {
+          // Open the clicked step
+          return step;
+        }
+      });
+    },
+    [shouldCollapseAll, noneValue, stateConditions?.hasResults, config.afterResults],
+  );
 
   // Close all steps
   const closeAllSteps = useCallback(() => {
@@ -118,6 +120,6 @@ export function useAccordionSteps<T extends string | number | symbol>(
     getCollapsedState,
     handleStepToggle,
     setOpenStep,
-    closeAllSteps
+    closeAllSteps,
   };
 }
diff --git a/frontend/src/core/hooks/tools/shared/useBaseParameters.ts b/frontend/src/core/hooks/tools/shared/useBaseParameters.ts
index 099883c841..74267d8e7a 100644
--- a/frontend/src/core/hooks/tools/shared/useBaseParameters.ts
+++ b/frontend/src/core/hooks/tools/shared/useBaseParameters.ts
@@ -1,4 +1,4 @@
-import { useState, useCallback, Dispatch, SetStateAction } from 'react';
+import { useState, useCallback, Dispatch, SetStateAction } from "react";
 
 export interface BaseParametersHook<T> {
   parameters: T;
@@ -19,7 +19,7 @@ export function useBaseParameters<T>(config: BaseParametersConfig<T>): BaseParam
   const [parameters, setParameters] = useState<T>(config.defaultParameters);
 
   const updateParameter = useCallback(<K extends keyof T>(parameter: K, value: T[K]) => {
-    setParameters(prev => ({
+    setParameters((prev) => ({
       ...prev,
       [parameter]: value,
     }));
diff --git a/frontend/src/core/hooks/tools/shared/useBaseTool.ts b/frontend/src/core/hooks/tools/shared/useBaseTool.ts
index 4b5cecd924..360c69b6b6 100644
--- a/frontend/src/core/hooks/tools/shared/useBaseTool.ts
+++ b/frontend/src/core/hooks/tools/shared/useBaseTool.ts
@@ -1,10 +1,10 @@
-import { useEffect, useCallback, useRef } from 'react';
-import { useEndpointEnabled } from '@app/hooks/useEndpointConfig';
-import { useViewScopedFiles } from '@app/hooks/tools/shared/useViewScopedFiles';
-import { BaseToolProps } from '@app/types/tool';
-import { ToolOperationHook } from '@app/hooks/tools/shared/useToolOperation';
-import { BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
-import { StirlingFile } from '@app/types/fileContext';
+import { useEffect, useCallback, useRef } from "react";
+import { useEndpointEnabled } from "@app/hooks/useEndpointConfig";
+import { useViewScopedFiles } from "@app/hooks/tools/shared/useViewScopedFiles";
+import { BaseToolProps } from "@app/types/tool";
+import { ToolOperationHook } from "@app/hooks/tools/shared/useToolOperation";
+import { BaseParametersHook } from "@app/hooks/tools/shared/useBaseParameters";
+import { StirlingFile } from "@app/types/fileContext";
 
 interface BaseToolReturn<TParams, TParamsHook extends BaseParametersHook<TParams>> {
   // File management
@@ -42,7 +42,7 @@ export function useBaseTool<TParams, TParamsHook extends BaseParametersHook<TPar
     minFiles?: number;
     /** When true, uses the full file selection rather than the viewer-scoped single file. */
     ignoreViewerScope?: boolean;
-  }
+  },
 ): BaseToolReturn<TParams, TParamsHook> {
   const minFiles = options?.minFiles ?? 1;
   const ignoreViewerScope = options?.ignoreViewerScope ?? false;
@@ -59,7 +59,7 @@ export function useBaseTool<TParams, TParamsHook extends BaseParametersHook<TPar
 
   // Prevent reset immediately after operation completes (when consumeFiles auto-selects outputs)
   const skipNextSelectionResetRef = useRef(false);
-  const previousSelectionRef = useRef<string>('');
+  const previousSelectionRef = useRef<string>("");
 
   // Tool-specific hooks
   const params = useParams();
@@ -91,7 +91,10 @@ export function useBaseTool<TParams, TParamsHook extends BaseParametersHook<TPar
   useEffect(() => {
     if (effectiveFiles.length === 0) return;
 
-    const currentSelection = effectiveFiles.map(f => f.fileId).sort().join(',');
+    const currentSelection = effectiveFiles
+      .map((f) => f.fileId)
+      .sort()
+      .join(",");
 
     if (currentSelection === previousSelectionRef.current) return;
 
@@ -134,10 +137,13 @@ export function useBaseTool<TParams, TParamsHook extends BaseParametersHook<TPar
     }
   }, [operation, params.parameters, effectiveFiles, onComplete, onError, toolName]);
 
-  const handleThumbnailClick = useCallback((file: File) => {
-    onPreviewFile?.(file);
-    sessionStorage.setItem('previousMode', toolName);
-  }, [onPreviewFile, toolName]);
+  const handleThumbnailClick = useCallback(
+    (file: File) => {
+      onPreviewFile?.(file);
+      sessionStorage.setItem("previousMode", toolName);
+    },
+    [onPreviewFile, toolName],
+  );
 
   const handleSettingsReset = useCallback(() => {
     skipNextSelectionResetRef.current = false;
@@ -170,6 +176,6 @@ export function useBaseTool<TParams, TParamsHook extends BaseParametersHook<TPar
     // State
     hasFiles,
     hasResults,
-    settingsCollapsed
+    settingsCollapsed,
   };
 }
diff --git a/frontend/src/core/hooks/tools/shared/useOperationResults.ts b/frontend/src/core/hooks/tools/shared/useOperationResults.ts
index fca4f922a3..0e085fb920 100644
--- a/frontend/src/core/hooks/tools/shared/useOperationResults.ts
+++ b/frontend/src/core/hooks/tools/shared/useOperationResults.ts
@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback } from "react";
 
 export interface OperationResult {
   files: File[];
@@ -12,13 +12,13 @@ export interface OperationResultsHook {
   status: string;
   errorMessage: string | null;
   isLoading: boolean;
-  
+
   setResults: (results: OperationResult) => void;
   setDownloadUrl: (url: string | null) => void;
   setStatus: (status: string) => void;
   setErrorMessage: (error: string | null) => void;
   setIsLoading: (loading: boolean) => void;
-  
+
   resetResults: () => void;
   clearError: () => void;
 }
@@ -32,14 +32,14 @@ const initialResults: OperationResult = {
 export const useOperationResults = (): OperationResultsHook => {
   const [results, setResults] = useState<OperationResult>(initialResults);
   const [downloadUrl, setDownloadUrl] = useState<string | null>(null);
-  const [status, setStatus] = useState('');
+  const [status, setStatus] = useState("");
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(false);
 
   const resetResults = useCallback(() => {
     setResults(initialResults);
     setDownloadUrl(null);
-    setStatus('');
+    setStatus("");
     setErrorMessage(null);
     setIsLoading(false);
   }, []);
@@ -54,14 +54,14 @@ export const useOperationResults = (): OperationResultsHook => {
     status,
     errorMessage,
     isLoading,
-    
+
     setResults,
     setDownloadUrl,
     setStatus,
     setErrorMessage,
     setIsLoading,
-    
+
     resetResults,
     clearError,
   };
-};
\ No newline at end of file
+};
diff --git a/frontend/src/core/hooks/tools/shared/useToolApiCalls.ts b/frontend/src/core/hooks/tools/shared/useToolApiCalls.ts
index ee79122e28..2f66f3e32a 100644
--- a/frontend/src/core/hooks/tools/shared/useToolApiCalls.ts
+++ b/frontend/src/core/hooks/tools/shared/useToolApiCalls.ts
@@ -1,10 +1,10 @@
-import { useCallback, useRef } from 'react';
-import axios, {type CancelTokenSource} from 'axios'; // Real axios for static methods (CancelToken, isCancel)
-import apiClient from '@app/services/apiClient'; // Our configured instance
-import { processResponse, ResponseHandler } from '@app/utils/toolResponseProcessor';
-import { isEmptyOutput } from '@app/services/errorUtils';
-import type { ProcessingProgress } from '@app/hooks/tools/shared/useToolState';
-import type { StirlingFile, FileId } from '@app/types/fileContext';
+import { useCallback, useRef } from "react";
+import axios, { type CancelTokenSource } from "axios"; // Real axios for static methods (CancelToken, isCancel)
+import apiClient from "@app/services/apiClient"; // Our configured instance
+import { processResponse, ResponseHandler } from "@app/utils/toolResponseProcessor";
+import { isEmptyOutput } from "@app/services/errorUtils";
+import type { ProcessingProgress } from "@app/hooks/tools/shared/useToolState";
+import type { StirlingFile, FileId } from "@app/types/fileContext";
 
 export interface ApiCallsConfig<TParams = void> {
   endpoint: string | ((params: TParams) => string);
@@ -17,96 +17,103 @@ export interface ApiCallsConfig<TParams = void> {
 export const useToolApiCalls = <TParams = void>() => {
   const cancelTokenRef = useRef<CancelTokenSource | null>(null);
 
-  const processFiles = useCallback(async (
-    params: TParams,
-    validFiles: StirlingFile[],
-    config: ApiCallsConfig<TParams>,
-    onProgress: (progress: ProcessingProgress) => void,
-    onStatus: (status: string) => void,
-    markFileError?: (fileId: FileId) => void,
-  ): Promise<{ outputFiles: File[]; successSourceIds: FileId[] }> => {
-    const processedFiles: File[] = [];
-    const successSourceIds: FileId[] = [];
-    const failedFiles: string[] = [];
-    const total = validFiles.length;
+  const processFiles = useCallback(
+    async (
+      params: TParams,
+      validFiles: StirlingFile[],
+      config: ApiCallsConfig<TParams>,
+      onProgress: (progress: ProcessingProgress) => void,
+      onStatus: (status: string) => void,
+      markFileError?: (fileId: FileId) => void,
+    ): Promise<{ outputFiles: File[]; successSourceIds: FileId[] }> => {
+      const processedFiles: File[] = [];
+      const successSourceIds: FileId[] = [];
+      const failedFiles: string[] = [];
+      const total = validFiles.length;
 
-    // Create cancel token for this operation
-    cancelTokenRef.current = axios.CancelToken.source();
+      // Create cancel token for this operation
+      cancelTokenRef.current = axios.CancelToken.source();
 
-    for (let i = 0; i < validFiles.length; i++) {
-      const file = validFiles[i];
+      for (let i = 0; i < validFiles.length; i++) {
+        const file = validFiles[i];
 
-      console.debug('[processFiles] Start', { index: i, total, name: file.name, fileId: file.fileId });
-      onProgress({ current: i + 1, total, currentFileName: file.name });
-      onStatus(`Processing ${file.name} (${i + 1}/${total})`);
+        console.debug("[processFiles] Start", { index: i, total, name: file.name, fileId: file.fileId });
+        onProgress({ current: i + 1, total, currentFileName: file.name });
+        onStatus(`Processing ${file.name} (${i + 1}/${total})`);
 
-      try {
-        const formData = config.buildFormData(params, file);
-        const endpoint = typeof config.endpoint === 'function' ? config.endpoint(params) : config.endpoint;
-        console.debug('[processFiles] POST', { endpoint, name: file.name });
-        const response = await apiClient.post(endpoint, formData, {
-          responseType: 'blob',
-          cancelToken: cancelTokenRef.current?.token,
-        });
-        console.debug('[processFiles] Response OK', { name: file.name, status: response.status });
+        try {
+          const formData = config.buildFormData(params, file);
+          const endpoint = typeof config.endpoint === "function" ? config.endpoint(params) : config.endpoint;
+          console.debug("[processFiles] POST", { endpoint, name: file.name });
+          const response = await apiClient.post(endpoint, formData, {
+            responseType: "blob",
+            cancelToken: cancelTokenRef.current?.token,
+          });
+          console.debug("[processFiles] Response OK", { name: file.name, status: response.status });
 
-        // Forward to shared response processor (uses tool-specific responseHandler if provided)
-        const responseFiles = await processResponse(
-          response.data,
-          [file],
-          config.filePrefix,
-          config.responseHandler,
-          config.preserveBackendFilename ? response.headers : undefined
-        );
-        // Guard: some endpoints may return an empty/0-byte file with 200
-        const empty = isEmptyOutput(responseFiles);
-        if (empty) {
-          console.warn('[processFiles] Empty output treated as failure', { name: file.name });
+          // Forward to shared response processor (uses tool-specific responseHandler if provided)
+          const responseFiles = await processResponse(
+            response.data,
+            [file],
+            config.filePrefix,
+            config.responseHandler,
+            config.preserveBackendFilename ? response.headers : undefined,
+          );
+          // Guard: some endpoints may return an empty/0-byte file with 200
+          const empty = isEmptyOutput(responseFiles);
+          if (empty) {
+            console.warn("[processFiles] Empty output treated as failure", { name: file.name });
+            failedFiles.push(file.name);
+            try {
+              markFileError?.(file.fileId);
+            } catch (e) {
+              console.debug("markFileError", e);
+            }
+            continue;
+          }
+          processedFiles.push(...responseFiles);
+          // record source id as successful
+          successSourceIds.push(file.fileId);
+          console.debug("[processFiles] Success", { name: file.name, produced: responseFiles.length });
+        } catch (error) {
+          if (axios.isCancel(error)) {
+            throw new Error("Operation was cancelled", { cause: error });
+          }
+          console.error("[processFiles] Failed", { name: file.name, error });
           failedFiles.push(file.name);
+          // mark errored file so UI can highlight
           try {
             markFileError?.(file.fileId);
           } catch (e) {
-            console.debug('markFileError', e);
+            console.debug("markFileError", e);
           }
-          continue;
-        }
-        processedFiles.push(...responseFiles);
-        // record source id as successful
-        successSourceIds.push(file.fileId);
-        console.debug('[processFiles] Success', { name: file.name, produced: responseFiles.length });
-
-      } catch (error) {
-        if (axios.isCancel(error)) {
-          throw new Error('Operation was cancelled', { cause: error });
-        }
-        console.error('[processFiles] Failed', { name: file.name, error });
-        failedFiles.push(file.name);
-        // mark errored file so UI can highlight
-        try {
-          markFileError?.(file.fileId);
-        } catch (e) {
-          console.debug('markFileError', e);
         }
       }
-    }
 
-    if (failedFiles.length > 0 && processedFiles.length === 0) {
-      throw new Error(`Failed to process all files: ${failedFiles.join(', ')}`);
-    }
+      if (failedFiles.length > 0 && processedFiles.length === 0) {
+        throw new Error(`Failed to process all files: ${failedFiles.join(", ")}`);
+      }
 
-    if (failedFiles.length > 0) {
-      onStatus(`Processed ${processedFiles.length}/${total} files. Failed: ${failedFiles.join(', ')}`);
-    } else {
-      onStatus(`Successfully processed ${processedFiles.length} file${processedFiles.length === 1 ? '' : 's'}`);
-    }
+      if (failedFiles.length > 0) {
+        onStatus(`Processed ${processedFiles.length}/${total} files. Failed: ${failedFiles.join(", ")}`);
+      } else {
+        onStatus(`Successfully processed ${processedFiles.length} file${processedFiles.length === 1 ? "" : "s"}`);
+      }
 
-    console.debug('[processFiles] Completed batch', { total, successes: successSourceIds.length, outputs: processedFiles.length, failed: failedFiles.length });
-    return { outputFiles: processedFiles, successSourceIds };
-  }, []);
+      console.debug("[processFiles] Completed batch", {
+        total,
+        successes: successSourceIds.length,
+        outputs: processedFiles.length,
+        failed: failedFiles.length,
+      });
+      return { outputFiles: processedFiles, successSourceIds };
+    },
+    [],
+  );
 
   const cancelOperation = useCallback(() => {
     if (cancelTokenRef.current) {
-      cancelTokenRef.current.cancel('Operation cancelled by user');
+      cancelTokenRef.current.cancel("Operation cancelled by user");
       cancelTokenRef.current = null;
     }
   }, []);
diff --git a/frontend/src/core/hooks/tools/shared/useToolOperation.ts b/frontend/src/core/hooks/tools/shared/useToolOperation.ts
index 294e8e8287..064dc3aa9f 100644
--- a/frontend/src/core/hooks/tools/shared/useToolOperation.ts
+++ b/frontend/src/core/hooks/tools/shared/useToolOperation.ts
@@ -1,24 +1,24 @@
-import { useCallback, useRef, useEffect, useContext } from 'react';
-import apiClient from '@app/services/apiClient';
-import { useTranslation } from 'react-i18next';
-import { useFileContext } from '@app/contexts/FileContext';
-import { useNavigationActions } from '@app/contexts/NavigationContext';
-import { ViewerContext } from '@app/contexts/ViewerContext';
-import { useToolState } from '@app/hooks/tools/shared/useToolState';
-import { useToolApiCalls, type ApiCallsConfig } from '@app/hooks/tools/shared/useToolApiCalls';
-import { useToolResources } from '@app/hooks/tools/shared/useToolResources';
-import { extractErrorMessage, handle422Error } from '@app/utils/toolErrorHandler';
-import { StirlingFile, extractFiles, FileId, StirlingFileStub } from '@app/types/fileContext';
-import { FILE_EVENTS } from '@app/services/errorUtils';
-import { getFilenameWithoutExtension } from '@app/utils/fileUtils';
-import { createChildStub, generateProcessedFileMetadata } from '@app/contexts/file/fileActions';
-import { createNewStirlingFileStub } from '@app/types/fileContext';
-import { ToolOperation } from '@app/types/file';
-import { ensureBackendReady } from '@app/services/backendReadinessGuard';
-import { useWillUseCloud } from '@app/hooks/useWillUseCloud';
-import { useCreditCheck } from '@app/hooks/useCreditCheck';
-import { notifyPdfProcessingComplete } from '@app/services/desktopNotificationService';
-import { buildInputTracking, buildOutputPairs } from '@app/hooks/tools/shared/toolOperationHelpers';
+import { useCallback, useRef, useEffect, useContext } from "react";
+import apiClient from "@app/services/apiClient";
+import { useTranslation } from "react-i18next";
+import { useFileContext } from "@app/contexts/FileContext";
+import { useNavigationActions } from "@app/contexts/NavigationContext";
+import { ViewerContext } from "@app/contexts/ViewerContext";
+import { useToolState } from "@app/hooks/tools/shared/useToolState";
+import { useToolApiCalls, type ApiCallsConfig } from "@app/hooks/tools/shared/useToolApiCalls";
+import { useToolResources } from "@app/hooks/tools/shared/useToolResources";
+import { extractErrorMessage, handle422Error } from "@app/utils/toolErrorHandler";
+import { StirlingFile, extractFiles, FileId, StirlingFileStub } from "@app/types/fileContext";
+import { FILE_EVENTS } from "@app/services/errorUtils";
+import { getFilenameWithoutExtension } from "@app/utils/fileUtils";
+import { createChildStub, generateProcessedFileMetadata } from "@app/contexts/file/fileActions";
+import { createNewStirlingFileStub } from "@app/types/fileContext";
+import { ToolOperation } from "@app/types/file";
+import { ensureBackendReady } from "@app/services/backendReadinessGuard";
+import { useWillUseCloud } from "@app/hooks/useWillUseCloud";
+import { useCreditCheck } from "@app/hooks/useCreditCheck";
+import { notifyPdfProcessingComplete } from "@app/services/desktopNotificationService";
+import { buildInputTracking, buildOutputPairs } from "@app/hooks/tools/shared/toolOperationHelpers";
 import {
   ToolType,
   ToolOperationConfig,
@@ -29,7 +29,7 @@ import {
   CustomToolOperationConfig,
   ProcessingProgress,
   ResponseHandler,
-} from '@app/hooks/tools/shared/toolOperationTypes';
+} from "@app/hooks/tools/shared/toolOperationTypes";
 
 export { ToolType };
 export type {
@@ -44,7 +44,7 @@ export type {
 };
 
 // Re-export for backwards compatibility
-export { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
+export { createStandardErrorHandler } from "@app/utils/toolErrorHandler";
 
 /**
  * Shared hook for tool operations providing consistent error handling, progress tracking,
@@ -58,9 +58,7 @@ export { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
  * @param config - Tool operation configuration
  * @returns Hook interface with state and execution methods
  */
-export const useToolOperation = <TParams>(
-  config: ToolOperationConfig<TParams>
-): ToolOperationHook<TParams> => {
+export const useToolOperation = <TParams>(config: ToolOperationConfig<TParams>): ToolOperationHook<TParams> => {
   const { t } = useTranslation();
   const { addFiles, consumeFiles, undoConsumeFiles, selectors } = useFileContext();
   const { actions: navActions } = useNavigationActions();
@@ -76,9 +74,11 @@ export const useToolOperation = <TParams>(
   // Determine endpoint for cloud usage check and credit routing.
   // For function endpoints, use defaultParameters to get a representative static value.
   const endpointString = config.endpoint
-    ? (typeof config.endpoint === 'function'
-        ? (config.defaultParameters ? (config.endpoint(config.defaultParameters) ?? undefined) : undefined)
-        : config.endpoint)
+    ? typeof config.endpoint === "function"
+      ? config.defaultParameters
+        ? (config.endpoint(config.defaultParameters) ?? undefined)
+        : undefined
+      : config.endpoint
     : undefined;
 
   const { checkCredits } = useCreditCheck(config.operationType, endpointString);
@@ -91,347 +91,390 @@ export const useToolOperation = <TParams>(
     outputFileIds: FileId[];
   } | null>(null);
 
-  const executeOperation = useCallback(async (
-    params: TParams,
-    selectedFiles: StirlingFile[]
-  ): Promise<void> => {
-    // Validation
-    if (selectedFiles.length === 0) {
-      actions.setError(t('noFileSelected', 'No files selected'));
-      return;
-    }
+  const executeOperation = useCallback(
+    async (params: TParams, selectedFiles: StirlingFile[]): Promise<void> => {
+      // Validation
+      if (selectedFiles.length === 0) {
+        actions.setError(t("noFileSelected", "No files selected"));
+        return;
+      }
 
-    // Handle zero-byte inputs explicitly: mark as error and continue with others
-    const zeroByteFiles = selectedFiles.filter(file => file.size === 0);
-    if (zeroByteFiles.length > 0) {
-      try {
-        for (const f of zeroByteFiles) {
-          fileActions.markFileError(f.fileId);
+      // Handle zero-byte inputs explicitly: mark as error and continue with others
+      const zeroByteFiles = selectedFiles.filter((file) => file.size === 0);
+      if (zeroByteFiles.length > 0) {
+        try {
+          for (const f of zeroByteFiles) {
+            fileActions.markFileError(f.fileId);
+          }
+        } catch (e) {
+          console.log("markFileError", e);
         }
-      } catch (e) {
-        console.log('markFileError', e);
       }
-    }
-    const validFiles: StirlingFile[] = selectedFiles.filter(file => file.size > 0);
-    if (validFiles.length === 0) {
-      actions.setError(t('noValidFiles', 'No valid files to process'));
-      return;
-    }
-
-    // Resolve the runtime endpoint from params (static string or function result).
-    // Custom processors may omit endpoint entirely — result is undefined in that case.
-    const runtimeEndpoint: string | undefined = config.endpoint
-      ? (typeof config.endpoint === 'function' ? (config.endpoint(params) ?? undefined) : config.endpoint)
-      : undefined;
-
-    // Credit check — no-op in core builds, real check in desktop/SaaS versions.
-    // Pass runtime endpoint so the check can determine if this routes locally (no credits needed).
-    const creditError = await checkCredits(runtimeEndpoint);
-    if (creditError !== null) {
-      actions.setError(creditError);
-      return;
-    }
-
-    // Backend readiness check (will skip for SaaS-routed endpoints).
-    // Custom processors without an endpoint skip this — they manage their own backend calls.
-    const endpointForReadyCheck = config.toolType !== ToolType.custom ? runtimeEndpoint : undefined;
-    const backendReady = await ensureBackendReady(endpointForReadyCheck);
-    if (!backendReady) {
-      actions.setError(t('backendHealth.offline', 'Embedded backend is offline. Please try again shortly.'));
-      return;
-    }
-
-    // Reset state
-    actions.setLoading(true);
-    actions.setError(null);
-    actions.resetResults();
-    cleanupBlobUrls();
-
-    // Prepare files with history metadata injection (for PDFs)
-    actions.setStatus('Processing files...');
-
-    // Listen for global error file id events from HTTP interceptor during this run
-    let externalErrorFileIds: string[] = [];
-    const errorListener = (e: Event) => {
-      const detail = (e as CustomEvent)?.detail as any;
-      if (detail?.fileIds) {
-        externalErrorFileIds = Array.isArray(detail.fileIds) ? detail.fileIds : [];
+      const validFiles: StirlingFile[] = selectedFiles.filter((file) => file.size > 0);
+      if (validFiles.length === 0) {
+        actions.setError(t("noValidFiles", "No valid files to process"));
+        return;
       }
-    };
-    window.addEventListener(FILE_EVENTS.markError, errorListener as EventListener);
+
+      // Resolve the runtime endpoint from params (static string or function result).
+      // Custom processors may omit endpoint entirely — result is undefined in that case.
+      const runtimeEndpoint: string | undefined = config.endpoint
+        ? typeof config.endpoint === "function"
+          ? (config.endpoint(params) ?? undefined)
+          : config.endpoint
+        : undefined;
+
+      // Credit check — no-op in core builds, real check in desktop/SaaS versions.
+      // Pass runtime endpoint so the check can determine if this routes locally (no credits needed).
+      const creditError = await checkCredits(runtimeEndpoint);
+      if (creditError !== null) {
+        actions.setError(creditError);
+        return;
+      }
+
+      // Backend readiness check (will skip for SaaS-routed endpoints).
+      // Custom processors without an endpoint skip this — they manage their own backend calls.
+      const endpointForReadyCheck = config.toolType !== ToolType.custom ? runtimeEndpoint : undefined;
+      const backendReady = await ensureBackendReady(endpointForReadyCheck);
+      if (!backendReady) {
+        actions.setError(t("backendHealth.offline", "Embedded backend is offline. Please try again shortly."));
+        return;
+      }
+
+      // Reset state
+      actions.setLoading(true);
+      actions.setError(null);
+      actions.resetResults();
+      cleanupBlobUrls();
+
+      // Prepare files with history metadata injection (for PDFs)
+      actions.setStatus("Processing files...");
+
+      // Listen for global error file id events from HTTP interceptor during this run
+      let externalErrorFileIds: string[] = [];
+      const errorListener = (e: Event) => {
+        const detail = (e as CustomEvent)?.detail as any;
+        if (detail?.fileIds) {
+          externalErrorFileIds = Array.isArray(detail.fileIds) ? detail.fileIds : [];
+        }
+      };
+      window.addEventListener(FILE_EVENTS.markError, errorListener as EventListener);
 
       try {
-      let processedFiles: File[];
+        let processedFiles: File[];
         let successSourceIds: FileId[] = [];
 
-      // Use original files directly (no PDF metadata injection - history stored in IndexedDB)
-      const filesForAPI = extractFiles(validFiles);
+        // Use original files directly (no PDF metadata injection - history stored in IndexedDB)
+        const filesForAPI = extractFiles(validFiles);
 
-      switch (config.toolType) {
-        case ToolType.singleFile: {
-          // Individual file processing - separate API call per file
-          const apiCallsConfig: ApiCallsConfig<TParams> = {
-            endpoint: config.endpoint,
-            buildFormData: config.buildFormData,
-            filePrefix: config.filePrefix,
-            responseHandler: config.responseHandler,
-            preserveBackendFilename: config.preserveBackendFilename
-          };
-          console.debug('[useToolOperation] Multi-file start', { count: filesForAPI.length });
-          const result = await processFiles(
-            params,
-            validFiles,
-            apiCallsConfig,
-            actions.setProgress,
-            actions.setStatus,
-            fileActions.markFileError
-          );
-          processedFiles = result.outputFiles;
-          successSourceIds = result.successSourceIds;
-          console.debug('[useToolOperation] Multi-file results', { outputFiles: processedFiles.length, successSources: result.successSourceIds.length });
-          break;
-        }
-        case ToolType.multiFile: {
-          // Multi-file processing - single API call with all files
-          actions.setStatus('Processing files...');
-          const formData = config.buildFormData(params, filesForAPI);
-          const endpoint = typeof config.endpoint === 'function' ? config.endpoint(params) : config.endpoint;
-
-          const response = await apiClient.post(endpoint, formData, { responseType: 'blob' });
-
-          // Multi-file responses are typically ZIP files that need extraction, but some may return single PDFs
-          if (config.responseHandler) {
-            // Use custom responseHandler for multi-file (handles ZIP extraction)
-            processedFiles = await config.responseHandler(response.data, filesForAPI);
-          } else if (response.data.type === 'application/pdf' ||
-                    (response.headers && response.headers['content-type'] === 'application/pdf')) {
-            // Single PDF response (e.g. split with merge option) - add prefix to first original filename
-            const filename = `${config.filePrefix}${filesForAPI[0]?.name || 'document.pdf'}`;
-            const singleFile = new File([response.data], filename, { type: 'application/pdf' });
-            processedFiles = [singleFile];
-          } else {
-            // Default: assume ZIP response for multi-file endpoints
-            // Note: extractZipFiles will check preferences.autoUnzip setting
-            processedFiles = await extractZipFiles(response.data);
-          }
-          // Assume all inputs succeeded together unless server provided an error earlier
-          successSourceIds = validFiles.map(f => f.fileId);
-          break;
-        }
-
-        case ToolType.custom: {
-          actions.setStatus('Processing files...');
-          const result = await config.customProcessor(params, filesForAPI);
-
-          processedFiles = result.files;
-          const consumedAllInputs = result.consumedAllInputs || false;
-
-          // If consumedAllInputs flag is set, mark all inputs as successful
-          // (used for operations that combine N inputs into fewer outputs)
-          if (consumedAllInputs) {
-            successSourceIds = validFiles.map(f => f.fileId);
-          } else {
-            // Try to map outputs back to inputs by filename (before extension)
-            const inputBaseNames = new Map<string, FileId>();
-            for (const f of validFiles) {
-              const base = getFilenameWithoutExtension(f.name || '');
-              inputBaseNames.set(base, f.fileId);
-            }
-            const mappedSuccess: FileId[] = [];
-            for (const out of processedFiles) {
-              const base = getFilenameWithoutExtension(out.name || '');
-              const id = inputBaseNames.get(base);
-              if (id) mappedSuccess.push(id);
-            }
-            // Fallback to naive alignment if names don't match
-            if (mappedSuccess.length === 0) {
-              successSourceIds = validFiles.slice(0, processedFiles.length).map(f => f.fileId);
-            } else {
-              successSourceIds = mappedSuccess;
-            }
-          }
-          break;
-        }
-      }
-
-      // Normalize error flags across tool types: mark failures, clear successes
-      try {
-        const allInputIds = validFiles.map(f => f.fileId);
-        const okSet = new Set(successSourceIds);
-        // Clear errors on successes
-        for (const okId of okSet) {
-          try { fileActions.clearFileError(okId); } catch (_e) { void _e; }
-        }
-        // Mark errors on inputs that didn't succeed
-        for (const id of allInputIds) {
-          if (!okSet.has(id)) {
-            try { fileActions.markFileError(id); } catch (_e) { void _e; }
-          }
-        }
-      } catch (_e) { void _e; }
-
-      if (externalErrorFileIds.length > 0) {
-        // If backend told us which sources failed, prefer that mapping
-        successSourceIds = validFiles
-          .map(f => f.fileId)
-          .filter(id => !externalErrorFileIds.includes(id));
-        // Also mark failed IDs immediately
-        try {
-          for (const badId of externalErrorFileIds) {
-            fileActions.markFileError(badId as FileId);
-          }
-        } catch (_e) { void _e; }
-      }
-
-      if (processedFiles.length > 0) {
-        actions.setFiles(processedFiles);
-
-        // Generate thumbnails and download URL concurrently
-        actions.setGeneratingThumbnails(true);
-        const [thumbnails, downloadInfo] = await Promise.all([
-          generateThumbnails(processedFiles),
-          createDownloadInfo(processedFiles, config.operationType)
-        ]);
-        actions.setGeneratingThumbnails(false);
-
-        actions.setThumbnails(thumbnails);
-
-        // Determine whether outputs are new versions of their inputs or independent artifacts.
-        // A version operation produces exactly one output per successful input, all in the same
-        // format (e.g. compress, rotate, redact: 1→1 or N→N same extension).
-        // Everything else — format conversions (ext change), merges (N→1), splits (1→N) —
-        // produces outputs that have no meaningful parent-child relationship with the inputs.
-        const isVersionOp = processedFiles.length > 0
-          && successSourceIds.length === processedFiles.length
-          && successSourceIds.every((id, i) => {
-            const inputFile = validFiles.find(f => f.fileId === id);
-            const inExt = inputFile?.name.split('.').pop()?.toLowerCase();
-            const outExt = processedFiles[i].name.split('.').pop()?.toLowerCase();
-            return inExt != null && inExt === outExt;
-          });
-
-        actions.setStatus('Generating metadata for processed files...');
-        const processedFileMetadataArray = await Promise.all(
-          processedFiles.map(file => generateProcessedFileMetadata(file))
-        );
-
-        const { inputFileIds, inputStirlingFileStubs } = buildInputTracking(validFiles, selectors);
-
-        if (isVersionOp) {
-          // Output is a modified version of the input — link it to the input's version chain.
-          // The input is removed from the workbench and replaced in-place by the output.
-          const downloadLocalPath =
-            selectors.getStirlingFileStub(validFiles[0].fileId)?.localFilePath ?? null;
-
-          const newToolOperation: ToolOperation = {
-            toolId: config.operationType,
-            timestamp: Date.now()
-          };
-
-          const successInputStubs = successSourceIds
-            .map((id) => selectors.getStirlingFileStub(id))
-            .filter(Boolean) as StirlingFileStub[];
-
-          if (successInputStubs.length !== processedFiles.length) {
-            console.warn('[useToolOperation] Mismatch successInputStubs vs outputs', {
-              successInputStubs: successInputStubs.length,
-              outputs: processedFiles.length,
+        switch (config.toolType) {
+          case ToolType.singleFile: {
+            // Individual file processing - separate API call per file
+            const apiCallsConfig: ApiCallsConfig<TParams> = {
+              endpoint: config.endpoint,
+              buildFormData: config.buildFormData,
+              filePrefix: config.filePrefix,
+              responseHandler: config.responseHandler,
+              preserveBackendFilename: config.preserveBackendFilename,
+            };
+            console.debug("[useToolOperation] Multi-file start", { count: filesForAPI.length });
+            const result = await processFiles(
+              params,
+              validFiles,
+              apiCallsConfig,
+              actions.setProgress,
+              actions.setStatus,
+              fileActions.markFileError,
+            );
+            processedFiles = result.outputFiles;
+            successSourceIds = result.successSourceIds;
+            console.debug("[useToolOperation] Multi-file results", {
+              outputFiles: processedFiles.length,
+              successSources: result.successSourceIds.length,
             });
+            break;
+          }
+          case ToolType.multiFile: {
+            // Multi-file processing - single API call with all files
+            actions.setStatus("Processing files...");
+            const formData = config.buildFormData(params, filesForAPI);
+            const endpoint = typeof config.endpoint === "function" ? config.endpoint(params) : config.endpoint;
+
+            const response = await apiClient.post(endpoint, formData, { responseType: "blob" });
+
+            // Multi-file responses are typically ZIP files that need extraction, but some may return single PDFs
+            if (config.responseHandler) {
+              // Use custom responseHandler for multi-file (handles ZIP extraction)
+              processedFiles = await config.responseHandler(response.data, filesForAPI);
+            } else if (
+              response.data.type === "application/pdf" ||
+              (response.headers && response.headers["content-type"] === "application/pdf")
+            ) {
+              // Single PDF response (e.g. split with merge option) - add prefix to first original filename
+              const filename = `${config.filePrefix}${filesForAPI[0]?.name || "document.pdf"}`;
+              const singleFile = new File([response.data], filename, { type: "application/pdf" });
+              processedFiles = [singleFile];
+            } else {
+              // Default: assume ZIP response for multi-file endpoints
+              // Note: extractZipFiles will check preferences.autoUnzip setting
+              processedFiles = await extractZipFiles(response.data);
+            }
+            // Assume all inputs succeeded together unless server provided an error earlier
+            successSourceIds = validFiles.map((f) => f.fileId);
+            break;
           }
 
-          const { outputStirlingFileStubs, outputStirlingFiles } = buildOutputPairs(
-            processedFiles, thumbnails, processedFileMetadataArray,
-            (file, thumbnail, metadata, index) => createChildStub(
-              successInputStubs[index] || inputStirlingFileStubs[index] || inputStirlingFileStubs[0],
-              newToolOperation, file, thumbnail, metadata
-            )
+          case ToolType.custom: {
+            actions.setStatus("Processing files...");
+            const result = await config.customProcessor(params, filesForAPI);
+
+            processedFiles = result.files;
+            const consumedAllInputs = result.consumedAllInputs || false;
+
+            // If consumedAllInputs flag is set, mark all inputs as successful
+            // (used for operations that combine N inputs into fewer outputs)
+            if (consumedAllInputs) {
+              successSourceIds = validFiles.map((f) => f.fileId);
+            } else {
+              // Try to map outputs back to inputs by filename (before extension)
+              const inputBaseNames = new Map<string, FileId>();
+              for (const f of validFiles) {
+                const base = getFilenameWithoutExtension(f.name || "");
+                inputBaseNames.set(base, f.fileId);
+              }
+              const mappedSuccess: FileId[] = [];
+              for (const out of processedFiles) {
+                const base = getFilenameWithoutExtension(out.name || "");
+                const id = inputBaseNames.get(base);
+                if (id) mappedSuccess.push(id);
+              }
+              // Fallback to naive alignment if names don't match
+              if (mappedSuccess.length === 0) {
+                successSourceIds = validFiles.slice(0, processedFiles.length).map((f) => f.fileId);
+              } else {
+                successSourceIds = mappedSuccess;
+              }
+            }
+            break;
+          }
+        }
+
+        // Normalize error flags across tool types: mark failures, clear successes
+        try {
+          const allInputIds = validFiles.map((f) => f.fileId);
+          const okSet = new Set(successSourceIds);
+          // Clear errors on successes
+          for (const okId of okSet) {
+            try {
+              fileActions.clearFileError(okId);
+            } catch (_e) {
+              void _e;
+            }
+          }
+          // Mark errors on inputs that didn't succeed
+          for (const id of allInputIds) {
+            if (!okSet.has(id)) {
+              try {
+                fileActions.markFileError(id);
+              } catch (_e) {
+                void _e;
+              }
+            }
+          }
+        } catch (_e) {
+          void _e;
+        }
+
+        if (externalErrorFileIds.length > 0) {
+          // If backend told us which sources failed, prefer that mapping
+          successSourceIds = validFiles.map((f) => f.fileId).filter((id) => !externalErrorFileIds.includes(id));
+          // Also mark failed IDs immediately
+          try {
+            for (const badId of externalErrorFileIds) {
+              fileActions.markFileError(badId as FileId);
+            }
+          } catch (_e) {
+            void _e;
+          }
+        }
+
+        if (processedFiles.length > 0) {
+          actions.setFiles(processedFiles);
+
+          // Generate thumbnails and download URL concurrently
+          actions.setGeneratingThumbnails(true);
+          const [thumbnails, downloadInfo] = await Promise.all([
+            generateThumbnails(processedFiles),
+            createDownloadInfo(processedFiles, config.operationType),
+          ]);
+          actions.setGeneratingThumbnails(false);
+
+          actions.setThumbnails(thumbnails);
+
+          // Determine whether outputs are new versions of their inputs or independent artifacts.
+          // A version operation produces exactly one output per successful input, all in the same
+          // format (e.g. compress, rotate, redact: 1→1 or N→N same extension).
+          // Everything else — format conversions (ext change), merges (N→1), splits (1→N) —
+          // produces outputs that have no meaningful parent-child relationship with the inputs.
+          const isVersionOp =
+            processedFiles.length > 0 &&
+            successSourceIds.length === processedFiles.length &&
+            successSourceIds.every((id, i) => {
+              const inputFile = validFiles.find((f) => f.fileId === id);
+              const inExt = inputFile?.name.split(".").pop()?.toLowerCase();
+              const outExt = processedFiles[i].name.split(".").pop()?.toLowerCase();
+              return inExt != null && inExt === outExt;
+            });
+
+          actions.setStatus("Generating metadata for processed files...");
+          const processedFileMetadataArray = await Promise.all(
+            processedFiles.map((file) => generateProcessedFileMetadata(file)),
           );
 
-          // Only consume inputs that successfully produced outputs
-          const toConsumeInputIds = successSourceIds.filter((id) => inputFileIds.includes(id));
-          console.debug('[useToolOperation] Consuming files (version)', { inputCount: inputFileIds.length, toConsume: toConsumeInputIds.length });
-          const outputFileIds = await consumeFiles(toConsumeInputIds, outputStirlingFiles, outputStirlingFileStubs);
-          // Tell the viewer to follow the replacement file — consumeFiles prepends the new file
-          // to the list, so activeFileIndex would point to the wrong file without this.
-          if (outputFileIds.length === 1) setActiveFileId(outputFileIds[0]);
+          const { inputFileIds, inputStirlingFileStubs } = buildInputTracking(validFiles, selectors);
 
-          // Notify on desktop when processing completes
-          await notifyPdfProcessingComplete(outputFileIds.length);
+          if (isVersionOp) {
+            // Output is a modified version of the input — link it to the input's version chain.
+            // The input is removed from the workbench and replaced in-place by the output.
+            const downloadLocalPath = selectors.getStirlingFileStub(validFiles[0].fileId)?.localFilePath ?? null;
 
-          // Carry the desktop save path forward so the output can be saved back to the same file
-          if (toConsumeInputIds.length === 1 && outputFileIds.length === 1) {
-            const inputStub = selectors.getStirlingFileStub(toConsumeInputIds[0]);
-            if (inputStub?.localFilePath) {
-              fileActions.updateStirlingFileStub(outputFileIds[0], {
-                localFilePath: inputStub.localFilePath
+            const newToolOperation: ToolOperation = {
+              toolId: config.operationType,
+              timestamp: Date.now(),
+            };
+
+            const successInputStubs = successSourceIds
+              .map((id) => selectors.getStirlingFileStub(id))
+              .filter(Boolean) as StirlingFileStub[];
+
+            if (successInputStubs.length !== processedFiles.length) {
+              console.warn("[useToolOperation] Mismatch successInputStubs vs outputs", {
+                successInputStubs: successInputStubs.length,
+                outputs: processedFiles.length,
               });
             }
+
+            const { outputStirlingFileStubs, outputStirlingFiles } = buildOutputPairs(
+              processedFiles,
+              thumbnails,
+              processedFileMetadataArray,
+              (file, thumbnail, metadata, index) =>
+                createChildStub(
+                  successInputStubs[index] || inputStirlingFileStubs[index] || inputStirlingFileStubs[0],
+                  newToolOperation,
+                  file,
+                  thumbnail,
+                  metadata,
+                ),
+            );
+
+            // Only consume inputs that successfully produced outputs
+            const toConsumeInputIds = successSourceIds.filter((id) => inputFileIds.includes(id));
+            console.debug("[useToolOperation] Consuming files (version)", {
+              inputCount: inputFileIds.length,
+              toConsume: toConsumeInputIds.length,
+            });
+            const outputFileIds = await consumeFiles(toConsumeInputIds, outputStirlingFiles, outputStirlingFileStubs);
+            // Tell the viewer to follow the replacement file — consumeFiles prepends the new file
+            // to the list, so activeFileIndex would point to the wrong file without this.
+            if (outputFileIds.length === 1) setActiveFileId(outputFileIds[0]);
+
+            // Notify on desktop when processing completes
+            await notifyPdfProcessingComplete(outputFileIds.length);
+
+            // Carry the desktop save path forward so the output can be saved back to the same file
+            if (toConsumeInputIds.length === 1 && outputFileIds.length === 1) {
+              const inputStub = selectors.getStirlingFileStub(toConsumeInputIds[0]);
+              if (inputStub?.localFilePath) {
+                fileActions.updateStirlingFileStub(outputFileIds[0], {
+                  localFilePath: inputStub.localFilePath,
+                });
+              }
+            }
+
+            actions.setDownloadInfo(downloadInfo.url, downloadInfo.filename, downloadLocalPath, outputFileIds);
+
+            lastOperationRef.current = {
+              inputFiles: extractFiles(validFiles),
+              inputStirlingFileStubs: inputStirlingFileStubs.map((record) => ({ ...record })),
+              outputFileIds,
+            };
+          } else {
+            // Outputs are independent artifacts (format conversion, merge, split).
+            // Create fresh root stubs with no parent chain, then swap out only the inputs
+            // that successfully produced outputs — other workbench files are untouched.
+            const { outputStirlingFileStubs, outputStirlingFiles } = buildOutputPairs(
+              processedFiles,
+              thumbnails,
+              processedFileMetadataArray,
+              (file, thumbnail, metadata) => createNewStirlingFileStub(file, undefined, thumbnail, metadata),
+            );
+
+            const toConsumeInputIds = successSourceIds.filter((id) => inputFileIds.includes(id));
+            console.debug("[useToolOperation] Consuming files (independent)", {
+              inputCount: inputFileIds.length,
+              toConsume: toConsumeInputIds.length,
+            });
+            const outputFileIds = await consumeFiles(toConsumeInputIds, outputStirlingFiles, outputStirlingFileStubs);
+
+            // Notify on desktop when processing completes
+            await notifyPdfProcessingComplete(outputFileIds.length);
+
+            actions.setDownloadInfo(downloadInfo.url, downloadInfo.filename, null, outputFileIds);
+
+            // Send the user to the viewer for a single PDF output, otherwise the file editor
+            const isSinglePdf = processedFiles.length === 1 && processedFiles[0].type === "application/pdf";
+            navActions.setWorkbench(isSinglePdf ? "viewer" : "fileEditor");
+
+            lastOperationRef.current = {
+              inputFiles: extractFiles(validFiles),
+              inputStirlingFileStubs: inputStirlingFileStubs.map((record) => ({ ...record })),
+              outputFileIds,
+            };
           }
-
-          actions.setDownloadInfo(downloadInfo.url, downloadInfo.filename, downloadLocalPath, outputFileIds);
-
-          lastOperationRef.current = {
-            inputFiles: extractFiles(validFiles),
-            inputStirlingFileStubs: inputStirlingFileStubs.map(record => ({ ...record })),
-            outputFileIds
-          };
-
-        } else {
-          // Outputs are independent artifacts (format conversion, merge, split).
-          // Create fresh root stubs with no parent chain, then swap out only the inputs
-          // that successfully produced outputs — other workbench files are untouched.
-          const { outputStirlingFileStubs, outputStirlingFiles } = buildOutputPairs(
-            processedFiles, thumbnails, processedFileMetadataArray,
-            (file, thumbnail, metadata) => createNewStirlingFileStub(file, undefined, thumbnail, metadata)
-          );
-
-          const toConsumeInputIds = successSourceIds.filter((id) => inputFileIds.includes(id));
-          console.debug('[useToolOperation] Consuming files (independent)', { inputCount: inputFileIds.length, toConsume: toConsumeInputIds.length });
-          const outputFileIds = await consumeFiles(toConsumeInputIds, outputStirlingFiles, outputStirlingFileStubs);
-
-          // Notify on desktop when processing completes
-          await notifyPdfProcessingComplete(outputFileIds.length);
-
-          actions.setDownloadInfo(downloadInfo.url, downloadInfo.filename, null, outputFileIds);
-
-          // Send the user to the viewer for a single PDF output, otherwise the file editor
-          const isSinglePdf = processedFiles.length === 1
-            && processedFiles[0].type === 'application/pdf';
-          navActions.setWorkbench(isSinglePdf ? 'viewer' : 'fileEditor');
-
-          lastOperationRef.current = {
-            inputFiles: extractFiles(validFiles),
-            inputStirlingFileStubs: inputStirlingFileStubs.map(record => ({ ...record })),
-            outputFileIds
-          };
+        }
+      } catch (error: any) {
+        try {
+          const handled = await handle422Error(error, (id) => fileActions.markFileError(id as FileId));
+          if (handled) {
+            actions.setStatus("Process failed due to invalid/corrupted file(s)");
+            return;
+          }
+        } catch (_e) {
+          void _e;
         }
 
+        const errorMessage = config.getErrorMessage?.(error) || extractErrorMessage(error);
+        actions.setError(errorMessage);
+        actions.setStatus("");
+      } finally {
+        window.removeEventListener(FILE_EVENTS.markError, errorListener as EventListener);
+        actions.setLoading(false);
+        actions.setProgress(null);
       }
-
-    } catch (error: any) {
-      try {
-        const handled = await handle422Error(error, (id) => fileActions.markFileError(id as FileId));
-        if (handled) {
-          actions.setStatus('Process failed due to invalid/corrupted file(s)');
-          return;
-        }
-      } catch (_e) { void _e; }
-
-      const errorMessage = config.getErrorMessage?.(error) || extractErrorMessage(error);
-      actions.setError(errorMessage);
-      actions.setStatus('');
-    } finally {
-      window.removeEventListener(FILE_EVENTS.markError, errorListener as EventListener);
-      actions.setLoading(false);
-      actions.setProgress(null);
-    }
-  }, [t, config, actions, addFiles, consumeFiles, navActions, processFiles, generateThumbnails, createDownloadInfo, cleanupBlobUrls, extractZipFiles, willUseCloud, checkCredits]);
+    },
+    [
+      t,
+      config,
+      actions,
+      addFiles,
+      consumeFiles,
+      navActions,
+      processFiles,
+      generateThumbnails,
+      createDownloadInfo,
+      cleanupBlobUrls,
+      extractZipFiles,
+      willUseCloud,
+      checkCredits,
+    ],
+  );
 
   const cancelOperation = useCallback(() => {
     cancelApiCalls();
     actions.setLoading(false);
     actions.setProgress(null);
-    actions.setStatus('Operation cancelled');
+    actions.setStatus("Operation cancelled");
   }, [cancelApiCalls, actions]);
 
   const resetResults = useCallback(() => {
@@ -450,7 +493,7 @@ export const useToolOperation = <TParams>(
 
   const undoOperation = useCallback(async () => {
     if (!lastOperationRef.current) {
-      actions.setError(t('noOperationToUndo', 'No operation to undo'));
+      actions.setError(t("noOperationToUndo", "No operation to undo"));
       return;
     }
 
@@ -458,12 +501,12 @@ export const useToolOperation = <TParams>(
 
     // Validate that we have data to undo
     if (inputFiles.length === 0 || inputStirlingFileStubs.length === 0) {
-      actions.setError(t('invalidUndoData', 'Cannot undo: invalid operation data'));
+      actions.setError(t("invalidUndoData", "Cannot undo: invalid operation data"));
       return;
     }
 
     if (outputFileIds.length === 0) {
-      actions.setError(t('noFilesToUndo', 'Cannot undo: no files were processed in the last operation'));
+      actions.setError(t("noFilesToUndo", "Cannot undo: no files were processed in the last operation"));
       return;
     }
 
@@ -476,21 +519,20 @@ export const useToolOperation = <TParams>(
       lastOperationRef.current = null;
 
       // Show success message
-      actions.setStatus(t('undoSuccess', 'Operation undone successfully'));
-
+      actions.setStatus(t("undoSuccess", "Operation undone successfully"));
     } catch (error: any) {
       let errorMessage = extractErrorMessage(error);
 
       // Provide more specific error messages based on error type
-      if (error.message?.includes('Mismatch between input files')) {
-        errorMessage = t('undoDataMismatch', 'Cannot undo: operation data is corrupted');
-      } else if (error.message?.includes('IndexedDB')) {
-        errorMessage = t('undoStorageError', 'Undo completed but some files could not be saved to storage');
-      } else if (error.name === 'QuotaExceededError') {
-        errorMessage = t('undoQuotaError', 'Cannot undo: insufficient storage space');
+      if (error.message?.includes("Mismatch between input files")) {
+        errorMessage = t("undoDataMismatch", "Cannot undo: operation data is corrupted");
+      } else if (error.message?.includes("IndexedDB")) {
+        errorMessage = t("undoStorageError", "Undo completed but some files could not be saved to storage");
+      } else if (error.name === "QuotaExceededError") {
+        errorMessage = t("undoQuotaError", "Cannot undo: insufficient storage space");
       }
 
-      actions.setError(`${t('undoFailed', 'Failed to undo operation')}: ${errorMessage}`);
+      actions.setError(`${t("undoFailed", "Failed to undo operation")}: ${errorMessage}`);
 
       // Don't clear the operation data if undo failed - user might want to try again
     }
@@ -516,6 +558,6 @@ export const useToolOperation = <TParams>(
     resetResults,
     clearError: actions.clearError,
     cancelOperation,
-    undoOperation
+    undoOperation,
   };
 };
diff --git a/frontend/src/core/hooks/tools/shared/useToolResources.ts b/frontend/src/core/hooks/tools/shared/useToolResources.ts
index a80c2c298b..efd665b123 100644
--- a/frontend/src/core/hooks/tools/shared/useToolResources.ts
+++ b/frontend/src/core/hooks/tools/shared/useToolResources.ts
@@ -1,24 +1,23 @@
-import { useState, useCallback, useEffect, useRef } from 'react';
-import { generateThumbnailForFile, generateThumbnailWithMetadata, ThumbnailWithMetadata } from '@app/utils/thumbnailUtils';
-import { zipFileService } from '@app/services/zipFileService';
-import { usePreferences } from '@app/contexts/PreferencesContext';
-
+import { useState, useCallback, useEffect, useRef } from "react";
+import { generateThumbnailForFile, generateThumbnailWithMetadata, ThumbnailWithMetadata } from "@app/utils/thumbnailUtils";
+import { zipFileService } from "@app/services/zipFileService";
+import { usePreferences } from "@app/contexts/PreferencesContext";
 
 export const useToolResources = () => {
   const { preferences } = usePreferences();
   const [blobUrls, setBlobUrls] = useState<string[]>([]);
 
   const addBlobUrl = useCallback((url: string) => {
-    setBlobUrls(prev => [...prev, url]);
+    setBlobUrls((prev) => [...prev, url]);
   }, []);
 
   const cleanupBlobUrls = useCallback(() => {
-    setBlobUrls(prev => {
-      prev.forEach(url => {
+    setBlobUrls((prev) => {
+      prev.forEach((url) => {
         try {
           URL.revokeObjectURL(url);
         } catch (error) {
-          console.warn('Failed to revoke blob URL:', error);
+          console.warn("Failed to revoke blob URL:", error);
         }
       });
       return [];
@@ -34,11 +33,11 @@ export const useToolResources = () => {
 
   useEffect(() => {
     return () => {
-      blobUrlsRef.current.forEach(url => {
+      blobUrlsRef.current.forEach((url) => {
         try {
           URL.revokeObjectURL(url);
         } catch (error) {
-          console.warn('Failed to revoke blob URL during cleanup:', error);
+          console.warn("Failed to revoke blob URL during cleanup:", error);
         }
       });
     };
@@ -56,7 +55,7 @@ export const useToolResources = () => {
         thumbnails.push(thumbnail);
       } catch (error) {
         console.warn(`🖼️ Failed to generate thumbnail for ${file.name}:`, error);
-        thumbnails.push('');
+        thumbnails.push("");
       }
     }
 
@@ -75,49 +74,54 @@ export const useToolResources = () => {
         results.push(result);
       } catch (error) {
         console.warn(`🖼️ Failed to generate thumbnail with metadata for ${file.name}:`, error);
-        results.push({ thumbnail: '', pageCount: 1 });
+        results.push({ thumbnail: "", pageCount: 1 });
       }
     }
 
-    console.log(`🖼️ useToolResources.generateThumbnailsWithMetadata: Complete. Generated ${results.length}/${files.length} thumbnails with metadata`);
+    console.log(
+      `🖼️ useToolResources.generateThumbnailsWithMetadata: Complete. Generated ${results.length}/${files.length} thumbnails with metadata`,
+    );
     return results;
   }, []);
 
-  const extractZipFiles = useCallback(async (
-    zipBlob: Blob, 
-    skipAutoUnzip = false,
-    confirmLargeExtraction?: (fileCount: number, fileName: string) => Promise<boolean>
-  ): Promise<File[]> => {
-    try {
-      return await zipFileService.extractWithPreferences(zipBlob, {
-        autoUnzip: preferences.autoUnzip,
-        autoUnzipFileLimit: preferences.autoUnzipFileLimit,
-        skipAutoUnzip,
-        confirmLargeExtraction
-      });
-    } catch (error) {
-      console.error('useToolResources.extractZipFiles - Error:', error);
-      return [];
-    }
-  }, [preferences.autoUnzip, preferences.autoUnzipFileLimit]);
+  const extractZipFiles = useCallback(
+    async (
+      zipBlob: Blob,
+      skipAutoUnzip = false,
+      confirmLargeExtraction?: (fileCount: number, fileName: string) => Promise<boolean>,
+    ): Promise<File[]> => {
+      try {
+        return await zipFileService.extractWithPreferences(zipBlob, {
+          autoUnzip: preferences.autoUnzip,
+          autoUnzipFileLimit: preferences.autoUnzipFileLimit,
+          skipAutoUnzip,
+          confirmLargeExtraction,
+        });
+      } catch (error) {
+        console.error("useToolResources.extractZipFiles - Error:", error);
+        return [];
+      }
+    },
+    [preferences.autoUnzip, preferences.autoUnzipFileLimit],
+  );
 
-  const createDownloadInfo = useCallback(async (
-    files: File[],
-    operationType: string
-  ): Promise<{ url: string; filename: string }> => {
-    if (files.length === 1) {
-      const url = URL.createObjectURL(files[0]);
+  const createDownloadInfo = useCallback(
+    async (files: File[], operationType: string): Promise<{ url: string; filename: string }> => {
+      if (files.length === 1) {
+        const url = URL.createObjectURL(files[0]);
+        addBlobUrl(url);
+        return { url, filename: files[0].name };
+      }
+
+      // Multiple files - create zip using shared service
+      const { zipFile } = await zipFileService.createZipFromFiles(files, `${operationType}_results.zip`);
+      const url = URL.createObjectURL(zipFile);
       addBlobUrl(url);
-      return { url, filename: files[0].name };
-    }
 
-    // Multiple files - create zip using shared service
-    const { zipFile } = await zipFileService.createZipFromFiles(files, `${operationType}_results.zip`);
-    const url = URL.createObjectURL(zipFile);
-    addBlobUrl(url);
-
-    return { url, filename: zipFile.name };
-  }, [addBlobUrl]);
+      return { url, filename: zipFile.name };
+    },
+    [addBlobUrl],
+  );
 
   return {
     generateThumbnails,
diff --git a/frontend/src/core/hooks/tools/shared/useToolState.ts b/frontend/src/core/hooks/tools/shared/useToolState.ts
index 6c7e3b821f..7db706ee22 100644
--- a/frontend/src/core/hooks/tools/shared/useToolState.ts
+++ b/frontend/src/core/hooks/tools/shared/useToolState.ts
@@ -1,4 +1,4 @@
-import { useReducer, useCallback } from 'react';
+import { useReducer, useCallback } from "react";
 
 export interface ProcessingProgress {
   current: number;
@@ -21,61 +21,64 @@ export interface OperationState {
 }
 
 type OperationAction =
-  | { type: 'SET_LOADING'; payload: boolean }
-  | { type: 'SET_FILES'; payload: File[] }
-  | { type: 'SET_THUMBNAILS'; payload: string[] }
-  | { type: 'SET_GENERATING_THUMBNAILS'; payload: boolean }
-  | { type: 'SET_DOWNLOAD_INFO'; payload: { url: string | null; filename: string; localPath?: string | null; outputFileIds?: string[] | null } }
-  | { type: 'SET_STATUS'; payload: string }
-  | { type: 'SET_ERROR'; payload: string | null }
-  | { type: 'SET_PROGRESS'; payload: ProcessingProgress | null }
-  | { type: 'RESET_RESULTS' }
-  | { type: 'CLEAR_ERROR' };
+  | { type: "SET_LOADING"; payload: boolean }
+  | { type: "SET_FILES"; payload: File[] }
+  | { type: "SET_THUMBNAILS"; payload: string[] }
+  | { type: "SET_GENERATING_THUMBNAILS"; payload: boolean }
+  | {
+      type: "SET_DOWNLOAD_INFO";
+      payload: { url: string | null; filename: string; localPath?: string | null; outputFileIds?: string[] | null };
+    }
+  | { type: "SET_STATUS"; payload: string }
+  | { type: "SET_ERROR"; payload: string | null }
+  | { type: "SET_PROGRESS"; payload: ProcessingProgress | null }
+  | { type: "RESET_RESULTS" }
+  | { type: "CLEAR_ERROR" };
 
 const initialState: OperationState = {
   files: [],
   thumbnails: [],
   isGeneratingThumbnails: false,
   downloadUrl: null,
-  downloadFilename: '',
+  downloadFilename: "",
   downloadLocalPath: null,
   outputFileIds: null,
   isLoading: false,
-  status: '',
+  status: "",
   errorMessage: null,
   progress: null,
 };
 
 const operationReducer = (state: OperationState, action: OperationAction): OperationState => {
   switch (action.type) {
-    case 'SET_LOADING':
+    case "SET_LOADING":
       return { ...state, isLoading: action.payload };
-    case 'SET_FILES':
+    case "SET_FILES":
       return { ...state, files: action.payload };
-    case 'SET_THUMBNAILS':
+    case "SET_THUMBNAILS":
       return { ...state, thumbnails: action.payload };
-    case 'SET_GENERATING_THUMBNAILS':
+    case "SET_GENERATING_THUMBNAILS":
       return { ...state, isGeneratingThumbnails: action.payload };
-    case 'SET_DOWNLOAD_INFO':
+    case "SET_DOWNLOAD_INFO":
       return {
         ...state,
         downloadUrl: action.payload.url,
         downloadFilename: action.payload.filename,
         downloadLocalPath: action.payload.localPath ?? null,
-        outputFileIds: action.payload.outputFileIds ?? null
+        outputFileIds: action.payload.outputFileIds ?? null,
       };
-    case 'SET_STATUS':
+    case "SET_STATUS":
       return { ...state, status: action.payload };
-    case 'SET_ERROR':
+    case "SET_ERROR":
       return { ...state, errorMessage: action.payload };
-    case 'SET_PROGRESS':
+    case "SET_PROGRESS":
       return { ...state, progress: action.payload };
-    case 'RESET_RESULTS':
+    case "RESET_RESULTS":
       return {
         ...initialState,
         isLoading: state.isLoading, // Preserve loading state during reset
       };
-    case 'CLEAR_ERROR':
+    case "CLEAR_ERROR":
       return { ...state, errorMessage: null };
     default:
       return state;
@@ -86,45 +89,50 @@ export const useToolState = () => {
   const [state, dispatch] = useReducer(operationReducer, initialState);
 
   const setLoading = useCallback((loading: boolean) => {
-    dispatch({ type: 'SET_LOADING', payload: loading });
+    dispatch({ type: "SET_LOADING", payload: loading });
   }, []);
 
   const setFiles = useCallback((files: File[]) => {
-    dispatch({ type: 'SET_FILES', payload: files });
+    dispatch({ type: "SET_FILES", payload: files });
   }, []);
 
   const setThumbnails = useCallback((thumbnails: string[]) => {
-    console.log(`🔧 useToolState.setThumbnails: Setting ${thumbnails.length} thumbnails:`, 
-      thumbnails.map((t, i) => `[${i}]: ${t ? 'PRESENT' : 'MISSING'}`));
-    dispatch({ type: 'SET_THUMBNAILS', payload: thumbnails });
+    console.log(
+      `🔧 useToolState.setThumbnails: Setting ${thumbnails.length} thumbnails:`,
+      thumbnails.map((t, i) => `[${i}]: ${t ? "PRESENT" : "MISSING"}`),
+    );
+    dispatch({ type: "SET_THUMBNAILS", payload: thumbnails });
   }, []);
 
   const setGeneratingThumbnails = useCallback((generating: boolean) => {
-    dispatch({ type: 'SET_GENERATING_THUMBNAILS', payload: generating });
+    dispatch({ type: "SET_GENERATING_THUMBNAILS", payload: generating });
   }, []);
 
-  const setDownloadInfo = useCallback((url: string | null, filename: string, localPath?: string | null, outputFileIds?: string[] | null) => {
-    dispatch({ type: 'SET_DOWNLOAD_INFO', payload: { url, filename, localPath, outputFileIds } });
-  }, []);
+  const setDownloadInfo = useCallback(
+    (url: string | null, filename: string, localPath?: string | null, outputFileIds?: string[] | null) => {
+      dispatch({ type: "SET_DOWNLOAD_INFO", payload: { url, filename, localPath, outputFileIds } });
+    },
+    [],
+  );
 
   const setStatus = useCallback((status: string) => {
-    dispatch({ type: 'SET_STATUS', payload: status });
+    dispatch({ type: "SET_STATUS", payload: status });
   }, []);
 
   const setError = useCallback((error: string | null) => {
-    dispatch({ type: 'SET_ERROR', payload: error });
+    dispatch({ type: "SET_ERROR", payload: error });
   }, []);
 
   const setProgress = useCallback((progress: ProcessingProgress | null) => {
-    dispatch({ type: 'SET_PROGRESS', payload: progress });
+    dispatch({ type: "SET_PROGRESS", payload: progress });
   }, []);
 
   const resetResults = useCallback(() => {
-    dispatch({ type: 'RESET_RESULTS' });
+    dispatch({ type: "RESET_RESULTS" });
   }, []);
 
   const clearError = useCallback(() => {
-    dispatch({ type: 'CLEAR_ERROR' });
+    dispatch({ type: "CLEAR_ERROR" });
   }, []);
 
   return {
diff --git a/frontend/src/core/hooks/tools/shared/useViewScopedFiles.ts b/frontend/src/core/hooks/tools/shared/useViewScopedFiles.ts
index 03d652446a..87f5fd93e6 100644
--- a/frontend/src/core/hooks/tools/shared/useViewScopedFiles.ts
+++ b/frontend/src/core/hooks/tools/shared/useViewScopedFiles.ts
@@ -1,8 +1,8 @@
-import { useMemo } from 'react';
-import { useAllFiles, useSelectedFiles } from '@app/contexts/FileContext';
-import { useViewer } from '@app/contexts/ViewerContext';
-import { useNavigationState } from '@app/contexts/NavigationContext';
-import { StirlingFile } from '@app/types/fileContext';
+import { useMemo } from "react";
+import { useAllFiles, useSelectedFiles } from "@app/contexts/FileContext";
+import { useViewer } from "@app/contexts/ViewerContext";
+import { useNavigationState } from "@app/contexts/NavigationContext";
+import { StirlingFile } from "@app/types/fileContext";
 
 /**
  * Returns the effective file set for tool operations.
@@ -18,12 +18,12 @@ export function useViewScopedFiles(ignoreViewerScope = false): StirlingFile[] {
   const { selectedFiles } = useSelectedFiles();
 
   return useMemo(() => {
-    if (workbench === 'viewer' && !ignoreViewerScope) {
+    if (workbench === "viewer" && !ignoreViewerScope) {
       const viewerFile = allFiles[activeFileIndex];
       return viewerFile ? [viewerFile] : allFiles;
     }
 
-    if (workbench === 'fileEditor') {
+    if (workbench === "fileEditor") {
       return selectedFiles;
     }
 
diff --git a/frontend/src/core/hooks/tools/showJS/useShowJSOperation.ts b/frontend/src/core/hooks/tools/showJS/useShowJSOperation.ts
index 834402d5f4..e43ffb3f97 100644
--- a/frontend/src/core/hooks/tools/showJS/useShowJSOperation.ts
+++ b/frontend/src/core/hooks/tools/showJS/useShowJSOperation.ts
@@ -1,135 +1,133 @@
-import { useCallback, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import apiClient from '@app/services/apiClient';
-import type { ToolOperationHook } from '@app/hooks/tools/shared/useToolOperation';
-import type { StirlingFile } from '@app/types/fileContext';
-import { extractErrorMessage } from '@app/utils/toolErrorHandler';
-import type { ShowJSParameters } from '@app/hooks/tools/showJS/useShowJSParameters';
+import { useCallback, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import apiClient from "@app/services/apiClient";
+import type { ToolOperationHook } from "@app/hooks/tools/shared/useToolOperation";
+import type { StirlingFile } from "@app/types/fileContext";
+import { extractErrorMessage } from "@app/utils/toolErrorHandler";
+import type { ShowJSParameters } from "@app/hooks/tools/showJS/useShowJSParameters";
 
 export interface ShowJSOperationHook extends ToolOperationHook<ShowJSParameters> {
-	scriptText: string | null;
+  scriptText: string | null;
 }
 
 export const useShowJSOperation = (): ShowJSOperationHook => {
-	const { t } = useTranslation();
+  const { t } = useTranslation();
 
-	const [isLoading, setIsLoading] = useState(false);
-	const [status, setStatus] = useState('');
-	const [errorMessage, setErrorMessage] = useState<string | null>(null);
-	const [files, setFiles] = useState<File[]>([]);
-	const [downloadUrl, setDownloadUrl] = useState<string | null>(null);
-	const [downloadFilename, setDownloadFilename] = useState('');
-	const [scriptText, setScriptText] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [status, setStatus] = useState("");
+  const [errorMessage, setErrorMessage] = useState<string | null>(null);
+  const [files, setFiles] = useState<File[]>([]);
+  const [downloadUrl, setDownloadUrl] = useState<string | null>(null);
+  const [downloadFilename, setDownloadFilename] = useState("");
+  const [scriptText, setScriptText] = useState<string | null>(null);
 
-	const cancelRequested = useRef(false);
-	const previousUrl = useRef<string | null>(null);
+  const cancelRequested = useRef(false);
+  const previousUrl = useRef<string | null>(null);
 
-	const cleanupDownloadUrl = useCallback(() => {
-		if (previousUrl.current) {
-			URL.revokeObjectURL(previousUrl.current);
-			previousUrl.current = null;
-		}
-	}, []);
+  const cleanupDownloadUrl = useCallback(() => {
+    if (previousUrl.current) {
+      URL.revokeObjectURL(previousUrl.current);
+      previousUrl.current = null;
+    }
+  }, []);
 
-	const resetResults = useCallback(() => {
-		cancelRequested.current = false;
-		setScriptText(null);
-		setFiles([]);
-		cleanupDownloadUrl();
-		setDownloadUrl(null);
-		setDownloadFilename('');
-		setStatus('');
-		setErrorMessage(null);
-	}, [cleanupDownloadUrl]);
+  const resetResults = useCallback(() => {
+    cancelRequested.current = false;
+    setScriptText(null);
+    setFiles([]);
+    cleanupDownloadUrl();
+    setDownloadUrl(null);
+    setDownloadFilename("");
+    setStatus("");
+    setErrorMessage(null);
+  }, [cleanupDownloadUrl]);
 
-	const clearError = useCallback(() => {
-		setErrorMessage(null);
-	}, []);
+  const clearError = useCallback(() => {
+    setErrorMessage(null);
+  }, []);
 
-	const executeOperation = useCallback(
-		async (_params: ShowJSParameters, selectedFiles: StirlingFile[]) => {
-			if (selectedFiles.length === 0) {
-				setErrorMessage(t('noFileSelected', 'No files selected'));
-				return;
-			}
+  const executeOperation = useCallback(
+    async (_params: ShowJSParameters, selectedFiles: StirlingFile[]) => {
+      if (selectedFiles.length === 0) {
+        setErrorMessage(t("noFileSelected", "No files selected"));
+        return;
+      }
 
-			cancelRequested.current = false;
-			setIsLoading(true);
-			setStatus(t('showJS.processing', 'Extracting JavaScript...'));
-			setErrorMessage(null);
-			setScriptText(null);
-			setFiles([]);
-			cleanupDownloadUrl();
-			setDownloadUrl(null);
-			setDownloadFilename('');
+      cancelRequested.current = false;
+      setIsLoading(true);
+      setStatus(t("showJS.processing", "Extracting JavaScript..."));
+      setErrorMessage(null);
+      setScriptText(null);
+      setFiles([]);
+      cleanupDownloadUrl();
+      setDownloadUrl(null);
+      setDownloadFilename("");
 
-			try {
-				const file = selectedFiles[0];
-				const formData = new FormData();
-				formData.append('fileInput', file);
+      try {
+        const file = selectedFiles[0];
+        const formData = new FormData();
+        formData.append("fileInput", file);
 
-				const response = await apiClient.post('/api/v1/misc/show-javascript', formData, {
-					headers: { 'Content-Type': 'multipart/form-data' },
-					responseType: 'text',
-				});
+        const response = await apiClient.post("/api/v1/misc/show-javascript", formData, {
+          headers: { "Content-Type": "multipart/form-data" },
+          responseType: "text",
+        });
 
-				const text: string = typeof response.data === 'string' ? response.data : '';
-				setScriptText(text);
+        const text: string = typeof response.data === "string" ? response.data : "";
+        setScriptText(text);
 
-				// Optional: prepare a downloadable file
-				const outFile = new File([text], (file.name?.replace(/\.[^.]+$/, '') || 'extracted') + '.js', {
-					type: 'application/javascript',
-				});
-				setFiles([outFile]);
-				const blobUrl = URL.createObjectURL(outFile);
-				previousUrl.current = blobUrl;
-				setDownloadUrl(blobUrl);
-				setDownloadFilename(outFile.name);
+        // Optional: prepare a downloadable file
+        const outFile = new File([text], (file.name?.replace(/\.[^.]+$/, "") || "extracted") + ".js", {
+          type: "application/javascript",
+        });
+        setFiles([outFile]);
+        const blobUrl = URL.createObjectURL(outFile);
+        previousUrl.current = blobUrl;
+        setDownloadUrl(blobUrl);
+        setDownloadFilename(outFile.name);
 
-				setStatus(t('showJS.done', 'JavaScript extracted'));
-			} catch (error: unknown) {
-				setErrorMessage(extractErrorMessage(error));
-				setStatus('');
-			} finally {
-				setIsLoading(false);
-			}
-		},
-		[t, cleanupDownloadUrl]
-	);
+        setStatus(t("showJS.done", "JavaScript extracted"));
+      } catch (error: unknown) {
+        setErrorMessage(extractErrorMessage(error));
+        setStatus("");
+      } finally {
+        setIsLoading(false);
+      }
+    },
+    [t, cleanupDownloadUrl],
+  );
 
-	const cancelOperation = useCallback(() => {
-		cancelRequested.current = true;
-		setIsLoading(false);
-		setStatus(t('operationCancelled', 'Operation cancelled'));
-	}, [t]);
+  const cancelOperation = useCallback(() => {
+    cancelRequested.current = true;
+    setIsLoading(false);
+    setStatus(t("operationCancelled", "Operation cancelled"));
+  }, [t]);
 
-	const undoOperation = useCallback(async () => {
-		// No-op for this tool
-		setStatus(t('nothingToUndo', 'Nothing to undo'));
-	}, [t]);
+  const undoOperation = useCallback(async () => {
+    // No-op for this tool
+    setStatus(t("nothingToUndo", "Nothing to undo"));
+  }, [t]);
 
-	return {
-		// State (align with ToolOperationHook)
-		files,
-		thumbnails: [],
-		isGeneratingThumbnails: false,
-		downloadUrl,
-		downloadFilename,
-		isLoading,
-		status,
-		errorMessage,
-		progress: null,
+  return {
+    // State (align with ToolOperationHook)
+    files,
+    thumbnails: [],
+    isGeneratingThumbnails: false,
+    downloadUrl,
+    downloadFilename,
+    isLoading,
+    status,
+    errorMessage,
+    progress: null,
 
-		// Custom state
-		scriptText,
+    // Custom state
+    scriptText,
 
-		// Actions
-		executeOperation,
-		resetResults,
-		clearError,
-		cancelOperation,
-		undoOperation,
-	};
+    // Actions
+    executeOperation,
+    resetResults,
+    clearError,
+    cancelOperation,
+    undoOperation,
+  };
 };
-
-
diff --git a/frontend/src/core/hooks/tools/showJS/useShowJSParameters.ts b/frontend/src/core/hooks/tools/showJS/useShowJSParameters.ts
index 67bcaca568..7ff0acebe9 100644
--- a/frontend/src/core/hooks/tools/showJS/useShowJSParameters.ts
+++ b/frontend/src/core/hooks/tools/showJS/useShowJSParameters.ts
@@ -1,5 +1,5 @@
-import { useBaseParameters, type BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
-import { BaseParameters } from '@app/types/parameters';
+import { useBaseParameters, type BaseParametersHook } from "@app/hooks/tools/shared/useBaseParameters";
+import { BaseParameters } from "@app/types/parameters";
 
 export interface ShowJSParameters extends BaseParameters {
   // Extends BaseParameters - ready for future parameter additions if needed
@@ -9,13 +9,11 @@ export const defaultParameters: ShowJSParameters = {
   // No parameters needed
 };
 
-
 export type ShowJSParametersHook = BaseParametersHook<ShowJSParameters>;
 
 export const useShowJSParameters = (): ShowJSParametersHook => {
-	return useBaseParameters({
-		defaultParameters,
-		endpointName: 'show-javascript',
-	});
+  return useBaseParameters({
+    defaultParameters,
+    endpointName: "show-javascript",
+  });
 };
-
diff --git a/frontend/src/core/hooks/tools/sign/useSavedSignatures.ts b/frontend/src/core/hooks/tools/sign/useSavedSignatures.ts
index 98ce1f97c7..4429d31e12 100644
--- a/frontend/src/core/hooks/tools/sign/useSavedSignatures.ts
+++ b/frontend/src/core/hooks/tools/sign/useSavedSignatures.ts
@@ -1,12 +1,7 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { signatureStorageService, type StorageType } from '@app/services/signatureStorageService';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
-import type {
-  SavedSignature,
-  SavedSignaturePayload,
-  SavedSignatureType,
-  SignatureScope,
-} from '@app/types/signature';
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { signatureStorageService, type StorageType } from "@app/services/signatureStorageService";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
+import type { SavedSignature, SavedSignaturePayload, SavedSignatureType, SignatureScope } from "@app/types/signature";
 
 export const MAX_SAVED_SIGNATURES_BACKEND = 20; // Backend limit per user
 export const MAX_SAVED_SIGNATURES_LOCALSTORAGE = 10; // LocalStorage limit
@@ -15,12 +10,12 @@ export type { SavedSignature, SavedSignaturePayload, SavedSignatureType, Signatu
 
 export type AddSignatureResult =
   | { success: true; signature: SavedSignature }
-  | { success: false; reason: 'limit' | 'invalid' };
+  | { success: false; reason: "limit" | "invalid" };
 
-const isSupportedEnvironment = () => typeof window !== 'undefined' && typeof window.localStorage !== 'undefined';
+const isSupportedEnvironment = () => typeof window !== "undefined" && typeof window.localStorage !== "undefined";
 
 const generateId = () => {
-  if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {
+  if (typeof crypto !== "undefined" && typeof crypto.randomUUID === "function") {
     return crypto.randomUUID();
   }
   return `sig_${Date.now().toString(36)}_${Math.random().toString(36).slice(2, 8)}`;
@@ -44,7 +39,7 @@ export const useSavedSignatures = () => {
         setSavedSignatures(signatures);
         setStorageType(type);
       } catch (error) {
-        console.error('[useSavedSignatures] Failed to load signatures:', error);
+        console.error("[useSavedSignatures] Failed to load signatures:", error);
       } finally {
         setIsLoading(false);
       }
@@ -55,8 +50,8 @@ export const useSavedSignatures = () => {
 
   // Attempt migration from localStorage to backend when backend becomes available
   useEffect(() => {
-    if (storageType === 'backend' && !isLoading) {
-      signatureStorageService.migrateToBackend().then(result => {
+    if (storageType === "backend" && !isLoading) {
+      signatureStorageService.migrateToBackend().then((result) => {
         if (result.migrated > 0) {
           console.log(`[useSavedSignatures] Migrated ${result.migrated} signatures to backend`);
           // Reload after migration
@@ -68,7 +63,7 @@ export const useSavedSignatures = () => {
 
   // Listen for storage events (for localStorage only)
   useEffect(() => {
-    if (!isSupportedEnvironment() || storageType !== 'localStorage') {
+    if (!isSupportedEnvironment() || storageType !== "localStorage") {
       return;
     }
 
@@ -76,83 +71,86 @@ export const useSavedSignatures = () => {
       signatureStorageService.loadSignatures().then(setSavedSignatures);
     };
 
-    window.addEventListener('storage', syncFromStorage);
-    return () => window.removeEventListener('storage', syncFromStorage);
+    window.addEventListener("storage", syncFromStorage);
+    return () => window.removeEventListener("storage", syncFromStorage);
   }, [storageType]);
 
   // Different limits for backend vs localStorage
-  const maxLimit = storageType === 'backend' ? MAX_SAVED_SIGNATURES_BACKEND : MAX_SAVED_SIGNATURES_LOCALSTORAGE;
+  const maxLimit = storageType === "backend" ? MAX_SAVED_SIGNATURES_BACKEND : MAX_SAVED_SIGNATURES_LOCALSTORAGE;
   const isAtCapacity = savedSignatures.length >= maxLimit;
 
   const addSignature = useCallback(
     async (payload: SavedSignaturePayload, label?: string, scope?: SignatureScope): Promise<AddSignatureResult> => {
       if (
-        (payload.type === 'text' && !payload.signerName.trim()) ||
-        ((payload.type === 'canvas' || payload.type === 'image') && !payload.dataUrl)
+        (payload.type === "text" && !payload.signerName.trim()) ||
+        ((payload.type === "canvas" || payload.type === "image") && !payload.dataUrl)
       ) {
-        return { success: false, reason: 'invalid' };
+        return { success: false, reason: "invalid" };
       }
 
       if (isAtCapacity) {
-        return { success: false, reason: 'limit' };
+        return { success: false, reason: "limit" };
       }
 
       const timestamp = Date.now();
       const newSignature: SavedSignature = {
         ...payload,
         id: generateId(),
-        label: (label || 'Signature').trim() || 'Signature',
-        scope: scope || (storageType === 'backend' ? 'personal' : 'localStorage'),
+        label: (label || "Signature").trim() || "Signature",
+        scope: scope || (storageType === "backend" ? "personal" : "localStorage"),
         createdAt: timestamp,
         updatedAt: timestamp,
       };
 
       try {
         await signatureStorageService.saveSignature(newSignature);
-        setSavedSignatures(prev => [newSignature, ...prev]);
+        setSavedSignatures((prev) => [newSignature, ...prev]);
         return { success: true, signature: newSignature };
       } catch (error) {
-        console.error('[useSavedSignatures] Failed to save signature:', error);
-        return { success: false, reason: 'invalid' };
+        console.error("[useSavedSignatures] Failed to save signature:", error);
+        return { success: false, reason: "invalid" };
       }
     },
-    [savedSignatures.length, storageType]
+    [savedSignatures.length, storageType],
   );
 
   const removeSignature = useCallback(async (id: string) => {
     try {
       await signatureStorageService.deleteSignature(id);
-      setSavedSignatures(prev => prev.filter(entry => entry.id !== id));
+      setSavedSignatures((prev) => prev.filter((entry) => entry.id !== id));
     } catch (error) {
-      console.error('[useSavedSignatures] Failed to delete signature:', error);
+      console.error("[useSavedSignatures] Failed to delete signature:", error);
     }
   }, []);
 
-  const updateSignatureLabel = useCallback(async (id: string, nextLabel: string) => {
-    try {
-      await signatureStorageService.updateSignatureLabel(id, nextLabel);
-      // Reload signatures to get updated data from backend
-      if (storageType === 'backend') {
-        const signatures = await signatureStorageService.loadSignatures();
-        setSavedSignatures(signatures);
-      } else {
-        // For localStorage, update in place
-        setSavedSignatures(prev =>
-          prev.map(entry =>
-            entry.id === id
-              ? { ...entry, label: nextLabel.trim() || entry.label || 'Signature', updatedAt: Date.now() }
-              : entry
-          )
-        );
+  const updateSignatureLabel = useCallback(
+    async (id: string, nextLabel: string) => {
+      try {
+        await signatureStorageService.updateSignatureLabel(id, nextLabel);
+        // Reload signatures to get updated data from backend
+        if (storageType === "backend") {
+          const signatures = await signatureStorageService.loadSignatures();
+          setSavedSignatures(signatures);
+        } else {
+          // For localStorage, update in place
+          setSavedSignatures((prev) =>
+            prev.map((entry) =>
+              entry.id === id
+                ? { ...entry, label: nextLabel.trim() || entry.label || "Signature", updatedAt: Date.now() }
+                : entry,
+            ),
+          );
+        }
+      } catch (error) {
+        console.error("[useSavedSignatures] Failed to update signature label:", error);
       }
-    } catch (error) {
-      console.error('[useSavedSignatures] Failed to update signature label:', error);
-    }
-  }, [storageType]);
+    },
+    [storageType],
+  );
 
   const replaceSignature = useCallback(
     async (id: string, payload: SavedSignaturePayload) => {
-      const existing = savedSignatures.find(s => s.id === id);
+      const existing = savedSignatures.find((s) => s.id === id);
       if (!existing) return;
 
       const updated: SavedSignature = {
@@ -163,20 +161,20 @@ export const useSavedSignatures = () => {
 
       try {
         await signatureStorageService.saveSignature(updated);
-        setSavedSignatures(prev => prev.map(entry => (entry.id === id ? updated : entry)));
+        setSavedSignatures((prev) => prev.map((entry) => (entry.id === id ? updated : entry)));
       } catch (error) {
-        console.error('[useSavedSignatures] Failed to replace signature:', error);
+        console.error("[useSavedSignatures] Failed to replace signature:", error);
       }
     },
-    [savedSignatures]
+    [savedSignatures],
   );
 
   const clearSignatures = useCallback(async () => {
     try {
-      await Promise.all(savedSignatures.map(sig => signatureStorageService.deleteSignature(sig.id)));
+      await Promise.all(savedSignatures.map((sig) => signatureStorageService.deleteSignature(sig.id)));
       setSavedSignatures([]);
     } catch (error) {
-      console.error('[useSavedSignatures] Failed to clear signatures:', error);
+      console.error("[useSavedSignatures] Failed to clear signatures:", error);
     }
   }, [savedSignatures]);
 
@@ -186,7 +184,7 @@ export const useSavedSignatures = () => {
         acc[entry.type] += 1;
         return acc;
       },
-      { canvas: 0, image: 0, text: 0 }
+      { canvas: 0, image: 0, text: 0 },
     );
   }, [savedSignatures]);
 
diff --git a/frontend/src/core/hooks/tools/sign/useSignOperation.ts b/frontend/src/core/hooks/tools/sign/useSignOperation.ts
index 9fc456fd48..81915edb8d 100644
--- a/frontend/src/core/hooks/tools/sign/useSignOperation.ts
+++ b/frontend/src/core/hooks/tools/sign/useSignOperation.ts
@@ -1,39 +1,39 @@
-import { useTranslation } from 'react-i18next';
-import { useToolOperation, ToolOperationHook, ToolType } from '@app/hooks/tools/shared/useToolOperation';
-import { SignParameters, DEFAULT_PARAMETERS } from '@app/hooks/tools/sign/useSignParameters';
-import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
+import { useTranslation } from "react-i18next";
+import { useToolOperation, ToolOperationHook, ToolType } from "@app/hooks/tools/shared/useToolOperation";
+import { SignParameters, DEFAULT_PARAMETERS } from "@app/hooks/tools/sign/useSignParameters";
+import { createStandardErrorHandler } from "@app/utils/toolErrorHandler";
 
 // Static configuration that can be used by both the hook and automation executor
 export const buildSignFormData = (params: SignParameters, file: File): FormData => {
   const formData = new FormData();
-  formData.append('fileInput', file);
+  formData.append("fileInput", file);
 
   // Add signature data if available
   if (params.signatureData) {
-    formData.append('signatureData', params.signatureData);
+    formData.append("signatureData", params.signatureData);
   }
 
   // Add signature position and size
   if (params.signaturePosition) {
-    formData.append('x', params.signaturePosition.x.toString());
-    formData.append('y', params.signaturePosition.y.toString());
-    formData.append('width', params.signaturePosition.width.toString());
-    formData.append('height', params.signaturePosition.height.toString());
-    formData.append('page', params.signaturePosition.page.toString());
+    formData.append("x", params.signaturePosition.x.toString());
+    formData.append("y", params.signaturePosition.y.toString());
+    formData.append("width", params.signaturePosition.width.toString());
+    formData.append("height", params.signaturePosition.height.toString());
+    formData.append("page", params.signaturePosition.page.toString());
   }
 
   // Add signature type
-  formData.append('signatureType', params.signatureType || 'canvas');
+  formData.append("signatureType", params.signatureType || "canvas");
 
   // Add other parameters
   if (params.reason) {
-    formData.append('reason', params.reason);
+    formData.append("reason", params.reason);
   }
   if (params.location) {
-    formData.append('location', params.location);
+    formData.append("location", params.location);
   }
   if (params.signerName) {
-    formData.append('signerName', params.signerName);
+    formData.append("signerName", params.signerName);
   }
 
   return formData;
@@ -43,9 +43,9 @@ export const buildSignFormData = (params: SignParameters, file: File): FormData
 export const signOperationConfig = {
   toolType: ToolType.singleFile,
   buildFormData: buildSignFormData,
-  operationType: 'sign',
-  endpoint: '/api/v1/security/add-signature',
-  filePrefix: 'signed_',
+  operationType: "sign",
+  endpoint: "/api/v1/security/add-signature",
+  filePrefix: "signed_",
   defaultParameters: DEFAULT_PARAMETERS,
 } as const;
 
@@ -54,6 +54,6 @@ export const useSignOperation = (): ToolOperationHook<SignParameters> => {
 
   return useToolOperation<SignParameters>({
     ...signOperationConfig,
-    getErrorMessage: createStandardErrorHandler(t('sign.error.failed', 'An error occurred while signing the PDF.'))
+    getErrorMessage: createStandardErrorHandler(t("sign.error.failed", "An error occurred while signing the PDF.")),
   });
 };
diff --git a/frontend/src/core/hooks/tools/sign/useSignParameters.ts b/frontend/src/core/hooks/tools/sign/useSignParameters.ts
index 126f5d5805..c3ec531366 100644
--- a/frontend/src/core/hooks/tools/sign/useSignParameters.ts
+++ b/frontend/src/core/hooks/tools/sign/useSignParameters.ts
@@ -1,4 +1,4 @@
-import { useBaseParameters } from '@app/hooks/tools/shared/useBaseParameters';
+import { useBaseParameters } from "@app/hooks/tools/shared/useBaseParameters";
 
 export interface SignaturePosition {
   x: number;
@@ -9,7 +9,7 @@ export interface SignaturePosition {
 }
 
 export interface SignParameters {
-  signatureType: 'image' | 'text' | 'canvas';
+  signatureType: "image" | "text" | "canvas";
   signatureData?: string; // Base64 encoded image or text content
   signaturePosition?: SignaturePosition;
   reason?: string;
@@ -18,18 +18,18 @@ export interface SignParameters {
   fontFamily?: string;
   fontSize?: number;
   textColor?: string;
-  textAlign?: 'left' | 'center' | 'right';
+  textAlign?: "left" | "center" | "right";
 }
 
 export const DEFAULT_PARAMETERS: SignParameters = {
-  signatureType: 'canvas',
-  reason: 'Document signing',
-  location: 'Digital',
-  signerName: '',
-  fontFamily: 'Helvetica',
+  signatureType: "canvas",
+  reason: "Document signing",
+  location: "Digital",
+  signerName: "",
+  fontFamily: "Helvetica",
   fontSize: 16,
-  textColor: '#000000',
-  textAlign: 'left',
+  textColor: "#000000",
+  textAlign: "left",
 };
 
 const validateSignParameters = (parameters: SignParameters): boolean => {
@@ -45,11 +45,11 @@ const validateSignParameters = (parameters: SignParameters): boolean => {
   }
 
   // For image and canvas signatures, require signature data
-  if ((parameters.signatureType === 'image' || parameters.signatureType === 'canvas') && !parameters.signatureData) {
+  if ((parameters.signatureType === "image" || parameters.signatureType === "canvas") && !parameters.signatureData) {
     return false;
   }
   // For text signatures, require signer name
-  if (parameters.signatureType === 'text' && !parameters.signerName) {
+  if (parameters.signatureType === "text" && !parameters.signerName) {
     return false;
   }
 
@@ -59,7 +59,7 @@ const validateSignParameters = (parameters: SignParameters): boolean => {
 export const useSignParameters = () => {
   return useBaseParameters<SignParameters>({
     defaultParameters: DEFAULT_PARAMETERS,
-    endpointName: 'add-signature',
+    endpointName: "add-signature",
     validateFn: validateSignParameters,
   });
 };
diff --git a/frontend/src/core/hooks/tools/singleLargePage/useSingleLargePageOperation.ts b/frontend/src/core/hooks/tools/singleLargePage/useSingleLargePageOperation.ts
index db34b93bdc..272e465912 100644
--- a/frontend/src/core/hooks/tools/singleLargePage/useSingleLargePageOperation.ts
+++ b/frontend/src/core/hooks/tools/singleLargePage/useSingleLargePageOperation.ts
@@ -1,7 +1,7 @@
-import { useTranslation } from 'react-i18next';
-import { ToolType, useToolOperation } from '@app/hooks/tools/shared/useToolOperation';
-import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
-import { SingleLargePageParameters, defaultParameters } from '@app/hooks/tools/singleLargePage/useSingleLargePageParameters';
+import { useTranslation } from "react-i18next";
+import { ToolType, useToolOperation } from "@app/hooks/tools/shared/useToolOperation";
+import { createStandardErrorHandler } from "@app/utils/toolErrorHandler";
+import { SingleLargePageParameters, defaultParameters } from "@app/hooks/tools/singleLargePage/useSingleLargePageParameters";
 
 // Static function that can be used by both the hook and automation executor
 export const buildSingleLargePageFormData = (_parameters: SingleLargePageParameters, file: File): FormData => {
@@ -14,8 +14,8 @@ export const buildSingleLargePageFormData = (_parameters: SingleLargePageParamet
 export const singleLargePageOperationConfig = {
   toolType: ToolType.singleFile,
   buildFormData: buildSingleLargePageFormData,
-  operationType: 'pdfToSinglePage',
-  endpoint: '/api/v1/general/pdf-to-single-page',
+  operationType: "pdfToSinglePage",
+  endpoint: "/api/v1/general/pdf-to-single-page",
   defaultParameters,
 } as const;
 
@@ -24,6 +24,8 @@ export const useSingleLargePageOperation = () => {
 
   return useToolOperation<SingleLargePageParameters>({
     ...singleLargePageOperationConfig,
-    getErrorMessage: createStandardErrorHandler(t('pdfToSinglePage.error.failed', 'An error occurred while converting to single page.'))
+    getErrorMessage: createStandardErrorHandler(
+      t("pdfToSinglePage.error.failed", "An error occurred while converting to single page."),
+    ),
   });
 };
diff --git a/frontend/src/core/hooks/tools/singleLargePage/useSingleLargePageParameters.ts b/frontend/src/core/hooks/tools/singleLargePage/useSingleLargePageParameters.ts
index 7005ae062d..1225e001c0 100644
--- a/frontend/src/core/hooks/tools/singleLargePage/useSingleLargePageParameters.ts
+++ b/frontend/src/core/hooks/tools/singleLargePage/useSingleLargePageParameters.ts
@@ -1,5 +1,5 @@
-import { BaseParameters } from '@app/types/parameters';
-import { useBaseParameters, BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
+import { BaseParameters } from "@app/types/parameters";
+import { useBaseParameters, BaseParametersHook } from "@app/hooks/tools/shared/useBaseParameters";
 
 export interface SingleLargePageParameters extends BaseParameters {
   // Extends BaseParameters - ready for future parameter additions if needed
@@ -14,6 +14,6 @@ export type SingleLargePageParametersHook = BaseParametersHook<SingleLargePagePa
 export const useSingleLargePageParameters = (): SingleLargePageParametersHook => {
   return useBaseParameters({
     defaultParameters,
-    endpointName: 'pdf-to-single-page',
+    endpointName: "pdf-to-single-page",
   });
-};
\ No newline at end of file
+};
diff --git a/frontend/src/core/hooks/tools/split/useSplitOperation.ts b/frontend/src/core/hooks/tools/split/useSplitOperation.ts
index ff7b85b422..6d5f3a0a0a 100644
--- a/frontend/src/core/hooks/tools/split/useSplitOperation.ts
+++ b/frontend/src/core/hooks/tools/split/useSplitOperation.ts
@@ -1,10 +1,10 @@
-import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { ToolType, useToolOperation, ToolOperationConfig } from '@app/hooks/tools/shared/useToolOperation';
-import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
-import { SplitParameters, defaultParameters } from '@app/hooks/tools/split/useSplitParameters';
-import { SPLIT_METHODS } from '@app/constants/splitConstants';
-import { useToolResources } from '@app/hooks/tools/shared/useToolResources';
+import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { ToolType, useToolOperation, ToolOperationConfig } from "@app/hooks/tools/shared/useToolOperation";
+import { createStandardErrorHandler } from "@app/utils/toolErrorHandler";
+import { SplitParameters, defaultParameters } from "@app/hooks/tools/split/useSplitParameters";
+import { SPLIT_METHODS } from "@app/constants/splitConstants";
+import { useToolResources } from "@app/hooks/tools/shared/useToolResources";
 
 // Static functions that can be used by both the hook and automation executor
 export const buildSplitFormData = (parameters: SplitParameters, file: File): FormData => {
@@ -23,8 +23,8 @@ export const buildSplitFormData = (parameters: SplitParameters, file: File): For
       formData.append("horizontalDivisions", parameters.hDiv);
       formData.append("verticalDivisions", parameters.vDiv);
       formData.append("merge", (parameters.merge ?? false).toString());
-      formData.append("splitMode", parameters.splitMode || 'SPLIT_ALL');
-      if (parameters.splitMode === 'CUSTOM' && parameters.customPages) {
+      formData.append("splitMode", parameters.splitMode || "SPLIT_ALL");
+      if (parameters.splitMode === "CUSTOM" && parameters.customPages) {
         formData.append("pageNumbers", parameters.customPages);
       }
       break;
@@ -49,9 +49,9 @@ export const buildSplitFormData = (parameters: SplitParameters, file: File): For
       formData.append("duplexMode", (parameters.duplexMode ?? false).toString());
       break;
     case SPLIT_METHODS.BY_POSTER:
-      formData.append("pageSize", parameters.pageSize || 'A4');
-      formData.append("xFactor", parameters.xFactor || '2');
-      formData.append("yFactor", parameters.yFactor || '2');
+      formData.append("pageSize", parameters.pageSize || "A4");
+      formData.append("xFactor", parameters.xFactor || "2");
+      formData.append("yFactor", parameters.yFactor || "2");
       formData.append("rightToLeft", (parameters.rightToLeft ?? false).toString());
       break;
     default:
@@ -92,7 +92,7 @@ export const getSplitEndpoint = (parameters: SplitParameters): string => {
 export const splitOperationConfig = {
   toolType: ToolType.singleFile,
   buildFormData: buildSplitFormData,
-  operationType: 'split',
+  operationType: "split",
   endpoint: getSplitEndpoint,
   defaultParameters,
 } as const;
@@ -103,15 +103,18 @@ export const useSplitOperation = () => {
 
   // Custom response handler that extracts ZIP files
   // Can't add to exported config because it requires access to the zip code so must be part of the hook
-  const responseHandler = useCallback(async (blob: Blob, _originalFiles: File[]): Promise<File[]> => {
-    // Split operations return ZIP files with multiple PDF pages
-    return await extractZipFiles(blob);
-  }, [extractZipFiles]);
+  const responseHandler = useCallback(
+    async (blob: Blob, _originalFiles: File[]): Promise<File[]> => {
+      // Split operations return ZIP files with multiple PDF pages
+      return await extractZipFiles(blob);
+    },
+    [extractZipFiles],
+  );
 
   const splitConfig: ToolOperationConfig<SplitParameters> = {
     ...splitOperationConfig,
     responseHandler,
-    getErrorMessage: createStandardErrorHandler(t('split.error.failed', 'An error occurred while splitting the PDF.'))
+    getErrorMessage: createStandardErrorHandler(t("split.error.failed", "An error occurred while splitting the PDF.")),
   };
 
   return useToolOperation(splitConfig);
diff --git a/frontend/src/core/hooks/tools/split/useSplitParameters.ts b/frontend/src/core/hooks/tools/split/useSplitParameters.ts
index d847ae45e7..97d278b70a 100644
--- a/frontend/src/core/hooks/tools/split/useSplitParameters.ts
+++ b/frontend/src/core/hooks/tools/split/useSplitParameters.ts
@@ -1,6 +1,6 @@
-import { SPLIT_METHODS, ENDPOINTS, type SplitMethod } from '@app/constants/splitConstants';
-import { BaseParameters } from '@app/types/parameters';
-import { useBaseParameters, BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
+import { SPLIT_METHODS, ENDPOINTS, type SplitMethod } from "@app/constants/splitConstants";
+import { BaseParameters } from "@app/types/parameters";
+import { useBaseParameters, BaseParametersHook } from "@app/hooks/tools/shared/useBaseParameters";
 
 export interface SplitParameters extends BaseParameters {
   method: SplitMethod | null;
@@ -25,35 +25,35 @@ export type SplitParametersHook = BaseParametersHook<SplitParameters>;
 
 export const defaultParameters: SplitParameters = {
   method: null,
-  pages: '',
-  hDiv: '2',
-  vDiv: '2',
+  pages: "",
+  hDiv: "2",
+  vDiv: "2",
   merge: false,
-  splitValue: '',
-  bookmarkLevel: '1',
+  splitValue: "",
+  bookmarkLevel: "1",
   includeMetadata: false,
   allowDuplicates: false,
   duplexMode: false,
-  splitMode: 'SPLIT_ALL',
-  customPages: '',
-  pageSize: 'A4',
-  xFactor: '2',
-  yFactor: '2',
+  splitMode: "SPLIT_ALL",
+  customPages: "",
+  pageSize: "A4",
+  xFactor: "2",
+  yFactor: "2",
   rightToLeft: false,
 };
 
 export const useSplitParameters = (): SplitParametersHook => {
   return useBaseParameters({
     defaultParameters,
-    endpointName: (params) => params.method ? ENDPOINTS[params.method] : ENDPOINTS[SPLIT_METHODS.BY_PAGES],
+    endpointName: (params) => (params.method ? ENDPOINTS[params.method] : ENDPOINTS[SPLIT_METHODS.BY_PAGES]),
     validateFn: (params) => {
       switch (params.method) {
         case SPLIT_METHODS.BY_PAGES:
           return params.pages.trim() !== "";
         case SPLIT_METHODS.BY_SECTIONS:
           if (params.hDiv === "" || params.vDiv === "") return false;
-          if (params.splitMode === 'CUSTOM') {
-            return (params.customPages || '').trim() !== "";
+          if (params.splitMode === "CUSTOM") {
+            return (params.customPages || "").trim() !== "";
           }
           return true;
         case SPLIT_METHODS.BY_SIZE:
diff --git a/frontend/src/core/hooks/tools/timestampPdf/useTimestampPdfOperation.ts b/frontend/src/core/hooks/tools/timestampPdf/useTimestampPdfOperation.ts
index 8f472faff3..40c88a8f34 100644
--- a/frontend/src/core/hooks/tools/timestampPdf/useTimestampPdfOperation.ts
+++ b/frontend/src/core/hooks/tools/timestampPdf/useTimestampPdfOperation.ts
@@ -1,13 +1,13 @@
-import { useTranslation } from 'react-i18next';
-import { ToolType, useToolOperation } from '@app/hooks/tools/shared/useToolOperation';
-import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
-import { TimestampPdfParameters, defaultParameters } from '@app/hooks/tools/timestampPdf/useTimestampPdfParameters';
+import { useTranslation } from "react-i18next";
+import { ToolType, useToolOperation } from "@app/hooks/tools/shared/useToolOperation";
+import { createStandardErrorHandler } from "@app/utils/toolErrorHandler";
+import { TimestampPdfParameters, defaultParameters } from "@app/hooks/tools/timestampPdf/useTimestampPdfParameters";
 
 export const buildTimestampPdfFormData = (parameters: TimestampPdfParameters, file: File): FormData => {
   const formData = new FormData();
-  formData.append('fileInput', file);
+  formData.append("fileInput", file);
 
-  formData.append('tsaUrl', parameters.tsaUrl);
+  formData.append("tsaUrl", parameters.tsaUrl);
 
   return formData;
 };
@@ -15,8 +15,8 @@ export const buildTimestampPdfFormData = (parameters: TimestampPdfParameters, fi
 export const timestampPdfOperationConfig = {
   toolType: ToolType.singleFile,
   buildFormData: buildTimestampPdfFormData,
-  operationType: 'timestampPdf',
-  endpoint: '/api/v1/security/timestamp-pdf',
+  operationType: "timestampPdf",
+  endpoint: "/api/v1/security/timestamp-pdf",
   multiFileEndpoint: false,
   defaultParameters,
 } as const;
@@ -27,7 +27,7 @@ export const useTimestampPdfOperation = () => {
   return useToolOperation<TimestampPdfParameters>({
     ...timestampPdfOperationConfig,
     getErrorMessage: createStandardErrorHandler(
-      t('timestampPdf.error.failed', 'An error occurred while timestamping the PDF.')
+      t("timestampPdf.error.failed", "An error occurred while timestamping the PDF."),
     ),
   });
 };
diff --git a/frontend/src/core/hooks/tools/timestampPdf/useTimestampPdfParameters.ts b/frontend/src/core/hooks/tools/timestampPdf/useTimestampPdfParameters.ts
index dfc6c8803e..a5ec269815 100644
--- a/frontend/src/core/hooks/tools/timestampPdf/useTimestampPdfParameters.ts
+++ b/frontend/src/core/hooks/tools/timestampPdf/useTimestampPdfParameters.ts
@@ -1,15 +1,15 @@
-import { BaseParameters } from '@app/types/parameters';
-import { useBaseParameters, BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
+import { BaseParameters } from "@app/types/parameters";
+import { useBaseParameters, BaseParametersHook } from "@app/hooks/tools/shared/useBaseParameters";
 
 // Fallback presets used only when AppConfig hasn't loaded yet.
 // The real presets are served by the backend via /api/v1/config/app-config
 // (field: timestampTsaPresets) — single source of truth.
 export const FALLBACK_TSA_PRESETS = [
-  { label: 'DigiCert', url: 'http://timestamp.digicert.com' },
-  { label: 'Sectigo', url: 'http://timestamp.sectigo.com' },
-  { label: 'SSL.com', url: 'http://ts.ssl.com' },
-  { label: 'FreeTSA', url: 'https://freetsa.org/tsr' },
-  { label: 'MeSign', url: 'http://tsa.mesign.com' },
+  { label: "DigiCert", url: "http://timestamp.digicert.com" },
+  { label: "Sectigo", url: "http://timestamp.sectigo.com" },
+  { label: "SSL.com", url: "http://ts.ssl.com" },
+  { label: "FreeTSA", url: "https://freetsa.org/tsr" },
+  { label: "MeSign", url: "http://tsa.mesign.com" },
 ] as const;
 
 export interface TimestampPdfParameters extends BaseParameters {
@@ -25,7 +25,7 @@ export type TimestampPdfParametersHook = BaseParametersHook<TimestampPdfParamete
 export const useTimestampPdfParameters = (): TimestampPdfParametersHook => {
   return useBaseParameters({
     defaultParameters,
-    endpointName: 'timestamp-pdf',
+    endpointName: "timestamp-pdf",
     validateFn: (params) => {
       return params.tsaUrl.trim().length > 0;
     },
diff --git a/frontend/src/core/hooks/tools/unlockPdfForms/useUnlockPdfFormsOperation.ts b/frontend/src/core/hooks/tools/unlockPdfForms/useUnlockPdfFormsOperation.ts
index b2a45cd744..46fbce4c38 100644
--- a/frontend/src/core/hooks/tools/unlockPdfForms/useUnlockPdfFormsOperation.ts
+++ b/frontend/src/core/hooks/tools/unlockPdfForms/useUnlockPdfFormsOperation.ts
@@ -1,7 +1,7 @@
-import { useTranslation } from 'react-i18next';
-import { ToolType, useToolOperation } from '@app/hooks/tools/shared/useToolOperation';
-import { createStandardErrorHandler } from '@app/utils/toolErrorHandler';
-import { UnlockPdfFormsParameters, defaultParameters } from '@app/hooks/tools/unlockPdfForms/useUnlockPdfFormsParameters';
+import { useTranslation } from "react-i18next";
+import { ToolType, useToolOperation } from "@app/hooks/tools/shared/useToolOperation";
+import { createStandardErrorHandler } from "@app/utils/toolErrorHandler";
+import { UnlockPdfFormsParameters, defaultParameters } from "@app/hooks/tools/unlockPdfForms/useUnlockPdfFormsParameters";
 
 // Static function that can be used by both the hook and automation executor
 export const buildUnlockPdfFormsFormData = (_parameters: UnlockPdfFormsParameters, file: File): FormData => {
@@ -14,8 +14,8 @@ export const buildUnlockPdfFormsFormData = (_parameters: UnlockPdfFormsParameter
 export const unlockPdfFormsOperationConfig = {
   toolType: ToolType.singleFile,
   buildFormData: buildUnlockPdfFormsFormData,
-  operationType: 'unlockPDFForms',
-  endpoint: '/api/v1/misc/unlock-pdf-forms',
+  operationType: "unlockPDFForms",
+  endpoint: "/api/v1/misc/unlock-pdf-forms",
   defaultParameters,
 } as const;
 
@@ -24,6 +24,8 @@ export const useUnlockPdfFormsOperation = () => {
 
   return useToolOperation<UnlockPdfFormsParameters>({
     ...unlockPdfFormsOperationConfig,
-    getErrorMessage: createStandardErrorHandler(t('unlockPDFForms.error.failed', 'An error occurred while unlocking PDF forms.'))
+    getErrorMessage: createStandardErrorHandler(
+      t("unlockPDFForms.error.failed", "An error occurred while unlocking PDF forms."),
+    ),
   });
 };
diff --git a/frontend/src/core/hooks/tools/unlockPdfForms/useUnlockPdfFormsParameters.ts b/frontend/src/core/hooks/tools/unlockPdfForms/useUnlockPdfFormsParameters.ts
index e4624bafd1..507c2d8b5b 100644
--- a/frontend/src/core/hooks/tools/unlockPdfForms/useUnlockPdfFormsParameters.ts
+++ b/frontend/src/core/hooks/tools/unlockPdfForms/useUnlockPdfFormsParameters.ts
@@ -1,5 +1,5 @@
-import { BaseParameters } from '@app/types/parameters';
-import { useBaseParameters, BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
+import { BaseParameters } from "@app/types/parameters";
+import { useBaseParameters, BaseParametersHook } from "@app/hooks/tools/shared/useBaseParameters";
 
 export interface UnlockPdfFormsParameters extends BaseParameters {
   // Extends BaseParameters - ready for future parameter additions if needed
@@ -14,6 +14,6 @@ export type UnlockPdfFormsParametersHook = BaseParametersHook<UnlockPdfFormsPara
 export const useUnlockPdfFormsParameters = (): UnlockPdfFormsParametersHook => {
   return useBaseParameters({
     defaultParameters,
-    endpointName: 'unlock-pdf-forms',
+    endpointName: "unlock-pdf-forms",
   });
-};
\ No newline at end of file
+};
diff --git a/frontend/src/core/hooks/tools/useFavoriteToolItems.ts b/frontend/src/core/hooks/tools/useFavoriteToolItems.ts
index 4678d44810..03a8ce4d18 100644
--- a/frontend/src/core/hooks/tools/useFavoriteToolItems.ts
+++ b/frontend/src/core/hooks/tools/useFavoriteToolItems.ts
@@ -1,10 +1,10 @@
-import { useMemo } from 'react';
-import { ToolId } from '@app/types/toolId';
-import { ToolRegistryEntry } from '@app/data/toolsTaxonomy';
+import { useMemo } from "react";
+import { ToolId } from "@app/types/toolId";
+import { ToolRegistryEntry } from "@app/data/toolsTaxonomy";
 
 export function useFavoriteToolItems(
   favoriteTools: ToolId[],
-  toolRegistry: Partial<Record<ToolId, ToolRegistryEntry>>
+  toolRegistry: Partial<Record<ToolId, ToolRegistryEntry>>,
 ): Array<{ id: ToolId; tool: ToolRegistryEntry }> {
   return useMemo(() => {
     return favoriteTools
@@ -13,8 +13,6 @@ export function useFavoriteToolItems(
         return tool ? { id: toolId as ToolId, tool } : null;
       })
       .filter((x): x is { id: ToolId; tool: ToolRegistryEntry } => x !== null)
-      .filter(({ id, tool }) => Boolean(tool.component) || Boolean(tool.link) || id === 'read' || id === 'multiTool');
+      .filter(({ id, tool }) => Boolean(tool.component) || Boolean(tool.link) || id === "read" || id === "multiTool");
   }, [favoriteTools, toolRegistry]);
 }
-
-
diff --git a/frontend/src/core/hooks/tools/useToolPanelGeometry.ts b/frontend/src/core/hooks/tools/useToolPanelGeometry.ts
index 14e36ca431..fb3a8a9e71 100644
--- a/frontend/src/core/hooks/tools/useToolPanelGeometry.ts
+++ b/frontend/src/core/hooks/tools/useToolPanelGeometry.ts
@@ -1,4 +1,4 @@
-import { useLayoutEffect, useState, RefObject, useRef } from 'react';
+import { useLayoutEffect, useState, RefObject, useRef } from "react";
 
 export interface ToolPanelGeometry {
   left: number;
@@ -14,12 +14,7 @@ interface UseToolPanelGeometryOptions {
   rightRailRef?: RefObject<HTMLDivElement | null>;
 }
 
-export function useToolPanelGeometry({
-  enabled,
-  toolPanelRef,
-  quickAccessRef,
-  rightRailRef,
-}: UseToolPanelGeometryOptions) {
+export function useToolPanelGeometry({ enabled, toolPanelRef, quickAccessRef, rightRailRef }: UseToolPanelGeometryOptions) {
   const [geometry, setGeometry] = useState<ToolPanelGeometry | null>(null);
   const scheduleUpdateRef = useRef<() => void>(() => {});
 
@@ -35,14 +30,14 @@ export function useToolPanelGeometry({
       return;
     }
 
-    const rightRailEl = () => (rightRailRef?.current ?? null);
+    const rightRailEl = () => rightRailRef?.current ?? null;
 
     let rafId: number | null = null;
 
     const computeAndSetGeometry = () => {
       const rect = panelEl.getBoundingClientRect();
       const rail = rightRailEl();
-      const isRTL = typeof document !== 'undefined' && document.documentElement.dir === 'rtl';
+      const isRTL = typeof document !== "undefined" && document.documentElement.dir === "rtl";
       const railRect = rail?.getBoundingClientRect();
       const railIsOnRight = railRect ? railRect.right > window.innerWidth / 2 : false;
       const rightOffset = railRect && railIsOnRight ? Math.max(0, window.innerWidth - railRect.right) : 0;
@@ -83,7 +78,7 @@ export function useToolPanelGeometry({
     computeAndSetGeometry();
 
     let resizeObserver: ResizeObserver | null = null;
-    if (typeof ResizeObserver !== 'undefined') {
+    if (typeof ResizeObserver !== "undefined") {
       resizeObserver = new ResizeObserver(() => scheduleUpdate());
       resizeObserver.observe(panelEl);
       if (quickAccessRef.current) {
@@ -100,10 +95,10 @@ export function useToolPanelGeometry({
     } else {
       // Fallback for environments without ResizeObserver
       const handleResize = () => scheduleUpdate();
-      window.addEventListener('resize', handleResize);
+      window.addEventListener("resize", handleResize);
       // Ensure cleanup of the fallback listener
       resizeObserver = {
-        disconnect: () => window.removeEventListener('resize', handleResize),
+        disconnect: () => window.removeEventListener("resize", handleResize),
       } as unknown as ResizeObserver;
     }
 
@@ -119,7 +114,7 @@ export function useToolPanelGeometry({
   // Secondary effect: (re)attach observers when refs' .current become available later
   useLayoutEffect(() => {
     if (!enabled) return;
-    if (typeof ResizeObserver === 'undefined') return;
+    if (typeof ResizeObserver === "undefined") return;
     const qa = quickAccessRef.current;
     const rail = rightRailRef?.current ?? null;
     if (!qa && !rail) return;
diff --git a/frontend/src/core/hooks/tools/useUserToolActivity.ts b/frontend/src/core/hooks/tools/useUserToolActivity.ts
index c3b7cbea95..4753d912dc 100644
--- a/frontend/src/core/hooks/tools/useUserToolActivity.ts
+++ b/frontend/src/core/hooks/tools/useUserToolActivity.ts
@@ -1,8 +1,8 @@
-import { useState, useEffect, useCallback } from 'react';
-import { ToolId } from '@app/types/toolId';
+import { useState, useEffect, useCallback } from "react";
+import { ToolId } from "@app/types/toolId";
 
-const RECENT_TOOLS_KEY = 'stirlingpdf.recentTools';
-const FAVORITE_TOOLS_KEY = 'stirlingpdf.favoriteTools';
+const RECENT_TOOLS_KEY = "stirlingpdf.recentTools";
+const FAVORITE_TOOLS_KEY = "stirlingpdf.favoriteTools";
 
 export function useToolHistory() {
   const [recentTools, setRecentTools] = useState<ToolId[]>([]);
@@ -10,7 +10,7 @@ export function useToolHistory() {
 
   // Load from localStorage on mount
   useEffect(() => {
-    if (typeof window === 'undefined') {
+    if (typeof window === "undefined") {
       return;
     }
 
@@ -36,18 +36,15 @@ export function useToolHistory() {
     }
   }, []);
 
-
   // Toggle favorite status
   const toggleFavorite = useCallback((toolId: ToolId) => {
-    if (typeof window === 'undefined') {
+    if (typeof window === "undefined") {
       return;
     }
 
     setFavoriteTools((prev) => {
       const isFavorite = prev.includes(toolId);
-      const updated = isFavorite
-        ? prev.filter((id) => id !== toolId)
-        : [...prev, toolId];
+      const updated = isFavorite ? prev.filter((id) => id !== toolId) : [...prev, toolId];
       window.localStorage.setItem(FAVORITE_TOOLS_KEY, JSON.stringify(updated));
       return updated;
     });
@@ -58,7 +55,7 @@ export function useToolHistory() {
     (toolId: ToolId): boolean => {
       return favoriteTools.includes(toolId);
     },
-    [favoriteTools]
+    [favoriteTools],
   );
 
   return {
diff --git a/frontend/src/core/hooks/tools/validateSignature/outputtedPDFSections/CenteredMessageSection.ts b/frontend/src/core/hooks/tools/validateSignature/outputtedPDFSections/CenteredMessageSection.ts
index 12abc2c62d..83cd5183f4 100644
--- a/frontend/src/core/hooks/tools/validateSignature/outputtedPDFSections/CenteredMessageSection.ts
+++ b/frontend/src/core/hooks/tools/validateSignature/outputtedPDFSections/CenteredMessageSection.ts
@@ -1,6 +1,6 @@
-import { PdfiumFont, PdfiumPage, rgb } from '@app/services/pdfiumDocBuilder';
-import { wrapText } from '@app/hooks/tools/validateSignature/utils/pdfText';
-import { colorPalette } from '@app/hooks/tools/validateSignature/utils/pdfPalette';
+import { PdfiumFont, PdfiumPage, rgb } from "@app/services/pdfiumDocBuilder";
+import { wrapText } from "@app/hooks/tools/validateSignature/utils/pdfText";
+import { colorPalette } from "@app/hooks/tools/validateSignature/utils/pdfPalette";
 
 interface DrawCenteredMessageOptions {
   page: PdfiumPage;
diff --git a/frontend/src/core/hooks/tools/validateSignature/outputtedPDFSections/FieldBoxSection.ts b/frontend/src/core/hooks/tools/validateSignature/outputtedPDFSections/FieldBoxSection.ts
index 7bcfd34041..a9dcd2b8b8 100644
--- a/frontend/src/core/hooks/tools/validateSignature/outputtedPDFSections/FieldBoxSection.ts
+++ b/frontend/src/core/hooks/tools/validateSignature/outputtedPDFSections/FieldBoxSection.ts
@@ -1,6 +1,6 @@
-import { PdfiumFont, PdfiumPage } from '@app/services/pdfiumDocBuilder';
-import { wrapText } from '@app/hooks/tools/validateSignature/utils/pdfText';
-import { colorPalette } from '@app/hooks/tools/validateSignature/utils/pdfPalette';
+import { PdfiumFont, PdfiumPage } from "@app/services/pdfiumDocBuilder";
+import { wrapText } from "@app/hooks/tools/validateSignature/utils/pdfText";
+import { colorPalette } from "@app/hooks/tools/validateSignature/utils/pdfPalette";
 
 interface FieldBoxOptions {
   page: PdfiumPage;
@@ -13,16 +13,7 @@ interface FieldBoxOptions {
   value: string;
 }
 
-export const drawFieldBox = ({
-  page,
-  font,
-  fontBold,
-  x,
-  top,
-  width,
-  label,
-  value,
-}: FieldBoxOptions): number => {
+export const drawFieldBox = ({ page, font, fontBold, x, top, width, label, value }: FieldBoxOptions): number => {
   const labelFontSize = 8;
   const valueFontSize = 11;
   const valueLineHeight = valueFontSize * 1.25;
@@ -37,7 +28,7 @@ export const drawFieldBox = ({
   });
 
   const boxTop = top - labelFontSize - 6;
-  const rawValue = value && value.trim().length > 0 ? value : '--';
+  const rawValue = value && value.trim().length > 0 ? value : "--";
   const lines = wrapText(rawValue, font, valueFontSize, width - boxPadding * 2);
   const boxHeight = Math.max(valueLineHeight, lines.length * valueLineHeight) + boxPadding * 2;
 
diff --git a/frontend/src/core/hooks/tools/validateSignature/outputtedPDFSections/SignatureSection.ts b/frontend/src/core/hooks/tools/validateSignature/outputtedPDFSections/SignatureSection.ts
index cd926da8ba..c87e566994 100644
--- a/frontend/src/core/hooks/tools/validateSignature/outputtedPDFSections/SignatureSection.ts
+++ b/frontend/src/core/hooks/tools/validateSignature/outputtedPDFSections/SignatureSection.ts
@@ -1,11 +1,11 @@
-import type { TFunction } from 'i18next';
-import { PdfiumFont, PdfiumPage } from '@app/services/pdfiumDocBuilder';
-import { SignatureValidationSignature } from '@app/types/validateSignature';
-import { drawFieldBox } from '@app/hooks/tools/validateSignature/outputtedPDFSections/FieldBoxSection';
-import { drawStatusBadge } from '@app/hooks/tools/validateSignature/outputtedPDFSections/StatusBadgeSection';
-import { computeSignatureStatus, statusKindToPdfColor } from '@app/hooks/tools/validateSignature/utils/signatureStatus';
-import { formatDate } from '@app/hooks/tools/validateSignature/utils/pdfText';
-import { colorPalette } from '@app/hooks/tools/validateSignature/utils/pdfPalette';
+import type { TFunction } from "i18next";
+import { PdfiumFont, PdfiumPage } from "@app/services/pdfiumDocBuilder";
+import { SignatureValidationSignature } from "@app/types/validateSignature";
+import { drawFieldBox } from "@app/hooks/tools/validateSignature/outputtedPDFSections/FieldBoxSection";
+import { drawStatusBadge } from "@app/hooks/tools/validateSignature/outputtedPDFSections/StatusBadgeSection";
+import { computeSignatureStatus, statusKindToPdfColor } from "@app/hooks/tools/validateSignature/utils/signatureStatus";
+import { formatDate } from "@app/hooks/tools/validateSignature/utils/pdfText";
+import { colorPalette } from "@app/hooks/tools/validateSignature/utils/pdfPalette";
 
 interface DrawSignatureSectionOptions {
   page: PdfiumPage;
@@ -17,7 +17,7 @@ interface DrawSignatureSectionOptions {
   columnGap: number;
   font: PdfiumFont;
   fontBold: PdfiumFont;
-  t: TFunction<'translation'>;
+  t: TFunction<"translation">;
 }
 
 export const drawSignatureSection = ({
@@ -34,7 +34,7 @@ export const drawSignatureSection = ({
 }: DrawSignatureSectionOptions): number => {
   const columnWidth = (contentWidth - columnGap) / 2;
 
-  const heading = `${t('validateSignature.signature._value', 'Signature')} ${index + 1}`;
+  const heading = `${t("validateSignature.signature._value", "Signature")} ${index + 1}`;
   page.drawText(heading, {
     x: marginX,
     y: cursorY,
@@ -60,10 +60,10 @@ export const drawSignatureSection = ({
   let nextY = cursorY - 20;
 
   const signatureFields = [
-    { label: t('validateSignature.signer', 'Signer'), value: signature.signerName || '-' },
-    { label: t('validateSignature.date', 'Date'), value: formatDate(signature.signatureDate) },
-    { label: t('validateSignature.reason', 'Reason'), value: signature.reason || '-' },
-    { label: t('validateSignature.location', 'Location'), value: signature.location || '-' },
+    { label: t("validateSignature.signer", "Signer"), value: signature.signerName || "-" },
+    { label: t("validateSignature.date", "Date"), value: formatDate(signature.signatureDate) },
+    { label: t("validateSignature.reason", "Reason"), value: signature.reason || "-" },
+    { label: t("validateSignature.location", "Location"), value: signature.location || "-" },
   ];
 
   for (let i = 0; i < signatureFields.length; i += 2) {
@@ -109,30 +109,24 @@ export const drawSignatureSection = ({
   nextY -= 20;
 
   const certificateFields = [
-    { label: t('validateSignature.cert.issuer', 'Issuer'), value: signature.issuerDN || '-' },
-    { label: t('validateSignature.cert.subject', 'Subject'), value: signature.subjectDN || '-' },
-    { label: t('validateSignature.cert.serialNumber', 'Serial Number'), value: signature.serialNumber || '-' },
-    { label: t('validateSignature.cert.algorithm', 'Algorithm'), value: signature.signatureAlgorithm || '-' },
-    { label: t('validateSignature.cert.validFrom', 'Valid From'), value: formatDate(signature.validFrom) },
-    { label: t('validateSignature.cert.validUntil', 'Valid Until'), value: formatDate(signature.validUntil) },
+    { label: t("validateSignature.cert.issuer", "Issuer"), value: signature.issuerDN || "-" },
+    { label: t("validateSignature.cert.subject", "Subject"), value: signature.subjectDN || "-" },
+    { label: t("validateSignature.cert.serialNumber", "Serial Number"), value: signature.serialNumber || "-" },
+    { label: t("validateSignature.cert.algorithm", "Algorithm"), value: signature.signatureAlgorithm || "-" },
+    { label: t("validateSignature.cert.validFrom", "Valid From"), value: formatDate(signature.validFrom) },
+    { label: t("validateSignature.cert.validUntil", "Valid Until"), value: formatDate(signature.validUntil) },
     {
-      label: t('validateSignature.cert.keySize', 'Key Size'),
-      value:
-        signature.keySize != null
-          ? `${signature.keySize} ${t('validateSignature.cert.bits', 'bits')}`
-          : '--',
+      label: t("validateSignature.cert.keySize", "Key Size"),
+      value: signature.keySize != null ? `${signature.keySize} ${t("validateSignature.cert.bits", "bits")}` : "--",
     },
-    { label: t('validateSignature.cert.version', 'Version'), value: signature.version || '-' },
+    { label: t("validateSignature.cert.version", "Version"), value: signature.version || "-" },
     {
-      label: t('validateSignature.cert.keyUsage', 'Key Usage'),
-      value:
-        signature.keyUsages && signature.keyUsages.length > 0
-          ? signature.keyUsages.join(', ')
-          : '--',
+      label: t("validateSignature.cert.keyUsage", "Key Usage"),
+      value: signature.keyUsages && signature.keyUsages.length > 0 ? signature.keyUsages.join(", ") : "--",
     },
     {
-      label: t('validateSignature.cert.selfSigned', 'Self-Signed'),
-      value: signature.selfSigned ? t('yes', 'Yes') : t('no', 'No'),
+      label: t("validateSignature.cert.selfSigned", "Self-Signed"),
+      value: signature.selfSigned ? t("yes", "Yes") : t("no", "No"),
     },
   ];
 
diff --git a/frontend/src/core/hooks/tools/validateSignature/outputtedPDFSections/StatusBadgeSection.ts b/frontend/src/core/hooks/tools/validateSignature/outputtedPDFSections/StatusBadgeSection.ts
index ebb0dd29d8..a932e3335e 100644
--- a/frontend/src/core/hooks/tools/validateSignature/outputtedPDFSections/StatusBadgeSection.ts
+++ b/frontend/src/core/hooks/tools/validateSignature/outputtedPDFSections/StatusBadgeSection.ts
@@ -1,4 +1,4 @@
-import { PdfiumFont, PdfiumPage, rgb } from '@app/services/pdfiumDocBuilder';
+import { PdfiumFont, PdfiumPage, rgb } from "@app/services/pdfiumDocBuilder";
 
 interface StatusBadgeOptions {
   page: PdfiumPage;
diff --git a/frontend/src/core/hooks/tools/validateSignature/outputtedPDFSections/SummarySection.ts b/frontend/src/core/hooks/tools/validateSignature/outputtedPDFSections/SummarySection.ts
index c9f013f57b..a3d27d8715 100644
--- a/frontend/src/core/hooks/tools/validateSignature/outputtedPDFSections/SummarySection.ts
+++ b/frontend/src/core/hooks/tools/validateSignature/outputtedPDFSections/SummarySection.ts
@@ -1,10 +1,13 @@
-import type { TFunction } from 'i18next';
-import { PdfiumFont, PdfiumImage, PdfiumPage } from '@app/services/pdfiumDocBuilder';
-import { SignatureValidationReportEntry } from '@app/types/validateSignature';
-import { drawFieldBox } from '@app/hooks/tools/validateSignature/outputtedPDFSections/FieldBoxSection';
-import { drawThumbnailImage, drawThumbnailPlaceholder } from '@app/hooks/tools/validateSignature/outputtedPDFSections/ThumbnailSection';
-import { colorPalette } from '@app/hooks/tools/validateSignature/utils/pdfPalette';
-import { formatFileSize } from '@app/hooks/tools/validateSignature/utils/pdfText';
+import type { TFunction } from "i18next";
+import { PdfiumFont, PdfiumImage, PdfiumPage } from "@app/services/pdfiumDocBuilder";
+import { SignatureValidationReportEntry } from "@app/types/validateSignature";
+import { drawFieldBox } from "@app/hooks/tools/validateSignature/outputtedPDFSections/FieldBoxSection";
+import {
+  drawThumbnailImage,
+  drawThumbnailPlaceholder,
+} from "@app/hooks/tools/validateSignature/outputtedPDFSections/ThumbnailSection";
+import { colorPalette } from "@app/hooks/tools/validateSignature/utils/pdfPalette";
+import { formatFileSize } from "@app/hooks/tools/validateSignature/utils/pdfText";
 
 interface DrawSummarySectionOptions {
   page: PdfiumPage;
@@ -16,9 +19,9 @@ interface DrawSummarySectionOptions {
   contentWidth: number;
   columnGap: number;
   statusText: string;
-  statusColor: (typeof colorPalette)['success'];
+  statusColor: (typeof colorPalette)["success"];
   loadThumbnail: (url: string) => Promise<{ image: PdfiumImage } | null>;
-  t: TFunction<'translation'>;
+  t: TFunction<"translation">;
 }
 
 export const drawSummarySection = async ({
@@ -49,7 +52,7 @@ export const drawSummarySection = async ({
 
   const latestSignatureLabel = latestSignatureTimestamp.length
     ? new Date(Math.max(...latestSignatureTimestamp)).toLocaleString()
-    : '--';
+    : "--";
 
   const titleBaseline = summaryTop - 12 - titleFontSize;
   page.drawText(entry.fileName, {
@@ -60,7 +63,7 @@ export const drawSummarySection = async ({
     color: colorPalette.textPrimary,
   });
 
-  const subtitle = t('validateSignature.report.shortTitle', 'Signature Summary');
+  const subtitle = t("validateSignature.report.shortTitle", "Signature Summary");
   const subtitleBaseline = titleBaseline - subtitleFontSize - 6;
   page.drawText(subtitle, {
     x: summaryX,
@@ -77,12 +80,15 @@ export const drawSummarySection = async ({
     }>
   > = [
     [
-      { label: t('validateSignature.report.fields.fileSize', 'File Size'), value: formatFileSize(entry.fileSize) },
-      { label: t('validateSignature.report.fields.created', 'Created'), value: entry.createdAtLabel ?? '--' },
+      { label: t("validateSignature.report.fields.fileSize", "File Size"), value: formatFileSize(entry.fileSize) },
+      { label: t("validateSignature.report.fields.created", "Created"), value: entry.createdAtLabel ?? "--" },
     ],
     [
-      { label: t('validateSignature.report.fields.signatureDate', 'Signature Date'), value: latestSignatureLabel },
-      { label: t('validateSignature.report.fields.signatureCount', 'Total Signatures'), value: entry.signatures.length.toString() },
+      { label: t("validateSignature.report.fields.signatureDate", "Signature Date"), value: latestSignatureLabel },
+      {
+        label: t("validateSignature.report.fields.signatureCount", "Total Signatures"),
+        value: entry.signatures.length.toString(),
+      },
     ],
   ];
 
diff --git a/frontend/src/core/hooks/tools/validateSignature/outputtedPDFSections/ThumbnailSection.ts b/frontend/src/core/hooks/tools/validateSignature/outputtedPDFSections/ThumbnailSection.ts
index e10ada3f04..8d0798825e 100644
--- a/frontend/src/core/hooks/tools/validateSignature/outputtedPDFSections/ThumbnailSection.ts
+++ b/frontend/src/core/hooks/tools/validateSignature/outputtedPDFSections/ThumbnailSection.ts
@@ -1,5 +1,5 @@
-import { PdfiumFont, PdfiumPage, PdfiumImage } from '@app/services/pdfiumDocBuilder';
-import { colorPalette } from '@app/hooks/tools/validateSignature/utils/pdfPalette';
+import { PdfiumFont, PdfiumPage, PdfiumImage } from "@app/services/pdfiumDocBuilder";
+import { colorPalette } from "@app/hooks/tools/validateSignature/utils/pdfPalette";
 
 export const drawThumbnailPlaceholder = (
   page: PdfiumPage,
@@ -7,7 +7,7 @@ export const drawThumbnailPlaceholder = (
   x: number,
   top: number,
   width: number,
-  height: number
+  height: number,
 ) => {
   page.drawRectangle({
     x,
@@ -19,7 +19,7 @@ export const drawThumbnailPlaceholder = (
     borderWidth: 1,
   });
 
-  const label = 'PDF';
+  const label = "PDF";
   const labelSize = 22;
   const labelWidth = fontBold.widthOfTextAtSize(label, labelSize);
   const labelX = x + (width - labelWidth) / 2;
@@ -40,7 +40,7 @@ export const drawThumbnailImage = (
   x: number,
   top: number,
   width: number,
-  height: number
+  height: number,
 ) => {
   const scaled = image.scaleToFit(width - 16, height - 16);
   const offsetX = x + (width - scaled.width) / 2;
diff --git a/frontend/src/core/hooks/tools/validateSignature/signatureReportPdf.ts b/frontend/src/core/hooks/tools/validateSignature/signatureReportPdf.ts
index 9d37fc194c..31915c9f34 100644
--- a/frontend/src/core/hooks/tools/validateSignature/signatureReportPdf.ts
+++ b/frontend/src/core/hooks/tools/validateSignature/signatureReportPdf.ts
@@ -1,13 +1,13 @@
-import { PdfiumDocument, PdfiumPage, StandardFonts } from '@app/services/pdfiumDocBuilder';
-import type { TFunction } from 'i18next';
-import { SignatureValidationReportEntry } from '@app/types/validateSignature';
-import { REPORT_PDF_FILENAME } from '@app/hooks/tools/validateSignature/utils/signatureUtils';
-import { colorPalette } from '@app/hooks/tools/validateSignature/utils/pdfPalette';
-import { startReportPage, createThumbnailLoader } from '@app/hooks/tools/validateSignature/utils/pdfPageHelpers';
-import { deriveEntryStatus } from '@app/hooks/tools/validateSignature/utils/reportStatus';
-import { drawCenteredMessage } from '@app/hooks/tools/validateSignature/outputtedPDFSections/CenteredMessageSection';
-import { drawSummarySection } from '@app/hooks/tools/validateSignature/outputtedPDFSections/SummarySection';
-import { drawSignatureSection } from '@app/hooks/tools/validateSignature/outputtedPDFSections/SignatureSection';
+import { PdfiumDocument, PdfiumPage, StandardFonts } from "@app/services/pdfiumDocBuilder";
+import type { TFunction } from "i18next";
+import { SignatureValidationReportEntry } from "@app/types/validateSignature";
+import { REPORT_PDF_FILENAME } from "@app/hooks/tools/validateSignature/utils/signatureUtils";
+import { colorPalette } from "@app/hooks/tools/validateSignature/utils/pdfPalette";
+import { startReportPage, createThumbnailLoader } from "@app/hooks/tools/validateSignature/utils/pdfPageHelpers";
+import { deriveEntryStatus } from "@app/hooks/tools/validateSignature/utils/reportStatus";
+import { drawCenteredMessage } from "@app/hooks/tools/validateSignature/outputtedPDFSections/CenteredMessageSection";
+import { drawSummarySection } from "@app/hooks/tools/validateSignature/outputtedPDFSections/SummarySection";
+import { drawSignatureSection } from "@app/hooks/tools/validateSignature/outputtedPDFSections/SignatureSection";
 
 const PAGE_WIDTH = 612;
 const PAGE_HEIGHT = 792;
@@ -27,7 +27,7 @@ const drawDivider = (page: PdfiumPage, marginX: number, contentWidth: number, y:
 
 export const createReportPdf = async (
   entries: SignatureValidationReportEntry[],
-  t: TFunction<'translation'>
+  t: TFunction<"translation">,
 ): Promise<File> => {
   const doc = await PdfiumDocument.create();
   const font = await doc.embedFont(StandardFonts.Helvetica);
@@ -75,7 +75,7 @@ export const createReportPdf = async (
         page,
         font,
         fontBold,
-        text: t('validateSignature.status.invalid', 'Invalid'),
+        text: t("validateSignature.status.invalid", "Invalid"),
         description: entry.error,
         marginX: MARGIN_X,
         contentWidth: CONTENT_WIDTH,
@@ -90,8 +90,8 @@ export const createReportPdf = async (
         page,
         font,
         fontBold,
-        text: t('validateSignature.noSignaturesShort', 'No signatures'),
-        description: t('validateSignature.noSignatures', 'No digital signatures found in this document'),
+        text: t("validateSignature.noSignaturesShort", "No signatures"),
+        description: t("validateSignature.noSignatures", "No digital signatures found in this document"),
         marginX: MARGIN_X,
         contentWidth: CONTENT_WIDTH,
         cursorY,
@@ -134,5 +134,5 @@ export const createReportPdf = async (
 
   const pdfBytes = await doc.save();
   const copy = pdfBytes.slice();
-  return new File([copy.buffer], REPORT_PDF_FILENAME, { type: 'application/pdf' });
+  return new File([copy.buffer], REPORT_PDF_FILENAME, { type: "application/pdf" });
 };
diff --git a/frontend/src/core/hooks/tools/validateSignature/useValidateSignatureOperation.ts b/frontend/src/core/hooks/tools/validateSignature/useValidateSignatureOperation.ts
index cac9b158ab..c20d762eca 100644
--- a/frontend/src/core/hooks/tools/validateSignature/useValidateSignatureOperation.ts
+++ b/frontend/src/core/hooks/tools/validateSignature/useValidateSignatureOperation.ts
@@ -1,20 +1,20 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import apiClient from '@app/services/apiClient';
-import { useFileContext } from '@app/contexts/file/fileHooks';
-import { ToolOperationHook } from '@app/hooks/tools/shared/useToolOperation';
-import type { StirlingFile } from '@app/types/fileContext';
-import { extractErrorMessage } from '@app/utils/toolErrorHandler';
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import apiClient from "@app/services/apiClient";
+import { useFileContext } from "@app/contexts/file/fileHooks";
+import { ToolOperationHook } from "@app/hooks/tools/shared/useToolOperation";
+import type { StirlingFile } from "@app/types/fileContext";
+import { extractErrorMessage } from "@app/utils/toolErrorHandler";
 import {
   SignatureValidationBackendResult,
   SignatureValidationFileResult,
   SignatureValidationReportEntry,
-} from '@app/types/validateSignature';
-import { ValidateSignatureParameters } from '@app/hooks/tools/validateSignature/useValidateSignatureParameters';
-import { buildReportEntries } from '@app/hooks/tools/validateSignature/utils/signatureReportBuilder';
-import { createReportPdf } from '@app/hooks/tools/validateSignature/signatureReportPdf';
-import { createCsvFile as buildCsvFile } from '@app/hooks/tools/validateSignature/utils/signatureCsv';
-import { normalizeBackendResult, RESULT_JSON_FILENAME } from '@app/hooks/tools/validateSignature/utils/signatureUtils';
+} from "@app/types/validateSignature";
+import { ValidateSignatureParameters } from "@app/hooks/tools/validateSignature/useValidateSignatureParameters";
+import { buildReportEntries } from "@app/hooks/tools/validateSignature/utils/signatureReportBuilder";
+import { createReportPdf } from "@app/hooks/tools/validateSignature/signatureReportPdf";
+import { createCsvFile as buildCsvFile } from "@app/hooks/tools/validateSignature/utils/signatureCsv";
+import { normalizeBackendResult, RESULT_JSON_FILENAME } from "@app/hooks/tools/validateSignature/utils/signatureUtils";
 
 export interface ValidateSignatureOperationHook extends ToolOperationHook<ValidateSignatureParameters> {
   results: SignatureValidationReportEntry[];
@@ -24,11 +24,11 @@ export const useValidateSignatureOperation = (): ValidateSignatureOperationHook
   const { t } = useTranslation();
   const { selectors } = useFileContext();
   const [isLoading, setIsLoading] = useState(false);
-  const [status, setStatus] = useState('');
+  const [status, setStatus] = useState("");
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [files, setFiles] = useState<File[]>([]);
   const [downloadUrl, setDownloadUrl] = useState<string | null>(null);
-  const [downloadFilename, setDownloadFilename] = useState('');
+  const [downloadFilename, setDownloadFilename] = useState("");
   const [results, setResults] = useState<SignatureValidationReportEntry[]>([]);
 
   const cancelRequested = useRef(false);
@@ -47,8 +47,8 @@ export const useValidateSignatureOperation = (): ValidateSignatureOperationHook
     setFiles([]);
     cleanupDownloadUrl();
     setDownloadUrl(null);
-    setDownloadFilename('');
-    setStatus('');
+    setDownloadFilename("");
+    setStatus("");
     setErrorMessage(null);
   }, [cleanupDownloadUrl]);
 
@@ -59,19 +59,19 @@ export const useValidateSignatureOperation = (): ValidateSignatureOperationHook
   const executeOperation = useCallback(
     async (params: ValidateSignatureParameters, selectedFiles: StirlingFile[]) => {
       if (selectedFiles.length === 0) {
-        setErrorMessage(t('noFileSelected', 'No files selected'));
+        setErrorMessage(t("noFileSelected", "No files selected"));
         return;
       }
 
       cancelRequested.current = false;
       setIsLoading(true);
-      setStatus(t('validateSignature.processing', 'Validating signatures...'));
+      setStatus(t("validateSignature.processing", "Validating signatures..."));
       setErrorMessage(null);
       setResults([]);
       setFiles([]);
       cleanupDownloadUrl();
       setDownloadUrl(null);
-      setDownloadFilename('');
+      setDownloadFilename("");
 
       try {
         const aggregated: SignatureValidationFileResult[] = [];
@@ -82,19 +82,17 @@ export const useValidateSignatureOperation = (): ValidateSignatureOperationHook
           }
 
           const formData = new FormData();
-          formData.append('fileInput', file);
+          formData.append("fileInput", file);
           if (params.certFile) {
-            formData.append('certFile', params.certFile);
+            formData.append("certFile", params.certFile);
           }
 
           try {
-            const response = await apiClient.post('/api/v1/security/validate-signature', formData, {
-              headers: { 'Content-Type': 'multipart/form-data' },
+            const response = await apiClient.post("/api/v1/security/validate-signature", formData, {
+              headers: { "Content-Type": "multipart/form-data" },
             });
 
-            const data = Array.isArray(response.data)
-              ? (response.data as SignatureValidationBackendResult[])
-              : [];
+            const data = Array.isArray(response.data) ? (response.data as SignatureValidationBackendResult[]) : [];
             const signatures = data.map((item, index) => normalizeBackendResult(item, file, index));
 
             aggregated.push({
@@ -130,7 +128,7 @@ export const useValidateSignatureOperation = (): ValidateSignatureOperationHook
 
           if (enrichedEntries.length > 0) {
             const json = JSON.stringify(enrichedEntries, null, 2);
-            const resultFile = new File([json], RESULT_JSON_FILENAME, { type: 'application/json' });
+            const resultFile = new File([json], RESULT_JSON_FILENAME, { type: "application/json" });
             const csvFile = buildCsvFile(enrichedEntries);
 
             setFiles([resultFile, csvFile]);
@@ -138,20 +136,21 @@ export const useValidateSignatureOperation = (): ValidateSignatureOperationHook
             (async () => {
               try {
                 const pdfFile = await createReportPdf(enrichedEntries, t);
-                setFiles((prev) => [pdfFile, ...prev.filter((f) => !f.name.toLowerCase().endsWith('.pdf'))]);
+                setFiles((prev) => [pdfFile, ...prev.filter((f) => !f.name.toLowerCase().endsWith(".pdf"))]);
                 setDownloadFilename(pdfFile.name);
                 cleanupDownloadUrl();
                 const blobUrl = URL.createObjectURL(pdfFile);
                 previousUrl.current = blobUrl;
                 setDownloadUrl(blobUrl);
               } catch (err) {
-                console.warn('[validateSignature] PDF report generation failed', err);
-                setErrorMessage((prev) =>
-                  prev ??
-                  t(
-                    'validateSignature.error.reportGeneration',
-                    'Could not generate the PDF report. JSON and CSV are available.'
-                  )
+                console.warn("[validateSignature] PDF report generation failed", err);
+                setErrorMessage(
+                  (prev) =>
+                    prev ??
+                    t(
+                      "validateSignature.error.reportGeneration",
+                      "Could not generate the PDF report. JSON and CSV are available.",
+                    ),
                 );
               }
             })();
@@ -161,28 +160,28 @@ export const useValidateSignatureOperation = (): ValidateSignatureOperationHook
           const anySuccess = aggregated.some((item) => item.signatures.length > 0);
 
           if (anyError && !anySuccess) {
-            setErrorMessage(t('validateSignature.error.allFailed', 'Unable to validate the selected files.'));
+            setErrorMessage(t("validateSignature.error.allFailed", "Unable to validate the selected files."));
           } else if (anyError) {
-            setErrorMessage(t('validateSignature.error.partial', 'Some files could not be validated.'));
+            setErrorMessage(t("validateSignature.error.partial", "Some files could not be validated."));
           }
 
-          setStatus(t('validateSignature.status.complete', 'Validation complete'));
+          setStatus(t("validateSignature.status.complete", "Validation complete"));
         }
       } catch (e) {
-        console.error('[validateSignature] unexpected failure', e);
-        setErrorMessage(t('validateSignature.error.unexpected', 'Unexpected error during validation.'));
+        console.error("[validateSignature] unexpected failure", e);
+        setErrorMessage(t("validateSignature.error.unexpected", "Unexpected error during validation."));
       } finally {
         setIsLoading(false);
       }
     },
-    [cleanupDownloadUrl, selectors, t]
+    [cleanupDownloadUrl, selectors, t],
   );
 
   const cancelOperation = useCallback(() => {
     if (isLoading) {
       cancelRequested.current = true;
       setIsLoading(false);
-      setStatus(t('operationCancelled', 'Operation cancelled'));
+      setStatus(t("operationCancelled", "Operation cancelled"));
     }
   }, [isLoading, t]);
 
@@ -226,6 +225,6 @@ export const useValidateSignatureOperation = (): ValidateSignatureOperationHook
       resetResults,
       results,
       status,
-    ]
+    ],
   );
 };
diff --git a/frontend/src/core/hooks/tools/validateSignature/useValidateSignatureParameters.ts b/frontend/src/core/hooks/tools/validateSignature/useValidateSignatureParameters.ts
index 864b08aea2..9bc128195d 100644
--- a/frontend/src/core/hooks/tools/validateSignature/useValidateSignatureParameters.ts
+++ b/frontend/src/core/hooks/tools/validateSignature/useValidateSignatureParameters.ts
@@ -1,4 +1,4 @@
-import { useBaseParameters, BaseParametersHook } from '@app/hooks/tools/shared/useBaseParameters';
+import { useBaseParameters, BaseParametersHook } from "@app/hooks/tools/shared/useBaseParameters";
 
 export interface ValidateSignatureParameters {
   certFile: File | null;
@@ -13,6 +13,6 @@ export type ValidateSignatureParametersHook = BaseParametersHook<ValidateSignatu
 export const useValidateSignatureParameters = (): ValidateSignatureParametersHook => {
   return useBaseParameters({
     defaultParameters,
-    endpointName: 'validate-signature',
+    endpointName: "validate-signature",
   });
 };
diff --git a/frontend/src/core/hooks/tools/validateSignature/utils/pdfPageHelpers.ts b/frontend/src/core/hooks/tools/validateSignature/utils/pdfPageHelpers.ts
index a1c70b1261..e539331507 100644
--- a/frontend/src/core/hooks/tools/validateSignature/utils/pdfPageHelpers.ts
+++ b/frontend/src/core/hooks/tools/validateSignature/utils/pdfPageHelpers.ts
@@ -1,6 +1,6 @@
-import { PdfiumDocument, PdfiumFont, PdfiumImage } from '@app/services/pdfiumDocBuilder';
-import type { TFunction } from 'i18next';
-import { colorPalette } from '@app/hooks/tools/validateSignature/utils/pdfPalette';
+import { PdfiumDocument, PdfiumFont, PdfiumImage } from "@app/services/pdfiumDocBuilder";
+import type { TFunction } from "i18next";
+import { colorPalette } from "@app/hooks/tools/validateSignature/utils/pdfPalette";
 
 interface StartPageParams {
   doc: PdfiumDocument;
@@ -13,7 +13,7 @@ interface StartPageParams {
   pageHeight: number;
   title: string;
   isContinuation: boolean;
-  t: TFunction<'translation'>;
+  t: TFunction<"translation">;
 }
 
 export const startReportPage = ({
@@ -32,7 +32,7 @@ export const startReportPage = ({
   let cursorY = pageHeight - marginY;
 
   if (isContinuation) {
-    const heading = `${title} - ${t('validateSignature.report.continued', 'Continued')}`;
+    const heading = `${title} - ${t("validateSignature.report.continued", "Continued")}`;
     page.drawText(heading, {
       x: marginX,
       y: cursorY - 18,
@@ -44,7 +44,7 @@ export const startReportPage = ({
   }
 
   const pageNumber = doc.getPageCount();
-  page.drawText(`${t('validateSignature.report.page', 'Page')} ${pageNumber}`, {
+  page.drawText(`${t("validateSignature.report.page", "Page")} ${pageNumber}`, {
     x: pageWidth - marginX - 80,
     y: marginY / 2,
     size: 9,
@@ -52,7 +52,7 @@ export const startReportPage = ({
     color: colorPalette.textMuted,
   });
 
-  page.drawText(t('validateSignature.report.footer', 'Validated via Stirling PDF'), {
+  page.drawText(t("validateSignature.report.footer", "Validated via Stirling PDF"), {
     x: marginX,
     y: marginY / 2,
     size: 9,
@@ -74,12 +74,12 @@ export const createThumbnailLoader = (doc: PdfiumDocument) => {
     try {
       const response = await fetch(url);
       const bytes = new Uint8Array(await response.arrayBuffer());
-      const contentType = response.headers.get('content-type') || '';
+      const contentType = response.headers.get("content-type") || "";
       let image: PdfiumImage;
 
-      if (contentType.includes('png')) {
+      if (contentType.includes("png")) {
         image = await doc.embedPng(bytes);
-      } else if (contentType.includes('jpeg') || contentType.includes('jpg')) {
+      } else if (contentType.includes("jpeg") || contentType.includes("jpg")) {
         image = await doc.embedJpg(bytes);
       } else {
         try {
@@ -93,7 +93,7 @@ export const createThumbnailLoader = (doc: PdfiumDocument) => {
       cache.set(url, result);
       return result;
     } catch (error) {
-      console.warn('[validateSignature] Failed to load thumbnail', error);
+      console.warn("[validateSignature] Failed to load thumbnail", error);
       cache.set(url, null);
       return null;
     }
diff --git a/frontend/src/core/hooks/tools/validateSignature/utils/pdfPalette.ts b/frontend/src/core/hooks/tools/validateSignature/utils/pdfPalette.ts
index 59b4907036..245d48fabf 100644
--- a/frontend/src/core/hooks/tools/validateSignature/utils/pdfPalette.ts
+++ b/frontend/src/core/hooks/tools/validateSignature/utils/pdfPalette.ts
@@ -1,9 +1,18 @@
-import { rgb } from '@app/services/pdfiumDocBuilder';
+import { rgb } from "@app/services/pdfiumDocBuilder";
 
 type RgbTuple = [number, number, number];
 
 const defaultLightPalette: Record<
-  'headerBackground' | 'accent' | 'textPrimary' | 'textMuted' | 'boxBackground' | 'boxBorder' | 'warning' | 'danger' | 'success' | 'neutral',
+  | "headerBackground"
+  | "accent"
+  | "textPrimary"
+  | "textMuted"
+  | "boxBackground"
+  | "boxBorder"
+  | "warning"
+  | "danger"
+  | "success"
+  | "neutral",
   RgbTuple
 > = {
   headerBackground: [239, 246, 255],
@@ -25,7 +34,7 @@ const toRgb = ([r, g, b]: RgbTuple) => rgb(r / 255, g / 255, b / 255);
  * Falls back to sensible defaults when the CSS variable cannot be resolved.
  */
 function getCssVariableAsRgb(variableName: string, fallback: RgbTuple) {
-  if (typeof window === 'undefined') {
+  if (typeof window === "undefined") {
     return toRgb(fallback);
   }
 
@@ -36,7 +45,7 @@ function getCssVariableAsRgb(variableName: string, fallback: RgbTuple) {
     return toRgb(fallback);
   }
 
-  const [r, g, b] = value.split(' ').map(Number);
+  const [r, g, b] = value.split(" ").map(Number);
 
   if ([r, g, b].some((component) => Number.isNaN(component))) {
     console.warn(`Invalid CSS variable format for ${variableName}: ${value}`);
@@ -47,14 +56,14 @@ function getCssVariableAsRgb(variableName: string, fallback: RgbTuple) {
 }
 
 export const colorPalette = {
-  headerBackground: getCssVariableAsRgb('--pdf-light-header-bg', defaultLightPalette.headerBackground),
-  accent: getCssVariableAsRgb('--pdf-light-accent', defaultLightPalette.accent),
-  textPrimary: getCssVariableAsRgb('--pdf-light-text-primary', defaultLightPalette.textPrimary),
-  textMuted: getCssVariableAsRgb('--pdf-light-text-muted', defaultLightPalette.textMuted),
-  boxBackground: getCssVariableAsRgb('--pdf-light-box-bg', defaultLightPalette.boxBackground),
-  boxBorder: getCssVariableAsRgb('--pdf-light-box-border', defaultLightPalette.boxBorder),
-  warning: getCssVariableAsRgb('--pdf-light-warning', defaultLightPalette.warning),
-  danger: getCssVariableAsRgb('--pdf-light-danger', defaultLightPalette.danger),
-  success: getCssVariableAsRgb('--pdf-light-success', defaultLightPalette.success),
-  neutral: getCssVariableAsRgb('--pdf-light-neutral', defaultLightPalette.neutral),
+  headerBackground: getCssVariableAsRgb("--pdf-light-header-bg", defaultLightPalette.headerBackground),
+  accent: getCssVariableAsRgb("--pdf-light-accent", defaultLightPalette.accent),
+  textPrimary: getCssVariableAsRgb("--pdf-light-text-primary", defaultLightPalette.textPrimary),
+  textMuted: getCssVariableAsRgb("--pdf-light-text-muted", defaultLightPalette.textMuted),
+  boxBackground: getCssVariableAsRgb("--pdf-light-box-bg", defaultLightPalette.boxBackground),
+  boxBorder: getCssVariableAsRgb("--pdf-light-box-border", defaultLightPalette.boxBorder),
+  warning: getCssVariableAsRgb("--pdf-light-warning", defaultLightPalette.warning),
+  danger: getCssVariableAsRgb("--pdf-light-danger", defaultLightPalette.danger),
+  success: getCssVariableAsRgb("--pdf-light-success", defaultLightPalette.success),
+  neutral: getCssVariableAsRgb("--pdf-light-neutral", defaultLightPalette.neutral),
 };
diff --git a/frontend/src/core/hooks/tools/validateSignature/utils/pdfText.ts b/frontend/src/core/hooks/tools/validateSignature/utils/pdfText.ts
index 5be41918c1..b45cc59169 100644
--- a/frontend/src/core/hooks/tools/validateSignature/utils/pdfText.ts
+++ b/frontend/src/core/hooks/tools/validateSignature/utils/pdfText.ts
@@ -1,4 +1,4 @@
-import { PdfiumFont } from '@app/services/pdfiumDocBuilder';
+import { PdfiumFont } from "@app/services/pdfiumDocBuilder";
 
 export const wrapText = (text: string, font: PdfiumFont, fontSize: number, maxWidth: number): string[] => {
   const lines: string[] = [];
@@ -7,12 +7,12 @@ export const wrapText = (text: string, font: PdfiumFont, fontSize: number, maxWi
   paragraphs.forEach((paragraph) => {
     const trimmed = paragraph.trim();
     if (trimmed.length === 0) {
-      lines.push('');
+      lines.push("");
       return;
     }
 
     const words = trimmed.split(/\s+/);
-    let currentLine = '';
+    let currentLine = "";
     words.forEach((word) => {
       const tentative = currentLine.length > 0 ? `${currentLine} ${word}` : word;
       const width = font.widthOfTextAtSize(tentative, fontSize);
@@ -34,15 +34,15 @@ export const wrapText = (text: string, font: PdfiumFont, fontSize: number, maxWi
 };
 
 export const formatFileSize = (bytes?: number | null) => {
-  if (!bytes || bytes <= 0) return '--';
-  const units = ['B', 'KB', 'MB', 'GB'];
+  if (!bytes || bytes <= 0) return "--";
+  const units = ["B", "KB", "MB", "GB"];
   const exponent = Math.min(Math.floor(Math.log(bytes) / Math.log(1024)), units.length - 1);
   const size = bytes / Math.pow(1024, exponent);
   return `${size.toFixed(exponent === 0 ? 0 : 1)} ${units[exponent]}`;
 };
 
 export const formatDate = (value?: string | null) => {
-  if (!value) return '--';
+  if (!value) return "--";
   const parsed = Date.parse(value);
   if (!Number.isNaN(parsed)) {
     return new Date(parsed).toLocaleString();
diff --git a/frontend/src/core/hooks/tools/validateSignature/utils/reportStatus.ts b/frontend/src/core/hooks/tools/validateSignature/utils/reportStatus.ts
index 25c0687e1c..4b2a4323f4 100644
--- a/frontend/src/core/hooks/tools/validateSignature/utils/reportStatus.ts
+++ b/frontend/src/core/hooks/tools/validateSignature/utils/reportStatus.ts
@@ -1,21 +1,21 @@
-import type { TFunction } from 'i18next';
-import { SignatureValidationReportEntry } from '@app/types/validateSignature';
-import { colorPalette } from '@app/hooks/tools/validateSignature/utils/pdfPalette';
+import type { TFunction } from "i18next";
+import { SignatureValidationReportEntry } from "@app/types/validateSignature";
+import { colorPalette } from "@app/hooks/tools/validateSignature/utils/pdfPalette";
 
 export const deriveEntryStatus = (
-  entry: Pick<SignatureValidationReportEntry, 'error' | 'signatures'>,
-  t: TFunction<'translation'>
+  entry: Pick<SignatureValidationReportEntry, "error" | "signatures">,
+  t: TFunction<"translation">,
 ) => {
   if (entry.error) {
     return {
-      text: t('validateSignature.status.invalid', 'Invalid'),
+      text: t("validateSignature.status.invalid", "Invalid"),
       color: colorPalette.danger,
     };
   }
 
   if (entry.signatures.length === 0) {
     return {
-      text: t('validateSignature.noSignaturesShort', 'No signatures'),
+      text: t("validateSignature.noSignaturesShort", "No signatures"),
       color: colorPalette.neutral,
     };
   }
@@ -25,13 +25,13 @@ export const deriveEntryStatus = (
 
   if (allValid) {
     return {
-      text: t('validateSignature.status.valid', 'Valid'),
+      text: t("validateSignature.status.valid", "Valid"),
       color: colorPalette.success,
     };
   }
 
   return {
-    text: t('validateSignature.status.invalid', 'Invalid'),
+    text: t("validateSignature.status.invalid", "Invalid"),
     color: colorPalette.danger,
   };
 };
diff --git a/frontend/src/core/hooks/tools/validateSignature/utils/signatureCsv.ts b/frontend/src/core/hooks/tools/validateSignature/utils/signatureCsv.ts
index 1a485c37bb..9609ed0745 100644
--- a/frontend/src/core/hooks/tools/validateSignature/utils/signatureCsv.ts
+++ b/frontend/src/core/hooks/tools/validateSignature/utils/signatureCsv.ts
@@ -1,31 +1,36 @@
-import { SignatureValidationReportEntry } from '@app/types/validateSignature';
-import { CSV_FILENAME, booleanToString, escapeCsvValue, keyUsagesToString } from '@app/hooks/tools/validateSignature/utils/signatureUtils';
+import { SignatureValidationReportEntry } from "@app/types/validateSignature";
+import {
+  CSV_FILENAME,
+  booleanToString,
+  escapeCsvValue,
+  keyUsagesToString,
+} from "@app/hooks/tools/validateSignature/utils/signatureUtils";
 
 const buildCsvRows = (entries: SignatureValidationReportEntry[]): string[][] => {
   const headers = [
-    'fileName',
-    'signatureIndex',
-    'valid',
-    'chainValid',
-    'trustValid',
-    'notExpired',
-    'revocationChecked',
-    'revocationStatus',
-    'signerName',
-    'signatureDate',
-    'reason',
-    'location',
-    'issuerDN',
-    'subjectDN',
-    'serialNumber',
-    'validFrom',
-    'validUntil',
-    'signatureAlgorithm',
-    'keySize',
-    'version',
-    'keyUsages',
-    'selfSigned',
-    'errorMessage'
+    "fileName",
+    "signatureIndex",
+    "valid",
+    "chainValid",
+    "trustValid",
+    "notExpired",
+    "revocationChecked",
+    "revocationStatus",
+    "signerName",
+    "signatureDate",
+    "reason",
+    "location",
+    "issuerDN",
+    "subjectDN",
+    "serialNumber",
+    "validFrom",
+    "validUntil",
+    "signatureAlgorithm",
+    "keySize",
+    "version",
+    "keyUsages",
+    "selfSigned",
+    "errorMessage",
   ];
 
   const rows: string[][] = [headers];
@@ -41,49 +46,49 @@ const buildCsvRows = (entries: SignatureValidationReportEntry[]): string[][] =>
           booleanToString(signature.trustValid),
           booleanToString(signature.notExpired),
           booleanToString(signature.revocationChecked),
-          signature.revocationStatus || '',
-          signature.signerName || '',
-          signature.signatureDate || '',
-          signature.reason || '',
-          signature.location || '',
-          signature.issuerDN || '',
-          signature.subjectDN || '',
-          signature.serialNumber || '',
-          signature.validFrom || '',
-          signature.validUntil || '',
-          signature.signatureAlgorithm || '',
-          signature.keySize !== null && signature.keySize !== undefined ? String(signature.keySize) : '',
-          signature.version || '',
+          signature.revocationStatus || "",
+          signature.signerName || "",
+          signature.signatureDate || "",
+          signature.reason || "",
+          signature.location || "",
+          signature.issuerDN || "",
+          signature.subjectDN || "",
+          signature.serialNumber || "",
+          signature.validFrom || "",
+          signature.validUntil || "",
+          signature.signatureAlgorithm || "",
+          signature.keySize !== null && signature.keySize !== undefined ? String(signature.keySize) : "",
+          signature.version || "",
           keyUsagesToString(signature.keyUsages),
           booleanToString(signature.selfSigned),
-          signature.errorMessage || fileResult.error || ''
+          signature.errorMessage || fileResult.error || "",
         ]);
       });
     } else {
       rows.push([
         fileResult.fileName,
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
-        '',
-        fileResult.error || ''
+        "",
+        "",
+        "",
+        "",
+        "",
+        "",
+        "",
+        "",
+        "",
+        "",
+        "",
+        "",
+        "",
+        "",
+        "",
+        "",
+        "",
+        "",
+        "",
+        "",
+        "",
+        fileResult.error || "",
       ]);
     }
   });
@@ -93,6 +98,6 @@ const buildCsvRows = (entries: SignatureValidationReportEntry[]): string[][] =>
 
 export const createCsvFile = (entries: SignatureValidationReportEntry[]): File => {
   const rows = buildCsvRows(entries);
-  const csv = rows.map((row) => row.map(escapeCsvValue).join(',')).join('\r\n');
-  return new File([csv], CSV_FILENAME, { type: 'text/csv;charset=utf-8;' });
+  const csv = rows.map((row) => row.map(escapeCsvValue).join(",")).join("\r\n");
+  return new File([csv], CSV_FILENAME, { type: "text/csv;charset=utf-8;" });
 };
diff --git a/frontend/src/core/hooks/tools/validateSignature/utils/signatureReportBuilder.ts b/frontend/src/core/hooks/tools/validateSignature/utils/signatureReportBuilder.ts
index cdff64c43b..ba6a829c7a 100644
--- a/frontend/src/core/hooks/tools/validateSignature/utils/signatureReportBuilder.ts
+++ b/frontend/src/core/hooks/tools/validateSignature/utils/signatureReportBuilder.ts
@@ -1,14 +1,14 @@
-import { SignatureValidationFileResult, SignatureValidationReportEntry } from '@app/types/validateSignature';
-import { FileContextSelectors } from '@app/types/fileContext';
-import type { FileId } from '@app/types/file';
-import type { TFunction } from 'i18next';
-import { deriveEntryStatus } from '@app/hooks/tools/validateSignature/utils/reportStatus';
+import { SignatureValidationFileResult, SignatureValidationReportEntry } from "@app/types/validateSignature";
+import { FileContextSelectors } from "@app/types/fileContext";
+import type { FileId } from "@app/types/file";
+import type { TFunction } from "i18next";
+import { deriveEntryStatus } from "@app/hooks/tools/validateSignature/utils/reportStatus";
 
 interface BuildReportEntriesOptions {
   results: SignatureValidationFileResult[];
   selectors: FileContextSelectors;
   generatedAt: number;
-  t?: TFunction<'translation'>;
+  t?: TFunction<"translation">;
 }
 
 export const buildReportEntries = ({
diff --git a/frontend/src/core/hooks/tools/validateSignature/utils/signatureStatus.ts b/frontend/src/core/hooks/tools/validateSignature/utils/signatureStatus.ts
index 981fa02e37..b8a2e5eb4b 100644
--- a/frontend/src/core/hooks/tools/validateSignature/utils/signatureStatus.ts
+++ b/frontend/src/core/hooks/tools/validateSignature/utils/signatureStatus.ts
@@ -1,8 +1,8 @@
-import type { TFunction } from 'i18next';
-import type { SignatureValidationSignature } from '@app/types/validateSignature';
-import { colorPalette } from '@app/hooks/tools/validateSignature/utils/pdfPalette';
+import type { TFunction } from "i18next";
+import type { SignatureValidationSignature } from "@app/types/validateSignature";
+import { colorPalette } from "@app/hooks/tools/validateSignature/utils/pdfPalette";
 
-export type SignatureStatusKind = 'valid' | 'warning' | 'invalid' | 'neutral';
+export type SignatureStatusKind = "valid" | "warning" | "invalid" | "neutral";
 
 export interface SignatureStatus {
   kind: SignatureStatusKind;
@@ -12,13 +12,13 @@ export interface SignatureStatus {
 
 export const computeSignatureStatus = (
   signature: SignatureValidationSignature,
-  t: TFunction<'translation'>
+  t: TFunction<"translation">,
 ): SignatureStatus => {
   // Start with error
   if (signature.errorMessage) {
     return {
-      kind: 'invalid',
-      label: t('validateSignature.status.invalid', 'Invalid'),
+      kind: "invalid",
+      label: t("validateSignature.status.invalid", "Invalid"),
       details: [signature.errorMessage],
     };
   }
@@ -27,24 +27,24 @@ export const computeSignatureStatus = (
   const trustIssues: string[] = [];
 
   if (!signature.valid) {
-    issues.push(t('validateSignature.issue.signatureInvalid', 'Signature cryptographic check failed'));
+    issues.push(t("validateSignature.issue.signatureInvalid", "Signature cryptographic check failed"));
   }
   if (!signature.chainValid) {
-    trustIssues.push(t('validateSignature.issue.chainInvalid', 'Certificate chain invalid'));
+    trustIssues.push(t("validateSignature.issue.chainInvalid", "Certificate chain invalid"));
   }
   if (!signature.trustValid) {
-    trustIssues.push(t('validateSignature.issue.trustInvalid', 'Certificate not trusted'));
+    trustIssues.push(t("validateSignature.issue.trustInvalid", "Certificate not trusted"));
   }
   if (!signature.notExpired) {
-    trustIssues.push(t('validateSignature.issue.certExpired', 'Certificate expired'));
+    trustIssues.push(t("validateSignature.issue.certExpired", "Certificate expired"));
   }
 
   // Use revocationStatus from backend; default to 'unknown' when absent
-  const revStatus = signature.revocationStatus ?? 'unknown';
-  if (revStatus === 'revoked') {
-    trustIssues.push(t('validateSignature.issue.certRevoked', 'Certificate revoked'));
-  } else if (revStatus === 'soft-fail') {
-    trustIssues.push(t('validateSignature.issue.certRevocationUnknown', 'Certificate revocation status unknown'));
+  const revStatus = signature.revocationStatus ?? "unknown";
+  if (revStatus === "revoked") {
+    trustIssues.push(t("validateSignature.issue.certRevoked", "Certificate revoked"));
+  } else if (revStatus === "soft-fail") {
+    trustIssues.push(t("validateSignature.issue.certRevocationUnknown", "Certificate revocation status unknown"));
   }
 
   // Aggregate all issues for details UI (ignore missing metadata fields; they are optional)
@@ -53,31 +53,29 @@ export const computeSignatureStatus = (
   // If cryptographic validation failed, mark as Invalid
   if (!signature.valid) {
     return {
-      kind: 'invalid',
-      label: t('validateSignature.status.invalid', 'Invalid'),
+      kind: "invalid",
+      label: t("validateSignature.status.invalid", "Invalid"),
       details: issues,
     };
   }
 
   // Otherwise, mark as Valid regardless of optional field presence and trust warnings
   return {
-    kind: 'valid',
-    label: t('validateSignature.status.valid', 'Valid'),
+    kind: "valid",
+    label: t("validateSignature.status.valid", "Valid"),
     details: issues,
   };
 };
 
 export const statusKindToPdfColor = (kind: SignatureStatusKind) => {
   switch (kind) {
-    case 'valid':
+    case "valid":
       return colorPalette.success;
-    case 'warning':
+    case "warning":
       return colorPalette.warning;
-    case 'invalid':
+    case "invalid":
       return colorPalette.danger;
     default:
       return colorPalette.neutral;
   }
 };
-
-
diff --git a/frontend/src/core/hooks/tools/validateSignature/utils/signatureUtils.ts b/frontend/src/core/hooks/tools/validateSignature/utils/signatureUtils.ts
index bb98afc8cb..8d4d84627b 100644
--- a/frontend/src/core/hooks/tools/validateSignature/utils/signatureUtils.ts
+++ b/frontend/src/core/hooks/tools/validateSignature/utils/signatureUtils.ts
@@ -1,22 +1,22 @@
-import { SignatureValidationBackendResult, SignatureValidationSignature } from '@app/types/validateSignature';
-import type { StirlingFile } from '@app/types/fileContext';
+import { SignatureValidationBackendResult, SignatureValidationSignature } from "@app/types/validateSignature";
+import type { StirlingFile } from "@app/types/fileContext";
 
-export const RESULT_JSON_FILENAME = 'signature-validation.json';
-export const CSV_FILENAME = 'signature-validation.csv';
-export const REPORT_PDF_FILENAME = 'signature-validation-report.pdf';
+export const RESULT_JSON_FILENAME = "signature-validation.json";
+export const CSV_FILENAME = "signature-validation.csv";
+export const REPORT_PDF_FILENAME = "signature-validation-report.pdf";
 
 export const coerceString = (value: string | number | null | undefined): string => {
   if (value === null || value === undefined) {
-    return '';
+    return "";
   }
   return String(value);
 };
 
 export const coerceNumber = (value: number | string | null | undefined): number | null => {
-  if (typeof value === 'number' && Number.isFinite(value)) {
+  if (typeof value === "number" && Number.isFinite(value)) {
     return value;
   }
-  if (typeof value === 'string') {
+  if (typeof value === "string") {
     const parsed = parseInt(value, 10);
     return Number.isNaN(parsed) ? null : parsed;
   }
@@ -24,12 +24,12 @@ export const coerceNumber = (value: number | string | null | undefined): number
 };
 
 export const escapeCsvValue = (raw: string): string => {
-  let value = raw ?? '';
-  value = value.replace(/\r?\n|\r/g, ' ');
+  let value = raw ?? "";
+  value = value.replace(/\r?\n|\r/g, " ");
   if (value.includes('"')) {
     value = value.replace(/"/g, '""');
   }
-  if (value.includes(',') || value.includes('"') || value.includes(';')) {
+  if (value.includes(",") || value.includes('"') || value.includes(";")) {
     value = `"${value}"`;
   }
   return value;
@@ -37,22 +37,22 @@ export const escapeCsvValue = (raw: string): string => {
 
 export const booleanToString = (value: boolean | null | undefined): string => {
   if (value === null || value === undefined) {
-    return '';
+    return "";
   }
-  return value ? 'true' : 'false';
+  return value ? "true" : "false";
 };
 
 export const keyUsagesToString = (keyUsages: string[] | undefined): string => {
   if (!keyUsages || keyUsages.length === 0) {
-    return '';
+    return "";
   }
-  return keyUsages.join('; ');
+  return keyUsages.join("; ");
 };
 
 export const normalizeBackendResult = (
   item: SignatureValidationBackendResult,
   stirlingFile: StirlingFile,
-  index: number
+  index: number,
 ): SignatureValidationSignature => ({
   id: `${stirlingFile.fileId}-${index}`,
   valid: Boolean(item.valid),
@@ -60,9 +60,7 @@ export const normalizeBackendResult = (
   trustValid: Boolean(item.trustValid),
   notExpired: Boolean(item.notExpired),
   revocationChecked:
-    item.revocationChecked === null || item.revocationChecked === undefined
-      ? null
-      : Boolean(item.revocationChecked),
+    item.revocationChecked === null || item.revocationChecked === undefined ? null : Boolean(item.revocationChecked),
   revocationStatus: item.revocationStatus ? coerceString(item.revocationStatus) : null,
   validationTimeSource: item.validationTimeSource ? coerceString(item.validationTimeSource) : null,
   signerName: coerceString(item.signerName),
diff --git a/frontend/src/core/hooks/useAdminSettings.ts b/frontend/src/core/hooks/useAdminSettings.ts
index e88e06400c..b3c80b5ff4 100644
--- a/frontend/src/core/hooks/useAdminSettings.ts
+++ b/frontend/src/core/hooks/useAdminSettings.ts
@@ -1,6 +1,6 @@
-import { useState, useCallback } from 'react';
-import apiClient from '@app/services/apiClient';
-import { mergePendingSettings, isFieldPending, hasPendingChanges } from '@app/utils/settingsPendingHelper';
+import { useState, useCallback } from "react";
+import apiClient from "@app/services/apiClient";
+import { mergePendingSettings, isFieldPending, hasPendingChanges } from "@app/utils/settingsPendingHelper";
 
 interface UseAdminSettingsOptions<T> {
   sectionName: string;
@@ -40,9 +40,7 @@ interface UseAdminSettingsReturn<T> {
  *   sectionName: 'legal'
  * });
  */
-export function useAdminSettings<T = any>(
-  options: UseAdminSettingsOptions<T>
-): UseAdminSettingsReturn<T> {
+export function useAdminSettings<T = any>(options: UseAdminSettingsOptions<T>): UseAdminSettingsReturn<T> {
   const { sectionName, fetchTransformer, saveTransformer } = options;
 
   const [settings, setSettings] = useState<T>({} as T);
@@ -78,7 +76,10 @@ export function useAdminSettings<T = any>(
       // Store merged settings as original for delta comparison
       // This ensures we compare against what the user SAW (with pending), not raw active values
       setOriginalSettings(mergedSettings as T);
-      console.log(`[useAdminSettings:${sectionName}] Original settings (for comparison):`, JSON.stringify(mergedSettings, null, 2));
+      console.log(
+        `[useAdminSettings:${sectionName}] Original settings (for comparison):`,
+        JSON.stringify(mergedSettings, null, 2),
+      );
 
       setSettings(mergedSettings as T);
     } catch (error) {
@@ -122,7 +123,7 @@ export function useAdminSettings<T = any>(
 
           console.log(`[useAdminSettings:${sectionName}] Comparing deltaSettings:`, {
             original: originalDeltaSettings,
-            current: deltaSettings
+            current: deltaSettings,
           });
 
           // Compare current vs original deltaSettings (both have same backend paths)
@@ -135,14 +136,14 @@ export function useAdminSettings<T = any>(
               changedDeltaSettings[key] = value;
               console.log(`[useAdminSettings:${sectionName}] Delta field changed: ${key}`, {
                 original: originalValue,
-                new: value
+                new: value,
               });
             }
           }
 
           if (Object.keys(changedDeltaSettings).length > 0) {
             console.log(`[useAdminSettings:${sectionName}] Sending delta settings:`, changedDeltaSettings);
-            await apiClient.put('/api/v1/admin/settings', { settings: changedDeltaSettings });
+            await apiClient.put("/api/v1/admin/settings", { settings: changedDeltaSettings });
           } else {
             console.log(`[useAdminSettings:${sectionName}] No delta settings changed, skipping`);
           }
@@ -214,9 +215,5 @@ function computeDelta(original: any, current: any): any {
  * Check if value is a plain object (not array, not null, not Date, etc.)
  */
 function isPlainObject(value: any): boolean {
-  return (
-    value !== null &&
-    typeof value === 'object' &&
-    value.constructor === Object
-  );
+  return value !== null && typeof value === "object" && value.constructor === Object;
 }
diff --git a/frontend/src/core/hooks/useAuditFilters.ts b/frontend/src/core/hooks/useAuditFilters.ts
index b650c3491f..d98880c8c5 100644
--- a/frontend/src/core/hooks/useAuditFilters.ts
+++ b/frontend/src/core/hooks/useAuditFilters.ts
@@ -1,5 +1,5 @@
-import { useState, useEffect } from 'react';
-import auditService, { AuditFilters } from '@app/services/auditService';
+import { useState, useEffect } from "react";
+import auditService, { AuditFilters } from "@app/services/auditService";
 
 /**
  * Shared hook for managing audit filters across components
@@ -19,14 +19,11 @@ export function useAuditFilters(initialFilters: Partial<AuditFilters> = {}, logi
   useEffect(() => {
     const fetchMetadata = async () => {
       try {
-        const [types, usersList] = await Promise.all([
-          auditService.getEventTypes(),
-          auditService.getUsers(),
-        ]);
+        const [types, usersList] = await Promise.all([auditService.getEventTypes(), auditService.getUsers()]);
         setEventTypes(types);
         setUsers(usersList);
       } catch (err) {
-        console.error('Failed to fetch audit metadata:', err);
+        console.error("Failed to fetch audit metadata:", err);
       }
     };
 
diff --git a/frontend/src/core/hooks/useBackendHealth.ts b/frontend/src/core/hooks/useBackendHealth.ts
index baeab6dbea..0e08e6da89 100644
--- a/frontend/src/core/hooks/useBackendHealth.ts
+++ b/frontend/src/core/hooks/useBackendHealth.ts
@@ -1,8 +1,8 @@
-import type { BackendHealthState } from '@app/types/backendHealth';
+import type { BackendHealthState } from "@app/types/backendHealth";
 
 export function useBackendHealth(): BackendHealthState {
   return {
-    status: 'healthy',
+    status: "healthy",
     message: null,
     error: null,
     isOnline: true,
diff --git a/frontend/src/core/hooks/useBackendProbe.ts b/frontend/src/core/hooks/useBackendProbe.ts
index 979bc8a07f..910e3199be 100644
--- a/frontend/src/core/hooks/useBackendProbe.ts
+++ b/frontend/src/core/hooks/useBackendProbe.ts
@@ -1,7 +1,7 @@
-import { useCallback, useEffect, useState } from 'react';
-import { BASE_PATH } from '@app/constants/app';
+import { useCallback, useEffect, useState } from "react";
+import { BASE_PATH } from "@app/constants/app";
 
-type BackendStatus = 'up' | 'starting' | 'down';
+type BackendStatus = "up" | "starting" | "down";
 
 interface BackendProbeState {
   status: BackendStatus;
@@ -15,57 +15,57 @@ interface BackendProbeState {
  */
 export function useBackendProbe() {
   const [state, setState] = useState<BackendProbeState>({
-    status: 'starting',
+    status: "starting",
     loginDisabled: false,
     loading: true,
   });
 
   const probe = useCallback(async () => {
-    const statusUrl = `${BASE_PATH || ''}/api/v1/info/status`;
-    const loginUrl = `${BASE_PATH || ''}/api/v1/proprietary/ui-data/login`;
+    const statusUrl = `${BASE_PATH || ""}/api/v1/info/status`;
+    const loginUrl = `${BASE_PATH || ""}/api/v1/proprietary/ui-data/login`;
 
     const next: BackendProbeState = {
-      status: 'starting',
+      status: "starting",
       loginDisabled: false,
       loading: false,
     };
 
     try {
-      const res = await fetch(statusUrl, { method: 'GET', cache: 'no-store' });
+      const res = await fetch(statusUrl, { method: "GET", cache: "no-store" });
       if (res.ok) {
         const data = await res.json().catch(() => null);
-        if (data && data.status === 'UP') {
-          next.status = 'up';
+        if (data && data.status === "UP") {
+          next.status = "up";
           setState(next);
           return next;
         }
-        next.status = 'starting';
+        next.status = "starting";
       } else if (res.status === 404 || res.status === 503) {
-        next.status = 'starting';
+        next.status = "starting";
       } else {
-        next.status = 'down';
+        next.status = "down";
       }
     } catch {
-      next.status = 'down';
+      next.status = "down";
     }
 
     // Fallback: proprietary login endpoint to detect disabled login and backend availability
     try {
-      const res = await fetch(loginUrl, { method: 'GET', cache: 'no-store' });
+      const res = await fetch(loginUrl, { method: "GET", cache: "no-store" });
       if (res.ok) {
-        next.status = 'up';
+        next.status = "up";
         const data = await res.json().catch(() => null);
         if (data && data.enableLogin === false) {
           next.loginDisabled = true;
         }
       } else if (res.status === 404) {
         // Endpoint missing usually means login disabled
-        next.status = 'up';
+        next.status = "up";
         next.loginDisabled = true;
       } else if (res.status === 503) {
-        next.status = 'starting';
+        next.status = "starting";
       } else {
-        next.status = 'down';
+        next.status = "down";
       }
     } catch {
       // keep previous inferred state (down/starting)
diff --git a/frontend/src/core/hooks/useBaseUrl.ts b/frontend/src/core/hooks/useBaseUrl.ts
index f8e237dc8b..0ef78b6010 100644
--- a/frontend/src/core/hooks/useBaseUrl.ts
+++ b/frontend/src/core/hooks/useBaseUrl.ts
@@ -1,6 +1,6 @@
-import { useAppConfig } from '@app/contexts/AppConfigContext';
+import { useAppConfig } from "@app/contexts/AppConfigContext";
 
 export const useBaseUrl = (): string => {
   const { config } = useAppConfig();
-  return config?.baseUrl || 'https://demo.stirlingpdf.com';
+  return config?.baseUrl || "https://demo.stirlingpdf.com";
 };
diff --git a/frontend/src/core/hooks/useConversionCloudStatus.ts b/frontend/src/core/hooks/useConversionCloudStatus.ts
index 1c337212bb..14d0e0abaf 100644
--- a/frontend/src/core/hooks/useConversionCloudStatus.ts
+++ b/frontend/src/core/hooks/useConversionCloudStatus.ts
@@ -2,9 +2,9 @@
  * Comprehensive conversion status data
  */
 export interface ConversionStatus {
-  availability: Record<string, boolean>;   // Available on local OR SaaS?
-  cloudStatus: Record<string, boolean>;    // Will use cloud?
-  localOnly: Record<string, boolean>;      // Available ONLY locally (not on SaaS)?
+  availability: Record<string, boolean>; // Available on local OR SaaS?
+  cloudStatus: Record<string, boolean>; // Will use cloud?
+  localOnly: Record<string, boolean>; // Available ONLY locally (not on SaaS)?
 }
 
 /**
diff --git a/frontend/src/core/hooks/useCookieConsent.ts b/frontend/src/core/hooks/useCookieConsent.ts
index d74a33dc05..54c766dad3 100644
--- a/frontend/src/core/hooks/useCookieConsent.ts
+++ b/frontend/src/core/hooks/useCookieConsent.ts
@@ -1,9 +1,9 @@
-import { useEffect, useState, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { BASE_PATH } from '@app/constants/app';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
-import { TOUR_STATE_EVENT, type TourStatePayload } from '@app/constants/events';
-import { getCookieConsentOverrides } from '@app/extensions/cookieConsentConfig';
+import { useEffect, useState, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { BASE_PATH } from "@app/constants/app";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
+import { TOUR_STATE_EVENT, type TourStatePayload } from "@app/constants/events";
+import { getCookieConsentOverrides } from "@app/extensions/cookieConsentConfig";
 
 declare global {
   interface Window {
@@ -23,10 +23,7 @@ interface CookieConsentConfig {
   forceLightMode?: boolean;
 }
 
-export const useCookieConsent = ({
-  analyticsEnabled = false,
-  forceLightMode = false
-}: CookieConsentConfig = {}) => {
+export const useCookieConsent = ({ analyticsEnabled = false, forceLightMode = false }: CookieConsentConfig = {}) => {
   const { t } = useTranslation();
   const { config } = useAppConfig();
   const [isInitialized, setIsInitialized] = useState(false);
@@ -34,15 +31,15 @@ export const useCookieConsent = ({
   useEffect(() => {
     if (!analyticsEnabled) return;
 
-    const mainCSS = document.createElement('link');
-    mainCSS.rel = 'stylesheet';
+    const mainCSS = document.createElement("link");
+    mainCSS.rel = "stylesheet";
     mainCSS.href = `${BASE_PATH}css/cookieconsent.css`;
     if (!document.querySelector(`link[href="${mainCSS.href}"]`)) {
       document.head.appendChild(mainCSS);
     }
 
-    const customCSS = document.createElement('link');
-    customCSS.rel = 'stylesheet';
+    const customCSS = document.createElement("link");
+    customCSS.rel = "stylesheet";
     customCSS.href = `${BASE_PATH}css/cookieconsentCustomisation.css`;
     if (!document.querySelector(`link[href="${customCSS.href}"]`)) {
       document.head.appendChild(customCSS);
@@ -50,30 +47,30 @@ export const useCookieConsent = ({
 
     if (window.CookieConsent) {
       if (forceLightMode) {
-        document.documentElement.classList.remove('cc--darkmode');
+        document.documentElement.classList.remove("cc--darkmode");
       }
       setIsInitialized(true);
       return;
     }
 
-    const script = document.createElement('script');
+    const script = document.createElement("script");
     script.src = `${BASE_PATH}js/thirdParty/cookieconsent.umd.js`;
     script.onload = () => {
       setTimeout(() => {
         const detectTheme = () => {
           if (forceLightMode) {
-            document.documentElement.classList.remove('cc--darkmode');
+            document.documentElement.classList.remove("cc--darkmode");
             return false;
           }
 
-          const mantineScheme = document.documentElement.getAttribute('data-mantine-color-scheme');
-          const hasLightClass = document.documentElement.classList.contains('light');
-          const hasDarkClass = document.documentElement.classList.contains('dark');
-          const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+          const mantineScheme = document.documentElement.getAttribute("data-mantine-color-scheme");
+          const hasLightClass = document.documentElement.classList.contains("light");
+          const hasDarkClass = document.documentElement.classList.contains("dark");
+          const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
 
           let isDarkMode: boolean;
           if (mantineScheme) {
-            isDarkMode = mantineScheme === 'dark';
+            isDarkMode = mantineScheme === "dark";
           } else if (hasLightClass) {
             isDarkMode = false;
           } else if (hasDarkClass) {
@@ -82,23 +79,24 @@ export const useCookieConsent = ({
             isDarkMode = systemPrefersDark;
           }
 
-          document.documentElement.classList.toggle('cc--darkmode', isDarkMode);
+          document.documentElement.classList.toggle("cc--darkmode", isDarkMode);
           return isDarkMode;
         };
 
         setTimeout(() => detectTheme(), 50);
 
         if (!window.CookieConsent) {
-          console.error('CookieConsent is not available on window object');
+          console.error("CookieConsent is not available on window object");
           return;
         }
 
         if (!forceLightMode) {
           const themeObserver = new MutationObserver((mutations) => {
             mutations.forEach((mutation) => {
-              if (mutation.type === 'attributes' &&
-                  (mutation.attributeName === 'data-mantine-color-scheme' ||
-                   mutation.attributeName === 'class')) {
+              if (
+                mutation.type === "attributes" &&
+                (mutation.attributeName === "data-mantine-color-scheme" || mutation.attributeName === "class")
+              ) {
                 detectTheme();
               }
             });
@@ -106,7 +104,7 @@ export const useCookieConsent = ({
 
           themeObserver.observe(document.documentElement, {
             attributes: true,
-            attributeFilter: ['data-mantine-color-scheme', 'class']
+            attributeFilter: ["data-mantine-color-scheme", "class"],
           });
         }
 
@@ -121,93 +119,116 @@ export const useCookieConsent = ({
                 layout: "bar",
                 position: "bottom",
                 equalWeightButtons: true,
-                flipButtons: true
+                flipButtons: true,
               },
               preferencesModal: {
                 layout: "box",
                 position: "right",
                 equalWeightButtons: true,
-                flipButtons: true
-              }
+                flipButtons: true,
+              },
             },
             categories: {
               necessary: {
-                readOnly: true
+                readOnly: true,
               },
               analytics: {
                 services: {
                   ...(config?.enablePosthog !== false && {
                     posthog: {
-                      label: t('cookieBanner.services.posthog', 'PostHog Analytics'),
-                    }
+                      label: t("cookieBanner.services.posthog", "PostHog Analytics"),
+                    },
                   }),
                   ...(config?.enableScarf !== false && {
                     scarf: {
-                      label: t('cookieBanner.services.scarf', 'Scarf Pixel'),
-                    }
-                  })
-                }
-              }
+                      label: t("cookieBanner.services.scarf", "Scarf Pixel"),
+                    },
+                  }),
+                },
+              },
             },
             language: {
               default: "en",
               translations: {
                 en: {
                   consentModal: {
-                    title: t('cookieBanner.popUp.title', 'How we use Cookies'),
-                    description: t('cookieBanner.popUp.description.1', 'We use cookies and other technologies to make Stirling PDF work better for you—helping us improve our tools and keep building features you\'ll love.') +
-                               "<br>" +
-                               t('cookieBanner.popUp.description.2', 'If you\'d rather not, clicking \'No Thanks\' will only enable the essential cookies needed to keep things running smoothly.'),
-                    acceptAllBtn: t('cookieBanner.popUp.acceptAllBtn', 'Okay'),
-                    acceptNecessaryBtn: t('cookieBanner.popUp.acceptNecessaryBtn', 'No Thanks'),
-                    showPreferencesBtn: t('cookieBanner.popUp.showPreferencesBtn', 'Manage preferences'),
+                    title: t("cookieBanner.popUp.title", "How we use Cookies"),
+                    description:
+                      t(
+                        "cookieBanner.popUp.description.1",
+                        "We use cookies and other technologies to make Stirling PDF work better for you—helping us improve our tools and keep building features you'll love.",
+                      ) +
+                      "<br>" +
+                      t(
+                        "cookieBanner.popUp.description.2",
+                        "If you'd rather not, clicking 'No Thanks' will only enable the essential cookies needed to keep things running smoothly.",
+                      ),
+                    acceptAllBtn: t("cookieBanner.popUp.acceptAllBtn", "Okay"),
+                    acceptNecessaryBtn: t("cookieBanner.popUp.acceptNecessaryBtn", "No Thanks"),
+                    showPreferencesBtn: t("cookieBanner.popUp.showPreferencesBtn", "Manage preferences"),
                   },
                   preferencesModal: {
-                    title: t('cookieBanner.preferencesModal.title', 'Consent Preferences Center'),
-                    acceptAllBtn: t('cookieBanner.preferencesModal.acceptAllBtn', 'Accept all'),
-                    acceptNecessaryBtn: t('cookieBanner.preferencesModal.acceptNecessaryBtn', 'Reject all'),
-                    savePreferencesBtn: t('cookieBanner.preferencesModal.savePreferencesBtn', 'Save preferences'),
-                    closeIconLabel: t('cookieBanner.preferencesModal.closeIconLabel', 'Close modal'),
-                    serviceCounterLabel: t('cookieBanner.preferencesModal.serviceCounterLabel', 'Service|Services'),
+                    title: t("cookieBanner.preferencesModal.title", "Consent Preferences Center"),
+                    acceptAllBtn: t("cookieBanner.preferencesModal.acceptAllBtn", "Accept all"),
+                    acceptNecessaryBtn: t("cookieBanner.preferencesModal.acceptNecessaryBtn", "Reject all"),
+                    savePreferencesBtn: t("cookieBanner.preferencesModal.savePreferencesBtn", "Save preferences"),
+                    closeIconLabel: t("cookieBanner.preferencesModal.closeIconLabel", "Close modal"),
+                    serviceCounterLabel: t("cookieBanner.preferencesModal.serviceCounterLabel", "Service|Services"),
                     sections: [
                       {
-                        title: t('cookieBanner.preferencesModal.subtitle', 'Cookie Usage'),
-                        description: t('cookieBanner.preferencesModal.description.1', 'Stirling PDF uses cookies and similar technologies to enhance your experience and understand how our tools are used. This helps us improve performance, develop the features you care about, and provide ongoing support to our users.') +
-                                   "<br><br>" +
-                                   t('cookieBanner.preferencesModal.description.2', 'Stirling PDF cannot—and will never—track or access the content of the documents you use.') +
-                                   "<b> " +
-                                   t('cookieBanner.preferencesModal.description.3', 'Your privacy and trust are at the core of what we do.') +
-                                   "</b>"
+                        title: t("cookieBanner.preferencesModal.subtitle", "Cookie Usage"),
+                        description:
+                          t(
+                            "cookieBanner.preferencesModal.description.1",
+                            "Stirling PDF uses cookies and similar technologies to enhance your experience and understand how our tools are used. This helps us improve performance, develop the features you care about, and provide ongoing support to our users.",
+                          ) +
+                          "<br><br>" +
+                          t(
+                            "cookieBanner.preferencesModal.description.2",
+                            "Stirling PDF cannot—and will never—track or access the content of the documents you use.",
+                          ) +
+                          "<b> " +
+                          t(
+                            "cookieBanner.preferencesModal.description.3",
+                            "Your privacy and trust are at the core of what we do.",
+                          ) +
+                          "</b>",
                       },
                       {
-                        title: t('cookieBanner.preferencesModal.necessary.title.1', 'Strictly Necessary Cookies') +
-                               "<span class=\"pm__badge\">" +
-                               t('cookieBanner.preferencesModal.necessary.title.2', 'Always Enabled') +
-                               "</span>",
-                        description: t('cookieBanner.preferencesModal.necessary.description', 'These cookies are essential for the website to function properly. They enable core features like setting your privacy preferences, logging in, and filling out forms—which is why they can\'t be turned off.'),
-                        linkedCategory: "necessary"
+                        title:
+                          t("cookieBanner.preferencesModal.necessary.title.1", "Strictly Necessary Cookies") +
+                          '<span class="pm__badge">' +
+                          t("cookieBanner.preferencesModal.necessary.title.2", "Always Enabled") +
+                          "</span>",
+                        description: t(
+                          "cookieBanner.preferencesModal.necessary.description",
+                          "These cookies are essential for the website to function properly. They enable core features like setting your privacy preferences, logging in, and filling out forms—which is why they can't be turned off.",
+                        ),
+                        linkedCategory: "necessary",
                       },
                       {
-                        title: t('cookieBanner.preferencesModal.analytics.title', 'Analytics'),
-                        description: t('cookieBanner.preferencesModal.analytics.description', 'These cookies help us understand how our tools are being used, so we can focus on building the features our community values most. Rest assured—Stirling PDF cannot and will never track the content of the documents you work with.'),
-                        linkedCategory: "analytics"
-                      }
-                    ]
-                  }
-                }
-              }
-            }
+                        title: t("cookieBanner.preferencesModal.analytics.title", "Analytics"),
+                        description: t(
+                          "cookieBanner.preferencesModal.analytics.description",
+                          "These cookies help us understand how our tools are being used, so we can focus on building the features our community values most. Rest assured—Stirling PDF cannot and will never track the content of the documents you work with.",
+                        ),
+                        linkedCategory: "analytics",
+                      },
+                    ],
+                  },
+                },
+              },
+            },
           });
-
         } catch (error) {
-          console.error('Error initializing CookieConsent:', error);
+          console.error("Error initializing CookieConsent:", error);
         }
         setIsInitialized(true);
       }, 100);
     };
 
     script.onerror = () => {
-      console.error('Failed to load cookie consent library');
+      console.error("Failed to load cookie consent library");
     };
 
     document.head.appendChild(script);
@@ -230,18 +251,18 @@ export const useCookieConsent = ({
 
     const detectTheme = () => {
       if (forceLightMode) {
-        document.documentElement.classList.remove('cc--darkmode');
+        document.documentElement.classList.remove("cc--darkmode");
         return false;
       }
 
-      const mantineScheme = document.documentElement.getAttribute('data-mantine-color-scheme');
-      const hasLightClass = document.documentElement.classList.contains('light');
-      const hasDarkClass = document.documentElement.classList.contains('dark');
-      const systemPrefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      const mantineScheme = document.documentElement.getAttribute("data-mantine-color-scheme");
+      const hasLightClass = document.documentElement.classList.contains("light");
+      const hasDarkClass = document.documentElement.classList.contains("dark");
+      const systemPrefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
 
       let isDarkMode: boolean;
       if (mantineScheme) {
-        isDarkMode = mantineScheme === 'dark';
+        isDarkMode = mantineScheme === "dark";
       } else if (hasLightClass) {
         isDarkMode = false;
       } else if (hasDarkClass) {
@@ -250,7 +271,7 @@ export const useCookieConsent = ({
         isDarkMode = systemPrefersDark;
       }
 
-      document.documentElement.classList.toggle('cc--darkmode', isDarkMode);
+      document.documentElement.classList.toggle("cc--darkmode", isDarkMode);
       return isDarkMode;
     };
 
@@ -260,9 +281,10 @@ export const useCookieConsent = ({
     if (!forceLightMode) {
       themeObserver = new MutationObserver((mutations) => {
         mutations.forEach((mutation) => {
-          if (mutation.type === 'attributes' &&
-              (mutation.attributeName === 'data-mantine-color-scheme' ||
-               mutation.attributeName === 'class')) {
+          if (
+            mutation.type === "attributes" &&
+            (mutation.attributeName === "data-mantine-color-scheme" || mutation.attributeName === "class")
+          ) {
             detectTheme();
           }
         });
@@ -270,7 +292,7 @@ export const useCookieConsent = ({
 
       themeObserver.observe(document.documentElement, {
         attributes: true,
-        attributeFilter: ['data-mantine-color-scheme', 'class']
+        attributeFilter: ["data-mantine-color-scheme", "class"],
       });
     }
 
@@ -312,7 +334,7 @@ export const useCookieConsent = ({
   }, [isInitialized]);
 
   const isServiceAccepted = useCallback((service: string, category: string): boolean => {
-    if (typeof window === 'undefined' || !window.CookieConsent) {
+    if (typeof window === "undefined" || !window.CookieConsent) {
       return false;
     }
     return window.CookieConsent.acceptedService(service, category);
diff --git a/frontend/src/core/hooks/useDocumentMeta.ts b/frontend/src/core/hooks/useDocumentMeta.ts
index 39f87e854d..0e16172479 100644
--- a/frontend/src/core/hooks/useDocumentMeta.ts
+++ b/frontend/src/core/hooks/useDocumentMeta.ts
@@ -1,5 +1,5 @@
-import { useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useEffect } from "react";
+import { useTranslation } from "react-i18next";
 
 interface MetaOptions {
   title?: string;
@@ -12,30 +12,40 @@ interface MetaOptions {
 
 export const useDocumentMeta = (meta: MetaOptions) => {
   const { i18n } = useTranslation();
-  
+
   useEffect(() => {
     const originalTitle = document.title;
-    const originalDescription = document.querySelector('meta[name="description"]')?.getAttribute('content') || '';
-    
+    const originalDescription = document.querySelector('meta[name="description"]')?.getAttribute("content") || "";
+
     // Store original OpenGraph values for cleanup
-    const ogProperties = ['og:site_name', 'og:locale', 'og:title', 'og:description', 'og:image', 'og:image:width', 'og:image:height', 'og:url', 'og:type'];
+    const ogProperties = [
+      "og:site_name",
+      "og:locale",
+      "og:title",
+      "og:description",
+      "og:image",
+      "og:image:width",
+      "og:image:height",
+      "og:url",
+      "og:type",
+    ];
     const originalOgValues = new Map<string, string | null>();
-    
-    ogProperties.forEach(property => {
+
+    ogProperties.forEach((property) => {
       const element = document.querySelector(`meta[property="${property}"]`);
-      originalOgValues.set(property, element?.getAttribute('content') || null);
+      originalOgValues.set(property, element?.getAttribute("content") || null);
     });
-    
+
     // Update title
     if (meta.title) {
       document.title = meta.title;
     }
-    
+
     // Update or create meta tags
     const updateOrCreateMeta = (name: string, content: string) => {
       let metaElement = document.querySelector(`meta[name="${name}"]`) as HTMLMetaElement;
       if (!metaElement) {
-        metaElement = document.createElement('meta');
+        metaElement = document.createElement("meta");
         metaElement.name = name;
         document.head.appendChild(metaElement);
       }
@@ -45,8 +55,8 @@ export const useDocumentMeta = (meta: MetaOptions) => {
     const updateOrCreateProperty = (property: string, content: string) => {
       let metaElement = document.querySelector(`meta[property="${property}"]`) as HTMLMetaElement;
       if (!metaElement) {
-        metaElement = document.createElement('meta');
-        metaElement.setAttribute('property', property);
+        metaElement = document.createElement("meta");
+        metaElement.setAttribute("property", property);
         document.head.appendChild(metaElement);
       }
       metaElement.content = content;
@@ -54,37 +64,37 @@ export const useDocumentMeta = (meta: MetaOptions) => {
 
     // Update meta tags
     if (meta.description) {
-      updateOrCreateMeta('description', meta.description);
+      updateOrCreateMeta("description", meta.description);
     }
 
     // Update OpenGraph tags
-    updateOrCreateProperty('og:site_name', 'Stirling PDF');
-    updateOrCreateProperty('og:locale', i18n.language.replace('-', '_'));
-    
+    updateOrCreateProperty("og:site_name", "Stirling PDF");
+    updateOrCreateProperty("og:locale", i18n.language.replace("-", "_"));
+
     if (meta.ogTitle) {
-      updateOrCreateProperty('og:title', meta.ogTitle);
+      updateOrCreateProperty("og:title", meta.ogTitle);
     }
     if (meta.ogDescription) {
-      updateOrCreateProperty('og:description', meta.ogDescription);
+      updateOrCreateProperty("og:description", meta.ogDescription);
     }
     if (meta.ogImage) {
-      updateOrCreateProperty('og:image', meta.ogImage);
-      updateOrCreateProperty('og:image:width', '1200');
-      updateOrCreateProperty('og:image:height', '630');
+      updateOrCreateProperty("og:image", meta.ogImage);
+      updateOrCreateProperty("og:image:width", "1200");
+      updateOrCreateProperty("og:image:height", "630");
     }
     if (meta.ogUrl) {
-      updateOrCreateProperty('og:url', meta.ogUrl);
+      updateOrCreateProperty("og:url", meta.ogUrl);
     }
     // Always set og:type to website
-    updateOrCreateProperty('og:type', 'website');
+    updateOrCreateProperty("og:type", "website");
 
     // Cleanup function to restore original values
     return () => {
       document.title = originalTitle;
       if (originalDescription) {
-        updateOrCreateMeta('description', originalDescription);
+        updateOrCreateMeta("description", originalDescription);
       }
-      
+
       // Restore or remove OpenGraph tags
       originalOgValues.forEach((originalValue, property) => {
         const element = document.querySelector(`meta[property="${property}"]`) as HTMLMetaElement;
@@ -98,4 +108,4 @@ export const useDocumentMeta = (meta: MetaOptions) => {
       });
     };
   }, [meta.title, meta.description, meta.ogTitle, meta.ogDescription, meta.ogImage, meta.ogUrl, i18n.language]);
-};
\ No newline at end of file
+};
diff --git a/frontend/src/core/hooks/useEndpointConfig.ts b/frontend/src/core/hooks/useEndpointConfig.ts
index 96b3f2f12c..3a7148c6e7 100644
--- a/frontend/src/core/hooks/useEndpointConfig.ts
+++ b/frontend/src/core/hooks/useEndpointConfig.ts
@@ -1,6 +1,6 @@
-import { useState, useEffect } from 'react';
-import apiClient from '@app/services/apiClient';
-import type { EndpointAvailabilityDetails } from '@app/types/endpointAvailability';
+import { useState, useEffect } from "react";
+import apiClient from "@app/services/apiClient";
+import type { EndpointAvailabilityDetails } from "@app/types/endpointAvailability";
 
 // Track whether we've done the global fetch to prevent duplicate requests
 let globalFetchDone = false;
@@ -30,13 +30,15 @@ export function useEndpointEnabled(endpoint: string): {
     try {
       setLoading(true);
       setError(null);
-      console.debug('[useEndpointConfig] Fetch endpoint status', { endpoint });
+      console.debug("[useEndpointConfig] Fetch endpoint status", { endpoint });
 
-      const response = await apiClient.get<boolean>(`/api/v1/config/endpoint-enabled?endpoint=${encodeURIComponent(endpoint)}`);
+      const response = await apiClient.get<boolean>(
+        `/api/v1/config/endpoint-enabled?endpoint=${encodeURIComponent(endpoint)}`,
+      );
       const isEnabled = response.data;
       setEnabled(isEnabled);
     } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
+      const errorMessage = err instanceof Error ? err.message : "Unknown error occurred";
       setError(errorMessage);
     } finally {
       setLoading(false);
@@ -74,7 +76,7 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
   const fetchAllEndpointStatuses = async (force = false) => {
     // Skip if already fetched globally and not forced
     if (!force && globalFetchDone) {
-      console.debug('[useEndpointConfig] Using global cache');
+      console.debug("[useEndpointConfig] Using global cache");
       const cached = endpoints.reduce(
         (acc, endpoint) => {
           const cachedDetails = globalEndpointCache[endpoint];
@@ -86,10 +88,10 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
           }
           return acc;
         },
-        { status: {} as Record<string, boolean>, details: {} as Record<string, EndpointAvailabilityDetails> }
+        { status: {} as Record<string, boolean>, details: {} as Record<string, EndpointAvailabilityDetails> },
       );
       setEndpointStatus(cached.status);
-      setEndpointDetails(prev => ({ ...prev, ...cached.details }));
+      setEndpointDetails((prev) => ({ ...prev, ...cached.details }));
       setLoading(false);
       return;
     }
@@ -104,10 +106,12 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
     try {
       setLoading(true);
       setError(null);
-      console.debug('[useEndpointConfig] Fetching all endpoint statuses from server');
+      console.debug("[useEndpointConfig] Fetching all endpoint statuses from server");
 
       // Fetch all endpoints at once - no query params needed
-      const response = await apiClient.get<Record<string, EndpointAvailabilityDetails>>(`/api/v1/config/endpoints-availability`);
+      const response = await apiClient.get<Record<string, EndpointAvailabilityDetails>>(
+        `/api/v1/config/endpoints-availability`,
+      );
 
       // Populate global cache with all results
       Object.entries(response.data).forEach(([endpoint, details]) => {
@@ -130,16 +134,16 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
           }
           return acc;
         },
-        { status: {} as Record<string, boolean>, details: {} as Record<string, EndpointAvailabilityDetails> }
+        { status: {} as Record<string, boolean>, details: {} as Record<string, EndpointAvailabilityDetails> },
       );
 
       setEndpointStatus(fullStatus.status);
-      setEndpointDetails(prev => ({ ...prev, ...fullStatus.details }));
+      setEndpointDetails((prev) => ({ ...prev, ...fullStatus.details }));
     } catch (err: any) {
       // On 401 (auth error), use optimistic fallback instead of disabling
       if (err.response?.status === 401) {
-        console.warn('[useEndpointConfig] 401 error - using optimistic fallback');
-        endpoints.forEach(endpoint => {
+        console.warn("[useEndpointConfig] 401 error - using optimistic fallback");
+        endpoints.forEach((endpoint) => {
           globalEndpointCache[endpoint] = { enabled: true, reason: null };
         });
         const optimisticStatus = endpoints.reduce(
@@ -148,17 +152,17 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
             acc.details[endpoint] = { enabled: true, reason: null };
             return acc;
           },
-          { status: {} as Record<string, boolean>, details: {} as Record<string, EndpointAvailabilityDetails> }
+          { status: {} as Record<string, boolean>, details: {} as Record<string, EndpointAvailabilityDetails> },
         );
         setEndpointStatus(optimisticStatus.status);
-        setEndpointDetails(prev => ({ ...prev, ...optimisticStatus.details }));
+        setEndpointDetails((prev) => ({ ...prev, ...optimisticStatus.details }));
         setLoading(false);
         return;
       }
 
-      const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
+      const errorMessage = err instanceof Error ? err.message : "Unknown error occurred";
       setError(errorMessage);
-      console.error('[EndpointConfig] Failed to check endpoints:', err);
+      console.error("[EndpointConfig] Failed to check endpoints:", err);
 
       // Fallback: assume all endpoints are enabled on error (optimistic)
       const optimisticStatus = endpoints.reduce(
@@ -167,10 +171,10 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
           acc.details[endpoint] = { enabled: true, reason: null };
           return acc;
         },
-        { status: {} as Record<string, boolean>, details: {} as Record<string, EndpointAvailabilityDetails> }
+        { status: {} as Record<string, boolean>, details: {} as Record<string, EndpointAvailabilityDetails> },
       );
       setEndpointStatus(optimisticStatus.status);
-      setEndpointDetails(prev => ({ ...prev, ...optimisticStatus.details }));
+      setEndpointDetails((prev) => ({ ...prev, ...optimisticStatus.details }));
     } finally {
       setLoading(false);
     }
@@ -178,20 +182,20 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
 
   useEffect(() => {
     fetchAllEndpointStatuses();
-  }, [endpoints.join(',')]); // Re-run when endpoints array changes
+  }, [endpoints.join(",")]); // Re-run when endpoints array changes
 
   // Listen for JWT availability (triggered on login/signup)
   useEffect(() => {
     const handleJwtAvailable = () => {
-      console.debug('[useEndpointConfig] JWT available event - clearing cache for refetch with auth');
+      console.debug("[useEndpointConfig] JWT available event - clearing cache for refetch with auth");
       globalFetchDone = false;
-      Object.keys(globalEndpointCache).forEach(key => delete globalEndpointCache[key]);
+      Object.keys(globalEndpointCache).forEach((key) => delete globalEndpointCache[key]);
       fetchAllEndpointStatuses(true);
     };
 
-    window.addEventListener('jwt-available', handleJwtAvailable);
-    return () => window.removeEventListener('jwt-available', handleJwtAvailable);
-  }, [endpoints.join(',')]);
+    window.addEventListener("jwt-available", handleJwtAvailable);
+    return () => window.removeEventListener("jwt-available", handleJwtAvailable);
+  }, [endpoints.join(",")]);
 
   return {
     endpointStatus,
diff --git a/frontend/src/core/hooks/useEnhancedProcessedFiles.ts b/frontend/src/core/hooks/useEnhancedProcessedFiles.ts
index 932428dd0d..8a4ad3c59e 100644
--- a/frontend/src/core/hooks/useEnhancedProcessedFiles.ts
+++ b/frontend/src/core/hooks/useEnhancedProcessedFiles.ts
@@ -1,7 +1,7 @@
-import { useState, useEffect, useRef } from 'react';
-import { ProcessedFile, ProcessingState, ProcessingConfig } from '@app/types/processing';
-import { enhancedPDFProcessingService } from '@app/services/enhancedPDFProcessingService';
-import { FileHasher } from '@app/utils/fileHash';
+import { useState, useEffect, useRef } from "react";
+import { ProcessedFile, ProcessingState, ProcessingConfig } from "@app/types/processing";
+import { enhancedPDFProcessingService } from "@app/services/enhancedPDFProcessingService";
+import { FileHasher } from "@app/utils/fileHash";
 
 interface UseEnhancedProcessedFilesResult {
   processedFiles: Map<File, ProcessedFile>;
@@ -34,7 +34,7 @@ interface UseEnhancedProcessedFilesResult {
 
 export function useEnhancedProcessedFiles(
   activeFiles: File[],
-  config?: Partial<ProcessingConfig>
+  config?: Partial<ProcessingConfig>,
 ): UseEnhancedProcessedFilesResult {
   const [processedFiles, setProcessedFiles] = useState<Map<File, ProcessedFile>>(new Map());
   const fileHashMapRef = useRef<Map<File, string>>(new Map()); // Use ref to avoid state update loops
@@ -48,10 +48,10 @@ export function useEnhancedProcessedFiles(
 
   // Process files when activeFiles changes
   useEffect(() => {
-    console.log('useEnhancedProcessedFiles: activeFiles changed', activeFiles.length, 'files');
+    console.log("useEnhancedProcessedFiles: activeFiles changed", activeFiles.length, "files");
 
     if (activeFiles.length === 0) {
-      console.log('useEnhancedProcessedFiles: No active files, clearing processed cache');
+      console.log("useEnhancedProcessedFiles: No active files, clearing processed cache");
       setProcessedFiles(new Map());
       // Clear any ongoing processing when no files
       enhancedPDFProcessingService.clearAllProcessing();
@@ -96,8 +96,9 @@ export function useEnhancedProcessedFiles(
       }
 
       // Only update if the content actually changed
-      const hasChanged = newProcessedFiles.size !== processedFiles.size ||
-        Array.from(newProcessedFiles.keys()).some(file => !processedFiles.has(file));
+      const hasChanged =
+        newProcessedFiles.size !== processedFiles.size ||
+        Array.from(newProcessedFiles.keys()).some((file) => !processedFiles.has(file));
 
       if (hasChanged) {
         setProcessedFiles(newProcessedFiles);
@@ -116,7 +117,7 @@ export function useEnhancedProcessedFiles(
       // Generate file keys for all files first
       const fileKeyPromises = activeFiles.map(async (file) => ({
         file,
-        key: await FileHasher.generateHybridHash(file)
+        key: await FileHasher.generateHybridHash(file),
       }));
 
       const fileKeyPairs = await Promise.all(fileKeyPromises);
@@ -128,7 +129,7 @@ export function useEnhancedProcessedFiles(
 
           // Check for both processing and recently completed files
           // This ensures we catch completed files before they're cleaned up
-          if (processingState?.status === 'processing' || processingState?.status === 'completed') {
+          if (processingState?.status === "processing" || processingState?.status === "completed") {
             try {
               const processed = await enhancedPDFProcessingService.processFile(file, config);
               if (processed) {
@@ -152,19 +153,18 @@ export function useEnhancedProcessedFiles(
     return () => clearInterval(interval);
   }, [activeFiles, processingStates]);
 
-
   // Cleanup when activeFiles changes
   useEffect(() => {
     const currentFiles = new Set(activeFiles);
     const previousFiles = Array.from(processedFiles.keys());
-    const removedFiles = previousFiles.filter(file => !currentFiles.has(file));
+    const removedFiles = previousFiles.filter((file) => !currentFiles.has(file));
 
     if (removedFiles.length > 0) {
       // Clean up processing service cache
       enhancedPDFProcessingService.cleanup(removedFiles);
 
       // Update local state
-      setProcessedFiles(prev => {
+      setProcessedFiles((prev) => {
         const updated = new Map();
         for (const [file, processed] of prev) {
           if (currentFiles.has(file)) {
@@ -178,7 +178,7 @@ export function useEnhancedProcessedFiles(
 
   // Calculate derived state
   const isProcessing = processingStates.size > 0;
-  const hasProcessingErrors = Array.from(processingStates.values()).some(state => state.status === 'error');
+  const hasProcessingErrors = Array.from(processingStates.values()).some((state) => state.status === "error");
 
   // Calculate overall progress
   const processingProgress = calculateProcessingProgress(processingStates);
@@ -203,7 +203,7 @@ export function useEnhancedProcessedFiles(
 
     clearCache: () => {
       enhancedPDFProcessingService.clearAll();
-    }
+    },
   };
 
   // Cleanup on unmount
@@ -221,7 +221,7 @@ export function useEnhancedProcessedFiles(
     processingProgress,
     cacheStats,
     metrics,
-    actions
+    actions,
   };
 }
 
@@ -237,7 +237,7 @@ function calculateProcessingProgress(states: Map<string, ProcessingState>): {
     return {
       overall: 100,
       fileProgress: new Map(),
-      estimatedTimeRemaining: 0
+      estimatedTimeRemaining: 0,
     };
   }
 
@@ -257,7 +257,7 @@ function calculateProcessingProgress(states: Map<string, ProcessingState>): {
   return {
     overall,
     fileProgress,
-    estimatedTimeRemaining
+    estimatedTimeRemaining,
   };
 }
 
@@ -266,7 +266,7 @@ function calculateProcessingProgress(states: Map<string, ProcessingState>): {
  */
 export function useEnhancedProcessedFile(
   file: File | null,
-  config?: Partial<ProcessingConfig>
+  config?: Partial<ProcessingConfig>,
 ): {
   processedFile: ProcessedFile | null;
   isProcessing: boolean;
@@ -282,7 +282,7 @@ export function useEnhancedProcessedFile(
 
   const processedFile = file ? result.processedFiles.get(file) || null : null;
   // Note: This is async but we can't await in hook return - consider refactoring if needed
-  const fileKey = file ? '' : '';
+  const fileKey = file ? "" : "";
   const processingState = fileKey ? result.processingStates.get(fileKey) || null : null;
   const isProcessing = !!processingState;
   const error = processingState?.error?.message || null;
@@ -298,7 +298,7 @@ export function useEnhancedProcessedFile(
       if (file) {
         result.actions.retryProcessing(file);
       }
-    }
+    },
   };
 
   return {
@@ -307,6 +307,6 @@ export function useEnhancedProcessedFile(
     processingState,
     error,
     canRetry,
-    actions
+    actions,
   };
 }
diff --git a/frontend/src/core/hooks/useFileActionIcons.ts b/frontend/src/core/hooks/useFileActionIcons.ts
index ef58b68b7d..f48cb79b47 100644
--- a/frontend/src/core/hooks/useFileActionIcons.ts
+++ b/frontend/src/core/hooks/useFileActionIcons.ts
@@ -1,5 +1,5 @@
-import UploadIcon from '@mui/icons-material/Upload';
-import DownloadOutlinedIcon from '@mui/icons-material/DownloadOutlined';
+import UploadIcon from "@mui/icons-material/Upload";
+import DownloadOutlinedIcon from "@mui/icons-material/DownloadOutlined";
 
 /**
  * File action icons for web builds.
@@ -10,8 +10,8 @@ export function useFileActionIcons() {
   return {
     upload: UploadIcon,
     download: DownloadOutlinedIcon,
-    uploadIconName: 'upload' as const,
-    downloadIconName: 'download' as const,
+    uploadIconName: "upload" as const,
+    downloadIconName: "download" as const,
     // Web builds do not expose a Save As icon — the button is hidden when this is undefined.
     // Desktop builds override this file and return a real icon name.
     saveAsIconName: undefined as string | undefined,
diff --git a/frontend/src/core/hooks/useFileActionTerminology.ts b/frontend/src/core/hooks/useFileActionTerminology.ts
index 6d5434343e..5b451f79b7 100644
--- a/frontend/src/core/hooks/useFileActionTerminology.ts
+++ b/frontend/src/core/hooks/useFileActionTerminology.ts
@@ -1,4 +1,4 @@
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
 
 /**
  * File action terminology for web builds
@@ -8,17 +8,17 @@ export function useFileActionTerminology() {
   const { t } = useTranslation();
 
   return {
-    uploadFiles: t('fileUpload.uploadFiles', 'Upload Files'),
-    uploadFile: t('fileUpload.uploadFile', 'Upload File'),
-    upload: t('fileUpload.upload', 'Upload'),
-    dropFilesHere: t('fileUpload.dropFilesHere', 'Drop files here or click the upload button'),
-    addFiles: t('landing.addFiles', 'Add Files'),
-    mobileUpload: t('landing.mobileUpload', 'Upload from Mobile'),
-    uploadFromComputer: t('landing.uploadFromComputer', 'Upload from computer'),
-    download: t('download', 'Download'),
-    downloadAll: t('rightRail.downloadAll', 'Download All'),
-    downloadSelected: t('fileManager.downloadSelected', 'Download Selected'),
-    downloadUnavailable: t('downloadUnavailable', 'Download unavailable for this item'),
-    noFilesInStorage: t('fileUpload.noFilesInStorage', 'No files available in storage. Upload some files first.'),
+    uploadFiles: t("fileUpload.uploadFiles", "Upload Files"),
+    uploadFile: t("fileUpload.uploadFile", "Upload File"),
+    upload: t("fileUpload.upload", "Upload"),
+    dropFilesHere: t("fileUpload.dropFilesHere", "Drop files here or click the upload button"),
+    addFiles: t("landing.addFiles", "Add Files"),
+    mobileUpload: t("landing.mobileUpload", "Upload from Mobile"),
+    uploadFromComputer: t("landing.uploadFromComputer", "Upload from computer"),
+    download: t("download", "Download"),
+    downloadAll: t("rightRail.downloadAll", "Download All"),
+    downloadSelected: t("fileManager.downloadSelected", "Download Selected"),
+    downloadUnavailable: t("downloadUnavailable", "Download unavailable for this item"),
+    noFilesInStorage: t("fileUpload.noFilesInStorage", "No files available in storage. Upload some files first."),
   };
 }
diff --git a/frontend/src/core/hooks/useFileHandler.ts b/frontend/src/core/hooks/useFileHandler.ts
index fc935b0298..09190db37a 100644
--- a/frontend/src/core/hooks/useFileHandler.ts
+++ b/frontend/src/core/hooks/useFileHandler.ts
@@ -1,17 +1,20 @@
-import { useCallback } from 'react';
-import { useFileActions } from '@app/contexts/FileContext';
-import type { StirlingFile } from '@app/types/fileContext';
+import { useCallback } from "react";
+import { useFileActions } from "@app/contexts/FileContext";
+import type { StirlingFile } from "@app/types/fileContext";
 
 export const useFileHandler = () => {
   const { actions } = useFileActions();
 
-  const addFiles = useCallback(async (files: File[], options: { insertAfterPageId?: string; selectFiles?: boolean } = {}): Promise<StirlingFile[]> => {
-    // Merge default options with passed options - passed options take precedence
-    const mergedOptions = { selectFiles: true, ...options };
-    // Let FileContext handle deduplication with quickKey logic
-    const result = await actions.addFiles(files, mergedOptions);
-    return result;
-  }, [actions.addFiles]);
+  const addFiles = useCallback(
+    async (files: File[], options: { insertAfterPageId?: string; selectFiles?: boolean } = {}): Promise<StirlingFile[]> => {
+      // Merge default options with passed options - passed options take precedence
+      const mergedOptions = { selectFiles: true, ...options };
+      // Let FileContext handle deduplication with quickKey logic
+      const result = await actions.addFiles(files, mergedOptions);
+      return result;
+    },
+    [actions.addFiles],
+  );
 
   return {
     addFiles,
diff --git a/frontend/src/core/hooks/useFileManager.ts b/frontend/src/core/hooks/useFileManager.ts
index 073451f74e..4499370fe9 100644
--- a/frontend/src/core/hooks/useFileManager.ts
+++ b/frontend/src/core/hooks/useFileManager.ts
@@ -1,10 +1,10 @@
-import { useState, useCallback } from 'react';
-import { useIndexedDB } from '@app/contexts/IndexedDBContext';
-import { fileStorage } from '@app/services/fileStorage';
-import { StirlingFileStub, StirlingFile } from '@app/types/fileContext';
-import { FileId } from '@app/types/fileContext';
-import apiClient from '@app/services/apiClient';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
+import { useState, useCallback } from "react";
+import { useIndexedDB } from "@app/contexts/IndexedDBContext";
+import { fileStorage } from "@app/services/fileStorage";
+import { StirlingFileStub, StirlingFile } from "@app/types/fileContext";
+import { FileId } from "@app/types/fileContext";
+import apiClient from "@app/services/apiClient";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
 
 interface StoredFileResponse {
   id: number;
@@ -37,31 +37,31 @@ export const useFileManager = () => {
   const { config } = useAppConfig();
 
   const normalizeServerFileName = useCallback((fileName: string | undefined | null): string => {
-    const fallback = fileName?.trim() || 'server-file';
+    const fallback = fileName?.trim() || "server-file";
     const lowerName = fallback.toLowerCase();
-    const historySuffix = '-history.zip';
+    const historySuffix = "-history.zip";
     if (lowerName.endsWith(historySuffix)) {
       return fallback.slice(0, fallback.length - historySuffix.length) || fallback;
     }
-    if (lowerName.endsWith('.zip')) {
+    if (lowerName.endsWith(".zip")) {
       const knownInnerExt = [
-        'pdf',
-        'doc',
-        'docx',
-        'ppt',
-        'pptx',
-        'xls',
-        'xlsx',
-        'png',
-        'jpg',
-        'jpeg',
-        'tif',
-        'tiff',
-        'txt',
-        'csv',
-        'rtf',
-        'html',
-        'epub',
+        "pdf",
+        "doc",
+        "docx",
+        "ppt",
+        "pptx",
+        "xls",
+        "xlsx",
+        "png",
+        "jpg",
+        "jpeg",
+        "tif",
+        "tiff",
+        "txt",
+        "csv",
+        "rtf",
+        "html",
+        "epub",
       ];
       for (const ext of knownInnerExt) {
         if (lowerName.endsWith(`.${ext}.zip`)) {
@@ -72,20 +72,23 @@ export const useFileManager = () => {
     return fallback;
   }, []);
 
-  const convertToFile = useCallback(async (fileStub: StirlingFileStub): Promise<File> => {
-    if (!indexedDB) {
-      throw new Error('IndexedDB context not available');
-    }
-
-    // Regular file loading
-    if (fileStub.id) {
-      const file = await indexedDB.loadFile(fileStub.id);
-      if (file) {
-        return file;
+  const convertToFile = useCallback(
+    async (fileStub: StirlingFileStub): Promise<File> => {
+      if (!indexedDB) {
+        throw new Error("IndexedDB context not available");
       }
-    }
-    throw new Error(`File not found in storage: ${fileStub.name} (ID: ${fileStub.id})`);
-  }, [indexedDB]);
+
+      // Regular file loading
+      if (fileStub.id) {
+        const file = await indexedDB.loadFile(fileStub.id);
+        if (file) {
+          return file;
+        }
+      }
+      throw new Error(`File not found in storage: ${fileStub.name} (ID: ${fileStub.id})`);
+    },
+    [indexedDB],
+  );
 
   const loadRecentFiles = useCallback(async (): Promise<StirlingFileStub[]> => {
     setLoading(true);
@@ -97,9 +100,7 @@ export const useFileManager = () => {
       // Load only leaf files metadata (processed files that haven't been used as input for other tools)
       const stirlingFileStubs = await fileStorage.getLeafStirlingFileStubs();
       const remoteIdSet = new Set(
-        stirlingFileStubs
-          .map((stub) => stub.remoteStorageId)
-          .filter((id): id is number => typeof id === 'number')
+        stirlingFileStubs.map((stub) => stub.remoteStorageId).filter((id): id is number => typeof id === "number"),
       );
       let combinedStubs = stirlingFileStubs;
 
@@ -107,15 +108,15 @@ export const useFileManager = () => {
 
       if (shouldFetchServerFiles) {
         try {
-          const response = await apiClient.get<StoredFileResponse[]>(
-            '/api/v1/storage/files',
-            { suppressErrorToast: true, skipAuthRedirect: true } as any
-          );
+          const response = await apiClient.get<StoredFileResponse[]>("/api/v1/storage/files", {
+            suppressErrorToast: true,
+            skipAuthRedirect: true,
+          } as any);
           const serverFiles = Array.isArray(response.data) ? response.data : [];
           const serverStubs: StirlingFileStub[] = [];
           const serverMap = new Map<number, StoredFileResponse>();
           serverFiles.forEach((file) => {
-            if (file && typeof file.id === 'number') {
+            if (file && typeof file.id === "number") {
               serverMap.set(file.id, file);
             }
           });
@@ -144,7 +145,7 @@ export const useFileManager = () => {
               };
             }
             // If this server file is a signing-workflow file, detach it from the file manager
-            if (serverFile.filePurpose && serverFile.filePurpose !== 'generic') {
+            if (serverFile.filePurpose && serverFile.filePurpose !== "generic") {
               return {
                 ...stub,
                 remoteStorageId: undefined,
@@ -159,48 +160,46 @@ export const useFileManager = () => {
             const updatedAtMs = serverFile.updatedAt
               ? new Date(serverFile.updatedAt).getTime()
               : serverFile.createdAt
-              ? new Date(serverFile.createdAt).getTime()
-              : undefined;
+                ? new Date(serverFile.createdAt).getTime()
+                : undefined;
             return {
               ...stub,
               remoteOwnerUsername: serverFile.owner ?? stub.remoteOwnerUsername,
               remoteOwnedByCurrentUser:
-                typeof serverFile.ownedByCurrentUser === 'boolean'
+                typeof serverFile.ownedByCurrentUser === "boolean"
                   ? serverFile.ownedByCurrentUser
                   : stub.remoteOwnedByCurrentUser,
               remoteAccessRole: serverFile.accessRole ?? stub.remoteAccessRole,
               remoteSharedViaLink: stub.remoteSharedViaLink,
               remoteHasShareLinks: Boolean(serverFile.shareLinks?.length),
               remoteStorageUpdatedAt:
-                typeof updatedAtMs === 'number' && Number.isFinite(updatedAtMs)
-                  ? updatedAtMs
-                  : stub.remoteStorageUpdatedAt,
+                typeof updatedAtMs === "number" && Number.isFinite(updatedAtMs) ? updatedAtMs : stub.remoteStorageUpdatedAt,
             };
           });
 
           for (const file of serverFiles) {
-            if (!file || typeof file.id !== 'number') {
+            if (!file || typeof file.id !== "number") {
               continue;
             }
             if (remoteIdSet.has(file.id)) {
               continue;
             }
             // Skip signing-workflow files — only accessible via SignPopout
-            if (file.filePurpose && file.filePurpose !== 'generic') {
+            if (file.filePurpose && file.filePurpose !== "generic") {
               continue;
             }
             const updatedAtMs = file.updatedAt
               ? new Date(file.updatedAt).getTime()
               : file.createdAt
-              ? new Date(file.createdAt).getTime()
-              : Date.now();
+                ? new Date(file.createdAt).getTime()
+                : Date.now();
             const name = normalizeServerFileName(file.fileName);
             const lastModified = Number.isFinite(updatedAtMs) ? updatedAtMs : Date.now();
             const id = `server-${file.id}` as FileId;
             serverStubs.push({
               id,
               name,
-              type: file.contentType || 'application/octet-stream',
+              type: file.contentType || "application/octet-stream",
               size: file.sizeBytes ?? 0,
               lastModified,
               createdAt: lastModified,
@@ -212,10 +211,7 @@ export const useFileManager = () => {
               remoteStorageId: file.id,
               remoteStorageUpdatedAt: lastModified,
               remoteOwnerUsername: file.owner ?? undefined,
-              remoteOwnedByCurrentUser:
-                typeof file.ownedByCurrentUser === 'boolean'
-                  ? file.ownedByCurrentUser
-                  : undefined,
+              remoteOwnedByCurrentUser: typeof file.ownedByCurrentUser === "boolean" ? file.ownedByCurrentUser : undefined,
               remoteAccessRole: file.accessRole ?? undefined,
               remoteSharedViaLink: false,
               remoteHasShareLinks: Boolean(file.shareLinks?.length),
@@ -224,40 +220,24 @@ export const useFileManager = () => {
 
           combinedStubs = [...updatedLocalStubs, ...serverStubs];
         } catch (error) {
-          console.warn('Failed to load server files:', error);
+          console.warn("Failed to load server files:", error);
         }
 
         if (config?.storageShareLinksEnabled === true) {
           try {
-          const sharedResponse = await apiClient.get<AccessedShareLinkResponse[]>(
-            '/api/v1/storage/share-links/accessed',
-            { suppressErrorToast: true, skipAuthRedirect: true } as any
-          );
-          const sharedLinks = Array.isArray(sharedResponse.data) ? sharedResponse.data : [];
-          const allowedShareTokens = new Set(
-            sharedLinks
-              .map((link) => link.shareToken)
-              .filter((token): token is string => Boolean(token))
-          );
-          const shareClearUpdates: Array<Promise<boolean>> = [];
-          combinedStubs = combinedStubs.map((stub) => {
-            if (
-              stub.remoteSharedViaLink &&
-              stub.remoteShareToken &&
-              !allowedShareTokens.has(stub.remoteShareToken)
-            ) {
-              const cleared = {
-                ...stub,
-                remoteStorageId: undefined,
-                remoteStorageUpdatedAt: undefined,
-                remoteOwnerUsername: undefined,
-                remoteOwnedByCurrentUser: undefined,
-                remoteSharedViaLink: false,
-                remoteHasShareLinks: undefined,
-                remoteShareToken: undefined,
-              };
-              shareClearUpdates.push(
-                fileStorage.updateFileMetadata(stub.id, {
+            const sharedResponse = await apiClient.get<AccessedShareLinkResponse[]>("/api/v1/storage/share-links/accessed", {
+              suppressErrorToast: true,
+              skipAuthRedirect: true,
+            } as any);
+            const sharedLinks = Array.isArray(sharedResponse.data) ? sharedResponse.data : [];
+            const allowedShareTokens = new Set(
+              sharedLinks.map((link) => link.shareToken).filter((token): token is string => Boolean(token)),
+            );
+            const shareClearUpdates: Array<Promise<boolean>> = [];
+            combinedStubs = combinedStubs.map((stub) => {
+              if (stub.remoteSharedViaLink && stub.remoteShareToken && !allowedShareTokens.has(stub.remoteShareToken)) {
+                const cleared = {
+                  ...stub,
                   remoteStorageId: undefined,
                   remoteStorageUpdatedAt: undefined,
                   remoteOwnerUsername: undefined,
@@ -265,62 +245,70 @@ export const useFileManager = () => {
                   remoteSharedViaLink: false,
                   remoteHasShareLinks: undefined,
                   remoteShareToken: undefined,
-                })
-              );
-              return cleared;
-            }
-            return stub;
-          });
-          if (shareClearUpdates.length > 0) {
-            await Promise.all(shareClearUpdates);
-          }
-          const existingShareTokens = new Set(
-            combinedStubs
-              .map((stub) => stub.remoteShareToken)
-              .filter((token): token is string => Boolean(token))
-          );
-          const sharedStubs: StirlingFileStub[] = [];
-
-          for (const link of sharedLinks) {
-            if (!link || !link.shareToken) {
-              continue;
-            }
-            if (existingShareTokens.has(link.shareToken)) {
-              continue;
-            }
-            const createdAtMs = link.lastAccessedAt
-              ? new Date(link.lastAccessedAt).getTime()
-              : link.createdAt
-              ? new Date(link.createdAt).getTime()
-              : Date.now();
-            const lastModified = Number.isFinite(createdAtMs) ? createdAtMs : Date.now();
-            const name = normalizeServerFileName(link.fileName || 'shared-file');
-            const id = `shared-${link.shareToken}` as FileId;
-            sharedStubs.push({
-              id,
-              name,
-              type: 'application/octet-stream',
-              size: 0,
-              lastModified,
-              createdAt: lastModified,
-              isLeaf: true,
-              originalFileId: id,
-              versionNumber: 1,
-              toolHistory: [],
-              quickKey: `${name}|0|${lastModified}`,
-              remoteStorageId: link.fileId ?? undefined,
-              remoteStorageUpdatedAt: lastModified,
-              remoteOwnerUsername: link.owner ?? undefined,
-              remoteOwnedByCurrentUser: false,
-              remoteSharedViaLink: true,
-              remoteHasShareLinks: false,
-              remoteShareToken: link.shareToken,
+                };
+                shareClearUpdates.push(
+                  fileStorage.updateFileMetadata(stub.id, {
+                    remoteStorageId: undefined,
+                    remoteStorageUpdatedAt: undefined,
+                    remoteOwnerUsername: undefined,
+                    remoteOwnedByCurrentUser: undefined,
+                    remoteSharedViaLink: false,
+                    remoteHasShareLinks: undefined,
+                    remoteShareToken: undefined,
+                  }),
+                );
+                return cleared;
+              }
+              return stub;
             });
-          }
+            if (shareClearUpdates.length > 0) {
+              await Promise.all(shareClearUpdates);
+            }
+            const existingShareTokens = new Set(
+              combinedStubs.map((stub) => stub.remoteShareToken).filter((token): token is string => Boolean(token)),
+            );
+            const sharedStubs: StirlingFileStub[] = [];
 
-          combinedStubs = [...combinedStubs, ...sharedStubs];
+            for (const link of sharedLinks) {
+              if (!link || !link.shareToken) {
+                continue;
+              }
+              if (existingShareTokens.has(link.shareToken)) {
+                continue;
+              }
+              const createdAtMs = link.lastAccessedAt
+                ? new Date(link.lastAccessedAt).getTime()
+                : link.createdAt
+                  ? new Date(link.createdAt).getTime()
+                  : Date.now();
+              const lastModified = Number.isFinite(createdAtMs) ? createdAtMs : Date.now();
+              const name = normalizeServerFileName(link.fileName || "shared-file");
+              const id = `shared-${link.shareToken}` as FileId;
+              sharedStubs.push({
+                id,
+                name,
+                type: "application/octet-stream",
+                size: 0,
+                lastModified,
+                createdAt: lastModified,
+                isLeaf: true,
+                originalFileId: id,
+                versionNumber: 1,
+                toolHistory: [],
+                quickKey: `${name}|0|${lastModified}`,
+                remoteStorageId: link.fileId ?? undefined,
+                remoteStorageUpdatedAt: lastModified,
+                remoteOwnerUsername: link.owner ?? undefined,
+                remoteOwnedByCurrentUser: false,
+                remoteSharedViaLink: true,
+                remoteHasShareLinks: false,
+                remoteShareToken: link.shareToken,
+              });
+            }
+
+            combinedStubs = [...combinedStubs, ...sharedStubs];
           } catch (error) {
-            console.warn('Failed to load shared links:', error);
+            console.warn("Failed to load shared links:", error);
           }
         }
       }
@@ -330,118 +318,128 @@ export const useFileManager = () => {
 
       return sortedFiles;
     } catch (error) {
-      console.error('Failed to load recent files:', error);
+      console.error("Failed to load recent files:", error);
       return [];
     } finally {
       setLoading(false);
     }
   }, [indexedDB, config?.enableLogin, config?.storageEnabled, config?.storageShareLinksEnabled, normalizeServerFileName]);
 
-  const handleRemoveFile = useCallback(async (index: number, files: StirlingFileStub[], setFiles: (files: StirlingFileStub[]) => void) => {
-    const file = files[index];
-    if (!file.id) {
-      throw new Error('File ID is required for removal');
-    }
-    if (!indexedDB) {
-      throw new Error('IndexedDB context not available');
-    }
-    try {
-      await indexedDB.deleteFile(file.id);
-      setFiles(files.filter((_, i) => i !== index));
-    } catch (error) {
-      console.error('Failed to remove file:', error);
-      throw error;
-    }
-  }, [indexedDB]);
-
-  const storeFile = useCallback(async (file: File, fileId: FileId) => {
-    if (!indexedDB) {
-      throw new Error('IndexedDB context not available');
-    }
-    try {
-      // Store file with provided UUID from FileContext (thumbnail generated internally)
-      const metadata = await indexedDB.saveFile(file, fileId);
-
-      // Convert file to ArrayBuffer for storage compatibility
-      const arrayBuffer = await file.arrayBuffer();
-
-      // This method is deprecated - use FileStorage directly instead
-      return {
-        id: fileId,
-        name: file.name,
-        type: file.type,
-        size: file.size,
-        lastModified: file.lastModified,
-        data: arrayBuffer,
-        thumbnail: metadata.thumbnailUrl
-      };
-    } catch (error) {
-      console.error('Failed to store file:', error);
-      throw error;
-    }
-  }, [indexedDB]);
-
-  const createFileSelectionHandlers = useCallback((
-    selectedFiles: FileId[],
-    setSelectedFiles: (files: FileId[]) => void
-  ) => {
-    const toggleSelection = (fileId: FileId) => {
-      setSelectedFiles(
-        selectedFiles.includes(fileId)
-          ? selectedFiles.filter(id => id !== fileId)
-          : [...selectedFiles, fileId]
-      );
-    };
-
-    const clearSelection = () => {
-      setSelectedFiles([]);
-    };
-
-    const selectMultipleFiles = async (files: StirlingFileStub[], onStirlingFilesSelect: (stirlingFiles: StirlingFile[]) => void) => {
-      if (selectedFiles.length === 0) return;
-
+  const handleRemoveFile = useCallback(
+    async (index: number, files: StirlingFileStub[], setFiles: (files: StirlingFileStub[]) => void) => {
+      const file = files[index];
+      if (!file.id) {
+        throw new Error("File ID is required for removal");
+      }
+      if (!indexedDB) {
+        throw new Error("IndexedDB context not available");
+      }
       try {
-        // Filter by UUID and load full StirlingFile objects directly
-        const selectedFileObjects = files.filter(f => selectedFiles.includes(f.id));
-
-        const stirlingFiles = await Promise.all(
-          selectedFileObjects.map(async (stub) => {
-            const stirlingFile = await fileStorage.getStirlingFile(stub.id);
-            if (!stirlingFile) {
-              throw new Error(`File not found in storage: ${stub.name}`);
-            }
-            return stirlingFile;
-          })
-        );
-
-        onStirlingFilesSelect(stirlingFiles);
-        clearSelection();
+        await indexedDB.deleteFile(file.id);
+        setFiles(files.filter((_, i) => i !== index));
       } catch (error) {
-        console.error('Failed to load selected files:', error);
+        console.error("Failed to remove file:", error);
         throw error;
       }
-    };
+    },
+    [indexedDB],
+  );
 
-    return {
-      toggleSelection,
-      clearSelection,
-      selectMultipleFiles
-    };
-  }, [convertToFile]);
+  const storeFile = useCallback(
+    async (file: File, fileId: FileId) => {
+      if (!indexedDB) {
+        throw new Error("IndexedDB context not available");
+      }
+      try {
+        // Store file with provided UUID from FileContext (thumbnail generated internally)
+        const metadata = await indexedDB.saveFile(file, fileId);
 
-  const touchFile = useCallback(async (id: FileId) => {
-    if (!indexedDB) {
-      console.warn('IndexedDB context not available for touch operation');
-      return;
-    }
-    try {
-      // Update access time - this will be handled by the cache in IndexedDBContext
-      // when the file is loaded, so we can just load it briefly to "touch" it
-      await indexedDB.loadFile(id);
-    } catch (error) {
-      console.error('Failed to touch file:', error);
-    }
-  }, [indexedDB]);
+        // Convert file to ArrayBuffer for storage compatibility
+        const arrayBuffer = await file.arrayBuffer();
+
+        // This method is deprecated - use FileStorage directly instead
+        return {
+          id: fileId,
+          name: file.name,
+          type: file.type,
+          size: file.size,
+          lastModified: file.lastModified,
+          data: arrayBuffer,
+          thumbnail: metadata.thumbnailUrl,
+        };
+      } catch (error) {
+        console.error("Failed to store file:", error);
+        throw error;
+      }
+    },
+    [indexedDB],
+  );
+
+  const createFileSelectionHandlers = useCallback(
+    (selectedFiles: FileId[], setSelectedFiles: (files: FileId[]) => void) => {
+      const toggleSelection = (fileId: FileId) => {
+        setSelectedFiles(
+          selectedFiles.includes(fileId) ? selectedFiles.filter((id) => id !== fileId) : [...selectedFiles, fileId],
+        );
+      };
+
+      const clearSelection = () => {
+        setSelectedFiles([]);
+      };
+
+      const selectMultipleFiles = async (
+        files: StirlingFileStub[],
+        onStirlingFilesSelect: (stirlingFiles: StirlingFile[]) => void,
+      ) => {
+        if (selectedFiles.length === 0) return;
+
+        try {
+          // Filter by UUID and load full StirlingFile objects directly
+          const selectedFileObjects = files.filter((f) => selectedFiles.includes(f.id));
+
+          const stirlingFiles = await Promise.all(
+            selectedFileObjects.map(async (stub) => {
+              const stirlingFile = await fileStorage.getStirlingFile(stub.id);
+              if (!stirlingFile) {
+                throw new Error(`File not found in storage: ${stub.name}`);
+              }
+              return stirlingFile;
+            }),
+          );
+
+          onStirlingFilesSelect(stirlingFiles);
+          clearSelection();
+        } catch (error) {
+          console.error("Failed to load selected files:", error);
+          throw error;
+        }
+      };
+
+      return {
+        toggleSelection,
+        clearSelection,
+        selectMultipleFiles,
+      };
+    },
+    [convertToFile],
+  );
+
+  const touchFile = useCallback(
+    async (id: FileId) => {
+      if (!indexedDB) {
+        console.warn("IndexedDB context not available for touch operation");
+        return;
+      }
+      try {
+        // Update access time - this will be handled by the cache in IndexedDBContext
+        // when the file is loaded, so we can just load it briefly to "touch" it
+        await indexedDB.loadFile(id);
+      } catch (error) {
+        console.error("Failed to touch file:", error);
+      }
+    },
+    [indexedDB],
+  );
 
   return {
     loading,
@@ -450,6 +448,6 @@ export const useFileManager = () => {
     handleRemoveFile,
     storeFile,
     touchFile,
-    createFileSelectionHandlers
+    createFileSelectionHandlers,
   };
 };
diff --git a/frontend/src/core/hooks/useFileWithUrl.ts b/frontend/src/core/hooks/useFileWithUrl.ts
index 6c331e6964..e84a38d8b4 100644
--- a/frontend/src/core/hooks/useFileWithUrl.ts
+++ b/frontend/src/core/hooks/useFileWithUrl.ts
@@ -1,5 +1,5 @@
-import { useMemo, useEffect } from 'react';
-import { isFileObject } from '@app/types/fileContext';
+import { useMemo, useEffect } from "react";
+import { isFileObject } from "@app/types/fileContext";
 
 /**
  * Hook to convert a File object to { file: File; url: string } format
@@ -11,7 +11,7 @@ export function useFileWithUrl(file: File | Blob | null): { file: File | Blob; u
 
     // Validate that file is a proper File, StirlingFile, or Blob object
     if (!isFileObject(file) && !(file instanceof Blob)) {
-      console.warn('useFileWithUrl: Expected File or Blob, got:', file);
+      console.warn("useFileWithUrl: Expected File or Blob, got:", file);
       return null;
     }
 
@@ -19,7 +19,7 @@ export function useFileWithUrl(file: File | Blob | null): { file: File | Blob; u
       const url = URL.createObjectURL(file);
       return { file, url };
     } catch (error) {
-      console.error('useFileWithUrl: Failed to create object URL:', error, file);
+      console.error("useFileWithUrl: Failed to create object URL:", error, file);
       return null;
     }
   }, [file]);
diff --git a/frontend/src/core/hooks/useFocusTrap.ts b/frontend/src/core/hooks/useFocusTrap.ts
index 0fa783bdb4..fc2d95992b 100644
--- a/frontend/src/core/hooks/useFocusTrap.ts
+++ b/frontend/src/core/hooks/useFocusTrap.ts
@@ -1,13 +1,13 @@
-import { useEffect, RefObject } from 'react';
+import { useEffect, RefObject } from "react";
 
 const FOCUSABLE_ELEMENTS = [
-  'a[href]',
-  'button:not([disabled])',
-  'input:not([disabled])',
-  'select:not([disabled])',
-  'textarea:not([disabled])',
+  "a[href]",
+  "button:not([disabled])",
+  "input:not([disabled])",
+  "select:not([disabled])",
+  "textarea:not([disabled])",
   '[tabindex]:not([tabindex="-1"])',
-].join(', ');
+].join(", ");
 
 export function useFocusTrap(containerRef: RefObject<HTMLElement | null>, enabled: boolean = true) {
   useEffect(() => {
@@ -16,11 +16,10 @@ export function useFocusTrap(containerRef: RefObject<HTMLElement | null>, enable
     }
 
     const container = containerRef.current;
-    const getFocusableElements = () =>
-      Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS));
+    const getFocusableElements = () => Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS));
 
     const handleKeyDown = (event: KeyboardEvent) => {
-      if (event.key !== 'Tab') {
+      if (event.key !== "Tab") {
         return;
       }
 
@@ -65,12 +64,10 @@ export function useFocusTrap(containerRef: RefObject<HTMLElement | null>, enable
       }, 100);
     }
 
-    document.addEventListener('keydown', handleKeyDown);
+    document.addEventListener("keydown", handleKeyDown);
 
     return () => {
-      document.removeEventListener('keydown', handleKeyDown);
+      document.removeEventListener("keydown", handleKeyDown);
     };
   }, [containerRef, enabled]);
 }
-
-
diff --git a/frontend/src/core/hooks/useFooterInfo.ts b/frontend/src/core/hooks/useFooterInfo.ts
index 315c1bc043..d25acca028 100644
--- a/frontend/src/core/hooks/useFooterInfo.ts
+++ b/frontend/src/core/hooks/useFooterInfo.ts
@@ -1,5 +1,5 @@
-import { useState, useEffect } from 'react';
-import apiClient from '@app/services/apiClient';
+import { useState, useEffect } from "react";
+import apiClient from "@app/services/apiClient";
 
 export interface FooterInfo {
   analyticsEnabled?: boolean;
@@ -23,13 +23,13 @@ export function useFooterInfo() {
     const fetchFooterInfo = async () => {
       try {
         setLoading(true);
-        const response = await apiClient.get<FooterInfo>('/api/v1/ui-data/footer-info', {
+        const response = await apiClient.get<FooterInfo>("/api/v1/ui-data/footer-info", {
           suppressErrorToast: true,
         } as any);
         setFooterInfo(response.data);
         setError(null);
       } catch (err) {
-        console.error('[useFooterInfo] Failed to fetch footer info:', err);
+        console.error("[useFooterInfo] Failed to fetch footer info:", err);
         setError(err as Error);
         // Set defaults on error
         setFooterInfo({
diff --git a/frontend/src/core/hooks/useGoogleDrivePicker.ts b/frontend/src/core/hooks/useGoogleDrivePicker.ts
index 1e9e0b4882..bb9aa1c645 100644
--- a/frontend/src/core/hooks/useGoogleDrivePicker.ts
+++ b/frontend/src/core/hooks/useGoogleDrivePicker.ts
@@ -2,14 +2,14 @@
  * React hook for Google Drive file picker
  */
 
-import { useState, useCallback, useEffect, useMemo } from 'react';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
+import { useState, useCallback, useEffect, useMemo } from "react";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
 import {
   getGoogleDrivePickerService,
   isGoogleDriveConfigured,
   getGoogleDriveConfig,
   extractGoogleDriveBackendConfig,
-} from '@app/services/googleDrivePickerService';
+} from "@app/services/googleDrivePickerService";
 
 interface UseGoogleDrivePickerOptions {
   multiple?: boolean;
@@ -36,7 +36,7 @@ export function useGoogleDrivePicker(): UseGoogleDrivePickerReturn {
   // Memoize backend config to only track Google Drive specific properties
   const googleDriveBackendConfig = useMemo(
     () => extractGoogleDriveBackendConfig(config),
-    [config?.googleDriveEnabled, config?.googleDriveClientId, config?.googleDriveApiKey, config?.googleDriveAppId]
+    [config?.googleDriveEnabled, config?.googleDriveClientId, config?.googleDriveApiKey, config?.googleDriveAppId],
   );
 
   // Check if Google Drive is configured and reset initialization if disabled
@@ -57,7 +57,7 @@ export function useGoogleDrivePicker(): UseGoogleDrivePickerReturn {
 
     const googleDriveConfig = getGoogleDriveConfig(googleDriveBackendConfig);
     if (!googleDriveConfig) {
-      throw new Error('Google Drive is not configured');
+      throw new Error("Google Drive is not configured");
     }
 
     const service = getGoogleDrivePickerService();
@@ -71,7 +71,7 @@ export function useGoogleDrivePicker(): UseGoogleDrivePickerReturn {
   const openPicker = useCallback(
     async (options: UseGoogleDrivePickerOptions = {}): Promise<File[]> => {
       if (!isEnabled) {
-        setError('Google Drive is not configured');
+        setError("Google Drive is not configured");
         return [];
       }
 
@@ -91,15 +91,15 @@ export function useGoogleDrivePicker(): UseGoogleDrivePickerReturn {
 
         return files;
       } catch (err) {
-        const errorMessage = err instanceof Error ? err.message : 'Failed to open Google Drive picker';
+        const errorMessage = err instanceof Error ? err.message : "Failed to open Google Drive picker";
         setError(errorMessage);
-        console.error('Google Drive picker error:', err);
+        console.error("Google Drive picker error:", err);
         return [];
       } finally {
         setIsLoading(false);
       }
     },
-    [isEnabled, initializeService]
+    [isEnabled, initializeService],
   );
 
   return {
diff --git a/frontend/src/core/hooks/useGroupEnabled.ts b/frontend/src/core/hooks/useGroupEnabled.ts
index 6c389f55f6..135ee34392 100644
--- a/frontend/src/core/hooks/useGroupEnabled.ts
+++ b/frontend/src/core/hooks/useGroupEnabled.ts
@@ -1,6 +1,6 @@
-import { useState, useEffect, useRef } from 'react';
-import apiClient from '@app/services/apiClient';
-import type { GroupEnabledResult } from '@app/types/groupEnabled';
+import { useState, useEffect, useRef } from "react";
+import apiClient from "@app/services/apiClient";
+import type { GroupEnabledResult } from "@app/types/groupEnabled";
 
 export type { GroupEnabledResult };
 
@@ -14,14 +14,20 @@ export function useGroupEnabled(group: string): GroupEnabledResult {
 
   useEffect(() => {
     isMountedRef.current = true;
-    return () => { isMountedRef.current = false; };
+    return () => {
+      isMountedRef.current = false;
+    };
   }, []);
 
   useEffect(() => {
     apiClient
       .get<boolean>(`/api/v1/config/group-enabled?group=${encodeURIComponent(group)}`)
-      .then(res => { if (isMountedRef.current) setResult({ enabled: res.data, unavailableReason: null }); })
-      .catch(() => { if (isMountedRef.current) setResult({ enabled: false, unavailableReason: null }); });
+      .then((res) => {
+        if (isMountedRef.current) setResult({ enabled: res.data, unavailableReason: null });
+      })
+      .catch(() => {
+        if (isMountedRef.current) setResult({ enabled: false, unavailableReason: null });
+      });
   }, [group]);
 
   return result;
diff --git a/frontend/src/core/hooks/useGroupSigningEnabled.ts b/frontend/src/core/hooks/useGroupSigningEnabled.ts
index 42e5fdf5f8..88a69c5dd9 100644
--- a/frontend/src/core/hooks/useGroupSigningEnabled.ts
+++ b/frontend/src/core/hooks/useGroupSigningEnabled.ts
@@ -1,4 +1,4 @@
-import { useAppConfig } from '@app/contexts/AppConfigContext';
+import { useAppConfig } from "@app/contexts/AppConfigContext";
 
 /**
  * Returns whether the shared (group) signing feature is available.
diff --git a/frontend/src/core/hooks/useIndexedDBThumbnail.ts b/frontend/src/core/hooks/useIndexedDBThumbnail.ts
index 174946335f..80d705f915 100644
--- a/frontend/src/core/hooks/useIndexedDBThumbnail.ts
+++ b/frontend/src/core/hooks/useIndexedDBThumbnail.ts
@@ -4,14 +4,13 @@ import { useIndexedDB } from "@app/contexts/IndexedDBContext";
 import { generateThumbnailForFile } from "@app/utils/thumbnailUtils";
 import { FileId } from "@app/types/fileContext";
 
-
 /**
  * Hook for IndexedDB-aware thumbnail loading
  * Handles thumbnail generation for files not in IndexedDB
  */
 export function useIndexedDBThumbnail(file: StirlingFileStub | undefined | null): {
   thumbnail: string | null;
-  isGenerating: boolean
+  isGenerating: boolean;
 } {
   const [thumb, setThumb] = useState<string | null>(null);
   const [generating, setGenerating] = useState(false);
@@ -42,11 +41,11 @@ export function useIndexedDBThumbnail(file: StirlingFileStub | undefined | null)
           if (file.id && indexedDB) {
             const loadedFile = await indexedDB.loadFile(file.id as FileId);
             if (!loadedFile) {
-              throw new Error('File not found in IndexedDB');
+              throw new Error("File not found in IndexedDB");
             }
             fileObject = loadedFile;
           } else {
-            throw new Error('File ID not available or IndexedDB context not available');
+            throw new Error("File ID not available or IndexedDB context not available");
           }
 
           // Use the universal thumbnail generator
@@ -59,12 +58,12 @@ export function useIndexedDBThumbnail(file: StirlingFileStub | undefined | null)
               try {
                 await indexedDB.updateThumbnail(file.id as FileId, thumbnail);
               } catch (error) {
-                console.warn('Failed to save thumbnail to IndexedDB:', error);
+                console.warn("Failed to save thumbnail to IndexedDB:", error);
               }
             }
           }
         } catch (error) {
-          console.warn('Failed to generate thumbnail for file', file.name, error);
+          console.warn("Failed to generate thumbnail for file", file.name, error);
           if (!cancelled) setThumb(null);
         } finally {
           if (!cancelled) setGenerating(false);
@@ -76,7 +75,9 @@ export function useIndexedDBThumbnail(file: StirlingFileStub | undefined | null)
     }
 
     loadThumbnail();
-    return () => { cancelled = true; };
+    return () => {
+      cancelled = true;
+    };
   }, [file, file?.thumbnailUrl, file?.id, indexedDB, generating]);
 
   return { thumbnail: thumb, isGenerating: generating };
diff --git a/frontend/src/core/hooks/useIsMobile.ts b/frontend/src/core/hooks/useIsMobile.ts
index 9446fe577d..23d4610418 100644
--- a/frontend/src/core/hooks/useIsMobile.ts
+++ b/frontend/src/core/hooks/useIsMobile.ts
@@ -1,11 +1,11 @@
-import { useMediaQuery } from '@mantine/hooks';
+import { useMediaQuery } from "@mantine/hooks";
 
 /**
  * Custom hook to detect mobile viewport
  * Uses a consistent breakpoint across the application
  */
 export const useIsMobile = (): boolean => {
-  return useMediaQuery('(max-width: 1024px)') ?? false;
+  return useMediaQuery("(max-width: 1024px)") ?? false;
 };
 
 /**
@@ -13,5 +13,5 @@ export const useIsMobile = (): boolean => {
  * Use for layouts that need a more compact single-column arrangement
  */
 export const useIsPhone = (): boolean => {
-  return useMediaQuery('(max-width: 768px)') ?? false;
+  return useMediaQuery("(max-width: 768px)") ?? false;
 };
diff --git a/frontend/src/core/hooks/useIsOverflowing.ts b/frontend/src/core/hooks/useIsOverflowing.ts
index b5e6d3962f..1414a4bf1d 100644
--- a/frontend/src/core/hooks/useIsOverflowing.ts
+++ b/frontend/src/core/hooks/useIsOverflowing.ts
@@ -1,5 +1,4 @@
-import * as React from 'react';
-
+import * as React from "react";
 
 /**
  Hook to detect if an element's content overflows its container
@@ -31,7 +30,6 @@ import * as React from 'react';
         );
 */
 
-
 export const useIsOverflowing = (ref: React.RefObject<HTMLElement | null>, callback?: (isOverflow: boolean) => void) => {
   // State to track overflow status
   const [isOverflow, setIsOverflow] = React.useState<boolean | undefined>(undefined);
@@ -42,27 +40,27 @@ export const useIsOverflowing = (ref: React.RefObject<HTMLElement | null>, callb
     // Function to check if element is overflowing
     const trigger = () => {
       if (!current) return;
-      
+
       // Compare scroll height (total content height) vs client height (visible height)
       const hasOverflow = current.scrollHeight > current.clientHeight;
       setIsOverflow(hasOverflow);
-      
+
       // Call optional callback with overflow state
       if (callback) callback(hasOverflow);
     };
 
     if (current) {
       // Use ResizeObserver for modern browsers (real-time detection)
-      if ('ResizeObserver' in window) {
+      if ("ResizeObserver" in window) {
         const resizeObserver = new ResizeObserver(trigger);
         resizeObserver.observe(current);
-        
+
         // Cleanup function to disconnect observer
         return () => {
           resizeObserver.disconnect();
         };
       }
-      
+
       // Fallback for browsers without ResizeObserver support
       // Add a small delay to ensure the element is fully rendered
       setTimeout(trigger, 0);
@@ -70,4 +68,4 @@ export const useIsOverflowing = (ref: React.RefObject<HTMLElement | null>, callb
   }, [callback, ref]);
 
   return isOverflow;
-}; 
\ No newline at end of file
+};
diff --git a/frontend/src/core/hooks/useJwtConfigSync.ts b/frontend/src/core/hooks/useJwtConfigSync.ts
index 723d02d03f..8d2ce516d1 100644
--- a/frontend/src/core/hooks/useJwtConfigSync.ts
+++ b/frontend/src/core/hooks/useJwtConfigSync.ts
@@ -1,4 +1,4 @@
-import { useEffect } from 'react';
+import { useEffect } from "react";
 
 /**
  * Core implementation: sets up the jwt-available event listener for OSS JWT auth,
@@ -7,19 +7,19 @@ import { useEffect } from 'react';
 export function useJwtConfigSync(fetchConfig: (force?: boolean) => void): { isAuthPage: boolean } {
   const currentPath = window.location.pathname;
   const isAuthPage =
-    currentPath.includes('/login') ||
-    currentPath.includes('/signup') ||
-    currentPath.includes('/auth/callback') ||
-    currentPath.includes('/invite/');
+    currentPath.includes("/login") ||
+    currentPath.includes("/signup") ||
+    currentPath.includes("/auth/callback") ||
+    currentPath.includes("/invite/");
 
   useEffect(() => {
     const handleJwtAvailable = () => {
-      console.debug('[AppConfig] JWT available event - refetching config');
+      console.debug("[AppConfig] JWT available event - refetching config");
       fetchConfig(true);
     };
 
-    window.addEventListener('jwt-available', handleJwtAvailable);
-    return () => window.removeEventListener('jwt-available', handleJwtAvailable);
+    window.addEventListener("jwt-available", handleJwtAvailable);
+    return () => window.removeEventListener("jwt-available", handleJwtAvailable);
   }, [fetchConfig]);
 
   return { isAuthPage };
diff --git a/frontend/src/core/hooks/useLicenseAlert.ts b/frontend/src/core/hooks/useLicenseAlert.ts
index a9035ef5ef..d57a4238f0 100644
--- a/frontend/src/core/hooks/useLicenseAlert.ts
+++ b/frontend/src/core/hooks/useLicenseAlert.ts
@@ -1,12 +1,9 @@
-import { useEffect, useState } from 'react';
-import {
-  UPGRADE_BANNER_ALERT_EVENT,
-  type UpgradeBannerAlertPayload,
-} from '@app/constants/events';
+import { useEffect, useState } from "react";
+import { UPGRADE_BANNER_ALERT_EVENT, type UpgradeBannerAlertPayload } from "@app/constants/events";
 
 export interface LicenseAlertState {
   active: boolean;
-  audience: 'admin' | 'user' | null;
+  audience: "admin" | "user" | null;
   totalUsers: number | null;
   freeTierLimit: number;
 }
@@ -22,7 +19,7 @@ export function useLicenseAlert(): LicenseAlertState {
   const [state, setState] = useState<LicenseAlertState>(defaultState);
 
   useEffect(() => {
-    if (typeof window === 'undefined') {
+    if (typeof window === "undefined") {
       return;
     }
 
@@ -31,9 +28,8 @@ export function useLicenseAlert(): LicenseAlertState {
       if (detail?.active) {
         setState({
           active: true,
-          audience: detail.audience ?? 'user',
-          totalUsers:
-            typeof detail.totalUsers === 'number' ? detail.totalUsers : null,
+          audience: detail.audience ?? "user",
+          totalUsers: typeof detail.totalUsers === "number" ? detail.totalUsers : null,
           freeTierLimit: detail.freeTierLimit ?? 5,
         });
       } else {
@@ -50,4 +46,3 @@ export function useLicenseAlert(): LicenseAlertState {
 
   return state;
 }
-
diff --git a/frontend/src/core/hooks/useLoginRequired.ts b/frontend/src/core/hooks/useLoginRequired.ts
index 3ed98bb1fe..ee08616a65 100644
--- a/frontend/src/core/hooks/useLoginRequired.ts
+++ b/frontend/src/core/hooks/useLoginRequired.ts
@@ -1,7 +1,7 @@
-import { useCallback } from 'react';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
-import { alert } from '@app/components/toast';
-import { useTranslation } from 'react-i18next';
+import { useCallback } from "react";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
+import { alert } from "@app/components/toast";
+import { useTranslation } from "react-i18next";
 
 /**
  * Hook to manage login-required functionality in admin sections
@@ -17,9 +17,9 @@ export function useLoginRequired() {
    */
   const showLoginRequiredAlert = useCallback(() => {
     alert({
-      alertType: 'warning',
-      title: t('admin.error', 'Error'),
-      body: t('admin.settings.loginRequired', 'Login mode must be enabled to modify admin settings'),
+      alertType: "warning",
+      title: t("admin.error", "Error"),
+      body: t("admin.settings.loginRequired", "Login mode must be enabled to modify admin settings"),
     });
   }, [t]);
 
@@ -38,16 +38,17 @@ export function useLoginRequired() {
   /**
    * Wrap an async handler to check login state before executing
    */
-  const withLoginCheck = useCallback(<T extends (...args: any[]) => Promise<any>>(
-    handler: T
-  ): T => {
-    return (async (...args: any[]) => {
-      if (!validateLoginEnabled()) {
-        return;
-      }
-      return handler(...args);
-    }) as T;
-  }, [validateLoginEnabled]);
+  const withLoginCheck = useCallback(
+    <T extends (...args: any[]) => Promise<any>>(handler: T): T => {
+      return (async (...args: any[]) => {
+        if (!validateLoginEnabled()) {
+          return;
+        }
+        return handler(...args);
+      }) as T;
+    },
+    [validateLoginEnabled],
+  );
 
   /**
    * Get styles for disabled inputs (cursor not-allowed)
@@ -55,9 +56,9 @@ export function useLoginRequired() {
   const getDisabledStyles = useCallback(() => {
     if (!loginEnabled) {
       return {
-        input: { cursor: 'not-allowed' },
-        track: { cursor: 'not-allowed' },
-        thumb: { cursor: 'not-allowed' }
+        input: { cursor: "not-allowed" },
+        track: { cursor: "not-allowed" },
+        thumb: { cursor: "not-allowed" },
       };
     }
     return undefined;
@@ -66,18 +67,18 @@ export function useLoginRequired() {
   /**
    * Wrap fetch function to skip API call when login disabled
    */
-  const withLoginCheckForFetch = useCallback(<T extends (...args: any[]) => Promise<any>>(
-    fetchHandler: T,
-    skipWhenDisabled: boolean = true
-  ): T => {
-    return (async (...args: any[]) => {
-      if (!loginEnabled && skipWhenDisabled) {
-        // Skip fetch when login disabled - component will use default/empty values
-        return;
-      }
-      return fetchHandler(...args);
-    }) as T;
-  }, [loginEnabled]);
+  const withLoginCheckForFetch = useCallback(
+    <T extends (...args: any[]) => Promise<any>>(fetchHandler: T, skipWhenDisabled: boolean = true): T => {
+      return (async (...args: any[]) => {
+        if (!loginEnabled && skipWhenDisabled) {
+          // Skip fetch when login disabled - component will use default/empty values
+          return;
+        }
+        return fetchHandler(...args);
+      }) as T;
+    },
+    [loginEnabled],
+  );
 
   return {
     loginEnabled,
diff --git a/frontend/src/core/hooks/useLogoAssets.test.ts b/frontend/src/core/hooks/useLogoAssets.test.ts
index 3f36d262da..ee3a153b38 100644
--- a/frontend/src/core/hooks/useLogoAssets.test.ts
+++ b/frontend/src/core/hooks/useLogoAssets.test.ts
@@ -1,31 +1,31 @@
-import { describe, expect, test } from 'vitest';
-import * as fs from 'fs';
-import * as path from 'path';
-import { LOGO_FOLDER_BY_VARIANT } from '@app/constants/logo';
-import type { LogoVariant } from '@app/services/preferencesService';
+import { describe, expect, test } from "vitest";
+import * as fs from "fs";
+import * as path from "path";
+import { LOGO_FOLDER_BY_VARIANT } from "@app/constants/logo";
+import type { LogoVariant } from "@app/services/preferencesService";
 
 /**
  * Tests that all required logo assets exist for each logo variant.
  * This ensures that when useLogoAssets returns paths, those files actually exist.
  */
-describe('useLogoAssets - Logo Asset Files', () => {
-  const publicDir = path.resolve(__dirname, '../../../public');
+describe("useLogoAssets - Logo Asset Files", () => {
+  const publicDir = path.resolve(__dirname, "../../../public");
 
   // All asset files that useLogoAssets references
   const requiredAssets = [
-    'logo-tooltip.svg',
-    'Firstpage.png',
-    'favicon.ico',
-    'logo192.png',
-    'logo512.png',
-    'StirlingPDFLogoWhiteText.svg',
-    'StirlingPDFLogoBlackText.svg',
-    'StirlingPDFLogoGreyText.svg',
+    "logo-tooltip.svg",
+    "Firstpage.png",
+    "favicon.ico",
+    "logo192.png",
+    "logo512.png",
+    "StirlingPDFLogoWhiteText.svg",
+    "StirlingPDFLogoBlackText.svg",
+    "StirlingPDFLogoGreyText.svg",
   ];
 
-  const logoVariants: LogoVariant[] = ['modern', 'classic'];
+  const logoVariants: LogoVariant[] = ["modern", "classic"];
 
-  describe.each(logoVariants)('%s logo variant', (variant) => {
+  describe.each(logoVariants)("%s logo variant", (variant) => {
     const folder = LOGO_FOLDER_BY_VARIANT[variant];
     const folderPath = path.join(publicDir, folder);
 
@@ -33,25 +33,21 @@ describe('useLogoAssets - Logo Asset Files', () => {
       expect(fs.existsSync(folderPath)).toBe(true);
     });
 
-    test.each(requiredAssets)('should have %s', (assetName) => {
+    test.each(requiredAssets)("should have %s", (assetName) => {
       const assetPath = path.join(folderPath, assetName);
-      expect(
-        fs.existsSync(assetPath),
-        `Missing asset: ${folder}/${assetName}`
-      ).toBe(true);
+      expect(fs.existsSync(assetPath), `Missing asset: ${folder}/${assetName}`).toBe(true);
     });
   });
 
-  describe('manifest files', () => {
-    test('manifest.json should exist for modern variant', () => {
-      const manifestPath = path.join(publicDir, 'manifest.json');
+  describe("manifest files", () => {
+    test("manifest.json should exist for modern variant", () => {
+      const manifestPath = path.join(publicDir, "manifest.json");
       expect(fs.existsSync(manifestPath)).toBe(true);
     });
 
-    test('manifest-classic.json should exist for classic variant', () => {
-      const manifestPath = path.join(publicDir, 'manifest-classic.json');
+    test("manifest-classic.json should exist for classic variant", () => {
+      const manifestPath = path.join(publicDir, "manifest-classic.json");
       expect(fs.existsSync(manifestPath)).toBe(true);
     });
   });
 });
-
diff --git a/frontend/src/core/hooks/useLogoAssets.ts b/frontend/src/core/hooks/useLogoAssets.ts
index 4d80b0809a..9ec21ec316 100644
--- a/frontend/src/core/hooks/useLogoAssets.ts
+++ b/frontend/src/core/hooks/useLogoAssets.ts
@@ -1,7 +1,7 @@
-import { useMemo } from 'react';
-import { BASE_PATH } from '@app/constants/app';
-import { getLogoFolder } from '@app/constants/logo';
-import { useLogoVariant } from '@app/hooks/useLogoVariant';
+import { useMemo } from "react";
+import { BASE_PATH } from "@app/constants/app";
+import { getLogoFolder } from "@app/constants/logo";
+import { useLogoVariant } from "@app/hooks/useLogoVariant";
 
 export function useLogoAssets() {
   const logoVariant = useLogoVariant();
@@ -25,10 +25,7 @@ export function useLogoAssets() {
         black: `${folderPath}/StirlingPDFLogoBlackText.svg`,
         grey: `${folderPath}/StirlingPDFLogoGreyText.svg`,
       },
-      manifestHref: logoVariant === 'classic'
-        ? `${BASE_PATH}/manifest-classic.json`
-        : `${BASE_PATH}/manifest.json`,
+      manifestHref: logoVariant === "classic" ? `${BASE_PATH}/manifest-classic.json` : `${BASE_PATH}/manifest.json`,
     };
   }, [logoVariant]);
 }
-
diff --git a/frontend/src/core/hooks/useLogoPath.ts b/frontend/src/core/hooks/useLogoPath.ts
index a4901334cc..b23be4de39 100644
--- a/frontend/src/core/hooks/useLogoPath.ts
+++ b/frontend/src/core/hooks/useLogoPath.ts
@@ -1,6 +1,6 @@
-import { useMemo } from 'react';
-import { useMantineColorScheme } from '@mantine/core';
-import { useLogoAssets } from '@app/hooks/useLogoAssets';
+import { useMemo } from "react";
+import { useMantineColorScheme } from "@mantine/core";
+import { useLogoAssets } from "@app/hooks/useLogoAssets";
 
 /**
  * Hook to get the correct logo path based on app config (logo style) and theme (light/dark)
@@ -16,7 +16,7 @@ export function useLogoPath(): string {
   const { folderPath } = useLogoAssets();
 
   return useMemo(() => {
-    const themeSuffix = colorScheme === 'dark' ? 'Dark' : 'Light';
+    const themeSuffix = colorScheme === "dark" ? "Dark" : "Light";
     return `${folderPath}/StirlingPDFLogoNoText${themeSuffix}.svg`;
   }, [colorScheme, folderPath]);
 }
diff --git a/frontend/src/core/hooks/useLogoVariant.ts b/frontend/src/core/hooks/useLogoVariant.ts
index 3df447c09c..49c251a71f 100644
--- a/frontend/src/core/hooks/useLogoVariant.ts
+++ b/frontend/src/core/hooks/useLogoVariant.ts
@@ -1,8 +1,8 @@
-import { useMemo } from 'react';
-import { usePreferences } from '@app/contexts/PreferencesContext';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
-import type { LogoVariant } from '@app/services/preferencesService';
-import { ensureLogoVariant } from '@app/constants/logo';
+import { useMemo } from "react";
+import { usePreferences } from "@app/contexts/PreferencesContext";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
+import type { LogoVariant } from "@app/services/preferencesService";
+import { ensureLogoVariant } from "@app/constants/logo";
 
 export function useLogoVariant(): LogoVariant {
   const { preferences } = usePreferences();
@@ -15,4 +15,3 @@ export function useLogoVariant(): LogoVariant {
     return ensureLogoVariant(preferenceVariant ?? configVariant);
   }, [config?.logoStyle, preferences.logoVariant]);
 }
-
diff --git a/frontend/src/core/hooks/useOs.ts b/frontend/src/core/hooks/useOs.ts
index 03bdf68bf7..ecf7875dc8 100644
--- a/frontend/src/core/hooks/useOs.ts
+++ b/frontend/src/core/hooks/useOs.ts
@@ -1,40 +1,34 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useState } from "react";
 
-export type OS =
-  | 'windows'
-  | 'mac-intel'
-  | 'mac-apple'
-  | 'linux-x64'
-  | 'linux-arm64'
-  | 'ios'
-  | 'android'
-  | 'unknown';
+export type OS = "windows" | "mac-intel" | "mac-apple" | "linux-x64" | "linux-arm64" | "ios" | "android" | "unknown";
 
 function parseUA(ua: string): OS {
   const uaLower = ua.toLowerCase();
 
   // iOS (includes iPadOS masquerading as Mac in some cases)
-  const isIOS = /iphone|ipad|ipod/.test(uaLower) || (ua.includes('Macintosh') && typeof window !== 'undefined' && 'ontouchstart' in window);
-  if (isIOS) return 'ios';
+  const isIOS =
+    /iphone|ipad|ipod/.test(uaLower) ||
+    (ua.includes("Macintosh") && typeof window !== "undefined" && "ontouchstart" in window);
+  if (isIOS) return "ios";
 
-  if (/android/.test(uaLower)) return 'android';
-  if (/windows nt/.test(uaLower)) return 'windows';
+  if (/android/.test(uaLower)) return "android";
+  if (/windows nt/.test(uaLower)) return "windows";
   if (/mac os x/.test(uaLower)) {
     // Default to Intel; refine via hints below
-    let detected: OS = 'mac-intel';
+    let detected: OS = "mac-intel";
     // Safari on Apple Silicon sometimes exposes both tokens
-    if (ua.includes('Apple') && ua.includes('ARM')) {
-      detected = 'mac-apple';
+    if (ua.includes("Apple") && ua.includes("ARM")) {
+      detected = "mac-apple";
     }
     return detected; // will be further refined via Client Hints if available
   }
-  if (/linux|x11/.test(uaLower)) return 'linux-x64';
+  if (/linux|x11/.test(uaLower)) return "linux-x64";
 
-  return 'unknown';
+  return "unknown";
 }
 
 export function useOs(): OS {
-  const [os, setOs] = useState<OS>('unknown');
+  const [os, setOs] = useState<OS>("unknown");
 
   useEffect(() => {
     let cancelled = false;
@@ -48,23 +42,23 @@ export function useOs(): OS {
       if (uaData?.getHighEntropyValues) {
         try {
           const { platform, architecture, bitness } = await uaData.getHighEntropyValues([
-            'platform',
-            'architecture',
-            'bitness',
-            'platformVersion',
+            "platform",
+            "architecture",
+            "bitness",
+            "platformVersion",
           ]);
 
-          const plat = (platform || '').toLowerCase();
-          if (plat.includes('windows')) detected = 'windows';
-          else if (plat.includes('ios')) detected = 'ios';
-          else if (plat.includes('android')) detected = 'android';
-          else if (plat.includes('mac')) {
+          const plat = (platform || "").toLowerCase();
+          if (plat.includes("windows")) detected = "windows";
+          else if (plat.includes("ios")) detected = "ios";
+          else if (plat.includes("android")) detected = "android";
+          else if (plat.includes("mac")) {
             // CH “architecture” is often "arm" on Apple Silicon
-            detected = architecture?.toLowerCase().includes('arm') ? 'mac-apple' : 'mac-intel';
-          } else if (plat.includes('linux') || plat.includes('chrome os')) {
-            const archLower = (architecture || '').toLowerCase();
-            const isArm = archLower.includes('arm') || (bitness === '32' && /aarch|arm/.test(architecture || ''));
-            detected = isArm ? 'linux-arm64' : 'linux-x64';
+            detected = architecture?.toLowerCase().includes("arm") ? "mac-apple" : "mac-intel";
+          } else if (plat.includes("linux") || plat.includes("chrome os")) {
+            const archLower = (architecture || "").toLowerCase();
+            const isArm = archLower.includes("arm") || (bitness === "32" && /aarch|arm/.test(architecture || ""));
+            detected = isArm ? "linux-arm64" : "linux-x64";
           }
         } catch {
           // ignore
@@ -85,5 +79,3 @@ export function useOs(): OS {
 
   return os;
 }
-
-
diff --git a/frontend/src/core/hooks/usePDFProcessor.ts b/frontend/src/core/hooks/usePDFProcessor.ts
index b116545e21..6a7dab790e 100644
--- a/frontend/src/core/hooks/usePDFProcessor.ts
+++ b/frontend/src/core/hooks/usePDFProcessor.ts
@@ -1,30 +1,26 @@
-import { useState, useCallback } from 'react';
-import { PDFDocument, PDFPage } from '@app/types/pageEditor';
-import { pdfWorkerManager } from '@app/services/pdfWorkerManager';
-import { createQuickKey } from '@app/types/fileContext';
+import { useState, useCallback } from "react";
+import { PDFDocument, PDFPage } from "@app/types/pageEditor";
+import { pdfWorkerManager } from "@app/services/pdfWorkerManager";
+import { createQuickKey } from "@app/types/fileContext";
 
 export function usePDFProcessor() {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  const generatePageThumbnail = useCallback(async (
-    file: File,
-    pageNumber: number,
-    scale: number = 0.5
-  ): Promise<string> => {
+  const generatePageThumbnail = useCallback(async (file: File, pageNumber: number, scale: number = 0.5): Promise<string> => {
     try {
       const arrayBuffer = await file.arrayBuffer();
       const pdf = await pdfWorkerManager.createDocument(arrayBuffer);
       const page = await pdf.getPage(pageNumber);
 
       const viewport = page.getViewport({ scale });
-      const canvas = document.createElement('canvas');
+      const canvas = document.createElement("canvas");
       canvas.width = viewport.width;
       canvas.height = viewport.height;
 
-      const context = canvas.getContext('2d');
+      const context = canvas.getContext("2d");
       if (!context) {
-        throw new Error('Could not get canvas context');
+        throw new Error("Could not get canvas context");
       }
 
       await page.render({ canvasContext: context, viewport, canvas }).promise;
@@ -35,92 +31,91 @@ export function usePDFProcessor() {
 
       return thumbnail;
     } catch (error) {
-      console.error('Failed to generate thumbnail:', error);
+      console.error("Failed to generate thumbnail:", error);
       throw error;
     }
   }, []);
 
   // Internal function to generate thumbnail from already-opened PDF
-  const generateThumbnailFromPDF = useCallback(async (
-    pdf: any,
-    pageNumber: number,
-    scale: number = 0.5
-  ): Promise<string> => {
+  const generateThumbnailFromPDF = useCallback(async (pdf: any, pageNumber: number, scale: number = 0.5): Promise<string> => {
     const page = await pdf.getPage(pageNumber);
 
     const viewport = page.getViewport({ scale });
-    const canvas = document.createElement('canvas');
+    const canvas = document.createElement("canvas");
     canvas.width = viewport.width;
     canvas.height = viewport.height;
 
-    const context = canvas.getContext('2d');
+    const context = canvas.getContext("2d");
     if (!context) {
-      throw new Error('Could not get canvas context');
+      throw new Error("Could not get canvas context");
     }
 
     await page.render({ canvasContext: context, viewport }).promise;
     return canvas.toDataURL();
   }, []);
 
-  const processPDFFile = useCallback(async (file: File): Promise<PDFDocument> => {
-    setLoading(true);
-    setError(null);
+  const processPDFFile = useCallback(
+    async (file: File): Promise<PDFDocument> => {
+      setLoading(true);
+      setError(null);
 
-    try {
-      const arrayBuffer = await file.arrayBuffer();
-      const pdf = await pdfWorkerManager.createDocument(arrayBuffer);
-      const totalPages = pdf.numPages;
+      try {
+        const arrayBuffer = await file.arrayBuffer();
+        const pdf = await pdfWorkerManager.createDocument(arrayBuffer);
+        const totalPages = pdf.numPages;
 
-      const pages: PDFPage[] = [];
+        const pages: PDFPage[] = [];
 
-      // Create pages without thumbnails initially - load them lazily
-      for (let i = 1; i <= totalPages; i++) {
-        pages.push({
-          id: `${createQuickKey(file)}-page-${i}`,
-          pageNumber: i,
-          originalPageNumber: i,
-          thumbnail: null, // Will be loaded lazily
-          rotation: 0,
-          selected: false
-        });
-      }
-
-      // Generate thumbnails for first 10 pages immediately using the same PDF instance
-      const priorityPages = Math.min(10, totalPages);
-      for (let i = 1; i <= priorityPages; i++) {
-        try {
-          const thumbnail = await generateThumbnailFromPDF(pdf, i);
-          pages[i - 1].thumbnail = thumbnail;
-        } catch (error) {
-          console.warn(`Failed to generate thumbnail for page ${i}:`, error);
+        // Create pages without thumbnails initially - load them lazily
+        for (let i = 1; i <= totalPages; i++) {
+          pages.push({
+            id: `${createQuickKey(file)}-page-${i}`,
+            pageNumber: i,
+            originalPageNumber: i,
+            thumbnail: null, // Will be loaded lazily
+            rotation: 0,
+            selected: false,
+          });
         }
+
+        // Generate thumbnails for first 10 pages immediately using the same PDF instance
+        const priorityPages = Math.min(10, totalPages);
+        for (let i = 1; i <= priorityPages; i++) {
+          try {
+            const thumbnail = await generateThumbnailFromPDF(pdf, i);
+            pages[i - 1].thumbnail = thumbnail;
+          } catch (error) {
+            console.warn(`Failed to generate thumbnail for page ${i}:`, error);
+          }
+        }
+
+        // Clean up using worker manager
+        pdfWorkerManager.destroyDocument(pdf);
+
+        const document: PDFDocument = {
+          id: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
+          name: file.name,
+          file,
+          pages,
+          totalPages,
+        };
+
+        return document;
+      } catch (error) {
+        const errorMessage = error instanceof Error ? error.message : "Failed to process PDF";
+        setError(errorMessage);
+        throw error;
+      } finally {
+        setLoading(false);
       }
-
-      // Clean up using worker manager
-      pdfWorkerManager.destroyDocument(pdf);
-
-      const document: PDFDocument = {
-        id: `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
-        name: file.name,
-        file,
-        pages,
-        totalPages
-      };
-
-      return document;
-    } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : 'Failed to process PDF';
-      setError(errorMessage);
-      throw error;
-    } finally {
-      setLoading(false);
-    }
-  }, [generateThumbnailFromPDF]);
+    },
+    [generateThumbnailFromPDF],
+  );
 
   return {
     processPDFFile,
     generatePageThumbnail,
     loading,
-    error
+    error,
   };
 }
diff --git a/frontend/src/core/hooks/usePdfLibLinks.ts b/frontend/src/core/hooks/usePdfLibLinks.ts
index fb5cef19e2..c1e093eb7c 100644
--- a/frontend/src/core/hooks/usePdfLibLinks.ts
+++ b/frontend/src/core/hooks/usePdfLibLinks.ts
@@ -1,9 +1,5 @@
-import { useState, useEffect, useRef } from 'react';
-import {
-  PdfLibLink,
-  extractLinksFromPage,
-} from '@app/utils/pdfLinkUtils';
-
+import { useState, useEffect, useRef } from "react";
+import { PdfLibLink, extractLinksFromPage } from "@app/utils/pdfLinkUtils";
 
 export type { PdfLibLink };
 
@@ -59,12 +55,7 @@ function releaseDocument(url: string): void {
   });
 }
 
-
-
-export function usePdfLibLinks(
-  pdfUrl: string | null,
-  pageIndex: number,
-): PdfLibLinksResult {
+export function usePdfLibLinks(pdfUrl: string | null, pageIndex: number): PdfLibLinksResult {
   const [result, setResult] = useState<PdfLibLinksResult>({
     links: [],
     pdfPageWidth: 0,
@@ -108,10 +99,7 @@ export function usePdfLibLinks(
         let pageData = cached.pageLinks.get(pageIndex);
         if (!pageData) {
           try {
-            const { links, pdfPageWidth, pdfPageHeight } = await extractLinksFromPage(
-              cached.data,
-              pageIndex,
-            );
+            const { links, pdfPageWidth, pdfPageHeight } = await extractLinksFromPage(cached.data, pageIndex);
             pageData = { links, width: pdfPageWidth, height: pdfPageHeight };
             cached.pageLinks.set(pageIndex, pageData);
           } catch (pageError) {
@@ -132,7 +120,7 @@ export function usePdfLibLinks(
 
         releaseDocument(url);
       } catch (error) {
-        console.warn('[usePdfLibLinks] Failed to extract links:', error);
+        console.warn("[usePdfLibLinks] Failed to extract links:", error);
         if (!cancelled && mountedRef.current) {
           setResult({ links: [], pdfPageWidth: 0, pdfPageHeight: 0, loading: false });
         }
diff --git a/frontend/src/core/hooks/usePdfSignatureDetection.ts b/frontend/src/core/hooks/usePdfSignatureDetection.ts
index cabfbb83db..5bf0bdf759 100644
--- a/frontend/src/core/hooks/usePdfSignatureDetection.ts
+++ b/frontend/src/core/hooks/usePdfSignatureDetection.ts
@@ -1,6 +1,6 @@
-import { useState, useEffect } from 'react';
-import { pdfWorkerManager } from '@app/services/pdfWorkerManager';
-import { StirlingFile } from '@app/types/fileContext';
+import { useState, useEffect } from "react";
+import { pdfWorkerManager } from "@app/services/pdfWorkerManager";
+import { StirlingFile } from "@app/types/fileContext";
 
 export interface PdfSignatureDetectionResult {
   hasDigitalSignatures: boolean;
@@ -22,7 +22,6 @@ export const usePdfSignatureDetection = (files: StirlingFile[]): PdfSignatureDet
       let foundSignature = false;
 
       try {
-
         for (const file of files) {
           const arrayBuffer = await file.arrayBuffer();
 
@@ -31,10 +30,10 @@ export const usePdfSignatureDetection = (files: StirlingFile[]): PdfSignatureDet
 
             for (let i = 1; i <= pdf.numPages; i++) {
               const page = await pdf.getPage(i);
-              const annotations = await page.getAnnotations({ intent: 'display' });
+              const annotations = await page.getAnnotations({ intent: "display" });
 
               annotations.forEach((annotation: any) => {
-                if (annotation.subtype === 'Widget' && annotation.fieldType === 'Sig') {
+                if (annotation.subtype === "Widget" && annotation.fieldType === "Sig") {
                   foundSignature = true;
                 }
               });
@@ -45,13 +44,13 @@ export const usePdfSignatureDetection = (files: StirlingFile[]): PdfSignatureDet
             // Clean up PDF document using worker manager
             pdfWorkerManager.destroyDocument(pdf);
           } catch (error) {
-            console.warn('Error analyzing PDF for signatures:', error);
+            console.warn("Error analyzing PDF for signatures:", error);
           }
 
           if (foundSignature) break;
         }
       } catch (error) {
-        console.warn('Error checking for digital signatures:', error);
+        console.warn("Error checking for digital signatures:", error);
       }
 
       setHasDigitalSignatures(foundSignature);
@@ -63,6 +62,6 @@ export const usePdfSignatureDetection = (files: StirlingFile[]): PdfSignatureDet
 
   return {
     hasDigitalSignatures,
-    isChecking
+    isChecking,
   };
 };
diff --git a/frontend/src/core/hooks/useProcessedFiles.ts b/frontend/src/core/hooks/useProcessedFiles.ts
index 9d01efc3e8..3ecb2dba8d 100644
--- a/frontend/src/core/hooks/useProcessedFiles.ts
+++ b/frontend/src/core/hooks/useProcessedFiles.ts
@@ -1,6 +1,6 @@
-import { useState, useEffect } from 'react';
-import { ProcessedFile, ProcessingState } from '@app/types/processing';
-import { pdfProcessingService } from '@app/services/pdfProcessingService';
+import { useState, useEffect } from "react";
+import { ProcessedFile, ProcessingState } from "@app/types/processing";
+import { pdfProcessingService } from "@app/services/pdfProcessingService";
 
 interface UseProcessedFilesResult {
   processedFiles: Map<File, ProcessedFile>;
@@ -21,18 +21,18 @@ export function useProcessedFiles(activeFiles: File[]): UseProcessedFilesResult
   useEffect(() => {
     // Subscribe to processing state changes
     const unsubscribe = pdfProcessingService.onProcessingChange(setProcessingStates);
-    
+
     // Check/start processing for each active file
     const checkProcessing = async () => {
       const newProcessedFiles = new Map<File, ProcessedFile>();
-      
+
       for (const file of activeFiles) {
         const processed = await pdfProcessingService.getProcessedFile(file);
         if (processed) {
           newProcessedFiles.set(file, processed);
         }
       }
-      
+
       setProcessedFiles(newProcessedFiles);
     };
 
@@ -45,7 +45,7 @@ export function useProcessedFiles(activeFiles: File[]): UseProcessedFilesResult
   useEffect(() => {
     const updateProcessedFiles = async () => {
       const updated = new Map<File, ProcessedFile>();
-      
+
       for (const file of activeFiles) {
         const existing = processedFiles.get(file);
         if (existing) {
@@ -58,7 +58,7 @@ export function useProcessedFiles(activeFiles: File[]): UseProcessedFilesResult
           }
         }
       }
-      
+
       setProcessedFiles(updated);
     };
 
@@ -71,14 +71,14 @@ export function useProcessedFiles(activeFiles: File[]): UseProcessedFilesResult
   useEffect(() => {
     const currentFiles = new Set(activeFiles);
     const previousFiles = Array.from(processedFiles.keys());
-    const removedFiles = previousFiles.filter(file => !currentFiles.has(file));
-    
+    const removedFiles = previousFiles.filter((file) => !currentFiles.has(file));
+
     if (removedFiles.length > 0) {
       // Clean up processing service cache
       pdfProcessingService.cleanup(removedFiles);
-      
+
       // Update local state
-      setProcessedFiles(prev => {
+      setProcessedFiles((prev) => {
         const updated = new Map();
         for (const [file, processed] of prev) {
           if (currentFiles.has(file)) {
@@ -92,7 +92,7 @@ export function useProcessedFiles(activeFiles: File[]): UseProcessedFilesResult
 
   // Derived state
   const isProcessing = processingStates.size > 0;
-  const hasProcessingErrors = Array.from(processingStates.values()).some(state => state.status === 'error');
+  const hasProcessingErrors = Array.from(processingStates.values()).some((state) => state.status === "error");
   const cacheStats = pdfProcessingService.getCacheStats();
 
   return {
@@ -100,7 +100,7 @@ export function useProcessedFiles(activeFiles: File[]): UseProcessedFilesResult
     processingStates,
     isProcessing,
     hasProcessingErrors,
-    cacheStats
+    cacheStats,
   };
 }
 
@@ -111,15 +111,15 @@ export function useProcessedFile(file: File | null): {
   processingState: ProcessingState | null;
 } {
   const result = useProcessedFiles(file ? [file] : []);
-  
+
   const processedFile = file ? result.processedFiles.get(file) || null : null;
-  const fileKey = file ? pdfProcessingService.generateFileKey(file) : '';
+  const fileKey = file ? pdfProcessingService.generateFileKey(file) : "";
   const processingState = fileKey ? result.processingStates.get(fileKey) || null : null;
   const isProcessing = !!processingState;
 
   return {
     processedFile,
     isProcessing,
-    processingState
+    processingState,
   };
-}
\ No newline at end of file
+}
diff --git a/frontend/src/core/hooks/useProgressivePagePreviews.ts b/frontend/src/core/hooks/useProgressivePagePreviews.ts
index ef62af4faa..addd482b29 100644
--- a/frontend/src/core/hooks/useProgressivePagePreviews.ts
+++ b/frontend/src/core/hooks/useProgressivePagePreviews.ts
@@ -1,12 +1,12 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import { pdfWorkerManager } from '@app/services/pdfWorkerManager';
-import type { PDFDocumentProxy } from 'pdfjs-dist/legacy/build/pdf.mjs';
-import { PagePreview } from '@app/types/compare';
+import { useCallback, useEffect, useRef, useState } from "react";
+import { pdfWorkerManager } from "@app/services/pdfWorkerManager";
+import type { PDFDocumentProxy } from "pdfjs-dist/legacy/build/pdf.mjs";
+import { PagePreview } from "@app/types/compare";
 
 const DISPLAY_SCALE = 1;
 const BATCH_SIZE = 10; // Render 10 pages at a time
 
-const getDevicePixelRatio = () => (typeof window !== 'undefined' ? window.devicePixelRatio : 1);
+const getDevicePixelRatio = () => (typeof window !== "undefined" ? window.devicePixelRatio : 1);
 
 interface ProgressivePagePreviewsOptions {
   file: File | null;
@@ -23,12 +23,7 @@ interface ProgressivePagePreviewsState {
   loadingPages: Set<number>; // 0-based page indices currently being loaded
 }
 
-export const useProgressivePagePreviews = ({
-  file,
-  enabled,
-  cacheKey,
-  visiblePageRange,
-}: ProgressivePagePreviewsOptions) => {
+export const useProgressivePagePreviews = ({ file, enabled, cacheKey, visiblePageRange }: ProgressivePagePreviewsOptions) => {
   const [state, setState] = useState<ProgressivePagePreviewsState>({
     pages: [],
     loading: false,
@@ -40,128 +35,126 @@ export const useProgressivePagePreviews = ({
   const pdfRef = useRef<PDFDocumentProxy | null>(null);
   const abortControllerRef = useRef<AbortController | null>(null);
 
-  const renderPageBatch = useCallback(async (
-    pdf: PDFDocumentProxy,
-    pageNumbers: number[],
-    signal: AbortSignal
-  ): Promise<PagePreview[]> => {
-    const previews: PagePreview[] = [];
-    const dpr = getDevicePixelRatio();
-    const renderScale = Math.max(2, Math.min(3, dpr * 2));
+  const renderPageBatch = useCallback(
+    async (pdf: PDFDocumentProxy, pageNumbers: number[], signal: AbortSignal): Promise<PagePreview[]> => {
+      const previews: PagePreview[] = [];
+      const dpr = getDevicePixelRatio();
+      const renderScale = Math.max(2, Math.min(3, dpr * 2));
 
-    for (const pageNumber of pageNumbers) {
-      if (signal.aborted) break;
+      for (const pageNumber of pageNumbers) {
+        if (signal.aborted) break;
 
-      try {
-        const page = await pdf.getPage(pageNumber);
-        const displayViewport = page.getViewport({ scale: DISPLAY_SCALE });
-        const renderViewport = page.getViewport({ scale: renderScale });
-        const canvas = document.createElement('canvas');
-        const context = canvas.getContext('2d');
+        try {
+          const page = await pdf.getPage(pageNumber);
+          const displayViewport = page.getViewport({ scale: DISPLAY_SCALE });
+          const renderViewport = page.getViewport({ scale: renderScale });
+          const canvas = document.createElement("canvas");
+          const context = canvas.getContext("2d");
 
-        canvas.width = Math.round(renderViewport.width);
-        canvas.height = Math.round(renderViewport.height);
+          canvas.width = Math.round(renderViewport.width);
+          canvas.height = Math.round(renderViewport.height);
 
-        if (!context) {
-          page.cleanup();
-          continue;
-        }
-
-        await page.render({ canvasContext: context, viewport: renderViewport, canvas }).promise;
-        previews.push({
-          pageNumber,
-          width: Math.round(displayViewport.width),
-          height: Math.round(displayViewport.height),
-          rotation: (page.rotate || 0) % 360,
-          url: canvas.toDataURL(),
-        });
-
-        page.cleanup();
-        canvas.width = 0;
-        canvas.height = 0;
-      } catch (error) {
-        console.error(`[progressive-pages] failed to render page ${pageNumber}:`, error);
-      }
-    }
-
-    return previews;
-  }, []);
-
-  const loadPageRange = useCallback(async (
-    startPage: number,
-    endPage: number,
-    signal: AbortSignal
-  ) => {
-    // Use the live PDF ref for bounds instead of possibly stale state
-    const totalPages = pdfRef.current?.numPages ?? state.totalPages;
-    if (startPage < 0 || endPage >= totalPages || startPage > endPage) {
-      return;
-    }
-
-    // Check which pages need to be loaded
-    const pagesToLoad: number[] = [];
-    for (let i = startPage; i <= endPage; i++) {
-      if (!state.loadedPages.has(i) && !state.loadingPages.has(i)) {
-        pagesToLoad.push(i + 1); // Convert to 1-based page numbers
-      }
-    }
-
-    if (pagesToLoad.length === 0) return;
-
-    // Mark pages as loading
-    setState(prev => ({
-      ...prev,
-      loadingPages: new Set([...prev.loadingPages, ...pagesToLoad.map(p => p - 1)]),
-    }));
-
-    try {
-      const pdfDoc = pdfRef.current;
-      if (!pdfDoc) return;
-      const previews = await renderPageBatch(pdfDoc, pagesToLoad, signal);
-      
-      if (!signal.aborted) {
-        setState(prev => {
-          const newPages = [...prev.pages];
-          const newLoadedPages = new Set(prev.loadedPages);
-          const newLoadingPages = new Set(prev.loadingPages);
-
-          // Add new previews and mark as loaded
-          for (const preview of previews) {
-            const pageIndex = preview.pageNumber - 1; // Convert to 0-based
-            newLoadedPages.add(pageIndex);
-            newLoadingPages.delete(pageIndex);
-            
-            // Insert preview in correct position
-            const insertIndex = newPages.findIndex(p => p.pageNumber > preview.pageNumber);
-            if (insertIndex === -1) {
-              newPages.push(preview);
-            } else {
-              newPages.splice(insertIndex, 0, preview);
-            }
+          if (!context) {
+            page.cleanup();
+            continue;
           }
 
-          return {
-            ...prev,
-            pages: newPages,
-            loadedPages: newLoadedPages,
-            loadingPages: newLoadingPages,
-          };
-        });
+          await page.render({ canvasContext: context, viewport: renderViewport, canvas }).promise;
+          previews.push({
+            pageNumber,
+            width: Math.round(displayViewport.width),
+            height: Math.round(displayViewport.height),
+            rotation: (page.rotate || 0) % 360,
+            url: canvas.toDataURL(),
+          });
+
+          page.cleanup();
+          canvas.width = 0;
+          canvas.height = 0;
+        } catch (error) {
+          console.error(`[progressive-pages] failed to render page ${pageNumber}:`, error);
+        }
       }
-    } catch (error) {
-      if (!signal.aborted) {
-        console.error('[progressive-pages] failed to load page batch:', error);
+
+      return previews;
+    },
+    [],
+  );
+
+  const loadPageRange = useCallback(
+    async (startPage: number, endPage: number, signal: AbortSignal) => {
+      // Use the live PDF ref for bounds instead of possibly stale state
+      const totalPages = pdfRef.current?.numPages ?? state.totalPages;
+      if (startPage < 0 || endPage >= totalPages || startPage > endPage) {
+        return;
       }
-    } finally {
-      if (!signal.aborted) {
-        setState(prev => {
-          const newLoadingPages = new Set(prev.loadingPages);
-          pagesToLoad.forEach(p => newLoadingPages.delete(p - 1));
-          return { ...prev, loadingPages: newLoadingPages };
-        });
+
+      // Check which pages need to be loaded
+      const pagesToLoad: number[] = [];
+      for (let i = startPage; i <= endPage; i++) {
+        if (!state.loadedPages.has(i) && !state.loadingPages.has(i)) {
+          pagesToLoad.push(i + 1); // Convert to 1-based page numbers
+        }
       }
-    }
-  }, [state.loadedPages, state.loadingPages, state.totalPages, renderPageBatch]);
+
+      if (pagesToLoad.length === 0) return;
+
+      // Mark pages as loading
+      setState((prev) => ({
+        ...prev,
+        loadingPages: new Set([...prev.loadingPages, ...pagesToLoad.map((p) => p - 1)]),
+      }));
+
+      try {
+        const pdfDoc = pdfRef.current;
+        if (!pdfDoc) return;
+        const previews = await renderPageBatch(pdfDoc, pagesToLoad, signal);
+
+        if (!signal.aborted) {
+          setState((prev) => {
+            const newPages = [...prev.pages];
+            const newLoadedPages = new Set(prev.loadedPages);
+            const newLoadingPages = new Set(prev.loadingPages);
+
+            // Add new previews and mark as loaded
+            for (const preview of previews) {
+              const pageIndex = preview.pageNumber - 1; // Convert to 0-based
+              newLoadedPages.add(pageIndex);
+              newLoadingPages.delete(pageIndex);
+
+              // Insert preview in correct position
+              const insertIndex = newPages.findIndex((p) => p.pageNumber > preview.pageNumber);
+              if (insertIndex === -1) {
+                newPages.push(preview);
+              } else {
+                newPages.splice(insertIndex, 0, preview);
+              }
+            }
+
+            return {
+              ...prev,
+              pages: newPages,
+              loadedPages: newLoadedPages,
+              loadingPages: newLoadingPages,
+            };
+          });
+        }
+      } catch (error) {
+        if (!signal.aborted) {
+          console.error("[progressive-pages] failed to load page batch:", error);
+        }
+      } finally {
+        if (!signal.aborted) {
+          setState((prev) => {
+            const newLoadingPages = new Set(prev.loadingPages);
+            pagesToLoad.forEach((p) => newLoadingPages.delete(p - 1));
+            return { ...prev, loadingPages: newLoadingPages };
+          });
+        }
+      }
+    },
+    [state.loadedPages, state.loadingPages, state.totalPages, renderPageBatch],
+  );
 
   // Initialize PDF and load first batch
   useEffect(() => {
@@ -182,8 +175,8 @@ export const useProgressivePagePreviews = ({
 
     const initialize = async () => {
       try {
-        setState(prev => ({ ...prev, loading: true }));
-        
+        setState((prev) => ({ ...prev, loading: true }));
+
         const arrayBuffer = await file.arrayBuffer();
         const pdf = await pdfWorkerManager.createDocument(arrayBuffer, {
           disableAutoFetch: true,
@@ -198,7 +191,7 @@ export const useProgressivePagePreviews = ({
         pdfRef.current = pdf;
         const totalPages = pdf.numPages;
 
-        setState(prev => ({
+        setState((prev) => ({
           ...prev,
           totalPages,
           loading: false,
@@ -208,11 +201,10 @@ export const useProgressivePagePreviews = ({
         const initAbort = new AbortController();
         const firstBatchEnd = Math.min(BATCH_SIZE - 1, totalPages - 1);
         await loadPageRange(0, firstBatchEnd, initAbort.signal);
-
       } catch (error) {
-        console.error('[progressive-pages] failed to initialize PDF:', error);
+        console.error("[progressive-pages] failed to initialize PDF:", error);
         if (!cancelled) {
-          setState(prev => ({
+          setState((prev) => ({
             ...prev,
             loading: false,
             totalPages: 0,
diff --git a/frontend/src/core/hooks/useRainbowTheme.ts b/frontend/src/core/hooks/useRainbowTheme.ts
index 6e768c0b00..9b6c423282 100644
--- a/frontend/src/core/hooks/useRainbowTheme.ts
+++ b/frontend/src/core/hooks/useRainbowTheme.ts
@@ -1,6 +1,6 @@
-import { useCallback, useRef, useEffect } from 'react';
-import { usePreferences } from '@app/contexts/PreferencesContext';
-import type { ThemeMode } from '@app/constants/theme';
+import { useCallback, useRef, useEffect } from "react";
+import { usePreferences } from "@app/contexts/PreferencesContext";
+import type { ThemeMode } from "@app/constants/theme";
 
 interface RainbowThemeHook {
   themeMode: ThemeMode;
@@ -24,25 +24,26 @@ export function useRainbowTheme(): RainbowThemeHook {
 
   // Apply rainbow class to body whenever theme changes
   useEffect(() => {
-    if (themeMode === 'rainbow') {
-      document.body.classList.add('rainbow-mode-active');
+    if (themeMode === "rainbow") {
+      document.body.classList.add("rainbow-mode-active");
       showRainbowNotification();
     } else {
-      document.body.classList.remove('rainbow-mode-active');
+      document.body.classList.remove("rainbow-mode-active");
     }
   }, [themeMode]);
 
   const showRainbowNotification = () => {
     // Remove any existing notification
-    const existingNotification = document.getElementById('rainbow-notification');
+    const existingNotification = document.getElementById("rainbow-notification");
     if (existingNotification) {
       existingNotification.remove();
     }
 
     // Create and show rainbow notification
-    const notification = document.createElement('div');
-    notification.id = 'rainbow-notification';
-    notification.innerHTML = '🌈 RAINBOW MODE ACTIVATED! 🌈<br><small>Button disabled for 3 seconds, then click to exit</small>';
+    const notification = document.createElement("div");
+    notification.id = "rainbow-notification";
+    notification.innerHTML =
+      "🌈 RAINBOW MODE ACTIVATED! 🌈<br><small>Button disabled for 3 seconds, then click to exit</small>";
     notification.style.cssText = `
       position: fixed;
       top: 20px;
@@ -68,7 +69,7 @@ export function useRainbowTheme(): RainbowThemeHook {
     // Auto-remove notification after 3 seconds
     setTimeout(() => {
       if (notification) {
-        notification.style.opacity = '0';
+        notification.style.opacity = "0";
         setTimeout(() => {
           if (notification.parentNode) {
             notification.parentNode.removeChild(notification);
@@ -80,15 +81,15 @@ export function useRainbowTheme(): RainbowThemeHook {
 
   const showExitNotification = () => {
     // Remove any existing notification
-    const existingNotification = document.getElementById('rainbow-exit-notification');
+    const existingNotification = document.getElementById("rainbow-exit-notification");
     if (existingNotification) {
       existingNotification.remove();
     }
 
     // Create and show exit notification
-    const notification = document.createElement('div');
-    notification.id = 'rainbow-exit-notification';
-    notification.innerHTML = '🌙 Rainbow mode deactivated';
+    const notification = document.createElement("div");
+    notification.id = "rainbow-exit-notification";
+    notification.innerHTML = "🌙 Rainbow mode deactivated";
     notification.style.cssText = `
       position: fixed;
       top: 20px;
@@ -112,7 +113,7 @@ export function useRainbowTheme(): RainbowThemeHook {
     // Auto-remove notification after 2 seconds
     setTimeout(() => {
       if (notification) {
-        notification.style.opacity = '0';
+        notification.style.opacity = "0";
         setTimeout(() => {
           if (notification.parentNode) {
             notification.parentNode.removeChild(notification);
@@ -131,9 +132,9 @@ export function useRainbowTheme(): RainbowThemeHook {
     const currentTime = Date.now();
 
     // Simple exit from rainbow mode with single click (after cooldown period)
-    if (themeMode === 'rainbow') {
-      updatePreference('theme', 'light');
-      console.log('🌈 Rainbow mode deactivated. Thanks for trying it!');
+    if (themeMode === "rainbow") {
+      updatePreference("theme", "light");
+      console.log("🌈 Rainbow mode deactivated. Thanks for trying it!");
       showExitNotification();
       return;
     }
@@ -148,15 +149,15 @@ export function useRainbowTheme(): RainbowThemeHook {
 
     // Easter egg: Activate rainbow mode after 10 rapid toggles
     if (allowRainbowMode && toggleCount.current >= 10) {
-      updatePreference('theme', 'rainbow');
-      console.log('🌈 RAINBOW MODE ACTIVATED! 🌈 You found the secret easter egg!');
-      console.log('🌈 Button will be disabled for 3 seconds, then click once to exit!');
+      updatePreference("theme", "rainbow");
+      console.log("🌈 RAINBOW MODE ACTIVATED! 🌈 You found the secret easter egg!");
+      console.log("🌈 Button will be disabled for 3 seconds, then click once to exit!");
 
       // Disable toggle for 3 seconds
       isToggleDisabled.current = true;
       setTimeout(() => {
         isToggleDisabled.current = false;
-        console.log('🌈 Theme toggle re-enabled! Click once to exit rainbow mode.');
+        console.log("🌈 Theme toggle re-enabled! Click once to exit rainbow mode.");
       }, 3000);
 
       // Reset counter
@@ -165,25 +166,25 @@ export function useRainbowTheme(): RainbowThemeHook {
     }
 
     // Normal theme switching
-    const nextTheme = themeMode === 'light' ? 'dark' : 'light';
-    updatePreference('theme', nextTheme);
+    const nextTheme = themeMode === "light" ? "dark" : "light";
+    updatePreference("theme", nextTheme);
   }, [themeMode, updatePreference]);
 
   const activateRainbow = useCallback(() => {
-    updatePreference('theme', 'rainbow');
-    console.log('🌈 Rainbow mode manually activated!');
+    updatePreference("theme", "rainbow");
+    console.log("🌈 Rainbow mode manually activated!");
   }, [updatePreference]);
 
   const deactivateRainbow = useCallback(() => {
-    if (themeMode === 'rainbow') {
-      updatePreference('theme', 'light');
-      console.log('🌈 Rainbow mode manually deactivated.');
+    if (themeMode === "rainbow") {
+      updatePreference("theme", "light");
+      console.log("🌈 Rainbow mode manually deactivated.");
     }
   }, [themeMode, updatePreference]);
 
   return {
     themeMode,
-    isRainbowMode: themeMode === 'rainbow',
+    isRainbowMode: themeMode === "rainbow",
     isToggleDisabled: isToggleDisabled.current,
     toggleTheme,
     activateRainbow,
diff --git a/frontend/src/core/hooks/useRightRailButtons.ts b/frontend/src/core/hooks/useRightRailButtons.ts
index aa43b0189e..36fad9f30d 100644
--- a/frontend/src/core/hooks/useRightRailButtons.ts
+++ b/frontend/src/core/hooks/useRightRailButtons.ts
@@ -1,6 +1,6 @@
-import { useEffect, useMemo } from 'react';
-import { useRightRail } from '@app/contexts/RightRailContext';
-import { RightRailAction, RightRailButtonConfig } from '@app/types/rightRail';
+import { useEffect, useMemo } from "react";
+import { useRightRail } from "@app/contexts/RightRailContext";
+import { RightRailAction, RightRailButtonConfig } from "@app/types/rightRail";
 
 export interface RightRailButtonWithAction extends RightRailButtonConfig {
   onClick?: RightRailAction;
@@ -15,21 +15,18 @@ export function useRightRailButtons(buttons: readonly RightRailButtonWithAction[
   const { registerButtons, unregisterButtons, setAction } = useRightRail();
 
   // Memoize configs and ids to reduce churn
-  const configs: RightRailButtonConfig[] = useMemo(
-    () => buttons.map(({ onClick, ...cfg }) => cfg),
-    [buttons]
-  );
-  const ids: string[] = useMemo(() => buttons.map(b => b.id), [buttons]);
+  const configs: RightRailButtonConfig[] = useMemo(() => buttons.map(({ onClick, ...cfg }) => cfg), [buttons]);
+  const ids: string[] = useMemo(() => buttons.map((b) => b.id), [buttons]);
 
   useEffect(() => {
     if (!buttons || buttons.length === 0) return;
 
     // DEV warnings for duplicate ids or missing handlers
-    if (process.env.NODE_ENV === 'development') {
+    if (process.env.NODE_ENV === "development") {
       const idSet = new Set<string>();
-      buttons.forEach(b => {
-        if (!b.onClick && !b.render) console.warn('[RightRail] Missing onClick/render for id:', b.id);
-        if (idSet.has(b.id)) console.warn('[RightRail] Duplicate id in buttons array:', b.id);
+      buttons.forEach((b) => {
+        if (!b.onClick && !b.render) console.warn("[RightRail] Missing onClick/render for id:", b.id);
+        if (idSet.has(b.id)) console.warn("[RightRail] Duplicate id in buttons array:", b.id);
         idSet.add(b.id);
       });
     }
diff --git a/frontend/src/core/hooks/useRightRailTooltipSide.ts b/frontend/src/core/hooks/useRightRailTooltipSide.ts
index 634d041139..0143f990b0 100644
--- a/frontend/src/core/hooks/useRightRailTooltipSide.ts
+++ b/frontend/src/core/hooks/useRightRailTooltipSide.ts
@@ -1,32 +1,32 @@
-import { useEffect, useState } from 'react';
-import { SidebarRefs } from '@app/types/sidebar';
+import { useEffect, useState } from "react";
+import { SidebarRefs } from "@app/types/sidebar";
 
 export function useRightRailTooltipSide(
   sidebarRefs?: SidebarRefs,
-  defaultOffset: number = 16
-): { position: 'left' | 'right'; offset: number } {
-  const [position, setPosition] = useState<'left' | 'right'>('left');
+  defaultOffset: number = 16,
+): { position: "left" | "right"; offset: number } {
+  const [position, setPosition] = useState<"left" | "right">("left");
 
   useEffect(() => {
     const computePosition = () => {
       const rail = sidebarRefs?.rightRailRef?.current;
-      const isRTL = typeof document !== 'undefined' && document.documentElement.dir === 'rtl';
+      const isRTL = typeof document !== "undefined" && document.documentElement.dir === "rtl";
 
       // Fallback to left if we can't measure
-      if (!rail || typeof window === 'undefined') {
-        setPosition(isRTL ? 'left' : 'left');
+      if (!rail || typeof window === "undefined") {
+        setPosition(isRTL ? "left" : "left");
         return;
       }
 
       const rect = rail.getBoundingClientRect();
       const center = rect.left + rect.width / 2;
-      const preferred = center > window.innerWidth / 2 ? 'left' : 'right';
-      setPosition(isRTL ? 'left' : preferred);
+      const preferred = center > window.innerWidth / 2 ? "left" : "right";
+      setPosition(isRTL ? "left" : preferred);
     };
 
     computePosition();
-    window.addEventListener('resize', computePosition);
-    return () => window.removeEventListener('resize', computePosition);
+    window.addEventListener("resize", computePosition);
+    return () => window.removeEventListener("resize", computePosition);
   }, [sidebarRefs]);
 
   return { position, offset: defaultOffset };
diff --git a/frontend/src/core/hooks/useScarfTracking.ts b/frontend/src/core/hooks/useScarfTracking.ts
index b0297d5102..02cce844c7 100644
--- a/frontend/src/core/hooks/useScarfTracking.ts
+++ b/frontend/src/core/hooks/useScarfTracking.ts
@@ -1,7 +1,7 @@
-import { useEffect } from 'react';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
-import { useCookieConsent } from '@app/hooks/useCookieConsent';
-import { setScarfConfig, firePixel } from '@app/utils/scarfTracking';
+import { useEffect } from "react";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
+import { useCookieConsent } from "@app/hooks/useCookieConsent";
+import { setScarfConfig, firePixel } from "@app/utils/scarfTracking";
 
 /**
  * Hook for initializing Scarf tracking
@@ -27,18 +27,18 @@ export function useScarfTracking() {
   // Listen to cookie consent changes and auto-fire pixel when consent is granted
   useEffect(() => {
     const handleConsentChange = () => {
-      console.warn('[useScarfTracking] Consent changed, checking scarf service acceptance');
-      if (isServiceAccepted('scarf', 'analytics')) {
+      console.warn("[useScarfTracking] Consent changed, checking scarf service acceptance");
+      if (isServiceAccepted("scarf", "analytics")) {
         firePixel(window.location.pathname);
       }
     };
 
-    window.addEventListener('cc:onConsent', handleConsentChange);
-    window.addEventListener('cc:onChange', handleConsentChange);
+    window.addEventListener("cc:onConsent", handleConsentChange);
+    window.addEventListener("cc:onChange", handleConsentChange);
 
     return () => {
-      window.removeEventListener('cc:onConsent', handleConsentChange);
-      window.removeEventListener('cc:onChange', handleConsentChange);
+      window.removeEventListener("cc:onConsent", handleConsentChange);
+      window.removeEventListener("cc:onChange", handleConsentChange);
     };
   }, [isServiceAccepted]);
 }
diff --git a/frontend/src/core/hooks/useSelfHostedToolAvailability.ts b/frontend/src/core/hooks/useSelfHostedToolAvailability.ts
index b232b3b7d9..60e3a4217b 100644
--- a/frontend/src/core/hooks/useSelfHostedToolAvailability.ts
+++ b/frontend/src/core/hooks/useSelfHostedToolAvailability.ts
@@ -4,8 +4,6 @@
  * returns the set of tool IDs that are unavailable when the self-hosted server
  * is offline (i.e. tools whose endpoints the local bundled backend does not support).
  */
-export function useSelfHostedToolAvailability(
-  _tools: Array<{ id: string; endpoints?: string[] }>
-): Set<string> {
+export function useSelfHostedToolAvailability(_tools: Array<{ id: string; endpoints?: string[] }>): Set<string> {
   return new Set<string>();
 }
diff --git a/frontend/src/core/hooks/useServerExperience.ts b/frontend/src/core/hooks/useServerExperience.ts
index 7b78a58d49..570076b44e 100644
--- a/frontend/src/core/hooks/useServerExperience.ts
+++ b/frontend/src/core/hooks/useServerExperience.ts
@@ -1,22 +1,22 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
 
-const SELF_REPORTED_ADMIN_KEY = 'stirling-self-reported-admin';
+const SELF_REPORTED_ADMIN_KEY = "stirling-self-reported-admin";
 const FREE_TIER_LIMIT = 5;
 
-type UserCountSource = 'admin' | 'estimate' | 'unknown';
+type UserCountSource = "admin" | "estimate" | "unknown";
 
 export type ServerScenarioKey =
-  | 'unknown'
-  | 'licensed'
-  | 'no-login-user-under-limit-no-license'
-  | 'no-login-admin-under-limit-no-license'
-  | 'no-login-user-over-limit-no-license'
-  | 'no-login-admin-over-limit-no-license'
-  | 'login-user-under-limit-no-license'
-  | 'login-admin-under-limit-no-license'
-  | 'login-user-over-limit-no-license'
-  | 'login-admin-over-limit-no-license';
+  | "unknown"
+  | "licensed"
+  | "no-login-user-under-limit-no-license"
+  | "no-login-admin-under-limit-no-license"
+  | "no-login-user-over-limit-no-license"
+  | "no-login-admin-over-limit-no-license"
+  | "login-user-under-limit-no-license"
+  | "login-admin-under-limit-no-license"
+  | "login-user-over-limit-no-license"
+  | "login-admin-over-limit-no-license";
 
 export interface ServerExperienceValue {
   loginEnabled: boolean;
@@ -48,11 +48,11 @@ export interface ServerExperienceValue {
 }
 
 function readSelfReportedAdmin(): boolean {
-  if (typeof window === 'undefined') {
+  if (typeof window === "undefined") {
     return false;
   }
   try {
-    return window.localStorage.getItem(SELF_REPORTED_ADMIN_KEY) === 'true';
+    return window.localStorage.getItem(SELF_REPORTED_ADMIN_KEY) === "true";
   } catch {
     return false;
   }
@@ -68,16 +68,16 @@ export function useServerExperience(): ServerExperienceValue {
   // Commented out the previous self-reported admin path to avoid elevating users.
   // const effectiveIsAdmin = configIsAdmin || (!loginEnabled && selfReportedAdmin);
   const effectiveIsAdmin = loginEnabled ? configIsAdmin : false;
-  const hasPaidLicense = config?.license === 'SERVER' || config?.license === 'PRO' || config?.license === 'ENTERPRISE';
+  const hasPaidLicense = config?.license === "SERVER" || config?.license === "PRO" || config?.license === "ENTERPRISE";
 
   const setSelfReportedAdmin = useCallback((value: boolean) => {
     setSelfReportedAdminState(value);
-    if (typeof window === 'undefined') {
+    if (typeof window === "undefined") {
       return;
     }
     try {
       if (value) {
-        window.localStorage.setItem(SELF_REPORTED_ADMIN_KEY, 'true');
+        window.localStorage.setItem(SELF_REPORTED_ADMIN_KEY, "true");
       } else {
         window.localStorage.removeItem(SELF_REPORTED_ADMIN_KEY);
       }
@@ -87,16 +87,16 @@ export function useServerExperience(): ServerExperienceValue {
   }, []);
 
   useEffect(() => {
-    if (typeof window === 'undefined') {
+    if (typeof window === "undefined") {
       return;
     }
     const handleStorage = (event: StorageEvent) => {
       if (event.key === SELF_REPORTED_ADMIN_KEY) {
-        setSelfReportedAdminState(event.newValue === 'true');
+        setSelfReportedAdminState(event.newValue === "true");
       }
     };
-    window.addEventListener('storage', handleStorage);
-    return () => window.removeEventListener('storage', handleStorage);
+    window.addEventListener("storage", handleStorage);
+    return () => window.removeEventListener("storage", handleStorage);
   }, []);
 
   useEffect(() => {
@@ -107,54 +107,56 @@ export function useServerExperience(): ServerExperienceValue {
 
   const scenarioKey: ServerScenarioKey = useMemo(() => {
     if (hasPaidLicense) {
-      return 'licensed';
+      return "licensed";
     }
-    return 'unknown';
+    return "unknown";
   }, [hasPaidLicense]);
 
-  const value = useMemo<ServerExperienceValue>(() => ({
-    loginEnabled,
-    configIsAdmin,
-    effectiveIsAdmin,
-    selfReportedAdmin,
-    isAuthenticated: false,
-    isNewServer: config?.isNewServer ?? null,
-    isNewUser: config?.isNewUser ?? null,
-    premiumEnabled: config?.premiumEnabled ?? null,
-    license: config?.license,
-    runningProOrHigher: config?.runningProOrHigher,
-    runningEE: config?.runningEE,
-    hasPaidLicense,
-    licenseKeyValid: config?.premiumEnabled ?? null,
-    licenseLoading: false,
-    licenseInfoAvailable: false,
-    totalUsers: null,
-    weeklyActiveUsers: null,
-    userCountLoading: false,
-    userCountError: null,
-    userCountSource: 'unknown',
-    userCountResolved: false,
-    overFreeTierLimit: null,
-    freeTierLimit: FREE_TIER_LIMIT,
-    refreshUserCounts: async () => {},
-    setSelfReportedAdmin,
-    scenarioKey,
-  }), [
-    config?.isNewServer,
-    config?.isNewUser,
-    config?.license,
-    config?.premiumEnabled,
-    config?.runningEE,
-    config?.runningProOrHigher,
-    configIsAdmin,
-    effectiveIsAdmin,
-    hasPaidLicense,
-    loginEnabled,
-    scenarioKey,
-    selfReportedAdmin,
-    setSelfReportedAdmin,
-  ]);
+  const value = useMemo<ServerExperienceValue>(
+    () => ({
+      loginEnabled,
+      configIsAdmin,
+      effectiveIsAdmin,
+      selfReportedAdmin,
+      isAuthenticated: false,
+      isNewServer: config?.isNewServer ?? null,
+      isNewUser: config?.isNewUser ?? null,
+      premiumEnabled: config?.premiumEnabled ?? null,
+      license: config?.license,
+      runningProOrHigher: config?.runningProOrHigher,
+      runningEE: config?.runningEE,
+      hasPaidLicense,
+      licenseKeyValid: config?.premiumEnabled ?? null,
+      licenseLoading: false,
+      licenseInfoAvailable: false,
+      totalUsers: null,
+      weeklyActiveUsers: null,
+      userCountLoading: false,
+      userCountError: null,
+      userCountSource: "unknown",
+      userCountResolved: false,
+      overFreeTierLimit: null,
+      freeTierLimit: FREE_TIER_LIMIT,
+      refreshUserCounts: async () => {},
+      setSelfReportedAdmin,
+      scenarioKey,
+    }),
+    [
+      config?.isNewServer,
+      config?.isNewUser,
+      config?.license,
+      config?.premiumEnabled,
+      config?.runningEE,
+      config?.runningProOrHigher,
+      configIsAdmin,
+      effectiveIsAdmin,
+      hasPaidLicense,
+      loginEnabled,
+      scenarioKey,
+      selfReportedAdmin,
+      setSelfReportedAdmin,
+    ],
+  );
 
   return value;
 }
-
diff --git a/frontend/src/core/hooks/useSettingsDirty.ts b/frontend/src/core/hooks/useSettingsDirty.ts
index 20704677ef..47fa718a54 100644
--- a/frontend/src/core/hooks/useSettingsDirty.ts
+++ b/frontend/src/core/hooks/useSettingsDirty.ts
@@ -1,5 +1,5 @@
-import { useEffect, useState, useRef } from 'react';
-import { useUnsavedChanges } from '@app/contexts/UnsavedChangesContext';
+import { useEffect, useState, useRef } from "react";
+import { useUnsavedChanges } from "@app/contexts/UnsavedChangesContext";
 
 interface UseSettingsDirtyReturn<T> {
   isDirty: boolean;
@@ -13,7 +13,7 @@ interface UseSettingsDirtyReturn<T> {
  */
 export function useSettingsDirty<T>(settings: T, loading: boolean): UseSettingsDirtyReturn<T> {
   const { setIsDirty } = useUnsavedChanges();
-  const [originalSettingsSnapshot, setOriginalSettingsSnapshot] = useState<string>('');
+  const [originalSettingsSnapshot, setOriginalSettingsSnapshot] = useState<string>("");
   const [isDirty, setLocalIsDirty] = useState(false);
   const isInitialLoad = useRef(true);
   const justSavedRef = useRef(false);
@@ -60,7 +60,7 @@ export function useSettingsDirty<T>(settings: T, loading: boolean): UseSettingsD
       try {
         return JSON.parse(originalSettingsSnapshot) as T;
       } catch (e) {
-        console.error('Failed to parse original settings:', e);
+        console.error("Failed to parse original settings:", e);
         return settings;
       }
     }
diff --git a/frontend/src/core/hooks/useSharingEnabled.ts b/frontend/src/core/hooks/useSharingEnabled.ts
index 7a01b58ca6..d14537fbce 100644
--- a/frontend/src/core/hooks/useSharingEnabled.ts
+++ b/frontend/src/core/hooks/useSharingEnabled.ts
@@ -1,4 +1,4 @@
-import { useAppConfig } from '@app/contexts/AppConfigContext';
+import { useAppConfig } from "@app/contexts/AppConfigContext";
 
 export interface SharingEnabledResult {
   sharingEnabled: boolean;
diff --git a/frontend/src/core/hooks/useShouldShowWelcomeModal.ts b/frontend/src/core/hooks/useShouldShowWelcomeModal.ts
index 44685557f2..6a4e95e84d 100644
--- a/frontend/src/core/hooks/useShouldShowWelcomeModal.ts
+++ b/frontend/src/core/hooks/useShouldShowWelcomeModal.ts
@@ -1,12 +1,14 @@
-import { usePreferences } from '@app/contexts/PreferencesContext';
-import { useIsMobile } from '@app/hooks/useIsMobile';
+import { usePreferences } from "@app/contexts/PreferencesContext";
+import { useIsMobile } from "@app/hooks/useIsMobile";
 
 export function useShouldShowWelcomeModal(): boolean {
   const { preferences } = usePreferences();
   const isMobile = useIsMobile();
 
-  return preferences.hasSeenIntroOnboarding
-    && !preferences.hasCompletedOnboarding
-    && preferences.toolPanelModePromptSeen
-    && !isMobile;
+  return (
+    preferences.hasSeenIntroOnboarding &&
+    !preferences.hasCompletedOnboarding &&
+    preferences.toolPanelModePromptSeen &&
+    !isMobile
+  );
 }
diff --git a/frontend/src/core/hooks/useSidebarNavigation.ts b/frontend/src/core/hooks/useSidebarNavigation.ts
index 50065b6cf7..425fa30214 100644
--- a/frontend/src/core/hooks/useSidebarNavigation.ts
+++ b/frontend/src/core/hooks/useSidebarNavigation.ts
@@ -1,7 +1,7 @@
-import { useCallback } from 'react';
-import { useToolNavigation } from '@app/hooks/useToolNavigation';
-import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
-import { handleUnlessSpecialClick } from '@app/utils/clickHandlers';
+import { useCallback } from "react";
+import { useToolNavigation } from "@app/hooks/useToolNavigation";
+import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
+import { handleUnlessSpecialClick } from "@app/utils/clickHandlers";
 import { ToolId } from "@app/types/toolId";
 
 export interface SidebarNavigationProps {
@@ -29,24 +29,27 @@ export function useSidebarNavigation(): {
   }, []);
 
   const getHomeNavigation = useCallback((): SidebarNavigationProps => {
-    const href = '/'; // SSR-safe relative path
+    const href = "/"; // SSR-safe relative path
     return { href, onClick: defaultNavClick };
   }, [defaultNavClick]);
 
-  const getToolNavigation = useCallback((toolId: ToolId): SidebarNavigationProps | null => {
-    // Handle special nav sections that aren't tools
-    if (toolId === 'read') return { href: '/read', onClick: defaultNavClick };
-    if (toolId === 'automate') return { href: '/automate', onClick: defaultNavClick };
+  const getToolNavigation = useCallback(
+    (toolId: ToolId): SidebarNavigationProps | null => {
+      // Handle special nav sections that aren't tools
+      if (toolId === "read") return { href: "/read", onClick: defaultNavClick };
+      if (toolId === "automate") return { href: "/automate", onClick: defaultNavClick };
 
-    const tool = getSelectedTool(toolId);
-    if (!tool) return null;
+      const tool = getSelectedTool(toolId);
+      if (!tool) return null;
 
-    // Delegate to useToolNavigation for true tools
-    return getToolNavProps(toolId, tool);
-  }, [getToolNavProps, getSelectedTool, defaultNavClick]);
+      // Delegate to useToolNavigation for true tools
+      return getToolNavProps(toolId, tool);
+    },
+    [getToolNavProps, getSelectedTool, defaultNavClick],
+  );
 
   return {
     getHomeNavigation,
-    getToolNavigation
+    getToolNavigation,
   };
 }
diff --git a/frontend/src/core/hooks/useSuggestedTools.ts b/frontend/src/core/hooks/useSuggestedTools.ts
index 857108ed45..a89b73ee74 100644
--- a/frontend/src/core/hooks/useSuggestedTools.ts
+++ b/frontend/src/core/hooks/useSuggestedTools.ts
@@ -1,15 +1,15 @@
-import { useMemo } from 'react';
-import { useNavigationState } from '@app/contexts/NavigationContext';
-import { useToolNavigation } from '@app/hooks/useToolNavigation';
-import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
-import { ToolId } from '@app/types/toolId';
+import { useMemo } from "react";
+import { useNavigationState } from "@app/contexts/NavigationContext";
+import { useToolNavigation } from "@app/hooks/useToolNavigation";
+import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
+import { ToolId } from "@app/types/toolId";
 
 // Material UI Icons
-import CompressIcon from '@mui/icons-material/Compress';
-import SwapHorizIcon from '@mui/icons-material/SwapHoriz';
-import CleaningServicesIcon from '@mui/icons-material/CleaningServices';
-import CropIcon from '@mui/icons-material/Crop';
-import TextFieldsIcon from '@mui/icons-material/TextFields';
+import CompressIcon from "@mui/icons-material/Compress";
+import SwapHorizIcon from "@mui/icons-material/SwapHoriz";
+import CleaningServicesIcon from "@mui/icons-material/CleaningServices";
+import CropIcon from "@mui/icons-material/Crop";
+import TextFieldsIcon from "@mui/icons-material/TextFields";
 
 export interface SuggestedTool {
   id: ToolId;
@@ -19,32 +19,32 @@ export interface SuggestedTool {
   onClick: (e: React.MouseEvent) => void;
 }
 
-const ALL_SUGGESTED_TOOLS: Omit<SuggestedTool, 'href' | 'onClick'>[] = [
+const ALL_SUGGESTED_TOOLS: Omit<SuggestedTool, "href" | "onClick">[] = [
   {
-    id: 'compress',
-    title: 'Compress',
-    icon: CompressIcon
+    id: "compress",
+    title: "Compress",
+    icon: CompressIcon,
   },
   {
-    id: 'convert',
-    title: 'Convert',
-    icon: SwapHorizIcon
+    id: "convert",
+    title: "Convert",
+    icon: SwapHorizIcon,
   },
   {
-    id: 'sanitize',
-    title: 'Sanitize',
-    icon: CleaningServicesIcon
+    id: "sanitize",
+    title: "Sanitize",
+    icon: CleaningServicesIcon,
   },
   {
-    id: 'split',
-    title: 'Split',
-    icon: CropIcon
+    id: "split",
+    title: "Split",
+    icon: CropIcon,
   },
   {
-    id: 'ocr',
-    title: 'OCR',
-    icon: TextFieldsIcon
-  }
+    id: "ocr",
+    title: "OCR",
+    icon: TextFieldsIcon,
+  },
 ];
 
 export function useSuggestedTools(): SuggestedTool[] {
@@ -54,24 +54,26 @@ export function useSuggestedTools(): SuggestedTool[] {
 
   return useMemo(() => {
     // Filter out the current tool
-    const filteredTools = ALL_SUGGESTED_TOOLS.filter(tool => tool.id !== selectedTool);
+    const filteredTools = ALL_SUGGESTED_TOOLS.filter((tool) => tool.id !== selectedTool);
 
     // Add navigation props to each tool
-    return filteredTools.map(tool => {
+    return filteredTools.map((tool) => {
       const toolRegistryEntry = getSelectedTool(tool.id);
       if (!toolRegistryEntry) {
         // Fallback for tools not in registry
         return {
           ...tool,
           href: `/${tool.id}`,
-          onClick: (e: React.MouseEvent) => { e.preventDefault(); }
+          onClick: (e: React.MouseEvent) => {
+            e.preventDefault();
+          },
         };
       }
-      
+
       const navProps = getToolNavigation(tool.id, toolRegistryEntry);
       return {
         ...tool,
-        ...navProps
+        ...navProps,
       };
     });
   }, [selectedTool, getToolNavigation, getSelectedTool]);
diff --git a/frontend/src/core/hooks/useThumbnailGeneration.ts b/frontend/src/core/hooks/useThumbnailGeneration.ts
index a2b251786f..d825dd29de 100644
--- a/frontend/src/core/hooks/useThumbnailGeneration.ts
+++ b/frontend/src/core/hooks/useThumbnailGeneration.ts
@@ -1,7 +1,7 @@
-import { useCallback } from 'react';
-import { thumbnailGenerationService } from '@app/services/thumbnailGenerationService';
-import { createQuickKey } from '@app/types/fileContext';
-import { FileId } from '@app/types/file';
+import { useCallback } from "react";
+import { thumbnailGenerationService } from "@app/services/thumbnailGenerationService";
+import { createQuickKey } from "@app/types/fileContext";
+import { FileId } from "@app/types/file";
 
 // Request queue to handle concurrent thumbnail requests
 interface ThumbnailRequest {
@@ -70,7 +70,7 @@ async function processRequestQueue() {
         if (requests.length === 0) continue;
 
         try {
-          const pageNumbers = requests.map(req => req.pageNumber);
+          const pageNumbers = requests.map((req) => req.pageNumber);
 
           // Get or create cached ArrayBuffer to avoid reading file multiple times
           let arrayBuffer = fileArrayBufferCache.get(file);
@@ -89,12 +89,12 @@ async function processRequestQueue() {
             { scale: 1.0, quality: 0.8, batchSize: BATCH_SIZE },
             (_progress) => {
               // Optional: Could emit progress events here for UI feedback
-            }
+            },
           );
 
           // Match results back to requests and resolve
           for (const request of requests) {
-            const result = results.find(r => r.pageNumber === request.pageNumber);
+            const result = results.find((r) => r.pageNumber === request.pageNumber);
 
             if (result && result.success && result.thumbnail) {
               thumbnailGenerationService.addThumbnailToCache(request.pageId, result.thumbnail);
@@ -104,11 +104,10 @@ async function processRequestQueue() {
               request.resolve(null);
             }
           }
-
         } catch (error) {
           console.warn(`Batch thumbnail generation failed for ${requests.length} pages:`, error);
           // Reject all requests in this batch
-          requests.forEach(request => request.reject(error as Error));
+          requests.forEach((request) => request.reject(error as Error));
         }
       }
     }
@@ -126,26 +125,23 @@ async function processRequestQueue() {
  * Tools can choose whether to include visual features
  */
 export function useThumbnailGeneration() {
-  const generateThumbnails = useCallback(async (
-    fileId: FileId,
-    pdfArrayBuffer: ArrayBuffer,
-    pageNumbers: number[],
-    options: {
-      scale?: number;
-      quality?: number;
-      batchSize?: number;
-      parallelBatches?: number;
-    } = {},
-    onProgress?: (progress: { completed: number; total: number; thumbnails: any[] }) => void
-  ) => {
-    return thumbnailGenerationService.generateThumbnails(
-      fileId,
-      pdfArrayBuffer,
-      pageNumbers,
-      options,
-      onProgress
-    );
-  }, []);
+  const generateThumbnails = useCallback(
+    async (
+      fileId: FileId,
+      pdfArrayBuffer: ArrayBuffer,
+      pageNumbers: number[],
+      options: {
+        scale?: number;
+        quality?: number;
+        batchSize?: number;
+        parallelBatches?: number;
+      } = {},
+      onProgress?: (progress: { completed: number; total: number; thumbnails: any[] }) => void,
+    ) => {
+      return thumbnailGenerationService.generateThumbnails(fileId, pdfArrayBuffer, pageNumbers, options, onProgress);
+    },
+    [],
+  );
 
   const addThumbnailToCache = useCallback((pageId: string, thumbnail: string) => {
     thumbnailGenerationService.addThumbnailToCache(pageId, thumbnail);
@@ -185,11 +181,7 @@ export function useThumbnailGeneration() {
     thumbnailGenerationService.clearPDFCacheForFile(fileId);
   }, []);
 
-  const requestThumbnail = useCallback(async (
-    pageId: string,
-    file: File,
-    pageNumber: number
-  ): Promise<string | null> => {
+  const requestThumbnail = useCallback(async (pageId: string, file: File, pageNumber: number): Promise<string | null> => {
     // Check cache first for immediate return
     const cached = thumbnailGenerationService.getThumbnailFromCache(pageId);
     if (cached) {
@@ -215,7 +207,7 @@ export function useThumbnailGeneration() {
         reject: (error: Error) => {
           activeRequests.delete(pageId);
           reject(error);
-        }
+        },
       });
 
       // Schedule batch processing with a small delay to collect more requests
@@ -224,12 +216,12 @@ export function useThumbnailGeneration() {
       }
 
       // Use shorter delay for the first batch (pages 1-50) to show visible content faster
-      const isFirstBatch = requestQueue.length <= BATCH_SIZE && requestQueue.every(req => req.pageNumber <= BATCH_SIZE);
+      const isFirstBatch = requestQueue.length <= BATCH_SIZE && requestQueue.every((req) => req.pageNumber <= BATCH_SIZE);
       const delay = isFirstBatch ? PRIORITY_BATCH_DELAY : BATCH_DELAY;
 
       batchTimer = window.setTimeout(() => {
-        processRequestQueue().catch(error => {
-          console.error('Error processing thumbnail request queue:', error);
+        processRequestQueue().catch((error) => {
+          console.error("Error processing thumbnail request queue:", error);
         });
         batchTimer = null;
       }, delay);
@@ -249,6 +241,6 @@ export function useThumbnailGeneration() {
     stopGeneration,
     destroyThumbnails,
     clearPDFCacheForFile,
-    requestThumbnail
+    requestThumbnail,
   };
 }
diff --git a/frontend/src/core/hooks/useToolManagement.tsx b/frontend/src/core/hooks/useToolManagement.tsx
index 8a05e1b454..7b24ae7032 100644
--- a/frontend/src/core/hooks/useToolManagement.tsx
+++ b/frontend/src/core/hooks/useToolManagement.tsx
@@ -1,15 +1,15 @@
-import { useState, useCallback, useMemo } from 'react';
+import { useState, useCallback, useMemo } from "react";
 import { useToolRegistry } from "@app/contexts/ToolRegistryContext";
-import { usePreferences } from '@app/contexts/PreferencesContext';
+import { usePreferences } from "@app/contexts/PreferencesContext";
 import { getAllEndpoints, type ToolRegistryEntry, type ToolRegistry } from "@app/data/toolsTaxonomy";
 import { useMultipleEndpointsEnabled } from "@app/hooks/useEndpointConfig";
 import { useSelfHostedToolAvailability } from "@app/hooks/useSelfHostedToolAvailability";
 import { useSaaSMode } from "@app/hooks/useSaaSMode";
-import { FileId } from '@app/types/file';
+import { FileId } from "@app/types/file";
 import { ToolId } from "@app/types/toolId";
-import type { EndpointDisableReason } from '@app/types/endpointAvailability';
+import type { EndpointDisableReason } from "@app/types/endpointAvailability";
 
-export type ToolDisableCause = 'disabledByAdmin' | 'missingDependency' | 'unknown' | 'selfHostedOffline';
+export type ToolDisableCause = "disabledByAdmin" | "missingDependency" | "unknown" | "selfHostedOffline";
 
 export interface ToolAvailabilityInfo {
   available: boolean;
@@ -39,70 +39,77 @@ export const useToolManagement = (): ToolManagementResult => {
   const { endpointStatus, endpointDetails, loading: endpointsLoading } = useMultipleEndpointsEnabled(allEndpoints);
 
   const toolEndpointList = useMemo(
-    () => (Object.keys(baseRegistry) as ToolId[])
-      // Exclude coming-soon tools (no component and no link) — they are already
-      // unavailable regardless of server state and should not appear in the
-      // self-hosted offline banner.
-      .filter(id => {
-        const tool = baseRegistry[id];
-        return !!(tool?.component ?? tool?.link);
-      })
-      .map(id => ({
-        id,
-        endpoints: baseRegistry[id]?.endpoints ?? [],
-      })),
-    [baseRegistry]
+    () =>
+      (Object.keys(baseRegistry) as ToolId[])
+        // Exclude coming-soon tools (no component and no link) — they are already
+        // unavailable regardless of server state and should not appear in the
+        // self-hosted offline banner.
+        .filter((id) => {
+          const tool = baseRegistry[id];
+          return !!(tool?.component ?? tool?.link);
+        })
+        .map((id) => ({
+          id,
+          endpoints: baseRegistry[id]?.endpoints ?? [],
+        })),
+    [baseRegistry],
   );
   const selfHostedOfflineIds = useSelfHostedToolAvailability(toolEndpointList);
 
-  const isToolAvailable = useCallback((toolKey: string): boolean => {
-    // Self-hosted offline check must come before the loading gate:
-    // in self-hosted offline mode endpointsLoading stays true indefinitely
-    // (health check never resolves), so checking it first would wrongly
-    // keep all tools enabled.
-    if (selfHostedOfflineIds.has(toolKey)) return false;
+  const isToolAvailable = useCallback(
+    (toolKey: string): boolean => {
+      // Self-hosted offline check must come before the loading gate:
+      // in self-hosted offline mode endpointsLoading stays true indefinitely
+      // (health check never resolves), so checking it first would wrongly
+      // keep all tools enabled.
+      if (selfHostedOfflineIds.has(toolKey)) return false;
 
-    // Keep tools enabled while endpoint status is loading (optimistic UX)
-    if (endpointsLoading) return true;
+      // Keep tools enabled while endpoint status is loading (optimistic UX)
+      if (endpointsLoading) return true;
 
-    const tool = baseRegistry[toolKey as ToolId];
-    const endpoints = tool?.endpoints || [];
+      const tool = baseRegistry[toolKey as ToolId];
+      const endpoints = tool?.endpoints || [];
 
-    if (endpoints.length === 0) return true;
+      if (endpoints.length === 0) return true;
 
-    const hasLocalSupport = endpoints.some((endpoint: string) => endpointStatus[endpoint] !== false);
+      const hasLocalSupport = endpoints.some((endpoint: string) => endpointStatus[endpoint] !== false);
 
-    // In SaaS mode tools without local support can route to the cloud backend
-    if (!hasLocalSupport && isSaaSMode) return true;
+      // In SaaS mode tools without local support can route to the cloud backend
+      if (!hasLocalSupport && isSaaSMode) return true;
 
-    return hasLocalSupport;
-  }, [endpointsLoading, endpointStatus, baseRegistry, isSaaSMode, selfHostedOfflineIds]);
+      return hasLocalSupport;
+    },
+    [endpointsLoading, endpointStatus, baseRegistry, isSaaSMode, selfHostedOfflineIds],
+  );
 
-  const deriveToolDisableReason = useCallback((toolKey: ToolId): ToolDisableCause => {
-    if (selfHostedOfflineIds.has(toolKey)) {
-      return 'selfHostedOffline';
-    }
+  const deriveToolDisableReason = useCallback(
+    (toolKey: ToolId): ToolDisableCause => {
+      if (selfHostedOfflineIds.has(toolKey)) {
+        return "selfHostedOffline";
+      }
 
-    const tool = baseRegistry[toolKey];
-    if (!tool) {
-      return 'unknown';
-    }
-    const endpoints = tool.endpoints || [];
-    const disabledReasons: EndpointDisableReason[] = endpoints
-      .filter(endpoint => endpointStatus[endpoint] === false)
-      .map(endpoint => endpointDetails[endpoint]?.reason ?? 'CONFIG');
+      const tool = baseRegistry[toolKey];
+      if (!tool) {
+        return "unknown";
+      }
+      const endpoints = tool.endpoints || [];
+      const disabledReasons: EndpointDisableReason[] = endpoints
+        .filter((endpoint) => endpointStatus[endpoint] === false)
+        .map((endpoint) => endpointDetails[endpoint]?.reason ?? "CONFIG");
 
-    if (disabledReasons.some(reason => reason === 'DEPENDENCY')) {
-      return 'missingDependency';
-    }
-    if (disabledReasons.some(reason => reason === 'CONFIG')) {
-      return 'disabledByAdmin';
-    }
-    if (disabledReasons.length > 0) {
-      return 'unknown';
-    }
-    return 'unknown';
-  }, [baseRegistry, endpointDetails, endpointStatus, selfHostedOfflineIds]);
+      if (disabledReasons.some((reason) => reason === "DEPENDENCY")) {
+        return "missingDependency";
+      }
+      if (disabledReasons.some((reason) => reason === "CONFIG")) {
+        return "disabledByAdmin";
+      }
+      if (disabledReasons.length > 0) {
+        return "unknown";
+      }
+      return "unknown";
+    },
+    [baseRegistry, endpointDetails, endpointStatus, selfHostedOfflineIds],
+  );
 
   const toolAvailability = useMemo(() => {
     // Skip computation during loading UNLESS some tools are already known offline.
@@ -112,25 +119,23 @@ export const useToolManagement = (): ToolManagementResult => {
       return {};
     }
     const availability: ToolAvailabilityMap = {};
-    (Object.keys(baseRegistry) as ToolId[]).forEach(toolKey => {
+    (Object.keys(baseRegistry) as ToolId[]).forEach((toolKey) => {
       const available = isToolAvailable(toolKey);
-      availability[toolKey] = available
-        ? { available: true }
-        : { available: false, reason: deriveToolDisableReason(toolKey) };
+      availability[toolKey] = available ? { available: true } : { available: false, reason: deriveToolDisableReason(toolKey) };
     });
     return availability;
   }, [baseRegistry, deriveToolDisableReason, endpointsLoading, isToolAvailable, selfHostedOfflineIds]);
 
   const toolRegistry: Partial<ToolRegistry> = useMemo(() => {
     const availableToolRegistry: Partial<ToolRegistry> = {};
-    (Object.keys(baseRegistry) as ToolId[]).forEach(toolKey => {
+    (Object.keys(baseRegistry) as ToolId[]).forEach((toolKey) => {
       const baseTool = baseRegistry[toolKey];
       if (!baseTool) return;
       const availabilityInfo = toolAvailability[toolKey];
       const isAvailable = availabilityInfo ? availabilityInfo.available !== false : true;
 
       // Check if tool is "coming soon" (has no component and no link)
-      const isComingSoon = !baseTool.component && !baseTool.link && toolKey !== 'read' && toolKey !== 'multiTool';
+      const isComingSoon = !baseTool.component && !baseTool.link && toolKey !== "read" && toolKey !== "multiTool";
 
       if (preferences.hideUnavailableTools && (!isAvailable || isComingSoon)) {
         return;
@@ -144,9 +149,12 @@ export const useToolManagement = (): ToolManagementResult => {
     return availableToolRegistry;
   }, [baseRegistry, preferences.hideUnavailableTools, toolAvailability]);
 
-  const getSelectedTool = useCallback((toolKey: ToolId | null): ToolRegistryEntry | null => {
-    return toolKey ? toolRegistry[toolKey] || null : null;
-  }, [toolRegistry]);
+  const getSelectedTool = useCallback(
+    (toolKey: ToolId | null): ToolRegistryEntry | null => {
+      return toolKey ? toolRegistry[toolKey] || null : null;
+    },
+    [toolRegistry],
+  );
 
   return {
     selectedTool: getSelectedTool(null),
diff --git a/frontend/src/core/hooks/useToolNavigation.ts b/frontend/src/core/hooks/useToolNavigation.ts
index 7b0c055a28..6e2a62d85b 100644
--- a/frontend/src/core/hooks/useToolNavigation.ts
+++ b/frontend/src/core/hooks/useToolNavigation.ts
@@ -1,8 +1,8 @@
-import { useCallback } from 'react';
-import { ToolRegistryEntry, getToolUrlPath } from '@app/data/toolsTaxonomy';
-import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
-import { handleUnlessSpecialClick } from '@app/utils/clickHandlers';
-import { ToolId } from '@app/types/toolId';
+import { useCallback } from "react";
+import { ToolRegistryEntry, getToolUrlPath } from "@app/data/toolsTaxonomy";
+import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
+import { handleUnlessSpecialClick } from "@app/utils/clickHandlers";
+import { ToolId } from "@app/types/toolId";
 
 export interface ToolNavigationProps {
   /** Full URL for the tool (for href attribute) */
@@ -20,27 +20,30 @@ export function useToolNavigation(): {
 } {
   const { handleToolSelect } = useToolWorkflow();
 
-  const getToolNavigation = useCallback((toolId: string, tool: ToolRegistryEntry): ToolNavigationProps => {
-    // Generate SSR-safe relative path
-    const path = getToolUrlPath(toolId);
-    const href = path; // Relative path, no window.location needed
+  const getToolNavigation = useCallback(
+    (toolId: string, tool: ToolRegistryEntry): ToolNavigationProps => {
+      // Generate SSR-safe relative path
+      const path = getToolUrlPath(toolId);
+      const href = path; // Relative path, no window.location needed
 
-    // Click handler that maintains SPA behavior
-    const onClick = (e: React.MouseEvent) => {
-      handleUnlessSpecialClick(e, () => {
-        // Handle external links normally
-        if (tool.link) {
-          window.open(tool.link, '_blank', 'noopener,noreferrer');
-          return;
-        }
+      // Click handler that maintains SPA behavior
+      const onClick = (e: React.MouseEvent) => {
+        handleUnlessSpecialClick(e, () => {
+          // Handle external links normally
+          if (tool.link) {
+            window.open(tool.link, "_blank", "noopener,noreferrer");
+            return;
+          }
 
-        // Use SPA navigation for internal tools
-        handleToolSelect(toolId as ToolId);
-      });
-    };
+          // Use SPA navigation for internal tools
+          handleToolSelect(toolId as ToolId);
+        });
+      };
 
-    return { href, onClick };
-  }, [handleToolSelect]);
+      return { href, onClick };
+    },
+    [handleToolSelect],
+  );
 
   return { getToolNavigation };
 }
diff --git a/frontend/src/core/hooks/useToolParameters.ts b/frontend/src/core/hooks/useToolParameters.ts
index 1afd66835b..3e38fa6db0 100644
--- a/frontend/src/core/hooks/useToolParameters.ts
+++ b/frontend/src/core/hooks/useToolParameters.ts
@@ -2,7 +2,7 @@
  * React hooks for tool parameter management (URL logic removed)
  */
 
-import { useCallback, useMemo } from 'react';
+import { useCallback, useMemo } from "react";
 
 type ToolParameterValues = Record<string, any>;
 
@@ -11,9 +11,8 @@ type ToolParameterValues = Record<string, any>;
  */
 export function useToolParameters(
   _toolName: string,
-  _parameters: Record<string, any>
+  _parameters: Record<string, any>,
 ): [ToolParameterValues, (updates: Partial<ToolParameterValues>) => void] {
-
   // Return empty values and noop updater
   const currentValues = useMemo(() => ({}), []);
   const updateParameters = useCallback(() => {}, []);
@@ -24,18 +23,17 @@ export function useToolParameters(
 /**
  * Hook for managing a single tool parameter
  */
-export function useToolParameter<T = any>(
-  toolName: string,
-  paramName: string,
-  definition: any
-): [T, (value: T) => void] {
+export function useToolParameter<T = any>(toolName: string, paramName: string, definition: any): [T, (value: T) => void] {
   const [allParams, updateParams] = useToolParameters(toolName, { [paramName]: definition });
 
   const value = allParams[paramName] as T;
 
-  const setValue = useCallback((newValue: T) => {
-    updateParams({ [paramName]: newValue });
-  }, [paramName, updateParams]);
+  const setValue = useCallback(
+    (newValue: T) => {
+      updateParams({ [paramName]: newValue });
+    },
+    [paramName, updateParams],
+  );
 
   return [value, setValue];
 }
diff --git a/frontend/src/core/hooks/useToolSections.ts b/frontend/src/core/hooks/useToolSections.ts
index a94e4c4748..7c3455c5a8 100644
--- a/frontend/src/core/hooks/useToolSections.ts
+++ b/frontend/src/core/hooks/useToolSections.ts
@@ -1,12 +1,12 @@
-import { useMemo } from 'react';
+import { useMemo } from "react";
 
-import { SUBCATEGORY_ORDER, SubcategoryId, ToolCategoryId, ToolRegistryEntry } from '@app/data/toolsTaxonomy';
-import { useTranslation } from 'react-i18next';
+import { SUBCATEGORY_ORDER, SubcategoryId, ToolCategoryId, ToolRegistryEntry } from "@app/data/toolsTaxonomy";
+import { useTranslation } from "react-i18next";
 import { ToolId } from "@app/types/toolId";
 
 type SubcategoryIdMap = {
   [subcategoryId in SubcategoryId]: Array<{ id: ToolId; tool: ToolRegistryEntry }>;
-}
+};
 
 type GroupedTools = {
   [categoryId in ToolCategoryId]: SubcategoryIdMap;
@@ -18,19 +18,19 @@ export interface SubcategoryGroup {
     id: ToolId;
     tool: ToolRegistryEntry;
   }[];
-};
+}
 
-export type ToolSectionKey = 'quick' | 'all';
+export type ToolSectionKey = "quick" | "all";
 
 export interface ToolSection {
   key: ToolSectionKey;
   title: string;
   subcategories: SubcategoryGroup[];
-};
+}
 
 export function useToolSections(
   filteredTools: Array<{ item: [ToolId, ToolRegistryEntry]; matchedText?: string }>,
-  searchQuery?: string
+  searchQuery?: string,
 ) {
   const { t } = useTranslation();
 
@@ -78,8 +78,8 @@ export function useToolSections(
           if (!quick[subcategoryId]) quick[subcategoryId] = [];
           // Only include ready tools (have a component or external link) in Quick Access
           // Special case: read and multiTool are navigational tools that don't need components
-          const readyTools = tools.filter(({ tool, id }) =>
-            tool.component !== null || !!tool.link || id === 'read' || id === 'multiTool'
+          const readyTools = tools.filter(
+            ({ tool, id }) => tool.component !== null || !!tool.link || id === "read" || id === "multiTool",
           );
           quick[subcategoryId].push(...readyTools);
         });
@@ -96,14 +96,14 @@ export function useToolSections(
           if (ai !== bi) return ai - bi;
           return aId.localeCompare(bId);
         })
-        .map(([subcategoryId, tools]) => ({ subcategoryId, tools } as SubcategoryGroup));
+        .map(([subcategoryId, tools]) => ({ subcategoryId, tools }) as SubcategoryGroup);
 
     const built: ToolSection[] = [
-      { key: 'quick', title: t('toolPicker.quickAccess', 'QUICK ACCESS'), subcategories: sortSubs(quick) },
-      { key: 'all', title: t('toolPicker.allTools', 'ALL TOOLS'), subcategories: sortSubs(all) }
+      { key: "quick", title: t("toolPicker.quickAccess", "QUICK ACCESS"), subcategories: sortSubs(quick) },
+      { key: "all", title: t("toolPicker.allTools", "ALL TOOLS"), subcategories: sortSubs(all) },
     ];
 
-    return built.filter(section => section.subcategories.some(sc => sc.tools.length > 0));
+    return built.filter((section) => section.subcategories.some((sc) => sc.tools.length > 0));
   }, [groupedTools]);
 
   const searchGroups: SubcategoryGroup[] = useMemo(() => {
@@ -138,16 +138,14 @@ export function useToolSections(
           if (ai !== bi) return ai - bi;
           return (a as SubcategoryId).localeCompare(b as SubcategoryId);
         })
-        .map(([subcategoryId, tools]) => ({ subcategoryId, tools } as SubcategoryGroup));
+        .map(([subcategoryId, tools]) => ({ subcategoryId, tools }) as SubcategoryGroup);
     }
 
     // No search: alphabetical subcategory ordering
     return entries
       .sort(([a], [b]) => a.localeCompare(b))
-      .map(([subcategoryId, tools]) => ({ subcategoryId, tools } as SubcategoryGroup));
+      .map(([subcategoryId, tools]) => ({ subcategoryId, tools }) as SubcategoryGroup);
   }, [filteredTools, searchQuery]);
 
   return { sections, searchGroups };
 }
-
-
diff --git a/frontend/src/core/hooks/useTooltipPosition.ts b/frontend/src/core/hooks/useTooltipPosition.ts
index 506ce562b0..97869241ab 100644
--- a/frontend/src/core/hooks/useTooltipPosition.ts
+++ b/frontend/src/core/hooks/useTooltipPosition.ts
@@ -1,9 +1,9 @@
-import { useState, useEffect } from 'react';
-import { clamp } from '@app/utils/genericUtils';
-import { getSidebarInfo } from '@app/utils/sidebarUtils';
-import { SidebarRefs, SidebarState } from '@app/types/sidebar';
+import { useState, useEffect } from "react";
+import { clamp } from "@app/utils/genericUtils";
+import { getSidebarInfo } from "@app/utils/sidebarUtils";
+import { SidebarRefs, SidebarState } from "@app/types/sidebar";
 
-type Position = 'right' | 'left' | 'top' | 'bottom';
+type Position = "right" | "left" | "top" | "bottom";
 
 interface PlacementResult {
   top: number;
@@ -15,29 +15,24 @@ interface PositionState {
   positionReady: boolean;
 }
 
-function place(
-  triggerRect: DOMRect,
-  tooltipRect: DOMRect,
-  position: Position,
-  offset: number
-): PlacementResult {
+function place(triggerRect: DOMRect, tooltipRect: DOMRect, position: Position, offset: number): PlacementResult {
   let top = 0;
   let left = 0;
 
   switch (position) {
-    case 'right':
+    case "right":
       top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
       left = triggerRect.right + offset;
       break;
-    case 'left':
+    case "left":
       top = triggerRect.top + triggerRect.height / 2 - tooltipRect.height / 2;
       left = triggerRect.left - tooltipRect.width - offset;
       break;
-    case 'top':
+    case "top":
       top = triggerRect.top - tooltipRect.height - offset;
       left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
       break;
-    case 'bottom':
+    case "bottom":
       top = triggerRect.bottom + offset;
       left = triggerRect.left + triggerRect.width / 2 - tooltipRect.width / 2;
       break;
@@ -54,7 +49,7 @@ export function useTooltipPosition({
   triggerRef,
   tooltipRef,
   sidebarRefs,
-  sidebarState
+  sidebarState,
 }: {
   open: boolean;
   sidebarTooltip: boolean;
@@ -68,13 +63,13 @@ export function useTooltipPosition({
   const [coords, setCoords] = useState<{ top: number; left: number; arrowOffset: number | null }>({
     top: 0,
     left: 0,
-    arrowOffset: null
+    arrowOffset: null,
   });
   const [positionReady, setPositionReady] = useState(false);
 
   // Fallback sidebar position (only used as last resort)
   const sidebarLeft = 240;
-  const isRTL = typeof document !== 'undefined' && document.documentElement.dir === 'rtl';
+  const isRTL = typeof document !== "undefined" && document.documentElement.dir === "rtl";
 
   const updatePosition = () => {
     if (!triggerRef.current || !open) return;
@@ -88,7 +83,7 @@ export function useTooltipPosition({
     if (sidebarTooltip) {
       // Require sidebar refs and state for proper positioning
       if (!sidebarRefs || !sidebarState) {
-        console.warn('Sidebar tooltip requires sidebarRefs and sidebarState props');
+        console.warn("Sidebar tooltip requires sidebarRefs and sidebarState props");
         setPositionReady(false);
         return;
       }
@@ -102,7 +97,7 @@ export function useTooltipPosition({
 
       // Only show tooltip if we have the tool panel active
       if (!sidebarInfo.isToolPanelActive) {
-        console.log('Not showing tooltip - tool panel not active');
+        console.log("Not showing tooltip - tool panel not active");
         setPositionReady(false);
         return;
       }
@@ -145,7 +140,7 @@ export function useTooltipPosition({
       left = clamp(left, 4, window.innerWidth - tooltipRect.width - 4);
 
       // Calculate arrow position to stay aligned with trigger
-      if (position === 'top' || position === 'bottom') {
+      if (position === "top" || position === "bottom") {
         // For top/bottom arrows, adjust horizontal position
         const triggerCenter = triggerRect.left + triggerRect.width / 2;
         const tooltipCenter = left + tooltipRect.width / 2;
@@ -174,12 +169,12 @@ export function useTooltipPosition({
     requestAnimationFrame(updatePosition);
 
     const handleUpdate = () => requestAnimationFrame(updatePosition);
-    window.addEventListener('scroll', handleUpdate, true);
-    window.addEventListener('resize', handleUpdate);
+    window.addEventListener("scroll", handleUpdate, true);
+    window.addEventListener("resize", handleUpdate);
 
     return () => {
-      window.removeEventListener('scroll', handleUpdate, true);
-      window.removeEventListener('resize', handleUpdate);
+      window.removeEventListener("scroll", handleUpdate, true);
+      window.removeEventListener("resize", handleUpdate);
     };
   }, [open, sidebarLeft, position, gap, sidebarTooltip]);
 
diff --git a/frontend/src/core/hooks/useTranslation.ts b/frontend/src/core/hooks/useTranslation.ts
index 97a7aa032d..6da312c3d6 100644
--- a/frontend/src/core/hooks/useTranslation.ts
+++ b/frontend/src/core/hooks/useTranslation.ts
@@ -1,20 +1,20 @@
 // Re-export react-i18next hook with our custom types
-export { useTranslation } from 'react-i18next';
+export { useTranslation } from "react-i18next";
 
 // You can add custom hooks here later if needed
 // For example, a hook that returns commonly used translations
-import { useTranslation as useI18nTranslation } from 'react-i18next';
+import { useTranslation as useI18nTranslation } from "react-i18next";
 
 export const useCommonTranslations = () => {
   const { t } = useI18nTranslation();
-  
+
   return {
-    submit: t('genericSubmit'),
-    selectPdf: t('pdfPrompt'),
-    selectPdfs: t('multiPdfPrompt'),
-    selectImages: t('imgPrompt'),
-    loading: t('loading', 'Loading...'), // fallback if not found
-    error: t('error._value', 'Error'), 
-    success: t('success', 'Success'),
+    submit: t("genericSubmit"),
+    selectPdf: t("pdfPrompt"),
+    selectPdfs: t("multiPdfPrompt"),
+    selectImages: t("imgPrompt"),
+    loading: t("loading", "Loading..."), // fallback if not found
+    error: t("error._value", "Error"),
+    success: t("success", "Success"),
   };
-};
\ No newline at end of file
+};
diff --git a/frontend/src/core/hooks/useUndoRedo.ts b/frontend/src/core/hooks/useUndoRedo.ts
index 6ce914a89f..5241f58891 100644
--- a/frontend/src/core/hooks/useUndoRedo.ts
+++ b/frontend/src/core/hooks/useUndoRedo.ts
@@ -1,4 +1,4 @@
-import { useState, useCallback } from 'react';
+import { useState, useCallback } from "react";
 
 export interface Command {
   execute(): void;
@@ -19,7 +19,7 @@ export function useUndoRedo() {
 
   const executeCommand = useCallback((command: Command | CommandSequence) => {
     command.execute();
-    setUndoStack(prev => [command, ...prev]);
+    setUndoStack((prev) => [command, ...prev]);
     setRedoStack([]); // Clear redo stack when new command is executed
   }, []);
 
@@ -28,10 +28,10 @@ export function useUndoRedo() {
 
     const command = undoStack[0];
     command.undo();
-    
-    setUndoStack(prev => prev.slice(1));
-    setRedoStack(prev => [command, ...prev]);
-    
+
+    setUndoStack((prev) => prev.slice(1));
+    setRedoStack((prev) => [command, ...prev]);
+
     return true;
   }, [undoStack]);
 
@@ -40,10 +40,10 @@ export function useUndoRedo() {
 
     const command = redoStack[0];
     command.execute();
-    
-    setRedoStack(prev => prev.slice(1));
-    setUndoStack(prev => [command, ...prev]);
-    
+
+    setRedoStack((prev) => prev.slice(1));
+    setUndoStack((prev) => [command, ...prev]);
+
     return true;
   }, [redoStack]);
 
@@ -63,6 +63,6 @@ export function useUndoRedo() {
     canUndo,
     canRedo,
     undoStack,
-    redoStack
+    redoStack,
   };
-}
\ No newline at end of file
+}
diff --git a/frontend/src/core/hooks/useUrlSync.ts b/frontend/src/core/hooks/useUrlSync.ts
index 6c9ff903de..92739ba99f 100644
--- a/frontend/src/core/hooks/useUrlSync.ts
+++ b/frontend/src/core/hooks/useUrlSync.ts
@@ -2,13 +2,13 @@
  * URL synchronization hooks for tool routing with registry support
  */
 
-import { useEffect, useCallback, useRef } from 'react';
-import { ToolId } from '@app/types/toolId';
-import { parseToolRoute, updateToolRoute, clearToolRoute } from '@app/utils/urlRouting';
-import { ToolRegistry } from '@app/data/toolsTaxonomy';
-import { firePixel } from '@app/utils/scarfTracking';
-import { withBasePath } from '@app/constants/app';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
+import { useEffect, useCallback, useRef } from "react";
+import { ToolId } from "@app/types/toolId";
+import { parseToolRoute, updateToolRoute, clearToolRoute } from "@app/utils/urlRouting";
+import { ToolRegistry } from "@app/data/toolsTaxonomy";
+import { firePixel } from "@app/utils/scarfTracking";
+import { withBasePath } from "@app/constants/app";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
 
 /**
  * Hook to sync workbench and tool with URL using registry
@@ -18,28 +18,31 @@ export function useNavigationUrlSync(
   handleToolSelect: (toolId: ToolId) => void,
   clearToolSelection: () => void,
   registry: ToolRegistry,
-  enableSync: boolean = true
+  enableSync: boolean = true,
 ) {
   const { config } = useAppConfig();
   const premiumEnabled = config?.premiumEnabled;
   const hasInitialized = useRef(false);
   const prevSelectedTool = useRef<ToolId | null>(null);
-  
+
   // Check if tool requires premium and redirect if needed
-  const checkPremiumAndSelect = useCallback((toolId: ToolId) => {
-    const tool = registry[toolId];
-    if (tool?.requiresPremium === true && premiumEnabled !== true) {
-      // Premium tool accessed without premium - redirect to home
-      const homePath = withBasePath('/');
-      if (window.location.pathname !== homePath) {
-        clearToolRoute(true); // Use replaceState to avoid adding to history
-        window.location.href = homePath;
+  const checkPremiumAndSelect = useCallback(
+    (toolId: ToolId) => {
+      const tool = registry[toolId];
+      if (tool?.requiresPremium === true && premiumEnabled !== true) {
+        // Premium tool accessed without premium - redirect to home
+        const homePath = withBasePath("/");
+        if (window.location.pathname !== homePath) {
+          clearToolRoute(true); // Use replaceState to avoid adding to history
+          window.location.href = homePath;
+        }
+        return;
       }
-      return;
-    }
-    handleToolSelect(toolId);
-  }, [registry, premiumEnabled, handleToolSelect]);
-  
+      handleToolSelect(toolId);
+    },
+    [registry, premiumEnabled, handleToolSelect],
+  );
+
   // Initialize workbench and tool from URL on mount
   useEffect(() => {
     if (!enableSync) return;
@@ -75,7 +78,7 @@ export function useNavigationUrlSync(
     } else if (prevSelectedTool.current !== null) {
       // Only clear URL if we had a tool before (user navigated away)
       // Don't clear on initial load when both current and previous are null
-      const homePath = withBasePath('/');
+      const homePath = withBasePath("/");
       if (window.location.pathname !== homePath) {
         clearToolRoute(false); // Use pushState for user navigation
       }
@@ -103,8 +106,8 @@ export function useNavigationUrlSync(
       }
     };
 
-    window.addEventListener('popstate', handlePopState);
-    return () => window.removeEventListener('popstate', handlePopState);
+    window.addEventListener("popstate", handlePopState);
+    return () => window.removeEventListener("popstate", handlePopState);
   }, [selectedTool, handleToolSelect, clearToolSelection, registry, enableSync, checkPremiumAndSelect]);
 }
 
@@ -112,27 +115,34 @@ export function useNavigationUrlSync(
  * Hook to programmatically navigate to tools with registry support
  */
 export function useToolNavigation(registry: ToolRegistry) {
-  const navigateToTool = useCallback((toolId: ToolId) => {
-    updateToolRoute(toolId, registry);
+  const navigateToTool = useCallback(
+    (toolId: ToolId) => {
+      updateToolRoute(toolId, registry);
 
-    // Dispatch a custom event to notify other components
-    window.dispatchEvent(new CustomEvent('toolNavigation', {
-      detail: { toolId }
-    }));
-  }, [registry]);
+      // Dispatch a custom event to notify other components
+      window.dispatchEvent(
+        new CustomEvent("toolNavigation", {
+          detail: { toolId },
+        }),
+      );
+    },
+    [registry],
+  );
 
   const navigateToHome = useCallback(() => {
     clearToolRoute();
 
     // Dispatch a custom event to notify other components
-    window.dispatchEvent(new CustomEvent('toolNavigation', {
-      detail: { toolId: null }
-    }));
+    window.dispatchEvent(
+      new CustomEvent("toolNavigation", {
+        detail: { toolId: null },
+      }),
+    );
   }, []);
 
   return {
     navigateToTool,
-    navigateToHome
+    navigateToHome,
   };
 }
 
diff --git a/frontend/src/core/hooks/useViewerKeyCommand.ts b/frontend/src/core/hooks/useViewerKeyCommand.ts
index d01546b679..de1b8ab371 100644
--- a/frontend/src/core/hooks/useViewerKeyCommand.ts
+++ b/frontend/src/core/hooks/useViewerKeyCommand.ts
@@ -1,4 +1,4 @@
 // Default implementation for non-desktop environments (overridden in desktop)
 export function useViewerKeyCommand(): (event: KeyboardEvent) => boolean {
-    return () => false;
-}
\ No newline at end of file
+  return () => false;
+}
diff --git a/frontend/src/core/hooks/useWheelZoom.ts b/frontend/src/core/hooks/useWheelZoom.ts
index 66dd2e2941..f43a0419c2 100644
--- a/frontend/src/core/hooks/useWheelZoom.ts
+++ b/frontend/src/core/hooks/useWheelZoom.ts
@@ -1,4 +1,4 @@
-import { RefObject, useEffect } from 'react';
+import { RefObject, useEffect } from "react";
 
 interface UseWheelZoomOptions {
   /**
@@ -75,9 +75,9 @@ export function useWheelZoom({
       }
     };
 
-    element.addEventListener('wheel', handleWheel, { passive: false });
+    element.addEventListener("wheel", handleWheel, { passive: false });
     return () => {
-      element.removeEventListener('wheel', handleWheel);
+      element.removeEventListener("wheel", handleWheel);
     };
   }, [ref, onZoomIn, onZoomOut, enabled, threshold, requireModifierKey]);
 }
diff --git a/frontend/src/core/hooks/useZipConfirmation.ts b/frontend/src/core/hooks/useZipConfirmation.ts
index e23a2ce80d..721b89b2c1 100644
--- a/frontend/src/core/hooks/useZipConfirmation.ts
+++ b/frontend/src/core/hooks/useZipConfirmation.ts
@@ -1,4 +1,4 @@
-import { useState, useCallback, useRef } from 'react';
+import { useState, useCallback, useRef } from "react";
 
 interface ZipConfirmationState {
   opened: boolean;
@@ -15,7 +15,7 @@ export const useZipConfirmation = () => {
   const [confirmationState, setConfirmationState] = useState<ZipConfirmationState>({
     opened: false,
     fileCount: 0,
-    fileName: '',
+    fileName: "",
   });
 
   // Store resolve function in ref to avoid callback recreation
@@ -47,7 +47,7 @@ export const useZipConfirmation = () => {
     setConfirmationState({
       opened: false,
       fileCount: 0,
-      fileName: '',
+      fileName: "",
     });
   }, []); // No dependencies - uses ref
 
@@ -62,7 +62,7 @@ export const useZipConfirmation = () => {
     setConfirmationState({
       opened: false,
       fileCount: 0,
-      fileName: '',
+      fileName: "",
     });
   }, []); // No dependencies - uses ref
 
diff --git a/frontend/src/core/i18n.ts b/frontend/src/core/i18n.ts
index 71239586ed..384ef4a6fd 100644
--- a/frontend/src/core/i18n.ts
+++ b/frontend/src/core/i18n.ts
@@ -1,59 +1,59 @@
-import i18n from 'i18next';
-import { initReactI18next } from 'react-i18next';
-import LanguageDetector from 'i18next-browser-languagedetector';
-import TomlBackend from '@app/i18n/tomlBackend';
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import TomlBackend from "@app/i18n/tomlBackend";
 
 // Define supported languages (based on your existing translations)
 export const supportedLanguages = {
-  'en-GB': 'English',
-  'ar-AR': 'العربية',
-  'az-AZ': 'Azərbaycan Dili',
-  'bg-BG': 'Български',
-  'ca-CA': 'Català',
-  'cs-CZ': 'Česky',
-  'da-DK': 'Dansk',
-  'de-DE': 'Deutsch',
-  'el-GR': 'Ελληνικά',
-  'es-ES': 'Español',
-  'eu-ES': 'Euskara',
-  'fa-IR': 'فارسی',
-  'fr-FR': 'Français',
-  'ga-IE': 'Gaeilge',
-  'hi-IN': 'हिंदी',
-  'hr-HR': 'Hrvatski',
-  'hu-HU': 'Magyar',
-  'id-ID': 'Bahasa Indonesia',
-  'it-IT': 'Italiano',
-  'ja-JP': '日本語',
-  'ko-KR': '한국어',
-  'ml-ML': 'മലയാളം',
-  'nl-NL': 'Nederlands',
-  'no-NB': 'Norsk',
-  'pl-PL': 'Polski',
-  'pt-BR': 'Português (Brasil)',
-  'pt-PT': 'Português',
-  'ro-RO': 'Română',
-  'ru-RU': 'Русский',
-  'sk-SK': 'Slovensky',
-  'sl-SI': 'Slovenščina',
-  'sr-LATN-RS': 'Srpski',
-  'sv-SE': 'Svenska',
-  'th-TH': 'ไทย',
-  'tr-TR': 'Türkçe',
-  'uk-UA': 'Українська',
-  'vi-VN': 'Tiếng Việt',
-  'zh-BO': 'བོད་ཡིག',
-  'zh-CN': '简体中文',
-  'zh-TW': '繁體中文',
+  "en-GB": "English",
+  "ar-AR": "العربية",
+  "az-AZ": "Azərbaycan Dili",
+  "bg-BG": "Български",
+  "ca-CA": "Català",
+  "cs-CZ": "Česky",
+  "da-DK": "Dansk",
+  "de-DE": "Deutsch",
+  "el-GR": "Ελληνικά",
+  "es-ES": "Español",
+  "eu-ES": "Euskara",
+  "fa-IR": "فارسی",
+  "fr-FR": "Français",
+  "ga-IE": "Gaeilge",
+  "hi-IN": "हिंदी",
+  "hr-HR": "Hrvatski",
+  "hu-HU": "Magyar",
+  "id-ID": "Bahasa Indonesia",
+  "it-IT": "Italiano",
+  "ja-JP": "日本語",
+  "ko-KR": "한국어",
+  "ml-ML": "മലയാളം",
+  "nl-NL": "Nederlands",
+  "no-NB": "Norsk",
+  "pl-PL": "Polski",
+  "pt-BR": "Português (Brasil)",
+  "pt-PT": "Português",
+  "ro-RO": "Română",
+  "ru-RU": "Русский",
+  "sk-SK": "Slovensky",
+  "sl-SI": "Slovenščina",
+  "sr-LATN-RS": "Srpski",
+  "sv-SE": "Svenska",
+  "th-TH": "ไทย",
+  "tr-TR": "Türkçe",
+  "uk-UA": "Українська",
+  "vi-VN": "Tiếng Việt",
+  "zh-BO": "བོད་ཡིག",
+  "zh-CN": "简体中文",
+  "zh-TW": "繁體中文",
 };
 
 // RTL languages (based on your existing language.direction property)
-export const rtlLanguages = ['ar-AR', 'fa-IR'];
+export const rtlLanguages = ["ar-AR", "fa-IR"];
 
 // LocalStorage keys for i18next
 export const I18N_STORAGE_KEYS = {
-  LANGUAGE: 'i18nextLng',
-  LANGUAGE_SOURCE: 'i18nextLng-source',
+  LANGUAGE: "i18nextLng",
+  LANGUAGE_SOURCE: "i18nextLng-source",
 } as const;
 
 /**
@@ -72,11 +72,11 @@ i18n
   .use(LanguageDetector)
   .use(initReactI18next)
   .init({
-    fallbackLng: 'en-GB',
+    fallbackLng: "en-GB",
     supportedLngs: Object.keys(supportedLanguages),
-    load: 'currentOnly',
+    load: "currentOnly",
     nonExplicitSupportedLngs: false,
-    debug: process.env.NODE_ENV === 'development',
+    debug: process.env.NODE_ENV === "development",
 
     // Ensure synchronous loading to prevent timing issues
     initImmediate: false,
@@ -88,42 +88,41 @@ i18n
     backend: {
       loadPath: (lngs: string[], namespaces: string[]) => {
         const lng = lngs[0];
-        const basePath = import.meta.env.BASE_URL || '/';
-        const cleanBasePath = basePath.endsWith('/') ? basePath.slice(0, -1) : basePath;
+        const basePath = import.meta.env.BASE_URL || "/";
+        const cleanBasePath = basePath.endsWith("/") ? basePath.slice(0, -1) : basePath;
         return `${cleanBasePath}/locales/${lng}/${namespaces[0]}.toml`;
       },
     },
 
     detection: {
-      order: ['localStorage', 'navigator', 'htmlTag'],
+      order: ["localStorage", "navigator", "htmlTag"],
       caches: [], // Don't cache auto-detected language - only cache when user manually selects
       convertDetectedLanguage: (lng: string) => {
         // Map en and en-US to en-GB
-        if (lng === 'en' || lng === 'en-US') return 'en-GB';
+        if (lng === "en" || lng === "en-US") return "en-GB";
         return lng;
       },
     },
 
     react: {
       useSuspense: true, // Enable suspense to prevent premature rendering
-      bindI18n: 'languageChanged loaded',
-      bindI18nStore: 'added removed',
-      transEmptyNodeValue: '', // Return empty string for missing keys instead of key name
+      bindI18n: "languageChanged loaded",
+      bindI18nStore: "added removed",
+      transEmptyNodeValue: "", // Return empty string for missing keys instead of key name
       transSupportBasicHtmlNodes: true,
-      transKeepBasicHtmlNodesFor: ['br', 'strong', 'i', 'p'],
+      transKeepBasicHtmlNodesFor: ["br", "strong", "i", "p"],
     },
   });
 
-
 // Set document direction based on language
-i18n.on('languageChanged', (lng) => {
+i18n.on("languageChanged", (lng) => {
   const isRTL = rtlLanguages.includes(lng);
-  document.documentElement.dir = isRTL ? 'rtl' : 'ltr';
+  document.documentElement.dir = isRTL ? "rtl" : "ltr";
   document.documentElement.lang = lng;
 });
 
 // Track browser-detected language on first initialization
-i18n.on('initialized', () => {
+i18n.on("initialized", () => {
   // If no source is set yet, mark current language as browser-detected
   if (!localStorage.getItem(I18N_STORAGE_KEYS.LANGUAGE_SOURCE)) {
     const detectedLang = i18n.language;
@@ -136,15 +135,15 @@ i18n.on('initialized', () => {
 
 export function normalizeLanguageCode(languageCode: string): string {
   // Replace underscores with hyphens to align with i18next/translation file naming
-  const hyphenated = languageCode.replace(/_/g, '-');
-  const [base, ...rest] = hyphenated.split('-');
+  const hyphenated = languageCode.replace(/_/g, "-");
+  const [base, ...rest] = hyphenated.split("-");
 
   if (rest.length === 0) {
     return base.toLowerCase();
   }
 
-  const normalizedParts = rest.map(part => (part.length <= 3 ? part.toUpperCase() : part));
-  return [base.toLowerCase(), ...normalizedParts].join('-');
+  const normalizedParts = rest.map((part) => (part.length <= 3 ? part.toUpperCase() : part));
+  return [base.toLowerCase(), ...normalizedParts].join("-");
 }
 
 /**
@@ -152,7 +151,7 @@ export function normalizeLanguageCode(languageCode: string): string {
  * Used for backend API communication which expects underscore format
  */
 export function toUnderscoreFormat(languageCode: string): string {
-  return languageCode.replace(/-/g, '_');
+  return languageCode.replace(/-/g, "_");
 }
 
 /**
@@ -162,14 +161,13 @@ export function toUnderscoreLanguages(languages: string[]): string[] {
   return languages.map(toUnderscoreFormat);
 }
 
-
 /**
  * Get the current language source priority
  */
 function getCurrentSourcePriority(): LanguageSource {
   const sourceStr = localStorage.getItem(I18N_STORAGE_KEYS.LANGUAGE_SOURCE);
   const sourceNum = sourceStr ? parseInt(sourceStr, 10) : null;
-  return (sourceNum !== null && !isNaN(sourceNum)) ? sourceNum as LanguageSource : LanguageSource.Fallback;
+  return sourceNum !== null && !isNaN(sourceNum) ? (sourceNum as LanguageSource) : LanguageSource.Fallback;
 }
 
 /**
@@ -221,9 +219,7 @@ export function updateSupportedLanguages(configLanguages?: string[] | null, defa
     return;
   }
 
-  const validLanguages = configLanguages
-    .map(normalizeLanguageCode)
-    .filter(lang => lang in supportedLanguages);
+  const validLanguages = configLanguages.map(normalizeLanguageCode).filter((lang) => lang in supportedLanguages);
 
   // If no valid languages were provided, keep existing configuration
   if (validLanguages.length === 0) {
@@ -231,17 +227,18 @@ export function updateSupportedLanguages(configLanguages?: string[] | null, defa
   }
 
   // Determine fallback: prefer validDefault if in the list, then en-GB, then first valid language
-  const fallback = validDefault && validLanguages.includes(validDefault)
-    ? validDefault
-    : validLanguages.includes('en-GB')
-      ? 'en-GB'
-      : validLanguages[0];
+  const fallback =
+    validDefault && validLanguages.includes(validDefault)
+      ? validDefault
+      : validLanguages.includes("en-GB")
+        ? "en-GB"
+        : validLanguages[0];
 
   i18n.options.supportedLngs = validLanguages;
   i18n.options.fallbackLng = fallback;
 
   // If current language is not in the new supported list, switch to fallback with higher priority to override browser detection
-  const currentLang = normalizeLanguageCode(i18n.language || '');
+  const currentLang = normalizeLanguageCode(i18n.language || "");
   if (currentLang && !validLanguages.includes(currentLang)) {
     // Use ServerDefault priority to override browser detection when language not in whitelist
     setLanguageWithPriority(fallback, LanguageSource.ServerDefault);
diff --git a/frontend/src/core/i18n/config.ts b/frontend/src/core/i18n/config.ts
index fa7808e20f..b8d004a03d 100644
--- a/frontend/src/core/i18n/config.ts
+++ b/frontend/src/core/i18n/config.ts
@@ -1,16 +1,16 @@
-import i18n from 'i18next';
-import { initReactI18next } from 'react-i18next';
-import TomlBackend from '@app/i18n/tomlBackend';
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import TomlBackend from "@app/i18n/tomlBackend";
 
 i18n
   .use(TomlBackend)
   .use(initReactI18next)
   .init({
-    lng: 'en',
-    fallbackLng: 'en',
+    lng: "en",
+    fallbackLng: "en",
     debug: false,
     backend: {
-      loadPath: '/locales/{{lng}}/{{ns}}.toml',
+      loadPath: "/locales/{{lng}}/{{ns}}.toml",
     },
     interpolation: {
       escapeValue: false,
@@ -19,34 +19,36 @@ i18n
     resources: {
       en: {
         translation: {
-          'convert.selectSourceFormat': 'Select source file format',
-          'convert.selectTargetFormat': 'Select target file format',
-          'convert.selectFirst': 'Select a source format first',
-          'convert.imageOptions': 'Image Options:',
-          'convert.emailOptions': 'Email Options:',
-          'convert.colorType': 'Color Type',
-          'convert.dpi': 'DPI',
-          'convert.singleOrMultiple': 'Output',
-          'convert.emailNote': 'Email attachments and embedded images will be included',
-           'convert.pdfaOptions': 'PDF/A Options',
-          'convert.outputFormat': 'Output Format',
-          'convert.pdfaNote': 'PDF/A-1b is more compatible, PDF/A-2b supports more features, PDF/A-3b supports embedded files.',
-          'convert.pdfaDigitalSignatureWarning': 'The PDF contains a digital signature. This will be removed in the next step.',
-          'common.color': 'Color',
-          'common.grayscale': 'Grayscale',
-          'common.blackWhite': 'Black & White',
-          'common.single': 'Single Image',
-          'common.multiple': 'Multiple Images',
-          'groups.document': 'Document',
-          'groups.spreadsheet': 'Spreadsheet',
-          'groups.presentation': 'Presentation',
-          'groups.image': 'Image',
-          'groups.web': 'Web',
-          'groups.text': 'Text',
-          'groups.email': 'Email'
-        }
-      }
-    }
+          "convert.selectSourceFormat": "Select source file format",
+          "convert.selectTargetFormat": "Select target file format",
+          "convert.selectFirst": "Select a source format first",
+          "convert.imageOptions": "Image Options:",
+          "convert.emailOptions": "Email Options:",
+          "convert.colorType": "Color Type",
+          "convert.dpi": "DPI",
+          "convert.singleOrMultiple": "Output",
+          "convert.emailNote": "Email attachments and embedded images will be included",
+          "convert.pdfaOptions": "PDF/A Options",
+          "convert.outputFormat": "Output Format",
+          "convert.pdfaNote":
+            "PDF/A-1b is more compatible, PDF/A-2b supports more features, PDF/A-3b supports embedded files.",
+          "convert.pdfaDigitalSignatureWarning":
+            "The PDF contains a digital signature. This will be removed in the next step.",
+          "common.color": "Color",
+          "common.grayscale": "Grayscale",
+          "common.blackWhite": "Black & White",
+          "common.single": "Single Image",
+          "common.multiple": "Multiple Images",
+          "groups.document": "Document",
+          "groups.spreadsheet": "Spreadsheet",
+          "groups.presentation": "Presentation",
+          "groups.image": "Image",
+          "groups.web": "Web",
+          "groups.text": "Text",
+          "groups.email": "Email",
+        },
+      },
+    },
   });
 
 export default i18n;
diff --git a/frontend/src/core/i18n/tomlBackend.ts b/frontend/src/core/i18n/tomlBackend.ts
index c208661f0b..c1cf84cbd1 100644
--- a/frontend/src/core/i18n/tomlBackend.ts
+++ b/frontend/src/core/i18n/tomlBackend.ts
@@ -1,13 +1,13 @@
-import { BackendModule, ReadCallback } from 'i18next';
-import { parse } from 'smol-toml';
+import { BackendModule, ReadCallback } from "i18next";
+import { parse } from "smol-toml";
 
 export interface TomlBackendOptions {
   loadPath: string | ((lngs: string[], namespaces: string[]) => string);
 }
 
 class TomlBackend implements BackendModule<TomlBackendOptions> {
-  static type = 'backend' as const;
-  type = 'backend' as const;
+  static type = "backend" as const;
+  type = "backend" as const;
 
   constructor(services?: unknown, options?: TomlBackendOptions) {
     this.init(services, options);
@@ -21,13 +21,14 @@ class TomlBackend implements BackendModule<TomlBackendOptions> {
     const loadPath = this.options?.loadPath;
 
     if (!loadPath) {
-      callback(new Error('loadPath is not configured'), null);
+      callback(new Error("loadPath is not configured"), null);
       return;
     }
 
-    const url = typeof loadPath === 'function'
-      ? loadPath([language], [namespace])
-      : loadPath.replace('{{lng}}', language).replace('{{ns}}', namespace);
+    const url =
+      typeof loadPath === "function"
+        ? loadPath([language], [namespace])
+        : loadPath.replace("{{lng}}", language).replace("{{ns}}", namespace);
 
     fetch(url)
       .then((response) => {
diff --git a/frontend/src/core/pages/HomePage.css b/frontend/src/core/pages/HomePage.css
index 219bab0f1e..14c723c406 100644
--- a/frontend/src/core/pages/HomePage.css
+++ b/frontend/src/core/pages/HomePage.css
@@ -59,7 +59,9 @@
   font-weight: 600;
   color: var(--text-muted);
   background: transparent;
-  transition: background 0.2s ease, color 0.2s ease;
+  transition:
+    background 0.2s ease,
+    color 0.2s ease;
 }
 
 .mobile-toggle-button:focus-visible {
diff --git a/frontend/src/core/pages/HomePage.tsx b/frontend/src/core/pages/HomePage.tsx
index 7fb59f27c7..ec81f81f1f 100644
--- a/frontend/src/core/pages/HomePage.tsx
+++ b/frontend/src/core/pages/HomePage.tsx
@@ -8,11 +8,11 @@ import { useBaseUrl } from "@app/hooks/useBaseUrl";
 import { useIsMobile } from "@app/hooks/useIsMobile";
 import { useAppConfig } from "@app/contexts/AppConfigContext";
 import { useLogoPath } from "@app/hooks/useLogoPath";
-import { useLogoAssets } from '@app/hooks/useLogoAssets';
+import { useLogoAssets } from "@app/hooks/useLogoAssets";
 import { useFileContext } from "@app/contexts/file/fileHooks";
 import { useNavigationState, useNavigationActions } from "@app/contexts/NavigationContext";
 import { useViewer } from "@app/contexts/ViewerContext";
-import AppsIcon from '@mui/icons-material/AppsRounded';
+import AppsIcon from "@mui/icons-material/AppsRounded";
 
 import ToolPanel from "@app/components/tools/ToolPanel";
 import Workbench from "@app/components/layout/Workbench";
@@ -31,9 +31,7 @@ type MobileView = "tools" | "workbench";
 
 export default function HomePage() {
   const { t } = useTranslation();
-  const {
-    sidebarRefs,
-  } = useSidebarContext();
+  const { sidebarRefs } = useSidebarContext();
 
   const { quickAccessRef } = sidebarRefs;
 
@@ -70,44 +68,31 @@ export default function HomePage() {
     const prevCount = prevFileCountRef.current;
     const currentCount = activeFiles.length;
 
-    console.log('[HomePage] Navigation effect triggered:', {
+    console.log("[HomePage] Navigation effect triggered:", {
       prevCount,
       currentCount,
       currentWorkbench: navigationState.workbench,
       selectedToolKey,
     });
 
-    const action = getStartupNavigationAction(
-      prevCount,
-      currentCount,
-      selectedToolKey,
-      navigationState.workbench
-    );
+    const action = getStartupNavigationAction(prevCount, currentCount, selectedToolKey, navigationState.workbench);
 
-    console.log('[HomePage] Navigation action returned:', action);
+    console.log("[HomePage] Navigation action returned:", action);
 
     if (action) {
-      console.log('[HomePage] Applying navigation:', action);
+      console.log("[HomePage] Applying navigation:", action);
       actions.setWorkbench(action.workbench);
-      if (typeof action.activeFileIndex === 'number') {
+      if (typeof action.activeFileIndex === "number") {
         setActiveFileIndex(action.activeFileIndex);
       }
     } else {
-      console.log('[HomePage] No navigation - staying in current workbench');
+      console.log("[HomePage] No navigation - staying in current workbench");
     }
 
     prevFileCountRef.current = currentCount;
-  }, [
-    activeFiles.length,
-    actions,
-    setActiveFileIndex,
-    selectedToolKey,
-    navigationState.workbench,
-  ]);
+  }, [activeFiles.length, actions, setActiveFileIndex, selectedToolKey, navigationState.workbench]);
 
-  const hideToolPanel = customWorkbenchViews.find(
-    (v) => v.workbenchId === navigationState.workbench
-  )?.hideToolPanel ?? false;
+  const hideToolPanel = customWorkbenchViews.find((v) => v.workbenchId === navigationState.workbench)?.hideToolPanel ?? false;
 
   const brandAltText = t("home.mobile.brandAlt", "Stirling PDF logo");
   const brandIconSrc = useLogoPath();
@@ -178,8 +163,8 @@ export default function HomePage() {
 
   // Automatically switch to workbench when read mode or multiTool is activated in mobile
   useEffect(() => {
-    if (isMobile && (readerMode || selectedToolKey === 'multiTool')) {
-      setActiveMobileView('workbench');
+    if (isMobile && (readerMode || selectedToolKey === "multiTool")) {
+      setActiveMobileView("workbench");
     }
   }, [isMobile, readerMode, selectedToolKey]);
 
@@ -187,16 +172,16 @@ export default function HomePage() {
   // hideToolPanel is true for all custom workbenches that take over the full screen.
   useEffect(() => {
     if (isMobile && hideToolPanel) {
-      setActiveMobileView('workbench');
+      setActiveMobileView("workbench");
     }
   }, [isMobile, hideToolPanel]);
 
   // When navigating back to tools view in mobile with a workbench-only tool, show tool picker
   useEffect(() => {
-    if (isMobile && activeMobileView === 'tools' && selectedTool) {
+    if (isMobile && activeMobileView === "tools" && selectedTool) {
       // Check if this is a workbench-only tool (has workbench but no component)
       if (selectedTool.workbench && !selectedTool.component) {
-        setLeftPanelView('toolPicker');
+        setLeftPanelView("toolPicker");
       }
     }
   }, [isMobile, activeMobileView, selectedTool, setLeftPanelView]);
@@ -204,14 +189,14 @@ export default function HomePage() {
   const baseUrl = useBaseUrl();
 
   // Update document meta when tool changes
-  const appName = config?.appNameNavbar || 'Stirling PDF';
+  const appName = config?.appNameNavbar || "Stirling PDF";
   useDocumentMeta({
     title: selectedTool ? `${selectedTool.name} - ${appName}` : appName,
-    description: selectedTool?.description || t('app.description', 'The Free Adobe Acrobat alternative (10M+ Downloads)'),
+    description: selectedTool?.description || t("app.description", "The Free Adobe Acrobat alternative (10M+ Downloads)"),
     ogTitle: selectedTool ? `${selectedTool.name} - ${appName}` : appName,
-    ogDescription: selectedTool?.description || t('app.description', 'The Free Adobe Acrobat alternative (10M+ Downloads)'),
+    ogDescription: selectedTool?.description || t("app.description", "The Free Adobe Acrobat alternative (10M+ Downloads)"),
     ogImage: selectedToolKey ? `${baseUrl}/og_images/${selectedToolKey}.png` : `${baseUrl}/og_images/home.png`,
-    ogUrl: selectedTool ? `${baseUrl}${window.location.pathname}` : baseUrl
+    ogUrl: selectedTool ? `${baseUrl}${window.location.pathname}` : baseUrl,
   });
 
   // Note: File selection limits are now handled directly by individual tools
@@ -228,7 +213,11 @@ export default function HomePage() {
                 <img src={brandTextSrc} alt={brandAltText} className="mobile-brand-text" />
               </div>
             </div>
-            <div className="mobile-toggle-buttons" role="tablist" aria-label={t('home.mobile.viewSwitcher', 'Switch workspace view')}>
+            <div
+              className="mobile-toggle-buttons"
+              role="tablist"
+              aria-label={t("home.mobile.viewSwitcher", "Switch workspace view")}
+            >
               <button
                 type="button"
                 role="tab"
@@ -236,7 +225,7 @@ export default function HomePage() {
                 className={`mobile-toggle-button ${activeMobileView === "tools" ? "active" : ""}`}
                 onClick={() => handleSelectMobileView("tools")}
               >
-                {t('home.mobile.tools', 'Tools')}
+                {t("home.mobile.tools", "Tools")}
               </button>
               <button
                 type="button"
@@ -245,20 +234,18 @@ export default function HomePage() {
                 className={`mobile-toggle-button ${activeMobileView === "workbench" ? "active" : ""}`}
                 onClick={() => handleSelectMobileView("workbench")}
               >
-                {t('home.mobile.workspace', 'Workspace')}
+                {t("home.mobile.workspace", "Workspace")}
               </button>
             </div>
-            <span className="mobile-toggle-hint">
-              {t('home.mobile.swipeHint', 'Swipe left or right to switch views')}
-            </span>
+            <span className="mobile-toggle-hint">{t("home.mobile.swipeHint", "Swipe left or right to switch views")}</span>
           </div>
           <div ref={sliderRef} className="mobile-slider">
-            <div className="mobile-slide" aria-label={t('home.mobile.toolsSlide', 'Tool selection panel')}>
+            <div className="mobile-slide" aria-label={t("home.mobile.toolsSlide", "Tool selection panel")}>
               <div className="mobile-slide-content">
                 <ToolPanel />
               </div>
             </div>
-            <div className="mobile-slide" aria-label={t('home.mobile.workbenchSlide', 'Workspace panel')}>
+            <div className="mobile-slide" aria-label={t("home.mobile.workbenchSlide", "Workspace panel")}>
               <div className="mobile-slide-content">
                 <div className="flex-1 min-h-0 flex">
                   <Workbench />
@@ -270,62 +257,54 @@ export default function HomePage() {
           <div className="mobile-bottom-bar">
             <button
               className="mobile-bottom-button"
-              aria-label={t('quickAccess.allTools', 'Tools')}
+              aria-label={t("quickAccess.allTools", "Tools")}
               onClick={() => {
                 handleBackToTools();
                 if (isMobile) {
-                  setActiveMobileView('tools');
+                  setActiveMobileView("tools");
                 }
               }}
             >
-              <AppsIcon sx={{ fontSize: '1.5rem' }} />
-              <span className="mobile-bottom-button-label">{t('quickAccess.allTools', 'Tools')}</span>
+              <AppsIcon sx={{ fontSize: "1.5rem" }} />
+              <span className="mobile-bottom-button-label">{t("quickAccess.allTools", "Tools")}</span>
             </button>
-            {toolAvailability['automate']?.available !== false && (
+            {toolAvailability["automate"]?.available !== false && (
               <button
                 className="mobile-bottom-button"
-                aria-label={t('quickAccess.automate', 'Automate')}
+                aria-label={t("quickAccess.automate", "Automate")}
                 onClick={() => {
-                  handleToolSelect('automate');
+                  handleToolSelect("automate");
                   if (isMobile) {
-                    setActiveMobileView('tools');
+                    setActiveMobileView("tools");
                   }
                 }}
               >
                 <LocalIcon icon="automation-outline" width="1.5rem" height="1.5rem" />
-                <span className="mobile-bottom-button-label">{t('quickAccess.automate', 'Automate')}</span>
+                <span className="mobile-bottom-button-label">{t("quickAccess.automate", "Automate")}</span>
               </button>
             )}
             <button
               className="mobile-bottom-button"
-              aria-label={t('home.mobile.openFiles', 'Open files')}
+              aria-label={t("home.mobile.openFiles", "Open files")}
               onClick={() => openFilesModal()}
             >
               <LocalIcon icon="folder-rounded" width="1.5rem" height="1.5rem" />
-              <span className="mobile-bottom-button-label">{t('quickAccess.files', 'Files')}</span>
+              <span className="mobile-bottom-button-label">{t("quickAccess.files", "Files")}</span>
             </button>
             <button
               className="mobile-bottom-button"
-              aria-label={t('quickAccess.config', 'Config')}
+              aria-label={t("quickAccess.config", "Config")}
               onClick={() => setConfigModalOpen(true)}
             >
               <LocalIcon icon="settings-rounded" width="1.5rem" height="1.5rem" />
-              <span className="mobile-bottom-button-label">{t('quickAccess.config', 'Config')}</span>
+              <span className="mobile-bottom-button-label">{t("quickAccess.config", "Config")}</span>
             </button>
           </div>
           <FileManager selectedTool={selectedTool as any /* FIX ME */} />
-          <AppConfigModal
-            opened={configModalOpen}
-            onClose={() => setConfigModalOpen(false)}
-          />
+          <AppConfigModal opened={configModalOpen} onClose={() => setConfigModalOpen(false)} />
         </div>
       ) : (
-        <Group
-          align="flex-start"
-          gap={0}
-          h="100%"
-          className="flex-nowrap flex"
-        >
+        <Group align="flex-start" gap={0} h="100%" className="flex-nowrap flex">
           <QuickAccessBar ref={quickAccessRef} />
           {!hideToolPanel && <ToolPanel />}
           <Workbench />
diff --git a/frontend/src/core/pages/MobileScannerPage.tsx b/frontend/src/core/pages/MobileScannerPage.tsx
index db657a5d08..642a44f90e 100644
--- a/frontend/src/core/pages/MobileScannerPage.tsx
+++ b/frontend/src/core/pages/MobileScannerPage.tsx
@@ -1,15 +1,15 @@
-import { useState, useRef, useEffect, useCallback } from 'react';
-import { useSearchParams, useNavigate } from 'react-router-dom';
-import { Box, Button, Stack, Text, Group, Alert, Progress, Switch, Card, useMantineColorScheme } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { useLogoPath } from '@app/hooks/useLogoPath';
-import { useLogoAssets } from '@app/hooks/useLogoAssets';
-import ErrorRoundedIcon from '@mui/icons-material/ErrorRounded';
-import InfoRoundedIcon from '@mui/icons-material/InfoRounded';
-import PhotoCameraRoundedIcon from '@mui/icons-material/PhotoCameraRounded';
-import UploadRoundedIcon from '@mui/icons-material/UploadRounded';
-import AddPhotoAlternateRoundedIcon from '@mui/icons-material/AddPhotoAlternateRounded';
-import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded';
+import { useState, useRef, useEffect, useCallback } from "react";
+import { useSearchParams, useNavigate } from "react-router-dom";
+import { Box, Button, Stack, Text, Group, Alert, Progress, Switch, Card, useMantineColorScheme } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { useLogoPath } from "@app/hooks/useLogoPath";
+import { useLogoAssets } from "@app/hooks/useLogoAssets";
+import ErrorRoundedIcon from "@mui/icons-material/ErrorRounded";
+import InfoRoundedIcon from "@mui/icons-material/InfoRounded";
+import PhotoCameraRoundedIcon from "@mui/icons-material/PhotoCameraRounded";
+import UploadRoundedIcon from "@mui/icons-material/UploadRounded";
+import AddPhotoAlternateRoundedIcon from "@mui/icons-material/AddPhotoAlternateRounded";
+import CheckCircleRoundedIcon from "@mui/icons-material/CheckCircleRounded";
 
 // jscanify is loaded via script tag in index.html as a global
 declare global {
@@ -29,13 +29,13 @@ export default function MobileScannerPage() {
   const { t } = useTranslation();
   const [searchParams] = useSearchParams();
   const navigate = useNavigate();
-  const sessionId = searchParams.get('session');
+  const sessionId = searchParams.get("session");
   const { colorScheme } = useMantineColorScheme();
   const brandIconSrc = useLogoPath();
   const { wordmark } = useLogoAssets();
-  const brandTextSrc = colorScheme === 'dark' ? wordmark.white : wordmark.black;
+  const brandTextSrc = colorScheme === "dark" ? wordmark.white : wordmark.black;
 
-  const [mode, setMode] = useState<'choice' | 'camera' | 'file' | null>('choice');
+  const [mode, setMode] = useState<"choice" | "camera" | "file" | null>("choice");
   const [capturedImages, setCapturedImages] = useState<string[]>([]);
   const [currentPreview, setCurrentPreview] = useState<string | null>(null);
   const [isUploading, setIsUploading] = useState(false);
@@ -50,7 +50,7 @@ export default function MobileScannerPage() {
   const [torchSupported, setTorchSupported] = useState(false);
   const [sessionValid, setSessionValid] = useState<boolean | null>(null); // null = checking, true = valid, false = invalid
   const [sessionError, setSessionError] = useState<string | null>(null);
-  const [loadingStatus, setLoadingStatus] = useState<string>('Initializing...');
+  const [loadingStatus, setLoadingStatus] = useState<string>("Initializing...");
   const [cameraReady, setCameraReady] = useState(false);
 
   const videoRef = useRef<HTMLVideoElement>(null);
@@ -67,11 +67,11 @@ export default function MobileScannerPage() {
   // Validate session on page load
   useEffect(() => {
     const validateSession = async () => {
-      setLoadingStatus('Validating session...');
+      setLoadingStatus("Validating session...");
       if (!sessionId) {
         setSessionValid(false);
-        setSessionError(t('mobileScanner.noSessionMessage', 'Session not found. Please try again.'));
-        setLoadingStatus('Session validation failed');
+        setSessionError(t("mobileScanner.noSessionMessage", "Session not found. Please try again."));
+        setLoadingStatus("Session validation failed");
         return;
       }
 
@@ -84,22 +84,22 @@ export default function MobileScannerPage() {
             setSessionValid(true);
             setSessionError(null);
             // Don't set status here - let camera/detection effects control status from now on
-            console.log('Session validated successfully:', data);
+            console.log("Session validated successfully:", data);
           } else {
             setSessionValid(false);
-            setSessionError(t('mobileScanner.sessionExpired', 'This session has expired. Please refresh and try again.'));
-            setLoadingStatus('Session expired ✗');
+            setSessionError(t("mobileScanner.sessionExpired", "This session has expired. Please refresh and try again."));
+            setLoadingStatus("Session expired ✗");
           }
         } else {
           setSessionValid(false);
-          setSessionError(t('mobileScanner.sessionNotFound', 'Session not found. Please refresh and try again.'));
-          setLoadingStatus('Session not found ✗');
+          setSessionError(t("mobileScanner.sessionNotFound", "Session not found. Please refresh and try again."));
+          setLoadingStatus("Session not found ✗");
         }
       } catch (err) {
-        console.error('Failed to validate session:', err);
+        console.error("Failed to validate session:", err);
         setSessionValid(false);
-        setSessionError(t('mobileScanner.sessionValidationError', 'Unable to verify session. Please try again.'));
-        setLoadingStatus('Session validation error: ' + (err as Error).message);
+        setSessionError(t("mobileScanner.sessionValidationError", "Unable to verify session. Please try again."));
+        setLoadingStatus("Session validation error: " + (err as Error).message);
       }
     };
 
@@ -122,8 +122,8 @@ export default function MobileScannerPage() {
           }
           setTimeout(initScanner, 100);
         } else {
-          const error = 'OpenCV failed to load after 5 seconds. Check that /vendor/jscanify/opencv.js is accessible.';
-          setLoadingStatus('OpenCV load failed ✗');
+          const error = "OpenCV failed to load after 5 seconds. Check that /vendor/jscanify/opencv.js is accessible.";
+          setLoadingStatus("OpenCV load failed ✗");
           console.error(error);
         }
         return;
@@ -138,8 +138,8 @@ export default function MobileScannerPage() {
           }
           setTimeout(initScanner, 100);
         } else {
-          const error = 'jscanify failed to load after 5 seconds. Check that /vendor/jscanify/jscanify.js is accessible.';
-          setLoadingStatus('jscanify load failed ✗');
+          const error = "jscanify failed to load after 5 seconds. Check that /vendor/jscanify/jscanify.js is accessible.";
+          setLoadingStatus("jscanify load failed ✗");
           console.error(error);
         }
         return;
@@ -149,47 +149,49 @@ export default function MobileScannerPage() {
         scannerRef.current = new window.jscanify();
         setOpenCvReady(true);
         // Don't set status here - let camera/detection effects control status from now on
-        console.log('✓ jscanify initialized with OpenCV');
+        console.log("✓ jscanify initialized with OpenCV");
       } catch (err) {
-        setLoadingStatus('jscanify init failed ✗');
-        console.error('Failed to initialize jscanify:', err);
+        setLoadingStatus("jscanify init failed ✗");
+        console.error("Failed to initialize jscanify:", err);
       }
     };
 
     // Start initialization
-    setLoadingStatus('Loading OpenCV...');
+    setLoadingStatus("Loading OpenCV...");
     initScanner();
   }, []);
 
   // Initialize camera
   useEffect(() => {
-    console.log(`[Mobile Scanner] Camera effect triggered: mode=${mode}, cameraError=${cameraError}, currentPreview=${currentPreview}`);
+    console.log(
+      `[Mobile Scanner] Camera effect triggered: mode=${mode}, cameraError=${cameraError}, currentPreview=${currentPreview}`,
+    );
 
-    if (mode === 'camera' && !cameraError && !currentPreview) {
-      console.log('[Mobile Scanner] Camera effect: Starting camera initialization');
+    if (mode === "camera" && !cameraError && !currentPreview) {
+      console.log("[Mobile Scanner] Camera effect: Starting camera initialization");
 
       // Check if mediaDevices API is available (requires HTTPS or localhost)
       if (!navigator.mediaDevices || !navigator.mediaDevices.getUserMedia) {
-        const error = 'MediaDevices API not available - requires HTTPS or localhost';
+        const error = "MediaDevices API not available - requires HTTPS or localhost";
         console.error(error);
-        setLoadingStatus('Camera API not available ✗');
+        setLoadingStatus("Camera API not available ✗");
         setCameraError(
           t(
-            'mobileScanner.httpsRequired',
-            'Camera access requires HTTPS or localhost. Please use HTTPS or access via localhost.'
-          )
+            "mobileScanner.httpsRequired",
+            "Camera access requires HTTPS or localhost. Please use HTTPS or access via localhost.",
+          ),
         );
-        setMode('file');
+        setMode("file");
         return;
       }
 
-      setLoadingStatus('Initializing camera...');
+      setLoadingStatus("Initializing camera...");
 
-      console.log('[Mobile Scanner] Requesting camera permission...');
+      console.log("[Mobile Scanner] Requesting camera permission...");
       navigator.mediaDevices
         .getUserMedia({
           video: {
-            facingMode: 'environment',
+            facingMode: "environment",
             // Request 1080p - good quality without going overboard
             width: { ideal: 1920, max: 1920 },
             height: { ideal: 1080, max: 1080 },
@@ -197,7 +199,7 @@ export default function MobileScannerPage() {
           audio: false,
         })
         .then(async (stream) => {
-          console.log('[Mobile Scanner] Camera permission granted, stream received');
+          console.log("[Mobile Scanner] Camera permission granted, stream received");
           streamRef.current = stream;
           if (videoRef.current) {
             const video = videoRef.current;
@@ -205,26 +207,27 @@ export default function MobileScannerPage() {
 
             // Wait for video metadata to load before marking camera as ready
             const handleLoadedMetadata = () => {
-              console.log('[Mobile Scanner] Video metadata loaded, dimensions:', video.videoWidth, 'x', video.videoHeight);
+              console.log("[Mobile Scanner] Video metadata loaded, dimensions:", video.videoWidth, "x", video.videoHeight);
               setLoadingStatus(`Camera ready: ${video.videoWidth}x${video.videoHeight} ✓`);
 
               // Signal that camera is ready - this will trigger detection effect
-              console.log('[Mobile Scanner] Setting cameraReady = true');
+              console.log("[Mobile Scanner] Setting cameraReady = true");
               setCameraReady(true);
             };
 
             // Check if metadata is already loaded
-            if (video.readyState >= 1) { // HAVE_METADATA or greater
+            if (video.readyState >= 1) {
+              // HAVE_METADATA or greater
               handleLoadedMetadata();
             } else {
               // Wait for loadedmetadata event
-              video.addEventListener('loadedmetadata', handleLoadedMetadata, { once: true });
+              video.addEventListener("loadedmetadata", handleLoadedMetadata, { once: true });
             }
 
             // Log actual resolution we got from stream settings
             const videoTrack = stream.getVideoTracks()[0];
             const settings = videoTrack.getSettings();
-            console.log('[Mobile Scanner] Camera stream settings:', settings.width, 'x', settings.height);
+            console.log("[Mobile Scanner] Camera stream settings:", settings.width, "x", settings.height);
 
             // Configure camera capabilities for document scanning
             try {
@@ -232,21 +235,21 @@ export default function MobileScannerPage() {
               const constraints: any = { advanced: [] };
 
               // 1. Enable continuous autofocus
-              if (capabilities.focusMode && capabilities.focusMode.includes('continuous')) {
-                constraints.advanced.push({ focusMode: 'continuous' });
-                console.log('✓ Continuous autofocus enabled');
+              if (capabilities.focusMode && capabilities.focusMode.includes("continuous")) {
+                constraints.advanced.push({ focusMode: "continuous" });
+                console.log("✓ Continuous autofocus enabled");
               }
 
               // 2. Enable continuous auto-exposure for varying lighting
-              if (capabilities.exposureMode && capabilities.exposureMode.includes('continuous')) {
-                constraints.advanced.push({ exposureMode: 'continuous' });
-                console.log('✓ Auto-exposure enabled');
+              if (capabilities.exposureMode && capabilities.exposureMode.includes("continuous")) {
+                constraints.advanced.push({ exposureMode: "continuous" });
+                console.log("✓ Auto-exposure enabled");
               }
 
               // 3. Check if torch/flashlight is supported
               if (capabilities.torch) {
                 setTorchSupported(true);
-                console.log('✓ Torch/flashlight available');
+                console.log("✓ Torch/flashlight available");
               }
 
               // Apply all constraints
@@ -254,16 +257,16 @@ export default function MobileScannerPage() {
                 await videoTrack.applyConstraints(constraints);
               }
             } catch (err) {
-              console.log('Could not configure camera features:', err);
+              console.log("Could not configure camera features:", err);
             }
           }
         })
         .catch((err) => {
-          console.error('Camera error:', err);
-          setLoadingStatus('Camera access denied ✗');
-          setCameraError(t('mobileScanner.cameraAccessDenied', 'Camera access denied. Please enable camera access.'));
+          console.error("Camera error:", err);
+          setLoadingStatus("Camera access denied ✗");
+          setCameraError(t("mobileScanner.cameraAccessDenied", "Camera access denied. Please enable camera access."));
           // Auto-switch to file upload if camera fails
-          setMode('file');
+          setMode("file");
         });
     }
 
@@ -285,40 +288,48 @@ export default function MobileScannerPage() {
 
   // Real-time document highlighting on camera feed
   useEffect(() => {
-    console.log(`[Mobile Scanner] Effect triggered: mode=${mode}, autoEnhance=${autoEnhance}, openCvReady=${openCvReady}, cameraReady=${cameraReady}, currentPreview=${currentPreview}`);
+    console.log(
+      `[Mobile Scanner] Effect triggered: mode=${mode}, autoEnhance=${autoEnhance}, openCvReady=${openCvReady}, cameraReady=${cameraReady}, currentPreview=${currentPreview}`,
+    );
 
     // Show helpful status if detection is enabled but waiting for dependencies
-    if (mode === 'camera' && autoEnhance && !currentPreview) {
+    if (mode === "camera" && autoEnhance && !currentPreview) {
       if (!openCvReady) {
-        setLoadingStatus('Waiting for OpenCV...');
+        setLoadingStatus("Waiting for OpenCV...");
       } else if (!cameraReady) {
-        setLoadingStatus('Waiting for camera...');
+        setLoadingStatus("Waiting for camera...");
       }
     }
 
-    if (mode === 'camera' && autoEnhance && openCvReady && cameraReady && scannerRef.current && !currentPreview) {
+    if (mode === "camera" && autoEnhance && openCvReady && cameraReady && scannerRef.current && !currentPreview) {
       const startHighlighting = () => {
-        console.log('[Mobile Scanner] startHighlighting() called');
+        console.log("[Mobile Scanner] startHighlighting() called");
 
         if (!videoRef.current || !highlightCanvasRef.current) {
-          setLoadingStatus('Missing video/canvas refs ✗');
-          console.error('[Mobile Scanner] Missing refs: video=' + !!videoRef.current + ', canvas=' + !!highlightCanvasRef.current);
+          setLoadingStatus("Missing video/canvas refs ✗");
+          console.error(
+            "[Mobile Scanner] Missing refs: video=" + !!videoRef.current + ", canvas=" + !!highlightCanvasRef.current,
+          );
           return;
         }
         if (!videoRef.current.videoWidth || !videoRef.current.videoHeight) {
-          setLoadingStatus('Video has no dimensions ✗');
-          console.error('[Mobile Scanner] Missing video dimensions: ' + videoRef.current.videoWidth + 'x' + videoRef.current.videoHeight);
+          setLoadingStatus("Video has no dimensions ✗");
+          console.error(
+            "[Mobile Scanner] Missing video dimensions: " + videoRef.current.videoWidth + "x" + videoRef.current.videoHeight,
+          );
           return;
         }
 
         const video = videoRef.current;
         const highlightCanvas = highlightCanvasRef.current;
-        setLoadingStatus('Detection active ✓');
-        console.log('[Mobile Scanner] Starting highlighting loop for ' + video.videoWidth + 'x' + video.videoHeight + ' video');
+        setLoadingStatus("Detection active ✓");
+        console.log(
+          "[Mobile Scanner] Starting highlighting loop for " + video.videoWidth + "x" + video.videoHeight + " video",
+        );
 
         // Create low-res detection canvas with optimized context for frequent pixel reading
-        const detectionCanvas = document.createElement('canvas');
-        const detectionCtx = detectionCanvas.getContext('2d', { willReadFrequently: true });
+        const detectionCanvas = document.createElement("canvas");
+        const detectionCtx = detectionCanvas.getContext("2d", { willReadFrequently: true });
         if (!detectionCtx) return;
 
         // Calculate scaled dimensions for detection (160px wide max)
@@ -332,14 +343,16 @@ export default function MobileScannerPage() {
         highlightCanvas.height = Math.round(video.videoHeight * scale);
 
         console.log(`[Mobile Scanner] Video: ${video.videoWidth}x${video.videoHeight}`);
-        console.log(`[Mobile Scanner] Detection: ${detectionCanvas.width}x${detectionCanvas.height} (${Math.round(scale * 100)}%)`);
+        console.log(
+          `[Mobile Scanner] Detection: ${detectionCanvas.width}x${detectionCanvas.height} (${Math.round(scale * 100)}%)`,
+        );
         console.log(`[Mobile Scanner] Highlight canvas: ${highlightCanvas.width}x${highlightCanvas.height}`);
         console.log(`[Mobile Scanner] Starting interval at 1 FPS`);
 
         // Set highlight canvas to match video for vector drawing
         highlightCanvas.width = video.videoWidth;
         highlightCanvas.height = video.videoHeight;
-        const highlightCtx = highlightCanvas.getContext('2d', { willReadFrequently: true });
+        const highlightCtx = highlightCanvas.getContext("2d", { willReadFrequently: true });
         if (!highlightCtx) return;
 
         // Use requestAnimationFrame with adaptive throttle based on device performance
@@ -399,7 +412,7 @@ export default function MobileScannerPage() {
                 const bl = { x: corners.bottomLeftCorner.x * scaleFactor, y: corners.bottomLeftCorner.y * scaleFactor };
 
                 // Draw green lines connecting corners
-                highlightCtx.strokeStyle = '#00FF00';
+                highlightCtx.strokeStyle = "#00FF00";
                 highlightCtx.lineWidth = 4;
                 highlightCtx.beginPath();
                 highlightCtx.moveTo(tl.x, tl.y);
@@ -443,15 +456,19 @@ export default function MobileScannerPage() {
               }
 
               if (frameCount <= 10) {
-                console.log(`[Mobile Scanner] Frame ${frameCount}: ${Math.round(totalTime)}ms total (copy: ${Math.round(copyTime)}ms, detect: ${Math.round(detectionTime)}ms, draw: ${Math.round(drawTime)}ms) - interval: ${detectionInterval}ms`);
+                console.log(
+                  `[Mobile Scanner] Frame ${frameCount}: ${Math.round(totalTime)}ms total (copy: ${Math.round(copyTime)}ms, detect: ${Math.round(detectionTime)}ms, draw: ${Math.round(drawTime)}ms) - interval: ${detectionInterval}ms`,
+                );
               }
 
               if (frameCount === 10) {
                 const avg = frameTimes.reduce((a, b) => a + b, 0) / frameTimes.length;
-                console.log(`[Mobile Scanner] Average of first 10 frames: ${Math.round(avg)}ms - Adaptive rate: ${Math.round(1000/detectionInterval)} FPS`);
+                console.log(
+                  `[Mobile Scanner] Average of first 10 frames: ${Math.round(avg)}ms - Adaptive rate: ${Math.round(1000 / detectionInterval)} FPS`,
+                );
               }
             } catch (err) {
-              console.error('[Mobile Scanner] Detection error:', err);
+              console.error("[Mobile Scanner] Detection error:", err);
             }
           }
 
@@ -471,16 +488,18 @@ export default function MobileScannerPage() {
         const video = videoRef.current;
 
         if (!video) {
-          setLoadingStatus('No video element ✗');
-          console.log('[Mobile Scanner] No video element');
+          setLoadingStatus("No video element ✗");
+          console.log("[Mobile Scanner] No video element");
           return;
         }
 
-        console.log(`[Mobile Scanner] Video check: readyState=${video.readyState}, width=${video.videoWidth}, height=${video.videoHeight}`);
+        console.log(
+          `[Mobile Scanner] Video check: readyState=${video.readyState}, width=${video.videoWidth}, height=${video.videoHeight}`,
+        );
 
         if (video.readyState >= 2 && video.videoWidth > 0 && video.videoHeight > 0) {
-          setLoadingStatus('Detection starting... ✓');
-          console.log('[Mobile Scanner] ✓ Video ready, starting detection now');
+          setLoadingStatus("Detection starting... ✓");
+          console.log("[Mobile Scanner] ✓ Video ready, starting detection now");
           startHighlighting();
         } else if (retryCount < 50) {
           // Retry up to 50 times (5 seconds)
@@ -489,24 +508,24 @@ export default function MobileScannerPage() {
           console.log(`[Mobile Scanner] Video not ready yet, retry ${retryCount}/50...`);
           retryTimeout = window.setTimeout(startWhenReady, 100);
         } else {
-          setLoadingStatus('Video failed to load ✗');
-          console.error('[Mobile Scanner] ✗ Video failed to become ready after 5 seconds');
+          setLoadingStatus("Video failed to load ✗");
+          console.error("[Mobile Scanner] ✗ Video failed to become ready after 5 seconds");
         }
       };
 
       // Add event listener as fallback
       const videoElement = videoRef.current;
       if (videoElement) {
-        console.log('[Mobile Scanner] Adding loadedmetadata listener');
-        videoElement.addEventListener('loadedmetadata', startWhenReady);
+        console.log("[Mobile Scanner] Adding loadedmetadata listener");
+        videoElement.addEventListener("loadedmetadata", startWhenReady);
         // Also try immediately
         startWhenReady();
       } else {
-        console.error('[Mobile Scanner] No video element available');
+        console.error("[Mobile Scanner] No video element available");
       }
 
       return () => {
-        console.log('[Mobile Scanner] Cleanup: Stopping detection');
+        console.log("[Mobile Scanner] Cleanup: Stopping detection");
 
         // Clean up animation frame
         if (highlightIntervalRef.current) {
@@ -522,7 +541,7 @@ export default function MobileScannerPage() {
 
         // Clean up event listener
         if (videoElement) {
-          videoElement.removeEventListener('loadedmetadata', startWhenReady);
+          videoElement.removeEventListener("loadedmetadata", startWhenReady);
         }
       };
     }
@@ -536,7 +555,7 @@ export default function MobileScannerPage() {
     try {
       const video = videoRef.current;
       const canvas = canvasRef.current;
-      const context = canvas.getContext('2d');
+      const context = canvas.getContext("2d");
 
       if (!context) return;
 
@@ -551,9 +570,9 @@ export default function MobileScannerPage() {
       if (autoEnhance && scannerRef.current && openCvReady) {
         try {
           // Create low-res canvas for detection (faster processing)
-          const detectionCanvas = document.createElement('canvas');
-          const detectionCtx = detectionCanvas.getContext('2d', { willReadFrequently: true });
-          if (!detectionCtx) throw new Error('Cannot create detection context');
+          const detectionCanvas = document.createElement("canvas");
+          const detectionCtx = detectionCanvas.getContext("2d", { willReadFrequently: true });
+          if (!detectionCtx) throw new Error("Cannot create detection context");
 
           const scale = DETECTION_WIDTH / video.videoWidth;
           detectionCanvas.width = DETECTION_WIDTH;
@@ -573,22 +592,37 @@ export default function MobileScannerPage() {
             if (cornerPoints) {
               const scaleFactor = 1 / scale;
               const scaledCorners = {
-                topLeftCorner: { x: cornerPoints.topLeftCorner.x * scaleFactor, y: cornerPoints.topLeftCorner.y * scaleFactor },
-                topRightCorner: { x: cornerPoints.topRightCorner.x * scaleFactor, y: cornerPoints.topRightCorner.y * scaleFactor },
-                bottomLeftCorner: { x: cornerPoints.bottomLeftCorner.x * scaleFactor, y: cornerPoints.bottomLeftCorner.y * scaleFactor },
-                bottomRightCorner: { x: cornerPoints.bottomRightCorner.x * scaleFactor, y: cornerPoints.bottomRightCorner.y * scaleFactor },
+                topLeftCorner: {
+                  x: cornerPoints.topLeftCorner.x * scaleFactor,
+                  y: cornerPoints.topLeftCorner.y * scaleFactor,
+                },
+                topRightCorner: {
+                  x: cornerPoints.topRightCorner.x * scaleFactor,
+                  y: cornerPoints.topRightCorner.y * scaleFactor,
+                },
+                bottomLeftCorner: {
+                  x: cornerPoints.bottomLeftCorner.x * scaleFactor,
+                  y: cornerPoints.bottomLeftCorner.y * scaleFactor,
+                },
+                bottomRightCorner: {
+                  x: cornerPoints.bottomRightCorner.x * scaleFactor,
+                  y: cornerPoints.bottomRightCorner.y * scaleFactor,
+                },
               };
 
               // Use scaled corners for extraction
               const { topLeftCorner, topRightCorner, bottomLeftCorner, bottomRightCorner } = scaledCorners;
 
-              console.log('Document detected at full resolution:', {
+              console.log("Document detected at full resolution:", {
                 corners: scaledCorners,
               });
 
               // Calculate width and height of the document
               const topWidth = Math.hypot(topRightCorner.x - topLeftCorner.x, topRightCorner.y - topLeftCorner.y);
-              const bottomWidth = Math.hypot(bottomRightCorner.x - bottomLeftCorner.x, bottomRightCorner.y - bottomLeftCorner.y);
+              const bottomWidth = Math.hypot(
+                bottomRightCorner.x - bottomLeftCorner.x,
+                bottomRightCorner.y - bottomLeftCorner.y,
+              );
               const leftHeight = Math.hypot(bottomLeftCorner.x - topLeftCorner.x, bottomLeftCorner.y - topLeftCorner.y);
               const rightHeight = Math.hypot(bottomRightCorner.x - topRightCorner.x, bottomRightCorner.y - topRightCorner.y);
 
@@ -603,24 +637,24 @@ export default function MobileScannerPage() {
               mat.delete();
 
               // Use high quality JPEG compression to preserve image quality
-              finalDataUrl = resultCanvas.toDataURL('image/jpeg', 0.95);
+              finalDataUrl = resultCanvas.toDataURL("image/jpeg", 0.95);
             } else {
-              console.log('No corners detected, using original');
+              console.log("No corners detected, using original");
               mat.delete();
-              finalDataUrl = canvas.toDataURL('image/jpeg', 0.95);
+              finalDataUrl = canvas.toDataURL("image/jpeg", 0.95);
             }
           } else {
-            console.log('No contour detected, using original');
+            console.log("No contour detected, using original");
             mat.delete();
-            finalDataUrl = canvas.toDataURL('image/jpeg', 0.95);
+            finalDataUrl = canvas.toDataURL("image/jpeg", 0.95);
           }
         } catch (err) {
-          console.warn('jscanify processing failed, using original image:', err);
-          finalDataUrl = canvas.toDataURL('image/jpeg', 0.95);
+          console.warn("jscanify processing failed, using original image:", err);
+          finalDataUrl = canvas.toDataURL("image/jpeg", 0.95);
         }
       } else {
         // Auto-enhance disabled or jscanify not available - use original at high quality
-        finalDataUrl = canvas.toDataURL('image/jpeg', 0.95);
+        finalDataUrl = canvas.toDataURL("image/jpeg", 0.95);
       }
 
       setCurrentPreview(finalDataUrl);
@@ -669,7 +703,7 @@ export default function MobileScannerPage() {
         const dataUrl = imagesToUpload[i];
         const response = await fetch(dataUrl);
         const blob = await response.blob();
-        const file = new File([blob], `scan-${Date.now()}-${i}.jpg`, { type: 'image/jpeg' });
+        const file = new File([blob], `scan-${Date.now()}-${i}.jpg`, { type: "image/jpeg" });
         files.push(file);
         setUploadProgress(((i + 1) / (imagesToUpload.length + 1)) * 50); // 0-50% for conversion
       }
@@ -677,16 +711,16 @@ export default function MobileScannerPage() {
       // Upload to backend
       const formData = new FormData();
       files.forEach((file) => {
-        formData.append('files', file);
+        formData.append("files", file);
       });
 
       const uploadResponse = await fetch(`/api/v1/mobile-scanner/upload/${sessionId}`, {
-        method: 'POST',
+        method: "POST",
         body: formData,
       });
 
       if (!uploadResponse.ok) {
-        throw new Error('Upload failed');
+        throw new Error("Upload failed");
       }
 
       setUploadProgress(100);
@@ -697,12 +731,12 @@ export default function MobileScannerPage() {
         window.close();
         // Fallback if window.close() doesn't work (some browsers block it)
         if (!window.closed) {
-          navigate('/');
+          navigate("/");
         }
       }, 1500);
     } catch (err) {
-      console.error('Upload failed:', err);
-      setUploadError(t('mobileScanner.uploadFailed', 'Upload failed. Please try again.'));
+      console.error("Upload failed:", err);
+      setUploadError(t("mobileScanner.uploadFailed", "Upload failed. Please try again."));
     } finally {
       setIsUploading(false);
     }
@@ -725,17 +759,17 @@ export default function MobileScannerPage() {
         advanced: [{ torch: !torchEnabled } as any], // Cast to any for experimental torch API
       } as any);
       setTorchEnabled(!torchEnabled);
-      console.log('Torch:', !torchEnabled ? 'ON' : 'OFF');
+      console.log("Torch:", !torchEnabled ? "ON" : "OFF");
     } catch (err) {
-      console.error('Failed to toggle torch:', err);
+      console.error("Failed to toggle torch:", err);
     }
   }, [torchEnabled]);
 
   // Show loading while validating
   if (sessionValid === null) {
     return (
-      <Box p="xl" style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '1rem' }}>
-        <Text size="lg">{t('mobileScanner.validating', 'Validating session...')}</Text>
+      <Box p="xl" style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "1rem" }}>
+        <Text size="lg">{t("mobileScanner.validating", "Validating session...")}</Text>
       </Box>
     );
   }
@@ -744,8 +778,8 @@ export default function MobileScannerPage() {
   if (!sessionValid || !sessionId) {
     return (
       <Box p="xl">
-        <Alert color="red" title={t('mobileScanner.sessionInvalid', 'Session Error')}>
-          {sessionError || t('mobileScanner.noSessionMessage', 'Session not found. Please try again.')}
+        <Alert color="red" title={t("mobileScanner.sessionInvalid", "Session Error")}>
+          {sessionError || t("mobileScanner.noSessionMessage", "Session not found. Please try again.")}
         </Alert>
       </Box>
     );
@@ -755,20 +789,20 @@ export default function MobileScannerPage() {
     return (
       <Box
         style={{
-          display: 'flex',
-          flexDirection: 'column',
-          alignItems: 'center',
-          justifyContent: 'center',
-          height: '100dvh',
-          padding: '2rem',
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center",
+          height: "100dvh",
+          padding: "2rem",
         }}
       >
-        <CheckCircleRoundedIcon style={{ fontSize: '4rem', color: 'var(--mantine-color-green-6)' }} />
+        <CheckCircleRoundedIcon style={{ fontSize: "4rem", color: "var(--mantine-color-green-6)" }} />
         <Text size="xl" fw="bold" mt="md">
-          {t('mobileScanner.uploadSuccess', 'Upload Successful!')}
+          {t("mobileScanner.uploadSuccess", "Upload Successful!")}
         </Text>
         <Text size="sm" c="dimmed">
-          {t('mobileScanner.uploadSuccessMessage', 'Your images have been transferred.')}
+          {t("mobileScanner.uploadSuccessMessage", "Your images have been transferred.")}
         </Text>
       </Box>
     );
@@ -777,45 +811,40 @@ export default function MobileScannerPage() {
   return (
     <Box
       style={{
-        minHeight: '100dvh',
-        background: 'var(--bg-background)',
-        display: 'flex',
-        flexDirection: 'column',
+        minHeight: "100dvh",
+        background: "var(--bg-background)",
+        display: "flex",
+        flexDirection: "column",
       }}
     >
       {/* Header */}
       <Box
         p="md"
         style={{
-          background: 'var(--bg-toolbar)',
-          borderBottom: '1px solid var(--border-subtle)',
+          background: "var(--bg-toolbar)",
+          borderBottom: "1px solid var(--border-subtle)",
         }}
       >
         <Group gap="sm" align="center">
           <img
             src={brandIconSrc}
-            alt={t('home.mobile.brandAlt', 'Stirling PDF logo')}
-            style={{ height: '32px', width: '32px' }}
-          />
-          <img
-            src={brandTextSrc}
-            alt="Stirling PDF"
-            style={{ height: '24px' }}
+            alt={t("home.mobile.brandAlt", "Stirling PDF logo")}
+            style={{ height: "32px", width: "32px" }}
           />
+          <img src={brandTextSrc} alt="Stirling PDF" style={{ height: "24px" }} />
         </Group>
       </Box>
 
       {/* Status Banner - only show during camera loading or errors */}
-      {loadingStatus && mode === 'camera' && !loadingStatus.includes('✓') && (
+      {loadingStatus && mode === "camera" && !loadingStatus.includes("✓") && (
         <Box
           p="xs"
           style={{
-            background: loadingStatus.includes('✗') ? 'var(--mantine-color-red-1)' :
-                       'var(--mantine-color-blue-1)',
-            borderBottom: '1px solid var(--border-subtle)',
-            fontSize: '0.85rem',
-            fontFamily: 'monospace',
-            textAlign: 'center',
+            background: loadingStatus.includes("✗") ? "var(--mantine-color-red-1)" : "var(--mantine-color-blue-1)",
+            borderBottom: "1px solid var(--border-subtle)",
+            fontSize: "0.85rem",
+            fontFamily: "monospace",
+            textAlign: "center",
           }}
         >
           {loadingStatus}
@@ -833,7 +862,7 @@ export default function MobileScannerPage() {
       {isUploading && (
         <Box p="sm">
           <Text size="sm" mb="xs">
-            {t('mobileScanner.uploading', 'Uploading...')}
+            {t("mobileScanner.uploading", "Uploading...")}
           </Text>
           <Progress value={uploadProgress} animated />
         </Box>
@@ -848,42 +877,45 @@ export default function MobileScannerPage() {
       )}
 
       {/* Choice screen */}
-      {mode === 'choice' && !currentPreview && (
-        <Stack gap="lg" p="xl" align="center" style={{ maxWidth: '500px', margin: '0 auto' }}>
+      {mode === "choice" && !currentPreview && (
+        <Stack gap="lg" p="xl" align="center" style={{ maxWidth: "500px", margin: "0 auto" }}>
           <Stack gap="xs" align="center">
             <Text size="xl" fw={700} ta="center">
-              {t('mobileScanner.chooseMethod', 'Choose Upload Method')}
+              {t("mobileScanner.chooseMethod", "Choose Upload Method")}
             </Text>
             <Text size="sm" c="dimmed" ta="center">
-              {t('mobileScanner.chooseMethodDescription', 'Select how you want to scan and upload documents')}
+              {t("mobileScanner.chooseMethodDescription", "Select how you want to scan and upload documents")}
             </Text>
           </Stack>
 
-          <Stack gap="md" style={{ width: '100%' }}>
+          <Stack gap="md" style={{ width: "100%" }}>
             <Card
               shadow="sm"
               padding="xl"
               radius="md"
               withBorder
-              style={{ cursor: 'pointer' }}
-              onClick={() => setMode('camera')}
+              style={{ cursor: "pointer" }}
+              onClick={() => setMode("camera")}
               styles={{
                 root: {
-                  transition: 'transform 0.2s, box-shadow 0.2s',
-                  '&:hover': {
-                    transform: 'scale(1.02)',
-                    boxShadow: 'var(--mantine-shadow-md)',
+                  transition: "transform 0.2s, box-shadow 0.2s",
+                  "&:hover": {
+                    transform: "scale(1.02)",
+                    boxShadow: "var(--mantine-shadow-md)",
                   },
                 },
               }}
             >
               <Stack align="center" gap="md">
-                <PhotoCameraRoundedIcon style={{ fontSize: '3rem', color: 'var(--mantine-color-blue-6)' }} />
+                <PhotoCameraRoundedIcon style={{ fontSize: "3rem", color: "var(--mantine-color-blue-6)" }} />
                 <Text size="lg" fw={600}>
-                  {t('mobileScanner.camera', 'Camera')}
+                  {t("mobileScanner.camera", "Camera")}
                 </Text>
                 <Text size="sm" c="dimmed" ta="center">
-                  {t('mobileScanner.cameraDescription', 'Scan documents using your device camera with automatic edge detection')}
+                  {t(
+                    "mobileScanner.cameraDescription",
+                    "Scan documents using your device camera with automatic edge detection",
+                  )}
                 </Text>
               </Stack>
             </Card>
@@ -893,25 +925,25 @@ export default function MobileScannerPage() {
               padding="xl"
               radius="md"
               withBorder
-              style={{ cursor: 'pointer' }}
-              onClick={() => setMode('file')}
+              style={{ cursor: "pointer" }}
+              onClick={() => setMode("file")}
               styles={{
                 root: {
-                  transition: 'transform 0.2s, box-shadow 0.2s',
-                  '&:hover': {
-                    transform: 'scale(1.02)',
-                    boxShadow: 'var(--mantine-shadow-md)',
+                  transition: "transform 0.2s, box-shadow 0.2s",
+                  "&:hover": {
+                    transform: "scale(1.02)",
+                    boxShadow: "var(--mantine-shadow-md)",
                   },
                 },
               }}
             >
               <Stack align="center" gap="md">
-                <UploadRoundedIcon style={{ fontSize: '3rem', color: 'var(--mantine-color-green-6)' }} />
+                <UploadRoundedIcon style={{ fontSize: "3rem", color: "var(--mantine-color-green-6)" }} />
                 <Text size="lg" fw={600}>
-                  {t('mobileScanner.fileUpload', 'File Upload')}
+                  {t("mobileScanner.fileUpload", "File Upload")}
                 </Text>
                 <Text size="sm" c="dimmed" ta="center">
-                  {t('mobileScanner.fileDescription', 'Upload existing photos or documents from your device')}
+                  {t("mobileScanner.fileDescription", "Upload existing photos or documents from your device")}
                 </Text>
               </Stack>
             </Card>
@@ -920,55 +952,55 @@ export default function MobileScannerPage() {
       )}
 
       {/* Camera interface */}
-      {mode === 'camera' && !currentPreview && (
-        <Box style={{ position: 'relative', height: 'calc(100dvh - 60px)', display: 'flex', flexDirection: 'column' }}>
+      {mode === "camera" && !currentPreview && (
+        <Box style={{ position: "relative", height: "calc(100dvh - 60px)", display: "flex", flexDirection: "column" }}>
           {/* Back button - floating top left */}
           <Button
-            onClick={() => setMode('choice')}
+            onClick={() => setMode("choice")}
             variant="filled"
             size="sm"
             style={{
-              position: 'absolute',
-              top: '1rem',
-              left: '1rem',
+              position: "absolute",
+              top: "1rem",
+              left: "1rem",
               zIndex: 10,
-              backgroundColor: 'rgba(0, 0, 0, 0.6)',
-              backdropFilter: 'blur(8px)',
-              border: 'none',
+              backgroundColor: "rgba(0, 0, 0, 0.6)",
+              backdropFilter: "blur(8px)",
+              border: "none",
             }}
           >
-            ← {t('mobileScanner.back', 'Back')}
+            ← {t("mobileScanner.back", "Back")}
           </Button>
 
           {/* Video feed - fills available space */}
-          <Box style={{ position: 'relative', flex: 1, background: '#000', overflow: 'hidden' }}>
+          <Box style={{ position: "relative", flex: 1, background: "#000", overflow: "hidden" }}>
             <video
               ref={videoRef}
               autoPlay
               playsInline
               muted
               style={{
-                width: '100%',
-                height: '100%',
-                display: 'block',
-                objectFit: 'contain',
+                width: "100%",
+                height: "100%",
+                display: "block",
+                objectFit: "contain",
               }}
             />
-            <canvas ref={canvasRef} style={{ display: 'none' }} />
+            <canvas ref={canvasRef} style={{ display: "none" }} />
             {/* Highlight overlay canvas - shows real-time document edge detection */}
             <canvas
               ref={highlightCanvasRef}
               style={{
-                position: 'absolute',
+                position: "absolute",
                 top: 0,
                 left: 0,
-                width: '100%',
-                height: '100%',
-                pointerEvents: 'none',
+                width: "100%",
+                height: "100%",
+                pointerEvents: "none",
                 opacity: autoEnhance ? 1 : 0,
-                transition: 'opacity 0.2s',
-                objectFit: 'contain',
-                imageRendering: 'auto',
+                transition: "opacity 0.2s",
+                objectFit: "contain",
+                imageRendering: "auto",
               }}
             />
           </Box>
@@ -976,14 +1008,14 @@ export default function MobileScannerPage() {
           {/* Controls bar - fixed at bottom */}
           <Box
             style={{
-              backgroundColor: 'var(--bg-toolbar)',
-              borderTop: '1px solid var(--border-subtle)',
-              padding: '0.75rem 1rem',
+              backgroundColor: "var(--bg-toolbar)",
+              borderTop: "1px solid var(--border-subtle)",
+              padding: "0.75rem 1rem",
             }}
           >
             <Stack gap="sm">
               {/* Settings toggles */}
-              <Group justify="space-around" style={{ width: '100%' }}>
+              <Group justify="space-around" style={{ width: "100%" }}>
                 <Group gap="xs">
                   <Switch
                     size="sm"
@@ -991,28 +1023,19 @@ export default function MobileScannerPage() {
                     onChange={(e) => setAutoEnhance(e.currentTarget.checked)}
                     disabled={!openCvReady}
                   />
-                  <Text size="xs">{t('mobileScanner.edgeDetection', 'Edge Detection')}</Text>
+                  <Text size="xs">{t("mobileScanner.edgeDetection", "Edge Detection")}</Text>
                 </Group>
                 {torchSupported && (
                   <Group gap="xs">
                     <Switch size="sm" checked={torchEnabled} onChange={toggleTorch} />
-                    <Text size="xs">{t('mobileScanner.flashlight', 'Flash')}</Text>
+                    <Text size="xs">{t("mobileScanner.flashlight", "Flash")}</Text>
                   </Group>
                 )}
               </Group>
 
               {/* Capture button */}
-              <Button
-                fullWidth
-                size="lg"
-                onClick={captureImage}
-                loading={isProcessing}
-                variant="filled"
-                radius="xl"
-              >
-                {isProcessing
-                  ? t('mobileScanner.processing', 'Processing...')
-                  : t('mobileScanner.capture', 'Capture')}
+              <Button fullWidth size="lg" onClick={captureImage} loading={isProcessing} variant="filled" radius="xl">
+                {isProcessing ? t("mobileScanner.processing", "Processing...") : t("mobileScanner.capture", "Capture")}
               </Button>
             </Stack>
           </Box>
@@ -1020,29 +1043,24 @@ export default function MobileScannerPage() {
       )}
 
       {/* File upload interface */}
-      {mode === 'file' && !currentPreview && (
-        <Stack gap="lg" p="xl" align="center" style={{ maxWidth: '500px', margin: '0 auto' }}>
-          <Button
-            onClick={() => setMode('choice')}
-            variant="subtle"
-            size="sm"
-            style={{ alignSelf: 'flex-start' }}
-          >
-            ← {t('mobileScanner.back', 'Back')}
+      {mode === "file" && !currentPreview && (
+        <Stack gap="lg" p="xl" align="center" style={{ maxWidth: "500px", margin: "0 auto" }}>
+          <Button onClick={() => setMode("choice")} variant="subtle" size="sm" style={{ alignSelf: "flex-start" }}>
+            ← {t("mobileScanner.back", "Back")}
           </Button>
 
-          <Card shadow="sm" padding="xl" radius="md" withBorder style={{ width: '100%' }}>
+          <Card shadow="sm" padding="xl" radius="md" withBorder style={{ width: "100%" }}>
             <Stack align="center" gap="lg">
-              <UploadRoundedIcon style={{ fontSize: '4rem', color: 'var(--mantine-color-gray-5)' }} />
+              <UploadRoundedIcon style={{ fontSize: "4rem", color: "var(--mantine-color-gray-5)" }} />
               <Text size="lg" fw={600} ta="center">
-                {t('mobileScanner.selectFilesPrompt', 'Select files to upload')}
+                {t("mobileScanner.selectFilesPrompt", "Select files to upload")}
               </Text>
               <input
                 ref={fileInputRef}
                 type="file"
                 accept="image/*"
                 multiple
-                style={{ display: 'none' }}
+                style={{ display: "none" }}
                 onChange={handleFileSelect}
               />
               <Button
@@ -1052,7 +1070,7 @@ export default function MobileScannerPage() {
                 onClick={() => fileInputRef.current?.click()}
                 leftSection={<AddPhotoAlternateRoundedIcon />}
               >
-                {t('mobileScanner.selectImage', 'Select Image')}
+                {t("mobileScanner.selectImage", "Select Image")}
               </Button>
             </Stack>
           </Card>
@@ -1061,31 +1079,45 @@ export default function MobileScannerPage() {
 
       {/* Preview interface */}
       {currentPreview && (
-        <Box style={{ position: 'relative', height: 'calc(100dvh - 60px)', display: 'flex', flexDirection: 'column' }}>
+        <Box style={{ position: "relative", height: "calc(100dvh - 60px)", display: "flex", flexDirection: "column" }}>
           {/* Preview image - fills available space */}
-          <Box style={{ position: 'relative', flex: 1, background: '#000', overflow: 'hidden', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-            <img src={currentPreview} alt="Preview" style={{ maxWidth: '100%', maxHeight: '100%', display: 'block', objectFit: 'contain' }} />
+          <Box
+            style={{
+              position: "relative",
+              flex: 1,
+              background: "#000",
+              overflow: "hidden",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+            }}
+          >
+            <img
+              src={currentPreview}
+              alt="Preview"
+              style={{ maxWidth: "100%", maxHeight: "100%", display: "block", objectFit: "contain" }}
+            />
           </Box>
 
           {/* Controls bar - fixed at bottom */}
           <Box
             style={{
-              backgroundColor: 'var(--bg-toolbar)',
-              borderTop: '1px solid var(--border-subtle)',
-              padding: '0.75rem 1rem',
+              backgroundColor: "var(--bg-toolbar)",
+              borderTop: "1px solid var(--border-subtle)",
+              padding: "0.75rem 1rem",
             }}
           >
             <Stack gap="sm">
               <Group grow>
                 <Button variant="default" onClick={retake} size="lg">
-                  {t('mobileScanner.retake', 'Retake')}
+                  {t("mobileScanner.retake", "Retake")}
                 </Button>
                 <Button variant="filled" onClick={addToBatch} size="lg">
-                  {t('mobileScanner.addToBatch', 'Add to Batch')}
+                  {t("mobileScanner.addToBatch", "Add to Batch")}
                 </Button>
               </Group>
               <Button fullWidth variant="filled" size="lg" onClick={uploadImages} loading={isUploading} radius="xl">
-                {t('mobileScanner.upload', 'Upload')}
+                {t("mobileScanner.upload", "Upload")}
               </Button>
             </Stack>
           </Box>
@@ -1093,33 +1125,33 @@ export default function MobileScannerPage() {
       )}
 
       {capturedImages.length > 0 && (
-        <Box p="sm" style={{ borderTop: '1px solid var(--border-subtle)' }}>
+        <Box p="sm" style={{ borderTop: "1px solid var(--border-subtle)" }}>
           <Group justify="space-between" mb="sm">
             <Text size="sm" fw={600}>
-              {t('mobileScanner.batchImages', 'Batch')} ({capturedImages.length})
+              {t("mobileScanner.batchImages", "Batch")} ({capturedImages.length})
             </Text>
             <Group gap="xs">
               <Button size="xs" variant="outline" onClick={clearBatch} color="red">
-                {t('mobileScanner.clearBatch', 'Clear')}
+                {t("mobileScanner.clearBatch", "Clear")}
               </Button>
               <Button size="xs" onClick={uploadImages} loading={isUploading}>
-                {t('mobileScanner.uploadAll', 'Upload All')}
+                {t("mobileScanner.uploadAll", "Upload All")}
               </Button>
             </Group>
           </Group>
-          <Box style={{ display: 'flex', gap: 'var(--space-sm)', overflowX: 'auto', paddingBottom: 'var(--space-sm)' }}>
+          <Box style={{ display: "flex", gap: "var(--space-sm)", overflowX: "auto", paddingBottom: "var(--space-sm)" }}>
             {capturedImages.map((img, idx) => (
               <Box
                 key={idx}
                 style={{
-                  minWidth: '80px',
-                  height: '80px',
-                  borderRadius: 'var(--radius-sm)',
-                  overflow: 'hidden',
-                  border: '2px solid var(--border-subtle)',
+                  minWidth: "80px",
+                  height: "80px",
+                  borderRadius: "var(--radius-sm)",
+                  overflow: "hidden",
+                  border: "2px solid var(--border-subtle)",
                 }}
               >
-                <img src={img} alt={`Capture ${idx + 1}`} style={{ width: '100%', height: '100%', objectFit: 'cover' }} />
+                <img src={img} alt={`Capture ${idx + 1}`} style={{ width: "100%", height: "100%", objectFit: "cover" }} />
               </Box>
             ))}
           </Box>
diff --git a/frontend/src/core/services/accountService.ts b/frontend/src/core/services/accountService.ts
index 814065c93e..47f0c0ce82 100644
--- a/frontend/src/core/services/accountService.ts
+++ b/frontend/src/core/services/accountService.ts
@@ -1,5 +1,5 @@
-import { MfaSetupResponse } from '@app/responses/Mfa/MfaResponse';
-import apiClient from '@app/services/apiClient';
+import { MfaSetupResponse } from "@app/responses/Mfa/MfaResponse";
+import apiClient from "@app/services/apiClient";
 
 export interface AccountData {
   username: string;
@@ -28,7 +28,7 @@ export const accountService = {
    * This is a public endpoint - doesn't require authentication
    */
   async getLoginPageData(): Promise<LoginPageData> {
-    const response = await apiClient.get<LoginPageData>('/api/v1/proprietary/ui-data/login');
+    const response = await apiClient.get<LoginPageData>("/api/v1/proprietary/ui-data/login");
     return response.data;
   },
 
@@ -36,7 +36,7 @@ export const accountService = {
    * Get current user account data
    */
   async getAccountData(): Promise<AccountData> {
-    const response = await apiClient.get<AccountData>('/api/v1/proprietary/ui-data/account', { suppressErrorToast: true });
+    const response = await apiClient.get<AccountData>("/api/v1/proprietary/ui-data/account", { suppressErrorToast: true });
     return response.data;
   },
 
@@ -45,9 +45,9 @@ export const accountService = {
    */
   async changePassword(currentPassword: string, newPassword: string): Promise<void> {
     const formData = new FormData();
-    formData.append('currentPassword', currentPassword);
-    formData.append('newPassword', newPassword);
-    await apiClient.post('/api/v1/user/change-password', formData);
+    formData.append("currentPassword", currentPassword);
+    formData.append("newPassword", newPassword);
+    await apiClient.post("/api/v1/user/change-password", formData);
   },
 
   /**
@@ -55,10 +55,10 @@ export const accountService = {
    */
   async changePasswordOnLogin(currentPassword: string, newPassword: string, confirmPassword: string): Promise<void> {
     const formData = new FormData();
-    formData.append('currentPassword', currentPassword);
-    formData.append('newPassword', newPassword);
-    formData.append('confirmPassword', confirmPassword);
-    await apiClient.post('/api/v1/user/change-password-on-login', formData, { responseType: 'json'});
+    formData.append("currentPassword", currentPassword);
+    formData.append("newPassword", newPassword);
+    formData.append("confirmPassword", confirmPassword);
+    await apiClient.post("/api/v1/user/change-password-on-login", formData, { responseType: "json" });
   },
 
   /**
@@ -66,25 +66,25 @@ export const accountService = {
    */
   async changeUsername(newUsername: string, currentPassword: string): Promise<void> {
     const formData = new FormData();
-    formData.append('currentPasswordChangeUsername', currentPassword);
-    formData.append('newUsername', newUsername);
-    await apiClient.post('/api/v1/user/change-username', formData);
+    formData.append("currentPasswordChangeUsername", currentPassword);
+    formData.append("newUsername", newUsername);
+    await apiClient.post("/api/v1/user/change-username", formData);
   },
 
   async requestMfaSetup(): Promise<MfaSetupResponse> {
-    const response = await apiClient.get<MfaSetupResponse>('/api/v1/auth/mfa/setup', { suppressErrorToast: true });
+    const response = await apiClient.get<MfaSetupResponse>("/api/v1/auth/mfa/setup", { suppressErrorToast: true });
     return response.data;
   },
 
   async enableMfa(code: string): Promise<void> {
-    await apiClient.post('/api/v1/auth/mfa/enable', { code }, { skipAuthRedirect: true });
+    await apiClient.post("/api/v1/auth/mfa/enable", { code }, { skipAuthRedirect: true });
   },
 
   async disableMfa(code: string): Promise<void> {
-    await apiClient.post('/api/v1/auth/mfa/disable', { code }, { skipAuthRedirect: true });
+    await apiClient.post("/api/v1/auth/mfa/disable", { code }, { skipAuthRedirect: true });
   },
 
   async cancelMfaSetup(): Promise<void> {
-    await apiClient.post('/api/v1/auth/mfa/setup/cancel', undefined, { suppressErrorToast: true });
+    await apiClient.post("/api/v1/auth/mfa/setup/cancel", undefined, { suppressErrorToast: true });
   },
 };
diff --git a/frontend/src/core/services/apiClient.ts b/frontend/src/core/services/apiClient.ts
index 0a5e7be141..4e4b1475e2 100644
--- a/frontend/src/core/services/apiClient.ts
+++ b/frontend/src/core/services/apiClient.ts
@@ -1,12 +1,12 @@
-import axios from 'axios';
-import { handleHttpError } from '@app/services/httpErrorHandler';
-import { setupApiInterceptors } from '@app/services/apiClientSetup';
-import { getApiBaseUrl } from '@app/services/apiClientConfig';
+import axios from "axios";
+import { handleHttpError } from "@app/services/httpErrorHandler";
+import { setupApiInterceptors } from "@app/services/apiClientSetup";
+import { getApiBaseUrl } from "@app/services/apiClientConfig";
 
 // Create axios instance with default config
 const apiClient = axios.create({
   baseURL: getApiBaseUrl(),
-  responseType: 'json',
+  responseType: "json",
   withCredentials: true,
 });
 
@@ -19,9 +19,8 @@ apiClient.interceptors.response.use(
   async (error) => {
     await handleHttpError(error); // Handle error (shows toast unless suppressed)
     return Promise.reject(error);
-  }
+  },
 );
 
-
 // ---------- Exports ----------
 export default apiClient;
diff --git a/frontend/src/core/services/apiClientConfig.ts b/frontend/src/core/services/apiClientConfig.ts
index 716c73ace7..e0b3fe720b 100644
--- a/frontend/src/core/services/apiClientConfig.ts
+++ b/frontend/src/core/services/apiClientConfig.ts
@@ -11,7 +11,7 @@
  */
 export function getApiBaseUrl(): string {
   // Runtime override to fix hardcoded localhost in builds
-  if (typeof window !== 'undefined' && (window as any).STIRLING_PDF_API_BASE_URL) {
+  if (typeof window !== "undefined" && (window as any).STIRLING_PDF_API_BASE_URL) {
     return (window as any).STIRLING_PDF_API_BASE_URL;
   }
 
diff --git a/frontend/src/core/services/apiClientSetup.ts b/frontend/src/core/services/apiClientSetup.ts
index 7bc356a7f0..ff19a76fd2 100644
--- a/frontend/src/core/services/apiClientSetup.ts
+++ b/frontend/src/core/services/apiClientSetup.ts
@@ -1,14 +1,14 @@
-import type { AxiosInstance } from 'axios';
-import { getBrowserId } from '@app/utils/browserIdentifier';
+import type { AxiosInstance } from "axios";
+import { getBrowserId } from "@app/utils/browserIdentifier";
 
 export function setupApiInterceptors(client: AxiosInstance): void {
   // Add browser ID header for WAU tracking
   client.interceptors.request.use(
     (config) => {
       const browserId = getBrowserId();
-      config.headers['X-Browser-Id'] = browserId;
+      config.headers["X-Browser-Id"] = browserId;
       return config;
     },
-    (error) => Promise.reject(error)
+    (error) => Promise.reject(error),
   );
 }
diff --git a/frontend/src/core/services/auditService.ts b/frontend/src/core/services/auditService.ts
index 4b37f12bf9..97608cf061 100644
--- a/frontend/src/core/services/auditService.ts
+++ b/frontend/src/core/services/auditService.ts
@@ -1,4 +1,4 @@
-import apiClient from '@app/services/apiClient';
+import apiClient from "@app/services/apiClient";
 
 export interface AuditSystemStatus {
   enabled: boolean;
@@ -73,7 +73,7 @@ const auditService = {
    * Get audit system status
    */
   async getSystemStatus(): Promise<AuditSystemStatus> {
-    const response = await apiClient.get('/api/v1/proprietary/ui-data/audit-dashboard', {
+    const response = await apiClient.get("/api/v1/proprietary/ui-data/audit-dashboard", {
       suppressErrorToast: true,
     });
     const data = response.data;
@@ -94,8 +94,8 @@ const auditService = {
   /**
    * Get audit statistics and KPI data
    */
-  async getStats(timePeriod: 'day' | 'week' | 'month' = 'week'): Promise<AuditStats> {
-    const response = await apiClient.get<AuditStats>('/api/v1/proprietary/ui-data/audit-stats', {
+  async getStats(timePeriod: "day" | "week" | "month" = "week"): Promise<AuditStats> {
+    const response = await apiClient.get<AuditStats>("/api/v1/proprietary/ui-data/audit-stats", {
       params: { period: timePeriod },
     });
     return response.data;
@@ -105,7 +105,7 @@ const auditService = {
    * Get audit events with pagination and filters
    */
   async getEvents(filters: AuditFilters = {}): Promise<AuditEventsResponse> {
-    const response = await apiClient.get<AuditEventsResponse>('/api/v1/proprietary/ui-data/audit-events', {
+    const response = await apiClient.get<AuditEventsResponse>("/api/v1/proprietary/ui-data/audit-events", {
       params: filters,
     });
     return response.data;
@@ -114,8 +114,8 @@ const auditService = {
   /**
    * Get chart data for dashboard
    */
-  async getChartsData(timePeriod: 'day' | 'week' | 'month' = 'week'): Promise<AuditChartsData> {
-    const response = await apiClient.get<AuditChartsData>('/api/v1/proprietary/ui-data/audit-charts', {
+  async getChartsData(timePeriod: "day" | "week" | "month" = "week"): Promise<AuditChartsData> {
+    const response = await apiClient.get<AuditChartsData>("/api/v1/proprietary/ui-data/audit-charts", {
       params: { period: timePeriod },
     });
     return response.data;
@@ -124,13 +124,10 @@ const auditService = {
   /**
    * Export audit data with custom field selection
    */
-  async exportData(
-    format: 'csv' | 'json',
-    filters: AuditFilters = {}
-  ): Promise<Blob> {
-    const response = await apiClient.get('/api/v1/proprietary/ui-data/audit-export', {
+  async exportData(format: "csv" | "json", filters: AuditFilters = {}): Promise<Blob> {
+    const response = await apiClient.get("/api/v1/proprietary/ui-data/audit-export", {
       params: { format, ...filters },
-      responseType: 'blob',
+      responseType: "blob",
     });
     return response.data;
   },
@@ -139,7 +136,7 @@ const auditService = {
    * Get available event types for filtering
    */
   async getEventTypes(): Promise<string[]> {
-    const response = await apiClient.get<string[]>('/api/v1/proprietary/ui-data/audit-event-types');
+    const response = await apiClient.get<string[]>("/api/v1/proprietary/ui-data/audit-event-types");
     return response.data;
   },
 
@@ -147,7 +144,7 @@ const auditService = {
    * Get list of users for filtering
    */
   async getUsers(): Promise<string[]> {
-    const response = await apiClient.get<string[]>('/api/v1/proprietary/ui-data/audit-users');
+    const response = await apiClient.get<string[]>("/api/v1/proprietary/ui-data/audit-users");
     return response.data;
   },
 
@@ -155,7 +152,7 @@ const auditService = {
    * Clear all audit data from the database (irreversible)
    */
   async clearAllAuditData(): Promise<void> {
-    await apiClient.post('/api/v1/proprietary/ui-data/audit-clear-all', {});
+    await apiClient.post("/api/v1/proprietary/ui-data/audit-clear-all", {});
   },
 };
 
diff --git a/frontend/src/core/services/automationStorage.ts b/frontend/src/core/services/automationStorage.ts
index 990e95a7f1..ed4ac5107f 100644
--- a/frontend/src/core/services/automationStorage.ts
+++ b/frontend/src/core/services/automationStorage.ts
@@ -15,9 +15,9 @@ export interface AutomationConfig {
 }
 
 class AutomationStorage {
-  private dbName = 'StirlingPDF_Automations';
+  private dbName = "StirlingPDF_Automations";
   private dbVersion = 1;
-  private storeName = 'automations';
+  private storeName = "automations";
   private db: IDBDatabase | null = null;
 
   async init(): Promise<void> {
@@ -25,7 +25,7 @@ class AutomationStorage {
       const request = indexedDB.open(this.dbName, this.dbVersion);
 
       request.onerror = () => {
-        reject(new Error('Failed to open automation storage database'));
+        reject(new Error("Failed to open automation storage database"));
       };
 
       request.onsuccess = () => {
@@ -35,11 +35,11 @@ class AutomationStorage {
 
       request.onupgradeneeded = (event) => {
         const db = (event.target as IDBOpenDBRequest).result;
-        
+
         if (!db.objectStoreNames.contains(this.storeName)) {
-          const store = db.createObjectStore(this.storeName, { keyPath: 'id' });
-          store.createIndex('name', 'name', { unique: false });
-          store.createIndex('createdAt', 'createdAt', { unique: false });
+          const store = db.createObjectStore(this.storeName, { keyPath: "id" });
+          store.createIndex("name", "name", { unique: false });
+          store.createIndex("createdAt", "createdAt", { unique: false });
         }
       };
     });
@@ -49,27 +49,27 @@ class AutomationStorage {
     if (!this.db) {
       await this.init();
     }
-    
+
     if (!this.db) {
-      throw new Error('Database not initialized');
+      throw new Error("Database not initialized");
     }
-    
+
     return this.db;
   }
 
-  async saveAutomation(automation: Omit<AutomationConfig, 'id' | 'createdAt' | 'updatedAt'>): Promise<AutomationConfig> {
+  async saveAutomation(automation: Omit<AutomationConfig, "id" | "createdAt" | "updatedAt">): Promise<AutomationConfig> {
     const db = await this.ensureDB();
     const timestamp = new Date().toISOString();
-    
+
     const automationWithMeta: AutomationConfig = {
       id: `automation-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`,
       ...automation,
       createdAt: timestamp,
-      updatedAt: timestamp
+      updatedAt: timestamp,
     };
 
     return new Promise((resolve, reject) => {
-      const transaction = db.transaction([this.storeName], 'readwrite');
+      const transaction = db.transaction([this.storeName], "readwrite");
       const store = transaction.objectStore(this.storeName);
       const request = store.add(automationWithMeta);
 
@@ -78,21 +78,21 @@ class AutomationStorage {
       };
 
       request.onerror = () => {
-        reject(new Error('Failed to save automation'));
+        reject(new Error("Failed to save automation"));
       };
     });
   }
 
   async updateAutomation(automation: AutomationConfig): Promise<AutomationConfig> {
     const db = await this.ensureDB();
-    
+
     const updatedAutomation: AutomationConfig = {
       ...automation,
-      updatedAt: new Date().toISOString()
+      updatedAt: new Date().toISOString(),
     };
 
     return new Promise((resolve, reject) => {
-      const transaction = db.transaction([this.storeName], 'readwrite');
+      const transaction = db.transaction([this.storeName], "readwrite");
       const store = transaction.objectStore(this.storeName);
       const request = store.put(updatedAutomation);
 
@@ -101,7 +101,7 @@ class AutomationStorage {
       };
 
       request.onerror = () => {
-        reject(new Error('Failed to update automation'));
+        reject(new Error("Failed to update automation"));
       };
     });
   }
@@ -110,7 +110,7 @@ class AutomationStorage {
     const db = await this.ensureDB();
 
     return new Promise((resolve, reject) => {
-      const transaction = db.transaction([this.storeName], 'readonly');
+      const transaction = db.transaction([this.storeName], "readonly");
       const store = transaction.objectStore(this.storeName);
       const request = store.get(id);
 
@@ -119,7 +119,7 @@ class AutomationStorage {
       };
 
       request.onerror = () => {
-        reject(new Error('Failed to get automation'));
+        reject(new Error("Failed to get automation"));
       };
     });
   }
@@ -128,7 +128,7 @@ class AutomationStorage {
     const db = await this.ensureDB();
 
     return new Promise((resolve, reject) => {
-      const transaction = db.transaction([this.storeName], 'readonly');
+      const transaction = db.transaction([this.storeName], "readonly");
       const store = transaction.objectStore(this.storeName);
       const request = store.getAll();
 
@@ -140,7 +140,7 @@ class AutomationStorage {
       };
 
       request.onerror = () => {
-        reject(new Error('Failed to get automations'));
+        reject(new Error("Failed to get automations"));
       };
     });
   }
@@ -149,7 +149,7 @@ class AutomationStorage {
     const db = await this.ensureDB();
 
     return new Promise((resolve, reject) => {
-      const transaction = db.transaction([this.storeName], 'readwrite');
+      const transaction = db.transaction([this.storeName], "readwrite");
       const store = transaction.objectStore(this.storeName);
       const request = store.delete(id);
 
@@ -158,26 +158,27 @@ class AutomationStorage {
       };
 
       request.onerror = () => {
-        reject(new Error('Failed to delete automation'));
+        reject(new Error("Failed to delete automation"));
       };
     });
   }
 
   async searchAutomations(query: string): Promise<AutomationConfig[]> {
     const automations = await this.getAllAutomations();
-    
+
     if (!query.trim()) {
       return automations;
     }
 
     const lowerQuery = query.toLowerCase();
-    return automations.filter(automation => 
-      automation.name.toLowerCase().includes(lowerQuery) ||
-      (automation.description && automation.description.toLowerCase().includes(lowerQuery)) ||
-      automation.operations.some(op => op.operation.toLowerCase().includes(lowerQuery))
+    return automations.filter(
+      (automation) =>
+        automation.name.toLowerCase().includes(lowerQuery) ||
+        (automation.description && automation.description.toLowerCase().includes(lowerQuery)) ||
+        automation.operations.some((op) => op.operation.toLowerCase().includes(lowerQuery)),
     );
   }
 }
 
 // Export singleton instance
-export const automationStorage = new AutomationStorage();
\ No newline at end of file
+export const automationStorage = new AutomationStorage();
diff --git a/frontend/src/core/services/documentManipulationService.ts b/frontend/src/core/services/documentManipulationService.ts
index 53758f35d6..e40431c63c 100644
--- a/frontend/src/core/services/documentManipulationService.ts
+++ b/frontend/src/core/services/documentManipulationService.ts
@@ -1,5 +1,5 @@
-import { PDFDocument, PDFPage } from '@app/types/pageEditor';
-import { convertSplitPageIdsToIndexes } from '@app/components/pageEditor/utils/splitPositions';
+import { PDFDocument, PDFPage } from "@app/types/pageEditor";
+import { convertSplitPageIdsToIndexes } from "@app/components/pageEditor/utils/splitPositions";
 
 /**
  * Service for applying DOM changes to PDF document state
@@ -10,36 +10,41 @@ export class DocumentManipulationService {
    * Apply all DOM changes (rotations, splits, reordering) to document state
    * Returns single document or multiple documents if splits are present
    */
-  applyDOMChangesToDocument(pdfDocument: PDFDocument, currentDisplayOrder?: PDFDocument, splitPositions?: Set<string>): PDFDocument | PDFDocument[] {
+  applyDOMChangesToDocument(
+    pdfDocument: PDFDocument,
+    currentDisplayOrder?: PDFDocument,
+    splitPositions?: Set<string>,
+  ): PDFDocument | PDFDocument[] {
     // Use current display order (from React state) if provided, otherwise use original order
     const baseDocument = currentDisplayOrder || pdfDocument;
-    
+
     // Apply DOM changes to each page (rotation only now, splits are position-based)
-    let updatedPages = baseDocument.pages.map(page => this.applyPageChanges(page));
-    
+    let updatedPages = baseDocument.pages.map((page) => this.applyPageChanges(page));
+
     // Convert position-based splits to page-based splits for export
-    const resolvedSplitIndexes = splitPositions && splitPositions.size > 0
-      ? convertSplitPageIdsToIndexes(baseDocument, splitPositions)
-      : new Set<number>();
+    const resolvedSplitIndexes =
+      splitPositions && splitPositions.size > 0
+        ? convertSplitPageIdsToIndexes(baseDocument, splitPositions)
+        : new Set<number>();
 
     if (resolvedSplitIndexes.size > 0) {
       updatedPages = updatedPages.map((page, index) => ({
         ...page,
-        splitAfter: resolvedSplitIndexes.has(index)
+        splitAfter: resolvedSplitIndexes.has(index),
       }));
     }
-    
+
     // Create final document with reordered pages and applied changes
     const finalDocument = {
       ...pdfDocument, // Use original document metadata but updated pages
-      pages: updatedPages // Use reordered pages with applied changes
+      pages: updatedPages, // Use reordered pages with applied changes
     };
 
     // Check for splits and return multiple documents if needed
     if (resolvedSplitIndexes.size > 0) {
       return this.createSplitDocuments(finalDocument);
     }
-    
+
     return finalDocument;
   }
 
@@ -47,7 +52,7 @@ export class DocumentManipulationService {
    * Check if document has split markers
    */
   private hasSplitMarkers(document: PDFDocument): boolean {
-    return document.pages.some(page => page.splitAfter);
+    return document.pages.some((page) => page.splitAfter);
   }
 
   /**
@@ -79,9 +84,9 @@ export class DocumentManipulationService {
         documents.push({
           ...document,
           id: `${document.id}_part_${partNumber}`,
-          name: `${document.name.replace(/\.pdf$/i, '')}_part_${partNumber}.pdf`,
+          name: `${document.name.replace(/\.pdf$/i, "")}_part_${partNumber}.pdf`,
           pages: segmentPages,
-          totalPages: segmentPages.length
+          totalPages: segmentPages.length,
         });
         partNumber++;
       }
@@ -114,15 +119,15 @@ export class DocumentManipulationService {
    * Read rotation from DOM element
    */
   private getRotationFromDOM(pageElement: Element, originalPage: PDFPage): number {
-    const img = pageElement.querySelector('img');
+    const img = pageElement.querySelector("img");
     if (img) {
-      const originalRotation = parseInt(img.getAttribute('data-original-rotation') || '0');
+      const originalRotation = parseInt(img.getAttribute("data-original-rotation") || "0");
 
-      const currentTransform = img.style.transform || '';
+      const currentTransform = img.style.transform || "";
       const rotationMatch = currentTransform.match(/rotate\((-?\d+)deg\)/);
       const visualRotation = rotationMatch ? parseInt(rotationMatch[1]) : originalRotation;
 
-      const userChange = ((visualRotation - originalRotation) % 360 + 360) % 360;
+      const userChange = (((visualRotation - originalRotation) % 360) + 360) % 360;
 
       let finalRotation = (originalPage.rotation + userChange) % 360;
       if (finalRotation === 360) finalRotation = 0;
@@ -137,12 +142,12 @@ export class DocumentManipulationService {
    * Reset all DOM changes (useful for "discard changes" functionality)
    */
   resetDOMToDocumentState(pdfDocument: PDFDocument): void {
-    console.log('DocumentManipulationService: Resetting DOM to match document state');
-    
-    pdfDocument.pages.forEach(page => {
+    console.log("DocumentManipulationService: Resetting DOM to match document state");
+
+    pdfDocument.pages.forEach((page) => {
       const pageElement = document.querySelector(`[data-page-id="${page.id}"]`);
       if (pageElement) {
-        const img = pageElement.querySelector('img');
+        const img = pageElement.querySelector("img");
         if (img) {
           // Reset rotation to match document state
           img.style.transform = `rotate(${page.rotation}deg)`;
@@ -155,7 +160,7 @@ export class DocumentManipulationService {
    * Check if DOM state differs from document state
    */
   hasUnsavedChanges(pdfDocument: PDFDocument): boolean {
-    return pdfDocument.pages.some(page => {
+    return pdfDocument.pages.some((page) => {
       const pageElement = document.querySelector(`[data-page-id="${page.id}"]`);
       if (pageElement) {
         const domRotation = this.getRotationFromDOM(pageElement, page);
diff --git a/frontend/src/core/services/downloadService.ts b/frontend/src/core/services/downloadService.ts
index 0905402a9c..4f0dca5b4a 100644
--- a/frontend/src/core/services/downloadService.ts
+++ b/frontend/src/core/services/downloadService.ts
@@ -24,11 +24,7 @@ export async function downloadFile(request: DownloadRequest): Promise<DownloadRe
   return { savedPath: request.localPath };
 }
 
-export async function downloadFromUrl(
-  url: string,
-  filename: string,
-  localPath?: string
-): Promise<DownloadResult> {
+export async function downloadFromUrl(url: string, filename: string, localPath?: string): Promise<DownloadResult> {
   const link = document.createElement("a");
   link.href = url;
   link.download = filename;
diff --git a/frontend/src/core/services/enhancedPDFProcessingService.ts b/frontend/src/core/services/enhancedPDFProcessingService.ts
index 17aeb015a3..2382222eb2 100644
--- a/frontend/src/core/services/enhancedPDFProcessingService.ts
+++ b/frontend/src/core/services/enhancedPDFProcessingService.ts
@@ -1,10 +1,10 @@
-import { ProcessedFile, ProcessingState, PDFPage, ProcessingConfig, ProcessingMetrics } from '@app/types/processing';
-import { ProcessingCache } from '@app/services/processingCache';
-import { FileHasher } from '@app/utils/fileHash';
-import { FileAnalyzer } from '@app/services/fileAnalyzer';
-import { ProcessingErrorHandler } from '@app/services/processingErrorHandler';
-import { pdfWorkerManager } from '@app/services/pdfWorkerManager';
-import { createQuickKey } from '@app/types/fileContext';
+import { ProcessedFile, ProcessingState, PDFPage, ProcessingConfig, ProcessingMetrics } from "@app/types/processing";
+import { ProcessingCache } from "@app/services/processingCache";
+import { FileHasher } from "@app/utils/fileHash";
+import { FileAnalyzer } from "@app/services/fileAnalyzer";
+import { ProcessingErrorHandler } from "@app/services/processingErrorHandler";
+import { pdfWorkerManager } from "@app/services/pdfWorkerManager";
+import { createQuickKey } from "@app/types/fileContext";
 
 export class EnhancedPDFProcessingService {
   private static instance: EnhancedPDFProcessingService;
@@ -17,16 +17,16 @@ export class EnhancedPDFProcessingService {
     failedFiles: 0,
     averageProcessingTime: 0,
     cacheHitRate: 0,
-    memoryUsage: 0
+    memoryUsage: 0,
   };
 
   private defaultConfig: ProcessingConfig = {
-    strategy: 'immediate_full',
+    strategy: "immediate_full",
     chunkSize: 20,
-    thumbnailQuality: 'medium',
+    thumbnailQuality: "medium",
     priorityPageCount: 10,
     useWebWorker: false,
-    maxRetries: 3
+    maxRetries: 3,
   };
 
   private constructor() {}
@@ -47,7 +47,7 @@ export class EnhancedPDFProcessingService {
     // Check cache first
     const cached = this.cache.get(fileKey);
     if (cached) {
-      this.updateMetrics('cacheHit');
+      this.updateMetrics("cacheHit");
       return cached;
     }
 
@@ -66,7 +66,7 @@ export class EnhancedPDFProcessingService {
     const config: ProcessingConfig = {
       ...this.defaultConfig,
       strategy: analysis.recommendedStrategy,
-      ...customConfig
+      ...customConfig,
     };
 
     // Start processing
@@ -77,12 +77,7 @@ export class EnhancedPDFProcessingService {
   /**
    * Start processing a file with the specified configuration
    */
-  private async startProcessing(
-    file: File,
-    fileKey: string,
-    config: ProcessingConfig,
-    estimatedTime: number
-  ): Promise<void> {
+  private async startProcessing(file: File, fileKey: string, config: ProcessingConfig, estimatedTime: number): Promise<void> {
     // Create cancellation token
     const cancellationToken = new AbortController();
 
@@ -90,17 +85,17 @@ export class EnhancedPDFProcessingService {
     const state: ProcessingState = {
       fileKey,
       fileName: file.name,
-      status: 'processing',
+      status: "processing",
       progress: 0,
       strategy: config.strategy,
       startedAt: Date.now(),
       estimatedTimeRemaining: estimatedTime,
-      cancellationToken
+      cancellationToken,
     };
 
     this.processing.set(fileKey, state);
     this.notifyListeners();
-    this.updateMetrics('started');
+    this.updateMetrics("started");
 
     try {
       // Execute processing with retry logic
@@ -110,33 +105,32 @@ export class EnhancedPDFProcessingService {
           state.error = error;
           this.notifyListeners();
         },
-        config.maxRetries
+        config.maxRetries,
       );
 
       // Cache the result
       this.cache.set(fileKey, processedFile);
 
       // Update state to completed
-      state.status = 'completed';
+      state.status = "completed";
       state.progress = 100;
       state.completedAt = Date.now();
       this.notifyListeners();
-      this.updateMetrics('completed', Date.now() - state.startedAt);
+      this.updateMetrics("completed", Date.now() - state.startedAt);
 
       // Remove from processing map after brief delay
       setTimeout(() => {
         this.processing.delete(fileKey);
         this.notifyListeners();
       }, 2000);
-
     } catch (error) {
-      console.error('Processing failed for', file.name, ':', error);
+      console.error("Processing failed for", file.name, ":", error);
 
       const processingError = ProcessingErrorHandler.createProcessingError(error);
-      state.status = 'error';
+      state.status = "error";
       state.error = processingError;
       this.notifyListeners();
-      this.updateMetrics('failed');
+      this.updateMetrics("failed");
 
       // Remove failed processing after delay
       setTimeout(() => {
@@ -152,19 +146,19 @@ export class EnhancedPDFProcessingService {
   private async executeProcessingStrategy(
     file: File,
     config: ProcessingConfig,
-    state: ProcessingState
+    state: ProcessingState,
   ): Promise<ProcessedFile> {
     switch (config.strategy) {
-      case 'immediate_full':
+      case "immediate_full":
         return this.processImmediateFull(file, config, state);
 
-      case 'priority_pages':
+      case "priority_pages":
         return this.processPriorityPages(file, config, state);
 
-      case 'progressive_chunked':
+      case "progressive_chunked":
         return this.processProgressiveChunked(file, config, state);
 
-      case 'metadata_only':
+      case "metadata_only":
         return this.processMetadataOnly(file, config, state);
 
       default:
@@ -175,11 +169,7 @@ export class EnhancedPDFProcessingService {
   /**
    * Process all pages immediately (for small files)
    */
-  private async processImmediateFull(
-    file: File,
-    config: ProcessingConfig,
-    state: ProcessingState
-  ): Promise<ProcessedFile> {
+  private async processImmediateFull(file: File, config: ProcessingConfig, state: ProcessingState): Promise<ProcessedFile> {
     const arrayBuffer = await file.arrayBuffer();
     const pdf = await pdfWorkerManager.createDocument(arrayBuffer);
 
@@ -194,7 +184,7 @@ export class EnhancedPDFProcessingService {
       for (let i = 1; i <= totalPages; i++) {
         // Check for cancellation
         if (state.cancellationToken?.signal.aborted) {
-          throw new Error('Processing cancelled');
+          throw new Error("Processing cancelled");
         }
 
         const page = await pdf.getPage(i);
@@ -207,7 +197,7 @@ export class EnhancedPDFProcessingService {
           pageNumber: i,
           thumbnail,
           rotation,
-          selected: false
+          selected: false,
         });
 
         // Update progress
@@ -227,11 +217,7 @@ export class EnhancedPDFProcessingService {
   /**
    * Process priority pages first, then queue the rest
    */
-  private async processPriorityPages(
-    file: File,
-    config: ProcessingConfig,
-    state: ProcessingState
-  ): Promise<ProcessedFile> {
+  private async processPriorityPages(file: File, config: ProcessingConfig, state: ProcessingState): Promise<ProcessedFile> {
     const arrayBuffer = await file.arrayBuffer();
     const pdf = await pdfWorkerManager.createDocument(arrayBuffer);
     const totalPages = pdf.numPages;
@@ -246,7 +232,7 @@ export class EnhancedPDFProcessingService {
     for (let i = 1; i <= priorityCount; i++) {
       if (state.cancellationToken?.signal.aborted) {
         pdfWorkerManager.destroyDocument(pdf);
-        throw new Error('Processing cancelled');
+        throw new Error("Processing cancelled");
       }
 
       const page = await pdf.getPage(i);
@@ -257,7 +243,7 @@ export class EnhancedPDFProcessingService {
         pageNumber: i,
         thumbnail,
         rotation: page.rotate || 0,
-        selected: false
+        selected: false,
       });
 
       state.progress = 10 + (i / priorityCount) * 60;
@@ -272,7 +258,7 @@ export class EnhancedPDFProcessingService {
         pageNumber: i,
         thumbnail: null, // Will be loaded lazily
         rotation: 0,
-        selected: false
+        selected: false,
       });
     }
 
@@ -289,7 +275,7 @@ export class EnhancedPDFProcessingService {
   private async processProgressiveChunked(
     file: File,
     config: ProcessingConfig,
-    state: ProcessingState
+    state: ProcessingState,
   ): Promise<ProcessedFile> {
     const arrayBuffer = await file.arrayBuffer();
     const pdf = await pdfWorkerManager.createDocument(arrayBuffer);
@@ -308,7 +294,7 @@ export class EnhancedPDFProcessingService {
     for (let i = 1; i <= firstChunkEnd; i++) {
       if (state.cancellationToken?.signal.aborted) {
         pdfWorkerManager.destroyDocument(pdf);
-        throw new Error('Processing cancelled');
+        throw new Error("Processing cancelled");
       }
 
       const page = await pdf.getPage(i);
@@ -319,7 +305,7 @@ export class EnhancedPDFProcessingService {
         pageNumber: i,
         thumbnail,
         rotation: page.rotate || 0,
-        selected: false
+        selected: false,
       });
 
       processedPages++;
@@ -329,7 +315,7 @@ export class EnhancedPDFProcessingService {
 
       // Small delay to prevent UI blocking
       if (i % 5 === 0) {
-        await new Promise(resolve => setTimeout(resolve, 10));
+        await new Promise((resolve) => setTimeout(resolve, 10));
       }
     }
 
@@ -340,7 +326,7 @@ export class EnhancedPDFProcessingService {
         pageNumber: i,
         thumbnail: null,
         rotation: 0,
-        selected: false
+        selected: false,
       });
     }
 
@@ -354,11 +340,7 @@ export class EnhancedPDFProcessingService {
   /**
    * Process metadata only (for very large files)
    */
-  private async processMetadataOnly(
-    file: File,
-    _config: ProcessingConfig,
-    state: ProcessingState
-  ): Promise<ProcessedFile> {
+  private async processMetadataOnly(file: File, _config: ProcessingConfig, state: ProcessingState): Promise<ProcessedFile> {
     const arrayBuffer = await file.arrayBuffer();
     const pdf = await pdfWorkerManager.createDocument(arrayBuffer);
     const totalPages = pdf.numPages;
@@ -374,7 +356,7 @@ export class EnhancedPDFProcessingService {
         pageNumber: i,
         thumbnail: null,
         rotation: 0,
-        selected: false
+        selected: false,
       });
     }
 
@@ -388,22 +370,22 @@ export class EnhancedPDFProcessingService {
   /**
    * Render a page thumbnail with specified quality
    */
-  private async renderPageThumbnail(page: any, quality: 'low' | 'medium' | 'high'): Promise<string> {
+  private async renderPageThumbnail(page: any, quality: "low" | "medium" | "high"): Promise<string> {
     const scales = { low: 0.2, medium: 0.5, high: 0.8 }; // Reduced low quality for page editor
     const scale = scales[quality];
 
     const viewport = page.getViewport({ scale, rotation: 0 });
-    const canvas = document.createElement('canvas');
+    const canvas = document.createElement("canvas");
     canvas.width = viewport.width;
     canvas.height = viewport.height;
 
-    const context = canvas.getContext('2d');
+    const context = canvas.getContext("2d");
     if (!context) {
-      throw new Error('Could not get canvas context');
+      throw new Error("Could not get canvas context");
     }
 
     await page.render({ canvasContext: context, viewport }).promise;
-    return canvas.toDataURL('image/jpeg', 0.8); // Use JPEG for better compression
+    return canvas.toDataURL("image/jpeg", 0.8); // Use JPEG for better compression
   }
 
   /**
@@ -417,12 +399,11 @@ export class EnhancedPDFProcessingService {
       metadata: {
         title: file.name,
         createdAt: new Date().toISOString(),
-        modifiedAt: new Date().toISOString()
-      }
+        modifiedAt: new Date().toISOString(),
+      },
     };
   }
 
-
   /**
    * Generate a unique, collision-resistant cache key
    */
@@ -437,7 +418,7 @@ export class EnhancedPDFProcessingService {
     const state = this.processing.get(fileKey);
     if (state && state.cancellationToken) {
       state.cancellationToken.abort();
-      state.status = 'cancelled';
+      state.status = "cancelled";
       this.notifyListeners();
     }
   }
@@ -445,12 +426,12 @@ export class EnhancedPDFProcessingService {
   /**
    * Update processing metrics
    */
-  private updateMetrics(event: 'started' | 'completed' | 'failed' | 'cacheHit', processingTime?: number): void {
+  private updateMetrics(event: "started" | "completed" | "failed" | "cacheHit", processingTime?: number): void {
     switch (event) {
-      case 'started':
+      case "started":
         this.metrics.totalFiles++;
         break;
-      case 'completed':
+      case "completed":
         this.metrics.completedFiles++;
         if (processingTime) {
           // Update rolling average
@@ -458,10 +439,10 @@ export class EnhancedPDFProcessingService {
           this.metrics.averageProcessingTime = totalProcessingTime / this.metrics.completedFiles;
         }
         break;
-      case 'failed':
+      case "failed":
         this.metrics.failedFiles++;
         break;
-      case 'cacheHit': {
+      case "cacheHit": {
         // Update cache hit rate
         const totalAttempts = this.metrics.totalFiles + 1;
         this.metrics.cacheHitRate = (this.metrics.cacheHitRate * this.metrics.totalFiles + 1) / totalAttempts;
@@ -490,7 +471,7 @@ export class EnhancedPDFProcessingService {
   }
 
   private notifyListeners(): void {
-    this.processingListeners.forEach(callback => callback(this.processing));
+    this.processingListeners.forEach((callback) => callback(this.processing));
   }
 
   /**
diff --git a/frontend/src/core/services/errorUtils.ts b/frontend/src/core/services/errorUtils.ts
index b95e3dfd56..dd6ebb1ab6 100644
--- a/frontend/src/core/services/errorUtils.ts
+++ b/frontend/src/core/services/errorUtils.ts
@@ -1,17 +1,21 @@
 export const FILE_EVENTS = {
-  markError: 'files:markError',
+  markError: "files:markError",
 } as const;
 
 const UUID_REGEX = /[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}/g;
 
 export function tryParseJson<T = any>(input: unknown): T | undefined {
-  if (typeof input !== 'string') return input as T | undefined;
-  try { return JSON.parse(input) as T; } catch { return undefined; }
+  if (typeof input !== "string") return input as T | undefined;
+  try {
+    return JSON.parse(input) as T;
+  } catch {
+    return undefined;
+  }
 }
 
 export async function normalizeAxiosErrorData(data: any): Promise<any> {
   if (!data) return undefined;
-  if (typeof data?.text === 'function') {
+  if (typeof data?.text === "function") {
     const text = await data.text();
     return tryParseJson(text) ?? text;
   }
@@ -21,7 +25,7 @@ export async function normalizeAxiosErrorData(data: any): Promise<any> {
 export function extractErrorFileIds(payload: any): string[] | undefined {
   if (!payload) return undefined;
   if (Array.isArray(payload?.errorFileIds)) return payload.errorFileIds as string[];
-  if (typeof payload === 'string') {
+  if (typeof payload === "string") {
     const matches = payload.match(UUID_REGEX);
     if (matches && matches.length > 0) return Array.from(new Set(matches));
   }
@@ -36,12 +40,10 @@ export function broadcastErroredFiles(fileIds: string[]) {
 export function isZeroByte(file: File | { size?: number } | null | undefined): boolean {
   if (!file) return true;
   const size = (file as any).size;
-  return typeof size === 'number' ? size <= 0 : true;
+  return typeof size === "number" ? size <= 0 : true;
 }
 
 export function isEmptyOutput(files: File[] | null | undefined): boolean {
   if (!files || files.length === 0) return true;
-  return files.every(f => (f as any)?.size === 0);
+  return files.every((f) => (f as any)?.size === 0);
 }
-
-
diff --git a/frontend/src/core/services/fileAnalyzer.ts b/frontend/src/core/services/fileAnalyzer.ts
index 7181489d50..7c8e62ee3c 100644
--- a/frontend/src/core/services/fileAnalyzer.ts
+++ b/frontend/src/core/services/fileAnalyzer.ts
@@ -1,16 +1,16 @@
-import { FileAnalysis, ProcessingStrategy } from '@app/types/processing';
-import { pdfWorkerManager } from '@app/services/pdfWorkerManager';
+import { FileAnalysis, ProcessingStrategy } from "@app/types/processing";
+import { pdfWorkerManager } from "@app/services/pdfWorkerManager";
 
 export class FileAnalyzer {
   private static readonly SIZE_THRESHOLDS = {
-    SMALL: 10 * 1024 * 1024,  // 10MB
+    SMALL: 10 * 1024 * 1024, // 10MB
     MEDIUM: 50 * 1024 * 1024, // 50MB
     LARGE: 200 * 1024 * 1024, // 200MB
   };
 
   private static readonly PAGE_THRESHOLDS = {
-    FEW: 10,    // < 10 pages - immediate full processing
-    MANY: 50,   // < 50 pages - priority pages
+    FEW: 10, // < 10 pages - immediate full processing
+    MANY: 50, // < 50 pages - priority pages
     MASSIVE: 100, // < 100 pages - progressive chunked
     // >100 pages = metadata only
   };
@@ -23,7 +23,7 @@ export class FileAnalyzer {
       fileSize: file.size,
       isEncrypted: false,
       isCorrupted: false,
-      recommendedStrategy: 'metadata_only',
+      recommendedStrategy: "metadata_only",
       estimatedProcessingTime: 0,
     };
 
@@ -41,13 +41,12 @@ export class FileAnalyzer {
       analysis.estimatedProcessingTime = this.estimateProcessingTime(
         file.size,
         quickAnalysis.pageCount,
-        analysis.recommendedStrategy
+        analysis.recommendedStrategy,
       );
-
     } catch (error) {
-      console.error('File analysis failed:', error);
+      console.error("File analysis failed:", error);
       analysis.isCorrupted = true;
-      analysis.recommendedStrategy = 'metadata_only';
+      analysis.recommendedStrategy = "metadata_only";
     }
 
     return analysis;
@@ -68,7 +67,7 @@ export class FileAnalyzer {
 
       const pdf = await pdfWorkerManager.createDocument(arrayBuffer, {
         stopAtErrors: false, // Don't stop at minor errors
-        verbosity: 0 // Suppress PDF.js warnings
+        verbosity: 0, // Suppress PDF.js warnings
       });
 
       const pageCount = pdf.numPages;
@@ -80,18 +79,17 @@ export class FileAnalyzer {
       return {
         pageCount,
         isEncrypted,
-        isCorrupted: false
+        isCorrupted: false,
       };
-
     } catch (error) {
       // Try to determine if it's corruption vs encryption
-      const errorMessage = error instanceof Error ? error.message.toLowerCase() : '';
-      const isEncrypted = errorMessage.includes('password') || errorMessage.includes('encrypted');
+      const errorMessage = error instanceof Error ? error.message.toLowerCase() : "";
+      const isEncrypted = errorMessage.includes("password") || errorMessage.includes("encrypted");
 
       return {
         pageCount: 0,
         isEncrypted,
-        isCorrupted: !isEncrypted // If not encrypted, probably corrupted
+        isCorrupted: !isEncrypted, // If not encrypted, probably corrupted
       };
     }
   }
@@ -102,59 +100,55 @@ export class FileAnalyzer {
   private static determineStrategy(fileSize: number, pageCount?: number): ProcessingStrategy {
     // Handle corrupted or encrypted files
     if (!pageCount || pageCount === 0) {
-      return 'metadata_only';
+      return "metadata_only";
     }
 
     // Small files with few pages - process everything immediately
     if (fileSize <= this.SIZE_THRESHOLDS.SMALL && pageCount <= this.PAGE_THRESHOLDS.FEW) {
-      return 'immediate_full';
+      return "immediate_full";
     }
 
     // Medium files or many pages - priority pages first, then progressive
     if (fileSize <= this.SIZE_THRESHOLDS.MEDIUM && pageCount <= this.PAGE_THRESHOLDS.MANY) {
-      return 'priority_pages';
+      return "priority_pages";
     }
 
     // Large files or massive page counts - chunked processing
     if (fileSize <= this.SIZE_THRESHOLDS.LARGE && pageCount <= this.PAGE_THRESHOLDS.MASSIVE) {
-      return 'progressive_chunked';
+      return "progressive_chunked";
     }
 
     // Very large files - metadata only
-    return 'metadata_only';
+    return "metadata_only";
   }
 
   /**
    * Estimate processing time based on file characteristics and strategy
    */
-  private static estimateProcessingTime(
-    _fileSize: number,
-    pageCount: number = 0,
-    strategy: ProcessingStrategy
-  ): number {
+  private static estimateProcessingTime(_fileSize: number, pageCount: number = 0, strategy: ProcessingStrategy): number {
     const baseTimes = {
-      immediate_full: 200,      // 200ms per page
-      priority_pages: 150,     // 150ms per page (optimized)
+      immediate_full: 200, // 200ms per page
+      priority_pages: 150, // 150ms per page (optimized)
       progressive_chunked: 100, // 100ms per page (chunked)
-      metadata_only: 50        // 50ms total
+      metadata_only: 50, // 50ms total
     };
 
     const baseTime = baseTimes[strategy];
 
     switch (strategy) {
-      case 'metadata_only':
+      case "metadata_only":
         return baseTime;
 
-      case 'immediate_full':
+      case "immediate_full":
         return pageCount * baseTime;
 
-      case 'priority_pages': {
+      case "priority_pages": {
         // Estimate time for priority pages (first 10)
         const priorityPages = Math.min(pageCount, 10);
         return priorityPages * baseTime;
       }
 
-      case 'progressive_chunked': {
+      case "progressive_chunked": {
         // Estimate time for first chunk (20 pages)
         const firstChunk = Math.min(pageCount, 20);
         return firstChunk * baseTime;
@@ -196,7 +190,7 @@ export class FileAnalyzer {
       totalEstimatedTime,
       suggestedBatchSize: this.calculateBatchSize(files.length, totalSize),
       shouldUseWebWorker: totalPages > 100 || totalSize > this.SIZE_THRESHOLDS.MEDIUM,
-      memoryWarning: totalSize > this.SIZE_THRESHOLDS.LARGE || totalPages > this.PAGE_THRESHOLDS.MASSIVE
+      memoryWarning: totalSize > this.SIZE_THRESHOLDS.LARGE || totalPages > this.PAGE_THRESHOLDS.MASSIVE,
     };
 
     return { analyses, recommendations };
@@ -223,7 +217,7 @@ export class FileAnalyzer {
    * Check if a file appears to be a valid PDF
    */
   static async isValidPDF(file: File): Promise<boolean> {
-    if (file.type !== 'application/pdf' && !file.name.toLowerCase().endsWith('.pdf')) {
+    if (file.type !== "application/pdf" && !file.name.toLowerCase().endsWith(".pdf")) {
       return false;
     }
 
@@ -233,7 +227,7 @@ export class FileAnalyzer {
       const headerBytes = new Uint8Array(await header.arrayBuffer());
       const headerString = String.fromCharCode(...headerBytes);
 
-      return headerString.startsWith('%PDF-');
+      return headerString.startsWith("%PDF-");
     } catch {
       return false;
     }
diff --git a/frontend/src/core/services/fileDialogService.ts b/frontend/src/core/services/fileDialogService.ts
index 96cf402c9c..9415726239 100644
--- a/frontend/src/core/services/fileDialogService.ts
+++ b/frontend/src/core/services/fileDialogService.ts
@@ -20,9 +20,7 @@ export interface FileDialogOptions {
  * Core stub - returns empty array (no native dialog in web)
  * Desktop builds override this with actual Tauri implementation
  */
-export async function openFileDialog(
-  _options?: FileDialogOptions
-): Promise<FileWithPath[]> {
+export async function openFileDialog(_options?: FileDialogOptions): Promise<FileWithPath[]> {
   // Web build: no native file dialog support
   return [];
 }
diff --git a/frontend/src/core/services/fileProcessingService.ts b/frontend/src/core/services/fileProcessingService.ts
index 261adb6c0f..25fa0414df 100644
--- a/frontend/src/core/services/fileProcessingService.ts
+++ b/frontend/src/core/services/fileProcessingService.ts
@@ -4,9 +4,9 @@
  * Called when files are added to FileContext, before any view sees them
  */
 
-import { generateThumbnailForFile } from '@app/utils/thumbnailUtils';
-import { pdfWorkerManager } from '@app/services/pdfWorkerManager';
-import { FileId } from '@app/types/file';
+import { generateThumbnailForFile } from "@app/utils/thumbnailUtils";
+import { pdfWorkerManager } from "@app/services/pdfWorkerManager";
+import { FileId } from "@app/types/file";
 
 export interface ProcessedFileMetadata {
   totalPages: number;
@@ -55,7 +55,7 @@ class FileProcessingService {
     // Store operation with abort controller
     const operation: ProcessingOperation = {
       promise: processingPromise,
-      abortController
+      abortController,
     };
     this.processingCache.set(fileId, operation);
 
@@ -67,33 +67,37 @@ class FileProcessingService {
     return processingPromise;
   }
 
-  private async performProcessing(file: File, fileId: FileId, abortController: AbortController): Promise<FileProcessingResult> {
+  private async performProcessing(
+    file: File,
+    fileId: FileId,
+    abortController: AbortController,
+  ): Promise<FileProcessingResult> {
     console.log(`📁 FileProcessingService: Starting processing for ${file.name} (${fileId})`);
 
     try {
       // Check for cancellation at start
       if (abortController.signal.aborted) {
-        throw new Error('Processing cancelled');
+        throw new Error("Processing cancelled");
       }
 
       let totalPages = 1;
       let thumbnailUrl: string | undefined;
 
       // Handle PDF files
-      if (file.type === 'application/pdf') {
+      if (file.type === "application/pdf") {
         // Read arrayBuffer once and reuse for both PDF.js and fallback
         const arrayBuffer = await file.arrayBuffer();
 
         // Check for cancellation after async operation
         if (abortController.signal.aborted) {
-          throw new Error('Processing cancelled');
+          throw new Error("Processing cancelled");
         }
 
         // Discover page count using PDF.js (most accurate)
         try {
           const pdfDoc = await pdfWorkerManager.createDocument(arrayBuffer, {
             disableAutoFetch: true,
-            disableStream: true
+            disableStream: true,
           });
 
           totalPages = pdfDoc.numPages;
@@ -104,7 +108,7 @@ class FileProcessingService {
 
           // Check for cancellation after PDF.js processing
           if (abortController.signal.aborted) {
-            throw new Error('Processing cancelled');
+            throw new Error("Processing cancelled");
           }
         } catch (pdfError) {
           console.warn(`📁 FileProcessingService: PDF.js failed for ${file.name}, setting pages to 0:`, pdfError);
@@ -119,7 +123,7 @@ class FileProcessingService {
 
         // Check for cancellation after thumbnail generation
         if (abortController.signal.aborted) {
-          throw new Error('Processing cancelled');
+          throw new Error("Processing cancelled");
         }
       } catch (thumbError) {
         console.warn(`📁 FileProcessingService: Thumbnail generation failed for ${file.name}:`, thumbError);
@@ -130,29 +134,28 @@ class FileProcessingService {
         pageNumber: index + 1,
         thumbnail: index === 0 ? thumbnailUrl : undefined, // Only page 1 gets thumbnail initially
         rotation: 0,
-        splitBefore: false
+        splitBefore: false,
       }));
 
       const metadata: ProcessedFileMetadata = {
         totalPages,
         pages,
         thumbnailUrl, // For FileEditor display
-        lastProcessed: Date.now()
+        lastProcessed: Date.now(),
       };
 
       console.log(`📁 FileProcessingService: Processing complete for ${file.name} - ${totalPages} pages`);
 
       return {
         success: true,
-        metadata
+        metadata,
       };
-
     } catch (error) {
       console.error(`📁 FileProcessingService: Processing failed for ${file.name}:`, error);
 
       return {
         success: false,
-        error: error instanceof Error ? error.message : 'Unknown processing error'
+        error: error instanceof Error ? error.message : "Unknown processing error",
       };
     }
   }
diff --git a/frontend/src/core/services/fileStorage.ts b/frontend/src/core/services/fileStorage.ts
index e481452a8d..97154642ce 100644
--- a/frontend/src/core/services/fileStorage.ts
+++ b/frontend/src/core/services/fileStorage.ts
@@ -4,9 +4,9 @@
  * Forces correct usage patterns through service API design
  */
 
-import { FileId, BaseFileMetadata } from '@app/types/file';
-import { StirlingFile, StirlingFileStub, createStirlingFile } from '@app/types/fileContext';
-import { indexedDBManager, DATABASE_CONFIGS } from '@app/services/indexedDBManager';
+import { FileId, BaseFileMetadata } from "@app/types/file";
+import { StirlingFile, StirlingFileStub, createStirlingFile } from "@app/types/fileContext";
+import { indexedDBManager, DATABASE_CONFIGS } from "@app/services/indexedDBManager";
 
 /**
  * Storage record - single source of truth
@@ -29,7 +29,7 @@ export interface StorageStats {
 
 class FileStorageService {
   private readonly dbConfig = DATABASE_CONFIGS.FILES;
-  private readonly storeName = 'files';
+  private readonly storeName = "files";
 
   /**
    * Get database connection using centralized manager
@@ -70,30 +70,32 @@ class FileStorageService {
       versionNumber: stub.versionNumber ?? 1,
       originalFileId: stub.originalFileId ?? stirlingFile.fileId,
       parentFileId: stub.parentFileId ?? undefined,
-      toolHistory: stub.toolHistory ?? []
+      toolHistory: stub.toolHistory ?? [],
     };
 
     return new Promise((resolve, reject) => {
       try {
         // Verify store exists before creating transaction
         if (!db.objectStoreNames.contains(this.storeName)) {
-          throw new Error(`Object store '${this.storeName}' not found. Available stores: ${Array.from(db.objectStoreNames).join(', ')}`);
+          throw new Error(
+            `Object store '${this.storeName}' not found. Available stores: ${Array.from(db.objectStoreNames).join(", ")}`,
+          );
         }
 
-        const transaction = db.transaction([this.storeName], 'readwrite');
+        const transaction = db.transaction([this.storeName], "readwrite");
         const store = transaction.objectStore(this.storeName);
 
         const request = store.add(record);
 
         request.onerror = () => {
-          console.error('IndexedDB add error:', request.error);
+          console.error("IndexedDB add error:", request.error);
           reject(request.error);
         };
         request.onsuccess = () => {
           resolve();
         };
       } catch (error) {
-        console.error('Transaction error:', error);
+        console.error("Transaction error:", error);
         reject(error);
       }
     });
@@ -106,7 +108,7 @@ class FileStorageService {
     const db = await this.getDatabase();
 
     return new Promise((resolve, reject) => {
-      const transaction = db.transaction([this.storeName], 'readonly');
+      const transaction = db.transaction([this.storeName], "readonly");
       const store = transaction.objectStore(this.storeName);
       const request = store.get(id);
 
@@ -122,7 +124,7 @@ class FileStorageService {
         const blob = new Blob([record.data], { type: record.type });
         const file = new File([blob], record.name, {
           type: record.type,
-          lastModified: record.lastModified
+          lastModified: record.lastModified,
         });
 
         // Convert to StirlingFile with preserved IDs
@@ -136,7 +138,7 @@ class FileStorageService {
    * Get multiple StirlingFiles - for batch loading
    */
   async getStirlingFiles(ids: FileId[]): Promise<StirlingFile[]> {
-    const results = await Promise.all(ids.map(id => this.getStirlingFile(id)));
+    const results = await Promise.all(ids.map((id) => this.getStirlingFile(id)));
     return results.filter((file): file is StirlingFile => file !== null);
   }
 
@@ -147,7 +149,7 @@ class FileStorageService {
     const db = await this.getDatabase();
 
     return new Promise((resolve, reject) => {
-      const transaction = db.transaction([this.storeName], 'readonly');
+      const transaction = db.transaction([this.storeName], "readonly");
       const store = transaction.objectStore(this.storeName);
       const request = store.get(id);
 
@@ -181,7 +183,7 @@ class FileStorageService {
           originalFileId: record.originalFileId,
           parentFileId: record.parentFileId,
           toolHistory: record.toolHistory,
-          createdAt: record.createdAt || Date.now()
+          createdAt: record.createdAt || Date.now(),
         };
 
         resolve(stub);
@@ -196,7 +198,7 @@ class FileStorageService {
     const db = await this.getDatabase();
 
     return new Promise((resolve, reject) => {
-      const transaction = db.transaction([this.storeName], 'readonly');
+      const transaction = db.transaction([this.storeName], "readonly");
       const store = transaction.objectStore(this.storeName);
       const request = store.openCursor();
       const stubs: StirlingFileStub[] = [];
@@ -206,7 +208,7 @@ class FileStorageService {
         const cursor = (event.target as IDBRequest).result;
         if (cursor) {
           const record = cursor.value as StoredStirlingFileRecord;
-          if (record && record.name && typeof record.size === 'number') {
+          if (record && record.name && typeof record.size === "number") {
             // Extract metadata only - no file data
             stubs.push({
               id: record.id,
@@ -229,7 +231,7 @@ class FileStorageService {
               originalFileId: record.originalFileId || record.id,
               parentFileId: record.parentFileId,
               toolHistory: record.toolHistory || [],
-              createdAt: record.createdAt || Date.now()
+              createdAt: record.createdAt || Date.now(),
             });
           }
           cursor.continue();
@@ -257,7 +259,7 @@ class FileStorageService {
     const db = await this.getDatabase();
 
     return new Promise((resolve, reject) => {
-      const transaction = db.transaction([this.storeName], 'readonly');
+      const transaction = db.transaction([this.storeName], "readonly");
       const store = transaction.objectStore(this.storeName);
       const request = store.openCursor();
       const leafStubs: StirlingFileStub[] = [];
@@ -268,7 +270,7 @@ class FileStorageService {
         if (cursor) {
           const record = cursor.value as StoredStirlingFileRecord;
           // Only include leaf files (default to true if undefined)
-          if (record && record.name && typeof record.size === 'number' && record.isLeaf !== false) {
+          if (record && record.name && typeof record.size === "number" && record.isLeaf !== false) {
             leafStubs.push({
               id: record.id,
               name: record.name,
@@ -290,7 +292,7 @@ class FileStorageService {
               originalFileId: record.originalFileId || record.id,
               parentFileId: record.parentFileId,
               toolHistory: record.toolHistory || [],
-              createdAt: record.createdAt || Date.now()
+              createdAt: record.createdAt || Date.now(),
             });
           }
           cursor.continue();
@@ -308,7 +310,7 @@ class FileStorageService {
     const db = await this.getDatabase();
 
     return new Promise((resolve, reject) => {
-      const transaction = db.transaction([this.storeName], 'readwrite');
+      const transaction = db.transaction([this.storeName], "readwrite");
       const store = transaction.objectStore(this.storeName);
       const request = store.delete(id);
 
@@ -325,7 +327,7 @@ class FileStorageService {
 
     return new Promise((resolve, _reject) => {
       try {
-        const transaction = db.transaction([this.storeName], 'readwrite');
+        const transaction = db.transaction([this.storeName], "readwrite");
         const store = transaction.objectStore(this.storeName);
         const getRequest = store.get(id);
 
@@ -339,7 +341,7 @@ class FileStorageService {
               resolve(true);
             };
             updateRequest.onerror = () => {
-              console.error('Failed to update thumbnail:', updateRequest.error);
+              console.error("Failed to update thumbnail:", updateRequest.error);
               resolve(false);
             };
           } else {
@@ -348,11 +350,11 @@ class FileStorageService {
         };
 
         getRequest.onerror = () => {
-          console.error('Failed to get file for thumbnail update:', getRequest.error);
+          console.error("Failed to get file for thumbnail update:", getRequest.error);
           resolve(false);
         };
       } catch (error) {
-        console.error('Transaction error during thumbnail update:', error);
+        console.error("Transaction error during thumbnail update:", error);
         resolve(false);
       }
     });
@@ -365,7 +367,7 @@ class FileStorageService {
     const db = await this.getDatabase();
 
     return new Promise((resolve, reject) => {
-      const transaction = db.transaction([this.storeName], 'readwrite');
+      const transaction = db.transaction([this.storeName], "readwrite");
       const store = transaction.objectStore(this.storeName);
       const request = store.clear();
 
@@ -385,7 +387,7 @@ class FileStorageService {
 
     try {
       // Get browser quota for context
-      if ('storage' in navigator && 'estimate' in navigator.storage) {
+      if ("storage" in navigator && "estimate" in navigator.storage) {
         const estimate = await navigator.storage.estimate();
         quota = estimate.quota;
         available = estimate.quota || 0;
@@ -400,9 +402,8 @@ class FileStorageService {
       if (quota) {
         available = quota - used;
       }
-
     } catch (error) {
-      console.warn('Could not get storage stats:', error);
+      console.warn("Could not get storage stats:", error);
       used = 0;
       fileCount = 0;
     }
@@ -411,7 +412,7 @@ class FileStorageService {
       used,
       available,
       fileCount,
-      quota
+      quota,
     };
   }
 
@@ -423,7 +424,7 @@ class FileStorageService {
       const db = await this.getDatabase();
 
       return new Promise((resolve, reject) => {
-        const transaction = db.transaction([this.storeName], 'readonly');
+        const transaction = db.transaction([this.storeName], "readonly");
         const store = transaction.objectStore(this.storeName);
         const request = store.get(id);
 
@@ -452,7 +453,7 @@ class FileStorageService {
   async markFileAsProcessed(fileId: FileId): Promise<boolean> {
     try {
       const db = await this.getDatabase();
-      const transaction = db.transaction([this.storeName], 'readwrite');
+      const transaction = db.transaction([this.storeName], "readwrite");
       const store = transaction.objectStore(this.storeName);
 
       const record = await new Promise<StoredStirlingFileRecord | undefined>((resolve, reject) => {
@@ -476,7 +477,7 @@ class FileStorageService {
 
       return true;
     } catch (error) {
-      console.error('Failed to mark file as processed:', error);
+      console.error("Failed to mark file as processed:", error);
       return false;
     }
   }
@@ -488,7 +489,7 @@ class FileStorageService {
   async markFileAsLeaf(fileId: FileId): Promise<boolean> {
     try {
       const db = await this.getDatabase();
-      const transaction = db.transaction([this.storeName], 'readwrite');
+      const transaction = db.transaction([this.storeName], "readwrite");
       const store = transaction.objectStore(this.storeName);
 
       const record = await new Promise<StoredStirlingFileRecord | undefined>((resolve, reject) => {
@@ -512,7 +513,7 @@ class FileStorageService {
 
       return true;
     } catch (error) {
-      console.error('Failed to mark file as leaf:', error);
+      console.error("Failed to mark file as leaf:", error);
       return false;
     }
   }
@@ -523,7 +524,7 @@ class FileStorageService {
   async updateFileMetadata(fileId: FileId, updates: Partial<StoredStirlingFileRecord>): Promise<boolean> {
     try {
       const db = await this.getDatabase();
-      const transaction = db.transaction([this.storeName], 'readwrite');
+      const transaction = db.transaction([this.storeName], "readwrite");
       const store = transaction.objectStore(this.storeName);
       const record = await new Promise<StoredStirlingFileRecord | undefined>((resolve, reject) => {
         const request = store.get(fileId);
@@ -544,7 +545,7 @@ class FileStorageService {
 
       return true;
     } catch (error) {
-      console.error('Failed to update file metadata:', error);
+      console.error("Failed to update file metadata:", error);
       return false;
     }
   }
diff --git a/frontend/src/core/services/fileStubHelpers.ts b/frontend/src/core/services/fileStubHelpers.ts
index b3304aba63..625217039b 100644
--- a/frontend/src/core/services/fileStubHelpers.ts
+++ b/frontend/src/core/services/fileStubHelpers.ts
@@ -1,7 +1,7 @@
-import { StirlingFile, StirlingFileStub } from '@app/types/fileContext';
-import { createChildStub, generateProcessedFileMetadata } from '@app/contexts/file/fileActions';
-import { createStirlingFile } from '@app/types/fileContext';
-import { ToolId } from '@app/types/toolId';
+import { StirlingFile, StirlingFileStub } from "@app/types/fileContext";
+import { createChildStub, generateProcessedFileMetadata } from "@app/contexts/file/fileActions";
+import { createStirlingFile } from "@app/types/fileContext";
+import { ToolId } from "@app/types/toolId";
 
 /**
  * Create StirlingFiles and StirlingFileStubs from exported files
@@ -10,8 +10,8 @@ import { ToolId } from '@app/types/toolId';
 export async function createStirlingFilesAndStubs(
   files: File[],
   parentStub: StirlingFileStub,
-  toolId: ToolId
-): Promise<{ stirlingFiles: StirlingFile[], stubs: StirlingFileStub[] }> {
+  toolId: ToolId,
+): Promise<{ stirlingFiles: StirlingFile[]; stubs: StirlingFileStub[] }> {
   const stirlingFiles: StirlingFile[] = [];
   const stubs: StirlingFileStub[] = [];
 
@@ -22,7 +22,7 @@ export async function createStirlingFilesAndStubs(
       { toolId, timestamp: Date.now() },
       file,
       processedFileMetadata?.thumbnailUrl,
-      processedFileMetadata
+      processedFileMetadata,
     );
 
     const stirlingFile = createStirlingFile(file, childStub.id);
diff --git a/frontend/src/core/services/googleDrivePickerService.ts b/frontend/src/core/services/googleDrivePickerService.ts
index 1ef0bf8bba..4d6bbc1c00 100644
--- a/frontend/src/core/services/googleDrivePickerService.ts
+++ b/frontend/src/core/services/googleDrivePickerService.ts
@@ -3,10 +3,10 @@
  * Handles Google Drive file picker integration
  */
 
-import { loadScript } from '@app/utils/scriptLoader';
+import { loadScript } from "@app/utils/scriptLoader";
 
-const SCOPES = 'https://www.googleapis.com/auth/drive.readonly';
-const SESSION_STORAGE_ID = 'googleDrivePickerAccessToken';
+const SCOPES = "https://www.googleapis.com/auth/drive.readonly";
+const SESSION_STORAGE_ID = "googleDrivePickerAccessToken";
 
 interface GoogleDriveConfig {
   clientId: string;
@@ -28,20 +28,20 @@ interface PickerOptions {
 
 // Expandable mime types for Google Picker
 const expandableMimeTypes: Record<string, string[]> = {
-  'image/*': ['image/jpeg', 'image/png', 'image/svg+xml'],
+  "image/*": ["image/jpeg", "image/png", "image/svg+xml"],
 };
 
 /**
  * Convert file input accept attribute to Google Picker mime types
  */
 function fileInputToGooglePickerMimeTypes(accept?: string): string | null {
-  if (!accept || accept === '' || accept.includes('*/*')) {
+  if (!accept || accept === "" || accept.includes("*/*")) {
     // Setting null will accept all supported mimetypes
     return null;
   }
 
   const mimeTypes: string[] = [];
-  accept.split(',').forEach((part) => {
+  accept.split(",").forEach((part) => {
     const trimmedPart = part.trim();
     if (!(trimmedPart in expandableMimeTypes)) {
       mimeTypes.push(trimmedPart);
@@ -53,7 +53,7 @@ function fileInputToGooglePickerMimeTypes(accept?: string): string | null {
     });
   });
 
-  return mimeTypes.join(',').replace(/\s+/g, '');
+  return mimeTypes.join(",").replace(/\s+/g, "");
 }
 
 class GoogleDrivePickerService {
@@ -74,10 +74,7 @@ class GoogleDrivePickerService {
     this.config = config;
 
     // Load Google APIs
-    await Promise.all([
-      this.loadGapi(),
-      this.loadGis(),
-    ]);
+    await Promise.all([this.loadGapi(), this.loadGis()]);
   }
 
   /**
@@ -87,13 +84,13 @@ class GoogleDrivePickerService {
     if (this.gapiLoaded) return;
 
     await loadScript({
-      src: 'https://apis.google.com/js/api.js',
-      id: 'gapi-script',
+      src: "https://apis.google.com/js/api.js",
+      id: "gapi-script",
     });
 
     return new Promise((resolve) => {
-      window.gapi.load('client:picker', async () => {
-        await window.gapi.client.load('https://www.googleapis.com/discovery/v1/apis/drive/v3/rest');
+      window.gapi.load("client:picker", async () => {
+        await window.gapi.client.load("https://www.googleapis.com/discovery/v1/apis/drive/v3/rest");
         this.gapiLoaded = true;
         resolve();
       });
@@ -107,12 +104,12 @@ class GoogleDrivePickerService {
     if (this.gisLoaded) return;
 
     await loadScript({
-      src: 'https://accounts.google.com/gsi/client',
-      id: 'gis-script',
+      src: "https://accounts.google.com/gsi/client",
+      id: "gis-script",
     });
 
     if (!this.config) {
-      throw new Error('Google Drive config not initialized');
+      throw new Error("Google Drive config not initialized");
     }
 
     this.tokenClient = window.google.accounts.oauth2.initTokenClient({
@@ -129,7 +126,7 @@ class GoogleDrivePickerService {
    */
   async openPicker(options: PickerOptions = {}): Promise<File[]> {
     if (!this.config) {
-      throw new Error('Google Drive service not initialized');
+      throw new Error("Google Drive service not initialized");
     }
 
     // Request access token
@@ -145,7 +142,7 @@ class GoogleDrivePickerService {
   private requestAccessToken(): Promise<void> {
     return new Promise((resolve, reject) => {
       if (!this.tokenClient) {
-        reject(new Error('Token client not initialized'));
+        reject(new Error("Token client not initialized"));
         return;
       }
 
@@ -154,7 +151,7 @@ class GoogleDrivePickerService {
           reject(new Error(response.error));
           return;
         }
-        if(response.access_token == null){
+        if (response.access_token == null) {
           reject(new Error("No acces token in response"));
         }
 
@@ -164,7 +161,7 @@ class GoogleDrivePickerService {
       };
 
       this.tokenClient.requestAccessToken({
-        prompt: this.accessToken === null ? 'consent' : '',
+        prompt: this.accessToken === null ? "consent" : "",
       });
     });
   }
@@ -175,7 +172,7 @@ class GoogleDrivePickerService {
   private createPicker(options: PickerOptions): Promise<File[]> {
     return new Promise((resolve, reject) => {
       if (!this.config || !this.accessToken) {
-        reject(new Error('Not initialized or no access token'));
+        reject(new Error("Not initialized or no access token"));
         return;
       }
 
@@ -186,9 +183,7 @@ class GoogleDrivePickerService {
         view1.setMimeTypes(mimeTypes);
       }
 
-      const view2 = new window.google.picker.DocsView()
-        .setIncludeFolders(true)
-        .setEnableDrives(true);
+      const view2 = new window.google.picker.DocsView().setIncludeFolders(true).setEnableDrives(true);
       if (mimeTypes !== null) {
         view2.setMimeTypes(mimeTypes);
       }
@@ -213,11 +208,7 @@ class GoogleDrivePickerService {
   /**
    * Handle picker selection callback
    */
-  private async pickerCallback(
-    data: any,
-    resolve: (files: File[]) => void,
-    reject: (error: Error) => void
-  ): Promise<void> {
+  private async pickerCallback(data: any, resolve: (files: File[]) => void, reject: (error: Error) => void): Promise<void> {
     if (data.action === window.google.picker.Action.PICKED) {
       try {
         const files = await Promise.all(
@@ -225,7 +216,7 @@ class GoogleDrivePickerService {
             const fileId = pickedFile[window.google.picker.Document.ID];
             const res = await window.gapi.client.drive.files.get({
               fileId: fileId,
-              alt: 'media',
+              alt: "media",
             });
 
             // Convert response body to File object
@@ -235,15 +226,15 @@ class GoogleDrivePickerService {
               {
                 type: pickedFile.mimeType,
                 lastModified: pickedFile.lastModified,
-              }
+              },
             );
             return file;
-          })
+          }),
         );
 
         resolve(files);
       } catch (error) {
-        reject(error instanceof Error ? error : new Error('Failed to download files'));
+        reject(error instanceof Error ? error : new Error("Failed to download files"));
       }
     } else if (data.action === window.google.picker.Action.CANCEL) {
       resolve([]); // User cancelled, return empty array
diff --git a/frontend/src/core/services/httpErrorHandler.ts b/frontend/src/core/services/httpErrorHandler.ts
index 68ca06ae14..a7d897f633 100644
--- a/frontend/src/core/services/httpErrorHandler.ts
+++ b/frontend/src/core/services/httpErrorHandler.ts
@@ -1,9 +1,9 @@
 // frontend/src/services/httpErrorHandler.ts
-import { alert } from '@app/components/toast';
-import { broadcastErroredFiles, extractErrorFileIds, normalizeAxiosErrorData } from '@app/services/errorUtils';
-import { showSpecialErrorToast } from '@app/services/specialErrorToasts';
-import { handleSaaSError } from '@app/services/saasErrorInterceptor';
-import { clampText, extractAxiosErrorMessage } from '@app/services/httpErrorUtils';
+import { alert } from "@app/components/toast";
+import { broadcastErroredFiles, extractErrorFileIds, normalizeAxiosErrorData } from "@app/services/errorUtils";
+import { showSpecialErrorToast } from "@app/services/specialErrorToasts";
+import { handleSaaSError } from "@app/services/saasErrorInterceptor";
+import { clampText, extractAxiosErrorMessage } from "@app/services/httpErrorUtils";
 
 // Module-scoped state to reduce global variable usage
 const recentSpecialByEndpoint: Record<string, number> = {};
@@ -26,30 +26,31 @@ export async function handleHttpError(error: any): Promise<boolean> {
     const pathname = window.location.pathname;
 
     // Check if we're already on an auth page
-    const isAuthPage = pathname.includes('/login') ||
-                      pathname.includes('/signup') ||
-                      pathname.includes('/auth/') ||
-                      pathname.includes('/invite/');
+    const isAuthPage =
+      pathname.includes("/login") ||
+      pathname.includes("/signup") ||
+      pathname.includes("/auth/") ||
+      pathname.includes("/invite/");
 
     // If not on auth page, redirect to login with expired session message
     if (!isAuthPage && !skipAuthRedirect) {
-      console.debug('[httpErrorHandler] 401 detected, redirecting to login');
+      console.debug("[httpErrorHandler] 401 detected, redirecting to login");
       // Store the current location so we can redirect back after login
       const currentLocation = window.location.pathname + window.location.search;
       // Redirect to login with state (only show expired when a JWT existed)
       let hadStoredJwt = false;
       try {
-        hadStoredJwt = Boolean(localStorage.getItem('stirling_jwt'));
+        hadStoredJwt = Boolean(localStorage.getItem("stirling_jwt"));
       } catch {
         // ignore storage access failures
       }
-      const expiredPrefix = hadStoredJwt ? 'expired=true&' : '';
+      const expiredPrefix = hadStoredJwt ? "expired=true&" : "";
       window.location.href = `/login?${expiredPrefix}from=${encodeURIComponent(currentLocation)}`;
       return true; // Suppress toast since we're redirecting
     }
 
     // On auth pages, suppress the toast (user is already trying to authenticate)
-    console.debug('[httpErrorHandler] Suppressing 401 on auth page:', pathname);
+    console.debug("[httpErrorHandler] Suppressing 401 on auth page:", pathname);
     return true;
   }
 
@@ -59,9 +60,13 @@ export async function handleHttpError(error: any): Promise<boolean> {
   const { title, body } = extractAxiosErrorMessage(error);
 
   // Normalize response data ONCE, reuse for both ID extraction and special-toast matching
-  const raw = (error?.response?.data) as any;
+  const raw = error?.response?.data as any;
   let normalized: unknown = raw;
-  try { normalized = await normalizeAxiosErrorData(raw); } catch (e) { console.debug('normalizeAxiosErrorData', e); }
+  try {
+    normalized = await normalizeAxiosErrorData(raw);
+  } catch (e) {
+    console.debug("normalizeAxiosErrorData", e);
+  }
 
   // 1) If server sends structured file IDs for failures, also mark them errored in UI
   try {
@@ -70,7 +75,7 @@ export async function handleHttpError(error: any): Promise<boolean> {
       broadcastErroredFiles(ids);
     }
   } catch (e) {
-    console.debug('extractErrorFileIds', e);
+    console.debug("extractErrorFileIds", e);
   }
 
   // 2) Generic-vs-special dedupe by endpoint
@@ -95,18 +100,15 @@ export async function handleHttpError(error: any): Promise<boolean> {
   // 3) Show specialized friendly toasts if matched; otherwise show the generic one
   let rawString: string | undefined;
   try {
-    rawString =
-      typeof normalized === 'string'
-        ? normalized
-        : JSON.stringify(normalized);
+    rawString = typeof normalized === "string" ? normalized : JSON.stringify(normalized);
   } catch (e) {
-    console.debug('extractErrorFileIds', e);
+    console.debug("extractErrorFileIds", e);
   }
 
   const handled = showSpecialErrorToast(rawString, { status });
   if (!handled) {
     const displayBody = clampText(body);
-    alert({ alertType: 'error', title, body: displayBody, expandable: true, isPersistentPopup: false });
+    alert({ alertType: "error", title, body: displayBody, expandable: true, isPersistentPopup: false });
   }
 
   return false; // Error was handled with toast, continue normal rejection
diff --git a/frontend/src/core/services/httpErrorUtils.ts b/frontend/src/core/services/httpErrorUtils.ts
index 4f54aff70a..fe06b84d7a 100644
--- a/frontend/src/core/services/httpErrorUtils.ts
+++ b/frontend/src/core/services/httpErrorUtils.ts
@@ -1,6 +1,6 @@
-import axios from 'axios';
+import axios from "axios";
 
-const FRIENDLY_FALLBACK = 'There was an error processing your request.';
+const FRIENDLY_FALLBACK = "There was an error processing your request.";
 const MAX_TOAST_BODY_CHARS = 400; // avoid massive, unreadable toasts
 
 export function clampText(s: string, max = MAX_TOAST_BODY_CHARS): string {
@@ -8,10 +8,10 @@ export function clampText(s: string, max = MAX_TOAST_BODY_CHARS): string {
 }
 
 function isUnhelpfulMessage(msg: string | null | undefined): boolean {
-  const s = (msg || '').trim();
+  const s = (msg || "").trim();
   if (!s) return true;
   // Common unhelpful payloads we see
-  if (s === '{}' || s === '[]') return true;
+  if (s === "{}" || s === "[]") return true;
   if (/^request failed/i.test(s)) return true;
   if (/^network error/i.test(s)) return true;
   if (/^[45]\d\d\b/.test(s)) return true; // "500 Server Error" etc.
@@ -19,46 +19,54 @@ function isUnhelpfulMessage(msg: string | null | undefined): boolean {
 }
 
 function titleForStatus(status?: number): string {
-  if (!status) return 'Network error';
-  if (status >= 500) return 'Server error';
-  if (status >= 400) return 'Request error';
-  return 'Request failed';
+  if (!status) return "Network error";
+  if (status >= 500) return "Server error";
+  if (status >= 400) return "Request error";
+  return "Request failed";
 }
 
 export function extractAxiosErrorMessage(error: any): { title: string; body: string } {
   if (axios.isAxiosError(error)) {
     const status = error.response?.status;
-    const _statusText = error.response?.statusText || '';
+    const _statusText = error.response?.statusText || "";
     let parsed: any = undefined;
     const raw = error.response?.data;
-    if (typeof raw === 'string') {
-      try { parsed = JSON.parse(raw); } catch { /* keep as string */ }
+    if (typeof raw === "string") {
+      try {
+        parsed = JSON.parse(raw);
+      } catch {
+        /* keep as string */
+      }
     } else {
       parsed = raw;
     }
     const extractIds = (): string[] | undefined => {
       if (Array.isArray(parsed?.errorFileIds)) return parsed.errorFileIds as string[];
-      const rawText = typeof raw === 'string' ? raw : '';
+      const rawText = typeof raw === "string" ? raw : "";
       const uuidMatches = rawText.match(/[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}/g);
       return uuidMatches && uuidMatches.length > 0 ? Array.from(new Set(uuidMatches)) : undefined;
     };
 
     const body = ((): string => {
       const data = parsed;
-      if (!data) return typeof raw === 'string' ? raw : '';
+      if (!data) return typeof raw === "string" ? raw : "";
       const ids = extractIds();
-      if (ids && ids.length > 0) return `Failed files: ${ids.join(', ')}`;
+      if (ids && ids.length > 0) return `Failed files: ${ids.join(", ")}`;
       if (data?.message) return data.message as string;
-      if (typeof raw === 'string') return raw;
-      try { return JSON.stringify(data); } catch { return ''; }
+      if (typeof raw === "string") return raw;
+      try {
+        return JSON.stringify(data);
+      } catch {
+        return "";
+      }
     })();
     const ids = extractIds();
     const title = titleForStatus(status);
     if (ids && ids.length > 0) {
-      return { title, body: 'Process failed due to invalid/corrupted file(s)' };
+      return { title, body: "Process failed due to invalid/corrupted file(s)" };
     }
     if (status === 422) {
-      const fallbackMsg = 'Process failed due to invalid/corrupted file(s)';
+      const fallbackMsg = "Process failed due to invalid/corrupted file(s)";
       const bodyMsg = isUnhelpfulMessage(body) ? fallbackMsg : body;
       return { title, body: bodyMsg };
     }
@@ -67,10 +75,10 @@ export function extractAxiosErrorMessage(error: any): { title: string; body: str
   }
   try {
     const msg = (error?.message || String(error)) as string;
-    return { title: 'Network error', body: isUnhelpfulMessage(msg) ? FRIENDLY_FALLBACK : msg };
+    return { title: "Network error", body: isUnhelpfulMessage(msg) ? FRIENDLY_FALLBACK : msg };
   } catch (e) {
     // ignore extraction errors
-    console.debug('extractAxiosErrorMessage', e);
-    return { title: 'Network error', body: FRIENDLY_FALLBACK };
+    console.debug("extractAxiosErrorMessage", e);
+    return { title: "Network error", body: FRIENDLY_FALLBACK };
   }
 }
diff --git a/frontend/src/core/services/indexedDBManager.ts b/frontend/src/core/services/indexedDBManager.ts
index d889245182..ff365e0da6 100644
--- a/frontend/src/core/services/indexedDBManager.ts
+++ b/frontend/src/core/services/indexedDBManager.ts
@@ -92,7 +92,7 @@ class IndexedDBManager {
         console.log(`Upgrading ${config.name} from v${oldVersion} to v${config.version}`);
 
         // Create or update object stores
-        config.stores.forEach(storeConfig => {
+        config.stores.forEach((storeConfig) => {
           let store: IDBObjectStore | undefined;
 
           if (db.objectStoreNames.contains(storeConfig.name)) {
@@ -102,13 +102,9 @@ class IndexedDBManager {
 
             // Add new indexes if they don't exist
             if (storeConfig.indexes && store) {
-              storeConfig.indexes.forEach(indexConfig => {
+              storeConfig.indexes.forEach((indexConfig) => {
                 if (!store?.indexNames.contains(indexConfig.name)) {
-                  store?.createIndex(
-                    indexConfig.name,
-                    indexConfig.keyPath,
-                    { unique: indexConfig.unique }
-                  );
+                  store?.createIndex(indexConfig.name, indexConfig.keyPath, { unique: indexConfig.unique });
                   console.log(`Created index '${indexConfig.name}' on '${storeConfig.name}'`);
                 }
               });
@@ -128,19 +124,15 @@ class IndexedDBManager {
 
             // Create indexes
             if (storeConfig.indexes) {
-              storeConfig.indexes.forEach(indexConfig => {
-                store?.createIndex(
-                  indexConfig.name,
-                  indexConfig.keyPath,
-                  { unique: indexConfig.unique }
-                );
+              storeConfig.indexes.forEach((indexConfig) => {
+                store?.createIndex(indexConfig.name, indexConfig.keyPath, { unique: indexConfig.unique });
                 console.log(`Created index '${indexConfig.name}' on '${storeConfig.name}'`);
               });
             }
           }
 
           // Perform data migration for files database
-          if (config.name === 'stirling-pdf-files' && storeConfig.name === 'files' && store) {
+          if (config.name === "stirling-pdf-files" && storeConfig.name === "files" && store) {
             this.migrateFileHistoryFields(store, oldVersion);
           }
         });
@@ -157,7 +149,7 @@ class IndexedDBManager {
       return;
     }
 
-    console.log('Starting file history migration for existing records...');
+    console.log("Starting file history migration for existing records...");
 
     const cursor = store.openCursor();
     let migratedCount = 0;
@@ -200,7 +192,7 @@ class IndexedDBManager {
             cursor.update(record);
             migratedCount++;
           } catch (error) {
-            console.error('Failed to migrate record:', record.id, error);
+            console.error("Failed to migrate record:", record.id, error);
           }
         }
 
@@ -212,7 +204,7 @@ class IndexedDBManager {
     };
 
     cursor.onerror = (event) => {
-      console.error('File history migration failed:', (event.target as IDBRequest).error);
+      console.error("File history migration failed:", (event.target as IDBRequest).error);
     };
   }
 
@@ -290,39 +282,44 @@ class IndexedDBManager {
 // Pre-defined database configurations
 export const DATABASE_CONFIGS = {
   FILES: {
-    name: 'stirling-pdf-files',
+    name: "stirling-pdf-files",
     version: 3,
-    stores: [{
-      name: 'files',
-      keyPath: 'id',
-      indexes: [
-        { name: 'name', keyPath: 'name', unique: false },
-        { name: 'lastModified', keyPath: 'lastModified', unique: false },
-        { name: 'originalFileId', keyPath: 'originalFileId', unique: false },
-        { name: 'parentFileId', keyPath: 'parentFileId', unique: false },
-        { name: 'versionNumber', keyPath: 'versionNumber', unique: false }
-      ]
-    }]
+    stores: [
+      {
+        name: "files",
+        keyPath: "id",
+        indexes: [
+          { name: "name", keyPath: "name", unique: false },
+          { name: "lastModified", keyPath: "lastModified", unique: false },
+          { name: "originalFileId", keyPath: "originalFileId", unique: false },
+          { name: "parentFileId", keyPath: "parentFileId", unique: false },
+          { name: "versionNumber", keyPath: "versionNumber", unique: false },
+        ],
+      },
+    ],
   } as DatabaseConfig,
 
   DRAFTS: {
-    name: 'stirling-pdf-drafts',
+    name: "stirling-pdf-drafts",
     version: 1,
-    stores: [{
-      name: 'drafts',
-      keyPath: 'id'
-    }]
+    stores: [
+      {
+        name: "drafts",
+        keyPath: "id",
+      },
+    ],
   } as DatabaseConfig,
 
   PREFERENCES: {
-    name: 'stirling-pdf-preferences',
+    name: "stirling-pdf-preferences",
     version: 1,
-    stores: [{
-      name: 'preferences',
-      keyPath: 'key'
-    }]
+    stores: [
+      {
+        name: "preferences",
+        keyPath: "key",
+      },
+    ],
   } as DatabaseConfig,
-
 } as const;
 
 export const indexedDBManager = IndexedDBManager.getInstance();
diff --git a/frontend/src/core/services/localFileSaveService.ts b/frontend/src/core/services/localFileSaveService.ts
index 8717c7bf64..1ca43d7318 100644
--- a/frontend/src/core/services/localFileSaveService.ts
+++ b/frontend/src/core/services/localFileSaveService.ts
@@ -18,10 +18,7 @@ export interface MultiFileSaveResult {
  * Core stub - always returns failure
  * Desktop builds override this with actual implementation
  */
-export async function saveToLocalPath(
-  _data: Blob | File,
-  _filePath: string
-): Promise<SaveResult> {
+export async function saveToLocalPath(_data: Blob | File, _filePath: string): Promise<SaveResult> {
   return { success: false, error: "Local file save not available in web mode" };
 }
 
@@ -29,10 +26,7 @@ export async function saveToLocalPath(
  * Show native save dialog
  * Core stub - always returns null
  */
-export async function showSaveDialog(
-  _defaultFilename: string,
-  _defaultDirectory?: string
-): Promise<string | null> {
+export async function showSaveDialog(_defaultFilename: string, _defaultDirectory?: string): Promise<string | null> {
   return null;
 }
 
@@ -42,7 +36,7 @@ export async function showSaveDialog(
  */
 export async function saveMultipleFilesWithPrompt(
   _files: (Blob | File)[],
-  _defaultDirectory?: string
+  _defaultDirectory?: string,
 ): Promise<MultiFileSaveResult> {
   return { success: false, savedCount: 0, error: "Multi-file save not available in web mode" };
 }
diff --git a/frontend/src/core/services/openFilesFromDisk.ts b/frontend/src/core/services/openFilesFromDisk.ts
index ad2c014a69..f03cce649f 100644
--- a/frontend/src/core/services/openFilesFromDisk.ts
+++ b/frontend/src/core/services/openFilesFromDisk.ts
@@ -1,6 +1,6 @@
-import { openFileDialog } from '@app/services/fileDialogService';
-import { pendingFilePathMappings } from '@app/services/pendingFilePathMappings';
-import { getDocumentFileDialogFilter } from '@app/utils/fileDialogUtils';
+import { openFileDialog } from "@app/services/fileDialogService";
+import { pendingFilePathMappings } from "@app/services/pendingFilePathMappings";
+import { getDocumentFileDialogFilter } from "@app/utils/fileDialogUtils";
 
 interface OpenFilesFromDiskOptions {
   multiple?: boolean;
@@ -14,7 +14,7 @@ interface OpenFilesFromDiskOptions {
 export async function openFilesFromDisk(options: OpenFilesFromDiskOptions = {}): Promise<File[]> {
   const filesWithPaths = await openFileDialog({
     multiple: options.multiple ?? true,
-    filters: options.filters ?? getDocumentFileDialogFilter()
+    filters: options.filters ?? getDocumentFileDialogFilter(),
   });
 
   if (filesWithPaths.length > 0) {
diff --git a/frontend/src/core/services/operationResultsSaveService.ts b/frontend/src/core/services/operationResultsSaveService.ts
index 8579da62e7..fb2a695841 100644
--- a/frontend/src/core/services/operationResultsSaveService.ts
+++ b/frontend/src/core/services/operationResultsSaveService.ts
@@ -1,5 +1,5 @@
-import type { FileId, StirlingFileStub } from '@app/types/fileContext';
-import { downloadFromUrl, DownloadResult } from '@app/services/downloadService';
+import type { FileId, StirlingFileStub } from "@app/types/fileContext";
+import { downloadFromUrl, DownloadResult } from "@app/services/downloadService";
 
 export interface OperationSaveContext {
   downloadUrl: string | null;
@@ -16,8 +16,8 @@ export async function saveOperationResults(context: OperationSaveContext): Promi
 
   const result = await downloadFromUrl(
     context.downloadUrl,
-    context.downloadFilename || 'download',
-    context.downloadLocalPath || undefined
+    context.downloadFilename || "download",
+    context.downloadLocalPath || undefined,
   );
 
   if (context.outputFileIds && result.savedPath) {
diff --git a/frontend/src/core/services/pdfExportHelpers.ts b/frontend/src/core/services/pdfExportHelpers.ts
index 8c6fb90b10..4ceb9c245d 100644
--- a/frontend/src/core/services/pdfExportHelpers.ts
+++ b/frontend/src/core/services/pdfExportHelpers.ts
@@ -1,6 +1,6 @@
-import { PDFDocument } from '@app/types/pageEditor';
-import { pdfExportService } from '@app/services/pdfExportService';
-import { FileId } from '@app/types/file';
+import { PDFDocument } from "@app/types/pageEditor";
+import { pdfExportService } from "@app/services/pdfExportService";
+import { FileId } from "@app/types/file";
 
 /**
  * Export processed documents to File objects
@@ -9,19 +9,19 @@ import { FileId } from '@app/types/file';
 export async function exportProcessedDocumentsToFiles(
   processedDocuments: PDFDocument | PDFDocument[],
   sourceFiles: Map<FileId, File> | null,
-  exportFilename: string
+  exportFilename: string,
 ): Promise<File[]> {
-  console.log('exportProcessedDocumentsToFiles called with:', {
+  console.log("exportProcessedDocumentsToFiles called with:", {
     isArray: Array.isArray(processedDocuments),
     numDocs: Array.isArray(processedDocuments) ? processedDocuments.length : 1,
     hasSourceFiles: sourceFiles !== null,
-    sourceFilesSize: sourceFiles?.size
+    sourceFilesSize: sourceFiles?.size,
   });
 
   if (Array.isArray(processedDocuments)) {
     // Multiple documents (splits)
     const files: File[] = [];
-    const baseName = exportFilename.replace(/\.pdf$/i, '');
+    const baseName = exportFilename.replace(/\.pdf$/i, "");
 
     for (let i = 0; i < processedDocuments.length; i++) {
       const doc = processedDocuments[i];
@@ -31,16 +31,19 @@ export async function exportProcessedDocumentsToFiles(
         ? await pdfExportService.exportPDFMultiFile(doc, sourceFiles, [], { selectedOnly: false, filename: partFilename })
         : await pdfExportService.exportPDF(doc, [], { selectedOnly: false, filename: partFilename });
 
-      files.push(new File([result.blob], result.filename, { type: 'application/pdf' }));
+      files.push(new File([result.blob], result.filename, { type: "application/pdf" }));
     }
 
     return files;
   } else {
     // Single document
     const result = sourceFiles
-      ? await pdfExportService.exportPDFMultiFile(processedDocuments, sourceFiles, [], { selectedOnly: false, filename: exportFilename })
+      ? await pdfExportService.exportPDFMultiFile(processedDocuments, sourceFiles, [], {
+          selectedOnly: false,
+          filename: exportFilename,
+        })
       : await pdfExportService.exportPDF(processedDocuments, [], { selectedOnly: false, filename: exportFilename });
 
-    return [new File([result.blob], result.filename, { type: 'application/pdf' })];
+    return [new File([result.blob], result.filename, { type: "application/pdf" })];
   }
 }
diff --git a/frontend/src/core/services/pdfExportService.ts b/frontend/src/core/services/pdfExportService.ts
index bc9ca4908b..a71b1bb803 100644
--- a/frontend/src/core/services/pdfExportService.ts
+++ b/frontend/src/core/services/pdfExportService.ts
@@ -6,13 +6,13 @@ import {
   importPages,
   setPageRotation,
   addNewPage,
-} from '@app/services/pdfiumService';
-import { downloadFile } from '@app/services/downloadService';
-import { PDFDocument, PDFPage } from '@app/types/pageEditor';
+} from "@app/services/pdfiumService";
+import { downloadFile } from "@app/services/downloadService";
+import { PDFDocument, PDFPage } from "@app/types/pageEditor";
 
 // A4 dimensions in PDF points (72 dpi)
 const A4_WIDTH = 595.276;
-const A4_HEIGHT = 841.890;
+const A4_HEIGHT = 841.89;
 
 export interface ExportOptions {
   selectedOnly?: boolean;
@@ -26,17 +26,18 @@ export class PDFExportService {
   async exportPDF(
     pdfDocument: PDFDocument,
     selectedPageIds: string[] = [],
-    options: ExportOptions = {}
+    options: ExportOptions = {},
   ): Promise<{ blob: Blob; filename: string }> {
     const { selectedOnly = false, filename } = options;
 
     try {
-      const pagesToExport = selectedOnly && selectedPageIds.length > 0
-        ? pdfDocument.pages.filter(page => selectedPageIds.includes(page.id))
-        : pdfDocument.pages;
+      const pagesToExport =
+        selectedOnly && selectedPageIds.length > 0
+          ? pdfDocument.pages.filter((page) => selectedPageIds.includes(page.id))
+          : pdfDocument.pages;
 
       if (pagesToExport.length === 0) {
-        throw new Error('No pages to export');
+        throw new Error("No pages to export");
       }
 
       const originalPDFBytes = await pdfDocument.file.arrayBuffer();
@@ -45,11 +46,8 @@ export class PDFExportService {
 
       return { blob, filename: exportFilename };
     } catch (error) {
-      console.error('PDF export error:', error);
-      throw new Error(
-        `Failed to export PDF: ${error instanceof Error ? error.message : 'Unknown error'}`,
-        { cause: error }
-      );
+      console.error("PDF export error:", error);
+      throw new Error(`Failed to export PDF: ${error instanceof Error ? error.message : "Unknown error"}`, { cause: error });
     }
   }
 
@@ -60,17 +58,18 @@ export class PDFExportService {
     pdfDocument: PDFDocument,
     sourceFiles: Map<string, File>,
     selectedPageIds: string[] = [],
-    options: ExportOptions = {}
+    options: ExportOptions = {},
   ): Promise<{ blob: Blob; filename: string }> {
     const { selectedOnly = false, filename } = options;
 
     try {
-      const pagesToExport = selectedOnly && selectedPageIds.length > 0
-        ? pdfDocument.pages.filter(page => selectedPageIds.includes(page.id))
-        : pdfDocument.pages;
+      const pagesToExport =
+        selectedOnly && selectedPageIds.length > 0
+          ? pdfDocument.pages.filter((page) => selectedPageIds.includes(page.id))
+          : pdfDocument.pages;
 
       if (pagesToExport.length === 0) {
-        throw new Error('No pages to export');
+        throw new Error("No pages to export");
       }
 
       const blob = await this.createMultiSourceDocument(sourceFiles, pagesToExport);
@@ -78,26 +77,20 @@ export class PDFExportService {
 
       return { blob, filename: exportFilename };
     } catch (error) {
-      console.error('Multi-file PDF export error:', error);
-      throw new Error(
-        `Failed to export PDF: ${error instanceof Error ? error.message : 'Unknown error'}`,
-        { cause: error }
-      );
+      console.error("Multi-file PDF export error:", error);
+      throw new Error(`Failed to export PDF: ${error instanceof Error ? error.message : "Unknown error"}`, { cause: error });
     }
   }
 
   /**
    * Create a PDF document from multiple source files using PDFium WASM.
    */
-  private async createMultiSourceDocument(
-    sourceFiles: Map<string, File>,
-    pages: PDFPage[]
-  ): Promise<Blob> {
+  private async createMultiSourceDocument(sourceFiles: Map<string, File>, pages: PDFPage[]): Promise<Blob> {
     const m = await getPdfiumModule();
 
     // Create destination document
     const destDocPtr = m.FPDF_CreateNewDocument();
-    if (!destDocPtr) throw new Error('PDFium: failed to create destination document');
+    if (!destDocPtr) throw new Error("PDFium: failed to create destination document");
 
     // Load all source documents once and cache them
     const loadedDocs = new Map<string, number>();
@@ -153,7 +146,7 @@ export class PDFExportService {
 
       // Save the assembled document
       const resultBuf = await saveRawDocument(destDocPtr);
-      return new Blob([resultBuf], { type: 'application/pdf' });
+      return new Blob([resultBuf], { type: "application/pdf" });
     } finally {
       // Cleanup all loaded source documents
       for (const docPtr of loadedDocs.values()) {
@@ -166,10 +159,7 @@ export class PDFExportService {
   /**
    * Create a single PDF document with all operations applied (single source) using PDFium.
    */
-  private async createSingleDocument(
-    sourceData: ArrayBuffer,
-    pages: PDFPage[]
-  ): Promise<Blob> {
+  private async createSingleDocument(sourceData: ArrayBuffer, pages: PDFPage[]): Promise<Blob> {
     const m = await getPdfiumModule();
 
     // Open source document
@@ -177,7 +167,7 @@ export class PDFExportService {
     const destDocPtr = m.FPDF_CreateNewDocument();
     if (!destDocPtr) {
       await closeRawDocument(srcDocPtr);
-      throw new Error('PDFium: failed to create destination document');
+      throw new Error("PDFium: failed to create destination document");
     }
 
     try {
@@ -214,7 +204,7 @@ export class PDFExportService {
       }
 
       const resultBuf = await saveRawDocument(destDocPtr);
-      return new Blob([resultBuf], { type: 'application/pdf' });
+      return new Blob([resultBuf], { type: "application/pdf" });
     } finally {
       await closeRawDocument(srcDocPtr);
       m.FPDF_CloseDocument(destDocPtr);
@@ -225,7 +215,7 @@ export class PDFExportService {
    * Generate appropriate filename for export
    */
   private generateFilename(originalName: string): string {
-    const baseName = originalName.replace(/\.pdf$/i, '');
+    const baseName = originalName.replace(/\.pdf$/i, "");
     return `${baseName}.pdf`;
   }
 
@@ -254,19 +244,19 @@ export class PDFExportService {
     const errors: string[] = [];
 
     if (selectedOnly && selectedPageIds.length === 0) {
-      errors.push('No pages selected for export');
+      errors.push("No pages selected for export");
     }
 
     if (pdfDocument.pages.length === 0) {
-      errors.push('No pages available to export');
+      errors.push("No pages available to export");
     }
 
     const pagesToExport = selectedOnly
-      ? pdfDocument.pages.filter(page => selectedPageIds.includes(page.id))
+      ? pdfDocument.pages.filter((page) => selectedPageIds.includes(page.id))
       : pdfDocument.pages;
 
     if (pagesToExport.length === 0) {
-      errors.push('No valid pages to export after applying filters');
+      errors.push("No valid pages to export after applying filters");
     }
 
     return errors;
@@ -275,13 +265,17 @@ export class PDFExportService {
   /**
    * Get export preview information
    */
-  getExportInfo(pdfDocument: PDFDocument, selectedPageIds: string[], selectedOnly: boolean): {
+  getExportInfo(
+    pdfDocument: PDFDocument,
+    selectedPageIds: string[],
+    selectedOnly: boolean,
+  ): {
     pageCount: number;
     splitCount: number;
     estimatedSize: string;
   } {
     const pagesToExport = selectedOnly
-      ? pdfDocument.pages.filter(page => selectedPageIds.includes(page.id))
+      ? pdfDocument.pages.filter((page) => selectedPageIds.includes(page.id))
       : pdfDocument.pages;
 
     const splitCount = pagesToExport.reduce((count, page) => {
@@ -295,7 +289,7 @@ export class PDFExportService {
     return {
       pageCount: pagesToExport.length,
       splitCount,
-      estimatedSize
+      estimatedSize,
     };
   }
 
@@ -303,11 +297,11 @@ export class PDFExportService {
    * Format file size for display
    */
   private formatFileSize(bytes: number): string {
-    if (bytes === 0) return '0 B';
+    if (bytes === 0) return "0 B";
     const k = 1024;
-    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const sizes = ["B", "KB", "MB", "GB"];
     const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
   }
 }
 
@@ -317,10 +311,14 @@ export class PDFExportService {
 function degreesToPdfiumRotation(degrees: number): number {
   const normalized = ((degrees % 360) + 360) % 360;
   switch (normalized) {
-    case 90: return 1;
-    case 180: return 2;
-    case 270: return 3;
-    default: return 0;
+    case 90:
+      return 1;
+    case 180:
+      return 2;
+    case 270:
+      return 3;
+    default:
+      return 0;
   }
 }
 
diff --git a/frontend/src/core/services/pdfMetadataService.ts b/frontend/src/core/services/pdfMetadataService.ts
index 3c1dd2b380..10c45e0832 100644
--- a/frontend/src/core/services/pdfMetadataService.ts
+++ b/frontend/src/core/services/pdfMetadataService.ts
@@ -1,7 +1,7 @@
-import { pdfWorkerManager } from '@app/services/pdfWorkerManager';
-import { FileAnalyzer } from '@app/services/fileAnalyzer';
-import { TrappedStatus, CustomMetadataEntry, ExtractedPDFMetadata } from '@app/types/metadata';
-import { PDFDocumentProxy } from 'pdfjs-dist/types/src/display/api';
+import { pdfWorkerManager } from "@app/services/pdfWorkerManager";
+import { FileAnalyzer } from "@app/services/fileAnalyzer";
+import { TrappedStatus, CustomMetadataEntry, ExtractedPDFMetadata } from "@app/types/metadata";
+import { PDFDocumentProxy } from "pdfjs-dist/types/src/display/api";
 
 export interface MetadataExtractionResult {
   success: true;
@@ -21,13 +21,13 @@ export type MetadataExtractionResponse = MetadataExtractionResult | MetadataExtr
  */
 function formatPDFDate(dateString: string): string {
   if (!dateString) {
-    return '';
+    return "";
   }
 
   let date: Date;
 
   // Check if it's a PDF date format (starts with "D:")
-  if (dateString.startsWith('D:')) {
+  if (dateString.startsWith("D:")) {
     // Parse PDF date format: D:YYYYMMDDHHmmSSOHH'mm'
     const dateStr = dateString.substring(2); // Remove "D:"
 
@@ -47,15 +47,15 @@ function formatPDFDate(dateString: string): string {
   }
 
   if (isNaN(date.getTime())) {
-    return '';
+    return "";
   }
 
   const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, '0');
-  const day = String(date.getDate()).padStart(2, '0');
-  const hours = String(date.getHours()).padStart(2, '0');
-  const minutes = String(date.getMinutes()).padStart(2, '0');
-  const seconds = String(date.getSeconds()).padStart(2, '0');
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
+  const hours = String(date.getHours()).padStart(2, "0");
+  const minutes = String(date.getMinutes()).padStart(2, "0");
+  const seconds = String(date.getSeconds()).padStart(2, "0");
 
   return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
 }
@@ -65,10 +65,10 @@ function formatPDFDate(dateString: string): string {
  * PDF.js returns trapped as { name: "True" | "False" } object
  */
 function convertTrappedStatus(trapped: unknown): TrappedStatus {
-  if (trapped && typeof trapped === 'object' && 'name' in trapped) {
+  if (trapped && typeof trapped === "object" && "name" in trapped) {
     const name = (trapped as Record<string, string>).name?.toLowerCase();
-    if (name === 'true') return TrappedStatus.TRUE;
-    if (name === 'false') return TrappedStatus.FALSE;
+    if (name === "true") return TrappedStatus.TRUE;
+    if (name === "false") return TrappedStatus.FALSE;
   }
   return TrappedStatus.UNKNOWN;
 }
@@ -81,17 +81,16 @@ function extractCustomMetadata(custom: unknown): CustomMetadataEntry[] {
   const customMetadata: CustomMetadataEntry[] = [];
   let customIdCounter = 1;
 
-
   // Check if there's a Custom object containing the custom metadata
-  if (typeof custom === 'object' && custom !== null) {
+  if (typeof custom === "object" && custom !== null) {
     const customObj = custom as Record<string, unknown>;
 
     Object.entries(customObj).forEach(([key, value]) => {
-      if (value != null && value !== '') {
+      if (value != null && value !== "") {
         const entry = {
           key,
           value: String(value),
-          id: `custom${customIdCounter++}`
+          id: `custom${customIdCounter++}`,
         };
         customMetadata.push(entry);
       }
@@ -109,16 +108,16 @@ function cleanupPdfDocument(pdfDoc: PDFDocumentProxy | null): void {
     try {
       pdfWorkerManager.destroyDocument(pdfDoc);
     } catch (cleanupError) {
-      console.warn('Failed to cleanup PDF document:', cleanupError);
+      console.warn("Failed to cleanup PDF document:", cleanupError);
     }
   }
 }
 
 function getStringMetadata(info: Record<string, unknown>, key: string): string {
-  if (typeof info[key] === 'string') {
+  if (typeof info[key] === "string") {
     return info[key];
   } else {
-    return '';
+    return "";
   }
 }
 
@@ -132,7 +131,7 @@ export async function extractPDFMetadata(file: File): Promise<MetadataExtraction
   if (!isValidPDF) {
     return {
       success: false,
-      error: 'File is not a valid PDF'
+      error: "File is not a valid PDF",
     };
   }
 
@@ -144,15 +143,15 @@ export async function extractPDFMetadata(file: File): Promise<MetadataExtraction
     arrayBuffer = await file.arrayBuffer();
     pdfDoc = await pdfWorkerManager.createDocument(arrayBuffer, {
       disableAutoFetch: true,
-      disableStream: true
+      disableStream: true,
     });
     metadata = await pdfDoc.getMetadata();
   } catch (error) {
-    const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+    const errorMessage = error instanceof Error ? error.message : "Unknown error";
     cleanupPdfDocument(pdfDoc);
     return {
       success: false,
-      error: `Failed to read PDF: ${errorMessage}`
+      error: `Failed to read PDF: ${errorMessage}`,
     };
   }
 
@@ -160,14 +159,14 @@ export async function extractPDFMetadata(file: File): Promise<MetadataExtraction
 
   // Safely extract metadata with proper type checking
   const extractedMetadata: ExtractedPDFMetadata = {
-    title: getStringMetadata(info, 'Title'),
-    author: getStringMetadata(info, 'Author'),
-    subject: getStringMetadata(info, 'Subject'),
-    keywords: getStringMetadata(info, 'Keywords'),
-    creator: getStringMetadata(info, 'Creator'),
-    producer: getStringMetadata(info, 'Producer'),
-    creationDate: formatPDFDate(getStringMetadata(info, 'CreationDate')),
-    modificationDate: formatPDFDate(getStringMetadata(info, 'ModDate')),
+    title: getStringMetadata(info, "Title"),
+    author: getStringMetadata(info, "Author"),
+    subject: getStringMetadata(info, "Subject"),
+    keywords: getStringMetadata(info, "Keywords"),
+    creator: getStringMetadata(info, "Creator"),
+    producer: getStringMetadata(info, "Producer"),
+    creationDate: formatPDFDate(getStringMetadata(info, "CreationDate")),
+    modificationDate: formatPDFDate(getStringMetadata(info, "ModDate")),
     trapped: convertTrappedStatus(info.Trapped),
     customMetadata: extractCustomMetadata(info.Custom),
   };
@@ -176,6 +175,6 @@ export async function extractPDFMetadata(file: File): Promise<MetadataExtraction
 
   return {
     success: true,
-    metadata: extractedMetadata
+    metadata: extractedMetadata,
   };
 }
diff --git a/frontend/src/core/services/pdfProcessingService.ts b/frontend/src/core/services/pdfProcessingService.ts
index 02d29898ca..46c577c816 100644
--- a/frontend/src/core/services/pdfProcessingService.ts
+++ b/frontend/src/core/services/pdfProcessingService.ts
@@ -1,7 +1,7 @@
-import { ProcessedFile, ProcessingState, PDFPage } from '@app/types/processing';
-import { ProcessingCache } from '@app/services/processingCache';
-import { pdfWorkerManager } from '@app/services/pdfWorkerManager';
-import { createQuickKey } from '@app/types/fileContext';
+import { ProcessedFile, ProcessingState, PDFPage } from "@app/types/processing";
+import { ProcessingCache } from "@app/services/processingCache";
+import { pdfWorkerManager } from "@app/services/pdfWorkerManager";
+import { createQuickKey } from "@app/types/fileContext";
 
 export class PDFProcessingService {
   private static instance: PDFProcessingService;
@@ -24,13 +24,13 @@ export class PDFProcessingService {
     // Check cache first
     const cached = this.cache.get(fileKey);
     if (cached) {
-      console.log('Cache hit for:', file.name);
+      console.log("Cache hit for:", file.name);
       return cached;
     }
 
     // Check if already processing
     if (this.processing.has(fileKey)) {
-      console.log('Already processing:', file.name);
+      console.log("Already processing:", file.name);
       return null; // Will be available when processing completes
     }
 
@@ -44,10 +44,10 @@ export class PDFProcessingService {
     const state: ProcessingState = {
       fileKey,
       fileName: file.name,
-      status: 'processing',
+      status: "processing",
       progress: 0,
       startedAt: Date.now(),
-      strategy: 'immediate_full'
+      strategy: "immediate_full",
     };
 
     this.processing.set(fileKey, state);
@@ -64,7 +64,7 @@ export class PDFProcessingService {
       this.cache.set(fileKey, processedFile);
 
       // Update state to completed
-      state.status = 'completed';
+      state.status = "completed";
       state.progress = 100;
       state.completedAt = Date.now();
       this.notifyListeners();
@@ -74,11 +74,10 @@ export class PDFProcessingService {
         this.processing.delete(fileKey);
         this.notifyListeners();
       }, 2000);
-
     } catch (error) {
-      console.error('Processing failed for', file.name, ':', error);
-      state.status = 'error';
-      state.error = (error instanceof Error ? error.message : 'Unknown error') as any;
+      console.error("Processing failed for", file.name, ":", error);
+      state.status = "error";
+      state.error = (error instanceof Error ? error.message : "Unknown error") as any;
       this.notifyListeners();
 
       // Remove failed processing after delay
@@ -89,10 +88,7 @@ export class PDFProcessingService {
     }
   }
 
-  private async processFileWithProgress(
-    file: File,
-    onProgress: (progress: number) => void
-  ): Promise<ProcessedFile> {
+  private async processFileWithProgress(file: File, onProgress: (progress: number) => void): Promise<ProcessedFile> {
     const arrayBuffer = await file.arrayBuffer();
     const pdf = await pdfWorkerManager.createDocument(arrayBuffer);
     const totalPages = pdf.numPages;
@@ -104,11 +100,11 @@ export class PDFProcessingService {
     for (let i = 1; i <= totalPages; i++) {
       const page = await pdf.getPage(i);
       const viewport = page.getViewport({ scale: 0.5 });
-      const canvas = document.createElement('canvas');
+      const canvas = document.createElement("canvas");
       canvas.width = viewport.width;
       canvas.height = viewport.height;
 
-      const context = canvas.getContext('2d');
+      const context = canvas.getContext("2d");
       if (context) {
         await page.render({ canvasContext: context, viewport, canvas }).promise;
         const thumbnail = canvas.toDataURL();
@@ -118,7 +114,7 @@ export class PDFProcessingService {
           pageNumber: i,
           thumbnail,
           rotation: 0,
-          selected: false
+          selected: false,
         });
       }
 
@@ -137,8 +133,8 @@ export class PDFProcessingService {
       metadata: {
         title: file.name,
         createdAt: new Date().toISOString(),
-        modifiedAt: new Date().toISOString()
-      }
+        modifiedAt: new Date().toISOString(),
+      },
     };
   }
 
@@ -153,7 +149,7 @@ export class PDFProcessingService {
   }
 
   private notifyListeners(): void {
-    this.processingListeners.forEach(callback => callback(this.processing));
+    this.processingListeners.forEach((callback) => callback(this.processing));
   }
 
   generateFileKey(file: File): string {
@@ -162,7 +158,7 @@ export class PDFProcessingService {
 
   // Cleanup method for activeFiles changes
   cleanup(removedFiles: File[]): void {
-    removedFiles.forEach(file => {
+    removedFiles.forEach((file) => {
       const key = this.generateFileKey(file);
       this.cache.delete(key);
       this.processing.delete(key);
diff --git a/frontend/src/core/services/pdfWorkerManager.ts b/frontend/src/core/services/pdfWorkerManager.ts
index 7e70901a88..cf16453a2f 100644
--- a/frontend/src/core/services/pdfWorkerManager.ts
+++ b/frontend/src/core/services/pdfWorkerManager.ts
@@ -5,7 +5,7 @@
  * and ensuring proper cleanup when operations complete.
  */
 
-import { GlobalWorkerOptions, getDocument, PDFDocumentProxy } from 'pdfjs-dist/legacy/build/pdf.mjs';
+import { GlobalWorkerOptions, getDocument, PDFDocumentProxy } from "pdfjs-dist/legacy/build/pdf.mjs";
 
 class PDFWorkerManager {
   private static instance: PDFWorkerManager;
@@ -30,10 +30,7 @@ class PDFWorkerManager {
    */
   private initializeWorker(): void {
     if (!this.isInitialized) {
-      GlobalWorkerOptions.workerSrc = new URL(
-        'pdfjs-dist/legacy/build/pdf.worker.min.mjs',
-        import.meta.url
-      ).toString();
+      GlobalWorkerOptions.workerSrc = new URL("pdfjs-dist/legacy/build/pdf.worker.min.mjs", import.meta.url).toString();
       (GlobalWorkerOptions as any).docBaseUrl = undefined;
       this.isInitialized = true;
     }
@@ -50,7 +47,7 @@ class PDFWorkerManager {
       disableStream?: boolean;
       stopAtErrors?: boolean;
       verbosity?: number;
-    } = {}
+    } = {},
   ): Promise<PDFDocumentProxy> {
     // Wait if we've hit the worker limit
     if (this.activeDocuments.size >= this.maxWorkers) {
@@ -61,32 +58,34 @@ class PDFWorkerManager {
     let pdfData: any;
     if (data instanceof ArrayBuffer || data instanceof Uint8Array) {
       pdfData = { data };
-    } else if (typeof data === 'string') {
+    } else if (typeof data === "string") {
       pdfData = data; // URL string
-    } else if (data && typeof data === 'object' && 'data' in data) {
+    } else if (data && typeof data === "object" && "data" in data) {
       pdfData = data; // Already in {data: ArrayBuffer} format
     } else {
       pdfData = data; // Pass through as-is
     }
 
     const loadingTask = getDocument(
-      typeof pdfData === 'string' ? {
-        url: pdfData,
-        disableAutoFetch: options.disableAutoFetch ?? true,
-        disableStream: options.disableStream ?? true,
-        stopAtErrors: options.stopAtErrors ?? false,
-        verbosity: options.verbosity ?? 0,
-        // Suppress warnings about unimplemented widget types and other non-critical issues
-        isEvalSupported: false,
-      } : {
-        ...pdfData,
-        disableAutoFetch: options.disableAutoFetch ?? true,
-        disableStream: options.disableStream ?? true,
-        stopAtErrors: options.stopAtErrors ?? false,
-        verbosity: options.verbosity ?? 0,
-        // Suppress warnings about unimplemented widget types and other non-critical issues
-        isEvalSupported: false,
-      }
+      typeof pdfData === "string"
+        ? {
+            url: pdfData,
+            disableAutoFetch: options.disableAutoFetch ?? true,
+            disableStream: options.disableStream ?? true,
+            stopAtErrors: options.stopAtErrors ?? false,
+            verbosity: options.verbosity ?? 0,
+            // Suppress warnings about unimplemented widget types and other non-critical issues
+            isEvalSupported: false,
+          }
+        : {
+            ...pdfData,
+            disableAutoFetch: options.disableAutoFetch ?? true,
+            disableStream: options.disableStream ?? true,
+            stopAtErrors: options.stopAtErrors ?? false,
+            verbosity: options.verbosity ?? 0,
+            // Suppress warnings about unimplemented widget types and other non-critical issues
+            isEvalSupported: false,
+          },
     );
 
     try {
@@ -130,7 +129,7 @@ class PDFWorkerManager {
    */
   destroyAllDocuments(): void {
     const documentsToDestroy = Array.from(this.activeDocuments);
-    documentsToDestroy.forEach(pdf => {
+    documentsToDestroy.forEach((pdf) => {
       this.destroyDocument(pdf);
     });
 
@@ -161,7 +160,7 @@ class PDFWorkerManager {
     return {
       active: this.activeDocuments.size,
       max: this.maxWorkers,
-      total: this.workerCount
+      total: this.workerCount,
     };
   }
 
@@ -170,7 +169,7 @@ class PDFWorkerManager {
    */
   emergencyCleanup(): void {
     // Force destroy all documents
-    this.activeDocuments.forEach(pdf => {
+    this.activeDocuments.forEach((pdf) => {
       try {
         pdf.destroy();
       } catch {
diff --git a/frontend/src/core/services/pdfiumDocBuilder.ts b/frontend/src/core/services/pdfiumDocBuilder.ts
index 5e7dffb71d..5851fe50c0 100644
--- a/frontend/src/core/services/pdfiumDocBuilder.ts
+++ b/frontend/src/core/services/pdfiumDocBuilder.ts
@@ -8,9 +8,9 @@
  *
  * Used by the signature validation report system.
  */
-import { getPdfiumModule, writeUtf16, saveRawDocument } from '@app/services/pdfiumService';
-import { embedBitmapImageOnPage } from '@app/utils/pdfiumBitmapUtils';
-import type { WrappedPdfiumModule } from '@embedpdf/pdfium';
+import { getPdfiumModule, writeUtf16, saveRawDocument } from "@app/services/pdfiumService";
+import { embedBitmapImageOnPage } from "@app/utils/pdfiumBitmapUtils";
+import type { WrappedPdfiumModule } from "@embedpdf/pdfium";
 
 // ---------------------------------------------------------------------------
 // Color type (replaces pdf-lib's `rgb()`)
@@ -39,14 +39,14 @@ function colorToRGBA(c: PdfiumColor): [number, number, number, number] {
 
 /** Standard PDF font names matching pdf-lib's StandardFonts enum. */
 export const StandardFonts = {
-  Helvetica: 'Helvetica',
-  HelveticaBold: 'Helvetica-Bold',
-  HelveticaOblique: 'Helvetica-Oblique',
-  HelveticaBoldOblique: 'Helvetica-BoldOblique',
-  Courier: 'Courier',
-  CourierBold: 'Courier-Bold',
-  TimesRoman: 'Times-Roman',
-  TimesBold: 'Times-Bold',
+  Helvetica: "Helvetica",
+  HelveticaBold: "Helvetica-Bold",
+  HelveticaOblique: "Helvetica-Oblique",
+  HelveticaBoldOblique: "Helvetica-BoldOblique",
+  Courier: "Courier",
+  CourierBold: "Courier-Bold",
+  TimesRoman: "Times-Roman",
+  TimesBold: "Times-Bold",
 } as const;
 
 export class PdfiumFont {
@@ -77,20 +77,20 @@ export class PdfiumFont {
 
   /** Map PDF font name to a CSS font-family for canvas measurement. */
   private _cssFontFamily(): string {
-    if (this.name.startsWith('Helvetica')) return 'Helvetica, Arial, sans-serif';
-    if (this.name.startsWith('Courier')) return 'Courier, monospace';
-    if (this.name.startsWith('Times')) return 'Times New Roman, serif';
-    return 'sans-serif';
+    if (this.name.startsWith("Helvetica")) return "Helvetica, Arial, sans-serif";
+    if (this.name.startsWith("Courier")) return "Courier, monospace";
+    if (this.name.startsWith("Times")) return "Times New Roman, serif";
+    return "sans-serif";
   }
 
   private _getCtx(): CanvasRenderingContext2D | OffscreenCanvasRenderingContext2D {
     if (this._ctx) return this._ctx;
-    if (typeof OffscreenCanvas !== 'undefined') {
+    if (typeof OffscreenCanvas !== "undefined") {
       this._canvas = new OffscreenCanvas(1, 1);
-      this._ctx = this._canvas.getContext('2d')!;
+      this._ctx = this._canvas.getContext("2d")!;
     } else {
-      this._canvas = document.createElement('canvas');
-      this._ctx = this._canvas.getContext('2d')!;
+      this._canvas = document.createElement("canvas");
+      this._ctx = this._canvas.getContext("2d")!;
     }
     return this._ctx;
   }
@@ -182,7 +182,7 @@ export class PdfiumPage {
   drawText(text: string, options: DrawTextOptions): void {
     const { x, y, size, font, color } = options;
     const m = this._m;
-    const fontName = font?.name ?? 'Helvetica';
+    const fontName = font?.name ?? "Helvetica";
 
     const textObjPtr = m.FPDFPageObj_NewTextObj(this._docPtr, fontName, size);
     if (!textObjPtr) return;
@@ -274,9 +274,14 @@ export class PdfiumPage {
   drawImage(image: PdfiumImage, options: DrawImageOptions): void {
     const { x, y, width, height } = options;
     embedBitmapImageOnPage(
-      this._m, this._docPtr, this._pagePtr,
+      this._m,
+      this._docPtr,
+      this._pagePtr,
       { rgba: image._rgba, width: image.width, height: image.height },
-      x, y, width, height,
+      x,
+      y,
+      width,
+      height,
     );
   }
 
@@ -310,7 +315,7 @@ export class PdfiumDocument {
   static async create(): Promise<PdfiumDocument> {
     const m = await getPdfiumModule();
     const docPtr = m.FPDF_CreateNewDocument();
-    if (!docPtr) throw new Error('PDFium: failed to create document');
+    if (!docPtr) throw new Error("PDFium: failed to create document");
     return new PdfiumDocument(m, docPtr);
   }
 
@@ -319,7 +324,7 @@ export class PdfiumDocument {
     const [width, height] = dimensions;
     const insertIdx = this._pages.length;
     const pagePtr = this._m.FPDFPage_New(this._docPtr, insertIdx, width, height);
-    if (!pagePtr) throw new Error('PDFium: failed to create page');
+    if (!pagePtr) throw new Error("PDFium: failed to create page");
     const page = new PdfiumPage(this._m, this._docPtr, pagePtr, width, height);
     this._pages.push(page);
     return page;
@@ -335,12 +340,12 @@ export class PdfiumDocument {
 
   /** Embed a PNG image from raw bytes. */
   async embedPng(bytes: Uint8Array | ArrayBuffer): Promise<PdfiumImage> {
-    return this._decodeImage(bytes instanceof Uint8Array ? bytes : new Uint8Array(bytes), 'image/png');
+    return this._decodeImage(bytes instanceof Uint8Array ? bytes : new Uint8Array(bytes), "image/png");
   }
 
   /** Embed a JPEG image from raw bytes. */
   async embedJpg(bytes: Uint8Array | ArrayBuffer): Promise<PdfiumImage> {
-    return this._decodeImage(bytes instanceof Uint8Array ? bytes : new Uint8Array(bytes), 'image/jpeg');
+    return this._decodeImage(bytes instanceof Uint8Array ? bytes : new Uint8Array(bytes), "image/jpeg");
   }
 
   /** Get the number of pages. */
@@ -377,13 +382,13 @@ export class PdfiumDocument {
       const img = new Image();
       img.onload = () => {
         try {
-          const canvas = document.createElement('canvas');
+          const canvas = document.createElement("canvas");
           canvas.width = img.width;
           canvas.height = img.height;
-          const ctx = canvas.getContext('2d');
+          const ctx = canvas.getContext("2d");
           if (!ctx) {
             URL.revokeObjectURL(url);
-            reject(new Error('Canvas 2D context unavailable'));
+            reject(new Error("Canvas 2D context unavailable"));
             return;
           }
           ctx.drawImage(img, 0, 0);
@@ -397,7 +402,7 @@ export class PdfiumDocument {
       };
       img.onerror = () => {
         URL.revokeObjectURL(url);
-        reject(new Error('Failed to decode image'));
+        reject(new Error("Failed to decode image"));
       };
       img.src = url;
     });
diff --git a/frontend/src/core/services/pdfiumService.ts b/frontend/src/core/services/pdfiumService.ts
index 2ff996308d..b6f5e551ef 100644
--- a/frontend/src/core/services/pdfiumService.ts
+++ b/frontend/src/core/services/pdfiumService.ts
@@ -12,8 +12,8 @@
  * `getSignatures`, `saveAsCopy`, …) wrap the `PdfEngine` interface so callers
  * never have to deal with raw pointers or Tasks.
  */
-import { init, type WrappedPdfiumModule } from '@embedpdf/pdfium';
-import type { FormField, WidgetCoordinates } from '@app/tools/formFill/types';
+import { init, type WrappedPdfiumModule } from "@embedpdf/pdfium";
+import type { FormField, WidgetCoordinates } from "@app/tools/formFill/types";
 
 // PDF form field type constants (matching PDFium C API FPDF_FORMFIELD_* values)
 const FPDF_FORMFIELD_UNKNOWN = 0;
@@ -45,8 +45,8 @@ let _module: WrappedPdfiumModule | null = null;
  * Resolve the absolute WASM URL using the same pattern as LocalEmbedPDF.
  */
 function wasmUrl(): string {
-  const base = (import.meta as any).env?.BASE_URL ?? '/';
-  return `${base}pdfium/pdfium.wasm`.replace(/\/\//g, '/');
+  const base = (import.meta as any).env?.BASE_URL ?? "/";
+  return `${base}pdfium/pdfium.wasm`.replace(/\/\//g, "/");
 }
 
 /**
@@ -62,7 +62,11 @@ export async function getPdfiumModule(): Promise<WrappedPdfiumModule> {
       locateFile: () => wasmUrl(),
     } as any).then((m) => {
       // Call PDFiumExt_Init to ensure extensions (form fill etc.) are set up
-      try { m.PDFiumExt_Init(); } catch { /* already initialized */ }
+      try {
+        m.PDFiumExt_Init();
+      } catch {
+        /* already initialized */
+      }
       _module = m;
       return m;
     });
@@ -80,7 +84,6 @@ export function resetPdfiumModule(): void {
   _docDataPtrs.clear();
 }
 
-
 /**
  * Map of document pointer → WASM data buffer pointer.
  * FPDF_LoadMemDocument does NOT copy the data — it keeps a reference, so the
@@ -101,13 +104,9 @@ const _docDataPtrs = new Map<number, number>();
  * FS_RECTF memory layout: { left (f32), top (f32), right (f32), bottom (f32) }
  * In PDF coords (origin lower-left): top > bottom.
  */
-export function readAnnotRectAdjusted(
-  m: WrappedPdfiumModule,
-  annotPtr: number,
-  rectBuf: number,
-): boolean {
+export function readAnnotRectAdjusted(m: WrappedPdfiumModule, annotPtr: number, rectBuf: number): boolean {
   const ext = (m as any).EPDFAnnot_GetRect;
-  if (typeof ext === 'function') {
+  if (typeof ext === "function") {
     return ext.call(m, annotPtr, rectBuf);
   }
   return m.FPDFAnnot_GetRect(annotPtr, rectBuf);
@@ -124,10 +123,10 @@ export function parseRectToCss(
   rectBuf: number,
   pageHeight: number,
 ): { x: number; y: number; width: number; height: number } {
-  const left = m.pdfium.getValue(rectBuf, 'float');
-  const top = m.pdfium.getValue(rectBuf + 4, 'float'); // FS_RECTF.top  (larger y)
-  const right = m.pdfium.getValue(rectBuf + 8, 'float');
-  const bottom = m.pdfium.getValue(rectBuf + 12, 'float'); // FS_RECTF.bottom (smaller y)
+  const left = m.pdfium.getValue(rectBuf, "float");
+  const top = m.pdfium.getValue(rectBuf + 4, "float"); // FS_RECTF.top  (larger y)
+  const right = m.pdfium.getValue(rectBuf + 8, "float");
+  const bottom = m.pdfium.getValue(rectBuf + 12, "float"); // FS_RECTF.bottom (smaller y)
 
   const pdfLeft = Math.min(left, right);
   const pdfTop = Math.max(top, bottom);
@@ -136,7 +135,7 @@ export function parseRectToCss(
 
   return {
     x: pdfLeft,
-    y: pageHeight - pdfTop,       // flip: CSS y = pageHeight − PDF top
+    y: pageHeight - pdfTop, // flip: CSS y = pageHeight − PDF top
     width: pdfWidth,
     height: pdfHeight,
   };
@@ -157,17 +156,14 @@ interface PageBox {
  * The returned values use the standard PDF coordinate system:
  *   left < right, bottom < top, origin at lower-left.
  */
-export function readEffectivePageBox(
-  m: WrappedPdfiumModule,
-  pagePtr: number,
-): PageBox {
+export function readEffectivePageBox(m: WrappedPdfiumModule, pagePtr: number): PageBox {
   const buf = m.pdfium.wasmExports.malloc(4 * 4); // 4 floats
 
   const read = (): PageBox | null => {
-    const l = m.pdfium.getValue(buf, 'float');
-    const b = m.pdfium.getValue(buf + 4, 'float');
-    const r = m.pdfium.getValue(buf + 8, 'float');
-    const t = m.pdfium.getValue(buf + 12, 'float');
+    const l = m.pdfium.getValue(buf, "float");
+    const b = m.pdfium.getValue(buf + 4, "float");
+    const r = m.pdfium.getValue(buf + 8, "float");
+    const t = m.pdfium.getValue(buf + 12, "float");
     const w = Math.abs(r - l);
     const h = Math.abs(t - b);
     if (w < 0.01 || h < 0.01) return null; // degenerate
@@ -208,26 +204,21 @@ export function readEffectivePageBox(
  * so it is never stale even if malloc triggered a memory growth.
  */
 function copyToWasmHeap(m: WrappedPdfiumModule, bytes: Uint8Array, ptr: number): void {
-  new Uint8Array(
-    (m.pdfium.wasmExports as any).memory.buffer,
-  ).set(bytes, ptr);
+  new Uint8Array((m.pdfium.wasmExports as any).memory.buffer).set(bytes, ptr);
 }
 
 /**
  * Load a PDF into PDFium memory and return the document pointer.
  * Caller MUST call `closeRawDocument(docPtr)` when finished.
  */
-export async function openRawDocument(
-  data: ArrayBuffer | Uint8Array,
-  password?: string,
-): Promise<number> {
+export async function openRawDocument(data: ArrayBuffer | Uint8Array, password?: string): Promise<number> {
   const m = await getPdfiumModule();
   const bytes = data instanceof Uint8Array ? data : new Uint8Array(data);
   const len = bytes.length;
   const ptr = m.pdfium.wasmExports.malloc(len);
   copyToWasmHeap(m, bytes, ptr);
 
-  const docPtr = m.FPDF_LoadMemDocument(ptr, len, password ?? '');
+  const docPtr = m.FPDF_LoadMemDocument(ptr, len, password ?? "");
   if (!docPtr) {
     m.pdfium.wasmExports.free(ptr);
     const err = m.FPDF_GetLastError();
@@ -242,10 +233,7 @@ export async function openRawDocument(
  * Open a raw document — convenience alias that delegates to {@link openRawDocument}.
  * Kept for API compatibility with callers that were updated to use the "Safe" variant.
  */
-export async function openRawDocumentSafe(
-  data: ArrayBuffer | Uint8Array,
-  password?: string,
-): Promise<number> {
+export async function openRawDocumentSafe(data: ArrayBuffer | Uint8Array, password?: string): Promise<number> {
   return openRawDocument(data, password);
 }
 
@@ -281,10 +269,7 @@ export async function getRawPageCount(docPtr: number): Promise<number> {
 /**
  * Get raw page dimensions { width, height } for a page.
  */
-export async function getRawPageSize(
-  docPtr: number,
-  pageIndex: number,
-): Promise<{ width: number; height: number }> {
+export async function getRawPageSize(docPtr: number, pageIndex: number): Promise<{ width: number; height: number }> {
   const m = await getPdfiumModule();
   const pagePtr = m.FPDF_LoadPage(docPtr, pageIndex);
   if (!pagePtr) throw new Error(`PDFium: failed to load page ${pageIndex}`);
@@ -299,7 +284,7 @@ export async function getRawPageSize(
  * bytes (including the trailing NUL pair).
  */
 export function readUtf16(m: WrappedPdfiumModule, ptr: number, byteLen: number): string {
-  if (byteLen <= 2 || !ptr) return '';
+  if (byteLen <= 2 || !ptr) return "";
   return m.pdfium.UTF16ToString(ptr);
 }
 
@@ -315,7 +300,6 @@ export function writeUtf16(m: WrappedPdfiumModule, str: string): number {
   return ptr;
 }
 
-
 export interface PdfiumFormField {
   name: string;
   type: PDF_FORM_FIELD_TYPE;
@@ -331,7 +315,7 @@ export interface PdfiumFormField {
 
 export interface PdfiumWidgetRect {
   pageIndex: number;
-  x: number;       // CSS upper-left origin (after y-flip)
+  x: number; // CSS upper-left origin (after y-flip)
   y: number;
   width: number;
   height: number;
@@ -347,16 +331,13 @@ export interface PdfiumWidgetRect {
  * Returns an array of parsed form fields with their widget rectangles already
  * converted to CSS coordinate space (upper-left origin).
  */
-export async function extractFormFields(
-  data: ArrayBuffer | Uint8Array,
-  password?: string,
-): Promise<PdfiumFormField[]> {
+export async function extractFormFields(data: ArrayBuffer | Uint8Array, password?: string): Promise<PdfiumFormField[]> {
   const m = await getPdfiumModule();
   let docPtr: number;
   try {
     docPtr = await openRawDocumentSafe(data, password);
   } catch (err) {
-    console.error('[extractFormFields] openRawDocumentSafe failed:', err);
+    console.error("[extractFormFields] openRawDocumentSafe failed:", err);
     if (err instanceof WebAssembly.RuntimeError) resetPdfiumModule();
     throw err;
   }
@@ -367,8 +348,13 @@ export async function extractFormFields(
     const formEnvPtr = m.PDFiumExt_InitFormFillEnvironment(docPtr, formInfoPtr);
 
     const pageCount = m.FPDF_GetPageCount(docPtr);
-    console.debug('[extractFormFields] docPtr=%d formEnvPtr=%d pageCount=%d dataSize=%d',
-      docPtr, formEnvPtr, pageCount, data instanceof Uint8Array ? data.length : data.byteLength);
+    console.debug(
+      "[extractFormFields] docPtr=%d formEnvPtr=%d pageCount=%d dataSize=%d",
+      docPtr,
+      formEnvPtr,
+      pageCount,
+      data instanceof Uint8Array ? data.length : data.byteLength,
+    );
     // Map: fieldName → PdfiumFormField (to merge widgets across pages)
     const fieldMap = new Map<string, PdfiumFormField>();
 
@@ -377,7 +363,7 @@ export async function extractFormFields(
       try {
         pagePtr = m.FPDF_LoadPage(docPtr, pageIdx);
       } catch (err) {
-        console.warn('[extractFormFields] FPDF_LoadPage crashed for page', pageIdx, err);
+        console.warn("[extractFormFields] FPDF_LoadPage crashed for page", pageIdx, err);
         if (err instanceof WebAssembly.RuntimeError) {
           resetPdfiumModule();
           throw err;
@@ -385,7 +371,7 @@ export async function extractFormFields(
         continue;
       }
       if (!pagePtr) {
-        console.warn('[extractFormFields] FPDF_LoadPage returned 0 for page', pageIdx);
+        console.warn("[extractFormFields] FPDF_LoadPage returned 0 for page", pageIdx);
         continue;
       }
 
@@ -394,7 +380,7 @@ export async function extractFormFields(
         try {
           m.FORM_OnAfterLoadPage(pagePtr, formEnvPtr);
         } catch (err) {
-          console.warn('[extractFormFields] FORM_OnAfterLoadPage crashed for page', pageIdx, err);
+          console.warn("[extractFormFields] FORM_OnAfterLoadPage crashed for page", pageIdx, err);
         }
       }
 
@@ -407,9 +393,14 @@ export async function extractFormFields(
 
       if (pageIdx === 0) {
         console.debug(
-          '[extractFormFields] page 0 box: left=%.2f bottom=%.2f right=%.2f top=%.2f  cropW=%.2f cropH=%.2f  FPDF_H=%.2f',
-          pageBox.left, pageBox.bottom, pageBox.right, pageBox.top,
-          cropWidth, cropHeight, m.FPDF_GetPageHeightF(pagePtr),
+          "[extractFormFields] page 0 box: left=%.2f bottom=%.2f right=%.2f top=%.2f  cropW=%.2f cropH=%.2f  FPDF_H=%.2f",
+          pageBox.left,
+          pageBox.bottom,
+          pageBox.right,
+          pageBox.top,
+          cropWidth,
+          cropHeight,
+          m.FPDF_GetPageHeightF(pagePtr),
         );
       }
 
@@ -417,34 +408,54 @@ export async function extractFormFields(
         try {
           this_extractAnnotation(m, formEnvPtr, pagePtr, pageIdx, pageBox, cropWidth, cropHeight, annotIdx, fieldMap);
         } catch (annotErr) {
-          console.warn('[extractFormFields] Annotation %d on page %d crashed:', annotIdx, pageIdx, annotErr);
+          console.warn("[extractFormFields] Annotation %d on page %d crashed:", annotIdx, pageIdx, annotErr);
         }
       }
 
       if (formEnvPtr) {
-        try { m.FORM_OnBeforeClosePage(pagePtr, formEnvPtr); } catch { /* best-effort */ }
+        try {
+          m.FORM_OnBeforeClosePage(pagePtr, formEnvPtr);
+        } catch {
+          /* best-effort */
+        }
+      }
+      try {
+        m.FPDF_ClosePage(pagePtr);
+      } catch {
+        /* best-effort */
       }
-      try { m.FPDF_ClosePage(pagePtr); } catch { /* best-effort */ }
     }
 
     // Cleanup form environment
     if (formEnvPtr) {
-      try { m.PDFiumExt_ExitFormFillEnvironment(formEnvPtr); } catch { /* */ }
+      try {
+        m.PDFiumExt_ExitFormFillEnvironment(formEnvPtr);
+      } catch {
+        /* */
+      }
     }
     if (formInfoPtr) {
-      try { m.PDFiumExt_CloseFormFillInfo(formInfoPtr); } catch { /* */ }
+      try {
+        m.PDFiumExt_CloseFormFillInfo(formInfoPtr);
+      } catch {
+        /* */
+      }
     }
 
-    console.debug('[extractFormFields] Extracted %d fields', fieldMap.size);
+    console.debug("[extractFormFields] Extracted %d fields", fieldMap.size);
     return Array.from(fieldMap.values());
   } catch (err) {
     if (err instanceof WebAssembly.RuntimeError) {
-      console.error('[extractFormFields] WASM RuntimeError — resetting module:', err);
+      console.error("[extractFormFields] WASM RuntimeError — resetting module:", err);
       resetPdfiumModule();
     }
     throw err;
   } finally {
-    try { closeDocAndFreeBuffer(m, docPtr); } catch { /* best-effort */ }
+    try {
+      closeDocAndFreeBuffer(m, docPtr);
+    } catch {
+      /* best-effort */
+    }
   }
 }
 
@@ -478,13 +489,11 @@ function this_extractAnnotation(
     if (subtype !== 20) return;
 
     // Get form field type
-    const fieldType = formEnvPtr
-      ? m.FPDFAnnot_GetFormFieldType(formEnvPtr, annotPtr)
-      : 0;
+    const fieldType = formEnvPtr ? m.FPDFAnnot_GetFormFieldType(formEnvPtr, annotPtr) : 0;
 
     // Get field name (requires a valid form environment pointer)
     const nameLen = formEnvPtr ? m.FPDFAnnot_GetFormFieldName(formEnvPtr, annotPtr, 0, 0) : 0;
-    let fieldName = '';
+    let fieldName = "";
     if (nameLen > 0) {
       const nameBuf = m.pdfium.wasmExports.malloc(nameLen);
       m.FPDFAnnot_GetFormFieldName(formEnvPtr, annotPtr, nameBuf, nameLen);
@@ -494,7 +503,7 @@ function this_extractAnnotation(
 
     // Get field value (requires a valid form environment pointer)
     const valLen = formEnvPtr ? m.FPDFAnnot_GetFormFieldValue(formEnvPtr, annotPtr, 0, 0) : 0;
-    let fieldValue = '';
+    let fieldValue = "";
     if (valLen > 0) {
       const valBuf = m.pdfium.wasmExports.malloc(valLen);
       m.FPDFAnnot_GetFormFieldValue(formEnvPtr, annotPtr, valBuf, valLen);
@@ -504,8 +513,8 @@ function this_extractAnnotation(
 
     // Get field flags (requires a valid form environment pointer)
     const fieldFlags = formEnvPtr ? m.FPDFAnnot_GetFormFieldFlags(formEnvPtr, annotPtr) : 0;
-    const isReadOnly = (fieldFlags & 1) !== 0;  // FORMFLAG_READONLY = 1
-    const isRequired = (fieldFlags & 2) !== 0;  // FORMFLAG_REQUIRED = 2
+    const isReadOnly = (fieldFlags & 1) !== 0; // FORMFLAG_READONLY = 1
+    const isRequired = (fieldFlags & 2) !== 0; // FORMFLAG_REQUIRED = 2
 
     // Is checked (for checkboxes/radios)
     const isChecked = formEnvPtr ? m.FPDFAnnot_IsChecked(formEnvPtr, annotPtr) : false;
@@ -519,16 +528,16 @@ function this_extractAnnotation(
       hasRect = m.FPDFAnnot_GetRect(annotPtr, rectBuf);
     } catch {
       m.pdfium.wasmExports.free(rectBuf);
-      throw new Error('FPDFAnnot_GetRect crashed');
+      throw new Error("FPDFAnnot_GetRect crashed");
     }
 
     let widgetRect: PdfiumWidgetRect | null = null;
     if (hasRect) {
       // Standard FS_RECTF: {left, bottom, right, top} — raw MediaBox coordinates
-      const rawLeft = m.pdfium.getValue(rectBuf, 'float');
-      const rawBottom = m.pdfium.getValue(rectBuf + 4, 'float');
-      const rawRight = m.pdfium.getValue(rectBuf + 8, 'float');
-      const rawTop = m.pdfium.getValue(rectBuf + 12, 'float');
+      const rawLeft = m.pdfium.getValue(rectBuf, "float");
+      const rawBottom = m.pdfium.getValue(rectBuf + 4, "float");
+      const rawRight = m.pdfium.getValue(rectBuf + 8, "float");
+      const rawTop = m.pdfium.getValue(rectBuf + 12, "float");
 
       const annotLeft = Math.min(rawLeft, rawRight);
       const annotBottom = Math.min(rawBottom, rawTop);
@@ -548,9 +557,18 @@ function this_extractAnnotation(
       // Diagnostic log for first annotation on first page
       if (pageIdx === 0 && annotIdx < 2) {
         console.debug(
-          '[extractFormFields] annot[%d] raw rect: L=%.2f B=%.2f R=%.2f T=%.2f → css: x=%.2f y=%.2f w=%.2f h=%.2f (cropAdj: relX=%.2f relY=%.2f)',
-          annotIdx, annotLeft, annotBottom, annotRight, annotTop,
-          cssX, cssY, pdfW, pdfH, relativeX, relativeY,
+          "[extractFormFields] annot[%d] raw rect: L=%.2f B=%.2f R=%.2f T=%.2f → css: x=%.2f y=%.2f w=%.2f h=%.2f (cropAdj: relX=%.2f relY=%.2f)",
+          annotIdx,
+          annotLeft,
+          annotBottom,
+          annotRight,
+          annotTop,
+          cssX,
+          cssY,
+          pdfW,
+          pdfH,
+          relativeX,
+          relativeY,
         );
       }
 
@@ -564,10 +582,10 @@ function this_extractAnnotation(
 
       // Get font size from default appearance
       try {
-        const daLen = m.FPDFAnnot_GetStringValue(annotPtr, 'DA', 0, 0);
+        const daLen = m.FPDFAnnot_GetStringValue(annotPtr, "DA", 0, 0);
         if (daLen > 0) {
           const daBuf = m.pdfium.wasmExports.malloc(daLen);
-          m.FPDFAnnot_GetStringValue(annotPtr, 'DA', daBuf, daLen);
+          m.FPDFAnnot_GetStringValue(annotPtr, "DA", daBuf, daLen);
           const daStr = readUtf16(m, daBuf, daLen);
           m.pdfium.wasmExports.free(daBuf);
           const tfMatch = daStr.match(/(\d+(?:\.\d+)?)\s+Tf/);
@@ -609,7 +627,7 @@ function this_extractAnnotation(
         const optCount = m.FPDFAnnot_GetOptionCount(formEnvPtr, annotPtr);
         for (let oi = 0; oi < optCount; oi++) {
           const optLabelLen = m.FPDFAnnot_GetOptionLabel(formEnvPtr, annotPtr, oi, 0, 0);
-          let optLabel = '';
+          let optLabel = "";
           if (optLabelLen > 0) {
             const optBuf = m.pdfium.wasmExports.malloc(optLabelLen);
             m.FPDFAnnot_GetOptionLabel(formEnvPtr, annotPtr, oi, optBuf, optLabelLen);
@@ -666,10 +684,7 @@ export interface PdfiumSignature {
 /**
  * Extract digital signature objects from a PDF.
  */
-export async function extractSignatures(
-  data: ArrayBuffer | Uint8Array,
-  password?: string,
-): Promise<PdfiumSignature[]> {
+export async function extractSignatures(data: ArrayBuffer | Uint8Array, password?: string): Promise<PdfiumSignature[]> {
   const m = await getPdfiumModule();
   const docPtr = await openRawDocumentSafe(data, password);
 
@@ -689,7 +704,7 @@ export async function extractSignatures(
         m.FPDFSignatureObj_GetContents(sigPtr, buf, contentsLen);
         contents = new Uint8Array(contentsLen);
         for (let j = 0; j < contentsLen; j++) {
-          contents[j] = m.pdfium.getValue(buf + j, 'i8') & 0xff;
+          contents[j] = m.pdfium.getValue(buf + j, "i8") & 0xff;
         }
         m.pdfium.wasmExports.free(buf);
       }
@@ -701,14 +716,14 @@ export async function extractSignatures(
         const brBuf = m.pdfium.wasmExports.malloc(brLen * 4);
         m.FPDFSignatureObj_GetByteRange(sigPtr, brBuf, brLen);
         for (let j = 0; j < brLen; j++) {
-          byteRange.push(m.pdfium.getValue(brBuf + j * 4, 'i32'));
+          byteRange.push(m.pdfium.getValue(brBuf + j * 4, "i32"));
         }
         m.pdfium.wasmExports.free(brBuf);
       }
 
       // SubFilter
       const sfLen = m.FPDFSignatureObj_GetSubFilter(sigPtr, 0, 0);
-      let subFilter = '';
+      let subFilter = "";
       if (sfLen > 0) {
         const sfBuf = m.pdfium.wasmExports.malloc(sfLen);
         m.FPDFSignatureObj_GetSubFilter(sigPtr, sfBuf, sfLen);
@@ -718,7 +733,7 @@ export async function extractSignatures(
 
       // Reason
       const reasonLen = m.FPDFSignatureObj_GetReason(sigPtr, 0, 0);
-      let reason = '';
+      let reason = "";
       if (reasonLen > 0) {
         const reasonBuf = m.pdfium.wasmExports.malloc(reasonLen);
         m.FPDFSignatureObj_GetReason(sigPtr, reasonBuf, reasonLen);
@@ -728,7 +743,7 @@ export async function extractSignatures(
 
       // Time
       const timeLen = m.FPDFSignatureObj_GetTime(sigPtr, 0, 0);
-      let time = '';
+      let time = "";
       if (timeLen > 0) {
         const timeBuf = m.pdfium.wasmExports.malloc(timeLen);
         m.FPDFSignatureObj_GetTime(sigPtr, timeBuf, timeLen);
@@ -748,7 +763,6 @@ export async function extractSignatures(
   }
 }
 
-
 /**
  * Render a single page to an ImageData-like bitmap.
  */
@@ -788,10 +802,10 @@ export async function renderPageToBitmap(
         const srcOff = y * stride + x * 4;
         const dstOff = (y * w + x) * 4;
         // BGRA → RGBA
-        pixelData[dstOff] = m.pdfium.getValue(bufferPtr + srcOff + 2, 'i8') & 0xff;
-        pixelData[dstOff + 1] = m.pdfium.getValue(bufferPtr + srcOff + 1, 'i8') & 0xff;
-        pixelData[dstOff + 2] = m.pdfium.getValue(bufferPtr + srcOff, 'i8') & 0xff;
-        pixelData[dstOff + 3] = m.pdfium.getValue(bufferPtr + srcOff + 3, 'i8') & 0xff;
+        pixelData[dstOff] = m.pdfium.getValue(bufferPtr + srcOff + 2, "i8") & 0xff;
+        pixelData[dstOff + 1] = m.pdfium.getValue(bufferPtr + srcOff + 1, "i8") & 0xff;
+        pixelData[dstOff + 2] = m.pdfium.getValue(bufferPtr + srcOff, "i8") & 0xff;
+        pixelData[dstOff + 3] = m.pdfium.getValue(bufferPtr + srcOff + 3, "i8") & 0xff;
       }
     }
 
@@ -808,7 +822,7 @@ export interface PdfiumLink {
   id: string;
   annotIndex: number;
   rect: { x: number; y: number; width: number; height: number };
-  type: 'internal' | 'external' | 'unknown';
+  type: "internal" | "external" | "unknown";
   targetPage?: number;
   uri?: string;
 }
@@ -859,7 +873,7 @@ export async function extractLinksFromPage(
 
       // Try to get link object
       const linkPtr = m.FPDFAnnot_GetLink(annotPtr);
-      let linkType: 'internal' | 'external' | 'unknown' = 'unknown';
+      let linkType: "internal" | "external" | "unknown" = "unknown";
       let targetPage: number | undefined;
       let uri: string | undefined;
 
@@ -876,24 +890,24 @@ export async function extractLinksFromPage(
               m.FPDFAction_GetURIPath(docPtr, actionPtr, uriBuf, uriLen);
               uri = m.pdfium.UTF8ToString(uriBuf);
               m.pdfium.wasmExports.free(uriBuf);
-              linkType = 'external';
+              linkType = "external";
             }
           } else if (actionType === 1) {
             // PDFACTION_GOTO = 1
             const destPtr = m.FPDFAction_GetDest(docPtr, actionPtr);
             if (destPtr) {
               targetPage = m.FPDFDest_GetDestPageIndex(docPtr, destPtr);
-              linkType = 'internal';
+              linkType = "internal";
             }
           }
         }
 
         // Check for direct destination (no action)
-        if (linkType === 'unknown') {
+        if (linkType === "unknown") {
           const destPtr = m.FPDFLink_GetDest(docPtr, linkPtr);
           if (destPtr) {
             targetPage = m.FPDFDest_GetDestPageIndex(docPtr, destPtr);
-            linkType = 'internal';
+            linkType = "internal";
           }
         }
       }
@@ -917,14 +931,13 @@ export async function extractLinksFromPage(
   }
 }
 
-
 /**
  * Create a new empty PDF document, returning its raw data.
  */
 export async function createEmptyDocument(): Promise<ArrayBuffer> {
   const m = await getPdfiumModule();
   const docPtr = m.FPDF_CreateNewDocument();
-  if (!docPtr) throw new Error('PDFium: failed to create new document');
+  if (!docPtr) throw new Error("PDFium: failed to create new document");
   const writerPtr = m.PDFiumExt_OpenFileWriter();
   m.PDFiumExt_SaveAsCopy(docPtr, writerPtr);
   const size = m.PDFiumExt_GetFileWriterSize(writerPtr);
@@ -933,7 +946,7 @@ export async function createEmptyDocument(): Promise<ArrayBuffer> {
   const result = new ArrayBuffer(size);
   const view = new Uint8Array(result);
   for (let i = 0; i < size; i++) {
-    view[i] = m.pdfium.getValue(outBuf + i, 'i8') & 0xff;
+    view[i] = m.pdfium.getValue(outBuf + i, "i8") & 0xff;
   }
   m.pdfium.wasmExports.free(outBuf);
   m.PDFiumExt_CloseFileWriter(writerPtr);
@@ -954,7 +967,7 @@ export async function saveRawDocument(docPtr: number): Promise<ArrayBuffer> {
   const result = new ArrayBuffer(size);
   const view = new Uint8Array(result);
   for (let i = 0; i < size; i++) {
-    view[i] = m.pdfium.getValue(outBuf + i, 'i8') & 0xff;
+    view[i] = m.pdfium.getValue(outBuf + i, "i8") & 0xff;
   }
   m.pdfium.wasmExports.free(outBuf);
   m.PDFiumExt_CloseFileWriter(writerPtr);
@@ -972,18 +985,14 @@ export async function importPages(
   insertIndex?: number,
 ): Promise<boolean> {
   const m = await getPdfiumModule();
-  return m.FPDF_ImportPages(destDocPtr, srcDocPtr, pageRange ?? '', insertIndex ?? 0);
+  return m.FPDF_ImportPages(destDocPtr, srcDocPtr, pageRange ?? "", insertIndex ?? 0);
 }
 
 /**
  * Set page rotation on a raw document.
  * @param rotation 0, 1, 2, 3 for 0°, 90°, 180°, 270°
  */
-export async function setPageRotation(
-  docPtr: number,
-  pageIndex: number,
-  rotation: number,
-): Promise<void> {
+export async function setPageRotation(docPtr: number, pageIndex: number, rotation: number): Promise<void> {
   const m = await getPdfiumModule();
   const pagePtr = m.FPDF_LoadPage(docPtr, pageIndex);
   if (!pagePtr) throw new Error(`PDFium: failed to load page ${pageIndex}`);
@@ -994,12 +1003,7 @@ export async function setPageRotation(
 /**
  * Create a new page in a document.
  */
-export async function addNewPage(
-  docPtr: number,
-  insertIndex: number,
-  width: number,
-  height: number,
-): Promise<void> {
+export async function addNewPage(docPtr: number, insertIndex: number, width: number, height: number): Promise<void> {
   const m = await getPdfiumModule();
   const pagePtr = m.FPDFPage_New(docPtr, insertIndex, width, height);
   if (pagePtr) m.FPDF_ClosePage(pagePtr);
@@ -1008,14 +1012,11 @@ export async function addNewPage(
 /**
  * Get metadata from a document.
  */
-export async function getMetadata(
-  data: ArrayBuffer | Uint8Array,
-  password?: string,
-): Promise<Record<string, string>> {
+export async function getMetadata(data: ArrayBuffer | Uint8Array, password?: string): Promise<Record<string, string>> {
   const m = await getPdfiumModule();
   const docPtr = await openRawDocumentSafe(data, password);
   try {
-    const tags = ['Title', 'Author', 'Subject', 'Keywords', 'Creator', 'Producer'];
+    const tags = ["Title", "Author", "Subject", "Keywords", "Creator", "Producer"];
     const meta: Record<string, string> = {};
     for (const tag of tags) {
       const len = m.FPDF_GetMetaText(docPtr, tag, 0, 0);
@@ -1072,14 +1073,13 @@ export async function extractSignatureFieldRects(
         if (!annotPtr) continue;
 
         const subtype = m.FPDFAnnot_GetSubtype(annotPtr);
-        if (subtype !== 20) { // WIDGET
+        if (subtype !== 20) {
+          // WIDGET
           m.FPDFPage_CloseAnnot(annotPtr);
           continue;
         }
 
-        const fieldType = formEnvPtr
-          ? m.FPDFAnnot_GetFormFieldType(formEnvPtr, annotPtr)
-          : 0;
+        const fieldType = formEnvPtr ? m.FPDFAnnot_GetFormFieldType(formEnvPtr, annotPtr) : 0;
 
         if (fieldType !== PDF_FORM_FIELD_TYPE.SIGNATURE) {
           m.FPDFPage_CloseAnnot(annotPtr);
@@ -1088,7 +1088,7 @@ export async function extractSignatureFieldRects(
 
         // Get field name
         const nameLen = m.FPDFAnnot_GetFormFieldName(formEnvPtr, annotPtr, 0, 0);
-        let name = '';
+        let name = "";
         if (nameLen > 0) {
           const nameBuf = m.pdfium.wasmExports.malloc(nameLen);
           m.FPDFAnnot_GetFormFieldName(formEnvPtr, annotPtr, nameBuf, nameLen);
@@ -1100,10 +1100,10 @@ export async function extractSignatureFieldRects(
         const rectBuf = m.pdfium.wasmExports.malloc(4 * 4);
         const hasRect = m.FPDFAnnot_GetRect(annotPtr, rectBuf);
         if (hasRect) {
-          const rawLeft = m.pdfium.getValue(rectBuf, 'float');
-          const rawBottom = m.pdfium.getValue(rectBuf + 4, 'float');
-          const rawRight = m.pdfium.getValue(rectBuf + 8, 'float');
-          const rawTop = m.pdfium.getValue(rectBuf + 12, 'float');
+          const rawLeft = m.pdfium.getValue(rectBuf, "float");
+          const rawBottom = m.pdfium.getValue(rectBuf + 4, "float");
+          const rawRight = m.pdfium.getValue(rectBuf + 8, "float");
+          const rawTop = m.pdfium.getValue(rectBuf + 12, "float");
 
           const aLeft = Math.min(rawLeft, rawRight);
           const aBottom = Math.min(rawBottom, rawTop);
@@ -1204,12 +1204,10 @@ async function renderWidgetAppearance(
 
   let ok = false;
   try {
-    ok = !!m.EPDF_RenderAnnotBitmap(
-      bitmapPtr, pagePtr, annotPtr,
-      AP_MODE_NORMAL, matrixPtr,
-      RENDER_FLAG_REVERSE_BYTE_ORDER,
-    );
-  } catch { /* Extension not available */ }
+    ok = !!m.EPDF_RenderAnnotBitmap(bitmapPtr, pagePtr, annotPtr, AP_MODE_NORMAL, matrixPtr, RENDER_FLAG_REVERSE_BYTE_ORDER);
+  } catch {
+    /* Extension not available */
+  }
   m.pdfium.wasmExports.free(matrixPtr);
   m.FPDFBitmap_Destroy(bitmapPtr);
 
@@ -1218,7 +1216,10 @@ async function renderWidgetAppearance(
     const rgba = new Uint8ClampedArray(pdfiumWasm.HEAPU8.buffer.slice(heapPtr, heapPtr + bytes));
     let hasVisible = false;
     for (let i = 3; i < rgba.length; i += 4) {
-      if (rgba[i] > 0) { hasVisible = true; break; }
+      if (rgba[i] > 0) {
+        hasVisible = true;
+        break;
+      }
     }
     if (hasVisible) imageData = new ImageData(rgba, wDev, hDev);
   }
@@ -1238,14 +1239,19 @@ async function renderWidgetAppearance(
     try {
       m.FPDF_RenderPageBitmap(bmp2, pagePtr, startX, startY, fullW, fullH, 0, 0x01 | 0x10);
       m.FPDF_FFLDraw(formEnvPtr, bmp2, pagePtr, startX, startY, fullW, fullH, 0, 0x01 | 0x10);
-    } catch { /* fallback not available */ }
+    } catch {
+      /* fallback not available */
+    }
 
     m.FPDFBitmap_Destroy(bmp2);
 
     const rgba2 = new Uint8ClampedArray(pdfiumWasm.HEAPU8.buffer.slice(heap2, heap2 + bytes));
     let hasVisible2 = false;
     for (let i = 3; i < rgba2.length; i += 4) {
-      if (rgba2[i] > 0) { hasVisible2 = true; break; }
+      if (rgba2[i] > 0) {
+        hasVisible2 = true;
+        break;
+      }
     }
     if (hasVisible2) imageData = new ImageData(rgba2, wDev, hDev);
     m.pdfium.wasmExports.free(heap2);
@@ -1302,14 +1308,13 @@ export async function renderSignatureFieldAppearances(
         if (!annotPtr) continue;
 
         const subtype = m.FPDFAnnot_GetSubtype(annotPtr);
-        if (subtype !== 20) { // FPDF_ANNOT_WIDGET
+        if (subtype !== 20) {
+          // FPDF_ANNOT_WIDGET
           m.FPDFPage_CloseAnnot(annotPtr);
           continue;
         }
 
-        const fieldType = formEnvPtr
-          ? m.FPDFAnnot_GetFormFieldType(formEnvPtr, annotPtr)
-          : 0;
+        const fieldType = formEnvPtr ? m.FPDFAnnot_GetFormFieldType(formEnvPtr, annotPtr) : 0;
 
         if (fieldType !== PDF_FORM_FIELD_TYPE.SIGNATURE) {
           m.FPDFPage_CloseAnnot(annotPtr);
@@ -1318,7 +1323,7 @@ export async function renderSignatureFieldAppearances(
 
         // --- field name ---
         const nameLen = m.FPDFAnnot_GetFormFieldName(formEnvPtr, annotPtr, 0, 0);
-        let name = '';
+        let name = "";
         if (nameLen > 0) {
           const nameBuf = m.pdfium.wasmExports.malloc(nameLen);
           m.FPDFAnnot_GetFormFieldName(formEnvPtr, annotPtr, nameBuf, nameLen);
@@ -1344,10 +1349,10 @@ export async function renderSignatureFieldAppearances(
         }
 
         // Standard FS_RECTF layout: {left, bottom, right, top}
-        const rawLeft = m.pdfium.getValue(rectBuf, 'float');
-        const rawBottom = m.pdfium.getValue(rectBuf + 4, 'float');
-        const rawRight = m.pdfium.getValue(rectBuf + 8, 'float');
-        const rawTop = m.pdfium.getValue(rectBuf + 12, 'float');
+        const rawLeft = m.pdfium.getValue(rectBuf, "float");
+        const rawBottom = m.pdfium.getValue(rectBuf + 4, "float");
+        const rawRight = m.pdfium.getValue(rectBuf + 8, "float");
+        const rawTop = m.pdfium.getValue(rectBuf + 12, "float");
         m.pdfium.wasmExports.free(rectBuf);
 
         // Normalise
@@ -1367,9 +1372,7 @@ export async function renderSignatureFieldAppearances(
         let imageData: ImageData | null = null;
 
         if (pdfW > 0.5 && pdfH > 0.5) {
-          const dpr = typeof window !== 'undefined'
-            ? Math.min(window.devicePixelRatio || 1, 3)
-            : 1;
+          const dpr = typeof window !== "undefined" ? Math.min(window.devicePixelRatio || 1, 3) : 1;
           const wDev = Math.max(1, Math.round(pdfW * dpr));
           const hDev = Math.max(1, Math.round(pdfH * dpr));
           const stride = wDev * 4;
@@ -1385,16 +1388,17 @@ export async function renderSignatureFieldAppearances(
           const sx = wDev / pdfW;
           const sy = hDev / pdfH;
           const matrixPtr = m.pdfium.wasmExports.malloc(6 * 4);
-          const matrixView = new Float32Array(
-            pdfiumWasm.HEAPF32.buffer, matrixPtr, 6,
-          );
+          const matrixView = new Float32Array(pdfiumWasm.HEAPF32.buffer, matrixPtr, 6);
           matrixView.set([sx, 0, 0, -sy, -sx * annotLeft, sy * annotTop]);
 
           let ok = false;
           try {
             ok = !!m.EPDF_RenderAnnotBitmap(
-              bitmapPtr, pagePtr, annotPtr,
-              AP_MODE_NORMAL, matrixPtr,
+              bitmapPtr,
+              pagePtr,
+              annotPtr,
+              AP_MODE_NORMAL,
+              matrixPtr,
               RENDER_FLAG_REVERSE_BYTE_ORDER,
             );
           } catch {
@@ -1405,12 +1409,13 @@ export async function renderSignatureFieldAppearances(
           m.FPDFBitmap_Destroy(bitmapPtr);
 
           if (ok) {
-            const rgba = new Uint8ClampedArray(
-              pdfiumWasm.HEAPU8.buffer.slice(heapPtr, heapPtr + bytes),
-            );
+            const rgba = new Uint8ClampedArray(pdfiumWasm.HEAPU8.buffer.slice(heapPtr, heapPtr + bytes));
             let hasVisible = false;
             for (let i = 3; i < rgba.length; i += 4) {
-              if (rgba[i] > 0) { hasVisible = true; break; }
+              if (rgba[i] > 0) {
+                hasVisible = true;
+                break;
+              }
             }
             if (hasVisible) {
               imageData = new ImageData(rgba, wDev, hDev);
@@ -1435,27 +1440,30 @@ export async function renderSignatureFieldAppearances(
             try {
               // Draw page content first (provides background under signature)
               m.FPDF_RenderPageBitmap(
-                bmp2, pagePtr, startX, startY, fullW, fullH, 0,
+                bmp2,
+                pagePtr,
+                startX,
+                startY,
+                fullW,
+                fullH,
+                0,
                 0x01 | 0x10, // FPDF_ANNOT | FPDF_REVERSE_BYTE_ORDER
               );
               // Draw form fill layer on top (includes signature appearances)
-              m.FPDF_FFLDraw(
-                formEnvPtr, bmp2, pagePtr,
-                startX, startY, fullW, fullH,
-                0, 0x01 | 0x10,
-              );
+              m.FPDF_FFLDraw(formEnvPtr, bmp2, pagePtr, startX, startY, fullW, fullH, 0, 0x01 | 0x10);
             } catch {
               // FPDF_FFLDraw not available or failed.
             }
 
             m.FPDFBitmap_Destroy(bmp2);
 
-            const rgba2 = new Uint8ClampedArray(
-              pdfiumWasm.HEAPU8.buffer.slice(heap2, heap2 + bytes),
-            );
+            const rgba2 = new Uint8ClampedArray(pdfiumWasm.HEAPU8.buffer.slice(heap2, heap2 + bytes));
             let hasVisible2 = false;
             for (let i = 3; i < rgba2.length; i += 4) {
-              if (rgba2[i] > 0) { hasVisible2 = true; break; }
+              if (rgba2[i] > 0) {
+                hasVisible2 = true;
+                break;
+              }
             }
             if (hasVisible2) {
               imageData = new ImageData(rgba2, wDev, hDev);
@@ -1527,7 +1535,10 @@ export async function renderButtonFieldAppearances(
         if (!annotPtr) continue;
 
         const subtype = m.FPDFAnnot_GetSubtype(annotPtr);
-        if (subtype !== 20) { m.FPDFPage_CloseAnnot(annotPtr); continue; }
+        if (subtype !== 20) {
+          m.FPDFPage_CloseAnnot(annotPtr);
+          continue;
+        }
 
         const fieldType = formEnvPtr ? m.FPDFAnnot_GetFormFieldType(formEnvPtr, annotPtr) : 0;
         if (fieldType !== PDF_FORM_FIELD_TYPE.PUSHBUTTON) {
@@ -1536,7 +1547,7 @@ export async function renderButtonFieldAppearances(
         }
 
         const nameLen = m.FPDFAnnot_GetFormFieldName(formEnvPtr, annotPtr, 0, 0);
-        let btnName = '';
+        let btnName = "";
         if (nameLen > 0) {
           const nameBuf = m.pdfium.wasmExports.malloc(nameLen);
           m.FPDFAnnot_GetFormFieldName(formEnvPtr, annotPtr, nameBuf, nameLen);
@@ -1546,16 +1557,23 @@ export async function renderButtonFieldAppearances(
 
         const rectBuf = m.pdfium.wasmExports.malloc(4 * 4);
         let hasRect = false;
-        try { hasRect = m.FPDFAnnot_GetRect(annotPtr, rectBuf); }
-        catch { m.pdfium.wasmExports.free(rectBuf); m.FPDFPage_CloseAnnot(annotPtr); continue; }
+        try {
+          hasRect = m.FPDFAnnot_GetRect(annotPtr, rectBuf);
+        } catch {
+          m.pdfium.wasmExports.free(rectBuf);
+          m.FPDFPage_CloseAnnot(annotPtr);
+          continue;
+        }
         if (!hasRect) {
-          m.pdfium.wasmExports.free(rectBuf); m.FPDFPage_CloseAnnot(annotPtr); continue;
+          m.pdfium.wasmExports.free(rectBuf);
+          m.FPDFPage_CloseAnnot(annotPtr);
+          continue;
         }
 
-        const rawLeft = m.pdfium.getValue(rectBuf, 'float');
-        const rawBottom = m.pdfium.getValue(rectBuf + 4, 'float');
-        const rawRight = m.pdfium.getValue(rectBuf + 8, 'float');
-        const rawTop = m.pdfium.getValue(rectBuf + 12, 'float');
+        const rawLeft = m.pdfium.getValue(rectBuf, "float");
+        const rawBottom = m.pdfium.getValue(rectBuf + 4, "float");
+        const rawRight = m.pdfium.getValue(rectBuf + 8, "float");
+        const rawTop = m.pdfium.getValue(rectBuf + 12, "float");
         m.pdfium.wasmExports.free(rectBuf);
 
         const annotLeft = Math.min(rawLeft, rawRight);
@@ -1573,7 +1591,7 @@ export async function renderButtonFieldAppearances(
         let imageData: ImageData | null = null;
 
         if (pdfW > 0.5 && pdfH > 0.5) {
-          const dpr = typeof window !== 'undefined' ? Math.min(window.devicePixelRatio || 1, 3) : 1;
+          const dpr = typeof window !== "undefined" ? Math.min(window.devicePixelRatio || 1, 3) : 1;
           const wDev = Math.max(1, Math.round(pdfW * dpr));
           const hDev = Math.max(1, Math.round(pdfH * dpr));
           const stride = wDev * 4;
@@ -1583,18 +1601,39 @@ export async function renderButtonFieldAppearances(
           m.FPDFBitmap_FillRect(bitmapPtr, 0, 0, wDev, hDev, 0x00000000);
 
           imageData = await renderWidgetAppearance(
-            m, bitmapPtr, heapPtr, wDev, hDev, stride, bytes,
-            pagePtr, annotPtr, annotLeft, annotTopVal, pdfW, pdfH,
-            cssX, cssY, cropWidth, cropHeight, formEnvPtr, dpr,
+            m,
+            bitmapPtr,
+            heapPtr,
+            wDev,
+            hDev,
+            stride,
+            bytes,
+            pagePtr,
+            annotPtr,
+            annotLeft,
+            annotTopVal,
+            pdfW,
+            pdfH,
+            cssX,
+            cssY,
+            cropWidth,
+            cropHeight,
+            formEnvPtr,
+            dpr,
           );
         }
 
         m.FPDFPage_CloseAnnot(annotPtr);
         buttonResults.push({
-          pageIndex: pageIdx, x: cssX, y: cssY,
-          width: pdfW, height: pdfH,
-          fieldName: btnName, imageData,
-          sourcePageWidth: cropWidth, sourcePageHeight: cropHeight,
+          pageIndex: pageIdx,
+          x: cssX,
+          y: cssY,
+          width: pdfW,
+          height: pdfH,
+          fieldName: btnName,
+          imageData,
+          sourcePageWidth: cropWidth,
+          sourcePageHeight: cropHeight,
         });
       }
 
@@ -1641,21 +1680,21 @@ export async function fetchSignatureFieldsWithAppearances(
     // Convert ImageData to data URL for the appearance
     let appearanceDataUrl: string | undefined;
     if (appearance.imageData) {
-      const canvas = document.createElement('canvas');
+      const canvas = document.createElement("canvas");
       canvas.width = appearance.imageData.width;
       canvas.height = appearance.imageData.height;
-      const ctx = canvas.getContext('2d');
+      const ctx = canvas.getContext("2d");
       if (ctx) {
         ctx.putImageData(appearance.imageData, 0, 0);
-        appearanceDataUrl = canvas.toDataURL('image/png');
+        appearanceDataUrl = canvas.toDataURL("image/png");
       }
     }
 
     formFields.push({
       name: appearance.fieldName,
       label: appearance.fieldName,
-      type: 'signature',
-      value: '',
+      type: "signature",
+      value: "",
       options: null,
       displayOptions: null,
       required: false,
diff --git a/frontend/src/core/services/preferencesService.ts b/frontend/src/core/services/preferencesService.ts
index 34ea05e6d2..3e407a06da 100644
--- a/frontend/src/core/services/preferencesService.ts
+++ b/frontend/src/core/services/preferencesService.ts
@@ -1,13 +1,13 @@
-import { type ToolPanelMode, DEFAULT_TOOL_PANEL_MODE } from '@app/constants/toolPanel';
-import { type ThemeMode, getSystemTheme } from '@app/constants/theme';
+import { type ToolPanelMode, DEFAULT_TOOL_PANEL_MODE } from "@app/constants/toolPanel";
+import { type ThemeMode, getSystemTheme } from "@app/constants/theme";
 
-export type LogoVariant = 'modern' | 'classic';
+export type LogoVariant = "modern" | "classic";
 
-export type PdfRenderMode = 'normal' | 'dark' | 'sepia';
+export type PdfRenderMode = "normal" | "dark" | "sepia";
 
-export type StartupView = 'tools' | 'read' | 'automate';
+export type StartupView = "tools" | "read" | "automate";
 
-export type ViewerZoomSetting = 'auto' | 'fitWidth' | 'fitPage' | '50' | '75' | '100' | '125' | '150' | '200';
+export type ViewerZoomSetting = "auto" | "fitWidth" | "fitPage" | "50" | "75" | "100" | "125" | "150" | "200";
 
 export interface UserPreferences {
   autoUnzip: boolean;
@@ -32,8 +32,8 @@ export const DEFAULT_PREFERENCES: UserPreferences = {
   autoUnzip: true,
   autoUnzipFileLimit: 4,
   defaultToolPanelMode: DEFAULT_TOOL_PANEL_MODE,
-  defaultStartupView: 'tools',
-  defaultViewerZoom: 'auto',
+  defaultStartupView: "tools",
+  defaultViewerZoom: "auto",
   theme: getSystemTheme(),
   toolPanelModePromptSeen: false,
   hasSelectedToolPanelMode: false,
@@ -44,10 +44,10 @@ export const DEFAULT_PREFERENCES: UserPreferences = {
   hideUnavailableTools: false,
   hideUnavailableConversions: false,
   logoVariant: null,
-  pdfRenderMode: 'normal',
+  pdfRenderMode: "normal",
 };
 
-const STORAGE_KEY = 'stirlingpdf_preferences';
+const STORAGE_KEY = "stirlingpdf_preferences";
 
 class PreferencesService {
   private serverDefaults: Partial<UserPreferences> = {};
@@ -56,9 +56,7 @@ class PreferencesService {
     this.serverDefaults = defaults;
   }
 
-  getPreference<K extends keyof UserPreferences>(
-    key: K
-  ): UserPreferences[K] {
+  getPreference<K extends keyof UserPreferences>(key: K): UserPreferences[K] {
     // Explicitly re-read every time in case preferences have changed in another tab etc.
     try {
       const stored = localStorage.getItem(STORAGE_KEY);
@@ -69,7 +67,7 @@ class PreferencesService {
         }
       }
     } catch (error) {
-      console.error('Error reading preference:', key, error);
+      console.error("Error reading preference:", key, error);
     }
     // Use server defaults if available, otherwise use hardcoded defaults
     if (key in this.serverDefaults && this.serverDefaults[key] !== undefined) {
@@ -78,17 +76,14 @@ class PreferencesService {
     return DEFAULT_PREFERENCES[key];
   }
 
-  setPreference<K extends keyof UserPreferences>(
-    key: K,
-    value: UserPreferences[K]
-  ): void {
+  setPreference<K extends keyof UserPreferences>(key: K, value: UserPreferences[K]): void {
     try {
       const stored = localStorage.getItem(STORAGE_KEY);
       const preferences = stored ? JSON.parse(stored) : {};
       preferences[key] = value;
       localStorage.setItem(STORAGE_KEY, JSON.stringify(preferences));
     } catch (error) {
-      console.error('Error writing preference:', key, error);
+      console.error("Error writing preference:", key, error);
     }
   }
 
@@ -105,7 +100,7 @@ class PreferencesService {
         };
       }
     } catch (error) {
-      console.error('Error reading preferences', error);
+      console.error("Error reading preferences", error);
     }
     // Merge server defaults with hardcoded defaults
     return { ...DEFAULT_PREFERENCES, ...this.serverDefaults };
@@ -115,7 +110,7 @@ class PreferencesService {
     try {
       localStorage.removeItem(STORAGE_KEY);
     } catch (error) {
-      console.error('Error clearing preferences:', error);
+      console.error("Error clearing preferences:", error);
       throw error;
     }
   }
diff --git a/frontend/src/core/services/processingCache.ts b/frontend/src/core/services/processingCache.ts
index 53a4356be7..5221f57ee2 100644
--- a/frontend/src/core/services/processingCache.ts
+++ b/frontend/src/core/services/processingCache.ts
@@ -1,45 +1,47 @@
-import { ProcessedFile, CacheConfig, CacheEntry, CacheStats } from '@app/types/processing';
+import { ProcessedFile, CacheConfig, CacheEntry, CacheStats } from "@app/types/processing";
 
 export class ProcessingCache {
   private cache = new Map<string, CacheEntry>();
   private totalSize = 0;
-  
-  constructor(private config: CacheConfig = {
-    maxFiles: 20,
-    maxSizeBytes: 2 * 1024 * 1024 * 1024, // 2GB
-    ttlMs: 30 * 60 * 1000 // 30 minutes
-  }) {}
+
+  constructor(
+    private config: CacheConfig = {
+      maxFiles: 20,
+      maxSizeBytes: 2 * 1024 * 1024 * 1024, // 2GB
+      ttlMs: 30 * 60 * 1000, // 30 minutes
+    },
+  ) {}
 
   set(key: string, data: ProcessedFile): void {
     // Remove expired entries first
     this.cleanup();
-    
+
     // Calculate entry size (rough estimate)
     const size = this.calculateSize(data);
-    
+
     // Make room if needed
     this.makeRoom(size);
-    
+
     this.cache.set(key, {
       data,
       size,
       lastAccessed: Date.now(),
-      createdAt: Date.now()
+      createdAt: Date.now(),
     });
-    
+
     this.totalSize += size;
   }
 
   get(key: string): ProcessedFile | null {
     const entry = this.cache.get(key);
     if (!entry) return null;
-    
+
     // Check TTL
     if (Date.now() - entry.createdAt > this.config.ttlMs) {
       this.delete(key);
       return null;
     }
-    
+
     // Update last accessed
     entry.lastAccessed = Date.now();
     return entry.data;
@@ -48,22 +50,19 @@ export class ProcessingCache {
   has(key: string): boolean {
     const entry = this.cache.get(key);
     if (!entry) return false;
-    
+
     // Check TTL
     if (Date.now() - entry.createdAt > this.config.ttlMs) {
       this.delete(key);
       return false;
     }
-    
+
     return true;
   }
 
   private makeRoom(neededSize: number): void {
     // Remove oldest entries until we have space
-    while (
-      this.cache.size >= this.config.maxFiles ||
-      this.totalSize + neededSize > this.config.maxSizeBytes
-    ) {
+    while (this.cache.size >= this.config.maxFiles || this.totalSize + neededSize > this.config.maxSizeBytes) {
       const oldestKey = this.findOldestEntry();
       if (oldestKey) {
         this.delete(oldestKey);
@@ -73,13 +72,13 @@ export class ProcessingCache {
 
   private findOldestEntry(): string | null {
     let oldest: { key: string; lastAccessed: number } | null = null;
-    
+
     for (const [key, entry] of this.cache) {
       if (!oldest || entry.lastAccessed < oldest.lastAccessed) {
         oldest = { key, lastAccessed: entry.lastAccessed };
       }
     }
-    
+
     return oldest?.key || null;
   }
 
@@ -95,18 +94,18 @@ export class ProcessingCache {
   private calculateSize(data: ProcessedFile): number {
     // Rough size estimation
     let size = 0;
-    
+
     // Estimate size of thumbnails (main memory consumer)
-    data.pages.forEach(page => {
+    data.pages.forEach((page) => {
       if (page.thumbnail) {
         // Base64 thumbnail is roughly 50KB each
         size += 50 * 1024;
       }
     });
-    
+
     // Add some overhead for other data
     size += 10 * 1024; // 10KB overhead
-    
+
     return size;
   }
 
@@ -127,7 +126,7 @@ export class ProcessingCache {
     return {
       entries: this.cache.size,
       totalSizeBytes: this.totalSize,
-      maxSizeBytes: this.config.maxSizeBytes
+      maxSizeBytes: this.config.maxSizeBytes,
     };
   }
 
@@ -135,4 +134,4 @@ export class ProcessingCache {
   getKeys(): string[] {
     return Array.from(this.cache.keys());
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/core/services/processingErrorHandler.ts b/frontend/src/core/services/processingErrorHandler.ts
index 2cc55cf395..1ea6e6b968 100644
--- a/frontend/src/core/services/processingErrorHandler.ts
+++ b/frontend/src/core/services/processingErrorHandler.ts
@@ -1,4 +1,4 @@
-import { ProcessingError } from '@app/types/processing';
+import { ProcessingError } from "@app/types/processing";
 
 export class ProcessingErrorHandler {
   private static readonly DEFAULT_MAX_RETRIES = 3;
@@ -8,16 +8,16 @@ export class ProcessingErrorHandler {
    * Create a ProcessingError from an unknown error
    */
   static createProcessingError(
-    error: unknown, 
-    retryCount: number = 0, 
-    maxRetries: number = this.DEFAULT_MAX_RETRIES
+    error: unknown,
+    retryCount: number = 0,
+    maxRetries: number = this.DEFAULT_MAX_RETRIES,
   ): ProcessingError {
     const originalError = error instanceof Error ? error : new Error(String(error));
     const message = originalError.message;
 
     // Determine error type based on error message and properties
     const errorType = this.determineErrorType(originalError, message);
-    
+
     // Determine if error is recoverable
     const recoverable = this.isRecoverable(errorType, retryCount, maxRetries);
 
@@ -27,68 +27,62 @@ export class ProcessingErrorHandler {
       recoverable,
       retryCount,
       maxRetries,
-      originalError
+      originalError,
     };
   }
 
   /**
    * Determine the type of error based on error characteristics
    */
-  private static determineErrorType(error: Error, message: string): ProcessingError['type'] {
+  private static determineErrorType(error: Error, message: string): ProcessingError["type"] {
     const lowerMessage = message.toLowerCase();
 
     // Network-related errors
-    if (lowerMessage.includes('network') || 
-        lowerMessage.includes('fetch') ||
-        lowerMessage.includes('connection')) {
-      return 'network';
+    if (lowerMessage.includes("network") || lowerMessage.includes("fetch") || lowerMessage.includes("connection")) {
+      return "network";
     }
 
     // Memory-related errors
-    if (lowerMessage.includes('memory') ||
-        lowerMessage.includes('quota') ||
-        lowerMessage.includes('allocation') ||
-        error.name === 'QuotaExceededError') {
-      return 'memory';
+    if (
+      lowerMessage.includes("memory") ||
+      lowerMessage.includes("quota") ||
+      lowerMessage.includes("allocation") ||
+      error.name === "QuotaExceededError"
+    ) {
+      return "memory";
     }
 
     // Timeout errors
-    if (lowerMessage.includes('timeout') ||
-        lowerMessage.includes('aborted') ||
-        error.name === 'AbortError') {
-      return 'timeout';
+    if (lowerMessage.includes("timeout") || lowerMessage.includes("aborted") || error.name === "AbortError") {
+      return "timeout";
     }
 
     // Cancellation
-    if (lowerMessage.includes('cancel') ||
-        lowerMessage.includes('abort') ||
-        error.name === 'AbortError') {
-      return 'cancelled';
+    if (lowerMessage.includes("cancel") || lowerMessage.includes("abort") || error.name === "AbortError") {
+      return "cancelled";
     }
 
     // PDF corruption/parsing errors
-    if (lowerMessage.includes('pdf') ||
-        lowerMessage.includes('parse') ||
-        lowerMessage.includes('invalid') ||
-        lowerMessage.includes('corrupt') ||
-        lowerMessage.includes('malformed')) {
-      return 'corruption';
+    if (
+      lowerMessage.includes("pdf") ||
+      lowerMessage.includes("parse") ||
+      lowerMessage.includes("invalid") ||
+      lowerMessage.includes("corrupt") ||
+      lowerMessage.includes("malformed")
+    ) {
+      return "corruption";
     }
 
     // Default to parsing error
-    return 'parsing';
+    return "parsing";
   }
 
   /**
    * Determine if an error is recoverable based on type and retry count
    */
-  private static isRecoverable(
-    errorType: ProcessingError['type'], 
-    retryCount: number, 
-    maxRetries: number
-  ): boolean {
+  private static isRecoverable(errorType: ProcessingError["type"], retryCount: number, maxRetries: number): boolean {
     // Never recoverable
-    if (errorType === 'cancelled' || errorType === 'corruption') {
+    if (errorType === "cancelled" || errorType === "corruption") {
       return false;
     }
 
@@ -98,37 +92,37 @@ export class ProcessingErrorHandler {
     }
 
     // Memory errors are usually not recoverable
-    if (errorType === 'memory') {
+    if (errorType === "memory") {
       return retryCount < 1; // Only one retry for memory errors
     }
 
     // Network and timeout errors are usually recoverable
-    return errorType === 'network' || errorType === 'timeout' || errorType === 'parsing';
+    return errorType === "network" || errorType === "timeout" || errorType === "parsing";
   }
 
   /**
    * Format error message for user display
    */
-  private static formatErrorMessage(errorType: ProcessingError['type'], originalMessage: string): string {
+  private static formatErrorMessage(errorType: ProcessingError["type"], originalMessage: string): string {
     switch (errorType) {
-      case 'network':
-        return 'Network connection failed. Please check your internet connection and try again.';
-      
-      case 'memory':
-        return 'Insufficient memory to process this file. Try closing other applications or processing a smaller file.';
-      
-      case 'timeout':
-        return 'Processing timed out. This file may be too large or complex to process.';
-      
-      case 'cancelled':
-        return 'Processing was cancelled by user.';
-      
-      case 'corruption':
-        return 'This PDF file appears to be corrupted or encrypted. Please try a different file.';
-      
-      case 'parsing':
+      case "network":
+        return "Network connection failed. Please check your internet connection and try again.";
+
+      case "memory":
+        return "Insufficient memory to process this file. Try closing other applications or processing a smaller file.";
+
+      case "timeout":
+        return "Processing timed out. This file may be too large or complex to process.";
+
+      case "cancelled":
+        return "Processing was cancelled by user.";
+
+      case "corruption":
+        return "This PDF file appears to be corrupted or encrypted. Please try a different file.";
+
+      case "parsing":
         return `Failed to process PDF: ${originalMessage}`;
-      
+
       default:
         return `Processing failed: ${originalMessage}`;
     }
@@ -140,7 +134,7 @@ export class ProcessingErrorHandler {
   static async executeWithRetry<T>(
     operation: () => Promise<T>,
     onError?: (error: ProcessingError) => void,
-    maxRetries: number = this.DEFAULT_MAX_RETRIES
+    maxRetries: number = this.DEFAULT_MAX_RETRIES,
   ): Promise<T> {
     let lastError: ProcessingError | null = null;
 
@@ -149,7 +143,7 @@ export class ProcessingErrorHandler {
         return await operation();
       } catch (error) {
         lastError = this.createProcessingError(error, attempt, maxRetries);
-        
+
         // Notify error handler
         if (onError) {
           onError(lastError);
@@ -168,13 +162,13 @@ export class ProcessingErrorHandler {
         // Wait before retry with progressive backoff
         const delay = this.RETRY_DELAYS[Math.min(attempt, this.RETRY_DELAYS.length - 1)];
         await this.delay(delay);
-        
+
         console.log(`Retrying operation (attempt ${attempt + 2}/${maxRetries + 1}) after ${delay}ms delay`);
       }
     }
 
     // All retries exhausted
-    throw lastError || new Error('Operation failed after all retries');
+    throw lastError || new Error("Operation failed after all retries");
   }
 
   /**
@@ -183,7 +177,7 @@ export class ProcessingErrorHandler {
   static withTimeout<T>(
     operation: () => Promise<T>,
     timeoutMs: number,
-    timeoutMessage: string = 'Operation timed out'
+    timeoutMessage: string = "Operation timed out",
   ): Promise<T> {
     return new Promise<T>((resolve, reject) => {
       const timeoutId = setTimeout(() => {
@@ -191,11 +185,11 @@ export class ProcessingErrorHandler {
       }, timeoutMs);
 
       operation()
-        .then(result => {
+        .then((result) => {
           clearTimeout(timeoutId);
           resolve(result);
         })
-        .catch(error => {
+        .catch((error) => {
           clearTimeout(timeoutId);
           reject(error);
         });
@@ -207,7 +201,7 @@ export class ProcessingErrorHandler {
    */
   static createTimeoutController(timeoutMs: number): AbortController {
     const controller = new AbortController();
-    
+
     setTimeout(() => {
       controller.abort();
     }, timeoutMs);
@@ -227,49 +221,37 @@ export class ProcessingErrorHandler {
    */
   static getErrorSuggestions(error: ProcessingError): string[] {
     switch (error.type) {
-      case 'network':
+      case "network":
+        return ["Check your internet connection", "Try refreshing the page", "Try again in a few moments"];
+
+      case "memory":
         return [
-          'Check your internet connection',
-          'Try refreshing the page',
-          'Try again in a few moments'
+          "Close other browser tabs or applications",
+          "Try processing a smaller file",
+          "Restart your browser",
+          "Use a device with more memory",
         ];
-      
-      case 'memory':
+
+      case "timeout":
         return [
-          'Close other browser tabs or applications',
-          'Try processing a smaller file',
-          'Restart your browser',
-          'Use a device with more memory'
+          "Try processing a smaller file",
+          "Break large files into smaller sections",
+          "Check your internet connection speed",
         ];
-      
-      case 'timeout':
+
+      case "corruption":
         return [
-          'Try processing a smaller file',
-          'Break large files into smaller sections',
-          'Check your internet connection speed'
+          "Verify the PDF file opens in other applications",
+          "Try re-downloading the file",
+          "Try a different PDF file",
+          "Contact the file creator if it appears corrupted",
         ];
-      
-      case 'corruption':
-        return [
-          'Verify the PDF file opens in other applications',
-          'Try re-downloading the file',
-          'Try a different PDF file',
-          'Contact the file creator if it appears corrupted'
-        ];
-      
-      case 'parsing':
-        return [
-          'Verify this is a valid PDF file',
-          'Try a different PDF file',
-          'Contact support if the problem persists'
-        ];
-      
+
+      case "parsing":
+        return ["Verify this is a valid PDF file", "Try a different PDF file", "Contact support if the problem persists"];
+
       default:
-        return [
-          'Try refreshing the page',
-          'Try again in a few moments',
-          'Contact support if the problem persists'
-        ];
+        return ["Try refreshing the page", "Try again in a few moments", "Contact support if the problem persists"];
     }
   }
 
@@ -277,6 +259,6 @@ export class ProcessingErrorHandler {
    * Utility function for delays
    */
   private static delay(ms: number): Promise<void> {
-    return new Promise(resolve => setTimeout(resolve, ms));
+    return new Promise((resolve) => setTimeout(resolve, ms));
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/core/services/serverStorageBundle.ts b/frontend/src/core/services/serverStorageBundle.ts
index 36da384ef5..9fa74db73e 100644
--- a/frontend/src/core/services/serverStorageBundle.ts
+++ b/frontend/src/core/services/serverStorageBundle.ts
@@ -1,8 +1,8 @@
-import JSZip from 'jszip';
+import JSZip from "jszip";
 
-import { fileStorage } from '@app/services/fileStorage';
-import type { FileId, ToolOperation } from '@app/types/file';
-import type { StirlingFileStub } from '@app/types/fileContext';
+import { fileStorage } from "@app/services/fileStorage";
+import type { FileId, ToolOperation } from "@app/types/file";
+import type { StirlingFileStub } from "@app/types/fileContext";
 
 interface ShareBundleEntry {
   logicalId: string;
@@ -28,8 +28,8 @@ export interface ShareBundleManifest {
 
 function sanitizeFilename(name: string): string {
   const trimmed = name?.trim();
-  if (!trimmed) return 'file';
-  return trimmed.replace(/[\\/:*?"<>|]/g, '_');
+  if (!trimmed) return "file";
+  return trimmed.replace(/[\\/:*?"<>|]/g, "_");
 }
 
 export async function buildHistoryBundle(originalFileIds: FileId[] | FileId): Promise<{
@@ -43,7 +43,7 @@ export async function buildHistoryBundle(originalFileIds: FileId[] | FileId): Pr
   for (const rootId of uniqueRoots) {
     const stubs = await fileStorage.getHistoryChainStubs(rootId);
     if (stubs.length === 0) {
-      throw new Error('No history chain found for file.');
+      throw new Error("No history chain found for file.");
     }
     allStubs.push({ rootId, stubs });
   }
@@ -59,7 +59,7 @@ export async function buildHistoryBundle(originalFileIds: FileId[] | FileId): Pr
       }
 
       const logicalId = stub.id;
-      const filePath = `files/${logicalId}/${sanitizeFilename(stub.name || 'file')}`;
+      const filePath = `files/${logicalId}/${sanitizeFilename(stub.name || "file")}`;
       const buffer = await file.arrayBuffer();
       zip.file(filePath, buffer);
 
@@ -87,32 +87,30 @@ export async function buildHistoryBundle(originalFileIds: FileId[] | FileId): Pr
     entries,
   };
 
-  zip.file('stirling-share.json', JSON.stringify(manifest, null, 2));
+  zip.file("stirling-share.json", JSON.stringify(manifest, null, 2));
 
   const zipBlob = await zip.generateAsync({
-    type: 'blob',
-    compression: 'DEFLATE',
+    type: "blob",
+    compression: "DEFLATE",
     compressionOptions: { level: 6 },
   });
 
-  const firstStubName = allStubs[0]?.stubs[0]?.name || 'shared';
+  const firstStubName = allStubs[0]?.stubs[0]?.name || "shared";
   const rootName = sanitizeFilename(firstStubName);
   const bundleFile = new File([zipBlob], `${rootName}-history.zip`, {
-    type: 'application/zip',
+    type: "application/zip",
     lastModified: Date.now(),
   });
 
   return { bundleFile, manifest };
 }
 
-export async function buildSharePackage(
-  stubs: StirlingFileStub[]
-): Promise<{
+export async function buildSharePackage(stubs: StirlingFileStub[]): Promise<{
   bundleFile: File;
   manifest: ShareBundleManifest;
 }> {
   if (stubs.length === 0) {
-    throw new Error('No files provided for sharing.');
+    throw new Error("No files provided for sharing.");
   }
 
   const zip = new JSZip();
@@ -125,7 +123,7 @@ export async function buildSharePackage(
     }
 
     const logicalId = stub.id as string;
-    const filePath = `files/${logicalId}/${sanitizeFilename(stub.name || 'file')}`;
+    const filePath = `files/${logicalId}/${sanitizeFilename(stub.name || "file")}`;
     const buffer = await file.arrayBuffer();
     zip.file(filePath, buffer);
 
@@ -152,16 +150,16 @@ export async function buildSharePackage(
     entries,
   };
 
-  zip.file('stirling-share.json', JSON.stringify(manifest, null, 2));
+  zip.file("stirling-share.json", JSON.stringify(manifest, null, 2));
 
   const zipBlob = await zip.generateAsync({
-    type: 'blob',
-    compression: 'DEFLATE',
+    type: "blob",
+    compression: "DEFLATE",
     compressionOptions: { level: 6 },
   });
 
   const bundleFile = new File([zipBlob], `shared-files.zip`, {
-    type: 'application/zip',
+    type: "application/zip",
     lastModified: Date.now(),
   });
 
diff --git a/frontend/src/core/services/serverStorageUpload.ts b/frontend/src/core/services/serverStorageUpload.ts
index 6a4569c82c..f049e9ba66 100644
--- a/frontend/src/core/services/serverStorageUpload.ts
+++ b/frontend/src/core/services/serverStorageUpload.ts
@@ -1,14 +1,14 @@
-import apiClient from '@app/services/apiClient';
-import { fileStorage } from '@app/services/fileStorage';
-import { buildHistoryBundle, buildSharePackage } from '@app/services/serverStorageBundle';
-import type { FileId } from '@app/types/file';
-import type { StirlingFileStub } from '@app/types/fileContext';
+import apiClient from "@app/services/apiClient";
+import { fileStorage } from "@app/services/fileStorage";
+import { buildHistoryBundle, buildSharePackage } from "@app/services/serverStorageBundle";
+import type { FileId } from "@app/types/file";
+import type { StirlingFileStub } from "@app/types/fileContext";
 
 function resolveUpdatedAt(value: unknown): number {
   if (!value) {
     return Date.now();
   }
-  if (typeof value === 'number') {
+  if (typeof value === "number") {
     return Number.isFinite(value) ? value : Date.now();
   }
   const parsed = new Date(String(value)).getTime();
@@ -17,29 +17,32 @@ function resolveUpdatedAt(value: unknown): number {
 
 export async function uploadHistoryChain(
   originalFileId: FileId,
-  existingRemoteId?: number
+  existingRemoteId?: number,
 ): Promise<{ remoteId: number; updatedAt: number; chain: StirlingFileStub[] }> {
   const chain = await fileStorage.getHistoryChainStubs(originalFileId);
   if (chain.length === 0) {
-    throw new Error('No history chain found.');
+    throw new Error("No history chain found.");
   }
 
   const finalStub =
-    chain.slice().reverse().find((stub) => stub.isLeaf !== false) || chain[chain.length - 1];
+    chain
+      .slice()
+      .reverse()
+      .find((stub) => stub.isLeaf !== false) || chain[chain.length - 1];
   const finalFile = await fileStorage.getStirlingFile(finalStub.id);
   if (!finalFile) {
-    throw new Error('Missing final file data for sharing.');
+    throw new Error("Missing final file data for sharing.");
   }
 
   const { bundleFile, manifest } = await buildHistoryBundle(originalFileId);
-  const auditLog = new File([JSON.stringify(manifest, null, 2)], 'audit-log.json', {
-    type: 'application/json',
+  const auditLog = new File([JSON.stringify(manifest, null, 2)], "audit-log.json", {
+    type: "application/json",
     lastModified: Date.now(),
   });
   const formData = new FormData();
-  formData.append('file', finalFile, finalFile.name);
-  formData.append('historyBundle', bundleFile, bundleFile.name);
-  formData.append('auditLog', auditLog, auditLog.name);
+  formData.append("file", finalFile, finalFile.name);
+  formData.append("historyBundle", bundleFile, bundleFile.name);
+  formData.append("auditLog", auditLog, auditLog.name);
 
   if (existingRemoteId) {
     const response = await apiClient.put(`/api/v1/storage/files/${existingRemoteId}`, formData);
@@ -47,10 +50,10 @@ export async function uploadHistoryChain(
     return { remoteId: existingRemoteId, updatedAt, chain };
   }
 
-  const response = await apiClient.post('/api/v1/storage/files', formData);
+  const response = await apiClient.post("/api/v1/storage/files", formData);
   const remoteId = response.data?.id as number | undefined;
   if (!remoteId) {
-    throw new Error('Missing stored file ID in response.');
+    throw new Error("Missing stored file ID in response.");
   }
 
   const updatedAt = resolveUpdatedAt(response.data?.updatedAt);
@@ -59,7 +62,7 @@ export async function uploadHistoryChain(
 
 export async function uploadHistoryChains(
   originalFileIds: FileId[],
-  existingRemoteId?: number
+  existingRemoteId?: number,
 ): Promise<{ remoteId: number; updatedAt: number; chain: StirlingFileStub[] }> {
   const uniqueRoots = Array.from(new Set(originalFileIds));
   const chainMap = new Map<FileId, StirlingFileStub[]>();
@@ -70,11 +73,14 @@ export async function uploadHistoryChains(
   for (const rootId of uniqueRoots) {
     const chain = await fileStorage.getHistoryChainStubs(rootId);
     if (chain.length === 0) {
-      throw new Error('No history chain found.');
+      throw new Error("No history chain found.");
     }
     chainMap.set(rootId, chain);
     const finalStub =
-      chain.slice().reverse().find((stub) => stub.isLeaf !== false) || chain[chain.length - 1];
+      chain
+        .slice()
+        .reverse()
+        .find((stub) => stub.isLeaf !== false) || chain[chain.length - 1];
     if (finalStub) {
       leafStubs.push(finalStub);
     }
@@ -90,7 +96,7 @@ export async function uploadHistoryChains(
   if (leafStubs.length === 1) {
     const finalFile = await fileStorage.getStirlingFile(leafStubs[0].id);
     if (!finalFile) {
-      throw new Error('Missing final file data for sharing.');
+      throw new Error("Missing final file data for sharing.");
     }
     shareFile = finalFile;
   } else {
@@ -99,14 +105,14 @@ export async function uploadHistoryChains(
   }
 
   const { bundleFile, manifest } = await buildHistoryBundle(uniqueRoots);
-  const auditLog = new File([JSON.stringify(manifest, null, 2)], 'audit-log.json', {
-    type: 'application/json',
+  const auditLog = new File([JSON.stringify(manifest, null, 2)], "audit-log.json", {
+    type: "application/json",
     lastModified: Date.now(),
   });
   const formData = new FormData();
-  formData.append('file', shareFile, shareFile.name);
-  formData.append('historyBundle', bundleFile, bundleFile.name);
-  formData.append('auditLog', auditLog, auditLog.name);
+  formData.append("file", shareFile, shareFile.name);
+  formData.append("historyBundle", bundleFile, bundleFile.name);
+  formData.append("auditLog", auditLog, auditLog.name);
 
   if (existingRemoteId) {
     const response = await apiClient.put(`/api/v1/storage/files/${existingRemoteId}`, formData);
@@ -114,10 +120,10 @@ export async function uploadHistoryChains(
     return { remoteId: existingRemoteId, updatedAt, chain: combinedChain };
   }
 
-  const response = await apiClient.post('/api/v1/storage/files', formData);
+  const response = await apiClient.post("/api/v1/storage/files", formData);
   const remoteId = response.data?.id as number | undefined;
   if (!remoteId) {
-    throw new Error('Missing stored file ID in response.');
+    throw new Error("Missing stored file ID in response.");
   }
 
   const updatedAt = resolveUpdatedAt(response.data?.updatedAt);
diff --git a/frontend/src/core/services/shareBundleUtils.ts b/frontend/src/core/services/shareBundleUtils.ts
index 02cb6d6365..272b26ec3a 100644
--- a/frontend/src/core/services/shareBundleUtils.ts
+++ b/frontend/src/core/services/shareBundleUtils.ts
@@ -1,8 +1,8 @@
-import JSZip from 'jszip';
+import JSZip from "jszip";
 
-import type { ShareBundleManifest } from '@app/services/serverStorageBundle';
+import type { ShareBundleManifest } from "@app/services/serverStorageBundle";
 
-const MANIFEST_FILENAME = 'stirling-share.json';
+const MANIFEST_FILENAME = "stirling-share.json";
 
 export function parseContentDispositionFilename(disposition?: string): string | null {
   if (!disposition) return null;
@@ -20,27 +20,26 @@ export function parseContentDispositionFilename(disposition?: string): string |
 }
 
 export function isZipBundle(contentType: string, filename: string): boolean {
-  return contentType.includes('zip') || filename.toLowerCase().endsWith('.zip');
+  return contentType.includes("zip") || filename.toLowerCase().endsWith(".zip");
 }
 
 export function getShareBundleEntryRootId(
   manifest: ShareBundleManifest,
-  entry: ShareBundleManifest['entries'][number]
+  entry: ShareBundleManifest["entries"][number],
 ): string {
   return entry.rootLogicalId || manifest.rootLogicalId;
 }
 
 export function resolveShareBundleOrder(manifest: ShareBundleManifest): {
   rootOrder: string[];
-  sortedEntries: ShareBundleManifest['entries'];
+  sortedEntries: ShareBundleManifest["entries"];
 } {
-  const entryRootId = (entry: ShareBundleManifest['entries'][number]) =>
-    getShareBundleEntryRootId(manifest, entry);
+  const entryRootId = (entry: ShareBundleManifest["entries"][number]) => getShareBundleEntryRootId(manifest, entry);
   const rootOrder =
     manifest.rootLogicalIds && manifest.rootLogicalIds.length > 0
       ? manifest.rootLogicalIds
       : Array.from(new Set(manifest.entries.map(entryRootId)));
-  const sortedEntries: ShareBundleManifest['entries'] = [];
+  const sortedEntries: ShareBundleManifest["entries"] = [];
   for (const rootId of rootOrder) {
     const rootEntries = manifest.entries
       .filter((entry) => entryRootId(entry) === rootId)
@@ -50,12 +49,10 @@ export function resolveShareBundleOrder(manifest: ShareBundleManifest): {
   return { rootOrder, sortedEntries };
 }
 
-export async function loadShareBundleEntries(
-  blob: Blob
-): Promise<{
+export async function loadShareBundleEntries(blob: Blob): Promise<{
   manifest: ShareBundleManifest;
   rootOrder: string[];
-  sortedEntries: ShareBundleManifest['entries'];
+  sortedEntries: ShareBundleManifest["entries"];
   files: File[];
 } | null> {
   const zip = await JSZip.loadAsync(blob);
@@ -64,7 +61,7 @@ export async function loadShareBundleEntries(
     return null;
   }
 
-  const manifestText = await manifestEntry.async('text');
+  const manifestText = await manifestEntry.async("text");
   const manifest = JSON.parse(manifestText) as ShareBundleManifest;
   const { rootOrder, sortedEntries } = resolveShareBundleOrder(manifest);
 
@@ -74,23 +71,19 @@ export async function loadShareBundleEntries(
     if (!zipEntry) {
       throw new Error(`Missing file entry ${entry.filePath}`);
     }
-    const fileBlob = await zipEntry.async('blob');
+    const fileBlob = await zipEntry.async("blob");
     files.push(
       new File([fileBlob], entry.name, {
         type: entry.type,
         lastModified: entry.lastModified,
-      })
+      }),
     );
   }
 
   return { manifest, rootOrder, sortedEntries, files };
 }
 
-export async function extractLatestFilesFromBundle(
-  blob: Blob,
-  filename: string,
-  contentType: string
-): Promise<File[]> {
+export async function extractLatestFilesFromBundle(blob: Blob, filename: string, contentType: string): Promise<File[]> {
   if (!isZipBundle(contentType, filename)) {
     return [new File([blob], filename, { type: contentType || blob.type })];
   }
@@ -107,9 +100,7 @@ export async function extractLatestFilesFromBundle(
     latestByRoot.set(getShareBundleEntryRootId(manifest, entry), files[i]);
   }
 
-  const latestFiles = rootOrder
-    .map((rootId) => latestByRoot.get(rootId))
-    .filter((file): file is File => Boolean(file));
+  const latestFiles = rootOrder.map((rootId) => latestByRoot.get(rootId)).filter((file): file is File => Boolean(file));
 
   if (latestFiles.length > 0) {
     return latestFiles;
diff --git a/frontend/src/core/services/signatureDetectionService.ts b/frontend/src/core/services/signatureDetectionService.ts
index 44a12be924..c72f91350f 100644
--- a/frontend/src/core/services/signatureDetectionService.ts
+++ b/frontend/src/core/services/signatureDetectionService.ts
@@ -31,52 +31,50 @@ const detectSignaturesInFile = async (file: File): Promise<SignatureDetectionRes
     if (!window.pdfjsLib) {
       return {
         hasSignatures: false,
-        error: 'PDF.js not available'
+        error: "PDF.js not available",
       };
     }
 
     // Convert file to ArrayBuffer
     const arrayBuffer = await file.arrayBuffer();
-    
+
     // Load the PDF document
     const pdf = await window.pdfjsLib.getDocument({ data: arrayBuffer }).promise;
-    
+
     let totalSignatures = 0;
-    
+
     // Check each page for signature annotations
     for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
       const page = await pdf.getPage(pageNum);
       const annotations = await page.getAnnotations();
-      
+
       // Count signature annotations (Type: /Sig)
-      const signatureAnnotations = annotations.filter((annotation: any) => 
-        annotation.subtype === 'Widget' && 
-        annotation.fieldType === 'Sig'
+      const signatureAnnotations = annotations.filter(
+        (annotation: any) => annotation.subtype === "Widget" && annotation.fieldType === "Sig",
       );
-      
+
       totalSignatures += signatureAnnotations.length;
     }
-    
+
     // Also check for document-level signatures in AcroForm
     const metadata = await pdf.getMetadata();
-    if (metadata?.info?.Signature || metadata?.metadata?.has('dc:signature')) {
+    if (metadata?.info?.Signature || metadata?.metadata?.has("dc:signature")) {
       totalSignatures = Math.max(totalSignatures, 1);
     }
-    
+
     // Clean up PDF.js document
     pdf.destroy();
-    
+
     return {
       hasSignatures: totalSignatures > 0,
-      signatureCount: totalSignatures
+      signatureCount: totalSignatures,
     };
-    
   } catch (error) {
-    console.warn('PDF signature detection failed:', error);
+    console.warn("PDF signature detection failed:", error);
     return {
       hasSignatures: false,
       signatureCount: 0,
-      error: error instanceof Error ? error.message : 'Detection failed'
+      error: error instanceof Error ? error.message : "Detection failed",
     };
   }
 };
@@ -86,12 +84,12 @@ const detectSignaturesInFile = async (file: File): Promise<SignatureDetectionRes
  */
 export const detectSignaturesInFiles = async (files: File[]): Promise<FileSignatureStatus[]> => {
   const results: FileSignatureStatus[] = [];
-  
+
   for (const file of files) {
     const result = await detectSignaturesInFile(file);
     results.push({ file, result });
   }
-  
+
   return results;
 };
 
@@ -101,13 +99,13 @@ export const detectSignaturesInFiles = async (files: File[]): Promise<FileSignat
 export const useSignatureDetection = () => {
   const [detectionResults, setDetectionResults] = React.useState<FileSignatureStatus[]>([]);
   const [isDetecting, setIsDetecting] = React.useState(false);
-  
+
   const detectSignatures = async (files: File[]) => {
     if (files.length === 0) {
       setDetectionResults([]);
       return;
     }
-    
+
     setIsDetecting(true);
     try {
       const results = await detectSignaturesInFiles(files);
@@ -116,15 +114,15 @@ export const useSignatureDetection = () => {
       setIsDetecting(false);
     }
   };
-  
+
   const getFileSignatureStatus = (file: File): SignatureDetectionResult | null => {
-    const result = detectionResults.find(r => r.file === file);
+    const result = detectionResults.find((r) => r.file === file);
     return result ? result.result : null;
   };
-  
-  const hasAnySignatures = detectionResults.some(r => r.result.hasSignatures);
+
+  const hasAnySignatures = detectionResults.some((r) => r.result.hasSignatures);
   const totalSignatures = detectionResults.reduce((sum, r) => sum + (r.result.signatureCount || 0), 0);
-  
+
   return {
     detectionResults,
     isDetecting,
@@ -132,9 +130,9 @@ export const useSignatureDetection = () => {
     getFileSignatureStatus,
     hasAnySignatures,
     totalSignatures,
-    reset: () => setDetectionResults([])
+    reset: () => setDetectionResults([]),
   };
 };
 
 // Import React for the hook
-import React from 'react';
\ No newline at end of file
+import React from "react";
diff --git a/frontend/src/core/services/signatureStorageService.ts b/frontend/src/core/services/signatureStorageService.ts
index 096c3af738..6ba1165e50 100644
--- a/frontend/src/core/services/signatureStorageService.ts
+++ b/frontend/src/core/services/signatureStorageService.ts
@@ -1,7 +1,7 @@
-import apiClient from '@app/services/apiClient';
-import type { SavedSignature } from '@app/types/signature';
+import apiClient from "@app/services/apiClient";
+import type { SavedSignature } from "@app/types/signature";
 
-export type StorageType = 'backend' | 'localStorage';
+export type StorageType = "backend" | "localStorage";
 
 interface SignatureStorageCapabilities {
   supportsBackend: boolean;
@@ -40,33 +40,33 @@ class SignatureStorageService {
   private async _performDetection(): Promise<SignatureStorageCapabilities> {
     try {
       // Probe the proprietary signatures endpoint (requires authentication)
-      await apiClient.get('/api/v1/proprietary/signatures', {
+      await apiClient.get("/api/v1/proprietary/signatures", {
         timeout: 3000,
         suppressErrorToast: true,
       });
 
       // 200 = Backend available and accessible (authenticated)
-      console.log('[SignatureStorage] Backend signature API detected and accessible (authenticated)');
+      console.log("[SignatureStorage] Backend signature API detected and accessible (authenticated)");
       return {
         supportsBackend: true,
-        storageType: 'backend',
+        storageType: "backend",
       };
     } catch (error: any) {
       // Check if it's an HTTP error with status code
       if (error?.response?.status === 401 || error?.response?.status === 403) {
         // Backend exists but needs auth - gracefully fall back to localStorage
-        console.log('[SignatureStorage] Backend signature API requires authentication, using localStorage');
+        console.log("[SignatureStorage] Backend signature API requires authentication, using localStorage");
       } else if (error?.response?.status === 404) {
         // Endpoint doesn't exist (not running proprietary mode)
-        console.log('[SignatureStorage] Backend signature API not available (not in proprietary mode), using localStorage');
+        console.log("[SignatureStorage] Backend signature API not available (not in proprietary mode), using localStorage");
       } else {
         // Network error, timeout, or other error
-        console.log('[SignatureStorage] Backend signature API not available, using localStorage');
+        console.log("[SignatureStorage] Backend signature API not available, using localStorage");
       }
 
       return {
         supportsBackend: false,
-        storageType: 'localStorage',
+        storageType: "localStorage",
       };
     }
   }
@@ -98,11 +98,11 @@ class SignatureStorageService {
   async saveSignature(signature: SavedSignature): Promise<void> {
     const capabilities = await this.detectCapabilities();
 
-    if (capabilities.supportsBackend && signature.scope !== 'localStorage') {
+    if (capabilities.supportsBackend && signature.scope !== "localStorage") {
       await this._saveToBackend(signature);
     } else {
       // Force scope to localStorage for browser storage
-      signature.scope = 'localStorage';
+      signature.scope = "localStorage";
       this._saveToLocalStorage(signature);
     }
   }
@@ -136,21 +136,21 @@ class SignatureStorageService {
   // Backend methods
   private async _loadFromBackend(): Promise<SavedSignature[]> {
     try {
-      const response = await apiClient.get<SavedSignature[]>('/api/v1/proprietary/signatures');
+      const response = await apiClient.get<SavedSignature[]>("/api/v1/proprietary/signatures");
       const signatures = response.data;
 
       // Fetch image data for each signature and convert to data URLs
       const signaturePromises = signatures.map(async (sig) => {
-        if (sig.dataUrl && sig.dataUrl.startsWith('/api/v1/general/signatures/')) {
+        if (sig.dataUrl && sig.dataUrl.startsWith("/api/v1/general/signatures/")) {
           try {
             // Fetch image via apiClient (unified endpoint works for both authenticated and unauthenticated)
             const imageResponse = await apiClient.get<ArrayBuffer>(sig.dataUrl, {
-              responseType: 'arraybuffer',
+              responseType: "arraybuffer",
             });
 
             // Convert to data URL (base64) for both display and use
             const blob = new Blob([imageResponse.data], {
-              type: imageResponse.headers['content-type'] || 'image/png',
+              type: imageResponse.headers["content-type"] || "image/png",
             });
 
             const dataUrl = await new Promise<string>((resolve, reject) => {
@@ -172,13 +172,13 @@ class SignatureStorageService {
 
       return await Promise.all(signaturePromises);
     } catch (error) {
-      console.error('[SignatureStorage] Failed to load from backend:', error);
+      console.error("[SignatureStorage] Failed to load from backend:", error);
       return [];
     }
   }
 
   private async _saveToBackend(signature: SavedSignature): Promise<void> {
-    await apiClient.post('/api/v1/proprietary/signatures', signature);
+    await apiClient.post("/api/v1/proprietary/signatures", signature);
   }
 
   private async _deleteFromBackend(id: string): Promise<void> {
@@ -190,7 +190,7 @@ class SignatureStorageService {
   }
 
   // LocalStorage methods
-  private readonly STORAGE_KEY = 'stirling:saved-signatures:v1';
+  private readonly STORAGE_KEY = "stirling:saved-signatures:v1";
 
   private _loadFromLocalStorage(): SavedSignature[] {
     try {
@@ -200,7 +200,7 @@ class SignatureStorageService {
       // Ensure all localStorage signatures have the correct scope
       return signatures.map((sig: SavedSignature) => ({
         ...sig,
-        scope: 'localStorage' as const,
+        scope: "localStorage" as const,
       }));
     } catch {
       return [];
@@ -209,7 +209,7 @@ class SignatureStorageService {
 
   private _saveToLocalStorage(signature: SavedSignature): void {
     const signatures = this._loadFromLocalStorage();
-    const index = signatures.findIndex(s => s.id === signature.id);
+    const index = signatures.findIndex((s) => s.id === signature.id);
 
     if (index >= 0) {
       signatures[index] = signature;
@@ -222,13 +222,13 @@ class SignatureStorageService {
 
   private _deleteFromLocalStorage(id: string): void {
     const signatures = this._loadFromLocalStorage();
-    const filtered = signatures.filter(s => s.id !== id);
+    const filtered = signatures.filter((s) => s.id !== id);
     localStorage.setItem(this.STORAGE_KEY, JSON.stringify(filtered));
   }
 
   private _updateLabelInLocalStorage(id: string, label: string): void {
     const signatures = this._loadFromLocalStorage();
-    const signature = signatures.find(s => s.id === id);
+    const signature = signatures.find((s) => s.id === id);
     if (signature) {
       signature.label = label;
       signature.updatedAt = Date.now();
diff --git a/frontend/src/core/services/specialErrorToasts.ts b/frontend/src/core/services/specialErrorToasts.ts
index 1468b8dc47..f6e0b1c3ee 100644
--- a/frontend/src/core/services/specialErrorToasts.ts
+++ b/frontend/src/core/services/specialErrorToasts.ts
@@ -1,4 +1,4 @@
-import { alert } from '@app/components/toast';
+import { alert } from "@app/components/toast";
 
 interface ErrorToastMapping {
   regex: RegExp;
@@ -10,21 +10,21 @@ interface ErrorToastMapping {
 const MAPPINGS: ErrorToastMapping[] = [
   {
     regex: /pdf contains an encryption dictionary/i,
-    i18nKey: 'errors.encryptedPdfMustRemovePassword',
-    defaultMessage: 'This PDF is encrypted. Please unlock it using the Unlock PDF Forms tool.'
+    i18nKey: "errors.encryptedPdfMustRemovePassword",
+    defaultMessage: "This PDF is encrypted. Please unlock it using the Unlock PDF Forms tool.",
   },
   {
     regex: /the pdf document is passworded and either the password was not provided or was incorrect/i,
-    i18nKey: 'errors.incorrectPasswordProvided',
-    defaultMessage: 'The PDF password is incorrect or not provided.'
+    i18nKey: "errors.incorrectPasswordProvided",
+    defaultMessage: "The PDF password is incorrect or not provided.",
   },
 ];
 
 function titleForStatus(status?: number): string {
-  if (!status) return 'Network error';
-  if (status >= 500) return 'Server error';
-  if (status >= 400) return 'Request error';
-  return 'Request failed';
+  if (!status) return "Network error";
+  if (status >= 500) return "Server error";
+  if (status >= 400) return "Request error";
+  return "Request failed";
 }
 
 /**
@@ -32,7 +32,7 @@ function titleForStatus(status?: number): string {
  * Returns true if a special toast was shown, false otherwise.
  */
 export function showSpecialErrorToast(rawError: string | undefined, options?: { status?: number }): boolean {
-  const message = (rawError || '').toString();
+  const message = (rawError || "").toString();
   if (!message) return false;
 
   for (const mapping of MAPPINGS) {
@@ -40,18 +40,18 @@ export function showSpecialErrorToast(rawError: string | undefined, options?: {
       // Best-effort translation without hard dependency on i18n config
       let body = mapping.defaultMessage;
       try {
-        const anyGlobal: any = (globalThis as any);
+        const anyGlobal: any = globalThis as any;
         const i18next = anyGlobal?.i18next;
-        if (i18next && typeof i18next.t === 'function') {
+        if (i18next && typeof i18next.t === "function") {
           body = i18next.t(mapping.i18nKey, { defaultValue: mapping.defaultMessage });
         }
-      } catch { /* ignore translation errors */ }
+      } catch {
+        /* ignore translation errors */
+      }
       const title = titleForStatus(options?.status);
-      alert({ alertType: 'error', title, body, expandable: true, isPersistentPopup: false });
+      alert({ alertType: "error", title, body, expandable: true, isPersistentPopup: false });
       return true;
     }
   }
   return false;
 }
-
-
diff --git a/frontend/src/core/services/supabaseClient.ts b/frontend/src/core/services/supabaseClient.ts
index c0ace3002e..f9e6873728 100644
--- a/frontend/src/core/services/supabaseClient.ts
+++ b/frontend/src/core/services/supabaseClient.ts
@@ -1,4 +1,4 @@
-import { createClient, SupabaseClient } from '@supabase/supabase-js';
+import { createClient, SupabaseClient } from "@supabase/supabase-js";
 
 const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;
 const supabaseAnonKey = import.meta.env.VITE_SUPABASE_PUBLISHABLE_DEFAULT_KEY;
@@ -7,14 +7,12 @@ const supabaseAnonKey = import.meta.env.VITE_SUPABASE_PUBLISHABLE_DEFAULT_KEY;
 export const isSupabaseConfigured = !!(supabaseUrl && supabaseAnonKey);
 
 // Create client only if configured, otherwise export null
-export const supabase: SupabaseClient | null = isSupabaseConfigured
-  ? createClient(supabaseUrl, supabaseAnonKey)
-  : null;
+export const supabase: SupabaseClient | null = isSupabaseConfigured ? createClient(supabaseUrl, supabaseAnonKey) : null;
 
 // Log warning if not configured (for self-hosted installations)
 if (!isSupabaseConfigured) {
   console.warn(
-    'Supabase is not configured. Checkout and billing features will be disabled. ' +
-    'Static plan information will be displayed instead.'
+    "Supabase is not configured. Checkout and billing features will be disabled. " +
+      "Static plan information will be displayed instead.",
   );
 }
diff --git a/frontend/src/core/services/thumbnailGenerationService.ts b/frontend/src/core/services/thumbnailGenerationService.ts
index c20b7aa475..c03122fe9b 100644
--- a/frontend/src/core/services/thumbnailGenerationService.ts
+++ b/frontend/src/core/services/thumbnailGenerationService.ts
@@ -2,9 +2,9 @@
  * High-performance thumbnail generation service using main thread processing
  */
 
-import { FileId } from '@app/types/file';
-import { pdfWorkerManager } from '@app/services/pdfWorkerManager';
-import { PDFDocumentProxy } from 'pdfjs-dist';
+import { FileId } from "@app/types/file";
+import { pdfWorkerManager } from "@app/services/pdfWorkerManager";
+import { PDFDocumentProxy } from "pdfjs-dist";
 
 interface ThumbnailResult {
   pageNumber: number;
@@ -66,13 +66,13 @@ export class ThumbnailGenerationService {
     const pdf = await pdfWorkerManager.createDocument(pdfArrayBuffer, {
       disableAutoFetch: true,
       disableStream: true,
-      stopAtErrors: false
+      stopAtErrors: false,
     });
 
     this.pdfDocumentCache.set(fileId, {
       pdf,
       lastUsed: Date.now(),
-      refCount: 1
+      refCount: 1,
     });
 
     return pdf;
@@ -117,25 +117,22 @@ export class ThumbnailGenerationService {
     pdfArrayBuffer: ArrayBuffer,
     pageNumbers: number[],
     options: ThumbnailGenerationOptions = {},
-    onProgress?: (progress: { completed: number; total: number; thumbnails: ThumbnailResult[] }) => void
+    onProgress?: (progress: { completed: number; total: number; thumbnails: ThumbnailResult[] }) => void,
   ): Promise<ThumbnailResult[]> {
     // Input validation
-    if (!fileId || typeof fileId !== 'string' || fileId.trim() === '') {
-      throw new Error('generateThumbnails: fileId must be a non-empty string');
+    if (!fileId || typeof fileId !== "string" || fileId.trim() === "") {
+      throw new Error("generateThumbnails: fileId must be a non-empty string");
     }
 
     if (!pdfArrayBuffer || pdfArrayBuffer.byteLength === 0) {
-      throw new Error('generateThumbnails: pdfArrayBuffer must not be empty');
+      throw new Error("generateThumbnails: pdfArrayBuffer must not be empty");
     }
 
     if (!pageNumbers || pageNumbers.length === 0) {
-      throw new Error('generateThumbnails: pageNumbers must not be empty');
+      throw new Error("generateThumbnails: pageNumbers must not be empty");
     }
 
-    const {
-      scale = 0.2,
-      quality = 0.8
-    } = options;
+    const { scale = 0.2, quality = 0.8 } = options;
 
     return await this.generateThumbnailsMainThread(fileId, pdfArrayBuffer, pageNumbers, scale, quality, onProgress);
   }
@@ -149,7 +146,7 @@ export class ThumbnailGenerationService {
     pageNumbers: number[],
     scale: number,
     quality: number,
-    onProgress?: (progress: { completed: number; total: number; thumbnails: ThumbnailResult[] }) => void
+    onProgress?: (progress: { completed: number; total: number; thumbnails: ThumbnailResult[] }) => void,
   ): Promise<ThumbnailResult[]> {
     const pdf = await this.getCachedPDFDocument(fileId, pdfArrayBuffer);
 
@@ -167,27 +164,26 @@ export class ThumbnailGenerationService {
           const page = await pdf.getPage(pageNumber);
           const viewport = page.getViewport({ scale, rotation: 0 });
 
-          const canvas = document.createElement('canvas');
+          const canvas = document.createElement("canvas");
           canvas.width = viewport.width;
           canvas.height = viewport.height;
 
-          const context = canvas.getContext('2d');
+          const context = canvas.getContext("2d");
           if (!context) {
-            throw new Error('Could not get canvas context');
+            throw new Error("Could not get canvas context");
           }
 
           await page.render({ canvasContext: context, viewport }).promise;
-          const thumbnail = canvas.toDataURL('image/jpeg', quality);
+          const thumbnail = canvas.toDataURL("image/jpeg", quality);
 
           allResults.push({ pageNumber, thumbnail, success: true });
-
         } catch (error) {
           console.error(`Failed to generate thumbnail for page ${pageNumber}:`, error);
           allResults.push({
             pageNumber,
-            thumbnail: '',
+            thumbnail: "",
             success: false,
-            error: error instanceof Error ? error.message : 'Unknown error'
+            error: error instanceof Error ? error.message : "Unknown error",
           });
         }
       }
@@ -199,12 +195,12 @@ export class ThumbnailGenerationService {
         onProgress({
           completed,
           total: pageNumbers.length,
-          thumbnails: allResults.slice(-batch.length).filter(r => r.success)
+          thumbnails: allResults.slice(-batch.length).filter((r) => r.success),
         });
       }
 
       // Yield control to prevent UI blocking
-      await new Promise(resolve => setTimeout(resolve, 1));
+      await new Promise((resolve) => setTimeout(resolve, 1));
     }
 
     // Release reference to PDF document (don't destroy - keep in cache)
@@ -238,7 +234,7 @@ export class ThumbnailGenerationService {
     this.thumbnailCache.set(pageId, {
       thumbnail,
       lastUsed: Date.now(),
-      sizeBytes
+      sizeBytes,
     });
 
     this.currentCacheSize += sizeBytes;
@@ -265,7 +261,7 @@ export class ThumbnailGenerationService {
     return {
       size: this.thumbnailCache.size,
       sizeBytes: this.currentCacheSize,
-      maxSizeBytes: this.maxCacheSizeBytes
+      maxSizeBytes: this.maxCacheSizeBytes,
     };
   }
 
diff --git a/frontend/src/core/services/updateService.ts b/frontend/src/core/services/updateService.ts
index e83b222e1a..b726c8fc0e 100644
--- a/frontend/src/core/services/updateService.ts
+++ b/frontend/src/core/services/updateService.ts
@@ -1,9 +1,9 @@
-import { DOWNLOAD_BASE_URL } from '@app/constants/downloads';
+import { DOWNLOAD_BASE_URL } from "@app/constants/downloads";
 
 export interface UpdateSummary {
   latest_version: string | null;
   latest_stable_version?: string | null;
-  max_priority: 'urgent' | 'normal' | 'minor' | 'low';
+  max_priority: "urgent" | "normal" | "minor" | "low";
   recommended_action?: string;
   any_breaking: boolean;
   migration_guides?: Array<{
@@ -15,7 +15,7 @@ export interface UpdateSummary {
 
 export interface VersionUpdate {
   version: string;
-  priority: 'urgent' | 'normal' | 'minor' | 'low';
+  priority: "urgent" | "normal" | "minor" | "low";
   announcement: {
     title: string;
     message: string;
@@ -40,15 +40,15 @@ export interface MachineInfo {
 }
 
 export class UpdateService {
-  private readonly baseUrl = 'https://supabase.stirling.com/functions/v1/updates';
+  private readonly baseUrl = "https://supabase.stirling.com/functions/v1/updates";
 
   /**
    * Compare two version strings
    * @returns 1 if v1 > v2, -1 if v1 < v2, 0 if equal
    */
   compareVersions(version1: string, version2: string): number {
-    const v1 = version1.split('.');
-    const v2 = version2.split('.');
+    const v1 = version1.split(".");
+    const v2 = version2.split(".");
 
     for (let i = 0; i < v1.length || i < v2.length; i++) {
       const n1 = parseInt(v1[i]) || 0;
@@ -69,26 +69,26 @@ export class UpdateService {
    */
   getDownloadUrl(machineInfo: MachineInfo): string | null {
     // Only show download for non-Docker installations
-    if (machineInfo.machineType === 'Docker' || machineInfo.machineType === 'Kubernetes') {
+    if (machineInfo.machineType === "Docker" || machineInfo.machineType === "Kubernetes") {
       return null;
     }
 
     // Determine file based on machine type and security
-    if (machineInfo.machineType === 'Server-jar') {
-      return DOWNLOAD_BASE_URL + (machineInfo.activeSecurity ? 'Stirling-PDF-with-login.jar' : 'Stirling-PDF.jar');
+    if (machineInfo.machineType === "Server-jar") {
+      return DOWNLOAD_BASE_URL + (machineInfo.activeSecurity ? "Stirling-PDF-with-login.jar" : "Stirling-PDF.jar");
     }
 
     // Client installations
-    if (machineInfo.machineType.startsWith('Client-')) {
-      const os = machineInfo.machineType.replace('Client-', ''); // win, mac, unix
-      const type = machineInfo.activeSecurity ? '-server-security' : '-server';
+    if (machineInfo.machineType.startsWith("Client-")) {
+      const os = machineInfo.machineType.replace("Client-", ""); // win, mac, unix
+      const type = machineInfo.activeSecurity ? "-server-security" : "-server";
 
-      if (os === 'unix') {
-        return DOWNLOAD_BASE_URL + os + type + '.jar';
-      } else if (os === 'win') {
-        return DOWNLOAD_BASE_URL + os + '-installer.exe';
-      } else if (os === 'mac') {
-        return DOWNLOAD_BASE_URL + os + '-installer.dmg';
+      if (os === "unix") {
+        return DOWNLOAD_BASE_URL + os + type + ".jar";
+      } else if (os === "win") {
+        return DOWNLOAD_BASE_URL + os + "-installer.exe";
+      } else if (os === "mac") {
+        return DOWNLOAD_BASE_URL + os + "-installer.dmg";
       }
     }
 
@@ -100,29 +100,29 @@ export class UpdateService {
    */
   async getUpdateSummary(currentVersion: string, machineInfo: MachineInfo): Promise<UpdateSummary | null> {
     // Map Java License enum to API types
-    let type = 'normal';
-    if (machineInfo.licenseType === 'SERVER') {
-      type = 'server';
-    } else if (machineInfo.licenseType === 'ENTERPRISE') {
-      type = 'enterprise';
+    let type = "normal";
+    if (machineInfo.licenseType === "SERVER") {
+      type = "server";
+    } else if (machineInfo.licenseType === "ENTERPRISE") {
+      type = "enterprise";
     }
 
     const url = `${this.baseUrl}?from=${currentVersion}&type=${type}&login=${machineInfo.activeSecurity}&summary=true`;
-    console.log('Fetching update summary from:', url);
+    console.log("Fetching update summary from:", url);
 
     try {
       const response = await fetch(url);
-      console.log('Response status:', response.status);
+      console.log("Response status:", response.status);
 
       if (response.status === 200) {
         const data = await response.json();
         return data as UpdateSummary;
       } else {
-        console.error('Failed to fetch update summary from Supabase:', response.status);
+        console.error("Failed to fetch update summary from Supabase:", response.status);
         return null;
       }
     } catch (error) {
-      console.error('Failed to fetch update summary from Supabase:', error);
+      console.error("Failed to fetch update summary from Supabase:", error);
       return null;
     }
   }
@@ -132,29 +132,29 @@ export class UpdateService {
    */
   async getFullUpdateInfo(currentVersion: string, machineInfo: MachineInfo): Promise<FullUpdateInfo | null> {
     // Map Java License enum to API types
-    let type = 'normal';
-    if (machineInfo.licenseType === 'SERVER') {
-      type = 'server';
-    } else if (machineInfo.licenseType === 'ENTERPRISE') {
-      type = 'enterprise';
+    let type = "normal";
+    if (machineInfo.licenseType === "SERVER") {
+      type = "server";
+    } else if (machineInfo.licenseType === "ENTERPRISE") {
+      type = "enterprise";
     }
 
     const url = `${this.baseUrl}?from=${currentVersion}&type=${type}&login=${machineInfo.activeSecurity}&summary=false`;
-    console.log('Fetching full update info from:', url);
+    console.log("Fetching full update info from:", url);
 
     try {
       const response = await fetch(url);
-      console.log('Full update response status:', response.status);
+      console.log("Full update response status:", response.status);
 
       if (response.status === 200) {
         const data = await response.json();
         return data as FullUpdateInfo;
       } else {
-        console.error('Failed to fetch full update info from Supabase:', response.status);
+        console.error("Failed to fetch full update info from Supabase:", response.status);
         return null;
       }
     } catch (error) {
-      console.error('Failed to fetch full update info from Supabase:', error);
+      console.error("Failed to fetch full update info from Supabase:", error);
       return null;
     }
   }
@@ -163,7 +163,7 @@ export class UpdateService {
    * Get current version from GitHub build.gradle as fallback
    */
   async getCurrentVersionFromGitHub(): Promise<string> {
-    const url = 'https://raw.githubusercontent.com/Stirling-Tools/Stirling-PDF/master/build.gradle';
+    const url = "https://raw.githubusercontent.com/Stirling-Tools/Stirling-PDF/master/build.gradle";
 
     try {
       const response = await fetch(url);
@@ -175,10 +175,10 @@ export class UpdateService {
           return match[1];
         }
       }
-      throw new Error('Version number not found');
+      throw new Error("Version number not found");
     } catch (error) {
-      console.error('Failed to fetch latest version from build.gradle:', error);
-      return '';
+      console.error("Failed to fetch latest version from build.gradle:", error);
+      return "";
     }
   }
 }
diff --git a/frontend/src/core/services/usageAnalyticsService.ts b/frontend/src/core/services/usageAnalyticsService.ts
index 4268a91f5a..742080f394 100644
--- a/frontend/src/core/services/usageAnalyticsService.ts
+++ b/frontend/src/core/services/usageAnalyticsService.ts
@@ -1,4 +1,4 @@
-import apiClient from '@app/services/apiClient';
+import apiClient from "@app/services/apiClient";
 
 export interface EndpointStatistic {
   endpoint: string;
@@ -21,34 +21,27 @@ const usageAnalyticsService = {
   /**
    * Get endpoint statistics
    */
-  async getEndpointStatistics(
-    limit?: number,
-    dataType: 'all' | 'api' | 'ui' = 'all'
-  ): Promise<EndpointStatisticsResponse> {
+  async getEndpointStatistics(limit?: number, dataType: "all" | "api" | "ui" = "all"): Promise<EndpointStatisticsResponse> {
     const params: Record<string, any> = {};
 
     if (limit !== undefined) {
       params.limit = limit;
     }
 
-    if (dataType !== 'all') {
+    if (dataType !== "all") {
       params.dataType = dataType;
     }
 
-    const response = await apiClient.get<EndpointStatisticsResponse>(
-      '/api/v1/proprietary/ui-data/usage-endpoint-statistics',
-      { params }
-    );
+    const response = await apiClient.get<EndpointStatisticsResponse>("/api/v1/proprietary/ui-data/usage-endpoint-statistics", {
+      params,
+    });
     return response.data;
   },
 
   /**
    * Get chart data for endpoint usage
    */
-  async getChartData(
-    limit?: number,
-    dataType: 'all' | 'api' | 'ui' = 'all'
-  ): Promise<UsageChartData> {
+  async getChartData(limit?: number, dataType: "all" | "api" | "ui" = "all"): Promise<UsageChartData> {
     const stats = await this.getEndpointStatistics(limit, dataType);
 
     return {
diff --git a/frontend/src/core/services/zipFileService.ts b/frontend/src/core/services/zipFileService.ts
index 565e90e754..27304ac2ed 100644
--- a/frontend/src/core/services/zipFileService.ts
+++ b/frontend/src/core/services/zipFileService.ts
@@ -1,15 +1,15 @@
-import JSZip, { JSZipObject } from 'jszip';
-import { StirlingFileStub, createStirlingFile } from '@app/types/fileContext';
-import { generateThumbnailForFile } from '@app/utils/thumbnailUtils';
-import { fileStorage } from '@app/services/fileStorage';
+import JSZip, { JSZipObject } from "jszip";
+import { StirlingFileStub, createStirlingFile } from "@app/types/fileContext";
+import { generateThumbnailForFile } from "@app/utils/thumbnailUtils";
+import { fileStorage } from "@app/services/fileStorage";
 
 // Undocumented interface in JSZip for JSZipObject._data
 interface CompressedObject {
-    compressedSize: number;
-    uncompressedSize: number;
-    crc32: number;
-    compression: object;
-    compressedContent: string|ArrayBuffer|Uint8Array|Buffer;
+  compressedSize: number;
+  uncompressedSize: number;
+  crc32: number;
+  compression: object;
+  compressedContent: string | ArrayBuffer | Uint8Array | Buffer;
 }
 
 const getData = (zipEntry: JSZipObject): CompressedObject | undefined => {
@@ -49,12 +49,12 @@ export class ZipFileService {
 
   // ZIP file validation constants
   private static readonly VALID_ZIP_TYPES = [
-    'application/zip',
-    'application/x-zip-compressed',
-    'application/x-zip',
-    'application/octet-stream' // Some browsers use this for ZIP files
+    "application/zip",
+    "application/x-zip-compressed",
+    "application/x-zip",
+    "application/octet-stream", // Some browsers use this for ZIP files
   ];
-  private static readonly VALID_ZIP_EXTENSIONS = ['.zip'];
+  private static readonly VALID_ZIP_EXTENSIONS = [".zip"];
 
   /**
    * Validate a ZIP file without extracting it
@@ -66,19 +66,21 @@ export class ZipFileService {
       totalSizeBytes: 0,
       containsPDFs: false,
       containsFiles: false,
-      errors: []
+      errors: [],
     };
 
     try {
       // Check file size
       if (file.size > this.maxTotalSize) {
-        result.errors.push(`ZIP file too large: ${this.formatFileSize(file.size)} (max: ${this.formatFileSize(this.maxTotalSize)})`);
+        result.errors.push(
+          `ZIP file too large: ${this.formatFileSize(file.size)} (max: ${this.formatFileSize(this.maxTotalSize)})`,
+        );
         return result;
       }
 
       // Check file type
       if (!this.isZipFile(file)) {
-        result.errors.push('File is not a valid ZIP archive');
+        result.errors.push("File is not a valid ZIP archive");
         return result;
       }
 
@@ -107,13 +109,17 @@ export class ZipFileService {
 
         // Check individual file size
         if (uncompressedSize > this.maxFileSize) {
-          result.errors.push(`File "${filename}" too large: ${this.formatFileSize(uncompressedSize)} (max: ${this.formatFileSize(this.maxFileSize)})`);
+          result.errors.push(
+            `File "${filename}" too large: ${this.formatFileSize(uncompressedSize)} (max: ${this.formatFileSize(this.maxFileSize)})`,
+          );
         }
       }
 
       // Check total uncompressed size
       if (totalSize > this.maxTotalSize) {
-        result.errors.push(`Total uncompressed size too large: ${this.formatFileSize(totalSize)} (max: ${this.formatFileSize(this.maxTotalSize)})`);
+        result.errors.push(
+          `Total uncompressed size too large: ${this.formatFileSize(totalSize)} (max: ${this.formatFileSize(this.maxTotalSize)})`,
+        );
       }
 
       result.fileCount = fileCount;
@@ -125,12 +131,12 @@ export class ZipFileService {
       result.isValid = result.errors.length === 0 && result.containsFiles;
 
       if (!result.containsFiles) {
-        result.errors.push('ZIP file does not contain any files');
+        result.errors.push("ZIP file does not contain any files");
       }
 
       return result;
     } catch (error) {
-      result.errors.push(`Failed to validate ZIP file: ${error instanceof Error ? error.message : 'Unknown error'}`);
+      result.errors.push(`Failed to validate ZIP file: ${error instanceof Error ? error.message : "Unknown error"}`);
       return result;
     }
   }
@@ -150,38 +156,34 @@ export class ZipFileService {
 
       // Generate ZIP blob
       const zipBlob = await zip.generateAsync({
-        type: 'blob',
-        compression: 'DEFLATE',
-        compressionOptions: { level: 6 }
+        type: "blob",
+        compression: "DEFLATE",
+        compressionOptions: { level: 6 },
       });
 
       const zipFile = new File([zipBlob], zipFilename, {
-        type: 'application/zip',
-        lastModified: Date.now()
+        type: "application/zip",
+        lastModified: Date.now(),
       });
 
       return { zipFile, size: zipFile.size };
     } catch (error) {
-      throw new Error(
-        `Failed to create ZIP file: ${error instanceof Error ? error.message : 'Unknown error'}`,
-        { cause: error }
-      );
+      throw new Error(`Failed to create ZIP file: ${error instanceof Error ? error.message : "Unknown error"}`, {
+        cause: error,
+      });
     }
   }
 
   /**
    * Extract PDF files from a ZIP archive
    */
-  async extractPdfFiles(
-    file: File,
-    onProgress?: (progress: ZipExtractionProgress) => void
-  ): Promise<ZipExtractionResult> {
+  async extractPdfFiles(file: File, onProgress?: (progress: ZipExtractionProgress) => void): Promise<ZipExtractionResult> {
     const result: ZipExtractionResult = {
       success: false,
       extractedFiles: [],
       errors: [],
       totalFiles: 0,
-      extractedCount: 0
+      extractedCount: 0,
     };
 
     try {
@@ -197,8 +199,8 @@ export class ZipFileService {
       const zipContents = await zip.loadAsync(file);
 
       // Get all PDF files
-      const pdfFiles = Object.entries(zipContents.files).filter(([filename, zipEntry]) =>
-        !zipEntry.dir && this.isPdfFile(filename)
+      const pdfFiles = Object.entries(zipContents.files).filter(
+        ([filename, zipEntry]) => !zipEntry.dir && this.isPdfFile(filename),
       );
 
       result.totalFiles = pdfFiles.length;
@@ -214,17 +216,17 @@ export class ZipFileService {
               currentFile: filename,
               extractedCount: i,
               totalFiles: pdfFiles.length,
-              progress: (i / pdfFiles.length) * 100
+              progress: (i / pdfFiles.length) * 100,
             });
           }
 
           // Extract file content
-          const content = await zipEntry.async('uint8array');
+          const content = await zipEntry.async("uint8array");
 
           // Create File object
           const extractedFile = new File([content as any], this.sanitizeFilename(filename), {
-            type: 'application/pdf',
-            lastModified: zipEntry.date?.getTime() || Date.now()
+            type: "application/pdf",
+            lastModified: zipEntry.date?.getTime() || Date.now(),
           });
 
           // Validate extracted PDF
@@ -235,24 +237,24 @@ export class ZipFileService {
             result.errors.push(`File "${filename}" is not a valid PDF`);
           }
         } catch (error) {
-          result.errors.push(`Failed to extract "${filename}": ${error instanceof Error ? error.message : 'Unknown error'}`);
+          result.errors.push(`Failed to extract "${filename}": ${error instanceof Error ? error.message : "Unknown error"}`);
         }
       }
 
       // Final progress report
       if (onProgress) {
         onProgress({
-          currentFile: '',
+          currentFile: "",
           extractedCount: result.extractedCount,
           totalFiles: result.totalFiles,
-          progress: 100
+          progress: 100,
         });
       }
 
       result.success = result.extractedCount > 0;
       return result;
     } catch (error) {
-      result.errors.push(`Failed to extract ZIP file: ${error instanceof Error ? error.message : 'Unknown error'}`);
+      result.errors.push(`Failed to extract ZIP file: ${error instanceof Error ? error.message : "Unknown error"}`);
       return result;
     }
   }
@@ -262,9 +264,7 @@ export class ZipFileService {
    */
   public isZipFile(file: File): boolean {
     const hasValidType = ZipFileService.VALID_ZIP_TYPES.includes(file.type);
-    const hasValidExtension = ZipFileService.VALID_ZIP_EXTENSIONS.some(ext =>
-      file.name.toLowerCase().endsWith(ext)
-    );
+    const hasValidExtension = ZipFileService.VALID_ZIP_EXTENSIONS.some((ext) => file.name.toLowerCase().endsWith(ext));
 
     return hasValidType || hasValidExtension;
   }
@@ -274,9 +274,7 @@ export class ZipFileService {
    */
   public isZipFileStub(stub: StirlingFileStub): boolean {
     const hasValidType = stub.type && ZipFileService.VALID_ZIP_TYPES.includes(stub.type);
-    const hasValidExtension = ZipFileService.VALID_ZIP_EXTENSIONS.some(ext =>
-      stub.name.toLowerCase().endsWith(ext)
-    );
+    const hasValidExtension = ZipFileService.VALID_ZIP_EXTENSIONS.some((ext) => stub.name.toLowerCase().endsWith(ext));
 
     return hasValidType || hasValidExtension;
   }
@@ -285,7 +283,7 @@ export class ZipFileService {
    * Check if a filename indicates a PDF file
    */
   private isPdfFile(filename: string): boolean {
-    return filename.toLowerCase().endsWith('.pdf');
+    return filename.toLowerCase().endsWith(".pdf");
   }
 
   /**
@@ -293,7 +291,7 @@ export class ZipFileService {
    */
   private isHtmlFile(filename: string): boolean {
     const lowerName = filename.toLowerCase();
-    return lowerName.endsWith('.html') || lowerName.endsWith('.htm') || lowerName.endsWith('.xhtml');
+    return lowerName.endsWith(".html") || lowerName.endsWith(".htm") || lowerName.endsWith(".xhtml");
   }
 
   /**
@@ -314,7 +312,7 @@ export class ZipFileService {
 
       return false;
     } catch (error) {
-      console.error('Error checking for HTML files:', error);
+      console.error("Error checking for HTML files:", error);
       return false;
     }
   }
@@ -329,11 +327,13 @@ export class ZipFileService {
       const bytes = new Uint8Array(buffer);
 
       // Check for PDF header: %PDF-
-      return bytes[0] === 0x25 && // %
-             bytes[1] === 0x50 && // P
-             bytes[2] === 0x44 && // D
-             bytes[3] === 0x46 && // F
-             bytes[4] === 0x2D;   // -
+      return (
+        bytes[0] === 0x25 && // %
+        bytes[1] === 0x50 && // P
+        bytes[2] === 0x44 && // D
+        bytes[3] === 0x46 && // F
+        bytes[4] === 0x2d
+      ); // -
     } catch {
       return false;
     }
@@ -344,25 +344,25 @@ export class ZipFileService {
    */
   private sanitizeFilename(filename: string): string {
     // Remove directory path and get just the filename
-    const basename = filename.split('/').pop() || filename;
+    const basename = filename.split("/").pop() || filename;
 
     // Remove or replace unsafe characters
     return basename
-      .replace(/[<>:"/\\|?*]/g, '_') // Replace unsafe chars with underscore
-      .replace(/\s+/g, '_') // Replace spaces with underscores
-      .replace(/_{2,}/g, '_') // Replace multiple underscores with single
-      .replace(/^_|_$/g, ''); // Remove leading/trailing underscores
+      .replace(/[<>:"/\\|?*]/g, "_") // Replace unsafe chars with underscore
+      .replace(/\s+/g, "_") // Replace spaces with underscores
+      .replace(/_{2,}/g, "_") // Replace multiple underscores with single
+      .replace(/^_|_$/g, ""); // Remove leading/trailing underscores
   }
 
   /**
    * Format file size for display
    */
   private formatFileSize(bytes: number): string {
-    if (bytes === 0) return '0 B';
+    if (bytes === 0) return "0 B";
     const k = 1024;
-    const sizes = ['B', 'KB', 'MB', 'GB'];
+    const sizes = ["B", "KB", "MB", "GB"];
     const i = Math.floor(Math.log(bytes) / Math.log(k));
-    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
   }
 
   /**
@@ -379,14 +379,14 @@ export class ZipFileService {
     zipBlob: Blob | File,
     autoUnzip: boolean,
     autoUnzipFileLimit: number,
-    skipAutoUnzip: boolean = false
+    skipAutoUnzip: boolean = false,
   ): Promise<{ shouldExtract: boolean; fileCount: number }> {
     try {
       // Automation always extracts - but still need to count files for warning
       if (skipAutoUnzip) {
         const zip = new JSZip();
         const zipContents = await zip.loadAsync(zipBlob);
-        const fileCount = Object.values(zipContents.files).filter(entry => !entry.dir).length;
+        const fileCount = Object.values(zipContents.files).filter((entry) => !entry.dir).length;
         return { shouldExtract: true, fileCount };
       }
 
@@ -400,15 +400,15 @@ export class ZipFileService {
       const zipContents = await zip.loadAsync(zipBlob);
 
       // Count non-directory entries
-      const fileCount = Object.values(zipContents.files).filter(entry => !entry.dir).length;
+      const fileCount = Object.values(zipContents.files).filter((entry) => !entry.dir).length;
 
       // Only extract if within limit
       return {
         shouldExtract: fileCount <= autoUnzipFileLimit,
-        fileCount
+        fileCount,
       };
     } catch (error) {
-      console.error('Error checking shouldUnzip:', error);
+      console.error("Error checking shouldUnzip:", error);
       // On error, default to not extracting (safer)
       return { shouldExtract: false, fileCount: 0 };
     }
@@ -431,13 +431,11 @@ export class ZipFileService {
       autoUnzipFileLimit: number;
       skipAutoUnzip?: boolean;
       confirmLargeExtraction?: (fileCount: number, fileName: string) => Promise<boolean>;
-    }
+    },
   ): Promise<File[]> {
     try {
       // Create File object if not already
-      const zipFile = zipBlob instanceof File
-        ? zipBlob
-        : new File([zipBlob], 'result.zip', { type: 'application/zip' });
+      const zipFile = zipBlob instanceof File ? zipBlob : new File([zipBlob], "result.zip", { type: "application/zip" });
 
       // Check if ZIP contains HTML files - if so, keep as ZIP
       const containsHtml = await this.containsHtmlFiles(zipFile);
@@ -450,7 +448,7 @@ export class ZipFileService {
         zipBlob,
         options.autoUnzip,
         options.autoUnzipFileLimit,
-        options.skipAutoUnzip || false
+        options.skipAutoUnzip || false,
       );
 
       if (!shouldExtract) {
@@ -469,11 +467,9 @@ export class ZipFileService {
       const extractionResult = await this.extractAllFiles(zipFile);
       return extractionResult.success ? extractionResult.extractedFiles : [zipFile];
     } catch (error) {
-      console.error('Error in extractWithPreferences:', error);
+      console.error("Error in extractWithPreferences:", error);
       // On error, return ZIP as-is
-      const zipFile = zipBlob instanceof File
-        ? zipBlob
-        : new File([zipBlob], 'result.zip', { type: 'application/zip' });
+      const zipFile = zipBlob instanceof File ? zipBlob : new File([zipBlob], "result.zip", { type: "application/zip" });
       return [zipFile];
     }
   }
@@ -483,14 +479,14 @@ export class ZipFileService {
    */
   async extractAllFiles(
     file: File | Blob,
-    onProgress?: (progress: ZipExtractionProgress) => void
+    onProgress?: (progress: ZipExtractionProgress) => void,
   ): Promise<ZipExtractionResult> {
     const result: ZipExtractionResult = {
       success: false,
       extractedFiles: [],
       errors: [],
       totalFiles: 0,
-      extractedCount: 0
+      extractedCount: 0,
     };
 
     try {
@@ -499,9 +495,7 @@ export class ZipFileService {
       const zipContents = await zip.loadAsync(file);
 
       // Get all files (not directories)
-      const allFiles = Object.entries(zipContents.files).filter(([, zipEntry]) =>
-        !zipEntry.dir
-      );
+      const allFiles = Object.entries(zipContents.files).filter(([, zipEntry]) => !zipEntry.dir);
 
       result.totalFiles = allFiles.length;
 
@@ -516,12 +510,12 @@ export class ZipFileService {
               currentFile: filename,
               extractedCount: i,
               totalFiles: allFiles.length,
-              progress: (i / allFiles.length) * 100
+              progress: (i / allFiles.length) * 100,
             });
           }
 
           // Extract file content
-          const content = await zipEntry.async('blob');
+          const content = await zipEntry.async("blob");
 
           // Create File object with appropriate MIME type
           const mimeType = this.getMimeTypeFromExtension(filename);
@@ -529,9 +523,8 @@ export class ZipFileService {
 
           result.extractedFiles.push(extractedFile);
           result.extractedCount++;
-
         } catch (error) {
-          const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+          const errorMessage = error instanceof Error ? error.message : "Unknown error";
           result.errors.push(`Failed to extract "${filename}": ${errorMessage}`);
         }
       }
@@ -539,17 +532,16 @@ export class ZipFileService {
       // Final progress report
       if (onProgress) {
         onProgress({
-          currentFile: '',
+          currentFile: "",
           extractedCount: result.extractedCount,
           totalFiles: result.totalFiles,
-          progress: 100
+          progress: 100,
         });
       }
 
       result.success = result.extractedFiles.length > 0;
-
     } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+      const errorMessage = error instanceof Error ? error.message : "Unknown error";
       result.errors.push(`Failed to process ZIP file: ${errorMessage}`);
     }
 
@@ -560,41 +552,41 @@ export class ZipFileService {
    * Get MIME type based on file extension
    */
   private getMimeTypeFromExtension(fileName: string): string {
-    const ext = fileName.toLowerCase().split('.').pop();
+    const ext = fileName.toLowerCase().split(".").pop();
 
     const mimeTypes: Record<string, string> = {
       // Images
-      'png': 'image/png',
-      'jpg': 'image/jpeg',
-      'jpeg': 'image/jpeg',
-      'gif': 'image/gif',
-      'webp': 'image/webp',
-      'bmp': 'image/bmp',
-      'svg': 'image/svg+xml',
-      'tiff': 'image/tiff',
-      'tif': 'image/tiff',
+      png: "image/png",
+      jpg: "image/jpeg",
+      jpeg: "image/jpeg",
+      gif: "image/gif",
+      webp: "image/webp",
+      bmp: "image/bmp",
+      svg: "image/svg+xml",
+      tiff: "image/tiff",
+      tif: "image/tiff",
 
       // Documents
-      'pdf': 'application/pdf',
-      'txt': 'text/plain',
-      'html': 'text/html',
-      'css': 'text/css',
-      'js': 'application/javascript',
-      'json': 'application/json',
-      'xml': 'application/xml',
+      pdf: "application/pdf",
+      txt: "text/plain",
+      html: "text/html",
+      css: "text/css",
+      js: "application/javascript",
+      json: "application/json",
+      xml: "application/xml",
 
       // Office documents
-      'doc': 'application/msword',
-      'docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
-      'xls': 'application/vnd.ms-excel',
-      'xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+      doc: "application/msword",
+      docx: "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+      xls: "application/vnd.ms-excel",
+      xlsx: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
 
       // Archives
-      'zip': 'application/zip',
-      'rar': 'application/x-rar-compressed',
+      zip: "application/zip",
+      rar: "application/x-rar-compressed",
     };
 
-    return mimeTypes[ext || ''] || 'application/octet-stream';
+    return mimeTypes[ext || ""] || "application/octet-stream";
   }
 
   /**
@@ -609,19 +601,19 @@ export class ZipFileService {
    */
   async extractAndStoreFilesWithHistory(
     zipFile: File,
-    zipStub: StirlingFileStub
+    zipStub: StirlingFileStub,
   ): Promise<{ success: boolean; extractedStubs: StirlingFileStub[]; errors: string[] }> {
     const result = {
       success: false,
       extractedStubs: [] as StirlingFileStub[],
-      errors: [] as string[]
+      errors: [] as string[],
     };
 
     try {
       // Check if ZIP contains HTML files - if so, don't extract
       const hasHtml = await this.containsHtmlFiles(zipFile);
       if (hasHtml) {
-        result.errors.push('ZIP contains HTML files and will not be auto-extracted. Download the ZIP to access the files.');
+        result.errors.push("ZIP contains HTML files and will not be auto-extracted. Download the ZIP to access the files.");
         return result;
       }
 
@@ -657,7 +649,7 @@ export class ZipFileService {
             parentFileId: zipStub.parentFileId,
             versionNumber: zipStub.versionNumber,
             toolHistory: zipStub.toolHistory || [],
-            thumbnailUrl: thumbnail
+            thumbnailUrl: thumbnail,
           };
 
           // Store in IndexedDB
@@ -665,7 +657,7 @@ export class ZipFileService {
 
           result.extractedStubs.push(stub);
         } catch (error) {
-          const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+          const errorMessage = error instanceof Error ? error.message : "Unknown error";
           result.errors.push(`Failed to process "${extractedFile.name}": ${errorMessage}`);
         }
       }
@@ -673,7 +665,7 @@ export class ZipFileService {
       result.success = result.extractedStubs.length > 0;
       return result;
     } catch (error) {
-      const errorMessage = error instanceof Error ? error.message : 'Unknown error';
+      const errorMessage = error instanceof Error ? error.message : "Unknown error";
       result.errors.push(`Failed to extract ZIP file: ${errorMessage}`);
       return result;
     }
diff --git a/frontend/src/core/setupTests.js b/frontend/src/core/setupTests.js
index 8f2609b7b3..1dd407a63e 100644
--- a/frontend/src/core/setupTests.js
+++ b/frontend/src/core/setupTests.js
@@ -2,4 +2,4 @@
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';
+import "@testing-library/jest-dom";
diff --git a/frontend/src/core/setupTests.ts b/frontend/src/core/setupTests.ts
index 0e5e9737a2..27a85c287b 100644
--- a/frontend/src/core/setupTests.ts
+++ b/frontend/src/core/setupTests.ts
@@ -1,5 +1,5 @@
-import '@testing-library/jest-dom';
-import { vi } from 'vitest';
+import "@testing-library/jest-dom";
+import { vi } from "vitest";
 
 // Mock localStorage for tests
 class LocalStorageMock implements Storage {
@@ -30,13 +30,13 @@ class LocalStorageMock implements Storage {
   }
 }
 
-Object.defineProperty(window, 'localStorage', {
+Object.defineProperty(window, "localStorage", {
   value: new LocalStorageMock(),
   writable: true,
 });
 
 // Mock i18next for tests
-vi.mock('react-i18next', () => ({
+vi.mock("react-i18next", () => ({
   useTranslation: () => ({
     t: (key: string) => key,
     i18n: {
@@ -44,16 +44,16 @@ vi.mock('react-i18next', () => ({
     },
   }),
   initReactI18next: {
-    type: '3rdParty',
+    type: "3rdParty",
     init: vi.fn(),
   },
   I18nextProvider: ({ children }: { children: React.ReactNode }) => children,
 }));
 
 // Mock i18next-http-backend
-vi.mock('i18next-http-backend', () => ({
+vi.mock("i18next-http-backend", () => ({
   default: {
-    type: 'backend',
+    type: "backend",
     init: vi.fn(),
     read: vi.fn(),
     save: vi.fn(),
@@ -61,12 +61,12 @@ vi.mock('i18next-http-backend', () => ({
 }));
 
 // Mock window.URL.createObjectURL and revokeObjectURL for tests
-global.URL.createObjectURL = vi.fn(() => 'mocked-url');
+global.URL.createObjectURL = vi.fn(() => "mocked-url");
 global.URL.revokeObjectURL = vi.fn();
 
 // Mock File and Blob API methods that aren't available in jsdom
 if (!globalThis.File.prototype.arrayBuffer) {
-  globalThis.File.prototype.arrayBuffer = function() {
+  globalThis.File.prototype.arrayBuffer = function () {
     // Return a simple ArrayBuffer with some mock data
     const buffer = new ArrayBuffer(8);
     const view = new Uint8Array(buffer);
@@ -76,7 +76,7 @@ if (!globalThis.File.prototype.arrayBuffer) {
 }
 
 if (!globalThis.Blob.prototype.arrayBuffer) {
-  globalThis.Blob.prototype.arrayBuffer = function() {
+  globalThis.Blob.prototype.arrayBuffer = function () {
     // Return a simple ArrayBuffer with some mock data
     const buffer = new ArrayBuffer(8);
     const view = new Uint8Array(buffer);
@@ -94,7 +94,7 @@ for (let i = 0; i < 32; i++) {
 }
 
 // Force override crypto.subtle to avoid Node.js native implementation
-Object.defineProperty(globalThis, 'crypto', {
+Object.defineProperty(globalThis, "crypto", {
   value: {
     subtle: {
       digest: vi.fn().mockImplementation(async (_algorithm: string, _data: any) => {
@@ -139,9 +139,9 @@ global.IntersectionObserver = vi.fn().mockImplementation(() => ({
 }));
 
 // Mock matchMedia for responsive components
-Object.defineProperty(window, 'matchMedia', {
+Object.defineProperty(window, "matchMedia", {
   writable: true,
-  value: vi.fn().mockImplementation(query => ({
+  value: vi.fn().mockImplementation((query) => ({
     matches: false,
     media: query,
     onchange: null,
@@ -154,7 +154,7 @@ Object.defineProperty(window, 'matchMedia', {
 });
 
 // Provide a minimal DOMMatrix implementation for pdf.js in the test environment
-if (typeof globalThis.DOMMatrix === 'undefined') {
+if (typeof globalThis.DOMMatrix === "undefined") {
   class DOMMatrixStub {
     a = 1;
     b = 0;
@@ -190,7 +190,7 @@ if (typeof globalThis.DOMMatrix === 'undefined') {
     }
   }
 
-  Object.defineProperty(globalThis, 'DOMMatrix', {
+  Object.defineProperty(globalThis, "DOMMatrix", {
     value: DOMMatrixStub,
     writable: false,
     configurable: true,
diff --git a/frontend/src/core/styles/cookieconsent.css b/frontend/src/core/styles/cookieconsent.css
index 331632b139..0f51c768cb 100644
--- a/frontend/src/core/styles/cookieconsent.css
+++ b/frontend/src/core/styles/cookieconsent.css
@@ -56,4 +56,4 @@
 /* Override any potential conflicts */
 [data-mantine-color-scheme="dark"] #cc-main {
   color: #ffffff !important;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/core/styles/index.css b/frontend/src/core/styles/index.css
index 21298512e2..038f10cee1 100644
--- a/frontend/src/core/styles/index.css
+++ b/frontend/src/core/styles/index.css
@@ -1,4 +1,5 @@
-html, body {
+html,
+body {
   margin: 0;
   padding: 0;
   height: 100%;
@@ -6,28 +7,27 @@ html, body {
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family:
+    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
+    "Helvetica Neue", sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
 }
 
 /* Suppress font visibility warnings for PDF.js embedded fonts */
 @font-face {
-  font-family: 'Adwaita Mono';
-  src: local('Adwaita Mono');
+  font-family: "Adwaita Mono";
+  src: local("Adwaita Mono");
   font-display: optional;
 }
 
 @font-face {
-  font-family: 'Nimbus Mono PS';
-  src: local('Nimbus Mono PS');
+  font-family: "Nimbus Mono PS";
+  src: local("Nimbus Mono PS");
   font-display: optional;
 }
 
diff --git a/frontend/src/core/styles/rainbow.module.css b/frontend/src/core/styles/rainbow.module.css
index d56578a144..7b8c81b65a 100644
--- a/frontend/src/core/styles/rainbow.module.css
+++ b/frontend/src/core/styles/rainbow.module.css
@@ -1,42 +1,110 @@
 /* Rainbow Mode Styles - Easter Egg! */
 @keyframes rainbowBackground {
-  0% { background-position: 0% 50%; }
-  50% { background-position: 100% 50%; }
-  100% { background-position: 0% 50%; }
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
 }
 
 @keyframes rainbowBorder {
-  0% { border-color: #ff0000; box-shadow: 0 0 15px #ff0000; }
-  14% { border-color: #ff8800; box-shadow: 0 0 15px #ff8800; }
-  28% { border-color: #ffff00; box-shadow: 0 0 15px #ffff00; }
-  42% { border-color: #88ff00; box-shadow: 0 0 15px #88ff00; }
-  57% { border-color: #00ff88; box-shadow: 0 0 15px #00ff88; }
-  71% { border-color: #0088ff; box-shadow: 0 0 15px #0088ff; }
-  85% { border-color: #8800ff; box-shadow: 0 0 15px #8800ff; }
-  100% { border-color: #ff0000; box-shadow: 0 0 15px #ff0000; }
+  0% {
+    border-color: #ff0000;
+    box-shadow: 0 0 15px #ff0000;
+  }
+  14% {
+    border-color: #ff8800;
+    box-shadow: 0 0 15px #ff8800;
+  }
+  28% {
+    border-color: #ffff00;
+    box-shadow: 0 0 15px #ffff00;
+  }
+  42% {
+    border-color: #88ff00;
+    box-shadow: 0 0 15px #88ff00;
+  }
+  57% {
+    border-color: #00ff88;
+    box-shadow: 0 0 15px #00ff88;
+  }
+  71% {
+    border-color: #0088ff;
+    box-shadow: 0 0 15px #0088ff;
+  }
+  85% {
+    border-color: #8800ff;
+    box-shadow: 0 0 15px #8800ff;
+  }
+  100% {
+    border-color: #ff0000;
+    box-shadow: 0 0 15px #ff0000;
+  }
 }
 
 @keyframes rainbowText {
-  0% { color: #ff0000; text-shadow: 0 0 10px #ff0000; }
-  14% { color: #ff8800; text-shadow: 0 0 10px #ff8800; }
-  28% { color: #ffff00; text-shadow: 0 0 10px #ffff00; }
-  42% { color: #88ff00; text-shadow: 0 0 10px #88ff00; }
-  57% { color: #00ff88; text-shadow: 0 0 10px #00ff88; }
-  71% { color: #0088ff; text-shadow: 0 0 10px #0088ff; }
-  85% { color: #8800ff; text-shadow: 0 0 10px #8800ff; }
-  100% { color: #ff0000; text-shadow: 0 0 10px #ff0000; }
+  0% {
+    color: #ff0000;
+    text-shadow: 0 0 10px #ff0000;
+  }
+  14% {
+    color: #ff8800;
+    text-shadow: 0 0 10px #ff8800;
+  }
+  28% {
+    color: #ffff00;
+    text-shadow: 0 0 10px #ffff00;
+  }
+  42% {
+    color: #88ff00;
+    text-shadow: 0 0 10px #88ff00;
+  }
+  57% {
+    color: #00ff88;
+    text-shadow: 0 0 10px #00ff88;
+  }
+  71% {
+    color: #0088ff;
+    text-shadow: 0 0 10px #0088ff;
+  }
+  85% {
+    color: #8800ff;
+    text-shadow: 0 0 10px #8800ff;
+  }
+  100% {
+    color: #ff0000;
+    text-shadow: 0 0 10px #ff0000;
+  }
 }
 
 @keyframes rainbowPulse {
-  0%, 100% { transform: scale(1); }
-  50% { transform: scale(1.05); }
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
 }
 
 /* Main rainbow theme class */
 .rainbowMode {
   background: linear-gradient(
     -45deg,
-    #ff0000, #ff8800, #ffff00, #88ff00, #00ff88, #00ffff, #0088ff, #8800ff, #ff0088, #ff0000
+    #ff0000,
+    #ff8800,
+    #ffff00,
+    #88ff00,
+    #00ff88,
+    #00ffff,
+    #0088ff,
+    #8800ff,
+    #ff0088,
+    #ff0000
   ) !important;
   background-size: 400% 400% !important;
   animation: rainbowBackground 3s ease infinite !important;
@@ -48,10 +116,20 @@
 .rainbowCard {
   background: linear-gradient(
     45deg,
-    #ff0000, #ff8800, #ffff00, #88ff00, #00ff88, #00ffff, #0088ff, #8800ff, #ff0088
+    #ff0000,
+    #ff8800,
+    #ffff00,
+    #88ff00,
+    #00ff88,
+    #00ffff,
+    #0088ff,
+    #8800ff,
+    #ff0088
   ) !important;
   background-size: 400% 400% !important;
-  animation: rainbowBackground 4s ease infinite, rainbowBorder 2s linear infinite !important;
+  animation:
+    rainbowBackground 4s ease infinite,
+    rainbowBorder 2s linear infinite !important;
   color: white !important;
   border: 2px solid !important;
   border-radius: 15px !important;
@@ -61,10 +139,20 @@
 .rainbowButton {
   background: linear-gradient(
     45deg,
-    #ff0000, #ff8800, #ffff00, #88ff00, #00ff88, #00ffff, #0088ff, #8800ff, #ff0088
+    #ff0000,
+    #ff8800,
+    #ffff00,
+    #88ff00,
+    #00ff88,
+    #00ffff,
+    #0088ff,
+    #8800ff,
+    #ff0088
   ) !important;
   background-size: 300% 300% !important;
-  animation: rainbowBackground 2s ease infinite, rainbowBorder 1s linear infinite !important;
+  animation:
+    rainbowBackground 2s ease infinite,
+    rainbowBorder 1s linear infinite !important;
   border: 2px solid !important;
   color: white !important;
   border-radius: 8px !important;
@@ -74,17 +162,30 @@
 
 .rainbowButton:hover {
   transform: scale(1.05) !important;
-  animation: rainbowBackground 1s ease infinite, rainbowBorder 0.5s linear infinite, rainbowPulse 0.5s ease infinite !important;
+  animation:
+    rainbowBackground 1s ease infinite,
+    rainbowBorder 0.5s linear infinite,
+    rainbowPulse 0.5s ease infinite !important;
   box-shadow: 0 0 25px rgba(255, 255, 255, 0.6) !important;
 }
 
 .rainbowInput {
   background: linear-gradient(
     90deg,
-    #ff0000, #ff8800, #ffff00, #88ff00, #00ff88, #00ffff, #0088ff, #8800ff, #ff0088
+    #ff0000,
+    #ff8800,
+    #ffff00,
+    #88ff00,
+    #00ff88,
+    #00ffff,
+    #0088ff,
+    #8800ff,
+    #ff0088
   ) !important;
   background-size: 300% 300% !important;
-  animation: rainbowBackground 2.5s ease infinite, rainbowBorder 1.5s linear infinite !important;
+  animation:
+    rainbowBackground 2.5s ease infinite,
+    rainbowBorder 1.5s linear infinite !important;
   border: 2px solid !important;
   color: white !important;
   border-radius: 8px !important;
@@ -103,22 +204,31 @@
 .rainbowSegmentedControl {
   background: linear-gradient(
     45deg,
-    #ff0000, #ff8800, #ffff00, #88ff00, #00ff88, #00ffff, #0088ff, #8800ff, #ff0088
+    #ff0000,
+    #ff8800,
+    #ffff00,
+    #88ff00,
+    #00ff88,
+    #00ffff,
+    #0088ff,
+    #8800ff,
+    #ff0088
   ) !important;
   background-size: 400% 400% !important;
-  animation: rainbowBackground 3s ease infinite, rainbowBorder 2s linear infinite !important;
+  animation:
+    rainbowBackground 3s ease infinite,
+    rainbowBorder 2s linear infinite !important;
   border: 2px solid !important;
   border-radius: 12px !important;
   padding: 4px !important;
 }
 
 .rainbowPaper {
-  background: linear-gradient(
-    90deg,
-  #00ffff, #0088ff, #8800ff, #ff0088
-  ) !important;
+  background: linear-gradient(90deg, #00ffff, #0088ff, #8800ff, #ff0088) !important;
   background-size: 100% 100% !important;
-  animation: rainbowBackground 3.5s ease infinite, rainbowBorder 2s linear infinite !important;
+  animation:
+    rainbowBackground 3.5s ease infinite,
+    rainbowBorder 2s linear infinite !important;
   border: 2px solid !important;
   color: white !important;
   border-radius: 12px !important;
@@ -129,9 +239,11 @@
   position: fixed !important;
   top: 20px !important;
   right: 20px !important;
-  background: linear-gradient(45deg,#ffff00, #88ff00, #00ff88, #00ffff) !important;
+  background: linear-gradient(45deg, #ffff00, #88ff00, #00ff88, #00ffff) !important;
   background-size: 300% 300% !important;
-  animation: rainbowBackground 1s ease infinite, rainbowBorder 0.5s linear infinite !important;
+  animation:
+    rainbowBackground 1s ease infinite,
+    rainbowBorder 0.5s linear infinite !important;
   color: white !important;
   padding: 15px 20px !important;
   border-radius: 25px !important;
@@ -148,7 +260,16 @@
 .rainbowMode [data-mantine-color-scheme] {
   background: linear-gradient(
     -45deg,
-    #ff0000, #ff8800, #ffff00, #88ff00, #00ff88, #00ffff, #0088ff, #8800ff, #ff0088, #ff0000
+    #ff0000,
+    #ff8800,
+    #ffff00,
+    #88ff00,
+    #00ff88,
+    #00ffff,
+    #0088ff,
+    #8800ff,
+    #ff0088,
+    #ff0000
   ) !important;
   background-size: 400% 400% !important;
   animation: rainbowBackground 3s ease infinite !important;
@@ -156,14 +277,13 @@
 
 /* Make all buttons rainbow in rainbow mode */
 .rainbowMode button {
-  background: linear-gradient(
-    45deg,
-     #ffff00, #88ff00, #00ff88, #00ffff
-  ) !important;
+  background: linear-gradient(45deg, #ffff00, #88ff00, #00ff88, #00ffff) !important;
   background-size: 100% 100% !important;
   animation: rainbowBackground 2s ease infinite !important;
   border: 2px solid !important;
-  animation: rainbowBackground 2s ease infinite, rainbowBorder 1.5s linear infinite !important;
+  animation:
+    rainbowBackground 2s ease infinite,
+    rainbowBorder 1.5s linear infinite !important;
   color: white !important;
   font-weight: bold !important;
 }
@@ -172,14 +292,13 @@
 .rainbowMode input,
 .rainbowMode select,
 .rainbowMode textarea {
-  background: linear-gradient(
-    90deg,
-    #ffff00, #88ff00, #00ff88, #00ffff
-  ) !important;
+  background: linear-gradient(90deg, #ffff00, #88ff00, #00ff88, #00ffff) !important;
   background-size: 100% 100% !important;
   animation: rainbowBackground 2.5s ease infinite !important;
   border: 2px solid !important;
-  animation: rainbowBackground 2.5s ease infinite, rainbowBorder 1.5s linear infinite !important;
+  animation:
+    rainbowBackground 2.5s ease infinite,
+    rainbowBorder 1.5s linear infinite !important;
   color: white !important;
 }
 
diff --git a/frontend/src/core/styles/tailwind.css b/frontend/src/core/styles/tailwind.css
index 1408a13968..cfcbf09070 100644
--- a/frontend/src/core/styles/tailwind.css
+++ b/frontend/src/core/styles/tailwind.css
@@ -1,6 +1,5 @@
-
 /* Import minimal theme variables */
-@import './theme.css';
+@import "./theme.css";
 
 @layer base {
   @tailwind base;
diff --git a/frontend/src/core/styles/theme.css b/frontend/src/core/styles/theme.css
index 7e30411d6a..fecc89fcf8 100644
--- a/frontend/src/core/styles/theme.css
+++ b/frontend/src/core/styles/theme.css
@@ -1,7 +1,7 @@
 :root {
   /* Compare highlight colors (same in light/dark) */
   --spdf-compare-removed-bg: rgba(255, 107, 107, 0.45); /* #ff6b6b @ 0.45 */
-  --spdf-compare-added-bg: rgba(81, 207, 102, 0.35);  /* #51cf66 @ 0.35 */
+  --spdf-compare-added-bg: rgba(81, 207, 102, 0.35); /* #51cf66 @ 0.35 */
 
   /* Badge colors for dropdowns */
   --spdf-compare-removed-badge-bg: rgba(255, 59, 48, 0.15);
@@ -83,20 +83,20 @@
   --color-yellow-400: #facc15;
 
   /* Category colors - consistent across light and dark modes */
-  --category-color-removal: #ef4444;        /* Red for removal tools */
-  --category-color-security: #f59e0b;       /* Orange for security tools */
-  --category-color-formatting: #8b5cf6;     /* Purple for formatting tools */
-  --category-color-extraction: #06b6d4;      /* Cyan for extraction tools */
-  --category-color-signing: #10b981;        /* Green for signing tools */
-  --category-color-general: #3b82f6;        /* Blue for general tools */
-  --category-color-verification: #f97316;    /* Orange for verification tools */
-  --category-color-automation: #ec4899;     /* Pink for automation tools */
-  --category-color-developer: #6b7280;      /* Gray for developer tools */
-  --category-color-default: #6b7280;        /* Default gray */
+  --category-color-removal: #ef4444; /* Red for removal tools */
+  --category-color-security: #f59e0b; /* Orange for security tools */
+  --category-color-formatting: #8b5cf6; /* Purple for formatting tools */
+  --category-color-extraction: #06b6d4; /* Cyan for extraction tools */
+  --category-color-signing: #10b981; /* Green for signing tools */
+  --category-color-general: #3b82f6; /* Blue for general tools */
+  --category-color-verification: #f97316; /* Orange for verification tools */
+  --category-color-automation: #ec4899; /* Pink for automation tools */
+  --category-color-developer: #6b7280; /* Gray for developer tools */
+  --category-color-default: #6b7280; /* Default gray */
 
   /* Special section colors - consistent across light and dark modes */
-  --special-color-favorites: #FFC107;      /* Yellow/gold for favorites */
-  --special-color-recommended: #1BB1D4;    /* Cyan for recommended */
+  --special-color-favorites: #ffc107; /* Yellow/gold for favorites */
+  --special-color-recommended: #1bb1d4; /* Cyan for recommended */
   --color-yellow-500: #eab308;
   --color-yellow-600: #ca8a04;
   --color-yellow-700: #a16207;
@@ -158,9 +158,9 @@
   --bg-muted: #f3f4f6;
   --bg-background: #f9fafb;
   --bg-toolbar: #ffffff;
-  --bg-file-manager: #F5F6F8;
+  --bg-file-manager: #f5f6f8;
   --bg-file-list: #ffffff;
-  --btn-open-file: #0A8BFF;
+  --btn-open-file: #0a8bff;
   --text-primary: #111827;
   --text-secondary: #4b5563;
   --text-muted: #6b7280;
@@ -168,130 +168,132 @@
   --text-always-dark: #1f2937;
   --text-always-dark-muted: #6b7280;
   --border-subtle: #e5e7eb;
-  --border-default: #E2E8F0;
+  --border-default: #e2e8f0;
   --border-strong: #9ca3af;
   --hover-bg: #f9fafb;
   --active-bg: #f3f4f6;
   --automation-entry-hover-bg: var(--color-gray-100);
 
   /* Icon colors for light mode */
-  --icon-user-bg: #9CA3AF;
-  --icon-user-color: #FFFFFF;
-  --icon-notifications-bg: #9CA3AF;
-  --icon-notifications-color: #FFFFFF;
-  --icon-tools-bg: #1E88E5;
-  --icon-tools-color: #FFFFFF;
-  --icon-read-bg: #4CAF50;
-  --icon-read-color: #FFFFFF;
-  --icon-sign-bg: #3BA99C;
-  --icon-sign-color: #FFFFFF;
-  --icon-automate-bg: #A576E3;
-  --icon-automate-color: #FFFFFF;
-  --icon-files-bg: #D3E7F7;
-  --icon-files-color: #0A8BFF;
-  --icon-activity-bg: #D3E7F7;
-  --icon-activity-color: #0A8BFF;
-  --icon-config-bg: #9CA3AF;
-  --icon-config-color: #FFFFFF;
+  --icon-user-bg: #9ca3af;
+  --icon-user-color: #ffffff;
+  --icon-notifications-bg: #9ca3af;
+  --icon-notifications-color: #ffffff;
+  --icon-tools-bg: #1e88e5;
+  --icon-tools-color: #ffffff;
+  --icon-read-bg: #4caf50;
+  --icon-read-color: #ffffff;
+  --icon-sign-bg: #3ba99c;
+  --icon-sign-color: #ffffff;
+  --icon-automate-bg: #a576e3;
+  --icon-automate-color: #ffffff;
+  --icon-files-bg: #d3e7f7;
+  --icon-files-color: #0a8bff;
+  --icon-activity-bg: #d3e7f7;
+  --icon-activity-color: #0a8bff;
+  --icon-config-bg: #9ca3af;
+  --icon-config-color: #ffffff;
 
   /* RightRail (light) */
-  --right-rail-bg: #F5F6F8;           /* light background */
-  --right-rail-foreground: #E3E4E5;   /* panel behind custom tool icons */
-  --right-rail-icon: #4B5563;         /* icon color */
-  --right-rail-icon-disabled: #CECECE;/* disabled icon */
-  --right-rail-pan-active-bg: #EAEAEA;
+  --right-rail-bg: #f5f6f8; /* light background */
+  --right-rail-foreground: #e3e4e5; /* panel behind custom tool icons */
+  --right-rail-icon: #4b5563; /* icon color */
+  --right-rail-icon-disabled: #cecece; /* disabled icon */
+  --right-rail-pan-active-bg: #eaeaea;
 
   /* Colors for tooltips */
-  --tooltip-title-bg: #DBEFFF;
-  --tooltip-title-color: #31528E;
-  --tooltip-header-bg: #31528E;
+  --tooltip-title-bg: #dbefff;
+  --tooltip-title-color: #31528e;
+  --tooltip-header-bg: #31528e;
   --tooltip-header-color: white;
   --tooltip-border: var(--border-default);
 
   /* Inactive icon colors for light mode */
-  --icon-inactive-bg: #9CA3AF;
-  --icon-inactive-color: #FFFFFF;
+  --icon-inactive-bg: #9ca3af;
+  --icon-inactive-color: #ffffff;
 
   /* New theme colors for text and icons */
   --tools-text-and-icon-color: #374151;
 
   /* Tool picker sticky header variables (light mode) */
-  --tool-header-bg: #DBEFFF;
-  --tool-header-border: #BEE2FF;
-  --tool-header-text: #1E88E5;
-  --tool-header-badge-bg: #C0DDFF;
-  --tool-header-badge-text: #004E99;
+  --tool-header-bg: #dbefff;
+  --tool-header-border: #bee2ff;
+  --tool-header-text: #1e88e5;
+  --tool-header-badge-bg: #c0ddff;
+  --tool-header-badge-text: #004e99;
 
   /* Subcategory title styling (light mode) */
-  --tool-subcategory-text-color: #9CA3AF; /* lighter text */
-  --tool-subcategory-rule-color: #E5E7EB; /* doubly lighter rule line */
-  --accent-interactive: #4A90E2;
-  --text-instruction: #4A90E2;
+  --tool-subcategory-text-color: #9ca3af; /* lighter text */
+  --tool-subcategory-rule-color: #e5e7eb; /* doubly lighter rule line */
+  --accent-interactive: #4a90e2;
+  --text-instruction: #4a90e2;
   --text-brand: var(--color-gray-700);
-  --text-brand-accent: #DC2626;
-
+  --text-brand-accent: #dc2626;
 
   /* PDF text selection colors */
   --pdf-selection-bg: rgba(59, 130, 246, 0.2);
   --pdf-selection-ring: rgba(59, 130, 246, 0.18);
 
   /* Placeholder text colors */
-  --search-text-and-icon-color: #6B7382;
+  --search-text-and-icon-color: #6b7382;
 
   /* Tool panel search bar background colors */
-  --tool-panel-search-bg: #EFF1F4;
-  --tool-panel-search-border-bottom: #EFF1F4;
+  --tool-panel-search-bg: #eff1f4;
+  --tool-panel-search-border-bottom: #eff1f4;
 
   /* container */
   --landing-paper-bg: var(--bg-surface);
-  --landing-inner-paper-bg: #EEF8FF;
-  --landing-inner-paper-border: #CDEAFF;
+  --landing-inner-paper-bg: #eef8ff;
+  --landing-inner-paper-border: #cdeaff;
   --landing-button-bg: var(--bg-surface);
   --landing-button-color: var(--icon-tools-bg);
-  --landing-button-border: #E0F2F7;
+  --landing-button-border: #e0f2f7;
   --landing-button-hover-bg: rgb(251, 251, 251);
 
   /* drop state */
-  --landing-drop-paper-bg: #E3F2FD;
-  --landing-drop-inner-paper-bg: #BBDEFB;
-  --landing-drop-inner-paper-border: #90CAF9;
+  --landing-drop-paper-bg: #e3f2fd;
+  --landing-drop-inner-paper-bg: #bbdefb;
+  --landing-drop-inner-paper-border: #90caf9;
 
   /* landing hero & stack */
   --landing-hero-gradient: linear-gradient(135deg, #4c8bf5 0%, #3a7be8 100%);
   --landing-stack-w: 224px;
   --landing-stack-h: 176px;
-  --landing-stack-glow-bg: radial-gradient(circle, rgba(74,144,226,.18) 0%, transparent 70%);
+  --landing-stack-glow-bg: radial-gradient(circle, rgba(74, 144, 226, 0.18) 0%, transparent 70%);
 
   /* landing doc stack shadows */
-  --landing-doc-shadow-back-idle:   0 4px 20px rgba(0,0,0,.08),  0 1px 3px rgba(0,0,0,.04);
-  --landing-doc-shadow-back-hover:  0 12px 40px rgba(0,0,0,.15), 0 4px 12px rgba(0,0,0,.08);
-  --landing-doc-shadow-front-idle:  0 8px 30px rgba(0,0,0,.12),  0 4px 12px rgba(0,0,0,.06), 0 0 0 1px rgba(0,0,0,.02);
-  --landing-doc-shadow-front-hover: 0 18px 48px rgba(0,0,0,.18), 0 8px 20px rgba(0,0,0,.1),  0 0 0 1px rgba(0,0,0,.04);
+  --landing-doc-shadow-back-idle: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04);
+  --landing-doc-shadow-back-hover: 0 12px 40px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.08);
+  --landing-doc-shadow-front-idle:
+    0 8px 30px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(0, 0, 0, 0.02);
+  --landing-doc-shadow-front-hover:
+    0 18px 48px rgba(0, 0, 0, 0.18), 0 8px 20px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(0, 0, 0, 0.04);
 
   /* landing action button shadows */
-  --landing-action-transition:           transform 0.28s cubic-bezier(0.4,0,0.2,1), box-shadow 0.32s cubic-bezier(0.4,0,0.2,1);
-  --landing-action-shadow-idle:          0 6px 18px rgba(0,0,0,0),        0 2px 6px rgba(0,0,0,0);
-  --landing-action-shadow-hover:         0 6px 18px rgba(0,0,0,.14),      0 2px 6px rgba(0,0,0,.08);
-  --landing-action-primary-shadow-idle:  0 10px 26px rgba(58,123,232,0),  0 4px 12px rgba(0,0,0,0);
-  --landing-action-primary-shadow-hover: 0 10px 26px rgba(58,123,232,.42), 0 4px 12px rgba(0,0,0,.1);
+  --landing-action-transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.32s cubic-bezier(0.4, 0, 0.2, 1);
+  --landing-action-shadow-idle: 0 6px 18px rgba(0, 0, 0, 0), 0 2px 6px rgba(0, 0, 0, 0);
+  --landing-action-shadow-hover: 0 6px 18px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08);
+  --landing-action-primary-shadow-idle: 0 10px 26px rgba(58, 123, 232, 0), 0 4px 12px rgba(0, 0, 0, 0);
+  --landing-action-primary-shadow-hover: 0 10px 26px rgba(58, 123, 232, 0.42), 0 4px 12px rgba(0, 0, 0, 0.1);
 
   /* selected file header colors */
-  --header-selected-bg: #1E88E5; /* light mode selected header matches dark */
-  --header-selected-fg: #FFFFFF;
-  --file-card-bg: #FFFFFF;  /* file card background (light/dark paired) */
-  --accordion-item-bg: #E8EAED;  /* accordion item background - more distinguishable */
+  --header-selected-bg: #1e88e5; /* light mode selected header matches dark */
+  --header-selected-fg: #ffffff;
+  --file-card-bg: #ffffff; /* file card background (light/dark paired) */
+  --accordion-item-bg: #e8eaed; /* accordion item background - more distinguishable */
 
   /* shadows */
   --drop-shadow-color: rgba(0, 0, 0, 0.08);
   --drop-shadow-color-strong: rgba(0, 0, 0, 0.04);
-  --drop-shadow-filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0.08)) drop-shadow(0 0.6rem 0.6rem rgba(0, 0, 0, 0.06)) drop-shadow(0 1.2rem 1rem rgba(0, 0, 0, 0.04));
+  --drop-shadow-filter: drop-shadow(0 0.2rem 0.4rem rgba(0, 0, 0, 0.08)) drop-shadow(0 0.6rem 0.6rem rgba(0, 0, 0, 0.06))
+    drop-shadow(0 1.2rem 1rem rgba(0, 0, 0, 0.04));
 
   /* Light mode card hover and selection */
-  --header-hover-bg: #3B4B6E; /* same family as selected, a touch muted for hover */
-  --card-selected-border: #3FAFFF; /* slightly more blue than dark mode header */
-  --checkbox-border: #2F83BF;
-  --checkbox-checked-bg: #3FAFFF;
-  --checkbox-tick: #FFFFFF;
+  --header-hover-bg: #3b4b6e; /* same family as selected, a touch muted for hover */
+  --card-selected-border: #3fafff; /* slightly more blue than dark mode header */
+  --checkbox-border: #2f83bf;
+  --checkbox-checked-bg: #3fafff;
+  --checkbox-tick: #ffffff;
 
   --information-text-bg: #eaeaea;
   --information-text-color: #5e5e5e;
@@ -301,13 +303,13 @@
   --bulk-card-border: #e5e7eb; /* light gray border for cards and buttons */
   --bulk-card-hover-border: #d1d5db; /* slightly darker on hover */
   --unsupported-bar-bg: #5a616e;
-  --unsupported-bar-border: #6B7280;
+  --unsupported-bar-border: #6b7280;
 
   /* Config Modal colors (light mode) */
-  --modal-nav-bg: #F5F6F8;
-  --modal-nav-section-title: #6B7280;
+  --modal-nav-bg: #f5f6f8;
+  --modal-nav-section-title: #6b7280;
   --modal-nav-item: #374151;
-  --modal-nav-item-active: #0A8BFF;
+  --modal-nav-item-active: #0a8bff;
   --modal-nav-item-active-bg: rgba(10, 139, 255, 0.08);
   --modal-content-bg: #ffffff;
   --modal-header-border: rgba(0, 0, 0, 0.06);
@@ -345,10 +347,10 @@
   --pdf-light-simulated-page-text: 15 23 42;
 
   /* Code token colors (light mode) */
-  --code-kw-color: #1d4ed8;   /* blue-700 */
-  --code-str-color: #16a34a;  /* green-600 */
-  --code-num-color: #4338ca;  /* indigo-700 */
-  --code-com-color: #6b7280;  /* gray-500 */
+  --code-kw-color: #1d4ed8; /* blue-700 */
+  --code-str-color: #16a34a; /* green-600 */
+  --code-num-color: #4338ca; /* indigo-700 */
+  --code-com-color: #6b7280; /* gray-500 */
   /* Compare tool specific colors - only for colors that don't have existing theme pairs */
   --compare-upload-dropzone-bg: rgba(241, 245, 249, 0.45);
   --compare-upload-dropzone-border: rgba(148, 163, 184, 0.6);
@@ -363,15 +365,15 @@
 
 /* Onboarding (light mode) */
 :root {
-  --onboarding-title: #0A0A0A;
-  --onboarding-body: #4A5565;
+  --onboarding-title: #0a0a0a;
+  --onboarding-body: #4a5565;
   --onboarding-primary-button-bg: #101828;
-  --onboarding-primary-button-text: #FFFFFF;
-  --onboarding-secondary-button-bg: #FFFFFF;
-  --onboarding-secondary-button-text: #6A7282;
-  --onboarding-secondary-button-border: #E5E5E5;
-  --onboarding-step-active: #1E2939;
-  --onboarding-step-inactive: #D1D5DC;
+  --onboarding-primary-button-text: #ffffff;
+  --onboarding-secondary-button-bg: #ffffff;
+  --onboarding-secondary-button-text: #6a7282;
+  --onboarding-secondary-button-border: #e5e5e5;
+  --onboarding-step-active: #1e2939;
+  --onboarding-step-inactive: #d1d5dc;
 }
 
 [data-mantine-color-scheme="dark"] {
@@ -405,8 +407,8 @@
   --color-red-900: #7f1d1d;
 
   --color-gray-50: #111827;
-  --color-gray-100: #1F2329;
-  --color-gray-200: #2A2F36;
+  --color-gray-100: #1f2329;
+  --color-gray-200: #2a2f36;
   --color-gray-300: #374151;
   --color-gray-400: #4b5563;
   --color-gray-500: #6b7280;
@@ -416,20 +418,20 @@
   --color-gray-900: #f3f4f6;
 
   /* Category colors - same as light mode for consistency */
-  --category-color-removal: #ef4444;        /* Red for removal tools */
-  --category-color-security: #f59e0b;       /* Orange for security tools */
-  --category-color-formatting: #8b5cf6;     /* Purple for formatting tools */
-  --category-color-extraction: #06b6d4;      /* Cyan for extraction tools */
-  --category-color-signing: #10b981;        /* Green for signing tools */
-  --category-color-general: #3b82f6;        /* Blue for general tools */
-  --category-color-verification: #f97316;    /* Orange for verification tools */
-  --category-color-automation: #ec4899;     /* Pink for automation tools */
-  --category-color-developer: #6b7280;      /* Gray for developer tools */
-  --category-color-default: #6b7280;        /* Default gray */
+  --category-color-removal: #ef4444; /* Red for removal tools */
+  --category-color-security: #f59e0b; /* Orange for security tools */
+  --category-color-formatting: #8b5cf6; /* Purple for formatting tools */
+  --category-color-extraction: #06b6d4; /* Cyan for extraction tools */
+  --category-color-signing: #10b981; /* Green for signing tools */
+  --category-color-general: #3b82f6; /* Blue for general tools */
+  --category-color-verification: #f97316; /* Orange for verification tools */
+  --category-color-automation: #ec4899; /* Pink for automation tools */
+  --category-color-developer: #6b7280; /* Gray for developer tools */
+  --category-color-default: #6b7280; /* Default gray */
 
   /* Special section colors - same as light mode for consistency */
-  --special-color-favorites: #FFC107;      /* Yellow/gold for favorites */
-  --special-color-recommended: #1BB1D4;    /* Cyan for recommended */
+  --special-color-favorites: #ffc107; /* Yellow/gold for favorites */
+  --special-color-recommended: #1bb1d4; /* Cyan for recommended */
 
   /* Success (green) - dark */
   --color-green-50: #052e16;
@@ -456,60 +458,60 @@
   --color-yellow-900: #fef9c3;
 
   /* Dark theme semantic colors */
-  --bg-surface: #2A2F36;
-  --bg-raised: #1F2329;
-  --bg-muted: #1F2329;
-  --bg-background: #2A2F36;
-  --bg-toolbar: #1F2329;
-  --bg-file-manager: #1F2329;
-  --bg-file-list: #2A2F36;
-  --btn-open-file: #0A8BFF;
+  --bg-surface: #2a2f36;
+  --bg-raised: #1f2329;
+  --bg-muted: #1f2329;
+  --bg-background: #2a2f36;
+  --bg-toolbar: #1f2329;
+  --bg-file-manager: #1f2329;
+  --bg-file-list: #2a2f36;
+  --btn-open-file: #0a8bff;
   --text-primary: #f9fafb;
   --text-secondary: #d1d5db;
   --text-muted: #9ca3af;
   /* Always-dark text (for use on light backgrounds like alerts) - does not change in dark mode */
   --text-always-dark: #1f2937;
   --text-always-dark-muted: #6b7280;
-  --border-subtle: #2A2F36;
-  --border-default: #3A4047;
+  --border-subtle: #2a2f36;
+  --border-default: #3a4047;
   --border-strong: #4b5563;
   --hover-bg: #374151;
   --active-bg: #4b5563;
   --automation-entry-hover-bg: var(--color-gray-200);
 
   /* Icon colors for dark mode */
-  --icon-user-bg: #2A2F36;
-  --icon-user-color: #6E7581;
-  --icon-notifications-bg: #2A2F36;
-  --icon-notifications-color: #6E7581;
-  --icon-tools-bg: #4B525A;
-  --icon-tools-color: #EAEAEA;
-  --icon-read-bg: #4B525A;
-  --icon-read-color: #EAEAEA;
-  --icon-sign-bg: #4B525A;
-  --icon-sign-color: #EAEAEA;
-  --icon-automate-bg: #4B525A;
-  --icon-automate-color: #EAEAEA;
-  --icon-files-bg: #4B525A;
-  --icon-files-color: #EAEAEA;
-  --icon-activity-bg: #4B525A;
-  --icon-activity-color: #EAEAEA;
-  --icon-config-bg: #4B525A;
-  --icon-config-color: #EAEAEA;
+  --icon-user-bg: #2a2f36;
+  --icon-user-color: #6e7581;
+  --icon-notifications-bg: #2a2f36;
+  --icon-notifications-color: #6e7581;
+  --icon-tools-bg: #4b525a;
+  --icon-tools-color: #eaeaea;
+  --icon-read-bg: #4b525a;
+  --icon-read-color: #eaeaea;
+  --icon-sign-bg: #4b525a;
+  --icon-sign-color: #eaeaea;
+  --icon-automate-bg: #4b525a;
+  --icon-automate-color: #eaeaea;
+  --icon-files-bg: #4b525a;
+  --icon-files-color: #eaeaea;
+  --icon-activity-bg: #4b525a;
+  --icon-activity-color: #eaeaea;
+  --icon-config-bg: #4b525a;
+  --icon-config-color: #eaeaea;
 
   /* Inactive icon colors for dark mode */
-  --icon-inactive-bg: #2A2F36;
-  --icon-inactive-color: #6E7581;
+  --icon-inactive-bg: #2a2f36;
+  --icon-inactive-color: #6e7581;
 
   /* RightRail (dark) */
-  --right-rail-bg: #1F2329;           /* dark background */
-  --right-rail-foreground: #2A2F36;   /* panel behind custom tool icons */
-  --right-rail-icon: #BCBEBF;         /* icon color */
-  --right-rail-icon-disabled: #43464B;/* disabled icon */
-  --right-rail-pan-active-bg: #EAEAEA;
+  --right-rail-bg: #1f2329; /* dark background */
+  --right-rail-foreground: #2a2f36; /* panel behind custom tool icons */
+  --right-rail-icon: #bcbebf; /* icon color */
+  --right-rail-icon-disabled: #43464b; /* disabled icon */
+  --right-rail-pan-active-bg: #eaeaea;
 
   /* Dark mode tooltip colors */
-  --tooltip-title-bg: #4B525A;
+  --tooltip-title-bg: #4b525a;
   --tooltip-title-color: #fff;
   --tooltip-header-bg: var(--bg-raised);
   --tooltip-header-color: var(--text-primary);
@@ -518,37 +520,40 @@
   --accent-interactive: #ffffff;
   --text-instruction: #ffffff;
   --text-brand: var(--color-gray-800);
-  --text-brand-accent: #EF4444;
+  --text-brand-accent: #ef4444;
 
   /* Compare badge text colors (dark mode): lighter for readability */
   --spdf-compare-removed-badge-fg: var(--color-red-500);
   --spdf-compare-added-badge-fg: var(--color-green-500);
 
   /* container */
-  --landing-paper-bg: #171A1F;
+  --landing-paper-bg: #171a1f;
   --landing-inner-paper-bg: var(--bg-raised);
-  --landing-inner-paper-border: #2D3237;
+  --landing-inner-paper-border: #2d3237;
 
   /* landing dark overrides */
-  --landing-stack-glow-bg: radial-gradient(circle, rgba(30,136,229,.22) 0%, transparent 70%);
-  --landing-doc-shadow-back-idle:   0 4px 20px rgba(0,0,0,.35),  0 1px 3px rgba(0,0,0,.25);
-  --landing-doc-shadow-back-hover:  0 14px 44px rgba(0,0,0,.55), 0 6px 16px rgba(0,0,0,.35);
-  --landing-doc-shadow-front-idle:  0 8px 30px rgba(0,0,0,.45),  0 4px 12px rgba(0,0,0,.3),  0 0 0 1px rgba(255,255,255,.04);
-  --landing-doc-shadow-front-hover: 0 20px 52px rgba(0,0,0,.6),  0 10px 24px rgba(0,0,0,.4), 0 0 0 1px rgba(255,255,255,.06);
+  --landing-stack-glow-bg: radial-gradient(circle, rgba(30, 136, 229, 0.22) 0%, transparent 70%);
+  --landing-doc-shadow-back-idle: 0 4px 20px rgba(0, 0, 0, 0.35), 0 1px 3px rgba(0, 0, 0, 0.25);
+  --landing-doc-shadow-back-hover: 0 14px 44px rgba(0, 0, 0, 0.55), 0 6px 16px rgba(0, 0, 0, 0.35);
+  --landing-doc-shadow-front-idle:
+    0 8px 30px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.04);
+  --landing-doc-shadow-front-hover:
+    0 20px 52px rgba(0, 0, 0, 0.6), 0 10px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);
   --landing-button-color: #ffffff;
   --landing-button-hover-bg: var(--bg-raised);
 
   /* selected file header colors for dark */
-  --header-selected-bg: #1E88E5;
-  --header-selected-fg: #FFFFFF;
+  --header-selected-bg: #1e88e5;
+  --header-selected-fg: #ffffff;
   /* file card background (dark) */
-  --file-card-bg: #1F2329;
-  --accordion-item-bg: #373D45;  /* accordion item background - more distinguishable */
+  --file-card-bg: #1f2329;
+  --accordion-item-bg: #373d45; /* accordion item background - more distinguishable */
 
   /* shadows */
   --drop-shadow-color: rgba(255, 255, 255, 0.08);
   --drop-shadow-color-strong: rgba(255, 255, 255, 0.04);
-  --drop-shadow-filter: drop-shadow(0 0.2rem 0.4rem rgba(200, 200, 200, 0.08)) drop-shadow(0 0.6rem 0.6rem rgba(200, 200, 200, 0.06)) drop-shadow(0 1.2rem 1rem rgba(200, 200, 200, 0.04));
+  --drop-shadow-filter: drop-shadow(0 0.2rem 0.4rem rgba(200, 200, 200, 0.08))
+    drop-shadow(0 0.6rem 0.6rem rgba(200, 200, 200, 0.06)) drop-shadow(0 1.2rem 1rem rgba(200, 200, 200, 0.04));
 
   /* Adjust shadows for dark mode */
   --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
@@ -557,30 +562,29 @@
   --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4);
   --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.4);
 
-  --tools-text-and-icon-color: #D0D6DC;
+  --tools-text-and-icon-color: #d0d6dc;
 
   /* Tool picker sticky header variables (dark mode) */
-  --tool-header-bg: #2A2F36;
-  --tool-header-border: #3A4047;
-  --tool-header-text: #D0D6DC;
-  --tool-header-badge-bg: #4B525A;
-  --tool-header-badge-text: #FFFFFF;
+  --tool-header-bg: #2a2f36;
+  --tool-header-border: #3a4047;
+  --tool-header-text: #d0d6dc;
+  --tool-header-badge-bg: #4b525a;
+  --tool-header-badge-text: #ffffff;
 
   /* Subcategory title styling (dark mode) */
-  --tool-subcategory-text-color: #9CA3AF; /* lighter text in dark mode as well */
-  --tool-subcategory-rule-color: #3A4047; /* doubly lighter (relative) line in dark */
-
+  --tool-subcategory-text-color: #9ca3af; /* lighter text in dark mode as well */
+  --tool-subcategory-rule-color: #3a4047; /* doubly lighter (relative) line in dark */
 
   /* PDF text selection colors (dark mode) */
   --pdf-selection-bg: rgba(96, 165, 250, 0.25);
   --pdf-selection-ring: rgba(96, 165, 250, 0.28);
 
   /* Placeholder text colors (dark mode) */
-  --search-text-and-icon-color: #FFFFFF !important;
+  --search-text-and-icon-color: #ffffff !important;
 
   /* Tool panel search bar background colors (dark mode) */
-  --tool-panel-search-bg: #1F2329;
-  --tool-panel-search-border-bottom: #4B525A;
+  --tool-panel-search-bg: #1f2329;
+  --tool-panel-search-border-bottom: #4b525a;
 
   --information-text-bg: #292e34;
   --information-text-color: #ececec;
@@ -590,42 +594,42 @@
   --bulk-card-bg: var(--bg-raised); /* dark background for cards */
   --bulk-card-border: var(--border-default); /* default border for cards and buttons */
   --bulk-card-hover-border: var(--border-strong); /* stronger border on hover */
-  --unsupported-bar-bg: #1F2329;
-  --unsupported-bar-border: #4B525A;
+  --unsupported-bar-bg: #1f2329;
+  --unsupported-bar-border: #4b525a;
 
   /* Config Modal colors (dark mode) */
-  --modal-nav-bg: #1F2329;
-  --modal-nav-section-title: #9CA3AF;
-  --modal-nav-item: #D0D6DC;
-  --modal-nav-item-active: #0A8BFF;
+  --modal-nav-bg: #1f2329;
+  --modal-nav-section-title: #9ca3af;
+  --modal-nav-item: #d0d6dc;
+  --modal-nav-item-active: #0a8bff;
   --modal-nav-item-active-bg: rgba(10, 139, 255, 0.15);
-  --modal-content-bg: #2A2F36;
+  --modal-content-bg: #2a2f36;
   --modal-header-border: rgba(255, 255, 255, 0.08);
 
   /* Onboarding (dark mode) */
-  --onboarding-title: #F9FAFB;
-  --onboarding-body: #D1D5DB;
-  --onboarding-primary-button-bg: #FFFFFF;
-  --onboarding-primary-button-text: #0B1220;
+  --onboarding-title: #f9fafb;
+  --onboarding-body: #d1d5db;
+  --onboarding-primary-button-bg: #ffffff;
+  --onboarding-primary-button-text: #0b1220;
   --onboarding-secondary-button-bg: transparent;
-  --onboarding-secondary-button-text: #E5E7EB;
-  --onboarding-secondary-button-border: #3A4047;
-  --onboarding-step-active: #E5E7EB;
-  --onboarding-step-inactive: #4B5563;
+  --onboarding-secondary-button-text: #e5e7eb;
+  --onboarding-secondary-button-border: #3a4047;
+  --onboarding-step-active: #e5e7eb;
+  --onboarding-step-inactive: #4b5563;
   /* API Keys section colors (dark mode) */
-  --api-keys-card-bg: #2A2F36;
-  --api-keys-card-border: #3A4047;
+  --api-keys-card-bg: #2a2f36;
+  --api-keys-card-border: #3a4047;
   --api-keys-card-shadow: none;
-  --api-keys-input-bg: #1F2329;
-  --api-keys-input-border: #3A4047;
-  --api-keys-button-bg: #3A4047;
-  --api-keys-button-color: #D0D6DC;
+  --api-keys-input-bg: #1f2329;
+  --api-keys-input-border: #3a4047;
+  --api-keys-button-bg: #3a4047;
+  --api-keys-button-color: #d0d6dc;
 
   /* Code token colors (dark mode - Cursor-like) */
-  --code-kw-color: #C792EA;   /* purple */
-  --code-str-color: #C3E88D;  /* green */
-  --code-num-color: #F78C6C;  /* orange */
-  --code-com-color: #697098;  /* muted gray-blue */
+  --code-kw-color: #c792ea; /* purple */
+  --code-str-color: #c3e88d; /* green */
+  --code-num-color: #f78c6c; /* orange */
+  --code-com-color: #697098; /* muted gray-blue */
   /* Compare tool specific colors (dark mode) - only for colors that don't have existing theme pairs */
   --compare-upload-dropzone-bg: rgba(31, 35, 41, 0.45);
   --compare-upload-dropzone-border: rgba(75, 85, 99, 0.6);
@@ -634,7 +638,7 @@
   --compare-upload-divider: rgba(75, 85, 99, 0.5);
 
   /* Compare page label chip (dark mode): slightly darker than surrounding rows */
-  --compare-page-label-bg: #1F2329;
+  --compare-page-label-bg: #1f2329;
   --compare-page-label-fg: var(--text-secondary);
 }
 
@@ -660,11 +664,11 @@
 
 /* Plan section button colors */
 .plan-button:not(:disabled):not([data-disabled]) {
-  background-color: #0A8BFF !important;
+  background-color: #0a8bff !important;
 }
 
 [data-mantine-color-scheme="dark"] .plan-button:not(:disabled):not([data-disabled]) {
-  background-color: #1C598E !important;
+  background-color: #1c598e !important;
 }
 
 /* Lighter grey for disabled plan buttons */
@@ -717,37 +721,31 @@
 
 /* Smooth transitions for theme switching */
 * {
-  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+  transition:
+    background-color 0.2s ease,
+    border-color 0.2s ease,
+    color 0.2s ease;
 }
 /* ── PDF Link Overlay (viewer) ── */
 :root {
   --link-hover-bg: rgba(10, 139, 255, 0.04);
   --link-hover-border: rgba(10, 139, 255, 0.15);
-  --link-hover-shadow:
-    0 0 0 0.5px rgba(10, 139, 255, 0.05),
-    0 1px 3px rgba(10, 139, 255, 0.04);
+  --link-hover-shadow: 0 0 0 0.5px rgba(10, 139, 255, 0.05), 0 1px 3px rgba(10, 139, 255, 0.04);
   --link-focus-ring: rgba(10, 139, 255, 0.25);
   --link-toolbar-bg: rgba(15, 23, 42, 0.88);
   --link-toolbar-border: rgba(255, 255, 255, 0.1);
-  --link-toolbar-shadow:
-    0 12px 40px rgba(0, 0, 0, 0.2),
-    0 4px 12px rgba(0, 0, 0, 0.16),
-    0 0 0 0.5px rgba(255, 255, 255, 0.05);
+  --link-toolbar-shadow: 0 12px 40px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.16), 0 0 0 0.5px rgba(255, 255, 255, 0.05);
 }
 
 [data-mantine-color-scheme="dark"] {
   --link-hover-bg: rgba(10, 139, 255, 0.06);
   --link-hover-border: rgba(59, 170, 255, 0.2);
-  --link-hover-shadow:
-    0 0 0 0.5px rgba(59, 170, 255, 0.1),
-    0 1px 3px rgba(10, 139, 255, 0.08);
+  --link-hover-shadow: 0 0 0 0.5px rgba(59, 170, 255, 0.1), 0 1px 3px rgba(10, 139, 255, 0.08);
   --link-focus-ring: rgba(59, 170, 255, 0.3);
   --link-toolbar-bg: rgba(15, 23, 42, 0.92);
   --link-toolbar-border: rgba(255, 255, 255, 0.08);
   --link-toolbar-shadow:
-    0 12px 40px rgba(0, 0, 0, 0.35),
-    0 4px 12px rgba(0, 0, 0, 0.25),
-    0 0 0 0.5px rgba(255, 255, 255, 0.04);
+    0 12px 40px rgba(0, 0, 0, 0.35), 0 4px 12px rgba(0, 0, 0, 0.25), 0 0 0 0.5px rgba(255, 255, 255, 0.04);
 }
 
 /* ── Link hit-area ── */
@@ -846,7 +844,13 @@
   border: none;
   background: transparent;
   color: rgba(255, 255, 255, 0.9);
-  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  font-family:
+    Inter,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    sans-serif;
   font-size: 11.5px;
   font-weight: 500;
   letter-spacing: 0.01em;
@@ -896,7 +900,7 @@
 }
 
 .pdf-link-toolbar-btn--delete:hover {
-  background: rgba(239, 68, 68, 0.20);
+  background: rgba(239, 68, 68, 0.2);
   color: #f87171;
 }
 
@@ -907,7 +911,7 @@
 .pdf-link-toolbar-sep {
   width: 1px;
   height: 16px;
-  background: rgba(255, 255, 255, 0.10);
+  background: rgba(255, 255, 255, 0.1);
   flex-shrink: 0;
 }
 
diff --git a/frontend/src/core/styles/zIndex.ts b/frontend/src/core/styles/zIndex.ts
index 86f0df1fe6..d58b8503cf 100644
--- a/frontend/src/core/styles/zIndex.ts
+++ b/frontend/src/core/styles/zIndex.ts
@@ -33,5 +33,3 @@ export const Z_INDEX_SIGNATURE_DRAG_BLOCKER = 999;
 export const Z_INDEX_SIGNATURE_OVERLAY = 1000;
 export const Z_INDEX_SIGNATURE_OVERLAY_HANDLE = 1001;
 export const Z_INDEX_SIGNATURE_OVERLAY_DELETE = 1002;
-
-
diff --git a/frontend/src/core/testing/serverExperienceSimulations.ts b/frontend/src/core/testing/serverExperienceSimulations.ts
index ecc8c1d040..d4c10cd796 100644
--- a/frontend/src/core/testing/serverExperienceSimulations.ts
+++ b/frontend/src/core/testing/serverExperienceSimulations.ts
@@ -1,4 +1,4 @@
-import type { AppConfig } from '@app/contexts/AppConfigContext';
+import type { AppConfig } from "@app/contexts/AppConfigContext";
 
 interface LicenseInfo {
   licenseType: string;
@@ -30,7 +30,7 @@ const DEV_TESTING_MODE = false;
 const SIMULATION_INDEX = 0;
 
 const FREE_LICENSE_INFO: LicenseInfo = {
-  licenseType: 'NORMAL',
+  licenseType: "NORMAL",
   enabled: false,
   maxUsers: 5,
   hasKey: false,
@@ -38,7 +38,7 @@ const FREE_LICENSE_INFO: LicenseInfo = {
 
 const BASE_NO_LOGIN_CONFIG: AppConfig = {
   enableAnalytics: true,
-  appVersion: '2.9.2',
+  appVersion: "2.9.2",
   serverCertificateEnabled: false,
   enableAlphaFunctionality: false,
   serverPort: 8080,
@@ -48,9 +48,9 @@ const BASE_NO_LOGIN_CONFIG: AppConfig = {
   enableLogin: false,
   activeSecurity: false,
   languages: [],
-  contextPath: '/',
-  license: 'NORMAL',
-  baseUrl: 'http://localhost',
+  contextPath: "/",
+  license: "NORMAL",
+  baseUrl: "http://localhost",
   enableEmailInvites: true,
 };
 
@@ -62,12 +62,12 @@ const BASE_LOGIN_CONFIG: AppConfig = {
 
 const SIMULATION_SCENARIOS: SimulationScenario[] = [
   {
-    label: 'no-login-user-under-limit (no-license)',
+    label: "no-login-user-under-limit (no-license)",
     appConfig: {
       ...BASE_NO_LOGIN_CONFIG,
     },
     wau: {
-      trackingSince: '2025-11-18T23:20:12.520884200Z',
+      trackingSince: "2025-11-18T23:20:12.520884200Z",
       daysOnline: 0,
       totalUniqueBrowsers: 3,
       weeklyActiveUsers: 3,
@@ -75,12 +75,12 @@ const SIMULATION_SCENARIOS: SimulationScenario[] = [
     licenseInfo: { ...FREE_LICENSE_INFO },
   },
   {
-    label: 'no-login-admin-under-limit (no-license)',
+    label: "no-login-admin-under-limit (no-license)",
     appConfig: {
       ...BASE_NO_LOGIN_CONFIG,
     },
     wau: {
-      trackingSince: '2025-10-01T00:00:00Z',
+      trackingSince: "2025-10-01T00:00:00Z",
       daysOnline: 14,
       totalUniqueBrowsers: 4,
       weeklyActiveUsers: 4,
@@ -88,12 +88,12 @@ const SIMULATION_SCENARIOS: SimulationScenario[] = [
     licenseInfo: { ...FREE_LICENSE_INFO },
   },
   {
-    label: 'no-login-user-over-limit (no-license)',
+    label: "no-login-user-over-limit (no-license)",
     appConfig: {
       ...BASE_NO_LOGIN_CONFIG,
     },
     wau: {
-      trackingSince: '2025-09-01T00:00:00Z',
+      trackingSince: "2025-09-01T00:00:00Z",
       daysOnline: 30,
       totalUniqueBrowsers: 12,
       weeklyActiveUsers: 9,
@@ -101,12 +101,12 @@ const SIMULATION_SCENARIOS: SimulationScenario[] = [
     licenseInfo: { ...FREE_LICENSE_INFO },
   },
   {
-    label: 'no-login-admin-over-limit (no-license)',
+    label: "no-login-admin-over-limit (no-license)",
     appConfig: {
       ...BASE_NO_LOGIN_CONFIG,
     },
     wau: {
-      trackingSince: '2025-08-15T00:00:00Z',
+      trackingSince: "2025-08-15T00:00:00Z",
       daysOnline: 45,
       totalUniqueBrowsers: 18,
       weeklyActiveUsers: 12,
@@ -114,7 +114,7 @@ const SIMULATION_SCENARIOS: SimulationScenario[] = [
     licenseInfo: { ...FREE_LICENSE_INFO },
   },
   {
-    label: 'login-user-under-limit (no-license)',
+    label: "login-user-under-limit (no-license)",
     appConfig: {
       ...BASE_LOGIN_CONFIG,
       isAdmin: false,
@@ -125,7 +125,7 @@ const SIMULATION_SCENARIOS: SimulationScenario[] = [
     licenseInfo: { ...FREE_LICENSE_INFO },
   },
   {
-    label: 'login-admin-under-limit (no-license)',
+    label: "login-admin-under-limit (no-license)",
     appConfig: {
       ...BASE_LOGIN_CONFIG,
       isAdmin: true,
@@ -136,7 +136,7 @@ const SIMULATION_SCENARIOS: SimulationScenario[] = [
     licenseInfo: { ...FREE_LICENSE_INFO },
   },
   {
-    label: 'login-user-over-limit (no-license)',
+    label: "login-user-over-limit (no-license)",
     appConfig: {
       ...BASE_LOGIN_CONFIG,
       isAdmin: false,
@@ -147,7 +147,7 @@ const SIMULATION_SCENARIOS: SimulationScenario[] = [
     licenseInfo: { ...FREE_LICENSE_INFO },
   },
   {
-    label: 'login-admin-over-limit (no-license)',
+    label: "login-admin-over-limit (no-license)",
     appConfig: {
       ...BASE_LOGIN_CONFIG,
       isAdmin: true,
@@ -165,7 +165,7 @@ function getActiveScenario(): SimulationScenario | null {
   }
   const scenario = SIMULATION_SCENARIOS[SIMULATION_INDEX];
   if (!scenario) {
-    console.warn('[Simulation] SIMULATION_INDEX out of range, using live backend.');
+    console.warn("[Simulation] SIMULATION_INDEX out of range, using live backend.");
     return null;
   }
   console.warn(`[Simulation] Using scenario #${SIMULATION_INDEX} (${scenario.label}).`);
@@ -189,4 +189,3 @@ export function getSimulatedLicenseInfo(): LicenseInfo | null {
 }
 
 export const DEV_TESTING_ENABLED = DEV_TESTING_MODE;
-
diff --git a/frontend/src/core/tests/certValidation/CertificateValidationE2E.spec.ts b/frontend/src/core/tests/certValidation/CertificateValidationE2E.spec.ts
index cf15ec084f..176a2f4bab 100644
--- a/frontend/src/core/tests/certValidation/CertificateValidationE2E.spec.ts
+++ b/frontend/src/core/tests/certValidation/CertificateValidationE2E.spec.ts
@@ -1,23 +1,23 @@
-import { test, expect, type Page } from '@playwright/test';
-import path from 'path';
+import { test, expect, type Page } from "@playwright/test";
+import path from "path";
 
 // ---------------------------------------------------------------------------
 // Test fixtures — pre-generated keystores in test-fixtures/certs/
 // ---------------------------------------------------------------------------
-const CERTS_DIR = path.join(__dirname, '../test-fixtures/certs');
-const VALID_P12 = path.join(CERTS_DIR, 'valid-test.p12');
-const EXPIRED_P12 = path.join(CERTS_DIR, 'expired-test.p12');
-const NOT_YET_VALID_P12 = path.join(CERTS_DIR, 'not-yet-valid-test.p12');
-const VALID_JKS = path.join(CERTS_DIR, 'valid-test.jks');
+const CERTS_DIR = path.join(__dirname, "../test-fixtures/certs");
+const VALID_P12 = path.join(CERTS_DIR, "valid-test.p12");
+const EXPIRED_P12 = path.join(CERTS_DIR, "expired-test.p12");
+const NOT_YET_VALID_P12 = path.join(CERTS_DIR, "not-yet-valid-test.p12");
+const VALID_JKS = path.join(CERTS_DIR, "valid-test.jks");
 
 // ---------------------------------------------------------------------------
 // Stable mock data returned by the mocked backend
 // ---------------------------------------------------------------------------
 const MOCK_SESSION = {
-  sessionId: 'test-session-id',
-  documentName: 'test-document.pdf',
-  status: 'IN_PROGRESS',
-  ownerUsername: 'test-owner',
+  sessionId: "test-session-id",
+  documentName: "test-document.pdf",
+  status: "IN_PROGRESS",
+  ownerUsername: "test-owner",
   message: null,
   dueDate: null,
   participants: [],
@@ -25,10 +25,10 @@ const MOCK_SESSION = {
 
 const MOCK_PARTICIPANT = {
   id: 1,
-  email: 'test@example.com',
-  name: 'Test User',
-  status: 'PENDING',
-  shareToken: 'test-token',
+  email: "test@example.com",
+  name: "Test User",
+  status: "PENDING",
+  shareToken: "test-token",
   expiresAt: null,
   hasCompleted: false,
   isExpired: false,
@@ -40,30 +40,26 @@ const MOCK_PARTICIPANT = {
 // ---------------------------------------------------------------------------
 async function mockParticipantApis(page: Page) {
   // Mock auth so AppProviders/Landing don't redirect to /login
-  await page.route('**/api/v1/auth/me', (route) =>
+  await page.route("**/api/v1/auth/me", (route) =>
     route.fulfill({
       json: {
         id: 1,
-        username: 'testuser',
-        email: 'test@example.com',
-        roles: ['ROLE_USER'],
+        username: "testuser",
+        email: "test@example.com",
+        roles: ["ROLE_USER"],
       },
-    })
+    }),
   );
 
-  await page.route('**/api/v1/workflow/participant/session**', (route) =>
-    route.fulfill({ json: MOCK_SESSION })
-  );
-  await page.route('**/api/v1/workflow/participant/details**', (route) =>
-    route.fulfill({ json: MOCK_PARTICIPANT })
-  );
+  await page.route("**/api/v1/workflow/participant/session**", (route) => route.fulfill({ json: MOCK_SESSION }));
+  await page.route("**/api/v1/workflow/participant/details**", (route) => route.fulfill({ json: MOCK_PARTICIPANT }));
   // Minimal stub so the download-document call doesn't throw
-  await page.route('**/api/v1/workflow/participant/document**', (route) =>
+  await page.route("**/api/v1/workflow/participant/document**", (route) =>
     route.fulfill({
       status: 200,
-      contentType: 'application/pdf',
+      contentType: "application/pdf",
       body: Buffer.alloc(128),
-    })
+    }),
   );
 }
 
@@ -72,8 +68,8 @@ async function mockParticipantApis(page: Page) {
 // the matching option — Mantine renders a custom combobox, not a native select.
 // ---------------------------------------------------------------------------
 async function selectCertType(page: Page, label: string) {
-  await page.getByTestId('cert-type-select').click();
-  await page.getByRole('option', { name: label }).click();
+  await page.getByTestId("cert-type-select").click();
+  await page.getByRole("option", { name: label }).click();
 }
 
 // ---------------------------------------------------------------------------
@@ -82,7 +78,7 @@ async function selectCertType(page: Page, label: string) {
 async function uploadCertFile(page: Page, filePath: string) {
   // Mantine FileInput uses a visually hidden <input type="file">.
   // We click the visible button to expose it, then set files via the hidden input.
-  const certFileInput = page.getByTestId('cert-file-input');
+  const certFileInput = page.getByTestId("cert-file-input");
   await certFileInput.click();
   // After click, the file chooser or the hidden input becomes interactive.
   // Use the first file input on the page (Mantine places it near the button).
@@ -93,41 +89,41 @@ async function uploadCertFile(page: Page, filePath: string) {
 // ---------------------------------------------------------------------------
 // Tests
 // ---------------------------------------------------------------------------
-test.describe('Certificate Validation — ParticipantView', () => {
+test.describe("Certificate Validation — ParticipantView", () => {
   test.beforeEach(async ({ page }) => {
     await mockParticipantApis(page);
   });
 
   // 1. Happy path — valid P12
   test('valid P12 cert shows green "Certificate valid until" feedback', async ({ page }) => {
-    await page.route('**/api/v1/workflow/participant/validate-certificate', (route) =>
+    await page.route("**/api/v1/workflow/participant/validate-certificate", (route) =>
       route.fulfill({
         json: {
           valid: true,
-          subjectName: 'Test Signer',
-          notAfter: '2027-01-01T00:00:00Z',
-          notBefore: '2025-01-01T00:00:00Z',
+          subjectName: "Test Signer",
+          notAfter: "2027-01-01T00:00:00Z",
+          notBefore: "2025-01-01T00:00:00Z",
           selfSigned: true,
           error: null,
         },
-      })
+      }),
     );
 
-    await page.goto('/workflow/sign/test-token');
+    await page.goto("/workflow/sign/test-token");
     await page.waitForSelector('[data-testid="submit-signature-button"]');
 
     await uploadCertFile(page, VALID_P12);
-    await page.getByTestId('cert-password-input').fill('testpass');
+    await page.getByTestId("cert-password-input").fill("testpass");
 
     // Wait for debounce (600 ms) + network round-trip
-    const feedback = page.getByTestId('cert-validation-feedback');
-    await expect(feedback).toContainText('Certificate valid until', { timeout: 5000 });
-    await expect(feedback).toContainText('Test Signer');
+    const feedback = page.getByTestId("cert-validation-feedback");
+    await expect(feedback).toContainText("Certificate valid until", { timeout: 5000 });
+    await expect(feedback).toContainText("Test Signer");
   });
 
   // 2. Wrong password — red error
-  test('wrong password shows red error message', async ({ page }) => {
-    await page.route('**/api/v1/workflow/participant/validate-certificate', (route) =>
+  test("wrong password shows red error message", async ({ page }) => {
+    await page.route("**/api/v1/workflow/participant/validate-certificate", (route) =>
       route.fulfill({
         json: {
           valid: false,
@@ -135,24 +131,24 @@ test.describe('Certificate Validation — ParticipantView', () => {
           notAfter: null,
           notBefore: null,
           selfSigned: false,
-          error: 'Invalid certificate password or corrupt keystore file',
+          error: "Invalid certificate password or corrupt keystore file",
         },
-      })
+      }),
     );
 
-    await page.goto('/workflow/sign/test-token');
+    await page.goto("/workflow/sign/test-token");
     await page.waitForSelector('[data-testid="submit-signature-button"]');
 
     await uploadCertFile(page, VALID_P12);
-    await page.getByTestId('cert-password-input').fill('wrongpass');
+    await page.getByTestId("cert-password-input").fill("wrongpass");
 
-    const feedback = page.getByTestId('cert-validation-feedback');
-    await expect(feedback).toContainText('Invalid certificate password', { timeout: 5000 });
+    const feedback = page.getByTestId("cert-validation-feedback");
+    await expect(feedback).toContainText("Invalid certificate password", { timeout: 5000 });
   });
 
   // 3. Expired certificate
   test('expired cert shows "Certificate has expired" error', async ({ page }) => {
-    await page.route('**/api/v1/workflow/participant/validate-certificate', (route) =>
+    await page.route("**/api/v1/workflow/participant/validate-certificate", (route) =>
       route.fulfill({
         json: {
           valid: false,
@@ -160,24 +156,24 @@ test.describe('Certificate Validation — ParticipantView', () => {
           notAfter: null,
           notBefore: null,
           selfSigned: false,
-          error: 'Certificate has expired (expired: 2023-01-02 00:00:00 UTC)',
+          error: "Certificate has expired (expired: 2023-01-02 00:00:00 UTC)",
         },
-      })
+      }),
     );
 
-    await page.goto('/workflow/sign/test-token');
+    await page.goto("/workflow/sign/test-token");
     await page.waitForSelector('[data-testid="submit-signature-button"]');
 
     await uploadCertFile(page, EXPIRED_P12);
-    await page.getByTestId('cert-password-input').fill('testpass');
+    await page.getByTestId("cert-password-input").fill("testpass");
 
-    const feedback = page.getByTestId('cert-validation-feedback');
-    await expect(feedback).toContainText('Certificate has expired', { timeout: 5000 });
+    const feedback = page.getByTestId("cert-validation-feedback");
+    await expect(feedback).toContainText("Certificate has expired", { timeout: 5000 });
   });
 
   // 4. Not-yet-valid certificate
   test('not-yet-valid cert shows "not yet valid" error', async ({ page }) => {
-    await page.route('**/api/v1/workflow/participant/validate-certificate', (route) =>
+    await page.route("**/api/v1/workflow/participant/validate-certificate", (route) =>
       route.fulfill({
         json: {
           valid: false,
@@ -185,46 +181,46 @@ test.describe('Certificate Validation — ParticipantView', () => {
           notAfter: null,
           notBefore: null,
           selfSigned: false,
-          error: 'Certificate is not yet valid (valid from: 2027-01-01 00:00:00 UTC)',
+          error: "Certificate is not yet valid (valid from: 2027-01-01 00:00:00 UTC)",
         },
-      })
+      }),
     );
 
-    await page.goto('/workflow/sign/test-token');
+    await page.goto("/workflow/sign/test-token");
     await page.waitForSelector('[data-testid="submit-signature-button"]');
 
     await uploadCertFile(page, NOT_YET_VALID_P12);
-    await page.getByTestId('cert-password-input').fill('testpass');
+    await page.getByTestId("cert-password-input").fill("testpass");
 
-    const feedback = page.getByTestId('cert-validation-feedback');
-    await expect(feedback).toContainText('not yet valid', { timeout: 5000 });
+    const feedback = page.getByTestId("cert-validation-feedback");
+    await expect(feedback).toContainText("not yet valid", { timeout: 5000 });
   });
 
   // 5. Submit button disabled while validating
-  test('submit button is disabled while validation is in flight', async ({ page }) => {
+  test("submit button is disabled while validation is in flight", async ({ page }) => {
     // Slow response so we can assert the disabled state mid-flight
-    await page.route('**/api/v1/workflow/participant/validate-certificate', async (route) => {
+    await page.route("**/api/v1/workflow/participant/validate-certificate", async (route) => {
       await new Promise((r) => setTimeout(r, 1500));
       await route.fulfill({
         json: {
           valid: true,
-          subjectName: 'Test Signer',
-          notAfter: '2027-01-01T00:00:00Z',
-          notBefore: '2025-01-01T00:00:00Z',
+          subjectName: "Test Signer",
+          notAfter: "2027-01-01T00:00:00Z",
+          notBefore: "2025-01-01T00:00:00Z",
           selfSigned: true,
           error: null,
         },
       });
     });
 
-    await page.goto('/workflow/sign/test-token');
+    await page.goto("/workflow/sign/test-token");
     await page.waitForSelector('[data-testid="submit-signature-button"]');
 
     await uploadCertFile(page, VALID_P12);
-    await page.getByTestId('cert-password-input').fill('testpass');
+    await page.getByTestId("cert-password-input").fill("testpass");
 
     // Shortly after typing, validation is in flight — button must be disabled
-    const submitBtn = page.getByTestId('submit-signature-button');
+    const submitBtn = page.getByTestId("submit-signature-button");
     await expect(submitBtn).toBeDisabled({ timeout: 3000 });
 
     // After validation completes the button should be re-enabled
@@ -232,49 +228,49 @@ test.describe('Certificate Validation — ParticipantView', () => {
   });
 
   // 6. SERVER type — no validation call made, button stays enabled
-  test('SERVER cert type skips validation and keeps submit enabled', async ({ page }) => {
+  test("SERVER cert type skips validation and keeps submit enabled", async ({ page }) => {
     let validateCalled = false;
-    await page.route('**/api/v1/workflow/participant/validate-certificate', (route) => {
+    await page.route("**/api/v1/workflow/participant/validate-certificate", (route) => {
       validateCalled = true;
       return route.fulfill({ json: { valid: true } });
     });
 
-    await page.goto('/workflow/sign/test-token');
+    await page.goto("/workflow/sign/test-token");
     await page.waitForSelector('[data-testid="submit-signature-button"]');
 
-    await selectCertType(page, 'Server Certificate (if available)');
+    await selectCertType(page, "Server Certificate (if available)");
 
     // Wait longer than debounce to confirm no call is made
     await page.waitForTimeout(1000);
 
     expect(validateCalled).toBe(false);
-    await expect(page.getByTestId('submit-signature-button')).toBeEnabled();
+    await expect(page.getByTestId("submit-signature-button")).toBeEnabled();
   });
 
   // 7. Bonus — valid JKS keystore
-  test('valid JKS keystore shows green feedback', async ({ page }) => {
-    await page.route('**/api/v1/workflow/participant/validate-certificate', (route) =>
+  test("valid JKS keystore shows green feedback", async ({ page }) => {
+    await page.route("**/api/v1/workflow/participant/validate-certificate", (route) =>
       route.fulfill({
         json: {
           valid: true,
-          subjectName: 'JKS Signer',
-          notAfter: '2027-01-01T00:00:00Z',
-          notBefore: '2025-01-01T00:00:00Z',
+          subjectName: "JKS Signer",
+          notAfter: "2027-01-01T00:00:00Z",
+          notBefore: "2025-01-01T00:00:00Z",
           selfSigned: true,
           error: null,
         },
-      })
+      }),
     );
 
-    await page.goto('/workflow/sign/test-token');
+    await page.goto("/workflow/sign/test-token");
     await page.waitForSelector('[data-testid="submit-signature-button"]');
 
-    await selectCertType(page, 'JKS Keystore');
+    await selectCertType(page, "JKS Keystore");
     await uploadCertFile(page, VALID_JKS);
-    await page.getByTestId('cert-password-input').fill('jkspass');
+    await page.getByTestId("cert-password-input").fill("jkspass");
 
-    const feedback = page.getByTestId('cert-validation-feedback');
-    await expect(feedback).toContainText('Certificate valid until', { timeout: 5000 });
-    await expect(feedback).toContainText('JKS Signer');
+    const feedback = page.getByTestId("cert-validation-feedback");
+    await expect(feedback).toContainText("Certificate valid until", { timeout: 5000 });
+    await expect(feedback).toContainText("JKS Signer");
   });
 });
diff --git a/frontend/src/core/tests/convert/ConvertE2E.spec.ts b/frontend/src/core/tests/convert/ConvertE2E.spec.ts
index 0fe33854db..472cf9c9ff 100644
--- a/frontend/src/core/tests/convert/ConvertE2E.spec.ts
+++ b/frontend/src/core/tests/convert/ConvertE2E.spec.ts
@@ -5,23 +5,40 @@
  * The Vite dev server must be running (handled by playwright.config.ts webServer).
  */
 
-import { test, expect, type Page } from '@playwright/test';
-import path from 'path';
+import { test, expect, type Page } from "@playwright/test";
+import path from "path";
 
-const FIXTURES_DIR = path.join(__dirname, '../test-fixtures');
-const SAMPLE_PDF = path.join(FIXTURES_DIR, 'sample.pdf');
+const FIXTURES_DIR = path.join(__dirname, "../test-fixtures");
+const SAMPLE_PDF = path.join(FIXTURES_DIR, "sample.pdf");
 
 // ---------------------------------------------------------------------------
 // Endpoint availability map — all conversion endpoints enabled
 // ---------------------------------------------------------------------------
 const MOCK_ENDPOINTS_AVAILABILITY = Object.fromEntries(
   [
-    'pdf-to-img', 'img-to-pdf', 'pdf-to-word', 'file-to-pdf', 'pdf-to-text',
-    'pdf-to-html', 'pdf-to-xml', 'pdf-to-csv', 'pdf-to-xlsx', 'pdf-to-pdfa',
-    'pdf-to-pdfx', 'pdf-to-presentation', 'pdf-to-markdown', 'pdf-to-cbz',
-    'pdf-to-cbr', 'pdf-to-epub', 'html-to-pdf', 'svg-to-pdf', 'markdown-to-pdf',
-    'eml-to-pdf', 'cbz-to-pdf', 'cbr-to-pdf',
-  ].map((k) => [k, { enabled: true }])
+    "pdf-to-img",
+    "img-to-pdf",
+    "pdf-to-word",
+    "file-to-pdf",
+    "pdf-to-text",
+    "pdf-to-html",
+    "pdf-to-xml",
+    "pdf-to-csv",
+    "pdf-to-xlsx",
+    "pdf-to-pdfa",
+    "pdf-to-pdfx",
+    "pdf-to-presentation",
+    "pdf-to-markdown",
+    "pdf-to-cbz",
+    "pdf-to-cbr",
+    "pdf-to-epub",
+    "html-to-pdf",
+    "svg-to-pdf",
+    "markdown-to-pdf",
+    "eml-to-pdf",
+    "cbz-to-pdf",
+    "cbr-to-pdf",
+  ].map((k) => [k, { enabled: true }]),
 );
 
 // ---------------------------------------------------------------------------
@@ -29,48 +46,36 @@ const MOCK_ENDPOINTS_AVAILABILITY = Object.fromEntries(
 // ---------------------------------------------------------------------------
 async function mockAppApis(page: Page) {
   // Backend probe — must return UP so Landing shows app in anonymous mode
-  await page.route('**/api/v1/info/status', (route) =>
-    route.fulfill({ json: { status: 'UP' } })
-  );
+  await page.route("**/api/v1/info/status", (route) => route.fulfill({ json: { status: "UP" } }));
 
   // App config — enableLogin:false puts the app in anonymous mode
-  await page.route('**/api/v1/config/app-config', (route) =>
+  await page.route("**/api/v1/config/app-config", (route) =>
     route.fulfill({
-      json: { enableLogin: false, languages: ['en-GB'], defaultLocale: 'en-GB' },
-    })
+      json: { enableLogin: false, languages: ["en-GB"], defaultLocale: "en-GB" },
+    }),
   );
 
   // Auth — fallback if anything calls auth/me
-  await page.route('**/api/v1/auth/me', (route) =>
+  await page.route("**/api/v1/auth/me", (route) =>
     route.fulfill({
-      json: { id: 1, username: 'testuser', email: 'test@example.com', roles: ['ROLE_USER'] },
-    })
+      json: { id: 1, username: "testuser", email: "test@example.com", roles: ["ROLE_USER"] },
+    }),
   );
 
   // Endpoint availability — queried by ConvertSettings
-  await page.route('**/api/v1/config/endpoints-availability', (route) =>
-    route.fulfill({ json: MOCK_ENDPOINTS_AVAILABILITY })
-  );
+  await page.route("**/api/v1/config/endpoints-availability", (route) => route.fulfill({ json: MOCK_ENDPOINTS_AVAILABILITY }));
 
   // Single-endpoint check — queried by Convert.tsx for the execute button
-  await page.route('**/api/v1/config/endpoint-enabled*', (route) =>
-    route.fulfill({ json: true })
-  );
+  await page.route("**/api/v1/config/endpoint-enabled*", (route) => route.fulfill({ json: true }));
 
   // Group-enabled check
-  await page.route('**/api/v1/config/group-enabled*', (route) =>
-    route.fulfill({ json: true })
-  );
+  await page.route("**/api/v1/config/group-enabled*", (route) => route.fulfill({ json: true }));
 
   // Footer info — non-critical
-  await page.route('**/api/v1/ui-data/footer-info', (route) =>
-    route.fulfill({ json: {} })
-  );
+  await page.route("**/api/v1/ui-data/footer-info", (route) => route.fulfill({ json: {} }));
 
   // Proprietary endpoints — silence proxy errors in the Vite dev server
-  await page.route('**/api/v1/proprietary/**', (route) =>
-    route.fulfill({ json: {} })
-  );
+  await page.route("**/api/v1/proprietary/**", (route) => route.fulfill({ json: {} }));
 }
 
 // ---------------------------------------------------------------------------
@@ -79,11 +84,11 @@ async function mockAppApis(page: Page) {
 // onChange handler. Waits for the modal to auto-close after upload.
 // ---------------------------------------------------------------------------
 async function uploadFile(page: Page, filePath: string) {
-  await page.getByTestId('files-button').click();
-  await page.waitForSelector('.mantine-Modal-overlay', { state: 'visible', timeout: 5000 });
+  await page.getByTestId("files-button").click();
+  await page.waitForSelector(".mantine-Modal-overlay", { state: "visible", timeout: 5000 });
   await page.locator('[data-testid="file-input"]').setInputFiles(filePath);
   // Modal auto-closes after file is selected
-  await page.waitForSelector('.mantine-Modal-overlay', { state: 'hidden', timeout: 10000 });
+  await page.waitForSelector(".mantine-Modal-overlay", { state: "hidden", timeout: 10000 });
 }
 
 // ---------------------------------------------------------------------------
@@ -102,83 +107,80 @@ async function navigateToConvert(page: Page) {
 // Opening the TO dropdown renders format-option-{value} buttons in a portal.
 // ---------------------------------------------------------------------------
 async function selectToFormat(page: Page, toValue: string) {
-  await page.getByTestId('convert-to-dropdown').click();
+  await page.getByTestId("convert-to-dropdown").click();
   await page.getByTestId(`format-option-${toValue}`).click();
 }
 
 // ---------------------------------------------------------------------------
 // Tests
 // ---------------------------------------------------------------------------
-test.describe('Convert Tool', () => {
+test.describe("Convert Tool", () => {
   test.beforeEach(async ({ page }) => {
     await mockAppApis(page);
-    await page.goto('/?bypassOnboarding=true');
+    await page.goto("/?bypassOnboarding=true");
     await page.waitForSelector('[data-testid="files-button"]', { timeout: 10000 });
   });
 
-  test('convert button is disabled before a TO format is selected', async ({ page }) => {
+  test("convert button is disabled before a TO format is selected", async ({ page }) => {
     await uploadFile(page, SAMPLE_PDF);
     await navigateToConvert(page);
 
     // FROM is auto-detected as PDF; TO not selected → button visible but disabled
-    const convertBtn = page.getByTestId('convert-button');
+    const convertBtn = page.getByTestId("convert-button");
     await expect(convertBtn).toBeVisible({ timeout: 3000 });
     await expect(convertBtn).toBeDisabled();
   });
 
-  test('successful PDF to PNG conversion shows download option', async ({ page }) => {
+  test("successful PDF to PNG conversion shows download option", async ({ page }) => {
     // Minimal valid PNG header (8 bytes signature + padding)
-    const fakePng = Buffer.from([
-      0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a,
-      ...Array(504).fill(0),
-    ]);
+    const fakePng = Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a, ...Array(504).fill(0)]);
 
-    await page.route('**/api/v1/convert/pdf/img', (route) =>
+    await page.route("**/api/v1/convert/pdf/img", (route) =>
       route.fulfill({
         status: 200,
-        contentType: 'image/png',
-        headers: { 'Content-Disposition': 'attachment; filename="sample.png"' },
+        contentType: "image/png",
+        headers: { "Content-Disposition": 'attachment; filename="sample.png"' },
         body: fakePng,
-      })
+      }),
     );
 
     await uploadFile(page, SAMPLE_PDF);
     await navigateToConvert(page);
-    await selectToFormat(page, 'png');
-    await page.getByTestId('convert-button').click();
+    await selectToFormat(page, "png");
+    await page.getByTestId("convert-button").click();
 
-    await expect(page.getByTestId('download-result-button')).toBeVisible({ timeout: 10000 });
+    await expect(page.getByTestId("download-result-button")).toBeVisible({ timeout: 10000 });
   });
 
-  test('conversion API error shows error notification', async ({ page }) => {
-    await page.route('**/api/v1/convert/pdf/img', (route) =>
+  test("conversion API error shows error notification", async ({ page }) => {
+    await page.route("**/api/v1/convert/pdf/img", (route) =>
       route.fulfill({
         status: 500,
-        contentType: 'text/plain',
-        body: 'Internal server error: conversion failed',
-      })
+        contentType: "text/plain",
+        body: "Internal server error: conversion failed",
+      }),
     );
 
     await uploadFile(page, SAMPLE_PDF);
     await navigateToConvert(page);
-    await selectToFormat(page, 'png');
-    await page.getByTestId('convert-button').click();
+    await selectToFormat(page, "png");
+    await page.getByTestId("convert-button").click();
 
     // Mantine Notification renders as role="alert"
-    await expect(page.getByRole('alert').first()).toBeVisible({ timeout: 5000 });
+    await expect(page.getByRole("alert").first()).toBeVisible({ timeout: 5000 });
   });
 
-  test('convert button becomes enabled after selecting a valid TO format', async ({ page }) => {
+  test("convert button becomes enabled after selecting a valid TO format", async ({ page }) => {
     await uploadFile(page, SAMPLE_PDF);
     await navigateToConvert(page);
 
     // Before selecting TO format — button visible but disabled
-    const convertBtn = page.getByTestId('convert-button');
+    const convertBtn = page.getByTestId("convert-button");
     await expect(convertBtn).toBeVisible({ timeout: 3000 });
     await expect(convertBtn).toBeDisabled();
 
     // After selecting PNG as TO format — button enabled
-    await selectToFormat(page, 'png');
+    await selectToFormat(page, "png");
     await expect(convertBtn).toBeEnabled({ timeout: 3000 });
   });
 });
diff --git a/frontend/src/core/tests/convert/ConvertIntegration.test.tsx b/frontend/src/core/tests/convert/ConvertIntegration.test.tsx
index 7b768ed87a..c0f643fd73 100644
--- a/frontend/src/core/tests/convert/ConvertIntegration.test.tsx
+++ b/frontend/src/core/tests/convert/ConvertIntegration.test.tsx
@@ -9,36 +9,36 @@
  * 5. FileContext integration works correctly
  */
 
-import React from 'react';
-import { describe, test, expect, vi, beforeEach, afterEach, Mock } from 'vitest';
-import { renderHook, act } from '@testing-library/react';
-import { useConvertOperation } from '@app/hooks/tools/convert/useConvertOperation';
-import { ConvertParameters } from '@app/hooks/tools/convert/useConvertParameters';
-import { FileContextProvider } from '@app/contexts/FileContext';
-import { NavigationProvider } from '@app/contexts/NavigationContext';
-import { ToolRegistryProvider } from '@app/contexts/ToolRegistryProvider';
-import { PreferencesProvider } from '@app/contexts/PreferencesContext';
-import { I18nextProvider } from 'react-i18next';
-import i18n from '@app/i18n/config';
-import { createTestStirlingFile } from '@app/tests/utils/testFileHelpers';
-import { StirlingFile } from '@app/types/fileContext';
-import { MantineProvider } from '@mantine/core';
+import React from "react";
+import { describe, test, expect, vi, beforeEach, afterEach, Mock } from "vitest";
+import { renderHook, act } from "@testing-library/react";
+import { useConvertOperation } from "@app/hooks/tools/convert/useConvertOperation";
+import { ConvertParameters } from "@app/hooks/tools/convert/useConvertParameters";
+import { FileContextProvider } from "@app/contexts/FileContext";
+import { NavigationProvider } from "@app/contexts/NavigationContext";
+import { ToolRegistryProvider } from "@app/contexts/ToolRegistryProvider";
+import { PreferencesProvider } from "@app/contexts/PreferencesContext";
+import { I18nextProvider } from "react-i18next";
+import i18n from "@app/i18n/config";
+import { createTestStirlingFile } from "@app/tests/utils/testFileHelpers";
+import { StirlingFile } from "@app/types/fileContext";
+import { MantineProvider } from "@mantine/core";
 
 // Mock axios (for static methods like CancelToken, isCancel)
-vi.mock('axios', () => ({
+vi.mock("axios", () => ({
   default: {
     CancelToken: {
       source: vi.fn(() => ({
-        token: 'mock-cancel-token',
-        cancel: vi.fn()
-      }))
+        token: "mock-cancel-token",
+        cancel: vi.fn(),
+      })),
     },
     isCancel: vi.fn(() => false),
-  }
+  },
 }));
 
 // Mock our apiClient service
-vi.mock('../../services/apiClient', () => ({
+vi.mock("../../services/apiClient", () => ({
   default: {
     post: vi.fn(),
     get: vi.fn(),
@@ -46,18 +46,18 @@ vi.mock('../../services/apiClient', () => ({
     delete: vi.fn(),
     interceptors: {
       response: {
-        use: vi.fn()
-      }
-    }
-  }
+        use: vi.fn(),
+      },
+    },
+  },
 }));
 
 // Import the mocked apiClient
-import apiClient from '@app/services/apiClient';
+import apiClient from "@app/services/apiClient";
 const mockedApiClient = vi.mocked(apiClient);
 
 // Mock only essential services that are actually called by the tests
-vi.mock('../../services/fileStorage', () => ({
+vi.mock("../../services/fileStorage", () => ({
   fileStorage: {
     init: vi.fn().mockResolvedValue(undefined),
     storeFile: vi.fn().mockImplementation((file, thumbnail) => {
@@ -67,26 +67,27 @@ vi.mock('../../services/fileStorage', () => ({
         size: file.size,
         type: file.type,
         lastModified: file.lastModified,
-        thumbnail: thumbnail
+        thumbnail: thumbnail,
       });
     }),
     getAllFileMetadata: vi.fn().mockResolvedValue([]),
-    cleanup: vi.fn().mockResolvedValue(undefined)
-  }
+    cleanup: vi.fn().mockResolvedValue(undefined),
+  },
 }));
 
-vi.mock('../../services/thumbnailGenerationService', () => ({
+vi.mock("../../services/thumbnailGenerationService", () => ({
   thumbnailGenerationService: {
-    generateThumbnail: vi.fn().mockResolvedValue('data:image/png;base64,fake-thumbnail'),
+    generateThumbnail: vi.fn().mockResolvedValue("data:image/png;base64,fake-thumbnail"),
     cleanup: vi.fn(),
-    destroy: vi.fn()
-  }
+    destroy: vi.fn(),
+  },
 }));
 
 // Create realistic test files
 const createPDFFile = (): StirlingFile => {
-  const pdfContent = '%PDF-1.4\n1 0 obj\n<<\n/Type /Catalog\n/Pages 2 0 R\n>>\nendobj\ntrailer\n<<\n/Size 2\n/Root 1 0 R\n>>\nstartxref\n0\n%%EOF';
-  return createTestStirlingFile('test.pdf', pdfContent, 'application/pdf');
+  const pdfContent =
+    "%PDF-1.4\n1 0 obj\n<<\n/Type /Catalog\n/Pages 2 0 R\n>>\nendobj\ntrailer\n<<\n/Size 2\n/Root 1 0 R\n>>\nstartxref\n0\n%%EOF";
+  return createTestStirlingFile("test.pdf", pdfContent, "application/pdf");
 };
 
 // Test wrapper component
@@ -96,9 +97,7 @@ const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
       <PreferencesProvider>
         <ToolRegistryProvider>
           <NavigationProvider>
-            <FileContextProvider>
-              {children}
-            </FileContextProvider>
+            <FileContextProvider>{children}</FileContextProvider>
           </NavigationProvider>
         </ToolRegistryProvider>
       </PreferencesProvider>
@@ -106,8 +105,7 @@ const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
   </MantineProvider>
 );
 
-describe('Convert Tool Integration Tests', () => {
-
+describe("Convert Tool Integration Tests", () => {
   beforeEach(() => {
     vi.clearAllMocks();
     // Setup default apiClient mock
@@ -118,62 +116,61 @@ describe('Convert Tool Integration Tests', () => {
     vi.restoreAllMocks();
   });
 
-  describe('useConvertOperation Integration', () => {
-
-    test('should make correct API call for PDF to PNG conversion', async () => {
-      const mockBlob = new Blob(['fake-image-data'], { type: 'image/png' });
+  describe("useConvertOperation Integration", () => {
+    test("should make correct API call for PDF to PNG conversion", async () => {
+      const mockBlob = new Blob(["fake-image-data"], { type: "image/png" });
       (mockedApiClient.post as Mock).mockResolvedValueOnce({
         data: mockBlob,
         status: 200,
-        statusText: 'OK'
+        statusText: "OK",
       });
 
       const { result } = renderHook(() => useConvertOperation(), {
-        wrapper: TestWrapper
+        wrapper: TestWrapper,
       });
 
       const testFile = createPDFFile();
       const parameters: ConvertParameters = {
-        fromExtension: 'pdf',
-        toExtension: 'png',
+        fromExtension: "pdf",
+        toExtension: "png",
         imageOptions: {
-          colorType: 'color',
+          colorType: "color",
           dpi: 300,
-          singleOrMultiple: 'multiple',
-          fitOption: 'maintainAspectRatio',
+          singleOrMultiple: "multiple",
+          fitOption: "maintainAspectRatio",
           autoRotate: true,
-          combineImages: true
+          combineImages: true,
         },
         isSmartDetection: false,
-        smartDetectionType: 'none',
+        smartDetectionType: "none",
         htmlOptions: {
-          zoomLevel: 0
+          zoomLevel: 0,
         },
         emailOptions: {
           includeAttachments: false,
           maxAttachmentSizeMB: 0,
           downloadHtml: false,
-          includeAllRecipients: false
+          includeAllRecipients: false,
         },
         pdfaOptions: {
-          outputFormat: '',
-          strict: false
+          outputFormat: "",
+          strict: false,
         },
         pdfxOptions: {
-          outputFormat: 'pdfx'
+          outputFormat: "pdfx",
         },
         cbrOptions: {
-          optimizeForEbook: false
+          optimizeForEbook: false,
         },
         pdfToCbrOptions: {
-          dpi: 150
+          dpi: 150,
         },
         cbzOptions: {
-          optimizeForEbook: false
+          optimizeForEbook: false,
         },
         cbzOutputOptions: {
-          dpi: 150
-        }
+          dpi: 150,
+        },
       };
 
       await act(async () => {
@@ -181,82 +178,80 @@ describe('Convert Tool Integration Tests', () => {
       });
 
       // Verify axios was called with correct parameters
-      expect(mockedApiClient.post).toHaveBeenCalledWith(
-        '/api/v1/convert/pdf/img',
-        expect.any(FormData),
-        { responseType: 'blob' }
-      );
+      expect(mockedApiClient.post).toHaveBeenCalledWith("/api/v1/convert/pdf/img", expect.any(FormData), {
+        responseType: "blob",
+      });
 
       // Verify FormData contains correct parameters
       const formDataCall = (mockedApiClient.post as Mock).mock.calls[0][1] as FormData;
-      expect(formDataCall.get('imageFormat')).toBe('png');
-      expect(formDataCall.get('colorType')).toBe('color');
-      expect(formDataCall.get('dpi')).toBe('300');
-      expect(formDataCall.get('singleOrMultiple')).toBe('multiple');
+      expect(formDataCall.get("imageFormat")).toBe("png");
+      expect(formDataCall.get("colorType")).toBe("color");
+      expect(formDataCall.get("dpi")).toBe("300");
+      expect(formDataCall.get("singleOrMultiple")).toBe("multiple");
 
       // Verify hook state updates
       expect(result.current.downloadUrl).toBeTruthy();
-      expect(result.current.downloadFilename).toBe('test.png');
+      expect(result.current.downloadFilename).toBe("test.png");
       expect(result.current.isLoading).toBe(false);
       expect(result.current.errorMessage).toBe(null);
     });
 
-    test('should handle API error responses correctly', async () => {
-      const errorMessage = 'Invalid file format';
+    test("should handle API error responses correctly", async () => {
+      const errorMessage = "Invalid file format";
       (mockedApiClient.post as Mock).mockRejectedValueOnce({
         response: {
           status: 400,
-          data: errorMessage
+          data: errorMessage,
         },
-        message: errorMessage
+        message: errorMessage,
       });
 
       const { result } = renderHook(() => useConvertOperation(), {
-        wrapper: TestWrapper
+        wrapper: TestWrapper,
       });
 
-      const testFile = createTestStirlingFile('invalid.txt', 'not a pdf', 'text/plain');
+      const testFile = createTestStirlingFile("invalid.txt", "not a pdf", "text/plain");
       const parameters: ConvertParameters = {
-        fromExtension: 'pdf',
-        toExtension: 'png',
+        fromExtension: "pdf",
+        toExtension: "png",
         imageOptions: {
-          colorType: 'color',
+          colorType: "color",
           dpi: 300,
-          singleOrMultiple: 'multiple',
-          fitOption: 'maintainAspectRatio',
+          singleOrMultiple: "multiple",
+          fitOption: "maintainAspectRatio",
           autoRotate: true,
-          combineImages: true
+          combineImages: true,
         },
         isSmartDetection: false,
-        smartDetectionType: 'none',
+        smartDetectionType: "none",
         htmlOptions: {
-          zoomLevel: 0
+          zoomLevel: 0,
         },
         emailOptions: {
           includeAttachments: false,
           maxAttachmentSizeMB: 0,
           downloadHtml: false,
-          includeAllRecipients: false
+          includeAllRecipients: false,
         },
         pdfaOptions: {
-          outputFormat: '',
-          strict: false
+          outputFormat: "",
+          strict: false,
         },
         pdfxOptions: {
-          outputFormat: 'pdfx'
+          outputFormat: "pdfx",
         },
         cbrOptions: {
-          optimizeForEbook: false
+          optimizeForEbook: false,
         },
         pdfToCbrOptions: {
-          dpi: 150
+          dpi: 150,
         },
         cbzOptions: {
-          optimizeForEbook: false
+          optimizeForEbook: false,
         },
         cbzOutputOptions: {
-          dpi: 150
-        }
+          dpi: 150,
+        },
       };
 
       await act(async () => {
@@ -269,125 +264,124 @@ describe('Convert Tool Integration Tests', () => {
       expect(result.current.downloadUrl).toBe(null);
     });
 
-    test('should handle network errors gracefully', async () => {
-      (mockedApiClient.post as Mock).mockRejectedValueOnce(new Error('Network error'));
+    test("should handle network errors gracefully", async () => {
+      (mockedApiClient.post as Mock).mockRejectedValueOnce(new Error("Network error"));
 
       const { result } = renderHook(() => useConvertOperation(), {
-        wrapper: TestWrapper
+        wrapper: TestWrapper,
       });
 
       const testFile = createPDFFile();
       const parameters: ConvertParameters = {
-        fromExtension: 'pdf',
-        toExtension: 'png',
+        fromExtension: "pdf",
+        toExtension: "png",
         imageOptions: {
-          colorType: 'color',
+          colorType: "color",
           dpi: 300,
-          singleOrMultiple: 'multiple',
-          fitOption: 'maintainAspectRatio',
+          singleOrMultiple: "multiple",
+          fitOption: "maintainAspectRatio",
           autoRotate: true,
-          combineImages: true
+          combineImages: true,
         },
         isSmartDetection: false,
-        smartDetectionType: 'none',
+        smartDetectionType: "none",
         htmlOptions: {
-          zoomLevel: 0
+          zoomLevel: 0,
         },
         emailOptions: {
           includeAttachments: false,
           maxAttachmentSizeMB: 0,
           downloadHtml: false,
-          includeAllRecipients: false
+          includeAllRecipients: false,
         },
         pdfaOptions: {
-          outputFormat: '',
-          strict: false
+          outputFormat: "",
+          strict: false,
         },
         pdfxOptions: {
-          outputFormat: 'pdfx'
+          outputFormat: "pdfx",
         },
         cbrOptions: {
-          optimizeForEbook: false
+          optimizeForEbook: false,
         },
         pdfToCbrOptions: {
-          dpi: 150
+          dpi: 150,
         },
         cbzOptions: {
-          optimizeForEbook: false
+          optimizeForEbook: false,
         },
         cbzOutputOptions: {
-          dpi: 150
-        }
+          dpi: 150,
+        },
       };
 
       await act(async () => {
         await result.current.executeOperation(parameters, [testFile]);
       });
 
-      expect(result.current.errorMessage).toBe('Network error');
+      expect(result.current.errorMessage).toBe("Network error");
       expect(result.current.isLoading).toBe(false);
     });
   });
 
-  describe('API and Hook Integration', () => {
-
-    test('should correctly map image conversion parameters to API call', async () => {
-      const mockBlob = new Blob(['fake-data'], { type: 'image/jpeg' });
+  describe("API and Hook Integration", () => {
+    test("should correctly map image conversion parameters to API call", async () => {
+      const mockBlob = new Blob(["fake-data"], { type: "image/jpeg" });
       (mockedApiClient.post as Mock).mockResolvedValueOnce({
         data: mockBlob,
         status: 200,
         headers: {
-          'content-type': 'image/jpeg',
-          'content-disposition': 'attachment; filename="test_converted.jpg"'
-        }
+          "content-type": "image/jpeg",
+          "content-disposition": 'attachment; filename="test_converted.jpg"',
+        },
       });
 
       const { result } = renderHook(() => useConvertOperation(), {
-        wrapper: TestWrapper
+        wrapper: TestWrapper,
       });
 
       const testFile = createPDFFile();
       const parameters: ConvertParameters = {
-        fromExtension: 'pdf',
-        toExtension: 'jpg',
+        fromExtension: "pdf",
+        toExtension: "jpg",
         imageOptions: {
-          colorType: 'grayscale',
+          colorType: "grayscale",
           dpi: 150,
-          singleOrMultiple: 'single',
-          fitOption: 'maintainAspectRatio',
+          singleOrMultiple: "single",
+          fitOption: "maintainAspectRatio",
           autoRotate: true,
-          combineImages: true
+          combineImages: true,
         },
         isSmartDetection: false,
-        smartDetectionType: 'none',
+        smartDetectionType: "none",
         htmlOptions: {
-          zoomLevel: 0
+          zoomLevel: 0,
         },
         emailOptions: {
           includeAttachments: false,
           maxAttachmentSizeMB: 0,
           downloadHtml: false,
-          includeAllRecipients: false
+          includeAllRecipients: false,
         },
         pdfaOptions: {
-          outputFormat: '',
-          strict: false
+          outputFormat: "",
+          strict: false,
         },
         pdfxOptions: {
-          outputFormat: 'pdfx'
+          outputFormat: "pdfx",
         },
         cbrOptions: {
-          optimizeForEbook: false
+          optimizeForEbook: false,
         },
         pdfToCbrOptions: {
-          dpi: 150
+          dpi: 150,
         },
         cbzOptions: {
-          optimizeForEbook: false
+          optimizeForEbook: false,
         },
         cbzOutputOptions: {
-          dpi: 150
-        }
+          dpi: 150,
+        },
       };
 
       await act(async () => {
@@ -396,72 +390,72 @@ describe('Convert Tool Integration Tests', () => {
 
       // Verify integration: hook parameters → FormData → axios call → hook state
       const formDataCall = (mockedApiClient.post as Mock).mock.calls[0][1] as FormData;
-      expect(formDataCall.get('imageFormat')).toBe('jpg');
-      expect(formDataCall.get('colorType')).toBe('grayscale');
-      expect(formDataCall.get('dpi')).toBe('150');
-      expect(formDataCall.get('singleOrMultiple')).toBe('single');
+      expect(formDataCall.get("imageFormat")).toBe("jpg");
+      expect(formDataCall.get("colorType")).toBe("grayscale");
+      expect(formDataCall.get("dpi")).toBe("150");
+      expect(formDataCall.get("singleOrMultiple")).toBe("single");
 
       // Verify complete workflow: API response → hook state → FileContext integration
       expect(result.current.downloadUrl).toBeTruthy();
       expect(result.current.files).toHaveLength(1);
-      expect(result.current.files[0].name).toBe('test_converted.jpg');
+      expect(result.current.files[0].name).toBe("test_converted.jpg");
       expect(result.current.isLoading).toBe(false);
     });
 
-    test('should make correct API call for PDF to CSV conversion with simplified workflow', async () => {
-      const mockBlob = new Blob(['fake-csv-data'], { type: 'text/csv' });
+    test("should make correct API call for PDF to CSV conversion with simplified workflow", async () => {
+      const mockBlob = new Blob(["fake-csv-data"], { type: "text/csv" });
       (mockedApiClient.post as Mock).mockResolvedValueOnce({
         data: mockBlob,
         status: 200,
-        statusText: 'OK'
+        statusText: "OK",
       });
 
       const { result } = renderHook(() => useConvertOperation(), {
-        wrapper: TestWrapper
+        wrapper: TestWrapper,
       });
 
       const testFile = createPDFFile();
       const parameters: ConvertParameters = {
-        fromExtension: 'pdf',
-        toExtension: 'csv',
+        fromExtension: "pdf",
+        toExtension: "csv",
         imageOptions: {
-          colorType: 'color',
+          colorType: "color",
           dpi: 300,
-          singleOrMultiple: 'multiple',
-          fitOption: 'maintainAspectRatio',
+          singleOrMultiple: "multiple",
+          fitOption: "maintainAspectRatio",
           autoRotate: true,
-          combineImages: true
+          combineImages: true,
         },
         isSmartDetection: false,
-        smartDetectionType: 'none',
+        smartDetectionType: "none",
         htmlOptions: {
-          zoomLevel: 0
+          zoomLevel: 0,
         },
         emailOptions: {
           includeAttachments: false,
           maxAttachmentSizeMB: 0,
           downloadHtml: false,
-          includeAllRecipients: false
+          includeAllRecipients: false,
         },
         pdfaOptions: {
-          outputFormat: '',
-          strict: false
+          outputFormat: "",
+          strict: false,
         },
         pdfxOptions: {
-          outputFormat: 'pdfx'
+          outputFormat: "pdfx",
         },
         cbrOptions: {
-          optimizeForEbook: false
+          optimizeForEbook: false,
         },
         pdfToCbrOptions: {
-          dpi: 150
+          dpi: 150,
         },
         cbzOptions: {
-          optimizeForEbook: false
+          optimizeForEbook: false,
         },
         cbzOutputOptions: {
-          dpi: 150
-        }
+          dpi: 150,
+        },
       };
 
       await act(async () => {
@@ -469,71 +463,69 @@ describe('Convert Tool Integration Tests', () => {
       });
 
       // Verify correct endpoint is called
-      expect(mockedApiClient.post).toHaveBeenCalledWith(
-        '/api/v1/convert/pdf/csv',
-        expect.any(FormData),
-        { responseType: 'blob' }
-      );
+      expect(mockedApiClient.post).toHaveBeenCalledWith("/api/v1/convert/pdf/csv", expect.any(FormData), {
+        responseType: "blob",
+      });
 
       // Verify FormData contains correct parameters for simplified CSV conversion
       const formDataCall = (mockedApiClient.post as Mock).mock.calls[0][1] as FormData;
-      expect(formDataCall.get('pageNumbers')).toBe('all'); // Always "all" for simplified workflow
-      expect(formDataCall.get('fileInput')).toBe(testFile);
+      expect(formDataCall.get("pageNumbers")).toBe("all"); // Always "all" for simplified workflow
+      expect(formDataCall.get("fileInput")).toBe(testFile);
 
       // Verify hook state updates correctly
       expect(result.current.downloadUrl).toBeTruthy();
-      expect(result.current.downloadFilename).toBe('test.csv');
+      expect(result.current.downloadFilename).toBe("test.csv");
       expect(result.current.isLoading).toBe(false);
       expect(result.current.errorMessage).toBe(null);
     });
 
-    test('should handle complete unsupported conversion workflow', async () => {
+    test("should handle complete unsupported conversion workflow", async () => {
       const { result } = renderHook(() => useConvertOperation(), {
-        wrapper: TestWrapper
+        wrapper: TestWrapper,
       });
 
       const testFile = createPDFFile();
       const parameters: ConvertParameters = {
-        fromExtension: 'pdf',
-        toExtension: 'unsupported',
+        fromExtension: "pdf",
+        toExtension: "unsupported",
         imageOptions: {
-          colorType: 'color',
+          colorType: "color",
           dpi: 300,
-          singleOrMultiple: 'multiple',
-          fitOption: 'maintainAspectRatio',
+          singleOrMultiple: "multiple",
+          fitOption: "maintainAspectRatio",
           autoRotate: true,
-          combineImages: true
+          combineImages: true,
         },
         isSmartDetection: false,
-        smartDetectionType: 'none',
+        smartDetectionType: "none",
         htmlOptions: {
-          zoomLevel: 0
+          zoomLevel: 0,
         },
         emailOptions: {
           includeAttachments: false,
           maxAttachmentSizeMB: 0,
           downloadHtml: false,
-          includeAllRecipients: false
+          includeAllRecipients: false,
         },
         pdfaOptions: {
-          outputFormat: '',
-          strict: false
+          outputFormat: "",
+          strict: false,
         },
         pdfxOptions: {
-          outputFormat: 'pdfx'
+          outputFormat: "pdfx",
         },
         cbrOptions: {
-          optimizeForEbook: false
+          optimizeForEbook: false,
         },
         pdfToCbrOptions: {
-          dpi: 150
+          dpi: 150,
         },
         cbzOptions: {
-          optimizeForEbook: false
+          optimizeForEbook: false,
         },
         cbzOutputOptions: {
-          dpi: 150
-        }
+          dpi: 150,
+        },
       };
 
       await act(async () => {
@@ -542,66 +534,62 @@ describe('Convert Tool Integration Tests', () => {
 
       // Verify integration: utils validation prevents API call, hook shows error
       expect(mockedApiClient.post).not.toHaveBeenCalled();
-      expect(result.current.errorMessage).toContain('Unsupported conversion format');
+      expect(result.current.errorMessage).toContain("Unsupported conversion format");
       expect(result.current.isLoading).toBe(false);
       expect(result.current.downloadUrl).toBe(null);
     });
   });
 
-  describe('File Upload Integration', () => {
-
-    test('should handle multiple file uploads correctly', async () => {
-      const mockBlob = new Blob(['zip-content'], { type: 'application/zip' });
+  describe("File Upload Integration", () => {
+    test("should handle multiple file uploads correctly", async () => {
+      const mockBlob = new Blob(["zip-content"], { type: "application/zip" });
       (mockedApiClient.post as Mock).mockResolvedValueOnce({ data: mockBlob });
 
       const { result } = renderHook(() => useConvertOperation(), {
-        wrapper: TestWrapper
+        wrapper: TestWrapper,
       });
-      const files = [
-        createPDFFile(),
-        createTestStirlingFile('test2.pdf', '%PDF-1.4...', 'application/pdf')
-      ];
+      const files = [createPDFFile(), createTestStirlingFile("test2.pdf", "%PDF-1.4...", "application/pdf")];
       const parameters: ConvertParameters = {
-        fromExtension: 'pdf',
-        toExtension: 'png',
+        fromExtension: "pdf",
+        toExtension: "png",
         imageOptions: {
-          colorType: 'color',
+          colorType: "color",
           dpi: 300,
-          singleOrMultiple: 'multiple',
-          fitOption: 'maintainAspectRatio',
+          singleOrMultiple: "multiple",
+          fitOption: "maintainAspectRatio",
           autoRotate: true,
-          combineImages: true
+          combineImages: true,
         },
         isSmartDetection: false,
-        smartDetectionType: 'none',
+        smartDetectionType: "none",
         htmlOptions: {
-          zoomLevel: 0
+          zoomLevel: 0,
         },
         emailOptions: {
           includeAttachments: false,
           maxAttachmentSizeMB: 0,
           downloadHtml: false,
-          includeAllRecipients: false
+          includeAllRecipients: false,
         },
         pdfaOptions: {
-          outputFormat: '',
-          strict: false
+          outputFormat: "",
+          strict: false,
         },
         pdfxOptions: {
-          outputFormat: 'pdfx'
+          outputFormat: "pdfx",
         },
         cbrOptions: {
-          optimizeForEbook: false
+          optimizeForEbook: false,
         },
         pdfToCbrOptions: {
-          dpi: 150
+          dpi: 150,
         },
         cbzOptions: {
-          optimizeForEbook: false
+          optimizeForEbook: false,
         },
         cbzOutputOptions: {
-          dpi: 150
-        }
+          dpi: 150,
+        },
       };
 
       await act(async () => {
@@ -613,60 +601,59 @@ describe('Convert Tool Integration Tests', () => {
 
       for (let i = 0; i < calls.length; i++) {
         const formData = calls[i][1] as FormData;
-        const fileInputs = formData.getAll('fileInput');
+        const fileInputs = formData.getAll("fileInput");
         expect(fileInputs).toHaveLength(1);
         expect(fileInputs[0]).toBeInstanceOf(File);
         expect((fileInputs[0] as File).name).toBe(files[i].name);
       }
-
     });
 
-    test('should handle no files selected', async () => {
+    test("should handle no files selected", async () => {
       const { result } = renderHook(() => useConvertOperation(), {
-        wrapper: TestWrapper
+        wrapper: TestWrapper,
       });
 
       const parameters: ConvertParameters = {
-        fromExtension: 'pdf',
-        toExtension: 'png',
+        fromExtension: "pdf",
+        toExtension: "png",
         imageOptions: {
-          colorType: 'color',
+          colorType: "color",
           dpi: 300,
-          singleOrMultiple: 'multiple',
-          fitOption: 'maintainAspectRatio',
+          singleOrMultiple: "multiple",
+          fitOption: "maintainAspectRatio",
           autoRotate: true,
-          combineImages: true
+          combineImages: true,
         },
         isSmartDetection: false,
-        smartDetectionType: 'none',
+        smartDetectionType: "none",
         htmlOptions: {
-          zoomLevel: 0
+          zoomLevel: 0,
         },
         emailOptions: {
           includeAttachments: false,
           maxAttachmentSizeMB: 0,
           downloadHtml: false,
-          includeAllRecipients: false
+          includeAllRecipients: false,
         },
         pdfaOptions: {
-          outputFormat: '',
-          strict: false
+          outputFormat: "",
+          strict: false,
         },
         pdfxOptions: {
-          outputFormat: 'pdfx'
+          outputFormat: "pdfx",
         },
         cbrOptions: {
-          optimizeForEbook: false
+          optimizeForEbook: false,
         },
         pdfToCbrOptions: {
-          dpi: 150
+          dpi: 150,
         },
         cbzOptions: {
-          optimizeForEbook: false
+          optimizeForEbook: false,
         },
         cbzOutputOptions: {
-          dpi: 150
-        }
+          dpi: 150,
+        },
       };
 
       await act(async () => {
@@ -674,200 +661,198 @@ describe('Convert Tool Integration Tests', () => {
       });
 
       expect(mockedApiClient.post).not.toHaveBeenCalled();
-      expect(result.current.errorMessage).toContain('noFileSelected');
+      expect(result.current.errorMessage).toContain("noFileSelected");
     });
   });
 
-  describe('Error Boundary Integration', () => {
-
-    test('should handle corrupted file gracefully', async () => {
+  describe("Error Boundary Integration", () => {
+    test("should handle corrupted file gracefully", async () => {
       (mockedApiClient.post as Mock).mockRejectedValueOnce({
         response: {
           status: 422,
-          data: 'Processing failed'
-        }
+          data: "Processing failed",
+        },
       });
 
       const { result } = renderHook(() => useConvertOperation(), {
-        wrapper: TestWrapper
+        wrapper: TestWrapper,
       });
 
-      const corruptedFile = createTestStirlingFile('corrupted.pdf', 'not-a-pdf', 'application/pdf');
+      const corruptedFile = createTestStirlingFile("corrupted.pdf", "not-a-pdf", "application/pdf");
       const parameters: ConvertParameters = {
-        fromExtension: 'pdf',
-        toExtension: 'png',
+        fromExtension: "pdf",
+        toExtension: "png",
         imageOptions: {
-          colorType: 'color',
+          colorType: "color",
           dpi: 300,
-          singleOrMultiple: 'multiple',
-          fitOption: 'maintainAspectRatio',
+          singleOrMultiple: "multiple",
+          fitOption: "maintainAspectRatio",
           autoRotate: true,
-          combineImages: true
+          combineImages: true,
         },
         isSmartDetection: false,
-        smartDetectionType: 'none',
+        smartDetectionType: "none",
         htmlOptions: {
-          zoomLevel: 0
+          zoomLevel: 0,
         },
         emailOptions: {
           includeAttachments: false,
           maxAttachmentSizeMB: 0,
           downloadHtml: false,
-          includeAllRecipients: false
+          includeAllRecipients: false,
         },
         pdfaOptions: {
-          outputFormat: '',
-          strict: false
+          outputFormat: "",
+          strict: false,
         },
         pdfxOptions: {
-          outputFormat: 'pdfx'
+          outputFormat: "pdfx",
         },
         cbrOptions: {
-          optimizeForEbook: false
+          optimizeForEbook: false,
         },
         pdfToCbrOptions: {
-          dpi: 150
+          dpi: 150,
         },
         cbzOptions: {
-          optimizeForEbook: false
+          optimizeForEbook: false,
         },
         cbzOutputOptions: {
-          dpi: 150
-        }
+          dpi: 150,
+        },
       };
 
       await act(async () => {
         await result.current.executeOperation(parameters, [corruptedFile]);
       });
 
-      expect(result.current.errorMessage).toBe('Processing failed');
+      expect(result.current.errorMessage).toBe("Processing failed");
       expect(result.current.isLoading).toBe(false);
     });
 
-    test('should handle backend service unavailable', async () => {
+    test("should handle backend service unavailable", async () => {
       (mockedApiClient.post as Mock).mockRejectedValueOnce({
         response: {
           status: 503,
-          data: 'Service unavailable'
-        }
+          data: "Service unavailable",
+        },
       });
 
       const { result } = renderHook(() => useConvertOperation(), {
-        wrapper: TestWrapper
+        wrapper: TestWrapper,
       });
 
       const testFile = createPDFFile();
       const parameters: ConvertParameters = {
-        fromExtension: 'pdf',
-        toExtension: 'png',
+        fromExtension: "pdf",
+        toExtension: "png",
         imageOptions: {
-          colorType: 'color',
+          colorType: "color",
           dpi: 300,
-          singleOrMultiple: 'multiple',
-          fitOption: 'maintainAspectRatio',
+          singleOrMultiple: "multiple",
+          fitOption: "maintainAspectRatio",
           autoRotate: true,
-          combineImages: true
+          combineImages: true,
         },
         isSmartDetection: false,
-        smartDetectionType: 'none',
+        smartDetectionType: "none",
         htmlOptions: {
-          zoomLevel: 0
+          zoomLevel: 0,
         },
         emailOptions: {
           includeAttachments: false,
           maxAttachmentSizeMB: 0,
           downloadHtml: false,
-          includeAllRecipients: false
+          includeAllRecipients: false,
         },
         pdfaOptions: {
-          outputFormat: '',
-          strict: false
+          outputFormat: "",
+          strict: false,
         },
         pdfxOptions: {
-          outputFormat: 'pdfx'
+          outputFormat: "pdfx",
         },
         cbrOptions: {
-          optimizeForEbook: false
+          optimizeForEbook: false,
         },
         pdfToCbrOptions: {
-          dpi: 150
+          dpi: 150,
         },
         cbzOptions: {
-          optimizeForEbook: false
+          optimizeForEbook: false,
         },
         cbzOutputOptions: {
-          dpi: 150
-        }
+          dpi: 150,
+        },
       };
 
       await act(async () => {
         await result.current.executeOperation(parameters, [testFile]);
       });
 
-      expect(result.current.errorMessage).toBe('Service unavailable');
+      expect(result.current.errorMessage).toBe("Service unavailable");
       expect(result.current.isLoading).toBe(false);
     });
   });
 
-  describe('FileContext Integration', () => {
-
-    test('should record operation in FileContext', async () => {
-      const mockBlob = new Blob(['fake-data'], { type: 'image/png' });
+  describe("FileContext Integration", () => {
+    test("should record operation in FileContext", async () => {
+      const mockBlob = new Blob(["fake-data"], { type: "image/png" });
       (mockedApiClient.post as Mock).mockResolvedValueOnce({
         data: mockBlob,
         status: 200,
         headers: {
-          'content-type': 'image/png',
-          'content-disposition': 'attachment; filename="test_converted.png"'
-        }
+          "content-type": "image/png",
+          "content-disposition": 'attachment; filename="test_converted.png"',
+        },
       });
 
       const { result } = renderHook(() => useConvertOperation(), {
-        wrapper: TestWrapper
+        wrapper: TestWrapper,
       });
 
       const testFile = createPDFFile();
       const parameters: ConvertParameters = {
-        fromExtension: 'pdf',
-        toExtension: 'png',
+        fromExtension: "pdf",
+        toExtension: "png",
         imageOptions: {
-          colorType: 'color',
+          colorType: "color",
           dpi: 300,
-          singleOrMultiple: 'multiple',
-          fitOption: 'maintainAspectRatio',
+          singleOrMultiple: "multiple",
+          fitOption: "maintainAspectRatio",
           autoRotate: true,
-          combineImages: true
+          combineImages: true,
         },
         isSmartDetection: false,
-        smartDetectionType: 'none',
+        smartDetectionType: "none",
         htmlOptions: {
-          zoomLevel: 0
+          zoomLevel: 0,
         },
         emailOptions: {
           includeAttachments: false,
           maxAttachmentSizeMB: 0,
           downloadHtml: false,
-          includeAllRecipients: false
+          includeAllRecipients: false,
         },
         pdfaOptions: {
-          outputFormat: '',
-          strict: false
+          outputFormat: "",
+          strict: false,
         },
         pdfxOptions: {
-          outputFormat: 'pdfx'
+          outputFormat: "pdfx",
         },
         cbrOptions: {
-          optimizeForEbook: false
+          optimizeForEbook: false,
         },
         pdfToCbrOptions: {
-          dpi: 150
+          dpi: 150,
         },
         cbzOptions: {
-          optimizeForEbook: false
+          optimizeForEbook: false,
         },
         cbzOutputOptions: {
-          dpi: 150
-        }
+          dpi: 150,
+        },
       };
 
       await act(async () => {
@@ -876,67 +861,67 @@ describe('Convert Tool Integration Tests', () => {
 
       // Verify operation was successful and files were processed
       expect(result.current.files).toHaveLength(1);
-      expect(result.current.files[0].name).toBe('test_converted.png');
+      expect(result.current.files[0].name).toBe("test_converted.png");
       expect(result.current.downloadUrl).toBeTruthy();
     });
 
-    test('should clean up blob URLs on reset', async () => {
-      const mockBlob = new Blob(['fake-data'], { type: 'image/png' });
+    test("should clean up blob URLs on reset", async () => {
+      const mockBlob = new Blob(["fake-data"], { type: "image/png" });
       (mockedApiClient.post as Mock).mockResolvedValueOnce({
         data: mockBlob,
         status: 200,
         headers: {
-          'content-type': 'image/png',
-          'content-disposition': 'attachment; filename="test_converted.png"'
-        }
+          "content-type": "image/png",
+          "content-disposition": 'attachment; filename="test_converted.png"',
+        },
       });
 
       const { result } = renderHook(() => useConvertOperation(), {
-        wrapper: TestWrapper
+        wrapper: TestWrapper,
       });
 
       const testFile = createPDFFile();
       const parameters: ConvertParameters = {
-        fromExtension: 'pdf',
-        toExtension: 'png',
+        fromExtension: "pdf",
+        toExtension: "png",
         imageOptions: {
-          colorType: 'color',
+          colorType: "color",
           dpi: 300,
-          singleOrMultiple: 'multiple',
-          fitOption: 'maintainAspectRatio',
+          singleOrMultiple: "multiple",
+          fitOption: "maintainAspectRatio",
           autoRotate: true,
-          combineImages: true
+          combineImages: true,
         },
         isSmartDetection: false,
-        smartDetectionType: 'none',
+        smartDetectionType: "none",
         htmlOptions: {
-          zoomLevel: 0
+          zoomLevel: 0,
         },
         emailOptions: {
           includeAttachments: false,
           maxAttachmentSizeMB: 0,
           downloadHtml: false,
-          includeAllRecipients: false
+          includeAllRecipients: false,
         },
         pdfaOptions: {
-          outputFormat: '',
-          strict: false
+          outputFormat: "",
+          strict: false,
         },
         pdfxOptions: {
-          outputFormat: 'pdfx'
+          outputFormat: "pdfx",
         },
         cbrOptions: {
-          optimizeForEbook: false
+          optimizeForEbook: false,
         },
         pdfToCbrOptions: {
-          dpi: 150
+          dpi: 150,
         },
         cbzOptions: {
-          optimizeForEbook: false
+          optimizeForEbook: false,
         },
         cbzOutputOptions: {
-          dpi: 150
-        }
+          dpi: 150,
+        },
       };
 
       await act(async () => {
diff --git a/frontend/src/core/tests/convert/ConvertSmartDetectionIntegration.test.tsx b/frontend/src/core/tests/convert/ConvertSmartDetectionIntegration.test.tsx
index cbf4fb2e60..6b0979d8f3 100644
--- a/frontend/src/core/tests/convert/ConvertSmartDetectionIntegration.test.tsx
+++ b/frontend/src/core/tests/convert/ConvertSmartDetectionIntegration.test.tsx
@@ -3,37 +3,37 @@
  * Tests the complete flow from file upload through auto-detection to API calls
  */
 
-import React from 'react';
-import { describe, test, expect, vi, beforeEach, afterEach, Mock } from 'vitest';
-import { renderHook, act, waitFor } from '@testing-library/react';
-import { useConvertOperation } from '@app/hooks/tools/convert/useConvertOperation';
-import { useConvertParameters } from '@app/hooks/tools/convert/useConvertParameters';
-import { FileContextProvider } from '@app/contexts/FileContext';
-import { NavigationProvider } from '@app/contexts/NavigationContext';
-import { ToolRegistryProvider } from '@app/contexts/ToolRegistryProvider';
-import { PreferencesProvider } from '@app/contexts/PreferencesContext';
-import { I18nextProvider } from 'react-i18next';
-import i18n from '@app/i18n/config';
-import { detectFileExtension } from '@app/utils/fileUtils';
-import { FIT_OPTIONS } from '@app/constants/convertConstants';
-import { createTestStirlingFile, createTestFilesWithId } from '@app/tests/utils/testFileHelpers';
-import { MantineProvider } from '@mantine/core';
+import React from "react";
+import { describe, test, expect, vi, beforeEach, afterEach, Mock } from "vitest";
+import { renderHook, act, waitFor } from "@testing-library/react";
+import { useConvertOperation } from "@app/hooks/tools/convert/useConvertOperation";
+import { useConvertParameters } from "@app/hooks/tools/convert/useConvertParameters";
+import { FileContextProvider } from "@app/contexts/FileContext";
+import { NavigationProvider } from "@app/contexts/NavigationContext";
+import { ToolRegistryProvider } from "@app/contexts/ToolRegistryProvider";
+import { PreferencesProvider } from "@app/contexts/PreferencesContext";
+import { I18nextProvider } from "react-i18next";
+import i18n from "@app/i18n/config";
+import { detectFileExtension } from "@app/utils/fileUtils";
+import { FIT_OPTIONS } from "@app/constants/convertConstants";
+import { createTestStirlingFile, createTestFilesWithId } from "@app/tests/utils/testFileHelpers";
+import { MantineProvider } from "@mantine/core";
 
 // Mock axios (for static methods like CancelToken, isCancel)
-vi.mock('axios', () => ({
+vi.mock("axios", () => ({
   default: {
     CancelToken: {
       source: vi.fn(() => ({
-        token: 'mock-cancel-token',
-        cancel: vi.fn()
-      }))
+        token: "mock-cancel-token",
+        cancel: vi.fn(),
+      })),
     },
     isCancel: vi.fn(() => false),
-  }
+  },
 }));
 
 // Mock our apiClient service
-vi.mock('../../services/apiClient', () => ({
+vi.mock("../../services/apiClient", () => ({
   default: {
     post: vi.fn(),
     get: vi.fn(),
@@ -41,18 +41,18 @@ vi.mock('../../services/apiClient', () => ({
     delete: vi.fn(),
     interceptors: {
       response: {
-        use: vi.fn()
-      }
-    }
-  }
+        use: vi.fn(),
+      },
+    },
+  },
 }));
 
 // Import the mocked apiClient
-import apiClient from '@app/services/apiClient';
+import apiClient from "@app/services/apiClient";
 const mockedApiClient = vi.mocked(apiClient);
 
 // Mock only essential services that are actually called by the tests
-vi.mock('../../services/fileStorage', () => ({
+vi.mock("../../services/fileStorage", () => ({
   fileStorage: {
     init: vi.fn().mockResolvedValue(undefined),
     storeFile: vi.fn().mockImplementation((file, thumbnail) => {
@@ -62,20 +62,20 @@ vi.mock('../../services/fileStorage', () => ({
         size: file.size,
         type: file.type,
         lastModified: file.lastModified,
-        thumbnail: thumbnail
+        thumbnail: thumbnail,
       });
     }),
     getAllFileMetadata: vi.fn().mockResolvedValue([]),
-    cleanup: vi.fn().mockResolvedValue(undefined)
-  }
+    cleanup: vi.fn().mockResolvedValue(undefined),
+  },
 }));
 
-vi.mock('../../services/thumbnailGenerationService', () => ({
+vi.mock("../../services/thumbnailGenerationService", () => ({
   thumbnailGenerationService: {
-    generateThumbnail: vi.fn().mockResolvedValue('data:image/png;base64,fake-thumbnail'),
+    generateThumbnail: vi.fn().mockResolvedValue("data:image/png;base64,fake-thumbnail"),
     cleanup: vi.fn(),
-    destroy: vi.fn()
-  }
+    destroy: vi.fn(),
+  },
 }));
 
 const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
@@ -84,9 +84,7 @@ const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
       <PreferencesProvider>
         <ToolRegistryProvider>
           <NavigationProvider>
-            <FileContextProvider>
-              {children}
-            </FileContextProvider>
+            <FileContextProvider>{children}</FileContextProvider>
           </NavigationProvider>
         </ToolRegistryProvider>
       </PreferencesProvider>
@@ -94,14 +92,13 @@ const TestWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
   </MantineProvider>
 );
 
-describe('Convert Tool - Smart Detection Integration Tests', () => {
-
+describe("Convert Tool - Smart Detection Integration Tests", () => {
   beforeEach(() => {
     vi.clearAllMocks();
 
     // Mock successful API response
     (mockedApiClient.post as Mock).mockResolvedValue({
-      data: new Blob(['fake converted content'], { type: 'application/pdf' })
+      data: new Blob(["fake converted content"], { type: "application/pdf" }),
     });
   });
 
@@ -110,18 +107,22 @@ describe('Convert Tool - Smart Detection Integration Tests', () => {
     vi.restoreAllMocks();
   });
 
-  describe('Single File Auto-Detection Flow', () => {
-    test('should auto-detect PDF from DOCX and convert to PDF', async () => {
+  describe("Single File Auto-Detection Flow", () => {
+    test("should auto-detect PDF from DOCX and convert to PDF", async () => {
       const { result: paramsResult } = renderHook(() => useConvertParameters(), {
-        wrapper: TestWrapper
+        wrapper: TestWrapper,
       });
 
       const { result: operationResult } = renderHook(() => useConvertOperation(), {
-        wrapper: TestWrapper
+        wrapper: TestWrapper,
       });
 
       // Create mock DOCX file
-      const docxFile = createTestStirlingFile('document.docx', 'docx content', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document');
+      const docxFile = createTestStirlingFile(
+        "document.docx",
+        "docx content",
+        "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
+      );
 
       // Test auto-detection
       act(() => {
@@ -129,35 +130,32 @@ describe('Convert Tool - Smart Detection Integration Tests', () => {
       });
 
       await waitFor(() => {
-        expect(paramsResult.current.parameters.fromExtension).toBe('docx');
-        expect(paramsResult.current.parameters.toExtension).toBe('pdf');
+        expect(paramsResult.current.parameters.fromExtension).toBe("docx");
+        expect(paramsResult.current.parameters.toExtension).toBe("pdf");
         expect(paramsResult.current.parameters.isSmartDetection).toBe(false);
       });
 
       // Test conversion operation
       await act(async () => {
-        await operationResult.current.executeOperation(
-          paramsResult.current.parameters,
-          [docxFile]
-        );
+        await operationResult.current.executeOperation(paramsResult.current.parameters, [docxFile]);
       });
 
-      expect(mockedApiClient.post).toHaveBeenCalledWith('/api/v1/convert/file/pdf', expect.any(FormData), {
-        responseType: 'blob'
+      expect(mockedApiClient.post).toHaveBeenCalledWith("/api/v1/convert/file/pdf", expect.any(FormData), {
+        responseType: "blob",
       });
     });
 
-    test('should handle unknown file type with file-to-pdf fallback', async () => {
+    test("should handle unknown file type with file-to-pdf fallback", async () => {
       const { result: paramsResult } = renderHook(() => useConvertParameters(), {
-        wrapper: TestWrapper
+        wrapper: TestWrapper,
       });
 
       const { result: operationResult } = renderHook(() => useConvertOperation(), {
-        wrapper: TestWrapper
+        wrapper: TestWrapper,
       });
 
       // Create mock unknown file
-      const unknownFile = createTestStirlingFile('document.xyz', 'unknown content', 'application/octet-stream');
+      const unknownFile = createTestStirlingFile("document.xyz", "unknown content", "application/octet-stream");
 
       // Test auto-detection
       act(() => {
@@ -165,41 +163,37 @@ describe('Convert Tool - Smart Detection Integration Tests', () => {
       });
 
       await waitFor(() => {
-        expect(paramsResult.current.parameters.fromExtension).toBe('file-xyz');
-        expect(paramsResult.current.parameters.toExtension).toBe('pdf'); // Fallback
+        expect(paramsResult.current.parameters.fromExtension).toBe("file-xyz");
+        expect(paramsResult.current.parameters.toExtension).toBe("pdf"); // Fallback
         expect(paramsResult.current.parameters.isSmartDetection).toBe(false);
       });
 
       // Test conversion operation
       await act(async () => {
-        await operationResult.current.executeOperation(
-          paramsResult.current.parameters,
-          [unknownFile]
-        );
+        await operationResult.current.executeOperation(paramsResult.current.parameters, [unknownFile]);
       });
 
-      expect(mockedApiClient.post).toHaveBeenCalledWith('/api/v1/convert/file/pdf', expect.any(FormData), {
-        responseType: 'blob'
+      expect(mockedApiClient.post).toHaveBeenCalledWith("/api/v1/convert/file/pdf", expect.any(FormData), {
+        responseType: "blob",
       });
     });
   });
 
-  describe('Multi-File Smart Detection Flow', () => {
-
-    test('should detect all images and use img-to-pdf endpoint', async () => {
+  describe("Multi-File Smart Detection Flow", () => {
+    test("should detect all images and use img-to-pdf endpoint", async () => {
       const { result: paramsResult } = renderHook(() => useConvertParameters(), {
-        wrapper: TestWrapper
+        wrapper: TestWrapper,
       });
 
       const { result: operationResult } = renderHook(() => useConvertOperation(), {
-        wrapper: TestWrapper
+        wrapper: TestWrapper,
       });
 
       // Create mock image files
       const imageFiles = createTestFilesWithId([
-        { name: 'photo1.jpg', content: 'jpg content', type: 'image/jpeg' },
-        { name: 'photo2.png', content: 'png content', type: 'image/png' },
-        { name: 'photo3.gif', content: 'gif content', type: 'image/gif' }
+        { name: "photo1.jpg", content: "jpg content", type: "image/jpeg" },
+        { name: "photo2.png", content: "png content", type: "image/png" },
+        { name: "photo3.gif", content: "gif content", type: "image/gif" },
       ]);
 
       // Test smart detection for all images
@@ -208,44 +202,49 @@ describe('Convert Tool - Smart Detection Integration Tests', () => {
       });
 
       await waitFor(() => {
-        expect(paramsResult.current.parameters.fromExtension).toBe('image');
-        expect(paramsResult.current.parameters.toExtension).toBe('pdf');
+        expect(paramsResult.current.parameters.fromExtension).toBe("image");
+        expect(paramsResult.current.parameters.toExtension).toBe("pdf");
         expect(paramsResult.current.parameters.isSmartDetection).toBe(true);
-        expect(paramsResult.current.parameters.smartDetectionType).toBe('images');
+        expect(paramsResult.current.parameters.smartDetectionType).toBe("images");
       });
 
       // Test conversion operation
       await act(async () => {
-        await operationResult.current.executeOperation(
-          paramsResult.current.parameters,
-          imageFiles
-        );
+        await operationResult.current.executeOperation(paramsResult.current.parameters, imageFiles);
       });
 
-      expect(mockedApiClient.post).toHaveBeenCalledWith('/api/v1/convert/img/pdf', expect.any(FormData), {
-        responseType: 'blob'
+      expect(mockedApiClient.post).toHaveBeenCalledWith("/api/v1/convert/img/pdf", expect.any(FormData), {
+        responseType: "blob",
       });
 
       // Should send all files in single request
       const formData = (mockedApiClient.post as Mock).mock.calls[0][1] as FormData;
-      const files = formData.getAll('fileInput');
+      const files = formData.getAll("fileInput");
       expect(files).toHaveLength(3);
     });
 
-    test('should detect mixed file types and use file-to-pdf endpoint', async () => {
+    test("should detect mixed file types and use file-to-pdf endpoint", async () => {
       const { result: paramsResult } = renderHook(() => useConvertParameters(), {
-        wrapper: TestWrapper
+        wrapper: TestWrapper,
       });
 
       const { result: operationResult } = renderHook(() => useConvertOperation(), {
-        wrapper: TestWrapper
+        wrapper: TestWrapper,
       });
 
       // Create mixed file types
       const mixedFiles = createTestFilesWithId([
-        { name: 'document.pdf', content: 'pdf content', type: 'application/pdf' },
-        { name: 'spreadsheet.xlsx', content: 'docx content', type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' },
-        { name: 'presentation.pptx', content: 'pptx content', type: 'application/vnd.openxmlformats-officedocument.presentationml.presentation' }
+        { name: "document.pdf", content: "pdf content", type: "application/pdf" },
+        {
+          name: "spreadsheet.xlsx",
+          content: "docx content",
+          type: "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+        },
+        {
+          name: "presentation.pptx",
+          content: "pptx content",
+          type: "application/vnd.openxmlformats-officedocument.presentationml.presentation",
+        },
       ]);
 
       // Test smart detection for mixed types
@@ -254,38 +253,35 @@ describe('Convert Tool - Smart Detection Integration Tests', () => {
       });
 
       await waitFor(() => {
-        expect(paramsResult.current.parameters.fromExtension).toBe('any');
-        expect(paramsResult.current.parameters.toExtension).toBe('pdf');
+        expect(paramsResult.current.parameters.fromExtension).toBe("any");
+        expect(paramsResult.current.parameters.toExtension).toBe("pdf");
         expect(paramsResult.current.parameters.isSmartDetection).toBe(true);
-        expect(paramsResult.current.parameters.smartDetectionType).toBe('mixed');
+        expect(paramsResult.current.parameters.smartDetectionType).toBe("mixed");
       });
 
       // Test conversion operation
       await act(async () => {
-        await operationResult.current.executeOperation(
-          paramsResult.current.parameters,
-          mixedFiles
-        );
+        await operationResult.current.executeOperation(paramsResult.current.parameters, mixedFiles);
       });
 
-      expect(mockedApiClient.post).toHaveBeenCalledWith('/api/v1/convert/file/pdf', expect.any(FormData), {
-        responseType: 'blob'
+      expect(mockedApiClient.post).toHaveBeenCalledWith("/api/v1/convert/file/pdf", expect.any(FormData), {
+        responseType: "blob",
       });
     });
 
-    test('should detect all web files and use html-to-pdf endpoint', async () => {
+    test("should detect all web files and use html-to-pdf endpoint", async () => {
       const { result: paramsResult } = renderHook(() => useConvertParameters(), {
-        wrapper: TestWrapper
+        wrapper: TestWrapper,
       });
 
       const { result: operationResult } = renderHook(() => useConvertOperation(), {
-        wrapper: TestWrapper
+        wrapper: TestWrapper,
       });
 
       // Create mock web files
       const webFiles = createTestFilesWithId([
-        { name: 'page1.html', content: '<html>content</html>', type: 'text/html' },
-        { name: 'site.zip', content: 'zip content', type: 'application/zip' }
+        { name: "page1.html", content: "<html>content</html>", type: "text/html" },
+        { name: "site.zip", content: "zip content", type: "application/zip" },
       ]);
 
       // Test smart detection for web files
@@ -294,22 +290,19 @@ describe('Convert Tool - Smart Detection Integration Tests', () => {
       });
 
       await waitFor(() => {
-        expect(paramsResult.current.parameters.fromExtension).toBe('html');
-        expect(paramsResult.current.parameters.toExtension).toBe('pdf');
+        expect(paramsResult.current.parameters.fromExtension).toBe("html");
+        expect(paramsResult.current.parameters.toExtension).toBe("pdf");
         expect(paramsResult.current.parameters.isSmartDetection).toBe(true);
-        expect(paramsResult.current.parameters.smartDetectionType).toBe('web');
+        expect(paramsResult.current.parameters.smartDetectionType).toBe("web");
       });
 
       // Test conversion operation
       await act(async () => {
-        await operationResult.current.executeOperation(
-          paramsResult.current.parameters,
-          webFiles
-        );
+        await operationResult.current.executeOperation(paramsResult.current.parameters, webFiles);
       });
 
-      expect(mockedApiClient.post).toHaveBeenCalledWith('/api/v1/convert/html/pdf', expect.any(FormData), {
-        responseType: 'blob'
+      expect(mockedApiClient.post).toHaveBeenCalledWith("/api/v1/convert/html/pdf", expect.any(FormData), {
+        responseType: "blob",
       });
 
       // Should process files separately for web files
@@ -317,182 +310,165 @@ describe('Convert Tool - Smart Detection Integration Tests', () => {
     });
   });
 
-  describe('Web and Email Conversion Options Integration', () => {
-
-    test('should send correct HTML parameters for web-to-pdf conversion', async () => {
+  describe("Web and Email Conversion Options Integration", () => {
+    test("should send correct HTML parameters for web-to-pdf conversion", async () => {
       const { result: paramsResult } = renderHook(() => useConvertParameters(), {
-        wrapper: TestWrapper
+        wrapper: TestWrapper,
       });
 
       const { result: operationResult } = renderHook(() => useConvertOperation(), {
-        wrapper: TestWrapper
+        wrapper: TestWrapper,
       });
 
-      const htmlFile = createTestStirlingFile('page.html', '<html>content</html>', 'text/html');
+      const htmlFile = createTestStirlingFile("page.html", "<html>content</html>", "text/html");
 
       // Set up HTML conversion parameters
       act(() => {
         paramsResult.current.analyzeFileTypes([htmlFile]);
-        paramsResult.current.updateParameter('htmlOptions', {
-          zoomLevel: 1.5
+        paramsResult.current.updateParameter("htmlOptions", {
+          zoomLevel: 1.5,
         });
       });
 
       await act(async () => {
-        await operationResult.current.executeOperation(
-          paramsResult.current.parameters,
-          [htmlFile]
-        );
+        await operationResult.current.executeOperation(paramsResult.current.parameters, [htmlFile]);
       });
 
       const formData = (mockedApiClient.post as Mock).mock.calls[0][1] as FormData;
-      expect(formData.get('zoom')).toBe('1.5');
+      expect(formData.get("zoom")).toBe("1.5");
     });
 
-    test('should send correct email parameters for eml-to-pdf conversion', async () => {
+    test("should send correct email parameters for eml-to-pdf conversion", async () => {
       const { result: paramsResult } = renderHook(() => useConvertParameters(), {
-        wrapper: TestWrapper
+        wrapper: TestWrapper,
       });
 
       const { result: operationResult } = renderHook(() => useConvertOperation(), {
-        wrapper: TestWrapper
+        wrapper: TestWrapper,
       });
 
-      const emlFile = createTestStirlingFile('email.eml', 'email content', 'message/rfc822');
+      const emlFile = createTestStirlingFile("email.eml", "email content", "message/rfc822");
 
       // Set up email conversion parameters
       act(() => {
-        paramsResult.current.updateParameter('fromExtension', 'eml');
-        paramsResult.current.updateParameter('toExtension', 'pdf');
-        paramsResult.current.updateParameter('emailOptions', {
+        paramsResult.current.updateParameter("fromExtension", "eml");
+        paramsResult.current.updateParameter("toExtension", "pdf");
+        paramsResult.current.updateParameter("emailOptions", {
           includeAttachments: false,
           maxAttachmentSizeMB: 20,
           downloadHtml: true,
-          includeAllRecipients: true
+          includeAllRecipients: true,
         });
       });
 
       await act(async () => {
-        await operationResult.current.executeOperation(
-          paramsResult.current.parameters,
-          [emlFile]
-        );
+        await operationResult.current.executeOperation(paramsResult.current.parameters, [emlFile]);
       });
 
       const formData = (mockedApiClient.post as Mock).mock.calls[0][1] as FormData;
-      expect(formData.get('includeAttachments')).toBe('false');
-      expect(formData.get('maxAttachmentSizeMB')).toBe('20');
-      expect(formData.get('downloadHtml')).toBe('true');
-      expect(formData.get('includeAllRecipients')).toBe('true');
+      expect(formData.get("includeAttachments")).toBe("false");
+      expect(formData.get("maxAttachmentSizeMB")).toBe("20");
+      expect(formData.get("downloadHtml")).toBe("true");
+      expect(formData.get("includeAllRecipients")).toBe("true");
     });
 
-    test('should send correct PDF/A parameters for pdf-to-pdfa conversion', async () => {
+    test("should send correct PDF/A parameters for pdf-to-pdfa conversion", async () => {
       const { result: paramsResult } = renderHook(() => useConvertParameters(), {
-        wrapper: TestWrapper
+        wrapper: TestWrapper,
       });
 
       const { result: operationResult } = renderHook(() => useConvertOperation(), {
-        wrapper: TestWrapper
+        wrapper: TestWrapper,
       });
 
-      const pdfFile = createTestStirlingFile('document.pdf', 'pdf content', 'application/pdf');
+      const pdfFile = createTestStirlingFile("document.pdf", "pdf content", "application/pdf");
 
       // Set up PDF/A conversion parameters
       act(() => {
-        paramsResult.current.updateParameter('fromExtension', 'pdf');
-        paramsResult.current.updateParameter('toExtension', 'pdfa');
-        paramsResult.current.updateParameter('pdfaOptions', {
-          outputFormat: 'pdfa',
-          strict: false
+        paramsResult.current.updateParameter("fromExtension", "pdf");
+        paramsResult.current.updateParameter("toExtension", "pdfa");
+        paramsResult.current.updateParameter("pdfaOptions", {
+          outputFormat: "pdfa",
+          strict: false,
         });
       });
 
       await act(async () => {
-        await operationResult.current.executeOperation(
-          paramsResult.current.parameters,
-          [pdfFile]
-        );
+        await operationResult.current.executeOperation(paramsResult.current.parameters, [pdfFile]);
       });
 
       const formData = (mockedApiClient.post as Mock).mock.calls[0][1] as FormData;
-      expect(formData.get('outputFormat')).toBe('pdfa');
-      expect(formData.get('strict')).toBe('false');
-      expect(mockedApiClient.post).toHaveBeenCalledWith('/api/v1/convert/pdf/pdfa', expect.any(FormData), {
-        responseType: 'blob'
+      expect(formData.get("outputFormat")).toBe("pdfa");
+      expect(formData.get("strict")).toBe("false");
+      expect(mockedApiClient.post).toHaveBeenCalledWith("/api/v1/convert/pdf/pdfa", expect.any(FormData), {
+        responseType: "blob",
       });
     });
   });
 
-  describe('Image Conversion Options Integration', () => {
-
-    test('should send correct parameters for image-to-pdf conversion', async () => {
+  describe("Image Conversion Options Integration", () => {
+    test("should send correct parameters for image-to-pdf conversion", async () => {
       const { result: paramsResult } = renderHook(() => useConvertParameters(), {
-        wrapper: TestWrapper
+        wrapper: TestWrapper,
       });
 
       const { result: operationResult } = renderHook(() => useConvertOperation(), {
-        wrapper: TestWrapper
+        wrapper: TestWrapper,
       });
 
       const imageFiles = createTestFilesWithId([
-        { name: 'photo1.jpg', content: 'jpg1', type: 'image/jpeg' },
-        { name: 'photo2.jpg', content: 'jpg2', type: 'image/jpeg' }
+        { name: "photo1.jpg", content: "jpg1", type: "image/jpeg" },
+        { name: "photo2.jpg", content: "jpg2", type: "image/jpeg" },
       ]);
 
       // Set up image conversion parameters
       act(() => {
         paramsResult.current.analyzeFileTypes(imageFiles);
-        paramsResult.current.updateParameter('imageOptions', {
-          colorType: 'grayscale',
+        paramsResult.current.updateParameter("imageOptions", {
+          colorType: "grayscale",
           dpi: 150,
-          singleOrMultiple: 'single',
+          singleOrMultiple: "single",
           fitOption: FIT_OPTIONS.FIT_PAGE,
           autoRotate: false,
-          combineImages: true
+          combineImages: true,
         });
       });
 
       await act(async () => {
-        await operationResult.current.executeOperation(
-          paramsResult.current.parameters,
-          imageFiles
-        );
+        await operationResult.current.executeOperation(paramsResult.current.parameters, imageFiles);
       });
 
       const formData = (mockedApiClient.post as Mock).mock.calls[0][1] as FormData;
-      expect(formData.get('fitOption')).toBe(FIT_OPTIONS.FIT_PAGE);
-      expect(formData.get('colorType')).toBe('grayscale');
-      expect(formData.get('autoRotate')).toBe('false');
+      expect(formData.get("fitOption")).toBe(FIT_OPTIONS.FIT_PAGE);
+      expect(formData.get("colorType")).toBe("grayscale");
+      expect(formData.get("autoRotate")).toBe("false");
     });
 
-    test('should process images separately when combineImages is false', async () => {
+    test("should process images separately when combineImages is false", async () => {
       const { result: paramsResult } = renderHook(() => useConvertParameters(), {
-        wrapper: TestWrapper
+        wrapper: TestWrapper,
       });
 
       const { result: operationResult } = renderHook(() => useConvertOperation(), {
-        wrapper: TestWrapper
+        wrapper: TestWrapper,
       });
 
       const imageFiles = createTestFilesWithId([
-        { name: 'photo1.jpg', content: 'jpg1', type: 'image/jpeg' },
-        { name: 'photo2.jpg', content: 'jpg2', type: 'image/jpeg' }
+        { name: "photo1.jpg", content: "jpg1", type: "image/jpeg" },
+        { name: "photo2.jpg", content: "jpg2", type: "image/jpeg" },
       ]);
 
       // Set up for separate processing
       act(() => {
         paramsResult.current.analyzeFileTypes(imageFiles);
-        paramsResult.current.updateParameter('imageOptions', {
+        paramsResult.current.updateParameter("imageOptions", {
           ...paramsResult.current.parameters.imageOptions,
-          combineImages: false
+          combineImages: false,
         });
       });
 
       await act(async () => {
-        await operationResult.current.executeOperation(
-          paramsResult.current.parameters,
-          imageFiles
-        );
+        await operationResult.current.executeOperation(paramsResult.current.parameters, imageFiles);
       });
 
       // Should make separate API calls for each file
@@ -500,28 +476,26 @@ describe('Convert Tool - Smart Detection Integration Tests', () => {
     });
   });
 
-  describe('Error Scenarios in Smart Detection', () => {
-
-
-    test('should handle partial failures in multi-file processing', async () => {
+  describe("Error Scenarios in Smart Detection", () => {
+    test("should handle partial failures in multi-file processing", async () => {
       const { result: paramsResult } = renderHook(() => useConvertParameters(), {
-        wrapper: TestWrapper
+        wrapper: TestWrapper,
       });
 
       const { result: operationResult } = renderHook(() => useConvertOperation(), {
-        wrapper: TestWrapper
+        wrapper: TestWrapper,
       });
 
       // Mock one success, one failure
       (mockedApiClient.post as Mock)
         .mockResolvedValueOnce({
-          data: new Blob(['converted1'], { type: 'application/pdf' })
+          data: new Blob(["converted1"], { type: "application/pdf" }),
         })
-        .mockRejectedValueOnce(new Error('File 2 failed'));
+        .mockRejectedValueOnce(new Error("File 2 failed"));
 
       const mixedFiles = createTestFilesWithId([
-        { name: 'doc1.txt', content: 'file1', type: 'text/plain' },
-        { name: 'doc2.xyz', content: 'file2', type: 'application/octet-stream' }
+        { name: "doc1.txt", content: "file1", type: "text/plain" },
+        { name: "doc2.xyz", content: "file2", type: "application/octet-stream" },
       ]);
 
       // Set up for separate processing (mixed smart detection)
@@ -530,10 +504,7 @@ describe('Convert Tool - Smart Detection Integration Tests', () => {
       });
 
       await act(async () => {
-        await operationResult.current.executeOperation(
-          paramsResult.current.parameters,
-          mixedFiles
-        );
+        await operationResult.current.executeOperation(paramsResult.current.parameters, mixedFiles);
       });
 
       await waitFor(() => {
@@ -544,21 +515,20 @@ describe('Convert Tool - Smart Detection Integration Tests', () => {
     });
   });
 
-  describe('Real File Extension Detection', () => {
-
-    test('should correctly detect various file extensions', async () => {
+  describe("Real File Extension Detection", () => {
+    test("should correctly detect various file extensions", async () => {
       renderHook(() => useConvertParameters(), {
-        wrapper: TestWrapper
+        wrapper: TestWrapper,
       });
 
       const testCases = [
-        { filename: 'document.PDF', expected: 'pdf' },
-        { filename: 'image.JPEG', expected: 'jpg' }, // JPEG should normalize to jpg
-        { filename: 'photo.jpeg', expected: 'jpg' }, // jpeg should normalize to jpg
-        { filename: 'archive.tar.gz', expected: 'gz' },
-        { filename: 'file.', expected: '' },
-        { filename: '.hidden', expected: 'hidden' },
-        { filename: 'noextension', expected: '' }
+        { filename: "document.PDF", expected: "pdf" },
+        { filename: "image.JPEG", expected: "jpg" }, // JPEG should normalize to jpg
+        { filename: "photo.jpeg", expected: "jpg" }, // jpeg should normalize to jpg
+        { filename: "archive.tar.gz", expected: "gz" },
+        { filename: "file.", expected: "" },
+        { filename: ".hidden", expected: "hidden" },
+        { filename: "noextension", expected: "" },
       ];
 
       testCases.forEach(({ filename, expected }) => {
diff --git a/frontend/src/core/tests/missingTranslations.test.ts b/frontend/src/core/tests/missingTranslations.test.ts
index 0e9e8037ba..fb4bb9d4f4 100644
--- a/frontend/src/core/tests/missingTranslations.test.ts
+++ b/frontend/src/core/tests/missingTranslations.test.ts
@@ -1,23 +1,15 @@
-import fs from 'fs';
-import path from 'path';
-import ts from 'typescript';
-import { describe, expect, test } from 'vitest';
-import { parse } from 'smol-toml';
+import fs from "fs";
+import path from "path";
+import ts from "typescript";
+import { describe, expect, test } from "vitest";
+import { parse } from "smol-toml";
 
-const REPO_ROOT = path.join(__dirname, '../../../..');
-const SRC_ROOT = path.join(__dirname, '../..');
-const EN_GB_FILE = path.join(__dirname, '../../../public/locales/en-GB/translation.toml');
+const REPO_ROOT = path.join(__dirname, "../../../..");
+const SRC_ROOT = path.join(__dirname, "../..");
+const EN_GB_FILE = path.join(__dirname, "../../../public/locales/en-GB/translation.toml");
 
-const IGNORED_DIRS = new Set([
-  'tests',
-  '__mocks__',
-]);
-const IGNORED_FILE_PATTERNS = [
-  /\.d\.ts$/,
-  /\.test\./,
-  /\.spec\./,
-  /\.stories\./,
-];
+const IGNORED_DIRS = new Set(["tests", "__mocks__"]);
+const IGNORED_FILE_PATTERNS = [/\.d\.ts$/, /\.test\./, /\.spec\./, /\.stories\./];
 const IGNORED_KEYS = new Set<string>([
   // If the script has found a false-positive that shouldn't be in the translations, include it here
 ]);
@@ -30,8 +22,8 @@ type FoundKey = {
   column: number;
 };
 
-const flattenKeys = (node: unknown, prefix = '', acc = new Set<string>()): Set<string> => {
-  if (!node || typeof node !== 'object' || Array.isArray(node)) {
+const flattenKeys = (node: unknown, prefix = "", acc = new Set<string>()): Set<string> => {
+  if (!node || typeof node !== "object" || Array.isArray(node)) {
     if (prefix) {
       acc.add(prefix);
     }
@@ -47,9 +39,7 @@ const flattenKeys = (node: unknown, prefix = '', acc = new Set<string>()): Set<s
 };
 
 const listSourceFiles = (): string[] => {
-  const files = ts.sys.readDirectory(SRC_ROOT, ['.ts', '.tsx', '.js', '.jsx'], undefined, [
-    '**/*',
-  ]);
+  const files = ts.sys.readDirectory(SRC_ROOT, [".ts", ".tsx", ".js", ".jsx"], undefined, ["**/*"]);
 
   return files
     .filter((file) => !file.split(path.sep).some((segment) => IGNORED_DIRS.has(segment)))
@@ -57,15 +47,15 @@ const listSourceFiles = (): string[] => {
 };
 
 const getScriptKind = (file: string): ts.ScriptKind => {
-  if (file.endsWith('.tsx')) {
+  if (file.endsWith(".tsx")) {
     return ts.ScriptKind.TSX;
   }
 
-  if (file.endsWith('.ts')) {
+  if (file.endsWith(".ts")) {
     return ts.ScriptKind.TS;
   }
 
-  if (file.endsWith('.jsx')) {
+  if (file.endsWith(".jsx")) {
     return ts.ScriptKind.JSX;
   }
 
@@ -77,14 +67,8 @@ const getScriptKind = (file: string): ts.ScriptKind => {
  * Ignores dynamic strings because we can't know what the actual translation key will be.
  */
 const extractKeys = (file: string): FoundKey[] => {
-  const code = fs.readFileSync(file, 'utf8');
-  const sourceFile = ts.createSourceFile(
-    file,
-    code,
-    ts.ScriptTarget.Latest,
-    true,
-    getScriptKind(file),
-  );
+  const code = fs.readFileSync(file, "utf8");
+  const sourceFile = ts.createSourceFile(file, code, ts.ScriptTarget.Latest, true, getScriptKind(file));
 
   const found: FoundKey[] = [];
 
@@ -100,8 +84,8 @@ const extractKeys = (file: string): FoundKey[] => {
       const arg1 = node.arguments.at(1);
 
       const isT =
-        (ts.isIdentifier(callee) && callee.text === 't') ||
-        (ts.isPropertyAccessExpression(callee) && callee.name.text === 't');
+        (ts.isIdentifier(callee) && callee.text === "t") ||
+        (ts.isPropertyAccessExpression(callee) && callee.name.text === "t");
 
       if (isT && arg0 && (ts.isStringLiteral(arg0) || ts.isNoSubstitutionTemplateLiteral(arg0))) {
         let arg1Text: string = "";
@@ -114,11 +98,7 @@ const extractKeys = (file: string): FoundKey[] => {
 
     if (ts.isJsxOpeningElement(node) || ts.isJsxSelfClosingElement(node)) {
       for (const attr of node.attributes.properties) {
-        if (
-          !ts.isJsxAttribute(attr) ||
-          attr.name.getText(sourceFile) !== 'i18nKey' ||
-          !attr.initializer
-        ) {
+        if (!ts.isJsxAttribute(attr) || attr.name.getText(sourceFile) !== "i18nKey" || !attr.initializer) {
           continue;
         }
 
@@ -129,11 +109,7 @@ const extractKeys = (file: string): FoundKey[] => {
           continue;
         }
 
-        if (
-          ts.isJsxExpression(init) &&
-          init.expression &&
-          ts.isStringLiteral(init.expression)
-        ) {
+        if (ts.isJsxExpression(init) && init.expression && ts.isStringLiteral(init.expression)) {
           record(init.expression, init.expression.text);
         }
       }
@@ -146,11 +122,11 @@ const extractKeys = (file: string): FoundKey[] => {
   return found;
 };
 
-describe('Missing translation coverage', () => {
-  test('fails if any en-GB translation key used in source is missing', { timeout: 10000 }, () => {
+describe("Missing translation coverage", () => {
+  test("fails if any en-GB translation key used in source is missing", { timeout: 10000 }, () => {
     expect(fs.existsSync(EN_GB_FILE)).toBe(true);
 
-    const localeContent = fs.readFileSync(EN_GB_FILE, 'utf8');
+    const localeContent = fs.readFileSync(EN_GB_FILE, "utf8");
     const enGb = parse(localeContent);
     const availableKeys = flattenKeys(enGb);
 
@@ -163,7 +139,7 @@ describe('Missing translation coverage', () => {
 
     const annotations = missingKeys.map(({ key, fallback, file, line, column }) => {
       const workspaceRelativeRaw = path.relative(REPO_ROOT, file);
-      const workspaceRelativeFile = workspaceRelativeRaw.replace(/\\/g, '/');
+      const workspaceRelativeFile = workspaceRelativeRaw.replace(/\\/g, "/");
 
       return {
         key,
@@ -186,7 +162,7 @@ describe('Missing translation coverage', () => {
         key,
         fallback,
         location: `${file}:${line}:${column}`,
-      }
+      };
     });
 
     expect(neatened).toEqual([]);
diff --git a/frontend/src/core/tests/test-fixtures/sample.htm b/frontend/src/core/tests/test-fixtures/sample.htm
index 83a5260a7d..8f7aee30a3 100644
--- a/frontend/src/core/tests/test-fixtures/sample.htm
+++ b/frontend/src/core/tests/test-fixtures/sample.htm
@@ -1,125 +1,129 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Test HTML Document</title>
-    <style>
-        body {
-            font-family: Arial, sans-serif;
-            line-height: 1.6;
-            margin: 40px;
-            color: #333;
-        }
-        h1 {
-            color: #2c3e50;
-            border-bottom: 2px solid #3498db;
-            padding-bottom: 10px;
-        }
-        h2 {
-            color: #34495e;
-            margin-top: 30px;
-        }
-        table {
-            border-collapse: collapse;
-            width: 100%;
-            margin: 20px 0;
-        }
-        th, td {
-            border: 1px solid #ddd;
-            padding: 12px;
-            text-align: left;
-        }
-        th {
-            background-color: #f2f2f2;
-            font-weight: bold;
-        }
-        .highlight {
-            background-color: #fff3cd;
-            padding: 10px;
-            border-left: 4px solid #ffc107;
-            margin: 20px 0;
-        }
-        code {
-            background-color: #f8f9fa;
-            padding: 2px 4px;
-            border-radius: 4px;
-            font-family: 'Courier New', monospace;
-        }
-    </style>
-</head>
-<body>
-    <h1>Test HTML Document for Convert Tool</h1>
-    
-    <p>This is a <strong>test HTML file</strong> for testing the HTML to PDF conversion functionality. It contains various HTML elements to ensure proper conversion.</p>
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Test HTML Document</title>
+        <style>
+            body {
+                font-family: Arial, sans-serif;
+                line-height: 1.6;
+                margin: 40px;
+                color: #333;
+            }
+            h1 {
+                color: #2c3e50;
+                border-bottom: 2px solid #3498db;
+                padding-bottom: 10px;
+            }
+            h2 {
+                color: #34495e;
+                margin-top: 30px;
+            }
+            table {
+                border-collapse: collapse;
+                width: 100%;
+                margin: 20px 0;
+            }
+            th,
+            td {
+                border: 1px solid #ddd;
+                padding: 12px;
+                text-align: left;
+            }
+            th {
+                background-color: #f2f2f2;
+                font-weight: bold;
+            }
+            .highlight {
+                background-color: #fff3cd;
+                padding: 10px;
+                border-left: 4px solid #ffc107;
+                margin: 20px 0;
+            }
+            code {
+                background-color: #f8f9fa;
+                padding: 2px 4px;
+                border-radius: 4px;
+                font-family: "Courier New", monospace;
+            }
+        </style>
+    </head>
+    <body>
+        <h1>Test HTML Document for Convert Tool</h1>
 
-    <h2>Text Formatting</h2>
-    <p>This paragraph contains <strong>bold text</strong>, <em>italic text</em>, and <code>inline code</code>.</p>
-    
-    <div class="highlight">
-        <p><strong>Important:</strong> This is a highlighted section that should be preserved in the PDF output.</p>
-    </div>
+        <p>
+            This is a <strong>test HTML file</strong> for testing the HTML to PDF conversion functionality. It contains various
+            HTML elements to ensure proper conversion.
+        </p>
 
-    <h2>Lists</h2>
-    <h3>Unordered List</h3>
-    <ul>
-        <li>First item</li>
-        <li>Second item with <a href="https://example.com">a link</a></li>
-        <li>Third item</li>
-    </ul>
+        <h2>Text Formatting</h2>
+        <p>This paragraph contains <strong>bold text</strong>, <em>italic text</em>, and <code>inline code</code>.</p>
 
-    <h3>Ordered List</h3>
-    <ol>
-        <li>Primary point</li>
-        <li>Secondary point</li>
-        <li>Tertiary point</li>
-    </ol>
+        <div class="highlight">
+            <p><strong>Important:</strong> This is a highlighted section that should be preserved in the PDF output.</p>
+        </div>
 
-    <h2>Table</h2>
-    <table>
-        <thead>
-            <tr>
-                <th>Column 1</th>
-                <th>Column 2</th>
-                <th>Column 3</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Data A</td>
-                <td>Data B</td>
-                <td>Data C</td>
-            </tr>
-            <tr>
-                <td>Test 1</td>
-                <td>Test 2</td>
-                <td>Test 3</td>
-            </tr>
-            <tr>
-                <td>Sample X</td>
-                <td>Sample Y</td>
-                <td>Sample Z</td>
-            </tr>
-        </tbody>
-    </table>
+        <h2>Lists</h2>
+        <h3>Unordered List</h3>
+        <ul>
+            <li>First item</li>
+            <li>Second item with <a href="https://example.com">a link</a></li>
+            <li>Third item</li>
+        </ul>
 
-    <h2>Code Block</h2>
-    <pre><code>function testFunction() {
+        <h3>Ordered List</h3>
+        <ol>
+            <li>Primary point</li>
+            <li>Secondary point</li>
+            <li>Tertiary point</li>
+        </ol>
+
+        <h2>Table</h2>
+        <table>
+            <thead>
+                <tr>
+                    <th>Column 1</th>
+                    <th>Column 2</th>
+                    <th>Column 3</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>Data A</td>
+                    <td>Data B</td>
+                    <td>Data C</td>
+                </tr>
+                <tr>
+                    <td>Test 1</td>
+                    <td>Test 2</td>
+                    <td>Test 3</td>
+                </tr>
+                <tr>
+                    <td>Sample X</td>
+                    <td>Sample Y</td>
+                    <td>Sample Z</td>
+                </tr>
+            </tbody>
+        </table>
+
+        <h2>Code Block</h2>
+        <pre><code>function testFunction() {
     console.log("This is a test function");
     return "Hello from HTML to PDF conversion";
 }</code></pre>
 
-    <h2>Final Notes</h2>
-    <p>This HTML document should convert to a well-formatted PDF that preserves:</p>
-    <ul>
-        <li>Text formatting (bold, italic)</li>
-        <li>Headings and hierarchy</li>
-        <li>Tables with proper borders</li>
-        <li>Lists (ordered and unordered)</li>
-        <li>Code formatting</li>
-        <li>Basic CSS styling</li>
-    </ul>
+        <h2>Final Notes</h2>
+        <p>This HTML document should convert to a well-formatted PDF that preserves:</p>
+        <ul>
+            <li>Text formatting (bold, italic)</li>
+            <li>Headings and hierarchy</li>
+            <li>Tables with proper borders</li>
+            <li>Lists (ordered and unordered)</li>
+            <li>Code formatting</li>
+            <li>Basic CSS styling</li>
+        </ul>
 
-    <p><small>Generated for Stirling PDF Convert Tool testing purposes.</small></p>
-</body>
-</html>
\ No newline at end of file
+        <p><small>Generated for Stirling PDF Convert Tool testing purposes.</small></p>
+    </body>
+</html>
diff --git a/frontend/src/core/tests/test-fixtures/sample.html b/frontend/src/core/tests/test-fixtures/sample.html
index 83a5260a7d..2c3ea25241 100644
--- a/frontend/src/core/tests/test-fixtures/sample.html
+++ b/frontend/src/core/tests/test-fixtures/sample.html
@@ -1,106 +1,110 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Test HTML Document</title>
     <style>
-        body {
-            font-family: Arial, sans-serif;
-            line-height: 1.6;
-            margin: 40px;
-            color: #333;
-        }
-        h1 {
-            color: #2c3e50;
-            border-bottom: 2px solid #3498db;
-            padding-bottom: 10px;
-        }
-        h2 {
-            color: #34495e;
-            margin-top: 30px;
-        }
-        table {
-            border-collapse: collapse;
-            width: 100%;
-            margin: 20px 0;
-        }
-        th, td {
-            border: 1px solid #ddd;
-            padding: 12px;
-            text-align: left;
-        }
-        th {
-            background-color: #f2f2f2;
-            font-weight: bold;
-        }
-        .highlight {
-            background-color: #fff3cd;
-            padding: 10px;
-            border-left: 4px solid #ffc107;
-            margin: 20px 0;
-        }
-        code {
-            background-color: #f8f9fa;
-            padding: 2px 4px;
-            border-radius: 4px;
-            font-family: 'Courier New', monospace;
-        }
+      body {
+        font-family: Arial, sans-serif;
+        line-height: 1.6;
+        margin: 40px;
+        color: #333;
+      }
+      h1 {
+        color: #2c3e50;
+        border-bottom: 2px solid #3498db;
+        padding-bottom: 10px;
+      }
+      h2 {
+        color: #34495e;
+        margin-top: 30px;
+      }
+      table {
+        border-collapse: collapse;
+        width: 100%;
+        margin: 20px 0;
+      }
+      th,
+      td {
+        border: 1px solid #ddd;
+        padding: 12px;
+        text-align: left;
+      }
+      th {
+        background-color: #f2f2f2;
+        font-weight: bold;
+      }
+      .highlight {
+        background-color: #fff3cd;
+        padding: 10px;
+        border-left: 4px solid #ffc107;
+        margin: 20px 0;
+      }
+      code {
+        background-color: #f8f9fa;
+        padding: 2px 4px;
+        border-radius: 4px;
+        font-family: "Courier New", monospace;
+      }
     </style>
-</head>
-<body>
+  </head>
+  <body>
     <h1>Test HTML Document for Convert Tool</h1>
-    
-    <p>This is a <strong>test HTML file</strong> for testing the HTML to PDF conversion functionality. It contains various HTML elements to ensure proper conversion.</p>
+
+    <p>
+      This is a <strong>test HTML file</strong> for testing the HTML to PDF conversion functionality. It contains various HTML
+      elements to ensure proper conversion.
+    </p>
 
     <h2>Text Formatting</h2>
     <p>This paragraph contains <strong>bold text</strong>, <em>italic text</em>, and <code>inline code</code>.</p>
-    
+
     <div class="highlight">
-        <p><strong>Important:</strong> This is a highlighted section that should be preserved in the PDF output.</p>
+      <p><strong>Important:</strong> This is a highlighted section that should be preserved in the PDF output.</p>
     </div>
 
     <h2>Lists</h2>
     <h3>Unordered List</h3>
     <ul>
-        <li>First item</li>
-        <li>Second item with <a href="https://example.com">a link</a></li>
-        <li>Third item</li>
+      <li>First item</li>
+      <li>Second item with <a href="https://example.com">a link</a></li>
+      <li>Third item</li>
     </ul>
 
     <h3>Ordered List</h3>
     <ol>
-        <li>Primary point</li>
-        <li>Secondary point</li>
-        <li>Tertiary point</li>
+      <li>Primary point</li>
+      <li>Secondary point</li>
+      <li>Tertiary point</li>
     </ol>
 
     <h2>Table</h2>
     <table>
-        <thead>
-            <tr>
-                <th>Column 1</th>
-                <th>Column 2</th>
-                <th>Column 3</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr>
-                <td>Data A</td>
-                <td>Data B</td>
-                <td>Data C</td>
-            </tr>
-            <tr>
-                <td>Test 1</td>
-                <td>Test 2</td>
-                <td>Test 3</td>
-            </tr>
-            <tr>
-                <td>Sample X</td>
-                <td>Sample Y</td>
-                <td>Sample Z</td>
-            </tr>
-        </tbody>
+      <thead>
+        <tr>
+          <th>Column 1</th>
+          <th>Column 2</th>
+          <th>Column 3</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td>Data A</td>
+          <td>Data B</td>
+          <td>Data C</td>
+        </tr>
+        <tr>
+          <td>Test 1</td>
+          <td>Test 2</td>
+          <td>Test 3</td>
+        </tr>
+        <tr>
+          <td>Sample X</td>
+          <td>Sample Y</td>
+          <td>Sample Z</td>
+        </tr>
+      </tbody>
     </table>
 
     <h2>Code Block</h2>
@@ -112,14 +116,14 @@
     <h2>Final Notes</h2>
     <p>This HTML document should convert to a well-formatted PDF that preserves:</p>
     <ul>
-        <li>Text formatting (bold, italic)</li>
-        <li>Headings and hierarchy</li>
-        <li>Tables with proper borders</li>
-        <li>Lists (ordered and unordered)</li>
-        <li>Code formatting</li>
-        <li>Basic CSS styling</li>
+      <li>Text formatting (bold, italic)</li>
+      <li>Headings and hierarchy</li>
+      <li>Tables with proper borders</li>
+      <li>Lists (ordered and unordered)</li>
+      <li>Code formatting</li>
+      <li>Basic CSS styling</li>
     </ul>
 
     <p><small>Generated for Stirling PDF Convert Tool testing purposes.</small></p>
-</body>
-</html>
\ No newline at end of file
+  </body>
+</html>
diff --git a/frontend/src/core/tests/translation.test.ts b/frontend/src/core/tests/translation.test.ts
index e9e9e5f2fe..5de6721b32 100644
--- a/frontend/src/core/tests/translation.test.ts
+++ b/frontend/src/core/tests/translation.test.ts
@@ -1,9 +1,9 @@
-import { describe, test, expect } from 'vitest';
-import fs from 'fs';
-import path from 'path';
-import { parse } from 'smol-toml';
+import { describe, test, expect } from "vitest";
+import fs from "fs";
+import path from "path";
+import { parse } from "smol-toml";
 
-const LOCALES_DIR = path.join(__dirname, '../../../public/locales');
+const LOCALES_DIR = path.join(__dirname, "../../../public/locales");
 
 // Get all locale directories for parameterized tests
 const getLocaleDirectories = () => {
@@ -11,31 +11,32 @@ const getLocaleDirectories = () => {
     return [];
   }
 
-  return fs.readdirSync(LOCALES_DIR, { withFileTypes: true })
-    .filter(dirent => dirent.isDirectory())
-    .map(dirent => dirent.name);
+  return fs
+    .readdirSync(LOCALES_DIR, { withFileTypes: true })
+    .filter((dirent) => dirent.isDirectory())
+    .map((dirent) => dirent.name);
 };
 
 const localeDirectories = getLocaleDirectories();
 
-describe('Translation TOML Validation', () => {
-  test('should find the locales directory', () => {
+describe("Translation TOML Validation", () => {
+  test("should find the locales directory", () => {
     expect(fs.existsSync(LOCALES_DIR)).toBe(true);
   });
 
-  test('should have at least one locale directory', () => {
+  test("should have at least one locale directory", () => {
     expect(localeDirectories.length).toBeGreaterThan(0);
   });
 
-  test.each(localeDirectories)('should have valid TOML in %s/translation.toml', (localeDir) => {
-    const translationFile = path.join(LOCALES_DIR, localeDir, 'translation.toml');
+  test.each(localeDirectories)("should have valid TOML in %s/translation.toml", (localeDir) => {
+    const translationFile = path.join(LOCALES_DIR, localeDir, "translation.toml");
 
     // Check if file exists
     expect(fs.existsSync(translationFile)).toBe(true);
 
     // Read file content
-    const content = fs.readFileSync(translationFile, 'utf8');
-    expect(content.trim()).not.toBe('');
+    const content = fs.readFileSync(translationFile, "utf8");
+    expect(content.trim()).not.toBe("");
 
     // Parse TOML - this will throw if invalid TOML
     let tomlData;
@@ -44,7 +45,7 @@ describe('Translation TOML Validation', () => {
     }).not.toThrow();
 
     // Ensure it's an object at root level
-    expect(typeof tomlData).toBe('object');
+    expect(typeof tomlData).toBe("object");
     expect(tomlData).not.toBeNull();
     expect(Array.isArray(tomlData)).toBe(false);
   });
diff --git a/frontend/src/core/tests/translationStructure.test.ts b/frontend/src/core/tests/translationStructure.test.ts
index a36b8e6fb7..1d530a2c51 100644
--- a/frontend/src/core/tests/translationStructure.test.ts
+++ b/frontend/src/core/tests/translationStructure.test.ts
@@ -1,29 +1,30 @@
-import { describe, test, expect } from 'vitest';
-import fs from 'fs';
-import path from 'path';
-import { parse } from 'smol-toml';
+import { describe, test, expect } from "vitest";
+import fs from "fs";
+import path from "path";
+import { parse } from "smol-toml";
 
-const LOCALES_DIR = path.join(__dirname, '../../../public/locales');
+const LOCALES_DIR = path.join(__dirname, "../../../public/locales");
 
 const getLocaleDirectories = () => {
   if (!fs.existsSync(LOCALES_DIR)) {
     return [];
   }
 
-  return fs.readdirSync(LOCALES_DIR, { withFileTypes: true })
-    .filter(dirent => dirent.isDirectory())
-    .map(dirent => dirent.name);
+  return fs
+    .readdirSync(LOCALES_DIR, { withFileTypes: true })
+    .filter((dirent) => dirent.isDirectory())
+    .map((dirent) => dirent.name);
 };
 
 const findDottedKeys = (node: unknown, segments: string[] = []): string[] => {
-  if (!node || typeof node !== 'object') {
+  if (!node || typeof node !== "object") {
     return [];
   }
 
   const issues: string[] = [];
   for (const [key, value] of Object.entries(node as Record<string, unknown>)) {
-    if (key.includes('.')) {
-      issues.push([...segments, key].join('.'));
+    if (key.includes(".")) {
+      issues.push([...segments, key].join("."));
     }
     issues.push(...findDottedKeys(value, [...segments, key]));
   }
@@ -32,21 +33,21 @@ const findDottedKeys = (node: unknown, segments: string[] = []): string[] => {
 
 const localeDirectories = getLocaleDirectories();
 
-describe('Translation key structure', () => {
-  test('should locate locales directory', () => {
+describe("Translation key structure", () => {
+  test("should locate locales directory", () => {
     expect(fs.existsSync(LOCALES_DIR)).toBe(true);
   });
 
-  test('should have at least one locale directory', () => {
+  test("should have at least one locale directory", () => {
     expect(localeDirectories.length).toBeGreaterThan(0);
   });
 
-  test.each(localeDirectories)('should not contain dotted keys in %s/translation.toml', (localeDir) => {
-    const translationFile = path.join(LOCALES_DIR, localeDir, 'translation.toml');
+  test.each(localeDirectories)("should not contain dotted keys in %s/translation.toml", (localeDir) => {
+    const translationFile = path.join(LOCALES_DIR, localeDir, "translation.toml");
     expect(fs.existsSync(translationFile)).toBe(true);
 
-    const data = parse(fs.readFileSync(translationFile, 'utf8'));
+    const data = parse(fs.readFileSync(translationFile, "utf8"));
     const dottedKeys = findDottedKeys(data);
-    expect(dottedKeys, `Dotted keys found in ${localeDir}: ${dottedKeys.join(', ')}`).toHaveLength(0);
+    expect(dottedKeys, `Dotted keys found in ${localeDir}: ${dottedKeys.join(", ")}`).toHaveLength(0);
   });
 });
diff --git a/frontend/src/core/tests/utils/testFileHelpers.ts b/frontend/src/core/tests/utils/testFileHelpers.ts
index 72f435e871..e6df7e5284 100644
--- a/frontend/src/core/tests/utils/testFileHelpers.ts
+++ b/frontend/src/core/tests/utils/testFileHelpers.ts
@@ -2,15 +2,15 @@
  * Test utilities for creating StirlingFile objects in tests
  */
 
-import { StirlingFile, createStirlingFile } from '@app/types/fileContext';
+import { StirlingFile, createStirlingFile } from "@app/types/fileContext";
 
 /**
  * Create a StirlingFile object for testing purposes
  */
 export function createTestStirlingFile(
   name: string,
-  content: string = 'test content',
-  type: string = 'application/pdf'
+  content: string = "test content",
+  type: string = "application/pdf",
 ): StirlingFile {
   const file = new File([content], name, { type });
   return createStirlingFile(file);
@@ -19,10 +19,8 @@ export function createTestStirlingFile(
 /**
  * Create multiple StirlingFile objects for testing
  */
-export function createTestFilesWithId(
-  files: Array<{ name: string; content?: string; type?: string }>
-): StirlingFile[] {
-  return files.map(({ name, content = 'test content', type = 'application/pdf' }) =>
-    createTestStirlingFile(name, content, type)
+export function createTestFilesWithId(files: Array<{ name: string; content?: string; type?: string }>): StirlingFile[] {
+  return files.map(({ name, content = "test content", type = "application/pdf" }) =>
+    createTestStirlingFile(name, content, type),
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/core/theme/mantineTheme.ts b/frontend/src/core/theme/mantineTheme.ts
index 2254566a6d..ac36eb515f 100644
--- a/frontend/src/core/theme/mantineTheme.ts
+++ b/frontend/src/core/theme/mantineTheme.ts
@@ -1,61 +1,61 @@
-import { createTheme, MantineColorsTuple } from '@mantine/core';
+import { createTheme, MantineColorsTuple } from "@mantine/core";
 
 // Define color tuples using CSS variables
 const primary: MantineColorsTuple = [
-  'var(--color-primary-50)',
-  'var(--color-primary-100)',
-  'var(--color-primary-200)',
-  'var(--color-primary-300)',
-  'var(--color-primary-400)',
-  'var(--color-primary-500)',
-  'var(--color-primary-600)',
-  'var(--color-primary-700)',
-  'var(--color-primary-800)',
-  'var(--color-primary-900)',
+  "var(--color-primary-50)",
+  "var(--color-primary-100)",
+  "var(--color-primary-200)",
+  "var(--color-primary-300)",
+  "var(--color-primary-400)",
+  "var(--color-primary-500)",
+  "var(--color-primary-600)",
+  "var(--color-primary-700)",
+  "var(--color-primary-800)",
+  "var(--color-primary-900)",
 ];
 
 const green: MantineColorsTuple = [
-  'var(--color-green-50)',
-  'var(--color-green-100)',
-  'var(--color-green-200)',
-  'var(--color-green-300)',
-  'var(--color-green-400)',
-  'var(--color-green-500)',
-  'var(--color-green-600)',
-  'var(--color-green-700)',
-  'var(--color-green-800)',
-  'var(--color-green-900)',
+  "var(--color-green-50)",
+  "var(--color-green-100)",
+  "var(--color-green-200)",
+  "var(--color-green-300)",
+  "var(--color-green-400)",
+  "var(--color-green-500)",
+  "var(--color-green-600)",
+  "var(--color-green-700)",
+  "var(--color-green-800)",
+  "var(--color-green-900)",
 ];
 
 const yellow: MantineColorsTuple = [
-  'var(--color-yellow-50)',
-  'var(--color-yellow-100)',
-  'var(--color-yellow-200)',
-  'var(--color-yellow-300)',
-  'var(--color-yellow-400)',
-  'var(--color-yellow-500)',
-  'var(--color-yellow-600)',
-  'var(--color-yellow-700)',
-  'var(--color-yellow-800)',
-  'var(--color-yellow-900)',
+  "var(--color-yellow-50)",
+  "var(--color-yellow-100)",
+  "var(--color-yellow-200)",
+  "var(--color-yellow-300)",
+  "var(--color-yellow-400)",
+  "var(--color-yellow-500)",
+  "var(--color-yellow-600)",
+  "var(--color-yellow-700)",
+  "var(--color-yellow-800)",
+  "var(--color-yellow-900)",
 ];
 
 const gray: MantineColorsTuple = [
-  'var(--color-gray-50)',
-  'var(--color-gray-100)',
-  'var(--color-gray-200)',
-  'var(--color-gray-300)',
-  'var(--color-gray-400)',
-  'var(--color-gray-500)',
-  'var(--color-gray-600)',
-  'var(--color-gray-700)',
-  'var(--color-gray-800)',
-  'var(--color-gray-900)',
+  "var(--color-gray-50)",
+  "var(--color-gray-100)",
+  "var(--color-gray-200)",
+  "var(--color-gray-300)",
+  "var(--color-gray-400)",
+  "var(--color-gray-500)",
+  "var(--color-gray-600)",
+  "var(--color-gray-700)",
+  "var(--color-gray-800)",
+  "var(--color-gray-900)",
 ];
 
 export const mantineTheme = createTheme({
   // Primary color
-  primaryColor: 'primary',
+  primaryColor: "primary",
 
   // Color palette
   colors: {
@@ -67,38 +67,38 @@ export const mantineTheme = createTheme({
 
   // Spacing system - uses CSS variables
   spacing: {
-    xs: 'var(--space-xs)',
-    sm: 'var(--space-sm)',
-    md: 'var(--space-md)',
-    lg: 'var(--space-lg)',
-    xl: 'var(--space-xl)',
+    xs: "var(--space-xs)",
+    sm: "var(--space-sm)",
+    md: "var(--space-md)",
+    lg: "var(--space-lg)",
+    xl: "var(--space-xl)",
   },
 
   // Border radius system
   radius: {
-    xs: 'var(--radius-xs)',
-    sm: 'var(--radius-sm)',
-    md: 'var(--radius-md)',
-    lg: 'var(--radius-lg)',
-    xl: 'var(--radius-xl)',
+    xs: "var(--radius-xs)",
+    sm: "var(--radius-sm)",
+    md: "var(--radius-md)",
+    lg: "var(--radius-lg)",
+    xl: "var(--radius-xl)",
   },
 
   // Shadow system
   shadows: {
-    xs: 'var(--shadow-xs)',
-    sm: 'var(--shadow-sm)',
-    md: 'var(--shadow-md)',
-    lg: 'var(--shadow-lg)',
-    xl: 'var(--shadow-xl)',
+    xs: "var(--shadow-xs)",
+    sm: "var(--shadow-sm)",
+    md: "var(--shadow-md)",
+    lg: "var(--shadow-lg)",
+    xl: "var(--shadow-xl)",
   },
 
   // Custom variables for specific components
   other: {
     crop: {
-      overlayBorder: 'var(--color-primary-500)',
-      overlayBackground: 'rgba(59, 130, 246, 0.1)', // Blue with 10% opacity
-      handleColor: 'var(--color-primary-500)',
-      handleBorder: 'var(--bg-surface)',
+      overlayBorder: "var(--color-primary-500)",
+      overlayBackground: "rgba(59, 130, 246, 0.1)", // Blue with 10% opacity
+      handleColor: "var(--color-primary-500)",
+      handleBorder: "var(--bg-surface)",
     },
   },
 
@@ -107,20 +107,20 @@ export const mantineTheme = createTheme({
     Button: {
       styles: {
         root: {
-          fontWeight: 'var(--font-weight-medium)',
-          transition: 'all 0.2s ease',
+          fontWeight: "var(--font-weight-medium)",
+          transition: "all 0.2s ease",
         },
       },
       variants: {
         // Custom button variant for PDF tools
         pdfTool: (_theme: any) => ({
           root: {
-            backgroundColor: 'var(--bg-surface)',
-            border: '1px solid var(--border-default)',
-            color: 'var(--text-primary)',
-            '&:hover': {
-              backgroundColor: 'var(--hover-bg)',
-              borderColor: 'var(--color-primary-500)',
+            backgroundColor: "var(--bg-surface)",
+            border: "1px solid var(--border-default)",
+            color: "var(--text-primary)",
+            "&:hover": {
+              backgroundColor: "var(--hover-bg)",
+              borderColor: "var(--color-primary-500)",
             },
           },
         }),
@@ -130,8 +130,8 @@ export const mantineTheme = createTheme({
     Paper: {
       styles: {
         root: {
-          backgroundColor: 'var(--bg-surface)',
-          border: '1px solid var(--border-subtle)',
+          backgroundColor: "var(--bg-surface)",
+          border: "1px solid var(--border-subtle)",
         },
       },
     },
@@ -139,26 +139,26 @@ export const mantineTheme = createTheme({
     Card: {
       styles: {
         root: {
-          backgroundColor: 'var(--bg-surface)',
-          border: '1px solid var(--border-subtle)',
-          boxShadow: 'var(--shadow-sm)',
+          backgroundColor: "var(--bg-surface)",
+          border: "1px solid var(--border-subtle)",
+          boxShadow: "var(--shadow-sm)",
         },
       },
     },
     Textarea: {
       styles: (_theme: any) => ({
         input: {
-          backgroundColor: 'var(--bg-surface)',
-          borderColor: 'var(--border-default)',
-          color: 'var(--text-primary)',
-          '&:focus': {
-            borderColor: 'var(--color-primary-500)',
-            boxShadow: '0 0 0 1px var(--color-primary-500)',
+          backgroundColor: "var(--bg-surface)",
+          borderColor: "var(--border-default)",
+          color: "var(--text-primary)",
+          "&:focus": {
+            borderColor: "var(--color-primary-500)",
+            boxShadow: "0 0 0 1px var(--color-primary-500)",
           },
         },
         label: {
-          color: 'var(--text-secondary)',
-          fontWeight: 'var(--font-weight-medium)',
+          color: "var(--text-secondary)",
+          fontWeight: "var(--font-weight-medium)",
         },
       }),
     },
@@ -166,35 +166,35 @@ export const mantineTheme = createTheme({
     TextInput: {
       styles: (_theme: any) => ({
         input: {
-          backgroundColor: 'var(--bg-surface)',
-          borderColor: 'var(--border-default)',
-          color: 'var(--text-primary)',
-          '&:focus': {
-            borderColor: 'var(--color-primary-500)',
-            boxShadow: '0 0 0 1px var(--color-primary-500)',
+          backgroundColor: "var(--bg-surface)",
+          borderColor: "var(--border-default)",
+          color: "var(--text-primary)",
+          "&:focus": {
+            borderColor: "var(--color-primary-500)",
+            boxShadow: "0 0 0 1px var(--color-primary-500)",
           },
         },
         label: {
-          color: 'var(--text-secondary)',
-          fontWeight: 'var(--font-weight-medium)',
+          color: "var(--text-secondary)",
+          fontWeight: "var(--font-weight-medium)",
         },
       }),
     },
 
-     PasswordInput: {
+    PasswordInput: {
       styles: (_theme: any) => ({
         input: {
-          backgroundColor: 'var(--bg-surface)',
-          borderColor: 'var(--border-default)',
-          color: 'var(--text-primary)',
-          '&:focus': {
-            borderColor: 'var(--color-primary-500)',
-            boxShadow: '0 0 0 1px var(--color-primary-500)',
+          backgroundColor: "var(--bg-surface)",
+          borderColor: "var(--border-default)",
+          color: "var(--text-primary)",
+          "&:focus": {
+            borderColor: "var(--color-primary-500)",
+            boxShadow: "0 0 0 1px var(--color-primary-500)",
           },
         },
         label: {
-          color: 'var(--text-secondary)',
-          fontWeight: 'var(--font-weight-medium)',
+          color: "var(--text-secondary)",
+          fontWeight: "var(--font-weight-medium)",
         },
       }),
     },
@@ -202,27 +202,27 @@ export const mantineTheme = createTheme({
     Select: {
       styles: {
         input: {
-          backgroundColor: 'var(--bg-surface)',
-          borderColor: 'var(--border-default)',
-          color: 'var(--text-primary)',
-          '&:focus': {
-            borderColor: 'var(--color-primary-500)',
-            boxShadow: '0 0 0 1px var(--color-primary-500)',
+          backgroundColor: "var(--bg-surface)",
+          borderColor: "var(--border-default)",
+          color: "var(--text-primary)",
+          "&:focus": {
+            borderColor: "var(--color-primary-500)",
+            boxShadow: "0 0 0 1px var(--color-primary-500)",
           },
         },
         label: {
-          color: 'var(--text-secondary)',
-          fontWeight: 'var(--font-weight-medium)',
+          color: "var(--text-secondary)",
+          fontWeight: "var(--font-weight-medium)",
         },
         dropdown: {
-          backgroundColor: 'var(--bg-surface)',
-          borderColor: 'var(--border-subtle)',
-          boxShadow: 'var(--shadow-lg)',
+          backgroundColor: "var(--bg-surface)",
+          borderColor: "var(--border-subtle)",
+          boxShadow: "var(--shadow-lg)",
         },
         option: {
-          color: 'var(--text-primary)',
-          '--combobox-option-hover': 'var(--hover-bg)',
-          '--combobox-option-selected': 'var(--color-primary-100)',
+          color: "var(--text-primary)",
+          "--combobox-option-hover": "var(--hover-bg)",
+          "--combobox-option-selected": "var(--color-primary-100)",
         } as any,
       },
     },
@@ -230,40 +230,40 @@ export const mantineTheme = createTheme({
     MultiSelect: {
       styles: {
         input: {
-          backgroundColor: 'var(--bg-surface)',
-          borderColor: 'var(--border-default)',
-          color: 'var(--text-primary)',
-          '&:focus': {
-            borderColor: 'var(--color-primary-500)',
-            boxShadow: '0 0 0 1px var(--color-primary-500)',
+          backgroundColor: "var(--bg-surface)",
+          borderColor: "var(--border-default)",
+          color: "var(--text-primary)",
+          "&:focus": {
+            borderColor: "var(--color-primary-500)",
+            boxShadow: "0 0 0 1px var(--color-primary-500)",
           },
         },
         label: {
-          color: 'var(--text-secondary)',
-          fontWeight: 'var(--font-weight-medium)',
+          color: "var(--text-secondary)",
+          fontWeight: "var(--font-weight-medium)",
         },
         dropdown: {
-          backgroundColor: 'var(--bg-surface)',
-          borderColor: 'var(--border-subtle)',
-          boxShadow: 'var(--shadow-lg)',
+          backgroundColor: "var(--bg-surface)",
+          borderColor: "var(--border-subtle)",
+          boxShadow: "var(--shadow-lg)",
         },
         option: {
-          color: 'var(--text-primary)',
-          '--combobox-option-hover': 'var(--hover-bg)',
-          '--combobox-option-selected': 'var(--color-primary-100)',
+          color: "var(--text-primary)",
+          "--combobox-option-hover": "var(--hover-bg)",
+          "--combobox-option-selected": "var(--color-primary-100)",
         } as any,
       },
     },
     Tooltip: {
       styles: {
         tooltip: {
-          backgroundColor: 'var( --tooltip-title-bg)',
-          color: 'var( --tooltip-title-color)',
-          border: '1px solid var(--tooltip-borderp)',
-          fontSize: '0.75rem',
-          fontWeight: '500',
-          boxShadow: 'var(--shadow-md)',
-          borderRadius: 'var(--radius-sm)',
+          backgroundColor: "var( --tooltip-title-bg)",
+          color: "var( --tooltip-title-color)",
+          border: "1px solid var(--tooltip-borderp)",
+          fontSize: "0.75rem",
+          fontWeight: "500",
+          boxShadow: "var(--shadow-md)",
+          borderRadius: "var(--radius-sm)",
         },
       },
     },
@@ -271,14 +271,14 @@ export const mantineTheme = createTheme({
     Checkbox: {
       styles: {
         input: {
-          borderColor: 'var(--border-default)',
-          '&:checked': {
-            backgroundColor: 'var(--color-primary-500)',
-            borderColor: 'var(--color-primary-500)',
+          borderColor: "var(--border-default)",
+          "&:checked": {
+            backgroundColor: "var(--color-primary-500)",
+            borderColor: "var(--color-primary-500)",
           },
         },
         label: {
-          color: 'var(--text-primary)',
+          color: "var(--text-primary)",
         },
       },
     },
@@ -286,20 +286,20 @@ export const mantineTheme = createTheme({
     Slider: {
       styles: {
         track: {
-          backgroundColor: 'var(--bg-muted)',
+          backgroundColor: "var(--bg-muted)",
         },
         bar: {
-          backgroundColor: 'var(--color-primary-500)',
+          backgroundColor: "var(--color-primary-500)",
         },
         thumb: {
-          backgroundColor: 'var(--color-primary-500)',
-          borderColor: 'var(--color-primary-500)',
+          backgroundColor: "var(--color-primary-500)",
+          borderColor: "var(--color-primary-500)",
         },
         mark: {
-          borderColor: 'var(--border-default)',
+          borderColor: "var(--border-default)",
         },
         markLabel: {
-          color: 'var(--text-muted)',
+          color: "var(--text-muted)",
         },
       },
     },
@@ -307,17 +307,17 @@ export const mantineTheme = createTheme({
     Modal: {
       styles: {
         content: {
-          backgroundColor: 'var(--bg-surface)',
-          border: '1px solid var(--border-subtle)',
-          boxShadow: 'var(--shadow-xl)',
+          backgroundColor: "var(--bg-surface)",
+          border: "1px solid var(--border-subtle)",
+          boxShadow: "var(--shadow-xl)",
         },
         header: {
-          backgroundColor: 'var(--bg-surface)',
-          borderBottom: '1px solid var(--border-subtle)',
+          backgroundColor: "var(--bg-surface)",
+          borderBottom: "1px solid var(--border-subtle)",
         },
         title: {
-          color: 'var(--text-primary)',
-          fontWeight: 'var(--font-weight-semibold)',
+          color: "var(--text-primary)",
+          fontWeight: "var(--font-weight-semibold)",
         },
       },
     },
@@ -325,15 +325,15 @@ export const mantineTheme = createTheme({
     Notification: {
       styles: {
         root: {
-          backgroundColor: 'var(--bg-surface)',
-          border: '1px solid var(--border-subtle)',
-          boxShadow: 'var(--shadow-lg)',
+          backgroundColor: "var(--bg-surface)",
+          border: "1px solid var(--border-subtle)",
+          boxShadow: "var(--shadow-lg)",
         },
         title: {
-          color: 'var(--text-primary)',
+          color: "var(--text-primary)",
         },
         description: {
-          color: 'var(--text-secondary)',
+          color: "var(--text-secondary)",
         },
       },
     },
@@ -341,15 +341,15 @@ export const mantineTheme = createTheme({
     SegmentedControl: {
       styles: {
         root: {
-          backgroundColor: 'var(--bg-muted)',
-          border: '1px solid var(--border-subtle)',
+          backgroundColor: "var(--bg-muted)",
+          border: "1px solid var(--border-subtle)",
         },
         control: {
-          color: 'var(--text-secondary)',
-          '&[dataActive]': {
-            backgroundColor: 'var(--bg-surface)',
-            color: 'var(--text-primary)',
-            boxShadow: 'var(--shadow-sm)',
+          color: "var(--text-secondary)",
+          "&[dataActive]": {
+            backgroundColor: "var(--bg-surface)",
+            color: "var(--text-primary)",
+            boxShadow: "var(--shadow-sm)",
           },
         },
       },
diff --git a/frontend/src/core/tools/AddAttachments.tsx b/frontend/src/core/tools/AddAttachments.tsx
index 8c8623782b..22d0fd0400 100644
--- a/frontend/src/core/tools/AddAttachments.tsx
+++ b/frontend/src/core/tools/AddAttachments.tsx
@@ -40,8 +40,8 @@ const AddAttachments = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =
   const hasResults = operation.files.length > 0 || operation.downloadUrl !== null;
 
   enum AddAttachmentsStep {
-    NONE = 'none',
-    ATTACHMENTS = 'attachments'
+    NONE = "none",
+    ATTACHMENTS = "attachments",
   }
 
   const accordion = useAccordionSteps<AddAttachmentsStep>({
@@ -49,12 +49,12 @@ const AddAttachments = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =
     initialStep: AddAttachmentsStep.ATTACHMENTS,
     stateConditions: {
       hasFiles,
-      hasResults: false // Don't collapse when there are results for add attachments
+      hasResults: false, // Don't collapse when there are results for add attachments
     },
     afterResults: () => {
       operation.resetResults();
       onPreviewFile?.(null);
-    }
+    },
   });
 
   const getSteps = () => {
@@ -86,9 +86,9 @@ const AddAttachments = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =
     },
     steps: getSteps(),
     executeButton: {
-      text: t('AddAttachmentsRequest.submit', 'Add Attachments'),
+      text: t("AddAttachmentsRequest.submit", "Add Attachments"),
       isVisible: !hasResults,
-      loadingText: t('loading'),
+      loadingText: t("loading"),
       onClick: handleExecute,
       endpointEnabled: endpointEnabled,
       paramsValid: params.validateParameters(),
@@ -96,7 +96,7 @@ const AddAttachments = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =
     review: {
       isVisible: hasResults,
       operation: operation,
-      title: t('AddAttachmentsRequest.results.title', 'Attachment Results'),
+      title: t("AddAttachmentsRequest.results.title", "Attachment Results"),
       onFileClick: (file) => onPreviewFile?.(file),
       onUndo: async () => {
         await operation.undoOperation();
diff --git a/frontend/src/core/tools/AddImage.tsx b/frontend/src/core/tools/AddImage.tsx
index 474e14a6e8..f833ef12ac 100644
--- a/frontend/src/core/tools/AddImage.tsx
+++ b/frontend/src/core/tools/AddImage.tsx
@@ -1,12 +1,12 @@
-import { createStampTool } from '@app/tools/stamp/createStampTool';
+import { createStampTool } from "@app/tools/stamp/createStampTool";
 
 // AddImage allows users to place image-only stamps
 const AddImage = createStampTool({
-  toolId: 'addImage',
-  translationScope: 'addImage',
-  allowedSignatureSources: ['image'],
-  defaultSignatureSource: 'image',
-  defaultSignatureType: 'image',
+  toolId: "addImage",
+  translationScope: "addImage",
+  allowedSignatureSources: ["image"],
+  defaultSignatureSource: "image",
+  defaultSignatureType: "image",
   enableApplyAction: true,
 });
 
diff --git a/frontend/src/core/tools/AddPageNumbers.tsx b/frontend/src/core/tools/AddPageNumbers.tsx
index 6a700de09f..4fe435eaf2 100644
--- a/frontend/src/core/tools/AddPageNumbers.tsx
+++ b/frontend/src/core/tools/AddPageNumbers.tsx
@@ -39,9 +39,9 @@ const AddPageNumbers = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =
   const hasResults = operation.files.length > 0 || operation.downloadUrl !== null;
 
   enum AddPageNumbersStep {
-    NONE = 'none',
-    POSITION_AND_PAGES = 'position_and_pages',
-    CUSTOMIZE = 'customize'
+    NONE = "none",
+    POSITION_AND_PAGES = "position_and_pages",
+    CUSTOMIZE = "customize",
   }
 
   const accordion = useAccordionSteps<AddPageNumbersStep>({
@@ -49,12 +49,12 @@ const AddPageNumbers = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =
     initialStep: AddPageNumbersStep.POSITION_AND_PAGES,
     stateConditions: {
       hasFiles,
-      hasResults
+      hasResults,
     },
     afterResults: () => {
       operation.resetResults();
       onPreviewFile?.(null);
-    }
+    },
   });
 
   const getSteps = () => {
@@ -102,9 +102,9 @@ const AddPageNumbers = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =
     },
     steps: getSteps(),
     executeButton: {
-      text: t('addPageNumbers.submit', 'Add Page Numbers'),
+      text: t("addPageNumbers.submit", "Add Page Numbers"),
       isVisible: !hasResults,
-      loadingText: t('loading'),
+      loadingText: t("loading"),
       onClick: handleExecute,
       endpointEnabled: endpointEnabled,
       paramsValid: params.validateParameters(),
@@ -112,7 +112,7 @@ const AddPageNumbers = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =
     review: {
       isVisible: hasResults,
       operation: operation,
-      title: t('addPageNumbers.results.title', 'Page Number Results'),
+      title: t("addPageNumbers.results.title", "Page Number Results"),
       onFileClick: (file) => onPreviewFile?.(file),
       onUndo: async () => {
         await operation.undoOperation();
@@ -124,4 +124,4 @@ const AddPageNumbers = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =
 
 AddPageNumbers.tool = () => useAddPageNumbersOperation;
 
-export default AddPageNumbers as ToolComponent;
\ No newline at end of file
+export default AddPageNumbers as ToolComponent;
diff --git a/frontend/src/core/tools/AddPassword.tsx b/frontend/src/core/tools/AddPassword.tsx
index a8b58d4310..a46af57733 100644
--- a/frontend/src/core/tools/AddPassword.tsx
+++ b/frontend/src/core/tools/AddPassword.tsx
@@ -28,8 +28,6 @@ const AddPassword = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   // Endpoint validation
   const { enabled: endpointEnabled, loading: endpointLoading } = useEndpointEnabled(addPasswordParams.getEndpointName());
 
-
-
   useEffect(() => {
     addPasswordOperation.resetResults();
     onPreviewFile?.(null);
diff --git a/frontend/src/core/tools/AddStamp.tsx b/frontend/src/core/tools/AddStamp.tsx
index eb2fef7949..1c02fb7c69 100644
--- a/frontend/src/core/tools/AddStamp.tsx
+++ b/frontend/src/core/tools/AddStamp.tsx
@@ -32,7 +32,6 @@ const AddStamp = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
     onPreviewFile?.(null);
   }, [params.parameters]);
 
-
   const handleExecute = async () => {
     try {
       await operation.executeOperation(params.parameters, selectedFiles);
@@ -48,9 +47,9 @@ const AddStamp = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   const hasResults = operation.files.length > 0 || operation.downloadUrl !== null;
 
   enum AddStampStep {
-    NONE = 'none',
-    STAMP_SETUP = 'stampSetup',
-    POSITION_FORMATTING = 'positionFormatting'
+    NONE = "none",
+    STAMP_SETUP = "stampSetup",
+    POSITION_FORMATTING = "positionFormatting",
   }
 
   const accordion = useAccordionSteps<AddStampStep>({
@@ -58,12 +57,12 @@ const AddStamp = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
     initialStep: AddStampStep.STAMP_SETUP,
     stateConditions: {
       hasFiles,
-      hasResults
+      hasResults,
     },
     afterResults: () => {
       operation.resetResults();
       onPreviewFile?.(null);
-    }
+    },
   });
 
   const getSteps = () => {
@@ -94,17 +93,17 @@ const AddStamp = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
       content: (
         <Stack gap="md" justify="space-between">
           {/* Mode toggle: Quick grid vs Custom drag - only show for image stamps */}
-          {params.parameters.stampType === 'image' && (
+          {params.parameters.stampType === "image" && (
             <ButtonSelector
-              value={quickPositionModeSelected ? 'quick' : 'custom'}
-              onChange={(v: 'quick' | 'custom') => {
-                const isQuick = v === 'quick';
+              value={quickPositionModeSelected ? "quick" : "custom"}
+              onChange={(v: "quick" | "custom") => {
+                const isQuick = v === "quick";
                 setQuickPositionModeSelected(isQuick);
                 setCustomPositionModeSelected(!isQuick);
               }}
               options={[
-                { value: 'quick', label: t('quickPosition', 'Quick Position') },
-                { value: 'custom', label: t('customPosition', 'Custom Position') },
+                { value: "quick", label: t("quickPosition", "Quick Position") },
+                { value: "custom", label: t("customPosition", "Custom Position") },
               ]}
               disabled={endpointLoading}
               buttonClassName={styles.modeToggleButton}
@@ -112,14 +111,18 @@ const AddStamp = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
             />
           )}
 
-          {params.parameters.stampType === 'image' && customPositionModeSelected && (
+          {params.parameters.stampType === "image" && customPositionModeSelected && (
             <div className={styles.informationContainer}>
-              <Text className={styles.informationText}>{t('AddStampRequest.customPosition', 'Drag the stamp to the desired location in the preview window.')}</Text>
+              <Text className={styles.informationText}>
+                {t("AddStampRequest.customPosition", "Drag the stamp to the desired location in the preview window.")}
+              </Text>
             </div>
           )}
-          {params.parameters.stampType === 'image' && !customPositionModeSelected && (
+          {params.parameters.stampType === "image" && !customPositionModeSelected && (
             <div className={styles.informationContainer}>
-              <Text className={styles.informationText}>{t('AddStampRequest.quickPosition', 'Select a position on the page to place the stamp.')}</Text>
+              <Text className={styles.informationText}>
+                {t("AddStampRequest.quickPosition", "Select a position on the page to place the stamp.")}
+              </Text>
             </div>
           )}
 
@@ -133,12 +136,12 @@ const AddStamp = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
           <ObscuredOverlay
             obscured={
               accordion.currentStep === AddStampStep.POSITION_FORMATTING &&
-              ((params.parameters.stampType === 'text' && params.parameters.stampText.trim().length === 0) ||
-               (params.parameters.stampType === 'image' && !params.parameters.stampImage))
+              ((params.parameters.stampType === "text" && params.parameters.stampText.trim().length === 0) ||
+                (params.parameters.stampType === "image" && !params.parameters.stampImage))
             }
             overlayMessage={
               <Text size="sm" c="white" fw={600}>
-                {t('AddStampRequest.noStampSelected', 'No stamp selected. Return to Step 1.')}
+                {t("AddStampRequest.noStampSelected", "No stamp selected. Return to Step 1.")}
               </Text>
             }
           >
@@ -146,7 +149,7 @@ const AddStamp = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
               parameters={params.parameters}
               onParameterChange={params.updateParameter}
               file={selectedFiles[0] || null}
-              showQuickGrid={params.parameters.stampType === 'text' ? true : quickPositionModeSelected}
+              showQuickGrid={params.parameters.stampType === "text" ? true : quickPositionModeSelected}
             />
           </ObscuredOverlay>
         </Stack>
@@ -163,9 +166,9 @@ const AddStamp = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
     },
     steps: getSteps(),
     executeButton: {
-      text: t('AddStampRequest.submit', 'Add Stamp'),
+      text: t("AddStampRequest.submit", "Add Stamp"),
       isVisible: !hasResults,
-      loadingText: t('loading'),
+      loadingText: t("loading"),
       onClick: handleExecute,
       endpointEnabled: endpointEnabled,
       paramsValid: params.validateParameters(),
@@ -173,7 +176,7 @@ const AddStamp = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
     review: {
       isVisible: hasResults,
       operation: operation,
-      title: t('AddStampRequest.results.title', 'Stamp Results'),
+      title: t("AddStampRequest.results.title", "Stamp Results"),
       onFileClick: (file) => onPreviewFile?.(file),
       onUndo: async () => {
         await operation.undoOperation();
@@ -186,5 +189,3 @@ const AddStamp = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
 AddStamp.tool = () => useAddStampOperation;
 
 export default AddStamp as ToolComponent;
-
-
diff --git a/frontend/src/core/tools/AddText.tsx b/frontend/src/core/tools/AddText.tsx
index c2e1af00ad..638de2bd78 100644
--- a/frontend/src/core/tools/AddText.tsx
+++ b/frontend/src/core/tools/AddText.tsx
@@ -1,12 +1,12 @@
-import { createStampTool } from '@app/tools/stamp/createStampTool';
+import { createStampTool } from "@app/tools/stamp/createStampTool";
 
 // AddText is text-only annotation (no drawing, no images, no save-to-library)
 const AddText = createStampTool({
-  toolId: 'addText',
-  translationScope: 'addText',
-  allowedSignatureSources: ['text'],
-  defaultSignatureSource: 'text',
-  defaultSignatureType: 'text',
+  toolId: "addText",
+  translationScope: "addText",
+  allowedSignatureSources: ["text"],
+  defaultSignatureSource: "text",
+  defaultSignatureType: "text",
   enableApplyAction: true,
 });
 
diff --git a/frontend/src/core/tools/AddWatermark.tsx b/frontend/src/core/tools/AddWatermark.tsx
index 3782663fda..360132aa0e 100644
--- a/frontend/src/core/tools/AddWatermark.tsx
+++ b/frontend/src/core/tools/AddWatermark.tsx
@@ -41,7 +41,6 @@ const AddWatermark = ({ onPreviewFile, onComplete, onError }: BaseToolProps) =>
   // Endpoint validation
   const { enabled: endpointEnabled, loading: endpointLoading } = useEndpointEnabled("add-watermark");
 
-
   useEffect(() => {
     watermarkOperation.resetResults();
     onPreviewFile?.(null);
diff --git a/frontend/src/core/tools/AdjustContrast.tsx b/frontend/src/core/tools/AdjustContrast.tsx
index 2ec772d6ca..0603db9a40 100644
--- a/frontend/src/core/tools/AdjustContrast.tsx
+++ b/frontend/src/core/tools/AdjustContrast.tsx
@@ -1,32 +1,31 @@
-import { useTranslation } from 'react-i18next';
-import { useEffect, useMemo, useState } from 'react';
-import { createToolFlow } from '@app/components/tools/shared/createToolFlow';
-import { BaseToolProps, ToolComponent } from '@app/types/tool';
-import { useBaseTool } from '@app/hooks/tools/shared/useBaseTool';
-import { useAdjustContrastParameters } from '@app/hooks/tools/adjustContrast/useAdjustContrastParameters';
-import { useAdjustContrastOperation } from '@app/hooks/tools/adjustContrast/useAdjustContrastOperation';
-import AdjustContrastBasicSettings from '@app/components/tools/adjustContrast/AdjustContrastBasicSettings';
-import AdjustContrastColorSettings from '@app/components/tools/adjustContrast/AdjustContrastColorSettings';
-import AdjustContrastPreview from '@app/components/tools/adjustContrast/AdjustContrastPreview';
-import { useAccordionSteps } from '@app/hooks/tools/shared/useAccordionSteps';
-import NavigationArrows from '@app/components/shared/filePreview/NavigationArrows';
+import { useTranslation } from "react-i18next";
+import { useEffect, useMemo, useState } from "react";
+import { createToolFlow } from "@app/components/tools/shared/createToolFlow";
+import { BaseToolProps, ToolComponent } from "@app/types/tool";
+import { useBaseTool } from "@app/hooks/tools/shared/useBaseTool";
+import { useAdjustContrastParameters } from "@app/hooks/tools/adjustContrast/useAdjustContrastParameters";
+import { useAdjustContrastOperation } from "@app/hooks/tools/adjustContrast/useAdjustContrastOperation";
+import AdjustContrastBasicSettings from "@app/components/tools/adjustContrast/AdjustContrastBasicSettings";
+import AdjustContrastColorSettings from "@app/components/tools/adjustContrast/AdjustContrastColorSettings";
+import AdjustContrastPreview from "@app/components/tools/adjustContrast/AdjustContrastPreview";
+import { useAccordionSteps } from "@app/hooks/tools/shared/useAccordionSteps";
+import NavigationArrows from "@app/components/shared/filePreview/NavigationArrows";
 
 const AdjustContrast = (props: BaseToolProps) => {
   const { t } = useTranslation();
 
-  const base = useBaseTool(
-    'adjustContrast',
-    useAdjustContrastParameters,
-    useAdjustContrastOperation,
-    props
-  );
+  const base = useBaseTool("adjustContrast", useAdjustContrastParameters, useAdjustContrastOperation, props);
 
-  enum Step { NONE='none', BASIC='basic', COLORS='colors' }
+  enum Step {
+    NONE = "none",
+    BASIC = "basic",
+    COLORS = "colors",
+  }
   const accordion = useAccordionSteps<Step>({
     noneValue: Step.NONE,
     initialStep: Step.BASIC,
     stateConditions: { hasFiles: base.hasFiles, hasResults: base.hasResults },
-    afterResults: base.handleSettingsReset
+    afterResults: base.handleSettingsReset,
   });
 
   // Track which selected file is being previewed. Clamp when selection changes.
@@ -53,7 +52,7 @@ const AdjustContrast = (props: BaseToolProps) => {
     },
     steps: [
       {
-        title: t('adjustContrast.basic', 'Basic Adjustments'),
+        title: t("adjustContrast.basic", "Basic Adjustments"),
         isCollapsed: accordion.getCollapsedState(Step.BASIC),
         onCollapsedClick: () => accordion.handleStepToggle(Step.BASIC),
         content: (
@@ -65,7 +64,7 @@ const AdjustContrast = (props: BaseToolProps) => {
         ),
       },
       {
-        title: t('adjustContrast.adjustColors', 'Adjust Colors'),
+        title: t("adjustContrast.adjustColors", "Adjust Colors"),
         isCollapsed: accordion.getCollapsedState(Step.COLORS),
         onCollapsedClick: () => accordion.handleStepToggle(Step.COLORS),
         content: (
@@ -79,36 +78,29 @@ const AdjustContrast = (props: BaseToolProps) => {
     ],
     preview: (
       <div>
-        <NavigationArrows
-          onPrevious={handlePrev}
-          onNext={handleNext}
-          disabled={totalSelected <= 1}
-        >
-          <div style={{ width: '100%' }}>
-            <AdjustContrastPreview
-              file={currentFile || null}
-              parameters={base.params.parameters}
-            />
+        <NavigationArrows onPrevious={handlePrev} onNext={handleNext} disabled={totalSelected <= 1}>
+          <div style={{ width: "100%" }}>
+            <AdjustContrastPreview file={currentFile || null} parameters={base.params.parameters} />
           </div>
         </NavigationArrows>
         {totalSelected > 1 && (
-          <div style={{ textAlign: 'center', marginTop: 8, fontSize: 12, color: 'var(--text-color-muted)' }}>
+          <div style={{ textAlign: "center", marginTop: 8, fontSize: 12, color: "var(--text-color-muted)" }}>
             {`${previewIndex + 1} of ${totalSelected}`}
           </div>
         )}
       </div>
     ),
     executeButton: {
-      text: t('adjustContrast.confirm', 'Confirm'),
+      text: t("adjustContrast.confirm", "Confirm"),
       isVisible: !base.hasResults,
-      loadingText: t('loading'),
+      loadingText: t("loading"),
       onClick: base.handleExecute,
       paramsValid: true,
     },
     review: {
       isVisible: base.hasResults,
       operation: base.operation,
-      title: t('adjustContrast.results.title', 'Adjusted PDF'),
+      title: t("adjustContrast.results.title", "Adjusted PDF"),
       onFileClick: base.handleThumbnailClick,
       onUndo: base.handleUndo,
     },
@@ -117,5 +109,3 @@ const AdjustContrast = (props: BaseToolProps) => {
 };
 
 export default AdjustContrast as ToolComponent;
-
-
diff --git a/frontend/src/core/tools/AdjustPageScale.tsx b/frontend/src/core/tools/AdjustPageScale.tsx
index 52fadd8260..fbf24a5279 100644
--- a/frontend/src/core/tools/AdjustPageScale.tsx
+++ b/frontend/src/core/tools/AdjustPageScale.tsx
@@ -11,12 +11,7 @@ const AdjustPageScale = (props: BaseToolProps) => {
   const { t } = useTranslation();
   const adjustPageScaleTips = useAdjustPageScaleTips();
 
-  const base = useBaseTool(
-    'adjustPageScale',
-    useAdjustPageScaleParameters,
-    useAdjustPageScaleOperation,
-    props
-  );
+  const base = useBaseTool("adjustPageScale", useAdjustPageScaleParameters, useAdjustPageScaleOperation, props);
 
   return createToolFlow({
     files: {
diff --git a/frontend/src/core/tools/Annotate.tsx b/frontend/src/core/tools/Annotate.tsx
index cb06f65d61..8774a92a24 100644
--- a/frontend/src/core/tools/Annotate.tsx
+++ b/frontend/src/core/tools/Annotate.tsx
@@ -1,63 +1,68 @@
-import { useEffect, useState, useContext, useCallback, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
+import { useEffect, useState, useContext, useCallback, useRef } from "react";
+import { useTranslation } from "react-i18next";
 
-import { createToolFlow } from '@app/components/tools/shared/createToolFlow';
-import { useNavigation } from '@app/contexts/NavigationContext';
-import { useFileSelection } from '@app/contexts/FileContext';
-import { BaseToolProps } from '@app/types/tool';
-import { useSignature } from '@app/contexts/SignatureContext';
-import { ViewerContext, useViewer } from '@app/contexts/ViewerContext';
-import type { AnnotationToolId, AnnotationEvent, AnnotationSelection, AnnotationRect } from '@app/components/viewer/viewerTypes';
-import { useAnnotationStyleState } from '@app/tools/annotate/useAnnotationStyleState';
-import { useAnnotationSelection } from '@app/tools/annotate/useAnnotationSelection';
-import { AnnotationPanel } from '@app/tools/annotate/AnnotationPanel';
+import { createToolFlow } from "@app/components/tools/shared/createToolFlow";
+import { useNavigation } from "@app/contexts/NavigationContext";
+import { useFileSelection } from "@app/contexts/FileContext";
+import { BaseToolProps } from "@app/types/tool";
+import { useSignature } from "@app/contexts/SignatureContext";
+import { ViewerContext, useViewer } from "@app/contexts/ViewerContext";
+import type {
+  AnnotationToolId,
+  AnnotationEvent,
+  AnnotationSelection,
+  AnnotationRect,
+} from "@app/components/viewer/viewerTypes";
+import { useAnnotationStyleState } from "@app/tools/annotate/useAnnotationStyleState";
+import { useAnnotationSelection } from "@app/tools/annotate/useAnnotationSelection";
+import { AnnotationPanel } from "@app/tools/annotate/AnnotationPanel";
 
 // Tools that require drawing/interacting with the PDF and should disable pan mode
 const DRAWING_TOOLS: AnnotationToolId[] = [
-  'highlight',
-  'underline',
-  'strikeout',
-  'squiggly',
-  'ink',
-  'inkHighlighter',
-  'text',
-  'note',
-  'textComment',
-  'insertText',
-  'replaceText',
-  'square',
-  'circle',
-  'line',
-  'lineArrow',
-  'polyline',
-  'polygon',
-  'stamp',
-  'signatureStamp',
-  'signatureInk',
+  "highlight",
+  "underline",
+  "strikeout",
+  "squiggly",
+  "ink",
+  "inkHighlighter",
+  "text",
+  "note",
+  "textComment",
+  "insertText",
+  "replaceText",
+  "square",
+  "circle",
+  "line",
+  "lineArrow",
+  "polyline",
+  "polygon",
+  "stamp",
+  "signatureStamp",
+  "signatureInk",
 ];
 
 const KNOWN_ANNOTATION_TOOLS: AnnotationToolId[] = [
-  'select',
-  'highlight',
-  'underline',
-  'strikeout',
-  'squiggly',
-  'ink',
-  'inkHighlighter',
-  'text',
-  'note',
-  'textComment',
-  'insertText',
-  'replaceText',
-  'square',
-  'circle',
-  'line',
-  'lineArrow',
-  'polyline',
-  'polygon',
-  'stamp',
-  'signatureStamp',
-  'signatureInk',
+  "select",
+  "highlight",
+  "underline",
+  "strikeout",
+  "squiggly",
+  "ink",
+  "inkHighlighter",
+  "text",
+  "note",
+  "textComment",
+  "insertText",
+  "replaceText",
+  "square",
+  "circle",
+  "line",
+  "lineArrow",
+  "polyline",
+  "polygon",
+  "stamp",
+  "signatureStamp",
+  "signatureInk",
 ];
 
 const isKnownAnnotationTool = (toolId: string | undefined | null): toolId is AnnotationToolId =>
@@ -80,16 +85,19 @@ const Annotate = (_props: BaseToolProps) => {
   } = useSignature();
   const viewerContext = useContext(ViewerContext);
   const viewerContextRef = useRef(viewerContext);
-  useEffect(() => { viewerContextRef.current = viewerContext; }, [viewerContext]);
-  const { getZoomState, registerImmediateZoomUpdate, applyChanges, activeFileIndex, panActions, setCommentsSidebarVisible } = useViewer();
+  useEffect(() => {
+    viewerContextRef.current = viewerContext;
+  }, [viewerContext]);
+  const { getZoomState, registerImmediateZoomUpdate, applyChanges, activeFileIndex, panActions, setCommentsSidebarVisible } =
+    useViewer();
+
+  const [activeTool, setActiveTool] = useState<AnnotationToolId>("select");
 
-  const [activeTool, setActiveTool] = useState<AnnotationToolId>('select');
-  
   // Track the previous file index to detect file switches
   const prevFileIndexRef = useRef<number>(activeFileIndex);
-  const activeToolRef = useRef<AnnotationToolId>('select');
+  const activeToolRef = useRef<AnnotationToolId>("select");
   const wasAnnotateActiveRef = useRef<boolean>(false);
-  const [selectedTextDraft, setSelectedTextDraft] = useState<string>('');
+  const [selectedTextDraft, setSelectedTextDraft] = useState<string>("");
   const [selectedFontSize, setSelectedFontSize] = useState<number>(14);
   const [stampImageData, setStampImageData] = useState<string | undefined>();
   const [stampImageSize, setStampImageSize] = useState<{ width: number; height: number } | null>(null);
@@ -100,7 +108,7 @@ const Annotate = (_props: BaseToolProps) => {
   const [currentZoom, setCurrentZoom] = useState(() => {
     const zoomState = getZoomState();
     if (!zoomState) return 1;
-    if (typeof zoomState.zoomPercent === 'number') {
+    if (typeof zoomState.zoomPercent === "number") {
       return Math.max(zoomState.zoomPercent / 100, 0.01);
     }
     return Math.max(zoomState.currentZoom ?? 1, 0.01);
@@ -126,7 +134,7 @@ const Annotate = (_props: BaseToolProps) => {
         height: size.height * factor,
       };
     },
-    [currentZoom]
+    [currentZoom],
   );
 
   const computeStampDisplaySize = useCallback((natural: { width: number; height: number } | null) => {
@@ -144,12 +152,7 @@ const Annotate = (_props: BaseToolProps) => {
     };
   }, []);
 
-  const {
-    styleState,
-    styleActions,
-    buildToolOptions,
-    getActiveColor,
-  } = useAnnotationStyleState(cssToPdfSize);
+  const { styleState, styleActions, buildToolOptions, getActiveColor } = useAnnotationStyleState(cssToPdfSize);
 
   const {
     setInkWidth,
@@ -193,7 +196,7 @@ const Annotate = (_props: BaseToolProps) => {
   }, []);
 
   useEffect(() => {
-    const isAnnotateActive = workbench === 'viewer' && selectedTool === 'annotate';
+    const isAnnotateActive = workbench === "viewer" && selectedTool === "annotate";
     if (wasAnnotateActiveRef.current && !isAnnotateActive) {
       annotationApiRef?.current?.deactivateTools?.();
       signatureApiRef?.current?.deactivateTools?.();
@@ -202,10 +205,10 @@ const Annotate = (_props: BaseToolProps) => {
     } else if (!wasAnnotateActiveRef.current && isAnnotateActive) {
       // When entering annotate mode, activate the select tool by default
       // Also reset React state to match — EmbedPDF always starts at 'select' here
-      setActiveTool('select');
-      activeToolRef.current = 'select';
-      const toolOptions = buildToolOptions('select');
-      annotationApiRef?.current?.activateAnnotationTool?.('select', toolOptions);
+      setActiveTool("select");
+      activeToolRef.current = "select";
+      const toolOptions = buildToolOptions("select");
+      annotationApiRef?.current?.activateAnnotationTool?.("select", toolOptions);
     }
     wasAnnotateActiveRef.current = isAnnotateActive;
   }, [workbench, selectedTool, annotationApiRef, signatureApiRef, setPlacementMode, buildToolOptions, viewerContext]);
@@ -230,7 +233,7 @@ const Annotate = (_props: BaseToolProps) => {
     } else {
       const unsubscribe = historyApi.subscribe(updateAvailability);
       return () => {
-        if (typeof unsubscribe === 'function') {
+        if (typeof unsubscribe === "function") {
           unsubscribe();
         }
         if (interval) clearInterval(interval);
@@ -248,9 +251,7 @@ const Annotate = (_props: BaseToolProps) => {
 
     viewerContext.setAnnotationMode(true);
     const toolOptions =
-      activeTool === 'stamp'
-        ? buildToolOptions('stamp', { stampImageData, stampImageSize })
-        : buildToolOptions(activeTool);
+      activeTool === "stamp" ? buildToolOptions("stamp", { stampImageData, stampImageSize }) : buildToolOptions(activeTool);
     annotationApiRef?.current?.activateAnnotationTool?.(activeTool, toolOptions);
   }, [viewerContext?.isAnnotationMode, signatureApiRef, activeTool, buildToolOptions, stampImageData, stampImageSize]);
 
@@ -259,25 +260,25 @@ const Annotate = (_props: BaseToolProps) => {
   useEffect(() => {
     if (prevFileIndexRef.current !== activeFileIndex) {
       prevFileIndexRef.current = activeFileIndex;
-      
+
       // Reset to select mode when switching files
       // This forces the user to re-select their tool, which ensures proper activation on the new PDF
-      if (activeTool !== 'select') {
-        setActiveTool('select');
-        activeToolRef.current = 'select';
-        
+      if (activeTool !== "select") {
+        setActiveTool("select");
+        activeToolRef.current = "select";
+
         // Clean up placement mode if we were in stamp tool
         setPlacementMode(false);
         setSignatureConfig(null);
-        
+
         // Small delay to ensure the new EmbedPDF instance is ready, then activate select mode
         const timer = setTimeout(() => {
           if (annotationApiRef?.current) {
             annotationApiRef.current.deselectAnnotation?.();
-            annotationApiRef.current.activateAnnotationTool?.('select');
+            annotationApiRef.current.activateAnnotationTool?.("select");
           }
         }, 100);
-        
+
         return () => clearTimeout(timer);
       }
     }
@@ -285,7 +286,7 @@ const Annotate = (_props: BaseToolProps) => {
 
   const activateAnnotationTool = (toolId: AnnotationToolId) => {
     // If leaving stamp tool, clean up placement mode
-    if (activeTool === 'stamp' && toolId !== 'stamp') {
+    if (activeTool === "stamp" && toolId !== "stamp") {
       setPlacementMode(false);
       setSignatureConfig(null);
     }
@@ -310,16 +311,14 @@ const Annotate = (_props: BaseToolProps) => {
     // Change the tool
     setActiveTool(toolId);
     const options =
-      toolId === 'stamp'
-        ? buildToolOptions('stamp', { stampImageData, stampImageSize })
-        : buildToolOptions(toolId);
+      toolId === "stamp" ? buildToolOptions("stamp", { stampImageData, stampImageSize }) : buildToolOptions(toolId);
 
     // For stamp, apply the image if we have one
     annotationApiRef?.current?.setAnnotationStyle?.(toolId, options);
-    annotationApiRef?.current?.activateAnnotationTool?.(toolId === 'stamp' ? 'stamp' : toolId, options);
+    annotationApiRef?.current?.activateAnnotationTool?.(toolId === "stamp" ? "stamp" : toolId, options);
 
     // Auto-open comments sidebar when a comment tool is selected
-    if (['textComment', 'insertText', 'replaceText'].includes(toolId)) {
+    if (["textComment", "insertText", "replaceText"].includes(toolId)) {
       setCommentsSidebarVisible(true);
     }
 
@@ -331,9 +330,9 @@ const Annotate = (_props: BaseToolProps) => {
 
   useEffect(() => {
     // push style updates to EmbedPDF when sliders/colors change
-    if (activeTool === 'stamp') {
-      const options = buildToolOptions('stamp', { stampImageData, stampImageSize });
-      annotationApiRef?.current?.setAnnotationStyle?.('stamp', options);
+    if (activeTool === "stamp") {
+      const options = buildToolOptions("stamp", { stampImageData, stampImageSize });
+      annotationApiRef?.current?.setAnnotationStyle?.("stamp", options);
     } else {
       annotationApiRef?.current?.setAnnotationStyle?.(activeTool, buildToolOptions(activeTool));
     }
@@ -344,10 +343,10 @@ const Annotate = (_props: BaseToolProps) => {
     // When preview size changes, update stamp annotation sizing
     // The SignatureAPIBridge will use placementPreviewSize from SignatureContext
     // and apply the converted size to the stamp tool automatically
-    if (activeTool === 'stamp' && stampImageData) {
+    if (activeTool === "stamp" && stampImageData) {
       const size = placementPreviewSize ?? stampImageSize;
-      const stampOptions = buildToolOptions('stamp', { stampImageData, stampImageSize: size ?? null });
-      annotationApiRef?.current?.setAnnotationStyle?.('stamp', stampOptions);
+      const stampOptions = buildToolOptions("stamp", { stampImageData, stampImageSize: size ?? null });
+      annotationApiRef?.current?.setAnnotationStyle?.("stamp", stampOptions);
     }
   }, [placementPreviewSize, activeTool, stampImageData, signatureApiRef, stampImageSize, cssToPdfSize, buildToolOptions]);
 
@@ -355,17 +354,17 @@ const Annotate = (_props: BaseToolProps) => {
   // EmbedPDF fires 'create' + committed:true when placement is finalised
   useEffect(() => {
     const unsubscribe = annotationApiRef?.current?.onAnnotationEvent?.((event: AnnotationEvent) => {
-      if (event.type === 'create' && event.committed) {
+      if (event.type === "create" && event.committed) {
         const toolId = activeToolRef.current;
-        if (['text', 'note', 'textComment', 'insertText', 'replaceText'].includes(toolId)) {
-          setActiveTool('select');
-          activeToolRef.current = 'select';
-          annotationApiRef?.current?.activateAnnotationTool?.('select');
+        if (["text", "note", "textComment", "insertText", "replaceText"].includes(toolId)) {
+          setActiveTool("select");
+          activeToolRef.current = "select";
+          annotationApiRef?.current?.activateAnnotationTool?.("select");
         }
       }
     });
     return () => {
-      if (typeof unsubscribe === 'function') unsubscribe();
+      if (typeof unsubscribe === "function") unsubscribe();
     };
   }, [annotationApiRef?.current]);
 
@@ -379,7 +378,7 @@ const Annotate = (_props: BaseToolProps) => {
       const active = document.activeElement as HTMLElement | null;
       if (!active?.isContentEditable) return;
 
-      const pageEl = active.closest('[data-page-index]') as HTMLElement | null;
+      const pageEl = active.closest("[data-page-index]") as HTMLElement | null;
       if (!pageEl) return;
 
       const editingWrapper = active.parentElement;
@@ -388,24 +387,24 @@ const Annotate = (_props: BaseToolProps) => {
 
       active.blur();
 
-      const onSelectionMenu = (target as HTMLElement).closest?.('[data-annotation-selection-menu]');
+      const onSelectionMenu = (target as HTMLElement).closest?.("[data-annotation-selection-menu]");
       if (onSelectionMenu) return;
 
       const pageParent = pageEl.parentElement;
       if (!pageParent) return;
-      const synthetic = new PointerEvent('pointerdown', {
+      const synthetic = new PointerEvent("pointerdown", {
         bubbles: true,
         cancelable: true,
         clientX: e.clientX,
         clientY: e.clientY,
         pointerId: 1,
-        pointerType: 'mouse',
+        pointerType: "mouse",
       });
       pageParent.dispatchEvent(synthetic);
     };
 
-    document.addEventListener('mousedown', handleCapture, true);
-    return () => document.removeEventListener('mousedown', handleCapture, true);
+    document.addEventListener("mousedown", handleCapture, true);
+    return () => document.removeEventListener("mousedown", handleCapture, true);
   }, []);
 
   // Keyboard shortcuts: Escape (cancel drawing), Backspace/Delete (delete selected), Ctrl+C/V (copy/paste)
@@ -414,24 +413,26 @@ const Annotate = (_props: BaseToolProps) => {
       const el = document.activeElement;
       if (!el) return false;
       const tag = (el as HTMLElement).tagName;
-      return tag === 'INPUT' || tag === 'TEXTAREA' || (el as HTMLElement).isContentEditable;
+      return tag === "INPUT" || tag === "TEXTAREA" || (el as HTMLElement).isContentEditable;
     };
 
     const handler = (e: KeyboardEvent) => {
       if (isInputFocused()) return;
 
       // Backspace / Delete: delete selected annotation(s)
-      if (e.key === 'Backspace' || e.key === 'Delete') {
+      if (e.key === "Backspace" || e.key === "Delete") {
         const multiSelected = annotationApiRef?.current?.getSelectedAnnotations?.();
         if (multiSelected && multiSelected.length > 0) {
           e.preventDefault();
-          const toDelete = multiSelected.map((s: AnnotationSelection) => {
-            const ann = s.object ?? s;
-            return {
-              pageIndex: ann.pageIndex ?? 0,
-              id: ann.id ?? ann.uid ?? '',
-            };
-          }).filter((a: { id: string }) => a.id);
+          const toDelete = multiSelected
+            .map((s: AnnotationSelection) => {
+              const ann = s.object ?? s;
+              return {
+                pageIndex: ann.pageIndex ?? 0,
+                id: ann.id ?? ann.uid ?? "",
+              };
+            })
+            .filter((a: { id: string }) => a.id);
           if (toDelete.length > 0) {
             annotationApiRef?.current?.deleteAnnotations?.(toDelete);
           }
@@ -441,7 +442,7 @@ const Annotate = (_props: BaseToolProps) => {
         if (!selected) return;
         e.preventDefault();
         const pageIndex: number = selected.pageIndex ?? selected.object?.pageIndex ?? 0;
-        const annotationId: string = selected.id ?? selected.object?.id ?? selected.uid ?? selected.object?.uid ?? '';
+        const annotationId: string = selected.id ?? selected.object?.id ?? selected.uid ?? selected.object?.uid ?? "";
         if (annotationId != null) {
           annotationApiRef?.current?.deleteAnnotation?.(pageIndex, annotationId);
         }
@@ -449,7 +450,7 @@ const Annotate = (_props: BaseToolProps) => {
       }
 
       // Ctrl+C: copy selected annotation
-      if ((e.ctrlKey || e.metaKey) && e.key === 'c') {
+      if ((e.ctrlKey || e.metaKey) && e.key === "c") {
         const selected: AnnotationSelection | null = annotationApiRef?.current?.getSelectedAnnotation?.() ?? null;
         if (!selected) return;
         e.preventDefault();
@@ -460,7 +461,7 @@ const Annotate = (_props: BaseToolProps) => {
       }
 
       // Ctrl+V: paste copied annotation (offset by ~20 PDF pts)
-      if ((e.ctrlKey || e.metaKey) && e.key === 'v') {
+      if ((e.ctrlKey || e.metaKey) && e.key === "v") {
         const clip = clipboardRef.current;
         if (!clip) return;
         e.preventDefault();
@@ -468,17 +469,18 @@ const Annotate = (_props: BaseToolProps) => {
         const OFFSET = 20;
         const pasted: Record<string, unknown> = { ...annotation };
         // Assign a new id so EmbedPDF tracks the copy and delete works on it
-        pasted.id = typeof crypto !== 'undefined' && crypto.randomUUID
-          ? crypto.randomUUID()
-          : `paste-${Date.now()}-${Math.random().toString(36).slice(2)}`;
+        pasted.id =
+          typeof crypto !== "undefined" && crypto.randomUUID
+            ? crypto.randomUUID()
+            : `paste-${Date.now()}-${Math.random().toString(36).slice(2)}`;
         delete pasted.uid;
         // Remove appearance stream reference — the copy needs its own rendering
         delete pasted.appearanceModes;
         // Shift the EmbedPDF Rect: { origin: { x, y }, size: { width, height } }
         // PDF coords have y=0 at bottom, so down = smaller y; right = larger x
-        if (pasted.rect && typeof pasted.rect === 'object') {
+        if (pasted.rect && typeof pasted.rect === "object") {
           const r = pasted.rect as AnnotationRect;
-          if (r.origin && typeof r.origin === 'object') {
+          if (r.origin && typeof r.origin === "object") {
             pasted.rect = {
               ...r,
               origin: { x: r.origin.x + OFFSET, y: r.origin.y - OFFSET },
@@ -490,40 +492,52 @@ const Annotate = (_props: BaseToolProps) => {
       }
     };
 
-    window.addEventListener('keydown', handler);
-    return () => window.removeEventListener('keydown', handler);
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
   }, [buildToolOptions, annotationApiRef]);
 
-  const deriveToolFromAnnotation = useCallback((annotation: AnnotationSelection | null | undefined): AnnotationToolId | undefined => {
-    if (!annotation) return undefined;
-    const customToolId = annotation.customData?.toolId || annotation.customData?.annotationToolId;
-    if (isKnownAnnotationTool(customToolId)) {
-      return customToolId;
-    }
+  const deriveToolFromAnnotation = useCallback(
+    (annotation: AnnotationSelection | null | undefined): AnnotationToolId | undefined => {
+      if (!annotation) return undefined;
+      const customToolId = annotation.customData?.toolId || annotation.customData?.annotationToolId;
+      if (isKnownAnnotationTool(customToolId)) {
+        return customToolId;
+      }
 
-    const type = annotation.type ?? annotation.object?.type;
-    switch (type) {
-      case 3: return 'text';        // FREETEXT
-      case 4: return 'line';        // LINE
-      case 5: return 'square';      // SQUARE
-      case 6: return 'circle';      // CIRCLE
-      case 7: return 'polygon';     // POLYGON
-      case 8: return 'polyline';    // POLYLINE
-      case 9: return 'highlight';   // HIGHLIGHT
-      case 10: return 'underline';  // UNDERLINE
-      case 11: return 'squiggly';   // SQUIGGLY
-      case 12: return 'strikeout';  // STRIKEOUT
-      case 13: return 'stamp';      // STAMP
-      case 15: return 'ink';        // INK
-      default: return undefined;
-    }
-  }, []);
+      const type = annotation.type ?? annotation.object?.type;
+      switch (type) {
+        case 3:
+          return "text"; // FREETEXT
+        case 4:
+          return "line"; // LINE
+        case 5:
+          return "square"; // SQUARE
+        case 6:
+          return "circle"; // CIRCLE
+        case 7:
+          return "polygon"; // POLYGON
+        case 8:
+          return "polyline"; // POLYLINE
+        case 9:
+          return "highlight"; // HIGHLIGHT
+        case 10:
+          return "underline"; // UNDERLINE
+        case 11:
+          return "squiggly"; // SQUIGGLY
+        case 12:
+          return "strikeout"; // STRIKEOUT
+        case 13:
+          return "stamp"; // STAMP
+        case 15:
+          return "ink"; // INK
+        default:
+          return undefined;
+      }
+    },
+    [],
+  );
 
-  const {
-    selectedAnn,
-    setSelectedAnn,
-    setSelectedAnnId,
-  } = useAnnotationSelection({
+  const { selectedAnn, setSelectedAnn, setSelectedAnnId } = useAnnotationSelection({
     annotationApiRef,
     deriveToolFromAnnotation,
     activeToolRef,
@@ -558,7 +572,7 @@ const Annotate = (_props: BaseToolProps) => {
       ? []
       : [
           {
-            title: t('annotation.title', 'Annotate'),
+            title: t("annotation.title", "Annotate"),
             isCollapsed: false,
             onCollapsedClick: undefined,
             content: (
@@ -608,9 +622,9 @@ const Annotate = (_props: BaseToolProps) => {
         thumbnails: [],
         isGeneratingThumbnails: false,
         downloadUrl: null,
-        downloadFilename: '',
+        downloadFilename: "",
         isLoading: false,
-        status: '',
+        status: "",
         errorMessage: null,
         progress: null,
         executeOperation: async () => {},
@@ -619,7 +633,7 @@ const Annotate = (_props: BaseToolProps) => {
         cancelOperation: () => {},
         undoOperation: async () => {},
       },
-      title: '',
+      title: "",
       onFileClick: () => {},
       onUndo: () => {},
     },
diff --git a/frontend/src/core/tools/AutoRename.tsx b/frontend/src/core/tools/AutoRename.tsx
index fba80fba30..32bccc774a 100644
--- a/frontend/src/core/tools/AutoRename.tsx
+++ b/frontend/src/core/tools/AutoRename.tsx
@@ -7,18 +7,13 @@ import { useAutoRenameParameters } from "@app/hooks/tools/autoRename/useAutoRena
 import { useAutoRenameOperation } from "@app/hooks/tools/autoRename/useAutoRenameOperation";
 import { useAutoRenameTips } from "@app/components/tooltips/useAutoRenameTips";
 
-const AutoRename =(props: BaseToolProps) => {
+const AutoRename = (props: BaseToolProps) => {
   const { t } = useTranslation();
   const autoRenameTips = useAutoRenameTips();
 
-  const base = useBaseTool(
-    'auto-rename-pdf-file',
-    useAutoRenameParameters,
-    useAutoRenameOperation,
-    props
-  );
+  const base = useBaseTool("auto-rename-pdf-file", useAutoRenameParameters, useAutoRenameOperation, props);
 
-return createToolFlow({
+  return createToolFlow({
     files: {
       selectedFiles: base.selectedFiles,
       isCollapsed: base.hasResults,
diff --git a/frontend/src/core/tools/Automate.tsx b/frontend/src/core/tools/Automate.tsx
index 11e7166569..117a50a66f 100644
--- a/frontend/src/core/tools/Automate.tsx
+++ b/frontend/src/core/tools/Automate.tsx
@@ -55,7 +55,7 @@ const Automate = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
       }
     };
 
-    registerToolReset('automate', stableResetFunction);
+    registerToolReset("automate", stableResetFunction);
   }, [registerToolReset]); // Only depend on registerToolReset which should be stable
 
   const handleStepChange = (data: AutomationStepData) => {
@@ -71,8 +71,12 @@ const Automate = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
     }
 
     // If navigating to run step with a different automation, reset results
-    if (data.step === AUTOMATION_STEPS.RUN && data.automation &&
-        stepData.automation && data.automation.id !== stepData.automation.id) {
+    if (
+      data.step === AUTOMATION_STEPS.RUN &&
+      data.automation &&
+      stepData.automation &&
+      data.automation.id !== stepData.automation.id
+    ) {
       automateOperation.resetResults();
     }
 
@@ -98,12 +102,14 @@ const Automate = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
             savedAutomations={savedAutomations}
             onCreateNew={() => handleStepChange({ step: AUTOMATION_STEPS.CREATION, mode: AutomationMode.CREATE })}
             onRun={(automation: AutomationConfig) => handleStepChange({ step: AUTOMATION_STEPS.RUN, automation })}
-            onEdit={(automation: AutomationConfig) => handleStepChange({ step: AUTOMATION_STEPS.CREATION, mode: AutomationMode.EDIT, automation })}
+            onEdit={(automation: AutomationConfig) =>
+              handleStepChange({ step: AUTOMATION_STEPS.CREATION, mode: AutomationMode.EDIT, automation })
+            }
             onDelete={async (automation: AutomationConfig) => {
               try {
                 await deleteAutomation(automation.id);
               } catch (error) {
-                console.error('Failed to delete automation:', error);
+                console.error("Failed to delete automation:", error);
                 onError?.(`Failed to delete automation: ${automation.name}`);
               }
             }}
@@ -111,7 +117,7 @@ const Automate = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
               try {
                 await copyFromSuggested(suggestedAutomation);
               } catch (error) {
-                console.error('Failed to copy suggested automation:', error);
+                console.error("Failed to copy suggested automation:", error);
                 onError?.(`Failed to copy automation: ${suggestedAutomation.name}`);
               }
             }}
@@ -121,7 +127,7 @@ const Automate = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
 
       case AUTOMATION_STEPS.CREATION:
         if (!stepData.mode) {
-          console.error('Creation mode is undefined');
+          console.error("Creation mode is undefined");
           return null;
         }
         return (
@@ -139,26 +145,22 @@ const Automate = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
 
       case AUTOMATION_STEPS.RUN:
         if (!stepData.automation) {
-          console.error('Automation config is undefined');
+          console.error("Automation config is undefined");
           return null;
         }
         return (
-          <AutomationRun
-            automation={stepData.automation}
-            onComplete={handleComplete}
-            automateOperation={automateOperation}
-          />
+          <AutomationRun automation={stepData.automation} onComplete={handleComplete} automateOperation={automateOperation} />
         );
 
       default:
-        return <div>{t('automate.invalidStep', 'Invalid step')}</div>;
+        return <div>{t("automate.invalidStep", "Invalid step")}</div>;
     }
   };
 
   const createStep = (title: string, props: any, content?: React.ReactNode) => ({
     title,
     ...props,
-    content
+    content,
   });
 
   // Always create files step to avoid conditional hook calls
@@ -168,35 +170,47 @@ const Automate = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   });
 
   const automationSteps = [
-    createStep(t('automate.selection.title', 'Automation Selection'), {
-      isVisible: true,
-      isCollapsed: currentStep !== AUTOMATION_STEPS.SELECTION,
-      onCollapsedClick: () => {
-        // Clear results when clicking back to selection
-        automateOperation.resetResults();
-        setCurrentStep(AUTOMATION_STEPS.SELECTION);
-        setStepData({ step: AUTOMATION_STEPS.SELECTION });
-      }
-    }, currentStep === AUTOMATION_STEPS.SELECTION ? renderCurrentStep() : null),
+    createStep(
+      t("automate.selection.title", "Automation Selection"),
+      {
+        isVisible: true,
+        isCollapsed: currentStep !== AUTOMATION_STEPS.SELECTION,
+        onCollapsedClick: () => {
+          // Clear results when clicking back to selection
+          automateOperation.resetResults();
+          setCurrentStep(AUTOMATION_STEPS.SELECTION);
+          setStepData({ step: AUTOMATION_STEPS.SELECTION });
+        },
+      },
+      currentStep === AUTOMATION_STEPS.SELECTION ? renderCurrentStep() : null,
+    ),
 
-    createStep(stepData.mode === AutomationMode.EDIT
-      ? t('automate.creation.editTitle', 'Edit Automation')
-      : t('automate.creation.createTitle', 'Create Automation'), {
-      isVisible: currentStep === AUTOMATION_STEPS.CREATION,
-      isCollapsed: false
-    }, currentStep === AUTOMATION_STEPS.CREATION ? renderCurrentStep() : null),
+    createStep(
+      stepData.mode === AutomationMode.EDIT
+        ? t("automate.creation.editTitle", "Edit Automation")
+        : t("automate.creation.createTitle", "Create Automation"),
+      {
+        isVisible: currentStep === AUTOMATION_STEPS.CREATION,
+        isCollapsed: false,
+      },
+      currentStep === AUTOMATION_STEPS.CREATION ? renderCurrentStep() : null,
+    ),
 
     // Files step - only visible during run mode
     {
       ...filesStep,
-      isVisible: currentStep === AUTOMATION_STEPS.RUN
+      isVisible: currentStep === AUTOMATION_STEPS.RUN,
     },
 
     // Run step
-    createStep(t('automate.run.title', 'Run Automation'), {
-      isVisible: currentStep === AUTOMATION_STEPS.RUN,
-      isCollapsed: hasResults,
-    }, currentStep === AUTOMATION_STEPS.RUN ? renderCurrentStep() : null)
+    createStep(
+      t("automate.run.title", "Run Automation"),
+      {
+        isVisible: currentStep === AUTOMATION_STEPS.RUN,
+        isCollapsed: hasResults,
+      },
+      currentStep === AUTOMATION_STEPS.RUN ? renderCurrentStep() : null,
+    ),
   ];
 
   return createToolFlow({
@@ -209,13 +223,13 @@ const Automate = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
     review: {
       isVisible: hasResults && currentStep === AUTOMATION_STEPS.RUN,
       operation: automateOperation,
-      title: t('automate.reviewTitle', 'Automation Results'),
+      title: t("automate.reviewTitle", "Automation Results"),
       onFileClick: (file: File) => {
         onPreviewFile?.(file);
-        actions.setWorkbench('viewer');
+        actions.setWorkbench("viewer");
       },
-      onUndo: handleUndo
-    }
+      onUndo: handleUndo,
+    },
   });
 };
 
diff --git a/frontend/src/core/tools/BookletImposition.tsx b/frontend/src/core/tools/BookletImposition.tsx
index 86a4ee344c..4c46313eb7 100644
--- a/frontend/src/core/tools/BookletImposition.tsx
+++ b/frontend/src/core/tools/BookletImposition.tsx
@@ -10,12 +10,7 @@ import { BaseToolProps, ToolComponent } from "@app/types/tool";
 const BookletImposition = (props: BaseToolProps) => {
   const { t } = useTranslation();
 
-  const base = useBaseTool(
-    'bookletImposition',
-    useBookletImpositionParameters,
-    useBookletImpositionOperation,
-    props
-  );
+  const base = useBaseTool("bookletImposition", useBookletImpositionParameters, useBookletImpositionOperation, props);
 
   const bookletTips = useBookletImpositionTips();
 
@@ -57,4 +52,4 @@ const BookletImposition = (props: BaseToolProps) => {
   });
 };
 
-export default BookletImposition as ToolComponent;
\ No newline at end of file
+export default BookletImposition as ToolComponent;
diff --git a/frontend/src/core/tools/CertSign.tsx b/frontend/src/core/tools/CertSign.tsx
index a272d7c63c..64e7fd418c 100644
--- a/frontend/src/core/tools/CertSign.tsx
+++ b/frontend/src/core/tools/CertSign.tsx
@@ -14,14 +14,9 @@ import { BaseToolProps, ToolComponent } from "@app/types/tool";
 
 const CertSign = (props: BaseToolProps) => {
   const { t } = useTranslation();
-  
-  const base = useBaseTool(
-    'certSign',
-    useCertSignParameters,
-    useCertSignOperation,
-    props
-  );
-  
+
+  const base = useBaseTool("certSign", useCertSignParameters, useCertSignOperation, props);
+
   const certTypeTips = useCertificateTypeTips();
   const appearanceTips = useSignatureAppearanceTips();
   const signModeTips = useSignModeTips();
@@ -29,20 +24,20 @@ const CertSign = (props: BaseToolProps) => {
   // Check if certificate files are configured for appearance step
   const areCertFilesConfigured = () => {
     const params = base.params.parameters;
-    
+
     // Auto mode (server certificate) - always configured
-    if (params.signMode === 'AUTO') {
+    if (params.signMode === "AUTO") {
       return true;
     }
-    
+
     // Manual mode - check for required files based on cert type
     switch (params.certType) {
-      case 'PEM':
+      case "PEM":
         return !!(params.privateKeyFile && params.certFile);
-      case 'PKCS12':
-      case 'PFX':
+      case "PKCS12":
+      case "PFX":
         return !!params.p12File;
-      case 'JKS':
+      case "JKS":
         return !!params.jksFile;
       default:
         return false;
@@ -69,35 +64,43 @@ const CertSign = (props: BaseToolProps) => {
           />
         ),
       },
-      ...(base.params.parameters.signMode === 'MANUAL' ? [{
-        title: t("certSign.certTypeStep.stepTitle", "Certificate Format"),
-        isCollapsed: base.settingsCollapsed,
-        onCollapsedClick: base.settingsCollapsed ? base.handleSettingsReset : undefined,
-        tooltip: certTypeTips,
-        content: (
-          <CertificateFormatSettings
-            parameters={base.params.parameters}
-            onParameterChange={base.params.updateParameter}
-            disabled={base.endpointLoading}
-          />
-        ),
-      }] : []),
-      ...(base.params.parameters.signMode === 'MANUAL' ? [{
-        title: t("certSign.certFiles.stepTitle", "Certificate Files"),
-        isCollapsed: base.settingsCollapsed,
-        onCollapsedClick: base.settingsCollapsed ? base.handleSettingsReset : undefined,
-        content: (
-          <CertificateFilesSettings
-            parameters={base.params.parameters}
-            onParameterChange={base.params.updateParameter}
-            disabled={base.endpointLoading}
-          />
-        ),
-      }] : []),
+      ...(base.params.parameters.signMode === "MANUAL"
+        ? [
+            {
+              title: t("certSign.certTypeStep.stepTitle", "Certificate Format"),
+              isCollapsed: base.settingsCollapsed,
+              onCollapsedClick: base.settingsCollapsed ? base.handleSettingsReset : undefined,
+              tooltip: certTypeTips,
+              content: (
+                <CertificateFormatSettings
+                  parameters={base.params.parameters}
+                  onParameterChange={base.params.updateParameter}
+                  disabled={base.endpointLoading}
+                />
+              ),
+            },
+          ]
+        : []),
+      ...(base.params.parameters.signMode === "MANUAL"
+        ? [
+            {
+              title: t("certSign.certFiles.stepTitle", "Certificate Files"),
+              isCollapsed: base.settingsCollapsed,
+              onCollapsedClick: base.settingsCollapsed ? base.handleSettingsReset : undefined,
+              content: (
+                <CertificateFilesSettings
+                  parameters={base.params.parameters}
+                  onParameterChange={base.params.updateParameter}
+                  disabled={base.endpointLoading}
+                />
+              ),
+            },
+          ]
+        : []),
       {
         title: t("certSign.appearance.stepTitle", "Signature Appearance"),
         isCollapsed: base.settingsCollapsed || !areCertFilesConfigured(),
-        onCollapsedClick: (base.settingsCollapsed || !areCertFilesConfigured()) ? base.handleSettingsReset : undefined,
+        onCollapsedClick: base.settingsCollapsed || !areCertFilesConfigured() ? base.handleSettingsReset : undefined,
         tooltip: appearanceTips,
         content: (
           <SignatureAppearanceSettings
@@ -129,4 +132,4 @@ const CertSign = (props: BaseToolProps) => {
 // Static method to get the operation hook for automation
 CertSign.tool = () => useCertSignOperation;
 
-export default CertSign as ToolComponent;
\ No newline at end of file
+export default CertSign as ToolComponent;
diff --git a/frontend/src/core/tools/ChangeMetadata.tsx b/frontend/src/core/tools/ChangeMetadata.tsx
index e44a298526..ee83dfbf97 100644
--- a/frontend/src/core/tools/ChangeMetadata.tsx
+++ b/frontend/src/core/tools/ChangeMetadata.tsx
@@ -14,15 +14,15 @@ import {
   useDeleteAllTips,
   useStandardMetadataTips,
   useDocumentDatesTips,
-  useAdvancedOptionsTips
+  useAdvancedOptionsTips,
 } from "@app/components/tooltips/useChangeMetadataTips";
 
 enum MetadataStep {
-  NONE = 'none',
-  DELETE_ALL = 'deleteAll',
-  STANDARD_METADATA = 'standardMetadata',
-  DOCUMENT_DATES = 'documentDates',
-  ADVANCED_OPTIONS = 'advancedOptions'
+  NONE = "none",
+  DELETE_ALL = "deleteAll",
+  STANDARD_METADATA = "standardMetadata",
+  DOCUMENT_DATES = "documentDates",
+  ADVANCED_OPTIONS = "advancedOptions",
 }
 
 const ChangeMetadata = (props: BaseToolProps) => {
@@ -34,12 +34,7 @@ const ChangeMetadata = (props: BaseToolProps) => {
   const documentDatesTips = useDocumentDatesTips();
   const advancedOptionsTips = useAdvancedOptionsTips();
 
-  const base = useBaseTool(
-    'changeMetadata',
-    useChangeMetadataParameters,
-    useChangeMetadataOperation,
-    props,
-  );
+  const base = useBaseTool("changeMetadata", useChangeMetadataParameters, useChangeMetadataOperation, props);
 
   // Extract metadata from uploaded files
   const { isExtractingMetadata } = useMetadataExtraction(base.params);
@@ -50,7 +45,7 @@ const ChangeMetadata = (props: BaseToolProps) => {
     initialStep: MetadataStep.DELETE_ALL,
     stateConditions: {
       hasFiles: base.hasFiles,
-      hasResults: base.hasResults
+      hasResults: base.hasResults,
     },
     afterResults: base.handleSettingsReset,
   });
@@ -120,11 +115,7 @@ const ChangeMetadata = (props: BaseToolProps) => {
     ];
 
     if (!base.params.parameters.deleteAll) {
-      steps.push(
-        createStandardMetadataStep(),
-        createDocumentDatesStep(),
-        createAdvancedOptionsStep()
-      );
+      steps.push(createStandardMetadataStep(), createDocumentDatesStep(), createAdvancedOptionsStep());
     }
 
     return steps;
diff --git a/frontend/src/core/tools/ChangePermissions.tsx b/frontend/src/core/tools/ChangePermissions.tsx
index baa38cce75..b56ccd62f6 100644
--- a/frontend/src/core/tools/ChangePermissions.tsx
+++ b/frontend/src/core/tools/ChangePermissions.tsx
@@ -11,12 +11,7 @@ const ChangePermissions = (props: BaseToolProps) => {
   const { t } = useTranslation();
   const changePermissionsTips = useChangePermissionsTips();
 
-  const base = useBaseTool(
-    'changePermissions',
-    useChangePermissionsParameters,
-    useChangePermissionsOperation,
-    props
-  );
+  const base = useBaseTool("changePermissions", useChangePermissionsParameters, useChangePermissionsOperation, props);
 
   return createToolFlow({
     files: {
diff --git a/frontend/src/core/tools/Compare.tsx b/frontend/src/core/tools/Compare.tsx
index f2deb6395b..89ebd2218e 100644
--- a/frontend/src/core/tools/Compare.tsx
+++ b/frontend/src/core/tools/Compare.tsx
@@ -1,34 +1,31 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import CompareRoundedIcon from '@mui/icons-material/CompareRounded';
-import { Box, Group, Stack, Text, Button, Modal, ActionIcon } from '@mantine/core';
-import SwapVertRoundedIcon from '@mui/icons-material/SwapVertRounded';
-import AddIcon from '@mui/icons-material/Add';
-import { createToolFlow } from '@app/components/tools/shared/createToolFlow';
-import { useBaseTool } from '@app/hooks/tools/shared/useBaseTool';
-import { BaseToolProps, ToolComponent } from '@app/types/tool';
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import CompareRoundedIcon from "@mui/icons-material/CompareRounded";
+import { Box, Group, Stack, Text, Button, Modal, ActionIcon } from "@mantine/core";
+import SwapVertRoundedIcon from "@mui/icons-material/SwapVertRounded";
+import AddIcon from "@mui/icons-material/Add";
+import { createToolFlow } from "@app/components/tools/shared/createToolFlow";
+import { useBaseTool } from "@app/hooks/tools/shared/useBaseTool";
+import { BaseToolProps, ToolComponent } from "@app/types/tool";
 import {
   useCompareParameters,
   defaultParameters as compareDefaultParameters,
-} from '@app/hooks/tools/compare/useCompareParameters';
-import {
-  useCompareOperation,
-  CompareOperationHook,
-} from '@app/hooks/tools/compare/useCompareOperation';
-import CompareWorkbenchView from '@app/components/tools/compare/CompareWorkbenchView';
-import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
-import { useNavigationActions } from '@app/contexts/NavigationContext';
-import { useFileContext, useFileState } from '@app/contexts/file/fileHooks';
-import type { FileId } from '@app/types/file';
-import type { StirlingFile } from '@app/types/fileContext';
-import DocumentThumbnail from '@app/components/shared/filePreview/DocumentThumbnail';
-import type { CompareWorkbenchData } from '@app/types/compare';
-import { getDefaultWorkbench } from '@app/types/workbench';
-import { useFilesModalContext } from '@app/contexts/FilesModalContext';
-import { truncateCenter } from '@app/utils/textUtils';
+} from "@app/hooks/tools/compare/useCompareParameters";
+import { useCompareOperation, CompareOperationHook } from "@app/hooks/tools/compare/useCompareOperation";
+import CompareWorkbenchView from "@app/components/tools/compare/CompareWorkbenchView";
+import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
+import { useNavigationActions } from "@app/contexts/NavigationContext";
+import { useFileContext, useFileState } from "@app/contexts/file/fileHooks";
+import type { FileId } from "@app/types/file";
+import type { StirlingFile } from "@app/types/fileContext";
+import DocumentThumbnail from "@app/components/shared/filePreview/DocumentThumbnail";
+import type { CompareWorkbenchData } from "@app/types/compare";
+import { getDefaultWorkbench } from "@app/types/workbench";
+import { useFilesModalContext } from "@app/contexts/FilesModalContext";
+import { truncateCenter } from "@app/utils/textUtils";
 
-const CUSTOM_VIEW_ID = 'compareWorkbenchView';
-const CUSTOM_WORKBENCH_ID = 'custom:compareWorkbenchView' as const;
+const CUSTOM_VIEW_ID = "compareWorkbenchView";
+const CUSTOM_WORKBENCH_ID = "custom:compareWorkbenchView" as const;
 
 const Compare = (props: BaseToolProps) => {
   const { t } = useTranslation();
@@ -43,13 +40,10 @@ const Compare = (props: BaseToolProps) => {
   const { state: fileState } = useFileState();
   const { openFilesModal } = useFilesModalContext();
 
-  const base = useBaseTool(
-    'compare',
-    useCompareParameters,
-    useCompareOperation,
-    props,
-    { minFiles: 2, ignoreViewerScope: true }
-  );
+  const base = useBaseTool("compare", useCompareParameters, useCompareOperation, props, {
+    minFiles: 2,
+    ignoreViewerScope: true,
+  });
 
   const operation = base.operation as CompareOperationHook;
   const params = base.params.parameters;
@@ -58,10 +52,22 @@ const Compare = (props: BaseToolProps) => {
   const [swapConfirmOpen, setSwapConfirmOpen] = useState(false);
   const [clearConfirmOpen, setClearConfirmOpen] = useState(false);
   const performClearSelected = useCallback(() => {
-    try { base.operation.cancelOperation(); } catch { console.error('Failed to cancel operation'); }
-    try { base.operation.resetResults(); } catch { console.error('Failed to reset results'); }
-    base.params.setParameters(prev => ({ ...prev, baseFileId: null, comparisonFileId: null }));
-    try { fileActions.clearSelections(); } catch { console.error('Failed to clear selections'); }
+    try {
+      base.operation.cancelOperation();
+    } catch {
+      console.error("Failed to cancel operation");
+    }
+    try {
+      base.operation.resetResults();
+    } catch {
+      console.error("Failed to reset results");
+    }
+    base.params.setParameters((prev) => ({ ...prev, baseFileId: null, comparisonFileId: null }));
+    try {
+      fileActions.clearSelections();
+    } catch {
+      console.error("Failed to clear selections");
+    }
     clearCustomWorkbenchViewData(CUSTOM_VIEW_ID);
     navigationActions.setWorkbench(getDefaultWorkbench());
   }, [base.operation, base.params, clearCustomWorkbenchViewData, fileActions, navigationActions]);
@@ -70,19 +76,18 @@ const Compare = (props: BaseToolProps) => {
     const handler = () => {
       performClearSelected();
     };
-    window.addEventListener('compare:clear-selected', handler as unknown as EventListener);
+    window.addEventListener("compare:clear-selected", handler as unknown as EventListener);
     return () => {
-      window.removeEventListener('compare:clear-selected', handler as unknown as EventListener);
+      window.removeEventListener("compare:clear-selected", handler as unknown as EventListener);
     };
   }, [performClearSelected]);
 
-
   useEffect(() => {
     registerCustomWorkbenchView({
       id: CUSTOM_VIEW_ID,
       workbenchId: CUSTOM_WORKBENCH_ID,
       // Use a static label at registration time to avoid re-registering on i18n changes
-      label: 'Compare view',
+      label: "Compare view",
       icon: compareIcon,
       component: CompareWorkbenchView,
     });
@@ -90,7 +95,7 @@ const Compare = (props: BaseToolProps) => {
     return () => {
       unregisterCustomWorkbenchView(CUSTOM_VIEW_ID);
     };
-  // Register once; avoid re-registering on translation/prop changes which clears data mid-flight
+    // Register once; avoid re-registering on translation/prop changes which clears data mid-flight
   }, []);
 
   // On mount: clear selections unless exactly 2 files are loaded.
@@ -114,7 +119,7 @@ const Compare = (props: BaseToolProps) => {
       // Transitioned to exactly 2 files — auto-fill both slots.
       const [firstId, secondId] = allIds as [FileId, FileId];
       fileActions.setSelectedFiles([firstId, secondId]);
-      base.params.setParameters(prev => {
+      base.params.setParameters((prev) => {
         if (prev.baseFileId === firstId && prev.comparisonFileId === secondId) return prev;
         return { ...prev, baseFileId: firstId, comparisonFileId: secondId };
       });
@@ -128,7 +133,7 @@ const Compare = (props: BaseToolProps) => {
 
     const nextBase = (selectedIds[0] ?? null) as FileId | null;
     const nextComp = (selectedIds[1] ?? null) as FileId | null;
-    base.params.setParameters(prev => {
+    base.params.setParameters((prev) => {
       if (prev.baseFileId === nextBase && prev.comparisonFileId === nextComp) return prev;
       return { ...prev, baseFileId: nextBase, comparisonFileId: nextComp };
     });
@@ -138,10 +143,10 @@ const Compare = (props: BaseToolProps) => {
   useEffect(() => {
     const allIds = fileState.files.ids as FileId[];
     if (params.baseFileId && !allIds.includes(params.baseFileId as FileId)) {
-      base.params.setParameters(prev => ({ ...prev, baseFileId: null }));
+      base.params.setParameters((prev) => ({ ...prev, baseFileId: null }));
     }
     if (params.comparisonFileId && !allIds.includes(params.comparisonFileId as FileId)) {
-      base.params.setParameters(prev => ({ ...prev, comparisonFileId: null }));
+      base.params.setParameters((prev) => ({ ...prev, comparisonFileId: null }));
     }
   }, [fileState.files.ids]);
 
@@ -166,14 +171,14 @@ const Compare = (props: BaseToolProps) => {
       lastWorkbenchDataRef.current = data;
       setCustomWorkbenchViewData(CUSTOM_VIEW_ID, data);
     },
-    [setCustomWorkbenchViewData]
+    [setCustomWorkbenchViewData],
   );
 
   const prepareWorkbenchForRun = useCallback(
     (
       baseId: FileId | null,
       compId: FileId | null,
-      options?: { baseFile?: StirlingFile | null; comparisonFile?: StirlingFile | null }
+      options?: { baseFile?: StirlingFile | null; comparisonFile?: StirlingFile | null },
     ) => {
       if (!baseId || !compId) {
         return;
@@ -181,15 +186,9 @@ const Compare = (props: BaseToolProps) => {
 
       const previous = lastWorkbenchDataRef.current;
       const resolvedBaseFile =
-        options?.baseFile ??
-        (baseId ? selectors.getFile(baseId) : null) ??
-        previous?.baseLocalFile ??
-        null;
+        options?.baseFile ?? (baseId ? selectors.getFile(baseId) : null) ?? previous?.baseLocalFile ?? null;
       const resolvedComparisonFile =
-        options?.comparisonFile ??
-        (compId ? selectors.getFile(compId) : null) ??
-        previous?.comparisonLocalFile ??
-        null;
+        options?.comparisonFile ?? (compId ? selectors.getFile(compId) : null) ?? previous?.comparisonLocalFile ?? null;
 
       updateWorkbenchData({
         result: null,
@@ -202,7 +201,7 @@ const Compare = (props: BaseToolProps) => {
 
       lastProcessedAtRef.current = null;
     },
-    [selectors, updateWorkbenchData]
+    [selectors, updateWorkbenchData],
   );
 
   useEffect(() => {
@@ -227,14 +226,9 @@ const Compare = (props: BaseToolProps) => {
       result.comparison.fileId === comparisonFileId
     ) {
       const previous = lastWorkbenchDataRef.current;
-      const baseLocalFile =
-        (baseFileId ? selectors.getFile(baseFileId) : null) ??
-        previous?.baseLocalFile ??
-        null;
+      const baseLocalFile = (baseFileId ? selectors.getFile(baseFileId) : null) ?? previous?.baseLocalFile ?? null;
       const comparisonLocalFile =
-        (comparisonFileId ? selectors.getFile(comparisonFileId) : null) ??
-        previous?.comparisonLocalFile ??
-        null;
+        (comparisonFileId ? selectors.getFile(comparisonFileId) : null) ?? previous?.comparisonLocalFile ?? null;
       updateWorkbenchData({
         result,
         baseFileId,
@@ -249,14 +243,9 @@ const Compare = (props: BaseToolProps) => {
 
     if (base.operation.isLoading) {
       const previous = lastWorkbenchDataRef.current;
-      const baseLocalFile =
-        (baseFileId ? selectors.getFile(baseFileId) : null) ??
-        previous?.baseLocalFile ??
-        null;
+      const baseLocalFile = (baseFileId ? selectors.getFile(baseFileId) : null) ?? previous?.baseLocalFile ?? null;
       const comparisonLocalFile =
-        (comparisonFileId ? selectors.getFile(comparisonFileId) : null) ??
-        previous?.comparisonLocalFile ??
-        null;
+        (comparisonFileId ? selectors.getFile(comparisonFileId) : null) ?? previous?.comparisonLocalFile ?? null;
       updateWorkbenchData({
         result: null,
         baseFileId,
@@ -280,12 +269,8 @@ const Compare = (props: BaseToolProps) => {
   const handleExecuteCompare = useCallback(async () => {
     const baseId = params.baseFileId as FileId | null;
     const compId = params.comparisonFileId as FileId | null;
-    const baseSel =
-      base.selectedFiles.find((file) => file.fileId === baseId) ??
-      (baseId ? selectors.getFile(baseId) : null);
-    const compSel =
-      base.selectedFiles.find((file) => file.fileId === compId) ??
-      (compId ? selectors.getFile(compId) : null);
+    const baseSel = base.selectedFiles.find((file) => file.fileId === baseId) ?? (baseId ? selectors.getFile(baseId) : null);
+    const compSel = base.selectedFiles.find((file) => file.fileId === compId) ?? (compId ? selectors.getFile(compId) : null);
     const selected: StirlingFile[] = [];
     if (baseSel) selected.push(baseSel);
     if (compSel) selected.push(compSel);
@@ -297,27 +282,23 @@ const Compare = (props: BaseToolProps) => {
       });
     }
 
-    await operation.executeOperation(
-      { ...params },
-      selected
-    );
+    await operation.executeOperation({ ...params }, selected);
   }, [base.selectedFiles, navigationActions, operation, params, prepareWorkbenchForRun, selectors]);
 
   // Run compare with explicit ids (used after swap so we don't depend on async state propagation)
-  const runCompareWithIds = useCallback(async (baseId: FileId | null, compId: FileId | null) => {
-    const nextParams = { ...params, baseFileId: baseId, comparisonFileId: compId };
-    const selected: StirlingFile[] = [];
-    const baseSel =
-      base.selectedFiles.find((file) => file.fileId === baseId) ??
-      (baseId ? selectors.getFile(baseId) : null);
-    const compSel =
-      base.selectedFiles.find((file) => file.fileId === compId) ??
-      (compId ? selectors.getFile(compId) : null);
-    if (baseSel) selected.push(baseSel);
-    if (compSel) selected.push(compSel);
-    prepareWorkbenchForRun(baseId, compId, { baseFile: baseSel ?? null, comparisonFile: compSel ?? null });
-    await operation.executeOperation(nextParams, selected);
-  }, [base.selectedFiles, operation, params, prepareWorkbenchForRun, selectors]);
+  const runCompareWithIds = useCallback(
+    async (baseId: FileId | null, compId: FileId | null) => {
+      const nextParams = { ...params, baseFileId: baseId, comparisonFileId: compId };
+      const selected: StirlingFile[] = [];
+      const baseSel = base.selectedFiles.find((file) => file.fileId === baseId) ?? (baseId ? selectors.getFile(baseId) : null);
+      const compSel = base.selectedFiles.find((file) => file.fileId === compId) ?? (compId ? selectors.getFile(compId) : null);
+      if (baseSel) selected.push(baseSel);
+      if (compSel) selected.push(compSel);
+      prepareWorkbenchForRun(baseId, compId, { baseFile: baseSel ?? null, comparisonFile: compSel ?? null });
+      await operation.executeOperation(nextParams, selected);
+    },
+    [base.selectedFiles, operation, params, prepareWorkbenchForRun, selectors],
+  );
 
   const performSwap = useCallback(() => {
     const baseId = params.baseFileId as FileId | null;
@@ -347,36 +328,35 @@ const Compare = (props: BaseToolProps) => {
   }, [operation.result, params.baseFileId, params.comparisonFileId, performSwap]);
 
   const renderSelectedFile = useCallback(
-    (role: 'base' | 'comparison') => {
-      const fileId = role === 'base' ? params.baseFileId : params.comparisonFileId;
+    (role: "base" | "comparison") => {
+      const fileId = role === "base" ? params.baseFileId : params.comparisonFileId;
       const stub = fileId ? selectors.getStirlingFileStub(fileId) : undefined;
-      
+
       // Show add button in base if no base file, or in comparison if base exists but no comparison
-      const shouldShowAddButton = 
-        (role === 'base' && !params.baseFileId) || 
-        (role === 'comparison' && params.baseFileId && !params.comparisonFileId);
+      const shouldShowAddButton =
+        (role === "base" && !params.baseFileId) || (role === "comparison" && params.baseFileId && !params.comparisonFileId);
 
       if (!stub) {
         return (
-        <Stack gap={6}>
+          <Stack gap={6}>
             <Box
               style={{
-                border: '1px solid var(--border-default)',
-                borderRadius: 'var(--radius-md)',
-                padding: '0.75rem 1rem',
-                background: 'var(--bg-surface)',
-                width: '100%',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'space-between',
-                cursor: shouldShowAddButton ? 'pointer' : 'default',
+                border: "1px solid var(--border-default)",
+                borderRadius: "var(--radius-md)",
+                padding: "0.75rem 1rem",
+                background: "var(--bg-surface)",
+                width: "100%",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                cursor: shouldShowAddButton ? "pointer" : "default",
               }}
               onClick={shouldShowAddButton ? () => openFilesModal({}) : undefined}
             >
               <Text size="sm" c="dimmed">
                 {t(
-                  role === 'base' ? 'compare.original.placeholder' : 'compare.edited.placeholder',
-                  role === 'base' ? 'Select the original PDF' : 'Select the edited PDF'
+                  role === "base" ? "compare.original.placeholder" : "compare.edited.placeholder",
+                  role === "base" ? "Select the original PDF" : "Select the edited PDF",
                 )}
               </Text>
               {shouldShowAddButton && (
@@ -400,38 +380,37 @@ const Compare = (props: BaseToolProps) => {
       // Build compact meta line for pages and date
       const dateMs = (stub?.lastModified || stub?.createdAt) ?? null;
       const dateText = dateMs
-        ? new Date(dateMs).toLocaleDateString(undefined, { month: 'short', day: '2-digit', year: 'numeric' })
-        : '';
+        ? new Date(dateMs).toLocaleDateString(undefined, { month: "short", day: "2-digit", year: "numeric" })
+        : "";
       const pageCount = stub?.processedFile?.totalPages || null;
 
       return (
         <Stack gap={6}>
           <Box
             style={{
-              border: '1px solid var(--border-default)',
-              borderRadius: 'var(--radius-md)',
-              padding: '0.75rem 1rem',
-              background: 'var(--bg-surface)',
-              width: '100%',
-              minHeight: "9rem"
-
+              border: "1px solid var(--border-default)",
+              borderRadius: "var(--radius-md)",
+              padding: "0.75rem 1rem",
+              background: "var(--bg-surface)",
+              width: "100%",
+              minHeight: "9rem",
             }}
           >
             <Group align="flex-start" wrap="nowrap" gap="md">
-              <Box className="compare-tool__thumbnail" style={{ alignSelf: 'center' }}>
+              <Box className="compare-tool__thumbnail" style={{ alignSelf: "center" }}>
                 <DocumentThumbnail file={stub ?? null} thumbnail={stub?.thumbnailUrl || null} />
               </Box>
-              <Stack className="compare-tool__details" style={{ minWidth: 0, overflow: 'hidden', flex: 1 }}>
+              <Stack className="compare-tool__details" style={{ minWidth: 0, overflow: "hidden", flex: 1 }}>
                 <Text fw={600} title={stub?.name}>
-                  {truncateCenter(stub?.name || '', 50)}
+                  {truncateCenter(stub?.name || "", 50)}
                 </Text>
                 {pageCount && dateText && (
                   <>
-                  <Text size="xs" c="dimmed" style={{ whiteSpace: 'nowrap', overflow: 'hidden', textOverflow: 'ellipsis' }}>
-                    {pageCount} {t('compare.pages', 'pages')}
-                    <br />
-                    {dateText}
-                </Text>
+                    <Text size="xs" c="dimmed" style={{ whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>
+                      {pageCount} {t("compare.pages", "pages")}
+                      <br />
+                      {dateText}
+                    </Text>
                   </>
                 )}
               </Stack>
@@ -440,7 +419,7 @@ const Compare = (props: BaseToolProps) => {
         </Stack>
       );
     },
-    [params.baseFileId, params.comparisonFileId, selectors, t, openFilesModal]
+    [params.baseFileId, params.comparisonFileId, selectors, t, openFilesModal],
   );
 
   const baseStub = params.baseFileId ? selectors.getStirlingFileStub(params.baseFileId) : undefined;
@@ -452,7 +431,7 @@ const Compare = (props: BaseToolProps) => {
     baseStub &&
     compStub &&
     !base.operation.isLoading &&
-    base.endpointEnabled !== false
+    base.endpointEnabled !== false,
   );
 
   const hasBothSelected = Boolean(params.baseFileId && params.comparisonFileId);
@@ -465,92 +444,108 @@ const Compare = (props: BaseToolProps) => {
     },
     steps: [
       {
-        title: t('compare.selection.originalEditedTitle', 'Select Original and Edited PDFs'),
+        title: t("compare.selection.originalEditedTitle", "Select Original and Edited PDFs"),
         isVisible: true,
         content: (
           <Box
             style={{
-              display: 'grid',
-              gridTemplateColumns: hasBothSelected ? '1fr 2.25rem' : '1fr',
-              gap: '1rem',
-              alignItems: 'stretch',
-              width: '100%', 
+              display: "grid",
+              gridTemplateColumns: hasBothSelected ? "1fr 2.25rem" : "1fr",
+              gap: "1rem",
+              alignItems: "stretch",
+              width: "100%",
             }}
           >
             {/* Header row: Original PDF + Clear selected aligned to swap column */}
             <Box
-              style={{ gridColumn: hasBothSelected ? '1 / span 2' : '1', display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginTop: '0.5rem' }}
+              style={{
+                gridColumn: hasBothSelected ? "1 / span 2" : "1",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                marginTop: "0.5rem",
+              }}
             >
-              <Text fw={700} size="sm">{t('compare.original.label', 'Original PDF')}</Text>
+              <Text fw={700} size="sm">
+                {t("compare.original.label", "Original PDF")}
+              </Text>
               <Button
                 variant="subtle"
                 size="compact-xs"
                 onClick={() => setClearConfirmOpen(true)}
                 disabled={!hasAnyFiles}
-                styles={{ root: { textDecoration: 'underline' } }}
+                styles={{ root: { textDecoration: "underline" } }}
                 style={{
-                  background: !hasAnyFiles ? 'transparent' : undefined,
-                  color: !hasAnyFiles ? 'var(--spdf-clear-disabled-text)' : undefined
+                  background: !hasAnyFiles ? "transparent" : undefined,
+                  color: !hasAnyFiles ? "var(--spdf-clear-disabled-text)" : undefined,
                 }}
               >
-                {t('compare.clearSelected', 'Clear selected')}
+                {t("compare.clearSelected", "Clear selected")}
               </Button>
             </Box>
             <Box
               style={{
-                gridColumn: '1',
+                gridColumn: "1",
                 minWidth: 0,
-                
               }}
             >
-              {renderSelectedFile('base')}
-              <div style={{ height: '0.75rem' }} />
+              {renderSelectedFile("base")}
+              <div style={{ height: "0.75rem" }} />
               {/* Edited PDF section header */}
-              <Text fw={700} size="sm" style={{ marginBottom: '1rem', marginTop: '0.5rem'}}>{t('compare.edited.label', 'Edited PDF')}</Text>
-              {renderSelectedFile('comparison')}
+              <Text fw={700} size="sm" style={{ marginBottom: "1rem", marginTop: "0.5rem" }}>
+                {t("compare.edited.label", "Edited PDF")}
+              </Text>
+              {renderSelectedFile("comparison")}
             </Box>
             {hasBothSelected && (
-            <Box
-              style={{
-                gridColumn: '2',
-                gridRow: '2',
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                alignSelf: 'stretch',
-              }}
-            >
-              <Button
-                variant="subtle"
-                onClick={handleSwap}
-                disabled={!hasBothSelected || base.operation.isLoading}
+              <Box
                 style={{
-                  width: '2.25rem',
-                  height: '100%',
-                  padding: 0,
-                  borderRadius: '0.5rem',
-                  background: 'var(--bg-surface)',
-                  border: '1px solid var(--border-default)',
-                  display: 'flex',
-                  alignItems: 'center',
-                  justifyContent: 'center',
+                  gridColumn: "2",
+                  gridRow: "2",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center",
+                  alignSelf: "stretch",
                 }}
               >
-                <SwapVertRoundedIcon fontSize="medium" />
-              </Button>
-            </Box>
+                <Button
+                  variant="subtle"
+                  onClick={handleSwap}
+                  disabled={!hasBothSelected || base.operation.isLoading}
+                  style={{
+                    width: "2.25rem",
+                    height: "100%",
+                    padding: 0,
+                    borderRadius: "0.5rem",
+                    background: "var(--bg-surface)",
+                    border: "1px solid var(--border-default)",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                >
+                  <SwapVertRoundedIcon fontSize="medium" />
+                </Button>
+              </Box>
             )}
             <Modal
               opened={swapConfirmOpen}
               onClose={() => setSwapConfirmOpen(false)}
-              title={t('compare.swap.confirmTitle', 'Re-run comparison?')}
+              title={t("compare.swap.confirmTitle", "Re-run comparison?")}
               centered
               size="sm"
             >
               <Stack gap="md">
-                <Text>{t('compare.swap.confirmBody', 'This will rerun the tool. Are you sure you want to swap the order of Original and Edited?')}</Text>
+                <Text>
+                  {t(
+                    "compare.swap.confirmBody",
+                    "This will rerun the tool. Are you sure you want to swap the order of Original and Edited?",
+                  )}
+                </Text>
                 <Group justify="flex-end" gap="sm">
-                  <Button variant="light" onClick={() => setSwapConfirmOpen(false)}>{t('cancel', 'Cancel')}</Button>
+                  <Button variant="light" onClick={() => setSwapConfirmOpen(false)}>
+                    {t("cancel", "Cancel")}
+                  </Button>
                   <Button
                     variant="filled"
                     onClick={() => {
@@ -558,7 +553,7 @@ const Compare = (props: BaseToolProps) => {
                       performSwap();
                     }}
                   >
-                    {t('compare.swap.confirm', 'Swap and Re-run')}
+                    {t("compare.swap.confirm", "Swap and Re-run")}
                   </Button>
                 </Group>
               </Stack>
@@ -566,14 +561,18 @@ const Compare = (props: BaseToolProps) => {
             <Modal
               opened={clearConfirmOpen}
               onClose={() => setClearConfirmOpen(false)}
-              title={t('compare.clear.confirmTitle', 'Clear selected PDFs?')}
+              title={t("compare.clear.confirmTitle", "Clear selected PDFs?")}
               centered
               size="sm"
             >
               <Stack gap="md">
-                <Text>{t('compare.clear.confirmBody', 'This will close the current comparison and take you back to Active Files.')}</Text>
+                <Text>
+                  {t("compare.clear.confirmBody", "This will close the current comparison and take you back to Active Files.")}
+                </Text>
                 <Group justify="flex-end" gap="sm">
-                  <Button variant="light" onClick={() => setClearConfirmOpen(false)}>{t('cancel', 'Cancel')}</Button>
+                  <Button variant="light" onClick={() => setClearConfirmOpen(false)}>
+                    {t("cancel", "Cancel")}
+                  </Button>
                   <Button
                     variant="filled"
                     onClick={() => {
@@ -581,7 +580,7 @@ const Compare = (props: BaseToolProps) => {
                       performClearSelected();
                     }}
                   >
-                    {t('compare.clear.confirm', 'Clear and return')}
+                    {t("compare.clear.confirm", "Clear and return")}
                   </Button>
                 </Group>
               </Stack>
@@ -591,17 +590,17 @@ const Compare = (props: BaseToolProps) => {
       },
     ],
     executeButton: {
-      text: t('compare.cta', 'Compare'),
-      loadingText: t('compare.loading', 'Comparing...'),
+      text: t("compare.cta", "Compare"),
+      loadingText: t("compare.loading", "Comparing..."),
       onClick: handleExecuteCompare,
       disabled: !canExecute,
-      testId: 'compare-execute',
+      testId: "compare-execute",
       disableScopeHints: true,
     },
     review: {
       isVisible: false,
       operation: base.operation,
-      title: t('compare.review.title', 'Comparison Result'),
+      title: t("compare.review.title", "Comparison Result"),
       onUndo: base.operation.undoOperation,
     },
   });
@@ -612,6 +611,3 @@ CompareTool.tool = () => useCompareOperation;
 CompareTool.getDefaultParameters = () => ({ ...compareDefaultParameters });
 
 export default CompareTool;
-
-
-
diff --git a/frontend/src/core/tools/Compress.tsx b/frontend/src/core/tools/Compress.tsx
index ae5dd691fb..4024645a48 100644
--- a/frontend/src/core/tools/Compress.tsx
+++ b/frontend/src/core/tools/Compress.tsx
@@ -11,12 +11,7 @@ const Compress = (props: BaseToolProps) => {
   const { t } = useTranslation();
   const compressTips = useCompressTips();
 
-  const base = useBaseTool(
-    'compress',
-    useCompressParameters,
-    useCompressOperation,
-    props
-  );
+  const base = useBaseTool("compress", useCompressParameters, useCompressOperation, props);
 
   return createToolFlow({
     files: {
@@ -56,5 +51,4 @@ const Compress = (props: BaseToolProps) => {
   });
 };
 
-
 export default Compress as ToolComponent;
diff --git a/frontend/src/core/tools/Convert.tsx b/frontend/src/core/tools/Convert.tsx
index 0ae04e2d7a..d36788cfdc 100644
--- a/frontend/src/core/tools/Convert.tsx
+++ b/frontend/src/core/tools/Convert.tsx
@@ -26,7 +26,7 @@ const Convert = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
 
   // Prevent reset immediately after operation completes (when consumeFiles auto-selects outputs)
   const skipNextSelectionResetRef = useRef(false);
-  const previousSelectionRef = useRef<string>('');
+  const previousSelectionRef = useRef<string>("");
 
   const scrollToBottom = () => {
     if (scrollContainerRef.current) {
@@ -38,7 +38,8 @@ const Convert = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
   };
 
   const hasFiles = selectedFiles.length > 0;
-  const hasResults = convertOperation.files.length > 0 || convertOperation.downloadUrl !== null || !!convertOperation.errorMessage;
+  const hasResults =
+    convertOperation.files.length > 0 || convertOperation.downloadUrl !== null || !!convertOperation.errorMessage;
   const settingsCollapsed = hasResults;
 
   // When operation completes, flag the next selection change to skip reset
@@ -50,7 +51,10 @@ const Convert = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
 
   // Reset results when user manually changes file selection
   useEffect(() => {
-    const currentSelection = selectedFiles.map(f => f.fileId).sort().join(',');
+    const currentSelection = selectedFiles
+      .map((f) => f.fileId)
+      .sort()
+      .join(",");
 
     if (currentSelection === previousSelectionRef.current) return; // No change
 
@@ -71,7 +75,7 @@ const Convert = ({ onPreviewFile, onComplete, onError }: BaseToolProps) => {
         onPreviewFile?.(null);
       }
     } else {
-      previousSelectionRef.current = '';
+      previousSelectionRef.current = "";
       if (activeFiles.length === 0) {
         convertParams.resetParameters();
       }
diff --git a/frontend/src/core/tools/Crop.tsx b/frontend/src/core/tools/Crop.tsx
index 93ebb1c5c1..bdff8f9d93 100644
--- a/frontend/src/core/tools/Crop.tsx
+++ b/frontend/src/core/tools/Crop.tsx
@@ -10,12 +10,7 @@ import { BaseToolProps, ToolComponent } from "@app/types/tool";
 const Crop = (props: BaseToolProps) => {
   const { t } = useTranslation();
 
-  const base = useBaseTool(
-    'crop',
-    useCropParameters,
-    useCropOperation,
-    props
-  );
+  const base = useBaseTool("crop", useCropParameters, useCropOperation, props);
 
   const tooltips = useCropTooltips();
 
@@ -31,12 +26,7 @@ const Crop = (props: BaseToolProps) => {
         isCollapsed: base.settingsCollapsed,
         onCollapsedClick: base.hasResults ? base.handleSettingsReset : undefined,
         tooltip: tooltips,
-        content: (
-          <CropSettings
-            parameters={base.params}
-            disabled={base.endpointLoading}
-          />
-        ),
+        content: <CropSettings parameters={base.params} disabled={base.endpointLoading} />,
       },
     ],
     executeButton: {
diff --git a/frontend/src/core/tools/EditTableOfContents.tsx b/frontend/src/core/tools/EditTableOfContents.tsx
index 57334c8915..fb8dcf0def 100644
--- a/frontend/src/core/tools/EditTableOfContents.tsx
+++ b/frontend/src/core/tools/EditTableOfContents.tsx
@@ -1,28 +1,30 @@
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { downloadFile } from '@app/services/downloadService';
-import MenuBookRoundedIcon from '@mui/icons-material/MenuBookRounded';
-import { alert } from '@app/components/toast';
-import { createToolFlow } from '@app/components/tools/shared/createToolFlow';
-import EditTableOfContentsWorkbenchView, { EditTableOfContentsWorkbenchViewData } from '@app/components/tools/editTableOfContents/EditTableOfContentsWorkbenchView';
-import EditTableOfContentsSettings from '@app/components/tools/editTableOfContents/EditTableOfContentsSettings';
-import { useEditTableOfContentsParameters } from '@app/hooks/tools/editTableOfContents/useEditTableOfContentsParameters';
-import { useEditTableOfContentsOperation } from '@app/hooks/tools/editTableOfContents/useEditTableOfContentsOperation';
-import { BaseToolProps, ToolComponent } from '@app/types/tool';
-import { useBaseTool } from '@app/hooks/tools/shared/useBaseTool';
-import apiClient from '@app/services/apiClient';
-import { BookmarkPayload, BookmarkNode, hydrateBookmarkPayload, serializeBookmarkNodes } from '@app/utils/editTableOfContents';
-import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
-import { useFilesModalContext } from '@app/contexts/FilesModalContext';
-import { useNavigationActions, useNavigationState } from '@app/contexts/NavigationContext';
-import { useFileSelection } from '@app/contexts/FileContext';
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { downloadFile } from "@app/services/downloadService";
+import MenuBookRoundedIcon from "@mui/icons-material/MenuBookRounded";
+import { alert } from "@app/components/toast";
+import { createToolFlow } from "@app/components/tools/shared/createToolFlow";
+import EditTableOfContentsWorkbenchView, {
+  EditTableOfContentsWorkbenchViewData,
+} from "@app/components/tools/editTableOfContents/EditTableOfContentsWorkbenchView";
+import EditTableOfContentsSettings from "@app/components/tools/editTableOfContents/EditTableOfContentsSettings";
+import { useEditTableOfContentsParameters } from "@app/hooks/tools/editTableOfContents/useEditTableOfContentsParameters";
+import { useEditTableOfContentsOperation } from "@app/hooks/tools/editTableOfContents/useEditTableOfContentsOperation";
+import { BaseToolProps, ToolComponent } from "@app/types/tool";
+import { useBaseTool } from "@app/hooks/tools/shared/useBaseTool";
+import apiClient from "@app/services/apiClient";
+import { BookmarkPayload, BookmarkNode, hydrateBookmarkPayload, serializeBookmarkNodes } from "@app/utils/editTableOfContents";
+import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
+import { useFilesModalContext } from "@app/contexts/FilesModalContext";
+import { useNavigationActions, useNavigationState } from "@app/contexts/NavigationContext";
+import { useFileSelection } from "@app/contexts/FileContext";
 
 const extractBookmarks = async (file: File): Promise<BookmarkPayload[]> => {
   const formData = new FormData();
-  formData.append('file', file);
+  formData.append("file", file);
 
-  const response = await apiClient.post('/api/v1/general/extract-bookmarks', formData, {
-    headers: { 'Content-Type': 'multipart/form-data' },
+  const response = await apiClient.post("/api/v1/general/extract-bookmarks", formData, {
+    headers: { "Content-Type": "multipart/form-data" },
   });
 
   return response.data as BookmarkPayload[];
@@ -41,11 +43,11 @@ const useStableCallback = <T extends (...args: any[]) => any>(callback: T): T =>
 const EditTableOfContents = (props: BaseToolProps) => {
   const { t } = useTranslation();
   const base = useBaseTool(
-    'edit-table-of-contents',
+    "edit-table-of-contents",
     useEditTableOfContentsParameters,
     useEditTableOfContentsOperation,
     props,
-    { minFiles: 1 }
+    { minFiles: 1 },
   );
   const {
     registerCustomWorkbenchView,
@@ -58,8 +60,8 @@ const EditTableOfContents = (props: BaseToolProps) => {
   const navigationState = useNavigationState();
   const { actions: navigationActions } = useNavigationActions();
 
-  const WORKBENCH_VIEW_ID = 'editTableOfContentsWorkbench';
-  const WORKBENCH_ID = 'custom:editTableOfContents' as const;
+  const WORKBENCH_VIEW_ID = "editTableOfContentsWorkbench";
+  const WORKBENCH_ID = "custom:editTableOfContents" as const;
   const viewIcon = useMemo(() => <MenuBookRoundedIcon fontSize="small" />, []);
 
   const [loadError, setLoadError] = useState<string | null>(null);
@@ -75,7 +77,7 @@ const EditTableOfContents = (props: BaseToolProps) => {
     registerCustomWorkbenchView({
       id: WORKBENCH_VIEW_ID,
       workbenchId: WORKBENCH_ID,
-      label: 'Outline workspace',
+      label: "Outline workspace",
       icon: viewIcon,
       component: EditTableOfContentsWorkbenchView,
     });
@@ -84,37 +86,40 @@ const EditTableOfContents = (props: BaseToolProps) => {
       clearCustomWorkbenchViewData(WORKBENCH_VIEW_ID);
       unregisterCustomWorkbenchView(WORKBENCH_VIEW_ID);
     };
-  // Register once; avoid re-registering which clears data mid-flight
+    // Register once; avoid re-registering which clears data mid-flight
   }, []);
 
-  const loadBookmarksForFile = useCallback(async (file: File, { showToast }: { showToast?: boolean } = {}) => {
-    setIsLoadingBookmarks(true);
-    setLoadError(null);
+  const loadBookmarksForFile = useCallback(
+    async (file: File, { showToast }: { showToast?: boolean } = {}) => {
+      setIsLoadingBookmarks(true);
+      setLoadError(null);
 
-    try {
-      const payload = await extractBookmarks(file);
-      const bookmarks = hydrateBookmarkPayload(payload);
-      setBookmarks(bookmarks);
-      setLastLoadedFileId((file as any)?.fileId ?? file.name);
+      try {
+        const payload = await extractBookmarks(file);
+        const bookmarks = hydrateBookmarkPayload(payload);
+        setBookmarks(bookmarks);
+        setLastLoadedFileId((file as any)?.fileId ?? file.name);
 
-      if (showToast) {
-        alert({
-          title: t('editTableOfContents.messages.loadedTitle', 'Bookmarks extracted'),
-          body: t('editTableOfContents.messages.loadedBody', 'Existing bookmarks from the PDF were loaded into the editor.'),
-          alertType: 'success',
-        });
+        if (showToast) {
+          alert({
+            title: t("editTableOfContents.messages.loadedTitle", "Bookmarks extracted"),
+            body: t("editTableOfContents.messages.loadedBody", "Existing bookmarks from the PDF were loaded into the editor."),
+            alertType: "success",
+          });
+        }
+
+        if (bookmarks.length === 0) {
+          setLoadError(t("editTableOfContents.messages.noBookmarks", "No bookmarks were found in the selected PDF."));
+        }
+      } catch (error) {
+        console.error("Failed to load bookmarks", error);
+        setLoadError(t("editTableOfContents.messages.loadFailed", "Unable to extract bookmarks from the selected PDF."));
+      } finally {
+        setIsLoadingBookmarks(false);
       }
-
-      if (bookmarks.length === 0) {
-        setLoadError(t('editTableOfContents.messages.noBookmarks', 'No bookmarks were found in the selected PDF.'));
-      }
-    } catch (error) {
-      console.error('Failed to load bookmarks', error);
-      setLoadError(t('editTableOfContents.messages.loadFailed', 'Unable to extract bookmarks from the selected PDF.'));
-    } finally {
-      setIsLoadingBookmarks(false);
-    }
-  }, [setBookmarks, t]);
+    },
+    [setBookmarks, t],
+  );
 
   useEffect(() => {
     // Don't auto-load bookmarks if we have results - user is viewing the output
@@ -145,16 +150,16 @@ const EditTableOfContents = (props: BaseToolProps) => {
       const json = JSON.parse(text) as BookmarkPayload[];
       setBookmarks(hydrateBookmarkPayload(json));
       alert({
-        title: t('editTableOfContents.messages.imported', 'Bookmarks imported'),
-        body: t('editTableOfContents.messages.importedBody', 'Your JSON outline replaced the current editor contents.'),
-        alertType: 'success',
+        title: t("editTableOfContents.messages.imported", "Bookmarks imported"),
+        body: t("editTableOfContents.messages.importedBody", "Your JSON outline replaced the current editor contents."),
+        alertType: "success",
       });
     } catch (error) {
-      console.error('Failed to import JSON bookmarks', error);
+      console.error("Failed to import JSON bookmarks", error);
       alert({
-        title: t('editTableOfContents.messages.invalidJson', 'Invalid JSON structure'),
-        body: t('editTableOfContents.messages.invalidJsonBody', 'Please provide a valid bookmark JSON file and try again.'),
-        alertType: 'error',
+        title: t("editTableOfContents.messages.invalidJson", "Invalid JSON structure"),
+        body: t("editTableOfContents.messages.invalidJsonBody", "Please provide a valid bookmark JSON file and try again."),
+        alertType: "error",
       });
     }
   };
@@ -163,8 +168,8 @@ const EditTableOfContents = (props: BaseToolProps) => {
   const importClipboardCallback = async () => {
     if (!navigator.clipboard?.readText) {
       alert({
-        title: t('editTableOfContents.actions.clipboardUnavailable', 'Clipboard access unavailable'),
-        alertType: 'warning',
+        title: t("editTableOfContents.actions.clipboardUnavailable", "Clipboard access unavailable"),
+        alertType: "warning",
       });
       return;
     }
@@ -174,16 +179,16 @@ const EditTableOfContents = (props: BaseToolProps) => {
       const json = JSON.parse(clipboard) as BookmarkPayload[];
       setBookmarks(hydrateBookmarkPayload(json));
       alert({
-        title: t('editTableOfContents.messages.imported', 'Bookmarks imported'),
-        body: t('editTableOfContents.messages.importedClipboard', 'Clipboard data replaced the current bookmark list.'),
-        alertType: 'success',
+        title: t("editTableOfContents.messages.imported", "Bookmarks imported"),
+        body: t("editTableOfContents.messages.importedClipboard", "Clipboard data replaced the current bookmark list."),
+        alertType: "success",
       });
     } catch (error) {
-      console.error('Failed to import bookmarks from clipboard', error);
+      console.error("Failed to import bookmarks from clipboard", error);
       alert({
-        title: t('editTableOfContents.messages.invalidJson', 'Invalid JSON structure'),
-        body: t('editTableOfContents.messages.invalidJsonBody', 'Please provide a valid bookmark JSON file and try again.'),
-        alertType: 'error',
+        title: t("editTableOfContents.messages.invalidJson", "Invalid JSON structure"),
+        body: t("editTableOfContents.messages.invalidJsonBody", "Please provide a valid bookmark JSON file and try again."),
+        alertType: "error",
       });
     }
   };
@@ -191,11 +196,11 @@ const EditTableOfContents = (props: BaseToolProps) => {
 
   const exportJsonCallback = () => {
     const data = JSON.stringify(serializeBookmarkNodes(base.params.parameters.bookmarks), null, 2);
-    const blob = new Blob([data], { type: 'application/json' });
-    void downloadFile({ data: blob, filename: 'bookmarks.json' });
+    const blob = new Blob([data], { type: "application/json" });
+    void downloadFile({ data: blob, filename: "bookmarks.json" });
     alert({
-      title: t('editTableOfContents.messages.exported', 'JSON download ready'),
-      alertType: 'success',
+      title: t("editTableOfContents.messages.exported", "JSON download ready"),
+      alertType: "success",
     });
   };
   const handleExportJson = useStableCallback(exportJsonCallback);
@@ -203,8 +208,8 @@ const EditTableOfContents = (props: BaseToolProps) => {
   const exportClipboardCallback = async () => {
     if (!navigator.clipboard?.writeText) {
       alert({
-        title: t('editTableOfContents.actions.clipboardUnavailable', 'Clipboard access unavailable'),
-        alertType: 'warning',
+        title: t("editTableOfContents.actions.clipboardUnavailable", "Clipboard access unavailable"),
+        alertType: "warning",
       });
       return;
     }
@@ -213,22 +218,22 @@ const EditTableOfContents = (props: BaseToolProps) => {
     try {
       await navigator.clipboard.writeText(data);
       alert({
-        title: t('editTableOfContents.messages.copied', 'Copied to clipboard'),
-        body: t('editTableOfContents.messages.copiedBody', 'Bookmark JSON copied successfully.'),
-        alertType: 'success',
+        title: t("editTableOfContents.messages.copied", "Copied to clipboard"),
+        body: t("editTableOfContents.messages.copiedBody", "Bookmark JSON copied successfully."),
+        alertType: "success",
       });
     } catch (error) {
-      console.error('Failed to copy bookmarks', error);
+      console.error("Failed to copy bookmarks", error);
       alert({
-        title: t('editTableOfContents.messages.copyFailed', 'Copy failed'),
-        alertType: 'error',
+        title: t("editTableOfContents.messages.copyFailed", "Copy failed"),
+        alertType: "error",
       });
     }
   };
   const handleExportClipboard = useStableCallback(exportClipboardCallback);
 
-  const clipboardReadAvailable = typeof navigator !== 'undefined' && Boolean(navigator.clipboard?.readText);
-  const clipboardWriteAvailable = typeof navigator !== 'undefined' && Boolean(navigator.clipboard?.writeText);
+  const clipboardReadAvailable = typeof navigator !== "undefined" && Boolean(navigator.clipboard?.readText);
+  const clipboardWriteAvailable = typeof navigator !== "undefined" && Boolean(navigator.clipboard?.writeText);
 
   const loadFromSelectedCallback = () => {
     if (selectedFile) {
@@ -238,7 +243,7 @@ const EditTableOfContents = (props: BaseToolProps) => {
   const handleLoadFromSelected = useStableCallback(loadFromSelectedCallback);
 
   const replaceExistingCallback = (value: boolean) => {
-    base.params.updateParameter('replaceExisting', value);
+    base.params.updateParameter("replaceExisting", value);
   };
   const handleReplaceExistingChange = useStableCallback(replaceExistingCallback);
 
@@ -287,11 +292,7 @@ const EditTableOfContents = (props: BaseToolProps) => {
       errorMessage: base.operation.errorMessage ?? null,
       isGeneratingThumbnails: base.operation.isGeneratingThumbnails,
       isExecuteDisabled:
-        !selectedFile ||
-        !base.hasFiles ||
-        base.endpointEnabled === false ||
-        base.operation.isLoading ||
-        base.endpointLoading,
+        !selectedFile || !base.hasFiles || base.endpointEnabled === false || base.operation.isLoading || base.endpointLoading,
       isExecuting: base.operation.isLoading,
       onClearError: handleClearError,
       onBookmarksChange: handleBookmarksChange,
@@ -325,7 +326,7 @@ const EditTableOfContents = (props: BaseToolProps) => {
 
   // Auto-navigate to workbench when tool is selected
   useEffect(() => {
-    if (navigationState.selectedTool !== 'editTableOfContents') {
+    if (navigationState.selectedTool !== "editTableOfContents") {
       hasAutoOpenedWorkbenchRef.current = false;
       return;
     }
@@ -350,7 +351,7 @@ const EditTableOfContents = (props: BaseToolProps) => {
     },
     steps: [
       {
-        title: t('editTableOfContents.settings.title', 'Bookmarks & outline'),
+        title: t("editTableOfContents.settings.title", "Bookmarks & outline"),
         isCollapsed: false,
         content: (
           <EditTableOfContentsSettings
@@ -376,7 +377,7 @@ const EditTableOfContents = (props: BaseToolProps) => {
     review: {
       isVisible: base.hasResults,
       operation: base.operation,
-      title: t('editTableOfContents.results.title', 'Updated PDF with bookmarks'),
+      title: t("editTableOfContents.results.title", "Updated PDF with bookmarks"),
       onFileClick: base.handleThumbnailClick,
       onUndo: handleUndo,
     },
diff --git a/frontend/src/core/tools/ExtractImages.tsx b/frontend/src/core/tools/ExtractImages.tsx
index 5b6818db0a..4bd66bdd10 100644
--- a/frontend/src/core/tools/ExtractImages.tsx
+++ b/frontend/src/core/tools/ExtractImages.tsx
@@ -9,12 +9,7 @@ import { BaseToolProps, ToolComponent } from "@app/types/tool";
 const ExtractImages = (props: BaseToolProps) => {
   const { t } = useTranslation();
 
-  const base = useBaseTool(
-    'extractImages',
-    useExtractImagesParameters,
-    useExtractImagesOperation,
-    props
-  );
+  const base = useBaseTool("extractImages", useExtractImagesParameters, useExtractImagesOperation, props);
 
   return createToolFlow({
     files: {
@@ -53,4 +48,4 @@ const ExtractImages = (props: BaseToolProps) => {
   });
 };
 
-export default ExtractImages as ToolComponent;
\ No newline at end of file
+export default ExtractImages as ToolComponent;
diff --git a/frontend/src/core/tools/ExtractPages.tsx b/frontend/src/core/tools/ExtractPages.tsx
index ef0604bc4b..124e596b74 100644
--- a/frontend/src/core/tools/ExtractPages.tsx
+++ b/frontend/src/core/tools/ExtractPages.tsx
@@ -11,12 +11,7 @@ const ExtractPages = (props: BaseToolProps) => {
   const { t } = useTranslation();
   const tooltipContent = useExtractPagesTips();
 
-  const base = useBaseTool(
-    'extract-pages',
-    useExtractPagesParameters,
-    useExtractPagesOperation,
-    props
-  );
+  const base = useBaseTool("extract-pages", useExtractPagesParameters, useExtractPagesOperation, props);
 
   const settingsContent = (
     <ExtractPagesSettings
@@ -59,5 +54,3 @@ const ExtractPages = (props: BaseToolProps) => {
 };
 
 export default ExtractPages as ToolComponent;
-
-
diff --git a/frontend/src/core/tools/Flatten.tsx b/frontend/src/core/tools/Flatten.tsx
index c6bfa35acc..817bd5abf0 100644
--- a/frontend/src/core/tools/Flatten.tsx
+++ b/frontend/src/core/tools/Flatten.tsx
@@ -11,12 +11,7 @@ const Flatten = (props: BaseToolProps) => {
   const { t } = useTranslation();
   const flattenTips = useFlattenTips();
 
-  const base = useBaseTool(
-    'flatten',
-    useFlattenParameters,
-    useFlattenOperation,
-    props
-  );
+  const base = useBaseTool("flatten", useFlattenParameters, useFlattenOperation, props);
 
   return createToolFlow({
     files: {
diff --git a/frontend/src/core/tools/GetPdfInfo.tsx b/frontend/src/core/tools/GetPdfInfo.tsx
index c34da7c23d..130567efe1 100644
--- a/frontend/src/core/tools/GetPdfInfo.tsx
+++ b/frontend/src/core/tools/GetPdfInfo.tsx
@@ -1,31 +1,31 @@
-import { useEffect, useMemo, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
-import LinkIcon from '@mui/icons-material/Link';
-import { Stack, Group, Divider, Text, UnstyledButton } from '@mantine/core';
-import { createToolFlow } from '@app/components/tools/shared/createToolFlow';
-import { useBaseTool } from '@app/hooks/tools/shared/useBaseTool';
-import { BaseToolProps, ToolComponent } from '@app/types/tool';
-import { useGetPdfInfoParameters, defaultParameters } from '@app/hooks/tools/getPdfInfo/useGetPdfInfoParameters';
-import GetPdfInfoResults from '@app/components/tools/getPdfInfo/GetPdfInfoResults';
-import { useGetPdfInfoOperation, GetPdfInfoOperationHook } from '@app/hooks/tools/getPdfInfo/useGetPdfInfoOperation';
-import GetPdfInfoReportView from '@app/components/tools/getPdfInfo/GetPdfInfoReportView';
-import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
-import { useNavigationActions, useNavigationState } from '@app/contexts/NavigationContext';
-import type { PdfInfoReportData } from '@app/types/getPdfInfo';
+import { useEffect, useMemo, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
+import LinkIcon from "@mui/icons-material/Link";
+import { Stack, Group, Divider, Text, UnstyledButton } from "@mantine/core";
+import { createToolFlow } from "@app/components/tools/shared/createToolFlow";
+import { useBaseTool } from "@app/hooks/tools/shared/useBaseTool";
+import { BaseToolProps, ToolComponent } from "@app/types/tool";
+import { useGetPdfInfoParameters, defaultParameters } from "@app/hooks/tools/getPdfInfo/useGetPdfInfoParameters";
+import GetPdfInfoResults from "@app/components/tools/getPdfInfo/GetPdfInfoResults";
+import { useGetPdfInfoOperation, GetPdfInfoOperationHook } from "@app/hooks/tools/getPdfInfo/useGetPdfInfoOperation";
+import GetPdfInfoReportView from "@app/components/tools/getPdfInfo/GetPdfInfoReportView";
+import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
+import { useNavigationActions, useNavigationState } from "@app/contexts/NavigationContext";
+import type { PdfInfoReportData } from "@app/types/getPdfInfo";
 
 const CHAPTERS = [
-  { id: 'summary', labelKey: 'getPdfInfo.summary.title', fallback: 'PDF Summary' },
-  { id: 'metadata', labelKey: 'getPdfInfo.sections.metadata', fallback: 'Metadata' },
-  { id: 'formFields', labelKey: 'getPdfInfo.sections.formFields', fallback: 'Form Fields' },
-  { id: 'basicInfo', labelKey: 'getPdfInfo.sections.basicInfo', fallback: 'Basic Info' },
-  { id: 'documentInfo', labelKey: 'getPdfInfo.sections.documentInfo', fallback: 'Document Info' },
-  { id: 'compliance', labelKey: 'getPdfInfo.sections.compliance', fallback: 'Compliance' },
-  { id: 'encryption', labelKey: 'getPdfInfo.sections.encryption', fallback: 'Encryption' },
-  { id: 'permissions', labelKey: 'getPdfInfo.sections.permissions', fallback: 'Permissions' },
-  { id: 'toc', labelKey: 'getPdfInfo.sections.tableOfContents', fallback: 'Table of Contents' },
-  { id: 'other', labelKey: 'getPdfInfo.sections.other', fallback: 'Other' },
-  { id: 'perPage', labelKey: 'getPdfInfo.sections.perPageInfo', fallback: 'Per Page Info' },
+  { id: "summary", labelKey: "getPdfInfo.summary.title", fallback: "PDF Summary" },
+  { id: "metadata", labelKey: "getPdfInfo.sections.metadata", fallback: "Metadata" },
+  { id: "formFields", labelKey: "getPdfInfo.sections.formFields", fallback: "Form Fields" },
+  { id: "basicInfo", labelKey: "getPdfInfo.sections.basicInfo", fallback: "Basic Info" },
+  { id: "documentInfo", labelKey: "getPdfInfo.sections.documentInfo", fallback: "Document Info" },
+  { id: "compliance", labelKey: "getPdfInfo.sections.compliance", fallback: "Compliance" },
+  { id: "encryption", labelKey: "getPdfInfo.sections.encryption", fallback: "Encryption" },
+  { id: "permissions", labelKey: "getPdfInfo.sections.permissions", fallback: "Permissions" },
+  { id: "toc", labelKey: "getPdfInfo.sections.tableOfContents", fallback: "Table of Contents" },
+  { id: "other", labelKey: "getPdfInfo.sections.other", fallback: "Other" },
+  { id: "perPage", labelKey: "getPdfInfo.sections.perPageInfo", fallback: "Per Page Info" },
 ];
 
 const GetPdfInfo = (props: BaseToolProps) => {
@@ -39,16 +39,11 @@ const GetPdfInfo = (props: BaseToolProps) => {
     clearCustomWorkbenchViewData,
   } = useToolWorkflow();
 
-  const REPORT_VIEW_ID = 'getPdfInfoReport';
-  const REPORT_WORKBENCH_ID = 'custom:getPdfInfoReport' as const;
+  const REPORT_VIEW_ID = "getPdfInfoReport";
+  const REPORT_WORKBENCH_ID = "custom:getPdfInfoReport" as const;
   const reportIcon = useMemo(() => <PictureAsPdfIcon fontSize="small" />, []);
 
-  const base = useBaseTool(
-    'getPdfInfo',
-    useGetPdfInfoParameters,
-    useGetPdfInfoOperation,
-    props
-  );
+  const base = useBaseTool("getPdfInfo", useGetPdfInfoParameters, useGetPdfInfoOperation, props);
 
   const operation = base.operation as GetPdfInfoOperationHook;
   const hasResults = operation.results.length > 0;
@@ -58,7 +53,7 @@ const GetPdfInfo = (props: BaseToolProps) => {
     registerCustomWorkbenchView({
       id: REPORT_VIEW_ID,
       workbenchId: REPORT_WORKBENCH_ID,
-      label: t('getPdfInfo.report.shortTitle', 'PDF Information'),
+      label: t("getPdfInfo.report.shortTitle", "PDF Information"),
       icon: reportIcon,
       component: GetPdfInfoReportView,
     });
@@ -67,13 +62,7 @@ const GetPdfInfo = (props: BaseToolProps) => {
       clearCustomWorkbenchViewData(REPORT_VIEW_ID);
       unregisterCustomWorkbenchView(REPORT_VIEW_ID);
     };
-  }, [
-    clearCustomWorkbenchViewData,
-    registerCustomWorkbenchView,
-    reportIcon,
-    t,
-    unregisterCustomWorkbenchView,
-  ]);
+  }, [clearCustomWorkbenchViewData, registerCustomWorkbenchView, reportIcon, t, unregisterCustomWorkbenchView]);
 
   const reportData = useMemo<PdfInfoReportData | null>(() => {
     if (operation.results.length === 0) return null;
@@ -92,7 +81,7 @@ const GetPdfInfo = (props: BaseToolProps) => {
       const isNewReport = generatedAt && generatedAt !== lastReportGeneratedAtRef.current;
       if (isNewReport) {
         lastReportGeneratedAtRef.current = generatedAt;
-        if (navigationState.selectedTool === 'getPdfInfo' && navigationState.workbench !== REPORT_WORKBENCH_ID) {
+        if (navigationState.selectedTool === "getPdfInfo" && navigationState.workbench !== REPORT_WORKBENCH_ID) {
           navigationActions.setWorkbench(REPORT_WORKBENCH_ID);
         }
       }
@@ -116,7 +105,7 @@ const GetPdfInfo = (props: BaseToolProps) => {
     },
     steps: [
       {
-        title: t('getPdfInfo.indexTitle', 'Index'),
+        title: t("getPdfInfo.indexTitle", "Index"),
         isVisible: Boolean(reportData),
         isCollapsed: false,
         content: (
@@ -131,7 +120,7 @@ const GetPdfInfo = (props: BaseToolProps) => {
                       navigationActions.setWorkbench(REPORT_WORKBENCH_ID);
                     }
                   }}
-                  style={{ width: '100%', textAlign: 'left', padding: '8px 4px' }}
+                  style={{ width: "100%", textAlign: "left", padding: "8px 4px" }}
                 >
                   <Group justify="flex-start" gap="sm">
                     <LinkIcon fontSize="small" style={{ opacity: 0.7 }} />
@@ -147,7 +136,7 @@ const GetPdfInfo = (props: BaseToolProps) => {
         ),
       },
       {
-        title: t('getPdfInfo.results', 'Results'),
+        title: t("getPdfInfo.results", "Results"),
         isVisible: showResultsStep,
         isCollapsed: false,
         content: (
@@ -160,8 +149,8 @@ const GetPdfInfo = (props: BaseToolProps) => {
       },
     ],
     executeButton: {
-      text: t('getPdfInfo.submit', 'Generate'),
-      loadingText: t('loading', 'Loading...'),
+      text: t("getPdfInfo.submit", "Generate"),
+      loadingText: t("loading", "Loading..."),
       onClick: base.handleExecute,
       endpointEnabled: base.endpointEnabled,
       paramsValid: base.params.validateParameters(),
@@ -170,7 +159,7 @@ const GetPdfInfo = (props: BaseToolProps) => {
     review: {
       isVisible: false,
       operation: base.operation,
-      title: t('getPdfInfo.results', 'Results'),
+      title: t("getPdfInfo.results", "Results"),
       onUndo: base.handleUndo,
     },
   });
@@ -181,5 +170,3 @@ GetPdfInfoTool.tool = () => useGetPdfInfoOperation;
 GetPdfInfoTool.getDefaultParameters = () => ({ ...defaultParameters });
 
 export default GetPdfInfoTool;
-
-
diff --git a/frontend/src/core/tools/Merge.tsx b/frontend/src/core/tools/Merge.tsx
index 836cde404b..a99d1bfe78 100644
--- a/frontend/src/core/tools/Merge.tsx
+++ b/frontend/src/core/tools/Merge.tsx
@@ -21,30 +21,24 @@ const Merge = (props: BaseToolProps) => {
   const { selectedFileStubs } = useSelectedFiles();
   const { reorderFiles } = useFileManagement();
 
-  const base = useBaseTool(
-    'merge',
-    useMergeParameters,
-    useMergeOperation,
-    props,
-    { minFiles: 2, ignoreViewerScope: true }
-  );
+  const base = useBaseTool("merge", useMergeParameters, useMergeOperation, props, { minFiles: 2, ignoreViewerScope: true });
 
   const { workbench } = useNavigationState();
   const { actions: navActions } = useNavigationActions();
-  const isViewerMode = workbench === 'viewer';
+  const isViewerMode = workbench === "viewer";
 
   const hasAutoSwitchedRef = useRef(false);
   useEffect(() => {
     if (isViewerMode && !hasAutoSwitchedRef.current) {
       hasAutoSwitchedRef.current = true;
-      navActions.setWorkbench('fileEditor');
+      navActions.setWorkbench("fileEditor");
     }
   }, []);
   const naturalCompare = useCallback((a: string, b: string): number => {
-    const isDigit = (char: string) => char >= '0' && char <= '9';
+    const isDigit = (char: string) => char >= "0" && char <= "9";
 
     const getChunk = (s: string, length: number, marker: number): { chunk: string; newMarker: number } => {
-      let chunk = '';
+      let chunk = "";
       const c = s.charAt(marker);
       chunk += c;
       marker++;
@@ -93,24 +87,27 @@ const Merge = (props: BaseToolProps) => {
   }, []);
 
   // Custom file sorting logic for merge tool
-  const sortFiles = useCallback((sortType: 'filename' | 'dateModified', ascending: boolean = true) => {
-    const sortedStubs = [...selectedFileStubs].sort((stubA, stubB) => {
-      let comparison = 0;
-      switch (sortType) {
-        case 'filename':
-          comparison = naturalCompare(stubA.name, stubB.name);
-          break;
-        case 'dateModified':
-          comparison = stubA.lastModified - stubB.lastModified;
-          break;
-      }
-      return ascending ? comparison : -comparison;
-    });
+  const sortFiles = useCallback(
+    (sortType: "filename" | "dateModified", ascending: boolean = true) => {
+      const sortedStubs = [...selectedFileStubs].sort((stubA, stubB) => {
+        let comparison = 0;
+        switch (sortType) {
+          case "filename":
+            comparison = naturalCompare(stubA.name, stubB.name);
+            break;
+          case "dateModified":
+            comparison = stubA.lastModified - stubB.lastModified;
+            break;
+        }
+        return ascending ? comparison : -comparison;
+      });
 
-    const selectedIds = sortedStubs.map(record => record.id);
-    const deselectedIds = fileIds.filter(id => !selectedIds.includes(id));
-    reorderFiles([...selectedIds, ...deselectedIds]);
-  }, [selectedFileStubs, fileIds, reorderFiles, naturalCompare]);
+      const selectedIds = sortedStubs.map((record) => record.id);
+      const deselectedIds = fileIds.filter((id) => !selectedIds.includes(id));
+      reorderFiles([...selectedIds, ...deselectedIds]);
+    },
+    [selectedFileStubs, fileIds, reorderFiles, naturalCompare],
+  );
 
   return createToolFlow({
     files: {
@@ -122,12 +119,7 @@ const Merge = (props: BaseToolProps) => {
       {
         title: "Sort Files",
         isCollapsed: base.settingsCollapsed,
-        content: (
-          <MergeFileSorter
-            onSortFiles={sortFiles}
-            disabled={!base.hasFiles || base.endpointLoading}
-          />
-        ),
+        content: <MergeFileSorter onSortFiles={sortFiles} disabled={!base.hasFiles || base.endpointLoading} />,
       },
       {
         title: "Settings",
@@ -150,22 +142,19 @@ const Merge = (props: BaseToolProps) => {
       onClick: base.handleExecute,
       endpointEnabled: base.endpointEnabled,
       paramsValid: base.params.validateParameters(),
-      disabledReason: isViewerMode ? 'viewerMode' : undefined,
+      disabledReason: isViewerMode ? "viewerMode" : undefined,
     },
-    belowExecuteButton: isViewerMode && !base.hasResults ? (
-      <Stack align="center" gap={6} mx="md" mt={4}>
-        <Text size="xs" c="dimmed" ta="center">
-          {t("merge.viewerModeHint", "Merge needs 2 or more files. Head to the file editor to select them.")}
-        </Text>
-        <Button
-          variant="light"
-          size="xs"
-          onClick={() => navActions.setWorkbench('fileEditor')}
-        >
-          {t("merge.goToFileEditor", "Go to file editor")}
-        </Button>
-      </Stack>
-    ) : undefined,
+    belowExecuteButton:
+      isViewerMode && !base.hasResults ? (
+        <Stack align="center" gap={6} mx="md" mt={4}>
+          <Text size="xs" c="dimmed" ta="center">
+            {t("merge.viewerModeHint", "Merge needs 2 or more files. Head to the file editor to select them.")}
+          </Text>
+          <Button variant="light" size="xs" onClick={() => navActions.setWorkbench("fileEditor")}>
+            {t("merge.goToFileEditor", "Go to file editor")}
+          </Button>
+        </Stack>
+      ) : undefined,
     review: {
       isVisible: base.hasResults,
       operation: base.operation,
diff --git a/frontend/src/core/tools/OverlayPdfs.tsx b/frontend/src/core/tools/OverlayPdfs.tsx
index cacf53ba3d..b4610d7c4d 100644
--- a/frontend/src/core/tools/OverlayPdfs.tsx
+++ b/frontend/src/core/tools/OverlayPdfs.tsx
@@ -1,21 +1,16 @@
-import { useTranslation } from 'react-i18next';
-import { createToolFlow } from '@app/components/tools/shared/createToolFlow';
-import { useBaseTool } from '@app/hooks/tools/shared/useBaseTool';
-import { BaseToolProps, ToolComponent } from '@app/types/tool';
-import OverlayPdfsSettings from '@app/components/tools/overlayPdfs/OverlayPdfsSettings';
-import { useOverlayPdfsParameters } from '@app/hooks/tools/overlayPdfs/useOverlayPdfsParameters';
-import { useOverlayPdfsOperation } from '@app/hooks/tools/overlayPdfs/useOverlayPdfsOperation';
-import { useOverlayPdfsTips } from '@app/components/tooltips/useOverlayPdfsTips';
+import { useTranslation } from "react-i18next";
+import { createToolFlow } from "@app/components/tools/shared/createToolFlow";
+import { useBaseTool } from "@app/hooks/tools/shared/useBaseTool";
+import { BaseToolProps, ToolComponent } from "@app/types/tool";
+import OverlayPdfsSettings from "@app/components/tools/overlayPdfs/OverlayPdfsSettings";
+import { useOverlayPdfsParameters } from "@app/hooks/tools/overlayPdfs/useOverlayPdfsParameters";
+import { useOverlayPdfsOperation } from "@app/hooks/tools/overlayPdfs/useOverlayPdfsOperation";
+import { useOverlayPdfsTips } from "@app/components/tooltips/useOverlayPdfsTips";
 
 const OverlayPdfs = (props: BaseToolProps) => {
   const { t } = useTranslation();
 
-  const base = useBaseTool(
-    'overlay-pdfs',
-    useOverlayPdfsParameters,
-    useOverlayPdfsOperation,
-    props
-  );
+  const base = useBaseTool("overlay-pdfs", useOverlayPdfsParameters, useOverlayPdfsOperation, props);
   const overlayTips = useOverlayPdfsTips();
 
   return createToolFlow({
@@ -25,7 +20,7 @@ const OverlayPdfs = (props: BaseToolProps) => {
     },
     steps: [
       {
-        title: t('overlay-pdfs.settings.title', 'Settings'),
+        title: t("overlay-pdfs.settings.title", "Settings"),
         isCollapsed: base.settingsCollapsed,
         onCollapsedClick: base.settingsCollapsed ? base.handleSettingsReset : undefined,
         tooltip: overlayTips,
@@ -39,9 +34,9 @@ const OverlayPdfs = (props: BaseToolProps) => {
       },
     ],
     executeButton: {
-      text: t('overlay-pdfs.submit', 'Overlay and Review'),
+      text: t("overlay-pdfs.submit", "Overlay and Review"),
       isVisible: !base.hasResults,
-      loadingText: t('loading'),
+      loadingText: t("loading"),
       onClick: base.handleExecute,
       endpointEnabled: base.endpointEnabled,
       paramsValid: base.params.validateParameters(),
@@ -49,7 +44,7 @@ const OverlayPdfs = (props: BaseToolProps) => {
     review: {
       isVisible: base.hasResults,
       operation: base.operation,
-      title: t('overlay-pdfs.results.title', 'Overlay Results'),
+      title: t("overlay-pdfs.results.title", "Overlay Results"),
       onFileClick: base.handleThumbnailClick,
       onUndo: base.handleUndo,
     },
@@ -57,5 +52,3 @@ const OverlayPdfs = (props: BaseToolProps) => {
 };
 
 export default OverlayPdfs as ToolComponent;
-
-
diff --git a/frontend/src/core/tools/PageLayout.tsx b/frontend/src/core/tools/PageLayout.tsx
index ce1d7e40de..37ef1d81b4 100644
--- a/frontend/src/core/tools/PageLayout.tsx
+++ b/frontend/src/core/tools/PageLayout.tsx
@@ -1,34 +1,29 @@
-import { useTranslation } from 'react-i18next';
-import { createToolFlow } from '@app/components/tools/shared/createToolFlow';
-import { useBaseTool } from '@app/hooks/tools/shared/useBaseTool';
-import { useAccordionSteps } from '@app/hooks/tools/shared/useAccordionSteps';
-import { BaseToolProps, ToolComponent } from '@app/types/tool';
-import { usePageLayoutParameters } from '@app/hooks/tools/pageLayout/usePageLayoutParameters';
-import { usePageLayoutOperation } from '@app/hooks/tools/pageLayout/usePageLayoutOperation';
-import PageLayoutSettings from '@app/components/tools/pageLayout/PageLayoutSettings';
-import PageLayoutAdvancedSettings from '@app/components/tools/pageLayout/PageLayoutAdvancedSettings';
-import PageLayoutMarginsBordersSettings from '@app/components/tools/pageLayout/PageLayoutMarginsBordersSettings';
-import { usePageLayoutTips } from '@app/components/tooltips/PageLayout/usePageLayoutTips';
-import { usePageLayoutAdvancedTips } from '@app/components/tooltips/PageLayout/usePageLayoutAdvancedTips';
-import { usePageLayoutMarginsBordersTips } from '@app/components/tooltips/PageLayout/usePageLayoutMarginsBordersTips';
-import PageLayoutPreview from '@app/components/tools/pageLayout/PageLayoutPreview';
+import { useTranslation } from "react-i18next";
+import { createToolFlow } from "@app/components/tools/shared/createToolFlow";
+import { useBaseTool } from "@app/hooks/tools/shared/useBaseTool";
+import { useAccordionSteps } from "@app/hooks/tools/shared/useAccordionSteps";
+import { BaseToolProps, ToolComponent } from "@app/types/tool";
+import { usePageLayoutParameters } from "@app/hooks/tools/pageLayout/usePageLayoutParameters";
+import { usePageLayoutOperation } from "@app/hooks/tools/pageLayout/usePageLayoutOperation";
+import PageLayoutSettings from "@app/components/tools/pageLayout/PageLayoutSettings";
+import PageLayoutAdvancedSettings from "@app/components/tools/pageLayout/PageLayoutAdvancedSettings";
+import PageLayoutMarginsBordersSettings from "@app/components/tools/pageLayout/PageLayoutMarginsBordersSettings";
+import { usePageLayoutTips } from "@app/components/tooltips/PageLayout/usePageLayoutTips";
+import { usePageLayoutAdvancedTips } from "@app/components/tooltips/PageLayout/usePageLayoutAdvancedTips";
+import { usePageLayoutMarginsBordersTips } from "@app/components/tooltips/PageLayout/usePageLayoutMarginsBordersTips";
+import PageLayoutPreview from "@app/components/tools/pageLayout/PageLayoutPreview";
 
 enum PageLayoutStep {
-  NONE = 'none',
-  LAYOUT = 'layout',
-  ADVANCED = 'advanced',
-  MARGINS_BORDERS = 'marginsBorders',
+  NONE = "none",
+  LAYOUT = "layout",
+  ADVANCED = "advanced",
+  MARGINS_BORDERS = "marginsBorders",
 }
 
 const PageLayout = (props: BaseToolProps) => {
   const { t } = useTranslation();
 
-  const base = useBaseTool(
-    'pageLayout',
-    usePageLayoutParameters,
-    usePageLayoutOperation,
-    props
-  );
+  const base = useBaseTool("pageLayout", usePageLayoutParameters, usePageLayoutOperation, props);
 
   const pageLayoutTips = usePageLayoutTips();
   const pageLayoutAdvancedTips = usePageLayoutAdvancedTips();
@@ -49,12 +44,10 @@ const PageLayout = (props: BaseToolProps) => {
       selectedFiles: base.selectedFiles,
       isCollapsed: base.hasResults,
     },
-    preview: (
-      <PageLayoutPreview parameters={base.params.parameters} />
-    ),
+    preview: <PageLayoutPreview parameters={base.params.parameters} />,
     steps: [
       {
-        title: 'Layout settings',
+        title: "Layout settings",
         isCollapsed: accordion.getCollapsedState(PageLayoutStep.LAYOUT),
         onCollapsedClick: () => accordion.handleStepToggle(PageLayoutStep.LAYOUT),
         tooltip: pageLayoutTips,
@@ -67,7 +60,7 @@ const PageLayout = (props: BaseToolProps) => {
         ),
       },
       {
-        title: 'Advanced settings',
+        title: "Advanced settings",
         isCollapsed: accordion.getCollapsedState(PageLayoutStep.ADVANCED),
         onCollapsedClick: () => accordion.handleStepToggle(PageLayoutStep.ADVANCED),
         tooltip: pageLayoutAdvancedTips,
@@ -80,7 +73,7 @@ const PageLayout = (props: BaseToolProps) => {
         ),
       },
       {
-        title: 'Margins and borders',
+        title: "Margins and borders",
         isCollapsed: accordion.getCollapsedState(PageLayoutStep.MARGINS_BORDERS),
         onCollapsedClick: () => accordion.handleStepToggle(PageLayoutStep.MARGINS_BORDERS),
         tooltip: pageLayoutMarginsBordersTips,
@@ -94,9 +87,9 @@ const PageLayout = (props: BaseToolProps) => {
       },
     ],
     executeButton: {
-      text: t('pageLayout.submit', 'Create Layout'),
+      text: t("pageLayout.submit", "Create Layout"),
       isVisible: !base.hasResults,
-      loadingText: t('loading'),
+      loadingText: t("loading"),
       onClick: base.handleExecute,
       endpointEnabled: base.endpointEnabled,
       paramsValid: base.params.validateParameters(),
@@ -104,7 +97,7 @@ const PageLayout = (props: BaseToolProps) => {
     review: {
       isVisible: base.hasResults,
       operation: base.operation,
-      title: t('pageLayout.title', 'Multi Page Layout Results'),
+      title: t("pageLayout.title", "Multi Page Layout Results"),
       onFileClick: base.handleThumbnailClick,
       onUndo: base.handleUndo,
     },
@@ -112,5 +105,3 @@ const PageLayout = (props: BaseToolProps) => {
 };
 
 export default PageLayout as ToolComponent;
-
-
diff --git a/frontend/src/core/tools/Redact.tsx b/frontend/src/core/tools/Redact.tsx
index b314b6aedc..48a1938117 100644
--- a/frontend/src/core/tools/Redact.tsx
+++ b/frontend/src/core/tools/Redact.tsx
@@ -6,7 +6,12 @@ import { useRedactParameters, RedactMode } from "@app/hooks/tools/redact/useReda
 import { useRedactOperation } from "@app/hooks/tools/redact/useRedactOperation";
 import { useBaseTool } from "@app/hooks/tools/shared/useBaseTool";
 import { BaseToolProps, ToolComponent } from "@app/types/tool";
-import { useRedactModeTips, useRedactWordsTips, useRedactAdvancedTips, useRedactManualTips } from "@app/components/tooltips/useRedactTips";
+import {
+  useRedactModeTips,
+  useRedactWordsTips,
+  useRedactAdvancedTips,
+  useRedactManualTips,
+} from "@app/components/tooltips/useRedactTips";
 import RedactAdvancedSettings from "@app/components/tools/redact/RedactAdvancedSettings";
 import WordsToRedactInput from "@app/components/tools/redact/WordsToRedactInput";
 import ManualRedactionControls from "@app/components/tools/redact/ManualRedactionControls";
@@ -28,12 +33,7 @@ const Redact = (props: BaseToolProps) => {
   const { workbench } = useNavigationState();
   const hasOpenedViewer = useRef(false);
 
-  const base = useBaseTool(
-    'redact',
-    useRedactParameters,
-    useRedactOperation,
-    props
-  );
+  const base = useBaseTool("redact", useRedactParameters, useRedactOperation, props);
 
   // Get total file count from context (any files in workbench, not just selected)
   const { state: fileState } = useFileState();
@@ -48,22 +48,22 @@ const Redact = (props: BaseToolProps) => {
   // Auto-set manual mode if we're in the viewer and redaction config is set to manual
   // This ensures when opening redact from viewer, it automatically selects manual mode
   useEffect(() => {
-    if (workbench === 'viewer' && redactionConfig?.mode === 'manual' && base.params.parameters.mode !== 'manual') {
+    if (workbench === "viewer" && redactionConfig?.mode === "manual" && base.params.parameters.mode !== "manual") {
       // Set immediately when conditions are met
-      base.params.updateParameter('mode', 'manual');
+      base.params.updateParameter("mode", "manual");
     }
   }, [workbench, redactionConfig, base.params.parameters.mode, base.params.updateParameter]);
 
   // Handle mode change - navigate to viewer when manual mode is selected
   // Manual mode works with any files in workbench (not just selected files)
   const handleModeChange = (mode: RedactMode) => {
-    base.params.updateParameter('mode', mode);
-    
-    if (mode === 'manual' && hasAnyFiles) {
+    base.params.updateParameter("mode", mode);
+
+    if (mode === "manual" && hasAnyFiles) {
       // Set redaction config and navigate to viewer
       setRedactionConfig(base.params.parameters);
       setRedactionMode(true);
-      navActions.setWorkbench('viewer');
+      navActions.setWorkbench("viewer");
       hasOpenedViewer.current = true;
     }
   };
@@ -71,24 +71,24 @@ const Redact = (props: BaseToolProps) => {
   // When files are added and in manual mode, navigate to viewer
   // Uses hasAnyFiles since manual mode works with any files in workbench
   useEffect(() => {
-    if (base.params.parameters.mode === 'manual' && hasAnyFiles && !hasOpenedViewer.current) {
+    if (base.params.parameters.mode === "manual" && hasAnyFiles && !hasOpenedViewer.current) {
       setRedactionConfig(base.params.parameters);
       setRedactionMode(true);
-      navActions.setWorkbench('viewer');
+      navActions.setWorkbench("viewer");
       hasOpenedViewer.current = true;
     }
   }, [hasAnyFiles, base.params.parameters, navActions, setRedactionConfig, setRedactionMode]);
 
   // Reset viewer flag when mode changes back to automatic
   useEffect(() => {
-    if (base.params.parameters.mode === 'automatic') {
+    if (base.params.parameters.mode === "automatic") {
       hasOpenedViewer.current = false;
       setRedactionMode(false);
     }
   }, [base.params.parameters.mode, setRedactionMode]);
 
   const isExecuteDisabled = () => {
-    if (base.params.parameters.mode === 'manual') {
+    if (base.params.parameters.mode === "manual") {
       return true; // Manual mode uses viewer, not execute button
     }
     return !base.params.validateParameters() || !base.hasFiles || !base.endpointEnabled;
@@ -104,13 +104,13 @@ const Redact = (props: BaseToolProps) => {
     // Method step is always expandable (even without files selected)
     // Only collapse on results or user preference
     const methodStepCollapsed = base.hasResults ? true : methodCollapsed;
-    
+
     const steps = [
       // Method selection step (always present and always expandable)
       {
         title: t("redact.modeSelector.title", "Redaction Method"),
         isCollapsed: methodStepCollapsed,
-        onCollapsedClick: () => base.settingsCollapsed ? base.handleSettingsReset() : setMethodCollapsed(!methodCollapsed),
+        onCollapsedClick: () => (base.settingsCollapsed ? base.handleSettingsReset() : setMethodCollapsed(!methodCollapsed)),
         tooltip: modeTips,
         content: (
           <RedactModeSelector
@@ -120,36 +120,41 @@ const Redact = (props: BaseToolProps) => {
             hasAnyFiles={hasAnyFiles}
           />
         ),
-      }
+      },
     ];
 
     // Add mode-specific steps
-    if (base.params.parameters.mode === 'automatic') {
+    if (base.params.parameters.mode === "automatic") {
       steps.push(
         {
           title: t("redact.auto.settings.title", "Redaction Settings"),
           isCollapsed: getActualCollapsedState(wordsCollapsed),
-          onCollapsedClick: () => base.settingsCollapsed ? base.handleSettingsReset() : setWordsCollapsed(!wordsCollapsed),
+          onCollapsedClick: () => (base.settingsCollapsed ? base.handleSettingsReset() : setWordsCollapsed(!wordsCollapsed)),
           tooltip: wordsTips,
-          content: <WordsToRedactInput
-            wordsToRedact={base.params.parameters.wordsToRedact}
-            onWordsChange={(words) => base.params.updateParameter('wordsToRedact', words)}
-            disabled={base.endpointLoading}
-          />,
+          content: (
+            <WordsToRedactInput
+              wordsToRedact={base.params.parameters.wordsToRedact}
+              onWordsChange={(words) => base.params.updateParameter("wordsToRedact", words)}
+              disabled={base.endpointLoading}
+            />
+          ),
         },
         {
           title: t("redact.auto.settings.advancedTitle", "Advanced Settings"),
           isCollapsed: getActualCollapsedState(advancedCollapsed),
-          onCollapsedClick: () => base.settingsCollapsed ? base.handleSettingsReset() : setAdvancedCollapsed(!advancedCollapsed),
+          onCollapsedClick: () =>
+            base.settingsCollapsed ? base.handleSettingsReset() : setAdvancedCollapsed(!advancedCollapsed),
           tooltip: advancedTips,
-          content: <RedactAdvancedSettings
-            parameters={base.params.parameters}
-            onParameterChange={base.params.updateParameter}
-            disabled={base.endpointLoading}
-          />,
+          content: (
+            <RedactAdvancedSettings
+              parameters={base.params.parameters}
+              onParameterChange={base.params.updateParameter}
+              disabled={base.endpointLoading}
+            />
+          ),
         },
       );
-    } else if (base.params.parameters.mode === 'manual') {
+    } else if (base.params.parameters.mode === "manual") {
       // Manual mode - show redaction controls
       // Uses hasAnyFiles since manual mode works with any files in workbench (viewer-powered)
       steps.push({
@@ -165,7 +170,7 @@ const Redact = (props: BaseToolProps) => {
   };
 
   // Hide execute button in manual mode (redactions applied via controls)
-  const isManualMode = base.params.parameters.mode === 'manual';
+  const isManualMode = base.params.parameters.mode === "manual";
 
   return createToolFlow({
     files: {
diff --git a/frontend/src/core/tools/RemoveAnnotations.tsx b/frontend/src/core/tools/RemoveAnnotations.tsx
index 2a84fcbbf3..60c32e3600 100644
--- a/frontend/src/core/tools/RemoveAnnotations.tsx
+++ b/frontend/src/core/tools/RemoveAnnotations.tsx
@@ -11,12 +11,7 @@ const RemoveAnnotations = (props: BaseToolProps) => {
   const { t } = useTranslation();
   const removeAnnotationsTips = useRemoveAnnotationsTips();
 
-  const base = useBaseTool(
-    'removeAnnotations',
-    useRemoveAnnotationsParameters,
-    useRemoveAnnotationsOperation,
-    props
-  );
+  const base = useBaseTool("removeAnnotations", useRemoveAnnotationsParameters, useRemoveAnnotationsOperation, props);
 
   return createToolFlow({
     files: {
@@ -49,4 +44,4 @@ const RemoveAnnotations = (props: BaseToolProps) => {
   });
 };
 
-export default RemoveAnnotations as ToolComponent;
\ No newline at end of file
+export default RemoveAnnotations as ToolComponent;
diff --git a/frontend/src/core/tools/RemoveBlanks.tsx b/frontend/src/core/tools/RemoveBlanks.tsx
index bc2511b37b..787deb6184 100644
--- a/frontend/src/core/tools/RemoveBlanks.tsx
+++ b/frontend/src/core/tools/RemoveBlanks.tsx
@@ -11,12 +11,7 @@ const RemoveBlanks = (props: BaseToolProps) => {
   const { t } = useTranslation();
   const tooltipContent = useRemoveBlanksTips();
 
-  const base = useBaseTool(
-    'remove-blanks',
-    useRemoveBlanksParameters,
-    useRemoveBlanksOperation,
-    props
-  );
+  const base = useBaseTool("remove-blanks", useRemoveBlanksParameters, useRemoveBlanksOperation, props);
 
   const settingsContent = (
     <RemoveBlanksSettings
@@ -67,5 +62,3 @@ const RemoveBlanks = (props: BaseToolProps) => {
 RemoveBlanks.tool = () => useRemoveBlanksOperation;
 
 export default RemoveBlanks as ToolComponent;
-
-
diff --git a/frontend/src/core/tools/RemoveCertificateSign.tsx b/frontend/src/core/tools/RemoveCertificateSign.tsx
index 946aa76923..dd43967acb 100644
--- a/frontend/src/core/tools/RemoveCertificateSign.tsx
+++ b/frontend/src/core/tools/RemoveCertificateSign.tsx
@@ -9,10 +9,10 @@ const RemoveCertificateSign = (props: BaseToolProps) => {
   const { t } = useTranslation();
 
   const base = useBaseTool(
-    'removeCertificateSign',
+    "removeCertificateSign",
     useRemoveCertificateSignParameters,
     useRemoveCertificateSignOperation,
-    props
+    props,
   );
 
   return createToolFlow({
diff --git a/frontend/src/core/tools/RemoveImage.tsx b/frontend/src/core/tools/RemoveImage.tsx
index 57f88b4605..cb7e5029b2 100644
--- a/frontend/src/core/tools/RemoveImage.tsx
+++ b/frontend/src/core/tools/RemoveImage.tsx
@@ -8,12 +8,7 @@ import { BaseToolProps, ToolComponent } from "@app/types/tool";
 const RemoveImage = (props: BaseToolProps) => {
   const { t } = useTranslation();
 
-  const base = useBaseTool(
-    'removeImage',
-    useRemoveImageParameters,
-    useRemoveImageOperation,
-    props
-  );
+  const base = useBaseTool("removeImage", useRemoveImageParameters, useRemoveImageOperation, props);
 
   return createToolFlow({
     files: {
@@ -42,5 +37,3 @@ const RemoveImage = (props: BaseToolProps) => {
 RemoveImage.tool = () => useRemoveImageOperation;
 
 export default RemoveImage as ToolComponent;
-
-
diff --git a/frontend/src/core/tools/RemovePages.tsx b/frontend/src/core/tools/RemovePages.tsx
index 5e3d20822c..589553256b 100644
--- a/frontend/src/core/tools/RemovePages.tsx
+++ b/frontend/src/core/tools/RemovePages.tsx
@@ -11,13 +11,7 @@ const RemovePages = (props: BaseToolProps) => {
   const { t } = useTranslation();
   const tooltipContent = useRemovePagesTips();
 
-  const base = useBaseTool(
-    'remove-pages',
-    useRemovePagesParameters,
-    useRemovePagesOperation,
-    props
-  );
-
+  const base = useBaseTool("remove-pages", useRemovePagesParameters, useRemovePagesOperation, props);
 
   const settingsContent = (
     <RemovePagesSettings
diff --git a/frontend/src/core/tools/RemovePassword.tsx b/frontend/src/core/tools/RemovePassword.tsx
index af72201e3d..75ff978d20 100644
--- a/frontend/src/core/tools/RemovePassword.tsx
+++ b/frontend/src/core/tools/RemovePassword.tsx
@@ -11,12 +11,7 @@ const RemovePassword = (props: BaseToolProps) => {
   const { t } = useTranslation();
   const removePasswordTips = useRemovePasswordTips();
 
-  const base = useBaseTool(
-    'removePassword',
-    useRemovePasswordParameters,
-    useRemovePasswordOperation,
-    props
-  );
+  const base = useBaseTool("removePassword", useRemovePasswordParameters, useRemovePasswordOperation, props);
 
   return createToolFlow({
     files: {
diff --git a/frontend/src/core/tools/ReorganizePages.tsx b/frontend/src/core/tools/ReorganizePages.tsx
index 3d60a0d330..0a2b032b9f 100644
--- a/frontend/src/core/tools/ReorganizePages.tsx
+++ b/frontend/src/core/tools/ReorganizePages.tsx
@@ -38,8 +38,8 @@ const ReorganizePages = ({ onPreviewFile, onComplete, onError }: BaseToolProps)
   const hasResults = operation.files.length > 0 || operation.downloadUrl !== null;
 
   enum Step {
-    NONE = 'none',
-    SETTINGS = 'settings'
+    NONE = "none",
+    SETTINGS = "settings",
   }
 
   const accordion = useAccordionSteps<Step>({
@@ -47,12 +47,12 @@ const ReorganizePages = ({ onPreviewFile, onComplete, onError }: BaseToolProps)
     initialStep: Step.SETTINGS,
     stateConditions: {
       hasFiles,
-      hasResults
+      hasResults,
     },
     afterResults: () => {
       operation.resetResults();
       onPreviewFile?.(null);
-    }
+    },
   });
 
   const steps = [
@@ -68,7 +68,7 @@ const ReorganizePages = ({ onPreviewFile, onComplete, onError }: BaseToolProps)
           disabled={endpointLoading}
         />
       ),
-    }
+    },
   ];
 
   return createToolFlow({
@@ -78,9 +78,9 @@ const ReorganizePages = ({ onPreviewFile, onComplete, onError }: BaseToolProps)
     },
     steps,
     executeButton: {
-      text: t('reorganizePages.submit', 'Reorganize Pages'),
+      text: t("reorganizePages.submit", "Reorganize Pages"),
       isVisible: !hasResults,
-      loadingText: t('loading'),
+      loadingText: t("loading"),
       onClick: handleExecute,
       endpointEnabled: endpointEnabled,
       paramsValid: params.validateParameters(),
@@ -88,7 +88,7 @@ const ReorganizePages = ({ onPreviewFile, onComplete, onError }: BaseToolProps)
     review: {
       isVisible: hasResults,
       operation: operation,
-      title: t('reorganizePages.results.title', 'Pages Reorganized'),
+      title: t("reorganizePages.results.title", "Pages Reorganized"),
       onFileClick: (file) => onPreviewFile?.(file),
       onUndo: async () => {
         await operation.undoOperation();
@@ -101,5 +101,3 @@ const ReorganizePages = ({ onPreviewFile, onComplete, onError }: BaseToolProps)
 (ReorganizePages as any).tool = () => useReorganizePagesOperation;
 
 export default ReorganizePages as ToolComponent;
-
-
diff --git a/frontend/src/core/tools/Repair.tsx b/frontend/src/core/tools/Repair.tsx
index f391e23810..be813f3014 100644
--- a/frontend/src/core/tools/Repair.tsx
+++ b/frontend/src/core/tools/Repair.tsx
@@ -8,12 +8,7 @@ import { BaseToolProps, ToolComponent } from "@app/types/tool";
 const Repair = (props: BaseToolProps) => {
   const { t } = useTranslation();
 
-  const base = useBaseTool(
-    'repair',
-    useRepairParameters,
-    useRepairOperation,
-    props
-  );
+  const base = useBaseTool("repair", useRepairParameters, useRepairOperation, props);
 
   return createToolFlow({
     files: {
diff --git a/frontend/src/core/tools/ReplaceColor.tsx b/frontend/src/core/tools/ReplaceColor.tsx
index 5fd1968ea1..d80583bcc3 100644
--- a/frontend/src/core/tools/ReplaceColor.tsx
+++ b/frontend/src/core/tools/ReplaceColor.tsx
@@ -11,12 +11,7 @@ const ReplaceColor = (props: BaseToolProps) => {
   const { t } = useTranslation();
   const replaceColorTips = useReplaceColorTips();
 
-  const base = useBaseTool(
-    'replaceColor',
-    useReplaceColorParameters,
-    useReplaceColorOperation,
-    props
-  );
+  const base = useBaseTool("replaceColor", useReplaceColorParameters, useReplaceColorOperation, props);
 
   return createToolFlow({
     files: {
@@ -56,4 +51,4 @@ const ReplaceColor = (props: BaseToolProps) => {
   });
 };
 
-export default ReplaceColor as ToolComponent;
\ No newline at end of file
+export default ReplaceColor as ToolComponent;
diff --git a/frontend/src/core/tools/Rotate.tsx b/frontend/src/core/tools/Rotate.tsx
index ec45a00648..afb1804bb7 100644
--- a/frontend/src/core/tools/Rotate.tsx
+++ b/frontend/src/core/tools/Rotate.tsx
@@ -11,12 +11,7 @@ const Rotate = (props: BaseToolProps) => {
   const { t } = useTranslation();
   const rotateTips = useRotateTips();
 
-  const base = useBaseTool(
-    'rotate',
-    useRotateParameters,
-    useRotateOperation,
-    props
-  );
+  const base = useBaseTool("rotate", useRotateParameters, useRotateOperation, props);
 
   return createToolFlow({
     files: {
@@ -29,12 +24,7 @@ const Rotate = (props: BaseToolProps) => {
         isCollapsed: base.settingsCollapsed,
         onCollapsedClick: base.settingsCollapsed ? base.handleSettingsReset : undefined,
         tooltip: rotateTips,
-        content: (
-          <RotateSettings
-            parameters={base.params}
-            disabled={base.endpointLoading}
-          />
-        ),
+        content: <RotateSettings parameters={base.params} disabled={base.endpointLoading} />,
       },
     ],
     executeButton: {
diff --git a/frontend/src/core/tools/Sanitize.tsx b/frontend/src/core/tools/Sanitize.tsx
index 09c89e2c37..59c0e9b657 100644
--- a/frontend/src/core/tools/Sanitize.tsx
+++ b/frontend/src/core/tools/Sanitize.tsx
@@ -9,12 +9,7 @@ import { BaseToolProps, ToolComponent } from "@app/types/tool";
 const Sanitize = (props: BaseToolProps) => {
   const { t } = useTranslation();
 
-  const base = useBaseTool(
-    'sanitize',
-    useSanitizeParameters,
-    useSanitizeOperation,
-    props
-  );
+  const base = useBaseTool("sanitize", useSanitizeParameters, useSanitizeOperation, props);
 
   return createToolFlow({
     files: {
diff --git a/frontend/src/core/tools/ScannerImageSplit.tsx b/frontend/src/core/tools/ScannerImageSplit.tsx
index 74f2edbb43..4abef36650 100644
--- a/frontend/src/core/tools/ScannerImageSplit.tsx
+++ b/frontend/src/core/tools/ScannerImageSplit.tsx
@@ -11,12 +11,7 @@ const ScannerImageSplit = (props: BaseToolProps) => {
   const { t } = useTranslation();
   const scannerImageSplitTips = useScannerImageSplitTips();
 
-  const base = useBaseTool(
-    'scannerImageSplit',
-    useScannerImageSplitParameters,
-    useScannerImageSplitOperation,
-    props
-  );
+  const base = useBaseTool("scannerImageSplit", useScannerImageSplitParameters, useScannerImageSplitOperation, props);
 
   return createToolFlow({
     files: {
@@ -56,4 +51,4 @@ const ScannerImageSplit = (props: BaseToolProps) => {
   });
 };
 
-export default ScannerImageSplit as ToolComponent;
\ No newline at end of file
+export default ScannerImageSplit as ToolComponent;
diff --git a/frontend/src/core/tools/ShowJS.tsx b/frontend/src/core/tools/ShowJS.tsx
index 234298d9b6..86e4aa67b6 100644
--- a/frontend/src/core/tools/ShowJS.tsx
+++ b/frontend/src/core/tools/ShowJS.tsx
@@ -1,144 +1,156 @@
-import React, { useEffect, useMemo, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import CodeRoundedIcon from '@mui/icons-material/CodeRounded';
-import { createToolFlow } from '@app/components/tools/shared/createToolFlow';
-import { useBaseTool } from '@app/hooks/tools/shared/useBaseTool';
-import type { BaseToolProps, ToolComponent } from '@app/types/tool';
-import { useShowJSParameters, defaultParameters } from '@app/hooks/tools/showJS/useShowJSParameters';
-import { useShowJSOperation, type ShowJSOperationHook } from '@app/hooks/tools/showJS/useShowJSOperation';
-import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
-import { useNavigationActions, useNavigationState } from '@app/contexts/NavigationContext';
-import ShowJSView from '@app/components/tools/showJS/ShowJSView';
-import { useFileSelection } from '@app/contexts/file/fileHooks';
+import React, { useEffect, useMemo, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import CodeRoundedIcon from "@mui/icons-material/CodeRounded";
+import { createToolFlow } from "@app/components/tools/shared/createToolFlow";
+import { useBaseTool } from "@app/hooks/tools/shared/useBaseTool";
+import type { BaseToolProps, ToolComponent } from "@app/types/tool";
+import { useShowJSParameters, defaultParameters } from "@app/hooks/tools/showJS/useShowJSParameters";
+import { useShowJSOperation, type ShowJSOperationHook } from "@app/hooks/tools/showJS/useShowJSOperation";
+import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
+import { useNavigationActions, useNavigationState } from "@app/contexts/NavigationContext";
+import ShowJSView from "@app/components/tools/showJS/ShowJSView";
+import { useFileSelection } from "@app/contexts/file/fileHooks";
 
 const ShowJS = (props: BaseToolProps) => {
-	const { t } = useTranslation();
-	const { actions: navigationActions } = useNavigationActions();
-	const navigationState = useNavigationState();
+  const { t } = useTranslation();
+  const { actions: navigationActions } = useNavigationActions();
+  const navigationState = useNavigationState();
 
-	const {
-		registerCustomWorkbenchView,
-		unregisterCustomWorkbenchView,
-		setCustomWorkbenchViewData,
-		clearCustomWorkbenchViewData,
-	} = useToolWorkflow();
+  const {
+    registerCustomWorkbenchView,
+    unregisterCustomWorkbenchView,
+    setCustomWorkbenchViewData,
+    clearCustomWorkbenchViewData,
+  } = useToolWorkflow();
 
-	const VIEW_ID = 'showJSView';
-	const WORKBENCH_ID = 'custom:showJS' as const;
-	const viewIcon = useMemo(() => <CodeRoundedIcon fontSize="small" />, []);
+  const VIEW_ID = "showJSView";
+  const WORKBENCH_ID = "custom:showJS" as const;
+  const viewIcon = useMemo(() => <CodeRoundedIcon fontSize="small" />, []);
 
-	const base = useBaseTool('showJS', useShowJSParameters, useShowJSOperation, props, { minFiles: 1 });
-	const operation = base.operation as ShowJSOperationHook;
-	const hasResults = Boolean(operation.scriptText);
-	const { clearSelections } = useFileSelection();
+  const base = useBaseTool("showJS", useShowJSParameters, useShowJSOperation, props, { minFiles: 1 });
+  const operation = base.operation as ShowJSOperationHook;
+  const hasResults = Boolean(operation.scriptText);
+  const { clearSelections } = useFileSelection();
 
-	useEffect(() => {
-		registerCustomWorkbenchView({
-			id: VIEW_ID,
-			workbenchId: WORKBENCH_ID,
-			label: t('showJS.view.title', 'JavaScript'),
-			icon: viewIcon,
-			component: ({ data }) => <ShowJSView data={data} />,
-		});
+  useEffect(() => {
+    registerCustomWorkbenchView({
+      id: VIEW_ID,
+      workbenchId: WORKBENCH_ID,
+      label: t("showJS.view.title", "JavaScript"),
+      icon: viewIcon,
+      component: ({ data }) => <ShowJSView data={data} />,
+    });
 
-		return () => {
-			clearCustomWorkbenchViewData(VIEW_ID);
-			unregisterCustomWorkbenchView(VIEW_ID);
-		};
-	}, [clearCustomWorkbenchViewData, registerCustomWorkbenchView, t, unregisterCustomWorkbenchView, viewIcon]);
+    return () => {
+      clearCustomWorkbenchViewData(VIEW_ID);
+      unregisterCustomWorkbenchView(VIEW_ID);
+    };
+  }, [clearCustomWorkbenchViewData, registerCustomWorkbenchView, t, unregisterCustomWorkbenchView, viewIcon]);
 
-	const lastShownRef = useRef<number | null>(null);
+  const lastShownRef = useRef<number | null>(null);
 
-	useEffect(() => {
-		if (operation.scriptText) {
-			setCustomWorkbenchViewData(VIEW_ID, {
-				scriptText: operation.scriptText,
-				downloadUrl: operation.downloadUrl,
-				downloadFilename: operation.downloadFilename,
-			});
-			const marker = operation.scriptText.length;
-			const isNew = lastShownRef.current == null || marker !== lastShownRef.current;
-			if (isNew) {
-				lastShownRef.current = marker;
-				if (navigationState.selectedTool === 'showJS' && navigationState.workbench !== WORKBENCH_ID) {
-					navigationActions.setWorkbench(WORKBENCH_ID);
-				}
-			}
-		} else {
-			clearCustomWorkbenchViewData(VIEW_ID);
-			lastShownRef.current = null;
-		}
-	}, [
-		clearCustomWorkbenchViewData,
-		navigationActions,
-		navigationState.selectedTool,
-		navigationState.workbench,
-		operation.scriptText,
-		setCustomWorkbenchViewData,
-	]);
-	
-	useEffect(() => {
-		if ((base.selectedFiles?.length ?? 0) === 0) {
-			try { base.operation.resetResults(); } catch { /* noop */ }
-			try { clearCustomWorkbenchViewData(VIEW_ID); } catch { /* noop */ }
-			if (navigationState.workbench === WORKBENCH_ID) {
-				try { navigationActions.setWorkbench('fileEditor'); } catch { /* noop */ }
-			}
-			lastShownRef.current = null;
-		}
-	}, [
-		base.selectedFiles?.length,
-		base.operation,
-		clearCustomWorkbenchViewData,
-		navigationActions,
-		navigationState.workbench,
-	]);
+  useEffect(() => {
+    if (operation.scriptText) {
+      setCustomWorkbenchViewData(VIEW_ID, {
+        scriptText: operation.scriptText,
+        downloadUrl: operation.downloadUrl,
+        downloadFilename: operation.downloadFilename,
+      });
+      const marker = operation.scriptText.length;
+      const isNew = lastShownRef.current == null || marker !== lastShownRef.current;
+      if (isNew) {
+        lastShownRef.current = marker;
+        if (navigationState.selectedTool === "showJS" && navigationState.workbench !== WORKBENCH_ID) {
+          navigationActions.setWorkbench(WORKBENCH_ID);
+        }
+      }
+    } else {
+      clearCustomWorkbenchViewData(VIEW_ID);
+      lastShownRef.current = null;
+    }
+  }, [
+    clearCustomWorkbenchViewData,
+    navigationActions,
+    navigationState.selectedTool,
+    navigationState.workbench,
+    operation.scriptText,
+    setCustomWorkbenchViewData,
+  ]);
 
-	return createToolFlow({
-		files: {
-			selectedFiles: base.selectedFiles,
-			isCollapsed: false,
-		},
-		steps: [],
-		executeButton: {
-			text: hasResults ? t('back', 'Back') : t('showJS.submit', 'Extract JavaScript'),
-			loadingText: t('loading', 'Loading...'),
-			onClick: hasResults
-				? async () => {
-						// Clear results and deselect files so user can pick another file
-						try {
-							await base.operation.resetResults();
-						} catch { /* noop */ }
-						try {
-							clearSelections();
-						} catch { /* noop */ }
-						// Close the custom JS view and send user back to file manager to pick another file
-						try {
-							clearCustomWorkbenchViewData(VIEW_ID);
-						} catch { /* noop */ }
-						try {
-							navigationActions.setWorkbench('fileEditor');
-						} catch { /* noop */ }
-				  }
-				: base.handleExecute,
-			disabled: hasResults
-				? false
-				: (
-					!base.hasFiles ||
-					(base.selectedFiles?.length ?? 0) !== 1 ||
-					base.operation.isLoading ||
-					base.endpointLoading ||
-					base.endpointEnabled === false
-				),
-			isVisible: true,
-		},
-		review: {
-			isVisible: hasResults,
-			operation: base.operation,
-			title: t('showJS.results', 'Result'),
-			onUndo: undefined,
-		},
-	});
+  useEffect(() => {
+    if ((base.selectedFiles?.length ?? 0) === 0) {
+      try {
+        base.operation.resetResults();
+      } catch {
+        /* noop */
+      }
+      try {
+        clearCustomWorkbenchViewData(VIEW_ID);
+      } catch {
+        /* noop */
+      }
+      if (navigationState.workbench === WORKBENCH_ID) {
+        try {
+          navigationActions.setWorkbench("fileEditor");
+        } catch {
+          /* noop */
+        }
+      }
+      lastShownRef.current = null;
+    }
+  }, [base.selectedFiles?.length, base.operation, clearCustomWorkbenchViewData, navigationActions, navigationState.workbench]);
+
+  return createToolFlow({
+    files: {
+      selectedFiles: base.selectedFiles,
+      isCollapsed: false,
+    },
+    steps: [],
+    executeButton: {
+      text: hasResults ? t("back", "Back") : t("showJS.submit", "Extract JavaScript"),
+      loadingText: t("loading", "Loading..."),
+      onClick: hasResults
+        ? async () => {
+            // Clear results and deselect files so user can pick another file
+            try {
+              await base.operation.resetResults();
+            } catch {
+              /* noop */
+            }
+            try {
+              clearSelections();
+            } catch {
+              /* noop */
+            }
+            // Close the custom JS view and send user back to file manager to pick another file
+            try {
+              clearCustomWorkbenchViewData(VIEW_ID);
+            } catch {
+              /* noop */
+            }
+            try {
+              navigationActions.setWorkbench("fileEditor");
+            } catch {
+              /* noop */
+            }
+          }
+        : base.handleExecute,
+      disabled: hasResults
+        ? false
+        : !base.hasFiles ||
+          (base.selectedFiles?.length ?? 0) !== 1 ||
+          base.operation.isLoading ||
+          base.endpointLoading ||
+          base.endpointEnabled === false,
+      isVisible: true,
+    },
+    review: {
+      isVisible: hasResults,
+      operation: base.operation,
+      title: t("showJS.results", "Result"),
+      onUndo: undefined,
+    },
+  });
 };
 
 const ShowJSTool = ShowJS as ToolComponent;
@@ -146,5 +158,3 @@ ShowJSTool.tool = () => useShowJSOperation;
 ShowJSTool.getDefaultParameters = () => ({ ...defaultParameters });
 
 export default ShowJSTool;
-
-
diff --git a/frontend/src/core/tools/Sign.tsx b/frontend/src/core/tools/Sign.tsx
index 0af1f6855c..0e64342506 100644
--- a/frontend/src/core/tools/Sign.tsx
+++ b/frontend/src/core/tools/Sign.tsx
@@ -1,11 +1,11 @@
-import { createStampTool } from '@app/tools/stamp/createStampTool';
+import { createStampTool } from "@app/tools/stamp/createStampTool";
 
 const Sign = createStampTool({
-  toolId: 'sign',
-  translationScope: 'sign',
-  allowedSignatureSources: ['canvas', 'image', 'text', 'saved'],
-  defaultSignatureSource: 'canvas',
-  defaultSignatureType: 'canvas',
+  toolId: "sign",
+  translationScope: "sign",
+  allowedSignatureSources: ["canvas", "image", "text", "saved"],
+  defaultSignatureSource: "canvas",
+  defaultSignatureType: "canvas",
   enableApplyAction: true,
 });
 
diff --git a/frontend/src/core/tools/SingleLargePage.tsx b/frontend/src/core/tools/SingleLargePage.tsx
index 76da9afdde..80a8435624 100644
--- a/frontend/src/core/tools/SingleLargePage.tsx
+++ b/frontend/src/core/tools/SingleLargePage.tsx
@@ -8,12 +8,7 @@ import { BaseToolProps, ToolComponent } from "@app/types/tool";
 const SingleLargePage = (props: BaseToolProps) => {
   const { t } = useTranslation();
 
-  const base = useBaseTool(
-    'singleLargePage',
-    useSingleLargePageParameters,
-    useSingleLargePageOperation,
-    props
-  );
+  const base = useBaseTool("singleLargePage", useSingleLargePageParameters, useSingleLargePageOperation, props);
 
   return createToolFlow({
     files: {
diff --git a/frontend/src/core/tools/Split.tsx b/frontend/src/core/tools/Split.tsx
index 6d6313dfd5..b9cc7fd12b 100644
--- a/frontend/src/core/tools/Split.tsx
+++ b/frontend/src/core/tools/Split.tsx
@@ -15,12 +15,7 @@ import { useMultipleEndpointsEnabled } from "@app/hooks/useEndpointConfig";
 const Split = (props: BaseToolProps) => {
   const { t } = useTranslation();
 
-  const base = useBaseTool(
-    'split',
-    useSplitParameters,
-    useSplitOperation,
-    props
-  );
+  const base = useBaseTool("split", useSplitParameters, useSplitOperation, props);
 
   // Check which split endpoints are available
   const allSplitEndpoints = useMemo(() => Object.values(ENDPOINTS), []);
@@ -28,7 +23,7 @@ const Split = (props: BaseToolProps) => {
 
   // Filter METHOD_OPTIONS to only show methods with enabled endpoints
   const availableMethodOptions = useMemo(() => {
-    return METHOD_OPTIONS.filter(option => {
+    return METHOD_OPTIONS.filter((option) => {
       const endpoint = ENDPOINTS[option.value];
       // If endpoint status is not loaded yet, show all options (optimistic)
       // If endpoint is explicitly disabled (false), hide the option
@@ -43,7 +38,7 @@ const Split = (props: BaseToolProps) => {
   const getSettingsTitle = () => {
     if (!base.params.parameters.method) return t("split.steps.settings", "Settings");
 
-    const methodOption = METHOD_OPTIONS.find(option => option.value === base.params.parameters.method);
+    const methodOption = METHOD_OPTIONS.find((option) => option.value === base.params.parameters.method);
     if (!methodOption) return t("split.steps.settings", "Settings");
 
     const prefix = t(methodOption.prefixKey, "Split by");
@@ -60,12 +55,12 @@ const Split = (props: BaseToolProps) => {
       {
         title: t("split.steps.chooseMethod", "Choose Method"),
         isCollapsed: !!base.params.parameters.method, // Collapse when method is selected
-        onCollapsedClick: () => base.params.updateParameter('method', null),
+        onCollapsedClick: () => base.params.updateParameter("method", null),
         tooltip: methodTips,
         content: (
           <CardSelector<SplitMethod, MethodOption>
             options={availableMethodOptions}
-            onSelect={(method) => base.params.updateParameter('method', method)}
+            onSelect={(method) => base.params.updateParameter("method", method)}
             disabled={base.endpointLoading}
           />
         ),
diff --git a/frontend/src/core/tools/TimestampPdf.tsx b/frontend/src/core/tools/TimestampPdf.tsx
index 0544529880..3df72ff421 100644
--- a/frontend/src/core/tools/TimestampPdf.tsx
+++ b/frontend/src/core/tools/TimestampPdf.tsx
@@ -9,12 +9,7 @@ import { BaseToolProps, ToolComponent } from "@app/types/tool";
 const TimestampPdf = (props: BaseToolProps) => {
   const { t } = useTranslation();
 
-  const base = useBaseTool(
-    "timestampPdf",
-    useTimestampPdfParameters,
-    useTimestampPdfOperation,
-    props
-  );
+  const base = useBaseTool("timestampPdf", useTimestampPdfParameters, useTimestampPdfOperation, props);
 
   return createToolFlow({
     files: {
@@ -40,10 +35,7 @@ const TimestampPdf = (props: BaseToolProps) => {
       isVisible: !base.hasResults,
       loadingText: t("loading"),
       onClick: base.handleExecute,
-      disabled:
-        !base.params.validateParameters() ||
-        !base.hasFiles ||
-        !base.endpointEnabled,
+      disabled: !base.params.validateParameters() || !base.hasFiles || !base.endpointEnabled,
     },
     review: {
       isVisible: base.hasResults,
diff --git a/frontend/src/core/tools/UnlockPdfForms.tsx b/frontend/src/core/tools/UnlockPdfForms.tsx
index b1b562c72f..e59d08504a 100644
--- a/frontend/src/core/tools/UnlockPdfForms.tsx
+++ b/frontend/src/core/tools/UnlockPdfForms.tsx
@@ -8,12 +8,7 @@ import { BaseToolProps, ToolComponent } from "@app/types/tool";
 const UnlockPdfForms = (props: BaseToolProps) => {
   const { t } = useTranslation();
 
-  const base = useBaseTool(
-    'unlockPdfForms',
-    useUnlockPdfFormsParameters,
-    useUnlockPdfFormsOperation,
-    props
-  );
+  const base = useBaseTool("unlockPdfForms", useUnlockPdfFormsParameters, useUnlockPdfFormsOperation, props);
 
   return createToolFlow({
     files: {
diff --git a/frontend/src/core/tools/ValidateSignature.tsx b/frontend/src/core/tools/ValidateSignature.tsx
index 52cd5592e0..1380afa3ab 100644
--- a/frontend/src/core/tools/ValidateSignature.tsx
+++ b/frontend/src/core/tools/ValidateSignature.tsx
@@ -1,17 +1,23 @@
-import { useEffect, useMemo, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import PictureAsPdfIcon from '@mui/icons-material/PictureAsPdf';
-import { createToolFlow } from '@app/components/tools/shared/createToolFlow';
-import { useBaseTool } from '@app/hooks/tools/shared/useBaseTool';
-import { BaseToolProps, ToolComponent } from '@app/types/tool';
-import { useValidateSignatureParameters, defaultParameters } from '@app/hooks/tools/validateSignature/useValidateSignatureParameters';
-import ValidateSignatureSettings from '@app/components/tools/validateSignature/ValidateSignatureSettings';
-import ValidateSignatureResults from '@app/components/tools/validateSignature/ValidateSignatureResults';
-import { useValidateSignatureOperation, ValidateSignatureOperationHook } from '@app/hooks/tools/validateSignature/useValidateSignatureOperation';
-import ValidateSignatureReportView from '@app/components/tools/validateSignature/ValidateSignatureReportView';
-import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
-import { useNavigationActions, useNavigationState } from '@app/contexts/NavigationContext';
-import type { SignatureValidationReportData } from '@app/types/validateSignature';
+import { useEffect, useMemo, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import PictureAsPdfIcon from "@mui/icons-material/PictureAsPdf";
+import { createToolFlow } from "@app/components/tools/shared/createToolFlow";
+import { useBaseTool } from "@app/hooks/tools/shared/useBaseTool";
+import { BaseToolProps, ToolComponent } from "@app/types/tool";
+import {
+  useValidateSignatureParameters,
+  defaultParameters,
+} from "@app/hooks/tools/validateSignature/useValidateSignatureParameters";
+import ValidateSignatureSettings from "@app/components/tools/validateSignature/ValidateSignatureSettings";
+import ValidateSignatureResults from "@app/components/tools/validateSignature/ValidateSignatureResults";
+import {
+  useValidateSignatureOperation,
+  ValidateSignatureOperationHook,
+} from "@app/hooks/tools/validateSignature/useValidateSignatureOperation";
+import ValidateSignatureReportView from "@app/components/tools/validateSignature/ValidateSignatureReportView";
+import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
+import { useNavigationActions, useNavigationState } from "@app/contexts/NavigationContext";
+import type { SignatureValidationReportData } from "@app/types/validateSignature";
 
 const ValidateSignature = (props: BaseToolProps) => {
   const { t } = useTranslation();
@@ -24,28 +30,21 @@ const ValidateSignature = (props: BaseToolProps) => {
     clearCustomWorkbenchViewData,
   } = useToolWorkflow();
 
-  const REPORT_VIEW_ID = 'validateSignatureReport';
-  const REPORT_WORKBENCH_ID = 'custom:validateSignatureReport' as const;
+  const REPORT_VIEW_ID = "validateSignatureReport";
+  const REPORT_WORKBENCH_ID = "custom:validateSignatureReport" as const;
   const reportIcon = useMemo(() => <PictureAsPdfIcon fontSize="small" />, []);
 
-  const base = useBaseTool(
-    'validateSignature',
-    useValidateSignatureParameters,
-    useValidateSignatureOperation,
-    props
-  );
+  const base = useBaseTool("validateSignature", useValidateSignatureParameters, useValidateSignatureOperation, props);
 
   const operation = base.operation as ValidateSignatureOperationHook;
   const hasResults = operation.results.length > 0;
   const showResultsStep = hasResults || base.operation.isLoading || !!base.operation.errorMessage;
 
-
-
   useEffect(() => {
     registerCustomWorkbenchView({
       id: REPORT_VIEW_ID,
       workbenchId: REPORT_WORKBENCH_ID,
-      label: t('validateSignature.report.shortTitle', 'Signature Report'),
+      label: t("validateSignature.report.shortTitle", "Signature Report"),
       icon: reportIcon,
       component: ValidateSignatureReportView,
     });
@@ -54,13 +53,7 @@ const ValidateSignature = (props: BaseToolProps) => {
       clearCustomWorkbenchViewData(REPORT_VIEW_ID);
       unregisterCustomWorkbenchView(REPORT_VIEW_ID);
     };
-  }, [
-    clearCustomWorkbenchViewData,
-    registerCustomWorkbenchView,
-    reportIcon,
-    t,
-    unregisterCustomWorkbenchView,
-  ]);
+  }, [clearCustomWorkbenchViewData, registerCustomWorkbenchView, reportIcon, t, unregisterCustomWorkbenchView]);
 
   const reportData = useMemo<SignatureValidationReportData | null>(() => {
     if (operation.results.length === 0) {
@@ -88,7 +81,7 @@ const ValidateSignature = (props: BaseToolProps) => {
 
       if (isNewReport) {
         lastReportGeneratedAtRef.current = generatedAt;
-        if (navigationState.selectedTool === 'validateSignature' && navigationState.workbench !== REPORT_WORKBENCH_ID) {
+        if (navigationState.selectedTool === "validateSignature" && navigationState.workbench !== REPORT_WORKBENCH_ID) {
           navigationActions.setWorkbench(REPORT_WORKBENCH_ID);
         }
       }
@@ -112,7 +105,7 @@ const ValidateSignature = (props: BaseToolProps) => {
     },
     steps: [
       {
-        title: t('validateSignature.settings.title', 'Validation Settings'),
+        title: t("validateSignature.settings.title", "Validation Settings"),
         isCollapsed: base.settingsCollapsed,
         onCollapsedClick: base.settingsCollapsed ? base.handleSettingsReset : undefined,
         content: (
@@ -124,7 +117,7 @@ const ValidateSignature = (props: BaseToolProps) => {
         ),
       },
       {
-        title: t('validateSignature.results', 'Validation Results'),
+        title: t("validateSignature.results", "Validation Results"),
         isVisible: showResultsStep,
         isCollapsed: false,
         content: (
@@ -139,8 +132,8 @@ const ValidateSignature = (props: BaseToolProps) => {
       },
     ],
     executeButton: {
-      text: t('validateSignature.submit', 'Validate Signatures'),
-      loadingText: t('loading', 'Loading...'),
+      text: t("validateSignature.submit", "Validate Signatures"),
+      loadingText: t("loading", "Loading..."),
       onClick: base.handleExecute,
       endpointEnabled: base.endpointEnabled,
       paramsValid: base.params.validateParameters(),
@@ -149,7 +142,7 @@ const ValidateSignature = (props: BaseToolProps) => {
     review: {
       isVisible: false,
       operation: base.operation,
-      title: t('validateSignature.results', 'Validation Results'),
+      title: t("validateSignature.results", "Validation Results"),
       onUndo: base.handleUndo,
     },
   });
diff --git a/frontend/src/core/tools/annotate/AnnotationPanel.tsx b/frontend/src/core/tools/annotate/AnnotationPanel.tsx
index 1c71973a23..81972be630 100644
--- a/frontend/src/core/tools/annotate/AnnotationPanel.tsx
+++ b/frontend/src/core/tools/annotate/AnnotationPanel.tsx
@@ -1,16 +1,16 @@
-import { useMemo, useState } from 'react';
-import type React from 'react';
-import { useTranslation } from 'react-i18next';
-import { Text, Group, ActionIcon, Stack, Slider, Box, Tooltip as MantineTooltip, Button, Tooltip, Paper } from '@mantine/core';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { ColorPicker, ColorSwatchButton } from '@app/components/annotation/shared/ColorPicker';
-import { ImageUploader } from '@app/components/annotation/shared/ImageUploader';
-import { SuggestedToolsSection } from '@app/components/tools/shared/SuggestedToolsSection';
-import { DrawingControls } from '@app/components/annotation/shared/DrawingControls';
-import type { AnnotationToolId, AnnotationAPI, SignatureAPI, AnnotationObject } from '@app/components/viewer/viewerTypes';
-import type { ViewerContextType } from '@app/contexts/ViewerContext';
-import type { SignParameters } from '@app/hooks/tools/sign/useSignParameters';
-import type { BuildToolOptionsExtras } from '@app/tools/annotate/useAnnotationStyleState';
+import { useMemo, useState } from "react";
+import type React from "react";
+import { useTranslation } from "react-i18next";
+import { Text, Group, ActionIcon, Stack, Slider, Box, Tooltip as MantineTooltip, Button, Tooltip, Paper } from "@mantine/core";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { ColorPicker, ColorSwatchButton } from "@app/components/annotation/shared/ColorPicker";
+import { ImageUploader } from "@app/components/annotation/shared/ImageUploader";
+import { SuggestedToolsSection } from "@app/components/tools/shared/SuggestedToolsSection";
+import { DrawingControls } from "@app/components/annotation/shared/DrawingControls";
+import type { AnnotationToolId, AnnotationAPI, SignatureAPI, AnnotationObject } from "@app/components/viewer/viewerTypes";
+import type { ViewerContextType } from "@app/contexts/ViewerContext";
+import type { SignParameters } from "@app/hooks/tools/sign/useSignParameters";
+import type { BuildToolOptionsExtras } from "@app/tools/annotate/useAnnotationStyleState";
 
 interface StyleState {
   inkColor: string;
@@ -26,7 +26,7 @@ interface StyleState {
   squigglyOpacity: number;
   textColor: string;
   textSize: number;
-  textAlignment: 'left' | 'center' | 'right';
+  textAlignment: "left" | "center" | "right";
   textBackgroundColor: string;
   noteBackgroundColor: string;
   shapeStrokeColor: string;
@@ -51,7 +51,7 @@ interface StyleActions {
   setSquigglyOpacity: (value: number) => void;
   setTextColor: (value: string) => void;
   setTextSize: (value: number) => void;
-  setTextAlignment: (value: 'left' | 'center' | 'right') => void;
+  setTextAlignment: (value: "left" | "center" | "right") => void;
   setTextBackgroundColor: (value: string) => void;
   setNoteBackgroundColor: (value: string) => void;
   setShapeStrokeColor: (value: string) => void;
@@ -65,17 +65,17 @@ interface StyleActions {
 type BuildToolOptionsFn = (toolId: AnnotationToolId, extras?: BuildToolOptionsExtras) => Record<string, unknown>;
 
 type ColorTarget =
-  | 'ink'
-  | 'highlight'
-  | 'inkHighlighter'
-  | 'underline'
-  | 'strikeout'
-  | 'squiggly'
-  | 'text'
-  | 'textBackground'
-  | 'noteBackground'
-  | 'shapeStroke'
-  | 'shapeFill'
+  | "ink"
+  | "highlight"
+  | "inkHighlighter"
+  | "underline"
+  | "strikeout"
+  | "squiggly"
+  | "text"
+  | "textBackground"
+  | "noteBackground"
+  | "shapeStroke"
+  | "shapeFill"
   | null;
 
 interface AnnotationPanelProps {
@@ -191,37 +191,40 @@ export function AnnotationPanel(props: AnnotationPanelProps) {
   } = styleActions;
 
   const textMarkupTools: { id: AnnotationToolId; label: string; icon: string }[] = [
-    { id: 'highlight', label: t('annotation.highlight', 'Highlight'), icon: 'highlight' },
-    { id: 'underline', label: t('annotation.underline', 'Underline'), icon: 'format-underlined' },
-    { id: 'strikeout', label: t('annotation.strikeout', 'Strikeout'), icon: 'strikethrough-s' },
-    { id: 'squiggly', label: t('annotation.squiggly', 'Squiggly'), icon: 'show-chart' },
+    { id: "highlight", label: t("annotation.highlight", "Highlight"), icon: "highlight" },
+    { id: "underline", label: t("annotation.underline", "Underline"), icon: "format-underlined" },
+    { id: "strikeout", label: t("annotation.strikeout", "Strikeout"), icon: "strikethrough-s" },
+    { id: "squiggly", label: t("annotation.squiggly", "Squiggly"), icon: "show-chart" },
   ];
 
   const drawingTools: { id: AnnotationToolId; label: string; icon: string }[] = [
-    { id: 'ink', label: t('annotation.pen', 'Pen'), icon: 'edit' },
-    { id: 'inkHighlighter', label: t('annotation.freehandHighlighter', 'Freehand Highlighter'), icon: 'brush' },
+    { id: "ink", label: t("annotation.pen", "Pen"), icon: "edit" },
+    { id: "inkHighlighter", label: t("annotation.freehandHighlighter", "Freehand Highlighter"), icon: "brush" },
   ];
 
   const shapeTools: { id: AnnotationToolId; label: string; icon: string }[] = [
-    { id: 'square', label: t('annotation.square', 'Square'), icon: 'crop-square' },
-    { id: 'circle', label: t('annotation.circle', 'Circle'), icon: 'radio-button-unchecked' },
-    { id: 'line', label: t('annotation.line', 'Line'), icon: 'show-chart' },
-    { id: 'polygon', label: t('annotation.polygon', 'Polygon'), icon: 'change-history' },
+    { id: "square", label: t("annotation.square", "Square"), icon: "crop-square" },
+    { id: "circle", label: t("annotation.circle", "Circle"), icon: "radio-button-unchecked" },
+    { id: "line", label: t("annotation.line", "Line"), icon: "show-chart" },
+    { id: "polygon", label: t("annotation.polygon", "Polygon"), icon: "change-history" },
   ];
 
   const commentTools: { id: AnnotationToolId; label: string; icon: string }[] = [
-    { id: 'textComment', label: t('annotation.comment', 'Comment'), icon: 'comment' },
-    { id: 'insertText', label: t('annotation.insertText', 'Insert Text'), icon: 'add-comment' },
-    { id: 'replaceText', label: t('annotation.replaceText', 'Replace Text'), icon: 'find-replace' },
+    { id: "textComment", label: t("annotation.comment", "Comment"), icon: "comment" },
+    { id: "insertText", label: t("annotation.insertText", "Insert Text"), icon: "add-comment" },
+    { id: "replaceText", label: t("annotation.replaceText", "Replace Text"), icon: "find-replace" },
   ];
 
   const otherTools: { id: AnnotationToolId; label: string; icon: string }[] = [
-    { id: 'text', label: t('annotation.text', 'Text box'), icon: 'text-fields' },
-    { id: 'note', label: t('annotation.note', 'Note'), icon: 'sticky-note-2' },
-    { id: 'stamp', label: t('annotation.stamp', 'Add Image'), icon: 'add-photo-alternate' },
+    { id: "text", label: t("annotation.text", "Text box"), icon: "text-fields" },
+    { id: "note", label: t("annotation.note", "Note"), icon: "sticky-note-2" },
+    { id: "stamp", label: t("annotation.stamp", "Add Image"), icon: "add-photo-alternate" },
   ];
 
-  const activeColor = useMemo(() => colorPickerTarget ? getActiveColor(colorPickerTarget as AnnotationToolId) : '#000000', [colorPickerTarget, getActiveColor]);
+  const activeColor = useMemo(
+    () => (colorPickerTarget ? getActiveColor(colorPickerTarget as AnnotationToolId) : "#000000"),
+    [colorPickerTarget, getActiveColor],
+  );
 
   const annotationsVisible = viewerContext?.isAnnotationsVisible ?? true;
 
@@ -230,8 +233,8 @@ export function AnnotationPanel(props: AnnotationPanelProps) {
       {tools.map((tool) => (
         <MantineTooltip key={tool.id} label={tool.label} withArrow>
           <ActionIcon
-            variant={activeTool === tool.id && annotationsVisible ? 'filled' : 'subtle'}
-            color={activeTool === tool.id && annotationsVisible ? 'blue' : undefined}
+            variant={activeTool === tool.id && annotationsVisible ? "filled" : "subtle"}
+            color={activeTool === tool.id && annotationsVisible ? "blue" : undefined}
             radius="md"
             onClick={() => activateAnnotationTool(tool.id)}
             disabled={!annotationsVisible}
@@ -247,16 +250,23 @@ export function AnnotationPanel(props: AnnotationPanelProps) {
   const defaultStyleControls = (
     <Paper withBorder p="sm" radius="md">
       <Stack gap="sm">
-        {activeTool === 'select' ? (
+        {activeTool === "select" ? (
           <>
-            <Text size="sm" fw={600}>{t('annotation.selectAndMove', 'Select and Edit')}</Text>
+            <Text size="sm" fw={600}>
+              {t("annotation.selectAndMove", "Select and Edit")}
+            </Text>
             <Text size="xs" c="dimmed">
-              {t('annotation.editSelectDescription', 'Click an existing annotation to edit its color, opacity, text, or size.')}
+              {t(
+                "annotation.editSelectDescription",
+                "Click an existing annotation to edit its color, opacity, text, or size.",
+              )}
             </Text>
           </>
-        ) : activeTool === 'stamp' ? (
+        ) : activeTool === "stamp" ? (
           <>
-            <Text size="sm" fw={600}>{t('annotation.stampSettings', 'Stamp Settings')}</Text>
+            <Text size="sm" fw={600}>
+              {t("annotation.stampSettings", "Stamp Settings")}
+            </Text>
             <ImageUploader
               onImageChange={async (file) => {
                 if (file) {
@@ -270,7 +280,8 @@ export function AnnotationPanel(props: AnnotationPanelProps) {
 
                     const naturalSize = await new Promise<{ width: number; height: number } | null>((resolve) => {
                       const img = new Image();
-                      img.onload = () => resolve({ width: img.naturalWidth || img.width, height: img.naturalHeight || img.height });
+                      img.onload = () =>
+                        resolve({ width: img.naturalWidth || img.width, height: img.naturalHeight || img.height });
                       img.onerror = () => resolve(null);
                       img.src = dataUrl;
                     });
@@ -281,22 +292,22 @@ export function AnnotationPanel(props: AnnotationPanelProps) {
                     setPlacementPreviewSize(displaySize);
 
                     setSignatureConfig({
-                      signatureType: 'image',
+                      signatureType: "image",
                       signatureData: dataUrl,
                     });
 
                     setTimeout(() => {
                       viewerContext?.setAnnotationMode(true);
                       setPlacementMode(true);
-                      const stampOptions = buildToolOptions('stamp', {
+                      const stampOptions = buildToolOptions("stamp", {
                         stampImageData: dataUrl,
                         stampImageSize: displaySize,
                       });
-                        annotationApiRef?.current?.setAnnotationStyle?.('stamp', stampOptions);
-                        annotationApiRef?.current?.activateAnnotationTool?.('stamp', stampOptions);
+                      annotationApiRef?.current?.setAnnotationStyle?.("stamp", stampOptions);
+                      annotationApiRef?.current?.activateAnnotationTool?.("stamp", stampOptions);
                     }, 150);
                   } catch (err) {
-                    console.error('Failed to load stamp image', err);
+                    console.error("Failed to load stamp image", err);
                   }
                 } else {
                   setStampImageData(undefined);
@@ -310,71 +321,82 @@ export function AnnotationPanel(props: AnnotationPanelProps) {
             />
             {stampImageData && (
               <Stack gap="xs">
-                <Text size="xs" c="dimmed">{t('annotation.imagePreview', 'Preview')}</Text>
+                <Text size="xs" c="dimmed">
+                  {t("annotation.imagePreview", "Preview")}
+                </Text>
                 <img
                   src={stampImageData}
                   alt="Stamp preview"
-                  style={{ maxWidth: '100%', maxHeight: '150px', objectFit: 'contain', border: '1px solid #ccc', borderRadius: '4px' }}
+                  style={{
+                    maxWidth: "100%",
+                    maxHeight: "150px",
+                    objectFit: "contain",
+                    border: "1px solid #ccc",
+                    borderRadius: "4px",
+                  }}
                 />
               </Stack>
             )}
           </>
         ) : (
           <>
-            <Text size="sm" fw={600}>{t('annotation.settings', 'Settings')}</Text>
+            <Text size="sm" fw={600}>
+              {t("annotation.settings", "Settings")}
+            </Text>
             <Group gap="md">
               <Stack gap={4} align="center">
                 <Text size="xs" c="dimmed">
-                  {['square', 'circle', 'polygon'].includes(activeTool)
-                    ? t('annotation.strokeColor', 'Stroke Color')
-                    : t('annotation.color', 'Color')
-                  }
+                  {["square", "circle", "polygon"].includes(activeTool)
+                    ? t("annotation.strokeColor", "Stroke Color")
+                    : t("annotation.color", "Color")}
                 </Text>
                 <ColorSwatchButton
                   color={
-                    activeTool === 'ink'
+                    activeTool === "ink"
                       ? inkColor
-                      : activeTool === 'highlight' || activeTool === 'inkHighlighter'
+                      : activeTool === "highlight" || activeTool === "inkHighlighter"
                         ? highlightColor
-                        : activeTool === 'underline'
+                        : activeTool === "underline"
                           ? underlineColor
-                          : activeTool === 'strikeout'
+                          : activeTool === "strikeout"
                             ? strikeoutColor
-                            : activeTool === 'squiggly'
+                            : activeTool === "squiggly"
                               ? squigglyColor
-                              : ['square', 'circle', 'line', 'polygon'].includes(activeTool)
+                              : ["square", "circle", "line", "polygon"].includes(activeTool)
                                 ? shapeStrokeColor
                                 : textColor
                   }
                   size={30}
                   onClick={() => {
                     const target: ColorTarget =
-                      activeTool === 'ink'
-                        ? 'ink'
-                        : activeTool === 'highlight' || activeTool === 'inkHighlighter'
-                          ? 'highlight'
-                          : activeTool === 'underline'
-                            ? 'underline'
-                            : activeTool === 'strikeout'
-                              ? 'strikeout'
-                              : activeTool === 'squiggly'
-                                ? 'squiggly'
-                                : ['square', 'circle', 'line', 'polygon'].includes(activeTool)
-                                  ? 'shapeStroke'
-                                  : 'text';
+                      activeTool === "ink"
+                        ? "ink"
+                        : activeTool === "highlight" || activeTool === "inkHighlighter"
+                          ? "highlight"
+                          : activeTool === "underline"
+                            ? "underline"
+                            : activeTool === "strikeout"
+                              ? "strikeout"
+                              : activeTool === "squiggly"
+                                ? "squiggly"
+                                : ["square", "circle", "line", "polygon"].includes(activeTool)
+                                  ? "shapeStroke"
+                                  : "text";
                     setColorPickerTarget(target);
                     setIsColorPickerOpen(true);
                   }}
                 />
               </Stack>
-              {['square', 'circle', 'polygon'].includes(activeTool) && (
+              {["square", "circle", "polygon"].includes(activeTool) && (
                 <Stack gap={4} align="center">
-                  <Text size="xs" c="dimmed">{t('annotation.fillColor', 'Fill Color')}</Text>
+                  <Text size="xs" c="dimmed">
+                    {t("annotation.fillColor", "Fill Color")}
+                  </Text>
                   <ColorSwatchButton
                     color={shapeFillColor}
                     size={30}
                     onClick={() => {
-                      setColorPickerTarget('shapeFill');
+                      setColorPickerTarget("shapeFill");
                       setIsColorPickerOpen(true);
                     }}
                   />
@@ -382,60 +404,72 @@ export function AnnotationPanel(props: AnnotationPanelProps) {
               )}
             </Group>
 
-            {activeTool === 'ink' && (
+            {activeTool === "ink" && (
               <Box>
-                <Text size="xs" c="dimmed" mb={4}>{t('annotation.strokeWidth', 'Width')}</Text>
+                <Text size="xs" c="dimmed" mb={4}>
+                  {t("annotation.strokeWidth", "Width")}
+                </Text>
                 <Slider min={1} max={12} value={inkWidth} onChange={setInkWidth} />
               </Box>
             )}
 
-            {(activeTool === 'highlight' || activeTool === 'inkHighlighter') && (
+            {(activeTool === "highlight" || activeTool === "inkHighlighter") && (
               <Box>
-                <Text size="xs" c="dimmed" mb={4}>{t('annotation.opacity', 'Opacity')}</Text>
+                <Text size="xs" c="dimmed" mb={4}>
+                  {t("annotation.opacity", "Opacity")}
+                </Text>
                 <Slider min={10} max={100} value={highlightOpacity} onChange={setHighlightOpacity} />
               </Box>
             )}
 
-            {activeTool === 'underline' && (
+            {activeTool === "underline" && (
               <Box>
-                <Text size="xs" c="dimmed" mb={4}>{t('annotation.opacity', 'Opacity')}</Text>
+                <Text size="xs" c="dimmed" mb={4}>
+                  {t("annotation.opacity", "Opacity")}
+                </Text>
                 <Slider min={10} max={100} value={underlineOpacity} onChange={setUnderlineOpacity} />
               </Box>
             )}
 
-            {activeTool === 'inkHighlighter' && (
+            {activeTool === "inkHighlighter" && (
               <Box>
-                <Text size="xs" c="dimmed" mb={4}>{t('annotation.strokeWidth', 'Width')}</Text>
+                <Text size="xs" c="dimmed" mb={4}>
+                  {t("annotation.strokeWidth", "Width")}
+                </Text>
                 <Slider min={1} max={20} value={freehandHighlighterWidth} onChange={setFreehandHighlighterWidth} />
               </Box>
             )}
 
-            {activeTool === 'text' && (
+            {activeTool === "text" && (
               <>
                 <Box>
-                  <Text size="xs" c="dimmed" mb={4}>{t('annotation.fontSize', 'Font size')}</Text>
+                  <Text size="xs" c="dimmed" mb={4}>
+                    {t("annotation.fontSize", "Font size")}
+                  </Text>
                   <Slider min={8} max={32} value={textSize} onChange={setTextSize} />
                 </Box>
                 <Box>
-                  <Text size="xs" c="dimmed" mb={4}>{t('annotation.textAlignment', 'Text Alignment')}</Text>
+                  <Text size="xs" c="dimmed" mb={4}>
+                    {t("annotation.textAlignment", "Text Alignment")}
+                  </Text>
                   <Group gap="xs">
                     <ActionIcon
-                      variant={textAlignment === 'left' ? 'filled' : 'default'}
-                      onClick={() => setTextAlignment('left')}
+                      variant={textAlignment === "left" ? "filled" : "default"}
+                      onClick={() => setTextAlignment("left")}
                       size="md"
                     >
                       <LocalIcon icon="format-align-left" width={18} height={18} />
                     </ActionIcon>
                     <ActionIcon
-                      variant={textAlignment === 'center' ? 'filled' : 'default'}
-                      onClick={() => setTextAlignment('center')}
+                      variant={textAlignment === "center" ? "filled" : "default"}
+                      onClick={() => setTextAlignment("center")}
                       size="md"
                     >
                       <LocalIcon icon="format-align-center" width={18} height={18} />
                     </ActionIcon>
                     <ActionIcon
-                      variant={textAlignment === 'right' ? 'filled' : 'default'}
-                      onClick={() => setTextAlignment('right')}
+                      variant={textAlignment === "right" ? "filled" : "default"}
+                      onClick={() => setTextAlignment("right")}
                       size="md"
                     >
                       <LocalIcon icon="format-align-right" width={18} height={18} />
@@ -443,75 +477,85 @@ export function AnnotationPanel(props: AnnotationPanelProps) {
                   </Group>
                 </Box>
                 <Box>
-                  <Text size="xs" c="dimmed" mb={4}>{t('annotation.backgroundColor', 'Background color')}</Text>
+                  <Text size="xs" c="dimmed" mb={4}>
+                    {t("annotation.backgroundColor", "Background color")}
+                  </Text>
                   <Group gap="xs" align="center">
                     <ColorSwatchButton
-                      color={textBackgroundColor || '#ffffff'}
+                      color={textBackgroundColor || "#ffffff"}
                       size={30}
                       onClick={() => {
-                        setColorPickerTarget('textBackground');
+                        setColorPickerTarget("textBackground");
                         setIsColorPickerOpen(true);
                       }}
                     />
                     <Button
                       size="xs"
-                      variant={textBackgroundColor ? 'light' : 'default'}
+                      variant={textBackgroundColor ? "light" : "default"}
                       onClick={() => {
-                        setTextBackgroundColor('');
-                        annotationApiRef?.current?.setAnnotationStyle?.('text', buildToolOptions('text'));
-                        if (selectedAnn?.object?.type === 3 && deriveToolFromAnnotation(selectedAnn.object) !== 'note') {
+                        setTextBackgroundColor("");
+                        annotationApiRef?.current?.setAnnotationStyle?.("text", buildToolOptions("text"));
+                        if (selectedAnn?.object?.type === 3 && deriveToolFromAnnotation(selectedAnn.object) !== "note") {
                           annotationApiRef?.current?.updateAnnotation?.(
                             selectedAnn.object?.pageIndex ?? 0,
                             selectedAnn.object.id as string,
-                            { backgroundColor: 'transparent', fillColor: 'transparent' }
+                            { backgroundColor: "transparent", fillColor: "transparent" },
                           );
                         }
                       }}
                     >
-                      {textBackgroundColor ? t('annotation.clearBackground', 'Remove background') : t('annotation.noBackground', 'No background')}
+                      {textBackgroundColor
+                        ? t("annotation.clearBackground", "Remove background")
+                        : t("annotation.noBackground", "No background")}
                     </Button>
                   </Group>
                 </Box>
               </>
             )}
 
-            {activeTool === 'note' && (
+            {activeTool === "note" && (
               <Box>
-                <Text size="xs" c="dimmed" mb={4}>{t('annotation.backgroundColor', 'Background color')}</Text>
+                <Text size="xs" c="dimmed" mb={4}>
+                  {t("annotation.backgroundColor", "Background color")}
+                </Text>
                 <Group gap="xs" align="center">
                   <ColorSwatchButton
-                    color={noteBackgroundColor || '#ffffff'}
+                    color={noteBackgroundColor || "#ffffff"}
                     size={30}
                     onClick={() => {
-                      setColorPickerTarget('noteBackground');
+                      setColorPickerTarget("noteBackground");
                       setIsColorPickerOpen(true);
                     }}
                   />
                   <Button
                     size="xs"
-                    variant={noteBackgroundColor ? 'light' : 'default'}
+                    variant={noteBackgroundColor ? "light" : "default"}
                     onClick={() => {
-                      setNoteBackgroundColor('');
-                      annotationApiRef?.current?.setAnnotationStyle?.('note', buildToolOptions('note'));
-                      if (selectedAnn?.object?.type === 3 && deriveToolFromAnnotation(selectedAnn.object) === 'note') {
+                      setNoteBackgroundColor("");
+                      annotationApiRef?.current?.setAnnotationStyle?.("note", buildToolOptions("note"));
+                      if (selectedAnn?.object?.type === 3 && deriveToolFromAnnotation(selectedAnn.object) === "note") {
                         annotationApiRef?.current?.updateAnnotation?.(
                           selectedAnn.object?.pageIndex ?? 0,
                           selectedAnn.object.id as string,
-                          { backgroundColor: 'transparent', fillColor: 'transparent' }
+                          { backgroundColor: "transparent", fillColor: "transparent" },
                         );
                       }
                     }}
                   >
-                    {noteBackgroundColor ? t('annotation.clearBackground', 'Remove background') : t('annotation.noBackground', 'No background')}
+                    {noteBackgroundColor
+                      ? t("annotation.clearBackground", "Remove background")
+                      : t("annotation.noBackground", "No background")}
                   </Button>
                 </Group>
               </Box>
             )}
 
-            {['square', 'circle', 'line', 'polygon'].includes(activeTool) && (
+            {["square", "circle", "line", "polygon"].includes(activeTool) && (
               <>
                 <Box>
-                  <Text size="xs" c="dimmed" mb={4}>{t('annotation.opacity', 'Opacity')}</Text>
+                  <Text size="xs" c="dimmed" mb={4}>
+                    {t("annotation.opacity", "Opacity")}
+                  </Text>
                   <Slider
                     min={10}
                     max={100}
@@ -524,26 +568,29 @@ export function AnnotationPanel(props: AnnotationPanelProps) {
                   />
                 </Box>
                 <Box>
-                  {activeTool === 'line' ? (
+                  {activeTool === "line" ? (
                     <>
-                      <Text size="xs" c="dimmed" mb={4}>{t('annotation.strokeWidth', 'Width')}</Text>
+                      <Text size="xs" c="dimmed" mb={4}>
+                        {t("annotation.strokeWidth", "Width")}
+                      </Text>
                       <Slider min={1} max={12} value={shapeThickness} onChange={setShapeThickness} />
                     </>
                   ) : (
                     <Group gap="xs" align="flex-end">
                       <Box style={{ flex: 1 }}>
-                        <Text size="xs" c="dimmed" mb={4}>{t('annotation.strokeWidth', 'Stroke')}</Text>
+                        <Text size="xs" c="dimmed" mb={4}>
+                          {t("annotation.strokeWidth", "Stroke")}
+                        </Text>
                         <Slider min={0} max={12} value={shapeThickness} onChange={setShapeThickness} />
                       </Box>
                       <Button
                         size="xs"
-                        variant={shapeThickness === 0 ? 'filled' : 'light'}
+                        variant={shapeThickness === 0 ? "filled" : "light"}
                         onClick={() => setShapeThickness(shapeThickness === 0 ? 1 : 0)}
                       >
                         {shapeThickness === 0
-                          ? t('annotation.borderOff', 'Border: Off')
-                          : t('annotation.borderOn', 'Border: On')
-                        }
+                          ? t("annotation.borderOff", "Border: Off")
+                          : t("annotation.borderOn", "Border: On")}
                       </Button>
                     </Group>
                   )}
@@ -562,132 +609,158 @@ export function AnnotationPanel(props: AnnotationPanelProps) {
       onClose={() => setIsColorPickerOpen(false)}
       selectedColor={activeColor}
       showOpacity={
-        colorPickerTarget !== 'text' &&
-        colorPickerTarget !== 'textBackground' &&
-        colorPickerTarget !== 'noteBackground' &&
-        colorPickerTarget !== 'shapeStroke' &&
-        colorPickerTarget !== 'shapeFill' &&
-        colorPickerTarget !== 'underline' &&
+        colorPickerTarget !== "text" &&
+        colorPickerTarget !== "textBackground" &&
+        colorPickerTarget !== "noteBackground" &&
+        colorPickerTarget !== "shapeStroke" &&
+        colorPickerTarget !== "shapeFill" &&
+        colorPickerTarget !== "underline" &&
         colorPickerTarget !== null
       }
       opacity={
-        colorPickerTarget === 'highlight' ? highlightOpacity :
-        colorPickerTarget === 'underline' ? underlineOpacity :
-        colorPickerTarget === 'strikeout' ? strikeoutOpacity :
-        colorPickerTarget === 'squiggly' ? squigglyOpacity :
-        colorPickerTarget === 'shapeStroke' ? shapeStrokeOpacity :
-        colorPickerTarget === 'shapeFill' ? shapeFillOpacity :
-        100
+        colorPickerTarget === "highlight"
+          ? highlightOpacity
+          : colorPickerTarget === "underline"
+            ? underlineOpacity
+            : colorPickerTarget === "strikeout"
+              ? strikeoutOpacity
+              : colorPickerTarget === "squiggly"
+                ? squigglyOpacity
+                : colorPickerTarget === "shapeStroke"
+                  ? shapeStrokeOpacity
+                  : colorPickerTarget === "shapeFill"
+                    ? shapeFillOpacity
+                    : 100
       }
       opacityLabel={
-        colorPickerTarget === 'shapeStroke' ? t('annotation.strokeOpacity', 'Stroke Opacity') :
-        colorPickerTarget === 'shapeFill' ? t('annotation.fillOpacity', 'Fill Opacity') :
-        undefined
+        colorPickerTarget === "shapeStroke"
+          ? t("annotation.strokeOpacity", "Stroke Opacity")
+          : colorPickerTarget === "shapeFill"
+            ? t("annotation.fillOpacity", "Fill Opacity")
+            : undefined
       }
       onOpacityChange={(opacity) => {
-        if (colorPickerTarget === 'highlight') {
+        if (colorPickerTarget === "highlight") {
           setHighlightOpacity(opacity);
-          if (activeTool === 'highlight' || activeTool === 'inkHighlighter') {
+          if (activeTool === "highlight" || activeTool === "inkHighlighter") {
             annotationApiRef?.current?.setAnnotationStyle?.(activeTool, buildToolOptions(activeTool));
           }
           if (selectedAnn?.object?.id && (selectedAnn.object?.type === 9 || selectedAnn.object?.type === 15)) {
-            annotationApiRef?.current?.updateAnnotation?.(selectedAnn.object.pageIndex ?? 0, selectedAnn.object.id as string, { opacity: opacity / 100 });
+            annotationApiRef?.current?.updateAnnotation?.(selectedAnn.object.pageIndex ?? 0, selectedAnn.object.id as string, {
+              opacity: opacity / 100,
+            });
           }
-        } else if (colorPickerTarget === 'underline') {
+        } else if (colorPickerTarget === "underline") {
           setUnderlineOpacity(opacity);
-          annotationApiRef?.current?.setAnnotationStyle?.('underline', buildToolOptions('underline'));
+          annotationApiRef?.current?.setAnnotationStyle?.("underline", buildToolOptions("underline"));
           if (selectedAnn?.object?.id && selectedAnn.object?.type === 10) {
-            annotationApiRef?.current?.updateAnnotation?.(selectedAnn.object.pageIndex ?? 0, selectedAnn.object.id as string, { opacity: opacity / 100 });
+            annotationApiRef?.current?.updateAnnotation?.(selectedAnn.object.pageIndex ?? 0, selectedAnn.object.id as string, {
+              opacity: opacity / 100,
+            });
           }
-        } else if (colorPickerTarget === 'strikeout') {
+        } else if (colorPickerTarget === "strikeout") {
           setStrikeoutOpacity(opacity);
-          annotationApiRef?.current?.setAnnotationStyle?.('strikeout', buildToolOptions('strikeout'));
+          annotationApiRef?.current?.setAnnotationStyle?.("strikeout", buildToolOptions("strikeout"));
           if (selectedAnn?.object?.id && selectedAnn.object?.type === 12) {
-            annotationApiRef?.current?.updateAnnotation?.(selectedAnn.object.pageIndex ?? 0, selectedAnn.object.id as string, { opacity: opacity / 100 });
+            annotationApiRef?.current?.updateAnnotation?.(selectedAnn.object.pageIndex ?? 0, selectedAnn.object.id as string, {
+              opacity: opacity / 100,
+            });
           }
-        } else if (colorPickerTarget === 'squiggly') {
+        } else if (colorPickerTarget === "squiggly") {
           setSquigglyOpacity(opacity);
-          annotationApiRef?.current?.setAnnotationStyle?.('squiggly', buildToolOptions('squiggly'));
+          annotationApiRef?.current?.setAnnotationStyle?.("squiggly", buildToolOptions("squiggly"));
           if (selectedAnn?.object?.id && selectedAnn.object?.type === 11) {
-            annotationApiRef?.current?.updateAnnotation?.(selectedAnn.object.pageIndex ?? 0, selectedAnn.object.id as string, { opacity: opacity / 100 });
+            annotationApiRef?.current?.updateAnnotation?.(selectedAnn.object.pageIndex ?? 0, selectedAnn.object.id as string, {
+              opacity: opacity / 100,
+            });
           }
-        } else if (colorPickerTarget === 'shapeStroke') {
+        } else if (colorPickerTarget === "shapeStroke") {
           setShapeStrokeOpacity(opacity);
-          const shapeToolsList = ['square', 'circle', 'polygon'] as AnnotationToolId[];
+          const shapeToolsList = ["square", "circle", "polygon"] as AnnotationToolId[];
           if (shapeToolsList.includes(activeTool)) {
             annotationApiRef?.current?.setAnnotationStyle?.(activeTool, buildToolOptions(activeTool));
           }
-        } else if (colorPickerTarget === 'shapeFill') {
+        } else if (colorPickerTarget === "shapeFill") {
           setShapeFillOpacity(opacity);
-          const fillShapeTools = ['square', 'circle', 'polygon'] as AnnotationToolId[];
+          const fillShapeTools = ["square", "circle", "polygon"] as AnnotationToolId[];
           if (fillShapeTools.includes(activeTool)) {
             annotationApiRef?.current?.setAnnotationStyle?.(activeTool, buildToolOptions(activeTool));
           }
         }
       }}
       onColorChange={(color) => {
-        if (colorPickerTarget === 'ink') {
+        if (colorPickerTarget === "ink") {
           setInkColor(color);
-          if (activeTool === 'ink') {
-            annotationApiRef?.current?.setAnnotationStyle?.('ink', buildToolOptions('ink'));
+          if (activeTool === "ink") {
+            annotationApiRef?.current?.setAnnotationStyle?.("ink", buildToolOptions("ink"));
           }
           if (selectedAnn?.object?.type === 15) {
-            annotationApiRef?.current?.updateAnnotation?.(selectedAnn.object.pageIndex ?? 0, selectedAnn.object.id as string, { color });
+            annotationApiRef?.current?.updateAnnotation?.(selectedAnn.object.pageIndex ?? 0, selectedAnn.object.id as string, {
+              color,
+            });
           }
-        } else if (colorPickerTarget === 'highlight') {
+        } else if (colorPickerTarget === "highlight") {
           setHighlightColor(color);
-          if (activeTool === 'highlight' || activeTool === 'inkHighlighter') {
+          if (activeTool === "highlight" || activeTool === "inkHighlighter") {
             annotationApiRef?.current?.setAnnotationStyle?.(activeTool, buildToolOptions(activeTool));
           }
           if (selectedAnn?.object?.type === 9 || selectedAnn?.object?.type === 15) {
-            annotationApiRef?.current?.updateAnnotation?.(selectedAnn.object.pageIndex ?? 0, selectedAnn.object.id as string, { color });
+            annotationApiRef?.current?.updateAnnotation?.(selectedAnn.object.pageIndex ?? 0, selectedAnn.object.id as string, {
+              color,
+            });
           }
-        } else if (colorPickerTarget === 'underline') {
+        } else if (colorPickerTarget === "underline") {
           setUnderlineColor(color);
-          annotationApiRef?.current?.setAnnotationStyle?.('underline', buildToolOptions('underline'));
+          annotationApiRef?.current?.setAnnotationStyle?.("underline", buildToolOptions("underline"));
           if (selectedAnn?.object?.id) {
-            annotationApiRef?.current?.updateAnnotation?.(selectedAnn.object.pageIndex ?? 0, selectedAnn.object.id as string, { color });
+            annotationApiRef?.current?.updateAnnotation?.(selectedAnn.object.pageIndex ?? 0, selectedAnn.object.id as string, {
+              color,
+            });
           }
-        } else if (colorPickerTarget === 'strikeout') {
+        } else if (colorPickerTarget === "strikeout") {
           setStrikeoutColor(color);
-          annotationApiRef?.current?.setAnnotationStyle?.('strikeout', buildToolOptions('strikeout'));
+          annotationApiRef?.current?.setAnnotationStyle?.("strikeout", buildToolOptions("strikeout"));
           if (selectedAnn?.object?.id) {
-            annotationApiRef?.current?.updateAnnotation?.(selectedAnn.object.pageIndex ?? 0, selectedAnn.object.id as string, { color });
+            annotationApiRef?.current?.updateAnnotation?.(selectedAnn.object.pageIndex ?? 0, selectedAnn.object.id as string, {
+              color,
+            });
           }
-        } else if (colorPickerTarget === 'squiggly') {
+        } else if (colorPickerTarget === "squiggly") {
           setSquigglyColor(color);
-          annotationApiRef?.current?.setAnnotationStyle?.('squiggly', buildToolOptions('squiggly'));
+          annotationApiRef?.current?.setAnnotationStyle?.("squiggly", buildToolOptions("squiggly"));
           if (selectedAnn?.object?.id) {
-            annotationApiRef?.current?.updateAnnotation?.(selectedAnn.object.pageIndex ?? 0, selectedAnn.object.id as string, { color });
+            annotationApiRef?.current?.updateAnnotation?.(selectedAnn.object.pageIndex ?? 0, selectedAnn.object.id as string, {
+              color,
+            });
           }
-        } else if (colorPickerTarget === 'textBackground') {
+        } else if (colorPickerTarget === "textBackground") {
           setTextBackgroundColor(color);
-          if (activeTool === 'text') {
-            annotationApiRef?.current?.setAnnotationStyle?.('text', buildToolOptions('text'));
+          if (activeTool === "text") {
+            annotationApiRef?.current?.setAnnotationStyle?.("text", buildToolOptions("text"));
           }
-          if (selectedAnn?.object?.type === 3 && deriveToolFromAnnotation(selectedAnn.object) !== 'note') {
+          if (selectedAnn?.object?.type === 3 && deriveToolFromAnnotation(selectedAnn.object) !== "note") {
             annotationApiRef?.current?.updateAnnotation?.(
               selectedAnn.object?.pageIndex ?? 0,
               selectedAnn.object.id as string,
-              { backgroundColor: color, fillColor: color }
+              { backgroundColor: color, fillColor: color },
             );
           }
-        } else if (colorPickerTarget === 'noteBackground') {
+        } else if (colorPickerTarget === "noteBackground") {
           setNoteBackgroundColor(color);
-          if (activeTool === 'note') {
-            annotationApiRef?.current?.setAnnotationStyle?.('note', buildToolOptions('note'));
+          if (activeTool === "note") {
+            annotationApiRef?.current?.setAnnotationStyle?.("note", buildToolOptions("note"));
           }
-          if (selectedAnn?.object?.type === 3 && deriveToolFromAnnotation(selectedAnn.object) === 'note') {
+          if (selectedAnn?.object?.type === 3 && deriveToolFromAnnotation(selectedAnn.object) === "note") {
             annotationApiRef?.current?.updateAnnotation?.(
               selectedAnn.object?.pageIndex ?? 0,
               selectedAnn.object.id as string,
-              { backgroundColor: color, fillColor: color }
+              { backgroundColor: color, fillColor: color },
             );
           }
         } else {
           setTextColor(color);
-          if (activeTool === 'text') {
-            annotationApiRef?.current?.setAnnotationStyle?.('text', buildToolOptions('text'));
+          if (activeTool === "text") {
+            annotationApiRef?.current?.setAnnotationStyle?.("text", buildToolOptions("text"));
           }
           if (selectedAnn?.object?.type === 3 || selectedAnn?.object?.type === 1) {
             annotationApiRef?.current?.updateAnnotation?.(selectedAnn.object.pageIndex ?? 0, selectedAnn.object.id as string, {
@@ -697,10 +770,10 @@ export function AnnotationPanel(props: AnnotationPanelProps) {
           }
         }
 
-        const shapeToolsList = ['square', 'circle', 'line', 'lineArrow', 'polyline', 'polygon'] as AnnotationToolId[];
-        const fillShapeTools = ['square', 'circle', 'polygon'] as AnnotationToolId[];
+        const shapeToolsList = ["square", "circle", "line", "lineArrow", "polyline", "polygon"] as AnnotationToolId[];
+        const fillShapeTools = ["square", "circle", "polygon"] as AnnotationToolId[];
 
-        if (colorPickerTarget === 'shapeStroke') {
+        if (colorPickerTarget === "shapeStroke") {
           setShapeStrokeColor(color);
           const styleTool = shapeToolsList.includes(activeTool) ? activeTool : null;
           if (styleTool) {
@@ -714,7 +787,7 @@ export function AnnotationPanel(props: AnnotationPanelProps) {
             });
           }
         }
-        if (colorPickerTarget === 'shapeFill') {
+        if (colorPickerTarget === "shapeFill") {
           setShapeFillColor(color);
           const styleTool = fillShapeTools.includes(activeTool) ? activeTool : null;
           if (styleTool) {
@@ -729,32 +802,32 @@ export function AnnotationPanel(props: AnnotationPanelProps) {
           }
         }
       }}
-      title={t('annotation.chooseColor', 'Choose color')}
+      title={t("annotation.chooseColor", "Choose color")}
     />
   );
 
   return (
     <Stack gap="md">
       <Group gap="xs" wrap="nowrap" align="center">
-        <Tooltip label={t('annotation.selectAndMove', 'Select and edit annotations')}>
+        <Tooltip label={t("annotation.selectAndMove", "Select and edit annotations")}>
           <ActionIcon
-            variant={activeTool === 'select' && annotationsVisible ? 'filled' : 'default'}
+            variant={activeTool === "select" && annotationsVisible ? "filled" : "default"}
             size="lg"
             disabled={!annotationsVisible}
             onClick={() => {
-              activateAnnotationTool('select');
+              activateAnnotationTool("select");
             }}
             style={{
-              width: 'auto',
-              paddingInline: '0.75rem',
-              display: 'inline-flex',
-              alignItems: 'center',
-              gap: '0.4rem',
+              width: "auto",
+              paddingInline: "0.75rem",
+              display: "inline-flex",
+              alignItems: "center",
+              gap: "0.4rem",
             }}
           >
             <LocalIcon icon="touch-app-rounded" width={20} height={20} />
             <Text component="span" size="sm" fw={500}>
-              {t('annotation.selectAndMove', 'Select and Edit')}
+              {t("annotation.selectAndMove", "Select and Edit")}
             </Text>
           </ActionIcon>
         </Tooltip>
@@ -770,31 +843,41 @@ export function AnnotationPanel(props: AnnotationPanelProps) {
       </Group>
 
       <Box>
-        <Text size="sm" fw={600} mb="xs">{t('annotation.textMarkup', 'Text Markup')}</Text>
+        <Text size="sm" fw={600} mb="xs">
+          {t("annotation.textMarkup", "Text Markup")}
+        </Text>
         {renderToolButtons(textMarkupTools)}
       </Box>
 
       <Box>
-        <Text size="sm" fw={600} mb="xs">{t('annotation.drawing', 'Drawing')}</Text>
+        <Text size="sm" fw={600} mb="xs">
+          {t("annotation.drawing", "Drawing")}
+        </Text>
         {renderToolButtons(drawingTools)}
       </Box>
 
       <Box>
-        <Text size="sm" fw={600} mb="xs">{t('annotation.shapes', 'Shapes')}</Text>
+        <Text size="sm" fw={600} mb="xs">
+          {t("annotation.shapes", "Shapes")}
+        </Text>
         {renderToolButtons(shapeTools)}
       </Box>
 
       <Box>
-        <Text size="sm" fw={600} mb="xs">{t('annotation.comments', 'Comments')}</Text>
+        <Text size="sm" fw={600} mb="xs">
+          {t("annotation.comments", "Comments")}
+        </Text>
         {renderToolButtons(commentTools)}
       </Box>
 
       <Box>
-        <Text size="sm" fw={600} mb="xs">{t('annotation.notesStamps', 'Notes & Stamps')}</Text>
+        <Text size="sm" fw={600} mb="xs">
+          {t("annotation.notesStamps", "Notes & Stamps")}
+        </Text>
         {renderToolButtons(otherTools)}
       </Box>
 
-      {activeTool === 'stamp' && defaultStyleControls}
+      {activeTool === "stamp" && defaultStyleControls}
 
       {colorPickerComponent}
 
@@ -808,7 +891,7 @@ export function AnnotationPanel(props: AnnotationPanelProps) {
         disabled={applyDisabled}
         onClick={onApplyChanges}
       >
-        {t('annotation.saveChanges', 'Save Changes')}
+        {t("annotation.saveChanges", "Save Changes")}
       </Button>
 
       <SuggestedToolsSection />
diff --git a/frontend/src/core/tools/annotate/useAnnotationSelection.ts b/frontend/src/core/tools/annotate/useAnnotationSelection.ts
index 382ae2f805..0c70446b1b 100644
--- a/frontend/src/core/tools/annotate/useAnnotationSelection.ts
+++ b/frontend/src/core/tools/annotate/useAnnotationSelection.ts
@@ -1,5 +1,5 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
-import type { AnnotationAPI, AnnotationToolId } from '@app/components/viewer/viewerTypes';
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { AnnotationAPI, AnnotationToolId } from "@app/components/viewer/viewerTypes";
 
 interface UseAnnotationSelectionParams {
   annotationApiRef: React.RefObject<AnnotationAPI | null>;
@@ -28,11 +28,11 @@ interface UseAnnotationSelectionParams {
   setShapeOpacity: (value: number) => void;
   setShapeStrokeOpacity: (value: number) => void;
   setShapeFillOpacity: (value: number) => void;
-  setTextAlignment: (value: 'left' | 'center' | 'right') => void;
+  setTextAlignment: (value: "left" | "center" | "right") => void;
 }
 
-const MARKUP_TOOL_IDS = ['highlight', 'underline', 'strikeout', 'squiggly'] as const;
-const DRAWING_TOOL_IDS = ['ink', 'inkHighlighter'] as const;
+const MARKUP_TOOL_IDS = ["highlight", "underline", "strikeout", "squiggly"] as const;
+const DRAWING_TOOL_IDS = ["ink", "inkHighlighter"] as const;
 const STAY_ACTIVE_TOOL_IDS = [...MARKUP_TOOL_IDS, ...DRAWING_TOOL_IDS] as const;
 
 const isTextMarkupAnnotation = (annotation: any): boolean => {
@@ -44,10 +44,10 @@ const isTextMarkupAnnotation = (annotation: any): boolean => {
   if (toolId && MARKUP_TOOL_IDS.includes(toolId)) return true;
 
   const type = annotation?.type ?? annotation?.object?.type;
-  if (typeof type === 'number' && [9, 10, 11, 12].includes(type)) return true;
+  if (typeof type === "number" && [9, 10, 11, 12].includes(type)) return true;
 
   const subtype = annotation?.subtype ?? annotation?.object?.subtype;
-  if (typeof subtype === 'string') {
+  if (typeof subtype === "string") {
     const lower = subtype.toLowerCase();
     if (MARKUP_TOOL_IDS.some((t) => lower.includes(t))) return true;
   }
@@ -125,41 +125,38 @@ export function useAnnotationSelection({
       setSelectedAnn(normalizedSelection);
 
       if (annObject?.contents !== undefined) {
-        setSelectedTextDraft(annObject.contents ?? '');
+        setSelectedTextDraft(annObject.contents ?? "");
       }
       if (annObject?.fontSize !== undefined) {
         setSelectedFontSize(annObject.fontSize ?? 14);
       }
       if (annObject?.textAlign !== undefined) {
         const align = annObject.textAlign;
-        if (typeof align === 'string') {
-          const normalized = align === 'center' ? 'center' : align === 'right' ? 'right' : 'left';
+        if (typeof align === "string") {
+          const normalized = align === "center" ? "center" : align === "right" ? "right" : "left";
           setTextAlignment(normalized);
-        } else if (typeof align === 'number') {
-          const normalized = align === 1 ? 'center' : align === 2 ? 'right' : 'left';
+        } else if (typeof align === "number") {
+          const normalized = align === 1 ? "center" : align === 2 ? "right" : "left";
           setTextAlignment(normalized);
         }
       }
       if (type === 3) {
         const background =
-          (annObject?.backgroundColor as string | undefined) ||
-          (annObject?.fillColor as string | undefined) ||
-          undefined;
+          (annObject?.backgroundColor as string | undefined) || (annObject?.fillColor as string | undefined) || undefined;
         const textColor = (annObject?.textColor as string | undefined) || (annObject?.color as string | undefined);
         if (textColor) {
           setTextColor(textColor);
         }
-        if (derivedTool === 'note') {
-          setNoteBackgroundColor(background || '');
+        if (derivedTool === "note") {
+          setNoteBackgroundColor(background || "");
         } else {
-          setTextBackgroundColor(background || '');
+          setTextBackgroundColor(background || "");
         }
       }
 
       if (type === 15) {
-        const width =
-          annObject?.strokeWidth ?? annObject?.borderWidth ?? annObject?.lineWidth ?? annObject?.thickness;
-        if (derivedTool === 'inkHighlighter') {
+        const width = annObject?.strokeWidth ?? annObject?.borderWidth ?? annObject?.lineWidth ?? annObject?.thickness;
+        if (derivedTool === "inkHighlighter") {
           if (annObject?.color) setHighlightColor(annObject.color);
           if (annObject?.opacity !== undefined) {
             setHighlightOpacity(Math.round((annObject.opacity ?? 1) * 100));
@@ -201,12 +198,9 @@ export function useAnnotationSelection({
           const fill = (annObject?.color as string | undefined) ?? (annObject?.fillColor as string | undefined);
           if (fill) setShapeFillColor(fill);
         }
-        const opacity =
-          annObject?.opacity !== undefined ? Math.round((annObject.opacity ?? 1) * 100) : undefined;
+        const opacity = annObject?.opacity !== undefined ? Math.round((annObject.opacity ?? 1) * 100) : undefined;
         const strokeOpacityValue =
-          annObject?.strokeOpacity !== undefined
-            ? Math.round((annObject.strokeOpacity ?? 1) * 100)
-            : undefined;
+          annObject?.strokeOpacity !== undefined ? Math.round((annObject.strokeOpacity ?? 1) * 100) : undefined;
         const fillOpacityValue =
           annObject?.fillOpacity !== undefined ? Math.round((annObject.fillOpacity ?? 1) * 100) : undefined;
         if (opacity !== undefined) {
@@ -221,14 +215,14 @@ export function useAnnotationSelection({
 
       const matchingTool = derivedTool;
       const stayOnPlacement = shouldStayOnPlacementTool(annObject, matchingTool);
-      if (matchingTool && activeToolRef.current !== 'select' && !stayOnPlacement) {
-        activeToolRef.current = 'select';
-        setActiveTool('select');
+      if (matchingTool && activeToolRef.current !== "select" && !stayOnPlacement) {
+        activeToolRef.current = "select";
+        setActiveTool("select");
         // Immediately enable select tool to avoid re-entering placement after creation.
-        annotationApiRef.current?.activateAnnotationTool?.('select');
-      } else if (activeToolRef.current === 'select') {
+        annotationApiRef.current?.activateAnnotationTool?.("select");
+      } else if (activeToolRef.current === "select") {
         // Keep the viewer in Select mode so clicking existing annotations does not re-enable placement.
-        annotationApiRef.current?.activateAnnotationTool?.('select');
+        annotationApiRef.current?.activateAnnotationTool?.("select");
       }
     },
     [
@@ -259,7 +253,7 @@ export function useAnnotationSelection({
       setShapeFillOpacity,
       setTextAlignment,
       setFreehandHighlighterWidth,
-    ]
+    ],
   );
 
   useEffect(() => {
@@ -268,7 +262,7 @@ export function useAnnotationSelection({
 
     const checkSelection = () => {
       let ann: any = null;
-      if (typeof api.getSelectedAnnotation === 'function') {
+      if (typeof api.getSelectedAnnotation === "function") {
         try {
           ann = api.getSelectedAnnotation();
         } catch (error) {
@@ -278,8 +272,8 @@ export function useAnnotationSelection({
           // instead of crashing the annotations tool.
           // Only log unexpected errors - "No active document" is a common expected state during init
           const errorMessage = error instanceof Error ? error.message : String(error);
-          if (!errorMessage.includes('No active document')) {
-            console.error('[useAnnotationSelection] getSelectedAnnotation failed:', error);
+          if (!errorMessage.includes("No active document")) {
+            console.error("[useAnnotationSelection] getSelectedAnnotation failed:", error);
           }
           ann = null;
         }
@@ -292,29 +286,28 @@ export function useAnnotationSelection({
 
     let interval: ReturnType<typeof setInterval> | null = null;
 
-    if (typeof api.onAnnotationEvent === 'function') {
+    if (typeof api.onAnnotationEvent === "function") {
       const handler = (event: any) => {
         const ann = event?.annotation ?? event?.selectedAnnotation ?? null;
         const eventType = event?.type;
         switch (eventType) {
-          case 'create':
-          case 'add':
-          case 'added':
-          case 'created':
-          case 'annotationCreated':
-          case 'annotationAdded':
-          case 'complete': {
+          case "create":
+          case "add":
+          case "added":
+          case "created":
+          case "annotationCreated":
+          case "annotationAdded":
+          case "complete": {
             const eventAnn = ann ?? api.getSelectedAnnotation?.();
             applySelectionFromAnnotation(eventAnn);
             const currentTool = activeToolRef.current;
             const tool =
-              deriveToolFromAnnotation((eventAnn as any)?.object ?? eventAnn ?? api.getSelectedAnnotation?.()) ||
-              currentTool;
+              deriveToolFromAnnotation((eventAnn as any)?.object ?? eventAnn ?? api.getSelectedAnnotation?.()) || currentTool;
             const stayOnPlacement = shouldStayOnPlacementTool(eventAnn, tool);
-            if (activeToolRef.current !== 'select' && !stayOnPlacement) {
-              activeToolRef.current = 'select';
-              setActiveTool('select');
-              annotationApiRef.current?.activateAnnotationTool?.('select');
+            if (activeToolRef.current !== "select" && !stayOnPlacement) {
+              activeToolRef.current = "select";
+              setActiveTool("select");
+              annotationApiRef.current?.activateAnnotationTool?.("select");
             }
             // Re-read selection after the viewer updates to ensure we have the full annotation object for the edit panel.
             setTimeout(() => {
@@ -323,33 +316,33 @@ export function useAnnotationSelection({
               const derivedAfter =
                 deriveToolFromAnnotation((selected as any)?.object ?? selected ?? eventAnn ?? null) || activeToolRef.current;
               const stayOnPlacementAfter = shouldStayOnPlacementTool(selected ?? eventAnn ?? null, derivedAfter);
-              if (activeToolRef.current !== 'select' && !stayOnPlacementAfter) {
-                activeToolRef.current = 'select';
-                setActiveTool('select');
-                annotationApiRef.current?.activateAnnotationTool?.('select');
+              if (activeToolRef.current !== "select" && !stayOnPlacementAfter) {
+                activeToolRef.current = "select";
+                setActiveTool("select");
+                annotationApiRef.current?.activateAnnotationTool?.("select");
               }
             }, 50);
             break;
           }
-          case 'select':
-          case 'selected':
-          case 'annotationSelected':
-          case 'annotationClicked':
-          case 'annotationTapped':
+          case "select":
+          case "selected":
+          case "annotationSelected":
+          case "annotationClicked":
+          case "annotationTapped":
             applySelectionFromAnnotation(ann ?? api.getSelectedAnnotation?.());
             break;
-          case 'deselect':
-          case 'clearSelection':
+          case "deselect":
+          case "clearSelection":
             applySelectionFromAnnotation(null);
             break;
-          case 'delete':
-          case 'remove':
+          case "delete":
+          case "remove":
             if (ann?.id && ann.id === selectedAnnIdRef.current) {
               applySelectionFromAnnotation(null);
             }
             break;
-          case 'update':
-          case 'change':
+          case "update":
+          case "change":
             if (selectedAnnIdRef.current) {
               const current = api.getSelectedAnnotation?.();
               if (current) {
@@ -365,7 +358,7 @@ export function useAnnotationSelection({
       const unsubscribe = api.onAnnotationEvent(handler);
       interval = setInterval(checkSelection, 450);
       return () => {
-        if (typeof unsubscribe === 'function') {
+        if (typeof unsubscribe === "function") {
           unsubscribe();
         }
         if (interval) clearInterval(interval);
diff --git a/frontend/src/core/tools/annotate/useAnnotationStyleState.ts b/frontend/src/core/tools/annotate/useAnnotationStyleState.ts
index 3abd69d748..5faf6739d9 100644
--- a/frontend/src/core/tools/annotate/useAnnotationStyleState.ts
+++ b/frontend/src/core/tools/annotate/useAnnotationStyleState.ts
@@ -1,5 +1,5 @@
-import { useCallback, useMemo, useState } from 'react';
-import type { AnnotationToolId } from '@app/components/viewer/viewerTypes';
+import { useCallback, useMemo, useState } from "react";
+import type { AnnotationToolId } from "@app/components/viewer/viewerTypes";
 
 type Size = { width: number; height: number };
 
@@ -23,7 +23,7 @@ interface StyleState {
   squigglyOpacity: number;
   textColor: string;
   textSize: number;
-  textAlignment: 'left' | 'center' | 'right';
+  textAlignment: "left" | "center" | "right";
   textBackgroundColor: string;
   noteBackgroundColor: string;
   shapeStrokeColor: string;
@@ -48,7 +48,7 @@ interface StyleActions {
   setSquigglyOpacity: (value: number) => void;
   setTextColor: (value: string) => void;
   setTextSize: (value: number) => void;
-  setTextAlignment: (value: 'left' | 'center' | 'right') => void;
+  setTextAlignment: (value: "left" | "center" | "right") => void;
   setTextBackgroundColor: (value: string) => void;
   setNoteBackgroundColor: (value: string) => void;
   setShapeStrokeColor: (value: string) => void;
@@ -59,10 +59,7 @@ interface StyleActions {
   setShapeThickness: (value: number) => void;
 }
 
-export type BuildToolOptionsFn = (
-  toolId: AnnotationToolId,
-  extras?: BuildToolOptionsExtras
-) => Record<string, unknown>;
+export type BuildToolOptionsFn = (toolId: AnnotationToolId, extras?: BuildToolOptionsExtras) => Record<string, unknown>;
 
 export interface AnnotationStyleStateReturn {
   styleState: StyleState;
@@ -71,27 +68,25 @@ export interface AnnotationStyleStateReturn {
   getActiveColor: (target: string | null) => string;
 }
 
-export const useAnnotationStyleState = (
-  cssToPdfSize?: (size: Size) => Size
-): AnnotationStyleStateReturn => {
-  const [inkColor, setInkColor] = useState('#1f2933');
+export const useAnnotationStyleState = (cssToPdfSize?: (size: Size) => Size): AnnotationStyleStateReturn => {
+  const [inkColor, setInkColor] = useState("#1f2933");
   const [inkWidth, setInkWidth] = useState(2);
-  const [highlightColor, setHighlightColor] = useState('#ffd54f');
+  const [highlightColor, setHighlightColor] = useState("#ffd54f");
   const [highlightOpacity, setHighlightOpacity] = useState(60);
   const [freehandHighlighterWidth, setFreehandHighlighterWidth] = useState(6);
-  const [underlineColor, setUnderlineColor] = useState('#ffb300');
+  const [underlineColor, setUnderlineColor] = useState("#ffb300");
   const [underlineOpacity, setUnderlineOpacity] = useState(100);
-  const [strikeoutColor, setStrikeoutColor] = useState('#e53935');
+  const [strikeoutColor, setStrikeoutColor] = useState("#e53935");
   const [strikeoutOpacity, setStrikeoutOpacity] = useState(100);
-  const [squigglyColor, setSquigglyColor] = useState('#00acc1');
+  const [squigglyColor, setSquigglyColor] = useState("#00acc1");
   const [squigglyOpacity, setSquigglyOpacity] = useState(100);
-  const [textColor, setTextColor] = useState('#111111');
+  const [textColor, setTextColor] = useState("#111111");
   const [textSize, setTextSize] = useState(14);
-  const [textAlignment, setTextAlignment] = useState<'left' | 'center' | 'right'>('left');
-  const [textBackgroundColor, setTextBackgroundColor] = useState<string>('');
-  const [noteBackgroundColor, setNoteBackgroundColor] = useState('#ffd54f');
-  const [shapeStrokeColor, setShapeStrokeColor] = useState('#cf5b5b');
-  const [shapeFillColor, setShapeFillColor] = useState('#0000ff');
+  const [textAlignment, setTextAlignment] = useState<"left" | "center" | "right">("left");
+  const [textBackgroundColor, setTextBackgroundColor] = useState<string>("");
+  const [noteBackgroundColor, setNoteBackgroundColor] = useState("#ffd54f");
+  const [shapeStrokeColor, setShapeStrokeColor] = useState("#cf5b5b");
+  const [shapeFillColor, setShapeFillColor] = useState("#0000ff");
   const [shapeOpacity, setShapeOpacity] = useState(50);
   const [shapeStrokeOpacity, setShapeStrokeOpacity] = useState(50);
   const [shapeFillOpacity, setShapeFillOpacity] = useState(50);
@@ -105,8 +100,8 @@ export const useAnnotationStyleState = (
             customData: {
               toolId,
               annotationToolId: toolId,
-              source: 'annotate',
-              author: 'User',
+              source: "annotate",
+              author: "User",
               createdAt: new Date().toISOString(),
               modifiedAt: new Date().toISOString(),
             },
@@ -114,25 +109,25 @@ export const useAnnotationStyleState = (
         : {};
 
       switch (toolId) {
-        case 'ink':
+        case "ink":
           return { color: inkColor, thickness: inkWidth, ...metadata };
-        case 'inkHighlighter':
+        case "inkHighlighter":
           return {
             color: highlightColor,
             opacity: highlightOpacity / 100,
             thickness: freehandHighlighterWidth,
             ...metadata,
           };
-        case 'highlight':
+        case "highlight":
           return { color: highlightColor, opacity: highlightOpacity / 100, ...metadata };
-        case 'underline':
+        case "underline":
           return { color: underlineColor, opacity: underlineOpacity / 100, ...metadata };
-        case 'strikeout':
+        case "strikeout":
           return { color: strikeoutColor, opacity: strikeoutOpacity / 100, ...metadata };
-        case 'squiggly':
+        case "squiggly":
           return { color: squigglyColor, opacity: squigglyOpacity / 100, ...metadata };
-        case 'text': {
-          const textAlignNumber = textAlignment === 'left' ? 0 : textAlignment === 'center' ? 1 : 2;
+        case "text": {
+          const textAlignNumber = textAlignment === "left" ? 0 : textAlignment === "center" ? 1 : 2;
           return {
             color: textColor,
             textColor: textColor,
@@ -142,8 +137,8 @@ export const useAnnotationStyleState = (
             ...metadata,
           };
         }
-        case 'note': {
-          const noteFillColor = noteBackgroundColor || 'transparent';
+        case "note": {
+          const noteFillColor = noteBackgroundColor || "transparent";
           return {
             color: textColor,
             fillColor: noteFillColor,
@@ -151,9 +146,9 @@ export const useAnnotationStyleState = (
             ...metadata,
           };
         }
-        case 'square':
-        case 'circle':
-        case 'polygon':
+        case "square":
+        case "circle":
+        case "polygon":
           return {
             color: shapeFillColor,
             strokeColor: shapeStrokeColor,
@@ -163,9 +158,9 @@ export const useAnnotationStyleState = (
             borderWidth: shapeThickness,
             ...metadata,
           };
-        case 'line':
-        case 'polyline':
-        case 'lineArrow':
+        case "line":
+        case "polyline":
+        case "lineArrow":
           return {
             color: shapeStrokeColor,
             strokeColor: shapeStrokeColor,
@@ -173,9 +168,8 @@ export const useAnnotationStyleState = (
             borderWidth: shapeThickness,
             ...metadata,
           };
-        case 'stamp': {
-          const pdfSize =
-            extras?.stampImageSize && cssToPdfSize ? cssToPdfSize(extras.stampImageSize) : undefined;
+        case "stamp": {
+          const pdfSize = extras?.stampImageSize && cssToPdfSize ? cssToPdfSize(extras.stampImageSize) : undefined;
           return {
             imageSrc: extras?.stampImageData,
             ...(pdfSize ? { imageSize: pdfSize } : {}),
@@ -210,20 +204,20 @@ export const useAnnotationStyleState = (
       textSize,
       underlineColor,
       underlineOpacity,
-    ]
+    ],
   );
 
   const getActiveColor = useCallback(
     (target: string | null) => {
-      if (target === 'ink') return inkColor;
-      if (target === 'highlight' || target === 'inkHighlighter') return highlightColor;
-      if (target === 'underline') return underlineColor;
-      if (target === 'strikeout') return strikeoutColor;
-      if (target === 'squiggly') return squigglyColor;
-      if (target === 'shapeStroke') return shapeStrokeColor;
-      if (target === 'shapeFill') return shapeFillColor;
-      if (target === 'textBackground') return textBackgroundColor || '#ffffff';
-      if (target === 'noteBackground') return noteBackgroundColor || '#ffffff';
+      if (target === "ink") return inkColor;
+      if (target === "highlight" || target === "inkHighlighter") return highlightColor;
+      if (target === "underline") return underlineColor;
+      if (target === "strikeout") return strikeoutColor;
+      if (target === "squiggly") return squigglyColor;
+      if (target === "shapeStroke") return shapeStrokeColor;
+      if (target === "shapeFill") return shapeFillColor;
+      if (target === "textBackground") return textBackgroundColor || "#ffffff";
+      if (target === "noteBackground") return noteBackgroundColor || "#ffffff";
       return textColor;
     },
     [
@@ -237,7 +231,7 @@ export const useAnnotationStyleState = (
       textBackgroundColor,
       textColor,
       underlineColor,
-    ]
+    ],
   );
 
   const styleState: StyleState = useMemo(
@@ -288,7 +282,7 @@ export const useAnnotationStyleState = (
       textSize,
       underlineColor,
       underlineOpacity,
-    ]
+    ],
   );
 
   const styleActions: StyleActions = {
diff --git a/frontend/src/core/tools/formFill/ButtonAppearanceOverlay.tsx b/frontend/src/core/tools/formFill/ButtonAppearanceOverlay.tsx
index 5d6c00e455..6a07799055 100644
--- a/frontend/src/core/tools/formFill/ButtonAppearanceOverlay.tsx
+++ b/frontend/src/core/tools/formFill/ButtonAppearanceOverlay.tsx
@@ -8,8 +8,8 @@
  * Uses the same EPDF_RenderAnnotBitmap / FPDF_FFLDraw pipeline as
  * SignatureFieldOverlay to produce the button's native PDF appearance.
  */
-import React, { useEffect, useMemo, useRef, useState, memo } from 'react';
-import { renderButtonFieldAppearances, type SignatureFieldAppearance } from '@app/services/pdfiumService';
+import React, { useEffect, useMemo, useRef, useState, memo } from "react";
+import { renderButtonFieldAppearances, type SignatureFieldAppearance } from "@app/services/pdfiumService";
 
 interface ButtonAppearanceOverlayProps {
   pageIndex: number;
@@ -26,7 +26,11 @@ async function resolveButtonAppearances(source: File | Blob): Promise<SignatureF
   _cachePromise = source.arrayBuffer().then((buf) => renderButtonFieldAppearances(buf));
   return _cachePromise;
 }
-function ButtonBitmapCanvas({ imageData, cssWidth, cssHeight }: {
+function ButtonBitmapCanvas({
+  imageData,
+  cssWidth,
+  cssHeight,
+}: {
   imageData: ImageData;
   cssWidth: number;
   cssHeight: number;
@@ -38,32 +42,31 @@ function ButtonBitmapCanvas({ imageData, cssWidth, cssHeight }: {
     if (!canvas) return;
     canvas.width = imageData.width;
     canvas.height = imageData.height;
-    const ctx = canvas.getContext('2d');
+    const ctx = canvas.getContext("2d");
     if (ctx) ctx.putImageData(imageData, 0, 0);
   }, [imageData]);
 
-  return (
-    <canvas
-      ref={canvasRef}
-      style={{ width: cssWidth, height: cssHeight, display: 'block' }}
-    />
-  );
+  return <canvas ref={canvasRef} style={{ width: cssWidth, height: cssHeight, display: "block" }} />;
 }
-function ButtonAppearanceOverlayInner({
-  pageIndex,
-  pdfSource,
-  pageWidth,
-  pageHeight,
-}: ButtonAppearanceOverlayProps) {
+function ButtonAppearanceOverlayInner({ pageIndex, pdfSource, pageWidth, pageHeight }: ButtonAppearanceOverlayProps) {
   const [appearances, setAppearances] = useState<SignatureFieldAppearance[]>([]);
 
   useEffect(() => {
-    if (!pdfSource) { setAppearances([]); return; }
+    if (!pdfSource) {
+      setAppearances([]);
+      return;
+    }
     let cancelled = false;
     resolveButtonAppearances(pdfSource)
-      .then((res) => { if (!cancelled) setAppearances(res); })
-      .catch(() => { if (!cancelled) setAppearances([]); });
-    return () => { cancelled = true; };
+      .then((res) => {
+        if (!cancelled) setAppearances(res);
+      })
+      .catch(() => {
+        if (!cancelled) setAppearances([]);
+      });
+    return () => {
+      cancelled = true;
+    };
   }, [pdfSource]);
 
   const pageAppearances = useMemo(
@@ -76,41 +79,37 @@ function ButtonAppearanceOverlayInner({
   return (
     <div
       style={{
-        position: 'absolute',
+        position: "absolute",
         top: 0,
         left: 0,
-        width: '100%',
-        height: '100%',
-        pointerEvents: 'none',
+        width: "100%",
+        height: "100%",
+        pointerEvents: "none",
         zIndex: 4,
       }}
       data-button-appearance-page={pageIndex}
     >
       {pageAppearances.map((btn, idx) => {
-        const sx = btn.sourcePageWidth  > 0 ? pageWidth  / btn.sourcePageWidth  : 1;
+        const sx = btn.sourcePageWidth > 0 ? pageWidth / btn.sourcePageWidth : 1;
         const sy = btn.sourcePageHeight > 0 ? pageHeight / btn.sourcePageHeight : 1;
-        const left   = btn.x * sx;
-        const top    = btn.y * sy;
-        const width  = btn.width  * sx;
+        const left = btn.x * sx;
+        const top = btn.y * sy;
+        const width = btn.width * sx;
         const height = btn.height * sy;
 
         return (
           <div
             key={`btn-appearance-${btn.fieldName}-${idx}`}
             style={{
-              position: 'absolute',
+              position: "absolute",
               left,
               top,
               width,
               height,
-              overflow: 'hidden',
+              overflow: "hidden",
             }}
           >
-            <ButtonBitmapCanvas
-              imageData={btn.imageData!}
-              cssWidth={width}
-              cssHeight={height}
-            />
+            <ButtonBitmapCanvas imageData={btn.imageData!} cssWidth={width} cssHeight={height} />
           </div>
         );
       })}
diff --git a/frontend/src/core/tools/formFill/FieldInput.tsx b/frontend/src/core/tools/formFill/FieldInput.tsx
index 979822468d..5ff2c9585c 100644
--- a/frontend/src/core/tools/formFill/FieldInput.tsx
+++ b/frontend/src/core/tools/formFill/FieldInput.tsx
@@ -5,18 +5,10 @@
  * Each instance subscribes to its own field value via useFieldValue(),
  * so only the active widget re-renders when its value changes.
  */
-import React, { useCallback, memo } from 'react';
-import {
-  TextInput,
-  Textarea,
-  Checkbox,
-  Radio,
-  Select,
-  MultiSelect,
-  Stack,
-} from '@mantine/core';
-import { useFieldValue } from '@app/tools/formFill/FormFillContext';
-import type { FormField } from '@app/tools/formFill/types';
+import React, { useCallback, memo } from "react";
+import { TextInput, Textarea, Checkbox, Radio, Select, MultiSelect, Stack } from "@mantine/core";
+import { useFieldValue } from "@app/tools/formFill/FormFillContext";
+import type { FormField } from "@app/tools/formFill/types";
 
 function FieldInputInner({
   field,
@@ -27,13 +19,10 @@ function FieldInputInner({
   value: string;
   onValueChange: (fieldName: string, value: string) => void;
 }) {
-  const onChange = useCallback(
-    (v: string) => onValueChange(field.name, v),
-    [onValueChange, field.name]
-  );
+  const onChange = useCallback((v: string) => onValueChange(field.name, v), [onValueChange, field.name]);
 
   switch (field.type) {
-    case 'text':
+    case "text":
       if (field.multiline) {
         return (
           <Textarea
@@ -45,7 +34,7 @@ function FieldInputInner({
             autosize
             minRows={2}
             maxRows={5}
-            styles={{ input: { fontSize: '0.8125rem' } }}
+            styles={{ input: { fontSize: "0.8125rem" } }}
           />
         );
       }
@@ -56,25 +45,25 @@ function FieldInputInner({
           onChange={(e) => onChange(e.currentTarget.value)}
           placeholder={field.tooltip || `Enter ${field.label}`}
           disabled={field.readOnly}
-          styles={{ input: { fontSize: '0.8125rem' } }}
+          styles={{ input: { fontSize: "0.8125rem" } }}
         />
       );
 
-    case 'checkbox': {
-      const isChecked = !!value && value !== 'Off';
-      const onValue = (field.widgets && field.widgets[0]?.exportValue) || 'Yes';
+    case "checkbox": {
+      const isChecked = !!value && value !== "Off";
+      const onValue = (field.widgets && field.widgets[0]?.exportValue) || "Yes";
       return (
         <Checkbox
           size="xs"
           checked={isChecked}
-          onChange={(e) => onChange(e.currentTarget.checked ? onValue : 'Off')}
+          onChange={(e) => onChange(e.currentTarget.checked ? onValue : "Off")}
           label={field.label}
           disabled={field.readOnly}
         />
       );
     }
 
-    case 'combobox': {
+    case "combobox": {
       const comboData = (field.options || []).map((opt, idx) => ({
         value: opt,
         label: (field.displayOptions && field.displayOptions[idx]) || opt,
@@ -84,37 +73,37 @@ function FieldInputInner({
           size="xs"
           data={comboData}
           value={value || null}
-          onChange={(v) => onChange(v || '')}
+          onChange={(v) => onChange(v || "")}
           placeholder={`Select ${field.label}`}
           clearable
           searchable
           disabled={field.readOnly}
           aria-label={field.label || field.name}
           aria-required={field.required}
-          styles={{ input: { fontSize: '0.8125rem' } }}
+          styles={{ input: { fontSize: "0.8125rem" } }}
         />
       );
     }
 
-    case 'listbox': {
+    case "listbox": {
       const listData = (field.options || []).map((opt, idx) => ({
         value: opt,
         label: (field.displayOptions && field.displayOptions[idx]) || opt,
       }));
       if (field.multiSelect) {
-        const selectedValues = value ? value.split(',').filter(Boolean) : [];
+        const selectedValues = value ? value.split(",").filter(Boolean) : [];
         return (
           <MultiSelect
             size="xs"
             data={listData}
             value={selectedValues}
-            onChange={(vals) => onChange(vals.join(','))}
+            onChange={(vals) => onChange(vals.join(","))}
             placeholder={`Select ${field.label}`}
             searchable
             disabled={field.readOnly}
             aria-label={field.label || field.name}
             aria-required={field.required}
-            styles={{ input: { fontSize: '0.8125rem' } }}
+            styles={{ input: { fontSize: "0.8125rem" } }}
           />
         );
       }
@@ -123,19 +112,19 @@ function FieldInputInner({
           size="xs"
           data={listData}
           value={value || null}
-          onChange={(v) => onChange(v || '')}
+          onChange={(v) => onChange(v || "")}
           placeholder={`Select ${field.label}`}
           clearable
           searchable
           disabled={field.readOnly}
           aria-label={field.label || field.name}
           aria-required={field.required}
-          styles={{ input: { fontSize: '0.8125rem' } }}
+          styles={{ input: { fontSize: "0.8125rem" } }}
         />
       );
     }
 
-    case 'radio': {
+    case "radio": {
       const radioOptions: { value: string; label: string }[] = [];
       if (field.widgets && field.widgets.length > 0) {
         for (let i = 0; i < field.widgets.length; i++) {
@@ -146,21 +135,10 @@ function FieldInputInner({
         }
       }
       return (
-        <Radio.Group
-          value={value}
-          onChange={onChange}
-          aria-label={field.label || field.name}
-          aria-required={field.required}
-        >
+        <Radio.Group value={value} onChange={onChange} aria-label={field.label || field.name} aria-required={field.required}>
           <Stack gap={4} mt={4}>
             {radioOptions.map((opt) => (
-              <Radio
-                key={opt.value}
-                size="xs"
-                value={opt.value}
-                label={opt.label}
-                disabled={field.readOnly}
-              />
+              <Radio key={opt.value} size="xs" value={opt.value} label={opt.label} disabled={field.readOnly} />
             ))}
           </Stack>
         </Radio.Group>
@@ -176,7 +154,7 @@ function FieldInputInner({
           disabled={field.readOnly}
           aria-label={field.label || field.name}
           aria-required={field.required}
-          styles={{ input: { fontSize: '0.8125rem' } }}
+          styles={{ input: { fontSize: "0.8125rem" } }}
         />
       );
   }
diff --git a/frontend/src/core/tools/formFill/FormFieldOverlay.tsx b/frontend/src/core/tools/formFill/FormFieldOverlay.tsx
index 14a0918a2a..331c5c0bad 100644
--- a/frontend/src/core/tools/formFill/FormFieldOverlay.tsx
+++ b/frontend/src/core/tools/formFill/FormFieldOverlay.tsx
@@ -17,11 +17,11 @@
  * handles visual rotation via CSS transforms — same as TilingLayer,
  * AnnotationLayer, and LinkLayer.
  */
-import React, { useCallback, useMemo, memo } from 'react';
-import { useDocumentState } from '@embedpdf/core/react';
-import { useFormFill, useFieldValue } from '@app/tools/formFill/FormFillContext';
-import { useViewer } from '@app/contexts/ViewerContext';
-import type { FormField, WidgetCoordinates, ButtonAction } from '@app/tools/formFill/types';
+import React, { useCallback, useMemo, memo } from "react";
+import { useDocumentState } from "@embedpdf/core/react";
+import { useFormFill, useFieldValue } from "@app/tools/formFill/FormFillContext";
+import { useViewer } from "@app/contexts/ViewerContext";
+import type { FormField, WidgetCoordinates, ButtonAction } from "@app/tools/formFill/types";
 
 /**
  * Execute PDF JavaScript in a minimally sandboxed context.
@@ -45,15 +45,28 @@ function executePdfJs(
   // 1. Static sanitization: Reject scripts with potentially harmful or unneeded keywords.
   // This blocks most elementary exploits and prevents prototype tampering.
   const forbidden = [
-    'window', 'document', 'fetch', 'xmlhttprequest', 'websocket', 'worker',
-    'eval', 'settimeout', 'setinterval', 'function', 'constructor',
-    '__proto__', 'prototype', 'globalthis', 'import', 'require'
+    "window",
+    "document",
+    "fetch",
+    "xmlhttprequest",
+    "websocket",
+    "worker",
+    "eval",
+    "settimeout",
+    "setinterval",
+    "function",
+    "constructor",
+    "__proto__",
+    "prototype",
+    "globalthis",
+    "import",
+    "require",
   ];
 
   const lowerJs = js.toLowerCase();
   for (const word of forbidden) {
     if (lowerJs.includes(word)) {
-      console.warn(`[PDF JS] Execution blocked: Script contains suspicious keyword "${word}".`, 'Script:', js);
+      console.warn(`[PDF JS] Execution blocked: Script contains suspicious keyword "${word}".`, "Script:", js);
       return;
     }
   }
@@ -62,27 +75,37 @@ function executePdfJs(
   const doOpenUrl = (url: string) => {
     try {
       const u = new URL(url);
-      if (['http:', 'https:', 'mailto:'].includes(u.protocol)) {
-        window.open(url, '_blank', 'noopener,noreferrer');
+      if (["http:", "https:", "mailto:"].includes(u.protocol)) {
+        window.open(url, "_blank", "noopener,noreferrer");
       }
-    } catch { /* invalid URL — ignore */ }
+    } catch {
+      /* invalid URL — ignore */
+    }
   };
 
   const app = {
     print: (_params?: unknown) => handlers.print(),
-    alert: (msg: unknown) => { console.debug('[PDF JS] alert:', msg); },
+    alert: (msg: unknown) => {
+      console.debug("[PDF JS] alert:", msg);
+    },
     beep: () => {},
     response: () => null,
     execMenuItem: (item: string) => {
       switch (item) {
-        case 'Print': handlers.print(); break;
-        case 'Save':  handlers.save();  break;
-        case 'Close': break; // no-op in browser context
-        default: console.debug('[PDF JS] execMenuItem: unhandled item:', item);
+        case "Print":
+          handlers.print();
+          break;
+        case "Save":
+          handlers.save();
+          break;
+        case "Close":
+          break; // no-op in browser context
+        default:
+          console.debug("[PDF JS] execMenuItem: unhandled item:", item);
       }
     },
     // Prevent prototype walking
-    __proto__: null
+    __proto__: null,
   };
 
   const doc = {
@@ -91,10 +114,9 @@ function executePdfJs(
     saveAs: (_params?: unknown) => handlers.save(),
     submitForm: (urlOrParams: unknown) => {
       const url =
-        typeof urlOrParams === 'string'
-          ? urlOrParams
-          : (urlOrParams as Record<string, unknown>)?.cURL as string ?? '';
-      if (url) doOpenUrl(url); else handlers.submitForm(url);
+        typeof urlOrParams === "string" ? urlOrParams : (((urlOrParams as Record<string, unknown>)?.cURL as string) ?? "");
+      if (url) doOpenUrl(url);
+      else handlers.submitForm(url);
     },
     resetForm: (_fields?: unknown) => handlers.resetForm(),
     getField: (_name: string) => null,
@@ -106,9 +128,9 @@ function executePdfJs(
 
   // Stub event object — used by field calculation/validation scripts
   const event = {
-    value: '',
-    changeEx: '',
-    change: '',
+    value: "",
+    changeEx: "",
+    change: "",
     rc: true,
     willCommit: false,
     target: null as null,
@@ -117,11 +139,11 @@ function executePdfJs(
   try {
     // Pass doc, app, event as both `this` AND named parameters so scripts that
     // reference them as free variables (not just via `this`) work correctly.
-    const fn = new Function('app', 'doc', 'event', js);
+    const fn = new Function("app", "doc", "event", js);
     fn.call(doc, app, doc, event);
   } catch (err) {
     // Swallow errors from missing PDF APIs; log in debug mode for tracing
-    console.debug('[PDF JS] Script execution error (expected for unsupported APIs):', err, '\nScript:', js.slice(0, 200));
+    console.debug("[PDF JS] Script execution error (expected for unsupported APIs):", err, "\nScript:", js.slice(0, 200));
   }
 }
 
@@ -163,31 +185,33 @@ function WidgetInputInner({
   const width = widget.width * scaleX;
   const height = widget.height * scaleY;
 
-  const borderColor = error ? '#f44336' : (isActive ? '#2196F3' : 'rgba(33, 150, 243, 0.4)');
+  const borderColor = error ? "#f44336" : isActive ? "#2196F3" : "rgba(33, 150, 243, 0.4)";
   const bgColor = error
-    ? '#FFEBEE' // Red 50 (Opaque)
-    : (isActive ? '#E3F2FD' : '#FFFFFF'); // Blue 50 (Opaque) : White (Opaque)
+    ? "#FFEBEE" // Red 50 (Opaque)
+    : isActive
+      ? "#E3F2FD"
+      : "#FFFFFF"; // Blue 50 (Opaque) : White (Opaque)
 
   const commonStyle: React.CSSProperties = {
-    position: 'absolute',
+    position: "absolute",
     left,
     top,
     width,
     height,
     zIndex: 10,
-    boxSizing: 'border-box',
+    boxSizing: "border-box",
     border: `1px solid ${borderColor}`,
     borderRadius: 1,
-    background: isActive ? bgColor : 'transparent',
-    transition: 'border-color 0.15s, background 0.15s, box-shadow 0.15s',
+    background: isActive ? bgColor : "transparent",
+    transition: "border-color 0.15s, background 0.15s, box-shadow 0.15s",
     boxShadow:
-      isActive && field.type !== 'radio' && field.type !== 'checkbox'
-        ? `0 0 0 2px ${error ? 'rgba(244, 67, 54, 0.25)' : 'rgba(33, 150, 243, 0.25)'}`
-        : 'none',
-    cursor: field.readOnly ? 'default' : 'text',
-    pointerEvents: 'auto',
-    display: 'flex',
-    alignItems: field.multiline ? 'stretch' : 'center',
+      isActive && field.type !== "radio" && field.type !== "checkbox"
+        ? `0 0 0 2px ${error ? "rgba(244, 67, 54, 0.25)" : "rgba(33, 150, 243, 0.25)"}`
+        : "none",
+    cursor: field.readOnly ? "default" : "text",
+    pointerEvents: "auto",
+    display: "flex",
+    alignItems: field.multiline ? "stretch" : "center",
   };
 
   const stopPropagation = (e: React.SyntheticEvent) => {
@@ -228,29 +252,29 @@ function WidgetInputInner({
   const fontSize = widget.fontSize
     ? widget.fontSize * scaleY
     : field.multiline
-      ? Math.max(6, Math.min(height * 0.60, 14))
+      ? Math.max(6, Math.min(height * 0.6, 14))
       : Math.max(6, height * 0.65);
 
   const inputBaseStyle: React.CSSProperties = {
-    width: '100%',
-    height: '100%',
-    border: 'none',
-    outline: 'none',
-    background: 'transparent',
+    width: "100%",
+    height: "100%",
+    border: "none",
+    outline: "none",
+    background: "transparent",
     padding: 0,
     paddingLeft: `${Math.max(2, 4 * scaleX)}px`,
     paddingRight: `${Math.max(2, 4 * scaleX)}px`,
     fontSize: `${fontSize}px`,
-    fontFamily: 'Helvetica, Arial, sans-serif',
-    color: '#000',
-    boxSizing: 'border-box',
-    lineHeight: 'normal',
+    fontFamily: "Helvetica, Arial, sans-serif",
+    color: "#000",
+    boxSizing: "border-box",
+    lineHeight: "normal",
   };
 
   const handleFocus = () => onFocus(field.name);
 
   switch (field.type) {
-    case 'text':
+    case "text":
       return (
         <div {...commonProps} title={error || field.tooltip || field.label}>
           {field.multiline ? (
@@ -262,8 +286,8 @@ function WidgetInputInner({
               placeholder={field.label}
               style={{
                 ...inputBaseStyle,
-                resize: 'none',
-                overflow: 'auto',
+                resize: "none",
+                overflow: "auto",
                 paddingTop: `${Math.max(1, 2 * scaleY)}px`,
               }}
               {...captureStopProps}
@@ -288,49 +312,49 @@ function WidgetInputInner({
         </div>
       );
 
-    case 'checkbox': {
+    case "checkbox": {
       // Checkbox is checked when value is anything other than 'Off' or empty
-      const isChecked = !!value && value !== 'Off';
+      const isChecked = !!value && value !== "Off";
       // When toggling on, use the widget's exportValue (e.g. 'Red', 'Blue') or fall back to 'Yes'
-      const onValue = widget.exportValue || 'Yes';
+      const onValue = widget.exportValue || "Yes";
       return (
         <div
           {...commonProps}
           style={{
             ...commonStyle,
-            border: isActive ? commonStyle.border : '1px solid rgba(0,0,0,0.15)',
-            background: isActive ? bgColor : 'transparent',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center', // Keep center for checkboxes as they are usually square hitboxes
-            cursor: field.readOnly ? 'default' : 'pointer',
+            border: isActive ? commonStyle.border : "1px solid rgba(0,0,0,0.15)",
+            background: isActive ? bgColor : "transparent",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center", // Keep center for checkboxes as they are usually square hitboxes
+            cursor: field.readOnly ? "default" : "pointer",
           }}
           title={error || field.tooltip || field.label}
           onClick={(e) => {
             if (field.readOnly) return;
             handleFocus();
-            onChange(field.name, isChecked ? 'Off' : onValue);
+            onChange(field.name, isChecked ? "Off" : onValue);
             stopPropagation(e);
           }}
         >
           <span
             style={{
-              width: '85%',
-              height: '85%',
+              width: "85%",
+              height: "85%",
               maxWidth: height * 0.9, // Prevent it from getting too wide in rectangular boxes
               maxHeight: width * 0.9,
               fontSize: `${Math.max(10, height * 0.75)}px`,
               lineHeight: 1,
-              color: isChecked ? '#2196F3' : 'transparent',
-              background: '#FFF',
-              border: isChecked || isActive ? '1px solid #2196F3' : '1.5px solid #666',
+              color: isChecked ? "#2196F3" : "transparent",
+              background: "#FFF",
+              border: isChecked || isActive ? "1px solid #2196F3" : "1.5px solid #666",
               borderRadius: 2,
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
               fontWeight: 700,
-              userSelect: 'none',
-              boxShadow: isActive ? '0 0 0 2px rgba(33, 150, 243, 0.2)' : 'none',
+              userSelect: "none",
+              boxShadow: isActive ? "0 0 0 2px rgba(33, 150, 243, 0.2)" : "none",
             }}
           >
             ✓
@@ -339,21 +363,19 @@ function WidgetInputInner({
       );
     }
 
-    case 'combobox':
-    case 'listbox': {
+    case "combobox":
+    case "listbox": {
       const inputId = `${field.name}_${widget.pageIndex}_${widget.x}_${widget.y}`;
 
       // For multi-select, value should be an array
       // We store as comma-separated string, so parse it
-      const selectValue = field.multiSelect
-        ? (value ? value.split(',').map(v => v.trim()) : [])
-        : value;
+      const selectValue = field.multiSelect ? (value ? value.split(",").map((v) => v.trim()) : []) : value;
 
       const handleSelectChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
         if (field.multiSelect) {
           // For multi-select, join selected options with comma
-          const selected = Array.from(e.target.selectedOptions, opt => opt.value);
-          onChange(field.name, selected.join(','));
+          const selected = Array.from(e.target.selectedOptions, (opt) => opt.value);
+          onChange(field.name, selected.join(","));
         } else {
           onChange(field.name, e.target.value);
         }
@@ -372,8 +394,8 @@ function WidgetInputInner({
               ...inputBaseStyle,
               padding: 0,
               paddingLeft: 2,
-              appearance: 'auto',
-              WebkitAppearance: 'auto' as React.CSSProperties['WebkitAppearance'],
+              appearance: "auto",
+              WebkitAppearance: "auto" as React.CSSProperties["WebkitAppearance"],
             }}
             aria-label={field.label || field.name}
             aria-required={field.required}
@@ -391,7 +413,7 @@ function WidgetInputInner({
       );
     }
 
-    case 'radio': {
+    case "radio": {
       // Identify this widget by its index within the field's widgets array.
       // This avoids issues with duplicate exportValues (e.g., all "Yes").
       const widgetIndex = field.widgets?.indexOf(widget) ?? -1;
@@ -403,13 +425,13 @@ function WidgetInputInner({
           {...commonProps}
           style={{
             ...commonStyle,
-            border: isActive ? commonStyle.border : 'none',
-            background: 'transparent',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'flex-start', // Align to start (left) instead of center for radio buttons
+            border: isActive ? commonStyle.border : "none",
+            background: "transparent",
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "flex-start", // Align to start (left) instead of center for radio buttons
             paddingLeft: Math.max(1, (height - Math.min(width, height) * 0.8) / 2), // Slight offset
-            cursor: field.readOnly ? 'default' : 'pointer',
+            cursor: field.readOnly ? "default" : "pointer",
           }}
           title={error || field.tooltip || `${field.label}: ${widget.exportValue || widgetIndexStr}`}
           onClick={(e) => {
@@ -423,40 +445,50 @@ function WidgetInputInner({
             style={{
               width: Math.min(width, height) * 0.8,
               height: Math.min(width, height) * 0.8,
-              borderRadius: '50%',
-              border: `1.5px solid ${isSelected ? '#2196F3' : isActive ? '#2196F3' : '#999'}`,
-              background: isSelected ? '#2196F3' : 'transparent',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-              boxShadow: isSelected ? 'inset 0 0 0 2px white' : 'none',
-              transition: 'background 0.15s, border-color 0.15s',
+              borderRadius: "50%",
+              border: `1.5px solid ${isSelected ? "#2196F3" : isActive ? "#2196F3" : "#999"}`,
+              background: isSelected ? "#2196F3" : "transparent",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              boxShadow: isSelected ? "inset 0 0 0 2px white" : "none",
+              transition: "background 0.15s, border-color 0.15s",
             }}
           />
         </div>
       );
     }
 
-    case 'signature':
+    case "signature":
       // Signature fields are handled entirely by SignatureFieldOverlay (bitmap canvas).
       // Rendering a placeholder here creates a visible grey overlay on top of the
       // signature appearance, so we skip it entirely.
       return null;
 
-    case 'button': {
+    case "button": {
       // Transparent hit-target only — visual appearance is rendered by ButtonAppearanceOverlay
       // (which paints the PDF's native /AP bitmap onto a canvas behind this div).
-      const buttonLabel = field.buttonLabel || field.value || field.label || 'Button';
+      const buttonLabel = field.buttonLabel || field.value || field.label || "Button";
       const isClickable = !field.readOnly;
 
-      let actionHint = '';
+      let actionHint = "";
       if (field.buttonAction) {
         switch (field.buttonAction.type) {
-          case 'named': actionHint = field.buttonAction.namedAction ?? ''; break;
-          case 'resetForm': actionHint = 'Reset Form'; break;
-          case 'submitForm': actionHint = `Submit to: ${field.buttonAction.url ?? ''}`.trim(); break;
-          case 'uri': actionHint = field.buttonAction.url ?? ''; break;
-          case 'javascript': actionHint = 'Script'; break;
+          case "named":
+            actionHint = field.buttonAction.namedAction ?? "";
+            break;
+          case "resetForm":
+            actionHint = "Reset Form";
+            break;
+          case "submitForm":
+            actionHint = `Submit to: ${field.buttonAction.url ?? ""}`.trim();
+            break;
+          case "uri":
+            actionHint = field.buttonAction.url ?? "";
+            break;
+          case "javascript":
+            actionHint = "Script";
+            break;
         }
       }
       const titleText = field.tooltip || (actionHint ? `${buttonLabel} (${actionHint})` : buttonLabel);
@@ -466,10 +498,10 @@ function WidgetInputInner({
           {...commonProps}
           style={{
             ...commonStyle,
-            background: 'transparent',
-            border: 'none',
-            boxShadow: 'none',
-            cursor: isClickable ? 'pointer' : 'default',
+            background: "transparent",
+            border: "none",
+            boxShadow: "none",
+            cursor: isClickable ? "pointer" : "default",
           }}
           title={titleText}
           role="button"
@@ -481,7 +513,7 @@ function WidgetInputInner({
             stopPropagation(e);
           }}
           onKeyDown={(e) => {
-            if (isClickable && (e.key === 'Enter' || e.key === ' ')) {
+            if (isClickable && (e.key === "Enter" || e.key === " ")) {
               e.preventDefault();
               onButtonClick(field, field.buttonAction);
             }
@@ -513,19 +545,13 @@ const WidgetInput = memo(WidgetInputInner);
 interface FormFieldOverlayProps {
   documentId: string;
   pageIndex: number;
-  pageWidth: number;  // rendered CSS pixel width (from renderPage callback)
+  pageWidth: number; // rendered CSS pixel width (from renderPage callback)
   pageHeight: number; // rendered CSS pixel height
   /** File identity — if provided, overlay only renders when context fields match this file */
   fileId?: string | null;
 }
 
-export function FormFieldOverlay({
-  documentId,
-  pageIndex,
-  pageWidth,
-  pageHeight,
-  fileId,
-}: FormFieldOverlayProps) {
+export function FormFieldOverlay({ documentId, pageIndex, pageWidth, pageHeight, fileId }: FormFieldOverlayProps) {
   const { setValue, setActiveField, fieldsByPage, state, forFileId } = useFormFill();
   const { activeFieldName, validationErrors } = state;
   const { printActions, scrollActions, exportActions } = useViewer();
@@ -539,7 +565,7 @@ export function FormFieldOverlay({
     if (!pdfPage || !pdfPage.size || !pageWidth || !pageHeight) {
       const s = documentState?.scale ?? 1;
       if (pageIndex === 0) {
-        console.debug('[FormFieldOverlay] page 0 using fallback scale=%f (missing pdfPage.size)', s);
+        console.debug("[FormFieldOverlay] page 0 using fallback scale=%f (missing pdfPage.size)", s);
       }
       return { scaleX: s, scaleY: s };
     }
@@ -548,8 +574,14 @@ export function FormFieldOverlay({
     const sy = pageHeight / pdfPage.size.height;
     if (pageIndex === 0) {
       console.debug(
-        '[FormFieldOverlay] page 0 scale: pageW=%f pageH=%f pdfW=%f pdfH=%f → scaleX=%f scaleY=%f docScale=%f',
-        pageWidth, pageHeight, pdfPage.size.width, pdfPage.size.height, sx, sy, documentState?.scale,
+        "[FormFieldOverlay] page 0 scale: pageW=%f pageH=%f pdfW=%f pdfH=%f → scaleX=%f scaleY=%f docScale=%f",
+        pageWidth,
+        pageHeight,
+        pdfPage.size.width,
+        pdfPage.size.height,
+        sx,
+        sy,
+        documentState?.scale,
       );
     }
     // pdfPage.size contains un-rotated dimensions from the engine;
@@ -557,39 +589,34 @@ export function FormFieldOverlay({
     return { scaleX: sx, scaleY: sy };
   }, [documentState, pageIndex, pageWidth, pageHeight]);
 
-  const pageFields = useMemo(
-    () => fieldsByPage.get(pageIndex) || [],
-    [fieldsByPage, pageIndex]
-  );
+  const pageFields = useMemo(() => fieldsByPage.get(pageIndex) || [], [fieldsByPage, pageIndex]);
 
-  const handleFocus = useCallback(
-    (fieldName: string) => setActiveField(fieldName),
-    [setActiveField]
-  );
+  const handleFocus = useCallback((fieldName: string) => setActiveField(fieldName), [setActiveField]);
 
-  const handleChange = useCallback(
-    (fieldName: string, value: string) => setValue(fieldName, value),
-    [setValue]
-  );
+  const handleChange = useCallback((fieldName: string, value: string) => setValue(fieldName, value), [setValue]);
 
   const handleButtonClick = useCallback(
     (field: FormField, action?: ButtonAction | null) => {
       const doOpenUrl = (url: string) => {
         try {
           const u = new URL(url);
-          if (['http:', 'https:', 'mailto:'].includes(u.protocol)) {
-            window.open(url, '_blank', 'noopener,noreferrer');
+          if (["http:", "https:", "mailto:"].includes(u.protocol)) {
+            window.open(url, "_blank", "noopener,noreferrer");
           }
-        } catch { /* invalid URL */ }
+        } catch {
+          /* invalid URL */
+        }
       };
       const doResetForm = () => {
-        for (const f of state.fields) setValue(f.name, f.value ?? '');
+        for (const f of state.fields) setValue(f.name, f.value ?? "");
+      };
+      const doSave = () => {
+        exportActions.saveAsCopy();
       };
-      const doSave = () => { exportActions.saveAsCopy(); };
 
       if (!action) {
         // Action extraction failed — fall back to label matching as a last resort
-        const label = (field.buttonLabel || field.label || '').toLowerCase();
+        const label = (field.buttonLabel || field.label || "").toLowerCase();
         if (/print/.test(label)) printActions.print();
         else if (/save|download/.test(label)) doSave();
         else if (/reset|clear/.test(label)) doResetForm();
@@ -597,24 +624,36 @@ export function FormFieldOverlay({
       }
 
       switch (action.type) {
-        case 'named':
+        case "named":
           switch (action.namedAction) {
-            case 'Print': printActions.print(); break;
-            case 'Save': doSave(); break;
-            case 'NextPage': scrollActions.scrollToNextPage(); break;
-            case 'PrevPage': scrollActions.scrollToPreviousPage(); break;
-            case 'FirstPage': scrollActions.scrollToFirstPage(); break;
-            case 'LastPage': scrollActions.scrollToLastPage(); break;
+            case "Print":
+              printActions.print();
+              break;
+            case "Save":
+              doSave();
+              break;
+            case "NextPage":
+              scrollActions.scrollToNextPage();
+              break;
+            case "PrevPage":
+              scrollActions.scrollToPreviousPage();
+              break;
+            case "FirstPage":
+              scrollActions.scrollToFirstPage();
+              break;
+            case "LastPage":
+              scrollActions.scrollToLastPage();
+              break;
           }
           break;
-        case 'resetForm':
+        case "resetForm":
           doResetForm();
           break;
-        case 'submitForm':
-        case 'uri':
+        case "submitForm":
+        case "uri":
           if (action.url) doOpenUrl(action.url);
           break;
-        case 'javascript':
+        case "javascript":
           // Execute in a sandboxed PDF JS environment instead of just logging
           if (action.javascript) {
             executePdfJs(action.javascript, {
@@ -645,12 +684,12 @@ export function FormFieldOverlay({
   return (
     <div
       style={{
-        position: 'absolute',
+        position: "absolute",
         top: 0,
         left: 0,
-        width: '100%',
-        height: '100%',
-        pointerEvents: 'none', // allow click-through except on widgets
+        width: "100%",
+        height: "100%",
+        pointerEvents: "none", // allow click-through except on widgets
         zIndex: 5, // above TilingLayer, below LinkLayer
       }}
       data-form-overlay-page={pageIndex}
@@ -676,7 +715,7 @@ export function FormFieldOverlay({
                 onButtonClick={handleButtonClick}
               />
             );
-          })
+          }),
       )}
     </div>
   );
diff --git a/frontend/src/core/tools/formFill/FormFieldSidebar.tsx b/frontend/src/core/tools/formFill/FormFieldSidebar.tsx
index 949b530ffd..ce02aa90b1 100644
--- a/frontend/src/core/tools/formFill/FormFieldSidebar.tsx
+++ b/frontend/src/core/tools/formFill/FormFieldSidebar.tsx
@@ -7,33 +7,23 @@
  * - Shared FieldInput component (no duplication)
  * - Better visual hierarchy and spacing
  */
-import React, { useCallback, useEffect, useRef } from 'react';
-import {
-  Box,
-  Text,
-  ScrollArea,
-  Badge,
-  Tooltip,
-  ActionIcon,
-} from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { useFormFill } from '@app/tools/formFill/FormFillContext';
-import { FieldInput } from '@app/tools/formFill/FieldInput';
-import { FIELD_TYPE_ICON, FIELD_TYPE_COLOR } from '@app/tools/formFill/fieldMeta';
-import type { FormField } from '@app/tools/formFill/types';
-import CloseIcon from '@mui/icons-material/Close';
-import TextFieldsIcon from '@mui/icons-material/TextFields';
-import styles from '@app/tools/formFill/FormFill.module.css';
+import React, { useCallback, useEffect, useRef } from "react";
+import { Box, Text, ScrollArea, Badge, Tooltip, ActionIcon } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { useFormFill } from "@app/tools/formFill/FormFillContext";
+import { FieldInput } from "@app/tools/formFill/FieldInput";
+import { FIELD_TYPE_ICON, FIELD_TYPE_COLOR } from "@app/tools/formFill/fieldMeta";
+import type { FormField } from "@app/tools/formFill/types";
+import CloseIcon from "@mui/icons-material/Close";
+import TextFieldsIcon from "@mui/icons-material/TextFields";
+import styles from "@app/tools/formFill/FormFill.module.css";
 
 interface FormFieldSidebarProps {
   visible: boolean;
   onToggle: () => void;
 }
 
-export function FormFieldSidebar({
-  visible,
-  onToggle,
-}: FormFieldSidebarProps) {
+export function FormFieldSidebar({ visible, onToggle }: FormFieldSidebarProps) {
   useTranslation();
   const { state, setValue, setActiveField } = useFormFill();
   const { fields, activeFieldName, loading } = state;
@@ -42,8 +32,8 @@ export function FormFieldSidebar({
   useEffect(() => {
     if (activeFieldName && activeFieldRef.current) {
       activeFieldRef.current.scrollIntoView({
-        behavior: 'smooth',
-        block: 'center',
+        behavior: "smooth",
+        block: "center",
       });
     }
   }, [activeFieldName]);
@@ -52,22 +42,21 @@ export function FormFieldSidebar({
     (fieldName: string) => {
       setActiveField(fieldName);
     },
-    [setActiveField]
+    [setActiveField],
   );
 
   const handleValueChange = useCallback(
     (fieldName: string, value: string) => {
       setValue(fieldName, value);
     },
-    [setValue]
+    [setValue],
   );
 
   if (!visible) return null;
 
   const fieldsByPage = new Map<number, FormField[]>();
   for (const field of fields) {
-    const pageIndex =
-      field.widgets && field.widgets.length > 0 ? field.widgets[0].pageIndex : 0;
+    const pageIndex = field.widgets && field.widgets.length > 0 ? field.widgets[0].pageIndex : 0;
     if (!fieldsByPage.has(pageIndex)) {
       fieldsByPage.set(pageIndex, []);
     }
@@ -78,31 +67,31 @@ export function FormFieldSidebar({
   return (
     <Box
       style={{
-        position: 'fixed',
+        position: "fixed",
         top: 0,
         right: 0,
-        width: '18.5rem',
-        height: '100%',
+        width: "18.5rem",
+        height: "100%",
         zIndex: 999,
-        display: 'flex',
-        flexDirection: 'column',
-        background: 'var(--bg-toolbar, var(--mantine-color-body))',
-        borderLeft: '1px solid var(--border-subtle, var(--mantine-color-default-border))',
-        boxShadow: '-4px 0 16px rgba(0,0,0,0.08)',
+        display: "flex",
+        flexDirection: "column",
+        background: "var(--bg-toolbar, var(--mantine-color-body))",
+        borderLeft: "1px solid var(--border-subtle, var(--mantine-color-default-border))",
+        boxShadow: "-4px 0 16px rgba(0,0,0,0.08)",
       }}
     >
       {/* Header */}
       <div
         style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'space-between',
-          padding: '0.625rem 0.75rem',
-          borderBottom: '1px solid var(--border-subtle, var(--mantine-color-default-border))',
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          padding: "0.625rem 0.75rem",
+          borderBottom: "1px solid var(--border-subtle, var(--mantine-color-default-border))",
           flexShrink: 0,
         }}
       >
-        <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+        <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
           <TextFieldsIcon sx={{ fontSize: 18, opacity: 0.7 }} />
           <Text fw={600} size="sm">
             Form Fields
@@ -128,9 +117,7 @@ export function FormFieldSidebar({
 
         {!loading && fields.length === 0 && (
           <div className={styles.emptyState}>
-            <span className={styles.emptyStateText}>
-              No form fields found in this PDF
-            </span>
+            <span className={styles.emptyStateText}>No form fields found in this PDF</span>
           </div>
         )}
 
@@ -138,13 +125,8 @@ export function FormFieldSidebar({
           <div className={styles.fieldListInner}>
             {sortedPages.map((pageIdx, i) => (
               <React.Fragment key={pageIdx}>
-                <div
-                  className={styles.pageDivider}
-                  style={i === 0 ? { marginTop: 0 } : undefined}
-                >
-                  <Text className={styles.pageDividerLabel}>
-                    Page {pageIdx + 1}
-                  </Text>
+                <div className={styles.pageDivider} style={i === 0 ? { marginTop: 0 } : undefined}>
+                  <Text className={styles.pageDividerLabel}>Page {pageIdx + 1}</Text>
                 </div>
 
                 {fieldsByPage.get(pageIdx)!.map((field) => {
@@ -154,9 +136,7 @@ export function FormFieldSidebar({
                     <div
                       key={field.name}
                       ref={isActive ? activeFieldRef : undefined}
-                      className={`${styles.fieldCard} ${
-                        isActive ? styles.fieldCardActive : ''
-                      }`}
+                      className={`${styles.fieldCard} ${isActive ? styles.fieldCardActive : ""}`}
                       onClick={() => handleFieldClick(field.name)}
                     >
                       <div className={styles.fieldHeader}>
@@ -165,36 +145,23 @@ export function FormFieldSidebar({
                             className={styles.fieldTypeIcon}
                             style={{
                               color: `var(--mantine-color-${FIELD_TYPE_COLOR[field.type]}-6)`,
-                              fontSize: '0.875rem',
+                              fontSize: "0.875rem",
                             }}
                           >
                             {FIELD_TYPE_ICON[field.type]}
                           </span>
                         </Tooltip>
-                        <span className={styles.fieldName}>
-                          {field.label || field.name}
-                        </span>
-                        {field.required && (
-                          <span className={styles.fieldRequired}>req</span>
-                        )}
+                        <span className={styles.fieldName}>{field.label || field.name}</span>
+                        {field.required && <span className={styles.fieldRequired}>req</span>}
                       </div>
 
-                      {field.type !== 'button' && field.type !== 'signature' && (
-                        <div
-                          className={styles.fieldInputWrap}
-                        >
-                          <FieldInput
-                            field={field}
-                            onValueChange={handleValueChange}
-                          />
+                      {field.type !== "button" && field.type !== "signature" && (
+                        <div className={styles.fieldInputWrap}>
+                          <FieldInput field={field} onValueChange={handleValueChange} />
                         </div>
                       )}
 
-                      {field.tooltip && (
-                        <div className={styles.fieldHint}>
-                          {field.tooltip}
-                        </div>
-                      )}
+                      {field.tooltip && <div className={styles.fieldHint}>{field.tooltip}</div>}
                     </div>
                   );
                 })}
diff --git a/frontend/src/core/tools/formFill/FormFill.module.css b/frontend/src/core/tools/formFill/FormFill.module.css
index 844e9c1f93..aa42337d95 100644
--- a/frontend/src/core/tools/formFill/FormFill.module.css
+++ b/frontend/src/core/tools/formFill/FormFill.module.css
@@ -128,7 +128,7 @@
 }
 
 .pageDivider::after {
-  content: '';
+  content: "";
   flex: 1;
   height: 1px;
   background: var(--border-default, var(--mantine-color-default-border));
diff --git a/frontend/src/core/tools/formFill/FormFill.tsx b/frontend/src/core/tools/formFill/FormFill.tsx
index 0a809a4b0d..61ed3e7b30 100644
--- a/frontend/src/core/tools/formFill/FormFill.tsx
+++ b/frontend/src/core/tools/formFill/FormFill.tsx
@@ -9,45 +9,35 @@
  * - CSS module for theme-consistent styling
  * - Status bar at bottom for contextual info
  */
-import React, { useEffect, useCallback, useState, useRef, useMemo } from 'react';
-import {
-  Button,
-  Text,
-  Alert,
-  Switch,
-  Loader,
-  ScrollArea,
-  Progress,
-  Tooltip,
-  ActionIcon,
-} from '@mantine/core';
-import { useFormFill, useAllFormValues } from '@app/tools/formFill/FormFillContext';
-import { useNavigation } from '@app/contexts/NavigationContext';
-import { useViewer } from '@app/contexts/ViewerContext';
-import { useFileState } from '@app/contexts/FileContext';
-import { Skeleton } from '@mantine/core';
-import { isStirlingFile, getFormFillFileId } from '@app/types/fileContext';
-import type { BaseToolProps } from '@app/types/tool';
-import type { FormField } from '@app/tools/formFill/types';
-import { FieldInput } from '@app/tools/formFill/FieldInput';
-import { FIELD_TYPE_ICON, FIELD_TYPE_COLOR } from '@app/tools/formFill/fieldMeta';
-import SaveIcon from '@mui/icons-material/Save';
-import RefreshIcon from '@mui/icons-material/Refresh';
-import WarningAmberIcon from '@mui/icons-material/WarningAmber';
-import EditNoteIcon from '@mui/icons-material/EditNote';
-import PostAddIcon from '@mui/icons-material/PostAdd';
-import FileCopyIcon from '@mui/icons-material/FileCopy';
-import BuildCircleIcon from '@mui/icons-material/BuildCircle';
-import DescriptionIcon from '@mui/icons-material/Description';
-import FileDownloadIcon from '@mui/icons-material/FileDownload';
-import { extractFormFieldsCsv, extractFormFieldsXlsx } from '@app/tools/formFill/formApi';
-import styles from '@app/tools/formFill/FormFill.module.css';
+import React, { useEffect, useCallback, useState, useRef, useMemo } from "react";
+import { Button, Text, Alert, Switch, Loader, ScrollArea, Progress, Tooltip, ActionIcon } from "@mantine/core";
+import { useFormFill, useAllFormValues } from "@app/tools/formFill/FormFillContext";
+import { useNavigation } from "@app/contexts/NavigationContext";
+import { useViewer } from "@app/contexts/ViewerContext";
+import { useFileState } from "@app/contexts/FileContext";
+import { Skeleton } from "@mantine/core";
+import { isStirlingFile, getFormFillFileId } from "@app/types/fileContext";
+import type { BaseToolProps } from "@app/types/tool";
+import type { FormField } from "@app/tools/formFill/types";
+import { FieldInput } from "@app/tools/formFill/FieldInput";
+import { FIELD_TYPE_ICON, FIELD_TYPE_COLOR } from "@app/tools/formFill/fieldMeta";
+import SaveIcon from "@mui/icons-material/Save";
+import RefreshIcon from "@mui/icons-material/Refresh";
+import WarningAmberIcon from "@mui/icons-material/WarningAmber";
+import EditNoteIcon from "@mui/icons-material/EditNote";
+import PostAddIcon from "@mui/icons-material/PostAdd";
+import FileCopyIcon from "@mui/icons-material/FileCopy";
+import BuildCircleIcon from "@mui/icons-material/BuildCircle";
+import DescriptionIcon from "@mui/icons-material/Description";
+import FileDownloadIcon from "@mui/icons-material/FileDownload";
+import { extractFormFieldsCsv, extractFormFieldsXlsx } from "@app/tools/formFill/formApi";
+import styles from "@app/tools/formFill/FormFill.module.css";
 
 // ---------------------------------------------------------------------------
 // Mode tabs — extensible for future form tools
 // ---------------------------------------------------------------------------
 
-type FormMode = 'fill' | 'make' | 'batch' | 'modify';
+type FormMode = "fill" | "make" | "batch" | "modify";
 
 interface ModeTabDef {
   id: FormMode;
@@ -57,10 +47,10 @@ interface ModeTabDef {
 }
 
 const _MODE_TABS: ModeTabDef[] = [
-  { id: 'fill', label: 'Fill', icon: <EditNoteIcon className={styles.modeTabIcon} />, ready: true },
-  { id: 'make', label: 'Create', icon: <PostAddIcon className={styles.modeTabIcon} />, ready: false },
-  { id: 'batch', label: 'Batch', icon: <FileCopyIcon className={styles.modeTabIcon} />, ready: false },
-  { id: 'modify', label: 'Modify', icon: <BuildCircleIcon className={styles.modeTabIcon} />, ready: false },
+  { id: "fill", label: "Fill", icon: <EditNoteIcon className={styles.modeTabIcon} />, ready: true },
+  { id: "make", label: "Create", icon: <PostAddIcon className={styles.modeTabIcon} />, ready: false },
+  { id: "batch", label: "Batch", icon: <FileCopyIcon className={styles.modeTabIcon} />, ready: false },
+  { id: "modify", label: "Modify", icon: <BuildCircleIcon className={styles.modeTabIcon} />, ready: false },
 ];
 
 // ---------------------------------------------------------------------------
@@ -88,14 +78,7 @@ const FormFill = (_props: BaseToolProps) => {
   const { selectedTool } = useNavigation();
   const { selectors, state: fileState } = useFileState();
 
-  const {
-    state: formState,
-    fetchFields,
-    submitForm,
-    setValue,
-    setActiveField,
-    validateForm,
-  } = useFormFill();
+  const { state: formState, fetchFields, submitForm, setValue, setActiveField, validateForm } = useFormFill();
 
   const allValues = useAllFormValues();
   const { validationErrors } = formState;
@@ -106,7 +89,7 @@ const FormFill = (_props: BaseToolProps) => {
   // Other modes (make, batch, modify) are defined above but not yet exposed in the UI.
   // When ready, uncomment the SegmentedControl and mode state below.
   // const [mode, setMode] = useState<FormMode>('fill');
-  const mode: FormMode = 'fill';
+  const mode: FormMode = "fill";
   const [flatten, setFlatten] = useState(false);
   const [saving, setSaving] = useState(false);
   const [extracting, setExtracting] = useState(false);
@@ -121,9 +104,9 @@ const FormFill = (_props: BaseToolProps) => {
     setExtracting(true);
     try {
       const data = JSON.stringify(allValues, null, 2);
-      const blob = new Blob([data], { type: 'application/json' });
+      const blob = new Blob([data], { type: "application/json" });
       const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
+      const a = document.createElement("a");
       a.href = url;
       a.download = `form-data-${new Date().getTime()}.json`;
       a.click();
@@ -142,9 +125,7 @@ const FormFill = (_props: BaseToolProps) => {
   const currentFile = useMemo(() => {
     if (activeFiles.length === 0) return null;
     if (selectedFileIds.length > 0) {
-      const sel = activeFiles.find(
-        (f) => isStirlingFile(f) && selectedFileIds.includes(f.fileId)
-      );
+      const sel = activeFiles.find((f) => isStirlingFile(f) && selectedFileIds.includes(f.fileId));
       if (sel) return sel;
     }
     return activeFiles[0];
@@ -156,14 +137,14 @@ const FormFill = (_props: BaseToolProps) => {
     try {
       const blob = await extractFormFieldsCsv(currentFile, allValues);
       const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
+      const a = document.createElement("a");
       a.href = url;
       a.download = `form-data-${new Date().getTime()}.csv`;
       a.click();
       setTimeout(() => URL.revokeObjectURL(url), 250);
     } catch (err) {
-      console.error('[FormFill] CSV extraction failed:', err);
-      setSaveError('Failed to extract CSV');
+      console.error("[FormFill] CSV extraction failed:", err);
+      setSaveError("Failed to extract CSV");
     } finally {
       setExtracting(false);
     }
@@ -175,26 +156,26 @@ const FormFill = (_props: BaseToolProps) => {
     try {
       const blob = await extractFormFieldsXlsx(currentFile, allValues);
       const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
+      const a = document.createElement("a");
       a.href = url;
       a.download = `form-data-${new Date().getTime()}.xlsx`;
       a.click();
       setTimeout(() => URL.revokeObjectURL(url), 250);
     } catch (err) {
-      console.error('[FormFill] XLSX extraction failed:', err);
-      setSaveError('Failed to extract XLSX');
+      console.error("[FormFill] XLSX extraction failed:", err);
+      setSaveError("Failed to extract XLSX");
     } finally {
       setExtracting(false);
     }
   }, [currentFile, allValues]);
 
-  const isActive = selectedTool === 'formFill';
+  const isActive = selectedTool === "formFill";
 
   useEffect(() => {
     if (formState.activeFieldName && activeFieldRef.current) {
       activeFieldRef.current.scrollIntoView({
-        behavior: 'smooth',
-        block: 'center',
+        behavior: "smooth",
+        block: "center",
       });
     }
   }, [formState.activeFieldName]);
@@ -205,7 +186,7 @@ const FormFill = (_props: BaseToolProps) => {
     if (!currentFile || !isStirlingFile(currentFile)) return;
 
     if (!validateForm()) {
-      setSaveError('Please fill in all required fields');
+      setSaveError("Please fill in all required fields");
       return;
     }
 
@@ -223,16 +204,17 @@ const FormFill = (_props: BaseToolProps) => {
       // This ensures the viewer tracks the new file ID, preserves
       // scroll position and rotation — instead of our own consumeFiles
       // call which would lose the viewer's file tracking context.
-      const event = new CustomEvent('formfill:apply', { detail: { blob: filledBlob } });
+      const event = new CustomEvent("formfill:apply", { detail: { blob: filledBlob } });
       window.dispatchEvent(event);
     } catch (err: any) {
-      const message = err?.response?.status === 413
-        ? 'File too large. Try reducing the PDF size first.'
-        : err?.response?.status === 400
-        ? 'Invalid form data. Please check all fields.'
-        : err?.message || 'Failed to save filled form';
+      const message =
+        err?.response?.status === 413
+          ? "File too large. Try reducing the PDF size first."
+          : err?.response?.status === 400
+            ? "Invalid form data. Please check all fields."
+            : err?.message || "Failed to save filled form";
       setSaveError(message);
-      console.error('[FormFill] Save failed:', err);
+      console.error("[FormFill] Save failed:", err);
     } finally {
       savingRef.current = false;
       setSaving(false);
@@ -245,13 +227,13 @@ const FormFill = (_props: BaseToolProps) => {
   useEffect(() => {
     if (!isActive) return;
     const handleKeyDown = (e: KeyboardEvent) => {
-      if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+      if ((e.ctrlKey || e.metaKey) && e.key === "s") {
         e.preventDefault();
         if (isDirtyRef.current || flattenChangedRef.current) handleSave();
       }
     };
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
   }, [isActive, handleSave]);
 
   // Data loss prevention: warn on beforeunload if dirty
@@ -259,11 +241,11 @@ const FormFill = (_props: BaseToolProps) => {
     const handleBeforeUnload = (e: BeforeUnloadEvent) => {
       if (formState.isDirty) {
         e.preventDefault();
-        e.returnValue = '';
+        e.returnValue = "";
       }
     };
-    window.addEventListener('beforeunload', handleBeforeUnload);
-    return () => window.removeEventListener('beforeunload', handleBeforeUnload);
+    window.addEventListener("beforeunload", handleBeforeUnload);
+    return () => window.removeEventListener("beforeunload", handleBeforeUnload);
   }, [formState.isDirty]);
 
   const handleRefresh = useCallback(() => {
@@ -276,7 +258,7 @@ const FormFill = (_props: BaseToolProps) => {
     (fieldName: string, value: string) => {
       setValue(fieldName, value);
     },
-    [setValue]
+    [setValue],
   );
 
   const handleFieldClick = useCallback(
@@ -286,20 +268,19 @@ const FormFill = (_props: BaseToolProps) => {
         scrollActions.scrollToPage(pageIndex + 1);
       }
     },
-    [setActiveField, scrollActions]
+    [setActiveField, scrollActions],
   );
 
   // Progress tracking
   const fillableFields = useMemo(() => {
-    return formState.fields.filter((f) => f.type !== 'button' && f.type !== 'signature');
+    return formState.fields.filter((f) => f.type !== "button" && f.type !== "signature");
   }, [formState.fields]);
 
   // Memoize fillable fields grouped by page (signatures/buttons excluded)
   const { sortedPages, fieldsByPage } = useMemo(() => {
     const byPage = new Map<number, FormField[]>();
     for (const field of fillableFields) {
-      const pageIndex =
-        field.widgets && field.widgets.length > 0 ? field.widgets[0].pageIndex : 0;
+      const pageIndex = field.widgets && field.widgets.length > 0 ? field.widgets[0].pageIndex : 0;
       if (!byPage.has(pageIndex)) {
         byPage.set(pageIndex, []);
       }
@@ -314,7 +295,7 @@ const FormFill = (_props: BaseToolProps) => {
   const filledCount = useMemo(() => {
     return fillableFields.filter((f) => {
       const v = allValues[f.name];
-      return v && v !== 'Off' && v.trim() !== '';
+      return v && v !== "Off" && v.trim() !== "";
     }).length;
   }, [fillableFields, allValues]);
 
@@ -327,7 +308,7 @@ const FormFill = (_props: BaseToolProps) => {
   const filledRequiredCount = useMemo(() => {
     return requiredFields.filter((f) => {
       const v = allValues[f.name];
-      return v && v !== 'Off' && v.trim() !== '';
+      return v && v !== "Off" && v.trim() !== "";
     }).length;
   }, [requiredFields, allValues]);
 
@@ -368,14 +349,14 @@ const FormFill = (_props: BaseToolProps) => {
       {/* !currentModeDef.ready && <ComingSoonPlaceholder mode={currentModeDef} /> */}
 
       {/* ---- Fill Form content ---- */}
-      {mode === 'fill' && (
+      {mode === "fill" && (
         <>
           {/* Header / controls */}
           <div className={styles.header}>
             {/* Loading state */}
             {formState.loading && (
               <>
-                <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                <div style={{ display: "flex", alignItems: "center", gap: "0.5rem" }}>
                   <Loader size={14} />
                   <Text size="xs" c="dimmed">
                     Analysing form fields...
@@ -388,13 +369,7 @@ const FormFill = (_props: BaseToolProps) => {
 
             {/* Error state */}
             {formState.error && (
-              <Alert
-                icon={<WarningAmberIcon sx={{ fontSize: 16 }} />}
-                color="red"
-                variant="light"
-                p="xs"
-                radius="sm"
-              >
+              <Alert icon={<WarningAmberIcon sx={{ fontSize: 16 }} />} color="red" variant="light" p="xs" radius="sm">
                 <Text size="xs">{formState.error}</Text>
               </Alert>
             )}
@@ -408,23 +383,20 @@ const FormFill = (_props: BaseToolProps) => {
                     <span className={styles.progressLabel}>
                       {filledCount} / {fillableCount} filled
                       {requiredCount > 0 && (
-                        <span style={{ marginLeft: '0.5rem', opacity: 0.7 }}>
+                        <span style={{ marginLeft: "0.5rem", opacity: 0.7 }}>
                           ({filledRequiredCount}/{requiredCount} req.)
                         </span>
                       )}
                     </span>
                     <span className={styles.progressLabel}>
-                      {fillableCount > 0
-                        ? Math.round((filledCount / fillableCount) * 100)
-                        : 0}
-                      %
+                      {fillableCount > 0 ? Math.round((filledCount / fillableCount) * 100) : 0}%
                     </span>
                   </div>
                   <Progress
                     value={fillableCount > 0 ? (filledCount / fillableCount) * 100 : 0}
                     size={6}
                     radius="xl"
-                    color={filledRequiredCount === requiredCount ? 'teal' : 'blue'}
+                    color={filledRequiredCount === requiredCount ? "teal" : "blue"}
                     mt={4}
                   />
                 </div>
@@ -436,7 +408,7 @@ const FormFill = (_props: BaseToolProps) => {
                   onChange={(e) => setFlatten(e.currentTarget.checked)}
                   size="xs"
                   styles={{
-                    label: { fontSize: '0.75rem', cursor: 'pointer' },
+                    label: { fontSize: "0.75rem", cursor: "pointer" },
                   }}
                 />
 
@@ -454,12 +426,7 @@ const FormFill = (_props: BaseToolProps) => {
                     </Button>
 
                     <Tooltip label="Re-scan fields" withArrow position="bottom">
-                      <ActionIcon
-                        variant="light"
-                        size="md"
-                        onClick={handleRefresh}
-                        aria-label="Re-scan form fields"
-                      >
+                      <ActionIcon variant="light" size="md" onClick={handleRefresh} aria-label="Re-scan form fields">
                         <RefreshIcon sx={{ fontSize: 16 }} />
                       </ActionIcon>
                     </Tooltip>
@@ -514,9 +481,7 @@ const FormFill = (_props: BaseToolProps) => {
             {!formState.loading && formState.fields.length === 0 && !formState.error && (
               <div className={styles.emptyState}>
                 <DescriptionIcon className={styles.emptyStateIcon} />
-                <span className={styles.emptyStateText}>
-                  No fillable form fields found in this PDF.
-                </span>
+                <span className={styles.emptyStateText}>No fillable form fields found in this PDF.</span>
               </div>
             )}
           </div>
@@ -527,30 +492,22 @@ const FormFill = (_props: BaseToolProps) => {
               <div className={styles.fieldListInner}>
                 {sortedPages.map((pageIdx, i) => (
                   <React.Fragment key={pageIdx}>
-                    <div
-                      className={styles.pageDivider}
-                      style={i === 0 ? { marginTop: 0 } : undefined}
-                    >
-                      <Text className={styles.pageDividerLabel}>
-                        Page {pageIdx + 1}
-                      </Text>
+                    <div className={styles.pageDivider} style={i === 0 ? { marginTop: 0 } : undefined}>
+                      <Text className={styles.pageDividerLabel}>Page {pageIdx + 1}</Text>
                     </div>
 
                     {fieldsByPage.get(pageIdx)!.map((field) => {
                       const isFieldActive = formState.activeFieldName === field.name;
                       const hasError = !!validationErrors[field.name];
-                      const pageIndex =
-                        field.widgets && field.widgets.length > 0
-                          ? field.widgets[0].pageIndex
-                          : undefined;
+                      const pageIndex = field.widgets && field.widgets.length > 0 ? field.widgets[0].pageIndex : undefined;
 
                       return (
                         <div
                           key={field.name}
                           ref={isFieldActive ? activeFieldRef : undefined}
                           className={`${styles.fieldCard} ${
-                            isFieldActive ? styles.fieldCardActive : ''
-                          } ${hasError ? styles.fieldCardError : ''}`}
+                            isFieldActive ? styles.fieldCardActive : ""
+                          } ${hasError ? styles.fieldCardError : ""}`}
                           onClick={() => handleFieldClick(field.name, pageIndex)}
                         >
                           <div className={styles.fieldHeader}>
@@ -558,41 +515,24 @@ const FormFill = (_props: BaseToolProps) => {
                               className={styles.fieldTypeIcon}
                               style={{
                                 color: `var(--mantine-color-${FIELD_TYPE_COLOR[field.type]}-6)`,
-                                fontSize: '0.875rem',
+                                fontSize: "0.875rem",
                               }}
                             >
                               {FIELD_TYPE_ICON[field.type]}
                             </span>
-                            <span className={styles.fieldName}>
-                              {field.label || field.name}
-                            </span>
-                            {field.required && (
-                              <span className={styles.fieldRequired}>req</span>
-                            )}
+                            <span className={styles.fieldName}>{field.label || field.name}</span>
+                            {field.required && <span className={styles.fieldRequired}>req</span>}
                           </div>
 
-                          {field.type !== 'button' && field.type !== 'signature' && (
-                            <div
-                              className={styles.fieldInputWrap}
-                            >
-                              <FieldInput
-                                field={field}
-                                onValueChange={handleValueChange}
-                              />
+                          {field.type !== "button" && field.type !== "signature" && (
+                            <div className={styles.fieldInputWrap}>
+                              <FieldInput field={field} onValueChange={handleValueChange} />
                             </div>
                           )}
 
-                          {hasError && (
-                            <div className={styles.fieldError}>
-                              {validationErrors[field.name]}
-                            </div>
-                          )}
+                          {hasError && <div className={styles.fieldError}>{validationErrors[field.name]}</div>}
 
-                          {field.tooltip && (
-                            <div className={styles.fieldHint}>
-                              {field.tooltip}
-                            </div>
-                          )}
+                          {field.tooltip && <div className={styles.fieldHint}>{field.tooltip}</div>}
                         </div>
                       );
                     })}
@@ -607,7 +547,7 @@ const FormFill = (_props: BaseToolProps) => {
             <div className={styles.statusBar}>
               <span>
                 {(formState.isDirty || flattenChanged) && <span className={styles.unsavedDot} />}
-                {formState.isDirty || flattenChanged ? 'Unsaved changes' : 'All saved'}
+                {formState.isDirty || flattenChanged ? "Unsaved changes" : "All saved"}
               </span>
               <span>Ctrl+S to save</span>
             </div>
diff --git a/frontend/src/core/tools/formFill/FormFillContext.tsx b/frontend/src/core/tools/formFill/FormFillContext.tsx
index 6b03529274..c7177568be 100644
--- a/frontend/src/core/tools/formFill/FormFillContext.tsx
+++ b/frontend/src/core/tools/formFill/FormFillContext.tsx
@@ -28,13 +28,13 @@ import React, {
   useRef,
   useState,
   useSyncExternalStore,
-} from 'react';
-import { useDebouncedCallback } from '@mantine/hooks';
-import type { FormField, FormFillState, WidgetCoordinates } from '@app/tools/formFill/types';
-import type { IFormDataProvider } from '@app/tools/formFill/providers/types';
-import { PdfBoxFormProvider } from '@app/tools/formFill/providers/PdfBoxFormProvider';
-import { PdfiumFormProvider } from '@app/tools/formFill/providers/PdfiumFormProvider';
-import { fetchSignatureFieldsWithAppearances } from '@app/services/pdfiumService';
+} from "react";
+import { useDebouncedCallback } from "@mantine/hooks";
+import type { FormField, FormFillState, WidgetCoordinates } from "@app/tools/formFill/types";
+import type { IFormDataProvider } from "@app/tools/formFill/providers/types";
+import { PdfBoxFormProvider } from "@app/tools/formFill/providers/PdfBoxFormProvider";
+import { PdfiumFormProvider } from "@app/tools/formFill/providers/PdfiumFormProvider";
+import { fetchSignatureFieldsWithAppearances } from "@app/services/pdfiumService";
 
 // ---------------------------------------------------------------------------
 // FormValuesStore — external store for field values (outside React state)
@@ -66,7 +66,7 @@ class FormValuesStore {
   }
 
   getValue(fieldName: string): string {
-    return this._values[fieldName] ?? '';
+    return this._values[fieldName] ?? "";
   }
 
   setValue(fieldName: string, value: string): void {
@@ -112,15 +112,15 @@ class FormValuesStore {
 // ---------------------------------------------------------------------------
 
 type Action =
-  | { type: 'FETCH_START' }
-  | { type: 'FETCH_SUCCESS'; fields: FormField[] }
-  | { type: 'FETCH_ERROR'; error: string }
-  | { type: 'MARK_DIRTY' }
-  | { type: 'SET_ACTIVE_FIELD'; fieldName: string | null }
-  | { type: 'SET_VALIDATION_ERRORS'; errors: Record<string, string> }
-  | { type: 'CLEAR_VALIDATION_ERROR'; fieldName: string }
-  | { type: 'MARK_CLEAN' }
-  | { type: 'RESET' };
+  | { type: "FETCH_START" }
+  | { type: "FETCH_SUCCESS"; fields: FormField[] }
+  | { type: "FETCH_ERROR"; error: string }
+  | { type: "MARK_DIRTY" }
+  | { type: "SET_ACTIVE_FIELD"; fieldName: string | null }
+  | { type: "SET_VALIDATION_ERRORS"; errors: Record<string, string> }
+  | { type: "CLEAR_VALIDATION_ERROR"; fieldName: string }
+  | { type: "MARK_CLEAN" }
+  | { type: "RESET" };
 
 const initialState: FormFillState = {
   fields: [],
@@ -134,9 +134,9 @@ const initialState: FormFillState = {
 
 function reducer(state: FormFillState, action: Action): FormFillState {
   switch (action.type) {
-    case 'FETCH_START':
+    case "FETCH_START":
       return { ...state, loading: true, error: null };
-    case 'FETCH_SUCCESS': {
+    case "FETCH_SUCCESS": {
       return {
         ...state,
         fields: action.fields,
@@ -146,23 +146,23 @@ function reducer(state: FormFillState, action: Action): FormFillState {
         isDirty: false,
       };
     }
-    case 'FETCH_ERROR':
+    case "FETCH_ERROR":
       return { ...state, loading: false, error: action.error };
-    case 'MARK_DIRTY':
+    case "MARK_DIRTY":
       if (state.isDirty) return state; // avoid unnecessary re-render
       return { ...state, isDirty: true };
-    case 'SET_ACTIVE_FIELD':
+    case "SET_ACTIVE_FIELD":
       return { ...state, activeFieldName: action.fieldName };
-    case 'SET_VALIDATION_ERRORS':
+    case "SET_VALIDATION_ERRORS":
       return { ...state, validationErrors: action.errors };
-    case 'CLEAR_VALIDATION_ERROR': {
+    case "CLEAR_VALIDATION_ERROR": {
       if (!state.validationErrors[action.fieldName]) return state;
       const { [action.fieldName]: _, ...rest } = state.validationErrors;
       return { ...state, validationErrors: rest };
     }
-    case 'MARK_CLEAN':
+    case "MARK_CLEAN":
       return { ...state, isDirty: false };
-    case 'RESET':
+    case "RESET":
       return initialState;
     default:
       return state;
@@ -178,10 +178,7 @@ export interface FormFillContextValue {
   /** Set the currently focused field */
   setActiveField: (fieldName: string | null) => void;
   /** Submit filled form and return the filled PDF blob */
-  submitForm: (
-    file: File | Blob,
-    flatten?: boolean
-  ) => Promise<Blob>;
+  submitForm: (file: File | Blob, flatten?: boolean) => Promise<Blob>;
   /** Get field by name */
   getField: (fieldName: string) => FormField | undefined;
   /** Get fields for a specific page index */
@@ -201,7 +198,7 @@ export interface FormFillContextValue {
    * Use 'pdflib' for frontend-only pdf-lib, 'pdfbox' for backend PDFBox.
    * Resets form state when switching providers.
    */
-  setProviderMode: (mode: 'pdflib' | 'pdfbox') => void;
+  setProviderMode: (mode: "pdflib" | "pdfbox") => void;
   /** The file ID that the current form fields belong to (null if no fields loaded) */
   forFileId: string | null;
 }
@@ -217,7 +214,7 @@ const FormValuesStoreContext = createContext<FormValuesStore | null>(null);
 export const useFormFill = (): FormFillContextValue => {
   const ctx = useContext(FormFillContext);
   if (!ctx) {
-    throw new Error('useFormFill must be used within a FormFillProvider');
+    throw new Error("useFormFill must be used within a FormFillProvider");
   }
   return ctx;
 };
@@ -231,17 +228,11 @@ export const useFormFill = (): FormFillContextValue => {
 export function useFieldValue(fieldName: string): string {
   const store = useContext(FormValuesStoreContext);
   if (!store) {
-    throw new Error('useFieldValue must be used within a FormFillProvider');
+    throw new Error("useFieldValue must be used within a FormFillProvider");
   }
 
-  const subscribe = useCallback(
-    (cb: () => void) => store.subscribeField(fieldName, cb),
-    [store, fieldName]
-  );
-  const getSnapshot = useCallback(
-    () => store.getValue(fieldName),
-    [store, fieldName]
-  );
+  const subscribe = useCallback((cb: () => void) => store.subscribeField(fieldName, cb), [store, fieldName]);
+  const getSnapshot = useCallback(() => store.getValue(fieldName), [store, fieldName]);
 
   return useSyncExternalStore(subscribe, getSnapshot);
 }
@@ -253,17 +244,11 @@ export function useFieldValue(fieldName: string): string {
 export function useAllFormValues(): Record<string, string> {
   const store = useContext(FormValuesStoreContext);
   if (!store) {
-    throw new Error('useAllFormValues must be used within a FormFillProvider');
+    throw new Error("useAllFormValues must be used within a FormFillProvider");
   }
 
-  const subscribe = useCallback(
-    (cb: () => void) => store.subscribeGlobal(cb),
-    [store]
-  );
-  const getSnapshot = useCallback(
-    () => store.values,
-    [store]
-  );
+  const subscribe = useCallback((cb: () => void) => store.subscribeGlobal(cb), [store]);
+  const getSnapshot = useCallback(() => store.values, [store]);
 
   return useSyncExternalStore(subscribe, getSnapshot);
 }
@@ -280,11 +265,11 @@ export function FormFillProvider({
   /** Override the initial provider. If not given, defaults to pdf-lib. */
   provider?: IFormDataProvider;
 }) {
-  const initialMode = providerProp?.name === 'pdfbox' ? 'pdfbox' : 'pdflib';
-  const [providerMode, setProviderModeState] = useState<'pdflib' | 'pdfbox'>(initialMode);
-  const providerModeRef = useRef(initialMode as 'pdflib' | 'pdfbox');
+  const initialMode = providerProp?.name === "pdfbox" ? "pdfbox" : "pdflib";
+  const [providerMode, setProviderModeState] = useState<"pdflib" | "pdfbox">(initialMode);
+  const providerModeRef = useRef(initialMode as "pdflib" | "pdfbox");
   providerModeRef.current = providerMode;
-  const provider = providerProp ?? (providerMode === 'pdfbox' ? pdfBoxProvider : pdfiumProvider);
+  const provider = providerProp ?? (providerMode === "pdfbox" ? pdfBoxProvider : pdfiumProvider);
   const providerRef = useRef(provider);
   providerRef.current = provider;
 
@@ -304,76 +289,76 @@ export function FormFillProvider({
   // This prevents full context re-renders on every keystroke.
   const [valuesStore] = useState(() => new FormValuesStore());
 
-  const fetchFields = useCallback(async (file: File | Blob, fileId?: string) => {
-    // Increment version so any in-flight fetch for a previous file is discarded.
-    // NOTE: setProviderMode() also increments fetchVersionRef to invalidate
-    // in-flight fetches when switching providers. This is intentional — the
-    // fetch started here captures the NEW version, so stale results are
-    // correctly discarded.
-    const version = ++fetchVersionRef.current;
+  const fetchFields = useCallback(
+    async (file: File | Blob, fileId?: string) => {
+      // Increment version so any in-flight fetch for a previous file is discarded.
+      // NOTE: setProviderMode() also increments fetchVersionRef to invalidate
+      // in-flight fetches when switching providers. This is intentional — the
+      // fetch started here captures the NEW version, so stale results are
+      // correctly discarded.
+      const version = ++fetchVersionRef.current;
 
-    // Immediately clear previous state so FormFieldOverlay's stale-file guards
-    // prevent rendering fields from a previous document during the fetch.
-    forFileIdRef.current = null;
-    setForFileId(null);
-    valuesStore.reset({});
-    dispatch({ type: 'RESET' });
-    dispatch({ type: 'FETCH_START' });
-    try {
-      let fields = await providerRef.current.fetchFields(file);
-      // If another fetch or reset happened while we were waiting, discard this result
-      if (fetchVersionRef.current !== version) {
-        console.debug('[FormFill] Discarding stale fetch result (version mismatch)');
-        return;
-      }
-
-      // When the pdfbox provider is active the backend doesn't return signature fields
-      // (they're not fillable). Fetch them via pdflib so their appearances still render.
-      if (providerModeRef.current === 'pdfbox') {
-        try {
-          // Convert File/Blob to ArrayBuffer for pdfiumService
-          const arrayBuffer = await file.arrayBuffer();
-          const sigFields = await fetchSignatureFieldsWithAppearances(arrayBuffer);
-          if (fetchVersionRef.current !== version) return; // stale check after async
-          if (sigFields.length > 0) {
-            fields = [...fields, ...sigFields];
-          }
-        } catch (e) {
-          console.warn('[FormFill] Failed to extract signature appearances for pdfbox mode:', e);
+      // Immediately clear previous state so FormFieldOverlay's stale-file guards
+      // prevent rendering fields from a previous document during the fetch.
+      forFileIdRef.current = null;
+      setForFileId(null);
+      valuesStore.reset({});
+      dispatch({ type: "RESET" });
+      dispatch({ type: "FETCH_START" });
+      try {
+        let fields = await providerRef.current.fetchFields(file);
+        // If another fetch or reset happened while we were waiting, discard this result
+        if (fetchVersionRef.current !== version) {
+          console.debug("[FormFill] Discarding stale fetch result (version mismatch)");
+          return;
         }
-      }
 
-      // Initialise values in the external store
-      const values: Record<string, string> = {};
-      for (const field of fields) {
-        values[field.name] = field.value ?? '';
+        // When the pdfbox provider is active the backend doesn't return signature fields
+        // (they're not fillable). Fetch them via pdflib so their appearances still render.
+        if (providerModeRef.current === "pdfbox") {
+          try {
+            // Convert File/Blob to ArrayBuffer for pdfiumService
+            const arrayBuffer = await file.arrayBuffer();
+            const sigFields = await fetchSignatureFieldsWithAppearances(arrayBuffer);
+            if (fetchVersionRef.current !== version) return; // stale check after async
+            if (sigFields.length > 0) {
+              fields = [...fields, ...sigFields];
+            }
+          } catch (e) {
+            console.warn("[FormFill] Failed to extract signature appearances for pdfbox mode:", e);
+          }
+        }
+
+        // Initialise values in the external store
+        const values: Record<string, string> = {};
+        for (const field of fields) {
+          values[field.name] = field.value ?? "";
+        }
+        valuesStore.reset(values);
+        forFileIdRef.current = fileId ?? null;
+        setForFileId(fileId ?? null);
+        dispatch({ type: "FETCH_SUCCESS", fields });
+      } catch (err: any) {
+        if (fetchVersionRef.current !== version) return; // stale
+        const msg = err?.response?.data?.message || err?.message || "Failed to fetch form fields";
+        dispatch({ type: "FETCH_ERROR", error: msg });
       }
-      valuesStore.reset(values);
-      forFileIdRef.current = fileId ?? null;
-      setForFileId(fileId ?? null);
-      dispatch({ type: 'FETCH_SUCCESS', fields });
-    } catch (err: any) {
-      if (fetchVersionRef.current !== version) return; // stale
-      const msg =
-        err?.response?.data?.message ||
-        err?.message ||
-        'Failed to fetch form fields';
-      dispatch({ type: 'FETCH_ERROR', error: msg });
-    }
-  }, [valuesStore]);
+    },
+    [valuesStore],
+  );
 
   const validateFieldDebounced = useDebouncedCallback((fieldName: string) => {
     const field = fieldsRef.current.find((f) => f.name === fieldName);
     if (!field || !field.required) return;
 
     const val = valuesStore.getValue(fieldName);
-    if (!val || val.trim() === '' || val === 'Off') {
+    if (!val || val.trim() === "" || val === "Off") {
       dispatch({
-        type: 'SET_VALIDATION_ERRORS',
+        type: "SET_VALIDATION_ERRORS",
         errors: { ...state.validationErrors, [fieldName]: `${field.label} is required` },
       });
     } else {
-      dispatch({ type: 'CLEAR_VALIDATION_ERROR', fieldName });
+      dispatch({ type: "CLEAR_VALIDATION_ERROR", fieldName });
     }
   }, 300);
 
@@ -381,11 +366,11 @@ export function FormFillProvider({
     const errors: Record<string, string> = {};
     for (const field of fieldsRef.current) {
       const val = valuesStore.getValue(field.name);
-      if (field.required && (!val || val.trim() === '' || val === 'Off')) {
+      if (field.required && (!val || val.trim() === "" || val === "Off")) {
         errors[field.name] = `${field.label} is required`;
       }
     }
-    dispatch({ type: 'SET_VALIDATION_ERRORS', errors });
+    dispatch({ type: "SET_VALIDATION_ERRORS", errors });
     return Object.keys(errors).length === 0;
   }, [valuesStore]);
 
@@ -394,36 +379,33 @@ export function FormFillProvider({
       // Update external store (triggers per-field subscribers only)
       valuesStore.setValue(fieldName, value);
       // Mark form as dirty in React state (only triggers re-render once)
-      dispatch({ type: 'MARK_DIRTY' });
+      dispatch({ type: "MARK_DIRTY" });
       validateFieldDebounced(fieldName);
     },
-    [valuesStore, validateFieldDebounced]
+    [valuesStore, validateFieldDebounced],
   );
 
-  const setActiveField = useCallback(
-    (fieldName: string | null) => {
-      dispatch({ type: 'SET_ACTIVE_FIELD', fieldName });
-    },
-    []
-  );
+  const setActiveField = useCallback((fieldName: string | null) => {
+    dispatch({ type: "SET_ACTIVE_FIELD", fieldName });
+  }, []);
 
   const submitForm = useCallback(
     async (file: File | Blob, flatten = false) => {
       const blob = await providerRef.current.fillForm(file, valuesStore.values, flatten);
-      dispatch({ type: 'MARK_CLEAN' });
+      dispatch({ type: "MARK_CLEAN" });
       return blob;
     },
-    [valuesStore]
+    [valuesStore],
   );
 
   const setProviderMode = useCallback(
-    (mode: 'pdflib' | 'pdfbox') => {
+    (mode: "pdflib" | "pdfbox") => {
       // Use the ref to check the current mode synchronously — avoids
       // relying on stale closure state and allows the early return.
       if (providerModeRef.current === mode) return;
 
       // provider (pdfbox vs pdflib).
-      const newProvider = mode === 'pdfbox' ? pdfBoxProvider : pdfiumProvider;
+      const newProvider = mode === "pdfbox" ? pdfBoxProvider : pdfiumProvider;
       providerRef.current = newProvider;
       providerModeRef.current = mode;
 
@@ -431,31 +413,22 @@ export function FormFillProvider({
       forFileIdRef.current = null;
       setForFileId(null);
       valuesStore.reset({});
-      dispatch({ type: 'RESET' });
+      dispatch({ type: "RESET" });
 
       setProviderModeState(mode);
     },
-    [valuesStore]
+    [valuesStore],
   );
 
-  const getField = useCallback(
-    (fieldName: string) =>
-      fieldsRef.current.find((f) => f.name === fieldName),
-    []
-  );
+  const getField = useCallback((fieldName: string) => fieldsRef.current.find((f) => f.name === fieldName), []);
 
   const getFieldsForPage = useCallback(
     (pageIndex: number) =>
-      fieldsRef.current.filter((f) =>
-        f.widgets?.some((w: WidgetCoordinates) => w.pageIndex === pageIndex)
-      ),
-    []
+      fieldsRef.current.filter((f) => f.widgets?.some((w: WidgetCoordinates) => w.pageIndex === pageIndex)),
+    [],
   );
 
-  const getValue = useCallback(
-    (fieldName: string) => valuesStore.getValue(fieldName),
-    [valuesStore]
-  );
+  const getValue = useCallback((fieldName: string) => valuesStore.getValue(fieldName), [valuesStore]);
 
   const reset = useCallback(() => {
     // Increment version to invalidate any in-flight fetch
@@ -463,7 +436,7 @@ export function FormFillProvider({
     forFileIdRef.current = null;
     setForFileId(null);
     valuesStore.reset({});
-    dispatch({ type: 'RESET' });
+    dispatch({ type: "RESET" });
   }, [valuesStore]);
 
   const fieldsByPage = useMemo(() => {
@@ -510,14 +483,12 @@ export function FormFillProvider({
       providerMode,
       setProviderMode,
       forFileId,
-    ]
+    ],
   );
 
   return (
     <FormValuesStoreContext.Provider value={valuesStore}>
-      <FormFillContext.Provider value={value}>
-        {children}
-      </FormFillContext.Provider>
+      <FormFillContext.Provider value={value}>{children}</FormFillContext.Provider>
     </FormValuesStoreContext.Provider>
   );
 }
diff --git a/frontend/src/core/tools/formFill/FormSaveBar.tsx b/frontend/src/core/tools/formFill/FormSaveBar.tsx
index 676b1b009f..9a4c354b10 100644
--- a/frontend/src/core/tools/formFill/FormSaveBar.tsx
+++ b/frontend/src/core/tools/formFill/FormSaveBar.tsx
@@ -9,13 +9,13 @@
  * the dedicated FormFill tool panel is NOT active. It provides a clean
  * save UX that users expect from browser PDF viewers.
  */
-import React, { useCallback, useState } from 'react';
-import { Stack, Group, Text, Button, Transition, CloseButton, Paper, Badge } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import DownloadIcon from '@mui/icons-material/Download';
-import SaveIcon from '@mui/icons-material/Save';
-import EditNoteIcon from '@mui/icons-material/EditNote';
-import { useFormFill } from '@app/tools/formFill/FormFillContext';
+import React, { useCallback, useState } from "react";
+import { Stack, Group, Text, Button, Transition, CloseButton, Paper, Badge } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import DownloadIcon from "@mui/icons-material/Download";
+import SaveIcon from "@mui/icons-material/Save";
+import EditNoteIcon from "@mui/icons-material/EditNote";
+import { useFormFill } from "@app/tools/formFill/FormFillContext";
 
 interface FormSaveBarProps {
   /** The current file being viewed */
@@ -53,7 +53,7 @@ export function FormSaveBar({ file, isFormFillToolActive, onApply }: FormSaveBar
         await onApply(filledBlob);
       }
     } catch (err) {
-      console.error('[FormSaveBar] Apply failed:', err);
+      console.error("[FormSaveBar] Apply failed:", err);
     } finally {
       setApplying(false);
     }
@@ -66,15 +66,15 @@ export function FormSaveBar({ file, isFormFillToolActive, onApply }: FormSaveBar
       const blob = await submitForm(file, false);
       // Trigger browser download
       const url = URL.createObjectURL(blob);
-      const a = document.createElement('a');
+      const a = document.createElement("a");
       a.href = url;
-      a.download = file instanceof File ? file.name : 'filled-form.pdf';
+      a.download = file instanceof File ? file.name : "filled-form.pdf";
       document.body.appendChild(a);
       a.click();
       document.body.removeChild(a);
       URL.revokeObjectURL(url);
     } catch (err) {
-      console.error('[FormSaveBar] Download failed:', err);
+      console.error("[FormSaveBar] Download failed:", err);
     } finally {
       setSaving(false);
     }
@@ -85,7 +85,7 @@ export function FormSaveBar({ file, isFormFillToolActive, onApply }: FormSaveBar
   // - no form fields found
   // - still loading
   // - user dismissed the bar
-  const hasFields = fields.some(f => f.type !== 'signature' && f.type !== 'button');
+  const hasFields = fields.some((f) => f.type !== "signature" && f.type !== "button");
   const visible = !isFormFillToolActive && hasFields && !loading && !dismissed;
 
   return (
@@ -94,11 +94,11 @@ export function FormSaveBar({ file, isFormFillToolActive, onApply }: FormSaveBar
         <div
           style={{
             ...styles,
-            position: 'absolute',
-            top: '1rem',
-            right: '1rem',
+            position: "absolute",
+            top: "1rem",
+            right: "1rem",
             zIndex: 100,
-            pointerEvents: 'none',
+            pointerEvents: "none",
           }}
         >
           <Paper
@@ -106,10 +106,10 @@ export function FormSaveBar({ file, isFormFillToolActive, onApply }: FormSaveBar
             radius="md"
             withBorder
             style={{
-              pointerEvents: 'auto',
-              minWidth: '320px',
-              maxWidth: '420px',
-              overflow: 'hidden',
+              pointerEvents: "auto",
+              minWidth: "320px",
+              maxWidth: "420px",
+              overflow: "hidden",
             }}
           >
             <Stack gap="xs" p="md">
@@ -118,24 +118,24 @@ export function FormSaveBar({ file, isFormFillToolActive, onApply }: FormSaveBar
                   <EditNoteIcon
                     sx={{
                       fontSize: 24,
-                      color: isDirty ? 'var(--mantine-color-blue-6)' : 'var(--mantine-color-gray-6)'
+                      color: isDirty ? "var(--mantine-color-blue-6)" : "var(--mantine-color-gray-6)",
                     }}
                   />
                   <div>
                     <Group gap="xs">
                       <Text size="sm" fw={600}>
-                        {t('viewer.formBar.title', 'Form Fields')}
+                        {t("viewer.formBar.title", "Form Fields")}
                       </Text>
                       {isDirty && (
                         <Badge size="xs" color="blue" variant="light">
-                          {t('viewer.formBar.unsavedBadge', 'Unsaved')}
+                          {t("viewer.formBar.unsavedBadge", "Unsaved")}
                         </Badge>
                       )}
                     </Group>
                     <Text size="xs" c="dimmed" mt={2}>
                       {isDirty
-                        ? t('viewer.formBar.unsavedDesc', 'You have unsaved changes')
-                        : t('viewer.formBar.hasFieldsDesc', 'This PDF contains fillable fields')}
+                        ? t("viewer.formBar.unsavedDesc", "You have unsaved changes")
+                        : t("viewer.formBar.hasFieldsDesc", "This PDF contains fillable fields")}
                     </Text>
                   </div>
                 </Group>
@@ -143,7 +143,7 @@ export function FormSaveBar({ file, isFormFillToolActive, onApply }: FormSaveBar
                   size="sm"
                   variant="subtle"
                   onClick={() => setDismissed(true)}
-                  aria-label={t('viewer.formBar.dismiss', 'Dismiss')}
+                  aria-label={t("viewer.formBar.dismiss", "Dismiss")}
                 />
               </Group>
 
@@ -159,7 +159,7 @@ export function FormSaveBar({ file, isFormFillToolActive, onApply }: FormSaveBar
                     onClick={handleApply}
                     flex={1}
                   >
-                    {t('viewer.formBar.apply', 'Apply Changes')}
+                    {t("viewer.formBar.apply", "Apply Changes")}
                   </Button>
                   <Button
                     size="sm"
@@ -171,7 +171,7 @@ export function FormSaveBar({ file, isFormFillToolActive, onApply }: FormSaveBar
                     onClick={handleDownload}
                     flex={1}
                   >
-                    {t('viewer.formBar.download', 'Download PDF')}
+                    {t("viewer.formBar.download", "Download PDF")}
                   </Button>
                 </Group>
               )}
diff --git a/frontend/src/core/tools/formFill/fieldMeta.tsx b/frontend/src/core/tools/formFill/fieldMeta.tsx
index e205b76e93..65daef37fa 100644
--- a/frontend/src/core/tools/formFill/fieldMeta.tsx
+++ b/frontend/src/core/tools/formFill/fieldMeta.tsx
@@ -2,31 +2,31 @@
  * Shared field type metadata: icons and color mappings.
  * Used by FormFill, FormFieldSidebar, and any future form tools.
  */
-import React from 'react';
-import type { FormFieldType } from '@app/tools/formFill/types';
-import TextFieldsIcon from '@mui/icons-material/TextFields';
-import CheckBoxIcon from '@mui/icons-material/CheckBox';
-import ArrowDropDownCircleIcon from '@mui/icons-material/ArrowDropDownCircle';
-import RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked';
-import ListIcon from '@mui/icons-material/List';
-import DrawIcon from '@mui/icons-material/Draw';
+import React from "react";
+import type { FormFieldType } from "@app/tools/formFill/types";
+import TextFieldsIcon from "@mui/icons-material/TextFields";
+import CheckBoxIcon from "@mui/icons-material/CheckBox";
+import ArrowDropDownCircleIcon from "@mui/icons-material/ArrowDropDownCircle";
+import RadioButtonCheckedIcon from "@mui/icons-material/RadioButtonChecked";
+import ListIcon from "@mui/icons-material/List";
+import DrawIcon from "@mui/icons-material/Draw";
 
 export const FIELD_TYPE_ICON: Record<FormFieldType, React.ReactNode> = {
-  text: <TextFieldsIcon sx={{ fontSize: 'inherit' }} />,
-  checkbox: <CheckBoxIcon sx={{ fontSize: 'inherit' }} />,
-  combobox: <ArrowDropDownCircleIcon sx={{ fontSize: 'inherit' }} />,
-  listbox: <ListIcon sx={{ fontSize: 'inherit' }} />,
-  radio: <RadioButtonCheckedIcon sx={{ fontSize: 'inherit' }} />,
-  button: <DrawIcon sx={{ fontSize: 'inherit' }} />,
-  signature: <DrawIcon sx={{ fontSize: 'inherit' }} />,
+  text: <TextFieldsIcon sx={{ fontSize: "inherit" }} />,
+  checkbox: <CheckBoxIcon sx={{ fontSize: "inherit" }} />,
+  combobox: <ArrowDropDownCircleIcon sx={{ fontSize: "inherit" }} />,
+  listbox: <ListIcon sx={{ fontSize: "inherit" }} />,
+  radio: <RadioButtonCheckedIcon sx={{ fontSize: "inherit" }} />,
+  button: <DrawIcon sx={{ fontSize: "inherit" }} />,
+  signature: <DrawIcon sx={{ fontSize: "inherit" }} />,
 };
 
 export const FIELD_TYPE_COLOR: Record<FormFieldType, string> = {
-  text: 'blue',
-  checkbox: 'green',
-  combobox: 'violet',
-  listbox: 'cyan',
-  radio: 'orange',
-  button: 'gray',
-  signature: 'pink',
+  text: "blue",
+  checkbox: "green",
+  combobox: "violet",
+  listbox: "cyan",
+  radio: "orange",
+  button: "gray",
+  signature: "pink",
 };
diff --git a/frontend/src/core/tools/formFill/formApi.ts b/frontend/src/core/tools/formFill/formApi.ts
index 8c40e682d0..27dd8aacd4 100644
--- a/frontend/src/core/tools/formFill/formApi.ts
+++ b/frontend/src/core/tools/formFill/formApi.ts
@@ -1,23 +1,18 @@
 /**
  * API service for form-related backend calls.
  */
-import apiClient from '@app/services/apiClient';
-import type { FormField } from '@app/tools/formFill/types';
+import apiClient from "@app/services/apiClient";
+import type { FormField } from "@app/tools/formFill/types";
 
 /**
  * Fetch form fields with coordinates from the backend.
  * Calls POST /api/v1/form/fields-with-coordinates
  */
-export async function fetchFormFieldsWithCoordinates(
-  file: File | Blob
-): Promise<FormField[]> {
+export async function fetchFormFieldsWithCoordinates(file: File | Blob): Promise<FormField[]> {
   const formData = new FormData();
-  formData.append('file', file);
+  formData.append("file", file);
 
-  const response = await apiClient.post<FormField[]>(
-    '/api/v1/form/fields-with-coordinates',
-    formData
-  );
+  const response = await apiClient.post<FormField[]>("/api/v1/form/fields-with-coordinates", formData);
   return response.data;
 }
 
@@ -28,18 +23,15 @@ export async function fetchFormFieldsWithCoordinates(
 export async function fillFormFields(
   file: File | Blob,
   values: Record<string, string>,
-  flatten: boolean = false
+  flatten: boolean = false,
 ): Promise<Blob> {
   const formData = new FormData();
-  formData.append('file', file);
-  formData.append(
-    'data',
-    new Blob([JSON.stringify(values)], { type: 'application/json' })
-  );
-  formData.append('flatten', String(flatten));
+  formData.append("file", file);
+  formData.append("data", new Blob([JSON.stringify(values)], { type: "application/json" }));
+  formData.append("flatten", String(flatten));
 
-  const response = await apiClient.post('/api/v1/form/fill', formData, {
-    responseType: 'blob',
+  const response = await apiClient.post("/api/v1/form/fill", formData, {
+    responseType: "blob",
   });
   return response.data;
 }
@@ -48,21 +40,15 @@ export async function fillFormFields(
  * Extract form fields as CSV.
  * Calls POST /api/v1/form/extract-csv
  */
-export async function extractFormFieldsCsv(
-  file: File | Blob,
-  values?: Record<string, string>
-): Promise<Blob> {
+export async function extractFormFieldsCsv(file: File | Blob, values?: Record<string, string>): Promise<Blob> {
   const formData = new FormData();
-  formData.append('file', file);
+  formData.append("file", file);
   if (values) {
-    formData.append(
-      'data',
-      new Blob([JSON.stringify(values)], { type: 'application/json' })
-    );
+    formData.append("data", new Blob([JSON.stringify(values)], { type: "application/json" }));
   }
 
-  const response = await apiClient.post('/api/v1/form/extract-csv', formData, {
-    responseType: 'blob',
+  const response = await apiClient.post("/api/v1/form/extract-csv", formData, {
+    responseType: "blob",
   });
   return response.data;
 }
@@ -71,22 +57,15 @@ export async function extractFormFieldsCsv(
  * Extract form fields as XLSX.
  * Calls POST /api/v1/form/extract-xlsx
  */
-export async function extractFormFieldsXlsx(
-  file: File | Blob,
-  values?: Record<string, string>
-): Promise<Blob> {
+export async function extractFormFieldsXlsx(file: File | Blob, values?: Record<string, string>): Promise<Blob> {
   const formData = new FormData();
-  formData.append('file', file);
+  formData.append("file", file);
   if (values) {
-    formData.append(
-      'data',
-      new Blob([JSON.stringify(values)], { type: 'application/json' })
-    );
+    formData.append("data", new Blob([JSON.stringify(values)], { type: "application/json" }));
   }
 
-  const response = await apiClient.post('/api/v1/form/extract-xlsx', formData, {
-    responseType: 'blob',
+  const response = await apiClient.post("/api/v1/form/extract-xlsx", formData, {
+    responseType: "blob",
   });
   return response.data;
 }
-
diff --git a/frontend/src/core/tools/formFill/index.ts b/frontend/src/core/tools/formFill/index.ts
index 1b71f393c0..a52b899192 100644
--- a/frontend/src/core/tools/formFill/index.ts
+++ b/frontend/src/core/tools/formFill/index.ts
@@ -1,11 +1,11 @@
-export { FormFillProvider, useFormFill, useFieldValue, useAllFormValues } from '@app/tools/formFill/FormFillContext';
-export { FormFieldSidebar } from '@app/tools/formFill/FormFieldSidebar';
-export { FormFieldOverlay } from '@app/tools/formFill/FormFieldOverlay';
-export { FormSaveBar } from '@app/tools/formFill/FormSaveBar';
-export { default as FormFill } from '@app/tools/formFill/FormFill';
-export { FieldInput } from '@app/tools/formFill/FieldInput';
-export { FIELD_TYPE_ICON, FIELD_TYPE_COLOR } from '@app/tools/formFill/fieldMeta';
-export type { FormField, FormFieldType, FormFillState, WidgetCoordinates } from '@app/tools/formFill/types';
-export type { IFormDataProvider } from '@app/tools/formFill/providers/types';
-export { PdfiumFormProvider } from '@app/tools/formFill/providers/PdfiumFormProvider';
-export { PdfBoxFormProvider } from '@app/tools/formFill/providers/PdfBoxFormProvider';
+export { FormFillProvider, useFormFill, useFieldValue, useAllFormValues } from "@app/tools/formFill/FormFillContext";
+export { FormFieldSidebar } from "@app/tools/formFill/FormFieldSidebar";
+export { FormFieldOverlay } from "@app/tools/formFill/FormFieldOverlay";
+export { FormSaveBar } from "@app/tools/formFill/FormSaveBar";
+export { default as FormFill } from "@app/tools/formFill/FormFill";
+export { FieldInput } from "@app/tools/formFill/FieldInput";
+export { FIELD_TYPE_ICON, FIELD_TYPE_COLOR } from "@app/tools/formFill/fieldMeta";
+export type { FormField, FormFieldType, FormFillState, WidgetCoordinates } from "@app/tools/formFill/types";
+export type { IFormDataProvider } from "@app/tools/formFill/providers/types";
+export { PdfiumFormProvider } from "@app/tools/formFill/providers/PdfiumFormProvider";
+export { PdfBoxFormProvider } from "@app/tools/formFill/providers/PdfBoxFormProvider";
diff --git a/frontend/src/core/tools/formFill/providers/PdfBoxFormProvider.ts b/frontend/src/core/tools/formFill/providers/PdfBoxFormProvider.ts
index a2329a48bf..b93a5c42ae 100644
--- a/frontend/src/core/tools/formFill/providers/PdfBoxFormProvider.ts
+++ b/frontend/src/core/tools/formFill/providers/PdfBoxFormProvider.ts
@@ -8,25 +8,18 @@
  *
  * Used in the dedicated formFill tool mode.
  */
-import type { FormField } from '@app/tools/formFill/types';
-import type { IFormDataProvider } from '@app/tools/formFill/providers/types';
-import {
-  fetchFormFieldsWithCoordinates,
-  fillFormFields,
-} from '@app/tools/formFill/formApi';
+import type { FormField } from "@app/tools/formFill/types";
+import type { IFormDataProvider } from "@app/tools/formFill/providers/types";
+import { fetchFormFieldsWithCoordinates, fillFormFields } from "@app/tools/formFill/formApi";
 
 export class PdfBoxFormProvider implements IFormDataProvider {
-  readonly name = 'pdfbox';
+  readonly name = "pdfbox";
 
   async fetchFields(file: File | Blob): Promise<FormField[]> {
     return fetchFormFieldsWithCoordinates(file);
   }
 
-  async fillForm(
-    file: File | Blob,
-    values: Record<string, string>,
-    flatten: boolean,
-  ): Promise<Blob> {
+  async fillForm(file: File | Blob, values: Record<string, string>, flatten: boolean): Promise<Blob> {
     return fillFormFields(file, values, flatten);
   }
 }
diff --git a/frontend/src/core/tools/formFill/providers/PdfiumFormProvider.ts b/frontend/src/core/tools/formFill/providers/PdfiumFormProvider.ts
index a951d25347..c955ac4c29 100644
--- a/frontend/src/core/tools/formFill/providers/PdfiumFormProvider.ts
+++ b/frontend/src/core/tools/formFill/providers/PdfiumFormProvider.ts
@@ -13,10 +13,10 @@
  * FormUtils.createWidgetCoordinates() does, so the same overlay code works
  * for both providers.
  */
-import { PDF_FORM_FIELD_TYPE } from '@app/services/pdfiumService';
-import { FPDF_ANNOT_WIDGET, FLAT_PRINT } from '@app/utils/pdfiumBitmapUtils';
-import type { FormField, FormFieldType, WidgetCoordinates, ButtonAction } from '@app/tools/formFill/types';
-import type { IFormDataProvider } from '@app/tools/formFill/providers/types';
+import { PDF_FORM_FIELD_TYPE } from "@app/services/pdfiumService";
+import { FPDF_ANNOT_WIDGET, FLAT_PRINT } from "@app/utils/pdfiumBitmapUtils";
+import type { FormField, FormFieldType, WidgetCoordinates, ButtonAction } from "@app/tools/formFill/types";
+import type { IFormDataProvider } from "@app/tools/formFill/providers/types";
 import {
   closeDocAndFreeBuffer,
   extractFormFields,
@@ -25,7 +25,7 @@ import {
   readUtf16,
   saveRawDocument,
   type PdfiumFormField,
-} from '@app/services/pdfiumService';
+} from "@app/services/pdfiumService";
 
 /**
  * Map PDFium form field type enum to our FormFieldType string.
@@ -33,21 +33,21 @@ import {
 function mapFieldType(t: PDF_FORM_FIELD_TYPE): FormFieldType {
   switch (t) {
     case PDF_FORM_FIELD_TYPE.TEXTFIELD:
-      return 'text';
+      return "text";
     case PDF_FORM_FIELD_TYPE.CHECKBOX:
-      return 'checkbox';
+      return "checkbox";
     case PDF_FORM_FIELD_TYPE.COMBOBOX:
-      return 'combobox';
+      return "combobox";
     case PDF_FORM_FIELD_TYPE.RADIOBUTTON:
-      return 'radio';
+      return "radio";
     case PDF_FORM_FIELD_TYPE.LISTBOX:
-      return 'listbox';
+      return "listbox";
     case PDF_FORM_FIELD_TYPE.PUSHBUTTON:
-      return 'button';
+      return "button";
     case PDF_FORM_FIELD_TYPE.SIGNATURE:
-      return 'signature';
+      return "signature";
     default:
-      return 'text';
+      return "text";
   }
 }
 
@@ -77,13 +77,13 @@ function toFormField(
 
   // Derive value string
   let value = f.value;
-  if (type === 'checkbox') {
-    value = f.isChecked ? 'Yes' : 'Off';
-  } else if (type === 'radio') {
+  if (type === "checkbox") {
+    value = f.isChecked ? "Yes" : "Off";
+  } else if (type === "radio") {
     // Use widget index as the canonical radio value.
     // This avoids issues with duplicate exportValues across widgets
     // (e.g., all widgets having exportValue "Yes").
-    value = '';
+    value = "";
     for (let i = 0; i < f.widgets.length; i++) {
       if (f.widgets[i].isChecked) {
         value = String(i);
@@ -102,7 +102,7 @@ function toFormField(
 
   return {
     name: f.name,
-    label: f.name.split('.').pop() || f.name,
+    label: f.name.split(".").pop() || f.name,
     type,
     value,
     options,
@@ -110,7 +110,7 @@ function toFormField(
     required: f.isRequired,
     readOnly: f.isReadOnly,
     multiSelect: f.type === PDF_FORM_FIELD_TYPE.LISTBOX,
-    multiline: type === 'text' && (f.flags & 0x1000) !== 0,   // bit 13 = Multiline
+    multiline: type === "text" && (f.flags & 0x1000) !== 0, // bit 13 = Multiline
     tooltip: f._tooltip ?? null,
     widgets,
     buttonLabel: buttonInfo?.label ?? null,
@@ -126,7 +126,7 @@ function toFormField(
  */
 export class PdfiumFormProvider implements IFormDataProvider {
   /** Provider identifier — kept as 'pdf-lib' for backwards-compatibility. */
-  readonly name = 'pdf-lib';
+  readonly name = "pdf-lib";
 
   async fetchFields(file: File | Blob): Promise<FormField[]> {
     try {
@@ -146,7 +146,7 @@ export class PdfiumFormProvider implements IFormDataProvider {
         .filter((f) => f.widgets.length > 0)
         .map((f) => toFormField(f, optMap.get(f.name) ?? null, buttonInfoMap.get(f.name) ?? null));
     } catch (err) {
-      console.warn('[PdfiumFormProvider] Failed to extract form fields:', err);
+      console.warn("[PdfiumFormProvider] Failed to extract form fields:", err);
       return [];
     }
   }
@@ -154,10 +154,7 @@ export class PdfiumFormProvider implements IFormDataProvider {
   /**
    * Enrich fields with alternate names (tooltip / TU entry) via PDFium.
    */
-  private async enrichWithAlternateNames(
-    data: ArrayBuffer,
-    fields: PdfiumFormField[],
-  ): Promise<void> {
+  private async enrichWithAlternateNames(data: ArrayBuffer, fields: PdfiumFormField[]): Promise<void> {
     try {
       const m = await getPdfiumModule();
       const docPtr = await openRawDocumentSafe(data);
@@ -185,7 +182,7 @@ export class PdfiumFormProvider implements IFormDataProvider {
             }
 
             const nl = m.FPDFAnnot_GetFormFieldName(formEnvPtr, annotPtr, 0, 0);
-            let name = '';
+            let name = "";
             if (nl > 0) {
               const nb = m.pdfium.wasmExports.malloc(nl);
               m.FPDFAnnot_GetFormFieldName(formEnvPtr, annotPtr, nb, nl);
@@ -218,7 +215,7 @@ export class PdfiumFormProvider implements IFormDataProvider {
         closeDocAndFreeBuffer(m, docPtr);
       }
     } catch (e) {
-      console.warn('[PdfiumFormProvider] Failed to enrich alternate names:', e);
+      console.warn("[PdfiumFormProvider] Failed to enrich alternate names:", e);
     }
   }
 
@@ -240,13 +237,13 @@ export class PdfiumFormProvider implements IFormDataProvider {
 
     try {
       const { PDFDocument, PDFName, PDFArray, PDFString, PDFHexString, PDFDropdown, PDFOptionList } =
-        await import('@cantoo/pdf-lib');
+        await import("@cantoo/pdf-lib");
       const doc = await PDFDocument.load(data, { ignoreEncryption: true, throwOnInvalidObject: false });
       const form = doc.getForm();
 
       const decodeText = (obj: unknown): string => {
         if (obj instanceof PDFString || obj instanceof PDFHexString) return obj.decodeText();
-        return String(obj ?? '');
+        return String(obj ?? "");
       };
 
       for (const pf of comboOrList) {
@@ -255,7 +252,7 @@ export class PdfiumFormProvider implements IFormDataProvider {
           if (!(field instanceof PDFDropdown) && !(field instanceof PDFOptionList)) continue;
 
           const acroDict = (field.acroField as any).dict;
-          const optRaw = acroDict.lookup(PDFName.of('Opt'));
+          const optRaw = acroDict.lookup(PDFName.of("Opt"));
           if (!(optRaw instanceof PDFArray)) continue;
 
           const exportValues: string[] = [];
@@ -292,7 +289,7 @@ export class PdfiumFormProvider implements IFormDataProvider {
         }
       }
     } catch (e) {
-      console.warn('[PdfiumFormProvider] Failed to extract display options:', e);
+      console.warn("[PdfiumFormProvider] Failed to extract display options:", e);
     }
 
     return result;
@@ -311,54 +308,51 @@ export class PdfiumFormProvider implements IFormDataProvider {
     if (buttons.length === 0) return result;
 
     try {
-      const { PDFDocument, PDFName, PDFString, PDFHexString, PDFDict } =
-        await import('@cantoo/pdf-lib');
+      const { PDFDocument, PDFName, PDFString, PDFHexString, PDFDict } = await import("@cantoo/pdf-lib");
 
       const doc = await PDFDocument.load(data, { ignoreEncryption: true, throwOnInvalidObject: false });
       const form = doc.getForm();
 
       const decodeText = (obj: unknown): string | null => {
         if (obj instanceof PDFString || obj instanceof PDFHexString) return obj.decodeText();
-        if (obj instanceof PDFName) return (obj as any).asString?.() ?? obj.toString().replace(/^\//, '');
+        if (obj instanceof PDFName) return (obj as any).asString?.() ?? obj.toString().replace(/^\//, "");
         return null;
       };
 
       const parseActionDict = (aObj: unknown): ButtonAction | null => {
         if (!(aObj instanceof PDFDict)) return null;
-        const sObj = aObj.lookup(PDFName.of('S'));
+        const sObj = aObj.lookup(PDFName.of("S"));
         if (!(sObj instanceof PDFName)) return null;
-        const actionType: string = (sObj as any).asString?.() ?? sObj.toString().replace(/^\//, '');
+        const actionType: string = (sObj as any).asString?.() ?? sObj.toString().replace(/^\//, "");
 
         switch (actionType) {
-          case 'Named': {
-            const nObj = aObj.lookup(PDFName.of('N'));
-            const name = nObj instanceof PDFName
-              ? ((nObj as any).asString?.() ?? nObj.toString().replace(/^\//, ''))
-              : '';
-            return { type: 'named', namedAction: name };
+          case "Named": {
+            const nObj = aObj.lookup(PDFName.of("N"));
+            const name = nObj instanceof PDFName ? ((nObj as any).asString?.() ?? nObj.toString().replace(/^\//, "")) : "";
+            return { type: "named", namedAction: name };
           }
-          case 'JavaScript': {
-            const jsObj = aObj.lookup(PDFName.of('JS'));
-            const js = decodeText(jsObj) ?? jsObj?.toString() ?? '';
-            return { type: 'javascript', javascript: js };
+          case "JavaScript": {
+            const jsObj = aObj.lookup(PDFName.of("JS"));
+            const js = decodeText(jsObj) ?? jsObj?.toString() ?? "";
+            return { type: "javascript", javascript: js };
           }
-          case 'SubmitForm': {
-            const fObj = aObj.lookup(PDFName.of('F'));
-            let url = '';
+          case "SubmitForm": {
+            const fObj = aObj.lookup(PDFName.of("F"));
+            let url = "";
             if (fObj instanceof PDFDict) {
-              url = decodeText(fObj.lookup(PDFName.of('F'))) ?? '';
+              url = decodeText(fObj.lookup(PDFName.of("F"))) ?? "";
             } else if (fObj) {
               url = decodeText(fObj) ?? fObj.toString();
             }
-            const flagsObj = aObj.lookup(PDFName.of('Flags'));
-            const flags = typeof (flagsObj as any)?.asNumber === 'function' ? (flagsObj as any).asNumber() : 0;
-            return { type: 'submitForm', url, submitFlags: flags };
+            const flagsObj = aObj.lookup(PDFName.of("Flags"));
+            const flags = typeof (flagsObj as any)?.asNumber === "function" ? (flagsObj as any).asNumber() : 0;
+            return { type: "submitForm", url, submitFlags: flags };
           }
-          case 'ResetForm':
-            return { type: 'resetForm' };
-          case 'URI': {
-            const uriObj = aObj.lookup(PDFName.of('URI'));
-            return { type: 'uri', url: decodeText(uriObj) ?? '' };
+          case "ResetForm":
+            return { type: "resetForm" };
+          case "URI": {
+            const uriObj = aObj.lookup(PDFName.of("URI"));
+            return { type: "uri", url: decodeText(uriObj) ?? "" };
           }
           default:
             return null;
@@ -367,9 +361,9 @@ export class PdfiumFormProvider implements IFormDataProvider {
 
       const getMkCaption = (dict: any): string | null => {
         try {
-          const mkObj = dict.lookup(PDFName.of('MK'));
+          const mkObj = dict.lookup(PDFName.of("MK"));
           if (!(mkObj instanceof PDFDict)) return null;
-          const caObj = mkObj.lookup(PDFName.of('CA'));
+          const caObj = mkObj.lookup(PDFName.of("CA"));
           return decodeText(caObj);
         } catch {
           return null;
@@ -378,7 +372,7 @@ export class PdfiumFormProvider implements IFormDataProvider {
 
       const getActionFromDict = (dict: any): ButtonAction | null => {
         try {
-          return parseActionDict(dict.lookup(PDFName.of('A')));
+          return parseActionDict(dict.lookup(PDFName.of("A")));
         } catch {
           return null;
         }
@@ -423,32 +417,32 @@ export class PdfiumFormProvider implements IFormDataProvider {
           // Also check /AA (Additional Actions) → /U (Mouse Up) if no /A found
           if (!info.action) {
             try {
-              const aaObj = acroField.dict.lookup(PDFName.of('AA'));
+              const aaObj = acroField.dict.lookup(PDFName.of("AA"));
               if (aaObj instanceof PDFDict) {
-                const uObj = aaObj.lookup(PDFName.of('U'));
+                const uObj = aaObj.lookup(PDFName.of("U"));
                 const action = parseActionDict(uObj);
                 if (action) info.action = action;
               }
-            } catch { /* non-critical */ }
+            } catch {
+              /* non-critical */
+            }
           }
 
           if (info.label || info.action) {
             result.set(name, info);
           }
-        } catch { /* skip individual field errors */ }
+        } catch {
+          /* skip individual field errors */
+        }
       }
     } catch (e) {
-      console.warn('[PdfiumFormProvider] Failed to extract button info:', e);
+      console.warn("[PdfiumFormProvider] Failed to extract button info:", e);
     }
 
     return result;
   }
 
-  async fillForm(
-    file: File | Blob,
-    values: Record<string, string>,
-    flatten: boolean,
-  ): Promise<Blob> {
+  async fillForm(file: File | Blob, values: Record<string, string>, flatten: boolean): Promise<Blob> {
     const arrayBuffer = await file.arrayBuffer();
     const m = await getPdfiumModule();
     const docPtr = await openRawDocumentSafe(arrayBuffer);
@@ -457,7 +451,7 @@ export class PdfiumFormProvider implements IFormDataProvider {
       const formInfoPtr = m.PDFiumExt_OpenFormFillInfo();
       const formEnvPtr = m.PDFiumExt_InitFormFillEnvironment(docPtr, formInfoPtr);
       if (!formEnvPtr) {
-        throw new Error('PDFium: failed to initialise form environment');
+        throw new Error("PDFium: failed to initialise form environment");
       }
 
       const pageCount = m.FPDF_GetPageCount(docPtr);
@@ -481,7 +475,7 @@ export class PdfiumFormProvider implements IFormDataProvider {
           }
 
           const nl = m.FPDFAnnot_GetFormFieldName(formEnvPtr, annotPtr, 0, 0);
-          let fieldName = '';
+          let fieldName = "";
           if (nl > 0) {
             const nb = m.pdfium.wasmExports.malloc(nl);
             m.FPDFAnnot_GetFormFieldName(formEnvPtr, annotPtr, nb, nl);
@@ -512,7 +506,7 @@ export class PdfiumFormProvider implements IFormDataProvider {
               // Click simulation (FORM_OnLButtonDown/Up) does NOT reliably
               // persist checkbox state changes in headless/offscreen mode.
               const isCurrentlyChecked = m.FPDFAnnot_IsChecked(formEnvPtr, annotPtr);
-              const shouldBeChecked = value !== '' && value !== 'Off';
+              const shouldBeChecked = value !== "" && value !== "Off";
               if (isCurrentlyChecked !== shouldBeChecked) {
                 const ENTER_KEY = 13;
                 m.FORM_SetFocusedAnnot(formEnvPtr, annotPtr);
@@ -536,10 +530,7 @@ export class PdfiumFormProvider implements IFormDataProvider {
                   m.FORM_ForceToKillFocus(formEnvPtr);
                 }
               }
-            } else if (
-              fieldType === PDF_FORM_FIELD_TYPE.COMBOBOX ||
-              fieldType === PDF_FORM_FIELD_TYPE.LISTBOX
-            ) {
+            } else if (fieldType === PDF_FORM_FIELD_TYPE.COMBOBOX || fieldType === PDF_FORM_FIELD_TYPE.LISTBOX) {
               // FORM_SetIndexSelected requires the annotation to be focused first.
               m.FORM_SetFocusedAnnot(formEnvPtr, annotPtr);
 
@@ -591,7 +582,7 @@ export class PdfiumFormProvider implements IFormDataProvider {
       m.PDFiumExt_CloseFormFillInfo(formInfoPtr);
 
       const savedBytes = await saveRawDocument(docPtr);
-      return new Blob([savedBytes], { type: 'application/pdf' });
+      return new Blob([savedBytes], { type: "application/pdf" });
     } finally {
       closeDocAndFreeBuffer(m, docPtr);
     }
diff --git a/frontend/src/core/tools/formFill/providers/index.ts b/frontend/src/core/tools/formFill/providers/index.ts
index b71780b106..59d72f00f1 100644
--- a/frontend/src/core/tools/formFill/providers/index.ts
+++ b/frontend/src/core/tools/formFill/providers/index.ts
@@ -1,3 +1,3 @@
-export type { IFormDataProvider } from '@app/tools/formFill/providers/types';
-export { PdfiumFormProvider } from '@app/tools/formFill/providers/PdfiumFormProvider';
-export { PdfBoxFormProvider } from '@app/tools/formFill/providers/PdfBoxFormProvider';
+export type { IFormDataProvider } from "@app/tools/formFill/providers/types";
+export { PdfiumFormProvider } from "@app/tools/formFill/providers/PdfiumFormProvider";
+export { PdfBoxFormProvider } from "@app/tools/formFill/providers/PdfBoxFormProvider";
diff --git a/frontend/src/core/tools/formFill/providers/types.ts b/frontend/src/core/tools/formFill/providers/types.ts
index 605111fece..9c78c6f93d 100644
--- a/frontend/src/core/tools/formFill/providers/types.ts
+++ b/frontend/src/core/tools/formFill/providers/types.ts
@@ -10,7 +10,7 @@
  * The UI components (FormFieldOverlay, FormFill, FormFieldSidebar) consume
  * data through FormFillContext, which delegates to whichever provider is active.
  */
-import type { FormField } from '@app/tools/formFill/types';
+import type { FormField } from "@app/tools/formFill/types";
 
 export interface IFormDataProvider {
   /** Unique identifier for the provider (for debugging/logging) */
@@ -29,9 +29,5 @@ export interface IFormDataProvider {
    * @param flatten - Whether to flatten the form (make fields non-editable)
    * @returns The filled PDF as a Blob
    */
-  fillForm(
-    file: File | Blob,
-    values: Record<string, string>,
-    flatten: boolean,
-  ): Promise<Blob>;
+  fillForm(file: File | Blob, values: Record<string, string>, flatten: boolean): Promise<Blob>;
 }
diff --git a/frontend/src/core/tools/formFill/types.ts b/frontend/src/core/tools/formFill/types.ts
index 693c7ec2e4..f5379d1fb5 100644
--- a/frontend/src/core/tools/formFill/types.ts
+++ b/frontend/src/core/tools/formFill/types.ts
@@ -5,9 +5,9 @@
 
 export interface WidgetCoordinates {
   pageIndex: number;
-  x: number;      // PDF points, un-rotated, CSS upper-left origin
-  y: number;      // PDF points, un-rotated, CSS upper-left origin
-  width: number;  // PDF points
+  x: number; // PDF points, un-rotated, CSS upper-left origin
+  y: number; // PDF points, un-rotated, CSS upper-left origin
+  width: number; // PDF points
   height: number; // PDF points
   /** Export value for this specific widget (radio/checkbox only) */
   exportValue?: string;
@@ -38,22 +38,9 @@ export interface FormField {
   appearanceDataUrl?: string;
 }
 
-export type FormFieldType =
-  | 'text'
-  | 'checkbox'
-  | 'combobox'
-  | 'listbox'
-  | 'radio'
-  | 'button'
-  | 'signature';
+export type FormFieldType = "text" | "checkbox" | "combobox" | "listbox" | "radio" | "button" | "signature";
 
-export type ButtonActionType =
-  | 'named'
-  | 'javascript'
-  | 'submitForm'
-  | 'resetForm'
-  | 'uri'
-  | 'none';
+export type ButtonActionType = "named" | "javascript" | "submitForm" | "resetForm" | "uri" | "none";
 
 export interface ButtonAction {
   type: ButtonActionType;
diff --git a/frontend/src/core/tools/pdfTextEditor/PdfTextEditor.tsx b/frontend/src/core/tools/pdfTextEditor/PdfTextEditor.tsx
index 9b09f27d00..4bfd421908 100644
--- a/frontend/src/core/tools/pdfTextEditor/PdfTextEditor.tsx
+++ b/frontend/src/core/tools/pdfTextEditor/PdfTextEditor.tsx
@@ -1,19 +1,19 @@
-import { useCallback, useEffect, useMemo, useState, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import DescriptionIcon from '@mui/icons-material/DescriptionOutlined';
+import { useCallback, useEffect, useMemo, useState, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import DescriptionIcon from "@mui/icons-material/DescriptionOutlined";
 
-import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
-import { useFileSelection, useFileManagement, useFileContext } from '@app/contexts/FileContext';
-import { useNavigationActions, useNavigationState } from '@app/contexts/NavigationContext';
-import { createStirlingFilesAndStubs } from '@app/services/fileStubHelpers';
-import { BaseToolProps, ToolComponent } from '@app/types/tool';
-import { getDefaultWorkbench } from '@app/types/workbench';
-import { CONVERSION_ENDPOINTS } from '@app/constants/convertConstants';
-import apiClient from '@app/services/apiClient';
-import { downloadBlob, downloadTextAsFile } from '@app/utils/downloadUtils';
-import { getFilenameFromHeaders } from '@app/utils/fileResponseUtils';
-import { pdfWorkerManager } from '@app/services/pdfWorkerManager';
-import { Util } from 'pdfjs-dist/legacy/build/pdf.mjs';
+import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
+import { useFileSelection, useFileManagement, useFileContext } from "@app/contexts/FileContext";
+import { useNavigationActions, useNavigationState } from "@app/contexts/NavigationContext";
+import { createStirlingFilesAndStubs } from "@app/services/fileStubHelpers";
+import { BaseToolProps, ToolComponent } from "@app/types/tool";
+import { getDefaultWorkbench } from "@app/types/workbench";
+import { CONVERSION_ENDPOINTS } from "@app/constants/convertConstants";
+import apiClient from "@app/services/apiClient";
+import { downloadBlob, downloadTextAsFile } from "@app/utils/downloadUtils";
+import { getFilenameFromHeaders } from "@app/utils/fileResponseUtils";
+import { pdfWorkerManager } from "@app/services/pdfWorkerManager";
+import { Util } from "pdfjs-dist/legacy/build/pdf.mjs";
 import {
   PdfJsonDocument,
   PdfJsonFont,
@@ -23,7 +23,7 @@ import {
   PdfTextEditorViewData,
   BoundingBox,
   ConversionProgress,
-} from '@app/tools/pdfTextEditor/pdfTextEditorTypes';
+} from "@app/tools/pdfTextEditor/pdfTextEditorTypes";
 import {
   deepCloneDocument,
   getDirtyPages,
@@ -33,46 +33,46 @@ import {
   cloneImageElement,
   cloneTextElement,
   valueOr,
-} from '@app/tools/pdfTextEditor/pdfTextEditorUtils';
-import PdfTextEditorView from '@app/components/tools/pdfTextEditor/PdfTextEditorView';
-import PdfTextEditorSidebar from '@app/components/tools/pdfTextEditor/PdfTextEditorSidebar';
-import type { PDFDocumentProxy } from 'pdfjs-dist';
+} from "@app/tools/pdfTextEditor/pdfTextEditorUtils";
+import PdfTextEditorView from "@app/components/tools/pdfTextEditor/PdfTextEditorView";
+import PdfTextEditorSidebar from "@app/components/tools/pdfTextEditor/PdfTextEditorSidebar";
+import type { PDFDocumentProxy } from "pdfjs-dist";
 
-const WORKBENCH_VIEW_ID = 'pdfTextEditorWorkbench';
-const WORKBENCH_ID = 'custom:pdfTextEditor' as const;
+const WORKBENCH_VIEW_ID = "pdfTextEditorWorkbench";
+const WORKBENCH_ID = "custom:pdfTextEditor" as const;
 
 const sanitizeBaseName = (name?: string | null): string => {
   if (!name || name.trim().length === 0) {
-    return 'document';
+    return "document";
   }
-  return name.replace(/\.[^.]+$/u, '');
+  return name.replace(/\.[^.]+$/u, "");
 };
 
 const getAutoLoadKey = (file: File): string => {
   const withId = file as File & { fileId?: string; quickKey?: string };
-  if (withId.fileId && typeof withId.fileId === 'string') {
+  if (withId.fileId && typeof withId.fileId === "string") {
     return withId.fileId;
   }
-  if (withId.quickKey && typeof withId.quickKey === 'string') {
+  if (withId.quickKey && typeof withId.quickKey === "string") {
     return withId.quickKey;
   }
   return `${file.name}|${file.size}|${file.lastModified}`;
 };
 
 const normalizeLineArray = (value: string | undefined | null, expected: number): string[] => {
-  const normalized = (value ?? '').replace(/\r/g, '');
+  const normalized = (value ?? "").replace(/\r/g, "");
   if (expected <= 0) {
     return [normalized];
   }
-  const parts = normalized.split('\n');
+  const parts = normalized.split("\n");
   if (parts.length === expected) {
     return parts;
   }
   if (parts.length < expected) {
-    return parts.concat(Array(expected - parts.length).fill(''));
+    return parts.concat(Array(expected - parts.length).fill(""));
   }
   const head = parts.slice(0, Math.max(expected - 1, 0));
-  const tail = parts.slice(Math.max(expected - 1, 0)).join('\n');
+  const tail = parts.slice(Math.max(expected - 1, 0)).join("\n");
   return [...head, tail];
 };
 
@@ -91,9 +91,7 @@ const expandGroupToLines = (group: TextGroup): TextGroup[] => {
   if (group.childLineGroups && group.childLineGroups.length > 0) {
     const textLines = normalizeLineArray(group.text, group.childLineGroups.length);
     const originalLines = normalizeLineArray(group.originalText, group.childLineGroups.length);
-    return group.childLineGroups.map((child, index) =>
-      cloneLineTemplate(child, textLines[index], originalLines[index]),
-    );
+    return group.childLineGroups.map((child, index) => cloneLineTemplate(child, textLines[index], originalLines[index]));
   }
   return [cloneLineTemplate(group)];
 };
@@ -123,8 +121,8 @@ const buildMergedGroupFromSelection = (groups: TextGroup[]): TextGroup | null =>
     return null;
   }
 
-  const lineTexts = lineTemplates.map((line) => line.text ?? '');
-  const lineOriginalTexts = lineTemplates.map((line) => line.originalText ?? '');
+  const lineTexts = lineTemplates.map((line) => line.text ?? "");
+  const lineOriginalTexts = lineTemplates.map((line) => line.originalText ?? "");
   const combinedOriginals = lineTemplates.flatMap((line) => line.originalElements.map(cloneTextElement));
   const combinedElements = combinedOriginals.map(cloneTextElement);
   const mergedBounds = mergeBoundingBoxes(lineTemplates.map((line) => line.bounds));
@@ -139,24 +137,20 @@ const buildMergedGroupFromSelection = (groups: TextGroup[]): TextGroup | null =>
     }
   }
   const averageSpacing =
-    spacingValues.length > 0
-      ? spacingValues.reduce((sum, value) => sum + value, 0) / spacingValues.length
-      : null;
+    spacingValues.length > 0 ? spacingValues.reduce((sum, value) => sum + value, 0) / spacingValues.length : null;
 
   const first = groups[0];
   const lineElementCounts = lineTemplates.map((line) => Math.max(line.originalElements.length, 1));
   const paragraph: TextGroup = {
     ...first,
-    text: lineTexts.join('\n'),
-    originalText: lineOriginalTexts.join('\n'),
+    text: lineTexts.join("\n"),
+    originalText: lineOriginalTexts.join("\n"),
     elements: combinedElements,
     originalElements: combinedOriginals,
     bounds: mergedBounds,
     lineSpacing: averageSpacing,
     lineElementCounts: lineElementCounts.length > 1 ? lineElementCounts : null,
-    childLineGroups: lineTemplates.map((line, index) =>
-      cloneLineTemplate(line, lineTexts[index], lineOriginalTexts[index]),
-    ),
+    childLineGroups: lineTemplates.map((line, index) => cloneLineTemplate(line, lineTexts[index], lineOriginalTexts[index])),
   };
 
   return paragraph;
@@ -190,8 +184,8 @@ const splitParagraphGroup = (group: TextGroup): TextGroup[] => {
     return {
       ...template,
       id: `${group.id}-line-${index + 1}-${Date.now()}-${index}`,
-      text: textLines[index] ?? '',
-      originalText: originalLines[index] ?? '',
+      text: textLines[index] ?? "",
+      originalText: originalLines[index] ?? "",
       elements: slice.map(cloneTextElement),
       originalElements: slice,
       lineElementCounts: null,
@@ -219,7 +213,7 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
   const [groupsByPage, setGroupsByPage] = useState<TextGroup[][]>([]);
   const [imagesByPage, setImagesByPage] = useState<PdfJsonImageElement[][]>([]);
   const [selectedPage, setSelectedPage] = useState(0);
-  const [fileName, setFileName] = useState('');
+  const [fileName, setFileName] = useState("");
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
   const [isGeneratingPdf, setIsGeneratingPdf] = useState(false);
   const [isSavingToWorkbench, setIsSavingToWorkbench] = useState(false);
@@ -227,7 +221,7 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
   const [isConverting, setIsConverting] = useState(false);
   const [conversionProgress, setConversionProgress] = useState<ConversionProgress | null>(null);
   const [forceSingleTextElement, setForceSingleTextElement] = useState(true);
-  const [groupingMode, setGroupingMode] = useState<'auto' | 'paragraph' | 'singleLine'>('auto');
+  const [groupingMode, setGroupingMode] = useState<"auto" | "paragraph" | "singleLine">("auto");
   const [hasVectorPreview, setHasVectorPreview] = useState(false);
   const [pagePreviews, setPagePreviews] = useState<Map<number, string>>(new Map());
   const [autoScaleText, setAutoScaleText] = useState(true);
@@ -277,7 +271,6 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
     pagePreviewsRef.current = pagePreviews;
   }, [pagePreviews]);
 
-
   useEffect(() => {
     return () => {
       if (pdfDocumentRef.current) {
@@ -317,10 +310,10 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
     }
   }, [shouldNavigateAfterSave, navigationState.hasUnsavedChanges, navigationActions]);
 
-  const viewLabel = useMemo(() => t('pdfTextEditor.viewLabel', 'PDF Editor'), [t]);
+  const viewLabel = useMemo(() => t("pdfTextEditor.viewLabel", "PDF Editor"), [t]);
   const { selectedFiles } = useFileSelection();
 
-  const resetToDocument = useCallback((document: PdfJsonDocument | null, mode: 'auto' | 'paragraph' | 'singleLine') => {
+  const resetToDocument = useCallback((document: PdfJsonDocument | null, mode: "auto" | "paragraph" | "singleLine") => {
     if (!document) {
       setGroupsByPage([]);
       setImagesByPage([]);
@@ -378,7 +371,7 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
     }
     console.log(`[PdfTextEditor] Cleaning up cached document for jobId: ${jobId}`);
     apiClient.post(`/api/v1/convert/pdf/text-editor/clear-cache/${jobId}`).catch((error) => {
-      console.warn('[PdfTextEditor] Failed to clear cache:', error);
+      console.warn("[PdfTextEditor] Failed to clear cache:", error);
     });
   }, []);
 
@@ -415,7 +408,7 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
         setHasVectorPreview(true);
       } catch (error) {
         if (previewRequestIdRef.current === requestId) {
-          console.warn('[PdfTextEditor] Failed to initialise PDF preview:', error);
+          console.warn("[PdfTextEditor] Failed to initialise PDF preview:", error);
           clearPdfPreview();
         }
       }
@@ -430,13 +423,10 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
         return;
       }
       if (!cachedJobId) {
-        console.log('[loadImagesForPage] No cached jobId, skipping');
+        console.log("[loadImagesForPage] No cached jobId, skipping");
         return;
       }
-      if (
-        loadedImagePagesRef.current.has(pageIndex) ||
-        loadingImagePagesRef.current.has(pageIndex)
-      ) {
+      if (loadedImagePagesRef.current.has(pageIndex) || loadingImagePagesRef.current.has(pageIndex)) {
         return;
       }
 
@@ -452,24 +442,16 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
 
       try {
         const [pageResponse, pageFontsResponse] = await Promise.all([
-          apiClient.get(
-            `/api/v1/convert/pdf/text-editor/page/${cachedJobId}/${pageNumber}`,
-            {
-              responseType: 'json',
-            },
-          ),
-          apiClient.get(
-            `/api/v1/convert/pdf/text-editor/fonts/${cachedJobId}/${pageNumber}`,
-            {
-              responseType: 'json',
-            },
-          ),
+          apiClient.get(`/api/v1/convert/pdf/text-editor/page/${cachedJobId}/${pageNumber}`, {
+            responseType: "json",
+          }),
+          apiClient.get(`/api/v1/convert/pdf/text-editor/fonts/${cachedJobId}/${pageNumber}`, {
+            responseType: "json",
+          }),
         ]);
 
         const pageData = pageResponse.data as PdfJsonPage;
-        const pageFonts = Array.isArray(pageFontsResponse.data)
-          ? (pageFontsResponse.data as PdfJsonFont[])
-          : [];
+        const pageFonts = Array.isArray(pageFontsResponse.data) ? (pageFontsResponse.data as PdfJsonFont[]) : [];
         const normalizedImages = (pageData.imageElements ?? []).map(cloneImageElement);
 
         if (imagesByPageRef.current.length <= pageIndex) {
@@ -488,7 +470,7 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
             if (!existingFont) {
               continue;
             }
-            const existingKey = existingFont.uid || `${existingFont.pageNumber ?? -1}:${existingFont.id ?? ''}`;
+            const existingKey = existingFont.uid || `${existingFont.pageNumber ?? -1}:${existingFont.id ?? ""}`;
             fontMap.set(existingKey, existingFont);
           }
           if (pageFonts.length > 0) {
@@ -496,7 +478,7 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
               if (!font) {
                 continue;
               }
-              const key = font.uid || `${font.pageNumber ?? -1}:${font.id ?? ''}`;
+              const key = font.uid || `${font.pageNumber ?? -1}:${font.id ?? ""}`;
               fontMap.set(key, font);
             }
           }
@@ -541,7 +523,7 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
       } catch (error) {
         console.error(`[loadImagesForPage] Failed to load images for page ${pageNumber}:`, error);
         if (isCacheUnavailableError(error)) {
-          console.log('[loadImagesForPage] Cache expired, triggering automatic recovery...');
+          console.log("[loadImagesForPage] Cache expired, triggering automatic recovery...");
           // Automatically recover by reloading the file
           void recoverCacheAndReloadRef.current();
         }
@@ -568,7 +550,7 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
       loadRequestIdRef.current = requestId;
 
       const _fileKey = getAutoLoadKey(file);
-      const isPdf = file.type === 'application/pdf' || file.name.toLowerCase().endsWith('.pdf');
+      const isPdf = file.type === "application/pdf" || file.name.toLowerCase().endsWith(".pdf");
 
       try {
         let parsed: PdfJsonDocument | null = null;
@@ -580,49 +562,49 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
           setIsConverting(true);
           setConversionProgress({
             percent: 0,
-            stage: 'uploading',
-            message: 'Uploading PDF file to server...',
+            stage: "uploading",
+            message: "Uploading PDF file to server...",
           });
 
           const formData = new FormData();
-          formData.append('fileInput', file);
+          formData.append("fileInput", file);
 
-          console.log('Sending conversion request with async=true');
+          console.log("Sending conversion request with async=true");
           const response = await apiClient.post(
-            `${CONVERSION_ENDPOINTS['pdf-text-editor']}?async=true&lightweight=true`,
+            `${CONVERSION_ENDPOINTS["pdf-text-editor"]}?async=true&lightweight=true`,
             formData,
             {
-              responseType: 'json',
+              responseType: "json",
             },
           );
 
-          console.log('Conversion response:', response.data);
+          console.log("Conversion response:", response.data);
           const jobId = response.data.jobId;
 
           if (!jobId) {
-            console.error('No job ID in response:', response.data);
-            throw new Error('No job ID received from server');
+            console.error("No job ID in response:", response.data);
+            throw new Error("No job ID received from server");
           }
 
           pendingJobId = jobId;
-          console.log('Got job ID:', jobId);
+          console.log("Got job ID:", jobId);
           setConversionProgress({
             percent: 3,
-            stage: 'processing',
-            message: 'Starting conversion...',
+            stage: "processing",
+            message: "Starting conversion...",
           });
 
-        let jobComplete = false;
-        let attempts = 0;
-        const maxAttempts = 600;
-        let pollDelay = 500;
+          let jobComplete = false;
+          let attempts = 0;
+          const maxAttempts = 600;
+          let pollDelay = 500;
 
-        while (!jobComplete && attempts < maxAttempts) {
-          await new Promise((resolve) => setTimeout(resolve, pollDelay));
-          attempts += 1;
-          if (pollDelay < 10000) {
-            pollDelay = Math.min(10000, Math.floor(pollDelay * 1.5));
-          }
+          while (!jobComplete && attempts < maxAttempts) {
+            await new Promise((resolve) => setTimeout(resolve, pollDelay));
+            attempts += 1;
+            if (pollDelay < 10000) {
+              pollDelay = Math.min(10000, Math.floor(pollDelay * 1.5));
+            }
 
             try {
               const statusResponse = await apiClient.get(`/api/v1/general/job/${jobId}`);
@@ -630,8 +612,8 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
               console.log(`Job status (attempt ${attempts}):`, jobStatus);
 
               const percent = Math.min(Math.max(jobStatus.progress ?? 0, 0), 100);
-              const stage = jobStatus.stage || 'processing';
-              const message = jobStatus.note || 'Converting PDF to JSON...';
+              const stage = jobStatus.stage || "processing";
+              const message = jobStatus.note || "Converting PDF to JSON...";
               const current = jobStatus.current ?? undefined;
               const total = jobStatus.total ?? undefined;
               setConversionProgress({
@@ -644,28 +626,23 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
 
               if (jobStatus.complete) {
                 if (jobStatus.error) {
-                  console.error('Job failed:', jobStatus.error);
+                  console.error("Job failed:", jobStatus.error);
                   throw new Error(jobStatus.error);
                 }
 
-                console.log('Job completed, retrieving JSON result...');
+                console.log("Job completed, retrieving JSON result...");
                 jobComplete = true;
 
-                const resultResponse = await apiClient.get(
-                  `/api/v1/general/job/${jobId}/result`,
-                  {
-                    responseType: 'blob',
-                  },
-                );
+                const resultResponse = await apiClient.get(`/api/v1/general/job/${jobId}/result`, {
+                  responseType: "blob",
+                });
 
                 const jsonText = await resultResponse.data.text();
                 const result = JSON.parse(jsonText);
 
                 if (!Array.isArray(result.pages)) {
-                  console.error('Conversion result missing page array:', result);
-                  throw new Error(
-                    'PDF conversion result did not include page data. Please update the server.',
-                  );
+                  console.error("Conversion result missing page array:", result);
+                  throw new Error("PDF conversion result did not include page data. Please update the server.");
                 }
 
                 const docResult = result as PdfJsonDocument;
@@ -677,26 +654,26 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
                 pendingJobId = shouldUseLazyMode ? jobId : null;
                 setConversionProgress(null);
               } else {
-                console.log('Job not complete yet, continuing to poll...');
+                console.log("Job not complete yet, continuing to poll...");
               }
             } catch (pollError: any) {
-              console.error('Error polling job status:', pollError);
-              console.error('Poll error details:', {
+              console.error("Error polling job status:", pollError);
+              console.error("Poll error details:", {
                 status: pollError?.response?.status,
                 data: pollError?.response?.data,
                 message: pollError?.message,
               });
               if (pollError?.response?.status === 404) {
-                throw new Error('Job not found on server', { cause: pollError });
+                throw new Error("Job not found on server", { cause: pollError });
               }
             }
           }
 
           if (!jobComplete) {
-            throw new Error('Conversion timed out');
+            throw new Error("Conversion timed out");
           }
           if (!parsed) {
-            throw new Error('Conversion did not return JSON content');
+            throw new Error("Conversion did not return JSON content");
           }
         } else {
           const content = await file.text();
@@ -716,13 +693,11 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
         }
 
         if (!parsed) {
-          throw new Error('Failed to parse PDF JSON document');
+          throw new Error("Failed to parse PDF JSON document");
         }
 
         console.log(
-          `[PdfTextEditor] Document loaded. Lazy image mode: ${shouldUseLazyMode}, Pages: ${
-            parsed.pages?.length || 0
-          }`,
+          `[PdfTextEditor] Document loaded. Lazy image mode: ${shouldUseLazyMode}, Pages: ${parsed.pages?.length || 0}`,
         );
 
         if (isPdf) {
@@ -740,8 +715,8 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
         setFileName(file.name);
         setErrorMessage(null);
       } catch (error: any) {
-        console.error('Failed to load file', error);
-        console.error('Error details:', {
+        console.error("Failed to load file", error);
+        console.error("Error details:", {
           message: error?.message,
           response: error?.response?.data,
           stack: error?.stack,
@@ -759,16 +734,14 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
         cachedJobIdRef.current = null;
 
         if (isPdf) {
-          const errorMsg =
-            error?.message ||
-            t('pdfTextEditor.conversionFailed', 'Failed to convert PDF. Please try again.');
+          const errorMsg = error?.message || t("pdfTextEditor.conversionFailed", "Failed to convert PDF. Please try again.");
           setErrorMessage(errorMsg);
-          console.error('Setting error message:', errorMsg);
+          console.error("Setting error message:", errorMsg);
         } else {
           setErrorMessage(
             t(
-              'pdfTextEditor.errors.invalidJson',
-              'Unable to read the JSON file. Ensure it was generated by the PDF to JSON tool.',
+              "pdfTextEditor.errors.invalidJson",
+              "Unable to read the JSON file. Ensure it was generated by the PDF to JSON tool.",
             ),
           );
         }
@@ -786,23 +759,23 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
       return false;
     }
     if (cacheRecoveryAttemptsRef.current >= 2) {
-      console.warn('[PdfTextEditor] Cache recovery limit reached');
+      console.warn("[PdfTextEditor] Cache recovery limit reached");
       return false;
     }
     cacheRecoveryAttemptsRef.current += 1;
     const file = lastLoadedFileRef.current;
     if (!file) {
-      console.warn('[PdfTextEditor] No file available for cache recovery');
+      console.warn("[PdfTextEditor] No file available for cache recovery");
       return false;
     }
     cacheRecoveryInProgressRef.current = true;
     try {
-      console.log('[PdfTextEditor] Automatically reloading file due to cache expiration...');
+      console.log("[PdfTextEditor] Automatically reloading file due to cache expiration...");
       await handleLoadFile(file);
-      console.log('[PdfTextEditor] Cache recovery successful');
+      console.log("[PdfTextEditor] Cache recovery successful");
       return true;
     } catch (error) {
-      console.error('[PdfTextEditor] Cache recovery failed', error);
+      console.error("[PdfTextEditor] Cache recovery failed", error);
       return false;
     } finally {
       cacheRecoveryInProgressRef.current = false;
@@ -828,21 +801,22 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
     [addFiles, handleLoadFile],
   );
 
-  const handleSelectPage = useCallback((pageIndex: number) => {
-    setSelectedPage(pageIndex);
-    // Trigger lazy loading for images on the selected page
-    if (isLazyMode) {
-      void loadImagesForPage(pageIndex);
-    }
-  }, [isLazyMode, loadImagesForPage]);
+  const handleSelectPage = useCallback(
+    (pageIndex: number) => {
+      setSelectedPage(pageIndex);
+      // Trigger lazy loading for images on the selected page
+      if (isLazyMode) {
+        void loadImagesForPage(pageIndex);
+      }
+    },
+    [isLazyMode, loadImagesForPage],
+  );
 
   const handleGroupTextChange = useCallback((pageIndex: number, groupId: string, value: string) => {
     setGroupsByPage((previous) =>
       previous.map((groups, idx) =>
-        idx !== pageIndex
-          ? groups
-          : groups.map((group) => (group.id === groupId ? { ...group, text: value } : group))
-      )
+        idx !== pageIndex ? groups : groups.map((group) => (group.id === groupId ? { ...group, text: value } : group)),
+      ),
     );
   }, []);
 
@@ -869,9 +843,7 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
         if (idx !== pageIndex) {
           return groups;
         }
-        const indices = groupIds
-          .map((id) => groups.findIndex((group) => group.id === id))
-          .filter((index) => index >= 0);
+        const indices = groupIds.map((id) => groups.findIndex((group) => group.id === id)).filter((index) => index >= 0);
         if (indices.length !== groupIds.length) {
           return groups;
         }
@@ -886,11 +858,7 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
         if (!merged) {
           return groups;
         }
-        const next = [
-          ...groups.slice(0, sorted[0]),
-          merged,
-          ...groups.slice(sorted[sorted.length - 1] + 1),
-        ];
+        const next = [...groups.slice(0, sorted[0]), merged, ...groups.slice(sorted[sorted.length - 1] + 1)];
         updated = true;
         return next;
       }),
@@ -914,11 +882,7 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
         if (splits.length <= 1) {
           return groups;
         }
-        const next = [
-          ...groups.slice(0, targetIndex),
-          ...splits,
-          ...groups.slice(targetIndex + 1),
-        ];
+        const next = [...groups.slice(0, targetIndex), ...splits, ...groups.slice(targetIndex + 1)];
         updated = true;
         return next;
       }),
@@ -936,10 +900,11 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
         const current = previous[pageIndex] ?? [];
         let changed = false;
         const updatedPage = current.map((image) => {
-          if ((image.id ?? '') !== imageId) {
+          if ((image.id ?? "") !== imageId) {
             return image;
           }
-          const originalTransform = image.transform ?? originalImagesRef.current[pageIndex]?.find((base) => (base.id ?? '') === imageId)?.transform;
+          const originalTransform =
+            image.transform ?? originalImagesRef.current[pageIndex]?.find((base) => (base.id ?? "") === imageId)?.transform;
           const scaleXSign = originalTransform && originalTransform.length >= 6 ? Math.sign(originalTransform[0]) || 1 : 1;
           const scaleYSign = originalTransform && originalTransform.length >= 6 ? Math.sign(originalTransform[3]) || 1 : 1;
           const right = next.left + next.width;
@@ -954,16 +919,17 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
             top,
             width: next.width,
             height: next.height,
-            transform: scaleXSign < 0 || scaleYSign < 0
-              ? [
-                  next.width * scaleXSign,
-                  0,
-                  0,
-                  next.height * scaleYSign,
-                  next.left,
-                  scaleYSign >= 0 ? next.bottom : next.bottom + next.height,
-                ]
-              : null,
+            transform:
+              scaleXSign < 0 || scaleYSign < 0
+                ? [
+                    next.width * scaleXSign,
+                    0,
+                    0,
+                    next.height * scaleYSign,
+                    next.left,
+                    scaleYSign >= 0 ? next.bottom : next.bottom + next.height,
+                  ]
+                : null,
           };
 
           const isSame =
@@ -994,7 +960,7 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
   );
 
   const handleImageReset = useCallback((pageIndex: number, imageId: string) => {
-    const baseline = originalImagesRef.current[pageIndex]?.find((image) => (image.id ?? '') === imageId);
+    const baseline = originalImagesRef.current[pageIndex]?.find((image) => (image.id ?? "") === imageId);
     if (!baseline) {
       return;
     }
@@ -1002,7 +968,7 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
       const current = previous[pageIndex] ?? [];
       let changed = false;
       const updatedPage = current.map((image) => {
-        if ((image.id ?? '') !== imageId) {
+        if ((image.id ?? "") !== imageId) {
           return image;
         }
         changed = true;
@@ -1057,188 +1023,165 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
 
     const { document, filename } = payload;
     const serialized = JSON.stringify(document);
-    downloadTextAsFile(serialized, filename, 'application/json');
+    downloadTextAsFile(serialized, filename, "application/json");
 
     if (onComplete) {
-      const exportedFile = new File([serialized], filename, { type: 'application/json' });
+      const exportedFile = new File([serialized], filename, { type: "application/json" });
       onComplete([exportedFile]);
     }
   }, [buildPayload, onComplete]);
 
-  const handleGeneratePdf = useCallback(async (skipComplete = false) => {
-    try {
-      setIsGeneratingPdf(true);
+  const handleGeneratePdf = useCallback(
+    async (skipComplete = false) => {
+      try {
+        setIsGeneratingPdf(true);
 
-      const ensureImagesForPages = async (pageIndices: number[]) => {
-        const uniqueIndices = Array.from(new Set(pageIndices)).filter((index) => index >= 0);
-        if (uniqueIndices.length === 0) {
-          return;
-        }
-
-        for (const index of uniqueIndices) {
-          if (!loadedImagePagesRef.current.has(index)) {
-            await loadImagesForPage(index);
-          }
-        }
-
-        const maxWaitTime = 15000;
-        const pollInterval = 150;
-        const startWait = Date.now();
-        while (Date.now() - startWait < maxWaitTime) {
-          const allLoaded = uniqueIndices.every(
-            (index) =>
-              loadedImagePagesRef.current.has(index) &&
-              imagesByPageRef.current[index] !== undefined,
-          );
-          const anyLoading = uniqueIndices.some((index) =>
-            loadingImagePagesRef.current.has(index),
-          );
-          if (allLoaded && !anyLoading) {
+        const ensureImagesForPages = async (pageIndices: number[]) => {
+          const uniqueIndices = Array.from(new Set(pageIndices)).filter((index) => index >= 0);
+          if (uniqueIndices.length === 0) {
             return;
           }
-          await new Promise((resolve) => setTimeout(resolve, pollInterval));
-        }
 
-        const missing = uniqueIndices.filter(
-          (index) => !loadedImagePagesRef.current.has(index),
-        );
-        if (missing.length > 0) {
-          throw new Error(
-            `Failed to load images for pages ${missing.map((i) => i + 1).join(', ')}`,
-          );
-        }
-      };
-
-      const currentDoc = loadedDocumentRef.current;
-      const totalPages = currentDoc?.pages?.length ?? 0;
-      const dirtyPageIndices = dirtyPages
-        .map((isDirty, index) => (isDirty ? index : -1))
-        .filter((index) => index >= 0);
-
-      const canUseIncremental =
-        isLazyMode &&
-        cachedJobId &&
-        dirtyPageIndices.length > 0;
-
-      if (canUseIncremental) {
-        await ensureImagesForPages(dirtyPageIndices);
-
-        try {
-          const payload = buildPayload();
-          if (!payload) {
-            throw new Error('Failed to build payload');
+          for (const index of uniqueIndices) {
+            if (!loadedImagePagesRef.current.has(index)) {
+              await loadImagesForPage(index);
+            }
           }
 
-          const { document, filename } = payload;
-          const dirtyPageSet = new Set(dirtyPageIndices);
-          const partialPages =
-            document.pages?.filter((_, index) => dirtyPageSet.has(index)) ?? [];
-
-          const partialDocument: PdfJsonDocument = {
-            // Incremental export only needs changed pages.
-            // Fonts/resources/content streams are resolved from server-side cache.
-            pages: partialPages,
-          };
-
-          const baseName = sanitizeBaseName(filename).replace(/-edited$/u, '');
-          const expectedName = `${baseName || 'document'}.pdf`;
-          const response = await apiClient.post(
-            `/api/v1/convert/pdf/text-editor/partial/${cachedJobIdRef.current}?filename=${encodeURIComponent(expectedName)}`,
-            partialDocument,
-            {
-              responseType: 'blob',
-            },
-          );
-
-          const contentDisposition = response.headers?.['content-disposition'] ?? '';
-          const detectedName = getFilenameFromHeaders(contentDisposition);
-          const downloadName = detectedName || expectedName;
-
-          downloadBlob(response.data, downloadName);
-
-          if (onComplete && !skipComplete) {
-            const pdfFile = new File([response.data], downloadName, { type: 'application/pdf' });
-            onComplete([pdfFile]);
+          const maxWaitTime = 15000;
+          const pollInterval = 150;
+          const startWait = Date.now();
+          while (Date.now() - startWait < maxWaitTime) {
+            const allLoaded = uniqueIndices.every(
+              (index) => loadedImagePagesRef.current.has(index) && imagesByPageRef.current[index] !== undefined,
+            );
+            const anyLoading = uniqueIndices.some((index) => loadingImagePagesRef.current.has(index));
+            if (allLoaded && !anyLoading) {
+              return;
+            }
+            await new Promise((resolve) => setTimeout(resolve, pollInterval));
           }
-          setErrorMessage(null);
+
+          const missing = uniqueIndices.filter((index) => !loadedImagePagesRef.current.has(index));
+          if (missing.length > 0) {
+            throw new Error(`Failed to load images for pages ${missing.map((i) => i + 1).join(", ")}`);
+          }
+        };
+
+        const currentDoc = loadedDocumentRef.current;
+        const totalPages = currentDoc?.pages?.length ?? 0;
+        const dirtyPageIndices = dirtyPages.map((isDirty, index) => (isDirty ? index : -1)).filter((index) => index >= 0);
+
+        const canUseIncremental = isLazyMode && cachedJobId && dirtyPageIndices.length > 0;
+
+        if (canUseIncremental) {
+          await ensureImagesForPages(dirtyPageIndices);
+
+          try {
+            const payload = buildPayload();
+            if (!payload) {
+              throw new Error("Failed to build payload");
+            }
+
+            const { document, filename } = payload;
+            const dirtyPageSet = new Set(dirtyPageIndices);
+            const partialPages = document.pages?.filter((_, index) => dirtyPageSet.has(index)) ?? [];
+
+            const partialDocument: PdfJsonDocument = {
+              // Incremental export only needs changed pages.
+              // Fonts/resources/content streams are resolved from server-side cache.
+              pages: partialPages,
+            };
+
+            const baseName = sanitizeBaseName(filename).replace(/-edited$/u, "");
+            const expectedName = `${baseName || "document"}.pdf`;
+            const response = await apiClient.post(
+              `/api/v1/convert/pdf/text-editor/partial/${cachedJobIdRef.current}?filename=${encodeURIComponent(expectedName)}`,
+              partialDocument,
+              {
+                responseType: "blob",
+              },
+            );
+
+            const contentDisposition = response.headers?.["content-disposition"] ?? "";
+            const detectedName = getFilenameFromHeaders(contentDisposition);
+            const downloadName = detectedName || expectedName;
+
+            downloadBlob(response.data, downloadName);
+
+            if (onComplete && !skipComplete) {
+              const pdfFile = new File([response.data], downloadName, { type: "application/pdf" });
+              onComplete([pdfFile]);
+            }
+            setErrorMessage(null);
+            return;
+          } catch (incrementalError) {
+            if (isLazyMode && cachedJobIdRef.current) {
+              throw new Error("Incremental export failed for cached document. Please reload and retry.", {
+                cause: incrementalError,
+              });
+            }
+            console.warn("[handleGeneratePdf] Incremental export failed, falling back to full export", incrementalError);
+          }
+        }
+
+        if (isLazyMode && totalPages > 0) {
+          const allPageIndices = Array.from({ length: totalPages }, (_, index) => index);
+          await ensureImagesForPages(allPageIndices);
+        }
+
+        const payload = buildPayload();
+        if (!payload) {
           return;
-        } catch (incrementalError) {
-          if (isLazyMode && cachedJobIdRef.current) {
-            throw new Error('Incremental export failed for cached document. Please reload and retry.', {
-              cause: incrementalError,
-            });
-          }
-          console.warn(
-            '[handleGeneratePdf] Incremental export failed, falling back to full export',
-            incrementalError,
-          );
         }
+
+        const { document, filename } = payload;
+        const serialized = JSON.stringify(document);
+        const jsonFile = new File([serialized], filename, { type: "application/json" });
+
+        const formData = new FormData();
+        formData.append("fileInput", jsonFile);
+        const response = await apiClient.post(CONVERSION_ENDPOINTS["text-editor-pdf"], formData, {
+          responseType: "blob",
+        });
+
+        const contentDisposition = response.headers?.["content-disposition"] ?? "";
+        const detectedName = getFilenameFromHeaders(contentDisposition);
+        const baseName = sanitizeBaseName(filename).replace(/-edited$/u, "");
+        const downloadName = detectedName || `${baseName || "document"}.pdf`;
+
+        downloadBlob(response.data, downloadName);
+
+        if (onComplete && !skipComplete) {
+          const pdfFile = new File([response.data], downloadName, { type: "application/pdf" });
+          onComplete([pdfFile]);
+        }
+        setErrorMessage(null);
+      } catch (error: any) {
+        console.error("Failed to convert JSON back to PDF", error);
+        const message =
+          error?.response?.data ||
+          error?.message ||
+          t("pdfTextEditor.errors.pdfConversion", "Unable to convert the edited JSON back into a PDF.");
+        const msgString = typeof message === "string" ? message : String(message);
+        setErrorMessage(msgString);
+        if (onError) {
+          onError(msgString);
+        }
+      } finally {
+        setIsGeneratingPdf(false);
       }
-
-      if (isLazyMode && totalPages > 0) {
-        const allPageIndices = Array.from({ length: totalPages }, (_, index) => index);
-        await ensureImagesForPages(allPageIndices);
-      }
-
-      const payload = buildPayload();
-      if (!payload) {
-        return;
-      }
-
-      const { document, filename } = payload;
-      const serialized = JSON.stringify(document);
-      const jsonFile = new File([serialized], filename, { type: 'application/json' });
-
-      const formData = new FormData();
-      formData.append('fileInput', jsonFile);
-      const response = await apiClient.post(CONVERSION_ENDPOINTS['text-editor-pdf'], formData, {
-        responseType: 'blob',
-      });
-
-      const contentDisposition = response.headers?.['content-disposition'] ?? '';
-      const detectedName = getFilenameFromHeaders(contentDisposition);
-      const baseName = sanitizeBaseName(filename).replace(/-edited$/u, '');
-      const downloadName = detectedName || `${baseName || 'document'}.pdf`;
-
-      downloadBlob(response.data, downloadName);
-
-      if (onComplete && !skipComplete) {
-        const pdfFile = new File([response.data], downloadName, { type: 'application/pdf' });
-        onComplete([pdfFile]);
-      }
-      setErrorMessage(null);
-    } catch (error: any) {
-      console.error('Failed to convert JSON back to PDF', error);
-      const message =
-        error?.response?.data ||
-        error?.message ||
-        t('pdfTextEditor.errors.pdfConversion', 'Unable to convert the edited JSON back into a PDF.');
-      const msgString = typeof message === 'string' ? message : String(message);
-      setErrorMessage(msgString);
-      if (onError) {
-        onError(msgString);
-      }
-    } finally {
-      setIsGeneratingPdf(false);
-    }
-  }, [
-    buildPayload,
-    cachedJobId,
-    dirtyPages,
-    isLazyMode,
-    loadImagesForPage,
-    onComplete,
-    onError,
-    t,
-  ]);
+    },
+    [buildPayload, cachedJobId, dirtyPages, isLazyMode, loadImagesForPage, onComplete, onError, t],
+  );
 
   // Save changes to workbench (replaces the original file with edited version)
   const handleSaveToWorkbench = useCallback(async () => {
     setIsSavingToWorkbench(true);
-    
+
     try {
       if (!sourceFileIdRef.current) {
-        console.warn('[PdfTextEditor] No source file ID available for save to workbench');
+        console.warn("[PdfTextEditor] No source file ID available for save to workbench");
         // Fall back to generating PDF download if no source file
         await handleGeneratePdf(true);
         return;
@@ -1246,7 +1189,7 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
 
       const parentStub = selectors.getStirlingFileStub(sourceFileIdRef.current as any);
       if (!parentStub) {
-        console.warn('[PdfTextEditor] Could not find parent stub for save to workbench');
+        console.warn("[PdfTextEditor] Could not find parent stub for save to workbench");
         await handleGeneratePdf(true);
         return;
       }
@@ -1268,43 +1211,35 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
         const startWait = Date.now();
         while (Date.now() - startWait < maxWaitTime) {
           const allLoaded = uniqueIndices.every(
-            (index) =>
-              loadedImagePagesRef.current.has(index) &&
-              imagesByPageRef.current[index] !== undefined,
-          );
-          const anyLoading = uniqueIndices.some((index) =>
-            loadingImagePagesRef.current.has(index),
+            (index) => loadedImagePagesRef.current.has(index) && imagesByPageRef.current[index] !== undefined,
           );
+          const anyLoading = uniqueIndices.some((index) => loadingImagePagesRef.current.has(index));
           if (allLoaded && !anyLoading) {
             return;
           }
           await new Promise((resolve) => setTimeout(resolve, pollInterval));
         }
 
-        const missing = uniqueIndices.filter(
-          (index) => !loadedImagePagesRef.current.has(index),
-        );
+        const missing = uniqueIndices.filter((index) => !loadedImagePagesRef.current.has(index));
         if (missing.length > 0) {
-          throw new Error(
-            `Failed to load images for pages ${missing.map((i) => i + 1).join(', ')}`,
-          );
+          throw new Error(`Failed to load images for pages ${missing.map((i) => i + 1).join(", ")}`);
         }
       };
 
       const currentDoc = loadedDocumentRef.current;
       const totalPages = currentDoc?.pages?.length ?? 0;
-      const currentDirtyPages = getDirtyPages(groupsByPage, imagesByPage, originalGroupsRef.current, originalImagesRef.current);
-      const dirtyPageIndices = currentDirtyPages
-        .map((isDirty, index) => (isDirty ? index : -1))
-        .filter((index) => index >= 0);
+      const currentDirtyPages = getDirtyPages(
+        groupsByPage,
+        imagesByPage,
+        originalGroupsRef.current,
+        originalImagesRef.current,
+      );
+      const dirtyPageIndices = currentDirtyPages.map((isDirty, index) => (isDirty ? index : -1)).filter((index) => index >= 0);
 
       let pdfBlob: Blob;
       let downloadName: string;
 
-      const canUseIncremental =
-        isLazyMode &&
-        cachedJobId &&
-        dirtyPageIndices.length > 0;
+      const canUseIncremental = isLazyMode && cachedJobId && dirtyPageIndices.length > 0;
 
       if (canUseIncremental) {
         await ensureImagesForPages(dirtyPageIndices);
@@ -1312,13 +1247,12 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
         try {
           const payload = buildPayload();
           if (!payload) {
-            throw new Error('Failed to build payload');
+            throw new Error("Failed to build payload");
           }
 
           const { document, filename } = payload;
           const dirtyPageSet = new Set(dirtyPageIndices);
-          const partialPages =
-            document.pages?.filter((_, index) => dirtyPageSet.has(index)) ?? [];
+          const partialPages = document.pages?.filter((_, index) => dirtyPageSet.has(index)) ?? [];
 
           const partialDocument: PdfJsonDocument = {
             // Incremental export only needs changed pages.
@@ -1326,30 +1260,27 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
             pages: partialPages,
           };
 
-          const baseName = sanitizeBaseName(filename).replace(/-edited$/u, '');
-          const expectedName = `${baseName || 'document'}.pdf`;
+          const baseName = sanitizeBaseName(filename).replace(/-edited$/u, "");
+          const expectedName = `${baseName || "document"}.pdf`;
           const response = await apiClient.post(
             `/api/v1/convert/pdf/text-editor/partial/${cachedJobId}?filename=${encodeURIComponent(expectedName)}`,
             partialDocument,
             {
-              responseType: 'blob',
+              responseType: "blob",
             },
           );
 
-          const contentDisposition = response.headers?.['content-disposition'] ?? '';
+          const contentDisposition = response.headers?.["content-disposition"] ?? "";
           const detectedName = getFilenameFromHeaders(contentDisposition);
           downloadName = detectedName || expectedName;
           pdfBlob = response.data;
         } catch (incrementalError) {
           if (isLazyMode && cachedJobId) {
-            throw new Error('Incremental export failed for cached document. Please reload and retry.', {
+            throw new Error("Incremental export failed for cached document. Please reload and retry.", {
               cause: incrementalError,
             });
           }
-          console.warn(
-            '[handleSaveToWorkbench] Incremental export failed, falling back to full export',
-            incrementalError,
-          );
+          console.warn("[handleSaveToWorkbench] Incremental export failed, falling back to full export", incrementalError);
           // Fall through to full export
           if (isLazyMode && totalPages > 0) {
             const allPageIndices = Array.from({ length: totalPages }, (_, index) => index);
@@ -1358,23 +1289,23 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
 
           const payload = buildPayload();
           if (!payload) {
-            throw new Error('Failed to build payload', { cause: incrementalError });
+            throw new Error("Failed to build payload", { cause: incrementalError });
           }
 
           const { document, filename } = payload;
           const serialized = JSON.stringify(document);
-          const jsonFile = new File([serialized], filename, { type: 'application/json' });
+          const jsonFile = new File([serialized], filename, { type: "application/json" });
 
           const formData = new FormData();
-          formData.append('fileInput', jsonFile);
-          const response = await apiClient.post(CONVERSION_ENDPOINTS['text-editor-pdf'], formData, {
-            responseType: 'blob',
+          formData.append("fileInput", jsonFile);
+          const response = await apiClient.post(CONVERSION_ENDPOINTS["text-editor-pdf"], formData, {
+            responseType: "blob",
           });
 
-          const contentDisposition = response.headers?.['content-disposition'] ?? '';
+          const contentDisposition = response.headers?.["content-disposition"] ?? "";
           const detectedName = getFilenameFromHeaders(contentDisposition);
-          const baseName = sanitizeBaseName(filename).replace(/-edited$/u, '');
-          downloadName = detectedName || `${baseName || 'document'}.pdf`;
+          const baseName = sanitizeBaseName(filename).replace(/-edited$/u, "");
+          downloadName = detectedName || `${baseName || "document"}.pdf`;
           pdfBlob = response.data;
         }
       } else {
@@ -1385,35 +1316,31 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
 
         const payload = buildPayload();
         if (!payload) {
-          throw new Error('Failed to build payload');
+          throw new Error("Failed to build payload");
         }
 
         const { document, filename } = payload;
         const serialized = JSON.stringify(document);
-        const jsonFile = new File([serialized], filename, { type: 'application/json' });
+        const jsonFile = new File([serialized], filename, { type: "application/json" });
 
         const formData = new FormData();
-        formData.append('fileInput', jsonFile);
-        const response = await apiClient.post(CONVERSION_ENDPOINTS['text-editor-pdf'], formData, {
-          responseType: 'blob',
+        formData.append("fileInput", jsonFile);
+        const response = await apiClient.post(CONVERSION_ENDPOINTS["text-editor-pdf"], formData, {
+          responseType: "blob",
         });
 
-        const contentDisposition = response.headers?.['content-disposition'] ?? '';
+        const contentDisposition = response.headers?.["content-disposition"] ?? "";
         const detectedName = getFilenameFromHeaders(contentDisposition);
-        const baseName = sanitizeBaseName(filename).replace(/-edited$/u, '');
-        downloadName = detectedName || `${baseName || 'document'}.pdf`;
+        const baseName = sanitizeBaseName(filename).replace(/-edited$/u, "");
+        downloadName = detectedName || `${baseName || "document"}.pdf`;
         pdfBlob = response.data;
       }
 
       // Create the new PDF file
-      const pdfFile = new File([pdfBlob], downloadName, { type: 'application/pdf' });
+      const pdfFile = new File([pdfBlob], downloadName, { type: "application/pdf" });
 
       // Create StirlingFile and stub for the output
-      const { stirlingFiles, stubs } = await createStirlingFilesAndStubs(
-        [pdfFile],
-        parentStub,
-        'pdfTextEditor',
-      );
+      const { stirlingFiles, stubs } = await createStirlingFilesAndStubs([pdfFile], parentStub, "pdfTextEditor");
 
       // Replace the original file with the edited version
       await consumeFiles([sourceFileIdRef.current as any], stirlingFiles, stubs);
@@ -1425,16 +1352,16 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
       // once React has processed the state update
       navigationActions.setHasUnsavedChanges(false);
       setErrorMessage(null);
-      
+
       // Set flag to trigger navigation after state update is processed
       setShouldNavigateAfterSave(true);
     } catch (error: any) {
-      console.error('Failed to save to workbench', error);
+      console.error("Failed to save to workbench", error);
       const message =
         error?.response?.data ||
         error?.message ||
-        t('pdfTextEditor.errors.pdfConversion', 'Unable to save changes to workbench.');
-      const msgString = typeof message === 'string' ? message : String(message);
+        t("pdfTextEditor.errors.pdfConversion", "Unable to save changes to workbench.");
+      const msgString = typeof message === "string" ? message : String(message);
       setErrorMessage(msgString);
       if (onError) {
         onError(msgString);
@@ -1464,11 +1391,7 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
       }
       const currentToken = previewRequestIdRef.current;
       const recordedScale = previewScaleRef.current.get(pageIndex);
-      if (
-        pagePreviewsRef.current.has(pageIndex) &&
-        recordedScale !== undefined &&
-        Math.abs(recordedScale - scale) < 0.05
-      ) {
+      if (pagePreviewsRef.current.has(pageIndex) && recordedScale !== undefined && Math.abs(recordedScale - scale) < 0.05) {
         return;
       }
       if (previewRenderingRef.current.has(pageIndex)) {
@@ -1478,10 +1401,10 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
       try {
         const page = await pdfDocumentRef.current.getPage(pageIndex + 1);
         const viewport = page.getViewport({ scale: Math.max(scale, 0.5) });
-        const canvas = document.createElement('canvas');
+        const canvas = document.createElement("canvas");
         canvas.width = viewport.width;
         canvas.height = viewport.height;
-        const context = canvas.getContext('2d');
+        const context = canvas.getContext("2d");
         if (!context) {
           page.cleanup();
           return;
@@ -1494,11 +1417,11 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
           const maskMarginTop = 0;
           const maskMarginBottom = Math.max(3 * scale, 3);
           context.save();
-          context.globalCompositeOperation = 'destination-out';
-          context.fillStyle = '#000000';
+          context.globalCompositeOperation = "destination-out";
+          context.fillStyle = "#000000";
           for (const item of textContent.items) {
             // Skip TextMarkedContent items, only process TextItem
-            if (!('transform' in item)) continue;
+            if (!("transform" in item)) continue;
 
             const transform = Util.transform(viewport.transform, item.transform);
             const a = transform[0];
@@ -1512,7 +1435,10 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
             const width = (item.width || 0) * viewport.scale + maskMarginX * 2;
             const fontHeight = Math.hypot(c, d);
             const rawHeight = item.height ? item.height * viewport.scale : fontHeight;
-            const height = Math.max(rawHeight + maskMarginTop + maskMarginBottom, fontHeight + maskMarginTop + maskMarginBottom);
+            const height = Math.max(
+              rawHeight + maskMarginTop + maskMarginBottom,
+              fontHeight + maskMarginTop + maskMarginBottom,
+            );
             const baselineOffset = height - maskMarginBottom;
 
             context.save();
@@ -1523,7 +1449,7 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
           }
           context.restore();
         } catch (textError) {
-          console.warn('[PdfTextEditor] Failed to strip text from preview', textError);
+          console.warn("[PdfTextEditor] Failed to strip text from preview", textError);
         }
 
         // Also mask out images to prevent ghost/shadow images when they're moved
@@ -1531,8 +1457,8 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
           const pageImages = imagesByPage[pageIndex] ?? [];
           if (pageImages.length > 0) {
             context.save();
-            context.globalCompositeOperation = 'destination-out';
-            context.fillStyle = '#000000';
+            context.globalCompositeOperation = "destination-out";
+            context.fillStyle = "#000000";
             for (const image of pageImages) {
               if (!image) continue;
               // Get image bounds in PDF coordinates
@@ -1553,9 +1479,9 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
             context.restore();
           }
         } catch (imageError) {
-          console.warn('[PdfTextEditor] Failed to strip images from preview', imageError);
+          console.warn("[PdfTextEditor] Failed to strip images from preview", imageError);
         }
-        const dataUrl = canvas.toDataURL('image/png');
+        const dataUrl = canvas.toDataURL("image/png");
         page.cleanup();
         if (previewRequestIdRef.current !== currentToken) {
           return;
@@ -1567,7 +1493,7 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
           return next;
         });
       } catch (error) {
-        console.warn('[PdfTextEditor] Failed to render page preview', error);
+        console.warn("[PdfTextEditor] Failed to render page preview", error);
       } finally {
         previewRenderingRef.current.delete(pageIndex);
       }
@@ -1583,79 +1509,82 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
     }
   }, [groupingMode, resetToDocument]);
 
-  const viewData = useMemo<PdfTextEditorViewData>(() => ({
-    document: loadedDocument,
-    groupsByPage,
-    imagesByPage,
-    pagePreviews,
-    selectedPage,
-    dirtyPages,
-    hasDocument,
-    hasVectorPreview,
-    fileName,
-    errorMessage,
-    isGeneratingPdf,
-    isSavingToWorkbench,
-    isConverting,
-    conversionProgress,
-    hasChanges,
-    forceSingleTextElement,
-    groupingMode,
-    autoScaleText,
-    onAutoScaleTextChange: setAutoScaleText,
-    requestPagePreview,
-    onSelectPage: handleSelectPage,
-    onGroupEdit: handleGroupTextChange,
-    onGroupDelete: handleGroupDelete,
-    onImageTransform: handleImageTransform,
-    onImageReset: handleImageReset,
-    onReset: handleResetEdits,
-    onDownloadJson: handleDownloadJson,
-    onGeneratePdf: handleGeneratePdf,
-    onGeneratePdfForNavigation: async () => {
-      // Generate PDF without triggering tool completion
-      await handleGeneratePdf(true);
-    },
-    onSaveToWorkbench: handleSaveToWorkbench,
-    onForceSingleTextElementChange: setForceSingleTextElement,
-    onGroupingModeChange: setGroupingMode,
-    onMergeGroups: handleMergeGroups,
-    onUngroupGroup: handleUngroupGroup,
-    onLoadFile: handleLoadFileFromDropzone,
-  }), [
-    handleMergeGroups,
-    handleUngroupGroup,
-    handleImageTransform,
-    handleSaveToWorkbench,
-    imagesByPage,
-    isSavingToWorkbench,
-    pagePreviews,
-    dirtyPages,
-    errorMessage,
-    fileName,
-    groupsByPage,
-    handleDownloadJson,
-    handleGeneratePdf,
-    handleGroupTextChange,
-    handleGroupDelete,
-    handleImageReset,
-    handleResetEdits,
-    handleSelectPage,
-    hasChanges,
-    hasDocument,
-    hasVectorPreview,
-    isGeneratingPdf,
-    isConverting,
-    conversionProgress,
-    loadedDocument,
-    selectedPage,
-    forceSingleTextElement,
-    groupingMode,
-    autoScaleText,
-    requestPagePreview,
-    setForceSingleTextElement,
-    handleLoadFileFromDropzone,
-  ]);
+  const viewData = useMemo<PdfTextEditorViewData>(
+    () => ({
+      document: loadedDocument,
+      groupsByPage,
+      imagesByPage,
+      pagePreviews,
+      selectedPage,
+      dirtyPages,
+      hasDocument,
+      hasVectorPreview,
+      fileName,
+      errorMessage,
+      isGeneratingPdf,
+      isSavingToWorkbench,
+      isConverting,
+      conversionProgress,
+      hasChanges,
+      forceSingleTextElement,
+      groupingMode,
+      autoScaleText,
+      onAutoScaleTextChange: setAutoScaleText,
+      requestPagePreview,
+      onSelectPage: handleSelectPage,
+      onGroupEdit: handleGroupTextChange,
+      onGroupDelete: handleGroupDelete,
+      onImageTransform: handleImageTransform,
+      onImageReset: handleImageReset,
+      onReset: handleResetEdits,
+      onDownloadJson: handleDownloadJson,
+      onGeneratePdf: handleGeneratePdf,
+      onGeneratePdfForNavigation: async () => {
+        // Generate PDF without triggering tool completion
+        await handleGeneratePdf(true);
+      },
+      onSaveToWorkbench: handleSaveToWorkbench,
+      onForceSingleTextElementChange: setForceSingleTextElement,
+      onGroupingModeChange: setGroupingMode,
+      onMergeGroups: handleMergeGroups,
+      onUngroupGroup: handleUngroupGroup,
+      onLoadFile: handleLoadFileFromDropzone,
+    }),
+    [
+      handleMergeGroups,
+      handleUngroupGroup,
+      handleImageTransform,
+      handleSaveToWorkbench,
+      imagesByPage,
+      isSavingToWorkbench,
+      pagePreviews,
+      dirtyPages,
+      errorMessage,
+      fileName,
+      groupsByPage,
+      handleDownloadJson,
+      handleGeneratePdf,
+      handleGroupTextChange,
+      handleGroupDelete,
+      handleImageReset,
+      handleResetEdits,
+      handleSelectPage,
+      hasChanges,
+      hasDocument,
+      hasVectorPreview,
+      isGeneratingPdf,
+      isConverting,
+      conversionProgress,
+      loadedDocument,
+      selectedPage,
+      forceSingleTextElement,
+      groupingMode,
+      autoScaleText,
+      requestPagePreview,
+      setForceSingleTextElement,
+      handleLoadFileFromDropzone,
+    ],
+  );
 
   const latestViewDataRef = useRef<PdfTextEditorViewData>(viewData);
   latestViewDataRef.current = viewData;
@@ -1674,7 +1603,7 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
       return;
     }
 
-    if (navigationState.selectedTool !== 'pdfTextEditor') {
+    if (navigationState.selectedTool !== "pdfTextEditor") {
       return;
     }
 
@@ -1697,7 +1626,7 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
   // Auto-navigate to workbench when tool is selected
   const hasAutoOpenedWorkbenchRef = useRef(false);
   useEffect(() => {
-    if (navigationState.selectedTool !== 'pdfTextEditor') {
+    if (navigationState.selectedTool !== "pdfTextEditor") {
       hasAutoOpenedWorkbenchRef.current = false;
       return;
     }
@@ -1722,14 +1651,9 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
       icon: <DescriptionIcon fontSize="small" />,
       component: PdfTextEditorView,
     });
-    setLeftPanelView('toolContent');
+    setLeftPanelView("toolContent");
     setCustomWorkbenchViewData(WORKBENCH_VIEW_ID, latestViewDataRef.current);
-  }, [
-    registerCustomWorkbenchView,
-    setCustomWorkbenchViewData,
-    setLeftPanelView,
-    viewLabel,
-  ]);
+  }, [registerCustomWorkbenchView, setCustomWorkbenchViewData, setLeftPanelView, viewLabel]);
 
   // Cleanup ONLY on component unmount (not on re-renders)
   useEffect(() => {
@@ -1739,12 +1663,12 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
       if (jobId) {
         console.log(`[PdfTextEditor] Cleaning up cached document on unmount: ${jobId}`);
         apiClient.post(`/api/v1/convert/pdf/text-editor/clear-cache/${jobId}`).catch((error) => {
-          console.warn('[PdfTextEditor] Failed to clear cache on unmount:', error);
+          console.warn("[PdfTextEditor] Failed to clear cache on unmount:", error);
         });
       }
       clearCustomWorkbenchViewData(WORKBENCH_VIEW_ID);
       unregisterCustomWorkbenchView(WORKBENCH_VIEW_ID);
-      setLeftPanelView('toolPicker');
+      setLeftPanelView("toolPicker");
     };
   }, []); // Empty deps = cleanup only on unmount
 
@@ -1767,7 +1691,7 @@ const PdfTextEditor = ({ onComplete, onError }: BaseToolProps) => {
 };
 
 (PdfTextEditor as ToolComponent).tool = () => {
-  throw new Error('PDF Text Editor does not support automation operations.');
+  throw new Error("PDF Text Editor does not support automation operations.");
 };
 
 (PdfTextEditor as ToolComponent).getDefaultParameters = () => ({
diff --git a/frontend/src/core/tools/pdfTextEditor/fontAnalysis.ts b/frontend/src/core/tools/pdfTextEditor/fontAnalysis.ts
index 3582b9b787..d4a5041f80 100644
--- a/frontend/src/core/tools/pdfTextEditor/fontAnalysis.ts
+++ b/frontend/src/core/tools/pdfTextEditor/fontAnalysis.ts
@@ -1,6 +1,6 @@
-import { PdfJsonDocument, PdfJsonFont } from '@app/tools/pdfTextEditor/pdfTextEditorTypes';
+import { PdfJsonDocument, PdfJsonFont } from "@app/tools/pdfTextEditor/pdfTextEditorTypes";
 
-export type FontStatus = 'perfect' | 'embedded-subset' | 'system-fallback' | 'missing' | 'unknown';
+export type FontStatus = "perfect" | "embedded-subset" | "system-fallback" | "missing" | "unknown";
 
 export interface FontAnalysis {
   fontId: string;
@@ -47,17 +47,27 @@ const isSubsetFont = (baseName: string | null | undefined): boolean => {
 const isStandard14Font = (font: PdfJsonFont): boolean => {
   if (font.standard14Name) return true;
 
-  const baseName = (font.baseName || '').toLowerCase().replace(/[-_\s]/g, '');
+  const baseName = (font.baseName || "").toLowerCase().replace(/[-_\s]/g, "");
 
   const standard14Patterns = [
-    'timesroman', 'timesbold', 'timesitalic', 'timesbolditalic',
-    'helvetica', 'helveticabold', 'helveticaoblique', 'helveticaboldoblique',
-    'courier', 'courierbold', 'courieroblique', 'courierboldoblique',
-    'symbol', 'zapfdingbats'
+    "timesroman",
+    "timesbold",
+    "timesitalic",
+    "timesbolditalic",
+    "helvetica",
+    "helveticabold",
+    "helveticaoblique",
+    "helveticaboldoblique",
+    "courier",
+    "courierbold",
+    "courieroblique",
+    "courierboldoblique",
+    "symbol",
+    "zapfdingbats",
   ];
 
   // Check exact matches or if the base name contains the pattern
-  return standard14Patterns.some(pattern => {
+  return standard14Patterns.some((pattern) => {
     // Exact match
     if (baseName === pattern) return true;
     // Contains pattern (e.g., "ABCDEF+Helvetica" matches "helvetica")
@@ -74,22 +84,36 @@ const isStandard14Font = (font: PdfJsonFont): boolean => {
  * Based on PdfJsonFallbackFontService.java
  */
 const hasBackendFallbackFont = (font: PdfJsonFont): boolean => {
-  const baseName = (font.baseName || '').toLowerCase().replace(/[-_\s]/g, '');
+  const baseName = (font.baseName || "").toLowerCase().replace(/[-_\s]/g, "");
 
   // Backend has these font families available (from PdfJsonFallbackFontService)
   const backendFonts = [
     // Liberation fonts (metric-compatible with MS core fonts)
-    'arial', 'helvetica', 'arimo',
-    'times', 'timesnewroman', 'tinos',
-    'courier', 'couriernew', 'cousine',
-    'liberation', 'liberationsans', 'liberationserif', 'liberationmono',
+    "arial",
+    "helvetica",
+    "arimo",
+    "times",
+    "timesnewroman",
+    "tinos",
+    "courier",
+    "couriernew",
+    "cousine",
+    "liberation",
+    "liberationsans",
+    "liberationserif",
+    "liberationmono",
     // DejaVu fonts
-    'dejavu', 'dejavusans', 'dejavuserif', 'dejavumono', 'dejavusansmono',
+    "dejavu",
+    "dejavusans",
+    "dejavuserif",
+    "dejavumono",
+    "dejavusansmono",
     // Noto fonts
-    'noto', 'notosans'
+    "noto",
+    "notosans",
   ];
 
-  return backendFonts.some(pattern => {
+  return backendFonts.some((pattern) => {
     if (baseName === pattern) return true;
     if (baseName.includes(pattern)) return true;
     return false;
@@ -111,8 +135,8 @@ const extractBaseFontName = (baseName: string | null | undefined): string | null
  * Takes allFonts to check if full versions of subset fonts are available
  */
 export const analyzeFontReproduction = (font: PdfJsonFont, allFonts?: PdfJsonFont[]): FontAnalysis => {
-  const fontId = font.id || font.uid || 'unknown';
-  const baseName = font.baseName || 'Unknown Font';
+  const fontId = font.id || font.uid || "unknown";
+  const baseName = font.baseName || "Unknown Font";
   const isSubset = isSubsetFont(font.baseName);
   const isStandard14 = isStandard14Font(font);
   const hasBackendFallback = hasBackendFallbackFont(font);
@@ -120,18 +144,18 @@ export const analyzeFontReproduction = (font: PdfJsonFont, allFonts?: PdfJsonFon
 
   // Check available web formats (ordered by preference)
   const webFormats = [
-    { key: 'webProgram', format: font.webProgramFormat },
-    { key: 'pdfProgram', format: font.pdfProgramFormat },
-    { key: 'program', format: font.programFormat },
+    { key: "webProgram", format: font.webProgramFormat },
+    { key: "pdfProgram", format: font.pdfProgramFormat },
+    { key: "program", format: font.programFormat },
   ];
 
-  const availableWebFormat = webFormats.find(f => f.format);
+  const availableWebFormat = webFormats.find((f) => f.format);
   const hasWebFormat = !!availableWebFormat;
   const webFormat = availableWebFormat?.format || undefined;
 
   const warnings: string[] = [];
   const suggestions: string[] = [];
-  let status: FontStatus = 'unknown';
+  let status: FontStatus = "unknown";
 
   // Check if we have the full font when this is a subset
   let hasFullFontVersion = false;
@@ -139,7 +163,7 @@ export const analyzeFontReproduction = (font: PdfJsonFont, allFonts?: PdfJsonFon
     const baseFont = extractBaseFontName(font.baseName);
     if (baseFont) {
       // Look for a non-subset version of this font with a web format
-      hasFullFontVersion = allFonts.some(f => {
+      hasFullFontVersion = allFonts.some((f) => {
         const otherBaseName = extractBaseFontName(f.baseName);
         const isNotSubset = !isSubsetFont(f.baseName);
         const hasFormat = !!(f.webProgramFormat || f.pdfProgramFormat || f.programFormat);
@@ -152,60 +176,60 @@ export const analyzeFontReproduction = (font: PdfJsonFont, allFonts?: PdfJsonFon
   // Analyze font status - focusing on PDF export quality
   if (isStandard14) {
     // Standard 14 fonts are always available in PDF readers - perfect for export!
-    status = 'perfect';
-    suggestions.push('Standard PDF font (Times, Helvetica, or Courier). Always available in PDF readers.');
-    suggestions.push('Exported PDFs will render consistently across all PDF readers.');
+    status = "perfect";
+    suggestions.push("Standard PDF font (Times, Helvetica, or Courier). Always available in PDF readers.");
+    suggestions.push("Exported PDFs will render consistently across all PDF readers.");
   } else if (embedded && !isSubset) {
     // Perfect: Fully embedded with complete character set
-    status = 'perfect';
-    suggestions.push('Font is fully embedded. Exported PDFs will reproduce text perfectly, even with edits.');
+    status = "perfect";
+    suggestions.push("Font is fully embedded. Exported PDFs will reproduce text perfectly, even with edits.");
   } else if (embedded && isSubset && (hasFullFontVersion || hasBackendFallback)) {
     // Subset but we have the full font or backend fallback - perfect!
-    status = 'perfect';
+    status = "perfect";
     if (hasFullFontVersion) {
-      suggestions.push('Full font version is also available in the document. Exported PDFs can reproduce all characters.');
+      suggestions.push("Full font version is also available in the document. Exported PDFs can reproduce all characters.");
     } else if (hasBackendFallback) {
-      suggestions.push('Backend has the full font available. Exported PDFs can reproduce all characters, including new text.');
+      suggestions.push("Backend has the full font available. Exported PDFs can reproduce all characters, including new text.");
     }
   } else if (embedded && isSubset) {
     // Good, but subset: May have missing characters if user adds new text
-    status = 'embedded-subset';
-    warnings.push('This is a subset font - only specific characters are embedded in the PDF.');
-    warnings.push('Exported PDFs may have missing characters if you add new text with this font.');
-    suggestions.push('Existing text will export correctly. New characters may render as boxes (☐) or fallback glyphs.');
+    status = "embedded-subset";
+    warnings.push("This is a subset font - only specific characters are embedded in the PDF.");
+    warnings.push("Exported PDFs may have missing characters if you add new text with this font.");
+    suggestions.push("Existing text will export correctly. New characters may render as boxes (☐) or fallback glyphs.");
   } else if (!embedded && hasBackendFallback) {
     // Not embedded, but backend has it - perfect for export!
-    status = 'perfect';
-    suggestions.push('Backend has this font available. Exported PDFs will use the backend fallback font.');
-    suggestions.push('Text will export correctly with consistent appearance.');
+    status = "perfect";
+    suggestions.push("Backend has this font available. Exported PDFs will use the backend fallback font.");
+    suggestions.push("Text will export correctly with consistent appearance.");
   } else if (!embedded) {
     // Not embedded - must rely on system fonts (risky for export)
-    status = 'missing';
-    warnings.push('Font is not embedded in the PDF.');
-    warnings.push('Exported PDFs will substitute with a fallback font, which may look very different.');
-    suggestions.push('Consider re-embedding fonts or accepting that the exported PDF will use fallback fonts.');
+    status = "missing";
+    warnings.push("Font is not embedded in the PDF.");
+    warnings.push("Exported PDFs will substitute with a fallback font, which may look very different.");
+    suggestions.push("Consider re-embedding fonts or accepting that the exported PDF will use fallback fonts.");
   } else if (embedded && !hasWebFormat) {
     // Embedded but no web format available (still okay for export)
-    status = 'perfect';
-    suggestions.push('Font is embedded in the PDF. Exported PDFs will reproduce correctly.');
-    suggestions.push('Web preview may use a fallback font, but the final PDF export will be accurate.');
+    status = "perfect";
+    suggestions.push("Font is embedded in the PDF. Exported PDFs will reproduce correctly.");
+    suggestions.push("Web preview may use a fallback font, but the final PDF export will be accurate.");
   }
 
   // Additional warnings based on font properties
-  if (font.subtype === 'Type0' && font.cidSystemInfo) {
-    const registry = font.cidSystemInfo.registry || '';
-    const ordering = font.cidSystemInfo.ordering || '';
-    if (registry.includes('Adobe') && (ordering.includes('Identity') || ordering.includes('UCS'))) {
+  if (font.subtype === "Type0" && font.cidSystemInfo) {
+    const registry = font.cidSystemInfo.registry || "";
+    const ordering = font.cidSystemInfo.ordering || "";
+    if (registry.includes("Adobe") && (ordering.includes("Identity") || ordering.includes("UCS"))) {
       // CID fonts with Identity encoding are common for Asian languages
       if (!embedded || !hasWebFormat) {
-        warnings.push('This CID font may contain Asian or Unicode characters.');
+        warnings.push("This CID font may contain Asian or Unicode characters.");
       }
     }
   }
 
-  if (font.encoding && !font.encoding.includes('WinAnsiEncoding') && !font.encoding.includes('MacRomanEncoding')) {
+  if (font.encoding && !font.encoding.includes("WinAnsiEncoding") && !font.encoding.includes("MacRomanEncoding")) {
     // Custom encodings may cause issues
-    if (font.encoding !== 'Identity-H' && font.encoding !== 'Identity-V') {
+    if (font.encoding !== "Identity-H" && font.encoding !== "Identity-V") {
       warnings.push(`Custom encoding detected: ${font.encoding}`);
     }
   }
@@ -229,10 +253,7 @@ export const analyzeFontReproduction = (font: PdfJsonFont, allFonts?: PdfJsonFon
 /**
  * Gets fonts used on a specific page
  */
-export const getFontsForPage = (
-  document: PdfJsonDocument | null,
-  pageIndex: number
-): PdfJsonFont[] => {
+export const getFontsForPage = (document: PdfJsonDocument | null, pageIndex: number): PdfJsonFont[] => {
   if (!document?.fonts || !document?.pages || pageIndex < 0 || pageIndex >= document.pages.length) {
     return [];
   }
@@ -244,7 +265,7 @@ export const getFontsForPage = (
 
   // Get unique font IDs used on this page
   const fontIdsOnPage = new Set<string>();
-  page.textElements.forEach(element => {
+  page.textElements.forEach((element) => {
     if (element?.fontId) {
       fontIdsOnPage.add(element.fontId);
     }
@@ -253,7 +274,7 @@ export const getFontsForPage = (
   // Filter fonts to only those used on this page
   const allFonts = document.fonts.filter((font): font is PdfJsonFont => font !== null && font !== undefined);
 
-  const fontsOnPage = allFonts.filter(font => {
+  const fontsOnPage = allFonts.filter((font) => {
     // Match by ID
     if (font.id && fontIdsOnPage.has(font.id)) {
       return true;
@@ -274,8 +295,8 @@ export const getFontsForPage = (
 
   // Deduplicate by base font name to avoid showing the same font multiple times
   const uniqueFonts = new Map<string, PdfJsonFont>();
-  fontsOnPage.forEach(font => {
-    const baseName = extractBaseFontName(font.baseName) || font.baseName || font.id || 'unknown';
+  fontsOnPage.forEach((font) => {
+    const baseName = extractBaseFontName(font.baseName) || font.baseName || font.id || "unknown";
     const key = baseName.toLowerCase();
 
     // Keep the first occurrence, or prefer non-subset over subset
@@ -298,10 +319,7 @@ export const getFontsForPage = (
 /**
  * Analyzes all fonts in a PDF document (or just fonts for a specific page)
  */
-export const analyzeDocumentFonts = (
-  document: PdfJsonDocument | null,
-  pageIndex?: number
-): DocumentFontAnalysis => {
+export const analyzeDocumentFonts = (document: PdfJsonDocument | null, pageIndex?: number): DocumentFontAnalysis => {
   if (!document?.fonts || document.fonts.length === 0) {
     return {
       fonts: [],
@@ -320,9 +338,7 @@ export const analyzeDocumentFonts = (
   const allFonts = document.fonts.filter((font): font is PdfJsonFont => font !== null && font !== undefined);
 
   // Filter to page-specific fonts if pageIndex is provided
-  const fontsToAnalyze = pageIndex !== undefined
-    ? getFontsForPage(document, pageIndex)
-    : allFonts;
+  const fontsToAnalyze = pageIndex !== undefined ? getFontsForPage(document, pageIndex) : allFonts;
 
   if (fontsToAnalyze.length === 0) {
     return {
@@ -339,23 +355,23 @@ export const analyzeDocumentFonts = (
     };
   }
 
-  const fontAnalyses = fontsToAnalyze.map(font => analyzeFontReproduction(font, allFonts));
+  const fontAnalyses = fontsToAnalyze.map((font) => analyzeFontReproduction(font, allFonts));
 
   // Calculate summary
   const summary = {
-    perfect: fontAnalyses.filter(f => f.status === 'perfect').length,
-    embeddedSubset: fontAnalyses.filter(f => f.status === 'embedded-subset').length,
-    systemFallback: fontAnalyses.filter(f => f.status === 'system-fallback').length,
-    missing: fontAnalyses.filter(f => f.status === 'missing').length,
-    unknown: fontAnalyses.filter(f => f.status === 'unknown').length,
+    perfect: fontAnalyses.filter((f) => f.status === "perfect").length,
+    embeddedSubset: fontAnalyses.filter((f) => f.status === "embedded-subset").length,
+    systemFallback: fontAnalyses.filter((f) => f.status === "system-fallback").length,
+    missing: fontAnalyses.filter((f) => f.status === "missing").length,
+    unknown: fontAnalyses.filter((f) => f.status === "unknown").length,
   };
 
   // Can reproduce perfectly ONLY if all fonts are truly perfect (not subsets)
-  const canReproducePerfectly = fontAnalyses.every(f => f.status === 'perfect');
+  const canReproducePerfectly = fontAnalyses.every((f) => f.status === "perfect");
 
   // Has warnings if any font has issues (including subsets)
   const hasWarnings = fontAnalyses.some(
-    f => f.warnings.length > 0 || f.status === 'missing' || f.status === 'system-fallback' || f.status === 'embedded-subset'
+    (f) => f.warnings.length > 0 || f.status === "missing" || f.status === "system-fallback" || f.status === "embedded-subset",
   );
 
   return {
@@ -371,16 +387,16 @@ export const analyzeDocumentFonts = (
  */
 export const getFontStatusDescription = (status: FontStatus): string => {
   switch (status) {
-    case 'perfect':
-      return 'Fully embedded - perfect reproduction';
-    case 'embedded-subset':
-      return 'Embedded (subset) - existing text will render correctly';
-    case 'system-fallback':
-      return 'Using system font - appearance may differ';
-    case 'missing':
-      return 'Not embedded - will use fallback font';
-    case 'unknown':
-      return 'Unknown status';
+    case "perfect":
+      return "Fully embedded - perfect reproduction";
+    case "embedded-subset":
+      return "Embedded (subset) - existing text will render correctly";
+    case "system-fallback":
+      return "Using system font - appearance may differ";
+    case "missing":
+      return "Not embedded - will use fallback font";
+    case "unknown":
+      return "Unknown status";
   }
 };
 
@@ -389,16 +405,16 @@ export const getFontStatusDescription = (status: FontStatus): string => {
  */
 export const getFontStatusColor = (status: FontStatus): string => {
   switch (status) {
-    case 'perfect':
-      return 'green';
-    case 'embedded-subset':
-      return 'blue';
-    case 'system-fallback':
-      return 'yellow';
-    case 'missing':
-      return 'red';
-    case 'unknown':
-      return 'gray';
+    case "perfect":
+      return "green";
+    case "embedded-subset":
+      return "blue";
+    case "system-fallback":
+      return "yellow";
+    case "missing":
+      return "red";
+    case "unknown":
+      return "gray";
   }
 };
 
@@ -407,15 +423,15 @@ export const getFontStatusColor = (status: FontStatus): string => {
  */
 export const getFontStatusIcon = (status: FontStatus): string => {
   switch (status) {
-    case 'perfect':
-      return '✓';
-    case 'embedded-subset':
-      return '⚠';
-    case 'system-fallback':
-      return '⚠';
-    case 'missing':
-      return '✗';
-    case 'unknown':
-      return '?';
+    case "perfect":
+      return "✓";
+    case "embedded-subset":
+      return "⚠";
+    case "system-fallback":
+      return "⚠";
+    case "missing":
+      return "✗";
+    case "unknown":
+      return "?";
   }
 };
diff --git a/frontend/src/core/tools/pdfTextEditor/pdfTextEditorTypes.ts b/frontend/src/core/tools/pdfTextEditor/pdfTextEditorTypes.ts
index aab065a113..3bb5087a8a 100644
--- a/frontend/src/core/tools/pdfTextEditor/pdfTextEditorTypes.ts
+++ b/frontend/src/core/tools/pdfTextEditor/pdfTextEditorTypes.ts
@@ -160,7 +160,7 @@ export interface TextGroup {
   lineSpacing?: number | null;
   lineElementCounts?: number[] | null;
   color?: string | null;
-  fontWeight?: number | 'normal' | 'bold' | null;
+  fontWeight?: number | "normal" | "bold" | null;
   rotation?: number | null;
   anchor?: { x: number; y: number } | null;
   baselineLength?: number | null;
@@ -200,7 +200,7 @@ export interface PdfTextEditorViewData {
   conversionProgress: ConversionProgress | null;
   hasChanges: boolean;
   forceSingleTextElement: boolean;
-  groupingMode: 'auto' | 'paragraph' | 'singleLine';
+  groupingMode: "auto" | "paragraph" | "singleLine";
   autoScaleText: boolean;
   onAutoScaleTextChange: (value: boolean) => void;
   requestPagePreview: (pageIndex: number, scale: number) => void;
@@ -226,7 +226,7 @@ export interface PdfTextEditorViewData {
   onSaveToWorkbench: () => Promise<void>;
   isSavingToWorkbench: boolean;
   onForceSingleTextElementChange: (value: boolean) => void;
-  onGroupingModeChange: (value: 'auto' | 'paragraph' | 'singleLine') => void;
+  onGroupingModeChange: (value: "auto" | "paragraph" | "singleLine") => void;
   onMergeGroups: (pageIndex: number, groupIds: string[]) => boolean;
   onUngroupGroup: (pageIndex: number, groupId: string) => boolean;
   onLoadFile: (file: File) => void;
diff --git a/frontend/src/core/tools/pdfTextEditor/pdfTextEditorUtils.ts b/frontend/src/core/tools/pdfTextEditor/pdfTextEditorUtils.ts
index 07fde0beff..feb358df61 100644
--- a/frontend/src/core/tools/pdfTextEditor/pdfTextEditorUtils.ts
+++ b/frontend/src/core/tools/pdfTextEditor/pdfTextEditorUtils.ts
@@ -7,7 +7,7 @@ import {
   TextGroup,
   DEFAULT_PAGE_HEIGHT,
   DEFAULT_PAGE_WIDTH,
-} from '@app/tools/pdfTextEditor/pdfTextEditorTypes';
+} from "@app/tools/pdfTextEditor/pdfTextEditorTypes";
 
 const LINE_TOLERANCE = 2;
 const GAP_FACTOR = 0.6;
@@ -26,16 +26,16 @@ type FontMetricsMap = Map<string, FontMetrics>;
 
 const sanitizeParagraphText = (text: string | undefined | null): string => {
   if (!text) {
-    return '';
+    return "";
   }
-  return text.replace(/\r?\n/g, '');
+  return text.replace(/\r?\n/g, "");
 };
 
 const splitParagraphIntoLines = (text: string | undefined | null): string[] => {
   if (text === null || text === undefined) {
-    return [''];
+    return [""];
   }
-  return text.replace(/\r/g, '').split('\n');
+  return text.replace(/\r/g, "").split("\n");
 };
 
 const extractElementBaseline = (element: PdfJsonTextElement): number | null => {
@@ -44,9 +44,9 @@ const extractElementBaseline = (element: PdfJsonTextElement): number | null => {
   }
   if (element.textMatrix && element.textMatrix.length >= 6) {
     const baseline = element.textMatrix[5];
-    return typeof baseline === 'number' ? baseline : null;
+    return typeof baseline === "number" ? baseline : null;
   }
-  if (typeof element.y === 'number') {
+  if (typeof element.y === "number") {
     return element.y;
   }
   return null;
@@ -63,7 +63,7 @@ const shiftElementsBy = (elements: PdfJsonTextElement[], delta: number): PdfJson
       matrix[5] = (matrix[5] ?? 0) + delta;
       clone.textMatrix = matrix;
     }
-    if (typeof clone.y === 'number') {
+    if (typeof clone.y === "number") {
       clone.y += delta;
     } else if (clone.y === null || clone.y === undefined) {
       clone.y = delta;
@@ -115,7 +115,7 @@ export const valueOr = (value: number | null | undefined, fallback = 0): number
 
 export const cloneTextElement = (element: PdfJsonTextElement): PdfJsonTextElement => ({
   ...element,
-  textMatrix: element.textMatrix ? [...element.textMatrix] : element.textMatrix ?? undefined,
+  textMatrix: element.textMatrix ? [...element.textMatrix] : (element.textMatrix ?? undefined),
 });
 
 const clearGlyphHints = (element: PdfJsonTextElement): void => {
@@ -127,7 +127,7 @@ const clearGlyphHints = (element: PdfJsonTextElement): void => {
 
 export const cloneImageElement = (element: PdfJsonImageElement): PdfJsonImageElement => ({
   ...element,
-  transform: element.transform ? [...element.transform] : element.transform ?? undefined,
+  transform: element.transform ? [...element.transform] : (element.transform ?? undefined),
 });
 
 const getBaseline = (element: PdfJsonTextElement): number => {
@@ -150,7 +150,7 @@ const getWidth = (element: PdfJsonTextElement, metrics?: FontMetricsMap): number
     return width;
   }
 
-  const text = element.text ?? '';
+  const text = element.text ?? "";
   const glyphCount = Math.max(1, countGraphemes(text));
   const spacingFallback = Math.max(
     valueOr(element.spaceWidth, 0),
@@ -200,10 +200,7 @@ const getHeight = (element: PdfJsonTextElement, metrics?: FontMetricsMap): numbe
   return fontSize;
 };
 
-const getElementBounds = (
-  element: PdfJsonTextElement,
-  metrics?: FontMetricsMap,
-): BoundingBox => {
+const getElementBounds = (element: PdfJsonTextElement, metrics?: FontMetricsMap): BoundingBox => {
   const left = getX(element);
   const width = getWidth(element, metrics);
   const baseline = getBaseline(element);
@@ -261,11 +258,7 @@ const getSpacingHint = (element: PdfJsonTextElement): number => {
   return Math.max(characterSpacing, 0);
 };
 
-const estimateCharWidth = (
-  element: PdfJsonTextElement,
-  avgFontSize: number,
-  metrics?: FontMetricsMap,
-): number => {
+const estimateCharWidth = (element: PdfJsonTextElement, avgFontSize: number, metrics?: FontMetricsMap): number => {
   const rawWidth = getWidth(element, metrics);
   const minWidth = avgFontSize * MIN_CHAR_WIDTH_FACTOR;
   const maxWidth = avgFontSize * MAX_CHAR_WIDTH_FACTOR;
@@ -283,27 +276,18 @@ const mergeBounds = (bounds: BoundingBox[]): BoundingBox => {
       top: Math.min(acc.top, current.top),
       bottom: Math.max(acc.bottom, current.bottom),
     }),
-    { ...bounds[0] }
+    { ...bounds[0] },
   );
 };
 
-const shouldInsertSpace = (
-  prev: PdfJsonTextElement,
-  current: PdfJsonTextElement,
-  metrics?: FontMetricsMap,
-): boolean => {
+const shouldInsertSpace = (prev: PdfJsonTextElement, current: PdfJsonTextElement, metrics?: FontMetricsMap): boolean => {
   const prevRight = getX(prev) + getWidth(prev, metrics);
   const trailingGap = Math.max(0, getX(current) - prevRight);
   const avgFontSize = (getFontSize(prev) + getFontSize(current)) / 2;
   const baselineAdvance = Math.max(0, getX(current) - getX(prev));
   const charWidthEstimate = estimateCharWidth(prev, avgFontSize, metrics);
   const inferredGap = Math.max(0, baselineAdvance - charWidthEstimate);
-  const spacingHint = Math.max(
-    SPACE_MIN_GAP,
-    getSpacingHint(prev),
-    getSpacingHint(current),
-    avgFontSize * GAP_FACTOR,
-  );
+  const spacingHint = Math.max(SPACE_MIN_GAP, getSpacingHint(prev), getSpacingHint(current), avgFontSize * GAP_FACTOR);
 
   if (trailingGap > spacingHint) {
     return true;
@@ -313,8 +297,8 @@ const shouldInsertSpace = (
     return true;
   }
 
-  const prevText = (prev.text ?? '').trimEnd();
-  if (prevText.endsWith('-')) {
+  const prevText = (prev.text ?? "").trimEnd();
+  if (prevText.endsWith("-")) {
     return false;
   }
 
@@ -322,9 +306,9 @@ const shouldInsertSpace = (
 };
 
 const buildGroupText = (elements: PdfJsonTextElement[], metrics?: FontMetricsMap): string => {
-  let result = '';
+  let result = "";
   elements.forEach((element, index) => {
-    const value = element.text ?? '';
+    const value = element.text ?? "";
     if (index === 0) {
       result += value;
       return;
@@ -335,7 +319,7 @@ const buildGroupText = (elements: PdfJsonTextElement[], metrics?: FontMetricsMap
     const startsWithWhitespace = /^\s/u.test(value);
 
     if (needsSpace && !startsWithWhitespace) {
-      result += ' ';
+      result += " ";
     }
     result += value;
   });
@@ -349,7 +333,7 @@ const rgbToCss = (components: number[]): string => {
     const b = Math.round(Math.max(0, Math.min(1, components[2])) * 255);
     return `rgb(${r}, ${g}, ${b})`;
   }
-  return 'rgb(0, 0, 0)';
+  return "rgb(0, 0, 0)";
 };
 
 const cmykToCss = (components: number[]): string => {
@@ -363,7 +347,7 @@ const cmykToCss = (components: number[]): string => {
     const b = Math.round(255 * (1 - y) * (1 - k));
     return `rgb(${r}, ${g}, ${b})`;
   }
-  return 'rgb(0, 0, 0)';
+  return "rgb(0, 0, 0)";
 };
 
 const grayToCss = (components: number[]): string => {
@@ -371,7 +355,7 @@ const grayToCss = (components: number[]): string => {
     const gray = Math.round(Math.max(0, Math.min(1, components[0])) * 255);
     return `rgb(${gray}, ${gray}, ${gray})`;
   }
-  return 'rgb(0, 0, 0)';
+  return "rgb(0, 0, 0)";
 };
 
 const extractColor = (element: PdfJsonTextElement): string | null => {
@@ -380,15 +364,15 @@ const extractColor = (element: PdfJsonTextElement): string | null => {
     return null;
   }
 
-  const colorSpace = (fillColor.colorSpace ?? '').toLowerCase();
+  const colorSpace = (fillColor.colorSpace ?? "").toLowerCase();
 
-  if (colorSpace.includes('rgb') || colorSpace.includes('srgb')) {
+  if (colorSpace.includes("rgb") || colorSpace.includes("srgb")) {
     return rgbToCss(fillColor.components);
   }
-  if (colorSpace.includes('cmyk')) {
+  if (colorSpace.includes("cmyk")) {
     return cmykToCss(fillColor.components);
   }
-  if (colorSpace.includes('gray') || colorSpace.includes('grey')) {
+  if (colorSpace.includes("gray") || colorSpace.includes("grey")) {
     return grayToCss(fillColor.components);
   }
 
@@ -433,9 +417,7 @@ const extractElementRotation = (element: PdfJsonTextElement): number | null => {
 };
 
 const computeGroupRotation = (elements: PdfJsonTextElement[]): number | null => {
-  const angles = elements
-    .map(extractElementRotation)
-    .filter((angle): angle is number => angle !== null);
+  const angles = elements.map(extractElementRotation).filter((angle): angle is number => angle !== null);
   if (angles.length === 0) {
     return null;
   }
@@ -469,10 +451,8 @@ const getAnchorPoint = (element: PdfJsonTextElement): { x: number; y: number } =
   };
 };
 
-const computeBaselineLength = (
-  elements: PdfJsonTextElement[],
-  metrics?: FontMetricsMap,
-): number => elements.reduce((acc, current) => acc + getWidth(current, metrics), 0);
+const computeBaselineLength = (elements: PdfJsonTextElement[], metrics?: FontMetricsMap): number =>
+  elements.reduce((acc, current) => acc + getWidth(current, metrics), 0);
 
 const computeAverageBaseline = (elements: PdfJsonTextElement[]): number | null => {
   if (elements.length === 0) {
@@ -529,11 +509,7 @@ const cloneLineTemplate = (line: TextGroup): TextGroup => ({
   originalElements: line.originalElements.map(cloneTextElement),
 });
 
-const groupLinesIntoParagraphs = (
-  lineGroups: TextGroup[],
-  pageWidth: number,
-  metrics?: FontMetricsMap,
-): TextGroup[] => {
+const groupLinesIntoParagraphs = (lineGroups: TextGroup[], pageWidth: number, metrics?: FontMetricsMap): TextGroup[] => {
   if (lineGroups.length === 0) {
     return [];
   }
@@ -580,10 +556,10 @@ const groupLinesIntoParagraphs = (
     const currentWidth = currentRight - currentLeft;
 
     // Count word count to help identify bullets (typically short)
-    const prevWords = (prevLine.text ?? '').split(/\s+/).filter(w => w.length > 0).length;
-    const currentWords = (currentLine.text ?? '').split(/\s+/).filter(w => w.length > 0).length;
-    const prevText = (prevLine.text ?? '').trim();
-    const currentText = (currentLine.text ?? '').trim();
+    const prevWords = (prevLine.text ?? "").split(/\s+/).filter((w) => w.length > 0).length;
+    const currentWords = (currentLine.text ?? "").split(/\s+/).filter((w) => w.length > 0).length;
+    const prevText = (prevLine.text ?? "").trim();
+    const currentText = (currentLine.text ?? "").trim();
 
     // Bullet detection - look for bullet markers or very short lines
     const bulletMarkerRegex = /^[\u2022\u2023\u25E6\u2043\u2219•·◦‣⁃\-*]\s|^\d+[.)]\s|^[a-z][.)]\s/i;
@@ -593,7 +569,7 @@ const groupLinesIntoParagraphs = (
     // True bullets are:
     // 1. Have bullet markers/numbers OR
     // 2. Very short (< 10 words) AND much narrower than average (< 60% of page width)
-    const headingKeywords = ['action items', 'next steps', 'notes', 'logistics', 'tasks'];
+    const headingKeywords = ["action items", "next steps", "notes", "logistics", "tasks"];
     const normalizedPageWidth = pageWidth > 0 ? pageWidth : avgFontSize * 70;
     const maxReferenceWidth = normalizedPageWidth > 0 ? normalizedPageWidth : avgFontSize * 70;
     const indentDelta = currentLeft - prevLeft;
@@ -602,7 +578,7 @@ const groupLinesIntoParagraphs = (
     const currentWidthRatio = maxReferenceWidth > 0 ? currentWidth / maxReferenceWidth : 0;
     const prevWidthRatio = maxReferenceWidth > 0 ? prevWidth / maxReferenceWidth : 0;
     const prevLooksLikeHeading =
-      prevText.endsWith(':') ||
+      prevText.endsWith(":") ||
       (prevWords <= 4 && prevWidthRatio < 0.4) ||
       headingKeywords.some((keyword) => prevText.toLowerCase().includes(keyword));
 
@@ -638,18 +614,19 @@ const groupLinesIntoParagraphs = (
     // 4. NOT transitioning to bullets
     // 5. NOT both are bullets
     const shouldMerge =
-      isLeftAligned &&
-      sameFont &&
-      hasReasonableSpacing &&
-      !likelyBulletStart &&
-      !bothAreBullets &&
-      !currentIsBullet;
+      isLeftAligned && sameFont && hasReasonableSpacing && !likelyBulletStart && !bothAreBullets && !currentIsBullet;
 
     if (i < 10 || likelyBulletStart || bothAreBullets || !shouldMerge) {
       console.log(`  Line ${i}:`);
-      console.log(`    prev: "${prevText.substring(0, 40)}" (${prevWords}w, ${prevWidth.toFixed(0)}pt, marker:${prevHasBulletMarker}, bullet:${prevIsBullet})`);
-      console.log(`    curr: "${currentText.substring(0, 40)}" (${currentWords}w, ${currentWidth.toFixed(0)}pt, marker:${currentHasBulletMarker}, bullet:${currentIsBullet})`);
-      console.log(`    checks: leftAlign:${isLeftAligned} (${Math.abs(prevLeft - currentLeft).toFixed(1)}pt), sameFont:${sameFont}, spacing:${hasReasonableSpacing} (${lineSpacing.toFixed(1)}pt/${maxReasonableSpacing.toFixed(1)}pt)`);
+      console.log(
+        `    prev: "${prevText.substring(0, 40)}" (${prevWords}w, ${prevWidth.toFixed(0)}pt, marker:${prevHasBulletMarker}, bullet:${prevIsBullet})`,
+      );
+      console.log(
+        `    curr: "${currentText.substring(0, 40)}" (${currentWords}w, ${currentWidth.toFixed(0)}pt, marker:${currentHasBulletMarker}, bullet:${currentIsBullet})`,
+      );
+      console.log(
+        `    checks: leftAlign:${isLeftAligned} (${Math.abs(prevLeft - currentLeft).toFixed(1)}pt), sameFont:${sameFont}, spacing:${hasReasonableSpacing} (${lineSpacing.toFixed(1)}pt/${maxReasonableSpacing.toFixed(1)}pt)`,
+      );
       console.log(`    decision: merge=${shouldMerge} (bulletStart:${likelyBulletStart}, bothBullets:${bothAreBullets})`);
     }
 
@@ -673,20 +650,18 @@ const groupLinesIntoParagraphs = (
     }
 
     // Combine all elements from all lines
-    const lineTemplates = lines.map(line => cloneLineTemplate(line));
+    const lineTemplates = lines.map((line) => cloneLineTemplate(line));
     const flattenedLineTemplates = lineTemplates.flatMap((line) =>
-      line.childLineGroups && line.childLineGroups.length > 0
-        ? line.childLineGroups
-        : [line],
+      line.childLineGroups && line.childLineGroups.length > 0 ? line.childLineGroups : [line],
     );
     const allLines = flattenedLineTemplates.length > 0 ? flattenedLineTemplates : lineTemplates;
-    const allElements = allLines.flatMap(line => line.originalElements);
+    const allElements = allLines.flatMap((line) => line.originalElements);
     const pageIndex = lines[0].pageIndex;
     const lineElementCounts = allLines.map((line) => line.originalElements.length);
 
     // Create merged group with newlines between lines
-    const paragraphText = allLines.map(line => line.text).join('\n');
-    const mergedBounds = mergeBounds(allLines.map(line => line.bounds));
+    const paragraphText = allLines.map((line) => line.text).join("\n");
+    const mergedBounds = mergeBounds(allLines.map((line) => line.bounds));
     const spacingValues: number[] = [];
     for (let i = 1; i < allLines.length; i++) {
       const prevBaseline = allLines[i - 1].baseline ?? allLines[i - 1].bounds.bottom;
@@ -697,9 +672,7 @@ const groupLinesIntoParagraphs = (
       }
     }
     const averageSpacing =
-      spacingValues.length > 0
-        ? spacingValues.reduce((sum, value) => sum + value, 0) / spacingValues.length
-        : null;
+      spacingValues.length > 0 ? spacingValues.reduce((sum, value) => sum + value, 0) / spacingValues.length : null;
 
     const firstElement = allElements[0];
     const rotation = computeGroupRotation(allElements);
@@ -735,7 +708,7 @@ export const groupPageTextElements = (
   page: PdfJsonPage | null | undefined,
   pageIndex: number,
   metrics?: FontMetricsMap,
-  groupingMode: 'auto' | 'paragraph' | 'singleLine' = 'auto',
+  groupingMode: "auto" | "paragraph" | "singleLine" = "auto",
 ): TextGroup[] => {
   if (!page?.textElements || page.textElements.length === 0) {
     return [];
@@ -829,12 +802,12 @@ export const groupPageTextElements = (
   });
 
   // Apply paragraph grouping based on mode
-  if (groupingMode === 'singleLine') {
+  if (groupingMode === "singleLine") {
     // Single line mode: skip paragraph grouping
     return lineGroups;
   }
 
-  if (groupingMode === 'paragraph') {
+  if (groupingMode === "paragraph") {
     // Paragraph mode: always apply grouping
     return groupLinesIntoParagraphs(lineGroups, pageWidth, metrics);
   }
@@ -852,11 +825,11 @@ export const groupPageTextElements = (
   const fullWidthThreshold = pageWidth * 0.7;
 
   lineGroups.forEach((group) => {
-    const text = (group.text || '').trim();
+    const text = (group.text || "").trim();
     if (text.length === 0) return;
 
     totalGroups++;
-    const lines = text.split('\n');
+    const lines = text.split("\n");
     const lineCount = lines.length;
     const wordCount = text.split(/\s+/).filter((w) => w.length > 0).length;
 
@@ -887,10 +860,11 @@ export const groupPageTextElements = (
   const fullWidthRatio = fullWidthLines / totalGroups;
 
   // Calculate variance in line lengths (paragraphs have varying lengths, lists are uniform)
-  const variance = wordCounts.reduce((sum, count) => {
-    const diff = count - avgWordsPerGroup;
-    return sum + diff * diff;
-  }, 0) / totalGroups;
+  const variance =
+    wordCounts.reduce((sum, count) => {
+      const diff = count - avgWordsPerGroup;
+      return sum + diff * diff;
+    }, 0) / totalGroups;
   const stdDev = Math.sqrt(variance);
   const coefficientOfVariation = avgWordsPerGroup > 0 ? stdDev / avgWordsPerGroup : 0;
 
@@ -916,24 +890,26 @@ export const groupPageTextElements = (
   console.log(`     • Std deviation: ${stdDev.toFixed(2)}`);
   console.log(`     • Coefficient of variation: ${coefficientOfVariation.toFixed(2)}`);
   console.log(`   Criteria:`);
-  console.log(`     1. Avg Words Per Group: ${criterion1 ? '✅ PASS' : '❌ FAIL'}`);
+  console.log(`     1. Avg Words Per Group: ${criterion1 ? "✅ PASS" : "❌ FAIL"}`);
   console.log(`        (${avgWordsPerGroup.toFixed(2)} > 5)`);
-  console.log(`     2. Long Text Ratio: ${criterion2 ? '✅ PASS' : '❌ FAIL'}`);
+  console.log(`     2. Long Text Ratio: ${criterion2 ? "✅ PASS" : "❌ FAIL"}`);
   console.log(`        (${(longTextRatio * 100).toFixed(1)}% > 40%)`);
-  console.log(`     3. Line Width Pattern: ${criterion3 ? '✅ PASS' : '❌ FAIL'}`);
+  console.log(`     3. Line Width Pattern: ${criterion3 ? "✅ PASS" : "❌ FAIL"}`);
   console.log(`        (CV ${coefficientOfVariation.toFixed(2)} > 0.5 OR ${(fullWidthRatio * 100).toFixed(1)}% > 60%)`);
-  console.log(`        ${coefficientOfVariation > 0.5 ? '✓ High variance (varying line lengths)' : '✗ Low variance'} ${fullWidthRatio > 0.6 ? '✓ Many full-width lines (paragraph-like)' : '✗ Few full-width lines (list-like)'}`);
-  console.log(`   Decision: ${isParagraphPage ? '📝 PARAGRAPH MODE' : '📋 LINE MODE'}`);
+  console.log(
+    `        ${coefficientOfVariation > 0.5 ? "✓ High variance (varying line lengths)" : "✗ Low variance"} ${fullWidthRatio > 0.6 ? "✓ Many full-width lines (paragraph-like)" : "✗ Few full-width lines (list-like)"}`,
+  );
+  console.log(`   Decision: ${isParagraphPage ? "📝 PARAGRAPH MODE" : "📋 LINE MODE"}`);
   if (isParagraphPage) {
     console.log(`   Reason: All three criteria passed (AND logic)`);
   } else {
     const failedReasons = [];
-    if (!criterion1) failedReasons.push('low average words per group');
-    if (!criterion2) failedReasons.push('low ratio of long text groups');
-    if (!criterion3) failedReasons.push('low variance and few full-width lines (list-like structure)');
-    console.log(`   Reason: ${failedReasons.join(', ')}`);
+    if (!criterion1) failedReasons.push("low average words per group");
+    if (!criterion2) failedReasons.push("low ratio of long text groups");
+    if (!criterion3) failedReasons.push("low variance and few full-width lines (list-like structure)");
+    console.log(`   Reason: ${failedReasons.join(", ")}`);
   }
-  console.log('');
+  console.log("");
 
   // Only apply paragraph grouping if it looks like a paragraph-heavy page
   if (isParagraphPage) {
@@ -948,17 +924,14 @@ export const groupPageTextElements = (
 
 export const groupDocumentText = (
   document: PdfJsonDocument | null | undefined,
-  groupingMode: 'auto' | 'paragraph' | 'singleLine' = 'auto',
+  groupingMode: "auto" | "paragraph" | "singleLine" = "auto",
 ): TextGroup[][] => {
   const pages = document?.pages ?? [];
   const metrics = buildFontMetrics(document);
   return pages.map((page, index) => groupPageTextElements(page, index, metrics, groupingMode));
 };
 
-export const extractPageImages = (
-  page: PdfJsonPage | null | undefined,
-  pageIndex: number,
-): PdfJsonImageElement[] => {
+export const extractPageImages = (page: PdfJsonPage | null | undefined, pageIndex: number): PdfJsonImageElement[] => {
   const images = page?.imageElements ?? [];
   return images.map((image, imageIndex) => {
     const clone = cloneImageElement(image);
@@ -969,15 +942,13 @@ export const extractPageImages = (
   });
 };
 
-export const extractDocumentImages = (
-  document: PdfJsonDocument | null | undefined,
-): PdfJsonImageElement[][] => {
+export const extractDocumentImages = (document: PdfJsonDocument | null | undefined): PdfJsonImageElement[][] => {
   const pages = document?.pages ?? [];
   return pages.map((page, index) => extractPageImages(page, index));
 };
 
 export const deepCloneDocument = (document: PdfJsonDocument): PdfJsonDocument => {
-  if (typeof structuredClone === 'function') {
+  if (typeof structuredClone === "function") {
     return structuredClone(document);
   }
   return JSON.parse(JSON.stringify(document));
@@ -999,9 +970,9 @@ export const pageDimensions = (page: PdfJsonPage | null | undefined): { width: n
     DEFAULT_PAGE_WIDTH,
     DEFAULT_PAGE_HEIGHT,
     commonFormats: {
-      'US Letter': '612 × 792 pt',
-      'A4': '595 × 842 pt',
-      'Legal': '612 × 1008 pt',
+      "US Letter": "612 × 792 pt",
+      A4: "595 × 842 pt",
+      Legal: "612 × 1008 pt",
     },
   });
 
@@ -1028,14 +999,14 @@ const distributeTextAcrossElements = (text: string | undefined, elements: PdfJso
   const targetChars = Array.from(normalizedText);
   if (targetChars.length === 0) {
     elements.forEach((element) => {
-      element.text = '';
+      element.text = "";
       clearGlyphHints(element);
     });
     return true;
   }
 
   const capacities = elements.map((element) => {
-    const originalText = element.text ?? '';
+    const originalText = element.text ?? "";
     const graphemeCount = Array.from(originalText).length;
     return graphemeCount > 0 ? graphemeCount : 1;
   });
@@ -1054,14 +1025,14 @@ const distributeTextAcrossElements = (text: string | undefined, elements: PdfJso
       }
     }
 
-    element.text = sliceLength > 0 ? targetChars.slice(cursor, cursor + sliceLength).join('') : '';
+    element.text = sliceLength > 0 ? targetChars.slice(cursor, cursor + sliceLength).join("") : "";
     clearGlyphHints(element);
     cursor += sliceLength;
   });
 
   elements.forEach((element) => {
     if (element.text == null) {
-      element.text = '';
+      element.text = "";
     }
   });
 
@@ -1093,7 +1064,7 @@ const sliceElementsByLineCounts = (group: TextGroup): PdfJsonTextElement[][] =>
 };
 
 const rebuildParagraphLineElements = (group: TextGroup): PdfJsonTextElement[] | null => {
-  if (!group.text || !group.text.includes('\n')) {
+  if (!group.text || !group.text.includes("\n")) {
     return null;
   }
 
@@ -1132,9 +1103,7 @@ const rebuildParagraphLineElements = (group: TextGroup): PdfJsonTextElement[] |
   })();
 
   const spacing =
-    (group.lineSpacing && group.lineSpacing > 0
-      ? group.lineSpacing
-      : spacingFromBaselines) ??
+    (group.lineSpacing && group.lineSpacing > 0 ? group.lineSpacing : spacingFromBaselines) ??
     Math.max(group.fontMatrixSize ?? group.fontSize ?? 12, 6) * 1.2;
 
   let direction = -1;
@@ -1169,7 +1138,7 @@ const rebuildParagraphLineElements = (group: TextGroup): PdfJsonTextElement[] |
       primary.text = normalizedLine;
       clearGlyphHints(primary);
       for (let i = 1; i < clones.length; i += 1) {
-        clones[i].text = '';
+        clones[i].text = "";
         clearGlyphHints(clones[i]);
       }
     }
@@ -1254,7 +1223,7 @@ export const restoreGlyphElements = (
           return;
         }
         const originalGlyphCount = group.originalElements.reduce(
-          (sum, element) => sum + countGraphemes(element.text ?? ''),
+          (sum, element) => sum + countGraphemes(element.text ?? ""),
           0,
         );
         const normalizedText = sanitizeParagraphText(group.text);
@@ -1290,8 +1259,8 @@ export const restoreGlyphElements = (
 };
 
 const approxEqual = (a: number | null | undefined, b: number | null | undefined, tolerance = 0.25): boolean => {
-  const first = typeof a === 'number' && Number.isFinite(a) ? a : 0;
-  const second = typeof b === 'number' && Number.isFinite(b) ? b : 0;
+  const first = typeof a === "number" && Number.isFinite(a) ? a : 0;
+  const second = typeof b === "number" && Number.isFinite(b) ? b : 0;
   return Math.abs(first - second) <= tolerance;
 };
 
@@ -1317,10 +1286,7 @@ const arrayApproxEqual = (
   return true;
 };
 
-const areImageElementsEqual = (
-  current: PdfJsonImageElement,
-  original: PdfJsonImageElement,
-): boolean => {
+const areImageElementsEqual = (current: PdfJsonImageElement, original: PdfJsonImageElement): boolean => {
   if (current === original) {
     return true;
   }
@@ -1347,10 +1313,7 @@ const areImageElementsEqual = (
   );
 };
 
-export const areImageListsDifferent = (
-  current: PdfJsonImageElement[],
-  original: PdfJsonImageElement[],
-): boolean => {
+export const areImageListsDifferent = (current: PdfJsonImageElement[], original: PdfJsonImageElement[]): boolean => {
   if (current.length !== original.length) {
     return true;
   }
@@ -1376,10 +1339,7 @@ export const getDirtyPages = (
     const originalGroups = originalGroupsByPage[index] ?? [];
     const groupCountChanged = groups.length !== originalGroups.length;
 
-    const imageDirty = areImageListsDifferent(
-      imagesByPage[index] ?? [],
-      originalImagesByPage[index] ?? [],
-    );
+    const imageDirty = areImageListsDifferent(imagesByPage[index] ?? [], originalImagesByPage[index] ?? []);
 
     const isDirty = textDirty || groupCountChanged || imageDirty;
 
diff --git a/frontend/src/core/tools/stamp/createStampTool.tsx b/frontend/src/core/tools/stamp/createStampTool.tsx
index 907bd01597..6ee80c1ba2 100644
--- a/frontend/src/core/tools/stamp/createStampTool.tsx
+++ b/frontend/src/core/tools/stamp/createStampTool.tsx
@@ -1,28 +1,28 @@
-import { useEffect, useCallback, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import { createToolFlow } from '@app/components/tools/shared/createToolFlow';
-import SignSettings, { SignatureSource } from '@app/components/tools/sign/SignSettings';
-import { DEFAULT_PARAMETERS, useSignParameters, SignParameters } from '@app/hooks/tools/sign/useSignParameters';
-import { useSignOperation } from '@app/hooks/tools/sign/useSignOperation';
-import { useBaseTool } from '@app/hooks/tools/shared/useBaseTool';
-import { BaseToolProps, ToolComponent } from '@app/types/tool';
-import { ToolId } from '@app/types/toolId';
-import { useNavigation } from '@app/contexts/NavigationContext';
-import { useSignature } from '@app/contexts/SignatureContext';
-import { useFileContext } from '@app/contexts/FileContext';
-import { useViewer } from '@app/contexts/ViewerContext';
-import { flattenSignatures } from '@app/utils/signatureFlattening';
+import { useEffect, useCallback, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { createToolFlow } from "@app/components/tools/shared/createToolFlow";
+import SignSettings, { SignatureSource } from "@app/components/tools/sign/SignSettings";
+import { DEFAULT_PARAMETERS, useSignParameters, SignParameters } from "@app/hooks/tools/sign/useSignParameters";
+import { useSignOperation } from "@app/hooks/tools/sign/useSignOperation";
+import { useBaseTool } from "@app/hooks/tools/shared/useBaseTool";
+import { BaseToolProps, ToolComponent } from "@app/types/tool";
+import { ToolId } from "@app/types/toolId";
+import { useNavigation } from "@app/contexts/NavigationContext";
+import { useSignature } from "@app/contexts/SignatureContext";
+import { useFileContext } from "@app/contexts/FileContext";
+import { useViewer } from "@app/contexts/ViewerContext";
+import { flattenSignatures } from "@app/utils/signatureFlattening";
 
 export type StampToolConfig = {
   toolId: ToolId;
   translationScope?: string;
   allowedSignatureSources?: SignatureSource[];
   defaultSignatureSource?: SignatureSource;
-  defaultSignatureType?: SignParameters['signatureType'];
+  defaultSignatureType?: SignParameters["signatureType"];
   enableApplyAction?: boolean;
 };
 
-const STAMP_TOOL_DEFAULT_SOURCES: SignatureSource[] = ['canvas', 'image', 'text', 'saved'];
+const STAMP_TOOL_DEFAULT_SOURCES: SignatureSource[] = ["canvas", "image", "text", "saved"];
 
 export const createStampTool = (config: StampToolConfig) => {
   const {
@@ -38,7 +38,7 @@ export const createStampTool = (config: StampToolConfig) => {
     const { t } = useTranslation();
     const translateTool = useCallback(
       (key: string, defaultValue: string) => t(`${translationScope}.${key}`, defaultValue),
-      [t, translationScope]
+      [t, translationScope],
     );
     const { setWorkbench, setHasUnsavedChanges, unregisterUnsavedChangesChecker } = useNavigation();
     const {
@@ -55,39 +55,33 @@ export const createStampTool = (config: StampToolConfig) => {
     } = useSignature();
     const { consumeFiles, selectors } = useFileContext();
     const { exportActions, getScrollState, activeFileIndex, setActiveFileIndex } = useViewer();
-    const base = useBaseTool(
-      toolId,
-      useSignParameters,
-      useSignOperation,
-      props
-    );
+    const base = useBaseTool(toolId, useSignParameters, useSignOperation, props);
 
     const allowedSignatureTypes = allowedSignatureSources.filter(
-      (source): source is SignParameters['signatureType'] => source !== 'saved'
+      (source): source is SignParameters["signatureType"] => source !== "saved",
     );
-    const enforcedSignatureType =
-      defaultSignatureType ?? allowedSignatureTypes[0] ?? DEFAULT_PARAMETERS.signatureType;
+    const enforcedSignatureType = defaultSignatureType ?? allowedSignatureTypes[0] ?? DEFAULT_PARAMETERS.signatureType;
 
     useEffect(() => {
       if (!allowedSignatureTypes.includes(base.params.parameters.signatureType)) {
-        base.params.updateParameter('signatureType', enforcedSignatureType);
+        base.params.updateParameter("signatureType", enforcedSignatureType);
       }
     }, [allowedSignatureTypes, base.params.parameters.signatureType, base.params.updateParameter, enforcedSignatureType]);
 
     const hasOpenedViewer = useRef(false);
-    const activeModeRef = useRef<'draw' | 'placement' | null>(null);
+    const activeModeRef = useRef<"draw" | "placement" | null>(null);
 
     const handleSignaturePlacement = useCallback(() => {
       activateSignaturePlacementMode();
     }, [activateSignaturePlacementMode]);
 
     const handleActivateDrawMode = useCallback(() => {
-      activeModeRef.current = 'draw';
+      activeModeRef.current = "draw";
       activateDrawMode();
     }, [activateDrawMode]);
 
     const handleActivateSignaturePlacement = useCallback(() => {
-      activeModeRef.current = 'placement';
+      activeModeRef.current = "placement";
       handleSignaturePlacement();
     }, [handleSignaturePlacement]);
 
@@ -98,7 +92,7 @@ export const createStampTool = (config: StampToolConfig) => {
 
     useEffect(() => {
       if (base.selectedFiles.length > 0 && !hasOpenedViewer.current) {
-        setWorkbench('viewer');
+        setWorkbench("viewer");
         hasOpenedViewer.current = true;
       }
     }, [base.selectedFiles.length, setWorkbench]);
@@ -117,7 +111,7 @@ export const createStampTool = (config: StampToolConfig) => {
         const originalFile = allFiles[fileIndex];
 
         if (!originalFile) {
-          console.error('No file available to replace');
+          console.error("No file available to replace");
           return;
         }
 
@@ -132,11 +126,7 @@ export const createStampTool = (config: StampToolConfig) => {
         });
 
         if (flattenResult) {
-          await consumeFiles(
-            flattenResult.inputFileIds,
-            [flattenResult.outputStirlingFile],
-            [flattenResult.outputStub]
-          );
+          await consumeFiles(flattenResult.inputFileIds, [flattenResult.outputStirlingFile], [flattenResult.outputStub]);
 
           setActiveFileIndex(0);
           setSignaturesApplied(true);
@@ -145,18 +135,18 @@ export const createStampTool = (config: StampToolConfig) => {
           const hasSignatureReady = (() => {
             const params = base.params.parameters;
             switch (params.signatureType) {
-              case 'canvas':
-              case 'image':
+              case "canvas":
+              case "image":
                 return Boolean(params.signatureData);
-              case 'text':
-                return Boolean(params.signerName && params.signerName.trim() !== '');
+              case "text":
+                return Boolean(params.signerName && params.signerName.trim() !== "");
               default:
                 return false;
             }
           })();
 
           if (hasSignatureReady) {
-            if (typeof window !== 'undefined') {
+            if (typeof window !== "undefined") {
               window.setTimeout(() => {
                 handleActivateSignaturePlacement();
               }, 150);
@@ -165,10 +155,10 @@ export const createStampTool = (config: StampToolConfig) => {
             }
           }
         } else {
-          console.error('Signature flattening failed');
+          console.error("Signature flattening failed");
         }
       } catch (error) {
-        console.error('Error saving signed document:', error);
+        console.error("Error saving signed document:", error);
       }
     }, [
       exportActions,
@@ -195,7 +185,7 @@ export const createStampTool = (config: StampToolConfig) => {
 
       if (base.selectedFiles.length > 0) {
         steps.push({
-          title: translateTool('steps.configure', 'Configure Stamp'),
+          title: translateTool("steps.configure", "Configure Stamp"),
           isCollapsed: false,
           onCollapsedClick: undefined,
           content: (
@@ -230,7 +220,7 @@ export const createStampTool = (config: StampToolConfig) => {
       review: {
         isVisible: false,
         operation: base.operation,
-        title: translateTool('results.title', 'Stamp Results'),
+        title: translateTool("results.title", "Stamp Results"),
         onFileClick: base.handleThumbnailClick,
         onUndo: () => {},
       },
diff --git a/frontend/src/core/tsconfig.json b/frontend/src/core/tsconfig.json
index c32398094b..51c970d002 100644
--- a/frontend/src/core/tsconfig.json
+++ b/frontend/src/core/tsconfig.json
@@ -3,16 +3,8 @@
   "compilerOptions": {
     "baseUrl": "../../",
     "paths": {
-      "@app/*": [
-        "src/core/*"
-      ]
+      "@app/*": ["src/core/*"]
     }
   },
-  "include": [
-    "../global.d.ts",
-    "../*.js",
-    "../*.ts",
-    "../*.tsx",
-    "."
-  ]
+  "include": ["../global.d.ts", "../*.js", "../*.ts", "../*.tsx", "."]
 }
diff --git a/frontend/src/core/types/appConfig.ts b/frontend/src/core/types/appConfig.ts
index 536ca0cb7b..e72dc8e448 100644
--- a/frontend/src/core/types/appConfig.ts
+++ b/frontend/src/core/types/appConfig.ts
@@ -6,7 +6,7 @@ export interface AppConfig {
   appNameNavbar?: string;
   languages?: string[];
   defaultLocale?: string;
-  logoStyle?: 'modern' | 'classic';
+  logoStyle?: "modern" | "classic";
   enableLogin?: boolean;
   showSettingsWhenNoLogin?: boolean;
   enableEmailInvites?: boolean;
@@ -60,4 +60,4 @@ export interface AppConfig {
   timestampTsaPresets?: { label: string; url: string }[];
 }
 
-export type AppConfigBootstrapMode = 'blocking' | 'non-blocking';
+export type AppConfigBootstrapMode = "blocking" | "non-blocking";
diff --git a/frontend/src/core/types/automation.ts b/frontend/src/core/types/automation.ts
index 3dc2c41f54..bcb7fe8d2a 100644
--- a/frontend/src/core/types/automation.ts
+++ b/frontend/src/core/types/automation.ts
@@ -25,7 +25,8 @@ export interface AutomationTool {
   parameters?: Record<string, any>;
 }
 
-export type AutomationStep = typeof import('@app/constants/automation').AUTOMATION_STEPS[keyof typeof import('@app/constants/automation').AUTOMATION_STEPS];
+export type AutomationStep =
+  (typeof import("@app/constants/automation").AUTOMATION_STEPS)[keyof typeof import("@app/constants/automation").AUTOMATION_STEPS];
 
 export interface AutomationStepData {
   step: AutomationStep;
@@ -37,7 +38,7 @@ export interface ExecutionStep {
   id: string;
   operation: string;
   name: string;
-  status: 'pending' | 'running' | 'completed' | 'error';
+  status: "pending" | "running" | "completed" | "error";
   error?: string;
 }
 
@@ -52,9 +53,9 @@ export interface AutomateParameters extends AutomationExecutionCallbacks {
 }
 
 export enum AutomationMode {
-  CREATE = 'create',
-  EDIT = 'edit',
-  SUGGESTED = 'suggested'
+  CREATE = "create",
+  EDIT = "edit",
+  SUGGESTED = "suggested",
 }
 
 export interface SuggestedAutomation {
diff --git a/frontend/src/core/types/backendHealth.ts b/frontend/src/core/types/backendHealth.ts
index 18fbad4dbe..ae48efffe3 100644
--- a/frontend/src/core/types/backendHealth.ts
+++ b/frontend/src/core/types/backendHealth.ts
@@ -1,4 +1,4 @@
-export type BackendStatus = 'stopped' | 'starting' | 'healthy' | 'unhealthy';
+export type BackendStatus = "stopped" | "starting" | "healthy" | "unhealthy";
 
 export interface BackendHealthState {
   status: BackendStatus;
diff --git a/frontend/src/core/types/compare.ts b/frontend/src/core/types/compare.ts
index 65b6ea12c9..3397407029 100644
--- a/frontend/src/core/types/compare.ts
+++ b/frontend/src/core/types/compare.ts
@@ -1,16 +1,16 @@
-import type { FileId } from '@app/types/file';
-import type { StirlingFile } from '@app/types/fileContext';
+import type { FileId } from "@app/types/file";
+import type { StirlingFile } from "@app/types/fileContext";
 
-export type CompareDiffTokenType = 'unchanged' | 'removed' | 'added';
+export type CompareDiffTokenType = "unchanged" | "removed" | "added";
 
 export interface CompareDiffToken {
   type: CompareDiffTokenType;
   text: string;
 }
 
-export const REMOVAL_HIGHLIGHT = '#FF3B30';
-export const ADDITION_HIGHLIGHT = '#34C759';
-export const PARAGRAPH_SENTINEL = '\uE000¶';
+export const REMOVAL_HIGHLIGHT = "#FF3B30";
+export const ADDITION_HIGHLIGHT = "#34C759";
+export const PARAGRAPH_SENTINEL = "\uE000¶";
 
 export interface TokenBoundingBox {
   left: number;
@@ -102,7 +102,7 @@ export interface CompareWorkerWarnings {
 }
 
 export interface CompareWorkerRequest {
-  type: 'compare';
+  type: "compare";
   payload: {
     baseTokens: string[];
     comparisonTokens: string[];
@@ -125,11 +125,11 @@ export interface CompareWorkerRequest {
 
 export type CompareWorkerResponse =
   | {
-      type: 'chunk';
+      type: "chunk";
       tokens: CompareDiffToken[];
     }
   | {
-      type: 'success';
+      type: "success";
       stats: {
         baseWordCount: number;
         comparisonWordCount: number;
@@ -137,24 +137,24 @@ export type CompareWorkerResponse =
       };
     }
   | {
-      type: 'warning';
+      type: "warning";
       message: string;
     }
   | {
-      type: 'error';
+      type: "error";
       message: string;
-      code?: 'EMPTY_TEXT' | 'TOO_LARGE' | 'TOO_DISSIMILAR';
+      code?: "EMPTY_TEXT" | "TOO_LARGE" | "TOO_DISSIMILAR";
     };
 
 export interface CompareDocumentPaneProps {
-  pane: 'base' | 'comparison';
-  layout: 'side-by-side' | 'stacked';
+  pane: "base" | "comparison";
+  layout: "side-by-side" | "stacked";
   scrollRef: React.RefObject<HTMLDivElement | null>;
   peerScrollRef: React.RefObject<HTMLDivElement | null>;
   handleScrollSync: (source: HTMLDivElement | null, target: HTMLDivElement | null) => void;
-  handleWheelZoom: (pane: 'base' | 'comparison', event: React.WheelEvent<HTMLDivElement>) => void;
-  handleWheelOverscroll: (pane: 'base' | 'comparison', event: React.WheelEvent<HTMLDivElement>) => void;
-  onTouchStart: (pane: 'base' | 'comparison', event: React.TouchEvent<HTMLDivElement>) => void;
+  handleWheelZoom: (pane: "base" | "comparison", event: React.WheelEvent<HTMLDivElement>) => void;
+  handleWheelOverscroll: (pane: "base" | "comparison", event: React.WheelEvent<HTMLDivElement>) => void;
+  onTouchStart: (pane: "base" | "comparison", event: React.TouchEvent<HTMLDivElement>) => void;
   onTouchMove: (event: React.TouchEvent<HTMLDivElement>) => void;
   onTouchEnd: (event: React.TouchEvent<HTMLDivElement>) => void;
   isPanMode: boolean;
@@ -178,7 +178,7 @@ export interface CompareDocumentPaneProps {
   onPageInputChange?: (next: string) => void;
   maxSharedPages?: number; // min(baseTotal, compTotal)
   renderedPageNumbers?: Set<number>;
-  onVisiblePageChange?: (pane: 'base' | 'comparison', pageNumber: number) => void;
+  onVisiblePageChange?: (pane: "base" | "comparison", pageNumber: number) => void;
 }
 
 // Import types that are referenced in CompareDocumentPaneProps
@@ -205,9 +205,9 @@ export interface NavigationDropdownProps {
 }
 
 // Pan/Zoom and Compare Workbench shared types (moved out of hooks for reuse)
-import type React from 'react';
+import type React from "react";
 
-export type ComparePane = 'base' | 'comparison';
+export type ComparePane = "base" | "comparison";
 
 export interface PanState {
   x: number;
@@ -249,8 +249,8 @@ export interface UseComparePanZoomOptions {
 }
 
 export interface UseComparePanZoomReturn {
-  layout: 'side-by-side' | 'stacked';
-  setLayout: (layout: 'side-by-side' | 'stacked') => void;
+  layout: "side-by-side" | "stacked";
+  setLayout: (layout: "side-by-side" | "stacked") => void;
   toggleLayout: () => void;
   baseScrollRef: React.RefObject<HTMLDivElement | null>;
   comparisonScrollRef: React.RefObject<HTMLDivElement | null>;
@@ -283,7 +283,7 @@ export interface UseComparePanZoomReturn {
 
 export interface PagePreview {
   pageNumber: number;
-  width: number;  
+  width: number;
   height: number;
   rotation: number;
   url: string | null;
@@ -311,4 +311,4 @@ export interface CompareChangeOption {
   value: string;
   label: string;
   pageNumber: number;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/core/types/endpointAvailability.ts b/frontend/src/core/types/endpointAvailability.ts
index aae1a05ec4..6cffe1cd18 100644
--- a/frontend/src/core/types/endpointAvailability.ts
+++ b/frontend/src/core/types/endpointAvailability.ts
@@ -1,4 +1,4 @@
-export type EndpointDisableReason = 'CONFIG' | 'DEPENDENCY' | 'UNKNOWN' | 'NOT_SUPPORTED_LOCALLY' | null;
+export type EndpointDisableReason = "CONFIG" | "DEPENDENCY" | "UNKNOWN" | "NOT_SUPPORTED_LOCALLY" | null;
 
 export interface EndpointAvailabilityDetails {
   enabled: boolean;
diff --git a/frontend/src/core/types/file.ts b/frontend/src/core/types/file.ts
index 3d6db056f2..8f6178c0b3 100644
--- a/frontend/src/core/types/file.ts
+++ b/frontend/src/core/types/file.ts
@@ -6,7 +6,7 @@
 import { ToolId } from "@app/types/toolId";
 
 declare const tag: unique symbol;
-export type FileId = string & { readonly [tag]: 'FileId' };
+export type FileId = string & { readonly [tag]: "FileId" };
 
 /**
  * Tool operation metadata for history tracking
diff --git a/frontend/src/core/types/fileContext.ts b/frontend/src/core/types/fileContext.ts
index 3f7f824cf6..322b68d8d0 100644
--- a/frontend/src/core/types/fileContext.ts
+++ b/frontend/src/core/types/fileContext.ts
@@ -2,8 +2,8 @@
  * Types for global file context management across views and tools
  */
 
-import { PageOperation } from '@app/types/pageEditor';
-import { FileId, BaseFileMetadata } from '@app/types/file';
+import { PageOperation } from "@app/types/pageEditor";
+import { FileId, BaseFileMetadata } from "@app/types/file";
 
 // Re-export FileId for convenience
 export type { FileId };
@@ -42,14 +42,14 @@ export interface ProcessedFileMetadata {
  * where files persist across tool operations.
  */
 export interface StirlingFileStub extends BaseFileMetadata {
-  quickKey?: string;             // Fast deduplication key: name|size|lastModified
-  thumbnailUrl?: string;         // Generated thumbnail blob URL for visual display
-  blobUrl?: string;             // File access blob URL for downloads/processing
-  localFilePath?: string;        // Original local filesystem path (desktop app only)
+  quickKey?: string; // Fast deduplication key: name|size|lastModified
+  thumbnailUrl?: string; // Generated thumbnail blob URL for visual display
+  blobUrl?: string; // File access blob URL for downloads/processing
+  localFilePath?: string; // Original local filesystem path (desktop app only)
   processedFile?: ProcessedFileMetadata; // PDF page data and processing results
-  insertAfterPageId?: string;   // Page ID after which this file should be inserted
-  isPinned?: boolean;           // Protected from tool consumption (replace/remove)
-  isDirty?: boolean;            // Has unsaved changes (only for files with localFilePath)
+  insertAfterPageId?: string; // Page ID after which this file should be inserted
+  isPinned?: boolean; // Protected from tool consumption (replace/remove)
+  isDirty?: boolean; // Has unsaved changes (only for files with localFilePath)
   // Note: File object stored in provider ref, not in state
 }
 
@@ -61,13 +61,13 @@ export interface FileContextNormalizedFiles {
 // Helper functions - UUID-based primary keys (zero collisions, synchronous)
 export function createFileId(): FileId {
   // Use crypto.randomUUID for authoritative primary key
-  if (typeof window !== 'undefined' && window.crypto?.randomUUID) {
+  if (typeof window !== "undefined" && window.crypto?.randomUUID) {
     return window.crypto.randomUUID() as FileId;
   }
   // Fallback for environments without randomUUID
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
-    const r = Math.random() * 16 | 0;
-    const v = c == 'x' ? r : (r & 0x3 | 0x8);
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+    const r = (Math.random() * 16) | 0;
+    const v = c == "x" ? r : (r & 0x3) | 0x8;
     return v.toString(16);
   }) as FileId;
 }
@@ -86,8 +86,13 @@ export interface StirlingFile extends File {
 
 // Type guard to check if a File object has an embedded fileId
 export function isStirlingFile(file: File | Blob): file is StirlingFile {
-  return file instanceof File && 'fileId' in file && typeof (file as any).fileId === 'string' &&
-    'quickKey' in file && typeof (file as any).quickKey === 'string';
+  return (
+    file instanceof File &&
+    "fileId" in file &&
+    typeof (file as any).fileId === "string" &&
+    "quickKey" in file &&
+    typeof (file as any).quickKey === "string"
+  );
 }
 
 /**
@@ -131,18 +136,18 @@ export function createStirlingFile(file: File, id?: FileId): StirlingFile {
 
   // Use Object.defineProperty to add properties while preserving the original File object
   // This maintains proper method binding and avoids "Illegal invocation" errors
-  Object.defineProperty(file, 'fileId', {
+  Object.defineProperty(file, "fileId", {
     value: fileId,
     writable: false,
     enumerable: true,
-    configurable: false
+    configurable: false,
   });
 
-  Object.defineProperty(file, 'quickKey', {
+  Object.defineProperty(file, "quickKey", {
     value: quickKey,
     writable: false,
     enumerable: true,
-    configurable: false
+    configurable: false,
   });
 
   return file as StirlingFile;
@@ -150,7 +155,7 @@ export function createStirlingFile(file: File, id?: FileId): StirlingFile {
 
 // Extract FileIds from StirlingFile array
 export function extractFileIds(files: StirlingFile[]): FileId[] {
-  return files.map(file => file.fileId);
+  return files.map((file) => file.fileId);
 }
 
 // Extract regular File objects from StirlingFile array
@@ -160,21 +165,21 @@ export function extractFiles(files: StirlingFile[]): File[] {
 
 // Check if an object is a File or StirlingFile (replaces instanceof File checks)
 export function isFileObject(obj: any): obj is File | StirlingFile {
-  return obj &&
-    typeof obj.name === 'string' &&
-    typeof obj.size === 'number' &&
-    typeof obj.type === 'string' &&
-    typeof obj.lastModified === 'number' &&
-    typeof obj.arrayBuffer === 'function';
+  return (
+    obj &&
+    typeof obj.name === "string" &&
+    typeof obj.size === "number" &&
+    typeof obj.type === "string" &&
+    typeof obj.lastModified === "number" &&
+    typeof obj.arrayBuffer === "function"
+  );
 }
 
-
-
 export function createNewStirlingFileStub(
   file: File,
   id?: FileId,
   thumbnail?: string,
-  processedFileMetadata?: ProcessedFileMetadata
+  processedFileMetadata?: ProcessedFileMetadata,
 ): StirlingFileStub {
   const fileId = id || createFileId();
   return {
@@ -189,34 +194,34 @@ export function createNewStirlingFileStub(
     isLeaf: true, // New files are leaf nodes by default
     versionNumber: 1, // New files start at version 1
     thumbnailUrl: thumbnail,
-    processedFile: processedFileMetadata
+    processedFile: processedFileMetadata,
   };
 }
 
 export function revokeFileResources(record: StirlingFileStub): void {
   // Only revoke blob: URLs to prevent errors on other schemes
-  if (record.thumbnailUrl && record.thumbnailUrl.startsWith('blob:')) {
+  if (record.thumbnailUrl && record.thumbnailUrl.startsWith("blob:")) {
     try {
       URL.revokeObjectURL(record.thumbnailUrl);
     } catch (error) {
-      console.warn('Failed to revoke thumbnail URL:', error);
+      console.warn("Failed to revoke thumbnail URL:", error);
     }
   }
-  if (record.blobUrl && record.blobUrl.startsWith('blob:')) {
+  if (record.blobUrl && record.blobUrl.startsWith("blob:")) {
     try {
       URL.revokeObjectURL(record.blobUrl);
     } catch (error) {
-      console.warn('Failed to revoke blob URL:', error);
+      console.warn("Failed to revoke blob URL:", error);
     }
   }
   // Clean up processed file thumbnails
   if (record.processedFile?.pages) {
-    record.processedFile.pages.forEach(page => {
-      if (page.thumbnail && page.thumbnail.startsWith('blob:')) {
+    record.processedFile.pages.forEach((page) => {
+      if (page.thumbnail && page.thumbnail.startsWith("blob:")) {
         try {
           URL.revokeObjectURL(page.thumbnail);
         } catch (error) {
-          console.warn('Failed to revoke page thumbnail URL:', error);
+          console.warn("Failed to revoke page thumbnail URL:", error);
         }
       }
     });
@@ -226,7 +231,7 @@ export function revokeFileResources(record: StirlingFileStub): void {
 export interface ViewerConfig {
   zoom: number;
   currentPage: number;
-  viewMode: 'single' | 'continuous' | 'facing';
+  viewMode: "single" | "continuous" | "facing";
   sidebarOpen: boolean;
 }
 
@@ -260,31 +265,31 @@ export interface FileContextState {
 // Action types for reducer pattern
 export type FileContextAction =
   // File management actions
-  | { type: 'ADD_FILES'; payload: { stirlingFileStubs: StirlingFileStub[] } }
-  | { type: 'REMOVE_FILES'; payload: { fileIds: FileId[] } }
-  | { type: 'UPDATE_FILE_RECORD'; payload: { id: FileId; updates: Partial<StirlingFileStub> } }
-  | { type: 'REORDER_FILES'; payload: { orderedFileIds: FileId[] } }
+  | { type: "ADD_FILES"; payload: { stirlingFileStubs: StirlingFileStub[] } }
+  | { type: "REMOVE_FILES"; payload: { fileIds: FileId[] } }
+  | { type: "UPDATE_FILE_RECORD"; payload: { id: FileId; updates: Partial<StirlingFileStub> } }
+  | { type: "REORDER_FILES"; payload: { orderedFileIds: FileId[] } }
 
   // Pinned files actions
-  | { type: 'PIN_FILE'; payload: { fileId: FileId } }
-  | { type: 'UNPIN_FILE'; payload: { fileId: FileId } }
-  | { type: 'CONSUME_FILES'; payload: { inputFileIds: FileId[]; outputStirlingFileStubs: StirlingFileStub[] } }
-  | { type: 'UNDO_CONSUME_FILES'; payload: { inputStirlingFileStubs: StirlingFileStub[]; outputFileIds: FileId[] } }
+  | { type: "PIN_FILE"; payload: { fileId: FileId } }
+  | { type: "UNPIN_FILE"; payload: { fileId: FileId } }
+  | { type: "CONSUME_FILES"; payload: { inputFileIds: FileId[]; outputStirlingFileStubs: StirlingFileStub[] } }
+  | { type: "UNDO_CONSUME_FILES"; payload: { inputStirlingFileStubs: StirlingFileStub[]; outputFileIds: FileId[] } }
 
   // UI actions
-  | { type: 'SET_SELECTED_FILES'; payload: { fileIds: FileId[] } }
-  | { type: 'SET_SELECTED_PAGES'; payload: { pageNumbers: number[] } }
-  | { type: 'CLEAR_SELECTIONS' }
-  | { type: 'SET_PROCESSING'; payload: { isProcessing: boolean; progress: number } }
-  | { type: 'MARK_FILE_ERROR'; payload: { fileId: FileId } }
-  | { type: 'CLEAR_FILE_ERROR'; payload: { fileId: FileId } }
-  | { type: 'CLEAR_ALL_FILE_ERRORS' }
+  | { type: "SET_SELECTED_FILES"; payload: { fileIds: FileId[] } }
+  | { type: "SET_SELECTED_PAGES"; payload: { pageNumbers: number[] } }
+  | { type: "CLEAR_SELECTIONS" }
+  | { type: "SET_PROCESSING"; payload: { isProcessing: boolean; progress: number } }
+  | { type: "MARK_FILE_ERROR"; payload: { fileId: FileId } }
+  | { type: "CLEAR_FILE_ERROR"; payload: { fileId: FileId } }
+  | { type: "CLEAR_ALL_FILE_ERRORS" }
 
   // Navigation guard actions (minimal for file-related unsaved changes only)
-  | { type: 'SET_UNSAVED_CHANGES'; payload: { hasChanges: boolean } }
+  | { type: "SET_UNSAVED_CHANGES"; payload: { hasChanges: boolean } }
 
   // Context management
-  | { type: 'RESET_CONTEXT' };
+  | { type: "RESET_CONTEXT" };
 
 export interface FileContextActions {
   // File management - lightweight actions only
@@ -299,9 +304,12 @@ export interface FileContextActions {
       skipAutoUnzip?: boolean;
       confirmLargeExtraction?: (fileCount: number, fileName: string) => Promise<boolean>;
       allowDuplicates?: boolean;
-    }
+    },
+  ) => Promise<StirlingFile[]>;
+  addStirlingFileStubs: (
+    stirlingFileStubs: StirlingFileStub[],
+    options?: { insertAfterPageId?: string; selectFiles?: boolean },
   ) => Promise<StirlingFile[]>;
-  addStirlingFileStubs: (stirlingFileStubs: StirlingFileStub[], options?: { insertAfterPageId?: string; selectFiles?: boolean }) => Promise<StirlingFile[]>;
   removeFiles: (fileIds: FileId[], deleteFromStorage?: boolean) => Promise<void>;
   updateStirlingFileStub: (id: FileId, updates: Partial<StirlingFileStub>) => void;
   reorderFiles: (orderedFileIds: FileId[]) => void;
@@ -313,7 +321,11 @@ export interface FileContextActions {
   unpinFile: (file: StirlingFile) => void;
 
   // File consumption (replace unpinned files with outputs)
-  consumeFiles: (inputFileIds: FileId[], outputStirlingFiles: StirlingFile[], outputStirlingFileStubs: StirlingFileStub[]) => Promise<FileId[]>;
+  consumeFiles: (
+    inputFileIds: FileId[],
+    outputStirlingFiles: StirlingFile[],
+    outputStirlingFileStubs: StirlingFileStub[],
+  ) => Promise<FileId[]>;
   undoConsumeFiles: (inputFiles: File[], inputStirlingFileStubs: StirlingFileStub[], outputFileIds: FileId[]) => Promise<void>;
   // Selection management
   setSelectedFiles: (fileIds: FileId[]) => void;
diff --git a/frontend/src/core/types/fileIdSafety.d.ts b/frontend/src/core/types/fileIdSafety.d.ts
index 0afbc7f931..e75fb8c416 100644
--- a/frontend/src/core/types/fileIdSafety.d.ts
+++ b/frontend/src/core/types/fileIdSafety.d.ts
@@ -2,7 +2,7 @@
  * Type safety declarations to prevent file.name/UUID confusion
  */
 
-import { FileId, StirlingFile } from '@app/types/fileContext';
+import { FileId, StirlingFile } from "@app/types/fileContext";
 
 declare global {
   namespace FileIdSafety {
@@ -31,7 +31,7 @@ declare global {
 }
 
 // Augment FileContext types to prevent bypassing StirlingFile
-declare module '../contexts/FileContext' {
+declare module "../contexts/FileContext" {
   export interface StrictFileContextActions {
     pinFile: (file: StirlingFile) => void; // Must be StirlingFile
     unpinFile: (file: StirlingFile) => void; // Must be StirlingFile
diff --git a/frontend/src/core/types/getPdfInfo.ts b/frontend/src/core/types/getPdfInfo.ts
index 794d15dca9..46b73c2371 100644
--- a/frontend/src/core/types/getPdfInfo.ts
+++ b/frontend/src/core/types/getPdfInfo.ts
@@ -20,16 +20,16 @@ export interface PdfBasicInfo {
   Compression?: boolean;
   CompressionType?: string;
   Language?: string | null;
-  'Number of pages'?: number;
+  "Number of pages"?: number;
   TotalImages?: number;
   [key: string]: unknown;
 }
 
 /** Document info section */
 export interface PdfDocumentInfo {
-  'PDF version'?: string;
+  "PDF version"?: string;
   Trapped?: string | null;
-  'Page Mode'?: string;
+  "Page Mode"?: string;
   [key: string]: unknown;
 }
 
@@ -43,14 +43,14 @@ export interface PdfEncryption {
 
 /** Permissions section - values are "Allowed" or "Not Allowed" */
 export interface PdfPermissions {
-  'Document Assembly'?: 'Allowed' | 'Not Allowed';
-  'Extracting Content'?: 'Allowed' | 'Not Allowed';
-  'Extracting for accessibility'?: 'Allowed' | 'Not Allowed';
-  'Form Filling'?: 'Allowed' | 'Not Allowed';
-  'Modifying'?: 'Allowed' | 'Not Allowed';
-  'Modifying annotations'?: 'Allowed' | 'Not Allowed';
-  'Printing'?: 'Allowed' | 'Not Allowed';
-  [key: string]: 'Allowed' | 'Not Allowed' | undefined;
+  "Document Assembly"?: "Allowed" | "Not Allowed";
+  "Extracting Content"?: "Allowed" | "Not Allowed";
+  "Extracting for accessibility"?: "Allowed" | "Not Allowed";
+  "Form Filling"?: "Allowed" | "Not Allowed";
+  Modifying?: "Allowed" | "Not Allowed";
+  "Modifying annotations"?: "Allowed" | "Not Allowed";
+  Printing?: "Allowed" | "Not Allowed";
+  [key: string]: "Allowed" | "Not Allowed" | undefined;
 }
 
 /** Compliance section */
@@ -108,13 +108,13 @@ export interface PdfAnnotationsInfo {
 
 /** Size/dimensions info within a page */
 export interface PdfSizeInfo {
-  'Width (px)'?: string;
-  'Height (px)'?: string;
-  'Width (in)'?: string;
-  'Height (in)'?: string;
-  'Width (cm)'?: string;
-  'Height (cm)'?: string;
-  'Standard Page'?: string;
+  "Width (px)"?: string;
+  "Height (px)"?: string;
+  "Width (in)"?: string;
+  "Height (in)"?: string;
+  "Width (cm)"?: string;
+  "Height (cm)"?: string;
+  "Standard Page"?: string;
   [key: string]: unknown;
 }
 
@@ -128,25 +128,25 @@ export interface PdfXObjectCounts {
 
 /** ICC Profile info */
 export interface PdfICCProfile {
-  'ICC Profile Length'?: number;
+  "ICC Profile Length"?: number;
 }
 
 /** Page-level information */
 export interface PdfPageInfo {
   Size?: PdfSizeInfo;
   Rotation?: number;
-  'Page Orientation'?: string;
+  "Page Orientation"?: string;
   MediaBox?: string;
   CropBox?: string;
   BleedBox?: string;
   TrimBox?: string;
   ArtBox?: string;
-  'Text Characters Count'?: number;
+  "Text Characters Count"?: number;
   Annotations?: PdfAnnotationsInfo;
   Images?: PdfImageInfo[];
   Links?: PdfLinkInfo[];
   Fonts?: PdfFontInfo[];
-  'Color Spaces & ICC Profiles'?: PdfICCProfile[];
+  "Color Spaces & ICC Profiles"?: PdfICCProfile[];
   XObjectCounts?: PdfXObjectCounts;
   Multimedia?: Record<string, unknown>[];
 }
@@ -174,8 +174,8 @@ export interface PdfAttachmentInfo {
 
 /** JavaScript info */
 export interface PdfJavaScriptInfo {
-  'JS Name'?: string;
-  'JS Script Length'?: number;
+  "JS Name"?: string;
+  "JS Script Length"?: number;
 }
 
 /** Layer info */
@@ -197,7 +197,7 @@ export interface PdfOtherInfo {
   JavaScript?: PdfJavaScriptInfo[];
   Layers?: PdfLayerInfo[];
   StructureTree?: PdfStructureTreeElement[];
-  'Bookmarks/Outline/TOC'?: PdfTocEntry[];
+  "Bookmarks/Outline/TOC"?: PdfTocEntry[];
   XMPMetadata?: string | null;
 }
 
@@ -253,13 +253,13 @@ export interface PdfInfoBackendData {
   PerPageInfo?: PdfPerPageInfo;
   SummaryData?: PdfSummaryData;
   // Legacy/alternative keys for backwards compatibility
-  'Form Fields'?: PdfFormFields;
-  'Basic Info'?: PdfBasicInfo;
-  'Document Info'?: PdfDocumentInfo;
+  "Form Fields"?: PdfFormFields;
+  "Basic Info"?: PdfBasicInfo;
+  "Document Info"?: PdfDocumentInfo;
   Compliance?: PdfCompliance;
-  'Bookmarks/Outline/TOC'?: PdfTocEntry[];
-  'Table of Contents'?: PdfTocEntry[];
-  'Per Page Info'?: PdfPerPageInfo;
+  "Bookmarks/Outline/TOC"?: PdfTocEntry[];
+  "Table of Contents"?: PdfTocEntry[];
+  "Per Page Info"?: PdfPerPageInfo;
 }
 
 export interface PdfInfoReportEntry {
@@ -278,5 +278,5 @@ export interface PdfInfoReportData {
   entries: PdfInfoReportEntry[];
 }
 
-export const INFO_JSON_FILENAME = 'response.json';
-export const INFO_PDF_FILENAME = 'pdf-information-report.pdf';
+export const INFO_JSON_FILENAME = "response.json";
+export const INFO_PDF_FILENAME = "pdf-information-report.pdf";
diff --git a/frontend/src/core/types/metadata.ts b/frontend/src/core/types/metadata.ts
index 0a8c0a6ddc..1d0b959097 100644
--- a/frontend/src/core/types/metadata.ts
+++ b/frontend/src/core/types/metadata.ts
@@ -1,7 +1,7 @@
 export enum TrappedStatus {
-  TRUE = 'True',
-  FALSE = 'False',
-  UNKNOWN = 'Unknown'
+  TRUE = "True",
+  FALSE = "False",
+  UNKNOWN = "Unknown",
 }
 
 export interface CustomMetadataEntry {
diff --git a/frontend/src/core/types/navigation.ts b/frontend/src/core/types/navigation.ts
index 996cd57920..6b71616beb 100644
--- a/frontend/src/core/types/navigation.ts
+++ b/frontend/src/core/types/navigation.ts
@@ -2,8 +2,8 @@
  * Navigation types for workbench and tool separation
  */
 
-import { WorkbenchType } from '@app/types/workbench';
-import { ToolId } from '@app/types/toolId';
+import { WorkbenchType } from "@app/types/workbench";
+import { ToolId } from "@app/types/toolId";
 
 // Navigation state
 export interface NavigationState {
@@ -11,7 +11,6 @@ export interface NavigationState {
   selectedTool: ToolId | null;
 }
 
-
 // Route parsing result
 export interface ToolRoute {
   workbench: WorkbenchType;
diff --git a/frontend/src/core/types/navigationActions.ts b/frontend/src/core/types/navigationActions.ts
index b2d7a5e896..9025f745ce 100644
--- a/frontend/src/core/types/navigationActions.ts
+++ b/frontend/src/core/types/navigationActions.ts
@@ -2,8 +2,8 @@
  * Navigation action interfaces to break circular dependencies
  */
 
-import { WorkbenchType } from '@app/types/workbench';
-import { ToolId } from '@app/types/toolId';
+import { WorkbenchType } from "@app/types/workbench";
+import { ToolId } from "@app/types/toolId";
 
 export interface NavigationActions {
   setWorkbench: (workbench: WorkbenchType) => void;
@@ -21,4 +21,4 @@ export interface NavigationState {
   hasUnsavedChanges: boolean;
   pendingNavigation: (() => void) | null;
   showNavigationWarning: boolean;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/core/types/pageEditor.ts b/frontend/src/core/types/pageEditor.ts
index 46fcd06e4f..bb87a5eb74 100644
--- a/frontend/src/core/types/pageEditor.ts
+++ b/frontend/src/core/types/pageEditor.ts
@@ -1,7 +1,7 @@
-import { FileId } from '@app/types/file';
+import { FileId } from "@app/types/file";
 
-export type PageSize = 'A4' | 'Letter' | 'Legal' | 'A3' | 'A5';
-export type PageOrientation = 'portrait' | 'landscape';
+export type PageSize = "A4" | "Letter" | "Legal" | "A3" | "A5";
+export type PageOrientation = "portrait" | "landscape";
 
 export interface PageBreakSettings {
   size: PageSize;
@@ -33,10 +33,10 @@ export interface PDFDocument {
 
 export interface PageOperation {
   id: string;
-  type: 'rotate' | 'delete' | 'move' | 'split' | 'insert' | 'reorder';
+  type: "rotate" | "delete" | "move" | "split" | "insert" | "reorder";
   pageIds: string[];
   timestamp: number;
-  status: 'pending' | 'applied' | 'failed';
+  status: "pending" | "applied" | "failed";
   data?: any;
   metadata?: {
     rotation?: number;
@@ -59,7 +59,7 @@ export interface PageEditorFunctions {
   handleRedo: () => void;
   canUndo: boolean;
   canRedo: boolean;
-  handleRotate: (direction: 'left' | 'right') => void;
+  handleRotate: (direction: "left" | "right") => void;
   handleDelete: () => void;
   handleSplit: () => void;
   handleSplitAll: () => void;
diff --git a/frontend/src/core/types/parameters.ts b/frontend/src/core/types/parameters.ts
index 91355cb817..4fbc860bc5 100644
--- a/frontend/src/core/types/parameters.ts
+++ b/frontend/src/core/types/parameters.ts
@@ -3,4 +3,4 @@
 // Base interface that all tool parameters should extend
 // Provides a foundation for adding common properties across all tools
 // Examples of future additions: userId, sessionId, commonFlags, etc.
-export type BaseParameters = object
+export type BaseParameters = object;
diff --git a/frontend/src/core/types/processing.ts b/frontend/src/core/types/processing.ts
index ee2f5be178..6565dff43f 100644
--- a/frontend/src/core/types/processing.ts
+++ b/frontend/src/core/types/processing.ts
@@ -1,5 +1,5 @@
 export interface ProcessingError {
-  type: 'network' | 'parsing' | 'memory' | 'corruption' | 'timeout' | 'cancelled';
+  type: "network" | "parsing" | "memory" | "corruption" | "timeout" | "cancelled";
   message: string;
   recoverable: boolean;
   retryCount: number;
@@ -10,7 +10,7 @@ export interface ProcessingError {
 export interface ProcessingState {
   fileKey: string;
   fileName: string;
-  status: 'pending' | 'processing' | 'completed' | 'error' | 'cancelled';
+  status: "pending" | "processing" | "completed" | "error" | "cancelled";
   progress: number; // 0-100
   strategy: ProcessingStrategy;
   error?: ProcessingError;
@@ -60,12 +60,12 @@ export interface CacheStats {
   maxSizeBytes: number;
 }
 
-export type ProcessingStrategy = 'immediate_full' | 'progressive_chunked' | 'metadata_only' | 'priority_pages';
+export type ProcessingStrategy = "immediate_full" | "progressive_chunked" | "metadata_only" | "priority_pages";
 
 export interface ProcessingConfig {
   strategy: ProcessingStrategy;
   chunkSize: number; // Pages per chunk
-  thumbnailQuality: 'low' | 'medium' | 'high';
+  thumbnailQuality: "low" | "medium" | "high";
   priorityPageCount: number; // Number of priority pages to process first
   useWebWorker: boolean;
   maxRetries: number;
@@ -87,4 +87,4 @@ export interface ProcessingMetrics {
   averageProcessingTime: number;
   cacheHitRate: number;
   memoryUsage: number;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/core/types/proprietaryToolId.ts b/frontend/src/core/types/proprietaryToolId.ts
index 295cd30624..37ea4bde64 100644
--- a/frontend/src/core/types/proprietaryToolId.ts
+++ b/frontend/src/core/types/proprietaryToolId.ts
@@ -10,7 +10,7 @@ export const PROPRIETARY_REGULAR_TOOL_IDS = [] as const;
 export const PROPRIETARY_SUPER_TOOL_IDS = [] as const;
 export const PROPRIETARY_LINK_TOOL_IDS = [] as const;
 
-export type ProprietaryRegularToolId = typeof PROPRIETARY_REGULAR_TOOL_IDS[number];
-export type ProprietarySuperToolId = typeof PROPRIETARY_SUPER_TOOL_IDS[number];
-export type ProprietaryLinkToolId = typeof PROPRIETARY_LINK_TOOL_IDS[number];
+export type ProprietaryRegularToolId = (typeof PROPRIETARY_REGULAR_TOOL_IDS)[number];
+export type ProprietarySuperToolId = (typeof PROPRIETARY_SUPER_TOOL_IDS)[number];
+export type ProprietaryLinkToolId = (typeof PROPRIETARY_LINK_TOOL_IDS)[number];
 export type ProprietaryToolId = ProprietaryRegularToolId | ProprietarySuperToolId | ProprietaryLinkToolId;
diff --git a/frontend/src/core/types/rightRail.ts b/frontend/src/core/types/rightRail.ts
index 2a14e3bc64..8d36a7a8b5 100644
--- a/frontend/src/core/types/rightRail.ts
+++ b/frontend/src/core/types/rightRail.ts
@@ -1,41 +1,41 @@
-import React from 'react';
+import React from "react";
 
-export type RightRailSection = 'top' | 'middle' | 'bottom';
+export type RightRailSection = "top" | "middle" | "bottom";
 
 export type RightRailAction = () => void;
 
 export interface RightRailRenderContext {
-	id: string;
-	disabled: boolean;
-	allButtonsDisabled: boolean;
-	action?: RightRailAction;
-	triggerAction: () => void;
-	active: boolean;
+  id: string;
+  disabled: boolean;
+  allButtonsDisabled: boolean;
+  action?: RightRailAction;
+  triggerAction: () => void;
+  active: boolean;
 }
 
 export interface RightRailButtonConfig {
-	/** Unique id for the button, also used to bind action callbacks */
-	id: string;
-	/** Icon element to render when using default renderer */
-	icon?: React.ReactNode;
-	/** Tooltip content (can be localized node) */
-	tooltip?: React.ReactNode;
-	/** Optional ARIA label for a11y (separate from visual tooltip) */
-	ariaLabel?: string;
-	/** Optional i18n key carried by config */
-	templateKey?: string;
-	/** Visual grouping lane */
-	section?: RightRailSection;
-	/** Sorting within a section (lower first); ties broken by id */
-	order?: number;
-	/** Initial disabled state */
-	disabled?: boolean;
-	/** Initial visibility */
-	visible?: boolean;
-	/** Optional custom renderer for advanced layouts */
-	render?: (ctx: RightRailRenderContext) => React.ReactNode;
-	/** Optional className applied to wrapper when using default renderer */
-	className?: string;
-	/** Optional active state to highlight the control */
-	active?: boolean;
+  /** Unique id for the button, also used to bind action callbacks */
+  id: string;
+  /** Icon element to render when using default renderer */
+  icon?: React.ReactNode;
+  /** Tooltip content (can be localized node) */
+  tooltip?: React.ReactNode;
+  /** Optional ARIA label for a11y (separate from visual tooltip) */
+  ariaLabel?: string;
+  /** Optional i18n key carried by config */
+  templateKey?: string;
+  /** Visual grouping lane */
+  section?: RightRailSection;
+  /** Sorting within a section (lower first); ties broken by id */
+  order?: number;
+  /** Initial disabled state */
+  disabled?: boolean;
+  /** Initial visibility */
+  visible?: boolean;
+  /** Optional custom renderer for advanced layouts */
+  render?: (ctx: RightRailRenderContext) => React.ReactNode;
+  /** Optional className applied to wrapper when using default renderer */
+  className?: string;
+  /** Optional active state to highlight the control */
+  active?: boolean;
 }
diff --git a/frontend/src/core/types/sidebar.ts b/frontend/src/core/types/sidebar.ts
index ba6a8683eb..8f8c688dea 100644
--- a/frontend/src/core/types/sidebar.ts
+++ b/frontend/src/core/types/sidebar.ts
@@ -1,6 +1,6 @@
 export interface SidebarState {
   sidebarsVisible: boolean;
-  leftPanelView: 'toolPicker' | 'toolContent';
+  leftPanelView: "toolPicker" | "toolContent";
   readerMode: boolean;
 }
 
@@ -21,7 +21,7 @@ export interface SidebarContextValue {
   sidebarState: SidebarState;
   sidebarRefs: SidebarRefs;
   setSidebarsVisible: React.Dispatch<React.SetStateAction<boolean>>;
-  setLeftPanelView: React.Dispatch<React.SetStateAction<'toolPicker' | 'toolContent'>>;
+  setLeftPanelView: React.Dispatch<React.SetStateAction<"toolPicker" | "toolContent">>;
   setReaderMode: React.Dispatch<React.SetStateAction<boolean>>;
 }
 
@@ -34,7 +34,7 @@ export interface ButtonConfig {
   name: string;
   icon: React.ReactNode;
   isRound?: boolean;
-  size?: 'sm' | 'md' | 'lg' | 'xl';
+  size?: "sm" | "md" | "lg" | "xl";
   onClick: () => void;
-  type?: 'navigation' | 'modal' | 'action';
+  type?: "navigation" | "modal" | "action";
 }
diff --git a/frontend/src/core/types/signature.ts b/frontend/src/core/types/signature.ts
index 31f19510ba..089c5d66a1 100644
--- a/frontend/src/core/types/signature.ts
+++ b/frontend/src/core/types/signature.ts
@@ -1,17 +1,17 @@
-export type SavedSignatureType = 'canvas' | 'image' | 'text';
-export type SignatureScope = 'personal' | 'shared' | 'localStorage';
+export type SavedSignatureType = "canvas" | "image" | "text";
+export type SignatureScope = "personal" | "shared" | "localStorage";
 
 export type SavedSignaturePayload =
   | {
-      type: 'canvas';
+      type: "canvas";
       dataUrl: string;
     }
   | {
-      type: 'image';
+      type: "image";
       dataUrl: string;
     }
   | {
-      type: 'text';
+      type: "text";
       dataUrl: string;
       signerName: string;
       fontFamily: string;
diff --git a/frontend/src/core/types/signingSession.ts b/frontend/src/core/types/signingSession.ts
index 5ff527cc54..f2e4e83d1e 100644
--- a/frontend/src/core/types/signingSession.ts
+++ b/frontend/src/core/types/signingSession.ts
@@ -1,5 +1,5 @@
 export interface WetSignatureMetadata {
-  type: 'canvas' | 'image' | 'text';
+  type: "canvas" | "image" | "text";
   data: string; // Base64-encoded image data or text content
   page: number; // Zero-indexed page number
   x: number; // X coordinate in PDF points
@@ -34,7 +34,7 @@ export interface ParticipantInfo {
   userId: number;
   email: string;
   name: string;
-  status: 'PENDING' | 'NOTIFIED' | 'VIEWED' | 'SIGNED' | 'DECLINED';
+  status: "PENDING" | "NOTIFIED" | "VIEWED" | "SIGNED" | "DECLINED";
   lastUpdated: string;
   // Signature appearance settings (owner-controlled)
   showSignature?: boolean;
@@ -60,7 +60,7 @@ export interface SignRequestSummary {
   ownerUsername: string;
   createdAt: string;
   dueDate: string;
-  myStatus: 'PENDING' | 'NOTIFIED' | 'VIEWED' | 'SIGNED' | 'DECLINED';
+  myStatus: "PENDING" | "NOTIFIED" | "VIEWED" | "SIGNED" | "DECLINED";
 }
 
 export interface SignRequestDetail {
@@ -70,7 +70,7 @@ export interface SignRequestDetail {
   message: string;
   dueDate: string;
   createdAt: string;
-  myStatus: 'PENDING' | 'NOTIFIED' | 'VIEWED' | 'SIGNED' | 'DECLINED';
+  myStatus: "PENDING" | "NOTIFIED" | "VIEWED" | "SIGNED" | "DECLINED";
   // Signature appearance settings (read-only, configured by owner)
   showSignature?: boolean;
   pageNumber?: number;
diff --git a/frontend/src/core/types/tips.ts b/frontend/src/core/types/tips.ts
index 5bcd767d7a..396cbda21b 100644
--- a/frontend/src/core/types/tips.ts
+++ b/frontend/src/core/types/tips.ts
@@ -12,4 +12,4 @@ export interface TooltipContent {
   };
   tips?: TooltipTip[];
   content?: React.ReactNode;
-} 
\ No newline at end of file
+}
diff --git a/frontend/src/core/types/tool.ts b/frontend/src/core/types/tool.ts
index ff14056d3e..60b53ec790 100644
--- a/frontend/src/core/types/tool.ts
+++ b/frontend/src/core/types/tool.ts
@@ -1,10 +1,10 @@
-import React from 'react';
-import { ToolOperationHook } from '@app/hooks/tools/shared/toolOperationTypes';
+import React from "react";
+import { ToolOperationHook } from "@app/hooks/tools/shared/toolOperationTypes";
 
 export type MaxFiles = number; // 1=single, >1=limited, -1=unlimited
-export type ToolCategory = 'manipulation' | 'conversion' | 'analysis' | 'utility' | 'optimization' | 'security';
-export type ToolDefinition = Omit<Tool, 'name'>;
-export type ToolStepType = 'files' | 'settings' | 'results';
+export type ToolCategory = "manipulation" | "conversion" | "analysis" | "utility" | "optimization" | "security";
+export type ToolDefinition = Omit<Tool, "name">;
+export type ToolStepType = "files" | "settings" | "results";
 
 export interface BaseToolProps {
   onComplete?: (results: File[]) => void;
@@ -77,4 +77,3 @@ export interface Tool {
 }
 
 export type ToolRegistry = Record<string, Tool>;
-
diff --git a/frontend/src/core/types/toolId.ts b/frontend/src/core/types/toolId.ts
index 44103b6548..bb7d3fe38e 100644
--- a/frontend/src/core/types/toolId.ts
+++ b/frontend/src/core/types/toolId.ts
@@ -2,115 +2,88 @@ import {
   PROPRIETARY_REGULAR_TOOL_IDS,
   PROPRIETARY_SUPER_TOOL_IDS,
   PROPRIETARY_LINK_TOOL_IDS,
-} from '@app/types/proprietaryToolId';
+} from "@app/types/proprietaryToolId";
 
-export type ToolKind = 'regular' | 'super' | 'link';
+export type ToolKind = "regular" | "super" | "link";
 
 export const CORE_REGULAR_TOOL_IDS = [
-  'certSign',
-  'sign',
-  'addText',
-  'addPassword',
-  'removePassword',
-  'removePages',
-  'removeBlanks',
-  'removeAnnotations',
-  'removeImage',
-  'changePermissions',
-  'watermark',
-  'sanitize',
-  'split',
-  'merge',
-  'convert',
-  'ocr',
-  'addImage',
-  'rotate',
-  'annotate',
-  'scannerImageSplit',
-  'editTableOfContents',
-  'scannerEffect',
-  'autoRename',
-  'pageLayout',
-  'scalePages',
-  'adjustContrast',
-  'crop',
-  'pdfToSinglePage',
-  'repair',
-  'compare',
-  'addPageNumbers',
-  'redact',
-  'flatten',
-  'removeCertSign',
-  'unlockPDFForms',
-  'compress',
-  'extractPages',
-  'reorganizePages',
-  'extractImages',
-  'addStamp',
-  'addAttachments',
-  'changeMetadata',
-  'overlayPdfs',
-  'getPdfInfo',
-  'validateSignature',
-  'timestampPdf',
-  'replaceColor',
-  'showJS',
-  'bookletImposition',
-  'pdfTextEditor',
-  'formFill',
+  "certSign",
+  "sign",
+  "addText",
+  "addPassword",
+  "removePassword",
+  "removePages",
+  "removeBlanks",
+  "removeAnnotations",
+  "removeImage",
+  "changePermissions",
+  "watermark",
+  "sanitize",
+  "split",
+  "merge",
+  "convert",
+  "ocr",
+  "addImage",
+  "rotate",
+  "annotate",
+  "scannerImageSplit",
+  "editTableOfContents",
+  "scannerEffect",
+  "autoRename",
+  "pageLayout",
+  "scalePages",
+  "adjustContrast",
+  "crop",
+  "pdfToSinglePage",
+  "repair",
+  "compare",
+  "addPageNumbers",
+  "redact",
+  "flatten",
+  "removeCertSign",
+  "unlockPDFForms",
+  "compress",
+  "extractPages",
+  "reorganizePages",
+  "extractImages",
+  "addStamp",
+  "addAttachments",
+  "changeMetadata",
+  "overlayPdfs",
+  "getPdfInfo",
+  "validateSignature",
+  "timestampPdf",
+  "replaceColor",
+  "showJS",
+  "bookletImposition",
+  "pdfTextEditor",
+  "formFill",
 ] as const;
 
-export const CORE_SUPER_TOOL_IDS = [
-  'multiTool',
-  'read',
-  'automate',
-] as const;
+export const CORE_SUPER_TOOL_IDS = ["multiTool", "read", "automate"] as const;
 
-export const CORE_LINK_TOOL_IDS = [
-  'devApi',
-  'devFolderScanning',
-  'devSsoGuide',
-  'devAirgapped',
-] as const;
+export const CORE_LINK_TOOL_IDS = ["devApi", "devFolderScanning", "devSsoGuide", "devAirgapped"] as const;
 
-export const REGULAR_TOOL_IDS = [
-  ...CORE_REGULAR_TOOL_IDS,
-  ...PROPRIETARY_REGULAR_TOOL_IDS,
-] as const;
+export const REGULAR_TOOL_IDS = [...CORE_REGULAR_TOOL_IDS, ...PROPRIETARY_REGULAR_TOOL_IDS] as const;
 
-export const SUPER_TOOL_IDS = [
-  ...CORE_SUPER_TOOL_IDS,
-  ...PROPRIETARY_SUPER_TOOL_IDS,
-] as const;
+export const SUPER_TOOL_IDS = [...CORE_SUPER_TOOL_IDS, ...PROPRIETARY_SUPER_TOOL_IDS] as const;
 
-export const LINK_TOOL_IDS = [
-  ...CORE_LINK_TOOL_IDS,
-  ...PROPRIETARY_LINK_TOOL_IDS,
-] as const;
+export const LINK_TOOL_IDS = [...CORE_LINK_TOOL_IDS, ...PROPRIETARY_LINK_TOOL_IDS] as const;
 
-export const TOOL_IDS = [
-  ...REGULAR_TOOL_IDS,
-  ...SUPER_TOOL_IDS,
-  ...LINK_TOOL_IDS,
-];
+export const TOOL_IDS = [...REGULAR_TOOL_IDS, ...SUPER_TOOL_IDS, ...LINK_TOOL_IDS];
 
 // Tool identity - what PDF operation we're performing (type-safe)
-export type ToolId = typeof TOOL_IDS[number];
-export const isValidToolId = (value: string): value is ToolId =>
-  TOOL_IDS.includes(value as ToolId);
+export type ToolId = (typeof TOOL_IDS)[number];
+export const isValidToolId = (value: string): value is ToolId => TOOL_IDS.includes(value as ToolId);
 
-export type RegularToolId = typeof REGULAR_TOOL_IDS[number];
-export const isRegularToolId = (toolId: ToolId): toolId is RegularToolId =>
-  REGULAR_TOOL_IDS.includes(toolId as RegularToolId);
+export type RegularToolId = (typeof REGULAR_TOOL_IDS)[number];
+export const isRegularToolId = (toolId: ToolId): toolId is RegularToolId => REGULAR_TOOL_IDS.includes(toolId as RegularToolId);
 
-export type SuperToolId = typeof SUPER_TOOL_IDS[number];
-export const isSuperToolId = (toolId: ToolId): toolId is SuperToolId =>
-  SUPER_TOOL_IDS.includes(toolId as SuperToolId);
-
-export type LinkToolId = typeof LINK_TOOL_IDS[number];
-export const isLinkToolId = (toolId: ToolId): toolId is LinkToolId =>
-  LINK_TOOL_IDS.includes(toolId as LinkToolId);
+export type SuperToolId = (typeof SUPER_TOOL_IDS)[number];
+export const isSuperToolId = (toolId: ToolId): toolId is SuperToolId => SUPER_TOOL_IDS.includes(toolId as SuperToolId);
 
+export type LinkToolId = (typeof LINK_TOOL_IDS)[number];
+export const isLinkToolId = (toolId: ToolId): toolId is LinkToolId => LINK_TOOL_IDS.includes(toolId as LinkToolId);
 
 type Assert<A extends true> = A;
 type Disjoint<A, B> = [A & B] extends [never] ? true : false;
diff --git a/frontend/src/core/types/types.ts b/frontend/src/core/types/types.ts
index 2ddd9479aa..fd37a20d60 100644
--- a/frontend/src/core/types/types.ts
+++ b/frontend/src/core/types/types.ts
@@ -1,11 +1,11 @@
-import { ReactNode } from 'react';
+import { ReactNode } from "react";
 
 export interface AnimatedCircleConfig {
   size: number;
   color: string;
   opacity?: number;
   blur?: number;
-  position: 'bottom-left' | 'top-right';
+  position: "bottom-left" | "top-right";
   amplitude?: number;
   duration?: number;
   delay?: number;
diff --git a/frontend/src/core/types/workbench.ts b/frontend/src/core/types/workbench.ts
index d34f942eac..0221cd3522 100644
--- a/frontend/src/core/types/workbench.ts
+++ b/frontend/src/core/types/workbench.ts
@@ -1,19 +1,19 @@
 // Define workbench values once as source of truth
-export const BASE_WORKBENCH_TYPES = ['viewer', 'pageEditor', 'fileEditor'] as const;
+export const BASE_WORKBENCH_TYPES = ["viewer", "pageEditor", "fileEditor"] as const;
 
-export type BaseWorkbenchType = typeof BASE_WORKBENCH_TYPES[number];
+export type BaseWorkbenchType = (typeof BASE_WORKBENCH_TYPES)[number];
 
 // Workbench types including custom views
 export type WorkbenchType = BaseWorkbenchType | `custom:${string}`;
 
-export const getDefaultWorkbench = (): WorkbenchType => 'viewer';
+export const getDefaultWorkbench = (): WorkbenchType => "viewer";
 
 // Type guard using the same source of truth
 export const isValidWorkbench = (value: string): value is WorkbenchType => {
   if (BASE_WORKBENCH_TYPES.includes(value as BaseWorkbenchType)) {
     return true;
   }
-  return value.startsWith('custom:');
+  return value.startsWith("custom:");
 };
 
 export const isBaseWorkbench = (value: WorkbenchType): value is BaseWorkbenchType => {
diff --git a/frontend/src/core/utils/automationConverter.ts b/frontend/src/core/utils/automationConverter.ts
index b35546f333..c5ce1ade1a 100644
--- a/frontend/src/core/utils/automationConverter.ts
+++ b/frontend/src/core/utils/automationConverter.ts
@@ -2,10 +2,10 @@
  * Utility functions for converting between automation formats
  */
 
-import { AutomationConfig } from '@app/types/automation';
-import { ToolRegistry } from '@app/data/toolsTaxonomy';
-import { downloadFile } from '@app/services/downloadService';
-import { ToolId } from '@app/types/toolId';
+import { AutomationConfig } from "@app/types/automation";
+import { ToolRegistry } from "@app/data/toolsTaxonomy";
+import { downloadFile } from "@app/services/downloadService";
+import { ToolId } from "@app/types/toolId";
 
 /**
  * Pipeline configuration format used by folder scanning
@@ -32,11 +32,11 @@ interface FolderScanningPipeline {
  */
 export function convertToFolderScanningConfig(
   automation: AutomationConfig,
-  toolRegistry: Partial<ToolRegistry>
+  toolRegistry: Partial<ToolRegistry>,
 ): FolderScanningPipeline {
   return {
     name: automation.name,
-    pipeline: automation.operations.map(op => {
+    pipeline: automation.operations.map((op) => {
       // Map operationType to full API endpoint path
       const toolId = op.operation as ToolId;
       const toolEntry = toolRegistry[toolId];
@@ -44,17 +44,17 @@ export function convertToFolderScanningConfig(
 
       let endpoint: string | undefined;
 
-      if (typeof endpointConfig === 'string') {
+      if (typeof endpointConfig === "string") {
         endpoint = endpointConfig;
-      } else if (typeof endpointConfig === 'function') {
+      } else if (typeof endpointConfig === "function") {
         // For dynamic endpoints, call with the saved parameters
         try {
           endpoint = endpointConfig(op.parameters);
         } catch (error) {
           console.warn(
             `Failed to resolve dynamic endpoint for operation "${op.operation}". ` +
-            `This may happen if the tool requires specific parameters. ` +
-            `Error: ${error}`
+              `This may happen if the tool requires specific parameters. ` +
+              `Error: ${error}`,
           );
         }
       }
@@ -62,8 +62,8 @@ export function convertToFolderScanningConfig(
       if (!endpoint) {
         console.warn(
           `No endpoint found for operation "${op.operation}". ` +
-          `This operation may fail in folder scanning. ` +
-          `Using operation type as fallback.`
+            `This operation may fail in folder scanning. ` +
+            `Using operation type as fallback.`,
         );
       }
 
@@ -71,16 +71,16 @@ export function convertToFolderScanningConfig(
         operation: endpoint || op.operation,
         parameters: {
           ...op.parameters,
-          fileInput: "automated"
-        }
+          fileInput: "automated",
+        },
       };
     }),
     _examples: {
       outputDir: "{outputFolder}/{folderName}",
-      outputFileName: "{filename}-{pipelineName}-{date}-{time}"
+      outputFileName: "{filename}-{pipelineName}-{date}-{time}",
     },
     outputDir: "{outputFolder}",
-    outputFileName: "{filename}"
+    outputFileName: "{filename}",
   };
 }
 
@@ -89,12 +89,9 @@ export function convertToFolderScanningConfig(
  * @param automation The automation configuration to export
  * @param toolRegistry The tool registry to map operation types to endpoints
  */
-export function downloadFolderScanningConfig(
-  automation: AutomationConfig,
-  toolRegistry: Partial<ToolRegistry>
-): void {
+export function downloadFolderScanningConfig(automation: AutomationConfig, toolRegistry: Partial<ToolRegistry>): void {
   const config = convertToFolderScanningConfig(automation, toolRegistry);
   const json = JSON.stringify(config, null, 2);
-  const blob = new Blob([json], { type: 'application/json' });
+  const blob = new Blob([json], { type: "application/json" });
   void downloadFile({ data: blob, filename: `${automation.name}.json` });
 }
diff --git a/frontend/src/core/utils/automationExecutor.ts b/frontend/src/core/utils/automationExecutor.ts
index 24679bdb71..8912c610ac 100644
--- a/frontend/src/core/utils/automationExecutor.ts
+++ b/frontend/src/core/utils/automationExecutor.ts
@@ -1,10 +1,10 @@
-import apiClient from '@app/services/apiClient';
-import { ToolRegistry } from '@app/data/toolsTaxonomy';
-import { ToolId } from '@app/types/toolId';
-import { AUTOMATION_CONSTANTS } from '@app/constants/automation';
-import { AutomationFileProcessor } from '@app/utils/automationFileProcessor';
-import { ToolType } from '@app/hooks/tools/shared/useToolOperation';
-import { processResponse } from '@app/utils/toolResponseProcessor';
+import apiClient from "@app/services/apiClient";
+import { ToolRegistry } from "@app/data/toolsTaxonomy";
+import { ToolId } from "@app/types/toolId";
+import { AUTOMATION_CONSTANTS } from "@app/constants/automation";
+import { AutomationFileProcessor } from "@app/utils/automationFileProcessor";
+import { ToolType } from "@app/hooks/tools/shared/useToolOperation";
+import { processResponse } from "@app/utils/toolResponseProcessor";
 
 /**
  * Process multi-file tool response (handles ZIP or single PDF responses)
@@ -14,18 +14,17 @@ const processMultiFileResponse = async (
   responseHeaders: any,
   files: File[],
   filePrefix: string,
-  preserveBackendFilename?: boolean
+  preserveBackendFilename?: boolean,
 ): Promise<File[]> => {
   // Multi-file responses are typically ZIP files, but may be single files (e.g. split with merge=true)
-  if (responseData.type === 'application/pdf' ||
-      (responseHeaders && responseHeaders['content-type'] === 'application/pdf')) {
+  if (responseData.type === "application/pdf" || (responseHeaders && responseHeaders["content-type"] === "application/pdf")) {
     // Single PDF response - use processResponse to respect preserveBackendFilename
     const processedFiles = await processResponse(
       responseData,
       files,
       filePrefix,
       undefined,
-      preserveBackendFilename ? responseHeaders : undefined
+      preserveBackendFilename ? responseHeaders : undefined,
     );
     return processedFiles;
   } else {
@@ -37,12 +36,13 @@ const processMultiFileResponse = async (
     }
 
     // Apply prefix to files, replacing any existing prefix
-    const processedFiles = filePrefix && !preserveBackendFilename
-      ? result.files.map(file => {
-          const nameWithoutPrefix = file.name.replace(/^[^_]*_/, '');
-          return new File([file], `${filePrefix}${nameWithoutPrefix}`, { type: file.type });
-        })
-      : result.files;
+    const processedFiles =
+      filePrefix && !preserveBackendFilename
+        ? result.files.map((file) => {
+            const nameWithoutPrefix = file.name.replace(/^[^_]*_/, "");
+            return new File([file], `${filePrefix}${nameWithoutPrefix}`, { type: file.type });
+          })
+        : result.files;
 
     return processedFiles;
   }
@@ -56,20 +56,14 @@ const executeApiRequest = async (
   formData: FormData,
   files: File[],
   filePrefix: string,
-  preserveBackendFilename?: boolean
+  preserveBackendFilename?: boolean,
 ): Promise<File[]> => {
   const response = await apiClient.post(endpoint, formData, {
-    responseType: 'blob',
-    timeout: AUTOMATION_CONSTANTS.OPERATION_TIMEOUT
+    responseType: "blob",
+    timeout: AUTOMATION_CONSTANTS.OPERATION_TIMEOUT,
   });
 
-  return await processMultiFileResponse(
-    response.data,
-    response.headers,
-    files,
-    filePrefix,
-    preserveBackendFilename
-  );
+  return await processMultiFileResponse(response.data, response.headers, files, filePrefix, preserveBackendFilename);
 };
 
 /**
@@ -79,24 +73,16 @@ const executeSingleFileOperation = async (
   config: any,
   parameters: any,
   files: File[],
-  filePrefix: string
+  filePrefix: string,
 ): Promise<File[]> => {
   const resultFiles: File[] = [];
 
   for (const file of files) {
-    const endpoint = typeof config.endpoint === 'function'
-      ? config.endpoint(parameters)
-      : config.endpoint;
+    const endpoint = typeof config.endpoint === "function" ? config.endpoint(parameters) : config.endpoint;
 
     const formData = (config.buildFormData as (params: any, file: File) => FormData)(parameters, file);
 
-    const processedFiles = await executeApiRequest(
-      endpoint,
-      formData,
-      [file],
-      filePrefix,
-      config.preserveBackendFilename
-    );
+    const processedFiles = await executeApiRequest(endpoint, formData, [file], filePrefix, config.preserveBackendFilename);
     resultFiles.push(...processedFiles);
   }
 
@@ -106,28 +92,14 @@ const executeSingleFileOperation = async (
 /**
  * Execute multi-file tool operation (processes all files in one request)
  */
-const executeMultiFileOperation = async (
-  config: any,
-  parameters: any,
-  files: File[],
-  filePrefix: string
-): Promise<File[]> => {
-  const endpoint = typeof config.endpoint === 'function'
-    ? config.endpoint(parameters)
-    : config.endpoint;
+const executeMultiFileOperation = async (config: any, parameters: any, files: File[], filePrefix: string): Promise<File[]> => {
+  const endpoint = typeof config.endpoint === "function" ? config.endpoint(parameters) : config.endpoint;
 
   const formData = (config.buildFormData as (params: any, files: File[]) => FormData)(parameters, files);
 
-  return await executeApiRequest(
-    endpoint,
-    formData,
-    files,
-    filePrefix,
-    config.preserveBackendFilename
-  );
+  return await executeApiRequest(endpoint, formData, files, filePrefix, config.preserveBackendFilename);
 };
 
-
 /**
  * Execute a tool operation directly without using React hooks
  */
@@ -135,7 +107,7 @@ export const executeToolOperation = async (
   operationName: string,
   parameters: any,
   files: File[],
-  toolRegistry: ToolRegistry
+  toolRegistry: ToolRegistry,
 ): Promise<File[]> => {
   return executeToolOperationWithPrefix(operationName, parameters, files, toolRegistry, AUTOMATION_CONSTANTS.FILE_PREFIX);
 };
@@ -148,7 +120,7 @@ export const executeToolOperationWithPrefix = async (
   parameters: any,
   files: File[],
   toolRegistry: ToolRegistry,
-  filePrefix: string = AUTOMATION_CONSTANTS.FILE_PREFIX
+  filePrefix: string = AUTOMATION_CONSTANTS.FILE_PREFIX,
 ): Promise<File[]> => {
   const config = toolRegistry[operationName as ToolId]?.operationConfig;
   if (!config) {
@@ -171,7 +143,6 @@ export const executeToolOperationWithPrefix = async (
     } else {
       return await executeSingleFileOperation(config, mergedParameters, files, filePrefix);
     }
-
   } catch (error: any) {
     console.error(`❌ ${operationName} failed:`, error);
     throw new Error(`${operationName} operation failed: ${error.response?.data || error.message}`, {
@@ -189,17 +160,17 @@ export const executeAutomationSequence = async (
   toolRegistry: ToolRegistry,
   onStepStart?: (stepIndex: number, operationName: string) => void,
   onStepComplete?: (stepIndex: number, resultFiles: File[]) => void,
-  onStepError?: (stepIndex: number, error: string) => void
+  onStepError?: (stepIndex: number, error: string) => void,
 ): Promise<File[]> => {
-  console.log(`🚀 Starting automation: ${automation.name || 'Unnamed'}`);
+  console.log(`🚀 Starting automation: ${automation.name || "Unnamed"}`);
   console.log(`📁 Input: ${initialFiles.length} file(s)`);
 
   if (!automation?.operations || automation.operations.length === 0) {
-    throw new Error('No operations in automation');
+    throw new Error("No operations in automation");
   }
 
   let currentFiles = [...initialFiles];
-  const automationPrefix = automation.name ? `${automation.name}_` : 'automated_';
+  const automationPrefix = automation.name ? `${automation.name}_` : "automated_";
 
   for (let i = 0; i < automation.operations.length; i++) {
     const operation = automation.operations[i];
@@ -215,13 +186,12 @@ export const executeAutomationSequence = async (
         operation.parameters || {},
         currentFiles,
         toolRegistry,
-        i === automation.operations.length - 1 ? automationPrefix : '' // Only add prefix to final step
+        i === automation.operations.length - 1 ? automationPrefix : "", // Only add prefix to final step
       );
 
       console.log(`✅ Step ${i + 1} completed: ${resultFiles.length} result files`);
       currentFiles = resultFiles;
       onStepComplete?.(i, resultFiles);
-
     } catch (error: any) {
       console.error(`❌ Step ${i + 1} failed:`, error);
       onStepError?.(i, error.message);
diff --git a/frontend/src/core/utils/automationFileProcessor.ts b/frontend/src/core/utils/automationFileProcessor.ts
index 311848bfd6..f198864a1c 100644
--- a/frontend/src/core/utils/automationFileProcessor.ts
+++ b/frontend/src/core/utils/automationFileProcessor.ts
@@ -2,14 +2,14 @@
  * File processing utilities specifically for automation workflows
  */
 
-import apiClient from '@app/services/apiClient';
-import { zipFileService } from '@app/services/zipFileService';
-import { ResourceManager } from '@app/utils/resourceManager';
-import { AUTOMATION_CONSTANTS } from '@app/constants/automation';
+import apiClient from "@app/services/apiClient";
+import { zipFileService } from "@app/services/zipFileService";
+import { ResourceManager } from "@app/utils/resourceManager";
+import { AUTOMATION_CONSTANTS } from "@app/constants/automation";
 
 export interface AutomationProcessingOptions {
   timeout?: number;
-  responseType?: 'blob' | 'json';
+  responseType?: "blob" | "json";
 }
 
 export interface AutomationProcessingResult {
@@ -25,7 +25,7 @@ export class AutomationFileProcessor {
   static isZipFile(blob: Blob): boolean {
     // This is a simple check - in a real implementation you might want to read the first few bytes
     // For now, we'll rely on the extraction attempt and fallback
-    return blob.type === 'application/zip' || blob.type === 'application/x-zip-compressed';
+    return blob.type === "application/zip" || blob.type === "application/x-zip-compressed";
   }
 
   /**
@@ -37,8 +37,8 @@ export class AutomationFileProcessor {
       const zipFile = ResourceManager.createTimestampedFile(
         blob,
         AUTOMATION_CONSTANTS.RESPONSE_ZIP_PREFIX,
-        '.zip',
-        'application/zip'
+        ".zip",
+        "application/zip",
       );
 
       // Check if ZIP contains HTML files - if so, keep as ZIP
@@ -48,7 +48,7 @@ export class AutomationFileProcessor {
         return {
           success: true,
           files: [zipFile],
-          errors: []
+          errors: [],
         };
       }
 
@@ -60,29 +60,29 @@ export class AutomationFileProcessor {
         return {
           success: true,
           files: [zipFile],
-          errors: [`ZIP extraction failed, kept as ZIP: ${result.errors?.join(', ') || 'Unknown error'}`]
+          errors: [`ZIP extraction failed, kept as ZIP: ${result.errors?.join(", ") || "Unknown error"}`],
         };
       }
 
       return {
         success: true,
         files: result.extractedFiles,
-        errors: []
+        errors: [],
       };
     } catch (error) {
-      console.warn('Failed to extract automation ZIP files, keeping as ZIP:', error);
+      console.warn("Failed to extract automation ZIP files, keeping as ZIP:", error);
       // Fallback: keep as ZIP file for next automation step to handle
       const fallbackFile = ResourceManager.createTimestampedFile(
         blob,
         AUTOMATION_CONSTANTS.RESPONSE_ZIP_PREFIX,
-        '.zip',
-        'application/zip'
+        ".zip",
+        "application/zip",
       );
 
       return {
         success: true,
         files: [fallbackFile],
-        errors: [`ZIP extraction failed, kept as ZIP: ${error}`]
+        errors: [`ZIP extraction failed, kept as ZIP: ${error}`],
       };
     }
   }
@@ -94,38 +94,34 @@ export class AutomationFileProcessor {
     endpoint: string,
     formData: FormData,
     originalFileName: string,
-    options: AutomationProcessingOptions = {}
+    options: AutomationProcessingOptions = {},
   ): Promise<AutomationProcessingResult> {
     try {
       const response = await apiClient.post(endpoint, formData, {
-        responseType: options.responseType || 'blob',
-        timeout: options.timeout || AUTOMATION_CONSTANTS.OPERATION_TIMEOUT
+        responseType: options.responseType || "blob",
+        timeout: options.timeout || AUTOMATION_CONSTANTS.OPERATION_TIMEOUT,
       });
 
       if (response.status !== 200) {
         return {
           success: false,
           files: [],
-          errors: [`Automation step failed - HTTP ${response.status}: ${response.statusText}`]
+          errors: [`Automation step failed - HTTP ${response.status}: ${response.statusText}`],
         };
       }
 
-      const resultFile = ResourceManager.createResultFile(
-        response.data,
-        originalFileName,
-        AUTOMATION_CONSTANTS.FILE_PREFIX
-      );
+      const resultFile = ResourceManager.createResultFile(response.data, originalFileName, AUTOMATION_CONSTANTS.FILE_PREFIX);
 
       return {
         success: true,
         files: [resultFile],
-        errors: []
+        errors: [],
       };
     } catch (error: any) {
       return {
         success: false,
         files: [],
-        errors: [`Automation step failed: ${error.response?.data || error.message}`]
+        errors: [`Automation step failed: ${error.response?.data || error.message}`],
       };
     }
   }
@@ -136,19 +132,19 @@ export class AutomationFileProcessor {
   static async processAutomationMultipleFiles(
     endpoint: string,
     formData: FormData,
-    options: AutomationProcessingOptions = {}
+    options: AutomationProcessingOptions = {},
   ): Promise<AutomationProcessingResult> {
     try {
       const response = await apiClient.post(endpoint, formData, {
-        responseType: options.responseType || 'blob',
-        timeout: options.timeout || AUTOMATION_CONSTANTS.OPERATION_TIMEOUT
+        responseType: options.responseType || "blob",
+        timeout: options.timeout || AUTOMATION_CONSTANTS.OPERATION_TIMEOUT,
       });
 
       if (response.status !== 200) {
         return {
           success: false,
           files: [],
-          errors: [`Automation step failed - HTTP ${response.status}: ${response.statusText}`]
+          errors: [`Automation step failed - HTTP ${response.status}: ${response.statusText}`],
         };
       }
 
@@ -158,7 +154,7 @@ export class AutomationFileProcessor {
       return {
         success: false,
         files: [],
-        errors: [`Automation step failed: ${error.response?.data || error.message}`]
+        errors: [`Automation step failed: ${error.response?.data || error.message}`],
       };
     }
   }
@@ -169,13 +165,13 @@ export class AutomationFileProcessor {
   static buildAutomationFormData(
     parameters: Record<string, any>,
     files: File | File[],
-    fileFieldName: string = 'fileInput'
+    fileFieldName: string = "fileInput",
   ): FormData {
     const formData = new FormData();
 
     // Add files
     if (Array.isArray(files)) {
-      files.forEach(file => formData.append(fileFieldName, file));
+      files.forEach((file) => formData.append(fileFieldName, file));
     } else {
       formData.append(fileFieldName, files);
     }
@@ -183,7 +179,7 @@ export class AutomationFileProcessor {
     // Add parameters
     Object.entries(parameters).forEach(([key, value]) => {
       if (Array.isArray(value)) {
-        value.forEach(item => formData.append(key, item));
+        value.forEach((item) => formData.append(key, item));
       } else if (value !== undefined && value !== null) {
         formData.append(key, value);
       }
diff --git a/frontend/src/core/utils/browserIdentifier.ts b/frontend/src/core/utils/browserIdentifier.ts
index b41914a5ed..703766a10b 100644
--- a/frontend/src/core/utils/browserIdentifier.ts
+++ b/frontend/src/core/utils/browserIdentifier.ts
@@ -3,7 +3,7 @@
  * Generates and persists a unique UUID in localStorage for WAU tracking
  */
 
-const BROWSER_ID_KEY = 'stirling_browser_id';
+const BROWSER_ID_KEY = "stirling_browser_id";
 
 /**
  * Gets or creates a unique browser identifier
@@ -23,7 +23,7 @@ export function getBrowserId(): string {
     return browserId;
   } catch (error) {
     // Fallback to session-based ID if localStorage is unavailable
-    console.warn('localStorage unavailable, using session-based ID', error);
+    console.warn("localStorage unavailable, using session-based ID", error);
     return `session_${generateUUID()}`;
   }
 }
@@ -33,14 +33,14 @@ export function getBrowserId(): string {
  */
 function generateUUID(): string {
   // Use crypto.randomUUID if available (modern browsers)
-  if (typeof crypto !== 'undefined' && crypto.randomUUID) {
+  if (typeof crypto !== "undefined" && crypto.randomUUID) {
     return crypto.randomUUID();
   }
 
   // Fallback to manual UUID generation
-  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+  return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, (c) => {
     const r = (Math.random() * 16) | 0;
-    const v = c === 'x' ? r : (r & 0x3) | 0x8;
+    const v = c === "x" ? r : (r & 0x3) | 0x8;
     return v.toString(16);
   });
 }
diff --git a/frontend/src/core/utils/bulkselection/parseSelection.test.ts b/frontend/src/core/utils/bulkselection/parseSelection.test.ts
index bc1319a7d4..9532ca2a56 100644
--- a/frontend/src/core/utils/bulkselection/parseSelection.test.ts
+++ b/frontend/src/core/utils/bulkselection/parseSelection.test.ts
@@ -1,242 +1,240 @@
-import { describe, it, expect } from 'vitest';
-import { parseSelection } from '@app/utils/bulkselection/parseSelection';
+import { describe, it, expect } from "vitest";
+import { parseSelection } from "@app/utils/bulkselection/parseSelection";
 
-describe('parseSelection', () => {
+describe("parseSelection", () => {
   const max = 120;
 
-  it('1) parses single numbers', () => {
-    expect(parseSelection('5', max)).toEqual([5]);
+  it("1) parses single numbers", () => {
+    expect(parseSelection("5", max)).toEqual([5]);
   });
 
-  it('2) parses simple range', () => {
-    expect(parseSelection('3-7', max)).toEqual([3,4,5,6,7]);
+  it("2) parses simple range", () => {
+    expect(parseSelection("3-7", max)).toEqual([3, 4, 5, 6, 7]);
   });
 
-  it('3) parses multiple numbers and ranges via comma OR', () => {
-    expect(parseSelection('1,3-5,10', max)).toEqual([1,3,4,5,10]);
+  it("3) parses multiple numbers and ranges via comma OR", () => {
+    expect(parseSelection("1,3-5,10", max)).toEqual([1, 3, 4, 5, 10]);
   });
 
-  it('4) respects bounds (clamps to 1..max and filters invalid)', () => {
-    expect(parseSelection('0, -2, 1-2, 9999', max)).toEqual([1,2]);
+  it("4) respects bounds (clamps to 1..max and filters invalid)", () => {
+    expect(parseSelection("0, -2, 1-2, 9999", max)).toEqual([1, 2]);
   });
 
-  it('5) supports even keyword', () => {
-    expect(parseSelection('even', 10)).toEqual([2,4,6,8,10]);
+  it("5) supports even keyword", () => {
+    expect(parseSelection("even", 10)).toEqual([2, 4, 6, 8, 10]);
   });
 
-  it('6) supports odd keyword', () => {
-    expect(parseSelection('odd', 10)).toEqual([1,3,5,7,9]);
+  it("6) supports odd keyword", () => {
+    expect(parseSelection("odd", 10)).toEqual([1, 3, 5, 7, 9]);
   });
 
-  it('7) supports 2n progression', () => {
-    expect(parseSelection('2n', 12)).toEqual([2,4,6,8,10,12]);
+  it("7) supports 2n progression", () => {
+    expect(parseSelection("2n", 12)).toEqual([2, 4, 6, 8, 10, 12]);
   });
 
-  it('8) supports kn±c progression (3n+1)', () => {
-    expect(parseSelection('3n+1', 10)).toEqual([1,4,7,10]);
+  it("8) supports kn±c progression (3n+1)", () => {
+    expect(parseSelection("3n+1", 10)).toEqual([1, 4, 7, 10]);
   });
 
-  it('9) supports kn±c progression (4n-1)', () => {
-    expect(parseSelection('4n-1', 15)).toEqual([3,7,11,15]);
+  it("9) supports kn±c progression (4n-1)", () => {
+    expect(parseSelection("4n-1", 15)).toEqual([3, 7, 11, 15]);
   });
 
-  it('10) supports logical AND (&) intersection', () => {
+  it("10) supports logical AND (&) intersection", () => {
     // even AND 1-10 => even numbers within 1..10
-    expect(parseSelection('even & 1-10', 20)).toEqual([2,4,6,8,10]);
+    expect(parseSelection("even & 1-10", 20)).toEqual([2, 4, 6, 8, 10]);
   });
 
-  it('11) supports logical OR with comma', () => {
-    expect(parseSelection('1-3, 8-9', 20)).toEqual([1,2,3,8,9]);
+  it("11) supports logical OR with comma", () => {
+    expect(parseSelection("1-3, 8-9", 20)).toEqual([1, 2, 3, 8, 9]);
   });
 
-  it('12) supports logical OR with | and word or', () => {
-    expect(parseSelection('1-2 | 9-10 or 5', 20)).toEqual([1,2,5,9,10]);
+  it("12) supports logical OR with | and word or", () => {
+    expect(parseSelection("1-2 | 9-10 or 5", 20)).toEqual([1, 2, 5, 9, 10]);
   });
 
-  it('13) supports NOT operator !', () => {
+  it("13) supports NOT operator !", () => {
     // !1-5 within max=10 -> 6..10
-    expect(parseSelection('!1-5', 10)).toEqual([6,7,8,9,10]);
+    expect(parseSelection("!1-5", 10)).toEqual([6, 7, 8, 9, 10]);
   });
 
-  it('14) supports combination: 1-10 & 2n & !5-7', () => {
-    expect(parseSelection('1-10 & 2n & !5-7', 20)).toEqual([2,4,8,10]);
+  it("14) supports combination: 1-10 & 2n & !5-7", () => {
+    expect(parseSelection("1-10 & 2n & !5-7", 20)).toEqual([2, 4, 8, 10]);
   });
 
-  it('15) preserves precedence: AND over OR', () => {
+  it("15) preserves precedence: AND over OR", () => {
     // 1-10 & even, 15 OR => ( (1-10 & even) , 15 )
-    expect(parseSelection('1-10 & even, 15', 20)).toEqual([2,4,6,8,10,15]);
+    expect(parseSelection("1-10 & even, 15", 20)).toEqual([2, 4, 6, 8, 10, 15]);
   });
 
-  it('16) handles whitespace and case-insensitive keywords', () => {
-    expect(parseSelection('  OdD  & 1-7  ', 10)).toEqual([1,3,5,7]);
+  it("16) handles whitespace and case-insensitive keywords", () => {
+    expect(parseSelection("  OdD  & 1-7  ", 10)).toEqual([1, 3, 5, 7]);
   });
 
-  it('17) progression plus range: 2n | 9-11 within 12', () => {
-    expect(parseSelection('2n | 9-11', 12)).toEqual([2,4,6,8,9,10,11,12]);
+  it("17) progression plus range: 2n | 9-11 within 12", () => {
+    expect(parseSelection("2n | 9-11", 12)).toEqual([2, 4, 6, 8, 9, 10, 11, 12]);
   });
 
-  it('18) complex: (2n-1 & 1-20) & ! (5-7)', () => {
-    expect(parseSelection('2n-1 & 1-20 & !5-7', 20)).toEqual([1,3,9,11,13,15,17,19]);
+  it("18) complex: (2n-1 & 1-20) & ! (5-7)", () => {
+    expect(parseSelection("2n-1 & 1-20 & !5-7", 20)).toEqual([1, 3, 9, 11, 13, 15, 17, 19]);
   });
 
-  it('19) falls back to CSV when expression malformed', () => {
+  it("19) falls back to CSV when expression malformed", () => {
     // malformed: "2x" -> fallback should treat as CSV tokens -> only 2 ignored -> result empty
-    expect(parseSelection('2x', 10)).toEqual([]);
+    expect(parseSelection("2x", 10)).toEqual([]);
     // malformed middle; still fallback handles CSV bits
-    expect(parseSelection('1, 3-5, foo, 9', 10)).toEqual([1,3,4,5,9]);
+    expect(parseSelection("1, 3-5, foo, 9", 10)).toEqual([1, 3, 4, 5, 9]);
   });
 
-  it('20) clamps ranges that exceed bounds', () => {
-    expect(parseSelection('0-5, 9-10', 10)).toEqual([1,2,3,4,5,9,10]);
+  it("20) clamps ranges that exceed bounds", () => {
+    expect(parseSelection("0-5, 9-10", 10)).toEqual([1, 2, 3, 4, 5, 9, 10]);
   });
 
-  it('21) supports parentheses to override precedence', () => {
+  it("21) supports parentheses to override precedence", () => {
     // Without parentheses: 1-10 & even, 15 => [2,4,6,8,10,15]
     // With parentheses around OR: 1-10 & (even, 15) => [2,4,6,8,10]
-    expect(parseSelection('1-10 & (even, 15)', 20)).toEqual([2,4,6,8,10]);
+    expect(parseSelection("1-10 & (even, 15)", 20)).toEqual([2, 4, 6, 8, 10]);
   });
 
-  it('22) NOT over a grouped intersection', () => {
+  it("22) NOT over a grouped intersection", () => {
     // !(10-20 & !2n) within 1..25
     // Inner: 10-20 & !2n => odd numbers from 11..19 plus 10,12,14,16,18,20 excluded
     // Complement in 1..25 removes those, keeping others
-    const result = parseSelection('!(10-20 & !2n)', 25);
-    expect(result).toEqual([1,2,3,4,5,6,7,8,9,10,12,14,16,18,20,21,22,23,24,25]);
+    const result = parseSelection("!(10-20 & !2n)", 25);
+    expect(result).toEqual([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 12, 14, 16, 18, 20, 21, 22, 23, 24, 25]);
   });
 
-  it('23) nested parentheses with progressions', () => {
-    expect(parseSelection('(2n | 3n+1) & 1-20', 50)).toEqual([
-      1,2,4,6,7,8,10,12,13,14,16,18,19,20
-    ]);
+  it("23) nested parentheses with progressions", () => {
+    expect(parseSelection("(2n | 3n+1) & 1-20", 50)).toEqual([1, 2, 4, 6, 7, 8, 10, 12, 13, 14, 16, 18, 19, 20]);
   });
 
-  it('24) parentheses with NOT directly on group', () => {
-    expect(parseSelection('!(1-5, odd)', 10)).toEqual([6,8,10]);
+  it("24) parentheses with NOT directly on group", () => {
+    expect(parseSelection("!(1-5, odd)", 10)).toEqual([6, 8, 10]);
   });
 
-  it('25) whitespace within parentheses is ignored', () => {
-    expect(parseSelection('(  1 - 3  ,  6  )', 10)).toEqual([1,2,3,6]);
+  it("25) whitespace within parentheses is ignored", () => {
+    expect(parseSelection("(  1 - 3  ,  6  )", 10)).toEqual([1, 2, 3, 6]);
   });
 
-  it('26) malformed missing closing parenthesis falls back to CSV', () => {
+  it("26) malformed missing closing parenthesis falls back to CSV", () => {
     // Expression parse should fail; fallback CSV should pick numbers only
-    expect(parseSelection('(1-3, 6', 10)).toEqual([6]);
+    expect(parseSelection("(1-3, 6", 10)).toEqual([6]);
   });
 
-  it('27) nested NOT and AND with parentheses', () => {
+  it("27) nested NOT and AND with parentheses", () => {
     // !(odd & 5-9) within 1..12 => remove odd numbers 5,7,9
-    expect(parseSelection('!(odd & 5-9)', 12)).toEqual([1,2,3,4,6,8,10,11,12]);
+    expect(parseSelection("!(odd & 5-9)", 12)).toEqual([1, 2, 3, 4, 6, 8, 10, 11, 12]);
   });
 
-  it('28) deep nesting and mixing operators', () => {
-    const expr = '(1-4 & 2n) , ( (5-10 & odd) & !(7) ), (3n+1 & 1-20)';
-    expect(parseSelection(expr, 20)).toEqual([1,2,4,5,7,9,10,13,16,19]);
+  it("28) deep nesting and mixing operators", () => {
+    const expr = "(1-4 & 2n) , ( (5-10 & odd) & !(7) ), (3n+1 & 1-20)";
+    expect(parseSelection(expr, 20)).toEqual([1, 2, 4, 5, 7, 9, 10, 13, 16, 19]);
   });
 
-  it('31) word NOT works like ! for terms', () => {
-    expect(parseSelection('not 1-3', 6)).toEqual([4,5,6]);
+  it("31) word NOT works like ! for terms", () => {
+    expect(parseSelection("not 1-3", 6)).toEqual([4, 5, 6]);
   });
 
-  it('32) word NOT works like ! for groups', () => {
-    expect(parseSelection('not (odd & 1-6)', 8)).toEqual([2,4,6,7,8]);
+  it("32) word NOT works like ! for groups", () => {
+    expect(parseSelection("not (odd & 1-6)", 8)).toEqual([2, 4, 6, 7, 8]);
   });
 
-  it('29) parentheses around a single term has no effect', () => {
-    expect(parseSelection('(even)', 8)).toEqual([2,4,6,8]);
+  it("29) parentheses around a single term has no effect", () => {
+    expect(parseSelection("(even)", 8)).toEqual([2, 4, 6, 8]);
   });
 
-  it('30) redundant nested parentheses', () => {
-    expect(parseSelection('(((1-3))), ((2n))', 6)).toEqual([1,2,3,4,6]);
+  it("30) redundant nested parentheses", () => {
+    expect(parseSelection("(((1-3))), ((2n))", 6)).toEqual([1, 2, 3, 4, 6]);
   });
 
   // Additional edge cases and comprehensive coverage
-  it('33) handles empty input gracefully', () => {
-    expect(parseSelection('', 10)).toEqual([]);
-    expect(parseSelection('   ', 10)).toEqual([]);
+  it("33) handles empty input gracefully", () => {
+    expect(parseSelection("", 10)).toEqual([]);
+    expect(parseSelection("   ", 10)).toEqual([]);
   });
 
-  it('34) handles zero or negative maxPages', () => {
-    expect(parseSelection('1-10', 0)).toEqual([]);
-    expect(parseSelection('1-10', -5)).toEqual([]);
+  it("34) handles zero or negative maxPages", () => {
+    expect(parseSelection("1-10", 0)).toEqual([]);
+    expect(parseSelection("1-10", -5)).toEqual([]);
   });
 
-  it('35) handles large progressions efficiently', () => {
-    expect(parseSelection('100n', 1000)).toEqual([100, 200, 300, 400, 500, 600, 700, 800, 900, 1000]);
+  it("35) handles large progressions efficiently", () => {
+    expect(parseSelection("100n", 1000)).toEqual([100, 200, 300, 400, 500, 600, 700, 800, 900, 1000]);
   });
 
-  it('36) handles progressions with large offsets', () => {
-    expect(parseSelection('5n+97', 100)).toEqual([97]);
-    expect(parseSelection('3n-2', 10)).toEqual([1, 4, 7, 10]);
+  it("36) handles progressions with large offsets", () => {
+    expect(parseSelection("5n+97", 100)).toEqual([97]);
+    expect(parseSelection("3n-2", 10)).toEqual([1, 4, 7, 10]);
   });
 
-  it('37) mixed case keywords work correctly', () => {
-    expect(parseSelection('EVEN & Odd', 6)).toEqual([]);
-    expect(parseSelection('Even OR odd', 6)).toEqual([1, 2, 3, 4, 5, 6]);
+  it("37) mixed case keywords work correctly", () => {
+    expect(parseSelection("EVEN & Odd", 6)).toEqual([]);
+    expect(parseSelection("Even OR odd", 6)).toEqual([1, 2, 3, 4, 5, 6]);
   });
 
-  it('38) complex nested expressions with all operators', () => {
-    const expr = '(1-20 & even) | (odd & !5-15) | (3n+1 & 1-10)';
+  it("38) complex nested expressions with all operators", () => {
+    const expr = "(1-20 & even) | (odd & !5-15) | (3n+1 & 1-10)";
     // (1-20 & even) = [2,4,6,8,10,12,14,16,18,20]
-    // (odd & !5-15) = odd numbers not in 5-15 = [1,3,17,19] 
+    // (odd & !5-15) = odd numbers not in 5-15 = [1,3,17,19]
     // (3n+1 & 1-10) = [1,4,7,10]
     // Union of all = [1,2,3,4,6,7,8,10,12,14,16,17,18,19,20]
     expect(parseSelection(expr, 20)).toEqual([1, 2, 3, 4, 6, 7, 8, 10, 12, 14, 16, 17, 18, 19, 20]);
   });
 
-  it('39) multiple NOT operators in sequence', () => {
-    expect(parseSelection('not not 1-5', 10)).toEqual([1, 2, 3, 4, 5]);
-    expect(parseSelection('!!!1-3', 10)).toEqual([4, 5, 6, 7, 8, 9, 10]);
+  it("39) multiple NOT operators in sequence", () => {
+    expect(parseSelection("not not 1-5", 10)).toEqual([1, 2, 3, 4, 5]);
+    expect(parseSelection("!!!1-3", 10)).toEqual([4, 5, 6, 7, 8, 9, 10]);
   });
 
-  it('40) edge case: single page selection', () => {
-    expect(parseSelection('1', 1)).toEqual([1]);
-    expect(parseSelection('5', 3)).toEqual([]);
+  it("40) edge case: single page selection", () => {
+    expect(parseSelection("1", 1)).toEqual([1]);
+    expect(parseSelection("5", 3)).toEqual([]);
   });
 
-  it('41) backwards ranges are handled correctly', () => {
-    expect(parseSelection('10-5', 15)).toEqual([5, 6, 7, 8, 9, 10]);
+  it("41) backwards ranges are handled correctly", () => {
+    expect(parseSelection("10-5", 15)).toEqual([5, 6, 7, 8, 9, 10]);
   });
 
-  it('42) progressions that start beyond maxPages', () => {
-    expect(parseSelection('10n+50', 40)).toEqual([]);
-    expect(parseSelection('5n+35', 40)).toEqual([35, 40]);
+  it("42) progressions that start beyond maxPages", () => {
+    expect(parseSelection("10n+50", 40)).toEqual([]);
+    expect(parseSelection("5n+35", 40)).toEqual([35, 40]);
   });
 
-  it('43) complex operator precedence with mixed syntax', () => {
+  it("43) complex operator precedence with mixed syntax", () => {
     // AND has higher precedence than OR
-    expect(parseSelection('1-3, 5-7 & even', 10)).toEqual([1, 2, 3, 6]);
-    expect(parseSelection('1-3 | 5-7 and even', 10)).toEqual([1, 2, 3, 6]);
+    expect(parseSelection("1-3, 5-7 & even", 10)).toEqual([1, 2, 3, 6]);
+    expect(parseSelection("1-3 | 5-7 and even", 10)).toEqual([1, 2, 3, 6]);
   });
 
-  it('44) whitespace tolerance in complex expressions', () => {
-    const expr1 = '1-5&even|odd&!3';
-    const expr2 = '  1 - 5  &  even  |  odd  &  ! 3  ';
+  it("44) whitespace tolerance in complex expressions", () => {
+    const expr1 = "1-5&even|odd&!3";
+    const expr2 = "  1 - 5  &  even  |  odd  &  ! 3  ";
     expect(parseSelection(expr1, 10)).toEqual(parseSelection(expr2, 10));
   });
 
-  it('45) fallback behavior with partial valid expressions', () => {
+  it("45) fallback behavior with partial valid expressions", () => {
     // Should fallback and extract valid CSV parts
-    expect(parseSelection('1, 2-4, invalid, 7', 10)).toEqual([1, 2, 3, 4, 7]);
-    expect(parseSelection('1-3, @#$, 8-9', 10)).toEqual([1, 2, 3, 8, 9]);
+    expect(parseSelection("1, 2-4, invalid, 7", 10)).toEqual([1, 2, 3, 4, 7]);
+    expect(parseSelection("1-3, @#$, 8-9", 10)).toEqual([1, 2, 3, 8, 9]);
   });
 
-  it('46) progressions with k=1 (equivalent to n)', () => {
-    expect(parseSelection('1n', 5)).toEqual([1, 2, 3, 4, 5]);
-    expect(parseSelection('1n+2', 5)).toEqual([2, 3, 4, 5]);
+  it("46) progressions with k=1 (equivalent to n)", () => {
+    expect(parseSelection("1n", 5)).toEqual([1, 2, 3, 4, 5]);
+    expect(parseSelection("1n+2", 5)).toEqual([2, 3, 4, 5]);
   });
 
-  it('47) very large ranges are clamped correctly', () => {
-    expect(parseSelection('1-999999', 10)).toEqual([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
+  it("47) very large ranges are clamped correctly", () => {
+    expect(parseSelection("1-999999", 10)).toEqual([1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
     // Note: -100-5 would fallback to CSV and reject -100, but 0-5 should work
-    expect(parseSelection('0-5', 10)).toEqual([1, 2, 3, 4, 5]);
+    expect(parseSelection("0-5", 10)).toEqual([1, 2, 3, 4, 5]);
   });
 
-  it('48) multiple comma-separated ranges', () => {
-    expect(parseSelection('1-2, 4-5, 7-8, 10', 10)).toEqual([1, 2, 4, 5, 7, 8, 10]);
+  it("48) multiple comma-separated ranges", () => {
+    expect(parseSelection("1-2, 4-5, 7-8, 10", 10)).toEqual([1, 2, 4, 5, 7, 8, 10]);
   });
 
-  it('49) combination of all features in one expression', () => {
-    const expr = '(1-10 & even) | (odd & 15-25) & !(3n+1 & 1-30) | 50n';
+  it("49) combination of all features in one expression", () => {
+    const expr = "(1-10 & even) | (odd & 15-25) & !(3n+1 & 1-30) | 50n";
     const result = parseSelection(expr, 100);
     // This should combine: even numbers 2,4,6,8,10 with odd 15-25 excluding 3n+1 matches, plus 50n
     expect(result.length).toBeGreaterThan(0);
@@ -244,10 +242,8 @@ describe('parseSelection', () => {
     expect(result).toContain(100);
   });
 
-  it('50) stress test with deeply nested parentheses', () => {
-    const expr = '((((1-5)))) & ((((even)))) | ((((odd & 7-9))))';
+  it("50) stress test with deeply nested parentheses", () => {
+    const expr = "((((1-5)))) & ((((even)))) | ((((odd & 7-9))))";
     expect(parseSelection(expr, 10)).toEqual([2, 4, 7, 9]);
   });
 });
-
-
diff --git a/frontend/src/core/utils/bulkselection/parseSelection.ts b/frontend/src/core/utils/bulkselection/parseSelection.ts
index c833274830..b2d125cda4 100644
--- a/frontend/src/core/utils/bulkselection/parseSelection.ts
+++ b/frontend/src/core/utils/bulkselection/parseSelection.ts
@@ -33,7 +33,7 @@ export function parseSelection(input: string, maxPages: number): number[] {
   const clampedMax = Math.max(0, Math.floor(maxPages || 0));
   if (clampedMax === 0) return [];
 
-  const trimmed = (input || '').trim();
+  const trimmed = (input || "").trim();
   if (trimmed.length === 0) return [];
 
   try {
@@ -49,12 +49,12 @@ export function parseSelection(input: string, maxPages: number): number[] {
 export function parseSelectionWithDiagnostics(
   input: string,
   maxPages: number,
-  options?: { strict?: boolean }
+  options?: { strict?: boolean },
 ): { pages: number[]; warning?: string } {
   const clampedMax = Math.max(0, Math.floor(maxPages || 0));
   if (clampedMax === 0) return { pages: [] };
 
-  const trimmed = (input || '').trim();
+  const trimmed = (input || "").trim();
   if (trimmed.length === 0) return { pages: [] };
 
   try {
@@ -66,9 +66,12 @@ export function parseSelectionWithDiagnostics(
       throw err;
     }
     const pages = toSortedArray(parseCsvFallback(trimmed, clampedMax));
-    const tokens = trimmed.split(',').map(t => t.trim()).filter(Boolean);
-    const bad = tokens.find(tok => !/^(\d+\s*-\s*\d+|\d+)$/.test(tok));
-    const warning = `Malformed expression${bad ? ` at: '${bad}'` : ''}. Falling back to CSV interpretation.`;
+    const tokens = trimmed
+      .split(",")
+      .map((t) => t.trim())
+      .filter(Boolean);
+    const bad = tokens.find((tok) => !/^(\d+\s*-\s*\d+|\d+)$/.test(tok));
+    const warning = `Malformed expression${bad ? ` at: '${bad}'` : ""}. Falling back to CSV interpretation.`;
     return { pages, warning };
   }
 }
@@ -79,7 +82,10 @@ function toSortedArray(set: Set<number>): number[] {
 
 function parseCsvFallback(input: string, max: number): Set<number> {
   const result = new Set<number>();
-  const parts = input.split(',').map(p => p.trim()).filter(Boolean);
+  const parts = input
+    .split(",")
+    .map((p) => p.trim())
+    .filter(Boolean);
   for (const part of parts) {
     const rangeMatch = part.match(/^(\d+)\s*-\s*(\d+)$/);
     if (rangeMatch) {
@@ -121,7 +127,7 @@ class ExpressionParser {
     this.skipWs();
     // If there are leftover non-space characters, treat as error
     if (this.idx < this.src.length) {
-      throw new Error('Unexpected trailing input');
+      throw new Error("Unexpected trailing input");
     }
     return set;
   }
@@ -132,13 +138,13 @@ class ExpressionParser {
       this.skipWs();
       const op = this.peekWordOrSymbol();
       if (!op) break;
-      if (op.type === 'symbol' && (op.value === ',' || op.value === '|')) {
+      if (op.type === "symbol" && (op.value === "," || op.value === "|")) {
         this.consume(op.length);
         const right = this.parseConjunction();
         left = union(left, right);
         continue;
       }
-      if (op.type === 'word' && op.value === 'or') {
+      if (op.type === "word" && op.value === "or") {
         this.consume(op.length);
         const right = this.parseConjunction();
         left = union(left, right);
@@ -155,13 +161,13 @@ class ExpressionParser {
       this.skipWs();
       const op = this.peekWordOrSymbol();
       if (!op) break;
-      if (op.type === 'symbol' && op.value === '&') {
+      if (op.type === "symbol" && op.value === "&") {
         this.consume(op.length);
         const right = this.parseUnary();
         left = intersect(left, right);
         continue;
       }
-      if (op.type === 'word' && op.value === 'and') {
+      if (op.type === "word" && op.value === "and") {
         this.consume(op.length);
         const right = this.parseUnary();
         left = intersect(left, right);
@@ -174,7 +180,7 @@ class ExpressionParser {
 
   private parseUnary(): Set<number> {
     this.skipWs();
-    if (this.peek('!')) {
+    if (this.peek("!")) {
       this.consume(1);
       const inner = this.parseUnary();
       return complement(inner, this.max);
@@ -191,11 +197,11 @@ class ExpressionParser {
     this.skipWs();
 
     // Parenthesized expression: '(' expression ')'
-    if (this.peek('(')) {
+    if (this.peek("(")) {
       this.consume(1);
       const inner = this.parseDisjunction();
       this.skipWs();
-      if (!this.peek(')')) throw new Error('Expected )');
+      if (!this.peek(")")) throw new Error("Expected )");
       this.consume(1);
       return inner;
     }
@@ -203,8 +209,8 @@ class ExpressionParser {
     // Keywords: even / odd
     const keyword = this.tryReadKeyword();
     if (keyword) {
-      if (keyword === 'even') return this.buildEven();
-      if (keyword === 'odd') return this.buildOdd();
+      if (keyword === "even") return this.buildEven();
+      if (keyword === "odd") return this.buildOdd();
     }
 
     // Progression: k n ( +/- c )?
@@ -217,7 +223,7 @@ class ExpressionParser {
     const num = this.tryReadNumber();
     if (num !== null) {
       this.skipWs();
-      if (this.peek('-')) {
+      if (this.peek("-")) {
         // Range
         this.consume(1);
         this.skipWs();
@@ -228,7 +234,7 @@ class ExpressionParser {
     }
 
     // If nothing matched, error
-    throw new Error('Expected primary');
+    throw new Error("Expected primary");
   }
 
   private buildSingleton(n: number): Set<number> {
@@ -239,7 +245,8 @@ class ExpressionParser {
 
   private buildRange(a: number, b: number): Set<number> {
     const set = new Set<number>();
-    let start = a, end = b;
+    let start = a,
+      end = b;
     if (!Number.isFinite(start) || !Number.isFinite(end)) return set;
     if (start > end) [start, end] = [end, start];
     start = Math.max(1, start);
@@ -268,13 +275,13 @@ class ExpressionParser {
     return this.buildProgression(2, -1);
   }
 
-  private tryReadKeyword(): 'even' | 'odd' | null {
+  private tryReadKeyword(): "even" | "odd" | null {
     const start = this.idx;
     const word = this.readWord();
     if (!word) return null;
     const lower = word.toLowerCase();
-    if (lower === 'even' || lower === 'odd') {
-      return lower as 'even' | 'odd';
+    if (lower === "even" || lower === "odd") {
+      return lower as "even" | "odd";
     }
     // Not a keyword; rewind
     this.idx = start;
@@ -291,9 +298,9 @@ class ExpressionParser {
     }
     this.skipWs();
     // Optional '*'
-    if (this.peek('*')) this.consume(1);
+    if (this.peek("*")) this.consume(1);
     this.skipWs();
-    if (!this.peek('n') && !this.peek('N')) {
+    if (!this.peek("n") && !this.peek("N")) {
       this.idx = start;
       return null;
     }
@@ -301,7 +308,7 @@ class ExpressionParser {
     this.skipWs();
     // Optional (+|-) c
     let c = 0;
-    if (this.peek('+') || this.peek('-')) {
+    if (this.peek("+") || this.peek("-")) {
       const sign = this.src[this.idx];
       this.consume(1);
       this.skipWs();
@@ -310,7 +317,7 @@ class ExpressionParser {
         this.idx = start;
         return null;
       }
-      c = sign === '-' ? -cVal : cVal;
+      c = sign === "-" ? -cVal : cVal;
     }
     return { k, c };
   }
@@ -326,7 +333,7 @@ class ExpressionParser {
 
   private readRequiredNumber(): number {
     const n = this.tryReadNumber();
-    if (n === null) throw new Error('Expected number');
+    if (n === null) throw new Error("Expected number");
     return n;
   }
 
@@ -345,14 +352,14 @@ class ExpressionParser {
       this.idx = start;
       return false;
     }
-    if (word.toLowerCase() === 'not') {
+    if (word.toLowerCase() === "not") {
       return true;
     }
     this.idx = start;
     return false;
   }
 
-  private peekWordOrSymbol(): { type: 'word' | 'symbol'; value: string; raw: string; length: number } | null {
+  private peekWordOrSymbol(): { type: "word" | "symbol"; value: string; raw: string; length: number } | null {
     this.skipWs();
     if (this.idx >= this.src.length) return null;
     const ch = this.src[this.idx];
@@ -364,13 +371,13 @@ class ExpressionParser {
       // Always rewind; the caller will consume if it uses this token
       const len = word.length;
       this.idx = start;
-      if (lower === 'and' || lower === 'or') {
-        return { type: 'word', value: lower, raw: word, length: len };
+      if (lower === "and" || lower === "or") {
+        return { type: "word", value: lower, raw: word, length: len };
       }
       return null;
     }
-    if (ch === '&' || ch === '|' || ch === ',') {
-      return { type: 'symbol', value: ch, raw: ch, length: 1 };
+    if (ch === "&" || ch === "|" || ch === ",") {
+      return { type: "symbol", value: ch, raw: ch, length: 1 };
     }
     return null;
   }
@@ -409,5 +416,3 @@ function complement(a: Set<number>, max: number): Set<number> {
   for (let i = 1; i <= max; i++) if (!a.has(i)) out.add(i);
   return out;
 }
-
-
diff --git a/frontend/src/core/utils/bulkselection/selectionBuilders.ts b/frontend/src/core/utils/bulkselection/selectionBuilders.ts
index 7d8146089d..6fcd25c382 100644
--- a/frontend/src/core/utils/bulkselection/selectionBuilders.ts
+++ b/frontend/src/core/utils/bulkselection/selectionBuilders.ts
@@ -1,18 +1,18 @@
 // Pure helper utilities for building and manipulating bulk page selection expressions
 
-export type LogicalOperator = 'and' | 'or' | 'not' | 'even' | 'odd';
+export type LogicalOperator = "and" | "or" | "not" | "even" | "odd";
 
 // Returns a new CSV expression with expr appended.
 // If current ends with an operator token, expr is appended directly.
 // Otherwise, it is joined with " or ".
 export function appendExpression(currentInput: string, expr: string): string {
-  const current = (currentInput || '').trim();
+  const current = (currentInput || "").trim();
   if (!current) return expr;
   const endsWithOperator = /(\b(and|not|or)\s*|[&|,!]\s*)$/i.test(current);
   // Add space if operator doesn't already have one
   if (endsWithOperator) {
-    const needsSpace = !current.endsWith(' ');
-    return `${current}${needsSpace ? ' ' : ''}${expr}`;
+    const needsSpace = !current.endsWith(" ");
+    return `${current}${needsSpace ? " " : ""}${expr}`;
   }
   return `${current} or ${expr}`;
 }
@@ -20,16 +20,16 @@ export function appendExpression(currentInput: string, expr: string): string {
 // Smartly inserts/normalizes a logical operator at the end of the current input.
 // Produces a trailing space to allow the next token to be typed naturally.
 export function insertOperatorSmart(currentInput: string, op: LogicalOperator): string {
-  const text = (currentInput || '').trim();
+  const text = (currentInput || "").trim();
   // Handle 'even' and 'odd' as page selection expressions, not logical operators
-  if (op === 'even' || op === 'odd') {
+  if (op === "even" || op === "odd") {
     if (text.length === 0) return `${op} `;
     // If current input ends with a logical operator, append the page selection with proper spacing
     const endsWithOperator = /(\b(and|not|or)\s*|[&|,!]\s*)$/i.test(text);
     if (endsWithOperator) {
       // Add space if the operator doesn't already have one
-      const needsSpace = !text.endsWith(' ');
-      return `${text}${needsSpace ? ' ' : ''}${op} `;
+      const needsSpace = !text.endsWith(" ");
+      return `${text}${needsSpace ? " " : ""}${op} `;
     }
     return `${text} or ${op} `;
   }
@@ -43,7 +43,7 @@ export function insertOperatorSmart(currentInput: string, op: LogicalOperator):
     const m = rest.match(/(?:\s*)(?:(&|\||,|!|\band\b|\bor\b|\bnot\b))\s*$/i);
     if (!m || m.index === undefined) break;
     const raw = m[1].toLowerCase();
-    const word = raw === '&' ? 'and' : raw === '|' || raw === ',' ? 'or' : raw === '!' ? 'not' : raw;
+    const word = raw === "&" ? "and" : raw === "|" || raw === "," ? "or" : raw === "!" ? "not" : raw;
     tokens.unshift(word);
     rest = rest.slice(0, m.index).trimEnd();
   }
@@ -56,40 +56,40 @@ export function insertOperatorSmart(currentInput: string, op: LogicalOperator):
   }
 
   // Normalize to allowed set
-  const phrase = tokens.join(' ');
-  const allowed = new Set(['and', 'or', 'not', 'and not', 'or not']);
+  const phrase = tokens.join(" ");
+  const allowed = new Set(["and", "or", "not", "and not", "or not"]);
 
   // Helpers for transitions from a single trailing token
   const fromSingle = (t: string): string => {
-    if (t === 'and') {
-      if (click === 'and') return 'and';
-      if (click === 'or') return 'or'; // 'and or' is invalid, so just use 'or'
-      return 'and not';
+    if (t === "and") {
+      if (click === "and") return "and";
+      if (click === "or") return "or"; // 'and or' is invalid, so just use 'or'
+      return "and not";
     }
-    if (t === 'or') {
-      if (click === 'and') return 'and';
-      if (click === 'or') return 'or';
-      return 'or not';
+    if (t === "or") {
+      if (click === "and") return "and";
+      if (click === "or") return "or";
+      return "or not";
     }
     // t === 'not'
-    if (click === 'and') return 'and';
-    if (click === 'or') return 'or';
-    return 'not';
+    if (click === "and") return "and";
+    if (click === "or") return "or";
+    return "not";
   };
 
   // From combined phrase
   const fromCombo = (p: string): string => {
-    if (p === 'and not') {
-      if (click === 'not') return 'and not';
-      if (click === 'and') return 'and';
-      if (click === 'or') return 'or'; // 'and not or' is invalid, so just use 'or'
-      return 'and not';
+    if (p === "and not") {
+      if (click === "not") return "and not";
+      if (click === "and") return "and";
+      if (click === "or") return "or"; // 'and not or' is invalid, so just use 'or'
+      return "and not";
     }
-    if (p === 'or not') {
-      if (click === 'not') return 'or not';
-      if (click === 'or') return 'or';
-      if (click === 'and') return 'and'; // 'or not and' is invalid, so just use 'and'
-      return 'or not';
+    if (p === "or not") {
+      if (click === "not") return "or not";
+      if (click === "or") return "or";
+      if (click === "and") return "and"; // 'or not and' is invalid, so just use 'and'
+      return "or not";
     }
     // Invalid combos (e.g., 'not and', 'not or', 'or and', 'and or') → collapse to clicked op
     return click;
@@ -132,5 +132,3 @@ export function rangeExpression(start: number, end: number, maxPages: number): s
   e = maxPages > 0 ? Math.min(maxPages, e) : e;
   return `${s}-${e}`;
 }
-
-
diff --git a/frontend/src/core/utils/clickHandlers.ts b/frontend/src/core/utils/clickHandlers.ts
index 0c70cfca82..19ddf64a6f 100644
--- a/frontend/src/core/utils/clickHandlers.ts
+++ b/frontend/src/core/utils/clickHandlers.ts
@@ -6,7 +6,7 @@
  * Determines if a click event is a "special" click that should use browser's default navigation
  * instead of SPA navigation. Special clicks include:
  * - Ctrl+click (or Cmd+click on Mac)
- * - Shift+click 
+ * - Shift+click
  * - Middle mouse button click
  */
 export function isSpecialClick(e: React.MouseEvent): boolean {
@@ -15,7 +15,7 @@ export function isSpecialClick(e: React.MouseEvent): boolean {
 
 /**
  * Handles a click event for SPA navigation, but allows special clicks to use browser defaults
- * 
+ *
  * @param e - The click event
  * @param handleClick - Function to execute for regular clicks (SPA navigation)
  * @returns true if the event was handled as a special click, false if it was handled as regular click
@@ -24,8 +24,8 @@ export function handleUnlessSpecialClick(e: React.MouseEvent, handleClick: () =>
   if (isSpecialClick(e)) {
     return true; // Let browser handle via href
   }
-  
+
   e.preventDefault();
   handleClick();
   return false;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/core/utils/convertUtils.test.ts b/frontend/src/core/utils/convertUtils.test.ts
index 13ee2a9f9c..65bc8fef9e 100644
--- a/frontend/src/core/utils/convertUtils.test.ts
+++ b/frontend/src/core/utils/convertUtils.test.ts
@@ -2,336 +2,325 @@
  * Unit tests for convertUtils
  */
 
-import { describe, test, expect } from 'vitest';
-import { 
-  getEndpointName, 
-  getEndpointUrl, 
-  isConversionSupported, 
-  isImageFormat 
-} from '@app/utils/convertUtils';
+import { describe, test, expect } from "vitest";
+import { getEndpointName, getEndpointUrl, isConversionSupported, isImageFormat } from "@app/utils/convertUtils";
 
-describe('convertUtils', () => {
-  
-  describe('getEndpointName', () => {
-    
-    test('should return correct endpoint names for all supported conversions', () => {
+describe("convertUtils", () => {
+  describe("getEndpointName", () => {
+    test("should return correct endpoint names for all supported conversions", () => {
       // PDF to Image formats
-      expect(getEndpointName('pdf', 'png')).toBe('pdf-to-img');
-      expect(getEndpointName('pdf', 'jpg')).toBe('pdf-to-img');
-      expect(getEndpointName('pdf', 'gif')).toBe('pdf-to-img');
-      expect(getEndpointName('pdf', 'tiff')).toBe('pdf-to-img');
-      expect(getEndpointName('pdf', 'bmp')).toBe('pdf-to-img');
-      expect(getEndpointName('pdf', 'webp')).toBe('pdf-to-img');
-      
+      expect(getEndpointName("pdf", "png")).toBe("pdf-to-img");
+      expect(getEndpointName("pdf", "jpg")).toBe("pdf-to-img");
+      expect(getEndpointName("pdf", "gif")).toBe("pdf-to-img");
+      expect(getEndpointName("pdf", "tiff")).toBe("pdf-to-img");
+      expect(getEndpointName("pdf", "bmp")).toBe("pdf-to-img");
+      expect(getEndpointName("pdf", "webp")).toBe("pdf-to-img");
+
       // PDF to Office formats
-      expect(getEndpointName('pdf', 'docx')).toBe('pdf-to-word');
-      expect(getEndpointName('pdf', 'odt')).toBe('pdf-to-word');
-      expect(getEndpointName('pdf', 'pptx')).toBe('pdf-to-presentation');
-      expect(getEndpointName('pdf', 'odp')).toBe('pdf-to-presentation');
-      
+      expect(getEndpointName("pdf", "docx")).toBe("pdf-to-word");
+      expect(getEndpointName("pdf", "odt")).toBe("pdf-to-word");
+      expect(getEndpointName("pdf", "pptx")).toBe("pdf-to-presentation");
+      expect(getEndpointName("pdf", "odp")).toBe("pdf-to-presentation");
+
       // PDF to Data formats
-      expect(getEndpointName('pdf', 'csv')).toBe('pdf-to-csv');
-      expect(getEndpointName('pdf', 'txt')).toBe('pdf-to-text');
-      expect(getEndpointName('pdf', 'rtf')).toBe('pdf-to-text');
-      expect(getEndpointName('pdf', 'md')).toBe('pdf-to-markdown');
-      
+      expect(getEndpointName("pdf", "csv")).toBe("pdf-to-csv");
+      expect(getEndpointName("pdf", "txt")).toBe("pdf-to-text");
+      expect(getEndpointName("pdf", "rtf")).toBe("pdf-to-text");
+      expect(getEndpointName("pdf", "md")).toBe("pdf-to-markdown");
+
       // PDF to Web formats
-      expect(getEndpointName('pdf', 'html')).toBe('pdf-to-html');
-      expect(getEndpointName('pdf', 'xml')).toBe('pdf-to-xml');
-      
+      expect(getEndpointName("pdf", "html")).toBe("pdf-to-html");
+      expect(getEndpointName("pdf", "xml")).toBe("pdf-to-xml");
+
       // PDF to PDF/A
-      expect(getEndpointName('pdf', 'pdfa')).toBe('pdf-to-pdfa');
-      
+      expect(getEndpointName("pdf", "pdfa")).toBe("pdf-to-pdfa");
+
       // Office Documents to PDF
-      expect(getEndpointName('docx', 'pdf')).toBe('file-to-pdf');
-      expect(getEndpointName('doc', 'pdf')).toBe('file-to-pdf');
-      expect(getEndpointName('odt', 'pdf')).toBe('file-to-pdf');
-      
+      expect(getEndpointName("docx", "pdf")).toBe("file-to-pdf");
+      expect(getEndpointName("doc", "pdf")).toBe("file-to-pdf");
+      expect(getEndpointName("odt", "pdf")).toBe("file-to-pdf");
+
       // Spreadsheets to PDF
-      expect(getEndpointName('xlsx', 'pdf')).toBe('file-to-pdf');
-      expect(getEndpointName('xls', 'pdf')).toBe('file-to-pdf');
-      expect(getEndpointName('ods', 'pdf')).toBe('file-to-pdf');
-      
+      expect(getEndpointName("xlsx", "pdf")).toBe("file-to-pdf");
+      expect(getEndpointName("xls", "pdf")).toBe("file-to-pdf");
+      expect(getEndpointName("ods", "pdf")).toBe("file-to-pdf");
+
       // Presentations to PDF
-      expect(getEndpointName('pptx', 'pdf')).toBe('file-to-pdf');
-      expect(getEndpointName('ppt', 'pdf')).toBe('file-to-pdf');
-      expect(getEndpointName('odp', 'pdf')).toBe('file-to-pdf');
-      
+      expect(getEndpointName("pptx", "pdf")).toBe("file-to-pdf");
+      expect(getEndpointName("ppt", "pdf")).toBe("file-to-pdf");
+      expect(getEndpointName("odp", "pdf")).toBe("file-to-pdf");
+
       // Images to PDF
-      expect(getEndpointName('jpg', 'pdf')).toBe('img-to-pdf');
-      expect(getEndpointName('jpeg', 'pdf')).toBe('img-to-pdf');
-      expect(getEndpointName('png', 'pdf')).toBe('img-to-pdf');
-      expect(getEndpointName('gif', 'pdf')).toBe('img-to-pdf');
-      expect(getEndpointName('bmp', 'pdf')).toBe('img-to-pdf');
-      expect(getEndpointName('tiff', 'pdf')).toBe('img-to-pdf');
-      expect(getEndpointName('webp', 'pdf')).toBe('img-to-pdf');
-      
+      expect(getEndpointName("jpg", "pdf")).toBe("img-to-pdf");
+      expect(getEndpointName("jpeg", "pdf")).toBe("img-to-pdf");
+      expect(getEndpointName("png", "pdf")).toBe("img-to-pdf");
+      expect(getEndpointName("gif", "pdf")).toBe("img-to-pdf");
+      expect(getEndpointName("bmp", "pdf")).toBe("img-to-pdf");
+      expect(getEndpointName("tiff", "pdf")).toBe("img-to-pdf");
+      expect(getEndpointName("webp", "pdf")).toBe("img-to-pdf");
+
       // Web formats to PDF
-      expect(getEndpointName('html', 'pdf')).toBe('html-to-pdf');
-      
+      expect(getEndpointName("html", "pdf")).toBe("html-to-pdf");
+
       // Markdown to PDF
-      expect(getEndpointName('md', 'pdf')).toBe('markdown-to-pdf');
-      
+      expect(getEndpointName("md", "pdf")).toBe("markdown-to-pdf");
+
       // Text formats to PDF
-      expect(getEndpointName('txt', 'pdf')).toBe('file-to-pdf');
-      expect(getEndpointName('rtf', 'pdf')).toBe('file-to-pdf');
-      
+      expect(getEndpointName("txt", "pdf")).toBe("file-to-pdf");
+      expect(getEndpointName("rtf", "pdf")).toBe("file-to-pdf");
+
       // Email to PDF (EML and MSG)
-      expect(getEndpointName('eml', 'pdf')).toBe('eml-to-pdf');
-      expect(getEndpointName('msg', 'pdf')).toBe('eml-to-pdf');
+      expect(getEndpointName("eml", "pdf")).toBe("eml-to-pdf");
+      expect(getEndpointName("msg", "pdf")).toBe("eml-to-pdf");
     });
 
-    test('should return empty string for unsupported conversions', () => {
-      expect(getEndpointName('pdf', 'exe')).toBe('');
-      expect(getEndpointName('wav', 'pdf')).toBe('file-to-pdf'); // Try using file to pdf as fallback
-      expect(getEndpointName('png', 'docx')).toBe(''); // Images can't convert to Word docs
+    test("should return empty string for unsupported conversions", () => {
+      expect(getEndpointName("pdf", "exe")).toBe("");
+      expect(getEndpointName("wav", "pdf")).toBe("file-to-pdf"); // Try using file to pdf as fallback
+      expect(getEndpointName("png", "docx")).toBe(""); // Images can't convert to Word docs
     });
 
-    test('should handle empty or invalid inputs', () => {
-      expect(getEndpointName('', '')).toBe('');
-      expect(getEndpointName('pdf', '')).toBe('');
-      expect(getEndpointName('', 'pdf')).toBe('');
-      expect(getEndpointName('nonexistent', 'alsononexistent')).toBe('');
+    test("should handle empty or invalid inputs", () => {
+      expect(getEndpointName("", "")).toBe("");
+      expect(getEndpointName("pdf", "")).toBe("");
+      expect(getEndpointName("", "pdf")).toBe("");
+      expect(getEndpointName("nonexistent", "alsononexistent")).toBe("");
     });
   });
 
-  describe('getEndpointUrl', () => {
-    
-    test('should return correct endpoint URLs for all supported conversions', () => {
+  describe("getEndpointUrl", () => {
+    test("should return correct endpoint URLs for all supported conversions", () => {
       // PDF to Image formats
-      expect(getEndpointUrl('pdf', 'png')).toBe('/api/v1/convert/pdf/img');
-      expect(getEndpointUrl('pdf', 'jpg')).toBe('/api/v1/convert/pdf/img');
-      expect(getEndpointUrl('pdf', 'gif')).toBe('/api/v1/convert/pdf/img');
-      expect(getEndpointUrl('pdf', 'tiff')).toBe('/api/v1/convert/pdf/img');
-      expect(getEndpointUrl('pdf', 'bmp')).toBe('/api/v1/convert/pdf/img');
-      expect(getEndpointUrl('pdf', 'webp')).toBe('/api/v1/convert/pdf/img');
-      
+      expect(getEndpointUrl("pdf", "png")).toBe("/api/v1/convert/pdf/img");
+      expect(getEndpointUrl("pdf", "jpg")).toBe("/api/v1/convert/pdf/img");
+      expect(getEndpointUrl("pdf", "gif")).toBe("/api/v1/convert/pdf/img");
+      expect(getEndpointUrl("pdf", "tiff")).toBe("/api/v1/convert/pdf/img");
+      expect(getEndpointUrl("pdf", "bmp")).toBe("/api/v1/convert/pdf/img");
+      expect(getEndpointUrl("pdf", "webp")).toBe("/api/v1/convert/pdf/img");
+
       // PDF to Office formats
-      expect(getEndpointUrl('pdf', 'docx')).toBe('/api/v1/convert/pdf/word');
-      expect(getEndpointUrl('pdf', 'odt')).toBe('/api/v1/convert/pdf/word');
-      expect(getEndpointUrl('pdf', 'pptx')).toBe('/api/v1/convert/pdf/presentation');
-      expect(getEndpointUrl('pdf', 'odp')).toBe('/api/v1/convert/pdf/presentation');
-      
+      expect(getEndpointUrl("pdf", "docx")).toBe("/api/v1/convert/pdf/word");
+      expect(getEndpointUrl("pdf", "odt")).toBe("/api/v1/convert/pdf/word");
+      expect(getEndpointUrl("pdf", "pptx")).toBe("/api/v1/convert/pdf/presentation");
+      expect(getEndpointUrl("pdf", "odp")).toBe("/api/v1/convert/pdf/presentation");
+
       // PDF to Data formats
-      expect(getEndpointUrl('pdf', 'csv')).toBe('/api/v1/convert/pdf/csv');
-      expect(getEndpointUrl('pdf', 'txt')).toBe('/api/v1/convert/pdf/text');
-      expect(getEndpointUrl('pdf', 'rtf')).toBe('/api/v1/convert/pdf/text');
-      expect(getEndpointUrl('pdf', 'md')).toBe('/api/v1/convert/pdf/markdown');
-      
+      expect(getEndpointUrl("pdf", "csv")).toBe("/api/v1/convert/pdf/csv");
+      expect(getEndpointUrl("pdf", "txt")).toBe("/api/v1/convert/pdf/text");
+      expect(getEndpointUrl("pdf", "rtf")).toBe("/api/v1/convert/pdf/text");
+      expect(getEndpointUrl("pdf", "md")).toBe("/api/v1/convert/pdf/markdown");
+
       // PDF to Web formats
-      expect(getEndpointUrl('pdf', 'html')).toBe('/api/v1/convert/pdf/html');
-      expect(getEndpointUrl('pdf', 'xml')).toBe('/api/v1/convert/pdf/xml');
-      
+      expect(getEndpointUrl("pdf", "html")).toBe("/api/v1/convert/pdf/html");
+      expect(getEndpointUrl("pdf", "xml")).toBe("/api/v1/convert/pdf/xml");
+
       // PDF to PDF/A
-      expect(getEndpointUrl('pdf', 'pdfa')).toBe('/api/v1/convert/pdf/pdfa');
-      
+      expect(getEndpointUrl("pdf", "pdfa")).toBe("/api/v1/convert/pdf/pdfa");
+
       // Office Documents to PDF
-      expect(getEndpointUrl('docx', 'pdf')).toBe('/api/v1/convert/file/pdf');
-      expect(getEndpointUrl('doc', 'pdf')).toBe('/api/v1/convert/file/pdf');
-      expect(getEndpointUrl('odt', 'pdf')).toBe('/api/v1/convert/file/pdf');
-      
+      expect(getEndpointUrl("docx", "pdf")).toBe("/api/v1/convert/file/pdf");
+      expect(getEndpointUrl("doc", "pdf")).toBe("/api/v1/convert/file/pdf");
+      expect(getEndpointUrl("odt", "pdf")).toBe("/api/v1/convert/file/pdf");
+
       // Spreadsheets to PDF
-      expect(getEndpointUrl('xlsx', 'pdf')).toBe('/api/v1/convert/file/pdf');
-      expect(getEndpointUrl('xls', 'pdf')).toBe('/api/v1/convert/file/pdf');
-      expect(getEndpointUrl('ods', 'pdf')).toBe('/api/v1/convert/file/pdf');
-      
+      expect(getEndpointUrl("xlsx", "pdf")).toBe("/api/v1/convert/file/pdf");
+      expect(getEndpointUrl("xls", "pdf")).toBe("/api/v1/convert/file/pdf");
+      expect(getEndpointUrl("ods", "pdf")).toBe("/api/v1/convert/file/pdf");
+
       // Presentations to PDF
-      expect(getEndpointUrl('pptx', 'pdf')).toBe('/api/v1/convert/file/pdf');
-      expect(getEndpointUrl('ppt', 'pdf')).toBe('/api/v1/convert/file/pdf');
-      expect(getEndpointUrl('odp', 'pdf')).toBe('/api/v1/convert/file/pdf');
-      
+      expect(getEndpointUrl("pptx", "pdf")).toBe("/api/v1/convert/file/pdf");
+      expect(getEndpointUrl("ppt", "pdf")).toBe("/api/v1/convert/file/pdf");
+      expect(getEndpointUrl("odp", "pdf")).toBe("/api/v1/convert/file/pdf");
+
       // Images to PDF
-      expect(getEndpointUrl('jpg', 'pdf')).toBe('/api/v1/convert/img/pdf');
-      expect(getEndpointUrl('jpeg', 'pdf')).toBe('/api/v1/convert/img/pdf');
-      expect(getEndpointUrl('png', 'pdf')).toBe('/api/v1/convert/img/pdf');
-      expect(getEndpointUrl('gif', 'pdf')).toBe('/api/v1/convert/img/pdf');
-      expect(getEndpointUrl('bmp', 'pdf')).toBe('/api/v1/convert/img/pdf');
-      expect(getEndpointUrl('tiff', 'pdf')).toBe('/api/v1/convert/img/pdf');
-      expect(getEndpointUrl('webp', 'pdf')).toBe('/api/v1/convert/img/pdf');
-      
+      expect(getEndpointUrl("jpg", "pdf")).toBe("/api/v1/convert/img/pdf");
+      expect(getEndpointUrl("jpeg", "pdf")).toBe("/api/v1/convert/img/pdf");
+      expect(getEndpointUrl("png", "pdf")).toBe("/api/v1/convert/img/pdf");
+      expect(getEndpointUrl("gif", "pdf")).toBe("/api/v1/convert/img/pdf");
+      expect(getEndpointUrl("bmp", "pdf")).toBe("/api/v1/convert/img/pdf");
+      expect(getEndpointUrl("tiff", "pdf")).toBe("/api/v1/convert/img/pdf");
+      expect(getEndpointUrl("webp", "pdf")).toBe("/api/v1/convert/img/pdf");
+
       // Web formats to PDF
-      expect(getEndpointUrl('html', 'pdf')).toBe('/api/v1/convert/html/pdf');
-      
+      expect(getEndpointUrl("html", "pdf")).toBe("/api/v1/convert/html/pdf");
+
       // Markdown to PDF
-      expect(getEndpointUrl('md', 'pdf')).toBe('/api/v1/convert/markdown/pdf');
-      
+      expect(getEndpointUrl("md", "pdf")).toBe("/api/v1/convert/markdown/pdf");
+
       // Text formats to PDF
-      expect(getEndpointUrl('txt', 'pdf')).toBe('/api/v1/convert/file/pdf');
-      expect(getEndpointUrl('rtf', 'pdf')).toBe('/api/v1/convert/file/pdf');
-      
+      expect(getEndpointUrl("txt", "pdf")).toBe("/api/v1/convert/file/pdf");
+      expect(getEndpointUrl("rtf", "pdf")).toBe("/api/v1/convert/file/pdf");
+
       // Email to PDF (EML and MSG)
-      expect(getEndpointUrl('eml', 'pdf')).toBe('/api/v1/convert/eml/pdf');
-      expect(getEndpointUrl('msg', 'pdf')).toBe('/api/v1/convert/eml/pdf');
+      expect(getEndpointUrl("eml", "pdf")).toBe("/api/v1/convert/eml/pdf");
+      expect(getEndpointUrl("msg", "pdf")).toBe("/api/v1/convert/eml/pdf");
     });
 
-    test('should return empty string for unsupported conversions', () => {
-      expect(getEndpointUrl('pdf', 'exe')).toBe('');
-      expect(getEndpointUrl('wav', 'pdf')).toBe('/api/v1/convert/file/pdf'); // Try using file to pdf as fallback
-      expect(getEndpointUrl('invalid', 'invalid')).toBe('');
+    test("should return empty string for unsupported conversions", () => {
+      expect(getEndpointUrl("pdf", "exe")).toBe("");
+      expect(getEndpointUrl("wav", "pdf")).toBe("/api/v1/convert/file/pdf"); // Try using file to pdf as fallback
+      expect(getEndpointUrl("invalid", "invalid")).toBe("");
     });
 
-    test('should handle empty inputs', () => {
-      expect(getEndpointUrl('', '')).toBe('');
-      expect(getEndpointUrl('pdf', '')).toBe('');
-      expect(getEndpointUrl('', 'pdf')).toBe('');
+    test("should handle empty inputs", () => {
+      expect(getEndpointUrl("", "")).toBe("");
+      expect(getEndpointUrl("pdf", "")).toBe("");
+      expect(getEndpointUrl("", "pdf")).toBe("");
     });
   });
 
-  describe('isConversionSupported', () => {
-    
-    test('should return true for all supported conversions', () => {
+  describe("isConversionSupported", () => {
+    test("should return true for all supported conversions", () => {
       // PDF to Image formats
-      expect(isConversionSupported('pdf', 'png')).toBe(true);
-      expect(isConversionSupported('pdf', 'jpg')).toBe(true);
-      expect(isConversionSupported('pdf', 'gif')).toBe(true);
-      expect(isConversionSupported('pdf', 'tiff')).toBe(true);
-      expect(isConversionSupported('pdf', 'bmp')).toBe(true);
-      expect(isConversionSupported('pdf', 'webp')).toBe(true);
-      
+      expect(isConversionSupported("pdf", "png")).toBe(true);
+      expect(isConversionSupported("pdf", "jpg")).toBe(true);
+      expect(isConversionSupported("pdf", "gif")).toBe(true);
+      expect(isConversionSupported("pdf", "tiff")).toBe(true);
+      expect(isConversionSupported("pdf", "bmp")).toBe(true);
+      expect(isConversionSupported("pdf", "webp")).toBe(true);
+
       // PDF to Office formats
-      expect(isConversionSupported('pdf', 'docx')).toBe(true);
-      expect(isConversionSupported('pdf', 'odt')).toBe(true);
-      expect(isConversionSupported('pdf', 'pptx')).toBe(true);
-      expect(isConversionSupported('pdf', 'odp')).toBe(true);
-      
+      expect(isConversionSupported("pdf", "docx")).toBe(true);
+      expect(isConversionSupported("pdf", "odt")).toBe(true);
+      expect(isConversionSupported("pdf", "pptx")).toBe(true);
+      expect(isConversionSupported("pdf", "odp")).toBe(true);
+
       // PDF to Data formats
-      expect(isConversionSupported('pdf', 'csv')).toBe(true);
-      expect(isConversionSupported('pdf', 'txt')).toBe(true);
-      expect(isConversionSupported('pdf', 'rtf')).toBe(true);
-      expect(isConversionSupported('pdf', 'md')).toBe(true);
-      
+      expect(isConversionSupported("pdf", "csv")).toBe(true);
+      expect(isConversionSupported("pdf", "txt")).toBe(true);
+      expect(isConversionSupported("pdf", "rtf")).toBe(true);
+      expect(isConversionSupported("pdf", "md")).toBe(true);
+
       // PDF to Web formats
-      expect(isConversionSupported('pdf', 'html')).toBe(true);
-      expect(isConversionSupported('pdf', 'xml')).toBe(true);
-      
+      expect(isConversionSupported("pdf", "html")).toBe(true);
+      expect(isConversionSupported("pdf", "xml")).toBe(true);
+
       // PDF to PDF/A
-      expect(isConversionSupported('pdf', 'pdfa')).toBe(true);
-      
+      expect(isConversionSupported("pdf", "pdfa")).toBe(true);
+
       // Office Documents to PDF
-      expect(isConversionSupported('docx', 'pdf')).toBe(true);
-      expect(isConversionSupported('doc', 'pdf')).toBe(true);
-      expect(isConversionSupported('odt', 'pdf')).toBe(true);
-      
+      expect(isConversionSupported("docx", "pdf")).toBe(true);
+      expect(isConversionSupported("doc", "pdf")).toBe(true);
+      expect(isConversionSupported("odt", "pdf")).toBe(true);
+
       // Spreadsheets to PDF
-      expect(isConversionSupported('xlsx', 'pdf')).toBe(true);
-      expect(isConversionSupported('xls', 'pdf')).toBe(true);
-      expect(isConversionSupported('ods', 'pdf')).toBe(true);
-      
+      expect(isConversionSupported("xlsx", "pdf")).toBe(true);
+      expect(isConversionSupported("xls", "pdf")).toBe(true);
+      expect(isConversionSupported("ods", "pdf")).toBe(true);
+
       // Presentations to PDF
-      expect(isConversionSupported('pptx', 'pdf')).toBe(true);
-      expect(isConversionSupported('ppt', 'pdf')).toBe(true);
-      expect(isConversionSupported('odp', 'pdf')).toBe(true);
-      
+      expect(isConversionSupported("pptx", "pdf")).toBe(true);
+      expect(isConversionSupported("ppt", "pdf")).toBe(true);
+      expect(isConversionSupported("odp", "pdf")).toBe(true);
+
       // Images to PDF
-      expect(isConversionSupported('jpg', 'pdf')).toBe(true);
-      expect(isConversionSupported('jpeg', 'pdf')).toBe(true);
-      expect(isConversionSupported('png', 'pdf')).toBe(true);
-      expect(isConversionSupported('gif', 'pdf')).toBe(true);
-      expect(isConversionSupported('bmp', 'pdf')).toBe(true);
-      expect(isConversionSupported('tiff', 'pdf')).toBe(true);
-      expect(isConversionSupported('webp', 'pdf')).toBe(true);
-      
+      expect(isConversionSupported("jpg", "pdf")).toBe(true);
+      expect(isConversionSupported("jpeg", "pdf")).toBe(true);
+      expect(isConversionSupported("png", "pdf")).toBe(true);
+      expect(isConversionSupported("gif", "pdf")).toBe(true);
+      expect(isConversionSupported("bmp", "pdf")).toBe(true);
+      expect(isConversionSupported("tiff", "pdf")).toBe(true);
+      expect(isConversionSupported("webp", "pdf")).toBe(true);
+
       // Web formats to PDF
-      expect(isConversionSupported('html', 'pdf')).toBe(true);
-      expect(isConversionSupported('htm', 'pdf')).toBe(true);
-      
+      expect(isConversionSupported("html", "pdf")).toBe(true);
+      expect(isConversionSupported("htm", "pdf")).toBe(true);
+
       // Markdown to PDF
-      expect(isConversionSupported('md', 'pdf')).toBe(true);
-      
+      expect(isConversionSupported("md", "pdf")).toBe(true);
+
       // Text formats to PDF
-      expect(isConversionSupported('txt', 'pdf')).toBe(true);
-      expect(isConversionSupported('rtf', 'pdf')).toBe(true);
-      
+      expect(isConversionSupported("txt", "pdf")).toBe(true);
+      expect(isConversionSupported("rtf", "pdf")).toBe(true);
+
       // Email to PDF (EML and MSG)
-      expect(isConversionSupported('eml', 'pdf')).toBe(true);
-      expect(isConversionSupported('msg', 'pdf')).toBe(true);
+      expect(isConversionSupported("eml", "pdf")).toBe(true);
+      expect(isConversionSupported("msg", "pdf")).toBe(true);
     });
 
-    test('should return false for unsupported conversions', () => {
-      expect(isConversionSupported('pdf', 'exe')).toBe(false);
-      expect(isConversionSupported('wav', 'pdf')).toBe(true); // Fallback to file to pdf
-      expect(isConversionSupported('png', 'docx')).toBe(false);
-      expect(isConversionSupported('nonexistent', 'alsononexistent')).toBe(false);
+    test("should return false for unsupported conversions", () => {
+      expect(isConversionSupported("pdf", "exe")).toBe(false);
+      expect(isConversionSupported("wav", "pdf")).toBe(true); // Fallback to file to pdf
+      expect(isConversionSupported("png", "docx")).toBe(false);
+      expect(isConversionSupported("nonexistent", "alsononexistent")).toBe(false);
     });
 
-    test('should handle empty inputs', () => {
-      expect(isConversionSupported('', '')).toBe(false);
-      expect(isConversionSupported('pdf', '')).toBe(false);
-      expect(isConversionSupported('', 'pdf')).toBe(false);
+    test("should handle empty inputs", () => {
+      expect(isConversionSupported("", "")).toBe(false);
+      expect(isConversionSupported("pdf", "")).toBe(false);
+      expect(isConversionSupported("", "pdf")).toBe(false);
     });
   });
 
-  describe('isImageFormat', () => {
-    
-    test('should return true for image formats', () => {
-      expect(isImageFormat('png')).toBe(true);
-      expect(isImageFormat('jpg')).toBe(true);
-      expect(isImageFormat('jpeg')).toBe(true);
-      expect(isImageFormat('gif')).toBe(true);
-      expect(isImageFormat('tiff')).toBe(true);
-      expect(isImageFormat('bmp')).toBe(true);
-      expect(isImageFormat('webp')).toBe(true);
+  describe("isImageFormat", () => {
+    test("should return true for image formats", () => {
+      expect(isImageFormat("png")).toBe(true);
+      expect(isImageFormat("jpg")).toBe(true);
+      expect(isImageFormat("jpeg")).toBe(true);
+      expect(isImageFormat("gif")).toBe(true);
+      expect(isImageFormat("tiff")).toBe(true);
+      expect(isImageFormat("bmp")).toBe(true);
+      expect(isImageFormat("webp")).toBe(true);
     });
 
-    test('should return false for non-image formats', () => {
-      expect(isImageFormat('pdf')).toBe(false);
-      expect(isImageFormat('docx')).toBe(false);
-      expect(isImageFormat('txt')).toBe(false);
-      expect(isImageFormat('csv')).toBe(false);
-      expect(isImageFormat('html')).toBe(false);
-      expect(isImageFormat('xml')).toBe(false);
+    test("should return false for non-image formats", () => {
+      expect(isImageFormat("pdf")).toBe(false);
+      expect(isImageFormat("docx")).toBe(false);
+      expect(isImageFormat("txt")).toBe(false);
+      expect(isImageFormat("csv")).toBe(false);
+      expect(isImageFormat("html")).toBe(false);
+      expect(isImageFormat("xml")).toBe(false);
     });
 
-    test('should handle case insensitivity', () => {
-      expect(isImageFormat('PNG')).toBe(true);
-      expect(isImageFormat('JPG')).toBe(true);
-      expect(isImageFormat('JPEG')).toBe(true);
-      expect(isImageFormat('Png')).toBe(true);
-      expect(isImageFormat('JpG')).toBe(true);
+    test("should handle case insensitivity", () => {
+      expect(isImageFormat("PNG")).toBe(true);
+      expect(isImageFormat("JPG")).toBe(true);
+      expect(isImageFormat("JPEG")).toBe(true);
+      expect(isImageFormat("Png")).toBe(true);
+      expect(isImageFormat("JpG")).toBe(true);
     });
 
-    test('should handle empty and invalid inputs', () => {
-      expect(isImageFormat('')).toBe(false);
-      expect(isImageFormat('invalid')).toBe(false);
-      expect(isImageFormat('123')).toBe(false);
-      expect(isImageFormat('.')).toBe(false);
+    test("should handle empty and invalid inputs", () => {
+      expect(isImageFormat("")).toBe(false);
+      expect(isImageFormat("invalid")).toBe(false);
+      expect(isImageFormat("123")).toBe(false);
+      expect(isImageFormat(".")).toBe(false);
     });
 
-    test('should handle mixed case and edge cases', () => {
-      expect(isImageFormat('webP')).toBe(true);
-      expect(isImageFormat('WEBP')).toBe(true);
-      expect(isImageFormat('tIFf')).toBe(true);
-      expect(isImageFormat('bMp')).toBe(true);
+    test("should handle mixed case and edge cases", () => {
+      expect(isImageFormat("webP")).toBe(true);
+      expect(isImageFormat("WEBP")).toBe(true);
+      expect(isImageFormat("tIFf")).toBe(true);
+      expect(isImageFormat("bMp")).toBe(true);
     });
   });
 
-  describe('Edge Cases and Error Handling', () => {
-    
-    test('should handle null and undefined inputs gracefully', () => {
+  describe("Edge Cases and Error Handling", () => {
+    test("should handle null and undefined inputs gracefully", () => {
       // Note: TypeScript prevents these, but test runtime behavior for robustness
       // The current implementation handles these gracefully by returning falsy values
-      expect(getEndpointName(null as any, null as any)).toBe('');
-      expect(getEndpointUrl(undefined as any, undefined as any)).toBe('');
+      expect(getEndpointName(null as any, null as any)).toBe("");
+      expect(getEndpointUrl(undefined as any, undefined as any)).toBe("");
       expect(isConversionSupported(null as any, null as any)).toBe(false);
-      
+
       // isImageFormat will throw because it calls toLowerCase() on null/undefined
       expect(() => isImageFormat(null as any)).toThrow();
       expect(() => isImageFormat(undefined as any)).toThrow();
     });
 
-    test('should handle special characters in file extensions', () => {
-      expect(isImageFormat('png@')).toBe(false);
-      expect(isImageFormat('jpg#')).toBe(false);
-      expect(isImageFormat('png.')).toBe(false);
-      expect(getEndpointName('pdf@', 'png')).toBe('');
-      expect(getEndpointName('pdf', 'png#')).toBe('');
+    test("should handle special characters in file extensions", () => {
+      expect(isImageFormat("png@")).toBe(false);
+      expect(isImageFormat("jpg#")).toBe(false);
+      expect(isImageFormat("png.")).toBe(false);
+      expect(getEndpointName("pdf@", "png")).toBe("");
+      expect(getEndpointName("pdf", "png#")).toBe("");
     });
 
-    test('should handle very long extension names', () => {
-      const longExtension = 'a'.repeat(100);
+    test("should handle very long extension names", () => {
+      const longExtension = "a".repeat(100);
       expect(isImageFormat(longExtension)).toBe(false);
-      expect(getEndpointName('pdf', longExtension)).toBe('');
-      expect(getEndpointName(longExtension, 'pdf')).toBe('file-to-pdf'); // Fallback to file to pdf
+      expect(getEndpointName("pdf", longExtension)).toBe("");
+      expect(getEndpointName(longExtension, "pdf")).toBe("file-to-pdf"); // Fallback to file to pdf
     });
   });
-});
\ No newline at end of file
+});
diff --git a/frontend/src/core/utils/convertUtils.ts b/frontend/src/core/utils/convertUtils.ts
index eee179d82b..cd5ad751d1 100644
--- a/frontend/src/core/utils/convertUtils.ts
+++ b/frontend/src/core/utils/convertUtils.ts
@@ -3,24 +3,24 @@ import {
   ENDPOINT_NAMES,
   EXTENSION_TO_ENDPOINT,
   CONVERSION_MATRIX,
-  TO_FORMAT_OPTIONS
-} from '@app/constants/convertConstants';
+  TO_FORMAT_OPTIONS,
+} from "@app/constants/convertConstants";
 
 /**
  * Resolves the endpoint name for a given conversion
  */
 export const getEndpointName = (fromExtension: string, toExtension: string): string => {
-  if (!fromExtension || !toExtension) return '';
+  if (!fromExtension || !toExtension) return "";
 
   let endpointKey = EXTENSION_TO_ENDPOINT[fromExtension]?.[toExtension];
 
   // If no explicit mapping exists and we're converting to PDF,
   // fall back to 'any' which uses file-to-pdf endpoint
-  if (!endpointKey && toExtension === 'pdf' && fromExtension !== 'any') {
-    endpointKey = EXTENSION_TO_ENDPOINT['any']?.[toExtension];
+  if (!endpointKey && toExtension === "pdf" && fromExtension !== "any") {
+    endpointKey = EXTENSION_TO_ENDPOINT["any"]?.[toExtension];
   }
 
-  return endpointKey || '';
+  return endpointKey || "";
 };
 
 /**
@@ -28,7 +28,7 @@ export const getEndpointName = (fromExtension: string, toExtension: string): str
  */
 export const getEndpointUrl = (fromExtension: string, toExtension: string): string => {
   const endpointName = getEndpointName(fromExtension, toExtension);
-  if (!endpointName) return '';
+  if (!endpointName) return "";
 
   // Find the endpoint URL from CONVERSION_ENDPOINTS using the endpoint name
   for (const [key, endpoint] of Object.entries(CONVERSION_ENDPOINTS)) {
@@ -36,32 +36,32 @@ export const getEndpointUrl = (fromExtension: string, toExtension: string): stri
       return endpoint;
     }
   }
-  return '';
+  return "";
 };
 
 /**
  * Checks if a conversion is supported
  */
 export const isConversionSupported = (fromExtension: string, toExtension: string): boolean => {
-  return getEndpointName(fromExtension, toExtension) !== '';
+  return getEndpointName(fromExtension, toExtension) !== "";
 };
 
 /**
  * Checks if the given extension is an image format
  */
 export const isImageFormat = (extension: string): boolean => {
-  return ['png', 'jpg', 'jpeg', 'gif', 'tiff', 'bmp', 'webp'].includes(extension.toLowerCase());
+  return ["png", "jpg", "jpeg", "gif", "tiff", "bmp", "webp"].includes(extension.toLowerCase());
 };
 
 export const isSvgFormat = (extension: string): boolean => {
-  return extension.toLowerCase() === 'svg';
+  return extension.toLowerCase() === "svg";
 };
 
 /**
  * Checks if the given extension is a web format
  */
 export const isWebFormat = (extension: string): boolean => {
-  return ['html', 'zip'].includes(extension.toLowerCase());
+  return ["html", "zip"].includes(extension.toLowerCase());
 };
 
 /**
@@ -70,9 +70,15 @@ export const isWebFormat = (extension: string): boolean => {
  */
 export const isOfficeFormat = (extension: string): boolean => {
   return [
-    'docx', 'doc', 'odt',  // Word processors
-    'xlsx', 'xls', 'ods',  // Spreadsheets
-    'pptx', 'ppt', 'odp'   // Presentations
+    "docx",
+    "doc",
+    "odt", // Word processors
+    "xlsx",
+    "xls",
+    "ods", // Spreadsheets
+    "pptx",
+    "ppt",
+    "odp", // Presentations
   ].includes(extension.toLowerCase());
 };
 
@@ -80,27 +86,23 @@ export const isOfficeFormat = (extension: string): boolean => {
  * Gets available target extensions for a given source extension
  * Extracted from useConvertParameters to be reusable in automation settings
  */
-export const getAvailableToExtensions = (fromExtension: string): Array<{value: string, label: string, group: string}> => {
+export const getAvailableToExtensions = (fromExtension: string): Array<{ value: string; label: string; group: string }> => {
   if (!fromExtension) return [];
 
   // Handle dynamic format identifiers (file-<extension>)
-  if (fromExtension.startsWith('file-')) {
+  if (fromExtension.startsWith("file-")) {
     // Dynamic format - use 'any' conversion options (file-to-pdf)
-    const supportedExtensions = CONVERSION_MATRIX['any'] || [];
-    return TO_FORMAT_OPTIONS.filter(option =>
-      supportedExtensions.includes(option.value)
-    );
+    const supportedExtensions = CONVERSION_MATRIX["any"] || [];
+    return TO_FORMAT_OPTIONS.filter((option) => supportedExtensions.includes(option.value));
   }
 
   let supportedExtensions = CONVERSION_MATRIX[fromExtension] || [];
 
   // If no explicit conversion exists, but file-to-pdf might be available,
   // fall back to 'any' conversion (which converts unknown files to PDF via file-to-pdf)
-  if (supportedExtensions.length === 0 && fromExtension !== 'any') {
-    supportedExtensions = CONVERSION_MATRIX['any'] || [];
+  if (supportedExtensions.length === 0 && fromExtension !== "any") {
+    supportedExtensions = CONVERSION_MATRIX["any"] || [];
   }
 
-  return TO_FORMAT_OPTIONS.filter(option =>
-    supportedExtensions.includes(option.value)
-  );
+  return TO_FORMAT_OPTIONS.filter((option) => supportedExtensions.includes(option.value));
 };
diff --git a/frontend/src/core/utils/cropCoordinates.ts b/frontend/src/core/utils/cropCoordinates.ts
index a8c7192f4e..937ce43780 100644
--- a/frontend/src/core/utils/cropCoordinates.ts
+++ b/frontend/src/core/utils/cropCoordinates.ts
@@ -35,17 +35,9 @@ export function isRectangle(value: unknown): value is Rectangle {
   if (value === null || typeof value !== "object") return false;
 
   const r = value as Record<string, unknown>;
-  const isNum = (n: unknown): n is number =>
-    typeof n === "number" && Number.isFinite(n);
+  const isNum = (n: unknown): n is number => typeof n === "number" && Number.isFinite(n);
 
-  return (
-    isNum(r.x) &&
-    isNum(r.y) &&
-    isNum(r.width) &&
-    isNum(r.height) &&
-    r.width >= 0 &&
-    r.height >= 0
-  );
+  return isNum(r.x) && isNum(r.y) && isNum(r.width) && isNum(r.height) && r.width >= 0 && r.height >= 0;
 }
 
 /**
@@ -55,7 +47,7 @@ export const calculatePDFBounds = (
   actualPDFWidth: number,
   actualPDFHeight: number,
   containerWidth: number,
-  containerHeight: number
+  containerHeight: number,
 ): PDFBounds => {
   // Calculate scale to fit PDF within container while maintaining aspect ratio
   const scaleX = containerWidth / actualPDFWidth;
@@ -77,7 +69,7 @@ export const calculatePDFBounds = (
     thumbnailHeight,
     offsetX,
     offsetY,
-    scale
+    scale,
   };
 };
 
@@ -85,17 +77,14 @@ export const calculatePDFBounds = (
  * Convert DOM coordinates (relative to container) to PDF coordinates
  * Handles coordinate system conversion (DOM uses top-left, PDF uses bottom-left origin)
  */
-export const domToPDFCoordinates = (
-  domRect: Rectangle,
-  pdfBounds: PDFBounds
-): Rectangle => {
+export const domToPDFCoordinates = (domRect: Rectangle, pdfBounds: PDFBounds): Rectangle => {
   // Convert DOM coordinates to thumbnail-relative coordinates
   const thumbX = domRect.x - pdfBounds.offsetX;
   const thumbY = domRect.y - pdfBounds.offsetY;
 
   // Convert to PDF coordinates (scale and flip Y-axis)
   const pdfX = thumbX / pdfBounds.scale;
-  const pdfY = pdfBounds.actualHeight - ((thumbY + domRect.height) / pdfBounds.scale);
+  const pdfY = pdfBounds.actualHeight - (thumbY + domRect.height) / pdfBounds.scale;
   const pdfWidth = domRect.width / pdfBounds.scale;
   const pdfHeight = domRect.height / pdfBounds.scale;
 
@@ -103,17 +92,14 @@ export const domToPDFCoordinates = (
     x: pdfX,
     y: pdfY,
     width: pdfWidth,
-    height: pdfHeight
+    height: pdfHeight,
   };
 };
 
 /**
  * Convert PDF coordinates to DOM coordinates (relative to container)
  */
-export const pdfToDOMCoordinates = (
-  cropArea: Rectangle,
-  pdfBounds: PDFBounds
-): Rectangle => {
+export const pdfToDOMCoordinates = (cropArea: Rectangle, pdfBounds: PDFBounds): Rectangle => {
   // Convert PDF coordinates to thumbnail coordinates (scale and flip Y-axis)
   const thumbX = cropArea.x * pdfBounds.scale;
   const thumbY = (pdfBounds.actualHeight - cropArea.y - cropArea.height) * pdfBounds.scale;
@@ -125,17 +111,14 @@ export const pdfToDOMCoordinates = (
     x: thumbX + pdfBounds.offsetX,
     y: thumbY + pdfBounds.offsetY,
     width: thumbWidth,
-    height: thumbHeight
+    height: thumbHeight,
   };
 };
 
 /**
  * Constrain a crop area to stay within PDF bounds
  */
-export const constrainCropAreaToPDF = (
-  cropArea: Rectangle,
-  pdfBounds: PDFBounds
-): Rectangle => {
+export const constrainCropAreaToPDF = (cropArea: Rectangle, pdfBounds: PDFBounds): Rectangle => {
   // Ensure crop area doesn't extend beyond PDF boundaries
   const maxX = Math.max(0, pdfBounds.actualWidth - cropArea.width);
   const maxY = Math.max(0, pdfBounds.actualHeight - cropArea.height);
@@ -144,17 +127,14 @@ export const constrainCropAreaToPDF = (
     x: Math.max(0, Math.min(cropArea.x, maxX)),
     y: Math.max(0, Math.min(cropArea.y, maxY)),
     width: Math.min(cropArea.width, pdfBounds.actualWidth - Math.max(0, cropArea.x)),
-    height: Math.min(cropArea.height, pdfBounds.actualHeight - Math.max(0, cropArea.y))
+    height: Math.min(cropArea.height, pdfBounds.actualHeight - Math.max(0, cropArea.y)),
   };
 };
 
 /**
  * Constrain DOM coordinates to stay within thumbnail bounds
  */
-export const constrainDOMRectToThumbnail = (
-  domRect: Rectangle,
-  pdfBounds: PDFBounds
-): Rectangle => {
+export const constrainDOMRectToThumbnail = (domRect: Rectangle, pdfBounds: PDFBounds): Rectangle => {
   const thumbnailLeft = pdfBounds.offsetX;
   const thumbnailTop = pdfBounds.offsetY;
   const thumbnailRight = pdfBounds.offsetX + pdfBounds.thumbnailWidth;
@@ -175,22 +155,20 @@ export const constrainDOMRectToThumbnail = (
     x: constrainedX,
     y: constrainedY,
     width: Math.min(domRect.width, maxWidth),
-    height: Math.min(domRect.height, maxHeight)
+    height: Math.min(domRect.height, maxHeight),
   };
 };
 
 /**
  * Check if a point is within the thumbnail area (not just the container)
  */
-export const isPointInThumbnail = (
-  x: number,
-  y: number,
-  pdfBounds: PDFBounds
-): boolean => {
-  return x >= pdfBounds.offsetX &&
-         x <= pdfBounds.offsetX + pdfBounds.thumbnailWidth &&
-         y >= pdfBounds.offsetY &&
-         y <= pdfBounds.offsetY + pdfBounds.thumbnailHeight;
+export const isPointInThumbnail = (x: number, y: number, pdfBounds: PDFBounds): boolean => {
+  return (
+    x >= pdfBounds.offsetX &&
+    x <= pdfBounds.offsetX + pdfBounds.thumbnailWidth &&
+    y >= pdfBounds.offsetY &&
+    y <= pdfBounds.offsetY + pdfBounds.thumbnailHeight
+  );
 };
 
 /**
@@ -201,7 +179,7 @@ export const createFullPDFCropArea = (pdfBounds: PDFBounds): Rectangle => {
     x: 0,
     y: 0,
     width: pdfBounds.actualWidth,
-    height: pdfBounds.actualHeight
+    height: pdfBounds.actualHeight,
   };
 };
 
@@ -213,6 +191,6 @@ export const roundCropArea = (cropArea: Rectangle): Rectangle => {
     x: Math.round(cropArea.x * 10) / 10,
     y: Math.round(cropArea.y * 10) / 10,
     width: Math.round(cropArea.width * 10) / 10,
-    height: Math.round(cropArea.height * 10) / 10
+    height: Math.round(cropArea.height * 10) / 10,
   };
 };
diff --git a/frontend/src/core/utils/downloadUtils.ts b/frontend/src/core/utils/downloadUtils.ts
index f6c1ff347d..26c62842fd 100644
--- a/frontend/src/core/utils/downloadUtils.ts
+++ b/frontend/src/core/utils/downloadUtils.ts
@@ -1,7 +1,7 @@
-import { StirlingFileStub } from '@app/types/fileContext';
-import { fileStorage } from '@app/services/fileStorage';
-import { zipFileService } from '@app/services/zipFileService';
-import { downloadFile } from '@app/services/downloadService';
+import { StirlingFileStub } from "@app/types/fileContext";
+import { fileStorage } from "@app/services/fileStorage";
+import { zipFileService } from "@app/services/zipFileService";
+import { downloadFile } from "@app/services/downloadService";
 
 /**
  * Downloads a blob as a file using browser download API
@@ -28,7 +28,7 @@ export async function downloadFileFromStorage(file: StirlingFileStub): Promise<v
   await downloadFile({
     data: stirlingFile,
     filename: stirlingFile.name,
-    localPath: file.localFilePath
+    localPath: file.localFilePath,
   });
 }
 
@@ -49,7 +49,7 @@ export async function downloadMultipleFiles(files: StirlingFileStub[]): Promise<
  */
 export async function downloadFilesAsZip(files: StirlingFileStub[], zipFilename?: string): Promise<void> {
   if (files.length === 0) {
-    throw new Error('No files provided for ZIP download');
+    throw new Error("No files provided for ZIP download");
   }
 
   // Convert stored files to File objects
@@ -65,12 +65,11 @@ export async function downloadFilesAsZip(files: StirlingFileStub[], zipFilename?
   }
 
   if (filesToZip.length === 0) {
-    throw new Error('No valid files found in storage for ZIP download');
+    throw new Error("No valid files found in storage for ZIP download");
   }
 
   // Generate default filename if not provided
-  const finalZipFilename = zipFilename ||
-    `files-${new Date().toISOString().slice(0, 19).replace(/[:-]/g, '')}.zip`;
+  const finalZipFilename = zipFilename || `files-${new Date().toISOString().slice(0, 19).replace(/[:-]/g, "")}.zip`;
 
   // Create and download ZIP
   const { zipFile } = await zipFileService.createZipFromFiles(filesToZip, finalZipFilename);
@@ -90,10 +89,10 @@ export async function downloadFiles(
     forceZip?: boolean;
     zipFilename?: string;
     multipleAsIndividual?: boolean;
-  } = {}
+  } = {},
 ): Promise<void> {
   if (files.length === 0) {
-    throw new Error('No files provided for download');
+    throw new Error("No files provided for download");
   }
 
   if (files.length === 1 && !options.forceZip) {
@@ -123,11 +122,7 @@ export function downloadFileObject(file: File, filename?: string): void {
  * @param filename - Filename for the download
  * @param mimeType - MIME type (defaults to text/plain)
  */
-export function downloadTextAsFile(
-  content: string,
-  filename: string,
-  mimeType: string = 'text/plain'
-): void {
+export function downloadTextAsFile(content: string, filename: string, mimeType: string = "text/plain"): void {
   const blob = new Blob([content], { type: mimeType });
   void downloadFile({ data: blob, filename });
 }
@@ -139,5 +134,5 @@ export function downloadTextAsFile(
  */
 export function downloadJsonAsFile(data: any, filename: string): void {
   const content = JSON.stringify(data, null, 2);
-  downloadTextAsFile(content, filename, 'application/json');
+  downloadTextAsFile(content, filename, "application/json");
 }
diff --git a/frontend/src/core/utils/editTableOfContents.ts b/frontend/src/core/utils/editTableOfContents.ts
index 2c7762a453..5724c87290 100644
--- a/frontend/src/core/utils/editTableOfContents.ts
+++ b/frontend/src/core/utils/editTableOfContents.ts
@@ -13,7 +13,7 @@ export interface BookmarkNode {
 }
 
 const createBookmarkId = () => {
-  if (typeof crypto !== 'undefined' && 'randomUUID' in crypto) {
+  if (typeof crypto !== "undefined" && "randomUUID" in crypto) {
     return crypto.randomUUID();
   }
 
@@ -22,24 +22,24 @@ const createBookmarkId = () => {
 
 export const createBookmarkNode = (bookmark?: Partial<BookmarkNode>): BookmarkNode => ({
   id: bookmark?.id ?? createBookmarkId(),
-  title: bookmark?.title ?? '',
+  title: bookmark?.title ?? "",
   pageNumber: bookmark?.pageNumber ?? 1,
-  children: bookmark?.children ? bookmark.children.map(child => createBookmarkNode(child)) : [],
+  children: bookmark?.children ? bookmark.children.map((child) => createBookmarkNode(child)) : [],
   expanded: bookmark?.expanded ?? true,
 });
 
 export const hydrateBookmarkPayload = (payload: BookmarkPayload[] = []): BookmarkNode[] => {
-  return payload.map(item => ({
+  return payload.map((item) => ({
     id: createBookmarkId(),
-    title: item.title ?? '',
-    pageNumber: typeof item.pageNumber === 'number' && item.pageNumber > 0 ? item.pageNumber : 1,
+    title: item.title ?? "",
+    pageNumber: typeof item.pageNumber === "number" && item.pageNumber > 0 ? item.pageNumber : 1,
     expanded: true,
     children: item.children ? hydrateBookmarkPayload(item.children) : [],
   }));
 };
 
 export const serializeBookmarkNodes = (bookmarks: BookmarkNode[]): BookmarkPayload[] => {
-  return bookmarks.map(bookmark => ({
+  return bookmarks.map((bookmark) => ({
     title: bookmark.title,
     pageNumber: bookmark.pageNumber,
     children: serializeBookmarkNodes(bookmark.children),
diff --git a/frontend/src/core/utils/fileDialogUtils.ts b/frontend/src/core/utils/fileDialogUtils.ts
index afd76b5664..3c89e56479 100644
--- a/frontend/src/core/utils/fileDialogUtils.ts
+++ b/frontend/src/core/utils/fileDialogUtils.ts
@@ -1,6 +1,8 @@
 export function getDocumentFileDialogFilter() {
-  return [{
-    name: 'Documents',
-    extensions: ['pdf', 'jpg', 'jpeg', 'png', 'gif', 'tiff', 'bmp', 'html', 'zip']
-  }];
+  return [
+    {
+      name: "Documents",
+      extensions: ["pdf", "jpg", "jpeg", "png", "gif", "tiff", "bmp", "html", "zip"],
+    },
+  ];
 }
diff --git a/frontend/src/core/utils/fileHash.ts b/frontend/src/core/utils/fileHash.ts
index 3ff911a562..5876c422b0 100644
--- a/frontend/src/core/utils/fileHash.ts
+++ b/frontend/src/core/utils/fileHash.ts
@@ -31,30 +31,31 @@ export class FileHasher {
    */
   static async generateHybridHash(file: File): Promise<string> {
     const metadataHash = this.generateMetadataHash(file);
-    
+
     // For small files, use full content hash
-    if (file.size <= 1024 * 1024) { // 1MB
+    if (file.size <= 1024 * 1024) {
+      // 1MB
       const contentHash = await this.generateContentHash(file);
       return `${metadataHash}-${contentHash}`;
     }
-    
+
     // For large files, use first chunk only
     const firstChunk = file.slice(0, this.CHUNK_SIZE);
     const firstChunkBuffer = await firstChunk.arrayBuffer();
     const firstChunkHash = await this.hashArrayBuffer(firstChunkBuffer);
-    
+
     return `${metadataHash}-${firstChunkHash}`;
   }
 
   private static async getFileChunks(file: File): Promise<ArrayBuffer[]> {
     const chunks: ArrayBuffer[] = [];
-    
+
     // First chunk
     if (file.size > 0) {
       const firstChunk = file.slice(0, Math.min(this.CHUNK_SIZE, file.size));
       chunks.push(await firstChunk.arrayBuffer());
     }
-    
+
     // Middle chunk (if file is large enough)
     if (file.size > this.CHUNK_SIZE * 2) {
       const middleStart = Math.floor(file.size / 2) - Math.floor(this.CHUNK_SIZE / 2);
@@ -62,52 +63,52 @@ export class FileHasher {
       const middleChunk = file.slice(middleStart, middleEnd);
       chunks.push(await middleChunk.arrayBuffer());
     }
-    
+
     // Last chunk (if file is large enough and different from first)
     if (file.size > this.CHUNK_SIZE) {
       const lastStart = Math.max(file.size - this.CHUNK_SIZE, this.CHUNK_SIZE);
       const lastChunk = file.slice(lastStart);
       chunks.push(await lastChunk.arrayBuffer());
     }
-    
+
     return chunks;
   }
 
   private static async combineChunks(chunks: ArrayBuffer[]): Promise<ArrayBuffer> {
     const totalLength = chunks.reduce((sum, chunk) => sum + chunk.byteLength, 0);
     const combined = new Uint8Array(totalLength);
-    
+
     let offset = 0;
     for (const chunk of chunks) {
       combined.set(new Uint8Array(chunk), offset);
       offset += chunk.byteLength;
     }
-    
+
     return combined.buffer;
   }
 
   private static async hashArrayBuffer(buffer: ArrayBuffer): Promise<string> {
     // Use Web Crypto API for proper hashing
     if (crypto.subtle) {
-      const hashBuffer = await crypto.subtle.digest('SHA-256', buffer);
+      const hashBuffer = await crypto.subtle.digest("SHA-256", buffer);
       const hashArray = Array.from(new Uint8Array(hashBuffer));
-      return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
+      return hashArray.map((b) => b.toString(16).padStart(2, "0")).join("");
     }
-    
+
     // Fallback for environments without crypto.subtle
-    return this.simpleHash(Array.from(new Uint8Array(buffer)).join(''));
+    return this.simpleHash(Array.from(new Uint8Array(buffer)).join(""));
   }
 
   private static simpleHash(str: string): string {
     let hash = 0;
     if (str.length === 0) return hash.toString();
-    
+
     for (let i = 0; i < str.length; i++) {
       const char = str.charCodeAt(i);
-      hash = ((hash << 5) - hash) + char;
+      hash = (hash << 5) - hash + char;
       hash = hash & hash; // Convert to 32-bit integer
     }
-    
+
     return Math.abs(hash).toString(16);
   }
 
@@ -120,8 +121,8 @@ export class FileHasher {
       const actualHash = await this.generateHybridHash(file);
       return actualHash === expectedHash;
     } catch (error) {
-      console.error('Hash validation failed:', error);
+      console.error("Hash validation failed:", error);
       return false;
     }
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/src/core/utils/fileHistoryUtils.ts b/frontend/src/core/utils/fileHistoryUtils.ts
index a67d0f4f89..10f1229225 100644
--- a/frontend/src/core/utils/fileHistoryUtils.ts
+++ b/frontend/src/core/utils/fileHistoryUtils.ts
@@ -4,7 +4,7 @@
  * Helper functions for IndexedDB-based file history management.
  * Handles file history operations and lineage tracking.
  */
-import { StirlingFileStub } from '@app/types/fileContext';
+import { StirlingFileStub } from "@app/types/fileContext";
 
 /**
  * Group files by processing branches - each branch ends in a leaf file
@@ -21,14 +21,14 @@ export function groupFilesByOriginal(StirlingFileStubs: StirlingFileStub[]): Map
 
   // Find leaf files (files that are not parents of any other files AND have version history)
   // Original files (v0) should only be leaves if they have no processed versions at all
-  const leafFiles = StirlingFileStubs.filter(stub => {
-    const isParentOfOthers = StirlingFileStubs.some(otherStub => otherStub.parentFileId === stub.id);
-    const isOriginalOfOthers = StirlingFileStubs.some(otherStub => otherStub.originalFileId === stub.id);
+  const leafFiles = StirlingFileStubs.filter((stub) => {
+    const isParentOfOthers = StirlingFileStubs.some((otherStub) => otherStub.parentFileId === stub.id);
+    const isOriginalOfOthers = StirlingFileStubs.some((otherStub) => otherStub.originalFileId === stub.id);
 
     // A file is a leaf if:
     // 1. It's not a parent of any other files, AND
     // 2. It has processing history (versionNumber > 0) OR it's not referenced as original by others
-    return !isParentOfOthers && (stub.versionNumber && stub.versionNumber > 0 || !isOriginalOfOthers);
+    return !isParentOfOthers && ((stub.versionNumber && stub.versionNumber > 0) || !isOriginalOfOthers);
   });
 
   // For each leaf file, build its complete lineage path back to original
@@ -51,7 +51,7 @@ export function groupFilesByOriginal(StirlingFileStubs: StirlingFileStub[]): Map
       }
 
       // Check for infinite loops before moving to next
-      if (nextFile && lineagePath.some(file => file.id === nextFile!.id)) {
+      if (nextFile && lineagePath.some((file) => file.id === nextFile!.id)) {
         break;
       }
 
@@ -74,5 +74,3 @@ export function groupFilesByOriginal(StirlingFileStubs: StirlingFileStub[]): Map
 export function hasVersionHistory(fileStub: StirlingFileStub): boolean {
   return !!(fileStub.originalFileId && fileStub.versionNumber && fileStub.versionNumber > 0);
 }
-
-
diff --git a/frontend/src/core/utils/fileIdSafety.ts b/frontend/src/core/utils/fileIdSafety.ts
index fac7b14cc8..e90788783a 100644
--- a/frontend/src/core/utils/fileIdSafety.ts
+++ b/frontend/src/core/utils/fileIdSafety.ts
@@ -2,7 +2,7 @@
  * Runtime validation utilities for FileId safety
  */
 
-import { FileId } from '@app/types/fileContext';
+import { FileId } from "@app/types/fileContext";
 
 // Validate that a string is a proper FileId (has UUID format)
 export function isValidFileId(id: string): id is FileId {
@@ -10,5 +10,3 @@ export function isValidFileId(id: string): id is FileId {
   const uuidRegex = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i;
   return uuidRegex.test(id);
 }
-
-
diff --git a/frontend/src/core/utils/fileResponseUtils.test.ts b/frontend/src/core/utils/fileResponseUtils.test.ts
index 6aee7e707e..b59d2455e9 100644
--- a/frontend/src/core/utils/fileResponseUtils.test.ts
+++ b/frontend/src/core/utils/fileResponseUtils.test.ts
@@ -2,146 +2,143 @@
  * Unit tests for file response utility functions
  */
 
-import { describe, test, expect } from 'vitest';
-import { getFilenameFromHeaders, createFileFromApiResponse } from '@app/utils/fileResponseUtils';
+import { describe, test, expect } from "vitest";
+import { getFilenameFromHeaders, createFileFromApiResponse } from "@app/utils/fileResponseUtils";
 
-describe('fileResponseUtils', () => {
-  
-  describe('getFilenameFromHeaders', () => {
-    
-    test('should extract filename from content-disposition header', () => {
+describe("fileResponseUtils", () => {
+  describe("getFilenameFromHeaders", () => {
+    test("should extract filename from content-disposition header", () => {
       const contentDisposition = 'attachment; filename="document.pdf"';
       const filename = getFilenameFromHeaders(contentDisposition);
-      
-      expect(filename).toBe('document.pdf');
+
+      expect(filename).toBe("document.pdf");
     });
 
-    test('should extract filename without quotes', () => {
-      const contentDisposition = 'attachment; filename=document.pdf';
+    test("should extract filename without quotes", () => {
+      const contentDisposition = "attachment; filename=document.pdf";
       const filename = getFilenameFromHeaders(contentDisposition);
-      
-      expect(filename).toBe('document.pdf');
+
+      expect(filename).toBe("document.pdf");
     });
 
-    test('should handle single quotes', () => {
+    test("should handle single quotes", () => {
       const contentDisposition = "attachment; filename='document.pdf'";
       const filename = getFilenameFromHeaders(contentDisposition);
-      
-      expect(filename).toBe('document.pdf');
+
+      expect(filename).toBe("document.pdf");
     });
 
-    test('should return null for malformed header', () => {
-      const contentDisposition = 'attachment; invalid=format';
+    test("should return null for malformed header", () => {
+      const contentDisposition = "attachment; invalid=format";
       const filename = getFilenameFromHeaders(contentDisposition);
-      
+
       expect(filename).toBe(null);
     });
 
-    test('should return null for empty header', () => {
-      const filename = getFilenameFromHeaders('');
-      
+    test("should return null for empty header", () => {
+      const filename = getFilenameFromHeaders("");
+
       expect(filename).toBe(null);
     });
 
-    test('should return null for undefined header', () => {
+    test("should return null for undefined header", () => {
       const filename = getFilenameFromHeaders();
-      
+
       expect(filename).toBe(null);
     });
 
-    test('should handle complex filenames with spaces and special chars', () => {
+    test("should handle complex filenames with spaces and special chars", () => {
       const contentDisposition = 'attachment; filename="My Document (1).pdf"';
       const filename = getFilenameFromHeaders(contentDisposition);
-      
-      expect(filename).toBe('My Document (1).pdf');
+
+      expect(filename).toBe("My Document (1).pdf");
     });
 
-    test('should handle filename with extension when downloadHtml is enabled', () => {
+    test("should handle filename with extension when downloadHtml is enabled", () => {
       const contentDisposition = 'attachment; filename="email_content.html"';
       const filename = getFilenameFromHeaders(contentDisposition);
-      
-      expect(filename).toBe('email_content.html');
+
+      expect(filename).toBe("email_content.html");
     });
   });
 
-  describe('createFileFromApiResponse', () => {
-    
-    test('should create file using header filename when available', () => {
+  describe("createFileFromApiResponse", () => {
+    test("should create file using header filename when available", () => {
       const responseData = new Uint8Array([1, 2, 3, 4]);
       const headers = {
-        'content-type': 'application/pdf',
-        'content-disposition': 'attachment; filename="server_filename.pdf"'
+        "content-type": "application/pdf",
+        "content-disposition": 'attachment; filename="server_filename.pdf"',
       };
-      const fallbackFilename = 'fallback.pdf';
-      
+      const fallbackFilename = "fallback.pdf";
+
       const file = createFileFromApiResponse(responseData, headers, fallbackFilename);
-      
-      expect(file.name).toBe('server_filename.pdf');
-      expect(file.type).toBe('application/pdf');
+
+      expect(file.name).toBe("server_filename.pdf");
+      expect(file.type).toBe("application/pdf");
       expect(file.size).toBe(4);
     });
 
-    test('should use fallback filename when no header filename', () => {
+    test("should use fallback filename when no header filename", () => {
       const responseData = new Uint8Array([1, 2, 3, 4]);
       const headers = {
-        'content-type': 'application/pdf'
+        "content-type": "application/pdf",
       };
-      const fallbackFilename = 'converted_file.pdf';
-      
+      const fallbackFilename = "converted_file.pdf";
+
       const file = createFileFromApiResponse(responseData, headers, fallbackFilename);
-      
-      expect(file.name).toBe('converted_file.pdf');
-      expect(file.type).toBe('application/pdf');
+
+      expect(file.name).toBe("converted_file.pdf");
+      expect(file.type).toBe("application/pdf");
     });
 
-    test('should handle HTML response when downloadHtml is enabled', () => {
-      const responseData = '<html><body>Test</body></html>';
+    test("should handle HTML response when downloadHtml is enabled", () => {
+      const responseData = "<html><body>Test</body></html>";
       const headers = {
-        'content-type': 'text/html',
-        'content-disposition': 'attachment; filename="email_content.html"'
+        "content-type": "text/html",
+        "content-disposition": 'attachment; filename="email_content.html"',
       };
-      const fallbackFilename = 'fallback.pdf';
-      
+      const fallbackFilename = "fallback.pdf";
+
       const file = createFileFromApiResponse(responseData, headers, fallbackFilename);
-      
-      expect(file.name).toBe('email_content.html');
-      expect(file.type).toBe('text/html');
+
+      expect(file.name).toBe("email_content.html");
+      expect(file.type).toBe("text/html");
     });
 
-    test('should handle ZIP response', () => {
+    test("should handle ZIP response", () => {
       const responseData = new Uint8Array([80, 75, 3, 4]); // ZIP file signature
       const headers = {
-        'content-type': 'application/zip',
-        'content-disposition': 'attachment; filename="converted_files.zip"'
+        "content-type": "application/zip",
+        "content-disposition": 'attachment; filename="converted_files.zip"',
       };
-      const fallbackFilename = 'fallback.pdf';
-      
+      const fallbackFilename = "fallback.pdf";
+
       const file = createFileFromApiResponse(responseData, headers, fallbackFilename);
-      
-      expect(file.name).toBe('converted_files.zip');
-      expect(file.type).toBe('application/zip');
+
+      expect(file.name).toBe("converted_files.zip");
+      expect(file.type).toBe("application/zip");
     });
 
-    test('should use default content-type when none provided', () => {
+    test("should use default content-type when none provided", () => {
       const responseData = new Uint8Array([1, 2, 3, 4]);
       const headers = {};
-      const fallbackFilename = 'test.bin';
-      
+      const fallbackFilename = "test.bin";
+
       const file = createFileFromApiResponse(responseData, headers, fallbackFilename);
-      
-      expect(file.name).toBe('test.bin');
-      expect(file.type).toBe('application/octet-stream');
+
+      expect(file.name).toBe("test.bin");
+      expect(file.type).toBe("application/octet-stream");
     });
 
-    test('should handle null/undefined headers gracefully', () => {
+    test("should handle null/undefined headers gracefully", () => {
       const responseData = new Uint8Array([1, 2, 3, 4]);
       const headers = null;
-      const fallbackFilename = 'test.bin';
-      
+      const fallbackFilename = "test.bin";
+
       const file = createFileFromApiResponse(responseData, headers, fallbackFilename);
-      
-      expect(file.name).toBe('test.bin');
-      expect(file.type).toBe('application/octet-stream');
+
+      expect(file.name).toBe("test.bin");
+      expect(file.type).toBe("application/octet-stream");
     });
   });
-});
\ No newline at end of file
+});
diff --git a/frontend/src/core/utils/fileResponseUtils.ts b/frontend/src/core/utils/fileResponseUtils.ts
index 659c2948dd..ac1a41a932 100644
--- a/frontend/src/core/utils/fileResponseUtils.ts
+++ b/frontend/src/core/utils/fileResponseUtils.ts
@@ -7,10 +7,10 @@
  * @param contentDisposition - Content-Disposition header value
  * @returns Filename if found, null otherwise
  */
-export const getFilenameFromHeaders = (contentDisposition: string = ''): string | null => {
+export const getFilenameFromHeaders = (contentDisposition: string = ""): string | null => {
   const match = contentDisposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
   if (match && match[1]) {
-    const filename = match[1].replace(/['"]/g, '');
+    const filename = match[1].replace(/['"]/g, "");
 
     // Decode URL-encoded characters (e.g., %20 -> space)
     try {
@@ -30,13 +30,9 @@ export const getFilenameFromHeaders = (contentDisposition: string = ''): string
  * @param fallbackFilename - Filename to use if none provided in headers
  * @returns File object
  */
-export const createFileFromApiResponse = (
-  responseData: any,
-  headers: any,
-  fallbackFilename: string
-): File => {
-  const contentType = headers?.['content-type'] || 'application/octet-stream';
-  const contentDisposition = headers?.['content-disposition'] || '';
+export const createFileFromApiResponse = (responseData: any, headers: any, fallbackFilename: string): File => {
+  const contentType = headers?.["content-type"] || "application/octet-stream";
+  const contentDisposition = headers?.["content-disposition"] || "";
 
   const filename = getFilenameFromHeaders(contentDisposition) || fallbackFilename;
   const blob = new Blob([responseData], { type: contentType });
diff --git a/frontend/src/core/utils/fileUtils.test.ts b/frontend/src/core/utils/fileUtils.test.ts
index 499a49babc..1d5dc7097c 100644
--- a/frontend/src/core/utils/fileUtils.test.ts
+++ b/frontend/src/core/utils/fileUtils.test.ts
@@ -1,87 +1,87 @@
-import { describe, it, expect } from 'vitest';
-import { isPdfFile, detectFileExtension, formatFileSize } from '@app/utils/fileUtils';
+import { describe, it, expect } from "vitest";
+import { isPdfFile, detectFileExtension, formatFileSize } from "@app/utils/fileUtils";
 
-describe('fileUtils', () => {
-  describe('isPdfFile', () => {
-    it('should return true for PDF files with correct MIME type', () => {
-      const pdfFile = new File(['content'], 'document.pdf', { type: 'application/pdf' });
+describe("fileUtils", () => {
+  describe("isPdfFile", () => {
+    it("should return true for PDF files with correct MIME type", () => {
+      const pdfFile = new File(["content"], "document.pdf", { type: "application/pdf" });
       expect(isPdfFile(pdfFile)).toBe(true);
     });
 
-    it('should return true for PDF files with .pdf extension even without MIME type', () => {
-      const pdfFile = new File(['content'], 'document.pdf', { type: '' });
+    it("should return true for PDF files with .pdf extension even without MIME type", () => {
+      const pdfFile = new File(["content"], "document.pdf", { type: "" });
       expect(isPdfFile(pdfFile)).toBe(true);
     });
 
-    it('should return false for non-PDF files', () => {
-      const txtFile = new File(['content'], 'document.txt', { type: 'text/plain' });
+    it("should return false for non-PDF files", () => {
+      const txtFile = new File(["content"], "document.txt", { type: "text/plain" });
       expect(isPdfFile(txtFile)).toBe(false);
     });
 
-    it('should return false for image files', () => {
-      const imageFile = new File(['content'], 'image.png', { type: 'image/png' });
+    it("should return false for image files", () => {
+      const imageFile = new File(["content"], "image.png", { type: "image/png" });
       expect(isPdfFile(imageFile)).toBe(false);
     });
 
-    it('should return false for null', () => {
+    it("should return false for null", () => {
       expect(isPdfFile(null)).toBe(false);
     });
 
-    it('should return false for undefined', () => {
+    it("should return false for undefined", () => {
       expect(isPdfFile(undefined)).toBe(false);
     });
 
-    it('should handle file-like objects with name and type', () => {
-      const fileLike = { name: 'test.pdf', type: 'application/pdf' };
+    it("should handle file-like objects with name and type", () => {
+      const fileLike = { name: "test.pdf", type: "application/pdf" };
       expect(isPdfFile(fileLike)).toBe(true);
     });
 
-    it('should handle file-like objects with PDF extension but no type', () => {
-      const fileLike = { name: 'test.pdf', type: '' };
+    it("should handle file-like objects with PDF extension but no type", () => {
+      const fileLike = { name: "test.pdf", type: "" };
       expect(isPdfFile(fileLike)).toBe(true);
     });
   });
 
-  describe('detectFileExtension', () => {
-    it('should detect PDF extension', () => {
-      expect(detectFileExtension('document.pdf')).toBe('pdf');
+  describe("detectFileExtension", () => {
+    it("should detect PDF extension", () => {
+      expect(detectFileExtension("document.pdf")).toBe("pdf");
     });
 
-    it('should detect extension in uppercase', () => {
-      expect(detectFileExtension('document.PDF')).toBe('pdf');
+    it("should detect extension in uppercase", () => {
+      expect(detectFileExtension("document.PDF")).toBe("pdf");
     });
 
-    it('should return empty string for files without extension', () => {
-      expect(detectFileExtension('document')).toBe('');
+    it("should return empty string for files without extension", () => {
+      expect(detectFileExtension("document")).toBe("");
     });
 
-    it('should handle multiple dots in filename', () => {
-      expect(detectFileExtension('my.document.pdf')).toBe('pdf');
+    it("should handle multiple dots in filename", () => {
+      expect(detectFileExtension("my.document.pdf")).toBe("pdf");
     });
 
-    it('should normalize jpeg to jpg', () => {
-      expect(detectFileExtension('image.jpeg')).toBe('jpg');
+    it("should normalize jpeg to jpg", () => {
+      expect(detectFileExtension("image.jpeg")).toBe("jpg");
     });
   });
 
-  describe('formatFileSize', () => {
-    it('should format bytes', () => {
-      expect(formatFileSize(0)).toBe('0 B');
-      expect(formatFileSize(500)).toBe('500 B');
+  describe("formatFileSize", () => {
+    it("should format bytes", () => {
+      expect(formatFileSize(0)).toBe("0 B");
+      expect(formatFileSize(500)).toBe("500 B");
     });
 
-    it('should format kilobytes', () => {
-      expect(formatFileSize(1024)).toBe('1 KB');
-      expect(formatFileSize(2048)).toBe('2 KB');
+    it("should format kilobytes", () => {
+      expect(formatFileSize(1024)).toBe("1 KB");
+      expect(formatFileSize(2048)).toBe("2 KB");
     });
 
-    it('should format megabytes', () => {
-      expect(formatFileSize(1024 * 1024)).toBe('1 MB');
-      expect(formatFileSize(5 * 1024 * 1024)).toBe('5 MB');
+    it("should format megabytes", () => {
+      expect(formatFileSize(1024 * 1024)).toBe("1 MB");
+      expect(formatFileSize(5 * 1024 * 1024)).toBe("5 MB");
     });
 
-    it('should format gigabytes', () => {
-      expect(formatFileSize(1024 * 1024 * 1024)).toBe('1 GB');
+    it("should format gigabytes", () => {
+      expect(formatFileSize(1024 * 1024 * 1024)).toBe("1 GB");
     });
   });
 });
diff --git a/frontend/src/core/utils/fileUtils.ts b/frontend/src/core/utils/fileUtils.ts
index ed76f6060c..5bce094293 100644
--- a/frontend/src/core/utils/fileUtils.ts
+++ b/frontend/src/core/utils/fileUtils.ts
@@ -4,11 +4,11 @@
  * Consolidated file size formatting utility
  */
 export function formatFileSize(bytes: number): string {
-  if (bytes === 0) return '0 B';
+  if (bytes === 0) return "0 B";
   const k = 1024;
-  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const sizes = ["B", "KB", "MB", "GB"];
   const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
 }
 
 /**
@@ -29,25 +29,23 @@ export function getFileSize(file: File | { size: number }): string {
   return formatFileSize(file.size);
 }
 
-
-
 /**
  * Detects and normalizes file extension from filename
  * @param filename - The filename to extract extension from
  * @returns Normalized file extension in lowercase, empty string if no extension
  */
 export function detectFileExtension(filename: string): string {
-  if (!filename || typeof filename !== 'string') return '';
+  if (!filename || typeof filename !== "string") return "";
 
-  const parts = filename.split('.');
+  const parts = filename.split(".");
   // If there's no extension (no dots or only one part), return empty string
-  if (parts.length <= 1) return '';
+  if (parts.length <= 1) return "";
 
   // Get the last part (extension) in lowercase
   let extension = parts[parts.length - 1].toLowerCase();
 
   // Normalize common extension variants
-  if (extension === 'jpeg') extension = 'jpg';
+  if (extension === "jpeg") extension = "jpg";
 
   return extension;
 }
@@ -63,14 +61,11 @@ export function detectFileExtension(filename: string): string {
  * getFilenameWithoutExtension('my.file.name.txt') // 'my.file.name'
  * getFilenameWithoutExtension('REPORT.PDF', { preserveCase: true }) // 'REPORT'
  */
-export function getFilenameWithoutExtension(
-  filename: string,
-  options: { preserveCase?: boolean } = {}
-): string {
-  if (!filename || typeof filename !== 'string') return '';
+export function getFilenameWithoutExtension(filename: string, options: { preserveCase?: boolean } = {}): string {
+  if (!filename || typeof filename !== "string") return "";
 
   const { preserveCase = false } = options;
-  const withoutExtension = filename.replace(/\.[^.]+$/, '');
+  const withoutExtension = filename.replace(/\.[^.]+$/, "");
 
   return preserveCase ? withoutExtension : withoutExtension.toLowerCase();
 }
@@ -83,59 +78,58 @@ export function getFilenameWithoutExtension(
 export function isPdfFile(file: { name?: string; type?: string } | File | Blob | null | undefined): boolean {
   if (!file) return false;
 
-  const name = 'name' in file ? file.name : undefined;
+  const name = "name" in file ? file.name : undefined;
   const type = file.type;
 
   // Check MIME type first (most reliable)
-  if (type === 'application/pdf') return true;
+  if (type === "application/pdf") return true;
 
   // Check file extension as fallback
   if (name) {
     const ext = detectFileExtension(name);
-    if (ext === 'pdf') return true;
+    if (ext === "pdf") return true;
   }
 
   return false;
 }
 
-export type NonPdfFileType = 'image' | 'csv' | 'json' | 'text' | 'markdown' | 'html' | 'unknown';
+export type NonPdfFileType = "image" | "csv" | "json" | "text" | "markdown" | "html" | "unknown";
 
-const IMAGE_EXTENSIONS = new Set(['png', 'jpg', 'jpeg', 'gif', 'bmp', 'svg', 'tiff', 'tif', 'webp']);
-const CSV_EXTENSIONS = new Set(['csv', 'tsv']);
-const JSON_EXTENSIONS = new Set(['json']);
-const TEXT_EXTENSIONS = new Set(['txt']);
-const MARKDOWN_EXTENSIONS = new Set(['md', 'markdown']);
-const HTML_EXTENSIONS = new Set(['html', 'htm']);
+const IMAGE_EXTENSIONS = new Set(["png", "jpg", "jpeg", "gif", "bmp", "svg", "tiff", "tif", "webp"]);
+const CSV_EXTENSIONS = new Set(["csv", "tsv"]);
+const JSON_EXTENSIONS = new Set(["json"]);
+const TEXT_EXTENSIONS = new Set(["txt"]);
+const MARKDOWN_EXTENSIONS = new Set(["md", "markdown"]);
+const HTML_EXTENSIONS = new Set(["html", "htm"]);
 
 /**
  * Detects the non-PDF file type category for viewer routing.
  * Returns 'unknown' for PDFs or unrecognized formats.
  */
 export function detectNonPdfFileType(file: { name?: string; type?: string } | File | null | undefined): NonPdfFileType {
-  if (!file) return 'unknown';
+  if (!file) return "unknown";
 
-  const name = 'name' in file ? file.name : undefined;
-  const mimeType = file.type ?? '';
+  const name = "name" in file ? file.name : undefined;
+  const mimeType = file.type ?? "";
 
   // Check MIME type first
-  if (mimeType.startsWith('image/')) return 'image';
-  if (mimeType === 'text/csv') return 'csv';
-  if (mimeType === 'text/tab-separated-values') return 'csv';
-  if (mimeType === 'application/json') return 'json';
-  if (mimeType === 'text/html') return 'html';
-  if (mimeType === 'text/markdown') return 'markdown';
+  if (mimeType.startsWith("image/")) return "image";
+  if (mimeType === "text/csv") return "csv";
+  if (mimeType === "text/tab-separated-values") return "csv";
+  if (mimeType === "application/json") return "json";
+  if (mimeType === "text/html") return "html";
+  if (mimeType === "text/markdown") return "markdown";
 
   // Fall back to extension
   if (name) {
     const ext = detectFileExtension(name);
-    if (IMAGE_EXTENSIONS.has(ext)) return 'image';
-    if (CSV_EXTENSIONS.has(ext)) return 'csv';
-    if (JSON_EXTENSIONS.has(ext)) return 'json';
-    if (MARKDOWN_EXTENSIONS.has(ext)) return 'markdown';
-    if (TEXT_EXTENSIONS.has(ext)) return 'text';
-    if (HTML_EXTENSIONS.has(ext)) return 'html';
+    if (IMAGE_EXTENSIONS.has(ext)) return "image";
+    if (CSV_EXTENSIONS.has(ext)) return "csv";
+    if (JSON_EXTENSIONS.has(ext)) return "json";
+    if (MARKDOWN_EXTENSIONS.has(ext)) return "markdown";
+    if (TEXT_EXTENSIONS.has(ext)) return "text";
+    if (HTML_EXTENSIONS.has(ext)) return "html";
   }
 
-  return 'unknown';
+  return "unknown";
 }
-
diff --git a/frontend/src/core/utils/fuzzySearch.ts b/frontend/src/core/utils/fuzzySearch.ts
index e8e8bdf01b..7b0db60838 100644
--- a/frontend/src/core/utils/fuzzySearch.ts
+++ b/frontend/src/core/utils/fuzzySearch.ts
@@ -4,8 +4,8 @@
 function normalizeText(text: string): string {
   return text
     .toLowerCase()
-    .normalize('NFD')
-    .replace(/\p{Diacritic}+/gu, '')
+    .normalize("NFD")
+    .replace(/\p{Diacritic}+/gu, "")
     .trim();
 }
 
@@ -30,7 +30,7 @@ function levenshtein(a: string, b: string): number {
       curr[j] = Math.min(
         prev[j] + 1, // deletion
         curr[j - 1] + 1, // insertion
-        prev[j - 1] + cost // substitution
+        prev[j - 1] + cost, // substitution
       );
     }
     for (let j = 0; j <= bLen; j++) prev[j] = curr[j];
@@ -56,7 +56,8 @@ export function scoreMatch(queryRaw: string, targetRaw: string): number {
     if (token.includes(query)) {
       // Only give high score if the match is substantial (not just "and" matching)
       const similarity = query.length / Math.max(query.length, token.length);
-      if (similarity >= 0.6) { // Require at least 60% similarity
+      if (similarity >= 0.6) {
+        // Require at least 60% similarity
         return 80 - Math.abs(token.length - query.length);
       }
     }
@@ -70,24 +71,29 @@ export function scoreMatch(queryRaw: string, targetRaw: string): number {
 
 export function minScoreForQuery(query: string): number {
   const len = normalizeText(query).length;
-  if (len <= 3) return 40; 
-  if (len <= 6) return 30; 
-  return 25; 
+  if (len <= 3) return 40;
+  if (len <= 6) return 30;
+  return 25;
 }
 
 // Decide if a target matches a query based on a threshold
 export function isFuzzyMatch(query: string, target: string, minScore?: number): boolean {
-  const threshold = typeof minScore === 'number' ? minScore : minScoreForQuery(query);
+  const threshold = typeof minScore === "number" ? minScore : minScoreForQuery(query);
   return scoreMatch(query, target) >= threshold;
 }
 
 // Convenience: rank a list of items by best score across provided getters
-export function rankByFuzzy<T>(items: T[], query: string, getters: Array<(item: T) => string>, minScore?: number): Array<{ item: T; score: number; matchedText?: string }>{
+export function rankByFuzzy<T>(
+  items: T[],
+  query: string,
+  getters: Array<(item: T) => string>,
+  minScore?: number,
+): Array<{ item: T; score: number; matchedText?: string }> {
   const results: Array<{ item: T; score: number; matchedText?: string }> = [];
-  const threshold = typeof minScore === 'number' ? minScore : minScoreForQuery(query);
+  const threshold = typeof minScore === "number" ? minScore : minScoreForQuery(query);
   for (const item of items) {
     let best = 0;
-    let matchedText = '';
+    let matchedText = "";
     for (const get of getters) {
       const value = get(item);
       if (!value) continue;
@@ -112,10 +118,6 @@ export function normalizeForSearch(text: string): string {
 
 // Convert ids like "addPassword", "add-password", "add_password" to words for matching
 export function idToWords(id: string): string {
-  const spaced = id
-    .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
-    .replace(/[._-]+/g, ' ');
+  const spaced = id.replace(/([a-z0-9])([A-Z])/g, "$1 $2").replace(/[._-]+/g, " ");
   return normalizeText(spaced);
 }
-
-
diff --git a/frontend/src/core/utils/genericUtils.ts b/frontend/src/core/utils/genericUtils.ts
index 2533462922..6d69cf19e4 100644
--- a/frontend/src/core/utils/genericUtils.ts
+++ b/frontend/src/core/utils/genericUtils.ts
@@ -25,7 +25,7 @@ export function addEventListenerWithCleanup(
   target: EventTarget,
   event: string,
   handler: EventListener,
-  options?: boolean | AddEventListenerOptions
+  options?: boolean | AddEventListenerOptions,
 ): () => void {
   target.addEventListener(event, handler, options);
   return () => target.removeEventListener(event, handler, options);
diff --git a/frontend/src/core/utils/homePageNavigation.test.ts b/frontend/src/core/utils/homePageNavigation.test.ts
index 14b107aa3a..9e4d103c77 100644
--- a/frontend/src/core/utils/homePageNavigation.test.ts
+++ b/frontend/src/core/utils/homePageNavigation.test.ts
@@ -1,77 +1,77 @@
-import { describe, expect, it } from 'vitest';
-import { getStartupNavigationAction } from '@app/utils/homePageNavigation';
-import type { WorkbenchType } from '@app/types/workbench';
+import { describe, expect, it } from "vitest";
+import { getStartupNavigationAction } from "@app/utils/homePageNavigation";
+import type { WorkbenchType } from "@app/types/workbench";
 
-describe('getStartupNavigationAction', () => {
-  it('returns viewer + active index for 0->1 transition when not in fileEditor', () => {
-    expect(getStartupNavigationAction(0, 1, null, 'viewer' as WorkbenchType)).toEqual({
-      workbench: 'viewer',
+describe("getStartupNavigationAction", () => {
+  it("returns viewer + active index for 0->1 transition when not in fileEditor", () => {
+    expect(getStartupNavigationAction(0, 1, null, "viewer" as WorkbenchType)).toEqual({
+      workbench: "viewer",
       activeFileIndex: 0,
     });
-    expect(getStartupNavigationAction(0, 1, null, 'pageEditor' as WorkbenchType)).toEqual({
-      workbench: 'viewer',
+    expect(getStartupNavigationAction(0, 1, null, "pageEditor" as WorkbenchType)).toEqual({
+      workbench: "viewer",
       activeFileIndex: 0,
     });
   });
 
-  it('returns fileEditor for 0->2+ transition when not in fileEditor', () => {
-    expect(getStartupNavigationAction(0, 2, null, 'viewer' as WorkbenchType)).toEqual({
-      workbench: 'fileEditor',
+  it("returns fileEditor for 0->2+ transition when not in fileEditor", () => {
+    expect(getStartupNavigationAction(0, 2, null, "viewer" as WorkbenchType)).toEqual({
+      workbench: "fileEditor",
     });
   });
 
-  it('does not force navigation for pdfTextEditor', () => {
-    expect(getStartupNavigationAction(0, 1, 'pdfTextEditor', 'viewer' as WorkbenchType)).toBeNull();
-    expect(getStartupNavigationAction(0, 3, 'pdfTextEditor', 'viewer' as WorkbenchType)).toBeNull();
+  it("does not force navigation for pdfTextEditor", () => {
+    expect(getStartupNavigationAction(0, 1, "pdfTextEditor", "viewer" as WorkbenchType)).toBeNull();
+    expect(getStartupNavigationAction(0, 3, "pdfTextEditor", "viewer" as WorkbenchType)).toBeNull();
   });
 
-  it('does not navigate when file count decreases', () => {
-    expect(getStartupNavigationAction(2, 1, null, 'viewer' as WorkbenchType)).toBeNull();
-    expect(getStartupNavigationAction(3, 1, null, 'fileEditor' as WorkbenchType)).toBeNull();
+  it("does not navigate when file count decreases", () => {
+    expect(getStartupNavigationAction(2, 1, null, "viewer" as WorkbenchType)).toBeNull();
+    expect(getStartupNavigationAction(3, 1, null, "fileEditor" as WorkbenchType)).toBeNull();
   });
 
-  it('navigates to last file when already in viewer and files are added', () => {
-    expect(getStartupNavigationAction(1, 2, null, 'viewer' as WorkbenchType)).toEqual({
-      workbench: 'viewer',
+  it("navigates to last file when already in viewer and files are added", () => {
+    expect(getStartupNavigationAction(1, 2, null, "viewer" as WorkbenchType)).toEqual({
+      workbench: "viewer",
       activeFileIndex: 1,
     });
-    expect(getStartupNavigationAction(3, 5, null, 'viewer' as WorkbenchType)).toEqual({
-      workbench: 'viewer',
+    expect(getStartupNavigationAction(3, 5, null, "viewer" as WorkbenchType)).toEqual({
+      workbench: "viewer",
       activeFileIndex: 4,
     });
   });
 
-  it('does not navigate when adding files in non-viewer workbenches', () => {
-    expect(getStartupNavigationAction(1, 2, null, 'fileEditor' as WorkbenchType)).toBeNull();
-    expect(getStartupNavigationAction(3, 4, null, 'fileEditor' as WorkbenchType)).toBeNull();
-    expect(getStartupNavigationAction(1, 3, null, 'pageEditor' as WorkbenchType)).toBeNull();
+  it("does not navigate when adding files in non-viewer workbenches", () => {
+    expect(getStartupNavigationAction(1, 2, null, "fileEditor" as WorkbenchType)).toBeNull();
+    expect(getStartupNavigationAction(3, 4, null, "fileEditor" as WorkbenchType)).toBeNull();
+    expect(getStartupNavigationAction(1, 3, null, "pageEditor" as WorkbenchType)).toBeNull();
   });
 
-  it('handles all workbench types consistently for 0→N transitions', () => {
+  it("handles all workbench types consistently for 0→N transitions", () => {
     // 0→1 always goes to viewer regardless of current workbench (since default is viewer)
-    expect(getStartupNavigationAction(0, 1, null, 'viewer' as WorkbenchType)).toEqual({
-      workbench: 'viewer',
+    expect(getStartupNavigationAction(0, 1, null, "viewer" as WorkbenchType)).toEqual({
+      workbench: "viewer",
       activeFileIndex: 0,
     });
-    expect(getStartupNavigationAction(0, 1, null, 'fileEditor' as WorkbenchType)).toEqual({
-      workbench: 'viewer',
+    expect(getStartupNavigationAction(0, 1, null, "fileEditor" as WorkbenchType)).toEqual({
+      workbench: "viewer",
       activeFileIndex: 0,
     });
-    expect(getStartupNavigationAction(0, 1, null, 'pageEditor' as WorkbenchType)).toEqual({
-      workbench: 'viewer',
+    expect(getStartupNavigationAction(0, 1, null, "pageEditor" as WorkbenchType)).toEqual({
+      workbench: "viewer",
       activeFileIndex: 0,
     });
-    expect(getStartupNavigationAction(0, 1, null, 'custom:formFill' as WorkbenchType)).toEqual({
-      workbench: 'viewer',
+    expect(getStartupNavigationAction(0, 1, null, "custom:formFill" as WorkbenchType)).toEqual({
+      workbench: "viewer",
       activeFileIndex: 0,
     });
 
     // 0→N (N>1) always goes to fileEditor
-    expect(getStartupNavigationAction(0, 3, null, 'viewer' as WorkbenchType)).toEqual({
-      workbench: 'fileEditor',
+    expect(getStartupNavigationAction(0, 3, null, "viewer" as WorkbenchType)).toEqual({
+      workbench: "fileEditor",
     });
-    expect(getStartupNavigationAction(0, 3, null, 'custom:myTool' as WorkbenchType)).toEqual({
-      workbench: 'fileEditor',
+    expect(getStartupNavigationAction(0, 3, null, "custom:myTool" as WorkbenchType)).toEqual({
+      workbench: "fileEditor",
     });
   });
 });
diff --git a/frontend/src/core/utils/homePageNavigation.ts b/frontend/src/core/utils/homePageNavigation.ts
index cb3461e076..299806aa68 100644
--- a/frontend/src/core/utils/homePageNavigation.ts
+++ b/frontend/src/core/utils/homePageNavigation.ts
@@ -1,6 +1,6 @@
-import type { WorkbenchType } from '@app/types/workbench';
+import type { WorkbenchType } from "@app/types/workbench";
 
-export type StartupWorkbench = 'viewer' | 'fileEditor';
+export type StartupWorkbench = "viewer" | "fileEditor";
 
 export interface StartupNavigationAction {
   workbench: StartupWorkbench;
@@ -11,25 +11,25 @@ export function getStartupNavigationAction(
   previousFileCount: number,
   currentFileCount: number,
   selectedToolKey: string | null,
-  currentWorkbench: WorkbenchType
+  currentWorkbench: WorkbenchType,
 ): StartupNavigationAction | null {
   // pdfTextEditor handles its own empty state
-  if (selectedToolKey === 'pdfTextEditor') {
+  if (selectedToolKey === "pdfTextEditor") {
     return null;
   }
 
   // Already actively viewing in the viewer → update to the latest file
-  if (previousFileCount > 0 && currentWorkbench === 'viewer' && currentFileCount > previousFileCount) {
-    return { workbench: 'viewer', activeFileIndex: currentFileCount - 1 };
+  if (previousFileCount > 0 && currentWorkbench === "viewer" && currentFileCount > previousFileCount) {
+    return { workbench: "viewer", activeFileIndex: currentFileCount - 1 };
   }
 
   // From landing page (no prior files)
   if (previousFileCount === 0) {
     if (currentFileCount === 1) {
-      return { workbench: 'viewer', activeFileIndex: 0 };
+      return { workbench: "viewer", activeFileIndex: 0 };
     }
     if (currentFileCount > 1) {
-      return { workbench: 'fileEditor' };
+      return { workbench: "fileEditor" };
     }
   }
 
diff --git a/frontend/src/core/utils/hotkeys.ts b/frontend/src/core/utils/hotkeys.ts
index aa3f98879c..b55627a5a0 100644
--- a/frontend/src/core/utils/hotkeys.ts
+++ b/frontend/src/core/utils/hotkeys.ts
@@ -1,4 +1,4 @@
-import { KeyboardEvent as ReactKeyboardEvent } from 'react';
+import { KeyboardEvent as ReactKeyboardEvent } from "react";
 
 export interface HotkeyBinding {
   code: string;
@@ -9,49 +9,49 @@ export interface HotkeyBinding {
 }
 
 const MODIFIER_CODES = new Set([
-  'ShiftLeft',
-  'ShiftRight',
-  'ControlLeft',
-  'ControlRight',
-  'AltLeft',
-  'AltRight',
-  'MetaLeft',
-  'MetaRight',
+  "ShiftLeft",
+  "ShiftRight",
+  "ControlLeft",
+  "ControlRight",
+  "AltLeft",
+  "AltRight",
+  "MetaLeft",
+  "MetaRight",
 ]);
 
 const CODE_LABEL_MAP: Record<string, string> = {
-  Minus: '-',
-  Equal: '=',
-  Backquote: '`',
-  BracketLeft: '[',
-  BracketRight: ']',
-  Backslash: '\\',
-  IntlBackslash: '\\',
-  Semicolon: ';',
-  Quote: '\'',
-  Comma: ',',
-  Period: '.',
-  Slash: '/',
-  Space: 'Space',
-  Tab: 'Tab',
-  Escape: 'Esc',
-  Enter: 'Enter',
-  NumpadEnter: 'Num Enter',
-  NumpadAdd: 'Num +',
-  NumpadSubtract: 'Num -',
-  NumpadMultiply: 'Num *',
-  NumpadDivide: 'Num /',
-  NumpadDecimal: 'Num .',
-  NumpadComma: 'Num ,',
-  NumpadEqual: 'Num =',
+  Minus: "-",
+  Equal: "=",
+  Backquote: "`",
+  BracketLeft: "[",
+  BracketRight: "]",
+  Backslash: "\\",
+  IntlBackslash: "\\",
+  Semicolon: ";",
+  Quote: "'",
+  Comma: ",",
+  Period: ".",
+  Slash: "/",
+  Space: "Space",
+  Tab: "Tab",
+  Escape: "Esc",
+  Enter: "Enter",
+  NumpadEnter: "Num Enter",
+  NumpadAdd: "Num +",
+  NumpadSubtract: "Num -",
+  NumpadMultiply: "Num *",
+  NumpadDivide: "Num /",
+  NumpadDecimal: "Num .",
+  NumpadComma: "Num ,",
+  NumpadEqual: "Num =",
 };
 
 export const isMacLike = (): boolean => {
-  if (typeof navigator === 'undefined') {
+  if (typeof navigator === "undefined") {
     return false;
   }
-  const platform = navigator.platform?.toLowerCase() ?? '';
-  const userAgent = navigator.userAgent?.toLowerCase() ?? '';
+  const platform = navigator.platform?.toLowerCase() ?? "";
+  const userAgent = navigator.userAgent?.toLowerCase() ?? "";
   return /mac|iphone|ipad|ipod/.test(platform) || /mac|iphone|ipad|ipod/.test(userAgent);
 };
 
@@ -108,15 +108,15 @@ const getKeyLabel = (code: string): string => {
     return CODE_LABEL_MAP[code];
   }
 
-  if (code.startsWith('Key')) {
+  if (code.startsWith("Key")) {
     return code.slice(3);
   }
 
-  if (code.startsWith('Digit')) {
+  if (code.startsWith("Digit")) {
     return code.slice(5);
   }
 
-  if (code.startsWith('Numpad')) {
+  if (code.startsWith("Numpad")) {
     const remainder = code.slice(6);
     if (/^[0-9]$/.test(remainder)) {
       return `Num ${remainder}`;
@@ -130,14 +130,14 @@ const getKeyLabel = (code: string): string => {
   }
 
   switch (code) {
-    case 'ArrowUp':
-      return '↑';
-    case 'ArrowDown':
-      return '↓';
-    case 'ArrowLeft':
-      return '←';
-    case 'ArrowRight':
-      return '→';
+    case "ArrowUp":
+      return "↑";
+    case "ArrowDown":
+      return "↓";
+    case "ArrowLeft":
+      return "←";
+    case "ArrowRight":
+      return "→";
     default:
       return code;
   }
@@ -147,16 +147,16 @@ export const getDisplayParts = (binding: HotkeyBinding | null | undefined, macLi
   if (!binding) return [];
   const parts: string[] = [];
   if (binding.meta) {
-    parts.push(macLike ? '⌘' : 'Win');
+    parts.push(macLike ? "⌘" : "Win");
   }
   if (binding.ctrl) {
-    parts.push(macLike ? '⌃' : 'Ctrl');
+    parts.push(macLike ? "⌃" : "Ctrl");
   }
   if (binding.alt) {
-    parts.push(macLike ? '⌥' : 'Alt');
+    parts.push(macLike ? "⌥" : "Alt");
   }
   if (binding.shift) {
-    parts.push(macLike ? '⇧' : 'Shift');
+    parts.push(macLike ? "⇧" : "Shift");
   }
   parts.push(getKeyLabel(binding.code));
   return parts;
@@ -172,12 +172,12 @@ export const deserializeBindings = (value: string | null | undefined): Record<st
   }
   try {
     const parsed = JSON.parse(value) as Record<string, HotkeyBinding>;
-    if (typeof parsed !== 'object' || parsed === null) {
+    if (typeof parsed !== "object" || parsed === null) {
       return {};
     }
     return parsed;
   } catch (error) {
-    console.warn('Failed to parse stored hotkey bindings', error);
+    console.warn("Failed to parse stored hotkey bindings", error);
     return {};
   }
 };
@@ -188,4 +188,4 @@ export const normalizeBinding = (binding: HotkeyBinding): HotkeyBinding => ({
   ctrl: Boolean(binding.ctrl),
   meta: Boolean(binding.meta),
   shift: Boolean(binding.shift),
-});
\ No newline at end of file
+});
diff --git a/frontend/src/core/utils/imageToPdfUtils.ts b/frontend/src/core/utils/imageToPdfUtils.ts
index b52106e2b6..758ef6ec98 100644
--- a/frontend/src/core/utils/imageToPdfUtils.ts
+++ b/frontend/src/core/utils/imageToPdfUtils.ts
@@ -1,33 +1,23 @@
-import {
-  getPdfiumModule,
-  saveRawDocument,
-} from '@app/services/pdfiumService';
-import { copyRgbaToBgraHeap } from '@app/utils/pdfiumBitmapUtils';
+import { getPdfiumModule, saveRawDocument } from "@app/services/pdfiumService";
+import { copyRgbaToBgraHeap } from "@app/utils/pdfiumBitmapUtils";
 
 export interface ImageToPdfOptions {
-  imageResolution?: 'full' | 'reduced';
-  pageFormat?: 'keep' | 'A4' | 'letter';
+  imageResolution?: "full" | "reduced";
+  pageFormat?: "keep" | "A4" | "letter";
   stretchToFit?: boolean;
 }
 
 // Standard page sizes in PDF points (72 dpi)
 const PAGE_SIZES = {
-  A4: [595.276, 841.890] as [number, number],
+  A4: [595.276, 841.89] as [number, number],
   Letter: [612, 792] as [number, number],
 };
 
 /**
  * Convert an image file to a PDF file using PDFium WASM.
  */
-export async function convertImageToPdf(
-  imageFile: File,
-  options: ImageToPdfOptions = {}
-): Promise<File> {
-  const {
-    imageResolution = 'full',
-    pageFormat = 'A4',
-    stretchToFit = false,
-  } = options;
+export async function convertImageToPdf(imageFile: File, options: ImageToPdfOptions = {}): Promise<File> {
+  const { imageResolution = "full", pageFormat = "A4", stretchToFit = false } = options;
 
   try {
     const m = await getPdfiumModule();
@@ -36,14 +26,14 @@ export async function convertImageToPdf(
     let imageBlob: Blob = imageFile;
 
     // Apply image resolution reduction if requested
-    if (imageResolution === 'reduced') {
+    if (imageResolution === "reduced") {
       imageBlob = await reduceImageResolution(imageFile, 1200);
     }
 
     // Decode image to RGBA pixels via canvas
     const decoded = await decodeImageToRgba(imageBlob);
     if (!decoded) {
-      throw new Error('Failed to decode image');
+      throw new Error("Failed to decode image");
     }
 
     const { rgba, width: imageWidth, height: imageHeight } = decoded;
@@ -52,17 +42,17 @@ export async function convertImageToPdf(
     let pageWidth: number;
     let pageHeight: number;
 
-    if (pageFormat === 'keep') {
+    if (pageFormat === "keep") {
       pageWidth = imageWidth;
       pageHeight = imageHeight;
-    } else if (pageFormat === 'letter') {
+    } else if (pageFormat === "letter") {
       [pageWidth, pageHeight] = PAGE_SIZES.Letter;
     } else {
       [pageWidth, pageHeight] = PAGE_SIZES.A4;
     }
 
     // Adjust orientation to match image
-    if (pageFormat !== 'keep') {
+    if (pageFormat !== "keep") {
       const imageIsLandscape = imageWidth > imageHeight;
       const pageIsLandscape = pageWidth > pageHeight;
       if (imageIsLandscape !== pageIsLandscape) {
@@ -76,7 +66,7 @@ export async function convertImageToPdf(
     let drawWidth: number;
     let drawHeight: number;
 
-    if (stretchToFit || pageFormat === 'keep') {
+    if (stretchToFit || pageFormat === "keep") {
       drawX = 0;
       drawY = 0;
       drawWidth = pageWidth;
@@ -100,16 +90,16 @@ export async function convertImageToPdf(
 
     // Create new PDF document
     const docPtr = m.FPDF_CreateNewDocument();
-    if (!docPtr) throw new Error('PDFium: failed to create document');
+    if (!docPtr) throw new Error("PDFium: failed to create document");
 
     try {
       // Create a page
       const pagePtr = m.FPDFPage_New(docPtr, 0, pageWidth, pageHeight);
-      if (!pagePtr) throw new Error('PDFium: failed to create page');
+      if (!pagePtr) throw new Error("PDFium: failed to create page");
 
       // Create bitmap from RGBA data (PDFium uses BGRA)
       const bitmapPtr = m.FPDFBitmap_Create(imageWidth, imageHeight, 1);
-      if (!bitmapPtr) throw new Error('PDFium: failed to create bitmap');
+      if (!bitmapPtr) throw new Error("PDFium: failed to create bitmap");
 
       const bufferPtr = m.FPDFBitmap_GetBuffer(bitmapPtr);
       const stride = m.FPDFBitmap_GetStride(bitmapPtr);
@@ -121,7 +111,7 @@ export async function convertImageToPdf(
       const imageObjPtr = m.FPDFPageObj_NewImageObj(docPtr);
       if (!imageObjPtr) {
         m.FPDFBitmap_Destroy(bitmapPtr);
-        throw new Error('PDFium: failed to create image object');
+        throw new Error("PDFium: failed to create image object");
       }
 
       const setBitmapOk = m.FPDFImageObj_SetBitmap(pagePtr, 0, imageObjPtr, bitmapPtr);
@@ -129,25 +119,25 @@ export async function convertImageToPdf(
 
       if (!setBitmapOk) {
         m.FPDFPageObj_Destroy(imageObjPtr);
-        throw new Error('PDFium: failed to set bitmap on image object');
+        throw new Error("PDFium: failed to set bitmap on image object");
       }
 
       // Set transformation matrix: scale + translate
       // FS_MATRIX: {a, b, c, d, e, f} — 6 floats
       const matrixPtr = m.pdfium.wasmExports.malloc(6 * 4);
-      m.pdfium.setValue(matrixPtr, drawWidth, 'float');       // a = scaleX
-      m.pdfium.setValue(matrixPtr + 4, 0, 'float');           // b
-      m.pdfium.setValue(matrixPtr + 8, 0, 'float');           // c
-      m.pdfium.setValue(matrixPtr + 12, drawHeight, 'float'); // d = scaleY
-      m.pdfium.setValue(matrixPtr + 16, drawX, 'float');      // e = translateX
-      m.pdfium.setValue(matrixPtr + 20, drawY, 'float');      // f = translateY
+      m.pdfium.setValue(matrixPtr, drawWidth, "float"); // a = scaleX
+      m.pdfium.setValue(matrixPtr + 4, 0, "float"); // b
+      m.pdfium.setValue(matrixPtr + 8, 0, "float"); // c
+      m.pdfium.setValue(matrixPtr + 12, drawHeight, "float"); // d = scaleY
+      m.pdfium.setValue(matrixPtr + 16, drawX, "float"); // e = translateX
+      m.pdfium.setValue(matrixPtr + 20, drawY, "float"); // f = translateY
 
       const setMatrixOk = m.FPDFPageObj_SetMatrix(imageObjPtr, matrixPtr);
       m.pdfium.wasmExports.free(matrixPtr);
 
       if (!setMatrixOk) {
         m.FPDFPageObj_Destroy(imageObjPtr);
-        throw new Error('PDFium: failed to set image matrix');
+        throw new Error("PDFium: failed to set image matrix");
       }
 
       // Insert image into page
@@ -159,18 +149,17 @@ export async function convertImageToPdf(
 
       // Save document
       const pdfBytes = await saveRawDocument(docPtr);
-      const pdfFilename = imageFile.name.replace(/\.[^.]+$/, '.pdf');
+      const pdfFilename = imageFile.name.replace(/\.[^.]+$/, ".pdf");
 
-      return new File([pdfBytes], pdfFilename, { type: 'application/pdf' });
+      return new File([pdfBytes], pdfFilename, { type: "application/pdf" });
     } finally {
       m.FPDF_CloseDocument(docPtr);
     }
   } catch (error) {
-    console.error('Error converting image to PDF:', error);
-    throw new Error(
-      `Failed to convert image to PDF: ${error instanceof Error ? error.message : 'Unknown error'}`,
-      { cause: error }
-    );
+    console.error("Error converting image to PDF:", error);
+    throw new Error(`Failed to convert image to PDF: ${error instanceof Error ? error.message : "Unknown error"}`, {
+      cause: error,
+    });
   }
 }
 
@@ -184,10 +173,10 @@ function decodeImageToRgba(imageBlob: Blob): Promise<{ rgba: Uint8Array; width:
 
     img.onload = () => {
       try {
-        const canvas = document.createElement('canvas');
+        const canvas = document.createElement("canvas");
         canvas.width = img.width;
         canvas.height = img.height;
-        const ctx = canvas.getContext('2d');
+        const ctx = canvas.getContext("2d");
         if (!ctx) {
           URL.revokeObjectURL(url);
           resolve(null);
@@ -219,10 +208,7 @@ function decodeImageToRgba(imageBlob: Blob): Promise<{ rgba: Uint8Array; width:
 /**
  * Reduce image resolution to a maximum dimension
  */
-async function reduceImageResolution(
-  imageFile: File,
-  maxDimension: number
-): Promise<File> {
+async function reduceImageResolution(imageFile: File, maxDimension: number): Promise<File> {
   return new Promise((resolve, reject) => {
     const img = new Image();
     const url = URL.createObjectURL(imageFile);
@@ -248,22 +234,20 @@ async function reduceImageResolution(
           newWidth = (width / height) * maxDimension;
         }
 
-        const canvas = document.createElement('canvas');
+        const canvas = document.createElement("canvas");
         canvas.width = newWidth;
         canvas.height = newHeight;
 
-        const ctx = canvas.getContext('2d');
-        if (!ctx) throw new Error('Failed to get canvas context');
+        const ctx = canvas.getContext("2d");
+        if (!ctx) throw new Error("Failed to get canvas context");
         ctx.drawImage(img, 0, 0, newWidth, newHeight);
 
-        const outputType = imageFile.type.startsWith('image/')
-          ? imageFile.type
-          : 'image/jpeg';
+        const outputType = imageFile.type.startsWith("image/") ? imageFile.type : "image/jpeg";
 
         canvas.toBlob(
           (blob) => {
             if (!blob) {
-              reject(new Error('Failed to convert canvas to blob'));
+              reject(new Error("Failed to convert canvas to blob"));
               return;
             }
             const reducedFile = new File([blob], imageFile.name, { type: outputType });
@@ -281,7 +265,7 @@ async function reduceImageResolution(
 
     img.onerror = () => {
       URL.revokeObjectURL(url);
-      reject(new Error('Failed to load image'));
+      reject(new Error("Failed to load image"));
     };
 
     img.src = url;
@@ -292,5 +276,5 @@ async function reduceImageResolution(
  * Check if a file is an image
  */
 export function isImageFile(file: File): boolean {
-  return file.type.startsWith('image/');
+  return file.type.startsWith("image/");
 }
diff --git a/frontend/src/core/utils/imageTransparency.ts b/frontend/src/core/utils/imageTransparency.ts
index aa62849e7f..393d1ec7fa 100644
--- a/frontend/src/core/utils/imageTransparency.ts
+++ b/frontend/src/core/utils/imageTransparency.ts
@@ -8,10 +8,7 @@ export interface TransparencyOptions {
 const DEFAULT_LOWER_BOUND = { r: 200, g: 200, b: 200 };
 const DEFAULT_UPPER_BOUND = { r: 255, g: 255, b: 255 }; // #FFFFFF
 
-export async function removeWhiteBackground(
-  imageFile: File | string,
-  options: TransparencyOptions = {}
-): Promise<string> {
+export async function removeWhiteBackground(imageFile: File | string, options: TransparencyOptions = {}): Promise<string> {
   return new Promise((resolve, reject) => {
     const img = new Image();
 
@@ -25,10 +22,10 @@ export async function removeWhiteBackground(
     };
 
     img.onerror = () => {
-      reject(new Error('Failed to load image'));
+      reject(new Error("Failed to load image"));
     };
 
-    if (typeof imageFile === 'string') {
+    if (typeof imageFile === "string") {
       img.src = imageFile;
     } else {
       const reader = new FileReader();
@@ -36,22 +33,19 @@ export async function removeWhiteBackground(
         img.src = e.target?.result as string;
       };
       reader.onerror = () => {
-        reject(new Error('Failed to read image file'));
+        reject(new Error("Failed to read image file"));
       };
       reader.readAsDataURL(imageFile);
     }
   });
 }
 
-function processImageTransparency(
-  img: HTMLImageElement,
-  options: TransparencyOptions
-): string {
-  const canvas = document.createElement('canvas');
-  const ctx = canvas.getContext('2d');
+function processImageTransparency(img: HTMLImageElement, options: TransparencyOptions): string {
+  const canvas = document.createElement("canvas");
+  const ctx = canvas.getContext("2d");
 
   if (!ctx) {
-    throw new Error('Failed to get canvas context');
+    throw new Error("Failed to get canvas context");
   }
 
   canvas.width = img.width;
@@ -71,12 +65,12 @@ function processImageTransparency(
     lowerBound = {
       r: Math.max(0, cornerColor.r - tolerance),
       g: Math.max(0, cornerColor.g - tolerance),
-      b: Math.max(0, cornerColor.b - tolerance)
+      b: Math.max(0, cornerColor.b - tolerance),
     };
     upperBound = {
       r: Math.min(255, cornerColor.r + tolerance),
       g: Math.min(255, cornerColor.g + tolerance),
-      b: Math.min(255, cornerColor.b + tolerance)
+      b: Math.min(255, cornerColor.b + tolerance),
     };
   }
 
@@ -86,9 +80,12 @@ function processImageTransparency(
     const b = data[i + 2];
 
     if (
-      r >= lowerBound.r && r <= upperBound.r &&
-      g >= lowerBound.g && g <= upperBound.g &&
-      b >= lowerBound.b && b <= upperBound.b
+      r >= lowerBound.r &&
+      r <= upperBound.r &&
+      g >= lowerBound.g &&
+      g <= upperBound.g &&
+      b >= lowerBound.b &&
+      b <= upperBound.b
     ) {
       data[i + 3] = 0;
     }
@@ -96,10 +93,9 @@ function processImageTransparency(
 
   ctx.putImageData(imageData, 0, 0);
 
-  return canvas.toDataURL('image/png');
+  return canvas.toDataURL("image/png");
 }
 
-
 function detectCornerColor(imageData: ImageData): { r: number; g: number; b: number } {
   const { width, height, data } = imageData;
 
@@ -108,13 +104,15 @@ function detectCornerColor(imageData: ImageData): { r: number; g: number; b: num
     { x: 0, y: 0 }, // top-left
     { x: width - sampleSize, y: 0 }, // top-right
     { x: 0, y: height - sampleSize }, // bottom-left
-    { x: width - sampleSize, y: height - sampleSize } // bottom-right
+    { x: width - sampleSize, y: height - sampleSize }, // bottom-right
   ];
 
-  let totalR = 0, totalG = 0, totalB = 0;
+  let totalR = 0,
+    totalG = 0,
+    totalB = 0;
   let samples = 0;
 
-  corners.forEach(corner => {
+  corners.forEach((corner) => {
     for (let dy = 0; dy < sampleSize; dy++) {
       for (let dx = 0; dx < sampleSize; dx++) {
         const x = Math.min(width - 1, Math.max(0, corner.x + dx));
@@ -132,6 +130,6 @@ function detectCornerColor(imageData: ImageData): { r: number; g: number; b: num
   return {
     r: Math.round(totalR / samples),
     g: Math.round(totalG / samples),
-    b: Math.round(totalB / samples)
+    b: Math.round(totalB / samples),
   };
 }
diff --git a/frontend/src/core/utils/languageMapping.ts b/frontend/src/core/utils/languageMapping.ts
index 8113202758..ac938dbac8 100644
--- a/frontend/src/core/utils/languageMapping.ts
+++ b/frontend/src/core/utils/languageMapping.ts
@@ -11,865 +11,865 @@ interface LanguageDefinition {
 const languageDefinitions: LanguageDefinition[] = [
   // English
   {
-    ocrCode: 'eng',
-    displayName: 'English',
-    browserCodes: ['en', 'en-GB', 'en-AU', 'en-CA', 'en-IE', 'en-NZ', 'en-ZA']
+    ocrCode: "eng",
+    displayName: "English",
+    browserCodes: ["en", "en-GB", "en-AU", "en-CA", "en-IE", "en-NZ", "en-ZA"],
   },
-  
+
   // Spanish
   {
-    ocrCode: 'spa',
-    displayName: 'Spanish',
-    browserCodes: ['es', 'es-ES', 'es-MX', 'es-AR', 'es-CO', 'es-CL', 'es-PE', 'es-VE']
+    ocrCode: "spa",
+    displayName: "Spanish",
+    browserCodes: ["es", "es-ES", "es-MX", "es-AR", "es-CO", "es-CL", "es-PE", "es-VE"],
   },
-  
+
   // French
   {
-    ocrCode: 'fra',
-    displayName: 'French',
-    browserCodes: ['fr', 'fr-FR', 'fr-CA', 'fr-BE', 'fr-CH']
+    ocrCode: "fra",
+    displayName: "French",
+    browserCodes: ["fr", "fr-FR", "fr-CA", "fr-BE", "fr-CH"],
   },
-  
+
   // German
   {
-    ocrCode: 'deu',
-    displayName: 'German',
-    browserCodes: ['de', 'de-DE', 'de-AT', 'de-CH']
+    ocrCode: "deu",
+    displayName: "German",
+    browserCodes: ["de", "de-DE", "de-AT", "de-CH"],
   },
-  
+
   // Portuguese
   {
-    ocrCode: 'por',
-    displayName: 'Portuguese',
-    browserCodes: ['pt', 'pt-PT', 'pt-BR']
+    ocrCode: "por",
+    displayName: "Portuguese",
+    browserCodes: ["pt", "pt-PT", "pt-BR"],
   },
-  
+
   // Italian
   {
-    ocrCode: 'ita',
-    displayName: 'Italian',
-    browserCodes: ['it', 'it-IT', 'it-CH']
+    ocrCode: "ita",
+    displayName: "Italian",
+    browserCodes: ["it", "it-IT", "it-CH"],
   },
-  
+
   // Chinese Simplified
   {
-    ocrCode: 'chi_sim',
-    displayName: 'Chinese (Simplified)',
-    browserCodes: ['zh', 'zh-CN', 'zh-Hans']
+    ocrCode: "chi_sim",
+    displayName: "Chinese (Simplified)",
+    browserCodes: ["zh", "zh-CN", "zh-Hans"],
   },
-  
+
   // Chinese Traditional
   {
-    ocrCode: 'chi_tra',
-    displayName: 'Chinese (Traditional)',
-    browserCodes: ['zh-TW', 'zh-HK', 'zh-Hant']
+    ocrCode: "chi_tra",
+    displayName: "Chinese (Traditional)",
+    browserCodes: ["zh-TW", "zh-HK", "zh-Hant"],
   },
-  
+
   // Tibetan
   {
-    ocrCode: 'bod',
-    displayName: 'Tibetan',
-    browserCodes: ['bo', 'zh-BO']
+    ocrCode: "bod",
+    displayName: "Tibetan",
+    browserCodes: ["bo", "zh-BO"],
   },
-  
+
   // Japanese
   {
-    ocrCode: 'jpn',
-    displayName: 'Japanese',
-    browserCodes: ['ja', 'ja-JP']
+    ocrCode: "jpn",
+    displayName: "Japanese",
+    browserCodes: ["ja", "ja-JP"],
   },
-  
+
   // Korean
   {
-    ocrCode: 'kor',
-    displayName: 'Korean',
-    browserCodes: ['ko', 'ko-KR']
+    ocrCode: "kor",
+    displayName: "Korean",
+    browserCodes: ["ko", "ko-KR"],
   },
-  
+
   // Russian
   {
-    ocrCode: 'rus',
-    displayName: 'Russian',
-    browserCodes: ['ru', 'ru-RU']
+    ocrCode: "rus",
+    displayName: "Russian",
+    browserCodes: ["ru", "ru-RU"],
   },
-  
+
   // Arabic
   {
-    ocrCode: 'ara',
-    displayName: 'Arabic',
-    browserCodes: ['ar', 'ar-SA', 'ar-EG', 'ar-AE', 'ar-MA']
+    ocrCode: "ara",
+    displayName: "Arabic",
+    browserCodes: ["ar", "ar-SA", "ar-EG", "ar-AE", "ar-MA"],
   },
-  
+
   // Dutch
   {
-    ocrCode: 'nld',
-    displayName: 'Dutch; Flemish',
-    browserCodes: ['nl', 'nl-NL', 'nl-BE']
+    ocrCode: "nld",
+    displayName: "Dutch; Flemish",
+    browserCodes: ["nl", "nl-NL", "nl-BE"],
   },
-  
+
   // Polish
   {
-    ocrCode: 'pol',
-    displayName: 'Polish',
-    browserCodes: ['pl', 'pl-PL']
+    ocrCode: "pol",
+    displayName: "Polish",
+    browserCodes: ["pl", "pl-PL"],
   },
-  
+
   // Czech
   {
-    ocrCode: 'ces',
-    displayName: 'Czech',
-    browserCodes: ['cs', 'cs-CZ']
+    ocrCode: "ces",
+    displayName: "Czech",
+    browserCodes: ["cs", "cs-CZ"],
   },
-  
+
   // Slovak
   {
-    ocrCode: 'slk',
-    displayName: 'Slovak',
-    browserCodes: ['sk', 'sk-SK']
+    ocrCode: "slk",
+    displayName: "Slovak",
+    browserCodes: ["sk", "sk-SK"],
   },
-  
+
   // Hungarian
   {
-    ocrCode: 'hun',
-    displayName: 'Hungarian',
-    browserCodes: ['hu', 'hu-HU']
+    ocrCode: "hun",
+    displayName: "Hungarian",
+    browserCodes: ["hu", "hu-HU"],
   },
-  
+
   // Romanian
   {
-    ocrCode: 'ron',
-    displayName: 'Romanian, Moldavian, Moldovan',
-    browserCodes: ['ro', 'ro-RO']
+    ocrCode: "ron",
+    displayName: "Romanian, Moldavian, Moldovan",
+    browserCodes: ["ro", "ro-RO"],
   },
-  
+
   // Bulgarian
   {
-    ocrCode: 'bul',
-    displayName: 'Bulgarian',
-    browserCodes: ['bg', 'bg-BG']
+    ocrCode: "bul",
+    displayName: "Bulgarian",
+    browserCodes: ["bg", "bg-BG"],
   },
-  
+
   // Croatian
   {
-    ocrCode: 'hrv',
-    displayName: 'Croatian',
-    browserCodes: ['hr', 'hr-HR']
+    ocrCode: "hrv",
+    displayName: "Croatian",
+    browserCodes: ["hr", "hr-HR"],
   },
-  
+
   // Serbian
   {
-    ocrCode: 'srp',
-    displayName: 'Serbian',
-    browserCodes: ['sr', 'sr-RS']
+    ocrCode: "srp",
+    displayName: "Serbian",
+    browserCodes: ["sr", "sr-RS"],
   },
-  
+
   // Serbian Latin
   {
-    ocrCode: 'srp_latn',
-    displayName: 'Serbian (Latin)',
-    browserCodes: ['sr-Latn']
+    ocrCode: "srp_latn",
+    displayName: "Serbian (Latin)",
+    browserCodes: ["sr-Latn"],
   },
-  
+
   // Slovenian
   {
-    ocrCode: 'slv',
-    displayName: 'Slovenian',
-    browserCodes: ['sl', 'sl-SI']
+    ocrCode: "slv",
+    displayName: "Slovenian",
+    browserCodes: ["sl", "sl-SI"],
   },
-  
+
   // Estonian
   {
-    ocrCode: 'est',
-    displayName: 'Estonian',
-    browserCodes: ['et', 'et-EE']
+    ocrCode: "est",
+    displayName: "Estonian",
+    browserCodes: ["et", "et-EE"],
   },
-  
+
   // Latvian
   {
-    ocrCode: 'lav',
-    displayName: 'Latvian',
-    browserCodes: ['lv', 'lv-LV']
+    ocrCode: "lav",
+    displayName: "Latvian",
+    browserCodes: ["lv", "lv-LV"],
   },
-  
+
   // Lithuanian
   {
-    ocrCode: 'lit',
-    displayName: 'Lithuanian',
-    browserCodes: ['lt', 'lt-LT']
+    ocrCode: "lit",
+    displayName: "Lithuanian",
+    browserCodes: ["lt", "lt-LT"],
   },
-  
+
   // Finnish
   {
-    ocrCode: 'fin',
-    displayName: 'Finnish',
-    browserCodes: ['fi', 'fi-FI']
+    ocrCode: "fin",
+    displayName: "Finnish",
+    browserCodes: ["fi", "fi-FI"],
   },
-  
+
   // Swedish
   {
-    ocrCode: 'swe',
-    displayName: 'Swedish',
-    browserCodes: ['sv', 'sv-SE']
+    ocrCode: "swe",
+    displayName: "Swedish",
+    browserCodes: ["sv", "sv-SE"],
   },
-  
+
   // Norwegian
   {
-    ocrCode: 'nor',
-    displayName: 'Norwegian',
-    browserCodes: ['no', 'nb', 'nn', 'no-NO', 'nb-NO', 'nn-NO']
+    ocrCode: "nor",
+    displayName: "Norwegian",
+    browserCodes: ["no", "nb", "nn", "no-NO", "nb-NO", "nn-NO"],
   },
-  
+
   // Danish
   {
-    ocrCode: 'dan',
-    displayName: 'Danish',
-    browserCodes: ['da', 'da-DK']
+    ocrCode: "dan",
+    displayName: "Danish",
+    browserCodes: ["da", "da-DK"],
   },
-  
+
   // Icelandic
   {
-    ocrCode: 'isl',
-    displayName: 'Icelandic',
-    browserCodes: ['is', 'is-IS']
+    ocrCode: "isl",
+    displayName: "Icelandic",
+    browserCodes: ["is", "is-IS"],
   },
-  
+
   // Greek
   {
-    ocrCode: 'ell',
-    displayName: 'Greek',
-    browserCodes: ['el', 'el-GR']
+    ocrCode: "ell",
+    displayName: "Greek",
+    browserCodes: ["el", "el-GR"],
   },
-  
+
   // Turkish
   {
-    ocrCode: 'tur',
-    displayName: 'Turkish',
-    browserCodes: ['tr', 'tr-TR']
+    ocrCode: "tur",
+    displayName: "Turkish",
+    browserCodes: ["tr", "tr-TR"],
   },
-  
+
   // Hebrew
   {
-    ocrCode: 'heb',
-    displayName: 'Hebrew',
-    browserCodes: ['he', 'he-IL']
+    ocrCode: "heb",
+    displayName: "Hebrew",
+    browserCodes: ["he", "he-IL"],
   },
-  
+
   // Hindi
   {
-    ocrCode: 'hin',
-    displayName: 'Hindi',
-    browserCodes: ['hi', 'hi-IN']
+    ocrCode: "hin",
+    displayName: "Hindi",
+    browserCodes: ["hi", "hi-IN"],
   },
-  
+
   // Thai
   {
-    ocrCode: 'tha',
-    displayName: 'Thai',
-    browserCodes: ['th', 'th-TH']
+    ocrCode: "tha",
+    displayName: "Thai",
+    browserCodes: ["th", "th-TH"],
   },
-  
+
   // Vietnamese
   {
-    ocrCode: 'vie',
-    displayName: 'Vietnamese',
-    browserCodes: ['vi', 'vi-VN']
+    ocrCode: "vie",
+    displayName: "Vietnamese",
+    browserCodes: ["vi", "vi-VN"],
   },
-  
+
   // Indonesian
   {
-    ocrCode: 'ind',
-    displayName: 'Indonesian',
-    browserCodes: ['id', 'id-ID']
+    ocrCode: "ind",
+    displayName: "Indonesian",
+    browserCodes: ["id", "id-ID"],
   },
-  
+
   // Malay
   {
-    ocrCode: 'msa',
-    displayName: 'Malay',
-    browserCodes: ['ms', 'ms-MY']
+    ocrCode: "msa",
+    displayName: "Malay",
+    browserCodes: ["ms", "ms-MY"],
   },
-  
+
   // Filipino
   {
-    ocrCode: 'fil',
-    displayName: 'Filipino',
-    browserCodes: ['fil']
+    ocrCode: "fil",
+    displayName: "Filipino",
+    browserCodes: ["fil"],
   },
-  
+
   // Tagalog
   {
-    ocrCode: 'tgl',
-    displayName: 'Tagalog',
-    browserCodes: ['tl']
+    ocrCode: "tgl",
+    displayName: "Tagalog",
+    browserCodes: ["tl"],
   },
-  
+
   // Ukrainian
   {
-    ocrCode: 'ukr',
-    displayName: 'Ukrainian',
-    browserCodes: ['uk', 'uk-UA']
+    ocrCode: "ukr",
+    displayName: "Ukrainian",
+    browserCodes: ["uk", "uk-UA"],
   },
-  
+
   // Belarusian
   {
-    ocrCode: 'bel',
-    displayName: 'Belarusian',
-    browserCodes: ['be', 'be-BY']
+    ocrCode: "bel",
+    displayName: "Belarusian",
+    browserCodes: ["be", "be-BY"],
   },
-  
+
   // Kazakh
   {
-    ocrCode: 'kaz',
-    displayName: 'Kazakh',
-    browserCodes: ['kk', 'kk-KZ']
+    ocrCode: "kaz",
+    displayName: "Kazakh",
+    browserCodes: ["kk", "kk-KZ"],
   },
-  
+
   // Uzbek
   {
-    ocrCode: 'uzb',
-    displayName: 'Uzbek',
-    browserCodes: ['uz', 'uz-UZ']
+    ocrCode: "uzb",
+    displayName: "Uzbek",
+    browserCodes: ["uz", "uz-UZ"],
   },
-  
+
   // Georgian
   {
-    ocrCode: 'kat',
-    displayName: 'Georgian',
-    browserCodes: ['ka', 'ka-GE']
+    ocrCode: "kat",
+    displayName: "Georgian",
+    browserCodes: ["ka", "ka-GE"],
   },
-  
+
   // Armenian
   {
-    ocrCode: 'hye',
-    displayName: 'Armenian',
-    browserCodes: ['hy', 'hy-AM']
+    ocrCode: "hye",
+    displayName: "Armenian",
+    browserCodes: ["hy", "hy-AM"],
   },
-  
+
   // Azerbaijani
   {
-    ocrCode: 'aze',
-    displayName: 'Azerbaijani',
-    browserCodes: ['az', 'az-AZ']
+    ocrCode: "aze",
+    displayName: "Azerbaijani",
+    browserCodes: ["az", "az-AZ"],
   },
-  
+
   // Persian/Farsi
   {
-    ocrCode: 'fas',
-    displayName: 'Persian',
-    browserCodes: ['fa', 'fa-IR']
+    ocrCode: "fas",
+    displayName: "Persian",
+    browserCodes: ["fa", "fa-IR"],
   },
-  
+
   // Urdu
   {
-    ocrCode: 'urd',
-    displayName: 'Urdu',
-    browserCodes: ['ur', 'ur-PK']
+    ocrCode: "urd",
+    displayName: "Urdu",
+    browserCodes: ["ur", "ur-PK"],
   },
-  
+
   // Bengali
   {
-    ocrCode: 'ben',
-    displayName: 'Bengali',
-    browserCodes: ['bn', 'bn-BD', 'bn-IN']
+    ocrCode: "ben",
+    displayName: "Bengali",
+    browserCodes: ["bn", "bn-BD", "bn-IN"],
   },
-  
+
   // Tamil
   {
-    ocrCode: 'tam',
-    displayName: 'Tamil',
-    browserCodes: ['ta', 'ta-IN', 'ta-LK']
+    ocrCode: "tam",
+    displayName: "Tamil",
+    browserCodes: ["ta", "ta-IN", "ta-LK"],
   },
-  
+
   // Telugu
   {
-    ocrCode: 'tel',
-    displayName: 'Telugu',
-    browserCodes: ['te', 'te-IN']
+    ocrCode: "tel",
+    displayName: "Telugu",
+    browserCodes: ["te", "te-IN"],
   },
-  
+
   // Kannada
   {
-    ocrCode: 'kan',
-    displayName: 'Kannada',
-    browserCodes: ['kn', 'kn-IN']
+    ocrCode: "kan",
+    displayName: "Kannada",
+    browserCodes: ["kn", "kn-IN"],
   },
-  
+
   // Malayalam
   {
-    ocrCode: 'mal',
-    displayName: 'Malayalam',
-    browserCodes: ['ml', 'ml-IN']
+    ocrCode: "mal",
+    displayName: "Malayalam",
+    browserCodes: ["ml", "ml-IN"],
   },
-  
+
   // Gujarati
   {
-    ocrCode: 'guj',
-    displayName: 'Gujarati',
-    browserCodes: ['gu', 'gu-IN']
+    ocrCode: "guj",
+    displayName: "Gujarati",
+    browserCodes: ["gu", "gu-IN"],
   },
-  
+
   // Marathi
   {
-    ocrCode: 'mar',
-    displayName: 'Marathi',
-    browserCodes: ['mr', 'mr-IN']
+    ocrCode: "mar",
+    displayName: "Marathi",
+    browserCodes: ["mr", "mr-IN"],
   },
-  
+
   // Punjabi
   {
-    ocrCode: 'pan',
-    displayName: 'Panjabi, Punjabi',
-    browserCodes: ['pa', 'pa-IN']
+    ocrCode: "pan",
+    displayName: "Panjabi, Punjabi",
+    browserCodes: ["pa", "pa-IN"],
   },
-  
+
   // Nepali
   {
-    ocrCode: 'nep',
-    displayName: 'Nepali',
-    browserCodes: ['ne', 'ne-NP']
+    ocrCode: "nep",
+    displayName: "Nepali",
+    browserCodes: ["ne", "ne-NP"],
   },
-  
+
   // Sinhala
   {
-    ocrCode: 'sin',
-    displayName: 'Sinhala, Sinhalese',
-    browserCodes: ['si', 'si-LK']
+    ocrCode: "sin",
+    displayName: "Sinhala, Sinhalese",
+    browserCodes: ["si", "si-LK"],
   },
-  
+
   // Burmese
   {
-    ocrCode: 'mya',
-    displayName: 'Burmese',
-    browserCodes: ['my', 'my-MM']
+    ocrCode: "mya",
+    displayName: "Burmese",
+    browserCodes: ["my", "my-MM"],
   },
-  
+
   // Khmer
   {
-    ocrCode: 'khm',
-    displayName: 'Central Khmer',
-    browserCodes: ['km', 'km-KH']
+    ocrCode: "khm",
+    displayName: "Central Khmer",
+    browserCodes: ["km", "km-KH"],
   },
-  
+
   // Lao
   {
-    ocrCode: 'lao',
-    displayName: 'Lao',
-    browserCodes: ['lo', 'lo-LA']
+    ocrCode: "lao",
+    displayName: "Lao",
+    browserCodes: ["lo", "lo-LA"],
   },
-  
+
   // Mongolian
   {
-    ocrCode: 'mon',
-    displayName: 'Mongolian',
-    browserCodes: ['mn', 'mn-MN']
+    ocrCode: "mon",
+    displayName: "Mongolian",
+    browserCodes: ["mn", "mn-MN"],
   },
-  
+
   // Welsh
   {
-    ocrCode: 'cym',
-    displayName: 'Welsh',
-    browserCodes: ['cy', 'cy-GB']
+    ocrCode: "cym",
+    displayName: "Welsh",
+    browserCodes: ["cy", "cy-GB"],
   },
-  
+
   // Irish
   {
-    ocrCode: 'gle',
-    displayName: 'Irish',
-    browserCodes: ['ga', 'ga-IE']
+    ocrCode: "gle",
+    displayName: "Irish",
+    browserCodes: ["ga", "ga-IE"],
   },
-  
+
   // Scottish Gaelic
   {
-    ocrCode: 'gla',
-    displayName: 'Scottish Gaelic',
-    browserCodes: ['gd', 'gd-GB']
+    ocrCode: "gla",
+    displayName: "Scottish Gaelic",
+    browserCodes: ["gd", "gd-GB"],
   },
-  
+
   // Basque
   {
-    ocrCode: 'eus',
-    displayName: 'Basque',
-    browserCodes: ['eu', 'eu-ES']
+    ocrCode: "eus",
+    displayName: "Basque",
+    browserCodes: ["eu", "eu-ES"],
   },
-  
+
   // Catalan
   {
-    ocrCode: 'cat',
-    displayName: 'Catalan',
-    browserCodes: ['ca', 'ca-ES']
+    ocrCode: "cat",
+    displayName: "Catalan",
+    browserCodes: ["ca", "ca-ES"],
   },
-  
+
   // Galician
   {
-    ocrCode: 'glg',
-    displayName: 'Galician',
-    browserCodes: ['gl', 'gl-ES']
+    ocrCode: "glg",
+    displayName: "Galician",
+    browserCodes: ["gl", "gl-ES"],
   },
-  
+
   // Macedonian
   {
-    ocrCode: 'mkd',
-    displayName: 'Macedonian',
-    browserCodes: ['mk', 'mk-MK']
+    ocrCode: "mkd",
+    displayName: "Macedonian",
+    browserCodes: ["mk", "mk-MK"],
   },
-  
+
   // Albanian
   {
-    ocrCode: 'sqi',
-    displayName: 'Albanian',
-    browserCodes: ['sq', 'sq-AL']
+    ocrCode: "sqi",
+    displayName: "Albanian",
+    browserCodes: ["sq", "sq-AL"],
   },
-  
+
   // Maltese
   {
-    ocrCode: 'mlt',
-    displayName: 'Maltese',
-    browserCodes: ['mt', 'mt-MT']
+    ocrCode: "mlt",
+    displayName: "Maltese",
+    browserCodes: ["mt", "mt-MT"],
   },
-  
+
   // Afrikaans
   {
-    ocrCode: 'afr',
-    displayName: 'Afrikaans',
-    browserCodes: ['af', 'af-ZA']
+    ocrCode: "afr",
+    displayName: "Afrikaans",
+    browserCodes: ["af", "af-ZA"],
   },
-  
+
   // Swahili
   {
-    ocrCode: 'swa',
-    displayName: 'Swahili',
-    browserCodes: ['sw', 'sw-KE', 'sw-TZ']
+    ocrCode: "swa",
+    displayName: "Swahili",
+    browserCodes: ["sw", "sw-KE", "sw-TZ"],
   },
 
   // Amharic
   {
-    ocrCode: 'amh',
-    displayName: 'Amharic',
-    browserCodes: ['am']
+    ocrCode: "amh",
+    displayName: "Amharic",
+    browserCodes: ["am"],
   },
-  
+
   // Assamese
   {
-    ocrCode: 'asm',
-    displayName: 'Assamese',
-    browserCodes: ['as']
+    ocrCode: "asm",
+    displayName: "Assamese",
+    browserCodes: ["as"],
   },
-  
+
   // Azerbaijani (Cyrillic)
   {
-    ocrCode: 'aze_cyrl',
-    displayName: 'Azerbaijani (Cyrillic)',
-    browserCodes: []
+    ocrCode: "aze_cyrl",
+    displayName: "Azerbaijani (Cyrillic)",
+    browserCodes: [],
   },
-  
+
   // Bosnian
   {
-    ocrCode: 'bos',
-    displayName: 'Bosnian',
-    browserCodes: ['bs']
+    ocrCode: "bos",
+    displayName: "Bosnian",
+    browserCodes: ["bs"],
   },
-  
+
   // Breton
   {
-    ocrCode: 'bre',
-    displayName: 'Breton',
-    browserCodes: ['br']
+    ocrCode: "bre",
+    displayName: "Breton",
+    browserCodes: ["br"],
   },
-  
+
   // Bambara
   {
-    ocrCode: 'bam',
-    displayName: 'Bambara',
-    browserCodes: ['bm']
+    ocrCode: "bam",
+    displayName: "Bambara",
+    browserCodes: ["bm"],
   },
-  
+
   // Bashkir
   {
-    ocrCode: 'bak',
-    displayName: 'Bashkir',
-    browserCodes: ['ba']
+    ocrCode: "bak",
+    displayName: "Bashkir",
+    browserCodes: ["ba"],
   },
-  
+
   // Cornish
   {
-    ocrCode: 'cor',
-    displayName: 'Cornish',
-    browserCodes: ['kw']
+    ocrCode: "cor",
+    displayName: "Cornish",
+    browserCodes: ["kw"],
   },
-  
+
   // Corsican
   {
-    ocrCode: 'cos',
-    displayName: 'Corsican',
-    browserCodes: ['co']
+    ocrCode: "cos",
+    displayName: "Corsican",
+    browserCodes: ["co"],
   },
-  
+
   // Ewe
   {
-    ocrCode: 'ewe',
-    displayName: 'Ewe',
-    browserCodes: ['ee']
+    ocrCode: "ewe",
+    displayName: "Ewe",
+    browserCodes: ["ee"],
   },
-  
+
   // Faroese
   {
-    ocrCode: 'fao',
-    displayName: 'Faroese',
-    browserCodes: ['fo']
+    ocrCode: "fao",
+    displayName: "Faroese",
+    browserCodes: ["fo"],
   },
-  
+
   // Fijian
   {
-    ocrCode: 'fij',
-    displayName: 'Fijian',
-    browserCodes: ['fj']
+    ocrCode: "fij",
+    displayName: "Fijian",
+    browserCodes: ["fj"],
   },
-  
+
   // Haitian Creole
   {
-    ocrCode: 'hat',
-    displayName: 'Haitian, Haitian Creole',
-    browserCodes: ['ht']
+    ocrCode: "hat",
+    displayName: "Haitian, Haitian Creole",
+    browserCodes: ["ht"],
   },
-  
+
   // Javanese
   {
-    ocrCode: 'jav',
-    displayName: 'Javanese',
-    browserCodes: ['jv']
+    ocrCode: "jav",
+    displayName: "Javanese",
+    browserCodes: ["jv"],
   },
-  
+
   // Kirghiz
   {
-    ocrCode: 'kir',
-    displayName: 'Kirghiz, Kyrgyz',
-    browserCodes: ['ky']
+    ocrCode: "kir",
+    displayName: "Kirghiz, Kyrgyz",
+    browserCodes: ["ky"],
   },
-  
+
   // Quechua
   {
-    ocrCode: 'que',
-    displayName: 'Quechua',
-    browserCodes: ['qu']
+    ocrCode: "que",
+    displayName: "Quechua",
+    browserCodes: ["qu"],
   },
-  
+
   // Sindhi
   {
-    ocrCode: 'snd',
-    displayName: 'Sindhi',
-    browserCodes: ['sd']
+    ocrCode: "snd",
+    displayName: "Sindhi",
+    browserCodes: ["sd"],
   },
-  
+
   // Yiddish
   {
-    ocrCode: 'yid',
-    displayName: 'Yiddish',
-    browserCodes: ['yi']
+    ocrCode: "yid",
+    displayName: "Yiddish",
+    browserCodes: ["yi"],
   },
-  
+
   // Yoruba
   {
-    ocrCode: 'yor',
-    displayName: 'Yoruba',
-    browserCodes: ['yo']
+    ocrCode: "yor",
+    displayName: "Yoruba",
+    browserCodes: ["yo"],
   },
 
   // Additional OCR languages without browser mappings or with very specific/rare codes
   {
-    ocrCode: 'ceb',
-    displayName: 'Cebuano',
-    browserCodes: []
+    ocrCode: "ceb",
+    displayName: "Cebuano",
+    browserCodes: [],
   },
   {
-    ocrCode: 'chi_sim_vert',
-    displayName: 'Chinese (Simplified, Vertical)',
-    browserCodes: []
+    ocrCode: "chi_sim_vert",
+    displayName: "Chinese (Simplified, Vertical)",
+    browserCodes: [],
   },
   {
-    ocrCode: 'chi_tra_vert',
-    displayName: 'Chinese (Traditional, Vertical)',
-    browserCodes: []
+    ocrCode: "chi_tra_vert",
+    displayName: "Chinese (Traditional, Vertical)",
+    browserCodes: [],
   },
   {
-    ocrCode: 'chr',
-    displayName: 'Cherokee',
-    browserCodes: []
+    ocrCode: "chr",
+    displayName: "Cherokee",
+    browserCodes: [],
   },
   {
-    ocrCode: 'dan_frak',
-    displayName: 'Danish (Fraktur)',
-    browserCodes: []
+    ocrCode: "dan_frak",
+    displayName: "Danish (Fraktur)",
+    browserCodes: [],
   },
   {
-    ocrCode: 'deu_frak',
-    displayName: 'German (Fraktur)',
-    browserCodes: []
+    ocrCode: "deu_frak",
+    displayName: "German (Fraktur)",
+    browserCodes: [],
   },
   {
-    ocrCode: 'div',
-    displayName: 'Divehi',
-    browserCodes: ['dv']
+    ocrCode: "div",
+    displayName: "Divehi",
+    browserCodes: ["dv"],
   },
   {
-    ocrCode: 'dzo',
-    displayName: 'Dzongkha',
-    browserCodes: ['dz']
+    ocrCode: "dzo",
+    displayName: "Dzongkha",
+    browserCodes: ["dz"],
   },
   {
-    ocrCode: 'enm',
-    displayName: 'English, Middle (1100-1500)',
-    browserCodes: []
+    ocrCode: "enm",
+    displayName: "English, Middle (1100-1500)",
+    browserCodes: [],
   },
   {
-    ocrCode: 'epo',
-    displayName: 'Esperanto',
-    browserCodes: ['eo']
+    ocrCode: "epo",
+    displayName: "Esperanto",
+    browserCodes: ["eo"],
   },
   {
-    ocrCode: 'equ',
-    displayName: 'Math / equation detection module',
-    browserCodes: []
+    ocrCode: "equ",
+    displayName: "Math / equation detection module",
+    browserCodes: [],
   },
   {
-    ocrCode: 'frk',
-    displayName: 'Frankish',
-    browserCodes: []
+    ocrCode: "frk",
+    displayName: "Frankish",
+    browserCodes: [],
   },
   {
-    ocrCode: 'frm',
-    displayName: 'French, Middle (ca.1400-1600)',
-    browserCodes: []
+    ocrCode: "frm",
+    displayName: "French, Middle (ca.1400-1600)",
+    browserCodes: [],
   },
   {
-    ocrCode: 'fry',
-    displayName: 'Western Frisian',
-    browserCodes: ['fy']
+    ocrCode: "fry",
+    displayName: "Western Frisian",
+    browserCodes: ["fy"],
   },
   {
-    ocrCode: 'grc',
-    displayName: 'Ancient Greek',
-    browserCodes: []
+    ocrCode: "grc",
+    displayName: "Ancient Greek",
+    browserCodes: [],
   },
   {
-    ocrCode: 'iku',
-    displayName: 'Inuktitut',
-    browserCodes: ['iu']
+    ocrCode: "iku",
+    displayName: "Inuktitut",
+    browserCodes: ["iu"],
   },
   {
-    ocrCode: 'ita_old',
-    displayName: 'Italian (Old)',
-    browserCodes: []
+    ocrCode: "ita_old",
+    displayName: "Italian (Old)",
+    browserCodes: [],
   },
   {
-    ocrCode: 'jpn_vert',
-    displayName: 'Japanese (Vertical)',
-    browserCodes: []
+    ocrCode: "jpn_vert",
+    displayName: "Japanese (Vertical)",
+    browserCodes: [],
   },
   {
-    ocrCode: 'kat_old',
-    displayName: 'Georgian (Old)',
-    browserCodes: []
+    ocrCode: "kat_old",
+    displayName: "Georgian (Old)",
+    browserCodes: [],
   },
   {
-    ocrCode: 'kmr',
-    displayName: 'Northern Kurdish',
-    browserCodes: ['ku']
+    ocrCode: "kmr",
+    displayName: "Northern Kurdish",
+    browserCodes: ["ku"],
   },
   {
-    ocrCode: 'kor_vert',
-    displayName: 'Korean (Vertical)',
-    browserCodes: []
+    ocrCode: "kor_vert",
+    displayName: "Korean (Vertical)",
+    browserCodes: [],
   },
   {
-    ocrCode: 'lat',
-    displayName: 'Latin',
-    browserCodes: ['la']
+    ocrCode: "lat",
+    displayName: "Latin",
+    browserCodes: ["la"],
   },
   {
-    ocrCode: 'ltz',
-    displayName: 'Luxembourgish',
-    browserCodes: ['lb']
+    ocrCode: "ltz",
+    displayName: "Luxembourgish",
+    browserCodes: ["lb"],
   },
   {
-    ocrCode: 'mri',
-    displayName: 'Maori',
-    browserCodes: ['mi']
+    ocrCode: "mri",
+    displayName: "Maori",
+    browserCodes: ["mi"],
   },
   {
-    ocrCode: 'oci',
-    displayName: 'Occitan (post 1500)',
-    browserCodes: ['oc']
+    ocrCode: "oci",
+    displayName: "Occitan (post 1500)",
+    browserCodes: ["oc"],
   },
   {
-    ocrCode: 'ori',
-    displayName: 'Oriya',
-    browserCodes: ['or']
+    ocrCode: "ori",
+    displayName: "Oriya",
+    browserCodes: ["or"],
   },
   {
-    ocrCode: 'osd',
-    displayName: 'Orientation and script detection module',
-    browserCodes: []
+    ocrCode: "osd",
+    displayName: "Orientation and script detection module",
+    browserCodes: [],
   },
   {
-    ocrCode: 'pus',
-    displayName: 'Pushto, Pashto',
-    browserCodes: ['ps']
+    ocrCode: "pus",
+    displayName: "Pushto, Pashto",
+    browserCodes: ["ps"],
   },
   {
-    ocrCode: 'san',
-    displayName: 'Sanskrit',
-    browserCodes: ['sa']
+    ocrCode: "san",
+    displayName: "Sanskrit",
+    browserCodes: ["sa"],
   },
   {
-    ocrCode: 'slk_frak',
-    displayName: 'Slovak (Fraktur)',
-    browserCodes: []
+    ocrCode: "slk_frak",
+    displayName: "Slovak (Fraktur)",
+    browserCodes: [],
   },
   {
-    ocrCode: 'spa_old',
-    displayName: 'Spanish (Old)',
-    browserCodes: []
+    ocrCode: "spa_old",
+    displayName: "Spanish (Old)",
+    browserCodes: [],
   },
   {
-    ocrCode: 'sun',
-    displayName: 'Sundanese',
-    browserCodes: ['su']
+    ocrCode: "sun",
+    displayName: "Sundanese",
+    browserCodes: ["su"],
   },
   {
-    ocrCode: 'syr',
-    displayName: 'Syriac',
-    browserCodes: []
+    ocrCode: "syr",
+    displayName: "Syriac",
+    browserCodes: [],
   },
   {
-    ocrCode: 'tat',
-    displayName: 'Tatar',
-    browserCodes: ['tt']
+    ocrCode: "tat",
+    displayName: "Tatar",
+    browserCodes: ["tt"],
   },
   {
-    ocrCode: 'tgk',
-    displayName: 'Tajik',
-    browserCodes: ['tg']
+    ocrCode: "tgk",
+    displayName: "Tajik",
+    browserCodes: ["tg"],
   },
   {
-    ocrCode: 'tir',
-    displayName: 'Tigrinya',
-    browserCodes: ['ti']
+    ocrCode: "tir",
+    displayName: "Tigrinya",
+    browserCodes: ["ti"],
   },
   {
-    ocrCode: 'ton',
-    displayName: 'Tonga (Tonga Islands)',
-    browserCodes: ['to']
+    ocrCode: "ton",
+    displayName: "Tonga (Tonga Islands)",
+    browserCodes: ["to"],
   },
   {
-    ocrCode: 'uig',
-    displayName: 'Uighur, Uyghur',
-    browserCodes: ['ug']
+    ocrCode: "uig",
+    displayName: "Uighur, Uyghur",
+    browserCodes: ["ug"],
   },
   {
-    ocrCode: 'uzb_cyrl',
-    displayName: 'Uzbek (Cyrillic)',
-    browserCodes: []
-  }
+    ocrCode: "uzb_cyrl",
+    displayName: "Uzbek (Cyrillic)",
+    browserCodes: [],
+  },
 ];
 
 // Build lookup maps for efficient access
@@ -879,18 +879,18 @@ const displayToOcrMap = new Map<string, string>();
 const ocrToBrowserMap = new Map<string, string[]>();
 
 // Populate lookup maps
-languageDefinitions.forEach(lang => {
+languageDefinitions.forEach((lang) => {
   // OCR code to display name
   ocrToDisplayMap.set(lang.ocrCode, lang.displayName);
-  
+
   // Display name to OCR code
   displayToOcrMap.set(lang.displayName.toLowerCase(), lang.ocrCode);
-  
+
   // OCR code to browser codes
   ocrToBrowserMap.set(lang.ocrCode, lang.browserCodes);
-  
+
   // Browser codes to OCR code
-  lang.browserCodes.forEach(browserCode => {
+  lang.browserCodes.forEach((browserCode) => {
     browserToOcrMap.set(browserCode.toLowerCase(), lang.ocrCode);
   });
 });
@@ -898,10 +898,10 @@ languageDefinitions.forEach(lang => {
 /**
  * Maps a browser language code to an OCR language code
  * Handles exact matches and similar language fallbacks
- * 
+ *
  * @param browserLanguage - The browser language code (e.g., 'en-GB', 'fr-FR')
  * @returns OCR language code if found, null if no match
- * 
+ *
  * @example
  * mapBrowserLanguageToOcr('de-DE') // Returns 'deu'
  * mapBrowserLanguageToOcr('en-GB') // Returns 'eng'
@@ -909,41 +909,37 @@ languageDefinitions.forEach(lang => {
  */
 export function mapBrowserLanguageToOcr(browserLanguage: string): string | null {
   if (!browserLanguage) return null;
-  
+
   // Normalize the input
-  const normalizedInput = browserLanguage.toLowerCase().replace('_', '-');
-  
+  const normalizedInput = browserLanguage.toLowerCase().replace("_", "-");
+
   // Try exact match first
   const exactMatch = browserToOcrMap.get(normalizedInput);
   if (exactMatch) return exactMatch;
-  
+
   // Try with different casing variations
-  const variations = [
-    browserLanguage.toLowerCase(),
-    browserLanguage.toUpperCase().toLowerCase(),
-    normalizedInput,
-  ];
-  
+  const variations = [browserLanguage.toLowerCase(), browserLanguage.toUpperCase().toLowerCase(), normalizedInput];
+
   for (const variant of variations) {
     const match = browserToOcrMap.get(variant);
     if (match) return match;
   }
-  
+
   // Try base language code (e.g., 'en' from 'en-GB')
-  const baseLanguage = normalizedInput.split('-')[0];
+  const baseLanguage = normalizedInput.split("-")[0];
   const baseMatch = browserToOcrMap.get(baseLanguage);
   if (baseMatch) return baseMatch;
-  
+
   // No match found
   return null;
 }
 
 /**
  * Gets the display name for an OCR language code
- * 
+ *
  * @param ocrCode - The OCR language code (e.g., 'eng', 'deu')
  * @returns Display name if found, the original code if not found
- * 
+ *
  * @example
  * getOcrDisplayName('deu') // Returns 'German'
  * getOcrDisplayName('eng') // Returns 'English'
@@ -955,10 +951,10 @@ export function getOcrDisplayName(ocrCode: string): string {
 
 /**
  * Gets the OCR code from a display name
- * 
+ *
  * @param displayName - The display name (e.g., 'English', 'German')
  * @returns OCR code if found, null if no match
- * 
+ *
  * @example
  * getOcrCodeFromDisplayName('German') // Returns 'deu'
  * getOcrCodeFromDisplayName('English') // Returns 'eng'
@@ -970,10 +966,10 @@ export function getOcrCodeFromDisplayName(displayName: string): string | null {
 
 /**
  * Gets the browser language codes for an OCR language code
- * 
+ *
  * @param ocrCode - The OCR language code (e.g., 'eng', 'deu')
  * @returns Array of browser language codes
- * 
+ *
  * @example
  * getBrowserLanguagesForOcr('deu') // Returns ['de', 'de-DE', 'de-AT', 'de-CH']
  * getBrowserLanguagesForOcr('eng') // Returns ['en', 'en-US', 'en-GB', 'en-AU', ...]
@@ -985,13 +981,13 @@ export function getBrowserLanguagesForOcr(ocrCode: string): string[] {
 
 /**
  * Gets the OCR language code for the current browser language
- * 
+ *
  * @param currentLanguage - Current i18n language
  * @returns OCR language code array (empty if no match)
- * 
+ *
  * @example
  * getAutoOcrLanguage('de-DE') // Returns ['deu']
- * getAutoOcrLanguage('en-GB') // Returns ['eng'] 
+ * getAutoOcrLanguage('en-GB') // Returns ['eng']
  * getAutoOcrLanguage('unknown') // Returns []
  */
 export function getAutoOcrLanguage(currentLanguage: string): string[] {
@@ -1001,9 +997,9 @@ export function getAutoOcrLanguage(currentLanguage: string): string[] {
 
 /**
  * Gets all available language definitions
- * 
+ *
  * @returns Array of all language definitions
- * 
+ *
  * @example
  * const allLanguages = getAllLanguageDefinitions();
  * // Returns: [{ ocrCode: 'eng', displayName: 'English', browserCodes: ['en', 'en-US', ...] }, ...]
@@ -1016,5 +1012,5 @@ export function getAllLanguageDefinitions(): LanguageDefinition[] {
  * Legacy compatibility - provides the same interface as tempOcrLanguages.ts
  */
 export const tempOcrLanguages = {
-  lang: Object.fromEntries(ocrToDisplayMap)
-} as const; 
\ No newline at end of file
+  lang: Object.fromEntries(ocrToDisplayMap),
+} as const;
diff --git a/frontend/src/core/utils/pageMetadata.ts b/frontend/src/core/utils/pageMetadata.ts
index fa9b4d7cc4..2b97ab1ff6 100644
--- a/frontend/src/core/utils/pageMetadata.ts
+++ b/frontend/src/core/utils/pageMetadata.ts
@@ -1,28 +1,18 @@
-import {
-  ProcessedFileMetadata,
-  ProcessedFilePage,
-  StirlingFileStub,
-} from '@app/types/fileContext';
+import { ProcessedFileMetadata, ProcessedFilePage, StirlingFileStub } from "@app/types/fileContext";
 
 export interface PageDimensions {
   width: number | null;
   height: number | null;
 }
 
-export function getPageDimensions(
-  page?: ProcessedFilePage | null
-): PageDimensions {
-  const width =
-    typeof page?.width === 'number' && page.width > 0 ? page.width : null;
-  const height =
-    typeof page?.height === 'number' && page.height > 0 ? page.height : null;
+export function getPageDimensions(page?: ProcessedFilePage | null): PageDimensions {
+  const width = typeof page?.width === "number" && page.width > 0 ? page.width : null;
+  const height = typeof page?.height === "number" && page.height > 0 ? page.height : null;
 
   return { width, height };
 }
 
-export function getFirstPageDimensionsFromMetadata(
-  metadata?: ProcessedFileMetadata | null
-): PageDimensions {
+export function getFirstPageDimensionsFromMetadata(metadata?: ProcessedFileMetadata | null): PageDimensions {
   if (!metadata?.pages?.length) {
     return { width: null, height: null };
   }
@@ -30,15 +20,11 @@ export function getFirstPageDimensionsFromMetadata(
   return getPageDimensions(metadata.pages[0]);
 }
 
-export function getFirstPageDimensionsFromStub(
-  file?: StirlingFileStub
-): PageDimensions {
+export function getFirstPageDimensionsFromStub(file?: StirlingFileStub): PageDimensions {
   return getFirstPageDimensionsFromMetadata(file?.processedFile);
 }
 
-export function getFirstPageAspectRatioFromMetadata(
-  metadata?: ProcessedFileMetadata | null
-): number | null {
+export function getFirstPageAspectRatioFromMetadata(metadata?: ProcessedFileMetadata | null): number | null {
   const { width, height } = getFirstPageDimensionsFromMetadata(metadata);
   if (width && height) {
     return height / width;
@@ -46,8 +32,6 @@ export function getFirstPageAspectRatioFromMetadata(
   return null;
 }
 
-export function getFirstPageAspectRatioFromStub(
-  file?: StirlingFileStub
-): number | null {
+export function getFirstPageAspectRatioFromStub(file?: StirlingFileStub): number | null {
   return getFirstPageAspectRatioFromMetadata(file?.processedFile);
 }
diff --git a/frontend/src/core/utils/pageSelection.ts b/frontend/src/core/utils/pageSelection.ts
index 4909581bb9..7ab1cd29ce 100644
--- a/frontend/src/core/utils/pageSelection.ts
+++ b/frontend/src/core/utils/pageSelection.ts
@@ -2,8 +2,8 @@ export const validatePageNumbers = (pageNumbers: string): boolean => {
   if (!pageNumbers.trim()) return false;
 
   // Normalize input for validation: remove spaces around commas and other spaces
-  const normalized = pageNumbers.replace(/\s*,\s*/g, ',').replace(/\s+/g, '');
-  const parts = normalized.split(',');
+  const normalized = pageNumbers.replace(/\s*,\s*/g, ",").replace(/\s+/g, "");
+  const parts = normalized.split(",");
 
   // Regular expressions for different page number formats
   const allToken = /^all$/i; // Select all pages
@@ -11,13 +11,8 @@ export const validatePageNumbers = (pageNumbers: string): boolean => {
   const rangeRegex = /^[1-9]\d*-(?:[1-9]\d*)?$/; // Range: 1-5 or open range 10-
   const mathRegex = /^(?=.*n)[0-9n+\-*/() ]+$/; // Mathematical expressions with n and allowed chars
 
-  return parts.every(part => {
+  return parts.every((part) => {
     if (!part) return false;
-    return (
-      allToken.test(part) ||
-      singlePageRegex.test(part) ||
-      rangeRegex.test(part) ||
-      mathRegex.test(part)
-    );
+    return allToken.test(part) || singlePageRegex.test(part) || rangeRegex.test(part) || mathRegex.test(part);
   });
 };
diff --git a/frontend/src/core/utils/pdfLinkUtils.ts b/frontend/src/core/utils/pdfLinkUtils.ts
index e53070e72b..7d1d007c0d 100644
--- a/frontend/src/core/utils/pdfLinkUtils.ts
+++ b/frontend/src/core/utils/pdfLinkUtils.ts
@@ -13,16 +13,12 @@ import {
   writeUtf16,
   readAnnotRectAdjusted,
   parseRectToCss,
-} from '@app/services/pdfiumService';
-import {
-  FPDF_ANNOT_LINK,
-  PDFACTION_GOTO,
-  PDFACTION_URI,
-} from '@app/utils/pdfiumBitmapUtils';
+} from "@app/services/pdfiumService";
+import { FPDF_ANNOT_LINK, PDFACTION_GOTO, PDFACTION_URI } from "@app/utils/pdfiumBitmapUtils";
 
-export type LinkType = 'internal' | 'external' | 'unknown';
-export type LinkBorderStyle = 'solid' | 'dashed' | 'beveled' | 'inset' | 'underline';
-export type LinkHighlightMode = 'none' | 'invert' | 'outline' | 'push';
+export type LinkType = "internal" | "external" | "unknown";
+export type LinkBorderStyle = "solid" | "dashed" | "beveled" | "inset" | "underline";
+export type LinkHighlightMode = "none" | "invert" | "outline" | "push";
 
 export interface PdfLibLink {
   id: string;
@@ -75,24 +71,16 @@ export async function createLinkAnnotation(
   options: CreateLinkOptions,
   password?: string,
 ): Promise<ArrayBuffer> {
-  const {
-    pageIndex,
-    rect,
-    url,
-    destinationPage,
-    title,
-    color = [0, 0, 1],
-    borderWidth = 0,
-  } = options;
+  const { pageIndex, rect, url, destinationPage, title, color = [0, 0, 1], borderWidth = 0 } = options;
 
   if (!url && destinationPage === undefined) {
-    throw new Error('createLinkAnnotation: must provide either url or destinationPage');
+    throw new Error("createLinkAnnotation: must provide either url or destinationPage");
   }
   if (url && destinationPage !== undefined) {
-    throw new Error('createLinkAnnotation: url and destinationPage are mutually exclusive');
+    throw new Error("createLinkAnnotation: url and destinationPage are mutually exclusive");
   }
   if (rect.width <= 0 || rect.height <= 0) {
-    throw new Error('createLinkAnnotation: rect dimensions must be positive');
+    throw new Error("createLinkAnnotation: rect dimensions must be positive");
   }
 
   const m = await getPdfiumModule();
@@ -101,9 +89,7 @@ export async function createLinkAnnotation(
   try {
     const pageCount = m.FPDF_GetPageCount(docPtr);
     if (destinationPage !== undefined && (destinationPage < 0 || destinationPage >= pageCount)) {
-      throw new RangeError(
-        `createLinkAnnotation: destinationPage ${destinationPage} out of range [0, ${pageCount})`,
-      );
+      throw new RangeError(`createLinkAnnotation: destinationPage ${destinationPage} out of range [0, ${pageCount})`);
     }
 
     const pagePtr = m.FPDF_LoadPage(docPtr, pageIndex);
@@ -114,22 +100,22 @@ export async function createLinkAnnotation(
 
       const annotPtr = m.FPDFPage_CreateAnnot(pagePtr, FPDF_ANNOT_LINK);
       if (!annotPtr) {
-        throw new Error('Failed to create link annotation');
+        throw new Error("Failed to create link annotation");
       }
 
       try {
         // Set rect (convert from CSS top-left to PDF bottom-left origin)
         // FS_RECTF layout: { left, top, right, bottom } where top > bottom in PDF coords
         const pdfLeft = rect.x;
-        const pdfTop = pageHeight - rect.y;                 // CSS y=0 → PDF top
+        const pdfTop = pageHeight - rect.y; // CSS y=0 → PDF top
         const pdfRight = rect.x + rect.width;
-        const pdfBottom = pageHeight - rect.y - rect.height;   // CSS bottom → PDF bottom
+        const pdfBottom = pageHeight - rect.y - rect.height; // CSS bottom → PDF bottom
 
         const rectBuf = m.pdfium.wasmExports.malloc(4 * 4);
-        m.pdfium.setValue(rectBuf, pdfLeft, 'float');   // offset 0: left
-        m.pdfium.setValue(rectBuf + 4, pdfTop, 'float');   // offset 4: top  (larger y)
-        m.pdfium.setValue(rectBuf + 8, pdfRight, 'float');   // offset 8: right
-        m.pdfium.setValue(rectBuf + 12, pdfBottom, 'float');   // offset 12: bottom (smaller y)
+        m.pdfium.setValue(rectBuf, pdfLeft, "float"); // offset 0: left
+        m.pdfium.setValue(rectBuf + 4, pdfTop, "float"); // offset 4: top  (larger y)
+        m.pdfium.setValue(rectBuf + 8, pdfRight, "float"); // offset 8: right
+        m.pdfium.setValue(rectBuf + 12, pdfBottom, "float"); // offset 12: bottom (smaller y)
         m.FPDFAnnot_SetRect(annotPtr, rectBuf);
         m.pdfium.wasmExports.free(rectBuf);
 
@@ -157,7 +143,7 @@ export async function createLinkAnnotation(
         // Set title / contents
         if (title) {
           const titlePtr = writeUtf16(m, title);
-          m.FPDFAnnot_SetStringValue(annotPtr, 'Contents', titlePtr);
+          m.FPDFAnnot_SetStringValue(annotPtr, "Contents", titlePtr);
           m.pdfium.wasmExports.free(titlePtr);
         }
       } finally {
@@ -168,7 +154,6 @@ export async function createLinkAnnotation(
     }
 
     return await saveRawDocument(docPtr);
-
   } finally {
     closeDocAndFreeBuffer(m, docPtr);
   }
@@ -245,7 +230,7 @@ export async function extractLinksFromPage(
 
         // Try to get link object
         const linkPtr = m.FPDFAnnot_GetLink(annotPtr);
-        let linkType: LinkType = 'unknown';
+        let linkType: LinkType = "unknown";
         let targetPage: number | undefined;
         let uri: string | undefined;
 
@@ -261,33 +246,33 @@ export async function extractLinksFromPage(
                 m.FPDFAction_GetURIPath(docPtr, actionPtr, uriBuf, uriLen);
                 uri = m.pdfium.UTF8ToString(uriBuf);
                 m.pdfium.wasmExports.free(uriBuf);
-                linkType = 'external';
+                linkType = "external";
               }
             } else if (actionType === PDFACTION_GOTO) {
               const destPtr = m.FPDFAction_GetDest(docPtr, actionPtr);
               if (destPtr) {
                 targetPage = m.FPDFDest_GetDestPageIndex(docPtr, destPtr);
-                linkType = 'internal';
+                linkType = "internal";
               }
             }
           }
 
           // Check for direct destination
-          if (linkType === 'unknown') {
+          if (linkType === "unknown") {
             const destPtr = m.FPDFLink_GetDest(docPtr, linkPtr);
             if (destPtr) {
               targetPage = m.FPDFDest_GetDestPageIndex(docPtr, destPtr);
-              linkType = 'internal';
+              linkType = "internal";
             }
           }
         }
 
         // Get title from /Contents
         let title: string | undefined;
-        const contentsLen = m.FPDFAnnot_GetStringValue(annotPtr, 'Contents', 0, 0);
+        const contentsLen = m.FPDFAnnot_GetStringValue(annotPtr, "Contents", 0, 0);
         if (contentsLen > 2) {
           const contentsBuf = m.pdfium.wasmExports.malloc(contentsLen);
-          m.FPDFAnnot_GetStringValue(annotPtr, 'Contents', contentsBuf, contentsLen);
+          m.FPDFAnnot_GetStringValue(annotPtr, "Contents", contentsBuf, contentsLen);
           title = readUtf16(m, contentsBuf, contentsLen) || undefined;
           m.pdfium.wasmExports.free(contentsBuf);
         }
@@ -302,9 +287,9 @@ export async function extractLinksFromPage(
         const hasColor = m.FPDFAnnot_GetColor(annotPtr, 0, rPtr, gPtr, bPtr, aPtr);
         if (hasColor) {
           color = [
-            m.pdfium.getValue(rPtr, 'i32') / 255,
-            m.pdfium.getValue(gPtr, 'i32') / 255,
-            m.pdfium.getValue(bPtr, 'i32') / 255,
+            m.pdfium.getValue(rPtr, "i32") / 255,
+            m.pdfium.getValue(gPtr, "i32") / 255,
+            m.pdfium.getValue(bPtr, "i32") / 255,
           ];
         }
         m.pdfium.wasmExports.free(rPtr);
@@ -322,7 +307,7 @@ export async function extractLinksFromPage(
 
         m.FPDFPage_CloseAnnot(annotPtr);
       } catch (e) {
-        console.warn('[pdfLinkUtils] Failed to parse annotation:', e);
+        console.warn("[pdfLinkUtils] Failed to parse annotation:", e);
       }
     }
 
diff --git a/frontend/src/core/utils/pdfiumBitmapUtils.ts b/frontend/src/core/utils/pdfiumBitmapUtils.ts
index 6501cb6efd..0d7a586350 100644
--- a/frontend/src/core/utils/pdfiumBitmapUtils.ts
+++ b/frontend/src/core/utils/pdfiumBitmapUtils.ts
@@ -9,7 +9,7 @@
  * the colour-channel swizzle in a plain JS TypedArray and then bulk-
  * copy the result into the WASM heap with a single `HEAPU8.set()`.
  */
-import type { WrappedPdfiumModule } from '@embedpdf/pdfium';
+import type { WrappedPdfiumModule } from "@embedpdf/pdfium";
 
 /** FPDF_ANNOT_LINK */
 export const FPDF_ANNOT_LINK = 4;
@@ -51,26 +51,22 @@ export function copyRgbaToBgraHeap(
     // Fast path: no padding — single bulk copy after swizzle
     const bgra = new Uint8Array(rgba.length);
     for (let i = 0; i < rgba.length; i += 4) {
-      bgra[i]     = rgba[i + 2]; // B
+      bgra[i] = rgba[i + 2]; // B
       bgra[i + 1] = rgba[i + 1]; // G
-      bgra[i + 2] = rgba[i];     // R
+      bgra[i + 2] = rgba[i]; // R
       bgra[i + 3] = rgba[i + 3]; // A
     }
-    new Uint8Array(
-      (m.pdfium.wasmExports as any).memory.buffer,
-    ).set(bgra, bufferPtr);
+    new Uint8Array((m.pdfium.wasmExports as any).memory.buffer).set(bgra, bufferPtr);
   } else {
     // Stride has padding — swizzle + copy row by row
     const rowBuf = new Uint8Array(rowBytes);
-    const heap = new Uint8Array(
-      (m.pdfium.wasmExports as any).memory.buffer,
-    );
+    const heap = new Uint8Array((m.pdfium.wasmExports as any).memory.buffer);
     for (let y = 0; y < height; y++) {
       const srcRowStart = y * rowBytes;
       for (let x = 0; x < rowBytes; x += 4) {
-        rowBuf[x]     = rgba[srcRowStart + x + 2]; // B
+        rowBuf[x] = rgba[srcRowStart + x + 2]; // B
         rowBuf[x + 1] = rgba[srcRowStart + x + 1]; // G
-        rowBuf[x + 2] = rgba[srcRowStart + x];     // R
+        rowBuf[x + 2] = rgba[srcRowStart + x]; // R
         rowBuf[x + 3] = rgba[srcRowStart + x + 3]; // A
       }
       heap.set(rowBuf, bufferPtr + y * stride);
@@ -124,12 +120,12 @@ export function embedBitmapImageOnPage(
     // Set affine transform: [a b c d e f]
     const matrixPtr = m.pdfium.wasmExports.malloc(6 * 4);
     try {
-      m.pdfium.setValue(matrixPtr,      drawWidth,  'float'); // a — scaleX
-      m.pdfium.setValue(matrixPtr + 4,  0,          'float'); // b
-      m.pdfium.setValue(matrixPtr + 8,  0,          'float'); // c
-      m.pdfium.setValue(matrixPtr + 12, drawHeight, 'float'); // d — scaleY
-      m.pdfium.setValue(matrixPtr + 16, pdfX,       'float'); // e — translateX
-      m.pdfium.setValue(matrixPtr + 20, pdfY,       'float'); // f — translateY
+      m.pdfium.setValue(matrixPtr, drawWidth, "float"); // a — scaleX
+      m.pdfium.setValue(matrixPtr + 4, 0, "float"); // b
+      m.pdfium.setValue(matrixPtr + 8, 0, "float"); // c
+      m.pdfium.setValue(matrixPtr + 12, drawHeight, "float"); // d — scaleY
+      m.pdfium.setValue(matrixPtr + 16, pdfX, "float"); // e — translateX
+      m.pdfium.setValue(matrixPtr + 20, pdfY, "float"); // f — translateY
 
       if (!m.FPDFPageObj_SetMatrix(imageObjPtr, matrixPtr)) {
         m.FPDFPageObj_Destroy(imageObjPtr);
@@ -146,7 +142,11 @@ export function embedBitmapImageOnPage(
     // builds but guard anyway.  If already destroyed above, the second call
     // is harmless because we allow it to be idempotent.
     // We use a try-catch to be safe across PDFium WASM builds.
-    try { m.FPDFBitmap_Destroy(bitmapPtr); } catch { /* already freed */ }
+    try {
+      m.FPDFBitmap_Destroy(bitmapPtr);
+    } catch {
+      /* already freed */
+    }
   }
 }
 /**
@@ -188,11 +188,14 @@ export function decodeImageDataUrl(dataUrl: string): Promise<DecodedImage | null
     const img = new Image();
     img.onload = () => {
       try {
-        const canvas = document.createElement('canvas');
+        const canvas = document.createElement("canvas");
         canvas.width = img.width;
         canvas.height = img.height;
-        const ctx = canvas.getContext('2d');
-        if (!ctx) { resolve(null); return; }
+        const ctx = canvas.getContext("2d");
+        if (!ctx) {
+          resolve(null);
+          return;
+        }
         ctx.drawImage(img, 0, 0);
         const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
         resolve({
@@ -200,7 +203,9 @@ export function decodeImageDataUrl(dataUrl: string): Promise<DecodedImage | null
           width: canvas.width,
           height: canvas.height,
         });
-      } catch { resolve(null); }
+      } catch {
+        resolve(null);
+      }
     };
     img.onerror = () => resolve(null);
     img.src = dataUrl;
diff --git a/frontend/src/core/utils/resourceManager.ts b/frontend/src/core/utils/resourceManager.ts
index 06ba74dfe2..67f3ab71b8 100644
--- a/frontend/src/core/utils/resourceManager.ts
+++ b/frontend/src/core/utils/resourceManager.ts
@@ -2,8 +2,8 @@
  * Utilities for managing file resources and blob URLs
  */
 
-import { useCallback } from 'react';
-import { AUTOMATION_CONSTANTS } from '@app/constants/automation';
+import { useCallback } from "react";
+import { AUTOMATION_CONSTANTS } from "@app/constants/automation";
 
 export class ResourceManager {
   private static blobUrls = new Set<string>();
@@ -31,7 +31,7 @@ export class ResourceManager {
    * Revoke all tracked blob URLs
    */
   static revokeAllBlobUrls(): void {
-    this.blobUrls.forEach(url => URL.revokeObjectURL(url));
+    this.blobUrls.forEach((url) => URL.revokeObjectURL(url));
     this.blobUrls.clear();
   }
 
@@ -39,10 +39,10 @@ export class ResourceManager {
    * Create a File with proper naming convention
    */
   static createResultFile(
-    data: BlobPart, 
-    originalName: string, 
+    data: BlobPart,
+    originalName: string,
     prefix: string = AUTOMATION_CONSTANTS.PROCESSED_FILE_PREFIX,
-    type: string = 'application/pdf'
+    type: string = "application/pdf",
   ): File {
     return new File([data], `${prefix}${originalName}`, { type });
   }
@@ -53,8 +53,8 @@ export class ResourceManager {
   static createTimestampedFile(
     data: BlobPart,
     prefix: string,
-    extension: string = '.pdf',
-    type: string = 'application/pdf'
+    extension: string = ".pdf",
+    type: string = "application/pdf",
   ): File {
     const timestamp = Date.now();
     return new File([data], `${prefix}${timestamp}${extension}`, { type });
@@ -68,4 +68,4 @@ export function useResourceCleanup(): () => void {
   return useCallback(() => {
     ResourceManager.revokeAllBlobUrls();
   }, []);
-}
\ No newline at end of file
+}
diff --git a/frontend/src/core/utils/scarfTracking.ts b/frontend/src/core/utils/scarfTracking.ts
index 9824d9b3be..a7078cb85e 100644
--- a/frontend/src/core/utils/scarfTracking.ts
+++ b/frontend/src/core/utils/scarfTracking.ts
@@ -28,7 +28,7 @@ let lastFiredTime = 0;
  */
 export function setScarfConfig(
   scarfEnabled: boolean | null,
-  consentChecker: (service: string, category: string) => boolean
+  consentChecker: (service: string, category: string) => boolean,
 ): void {
   configured = true;
   enableScarf = scarfEnabled;
@@ -49,8 +49,7 @@ export function firePixel(pathname: string): void {
   // Dev-mode warning if called before initialization
   if (!configured) {
     console.warn(
-      '[scarfTracking] firePixel() called before setScarfConfig(). ' +
-      'Ensure useScarfTracking() hook is mounted in App.tsx.'
+      "[scarfTracking] firePixel() called before setScarfConfig(). " + "Ensure useScarfTracking() hook is mounted in App.tsx.",
     );
     return;
   }
@@ -61,7 +60,7 @@ export function firePixel(pathname: string): void {
   }
 
   // Check if consent checker is available and scarf service is accepted
-  if (!isServiceAccepted || !isServiceAccepted('scarf', 'analytics')) {
+  if (!isServiceAccepted || !isServiceAccepted("scarf", "analytics")) {
     return;
   }
 
@@ -75,8 +74,8 @@ export function firePixel(pathname: string): void {
   lastFiredPathname = pathname;
   lastFiredTime = now;
 
-  const url = 'https://static.scarf.sh/a.png?x-pxid=3c1d68de-8945-4e9f-873f-65320b6fabf7'
-             + '&path=' + encodeURIComponent(pathname);
+  const url =
+    "https://static.scarf.sh/a.png?x-pxid=3c1d68de-8945-4e9f-873f-65320b6fabf7" + "&path=" + encodeURIComponent(pathname);
 
   const img = new Image();
   img.referrerPolicy = "no-referrer-when-downgrade";
diff --git a/frontend/src/core/utils/scriptLoader.ts b/frontend/src/core/utils/scriptLoader.ts
index bf0b64dedb..7c9b7a1cc4 100644
--- a/frontend/src/core/utils/scriptLoader.ts
+++ b/frontend/src/core/utils/scriptLoader.ts
@@ -30,7 +30,7 @@ export function loadScript({ src, id, async = true, defer = false, onLoad }: Scr
     }
 
     // Create and append script
-    const script = document.createElement('script');
+    const script = document.createElement("script");
     script.src = src;
     if (id) script.id = id;
     script.async = async;
diff --git a/frontend/src/core/utils/settingsNavigation.ts b/frontend/src/core/utils/settingsNavigation.ts
index f910002fc0..b5b433d4d9 100644
--- a/frontend/src/core/utils/settingsNavigation.ts
+++ b/frontend/src/core/utils/settingsNavigation.ts
@@ -1,4 +1,4 @@
-import { NavKey } from '@app/components/shared/config/types';
+import { NavKey } from "@app/components/shared/config/types";
 
 /**
  * Navigate to a specific settings section
@@ -13,12 +13,12 @@ import { NavKey } from '@app/components/shared/config/types';
  * navigateToSettings('adminPremium');
  */
 export function navigateToSettings(section: NavKey) {
-  const basePath = window.location.pathname.split('/settings')[0] || '';
+  const basePath = window.location.pathname.split("/settings")[0] || "";
   const newPath = `${basePath}/settings/${section}`;
-  window.history.pushState({}, '', newPath);
+  window.history.pushState({}, "", newPath);
 
   // Trigger a popstate event to notify components
-  window.dispatchEvent(new PopStateEvent('popstate'));
+  window.dispatchEvent(new PopStateEvent("popstate"));
 }
 
 /**
@@ -46,7 +46,7 @@ export function isInSettings(section?: NavKey): boolean {
   const pathname = window.location.pathname;
 
   if (!section) {
-    return pathname.startsWith('/settings');
+    return pathname.startsWith("/settings");
   }
 
   return pathname === `/settings/${section}`;
diff --git a/frontend/src/core/utils/settingsPendingHelper.ts b/frontend/src/core/utils/settingsPendingHelper.ts
index 63ea354ef5..281ced28cc 100644
--- a/frontend/src/core/utils/settingsPendingHelper.ts
+++ b/frontend/src/core/utils/settingsPendingHelper.ts
@@ -23,11 +23,11 @@ export interface SettingsWithPending<T = any> {
  * @param settings Settings object from backend (may contain _pending block)
  * @returns Merged settings with pending values applied
  */
-export function mergePendingSettings<T extends SettingsWithPending>(settings: T): Omit<T, '_pending'> {
+export function mergePendingSettings<T extends SettingsWithPending>(settings: T): Omit<T, "_pending"> {
   if (!settings || !settings._pending) {
     // No pending changes, return as-is (without _pending property)
     const { _pending, ...rest } = settings || {};
-    return rest as Omit<T, '_pending'>;
+    return rest as Omit<T, "_pending">;
   }
 
   // Deep merge pending changes
@@ -35,7 +35,7 @@ export function mergePendingSettings<T extends SettingsWithPending>(settings: T)
 
   // Remove _pending from result
   const { _pending, ...result } = merged;
-  return result as Omit<T, '_pending'>;
+  return result as Omit<T, "_pending">;
 }
 
 /**
@@ -45,10 +45,7 @@ export function mergePendingSettings<T extends SettingsWithPending>(settings: T)
  * @param fieldPath Dot-notation path to the field (e.g., "oauth2.clientSecret")
  * @returns True if field has pending changes
  */
-export function isFieldPending<T extends SettingsWithPending>(
-  settings: T | null | undefined,
-  fieldPath: string
-): boolean {
+export function isFieldPending<T extends SettingsWithPending>(settings: T | null | undefined, fieldPath: string): boolean {
   if (!settings?._pending) {
     console.log(`[isFieldPending] No _pending block found for field: ${fieldPath}`);
     return false;
@@ -71,9 +68,7 @@ export function isFieldPending<T extends SettingsWithPending>(
  * @param settings Settings object from backend
  * @returns True if there are any pending changes
  */
-export function hasPendingChanges<T extends SettingsWithPending>(
-  settings: T | null | undefined
-): boolean {
+export function hasPendingChanges<T extends SettingsWithPending>(settings: T | null | undefined): boolean {
   return settings?._pending !== undefined && Object.keys(settings._pending).length > 0;
 }
 
@@ -84,10 +79,7 @@ export function hasPendingChanges<T extends SettingsWithPending>(
  * @param fieldPath Dot-notation path to the field
  * @returns Pending value or undefined
  */
-export function getPendingValue<T extends SettingsWithPending>(
-  settings: T | null | undefined,
-  fieldPath: string
-): any {
+export function getPendingValue<T extends SettingsWithPending>(settings: T | null | undefined, fieldPath: string): any {
   if (!settings?._pending) {
     return undefined;
   }
@@ -102,10 +94,7 @@ export function getPendingValue<T extends SettingsWithPending>(
  * @param fieldPath Dot-notation path to the field
  * @returns Current active value
  */
-export function getCurrentValue<T extends SettingsWithPending>(
-  settings: T | null | undefined,
-  fieldPath: string
-): any {
+export function getCurrentValue<T extends SettingsWithPending>(settings: T | null | undefined, fieldPath: string): any {
   if (!settings) {
     return undefined;
   }
@@ -148,7 +137,7 @@ function deepMerge(target: any, source: any): any {
 function getNestedValue(obj: any, path: string): any {
   if (!obj || !path) return undefined;
 
-  const parts = path.split('.');
+  const parts = path.split(".");
   let current = obj;
 
   for (const part of parts) {
@@ -165,9 +154,5 @@ function getNestedValue(obj: any, path: string): any {
  * Check if value is a plain object (not array, not null, not Date, etc.)
  */
 function isPlainObject(value: any): boolean {
-  return (
-    value !== null &&
-    typeof value === 'object' &&
-    value.constructor === Object
-  );
+  return value !== null && typeof value === "object" && value.constructor === Object;
 }
diff --git a/frontend/src/core/utils/sidebarUtils.ts b/frontend/src/core/utils/sidebarUtils.ts
index 67b0a4123c..cdc965b654 100644
--- a/frontend/src/core/utils/sidebarUtils.ts
+++ b/frontend/src/core/utils/sidebarUtils.ts
@@ -1,4 +1,4 @@
-import { SidebarRefs, SidebarState, SidebarInfo } from '@app/types/sidebar';
+import { SidebarRefs, SidebarState, SidebarInfo } from "@app/types/sidebar";
 
 /**
  * Gets the All tools sidebar information using React refs and state
@@ -9,12 +9,12 @@ import { SidebarRefs, SidebarState, SidebarInfo } from '@app/types/sidebar';
 export function getSidebarInfo(refs: SidebarRefs, state: SidebarState): SidebarInfo {
   const { quickAccessRef, toolPanelRef } = refs;
   const { sidebarsVisible, readerMode } = state;
-  
+
   // Determine if tool panel should be active based on state
   const isToolPanelActive = sidebarsVisible && !readerMode;
-  
+
   let rect: DOMRect | null = null;
-  
+
   if (isToolPanelActive && toolPanelRef.current) {
     // Tool panel is expanded: use its rect
     rect = toolPanelRef.current.getBoundingClientRect();
@@ -23,12 +23,10 @@ export function getSidebarInfo(refs: SidebarRefs, state: SidebarState): SidebarI
     // This probably isn't needed but if we ever have tooltips or modals that need to be positioned relative to the quick access bar, we can use this
     rect = quickAccessRef.current.getBoundingClientRect();
   }
-  
+
   return {
     rect,
     isToolPanelActive,
-    sidebarState: state
+    sidebarState: state,
   };
 }
-
- 
\ No newline at end of file
diff --git a/frontend/src/core/utils/signatureFlattening.ts b/frontend/src/core/utils/signatureFlattening.ts
index fdfa1a628a..a89789e4fe 100644
--- a/frontend/src/core/utils/signatureFlattening.ts
+++ b/frontend/src/core/utils/signatureFlattening.ts
@@ -5,17 +5,12 @@ import {
   embedBitmapImageOnPage,
   drawPlaceholderRect,
   decodeImageDataUrl,
-} from '@app/utils/pdfiumBitmapUtils';
-import { generateThumbnailWithMetadata } from '@app/utils/thumbnailUtils';
-import { createChildStub, createProcessedFile } from '@app/contexts/file/fileActions';
-import { createStirlingFile, FileId, StirlingFile, StirlingFileStub } from '@app/types/fileContext';
-import type { SignatureAPI } from '@app/components/viewer/viewerTypes';
-import {
-  getPdfiumModule,
-  openRawDocumentSafe,
-  closeDocAndFreeBuffer,
-  saveRawDocument,
-} from '@app/services/pdfiumService';
+} from "@app/utils/pdfiumBitmapUtils";
+import { generateThumbnailWithMetadata } from "@app/utils/thumbnailUtils";
+import { createChildStub, createProcessedFile } from "@app/contexts/file/fileActions";
+import { createStirlingFile, FileId, StirlingFile, StirlingFileStub } from "@app/types/fileContext";
+import type { SignatureAPI } from "@app/components/viewer/viewerTypes";
+import { getPdfiumModule, openRawDocumentSafe, closeDocAndFreeBuffer, saveRawDocument } from "@app/services/pdfiumService";
 
 interface MinimalFileContextSelectors {
   getAllFileIds: () => FileId[];
@@ -46,7 +41,7 @@ export async function flattenSignatures(options: SignatureFlatteningOptions): Pr
 
   try {
     // Step 1: Extract all annotations from EmbedPDF before export
-    const allAnnotations: Array<{pageIndex: number, annotations: any[]}> = [];
+    const allAnnotations: Array<{ pageIndex: number; annotations: any[] }> = [];
 
     if (signatureApiRef?.current) {
       const scrollState = getScrollState();
@@ -56,16 +51,23 @@ export async function flattenSignatures(options: SignatureFlatteningOptions): Pr
         try {
           const pageAnnotations = await signatureApiRef.current.getPageAnnotations(pageIndex);
           if (pageAnnotations && pageAnnotations.length > 0) {
-            const sessionAnnotations = pageAnnotations.filter(annotation => {
+            const sessionAnnotations = pageAnnotations.filter((annotation) => {
               const hasStoredImageData = annotation.id && getImageData(annotation.id);
-              const hasDirectImageData = annotation.imageData || annotation.appearance ||
-                                       annotation.stampData || annotation.imageSrc ||
-                                       annotation.contents || annotation.data;
-              return hasStoredImageData || (hasDirectImageData && typeof hasDirectImageData === 'string' && hasDirectImageData.startsWith('data:image'));
+              const hasDirectImageData =
+                annotation.imageData ||
+                annotation.appearance ||
+                annotation.stampData ||
+                annotation.imageSrc ||
+                annotation.contents ||
+                annotation.data;
+              return (
+                hasStoredImageData ||
+                (hasDirectImageData && typeof hasDirectImageData === "string" && hasDirectImageData.startsWith("data:image"))
+              );
             });
 
             if (sessionAnnotations.length > 0) {
-              allAnnotations.push({pageIndex, annotations: sessionAnnotations});
+              allAnnotations.push({ pageIndex, annotations: sessionAnnotations });
             }
           }
         } catch (pageError) {
@@ -89,13 +91,13 @@ export async function flattenSignatures(options: SignatureFlatteningOptions): Pr
 
     // Step 3: Use EmbedPDF's saveAsCopy to get the original PDF
     if (!exportActions) {
-      console.error('No export actions available');
+      console.error("No export actions available");
       return null;
     }
     const pdfArrayBuffer = await exportActions.saveAsCopy();
 
     if (pdfArrayBuffer) {
-      const blob = new Blob([pdfArrayBuffer], { type: 'application/pdf' });
+      const blob = new Blob([pdfArrayBuffer], { type: "application/pdf" });
 
       let currentFile = originalFile;
       if (!currentFile) {
@@ -111,11 +113,11 @@ export async function flattenSignatures(options: SignatureFlatteningOptions): Pr
       }
 
       if (!currentFile) {
-        console.error('No file available to replace');
+        console.error("No file available to replace");
         return null;
       }
 
-      let signedFile = new File([blob], currentFile.name, { type: 'application/pdf' });
+      let signedFile = new File([blob], currentFile.name, { type: "application/pdf" });
 
       // Step 4: Manually render extracted annotations onto the PDF using PDFium WASM
       if (allAnnotations.length > 0) {
@@ -150,8 +152,13 @@ export async function flattenSignatures(options: SignatureFlatteningOptions): Pr
                       const pdfX = originalX;
                       const pdfY = pageHeight - originalY - height;
 
-                      let imageDataUrl = annotation.imageData || annotation.appearance || annotation.stampData ||
-                                       annotation.imageSrc || annotation.contents || annotation.data;
+                      let imageDataUrl =
+                        annotation.imageData ||
+                        annotation.appearance ||
+                        annotation.stampData ||
+                        annotation.imageSrc ||
+                        annotation.contents ||
+                        annotation.data;
 
                       if (!imageDataUrl && annotation.id) {
                         const storedImageData = getImageData(annotation.id);
@@ -161,7 +168,7 @@ export async function flattenSignatures(options: SignatureFlatteningOptions): Pr
                       }
 
                       // Convert SVG to PNG first if needed
-                      if (imageDataUrl && typeof imageDataUrl === 'string' && imageDataUrl.startsWith('data:image/svg+xml')) {
+                      if (imageDataUrl && typeof imageDataUrl === "string" && imageDataUrl.startsWith("data:image/svg+xml")) {
                         const pngBytes = await rasteriseSvgToPng(imageDataUrl, width * 2, height * 2);
                         if (pngBytes) {
                           imageDataUrl = await uint8ArrayToPngDataUrl(pngBytes);
@@ -171,7 +178,7 @@ export async function flattenSignatures(options: SignatureFlatteningOptions): Pr
                         }
                       }
 
-                      if (imageDataUrl && typeof imageDataUrl === 'string' && imageDataUrl.startsWith('data:image')) {
+                      if (imageDataUrl && typeof imageDataUrl === "string" && imageDataUrl.startsWith("data:image")) {
                         // Decode the image data URL to raw pixels via canvas
                         const imageResult = await decodeImageDataUrl(imageDataUrl);
                         if (imageResult) {
@@ -182,7 +189,7 @@ export async function flattenSignatures(options: SignatureFlatteningOptions): Pr
                       }
                     }
                   } catch (annotationError) {
-                    console.warn('Failed to render annotation:', annotationError);
+                    console.warn("Failed to render annotation:", annotationError);
                   }
                 }
 
@@ -192,13 +199,13 @@ export async function flattenSignatures(options: SignatureFlatteningOptions): Pr
             }
 
             const resultBuf = await saveRawDocument(docPtr);
-            signedFile = new File([resultBuf], currentFile.name, { type: 'application/pdf' });
+            signedFile = new File([resultBuf], currentFile.name, { type: "application/pdf" });
           } finally {
             closeDocAndFreeBuffer(m, docPtr);
           }
         } catch (renderError) {
-          console.error('Failed to manually render annotations:', renderError);
-          console.warn('Signatures may only show as annotations');
+          console.error("Failed to manually render annotations:", renderError);
+          console.warn("Signatures may only show as annotations");
         }
       }
 
@@ -209,29 +216,29 @@ export async function flattenSignatures(options: SignatureFlatteningOptions): Pr
 
       const record = selectors.getStirlingFileStub(currentFile.fileId);
       if (!record) {
-        console.error('No file record found for:', currentFile.fileId);
+        console.error("No file record found for:", currentFile.fileId);
         return null;
       }
 
       const outputStub = createChildStub(
         record,
-        { toolId: 'sign', timestamp: Date.now() },
+        { toolId: "sign", timestamp: Date.now() },
         signedFile,
         thumbnailResult.thumbnail,
-        processedFileMetadata
+        processedFileMetadata,
       );
       const outputStirlingFile = createStirlingFile(signedFile, outputStub.id);
 
       return {
         inputFileIds,
         outputStirlingFile,
-        outputStub
+        outputStub,
       };
     }
 
     return null;
   } catch (error) {
-    console.error('Error flattening signatures:', error);
+    console.error("Error flattening signatures:", error);
     return null;
   }
 }
@@ -241,7 +248,7 @@ export async function flattenSignatures(options: SignatureFlatteningOptions): Pr
  */
 function uint8ArrayToPngDataUrl(pngBytes: Uint8Array): Promise<string> {
   return new Promise((resolve) => {
-    const blob = new Blob([pngBytes as BlobPart], { type: 'image/png' });
+    const blob = new Blob([pngBytes as BlobPart], { type: "image/png" });
     const reader = new FileReader();
     reader.onloadend = () => resolve(reader.result as string);
     reader.readAsDataURL(blob);
@@ -256,23 +263,28 @@ function rasteriseSvgToPng(svgDataUrl: string, width: number, height: number): P
     const img = new Image();
     img.onload = () => {
       try {
-        const canvas = document.createElement('canvas');
+        const canvas = document.createElement("canvas");
         canvas.width = Math.max(1, Math.round(width));
         canvas.height = Math.max(1, Math.round(height));
-        const ctx = canvas.getContext('2d');
-        if (!ctx) { resolve(null); return; }
+        const ctx = canvas.getContext("2d");
+        if (!ctx) {
+          resolve(null);
+          return;
+        }
         ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
-        canvas.toBlob(
-          (blob) => {
-            if (!blob) { resolve(null); return; }
-            blob.arrayBuffer().then(
-              (buf) => resolve(new Uint8Array(buf)),
-              () => resolve(null),
-            );
-          },
-          'image/png',
-        );
-      } catch { resolve(null); }
+        canvas.toBlob((blob) => {
+          if (!blob) {
+            resolve(null);
+            return;
+          }
+          blob.arrayBuffer().then(
+            (buf) => resolve(new Uint8Array(buf)),
+            () => resolve(null),
+          );
+        }, "image/png");
+      } catch {
+        resolve(null);
+      }
     };
     img.onerror = () => resolve(null);
     img.src = svgDataUrl;
diff --git a/frontend/src/core/utils/signaturePreview.ts b/frontend/src/core/utils/signaturePreview.ts
index 739edfb432..1643e1370a 100644
--- a/frontend/src/core/utils/signaturePreview.ts
+++ b/frontend/src/core/utils/signaturePreview.ts
@@ -1,5 +1,5 @@
-import { SignParameters } from '@app/hooks/tools/sign/useSignParameters';
-import { HORIZONTAL_PADDING_RATIO, VERTICAL_PADDING_RATIO } from '@app/constants/signConstants';
+import { SignParameters } from "@app/hooks/tools/sign/useSignParameters";
+import { HORIZONTAL_PADDING_RATIO, VERTICAL_PADDING_RATIO } from "@app/constants/signConstants";
 
 export interface SignaturePreview {
   dataUrl: string;
@@ -16,7 +16,7 @@ const loadImage = (src: string): Promise<HTMLImageElement> =>
   });
 
 export const buildSignaturePreview = async (config: SignParameters | null): Promise<SignaturePreview | null> => {
-  if (typeof window === 'undefined' || typeof document === 'undefined') {
+  if (typeof window === "undefined" || typeof document === "undefined") {
     return null;
   }
 
@@ -24,21 +24,21 @@ export const buildSignaturePreview = async (config: SignParameters | null): Prom
     return null;
   }
 
-  if (config.signatureType === 'text') {
+  if (config.signatureType === "text") {
     const text = config.signerName?.trim();
     if (!text) {
       return null;
     }
 
     const fontSize = config.fontSize ?? 16;
-    const fontFamily = config.fontFamily ?? 'Helvetica';
-    const textColor = config.textColor ?? '#000000';
+    const fontFamily = config.fontFamily ?? "Helvetica";
+    const textColor = config.textColor ?? "#000000";
 
     const paddingX = Math.round(fontSize * HORIZONTAL_PADDING_RATIO);
     const paddingY = Math.round(fontSize * VERTICAL_PADDING_RATIO);
 
-    const measureCanvas = document.createElement('canvas');
-    const measureCtx = measureCanvas.getContext('2d');
+    const measureCanvas = document.createElement("canvas");
+    const measureCtx = measureCanvas.getContext("2d");
 
     if (!measureCtx) {
       return null;
@@ -51,22 +51,22 @@ export const buildSignaturePreview = async (config: SignParameters | null): Prom
     const width = Math.max(1, textWidth + paddingX * 2);
     const height = Math.max(1, Math.ceil(fontSize + paddingY * 2));
 
-    const canvas = document.createElement('canvas');
+    const canvas = document.createElement("canvas");
     canvas.width = width;
     canvas.height = height;
 
-    const ctx = canvas.getContext('2d');
+    const ctx = canvas.getContext("2d");
     if (!ctx) {
       return null;
     }
 
     ctx.fillStyle = textColor;
     ctx.font = `${fontSize}px ${fontFamily}`;
-    ctx.textBaseline = 'middle';
-    ctx.textAlign = 'left';
+    ctx.textBaseline = "middle";
+    ctx.textAlign = "left";
     ctx.fillText(text, paddingX, height / 2);
 
-    const dataUrl = canvas.toDataURL('image/png');
+    const dataUrl = canvas.toDataURL("image/png");
     return { dataUrl, width, height };
   }
 
diff --git a/frontend/src/core/utils/storageUtils.ts b/frontend/src/core/utils/storageUtils.ts
index 956e9843dc..f7c668c8e7 100644
--- a/frontend/src/core/utils/storageUtils.ts
+++ b/frontend/src/core/utils/storageUtils.ts
@@ -3,7 +3,7 @@ import { StorageStats } from "@app/services/fileStorage";
 /**
  * Storage operation types for incremental updates
  */
-export type StorageOperation = 'add' | 'remove' | 'clear';
+export type StorageOperation = "add" | "remove" | "clear";
 
 /**
  * Update storage stats incrementally based on operation
@@ -11,35 +11,35 @@ export type StorageOperation = 'add' | 'remove' | 'clear';
 export function updateStorageStatsIncremental(
   currentStats: StorageStats,
   operation: StorageOperation,
-  files: File[] = []
+  files: File[] = [],
 ): StorageStats {
   const filesSizeTotal = files.reduce((total, file) => total + file.size, 0);
-  
+
   switch (operation) {
-    case 'add':
+    case "add":
       return {
         ...currentStats,
         used: currentStats.used + filesSizeTotal,
         available: currentStats.available - filesSizeTotal,
-        fileCount: currentStats.fileCount + files.length
+        fileCount: currentStats.fileCount + files.length,
       };
-      
-    case 'remove':
+
+    case "remove":
       return {
         ...currentStats,
         used: Math.max(0, currentStats.used - filesSizeTotal),
         available: currentStats.available + filesSizeTotal,
-        fileCount: Math.max(0, currentStats.fileCount - files.length)
+        fileCount: Math.max(0, currentStats.fileCount - files.length),
       };
-      
-    case 'clear':
+
+    case "clear":
       return {
         ...currentStats,
         used: 0,
         available: currentStats.quota || currentStats.available,
-        fileCount: 0
+        fileCount: 0,
       };
-      
+
     default:
       return currentStats;
   }
@@ -50,15 +50,15 @@ export function updateStorageStatsIncremental(
  */
 export function checkStorageWarnings(stats: StorageStats): string | null {
   if (!stats.quota || stats.used === 0) return null;
-  
+
   const usagePercent = (stats.used / stats.quota) * 100;
-  
+
   if (usagePercent > 90) {
-    return 'Warning: Storage is nearly full (>90%). Browser may start clearing data.';
+    return "Warning: Storage is nearly full (>90%). Browser may start clearing data.";
   } else if (usagePercent > 80) {
-    return 'Storage is getting full (>80%). Consider removing old files.';
+    return "Storage is getting full (>80%). Consider removing old files.";
   }
-  
+
   return null;
 }
 
@@ -67,4 +67,4 @@ export function checkStorageWarnings(stats: StorageStats): string | null {
  */
 export function getStorageUsagePercent(stats: StorageStats): number {
   return stats.quota ? (stats.used / stats.quota) * 100 : 0;
-}
\ No newline at end of file
+}
diff --git a/frontend/src/core/utils/textDiff.ts b/frontend/src/core/utils/textDiff.ts
index fcf36a7d01..d977a47fcb 100644
--- a/frontend/src/core/utils/textDiff.ts
+++ b/frontend/src/core/utils/textDiff.ts
@@ -11,8 +11,11 @@ export const appendWord = (existing: string, word: string) => {
 };
 export const tokenize = (text: string): string[] => text.split(/\s+/).filter(Boolean);
 
-type TokenType = 'unchanged' | 'removed' | 'added';
-export interface LocalToken { type: TokenType; text: string }
+type TokenType = "unchanged" | "removed" | "added";
+export interface LocalToken {
+  type: TokenType;
+  text: string;
+}
 
 const buildLcsMatrix = (a: string[], b: string[]) => {
   const rows = a.length + 1;
@@ -34,17 +37,16 @@ export const diffWords = (a: string[], b: string[]): LocalToken[] => {
   let j = b.length;
   while (i > 0 || j > 0) {
     if (i > 0 && j > 0 && a[i - 1] === b[j - 1]) {
-      tokens.unshift({ type: 'unchanged', text: a[i - 1] });
-      i -= 1; j -= 1;
+      tokens.unshift({ type: "unchanged", text: a[i - 1] });
+      i -= 1;
+      j -= 1;
     } else if (j > 0 && (i === 0 || matrix[i][j] === matrix[i][j - 1])) {
-      tokens.unshift({ type: 'added', text: b[j - 1] });
+      tokens.unshift({ type: "added", text: b[j - 1] });
       j -= 1;
     } else if (i > 0) {
-      tokens.unshift({ type: 'removed', text: a[i - 1] });
+      tokens.unshift({ type: "removed", text: a[i - 1] });
       i -= 1;
     }
   }
   return tokens;
 };
-
-
diff --git a/frontend/src/core/utils/textUtils.ts b/frontend/src/core/utils/textUtils.ts
index 91f4db97e7..449900d97e 100644
--- a/frontend/src/core/utils/textUtils.ts
+++ b/frontend/src/core/utils/textUtils.ts
@@ -4,7 +4,7 @@
  */
 export function truncateCenter(text: string, maxLength: number = 25): string {
   if (text.length <= maxLength) return text;
-  const ellipsis = '...';
+  const ellipsis = "...";
   const charsToShow = maxLength - ellipsis.length;
   const frontChars = Math.ceil(charsToShow / 2);
   const backChars = Math.floor(charsToShow / 2);
@@ -18,5 +18,8 @@ export function truncateCenter(text: string, maxLength: number = 25): string {
  */
 export const removeEmojis = (text: string): string => {
   // Filter out emoji characters (Unicode ranges for emojis)
-  return text.replace(/[\u{1F600}-\u{1F64F}]|[\u{1F300}-\u{1F5FF}]|[\u{1F680}-\u{1F6FF}]|[\u{1F1E0}-\u{1F1FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/gu, '');
-};
\ No newline at end of file
+  return text.replace(
+    /[\u{1F600}-\u{1F64F}]|[\u{1F300}-\u{1F5FF}]|[\u{1F680}-\u{1F6FF}]|[\u{1F1E0}-\u{1F1FF}]|[\u{2600}-\u{26FF}]|[\u{2700}-\u{27BF}]/gu,
+    "",
+  );
+};
diff --git a/frontend/src/core/utils/thumbnailUtils.ts b/frontend/src/core/utils/thumbnailUtils.ts
index 89d793d632..c7970ed643 100644
--- a/frontend/src/core/utils/thumbnailUtils.ts
+++ b/frontend/src/core/utils/thumbnailUtils.ts
@@ -1,4 +1,4 @@
-import { pdfWorkerManager } from '@app/services/pdfWorkerManager';
+import { pdfWorkerManager } from "@app/services/pdfWorkerManager";
 
 export interface ThumbnailWithMetadata {
   thumbnail: string; // Always returns a thumbnail (placeholder if needed)
@@ -23,25 +23,24 @@ interface ColorScheme {
  */
 export function calculateScaleFromFileSize(fileSize: number): number {
   const MB = 1024 * 1024;
-  if (fileSize < 10 * MB) return 1.0;   // Full quality for small files
-  if (fileSize < 50 * MB) return 0.8;   // High quality for common file sizes
-  if (fileSize < 200 * MB) return 0.6;  // Good quality for typical large files
-  if (fileSize < 500 * MB) return 0.4;  // Readable quality for large but manageable files
-  return 0.3;  // Still usable quality, not tiny
+  if (fileSize < 10 * MB) return 1.0; // Full quality for small files
+  if (fileSize < 50 * MB) return 0.8; // High quality for common file sizes
+  if (fileSize < 200 * MB) return 0.6; // Good quality for typical large files
+  if (fileSize < 500 * MB) return 0.4; // Readable quality for large but manageable files
+  return 0.3; // Still usable quality, not tiny
 }
 
-
 /**
  * Generate encrypted PDF thumbnail with lock icon
  */
 function generateEncryptedPDFThumbnail(file: File): string {
-  const canvas = document.createElement('canvas');
+  const canvas = document.createElement("canvas");
   canvas.width = 120;
   canvas.height = 150;
-  const ctx = canvas.getContext('2d')!;
+  const ctx = canvas.getContext("2d")!;
 
   // Use PDF color scheme but with encrypted styling
-  const colorScheme = getFileTypeColorScheme('PDF');
+  const colorScheme = getFileTypeColorScheme("PDF");
 
   // Create gradient background
   const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
@@ -66,14 +65,14 @@ function generateEncryptedPDFThumbnail(file: File): string {
   // "PDF" text under the lock
   ctx.font = 'bold 14px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
   ctx.fillStyle = colorScheme.icon;
-  ctx.textAlign = 'center';
-  ctx.fillText('PDF', canvas.width / 2, canvas.height / 2 + 35);
+  ctx.textAlign = "center";
+  ctx.fillText("PDF", canvas.width / 2, canvas.height / 2 + 35);
 
   // File size with subtle styling
   const sizeText = formatFileSize(file.size);
   ctx.font = '11px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
   ctx.fillStyle = colorScheme.textSecondary;
-  ctx.textAlign = 'center';
+  ctx.textAlign = "center";
   ctx.fillText(sizeText, canvas.width / 2, canvas.height - 15);
 
   return canvas.toDataURL();
@@ -83,13 +82,13 @@ function generateEncryptedPDFThumbnail(file: File): string {
  * Generate modern placeholder thumbnail with file extension
  */
 function generatePlaceholderThumbnail(file: File): string {
-  const canvas = document.createElement('canvas');
+  const canvas = document.createElement("canvas");
   canvas.width = 120;
   canvas.height = 150;
-  const ctx = canvas.getContext('2d')!;
+  const ctx = canvas.getContext("2d")!;
 
   // Get file extension for color theming
-  const extension = file.name.split('.').pop()?.toUpperCase() || 'FILE';
+  const extension = file.name.split(".").pop()?.toUpperCase() || "FILE";
   const colorScheme = getFileTypeColorScheme(extension);
 
   // Create gradient background
@@ -117,7 +116,7 @@ function generatePlaceholderThumbnail(file: File): string {
   const sizeText = formatFileSize(file.size);
   ctx.font = '11px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
   ctx.fillStyle = colorScheme.textSecondary;
-  ctx.textAlign = 'center';
+  ctx.textAlign = "center";
   ctx.fillText(sizeText, canvas.width / 2, canvas.height - 15);
 
   return canvas.toDataURL();
@@ -129,54 +128,286 @@ function generatePlaceholderThumbnail(file: File): string {
 function getFileTypeColorScheme(extension: string): ColorScheme {
   const schemes: Record<string, ColorScheme> = {
     // Documents
-    'PDF': { bgTop: '#FF6B6B20', bgBottom: '#FF6B6B10', border: '#FF6B6B40', icon: '#FF6B6B', badge: '#FF6B6B', textPrimary: '#FFFFFF', textSecondary: '#666666' },
-    'DOC': { bgTop: '#4ECDC420', bgBottom: '#4ECDC410', border: '#4ECDC440', icon: '#4ECDC4', badge: '#4ECDC4', textPrimary: '#FFFFFF', textSecondary: '#666666' },
-    'DOCX': { bgTop: '#4ECDC420', bgBottom: '#4ECDC410', border: '#4ECDC440', icon: '#4ECDC4', badge: '#4ECDC4', textPrimary: '#FFFFFF', textSecondary: '#666666' },
-    'ODT': { bgTop: '#4ECDC420', bgBottom: '#4ECDC410', border: '#4ECDC440', icon: '#4ECDC4', badge: '#4ECDC4', textPrimary: '#FFFFFF', textSecondary: '#666666' },
-    'TXT': { bgTop: '#95A5A620', bgBottom: '#95A5A610', border: '#95A5A640', icon: '#95A5A6', badge: '#95A5A6', textPrimary: '#FFFFFF', textSecondary: '#666666' },
-    'RTF': { bgTop: '#95A5A620', bgBottom: '#95A5A610', border: '#95A5A640', icon: '#95A5A6', badge: '#95A5A6', textPrimary: '#FFFFFF', textSecondary: '#666666' },
+    PDF: {
+      bgTop: "#FF6B6B20",
+      bgBottom: "#FF6B6B10",
+      border: "#FF6B6B40",
+      icon: "#FF6B6B",
+      badge: "#FF6B6B",
+      textPrimary: "#FFFFFF",
+      textSecondary: "#666666",
+    },
+    DOC: {
+      bgTop: "#4ECDC420",
+      bgBottom: "#4ECDC410",
+      border: "#4ECDC440",
+      icon: "#4ECDC4",
+      badge: "#4ECDC4",
+      textPrimary: "#FFFFFF",
+      textSecondary: "#666666",
+    },
+    DOCX: {
+      bgTop: "#4ECDC420",
+      bgBottom: "#4ECDC410",
+      border: "#4ECDC440",
+      icon: "#4ECDC4",
+      badge: "#4ECDC4",
+      textPrimary: "#FFFFFF",
+      textSecondary: "#666666",
+    },
+    ODT: {
+      bgTop: "#4ECDC420",
+      bgBottom: "#4ECDC410",
+      border: "#4ECDC440",
+      icon: "#4ECDC4",
+      badge: "#4ECDC4",
+      textPrimary: "#FFFFFF",
+      textSecondary: "#666666",
+    },
+    TXT: {
+      bgTop: "#95A5A620",
+      bgBottom: "#95A5A610",
+      border: "#95A5A640",
+      icon: "#95A5A6",
+      badge: "#95A5A6",
+      textPrimary: "#FFFFFF",
+      textSecondary: "#666666",
+    },
+    RTF: {
+      bgTop: "#95A5A620",
+      bgBottom: "#95A5A610",
+      border: "#95A5A640",
+      icon: "#95A5A6",
+      badge: "#95A5A6",
+      textPrimary: "#FFFFFF",
+      textSecondary: "#666666",
+    },
 
     // Spreadsheets
-    'XLS': { bgTop: '#2ECC7120', bgBottom: '#2ECC7110', border: '#2ECC7140', icon: '#2ECC71', badge: '#2ECC71', textPrimary: '#FFFFFF', textSecondary: '#666666' },
-    'XLSX': { bgTop: '#2ECC7120', bgBottom: '#2ECC7110', border: '#2ECC7140', icon: '#2ECC71', badge: '#2ECC71', textPrimary: '#FFFFFF', textSecondary: '#666666' },
-    'ODS': { bgTop: '#2ECC7120', bgBottom: '#2ECC7110', border: '#2ECC7140', icon: '#2ECC71', badge: '#2ECC71', textPrimary: '#FFFFFF', textSecondary: '#666666' },
-    'CSV': { bgTop: '#2ECC7120', bgBottom: '#2ECC7110', border: '#2ECC7140', icon: '#2ECC71', badge: '#2ECC71', textPrimary: '#FFFFFF', textSecondary: '#666666' },
+    XLS: {
+      bgTop: "#2ECC7120",
+      bgBottom: "#2ECC7110",
+      border: "#2ECC7140",
+      icon: "#2ECC71",
+      badge: "#2ECC71",
+      textPrimary: "#FFFFFF",
+      textSecondary: "#666666",
+    },
+    XLSX: {
+      bgTop: "#2ECC7120",
+      bgBottom: "#2ECC7110",
+      border: "#2ECC7140",
+      icon: "#2ECC71",
+      badge: "#2ECC71",
+      textPrimary: "#FFFFFF",
+      textSecondary: "#666666",
+    },
+    ODS: {
+      bgTop: "#2ECC7120",
+      bgBottom: "#2ECC7110",
+      border: "#2ECC7140",
+      icon: "#2ECC71",
+      badge: "#2ECC71",
+      textPrimary: "#FFFFFF",
+      textSecondary: "#666666",
+    },
+    CSV: {
+      bgTop: "#2ECC7120",
+      bgBottom: "#2ECC7110",
+      border: "#2ECC7140",
+      icon: "#2ECC71",
+      badge: "#2ECC71",
+      textPrimary: "#FFFFFF",
+      textSecondary: "#666666",
+    },
 
     // Presentations
-    'PPT': { bgTop: '#E67E2220', bgBottom: '#E67E2210', border: '#E67E2240', icon: '#E67E22', badge: '#E67E22', textPrimary: '#FFFFFF', textSecondary: '#666666' },
-    'PPTX': { bgTop: '#E67E2220', bgBottom: '#E67E2210', border: '#E67E2240', icon: '#E67E22', badge: '#E67E22', textPrimary: '#FFFFFF', textSecondary: '#666666' },
-    'ODP': { bgTop: '#E67E2220', bgBottom: '#E67E2210', border: '#E67E2240', icon: '#E67E22', badge: '#E67E22', textPrimary: '#FFFFFF', textSecondary: '#666666' },
+    PPT: {
+      bgTop: "#E67E2220",
+      bgBottom: "#E67E2210",
+      border: "#E67E2240",
+      icon: "#E67E22",
+      badge: "#E67E22",
+      textPrimary: "#FFFFFF",
+      textSecondary: "#666666",
+    },
+    PPTX: {
+      bgTop: "#E67E2220",
+      bgBottom: "#E67E2210",
+      border: "#E67E2240",
+      icon: "#E67E22",
+      badge: "#E67E22",
+      textPrimary: "#FFFFFF",
+      textSecondary: "#666666",
+    },
+    ODP: {
+      bgTop: "#E67E2220",
+      bgBottom: "#E67E2210",
+      border: "#E67E2240",
+      icon: "#E67E22",
+      badge: "#E67E22",
+      textPrimary: "#FFFFFF",
+      textSecondary: "#666666",
+    },
 
     // Images
-    'JPG': { bgTop: '#FF9F4320', bgBottom: '#FF9F4310', border: '#FF9F4340', icon: '#FF9F43', badge: '#FF9F43', textPrimary: '#FFFFFF', textSecondary: '#666666' },
-    'JPEG': { bgTop: '#FF9F4320', bgBottom: '#FF9F4310', border: '#FF9F4340', icon: '#FF9F43', badge: '#FF9F43', textPrimary: '#FFFFFF', textSecondary: '#666666' },
-    'PNG': { bgTop: '#FF9F4320', bgBottom: '#FF9F4310', border: '#FF9F4340', icon: '#FF9F43', badge: '#FF9F43', textPrimary: '#FFFFFF', textSecondary: '#666666' },
-    'GIF': { bgTop: '#FF9F4320', bgBottom: '#FF9F4310', border: '#FF9F4340', icon: '#FF9F43', badge: '#FF9F43', textPrimary: '#FFFFFF', textSecondary: '#666666' },
-    'BMP': { bgTop: '#FF9F4320', bgBottom: '#FF9F4310', border: '#FF9F4340', icon: '#FF9F43', badge: '#FF9F43', textPrimary: '#FFFFFF', textSecondary: '#666666' },
-    'TIFF': { bgTop: '#FF9F4320', bgBottom: '#FF9F4310', border: '#FF9F4340', icon: '#FF9F43', badge: '#FF9F43', textPrimary: '#FFFFFF', textSecondary: '#666666' },
-    'WEBP': { bgTop: '#FF9F4320', bgBottom: '#FF9F4310', border: '#FF9F4340', icon: '#FF9F43', badge: '#FF9F43', textPrimary: '#FFFFFF', textSecondary: '#666666' },
-    'SVG': { bgTop: '#FF9F4320', bgBottom: '#FF9F4310', border: '#FF9F4340', icon: '#FF9F43', badge: '#FF9F43', textPrimary: '#FFFFFF', textSecondary: '#666666' },
+    JPG: {
+      bgTop: "#FF9F4320",
+      bgBottom: "#FF9F4310",
+      border: "#FF9F4340",
+      icon: "#FF9F43",
+      badge: "#FF9F43",
+      textPrimary: "#FFFFFF",
+      textSecondary: "#666666",
+    },
+    JPEG: {
+      bgTop: "#FF9F4320",
+      bgBottom: "#FF9F4310",
+      border: "#FF9F4340",
+      icon: "#FF9F43",
+      badge: "#FF9F43",
+      textPrimary: "#FFFFFF",
+      textSecondary: "#666666",
+    },
+    PNG: {
+      bgTop: "#FF9F4320",
+      bgBottom: "#FF9F4310",
+      border: "#FF9F4340",
+      icon: "#FF9F43",
+      badge: "#FF9F43",
+      textPrimary: "#FFFFFF",
+      textSecondary: "#666666",
+    },
+    GIF: {
+      bgTop: "#FF9F4320",
+      bgBottom: "#FF9F4310",
+      border: "#FF9F4340",
+      icon: "#FF9F43",
+      badge: "#FF9F43",
+      textPrimary: "#FFFFFF",
+      textSecondary: "#666666",
+    },
+    BMP: {
+      bgTop: "#FF9F4320",
+      bgBottom: "#FF9F4310",
+      border: "#FF9F4340",
+      icon: "#FF9F43",
+      badge: "#FF9F43",
+      textPrimary: "#FFFFFF",
+      textSecondary: "#666666",
+    },
+    TIFF: {
+      bgTop: "#FF9F4320",
+      bgBottom: "#FF9F4310",
+      border: "#FF9F4340",
+      icon: "#FF9F43",
+      badge: "#FF9F43",
+      textPrimary: "#FFFFFF",
+      textSecondary: "#666666",
+    },
+    WEBP: {
+      bgTop: "#FF9F4320",
+      bgBottom: "#FF9F4310",
+      border: "#FF9F4340",
+      icon: "#FF9F43",
+      badge: "#FF9F43",
+      textPrimary: "#FFFFFF",
+      textSecondary: "#666666",
+    },
+    SVG: {
+      bgTop: "#FF9F4320",
+      bgBottom: "#FF9F4310",
+      border: "#FF9F4340",
+      icon: "#FF9F43",
+      badge: "#FF9F43",
+      textPrimary: "#FFFFFF",
+      textSecondary: "#666666",
+    },
 
     // Web
-    'HTML': { bgTop: '#FD79A820', bgBottom: '#FD79A810', border: '#FD79A840', icon: '#FD79A8', badge: '#FD79A8', textPrimary: '#FFFFFF', textSecondary: '#666666' },
-    'XML': { bgTop: '#FD79A820', bgBottom: '#FD79A810', border: '#FD79A840', icon: '#FD79A8', badge: '#FD79A8', textPrimary: '#FFFFFF', textSecondary: '#666666' },
+    HTML: {
+      bgTop: "#FD79A820",
+      bgBottom: "#FD79A810",
+      border: "#FD79A840",
+      icon: "#FD79A8",
+      badge: "#FD79A8",
+      textPrimary: "#FFFFFF",
+      textSecondary: "#666666",
+    },
+    XML: {
+      bgTop: "#FD79A820",
+      bgBottom: "#FD79A810",
+      border: "#FD79A840",
+      icon: "#FD79A8",
+      badge: "#FD79A8",
+      textPrimary: "#FFFFFF",
+      textSecondary: "#666666",
+    },
 
     // Text/Markup
-    'MD': { bgTop: '#6C5CE720', bgBottom: '#6C5CE710', border: '#6C5CE740', icon: '#6C5CE7', badge: '#6C5CE7', textPrimary: '#FFFFFF', textSecondary: '#666666' },
+    MD: {
+      bgTop: "#6C5CE720",
+      bgBottom: "#6C5CE710",
+      border: "#6C5CE740",
+      icon: "#6C5CE7",
+      badge: "#6C5CE7",
+      textPrimary: "#FFFFFF",
+      textSecondary: "#666666",
+    },
 
     // Email
-    'EML': { bgTop: '#A29BFE20', bgBottom: '#A29BFE10', border: '#A29BFE40', icon: '#A29BFE', badge: '#A29BFE', textPrimary: '#FFFFFF', textSecondary: '#666666' },
+    EML: {
+      bgTop: "#A29BFE20",
+      bgBottom: "#A29BFE10",
+      border: "#A29BFE40",
+      icon: "#A29BFE",
+      badge: "#A29BFE",
+      textPrimary: "#FFFFFF",
+      textSecondary: "#666666",
+    },
 
     // Archives
-    'ZIP': { bgTop: '#9B59B620', bgBottom: '#9B59B610', border: '#9B59B640', icon: '#9B59B6', badge: '#9B59B6', textPrimary: '#FFFFFF', textSecondary: '#666666' },
-    'RAR': { bgTop: '#9B59B620', bgBottom: '#9B59B610', border: '#9B59B640', icon: '#9B59B6', badge: '#9B59B6', textPrimary: '#FFFFFF', textSecondary: '#666666' },
-    '7Z': { bgTop: '#9B59B620', bgBottom: '#9B59B610', border: '#9B59B640', icon: '#9B59B6', badge: '#9B59B6', textPrimary: '#FFFFFF', textSecondary: '#666666' },
+    ZIP: {
+      bgTop: "#9B59B620",
+      bgBottom: "#9B59B610",
+      border: "#9B59B640",
+      icon: "#9B59B6",
+      badge: "#9B59B6",
+      textPrimary: "#FFFFFF",
+      textSecondary: "#666666",
+    },
+    RAR: {
+      bgTop: "#9B59B620",
+      bgBottom: "#9B59B610",
+      border: "#9B59B640",
+      icon: "#9B59B6",
+      badge: "#9B59B6",
+      textPrimary: "#FFFFFF",
+      textSecondary: "#666666",
+    },
+    "7Z": {
+      bgTop: "#9B59B620",
+      bgBottom: "#9B59B610",
+      border: "#9B59B640",
+      icon: "#9B59B6",
+      badge: "#9B59B6",
+      textPrimary: "#FFFFFF",
+      textSecondary: "#666666",
+    },
 
     // Default
-    'DEFAULT': { bgTop: '#74B9FF20', bgBottom: '#74B9FF10', border: '#74B9FF40', icon: '#74B9FF', badge: '#74B9FF', textPrimary: '#FFFFFF', textSecondary: '#666666' }
+    DEFAULT: {
+      bgTop: "#74B9FF20",
+      bgBottom: "#74B9FF10",
+      border: "#74B9FF40",
+      icon: "#74B9FF",
+      badge: "#74B9FF",
+      textPrimary: "#FFFFFF",
+      textSecondary: "#666666",
+    },
   };
 
-  return schemes[extension] || schemes['DEFAULT'];
+  return schemes[extension] || schemes["DEFAULT"];
 }
 
 /**
@@ -206,16 +437,16 @@ function drawModernDocumentIcon(ctx: CanvasRenderingContext2D, centerX: number,
   ctx.lineWidth = 2;
 
   // Document body
-  drawRoundedRect(ctx, centerX - size/2, centerY - size/2, size, size * 1.2, 3);
+  drawRoundedRect(ctx, centerX - size / 2, centerY - size / 2, size, size * 1.2, 3);
   ctx.fill();
 
   // Folded corner
   ctx.beginPath();
-  ctx.moveTo(centerX + size/2 - 6, centerY - size/2);
-  ctx.lineTo(centerX + size/2, centerY - size/2 + 6);
-  ctx.lineTo(centerX + size/2 - 6, centerY - size/2 + 6);
+  ctx.moveTo(centerX + size / 2 - 6, centerY - size / 2);
+  ctx.lineTo(centerX + size / 2, centerY - size / 2 + 6);
+  ctx.lineTo(centerX + size / 2 - 6, centerY - size / 2 + 6);
   ctx.closePath();
-  ctx.fillStyle = '#FFFFFF40';
+  ctx.fillStyle = "#FFFFFF40";
   ctx.fill();
 }
 
@@ -267,7 +498,7 @@ async function generateStandardPDFThumbnail(pdf: any, scale: number): Promise<st
   const context = canvas.getContext("2d");
 
   if (!context) {
-    throw new Error('Could not get canvas context');
+    throw new Error("Could not get canvas context");
   }
 
   await page.render({ canvasContext: context, viewport }).promise;
@@ -277,19 +508,25 @@ async function generateStandardPDFThumbnail(pdf: any, scale: number): Promise<st
 /**
  * Draw extension badge
  */
-function drawExtensionBadge(ctx: CanvasRenderingContext2D, centerX: number, centerY: number, extension: string, colorScheme: ColorScheme) {
+function drawExtensionBadge(
+  ctx: CanvasRenderingContext2D,
+  centerX: number,
+  centerY: number,
+  extension: string,
+  colorScheme: ColorScheme,
+) {
   const badgeWidth = Math.max(extension.length * 8 + 16, 40);
   const badgeHeight = 22;
 
   // Badge background
-  drawRoundedRect(ctx, centerX - badgeWidth/2, centerY - badgeHeight/2, badgeWidth, badgeHeight, 11);
+  drawRoundedRect(ctx, centerX - badgeWidth / 2, centerY - badgeHeight / 2, badgeWidth, badgeHeight, 11);
   ctx.fillStyle = colorScheme.badge;
   ctx.fill();
 
   // Badge text
   ctx.font = 'bold 11px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif';
   ctx.fillStyle = colorScheme.textPrimary;
-  ctx.textAlign = 'center';
+  ctx.textAlign = "center";
   ctx.fillText(extension, centerX, centerY + 4);
 }
 
@@ -297,18 +534,18 @@ function drawExtensionBadge(ctx: CanvasRenderingContext2D, centerX: number, cent
  * Format file size for display
  */
 function formatFileSize(bytes: number): string {
-  if (bytes === 0) return '0 B';
+  if (bytes === 0) return "0 B";
   const k = 1024;
-  const sizes = ['B', 'KB', 'MB', 'GB'];
+  const sizes = ["B", "KB", "MB", "GB"];
   const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + " " + sizes[i];
 }
 
 async function generatePDFThumbnail(arrayBuffer: ArrayBuffer, file: File, scale: number): Promise<string> {
   try {
     const pdf = await pdfWorkerManager.createDocument(arrayBuffer, {
       disableAutoFetch: true,
-      disableStream: true
+      disableStream: true,
     });
 
     const thumbnail = await generateStandardPDFThumbnail(pdf, scale);
@@ -337,7 +574,7 @@ export async function generateThumbnailForFile(file: File): Promise<string> {
   }
 
   // Handle image files - convert to data URL for persistence
-  if (file.type.startsWith('image/')) {
+  if (file.type.startsWith("image/")) {
     return new Promise((resolve, reject) => {
       const reader = new FileReader();
       reader.onload = () => resolve(reader.result as string);
@@ -347,7 +584,7 @@ export async function generateThumbnailForFile(file: File): Promise<string> {
   }
 
   // Handle PDF files
-  if (file.type.startsWith('application/pdf')) {
+  if (file.type.startsWith("application/pdf")) {
     const scale = calculateScaleFromFileSize(file.size);
 
     // Only read first 2MB for thumbnail generation to save memory
@@ -358,7 +595,7 @@ export async function generateThumbnailForFile(file: File): Promise<string> {
     try {
       return await generatePDFThumbnail(arrayBuffer, file, scale);
     } catch (error) {
-      if (error instanceof Error && error.name === 'InvalidPDFException') {
+      if (error instanceof Error && error.name === "InvalidPDFException") {
         console.warn(`PDF structure issue for ${file.name} - trying with full file`);
         try {
           // Try with full file instead of chunk
@@ -383,9 +620,12 @@ export async function generateThumbnailForFile(file: File): Promise<string> {
  * @param applyRotation - If true, render thumbnail with PDF rotation applied (for static display).
  *                        If false, render without rotation (for CSS-based rotation in PageEditor)
  */
-export async function generateThumbnailWithMetadata(file: File, applyRotation: boolean = true): Promise<ThumbnailWithMetadata> {
+export async function generateThumbnailWithMetadata(
+  file: File,
+  applyRotation: boolean = true,
+): Promise<ThumbnailWithMetadata> {
   // Non-PDF files have no page count
-  if (!file.type.startsWith('application/pdf')) {
+  if (!file.type.startsWith("application/pdf")) {
     const thumbnail = await generateThumbnailForFile(file);
     return { thumbnail, pageCount: 0 };
   }
@@ -403,13 +643,11 @@ export async function generateThumbnailWithMetadata(file: File, applyRotation: b
 
     // If applyRotation is false, render without rotation (for CSS-based rotation)
     // If applyRotation is true, let PDF.js apply rotation (for static display)
-    const viewport = applyRotation
-      ? page.getViewport({ scale })
-      : page.getViewport({ scale, rotation: 0 });
+    const viewport = applyRotation ? page.getViewport({ scale }) : page.getViewport({ scale, rotation: 0 });
     const baseViewport = page.getViewport({ scale: 1, rotation: 0 });
     pageDimensions[0] = {
       width: baseViewport.width,
-      height: baseViewport.height
+      height: baseViewport.height,
     };
 
     const canvas = document.createElement("canvas");
@@ -419,7 +657,7 @@ export async function generateThumbnailWithMetadata(file: File, applyRotation: b
 
     if (!context) {
       pdfWorkerManager.destroyDocument(pdf);
-      throw new Error('Could not get canvas context');
+      throw new Error("Could not get canvas context");
     }
 
     await page.render({ canvasContext: context, viewport, canvas }).promise;
@@ -433,7 +671,7 @@ export async function generateThumbnailWithMetadata(file: File, applyRotation: b
         thumbnail,
         pageCount,
         pageRotations: [rotation],
-        pageDimensions: [pageDimensions[0]]
+        pageDimensions: [pageDimensions[0]],
       };
     }
 
@@ -447,14 +685,13 @@ export async function generateThumbnailWithMetadata(file: File, applyRotation: b
         const pageViewport = p.getViewport({ scale: 1, rotation: 0 });
         pageDimensions[i - 1] = {
           width: pageViewport.width,
-          height: pageViewport.height
+          height: pageViewport.height,
         };
       }
     }
 
     pdfWorkerManager.destroyDocument(pdf);
     return { thumbnail, pageCount, pageRotations, pageDimensions };
-
   } catch (error) {
     if (error instanceof Error && error.name === "PasswordException") {
       // Handle encrypted PDFs
diff --git a/frontend/src/core/utils/toolErrorHandler.ts b/frontend/src/core/utils/toolErrorHandler.ts
index 270b92017d..355033c290 100644
--- a/frontend/src/core/utils/toolErrorHandler.ts
+++ b/frontend/src/core/utils/toolErrorHandler.ts
@@ -2,19 +2,19 @@
  * Standardized error handling utilities for tool operations
  */
 
-import { normalizeAxiosErrorData } from '@app/services/errorUtils';
+import { normalizeAxiosErrorData } from "@app/services/errorUtils";
 
 /**
  * Default error extractor that follows the standard pattern
  */
 export const extractErrorMessage = (error: any): string => {
-  if (error.response?.data && typeof error.response.data === 'string') {
+  if (error.response?.data && typeof error.response.data === "string") {
     return error.response.data;
   }
   if (error.message) {
     return error.message;
   }
-  return 'There was an error processing your request.';
+  return "There was an error processing your request.";
 };
 
 /**
@@ -24,7 +24,7 @@ export const extractErrorMessage = (error: any): string => {
  */
 export const createStandardErrorHandler = (fallbackMessage: string) => {
   return (error: any): string => {
-    if (error.response?.data && typeof error.response.data === 'string') {
+    if (error.response?.data && typeof error.response.data === "string") {
       return error.response.data;
     }
     if (error.message) {
@@ -38,35 +38,44 @@ export const createStandardErrorHandler = (fallbackMessage: string) => {
  * Parses a 422 response, extracts errored file IDs from the payload (JSON or UUID regex),
  * and marks them in the UI. Returns true if IDs were found and handled, false otherwise.
  */
-export const handle422Error = async (
-  error: any,
-  markFileError: (fileId: string) => void
-): Promise<boolean> => {
+export const handle422Error = async (error: any, markFileError: (fileId: string) => void): Promise<boolean> => {
   const status = error?.response?.status;
-  if (typeof status !== 'number' || status !== 422) return false;
+  if (typeof status !== "number" || status !== 422) return false;
 
   const payload = error?.response?.data;
   let parsed: unknown = payload;
 
-  if (typeof payload === 'string') {
-    try { parsed = JSON.parse(payload); } catch { parsed = payload; }
-  } else if (payload && typeof (payload as Blob).text === 'function') {
+  if (typeof payload === "string") {
+    try {
+      parsed = JSON.parse(payload);
+    } catch {
+      parsed = payload;
+    }
+  } else if (payload && typeof (payload as Blob).text === "function") {
     const text = await (payload as Blob).text();
-    try { parsed = JSON.parse(text); } catch { parsed = text; }
+    try {
+      parsed = JSON.parse(text);
+    } catch {
+      parsed = text;
+    }
   }
 
   let ids: string[] | undefined = Array.isArray((parsed as { errorFileIds?: unknown })?.errorFileIds)
     ? (parsed as { errorFileIds: string[] }).errorFileIds
     : undefined;
 
-  if (!ids && typeof parsed === 'string') {
+  if (!ids && typeof parsed === "string") {
     const match = parsed.match(/[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}/g);
     if (match && match.length > 0) ids = Array.from(new Set(match));
   }
 
   if (ids && ids.length > 0) {
     for (const id of ids) {
-      try { markFileError(id); } catch (_e) { void _e; }
+      try {
+        markFileError(id);
+      } catch (_e) {
+        void _e;
+      }
     }
     return true;
   }
@@ -84,7 +93,7 @@ export const handle422Error = async (
 export const handlePasswordError = async (
   error: any,
   incorrectPasswordMessage: string,
-  fallbackMessage: string
+  fallbackMessage: string,
 ): Promise<string> => {
   const status = error?.response?.status;
 
@@ -100,8 +109,8 @@ export const handlePasswordError = async (
     ...error,
     response: {
       ...error?.response,
-      data: normalizedData
-    }
+      data: normalizedData,
+    },
   };
   return extractErrorMessage(errorWithNormalizedData) || fallbackMessage;
-};
\ No newline at end of file
+};
diff --git a/frontend/src/core/utils/toolResponseProcessor.ts b/frontend/src/core/utils/toolResponseProcessor.ts
index 1bff28b815..347d783017 100644
--- a/frontend/src/core/utils/toolResponseProcessor.ts
+++ b/frontend/src/core/utils/toolResponseProcessor.ts
@@ -1,5 +1,5 @@
 // Note: This utility should be used with useToolResources for ZIP operations
-import { getFilenameFromHeaders } from '@app/utils/fileResponseUtils';
+import { getFilenameFromHeaders } from "@app/utils/fileResponseUtils";
 
 export type ResponseHandler = (blob: Blob, originalFiles: File[]) => Promise<File[]> | File[];
 
@@ -15,7 +15,7 @@ export async function processResponse(
   originalFiles: File[],
   filePrefix?: string,
   responseHandler?: ResponseHandler,
-  responseHeaders?: Record<string, any>
+  responseHeaders?: Record<string, any>,
 ): Promise<File[]> {
   if (responseHandler) {
     const out = await responseHandler(blob, originalFiles);
@@ -25,10 +25,10 @@ export async function processResponse(
   // Check if we should use the backend-provided filename from headers
   // Only when responseHeaders are explicitly provided (indicating the operation requested this)
   if (responseHeaders) {
-    const contentDisposition = responseHeaders['content-disposition'];
+    const contentDisposition = responseHeaders["content-disposition"];
     const backendFilename = getFilenameFromHeaders(contentDisposition);
     if (backendFilename) {
-      const type = blob.type || responseHeaders['content-type'] || 'application/octet-stream';
+      const type = blob.type || responseHeaders["content-type"] || "application/octet-stream";
       return [new File([blob], backendFilename, { type })];
     }
     // If preserveBackendFilename was requested but no Content-Disposition header found,
@@ -36,14 +36,16 @@ export async function processResponse(
   }
 
   // Default behavior: use filePrefix + original name
-  const original = originalFiles[0]?.name ?? 'result.pdf';
+  const original = originalFiles[0]?.name ?? "result.pdf";
   // Only add prefix if it's not empty - this preserves original filenames for file history
   const name = filePrefix ? `${filePrefix}${original}` : original;
-  const type = blob.type || 'application/octet-stream';
+  const type = blob.type || "application/octet-stream";
 
   // File was modified by tool processing - set lastModified to current time
-  return [new File([blob], name, {
-    type,
-    lastModified: Date.now()
-  })];
+  return [
+    new File([blob], name, {
+      type,
+      lastModified: Date.now(),
+    }),
+  ];
 }
diff --git a/frontend/src/core/utils/toolSearch.ts b/frontend/src/core/utils/toolSearch.ts
index b915cdf4dd..e404c4aa38 100644
--- a/frontend/src/core/utils/toolSearch.ts
+++ b/frontend/src/core/utils/toolSearch.ts
@@ -7,10 +7,7 @@ export interface RankedToolItem {
   matchedText?: string;
 }
 
-export function filterToolRegistryByQuery(
-  toolRegistry: Partial<ToolRegistry>,
-  query: string
-): RankedToolItem[] {
+export function filterToolRegistryByQuery(toolRegistry: Partial<ToolRegistry>, query: string): RankedToolItem[] {
   const entries = Object.entries(toolRegistry) as [ToolId, ToolRegistryEntry][];
   if (!query.trim()) {
     return entries.map(([id, tool]) => ({ item: [id, tool] as [ToolId, ToolRegistryEntry] }));
@@ -25,7 +22,7 @@ export function filterToolRegistryByQuery(
   const fuzzySyn: Array<{ id: ToolId; tool: ToolRegistryEntry; score: number; text: string }> = [];
 
   for (const [id, tool] of entries) {
-    const nameNorm = normalizeForSearch(tool.name || '');
+    const nameNorm = normalizeForSearch(tool.name || "");
     const pos = nameNorm.indexOf(nq);
     if (pos !== -1) {
       exactName.push({ id, tool, pos });
@@ -48,14 +45,14 @@ export function filterToolRegistryByQuery(
     }
 
     // Fuzzy name
-    const nameScore = scoreMatch(query, tool.name || '');
+    const nameScore = scoreMatch(query, tool.name || "");
     if (nameScore >= threshold) {
-      fuzzyName.push({ id, tool, score: nameScore, text: tool.name || '' });
+      fuzzyName.push({ id, tool, score: nameScore, text: tool.name || "" });
     }
 
     // Fuzzy synonyms (we'll consider these only if fuzzy name results are weak)
     let bestSynScore = 0;
-    let bestSynText = '';
+    let bestSynText = "";
     for (const s of syns) {
       const synScore = scoreMatch(query, s);
       if (synScore > bestSynScore) {
@@ -70,7 +67,7 @@ export function filterToolRegistryByQuery(
   }
 
   // Sort within buckets
-  exactName.sort((a, b) => a.pos - b.pos || (a.tool.name || '').length - (b.tool.name || '').length);
+  exactName.sort((a, b) => a.pos - b.pos || (a.tool.name || "").length - (b.tool.name || "").length);
   exactSyn.sort((a, b) => a.pos - b.pos || a.text.length - b.text.length);
   fuzzyName.sort((a, b) => b.score - a.score);
   fuzzySyn.sort((a, b) => b.score - a.score);
@@ -95,4 +92,3 @@ export function filterToolRegistryByQuery(
   // Fallback: return everything unchanged
   return entries.map(([id, tool]) => ({ item: [id, tool] as [ToolId, ToolRegistryEntry] }));
 }
-
diff --git a/frontend/src/core/utils/urlMapping.ts b/frontend/src/core/utils/urlMapping.ts
index 118426ddfe..08c0893102 100644
--- a/frontend/src/core/utils/urlMapping.ts
+++ b/frontend/src/core/utils/urlMapping.ts
@@ -1,136 +1,136 @@
-import { ToolId } from '@app/types/toolId';
+import { ToolId } from "@app/types/toolId";
 
 // Map URL paths to tool keys (multiple URLs can map to same tool)
 export const URL_TO_TOOL_MAP: Record<string, ToolId> = {
   // Basic tools - standard patterns
-  '/split': 'split',
-  '/split-pdfs': 'split',
-  '/merge': 'merge',
-  '/merge-pdfs': 'merge',
-  '/compress': 'compress',
-  '/compress-pdf': 'compress',
-  '/rotate': 'rotate',
-  '/rotate-pdf': 'rotate',
-  '/repair': 'repair',
-  '/flatten': 'flatten',
-  '/crop': 'crop',
+  "/split": "split",
+  "/split-pdfs": "split",
+  "/merge": "merge",
+  "/merge-pdfs": "merge",
+  "/compress": "compress",
+  "/compress-pdf": "compress",
+  "/rotate": "rotate",
+  "/rotate-pdf": "rotate",
+  "/repair": "repair",
+  "/flatten": "flatten",
+  "/crop": "crop",
 
   // Convert tool and all its variants
-  '/convert': 'convert',
-  '/convert-pdf': 'convert',
-  '/file-to-pdf': 'convert',
-  '/eml-to-pdf': 'convert',
-  '/html-to-pdf': 'convert',
-  '/markdown-to-pdf': 'convert',
-  '/pdf-to-csv': 'convert',
-  '/pdf-to-xlsx': 'convert',
-  '/pdf-to-img': 'convert',
-  '/pdf-to-markdown': 'convert',
-  '/pdf-to-pdfa': 'convert',
-  '/pdf-to-word': 'convert',
-  '/pdf-to-xml': 'convert',
-  '/cbr-to-pdf': 'convert',
-  '/pdf-to-cbr': 'convert',
-  '/cbz-to-pdf': 'convert',
-  '/pdf-to-cbz': 'convert',
+  "/convert": "convert",
+  "/convert-pdf": "convert",
+  "/file-to-pdf": "convert",
+  "/eml-to-pdf": "convert",
+  "/html-to-pdf": "convert",
+  "/markdown-to-pdf": "convert",
+  "/pdf-to-csv": "convert",
+  "/pdf-to-xlsx": "convert",
+  "/pdf-to-img": "convert",
+  "/pdf-to-markdown": "convert",
+  "/pdf-to-pdfa": "convert",
+  "/pdf-to-word": "convert",
+  "/pdf-to-xml": "convert",
+  "/cbr-to-pdf": "convert",
+  "/pdf-to-cbr": "convert",
+  "/cbz-to-pdf": "convert",
+  "/pdf-to-cbz": "convert",
 
   // Security tools
-  '/add-password': 'addPassword',
-  '/remove-password': 'removePassword',
-  '/change-permissions': 'changePermissions',
-  '/cert-sign': 'certSign',
-  '/manage-signatures': 'certSign',
-  '/remove-certificate-sign': 'removeCertSign',
-  '/remove-cert-sign': 'removeCertSign',
-  '/unlock-pdf-forms': 'unlockPDFForms',
-  '/validate-signature': 'validateSignature',
+  "/add-password": "addPassword",
+  "/remove-password": "removePassword",
+  "/change-permissions": "changePermissions",
+  "/cert-sign": "certSign",
+  "/manage-signatures": "certSign",
+  "/remove-certificate-sign": "removeCertSign",
+  "/remove-cert-sign": "removeCertSign",
+  "/unlock-pdf-forms": "unlockPDFForms",
+  "/validate-signature": "validateSignature",
 
   // Content manipulation
-  '/sanitize': 'sanitize',
-  '/sanitize-pdf': 'sanitize',
-  '/ocr': 'ocr',
-  '/ocr-pdf': 'ocr',
-  '/watermark': 'watermark',
-  '/add-watermark': 'watermark',
-  '/add-image': 'addImage',
-  '/add-stamp': 'addStamp',
-  '/add-page-numbers': 'addPageNumbers',
-  '/redact': 'redact',
+  "/sanitize": "sanitize",
+  "/sanitize-pdf": "sanitize",
+  "/ocr": "ocr",
+  "/ocr-pdf": "ocr",
+  "/watermark": "watermark",
+  "/add-watermark": "watermark",
+  "/add-image": "addImage",
+  "/add-stamp": "addStamp",
+  "/add-page-numbers": "addPageNumbers",
+  "/redact": "redact",
 
   // Page manipulation
-  '/remove-pages': 'removePages',
-  '/remove-blanks': 'removeBlanks',
-  '/extract-pages': 'extractPages',
-  '/reorganize-pages': 'reorganizePages',
-  '/single-large-page': 'pdfToSinglePage',
-  '/page-layout': 'pageLayout',
-  '/scale-pages': 'scalePages',
-  '/booklet-imposition': 'bookletImposition',
+  "/remove-pages": "removePages",
+  "/remove-blanks": "removeBlanks",
+  "/extract-pages": "extractPages",
+  "/reorganize-pages": "reorganizePages",
+  "/single-large-page": "pdfToSinglePage",
+  "/page-layout": "pageLayout",
+  "/scale-pages": "scalePages",
+  "/booklet-imposition": "bookletImposition",
 
   // Splitting tools
-  '/auto-split-pdf': 'split',
-  '/auto-size-split-pdf': 'split',
-  '/scanner-image-split': 'scannerImageSplit',
+  "/auto-split-pdf": "split",
+  "/auto-size-split-pdf": "split",
+  "/scanner-image-split": "scannerImageSplit",
 
   // Annotation and content removal
-  '/annotations': 'annotate',
-  '/annotate': 'annotate',
-  '/remove-annotations': 'removeAnnotations',
-  '/remove-image': 'removeImage',
+  "/annotations": "annotate",
+  "/annotate": "annotate",
+  "/remove-annotations": "removeAnnotations",
+  "/remove-image": "removeImage",
 
   // Image and visual tools
-  '/extract-images': 'extractImages',
-  '/adjust-contrast': 'adjustContrast',
-  '/fake-scan': 'scannerEffect',
-  '/replace-color-pdf': 'replaceColor',
+  "/extract-images": "extractImages",
+  "/adjust-contrast": "adjustContrast",
+  "/fake-scan": "scannerEffect",
+  "/replace-color-pdf": "replaceColor",
 
   // Metadata and info
-  '/change-metadata': 'changeMetadata',
-  '/get-pdf-info': 'getPdfInfo',
-  '/add-attachments': 'addAttachments',
+  "/change-metadata": "changeMetadata",
+  "/get-pdf-info": "getPdfInfo",
+  "/add-attachments": "addAttachments",
 
   // Advanced tools
-  '/overlay-pdfs': 'overlayPdfs',
-  '/edit-table-of-contents': 'editTableOfContents',
-  '/auto-rename': 'autoRename',
-  '/compare': 'compare',
-  '/multi-tool': 'multiTool',
-  '/show-js': 'showJS',
+  "/overlay-pdfs": "overlayPdfs",
+  "/edit-table-of-contents": "editTableOfContents",
+  "/auto-rename": "autoRename",
+  "/compare": "compare",
+  "/multi-tool": "multiTool",
+  "/show-js": "showJS",
 
   // Special/utility tools
-  '/read': 'read',
-  '/automate': 'automate',
-  '/sign': 'sign',
-  '/add-text': 'addText',
-  '/pdf-text-editor': 'pdfTextEditor',
+  "/read": "read",
+  "/automate": "automate",
+  "/sign": "sign",
+  "/add-text": "addText",
+  "/pdf-text-editor": "pdfTextEditor",
 
   // Developer tools
-  '/dev-api': 'devApi',
-  '/dev-folder-scanning': 'devFolderScanning',
-  '/dev-sso-guide': 'devSsoGuide',
-  '/dev-airgapped': 'devAirgapped',
+  "/dev-api": "devApi",
+  "/dev-folder-scanning": "devFolderScanning",
+  "/dev-sso-guide": "devSsoGuide",
+  "/dev-airgapped": "devAirgapped",
 
   // Legacy URL mappings from sitemap
-  '/pdf-organizer': 'reorganizePages',
-  '/multi-page-layout': 'pageLayout',
-  '/extract-page': 'extractPages',
-  '/pdf-to-single-page': 'pdfToSinglePage',
-  '/img-to-pdf': 'convert',
-  '/pdf-to-presentation': 'convert',
-  '/pdf-to-text': 'convert',
-  '/pdf-to-html': 'convert',
-  '/auto-redact': 'redact',
-  '/stamp': 'addStamp',
-  '/view-pdf': 'read',
-  '/get-info-on-pdf': 'getPdfInfo',
-  '/remove-image-pdf': 'removeImage',
-  '/replace-and-invert-color-pdf': 'replaceColor',
-  '/pipeline': 'automate',
-  '/extract-image-scans': 'scannerImageSplit',
-  '/show-javascript': 'showJS',
-  '/scanner-effect': 'scannerEffect',
-  '/split-by-size-or-count': 'split',
-  '/overlay-pdf': 'overlayPdfs',
-  '/split-pdf-by-sections': 'split',
-  '/split-pdf-by-chapters': 'split',
+  "/pdf-organizer": "reorganizePages",
+  "/multi-page-layout": "pageLayout",
+  "/extract-page": "extractPages",
+  "/pdf-to-single-page": "pdfToSinglePage",
+  "/img-to-pdf": "convert",
+  "/pdf-to-presentation": "convert",
+  "/pdf-to-text": "convert",
+  "/pdf-to-html": "convert",
+  "/auto-redact": "redact",
+  "/stamp": "addStamp",
+  "/view-pdf": "read",
+  "/get-info-on-pdf": "getPdfInfo",
+  "/remove-image-pdf": "removeImage",
+  "/replace-and-invert-color-pdf": "replaceColor",
+  "/pipeline": "automate",
+  "/extract-image-scans": "scannerImageSplit",
+  "/show-javascript": "showJS",
+  "/scanner-effect": "scannerEffect",
+  "/split-by-size-or-count": "split",
+  "/overlay-pdf": "overlayPdfs",
+  "/split-pdf-by-sections": "split",
+  "/split-pdf-by-chapters": "split",
 };
diff --git a/frontend/src/core/utils/urlRouting.ts b/frontend/src/core/utils/urlRouting.ts
index 6d04817be3..ea8302f656 100644
--- a/frontend/src/core/utils/urlRouting.ts
+++ b/frontend/src/core/utils/urlRouting.ts
@@ -2,13 +2,13 @@
  * URL routing utilities for tool navigation with registry support
  */
 
-import { ToolRoute } from '@app/types/navigation';
-import { ToolId, isValidToolId } from '@app/types/toolId';
-import { getDefaultWorkbench } from '@app/types/workbench';
-import { ToolRegistry, getToolWorkbench, getToolUrlPath } from '@app/data/toolsTaxonomy';
-import { firePixel } from '@app/utils/scarfTracking';
-import { URL_TO_TOOL_MAP } from '@app/utils/urlMapping';
-import { BASE_PATH, withBasePath } from '@app/constants/app';
+import { ToolRoute } from "@app/types/navigation";
+import { ToolId, isValidToolId } from "@app/types/toolId";
+import { getDefaultWorkbench } from "@app/types/workbench";
+import { ToolRegistry, getToolWorkbench, getToolUrlPath } from "@app/data/toolsTaxonomy";
+import { firePixel } from "@app/utils/scarfTracking";
+import { URL_TO_TOOL_MAP } from "@app/utils/urlMapping";
+import { BASE_PATH, withBasePath } from "@app/constants/app";
 
 /**
  * Parse the current URL to extract tool routing information
@@ -16,9 +16,7 @@ import { BASE_PATH, withBasePath } from '@app/constants/app';
 export function parseToolRoute(registry: ToolRegistry): ToolRoute {
   const fullPath = window.location.pathname;
   // Remove base path to get app-relative path
-  const path = BASE_PATH && fullPath.startsWith(BASE_PATH)
-    ? fullPath.slice(BASE_PATH.length) || '/'
-    : fullPath;
+  const path = BASE_PATH && fullPath.startsWith(BASE_PATH) ? fullPath.slice(BASE_PATH.length) || "/" : fullPath;
   const searchParams = new URLSearchParams(window.location.search);
 
   // First, check URL mapping for multiple URL aliases
@@ -27,7 +25,7 @@ export function parseToolRoute(registry: ToolRegistry): ToolRoute {
     const tool = registry[mappedToolId];
     return {
       workbench: getToolWorkbench(tool),
-      toolId: mappedToolId
+      toolId: mappedToolId,
     };
   }
 
@@ -37,25 +35,25 @@ export function parseToolRoute(registry: ToolRegistry): ToolRoute {
     if (path === toolUrlPath && isValidToolId(toolId)) {
       return {
         workbench: getToolWorkbench(tool),
-        toolId
+        toolId,
       };
     }
   }
 
   // Check for query parameter fallback (e.g., ?tool=split)
-  const toolParam = searchParams.get('tool');
+  const toolParam = searchParams.get("tool");
   if (toolParam && isValidToolId(toolParam) && registry[toolParam]) {
     const tool = registry[toolParam];
     return {
       workbench: getToolWorkbench(tool),
-      toolId: toolParam
+      toolId: toolParam,
     };
   }
 
   // Default to fileEditor workbench for home page
   return {
     workbench: getDefaultWorkbench(),
-    toolId: null
+    toolId: null,
   };
 }
 
@@ -65,14 +63,14 @@ export function parseToolRoute(registry: ToolRegistry): ToolRoute {
 function updateUrl(newPath: string, searchParams: URLSearchParams, replace: boolean = false): void {
   const currentPath = window.location.pathname;
   const queryString = searchParams.toString();
-  const fullUrl = newPath + (queryString ? `?${queryString}` : '');
+  const fullUrl = newPath + (queryString ? `?${queryString}` : "");
 
   // Only update URL and fire pixel if something actually changed
-  if (currentPath !== newPath || window.location.search !== (queryString ? `?${queryString}` : '')) {
+  if (currentPath !== newPath || window.location.search !== (queryString ? `?${queryString}` : "")) {
     if (replace) {
-      window.history.replaceState(null, '', fullUrl);
+      window.history.replaceState(null, "", fullUrl);
     } else {
-      window.history.pushState(null, '', fullUrl);
+      window.history.pushState(null, "", fullUrl);
     }
     firePixel(newPath);
   }
@@ -93,7 +91,7 @@ export function updateToolRoute(toolId: ToolId, registry: ToolRegistry, replace:
   const searchParams = new URLSearchParams(window.location.search);
 
   // Remove tool query parameter since we're using path-based routing
-  searchParams.delete('tool');
+  searchParams.delete("tool");
 
   updateUrl(newPath, searchParams, replace);
 }
@@ -103,9 +101,9 @@ export function updateToolRoute(toolId: ToolId, registry: ToolRegistry, replace:
  */
 export function clearToolRoute(replace: boolean = false): void {
   const searchParams = new URLSearchParams(window.location.search);
-  searchParams.delete('tool');
+  searchParams.delete("tool");
 
-  updateUrl(withBasePath('/'), searchParams, replace);
+  updateUrl(withBasePath("/"), searchParams, replace);
 }
 
 /**
diff --git a/frontend/src/core/utils/viewerZoom.ts b/frontend/src/core/utils/viewerZoom.ts
index 78799e8b24..81e9fc4d47 100644
--- a/frontend/src/core/utils/viewerZoom.ts
+++ b/frontend/src/core/utils/viewerZoom.ts
@@ -1,4 +1,4 @@
-import { useEffect, useRef } from 'react';
+import { useEffect, useRef } from "react";
 
 export const DEFAULT_VISIBILITY_THRESHOLD = 70; // Require at least 70% of the page height to be visible
 export const DEFAULT_FALLBACK_ZOOM = 1.44; // 144% fallback when no reliable metadata is present
@@ -10,10 +10,7 @@ export interface ZoomViewport {
   height?: number;
 }
 
-export type AutoZoomDecision =
-  | { type: 'fallback'; zoom: number }
-  | { type: 'fitWidth' }
-  | { type: 'adjust'; zoom: number };
+export type AutoZoomDecision = { type: "fallback"; zoom: number } | { type: "fitWidth" } | { type: "adjust"; zoom: number };
 
 export interface AutoZoomParams {
   viewportWidth: number;
@@ -39,12 +36,11 @@ export function determineAutoZoom({
   // Get aspect ratio from pageRect or metadata
   const rectWidth = pageRect?.width ?? 0;
   const rectHeight = pageRect?.height ?? 0;
-  const aspectRatio: number | null =
-    rectWidth > 0 ? rectHeight / rectWidth : metadataAspectRatio ?? null;
+  const aspectRatio: number | null = rectWidth > 0 ? rectHeight / rectWidth : (metadataAspectRatio ?? null);
 
   // Need aspect ratio to proceed
   if (!aspectRatio || aspectRatio <= 0) {
-    return { type: 'fallback', zoom: Math.min(fitWidthZoom, fallbackZoom) };
+    return { type: "fallback", zoom: Math.min(fitWidthZoom, fallbackZoom) };
   }
 
   // Landscape pages need 100% visibility, portrait need the specified threshold
@@ -53,15 +49,15 @@ export function determineAutoZoom({
 
   // Calculate zoom level that shows targetVisibility% of page height
   const pageHeightAtFitWidth = (viewportWidth / pagesPerSpread) * aspectRatio;
-  const heightBasedZoom = fitWidthZoom * (viewportHeight / pageHeightAtFitWidth) / (targetVisibility / 100);
+  const heightBasedZoom = (fitWidthZoom * (viewportHeight / pageHeightAtFitWidth)) / (targetVisibility / 100);
 
   // Use whichever zoom is smaller (more zoomed out) to satisfy both width and height constraints
   if (heightBasedZoom < fitWidthZoom) {
     // Need to zoom out from fitWidth to show enough height
-    return { type: 'adjust', zoom: heightBasedZoom };
+    return { type: "adjust", zoom: heightBasedZoom };
   } else {
     // fitWidth already shows enough
-    return { type: 'fitWidth' };
+    return { type: "fitWidth" };
   }
 }
 
@@ -76,7 +72,7 @@ export async function measureRenderedPageRect({
   maxAttempts = 12,
   shouldCancel,
 }: MeasurePageRectOptions = {}): Promise<DOMRect | null> {
-  if (typeof window === 'undefined' || typeof document === 'undefined') {
+  if (typeof window === "undefined" || typeof document === "undefined") {
     return null;
   }
 
@@ -163,12 +159,12 @@ export function useFitWidthResize({
       }, debounceMs);
     };
 
-    window.addEventListener('resize', handleResize);
+    window.addEventListener("resize", handleResize);
     return () => {
       if (timeoutId !== undefined) {
         window.clearTimeout(timeoutId);
       }
-      window.removeEventListener('resize', handleResize);
+      window.removeEventListener("resize", handleResize);
     };
   }, [debounceMs]);
 }
diff --git a/frontend/src/core/workers/compareWorker.ts b/frontend/src/core/workers/compareWorker.ts
index edf378180e..4c8e7f0e85 100644
--- a/frontend/src/core/workers/compareWorker.ts
+++ b/frontend/src/core/workers/compareWorker.ts
@@ -1,10 +1,6 @@
 /// <reference lib="webworker" />
 
-import type {
-  CompareDiffToken,
-  CompareWorkerRequest,
-  CompareWorkerResponse,
-} from '@app/types/compare';
+import type { CompareDiffToken, CompareWorkerRequest, CompareWorkerResponse } from "@app/types/compare";
 
 declare const self: DedicatedWorkerGlobalScope;
 
@@ -37,10 +33,7 @@ const buildMatrix = (words1: string[], words2: string[]) => {
 
   for (let i = 1; i <= words1.length; i += 1) {
     for (let j = 1; j <= words2.length; j += 1) {
-      matrix[i][j] =
-        words1[i - 1] === words2[j - 1]
-          ? matrix[i - 1][j - 1] + 1
-          : Math.max(matrix[i][j - 1], matrix[i - 1][j]);
+      matrix[i][j] = words1[i - 1] === words2[j - 1] ? matrix[i - 1][j - 1] + 1 : Math.max(matrix[i][j - 1], matrix[i - 1][j]);
     }
   }
 
@@ -54,14 +47,14 @@ const backtrack = (matrix: number[][], words1: string[], words2: string[]): Comp
 
   while (i > 0 || j > 0) {
     if (i > 0 && j > 0 && words1[i - 1] === words2[j - 1]) {
-      tokens.unshift({ type: 'unchanged', text: words1[i - 1] });
+      tokens.unshift({ type: "unchanged", text: words1[i - 1] });
       i -= 1;
       j -= 1;
     } else if (j > 0 && (i === 0 || matrix[i][j] === matrix[i][j - 1])) {
-      tokens.unshift({ type: 'added', text: words2[j - 1] });
+      tokens.unshift({ type: "added", text: words2[j - 1] });
       j -= 1;
     } else if (i > 0) {
-      tokens.unshift({ type: 'removed', text: words1[i - 1] });
+      tokens.unshift({ type: "removed", text: words1[i - 1] });
       i -= 1;
     } else {
       j -= 1;
@@ -81,14 +74,14 @@ const diff = (words1: string[], words2: string[]): CompareDiffToken[] => {
 };
 
 const countBaseTokens = (segment: CompareDiffToken[]) =>
-  segment.reduce((acc, token) => acc + (token.type !== 'added' ? 1 : 0), 0);
+  segment.reduce((acc, token) => acc + (token.type !== "added" ? 1 : 0), 0);
 
 const countComparisonTokens = (segment: CompareDiffToken[]) =>
-  segment.reduce((acc, token) => acc + (token.type !== 'removed' ? 1 : 0), 0);
+  segment.reduce((acc, token) => acc + (token.type !== "removed" ? 1 : 0), 0);
 
 const findLastUnchangedIndex = (segment: CompareDiffToken[]) => {
   for (let i = segment.length - 1; i >= 0; i -= 1) {
-    if (segment[i].type === 'unchanged') {
+    if (segment[i].type === "unchanged") {
       return i;
     }
   }
@@ -100,7 +93,7 @@ const chunkedDiff = (
   words2: string[],
   chunkSize: number,
   emit: (tokens: CompareDiffToken[]) => void,
-  runtimeStop?: { maxProcessedTokens: number; minUnchangedRatio: number }
+  runtimeStop?: { maxProcessedTokens: number; minUnchangedRatio: number },
 ) => {
   if (words1.length === 0 && words2.length === 0) {
     return;
@@ -119,10 +112,7 @@ const chunkedDiff = (
     if (dynamicChunkSize >= maxChunkSize) {
       return;
     }
-    const nextChunk = Math.min(
-      maxChunkSize,
-      Math.max(dynamicChunkSize + dynamicStep, Math.floor(dynamicChunkSize * 1.5))
-    );
+    const nextChunk = Math.min(maxChunkSize, Math.max(dynamicChunkSize + dynamicStep, Math.floor(dynamicChunkSize * 1.5)));
     if (nextChunk === dynamicChunkSize) {
       return;
     }
@@ -141,7 +131,7 @@ const chunkedDiff = (
   let totalUnchanged = 0;
 
   const countUnchanged = (segment: CompareDiffToken[]) =>
-    segment.reduce((acc, token) => acc + (token.type === 'unchanged' ? 1 : 0), 0);
+    segment.reduce((acc, token) => acc + (token.type === "unchanged" ? 1 : 0), 0);
 
   const flushRemainder = () => {
     if (buffer1.length === 0 && buffer2.length === 0) {
@@ -157,12 +147,7 @@ const chunkedDiff = (
     index2 = words2.length;
   };
 
-  while (
-    index1 < words1.length ||
-    index2 < words2.length ||
-    buffer1.length > 0 ||
-    buffer2.length > 0
-  ) {
+  while (index1 < words1.length || index2 < words2.length || buffer1.length > 0 || buffer2.length > 0) {
     const remaining1 = Math.max(0, words1.length - index1);
     const remaining2 = Math.max(0, words2.length - index2);
 
@@ -190,13 +175,9 @@ const chunkedDiff = (
       chunkTokens = diff(window1, window2);
       const lastStableIndex = findLastUnchangedIndex(chunkTokens);
 
-      reachedEnd =
-        index1 + take1 >= words1.length &&
-        index2 + take2 >= words2.length;
+      reachedEnd = index1 + take1 >= words1.length && index2 + take2 >= words2.length;
 
-      const windowTooLarge =
-        window1.length >= dynamicMaxWindow ||
-        window2.length >= dynamicMaxWindow;
+      const windowTooLarge = window1.length >= dynamicMaxWindow || window2.length >= dynamicMaxWindow;
 
       if (lastStableIndex >= 0 || reachedEnd || windowTooLarge) {
         break;
@@ -209,10 +190,7 @@ const chunkedDiff = (
         break;
       }
 
-      windowSize = Math.min(
-        dynamicMaxWindow,
-        windowSize + dynamicStep
-      );
+      windowSize = Math.min(dynamicMaxWindow, windowSize + dynamicStep);
     }
 
     if (chunkTokens.length === 0) {
@@ -230,9 +208,7 @@ const chunkedDiff = (
 
     let commitIndex = reachedEnd ? chunkTokens.length - 1 : findLastUnchangedIndex(chunkTokens);
     if (commitIndex < 0) {
-      commitIndex = reachedEnd
-        ? chunkTokens.length - 1
-        : Math.min(chunkTokens.length - 1, dynamicMinCommit - 1);
+      commitIndex = reachedEnd ? chunkTokens.length - 1 : Math.min(chunkTokens.length - 1, dynamicMinCommit - 1);
     }
 
     const commitTokens = commitIndex >= 0 ? chunkTokens.slice(0, commitIndex + 1) : [];
@@ -262,7 +238,7 @@ const chunkedDiff = (
         const unchangedRatio = totalUnchanged / Math.max(1, processedTotal);
         if (unchangedRatio < runtimeStop.minUnchangedRatio) {
           // Signal early termination for extreme dissimilarity
-          const err = new Error('EARLY_STOP_TOO_DISSIMILAR');
+          const err = new Error("EARLY_STOP_TOO_DISSIMILAR");
           (err as Error & { __earlyStop?: boolean }).__earlyStop = true;
           throw err;
         }
@@ -335,7 +311,7 @@ const jaccard = (a: Set<string>, b: Set<string>): number => {
 
 self.onmessage = (event: MessageEvent<CompareWorkerRequest>) => {
   const { data } = event;
-  if (!data || data.type !== 'compare') {
+  if (!data || data.type !== "compare") {
     return;
   }
 
@@ -355,9 +331,9 @@ self.onmessage = (event: MessageEvent<CompareWorkerRequest>) => {
 
   if (!baseTokens || !comparisonTokens || baseTokens.length === 0 || comparisonTokens.length === 0) {
     const response: CompareWorkerResponse = {
-      type: 'error',
-      message: warnings.emptyTextMessage ?? 'One or both texts are empty.',
-      code: 'EMPTY_TEXT',
+      type: "error",
+      message: warnings.emptyTextMessage ?? "One or both texts are empty.",
+      code: "EMPTY_TEXT",
     };
     self.postMessage(response);
     return;
@@ -366,8 +342,8 @@ self.onmessage = (event: MessageEvent<CompareWorkerRequest>) => {
   if (baseTokens.length > maxWordThreshold || comparisonTokens.length > maxWordThreshold) {
     // For compare tool, do not fail hard; warn and continue with chunked diff
     const response: CompareWorkerResponse = {
-      type: 'warning',
-      message: warnings.tooLargeMessage ?? 'Documents are too large to compare.',
+      type: "warning",
+      message: warnings.tooLargeMessage ?? "Documents are too large to compare.",
     };
     self.postMessage(response);
   }
@@ -376,7 +352,7 @@ self.onmessage = (event: MessageEvent<CompareWorkerRequest>) => {
 
   if (isComplex && warnings.complexMessage) {
     const warningResponse: CompareWorkerResponse = {
-      type: 'warning',
+      type: "warning",
       message: warnings.complexMessage,
     };
     self.postMessage(warningResponse);
@@ -392,11 +368,10 @@ self.onmessage = (event: MessageEvent<CompareWorkerRequest>) => {
     const jBi = jaccard(set1b, set2b);
     if (jUni < minJaccardUnigram && jBi < minJaccardBigram) {
       const response: CompareWorkerResponse = {
-        type: 'error',
+        type: "error",
         message:
-          warnings.tooDissimilarMessage ??
-          'These documents appear highly dissimilar. Comparison was stopped to save time.',
-        code: 'TOO_DISSIMILAR',
+          warnings.tooDissimilarMessage ?? "These documents appear highly dissimilar. Comparison was stopped to save time.",
+        code: "TOO_DISSIMILAR",
       };
       self.postMessage(response);
       return;
@@ -414,22 +389,21 @@ self.onmessage = (event: MessageEvent<CompareWorkerRequest>) => {
           return;
         }
         const response: CompareWorkerResponse = {
-          type: 'chunk',
+          type: "chunk",
           tokens,
         };
         self.postMessage(response);
       },
-      { maxProcessedTokens: runtimeMaxProcessedTokens, minUnchangedRatio: runtimeMinUnchangedRatio }
+      { maxProcessedTokens: runtimeMaxProcessedTokens, minUnchangedRatio: runtimeMinUnchangedRatio },
     );
   } catch (err) {
     const error = err as Error & { __earlyStop?: boolean };
-    if (error && (error.__earlyStop || error.message === 'EARLY_STOP_TOO_DISSIMILAR')) {
+    if (error && (error.__earlyStop || error.message === "EARLY_STOP_TOO_DISSIMILAR")) {
       const response: CompareWorkerResponse = {
-        type: 'error',
+        type: "error",
         message:
-          warnings.tooDissimilarMessage ??
-          'These documents appear highly dissimilar. Comparison was stopped to save time.',
-        code: 'TOO_DISSIMILAR',
+          warnings.tooDissimilarMessage ?? "These documents appear highly dissimilar. Comparison was stopped to save time.",
+        code: "TOO_DISSIMILAR",
       };
       self.postMessage(response);
       return;
@@ -439,7 +413,7 @@ self.onmessage = (event: MessageEvent<CompareWorkerRequest>) => {
   const durationMs = performance.now() - start;
 
   const response: CompareWorkerResponse = {
-    type: 'success',
+    type: "success",
     stats: {
       baseWordCount: baseTokens.length,
       comparisonWordCount: comparisonTokens.length,
diff --git a/frontend/src/desktop/auth/supabase.ts b/frontend/src/desktop/auth/supabase.ts
index 2935211826..139c9f5b53 100644
--- a/frontend/src/desktop/auth/supabase.ts
+++ b/frontend/src/desktop/auth/supabase.ts
@@ -1,5 +1,5 @@
-import { createClient } from '@supabase/supabase-js';
-import { STIRLING_SAAS_URL, SUPABASE_KEY } from '@app/constants/connection';
+import { createClient } from "@supabase/supabase-js";
+import { STIRLING_SAAS_URL, SUPABASE_KEY } from "@app/constants/connection";
 
 /**
  * Supabase client for desktop application
@@ -10,21 +10,17 @@ import { STIRLING_SAAS_URL, SUPABASE_KEY } from '@app/constants/connection';
  */
 
 if (!STIRLING_SAAS_URL) {
-  console.warn('[Desktop Supabase] VITE_SAAS_SERVER_URL not configured - SaaS features will not work');
+  console.warn("[Desktop Supabase] VITE_SAAS_SERVER_URL not configured - SaaS features will not work");
 }
 
 if (!SUPABASE_KEY) {
-  console.warn('[Desktop Supabase] VITE_SUPABASE_PUBLISHABLE_DEFAULT_KEY not configured - SaaS features will not work');
+  console.warn("[Desktop Supabase] VITE_SUPABASE_PUBLISHABLE_DEFAULT_KEY not configured - SaaS features will not work");
 }
 
-export const supabase = createClient(
-  STIRLING_SAAS_URL || '',
-  SUPABASE_KEY || '',
-  {
-    auth: {
-      persistSession: false, // Desktop manages auth via authService + Tauri secure store
-      autoRefreshToken: false, // Desktop manually refreshes tokens via authService
-      detectSessionInUrl: false, // Desktop uses deep links, not URL hash fragments
-    },
-  }
-);
+export const supabase = createClient(STIRLING_SAAS_URL || "", SUPABASE_KEY || "", {
+  auth: {
+    persistSession: false, // Desktop manages auth via authService + Tauri secure store
+    autoRefreshToken: false, // Desktop manually refreshes tokens via authService
+    detectSessionInUrl: false, // Desktop uses deep links, not URL hash fragments
+  },
+});
diff --git a/frontend/src/desktop/components/AppProviders.tsx b/frontend/src/desktop/components/AppProviders.tsx
index 92f2e63911..ccdbd7c2bb 100644
--- a/frontend/src/desktop/components/AppProviders.tsx
+++ b/frontend/src/desktop/components/AppProviders.tsx
@@ -1,40 +1,40 @@
 import { ReactNode, useEffect, useRef, useState } from "react";
 import { AppProviders as ProprietaryAppProviders } from "@proprietary/components/AppProviders";
-import { DesktopConfigSync } from '@app/components/DesktopConfigSync';
-import { DesktopBannerInitializer } from '@app/components/DesktopBannerInitializer';
-import { SaveShortcutListener } from '@app/components/SaveShortcutListener';
-import { DesktopOnboardingModal } from '@app/components/DesktopOnboardingModal';
-import { SignInModal } from '@app/components/SignInModal';
-import { OPEN_SIGN_IN_EVENT } from '@app/constants/signInEvents';
-import { ToolActionsContext } from '@app/contexts/ToolActionsContext';
-import { useFirstLaunchCheck } from '@app/hooks/useFirstLaunchCheck';
-import { useBackendInitializer } from '@app/hooks/useBackendInitializer';
-import { DESKTOP_DEFAULT_APP_CONFIG } from '@app/config/defaultAppConfig';
-import { connectionModeService, JWT_EXPIRED_PROMPTED_KEY } from '@app/services/connectionModeService';
-import { STIRLING_SAAS_URL } from '@app/constants/connection';
-import { tauriBackendService } from '@app/services/tauriBackendService';
-import { selfHostedServerMonitor } from '@app/services/selfHostedServerMonitor';
-import { authService } from '@app/services/authService';
-import { endpointAvailabilityService } from '@app/services/endpointAvailabilityService';
-import { getCurrentWindow } from '@tauri-apps/api/window';
-import { isTauri } from '@tauri-apps/api/core';
-import { SaaSTeamProvider } from '@app/contexts/SaaSTeamContext';
-import { SaasBillingProvider } from '@app/contexts/SaasBillingContext';
-import { SaaSCheckoutProvider } from '@app/contexts/SaaSCheckoutContext';
-import { CreditModalBootstrap } from '@app/components/shared/modals/CreditModalBootstrap';
+import { DesktopConfigSync } from "@app/components/DesktopConfigSync";
+import { DesktopBannerInitializer } from "@app/components/DesktopBannerInitializer";
+import { SaveShortcutListener } from "@app/components/SaveShortcutListener";
+import { DesktopOnboardingModal } from "@app/components/DesktopOnboardingModal";
+import { SignInModal } from "@app/components/SignInModal";
+import { OPEN_SIGN_IN_EVENT } from "@app/constants/signInEvents";
+import { ToolActionsContext } from "@app/contexts/ToolActionsContext";
+import { useFirstLaunchCheck } from "@app/hooks/useFirstLaunchCheck";
+import { useBackendInitializer } from "@app/hooks/useBackendInitializer";
+import { DESKTOP_DEFAULT_APP_CONFIG } from "@app/config/defaultAppConfig";
+import { connectionModeService, JWT_EXPIRED_PROMPTED_KEY } from "@app/services/connectionModeService";
+import { STIRLING_SAAS_URL } from "@app/constants/connection";
+import { tauriBackendService } from "@app/services/tauriBackendService";
+import { selfHostedServerMonitor } from "@app/services/selfHostedServerMonitor";
+import { authService } from "@app/services/authService";
+import { endpointAvailabilityService } from "@app/services/endpointAvailabilityService";
+import { getCurrentWindow } from "@tauri-apps/api/window";
+import { isTauri } from "@tauri-apps/api/core";
+import { SaaSTeamProvider } from "@app/contexts/SaaSTeamContext";
+import { SaasBillingProvider } from "@app/contexts/SaasBillingContext";
+import { SaaSCheckoutProvider } from "@app/contexts/SaaSCheckoutContext";
+import { CreditModalBootstrap } from "@app/components/shared/modals/CreditModalBootstrap";
 
 // Common tool endpoints to preload for faster first-use
 const COMMON_TOOL_ENDPOINTS = [
-  '/api/v1/misc/compress-pdf',
-  '/api/v1/general/merge-pdfs',
-  '/api/v1/general/split-pages',
-  '/api/v1/convert/pdf/img',
-  '/api/v1/convert/img/pdf',
-  '/api/v1/general/rotate-pdf',
-  '/api/v1/misc/add-watermark',
-  '/api/v1/security/add-password',
-  '/api/v1/security/remove-password',
-  '/api/v1/general/extract-pages',
+  "/api/v1/misc/compress-pdf",
+  "/api/v1/general/merge-pdfs",
+  "/api/v1/general/split-pages",
+  "/api/v1/convert/pdf/img",
+  "/api/v1/convert/img/pdf",
+  "/api/v1/general/rotate-pdf",
+  "/api/v1/misc/add-watermark",
+  "/api/v1/security/add-password",
+  "/api/v1/security/remove-password",
+  "/api/v1/general/extract-pages",
 ];
 
 /**
@@ -45,7 +45,7 @@ const COMMON_TOOL_ENDPOINTS = [
  */
 export function AppProviders({ children }: { children: ReactNode }) {
   const { isFirstLaunch, setupComplete } = useFirstLaunchCheck();
-  const [connectionMode, setConnectionMode] = useState<'saas' | 'selfhosted' | 'local' | null>(null);
+  const [connectionMode, setConnectionMode] = useState<"saas" | "selfhosted" | "local" | null>(null);
   const [authChecked, setAuthChecked] = useState(false);
   const [pendingSignIn, setPendingSignIn] = useState(false);
   // Prevent first-launch setup from running twice when connectionMode state update re-triggers the effect
@@ -71,8 +71,8 @@ export function AppProviders({ children }: { children: ReactNode }) {
       // SaaS providers and remounting mid-wizard resets authChecked, navigating away.
       // Switching FROM selfhosted TO saas DOES trigger a remount (mode !== 'selfhosted')
       // which is intentional — the SaaS provider tree needs fresh state after login.
-      if (hasLoadedInitialMode.current && config.mode !== 'selfhosted') {
-        setAppKey(k => k + 1);
+      if (hasLoadedInitialMode.current && config.mode !== "selfhosted") {
+        setAppKey((k) => k + 1);
       }
     });
     return unsub;
@@ -83,33 +83,35 @@ export function AppProviders({ children }: { children: ReactNode }) {
     if (connectionMode === null) return;
 
     if (!isFirstLaunch && setupComplete) {
-      if (connectionMode === 'local') {
+      if (connectionMode === "local") {
         // Even in local mode, check for a valid JWT — on Windows, the OAuth callback
         // can complete without switchToSaaS() being called (race condition), leaving
         // LOCAL_MODE_STORAGE_KEY set while the user has a valid session. Upgrade to
         // SaaS mode automatically so credits/billing/team features work correctly.
-        authService.isAuthenticated()
+        authService
+          .isAuthenticated()
           .then(async (isAuth) => {
             if (isAuth) {
               await connectionModeService.switchToSaaS(STIRLING_SAAS_URL).catch(console.error);
-              setConnectionMode('saas');
+              setConnectionMode("saas");
             }
           })
           .finally(() => setAuthChecked(true));
       } else {
-        authService.isAuthenticated()
+        authService
+          .isAuthenticated()
           .then(async (isAuth) => {
             if (!isAuth) {
               const cfg = await connectionModeService.getCurrentConfig().catch(() => null);
               if (!cfg?.lock_connection_mode) {
                 // JWT expired — fall back to local so local tools still work.
                 await connectionModeService.switchToLocal().catch(console.error);
-                setConnectionMode('local');
+                setConnectionMode("local");
                 // Show sign-in modal once per expiry cycle. If the user dismisses
                 // without signing in the flag stays set and we won't prompt again
                 // until they successfully sign in (which clears the flag).
                 if (!localStorage.getItem(JWT_EXPIRED_PROMPTED_KEY)) {
-                  localStorage.setItem(JWT_EXPIRED_PROMPTED_KEY, 'true');
+                  localStorage.setItem(JWT_EXPIRED_PROMPTED_KEY, "true");
                   setPendingSignIn(true);
                 }
               }
@@ -121,9 +123,9 @@ export function AppProviders({ children }: { children: ReactNode }) {
             const cfg = await connectionModeService.getCurrentConfig().catch(() => null);
             if (!cfg?.lock_connection_mode) {
               await connectionModeService.switchToLocal().catch(console.error);
-              setConnectionMode('local');
+              setConnectionMode("local");
               if (!localStorage.getItem(JWT_EXPIRED_PROMPTED_KEY)) {
-                localStorage.setItem(JWT_EXPIRED_PROMPTED_KEY, 'true');
+                localStorage.setItem(JWT_EXPIRED_PROMPTED_KEY, "true");
                 setPendingSignIn(true);
               }
             }
@@ -134,20 +136,21 @@ export function AppProviders({ children }: { children: ReactNode }) {
       // Guard against re-running when setConnectionMode triggers this effect.
       if (firstLaunchInitiated.current) return;
       firstLaunchInitiated.current = true;
-      connectionModeService.getCurrentConfig()
+      connectionModeService
+        .getCurrentConfig()
         .then(async (cfg) => {
           if (cfg.lock_connection_mode && cfg.server_config?.url) {
             // Locked provisioned deployment — do NOT switch to local (would clear server_config
             // from the store). Show onboarding normally; the sign-in slide handles locked auth.
             // Still start the local backend so local tools work while the user signs in.
             await tauriBackendService.startBackend().catch(console.error);
-            setConnectionMode('selfhosted');
+            setConnectionMode("selfhosted");
           } else {
             // Normal first launch — auto-enter local mode.
             // The onboarding carousel + sign-in slide will be shown inside the main app.
             await connectionModeService.switchToLocal();
             await tauriBackendService.startBackend();
-            setConnectionMode('local');
+            setConnectionMode("local");
           }
         })
         .catch(console.error)
@@ -157,14 +160,14 @@ export function AppProviders({ children }: { children: ReactNode }) {
 
   // Initialize backend health monitoring for self-hosted mode
   useEffect(() => {
-    if (connectionMode !== 'selfhosted') {
+    if (connectionMode !== "selfhosted") {
       // Stop the monitor whenever we leave selfhosted mode so the dot resets.
       selfHostedServerMonitor.stop();
       return;
     }
     if (setupComplete && !isFirstLaunch) {
       void tauriBackendService.initializeExternalBackend();
-      connectionModeService.getServerConfig().then(cfg => {
+      connectionModeService.getServerConfig().then((cfg) => {
         if (cfg?.url) {
           selfHostedServerMonitor.start(cfg.url);
         }
@@ -177,7 +180,7 @@ export function AppProviders({ children }: { children: ReactNode }) {
 
   // Initialize monitoring for bundled backend (already started in Rust)
   // This sets up port detection and health checks
-  const shouldMonitorBackend = setupComplete && !isFirstLaunch && (connectionMode === 'saas' || connectionMode === 'local');
+  const shouldMonitorBackend = setupComplete && !isFirstLaunch && (connectionMode === "saas" || connectionMode === "local");
   useBackendInitializer(shouldMonitorBackend);
 
   // Preload endpoint availability for the local bundled backend.
@@ -186,9 +189,9 @@ export function AppProviders({ children }: { children: ReactNode }) {
   //   (so useSelfHostedToolAvailability can use the cache instead of making
   //   individual requests per-tool when the remote server goes offline).
   const shouldPreloadLocalEndpoints =
-    (setupComplete && !isFirstLaunch && connectionMode === 'saas') ||
-    (setupComplete && !isFirstLaunch && connectionMode === 'local') ||
-    (setupComplete && !isFirstLaunch && connectionMode === 'selfhosted');
+    (setupComplete && !isFirstLaunch && connectionMode === "saas") ||
+    (setupComplete && !isFirstLaunch && connectionMode === "local") ||
+    (setupComplete && !isFirstLaunch && connectionMode === "selfhosted");
   useEffect(() => {
     if (!shouldPreloadLocalEndpoints) return;
 
@@ -198,7 +201,7 @@ export function AppProviders({ children }: { children: ReactNode }) {
       // tauriBackendService.isOnline now always reflects the local backend.
       // Wait for it to be healthy before preloading in both modes.
       if (!tauriBackendService.isOnline) return;
-      console.debug('[AppProviders] Preloading common tool endpoints for local backend');
+      console.debug("[AppProviders] Preloading common tool endpoints for local backend");
       void endpointAvailabilityService.preloadEndpoints(COMMON_TOOL_ENDPOINTS, backendUrl);
     };
 
@@ -207,7 +210,6 @@ export function AppProviders({ children }: { children: ReactNode }) {
     return unsubscribe;
   }, [shouldPreloadLocalEndpoints, connectionMode]);
 
-
   // Dispatch sign-in modal after authChecked so SignInModal's listener is registered.
   // (Child effects run before parent effects, so this fires after SignInModal mounts.)
   // detail.locked is always false here: setPendingSignIn(true) is only called inside
@@ -246,11 +248,11 @@ export function AppProviders({ children }: { children: ReactNode }) {
         }}
         appConfigProviderProps={{
           initialConfig: DESKTOP_DEFAULT_APP_CONFIG,
-          bootstrapMode: 'non-blocking',
+          bootstrapMode: "non-blocking",
           autoFetch: false,
         }}
       >
-        <div style={{ minHeight: '100vh' }} />
+        <div style={{ minHeight: "100vh" }} />
       </ProprietaryAppProviders>
     );
   }
@@ -264,13 +266,15 @@ export function AppProviders({ children }: { children: ReactNode }) {
       }}
       appConfigProviderProps={{
         initialConfig: DESKTOP_DEFAULT_APP_CONFIG,
-        bootstrapMode: 'non-blocking',
+        bootstrapMode: "non-blocking",
         autoFetch: false,
       }}
     >
-      <ToolActionsContext.Provider value={{
-        onEndpointUnavailableClick: () => window.dispatchEvent(new CustomEvent(OPEN_SIGN_IN_EVENT)),
-      }}>
+      <ToolActionsContext.Provider
+        value={{
+          onEndpointUnavailableClick: () => window.dispatchEvent(new CustomEvent(OPEN_SIGN_IN_EVENT)),
+        }}
+      >
         <SaaSTeamProvider key={appKey}>
           <SaasBillingProvider>
             <SaaSCheckoutProvider>
diff --git a/frontend/src/desktop/components/BackendHealthIndicator.tsx b/frontend/src/desktop/components/BackendHealthIndicator.tsx
index 5bc12f405b..0e3eb3167f 100644
--- a/frontend/src/desktop/components/BackendHealthIndicator.tsx
+++ b/frontend/src/desktop/components/BackendHealthIndicator.tsx
@@ -1,48 +1,49 @@
-import React, { useMemo, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Box, Tooltip, useMantineTheme, useComputedColorScheme, rem } from '@mantine/core';
-import { useBackendHealth } from '@app/hooks/useBackendHealth';
+import React, { useMemo, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { Box, Tooltip, useMantineTheme, useComputedColorScheme, rem } from "@mantine/core";
+import { useBackendHealth } from "@app/hooks/useBackendHealth";
 
 interface BackendHealthIndicatorProps {
   className?: string;
 }
 
-export const BackendHealthIndicator: React.FC<BackendHealthIndicatorProps> = ({
-  className = ''
-}) => {
+export const BackendHealthIndicator: React.FC<BackendHealthIndicatorProps> = ({ className = "" }) => {
   const { t } = useTranslation();
   const theme = useMantineTheme();
-  const colorScheme = useComputedColorScheme('light');
+  const colorScheme = useComputedColorScheme("light");
   const { status, isOnline, checkHealth } = useBackendHealth();
 
   const label = useMemo(() => {
-    if (status === 'starting') {
-      return t('backendHealth.checking', 'Checking backend status...');
+    if (status === "starting") {
+      return t("backendHealth.checking", "Checking backend status...");
     }
 
     if (isOnline) {
-      return t('backendHealth.online', 'Backend Online');
+      return t("backendHealth.online", "Backend Online");
     }
 
-    return t('backendHealth.offline', 'Backend Offline');
+    return t("backendHealth.offline", "Backend Offline");
   }, [status, isOnline, t]);
 
   const dotColor = useMemo(() => {
-    if (status === 'starting') {
-      return theme.colors.yellow?.[5] ?? '#fcc419';
+    if (status === "starting") {
+      return theme.colors.yellow?.[5] ?? "#fcc419";
     }
     if (isOnline) {
-      return theme.colors.green?.[5] ?? '#37b24d';
+      return theme.colors.green?.[5] ?? "#37b24d";
     }
-    return theme.colors.red?.[6] ?? '#e03131';
+    return theme.colors.red?.[6] ?? "#e03131";
   }, [status, isOnline, theme.colors.green, theme.colors.red, theme.colors.yellow]);
 
-  const handleKeyDown = useCallback((event: React.KeyboardEvent<HTMLSpanElement>) => {
-    if (event.key === 'Enter' || event.key === ' ') {
-      event.preventDefault();
-      checkHealth();
-    }
-  }, [checkHealth]);
+  const handleKeyDown = useCallback(
+    (event: React.KeyboardEvent<HTMLSpanElement>) => {
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        checkHealth();
+      }
+    },
+    [checkHealth],
+  );
 
   return (
     <Tooltip
@@ -51,7 +52,7 @@ export const BackendHealthIndicator: React.FC<BackendHealthIndicatorProps> = ({
       offset={12}
       withArrow
       withinPortal
-      color={colorScheme === 'dark' ? undefined : 'dark'}
+      color={colorScheme === "dark" ? undefined : "dark"}
     >
       <Box
         component="span"
@@ -65,14 +66,12 @@ export const BackendHealthIndicator: React.FC<BackendHealthIndicatorProps> = ({
         style={{
           width: rem(12),
           height: rem(12),
-          borderRadius: '50%',
+          borderRadius: "50%",
           backgroundColor: dotColor,
-          boxShadow: colorScheme === 'dark'
-            ? '0 0 0 2px rgba(255, 255, 255, 0.18)'
-            : '0 0 0 2px rgba(0, 0, 0, 0.08)',
-          cursor: 'pointer',
-          display: 'inline-block',
-          outline: 'none',
+          boxShadow: colorScheme === "dark" ? "0 0 0 2px rgba(255, 255, 255, 0.18)" : "0 0 0 2px rgba(0, 0, 0, 0.08)",
+          cursor: "pointer",
+          display: "inline-block",
+          outline: "none",
         }}
       />
     </Tooltip>
diff --git a/frontend/src/desktop/components/ConnectionSettings.tsx b/frontend/src/desktop/components/ConnectionSettings.tsx
index fa75cddcef..41c1078ce6 100644
--- a/frontend/src/desktop/components/ConnectionSettings.tsx
+++ b/frontend/src/desktop/components/ConnectionSettings.tsx
@@ -1,9 +1,9 @@
-import React, { useState, useEffect } from 'react';
-import { Stack, Card, Badge, Button, Text, Group } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { connectionModeService, ConnectionConfig } from '@app/services/connectionModeService';
-import { authService, UserInfo } from '@app/services/authService';
-import { OPEN_SIGN_IN_EVENT } from '@app/constants/signInEvents';
+import React, { useState, useEffect } from "react";
+import { Stack, Card, Badge, Button, Text, Group } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { connectionModeService, ConnectionConfig } from "@app/services/connectionModeService";
+import { authService, UserInfo } from "@app/services/authService";
+import { OPEN_SIGN_IN_EVENT } from "@app/constants/signInEvents";
 
 export const ConnectionSettings: React.FC = () => {
   const { t } = useTranslation();
@@ -17,7 +17,7 @@ export const ConnectionSettings: React.FC = () => {
       const currentConfig = await connectionModeService.getCurrentConfig();
       setConfig(currentConfig);
 
-      if (currentConfig.mode === 'saas' || currentConfig.mode === 'selfhosted') {
+      if (currentConfig.mode === "saas" || currentConfig.mode === "selfhosted") {
         const user = await authService.getUserInfo();
         setUserInfo(user);
       }
@@ -33,8 +33,8 @@ export const ConnectionSettings: React.FC = () => {
     try {
       setLoading(true);
       // Save server URL before clearing so user can easily reconnect (self-hosted only)
-      if (config?.mode === 'selfhosted' && config?.server_config?.url) {
-        localStorage.setItem('server_url', config.server_config.url);
+      if (config?.mode === "selfhosted" && config?.server_config?.url) {
+        localStorage.setItem("server_url", config.server_config.url);
       }
       await authService.logout();
       // Always switch to local after logout so the app remains usable
@@ -46,11 +46,11 @@ export const ConnectionSettings: React.FC = () => {
       setUserInfo(null);
 
       // Clear URL to home page so we don't return to settings after re-login
-      window.history.replaceState({}, '', '/');
+      window.history.replaceState({}, "", "/");
       // No reload needed — AppProviders remounts the SaaS provider tree via
       // connectionModeService subscription when mode changes to local.
     } catch (error) {
-      console.error('Logout failed:', error);
+      console.error("Logout failed:", error);
     } finally {
       setLoading(false);
     }
@@ -61,7 +61,7 @@ export const ConnectionSettings: React.FC = () => {
   };
 
   if (!config) {
-    return <Text>{t('common.loading', 'Loading...')}</Text>;
+    return <Text>{t("common.loading", "Loading...")}</Text>;
   }
 
   return (
@@ -69,43 +69,40 @@ export const ConnectionSettings: React.FC = () => {
       <Card shadow="sm" padding="lg" radius="md" withBorder>
         <Stack gap="md">
           <Group justify="space-between">
-            <Text fw={600}>{t('settings.connection.title', 'Connection Mode')}</Text>
-            <Badge
-              color={config.mode === 'saas' ? 'blue' : config.mode === 'local' ? 'white' : 'green'}
-              variant="light"
-            >
-              {config.mode === 'saas'
-                ? t('settings.connection.mode.saas', 'Stirling Cloud')
-                : config.mode === 'local'
-                  ? t('settings.connection.mode.local', 'Local Only')
-                  : t('settings.connection.mode.selfhosted', 'Self-Hosted')}
+            <Text fw={600}>{t("settings.connection.title", "Connection Mode")}</Text>
+            <Badge color={config.mode === "saas" ? "blue" : config.mode === "local" ? "white" : "green"} variant="light">
+              {config.mode === "saas"
+                ? t("settings.connection.mode.saas", "Stirling Cloud")
+                : config.mode === "local"
+                  ? t("settings.connection.mode.local", "Local Only")
+                  : t("settings.connection.mode.selfhosted", "Self-Hosted")}
             </Badge>
           </Group>
 
-          {config.mode === 'local' && (
+          {config.mode === "local" && (
             <Text size="sm" c="dimmed">
               {t(
-                'settings.connection.localDescription',
-                'You are using the local backend without an account. Some tools requiring cloud processing or a self-hosted server are unavailable.'
+                "settings.connection.localDescription",
+                "You are using the local backend without an account. Some tools requiring cloud processing or a self-hosted server are unavailable.",
               )}
             </Text>
           )}
 
-          {(config.mode === 'saas' || config.mode === 'selfhosted') && config.server_config && (
+          {(config.mode === "saas" || config.mode === "selfhosted") && config.server_config && (
             <>
               <div>
                 <Text size="sm" fw={500}>
-                  {t('settings.connection.server', 'Server')}
+                  {t("settings.connection.server", "Server")}
                 </Text>
                 <Text size="sm" c="dimmed">
-                  {config.mode === 'saas' ? 'stirling.com' : config.server_config.url}
+                  {config.mode === "saas" ? "stirling.com" : config.server_config.url}
                 </Text>
               </div>
 
               {userInfo && (
                 <div>
                   <Text size="sm" fw={500}>
-                    {t('settings.connection.user', 'Logged in as')}
+                    {t("settings.connection.user", "Logged in as")}
                   </Text>
                   <Text size="sm" c="dimmed">
                     {userInfo.username}
@@ -117,13 +114,13 @@ export const ConnectionSettings: React.FC = () => {
           )}
 
           <Group mt="md">
-            {config.mode === 'local' ? (
+            {config.mode === "local" ? (
               <Button onClick={handleSignIn} color="blue" variant="light">
-                {t('settings.connection.signIn', 'Sign In')}
+                {t("settings.connection.signIn", "Sign In")}
               </Button>
             ) : (
               <Button onClick={handleLogout} color="red" variant="light" disabled={loading}>
-                {t('settings.connection.logout', 'Log Out')}
+                {t("settings.connection.logout", "Log Out")}
               </Button>
             )}
           </Group>
diff --git a/frontend/src/desktop/components/DesktopBannerInitializer.tsx b/frontend/src/desktop/components/DesktopBannerInitializer.tsx
index c649576f8b..ec4290590c 100644
--- a/frontend/src/desktop/components/DesktopBannerInitializer.tsx
+++ b/frontend/src/desktop/components/DesktopBannerInitializer.tsx
@@ -1,9 +1,9 @@
-import { useEffect } from 'react';
-import { useBanner } from '@app/contexts/BannerContext';
-import { DefaultAppBanner } from '@app/components/shared/DefaultAppBanner';
-import UpgradeBanner from '@app/components/shared/UpgradeBanner';
-import { TeamInvitationBanner } from '@app/components/shared/TeamInvitationBanner';
-import { SelfHostedOfflineBanner } from '@app/components/shared/SelfHostedOfflineBanner';
+import { useEffect } from "react";
+import { useBanner } from "@app/contexts/BannerContext";
+import { DefaultAppBanner } from "@app/components/shared/DefaultAppBanner";
+import UpgradeBanner from "@app/components/shared/UpgradeBanner";
+import { TeamInvitationBanner } from "@app/components/shared/TeamInvitationBanner";
+import { SelfHostedOfflineBanner } from "@app/components/shared/SelfHostedOfflineBanner";
 
 export function DesktopBannerInitializer() {
   const { setBanner } = useBanner();
diff --git a/frontend/src/desktop/components/DesktopConfigSync.tsx b/frontend/src/desktop/components/DesktopConfigSync.tsx
index 25c3ffb67d..e56074ab77 100644
--- a/frontend/src/desktop/components/DesktopConfigSync.tsx
+++ b/frontend/src/desktop/components/DesktopConfigSync.tsx
@@ -1,6 +1,6 @@
-import { useEffect, useRef } from 'react';
-import { useBackendHealth } from '@app/hooks/useBackendHealth';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
+import { useEffect, useRef } from "react";
+import { useBackendHealth } from "@app/hooks/useBackendHealth";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
 
 /**
  * Desktop-only bridge that refetches the app config once the bundled backend
@@ -13,7 +13,7 @@ export function DesktopConfigSync() {
   const previousStatus = useRef(status);
 
   useEffect(() => {
-    if (status === 'healthy' && previousStatus.current !== 'healthy') {
+    if (status === "healthy" && previousStatus.current !== "healthy") {
       refetch();
     }
     previousStatus.current = status;
diff --git a/frontend/src/desktop/components/DesktopOnboardingModal.tsx b/frontend/src/desktop/components/DesktopOnboardingModal.tsx
index 1526557ebe..5228a31e8c 100644
--- a/frontend/src/desktop/components/DesktopOnboardingModal.tsx
+++ b/frontend/src/desktop/components/DesktopOnboardingModal.tsx
@@ -1,19 +1,19 @@
-import { useState, useMemo } from 'react';
-import { Modal, Stack, Group, Button, ActionIcon } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import CloseIcon from '@mui/icons-material/Close';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import AnimatedSlideBackground from '@app/components/onboarding/slides/AnimatedSlideBackground';
-import OnboardingStepper from '@app/components/onboarding/OnboardingStepper';
-import { SetupWizard } from '@app/components/SetupWizard';
-import WelcomeSlide from '@app/components/onboarding/slides/WelcomeSlide';
-import { Z_INDEX_OVER_FULLSCREEN_SURFACE } from '@app/styles/zIndex';
-import styles from '@app/components/onboarding/InitialOnboardingModal/InitialOnboardingModal.module.css';
-import { connectionModeService } from '@app/services/connectionModeService';
+import { useState, useMemo } from "react";
+import { Modal, Stack, Group, Button, ActionIcon } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import CloseIcon from "@mui/icons-material/Close";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import AnimatedSlideBackground from "@app/components/onboarding/slides/AnimatedSlideBackground";
+import OnboardingStepper from "@app/components/onboarding/OnboardingStepper";
+import { SetupWizard } from "@app/components/SetupWizard";
+import WelcomeSlide from "@app/components/onboarding/slides/WelcomeSlide";
+import { Z_INDEX_OVER_FULLSCREEN_SURFACE } from "@app/styles/zIndex";
+import styles from "@app/components/onboarding/InitialOnboardingModal/InitialOnboardingModal.module.css";
+import { connectionModeService } from "@app/services/connectionModeService";
 
-const ONBOARDING_KEY = 'stirling-desktop-onboarding-seen';
+const ONBOARDING_KEY = "stirling-desktop-onboarding-seen";
 
-const SIGN_IN_GRADIENT: [string, string] = ['#3B82F6', '#7C3AED'];
+const SIGN_IN_GRADIENT: [string, string] = ["#3B82F6", "#7C3AED"];
 
 /**
  * Desktop-specific onboarding modal.
@@ -26,7 +26,7 @@ export function DesktopOnboardingModal() {
   const [step, setStep] = useState(0);
 
   const dismissFinal = () => {
-    localStorage.setItem(ONBOARDING_KEY, 'true');
+    localStorage.setItem(ONBOARDING_KEY, "true");
     setVisible(false);
     // If the user dismissed the sign-in slide without authenticating, fall back to local mode
     // so the app is usable without a server connection.
@@ -43,14 +43,13 @@ export function DesktopOnboardingModal() {
   };
 
   const handleComplete = () => {
-    localStorage.setItem(ONBOARDING_KEY, 'true');
+    localStorage.setItem(ONBOARDING_KEY, "true");
     setVisible(false);
     // No reload needed — AppProviders subscribes to connectionModeService and remounts
     // the SaaS provider tree when mode changes, avoiding the Windows WebView2 freeze
     // that window.location.reload() causes during a backgrounded OAuth flow.
   };
 
-
   // Call WelcomeSlide as a data factory (not a component render) — memoised so it
   // isn't reconstructed on every render while the modal is open.
   const welcomeSlide = useMemo(() => WelcomeSlide(), []);
@@ -71,38 +70,42 @@ export function DesktopOnboardingModal() {
       styles={{
         body: { padding: 0 },
         content: {
-          overflow: 'hidden',
-          border: 'none',
-          background: 'var(--bg-surface)',
-          maxHeight: '90vh',
-          display: 'flex',
-          flexDirection: 'column',
+          overflow: "hidden",
+          border: "none",
+          background: "var(--bg-surface)",
+          maxHeight: "90vh",
+          display: "flex",
+          flexDirection: "column",
         },
       }}
     >
-      <Stack gap={0} className={styles.modalContent} style={{ height: '100%', maxHeight: '90vh', display: 'flex', flexDirection: 'column' }}>
+      <Stack
+        gap={0}
+        className={styles.modalContent}
+        style={{ height: "100%", maxHeight: "90vh", display: "flex", flexDirection: "column" }}
+      >
         {/* Hero section — gradient changes per slide */}
         <div className={styles.heroWrapper} style={{ flexShrink: 0 }}>
           <AnimatedSlideBackground
             gradientStops={(step === 0 ? welcomeSlide.background.gradientStops : SIGN_IN_GRADIENT) as [string, string]}
             circles={welcomeSlide.background.circles}
             isActive
-            slideKey={step === 0 ? 'desktop-welcome' : 'desktop-sign-in'}
+            slideKey={step === 0 ? "desktop-welcome" : "desktop-sign-in"}
           />
           <ActionIcon
             onClick={handleClose}
             radius="md"
             size={36}
             style={{
-              position: 'absolute',
+              position: "absolute",
               top: 16,
               right: 16,
-              backgroundColor: 'rgba(255, 255, 255, 0.2)',
-              color: 'white',
-              backdropFilter: 'blur(4px)',
+              backgroundColor: "rgba(255, 255, 255, 0.2)",
+              color: "white",
+              backdropFilter: "blur(4px)",
               zIndex: 10,
             }}
-            styles={{ root: { '&:hover': { backgroundColor: 'rgba(255, 255, 255, 0.3)' } } }}
+            styles={{ root: { "&:hover": { backgroundColor: "rgba(255, 255, 255, 0.3)" } } }}
           >
             <CloseIcon fontSize="small" />
           </ActionIcon>
@@ -118,20 +121,13 @@ export function DesktopOnboardingModal() {
         </div>
 
         {/* Body section */}
-        <div
-          className={styles.modalBody}
-          style={{ flex: 1, overflowY: 'auto', overflowX: 'hidden' }}
-        >
+        <div className={styles.modalBody} style={{ flex: 1, overflowY: "auto", overflowX: "hidden" }}>
           {step === 0 ? (
             // Welcome slide
             <Stack gap={16}>
-              <div className={`${styles.title} ${styles.titleText}`}>
-                {welcomeSlide.title}
-              </div>
+              <div className={`${styles.title} ${styles.titleText}`}>{welcomeSlide.title}</div>
               <div className={styles.bodyText}>
-                <div className={`${styles.bodyCopy} ${styles.bodyCopyInner}`}>
-                  {welcomeSlide.body}
-                </div>
+                <div className={`${styles.bodyCopy} ${styles.bodyCopyInner}`}>{welcomeSlide.body}</div>
                 <style>{`.${styles.bodyCopyInner} strong { color: var(--onboarding-title); font-weight: 600; }`}</style>
               </div>
               <OnboardingStepper totalSteps={totalSteps} activeStep={step} />
@@ -141,12 +137,12 @@ export function DesktopOnboardingModal() {
                     onClick={() => setStep(1)}
                     styles={{
                       root: {
-                        background: 'var(--onboarding-primary-button-bg)',
-                        color: 'var(--onboarding-primary-button-text)',
+                        background: "var(--onboarding-primary-button-bg)",
+                        color: "var(--onboarding-primary-button-text)",
                       },
                     }}
                   >
-                    {t('onboarding.buttons.next', 'Next →')}
+                    {t("onboarding.buttons.next", "Next →")}
                   </Button>
                 </Group>
               </div>
@@ -155,11 +151,7 @@ export function DesktopOnboardingModal() {
             // Sign-in slide
             <Stack gap={12}>
               <OnboardingStepper totalSteps={totalSteps} activeStep={step} />
-              <SetupWizard
-                noLayout
-                onComplete={handleComplete}
-                onClose={dismissFinal}
-              />
+              <SetupWizard noLayout onComplete={handleComplete} onClose={dismissFinal} />
             </Stack>
           )}
         </div>
diff --git a/frontend/src/desktop/components/SaveShortcutListener.tsx b/frontend/src/desktop/components/SaveShortcutListener.tsx
index 64b5d681a4..19540857c7 100644
--- a/frontend/src/desktop/components/SaveShortcutListener.tsx
+++ b/frontend/src/desktop/components/SaveShortcutListener.tsx
@@ -1,5 +1,5 @@
-import { useSaveShortcut } from '@app/hooks/useSaveShortcut';
-import { useExitWarning } from '@app/hooks/useExitWarning';
+import { useSaveShortcut } from "@app/hooks/useSaveShortcut";
+import { useExitWarning } from "@app/hooks/useExitWarning";
 
 /**
  * Desktop-only component that sets up keyboard shortcuts and exit warnings
diff --git a/frontend/src/desktop/components/SetupWizard/DesktopAuthLayout.tsx b/frontend/src/desktop/components/SetupWizard/DesktopAuthLayout.tsx
index 92558857b4..4eb657489d 100644
--- a/frontend/src/desktop/components/SetupWizard/DesktopAuthLayout.tsx
+++ b/frontend/src/desktop/components/SetupWizard/DesktopAuthLayout.tsx
@@ -1,9 +1,9 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import LoginRightCarousel from '@app/components/shared/LoginRightCarousel';
-import buildLoginSlides from '@app/components/shared/loginSlides';
-import styles from '@app/routes/authShared/AuthLayout.module.css';
-import { useLogoVariant } from '@app/hooks/useLogoVariant';
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import LoginRightCarousel from "@app/components/shared/LoginRightCarousel";
+import buildLoginSlides from "@app/components/shared/loginSlides";
+import styles from "@app/routes/authShared/AuthLayout.module.css";
+import { useLogoVariant } from "@app/hooks/useLogoVariant";
 
 interface DesktopAuthLayoutProps {
   children: React.ReactNode;
@@ -19,15 +19,15 @@ export const DesktopAuthLayout: React.FC<DesktopAuthLayoutProps> = ({ children }
   // Force light mode on auth pages
   useEffect(() => {
     const htmlElement = document.documentElement;
-    const previousColorScheme = htmlElement.getAttribute('data-mantine-color-scheme');
+    const previousColorScheme = htmlElement.getAttribute("data-mantine-color-scheme");
 
     // Set light mode
-    htmlElement.setAttribute('data-mantine-color-scheme', 'light');
+    htmlElement.setAttribute("data-mantine-color-scheme", "light");
 
     // Cleanup: restore previous theme when leaving auth pages
     return () => {
       if (previousColorScheme) {
-        htmlElement.setAttribute('data-mantine-color-scheme', previousColorScheme);
+        htmlElement.setAttribute("data-mantine-color-scheme", previousColorScheme);
       }
     };
   }, []);
@@ -44,28 +44,21 @@ export const DesktopAuthLayout: React.FC<DesktopAuthLayoutProps> = ({ children }
       setHideRightPanel(tooNarrow || tooShort);
     };
     update();
-    window.addEventListener('resize', update);
-    window.addEventListener('orientationchange', update);
+    window.addEventListener("resize", update);
+    window.addEventListener("orientationchange", update);
     return () => {
-      window.removeEventListener('resize', update);
-      window.removeEventListener('orientationchange', update);
+      window.removeEventListener("resize", update);
+      window.removeEventListener("orientationchange", update);
     };
   }, []);
 
   return (
     <div className={styles.authContainer}>
-      <div
-        ref={cardRef}
-        className={`${styles.authCard} ${!hideRightPanel ? styles.authCardTwoColumns : ''}`}
-      >
+      <div ref={cardRef} className={`${styles.authCard} ${!hideRightPanel ? styles.authCardTwoColumns : ""}`}>
         <div className={styles.authLeftPanel}>
-          <div className={styles.authContent}>
-            {children}
-          </div>
+          <div className={styles.authContent}>{children}</div>
         </div>
-        {!hideRightPanel && (
-          <LoginRightCarousel imageSlides={imageSlides} initialSeconds={5} slideSeconds={8} />
-        )}
+        {!hideRightPanel && <LoginRightCarousel imageSlides={imageSlides} initialSeconds={5} slideSeconds={8} />}
       </div>
     </div>
   );
diff --git a/frontend/src/desktop/components/SetupWizard/DesktopOAuthButtons.tsx b/frontend/src/desktop/components/SetupWizard/DesktopOAuthButtons.tsx
index 72b78be835..97cf98496c 100644
--- a/frontend/src/desktop/components/SetupWizard/DesktopOAuthButtons.tsx
+++ b/frontend/src/desktop/components/SetupWizard/DesktopOAuthButtons.tsx
@@ -1,12 +1,12 @@
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { authService, UserInfo } from '@app/services/authService';
-import { buildOAuthCallbackHtml } from '@app/utils/oauthCallbackHtml';
-import { BASE_PATH } from '@app/constants/app';
-import { STIRLING_SAAS_URL } from '@app/constants/connection';
-import '@app/components/SetupWizard/desktopOAuth.css';
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { authService, UserInfo } from "@app/services/authService";
+import { buildOAuthCallbackHtml } from "@app/utils/oauthCallbackHtml";
+import { BASE_PATH } from "@app/constants/app";
+import { STIRLING_SAAS_URL } from "@app/constants/connection";
+import "@app/components/SetupWizard/desktopOAuth.css";
 
-type KnownProviderId = 'google' | 'github' | 'keycloak' | 'azure' | 'apple' | 'oidc';
+type KnownProviderId = "google" | "github" | "keycloak" | "azure" | "apple" | "oidc";
 export type OAuthProviderId = KnownProviderId | string;
 
 export interface DesktopSSOProvider {
@@ -21,7 +21,7 @@ interface DesktopOAuthButtonsProps {
   isDisabled: boolean;
   serverUrl: string;
   providers: DesktopSSOProvider[];
-  mode?: 'saas' | 'selfHosted';
+  mode?: "saas" | "selfHosted";
 }
 
 export const DesktopOAuthButtons: React.FC<DesktopOAuthButtonsProps> = ({
@@ -30,7 +30,7 @@ export const DesktopOAuthButtons: React.FC<DesktopOAuthButtonsProps> = ({
   isDisabled,
   serverUrl,
   providers,
-  mode = 'saas',
+  mode = "saas",
 }) => {
   const { t } = useTranslation();
   const [oauthLoading, setOauthLoading] = useState(false);
@@ -46,21 +46,20 @@ export const DesktopOAuthButtons: React.FC<DesktopOAuthButtonsProps> = ({
 
       // Build callback page HTML with translations and dark mode support
       const successHtml = buildOAuthCallbackHtml({
-        title: t('oauth.success.title', 'Authentication Successful'),
-        message: t('oauth.success.message', 'You can close this window and return to Stirling PDF.'),
+        title: t("oauth.success.title", "Authentication Successful"),
+        message: t("oauth.success.message", "You can close this window and return to Stirling PDF."),
         isError: false,
       });
 
       const errorHtml = buildOAuthCallbackHtml({
-        title: t('oauth.error.title', 'Authentication Failed'),
-        message: t('oauth.error.message', 'Authentication was not successful. You can close this window and try again.'),
+        title: t("oauth.error.title", "Authentication Failed"),
+        message: t("oauth.error.message", "Authentication was not successful. You can close this window and try again."),
         isError: true,
         errorPlaceholder: true, // {error} will be replaced by Rust
       });
 
-      const normalizedServer = serverUrl.replace(/\/+$/, '');
-      const usingSupabaseFlow =
-        mode === 'saas' || normalizedServer === STIRLING_SAAS_URL.replace(/\/+$/, '');
+      const normalizedServer = serverUrl.replace(/\/+$/, "");
+      const usingSupabaseFlow = mode === "saas" || normalizedServer === STIRLING_SAAS_URL.replace(/\/+$/, "");
       const userInfo = usingSupabaseFlow
         ? await authService.loginWithOAuth(provider.id, serverUrl, successHtml, errorHtml)
         : await authService.loginWithSelfHostedOAuth(provider.path || provider.id, serverUrl);
@@ -68,11 +67,10 @@ export const DesktopOAuthButtons: React.FC<DesktopOAuthButtonsProps> = ({
       // Call the onOAuthSuccess callback to complete setup
       await onOAuthSuccess(userInfo);
     } catch (error) {
-      console.error('OAuth login failed:', error);
+      console.error("OAuth login failed:", error);
 
-      const errorMessage = error instanceof Error
-        ? error.message
-        : t('setup.login.error.oauthFailed', 'OAuth login failed. Please try again.');
+      const errorMessage =
+        error instanceof Error ? error.message : t("setup.login.error.oauthFailed", "OAuth login failed. Please try again.");
 
       onError(errorMessage);
       setOauthLoading(false);
@@ -80,22 +78,21 @@ export const DesktopOAuthButtons: React.FC<DesktopOAuthButtonsProps> = ({
   };
 
   const providerConfig: Record<KnownProviderId, { label: string; file: string }> = {
-    google: { label: 'Google', file: 'google.svg' },
-    github: { label: 'GitHub', file: 'github.svg' },
-    keycloak: { label: 'Keycloak', file: 'keycloak.svg' },
-    azure: { label: 'Microsoft', file: 'microsoft.svg' },
-    apple: { label: 'Apple', file: 'apple.svg' },
-    oidc: { label: 'OpenID', file: 'oidc.svg' },
+    google: { label: "Google", file: "google.svg" },
+    github: { label: "GitHub", file: "github.svg" },
+    keycloak: { label: "Keycloak", file: "keycloak.svg" },
+    azure: { label: "Microsoft", file: "microsoft.svg" },
+    apple: { label: "Apple", file: "apple.svg" },
+    oidc: { label: "OpenID", file: "oidc.svg" },
   };
-  const isKnownProvider = (id: OAuthProviderId): id is KnownProviderId =>
-    (id as KnownProviderId) in providerConfig;
-  const GENERIC_PROVIDER_ICON = 'oidc.svg';
+  const isKnownProvider = (id: OAuthProviderId): id is KnownProviderId => (id as KnownProviderId) in providerConfig;
+  const GENERIC_PROVIDER_ICON = "oidc.svg";
 
-  console.log('[DesktopOAuthButtons] Received providers:', providers);
-  console.log('[DesktopOAuthButtons] Mode:', mode, 'Server URL:', serverUrl);
+  console.log("[DesktopOAuthButtons] Received providers:", providers);
+  console.log("[DesktopOAuthButtons] Mode:", mode, "Server URL:", serverUrl);
 
   if (providers.length === 0) {
-    console.warn('[DesktopOAuthButtons] No providers to display, returning null');
+    console.warn("[DesktopOAuthButtons] No providers to display, returning null");
     return null;
   }
 
@@ -105,15 +102,13 @@ export const DesktopOAuthButtons: React.FC<DesktopOAuthButtonsProps> = ({
       {providers
         .filter((providerConfigEntry) => providerConfigEntry && providerConfigEntry.id)
         .map((providerEntry) => {
-          const iconConfig = isKnownProvider(providerEntry.id)
-            ? providerConfig[providerEntry.id]
-            : undefined;
+          const iconConfig = isKnownProvider(providerEntry.id) ? providerConfig[providerEntry.id] : undefined;
           const label =
             providerEntry.label ||
             iconConfig?.label ||
             (providerEntry.id
               ? providerEntry.id.charAt(0).toUpperCase() + providerEntry.id.slice(1)
-              : t('setup.login.sso', 'Single Sign-On'));
+              : t("setup.login.sso", "Single Sign-On"));
           return (
             <button
               key={providerEntry.id}
@@ -136,8 +131,8 @@ export const DesktopOAuthButtons: React.FC<DesktopOAuthButtonsProps> = ({
           );
         })}
       {oauthLoading && (
-        <p style={{ margin: '0.5rem 0', fontSize: '0.875rem', color: '#6b7280', textAlign: 'center' }}>
-          {t('setup.login.oauthPending', 'Opening browser for authentication...')}
+        <p style={{ margin: "0.5rem 0", fontSize: "0.875rem", color: "#6b7280", textAlign: "center" }}>
+          {t("setup.login.oauthPending", "Opening browser for authentication...")}
         </p>
       )}
     </div>
diff --git a/frontend/src/desktop/components/SetupWizard/SaaSLoginScreen.tsx b/frontend/src/desktop/components/SetupWizard/SaaSLoginScreen.tsx
index 2dc749548c..40fc3fdaa0 100644
--- a/frontend/src/desktop/components/SetupWizard/SaaSLoginScreen.tsx
+++ b/frontend/src/desktop/components/SetupWizard/SaaSLoginScreen.tsx
@@ -1,13 +1,13 @@
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import LoginHeader from '@app/routes/login/LoginHeader';
-import ErrorMessage from '@app/routes/login/ErrorMessage';
-import EmailPasswordForm from '@app/routes/login/EmailPasswordForm';
-import DividerWithText from '@app/components/shared/DividerWithText';
-import { DesktopOAuthButtons } from '@app/components/SetupWizard/DesktopOAuthButtons';
-import { SelfHostedLink } from '@app/components/SetupWizard/SelfHostedLink';
-import { UserInfo } from '@app/services/authService';
-import '@app/routes/authShared/auth.css';
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import LoginHeader from "@app/routes/login/LoginHeader";
+import ErrorMessage from "@app/routes/login/ErrorMessage";
+import EmailPasswordForm from "@app/routes/login/EmailPasswordForm";
+import DividerWithText from "@app/components/shared/DividerWithText";
+import { DesktopOAuthButtons } from "@app/components/SetupWizard/DesktopOAuthButtons";
+import { SelfHostedLink } from "@app/components/SetupWizard/SelfHostedLink";
+import { UserInfo } from "@app/services/authService";
+import "@app/routes/authShared/auth.css";
 
 interface SaaSLoginScreenProps {
   serverUrl: string;
@@ -33,19 +33,19 @@ export const SaaSLoginScreen: React.FC<SaaSLoginScreenProps> = ({
   error,
 }) => {
   const { t } = useTranslation();
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
   const [validationError, setValidationError] = useState<string | null>(null);
 
   const handleEmailPasswordSubmit = async () => {
     // Validation
     if (!email.trim()) {
-      setValidationError(t('setup.login.error.emptyEmail', 'Please enter your email'));
+      setValidationError(t("setup.login.error.emptyEmail", "Please enter your email"));
       return;
     }
 
     if (!password) {
-      setValidationError(t('setup.login.error.emptyPassword', 'Please enter your password'));
+      setValidationError(t("setup.login.error.emptyPassword", "Please enter your password"));
       return;
     }
 
@@ -61,7 +61,7 @@ export const SaaSLoginScreen: React.FC<SaaSLoginScreenProps> = ({
 
   return (
     <>
-      <LoginHeader title={t('setup.saas.title', 'Sign in to Stirling Cloud')} onClose={onClose} />
+      <LoginHeader title={t("setup.saas.title", "Sign in to Stirling Cloud")} onClose={onClose} />
 
       <ErrorMessage error={displayError} />
 
@@ -71,14 +71,11 @@ export const SaaSLoginScreen: React.FC<SaaSLoginScreenProps> = ({
         isDisabled={loading}
         serverUrl={serverUrl}
         mode="saas"
-        providers={[
-          { id: 'google' },
-          { id: 'github' },
-        ]}
+        providers={[{ id: "google" }, { id: "github" }]}
       />
 
       <DividerWithText
-        text={t('setup.login.orContinueWith', 'Or continue with email')}
+        text={t("setup.login.orContinueWith", "Or continue with email")}
         respondsToDarkMode={false}
         opacity={0.4}
       />
@@ -96,10 +93,10 @@ export const SaaSLoginScreen: React.FC<SaaSLoginScreenProps> = ({
         }}
         onSubmit={handleEmailPasswordSubmit}
         isSubmitting={loading}
-        submitButtonText={t('setup.login.submit', 'Login')}
+        submitButtonText={t("setup.login.submit", "Login")}
       />
 
-      <div className="navigation-link-container" style={{ marginTop: '0.5rem', textAlign: 'right' }}>
+      <div className="navigation-link-container" style={{ marginTop: "0.5rem", textAlign: "right" }}>
         <button
           type="button"
           onClick={() => {
@@ -109,21 +106,16 @@ export const SaaSLoginScreen: React.FC<SaaSLoginScreenProps> = ({
           className="navigation-link-button"
           disabled={loading}
         >
-          {t('signup.signUp', 'Sign Up')}
+          {t("signup.signUp", "Sign Up")}
         </button>
       </div>
 
       <SelfHostedLink onClick={onSelfHostedClick} disabled={loading} />
 
       {onSkipSignIn && (
-        <div className="navigation-link-container" style={{ marginTop: '0.5rem', textAlign: 'center' }}>
-          <button
-            type="button"
-            onClick={onSkipSignIn}
-            className="navigation-link-button"
-            disabled={loading}
-          >
-            {t('setup.login.skipSignIn', 'Continue without signing in')}
+        <div className="navigation-link-container" style={{ marginTop: "0.5rem", textAlign: "center" }}>
+          <button type="button" onClick={onSkipSignIn} className="navigation-link-button" disabled={loading}>
+            {t("setup.login.skipSignIn", "Continue without signing in")}
           </button>
         </div>
       )}
diff --git a/frontend/src/desktop/components/SetupWizard/SaaSSignupScreen.tsx b/frontend/src/desktop/components/SetupWizard/SaaSSignupScreen.tsx
index 6ad3309261..28d6e3acc4 100644
--- a/frontend/src/desktop/components/SetupWizard/SaaSSignupScreen.tsx
+++ b/frontend/src/desktop/components/SetupWizard/SaaSSignupScreen.tsx
@@ -1,11 +1,11 @@
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import LoginHeader from '@app/routes/login/LoginHeader';
-import ErrorMessage from '@app/routes/login/ErrorMessage';
-import SignupForm from '@app/routes/signup/SignupForm';
-import { useSignupFormValidation, SignupFieldErrors } from '@app/routes/signup/SignupFormValidation';
-import { authService } from '@app/services/authService';
-import '@app/routes/authShared/auth.css';
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import LoginHeader from "@app/routes/login/LoginHeader";
+import ErrorMessage from "@app/routes/login/ErrorMessage";
+import SignupForm from "@app/routes/signup/SignupForm";
+import { useSignupFormValidation, SignupFieldErrors } from "@app/routes/signup/SignupFormValidation";
+import { authService } from "@app/services/authService";
+import "@app/routes/authShared/auth.css";
 
 interface SaaSSignupScreenProps {
   loading: boolean;
@@ -21,9 +21,9 @@ export const SaaSSignupScreen: React.FC<SaaSSignupScreenProps> = ({
   onSwitchToLogin: _onSwitchToLogin,
 }) => {
   const { t } = useTranslation();
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
   const [validationError, setValidationError] = useState<string | null>(null);
   const [signupFieldErrors, setSignupFieldErrors] = useState<SignupFieldErrors>({});
   const [signupSuccessMessage, setSignupSuccessMessage] = useState<string | null>(null);
@@ -47,12 +47,14 @@ export const SaaSSignupScreen: React.FC<SaaSSignupScreenProps> = ({
     try {
       setIsSignupSubmitting(true);
       await authService.signUpSaas(email.trim(), password);
-      setSignupSuccessMessage(t('signup.checkEmailConfirmation', 'Check your email for a confirmation link to complete your registration.'));
+      setSignupSuccessMessage(
+        t("signup.checkEmailConfirmation", "Check your email for a confirmation link to complete your registration."),
+      );
       setSignupFieldErrors({});
       setValidationError(null);
     } catch (err) {
       setSignupSuccessMessage(null);
-      const message = err instanceof Error ? err.message : t('signup.unexpectedError', { message: 'Unknown error' });
+      const message = err instanceof Error ? err.message : t("signup.unexpectedError", { message: "Unknown error" });
       setValidationError(message);
     } finally {
       setIsSignupSubmitting(false);
@@ -61,10 +63,7 @@ export const SaaSSignupScreen: React.FC<SaaSSignupScreenProps> = ({
 
   return (
     <>
-      <LoginHeader
-        title={t('signup.title', 'Create an account')}
-        subtitle={t('signup.subtitle', 'Join Stirling PDF')}
-      />
+      <LoginHeader title={t("signup.title", "Create an account")} subtitle={t("signup.subtitle", "Join Stirling PDF")} />
 
       <ErrorMessage error={displayError} />
       {signupSuccessMessage && (
@@ -98,7 +97,6 @@ export const SaaSSignupScreen: React.FC<SaaSSignupScreenProps> = ({
         showName={false}
         showTerms={false}
       />
-
     </>
   );
 };
diff --git a/frontend/src/desktop/components/SetupWizard/SelfHostedLink.tsx b/frontend/src/desktop/components/SetupWizard/SelfHostedLink.tsx
index 6a184cc584..151a62d497 100644
--- a/frontend/src/desktop/components/SetupWizard/SelfHostedLink.tsx
+++ b/frontend/src/desktop/components/SetupWizard/SelfHostedLink.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import '@app/routes/authShared/auth.css';
+import React from "react";
+import { useTranslation } from "react-i18next";
+import "@app/routes/authShared/auth.css";
 
 interface SelfHostedLinkProps {
   onClick: () => void;
@@ -11,14 +11,9 @@ export const SelfHostedLink: React.FC<SelfHostedLinkProps> = ({ onClick, disable
   const { t } = useTranslation();
 
   return (
-    <div className="navigation-link-container" style={{ marginTop: '1.5rem' }}>
-      <button
-        type="button"
-        onClick={onClick}
-        disabled={disabled}
-        className="navigation-link-button"
-      >
-        {t('setup.selfhosted.link', 'or connect to a self hosted account')}
+    <div className="navigation-link-container" style={{ marginTop: "1.5rem" }}>
+      <button type="button" onClick={onClick} disabled={disabled} className="navigation-link-button">
+        {t("setup.selfhosted.link", "or connect to a self hosted account")}
       </button>
     </div>
   );
diff --git a/frontend/src/desktop/components/SetupWizard/SelfHostedLoginScreen.tsx b/frontend/src/desktop/components/SetupWizard/SelfHostedLoginScreen.tsx
index 03e653a773..3b426e2430 100644
--- a/frontend/src/desktop/components/SetupWizard/SelfHostedLoginScreen.tsx
+++ b/frontend/src/desktop/components/SetupWizard/SelfHostedLoginScreen.tsx
@@ -1,14 +1,14 @@
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Text } from '@mantine/core';
-import LoginHeader from '@app/routes/login/LoginHeader';
-import ErrorMessage from '@app/routes/login/ErrorMessage';
-import EmailPasswordForm from '@app/routes/login/EmailPasswordForm';
-import DividerWithText from '@app/components/shared/DividerWithText';
-import { DesktopOAuthButtons } from '@app/components/SetupWizard/DesktopOAuthButtons';
-import { UserInfo } from '@app/services/authService';
-import { SSOProviderConfig } from '@app/services/connectionModeService';
-import '@app/routes/authShared/auth.css';
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Text } from "@mantine/core";
+import LoginHeader from "@app/routes/login/LoginHeader";
+import ErrorMessage from "@app/routes/login/ErrorMessage";
+import EmailPasswordForm from "@app/routes/login/EmailPasswordForm";
+import DividerWithText from "@app/components/shared/DividerWithText";
+import { DesktopOAuthButtons } from "@app/components/SetupWizard/DesktopOAuthButtons";
+import { UserInfo } from "@app/services/authService";
+import { SSOProviderConfig } from "@app/services/connectionModeService";
+import "@app/routes/authShared/auth.css";
 
 interface SelfHostedLoginScreenProps {
   serverUrl: string;
@@ -26,7 +26,7 @@ interface SelfHostedLoginScreenProps {
 export const SelfHostedLoginScreen: React.FC<SelfHostedLoginScreenProps> = ({
   serverUrl,
   enabledOAuthProviders,
-  loginMethod = 'all',
+  loginMethod = "all",
   onLogin,
   onOAuthSuccess,
   mfaCode,
@@ -36,35 +36,35 @@ export const SelfHostedLoginScreen: React.FC<SelfHostedLoginScreenProps> = ({
   error,
 }) => {
   const { t } = useTranslation();
-  const [username, setUsername] = useState('');
-  const [password, setPassword] = useState('');
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
   const [validationError, setValidationError] = useState<string | null>(null);
 
   // Check if username/password authentication is allowed
-  const isUserPassAllowed = loginMethod === 'all' || loginMethod === 'normal';
+  const isUserPassAllowed = loginMethod === "all" || loginMethod === "normal";
 
-  console.log('[SelfHostedLoginScreen] Props:', {
+  console.log("[SelfHostedLoginScreen] Props:", {
     serverUrl,
     enabledOAuthProviders,
     loginMethod,
     isUserPassAllowed,
-    shouldShowOAuth: !!(enabledOAuthProviders && enabledOAuthProviders.length > 0)
+    shouldShowOAuth: !!(enabledOAuthProviders && enabledOAuthProviders.length > 0),
   });
 
   const handleSubmit = async () => {
     // Validation
     if (!username.trim()) {
-      setValidationError(t('setup.login.error.emptyUsername', 'Please enter your username'));
+      setValidationError(t("setup.login.error.emptyUsername", "Please enter your username"));
       return;
     }
 
     if (!password) {
-      setValidationError(t('setup.login.error.emptyPassword', 'Please enter your password'));
+      setValidationError(t("setup.login.error.emptyPassword", "Please enter your password"));
       return;
     }
 
     if (requiresMfa && !mfaCode.trim()) {
-      setValidationError(t('login.mfaRequired', 'Two-factor code required'));
+      setValidationError(t("login.mfaRequired", "Two-factor code required"));
       return;
     }
 
@@ -81,14 +81,17 @@ export const SelfHostedLoginScreen: React.FC<SelfHostedLoginScreenProps> = ({
   return (
     <>
       <LoginHeader
-        title={t('setup.selfhosted.title', 'Sign in to Server')}
-        subtitle={isUserPassAllowed ? t('setup.selfhosted.subtitle', 'Enter your server credentials') : undefined}
+        title={t("setup.selfhosted.title", "Sign in to Server")}
+        subtitle={isUserPassAllowed ? t("setup.selfhosted.subtitle", "Enter your server credentials") : undefined}
       />
 
       <ErrorMessage error={displayError} />
 
       <Text size="sm" mb="md">
-        {t('setup.login.connectingTo', 'Connecting to:')} <Text span fw="500">{serverUrl}</Text>
+        {t("setup.login.connectingTo", "Connecting to:")}{" "}
+        <Text span fw="500">
+          {serverUrl}
+        </Text>
       </Text>
 
       {/* Show OAuth buttons if providers are available */}
@@ -106,7 +109,7 @@ export const SelfHostedLoginScreen: React.FC<SelfHostedLoginScreenProps> = ({
           {/* Only show divider if username/password auth is also allowed */}
           {isUserPassAllowed && (
             <DividerWithText
-              text={t('setup.login.orContinueWith', 'Or continue with email')}
+              text={t("setup.login.orContinueWith", "Or continue with email")}
               respondsToDarkMode={false}
               opacity={0.4}
             />
@@ -136,7 +139,7 @@ export const SelfHostedLoginScreen: React.FC<SelfHostedLoginScreenProps> = ({
           requiresMfa={requiresMfa}
           onSubmit={handleSubmit}
           isSubmitting={loading}
-          submitButtonText={t('setup.login.submit', 'Login')}
+          submitButtonText={t("setup.login.submit", "Login")}
         />
       )}
     </>
diff --git a/frontend/src/desktop/components/SetupWizard/ServerSelection.tsx b/frontend/src/desktop/components/SetupWizard/ServerSelection.tsx
index aa065a1284..a6872e289d 100644
--- a/frontend/src/desktop/components/SetupWizard/ServerSelection.tsx
+++ b/frontend/src/desktop/components/SetupWizard/ServerSelection.tsx
@@ -1,9 +1,9 @@
-import React, { useState } from 'react';
-import { Stack, Button, TextInput, Alert, Text } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { ServerConfig, SSOProviderConfig } from '@app/services/connectionModeService';
-import { connectionModeService } from '@app/services/connectionModeService';
-import LocalIcon from '@app/components/shared/LocalIcon';
+import React, { useState } from "react";
+import { Stack, Button, TextInput, Alert, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { ServerConfig, SSOProviderConfig } from "@app/services/connectionModeService";
+import { connectionModeService } from "@app/services/connectionModeService";
+import LocalIcon from "@app/components/shared/LocalIcon";
 
 interface ServerSelectionProps {
   onSelect: (config: ServerConfig) => void;
@@ -12,41 +12,43 @@ interface ServerSelectionProps {
 
 export const ServerSelection: React.FC<ServerSelectionProps> = ({ onSelect, loading }) => {
   const { t } = useTranslation();
-  const [customUrl, setCustomUrl] = useState('');
+  const [customUrl, setCustomUrl] = useState("");
   const [testing, setTesting] = useState(false);
   const [testError, setTestError] = useState<string | null>(null);
   const [securityDisabled, setSecurityDisabled] = useState(false);
-  const serverUrl = localStorage.getItem('server_url') || '';
+  const serverUrl = localStorage.getItem("server_url") || "";
 
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
 
     // Normalize and validate URL
-    let url = customUrl.trim().replace(/\/+$/, '') || serverUrl;
+    let url = customUrl.trim().replace(/\/+$/, "") || serverUrl;
 
     if (!url) {
-      setTestError(t('setup.server.error.emptyUrl', 'Please enter a server URL'));
+      setTestError(t("setup.server.error.emptyUrl", "Please enter a server URL"));
       return;
     }
 
     // Auto-add https:// if no protocol specified
-    if (!url.startsWith('http://') && !url.startsWith('https://')) {
-      console.log('[ServerSelection] No protocol specified, adding https://');
+    if (!url.startsWith("http://") && !url.startsWith("https://")) {
+      console.log("[ServerSelection] No protocol specified, adding https://");
       url = `https://${url}`;
       setCustomUrl(url); // Update the input field
     }
     // Validate URL format
     try {
       const urlObj = new URL(url);
-      console.log('[ServerSelection] Valid URL:', {
+      console.log("[ServerSelection] Valid URL:", {
         protocol: urlObj.protocol,
         hostname: urlObj.hostname,
         port: urlObj.port,
         pathname: urlObj.pathname,
       });
     } catch (err) {
-      console.error('[ServerSelection] Invalid URL format:', err);
-      setTestError(t('setup.server.error.invalidUrl', 'Invalid URL format. Please enter a valid URL like https://your-server.com'));
+      console.error("[ServerSelection] Invalid URL format:", err);
+      setTestError(
+        t("setup.server.error.invalidUrl", "Invalid URL format. Please enter a valid URL like https://your-server.com"),
+      );
       return;
     }
 
@@ -61,19 +63,19 @@ export const ServerSelection: React.FC<ServerSelectionProps> = ({ onSelect, load
       const testResult = await connectionModeService.testConnection(url);
 
       if (!testResult.success) {
-        console.error('[ServerSelection] Connection test failed:', testResult);
-        setTestError(testResult.error || t('setup.server.error.unreachable', 'Could not connect to server'));
+        console.error("[ServerSelection] Connection test failed:", testResult);
+        setTestError(testResult.error || t("setup.server.error.unreachable", "Could not connect to server"));
         setTesting(false);
         return;
       }
 
-      console.log('[ServerSelection] ✅ Connection test successful');
+      console.log("[ServerSelection] ✅ Connection test successful");
 
       // Fetch OAuth providers and check if login is enabled
       const enabledProviders: SSOProviderConfig[] = [];
-      let loginMethod = 'all'; // Default to 'all' (allows both SSO and username/password)
+      let loginMethod = "all"; // Default to 'all' (allows both SSO and username/password)
       try {
-        console.log('[ServerSelection] Fetching login configuration...');
+        console.log("[ServerSelection] Fetching login configuration...");
         const response = await fetch(`${url}/api/v1/proprietary/ui-data/login`);
 
         // Check if security is disabled (status 403, 401, or 404 - endpoint doesn't exist)
@@ -81,96 +83,92 @@ export const ServerSelection: React.FC<ServerSelectionProps> = ({ onSelect, load
           console.warn(`[ServerSelection] Login config request failed with status ${response.status}`);
 
           if (response.status === 403 || response.status === 401 || response.status === 404) {
-            console.log('[ServerSelection] Security/SSO not configured on this server (or endpoint does not exist)');
+            console.log("[ServerSelection] Security/SSO not configured on this server (or endpoint does not exist)");
             setSecurityDisabled(true);
             setTesting(false);
             return;
           }
           // Other error statuses - show generic error
           setTestError(
-            t('setup.server.error.configFetch', 'Failed to fetch server configuration (status {{status}})', {
-              status: response.status
-            })
+            t("setup.server.error.configFetch", "Failed to fetch server configuration (status {{status}})", {
+              status: response.status,
+            }),
           );
           setTesting(false);
           return;
         }
 
         const data = await response.json();
-        console.log('[ServerSelection] Login UI data:', data);
+        console.log("[ServerSelection] Login UI data:", data);
 
         // Check if the response indicates security is disabled
         if (data.enableLogin === false || data.securityEnabled === false) {
-          console.log('[ServerSelection] Security is explicitly disabled in config');
+          console.log("[ServerSelection] Security is explicitly disabled in config");
           setSecurityDisabled(true);
           setTesting(false);
           return;
         }
 
         // Extract loginMethod from response
-        loginMethod = data.loginMethod || 'all';
-        console.log('[ServerSelection] Login method:', loginMethod);
+        loginMethod = data.loginMethod || "all";
+        console.log("[ServerSelection] Login method:", loginMethod);
 
         // Extract provider IDs from authorization URLs
         // Example: "/oauth2/authorization/google" → "google"
         const providerEntries = Object.entries(data.providerList || {});
-        console.log('[ServerSelection] providerList from API:', data.providerList);
+        console.log("[ServerSelection] providerList from API:", data.providerList);
         providerEntries.forEach(([path, label]) => {
-          const id = path.split('/').pop();
-          console.log('[ServerSelection] Processing provider path:', path, '→ id:', id);
+          const id = path.split("/").pop();
+          console.log("[ServerSelection] Processing provider path:", path, "→ id:", id);
           if (!id) {
-            console.warn('[ServerSelection] Skipping provider with empty id:', path);
+            console.warn("[ServerSelection] Skipping provider with empty id:", path);
             return;
           }
 
           enabledProviders.push({
             id,
             path,
-            label: typeof label === 'string' ? label : undefined,
+            label: typeof label === "string" ? label : undefined,
           });
         });
 
-        console.log('[ServerSelection] ✅ Detected OAuth providers:', enabledProviders);
-        console.log('[ServerSelection] Login method:', loginMethod);
+        console.log("[ServerSelection] ✅ Detected OAuth providers:", enabledProviders);
+        console.log("[ServerSelection] Login method:", loginMethod);
       } catch (err) {
-        console.error('[ServerSelection] ❌ Failed to fetch login configuration:', err);
+        console.error("[ServerSelection] ❌ Failed to fetch login configuration:", err);
 
         // Check if it's a security disabled error
-        if (err instanceof Error && (err.message.includes('403') || err.message.includes('401'))) {
-          console.log('[ServerSelection] Security is disabled (error-based detection)');
+        if (err instanceof Error && (err.message.includes("403") || err.message.includes("401"))) {
+          console.log("[ServerSelection] Security is disabled (error-based detection)");
           setSecurityDisabled(true);
           setTesting(false);
           return;
         }
 
         // For any other error (network, CORS, invalid JSON, etc.), show error and don't proceed
-        const errorMessage = err instanceof Error ? err.message : 'Unknown error';
-        console.error('[ServerSelection] Configuration fetch error details:', errorMessage);
+        const errorMessage = err instanceof Error ? err.message : "Unknown error";
+        console.error("[ServerSelection] Configuration fetch error details:", errorMessage);
 
         setTestError(
-          t('setup.server.error.configFetchError', 'Failed to fetch server configuration: {{error}}', {
-            error: errorMessage
-          })
+          t("setup.server.error.configFetchError", "Failed to fetch server configuration: {{error}}", {
+            error: errorMessage,
+          }),
         );
         setTesting(false);
         return;
       }
 
       // Connection successful — persist URL so it pre-fills on next sign-in
-      localStorage.setItem('server_url', url);
-      console.log('[ServerSelection] ✅ Server selection complete, proceeding to login');
+      localStorage.setItem("server_url", url);
+      console.log("[ServerSelection] ✅ Server selection complete, proceeding to login");
       onSelect({
         url,
         enabledOAuthProviders: enabledProviders.length > 0 ? enabledProviders : undefined,
         loginMethod,
       });
     } catch (error) {
-      console.error('[ServerSelection] ❌ Unexpected error during connection test:', error);
-      setTestError(
-        error instanceof Error
-          ? error.message
-          : t('setup.server.error.testFailed', 'Connection test failed')
-      );
+      console.error("[ServerSelection] ❌ Unexpected error during connection test:", error);
+      setTestError(error instanceof Error ? error.message : t("setup.server.error.testFailed", "Connection test failed"));
     } finally {
       setTesting(false);
     }
@@ -180,7 +178,7 @@ export const ServerSelection: React.FC<ServerSelectionProps> = ({ onSelect, load
     <form onSubmit={handleSubmit}>
       <Stack gap="md">
         <TextInput
-          label={t('setup.server.url.label', 'Server URL')}
+          label={t("setup.server.url.label", "Server URL")}
           placeholder="https://your-server.com"
           value={customUrl}
           onChange={(e) => {
@@ -190,10 +188,7 @@ export const ServerSelection: React.FC<ServerSelectionProps> = ({ onSelect, load
           }}
           disabled={loading || testing}
           error={testError}
-          description={t(
-            'setup.server.url.description',
-            'Enter the full URL of your self-hosted Stirling PDF server'
-          )}
+          description={t("setup.server.url.description", "Enter the full URL of your self-hosted Stirling PDF server")}
         />
 
         {securityDisabled && (
@@ -201,17 +196,22 @@ export const ServerSelection: React.FC<ServerSelectionProps> = ({ onSelect, load
             variant="light"
             color="orange"
             icon={<LocalIcon icon="warning-rounded" width="1.25rem" height="1.25rem" />}
-            title={t('setup.server.error.securityDisabled.title', 'Login Not Enabled')}
+            title={t("setup.server.error.securityDisabled.title", "Login Not Enabled")}
           >
             <Stack gap="sm">
               <Text size="sm">
-                {t('setup.server.error.securityDisabled.body', 'This server does not have login enabled. To connect to this server, you must enable authentication:')}
+                {t(
+                  "setup.server.error.securityDisabled.body",
+                  "This server does not have login enabled. To connect to this server, you must enable authentication:",
+                )}
               </Text>
               <Text size="sm" component="div">
-                <ol style={{ margin: 0, paddingLeft: '1.5rem' }}>
-                  <li>{t('setup.server.error.securityDisabled.step1', 'Set DOCKER_ENABLE_SECURITY=true in your environment')}</li>
-                  <li>{t('setup.server.error.securityDisabled.step2', 'Or set security.enableLogin=true in settings.yml')}</li>
-                  <li>{t('setup.server.error.securityDisabled.step3', 'Restart the server')}</li>
+                <ol style={{ margin: 0, paddingLeft: "1.5rem" }}>
+                  <li>
+                    {t("setup.server.error.securityDisabled.step1", "Set DOCKER_ENABLE_SECURITY=true in your environment")}
+                  </li>
+                  <li>{t("setup.server.error.securityDisabled.step2", "Or set security.enableLogin=true in settings.yml")}</li>
+                  <li>{t("setup.server.error.securityDisabled.step3", "Restart the server")}</li>
                 </ol>
               </Text>
             </Stack>
@@ -228,26 +228,17 @@ export const ServerSelection: React.FC<ServerSelectionProps> = ({ onSelect, load
                 setCustomUrl(serverUrl);
                 // Auto-submit the form after setting the URL
                 setTimeout(() => {
-                  handleSubmit(new Event('submit') as any);
+                  handleSubmit(new Event("submit") as any);
                 }, 0);
               }}
             >
-              {t('setup.server.useLast', 'Last used server: {{serverUrl}}', { serverUrl: serverUrl })}
+              {t("setup.server.useLast", "Last used server: {{serverUrl}}", { serverUrl: serverUrl })}
             </button>
           </div>
         )}
 
-        <Button
-          type="submit"
-          loading={testing || loading}
-          disabled={loading}
-          mt="md"
-          fullWidth
-          color="#AF3434"
-        >
-          {testing
-            ? t('setup.server.testing', 'Testing connection...')
-            : t('common.continue', 'Continue')}
+        <Button type="submit" loading={testing || loading} disabled={loading} mt="md" fullWidth color="#AF3434">
+          {testing ? t("setup.server.testing", "Testing connection...") : t("common.continue", "Continue")}
         </Button>
       </Stack>
     </form>
diff --git a/frontend/src/desktop/components/SetupWizard/ServerSelectionScreen.tsx b/frontend/src/desktop/components/SetupWizard/ServerSelectionScreen.tsx
index 48ad5b810f..f772ca7d35 100644
--- a/frontend/src/desktop/components/SetupWizard/ServerSelectionScreen.tsx
+++ b/frontend/src/desktop/components/SetupWizard/ServerSelectionScreen.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import LoginHeader from '@app/routes/login/LoginHeader';
-import ErrorMessage from '@app/routes/login/ErrorMessage';
-import { ServerSelection } from '@app/components/SetupWizard/ServerSelection';
-import { ServerConfig } from '@app/services/connectionModeService';
-import '@app/routes/authShared/auth.css';
+import React from "react";
+import { useTranslation } from "react-i18next";
+import LoginHeader from "@app/routes/login/LoginHeader";
+import ErrorMessage from "@app/routes/login/ErrorMessage";
+import { ServerSelection } from "@app/components/SetupWizard/ServerSelection";
+import { ServerConfig } from "@app/services/connectionModeService";
+import "@app/routes/authShared/auth.css";
 
 interface ServerSelectionScreenProps {
   onSelect: (config: ServerConfig) => void;
@@ -12,18 +12,14 @@ interface ServerSelectionScreenProps {
   error: string | null;
 }
 
-export const ServerSelectionScreen: React.FC<ServerSelectionScreenProps> = ({
-  onSelect,
-  loading,
-  error,
-}) => {
+export const ServerSelectionScreen: React.FC<ServerSelectionScreenProps> = ({ onSelect, loading, error }) => {
   const { t } = useTranslation();
 
   return (
     <>
       <LoginHeader
-        title={t('setup.server.title', 'Connect to Server')}
-        subtitle={t('setup.server.subtitle', 'Enter your self-hosted server URL')}
+        title={t("setup.server.title", "Connect to Server")}
+        subtitle={t("setup.server.subtitle", "Enter your self-hosted server URL")}
       />
 
       <ErrorMessage error={error} />
diff --git a/frontend/src/desktop/components/SetupWizard/index.tsx b/frontend/src/desktop/components/SetupWizard/index.tsx
index 7e6b244c47..d9312b8c4a 100644
--- a/frontend/src/desktop/components/SetupWizard/index.tsx
+++ b/frontend/src/desktop/components/SetupWizard/index.tsx
@@ -1,18 +1,18 @@
-import React, { useCallback, useEffect, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Stack, Text, Button, Alert, Loader, Center } from '@mantine/core';
-import { DesktopAuthLayout } from '@app/components/SetupWizard/DesktopAuthLayout';
-import { SaaSLoginScreen } from '@app/components/SetupWizard/SaaSLoginScreen';
-import { SaaSSignupScreen } from '@app/components/SetupWizard/SaaSSignupScreen';
-import { ServerSelectionScreen } from '@app/components/SetupWizard/ServerSelectionScreen';
-import { SelfHostedLoginScreen } from '@app/components/SetupWizard/SelfHostedLoginScreen';
-import { ServerConfig, SSOProviderConfig, connectionModeService } from '@app/services/connectionModeService';
-import { AuthServiceError, authService, UserInfo } from '@app/services/authService';
-import { tauriBackendService } from '@app/services/tauriBackendService';
-import { STIRLING_SAAS_URL } from '@app/constants/connection';
-import { listen } from '@tauri-apps/api/event';
-import '@app/routes/authShared/auth.css';
-import { DisabledButtonWithTooltip } from '@app/components/shared/DisabledButtonWithTooltip';
+import React, { useCallback, useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Stack, Text, Button, Alert, Loader, Center } from "@mantine/core";
+import { DesktopAuthLayout } from "@app/components/SetupWizard/DesktopAuthLayout";
+import { SaaSLoginScreen } from "@app/components/SetupWizard/SaaSLoginScreen";
+import { SaaSSignupScreen } from "@app/components/SetupWizard/SaaSSignupScreen";
+import { ServerSelectionScreen } from "@app/components/SetupWizard/ServerSelectionScreen";
+import { SelfHostedLoginScreen } from "@app/components/SetupWizard/SelfHostedLoginScreen";
+import { ServerConfig, SSOProviderConfig, connectionModeService } from "@app/services/connectionModeService";
+import { AuthServiceError, authService, UserInfo } from "@app/services/authService";
+import { tauriBackendService } from "@app/services/tauriBackendService";
+import { STIRLING_SAAS_URL } from "@app/constants/connection";
+import { listen } from "@tauri-apps/api/event";
+import "@app/routes/authShared/auth.css";
+import { DisabledButtonWithTooltip } from "@app/components/shared/DisabledButtonWithTooltip";
 
 enum SetupStep {
   SaaSLogin,
@@ -29,14 +29,13 @@ interface SetupWizardProps {
   onClose?: () => void;
 }
 
-
 export const SetupWizard: React.FC<SetupWizardProps> = ({ onComplete, noLayout = false, onClose }) => {
   const { t } = useTranslation();
   const [activeStep, setActiveStep] = useState<SetupStep>(SetupStep.SaaSLogin);
   const [serverConfig, setServerConfig] = useState<ServerConfig | null>({ url: STIRLING_SAAS_URL });
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [selfHostedMfaCode, setSelfHostedMfaCode] = useState('');
+  const [selfHostedMfaCode, setSelfHostedMfaCode] = useState("");
   const [selfHostedMfaRequired, setSelfHostedMfaRequired] = useState(false);
   const [lockConnectionMode, setLockConnectionMode] = useState(false);
   const [lockedServerUnreachable, setLockedServerUnreachable] = useState(false);
@@ -44,7 +43,7 @@ export const SetupWizard: React.FC<SetupWizardProps> = ({ onComplete, noLayout =
 
   const handleSaaSLogin = async (username: string, password: string) => {
     if (!serverConfig) {
-      setError('No SaaS server configured');
+      setError("No SaaS server configured");
       return;
     }
 
@@ -63,15 +62,15 @@ export const SetupWizard: React.FC<SetupWizardProps> = ({ onComplete, noLayout =
       tauriBackendService.startBackend().catch(console.error);
       onComplete();
     } catch (err) {
-      console.error('SaaS login failed:', err);
-      setError(err instanceof Error ? err.message : 'SaaS login failed');
+      console.error("SaaS login failed:", err);
+      setError(err instanceof Error ? err.message : "SaaS login failed");
       setLoading(false);
     }
   };
 
   const handleSaaSLoginOAuth = async (_userInfo: UserInfo) => {
     if (!serverConfig) {
-      setError('No SaaS server configured');
+      setError("No SaaS server configured");
       return;
     }
 
@@ -84,8 +83,8 @@ export const SetupWizard: React.FC<SetupWizardProps> = ({ onComplete, noLayout =
       tauriBackendService.startBackend().catch(console.error);
       onComplete();
     } catch (err) {
-      console.error('SaaS OAuth login completion failed:', err);
-      setError(err instanceof Error ? err.message : 'Failed to complete SaaS login');
+      console.error("SaaS OAuth login completion failed:", err);
+      setError(err instanceof Error ? err.message : "Failed to complete SaaS login");
       setLoading(false);
     }
   };
@@ -96,13 +95,13 @@ export const SetupWizard: React.FC<SetupWizardProps> = ({ onComplete, noLayout =
       setError(null);
       // Save the server URL so it pre-fills on reconnect
       if (serverConfig?.url) {
-        localStorage.setItem('server_url', serverConfig.url);
+        localStorage.setItem("server_url", serverConfig.url);
       }
       await connectionModeService.switchToLocal();
       tauriBackendService.startBackend().catch(console.error);
       onComplete();
     } catch (err) {
-      console.error('Failed to continue in local mode:', err);
+      console.error("Failed to continue in local mode:", err);
       setError(err instanceof Error ? err.message : String(err));
       setLoading(false);
     }
@@ -127,24 +126,24 @@ export const SetupWizard: React.FC<SetupWizardProps> = ({ onComplete, noLayout =
   };
 
   const handleServerSelection = (config: ServerConfig) => {
-    console.log('[SetupWizard] Server selected:', config);
-    console.log('[SetupWizard] OAuth providers:', config.enabledOAuthProviders);
-    console.log('[SetupWizard] Login method:', config.loginMethod);
+    console.log("[SetupWizard] Server selected:", config);
+    console.log("[SetupWizard] OAuth providers:", config.enabledOAuthProviders);
+    console.log("[SetupWizard] Login method:", config.loginMethod);
     setServerConfig(config);
     setError(null);
-    setSelfHostedMfaCode('');
+    setSelfHostedMfaCode("");
     setSelfHostedMfaRequired(false);
     setActiveStep(SetupStep.SelfHostedLogin);
   };
 
   const handleSelfHostedLogin = async (username: string, password: string) => {
-    console.log('[SetupWizard] 🔐 Starting self-hosted login');
+    console.log("[SetupWizard] 🔐 Starting self-hosted login");
     console.log(`[SetupWizard] Server: ${serverConfig?.url}`);
     console.log(`[SetupWizard] Username: ${username}`);
 
     if (!serverConfig) {
-      console.error('[SetupWizard] ❌ No server configured');
-      setError('No server configured');
+      console.error("[SetupWizard] ❌ No server configured");
+      setError("No server configured");
       return;
     }
 
@@ -152,54 +151,54 @@ export const SetupWizard: React.FC<SetupWizardProps> = ({ onComplete, noLayout =
       setLoading(true);
       setError(null);
 
-      console.log('[SetupWizard] Step 1: Authenticating with server...');
+      console.log("[SetupWizard] Step 1: Authenticating with server...");
       const trimmedMfa = selfHostedMfaCode.trim();
       const mfaCode = trimmedMfa ? trimmedMfa : undefined;
       await authService.login(serverConfig.url, username, password, mfaCode);
-      console.log('[SetupWizard] ✅ Authentication successful');
+      console.log("[SetupWizard] ✅ Authentication successful");
 
       setSelfHostedMfaRequired(false);
-      setSelfHostedMfaCode('');
+      setSelfHostedMfaCode("");
 
-      console.log('[SetupWizard] Step 2: Switching to self-hosted mode...');
+      console.log("[SetupWizard] Step 2: Switching to self-hosted mode...");
       await connectionModeService.switchToSelfHosted(serverConfig);
-      console.log('[SetupWizard] ✅ Switched to self-hosted mode');
+      console.log("[SetupWizard] ✅ Switched to self-hosted mode");
 
-      console.log('[SetupWizard] Step 3: Initializing external backend...');
+      console.log("[SetupWizard] Step 3: Initializing external backend...");
       await tauriBackendService.initializeExternalBackend();
-      console.log('[SetupWizard] ✅ External backend initialized');
+      console.log("[SetupWizard] ✅ External backend initialized");
 
-      console.log('[SetupWizard] ✅ Setup complete, calling onComplete()');
+      console.log("[SetupWizard] ✅ Setup complete, calling onComplete()");
       onComplete();
     } catch (err) {
-      console.error('[SetupWizard] ❌ Self-hosted login failed:', err);
-      let errorMessage = 'Self-hosted login failed';
+      console.error("[SetupWizard] ❌ Self-hosted login failed:", err);
+      let errorMessage = "Self-hosted login failed";
       if (err instanceof AuthServiceError) {
-        if (err.code === 'mfa_required' || err.code === 'invalid_mfa_code') {
+        if (err.code === "mfa_required" || err.code === "invalid_mfa_code") {
           setSelfHostedMfaRequired(true);
         }
         errorMessage = err.message;
       } else if (err instanceof Error) {
         errorMessage = err.message;
-      } else if (typeof err === 'string') {
+      } else if (typeof err === "string") {
         errorMessage = err;
       }
-      if (errorMessage.toLowerCase().includes('mfa_required') || errorMessage.toLowerCase().includes('invalid_mfa_code')) {
+      if (errorMessage.toLowerCase().includes("mfa_required") || errorMessage.toLowerCase().includes("invalid_mfa_code")) {
         setSelfHostedMfaRequired(true);
       }
-      console.error('[SetupWizard] Error message:', errorMessage);
+      console.error("[SetupWizard] Error message:", errorMessage);
       setError(errorMessage);
       setLoading(false);
     }
   };
 
   const handleSelfHostedOAuthSuccess = async (_userInfo: UserInfo) => {
-    console.log('[SetupWizard] 🔐 OAuth login successful, completing setup');
+    console.log("[SetupWizard] 🔐 OAuth login successful, completing setup");
     console.log(`[SetupWizard] Server: ${serverConfig?.url}`);
 
     if (!serverConfig) {
-      console.error('[SetupWizard] ❌ No server configured');
-      setError('No server configured');
+      console.error("[SetupWizard] ❌ No server configured");
+      setError("No server configured");
       return;
     }
 
@@ -207,28 +206,28 @@ export const SetupWizard: React.FC<SetupWizardProps> = ({ onComplete, noLayout =
       setLoading(true);
       setError(null);
 
-      console.log('[SetupWizard] Step 1: OAuth already completed');
-      console.log('[SetupWizard] Step 2: Switching to self-hosted mode...');
+      console.log("[SetupWizard] Step 1: OAuth already completed");
+      console.log("[SetupWizard] Step 2: Switching to self-hosted mode...");
       await connectionModeService.switchToSelfHosted(serverConfig);
-      console.log('[SetupWizard] ✅ Switched to self-hosted mode');
+      console.log("[SetupWizard] ✅ Switched to self-hosted mode");
 
-      console.log('[SetupWizard] Step 3: Initializing external backend...');
+      console.log("[SetupWizard] Step 3: Initializing external backend...");
       await tauriBackendService.initializeExternalBackend();
-      console.log('[SetupWizard] ✅ External backend initialized');
+      console.log("[SetupWizard] ✅ External backend initialized");
 
-      console.log('[SetupWizard] ✅ Setup complete, calling onComplete()');
+      console.log("[SetupWizard] ✅ Setup complete, calling onComplete()");
       onComplete();
     } catch (err) {
-      console.error('[SetupWizard] ❌ Self-hosted OAuth login completion failed:', err);
-      const errorMessage = err instanceof Error ? err.message : 'Failed to complete login';
-      console.error('[SetupWizard] Error message:', errorMessage);
+      console.error("[SetupWizard] ❌ Self-hosted OAuth login completion failed:", err);
+      const errorMessage = err instanceof Error ? err.message : "Failed to complete login";
+      console.error("[SetupWizard] Error message:", errorMessage);
       setError(errorMessage);
       setLoading(false);
     }
   };
 
   useEffect(() => {
-    const unsubscribePromise = listen<string>('deep-link', async (event) => {
+    const unsubscribePromise = listen<string>("deep-link", async (event) => {
       const url = event.payload;
       if (!url) return;
 
@@ -236,24 +235,24 @@ export const SetupWizard: React.FC<SetupWizardProps> = ({ onComplete, noLayout =
         const parsed = new URL(url);
 
         // Supabase sends tokens in the URL hash
-        const hash = parsed.hash.replace(/^#/, '');
+        const hash = parsed.hash.replace(/^#/, "");
         const params = new URLSearchParams(hash);
-        const accessToken = params.get('access_token');
-        const type = params.get('type') || parsed.searchParams.get('type');
+        const accessToken = params.get("access_token");
+        const type = params.get("type") || parsed.searchParams.get("type");
         // Self-hosted SSO deep links are normally handled by authService.loginWithSelfHostedOAuth.
         // Fallback here only if no in-flight auth listener exists (e.g. renderer reload mid-flow).
-        if (type === 'sso' || type === 'sso-selfhosted') {
+        if (type === "sso" || type === "sso-selfhosted") {
           if (authService.isSelfHostedDeepLinkFlowActive()) {
             return;
           }
 
-          const accessTokenFromHash = params.get('access_token');
-          const accessTokenFromQuery = parsed.searchParams.get('access_token');
-          const serverFromQuery = parsed.searchParams.get('server');
+          const accessTokenFromHash = params.get("access_token");
+          const accessTokenFromQuery = parsed.searchParams.get("access_token");
+          const serverFromQuery = parsed.searchParams.get("server");
           const token = accessTokenFromHash || accessTokenFromQuery;
           const serverUrl = serverFromQuery || serverConfig?.url || STIRLING_SAAS_URL;
           if (!token || !serverUrl) {
-            console.error('[SetupWizard] Deep link missing token or server for SSO completion');
+            console.error("[SetupWizard] Deep link missing token or server for SSO completion");
             return;
           }
 
@@ -267,12 +266,12 @@ export const SetupWizard: React.FC<SetupWizardProps> = ({ onComplete, noLayout =
           return;
         }
 
-        if (!type || (type !== 'signup' && type !== 'recovery' && type !== 'magiclink')) {
+        if (!type || (type !== "signup" && type !== "recovery" && type !== "magiclink")) {
           return;
         }
 
         if (!accessToken) {
-          console.error('[SetupWizard] Deep link missing access_token');
+          console.error("[SetupWizard] Deep link missing access_token");
           return;
         }
 
@@ -284,8 +283,8 @@ export const SetupWizard: React.FC<SetupWizardProps> = ({ onComplete, noLayout =
         tauriBackendService.startBackend().catch(console.error);
         onComplete();
       } catch (err) {
-        console.error('[SetupWizard] Failed to handle deep link', err);
-        setError(err instanceof Error ? err.message : 'Failed to complete signup');
+        console.error("[SetupWizard] Failed to handle deep link", err);
+        setError(err instanceof Error ? err.message : "Failed to complete signup");
         setLoading(false);
       }
     });
@@ -301,7 +300,7 @@ export const SetupWizard: React.FC<SetupWizardProps> = ({ onComplete, noLayout =
     }
     setError(null);
     if (activeStep === SetupStep.SelfHostedLogin) {
-      setSelfHostedMfaCode('');
+      setSelfHostedMfaCode("");
       setSelfHostedMfaRequired(false);
       setActiveStep(SetupStep.ServerSelection);
     } else if (activeStep === SetupStep.ServerSelection) {
@@ -322,7 +321,7 @@ export const SetupWizard: React.FC<SetupWizardProps> = ({ onComplete, noLayout =
     setLockedServerUnreachable(false);
     setLockedServerChecking(true);
 
-    const savedUrl = serverUrl.replace(/\/+$/, '');
+    const savedUrl = serverUrl.replace(/\/+$/, "");
     let updatedConfig: ServerConfig = { ...(currentConfig.server_config ?? { url: savedUrl }) };
 
     try {
@@ -334,12 +333,12 @@ export const SetupWizard: React.FC<SetupWizardProps> = ({ onComplete, noLayout =
         const providerEntries = Object.entries(data.providerList || {});
 
         providerEntries.forEach(([path, label]) => {
-          const id = path.split('/').pop();
+          const id = path.split("/").pop();
           if (id) {
             enabledProviders.push({
               id,
               path,
-              label: typeof label === 'string' ? label : undefined,
+              label: typeof label === "string" ? label : undefined,
             });
           }
         });
@@ -347,7 +346,7 @@ export const SetupWizard: React.FC<SetupWizardProps> = ({ onComplete, noLayout =
         updatedConfig = {
           ...updatedConfig,
           enabledOAuthProviders: enabledProviders.length > 0 ? enabledProviders : undefined,
-          loginMethod: data.loginMethod || 'all',
+          loginMethod: data.loginMethod || "all",
         };
 
         setServerConfig(updatedConfig);
@@ -355,14 +354,14 @@ export const SetupWizard: React.FC<SetupWizardProps> = ({ onComplete, noLayout =
         setActiveStep(SetupStep.SelfHostedLogin);
       } else {
         // Server responded but with an error — still show login form
-        updatedConfig = { ...updatedConfig, loginMethod: 'all' };
+        updatedConfig = { ...updatedConfig, loginMethod: "all" };
         setServerConfig(updatedConfig);
         setLockedServerChecking(false);
         setActiveStep(SetupStep.SelfHostedLogin);
       }
     } catch (err) {
       // Network error — server is unreachable
-      console.error('[SetupWizard] Server unreachable:', err);
+      console.error("[SetupWizard] Server unreachable:", err);
       setServerConfig(updatedConfig);
       setLockedServerChecking(false);
       setLockedServerUnreachable(true);
@@ -392,20 +391,11 @@ export const SetupWizard: React.FC<SetupWizardProps> = ({ onComplete, noLayout =
       )}
 
       {!lockConnectionMode && activeStep === SetupStep.SaaSSignup && (
-        <SaaSSignupScreen
-          loading={loading}
-          error={error}
-          onLogin={handleSaaSLogin}
-          onSwitchToLogin={handleSwitchToLogin}
-        />
+        <SaaSSignupScreen loading={loading} error={error} onLogin={handleSaaSLogin} onSwitchToLogin={handleSwitchToLogin} />
       )}
 
       {!lockConnectionMode && activeStep === SetupStep.ServerSelection && (
-        <ServerSelectionScreen
-          onSelect={handleServerSelection}
-          loading={loading}
-          error={error}
-        />
+        <ServerSelectionScreen onSelect={handleServerSelection} loading={loading} error={error} />
       )}
 
       {lockConnectionMode && lockedServerChecking && (
@@ -415,28 +405,29 @@ export const SetupWizard: React.FC<SetupWizardProps> = ({ onComplete, noLayout =
       )}
 
       {activeStep === SetupStep.SelfHostedLogin && lockedServerUnreachable && !lockedServerChecking && (
-        <Stack gap="md" style={{ padding: '0.5rem 0' }}>
-          <Alert color="orange" title={t('setup.selfhosted.unreachable.title', 'Cannot connect to server')}>
+        <Stack gap="md" style={{ padding: "0.5rem 0" }}>
+          <Alert color="orange" title={t("setup.selfhosted.unreachable.title", "Cannot connect to server")}>
             <Text size="sm">
-              {t('setup.selfhosted.unreachable.message', 'Could not reach {{url}}. Check that the server is running and accessible.', {
-                url: serverConfig?.url,
-              })}
+              {t(
+                "setup.selfhosted.unreachable.message",
+                "Could not reach {{url}}. Check that the server is running and accessible.",
+                {
+                  url: serverConfig?.url,
+                },
+              )}
             </Text>
           </Alert>
-          <Button
-            variant="filled"
-            color="blue"
-            fullWidth
-            loading={loading}
-            onClick={() => void loadLockedConfig()}
-          >
-            {t('setup.selfhosted.unreachable.retry', 'Retry')}
+          <Button variant="filled" color="blue" fullWidth loading={loading} onClick={() => void loadLockedConfig()}>
+            {t("setup.selfhosted.unreachable.retry", "Retry")}
           </Button>
           {lockConnectionMode ? (
             <DisabledButtonWithTooltip
-              tooltip={t('setup.selfhosted.changeServerLocked', 'Your organisation has restricted this app to a specific server')}
+              tooltip={t(
+                "setup.selfhosted.changeServerLocked",
+                "Your organisation has restricted this app to a specific server",
+              )}
             >
-              {t('setup.selfhosted.unreachable.changeServer', 'Connect to a different server')}
+              {t("setup.selfhosted.unreachable.changeServer", "Connect to a different server")}
             </DisabledButtonWithTooltip>
           ) : (
             <Button
@@ -449,16 +440,11 @@ export const SetupWizard: React.FC<SetupWizardProps> = ({ onComplete, noLayout =
                 setActiveStep(SetupStep.ServerSelection);
               }}
             >
-              {t('setup.selfhosted.unreachable.changeServer', 'Connect to a different server')}
+              {t("setup.selfhosted.unreachable.changeServer", "Connect to a different server")}
             </Button>
           )}
-          <Button
-            variant="subtle"
-            color="white"
-            fullWidth
-            onClick={handleLocalMode}
-          >
-            {t('setup.selfhosted.unreachable.continueOffline', 'Use local tools instead')}
+          <Button variant="subtle" color="white" fullWidth onClick={handleLocalMode}>
+            {t("setup.selfhosted.unreachable.continueOffline", "Use local tools instead")}
           </Button>
         </Stack>
       )}
@@ -466,7 +452,7 @@ export const SetupWizard: React.FC<SetupWizardProps> = ({ onComplete, noLayout =
       {activeStep === SetupStep.SelfHostedLogin && !lockedServerUnreachable && !lockedServerChecking && (
         <>
           <SelfHostedLoginScreen
-            serverUrl={serverConfig?.url || ''}
+            serverUrl={serverConfig?.url || ""}
             enabledOAuthProviders={serverConfig?.enabledOAuthProviders}
             loginMethod={serverConfig?.loginMethod}
             onLogin={handleSelfHostedLogin}
@@ -477,14 +463,9 @@ export const SetupWizard: React.FC<SetupWizardProps> = ({ onComplete, noLayout =
             loading={loading}
             error={error}
           />
-          <div className="navigation-link-container" style={{ marginTop: '1.5rem' }}>
-            <button
-              type="button"
-              onClick={handleLocalMode}
-              className="navigation-link-button"
-              disabled={loading}
-            >
-              {t('setup.selfhosted.switchToLocal', 'Use local tools instead')}
+          <div className="navigation-link-container" style={{ marginTop: "1.5rem" }}>
+            <button type="button" onClick={handleLocalMode} className="navigation-link-button" disabled={loading}>
+              {t("setup.selfhosted.switchToLocal", "Use local tools instead")}
             </button>
           </div>
         </>
@@ -492,13 +473,9 @@ export const SetupWizard: React.FC<SetupWizardProps> = ({ onComplete, noLayout =
 
       {/* Back Button */}
       {!lockConnectionMode && activeStep > SetupStep.SaaSLogin && !loading && (
-        <div className="navigation-link-container" style={{ marginTop: '1.5rem' }}>
-          <button
-            type="button"
-            onClick={handleBack}
-            className="navigation-link-button"
-          >
-            {t('common.back', 'Back')}
+        <div className="navigation-link-container" style={{ marginTop: "1.5rem" }}>
+          <button type="button" onClick={handleBack} className="navigation-link-button">
+            {t("common.back", "Back")}
           </button>
         </div>
       )}
@@ -506,12 +483,8 @@ export const SetupWizard: React.FC<SetupWizardProps> = ({ onComplete, noLayout =
   );
 
   if (noLayout) {
-    return <div style={{ padding: '2rem' }}>{wizardContent}</div>;
+    return <div style={{ padding: "2rem" }}>{wizardContent}</div>;
   }
 
-  return (
-    <DesktopAuthLayout>
-      {wizardContent}
-    </DesktopAuthLayout>
-  );
+  return <DesktopAuthLayout>{wizardContent}</DesktopAuthLayout>;
 };
diff --git a/frontend/src/desktop/components/SignInModal.tsx b/frontend/src/desktop/components/SignInModal.tsx
index 1ab44b7ec0..fec53c213c 100644
--- a/frontend/src/desktop/components/SignInModal.tsx
+++ b/frontend/src/desktop/components/SignInModal.tsx
@@ -1,8 +1,8 @@
-import { useEffect, useState } from 'react';
-import { Modal } from '@mantine/core';
-import { SetupWizard } from '@app/components/SetupWizard';
-import { OPEN_SIGN_IN_EVENT } from '@app/constants/signInEvents';
-import { Z_INDEX_SIGN_IN_MODAL } from '@app/styles/zIndex';
+import { useEffect, useState } from "react";
+import { Modal } from "@mantine/core";
+import { SetupWizard } from "@app/components/SetupWizard";
+import { OPEN_SIGN_IN_EVENT } from "@app/constants/signInEvents";
+import { Z_INDEX_SIGN_IN_MODAL } from "@app/styles/zIndex";
 
 export function SignInModal() {
   const [opened, setOpened] = useState(false);
@@ -23,7 +23,9 @@ export function SignInModal() {
   return (
     <Modal
       opened={opened}
-      onClose={() => { if (!locked) setOpened(false); }}
+      onClose={() => {
+        if (!locked) setOpened(false);
+      }}
       size={520}
       centered
       withCloseButton={false}
diff --git a/frontend/src/desktop/components/fileEditor/FileEditorFileName.tsx b/frontend/src/desktop/components/fileEditor/FileEditorFileName.tsx
index 1fe75e085f..c173a4dc2f 100644
--- a/frontend/src/desktop/components/fileEditor/FileEditorFileName.tsx
+++ b/frontend/src/desktop/components/fileEditor/FileEditorFileName.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import { Tooltip } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { StirlingFileStub } from '@app/types/fileContext';
-import { PrivateContent } from '@app/components/shared/PrivateContent';
+import React from "react";
+import { Tooltip } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { StirlingFileStub } from "@app/types/fileContext";
+import { PrivateContent } from "@app/components/shared/PrivateContent";
 
 interface FileEditorFileNameProps {
   file: StirlingFileStub;
@@ -15,47 +15,47 @@ const FileEditorFileName = ({ file }: FileEditorFileNameProps) => {
     <>
       <PrivateContent>{file.name}</PrivateContent>
       {!file.localFilePath && (
-        <Tooltip label={t('fileNotSavedToDisk', 'Not saved to disk')}>
+        <Tooltip label={t("fileNotSavedToDisk", "Not saved to disk")}>
           <span
             style={{
-              display: 'inline-block',
-              width: '6px',
-              height: '6px',
-              borderRadius: '50%',
-              backgroundColor: 'var(--mantine-color-red-6)',
-              flexShrink: 0
+              display: "inline-block",
+              width: "6px",
+              height: "6px",
+              borderRadius: "50%",
+              backgroundColor: "var(--mantine-color-red-6)",
+              flexShrink: 0,
             }}
-            aria-label={t('fileNotSavedToDisk', 'Not saved to disk')}
+            aria-label={t("fileNotSavedToDisk", "Not saved to disk")}
           />
         </Tooltip>
       )}
       {file.localFilePath && file.isDirty && (
-        <Tooltip label={t('unsavedChanges', 'Unsaved changes')}>
+        <Tooltip label={t("unsavedChanges", "Unsaved changes")}>
           <span
             style={{
-              display: 'inline-block',
-              width: '6px',
-              height: '6px',
-              borderRadius: '50%',
-              backgroundColor: 'var(--mantine-color-yellow-6)',
-              flexShrink: 0
+              display: "inline-block",
+              width: "6px",
+              height: "6px",
+              borderRadius: "50%",
+              backgroundColor: "var(--mantine-color-yellow-6)",
+              flexShrink: 0,
             }}
-            aria-label={t('unsavedChanges', 'Unsaved changes')}
+            aria-label={t("unsavedChanges", "Unsaved changes")}
           />
         </Tooltip>
       )}
       {file.localFilePath && !file.isDirty && (
-        <Tooltip label={t('fileSavedToDisk', 'File saved to disk')}>
+        <Tooltip label={t("fileSavedToDisk", "File saved to disk")}>
           <span
             style={{
-              display: 'inline-block',
-              width: '6px',
-              height: '6px',
-              borderRadius: '50%',
-              backgroundColor: 'var(--mantine-color-green-6)',
-              flexShrink: 0
+              display: "inline-block",
+              width: "6px",
+              height: "6px",
+              borderRadius: "50%",
+              backgroundColor: "var(--mantine-color-green-6)",
+              flexShrink: 0,
             }}
-            aria-label={t('fileSavedToDisk', 'File saved to disk')}
+            aria-label={t("fileSavedToDisk", "File saved to disk")}
           />
         </Tooltip>
       )}
diff --git a/frontend/src/desktop/components/onboarding/orchestrator/onboardingConfig.ts b/frontend/src/desktop/components/onboarding/orchestrator/onboardingConfig.ts
index 87451ca5e7..35def1ee2a 100644
--- a/frontend/src/desktop/components/onboarding/orchestrator/onboardingConfig.ts
+++ b/frontend/src/desktop/components/onboarding/orchestrator/onboardingConfig.ts
@@ -1,19 +1,15 @@
 /**
  * Desktop Override: Onboarding Configuration
- * 
+ *
  * This version modifies the onboarding config for the desktop app:
  * - Sets isDesktopApp to true in the default runtime state
  * - This causes desktop-install step to be skipped
- * 
+ *
  * All other step definitions and logic remain the same.
  */
 
 // Re-export everything from core
-export {
-  ONBOARDING_STEPS,
-  getStepById,
-  getStepIndex,
-} from '@core/components/onboarding/orchestrator/onboardingConfig';
+export { ONBOARDING_STEPS, getStepById, getStepIndex } from "@core/components/onboarding/orchestrator/onboardingConfig";
 
 export type {
   OnboardingStepId,
@@ -21,11 +17,11 @@ export type {
   OnboardingStep,
   OnboardingRuntimeState,
   OnboardingConditionContext,
-} from '@core/components/onboarding/orchestrator/onboardingConfig';
+} from "@core/components/onboarding/orchestrator/onboardingConfig";
 
 // Import and override the default runtime state
-import { DEFAULT_RUNTIME_STATE as CORE_DEFAULT_RUNTIME_STATE } from '@core/components/onboarding/orchestrator/onboardingConfig';
-import type { OnboardingRuntimeState } from '@core/components/onboarding/orchestrator/onboardingConfig';
+import { DEFAULT_RUNTIME_STATE as CORE_DEFAULT_RUNTIME_STATE } from "@core/components/onboarding/orchestrator/onboardingConfig";
+import type { OnboardingRuntimeState } from "@core/components/onboarding/orchestrator/onboardingConfig";
 
 /**
  * Desktop default runtime state
@@ -35,4 +31,3 @@ export const DEFAULT_RUNTIME_STATE: OnboardingRuntimeState = {
   ...CORE_DEFAULT_RUNTIME_STATE,
   isDesktopApp: true,
 };
-
diff --git a/frontend/src/desktop/components/onboarding/orchestrator/useOnboardingOrchestrator.ts b/frontend/src/desktop/components/onboarding/orchestrator/useOnboardingOrchestrator.ts
index fed28ed9df..b055631f89 100644
--- a/frontend/src/desktop/components/onboarding/orchestrator/useOnboardingOrchestrator.ts
+++ b/frontend/src/desktop/components/onboarding/orchestrator/useOnboardingOrchestrator.ts
@@ -8,14 +8,14 @@
 import {
   useOnboardingOrchestrator as useCoreOnboardingOrchestrator,
   type UseOnboardingOrchestratorResult,
-} from '@core/components/onboarding/orchestrator/useOnboardingOrchestrator';
-import { DEFAULT_RUNTIME_STATE } from '@app/components/onboarding/orchestrator/onboardingConfig';
+} from "@core/components/onboarding/orchestrator/useOnboardingOrchestrator";
+import { DEFAULT_RUNTIME_STATE } from "@app/components/onboarding/orchestrator/onboardingConfig";
 
 export type {
   OnboardingOrchestratorState,
   OnboardingOrchestratorActions,
   UseOnboardingOrchestratorResult,
-} from '@core/components/onboarding/orchestrator/useOnboardingOrchestrator';
+} from "@core/components/onboarding/orchestrator/useOnboardingOrchestrator";
 
 export function useOnboardingOrchestrator(): UseOnboardingOrchestratorResult {
   return useCoreOnboardingOrchestrator({ defaultRuntimeState: DEFAULT_RUNTIME_STATE });
diff --git a/frontend/src/desktop/components/quickAccessBar/QuickAccessBarFooterExtensions.tsx b/frontend/src/desktop/components/quickAccessBar/QuickAccessBarFooterExtensions.tsx
index f0f776751b..e4fec084ba 100644
--- a/frontend/src/desktop/components/quickAccessBar/QuickAccessBarFooterExtensions.tsx
+++ b/frontend/src/desktop/components/quickAccessBar/QuickAccessBarFooterExtensions.tsx
@@ -1,10 +1,10 @@
-import { useEffect, useState } from 'react';
-import { Box, Text, Stack } from '@mantine/core';
-import { useSaaSBilling } from '@app/contexts/SaasBillingContext';
-import { BILLING_CONFIG } from '@app/config/billing';
-import { connectionModeService } from '@app/services/connectionModeService';
-import { authService } from '@app/services/authService';
-import { CREDIT_EVENTS } from '@app/constants/creditEvents';
+import { useEffect, useState } from "react";
+import { Box, Text, Stack } from "@mantine/core";
+import { useSaaSBilling } from "@app/contexts/SaasBillingContext";
+import { BILLING_CONFIG } from "@app/config/billing";
+import { connectionModeService } from "@app/services/connectionModeService";
+import { authService } from "@app/services/authService";
+import { CREDIT_EVENTS } from "@app/constants/creditEvents";
 
 /**
  * Desktop credit counter displayed in QuickAccessBar footer
@@ -25,7 +25,7 @@ export function QuickAccessBarFooterExtensions({ className }: QuickAccessBarFoot
     const checkMode = async () => {
       const mode = await connectionModeService.getCurrentMode();
       const auth = await authService.isAuthenticated();
-      setIsSaasMode(mode === 'saas');
+      setIsSaasMode(mode === "saas");
       setIsAuthenticated(auth);
     };
 
@@ -39,7 +39,7 @@ export function QuickAccessBarFooterExtensions({ className }: QuickAccessBarFoot
   // Subscribe to auth changes
   useEffect(() => {
     const unsubscribe = authService.subscribeToAuth((status) => {
-      setIsAuthenticated(status === 'authenticated');
+      setIsAuthenticated(status === "authenticated");
     });
     return unsubscribe;
   }, []);
@@ -50,24 +50,32 @@ export function QuickAccessBarFooterExtensions({ className }: QuickAccessBarFoot
   // - Still loading billing data
   // - User is a managed team member (unlimited credits)
   // - Credits >= 20 (only show when low)
-  if (!isSaasMode || !isAuthenticated || loading || isManagedTeamMember || creditBalance >= BILLING_CONFIG.PLAN_PRICING_PRELOAD_THRESHOLD) {
+  if (
+    !isSaasMode ||
+    !isAuthenticated ||
+    loading ||
+    isManagedTeamMember ||
+    creditBalance >= BILLING_CONFIG.PLAN_PRICING_PRELOAD_THRESHOLD
+  ) {
     return null;
   }
 
   const handleClick = () => {
     // Dispatch low credits event to open upgrade modal
-    window.dispatchEvent(new CustomEvent(CREDIT_EVENTS.EXHAUSTED, {
-      detail: { source: 'quickAccessBar' }
-    }));
+    window.dispatchEvent(
+      new CustomEvent(CREDIT_EVENTS.EXHAUSTED, {
+        detail: { source: "quickAccessBar" },
+      }),
+    );
   };
 
   return (
-    <Box className={className} style={{ padding: '0.5rem', cursor: 'pointer' }} onClick={handleClick}>
+    <Box className={className} style={{ padding: "0.5rem", cursor: "pointer" }} onClick={handleClick}>
       <Stack gap={2} align="center">
         <Text size="xs" c="dimmed" fw={500}>
-          {creditBalance} {creditBalance === 1 ? 'credit' : 'credits'}
+          {creditBalance} {creditBalance === 1 ? "credit" : "credits"}
         </Text>
-        <Text size="xs" c="dimmed" style={{ textDecoration: 'underline' }}>
+        <Text size="xs" c="dimmed" style={{ textDecoration: "underline" }}>
           Upgrade
         </Text>
       </Stack>
diff --git a/frontend/src/desktop/components/rightRail/RightRailFooterExtensions.tsx b/frontend/src/desktop/components/rightRail/RightRailFooterExtensions.tsx
index 070debc0ee..1b25ba2403 100644
--- a/frontend/src/desktop/components/rightRail/RightRailFooterExtensions.tsx
+++ b/frontend/src/desktop/components/rightRail/RightRailFooterExtensions.tsx
@@ -1,10 +1,10 @@
-import { useState, useEffect, useMemo } from 'react';
-import { Box, Tooltip, rem, useComputedColorScheme } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { connectionModeService, type ConnectionMode } from '@app/services/connectionModeService';
-import { selfHostedServerMonitor, type SelfHostedServerState } from '@app/services/selfHostedServerMonitor';
-import { useBackendHealth } from '@app/hooks/useBackendHealth';
-import { OPEN_SIGN_IN_EVENT } from '@app/constants/signInEvents';
+import { useState, useEffect, useMemo } from "react";
+import { Box, Tooltip, rem, useComputedColorScheme } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { connectionModeService, type ConnectionMode } from "@app/services/connectionModeService";
+import { selfHostedServerMonitor, type SelfHostedServerState } from "@app/services/selfHostedServerMonitor";
+import { useBackendHealth } from "@app/hooks/useBackendHealth";
+import { OPEN_SIGN_IN_EVENT } from "@app/constants/signInEvents";
 
 interface RightRailFooterExtensionsProps {
   className?: string;
@@ -12,11 +12,9 @@ interface RightRailFooterExtensionsProps {
 
 function ConnectionStatusDot() {
   const { t } = useTranslation();
-  const colorScheme = useComputedColorScheme('light');
+  const colorScheme = useComputedColorScheme("light");
   const [connectionMode, setConnectionMode] = useState<ConnectionMode | null>(null);
-  const [selfHostedState, setSelfHostedState] = useState<SelfHostedServerState>(
-    () => selfHostedServerMonitor.getSnapshot()
-  );
+  const [selfHostedState, setSelfHostedState] = useState<SelfHostedServerState>(() => selfHostedServerMonitor.getSnapshot());
   const { isOnline, checkHealth } = useBackendHealth();
 
   useEffect(() => {
@@ -32,31 +30,31 @@ function ConnectionStatusDot() {
   }, []);
 
   const { label, color } = useMemo(() => {
-    if (connectionMode === 'saas') {
+    if (connectionMode === "saas") {
       return {
-        label: t('connectionMode.status.saas', 'Connected to Stirling Cloud'),
-        color: '#3b82f6',
+        label: t("connectionMode.status.saas", "Connected to Stirling Cloud"),
+        color: "#3b82f6",
       };
     }
-    if (connectionMode === 'selfhosted') {
+    if (connectionMode === "selfhosted") {
       const serverOnline = selfHostedState.isOnline;
-      const serverChecking = selfHostedState.status === 'checking';
+      const serverChecking = selfHostedState.status === "checking";
       const backendLabel = serverChecking
-        ? t('connectionMode.status.selfhostedChecking', 'Connected to self-hosted server (checking...)')
+        ? t("connectionMode.status.selfhostedChecking", "Connected to self-hosted server (checking...)")
         : serverOnline
-          ? t('connectionMode.status.selfhostedOnline', 'Connected to self-hosted server')
-          : t('connectionMode.status.selfhostedOffline', 'Self-hosted server unreachable');
+          ? t("connectionMode.status.selfhostedOnline", "Connected to self-hosted server")
+          : t("connectionMode.status.selfhostedOffline", "Self-hosted server unreachable");
       return {
         label: backendLabel,
-        color: serverChecking ? '#fcc419' : serverOnline ? '#37b24d' : '#e03131',
+        color: serverChecking ? "#fcc419" : serverOnline ? "#37b24d" : "#e03131",
       };
     }
     // local
     return {
       label: isOnline
-        ? t('connectionMode.status.localOnline', 'Offline mode running')
-        : t('connectionMode.status.localOffline', 'Offline mode running'),
-      color: '#868e96',
+        ? t("connectionMode.status.localOnline", "Offline mode running")
+        : t("connectionMode.status.localOffline", "Offline mode running"),
+      color: "#868e96",
     };
   }, [connectionMode, selfHostedState, isOnline, t]);
 
@@ -67,7 +65,7 @@ function ConnectionStatusDot() {
       offset={12}
       withArrow
       withinPortal
-      color={colorScheme === 'dark' ? undefined : 'dark'}
+      color={colorScheme === "dark" ? undefined : "dark"}
     >
       <Box
         component="span"
@@ -75,7 +73,7 @@ function ConnectionStatusDot() {
         aria-label={label}
         tabIndex={0}
         onClick={() => {
-          if (connectionMode === 'local') {
+          if (connectionMode === "local") {
             window.dispatchEvent(new CustomEvent(OPEN_SIGN_IN_EVENT));
           } else {
             void checkHealth();
@@ -84,14 +82,12 @@ function ConnectionStatusDot() {
         style={{
           width: rem(10),
           height: rem(10),
-          borderRadius: '50%',
+          borderRadius: "50%",
           backgroundColor: color,
-          boxShadow: colorScheme === 'dark'
-            ? '0 0 0 2px rgba(255, 255, 255, 0.15)'
-            : '0 0 0 2px rgba(0, 0, 0, 0.07)',
-          display: 'inline-block',
-          cursor: 'pointer',
-          outline: 'none',
+          boxShadow: colorScheme === "dark" ? "0 0 0 2px rgba(255, 255, 255, 0.15)" : "0 0 0 2px rgba(0, 0, 0, 0.07)",
+          display: "inline-block",
+          cursor: "pointer",
+          outline: "none",
         }}
       />
     </Tooltip>
@@ -103,10 +99,10 @@ export function RightRailFooterExtensions({ className }: RightRailFooterExtensio
     <Box
       className={className}
       style={{
-        width: '100%',
-        display: 'flex',
-        justifyContent: 'center',
-        alignItems: 'center',
+        width: "100%",
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
         paddingBottom: rem(12),
       }}
     >
diff --git a/frontend/src/desktop/components/shared/CloudBadge.tsx b/frontend/src/desktop/components/shared/CloudBadge.tsx
index ebd7e06bf5..0a6ac39514 100644
--- a/frontend/src/desktop/components/shared/CloudBadge.tsx
+++ b/frontend/src/desktop/components/shared/CloudBadge.tsx
@@ -1,6 +1,6 @@
-import { Badge, Tooltip } from '@mantine/core';
-import CloudOutlinedIcon from '@mui/icons-material/CloudOutlined';
-import { useTranslation } from 'react-i18next';
+import { Badge, Tooltip } from "@mantine/core";
+import CloudOutlinedIcon from "@mui/icons-material/CloudOutlined";
+import { useTranslation } from "react-i18next";
 
 interface CloudBadgeProps {
   className?: string;
@@ -15,19 +15,14 @@ export function CloudBadge({ className }: CloudBadgeProps) {
   const { t } = useTranslation();
 
   return (
-    <Tooltip
-      label={t('cloudBadge.tooltip', 'This operation will use your cloud credits')}
-      position="top"
-      withArrow
-    >
+    <Tooltip label={t("cloudBadge.tooltip", "This operation will use your cloud credits")} position="top" withArrow>
       <Badge
         className={className}
         leftSection={<CloudOutlinedIcon sx={{ fontSize: 12 }} />}
         variant="light"
         color="blue"
         size="xs"
-      >
-      </Badge>
+      ></Badge>
     </Tooltip>
   );
 }
diff --git a/frontend/src/desktop/components/shared/DefaultAppBanner.tsx b/frontend/src/desktop/components/shared/DefaultAppBanner.tsx
index 2ea007a4e8..f7b2c3cb34 100644
--- a/frontend/src/desktop/components/shared/DefaultAppBanner.tsx
+++ b/frontend/src/desktop/components/shared/DefaultAppBanner.tsx
@@ -1,7 +1,7 @@
-import React, { useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import { InfoBanner } from '@app/components/shared/InfoBanner';
-import { useDefaultApp } from '@app/hooks/useDefaultApp';
+import React, { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { InfoBanner } from "@app/components/shared/InfoBanner";
+import { useDefaultApp } from "@app/hooks/useDefaultApp";
 
 export const DefaultAppBanner: React.FC = () => {
   const { t } = useTranslation();
@@ -15,8 +15,8 @@ export const DefaultAppBanner: React.FC = () => {
   return (
     <InfoBanner
       icon="picture-as-pdf-rounded"
-      message={t('defaultApp.prompt.message', 'Make Stirling PDF your default application for opening PDF files.')}
-      buttonText={t('defaultApp.setDefault', 'Set Default')}
+      message={t("defaultApp.prompt.message", "Make Stirling PDF your default application for opening PDF files.")}
+      buttonText={t("defaultApp.setDefault", "Set Default")}
       buttonIcon="check-circle-rounded"
       onButtonClick={handleSetDefault}
       onDismiss={handleDismissPrompt}
diff --git a/frontend/src/desktop/components/shared/DisabledButtonWithTooltip.tsx b/frontend/src/desktop/components/shared/DisabledButtonWithTooltip.tsx
index 2262c9d079..906829e8f8 100644
--- a/frontend/src/desktop/components/shared/DisabledButtonWithTooltip.tsx
+++ b/frontend/src/desktop/components/shared/DisabledButtonWithTooltip.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import '@app/components/shared/DisabledButtonWithTooltip.css';
+import React from "react";
+import "@app/components/shared/DisabledButtonWithTooltip.css";
 
 interface DisabledButtonWithTooltipProps {
   /** Tooltip text shown on hover */
@@ -17,12 +17,8 @@ interface DisabledButtonWithTooltipProps {
 export function DisabledButtonWithTooltip({ tooltip, children, className, style }: DisabledButtonWithTooltipProps) {
   const [hovered, setHovered] = React.useState(false);
   return (
-    <div
-      className="relative w-full"
-      onMouseEnter={() => setHovered(true)}
-      onMouseLeave={() => setHovered(false)}
-    >
-      <div className={`locked-button${className ? ` ${className}` : ''}`} style={style}>
+    <div className="relative w-full" onMouseEnter={() => setHovered(true)} onMouseLeave={() => setHovered(false)}>
+      <div className={`locked-button${className ? ` ${className}` : ""}`} style={style}>
         {children}
       </div>
       {hovered && (
diff --git a/frontend/src/desktop/components/shared/SelfHostedOfflineBanner.tsx b/frontend/src/desktop/components/shared/SelfHostedOfflineBanner.tsx
index a622c7feda..cfcd2a14e9 100644
--- a/frontend/src/desktop/components/shared/SelfHostedOfflineBanner.tsx
+++ b/frontend/src/desktop/components/shared/SelfHostedOfflineBanner.tsx
@@ -1,35 +1,33 @@
-import { useState, useEffect, useMemo } from 'react';
-import { Paper, Group, Text, ActionIcon, UnstyledButton, Popover, List, ScrollArea } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
-import { useConversionCloudStatus } from '@app/hooks/useConversionCloudStatus';
-import { selfHostedServerMonitor, type SelfHostedServerState } from '@app/services/selfHostedServerMonitor';
-import { connectionModeService, type ConnectionMode } from '@app/services/connectionModeService';
-import { tauriBackendService } from '@app/services/tauriBackendService';
-import { endpointAvailabilityService } from '@app/services/endpointAvailabilityService';
-import { EXTENSION_TO_ENDPOINT, ENDPOINT_I18N } from '@app/constants/convertConstants';
-import { ENDPOINTS as SPLIT_ENDPOINTS } from '@app/constants/splitConstants';
-import type { ToolId } from '@app/types/toolId';
+import { useState, useEffect, useMemo } from "react";
+import { Paper, Group, Text, ActionIcon, UnstyledButton, Popover, List, ScrollArea } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
+import { useConversionCloudStatus } from "@app/hooks/useConversionCloudStatus";
+import { selfHostedServerMonitor, type SelfHostedServerState } from "@app/services/selfHostedServerMonitor";
+import { connectionModeService, type ConnectionMode } from "@app/services/connectionModeService";
+import { tauriBackendService } from "@app/services/tauriBackendService";
+import { endpointAvailabilityService } from "@app/services/endpointAvailabilityService";
+import { EXTENSION_TO_ENDPOINT, ENDPOINT_I18N } from "@app/constants/convertConstants";
+import { ENDPOINTS as SPLIT_ENDPOINTS } from "@app/constants/splitConstants";
+import type { ToolId } from "@app/types/toolId";
 
-const BANNER_BG = 'var(--mantine-color-gray-1)';
-const BANNER_BORDER = 'var(--mantine-color-gray-3)';
-const BANNER_TEXT = 'var(--mantine-color-gray-7)';
-const BANNER_ICON = 'var(--mantine-color-gray-5)';
-const BANNER_LINK = 'var(--mantine-color-gray-6)';
+const BANNER_BG = "var(--mantine-color-gray-1)";
+const BANNER_BORDER = "var(--mantine-color-gray-3)";
+const BANNER_TEXT = "var(--mantine-color-gray-7)";
+const BANNER_ICON = "var(--mantine-color-gray-5)";
+const BANNER_LINK = "var(--mantine-color-gray-6)";
 
 /** Maps split endpoint → [i18n key, English fallback] for the method name */
 const SPLIT_ENDPOINT_I18N: Record<string, [string, string]> = {
-  'split-pages':              ['split.methods.byPages.name',       'Pages'],
-  'split-pdf-by-sections':    ['split.methods.bySections.name',    'Sections'],
-  'split-by-size-or-count':   ['split.methods.bySize.name',        'File Size'],
-  'split-pdf-by-chapters':    ['split.methods.byChapters.name',    'Chapters'],
-  'auto-split-pdf':           ['split.methods.byPageDivider.name', 'Page Divider'],
-  'split-for-poster-print':   ['split.methods.byPoster.name',      'Printable Chunks'],
+  "split-pages": ["split.methods.byPages.name", "Pages"],
+  "split-pdf-by-sections": ["split.methods.bySections.name", "Sections"],
+  "split-by-size-or-count": ["split.methods.bySize.name", "File Size"],
+  "split-pdf-by-chapters": ["split.methods.byChapters.name", "Chapters"],
+  "auto-split-pdf": ["split.methods.byPageDivider.name", "Page Divider"],
+  "split-for-poster-print": ["split.methods.byPoster.name", "Printable Chunks"],
 };
 
-
-
 /**
  * Desktop-only banner shown when the user is in self-hosted mode and the
  * configured Stirling-PDF server is unreachable.
@@ -42,24 +40,20 @@ const SPLIT_ENDPOINT_I18N: Record<string, [string, string]> = {
 export function SelfHostedOfflineBanner() {
   const { t } = useTranslation();
   const [connectionMode, setConnectionMode] = useState<ConnectionMode | null>(null);
-  const [serverState, setServerState] = useState<SelfHostedServerState>(
-    () => selfHostedServerMonitor.getSnapshot()
-  );
+  const [serverState, setServerState] = useState<SelfHostedServerState>(() => selfHostedServerMonitor.getSnapshot());
   const [dismissed, setDismissed] = useState(false);
   const [expanded, setExpanded] = useState(false);
-  const [localBackendReady, setLocalBackendReady] = useState(
-    () => !!tauriBackendService.getBackendUrl()
-  );
+  const [localBackendReady, setLocalBackendReady] = useState(() => !!tauriBackendService.getBackendUrl());
 
   // Load connection mode and keep it live via subscription
   useEffect(() => {
     void connectionModeService.getCurrentMode().then(setConnectionMode);
-    return connectionModeService.subscribeToModeChanges(config => setConnectionMode(config.mode));
+    return connectionModeService.subscribeToModeChanges((config) => setConnectionMode(config.mode));
   }, []);
 
   // Subscribe to self-hosted server status changes
   useEffect(() => {
-    const unsub = selfHostedServerMonitor.subscribe(state => {
+    const unsub = selfHostedServerMonitor.subscribe((state) => {
       setServerState(state);
       // Auto-collapse tool list when server comes back online
       if (state.isOnline) setExpanded(false);
@@ -83,7 +77,7 @@ export function SelfHostedOfflineBanner() {
 
   const [splitAvailability, setSplitAvailability] = useState<Record<string, boolean>>({});
   useEffect(() => {
-    if (serverState.status !== 'offline') {
+    if (serverState.status !== "offline") {
       setSplitAvailability({});
       return;
     }
@@ -94,11 +88,11 @@ export function SelfHostedOfflineBanner() {
     }
     const uniqueEndpoints = [...new Set(Object.values(SPLIT_ENDPOINTS))] as string[];
     void Promise.all(
-      uniqueEndpoints.map(async ep => ({
+      uniqueEndpoints.map(async (ep) => ({
         ep,
         supported: await endpointAvailabilityService.isEndpointSupportedLocally(ep, localUrl).catch(() => false),
-      }))
-    ).then(results => {
+      })),
+    ).then((results) => {
       const map: Record<string, boolean> = {};
       for (const { ep, supported } of results) map[ep] = supported;
       setSplitAvailability(map);
@@ -108,19 +102,19 @@ export function SelfHostedOfflineBanner() {
   const allUnavailableNames = useMemo(() => {
     // Top-level tools unavailable in self-hosted offline mode
     const toolNames = (Object.keys(toolAvailability) as ToolId[])
-      .filter(id => toolAvailability[id]?.available === false && toolAvailability[id]?.reason === 'selfHostedOffline')
-      .map(id => toolRegistry[id]?.name ?? id)
+      .filter((id) => toolAvailability[id]?.available === false && toolAvailability[id]?.reason === "selfHostedOffline")
+      .map((id) => toolRegistry[id]?.name ?? id)
       .filter(Boolean) as string[];
 
     // Use translated tool names from the registry as prefixes
-    const convertPrefix = toolRegistry['convert' as ToolId]?.name ?? 'Convert';
-    const splitPrefix = toolRegistry['split' as ToolId]?.name ?? 'Split';
+    const convertPrefix = toolRegistry["convert" as ToolId]?.name ?? "Convert";
+    const splitPrefix = toolRegistry["split" as ToolId]?.name ?? "Split";
 
     // Conversion types unavailable locally — deduplicated by endpoint
     const unavailableEndpoints = new Set<string>();
     for (const [key, available] of Object.entries(conversionAvailability)) {
       if (!available) {
-        const dashIdx = key.indexOf('-');
+        const dashIdx = key.indexOf("-");
         const fromExt = key.slice(0, dashIdx);
         const toExt = key.slice(dashIdx + 1);
         const endpoint = EXTENSION_TO_ENDPOINT[fromExt]?.[toExt];
@@ -128,11 +122,9 @@ export function SelfHostedOfflineBanner() {
       }
     }
     const conversionNames = [...unavailableEndpoints]
-      .map(ep => {
+      .map((ep) => {
         const i18n = ENDPOINT_I18N[ep];
-        const suffix = i18n
-          ? (i18n[0] ? t(i18n[0], i18n[1]) : i18n[1])
-          : ep;
+        const suffix = i18n ? (i18n[0] ? t(i18n[0], i18n[1]) : i18n[1]) : ep;
         return `${convertPrefix}: ${suffix}`;
       })
       .filter(Boolean);
@@ -151,16 +143,13 @@ export function SelfHostedOfflineBanner() {
   }, [toolAvailability, toolRegistry, conversionAvailability, splitAvailability, t]);
 
   // Only show when in self-hosted mode, server confirmed offline, and not dismissed
-  const show =
-    !dismissed &&
-    connectionMode === 'selfhosted' &&
-    serverState.status === 'offline';
+  const show = !dismissed && connectionMode === "selfhosted" && serverState.status === "offline";
 
   if (!show) return null;
 
   const messageText = localBackendReady
-    ? t('selfHosted.offline.messageWithFallback', 'Some tools require a server connection.')
-    : t('selfHosted.offline.messageNoFallback', 'Tools are unavailable until your server comes back online.');
+    ? t("selfHosted.offline.messageWithFallback", "Some tools require a server connection.")
+    : t("selfHosted.offline.messageNoFallback", "Tools are unavailable until your server comes back online.");
 
   return (
     <Paper
@@ -172,16 +161,14 @@ export function SelfHostedOfflineBanner() {
     >
       <Group gap="xs" align="center" wrap="nowrap" justify="space-between" px="sm" py={6}>
         <Group gap="xs" align="center" wrap="nowrap" style={{ minWidth: 0, flex: 1 }}>
-          <LocalIcon
-            icon="warning-rounded"
-            width="1rem"
-            height="1rem"
-            style={{ color: BANNER_ICON, flexShrink: 0 }}
-          />
+          <LocalIcon icon="warning-rounded" width="1rem" height="1rem" style={{ color: BANNER_ICON, flexShrink: 0 }} />
           <Text size="xs" fw={600} style={{ color: BANNER_TEXT, flexShrink: 0 }}>
-            {t('selfHosted.offline.title', 'Server unreachable')}
+            {t("selfHosted.offline.title", "Server unreachable")}
           </Text>
-          <Text size="xs" style={{ color: BANNER_TEXT, opacity: 0.8, overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+          <Text
+            size="xs"
+            style={{ color: BANNER_TEXT, opacity: 0.8, overflow: "hidden", textOverflow: "ellipsis", whiteSpace: "nowrap" }}
+          >
             {messageText}
           </Text>
         </Group>
@@ -196,18 +183,24 @@ export function SelfHostedOfflineBanner() {
           >
             <Popover.Target>
               <UnstyledButton
-                onClick={() => setExpanded(e => !e)}
-                style={{ color: BANNER_LINK, fontSize: 'var(--mantine-font-size-xs)', fontWeight: 500, flexShrink: 0, whiteSpace: 'nowrap' }}
+                onClick={() => setExpanded((e) => !e)}
+                style={{
+                  color: BANNER_LINK,
+                  fontSize: "var(--mantine-font-size-xs)",
+                  fontWeight: 500,
+                  flexShrink: 0,
+                  whiteSpace: "nowrap",
+                }}
               >
                 {expanded
-                  ? t('selfHosted.offline.hideTools', 'Hide unavailable tools ▴')
-                  : t('selfHosted.offline.showTools', 'View unavailable tools ▾')}
+                  ? t("selfHosted.offline.hideTools", "Hide unavailable tools ▴")
+                  : t("selfHosted.offline.showTools", "View unavailable tools ▾")}
               </UnstyledButton>
             </Popover.Target>
             <Popover.Dropdown p="xs">
               <ScrollArea.Autosize mah={300}>
                 <List size="xs" spacing={2}>
-                  {allUnavailableNames.map(name => (
+                  {allUnavailableNames.map((name) => (
                     <List.Item key={name}>{name}</List.Item>
                   ))}
                 </List>
@@ -219,7 +212,7 @@ export function SelfHostedOfflineBanner() {
           variant="subtle"
           size="xs"
           onClick={() => setDismissed(true)}
-          aria-label={t('close', 'Close')}
+          aria-label={t("close", "Close")}
           style={{ color: BANNER_TEXT }}
         >
           <LocalIcon icon="close-rounded" width="0.8rem" height="0.8rem" />
diff --git a/frontend/src/desktop/components/shared/TeamInvitationBanner.tsx b/frontend/src/desktop/components/shared/TeamInvitationBanner.tsx
index 24bc0cb1e9..8fb9a4e66a 100644
--- a/frontend/src/desktop/components/shared/TeamInvitationBanner.tsx
+++ b/frontend/src/desktop/components/shared/TeamInvitationBanner.tsx
@@ -1,11 +1,11 @@
-import { useState, useEffect } from 'react';
-import { Button, Group, Text } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { InfoBanner } from '@app/components/shared/InfoBanner';
-import { useSaaSTeam } from '@app/contexts/SaaSTeamContext';
-import { useSaaSBilling } from '@app/contexts/SaasBillingContext';
-import { connectionModeService } from '@app/services/connectionModeService';
+import { useState, useEffect } from "react";
+import { Button, Group, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { InfoBanner } from "@app/components/shared/InfoBanner";
+import { useSaaSTeam } from "@app/contexts/SaaSTeamContext";
+import { useSaaSBilling } from "@app/contexts/SaasBillingContext";
+import { connectionModeService } from "@app/services/connectionModeService";
 
 export function TeamInvitationBanner() {
   const { t } = useTranslation();
@@ -18,7 +18,7 @@ export function TeamInvitationBanner() {
 
   // Load connection mode on mount
   useEffect(() => {
-    connectionModeService.getCurrentMode().then(mode => setConnectionMode(mode));
+    connectionModeService.getCurrentMode().then((mode) => setConnectionMode(mode));
   }, []);
 
   // Accept invitation handler
@@ -30,18 +30,18 @@ export function TeamInvitationBanner() {
 
     try {
       await acceptInvitation(invitation.invitationToken);
-      console.log('[TeamInvitationBanner] Invitation accepted successfully:', invitation.teamName);
+      console.log("[TeamInvitationBanner] Invitation accepted successfully:", invitation.teamName);
 
       // Wait briefly for backend to process team membership update
-      await new Promise(resolve => setTimeout(resolve, 1000));
+      await new Promise((resolve) => setTimeout(resolve, 1000));
 
       // Refresh billing after joining team (tier may have changed)
-      console.log('[TeamInvitationBanner] Refreshing billing after team join...');
+      console.log("[TeamInvitationBanner] Refreshing billing after team join...");
       await refreshBilling();
 
       setDismissed(true);
     } catch (error) {
-      console.error('[TeamInvitationBanner] Failed to accept invitation:', error);
+      console.error("[TeamInvitationBanner] Failed to accept invitation:", error);
     } finally {
       setProcessing(false);
     }
@@ -56,28 +56,25 @@ export function TeamInvitationBanner() {
 
     try {
       await rejectInvitation(invitation.invitationToken);
-      console.log('[TeamInvitationBanner] Invitation rejected');
+      console.log("[TeamInvitationBanner] Invitation rejected");
       setDismissed(true);
     } catch (error) {
-      console.error('[TeamInvitationBanner] Failed to reject invitation:', error);
+      console.error("[TeamInvitationBanner] Failed to reject invitation:", error);
     } finally {
       setProcessing(false);
     }
   };
 
   // Visibility logic
-  const shouldShow =
-    connectionMode === 'saas' &&
-    !dismissed &&
-    receivedInvitations.length > 0;
+  const shouldShow = connectionMode === "saas" && !dismissed && receivedInvitations.length > 0;
 
   if (!shouldShow) return null;
 
   const invitation = receivedInvitations[0]; // Show first invitation
 
   const message = (
-    <Text component="span" size="sm" fw={500} style={{ color: 'rgba(255, 255, 255, 0.95)' }}>
-      <strong>{invitation.inviterEmail}</strong> {t('team.invitationBanner.message', 'has invited you to join')}{' '}
+    <Text component="span" size="sm" fw={500} style={{ color: "rgba(255, 255, 255, 0.95)" }}>
+      <strong>{invitation.inviterEmail}</strong> {t("team.invitationBanner.message", "has invited you to join")}{" "}
       <strong>{invitation.teamName}</strong>
     </Text>
   );
@@ -90,23 +87,25 @@ export function TeamInvitationBanner() {
         size="xs"
         onClick={handleAccept}
         loading={processing}
-        leftSection={<LocalIcon icon="check" width="0.9rem" height="0.9rem" style={{ color: 'var(--mantine-color-dark-9)' }} />}
+        leftSection={
+          <LocalIcon icon="check" width="0.9rem" height="0.9rem" style={{ color: "var(--mantine-color-dark-9)" }} />
+        }
         styles={{
           label: {
-            color: 'var(--mantine-color-dark-9)',
+            color: "var(--mantine-color-dark-9)",
           },
         }}
       >
-        {t('team.invitationBanner.acceptButton', 'Accept')}
+        {t("team.invitationBanner.acceptButton", "Accept")}
       </Button>
       <Button
         variant="subtle"
         size="xs"
         onClick={handleReject}
         loading={processing}
-        style={{ color: 'rgba(255, 255, 255, 0.7)' }}
+        style={{ color: "rgba(255, 255, 255, 0.7)" }}
       >
-        {t('team.invitationBanner.rejectButton', 'Decline')}
+        {t("team.invitationBanner.rejectButton", "Decline")}
       </Button>
     </Group>
   );
@@ -115,7 +114,7 @@ export function TeamInvitationBanner() {
     <InfoBanner
       icon="mail"
       message={
-        <Group justify="space-between" align="center" wrap="nowrap" style={{ width: '100%' }}>
+        <Group justify="space-between" align="center" wrap="nowrap" style={{ width: "100%" }}>
           {message}
           {actionButtons}
         </Group>
diff --git a/frontend/src/desktop/components/shared/billing/SaaSStripeCheckout.tsx b/frontend/src/desktop/components/shared/billing/SaaSStripeCheckout.tsx
index e8d9fb86ff..8111f29b8f 100644
--- a/frontend/src/desktop/components/shared/billing/SaaSStripeCheckout.tsx
+++ b/frontend/src/desktop/components/shared/billing/SaaSStripeCheckout.tsx
@@ -1,12 +1,12 @@
-import React, { useState, useEffect } from 'react';
-import { Modal, Button, Text, Alert, Loader, Stack } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { saasBillingService } from '@app/services/saasBillingService';
-import { Z_INDEX_OVER_CONFIG_MODAL } from '@app/styles/zIndex';
-import OpenInBrowserIcon from '@mui/icons-material/OpenInBrowser';
+import React, { useState, useEffect } from "react";
+import { Modal, Button, Text, Alert, Loader, Stack } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { saasBillingService } from "@app/services/saasBillingService";
+import { Z_INDEX_OVER_CONFIG_MODAL } from "@app/styles/zIndex";
+import OpenInBrowserIcon from "@mui/icons-material/OpenInBrowser";
 
 type CheckoutState = {
-  status: 'idle' | 'loading' | 'opened' | 'refreshing' | 'error';
+  status: "idle" | "loading" | "opened" | "refreshing" | "error";
   error?: string;
   sessionPlanId?: string;
 };
@@ -18,53 +18,45 @@ interface SaaSStripeCheckoutProps {
   onSuccess?: () => void;
 }
 
-export const SaaSStripeCheckout: React.FC<SaaSStripeCheckoutProps> = ({
-  opened,
-  onClose,
-  planId,
-  onSuccess
-}) => {
+export const SaaSStripeCheckout: React.FC<SaaSStripeCheckoutProps> = ({ opened, onClose, planId, onSuccess }) => {
   const { t } = useTranslation();
-  const [state, setState] = useState<CheckoutState>({ status: 'idle' });
+  const [state, setState] = useState<CheckoutState>({ status: "idle" });
 
   const createCheckoutSession = async () => {
     if (!planId) {
-      setState({ status: 'error', error: 'No plan selected' });
+      setState({ status: "error", error: "No plan selected" });
       return;
     }
 
     try {
-      setState({ status: 'loading' });
+      setState({ status: "loading" });
 
       // Map UI plan IDs to Stripe plan IDs
-      const stripePlanId = planId === 'team' ? 'pro' : planId;
+      const stripePlanId = planId === "team" ? "pro" : planId;
 
       // Open checkout in browser (returns void, opens browser window)
-      await saasBillingService.openCheckout(
-        stripePlanId as 'pro',
-        window.location.origin
-      );
+      await saasBillingService.openCheckout(stripePlanId as "pro", window.location.origin);
 
       setState({
-        status: 'opened',
-        sessionPlanId: planId
+        status: "opened",
+        sessionPlanId: planId,
       });
     } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : 'Failed to create checkout session';
-      console.error('[SaaSStripeCheckout] Error creating checkout:', err);
+      const errorMessage = err instanceof Error ? err.message : "Failed to create checkout session";
+      console.error("[SaaSStripeCheckout] Error creating checkout:", err);
       setState({
-        status: 'error',
-        error: errorMessage
+        status: "error",
+        error: errorMessage,
       });
     }
   };
 
   const handleRefreshClick = async () => {
-    console.log('[SaaSStripeCheckout] User requested refresh after checkout');
-    setState({ ...state, status: 'refreshing' });
+    console.log("[SaaSStripeCheckout] User requested refresh after checkout");
+    setState({ ...state, status: "refreshing" });
 
     // Give Stripe webhooks a moment to process (2-3 seconds)
-    await new Promise(resolve => setTimeout(resolve, 2000));
+    await new Promise((resolve) => setTimeout(resolve, 2000));
 
     // Trigger the refresh
     if (onSuccess) {
@@ -77,7 +69,7 @@ export const SaaSStripeCheckout: React.FC<SaaSStripeCheckoutProps> = ({
 
   const handleClose = () => {
     // Reset state to idle to clean up the session
-    setState({ status: 'idle', error: undefined, sessionPlanId: undefined });
+    setState({ status: "idle", error: undefined, sessionPlanId: undefined });
     onClose();
   };
 
@@ -85,66 +77,57 @@ export const SaaSStripeCheckout: React.FC<SaaSStripeCheckoutProps> = ({
   useEffect(() => {
     if (opened) {
       // Check if we need a new session (first time or plan changed)
-      const needsNewSession =
-        state.status === 'idle' ||
-        !state.sessionPlanId ||
-        state.sessionPlanId !== planId;
+      const needsNewSession = state.status === "idle" || !state.sessionPlanId || state.sessionPlanId !== planId;
 
       if (needsNewSession) {
-        console.log('[SaaSStripeCheckout] Opening checkout in browser for plan:', planId);
+        console.log("[SaaSStripeCheckout] Opening checkout in browser for plan:", planId);
         createCheckoutSession();
       }
     } else if (!opened) {
       // Clean up state when modal closes
-      setState({ status: 'idle', error: undefined, sessionPlanId: undefined });
+      setState({ status: "idle", error: undefined, sessionPlanId: undefined });
     }
   }, [opened, planId]);
 
   const renderContent = () => {
     switch (state.status) {
-      case 'loading':
+      case "loading":
         return (
           <div className="flex flex-col items-center justify-center py-8">
             <Loader size="lg" />
             <Text size="sm" c="dimmed" mt="md">
-              {t('payment.preparing', 'Preparing your checkout...')}
+              {t("payment.preparing", "Preparing your checkout...")}
             </Text>
           </div>
         );
 
-      case 'opened':
+      case "opened":
         return (
-          <Alert color="blue" title={t('payment.checkoutOpened', 'Checkout Opened in Browser')} icon={<OpenInBrowserIcon />}>
+          <Alert color="blue" title={t("payment.checkoutOpened", "Checkout Opened in Browser")} icon={<OpenInBrowserIcon />}>
             <Stack gap="md">
               <Text size="sm">
-                {t('payment.checkoutInstructions', 'Complete your purchase in the browser window that just opened. After payment is complete, return here and click the button below to refresh your billing information.')}
+                {t(
+                  "payment.checkoutInstructions",
+                  "Complete your purchase in the browser window that just opened. After payment is complete, return here and click the button below to refresh your billing information.",
+                )}
               </Text>
-              <Button
-                variant="filled"
-                color="blue"
-                onClick={handleRefreshClick}
-                fullWidth
-              >
-                {t('payment.refreshBilling', 'I\'ve Completed Payment - Refresh Billing')}
+              <Button variant="filled" color="blue" onClick={handleRefreshClick} fullWidth>
+                {t("payment.refreshBilling", "I've Completed Payment - Refresh Billing")}
               </Button>
-              <Button
-                variant="subtle"
-                onClick={handleClose}
-                fullWidth
-              >
-                {t('payment.closeLater', 'I\'ll Do This Later')}
+              <Button variant="subtle" onClick={handleClose} fullWidth>
+                {t("payment.closeLater", "I'll Do This Later")}
               </Button>
             </Stack>
           </Alert>
         );
 
-      case 'error':
+      case "error":
         return (
-          <Alert color="red" title={t('payment.error', 'Payment Error')}>
+          <Alert color="red" title={t("payment.error", "Payment Error")}>
             <Stack gap="md">
               <Text size="sm">{state.error}</Text>
               <Button variant="outline" onClick={handleClose}>
-                {t('common.close', 'Close')}
+                {t("common.close", "Close")}
               </Button>
             </Stack>
           </Alert>
@@ -156,9 +139,9 @@ export const SaaSStripeCheckout: React.FC<SaaSStripeCheckoutProps> = ({
   };
 
   const getPlanName = () => {
-    if (planId === 'team') return t('plan.team.name', 'Team');
-    if (planId === 'enterprise') return t('plan.enterprise.name', 'Enterprise');
-    return t('plan.free.name', 'Free');
+    if (planId === "team") return t("plan.team.name", "Team");
+    if (planId === "enterprise") return t("plan.enterprise.name", "Enterprise");
+    return t("plan.free.name", "Free");
   };
 
   return (
@@ -168,7 +151,7 @@ export const SaaSStripeCheckout: React.FC<SaaSStripeCheckoutProps> = ({
       title={
         <div>
           <Text fw={600} size="lg">
-            {t('payment.upgradeTitle', 'Upgrade to {{planName}}', { planName: getPlanName() })}
+            {t("payment.upgradeTitle", "Upgrade to {{planName}}", { planName: getPlanName() })}
           </Text>
         </div>
       }
diff --git a/frontend/src/desktop/components/shared/config/configNavSections.tsx b/frontend/src/desktop/components/shared/config/configNavSections.tsx
index 5933744f19..96c8002089 100644
--- a/frontend/src/desktop/components/shared/config/configNavSections.tsx
+++ b/frontend/src/desktop/components/shared/config/configNavSections.tsx
@@ -1,14 +1,17 @@
-import { useTranslation } from 'react-i18next';
-import { useState, useEffect } from 'react';
-import { useConfigNavSections as useProprietaryConfigNavSections, createConfigNavSections as createProprietaryConfigNavSections } from '@proprietary/components/shared/config/configNavSections';
-import { ConfigNavSection } from '@core/components/shared/config/configNavSections';
-import { ConnectionSettings } from '@app/components/ConnectionSettings';
-import { SaasPlanSection } from '@app/components/shared/config/configSections/SaasPlanSection';
-import { SaaSTeamsSection } from '@app/components/shared/config/configSections/SaaSTeamsSection';
-import { connectionModeService } from '@app/services/connectionModeService';
-import { authService } from '@app/services/authService';
+import { useTranslation } from "react-i18next";
+import { useState, useEffect } from "react";
+import {
+  useConfigNavSections as useProprietaryConfigNavSections,
+  createConfigNavSections as createProprietaryConfigNavSections,
+} from "@proprietary/components/shared/config/configNavSections";
+import { ConfigNavSection } from "@core/components/shared/config/configNavSections";
+import { ConnectionSettings } from "@app/components/ConnectionSettings";
+import { SaasPlanSection } from "@app/components/shared/config/configSections/SaasPlanSection";
+import { SaaSTeamsSection } from "@app/components/shared/config/configSections/SaaSTeamsSection";
+import { connectionModeService } from "@app/services/connectionModeService";
+import { authService } from "@app/services/authService";
 
-export type { ConfigNavSection, ConfigNavItem } from '@core/components/shared/config/configNavSections';
+export type { ConfigNavSection, ConfigNavItem } from "@core/components/shared/config/configNavSections";
 
 /**
  * Hook version of desktop config nav sections with proper i18n support
@@ -16,7 +19,7 @@ export type { ConfigNavSection, ConfigNavItem } from '@core/components/shared/co
 export const useConfigNavSections = (
   isAdmin: boolean = false,
   runningEE: boolean = false,
-  loginEnabled: boolean = false
+  loginEnabled: boolean = false,
 ): ConfigNavSection[] => {
   const { t } = useTranslation();
 
@@ -25,30 +28,30 @@ export const useConfigNavSections = (
 
   useEffect(() => {
     void connectionModeService.getCurrentMode().then(setConnectionMode);
-    return connectionModeService.subscribeToModeChanges(config => setConnectionMode(config.mode));
+    return connectionModeService.subscribeToModeChanges((config) => setConnectionMode(config.mode));
   }, []);
 
   // Subscribe to auth changes
   useEffect(() => {
     const unsubscribe = authService.subscribeToAuth((status) => {
-      setIsAuthenticated(status === 'authenticated');
+      setIsAuthenticated(status === "authenticated");
     });
     return unsubscribe;
   }, []);
 
-  const isSaasMode = connectionMode === 'saas';
-  const isLocalMode = connectionMode === 'local';
+  const isSaasMode = connectionMode === "saas";
+  const isLocalMode = connectionMode === "local";
 
   // Get the proprietary sections (includes core Preferences + admin sections)
   const sections = useProprietaryConfigNavSections(isAdmin, runningEE, loginEnabled);
 
   const connectionModeSection: ConfigNavSection = {
-    title: t('settings.connection.title', 'Connection Mode'),
+    title: t("settings.connection.title", "Connection Mode"),
     items: [
       {
-        key: 'connectionMode',
-        label: t('settings.connection.title', 'Connection Mode'),
-        icon: 'desktop-cloud-rounded',
+        key: "connectionMode",
+        label: t("settings.connection.title", "Connection Mode"),
+        icon: "desktop-cloud-rounded",
         component: <ConnectionSettings />,
       },
     ],
@@ -66,11 +69,11 @@ export const useConfigNavSections = (
   // Identifies self-hosted admin sections by their first item's stable key.
   // Using item keys avoids dependency on translated section titles (#17).
   const SELF_HOSTED_SECTION_FIRST_KEYS = new Set([
-    'people',        // Workspace section
-    'adminGeneral',  // Configuration section
-    'adminSecurity', // Security & Authentication section
-    'adminPlan',     // Licensing & Analytics section
-    'adminLegal',    // Policies & Privacy section
+    "people", // Workspace section
+    "adminGeneral", // Configuration section
+    "adminSecurity", // Security & Authentication section
+    "adminPlan", // Licensing & Analytics section
+    "adminLegal", // Policies & Privacy section
   ]);
 
   // Build the result array explicitly instead of splice with hardcoded indices (#18).
@@ -85,23 +88,23 @@ export const useConfigNavSections = (
   // Plan & Billing and Team sections only when authenticated in SaaS mode
   if (isSaasMode && isAuthenticated) {
     result.push({
-      title: t('settings.planBilling.title', 'Plan & Billing'),
+      title: t("settings.planBilling.title", "Plan & Billing"),
       items: [
         {
-          key: 'planBilling',
-          label: t('settings.planBilling.title', 'Plan & Billing'),
-          icon: 'credit-card',
+          key: "planBilling",
+          label: t("settings.planBilling.title", "Plan & Billing"),
+          icon: "credit-card",
           component: <SaasPlanSection />,
         },
       ],
     });
     result.push({
-      title: t('settings.team.title', 'Team'),
+      title: t("settings.team.title", "Team"),
       items: [
         {
-          key: 'teams',
-          label: t('settings.team.title', 'Team'),
-          icon: 'groups-rounded',
+          key: "teams",
+          label: t("settings.team.title", "Team"),
+          icon: "groups-rounded",
           component: <SaaSTeamsSection />,
         },
       ],
@@ -115,9 +118,7 @@ export const useConfigNavSections = (
     if (isSaasMode && firstItemKey && SELF_HOSTED_SECTION_FIRST_KEYS.has(firstItemKey)) {
       continue;
     }
-    const filteredItems = isAuthenticated
-      ? section.items
-      : section.items.filter(item => item.key !== 'account');
+    const filteredItems = isAuthenticated ? section.items : section.items.filter((item) => item.key !== "account");
     if (filteredItems.length === 0) continue;
     result.push({ ...section, items: filteredItems });
   }
@@ -132,21 +133,21 @@ export const useConfigNavSections = (
 export const createConfigNavSections = (
   isAdmin: boolean = false,
   runningEE: boolean = false,
-  loginEnabled: boolean = false
+  loginEnabled: boolean = false,
 ): ConfigNavSection[] => {
-  console.warn('createConfigNavSections is deprecated. Use useConfigNavSections hook instead for proper i18n support.');
+  console.warn("createConfigNavSections is deprecated. Use useConfigNavSections hook instead for proper i18n support.");
 
   // Get the proprietary sections (includes core Preferences + admin sections)
   const sections = createProprietaryConfigNavSections(isAdmin, runningEE, loginEnabled);
 
   // Add Connection section at the beginning (after Preferences)
   sections.splice(1, 0, {
-    title: 'Connection',
+    title: "Connection",
     items: [
       {
-        key: 'connectionMode',
-        label: 'Connection Mode',
-        icon: 'desktop-cloud-rounded',
+        key: "connectionMode",
+        label: "Connection Mode",
+        icon: "desktop-cloud-rounded",
         component: <ConnectionSettings />,
       },
     ],
@@ -154,12 +155,12 @@ export const createConfigNavSections = (
 
   // Add Plan & Billing section (after Connection Mode)
   sections.splice(2, 0, {
-    title: 'Plan & Billing',
+    title: "Plan & Billing",
     items: [
       {
-        key: 'planBilling',
-        label: 'Plan & Billing',
-        icon: 'credit-card',
+        key: "planBilling",
+        label: "Plan & Billing",
+        icon: "credit-card",
         component: <SaasPlanSection />,
       },
     ],
diff --git a/frontend/src/desktop/components/shared/config/configSections/DefaultAppSettings.tsx b/frontend/src/desktop/components/shared/config/configSections/DefaultAppSettings.tsx
index 5a316a203d..bd2d077ad4 100644
--- a/frontend/src/desktop/components/shared/config/configSections/DefaultAppSettings.tsx
+++ b/frontend/src/desktop/components/shared/config/configSections/DefaultAppSettings.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
-import { Paper, Text, Button, Group } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { useDefaultApp } from '@app/hooks/useDefaultApp';
+import React from "react";
+import { Paper, Text, Button, Group } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { useDefaultApp } from "@app/hooks/useDefaultApp";
 
 export const DefaultAppSettings: React.FC = () => {
   const { t } = useTranslation();
@@ -12,18 +12,18 @@ export const DefaultAppSettings: React.FC = () => {
       <Group justify="space-between" align="center">
         <div>
           <Text fw={500} size="sm">
-            {t('settings.general.defaultPdfEditor', 'Default PDF editor')}
+            {t("settings.general.defaultPdfEditor", "Default PDF editor")}
           </Text>
           <Text size="xs" c="dimmed" mt={4}>
             {isDefault === true
-              ? t('settings.general.defaultPdfEditorActive', 'Stirling PDF is your default PDF editor')
+              ? t("settings.general.defaultPdfEditorActive", "Stirling PDF is your default PDF editor")
               : isDefault === false
-              ? t('settings.general.defaultPdfEditorInactive', 'Another application is set as default')
-              : t('settings.general.defaultPdfEditorChecking', 'Checking...')}
+                ? t("settings.general.defaultPdfEditorInactive", "Another application is set as default")
+                : t("settings.general.defaultPdfEditorChecking", "Checking...")}
           </Text>
         </div>
         <Button
-          variant={isDefault ? 'light' : 'filled'}
+          variant={isDefault ? "light" : "filled"}
           color="blue"
           size="sm"
           onClick={handleSetDefault}
@@ -31,8 +31,8 @@ export const DefaultAppSettings: React.FC = () => {
           disabled={isDefault === true}
         >
           {isDefault
-            ? t('settings.general.defaultPdfEditorSet', 'Already Default')
-            : t('settings.general.setAsDefault', 'Set as Default')}
+            ? t("settings.general.defaultPdfEditorSet", "Already Default")
+            : t("settings.general.setAsDefault", "Set as Default")}
         </Button>
       </Group>
     </Paper>
diff --git a/frontend/src/desktop/components/shared/config/configSections/GeneralSection.tsx b/frontend/src/desktop/components/shared/config/configSections/GeneralSection.tsx
index dbe9a00383..ab20c9d3e5 100644
--- a/frontend/src/desktop/components/shared/config/configSections/GeneralSection.tsx
+++ b/frontend/src/desktop/components/shared/config/configSections/GeneralSection.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
-import { Stack } from '@mantine/core';
-import CoreGeneralSection from '@core/components/shared/config/configSections/GeneralSection';
-import { DefaultAppSettings } from '@app/components/shared/config/configSections/DefaultAppSettings';
+import React from "react";
+import { Stack } from "@mantine/core";
+import CoreGeneralSection from "@core/components/shared/config/configSections/GeneralSection";
+import { DefaultAppSettings } from "@app/components/shared/config/configSections/DefaultAppSettings";
 
 /**
  * Desktop extension of GeneralSection that adds default PDF editor settings
diff --git a/frontend/src/desktop/components/shared/config/configSections/SaaSTeamsSection.tsx b/frontend/src/desktop/components/shared/config/configSections/SaaSTeamsSection.tsx
index 35a0b74fb8..6fc1793e78 100644
--- a/frontend/src/desktop/components/shared/config/configSections/SaaSTeamsSection.tsx
+++ b/frontend/src/desktop/components/shared/config/configSections/SaaSTeamsSection.tsx
@@ -1,11 +1,27 @@
-import React, { useState, useEffect } from 'react';
-import { Button, TextInput, Group, Text, Stack, Alert, Table, Badge, ActionIcon, Menu, List, ThemeIcon, Modal, CloseButton, Anchor } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { useSaaSTeam } from '@app/contexts/SaaSTeamContext';
-import { useSaaSBilling } from '@app/contexts/SaasBillingContext';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { Z_INDEX_OVER_CONFIG_MODAL } from '@app/styles/zIndex';
-import apiClient from '@app/services/apiClient';
+import React, { useState, useEffect } from "react";
+import {
+  Button,
+  TextInput,
+  Group,
+  Text,
+  Stack,
+  Alert,
+  Table,
+  Badge,
+  ActionIcon,
+  Menu,
+  List,
+  ThemeIcon,
+  Modal,
+  CloseButton,
+  Anchor,
+} from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { useSaaSTeam } from "@app/contexts/SaaSTeamContext";
+import { useSaaSBilling } from "@app/contexts/SaasBillingContext";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { Z_INDEX_OVER_CONFIG_MODAL } from "@app/styles/zIndex";
+import apiClient from "@app/services/apiClient";
 
 /**
  * Desktop SaaS Teams Section
@@ -29,9 +45,9 @@ export function SaaSTeamsSection() {
 
   // Check Pro status via billing context
   const { tier } = useSaaSBilling();
-  const isPro = tier !== 'free';
+  const isPro = tier !== "free";
 
-  const [inviteEmail, setInviteEmail] = useState('');
+  const [inviteEmail, setInviteEmail] = useState("");
   const [inviting, setInviting] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState<string | null>(null);
@@ -39,7 +55,7 @@ export function SaaSTeamsSection() {
 
   // Team rename state
   const [isEditingName, setIsEditingName] = useState(false);
-  const [newTeamName, setNewTeamName] = useState('');
+  const [newTeamName, setNewTeamName] = useState("");
   const [renamingTeam, setRenamingTeam] = useState(false);
 
   // Refresh team data on mount and every 10 seconds
@@ -56,7 +72,7 @@ export function SaaSTeamsSection() {
   }, []); // Only run on mount/unmount
 
   const navigateToPlan = () => {
-    window.dispatchEvent(new CustomEvent('appConfig:navigate', { detail: { key: 'planBilling' } }));
+    window.dispatchEvent(new CustomEvent("appConfig:navigate", { detail: { key: "planBilling" } }));
   };
 
   const handleInvite = async (e: React.FormEvent) => {
@@ -69,37 +85,37 @@ export function SaaSTeamsSection() {
 
     try {
       await inviteUser(inviteEmail);
-      setSuccess(t('team.inviteSent', 'Invitation sent to {{email}}', { email: inviteEmail }));
-      setInviteEmail('');
+      setSuccess(t("team.inviteSent", "Invitation sent to {{email}}", { email: inviteEmail }));
+      setInviteEmail("");
     } catch (err) {
       const error = err as { response?: { data?: { error?: string } } };
-      setError(error.response?.data?.error || t('team.inviteError', 'Failed to send invitation'));
+      setError(error.response?.data?.error || t("team.inviteError", "Failed to send invitation"));
     } finally {
       setInviting(false);
     }
   };
 
   const handleRemove = async (memberId: number, memberEmail: string) => {
-    if (!window.confirm(t('team.confirmRemove', 'Remove {{email}} from the team?', { email: memberEmail }))) return;
+    if (!window.confirm(t("team.confirmRemove", "Remove {{email}} from the team?", { email: memberEmail }))) return;
 
     try {
       await removeMember(memberId);
-      setSuccess(t('team.memberRemoved', 'Member removed successfully'));
+      setSuccess(t("team.memberRemoved", "Member removed successfully"));
     } catch (err) {
       const error = err as { response?: { data?: { error?: string } } };
-      setError(error.response?.data?.error || t('team.removeError', 'Failed to remove member'));
+      setError(error.response?.data?.error || t("team.removeError", "Failed to remove member"));
     }
   };
 
   const handleCancelInvitation = async (invitationId: number, email: string) => {
-    if (!window.confirm(t('team.confirmCancelInvite', 'Cancel invitation for {{email}}?', { email }))) return;
+    if (!window.confirm(t("team.confirmCancelInvite", "Cancel invitation for {{email}}?", { email }))) return;
 
     try {
       await cancelInvitation(invitationId);
-      setSuccess(t('team.inviteCancelled', 'Invitation for {{email}} cancelled', { email }));
+      setSuccess(t("team.inviteCancelled", "Invitation for {{email}} cancelled", { email }));
     } catch (err) {
       const error = err as { response?: { data?: { error?: string } } };
-      setError(error.response?.data?.error || t('team.cancelInviteError', 'Failed to cancel invitation'));
+      setError(error.response?.data?.error || t("team.cancelInviteError", "Failed to cancel invitation"));
     }
   };
 
@@ -112,7 +128,7 @@ export function SaaSTeamsSection() {
 
   const handleCancelRename = () => {
     setIsEditingName(false);
-    setNewTeamName('');
+    setNewTeamName("");
   };
 
   const handleRenameSubmit = async () => {
@@ -126,12 +142,12 @@ export function SaaSTeamsSection() {
         newName: newTeamName.trim(),
       });
 
-      setSuccess(t('team.renameSuccess', 'Team renamed successfully'));
+      setSuccess(t("team.renameSuccess", "Team renamed successfully"));
       setIsEditingName(false);
       await refreshTeams();
     } catch (err) {
       const error = err as { response?: { data?: { error?: string } }; message?: string };
-      setError(error.response?.data?.error || error.message || t('team.renameError', 'Failed to rename team'));
+      setError(error.response?.data?.error || error.message || t("team.renameError", "Failed to rename team"));
     } finally {
       setRenamingTeam(false);
     }
@@ -141,24 +157,28 @@ export function SaaSTeamsSection() {
     if (!currentTeam || isPersonalTeam) return;
 
     const confirmMessage = isTeamLeader
-      ? t('team.confirmLeaveLeader', 'Are you sure you want to leave "{{name}}"? You are a team leader. Make sure there are other leaders before leaving.', { name: currentTeam.name })
-      : t('team.confirmLeave', 'Are you sure you want to leave "{{name}}"?', { name: currentTeam.name });
+      ? t(
+          "team.confirmLeaveLeader",
+          'Are you sure you want to leave "{{name}}"? You are a team leader. Make sure there are other leaders before leaving.',
+          { name: currentTeam.name },
+        )
+      : t("team.confirmLeave", 'Are you sure you want to leave "{{name}}"?', { name: currentTeam.name });
 
     if (!window.confirm(confirmMessage)) return;
 
     try {
       await leaveTeam();
-      setSuccess(t('team.leaveSuccess', 'Successfully left team'));
+      setSuccess(t("team.leaveSuccess", "Successfully left team"));
     } catch (err) {
       const error = err as { response?: { data?: { error?: string } }; message?: string };
-      setError(error.response?.data?.error || error.message || t('team.leaveError', 'Failed to leave team'));
+      setError(error.response?.data?.error || error.message || t("team.leaveError", "Failed to leave team"));
     }
   };
 
   if (!currentTeam) {
     return (
       <Alert color="gray">
-        <Text>{t('team.loading', 'Loading team information...')}</Text>
+        <Text>{t("team.loading", "Loading team information...")}</Text>
       </Alert>
     );
   }
@@ -174,12 +194,12 @@ export function SaaSTeamsSection() {
                 <TextInput
                   value={newTeamName}
                   onChange={(e) => setNewTeamName(e.target.value)}
-                  placeholder={t('team.namePlaceholder', 'Team name')}
+                  placeholder={t("team.namePlaceholder", "Team name")}
                   style={{ flex: 1, maxWidth: 300 }}
                   autoFocus
                   onKeyDown={(e) => {
-                    if (e.key === 'Enter') handleRenameSubmit();
-                    if (e.key === 'Escape') handleCancelRename();
+                    if (e.key === "Enter") handleRenameSubmit();
+                    if (e.key === "Escape") handleCancelRename();
                   }}
                 />
                 <ActionIcon
@@ -191,37 +211,36 @@ export function SaaSTeamsSection() {
                 >
                   <LocalIcon icon="check" width="1rem" height="1rem" />
                 </ActionIcon>
-                <ActionIcon
-                  variant="subtle"
-                  color="gray"
-                  onClick={handleCancelRename}
-                  disabled={renamingTeam}
-                >
+                <ActionIcon variant="subtle" color="gray" onClick={handleCancelRename} disabled={renamingTeam}>
                   <LocalIcon icon="close" width="1rem" height="1rem" />
                 </ActionIcon>
               </Group>
             ) : (
               <Group gap="xs" align="center">
-                <Text fw={600} size="lg">{currentTeam.name}</Text>
+                <Text fw={600} size="lg">
+                  {currentTeam.name}
+                </Text>
                 {isTeamLeader && !isPersonalTeam && (
                   <ActionIcon
                     variant="subtle"
                     size="sm"
                     onClick={handleStartRename}
-                    aria-label={t('team.editName', 'Edit team name')}
+                    aria-label={t("team.editName", "Edit team name")}
                   >
                     <LocalIcon icon="edit" width="1rem" height="1rem" />
                   </ActionIcon>
                 )}
-                {isTeamLeader && <Badge color='blue'>{t('team.leader', 'LEADER')}</Badge>}
+                {isTeamLeader && <Badge color="blue">{t("team.leader", "LEADER")}</Badge>}
                 {isPersonalTeam && (
-                  <Badge color="gray" variant="light" size="xs">{t('team.personal', 'Personal')}</Badge>
+                  <Badge color="gray" variant="light" size="xs">
+                    {t("team.personal", "Personal")}
+                  </Badge>
                 )}
               </Group>
             )}
             {!isEditingName && !isPersonalTeam && (
               <Text size="sm" c="dimmed" mt={4}>
-                {t('team.memberCount', '{{count}} team members', { count: currentTeam.seatsUsed })}
+                {t("team.memberCount", "{{count}} team members", { count: currentTeam.seatsUsed })}
               </Text>
             )}
           </div>
@@ -233,7 +252,7 @@ export function SaaSTeamsSection() {
               onClick={handleLeaveTeam}
               leftSection={<LocalIcon icon="logout" width="1rem" height="1rem" />}
             >
-              {t('team.leaveButton', 'Leave Team')}
+              {t("team.leaveButton", "Leave Team")}
             </Button>
           )}
         </Group>
@@ -244,20 +263,18 @@ export function SaaSTeamsSection() {
         <Alert color="blue" icon={<LocalIcon icon="info" width={16} height={16} />}>
           <Group justify="space-between" align="center">
             <div>
-              <Text fw={500} size="sm">{t('team.upgrade.title', 'Upgrade to Pro to unlock team features')}</Text>
+              <Text fw={500} size="sm">
+                {t("team.upgrade.title", "Upgrade to Pro to unlock team features")}
+              </Text>
               <Text size="xs" c="dimmed" mt={2}>
-                {t('team.upgrade.description', 'Invite members, share credits, and more.')}{' '}
-                <Anchor size="xs" onClick={() => setFeaturesModalOpened(true)} style={{ cursor: 'pointer' }}>
-                  {t('common.learnMore', 'Learn more')}
+                {t("team.upgrade.description", "Invite members, share credits, and more.")}{" "}
+                <Anchor size="xs" onClick={() => setFeaturesModalOpened(true)} style={{ cursor: "pointer" }}>
+                  {t("common.learnMore", "Learn more")}
                 </Anchor>
               </Text>
             </div>
-            <Button
-              size="sm"
-              variant="light"
-              onClick={navigateToPlan}
-            >
-              {t('team.upgrade.button', 'Upgrade to Pro')}
+            <Button size="sm" variant="light" onClick={navigateToPlan}>
+              {t("team.upgrade.button", "Upgrade to Pro")}
             </Button>
           </Group>
         </Alert>
@@ -273,26 +290,28 @@ export function SaaSTeamsSection() {
         withCloseButton={false}
         zIndex={Z_INDEX_OVER_CONFIG_MODAL}
       >
-        <div style={{ position: 'relative' }}>
+        <div style={{ position: "relative" }}>
           <CloseButton
             onClick={() => setFeaturesModalOpened(false)}
             size="lg"
             style={{
-              position: 'absolute',
+              position: "absolute",
               top: -8,
               right: -8,
-              zIndex: 1
+              zIndex: 1,
             }}
           />
           <Stack gap="lg" pt="md">
             {/* Header */}
             <Stack gap="md" align="center">
-              <Badge size="lg" color="violet" variant="filled">{t('team.features.badge', 'PRO FEATURE')}</Badge>
+              <Badge size="lg" color="violet" variant="filled">
+                {t("team.features.badge", "PRO FEATURE")}
+              </Badge>
               <Text size="xl" fw={700} ta="center">
-                {t('team.features.title', 'Team Collaboration')}
+                {t("team.features.title", "Team Collaboration")}
               </Text>
               <Text size="sm" c="dimmed" ta="center">
-                {t('team.features.subtitle', 'Upgrade to Pro and unlock powerful team features')}
+                {t("team.features.subtitle", "Upgrade to Pro and unlock powerful team features")}
               </Text>
             </Stack>
 
@@ -307,20 +326,28 @@ export function SaaSTeamsSection() {
               }
             >
               <List.Item>
-                <Text fw={500}>{t('team.features.invite.title', 'Invite team members')}</Text>
-                <Text size="xs" c="dimmed">{t('team.features.invite.description', 'Add unlimited users with additional seat purchases')}</Text>
+                <Text fw={500}>{t("team.features.invite.title", "Invite team members")}</Text>
+                <Text size="xs" c="dimmed">
+                  {t("team.features.invite.description", "Add unlimited users with additional seat purchases")}
+                </Text>
               </List.Item>
               <List.Item>
-                <Text fw={500}>{t('team.features.credits.title', 'Share credits across your team')}</Text>
-                <Text size="xs" c="dimmed">{t('team.features.credits.description', 'Pool resources for collaborative work')}</Text>
+                <Text fw={500}>{t("team.features.credits.title", "Share credits across your team")}</Text>
+                <Text size="xs" c="dimmed">
+                  {t("team.features.credits.description", "Pool resources for collaborative work")}
+                </Text>
               </List.Item>
               <List.Item>
-                <Text fw={500}>{t('team.features.dashboard.title', 'Team management dashboard')}</Text>
-                <Text size="xs" c="dimmed">{t('team.features.dashboard.description', 'Control permissions, monitor usage, and manage members')}</Text>
+                <Text fw={500}>{t("team.features.dashboard.title", "Team management dashboard")}</Text>
+                <Text size="xs" c="dimmed">
+                  {t("team.features.dashboard.description", "Control permissions, monitor usage, and manage members")}
+                </Text>
               </List.Item>
               <List.Item>
-                <Text fw={500}>{t('team.features.billing.title', 'Centralized billing')}</Text>
-                <Text size="xs" c="dimmed">{t('team.features.billing.description', 'One invoice for all team seats and usage')}</Text>
+                <Text fw={500}>{t("team.features.billing.title", "Centralized billing")}</Text>
+                <Text size="xs" c="dimmed">
+                  {t("team.features.billing.description", "One invoice for all team seats and usage")}
+                </Text>
               </List.Item>
             </List>
 
@@ -333,7 +360,7 @@ export function SaaSTeamsSection() {
                 navigateToPlan();
               }}
             >
-              {t('team.features.viewPlans', 'View Pro Plans')}
+              {t("team.features.viewPlans", "View Pro Plans")}
             </Button>
           </Stack>
         </div>
@@ -355,24 +382,30 @@ export function SaaSTeamsSection() {
       {/* Invite Members (Pro Users) */}
       {isTeamLeader && isPro && (
         <div>
-          <Text fw={600} size="md" mb="sm">{t('team.invite.title', 'Invite Team Member')}</Text>
+          <Text fw={600} size="md" mb="sm">
+            {t("team.invite.title", "Invite Team Member")}
+          </Text>
           <form onSubmit={handleInvite}>
             <Group>
               <TextInput
                 type="email"
-                placeholder={t('team.invite.placeholder', 'email@example.com')}
+                placeholder={t("team.invite.placeholder", "email@example.com")}
                 value={inviteEmail}
                 onChange={(e) => setInviteEmail(e.target.value)}
                 style={{ flex: 1 }}
                 required
-                error={inviteEmail && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(inviteEmail) ? t('team.invite.invalidEmail', 'Invalid email format') : undefined}
+                error={
+                  inviteEmail && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(inviteEmail)
+                    ? t("team.invite.invalidEmail", "Invalid email format")
+                    : undefined
+                }
               />
               <Button
                 type="submit"
                 loading={inviting}
                 disabled={!inviteEmail.trim() || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(inviteEmail)}
               >
-                {t('team.invite.sendButton', 'Send Invite')}
+                {t("team.invite.sendButton", "Send Invite")}
               </Button>
             </Group>
           </form>
@@ -381,30 +414,32 @@ export function SaaSTeamsSection() {
 
       {/* Team Members Table */}
       <div>
-        <Text fw={600} size="md" mb="sm">{t('team.members.title', 'Team Members')}</Text>
+        <Text fw={600} size="md" mb="sm">
+          {t("team.members.title", "Team Members")}
+        </Text>
         <Table
           horizontalSpacing="md"
           verticalSpacing="sm"
           withRowBorders
           highlightOnHover
-          style={{
-            '--table-border-color': 'var(--mantine-color-gray-3)',
-          } as React.CSSProperties}
+          style={
+            {
+              "--table-border-color": "var(--mantine-color-gray-3)",
+            } as React.CSSProperties
+          }
         >
           <Table.Thead>
-            <Table.Tr style={{ backgroundColor: 'var(--mantine-color-gray-0)' }}>
-              <Table.Th style={{ fontWeight: 600, fontSize: '0.875rem', color: 'var(--mantine-color-gray-7)' }}>
-                {t('team.members.nameColumn', 'Name')}
+            <Table.Tr style={{ backgroundColor: "var(--mantine-color-gray-0)" }}>
+              <Table.Th style={{ fontWeight: 600, fontSize: "0.875rem", color: "var(--mantine-color-gray-7)" }}>
+                {t("team.members.nameColumn", "Name")}
               </Table.Th>
-              <Table.Th style={{ fontWeight: 600, fontSize: '0.875rem', color: 'var(--mantine-color-gray-7)' }}>
-                {t('team.members.emailColumn', 'Email')}
+              <Table.Th style={{ fontWeight: 600, fontSize: "0.875rem", color: "var(--mantine-color-gray-7)" }}>
+                {t("team.members.emailColumn", "Email")}
               </Table.Th>
-              <Table.Th style={{ fontWeight: 600, fontSize: '0.875rem', color: 'var(--mantine-color-gray-7)' }}>
-                {t('team.members.roleColumn', 'Role')}
+              <Table.Th style={{ fontWeight: 600, fontSize: "0.875rem", color: "var(--mantine-color-gray-7)" }}>
+                {t("team.members.roleColumn", "Role")}
               </Table.Th>
-              {isTeamLeader && !isPersonalTeam && (
-                <Table.Th style={{ width: 50 }}></Table.Th>
-              )}
+              {isTeamLeader && !isPersonalTeam && <Table.Th style={{ width: 50 }}></Table.Th>}
             </Table.Tr>
           </Table.Thead>
           <Table.Tbody>
@@ -412,7 +447,7 @@ export function SaaSTeamsSection() {
               <Table.Tr>
                 <Table.Td colSpan={isTeamLeader && !isPersonalTeam ? 4 : 3}>
                   <Text ta="center" c="dimmed" py="xl">
-                    {t('team.members.empty', 'No team members yet.')}
+                    {t("team.members.empty", "No team members yet.")}
                   </Text>
                 </Table.Td>
               </Table.Tr>
@@ -434,18 +469,22 @@ export function SaaSTeamsSection() {
                     <Table.Td>
                       <Badge
                         size="sm"
-                        color={member.role === 'LEADER' ? 'blue' : undefined}
-                        style={member.role !== 'LEADER' ? {
-                          backgroundColor: 'var(--tool-header-badge-bg)',
-                          color: 'var(--tool-header-badge-text)',
-                        } : undefined}
+                        color={member.role === "LEADER" ? "blue" : undefined}
+                        style={
+                          member.role !== "LEADER"
+                            ? {
+                                backgroundColor: "var(--tool-header-badge-bg)",
+                                color: "var(--tool-header-badge-text)",
+                              }
+                            : undefined
+                        }
                       >
                         {member.role}
                       </Badge>
                     </Table.Td>
                     {isTeamLeader && !isPersonalTeam && (
                       <Table.Td>
-                        {member.role !== 'LEADER' && (
+                        {member.role !== "LEADER" && (
                           <Menu position="bottom-end" withinPortal zIndex={Z_INDEX_OVER_CONFIG_MODAL}>
                             <Menu.Target>
                               <ActionIcon variant="subtle">
@@ -458,7 +497,7 @@ export function SaaSTeamsSection() {
                                 leftSection={<LocalIcon icon="person-remove" width="1rem" height="1rem" />}
                                 onClick={() => handleRemove(member.id, member.email)}
                               >
-                                {t('team.members.remove', 'Remove from Team')}
+                                {t("team.members.remove", "Remove from Team")}
                               </Menu.Item>
                             </Menu.Dropdown>
                           </Menu>
@@ -470,12 +509,12 @@ export function SaaSTeamsSection() {
 
                 {/* Pending Invitations */}
                 {teamInvitations
-                  .filter(inv => inv.status === 'PENDING')
+                  .filter((inv) => inv.status === "PENDING")
                   .map((invitation) => (
                     <Table.Tr key={`invitation-${invitation.invitationId}`}>
                       <Table.Td>
                         <Text size="sm" fw={500} c="dimmed" fs="italic">
-                          {invitation.inviteeEmail.split('@')[0]}
+                          {invitation.inviteeEmail.split("@")[0]}
                         </Text>
                       </Table.Td>
                       <Table.Td>
@@ -485,7 +524,7 @@ export function SaaSTeamsSection() {
                       </Table.Td>
                       <Table.Td>
                         <Badge size="sm" color="yellow" variant="light">
-                          {t('team.members.pending', 'PENDING')}
+                          {t("team.members.pending", "PENDING")}
                         </Badge>
                       </Table.Td>
                       {isTeamLeader && !isPersonalTeam && (
@@ -494,7 +533,7 @@ export function SaaSTeamsSection() {
                             variant="subtle"
                             color="red"
                             onClick={() => handleCancelInvitation(invitation.invitationId, invitation.inviteeEmail)}
-                            aria-label={t('team.invite.cancelLabel', 'Cancel invitation')}
+                            aria-label={t("team.invite.cancelLabel", "Cancel invitation")}
                           >
                             <LocalIcon icon="close" width="1rem" height="1rem" />
                           </ActionIcon>
@@ -507,7 +546,6 @@ export function SaaSTeamsSection() {
           </Table.Tbody>
         </Table>
       </div>
-
     </Stack>
   );
 }
diff --git a/frontend/src/desktop/components/shared/config/configSections/SaasPlanSection.tsx b/frontend/src/desktop/components/shared/config/configSections/SaasPlanSection.tsx
index 9a0ae33351..f19cedf31c 100644
--- a/frontend/src/desktop/components/shared/config/configSections/SaasPlanSection.tsx
+++ b/frontend/src/desktop/components/shared/config/configSections/SaasPlanSection.tsx
@@ -1,16 +1,16 @@
-import { useEffect, useState } from 'react';
-import { Stack, Loader, Alert, Button, Center, Text, Flex } from '@mantine/core';
-import RefreshIcon from '@mui/icons-material/Refresh';
-import ErrorOutlineIcon from '@mui/icons-material/ErrorOutline';
-import AccessTimeIcon from '@mui/icons-material/AccessTime';
-import { useTranslation } from 'react-i18next';
-import { useSaaSBilling } from '@app/contexts/SaasBillingContext';
-import { useSaaSTeam } from '@app/contexts/SaaSTeamContext';
-import { useSaaSPlans } from '@app/hooks/useSaaSPlans';
-import { connectionModeService } from '@app/services/connectionModeService';
-import { SaaSCheckoutProvider } from '@app/contexts/SaaSCheckoutContext';
-import { ActiveSubscriptionCard } from '@app/components/shared/config/configSections/plan/ActiveSubscriptionCard';
-import { SaaSAvailablePlansSection } from '@app/components/shared/config/configSections/plan/SaaSAvailablePlansSection';
+import { useEffect, useState } from "react";
+import { Stack, Loader, Alert, Button, Center, Text, Flex } from "@mantine/core";
+import RefreshIcon from "@mui/icons-material/Refresh";
+import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
+import AccessTimeIcon from "@mui/icons-material/AccessTime";
+import { useTranslation } from "react-i18next";
+import { useSaaSBilling } from "@app/contexts/SaasBillingContext";
+import { useSaaSTeam } from "@app/contexts/SaaSTeamContext";
+import { useSaaSPlans } from "@app/hooks/useSaaSPlans";
+import { connectionModeService } from "@app/services/connectionModeService";
+import { SaaSCheckoutProvider } from "@app/contexts/SaaSCheckoutContext";
+import { ActiveSubscriptionCard } from "@app/components/shared/config/configSections/plan/ActiveSubscriptionCard";
+import { SaaSAvailablePlansSection } from "@app/components/shared/config/configSections/plan/SaaSAvailablePlansSection";
 
 /**
  * SaaS Plan & Billing section
@@ -48,14 +48,14 @@ export function SaasPlanSection() {
   useEffect(() => {
     const checkMode = async () => {
       const mode = await connectionModeService.getCurrentMode();
-      setIsSaasMode(mode === 'saas');
+      setIsSaasMode(mode === "saas");
     };
 
     checkMode();
 
     // Subscribe to mode changes
     const unsubscribe = connectionModeService.subscribeToModeChanges(async (config) => {
-      setIsSaasMode(config.mode === 'saas');
+      setIsSaasMode(config.mode === "saas");
     });
 
     return unsubscribe;
@@ -69,7 +69,7 @@ export function SaasPlanSection() {
       // Context handles opening portal and auto-refresh
       await openBillingPortal();
     } catch (error) {
-      console.error('[SaasPlanSection] Failed to open billing portal:', error);
+      console.error("[SaasPlanSection] Failed to open billing portal:", error);
     } finally {
       setIsOpeningPortal(false);
     }
@@ -78,9 +78,9 @@ export function SaasPlanSection() {
   // Format date for trial end
   const formatDate = (timestamp: number): string => {
     return new Date(timestamp * 1000).toLocaleDateString(undefined, {
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
+      year: "numeric",
+      month: "long",
+      day: "numeric",
     });
   };
 
@@ -91,8 +91,8 @@ export function SaasPlanSection() {
         <Alert color="blue" variant="light" icon={<ErrorOutlineIcon sx={{ fontSize: 16 }} />}>
           <Text size="sm">
             {t(
-              'settings.planBilling.notAvailable',
-              'Plan & Billing is only available when connected to Stirling Cloud (SaaS mode).'
+              "settings.planBilling.notAvailable",
+              "Plan & Billing is only available when connected to Stirling Cloud (SaaS mode).",
             )}
           </Text>
         </Alert>
@@ -117,7 +117,7 @@ export function SaasPlanSection() {
         <Stack align="center" gap="md">
           <Loader size="md" />
           <Text size="sm" c="dimmed">
-            {t('settings.planBilling.loading', 'Loading billing information...')}
+            {t("settings.planBilling.loading", "Loading billing information...")}
           </Text>
         </Stack>
       </Center>
@@ -132,17 +132,12 @@ export function SaasPlanSection() {
           color="red"
           variant="light"
           icon={<ErrorOutlineIcon sx={{ fontSize: 16 }} />}
-          title={t('settings.planBilling.errors.fetchFailed', 'Unable to fetch billing data')}
+          title={t("settings.planBilling.errors.fetchFailed", "Unable to fetch billing data")}
         >
           <Stack gap="sm">
             <Text size="sm">{error}</Text>
-            <Button
-              variant="light"
-              leftSection={<RefreshIcon sx={{ fontSize: 16 }} />}
-              onClick={refreshBilling}
-              size="xs"
-            >
-              {t('settings.planBilling.errors.retry', 'Retry')}
+            <Button variant="light" leftSection={<RefreshIcon sx={{ fontSize: 16 }} />} onClick={refreshBilling} size="xs">
+              {t("settings.planBilling.errors.retry", "Retry")}
             </Button>
           </Stack>
         </Alert>
@@ -156,10 +151,10 @@ export function SaasPlanSection() {
       <div>
         {/* Header with title and Manage Billing button */}
         <Flex justify="space-between" align="center" mb="md">
-          <h3 style={{ margin: 0, color: 'var(--mantine-color-text)', fontSize: '1rem' }}>
-            {t('settings.planBilling.currentPlan', 'Active Plan')}
+          <h3 style={{ margin: 0, color: "var(--mantine-color-text)", fontSize: "1rem" }}>
+            {t("settings.planBilling.currentPlan", "Active Plan")}
           </h3>
-          {tier !== 'free' && !isManagedTeamMember && (
+          {tier !== "free" && !isManagedTeamMember && (
             <Button
               variant="light"
               size="sm"
@@ -167,7 +162,7 @@ export function SaasPlanSection() {
               loading={isOpeningPortal}
               disabled={isOpeningPortal}
             >
-              {t('settings.planBilling.billing.manageBilling', 'Manage Billing')}
+              {t("settings.planBilling.billing.manageBilling", "Manage Billing")}
             </Button>
           )}
         </Flex>
@@ -179,16 +174,16 @@ export function SaasPlanSection() {
             icon={<AccessTimeIcon sx={{ fontSize: 16 }} />}
             mt="md"
             mb="md"
-            title={t('settings.planBilling.trial.title', 'Free Trial Active')}
+            title={t("settings.planBilling.trial.title", "Free Trial Active")}
           >
             <Text size="sm">
-              {t('settings.planBilling.trial.daysRemainingFull', 'Your trial ends in {{days}} days', {
+              {t("settings.planBilling.trial.daysRemainingFull", "Your trial ends in {{days}} days", {
                 days: trialDaysRemaining,
                 defaultValue: `Your trial ends in ${trialDaysRemaining} days`,
               })}
             </Text>
             <Text size="xs" c="dimmed">
-              {t('settings.planBilling.trial.endDate', 'Expires: {{date}}', {
+              {t("settings.planBilling.trial.endDate", "Expires: {{date}}", {
                 date: formatDate(subscription.currentPeriodEnd),
                 defaultValue: `Expires: ${formatDate(subscription.currentPeriodEnd)}`,
               })}
@@ -212,12 +207,7 @@ export function SaasPlanSection() {
           />
 
           {/* Available plans grid */}
-          <SaaSAvailablePlansSection
-            plans={plans}
-            currentTier={tier}
-            loading={plansLoading}
-            error={plansError}
-          />
+          <SaaSAvailablePlansSection plans={plans} currentTier={tier} loading={plansLoading} error={plansError} />
         </Stack>
       </div>
     </SaaSCheckoutProvider>
diff --git a/frontend/src/desktop/components/shared/config/configSections/plan/ActiveSubscriptionCard.tsx b/frontend/src/desktop/components/shared/config/configSections/plan/ActiveSubscriptionCard.tsx
index 32c573f7cd..9eb4dc1e6e 100644
--- a/frontend/src/desktop/components/shared/config/configSections/plan/ActiveSubscriptionCard.tsx
+++ b/frontend/src/desktop/components/shared/config/configSections/plan/ActiveSubscriptionCard.tsx
@@ -1,10 +1,10 @@
-import { Card, Text, Group, Badge, Stack, Tooltip, ActionIcon } from '@mantine/core';
-import GroupIcon from '@mui/icons-material/Group';
-import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
-import { useTranslation } from 'react-i18next';
-import type { BillingStatus } from '@app/services/saasBillingService';
-import { BILLING_CONFIG, getFormattedOveragePrice } from '@app/config/billing';
-import { Z_INDEX_OVER_CONFIG_MODAL } from '@app/styles/zIndex';
+import { Card, Text, Group, Badge, Stack, Tooltip, ActionIcon } from "@mantine/core";
+import GroupIcon from "@mui/icons-material/Group";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import { useTranslation } from "react-i18next";
+import type { BillingStatus } from "@app/services/saasBillingService";
+import { BILLING_CONFIG, getFormattedOveragePrice } from "@app/config/billing";
+import { Z_INDEX_OVER_CONFIG_MODAL } from "@app/styles/zIndex";
 
 interface TeamData {
   teamId: number;
@@ -15,9 +15,9 @@ interface TeamData {
 }
 
 interface ActiveSubscriptionCardProps {
-  tier: BillingStatus['tier'];
-  subscription: BillingStatus['subscription'];
-  usage: BillingStatus['meterUsage'];
+  tier: BillingStatus["tier"];
+  subscription: BillingStatus["subscription"];
+  usage: BillingStatus["meterUsage"];
   isTrialing: boolean;
   price?: number;
   currency?: string;
@@ -42,21 +42,21 @@ export function ActiveSubscriptionCard({
   // Format timestamp to readable date
   const formatDate = (timestamp: number): string => {
     return new Date(timestamp * 1000).toLocaleDateString(undefined, {
-      year: 'numeric',
-      month: 'long',
-      day: 'numeric',
+      year: "numeric",
+      month: "long",
+      day: "numeric",
     });
   };
 
   // Get tier display name
   const getTierName = (): string => {
     switch (tier) {
-      case 'free':
-        return t('settings.planBilling.tier.free', 'Free Plan');
-      case 'team':
-        return t('settings.planBilling.tier.team', 'Team Plan');
-      case 'enterprise':
-        return t('settings.planBilling.tier.enterprise', 'Enterprise Plan');
+      case "free":
+        return t("settings.planBilling.tier.free", "Free Plan");
+      case "team":
+        return t("settings.planBilling.tier.team", "Team Plan");
+      case "enterprise":
+        return t("settings.planBilling.tier.enterprise", "Enterprise Plan");
       default:
         return tier;
     }
@@ -64,31 +64,31 @@ export function ActiveSubscriptionCard({
 
   // Get price display
   const getPriceDisplay = (): string => {
-    if (tier === 'free') {
-      return '$0/month';
+    if (tier === "free") {
+      return "$0/month";
     }
     // Use actual price from Stripe if available
     if (price !== undefined && currency) {
       return `${currency}${price}/month`;
     }
     // Fallback to default pricing
-    return '$10/month';
+    return "$10/month";
   };
 
   // Get description
   const getDescription = (): string => {
-    if (tier === 'free') {
-      return t('settings.planBilling.tier.freeDescription', '50 credits per month');
+    if (tier === "free") {
+      return t("settings.planBilling.tier.freeDescription", "50 credits per month");
     }
     return t(
-      'settings.planBilling.tier.teamDescription',
-      '500 credits/month included, automatic overage billing for uninterrupted service'
+      "settings.planBilling.tier.teamDescription",
+      "500 credits/month included, automatic overage billing for uninterrupted service",
     );
   };
 
   // Format overage cost
   const formatOverageCost = (cents: number, credits: number): string => {
-    return t('settings.planBilling.billing.overageCost', {
+    return t("settings.planBilling.billing.overageCost", {
       amount: `$${(cents / 100).toFixed(2)}`,
       credits,
       defaultValue: `Current overage cost: $${(cents / 100).toFixed(2)} (${credits} credits)`,
@@ -96,7 +96,7 @@ export function ActiveSubscriptionCard({
   };
 
   // Pro/Team card
-  if (tier === 'team' || tier === 'enterprise') {
+  if (tier === "team" || tier === "enterprise") {
     return (
       <Card padding="lg" radius="md" withBorder>
         <Stack gap="sm">
@@ -105,30 +105,33 @@ export function ActiveSubscriptionCard({
             <div style={{ flex: 1 }}>
               <Group gap="xs" mb="xs">
                 <Text size="lg" fw={600}>
-                  {!isPersonalTeam && isTeamLeader ? t('settings.planBilling.tier.team', 'Team Plan') : getTierName()}
+                  {!isPersonalTeam && isTeamLeader ? t("settings.planBilling.tier.team", "Team Plan") : getTierName()}
                 </Text>
                 {!isPersonalTeam && (
                   <Badge color="violet" variant="light" leftSection={<GroupIcon sx={{ fontSize: 12 }} />}>
-                    {t('settings.planBilling.tier.teamBadge', 'Team')}
+                    {t("settings.planBilling.tier.teamBadge", "Team")}
                   </Badge>
                 )}
                 <Tooltip
                   label={
                     <div style={{ maxWidth: 300 }}>
                       <Text size="sm" mb="xs">
-                        {t('settings.planBilling.tier.teamTooltipCredits', {
+                        {t("settings.planBilling.tier.teamTooltipCredits", {
                           credits: BILLING_CONFIG.INCLUDED_CREDITS_PER_MONTH,
                           defaultValue: `Team plan includes ${BILLING_CONFIG.INCLUDED_CREDITS_PER_MONTH} credits/month.`,
                         })}
                       </Text>
                       <Text size="sm" mb="xs">
-                        {t('settings.planBilling.tier.teamTooltipOverage', {
+                        {t("settings.planBilling.tier.teamTooltipOverage", {
                           price: getFormattedOveragePrice(),
                           defaultValue: `Automatic overage billing at ${getFormattedOveragePrice()}/credit ensures uninterrupted service.`,
                         })}
                       </Text>
                       <Text size="sm">
-                        {t('settings.planBilling.tier.teamTooltipFineprint', 'Only pay for what you use beyond included credits.')}
+                        {t(
+                          "settings.planBilling.tier.teamTooltipFineprint",
+                          "Only pay for what you use beyond included credits.",
+                        )}
                       </Text>
                     </div>
                   }
@@ -143,18 +146,18 @@ export function ActiveSubscriptionCard({
                 </Tooltip>
                 {isTrialing && (
                   <Badge color="blue" variant="light">
-                    {t('settings.planBilling.status.trial', 'Trial')}
+                    {t("settings.planBilling.status.trial", "Trial")}
                   </Badge>
                 )}
               </Group>
               {!isPersonalTeam && !isTeamLeader && (
                 <Text size="sm" c="dimmed" mb="xs">
-                  {t('settings.planBilling.team.managedByTeam', 'Managed by team')}
+                  {t("settings.planBilling.team.managedByTeam", "Managed by team")}
                 </Text>
               )}
               {!isPersonalTeam && isTeamLeader && currentTeam && (
                 <Text size="sm" c="dimmed" mb="xs">
-                  {t('settings.planBilling.team.memberCount', '{{count}} team members', { count: currentTeam.seatsUsed })}
+                  {t("settings.planBilling.team.memberCount", "{{count}} team members", { count: currentTeam.seatsUsed })}
                 </Text>
               )}
               <Text size="sm" c="dimmed" mb="xs">
@@ -169,10 +172,10 @@ export function ActiveSubscriptionCard({
             </div>
 
             {/* Right side: Price */}
-            <div style={{ textAlign: 'right' }}>
+            <div style={{ textAlign: "right" }}>
               {!isPersonalTeam && !isTeamLeader ? (
                 <Text size="lg" c="dimmed">
-                  {t('settings.planBilling.team.managedByTeam', 'Managed by team')}
+                  {t("settings.planBilling.team.managedByTeam", "Managed by team")}
                 </Text>
               ) : (
                 <Text size="xl" fw={700}>
@@ -186,7 +189,8 @@ export function ActiveSubscriptionCard({
           {subscription?.currentPeriodEnd && (
             <Group gap="xs" mt="xs">
               <Text size="sm" c="dimmed">
-                {t('settings.planBilling.billing.nextBillingDate', 'Next billing date:')} {formatDate(subscription.currentPeriodEnd)}
+                {t("settings.planBilling.billing.nextBillingDate", "Next billing date:")}{" "}
+                {formatDate(subscription.currentPeriodEnd)}
               </Text>
             </Group>
           )}
@@ -209,7 +213,7 @@ export function ActiveSubscriptionCard({
             {getDescription()}
           </Text>
         </div>
-        <div style={{ textAlign: 'right' }}>
+        <div style={{ textAlign: "right" }}>
           <Text size="xl" fw={700}>
             {getPriceDisplay()}
           </Text>
diff --git a/frontend/src/desktop/components/shared/config/configSections/plan/PlanUpgradeCard.tsx b/frontend/src/desktop/components/shared/config/configSections/plan/PlanUpgradeCard.tsx
index 88bdad8902..9f75b5eb21 100644
--- a/frontend/src/desktop/components/shared/config/configSections/plan/PlanUpgradeCard.tsx
+++ b/frontend/src/desktop/components/shared/config/configSections/plan/PlanUpgradeCard.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
-import { Card, Text, Button, Stack, List, ThemeIcon } from '@mantine/core';
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import { useTranslation } from 'react-i18next';
-import { open as shellOpen } from '@tauri-apps/plugin-shell';
-import { STIRLING_SAAS_URL } from '@app/constants/connection';
-import { BILLING_CONFIG } from '@app/config/billing';
-import type { TierLevel } from '@app/types/billing';
+import React from "react";
+import { Card, Text, Button, Stack, List, ThemeIcon } from "@mantine/core";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import { useTranslation } from "react-i18next";
+import { open as shellOpen } from "@tauri-apps/plugin-shell";
+import { STIRLING_SAAS_URL } from "@app/constants/connection";
+import { BILLING_CONFIG } from "@app/config/billing";
+import type { TierLevel } from "@app/types/billing";
 
 interface PlanUpgradeCardProps {
   currentTier: TierLevel;
@@ -15,7 +15,7 @@ export function PlanUpgradeCard({ currentTier }: PlanUpgradeCardProps) {
   const { t } = useTranslation();
 
   // Don't show upgrade card if already on Team or Enterprise
-  if (currentTier !== 'free') {
+  if (currentTier !== "free") {
     return null;
   }
 
@@ -26,7 +26,7 @@ export function PlanUpgradeCard({ currentTier }: PlanUpgradeCardProps) {
     try {
       await shellOpen(upgradeUrl);
     } catch (error) {
-      console.error('[PlanUpgradeCard] Failed to open upgrade URL:', error);
+      console.error("[PlanUpgradeCard] Failed to open upgrade URL:", error);
     }
   };
 
@@ -35,12 +35,12 @@ export function PlanUpgradeCard({ currentTier }: PlanUpgradeCardProps) {
       <Stack gap="md">
         {/* Header */}
         <Text size="lg" fw={600}>
-          {t('settings.planBilling.upgrade.title', 'Upgrade Your Plan')}
+          {t("settings.planBilling.upgrade.title", "Upgrade Your Plan")}
         </Text>
 
         {/* Team plan benefits */}
         <Text size="sm" c="dimmed">
-          {t('settings.planBilling.upgrade.subtitle', 'Upgrade to Team for:')}
+          {t("settings.planBilling.upgrade.subtitle", "Upgrade to Team for:")}
         </Text>
 
         <List
@@ -53,25 +53,25 @@ export function PlanUpgradeCard({ currentTier }: PlanUpgradeCardProps) {
           }
         >
           <List.Item>
-            {t('settings.planBilling.upgrade.featureCredits', {
+            {t("settings.planBilling.upgrade.featureCredits", {
               teamCredits: BILLING_CONFIG.INCLUDED_CREDITS_PER_MONTH,
               freeCredits: BILLING_CONFIG.FREE_CREDITS_PER_MONTH,
               defaultValue: `${BILLING_CONFIG.INCLUDED_CREDITS_PER_MONTH} credits per month (vs ${BILLING_CONFIG.FREE_CREDITS_PER_MONTH} on Free)`,
             })}
           </List.Item>
-          <List.Item>{t('settings.planBilling.upgrade.featureMembers', 'Unlimited team members')}</List.Item>
-          <List.Item>{t('settings.planBilling.upgrade.featureThroughput', 'Faster processing throughput')}</List.Item>
-          <List.Item>{t('settings.planBilling.upgrade.featureApi', 'API access for automation')}</List.Item>
-          <List.Item>{t('settings.planBilling.upgrade.featureSupport', 'Priority support')}</List.Item>
+          <List.Item>{t("settings.planBilling.upgrade.featureMembers", "Unlimited team members")}</List.Item>
+          <List.Item>{t("settings.planBilling.upgrade.featureThroughput", "Faster processing throughput")}</List.Item>
+          <List.Item>{t("settings.planBilling.upgrade.featureApi", "API access for automation")}</List.Item>
+          <List.Item>{t("settings.planBilling.upgrade.featureSupport", "Priority support")}</List.Item>
         </List>
 
         {/* Upgrade button */}
         <Button variant="filled" fullWidth onClick={handleUpgrade}>
-          {t('settings.planBilling.upgrade.cta', 'Upgrade to Team')}
+          {t("settings.planBilling.upgrade.cta", "Upgrade to Team")}
         </Button>
 
         <Text size="xs" c="dimmed" ta="center">
-          {t('settings.planBilling.upgrade.opensInBrowser', 'Opens in browser to complete upgrade')}
+          {t("settings.planBilling.upgrade.opensInBrowser", "Opens in browser to complete upgrade")}
         </Text>
       </Stack>
     </Card>
diff --git a/frontend/src/desktop/components/shared/config/configSections/plan/SaaSAvailablePlansSection.tsx b/frontend/src/desktop/components/shared/config/configSections/plan/SaaSAvailablePlansSection.tsx
index e3d72c449d..24738e4bb0 100644
--- a/frontend/src/desktop/components/shared/config/configSections/plan/SaaSAvailablePlansSection.tsx
+++ b/frontend/src/desktop/components/shared/config/configSections/plan/SaaSAvailablePlansSection.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
-import { Text, SimpleGrid, Loader, Alert, Center } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { PlanTier } from '@app/hooks/useSaaSPlans';
-import { SaasPlanCard } from '@app/components/shared/config/configSections/plan/SaasPlanCard';
-import { useSaaSCheckout } from '@app/contexts/SaaSCheckoutContext';
-import type { TierLevel } from '@app/types/billing';
+import React from "react";
+import { Text, SimpleGrid, Loader, Alert, Center } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { PlanTier } from "@app/hooks/useSaaSPlans";
+import { SaasPlanCard } from "@app/components/shared/config/configSections/plan/SaasPlanCard";
+import { useSaaSCheckout } from "@app/contexts/SaaSCheckoutContext";
+import type { TierLevel } from "@app/types/billing";
 
 interface SaaSAvailablePlansSectionProps {
   plans: PlanTier[];
@@ -17,7 +17,7 @@ export const SaaSAvailablePlansSection: React.FC<SaaSAvailablePlansSectionProps>
   plans,
   currentTier,
   loading,
-  error
+  error,
 }) => {
   const { t } = useTranslation();
   const { openCheckout } = useSaaSCheckout();
@@ -33,7 +33,7 @@ export const SaaSAvailablePlansSection: React.FC<SaaSAvailablePlansSectionProps>
       return;
     }
 
-    console.log('[SaaSAvailablePlansSection] Upgrade clicked for plan:', plan.id);
+    console.log("[SaaSAvailablePlansSection] Upgrade clicked for plan:", plan.id);
     openCheckout(plan.id);
   };
 
@@ -48,9 +48,7 @@ export const SaaSAvailablePlansSection: React.FC<SaaSAvailablePlansSectionProps>
   if (error) {
     return (
       <Alert color="orange" variant="light" mt="md">
-        <Text size="sm">
-          {t('plan.availablePlans.loadError', 'Unable to load plan pricing. Using default values.')}
-        </Text>
+        <Text size="sm">{t("plan.availablePlans.loadError", "Unable to load plan pricing. Using default values.")}</Text>
       </Alert>
     );
   }
@@ -58,10 +56,10 @@ export const SaaSAvailablePlansSection: React.FC<SaaSAvailablePlansSectionProps>
   return (
     <div>
       <Text size="lg" fw={600} mb="md">
-        {t('plan.availablePlans.title', 'Available Plans')}
+        {t("plan.availablePlans.title", "Available Plans")}
       </Text>
       <SimpleGrid cols={{ base: 1, sm: 2, md: 3 }} spacing="lg">
-        {plans.map(plan => (
+        {plans.map((plan) => (
           <SaasPlanCard
             key={plan.id}
             plan={plan}
diff --git a/frontend/src/desktop/components/shared/config/configSections/plan/SaasPlanCard.tsx b/frontend/src/desktop/components/shared/config/configSections/plan/SaasPlanCard.tsx
index 207e4a6f20..af88d45776 100644
--- a/frontend/src/desktop/components/shared/config/configSections/plan/SaasPlanCard.tsx
+++ b/frontend/src/desktop/components/shared/config/configSections/plan/SaasPlanCard.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
-import { Button, Card, Badge, Text, Group, Stack } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { PlanTier } from '@app/hooks/useSaaSPlans';
-import { FeatureListItem } from '@app/components/shared/modals/FeatureListItem';
-import type { TierLevel } from '@app/types/billing';
+import React from "react";
+import { Button, Card, Badge, Text, Group, Stack } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { PlanTier } from "@app/hooks/useSaaSPlans";
+import { FeatureListItem } from "@app/components/shared/modals/FeatureListItem";
+import type { TierLevel } from "@app/types/billing";
 
 interface SaasPlanCardProps {
   plan: PlanTier;
@@ -12,30 +12,25 @@ interface SaasPlanCardProps {
   onUpgradeClick?: (plan: PlanTier) => void;
 }
 
-export const SaasPlanCard: React.FC<SaasPlanCardProps> = ({
-  plan,
-  isCurrentPlan,
-  currentTier,
-  onUpgradeClick
-}) => {
+export const SaasPlanCard: React.FC<SaasPlanCardProps> = ({ plan, isCurrentPlan, currentTier, onUpgradeClick }) => {
   const { t } = useTranslation();
 
   // Free plan is included if user has Team or Enterprise tier
-  const isIncluded = plan.id === 'free' && (currentTier === 'team' || currentTier === 'enterprise');
+  const isIncluded = plan.id === "free" && (currentTier === "team" || currentTier === "enterprise");
 
   // Determine card styling based on plan type
   const getCardStyle = () => {
     const baseStyle: React.CSSProperties = {
-      backgroundColor: 'light-dark(#FFFFFF, #1A1A1E)',
+      backgroundColor: "light-dark(#FFFFFF, #1A1A1E)",
       borderWidth: 1,
-      position: 'relative',
-      overflow: 'visible',
+      position: "relative",
+      overflow: "visible",
     };
 
-    if (plan.id === 'free' && isCurrentPlan) {
+    if (plan.id === "free" && isCurrentPlan) {
       return {
         ...baseStyle,
-        borderColor: 'var(--border-default)',
+        borderColor: "var(--border-default)",
         opacity: 0.85,
       };
     }
@@ -43,11 +38,11 @@ export const SaasPlanCard: React.FC<SaasPlanCardProps> = ({
     if (plan.popular) {
       return {
         ...baseStyle,
-        borderColor: 'rgb(59, 130, 246)',
+        borderColor: "rgb(59, 130, 246)",
         borderWidth: 2,
-        cursor: 'pointer',
-        transition: 'all 0.2s ease',
-        boxShadow: '0 2px 8px rgba(59, 130, 246, 0.1)',
+        cursor: "pointer",
+        transition: "all 0.2s ease",
+        boxShadow: "0 2px 8px rgba(59, 130, 246, 0.1)",
       };
     }
 
@@ -56,15 +51,15 @@ export const SaasPlanCard: React.FC<SaasPlanCardProps> = ({
 
   const handleMouseEnter = (e: React.MouseEvent<HTMLDivElement>) => {
     if (plan.popular && !isCurrentPlan) {
-      e.currentTarget.style.transform = 'translateY(-4px)';
-      e.currentTarget.style.boxShadow = '0 12px 48px rgba(59, 130, 246, 0.3)';
+      e.currentTarget.style.transform = "translateY(-4px)";
+      e.currentTarget.style.boxShadow = "0 12px 48px rgba(59, 130, 246, 0.3)";
     }
   };
 
   const handleMouseLeave = (e: React.MouseEvent<HTMLDivElement>) => {
     if (plan.popular && !isCurrentPlan) {
-      e.currentTarget.style.transform = 'translateY(0)';
-      e.currentTarget.style.boxShadow = '0 2px 8px rgba(59, 130, 246, 0.1)';
+      e.currentTarget.style.transform = "translateY(0)";
+      e.currentTarget.style.boxShadow = "0 2px 8px rgba(59, 130, 246, 0.1)";
     }
   };
 
@@ -89,29 +84,31 @@ export const SaasPlanCard: React.FC<SaasPlanCardProps> = ({
         <Badge
           size="sm"
           style={{
-            position: 'absolute',
+            position: "absolute",
             top: -10,
-            left: '50%',
-            transform: 'translateX(-50%)',
-            background: 'rgb(59, 130, 246)',
-            color: 'white',
+            left: "50%",
+            transform: "translateX(-50%)",
+            background: "rgb(59, 130, 246)",
+            color: "white",
             fontWeight: 600,
-            textTransform: 'uppercase',
-            letterSpacing: '0.5px',
-            paddingLeft: '12px',
-            paddingRight: '12px',
+            textTransform: "uppercase",
+            letterSpacing: "0.5px",
+            paddingLeft: "12px",
+            paddingRight: "12px",
           }}
         >
-          {t('plan.popular', 'Popular')}
+          {t("plan.popular", "Popular")}
         </Badge>
       )}
 
       <Stack gap="sm" className="h-full">
         <div>
-          <Text size="md" fw={600} mb="xs">{plan.name}</Text>
+          <Text size="md" fw={600} mb="xs">
+            {plan.name}
+          </Text>
           <Group gap="xs" align="baseline">
             <Text size="xl" fw={700}>
-              {plan.isContactOnly ? t('plan.customPricing', 'Custom') : `${plan.currency}${plan.price}`}
+              {plan.isContactOnly ? t("plan.customPricing", "Custom") : `${plan.currency}${plan.price}`}
             </Text>
             {!plan.isContactOnly && (
               <Text size="sm" c="dimmed">
@@ -121,30 +118,28 @@ export const SaasPlanCard: React.FC<SaasPlanCardProps> = ({
           </Group>
           <Text size="xs" fw={400} c="dimmed">
             {plan.isContactOnly
-              ? t('plan.enterprise.siteLicense', 'Site License')
-              : plan.id === 'free'
-                ? `50 ${t('credits.modal.monthlyCredits', 'monthly credits')}`
+              ? t("plan.enterprise.siteLicense", "Site License")
+              : plan.id === "free"
+                ? `50 ${t("credits.modal.monthlyCredits", "monthly credits")}`
                 : plan.overagePrice
-                  ? `500 ${t('credits.modal.monthlyCredits', 'monthly credits')} + ${plan.currency}${plan.overagePrice.toFixed(2)}/${t('credits.modal.overage', 'overage')}`
-                  : `500 ${t('credits.modal.monthlyCredits', 'monthly credits')}`
-            }
+                  ? `500 ${t("credits.modal.monthlyCredits", "monthly credits")} + ${plan.currency}${plan.overagePrice.toFixed(2)}/${t("credits.modal.overage", "overage")}`
+                  : `500 ${t("credits.modal.monthlyCredits", "monthly credits")}`}
           </Text>
         </div>
 
         <Stack gap="xs">
           <Text size="xs" fw={500} mb="xs">
-            {plan.id === 'free'
-              ? t('credits.modal.forRegularWork', 'For regular PDF work:')
-              : plan.id === 'enterprise'
-                ? t('credits.modal.everythingInCredits', 'Everything in Credits, plus:')
-                : t('credits.modal.everythingInFree', 'Everything in Free, plus:')
-            }
+            {plan.id === "free"
+              ? t("credits.modal.forRegularWork", "For regular PDF work:")
+              : plan.id === "enterprise"
+                ? t("credits.modal.everythingInCredits", "Everything in Credits, plus:")
+                : t("credits.modal.everythingInFree", "Everything in Free, plus:")}
           </Text>
           {plan.highlights.map((highlight: string, index: number) => (
             <FeatureListItem
               key={index}
               included
-              color={plan.id === 'free' ? 'var(--mantine-color-gray-6)' : 'var(--color-primary-600)'}
+              color={plan.id === "free" ? "var(--mantine-color-gray-6)" : "var(--color-primary-600)"}
               size="xs"
             >
               {highlight}
@@ -168,26 +163,25 @@ export const SaasPlanCard: React.FC<SaasPlanCardProps> = ({
           style={{
             fontWeight: 600,
             ...((isCurrentPlan || isIncluded) && {
-              background: 'transparent',
-              border: 'none',
-              cursor: 'default',
+              background: "transparent",
+              border: "none",
+              cursor: "default",
             }),
             ...(plan.isContactOnly && {
-              borderColor: 'var(--text-primary)',
-              color: 'var(--text-primary)',
+              borderColor: "var(--text-primary)",
+              color: "var(--text-primary)",
             }),
           }}
-          component={plan.isContactOnly ? 'a' : undefined}
+          component={plan.isContactOnly ? "a" : undefined}
           href={plan.isContactOnly ? `mailto:contact@stirlingpdf.com?subject=${plan.name} Plan Inquiry` : undefined}
         >
           {isCurrentPlan
-            ? t('plan.current', 'Current Plan')
+            ? t("plan.current", "Current Plan")
             : isIncluded
-            ? t('plan.included', 'Included')
-            : plan.isContactOnly
-            ? t('plan.contact', 'Contact Sales')
-            : t('plan.upgrade', 'Upgrade')
-          }
+              ? t("plan.included", "Included")
+              : plan.isContactOnly
+                ? t("plan.contact", "Contact Sales")
+                : t("plan.upgrade", "Upgrade")}
         </Button>
       </Stack>
     </Card>
diff --git a/frontend/src/desktop/components/shared/config/configSections/plan/UsageDisplay.tsx b/frontend/src/desktop/components/shared/config/configSections/plan/UsageDisplay.tsx
index 4cf1c28bd5..fffbcf7e8d 100644
--- a/frontend/src/desktop/components/shared/config/configSections/plan/UsageDisplay.tsx
+++ b/frontend/src/desktop/components/shared/config/configSections/plan/UsageDisplay.tsx
@@ -1,13 +1,13 @@
-import React from 'react';
-import { Card, Text, Stack, Group, Progress, Alert } from '@mantine/core';
-import InfoOutlinedIcon from '@mui/icons-material/InfoOutlined';
-import { useTranslation } from 'react-i18next';
-import type { BillingStatus } from '@app/services/saasBillingService';
-import { BILLING_CONFIG, getFormattedOveragePrice } from '@app/config/billing';
+import React from "react";
+import { Card, Text, Stack, Group, Progress, Alert } from "@mantine/core";
+import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
+import { useTranslation } from "react-i18next";
+import type { BillingStatus } from "@app/services/saasBillingService";
+import { BILLING_CONFIG, getFormattedOveragePrice } from "@app/config/billing";
 
 interface UsageDisplayProps {
-  tier: BillingStatus['tier'];
-  usage: BillingStatus['meterUsage'];
+  tier: BillingStatus["tier"];
+  usage: BillingStatus["meterUsage"];
 }
 
 export function UsageDisplay({ tier, usage }: UsageDisplayProps) {
@@ -16,11 +16,11 @@ export function UsageDisplay({ tier, usage }: UsageDisplayProps) {
   // Credits per month based on tier
   const getMonthlyCredits = (): number => {
     switch (tier) {
-      case 'free':
+      case "free":
         return BILLING_CONFIG.FREE_CREDITS_PER_MONTH;
-      case 'team':
+      case "team":
         return BILLING_CONFIG.INCLUDED_CREDITS_PER_MONTH;
-      case 'enterprise':
+      case "enterprise":
         return 1000; // Placeholder — enterprise credits are custom
       default:
         return BILLING_CONFIG.FREE_CREDITS_PER_MONTH;
@@ -39,13 +39,13 @@ export function UsageDisplay({ tier, usage }: UsageDisplayProps) {
       <Stack gap="md">
         {/* Header */}
         <Text size="lg" fw={600}>
-          {t('settings.planBilling.credits.title', 'Credit Usage')}
+          {t("settings.planBilling.credits.title", "Credit Usage")}
         </Text>
 
         {/* Monthly credits info */}
         <Group justify="space-between">
           <Text size="sm" c="dimmed">
-            {t('settings.planBilling.credits.included', {
+            {t("settings.planBilling.credits.included", {
               count: monthlyCredits,
               defaultValue: `${monthlyCredits} credits/month (included)`,
             })}
@@ -58,13 +58,13 @@ export function UsageDisplay({ tier, usage }: UsageDisplayProps) {
             <Stack gap="xs">
               <Group justify="space-between">
                 <Text size="sm" c="dimmed">
-                  {t('settings.planBilling.credits.overage', {
+                  {t("settings.planBilling.credits.overage", {
                     count: usage.currentPeriodCredits,
                     defaultValue: `+ ${usage.currentPeriodCredits} overage`,
                   })}
                 </Text>
                 <Text size="sm" fw={500} c="orange">
-                  {t('settings.planBilling.credits.estimatedCost', {
+                  {t("settings.planBilling.credits.estimatedCost", {
                     amount: formatCurrency(usage.estimatedCost),
                     defaultValue: `Estimated cost: ${formatCurrency(usage.estimatedCost)}`,
                   })}
@@ -72,19 +72,12 @@ export function UsageDisplay({ tier, usage }: UsageDisplayProps) {
               </Group>
 
               {/* Progress bar for overage usage */}
-              <Progress
-                value={100}
-                color="orange"
-                size="sm"
-                radius="xl"
-                striped
-                animated
-              />
+              <Progress value={100} color="orange" size="sm" radius="xl" striped animated />
             </Stack>
 
             <Alert color="blue" variant="light" icon={<InfoOutlinedIcon sx={{ fontSize: 16 }} />}>
               <Text size="xs">
-                {t('settings.planBilling.credits.overageInfo', {
+                {t("settings.planBilling.credits.overageInfo", {
                   price: getFormattedOveragePrice(),
                   defaultValue: `Overage credits are billed at ${getFormattedOveragePrice()} per credit. You'll only pay for what you use beyond your monthly allowance.`,
                 })}
@@ -94,10 +87,10 @@ export function UsageDisplay({ tier, usage }: UsageDisplayProps) {
         )}
 
         {/* No overage message */}
-        {(!usage || usage.currentPeriodCredits === 0) && tier !== 'free' && (
+        {(!usage || usage.currentPeriodCredits === 0) && tier !== "free" && (
           <Alert color="green" variant="light">
             <Text size="sm">
-              {t('settings.planBilling.credits.noOverage', {
+              {t("settings.planBilling.credits.noOverage", {
                 count: monthlyCredits,
                 defaultValue: `No overage charges this month. You're using your included ${monthlyCredits} credits.`,
               })}
@@ -106,10 +99,10 @@ export function UsageDisplay({ tier, usage }: UsageDisplayProps) {
         )}
 
         {/* Free tier message */}
-        {tier === 'free' && (
+        {tier === "free" && (
           <Alert color="blue" variant="light">
             <Text size="sm">
-              {t('settings.planBilling.credits.freeTierInfo', {
+              {t("settings.planBilling.credits.freeTierInfo", {
                 freeCredits: BILLING_CONFIG.FREE_CREDITS_PER_MONTH,
                 teamCredits: BILLING_CONFIG.INCLUDED_CREDITS_PER_MONTH,
                 defaultValue: `Free plan includes ${BILLING_CONFIG.FREE_CREDITS_PER_MONTH} credits per month. Upgrade to Team for ${BILLING_CONFIG.INCLUDED_CREDITS_PER_MONTH} credits/month and pay-as-you-go overage billing.`,
diff --git a/frontend/src/desktop/components/shared/config/types.ts b/frontend/src/desktop/components/shared/config/types.ts
index 4f52474ae1..41080d45e4 100644
--- a/frontend/src/desktop/components/shared/config/types.ts
+++ b/frontend/src/desktop/components/shared/config/types.ts
@@ -1,9 +1,5 @@
-import { VALID_NAV_KEYS as CORE_NAV_KEYS } from '@core/components/shared/config/types';
+import { VALID_NAV_KEYS as CORE_NAV_KEYS } from "@core/components/shared/config/types";
 
-export const VALID_NAV_KEYS = [
-  ...CORE_NAV_KEYS,
-  'connectionMode',
-  'planBilling',
-] as const;
+export const VALID_NAV_KEYS = [...CORE_NAV_KEYS, "connectionMode", "planBilling"] as const;
 
-export type NavKey = typeof VALID_NAV_KEYS[number];
+export type NavKey = (typeof VALID_NAV_KEYS)[number];
diff --git a/frontend/src/desktop/components/shared/modals/CreditExhaustedModal.tsx b/frontend/src/desktop/components/shared/modals/CreditExhaustedModal.tsx
index 9f4cd08d4d..a44572ee0f 100644
--- a/frontend/src/desktop/components/shared/modals/CreditExhaustedModal.tsx
+++ b/frontend/src/desktop/components/shared/modals/CreditExhaustedModal.tsx
@@ -1,15 +1,15 @@
-import { Modal, Stack, Card, Text, Group, Badge, Button, Alert } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import TrendingUpIcon from '@mui/icons-material/TrendingUp';
-import { useSaaSBilling } from '@app/contexts/SaasBillingContext';
-import { useSaaSTeam } from '@app/contexts/SaaSTeamContext';
-import { BILLING_CONFIG, getCurrencySymbol, getFormattedOveragePrice } from '@app/config/billing';
-import { Z_INDEX_OVER_CONFIG_MODAL } from '@app/styles/zIndex';
-import { CreditUsageBanner } from '@app/components/shared/modals/CreditUsageBanner';
-import { FeatureListItem } from '@app/components/shared/modals/FeatureListItem';
-import { FREE_PLAN_FEATURES, TEAM_PLAN_FEATURES, ENTERPRISE_PLAN_FEATURES } from '@app/config/planFeatures';
-import { useSaaSCheckout } from '@app/contexts/SaaSCheckoutContext';
-import { useEnableMeteredBilling } from '@app/hooks/useEnableMeteredBilling';
+import { Modal, Stack, Card, Text, Group, Badge, Button, Alert } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import TrendingUpIcon from "@mui/icons-material/TrendingUp";
+import { useSaaSBilling } from "@app/contexts/SaasBillingContext";
+import { useSaaSTeam } from "@app/contexts/SaaSTeamContext";
+import { BILLING_CONFIG, getCurrencySymbol, getFormattedOveragePrice } from "@app/config/billing";
+import { Z_INDEX_OVER_CONFIG_MODAL } from "@app/styles/zIndex";
+import { CreditUsageBanner } from "@app/components/shared/modals/CreditUsageBanner";
+import { FeatureListItem } from "@app/components/shared/modals/FeatureListItem";
+import { FREE_PLAN_FEATURES, TEAM_PLAN_FEATURES, ENTERPRISE_PLAN_FEATURES } from "@app/config/planFeatures";
+import { useSaaSCheckout } from "@app/contexts/SaaSCheckoutContext";
+import { useEnableMeteredBilling } from "@app/hooks/useEnableMeteredBilling";
 
 interface CreditExhaustedModalProps {
   opened: boolean;
@@ -30,7 +30,7 @@ export function CreditExhaustedModal({ opened, onClose }: CreditExhaustedModalPr
   const { enablingMetering, meteringError, handleEnableMetering } = useEnableMeteredBilling(
     refreshBilling,
     onClose,
-    'CreditExhaustedModal'
+    "CreditExhaustedModal",
   );
 
   // Managed team members have unlimited credits via team
@@ -43,14 +43,17 @@ export function CreditExhaustedModal({ opened, onClose }: CreditExhaustedModalPr
         centered
         size="md"
         zIndex={Z_INDEX_OVER_CONFIG_MODAL}
-        title={t('credits.modal.managedMemberTitle', 'Unlimited Credits')}
+        title={t("credits.modal.managedMemberTitle", "Unlimited Credits")}
       >
         <Stack gap="md">
           <Text size="sm">
-            {t('credits.modal.managedMemberMessage', 'You have unlimited access to credits through your team. If you need assistance, please contact your team leader.')}
+            {t(
+              "credits.modal.managedMemberMessage",
+              "You have unlimited access to credits through your team. If you need assistance, please contact your team leader.",
+            )}
           </Text>
           <Button onClick={onClose} fullWidth>
-            {t('common.close', 'Close')}
+            {t("common.close", "Close")}
           </Button>
         </Stack>
       </Modal>
@@ -59,10 +62,9 @@ export function CreditExhaustedModal({ opened, onClose }: CreditExhaustedModalPr
 
   // Team users should enable overage billing
   // Only team leaders can enable metered billing, members see different UI
-  if (tier === 'team') {
-
-    const teamPlan = plans.get('team');
-    const teamCurrency = teamPlan?.currency ?? '$';
+  if (tier === "team") {
+    const teamPlan = plans.get("team");
+    const teamCurrency = teamPlan?.currency ?? "$";
     const overagePrice = teamPlan?.overagePrice ?? BILLING_CONFIG.OVERAGE_PRICE_PER_CREDIT;
     const formattedOveragePrice = getFormattedOveragePrice(teamCurrency, overagePrice);
 
@@ -80,31 +82,28 @@ export function CreditExhaustedModal({ opened, onClose }: CreditExhaustedModalPr
         title={
           <Stack gap="sm">
             <Text size="lg" fw={450}>
-              {t('credits.modal.titleExhaustedPro', 'You have run out of credits')}
+              {t("credits.modal.titleExhaustedPro", "You have run out of credits")}
             </Text>
             <Text size="sm" c="dimmed">
-              {t('credits.modal.subtitlePro', 'Enable automatic overage billing to never run out of credits.')}
+              {t("credits.modal.subtitlePro", "Enable automatic overage billing to never run out of credits.")}
             </Text>
           </Stack>
         }
         styles={{
-          body: { padding: '0rem 0rem 0.5rem 0rem' },
+          body: { padding: "0rem 0rem 0.5rem 0rem" },
           content: {
-            backgroundColor: 'light-dark(#FFFFFF, #1A1A1E)',
+            backgroundColor: "light-dark(#FFFFFF, #1A1A1E)",
           },
           header: {
-            backgroundColor: 'light-dark(#FFFFFF, #1A1A1E)',
+            backgroundColor: "light-dark(#FFFFFF, #1A1A1E)",
           },
           overlay: {
-            backgroundColor: 'light-dark(rgba(0,0,0,0.5), rgba(0,0,0,0.7))',
+            backgroundColor: "light-dark(rgba(0,0,0,0.5), rgba(0,0,0,0.7))",
           },
         }}
       >
         <Stack gap="lg">
-          <CreditUsageBanner
-            currentCredits={creditBalance}
-            totalCredits={BILLING_CONFIG.INCLUDED_CREDITS_PER_MONTH}
-          />
+          <CreditUsageBanner currentCredits={creditBalance} totalCredits={BILLING_CONFIG.INCLUDED_CREDITS_PER_MONTH} />
 
           {meteringError && (
             <Alert color="red" ml="lg" mr="lg">
@@ -120,21 +119,21 @@ export function CreditExhaustedModal({ opened, onClose }: CreditExhaustedModalPr
             ml="lg"
             mr="lg"
             style={{
-              borderColor: 'var(--color-primary-600)',
+              borderColor: "var(--color-primary-600)",
               borderWidth: 2,
-              backgroundColor: 'light-dark(#FFFFFF, #1A1A1E)',
+              backgroundColor: "light-dark(#FFFFFF, #1A1A1E)",
             }}
           >
             <Stack gap="md">
               <Group gap="xs" align="center">
-                <TrendingUpIcon sx={{ fontSize: 24, color: 'var(--color-primary-600)' }} />
+                <TrendingUpIcon sx={{ fontSize: 24, color: "var(--color-primary-600)" }} />
                 <Text size="lg" fw={600}>
-                  {t('credits.modal.meteringTitle', 'Pay-What-You-Use Overage Billing')}
+                  {t("credits.modal.meteringTitle", "Pay-What-You-Use Overage Billing")}
                 </Text>
               </Group>
 
               <Text size="sm" c="dimmed">
-                {t('credits.modal.meteringExplanation', {
+                {t("credits.modal.meteringExplanation", {
                   credits: BILLING_CONFIG.INCLUDED_CREDITS_PER_MONTH,
                   defaultValue: `Your Team plan includes ${BILLING_CONFIG.INCLUDED_CREDITS_PER_MONTH} credits per month. When you run out, overage billing automatically provides additional credits so you never have to stop working.`,
                 })}
@@ -142,24 +141,24 @@ export function CreditExhaustedModal({ opened, onClose }: CreditExhaustedModalPr
 
               <Stack gap="xs">
                 <FeatureListItem included>
-                  {t('credits.modal.meteringIncluded', {
+                  {t("credits.modal.meteringIncluded", {
                     credits: BILLING_CONFIG.INCLUDED_CREDITS_PER_MONTH,
                     defaultValue: `${BILLING_CONFIG.INCLUDED_CREDITS_PER_MONTH} credits/month included with Team`,
                   })}
                 </FeatureListItem>
                 <FeatureListItem included>
-                  {t('credits.modal.meteringPrice', 'Additional credits at {{price}}/credit', {
+                  {t("credits.modal.meteringPrice", "Additional credits at {{price}}/credit", {
                     price: formattedOveragePrice,
                   })}
                 </FeatureListItem>
                 <FeatureListItem included>
-                  {t('credits.modal.meteringPayAsYouGo', 'Only pay for what you use')}
+                  {t("credits.modal.meteringPayAsYouGo", "Only pay for what you use")}
                 </FeatureListItem>
                 <FeatureListItem included>
-                  {t('credits.modal.meteringNoCommitment', 'No commitment, cancel anytime')}
+                  {t("credits.modal.meteringNoCommitment", "No commitment, cancel anytime")}
                 </FeatureListItem>
                 <FeatureListItem included>
-                  {t('credits.modal.meteringNeverRunOut', 'Never run out of credits')}
+                  {t("credits.modal.meteringNeverRunOut", "Never run out of credits")}
                 </FeatureListItem>
               </Stack>
 
@@ -167,12 +166,15 @@ export function CreditExhaustedModal({ opened, onClose }: CreditExhaustedModalPr
                 padding="md"
                 radius="md"
                 style={{
-                  backgroundColor: 'light-dark(#F8F9FA, #1A1A1E)',
-                  border: '1px solid var(--border-subtle)',
+                  backgroundColor: "light-dark(#F8F9FA, #1A1A1E)",
+                  border: "1px solid var(--border-subtle)",
                 }}
               >
                 <Text size="xs" c="dimmed">
-                  {t('credits.modal.meteringBillingNote', 'Overage credits are billed monthly alongside your Team subscription. Track your usage anytime in your account settings.')}
+                  {t(
+                    "credits.modal.meteringBillingNote",
+                    "Overage credits are billed monthly alongside your Team subscription. Track your usage anytime in your account settings.",
+                  )}
                 </Text>
               </Card>
             </Stack>
@@ -193,15 +195,15 @@ export function CreditExhaustedModal({ opened, onClose }: CreditExhaustedModalPr
                 fontWeight: 600,
               }}
             >
-              {t('credits.enableOverageBilling', 'Enable Overage Billing')}
+              {t("credits.enableOverageBilling", "Enable Overage Billing")}
             </Button>
             {!isTeamLeader && (
               <Text size="xs" c="dimmed" ta="center">
-                {t('credits.modal.teamLeaderOnly', 'Only team leaders can enable overage billing')}
+                {t("credits.modal.teamLeaderOnly", "Only team leaders can enable overage billing")}
               </Text>
             )}
             <Button onClick={onClose} variant="subtle" fullWidth size="md" c="dimmed" disabled={enablingMetering}>
-              {t('credits.maybeLater', 'Maybe later')}
+              {t("credits.maybeLater", "Maybe later")}
             </Button>
           </Stack>
         </Stack>
@@ -210,9 +212,9 @@ export function CreditExhaustedModal({ opened, onClose }: CreditExhaustedModalPr
   }
 
   // Free tier users - show upgrade modal
-  const teamPlan = plans.get('team');
+  const teamPlan = plans.get("team");
   const teamPrice = teamPlan?.price ?? 20;
-  const teamCurrency = teamPlan?.currency ?? '$';
+  const teamCurrency = teamPlan?.currency ?? "$";
   const overagePrice = teamPlan?.overagePrice ?? BILLING_CONFIG.OVERAGE_PRICE_PER_CREDIT;
 
   const currencySymbol = getCurrencySymbol(teamCurrency);
@@ -232,31 +234,28 @@ export function CreditExhaustedModal({ opened, onClose }: CreditExhaustedModalPr
       title={
         <Stack gap="sm">
           <Text size="lg" fw={450}>
-            {t('credits.modal.titleExhausted', "You've used your free credits")}
+            {t("credits.modal.titleExhausted", "You've used your free credits")}
           </Text>
           <Text size="sm" c="dimmed">
-            {t('credits.modal.subtitle', 'Upgrade to Team for 10x the credits and faster processing.')}
+            {t("credits.modal.subtitle", "Upgrade to Team for 10x the credits and faster processing.")}
           </Text>
         </Stack>
       }
       styles={{
-        body: { padding: '0rem 0rem 0.5rem 0rem' },
+        body: { padding: "0rem 0rem 0.5rem 0rem" },
         content: {
-          backgroundColor: 'light-dark(#FFFFFF, #1A1A1E)',
+          backgroundColor: "light-dark(#FFFFFF, #1A1A1E)",
         },
         header: {
-          backgroundColor: 'light-dark(#FFFFFF, #1A1A1E)',
+          backgroundColor: "light-dark(#FFFFFF, #1A1A1E)",
         },
         overlay: {
-          backgroundColor: 'light-dark(rgba(0,0,0,0.5), rgba(0,0,0,0.7))',
+          backgroundColor: "light-dark(rgba(0,0,0,0.5), rgba(0,0,0,0.7))",
         },
       }}
     >
       <Stack gap="lg">
-        <CreditUsageBanner
-          currentCredits={creditBalance}
-          totalCredits={BILLING_CONFIG.FREE_CREDITS_PER_MONTH}
-        />
+        <CreditUsageBanner currentCredits={creditBalance} totalCredits={BILLING_CONFIG.FREE_CREDITS_PER_MONTH} />
 
         <Group gap="md" ml="lg" mr="lg" align="stretch" grow>
           {/* Free Plan Card */}
@@ -265,33 +264,33 @@ export function CreditExhaustedModal({ opened, onClose }: CreditExhaustedModalPr
             radius="md"
             withBorder
             style={{
-              borderColor: 'var(--border-default)',
+              borderColor: "var(--border-default)",
               borderWidth: 1,
               opacity: 0.85,
-              backgroundColor: 'light-dark(#FFFFFF, #1A1A1E)',
+              backgroundColor: "light-dark(#FFFFFF, #1A1A1E)",
             }}
           >
-            <Stack gap="md" style={{ height: '100%' }}>
+            <Stack gap="md" style={{ height: "100%" }}>
               <div>
                 <Text size="lg" fw={600} mb="xs">
-                  {t('credits.modal.freeTier', 'Free Tier')}
+                  {t("credits.modal.freeTier", "Free Tier")}
                 </Text>
                 <Group gap="xs" align="baseline">
                   <Text size="1.75rem" fw={700}>
                     {currencySymbol}0
                   </Text>
                   <Text size="sm" c="dimmed">
-                    {t('credits.modal.perMonth', '/month')}
+                    {t("credits.modal.perMonth", "/month")}
                   </Text>
                 </Group>
                 <Text size="sm" c="dimmed" mt="xs">
-                  {BILLING_CONFIG.FREE_CREDITS_PER_MONTH} {t('credits.modal.monthlyCredits', 'monthly credits')}
+                  {BILLING_CONFIG.FREE_CREDITS_PER_MONTH} {t("credits.modal.monthlyCredits", "monthly credits")}
                 </Text>
               </div>
 
               <Stack gap="xs" style={{ flex: 1 }}>
                 <Text size="sm" fw={500} mb="xs">
-                  {t('credits.modal.forRegularWork', 'For regular PDF work:')}
+                  {t("credits.modal.forRegularWork", "For regular PDF work:")}
                 </Text>
                 {FREE_PLAN_FEATURES.map((feature, index) => (
                   <FeatureListItem key={index} included color="var(--mantine-color-gray-6)">
@@ -308,12 +307,12 @@ export function CreditExhaustedModal({ opened, onClose }: CreditExhaustedModalPr
                 radius="lg"
                 style={{
                   fontWeight: 600,
-                  background: 'transparent',
-                  border: 'none',
-                  cursor: 'default',
+                  background: "transparent",
+                  border: "none",
+                  cursor: "default",
                 }}
               >
-                {t('credits.modal.current', 'Current Plan')}
+                {t("credits.modal.current", "Current Plan")}
               </Button>
             </Stack>
           </Card>
@@ -324,65 +323,66 @@ export function CreditExhaustedModal({ opened, onClose }: CreditExhaustedModalPr
             radius="md"
             withBorder
             style={{
-              borderColor: 'var(--card-selected-border)',
+              borderColor: "var(--card-selected-border)",
               borderWidth: 2,
-              cursor: 'pointer',
-              transition: 'all 0.2s ease',
-              position: 'relative',
-              boxShadow: '0 2px 8px rgba(59, 130, 246, 0.1)',
-              overflow: 'visible',
-              backgroundColor: 'light-dark(#FFFFFF, #1A1A1E)',
+              cursor: "pointer",
+              transition: "all 0.2s ease",
+              position: "relative",
+              boxShadow: "0 2px 8px rgba(59, 130, 246, 0.1)",
+              overflow: "visible",
+              backgroundColor: "light-dark(#FFFFFF, #1A1A1E)",
             }}
-            onClick={() => openCheckout('pro')}
+            onClick={() => openCheckout("pro")}
             onMouseEnter={(e) => {
-              e.currentTarget.style.transform = 'translateY(-4px)';
-              e.currentTarget.style.boxShadow = '0 12px 48px rgba(59, 130, 246, 0.3)';
+              e.currentTarget.style.transform = "translateY(-4px)";
+              e.currentTarget.style.boxShadow = "0 12px 48px rgba(59, 130, 246, 0.3)";
             }}
             onMouseLeave={(e) => {
-              e.currentTarget.style.transform = 'translateY(0)';
-              e.currentTarget.style.boxShadow = '0 2px 8px rgba(59, 130, 246, 0.1)';
+              e.currentTarget.style.transform = "translateY(0)";
+              e.currentTarget.style.boxShadow = "0 2px 8px rgba(59, 130, 246, 0.1)";
             }}
           >
             <Badge
               size="sm"
               style={{
-                position: 'absolute',
+                position: "absolute",
                 top: -10,
-                left: '50%',
-                transform: 'translateX(-50%)',
-                background: 'rgb(59, 130, 246)',
-                color: 'white',
+                left: "50%",
+                transform: "translateX(-50%)",
+                background: "rgb(59, 130, 246)",
+                color: "white",
                 fontWeight: 600,
-                textTransform: 'uppercase',
-                letterSpacing: '0.5px',
-                paddingLeft: '12px',
-                paddingRight: '12px',
+                textTransform: "uppercase",
+                letterSpacing: "0.5px",
+                paddingLeft: "12px",
+                paddingRight: "12px",
               }}
             >
-              {t('credits.modal.popular', 'Popular')}
+              {t("credits.modal.popular", "Popular")}
             </Badge>
-            <Stack gap="md" style={{ height: '100%' }}>
+            <Stack gap="md" style={{ height: "100%" }}>
               <div>
                 <Text size="lg" fw={600} mb="xs">
-                  {t('credits.modal.teamSubscription', 'Team')}
+                  {t("credits.modal.teamSubscription", "Team")}
                 </Text>
                 <Group gap="xs" align="baseline" mt="xs">
-                  <Text size="1.75rem" fw={700} style={{ color: 'var(--text-primary)' }}>
+                  <Text size="1.75rem" fw={700} style={{ color: "var(--text-primary)" }}>
                     {currencySymbol}
                     {teamPrice}
                   </Text>
                   <Text size="sm" c="dimmed">
-                    {t('credits.modal.perMonth', '/month')}
+                    {t("credits.modal.perMonth", "/month")}
                   </Text>
                 </Group>
                 <Text size="sm" c="dimmed" mt="xs">
-                  {BILLING_CONFIG.INCLUDED_CREDITS_PER_MONTH} {t('credits.modal.monthlyCredits', 'monthly credits')} + {formattedOveragePrice}/{t('credits.modal.overage', 'overage')}
+                  {BILLING_CONFIG.INCLUDED_CREDITS_PER_MONTH} {t("credits.modal.monthlyCredits", "monthly credits")} +{" "}
+                  {formattedOveragePrice}/{t("credits.modal.overage", "overage")}
                 </Text>
               </div>
 
               <Stack gap="xs" style={{ flex: 1 }}>
                 <Text size="sm" fw={500} mb="xs">
-                  {t('credits.modal.everythingInFree', 'Everything in Free, plus:')}
+                  {t("credits.modal.everythingInFree", "Everything in Free, plus:")}
                 </Text>
                 {TEAM_PLAN_FEATURES.map((feature, index) => (
                   <FeatureListItem key={index} included>
@@ -392,7 +392,7 @@ export function CreditExhaustedModal({ opened, onClose }: CreditExhaustedModalPr
               </Stack>
 
               <Button
-                onClick={() => openCheckout('pro')}
+                onClick={() => openCheckout("pro")}
                 variant="filled"
                 color="blue"
                 fullWidth
@@ -402,7 +402,7 @@ export function CreditExhaustedModal({ opened, onClose }: CreditExhaustedModalPr
                   fontWeight: 600,
                 }}
               >
-                {t('credits.upgrade', 'Upgrade')}
+                {t("credits.upgrade", "Upgrade")}
               </Button>
             </Stack>
           </Card>
@@ -414,25 +414,25 @@ export function CreditExhaustedModal({ opened, onClose }: CreditExhaustedModalPr
             withBorder
             style={{
               borderWidth: 1,
-              backgroundColor: 'light-dark(#FFFFFF, #1A1A1E)',
+              backgroundColor: "light-dark(#FFFFFF, #1A1A1E)",
             }}
           >
-            <Stack gap="md" style={{ height: '100%' }}>
+            <Stack gap="md" style={{ height: "100%" }}>
               <div>
                 <Text size="md" fw={600} mb="xs">
-                  {t('credits.modal.enterpriseSubscription', 'Enterprise')}
+                  {t("credits.modal.enterpriseSubscription", "Enterprise")}
                 </Text>
                 <Text size="1.75rem" fw={600}>
-                  {t('credits.modal.customPricing', 'Custom')}
+                  {t("credits.modal.customPricing", "Custom")}
                 </Text>
                 <Text size="sm" c="dimmed" mt="xs">
-                  {t('credits.modal.unlimitedMonthlyCredits', 'Site License')}
+                  {t("credits.modal.unlimitedMonthlyCredits", "Site License")}
                 </Text>
               </div>
 
               <Stack gap="xs" style={{ flex: 1 }}>
                 <Text size="sm" fw={500} mb="xs">
-                  {t('credits.modal.everythingInCredits', 'Everything in Credits, plus:')}
+                  {t("credits.modal.everythingInCredits", "Everything in Credits, plus:")}
                 </Text>
                 {ENTERPRISE_PLAN_FEATURES.map((feature, index) => (
                   <FeatureListItem key={index} included>
@@ -449,34 +449,34 @@ export function CreditExhaustedModal({ opened, onClose }: CreditExhaustedModalPr
                 size="md"
                 radius="lg"
                 style={{
-                  borderColor: 'var(--text-primary)',
-                  color: 'var(--text-primary)',
+                  borderColor: "var(--text-primary)",
+                  color: "var(--text-primary)",
                   fontWeight: 600,
                 }}
               >
-                {t('credits.modal.contactSales', 'Contact Sales')}
+                {t("credits.modal.contactSales", "Contact Sales")}
               </Button>
             </Stack>
           </Card>
         </Group>
 
         <Text size="sm" ta="center" c="dimmed" mt="md">
-          {t('credits.modal.selfHostPrompt', 'Want to self host?')}{' '}
+          {t("credits.modal.selfHostPrompt", "Want to self host?")}{" "}
           <Text
             component="a"
             href="https://www.stirling.com/pricing"
             target="_blank"
             rel="noopener noreferrer"
             size="sm"
-            style={{ color: 'var(--mantine-color-blue-6)', textDecoration: 'none' }}
+            style={{ color: "var(--mantine-color-blue-6)", textDecoration: "none" }}
             onMouseEnter={(e) => {
-              e.currentTarget.style.textDecoration = 'underline';
+              e.currentTarget.style.textDecoration = "underline";
             }}
             onMouseLeave={(e) => {
-              e.currentTarget.style.textDecoration = 'none';
+              e.currentTarget.style.textDecoration = "none";
             }}
           >
-            {t('credits.modal.selfHostLink', 'Review the docs and plans')}
+            {t("credits.modal.selfHostLink", "Review the docs and plans")}
           </Text>
         </Text>
       </Stack>
diff --git a/frontend/src/desktop/components/shared/modals/CreditModalBootstrap.tsx b/frontend/src/desktop/components/shared/modals/CreditModalBootstrap.tsx
index e83e1714a9..0d8fdce32f 100644
--- a/frontend/src/desktop/components/shared/modals/CreditModalBootstrap.tsx
+++ b/frontend/src/desktop/components/shared/modals/CreditModalBootstrap.tsx
@@ -1,11 +1,11 @@
-import { useEffect, useState } from 'react';
-import { useSaaSBilling } from '@app/contexts/SaasBillingContext';
-import { useSaaSMode } from '@app/hooks/useSaaSMode';
-import { BILLING_CONFIG } from '@app/config/billing';
-import { CreditExhaustedModal } from '@app/components/shared/modals/CreditExhaustedModal';
-import { InsufficientCreditsModal } from '@app/components/shared/modals/InsufficientCreditsModal';
-import { useCreditEvents } from '@app/hooks/useCreditEvents';
-import { CREDIT_EVENTS } from '@app/constants/creditEvents';
+import { useEffect, useState } from "react";
+import { useSaaSBilling } from "@app/contexts/SaasBillingContext";
+import { useSaaSMode } from "@app/hooks/useSaaSMode";
+import { BILLING_CONFIG } from "@app/config/billing";
+import { CreditExhaustedModal } from "@app/components/shared/modals/CreditExhaustedModal";
+import { InsufficientCreditsModal } from "@app/components/shared/modals/InsufficientCreditsModal";
+import { useCreditEvents } from "@app/hooks/useCreditEvents";
+import { CREDIT_EVENTS } from "@app/constants/creditEvents";
 
 /**
  * Desktop Credit Modal Bootstrap
@@ -27,7 +27,13 @@ export function CreditModalBootstrap() {
   // Fires once: only when in SaaS mode, billing has loaded (lastFetchTime set) and plans haven't been
   // fetched yet (plansLastFetchTime null). This way the modal shows real prices instantly.
   useEffect(() => {
-    if (isSaaSMode && lastFetchTime !== null && plansLastFetchTime === null && creditBalance < BILLING_CONFIG.PLAN_PRICING_PRELOAD_THRESHOLD && !isManagedTeamMember) {
+    if (
+      isSaaSMode &&
+      lastFetchTime !== null &&
+      plansLastFetchTime === null &&
+      creditBalance < BILLING_CONFIG.PLAN_PRICING_PRELOAD_THRESHOLD &&
+      !isManagedTeamMember
+    ) {
       refreshPlans();
     }
   }, [isSaaSMode, lastFetchTime, plansLastFetchTime, creditBalance, isManagedTeamMember, refreshPlans]);
@@ -70,10 +76,7 @@ export function CreditModalBootstrap() {
 
   return (
     <>
-      <CreditExhaustedModal
-        opened={exhaustedOpen && !insufficientOpen}
-        onClose={() => setExhaustedOpen(false)}
-      />
+      <CreditExhaustedModal opened={exhaustedOpen && !insufficientOpen} onClose={() => setExhaustedOpen(false)} />
       <InsufficientCreditsModal
         opened={insufficientOpen}
         onClose={() => setInsufficientOpen(false)}
diff --git a/frontend/src/desktop/components/shared/modals/CreditUsageBanner.tsx b/frontend/src/desktop/components/shared/modals/CreditUsageBanner.tsx
index 04e27a8790..e689e144f4 100644
--- a/frontend/src/desktop/components/shared/modals/CreditUsageBanner.tsx
+++ b/frontend/src/desktop/components/shared/modals/CreditUsageBanner.tsx
@@ -1,5 +1,5 @@
-import { Divider, Group, Text, Progress, Stack } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
+import { Divider, Group, Text, Progress, Stack } from "@mantine/core";
+import { useTranslation } from "react-i18next";
 
 interface CreditUsageBannerProps {
   currentCredits: number;
@@ -20,10 +20,10 @@ export function CreditUsageBanner({ currentCredits, totalCredits }: CreditUsageB
       <Stack gap="xs" pr="md" pl="md">
         <Group gap="xs" justify="space-between" align="center">
           <Text size="md" fw={400} c="dimmed">
-            {t('credits.modal.creditsThisMonth', 'Monthly credits')}
+            {t("credits.modal.creditsThisMonth", "Monthly credits")}
           </Text>
-          <Text size="md" fw={600} style={{ color: 'var(--text-primary)' }}>
-            {t('credits.modal.creditsRemaining', '{{current}} of {{total}} remaining', {
+          <Text size="md" fw={600} style={{ color: "var(--text-primary)" }}>
+            {t("credits.modal.creditsRemaining", "{{current}} of {{total}} remaining", {
               current: currentCredits,
               total: totalCredits,
             })}
@@ -35,7 +35,7 @@ export function CreditUsageBanner({ currentCredits, totalCredits }: CreditUsageB
           radius="xl"
           color="blue"
           styles={{
-            root: { backgroundColor: 'var(--bg-raised)' },
+            root: { backgroundColor: "var(--bg-raised)" },
           }}
         />
       </Stack>
diff --git a/frontend/src/desktop/components/shared/modals/FeatureListItem.tsx b/frontend/src/desktop/components/shared/modals/FeatureListItem.tsx
index fc3f2e474f..d4987b22c3 100644
--- a/frontend/src/desktop/components/shared/modals/FeatureListItem.tsx
+++ b/frontend/src/desktop/components/shared/modals/FeatureListItem.tsx
@@ -1,6 +1,6 @@
-import { Group, Text } from '@mantine/core';
-import CheckCircleIcon from '@mui/icons-material/Check';
-import CloseIcon from '@mui/icons-material/Close';
+import { Group, Text } from "@mantine/core";
+import CheckCircleIcon from "@mui/icons-material/Check";
+import CloseIcon from "@mui/icons-material/Close";
 
 interface FeatureListItemProps {
   children: React.ReactNode;
@@ -8,26 +8,26 @@ interface FeatureListItemProps {
   color?: string;
   dimmed?: boolean;
   fw?: number;
-  size?: 'xs' | 'sm' | 'md' | 'lg' | string;
+  size?: "xs" | "sm" | "md" | "lg" | string;
 }
 
 export function FeatureListItem({
   children,
   included,
-  color = 'var(--color-primary-600)',
+  color = "var(--color-primary-600)",
   dimmed = false,
   fw = 400,
-  size = 'sm'
+  size = "sm",
 }: FeatureListItemProps) {
   const Icon = included ? CheckCircleIcon : CloseIcon;
-  const iconColor = included ? color : 'var(--color-red-600)';
+  const iconColor = included ? color : "var(--color-red-600)";
 
   // Map Mantine sizes to icon font sizes
   const iconSizeMap: Record<string, number> = {
     xs: 14,
     sm: 16,
     md: 18,
-    lg: 20
+    lg: 20,
   };
 
   // Determine icon size - use mapped value if it exists, otherwise use the string directly
@@ -38,10 +38,8 @@ export function FeatureListItem({
 
   return (
     <Group gap="xs" wrap="nowrap" align="flex-start">
-      <Icon
-        sx={{ fontSize: iconSize, color: iconColor, flexShrink: 0, marginTop: '2px' }}
-      />
-      <Text size={textSize} c={dimmed ? 'dimmed' : undefined} fw={fw} style={textSize ? undefined : { fontSize: size }}>
+      <Icon sx={{ fontSize: iconSize, color: iconColor, flexShrink: 0, marginTop: "2px" }} />
+      <Text size={textSize} c={dimmed ? "dimmed" : undefined} fw={fw} style={textSize ? undefined : { fontSize: size }}>
         {children}
       </Text>
     </Group>
diff --git a/frontend/src/desktop/components/shared/modals/InsufficientCreditsModal.tsx b/frontend/src/desktop/components/shared/modals/InsufficientCreditsModal.tsx
index 1a07b05475..a8d2464c22 100644
--- a/frontend/src/desktop/components/shared/modals/InsufficientCreditsModal.tsx
+++ b/frontend/src/desktop/components/shared/modals/InsufficientCreditsModal.tsx
@@ -1,11 +1,11 @@
-import { Modal, Stack, Text, Button, Alert, Group } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { useSaaSBilling } from '@app/contexts/SaasBillingContext';
-import { useSaaSTeam } from '@app/contexts/SaaSTeamContext';
-import { Z_INDEX_OVER_CONFIG_MODAL } from '@app/styles/zIndex';
-import { useSaaSCheckout } from '@app/contexts/SaaSCheckoutContext';
-import WarningIcon from '@mui/icons-material/Warning';
-import { useEnableMeteredBilling } from '@app/hooks/useEnableMeteredBilling';
+import { Modal, Stack, Text, Button, Alert, Group } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { useSaaSBilling } from "@app/contexts/SaasBillingContext";
+import { useSaaSTeam } from "@app/contexts/SaaSTeamContext";
+import { Z_INDEX_OVER_CONFIG_MODAL } from "@app/styles/zIndex";
+import { useSaaSCheckout } from "@app/contexts/SaaSCheckoutContext";
+import WarningIcon from "@mui/icons-material/Warning";
+import { useEnableMeteredBilling } from "@app/hooks/useEnableMeteredBilling";
 
 interface InsufficientCreditsModalProps {
   opened: boolean;
@@ -18,12 +18,7 @@ interface InsufficientCreditsModalProps {
  * Desktop Insufficient Credits Modal
  * Shows when user attempts operation without enough credits
  */
-export function InsufficientCreditsModal({
-  opened,
-  onClose,
-  toolId,
-  requiredCredits,
-}: InsufficientCreditsModalProps) {
+export function InsufficientCreditsModal({ opened, onClose, toolId, requiredCredits }: InsufficientCreditsModalProps) {
   const { t } = useTranslation();
   const { creditBalance, tier, refreshBilling, isManagedTeamMember } = useSaaSBilling();
   const { isTeamLeader } = useSaaSTeam();
@@ -32,10 +27,10 @@ export function InsufficientCreditsModal({
   const { enablingMetering, meteringError, handleEnableMetering } = useEnableMeteredBilling(
     refreshBilling,
     onClose,
-    'InsufficientCreditsModal'
+    "InsufficientCreditsModal",
   );
 
-  const toolName = toolId ? t(`tool.${toolId}.name`, toolId) : t('common.operation', 'this operation');
+  const toolName = toolId ? t(`tool.${toolId}.name`, toolId) : t("common.operation", "this operation");
 
   return (
     <Modal
@@ -47,9 +42,9 @@ export function InsufficientCreditsModal({
       zIndex={Z_INDEX_OVER_CONFIG_MODAL}
       title={
         <Group gap="xs">
-          <WarningIcon sx={{ fontSize: 24, color: 'var(--mantine-color-orange-6)' }} />
+          <WarningIcon sx={{ fontSize: 24, color: "var(--mantine-color-orange-6)" }} />
           <Text size="lg" fw={500}>
-            {t('credits.insufficient.title', 'Insufficient Credits')}
+            {t("credits.insufficient.title", "Insufficient Credits")}
           </Text>
         </Group>
       }
@@ -59,21 +54,21 @@ export function InsufficientCreditsModal({
           <Text size="sm">
             {requiredCredits
               ? t(
-                  'credits.insufficient.messageWithAmount',
-                  'You need {{required}} credits to run {{tool}}, but you only have {{current}}.',
+                  "credits.insufficient.messageWithAmount",
+                  "You need {{required}} credits to run {{tool}}, but you only have {{current}}.",
                   {
                     required: requiredCredits,
                     tool: toolName,
                     current: creditBalance,
-                  }
+                  },
                 )
               : t(
-                  'credits.insufficient.message',
-                  'You do not have enough credits to run {{tool}}. You currently have {{current}} credits.',
+                  "credits.insufficient.message",
+                  "You do not have enough credits to run {{tool}}. You currently have {{current}} credits.",
                   {
                     tool: toolName,
                     current: creditBalance,
-                  }
+                  },
                 )}
           </Text>
         </Alert>
@@ -81,28 +76,18 @@ export function InsufficientCreditsModal({
         {isManagedTeamMember ? (
           <>
             <Text size="sm" c="dimmed">
-              {t(
-                'credits.insufficient.managedMember',
-                'Please contact your team leader for assistance.'
-              )}
+              {t("credits.insufficient.managedMember", "Please contact your team leader for assistance.")}
             </Text>
             <Button onClick={onClose} fullWidth>
-              {t('common.close', 'Close')}
+              {t("common.close", "Close")}
             </Button>
           </>
-        ) : tier === 'team' ? (
+        ) : tier === "team" ? (
           <>
             <Text size="sm" c="dimmed">
-              {t(
-                'credits.insufficient.teamMember',
-                'Enable overage billing to never run out of credits.'
-              )}
+              {t("credits.insufficient.teamMember", "Enable overage billing to never run out of credits.")}
             </Text>
-            {meteringError && (
-              <Alert color="red">
-                {meteringError}
-              </Alert>
-            )}
+            {meteringError && <Alert color="red">{meteringError}</Alert>}
             <Button
               variant="filled"
               color="blue"
@@ -111,38 +96,35 @@ export function InsufficientCreditsModal({
               loading={enablingMetering}
               disabled={!isTeamLeader}
             >
-              {t('credits.enableOverageBilling', 'Enable Overage Billing')}
+              {t("credits.enableOverageBilling", "Enable Overage Billing")}
             </Button>
             {!isTeamLeader && (
               <Text size="xs" c="dimmed" ta="center">
-                {t('credits.modal.teamLeaderOnly', 'Only team leaders can enable overage billing')}
+                {t("credits.modal.teamLeaderOnly", "Only team leaders can enable overage billing")}
               </Text>
             )}
             <Button onClick={onClose} variant="subtle" fullWidth disabled={enablingMetering}>
-              {t('common.cancel', 'Cancel')}
+              {t("common.cancel", "Cancel")}
             </Button>
           </>
         ) : (
           <>
             <Text size="sm" c="dimmed">
-              {t(
-                'credits.insufficient.freeTier',
-                'Upgrade to Team for 10x more credits and unlimited overage billing.'
-              )}
+              {t("credits.insufficient.freeTier", "Upgrade to Team for 10x more credits and unlimited overage billing.")}
             </Text>
             <Button
               variant="filled"
               color="blue"
               fullWidth
               onClick={() => {
-                openCheckout('pro');
+                openCheckout("pro");
                 onClose();
               }}
             >
-              {t('credits.upgrade', 'Upgrade to Team')}
+              {t("credits.upgrade", "Upgrade to Team")}
             </Button>
             <Button onClick={onClose} variant="subtle" fullWidth>
-              {t('common.cancel', 'Cancel')}
+              {t("common.cancel", "Cancel")}
             </Button>
           </>
         )}
diff --git a/frontend/src/desktop/components/tools/toolPicker/ToolButton.tsx b/frontend/src/desktop/components/tools/toolPicker/ToolButton.tsx
index b59df1edbb..6728f94174 100644
--- a/frontend/src/desktop/components/tools/toolPicker/ToolButton.tsx
+++ b/frontend/src/desktop/components/tools/toolPicker/ToolButton.tsx
@@ -1,11 +1,11 @@
-import { useState, useEffect } from 'react';
-import CoreToolButton from '@core/components/tools/toolPicker/ToolButton';
-import { getToolDisabledReason } from '@app/components/tools/fullscreen/shared';
-import { useToolWorkflow } from '@app/contexts/ToolWorkflowContext';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
-import { ToolRegistryEntry } from '@app/data/toolsTaxonomy';
-import { connectionModeService, type ConnectionMode } from '@app/services/connectionModeService';
-import type { ToolId } from '@app/types/toolId';
+import { useState, useEffect } from "react";
+import CoreToolButton from "@core/components/tools/toolPicker/ToolButton";
+import { getToolDisabledReason } from "@app/components/tools/fullscreen/shared";
+import { useToolWorkflow } from "@app/contexts/ToolWorkflowContext";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
+import { ToolRegistryEntry } from "@app/data/toolsTaxonomy";
+import { connectionModeService, type ConnectionMode } from "@app/services/connectionModeService";
+import type { ToolId } from "@app/types/toolId";
 
 type CoreToolButtonProps = React.ComponentProps<typeof CoreToolButton>;
 
@@ -31,7 +31,7 @@ const ToolButton: React.FC<CoreToolButtonProps> = (props) => {
     props.id as string,
     props.tool as ToolRegistryEntry,
     toolAvailability,
-    premiumEnabled
+    premiumEnabled,
   );
 
   // In local mode, pass a handler so CoreToolButton renders the tool as "cloud-available"
@@ -39,9 +39,7 @@ const ToolButton: React.FC<CoreToolButtonProps> = (props) => {
   // user can see the settings; the disabled execute button handles the sign-in prompt.
   // comingSoon and selfHostedOffline tools remain dimmed — they have no usable UI to show.
   const handleUnavailableClick =
-    connectionMode === 'local' &&
-    disabledReason !== 'comingSoon' &&
-    disabledReason !== 'selfHostedOffline'
+    connectionMode === "local" && disabledReason !== "comingSoon" && disabledReason !== "selfHostedOffline"
       ? () => handleToolSelectForced(props.id as ToolId)
       : undefined;
 
diff --git a/frontend/src/desktop/components/tools/toolPicker/ToolPickerFooterExtensions.tsx b/frontend/src/desktop/components/tools/toolPicker/ToolPickerFooterExtensions.tsx
index fa1418e90f..5101a1c9ba 100644
--- a/frontend/src/desktop/components/tools/toolPicker/ToolPickerFooterExtensions.tsx
+++ b/frontend/src/desktop/components/tools/toolPicker/ToolPickerFooterExtensions.tsx
@@ -1,8 +1,8 @@
-import { useState, useEffect } from 'react';
-import { Group, Text, Button } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { connectionModeService, type ConnectionMode } from '@app/services/connectionModeService';
-import { OPEN_SIGN_IN_EVENT } from '@app/constants/signInEvents';
+import { useState, useEffect } from "react";
+import { Group, Text, Button } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { connectionModeService, type ConnectionMode } from "@app/services/connectionModeService";
+import { OPEN_SIGN_IN_EVENT } from "@app/constants/signInEvents";
 
 /**
  * Desktop-only footer shown at the bottom of the tool list.
@@ -21,7 +21,7 @@ export function ToolPickerFooterExtensions() {
     return unsubscribe;
   }, []);
 
-  if (connectionMode !== 'local') return null;
+  if (connectionMode !== "local") return null;
 
   return (
     <Group
@@ -32,13 +32,13 @@ export function ToolPickerFooterExtensions() {
       px="sm"
       py={10}
       style={{
-        borderTop: '1px solid var(--border-default)',
-        background: 'var(--bg-toolbar)',
+        borderTop: "1px solid var(--border-default)",
+        background: "var(--bg-toolbar)",
         flexShrink: 0,
       }}
     >
       <Text size="xs" c="dimmed" style={{ flex: 1, minWidth: 0 }}>
-        {t('localMode.toolPicker.message', 'Sign in to unlock all tools.')}
+        {t("localMode.toolPicker.message", "Sign in to unlock all tools.")}
       </Text>
       <Button
         size="compact-xs"
@@ -47,7 +47,7 @@ export function ToolPickerFooterExtensions() {
         style={{ flexShrink: 0 }}
         onClick={() => window.dispatchEvent(new CustomEvent(OPEN_SIGN_IN_EVENT))}
       >
-        {t('localMode.toolPicker.signIn', 'Sign In')}
+        {t("localMode.toolPicker.signIn", "Sign In")}
       </Button>
     </Group>
   );
diff --git a/frontend/src/desktop/components/viewer/PrintAPIBridge.tsx b/frontend/src/desktop/components/viewer/PrintAPIBridge.tsx
index ec6ca75d70..bdb845e7fe 100644
--- a/frontend/src/desktop/components/viewer/PrintAPIBridge.tsx
+++ b/frontend/src/desktop/components/viewer/PrintAPIBridge.tsx
@@ -1,9 +1,9 @@
-import { useEffect } from 'react';
-import { usePrintCapability } from '@embedpdf/plugin-print/react';
-import { useViewer } from '@app/contexts/ViewerContext';
-import { useDocumentReady } from '@app/components/viewer/hooks/useDocumentReady';
-import { printPdfNatively } from '@app/services/nativePrintService';
-import { DesktopOs, getDesktopOs } from '@app/services/platformService';
+import { useEffect } from "react";
+import { usePrintCapability } from "@embedpdf/plugin-print/react";
+import { useViewer } from "@app/contexts/ViewerContext";
+import { useDocumentReady } from "@app/components/viewer/hooks/useDocumentReady";
+import { printPdfNatively } from "@app/services/nativePrintService";
+import { DesktopOs, getDesktopOs } from "@app/services/platformService";
 import { PrintAPIBridgeProps } from "@core/components/viewer/PrintAPIBridge";
 
 export function PrintAPIBridge({ file, url, fileName }: PrintAPIBridgeProps) {
@@ -13,7 +13,7 @@ export function PrintAPIBridge({ file, url, fileName }: PrintAPIBridgeProps) {
 
   useEffect(() => {
     if (documentReady) {
-      registerBridge('print', {
+      registerBridge("print", {
         state: {},
         api: {
           print: () => {
@@ -28,15 +28,15 @@ export function PrintAPIBridge({ file, url, fileName }: PrintAPIBridgeProps) {
 
               print?.print?.();
             })().catch((error) => {
-              console.error('[Desktop Print] Print failed', error);
+              console.error("[Desktop Print] Print failed", error);
             });
           },
-        }
+        },
       });
     }
 
     return () => {
-      registerBridge('print', null);
+      registerBridge("print", null);
     };
   }, [documentReady, file, fileName, print, registerBridge, url]);
 
diff --git a/frontend/src/desktop/config/billing.ts b/frontend/src/desktop/config/billing.ts
index 050db913ff..4e05dc5d1c 100644
--- a/frontend/src/desktop/config/billing.ts
+++ b/frontend/src/desktop/config/billing.ts
@@ -21,20 +21,20 @@ export const BILLING_CONFIG = {
   PLAN_PRICING_PRELOAD_THRESHOLD: 20,
 
   // Stripe lookup keys
-  PRO_PLAN_LOOKUP_KEY: 'plan:pro',
-  METER_LOOKUP_KEY: 'meter:overage',
+  PRO_PLAN_LOOKUP_KEY: "plan:pro",
+  METER_LOOKUP_KEY: "meter:overage",
 
   // Display formats
   CURRENCY_SYMBOLS: {
-    gbp: '£',
-    usd: '$',
-    eur: '€',
-    cny: '¥',
-    inr: '₹',
-    brl: 'R$',
-    idr: 'Rp',
-    jpy: '¥'
-  } as const
+    gbp: "£",
+    usd: "$",
+    eur: "€",
+    cny: "¥",
+    inr: "₹",
+    brl: "R$",
+    idr: "Rp",
+    jpy: "¥",
+  } as const,
 } as const;
 
 /**
@@ -49,8 +49,9 @@ export function getBillingConfig() {
  * @param currency Currency code (e.g., 'usd', 'gbp')
  * @param price Optional price override (defaults to BILLING_CONFIG.OVERAGE_PRICE_PER_CREDIT)
  */
-export function getFormattedOveragePrice(currency: string = 'usd', price?: number): string {
-  const symbol = BILLING_CONFIG.CURRENCY_SYMBOLS[currency.toLowerCase() as keyof typeof BILLING_CONFIG.CURRENCY_SYMBOLS] || '$';
+export function getFormattedOveragePrice(currency: string = "usd", price?: number): string {
+  const symbol =
+    BILLING_CONFIG.CURRENCY_SYMBOLS[currency.toLowerCase() as keyof typeof BILLING_CONFIG.CURRENCY_SYMBOLS] || "$";
   const amount = price ?? BILLING_CONFIG.OVERAGE_PRICE_PER_CREDIT;
   return `${symbol}${amount.toFixed(2)}`;
 }
@@ -59,5 +60,8 @@ export function getFormattedOveragePrice(currency: string = 'usd', price?: numbe
  * Get currency symbol from currency code
  */
 export function getCurrencySymbol(currency: string): string {
-  return BILLING_CONFIG.CURRENCY_SYMBOLS[currency.toLowerCase() as keyof typeof BILLING_CONFIG.CURRENCY_SYMBOLS] || currency.toUpperCase();
+  return (
+    BILLING_CONFIG.CURRENCY_SYMBOLS[currency.toLowerCase() as keyof typeof BILLING_CONFIG.CURRENCY_SYMBOLS] ||
+    currency.toUpperCase()
+  );
 }
diff --git a/frontend/src/desktop/config/defaultAppConfig.ts b/frontend/src/desktop/config/defaultAppConfig.ts
index a215f1c6d1..58290870ae 100644
--- a/frontend/src/desktop/config/defaultAppConfig.ts
+++ b/frontend/src/desktop/config/defaultAppConfig.ts
@@ -1,4 +1,4 @@
-import { AppConfig } from '@app/contexts/AppConfigContext';
+import { AppConfig } from "@app/contexts/AppConfigContext";
 
 /**
  * Default configuration used while the bundled backend starts up.
diff --git a/frontend/src/desktop/config/planFeatures.ts b/frontend/src/desktop/config/planFeatures.ts
index bc747225c8..d0d7896c1e 100644
--- a/frontend/src/desktop/config/planFeatures.ts
+++ b/frontend/src/desktop/config/planFeatures.ts
@@ -10,77 +10,77 @@ export interface PlanFeatureConfig {
 
 export const FREE_PLAN_FEATURES: PlanFeatureConfig[] = [
   {
-    translationKey: 'credits.modal.allInOneWorkspace',
-    defaultText: 'All-in-one PDF workspace (viewer, tools & agent)'
+    translationKey: "credits.modal.allInOneWorkspace",
+    defaultText: "All-in-one PDF workspace (viewer, tools & agent)",
   },
   {
-    translationKey: 'credits.modal.fullyPrivateFiles',
-    defaultText: 'Fully private files'
+    translationKey: "credits.modal.fullyPrivateFiles",
+    defaultText: "Fully private files",
   },
   {
-    translationKey: 'credits.modal.standardThroughput',
-    defaultText: 'Standard throughput'
+    translationKey: "credits.modal.standardThroughput",
+    defaultText: "Standard throughput",
   },
   {
-    translationKey: 'credits.modal.customSmartFolders',
-    defaultText: 'Custom Smart Folders'
+    translationKey: "credits.modal.customSmartFolders",
+    defaultText: "Custom Smart Folders",
   },
   {
-    translationKey: 'credits.modal.apiSandbox',
-    defaultText: 'API sandbox'
-  }
+    translationKey: "credits.modal.apiSandbox",
+    defaultText: "API sandbox",
+  },
 ];
 
 export const TEAM_PLAN_FEATURES: PlanFeatureConfig[] = [
   {
-    translationKey: 'credits.modal.unlimitedSeats',
-    defaultText: 'Unlimited seats'
+    translationKey: "credits.modal.unlimitedSeats",
+    defaultText: "Unlimited seats",
   },
   {
-    translationKey: 'credits.modal.fasterThroughput',
-    defaultText: '10x faster throughput'
+    translationKey: "credits.modal.fasterThroughput",
+    defaultText: "10x faster throughput",
   },
   {
-    translationKey: 'credits.modal.largeFileProcessing',
-    defaultText: 'Large file processing'
+    translationKey: "credits.modal.largeFileProcessing",
+    defaultText: "Large file processing",
   },
   {
-    translationKey: 'credits.modal.premiumAiModels',
-    defaultText: 'Premium AI models'
+    translationKey: "credits.modal.premiumAiModels",
+    defaultText: "Premium AI models",
   },
   {
-    translationKey: 'credits.modal.secureApiAccess',
-    defaultText: 'Secure API access'
+    translationKey: "credits.modal.secureApiAccess",
+    defaultText: "Secure API access",
   },
   {
-    translationKey: 'credits.modal.prioritySupport',
-    defaultText: 'Priority support'
-  }
+    translationKey: "credits.modal.prioritySupport",
+    defaultText: "Priority support",
+  },
 ];
 
 export const ENTERPRISE_PLAN_FEATURES: PlanFeatureConfig[] = [
   {
-    translationKey: 'credits.modal.orgWideAccess',
-    defaultText: 'Org-wide access controls'
+    translationKey: "credits.modal.orgWideAccess",
+    defaultText: "Org-wide access controls",
   },
   {
-    translationKey: 'credits.modal.privateDocCloud',
-    defaultText: 'Private Document Cloud'
+    translationKey: "credits.modal.privateDocCloud",
+    defaultText: "Private Document Cloud",
   },
   {
-    translationKey: 'credits.modal.ragFineTuning',
-    defaultText: 'RAG + fine-tuning'
+    translationKey: "credits.modal.ragFineTuning",
+    defaultText: "RAG + fine-tuning",
   },
   {
-    translationKey: 'credits.modal.unlimitedApiAccess',
-    defaultText: 'Unlimited API access'
+    translationKey: "credits.modal.unlimitedApiAccess",
+    defaultText: "Unlimited API access",
   },
   {
-    translationKey: 'credits.modal.advancedMonitoring',
-    defaultText: 'Advanced monitoring'
+    translationKey: "credits.modal.advancedMonitoring",
+    defaultText: "Advanced monitoring",
   },
   {
-    translationKey: 'credits.modal.dedicatedSupportSlas',
-    defaultText: 'Dedicated support & SLAs'
-  }
+    translationKey: "credits.modal.dedicatedSupportSlas",
+    defaultText: "Dedicated support & SLAs",
+  },
 ];
diff --git a/frontend/src/desktop/constants/backendErrors.ts b/frontend/src/desktop/constants/backendErrors.ts
index 2b33c0e028..6343026b63 100644
--- a/frontend/src/desktop/constants/backendErrors.ts
+++ b/frontend/src/desktop/constants/backendErrors.ts
@@ -1,20 +1,22 @@
-import i18n from '@app/i18n';
+import i18n from "@app/i18n";
 
-export const BACKEND_NOT_READY_CODE = 'BACKEND_NOT_READY' as const;
+export const BACKEND_NOT_READY_CODE = "BACKEND_NOT_READY" as const;
 
 export interface BackendNotReadyError extends Error {
   code: typeof BACKEND_NOT_READY_CODE;
 }
 
 export function createBackendNotReadyError(): BackendNotReadyError {
-  return Object.assign(new Error(i18n.t('backendHealth.starting', 'Backend starting up...')), {
+  return Object.assign(new Error(i18n.t("backendHealth.starting", "Backend starting up...")), {
     code: BACKEND_NOT_READY_CODE,
   });
 }
 
 export function isBackendNotReadyError(error: unknown): error is BackendNotReadyError {
-  return typeof error === 'object'
-    && error !== null
-    && 'code' in error
-    && (error as { code?: unknown }).code === BACKEND_NOT_READY_CODE;
+  return (
+    typeof error === "object" &&
+    error !== null &&
+    "code" in error &&
+    (error as { code?: unknown }).code === BACKEND_NOT_READY_CODE
+  );
 }
diff --git a/frontend/src/desktop/constants/connection.ts b/frontend/src/desktop/constants/connection.ts
index 9467fcb1c8..73955ece71 100644
--- a/frontend/src/desktop/constants/connection.ts
+++ b/frontend/src/desktop/constants/connection.ts
@@ -12,4 +12,4 @@ export const STIRLING_SAAS_BACKEND_API_URL: string = import.meta.env.VITE_SAAS_B
 export const SUPABASE_KEY: string = import.meta.env.VITE_SUPABASE_PUBLISHABLE_DEFAULT_KEY;
 
 // Desktop deep link callback for Supabase email confirmations
-export const DESKTOP_DEEP_LINK_CALLBACK = 'stirlingpdf://auth/callback';
+export const DESKTOP_DEEP_LINK_CALLBACK = "stirlingpdf://auth/callback";
diff --git a/frontend/src/desktop/constants/creditEvents.ts b/frontend/src/desktop/constants/creditEvents.ts
index e66896d301..7b97bc19f0 100644
--- a/frontend/src/desktop/constants/creditEvents.ts
+++ b/frontend/src/desktop/constants/creditEvents.ts
@@ -4,9 +4,9 @@
  */
 
 export const CREDIT_EVENTS = {
-  EXHAUSTED: 'credits:exhausted',
-  INSUFFICIENT: 'credits:insufficient',
-  REFRESH_NEEDED: 'credits:refresh-needed',
+  EXHAUSTED: "credits:exhausted",
+  INSUFFICIENT: "credits:insufficient",
+  REFRESH_NEEDED: "credits:refresh-needed",
 } as const;
 
-export type CreditEventType = typeof CREDIT_EVENTS[keyof typeof CREDIT_EVENTS];
+export type CreditEventType = (typeof CREDIT_EVENTS)[keyof typeof CREDIT_EVENTS];
diff --git a/frontend/src/desktop/constants/signInEvents.ts b/frontend/src/desktop/constants/signInEvents.ts
index f377dda3f4..be44f29022 100644
--- a/frontend/src/desktop/constants/signInEvents.ts
+++ b/frontend/src/desktop/constants/signInEvents.ts
@@ -2,4 +2,4 @@
  * CustomEvent name for opening the desktop sign-in modal (SetupWizard).
  * Kept in a leaf module so apiClientSetup and others avoid importing SignInModal (heavy graph).
  */
-export const OPEN_SIGN_IN_EVENT = 'stirling:open-sign-in';
+export const OPEN_SIGN_IN_EVENT = "stirling:open-sign-in";
diff --git a/frontend/src/desktop/contexts/SaaSCheckoutContext.tsx b/frontend/src/desktop/contexts/SaaSCheckoutContext.tsx
index 0b0e992d48..8eec0e487f 100644
--- a/frontend/src/desktop/contexts/SaaSCheckoutContext.tsx
+++ b/frontend/src/desktop/contexts/SaaSCheckoutContext.tsx
@@ -1,6 +1,6 @@
-import React, { createContext, useContext, useState, ReactNode, useCallback } from 'react';
-import { SaaSStripeCheckout } from '@app/components/shared/billing/SaaSStripeCheckout';
-import { useSaaSBilling } from '@app/contexts/SaasBillingContext';
+import React, { createContext, useContext, useState, ReactNode, useCallback } from "react";
+import { SaaSStripeCheckout } from "@app/components/shared/billing/SaaSStripeCheckout";
+import { useSaaSBilling } from "@app/contexts/SaasBillingContext";
 
 interface SaaSCheckoutContextType {
   opened: boolean;
@@ -14,7 +14,7 @@ const SaaSCheckoutContext = createContext<SaaSCheckoutContextType | undefined>(u
 export const useSaaSCheckout = () => {
   const context = useContext(SaaSCheckoutContext);
   if (!context) {
-    throw new Error('useSaaSCheckout must be used within SaaSCheckoutProvider');
+    throw new Error("useSaaSCheckout must be used within SaaSCheckoutProvider");
   }
   return context;
 };
@@ -23,9 +23,7 @@ interface SaaSCheckoutProviderProps {
   children: ReactNode;
 }
 
-export const SaaSCheckoutProvider: React.FC<SaaSCheckoutProviderProps> = ({
-  children
-}) => {
+export const SaaSCheckoutProvider: React.FC<SaaSCheckoutProviderProps> = ({ children }) => {
   const [opened, setOpened] = useState(false);
   const [selectedPlan, setSelectedPlan] = useState<string | null>(null);
 
@@ -46,11 +44,11 @@ export const SaaSCheckoutProvider: React.FC<SaaSCheckoutProviderProps> = ({
   // Internal success handler - automatically refreshes billing context
   const handleCheckoutSuccess = useCallback(async () => {
     // Wait for webhooks to process (2 seconds)
-    await new Promise(resolve => setTimeout(resolve, 2000));
+    await new Promise((resolve) => setTimeout(resolve, 2000));
     try {
       await refreshBilling();
     } catch (error) {
-      console.error('[SaaSCheckoutContext] Failed to refresh billing after checkout:', error);
+      console.error("[SaaSCheckoutContext] Failed to refresh billing after checkout:", error);
     }
   }, [refreshBilling]);
 
@@ -64,12 +62,7 @@ export const SaaSCheckoutProvider: React.FC<SaaSCheckoutProviderProps> = ({
       }}
     >
       {children}
-      <SaaSStripeCheckout
-        opened={opened}
-        onClose={closeCheckout}
-        planId={selectedPlan}
-        onSuccess={handleCheckoutSuccess}
-      />
+      <SaaSStripeCheckout opened={opened} onClose={closeCheckout} planId={selectedPlan} onSuccess={handleCheckoutSuccess} />
     </SaaSCheckoutContext.Provider>
   );
 };
diff --git a/frontend/src/desktop/contexts/SaaSTeamContext.tsx b/frontend/src/desktop/contexts/SaaSTeamContext.tsx
index 893854e2fc..3155fff1a6 100644
--- a/frontend/src/desktop/contexts/SaaSTeamContext.tsx
+++ b/frontend/src/desktop/contexts/SaaSTeamContext.tsx
@@ -1,7 +1,7 @@
-import { createContext, useContext, useEffect, useState, ReactNode, useCallback } from 'react';
-import apiClient from '@app/services/apiClient';
-import { authService } from '@app/services/authService';
-import { connectionModeService } from '@app/services/connectionModeService';
+import { createContext, useContext, useEffect, useState, ReactNode, useCallback } from "react";
+import apiClient from "@app/services/apiClient";
+import { authService } from "@app/services/authService";
+import { connectionModeService } from "@app/services/connectionModeService";
 
 /**
  * Desktop implementation of SaaS Team Context
@@ -91,7 +91,7 @@ export function SaaSTeamProvider({ children }: { children: ReactNode }) {
     const checkAccess = async () => {
       const mode = await connectionModeService.getCurrentMode();
       const auth = await authService.isAuthenticated();
-      setIsSaasMode(mode === 'saas');
+      setIsSaasMode(mode === "saas");
       setIsAuthenticated(auth);
     };
 
@@ -105,7 +105,7 @@ export function SaaSTeamProvider({ children }: { children: ReactNode }) {
   // Subscribe to auth changes
   useEffect(() => {
     const unsubscribe = authService.subscribeToAuth((status) => {
-      setIsAuthenticated(status === 'authenticated');
+      setIsAuthenticated(status === "authenticated");
     });
     return unsubscribe;
   }, []);
@@ -113,16 +113,16 @@ export function SaaSTeamProvider({ children }: { children: ReactNode }) {
   const fetchMyTeams = useCallback(async () => {
     // CRITICAL: Only fetch if in SaaS mode and authenticated
     if (!isSaasMode || !isAuthenticated) {
-      console.log('[SaaSTeamContext] Skipping team fetch - not in SaaS mode or not authenticated');
+      console.log("[SaaSTeamContext] Skipping team fetch - not in SaaS mode or not authenticated");
       return null;
     }
 
     try {
-      const response = await apiClient.get<Team[]>('/api/v1/team/my', { suppressErrorToast: true });
+      const response = await apiClient.get<Team[]>("/api/v1/team/my", { suppressErrorToast: true });
       setTeams(response.data);
 
       const activeTeam = response.data[0];
-      console.log('[SaaSTeamContext] Current team set:', {
+      console.log("[SaaSTeamContext] Current team set:", {
         teamId: activeTeam?.teamId,
         name: activeTeam?.name,
         isPersonal: activeTeam?.isPersonal,
@@ -131,39 +131,47 @@ export function SaaSTeamProvider({ children }: { children: ReactNode }) {
       setCurrentTeam(activeTeam || null);
       return activeTeam || null;
     } catch (error) {
-      console.error('[SaaSTeamContext] Failed to fetch teams:', error);
+      console.error("[SaaSTeamContext] Failed to fetch teams:", error);
       return null;
     }
   }, [isSaasMode, isAuthenticated]);
 
-  const fetchTeamMembers = useCallback(async (teamId: number) => {
-    // CRITICAL: Only fetch if in SaaS mode and authenticated
-    if (!isSaasMode || !isAuthenticated) {
-      console.log('[SaaSTeamContext] Skipping members fetch - not in SaaS mode or not authenticated');
-      return;
-    }
+  const fetchTeamMembers = useCallback(
+    async (teamId: number) => {
+      // CRITICAL: Only fetch if in SaaS mode and authenticated
+      if (!isSaasMode || !isAuthenticated) {
+        console.log("[SaaSTeamContext] Skipping members fetch - not in SaaS mode or not authenticated");
+        return;
+      }
 
-    try {
-      const response = await apiClient.get<TeamMember[]>(`/api/v1/team/${teamId}/members`, { suppressErrorToast: true });
-      setTeamMembers(response.data);
-    } catch (error) {
-      console.error('[SaaSTeamContext] Failed to fetch team members:', error);
-    }
-  }, [isSaasMode, isAuthenticated]);
+      try {
+        const response = await apiClient.get<TeamMember[]>(`/api/v1/team/${teamId}/members`, { suppressErrorToast: true });
+        setTeamMembers(response.data);
+      } catch (error) {
+        console.error("[SaaSTeamContext] Failed to fetch team members:", error);
+      }
+    },
+    [isSaasMode, isAuthenticated],
+  );
 
-  const fetchTeamInvitations = useCallback(async (teamId?: number) => {
-    // CRITICAL: Only fetch if in SaaS mode and authenticated
-    if (!isSaasMode || !isAuthenticated || !teamId) {
-      return;
-    }
+  const fetchTeamInvitations = useCallback(
+    async (teamId?: number) => {
+      // CRITICAL: Only fetch if in SaaS mode and authenticated
+      if (!isSaasMode || !isAuthenticated || !teamId) {
+        return;
+      }
 
-    try {
-      const response = await apiClient.get<TeamInvitation[]>(`/api/v1/team/${teamId}/invitations`, { suppressErrorToast: true });
-      setTeamInvitations(response.data);
-    } catch (error) {
-      console.error('[SaaSTeamContext] Failed to fetch team invitations:', error);
-    }
-  }, [isSaasMode, isAuthenticated]);
+      try {
+        const response = await apiClient.get<TeamInvitation[]>(`/api/v1/team/${teamId}/invitations`, {
+          suppressErrorToast: true,
+        });
+        setTeamInvitations(response.data);
+      } catch (error) {
+        console.error("[SaaSTeamContext] Failed to fetch team invitations:", error);
+      }
+    },
+    [isSaasMode, isAuthenticated],
+  );
 
   const fetchReceivedInvitations = useCallback(async () => {
     // CRITICAL: Only fetch if in SaaS mode and authenticated
@@ -171,14 +179,14 @@ export function SaaSTeamProvider({ children }: { children: ReactNode }) {
       return;
     }
 
-    console.log('[SaaSTeamContext] Fetching received team invitations');
+    console.log("[SaaSTeamContext] Fetching received team invitations");
 
     try {
-      const response = await apiClient.get<TeamInvitation[]>('/api/v1/team/invitations/pending', { suppressErrorToast: true });
-      console.log('[SaaSTeamContext] Received invitations response:', response.data);
+      const response = await apiClient.get<TeamInvitation[]>("/api/v1/team/invitations/pending", { suppressErrorToast: true });
+      console.log("[SaaSTeamContext] Received invitations response:", response.data);
       setReceivedInvitations(response.data);
     } catch (error) {
-      console.error('[SaaSTeamContext] Failed to fetch received invitations:', error);
+      console.error("[SaaSTeamContext] Failed to fetch received invitations:", error);
     }
   }, [isSaasMode, isAuthenticated]);
 
@@ -214,18 +222,18 @@ export function SaaSTeamProvider({ children }: { children: ReactNode }) {
   }, [currentTeam, isSaasMode, isAuthenticated, fetchTeamMembers, fetchTeamInvitations]);
 
   const inviteUser = async (email: string) => {
-    if (!currentTeam) throw new Error('No current team');
-    if (!isSaasMode) throw new Error('Not in SaaS mode');
+    if (!currentTeam) throw new Error("No current team");
+    if (!isSaasMode) throw new Error("Not in SaaS mode");
 
-    await apiClient.post('/api/v1/team/invite', {
+    await apiClient.post("/api/v1/team/invite", {
       teamId: currentTeam.teamId,
-      email
+      email,
     });
     await fetchTeamInvitations(currentTeam.teamId);
   };
 
   const acceptInvitation = async (token: string) => {
-    if (!isSaasMode) throw new Error('Not in SaaS mode');
+    if (!isSaasMode) throw new Error("Not in SaaS mode");
 
     await apiClient.post(`/api/v1/team/invitations/${token}/accept`);
     await fetchReceivedInvitations();
@@ -234,14 +242,14 @@ export function SaaSTeamProvider({ children }: { children: ReactNode }) {
   };
 
   const rejectInvitation = async (token: string) => {
-    if (!isSaasMode) throw new Error('Not in SaaS mode');
+    if (!isSaasMode) throw new Error("Not in SaaS mode");
 
     await apiClient.post(`/api/v1/team/invitations/${token}/reject`);
     await fetchReceivedInvitations();
   };
 
   const cancelInvitation = async (invitationId: number) => {
-    if (!isSaasMode) throw new Error('Not in SaaS mode');
+    if (!isSaasMode) throw new Error("Not in SaaS mode");
 
     await apiClient.delete(`/api/v1/team/invitations/${invitationId}`);
     if (currentTeam) {
@@ -250,8 +258,8 @@ export function SaaSTeamProvider({ children }: { children: ReactNode }) {
   };
 
   const removeMember = async (memberId: number) => {
-    if (!currentTeam) throw new Error('No current team');
-    if (!isSaasMode) throw new Error('Not in SaaS mode');
+    if (!currentTeam) throw new Error("No current team");
+    if (!isSaasMode) throw new Error("Not in SaaS mode");
 
     await apiClient.delete(`/api/v1/team/${currentTeam.teamId}/members/${memberId}`);
     await refreshTeams();
@@ -259,8 +267,8 @@ export function SaaSTeamProvider({ children }: { children: ReactNode }) {
   };
 
   const leaveTeam = async () => {
-    if (!currentTeam) throw new Error('No current team');
-    if (!isSaasMode) throw new Error('Not in SaaS mode');
+    if (!currentTeam) throw new Error("No current team");
+    if (!isSaasMode) throw new Error("Not in SaaS mode");
 
     await apiClient.post(`/api/v1/team/${currentTeam.teamId}/leave`);
     await refreshTeams();
@@ -269,7 +277,7 @@ export function SaaSTeamProvider({ children }: { children: ReactNode }) {
 
   const refreshTeams = useCallback(async () => {
     if (!isSaasMode || !isAuthenticated) {
-      console.log('[SaaSTeamContext] Skipping refresh - not in SaaS mode or not authenticated');
+      console.log("[SaaSTeamContext] Skipping refresh - not in SaaS mode or not authenticated");
       return;
     }
 
@@ -288,23 +296,25 @@ export function SaaSTeamProvider({ children }: { children: ReactNode }) {
   const isPersonalTeam = currentTeam?.isPersonal ?? true;
 
   return (
-    <SaaSTeamContext.Provider value={{
-      currentTeam,
-      teams,
-      teamMembers,
-      teamInvitations,
-      receivedInvitations,
-      isTeamLeader,
-      isPersonalTeam,
-      loading,
-      inviteUser,
-      acceptInvitation,
-      rejectInvitation,
-      cancelInvitation,
-      removeMember,
-      leaveTeam,
-      refreshTeams
-    }}>
+    <SaaSTeamContext.Provider
+      value={{
+        currentTeam,
+        teams,
+        teamMembers,
+        teamInvitations,
+        receivedInvitations,
+        isTeamLeader,
+        isPersonalTeam,
+        loading,
+        inviteUser,
+        acceptInvitation,
+        rejectInvitation,
+        cancelInvitation,
+        removeMember,
+        leaveTeam,
+        refreshTeams,
+      }}
+    >
       {children}
     </SaaSTeamContext.Provider>
   );
@@ -313,7 +323,7 @@ export function SaaSTeamProvider({ children }: { children: ReactNode }) {
 export function useSaaSTeam() {
   const context = useContext(SaaSTeamContext);
   if (context === undefined) {
-    throw new Error('useSaaSTeam must be used within a SaaSTeamProvider');
+    throw new Error("useSaaSTeam must be used within a SaaSTeamProvider");
   }
   return context;
 }
diff --git a/frontend/src/desktop/contexts/SaasBillingContext.tsx b/frontend/src/desktop/contexts/SaasBillingContext.tsx
index 50a15e2721..89ba00577f 100644
--- a/frontend/src/desktop/contexts/SaasBillingContext.tsx
+++ b/frontend/src/desktop/contexts/SaasBillingContext.tsx
@@ -1,9 +1,9 @@
-import { createContext, useContext, useEffect, useState, ReactNode, useCallback, useRef, useMemo } from 'react';
-import { saasBillingService, BillingStatus, PlanPrice } from '@app/services/saasBillingService';
-import { authService } from '@app/services/authService';
-import { connectionModeService } from '@app/services/connectionModeService';
-import { useSaaSTeam } from '@app/contexts/SaaSTeamContext';
-import type { TierLevel } from '@app/types/billing';
+import { createContext, useContext, useEffect, useState, ReactNode, useCallback, useRef, useMemo } from "react";
+import { saasBillingService, BillingStatus, PlanPrice } from "@app/services/saasBillingService";
+import { authService } from "@app/services/authService";
+import { connectionModeService } from "@app/services/connectionModeService";
+import { useSaaSTeam } from "@app/contexts/SaaSTeamContext";
+import type { TierLevel } from "@app/types/billing";
 
 // How long plan pricing is considered fresh. Lives at module level so both the
 // provider and usePlanPricing (the consumer hook) can reference it.
@@ -26,8 +26,8 @@ interface SaasBillingContextType {
   // Billing Status
   billingStatus: BillingStatus | null;
   tier: TierLevel;
-  subscription: BillingStatus['subscription'];
-  usage: BillingStatus['meterUsage'];
+  subscription: BillingStatus["subscription"];
+  usage: BillingStatus["meterUsage"];
   isTrialing: boolean;
   trialDaysRemaining?: number;
   price?: number;
@@ -57,7 +57,7 @@ interface SaasBillingContextType {
 
 const SaasBillingContext = createContext<SaasBillingContextType>({
   billingStatus: null,
-  tier: 'free',
+  tier: "free",
   subscription: null,
   usage: null,
   isTrialing: false,
@@ -84,7 +84,7 @@ export function SaasBillingProvider({ children }: { children: ReactNode }) {
   const [plans, setPlans] = useState<Map<string, PlanPrice>>(new Map());
   const [plansLoading, setPlansLoading] = useState(false);
   const [plansError, setPlansError] = useState<string | null>(null);
-  const [loading, setLoading] = useState(false);  // Start false (lazy load)
+  const [loading, setLoading] = useState(false); // Start false (lazy load)
   const [error, setError] = useState<string | null>(null);
   // lastFetchTimeRef is the source of truth for cache logic (always current, no stale closure).
   // lastFetchTimeValue mirrors it as state purely to drive re-renders and expose through context.
@@ -113,7 +113,7 @@ export function SaasBillingProvider({ children }: { children: ReactNode }) {
     const checkAccess = async () => {
       const mode = await connectionModeService.getCurrentMode();
       const auth = await authService.isAuthenticated();
-      setIsSaasMode(mode === 'saas');
+      setIsSaasMode(mode === "saas");
       setIsAuthenticated(auth);
     };
 
@@ -127,7 +127,7 @@ export function SaasBillingProvider({ children }: { children: ReactNode }) {
   // Subscribe to auth changes
   useEffect(() => {
     const unsubscribe = authService.subscribeToAuth((status) => {
-      setIsAuthenticated(status === 'authenticated');
+      setIsAuthenticated(status === "authenticated");
     });
     return unsubscribe;
   }, []);
@@ -151,7 +151,7 @@ export function SaasBillingProvider({ children }: { children: ReactNode }) {
 
     // Cache check: Skip if fresh data exists (<5 min old)
     const now = Date.now();
-    if (billingStatusRef.current && lastFetchTimeRef.current && (now - lastFetchTimeRef.current) < 300000) {
+    if (billingStatusRef.current && lastFetchTimeRef.current && now - lastFetchTimeRef.current < 300000) {
       return;
     }
 
@@ -168,8 +168,8 @@ export function SaasBillingProvider({ children }: { children: ReactNode }) {
       setLastFetchTimeValue(now);
       setError(null);
     } catch (err) {
-      console.error('[SaasBillingContext] Failed to fetch billing:', err);
-      setError(err instanceof Error ? err.message : 'Failed to fetch billing');
+      console.error("[SaasBillingContext] Failed to fetch billing:", err);
+      setError(err instanceof Error ? err.message : "Failed to fetch billing");
       // Don't clear billing status on error (preserve existing data)
     } finally {
       setLoading(false);
@@ -192,14 +192,14 @@ export function SaasBillingProvider({ children }: { children: ReactNode }) {
     setPlansError(null);
 
     try {
-      const priceMap = await saasBillingService.getAvailablePlans('usd');
+      const priceMap = await saasBillingService.getAvailablePlans("usd");
       setPlans(priceMap);
       const now = Date.now();
       plansLastFetchTimeRef.current = now;
       setPlansLastFetchTimeValue(now);
     } catch (err) {
-      console.error('[SaasBillingContext] Failed to fetch plans:', err);
-      setPlansError(err instanceof Error ? err.message : 'Failed to fetch plans');
+      console.error("[SaasBillingContext] Failed to fetch plans:", err);
+      setPlansError(err instanceof Error ? err.message : "Failed to fetch plans");
     } finally {
       plansFetchInProgressRef.current = false;
       setPlansLoading(false);
@@ -272,7 +272,7 @@ export function SaasBillingProvider({ children }: { children: ReactNode }) {
       const customEvent = e as CustomEvent<{ creditsRemaining: number }>;
       const newBalance = customEvent.detail?.creditsRemaining;
 
-      if (typeof newBalance === 'number' && billingStatus) {
+      if (typeof newBalance === "number" && billingStatus) {
         // Update credit balance in billing status without full refresh
         const updated = { ...billingStatus, creditBalance: newBalance };
         billingStatusRef.current = updated;
@@ -280,68 +280,76 @@ export function SaasBillingProvider({ children }: { children: ReactNode }) {
 
         // Dispatch exhausted event if credits hit 0
         if (newBalance <= 0 && (billingStatus.creditBalance ?? 0) > 0) {
-          window.dispatchEvent(new CustomEvent('credits:exhausted', {
-            detail: { previousBalance: billingStatus.creditBalance ?? 0, currentBalance: newBalance }
-          }));
+          window.dispatchEvent(
+            new CustomEvent("credits:exhausted", {
+              detail: { previousBalance: billingStatus.creditBalance ?? 0, currentBalance: newBalance },
+            }),
+          );
         }
       }
     };
 
-    window.addEventListener('credits:updated', handleCreditsUpdated);
+    window.addEventListener("credits:updated", handleCreditsUpdated);
     return () => {
-      window.removeEventListener('credits:updated', handleCreditsUpdated);
+      window.removeEventListener("credits:updated", handleCreditsUpdated);
     };
   }, [billingStatus]);
 
-  const contextValue = useMemo(() => ({
-    billingStatus,
-    tier: isManagedTeamMember ? 'team' : (billingStatus?.tier ?? 'free'),
-    subscription: billingStatus?.subscription ?? null,
-    usage: billingStatus?.meterUsage ?? null,
-    isTrialing: billingStatus?.isTrialing ?? false,
-    trialDaysRemaining: billingStatus?.trialDaysRemaining,
-    price: plans.get('team')?.price,
-    currency: plans.get('team')?.currency,
-    creditBalance: billingStatus?.creditBalance ?? 0,
-    plans,
-    plansLoading,
-    plansError,
-    plansLastFetchTime: plansLastFetchTimeValue,
-    isManagedTeamMember,
-    loading: loading || teamLoading,
-    error,
-    lastFetchTime: lastFetchTimeValue,
-    refreshBilling,
-    refreshCredits: refreshBilling,
-    refreshPlans,
-    openBillingPortal,
-  }), [
-    billingStatus, isManagedTeamMember, plans, plansLoading, plansError,
-    plansLastFetchTimeValue, loading, teamLoading, error, lastFetchTimeValue,
-    refreshBilling, refreshPlans, openBillingPortal,
-  ]);
-
-  return (
-    <SaasBillingContext.Provider value={contextValue}>
-      {children}
-    </SaasBillingContext.Provider>
+  const contextValue = useMemo(
+    () => ({
+      billingStatus,
+      tier: isManagedTeamMember ? "team" : (billingStatus?.tier ?? "free"),
+      subscription: billingStatus?.subscription ?? null,
+      usage: billingStatus?.meterUsage ?? null,
+      isTrialing: billingStatus?.isTrialing ?? false,
+      trialDaysRemaining: billingStatus?.trialDaysRemaining,
+      price: plans.get("team")?.price,
+      currency: plans.get("team")?.currency,
+      creditBalance: billingStatus?.creditBalance ?? 0,
+      plans,
+      plansLoading,
+      plansError,
+      plansLastFetchTime: plansLastFetchTimeValue,
+      isManagedTeamMember,
+      loading: loading || teamLoading,
+      error,
+      lastFetchTime: lastFetchTimeValue,
+      refreshBilling,
+      refreshCredits: refreshBilling,
+      refreshPlans,
+      openBillingPortal,
+    }),
+    [
+      billingStatus,
+      isManagedTeamMember,
+      plans,
+      plansLoading,
+      plansError,
+      plansLastFetchTimeValue,
+      loading,
+      teamLoading,
+      error,
+      lastFetchTimeValue,
+      refreshBilling,
+      refreshPlans,
+      openBillingPortal,
+    ],
   );
+
+  return <SaasBillingContext.Provider value={contextValue}>{children}</SaasBillingContext.Provider>;
 }
 
 export function useSaaSBilling() {
   const context = useContext(SaasBillingContext);
   if (context === undefined) {
-    throw new Error('useSaaSBilling must be used within SaasBillingProvider');
+    throw new Error("useSaaSBilling must be used within SaasBillingProvider");
   }
 
   // Lazy fetch: Trigger fetch on first access (after team context loads)
   // Note: context.loading includes teamLoading, so this waits for team to load
   useEffect(() => {
     const needsFetch =
-      context.billingStatus === null &&
-      context.lastFetchTime === null &&
-      !context.loading &&
-      !context.isManagedTeamMember; // Managed members don't need billing data
+      context.billingStatus === null && context.lastFetchTime === null && !context.loading && !context.isManagedTeamMember; // Managed members don't need billing data
 
     if (needsFetch) {
       context.refreshBilling();
@@ -360,9 +368,7 @@ export function usePlanPricing() {
   const { plans, plansLoading, plansError, plansLastFetchTime, refreshPlans } = useContext(SaasBillingContext);
 
   useEffect(() => {
-    const isFresh =
-      plansLastFetchTime !== null &&
-      Date.now() - plansLastFetchTime < PLANS_CACHE_TTL_MS;
+    const isFresh = plansLastFetchTime !== null && Date.now() - plansLastFetchTime < PLANS_CACHE_TTL_MS;
 
     if (!isFresh) {
       refreshPlans();
diff --git a/frontend/src/desktop/extensions/accountLogout.ts b/frontend/src/desktop/extensions/accountLogout.ts
index c45fcc8898..271d32de3c 100644
--- a/frontend/src/desktop/extensions/accountLogout.ts
+++ b/frontend/src/desktop/extensions/accountLogout.ts
@@ -1,4 +1,4 @@
-import { connectionModeService } from '@app/services/connectionModeService';
+import { connectionModeService } from "@app/services/connectionModeService";
 
 type SignOutFn = () => Promise<void>;
 
@@ -17,18 +17,18 @@ export function useAccountLogout() {
 
       const currentConfig = await connectionModeService.getCurrentConfig();
       // Save server URL before clearing so user can easily reconnect (self-hosted only)
-      if (currentConfig.mode === 'selfhosted' && currentConfig.server_config?.url) {
-        localStorage.setItem('server_url', currentConfig.server_config.url);
+      if (currentConfig.mode === "selfhosted" && currentConfig.server_config?.url) {
+        localStorage.setItem("server_url", currentConfig.server_config.url);
       }
       // Always switch to local after logout so the app remains usable
       await connectionModeService.switchToLocal();
 
-      window.history.replaceState({}, '', '/');
+      window.history.replaceState({}, "", "/");
       // No reload needed — AppProviders remounts the SaaS provider tree via
       // connectionModeService subscription when mode changes to local.
       return;
     } catch (err) {
-      console.warn('[Desktop AccountLogout] Desktop-specific logout failed, falling back to redirect', err);
+      console.warn("[Desktop AccountLogout] Desktop-specific logout failed, falling back to redirect", err);
     }
 
     redirectToLogin();
diff --git a/frontend/src/desktop/extensions/authCallback.ts b/frontend/src/desktop/extensions/authCallback.ts
index 6ffcb0e276..3bd4dcb6eb 100644
--- a/frontend/src/desktop/extensions/authCallback.ts
+++ b/frontend/src/desktop/extensions/authCallback.ts
@@ -3,12 +3,12 @@
  */
 export async function handleAuthCallbackSuccess(token: string): Promise<void> {
   // Notify desktop popup listeners (self-hosted SSO flow)
-  const isDesktopPopup = typeof window !== 'undefined' && window.opener && window.name === 'stirling-desktop-sso';
+  const isDesktopPopup = typeof window !== "undefined" && window.opener && window.name === "stirling-desktop-sso";
   if (isDesktopPopup) {
     try {
-      window.opener.postMessage({ type: 'stirling-desktop-sso', token }, '*');
+      window.opener.postMessage({ type: "stirling-desktop-sso", token }, "*");
     } catch (postError) {
-      console.error('[AuthCallback] Failed to notify desktop window:', postError);
+      console.error("[AuthCallback] Failed to notify desktop window:", postError);
     }
 
     // Give the message a moment to flush before attempting to close
diff --git a/frontend/src/desktop/extensions/authSessionCleanup.ts b/frontend/src/desktop/extensions/authSessionCleanup.ts
index 916fceec01..3416d7cdf0 100644
--- a/frontend/src/desktop/extensions/authSessionCleanup.ts
+++ b/frontend/src/desktop/extensions/authSessionCleanup.ts
@@ -1,4 +1,4 @@
-import { authService } from '@app/services/authService';
+import { authService } from "@app/services/authService";
 
 /**
  * Desktop-specific auth cleanup hooks.
@@ -7,7 +7,7 @@ export async function clearPlatformAuthAfterSignOut(): Promise<void> {
   try {
     await authService.localClearAuth();
   } catch (err) {
-    console.warn('[AuthCleanup] Failed to clear desktop auth data after sign out', err);
+    console.warn("[AuthCleanup] Failed to clear desktop auth data after sign out", err);
   }
 }
 
@@ -15,16 +15,16 @@ export async function clearPlatformAuthOnLoginInit(): Promise<void> {
   try {
     // Only clear if there's NO token in storage
     // If token exists, user just logged in and we should keep it
-    const token = typeof window !== 'undefined' ? localStorage.getItem('stirling_jwt') : null;
-    console.log('[AuthCleanup] Login init check - token exists:', !!token, 'length:', token?.length || 0);
+    const token = typeof window !== "undefined" ? localStorage.getItem("stirling_jwt") : null;
+    console.log("[AuthCleanup] Login init check - token exists:", !!token, "length:", token?.length || 0);
 
     if (!token) {
-      console.log('[AuthCleanup] No token found on login init, clearing stale auth data');
+      console.log("[AuthCleanup] No token found on login init, clearing stale auth data");
       await authService.localClearAuth();
     } else {
-      console.log('[AuthCleanup] Token present on login init (length:', token.length, '), skipping cleanup (fresh login)');
+      console.log("[AuthCleanup] Token present on login init (length:", token.length, "), skipping cleanup (fresh login)");
     }
   } catch (err) {
-    console.warn('[AuthCleanup] Failed to clear desktop auth data on login init', err);
+    console.warn("[AuthCleanup] Failed to clear desktop auth data on login init", err);
   }
 }
diff --git a/frontend/src/desktop/extensions/cookieConsentConfig.ts b/frontend/src/desktop/extensions/cookieConsentConfig.ts
index 8a40d7f66f..68d92a4e81 100644
--- a/frontend/src/desktop/extensions/cookieConsentConfig.ts
+++ b/frontend/src/desktop/extensions/cookieConsentConfig.ts
@@ -2,6 +2,6 @@ export function getCookieConsentOverrides(): Record<string, unknown> {
   return {
     cookie: {
       useLocalStorage: true, // Cookies don't reliably persist on desktop, but localStorage does
-    }
+    },
   };
 }
diff --git a/frontend/src/desktop/extensions/oauthNavigation.ts b/frontend/src/desktop/extensions/oauthNavigation.ts
index d6444ba034..c107cb14f7 100644
--- a/frontend/src/desktop/extensions/oauthNavigation.ts
+++ b/frontend/src/desktop/extensions/oauthNavigation.ts
@@ -1,5 +1,5 @@
-import { authService } from '@app/services/authService';
-import { connectionModeService } from '@app/services/connectionModeService';
+import { authService } from "@app/services/authService";
+import { connectionModeService } from "@app/services/connectionModeService";
 
 /**
  * Desktop-specific OAuth navigation: prefer popup/system browser, avoid hijacking main webview.
@@ -17,7 +17,7 @@ export async function startOAuthNavigation(redirectUrl: string): Promise<boolean
     await authService.loginWithSelfHostedOAuth(providerPath, serverUrl);
     return true;
   } catch (error) {
-    console.warn('[Desktop OAuthNavigation] Failed to start OAuth flow', error);
+    console.warn("[Desktop OAuthNavigation] Failed to start OAuth flow", error);
     return false;
   }
 }
diff --git a/frontend/src/desktop/extensions/platformSessionBridge.ts b/frontend/src/desktop/extensions/platformSessionBridge.ts
index 2b9a5f1f76..8d89d5829f 100644
--- a/frontend/src/desktop/extensions/platformSessionBridge.ts
+++ b/frontend/src/desktop/extensions/platformSessionBridge.ts
@@ -1,7 +1,7 @@
-import { STIRLING_SAAS_URL } from '@app/constants/connection';
-import { connectionModeService } from '@app/services/connectionModeService';
-import { authService } from '@app/services/authService';
-import type { PlatformSessionUser } from '@proprietary/extensions/platformSessionBridge';
+import { STIRLING_SAAS_URL } from "@app/constants/connection";
+import { connectionModeService } from "@app/services/connectionModeService";
+import { authService } from "@app/services/authService";
+import type { PlatformSessionUser } from "@proprietary/extensions/platformSessionBridge";
 
 export async function isDesktopSaaSAuthMode(): Promise<boolean> {
   try {
@@ -9,7 +9,7 @@ export async function isDesktopSaaSAuthMode(): Promise<boolean> {
     // Return true for ANY desktop auth mode (SaaS or self-hosted with desktop authService)
     // This skips redundant backend validation in springAuthClient since desktop authService
     // already manages the token lifecycle
-    return mode === 'saas' || mode === 'selfhosted';
+    return mode === "saas" || mode === "selfhosted";
   } catch {
     return false;
   }
@@ -33,9 +33,9 @@ export async function getPlatformSessionUser(): Promise<PlatformSessionUser | nu
 export async function refreshPlatformSession(): Promise<boolean> {
   try {
     const mode = await connectionModeService.getCurrentMode();
-    if (mode === 'saas') {
+    if (mode === "saas") {
       return await authService.refreshSupabaseToken(STIRLING_SAAS_URL);
-    } else if (mode === 'selfhosted') {
+    } else if (mode === "selfhosted") {
       const serverConfig = await connectionModeService.getServerConfig();
       if (!serverConfig) {
         return false;
@@ -56,7 +56,7 @@ export async function savePlatformToken(token: string): Promise<void> {
   try {
     await authService.saveToken(token);
   } catch (error) {
-    console.error('[PlatformBridge] Failed to save token:', error);
+    console.error("[PlatformBridge] Failed to save token:", error);
     throw error;
   }
 }
diff --git a/frontend/src/desktop/hooks/useAppInitialization.ts b/frontend/src/desktop/hooks/useAppInitialization.ts
index 6bbca20fdb..ff3fbad2c1 100644
--- a/frontend/src/desktop/hooks/useAppInitialization.ts
+++ b/frontend/src/desktop/hooks/useAppInitialization.ts
@@ -1,8 +1,8 @@
-import { useEffect, useState } from 'react';
-import { useOpenedFile } from '@app/hooks/useOpenedFile';
-import { fileOpenService } from '@app/services/fileOpenService';
-import { useFileManagement } from '@app/contexts/file/fileHooks';
-import { createQuickKey } from '@app/types/fileContext';
+import { useEffect, useState } from "react";
+import { useOpenedFile } from "@app/hooks/useOpenedFile";
+import { fileOpenService } from "@app/services/fileOpenService";
+import { useFileManagement } from "@app/contexts/file/fileHooks";
+import { createQuickKey } from "@app/types/fileContext";
 
 /**
  * App initialization hook
@@ -37,10 +37,10 @@ export function useAppInitialization(): void {
                 if (!fileData) return null;
 
                 const file = new File([fileData.arrayBuffer], fileData.fileName, {
-                  type: 'application/pdf'
+                  type: "application/pdf",
                 });
 
-                console.log('[Desktop] Loaded file:', fileData.fileName);
+                console.log("[Desktop] Loaded file:", fileData.fileName);
 
                 return {
                   file,
@@ -48,19 +48,19 @@ export function useAppInitialization(): void {
                   quickKey: createQuickKey(file),
                 };
               } catch (error) {
-                console.error('[Desktop] Failed to load file:', filePath, error);
+                console.error("[Desktop] Failed to load file:", filePath, error);
                 return null;
               }
-            })
+            }),
           )
         ).filter((entry): entry is { file: File; filePath: string; quickKey: string } => Boolean(entry));
 
         if (loadedFiles.length > 0) {
-          const filesArray = loadedFiles.map(entry => entry.file);
-          const quickKeyToPath = new Map(loadedFiles.map(entry => [entry.quickKey, entry.filePath]));
+          const filesArray = loadedFiles.map((entry) => entry.file);
+          const quickKeyToPath = new Map(loadedFiles.map((entry) => [entry.quickKey, entry.filePath]));
 
           const addedFiles = await addFiles(filesArray, { selectFiles: true });
-          addedFiles.forEach(file => {
+          addedFiles.forEach((file) => {
             const localFilePath = quickKeyToPath.get(file.quickKey);
             if (localFilePath) {
               updateStirlingFileStub(file.fileId, { localFilePath });
@@ -70,7 +70,7 @@ export function useAppInitialization(): void {
           console.log(`[Desktop] ${loadedFiles.length} opened file(s) added to FileContext`);
         }
       } catch (error) {
-        console.error('[Desktop] Failed to load opened files:', error);
+        console.error("[Desktop] Failed to load opened files:", error);
       }
     };
 
diff --git a/frontend/src/desktop/hooks/useBackendHealth.ts b/frontend/src/desktop/hooks/useBackendHealth.ts
index f8269be355..8a4a7c1d27 100644
--- a/frontend/src/desktop/hooks/useBackendHealth.ts
+++ b/frontend/src/desktop/hooks/useBackendHealth.ts
@@ -1,9 +1,9 @@
-import { useEffect, useState, useCallback } from 'react';
-import { backendHealthMonitor } from '@app/services/backendHealthMonitor';
-import { selfHostedServerMonitor } from '@app/services/selfHostedServerMonitor';
-import { tauriBackendService } from '@app/services/tauriBackendService';
-import { connectionModeService } from '@app/services/connectionModeService';
-import type { BackendHealthState } from '@app/types/backendHealth';
+import { useEffect, useState, useCallback } from "react";
+import { backendHealthMonitor } from "@app/services/backendHealthMonitor";
+import { selfHostedServerMonitor } from "@app/services/selfHostedServerMonitor";
+import { tauriBackendService } from "@app/services/tauriBackendService";
+import { connectionModeService } from "@app/services/connectionModeService";
+import type { BackendHealthState } from "@app/types/backendHealth";
 
 /**
  * Hook to read backend health state for UI (Run button, BackendHealthIndicator).
@@ -20,17 +20,13 @@ import type { BackendHealthState } from '@app/types/backendHealth';
  */
 export function useBackendHealth() {
   const [health, setHealth] = useState<BackendHealthState>(() => backendHealthMonitor.getSnapshot());
-  const [serverStatus, setServerStatus] = useState(
-    () => selfHostedServerMonitor.getSnapshot().status
-  );
-  const [localUrl, setLocalUrl] = useState<string | null>(
-    () => tauriBackendService.getBackendUrl()
-  );
+  const [serverStatus, setServerStatus] = useState(() => selfHostedServerMonitor.getSnapshot().status);
+  const [localUrl, setLocalUrl] = useState<string | null>(() => tauriBackendService.getBackendUrl());
   const [connectionMode, setConnectionMode] = useState<string | null>(null);
 
   useEffect(() => {
     void connectionModeService.getCurrentMode().then(setConnectionMode);
-    return connectionModeService.subscribeToModeChanges(config => setConnectionMode(config.mode));
+    return connectionModeService.subscribeToModeChanges((config) => setConnectionMode(config.mode));
   }, []);
 
   useEffect(() => {
@@ -38,7 +34,7 @@ export function useBackendHealth() {
   }, []);
 
   useEffect(() => {
-    return selfHostedServerMonitor.subscribe(state => setServerStatus(state.status));
+    return selfHostedServerMonitor.subscribe((state) => setServerStatus(state.status));
   }, []);
 
   useEffect(() => {
@@ -51,10 +47,7 @@ export function useBackendHealth() {
     return backendHealthMonitor.checkNow();
   }, []);
 
-  const isOnline =
-    connectionMode === 'selfhosted'
-      ? serverStatus !== 'offline' || !!localUrl
-      : health.isOnline;
+  const isOnline = connectionMode === "selfhosted" ? serverStatus !== "offline" || !!localUrl : health.isOnline;
 
   return {
     ...health,
diff --git a/frontend/src/desktop/hooks/useBackendInitializer.ts b/frontend/src/desktop/hooks/useBackendInitializer.ts
index 8be4e3c89d..8296dfff57 100644
--- a/frontend/src/desktop/hooks/useBackendInitializer.ts
+++ b/frontend/src/desktop/hooks/useBackendInitializer.ts
@@ -1,7 +1,7 @@
-import { useEffect } from 'react';
-import { useBackendHealth } from '@app/hooks/useBackendHealth';
-import { useEndpointConfig } from '@app/hooks/useEndpointConfig';
-import { tauriBackendService } from '@app/services/tauriBackendService';
+import { useEffect } from "react";
+import { useBackendHealth } from "@app/hooks/useBackendHealth";
+import { useEndpointConfig } from "@app/hooks/useEndpointConfig";
+import { tauriBackendService } from "@app/services/tauriBackendService";
 
 /**
  * Hook to initialize backend and monitor health
@@ -32,12 +32,12 @@ export function useBackendInitializer(enabled = true) {
           void checkHealth();
         }, 500);
       } catch (error) {
-        console.error('[BackendInitializer] Failed to start backend:', error);
+        console.error("[BackendInitializer] Failed to start backend:", error);
       }
     };
 
     // Only start backend if it's not already starting/healthy
-    if (status !== 'healthy' && status !== 'starting') {
+    if (status !== "healthy" && status !== "starting") {
       void initializeBackend();
     }
   }, [enabled, status, backendUrl, checkHealth]);
diff --git a/frontend/src/desktop/hooks/useConversionCloudStatus.ts b/frontend/src/desktop/hooks/useConversionCloudStatus.ts
index 182afa4a14..f88704b106 100644
--- a/frontend/src/desktop/hooks/useConversionCloudStatus.ts
+++ b/frontend/src/desktop/hooks/useConversionCloudStatus.ts
@@ -1,18 +1,18 @@
-import { useState, useEffect } from 'react';
-import { connectionModeService } from '@app/services/connectionModeService';
-import { endpointAvailabilityService } from '@app/services/endpointAvailabilityService';
-import { tauriBackendService } from '@app/services/tauriBackendService';
-import { selfHostedServerMonitor } from '@app/services/selfHostedServerMonitor';
-import { EXTENSION_TO_ENDPOINT } from '@app/constants/convertConstants';
-import { getEndpointName } from '@app/utils/convertUtils';
+import { useState, useEffect } from "react";
+import { connectionModeService } from "@app/services/connectionModeService";
+import { endpointAvailabilityService } from "@app/services/endpointAvailabilityService";
+import { tauriBackendService } from "@app/services/tauriBackendService";
+import { selfHostedServerMonitor } from "@app/services/selfHostedServerMonitor";
+import { EXTENSION_TO_ENDPOINT } from "@app/constants/convertConstants";
+import { getEndpointName } from "@app/utils/convertUtils";
 
 /**
  * Comprehensive conversion status data
  */
 export interface ConversionStatus {
-  availability: Record<string, boolean>;   // Available on local OR SaaS?
-  cloudStatus: Record<string, boolean>;    // Will use cloud?
-  localOnly: Record<string, boolean>;      // Available ONLY locally (not on SaaS)?
+  availability: Record<string, boolean>; // Available on local OR SaaS?
+  cloudStatus: Record<string, boolean>; // Will use cloud?
+  localOnly: Record<string, boolean>; // Available ONLY locally (not on SaaS)?
 }
 
 /**
@@ -33,10 +33,10 @@ export function useConversionCloudStatus(): ConversionStatus {
 
       // Self-hosted offline path: server is down but local backend is available.
       // Check each conversion against the local backend only (no cloud routing).
-      if (mode === 'selfhosted') {
+      if (mode === "selfhosted") {
         const { status } = selfHostedServerMonitor.getSnapshot();
         const localUrl = tauriBackendService.getBackendUrl();
-        if (status === 'offline' && localUrl) {
+        if (status === "offline" && localUrl) {
           const pairs: [string, string, string][] = [];
           for (const fromExt of Object.keys(EXTENSION_TO_ENDPOINT)) {
             for (const toExt of Object.keys(EXTENSION_TO_ENDPOINT[fromExt] || {})) {
@@ -56,7 +56,7 @@ export function useConversionCloudStatus(): ConversionStatus {
               } catch {
                 return { key, supported: false };
               }
-            })
+            }),
           );
           for (const { key, supported } of results) {
             availability[key] = supported;
@@ -77,7 +77,7 @@ export function useConversionCloudStatus(): ConversionStatus {
         return;
       }
 
-      if (mode !== 'saas') {
+      if (mode !== "saas") {
         // Non-SaaS, non-self-hosted: local endpoint checking handles everything
         setStatus({ availability: {}, cloudStatus: {}, localOnly: {} });
         return;
@@ -105,7 +105,7 @@ export function useConversionCloudStatus(): ConversionStatus {
             // used by useMultipleEndpointsEnabled's SaaS enhancement.
             const availableLocally = await endpointAvailabilityService.isEndpointSupportedLocally(
               endpointName,
-              tauriBackendService.getBackendUrl()
+              tauriBackendService.getBackendUrl(),
             );
             return { key, isAvailable: true, willUseCloud: !availableLocally, localOnly: false };
           } catch (error) {
@@ -113,7 +113,7 @@ export function useConversionCloudStatus(): ConversionStatus {
             // On error, assume available via cloud (safe default in SaaS mode)
             return { key, isAvailable: true, willUseCloud: true, localOnly: false };
           }
-        })
+        }),
       );
 
       for (const { key, isAvailable, willUseCloud: wuc, localOnly: lo } of results) {
@@ -130,7 +130,7 @@ export function useConversionCloudStatus(): ConversionStatus {
 
     // Re-check when SaaS local backend becomes healthy
     const unsubLocal = tauriBackendService.subscribeToStatus((status) => {
-      if (status === 'healthy') {
+      if (status === "healthy") {
         checkConversions();
       }
     });
@@ -143,7 +143,10 @@ export function useConversionCloudStatus(): ConversionStatus {
     // Skip the first invocation since checkConversions() was already called above.
     let skipFirst = true;
     const unsubServer = selfHostedServerMonitor.subscribe(() => {
-      if (skipFirst) { skipFirst = false; return; }
+      if (skipFirst) {
+        skipFirst = false;
+        return;
+      }
       void checkConversions();
     });
 
diff --git a/frontend/src/desktop/hooks/useCreditCheck.ts b/frontend/src/desktop/hooks/useCreditCheck.ts
index 56691c8182..4d51baa141 100644
--- a/frontend/src/desktop/hooks/useCreditCheck.ts
+++ b/frontend/src/desktop/hooks/useCreditCheck.ts
@@ -1,11 +1,11 @@
-import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useSaaSBilling } from '@app/contexts/SaasBillingContext';
-import { useSaaSMode } from '@app/hooks/useSaaSMode';
-import { getToolCreditCost } from '@app/utils/creditCosts';
-import { CREDIT_EVENTS } from '@app/constants/creditEvents';
-import { operationRouter } from '@app/services/operationRouter';
-import type { ToolId } from '@app/types/toolId';
+import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { useSaaSBilling } from "@app/contexts/SaasBillingContext";
+import { useSaaSMode } from "@app/hooks/useSaaSMode";
+import { getToolCreditCost } from "@app/utils/creditCosts";
+import { CREDIT_EVENTS } from "@app/constants/creditEvents";
+import { operationRouter } from "@app/services/operationRouter";
+import type { ToolId } from "@app/types/toolId";
 
 /**
  * Desktop implementation of credit checking for cloud operations.
@@ -21,43 +21,47 @@ export function useCreditCheck(operationType?: string, endpoint?: string) {
   const isSaaSMode = useSaaSMode();
   const { t } = useTranslation();
 
-  const checkCredits = useCallback(async (runtimeEndpoint?: string): Promise<string | null> => {
-    if (!isSaaSMode) return null; // Credits only apply in SaaS mode, not self-hosted
-    if (!billing) return null;
+  const checkCredits = useCallback(
+    async (runtimeEndpoint?: string): Promise<string | null> => {
+      if (!isSaaSMode) return null; // Credits only apply in SaaS mode, not self-hosted
+      if (!billing) return null;
 
-    // If the operation routes to the local backend, no credits are consumed — skip check.
-    // runtimeEndpoint (from params at execution time) takes priority over hook-level endpoint.
-    const ep = runtimeEndpoint ?? endpoint;
-    if (ep) {
-      try {
-        const willUseSaaS = await operationRouter.willRouteToSaaS(ep);
-        if (!willUseSaaS) return null;
-      } catch {
-        // If routing check fails, fall through to credit check as a safe default.
+      // If the operation routes to the local backend, no credits are consumed — skip check.
+      // runtimeEndpoint (from params at execution time) takes priority over hook-level endpoint.
+      const ep = runtimeEndpoint ?? endpoint;
+      if (ep) {
+        try {
+          const willUseSaaS = await operationRouter.willRouteToSaaS(ep);
+          if (!willUseSaaS) return null;
+        } catch {
+          // If routing check fails, fall through to credit check as a safe default.
+        }
       }
-    }
 
-    const { creditBalance, loading } = billing;
-    const requiredCredits = getToolCreditCost(operationType as ToolId);
+      const { creditBalance, loading } = billing;
+      const requiredCredits = getToolCreditCost(operationType as ToolId);
 
-    if (!loading && creditBalance < requiredCredits) {
-      window.dispatchEvent(new CustomEvent(CREDIT_EVENTS.INSUFFICIENT, {
-        detail: {
-          operationType,
-          requiredCredits,
-          currentBalance: creditBalance,
-        },
-      }));
+      if (!loading && creditBalance < requiredCredits) {
+        window.dispatchEvent(
+          new CustomEvent(CREDIT_EVENTS.INSUFFICIENT, {
+            detail: {
+              operationType,
+              requiredCredits,
+              currentBalance: creditBalance,
+            },
+          }),
+        );
 
-      return t(
-        'credits.insufficient.brief',
-        'Insufficient credits. You need {{required}} credits but have {{current}}.',
-        { required: requiredCredits, current: creditBalance },
-      );
-    }
+        return t("credits.insufficient.brief", "Insufficient credits. You need {{required}} credits but have {{current}}.", {
+          required: requiredCredits,
+          current: creditBalance,
+        });
+      }
 
-    return null;
-  }, [billing, isSaaSMode, operationType, endpoint, t]);
+      return null;
+    },
+    [billing, isSaaSMode, operationType, endpoint, t],
+  );
 
   return { checkCredits };
 }
diff --git a/frontend/src/desktop/hooks/useCreditEvents.ts b/frontend/src/desktop/hooks/useCreditEvents.ts
index 1e05cb61a4..653c8aa30a 100644
--- a/frontend/src/desktop/hooks/useCreditEvents.ts
+++ b/frontend/src/desktop/hooks/useCreditEvents.ts
@@ -1,7 +1,7 @@
-import { useEffect, useRef } from 'react';
-import { useSaaSBilling } from '@app/contexts/SaasBillingContext';
-import { useSaaSMode } from '@app/hooks/useSaaSMode';
-import { CREDIT_EVENTS } from '@app/constants/creditEvents';
+import { useEffect, useRef } from "react";
+import { useSaaSBilling } from "@app/contexts/SaasBillingContext";
+import { useSaaSMode } from "@app/hooks/useSaaSMode";
+import { CREDIT_EVENTS } from "@app/constants/creditEvents";
 
 /**
  * Desktop hook that monitors credit balance and dispatches events
@@ -22,7 +22,7 @@ export function useCreditEvents() {
       window.dispatchEvent(
         new CustomEvent(CREDIT_EVENTS.EXHAUSTED, {
           detail: { previousBalance: prevBalance, currentBalance: creditBalance },
-        })
+        }),
       );
     }
 
diff --git a/frontend/src/desktop/hooks/useDefaultApp.ts b/frontend/src/desktop/hooks/useDefaultApp.ts
index 5816e2cfdc..09a1b82add 100644
--- a/frontend/src/desktop/hooks/useDefaultApp.ts
+++ b/frontend/src/desktop/hooks/useDefaultApp.ts
@@ -1,7 +1,7 @@
-import { useState, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { defaultAppService } from '@app/services/defaultAppService';
-import { alert } from '@app/components/toast';
+import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { defaultAppService } from "@app/services/defaultAppService";
+import { alert } from "@app/components/toast";
 
 export const useDefaultApp = () => {
   const { t } = useTranslation();
@@ -17,7 +17,7 @@ export const useDefaultApp = () => {
       const status = await defaultAppService.isDefaultPdfHandler();
       setIsDefault(status);
     } catch (error) {
-      console.error('Failed to check default status:', error);
+      console.error("Failed to check default status:", error);
     }
   };
 
@@ -26,26 +26,26 @@ export const useDefaultApp = () => {
     try {
       const result = await defaultAppService.setAsDefaultPdfHandler();
 
-      if (result === 'set_successfully') {
+      if (result === "set_successfully") {
         alert({
-          alertType: 'success',
-          title: t('defaultApp.success.title', 'Default App Set'),
-          body: t('defaultApp.success.message', 'Stirling PDF is now your default PDF editor'),
+          alertType: "success",
+          title: t("defaultApp.success.title", "Default App Set"),
+          body: t("defaultApp.success.message", "Stirling PDF is now your default PDF editor"),
         });
         setIsDefault(true);
-      } else if (result === 'opened_dialog') {
+      } else if (result === "opened_dialog") {
         alert({
-          alertType: 'neutral',
-          title: t('defaultApp.settingsOpened.title', 'Settings Opened'),
-          body: t('defaultApp.settingsOpened.message', 'Please select Stirling PDF in the file association dialogue'),
+          alertType: "neutral",
+          title: t("defaultApp.settingsOpened.title", "Settings Opened"),
+          body: t("defaultApp.settingsOpened.message", "Please select Stirling PDF in the file association dialogue"),
         });
       }
     } catch (error) {
-      console.error('Failed to set default:', error);
+      console.error("Failed to set default:", error);
       alert({
-        alertType: 'error',
-        title: t('defaultApp.error.title', 'Error'),
-        body: t('defaultApp.error.message', 'Failed to set default PDF handler'),
+        alertType: "error",
+        title: t("defaultApp.error.title", "Error"),
+        body: t("defaultApp.error.message", "Failed to set default PDF handler"),
       });
     } finally {
       setIsLoading(false);
diff --git a/frontend/src/desktop/hooks/useEnableMeteredBilling.ts b/frontend/src/desktop/hooks/useEnableMeteredBilling.ts
index 97467fca45..03d47bc3d1 100644
--- a/frontend/src/desktop/hooks/useEnableMeteredBilling.ts
+++ b/frontend/src/desktop/hooks/useEnableMeteredBilling.ts
@@ -1,6 +1,6 @@
-import { useState } from 'react';
-import { supabase } from '@app/auth/supabase';
-import { authService } from '@app/services/authService';
+import { useState } from "react";
+import { supabase } from "@app/auth/supabase";
+import { authService } from "@app/services/authService";
 
 /**
  * Shared hook for enabling metered (overage) billing via Supabase edge function.
@@ -13,7 +13,7 @@ import { authService } from '@app/services/authService';
 export function useEnableMeteredBilling(
   refreshBilling: () => Promise<void>,
   onSuccess: () => void,
-  logPrefix: string
+  logPrefix: string,
 ): {
   enablingMetering: boolean;
   meteringError: string | null;
@@ -30,20 +30,20 @@ export function useEnableMeteredBilling(
     try {
       const token = await authService.getAuthToken();
       if (!token) {
-        throw new Error('Not authenticated');
+        throw new Error("Not authenticated");
       }
 
-      const { data, error } = await supabase.functions.invoke('create-meter-subscription', {
-        method: 'POST',
+      const { data, error } = await supabase.functions.invoke("create-meter-subscription", {
+        method: "POST",
         headers: { Authorization: `Bearer ${token}` },
       });
 
       if (error) {
-        throw new Error(error.message || 'Failed to enable metered billing');
+        throw new Error(error.message || "Failed to enable metered billing");
       }
 
       if (!data?.success) {
-        throw new Error(data?.error || data?.message || 'Failed to enable metered billing');
+        throw new Error(data?.error || data?.message || "Failed to enable metered billing");
       }
 
       console.debug(`[${logPrefix}] Metered billing enabled successfully`);
@@ -51,7 +51,7 @@ export function useEnableMeteredBilling(
       await refreshBilling();
       onSuccess();
     } catch (err: unknown) {
-      const message = err instanceof Error ? err.message : 'Failed to enable metered billing';
+      const message = err instanceof Error ? err.message : "Failed to enable metered billing";
       console.error(`[${logPrefix}] Failed to enable metered billing:`, err);
       setMeteringError(message);
     } finally {
diff --git a/frontend/src/desktop/hooks/useEndpointConfig.ts b/frontend/src/desktop/hooks/useEndpointConfig.ts
index 1b5a49fcaa..c824b05b08 100644
--- a/frontend/src/desktop/hooks/useEndpointConfig.ts
+++ b/frontend/src/desktop/hooks/useEndpointConfig.ts
@@ -1,15 +1,14 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
-import { isAxiosError } from 'axios';
-import { useTranslation } from 'react-i18next';
-import apiClient from '@app/services/apiClient';
-import { tauriBackendService } from '@app/services/tauriBackendService';
-import { selfHostedServerMonitor } from '@app/services/selfHostedServerMonitor';
-import { endpointAvailabilityService } from '@app/services/endpointAvailabilityService';
-import { isBackendNotReadyError } from '@app/constants/backendErrors';
-import type { EndpointAvailabilityDetails } from '@app/types/endpointAvailability';
-import { connectionModeService } from '@app/services/connectionModeService';
-import type { AppConfig } from '@app/contexts/AppConfigContext';
-
+import { useState, useEffect, useCallback, useRef } from "react";
+import { isAxiosError } from "axios";
+import { useTranslation } from "react-i18next";
+import apiClient from "@app/services/apiClient";
+import { tauriBackendService } from "@app/services/tauriBackendService";
+import { selfHostedServerMonitor } from "@app/services/selfHostedServerMonitor";
+import { endpointAvailabilityService } from "@app/services/endpointAvailabilityService";
+import { isBackendNotReadyError } from "@app/constants/backendErrors";
+import type { EndpointAvailabilityDetails } from "@app/types/endpointAvailability";
+import { connectionModeService } from "@app/services/connectionModeService";
+import type { AppConfig } from "@app/contexts/AppConfigContext";
 
 interface EndpointConfig {
   backendUrl: string;
@@ -18,34 +17,31 @@ interface EndpointConfig {
 const RETRY_DELAY_MS = 2500;
 
 function isSelfHostedOffline(): boolean {
-  return (
-    selfHostedServerMonitor.getSnapshot().status === 'offline' &&
-    !!tauriBackendService.getBackendUrl()
-  );
+  return selfHostedServerMonitor.getSnapshot().status === "offline" && !!tauriBackendService.getBackendUrl();
 }
 
 function getErrorMessage(err: unknown): string {
   if (isAxiosError(err)) {
     const data = err.response?.data as { message?: string } | undefined;
-    if (typeof data?.message === 'string') {
+    if (typeof data?.message === "string") {
       return data.message;
     }
-    return err.message || 'Unknown error occurred';
+    return err.message || "Unknown error occurred";
   }
   if (err instanceof Error) {
     return err.message;
   }
-  return 'Unknown error occurred';
+  return "Unknown error occurred";
 }
 
 async function checkDependenciesReady(): Promise<boolean> {
   try {
-    const response = await apiClient.get<AppConfig>('/api/v1/config/app-config', {
+    const response = await apiClient.get<AppConfig>("/api/v1/config/app-config", {
       suppressErrorToast: true,
     });
     return response.data?.dependenciesReady ?? false;
   } catch (error) {
-    console.debug('[useEndpointConfig] Dependencies not ready yet:', error);
+    console.debug("[useEndpointConfig] Dependencies not ready yet:", error);
     return false;
   }
 }
@@ -100,9 +96,12 @@ export function useEndpointEnabled(endpoint: string): {
     try {
       setError(null);
 
-      const response = await apiClient.get<boolean>(`/api/v1/config/endpoint-enabled?endpoint=${encodeURIComponent(endpoint)}`, {
-        suppressErrorToast: true,
-      });
+      const response = await apiClient.get<boolean>(
+        `/api/v1/config/endpoint-enabled?endpoint=${encodeURIComponent(endpoint)}`,
+        {
+          suppressErrorToast: true,
+        },
+      );
 
       const locallyEnabled = response.data;
 
@@ -110,7 +109,7 @@ export function useEndpointEnabled(endpoint: string): {
         const mode = await connectionModeService.getCurrentMode();
         // DESKTOP ENHANCEMENT: In SaaS mode, assume all endpoints are available
         // Even if not supported locally, they will route to SaaS backend
-        if (mode === 'saas') {
+        if (mode === "saas") {
           console.debug(`[useEndpointEnabled] Endpoint ${endpoint} not supported locally but available via SaaS routing`);
           setEnabled(true);
           return;
@@ -123,7 +122,7 @@ export function useEndpointEnabled(endpoint: string): {
       const message = getErrorMessage(err);
 
       if (isBackendStarting) {
-        setError(t('backendHealth.starting', 'Backend starting up...'));
+        setError(t("backendHealth.starting", "Backend starting up..."));
         if (!retryTimeoutRef.current) {
           retryTimeoutRef.current = setTimeout(() => {
             retryTimeoutRef.current = null;
@@ -133,7 +132,7 @@ export function useEndpointEnabled(endpoint: string): {
       } else {
         // DESKTOP ENHANCEMENT: In SaaS mode, assume available even on check failure
         const mode = await connectionModeService.getCurrentMode();
-        if (mode === 'saas') {
+        if (mode === "saas") {
           console.debug(`[useEndpointEnabled] Endpoint ${endpoint} check failed but available via SaaS routing`);
           setEnabled(true); // Available via SaaS
           setError(null);
@@ -174,7 +173,7 @@ export function useEndpointEnabled(endpoint: string): {
     }
 
     const unsubscribe = tauriBackendService.subscribeToStatus((status) => {
-      if (status === 'healthy') {
+      if (status === "healthy") {
         fetchEndpointStatus();
       }
     });
@@ -234,7 +233,7 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
     // checkDependenciesReady() would fail here since it hits the offline remote server.
     const { status: serverStatus } = selfHostedServerMonitor.getSnapshot();
     const localUrl = tauriBackendService.getBackendUrl();
-    if (serverStatus === 'offline' && localUrl) {
+    if (serverStatus === "offline" && localUrl) {
       const results = await Promise.all(
         [...new Set(endpoints)].map(async (ep) => {
           try {
@@ -243,17 +242,17 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
           } catch {
             return { ep, supported: false };
           }
-        })
+        }),
       );
       if (!isMountedRef.current) return;
       const statusMap: Record<string, boolean> = {};
       const details: Record<string, EndpointAvailabilityDetails> = {};
       for (const { ep, supported } of results) {
         statusMap[ep] = supported;
-        details[ep] = { enabled: supported, reason: supported ? null : 'NOT_SUPPORTED_LOCALLY' };
+        details[ep] = { enabled: supported, reason: supported ? null : "NOT_SUPPORTED_LOCALLY" };
       }
-      setEndpointDetails(prev => ({ ...prev, ...details }));
-      setEndpointStatus(prev => ({ ...prev, ...statusMap }));
+      setEndpointDetails((prev) => ({ ...prev, ...details }));
+      setEndpointStatus((prev) => ({ ...prev, ...statusMap }));
       setLoading(false);
       return;
     }
@@ -271,60 +270,66 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
       // "large query reduction" change and still require the parameter.
       let response: Awaited<ReturnType<typeof apiClient.get<Record<string, EndpointAvailabilityDetails>>>>;
       try {
-        response = await apiClient.get<Record<string, EndpointAvailabilityDetails>>(
-          `/api/v1/config/endpoints-availability`,
-          { suppressErrorToast: true }
-        );
+        response = await apiClient.get<Record<string, EndpointAvailabilityDetails>>(`/api/v1/config/endpoints-availability`, {
+          suppressErrorToast: true,
+        });
       } catch (innerErr) {
         if (isAxiosError(innerErr) && innerErr.response?.status === 400) {
           // Old server — requires explicit endpoints query param
-          console.debug('[useMultipleEndpointsEnabled] Server requires endpoints param, retrying with legacy format');
-          const endpointsParam = endpoints.join(',');
+          console.debug("[useMultipleEndpointsEnabled] Server requires endpoints param, retrying with legacy format");
+          const endpointsParam = endpoints.join(",");
           response = await apiClient.get<Record<string, EndpointAvailabilityDetails>>(
             `/api/v1/config/endpoints-availability?endpoints=${encodeURIComponent(endpointsParam)}`,
-            { suppressErrorToast: true }
+            { suppressErrorToast: true },
           );
         } else {
           throw innerErr;
         }
       }
 
-      const details = Object.entries(response.data).reduce((acc, [endpointName, detail]) => {
-        acc[endpointName] = {
-          enabled: detail?.enabled ?? false,
-          reason: detail?.reason ?? null,
-        };
-        return acc;
-      }, {} as Record<string, EndpointAvailabilityDetails>);
+      const details = Object.entries(response.data).reduce(
+        (acc, [endpointName, detail]) => {
+          acc[endpointName] = {
+            enabled: detail?.enabled ?? false,
+            reason: detail?.reason ?? null,
+          };
+          return acc;
+        },
+        {} as Record<string, EndpointAvailabilityDetails>,
+      );
 
-      const statusMap = Object.keys(details).reduce((acc, key) => {
-        acc[key] = details[key].enabled;
-        return acc;
-      }, {} as Record<string, boolean>);
+      const statusMap = Object.keys(details).reduce(
+        (acc, key) => {
+          acc[key] = details[key].enabled;
+          return acc;
+        },
+        {} as Record<string, boolean>,
+      );
 
       const mode = await connectionModeService.getCurrentMode();
 
       // DESKTOP ENHANCEMENT: In SaaS mode, mark all disabled endpoints as available
       // They will route to SaaS backend
-      if (mode === 'saas') {
-        const disabledEndpoints = Object.keys(details).filter(key => !details[key].enabled);
+      if (mode === "saas") {
+        const disabledEndpoints = Object.keys(details).filter((key) => !details[key].enabled);
 
         for (const endpoint of disabledEndpoints) {
-          console.debug(`[useMultipleEndpointsEnabled] Endpoint ${endpoint} not supported locally but available via SaaS routing`);
+          console.debug(
+            `[useMultipleEndpointsEnabled] Endpoint ${endpoint} not supported locally but available via SaaS routing`,
+          );
           statusMap[endpoint] = true; // Mark as enabled via SaaS
           details[endpoint] = { enabled: true, reason: null };
         }
       }
 
-
-      setEndpointDetails(prev => ({ ...prev, ...details }));
-      setEndpointStatus(prev => ({ ...prev, ...statusMap }));
+      setEndpointDetails((prev) => ({ ...prev, ...details }));
+      setEndpointStatus((prev) => ({ ...prev, ...statusMap }));
     } catch (err: unknown) {
       const isBackendStarting = isBackendNotReadyError(err);
       const message = getErrorMessage(err);
 
       if (isBackendStarting) {
-        setError(t('backendHealth.starting', 'Backend starting up...'));
+        setError(t("backendHealth.starting", "Backend starting up..."));
         if (!retryTimeoutRef.current) {
           retryTimeoutRef.current = setTimeout(() => {
             retryTimeoutRef.current = null;
@@ -333,16 +338,19 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
         }
       } else {
         setError(message);
-        const fallbackStatus = endpoints.reduce((acc, endpointName) => {
-          const fallbackDetail: EndpointAvailabilityDetails = { enabled: false, reason: 'UNKNOWN' };
-          acc.status[endpointName] = false;
-          acc.details[endpointName] = fallbackDetail;
-          return acc;
-        }, { status: {} as Record<string, boolean>, details: {} as Record<string, EndpointAvailabilityDetails> });
+        const fallbackStatus = endpoints.reduce(
+          (acc, endpointName) => {
+            const fallbackDetail: EndpointAvailabilityDetails = { enabled: false, reason: "UNKNOWN" };
+            acc.status[endpointName] = false;
+            acc.details[endpointName] = fallbackDetail;
+            return acc;
+          },
+          { status: {} as Record<string, boolean>, details: {} as Record<string, EndpointAvailabilityDetails> },
+        );
 
         // DESKTOP ENHANCEMENT: In SaaS mode, mark all endpoints as available
         const mode = await connectionModeService.getCurrentMode();
-        if (mode === 'saas') {
+        if (mode === "saas") {
           for (const endpoint of endpoints) {
             console.debug(`[useMultipleEndpointsEnabled] Endpoint ${endpoint} check failed but available via SaaS routing`);
             fallbackStatus.status[endpoint] = true;
@@ -351,7 +359,7 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
         }
 
         setEndpointStatus(fallbackStatus.status);
-        setEndpointDetails(prev => ({ ...prev, ...fallbackStatus.details }));
+        setEndpointDetails((prev) => ({ ...prev, ...fallbackStatus.details }));
       }
     } finally {
       setLoading(false);
@@ -381,7 +389,7 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
     }
 
     const unsubscribe = tauriBackendService.subscribeToStatus((status) => {
-      if (status === 'healthy') {
+      if (status === "healthy") {
         fetchAllEndpointStatuses();
       }
     });
@@ -401,9 +409,7 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
 }
 
 // Default backend URL from environment variables
-const DEFAULT_BACKEND_URL =
-  import.meta.env.VITE_DESKTOP_BACKEND_URL
-  || import.meta.env.VITE_API_BASE_URL;
+const DEFAULT_BACKEND_URL = import.meta.env.VITE_DESKTOP_BACKEND_URL || import.meta.env.VITE_API_BASE_URL;
 
 /**
  * Desktop override exposing the backend URL based on connection mode.
@@ -414,9 +420,10 @@ export function useEndpointConfig(): EndpointConfig {
   const [backendUrl, setBackendUrl] = useState<string>(DEFAULT_BACKEND_URL);
 
   useEffect(() => {
-    connectionModeService.getCurrentConfig()
+    connectionModeService
+      .getCurrentConfig()
       .then((config) => {
-        if (config.mode === 'selfhosted' && config.server_config?.url) {
+        if (config.mode === "selfhosted" && config.server_config?.url) {
           setBackendUrl(config.server_config.url);
         } else {
           // SaaS mode - use default from env vars (local backend)
@@ -424,7 +431,7 @@ export function useEndpointConfig(): EndpointConfig {
         }
       })
       .catch((err) => {
-        console.error('Failed to get connection config:', err);
+        console.error("Failed to get connection config:", err);
         // Keep current URL on error
       });
   }, []);
diff --git a/frontend/src/desktop/hooks/useExitWarning.ts b/frontend/src/desktop/hooks/useExitWarning.ts
index 4e45a91cc2..3d8310c334 100644
--- a/frontend/src/desktop/hooks/useExitWarning.ts
+++ b/frontend/src/desktop/hooks/useExitWarning.ts
@@ -1,10 +1,10 @@
-import { useEffect, useRef } from 'react';
-import { getCurrentWindow } from '@tauri-apps/api/window';
-import { message } from '@tauri-apps/plugin-dialog';
-import { useFileState, useFileActions } from '@app/contexts/FileContext';
-import { downloadFile } from '@app/services/downloadService';
-import type { StirlingFileStub } from '@app/types/fileContext';
-import { useTranslation } from 'react-i18next';
+import { useEffect, useRef } from "react";
+import { getCurrentWindow } from "@tauri-apps/api/window";
+import { message } from "@tauri-apps/plugin-dialog";
+import { useFileState, useFileActions } from "@app/contexts/FileContext";
+import { downloadFile } from "@app/services/downloadService";
+import type { StirlingFileStub } from "@app/types/fileContext";
+import { useTranslation } from "react-i18next";
 
 export function useExitWarning() {
   const { t } = useTranslation();
@@ -26,29 +26,29 @@ export function useExitWarning() {
       }
 
       const allStubs = selectorsRef.current.getStirlingFileStubs();
-      const dirtyStubs = allStubs.filter(stub => stub.isDirty);
+      const dirtyStubs = allStubs.filter((stub) => stub.isDirty);
 
       if (dirtyStubs.length > 0) {
-        const fileList = dirtyStubs.map(f => `• ${f.name}`).join('\n');
-        const saveLabel = t('confirmCloseSave', 'Save and close');
-        const discardLabel = t('confirmCloseDiscard', 'Discard changes and close');
-        const cancelLabel = t('confirmCloseCancel', 'Cancel');
+        const fileList = dirtyStubs.map((f) => `• ${f.name}`).join("\n");
+        const saveLabel = t("confirmCloseSave", "Save and close");
+        const discardLabel = t("confirmCloseDiscard", "Discard changes and close");
+        const cancelLabel = t("confirmCloseCancel", "Cancel");
 
         const choice = await message(
-          t(
-            'confirmCloseUnsavedList',
-            'You have {{count}} file{{plural}} with unsaved changes.\n\n{{fileList}}',
-            { count: dirtyStubs.length, plural: dirtyStubs.length > 1 ? 's' : '', fileList }
-          ),
+          t("confirmCloseUnsavedList", "You have {{count}} file{{plural}} with unsaved changes.\n\n{{fileList}}", {
+            count: dirtyStubs.length,
+            plural: dirtyStubs.length > 1 ? "s" : "",
+            fileList,
+          }),
           {
-            title: t('confirmCloseUnsaved', 'This file has unsaved changes.'),
-            kind: 'warning',
+            title: t("confirmCloseUnsaved", "This file has unsaved changes."),
+            kind: "warning",
             buttons: {
               yes: saveLabel,
               no: discardLabel,
               cancel: cancelLabel,
             },
-          }
+          },
         );
 
         if (choice === cancelLabel) {
@@ -62,12 +62,11 @@ export function useExitWarning() {
           }
           if (failedCount > 0) {
             await message(
-              t(
-                'confirmCloseSaveFailed',
-                'Saved with errors. {{count}} file{{plural}} could not be saved.',
-                { count: failedCount, plural: failedCount > 1 ? 's' : '' }
-              ),
-              { title: t('confirmCloseSaveFailedTitle', 'Save Failed'), kind: 'error' }
+              t("confirmCloseSaveFailed", "Saved with errors. {{count}} file{{plural}} could not be saved.", {
+                count: failedCount,
+                plural: failedCount > 1 ? "s" : "",
+              }),
+              { title: t("confirmCloseSaveFailedTitle", "Save Failed"), kind: "error" },
             );
             return;
           }
@@ -80,21 +79,21 @@ export function useExitWarning() {
       try {
         await appWindow.destroy();
       } catch (error) {
-        console.error('[exit-warning] destroy failed', error);
+        console.error("[exit-warning] destroy failed", error);
         isClosingRef.current = false;
       }
     };
 
     const unlisten = appWindow.onCloseRequested(handleCloseRequested);
     return () => {
-      unlisten.then(fn => {
+      unlisten.then((fn) => {
         fn();
       });
     };
   }, [fileActions, t]);
 
   const saveDirtyFiles = async (dirtyStubs: StirlingFileStub[]) => {
-    const filesById = new Map(selectorsRef.current.getFiles().map(file => [file.fileId, file]));
+    const filesById = new Map(selectorsRef.current.getFiles().map((file) => [file.fileId, file]));
     let failedCount = 0;
     let cancelled = false;
 
@@ -122,7 +121,7 @@ export function useExitWarning() {
         if (result.savedPath) {
           fileActions.updateStirlingFileStub(stub.id, {
             localFilePath: stub.localFilePath ?? result.savedPath,
-            isDirty: false
+            isDirty: false,
           });
         }
       } catch {
diff --git a/frontend/src/desktop/hooks/useFileActionIcons.ts b/frontend/src/desktop/hooks/useFileActionIcons.ts
index 5d2cb9951b..35bd74cb71 100644
--- a/frontend/src/desktop/hooks/useFileActionIcons.ts
+++ b/frontend/src/desktop/hooks/useFileActionIcons.ts
@@ -1,5 +1,5 @@
-import FolderOpenOutlinedIcon from '@mui/icons-material/FolderOpenOutlined';
-import SaveOutlinedIcon from '@mui/icons-material/SaveOutlined';
+import FolderOpenOutlinedIcon from "@mui/icons-material/FolderOpenOutlined";
+import SaveOutlinedIcon from "@mui/icons-material/SaveOutlined";
 
 /**
  * File action icons for desktop builds.
@@ -10,10 +10,10 @@ export function useFileActionIcons() {
   return {
     upload: FolderOpenOutlinedIcon,
     download: SaveOutlinedIcon,
-    uploadIconName: 'folder-rounded' as const,
-    downloadIconName: 'save-rounded' as const,
+    uploadIconName: "folder-rounded" as const,
+    downloadIconName: "save-rounded" as const,
     // Returning this icon name causes RightRail to render the Save As button.
     // On desktop, downloadFile() without a localPath shows a native save dialog.
-    saveAsIconName: 'save-as-rounded' as string | undefined,
+    saveAsIconName: "save-as-rounded" as string | undefined,
   };
 }
diff --git a/frontend/src/desktop/hooks/useFileActionTerminology.ts b/frontend/src/desktop/hooks/useFileActionTerminology.ts
index fd7399533b..73ae33c16b 100644
--- a/frontend/src/desktop/hooks/useFileActionTerminology.ts
+++ b/frontend/src/desktop/hooks/useFileActionTerminology.ts
@@ -1,4 +1,4 @@
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
 
 /**
  * File action terminology for desktop builds
@@ -8,17 +8,17 @@ export function useFileActionTerminology() {
   const { t } = useTranslation();
 
   return {
-    uploadFiles: t('fileUpload.openFiles', 'Open Files'),
-    uploadFile: t('fileUpload.openFile', 'Open File'),
-    upload: t('fileUpload.open', 'Open'),
-    dropFilesHere: t('fileUpload.dropFilesHereOpen', 'Drop files here or click the open button'),
-    addFiles: t('fileUpload.openFiles', 'Open Files'),
-    mobileUpload: t('landing.mobileUpload', 'Upload from Mobile'),
-    uploadFromComputer: t('landing.openFromComputer', 'Open from computer'),
-    download: t('save', 'Save'),
-    downloadAll: t('rightRail.saveAll', 'Save All'),
-    downloadSelected: t('fileManager.saveSelected', 'Save Selected'),
-    downloadUnavailable: t('saveUnavailable', 'Save unavailable for this item'),
-    noFilesInStorage: t('fileUpload.noFilesInStorageOpen', 'No files available in storage. Open some files first.'),
+    uploadFiles: t("fileUpload.openFiles", "Open Files"),
+    uploadFile: t("fileUpload.openFile", "Open File"),
+    upload: t("fileUpload.open", "Open"),
+    dropFilesHere: t("fileUpload.dropFilesHereOpen", "Drop files here or click the open button"),
+    addFiles: t("fileUpload.openFiles", "Open Files"),
+    mobileUpload: t("landing.mobileUpload", "Upload from Mobile"),
+    uploadFromComputer: t("landing.openFromComputer", "Open from computer"),
+    download: t("save", "Save"),
+    downloadAll: t("rightRail.saveAll", "Save All"),
+    downloadSelected: t("fileManager.saveSelected", "Save Selected"),
+    downloadUnavailable: t("saveUnavailable", "Save unavailable for this item"),
+    noFilesInStorage: t("fileUpload.noFilesInStorageOpen", "No files available in storage. Open some files first."),
   };
 }
diff --git a/frontend/src/desktop/hooks/useFirstLaunchCheck.ts b/frontend/src/desktop/hooks/useFirstLaunchCheck.ts
index 641fe5bfc6..213c8d2665 100644
--- a/frontend/src/desktop/hooks/useFirstLaunchCheck.ts
+++ b/frontend/src/desktop/hooks/useFirstLaunchCheck.ts
@@ -1,6 +1,6 @@
-import { useEffect, useRef, useState } from 'react';
-import { connectionModeService } from '@app/services/connectionModeService';
-import { authService } from '@app/services/authService';
+import { useEffect, useRef, useState } from "react";
+import { connectionModeService } from "@app/services/connectionModeService";
+import { authService } from "@app/services/authService";
 
 /**
  * First launch check hook
@@ -27,7 +27,7 @@ export function useFirstLaunchCheck(): { isFirstLaunch: boolean; setupComplete:
 
         setupCheckCompleteRef.current = true;
       } catch (error) {
-        console.error('Failed to check first launch:', error);
+        console.error("Failed to check first launch:", error);
         // On error, assume not first launch and proceed
         setIsFirstLaunch(false);
         setSetupComplete(true);
diff --git a/frontend/src/desktop/hooks/useGroupEnabled.ts b/frontend/src/desktop/hooks/useGroupEnabled.ts
index 91f9ccc951..860ca97a4a 100644
--- a/frontend/src/desktop/hooks/useGroupEnabled.ts
+++ b/frontend/src/desktop/hooks/useGroupEnabled.ts
@@ -1,10 +1,10 @@
-import { useState, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import apiClient from '@app/services/apiClient';
-import { selfHostedServerMonitor } from '@app/services/selfHostedServerMonitor';
-import type { GroupEnabledResult } from '@app/types/groupEnabled';
+import { useState, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import apiClient from "@app/services/apiClient";
+import { selfHostedServerMonitor } from "@app/services/selfHostedServerMonitor";
+import type { GroupEnabledResult } from "@app/types/groupEnabled";
 
-const OFFLINE_REASON_FALLBACK = 'Requires your Stirling-PDF server (currently offline)';
+const OFFLINE_REASON_FALLBACK = "Requires your Stirling-PDF server (currently offline)";
 
 /**
  * Desktop override: skips the network request entirely when the self-hosted
@@ -18,7 +18,7 @@ export function useGroupEnabled(group: string): GroupEnabledResult {
   // the very first render when offline (t() is not available in useState initialiser).
   const [result, setResult] = useState<GroupEnabledResult>(() => {
     const { status } = selfHostedServerMonitor.getSnapshot();
-    if (status === 'offline') {
+    if (status === "offline") {
       return { enabled: false, unavailableReason: OFFLINE_REASON_FALLBACK };
     }
     return { enabled: null, unavailableReason: null };
@@ -26,17 +26,17 @@ export function useGroupEnabled(group: string): GroupEnabledResult {
 
   useEffect(() => {
     const { status } = selfHostedServerMonitor.getSnapshot();
-    if (status === 'offline') {
+    if (status === "offline") {
       setResult({
         enabled: false,
-        unavailableReason: t('toolPanel.fullscreen.selfHostedOffline', OFFLINE_REASON_FALLBACK),
+        unavailableReason: t("toolPanel.fullscreen.selfHostedOffline", OFFLINE_REASON_FALLBACK),
       });
       return;
     }
 
     apiClient
       .get<boolean>(`/api/v1/config/group-enabled?group=${encodeURIComponent(group)}`)
-      .then(res => setResult({ enabled: res.data, unavailableReason: null }))
+      .then((res) => setResult({ enabled: res.data, unavailableReason: null }))
       .catch(() => setResult({ enabled: false, unavailableReason: null }));
   }, [group, t]);
 
diff --git a/frontend/src/desktop/hooks/useGroupSigningEnabled.ts b/frontend/src/desktop/hooks/useGroupSigningEnabled.ts
index 6a6da3ac05..446b206fbf 100644
--- a/frontend/src/desktop/hooks/useGroupSigningEnabled.ts
+++ b/frontend/src/desktop/hooks/useGroupSigningEnabled.ts
@@ -1,5 +1,5 @@
-import { useAppConfig } from '@app/contexts/AppConfigContext';
-import { useSelfHostedAuth } from '@app/hooks/useSelfHostedAuth';
+import { useAppConfig } from "@app/contexts/AppConfigContext";
+import { useSelfHostedAuth } from "@app/hooks/useSelfHostedAuth";
 
 /**
  * Desktop override: shared (group) signing requires self-hosted mode AND
diff --git a/frontend/src/desktop/hooks/useOpenedFile.ts b/frontend/src/desktop/hooks/useOpenedFile.ts
index 38ae77cdb8..336e500cee 100644
--- a/frontend/src/desktop/hooks/useOpenedFile.ts
+++ b/frontend/src/desktop/hooks/useOpenedFile.ts
@@ -1,6 +1,6 @@
-import { useState, useEffect, useRef, useCallback } from 'react';
-import { fileOpenService } from '@app/services/fileOpenService';
-import { listen } from '@tauri-apps/api/event';
+import { useState, useEffect, useRef, useCallback } from "react";
+import { fileOpenService } from "@app/services/fileOpenService";
+import { listen } from "@tauri-apps/api/event";
 
 export function useOpenedFile() {
   const [openedFilePaths, setOpenedFilePaths] = useState<string[]>([]);
@@ -22,10 +22,10 @@ export function useOpenedFile() {
   useEffect(() => {
     // Function to read and process files from storage
     const readFilesFromStorage = async () => {
-      console.log('🔍 Reading files from storage...');
+      console.log("🔍 Reading files from storage...");
       try {
         const filePaths = await fileOpenService.getOpenedFiles();
-        console.log('🔍 fileOpenService.getOpenedFiles() returned:', filePaths);
+        console.log("🔍 fileOpenService.getOpenedFiles() returned:", filePaths);
 
         if (filePaths.length > 0) {
           console.log(`✅ Found ${filePaths.length} file(s) in storage:`, filePaths);
@@ -33,7 +33,7 @@ export function useOpenedFile() {
           setOpenedFilePaths(filePaths);
         }
       } catch (error) {
-        console.error('❌ Failed to read files from storage:', error);
+        console.error("❌ Failed to read files from storage:", error);
       } finally {
         setLoading(false);
       }
@@ -44,10 +44,10 @@ export function useOpenedFile() {
 
     // Listen for files-changed events (when new files are added to storage)
     let unlisten: (() => void) | undefined;
-    listen('files-changed', async () => {
-      console.log('📂 files-changed event received, re-reading storage...');
+    listen("files-changed", async () => {
+      console.log("📂 files-changed event received, re-reading storage...");
       await readFilesFromStorage();
-    }).then(unlistenFn => {
+    }).then((unlistenFn) => {
       unlisten = unlistenFn;
     });
 
diff --git a/frontend/src/desktop/hooks/useSaaSMode.ts b/frontend/src/desktop/hooks/useSaaSMode.ts
index 9b7833fdd4..c40da6bb32 100644
--- a/frontend/src/desktop/hooks/useSaaSMode.ts
+++ b/frontend/src/desktop/hooks/useSaaSMode.ts
@@ -1,5 +1,5 @@
-import { useState, useEffect } from 'react';
-import { connectionModeService } from '@app/services/connectionModeService';
+import { useState, useEffect } from "react";
+import { connectionModeService } from "@app/services/connectionModeService";
 
 /**
  * Returns whether the app is currently in SaaS connection mode.
@@ -10,8 +10,8 @@ export function useSaaSMode(): boolean {
   const [isSaaSMode, setIsSaaSMode] = useState(true);
 
   useEffect(() => {
-    void connectionModeService.getCurrentMode().then(mode => setIsSaaSMode(mode === 'saas'));
-    return connectionModeService.subscribeToModeChanges(cfg => setIsSaaSMode(cfg.mode === 'saas'));
+    void connectionModeService.getCurrentMode().then((mode) => setIsSaaSMode(mode === "saas"));
+    return connectionModeService.subscribeToModeChanges((cfg) => setIsSaaSMode(cfg.mode === "saas"));
   }, []);
 
   return isSaaSMode;
diff --git a/frontend/src/desktop/hooks/useSaaSPlans.ts b/frontend/src/desktop/hooks/useSaaSPlans.ts
index 718b7d072d..6533e9c8d3 100644
--- a/frontend/src/desktop/hooks/useSaaSPlans.ts
+++ b/frontend/src/desktop/hooks/useSaaSPlans.ts
@@ -1,8 +1,8 @@
-import { useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useSaaSBilling, usePlanPricing } from '@app/contexts/SaasBillingContext';
-import { FREE_PLAN_FEATURES, TEAM_PLAN_FEATURES, ENTERPRISE_PLAN_FEATURES } from '@app/config/planFeatures';
-import type { TierLevel } from '@app/types/billing';
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { useSaaSBilling, usePlanPricing } from "@app/contexts/SaasBillingContext";
+import { FREE_PLAN_FEATURES, TEAM_PLAN_FEATURES, ENTERPRISE_PLAN_FEATURES } from "@app/config/planFeatures";
+import type { TierLevel } from "@app/types/billing";
 
 export interface PlanFeature {
   name: string;
@@ -28,60 +28,60 @@ export const useSaaSPlans = () => {
   const { plans, plansLoading, plansError } = usePlanPricing();
 
   const computedPlans = useMemo<PlanTier[]>(() => {
-    const teamPlan = plans.get('team');
+    const teamPlan = plans.get("team");
 
     return [
       {
-        id: 'free',
-        name: t('plan.free.name', 'Free'),
+        id: "free",
+        name: t("plan.free.name", "Free"),
         price: 0,
-        currency: '$',
-        period: t('plan.period.month', '/month'),
-        highlights: FREE_PLAN_FEATURES.map(f => t(f.translationKey, f.defaultText)),
+        currency: "$",
+        period: t("plan.period.month", "/month"),
+        highlights: FREE_PLAN_FEATURES.map((f) => t(f.translationKey, f.defaultText)),
         features: [
-          { name: t('plan.feature.pdfTools', 'Basic PDF Tools'), included: true },
-          { name: t('plan.feature.fileSize', 'File Size Limit'), included: false },
-          { name: t('plan.feature.automation', 'Automate tool workflows'), included: false },
-          { name: t('plan.feature.api', 'API Access'), included: false },
-          { name: t('plan.feature.priority', 'Priority Support'), included: false },
-          { name: t('plan.feature.customPricing', 'Custom Pricing'), included: false },
-        ]
+          { name: t("plan.feature.pdfTools", "Basic PDF Tools"), included: true },
+          { name: t("plan.feature.fileSize", "File Size Limit"), included: false },
+          { name: t("plan.feature.automation", "Automate tool workflows"), included: false },
+          { name: t("plan.feature.api", "API Access"), included: false },
+          { name: t("plan.feature.priority", "Priority Support"), included: false },
+          { name: t("plan.feature.customPricing", "Custom Pricing"), included: false },
+        ],
       },
       {
-        id: 'team',
-        name: t('plan.team.name', 'Team'),
+        id: "team",
+        name: t("plan.team.name", "Team"),
         price: teamPlan?.price || 10,
-        currency: teamPlan?.currency || '$',
-        period: t('plan.period.month', '/month'),
+        currency: teamPlan?.currency || "$",
+        period: t("plan.period.month", "/month"),
         popular: true,
         overagePrice: teamPlan?.overagePrice || 0.05,
-        highlights: TEAM_PLAN_FEATURES.map(f => t(f.translationKey, f.defaultText)),
+        highlights: TEAM_PLAN_FEATURES.map((f) => t(f.translationKey, f.defaultText)),
         features: [
-          { name: t('plan.feature.pdfTools', 'Basic PDF Tools'), included: true },
-          { name: t('plan.feature.fileSize', 'File Size Limit'), included: true },
-          { name: t('plan.feature.automation', 'Automate tool workflows'), included: true },
-          { name: t('plan.feature.api', 'Monthly API Credits'), included: true },
-          { name: t('plan.feature.priority', 'Priority Support'), included: false },
-          { name: t('plan.feature.customPricing', 'Custom Pricing'), included: false },
-        ]
+          { name: t("plan.feature.pdfTools", "Basic PDF Tools"), included: true },
+          { name: t("plan.feature.fileSize", "File Size Limit"), included: true },
+          { name: t("plan.feature.automation", "Automate tool workflows"), included: true },
+          { name: t("plan.feature.api", "Monthly API Credits"), included: true },
+          { name: t("plan.feature.priority", "Priority Support"), included: false },
+          { name: t("plan.feature.customPricing", "Custom Pricing"), included: false },
+        ],
       },
       {
-        id: 'enterprise',
-        name: t('plan.enterprise.name', 'Enterprise'),
+        id: "enterprise",
+        name: t("plan.enterprise.name", "Enterprise"),
         price: 0,
-        currency: '$',
-        period: '',
+        currency: "$",
+        period: "",
         isContactOnly: true,
-        highlights: ENTERPRISE_PLAN_FEATURES.map(f => t(f.translationKey, f.defaultText)),
+        highlights: ENTERPRISE_PLAN_FEATURES.map((f) => t(f.translationKey, f.defaultText)),
         features: [
-          { name: t('plan.feature.pdfTools', 'Basic PDF Tools'), included: true },
-          { name: t('plan.feature.fileSize', 'File Size Limit'), included: true },
-          { name: t('plan.feature.automation', 'Automate tool workflows'), included: true },
-          { name: t('plan.feature.api', 'Monthly API Credits'), included: true },
-          { name: t('plan.feature.priority', 'Priority Support'), included: true },
-          { name: t('plan.feature.customPricing', 'Custom Pricing'), included: true },
-        ]
-      }
+          { name: t("plan.feature.pdfTools", "Basic PDF Tools"), included: true },
+          { name: t("plan.feature.fileSize", "File Size Limit"), included: true },
+          { name: t("plan.feature.automation", "Automate tool workflows"), included: true },
+          { name: t("plan.feature.api", "Monthly API Credits"), included: true },
+          { name: t("plan.feature.priority", "Priority Support"), included: true },
+          { name: t("plan.feature.customPricing", "Custom Pricing"), included: true },
+        ],
+      },
     ];
   }, [t, plans]);
 
diff --git a/frontend/src/desktop/hooks/useSaveShortcut.ts b/frontend/src/desktop/hooks/useSaveShortcut.ts
index 82961138ae..6c38a6892b 100644
--- a/frontend/src/desktop/hooks/useSaveShortcut.ts
+++ b/frontend/src/desktop/hooks/useSaveShortcut.ts
@@ -1,6 +1,6 @@
-import { useEffect } from 'react';
-import { useFileState, useFileActions } from '@app/contexts/FileContext';
-import { downloadFile } from '@app/services/downloadService';
+import { useEffect } from "react";
+import { useFileState, useFileActions } from "@app/contexts/FileContext";
+import { downloadFile } from "@app/services/downloadService";
 
 /**
  * Desktop-only keyboard shortcut: Ctrl/Cmd+S to save selected files
@@ -14,17 +14,14 @@ export function useSaveShortcut() {
   useEffect(() => {
     const handleKeyDown = async (event: KeyboardEvent) => {
       // Check for Ctrl+S (Windows/Linux) or Cmd+S (Mac)
-      if ((event.ctrlKey || event.metaKey) && event.key === 's') {
+      if ((event.ctrlKey || event.metaKey) && event.key === "s") {
         event.preventDefault();
 
         // Get selected files or all files if nothing selected
         const selectedFileIds = state.ui.selectedFileIds;
-        const filesToSave = selectedFileIds.length > 0
-          ? selectors.getFiles(selectedFileIds)
-          : selectors.getFiles();
-        const stubsToSave = selectedFileIds.length > 0
-          ? selectors.getStirlingFileStubs(selectedFileIds)
-          : selectors.getStirlingFileStubs();
+        const filesToSave = selectedFileIds.length > 0 ? selectors.getFiles(selectedFileIds) : selectors.getFiles();
+        const stubsToSave =
+          selectedFileIds.length > 0 ? selectors.getStirlingFileStubs(selectedFileIds) : selectors.getStirlingFileStubs();
 
         if (filesToSave.length === 0) {
           return;
@@ -40,14 +37,14 @@ export function useSaveShortcut() {
             const result = await downloadFile({
               data: file,
               filename: file.name,
-              localPath: stub.localFilePath
+              localPath: stub.localFilePath,
             });
 
             // Mark file as clean after successful save
             if (result.savedPath) {
               fileActions.updateStirlingFileStub(stub.id, {
                 localFilePath: stub.localFilePath ?? result.savedPath,
-                isDirty: false
+                isDirty: false,
               });
             }
           } catch (error) {
@@ -57,7 +54,7 @@ export function useSaveShortcut() {
       }
     };
 
-    document.addEventListener('keydown', handleKeyDown);
-    return () => document.removeEventListener('keydown', handleKeyDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
   }, [selectors, state.ui.selectedFileIds, fileActions]);
 }
diff --git a/frontend/src/desktop/hooks/useSelfHostedAuth.ts b/frontend/src/desktop/hooks/useSelfHostedAuth.ts
index 30b716dedb..a8378f1ad8 100644
--- a/frontend/src/desktop/hooks/useSelfHostedAuth.ts
+++ b/frontend/src/desktop/hooks/useSelfHostedAuth.ts
@@ -1,7 +1,7 @@
-import { useState, useEffect, useRef } from 'react';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
-import { authService } from '@app/services/authService';
-import { connectionModeService } from '@app/services/connectionModeService';
+import { useState, useEffect, useRef } from "react";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
+import { authService } from "@app/services/authService";
+import { connectionModeService } from "@app/services/connectionModeService";
 
 export interface SelfHostedAuthState {
   isSelfHosted: boolean;
@@ -21,13 +21,13 @@ export function useSelfHostedAuth(): SelfHostedAuthState {
   const wasSelfHosted = useRef(false);
 
   useEffect(() => {
-    void connectionModeService.getCurrentMode().then(mode => setIsSelfHosted(mode === 'selfhosted'));
-    return connectionModeService.subscribeToModeChanges(cfg => setIsSelfHosted(cfg.mode === 'selfhosted'));
+    void connectionModeService.getCurrentMode().then((mode) => setIsSelfHosted(mode === "selfhosted"));
+    return connectionModeService.subscribeToModeChanges((cfg) => setIsSelfHosted(cfg.mode === "selfhosted"));
   }, []);
 
   useEffect(() => {
     void authService.isAuthenticated().then(setIsAuthenticated);
-    return authService.subscribeToAuth(status => setIsAuthenticated(status === 'authenticated'));
+    return authService.subscribeToAuth((status) => setIsAuthenticated(status === "authenticated"));
   }, []);
 
   useEffect(() => {
diff --git a/frontend/src/desktop/hooks/useSelfHostedToolAvailability.ts b/frontend/src/desktop/hooks/useSelfHostedToolAvailability.ts
index 43fceb7088..9bbe16ac7b 100644
--- a/frontend/src/desktop/hooks/useSelfHostedToolAvailability.ts
+++ b/frontend/src/desktop/hooks/useSelfHostedToolAvailability.ts
@@ -1,8 +1,8 @@
-import { useState, useEffect, useRef } from 'react';
-import { connectionModeService } from '@app/services/connectionModeService';
-import { tauriBackendService } from '@app/services/tauriBackendService';
-import { selfHostedServerMonitor } from '@app/services/selfHostedServerMonitor';
-import { endpointAvailabilityService } from '@app/services/endpointAvailabilityService';
+import { useState, useEffect, useRef } from "react";
+import { connectionModeService } from "@app/services/connectionModeService";
+import { tauriBackendService } from "@app/services/tauriBackendService";
+import { selfHostedServerMonitor } from "@app/services/selfHostedServerMonitor";
+import { endpointAvailabilityService } from "@app/services/endpointAvailabilityService";
 
 /**
  * Desktop implementation of useSelfHostedToolAvailability.
@@ -14,9 +14,7 @@ import { endpointAvailabilityService } from '@app/services/endpointAvailabilityS
  *  - Self-hosted server is online
  *  - Local backend port is not yet known
  */
-export function useSelfHostedToolAvailability(
-  tools: Array<{ id: string; endpoints?: string[] }>
-): Set<string> {
+export function useSelfHostedToolAvailability(tools: Array<{ id: string; endpoints?: string[] }>): Set<string> {
   const [unavailableIds, setUnavailableIds] = useState<Set<string>>(new Set());
   // Keep a stable ref to the latest tools list to avoid unnecessary re-subscriptions
   const toolsRef = useRef(tools);
@@ -27,13 +25,13 @@ export function useSelfHostedToolAvailability(
 
     const computeUnavailableTools = async () => {
       const mode = await connectionModeService.getCurrentMode();
-      if (mode !== 'selfhosted') {
+      if (mode !== "selfhosted") {
         setUnavailableIds(new Set());
         return;
       }
 
       const { status } = selfHostedServerMonitor.getSnapshot();
-      if (status !== 'offline') {
+      if (status !== "offline") {
         // Idle or checking — not yet confirmed offline; don't mark anything unavailable
         if (!cancelled) setUnavailableIds(new Set());
         return;
@@ -49,20 +47,18 @@ export function useSelfHostedToolAvailability(
       // For each tool, check whether at least one of its endpoints is supported locally
       const unavailable = new Set<string>();
       await Promise.all(
-        toolsRef.current.map(async tool => {
+        toolsRef.current.map(async (tool) => {
           const endpoints = tool.endpoints ?? [];
           if (endpoints.length === 0) return; // No endpoints → always available
 
           const locallySupported = await Promise.all(
-            endpoints.map(ep =>
-              endpointAvailabilityService.isEndpointSupportedLocally(ep, localUrl)
-            )
+            endpoints.map((ep) => endpointAvailabilityService.isEndpointSupportedLocally(ep, localUrl)),
           );
 
           if (!locallySupported.some(Boolean)) {
             unavailable.add(tool.id);
           }
-        })
+        }),
       );
 
       if (!cancelled) setUnavailableIds(unavailable);
diff --git a/frontend/src/desktop/hooks/useSharingEnabled.ts b/frontend/src/desktop/hooks/useSharingEnabled.ts
index bab59a771f..8c013a38f8 100644
--- a/frontend/src/desktop/hooks/useSharingEnabled.ts
+++ b/frontend/src/desktop/hooks/useSharingEnabled.ts
@@ -1,6 +1,6 @@
-import { useAppConfig } from '@app/contexts/AppConfigContext';
-import { useSelfHostedAuth } from '@app/hooks/useSelfHostedAuth';
-import type { SharingEnabledResult } from '@core/hooks/useSharingEnabled';
+import { useAppConfig } from "@app/contexts/AppConfigContext";
+import { useSelfHostedAuth } from "@app/hooks/useSelfHostedAuth";
+import type { SharingEnabledResult } from "@core/hooks/useSharingEnabled";
 
 /**
  * Desktop override: file-sharing features require self-hosted mode AND an
diff --git a/frontend/src/desktop/hooks/useToolCloudStatus.ts b/frontend/src/desktop/hooks/useToolCloudStatus.ts
index 18636a8b7c..04b8cda8fb 100644
--- a/frontend/src/desktop/hooks/useToolCloudStatus.ts
+++ b/frontend/src/desktop/hooks/useToolCloudStatus.ts
@@ -1,7 +1,7 @@
-import { useState, useEffect } from 'react';
-import { connectionModeService } from '@app/services/connectionModeService';
-import { endpointAvailabilityService } from '@app/services/endpointAvailabilityService';
-import { tauriBackendService } from '@app/services/tauriBackendService';
+import { useState, useEffect } from "react";
+import { connectionModeService } from "@app/services/connectionModeService";
+import { endpointAvailabilityService } from "@app/services/endpointAvailabilityService";
+import { tauriBackendService } from "@app/services/tauriBackendService";
 
 /**
  * Desktop hook to check if a tool endpoint will use cloud backend
@@ -28,7 +28,7 @@ export function useToolCloudStatus(endpointName?: string): boolean {
 
         // Check if in SaaS mode
         const mode = await connectionModeService.getCurrentMode();
-        if (mode !== 'saas') {
+        if (mode !== "saas") {
           setUsesCloud(false);
           return;
         }
@@ -45,7 +45,7 @@ export function useToolCloudStatus(endpointName?: string): boolean {
         // Available on SaaS, check if also available locally
         const supportedLocally = await endpointAvailabilityService.isEndpointSupportedLocally(
           endpointName,
-          tauriBackendService.getBackendUrl()
+          tauriBackendService.getBackendUrl(),
         );
         // Show cloud badge only if SaaS supports it but local doesn't
         setUsesCloud(!supportedLocally);
@@ -59,7 +59,7 @@ export function useToolCloudStatus(endpointName?: string): boolean {
 
     // Subscribe to backend status changes to re-check when backend becomes healthy
     const unsubscribe = tauriBackendService.subscribeToStatus((status) => {
-      if (status === 'healthy') {
+      if (status === "healthy") {
         checkCloudRouting();
       }
     });
diff --git a/frontend/src/desktop/hooks/useViewerKeyCommand.ts b/frontend/src/desktop/hooks/useViewerKeyCommand.ts
index 3a15af21e1..54f324196e 100644
--- a/frontend/src/desktop/hooks/useViewerKeyCommand.ts
+++ b/frontend/src/desktop/hooks/useViewerKeyCommand.ts
@@ -1,20 +1,23 @@
-import { useViewer } from "@app/contexts/ViewerContext"
+import { useViewer } from "@app/contexts/ViewerContext";
 import { useCallback } from "react";
 
 export function useViewerKeyCommand(): (event: KeyboardEvent) => boolean {
   const { rotationActions } = useViewer();
-  return useCallback((event:KeyboardEvent): boolean => {
-     switch (event.key) {
-        case 'r':
-        case 'R':
-            event.preventDefault();
-            if (event.shiftKey) {
-              rotationActions.rotateBackward();
-            } else {
-              rotationActions.rotateForward();
-            }
+  return useCallback(
+    (event: KeyboardEvent): boolean => {
+      switch (event.key) {
+        case "r":
+        case "R":
+          event.preventDefault();
+          if (event.shiftKey) {
+            rotationActions.rotateBackward();
+          } else {
+            rotationActions.rotateForward();
+          }
           return true;
       }
       return false;
-  }, [rotationActions]);
-}
\ No newline at end of file
+    },
+    [rotationActions],
+  );
+}
diff --git a/frontend/src/desktop/hooks/useWillUseCloud.ts b/frontend/src/desktop/hooks/useWillUseCloud.ts
index 754c2a9e49..549ba5bbe7 100644
--- a/frontend/src/desktop/hooks/useWillUseCloud.ts
+++ b/frontend/src/desktop/hooks/useWillUseCloud.ts
@@ -1,6 +1,6 @@
-import { useState, useEffect } from 'react';
-import { operationRouter } from '@app/services/operationRouter';
-import { tauriBackendService } from '@app/services/tauriBackendService';
+import { useState, useEffect } from "react";
+import { operationRouter } from "@app/services/operationRouter";
+import { tauriBackendService } from "@app/services/tauriBackendService";
 
 /**
  * Desktop hook to detect if an operation will use cloud/SaaS backend
@@ -29,7 +29,7 @@ export function useWillUseCloud(endpoint?: string): boolean {
         const willRoute = await operationRouter.willRouteToSaaS(endpoint);
         setWillUseCloud(willRoute);
       } catch (error) {
-        console.error('[useWillUseCloud] Failed to check cloud routing for endpoint:', endpoint, error);
+        console.error("[useWillUseCloud] Failed to check cloud routing for endpoint:", endpoint, error);
         setWillUseCloud(false);
       }
     };
@@ -39,7 +39,7 @@ export function useWillUseCloud(endpoint?: string): boolean {
 
     // Subscribe to backend status changes to re-check when backend becomes healthy
     const unsubscribe = tauriBackendService.subscribeToStatus((status) => {
-      if (status === 'healthy') {
+      if (status === "healthy") {
         checkCloudRouting();
       }
     });
diff --git a/frontend/src/desktop/routes/Landing.tsx b/frontend/src/desktop/routes/Landing.tsx
index 0fe981c485..ce48048951 100644
--- a/frontend/src/desktop/routes/Landing.tsx
+++ b/frontend/src/desktop/routes/Landing.tsx
@@ -1,4 +1,4 @@
-import HomePage from '@app/pages/HomePage';
+import HomePage from "@app/pages/HomePage";
 
 /**
  * Desktop override of Landing.
diff --git a/frontend/src/desktop/routes/Login.tsx b/frontend/src/desktop/routes/Login.tsx
index 6a2e4dcf8f..a895a4a035 100644
--- a/frontend/src/desktop/routes/Login.tsx
+++ b/frontend/src/desktop/routes/Login.tsx
@@ -1,4 +1,4 @@
-import { Navigate } from 'react-router-dom';
+import { Navigate } from "react-router-dom";
 
 /**
  * Desktop override of the /login route.
diff --git a/frontend/src/desktop/routes/login/LoginHeader.tsx b/frontend/src/desktop/routes/login/LoginHeader.tsx
index 354b36a8b6..75e63b9aea 100644
--- a/frontend/src/desktop/routes/login/LoginHeader.tsx
+++ b/frontend/src/desktop/routes/login/LoginHeader.tsx
@@ -1,6 +1,6 @@
-import { ActionIcon } from '@mantine/core';
-import CloseIcon from '@mui/icons-material/Close';
-import { useLogoAssets } from '@app/hooks/useLogoAssets';
+import { ActionIcon } from "@mantine/core";
+import CloseIcon from "@mui/icons-material/Close";
+import { useLogoAssets } from "@app/hooks/useLogoAssets";
 
 interface LoginHeaderProps {
   title: string;
@@ -17,11 +17,15 @@ export default function LoginHeader({ title, subtitle, centerOnly = false, onClo
   const { tooltipLogo } = useLogoAssets();
 
   return (
-    <div className={`login-header${centerOnly ? ' login-header-centered' : ''}`} style={{ marginBottom: '2rem' }}>
-      <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', gap: '0.75rem' }}>
-        <div style={{ display: 'flex', alignItems: 'center', gap: '0.6rem', flex: 1, minWidth: 0 }}>
+    <div className={`login-header${centerOnly ? " login-header-centered" : ""}`} style={{ marginBottom: "2rem" }}>
+      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: "0.75rem" }}>
+        <div style={{ display: "flex", alignItems: "center", gap: "0.6rem", flex: 1, minWidth: 0 }}>
           <img src={tooltipLogo} alt="Stirling PDF" style={{ width: 36, height: 36, flexShrink: 0 }} />
-          {title && <h1 className="login-title" style={{ margin: 0 }}>{title}</h1>}
+          {title && (
+            <h1 className="login-title" style={{ margin: 0 }}>
+              {title}
+            </h1>
+          )}
         </div>
         {onClose && (
           <ActionIcon
@@ -29,7 +33,7 @@ export default function LoginHeader({ title, subtitle, centerOnly = false, onClo
             radius="md"
             size={32}
             variant="subtle"
-            style={{ flexShrink: 0, color: 'var(--text-secondary)', outline: 'none' }}
+            style={{ flexShrink: 0, color: "var(--text-secondary)", outline: "none" }}
           >
             <CloseIcon fontSize="small" />
           </ActionIcon>
diff --git a/frontend/src/desktop/services/apiClient.ts b/frontend/src/desktop/services/apiClient.ts
index 257099c801..e646d95290 100644
--- a/frontend/src/desktop/services/apiClient.ts
+++ b/frontend/src/desktop/services/apiClient.ts
@@ -4,16 +4,16 @@
  * Bypasses CORS restrictions by using native HTTP instead of browser fetch
  */
 
-import type { AxiosInstance } from 'axios';
-import { create } from '@app/services/tauriHttpClient';
-import { handleHttpError } from '@app/services/httpErrorHandler';
-import { setupApiInterceptors } from '@app/services/apiClientSetup';
-import { getApiBaseUrl } from '@app/services/apiClientConfig';
+import type { AxiosInstance } from "axios";
+import { create } from "@app/services/tauriHttpClient";
+import { handleHttpError } from "@app/services/httpErrorHandler";
+import { setupApiInterceptors } from "@app/services/apiClientSetup";
+import { getApiBaseUrl } from "@app/services/apiClientConfig";
 
 // Create Tauri HTTP client with default config
 const apiClient = create({
   baseURL: getApiBaseUrl(),
-  responseType: 'json',
+  responseType: "json",
   withCredentials: false, // Desktop doesn't need credentials
 });
 
@@ -27,7 +27,7 @@ apiClient.interceptors.response.use(
   async (error) => {
     await handleHttpError(error); // Handle error (shows toast unless suppressed)
     return Promise.reject(error);
-  }
+  },
 );
 
 // ---------- Exports ----------
diff --git a/frontend/src/desktop/services/apiClientConfig.ts b/frontend/src/desktop/services/apiClientConfig.ts
index a936392c81..768d234bdb 100644
--- a/frontend/src/desktop/services/apiClientConfig.ts
+++ b/frontend/src/desktop/services/apiClientConfig.ts
@@ -1,4 +1,4 @@
-import { isTauri } from '@tauri-apps/api/core';
+import { isTauri } from "@tauri-apps/api/core";
 
 /**
  * Desktop override: Determine base URL depending on Tauri environment
@@ -15,7 +15,7 @@ import { isTauri } from '@tauri-apps/api/core';
 export function getApiBaseUrl(): string {
   if (!isTauri()) {
     // Runtime override to fix hardcoded localhost in builds
-    if (typeof window !== 'undefined' && (window as any).STIRLING_PDF_API_BASE_URL) {
+    if (typeof window !== "undefined" && (window as any).STIRLING_PDF_API_BASE_URL) {
       return (window as any).STIRLING_PDF_API_BASE_URL;
     }
 
@@ -26,5 +26,5 @@ export function getApiBaseUrl(): string {
   // The actual URL will be set dynamically by operationRouter based on:
   // - Offline mode: dynamic port from tauriBackendService
   // - Server mode: configured server URL from connectionModeService
-  return '';
+  return "";
 }
diff --git a/frontend/src/desktop/services/apiClientSetup.ts b/frontend/src/desktop/services/apiClientSetup.ts
index 13a5324851..462682a8c5 100644
--- a/frontend/src/desktop/services/apiClientSetup.ts
+++ b/frontend/src/desktop/services/apiClientSetup.ts
@@ -1,14 +1,14 @@
-import type { AxiosInstance, InternalAxiosRequestConfig } from 'axios';
-import { alert } from '@app/components/toast';
-import { setupApiInterceptors as coreSetup } from '@core/services/apiClientSetup';
-import { tauriBackendService } from '@app/services/tauriBackendService';
-import { createBackendNotReadyError } from '@app/constants/backendErrors';
-import { operationRouter } from '@app/services/operationRouter';
-import { authService } from '@app/services/authService';
-import { connectionModeService } from '@app/services/connectionModeService';
-import { STIRLING_SAAS_URL, STIRLING_SAAS_BACKEND_API_URL } from '@app/constants/connection';
-import { OPEN_SIGN_IN_EVENT } from '@app/constants/signInEvents';
-import i18n from '@app/i18n';
+import type { AxiosInstance, InternalAxiosRequestConfig } from "axios";
+import { alert } from "@app/components/toast";
+import { setupApiInterceptors as coreSetup } from "@core/services/apiClientSetup";
+import { tauriBackendService } from "@app/services/tauriBackendService";
+import { createBackendNotReadyError } from "@app/constants/backendErrors";
+import { operationRouter } from "@app/services/operationRouter";
+import { authService } from "@app/services/authService";
+import { connectionModeService } from "@app/services/connectionModeService";
+import { STIRLING_SAAS_URL, STIRLING_SAAS_BACKEND_API_URL } from "@app/constants/connection";
+import { OPEN_SIGN_IN_EVENT } from "@app/constants/signInEvents";
+import i18n from "@app/i18n";
 
 const BACKEND_TOAST_COOLDOWN_MS = 4000;
 let lastBackendToast = 0;
@@ -49,7 +49,7 @@ export function setupApiInterceptors(client: AxiosInstance): void {
         const baseUrl = await operationRouter.getBaseUrl(originalUrl);
 
         // Build the full URL
-        if (extendedConfig.url && !extendedConfig.url.startsWith('http')) {
+        if (extendedConfig.url && !extendedConfig.url.startsWith("http")) {
           extendedConfig.url = `${baseUrl}${extendedConfig.url}`;
         }
 
@@ -67,7 +67,9 @@ export function setupApiInterceptors(client: AxiosInstance): void {
         // Tag request so error handler can identify SaaS backend errors without URL matching
         extendedConfig._isSaaSRequest = isSaaSBackendRequest;
 
-        console.debug(`[apiClientSetup] Auth check: isRemote=${isRemote}, isSaaSBackendRequest=${isSaaSBackendRequest}, needsAuth=${needsAuth}, baseUrl=${baseUrl}`);
+        console.debug(
+          `[apiClientSetup] Auth check: isRemote=${isRemote}, isSaaSBackendRequest=${isSaaSBackendRequest}, needsAuth=${needsAuth}, baseUrl=${baseUrl}`,
+        );
 
         if (needsAuth) {
           // Enable credentials for session management
@@ -88,7 +90,7 @@ export function setupApiInterceptors(client: AxiosInstance): void {
           extendedConfig.withCredentials = false;
         }
       } catch (error) {
-        console.error('[apiClientSetup] Error in request interceptor:', error);
+        console.error("[apiClientSetup] Error in request interceptor:", error);
         // Continue with request even if routing/auth logic fails
         // This ensures requests aren't blocked by interceptor errors
       }
@@ -99,18 +101,20 @@ export function setupApiInterceptors(client: AxiosInstance): void {
       const backendStatus = tauriBackendService.getBackendStatus();
       const backendPort = tauriBackendService.getBackendPort();
 
-      console.debug(`[apiClientSetup] Backend readiness check for ${extendedConfig.url}: isSaaS=${isSaaS}, skipCheck=${skipCheck}, skipForSaaSBackend=${skipForSaaSBackend}, backendHealthy=${backendHealthy}, backendStatus=${backendStatus}, backendPort=${backendPort}`);
+      console.debug(
+        `[apiClientSetup] Backend readiness check for ${extendedConfig.url}: isSaaS=${isSaaS}, skipCheck=${skipCheck}, skipForSaaSBackend=${skipForSaaSBackend}, backendHealthy=${backendHealthy}, backendStatus=${backendStatus}, backendPort=${backendPort}`,
+      );
 
       if (isSaaS && !skipCheck && !skipForSaaSBackend && !backendHealthy) {
-        const method = (extendedConfig.method || 'get').toLowerCase();
-        if (method !== 'get') {
+        const method = (extendedConfig.method || "get").toLowerCase();
+        if (method !== "get") {
           const now = Date.now();
           if (now - lastBackendToast > BACKEND_TOAST_COOLDOWN_MS) {
             lastBackendToast = now;
             alert({
-              alertType: 'error',
-              title: i18n.t('backendHealth.offline', 'Backend Offline'),
-              body: i18n.t('backendHealth.wait', 'Please wait for the backend to finish launching and try again.'),
+              alertType: "error",
+              title: i18n.t("backendHealth.offline", "Backend Offline"),
+              body: i18n.t("backendHealth.wait", "Please wait for the backend to finish launching and try again."),
               isPersistentPopup: false,
             });
           }
@@ -120,7 +124,7 @@ export function setupApiInterceptors(client: AxiosInstance): void {
 
       return extendedConfig;
     },
-    (error) => Promise.reject(error)
+    (error) => Promise.reject(error),
   );
 
   // Response interceptor: Handle auth errors and update credits from headers
@@ -128,16 +132,18 @@ export function setupApiInterceptors(client: AxiosInstance): void {
     async (response) => {
       // Check for credit balance update in response headers
       // Backend includes X-Credits-Remaining header after operations that consume credits
-      const creditsHeader = response.headers['x-credits-remaining'];
+      const creditsHeader = response.headers["x-credits-remaining"];
 
       if (creditsHeader !== undefined && creditsHeader !== null) {
         const creditsRemaining = parseInt(creditsHeader, 10);
 
         if (!isNaN(creditsRemaining)) {
           // Dispatch event with new balance for immediate update
-          window.dispatchEvent(new CustomEvent('credits:updated', {
-            detail: { creditsRemaining }
-          }));
+          window.dispatchEvent(
+            new CustomEvent("credits:updated", {
+              detail: { creditsRemaining },
+            }),
+          );
         }
       }
 
@@ -145,8 +151,8 @@ export function setupApiInterceptors(client: AxiosInstance): void {
     },
     async (error) => {
       const originalRequest = error.config as ExtendedRequestConfig;
-      const requestUrl = String(originalRequest?.url || '');
-      const isAuthProbeRequest = requestUrl.includes('/api/v1/auth/me');
+      const requestUrl = String(originalRequest?.url || "");
+      const isAuthProbeRequest = requestUrl.includes("/api/v1/auth/me");
 
       // Handle 401 Unauthorized - try to refresh token
       if (error.response?.status === 401 && !originalRequest._retry) {
@@ -155,8 +161,8 @@ export function setupApiInterceptors(client: AxiosInstance): void {
         if (isAuthProbeRequest) {
           return Promise.reject(error);
         }
-        if (typeof window !== 'undefined') {
-          console.warn('[apiClientSetup] 401 on path:', window.location.pathname, 'url:', originalRequest.url);
+        if (typeof window !== "undefined") {
+          console.warn("[apiClientSetup] 401 on path:", window.location.pathname, "url:", originalRequest.url);
         }
         if (originalRequest.skipAuthRedirect) {
           return Promise.reject(error);
@@ -206,14 +212,14 @@ export function setupApiInterceptors(client: AxiosInstance): void {
       // Handle 403 Forbidden - unauthorized access
       if (error.response?.status === 403) {
         alert({
-          alertType: 'error',
-          title: i18n.t('auth.accessDenied', 'Access Denied'),
-          body: i18n.t('auth.insufficientPermissions', 'You do not have permission to perform this action.'),
+          alertType: "error",
+          title: i18n.t("auth.accessDenied", "Access Denied"),
+          body: i18n.t("auth.insufficientPermissions", "You do not have permission to perform this action."),
           isPersistentPopup: false,
         });
       }
 
       return Promise.reject(error);
-    }
+    },
   );
 }
diff --git a/frontend/src/desktop/services/authService.ts b/frontend/src/desktop/services/authService.ts
index b7751ce53a..7e9753e1b3 100644
--- a/frontend/src/desktop/services/authService.ts
+++ b/frontend/src/desktop/services/authService.ts
@@ -1,11 +1,11 @@
-import { invoke, isTauri } from '@tauri-apps/api/core';
-import { listen } from '@tauri-apps/api/event';
-import { open as shellOpen } from '@tauri-apps/plugin-shell';
-import { connectionModeService } from '@app/services/connectionModeService';
-import { tauriBackendService } from '@app/services/tauriBackendService';
-import axios from 'axios';
-import tauriHttpClient from '@app/services/tauriHttpClient';
-import { DESKTOP_DEEP_LINK_CALLBACK, STIRLING_SAAS_URL, SUPABASE_KEY } from '@app/constants/connection';
+import { invoke, isTauri } from "@tauri-apps/api/core";
+import { listen } from "@tauri-apps/api/event";
+import { open as shellOpen } from "@tauri-apps/plugin-shell";
+import { connectionModeService } from "@app/services/connectionModeService";
+import { tauriBackendService } from "@app/services/tauriBackendService";
+import axios from "axios";
+import tauriHttpClient from "@app/services/tauriHttpClient";
+import { DESKTOP_DEEP_LINK_CALLBACK, STIRLING_SAAS_URL, SUPABASE_KEY } from "@app/constants/connection";
 
 export interface UserInfo {
   username: string;
@@ -33,11 +33,11 @@ interface OAuthCallbackResult {
   expires_in: number | null;
 }
 
-export type AuthStatus = 'authenticated' | 'unauthenticated' | 'refreshing' | 'oauth_pending';
+export type AuthStatus = "authenticated" | "unauthenticated" | "refreshing" | "oauth_pending";
 
 export class AuthService {
   private static instance: AuthService;
-  private authStatus: AuthStatus = 'unauthenticated';
+  private authStatus: AuthStatus = "unauthenticated";
   private userInfo: UserInfo | null = null;
   private cachedToken: string | null = null;
   private lastTokenSaveTime: number = 0;
@@ -55,30 +55,26 @@ export class AuthService {
   /**
    * Save token to all storage locations and notify listeners
    */
-  private async saveTokenEverywhere(
-    token: string,
-    refreshToken?: string | null,
-    emitJwtAvailable = true
-  ): Promise<void> {
+  private async saveTokenEverywhere(token: string, refreshToken?: string | null, emitJwtAvailable = true): Promise<void> {
     // Validate token before caching
     if (!token || token.trim().length === 0) {
-      console.warn('[Desktop AuthService] Attempted to save invalid/empty token');
-      throw new Error('Invalid token');
+      console.warn("[Desktop AuthService] Attempted to save invalid/empty token");
+      throw new Error("Invalid token");
     }
 
     // Save access token to Tauri secure store (primary)
     try {
-      await invoke('save_auth_token', { token });
+      await invoke("save_auth_token", { token });
     } catch (error) {
-      console.error('[Desktop AuthService] Failed to save token to Tauri store:', error);
+      console.error("[Desktop AuthService] Failed to save token to Tauri store:", error);
       // Don't throw - we can still use localStorage
     }
 
     // Sync to localStorage for web layer (fallback)
     try {
-      localStorage.setItem('stirling_jwt', token);
+      localStorage.setItem("stirling_jwt", token);
     } catch (error) {
-      console.error('[Desktop AuthService] Failed to save token to localStorage:', error);
+      console.error("[Desktop AuthService] Failed to save token to localStorage:", error);
     }
 
     // Cache the valid token in memory
@@ -88,17 +84,17 @@ export class AuthService {
     // Save refresh token if provided (keyring with Tauri Store fallback)
     if (refreshToken) {
       try {
-        await invoke('save_refresh_token', { token: refreshToken });
+        await invoke("save_refresh_token", { token: refreshToken });
         // Only remove from localStorage after successful save
-        localStorage.removeItem('stirling_refresh_token');
+        localStorage.removeItem("stirling_refresh_token");
       } catch (error) {
-        console.error('[Desktop AuthService] Failed to save refresh token:', error);
+        console.error("[Desktop AuthService] Failed to save refresh token:", error);
       }
     }
 
     if (emitJwtAvailable) {
       // Notify other parts of the system when a brand-new auth session is established.
-      window.dispatchEvent(new CustomEvent('jwt-available'));
+      window.dispatchEvent(new CustomEvent("jwt-available"));
     }
   }
 
@@ -108,23 +104,23 @@ export class AuthService {
   private async getTokenFromAnySource(): Promise<string | null> {
     // Try Tauri store first
     try {
-      const token = await invoke<string | null>('get_auth_token');
+      const token = await invoke<string | null>("get_auth_token");
       if (token) {
         return token;
       }
     } catch (error) {
-      console.error('[Desktop AuthService] Failed to read from Tauri store:', error);
+      console.error("[Desktop AuthService] Failed to read from Tauri store:", error);
     }
 
     // Fallback to localStorage
-    return localStorage.getItem('stirling_jwt');
+    return localStorage.getItem("stirling_jwt");
   }
 
   /**
    * Get refresh token from secure storage (keyring or Tauri Store fallback)
    */
   private async getRefreshToken(): Promise<string | null> {
-    return await invoke<string | null>('get_refresh_token');
+    return await invoke<string | null>("get_refresh_token");
   }
 
   /**
@@ -136,23 +132,23 @@ export class AuthService {
 
     // Best effort: clear Tauri keyring (both access and refresh tokens)
     try {
-      await invoke('clear_auth_token');
+      await invoke("clear_auth_token");
     } catch (error) {
-      console.warn('[Desktop AuthService] Failed to clear Tauri keyring access token', error);
+      console.warn("[Desktop AuthService] Failed to clear Tauri keyring access token", error);
     }
 
     try {
-      await invoke('clear_refresh_token');
+      await invoke("clear_refresh_token");
     } catch (error) {
-      console.warn('[Desktop AuthService] Failed to clear Tauri keyring refresh token', error);
+      console.warn("[Desktop AuthService] Failed to clear Tauri keyring refresh token", error);
     }
 
     // Best effort: clear web storage
     try {
-      localStorage.removeItem('stirling_jwt');
-      localStorage.removeItem('stirling_refresh_token');
+      localStorage.removeItem("stirling_jwt");
+      localStorage.removeItem("stirling_refresh_token");
     } catch (error) {
-      console.warn('[Desktop AuthService] Failed to clear localStorage tokens', error);
+      console.warn("[Desktop AuthService] Failed to clear localStorage tokens", error);
     }
   }
 
@@ -162,11 +158,11 @@ export class AuthService {
   async localClearAuth(): Promise<void> {
     await this.clearTokenEverywhere().catch(() => {});
     try {
-      await invoke('clear_user_info');
+      await invoke("clear_user_info");
     } catch (err) {
-      console.warn('[Desktop AuthService] Failed to clear user info', err);
+      console.warn("[Desktop AuthService] Failed to clear user info", err);
     }
-    this.setAuthStatus('unauthenticated', null);
+    this.setAuthStatus("unauthenticated", null);
   }
 
   subscribeToAuth(listener: (status: AuthStatus, userInfo: UserInfo | null) => void): () => void {
@@ -183,7 +179,7 @@ export class AuthService {
   }
 
   private notifyListeners() {
-    this.authListeners.forEach(listener => listener(this.authStatus, this.userInfo));
+    this.authListeners.forEach((listener) => listener(this.authStatus, this.userInfo));
   }
 
   private setAuthStatus(status: AuthStatus, userInfo: UserInfo | null = null) {
@@ -201,44 +197,41 @@ export class AuthService {
     // Stop simulating once the user has freshly authenticated in this session
     // (e.g. after completing re-auth via the sign-in modal). This prevents the
     // simulation from looping: expired → modal → re-auth → expired → modal…
-    if (this.authStatus === 'authenticated') return false;
-    return (
-      import.meta.env.DEV &&
-      String(import.meta.env.VITE_DEV_SIMULATE_EXPIRED_JWT ?? '').toLowerCase() === 'true'
-    );
+    if (this.authStatus === "authenticated") return false;
+    return import.meta.env.DEV && String(import.meta.env.VITE_DEV_SIMULATE_EXPIRED_JWT ?? "").toLowerCase() === "true";
   }
 
   async completeSupabaseSession(accessToken: string, serverUrl: string): Promise<UserInfo> {
     if (!accessToken || !accessToken.trim()) {
-      throw new Error('Invalid access token');
+      throw new Error("Invalid access token");
     }
     if (!SUPABASE_KEY) {
-      throw new Error('VITE_SUPABASE_PUBLISHABLE_DEFAULT_KEY is not configured');
+      throw new Error("VITE_SUPABASE_PUBLISHABLE_DEFAULT_KEY is not configured");
     }
 
     await this.saveTokenEverywhere(accessToken);
 
     const userInfo = await this.fetchSupabaseUserInfo(serverUrl, accessToken);
 
-    await invoke('save_user_info', {
+    await invoke("save_user_info", {
       username: userInfo.username,
       email: userInfo.email || null,
     });
 
-    this.setAuthStatus('authenticated', userInfo);
+    this.setAuthStatus("authenticated", userInfo);
     return userInfo;
   }
 
   async signUpSaas(email: string, password: string): Promise<void> {
     if (!STIRLING_SAAS_URL) {
-      throw new Error('VITE_SAAS_SERVER_URL is not configured');
+      throw new Error("VITE_SAAS_SERVER_URL is not configured");
     }
     if (!SUPABASE_KEY) {
-      throw new Error('VITE_SUPABASE_PUBLISHABLE_DEFAULT_KEY is not configured');
+      throw new Error("VITE_SUPABASE_PUBLISHABLE_DEFAULT_KEY is not configured");
     }
 
     const redirectParam = encodeURIComponent(DESKTOP_DEEP_LINK_CALLBACK);
-    const signupUrl = `${STIRLING_SAAS_URL.replace(/\/$/, '')}/auth/v1/signup?redirect_to=${redirectParam}`;
+    const signupUrl = `${STIRLING_SAAS_URL.replace(/\/$/, "")}/auth/v1/signup?redirect_to=${redirectParam}`;
 
     try {
       const response = await axios.post(
@@ -246,15 +239,15 @@ export class AuthService {
         { email, password, email_redirect_to: DESKTOP_DEEP_LINK_CALLBACK },
         {
           headers: {
-            'Content-Type': 'application/json;charset=UTF-8',
+            "Content-Type": "application/json;charset=UTF-8",
             apikey: SUPABASE_KEY,
             Authorization: `Bearer ${SUPABASE_KEY}`,
           },
-        }
+        },
       );
 
       if (response.status >= 400) {
-        throw new Error('Sign up failed');
+        throw new Error("Sign up failed");
       }
     } catch (error) {
       if (axios.isAxiosError(error)) {
@@ -263,9 +256,9 @@ export class AuthService {
           error.response?.data?.msg ||
           error.response?.data?.message ||
           error.message;
-        throw new Error(message || 'Sign up failed', { cause: error });
+        throw new Error(message || "Sign up failed", { cause: error });
       }
-      throw error instanceof Error ? error : new Error('Sign up failed', { cause: error });
+      throw error instanceof Error ? error : new Error("Sign up failed", { cause: error });
     }
   }
 
@@ -274,15 +267,15 @@ export class AuthService {
       // Validate SaaS configuration if connecting to SaaS
       if (serverUrl === STIRLING_SAAS_URL) {
         if (!STIRLING_SAAS_URL) {
-          throw new Error('VITE_SAAS_SERVER_URL is not configured');
+          throw new Error("VITE_SAAS_SERVER_URL is not configured");
         }
         if (!SUPABASE_KEY) {
-          throw new Error('VITE_SUPABASE_PUBLISHABLE_DEFAULT_KEY is not configured');
+          throw new Error("VITE_SUPABASE_PUBLISHABLE_DEFAULT_KEY is not configured");
         }
       }
 
       // Call Rust login command (bypasses CORS)
-      const response = await invoke<LoginResponse>('login', {
+      const response = await invoke<LoginResponse>("login", {
         serverUrl,
         username,
         password,
@@ -297,12 +290,12 @@ export class AuthService {
       try {
         await this.saveTokenEverywhere(token);
       } catch (error) {
-        console.error('[Desktop AuthService] Failed to save token:', error);
-        throw new Error('Failed to save authentication token', { cause: error });
+        console.error("[Desktop AuthService] Failed to save token:", error);
+        throw new Error("Failed to save authentication token", { cause: error });
       }
 
       // Save user info to store
-      await invoke('save_user_info', {
+      await invoke("save_user_info", {
         username: returnedUsername || username,
         email,
       });
@@ -312,78 +305,88 @@ export class AuthService {
         email: email || undefined,
       };
 
-      this.setAuthStatus('authenticated', userInfo);
+      this.setAuthStatus("authenticated", userInfo);
 
       return userInfo;
     } catch (error) {
-      console.error('[Desktop AuthService] Login failed:', error);
+      console.error("[Desktop AuthService] Login failed:", error);
 
       // Provide more detailed error messages based on the error type
-      if (error instanceof Error || typeof error === 'string') {
-        const rawMessage = typeof error === 'string' ? error : error.message;
+      if (error instanceof Error || typeof error === "string") {
+        const rawMessage = typeof error === "string" ? error : error.message;
         const errMsg = rawMessage.toLowerCase();
 
-        if (errMsg.includes('mfa_required')) {
-          this.setAuthStatus('unauthenticated', null);
-          throw new AuthServiceError('Two-factor code required.', 'mfa_required');
+        if (errMsg.includes("mfa_required")) {
+          this.setAuthStatus("unauthenticated", null);
+          throw new AuthServiceError("Two-factor code required.", "mfa_required");
         }
 
-        if (errMsg.includes('invalid_mfa_code')) {
-          this.setAuthStatus('unauthenticated', null);
-          throw new AuthServiceError('Invalid two-factor code.', 'invalid_mfa_code');
+        if (errMsg.includes("invalid_mfa_code")) {
+          this.setAuthStatus("unauthenticated", null);
+          throw new AuthServiceError("Invalid two-factor code.", "invalid_mfa_code");
         }
 
         // Authentication errors
-        if (errMsg.includes('401') || errMsg.includes('unauthorized') || errMsg.includes('invalid credentials')) {
-          this.setAuthStatus('unauthenticated', null);
-          throw new Error('Invalid username or password. Please check your credentials and try again.', {
+        if (errMsg.includes("401") || errMsg.includes("unauthorized") || errMsg.includes("invalid credentials")) {
+          this.setAuthStatus("unauthenticated", null);
+          throw new Error("Invalid username or password. Please check your credentials and try again.", {
             cause: error,
           });
         }
         // Server not found or unreachable
-        else if (errMsg.includes('connection refused') || errMsg.includes('econnrefused')) {
-          this.setAuthStatus('unauthenticated', null);
-          throw new Error('Cannot connect to server. Please check the server URL and ensure the server is running.', {
+        else if (errMsg.includes("connection refused") || errMsg.includes("econnrefused")) {
+          this.setAuthStatus("unauthenticated", null);
+          throw new Error("Cannot connect to server. Please check the server URL and ensure the server is running.", {
             cause: error,
           });
         }
         // Timeout
-        else if (errMsg.includes('timeout') || errMsg.includes('timed out')) {
-          this.setAuthStatus('unauthenticated', null);
-          throw new Error('Login request timed out. Please check your network connection and try again.', {
+        else if (errMsg.includes("timeout") || errMsg.includes("timed out")) {
+          this.setAuthStatus("unauthenticated", null);
+          throw new Error("Login request timed out. Please check your network connection and try again.", {
             cause: error,
           });
         }
         // DNS failure
-        else if (errMsg.includes('getaddrinfo') || errMsg.includes('dns') || errMsg.includes('not found') || errMsg.includes('enotfound')) {
-          this.setAuthStatus('unauthenticated', null);
-          throw new Error('Cannot resolve server address. Please check the server URL is correct.', { cause: error });
+        else if (
+          errMsg.includes("getaddrinfo") ||
+          errMsg.includes("dns") ||
+          errMsg.includes("not found") ||
+          errMsg.includes("enotfound")
+        ) {
+          this.setAuthStatus("unauthenticated", null);
+          throw new Error("Cannot resolve server address. Please check the server URL is correct.", { cause: error });
         }
         // SSL/TLS errors
-        else if (errMsg.includes('ssl') || errMsg.includes('tls') || errMsg.includes('certificate') || errMsg.includes('cert')) {
-          this.setAuthStatus('unauthenticated', null);
-          throw new Error('SSL/TLS certificate error. Server may have an invalid or self-signed certificate.', {
+        else if (
+          errMsg.includes("ssl") ||
+          errMsg.includes("tls") ||
+          errMsg.includes("certificate") ||
+          errMsg.includes("cert")
+        ) {
+          this.setAuthStatus("unauthenticated", null);
+          throw new Error("SSL/TLS certificate error. Server may have an invalid or self-signed certificate.", {
             cause: error,
           });
         }
         // 404 - endpoint not found
-        else if (errMsg.includes('404') || errMsg.includes('not found')) {
-          this.setAuthStatus('unauthenticated', null);
-          throw new Error('Login endpoint not found. Please ensure you are connecting to a valid Stirling PDF server.', {
+        else if (errMsg.includes("404") || errMsg.includes("not found")) {
+          this.setAuthStatus("unauthenticated", null);
+          throw new Error("Login endpoint not found. Please ensure you are connecting to a valid Stirling PDF server.", {
             cause: error,
           });
         }
         // 403 - security disabled
-        else if (errMsg.includes('403') || errMsg.includes('forbidden')) {
-          this.setAuthStatus('unauthenticated', null);
-          throw new Error('Login is not enabled on this server. Please enable security mode (DOCKER_ENABLE_SECURITY=true).', {
+        else if (errMsg.includes("403") || errMsg.includes("forbidden")) {
+          this.setAuthStatus("unauthenticated", null);
+          throw new Error("Login is not enabled on this server. Please enable security mode (DOCKER_ENABLE_SECURITY=true).", {
             cause: error,
           });
         }
       }
 
       // Generic error fallback
-      this.setAuthStatus('unauthenticated', null);
+      this.setAuthStatus("unauthenticated", null);
       throw error;
     }
   }
@@ -405,7 +408,7 @@ export class AuthService {
         const token = await this.getAuthToken();
 
         if (serverUrl && token) {
-          const base = serverUrl.replace(/\/+$/, '');
+          const base = serverUrl.replace(/\/+$/, "");
           const headers: Record<string, string> = { Authorization: `Bearer ${token}` };
 
           // Treat 401/403 as benign (session already expired)
@@ -430,20 +433,20 @@ export class AuthService {
           await safePost(`${base}/logout`);
         }
       } catch (err) {
-        console.warn('[Desktop AuthService] Failed to call backend logout endpoint', err);
+        console.warn("[Desktop AuthService] Failed to call backend logout endpoint", err);
       }
 
       // Clear token from all storage locations
       await this.clearTokenEverywhere();
 
       // Clear user info from Tauri store
-      await invoke('clear_user_info');
+      await invoke("clear_user_info");
 
-      this.setAuthStatus('unauthenticated', null);
+      this.setAuthStatus("unauthenticated", null);
     } catch (error) {
-      console.error('Error during logout:', error);
+      console.error("Error during logout:", error);
       // Still set status to unauthenticated even if clear fails
-      this.setAuthStatus('unauthenticated', null);
+      this.setAuthStatus("unauthenticated", null);
       // Still try to clear token
       await this.clearTokenEverywhere().catch(() => {});
     }
@@ -457,33 +460,33 @@ export class AuthService {
         // Health checks run every 5s, so 30s leeway would cause 5-6 unnecessary cache clears
         // The 30s leeway is used elsewhere for proactive refresh before user operations
         if (this.isTokenExpiringSoon(this.cachedToken, 5)) {
-          console.warn('[Desktop AuthService] ⚠️ Cached token is expired or expiring soon, invalidating cache');
+          console.warn("[Desktop AuthService] ⚠️ Cached token is expired or expiring soon, invalidating cache");
           this.cachedToken = null;
           // Fall through to fetch from storage
         } else {
-          console.debug('[Desktop AuthService] ✅ Returning cached token');
+          console.debug("[Desktop AuthService] ✅ Returning cached token");
           return this.cachedToken;
         }
       }
 
-      console.debug('[Desktop AuthService] Cache miss, fetching from storage...');
+      console.debug("[Desktop AuthService] Cache miss, fetching from storage...");
       const token = await this.getTokenFromAnySource();
 
       // Cache token if found (backend will validate expiry)
       if (token && token.trim().length > 0) {
         if (this.shouldSimulateExpiredJwt()) {
           console.warn(
-            '[Desktop AuthService] DEV: VITE_DEV_SIMULATE_EXPIRED_JWT — ignoring stored access token (simulates expiry)'
+            "[Desktop AuthService] DEV: VITE_DEV_SIMULATE_EXPIRED_JWT — ignoring stored access token (simulates expiry)",
           );
           return null;
         }
         this.cachedToken = token;
-        console.log('[Desktop AuthService] ✅ Token cached in memory after retrieval');
+        console.log("[Desktop AuthService] ✅ Token cached in memory after retrieval");
         return token;
       }
       return null;
     } catch (error) {
-      console.error('[Desktop AuthService] Failed to get auth token:', error);
+      console.error("[Desktop AuthService] Failed to get auth token:", error);
       return null;
     }
   }
@@ -495,22 +498,22 @@ export class AuthService {
 
   async getUserInfo(): Promise<UserInfo | null> {
     if (this.userInfo) {
-      console.log('[Desktop AuthService] Using cached user info:', this.userInfo.username);
+      console.log("[Desktop AuthService] Using cached user info:", this.userInfo.username);
       return this.userInfo;
     }
 
     try {
-      console.log('[Desktop AuthService] Retrieving user info from store...');
-      const userInfo = await invoke<UserInfo | null>('get_user_info');
+      console.log("[Desktop AuthService] Retrieving user info from store...");
+      const userInfo = await invoke<UserInfo | null>("get_user_info");
       if (userInfo) {
-        console.log('[Desktop AuthService] User info found:', userInfo.username);
+        console.log("[Desktop AuthService] User info found:", userInfo.username);
         this.userInfo = userInfo;
       } else {
-        console.log('[Desktop AuthService] No user info in store');
+        console.log("[Desktop AuthService] No user info in store");
       }
       return userInfo;
     } catch (error) {
-      console.error('[Desktop AuthService] Failed to get user info from store:', error);
+      console.error("[Desktop AuthService] Failed to get user info from store:", error);
       return null;
     }
   }
@@ -520,10 +523,10 @@ export class AuthService {
       return false;
     }
     try {
-      console.debug('[Desktop AuthService] Waiting for in-flight refresh to complete');
+      console.debug("[Desktop AuthService] Waiting for in-flight refresh to complete");
       return await this.refreshPromise;
     } catch (error) {
-      console.warn('[Desktop AuthService] In-flight refresh failed while waiting', error);
+      console.warn("[Desktop AuthService] In-flight refresh failed while waiting", error);
       return false;
     }
   }
@@ -531,27 +534,27 @@ export class AuthService {
   isTokenExpiringSoon(token: string, leewaySeconds = 30): boolean {
     if (this.shouldSimulateExpiredJwt()) {
       console.warn(
-        '[Desktop AuthService] DEV: VITE_DEV_SIMULATE_EXPIRED_JWT — treating token as expired (isTokenExpiringSoon)'
+        "[Desktop AuthService] DEV: VITE_DEV_SIMULATE_EXPIRED_JWT — treating token as expired (isTokenExpiringSoon)",
       );
       return true;
     }
     try {
-      const parts = token.split('.');
+      const parts = token.split(".");
       if (parts.length < 2) {
-        console.warn('[Desktop AuthService] Token malformed - less than 2 parts');
+        console.warn("[Desktop AuthService] Token malformed - less than 2 parts");
         return true;
       }
 
       const base64Url = parts[1];
       const base64 = base64Url
-        .replace(/-/g, '+')
-        .replace(/_/g, '/')
-        .padEnd(Math.ceil(base64Url.length / 4) * 4, '=');
+        .replace(/-/g, "+")
+        .replace(/_/g, "/")
+        .padEnd(Math.ceil(base64Url.length / 4) * 4, "=");
       const payload = JSON.parse(atob(base64));
-      const expSeconds = typeof payload?.exp === 'number' ? payload.exp : 0;
+      const expSeconds = typeof payload?.exp === "number" ? payload.exp : 0;
 
       if (!expSeconds) {
-        console.warn('[Desktop AuthService] Token has no exp claim');
+        console.warn("[Desktop AuthService] Token has no exp claim");
         return true;
       }
 
@@ -560,16 +563,16 @@ export class AuthService {
       const timeUntilExpiry = expSeconds - nowSeconds;
       const isExpiring = expSeconds <= nowWithLeeway;
 
-      console.debug('[Desktop AuthService] Token expiry check:', {
-        expiresIn: timeUntilExpiry + 's',
-        leeway: leewaySeconds + 's',
-        isExpiring
+      console.debug("[Desktop AuthService] Token expiry check:", {
+        expiresIn: timeUntilExpiry + "s",
+        leeway: leewaySeconds + "s",
+        isExpiring,
       });
 
       return isExpiring;
     } catch (err) {
       // If parsing fails, treat token as unsafe/stale and force refresh path.
-      console.warn('[Desktop AuthService] Token parsing failed:', err);
+      console.warn("[Desktop AuthService] Token parsing failed:", err);
       return true;
     }
   }
@@ -577,7 +580,7 @@ export class AuthService {
   async refreshToken(serverUrl: string): Promise<boolean> {
     // Prevent concurrent refresh attempts - reuse in-flight refresh
     if (this.refreshPromise) {
-      console.log('[Desktop AuthService] Refresh already in progress, awaiting existing refresh');
+      console.log("[Desktop AuthService] Refresh already in progress, awaiting existing refresh");
       return this.refreshPromise;
     }
 
@@ -591,12 +594,12 @@ export class AuthService {
 
   private async _doRefreshToken(serverUrl: string): Promise<boolean> {
     try {
-      console.log('[Desktop AuthService] Refreshing auth token');
-      this.setAuthStatus('refreshing', this.userInfo);
+      console.log("[Desktop AuthService] Refreshing auth token");
+      this.setAuthStatus("refreshing", this.userInfo);
 
       const currentToken = await this.getAuthToken();
       if (!currentToken) {
-        this.setAuthStatus('unauthenticated', null);
+        this.setAuthStatus("unauthenticated", null);
         return false;
       }
 
@@ -609,17 +612,14 @@ export class AuthService {
           headers: {
             Authorization: `Bearer ${currentToken}`,
           },
-        }
+        },
       );
 
-      const token =
-        response.data?.session?.access_token ??
-        response.data?.access_token ??
-        response.data?.token;
+      const token = response.data?.session?.access_token ?? response.data?.access_token ?? response.data?.token;
 
       if (!token) {
-        console.error('[Desktop AuthService] Refresh response missing token payload');
-        this.setAuthStatus('unauthenticated', null);
+        console.error("[Desktop AuthService] Refresh response missing token payload");
+        this.setAuthStatus("unauthenticated", null);
         await this.logout();
         return false;
       }
@@ -628,13 +628,13 @@ export class AuthService {
       await this.saveTokenEverywhere(token, undefined, false);
 
       const userInfo = await this.getUserInfo();
-      this.setAuthStatus('authenticated', userInfo);
+      this.setAuthStatus("authenticated", userInfo);
 
-      console.log('[Desktop AuthService] Token refreshed successfully');
+      console.log("[Desktop AuthService] Token refreshed successfully");
       return true;
     } catch (error) {
-      console.error('[Desktop AuthService] Token refresh failed:', error);
-      this.setAuthStatus('unauthenticated', null);
+      console.error("[Desktop AuthService] Token refresh failed:", error);
+      this.setAuthStatus("unauthenticated", null);
 
       // Clear stored credentials on refresh failure
       await this.logout();
@@ -646,7 +646,7 @@ export class AuthService {
   async refreshSupabaseToken(authServerUrl: string): Promise<boolean> {
     // Prevent concurrent refresh attempts - reuse in-flight refresh
     if (this.refreshPromise) {
-      console.log('[Desktop AuthService] Refresh already in progress, awaiting existing refresh');
+      console.log("[Desktop AuthService] Refresh already in progress, awaiting existing refresh");
       return this.refreshPromise;
     }
 
@@ -660,13 +660,13 @@ export class AuthService {
 
   private async _doRefreshSupabaseToken(authServerUrl: string): Promise<boolean> {
     try {
-      console.log('[Desktop AuthService] Refreshing Supabase token');
-      this.setAuthStatus('refreshing', this.userInfo);
+      console.log("[Desktop AuthService] Refreshing Supabase token");
+      this.setAuthStatus("refreshing", this.userInfo);
 
       const refreshToken = await this.getRefreshToken();
       if (!refreshToken) {
-        console.error('[Desktop AuthService] No refresh token available');
-        this.setAuthStatus('unauthenticated', null);
+        console.error("[Desktop AuthService] No refresh token available");
+        this.setAuthStatus("unauthenticated", null);
         return false;
       }
 
@@ -678,10 +678,10 @@ export class AuthService {
         },
         {
           headers: {
-            'apikey': SUPABASE_KEY,
-            'Content-Type': 'application/json',
+            apikey: SUPABASE_KEY,
+            "Content-Type": "application/json",
           },
-        }
+        },
       );
 
       const { access_token, refresh_token: newRefreshToken } = response.data;
@@ -690,13 +690,13 @@ export class AuthService {
       await this.saveTokenEverywhere(access_token, newRefreshToken, false);
 
       const userInfo = await this.getUserInfo();
-      this.setAuthStatus('authenticated', userInfo);
+      this.setAuthStatus("authenticated", userInfo);
 
-      console.log('[Desktop AuthService] Supabase token refreshed successfully');
+      console.log("[Desktop AuthService] Supabase token refreshed successfully");
       return true;
     } catch (error) {
-      console.error('[Desktop AuthService] Supabase token refresh failed:', error);
-      this.setAuthStatus('unauthenticated', null);
+      console.error("[Desktop AuthService] Supabase token refresh failed:", error);
+      this.setAuthStatus("unauthenticated", null);
 
       // Clear stored credentials on refresh failure
       await this.logout();
@@ -706,30 +706,30 @@ export class AuthService {
   }
 
   async initializeAuthState(): Promise<void> {
-    console.log('[Desktop AuthService] Initializing auth state...');
+    console.log("[Desktop AuthService] Initializing auth state...");
     // If we are on the login/setup screen, don't auto-restore a previous session; clear instead
-    const path = typeof window !== 'undefined' ? window.location.pathname : '';
-    if (path.startsWith('/login') || path.startsWith('/setup')) {
+    const path = typeof window !== "undefined" ? window.location.pathname : "";
+    if (path.startsWith("/login") || path.startsWith("/setup")) {
       // Check if token exists in storage (user just logged in via web flow)
-      const tokenInStorage = typeof window !== 'undefined' ? localStorage.getItem('stirling_jwt') : null;
+      const tokenInStorage = typeof window !== "undefined" ? localStorage.getItem("stirling_jwt") : null;
       if (tokenInStorage) {
-        console.log('[Desktop AuthService] On login/setup path with token present - skipping validation');
-        console.log('[Desktop AuthService] Login flow will handle authentication state');
+        console.log("[Desktop AuthService] On login/setup path with token present - skipping validation");
+        console.log("[Desktop AuthService] Login flow will handle authentication state");
         // Return early to avoid clearing partial state during login completion
         // The login completion handler (completeSelfHostedSession) will:
         // 1. Fetch and save user info
         // 2. Set auth status to authenticated
         return;
       } else {
-        console.log('[Desktop AuthService] On login/setup path, clearing any cached auth');
+        console.log("[Desktop AuthService] On login/setup path, clearing any cached auth");
         // Local clear only; avoid backend logout to prevent noisy errors when already unauthenticated
         await this.clearTokenEverywhere().catch(() => {});
         try {
-          await invoke('clear_user_info');
+          await invoke("clear_user_info");
         } catch (err) {
-          console.warn('[Desktop AuthService] Failed to clear user info on login/setup init', err);
+          console.warn("[Desktop AuthService] Failed to clear user info on login/setup init", err);
         }
-        this.setAuthStatus('unauthenticated', null);
+        this.setAuthStatus("unauthenticated", null);
         return;
       }
     }
@@ -738,13 +738,13 @@ export class AuthService {
     const userInfo = await this.getUserInfo();
 
     if (token && userInfo) {
-      console.log('[Desktop AuthService] Found existing token and user info');
-      this.setAuthStatus('authenticated', userInfo);
-      console.log('[Desktop AuthService] Auth state initialized as authenticated');
+      console.log("[Desktop AuthService] Found existing token and user info");
+      this.setAuthStatus("authenticated", userInfo);
+      console.log("[Desktop AuthService] Auth state initialized as authenticated");
     } else {
-      console.log('[Desktop AuthService] No token or user info found');
-      this.setAuthStatus('unauthenticated', null);
-      console.log('[Desktop AuthService] Auth state initialized as unauthenticated');
+      console.log("[Desktop AuthService] No token or user info found");
+      this.setAuthStatus("unauthenticated", null);
+      console.log("[Desktop AuthService] Auth state initialized as unauthenticated");
 
       // Defensive: ensure any partial tokens are purged to prevent auto-login loops.
       // Skip when simulating expiry — the token is real and must not be destroyed.
@@ -759,12 +759,12 @@ export class AuthService {
    */
   async loginWithOAuth(provider: string, authServerUrl: string, successHtml: string, errorHtml: string): Promise<UserInfo> {
     try {
-      console.log('[Desktop AuthService] Starting OAuth login with provider:', provider);
-      this.setAuthStatus('oauth_pending', null);
+      console.log("[Desktop AuthService] Starting OAuth login with provider:", provider);
+      this.setAuthStatus("oauth_pending", null);
 
       // Validate Supabase key is configured for OAuth
       if (!SUPABASE_KEY) {
-        throw new Error('VITE_SUPABASE_PUBLISHABLE_DEFAULT_KEY is not configured');
+        throw new Error("VITE_SUPABASE_PUBLISHABLE_DEFAULT_KEY is not configured");
       }
 
       // Call Rust command which:
@@ -772,7 +772,7 @@ export class AuthService {
       // 2. Opens browser to OAuth provider
       // 3. Waits for callback
       // 4. Returns tokens
-      const result = await invoke<OAuthCallbackResult>('start_oauth_login', {
+      const result = await invoke<OAuthCallbackResult>("start_oauth_login", {
         provider,
         authServerUrl,
         supabaseKey: SUPABASE_KEY,
@@ -780,10 +780,10 @@ export class AuthService {
         errorHtml,
       });
 
-      console.log('[Desktop AuthService] OAuth authentication successful, storing tokens');
-      console.log('[Desktop AuthService] OAuth result - has access_token:', !!result.access_token);
-      console.log('[Desktop AuthService] OAuth result - has refresh_token:', !!result.refresh_token);
-      console.log('[Desktop AuthService] OAuth result - expires_in:', result.expires_in);
+      console.log("[Desktop AuthService] OAuth authentication successful, storing tokens");
+      console.log("[Desktop AuthService] OAuth result - has access_token:", !!result.access_token);
+      console.log("[Desktop AuthService] OAuth result - has refresh_token:", !!result.refresh_token);
+      console.log("[Desktop AuthService] OAuth result - expires_in:", result.expires_in);
 
       // Save token and refresh token to all storage locations
       await this.saveTokenEverywhere(result.access_token, result.refresh_token);
@@ -792,18 +792,18 @@ export class AuthService {
       const userInfo = await this.fetchSupabaseUserInfo(authServerUrl, result.access_token);
 
       // Save user info to store
-      await invoke('save_user_info', {
+      await invoke("save_user_info", {
         username: userInfo.username,
         email: userInfo.email || null,
       });
 
-      this.setAuthStatus('authenticated', userInfo);
-      console.log('[Desktop AuthService] OAuth login successful');
+      this.setAuthStatus("authenticated", userInfo);
+      console.log("[Desktop AuthService] OAuth login successful");
 
       return userInfo;
     } catch (error) {
-      console.error('[Desktop AuthService] Failed to complete OAuth login:', error);
-      this.setAuthStatus('unauthenticated', null);
+      console.error("[Desktop AuthService] Failed to complete OAuth login:", error);
+      this.setAuthStatus("unauthenticated", null);
       throw error;
     }
   }
@@ -815,18 +815,18 @@ export class AuthService {
   async loginWithSelfHostedOAuth(providerPath: string, serverUrl: string): Promise<UserInfo> {
     // Generate and store nonce for CSRF protection
     const nonce = crypto.randomUUID();
-    sessionStorage.setItem('oauth_nonce', nonce);
-    console.log('[Desktop AuthService] Generated OAuth nonce for CSRF protection');
+    sessionStorage.setItem("oauth_nonce", nonce);
+    console.log("[Desktop AuthService] Generated OAuth nonce for CSRF protection");
 
-    const trimmedServer = serverUrl.replace(/\/+$/, '');
-    const fullUrl = providerPath.startsWith('http')
+    const trimmedServer = serverUrl.replace(/\/+$/, "");
+    const fullUrl = providerPath.startsWith("http")
       ? providerPath
-      : `${trimmedServer}${providerPath.startsWith('/') ? providerPath : `/${providerPath}`}`;
+      : `${trimmedServer}${providerPath.startsWith("/") ? providerPath : `/${providerPath}`}`;
     let authUrl = fullUrl;
     try {
       const parsed = new URL(fullUrl);
-      parsed.searchParams.set('tauri', '1');
-      parsed.searchParams.set('nonce', nonce);
+      parsed.searchParams.set("tauri", "1");
+      parsed.searchParams.set("nonce", nonce);
       authUrl = parsed.toString();
     } catch {
       // ignore URL parsing failures
@@ -835,7 +835,7 @@ export class AuthService {
     // Register deep-link listener before opening browser to avoid callback races on first launch.
     return this.waitForDeepLinkCompletion(trimmedServer, async () => {
       if (!(await this.openInSystemBrowser(authUrl))) {
-        throw new Error('Unable to open system browser for SSO. Please check your system settings.');
+        throw new Error("Unable to open system browser for SSO. Please check your system settings.");
       }
     });
   }
@@ -843,12 +843,9 @@ export class AuthService {
   /**
    * Wait for a deep-link event to complete self-hosted SSO after system browser OAuth
    */
-  private async waitForDeepLinkCompletion(
-    serverUrl: string,
-    startFlow?: () => Promise<void>
-  ): Promise<UserInfo> {
+  private async waitForDeepLinkCompletion(serverUrl: string, startFlow?: () => Promise<void>): Promise<UserInfo> {
     if (!isTauri()) {
-      throw new Error('Deep link authentication is only supported in Tauri desktop app.');
+      throw new Error("Deep link authentication is only supported in Tauri desktop app.");
     }
 
     this.selfHostedDeepLinkFlowActive = true;
@@ -861,59 +858,59 @@ export class AuthService {
         if (!completed) {
           completed = true;
           if (unlisten) unlisten();
-          sessionStorage.removeItem('oauth_nonce');
+          sessionStorage.removeItem("oauth_nonce");
           this.selfHostedDeepLinkFlowActive = false;
-          reject(new Error('SSO login timed out. Please try again.'));
+          reject(new Error("SSO login timed out. Please try again."));
         }
       }, 120_000);
 
-      listen<string>('deep-link', async (event) => {
+      listen<string>("deep-link", async (event) => {
         const url = event.payload;
         if (!url || completed) return;
         try {
           const parsed = new URL(url);
-          const hash = parsed.hash.replace(/^#/, '');
+          const hash = parsed.hash.replace(/^#/, "");
           const params = new URLSearchParams(hash);
-          const type = params.get('type') || parsed.searchParams.get('type');
-          const error = params.get('error') || parsed.searchParams.get('error');
-          if (type === 'sso-error' || error) {
+          const type = params.get("type") || parsed.searchParams.get("type");
+          const error = params.get("error") || parsed.searchParams.get("error");
+          if (type === "sso-error" || error) {
             completed = true;
             if (unlisten) unlisten();
             clearTimeout(timeoutId);
-            sessionStorage.removeItem('oauth_nonce');
+            sessionStorage.removeItem("oauth_nonce");
             this.selfHostedDeepLinkFlowActive = false;
-            reject(new Error(error || 'Authentication was not successful.'));
+            reject(new Error(error || "Authentication was not successful."));
             return;
           }
-          if (type !== 'sso' && type !== 'sso-selfhosted') {
+          if (type !== "sso" && type !== "sso-selfhosted") {
             return;
           }
-          const token = params.get('access_token') || parsed.searchParams.get('access_token');
+          const token = params.get("access_token") || parsed.searchParams.get("access_token");
           if (!token) {
             return;
           }
 
           // CSRF Protection: Validate nonce before accepting token
-          const nonceFromUrl = params.get('nonce') || parsed.searchParams.get('nonce');
-          const storedNonce = sessionStorage.getItem('oauth_nonce');
+          const nonceFromUrl = params.get("nonce") || parsed.searchParams.get("nonce");
+          const storedNonce = sessionStorage.getItem("oauth_nonce");
 
           if (!nonceFromUrl || !storedNonce || nonceFromUrl !== storedNonce) {
             completed = true;
             if (unlisten) unlisten();
             clearTimeout(timeoutId);
-            sessionStorage.removeItem('oauth_nonce');
+            sessionStorage.removeItem("oauth_nonce");
             this.selfHostedDeepLinkFlowActive = false;
-            console.error('[Desktop AuthService] Nonce validation failed - potential CSRF attack');
-            reject(new Error('Invalid authentication state. Nonce validation failed.'));
+            console.error("[Desktop AuthService] Nonce validation failed - potential CSRF attack");
+            reject(new Error("Invalid authentication state. Nonce validation failed."));
             return;
           }
 
           completed = true;
           if (unlisten) unlisten();
           clearTimeout(timeoutId);
-          sessionStorage.removeItem('oauth_nonce');
+          sessionStorage.removeItem("oauth_nonce");
           this.selfHostedDeepLinkFlowActive = false;
-          console.log('[Desktop AuthService] Nonce validated successfully');
+          console.log("[Desktop AuthService] Nonce validated successfully");
 
           const userInfo = await this.completeSelfHostedSession(serverUrl, token);
           // Ensure connection mode is set and backend is ready (in case caller doesn't)
@@ -921,48 +918,50 @@ export class AuthService {
             await connectionModeService.switchToSelfHosted({ url: serverUrl });
             await tauriBackendService.initializeExternalBackend();
           } catch (e) {
-            console.warn('[Desktop AuthService] Failed to initialize backend after deep link:', e);
+            console.warn("[Desktop AuthService] Failed to initialize backend after deep link:", e);
           }
           resolve(userInfo);
         } catch (err) {
           completed = true;
           if (unlisten) unlisten();
           clearTimeout(timeoutId);
-          sessionStorage.removeItem('oauth_nonce');
+          sessionStorage.removeItem("oauth_nonce");
           this.selfHostedDeepLinkFlowActive = false;
-          reject(err instanceof Error ? err : new Error('Failed to complete SSO'));
+          reject(err instanceof Error ? err : new Error("Failed to complete SSO"));
         }
-      }).then(async (fn) => {
-        unlisten = fn;
+      })
+        .then(async (fn) => {
+          unlisten = fn;
 
-        if (!startFlow || completed) {
-          return;
-        }
+          if (!startFlow || completed) {
+            return;
+          }
 
-        try {
-          await startFlow();
-        } catch (err) {
+          try {
+            await startFlow();
+          } catch (err) {
+            if (completed) {
+              return;
+            }
+            completed = true;
+            if (unlisten) unlisten();
+            clearTimeout(timeoutId);
+            sessionStorage.removeItem("oauth_nonce");
+            this.selfHostedDeepLinkFlowActive = false;
+            reject(err instanceof Error ? err : new Error("Failed to start SSO login"));
+          }
+        })
+        .catch((err) => {
           if (completed) {
             return;
           }
           completed = true;
           if (unlisten) unlisten();
           clearTimeout(timeoutId);
-          sessionStorage.removeItem('oauth_nonce');
+          sessionStorage.removeItem("oauth_nonce");
           this.selfHostedDeepLinkFlowActive = false;
-          reject(err instanceof Error ? err : new Error('Failed to start SSO login'));
-        }
-      }).catch((err) => {
-        if (completed) {
-          return;
-        }
-        completed = true;
-        if (unlisten) unlisten();
-        clearTimeout(timeoutId);
-        sessionStorage.removeItem('oauth_nonce');
-        this.selfHostedDeepLinkFlowActive = false;
-        reject(err instanceof Error ? err : new Error('Failed to listen for deep link events'));
-      });
+          reject(err instanceof Error ? err : new Error("Failed to listen for deep link events"));
+        });
     });
   }
 
@@ -975,7 +974,7 @@ export class AuthService {
       await shellOpen(url);
       return true;
     } catch (err) {
-      console.error('Failed to open system browser for SSO:', err);
+      console.error("Failed to open system browser for SSO:", err);
       return false;
     }
   }
@@ -987,35 +986,32 @@ export class AuthService {
     const userInfo = await this.fetchSelfHostedUserInfo(serverUrl, token);
 
     await this.saveTokenEverywhere(token);
-    await invoke('save_user_info', {
+    await invoke("save_user_info", {
       username: userInfo.username,
       email: userInfo.email || null,
     });
 
-    this.setAuthStatus('authenticated', userInfo);
+    this.setAuthStatus("authenticated", userInfo);
     return userInfo;
   }
 
   private async fetchSelfHostedUserInfo(serverUrl: string, token: string): Promise<UserInfo> {
     try {
-      const response = await axios.get(
-        `${serverUrl.replace(/\/+$/, '')}/api/v1/auth/me`,
-        {
-          headers: {
-            Authorization: `Bearer ${token}`,
-          },
-        }
-      );
+      const response = await axios.get(`${serverUrl.replace(/\/+$/, "")}/api/v1/auth/me`, {
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      });
 
       const data = response.data;
       const user = data.user || data;
 
       return {
-        username: user.username || user.email || 'User',
+        username: user.username || user.email || "User",
         email: user.email || undefined,
       };
     } catch (error) {
-      console.error('[Desktop AuthService] Failed to fetch user info after SSO:', error);
+      console.error("[Desktop AuthService] Failed to fetch user info after SSO:", error);
       throw error;
     }
   }
@@ -1030,27 +1026,26 @@ export class AuthService {
       const response = await axios.get(userEndpoint, {
         headers: {
           Authorization: `Bearer ${accessToken}`,
-          'apikey': SUPABASE_KEY,
+          apikey: SUPABASE_KEY,
         },
       });
 
       const data = response.data;
-      console.log('User info fetched:', data.email);
+      console.log("User info fetched:", data.email);
 
       return {
-        username: data.user_metadata?.full_name || data.email || 'Unknown',
+        username: data.user_metadata?.full_name || data.email || "Unknown",
         email: data.email,
       };
     } catch (error) {
-      console.error('Failed to fetch user info from Supabase:', error);
+      console.error("Failed to fetch user info from Supabase:", error);
       // Fallback to basic info
       return {
-        username: 'User',
+        username: "User",
         email: undefined,
       };
     }
   }
-
 }
 
 export const authService = AuthService.getInstance();
diff --git a/frontend/src/desktop/services/authTokenStore.ts b/frontend/src/desktop/services/authTokenStore.ts
index 648a1adfe6..faa6ceac92 100644
--- a/frontend/src/desktop/services/authTokenStore.ts
+++ b/frontend/src/desktop/services/authTokenStore.ts
@@ -1,6 +1,6 @@
-import { invoke } from '@tauri-apps/api/core';
+import { invoke } from "@tauri-apps/api/core";
 
-const TOKEN_KEY = 'stirling_jwt';
+const TOKEN_KEY = "stirling_jwt";
 
 /**
  * Read auth token from any available source (Tauri store or localStorage).
@@ -9,19 +9,19 @@ const TOKEN_KEY = 'stirling_jwt';
 export async function getAuthTokenFromAnySource(): Promise<string | null> {
   // Try Tauri store first
   try {
-    const token = await invoke<string | null>('get_auth_token');
+    const token = await invoke<string | null>("get_auth_token");
     if (token) {
       return token;
     }
   } catch (error) {
-    console.error('[Desktop AuthTokenStore] Failed to read from Tauri store:', error);
+    console.error("[Desktop AuthTokenStore] Failed to read from Tauri store:", error);
   }
 
   // Fallback to localStorage
   try {
     return localStorage.getItem(TOKEN_KEY);
   } catch (error) {
-    console.error('[Desktop AuthTokenStore] Failed to read from localStorage:', error);
+    console.error("[Desktop AuthTokenStore] Failed to read from localStorage:", error);
     return null;
   }
 }
diff --git a/frontend/src/desktop/services/backendHealthMonitor.ts b/frontend/src/desktop/services/backendHealthMonitor.ts
index f53cecd90b..c1d7dcecf0 100644
--- a/frontend/src/desktop/services/backendHealthMonitor.ts
+++ b/frontend/src/desktop/services/backendHealthMonitor.ts
@@ -1,6 +1,6 @@
-import i18n from '@app/i18n';
-import { tauriBackendService } from '@app/services/tauriBackendService';
-import type { BackendHealthState } from '@app/types/backendHealth';
+import i18n from "@app/i18n";
+import { tauriBackendService } from "@app/services/tauriBackendService";
+import type { BackendHealthState } from "@app/types/backendHealth";
 
 type Listener = (state: BackendHealthState) => void;
 
@@ -11,7 +11,7 @@ class BackendHealthMonitor {
   private state: BackendHealthState = {
     status: tauriBackendService.getBackendStatus(),
     error: null,
-    isOnline: tauriBackendService.getBackendStatus() === 'healthy',
+    isOnline: tauriBackendService.getBackendStatus() === "healthy",
   };
 
   constructor(pollingInterval = 5000) {
@@ -21,10 +21,11 @@ class BackendHealthMonitor {
     tauriBackendService.subscribeToStatus((status) => {
       this.updateState({
         status,
-        error: status === 'healthy' ? null : this.state.error,
-        message: status === 'healthy'
-          ? i18n.t('backendHealth.online', 'Backend Online')
-          : this.state.message ?? i18n.t('backendHealth.offline', 'Backend Offline'),
+        error: status === "healthy" ? null : this.state.error,
+        message:
+          status === "healthy"
+            ? i18n.t("backendHealth.online", "Backend Online")
+            : (this.state.message ?? i18n.t("backendHealth.offline", "Backend Offline")),
       });
     });
   }
@@ -35,7 +36,7 @@ class BackendHealthMonitor {
       ...this.state,
       ...partial,
       status: nextStatus,
-      isOnline: nextStatus === 'healthy',
+      isOnline: nextStatus === "healthy",
     };
 
     // Only notify listeners if meaningful state changed
@@ -73,24 +74,24 @@ class BackendHealthMonitor {
       const healthy = await tauriBackendService.checkBackendHealth();
       if (healthy) {
         this.updateState({
-          status: 'healthy',
-          message: i18n.t('backendHealth.online', 'Backend Online'),
+          status: "healthy",
+          message: i18n.t("backendHealth.online", "Backend Online"),
           error: null,
         });
       } else {
         this.updateState({
-          status: 'unhealthy',
-          message: i18n.t('backendHealth.offline', 'Backend Offline'),
-          error: i18n.t('backendHealth.offline', 'Backend Offline'),
+          status: "unhealthy",
+          message: i18n.t("backendHealth.offline", "Backend Offline"),
+          error: i18n.t("backendHealth.offline", "Backend Offline"),
         });
       }
       return healthy;
     } catch (error) {
-      console.error('[BackendHealthMonitor] Health check failed:', error);
+      console.error("[BackendHealthMonitor] Health check failed:", error);
       this.updateState({
-        status: 'unhealthy',
-        message: 'Backend is unavailable',
-        error: 'Backend offline',
+        status: "unhealthy",
+        message: "Backend is unavailable",
+        error: "Backend offline",
       });
       return false;
     }
diff --git a/frontend/src/desktop/services/backendReadinessGuard.ts b/frontend/src/desktop/services/backendReadinessGuard.ts
index c69590ef06..5353cf8efa 100644
--- a/frontend/src/desktop/services/backendReadinessGuard.ts
+++ b/frontend/src/desktop/services/backendReadinessGuard.ts
@@ -1,9 +1,9 @@
-import i18n from '@app/i18n';
-import { alert } from '@app/components/toast';
-import { tauriBackendService } from '@app/services/tauriBackendService';
-import { operationRouter } from '@app/services/operationRouter';
-import { connectionModeService } from '@app/services/connectionModeService';
-import { selfHostedServerMonitor } from '@app/services/selfHostedServerMonitor';
+import i18n from "@app/i18n";
+import { alert } from "@app/components/toast";
+import { tauriBackendService } from "@app/services/tauriBackendService";
+import { operationRouter } from "@app/services/operationRouter";
+import { connectionModeService } from "@app/services/connectionModeService";
+import { selfHostedServerMonitor } from "@app/services/selfHostedServerMonitor";
 
 const BACKEND_TOAST_COOLDOWN_MS = 4000;
 let lastBackendToast = 0;
@@ -27,28 +27,25 @@ export async function ensureBackendReady(endpoint?: string): Promise<boolean> {
   if (endpoint) {
     const skipCheck = await operationRouter.shouldSkipBackendReadyCheck(endpoint);
     if (skipCheck) {
-      console.debug('[backendReadinessGuard] Skipping backend ready check (SaaS routing)');
+      console.debug("[backendReadinessGuard] Skipping backend ready check (SaaS routing)");
       return true;
     }
   }
 
   const mode = await connectionModeService.getCurrentMode();
-  if (mode === 'selfhosted') {
+  if (mode === "selfhosted") {
     let { status } = selfHostedServerMonitor.getSnapshot();
 
     // 'checking' means the first poll hasn't returned yet. Wait briefly (up to
     // 1.5 s) for it to resolve so we don't surface raw network errors during the
     // first few seconds after launch. If it doesn't resolve in time we fall
     // through and allow the operation — the HTTP layer will handle any error.
-    if (status === 'checking') {
-      await Promise.race([
-        selfHostedServerMonitor.checkNow(),
-        new Promise<void>(resolve => setTimeout(resolve, 1500)),
-      ]);
+    if (status === "checking") {
+      await Promise.race([selfHostedServerMonitor.checkNow(), new Promise<void>((resolve) => setTimeout(resolve, 1500))]);
       status = selfHostedServerMonitor.getSnapshot().status;
     }
 
-    if (status === 'offline') {
+    if (status === "offline") {
       // Server offline: allow through if local backend port is known.
       // operationRouter will route to local for supported endpoints.
       // Suppress the toast — SelfHostedOfflineBanner communicates the outage.
@@ -73,9 +70,9 @@ export async function ensureBackendReady(endpoint?: string): Promise<boolean> {
   if (now - lastBackendToast > BACKEND_TOAST_COOLDOWN_MS) {
     lastBackendToast = now;
     alert({
-      alertType: 'error',
-      title: i18n.t('backendHealth.offline', 'Backend Offline'),
-      body: i18n.t('backendHealth.checking', 'Checking backend status...'),
+      alertType: "error",
+      title: i18n.t("backendHealth.offline", "Backend Offline"),
+      body: i18n.t("backendHealth.checking", "Checking backend status..."),
       isPersistentPopup: false,
     });
   }
diff --git a/frontend/src/desktop/services/connectionModeService.ts b/frontend/src/desktop/services/connectionModeService.ts
index bcf487d933..6ae1ba404f 100644
--- a/frontend/src/desktop/services/connectionModeService.ts
+++ b/frontend/src/desktop/services/connectionModeService.ts
@@ -1,9 +1,9 @@
-import { invoke } from '@tauri-apps/api/core';
-import { fetch } from '@tauri-apps/plugin-http';
-import { endpointAvailabilityService } from '@app/services/endpointAvailabilityService';
-import { selfHostedServerMonitor } from '@app/services/selfHostedServerMonitor';
+import { invoke } from "@tauri-apps/api/core";
+import { fetch } from "@tauri-apps/plugin-http";
+import { endpointAvailabilityService } from "@app/services/endpointAvailabilityService";
+import { selfHostedServerMonitor } from "@app/services/selfHostedServerMonitor";
 
-export type ConnectionMode = 'saas' | 'selfhosted' | 'local';
+export type ConnectionMode = "saas" | "selfhosted" | "local";
 
 export interface SSOProviderConfig {
   id: string;
@@ -37,8 +37,8 @@ export interface ConnectionTestResult {
   diagnostics?: DiagnosticResult[];
 }
 
-export const LOCAL_MODE_STORAGE_KEY = 'stirling-local-mode';
-export const JWT_EXPIRED_PROMPTED_KEY = 'stirling-jwt-expired-prompted';
+export const LOCAL_MODE_STORAGE_KEY = "stirling-local-mode";
+export const JWT_EXPIRED_PROMPTED_KEY = "stirling-jwt-expired-prompted";
 
 export class ConnectionModeService {
   private static instance: ConnectionModeService;
@@ -57,7 +57,7 @@ export class ConnectionModeService {
     if (!this.configLoadedOnce) {
       await this.loadConfig();
     }
-    return this.currentConfig || { mode: 'saas', server_config: null, lock_connection_mode: false };
+    return this.currentConfig || { mode: "saas", server_config: null, lock_connection_mode: false };
   }
 
   async getCurrentMode(): Promise<ConnectionMode> {
@@ -79,24 +79,24 @@ export class ConnectionModeService {
 
   private notifyListeners() {
     if (this.currentConfig) {
-      this.modeListeners.forEach(listener => listener(this.currentConfig!));
+      this.modeListeners.forEach((listener) => listener(this.currentConfig!));
     }
   }
 
   private async loadConfig(): Promise<void> {
     try {
-      const config = await invoke<ConnectionConfig>('get_connection_config');
+      const config = await invoke<ConnectionConfig>("get_connection_config");
 
       const localFlag = localStorage.getItem(LOCAL_MODE_STORAGE_KEY);
 
-      if (localFlag === 'true') {
+      if (localFlag === "true") {
         // User previously chose local-only mode (signed out or explicitly went offline).
         // Applies to both 'saas' and 'selfhosted' store modes — the Rust guard on locked
         // deployments can't change 'selfhosted' to 'saas' in the store, so we check the
         // flag regardless of what the store says.
-        config.mode = 'local';
+        config.mode = "local";
       } else if (
-        config.mode === 'saas' &&
+        config.mode === "saas" &&
         config.server_config === null &&
         !config.lock_connection_mode &&
         localFlag === null
@@ -108,59 +108,63 @@ export class ConnectionModeService {
         // MSI installs with STIRLING_SERVER_URL are excluded because they have a
         // non-null server_config; locked provisioned installs are excluded by the
         // lock_connection_mode guard.
-        config.mode = 'local';
+        config.mode = "local";
       }
 
       this.currentConfig = config;
       this.configLoadedOnce = true;
     } catch (error) {
-      console.error('Failed to load connection config:', error);
+      console.error("Failed to load connection config:", error);
       // Default to local mode on error — safer than showing SaaS UI for a
       // desktop app whose bundled backend is always available.
-      this.currentConfig = { mode: 'local', server_config: null, lock_connection_mode: false };
+      this.currentConfig = { mode: "local", server_config: null, lock_connection_mode: false };
       this.configLoadedOnce = true;
     }
   }
 
   async switchToSaaS(saasServerUrl: string): Promise<void> {
     if (this.currentConfig?.lock_connection_mode) {
-      throw new Error('Connection mode is locked by provisioning');
+      throw new Error("Connection mode is locked by provisioning");
     }
 
     // Clear local-only flag and expiry-prompted flag when signing in
     localStorage.removeItem(LOCAL_MODE_STORAGE_KEY);
     localStorage.removeItem(JWT_EXPIRED_PROMPTED_KEY);
 
-    console.log('Switching to SaaS mode');
+    console.log("Switching to SaaS mode");
 
     const serverConfig: ServerConfig = { url: saasServerUrl };
 
-    await invoke('set_connection_mode', {
-      mode: 'saas',
+    await invoke("set_connection_mode", {
+      mode: "saas",
       serverConfig,
     });
 
-    this.currentConfig = { mode: 'saas', server_config: serverConfig, lock_connection_mode: this.currentConfig?.lock_connection_mode ?? false };
+    this.currentConfig = {
+      mode: "saas",
+      server_config: serverConfig,
+      lock_connection_mode: this.currentConfig?.lock_connection_mode ?? false,
+    };
 
     // Clear endpoint availability cache when mode changes
     endpointAvailabilityService.clearCache();
-    console.log('Cleared endpoint availability cache due to connection mode change');
+    console.log("Cleared endpoint availability cache due to connection mode change");
 
     this.notifyListeners();
 
-    console.log('Switched to SaaS mode successfully');
+    console.log("Switched to SaaS mode successfully");
   }
 
   async switchToLocal(): Promise<void> {
-    console.log('Switching to local-only mode');
+    console.log("Switching to local-only mode");
 
     // Persist local mode preference via localStorage so no Rust enum change is needed.
     // The Rust store records this as 'saas' (same bundled-backend behaviour); we overlay
     // the 'local' distinction purely on the TypeScript side.
-    localStorage.setItem(LOCAL_MODE_STORAGE_KEY, 'true');
+    localStorage.setItem(LOCAL_MODE_STORAGE_KEY, "true");
 
-    await invoke('set_connection_mode', {
-      mode: 'saas',
+    await invoke("set_connection_mode", {
+      mode: "saas",
       serverConfig: null,
     });
 
@@ -169,7 +173,7 @@ export class ConnectionModeService {
     const isLocked = this.currentConfig?.lock_connection_mode ?? false;
     const preservedServerConfig = isLocked ? (this.currentConfig?.server_config ?? null) : null;
 
-    this.currentConfig = { mode: 'local', server_config: preservedServerConfig, lock_connection_mode: isLocked };
+    this.currentConfig = { mode: "local", server_config: preservedServerConfig, lock_connection_mode: isLocked };
 
     // Clear endpoint availability cache when mode changes
     endpointAvailabilityService.clearCache();
@@ -182,18 +186,22 @@ export class ConnectionModeService {
     localStorage.removeItem(LOCAL_MODE_STORAGE_KEY);
     localStorage.removeItem(JWT_EXPIRED_PROMPTED_KEY);
 
-    console.log('Switching to self-hosted mode:', serverConfig);
+    console.log("Switching to self-hosted mode:", serverConfig);
 
-    await invoke('set_connection_mode', {
-      mode: 'selfhosted',
+    await invoke("set_connection_mode", {
+      mode: "selfhosted",
       serverConfig,
     });
 
-    this.currentConfig = { mode: 'selfhosted', server_config: serverConfig, lock_connection_mode: this.currentConfig?.lock_connection_mode ?? false };
+    this.currentConfig = {
+      mode: "selfhosted",
+      server_config: serverConfig,
+      lock_connection_mode: this.currentConfig?.lock_connection_mode ?? false,
+    };
 
     // Clear endpoint availability cache when mode changes
     endpointAvailabilityService.clearCache();
-    console.log('Cleared endpoint availability cache due to connection mode change');
+    console.log("Cleared endpoint availability cache due to connection mode change");
 
     // Single authoritative calling point for health monitoring — every path that
     // switches to self-hosted mode funnels through here.
@@ -201,7 +209,7 @@ export class ConnectionModeService {
 
     this.notifyListeners();
 
-    console.log('Switched to self-hosted mode successfully');
+    console.log("Switched to self-hosted mode successfully");
   }
 
   /**
@@ -215,10 +223,10 @@ export class ConnectionModeService {
     console.log(`[ConnectionModeService]    - User Agent: ${navigator.userAgent}`);
     console.log(`[ConnectionModeService]    - Platform: ${navigator.platform}`);
     console.log(`[ConnectionModeService]    - Online: ${navigator.onLine}`);
-    console.log(`[ConnectionModeService]    - Connection Type: ${(navigator as any).connection?.effectiveType || 'unknown'}`);
+    console.log(`[ConnectionModeService]    - Connection Type: ${(navigator as any).connection?.effectiveType || "unknown"}`);
     console.log(`[ConnectionModeService]    - Language: ${navigator.language}`);
     console.log(`[ConnectionModeService]    - Cookies Enabled: ${navigator.cookieEnabled}`);
-    console.log(`[ConnectionModeService]    - Hardware Concurrency: ${navigator.hardwareConcurrency || 'unknown'} cores`);
+    console.log(`[ConnectionModeService]    - Hardware Concurrency: ${navigator.hardwareConcurrency || "unknown"} cores`);
     console.log(`[ConnectionModeService]    - Max Touch Points: ${navigator.maxTouchPoints}`);
 
     // Check for proxy environment variables
@@ -238,10 +246,11 @@ export class ConnectionModeService {
     console.log(`[ConnectionModeService]    - window.location.protocol:`, window.location.protocol);
 
     // Tauri v2 detection: check for __TAURI_INTERNALS__ or tauri:// protocol
-    const isTauriV2 = typeof (window as any).__TAURI_INTERNALS__ !== 'undefined' ||
-                      window.location.protocol === 'tauri:' ||
-                      window.location.hostname === 'tauri.localhost';
-    const isTauriV1 = typeof (window as any).__TAURI__ !== 'undefined';
+    const isTauriV2 =
+      typeof (window as any).__TAURI_INTERNALS__ !== "undefined" ||
+      window.location.protocol === "tauri:" ||
+      window.location.hostname === "tauri.localhost";
+    const isTauriV1 = typeof (window as any).__TAURI__ !== "undefined";
     const isTauri = isTauriV1 || isTauriV2;
 
     console.log(`[ConnectionModeService]    - Running in Tauri v1: ${isTauriV1}`);
@@ -261,22 +270,22 @@ export class ConnectionModeService {
     }
 
     const diagnostics: DiagnosticResult[] = [];
-    const healthUrl = `${url.replace(/\/$/, '')}/api/v1/info/status`;
+    const healthUrl = `${url.replace(/\/$/, "")}/api/v1/info/status`;
     const isLocal = this.isLocalAddress(url);
-    const isHttpUrl = url.startsWith('http://');
-    const isHttpsUrl = url.startsWith('https://');
+    const isHttpUrl = url.startsWith("http://");
+    const isHttpsUrl = url.startsWith("https://");
 
     console.log(`[ConnectionModeService] Connection Parameters:`);
     console.log(`[ConnectionModeService]    - Target URL: ${url}`);
     console.log(`[ConnectionModeService]    - Health endpoint: ${healthUrl}`);
     console.log(`[ConnectionModeService]    - Is local address: ${isLocal}`);
-    console.log(`[ConnectionModeService]    - Protocol: ${isHttpUrl ? 'HTTP' : isHttpsUrl ? 'HTTPS' : 'Unknown'}`);
+    console.log(`[ConnectionModeService]    - Protocol: ${isHttpUrl ? "HTTP" : isHttpsUrl ? "HTTPS" : "Unknown"}`);
     console.log(`[ConnectionModeService] ================================================================`);
 
     // STAGE 1: Test the protocol they specified
     if (isHttpUrl) {
       console.log(`[ConnectionModeService] Stage 1: Testing HTTP (as specified in URL)`);
-      const stage1Result = await this.testHTTP(healthUrl, 'Stage 1: HTTP (as specified)');
+      const stage1Result = await this.testHTTP(healthUrl, "Stage 1: HTTP (as specified)");
       diagnostics.push(stage1Result);
 
       if (stage1Result.success) {
@@ -297,15 +306,15 @@ export class ConnectionModeService {
 
       // HTTP failed, try HTTPS as fallback
       console.log(`[ConnectionModeService] Stage 2: HTTP failed, trying HTTPS`);
-      const httpsUrl = healthUrl.replace('http://', 'https://');
-      const stage2Result = await this.testHTTPS(httpsUrl, 'Stage 2: Trying HTTPS', false);
+      const httpsUrl = healthUrl.replace("http://", "https://");
+      const stage2Result = await this.testHTTPS(httpsUrl, "Stage 2: Trying HTTPS", false);
       diagnostics.push(stage2Result);
 
       if (stage2Result.success) {
         return {
           success: false,
-          error: 'Server is only accessible via HTTPS, not HTTP.',
-          errorCode: 'HTTP_NOT_AVAILABLE',
+          error: "Server is only accessible via HTTPS, not HTTP.",
+          errorCode: "HTTP_NOT_AVAILABLE",
           diagnostics,
         };
       }
@@ -314,7 +323,7 @@ export class ConnectionModeService {
     } else {
       // HTTPS URL or no protocol - test HTTPS
       console.log(`[ConnectionModeService] Stage 1: Testing HTTPS with full certificate validation`);
-      const stage1Result = await this.testHTTPS(healthUrl, 'Stage 1: Standard HTTPS', false);
+      const stage1Result = await this.testHTTPS(healthUrl, "Stage 1: Standard HTTPS", false);
       diagnostics.push(stage1Result);
 
       if (stage1Result.success) {
@@ -332,7 +341,7 @@ export class ConnectionModeService {
 
       // STAGE 2: Test with certificate validation disabled (diagnose cert issues)
       console.log(`[ConnectionModeService] Stage 2: Testing HTTPS with certificate validation disabled`);
-      const stage2Result = await this.testHTTPS(healthUrl, 'Stage 2: HTTPS (no cert validation)', true);
+      const stage2Result = await this.testHTTPS(healthUrl, "Stage 2: HTTPS (no cert validation)", true);
       diagnostics.push(stage2Result);
 
       if (stage2Result.success) {
@@ -351,16 +360,16 @@ export class ConnectionModeService {
 
       // STAGE 3: Try HTTP instead (for local/internal servers)
       console.log(`[ConnectionModeService] Stage 3: Testing HTTP instead of HTTPS`);
-      const httpUrl = healthUrl.replace('https://', 'http://');
-      const stage3Result = await this.testHTTP(httpUrl, 'Stage 3: HTTP (unencrypted)');
+      const httpUrl = healthUrl.replace("https://", "http://");
+      const stage3Result = await this.testHTTP(httpUrl, "Stage 3: HTTP (unencrypted)");
       diagnostics.push(stage3Result);
 
       if (stage3Result.success) {
         console.log(`[ConnectionModeService] ⚠️ HTTP works but HTTPS doesn't`);
         return {
           success: false,
-          error: 'Server is only accessible via HTTP (not HTTPS).',
-          errorCode: 'HTTPS_NOT_AVAILABLE',
+          error: "Server is only accessible via HTTP (not HTTPS).",
+          errorCode: "HTTPS_NOT_AVAILABLE",
           diagnostics,
         };
       }
@@ -398,8 +407,8 @@ export class ConnectionModeService {
       console.log(`[ConnectionModeService] ❌ No external connectivity - network/firewall issue`);
       return {
         success: false,
-        error: 'No internet connectivity detected. All network requests are failing.',
-        errorCode: 'NETWORK_BLOCKED',
+        error: "No internet connectivity detected. All network requests are failing.",
+        errorCode: "NETWORK_BLOCKED",
         diagnostics,
       };
     }
@@ -415,12 +424,12 @@ export class ConnectionModeService {
     const stage6Result = await this.testStage6_DNSResolution(urlObj.hostname);
     diagnostics.push(stage6Result);
 
-    if (!stage6Result.success && stage6Result.message.includes('DNS lookup failed')) {
+    if (!stage6Result.success && stage6Result.message.includes("DNS lookup failed")) {
       console.log(`[ConnectionModeService] ❌ DNS resolution failed for target server`);
       return {
         success: false,
         error: `Cannot resolve hostname: ${urlObj.hostname}`,
-        errorCode: 'DNS_RESOLUTION_FAILED',
+        errorCode: "DNS_RESOLUTION_FAILED",
         diagnostics,
       };
     }
@@ -434,8 +443,8 @@ export class ConnectionModeService {
       console.log(`[ConnectionModeService] ⚠️ HEAD method works but GET doesn't - unusual server behavior`);
       return {
         success: false,
-        error: 'Server responds to HEAD requests but not GET requests.',
-        errorCode: 'METHOD_MISMATCH',
+        error: "Server responds to HEAD requests but not GET requests.",
+        errorCode: "METHOD_MISMATCH",
         diagnostics,
       };
     }
@@ -449,8 +458,8 @@ export class ConnectionModeService {
       console.log(`[ConnectionModeService] ⚠️ Works with browser User-Agent - server may be blocking desktop apps`);
       return {
         success: false,
-        error: 'Server blocks Tauri/desktop app User-Agent but allows browser User-Agent.',
-        errorCode: 'USER_AGENT_BLOCKED',
+        error: "Server blocks Tauri/desktop app User-Agent but allows browser User-Agent.",
+        errorCode: "USER_AGENT_BLOCKED",
         diagnostics,
       };
     }
@@ -459,20 +468,19 @@ export class ConnectionModeService {
     console.log(`[ConnectionModeService] ❌ Server unreachable - all diagnostic tests failed`);
 
     // Analyze timing patterns
-    const avgDuration = diagnostics
-      .filter(d => !d.success && d.duration)
-      .reduce((sum, d) => sum + (d.duration || 0), 0) /
-      diagnostics.filter(d => !d.success && d.duration).length;
+    const avgDuration =
+      diagnostics.filter((d) => !d.success && d.duration).reduce((sum, d) => sum + (d.duration || 0), 0) /
+      diagnostics.filter((d) => !d.success && d.duration).length;
 
     // Log comprehensive diagnostic summary
     console.log(`[ConnectionModeService] ==================== DIAGNOSTIC SUMMARY ====================`);
     console.log(`[ConnectionModeService] Total tests run: ${diagnostics.length}`);
-    console.log(`[ConnectionModeService] Passed: ${diagnostics.filter(d => d.success).length}`);
-    console.log(`[ConnectionModeService] Failed: ${diagnostics.filter(d => !d.success).length}`);
+    console.log(`[ConnectionModeService] Passed: ${diagnostics.filter((d) => d.success).length}`);
+    console.log(`[ConnectionModeService] Failed: ${diagnostics.filter((d) => !d.success).length}`);
     console.log(`[ConnectionModeService] Average failure time: ${avgDuration.toFixed(0)}ms`);
     console.log(`[ConnectionModeService] ---------------------------------------------------------------`);
     diagnostics.forEach((diag) => {
-      const icon = diag.success ? '✅' : '❌';
+      const icon = diag.success ? "✅" : "❌";
       console.log(`[ConnectionModeService] ${icon} ${diag.stage}: ${diag.message} (${diag.duration}ms)`);
     });
     console.log(`[ConnectionModeService] ================================================================`);
@@ -480,9 +488,13 @@ export class ConnectionModeService {
 
     // Log timing-based analysis
     if (avgDuration < 100) {
-      console.log(`[ConnectionModeService] Analysis: Immediate rejections (<${avgDuration.toFixed(0)}ms) suggest firewall/antivirus blocking`);
+      console.log(
+        `[ConnectionModeService] Analysis: Immediate rejections (<${avgDuration.toFixed(0)}ms) suggest firewall/antivirus blocking`,
+      );
     } else if (avgDuration > 5000) {
-      console.log(`[ConnectionModeService] Analysis: Timeouts (avg ${(avgDuration/1000).toFixed(1)}s) suggest server not responding or network route blocked`);
+      console.log(
+        `[ConnectionModeService] Analysis: Timeouts (avg ${(avgDuration / 1000).toFixed(1)}s) suggest server not responding or network route blocked`,
+      );
     } else {
       console.log(`[ConnectionModeService] Analysis: Server may be down, blocking connections, or behind a firewall`);
     }
@@ -491,8 +503,8 @@ export class ConnectionModeService {
 
     return {
       success: false,
-      error: 'Cannot connect to server. Internet works but this specific server is unreachable.',
-      errorCode: 'SERVER_UNREACHABLE',
+      error: "Cannot connect to server. Internet works but this specific server is unreachable.",
+      errorCode: "SERVER_UNREACHABLE",
       diagnostics,
     };
   }
@@ -502,13 +514,13 @@ export class ConnectionModeService {
       const urlObj = new URL(url);
       const hostname = urlObj.hostname.toLowerCase();
       return (
-        hostname === 'localhost' ||
-        hostname === '127.0.0.1' ||
-        hostname === '::1' ||
-        hostname.startsWith('192.168.') ||
-        hostname.startsWith('10.') ||
-        hostname.startsWith('172.16.') ||
-        hostname.endsWith('.local')
+        hostname === "localhost" ||
+        hostname === "127.0.0.1" ||
+        hostname === "::1" ||
+        hostname.startsWith("192.168.") ||
+        hostname.startsWith("10.") ||
+        hostname.startsWith("172.16.") ||
+        hostname.endsWith(".local")
       );
     } catch {
       return false;
@@ -519,10 +531,10 @@ export class ConnectionModeService {
     const startTime = Date.now();
     try {
       console.log(`[ConnectionModeService] 🔗 ${stageName}: Attempting fetch to ${url}`);
-      console.log(`[ConnectionModeService]    - Certificate validation: ${disableCertValidation ? 'DISABLED' : 'ENABLED'}`);
+      console.log(`[ConnectionModeService]    - Certificate validation: ${disableCertValidation ? "DISABLED" : "ENABLED"}`);
 
       const fetchOptions: any = {
-        method: 'GET',
+        method: "GET",
         connectTimeout: 10000,
       };
 
@@ -544,8 +556,8 @@ export class ConnectionModeService {
           stage: stageName,
           success: true,
           message: disableCertValidation
-            ? 'Connected successfully when certificate validation disabled'
-            : 'Successfully connected with full certificate validation',
+            ? "Connected successfully when certificate validation disabled"
+            : "Successfully connected with full certificate validation",
           duration,
         };
       }
@@ -565,9 +577,12 @@ export class ConnectionModeService {
       console.error(`[ConnectionModeService]    - Error message: ${error instanceof Error ? error.message : String(error)}`);
 
       // Log full error object structure for debugging
-      if (error && typeof error === 'object') {
+      if (error && typeof error === "object") {
         console.error(`[ConnectionModeService]    - Error keys:`, Object.keys(error));
-        console.error(`[ConnectionModeService]    - Error object:`, JSON.stringify(error, Object.getOwnPropertyNames(error), 2));
+        console.error(
+          `[ConnectionModeService]    - Error object:`,
+          JSON.stringify(error, Object.getOwnPropertyNames(error), 2),
+        );
       }
 
       // Categorize error type
@@ -577,20 +592,27 @@ export class ConnectionModeService {
       let detailedMessage = `Failed: ${errorMsg}`;
 
       // Check for TLS version mismatch (TLS 1.0/1.1 not supported)
-      if (errorLower.includes('peer is incompatible') ||
-          errorLower.includes('protocol version') ||
-          errorLower.includes('peerincompatible') ||
-          (errorLower.includes('handshake') && (errorLower.includes('tls') || errorLower.includes('ssl')))) {
+      if (
+        errorLower.includes("peer is incompatible") ||
+        errorLower.includes("protocol version") ||
+        errorLower.includes("peerincompatible") ||
+        (errorLower.includes("handshake") && (errorLower.includes("tls") || errorLower.includes("ssl")))
+      ) {
         detailedMessage = `TLS version not supported - Server appears to use TLS 1.0 or 1.1 (desktop app requires TLS 1.2+). Please upgrade your server's TLS configuration or use the web version.`;
-      } else if (errorLower.includes('timeout') || errorLower.includes('timed out')) {
+      } else if (errorLower.includes("timeout") || errorLower.includes("timed out")) {
         detailedMessage = `Timeout after ${duration}ms - server not responding`;
-      } else if (errorLower.includes('certificate') || errorLower.includes('cert') || errorLower.includes('ssl') || errorLower.includes('tls')) {
+      } else if (
+        errorLower.includes("certificate") ||
+        errorLower.includes("cert") ||
+        errorLower.includes("ssl") ||
+        errorLower.includes("tls")
+      ) {
         detailedMessage = `SSL/TLS error - ${errorMsg}`;
-      } else if (errorLower.includes('connection refused') || errorLower.includes('econnrefused')) {
+      } else if (errorLower.includes("connection refused") || errorLower.includes("econnrefused")) {
         detailedMessage = `Connection refused - server may not be running`;
-      } else if (errorLower.includes('network') || errorLower.includes('dns') || errorLower.includes('enotfound')) {
+      } else if (errorLower.includes("network") || errorLower.includes("dns") || errorLower.includes("enotfound")) {
         detailedMessage = `Network error - ${errorMsg}`;
-      } else if (errorLower.includes('blocked') || errorLower.includes('filtered')) {
+      } else if (errorLower.includes("blocked") || errorLower.includes("filtered")) {
         detailedMessage = `Request blocked - possible firewall/antivirus`;
       } else if (duration < 100) {
         detailedMessage = `Immediate rejection (<${duration}ms) - likely blocked by firewall/antivirus`;
@@ -613,7 +635,7 @@ export class ConnectionModeService {
       console.log(`[ConnectionModeService] 🔗 ${stageName}: Attempting fetch to ${url}`);
 
       const response = await fetch(url, {
-        method: 'GET',
+        method: "GET",
         connectTimeout: 10000,
       });
       const duration = Date.now() - startTime;
@@ -624,7 +646,7 @@ export class ConnectionModeService {
         return {
           stage: stageName,
           success: true,
-          message: 'Successfully connected using HTTP',
+          message: "Successfully connected using HTTP",
           duration,
         };
       }
@@ -643,8 +665,11 @@ export class ConnectionModeService {
       console.error(`[ConnectionModeService]    - Error type: ${error?.constructor?.name || typeof error}`);
       console.error(`[ConnectionModeService]    - Error message: ${error instanceof Error ? error.message : String(error)}`);
 
-      if (error && typeof error === 'object') {
-        console.error(`[ConnectionModeService]    - Error object:`, JSON.stringify(error, Object.getOwnPropertyNames(error), 2));
+      if (error && typeof error === "object") {
+        console.error(
+          `[ConnectionModeService]    - Error object:`,
+          JSON.stringify(error, Object.getOwnPropertyNames(error), 2),
+        );
       }
 
       const errorMsg = error instanceof Error ? error.message : String(error);
@@ -652,7 +677,7 @@ export class ConnectionModeService {
 
       let detailedMessage = `Failed: ${errorMsg}`;
 
-      if (errorLower.includes('timeout') || errorLower.includes('timed out')) {
+      if (errorLower.includes("timeout") || errorLower.includes("timed out")) {
         detailedMessage = `Timeout after ${duration}ms - server not responding`;
       } else if (duration < 100) {
         detailedMessage = `Immediate rejection (<${duration}ms) - likely blocked by firewall/antivirus`;
@@ -673,14 +698,14 @@ export class ConnectionModeService {
     const startTime = Date.now();
     try {
       const response = await fetch(url, {
-        method: 'GET',
+        method: "GET",
         connectTimeout: 30000, // 30 seconds
       });
       const duration = Date.now() - startTime;
 
       if (response.ok) {
         return {
-          stage: 'Stage 4: Extended timeout (30s)',
+          stage: "Stage 4: Extended timeout (30s)",
           success: true,
           message: `Connected after ${duration}ms (slow connection)`,
           duration,
@@ -688,16 +713,16 @@ export class ConnectionModeService {
       }
 
       return {
-        stage: 'Stage 4: Extended timeout (30s)',
+        stage: "Stage 4: Extended timeout (30s)",
         success: false,
         message: `Server returned HTTP ${response.status}`,
         duration,
       };
     } catch (error) {
       const duration = Date.now() - startTime;
-      const errorMsg = error instanceof Error ? error.message : 'Unknown error';
+      const errorMsg = error instanceof Error ? error.message : "Unknown error";
       return {
-        stage: 'Stage 4: Extended timeout (30s)',
+        stage: "Stage 4: Extended timeout (30s)",
         success: false,
         message: `Failed: ${errorMsg}`,
         duration,
@@ -711,25 +736,27 @@ export class ConnectionModeService {
       console.log(`[ConnectionModeService] 🌐 Stage 5A: Testing external connectivity (google.com)`);
 
       // Test connectivity to a reliable external service
-      const response = await fetch('https://www.google.com', {
-        method: 'HEAD',
+      const response = await fetch("https://www.google.com", {
+        method: "HEAD",
         connectTimeout: 5000,
       });
       const duration = Date.now() - startTime;
 
-      console.log(`[ConnectionModeService] ✅ Stage 5A: External connectivity confirmed - HTTP ${response.status} (${duration}ms)`);
+      console.log(
+        `[ConnectionModeService] ✅ Stage 5A: External connectivity confirmed - HTTP ${response.status} (${duration}ms)`,
+      );
 
       if (response.ok || response.status === 301 || response.status === 302) {
         return {
-          stage: 'Stage 5A: External (google.com)',
+          stage: "Stage 5A: External (google.com)",
           success: true,
-          message: 'Internet connectivity confirmed via google.com',
+          message: "Internet connectivity confirmed via google.com",
           duration,
         };
       }
 
       return {
-        stage: 'Stage 5A: External (google.com)',
+        stage: "Stage 5A: External (google.com)",
         success: false,
         message: `Unexpected response from google.com: ${response.status}`,
         duration,
@@ -741,7 +768,7 @@ export class ConnectionModeService {
 
       const errorMsg = error instanceof Error ? error.message : String(error);
       return {
-        stage: 'Stage 5A: External (google.com)',
+        stage: "Stage 5A: External (google.com)",
         success: false,
         message: `Failed: ${errorMsg}`,
         duration,
@@ -754,25 +781,27 @@ export class ConnectionModeService {
     try {
       console.log(`[ConnectionModeService] 🌐 Stage 5B: Testing alternative endpoint (cloudflare.com)`);
 
-      const response = await fetch('https://1.1.1.1', {
-        method: 'HEAD',
+      const response = await fetch("https://1.1.1.1", {
+        method: "HEAD",
         connectTimeout: 5000,
       });
       const duration = Date.now() - startTime;
 
-      console.log(`[ConnectionModeService] ✅ Stage 5B: Alternative endpoint success - HTTP ${response.status} (${duration}ms)`);
+      console.log(
+        `[ConnectionModeService] ✅ Stage 5B: Alternative endpoint success - HTTP ${response.status} (${duration}ms)`,
+      );
 
       if (response.ok || response.status === 301 || response.status === 302 || response.status === 403) {
         return {
-          stage: 'Stage 5B: External (cloudflare)',
+          stage: "Stage 5B: External (cloudflare)",
           success: true,
-          message: 'Alternative endpoint (1.1.1.1) reachable',
+          message: "Alternative endpoint (1.1.1.1) reachable",
           duration,
         };
       }
 
       return {
-        stage: 'Stage 5B: External (cloudflare)',
+        stage: "Stage 5B: External (cloudflare)",
         success: false,
         message: `Unexpected response: ${response.status}`,
         duration,
@@ -784,7 +813,7 @@ export class ConnectionModeService {
 
       const errorMsg = error instanceof Error ? error.message : String(error);
       return {
-        stage: 'Stage 5B: External (cloudflare)',
+        stage: "Stage 5B: External (cloudflare)",
         success: false,
         message: `Failed: ${errorMsg}`,
         duration,
@@ -798,8 +827,8 @@ export class ConnectionModeService {
       console.log(`[ConnectionModeService] 🌐 Stage 5C: Testing HTTP external endpoint (httpbin.org)`);
 
       // Try HTTP (not HTTPS) to see if TLS/SSL is the issue
-      const response = await fetch('http://httpbin.org/status/200', {
-        method: 'GET',
+      const response = await fetch("http://httpbin.org/status/200", {
+        method: "GET",
         connectTimeout: 5000,
       });
       const duration = Date.now() - startTime;
@@ -808,15 +837,15 @@ export class ConnectionModeService {
 
       if (response.ok) {
         return {
-          stage: 'Stage 5C: External HTTP (no TLS)',
+          stage: "Stage 5C: External HTTP (no TLS)",
           success: true,
-          message: 'HTTP (unencrypted) connectivity works',
+          message: "HTTP (unencrypted) connectivity works",
           duration,
         };
       }
 
       return {
-        stage: 'Stage 5C: External HTTP (no TLS)',
+        stage: "Stage 5C: External HTTP (no TLS)",
         success: false,
         message: `Unexpected response: ${response.status}`,
         duration,
@@ -828,7 +857,7 @@ export class ConnectionModeService {
 
       const errorMsg = error instanceof Error ? error.message : String(error);
       return {
-        stage: 'Stage 5C: External HTTP (no TLS)',
+        stage: "Stage 5C: External HTTP (no TLS)",
         success: false,
         message: `Failed: ${errorMsg}`,
         duration,
@@ -845,7 +874,7 @@ export class ConnectionModeService {
       // If DNS fails, we'll get an immediate error
       const testUrl = `https://${hostname}`;
       await fetch(testUrl, {
-        method: 'HEAD',
+        method: "HEAD",
         connectTimeout: 3000,
       });
       const duration = Date.now() - startTime;
@@ -853,7 +882,7 @@ export class ConnectionModeService {
       console.log(`[ConnectionModeService] ✅ Stage 6: DNS resolved successfully (${duration}ms)`);
 
       return {
-        stage: 'Stage 6: DNS resolution',
+        stage: "Stage 6: DNS resolution",
         success: true,
         message: `DNS resolution successful for ${hostname}`,
         duration,
@@ -867,9 +896,9 @@ export class ConnectionModeService {
       console.error(`[ConnectionModeService]    - Error:`, errorMsg);
 
       // Check if it's a DNS-specific error
-      if (errorLower.includes('dns') || errorLower.includes('enotfound') || errorLower.includes('getaddrinfo')) {
+      if (errorLower.includes("dns") || errorLower.includes("enotfound") || errorLower.includes("getaddrinfo")) {
         return {
-          stage: 'Stage 6: DNS resolution',
+          stage: "Stage 6: DNS resolution",
           success: false,
           message: `DNS lookup failed - cannot resolve ${hostname}`,
           duration,
@@ -878,7 +907,7 @@ export class ConnectionModeService {
 
       // If we got here, DNS might be working but connection failed for other reasons
       return {
-        stage: 'Stage 6: DNS resolution',
+        stage: "Stage 6: DNS resolution",
         success: false,
         message: `DNS test inconclusive: ${errorMsg}`,
         duration,
@@ -892,7 +921,7 @@ export class ConnectionModeService {
       console.log(`[ConnectionModeService] 🔗 Stage 7: Testing with HEAD method`);
 
       const response = await fetch(url, {
-        method: 'HEAD',
+        method: "HEAD",
         connectTimeout: 10000,
       });
       const duration = Date.now() - startTime;
@@ -901,15 +930,15 @@ export class ConnectionModeService {
 
       if (response.ok) {
         return {
-          stage: 'Stage 7: HEAD method',
+          stage: "Stage 7: HEAD method",
           success: true,
-          message: 'HEAD method works (GET does not)',
+          message: "HEAD method works (GET does not)",
           duration,
         };
       }
 
       return {
-        stage: 'Stage 7: HEAD method',
+        stage: "Stage 7: HEAD method",
         success: false,
         message: `HEAD method returned ${response.status}`,
         duration,
@@ -920,7 +949,7 @@ export class ConnectionModeService {
 
       const errorMsg = error instanceof Error ? error.message : String(error);
       return {
-        stage: 'Stage 7: HEAD method',
+        stage: "Stage 7: HEAD method",
         success: false,
         message: `Failed: ${errorMsg}`,
         duration,
@@ -935,10 +964,11 @@ export class ConnectionModeService {
 
       // Try with a standard browser User-Agent instead of Tauri's default
       const response = await fetch(url, {
-        method: 'GET',
+        method: "GET",
         connectTimeout: 10000,
         headers: {
-          'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36',
+          "User-Agent":
+            "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/121.0.0.0 Safari/537.36",
         },
       });
       const duration = Date.now() - startTime;
@@ -947,15 +977,15 @@ export class ConnectionModeService {
 
       if (response.ok) {
         return {
-          stage: 'Stage 8: Browser User-Agent',
+          stage: "Stage 8: Browser User-Agent",
           success: true,
-          message: 'Works with browser User-Agent (blocked with desktop UA)',
+          message: "Works with browser User-Agent (blocked with desktop UA)",
           duration,
         };
       }
 
       return {
-        stage: 'Stage 8: Browser User-Agent',
+        stage: "Stage 8: Browser User-Agent",
         success: false,
         message: `Browser UA returned ${response.status}`,
         duration,
@@ -966,7 +996,7 @@ export class ConnectionModeService {
 
       const errorMsg = error instanceof Error ? error.message : String(error);
       return {
-        stage: 'Stage 8: Browser User-Agent',
+        stage: "Stage 8: Browser User-Agent",
         success: false,
         message: `Failed: ${errorMsg}`,
         duration,
@@ -974,13 +1004,12 @@ export class ConnectionModeService {
     }
   }
 
-
   async isFirstLaunch(): Promise<boolean> {
     try {
-      const result = await invoke<boolean>('is_first_launch');
+      const result = await invoke<boolean>("is_first_launch");
       return result;
     } catch (error) {
-      console.error('Failed to check first launch:', error);
+      console.error("Failed to check first launch:", error);
       return false;
     }
   }
@@ -990,10 +1019,10 @@ export class ConnectionModeService {
       return;
     }
     try {
-      await invoke('reset_setup_completion');
-      console.log('Setup completion flag reset successfully');
+      await invoke("reset_setup_completion");
+      console.log("Setup completion flag reset successfully");
     } catch (error) {
-      console.error('Failed to reset setup completion:', error);
+      console.error("Failed to reset setup completion:", error);
       throw error;
     }
   }
diff --git a/frontend/src/desktop/services/defaultAppService.ts b/frontend/src/desktop/services/defaultAppService.ts
index b4d9d35f97..c4c1dc9243 100644
--- a/frontend/src/desktop/services/defaultAppService.ts
+++ b/frontend/src/desktop/services/defaultAppService.ts
@@ -1,4 +1,4 @@
-import { invoke } from '@tauri-apps/api/core';
+import { invoke } from "@tauri-apps/api/core";
 
 /**
  * Service for managing default PDF handler settings
@@ -10,10 +10,10 @@ export const defaultAppService = {
    */
   async isDefaultPdfHandler(): Promise<boolean> {
     try {
-      const result = await invoke<boolean>('is_default_pdf_handler');
+      const result = await invoke<boolean>("is_default_pdf_handler");
       return result;
     } catch (error) {
-      console.error('[DefaultApp] Failed to check default handler:', error);
+      console.error("[DefaultApp] Failed to check default handler:", error);
       return false;
     }
   },
@@ -22,13 +22,13 @@ export const defaultAppService = {
    * Set or prompt to set Stirling PDF as default PDF handler
    * Returns a status string indicating what happened
    */
-  async setAsDefaultPdfHandler(): Promise<'set_successfully' | 'opened_dialog' | 'error'> {
+  async setAsDefaultPdfHandler(): Promise<"set_successfully" | "opened_dialog" | "error"> {
     try {
-      const result = await invoke<string>('set_as_default_pdf_handler');
-      return result as 'set_successfully' | 'opened_dialog';
+      const result = await invoke<string>("set_as_default_pdf_handler");
+      return result as "set_successfully" | "opened_dialog";
     } catch (error) {
-      console.error('[DefaultApp] Failed to set default handler:', error);
-      return 'error';
+      console.error("[DefaultApp] Failed to set default handler:", error);
+      return "error";
     }
   },
 
@@ -37,8 +37,8 @@ export const defaultAppService = {
    */
   hasUserDismissedPrompt(): boolean {
     try {
-      const dismissed = localStorage.getItem('stirlingpdf_default_app_prompt_dismissed');
-      return dismissed === 'true';
+      const dismissed = localStorage.getItem("stirlingpdf_default_app_prompt_dismissed");
+      return dismissed === "true";
     } catch {
       return false;
     }
@@ -49,9 +49,9 @@ export const defaultAppService = {
    */
   setPromptDismissed(dismissed: boolean): void {
     try {
-      localStorage.setItem('stirlingpdf_default_app_prompt_dismissed', dismissed ? 'true' : 'false');
+      localStorage.setItem("stirlingpdf_default_app_prompt_dismissed", dismissed ? "true" : "false");
     } catch (error) {
-      console.error('[DefaultApp] Failed to save prompt preference:', error);
+      console.error("[DefaultApp] Failed to save prompt preference:", error);
     }
   },
 
diff --git a/frontend/src/desktop/services/desktopNotificationService.ts b/frontend/src/desktop/services/desktopNotificationService.ts
index 5c9a14414c..b2a6f15fe1 100644
--- a/frontend/src/desktop/services/desktopNotificationService.ts
+++ b/frontend/src/desktop/services/desktopNotificationService.ts
@@ -1,13 +1,9 @@
-import { isTauri } from '@tauri-apps/api/core';
-import { getCurrentWindow } from '@tauri-apps/api/window';
-import {
-  isPermissionGranted,
-  requestPermission,
-  sendNotification,
-} from '@tauri-apps/plugin-notification';
-import i18n from '@app/i18n';
+import { isTauri } from "@tauri-apps/api/core";
+import { getCurrentWindow } from "@tauri-apps/api/window";
+import { isPermissionGranted, requestPermission, sendNotification } from "@tauri-apps/plugin-notification";
+import i18n from "@app/i18n";
 
-const APP_TITLE = 'Stirling-PDF';
+const APP_TITLE = "Stirling-PDF";
 
 async function shouldShowBackgroundNotification(): Promise<boolean> {
   if (!isTauri()) {
@@ -21,54 +17,55 @@ async function shouldShowBackgroundNotification(): Promise<boolean> {
       window.isFocused().catch(() => true),
     ]);
 
-    return isMinimized || !isFocused || document.visibilityState !== 'visible';
+    return isMinimized || !isFocused || document.visibilityState !== "visible";
   } catch {
     return false;
   }
 }
 
 export async function notifyPdfProcessingComplete(fileCount: number): Promise<void> {
-  console.log('[DesktopNotification] notifyPdfProcessingComplete called with fileCount:', fileCount);
+  console.log("[DesktopNotification] notifyPdfProcessingComplete called with fileCount:", fileCount);
 
   if (!isTauri() || fileCount <= 0) {
-    console.log('[DesktopNotification] Skipped: !isTauri() or fileCount <= 0');
+    console.log("[DesktopNotification] Skipped: !isTauri() or fileCount <= 0");
     return;
   }
 
   const canNotify = await shouldShowBackgroundNotification();
-  console.log('[DesktopNotification] canNotify (background):', canNotify);
+  console.log("[DesktopNotification] canNotify (background):", canNotify);
   if (!canNotify) {
-    console.log('[DesktopNotification] App is in focus, skipping notification');
+    console.log("[DesktopNotification] App is in focus, skipping notification");
     return;
   }
 
   try {
     // Check and request permission if needed
     let permissionGranted = await isPermissionGranted();
-    console.log('[DesktopNotification] Permission check:', permissionGranted);
+    console.log("[DesktopNotification] Permission check:", permissionGranted);
 
     if (!permissionGranted) {
-      console.log('[DesktopNotification] Requesting permission...');
+      console.log("[DesktopNotification] Requesting permission...");
       const permission = await requestPermission();
-      permissionGranted = permission === 'granted';
-      console.log('[DesktopNotification] Permission result:', permission);
+      permissionGranted = permission === "granted";
+      console.log("[DesktopNotification] Permission result:", permission);
     }
 
     if (!permissionGranted) {
-      console.log('[DesktopNotification] Permission not granted, skipping notification');
+      console.log("[DesktopNotification] Permission not granted, skipping notification");
       return;
     }
 
-    const body = fileCount === 1
-      ? i18n.t('processingComplete', 'Your file is ready.')
-      : i18n.t('processingCompleteMultiple', '{{count}} files are ready.', { count: fileCount });
-    console.log('[DesktopNotification] Sending notification:', body);
+    const body =
+      fileCount === 1
+        ? i18n.t("processingComplete", "Your file is ready.")
+        : i18n.t("processingCompleteMultiple", "{{count}} files are ready.", { count: fileCount });
+    console.log("[DesktopNotification] Sending notification:", body);
     await sendNotification({
       title: APP_TITLE,
       body,
     });
-    console.log('[DesktopNotification] Notification sent successfully');
+    console.log("[DesktopNotification] Notification sent successfully");
   } catch (error) {
-    console.warn('[DesktopNotification] Unable to send notification', error);
+    console.warn("[DesktopNotification] Unable to send notification", error);
   }
 }
diff --git a/frontend/src/desktop/services/downloadService.ts b/frontend/src/desktop/services/downloadService.ts
index 3981ec0cc8..615632d585 100644
--- a/frontend/src/desktop/services/downloadService.ts
+++ b/frontend/src/desktop/services/downloadService.ts
@@ -25,11 +25,7 @@ export async function downloadFile(request: DownloadRequest): Promise<DownloadRe
   return { savedPath: savePath };
 }
 
-export async function downloadFromUrl(
-  url: string,
-  filename: string,
-  localPath?: string
-): Promise<DownloadResult> {
+export async function downloadFromUrl(url: string, filename: string, localPath?: string): Promise<DownloadResult> {
   const response = await fetch(url);
   if (!response.ok) {
     throw new Error(`Download failed (${response.status})`);
diff --git a/frontend/src/desktop/services/endpointAvailabilityService.ts b/frontend/src/desktop/services/endpointAvailabilityService.ts
index 20bad9a756..374649f08a 100644
--- a/frontend/src/desktop/services/endpointAvailabilityService.ts
+++ b/frontend/src/desktop/services/endpointAvailabilityService.ts
@@ -1,5 +1,5 @@
-import { fetch } from '@tauri-apps/plugin-http';
-import { STIRLING_SAAS_BACKEND_API_URL } from '@app/constants/connection';
+import { fetch } from "@tauri-apps/plugin-http";
+import { STIRLING_SAAS_BACKEND_API_URL } from "@app/constants/connection";
 
 /**
  * Service for checking endpoint availability on the local bundled backend.
@@ -41,16 +41,14 @@ export class EndpointAvailabilityService {
       const url = `${backendUrl}/api/v1/config/endpoints-availability?endpoints=${encodeURIComponent(endpoint)}`;
 
       const response = await fetch(url, {
-        method: 'GET',
+        method: "GET",
         headers: {
-          'Cache-Control': 'no-store',
+          "Cache-Control": "no-store",
         },
       });
 
       if (!response.ok) {
-        console.warn(
-          `[endpointAvailabilityService] Failed to check local endpoint availability: ${response.status}`
-        );
+        console.warn(`[endpointAvailabilityService] Failed to check local endpoint availability: ${response.status}`);
         return false;
       }
 
@@ -63,10 +61,7 @@ export class EndpointAvailabilityService {
 
       return available;
     } catch (error) {
-      console.error(
-        `[endpointAvailabilityService] Error checking local endpoint availability:`,
-        error
-      );
+      console.error(`[endpointAvailabilityService] Error checking local endpoint availability:`, error);
       return false; // Assume not supported on error
     }
   }
@@ -93,20 +88,18 @@ export class EndpointAvailabilityService {
         return false;
       }
 
-      const saasUrl = STIRLING_SAAS_BACKEND_API_URL.replace(/\/$/, '');
+      const saasUrl = STIRLING_SAAS_BACKEND_API_URL.replace(/\/$/, "");
       const url = `${saasUrl}/api/v1/config/endpoints-availability?endpoints=${encodeURIComponent(endpoint)}`;
 
       const response = await fetch(url, {
-        method: 'GET',
+        method: "GET",
         headers: {
-          'Cache-Control': 'no-store',
+          "Cache-Control": "no-store",
         },
       });
 
       if (!response.ok) {
-        console.warn(
-          `[endpointAvailabilityService] Failed to check SaaS endpoint availability: ${response.status}`
-        );
+        console.warn(`[endpointAvailabilityService] Failed to check SaaS endpoint availability: ${response.status}`);
         return false;
       }
 
@@ -119,10 +112,7 @@ export class EndpointAvailabilityService {
 
       return available;
     } catch (error) {
-      console.error(
-        `[endpointAvailabilityService] Error checking SaaS endpoint availability:`,
-        error
-      );
+      console.error(`[endpointAvailabilityService] Error checking SaaS endpoint availability:`, error);
       return false; // Assume not supported on error
     }
   }
@@ -142,9 +132,9 @@ export class EndpointAvailabilityService {
    * Call from console: window.endpointAvailabilityService.debugCache()
    */
   debugCache() {
-    console.group('[endpointAvailabilityService] Cache Debug');
+    console.group("[endpointAvailabilityService] Cache Debug");
 
-    console.group('Local Cache');
+    console.group("Local Cache");
     this.localCache.forEach((available, endpoint) => {
       const expiry = this.localCacheExpiry.get(endpoint);
       const expiresIn = expiry ? Math.max(0, expiry - Date.now()) : 0;
@@ -152,7 +142,7 @@ export class EndpointAvailabilityService {
     });
     console.groupEnd();
 
-    console.group('SaaS Cache');
+    console.group("SaaS Cache");
     this.saasCache.forEach((available, endpoint) => {
       const expiry = this.saasCacheExpiry.get(endpoint);
       const expiresIn = expiry ? Math.max(0, expiry - Date.now()) : 0;
@@ -176,13 +166,13 @@ export class EndpointAvailabilityService {
     }
 
     try {
-      const endpointsParam = endpoints.join(',');
+      const endpointsParam = endpoints.join(",");
       const url = `${backendUrl}/api/v1/config/endpoints-availability?endpoints=${encodeURIComponent(endpointsParam)}`;
 
       const response = await fetch(url, {
-        method: 'GET',
+        method: "GET",
         headers: {
-          'Cache-Control': 'no-store',
+          "Cache-Control": "no-store",
         },
       });
 
@@ -196,12 +186,10 @@ export class EndpointAvailabilityService {
           this.localCacheExpiry.set(endpoint, now + this.CACHE_DURATION);
         });
       } else {
-        console.warn(
-          `[endpointAvailabilityService] Failed to preload endpoints: ${response.status}`
-        );
+        console.warn(`[endpointAvailabilityService] Failed to preload endpoints: ${response.status}`);
       }
     } catch (error) {
-      console.error('[endpointAvailabilityService] Error preloading endpoints:', error);
+      console.error("[endpointAvailabilityService] Error preloading endpoints:", error);
     }
   }
 
@@ -212,12 +200,15 @@ export class EndpointAvailabilityService {
    * @param endpoint - The endpoint path to check
    * @returns Promise with availability details
    */
-  async checkEndpointCombined(endpoint: string, backendUrl: string | null): Promise<{
+  async checkEndpointCombined(
+    endpoint: string,
+    backendUrl: string | null,
+  ): Promise<{
     availableLocally: boolean;
     availableOnSaaS: boolean;
-    isAvailable: boolean;      // local || saas
-    willUseCloud: boolean;      // saas && !local
-    localOnly: boolean;         // local && !saas
+    isAvailable: boolean; // local || saas
+    willUseCloud: boolean; // saas && !local
+    localOnly: boolean; // local && !saas
   }> {
     // Check both backends in parallel for efficiency
     const [availableLocally, availableOnSaaS] = await Promise.all([
@@ -278,6 +269,6 @@ export class EndpointAvailabilityService {
 export const endpointAvailabilityService = new EndpointAvailabilityService();
 
 // Expose to window for debugging
-if (typeof window !== 'undefined') {
+if (typeof window !== "undefined") {
   (window as any).endpointAvailabilityService = endpointAvailabilityService;
 }
diff --git a/frontend/src/desktop/services/fileDialogService.ts b/frontend/src/desktop/services/fileDialogService.ts
index d7da45b14f..9d29b06fc3 100644
--- a/frontend/src/desktop/services/fileDialogService.ts
+++ b/frontend/src/desktop/services/fileDialogService.ts
@@ -1,28 +1,26 @@
 // Desktop implementation - Tauri native file dialogs
-import type { FileWithPath, FileDialogOptions } from '@core/services/fileDialogService';
-import { createQuickKey } from '@app/types/fileContext';
-import { getDocumentFileDialogFilter } from '@app/utils/fileDialogUtils';
+import type { FileWithPath, FileDialogOptions } from "@core/services/fileDialogService";
+import { createQuickKey } from "@app/types/fileContext";
+import { getDocumentFileDialogFilter } from "@app/utils/fileDialogUtils";
 
 export type { FileWithPath, FileDialogOptions };
 
 /**
  * Open native file dialog and read selected files (Desktop/Tauri only)
  */
-export async function openFileDialog(
-  options?: FileDialogOptions
-): Promise<FileWithPath[]> {
+export async function openFileDialog(options?: FileDialogOptions): Promise<FileWithPath[]> {
   try {
-    const { open } = await import('@tauri-apps/plugin-dialog');
-    const { readFile } = await import('@tauri-apps/plugin-fs');
+    const { open } = await import("@tauri-apps/plugin-dialog");
+    const { readFile } = await import("@tauri-apps/plugin-fs");
 
-    console.log('[FileDialog] Opening file dialog...');
+    console.log("[FileDialog] Opening file dialog...");
     const selectedPaths = await open({
       multiple: options?.multiple ?? true,
-      filters: options?.filters ?? getDocumentFileDialogFilter()
+      filters: options?.filters ?? getDocumentFileDialogFilter(),
     });
 
     if (!selectedPaths) {
-      console.log('[FileDialog] User cancelled');
+      console.log("[FileDialog] User cancelled");
       return [];
     }
 
@@ -35,9 +33,9 @@ export async function openFileDialog(
       try {
         console.log(`[FileDialog] Reading file: ${filePath}`);
         const fileData = await readFile(filePath);
-        const fileName = filePath.split(/[/\\]/).pop() || 'document';
+        const fileName = filePath.split(/[/\\]/).pop() || "document";
         const file = new File([fileData], fileName, {
-          type: fileName.endsWith('.pdf') ? 'application/pdf' : undefined
+          type: fileName.endsWith(".pdf") ? "application/pdf" : undefined,
         });
         const quickKey = createQuickKey(file);
         console.log(`[FileDialog] Created File: ${fileName}, quickKey: ${quickKey}`);
@@ -45,7 +43,7 @@ export async function openFileDialog(
         filesWithPaths.push({
           file,
           path: filePath,
-          quickKey
+          quickKey,
         });
       } catch (error) {
         console.error(`[FileDialog] Failed to read ${filePath}:`, error);
@@ -54,7 +52,7 @@ export async function openFileDialog(
 
     return filesWithPaths;
   } catch (error) {
-    console.error('[FileDialog] Error:', error);
+    console.error("[FileDialog] Error:", error);
     return [];
   }
 }
diff --git a/frontend/src/desktop/services/fileOpenService.ts b/frontend/src/desktop/services/fileOpenService.ts
index 059191c808..f0a2de6d33 100644
--- a/frontend/src/desktop/services/fileOpenService.ts
+++ b/frontend/src/desktop/services/fileOpenService.ts
@@ -1,4 +1,4 @@
-import { invoke, isTauri } from '@tauri-apps/api/core';
+import { invoke, isTauri } from "@tauri-apps/api/core";
 
 export interface FileOpenService {
   getOpenedFiles(): Promise<string[]>;
@@ -10,40 +10,40 @@ export interface FileOpenService {
 class TauriFileOpenService implements FileOpenService {
   async getOpenedFiles(): Promise<string[]> {
     try {
-      console.log('🔍 Calling invoke(pop_opened_files)...');
-      const result = await invoke<string[]>('pop_opened_files');
-      console.log('🔍 invoke(pop_opened_files) returned:', result);
+      console.log("🔍 Calling invoke(pop_opened_files)...");
+      const result = await invoke<string[]>("pop_opened_files");
+      console.log("🔍 invoke(pop_opened_files) returned:", result);
       return result;
     } catch (error) {
-      console.error('❌ Failed to get opened files:', error);
+      console.error("❌ Failed to get opened files:", error);
       return [];
     }
   }
 
   async readFileAsArrayBuffer(filePath: string): Promise<{ fileName: string; arrayBuffer: ArrayBuffer } | null> {
     try {
-      const { readFile } = await import('@tauri-apps/plugin-fs');
+      const { readFile } = await import("@tauri-apps/plugin-fs");
 
       const fileData = await readFile(filePath);
-      const fileName = filePath.split(/[\\/]/).pop() || 'opened-file.pdf';
+      const fileName = filePath.split(/[\\/]/).pop() || "opened-file.pdf";
 
       return {
         fileName,
-        arrayBuffer: fileData.buffer.slice(fileData.byteOffset, fileData.byteOffset + fileData.byteLength)
+        arrayBuffer: fileData.buffer.slice(fileData.byteOffset, fileData.byteOffset + fileData.byteLength),
       };
     } catch (error) {
-      console.error('Failed to read file:', error);
+      console.error("Failed to read file:", error);
       return null;
     }
   }
 
   async clearOpenedFiles(): Promise<void> {
     try {
-      console.log('🔍 Calling invoke(clear_opened_files)...');
-      await invoke('clear_opened_files');
-      console.log('✅ Successfully cleared opened files');
+      console.log("🔍 Calling invoke(clear_opened_files)...");
+      await invoke("clear_opened_files");
+      console.log("✅ Successfully cleared opened files");
     } catch (error) {
-      console.error('❌ Failed to clear opened files:', error);
+      console.error("❌ Failed to clear opened files:", error);
     }
   }
 
@@ -60,7 +60,7 @@ class TauriFileOpenService implements FileOpenService {
 
         // Only import if in Tauri environment
         if (isTauri()) {
-          const { listen } = await import('@tauri-apps/api/event');
+          const { listen } = await import("@tauri-apps/api/event");
 
           // Check again after async import
           if (isCleanedUp) {
@@ -68,8 +68,8 @@ class TauriFileOpenService implements FileOpenService {
           }
 
           // Listen for unified file open events (all platforms)
-          const unlisten = await listen('file-opened', (event) => {
-            console.log('📂 File open event received:', event.payload);
+          const unlisten = await listen("file-opened", (event) => {
+            console.log("📂 File open event received:", event.payload);
             callback(event.payload as string);
           });
 
@@ -78,9 +78,9 @@ class TauriFileOpenService implements FileOpenService {
             cleanup = () => {
               try {
                 unlisten();
-                console.log('✅ File event listeners cleaned up');
+                console.log("✅ File event listeners cleaned up");
               } catch (error) {
-                console.error('❌ Error during file event cleanup:', error);
+                console.error("❌ Error during file event cleanup:", error);
               }
             };
           } else {
@@ -88,12 +88,12 @@ class TauriFileOpenService implements FileOpenService {
             try {
               unlisten();
             } catch (error) {
-              console.error('❌ Error during immediate cleanup:', error);
+              console.error("❌ Error during immediate cleanup:", error);
             }
           }
         }
       } catch (error) {
-        console.error('❌ Failed to setup file event listeners:', error);
+        console.error("❌ Failed to setup file event listeners:", error);
       }
     };
 
@@ -126,7 +126,7 @@ class WebFileOpenService implements FileOpenService {
 
   onFileOpened(_callback: (filePath: string) => void): () => void {
     // In web mode, no file events - return no-op cleanup function
-    console.log('ℹ️ Web mode: File event listeners not supported');
+    console.log("ℹ️ Web mode: File event listeners not supported");
     return () => {
       // No-op cleanup for web mode
     };
@@ -134,6 +134,4 @@ class WebFileOpenService implements FileOpenService {
 }
 
 // Export the appropriate service based on environment
-export const fileOpenService: FileOpenService = isTauri()
-  ? new TauriFileOpenService()
-  : new WebFileOpenService();
+export const fileOpenService: FileOpenService = isTauri() ? new TauriFileOpenService() : new WebFileOpenService();
diff --git a/frontend/src/desktop/services/httpErrorHandler.ts b/frontend/src/desktop/services/httpErrorHandler.ts
index 12bde3dacf..55d3060be5 100644
--- a/frontend/src/desktop/services/httpErrorHandler.ts
+++ b/frontend/src/desktop/services/httpErrorHandler.ts
@@ -1,4 +1,4 @@
-import { handleHttpError as coreHandleHttpError } from '@core/services/httpErrorHandler';
+import { handleHttpError as coreHandleHttpError } from "@core/services/httpErrorHandler";
 
 /**
  * Desktop override of handleHttpError.
diff --git a/frontend/src/desktop/services/localFileSaveService.ts b/frontend/src/desktop/services/localFileSaveService.ts
index 31794ebbad..c3162c365b 100644
--- a/frontend/src/desktop/services/localFileSaveService.ts
+++ b/frontend/src/desktop/services/localFileSaveService.ts
@@ -8,10 +8,7 @@ export type { SaveResult, MultiFileSaveResult };
  * @param filePath - Absolute path to save to
  * @returns Result indicating success or failure with error message
  */
-export async function saveToLocalPath(
-  data: Blob | File,
-  filePath: string
-): Promise<SaveResult> {
+export async function saveToLocalPath(data: Blob | File, filePath: string): Promise<SaveResult> {
   try {
     const { writeFile } = await import("@tauri-apps/plugin-fs");
     const arrayBuffer = await data.arrayBuffer();
@@ -19,7 +16,7 @@ export async function saveToLocalPath(
     return { success: true };
   } catch (error) {
     const message = error instanceof Error ? error.message : String(error);
-    console.error('[LocalFileSave] Failed to save:', message);
+    console.error("[LocalFileSave] Failed to save:", message);
     return { success: false, error: message };
   }
 }
@@ -31,27 +28,24 @@ export async function saveToLocalPath(
  * @param defaultDirectory - Optional default directory
  * @returns Selected file path or null if cancelled
  */
-export async function showSaveDialog(
-  defaultFilename: string,
-  defaultDirectory?: string
-): Promise<string | null> {
+export async function showSaveDialog(defaultFilename: string, defaultDirectory?: string): Promise<string | null> {
   try {
     const { save } = await import("@tauri-apps/plugin-dialog");
 
     // Derive the file type filter from the filename extension so the dialog
     // doesn't force a .pdf extension when saving non-PDF outputs (e.g. .docx).
-    const ext = defaultFilename.split('.').pop()?.toLowerCase() ?? '';
+    const ext = defaultFilename.split(".").pop()?.toLowerCase() ?? "";
     const filters = ext ? [{ name: ext.toUpperCase(), extensions: [ext] }] : [];
 
     const selectedPath = await save({
       defaultPath: defaultDirectory ? `${defaultDirectory}/${defaultFilename}` : defaultFilename,
       filters,
-      title: 'Save As'
+      title: "Save As",
     });
 
     return selectedPath;
   } catch (error) {
-    console.error('[SaveDialog] Failed to show dialog:', error);
+    console.error("[SaveDialog] Failed to show dialog:", error);
     return null;
   }
 }
@@ -65,7 +59,7 @@ export async function showSaveDialog(
  */
 export async function saveMultipleFilesWithPrompt(
   files: (Blob | File)[],
-  defaultDirectory?: string
+  defaultDirectory?: string,
 ): Promise<MultiFileSaveResult> {
   try {
     const { open } = await import("@tauri-apps/plugin-dialog");
@@ -77,7 +71,7 @@ export async function saveMultipleFilesWithPrompt(
       directory: true,
       multiple: false,
       defaultPath: defaultDirectory,
-      title: `Save ${files.length} file${files.length > 1 ? 's' : ''}`
+      title: `Save ${files.length} file${files.length > 1 ? "s" : ""}`,
     });
 
     // User cancelled
@@ -98,7 +92,7 @@ export async function saveMultipleFilesWithPrompt(
         savedCount++;
       } catch (error) {
         const message = error instanceof Error ? error.message : String(error);
-        errors.push(`${file instanceof File ? file.name : 'file'}: ${message}`);
+        errors.push(`${file instanceof File ? file.name : "file"}: ${message}`);
       }
     }
 
@@ -108,18 +102,18 @@ export async function saveMultipleFilesWithPrompt(
       return {
         success: false,
         savedCount,
-        error: `Saved ${savedCount}/${files.length} files. Errors: ${errors.join(', ')}`
+        error: `Saved ${savedCount}/${files.length} files. Errors: ${errors.join(", ")}`,
       };
     } else {
       return {
         success: false,
         savedCount: 0,
-        error: `Failed to save files: ${errors.join(', ')}`
+        error: `Failed to save files: ${errors.join(", ")}`,
       };
     }
   } catch (error) {
     const message = error instanceof Error ? error.message : String(error);
-    console.error('[LocalFileSave] Failed to save multiple files:', message);
+    console.error("[LocalFileSave] Failed to save multiple files:", message);
     return { success: false, savedCount: 0, error: message };
   }
 }
diff --git a/frontend/src/desktop/services/nativePrintService.ts b/frontend/src/desktop/services/nativePrintService.ts
index 1256dba242..c0745a603e 100644
--- a/frontend/src/desktop/services/nativePrintService.ts
+++ b/frontend/src/desktop/services/nativePrintService.ts
@@ -34,10 +34,7 @@ export async function printPdfNatively(file?: File | Blob, url?: string | null,
   const { tempDir, join } = await import("@tauri-apps/api/path");
   const { remove, writeFile } = await import("@tauri-apps/plugin-fs");
 
-  const tempPath = await join(
-    await tempDir(),
-    `stirling-print-${crypto.randomUUID()}-${sanitizeFileName(fileName)}`,
-  );
+  const tempPath = await join(await tempDir(), `stirling-print-${crypto.randomUUID()}-${sanitizeFileName(fileName)}`);
 
   await writeFile(tempPath, new Uint8Array(await source.arrayBuffer()));
 
diff --git a/frontend/src/desktop/services/operationResultsSaveService.ts b/frontend/src/desktop/services/operationResultsSaveService.ts
index b3e10c3b87..5fa897a5e3 100644
--- a/frontend/src/desktop/services/operationResultsSaveService.ts
+++ b/frontend/src/desktop/services/operationResultsSaveService.ts
@@ -1,6 +1,6 @@
-import type { FileId } from '@app/types/fileContext';
-import type { OperationSaveContext } from '@core/services/operationResultsSaveService';
-import { downloadFile, downloadFromUrl, DownloadResult } from '@app/services/downloadService';
+import type { FileId } from "@app/types/fileContext";
+import type { OperationSaveContext } from "@core/services/operationResultsSaveService";
+import { downloadFile, downloadFromUrl, DownloadResult } from "@app/services/downloadService";
 
 export type { OperationSaveContext };
 
@@ -16,7 +16,7 @@ export async function saveOperationResults(context: OperationSaveContext): Promi
       const result = await downloadFile({
         data: file,
         filename: file.name,
-        localPath: stub?.localFilePath
+        localPath: stub?.localFilePath,
       });
 
       if (result.savedPath) {
@@ -28,8 +28,8 @@ export async function saveOperationResults(context: OperationSaveContext): Promi
 
   const result = await downloadFromUrl(
     context.downloadUrl,
-    context.downloadFilename || 'download',
-    context.downloadLocalPath || undefined
+    context.downloadFilename || "download",
+    context.downloadLocalPath || undefined,
   );
 
   if (context.outputFileIds && result.savedPath) {
diff --git a/frontend/src/desktop/services/operationRouter.ts b/frontend/src/desktop/services/operationRouter.ts
index b233f01181..cb224d0467 100644
--- a/frontend/src/desktop/services/operationRouter.ts
+++ b/frontend/src/desktop/services/operationRouter.ts
@@ -1,12 +1,12 @@
-import i18n from '@app/i18n';
-import { connectionModeService } from '@app/services/connectionModeService';
-import { tauriBackendService } from '@app/services/tauriBackendService';
-import { endpointAvailabilityService } from '@app/services/endpointAvailabilityService';
-import { selfHostedServerMonitor } from '@app/services/selfHostedServerMonitor';
-import { STIRLING_SAAS_BACKEND_API_URL } from '@app/constants/connection';
-import { CONVERSION_ENDPOINTS, ENDPOINT_NAMES } from '@app/constants/convertConstants';
+import i18n from "@app/i18n";
+import { connectionModeService } from "@app/services/connectionModeService";
+import { tauriBackendService } from "@app/services/tauriBackendService";
+import { endpointAvailabilityService } from "@app/services/endpointAvailabilityService";
+import { selfHostedServerMonitor } from "@app/services/selfHostedServerMonitor";
+import { STIRLING_SAAS_BACKEND_API_URL } from "@app/constants/connection";
+import { CONVERSION_ENDPOINTS, ENDPOINT_NAMES } from "@app/constants/convertConstants";
 
-export type ExecutionTarget = 'local' | 'remote';
+export type ExecutionTarget = "local" | "remote";
 
 export class OperationRouter {
   private static instance: OperationRouter;
@@ -27,8 +27,8 @@ export class OperationRouter {
     const mode = await connectionModeService.getCurrentMode();
 
     // Current implementation: simple mode-based routing
-    if (mode === 'saas' || mode === 'local') {
-      return 'local';
+    if (mode === "saas" || mode === "local") {
+      return "local";
     }
 
     // In self-hosted mode, currently all operations go to remote
@@ -38,7 +38,7 @@ export class OperationRouter {
     //   return 'local';
     // }
 
-    return 'remote';
+    return "remote";
   }
 
   /**
@@ -50,12 +50,12 @@ export class OperationRouter {
     if (!endpoint) return false;
 
     const saasBackendPatterns = [
-      /^\/api\/v1\/team\//,  // Team endpoints
-      /^\/api\/v1\/auth\//,  // Auth endpoints (Supabase auth in SaaS mode)
+      /^\/api\/v1\/team\//, // Team endpoints
+      /^\/api\/v1\/auth\//, // Auth endpoints (Supabase auth in SaaS mode)
       // Add more SaaS-specific patterns here as needed
     ];
 
-    return saasBackendPatterns.some(pattern => pattern.test(endpoint));
+    return saasBackendPatterns.some((pattern) => pattern.test(endpoint));
   }
 
   /**
@@ -71,10 +71,10 @@ export class OperationRouter {
       /^\/api\/v1\/security\//,
       /^\/api\/v1\/filter\//,
       /^\/api\/v1\/multi-tool\//,
-      /^\/api\/v1\/ui-data\//,  // UI data endpoints for tools (e.g., OCR languages)
+      /^\/api\/v1\/ui-data\//, // UI data endpoints for tools (e.g., OCR languages)
     ];
 
-    return toolPatterns.some(pattern => pattern.test(endpoint));
+    return toolPatterns.some((pattern) => pattern.test(endpoint));
   }
 
   /**
@@ -96,7 +96,7 @@ export class OperationRouter {
     }
 
     // Convert endpoints: Use reverse lookup from actual constants
-    if (endpoint.startsWith('/api/v1/convert/')) {
+    if (endpoint.startsWith("/api/v1/convert/")) {
       // Find the key in CONVERSION_ENDPOINTS that matches this path
       for (const [key, path] of Object.entries(CONVERSION_ENDPOINTS)) {
         if (path === endpoint) {
@@ -132,45 +132,42 @@ export class OperationRouter {
     const mode = await connectionModeService.getCurrentMode();
 
     // Local-only mode: route everything to local backend; open settings if tool unavailable
-    if (mode === 'local') {
+    if (mode === "local") {
       if (operation && this.isToolEndpoint(operation)) {
         const endpointName = this.extractEndpointName(operation);
         const backendUrl = tauriBackendService.getBackendUrl();
         if (backendUrl) {
-          const supportedLocally = await endpointAvailabilityService.isEndpointSupportedLocally(
-            endpointName,
-            backendUrl
-          );
+          const supportedLocally = await endpointAvailabilityService.isEndpointSupportedLocally(endpointName, backendUrl);
           if (!supportedLocally) {
             // Open the connection settings so the user can sign in
-            window.dispatchEvent(new CustomEvent('appConfig:navigate', { detail: { key: 'connectionMode' } }));
+            window.dispatchEvent(new CustomEvent("appConfig:navigate", { detail: { key: "connectionMode" } }));
             throw new Error(
               i18n.t(
-                'localMode.toolUnavailable',
-                'This tool requires an account. Sign in to Stirling Cloud or connect to a self-hosted server to use it.'
-              )
+                "localMode.toolUnavailable",
+                "This tool requires an account. Sign in to Stirling Cloud or connect to a self-hosted server to use it.",
+              ),
             );
           }
         }
       }
       const backendUrl = tauriBackendService.getBackendUrl();
       if (!backendUrl) {
-        throw new Error('Backend URL not available - backend may still be starting');
+        throw new Error("Backend URL not available - backend may still be starting");
       }
-      return backendUrl.replace(/\/$/, '');
+      return backendUrl.replace(/\/$/, "");
     }
 
     // Always route team endpoints to SaaS backend (existing logic)
-    if (mode === 'saas' && this.isSaaSBackendEndpoint(operation)) {
+    if (mode === "saas" && this.isSaaSBackendEndpoint(operation)) {
       if (!STIRLING_SAAS_BACKEND_API_URL) {
-        throw new Error('VITE_SAAS_BACKEND_API_URL not configured');
+        throw new Error("VITE_SAAS_BACKEND_API_URL not configured");
       }
       console.debug(`[operationRouter] Routing ${operation} to SaaS backend (team endpoint)`);
-      return STIRLING_SAAS_BACKEND_API_URL.replace(/\/$/, '');
+      return STIRLING_SAAS_BACKEND_API_URL.replace(/\/$/, "");
     }
 
     // NEW: Check if local backend supports this tool endpoint
-    if (mode === 'saas' && operation && this.isToolEndpoint(operation)) {
+    if (mode === "saas" && operation && this.isToolEndpoint(operation)) {
       // Extract endpoint name for capability check (e.g., "/api/v1/misc/repair" -> "repair")
       const endpointToCheck = this.extractEndpointName(operation);
       console.debug(`[operationRouter] Checking capability for ${operation} -> endpoint name: ${endpointToCheck}`);
@@ -182,10 +179,7 @@ export class OperationRouter {
       // capability check and fall through to local routing — the backend-readiness check
       // in the Axios interceptor will block non-GET requests until the backend is healthy.
       if (backendUrl && backendHealthy) {
-        const supportedLocally = await endpointAvailabilityService.isEndpointSupportedLocally(
-          endpointToCheck,
-          backendUrl
-        );
+        const supportedLocally = await endpointAvailabilityService.isEndpointSupportedLocally(endpointToCheck, backendUrl);
         console.debug(`[operationRouter] Endpoint ${endpointToCheck} supported locally: ${supportedLocally}`);
 
         if (!supportedLocally) {
@@ -197,20 +191,22 @@ export class OperationRouter {
             // Neither local nor SaaS support this - throw error
             console.error(`[operationRouter] Endpoint ${endpointToCheck} not supported on local or SaaS backend`);
             throw new Error(
-              `This operation (${endpointToCheck}) is not available. It may require a self-hosted instance with additional features enabled.`
+              `This operation (${endpointToCheck}) is not available. It may require a self-hosted instance with additional features enabled.`,
             );
           }
 
           // SaaS supports it - route to SaaS backend
           if (!STIRLING_SAAS_BACKEND_API_URL) {
-            console.error('[operationRouter] VITE_SAAS_BACKEND_API_URL not configured');
+            console.error("[operationRouter] VITE_SAAS_BACKEND_API_URL not configured");
             throw new Error(
-              'Cloud processing is required for this tool but VITE_SAAS_BACKEND_API_URL is not configured. ' +
-              'Please check your environment configuration.'
+              "Cloud processing is required for this tool but VITE_SAAS_BACKEND_API_URL is not configured. " +
+                "Please check your environment configuration.",
             );
           }
-          console.debug(`[operationRouter] Routing ${operation} to SaaS backend (not supported locally, but supported on SaaS)`);
-          return STIRLING_SAAS_BACKEND_API_URL.replace(/\/$/, '');
+          console.debug(
+            `[operationRouter] Routing ${operation} to SaaS backend (not supported locally, but supported on SaaS)`,
+          );
+          return STIRLING_SAAS_BACKEND_API_URL.replace(/\/$/, "");
         }
 
         // Supported locally - continue with local backend
@@ -220,29 +216,24 @@ export class OperationRouter {
 
     // Self-hosted fallback: when the remote server is offline, route tool endpoints
     // to the local bundled backend if it supports them.
-    if (mode === 'selfhosted' && operation && this.isToolEndpoint(operation)) {
+    if (mode === "selfhosted" && operation && this.isToolEndpoint(operation)) {
       const { status } = selfHostedServerMonitor.getSnapshot();
-      if (status === 'offline') {
+      if (status === "offline") {
         const endpointName = this.extractEndpointName(operation);
         const localUrl = tauriBackendService.getBackendUrl();
         if (localUrl) {
-          const supportedLocally = await endpointAvailabilityService.isEndpointSupportedLocally(
-            endpointName,
-            localUrl
-          );
+          const supportedLocally = await endpointAvailabilityService.isEndpointSupportedLocally(endpointName, localUrl);
           if (supportedLocally) {
-            console.debug(
-              `[operationRouter] Self-hosted server offline, routing ${operation} to local backend`
-            );
-            return localUrl.replace(/\/$/, '');
+            console.debug(`[operationRouter] Self-hosted server offline, routing ${operation} to local backend`);
+            return localUrl.replace(/\/$/, "");
           }
         }
         throw new Error(
           i18n.t(
-            'selfHosted.offline.toolNotAvailableLocally',
+            "selfHosted.offline.toolNotAvailableLocally",
             'Your Stirling-PDF server is offline and "{{endpoint}}" is not available on the local backend.',
-            { endpoint: endpointName }
-          )
+            { endpoint: endpointName },
+          ),
         );
       }
     }
@@ -250,25 +241,25 @@ export class OperationRouter {
     // Existing logic for local/remote routing
     const target = await this.getExecutionTarget(operation);
 
-    if (target === 'local') {
+    if (target === "local") {
       // Use dynamically assigned port from backend service
       const backendUrl = tauriBackendService.getBackendUrl();
       if (!backendUrl) {
-        throw new Error('Backend URL not available - backend may still be starting');
+        throw new Error("Backend URL not available - backend may still be starting");
       }
       // Strip trailing slash to avoid double slashes in URLs
-      return backendUrl.replace(/\/$/, '');
+      return backendUrl.replace(/\/$/, "");
     }
 
     // Remote: get from server config
     const serverConfig = await connectionModeService.getServerConfig();
     if (!serverConfig) {
-      console.warn('No server config found');
-      throw new Error('Server configuration not found');
+      console.warn("No server config found");
+      throw new Error("Server configuration not found");
     }
 
     // Strip trailing slash to avoid double slashes in URLs
-    return serverConfig.url.replace(/\/$/, '');
+    return serverConfig.url.replace(/\/$/, "");
   }
 
   /**
@@ -276,7 +267,7 @@ export class OperationRouter {
    */
   async isSelfHostedMode(): Promise<boolean> {
     const mode = await connectionModeService.getCurrentMode();
-    return mode === 'selfhosted';
+    return mode === "selfhosted";
   }
 
   /**
@@ -284,7 +275,7 @@ export class OperationRouter {
    */
   async isSaaSMode(): Promise<boolean> {
     const mode = await connectionModeService.getCurrentMode();
-    return mode === 'saas';
+    return mode === "saas";
   }
 
   /**
@@ -302,15 +293,12 @@ export class OperationRouter {
 
     // NEW: Skip if endpoint will be routed to SaaS due to local unavailability
     const mode = await connectionModeService.getCurrentMode();
-    if (mode === 'saas' && endpoint && this.isToolEndpoint(endpoint)) {
+    if (mode === "saas" && endpoint && this.isToolEndpoint(endpoint)) {
       const backendUrl = tauriBackendService.getBackendUrl();
       // Backend not ready — don't skip the readiness check; let it gate the request.
       if (!backendUrl || !tauriBackendService.isOnline) return false;
       const endpointToCheck = this.extractEndpointName(endpoint);
-      const supportedLocally = await endpointAvailabilityService.isEndpointSupportedLocally(
-        endpointToCheck,
-        backendUrl
-      );
+      const supportedLocally = await endpointAvailabilityService.isEndpointSupportedLocally(endpointToCheck, backendUrl);
       return !supportedLocally; // Skip check if not supported locally
     }
 
@@ -327,7 +315,7 @@ export class OperationRouter {
     const mode = await connectionModeService.getCurrentMode();
     // In local mode, show cloud badge for tools not supported locally
     // (clicking them will prompt sign-in via onUnavailableClick)
-    if (mode !== 'saas' && mode !== 'local') return false;
+    if (mode !== "saas" && mode !== "local") return false;
 
     // Team endpoints always go to SaaS
     if (this.isSaaSBackendEndpoint(endpoint)) return true;
@@ -338,7 +326,7 @@ export class OperationRouter {
       const endpointToCheck = this.extractEndpointName(endpoint);
       const supportedLocally = await endpointAvailabilityService.isEndpointSupportedLocally(
         endpointToCheck,
-        tauriBackendService.getBackendUrl()
+        tauriBackendService.getBackendUrl(),
       );
       return !supportedLocally;
     }
diff --git a/frontend/src/desktop/services/saasBillingService.ts b/frontend/src/desktop/services/saasBillingService.ts
index a607a620f7..793d1a151a 100644
--- a/frontend/src/desktop/services/saasBillingService.ts
+++ b/frontend/src/desktop/services/saasBillingService.ts
@@ -1,11 +1,11 @@
-import { open as shellOpen } from '@tauri-apps/plugin-shell';
-import { fetch as tauriFetch } from '@tauri-apps/plugin-http';
-import { supabase } from '@app/auth/supabase';
-import { authService } from '@app/services/authService';
-import { connectionModeService } from '@app/services/connectionModeService';
-import { STIRLING_SAAS_URL, STIRLING_SAAS_BACKEND_API_URL, SUPABASE_KEY } from '@app/constants/connection';
-import type { TierLevel, SubscriptionStatus, StripePlanId } from '@app/types/billing';
-import { getCurrencySymbol } from '@app/config/billing';
+import { open as shellOpen } from "@tauri-apps/plugin-shell";
+import { fetch as tauriFetch } from "@tauri-apps/plugin-http";
+import { supabase } from "@app/auth/supabase";
+import { authService } from "@app/services/authService";
+import { connectionModeService } from "@app/services/connectionModeService";
+import { STIRLING_SAAS_URL, STIRLING_SAAS_BACKEND_API_URL, SUPABASE_KEY } from "@app/constants/connection";
+import type { TierLevel, SubscriptionStatus, StripePlanId } from "@app/types/billing";
+import { getCurrencySymbol } from "@app/config/billing";
 
 /**
  * Billing status returned from Supabase edge function
@@ -64,9 +64,9 @@ export class SaasBillingService {
     try {
       const mode = await connectionModeService.getCurrentMode();
       const isAuthenticated = await authService.isAuthenticated();
-      return mode === 'saas' && isAuthenticated;
+      return mode === "saas" && isAuthenticated;
     } catch (error) {
-      console.error('[Desktop Billing] Failed to check billing availability:', error);
+      console.error("[Desktop Billing] Failed to check billing availability:", error);
       return false;
     }
   }
@@ -79,13 +79,13 @@ export class SaasBillingService {
     // Check if in SaaS mode
     const isAvailable = await this.isBillingAvailable();
     if (!isAvailable) {
-      throw new Error('Billing is only available in SaaS mode');
+      throw new Error("Billing is only available in SaaS mode");
     }
 
     // Get JWT token for authentication
     const token = await authService.getAuthToken();
     if (!token) {
-      throw new Error('No authentication token available');
+      throw new Error("No authentication token available");
     }
 
     try {
@@ -93,37 +93,39 @@ export class SaasBillingService {
       const rpcUrl = `${STIRLING_SAAS_URL}/rest/v1/rpc/get_user_billing_status`;
 
       const response = await tauriFetch(rpcUrl, {
-        method: 'POST',
+        method: "POST",
         headers: {
-          'Content-Type': 'application/json',
-          'apikey': SUPABASE_KEY || '',
-          'Authorization': `Bearer ${token}`,
+          "Content-Type": "application/json",
+          apikey: SUPABASE_KEY || "",
+          Authorization: `Bearer ${token}`,
         },
         body: JSON.stringify({}),
       });
 
       if (!response.ok) {
         const errorText = await response.text();
-        console.error('[Desktop Billing] RPC error response:', errorText);
+        console.error("[Desktop Billing] RPC error response:", errorText);
         throw new Error(`RPC call failed: ${response.status} ${response.statusText}`);
       }
 
       // RPC may return an array or a single object — normalise to array then take first element
-      const raw = await response.json() as unknown;
-      const billingDataArray = Array.isArray(raw) ? raw : (raw ? [raw] : []);
-      const billingData = billingDataArray[0] as {
-        user_id: string;
-        has_metered_billing_enabled: boolean;
-        is_pro: boolean;
-      } | undefined;
+      const raw = (await response.json()) as unknown;
+      const billingDataArray = Array.isArray(raw) ? raw : raw ? [raw] : [];
+      const billingData = billingDataArray[0] as
+        | {
+            user_id: string;
+            has_metered_billing_enabled: boolean;
+            is_pro: boolean;
+          }
+        | undefined;
 
       // Determine tier based on pro status
       const isPro = billingData?.is_pro || false;
-      const tier: BillingStatus['tier'] = isPro ? 'team' : 'free';
+      const tier: BillingStatus["tier"] = isPro ? "team" : "free";
 
       // Fetch additional subscription details if pro
-      let subscription: BillingStatus['subscription'] = null;
-      let meterUsage: BillingStatus['meterUsage'] = null;
+      let subscription: BillingStatus["subscription"] = null;
+      let meterUsage: BillingStatus["meterUsage"] = null;
       let isTrialing = false;
       let trialDaysRemaining: number | undefined;
 
@@ -131,9 +133,9 @@ export class SaasBillingService {
         // Fetch usage details
         try {
           const { data: usageData, error: usageError } = await supabase.functions.invoke<{
-            subscription: BillingStatus['subscription'];
-            meterUsage: BillingStatus['meterUsage'];
-          }>('get-usage-billing', {
+            subscription: BillingStatus["subscription"];
+            meterUsage: BillingStatus["meterUsage"];
+          }>("get-usage-billing", {
             headers: {
               Authorization: `Bearer ${token}`,
             },
@@ -144,7 +146,7 @@ export class SaasBillingService {
             subscription = usageData.subscription;
             meterUsage = usageData.meterUsage;
 
-            if (subscription?.status === 'trialing') {
+            if (subscription?.status === "trialing") {
               isTrialing = true;
               const trialEnd = subscription.currentPeriodEnd;
               const now = Math.floor(Date.now() / 1000);
@@ -152,9 +154,8 @@ export class SaasBillingService {
             }
           }
         } catch (usageError) {
-          console.warn('[Desktop Billing] Failed to fetch usage data:', usageError);
+          console.warn("[Desktop Billing] Failed to fetch usage data:", usageError);
         }
-
       }
 
       // Fetch credit balance for all authenticated users (both Pro and Free)
@@ -163,9 +164,9 @@ export class SaasBillingService {
       try {
         const creditsEndpoint = `${STIRLING_SAAS_BACKEND_API_URL}/api/v1/credits`;
         const creditResponse = await tauriFetch(creditsEndpoint, {
-          method: 'GET',
+          method: "GET",
           headers: {
-            'Authorization': `Bearer ${token}`,
+            Authorization: `Bearer ${token}`,
           },
         });
 
@@ -173,14 +174,14 @@ export class SaasBillingService {
           const creditData = await creditResponse.json();
           // Backend returns { totalAvailableCredits: number, ... }
           const credits = creditData?.totalAvailableCredits;
-          creditBalance = typeof credits === 'number' ? credits : 0;
+          creditBalance = typeof credits === "number" ? credits : 0;
         } else {
           const errorText = await creditResponse.text();
-          console.warn('[Desktop Billing] Failed to fetch credit balance:', creditResponse.status, errorText);
+          console.warn("[Desktop Billing] Failed to fetch credit balance:", creditResponse.status, errorText);
           creditBalance = 0;
         }
       } catch (error) {
-        console.error('[Desktop Billing] Error fetching credit balance:', error);
+        console.error("[Desktop Billing] Error fetching credit balance:", error);
         creditBalance = 0;
       }
 
@@ -195,13 +196,13 @@ export class SaasBillingService {
 
       return billingStatus;
     } catch (error) {
-      console.error('[Desktop Billing] Failed to fetch billing status:', error);
+      console.error("[Desktop Billing] Failed to fetch billing status:", error);
 
       if (error instanceof Error) {
         throw error;
       }
 
-      throw new Error('Failed to fetch billing status', { cause: error });
+      throw new Error("Failed to fetch billing status", { cause: error });
     }
   }
 
@@ -213,18 +214,18 @@ export class SaasBillingService {
     // Check if in SaaS mode
     const isAvailable = await this.isBillingAvailable();
     if (!isAvailable) {
-      throw new Error('Billing portal is only available in SaaS mode');
+      throw new Error("Billing portal is only available in SaaS mode");
     }
 
     // Get JWT token for authentication
     const token = await authService.getAuthToken();
     if (!token) {
-      throw new Error('No authentication token available');
+      throw new Error("No authentication token available");
     }
 
     try {
       // Call Supabase edge function to get Stripe portal URL
-      const { data, error } = await supabase.functions.invoke<ManageBillingResponse>('manage-billing', {
+      const { data, error } = await supabase.functions.invoke<ManageBillingResponse>("manage-billing", {
         headers: {
           Authorization: `Bearer ${token}`,
         },
@@ -234,24 +235,24 @@ export class SaasBillingService {
       });
 
       if (error) {
-        console.error('[Desktop Billing] Error creating billing portal session:', error);
-        throw new Error(error.message || 'Failed to create billing portal session');
+        console.error("[Desktop Billing] Error creating billing portal session:", error);
+        throw new Error(error.message || "Failed to create billing portal session");
       }
 
       if (!data || !data.url) {
-        throw new Error('No portal URL returned from manage-billing');
+        throw new Error("No portal URL returned from manage-billing");
       }
 
       // Open in system browser (same pattern as OAuth)
       await shellOpen(data.url);
     } catch (error) {
-      console.error('[Desktop Billing] Failed to open billing portal:', error);
+      console.error("[Desktop Billing] Failed to open billing portal:", error);
 
       if (error instanceof Error) {
         throw error;
       }
 
-      throw new Error('Failed to open billing portal', { cause: error });
+      throw new Error("Failed to open billing portal", { cause: error });
     }
   }
 
@@ -259,48 +260,48 @@ export class SaasBillingService {
    * Fetch available plan pricing from Stripe
    * Calls stripe-price-lookup edge function to get current pricing for all plans
    */
-  async getAvailablePlans(currencyCode: string = 'usd'): Promise<Map<string, PlanPrice>> {
+  async getAvailablePlans(currencyCode: string = "usd"): Promise<Map<string, PlanPrice>> {
     // Check if in SaaS mode
     const isAvailable = await this.isBillingAvailable();
     if (!isAvailable) {
-      throw new Error('Billing is only available in SaaS mode');
+      throw new Error("Billing is only available in SaaS mode");
     }
 
     // Get JWT token for authentication
     const token = await authService.getAuthToken();
     if (!token) {
-      throw new Error('No authentication token available');
+      throw new Error("No authentication token available");
     }
 
     try {
       const { data, error } = await supabase.functions.invoke<{
         prices: Record<string, { unit_amount: number; currency: string }>;
         missing: string[];
-      }>('stripe-price-lookup', {
+      }>("stripe-price-lookup", {
         headers: {
           Authorization: `Bearer ${token}`,
         },
         body: {
-          lookup_keys: ['plan:pro', 'meter:overage'],
+          lookup_keys: ["plan:pro", "meter:overage"],
           currency: currencyCode,
         },
       });
 
       if (error) {
-        throw new Error(error.message || 'Failed to fetch plan pricing');
+        throw new Error(error.message || "Failed to fetch plan pricing");
       }
 
       if (!data || !data.prices) {
-        throw new Error('No pricing data returned');
+        throw new Error("No pricing data returned");
       }
 
       // Map prices with currency symbols
       const plans = new Map<string, PlanPrice>();
-      const proPrice = data.prices['plan:pro'];
-      const overagePrice = data.prices['meter:overage'];
+      const proPrice = data.prices["plan:pro"];
+      const overagePrice = data.prices["meter:overage"];
 
       if (proPrice) {
-        plans.set('team', {
+        plans.set("team", {
           price: proPrice.unit_amount / 100,
           currency: getCurrencySymbol(proPrice.currency),
           overagePrice: overagePrice ? overagePrice.unit_amount / 100 : 0.05,
@@ -309,7 +310,7 @@ export class SaasBillingService {
 
       return plans;
     } catch (error) {
-      console.error('[Desktop Billing] Error fetching available plans:', error);
+      console.error("[Desktop Billing] Error fetching available plans:", error);
       throw error;
     }
   }
@@ -322,51 +323,51 @@ export class SaasBillingService {
     // Check if in SaaS mode
     const isAvailable = await this.isBillingAvailable();
     if (!isAvailable) {
-      throw new Error('Checkout is only available in SaaS mode');
+      throw new Error("Checkout is only available in SaaS mode");
     }
 
     // Get JWT token for authentication
     const token = await authService.getAuthToken();
     if (!token) {
-      throw new Error('No authentication token available');
+      throw new Error("No authentication token available");
     }
 
     try {
       // Call Supabase edge function to create checkout session
       // Use 'hosted' mode for browser redirect instead of 'embedded'
-      const { data, error } = await supabase.functions.invoke<{ url: string }>('create-checkout', {
+      const { data, error } = await supabase.functions.invoke<{ url: string }>("create-checkout", {
         headers: {
           Authorization: `Bearer ${token}`,
         },
         body: {
-          ui_mode: 'hosted',
+          ui_mode: "hosted",
           success_url: `${returnUrl}/checkout/success`,
           cancel_url: `${returnUrl}/checkout/cancel`,
-          purchase_type: 'subscription',
+          purchase_type: "subscription",
           plan: planId,
         },
       });
 
       if (error) {
-        console.error('[Desktop Billing] Error creating checkout session:', error);
-        throw new Error(error.message || 'Failed to create checkout session');
+        console.error("[Desktop Billing] Error creating checkout session:", error);
+        throw new Error(error.message || "Failed to create checkout session");
       }
 
       if (!data || !data.url) {
-        console.error('[Desktop Billing] Invalid response data:', data);
-        throw new Error('No checkout URL returned from create-checkout');
+        console.error("[Desktop Billing] Invalid response data:", data);
+        throw new Error("No checkout URL returned from create-checkout");
       }
 
       // Open in system browser (same pattern as billing portal)
       await shellOpen(data.url);
     } catch (error) {
-      console.error('[Desktop Billing] Failed to create checkout session:', error);
+      console.error("[Desktop Billing] Failed to create checkout session:", error);
 
       if (error instanceof Error) {
         throw error;
       }
 
-      throw new Error('Failed to create checkout session', { cause: error });
+      throw new Error("Failed to create checkout session", { cause: error });
     }
   }
 }
diff --git a/frontend/src/desktop/services/saasErrorInterceptor.ts b/frontend/src/desktop/services/saasErrorInterceptor.ts
index 06e5dc963c..34ab95a16f 100644
--- a/frontend/src/desktop/services/saasErrorInterceptor.ts
+++ b/frontend/src/desktop/services/saasErrorInterceptor.ts
@@ -1,5 +1,5 @@
-import { extractAxiosErrorMessage } from '@app/services/httpErrorUtils';
-import { alert } from '@app/components/toast';
+import { extractAxiosErrorMessage } from "@app/services/httpErrorUtils";
+import { alert } from "@app/components/toast";
 
 /**
  * Desktop implementation: intercepts errors from SaaS backend requests
@@ -17,13 +17,13 @@ export function handleSaaSError(error: unknown): boolean {
   const { title: originalTitle, body: originalBody } = extractAxiosErrorMessage(error);
 
   alert({
-    alertType: 'error',
-    title: 'Cloud Processing Failed',
+    alertType: "error",
+    title: "Cloud Processing Failed",
     body: `This tool requires cloud processing but encountered an error: ${originalBody}. Please check your connection and try again.`,
     expandable: true,
     isPersistentPopup: false,
   });
 
-  console.error('[saasErrorInterceptor] SaaS backend error:', { originalTitle, originalBody });
+  console.error("[saasErrorInterceptor] SaaS backend error:", { originalTitle, originalBody });
   return true;
 }
diff --git a/frontend/src/desktop/services/selfHostedServerMonitor.ts b/frontend/src/desktop/services/selfHostedServerMonitor.ts
index dfb4085a97..428dda44a9 100644
--- a/frontend/src/desktop/services/selfHostedServerMonitor.ts
+++ b/frontend/src/desktop/services/selfHostedServerMonitor.ts
@@ -1,7 +1,7 @@
-import { fetch } from '@tauri-apps/plugin-http';
+import { fetch } from "@tauri-apps/plugin-http";
 
 export interface SelfHostedServerState {
-  status: 'idle' | 'checking' | 'online' | 'offline';
+  status: "idle" | "checking" | "online" | "offline";
   isOnline: boolean;
   serverUrl: string | null;
 }
@@ -25,7 +25,7 @@ class SelfHostedServerMonitor {
   private static instance: SelfHostedServerMonitor;
 
   private state: SelfHostedServerState = {
-    status: 'idle',
+    status: "idle",
     isOnline: false,
     serverUrl: null,
   };
@@ -53,7 +53,7 @@ class SelfHostedServerMonitor {
 
     this.stop();
 
-    this.updateState({ serverUrl, status: 'checking', isOnline: false });
+    this.updateState({ serverUrl, status: "checking", isOnline: false });
 
     void this.pollOnce(serverUrl);
     this.intervalId = setInterval(() => {
@@ -67,7 +67,7 @@ class SelfHostedServerMonitor {
       clearInterval(this.intervalId);
       this.intervalId = null;
     }
-    this.updateState({ status: 'idle', isOnline: false, serverUrl: null });
+    this.updateState({ status: "idle", isOnline: false, serverUrl: null });
   }
 
   get isOnline(): boolean {
@@ -96,22 +96,22 @@ class SelfHostedServerMonitor {
   }
 
   private async pollOnce(serverUrl: string): Promise<void> {
-    const healthUrl = `${serverUrl.replace(/\/$/, '')}/api/v1/info/status`;
+    const healthUrl = `${serverUrl.replace(/\/$/, "")}/api/v1/info/status`;
 
     try {
       const response = await fetch(healthUrl, {
-        method: 'GET',
+        method: "GET",
         connectTimeout: REQUEST_TIMEOUT_MS,
       });
 
       // 401/403 means the server is running but requires authentication — treat as online
       if (response.ok || response.status === 401 || response.status === 403) {
-        this.updateState({ status: 'online', isOnline: true });
+        this.updateState({ status: "online", isOnline: true });
       } else {
-        this.updateState({ status: 'offline', isOnline: false });
+        this.updateState({ status: "offline", isOnline: false });
       }
     } catch {
-      this.updateState({ status: 'offline', isOnline: false });
+      this.updateState({ status: "offline", isOnline: false });
     }
   }
 
@@ -119,14 +119,12 @@ class SelfHostedServerMonitor {
     const next = { ...this.state, ...partial };
 
     const changed =
-      next.status !== this.state.status ||
-      next.isOnline !== this.state.isOnline ||
-      next.serverUrl !== this.state.serverUrl;
+      next.status !== this.state.status || next.isOnline !== this.state.isOnline || next.serverUrl !== this.state.serverUrl;
 
     this.state = next;
 
     if (changed) {
-      this.listeners.forEach(listener => listener(this.state));
+      this.listeners.forEach((listener) => listener(this.state));
     }
   }
 }
diff --git a/frontend/src/desktop/services/tauriBackendService.ts b/frontend/src/desktop/services/tauriBackendService.ts
index 703fa9d388..adc0f58712 100644
--- a/frontend/src/desktop/services/tauriBackendService.ts
+++ b/frontend/src/desktop/services/tauriBackendService.ts
@@ -1,13 +1,13 @@
-import { invoke } from '@tauri-apps/api/core';
-import { fetch } from '@tauri-apps/plugin-http';
-import { alert } from '@app/components/toast';
+import { invoke } from "@tauri-apps/api/core";
+import { fetch } from "@tauri-apps/plugin-http";
+import { alert } from "@app/components/toast";
 
-export type BackendStatus = 'stopped' | 'starting' | 'healthy' | 'unhealthy';
+export type BackendStatus = "stopped" | "starting" | "healthy" | "unhealthy";
 
 export class TauriBackendService {
   private static instance: TauriBackendService;
   private backendStarted = false;
-  private backendStatus: BackendStatus = 'stopped';
+  private backendStatus: BackendStatus = "stopped";
   private backendPort: number | null = null;
   private healthMonitor: Promise<void> | null = null;
   private startPromise: Promise<void> | null = null;
@@ -35,7 +35,7 @@ export class TauriBackendService {
   }
 
   get isOnline(): boolean {
-    return this.backendStatus === 'healthy';
+    return this.backendStatus === "healthy";
   }
 
   getBackendPort(): number | null {
@@ -58,16 +58,16 @@ export class TauriBackendService {
       return;
     }
     this.backendStatus = status;
-    this.statusListeners.forEach(listener => listener(status));
+    this.statusListeners.forEach((listener) => listener(status));
 
-    if (status === 'healthy') {
+    if (status === "healthy") {
       // Reset restart counter on successful recovery so future failures get a full retry budget.
       this.restartAttempts = 0;
     }
 
     // Auto-recovery: when our own backend goes unhealthy, try restarting it
     // before reporting as permanently offline.
-    if (status === 'unhealthy' && this.isLocalBackend && !this.isRecovering) {
+    if (status === "unhealthy" && this.isLocalBackend && !this.isRecovering) {
       this.scheduleRecovery();
     }
   }
@@ -78,7 +78,7 @@ export class TauriBackendService {
     // should resolve on their own before we attempt a full restart.
     this.recoveryTimer = setTimeout(() => {
       this.recoveryTimer = null;
-      if (this.backendStatus !== 'unhealthy') return; // Recovered on its own
+      if (this.backendStatus !== "unhealthy") return; // Recovered on its own
       void this.attemptRestart();
     }, 2000);
   }
@@ -86,20 +86,24 @@ export class TauriBackendService {
   async attemptRestart(): Promise<void> {
     if (this.isRecovering) return;
     if (this.restartAttempts >= TauriBackendService.MAX_RESTART_ATTEMPTS) {
-      console.error(`[TauriBackendService] Backend failed after ${TauriBackendService.MAX_RESTART_ATTEMPTS} restart attempts, giving up.`);
+      console.error(
+        `[TauriBackendService] Backend failed after ${TauriBackendService.MAX_RESTART_ATTEMPTS} restart attempts, giving up.`,
+      );
       alert({
-        alertType: 'error',
-        title: 'Backend failed to restart',
-        body: 'The local backend could not be recovered. Please restart the app.',
+        alertType: "error",
+        title: "Backend failed to restart",
+        body: "The local backend could not be recovered. Please restart the app.",
         isPersistentPopup: true,
       });
       return;
     }
     this.restartAttempts++;
-    console.log(`[TauriBackendService] Backend unhealthy, attempting restart (${this.restartAttempts}/${TauriBackendService.MAX_RESTART_ATTEMPTS})...`);
+    console.log(
+      `[TauriBackendService] Backend unhealthy, attempting restart (${this.restartAttempts}/${TauriBackendService.MAX_RESTART_ATTEMPTS})...`,
+    );
     alert({
-      alertType: 'warning',
-      title: 'Backend stopped unexpectedly',
+      alertType: "warning",
+      title: "Backend stopped unexpectedly",
       body: `Attempting to restart... (${this.restartAttempts}/${TauriBackendService.MAX_RESTART_ATTEMPTS})`,
       durationMs: 5000,
     });
@@ -107,29 +111,29 @@ export class TauriBackendService {
     // Reset started flag so startBackend() will run again
     this.backendStarted = false;
     this.startPromise = null;
-    this.setStatus('starting');
+    this.setStatus("starting");
     try {
       await this.startBackend();
       this.restartAttempts = 0; // Reset on successful restart
       this.isRecovering = false;
-      console.log('[TauriBackendService] Backend restarted successfully.');
+      console.log("[TauriBackendService] Backend restarted successfully.");
       alert({
-        alertType: 'success',
-        title: 'Backend restarted',
-        body: 'The local backend is back online.',
+        alertType: "success",
+        title: "Backend restarted",
+        body: "The local backend is back online.",
         durationMs: 4000,
       });
     } catch (err) {
-      console.error('[TauriBackendService] Restart failed:', err);
+      console.error("[TauriBackendService] Restart failed:", err);
       // Set isRecovering = false BEFORE setStatus to prevent re-triggering scheduleRecovery
       // if the max attempts check above doesn't catch it next time.
       this.isRecovering = false;
       if (this.restartAttempts < TauriBackendService.MAX_RESTART_ATTEMPTS) {
-        this.setStatus('unhealthy'); // Will trigger another scheduleRecovery
+        this.setStatus("unhealthy"); // Will trigger another scheduleRecovery
       } else {
         // Don't call setStatus('unhealthy') — the status is already unhealthy and calling it
         // again would bypass the dedup check and re-trigger scheduleRecovery.
-        console.error('[TauriBackendService] Max restart attempts reached, backend is permanently unhealthy.');
+        console.error("[TauriBackendService] Max restart attempts reached, backend is permanently unhealthy.");
       }
     }
   }
@@ -146,7 +150,7 @@ export class TauriBackendService {
     }
 
     this.backendStarted = true; // Mark as active for health checks
-    this.setStatus('starting');
+    this.setStatus("starting");
     this.beginHealthMonitoring();
 
     // Discover the local bundled backend port in the background.
@@ -166,20 +170,20 @@ export class TauriBackendService {
       return this.startPromise;
     }
 
-    this.setStatus('starting');
+    this.setStatus("starting");
 
-    this.startPromise = invoke('start_backend', { backendUrl })
+    this.startPromise = invoke("start_backend", { backendUrl })
       .then(async () => {
         this.backendStarted = true;
-        this.setStatus('starting');
+        this.setStatus("starting");
 
         // Poll for the dynamically assigned port
         await this.waitForPort();
         this.beginHealthMonitoring();
       })
       .catch((error) => {
-        this.setStatus('unhealthy');
-        console.error('[TauriBackendService] Failed to start backend:', error);
+        this.setStatus("unhealthy");
+        console.error("[TauriBackendService] Failed to start backend:", error);
         throw error;
       })
       .finally(() => {
@@ -192,17 +196,17 @@ export class TauriBackendService {
   private async waitForPort(): Promise<void> {
     while (true) {
       try {
-        const port = await invoke<number | null>('get_backend_port');
+        const port = await invoke<number | null>("get_backend_port");
         if (port) {
           this.backendPort = port;
           // Notify status listeners so hooks reading getBackendUrl() re-evaluate
-          this.statusListeners.forEach(listener => listener(this.backendStatus));
+          this.statusListeners.forEach((listener) => listener(this.backendStatus));
           return;
         }
       } catch (error) {
-        console.error('Failed to get backend port:', error);
+        console.error("Failed to get backend port:", error);
       }
-      await new Promise(resolve => setTimeout(resolve, 500));
+      await new Promise((resolve) => setTimeout(resolve, 500));
     }
   }
 
@@ -212,7 +216,7 @@ export class TauriBackendService {
     }
     this.healthMonitor = this.waitForHealthy()
       .catch((error) => {
-        console.error('Backend failed to become healthy:', error);
+        console.error("Backend failed to become healthy:", error);
       })
       .finally(() => {
         this.healthMonitor = null;
@@ -222,12 +226,12 @@ export class TauriBackendService {
   /** Always checks the local bundled backend at localhost:{port}. */
   async checkBackendHealth(): Promise<boolean> {
     if (!this.backendStarted) {
-      console.debug('[TauriBackendService] Health check: backend not started');
-      this.setStatus('stopped');
+      console.debug("[TauriBackendService] Health check: backend not started");
+      this.setStatus("stopped");
       return false;
     }
     if (!this.backendPort) {
-      console.debug('[TauriBackendService] Health check: backend port not available');
+      console.debug("[TauriBackendService] Health check: backend port not available");
       return false;
     }
 
@@ -235,11 +239,11 @@ export class TauriBackendService {
     console.debug(`[TauriBackendService] Checking local backend health at: ${configUrl}`);
 
     try {
-      const response = await fetch(configUrl, { method: 'GET', connectTimeout: 5000 });
+      const response = await fetch(configUrl, { method: "GET", connectTimeout: 5000 });
 
       if (!response.ok) {
         console.warn(`[TauriBackendService] Health check failed: ${response.status}`);
-        this.setStatus('unhealthy');
+        this.setStatus("unhealthy");
         return false;
       }
 
@@ -247,11 +251,11 @@ export class TauriBackendService {
       const dependenciesReady = data.dependenciesReady === true;
       console.debug(`[TauriBackendService] dependenciesReady=${dependenciesReady}`);
 
-      this.setStatus(dependenciesReady ? 'healthy' : 'starting');
+      this.setStatus(dependenciesReady ? "healthy" : "starting");
       return dependenciesReady;
     } catch (error) {
-      console.error('[TauriBackendService] Health check error:', error);
-      this.setStatus('unhealthy');
+      console.error("[TauriBackendService] Health check error:", error);
+      this.setStatus("unhealthy");
       return false;
     }
   }
@@ -262,7 +266,7 @@ export class TauriBackendService {
       if (isHealthy) {
         return;
       }
-      await new Promise(resolve => setTimeout(resolve, 1000));
+      await new Promise((resolve) => setTimeout(resolve, 1000));
     }
   }
 
@@ -279,7 +283,7 @@ export class TauriBackendService {
       clearTimeout(this.recoveryTimer);
       this.recoveryTimer = null;
     }
-    this.setStatus('stopped');
+    this.setStatus("stopped");
     this.healthMonitor = null;
     this.startPromise = null;
   }
diff --git a/frontend/src/desktop/services/tauriHttpClient.ts b/frontend/src/desktop/services/tauriHttpClient.ts
index 43b2cd45bc..0c5e84cfaf 100644
--- a/frontend/src/desktop/services/tauriHttpClient.ts
+++ b/frontend/src/desktop/services/tauriHttpClient.ts
@@ -1,4 +1,4 @@
-import { fetch } from '@tauri-apps/plugin-http';
+import { fetch } from "@tauri-apps/plugin-http";
 
 /**
  * Tauri HTTP Client - wrapper around Tauri's native HTTP client
@@ -21,7 +21,7 @@ export interface TauriHttpRequestConfig {
   params?: Record<string, string | number | boolean> | any;
   data?: any;
   timeout?: number;
-  responseType?: 'json' | 'text' | 'blob' | 'arraybuffer';
+  responseType?: "json" | "text" | "blob" | "arraybuffer";
   withCredentials?: boolean;
   // Custom properties for desktop
   operationName?: string;
@@ -59,12 +59,12 @@ interface Interceptors {
 
 class TauriHttpClient {
   public defaults: TauriHttpRequestConfig = {
-    baseURL: '',
+    baseURL: "",
     headers: {
-      'User-Agent': 'StirlingPDF-Desktop/1.0 Tauri',
+      "User-Agent": "StirlingPDF-Desktop/1.0 Tauri",
     },
     timeout: 120000,
-    responseType: 'json',
+    responseType: "json",
     withCredentials: false, // Desktop doesn't need credentials (backend has allowCredentials=false)
   };
 
@@ -91,7 +91,13 @@ class TauriHttpClient {
     }
   }
 
-  private createError(message: string, config?: TauriHttpRequestConfig, code?: string, response?: TauriHttpResponse, originalError?: unknown): TauriHttpError {
+  private createError(
+    message: string,
+    config?: TauriHttpRequestConfig,
+    code?: string,
+    response?: TauriHttpResponse,
+    originalError?: unknown,
+  ): TauriHttpError {
     const error = new Error(message) as TauriHttpError;
     error.config = config;
     error.code = code;
@@ -105,38 +111,41 @@ class TauriHttpClient {
     });
 
     // Log detailed error information for debugging
-    console.error('[TauriHttpClient] Error details:', {
+    console.error("[TauriHttpClient] Error details:", {
       message,
       code,
       url: config?.url,
       method: config?.method,
       status: response?.status,
-      originalError: originalError instanceof Error ? {
-        name: originalError.name,
-        message: originalError.message,
-        stack: originalError.stack,
-      } : originalError,
+      originalError:
+        originalError instanceof Error
+          ? {
+              name: originalError.name,
+              message: originalError.message,
+              stack: originalError.stack,
+            }
+          : originalError,
     });
 
     return error;
   }
 
   private buildUrl(config: TauriHttpRequestConfig): string {
-    let url = config.url || '';
+    let url = config.url || "";
 
     // If URL is already absolute, use it as-is
-    if (url.startsWith('http://') || url.startsWith('https://')) {
+    if (url.startsWith("http://") || url.startsWith("https://")) {
       return url;
     }
 
     // Prepend baseURL if present
-    const baseURL = config.baseURL || this.defaults.baseURL || '';
+    const baseURL = config.baseURL || this.defaults.baseURL || "";
     if (baseURL) {
       url = baseURL + url;
     }
 
     // Add query parameters
-    if (config.params && typeof config.params === 'object') {
+    if (config.params && typeof config.params === "object") {
       const searchParams = new URLSearchParams();
       Object.entries(config.params as Record<string, unknown>).forEach(([key, value]) => {
         if (value !== null && value !== undefined) {
@@ -145,7 +154,7 @@ class TauriHttpClient {
       });
       const queryString = searchParams.toString();
       if (queryString) {
-        url += (url.includes('?') ? '&' : '?') + queryString;
+        url += (url.includes("?") ? "&" : "?") + queryString;
       }
     }
 
@@ -170,7 +179,7 @@ class TauriHttpClient {
     }
 
     const url = this.buildUrl(finalConfig);
-    const method = (finalConfig.method || 'GET').toUpperCase();
+    const method = (finalConfig.method || "GET").toUpperCase();
 
     // Prepare request body and headers
     let body: BodyInit | undefined;
@@ -180,11 +189,11 @@ class TauriHttpClient {
       if (finalConfig.data instanceof FormData) {
         // FormData can be passed directly
         body = finalConfig.data;
-      } else if (typeof finalConfig.data === 'object') {
+      } else if (typeof finalConfig.data === "object") {
         // Serialize as JSON
         body = JSON.stringify(finalConfig.data);
-        if (!headers['Content-Type']) {
-          headers['Content-Type'] = 'application/json';
+        if (!headers["Content-Type"]) {
+          headers["Content-Type"] = "application/json";
         }
       } else {
         body = String(finalConfig.data);
@@ -193,7 +202,7 @@ class TauriHttpClient {
 
     try {
       // Convert withCredentials to fetch API's credentials option
-      const credentials: RequestCredentials = finalConfig.withCredentials ? 'include' : 'omit';
+      const credentials: RequestCredentials = finalConfig.withCredentials ? "include" : "omit";
 
       // Make the request using Tauri's native HTTP client (standard Fetch API)
       // Enable certificate bypass for HTTPS to handle missing intermediate certs and self-signed certs
@@ -209,7 +218,7 @@ class TauriHttpClient {
       // - Missing intermediate certificates
       // - Self-signed certificates
       // - Certificate hostname mismatches
-      if (url.startsWith('https://')) {
+      if (url.startsWith("https://")) {
         fetchOptions.danger = {
           acceptInvalidCerts: true,
           acceptInvalidHostnames: true,
@@ -233,28 +242,28 @@ class TauriHttpClient {
         try {
           errorBody = await response.text();
         } catch {
-          errorBody = '';
+          errorBody = "";
         }
 
         // Create more descriptive error messages based on status code
         let errorMessage = errorBody || `Request failed with status code ${response.status}`;
-        let errorCode = 'ERR_BAD_REQUEST';
+        let errorCode = "ERR_BAD_REQUEST";
 
         if (response.status === 401) {
-          errorMessage = 'Authentication failed - Invalid credentials';
-          errorCode = 'ERR_UNAUTHORIZED';
+          errorMessage = "Authentication failed - Invalid credentials";
+          errorCode = "ERR_UNAUTHORIZED";
         } else if (response.status === 403) {
-          errorMessage = 'Access denied - Insufficient permissions';
-          errorCode = 'ERR_FORBIDDEN';
+          errorMessage = "Access denied - Insufficient permissions";
+          errorCode = "ERR_FORBIDDEN";
         } else if (response.status === 404) {
-          errorMessage = 'Endpoint not found - Server may not support this operation';
-          errorCode = 'ERR_NOT_FOUND';
+          errorMessage = "Endpoint not found - Server may not support this operation";
+          errorCode = "ERR_NOT_FOUND";
         } else if (response.status === 500) {
-          errorMessage = 'Internal server error - Please check server logs';
-          errorCode = 'ERR_SERVER_ERROR';
+          errorMessage = "Internal server error - Please check server logs";
+          errorCode = "ERR_SERVER_ERROR";
         } else if (response.status === 502 || response.status === 503 || response.status === 504) {
-          errorMessage = 'Server unavailable or timeout - Please try again';
-          errorCode = 'ERR_SERVICE_UNAVAILABLE';
+          errorMessage = "Server unavailable or timeout - Please try again";
+          errorCode = "ERR_SERVICE_UNAVAILABLE";
         }
 
         console.error(`[TauriHttpClient] HTTP Error ${response.status}:`, {
@@ -268,17 +277,12 @@ class TauriHttpClient {
         const errorResponse: TauriHttpResponse<T> = {
           data: errorBody as T,
           status: response.status,
-          statusText: response.statusText || '',
+          statusText: response.statusText || "",
           headers: responseHeaders,
           config: finalConfig,
         };
 
-        const error = this.createError(
-          errorMessage,
-          finalConfig,
-          errorCode,
-          errorResponse
-        );
+        const error = this.createError(errorMessage, finalConfig, errorCode, errorResponse);
 
         // Run error interceptors
         let finalError: unknown = error;
@@ -296,33 +300,33 @@ class TauriHttpClient {
 
       // Parse response body for successful responses
       let data: T;
-      const responseType = finalConfig.responseType || 'json';
+      const responseType = finalConfig.responseType || "json";
 
-      if (responseType === 'json') {
+      if (responseType === "json") {
         const text = await response.text();
         data = (text ? JSON.parse(text) : null) as T;
-      } else if (responseType === 'text') {
+      } else if (responseType === "text") {
         data = (await response.text()) as T;
-      } else if (responseType === 'blob') {
+      } else if (responseType === "blob") {
         // Standard fetch doesn't set blob.type from Content-Type header (unlike axios)
         // Set it manually to match axios behavior
         const blob = await response.blob();
         if (!blob.type) {
-          const contentType = response.headers.get('content-type') || 'application/octet-stream';
+          const contentType = response.headers.get("content-type") || "application/octet-stream";
           data = new Blob([blob], { type: contentType }) as T;
         } else {
           data = blob as T;
         }
-      } else if (responseType === 'arraybuffer') {
+      } else if (responseType === "arraybuffer") {
         data = (await response.arrayBuffer()) as T;
       } else {
-        data = await response.json() as T;
+        data = (await response.json()) as T;
       }
 
       const httpResponse: TauriHttpResponse<T> = {
         data,
         status: response.status,
-        statusText: response.statusText || '',
+        statusText: response.statusText || "",
         headers: responseHeaders,
         config: finalConfig,
       };
@@ -330,60 +334,70 @@ class TauriHttpClient {
       // Run response interceptors
       let finalResponse = httpResponse;
       for (const handler of this.interceptors.response.handlers) {
-        finalResponse = await Promise.resolve(handler.fulfilled(finalResponse)) as TauriHttpResponse<T>;
+        finalResponse = (await Promise.resolve(handler.fulfilled(finalResponse))) as TauriHttpResponse<T>;
       }
 
       return finalResponse;
     } catch (error: unknown) {
       // If it's already a TauriHttpError with interceptors run, re-throw
-      if (error && typeof error === 'object' && 'isAxiosError' in error) {
+      if (error && typeof error === "object" && "isAxiosError" in error) {
         throw error;
       }
 
       // Create detailed error messages for network/other failures
-      let errorMessage = 'Network Error';
-      let errorCode = 'ERR_NETWORK';
+      let errorMessage = "Network Error";
+      let errorCode = "ERR_NETWORK";
 
       if (error instanceof Error) {
         const errMsg = error.message.toLowerCase();
 
         // Connection refused - server not running or wrong port
-        if (errMsg.includes('connection refused') || errMsg.includes('econnrefused')) {
+        if (errMsg.includes("connection refused") || errMsg.includes("econnrefused")) {
           errorMessage = `Unable to connect to server at ${url}. Server may not be running or port is incorrect.`;
-          errorCode = 'ERR_CONNECTION_REFUSED';
+          errorCode = "ERR_CONNECTION_REFUSED";
         }
         // Timeout - server too slow or unreachable
-        else if (errMsg.includes('timeout') || errMsg.includes('timed out')) {
+        else if (errMsg.includes("timeout") || errMsg.includes("timed out")) {
           errorMessage = `Connection timed out to ${url}. Server is not responding or is too slow.`;
-          errorCode = 'ERR_TIMEOUT';
+          errorCode = "ERR_TIMEOUT";
         }
         // DNS failure - invalid domain or network issue
-        else if (errMsg.includes('getaddrinfo') || errMsg.includes('dns') || errMsg.includes('not found') || errMsg.includes('enotfound')) {
+        else if (
+          errMsg.includes("getaddrinfo") ||
+          errMsg.includes("dns") ||
+          errMsg.includes("not found") ||
+          errMsg.includes("enotfound")
+        ) {
           errorMessage = `Cannot resolve server address: ${url}. Please check the URL is correct.`;
-          errorCode = 'ERR_DNS_FAILURE';
+          errorCode = "ERR_DNS_FAILURE";
         }
         // SSL/TLS errors - certificate issues
-        else if (errMsg.includes('ssl') || errMsg.includes('tls') || errMsg.includes('certificate') || errMsg.includes('cert')) {
+        else if (
+          errMsg.includes("ssl") ||
+          errMsg.includes("tls") ||
+          errMsg.includes("certificate") ||
+          errMsg.includes("cert")
+        ) {
           errorMessage = `SSL/TLS certificate error for ${url}. Server may have invalid or self-signed certificate.`;
-          errorCode = 'ERR_SSL_ERROR';
+          errorCode = "ERR_SSL_ERROR";
         }
         // Protocol errors - wrong protocol (http vs https)
-        else if (errMsg.includes('protocol') || errMsg.includes('https') || errMsg.includes('http')) {
+        else if (errMsg.includes("protocol") || errMsg.includes("https") || errMsg.includes("http")) {
           errorMessage = `Protocol error connecting to ${url}. Try using https:// instead of http:// or vice versa.`;
-          errorCode = 'ERR_PROTOCOL';
+          errorCode = "ERR_PROTOCOL";
         }
         // CORS errors
-        else if (errMsg.includes('cors')) {
+        else if (errMsg.includes("cors")) {
           errorMessage = `CORS error connecting to ${url}. Server may not allow requests from this application.`;
-          errorCode = 'ERR_CORS';
+          errorCode = "ERR_CORS";
         }
         // Generic error with original message
         else {
           errorMessage = `Network error: ${error.message}`;
-          errorCode = 'ERR_NETWORK';
+          errorCode = "ERR_NETWORK";
         }
 
-        console.error('[TauriHttpClient] Network error:', {
+        console.error("[TauriHttpClient] Network error:", {
           url,
           method,
           errorType: errorCode,
@@ -391,16 +405,10 @@ class TauriHttpClient {
           stack: error.stack,
         });
       } else {
-        console.error('[TauriHttpClient] Unknown error type:', error);
+        console.error("[TauriHttpClient] Unknown error type:", error);
       }
 
-      const httpError = this.createError(
-        errorMessage,
-        finalConfig,
-        errorCode,
-        undefined,
-        error
-      );
+      const httpError = this.createError(errorMessage, finalConfig, errorCode, undefined, error);
 
       // Run error interceptors
       let finalError: unknown = httpError;
@@ -422,31 +430,31 @@ class TauriHttpClient {
   }
 
   async get<T = any>(url: string, config?: TauriHttpRequestConfig): Promise<TauriHttpResponse<T>> {
-    return this.executeRequest<T>({ ...config, method: 'GET', url });
+    return this.executeRequest<T>({ ...config, method: "GET", url });
   }
 
   async delete<T = any>(url: string, config?: TauriHttpRequestConfig): Promise<TauriHttpResponse<T>> {
-    return this.executeRequest<T>({ ...config, method: 'DELETE', url });
+    return this.executeRequest<T>({ ...config, method: "DELETE", url });
   }
 
   async head<T = any>(url: string, config?: TauriHttpRequestConfig): Promise<TauriHttpResponse<T>> {
-    return this.executeRequest<T>({ ...config, method: 'HEAD', url });
+    return this.executeRequest<T>({ ...config, method: "HEAD", url });
   }
 
   async options<T = any>(url: string, config?: TauriHttpRequestConfig): Promise<TauriHttpResponse<T>> {
-    return this.executeRequest<T>({ ...config, method: 'OPTIONS', url });
+    return this.executeRequest<T>({ ...config, method: "OPTIONS", url });
   }
 
   async post<T = any>(url: string, data?: any, config?: TauriHttpRequestConfig): Promise<TauriHttpResponse<T>> {
-    return this.executeRequest<T>({ ...config, method: 'POST', url, data });
+    return this.executeRequest<T>({ ...config, method: "POST", url, data });
   }
 
   async put<T = any>(url: string, data?: any, config?: TauriHttpRequestConfig): Promise<TauriHttpResponse<T>> {
-    return this.executeRequest<T>({ ...config, method: 'PUT', url, data });
+    return this.executeRequest<T>({ ...config, method: "PUT", url, data });
   }
 
   async patch<T = any>(url: string, data?: any, config?: TauriHttpRequestConfig): Promise<TauriHttpResponse<T>> {
-    return this.executeRequest<T>({ ...config, method: 'PATCH', url, data });
+    return this.executeRequest<T>({ ...config, method: "PATCH", url, data });
   }
 
   // Axios compatibility methods
@@ -460,7 +468,7 @@ class TauriHttpClient {
 
   async postForm<T = any>(url: string, data?: any, config?: TauriHttpRequestConfig): Promise<TauriHttpResponse<T>> {
     const formData = data instanceof FormData ? data : new FormData();
-    if (!(data instanceof FormData) && data && typeof data === 'object') {
+    if (!(data instanceof FormData) && data && typeof data === "object") {
       Object.entries(data).forEach(([key, value]) => {
         formData.append(key, String(value));
       });
@@ -470,7 +478,7 @@ class TauriHttpClient {
 
   async putForm<T = any>(url: string, data?: any, config?: TauriHttpRequestConfig): Promise<TauriHttpResponse<T>> {
     const formData = data instanceof FormData ? data : new FormData();
-    if (!(data instanceof FormData) && data && typeof data === 'object') {
+    if (!(data instanceof FormData) && data && typeof data === "object") {
       Object.entries(data).forEach(([key, value]) => {
         formData.append(key, String(value));
       });
@@ -480,7 +488,7 @@ class TauriHttpClient {
 
   async patchForm<T = any>(url: string, data?: any, config?: TauriHttpRequestConfig): Promise<TauriHttpResponse<T>> {
     const formData = data instanceof FormData ? data : new FormData();
-    if (!(data instanceof FormData) && data && typeof data === 'object') {
+    if (!(data instanceof FormData) && data && typeof data === "object") {
       Object.entries(data).forEach(([key, value]) => {
         formData.append(key, String(value));
       });
diff --git a/frontend/src/desktop/tsconfig.json b/frontend/src/desktop/tsconfig.json
index 6c6989ebc3..26287650f7 100644
--- a/frontend/src/desktop/tsconfig.json
+++ b/frontend/src/desktop/tsconfig.json
@@ -3,25 +3,10 @@
   "compilerOptions": {
     "baseUrl": "../../",
     "paths": {
-      "@app/*": [
-        "src/desktop/*",
-        "src/proprietary/*",
-        "src/core/*"
-      ],
-      "@proprietary/*": [
-        "src/proprietary/*"
-      ],
-      "@core/*": [
-        "src/core/*"
-      ]
+      "@app/*": ["src/desktop/*", "src/proprietary/*", "src/core/*"],
+      "@proprietary/*": ["src/proprietary/*"],
+      "@core/*": ["src/core/*"]
     }
   },
-  "include": [
-    "../global.d.ts",
-    "../*.js",
-    "../*.ts",
-    "../*.tsx",
-    "../core/setupTests.ts",
-    "."
-  ]
+  "include": ["../global.d.ts", "../*.js", "../*.ts", "../*.tsx", "../core/setupTests.ts", "."]
 }
diff --git a/frontend/src/desktop/types/billing.ts b/frontend/src/desktop/types/billing.ts
index 3e67a9b77d..f5ef6c024b 100644
--- a/frontend/src/desktop/types/billing.ts
+++ b/frontend/src/desktop/types/billing.ts
@@ -6,28 +6,28 @@
 /**
  * Plan tier levels (string union for tier identification)
  */
-export type TierLevel = 'free' | 'team' | 'enterprise';
+export type TierLevel = "free" | "team" | "enterprise";
 
 /**
  * Stripe subscription status values
  * @see https://stripe.com/docs/api/subscriptions/object#subscription_object-status
  */
 export type SubscriptionStatus =
-  | 'active'
-  | 'trialing'
-  | 'past_due'
-  | 'canceled'
-  | 'incomplete'
-  | 'incomplete_expired'
-  | 'unpaid';
+  | "active"
+  | "trialing"
+  | "past_due"
+  | "canceled"
+  | "incomplete"
+  | "incomplete_expired"
+  | "unpaid";
 
 /**
  * Stripe plan IDs (Stripe API naming)
  * Note: UI uses 'team' but Stripe uses 'pro'
  */
-export type StripePlanId = 'pro' | 'enterprise';
+export type StripePlanId = "pro" | "enterprise";
 
 /**
  * Plan IDs used in the application (UI naming)
  */
-export type PlanId = 'team' | 'enterprise';
+export type PlanId = "team" | "enterprise";
diff --git a/frontend/src/desktop/utils/oauthCallbackHtml.ts b/frontend/src/desktop/utils/oauthCallbackHtml.ts
index a2119d9981..ddc4b89f40 100644
--- a/frontend/src/desktop/utils/oauthCallbackHtml.ts
+++ b/frontend/src/desktop/utils/oauthCallbackHtml.ts
@@ -18,9 +18,9 @@ export function buildOAuthCallbackHtml({
   isError = false,
   errorPlaceholder = false,
 }: OAuthCallbackHtmlOptions): string {
-  const iconColor = isError ? '#d32f2f' : '#2e7d32';
-  const iconColorDark = isError ? '#ef5350' : '#66bb6a';
-  const icon = isError ? '✗' : '✓';
+  const iconColor = isError ? "#d32f2f" : "#2e7d32";
+  const iconColorDark = isError ? "#ef5350" : "#66bb6a";
+  const icon = isError ? "✗" : "✓";
 
   return `<!DOCTYPE html>
 <html>
@@ -74,7 +74,9 @@ export function buildOAuthCallbackHtml({
       font-size: 15px;
     }
 
-    ${errorPlaceholder ? `
+    ${
+      errorPlaceholder
+        ? `
     .error-details {
       background: #ffebee;
       border: 1px solid #ffcdd2;
@@ -87,7 +89,9 @@ export function buildOAuthCallbackHtml({
       text-align: left;
       line-height: 1.5;
     }
-    ` : ''}
+    `
+        : ""
+    }
 
     /* Dark mode support */
     @media (prefers-color-scheme: dark) {
@@ -113,13 +117,17 @@ export function buildOAuthCallbackHtml({
         color: #b0b0b0;
       }
 
-      ${errorPlaceholder ? `
+      ${
+        errorPlaceholder
+          ? `
       .error-details {
         background: #3d2020;
         border: 1px solid #5d3030;
         color: #ef9a9a;
       }
-      ` : ''}
+      `
+          : ""
+      }
     }
 
     /* Mobile responsive */
@@ -147,7 +155,7 @@ export function buildOAuthCallbackHtml({
     <div class="icon">${icon}</div>
     <h1>${title}</h1>
     <p>${message}</p>
-    ${errorPlaceholder ? '<div class="error-details">{error}</div>' : ''}
+    ${errorPlaceholder ? '<div class="error-details">{error}</div>' : ""}
   </div>
 </body>
 </html>`;
diff --git a/frontend/src/global.d.ts b/frontend/src/global.d.ts
index 09487d4a06..bb9234baf7 100644
--- a/frontend/src/global.d.ts
+++ b/frontend/src/global.d.ts
@@ -1,8 +1,8 @@
 declare module "*.js";
-declare module '*.module.css';
+declare module "*.module.css";
 
 // Auto-generated icon set JSON import
-declare module 'assets/material-symbols-icons.json' {
+declare module "assets/material-symbols-icons.json" {
   const value: {
     prefix: string;
     icons: Record<string, any>;
@@ -18,7 +18,7 @@ declare global {
   }
 }
 
-declare module 'axios' {
+declare module "axios" {
   export interface AxiosRequestConfig<_D = unknown> {
     suppressErrorToast?: boolean;
     skipAuthRedirect?: boolean;
@@ -32,4 +32,4 @@ declare module 'axios' {
   }
 }
 
-export { };
+export {};
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 96383ab779..992d69fc09 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -1,36 +1,36 @@
-import '@mantine/core/styles.css';
-import '@mantine/dates/styles.css';
-import '../vite-env.d.ts'; // eslint-disable-line no-restricted-imports -- Outside app paths
-import '@app/styles/index.css'; // Import global styles
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import { ColorSchemeScript } from '@mantine/core';
-import { BrowserRouter } from 'react-router-dom';
-import App from '@app/App';
-import '@app/i18n'; // Initialize i18next
-import posthog from 'posthog-js';
-import { PostHogProvider } from '@posthog/react';
-import { BASE_PATH } from '@app/constants/app';
+import "@mantine/core/styles.css";
+import "@mantine/dates/styles.css";
+import "../vite-env.d.ts"; // eslint-disable-line no-restricted-imports -- Outside app paths
+import "@app/styles/index.css"; // Import global styles
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { ColorSchemeScript } from "@mantine/core";
+import { BrowserRouter } from "react-router-dom";
+import App from "@app/App";
+import "@app/i18n"; // Initialize i18next
+import posthog from "posthog-js";
+import { PostHogProvider } from "@posthog/react";
+import { BASE_PATH } from "@app/constants/app";
 
 posthog.init(import.meta.env.VITE_PUBLIC_POSTHOG_KEY, {
   api_host: import.meta.env.VITE_PUBLIC_POSTHOG_HOST,
-  defaults: '2025-05-24',
+  defaults: "2025-05-24",
   capture_exceptions: true, // This enables capturing exceptions using Error Tracking, set to false if you don't want this
   debug: false,
   opt_out_capturing_by_default: true, // Opt-out by default, controlled by cookie consent
-  persistence: 'memory', // No cookies/localStorage written until user opts in
+  persistence: "memory", // No cookies/localStorage written until user opts in
   cross_subdomain_cookie: false,
 });
 
 function updatePosthogConsent() {
   if (!posthog.__loaded) return;
-  const optIn = (window.CookieConsent as any)?.acceptedService?.('posthog', 'analytics') || false;
+  const optIn = (window.CookieConsent as any)?.acceptedService?.("posthog", "analytics") || false;
   if (optIn) {
-    posthog.set_config({ persistence: 'localStorage+cookie' });
+    posthog.set_config({ persistence: "localStorage+cookie" });
     posthog.opt_in_capturing();
   } else {
     posthog.opt_out_capturing();
-    posthog.set_config({ persistence: 'memory' });
+    posthog.set_config({ persistence: "memory" });
   }
   console.log("Updated PostHog consent: ", optIn ? "opted in" : "opted out");
 }
@@ -38,7 +38,7 @@ function updatePosthogConsent() {
 window.addEventListener("cc:onConsent", updatePosthogConsent);
 window.addEventListener("cc:onChange", updatePosthogConsent);
 
-const container = document.getElementById('root');
+const container = document.getElementById("root");
 if (!container) {
   throw new Error("Root container missing in index.html");
 }
@@ -47,12 +47,10 @@ const root = ReactDOM.createRoot(container); // Finds the root DOM element
 root.render(
   <React.StrictMode>
     <ColorSchemeScript />
-    <PostHogProvider
-      client={posthog}
-    >
+    <PostHogProvider client={posthog}>
       <BrowserRouter basename={BASE_PATH}>
         <App />
       </BrowserRouter>
     </PostHogProvider>
-  </React.StrictMode>
+  </React.StrictMode>,
 );
diff --git a/frontend/src/proprietary/App.tsx b/frontend/src/proprietary/App.tsx
index 81a1c53a18..9d1864b6ab 100644
--- a/frontend/src/proprietary/App.tsx
+++ b/frontend/src/proprietary/App.tsx
@@ -28,9 +28,7 @@ import "@app/utils/fileIdSafety";
 function MobileScannerProviders({ children }: { children: React.ReactNode }) {
   return (
     <PreferencesProvider>
-      <RainbowThemeProvider>
-        {children}
-      </RainbowThemeProvider>
+      <RainbowThemeProvider>{children}</RainbowThemeProvider>
     </PreferencesProvider>
   );
 }
diff --git a/frontend/src/proprietary/auth/UseSession.tsx b/frontend/src/proprietary/auth/UseSession.tsx
index a210ce6fb8..ed3d37c2e3 100644
--- a/frontend/src/proprietary/auth/UseSession.tsx
+++ b/frontend/src/proprietary/auth/UseSession.tsx
@@ -1,7 +1,7 @@
-import { createContext, useContext, useEffect, useState, ReactNode, useCallback } from 'react';
-import { springAuth } from '@app/auth/springAuthClient';
-import { clearPlatformAuthOnLoginInit } from '@app/extensions/authSessionCleanup';
-import type { Session, User, AuthError, AuthChangeEvent } from '@app/auth/springAuthClient';
+import { createContext, useContext, useEffect, useState, ReactNode, useCallback } from "react";
+import { springAuth } from "@app/auth/springAuthClient";
+import { clearPlatformAuthOnLoginInit } from "@app/extensions/authSessionCleanup";
+import type { Session, User, AuthError, AuthChangeEvent } from "@app/auth/springAuthClient";
 
 /**
  * Auth Context Type
@@ -38,12 +38,12 @@ export function AuthProvider({ children }: { children: ReactNode }) {
 
   // Debug: Track state transitions
   useEffect(() => {
-    console.log('[Auth] State changed:', {
+    console.log("[Auth] State changed:", {
       loading,
       hasSession: !!session,
       hasError: !!error,
       userId: session?.user?.id,
-      timestamp: new Date().toISOString()
+      timestamp: new Date().toISOString(),
     });
   }, [loading, session, error]);
 
@@ -54,24 +54,24 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     try {
       setLoading(true);
       setError(null);
-      console.debug('[Auth] refreshSession: start', { path: window.location.pathname });
-      console.debug('[Auth] Refreshing session...');
+      console.debug("[Auth] refreshSession: start", { path: window.location.pathname });
+      console.debug("[Auth] Refreshing session...");
 
       const { data, error } = await springAuth.refreshSession();
 
       if (error) {
-        console.error('[Auth] Session refresh error:', error);
+        console.error("[Auth] Session refresh error:", error);
         setError(error);
         setSession(null);
       } else {
-        console.debug('[Auth] Session refreshed successfully');
+        console.debug("[Auth] Session refreshed successfully");
         setSession(data.session);
       }
     } catch (err) {
-      console.error('[Auth] Unexpected error during session refresh:', err);
+      console.error("[Auth] Unexpected error during session refresh:", err);
       setError(err as AuthError);
     } finally {
-      console.debug('[Auth] refreshSession: done', { hasSession: !!session });
+      console.debug("[Auth] refreshSession: done", { hasSession: !!session });
       setLoading(false);
     }
   }, []);
@@ -82,20 +82,19 @@ export function AuthProvider({ children }: { children: ReactNode }) {
   const signOut = useCallback(async () => {
     try {
       setError(null);
-      console.debug('[Auth] Signing out...');
+      console.debug("[Auth] Signing out...");
 
       const { error } = await springAuth.signOut();
 
       if (error) {
-        console.error('[Auth] Sign out error:', error);
+        console.error("[Auth] Sign out error:", error);
         setError(error);
       } else {
-        console.debug('[Auth] Signed out successfully');
+        console.debug("[Auth] Signed out successfully");
         setSession(null);
       }
-
     } catch (err) {
-      console.error('[Auth] Unexpected error during sign out:', err);
+      console.error("[Auth] Unexpected error during sign out:", err);
       setError(err as AuthError);
     }
   }, []);
@@ -113,7 +112,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
         console.debug(`[Auth:${mountId}] Initializing auth...`);
         console.debug(`[Auth:${mountId}] Path: ${window.location.pathname} Search: ${window.location.search}`);
         // Clear any platform-specific cached auth on login page init.
-        if (typeof window !== 'undefined' && window.location.pathname.startsWith('/login')) {
+        if (typeof window !== "undefined" && window.location.pathname.startsWith("/login")) {
           await clearPlatformAuthOnLoginInit();
         }
 
@@ -124,10 +123,10 @@ export function AuthProvider({ children }: { children: ReactNode }) {
         if (!mounted) return;
 
         if (error) {
-          console.error('[Auth] Initial session error:', error);
+          console.error("[Auth] Initial session error:", error);
           setError(error);
         } else {
-          console.debug('[Auth] Initial session loaded:', {
+          console.debug("[Auth] Initial session loaded:", {
             hasSession: !!data.session,
             userId: data.session?.user?.id,
             email: data.session?.user?.email,
@@ -135,7 +134,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
           setSession(data.session);
         }
       } catch (err) {
-        console.error('[Auth] Unexpected error during auth initialization:', err);
+        console.error("[Auth] Unexpected error during auth initialization:", err);
         if (mounted) {
           setError(err as AuthError);
         }
@@ -161,50 +160,50 @@ export function AuthProvider({ children }: { children: ReactNode }) {
       void initializeAuth();
     };
 
-    window.addEventListener('jwt-available', handleJwtAvailable);
+    window.addEventListener("jwt-available", handleJwtAvailable);
 
     // Subscribe to auth state changes
-    const { data: { subscription } } = springAuth.onAuthStateChange(
-      async (event: AuthChangeEvent, newSession: Session | null) => {
-        if (!mounted) {
-          console.log(`[Auth:${mountId}] ⚠️  Auth state change ignored (unmounted): ${event}`);
-          return;
-        }
-
-        console.log(`[Auth:${mountId}] ════════════════════════════════════`);
-        console.log(`[Auth:${mountId}] 📢 Auth state change event: ${event}`);
-        console.log(`[Auth:${mountId}] Has session: ${!!newSession}`);
-        console.log(`[Auth:${mountId}] User: ${newSession?.user?.email || 'none'}`);
-        console.log(`[Auth:${mountId}] Timestamp: ${new Date().toISOString()}`);
-
-        // Schedule state update
-        setTimeout(() => {
-          if (mounted) {
-            console.log(`[Auth:${mountId}] Applying session update (event: ${event})`);
-            setSession(newSession);
-            setError(null);
-
-            // Handle specific events
-            if (event === 'SIGNED_OUT') {
-              console.log(`[Auth:${mountId}] ✓ User signed out, session cleared`);
-            } else if (event === 'SIGNED_IN') {
-              console.log(`[Auth:${mountId}] ✓ User signed in successfully`);
-            } else if (event === 'TOKEN_REFRESHED') {
-              console.log(`[Auth:${mountId}] ✓ Token refreshed`);
-            } else if (event === 'USER_UPDATED') {
-              console.log(`[Auth:${mountId}] ✓ User updated`);
-            }
-          } else {
-            console.log(`[Auth:${mountId}] ⚠️  Session update skipped (unmounted during timeout)`);
-          }
-        }, 0);
+    const {
+      data: { subscription },
+    } = springAuth.onAuthStateChange(async (event: AuthChangeEvent, newSession: Session | null) => {
+      if (!mounted) {
+        console.log(`[Auth:${mountId}] ⚠️  Auth state change ignored (unmounted): ${event}`);
+        return;
       }
-    );
+
+      console.log(`[Auth:${mountId}] ════════════════════════════════════`);
+      console.log(`[Auth:${mountId}] 📢 Auth state change event: ${event}`);
+      console.log(`[Auth:${mountId}] Has session: ${!!newSession}`);
+      console.log(`[Auth:${mountId}] User: ${newSession?.user?.email || "none"}`);
+      console.log(`[Auth:${mountId}] Timestamp: ${new Date().toISOString()}`);
+
+      // Schedule state update
+      setTimeout(() => {
+        if (mounted) {
+          console.log(`[Auth:${mountId}] Applying session update (event: ${event})`);
+          setSession(newSession);
+          setError(null);
+
+          // Handle specific events
+          if (event === "SIGNED_OUT") {
+            console.log(`[Auth:${mountId}] ✓ User signed out, session cleared`);
+          } else if (event === "SIGNED_IN") {
+            console.log(`[Auth:${mountId}] ✓ User signed in successfully`);
+          } else if (event === "TOKEN_REFRESHED") {
+            console.log(`[Auth:${mountId}] ✓ Token refreshed`);
+          } else if (event === "USER_UPDATED") {
+            console.log(`[Auth:${mountId}] ✓ User updated`);
+          }
+        } else {
+          console.log(`[Auth:${mountId}] ⚠️  Session update skipped (unmounted during timeout)`);
+        }
+      }, 0);
+    });
 
     return () => {
       console.log(`[Auth:${mountId}] 🔴 AuthProvider unmounting`);
       mounted = false;
-      window.removeEventListener('jwt-available', handleJwtAvailable);
+      window.removeEventListener("jwt-available", handleJwtAvailable);
       subscription.unsubscribe();
     };
   }, []);
@@ -218,11 +217,7 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     refreshSession,
   };
 
-  return (
-    <AuthContext.Provider value={value}>
-      {children}
-    </AuthContext.Provider>
-  );
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
 }
 
 /**
@@ -233,7 +228,7 @@ export function useAuth() {
   const context = useContext(AuthContext);
 
   if (context === undefined) {
-    throw new Error('useAuth must be used within an AuthProvider');
+    throw new Error("useAuth must be used within an AuthProvider");
   }
 
   return context;
@@ -247,7 +242,7 @@ export function useAuthDebug() {
   const auth = useAuth();
 
   useEffect(() => {
-    console.debug('[Auth Debug] Current auth state:', {
+    console.debug("[Auth Debug] Current auth state:", {
       hasSession: !!auth.session,
       hasUser: !!auth.user,
       loading: auth.loading,
diff --git a/frontend/src/proprietary/auth/oauthStorage.ts b/frontend/src/proprietary/auth/oauthStorage.ts
index 17597d5e1a..48e12c34ed 100644
--- a/frontend/src/proprietary/auth/oauthStorage.ts
+++ b/frontend/src/proprietary/auth/oauthStorage.ts
@@ -2,7 +2,7 @@
  * Helper utilities for clearing cached OAuth redirect/session state
  */
 
-const OAUTH_REDIRECT_COOKIE = 'stirling_redirect_path';
+const OAUTH_REDIRECT_COOKIE = "stirling_redirect_path";
 
 /**
  * Clear any persisted OAuth redirect path/cached state so the app
@@ -11,21 +11,21 @@ const OAUTH_REDIRECT_COOKIE = 'stirling_redirect_path';
 export function resetOAuthState(): void {
   try {
     // Remove redirect cookie
-    if (typeof document !== 'undefined') {
+    if (typeof document !== "undefined") {
       document.cookie = `${OAUTH_REDIRECT_COOKIE}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/;SameSite=Lax`;
     }
   } catch (err) {
-    console.warn('[OAuthStorage] Failed to clear redirect cookie', err);
+    console.warn("[OAuthStorage] Failed to clear redirect cookie", err);
   }
 
   // Remove any related localStorage entries we might have used
   try {
-    if (typeof window !== 'undefined' && window.localStorage) {
+    if (typeof window !== "undefined" && window.localStorage) {
       window.localStorage.removeItem(OAUTH_REDIRECT_COOKIE);
-      window.localStorage.removeItem('oauth_redirect_path');
+      window.localStorage.removeItem("oauth_redirect_path");
     }
   } catch (err) {
-    console.warn('[OAuthStorage] Failed to clear OAuth localStorage', err);
+    console.warn("[OAuthStorage] Failed to clear OAuth localStorage", err);
   }
 }
 
diff --git a/frontend/src/proprietary/auth/oauthTypes.ts b/frontend/src/proprietary/auth/oauthTypes.ts
index 2d38f1b3e5..22f5c6a23b 100644
--- a/frontend/src/proprietary/auth/oauthTypes.ts
+++ b/frontend/src/proprietary/auth/oauthTypes.ts
@@ -3,17 +3,17 @@
  * Custom providers are also supported - the backend determines availability.
  */
 export const KNOWN_OAUTH_PROVIDERS = [
-  'github',
-  'google',
-  'apple',
-  'azure',
-  'keycloak',
-  'cloudron',
-  'authentik',
-  'oidc',
+  "github",
+  "google",
+  "apple",
+  "azure",
+  "keycloak",
+  "cloudron",
+  "authentik",
+  "oidc",
 ] as const;
 
-export type KnownOAuthProvider = typeof KNOWN_OAUTH_PROVIDERS[number];
+export type KnownOAuthProvider = (typeof KNOWN_OAUTH_PROVIDERS)[number];
 
 /**
  * OAuth provider ID - can be any known provider or custom string.
diff --git a/frontend/src/proprietary/auth/springAuthClient.test.ts b/frontend/src/proprietary/auth/springAuthClient.test.ts
index 40d7ef9da5..33a7342cac 100644
--- a/frontend/src/proprietary/auth/springAuthClient.test.ts
+++ b/frontend/src/proprietary/auth/springAuthClient.test.ts
@@ -1,16 +1,16 @@
-import { describe, it, expect, beforeEach, vi, afterEach } from 'vitest';
-import { springAuth } from '@app/auth/springAuthClient';
-import { startOAuthNavigation } from '@app/extensions/oauthNavigation';
-import apiClient from '@app/services/apiClient';
-import { AxiosError, type AxiosResponse, type InternalAxiosRequestConfig } from 'axios';
+import { describe, it, expect, beforeEach, vi, afterEach } from "vitest";
+import { springAuth } from "@app/auth/springAuthClient";
+import { startOAuthNavigation } from "@app/extensions/oauthNavigation";
+import apiClient from "@app/services/apiClient";
+import { AxiosError, type AxiosResponse, type InternalAxiosRequestConfig } from "axios";
 
 // Mock apiClient
-vi.mock('@app/services/apiClient');
-vi.mock('@app/extensions/oauthNavigation', () => ({
+vi.mock("@app/services/apiClient");
+vi.mock("@app/extensions/oauthNavigation", () => ({
   startOAuthNavigation: vi.fn().mockResolvedValue(false),
 }));
 
-describe('SpringAuthClient', () => {
+describe("SpringAuthClient", () => {
   beforeEach(() => {
     // Clear localStorage before each test
     localStorage.clear();
@@ -22,8 +22,8 @@ describe('SpringAuthClient', () => {
     vi.restoreAllMocks();
   });
 
-  describe('getSession', () => {
-    it('should return null session when no JWT in localStorage', async () => {
+  describe("getSession", () => {
+    it("should return null session when no JWT in localStorage", async () => {
       const result = await springAuth.getSession();
 
       expect(result.data.session).toBeNull();
@@ -31,16 +31,16 @@ describe('SpringAuthClient', () => {
       expect(apiClient.get).not.toHaveBeenCalled();
     });
 
-    it('should validate JWT and return session when JWT exists', async () => {
-      const mockToken = 'mock-jwt-token';
+    it("should validate JWT and return session when JWT exists", async () => {
+      const mockToken = "mock-jwt-token";
       const mockUser = {
-        id: '123',
-        email: 'test@example.com',
-        username: 'testuser',
-        role: 'USER',
+        id: "123",
+        email: "test@example.com",
+        username: "testuser",
+        role: "USER",
       };
 
-      localStorage.setItem('stirling_jwt', mockToken);
+      localStorage.setItem("stirling_jwt", mockToken);
 
       vi.mocked(apiClient.get).mockResolvedValueOnce({
         status: 200,
@@ -49,7 +49,7 @@ describe('SpringAuthClient', () => {
 
       const result = await springAuth.getSession();
 
-      expect(apiClient.get).toHaveBeenCalledWith('/api/v1/auth/me', {
+      expect(apiClient.get).toHaveBeenCalledWith("/api/v1/auth/me", {
         headers: { Authorization: `Bearer ${mockToken}` },
         suppressErrorToast: true,
         skipAuthRedirect: true,
@@ -60,76 +60,64 @@ describe('SpringAuthClient', () => {
       expect(result.error).toBeNull();
     });
 
-    it('should clear invalid JWT on 401 error', async () => {
-      const mockToken = 'invalid-jwt-token';
-      localStorage.setItem('stirling_jwt', mockToken);
+    it("should clear invalid JWT on 401 error", async () => {
+      const mockToken = "invalid-jwt-token";
+      localStorage.setItem("stirling_jwt", mockToken);
 
-      const mockError = new AxiosError(
-        'Unauthorized',
-        'ERR_BAD_REQUEST',
-        undefined,
-        undefined,
-        {
-          status: 401,
-          statusText: 'Unauthorized',
-          data: {},
-          headers: {},
-          config: {} as InternalAxiosRequestConfig,
-        }
-      );
+      const mockError = new AxiosError("Unauthorized", "ERR_BAD_REQUEST", undefined, undefined, {
+        status: 401,
+        statusText: "Unauthorized",
+        data: {},
+        headers: {},
+        config: {} as InternalAxiosRequestConfig,
+      });
 
       vi.mocked(apiClient.get).mockRejectedValueOnce(mockError);
 
       const result = await springAuth.getSession();
 
-      expect(localStorage.getItem('stirling_jwt')).toBeNull();
+      expect(localStorage.getItem("stirling_jwt")).toBeNull();
       expect(result.data.session).toBeNull();
       // 401 is handled gracefully, so error should be null
       expect(result.error).toBeNull();
     });
 
-    it('should clear invalid JWT on 403 error', async () => {
-      const mockToken = 'forbidden-jwt-token';
-      localStorage.setItem('stirling_jwt', mockToken);
+    it("should clear invalid JWT on 403 error", async () => {
+      const mockToken = "forbidden-jwt-token";
+      localStorage.setItem("stirling_jwt", mockToken);
 
-      const mockError = new AxiosError(
-        'Forbidden',
-        'ERR_BAD_REQUEST',
-        undefined,
-        undefined,
-        {
-          status: 403,
-          statusText: 'Forbidden',
-          data: {},
-          headers: {},
-          config: {} as InternalAxiosRequestConfig,
-        }
-      );
+      const mockError = new AxiosError("Forbidden", "ERR_BAD_REQUEST", undefined, undefined, {
+        status: 403,
+        statusText: "Forbidden",
+        data: {},
+        headers: {},
+        config: {} as InternalAxiosRequestConfig,
+      });
 
       vi.mocked(apiClient.get).mockRejectedValueOnce(mockError);
 
       const result = await springAuth.getSession();
 
-      expect(localStorage.getItem('stirling_jwt')).toBeNull();
+      expect(localStorage.getItem("stirling_jwt")).toBeNull();
       expect(result.data.session).toBeNull();
       // 403 is handled gracefully, so error should be null
       expect(result.error).toBeNull();
     });
   });
 
-  describe('signInWithPassword', () => {
-    it('should successfully sign in with email and password', async () => {
+  describe("signInWithPassword", () => {
+    it("should successfully sign in with email and password", async () => {
       const credentials = {
-        email: 'test@example.com',
-        password: 'password123',
+        email: "test@example.com",
+        password: "password123",
       };
 
-      const mockToken = 'new-jwt-token';
+      const mockToken = "new-jwt-token";
       const mockUser = {
-        id: '123',
+        id: "123",
         email: credentials.email,
         username: credentials.email,
-        role: 'USER',
+        role: "USER",
       };
 
       vi.mocked(apiClient.post).mockResolvedValueOnce({
@@ -144,34 +132,32 @@ describe('SpringAuthClient', () => {
       } as unknown as AxiosResponse);
 
       // Spy on window.dispatchEvent
-      const dispatchEventSpy = vi.spyOn(window, 'dispatchEvent');
+      const dispatchEventSpy = vi.spyOn(window, "dispatchEvent");
 
       const result = await springAuth.signInWithPassword(credentials);
 
       expect(apiClient.post).toHaveBeenCalledWith(
-        '/api/v1/auth/login',
+        "/api/v1/auth/login",
         {
           username: credentials.email,
           password: credentials.password,
         },
-        { withCredentials: true }
-      );
-      expect(localStorage.getItem('stirling_jwt')).toBe(mockToken);
-      expect(dispatchEventSpy).toHaveBeenCalledWith(
-        expect.objectContaining({ type: 'jwt-available' })
+        { withCredentials: true },
       );
+      expect(localStorage.getItem("stirling_jwt")).toBe(mockToken);
+      expect(dispatchEventSpy).toHaveBeenCalledWith(expect.objectContaining({ type: "jwt-available" }));
       expect(result.user).toEqual(mockUser);
       expect(result.session?.access_token).toBe(mockToken);
       expect(result.error).toBeNull();
     });
 
-    it('should return error on failed login', async () => {
+    it("should return error on failed login", async () => {
       const credentials = {
-        email: 'wrong@example.com',
-        password: 'wrongpassword',
+        email: "wrong@example.com",
+        password: "wrongpassword",
       };
 
-      const errorMessage = 'Invalid credentials';
+      const errorMessage = "Invalid credentials";
       const mockError = Object.assign(new Error(errorMessage), {
         isAxiosError: true,
         response: {
@@ -191,18 +177,18 @@ describe('SpringAuthClient', () => {
     });
   });
 
-  describe('signUp', () => {
-    it('should successfully register new user', async () => {
+  describe("signUp", () => {
+    it("should successfully register new user", async () => {
       const credentials = {
-        email: 'newuser@example.com',
-        password: 'newpassword123',
+        email: "newuser@example.com",
+        password: "newpassword123",
       };
 
       const mockUser = {
-        id: '456',
+        id: "456",
         email: credentials.email,
         username: credentials.email,
-        role: 'USER',
+        role: "USER",
       };
 
       vi.mocked(apiClient.post).mockResolvedValueOnce({
@@ -213,25 +199,25 @@ describe('SpringAuthClient', () => {
       const result = await springAuth.signUp(credentials);
 
       expect(apiClient.post).toHaveBeenCalledWith(
-        '/api/v1/user/register',
+        "/api/v1/user/register",
         {
           username: credentials.email,
           password: credentials.password,
         },
-        { withCredentials: true }
+        { withCredentials: true },
       );
       expect(result.user).toEqual(mockUser);
       expect(result.session).toBeNull(); // No auto-login on signup
       expect(result.error).toBeNull();
     });
 
-    it('should return error on failed registration', async () => {
+    it("should return error on failed registration", async () => {
       const credentials = {
-        email: 'existing@example.com',
-        password: 'password123',
+        email: "existing@example.com",
+        password: "password123",
       };
 
-      const errorMessage = 'User already exists';
+      const errorMessage = "User already exists";
       const mockError = Object.assign(new Error(errorMessage), {
         isAxiosError: true,
         response: {
@@ -251,10 +237,10 @@ describe('SpringAuthClient', () => {
     });
   });
 
-  describe('signOut', () => {
-    it('should successfully sign out and clear JWT', async () => {
-      const mockToken = 'jwt-to-clear';
-      localStorage.setItem('stirling_jwt', mockToken);
+  describe("signOut", () => {
+    it("should successfully sign out and clear JWT", async () => {
+      const mockToken = "jwt-to-clear";
+      localStorage.setItem("stirling_jwt", mockToken);
 
       vi.mocked(apiClient.post).mockResolvedValueOnce({
         status: 200,
@@ -264,39 +250,39 @@ describe('SpringAuthClient', () => {
       const result = await springAuth.signOut();
 
       expect(apiClient.post).toHaveBeenCalledWith(
-        '/api/v1/auth/logout',
+        "/api/v1/auth/logout",
         null,
-        expect.objectContaining({ withCredentials: true })
+        expect.objectContaining({ withCredentials: true }),
       );
-      expect(localStorage.getItem('stirling_jwt')).toBeNull();
+      expect(localStorage.getItem("stirling_jwt")).toBeNull();
       expect(result.error).toBeNull();
     });
 
-    it('should clear JWT even if logout request fails', async () => {
-      const mockToken = 'jwt-to-clear';
-      localStorage.setItem('stirling_jwt', mockToken);
+    it("should clear JWT even if logout request fails", async () => {
+      const mockToken = "jwt-to-clear";
+      localStorage.setItem("stirling_jwt", mockToken);
 
       vi.mocked(apiClient.post).mockRejectedValueOnce({
         isAxiosError: true,
         response: { status: 500 },
-        message: 'Server error',
+        message: "Server error",
       });
 
       const result = await springAuth.signOut();
 
-      expect(localStorage.getItem('stirling_jwt')).toBeNull();
+      expect(localStorage.getItem("stirling_jwt")).toBeNull();
       expect(result.error).toBeTruthy();
     });
   });
 
-  describe('refreshSession', () => {
-    it('should refresh JWT token successfully', async () => {
-      const newToken = 'refreshed-jwt-token';
+  describe("refreshSession", () => {
+    it("should refresh JWT token successfully", async () => {
+      const newToken = "refreshed-jwt-token";
       const mockUser = {
-        id: '123',
-        email: 'test@example.com',
-        username: 'testuser',
-        role: 'USER',
+        id: "123",
+        email: "test@example.com",
+        username: "testuser",
+        role: "USER",
       };
 
       vi.mocked(apiClient.post).mockResolvedValueOnce({
@@ -312,33 +298,33 @@ describe('SpringAuthClient', () => {
 
       const result = await springAuth.refreshSession();
 
-      expect(localStorage.getItem('stirling_jwt')).toBe(newToken);
+      expect(localStorage.getItem("stirling_jwt")).toBe(newToken);
       // Note: refreshSession does not dispatch jwt-available event, only notifies listeners
       expect(result.data.session?.access_token).toBe(newToken);
       expect(result.error).toBeNull();
     });
 
-    it('should clear JWT and return error on 401', async () => {
-      localStorage.setItem('stirling_jwt', 'expired-token');
+    it("should clear JWT and return error on 401", async () => {
+      localStorage.setItem("stirling_jwt", "expired-token");
 
       vi.mocked(apiClient.post).mockRejectedValueOnce({
         isAxiosError: true,
         response: { status: 401 },
-        message: 'Token expired',
+        message: "Token expired",
       });
 
       const result = await springAuth.refreshSession();
 
-      expect(localStorage.getItem('stirling_jwt')).toBeNull();
+      expect(localStorage.getItem("stirling_jwt")).toBeNull();
       expect(result.data.session).toBeNull();
       expect(result.error).toBeTruthy();
     });
   });
 
-  describe('signInWithOAuth', () => {
-    it('should redirect to OAuth provider', async () => {
+  describe("signInWithOAuth", () => {
+    it("should redirect to OAuth provider", async () => {
       const mockAssign = vi.fn();
-      Object.defineProperty(window, 'location', {
+      Object.defineProperty(window, "location", {
         value: { assign: mockAssign },
         writable: true,
       });
@@ -346,18 +332,18 @@ describe('SpringAuthClient', () => {
       vi.mocked(startOAuthNavigation).mockResolvedValueOnce(false);
 
       const result = await springAuth.signInWithOAuth({
-        provider: '/oauth2/authorization/github',
-        options: { redirectTo: '/auth/callback' },
+        provider: "/oauth2/authorization/github",
+        options: { redirectTo: "/auth/callback" },
       });
 
-      expect(startOAuthNavigation).toHaveBeenCalledWith('/oauth2/authorization/github');
-      expect(mockAssign).toHaveBeenCalledWith('/oauth2/authorization/github');
+      expect(startOAuthNavigation).toHaveBeenCalledWith("/oauth2/authorization/github");
+      expect(mockAssign).toHaveBeenCalledWith("/oauth2/authorization/github");
       expect(result.error).toBeNull();
     });
 
-    it('should skip redirect when handled by extension', async () => {
+    it("should skip redirect when handled by extension", async () => {
       const mockAssign = vi.fn();
-      Object.defineProperty(window, 'location', {
+      Object.defineProperty(window, "location", {
         value: { assign: mockAssign },
         writable: true,
       });
@@ -365,11 +351,11 @@ describe('SpringAuthClient', () => {
       vi.mocked(startOAuthNavigation).mockResolvedValueOnce(true);
 
       const result = await springAuth.signInWithOAuth({
-        provider: '/oauth2/authorization/github',
-        options: { redirectTo: '/auth/callback' },
+        provider: "/oauth2/authorization/github",
+        options: { redirectTo: "/auth/callback" },
       });
 
-      expect(startOAuthNavigation).toHaveBeenCalledWith('/oauth2/authorization/github');
+      expect(startOAuthNavigation).toHaveBeenCalledWith("/oauth2/authorization/github");
       expect(mockAssign).not.toHaveBeenCalled();
       expect(result.error).toBeNull();
     });
diff --git a/frontend/src/proprietary/auth/springAuthClient.ts b/frontend/src/proprietary/auth/springAuthClient.ts
index b97191beee..aa0054a424 100644
--- a/frontend/src/proprietary/auth/springAuthClient.ts
+++ b/frontend/src/proprietary/auth/springAuthClient.ts
@@ -7,28 +7,28 @@
  * - No email confirmation flow (auto-confirmed on registration)
  */
 
-import apiClient from '@app/services/apiClient';
-import { AxiosError } from 'axios';
-import { BASE_PATH } from '@app/constants/app';
-import { type OAuthProvider } from '@app/auth/oauthTypes';
-import { resetOAuthState } from '@app/auth/oauthStorage';
-import { clearPlatformAuthAfterSignOut } from '@app/extensions/authSessionCleanup';
+import apiClient from "@app/services/apiClient";
+import { AxiosError } from "axios";
+import { BASE_PATH } from "@app/constants/app";
+import { type OAuthProvider } from "@app/auth/oauthTypes";
+import { resetOAuthState } from "@app/auth/oauthStorage";
+import { clearPlatformAuthAfterSignOut } from "@app/extensions/authSessionCleanup";
 import {
   getPlatformSessionUser,
   isDesktopSaaSAuthMode,
   refreshPlatformSession,
   savePlatformToken,
-} from '@app/extensions/platformSessionBridge';
-import { startOAuthNavigation } from '@app/extensions/oauthNavigation';
+} from "@app/extensions/platformSessionBridge";
+import { startOAuthNavigation } from "@app/extensions/oauthNavigation";
 
 function getHttpStatus(error: unknown): number | undefined {
   if (error instanceof AxiosError) {
     return error.response?.status;
   }
 
-  if (error && typeof error === 'object' && 'response' in error) {
+  if (error && typeof error === "object" && "response" in error) {
     const response = (error as { response?: { status?: unknown } }).response;
-    if (response && typeof response.status === 'number') {
+    if (response && typeof response.status === "number") {
       return response.status;
     }
   }
@@ -44,26 +44,26 @@ function getErrorMessage(error: unknown, fallback: string): string {
   return error instanceof Error ? error.message : fallback;
 }
 
-const OAUTH_REDIRECT_COOKIE = 'stirling_redirect_path';
+const OAUTH_REDIRECT_COOKIE = "stirling_redirect_path";
 const OAUTH_REDIRECT_COOKIE_MAX_AGE = 60 * 5; // 5 minutes
-const DEFAULT_REDIRECT_PATH = `${BASE_PATH || ''}/auth/callback`;
+const DEFAULT_REDIRECT_PATH = `${BASE_PATH || ""}/auth/callback`;
 
 function normalizeRedirectPath(target?: string): string {
-  if (!target || typeof target !== 'string') {
+  if (!target || typeof target !== "string") {
     return DEFAULT_REDIRECT_PATH;
   }
 
   try {
     const parsed = new URL(target, window.location.origin);
-    const path = parsed.pathname || '/';
-    const query = parsed.search || '';
+    const path = parsed.pathname || "/";
+    const query = parsed.search || "";
     return `${path}${query}`;
   } catch {
     const trimmed = target.trim();
     if (!trimmed) {
       return DEFAULT_REDIRECT_PATH;
     }
-    return trimmed.startsWith('/') ? trimmed : `/${trimmed}`;
+    return trimmed.startsWith("/") ? trimmed : `/${trimmed}`;
   }
 }
 
@@ -108,11 +108,7 @@ export interface AuthResponse {
   error: AuthError | null;
 }
 
-export type AuthChangeEvent =
-  | 'SIGNED_IN'
-  | 'SIGNED_OUT'
-  | 'TOKEN_REFRESHED'
-  | 'USER_UPDATED';
+export type AuthChangeEvent = "SIGNED_IN" | "SIGNED_OUT" | "TOKEN_REFRESHED" | "USER_UPDATED";
 
 type AuthChangeCallback = (event: AuthChangeEvent, session: Session | null) => void;
 
@@ -142,15 +138,15 @@ class SpringAuthClient {
     try {
       const payload = this.decodeJwtPayload(token);
       if (!payload) {
-        console.warn('[SpringAuth] Cannot decode token for adaptive intervals, using defaults');
+        console.warn("[SpringAuth] Cannot decode token for adaptive intervals, using defaults");
         return;
       }
 
-      const expSeconds = typeof payload?.exp === 'number' ? payload.exp : 0;
-      const iatSeconds = typeof payload?.iat === 'number' ? payload.iat : 0;
+      const expSeconds = typeof payload?.exp === "number" ? payload.exp : 0;
+      const iatSeconds = typeof payload?.iat === "number" ? payload.iat : 0;
 
       if (expSeconds <= 0 || iatSeconds <= 0) {
-        console.warn('[SpringAuth] Token missing exp/iat claims, using default intervals');
+        console.warn("[SpringAuth] Token missing exp/iat claims, using default intervals");
         return;
       }
 
@@ -166,30 +162,30 @@ class SpringAuthClient {
       // Max: 5 minutes (don't wait too long for long-lived tokens)
       this.tokenRefreshThresholdMs = Math.max(30000, Math.min(300000, tokenLifetimeMs / 4));
 
-      console.log('[SpringAuth] 📊 Adaptive intervals calculated:', {
-        tokenLifetime: Math.floor(tokenLifetimeMs / 1000) + 's',
-        checkInterval: Math.floor(this.sessionCheckIntervalMs / 1000) + 's',
-        refreshThreshold: Math.floor(this.tokenRefreshThresholdMs / 1000) + 's',
+      console.log("[SpringAuth] 📊 Adaptive intervals calculated:", {
+        tokenLifetime: Math.floor(tokenLifetimeMs / 1000) + "s",
+        checkInterval: Math.floor(this.sessionCheckIntervalMs / 1000) + "s",
+        refreshThreshold: Math.floor(this.tokenRefreshThresholdMs / 1000) + "s",
       });
 
       // Restart monitoring with new interval
       this.restartSessionMonitoring();
     } catch (error) {
-      console.warn('[SpringAuth] Failed to calculate adaptive intervals:', error);
+      console.warn("[SpringAuth] Failed to calculate adaptive intervals:", error);
     }
   }
 
   private decodeJwtPayload(token: string): Record<string, unknown> | null {
-    const parts = token.split('.');
+    const parts = token.split(".");
     if (parts.length < 2) {
       return null;
     }
 
     const base64Url = parts[1];
     const base64 = base64Url
-      .replace(/-/g, '+')
-      .replace(/_/g, '/')
-      .padEnd(Math.ceil(base64Url.length / 4) * 4, '=');
+      .replace(/-/g, "+")
+      .replace(/_/g, "/")
+      .padEnd(Math.ceil(base64Url.length / 4) * 4, "=");
 
     return JSON.parse(atob(base64));
   }
@@ -198,10 +194,10 @@ class SpringAuthClient {
     try {
       const payload = this.decodeJwtPayload(token);
       if (!payload) {
-        throw new Error('Token payload missing');
+        throw new Error("Token payload missing");
       }
 
-      const expSeconds = typeof payload?.exp === 'number' ? payload.exp : 0;
+      const expSeconds = typeof payload?.exp === "number" ? payload.exp : 0;
       const expiresAt = expSeconds > 0 ? expSeconds * 1000 : Date.now() + 3600 * 1000;
       const expiresIn = Math.max(0, Math.floor((expiresAt - Date.now()) / 1000));
 
@@ -217,10 +213,10 @@ class SpringAuthClient {
    * Helper to get CSRF token from cookie
    */
   private getCsrfToken(): string | null {
-    const cookies = document.cookie.split(';');
+    const cookies = document.cookie.split(";");
     for (const cookie of cookies) {
-      const [name, value] = cookie.trim().split('=');
-      if (name === 'XSRF-TOKEN') {
+      const [name, value] = cookie.trim().split("=");
+      if (name === "XSRF-TOKEN") {
         return decodeURIComponent(value);
       }
     }
@@ -234,7 +230,7 @@ class SpringAuthClient {
   async getSession(): Promise<{ data: { session: Session | null }; error: AuthError | null }> {
     try {
       // Get JWT from localStorage
-      let token = localStorage.getItem('stirling_jwt');
+      let token = localStorage.getItem("stirling_jwt");
 
       if (!token) {
         // console.debug('[SpringAuth] getSession: No JWT in localStorage');
@@ -246,13 +242,13 @@ class SpringAuthClient {
         if (tokenExpiry.expiresIn <= this.DESKTOP_SAAS_REFRESH_EARLY_SECONDS) {
           const refreshed = await refreshPlatformSession();
           if (!refreshed) {
-            localStorage.removeItem('stirling_jwt');
+            localStorage.removeItem("stirling_jwt");
             return { data: { session: null }, error: null };
           }
 
-          const refreshedToken = localStorage.getItem('stirling_jwt');
+          const refreshedToken = localStorage.getItem("stirling_jwt");
           if (!refreshedToken) {
-            localStorage.removeItem('stirling_jwt');
+            localStorage.removeItem("stirling_jwt");
             return { data: { session: null }, error: null };
           }
 
@@ -261,7 +257,7 @@ class SpringAuthClient {
         }
 
         if (tokenExpiry.expiresIn <= 0) {
-          localStorage.removeItem('stirling_jwt');
+          localStorage.removeItem("stirling_jwt");
           return { data: { session: null }, error: null };
         }
 
@@ -269,10 +265,10 @@ class SpringAuthClient {
 
         const session: Session = {
           user: {
-            id: platformUser?.email || platformUser?.username || 'desktop-saas-user',
-            email: platformUser?.email || '',
-            username: platformUser?.username || platformUser?.email || 'User',
-            role: 'USER',
+            id: platformUser?.email || platformUser?.username || "desktop-saas-user",
+            email: platformUser?.email || "",
+            username: platformUser?.username || platformUser?.email || "User",
+            role: "USER",
           },
           access_token: token,
           expires_in: tokenExpiry.expiresIn,
@@ -285,9 +281,9 @@ class SpringAuthClient {
       // Verify with backend
       // Note: We pass the token explicitly here, overriding the interceptor's default
       // console.debug('[SpringAuth] getSession: Verifying JWT with /api/v1/auth/me');
-      const response = await apiClient.get('/api/v1/auth/me', {
+      const response = await apiClient.get("/api/v1/auth/me", {
         headers: {
-          'Authorization': `Bearer ${token}`,
+          Authorization: `Bearer ${token}`,
         },
         suppressErrorToast: true, // Suppress global error handler (we handle errors locally)
         // Session bootstrap should not trigger global 401 refresh/redirect loops.
@@ -310,7 +306,7 @@ class SpringAuthClient {
       // console.debug('[SpringAuth] getSession: Session retrieved successfully');
       return { data: { session }, error: null };
     } catch (error: unknown) {
-      console.error('[SpringAuth] getSession error:', error);
+      console.error("[SpringAuth] getSession error:", error);
 
       // If 401/403, token is invalid - try explicit refresh
       const status = getHttpStatus(error);
@@ -321,8 +317,8 @@ class SpringAuthClient {
         if (!refreshResult.error && refreshResult.data.session) {
           return refreshResult;
         }
-        localStorage.removeItem('stirling_jwt');
-        console.debug('[SpringAuth] getSession: Not authenticated');
+        localStorage.removeItem("stirling_jwt");
+        console.debug("[SpringAuth] getSession: Not authenticated");
         return { data: { session: null }, error: null };
       }
 
@@ -330,7 +326,7 @@ class SpringAuthClient {
       // The token is still valid, just can't verify it right now
       return {
         data: { session: null },
-        error: { message: getErrorMessage(error, 'Unknown error') },
+        error: { message: getErrorMessage(error, "Unknown error") },
       };
     }
   }
@@ -338,25 +334,25 @@ class SpringAuthClient {
   /**
    * Sign in with email and password
    */
-  async signInWithPassword(credentials: {
-    email: string;
-    password: string;
-    mfaCode?: string;
-  }): Promise<AuthResponse> {
+  async signInWithPassword(credentials: { email: string; password: string; mfaCode?: string }): Promise<AuthResponse> {
     try {
-      const response = await apiClient.post('/api/v1/auth/login', {
-        username: credentials.email,
-        password: credentials.password,
-        mfaCode: credentials.mfaCode,
-      }, {
-        withCredentials: true, // Include cookies for CSRF
-      });
+      const response = await apiClient.post(
+        "/api/v1/auth/login",
+        {
+          username: credentials.email,
+          password: credentials.password,
+          mfaCode: credentials.mfaCode,
+        },
+        {
+          withCredentials: true, // Include cookies for CSRF
+        },
+      );
 
       const data = response.data;
       const token = data.session.access_token;
 
       // Store JWT in localStorage
-      localStorage.setItem('stirling_jwt', token);
+      localStorage.setItem("stirling_jwt", token);
       // console.log('[SpringAuth] JWT stored in localStorage');
 
       // Sync token to platform-specific storage (Tauri store for desktop)
@@ -366,7 +362,7 @@ class SpringAuthClient {
       this.calculateAdaptiveIntervals(token);
 
       // Dispatch custom event for other components to react to JWT availability
-      window.dispatchEvent(new CustomEvent('jwt-available'));
+      window.dispatchEvent(new CustomEvent("jwt-available"));
 
       const session: Session = {
         user: data.user,
@@ -376,18 +372,14 @@ class SpringAuthClient {
       };
 
       // Notify listeners
-      this.notifyListeners('SIGNED_IN', session);
+      this.notifyListeners("SIGNED_IN", session);
 
       return { user: data.user, session, error: null };
     } catch (error: unknown) {
-      console.error('[SpringAuth] signInWithPassword error:', error);
+      console.error("[SpringAuth] signInWithPassword error:", error);
       if (error instanceof AxiosError) {
         const errorCode = error.response?.data?.error as string | undefined;
-        const errorMessage =
-          error.response?.data?.message ||
-          error.response?.data?.error ||
-          error.message ||
-          'Login failed';
+        const errorMessage = error.response?.data?.message || error.response?.data?.error || error.message || "Login failed";
         return {
           user: null,
           session: null,
@@ -395,14 +387,14 @@ class SpringAuthClient {
             message: errorMessage,
             status: error.response?.status,
             code: errorCode,
-            mfaRequired: errorCode === 'mfa_required',
+            mfaRequired: errorCode === "mfa_required",
           },
         };
       }
       return {
         user: null,
         session: null,
-        error: { message: getErrorMessage(error, 'Login failed') },
+        error: { message: getErrorMessage(error, "Login failed") },
       };
     }
   }
@@ -416,12 +408,16 @@ class SpringAuthClient {
     options?: { data?: { full_name?: string }; emailRedirectTo?: string };
   }): Promise<AuthResponse> {
     try {
-      const response = await apiClient.post('/api/v1/user/register', {
-        username: credentials.email,
-        password: credentials.password,
-      }, {
-        withCredentials: true,
-      });
+      const response = await apiClient.post(
+        "/api/v1/user/register",
+        {
+          username: credentials.email,
+          password: credentials.password,
+        },
+        {
+          withCredentials: true,
+        },
+      );
 
       const data = response.data;
 
@@ -429,11 +425,11 @@ class SpringAuthClient {
       // Return user but no session (user needs to login)
       return { user: data.user, session: null, error: null };
     } catch (error: unknown) {
-      console.error('[SpringAuth] signUp error:', error);
+      console.error("[SpringAuth] signUp error:", error);
       return {
         user: null,
         session: null,
-        error: { message: getErrorMessage(error, 'Registration failed') },
+        error: { message: getErrorMessage(error, "Registration failed") },
       };
     }
   }
@@ -466,7 +462,7 @@ class SpringAuthClient {
       return { error: null };
     } catch (error) {
       return {
-        error: { message: error instanceof Error ? error.message : 'SSO redirect failed' },
+        error: { message: error instanceof Error ? error.message : "SSO redirect failed" },
       };
     }
   }
@@ -476,12 +472,12 @@ class SpringAuthClient {
    */
   async signOut(): Promise<{ error: AuthError | null }> {
     try {
-      if (typeof window !== 'undefined') {
-        window.sessionStorage.setItem('stirling_sso_auto_login_logged_out', '1');
+      if (typeof window !== "undefined") {
+        window.sessionStorage.setItem("stirling_sso_auto_login_logged_out", "1");
       }
-      const response = await apiClient.post('/api/v1/auth/logout', null, {
+      const response = await apiClient.post("/api/v1/auth/logout", null, {
         headers: {
-          'X-XSRF-TOKEN': this.getCsrfToken() || '',
+          "X-XSRF-TOKEN": this.getCsrfToken() || "",
         },
         withCredentials: true,
       });
@@ -491,52 +487,52 @@ class SpringAuthClient {
       }
 
       // Clean up local storage
-      localStorage.removeItem('stirling_jwt');
+      localStorage.removeItem("stirling_jwt");
       try {
         Object.keys(localStorage)
-          .filter((key) => key.startsWith('sb-') || key.includes('supabase'))
+          .filter((key) => key.startsWith("sb-") || key.includes("supabase"))
           .forEach((key) => localStorage.removeItem(key));
 
         // Clear any cached OAuth redirect/session state
         resetOAuthState();
       } catch (err) {
-        console.warn('[SpringAuth] Failed to clear Supabase/local auth tokens', err);
+        console.warn("[SpringAuth] Failed to clear Supabase/local auth tokens", err);
       }
 
       // Clear cookies that might hold refresh/session tokens
       try {
-        document.cookie.split(';').forEach(cookie => {
-          const eqPos = cookie.indexOf('=');
+        document.cookie.split(";").forEach((cookie) => {
+          const eqPos = cookie.indexOf("=");
           const name = eqPos > -1 ? cookie.substr(0, eqPos).trim() : cookie.trim();
           if (name) {
             document.cookie = `${name}=;expires=Thu, 01 Jan 1970 00:00:00 GMT;path=/;`;
           }
         });
       } catch (err) {
-        console.warn('[SpringAuth] Failed to clear cookies on sign out', err);
+        console.warn("[SpringAuth] Failed to clear cookies on sign out", err);
       }
 
       try {
         await clearPlatformAuthAfterSignOut();
       } catch (cleanupError) {
-        console.warn('[SpringAuth] Failed to run platform auth cleanup', cleanupError);
+        console.warn("[SpringAuth] Failed to run platform auth cleanup", cleanupError);
       }
 
       // Notify listeners
-      this.notifyListeners('SIGNED_OUT', null);
+      this.notifyListeners("SIGNED_OUT", null);
 
       return { error: null };
     } catch (error: unknown) {
-      console.error('[SpringAuth] signOut error:', error);
+      console.error("[SpringAuth] signOut error:", error);
       // Still remove token even if backend call fails
-      localStorage.removeItem('stirling_jwt');
+      localStorage.removeItem("stirling_jwt");
       try {
         await clearPlatformAuthAfterSignOut();
       } catch (cleanupError) {
-        console.warn('[SpringAuth] Failed to run platform auth cleanup after error', cleanupError);
+        console.warn("[SpringAuth] Failed to run platform auth cleanup after error", cleanupError);
       }
       return {
-        error: { message: getErrorMessage(error, 'Logout failed') },
+        error: { message: getErrorMessage(error, "Logout failed") },
       };
     }
   }
@@ -549,10 +545,10 @@ class SpringAuthClient {
       if (await isDesktopSaaSAuthMode()) {
         const refreshed = await refreshPlatformSession();
         if (!refreshed) {
-          localStorage.removeItem('stirling_jwt');
+          localStorage.removeItem("stirling_jwt");
           return {
             data: { session: null },
-            error: { message: 'Token refresh failed - please log in again' },
+            error: { message: "Token refresh failed - please log in again" },
           };
         }
 
@@ -560,23 +556,23 @@ class SpringAuthClient {
         if (error || !data.session) {
           return {
             data: { session: null },
-            error: error || { message: 'Token refresh failed - please log in again' },
+            error: error || { message: "Token refresh failed - please log in again" },
           };
         }
 
         // Calculate adaptive intervals for desktop SaaS mode
-        const token = localStorage.getItem('stirling_jwt');
+        const token = localStorage.getItem("stirling_jwt");
         if (token) {
           this.calculateAdaptiveIntervals(token);
         }
 
-        this.notifyListeners('TOKEN_REFRESHED', data.session);
+        this.notifyListeners("TOKEN_REFRESHED", data.session);
         return { data, error: null };
       }
 
-      const response = await apiClient.post('/api/v1/auth/refresh', null, {
+      const response = await apiClient.post("/api/v1/auth/refresh", null, {
         headers: {
-          'X-XSRF-TOKEN': this.getCsrfToken() || '',
+          "X-XSRF-TOKEN": this.getCsrfToken() || "",
         },
         withCredentials: true,
         suppressErrorToast: true, // Suppress global error handler (we handle errors locally)
@@ -586,7 +582,7 @@ class SpringAuthClient {
       const token = data.session.access_token;
 
       // Update local storage with new token
-      localStorage.setItem('stirling_jwt', token);
+      localStorage.setItem("stirling_jwt", token);
 
       // Sync token to platform-specific storage (Tauri store for desktop)
       await savePlatformToken(token);
@@ -602,24 +598,24 @@ class SpringAuthClient {
       };
 
       // Notify listeners
-      this.notifyListeners('TOKEN_REFRESHED', session);
+      this.notifyListeners("TOKEN_REFRESHED", session);
 
-      console.debug('[SpringAuth] Token refreshed successfully');
+      console.debug("[SpringAuth] Token refreshed successfully");
 
       return { data: { session }, error: null };
     } catch (error: unknown) {
-      console.error('[SpringAuth] refreshSession error:', error);
-      localStorage.removeItem('stirling_jwt');
+      console.error("[SpringAuth] refreshSession error:", error);
+      localStorage.removeItem("stirling_jwt");
 
       // Handle different error statuses
       const status = getHttpStatus(error);
       if (status === 401 || status === 403) {
-        return { data: { session: null }, error: { message: 'Token refresh failed - please log in again' } };
+        return { data: { session: null }, error: { message: "Token refresh failed - please log in again" } };
       }
 
       return {
         data: { session: null },
-        error: { message: getErrorMessage(error, 'Token refresh failed') },
+        error: { message: getErrorMessage(error, "Token refresh failed") },
       };
     }
   }
@@ -650,7 +646,7 @@ class SpringAuthClient {
         try {
           callback(event, session);
         } catch (error) {
-          console.error('[SpringAuth] Error in auth state change listener:', error);
+          console.error("[SpringAuth] Error in auth state change listener:", error);
         }
       });
     }, 0);
@@ -670,12 +666,14 @@ class SpringAuthClient {
 
           // Refresh if token expires soon (threshold is adaptive)
           if (timeUntilExpiry > 0 && timeUntilExpiry < this.tokenRefreshThresholdMs) {
-            console.log('[SpringAuth] 🔄 Proactively refreshing token (expires in ' + Math.floor(timeUntilExpiry / 1000) + 's)');
+            console.log(
+              "[SpringAuth] 🔄 Proactively refreshing token (expires in " + Math.floor(timeUntilExpiry / 1000) + "s)",
+            );
             await this.refreshSession();
           }
         }
       } catch (error) {
-        console.error('[SpringAuth] Session monitoring error:', error);
+        console.error("[SpringAuth] Session monitoring error:", error);
       }
     }, this.sessionCheckIntervalMs);
   }
@@ -720,14 +718,14 @@ export const isUserAnonymous = (user: User | null) => {
  */
 export const createAnonymousUser = (): User => {
   return {
-    id: 'anonymous',
-    email: 'anonymous@local',
-    username: 'Anonymous User',
-    role: 'USER',
+    id: "anonymous",
+    email: "anonymous@local",
+    username: "Anonymous User",
+    role: "USER",
     enabled: true,
     is_anonymous: true,
     app_metadata: {
-      provider: 'anonymous',
+      provider: "anonymous",
     },
   };
 };
@@ -738,7 +736,7 @@ export const createAnonymousUser = (): User => {
 export const createAnonymousSession = (): Session => {
   return {
     user: createAnonymousUser(),
-    access_token: '',
+    access_token: "",
     expires_in: Number.MAX_SAFE_INTEGER,
     expires_at: Number.MAX_SAFE_INTEGER,
   };
diff --git a/frontend/src/proprietary/components/AppProviders.tsx b/frontend/src/proprietary/components/AppProviders.tsx
index a0e9a63dc7..76f87bf925 100644
--- a/frontend/src/proprietary/components/AppProviders.tsx
+++ b/frontend/src/proprietary/components/AppProviders.tsx
@@ -8,10 +8,7 @@ import { UpdateSeatsProvider } from "@app/contexts/UpdateSeatsContext";
 
 export function AppProviders({ children, appConfigRetryOptions, appConfigProviderProps }: AppProvidersProps) {
   return (
-    <CoreAppProviders
-      appConfigRetryOptions={appConfigRetryOptions}
-      appConfigProviderProps={appConfigProviderProps}
-    >
+    <CoreAppProviders appConfigRetryOptions={appConfigRetryOptions} appConfigProviderProps={appConfigProviderProps}>
       <AuthProvider>
         <LicenseProvider>
           <UpdateSeatsProvider>
diff --git a/frontend/src/proprietary/components/shared/ChangeUserPasswordModal.tsx b/frontend/src/proprietary/components/shared/ChangeUserPasswordModal.tsx
index 27f7741a0a..661d52e54e 100644
--- a/frontend/src/proprietary/components/shared/ChangeUserPasswordModal.tsx
+++ b/frontend/src/proprietary/components/shared/ChangeUserPasswordModal.tsx
@@ -1,22 +1,11 @@
-import { useEffect, useMemo, useState } from 'react';
-import { isAxiosError } from 'axios';
-import { useTranslation } from 'react-i18next';
-import {
-  ActionIcon,
-  Button,
-  Checkbox,
-  CloseButton,
-  Group,
-  Modal,
-  PasswordInput,
-  Stack,
-  Text,
-  Tooltip,
-} from '@mantine/core';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { alert } from '@app/components/toast';
-import { ChangeUserPasswordRequest, User, userManagementService } from '@app/services/userManagementService';
-import { Z_INDEX_OVER_CONFIG_MODAL } from '@app/styles/zIndex';
+import { useEffect, useMemo, useState } from "react";
+import { isAxiosError } from "axios";
+import { useTranslation } from "react-i18next";
+import { ActionIcon, Button, Checkbox, CloseButton, Group, Modal, PasswordInput, Stack, Text, Tooltip } from "@mantine/core";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { alert } from "@app/components/toast";
+import { ChangeUserPasswordRequest, User, userManagementService } from "@app/services/userManagementService";
+import { Z_INDEX_OVER_CONFIG_MODAL } from "@app/styles/zIndex";
 
 interface ChangeUserPasswordModalProps {
   opened: boolean;
@@ -27,9 +16,9 @@ interface ChangeUserPasswordModalProps {
 }
 
 function generateSecurePassword() {
-  const charset = 'ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz0123456789@$!%*?&';
+  const charset = "ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz0123456789@$!%*?&";
   const length = 14;
-  let password = '';
+  let password = "";
   const charsetLength = charset.length;
   const uint8Array = new Uint8Array(length);
   window.crypto.getRandomValues(uint8Array);
@@ -52,11 +41,17 @@ function generateSecurePassword() {
   return password;
 }
 
-export default function ChangeUserPasswordModal({ opened, onClose, user, onSuccess, mailEnabled }: ChangeUserPasswordModalProps) {
+export default function ChangeUserPasswordModal({
+  opened,
+  onClose,
+  user,
+  onSuccess,
+  mailEnabled,
+}: ChangeUserPasswordModalProps) {
   const { t } = useTranslation();
   const [form, setForm] = useState({
-    newPassword: '',
-    confirmPassword: '',
+    newPassword: "",
+    confirmPassword: "",
     generateRandom: false,
     sendEmail: false,
     includePassword: false,
@@ -75,16 +70,19 @@ export default function ChangeUserPasswordModal({ opened, onClose, user, onSucce
     if (!form.newPassword) return;
     try {
       await navigator.clipboard.writeText(form.newPassword);
-      alert({ alertType: 'success', title: t('workspace.people.changePassword.copiedToClipboard', 'Password copied to clipboard') });
+      alert({
+        alertType: "success",
+        title: t("workspace.people.changePassword.copiedToClipboard", "Password copied to clipboard"),
+      });
     } catch (_error) {
-      alert({ alertType: 'error', title: t('workspace.people.changePassword.copyFailed', 'Failed to copy password') });
+      alert({ alertType: "error", title: t("workspace.people.changePassword.copyFailed", "Failed to copy password") });
     }
   };
 
   const resetState = () => {
     setForm({
-      newPassword: '',
-      confirmPassword: '',
+      newPassword: "",
+      confirmPassword: "",
       generateRandom: false,
       sendEmail: false,
       includePassword: false,
@@ -102,12 +100,15 @@ export default function ChangeUserPasswordModal({ opened, onClose, user, onSucce
     if (!user) return;
 
     if (!form.generateRandom && !form.newPassword.trim()) {
-      alert({ alertType: 'error', title: t('workspace.people.changePassword.passwordRequired', 'Please enter a new password') });
+      alert({
+        alertType: "error",
+        title: t("workspace.people.changePassword.passwordRequired", "Please enter a new password"),
+      });
       return;
     }
 
     if (!form.generateRandom && form.newPassword !== form.confirmPassword) {
-      alert({ alertType: 'error', title: t('workspace.people.changePassword.passwordMismatch', 'Passwords do not match') });
+      alert({ alertType: "error", title: t("workspace.people.changePassword.passwordMismatch", "Passwords do not match") });
       return;
     }
 
@@ -123,14 +124,15 @@ export default function ChangeUserPasswordModal({ opened, onClose, user, onSucce
     try {
       setProcessing(true);
       await userManagementService.changeUserPassword(payload);
-      alert({ alertType: 'success', title: t('workspace.people.changePassword.success', 'Password updated successfully') });
+      alert({ alertType: "success", title: t("workspace.people.changePassword.success", "Password updated successfully") });
       onSuccess();
       handleClose();
     } catch (error: unknown) {
       const errorMessage = isAxiosError(error)
-        ? (error.response?.data?.message || error.response?.data?.error || error.message)
-        : (error instanceof Error ? error.message : undefined) || t('workspace.people.changePassword.error', 'Failed to update password');
-      alert({ alertType: 'error', title: errorMessage });
+        ? error.response?.data?.message || error.response?.data?.error || error.message
+        : (error instanceof Error ? error.message : undefined) ||
+          t("workspace.people.changePassword.error", "Failed to update password");
+      alert({ alertType: "error", title: errorMessage });
     } finally {
       setProcessing(false);
     }
@@ -139,8 +141,8 @@ export default function ChangeUserPasswordModal({ opened, onClose, user, onSucce
   useEffect(() => {
     if (opened) {
       setForm({
-        newPassword: '',
-        confirmPassword: '',
+        newPassword: "",
+        confirmPassword: "",
         generateRandom: false,
         sendEmail: false,
         includePassword: false,
@@ -157,7 +159,10 @@ export default function ChangeUserPasswordModal({ opened, onClose, user, onSucce
   };
 
   const canEmail = mailEnabled && isValidEmail(user?.username);
-  const passwordPreview = useMemo(() => form.newPassword && form.generateRandom ? form.newPassword : '', [form.generateRandom, form.newPassword]);
+  const passwordPreview = useMemo(
+    () => (form.newPassword && form.generateRandom ? form.newPassword : ""),
+    [form.generateRandom, form.newPassword],
+  );
 
   return (
     <Modal
@@ -169,13 +174,13 @@ export default function ChangeUserPasswordModal({ opened, onClose, user, onSucce
       padding="xl"
       withCloseButton={false}
     >
-      <div style={{ position: 'relative' }}>
+      <div style={{ position: "relative" }}>
         <CloseButton
           onClick={handleClose}
           size="lg"
           disabled={processing}
           style={{
-            position: 'absolute',
+            position: "absolute",
             top: -8,
             right: -8,
             zIndex: 1,
@@ -183,35 +188,39 @@ export default function ChangeUserPasswordModal({ opened, onClose, user, onSucce
         />
         <Stack gap="lg" pt="md">
           <Stack gap="md" align="center">
-            <LocalIcon icon="lock" width="3rem" height="3rem" style={{ color: 'var(--mantine-color-gray-6)' }} />
+            <LocalIcon icon="lock" width="3rem" height="3rem" style={{ color: "var(--mantine-color-gray-6)" }} />
             <Text size="xl" fw={600} ta="center">
-              {t('workspace.people.changePassword.title', 'Change password')}
+              {t("workspace.people.changePassword.title", "Change password")}
             </Text>
             <Text size="sm" c="dimmed" ta="center">
-              {t('workspace.people.changePassword.subtitle', 'Update the password for')} <strong>{user?.username}</strong>
+              {t("workspace.people.changePassword.subtitle", "Update the password for")} <strong>{user?.username}</strong>
             </Text>
           </Stack>
 
           <Stack gap="sm">
             <PasswordInput
-              label={t('workspace.people.changePassword.newPassword', 'New password')}
-              placeholder={t('workspace.people.changePassword.placeholder', 'Enter a new password')}
+              label={t("workspace.people.changePassword.newPassword", "New password")}
+              placeholder={t("workspace.people.changePassword.placeholder", "Enter a new password")}
               value={form.newPassword}
               onChange={(event) => setForm({ ...form, newPassword: event.currentTarget.value, generateRandom: false })}
               disabled={processing || disabled || form.generateRandom}
               data-autofocus
             />
             <PasswordInput
-              label={t('workspace.people.changePassword.confirmPassword', 'Confirm password')}
-              placeholder={t('workspace.people.changePassword.confirmPlaceholder', 'Re-enter the new password')}
+              label={t("workspace.people.changePassword.confirmPassword", "Confirm password")}
+              placeholder={t("workspace.people.changePassword.confirmPlaceholder", "Re-enter the new password")}
               value={form.confirmPassword}
               onChange={(event) => setForm({ ...form, confirmPassword: event.currentTarget.value, generateRandom: false })}
               disabled={processing || disabled || form.generateRandom}
-              error={!form.generateRandom && form.confirmPassword && form.newPassword !== form.confirmPassword ? t('workspace.people.changePassword.passwordMismatch', 'Passwords do not match') : undefined}
+              error={
+                !form.generateRandom && form.confirmPassword && form.newPassword !== form.confirmPassword
+                  ? t("workspace.people.changePassword.passwordMismatch", "Passwords do not match")
+                  : undefined
+              }
             />
             <Group justify="space-between">
               <Checkbox
-                label={t('workspace.people.changePassword.generateRandom', 'Generate secure password')}
+                label={t("workspace.people.changePassword.generateRandom", "Generate secure password")}
                 checked={form.generateRandom}
                 disabled={processing || disabled}
                 onChange={(event) => {
@@ -225,16 +234,11 @@ export default function ChangeUserPasswordModal({ opened, onClose, user, onSucce
               {passwordPreview && (
                 <Group gap="xs" align="center">
                   <Text size="xs" c="dimmed">
-                    {t('workspace.people.changePassword.generatedPreview', 'Generated password:')} <strong>{passwordPreview}</strong>
+                    {t("workspace.people.changePassword.generatedPreview", "Generated password:")}{" "}
+                    <strong>{passwordPreview}</strong>
                   </Text>
-                  <Tooltip label={t('workspace.people.changePassword.copyTooltip', 'Copy to clipboard')}>
-                    <ActionIcon
-                      size="sm"
-                      variant="subtle"
-                      color="gray"
-                      onClick={handleCopyPassword}
-                      disabled={processing}
-                    >
+                  <Tooltip label={t("workspace.people.changePassword.copyTooltip", "Copy to clipboard")}>
+                    <ActionIcon size="sm" variant="subtle" color="gray" onClick={handleCopyPassword} disabled={processing}>
                       <LocalIcon icon="content-copy" width="0.9rem" height="0.9rem" />
                     </ActionIcon>
                   </Tooltip>
@@ -245,19 +249,19 @@ export default function ChangeUserPasswordModal({ opened, onClose, user, onSucce
 
           <Stack gap="xs">
             <Checkbox
-              label={t('workspace.people.changePassword.sendEmail', 'Email the user about this change')}
+              label={t("workspace.people.changePassword.sendEmail", "Email the user about this change")}
               checked={canEmail && form.sendEmail}
               onChange={(event) => setForm({ ...form, sendEmail: event.currentTarget.checked })}
               disabled={!canEmail || processing}
             />
             <Checkbox
-              label={t('workspace.people.changePassword.includePassword', 'Include the new password in the email')}
+              label={t("workspace.people.changePassword.includePassword", "Include the new password in the email")}
               checked={canEmail && form.sendEmail && form.includePassword}
               onChange={(event) => setForm({ ...form, includePassword: event.currentTarget.checked })}
               disabled={!canEmail || !form.sendEmail || processing}
             />
             <Checkbox
-              label={t('workspace.people.changePassword.forcePasswordChange', 'Force user to change password on next login')}
+              label={t("workspace.people.changePassword.forcePasswordChange", "Force user to change password on next login")}
               checked={form.forcePasswordChange}
               onChange={(event) => setForm({ ...form, forcePasswordChange: event.currentTarget.checked })}
               disabled={processing || disabled}
@@ -265,19 +269,28 @@ export default function ChangeUserPasswordModal({ opened, onClose, user, onSucce
             {!canEmail && (
               <Text size="xs" c="dimmed">
                 {mailEnabled
-                  ? t('workspace.people.changePassword.emailUnavailable', "This user's email is not a valid email address. Notifications are disabled.")
-                  : t('workspace.people.changePassword.smtpDisabled', 'Email notifications require SMTP to be enabled in settings.')}
+                  ? t(
+                      "workspace.people.changePassword.emailUnavailable",
+                      "This user's email is not a valid email address. Notifications are disabled.",
+                    )
+                  : t(
+                      "workspace.people.changePassword.smtpDisabled",
+                      "Email notifications require SMTP to be enabled in settings.",
+                    )}
               </Text>
             )}
             {canEmail && !form.includePassword && form.sendEmail && (
               <Text size="xs" c="dimmed">
-                {t('workspace.people.changePassword.notifyOnly', 'An email will be sent without the password, letting the user know an admin changed it.')}
+                {t(
+                  "workspace.people.changePassword.notifyOnly",
+                  "An email will be sent without the password, letting the user know an admin changed it.",
+                )}
               </Text>
             )}
           </Stack>
 
           <Button onClick={handleSubmit} loading={processing} fullWidth size="md" disabled={disabled} mt="md">
-            {t('workspace.people.changePassword.submit', 'Update password')}
+            {t("workspace.people.changePassword.submit", "Update password")}
           </Button>
         </Stack>
       </div>
diff --git a/frontend/src/proprietary/components/shared/DividerWithText.tsx b/frontend/src/proprietary/components/shared/DividerWithText.tsx
index df1e98583f..a05ecb8717 100644
--- a/frontend/src/proprietary/components/shared/DividerWithText.tsx
+++ b/frontend/src/proprietary/components/shared/DividerWithText.tsx
@@ -1,25 +1,29 @@
-import '@app/components/shared/dividerWithText/DividerWithText.css';
+import "@app/components/shared/dividerWithText/DividerWithText.css";
 
 interface TextDividerProps {
-  text?: string
-  className?: string
-  style?: React.CSSProperties
-  variant?: 'default' | 'subcategory'
-  respondsToDarkMode?: boolean
-  opacity?: number
+  text?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  variant?: "default" | "subcategory";
+  respondsToDarkMode?: boolean;
+  opacity?: number;
 }
 
-export default function DividerWithText({ text, className = '', style, variant = 'default', respondsToDarkMode = true, opacity }: TextDividerProps) {
-  const variantClass = variant === 'subcategory' ? 'subcategory' : '';
-  const themeClass = respondsToDarkMode ? '' : 'force-light';
-  const styleWithOpacity = opacity !== undefined ? { ...(style || {}), ['--text-divider-opacity' as string]: opacity } : style;
+export default function DividerWithText({
+  text,
+  className = "",
+  style,
+  variant = "default",
+  respondsToDarkMode = true,
+  opacity,
+}: TextDividerProps) {
+  const variantClass = variant === "subcategory" ? "subcategory" : "";
+  const themeClass = respondsToDarkMode ? "" : "force-light";
+  const styleWithOpacity = opacity !== undefined ? { ...(style || {}), ["--text-divider-opacity" as string]: opacity } : style;
 
   if (text) {
     return (
-      <div
-        className={`text-divider ${variantClass} ${themeClass} ${className}`}
-        style={styleWithOpacity}
-      >
+      <div className={`text-divider ${variantClass} ${themeClass} ${className}`} style={styleWithOpacity}>
         <div className="text-divider__rule" />
         <span className="text-divider__label">{text}</span>
         <div className="text-divider__rule" />
@@ -27,10 +31,5 @@ export default function DividerWithText({ text, className = '', style, variant =
     );
   }
 
-  return (
-    <div
-      className={`h-px my-2.5 ${themeClass} ${className}`}
-      style={styleWithOpacity}
-    />
-  );
+  return <div className={`h-px my-2.5 ${themeClass} ${className}`} style={styleWithOpacity} />;
 }
diff --git a/frontend/src/proprietary/components/shared/InviteMembersModal.tsx b/frontend/src/proprietary/components/shared/InviteMembersModal.tsx
index 24c522acc1..de822e95f2 100644
--- a/frontend/src/proprietary/components/shared/InviteMembersModal.tsx
+++ b/frontend/src/proprietary/components/shared/InviteMembersModal.tsx
@@ -1,6 +1,6 @@
-import { useState, useEffect, useRef } from 'react';
-import { isAxiosError } from 'axios';
-import { useTranslation } from 'react-i18next';
+import { useState, useEffect, useRef } from "react";
+import { isAxiosError } from "axios";
+import { useTranslation } from "react-i18next";
 import {
   Modal,
   Stack,
@@ -16,14 +16,14 @@ import {
   CloseButton,
   Box,
   Group,
-} from '@mantine/core';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { alert } from '@app/components/toast';
-import { userManagementService } from '@app/services/userManagementService';
-import { teamService, Team } from '@app/services/teamService';
-import { Z_INDEX_OVER_CONFIG_MODAL } from '@app/styles/zIndex';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
-import { useNavigate } from 'react-router-dom';
+} from "@mantine/core";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { alert } from "@app/components/toast";
+import { userManagementService } from "@app/services/userManagementService";
+import { teamService, Team } from "@app/services/teamService";
+import { Z_INDEX_OVER_CONFIG_MODAL } from "@app/styles/zIndex";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
+import { useNavigate } from "react-router-dom";
 
 interface InviteMembersModalProps {
   opened: boolean;
@@ -37,7 +37,7 @@ export default function InviteMembersModal({ opened, onClose, onSuccess }: Invit
   const navigate = useNavigate();
   const [teams, setTeams] = useState<Team[]>([]);
   const [processing, setProcessing] = useState(false);
-  const [inviteMode, setInviteMode] = useState<'email' | 'direct' | 'link'>('direct');
+  const [inviteMode, setInviteMode] = useState<"email" | "direct" | "link">("direct");
   const [generatedInviteLink, setGeneratedInviteLink] = useState<string | null>(null);
   const actionTakenRef = useRef(false);
 
@@ -54,26 +54,26 @@ export default function InviteMembersModal({ opened, onClose, onSuccess }: Invit
 
   // Form state for direct invite
   const [inviteForm, setInviteForm] = useState({
-    username: '',
-    password: '',
-    role: 'ROLE_USER',
+    username: "",
+    password: "",
+    role: "ROLE_USER",
     teamId: undefined as number | undefined,
-    authType: 'WEB' as 'WEB' | 'OAUTH2' | 'SAML2',
+    authType: "WEB" as "WEB" | "OAUTH2" | "SAML2",
     forceChange: false,
     forceMFA: false,
   });
 
   // Form state for email invite
   const [emailInviteForm, setEmailInviteForm] = useState({
-    emails: '',
-    role: 'ROLE_USER',
+    emails: "",
+    role: "ROLE_USER",
     teamId: undefined as number | undefined,
   });
 
   // Form state for invite link
   const [inviteLinkForm, setInviteLinkForm] = useState({
-    email: '',
-    role: 'ROLE_USER',
+    email: "",
+    role: "ROLE_USER",
     teamId: undefined as number | undefined,
     expiryHours: 72,
     sendEmail: false,
@@ -84,10 +84,7 @@ export default function InviteMembersModal({ opened, onClose, onSuccess }: Invit
     if (opened) {
       const fetchData = async () => {
         try {
-          const [adminData, teamsData] = await Promise.all([
-            userManagementService.getUsers(),
-            teamService.getTeams(),
-          ]);
+          const [adminData, teamsData] = await Promise.all([userManagementService.getUsers(), teamService.getTeams()]);
 
           setTeams(teamsData);
 
@@ -100,7 +97,7 @@ export default function InviteMembersModal({ opened, onClose, onSuccess }: Invit
             totalUsers: adminData.totalUsers,
           });
         } catch (error) {
-          console.error('Failed to fetch data:', error);
+          console.error("Failed to fetch data:", error);
         }
       };
       fetchData();
@@ -109,12 +106,12 @@ export default function InviteMembersModal({ opened, onClose, onSuccess }: Invit
 
   const roleOptions = [
     {
-      value: 'ROLE_USER',
-      label: t('workspace.people.roleDescriptions.user', 'User'),
+      value: "ROLE_USER",
+      label: t("workspace.people.roleDescriptions.user", "User"),
     },
     {
-      value: 'ROLE_ADMIN',
-      label: t('workspace.people.roleDescriptions.admin', 'Admin'),
+      value: "ROLE_ADMIN",
+      label: t("workspace.people.roleDescriptions.admin", "Admin"),
     },
   ];
 
@@ -125,13 +122,13 @@ export default function InviteMembersModal({ opened, onClose, onSuccess }: Invit
 
   const handleInviteUser = async () => {
     if (!inviteForm.username) {
-      alert({ alertType: 'error', title: t('workspace.people.addMember.usernameRequired') });
+      alert({ alertType: "error", title: t("workspace.people.addMember.usernameRequired") });
       return;
     }
 
     // Password is only required for WEB auth type
-    if (inviteForm.authType === 'WEB' && !inviteForm.password) {
-      alert({ alertType: 'error', title: t('workspace.people.addMember.passwordRequired', 'Password is required') });
+    if (inviteForm.authType === "WEB" && !inviteForm.password) {
+      alert({ alertType: "error", title: t("workspace.people.addMember.passwordRequired", "Password is required") });
       return;
     }
 
@@ -146,25 +143,25 @@ export default function InviteMembersModal({ opened, onClose, onSuccess }: Invit
         forceChange: inviteForm.forceChange,
         forceMFA: inviteForm.forceMFA,
       });
-      alert({ alertType: 'success', title: t('workspace.people.addMember.success') });
+      alert({ alertType: "success", title: t("workspace.people.addMember.success") });
       onClose();
       onSuccess?.();
       // Reset form
       setInviteForm({
-        username: '',
-        password: '',
-        role: 'ROLE_USER',
+        username: "",
+        password: "",
+        role: "ROLE_USER",
         teamId: undefined,
-        authType: 'WEB',
+        authType: "WEB",
         forceChange: false,
         forceMFA: false,
       });
     } catch (error: unknown) {
-      console.error('Failed to invite user:', error);
+      console.error("Failed to invite user:", error);
       const errorMessage = isAxiosError(error)
-        ? (error.response?.data?.message || error.response?.data?.error || error.message)
-        : (error instanceof Error ? error.message : undefined) || t('workspace.people.addMember.error');
-      alert({ alertType: 'error', title: errorMessage });
+        ? error.response?.data?.message || error.response?.data?.error || error.message
+        : (error instanceof Error ? error.message : undefined) || t("workspace.people.addMember.error");
+      alert({ alertType: "error", title: errorMessage });
     } finally {
       setProcessing(false);
     }
@@ -172,7 +169,7 @@ export default function InviteMembersModal({ opened, onClose, onSuccess }: Invit
 
   const handleEmailInvite = async () => {
     if (!emailInviteForm.emails.trim()) {
-      alert({ alertType: 'error', title: t('workspace.people.emailInvite.emailsRequired', 'Email addresses are required') });
+      alert({ alertType: "error", title: t("workspace.people.emailInvite.emailsRequired", "Email addresses are required") });
       return;
     }
 
@@ -187,39 +184,43 @@ export default function InviteMembersModal({ opened, onClose, onSuccess }: Invit
       if (response.successCount > 0) {
         // Show success message
         alert({
-          alertType: 'success',
-          title: t('workspace.people.emailInvite.success', { count: response.successCount, defaultValue: `Successfully invited ${response.successCount} user(s)` })
+          alertType: "success",
+          title: t("workspace.people.emailInvite.success", {
+            count: response.successCount,
+            defaultValue: `Successfully invited ${response.successCount} user(s)`,
+          }),
         });
 
         // Show warning if there were partial failures
         if (response.failureCount > 0 && response.errors) {
           alert({
-            alertType: 'warning',
-            title: t('workspace.people.emailInvite.partialFailure', 'Some invites failed'),
-            body: response.errors
+            alertType: "warning",
+            title: t("workspace.people.emailInvite.partialFailure", "Some invites failed"),
+            body: response.errors,
           });
         }
 
         onClose();
         onSuccess?.();
         setEmailInviteForm({
-          emails: '',
-          role: 'ROLE_USER',
+          emails: "",
+          role: "ROLE_USER",
           teamId: undefined,
         });
       } else {
         alert({
-          alertType: 'error',
-          title: t('workspace.people.emailInvite.allFailed', 'Failed to invite users'),
-          body: response.errors || response.error
+          alertType: "error",
+          title: t("workspace.people.emailInvite.allFailed", "Failed to invite users"),
+          body: response.errors || response.error,
         });
       }
     } catch (error: unknown) {
-      console.error('Failed to invite users:', error);
+      console.error("Failed to invite users:", error);
       const errorMessage = isAxiosError(error)
-        ? (error.response?.data?.message || error.response?.data?.error || error.message)
-        : (error instanceof Error ? error.message : undefined) || t('workspace.people.emailInvite.error', 'Failed to send invites');
-      alert({ alertType: 'error', title: errorMessage });
+        ? error.response?.data?.message || error.response?.data?.error || error.message
+        : (error instanceof Error ? error.message : undefined) ||
+          t("workspace.people.emailInvite.error", "Failed to send invites");
+      alert({ alertType: "error", title: errorMessage });
     } finally {
       setProcessing(false);
     }
@@ -239,14 +240,18 @@ export default function InviteMembersModal({ opened, onClose, onSuccess }: Invit
       actionTakenRef.current = true;
       setGeneratedInviteLink(response.inviteUrl);
       if (inviteLinkForm.sendEmail && inviteLinkForm.email) {
-        alert({ alertType: 'success', title: t('workspace.people.inviteLink.emailSent', 'Invite link generated and sent via email') });
+        alert({
+          alertType: "success",
+          title: t("workspace.people.inviteLink.emailSent", "Invite link generated and sent via email"),
+        });
       }
     } catch (error: unknown) {
-      console.error('Failed to generate invite link:', error);
+      console.error("Failed to generate invite link:", error);
       const errorMessage = isAxiosError(error)
-        ? (error.response?.data?.message || error.response?.data?.error || error.message)
-        : (error instanceof Error ? error.message : undefined) || t('workspace.people.inviteLink.error', 'Failed to generate invite link');
-      alert({ alertType: 'error', title: errorMessage });
+        ? error.response?.data?.message || error.response?.data?.error || error.message
+        : (error instanceof Error ? error.message : undefined) ||
+          t("workspace.people.inviteLink.error", "Failed to generate invite link");
+      alert({ alertType: "error", title: errorMessage });
     } finally {
       setProcessing(false);
     }
@@ -258,24 +263,24 @@ export default function InviteMembersModal({ opened, onClose, onSuccess }: Invit
       actionTakenRef.current = false;
     }
     setGeneratedInviteLink(null);
-    setInviteMode('direct');
+    setInviteMode("direct");
     setInviteForm({
-      username: '',
-      password: '',
-      role: 'ROLE_USER',
+      username: "",
+      password: "",
+      role: "ROLE_USER",
       teamId: undefined,
-      authType: 'WEB',
+      authType: "WEB",
       forceChange: false,
       forceMFA: false,
     });
     setEmailInviteForm({
-      emails: '',
-      role: 'ROLE_USER',
+      emails: "",
+      role: "ROLE_USER",
       teamId: undefined,
     });
     setInviteLinkForm({
-      email: '',
-      role: 'ROLE_USER',
+      email: "",
+      role: "ROLE_USER",
       teamId: undefined,
       expiryHours: 72,
       sendEmail: false,
@@ -285,13 +290,13 @@ export default function InviteMembersModal({ opened, onClose, onSuccess }: Invit
 
   const handleGoToPlan = () => {
     handleClose();
-    navigate('/settings/adminPlan');
+    navigate("/settings/adminPlan");
   };
 
   const handlePrimaryAction = () => {
-    if (inviteMode === 'email') {
+    if (inviteMode === "email") {
       handleEmailInvite();
-    } else if (inviteMode === 'link') {
+    } else if (inviteMode === "link") {
       handleGenerateInviteLink();
     } else {
       handleInviteUser();
@@ -313,53 +318,60 @@ export default function InviteMembersModal({ opened, onClose, onSuccess }: Invit
           onClick={handleClose}
           size="lg"
           style={{
-            position: 'absolute',
+            position: "absolute",
             top: -8,
             right: -8,
-            zIndex: 1
+            zIndex: 1,
           }}
         />
         <Stack gap="lg" pt="md">
           {/* Header with Icon */}
           <Stack gap="md" align="center">
-            <LocalIcon icon="person-add" width="3rem" height="3rem" style={{ color: 'var(--mantine-color-gray-6)' }} />
+            <LocalIcon icon="person-add" width="3rem" height="3rem" style={{ color: "var(--mantine-color-gray-6)" }} />
             <Text size="xl" fw={600} ta="center">
-              {t('workspace.people.inviteMembers.label', 'Invite Members')}
+              {t("workspace.people.inviteMembers.label", "Invite Members")}
             </Text>
-            {inviteMode === 'email' && (
+            {inviteMode === "email" && (
               <Text size="sm" c="dimmed" ta="center" px="md">
-                {t('workspace.people.inviteMembers.subtitle', 'Type or paste in emails below, separated by commas. Your workspace will be billed by members.')}
+                {t(
+                  "workspace.people.inviteMembers.subtitle",
+                  "Type or paste in emails below, separated by commas. Your workspace will be billed by members.",
+                )}
               </Text>
             )}
           </Stack>
 
           {/* License Warning/Info */}
           {licenseInfo && (
-            <Paper withBorder p="sm" bg={licenseInfo.availableSlots === 0 ? 'var(--mantine-color-red-light)' : 'var(--mantine-color-blue-light)'}>
+            <Paper
+              withBorder
+              p="sm"
+              bg={licenseInfo.availableSlots === 0 ? "var(--mantine-color-red-light)" : "var(--mantine-color-blue-light)"}
+            >
               <Stack gap="xs">
                 <Group justify="space-between" align="center" wrap="nowrap">
                   <Group gap="xs" wrap="nowrap">
-                    <LocalIcon icon={licenseInfo.availableSlots > 0 ? 'info' : 'warning'} width="1rem" height="1rem" />
+                    <LocalIcon icon={licenseInfo.availableSlots > 0 ? "info" : "warning"} width="1rem" height="1rem" />
                     <Text size="sm" fw={500}>
                       {licenseInfo.availableSlots > 0
-                        ? t('workspace.people.license.slotsAvailable', {
+                        ? t("workspace.people.license.slotsAvailable", {
                             count: licenseInfo.availableSlots,
-                            defaultValue: `${licenseInfo.availableSlots} user slot(s) available`
+                            defaultValue: `${licenseInfo.availableSlots} user slot(s) available`,
                           })
-                        : t('workspace.people.license.noSlotsAvailable', 'No user slots available')}
+                        : t("workspace.people.license.noSlotsAvailable", "No user slots available")}
                     </Text>
                   </Group>
                   {licenseInfo.availableSlots === 0 && (
                     <Button size="xs" variant="light" onClick={handleGoToPlan}>
-                      {t('workspace.people.actions.upgrade', 'Upgrade')}
+                      {t("workspace.people.actions.upgrade", "Upgrade")}
                     </Button>
                   )}
                 </Group>
                 <Text size="xs" c="dimmed">
-                  {t('workspace.people.license.currentUsage', {
+                  {t("workspace.people.license.currentUsage", {
                     current: licenseInfo.totalUsers,
                     max: licenseInfo.maxAllowedUsers,
-                    defaultValue: `Currently using ${licenseInfo.totalUsers} of ${licenseInfo.maxAllowedUsers} user licenses`
+                    defaultValue: `Currently using ${licenseInfo.totalUsers} of ${licenseInfo.maxAllowedUsers} user licenses`,
                   })}
                 </Text>
               </Stack>
@@ -368,7 +380,10 @@ export default function InviteMembersModal({ opened, onClose, onSuccess }: Invit
 
           {/* Mode Toggle */}
           <Tooltip
-            label={t('workspace.people.inviteMode.emailDisabled', 'Email invites require SMTP configuration and mail.enableInvites=true in settings')}
+            label={t(
+              "workspace.people.inviteMode.emailDisabled",
+              "Email invites require SMTP configuration and mail.enableInvites=true in settings",
+            )}
             disabled={!!config?.enableEmailInvites}
             position="bottom"
             withArrow
@@ -378,21 +393,21 @@ export default function InviteMembersModal({ opened, onClose, onSuccess }: Invit
               <SegmentedControl
                 value={inviteMode}
                 onChange={(value) => {
-                  setInviteMode(value as 'email' | 'direct' | 'link');
+                  setInviteMode(value as "email" | "direct" | "link");
                   setGeneratedInviteLink(null);
                 }}
                 data={[
                   {
-                    label: t('workspace.people.inviteMode.username', 'Username'),
-                    value: 'direct',
+                    label: t("workspace.people.inviteMode.username", "Username"),
+                    value: "direct",
                   },
                   {
-                    label: t('workspace.people.inviteMode.link', 'Link'),
-                    value: 'link',
+                    label: t("workspace.people.inviteMode.link", "Link"),
+                    value: "link",
                   },
                   {
-                    label: t('workspace.people.inviteMode.email', 'Email'),
-                    value: 'email',
+                    label: t("workspace.people.inviteMode.email", "Email"),
+                    value: "email",
                     disabled: !config?.enableEmailInvites,
                   },
                 ]}
@@ -402,25 +417,28 @@ export default function InviteMembersModal({ opened, onClose, onSuccess }: Invit
           </Tooltip>
 
           {/* Link Mode */}
-          {inviteMode === 'link' && (
+          {inviteMode === "link" && (
             <>
               <TextInput
-                label={t('workspace.people.inviteLink.email', 'Email (optional)')}
-                placeholder={t('workspace.people.inviteLink.emailPlaceholder', 'user@example.com')}
+                label={t("workspace.people.inviteLink.email", "Email (optional)")}
+                placeholder={t("workspace.people.inviteLink.emailPlaceholder", "user@example.com")}
                 value={inviteLinkForm.email}
                 onChange={(e) => setInviteLinkForm({ ...inviteLinkForm, email: e.currentTarget.value })}
-                description={t('workspace.people.inviteLink.emailDescription', 'If provided, the link will be tied to this email address')}
+                description={t(
+                  "workspace.people.inviteLink.emailDescription",
+                  "If provided, the link will be tied to this email address",
+                )}
               />
               <Select
-                label={t('workspace.people.addMember.role')}
+                label={t("workspace.people.addMember.role")}
                 data={roleOptions}
                 value={inviteLinkForm.role}
-                onChange={(value) => setInviteLinkForm({ ...inviteLinkForm, role: value || 'ROLE_USER' })}
+                onChange={(value) => setInviteLinkForm({ ...inviteLinkForm, role: value || "ROLE_USER" })}
                 comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_CONFIG_MODAL }}
               />
               <Select
-                label={t('workspace.people.addMember.team')}
-                placeholder={t('workspace.people.addMember.teamPlaceholder')}
+                label={t("workspace.people.addMember.team")}
+                placeholder={t("workspace.people.addMember.teamPlaceholder")}
                 data={teamOptions}
                 value={inviteLinkForm.teamId?.toString()}
                 onChange={(value) => setInviteLinkForm({ ...inviteLinkForm, teamId: value ? parseInt(value) : undefined })}
@@ -428,7 +446,7 @@ export default function InviteMembersModal({ opened, onClose, onSuccess }: Invit
                 comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_CONFIG_MODAL }}
               />
               <TextInput
-                label={t('workspace.people.inviteLink.expiryHours', 'Link expires in (hours)')}
+                label={t("workspace.people.inviteLink.expiryHours", "Link expires in (hours)")}
                 type="number"
                 value={inviteLinkForm.expiryHours}
                 onChange={(e) => setInviteLinkForm({ ...inviteLinkForm, expiryHours: parseInt(e.currentTarget.value) || 72 })}
@@ -437,8 +455,11 @@ export default function InviteMembersModal({ opened, onClose, onSuccess }: Invit
               />
               {inviteLinkForm.email && (
                 <Checkbox
-                  label={t('workspace.people.inviteLink.sendEmail', 'Send invite link via email')}
-                  description={t('workspace.people.inviteLink.sendEmailDescription', 'Also send the link to the provided email address')}
+                  label={t("workspace.people.inviteLink.sendEmail", "Send invite link via email")}
+                  description={t(
+                    "workspace.people.inviteLink.sendEmailDescription",
+                    "Also send the link to the provided email address",
+                  )}
                   checked={inviteLinkForm.sendEmail}
                   onChange={(e) => setInviteLinkForm({ ...inviteLinkForm, sendEmail: e.currentTarget.checked })}
                 />
@@ -448,30 +469,34 @@ export default function InviteMembersModal({ opened, onClose, onSuccess }: Invit
               {generatedInviteLink && (
                 <Paper withBorder p="md" bg="var(--mantine-color-green-light)">
                   <Stack gap="sm">
-                    <Text size="sm" fw={500}>{t('workspace.people.inviteLink.generated', 'Invite Link Generated')}</Text>
+                    <Text size="sm" fw={500}>
+                      {t("workspace.people.inviteLink.generated", "Invite Link Generated")}
+                    </Text>
                     <Group gap="xs">
-                      <TextInput
-                        value={generatedInviteLink}
-                        readOnly
-                        style={{ flex: 1 }}
-                      />
+                      <TextInput value={generatedInviteLink} readOnly style={{ flex: 1 }} />
                       <Button
                         variant="light"
                         onClick={async () => {
                           try {
                             await navigator.clipboard.writeText(generatedInviteLink);
-                            alert({ alertType: 'success', title: t('workspace.people.inviteLink.copied', 'Link copied to clipboard!') });
+                            alert({
+                              alertType: "success",
+                              title: t("workspace.people.inviteLink.copied", "Link copied to clipboard!"),
+                            });
                           } catch {
                             // Fallback for browsers without clipboard API
-                            const textArea = document.createElement('textarea');
+                            const textArea = document.createElement("textarea");
                             textArea.value = generatedInviteLink;
-                            textArea.style.position = 'fixed';
-                            textArea.style.opacity = '0';
+                            textArea.style.position = "fixed";
+                            textArea.style.opacity = "0";
                             document.body.appendChild(textArea);
                             textArea.select();
-                            document.execCommand('copy');
+                            document.execCommand("copy");
                             document.body.removeChild(textArea);
-                            alert({ alertType: 'success', title: t('workspace.people.inviteLink.copied', 'Link copied to clipboard!') });
+                            alert({
+                              alertType: "success",
+                              title: t("workspace.people.inviteLink.copied", "Link copied to clipboard!"),
+                            });
                           }
                         }}
                       >
@@ -485,26 +510,26 @@ export default function InviteMembersModal({ opened, onClose, onSuccess }: Invit
           )}
 
           {/* Email Mode */}
-          {inviteMode === 'email' && config?.enableEmailInvites && (
+          {inviteMode === "email" && config?.enableEmailInvites && (
             <>
               <Textarea
-                label={t('workspace.people.emailInvite.emails', 'Email Addresses')}
-                placeholder={t('workspace.people.emailInvite.emailsPlaceholder', 'user1@example.com, user2@example.com')}
+                label={t("workspace.people.emailInvite.emails", "Email Addresses")}
+                placeholder={t("workspace.people.emailInvite.emailsPlaceholder", "user1@example.com, user2@example.com")}
                 value={emailInviteForm.emails}
                 onChange={(e) => setEmailInviteForm({ ...emailInviteForm, emails: e.currentTarget.value })}
                 minRows={3}
                 required
               />
               <Select
-                label={t('workspace.people.addMember.role')}
+                label={t("workspace.people.addMember.role")}
                 data={roleOptions}
                 value={emailInviteForm.role}
-                onChange={(value) => setEmailInviteForm({ ...emailInviteForm, role: value || 'ROLE_USER' })}
+                onChange={(value) => setEmailInviteForm({ ...emailInviteForm, role: value || "ROLE_USER" })}
                 comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_CONFIG_MODAL }}
               />
               <Select
-                label={t('workspace.people.addMember.team')}
-                placeholder={t('workspace.people.addMember.teamPlaceholder')}
+                label={t("workspace.people.addMember.team")}
+                placeholder={t("workspace.people.addMember.teamPlaceholder")}
                 data={teamOptions}
                 value={emailInviteForm.teamId?.toString()}
                 onChange={(value) => setEmailInviteForm({ ...emailInviteForm, teamId: value ? parseInt(value) : undefined })}
@@ -515,11 +540,11 @@ export default function InviteMembersModal({ opened, onClose, onSuccess }: Invit
           )}
 
           {/* Direct/Username Mode */}
-          {inviteMode === 'direct' && (
+          {inviteMode === "direct" && (
             <>
               <TextInput
-                label={t('workspace.people.addMember.username')}
-                placeholder={t('workspace.people.addMember.usernamePlaceholder')}
+                label={t("workspace.people.addMember.username")}
+                placeholder={t("workspace.people.addMember.usernamePlaceholder")}
                 value={inviteForm.username}
                 onChange={(e) => setInviteForm({ ...inviteForm, username: e.currentTarget.value })}
                 required
@@ -528,37 +553,45 @@ export default function InviteMembersModal({ opened, onClose, onSuccess }: Invit
               {/* Auth Type Selector - only show if SSO is enabled */}
               {(config?.enableOAuth || config?.enableSaml) && (
                 <Select
-                  label={t('workspace.people.addMember.authType', 'Authentication Type')}
+                  label={t("workspace.people.addMember.authType", "Authentication Type")}
                   data={[
-                    { value: 'WEB', label: t('workspace.people.authType.password', 'Password') },
-                    ...(config?.enableOAuth ? [{ value: 'OAUTH2', label: t('workspace.people.authType.oauth', 'OAuth2') }] : []),
-                    ...(config?.enableSaml ? [{ value: 'SAML2', label: t('workspace.people.authType.saml', 'SAML2') }] : []),
+                    { value: "WEB", label: t("workspace.people.authType.password", "Password") },
+                    ...(config?.enableOAuth
+                      ? [{ value: "OAUTH2", label: t("workspace.people.authType.oauth", "OAuth2") }]
+                      : []),
+                    ...(config?.enableSaml ? [{ value: "SAML2", label: t("workspace.people.authType.saml", "SAML2") }] : []),
                   ]}
                   value={inviteForm.authType}
-                  onChange={(value) => setInviteForm({ ...inviteForm, authType: (value as 'WEB' | 'OAUTH2' | 'SAML2') || 'WEB' })}
+                  onChange={(value) =>
+                    setInviteForm({ ...inviteForm, authType: (value as "WEB" | "OAUTH2" | "SAML2") || "WEB" })
+                  }
                   comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_CONFIG_MODAL }}
-                  description={inviteForm.authType !== 'WEB' ? t('workspace.people.authType.ssoDescription', 'User will authenticate via SSO provider') : undefined}
+                  description={
+                    inviteForm.authType !== "WEB"
+                      ? t("workspace.people.authType.ssoDescription", "User will authenticate via SSO provider")
+                      : undefined
+                  }
                 />
               )}
 
               {/* Password field - only required for WEB auth type */}
-              {inviteForm.authType === 'WEB' && (
+              {inviteForm.authType === "WEB" && (
                 <>
                   <TextInput
-                    label={t('workspace.people.addMember.password')}
+                    label={t("workspace.people.addMember.password")}
                     type="password"
-                    placeholder={t('workspace.people.addMember.passwordPlaceholder')}
+                    placeholder={t("workspace.people.addMember.passwordPlaceholder")}
                     value={inviteForm.password}
                     onChange={(e) => setInviteForm({ ...inviteForm, password: e.currentTarget.value })}
                     required
                   />
                   <Checkbox
-                    label={t('workspace.people.addMember.forcePasswordChange', 'Force password change on first login')}
+                    label={t("workspace.people.addMember.forcePasswordChange", "Force password change on first login")}
                     checked={inviteForm.forceChange}
                     onChange={(e) => setInviteForm({ ...inviteForm, forceChange: e.currentTarget.checked })}
                   />
                   <Checkbox
-                    label={t('workspace.people.addMember.forceMFA', 'Force MFA setup on next login')}
+                    label={t("workspace.people.addMember.forceMFA", "Force MFA setup on next login")}
                     checked={inviteForm.forceMFA}
                     onChange={(e) => setInviteForm({ ...inviteForm, forceMFA: e.currentTarget.checked })}
                   />
@@ -566,15 +599,15 @@ export default function InviteMembersModal({ opened, onClose, onSuccess }: Invit
               )}
 
               <Select
-                label={t('workspace.people.addMember.role')}
+                label={t("workspace.people.addMember.role")}
                 data={roleOptions}
                 value={inviteForm.role}
-                onChange={(value) => setInviteForm({ ...inviteForm, role: value || 'ROLE_USER' })}
+                onChange={(value) => setInviteForm({ ...inviteForm, role: value || "ROLE_USER" })}
                 comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_CONFIG_MODAL }}
               />
               <Select
-                label={t('workspace.people.addMember.team')}
-                placeholder={t('workspace.people.addMember.teamPlaceholder')}
+                label={t("workspace.people.addMember.team")}
+                placeholder={t("workspace.people.addMember.teamPlaceholder")}
                 data={teamOptions}
                 value={inviteForm.teamId?.toString()}
                 onChange={(value) => setInviteForm({ ...inviteForm, teamId: value ? parseInt(value) : undefined })}
@@ -585,22 +618,15 @@ export default function InviteMembersModal({ opened, onClose, onSuccess }: Invit
           )}
 
           {/* Action Button */}
-          <Button
-            onClick={handlePrimaryAction}
-            loading={!hasNoSlots && processing}
-            fullWidth
-            size="md"
-            mt="md"
-          >
-            {inviteMode === 'email'
-              ? t('workspace.people.emailInvite.submit', 'Send Invites')
-              : inviteMode === 'link'
-                ? t('workspace.people.inviteLink.submit', 'Generate Link')
-                : t('workspace.people.addMember.submit')}
+          <Button onClick={handlePrimaryAction} loading={!hasNoSlots && processing} fullWidth size="md" mt="md">
+            {inviteMode === "email"
+              ? t("workspace.people.emailInvite.submit", "Send Invites")
+              : inviteMode === "link"
+                ? t("workspace.people.inviteLink.submit", "Generate Link")
+                : t("workspace.people.addMember.submit")}
           </Button>
         </Stack>
       </Box>
     </Modal>
   );
 }
-
diff --git a/frontend/src/proprietary/components/shared/LoginRightCarousel.tsx b/frontend/src/proprietary/components/shared/LoginRightCarousel.tsx
index f7157a43e5..15a66528d7 100644
--- a/frontend/src/proprietary/components/shared/LoginRightCarousel.tsx
+++ b/frontend/src/proprietary/components/shared/LoginRightCarousel.tsx
@@ -1,7 +1,15 @@
-import { memo, useEffect, useMemo, useRef, useState } from 'react';
-import { BASE_PATH } from '@app/constants/app';
+import { memo, useEffect, useMemo, useRef, useState } from "react";
+import { BASE_PATH } from "@app/constants/app";
 
-type ImageSlide = { src: string; alt?: string; cornerModelUrl?: string; title?: string; subtitle?: string; followMouseTilt?: boolean; tiltMaxDeg?: number }
+type ImageSlide = {
+  src: string;
+  alt?: string;
+  cornerModelUrl?: string;
+  title?: string;
+  subtitle?: string;
+  followMouseTilt?: boolean;
+  tiltMaxDeg?: number;
+};
 
 function LoginRightCarousel({
   imageSlides = [],
@@ -9,10 +17,10 @@ function LoginRightCarousel({
   initialSeconds = 5,
   slideSeconds = 8,
 }: {
-  imageSlides?: ImageSlide[]
-  showBackground?: boolean
-  initialSeconds?: number
-  slideSeconds?: number
+  imageSlides?: ImageSlide[];
+  showBackground?: boolean;
+  initialSeconds?: number;
+  slideSeconds?: number;
 }) {
   const totalSlides = imageSlides.length;
   const [index, setIndex] = useState(0);
@@ -25,9 +33,12 @@ function LoginRightCarousel({
 
   useEffect(() => {
     if (totalSlides <= 1) return;
-    const timeout = setTimeout(() => {
-      setIndex((i) => (i + 1) % totalSlides);
-    }, durationsMs[index] ?? slideSeconds * 1000);
+    const timeout = setTimeout(
+      () => {
+        setIndex((i) => (i + 1) % totalSlides);
+      },
+      durationsMs[index] ?? slideSeconds * 1000,
+    );
     return () => clearTimeout(timeout);
   }, [index, totalSlides, durationsMs, slideSeconds]);
 
@@ -36,8 +47,8 @@ function LoginRightCarousel({
       mouse.current.x = (e.clientX / window.innerWidth) * 2 - 1;
       mouse.current.y = (e.clientY / window.innerHeight) * 2 - 1;
     };
-    window.addEventListener('mousemove', onMove);
-    return () => window.removeEventListener('mousemove', onMove);
+    window.addEventListener("mousemove", onMove);
+    return () => window.removeEventListener("mousemove", onMove);
   }, []);
 
   function TiltImage({ src, alt, enabled, maxDeg = 6 }: { src: string; alt?: string; enabled: boolean; maxDeg?: number }) {
@@ -54,7 +65,7 @@ function LoginRightCarousel({
           const rotX = -(mouse.current.y || 0) * maxDeg;
           el.style.transform = `translateY(-2rem) rotateX(${rotX.toFixed(2)}deg) rotateY(${rotY.toFixed(2)}deg)`;
         } else {
-          el.style.transform = 'translateY(-2rem)';
+          el.style.transform = "translateY(-2rem)";
         }
         raf = requestAnimationFrame(tick);
       };
@@ -66,29 +77,29 @@ function LoginRightCarousel({
       <img
         ref={imgRef}
         src={src}
-        alt={alt ?? 'Carousel slide'}
+        alt={alt ?? "Carousel slide"}
         style={{
-          maxWidth: '86%',
-          maxHeight: '78%',
-          objectFit: 'contain',
-          borderRadius: '18px',
-          background: 'transparent',
-          transform: 'translateY(-2rem)',
-          transition: 'transform 80ms ease-out',
-          willChange: 'transform',
-          transformOrigin: '50% 50%',
+          maxWidth: "86%",
+          maxHeight: "78%",
+          objectFit: "contain",
+          borderRadius: "18px",
+          background: "transparent",
+          transform: "translateY(-2rem)",
+          transition: "transform 80ms ease-out",
+          willChange: "transform",
+          transformOrigin: "50% 50%",
         }}
       />
     );
   }
 
   return (
-    <div style={{ position: 'relative', overflow: 'hidden', width: '100%', height: '100%' }}>
+    <div style={{ position: "relative", overflow: "hidden", width: "100%", height: "100%" }}>
       {showBackground && (
         <img
           src={`${BASE_PATH}/Login/LoginBackgroundPanel.png`}
           alt="Background panel"
-          style={{ position: 'absolute', inset: 0, width: '100%', height: '100%', objectFit: 'cover' }}
+          style={{ position: "absolute", inset: 0, width: "100%", height: "100%", objectFit: "cover" }}
         />
       )}
 
@@ -97,40 +108,61 @@ function LoginRightCarousel({
         <div
           key={s.src}
           style={{
-            position: 'absolute',
+            position: "absolute",
             inset: 0,
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            transition: 'opacity 600ms ease',
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            transition: "opacity 600ms ease",
             opacity: index === idx ? 1 : 0,
-            perspective: '900px',
+            perspective: "900px",
           }}
         >
           {(s.title || s.subtitle) && (
-            <div style={{ position: 'absolute', bottom: 24 + 32, left: 0, right: 0, textAlign: 'center', padding: '0 2rem', width: '100%' }}>
+            <div
+              style={{
+                position: "absolute",
+                bottom: 24 + 32,
+                left: 0,
+                right: 0,
+                textAlign: "center",
+                padding: "0 2rem",
+                width: "100%",
+              }}
+            >
               {s.title && (
-                <div style={{ fontSize: 20, fontWeight: 800, color: '#ffffff', textShadow: '0 2px 6px rgba(0,0,0,0.25)', marginBottom: 6 }}>{s.title}</div>
+                <div
+                  style={{
+                    fontSize: 20,
+                    fontWeight: 800,
+                    color: "#ffffff",
+                    textShadow: "0 2px 6px rgba(0,0,0,0.25)",
+                    marginBottom: 6,
+                  }}
+                >
+                  {s.title}
+                </div>
               )}
               {s.subtitle && (
-                <div style={{ fontSize: 13, color: 'rgba(255,255,255,0.92)', textShadow: '0 1px 4px rgba(0,0,0,0.25)' }}>{s.subtitle}</div>
+                <div style={{ fontSize: 13, color: "rgba(255,255,255,0.92)", textShadow: "0 1px 4px rgba(0,0,0,0.25)" }}>
+                  {s.subtitle}
+                </div>
               )}
             </div>
           )}
           <TiltImage src={s.src} alt={s.alt} enabled={index === idx && !!s.followMouseTilt} maxDeg={s.tiltMaxDeg ?? 6} />
-
         </div>
       ))}
 
       {/* Dot navigation */}
       <div
         style={{
-          position: 'absolute',
+          position: "absolute",
           bottom: 16,
           left: 0,
           right: 0,
-          display: 'flex',
-          justifyContent: 'center',
+          display: "flex",
+          justifyContent: "center",
           gap: 10,
           zIndex: 2,
         }}
@@ -141,14 +173,14 @@ function LoginRightCarousel({
             aria-label={`Go to slide ${i + 1}`}
             onClick={() => setIndex(i)}
             style={{
-              width: '10px',
-              height: '12px',
-              borderRadius: '50%',
-              border: 'none',
-              cursor: 'pointer',
-              backgroundColor: i === index ? '#ffffff' : 'rgba(255,255,255,0.5)',
-              boxShadow: '0 2px 6px rgba(0,0,0,0.25)',
-              display: 'block',
+              width: "10px",
+              height: "12px",
+              borderRadius: "50%",
+              border: "none",
+              cursor: "pointer",
+              backgroundColor: i === index ? "#ffffff" : "rgba(255,255,255,0.5)",
+              boxShadow: "0 2px 6px rgba(0,0,0,0.25)",
+              display: "block",
               flexShrink: 0,
             }}
           />
diff --git a/frontend/src/proprietary/components/shared/ManageBillingButton.tsx b/frontend/src/proprietary/components/shared/ManageBillingButton.tsx
index bdbf49beca..080f7ca028 100644
--- a/frontend/src/proprietary/components/shared/ManageBillingButton.tsx
+++ b/frontend/src/proprietary/components/shared/ManageBillingButton.tsx
@@ -1,16 +1,14 @@
-import React, { useState } from 'react';
-import { Button } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import licenseService from '@app/services/licenseService';
-import { alert } from '@app/components/toast';
+import React, { useState } from "react";
+import { Button } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import licenseService from "@app/services/licenseService";
+import { alert } from "@app/components/toast";
 
 interface ManageBillingButtonProps {
   returnUrl?: string;
 }
 
-export const ManageBillingButton: React.FC<ManageBillingButtonProps> = ({
-  returnUrl = window.location.href,
-}) => {
+export const ManageBillingButton: React.FC<ManageBillingButtonProps> = ({ returnUrl = window.location.href }) => {
   const { t } = useTranslation();
   const [loading, setLoading] = useState(false);
 
@@ -22,24 +20,21 @@ export const ManageBillingButton: React.FC<ManageBillingButtonProps> = ({
       const licenseInfo = await licenseService.getLicenseInfo();
 
       if (!licenseInfo.licenseKey) {
-        throw new Error('No license key found. Please activate a license first.');
+        throw new Error("No license key found. Please activate a license first.");
       }
 
       // Create billing portal session with license key
-      const response = await licenseService.createBillingPortalSession(
-        returnUrl,
-        licenseInfo.licenseKey
-      );
+      const response = await licenseService.createBillingPortalSession(returnUrl, licenseInfo.licenseKey);
 
       // Open billing portal in new tab
-      window.open(response.url, '_blank');
+      window.open(response.url, "_blank");
       setLoading(false);
     } catch (error: unknown) {
-      console.error('Failed to open billing portal:', error);
+      console.error("Failed to open billing portal:", error);
       alert({
-        alertType: 'error',
-        title: t('billing.portal.error', 'Failed to open billing portal'),
-        body: (error instanceof Error ? error.message : undefined) || 'Please try again or contact support.',
+        alertType: "error",
+        title: t("billing.portal.error", "Failed to open billing portal"),
+        body: (error instanceof Error ? error.message : undefined) || "Please try again or contact support.",
       });
       setLoading(false);
     }
@@ -47,7 +42,7 @@ export const ManageBillingButton: React.FC<ManageBillingButtonProps> = ({
 
   return (
     <Button variant="outline" onClick={handleClick} loading={loading}>
-      {t('billing.manageBilling', 'Manage Billing')}
+      {t("billing.manageBilling", "Manage Billing")}
     </Button>
   );
 };
diff --git a/frontend/src/proprietary/components/shared/UpdateSeatsButton.tsx b/frontend/src/proprietary/components/shared/UpdateSeatsButton.tsx
index ddc43350b7..a92c20d979 100644
--- a/frontend/src/proprietary/components/shared/UpdateSeatsButton.tsx
+++ b/frontend/src/proprietary/components/shared/UpdateSeatsButton.tsx
@@ -1,18 +1,14 @@
-import React from 'react';
-import { Button, ButtonProps } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { useUpdateSeats } from '@app/contexts/UpdateSeatsContext';
+import React from "react";
+import { Button, ButtonProps } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { useUpdateSeats } from "@app/contexts/UpdateSeatsContext";
 
-interface UpdateSeatsButtonProps extends Omit<ButtonProps, 'onClick' | 'loading'> {
+interface UpdateSeatsButtonProps extends Omit<ButtonProps, "onClick" | "loading"> {
   onSuccess?: () => void;
   onError?: (error: string) => void;
 }
 
-export const UpdateSeatsButton: React.FC<UpdateSeatsButtonProps> = ({
-  onSuccess,
-  onError,
-  ...buttonProps
-}) => {
+export const UpdateSeatsButton: React.FC<UpdateSeatsButtonProps> = ({ onSuccess, onError, ...buttonProps }) => {
   const { t } = useTranslation();
   const { openUpdateSeats, isLoading } = useUpdateSeats();
 
@@ -24,13 +20,8 @@ export const UpdateSeatsButton: React.FC<UpdateSeatsButtonProps> = ({
   };
 
   return (
-    <Button
-      variant="outline"
-      onClick={handleClick}
-      loading={isLoading}
-      {...buttonProps}
-    >
-      {t('billing.updateSeats', 'Update Seats')}
+    <Button variant="outline" onClick={handleClick} loading={isLoading} {...buttonProps}>
+      {t("billing.updateSeats", "Update Seats")}
     </Button>
   );
 };
diff --git a/frontend/src/proprietary/components/shared/UpdateSeatsModal.tsx b/frontend/src/proprietary/components/shared/UpdateSeatsModal.tsx
index 87827725fe..fbd457b7bf 100644
--- a/frontend/src/proprietary/components/shared/UpdateSeatsModal.tsx
+++ b/frontend/src/proprietary/components/shared/UpdateSeatsModal.tsx
@@ -1,7 +1,7 @@
-import React, { useState, useEffect } from 'react';
-import { Modal, Button, Text, Alert, Loader, Stack, Group, NumberInput } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { Z_INDEX_OVER_CONFIG_MODAL } from '@app/styles/zIndex';
+import React, { useState, useEffect } from "react";
+import { Modal, Button, Text, Alert, Loader, Stack, Group, NumberInput } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { Z_INDEX_OVER_CONFIG_MODAL } from "@app/styles/zIndex";
 
 interface UpdateSeatsModalProps {
   opened: boolean;
@@ -14,7 +14,7 @@ interface UpdateSeatsModalProps {
 }
 
 type UpdateState = {
-  status: 'idle' | 'loading' | 'error';
+  status: "idle" | "loading" | "error";
   error?: string;
 };
 
@@ -28,63 +28,60 @@ const UpdateSeatsModal: React.FC<UpdateSeatsModalProps> = ({
   onUpdateSeats,
 }) => {
   const { t } = useTranslation();
-  const [state, setState] = useState<UpdateState>({ status: 'idle' });
+  const [state, setState] = useState<UpdateState>({ status: "idle" });
   const [newSeatCount, setNewSeatCount] = useState<number>(minimumSeats);
 
   // Reset seat count when modal opens
   useEffect(() => {
     if (opened) {
       setNewSeatCount(minimumSeats);
-      setState({ status: 'idle' });
+      setState({ status: "idle" });
     }
   }, [opened, minimumSeats]);
 
   const handleUpdateSeats = async () => {
     if (!onUpdateSeats) {
       setState({
-        status: 'error',
-        error: 'Update function not provided',
+        status: "error",
+        error: "Update function not provided",
       });
       return;
     }
 
     if (newSeatCount < minimumSeats) {
       setState({
-        status: 'error',
-        error: t(
-          'billing.seatCountTooLow',
-          'Seat count must be at least {{minimum}} (current number of users)',
-          { minimum: minimumSeats }
-        ),
+        status: "error",
+        error: t("billing.seatCountTooLow", "Seat count must be at least {{minimum}} (current number of users)", {
+          minimum: minimumSeats,
+        }),
       });
       return;
     }
 
     if (newSeatCount === currentSeats) {
       setState({
-        status: 'error',
-        error: t('billing.seatCountUnchanged', 'Please select a different seat count'),
+        status: "error",
+        error: t("billing.seatCountUnchanged", "Please select a different seat count"),
       });
       return;
     }
 
     try {
-      setState({ status: 'loading' });
+      setState({ status: "loading" });
 
       // Call the update function (will call manage-billing)
       const portalUrl = await onUpdateSeats(newSeatCount);
 
       // Redirect to Stripe billing portal
-      console.log('Redirecting to Stripe billing portal:', portalUrl);
+      console.log("Redirecting to Stripe billing portal:", portalUrl);
       window.location.href = portalUrl;
 
       // Note: No need to call onSuccess here since we're redirecting
       // The return flow will handle success notification
     } catch (err) {
-      const errorMessage =
-        err instanceof Error ? err.message : 'Failed to update seat count';
+      const errorMessage = err instanceof Error ? err.message : "Failed to update seat count";
       setState({
-        status: 'error',
+        status: "error",
         error: errorMessage,
       });
       onError?.(errorMessage);
@@ -92,18 +89,18 @@ const UpdateSeatsModal: React.FC<UpdateSeatsModalProps> = ({
   };
 
   const handleClose = () => {
-    setState({ status: 'idle' });
+    setState({ status: "idle" });
     setNewSeatCount(currentSeats);
     onClose();
   };
 
   const renderContent = () => {
-    if (state.status === 'loading') {
+    if (state.status === "loading") {
       return (
-        <Stack align="center" justify="center" style={{ padding: '2rem 0' }}>
+        <Stack align="center" justify="center" style={{ padding: "2rem 0" }}>
           <Loader size="lg" />
           <Text size="sm" c="dimmed" mt="md">
-            {t('billing.preparingUpdate', 'Preparing seat update...')}
+            {t("billing.preparingUpdate", "Preparing seat update...")}
           </Text>
         </Stack>
       );
@@ -111,8 +108,8 @@ const UpdateSeatsModal: React.FC<UpdateSeatsModalProps> = ({
 
     return (
       <Stack gap="lg">
-        {state.status === 'error' && (
-          <Alert color="red" title={t('common.error', 'Error')}>
+        {state.status === "error" && (
+          <Alert color="red" title={t("common.error", "Error")}>
             {state.error}
           </Alert>
         )}
@@ -120,7 +117,7 @@ const UpdateSeatsModal: React.FC<UpdateSeatsModalProps> = ({
         <Stack gap="md" mt="md">
           <Group justify="space-between">
             <Text size="sm" fw={500}>
-              {t('billing.currentSeats', 'Current Seats')}:
+              {t("billing.currentSeats", "Current Seats")}:
             </Text>
             <Text size="sm" fw={600}>
               {currentSeats}
@@ -128,53 +125,47 @@ const UpdateSeatsModal: React.FC<UpdateSeatsModalProps> = ({
           </Group>
           <Group justify="space-between">
             <Text size="sm" fw={500}>
-              {t('billing.minimumSeats', 'Minimum Seats')}:
+              {t("billing.minimumSeats", "Minimum Seats")}:
             </Text>
             <Text size="sm" c="dimmed">
-              {minimumSeats} {t('billing.basedOnUsers', '(current users)')}
+              {minimumSeats} {t("billing.basedOnUsers", "(current users)")}
             </Text>
           </Group>
         </Stack>
 
         <NumberInput
-          label={t('billing.newSeatCount', 'New Seat Count')}
-          description={t(
-            'billing.newSeatCountDescription',
-            'Select the number of seats for your enterprise license'
-          )}
+          label={t("billing.newSeatCount", "New Seat Count")}
+          description={t("billing.newSeatCountDescription", "Select the number of seats for your enterprise license")}
           value={newSeatCount}
-          onChange={(value) => setNewSeatCount(typeof value === 'number' ? value : minimumSeats)}
+          onChange={(value) => setNewSeatCount(typeof value === "number" ? value : minimumSeats)}
           min={minimumSeats}
           max={10000}
           step={1}
           size="md"
           styles={{
             input: {
-              fontSize: '1.5rem',
+              fontSize: "1.5rem",
               fontWeight: 500,
-              textAlign: 'center',
+              textAlign: "center",
             },
           }}
         />
 
-        <Alert color="blue" title={t('billing.whatHappensNext', 'What happens next?')}>
+        <Alert color="blue" title={t("billing.whatHappensNext", "What happens next?")}>
           <Text size="sm">
             {t(
-              'billing.stripePortalRedirect',
-              'You will be redirected to Stripe\'s billing portal to review and confirm the seat change. The prorated amount will be calculated automatically.'
+              "billing.stripePortalRedirect",
+              "You will be redirected to Stripe's billing portal to review and confirm the seat change. The prorated amount will be calculated automatically.",
             )}
           </Text>
         </Alert>
 
         <Group justify="flex-end" gap="sm">
           <Button variant="outline" onClick={handleClose}>
-            {t('common.cancel', 'Cancel')}
+            {t("common.cancel", "Cancel")}
           </Button>
-          <Button
-            onClick={handleUpdateSeats}
-            disabled={newSeatCount === currentSeats || newSeatCount < minimumSeats}
-          >
-            {t('billing.updateSeats', 'Update Seats')}
+          <Button onClick={handleUpdateSeats} disabled={newSeatCount === currentSeats || newSeatCount < minimumSeats}>
+            {t("billing.updateSeats", "Update Seats")}
           </Button>
         </Group>
       </Stack>
@@ -187,7 +178,7 @@ const UpdateSeatsModal: React.FC<UpdateSeatsModalProps> = ({
       onClose={handleClose}
       title={
         <Text fw={600} size="lg">
-          {t('billing.updateEnterpriseSeats', 'Update Enterprise Seats')}
+          {t("billing.updateEnterpriseSeats", "Update Enterprise Seats")}
         </Text>
       }
       size="md"
diff --git a/frontend/src/proprietary/components/shared/UpgradeBanner.tsx b/frontend/src/proprietary/components/shared/UpgradeBanner.tsx
index e5d65bd4b5..3b5520acfa 100644
--- a/frontend/src/proprietary/components/shared/UpgradeBanner.tsx
+++ b/frontend/src/proprietary/components/shared/UpgradeBanner.tsx
@@ -1,9 +1,9 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useNavigate, useLocation } from 'react-router-dom';
-import { isAuthRoute } from '@core/constants/routes';
-import { useCheckout } from '@app/contexts/CheckoutContext';
-import { InfoBanner } from '@app/components/shared/InfoBanner';
+import React, { useState, useEffect, useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate, useLocation } from "react-router-dom";
+import { isAuthRoute } from "@core/constants/routes";
+import { useCheckout } from "@app/contexts/CheckoutContext";
+import { InfoBanner } from "@app/components/shared/InfoBanner";
 import {
   SERVER_LICENSE_REQUEST_EVENT,
   type ServerLicenseRequestPayload,
@@ -11,11 +11,11 @@ import {
   type UpgradeBannerTestPayload,
   type UpgradeBannerTestScenario,
   UPGRADE_BANNER_ALERT_EVENT,
-} from '@core/constants/events';
-import { useServerExperience } from '@app/hooks/useServerExperience';
-import { isOnboardingCompleted } from '@core/components/onboarding/orchestrator/onboardingStorage';
+} from "@core/constants/events";
+import { useServerExperience } from "@app/hooks/useServerExperience";
+import { isOnboardingCompleted } from "@core/components/onboarding/orchestrator/onboardingStorage";
 
-const FRIENDLY_LAST_SEEN_KEY = 'upgradeBannerFriendlyLastShownAt';
+const FRIENDLY_LAST_SEEN_KEY = "upgradeBannerFriendlyLastShownAt";
 const WEEK_IN_MS = 7 * 24 * 60 * 60 * 1000;
 const UpgradeBanner: React.FC = () => {
   const { t } = useTranslation();
@@ -40,7 +40,7 @@ const UpgradeBanner: React.FC = () => {
   } = useServerExperience();
   const onboardingComplete = isOnboardingCompleted();
   const [friendlyVisible, setFriendlyVisible] = useState(() => {
-    if (typeof window === 'undefined') return false;
+    if (typeof window === "undefined") return false;
     const lastShownRaw = window.localStorage.getItem(FRIENDLY_LAST_SEEN_KEY);
     if (!lastShownRaw) return false;
     const lastShown = parseInt(lastShownRaw, 10);
@@ -51,7 +51,7 @@ const UpgradeBanner: React.FC = () => {
   const [testScenario, setTestScenario] = useState<UpgradeBannerTestScenario>(null);
 
   useEffect(() => {
-    if (!isDev || typeof window === 'undefined') {
+    if (!isDev || typeof window === "undefined") {
       return;
     }
 
@@ -59,7 +59,7 @@ const UpgradeBanner: React.FC = () => {
       const { detail } = event as CustomEvent<UpgradeBannerTestPayload>;
       setTestScenario(detail?.scenario ?? null);
 
-      if (detail?.scenario === 'friendly') {
+      if (detail?.scenario === "friendly") {
         setFriendlyVisible(true);
       } else if (!detail?.scenario) {
         setFriendlyVisible(false);
@@ -75,82 +75,52 @@ const UpgradeBanner: React.FC = () => {
   const isAdmin = configIsAdmin;
 
   const scenario = isDev ? testScenario : null;
-  const scenarioIsFriendly = scenario === 'friendly';
-  const scenarioIsUrgentUser = scenario === 'urgent-user';
+  const scenarioIsFriendly = scenario === "friendly";
+  const scenarioIsUrgentUser = scenario === "urgent-user";
 
-  const userCountKnown = typeof totalUsers === 'number';
+  const userCountKnown = typeof totalUsers === "number";
   const isUnderLimit = userCountKnown ? totalUsers < freeTierLimit : null;
   const isOverLimit = userCountKnown ? totalUsers > freeTierLimit : overFreeTierLimit;
   const baseTotalUsersLoaded = userCountResolved && !userCountLoading;
 
-  const scenarioProvidesInfo =
-    scenarioKey && scenarioKey !== 'unknown' && scenarioKey !== 'licensed';
-  const derivedIsAdmin = scenarioProvidesInfo
-    ? scenarioKey.includes('admin')
-    : isAdmin;
-  const derivedHasPaidLicense =
-    scenarioKey === 'licensed'
-      ? true
-      : scenarioKey === 'unknown'
-        ? hasPaidLicense
-        : false;
-  const derivedIsUnderLimit = scenarioProvidesInfo
-    ? scenarioKey.includes('under-limit')
-    : isUnderLimit === true;
-  const derivedIsOverLimit = scenarioProvidesInfo
-    ? scenarioKey.includes('over-limit')
-    : isOverLimit === true;
+  const scenarioProvidesInfo = scenarioKey && scenarioKey !== "unknown" && scenarioKey !== "licensed";
+  const derivedIsAdmin = scenarioProvidesInfo ? scenarioKey.includes("admin") : isAdmin;
+  const derivedHasPaidLicense = scenarioKey === "licensed" ? true : scenarioKey === "unknown" ? hasPaidLicense : false;
+  const derivedIsUnderLimit = scenarioProvidesInfo ? scenarioKey.includes("under-limit") : isUnderLimit === true;
+  const derivedIsOverLimit = scenarioProvidesInfo ? scenarioKey.includes("over-limit") : isOverLimit === true;
 
-  const effectiveIsAdmin = scenario
-    ? scenarioIsUrgentUser
-      ? false
-      : true
-    : derivedIsAdmin;
-  const effectiveTotalUsers =
-    scenario != null ? (scenarioIsFriendly ? 3 : 8) : totalUsers;
+  const effectiveIsAdmin = scenario ? (scenarioIsUrgentUser ? false : true) : derivedIsAdmin;
+  const effectiveTotalUsers = scenario != null ? (scenarioIsFriendly ? 3 : 8) : totalUsers;
   const effectiveTotalUsersLoaded = scenario != null ? true : baseTotalUsersLoaded;
   const effectiveHasPaidLicense = scenario != null ? false : derivedHasPaidLicense;
-  const effectiveIsUnderLimit =
-    scenario != null ? scenarioIsFriendly : derivedIsUnderLimit;
-  const effectiveIsOverLimit =
-    scenario != null ? !scenarioIsFriendly : derivedIsOverLimit;
+  const effectiveIsUnderLimit = scenario != null ? scenarioIsFriendly : derivedIsUnderLimit;
+  const effectiveIsOverLimit = scenario != null ? !scenarioIsFriendly : derivedIsOverLimit;
 
   const isDerivedAdmin = scenario
     ? !scenarioIsUrgentUser
-    : scenarioKey === 'login-user-over-limit-no-license'
+    : scenarioKey === "login-user-over-limit-no-license"
       ? false
       : effectiveIsAdmin;
 
   const shouldShowFriendlyBase = Boolean(
-    isDerivedAdmin &&
-      !effectiveHasPaidLicense &&
-      effectiveIsUnderLimit &&
-      effectiveTotalUsersLoaded,
+    isDerivedAdmin && !effectiveHasPaidLicense && effectiveIsUnderLimit && effectiveTotalUsersLoaded,
   );
   const shouldShowUrgentBase = Boolean(
     !effectiveHasPaidLicense &&
-      effectiveTotalUsersLoaded &&
-      (effectiveIsOverLimit || scenarioKey === 'login-user-over-limit-no-license'),
+    effectiveTotalUsersLoaded &&
+    (effectiveIsOverLimit || scenarioKey === "login-user-over-limit-no-license"),
   );
 
   const shouldEvaluateFriendly = scenario
     ? scenarioIsFriendly
-    : Boolean(
-        shouldShowFriendlyBase &&
-          !licenseLoading &&
-          effectiveTotalUsersLoaded &&
-          onboardingComplete,
-      );
+    : Boolean(shouldShowFriendlyBase && !licenseLoading && effectiveTotalUsersLoaded && onboardingComplete);
   // Urgent banner should always show when over-limit
   const shouldEvaluateUrgent = scenario
     ? Boolean(scenario && !scenarioIsFriendly)
-    : Boolean(
-        shouldShowUrgentBase &&
-          !licenseLoading,
-      );
+    : Boolean(shouldShowUrgentBase && !licenseLoading);
 
   useEffect(() => {
-    if (scenario === 'friendly') {
+    if (scenario === "friendly") {
       return;
     }
 
@@ -159,7 +129,7 @@ const UpgradeBanner: React.FC = () => {
       return;
     }
 
-    if (friendlyVisible || typeof window === 'undefined' || userCountLoading) {
+    if (friendlyVisible || typeof window === "undefined" || userCountLoading) {
       return;
     }
 
@@ -171,36 +141,32 @@ const UpgradeBanner: React.FC = () => {
   }, [scenario, shouldEvaluateFriendly, friendlyVisible, userCountLoading]);
 
   useEffect(() => {
-    if (typeof window === 'undefined') {
+    if (typeof window === "undefined") {
       return;
     }
 
     const detail = shouldEvaluateUrgent
       ? {
           active: true,
-          audience: effectiveIsAdmin ? 'admin' : 'user',
+          audience: effectiveIsAdmin ? "admin" : "user",
           totalUsers: effectiveTotalUsers ?? null,
           freeTierLimit,
         }
       : { active: false };
 
-    window.dispatchEvent(
-      new CustomEvent(UPGRADE_BANNER_ALERT_EVENT, { detail }),
-    );
+    window.dispatchEvent(new CustomEvent(UPGRADE_BANNER_ALERT_EVENT, { detail }));
   }, [shouldEvaluateUrgent, effectiveIsAdmin, effectiveTotalUsers, scenario, freeTierLimit]);
 
   useEffect(() => {
     return () => {
-      if (typeof window !== 'undefined') {
-        window.dispatchEvent(
-          new CustomEvent(UPGRADE_BANNER_ALERT_EVENT, { detail: { active: false } }),
-        );
+      if (typeof window !== "undefined") {
+        window.dispatchEvent(new CustomEvent(UPGRADE_BANNER_ALERT_EVENT, { detail: { active: false } }));
       }
     };
   }, []);
 
   const recordFriendlyLastShown = useCallback(() => {
-    if (typeof window === 'undefined') {
+    if (typeof window === "undefined") {
       return;
     }
     window.localStorage.setItem(FRIENDLY_LAST_SEEN_KEY, Date.now().toString());
@@ -211,12 +177,12 @@ const UpgradeBanner: React.FC = () => {
 
     const hideBanner = () => setFriendlyVisible(false);
     const navigateFallback = () => {
-      navigate('/settings/adminPlan');
+      navigate("/settings/adminPlan");
       hideBanner();
     };
 
     try {
-      openCheckout('server', {
+      openCheckout("server", {
         minimumSeats: 1,
         onSuccess: () => {
           hideBanner();
@@ -226,7 +192,7 @@ const UpgradeBanner: React.FC = () => {
         },
       });
     } catch (error) {
-      console.error('[UpgradeBanner] Failed to open checkout, redirecting instead', error);
+      console.error("[UpgradeBanner] Failed to open checkout, redirecting instead", error);
       navigateFallback();
       return;
     }
@@ -241,7 +207,7 @@ const UpgradeBanner: React.FC = () => {
   };
 
   const handleSeeInfo = () => {
-    if (typeof window === 'undefined' || !effectiveIsAdmin) {
+    if (typeof window === "undefined" || !effectiveIsAdmin) {
       return;
     }
 
@@ -255,9 +221,7 @@ const UpgradeBanner: React.FC = () => {
       deferUntilTourComplete: false,
     };
 
-    window.dispatchEvent(
-      new CustomEvent(SERVER_LICENSE_REQUEST_EVENT, { detail }),
-    );
+    window.dispatchEvent(new CustomEvent(SERVER_LICENSE_REQUEST_EVENT, { detail }));
   };
 
   const renderUrgentBanner = () => {
@@ -265,23 +229,17 @@ const UpgradeBanner: React.FC = () => {
       return null;
     }
 
-    const buttonText = effectiveIsAdmin ? t('upgradeBanner.seeInfo', 'See info') : undefined;
+    const buttonText = effectiveIsAdmin ? t("upgradeBanner.seeInfo", "See info") : undefined;
 
     const attentionMessage = effectiveIsAdmin
-      ? t(
-          'upgradeBanner.attentionBodyAdmin',
-          'Review the license requirements to keep this server compliant.',
-        )
-      : t(
-          'upgradeBanner.attentionBody',
-          'Your admin needs to sign in to see more info. Please contact them immediately.',
-        );
+      ? t("upgradeBanner.attentionBodyAdmin", "Review the license requirements to keep this server compliant.")
+      : t("upgradeBanner.attentionBody", "Your admin needs to sign in to see more info. Please contact them immediately.");
 
     return (
       <InfoBanner
         icon="warning-rounded"
         tone="warning"
-        title={t('upgradeBanner.attentionTitle', 'This server needs admin attention')}
+        title={t("upgradeBanner.attentionTitle", "This server needs admin attention")}
         message={attentionMessage}
         buttonText={buttonText}
         buttonIcon="info-rounded"
@@ -298,18 +256,12 @@ const UpgradeBanner: React.FC = () => {
     );
   };
 
-  const suppressForNoLogin =
-    !loginEnabled ||
-    (!loginEnabled && (weeklyActiveUsers ?? Number.POSITIVE_INFINITY) > 5);
+  const suppressForNoLogin = !loginEnabled || (!loginEnabled && (weeklyActiveUsers ?? Number.POSITIVE_INFINITY) > 5);
 
   // Don't show on auth routes or if neither banner type should show
   // Also suppress entirely for no-login servers (treat them as regular users only)
   // and, per request, never surface upgrade messaging there when WAU > 5.
-  if (
-    onAuthRoute ||
-    suppressForNoLogin ||
-    (!friendlyVisible && !shouldEvaluateUrgent)
-  ) {
+  if (onAuthRoute || suppressForNoLogin || (!friendlyVisible && !shouldEvaluateUrgent)) {
     return null;
   }
 
@@ -318,12 +270,9 @@ const UpgradeBanner: React.FC = () => {
       {friendlyVisible && (
         <InfoBanner
           icon="stars-rounded"
-          title={t('upgradeBanner.title', 'Upgrade to Server Plan')}
-          message={t(
-            'upgradeBanner.message',
-            'Get the most out of Stirling PDF with unlimited users and advanced features.',
-          )}
-          buttonText={t('upgradeBanner.upgradeButton', 'Upgrade Now')}
+          title={t("upgradeBanner.title", "Upgrade to Server Plan")}
+          message={t("upgradeBanner.message", "Get the most out of Stirling PDF with unlimited users and advanced features.")}
+          buttonText={t("upgradeBanner.upgradeButton", "Upgrade Now")}
           buttonIcon="upgrade-rounded"
           onButtonClick={handleUpgrade}
           onDismiss={handleFriendlyDismiss}
diff --git a/frontend/src/proprietary/components/shared/UpgradeBannerInitializer.tsx b/frontend/src/proprietary/components/shared/UpgradeBannerInitializer.tsx
index 72e57060bb..84b6ef1958 100644
--- a/frontend/src/proprietary/components/shared/UpgradeBannerInitializer.tsx
+++ b/frontend/src/proprietary/components/shared/UpgradeBannerInitializer.tsx
@@ -1,6 +1,6 @@
-import { useEffect } from 'react';
-import { useBanner } from '@app/contexts/BannerContext';
-import UpgradeBanner from '@app/components/shared/UpgradeBanner';
+import { useEffect } from "react";
+import { useBanner } from "@app/contexts/BannerContext";
+import UpgradeBanner from "@app/components/shared/UpgradeBanner";
 
 export function UpgradeBannerInitializer() {
   const { setBanner } = useBanner();
@@ -14,4 +14,3 @@ export function UpgradeBannerInitializer() {
 
   return null;
 }
-
diff --git a/frontend/src/proprietary/components/shared/config/EnterpriseRequiredBanner.tsx b/frontend/src/proprietary/components/shared/config/EnterpriseRequiredBanner.tsx
index 50623871f8..af0287b54a 100644
--- a/frontend/src/proprietary/components/shared/config/EnterpriseRequiredBanner.tsx
+++ b/frontend/src/proprietary/components/shared/config/EnterpriseRequiredBanner.tsx
@@ -1,6 +1,6 @@
-import { Alert, Text } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import LocalIcon from '@app/components/shared/LocalIcon';
+import { Alert, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import LocalIcon from "@app/components/shared/LocalIcon";
 
 interface EnterpriseRequiredBannerProps {
   show: boolean;
@@ -18,20 +18,20 @@ export default function EnterpriseRequiredBanner({ show, featureName }: Enterpri
   return (
     <Alert
       icon={<LocalIcon icon="workspace-premium-rounded" width={20} height={20} />}
-      title={t('admin.settings.enterpriseRequired.title', 'Enterprise License Required')}
+      title={t("admin.settings.enterpriseRequired.title", "Enterprise License Required")}
       color="yellow"
       variant="light"
       styles={{
         root: {
-          borderLeft: '4px solid var(--mantine-color-yellow-6)'
-        }
+          borderLeft: "4px solid var(--mantine-color-yellow-6)",
+        },
       }}
     >
       <Text size="sm">
         {t(
-          'admin.settings.enterpriseRequired.message',
-          'An Enterprise license is required to access {{featureName}}. You are viewing demo data for reference.',
-          { featureName }
+          "admin.settings.enterpriseRequired.message",
+          "An Enterprise license is required to access {{featureName}}. You are viewing demo data for reference.",
+          { featureName },
         )}
       </Text>
     </Alert>
diff --git a/frontend/src/proprietary/components/shared/config/OverviewHeader.tsx b/frontend/src/proprietary/components/shared/config/OverviewHeader.tsx
index 2361fce970..603ca78e26 100644
--- a/frontend/src/proprietary/components/shared/config/OverviewHeader.tsx
+++ b/frontend/src/proprietary/components/shared/config/OverviewHeader.tsx
@@ -1,7 +1,7 @@
-import { Text, Button } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { useAuth } from '@app/auth/UseSession';
-import { useNavigate } from 'react-router-dom';
+import { Text, Button } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { useAuth } from "@app/auth/UseSession";
+import { useNavigate } from "react-router-dom";
 
 export function OverviewHeader() {
   const { t } = useTranslation();
@@ -11,19 +11,21 @@ export function OverviewHeader() {
   const handleLogout = async () => {
     try {
       await signOut();
-      navigate('/login');
+      navigate("/login");
     } catch (error) {
-      console.error('Logout error:', error);
+      console.error("Logout error:", error);
     }
   };
 
   return (
     <div>
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '0.5rem' }}>
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: "0.5rem" }}>
         <div>
-          <Text fw={600} size="lg">{t('config.overview.title', 'Application Configuration')}</Text>
+          <Text fw={600} size="lg">
+            {t("config.overview.title", "Application Configuration")}
+          </Text>
           <Text size="sm" c="dimmed">
-            {t('config.overview.description', 'Current application settings and configuration details.')}
+            {t("config.overview.description", "Current application settings and configuration details.")}
           </Text>
           {user?.email && (
             <Text size="xs" c="dimmed" mt="0.25rem">
diff --git a/frontend/src/proprietary/components/shared/config/configNavSections.tsx b/frontend/src/proprietary/components/shared/config/configNavSections.tsx
index 6738c8bd00..df5745aa56 100644
--- a/frontend/src/proprietary/components/shared/config/configNavSections.tsx
+++ b/frontend/src/proprietary/components/shared/config/configNavSections.tsx
@@ -1,24 +1,28 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { useConfigNavSections as useCoreConfigNavSections, createConfigNavSections as createCoreConfigNavSections, ConfigNavSection } from '@core/components/shared/config/configNavSections';
-import PeopleSection from '@app/components/shared/config/configSections/PeopleSection';
-import TeamsSection from '@app/components/shared/config/configSections/TeamsSection';
-import AdminGeneralSection from '@app/components/shared/config/configSections/AdminGeneralSection';
-import AdminSecuritySection from '@app/components/shared/config/configSections/AdminSecuritySection';
-import AdminConnectionsSection from '@app/components/shared/config/configSections/AdminConnectionsSection';
-import AdminPrivacySection from '@app/components/shared/config/configSections/AdminPrivacySection';
-import AdminDatabaseSection from '@app/components/shared/config/configSections/AdminDatabaseSection';
-import AdminAdvancedSection from '@app/components/shared/config/configSections/AdminAdvancedSection';
-import AdminLegalSection from '@app/components/shared/config/configSections/AdminLegalSection';
-import AdminPlanSection from '@app/components/shared/config/configSections/AdminPlanSection';
-import AdminFeaturesSection from '@app/components/shared/config/configSections/AdminFeaturesSection';
-import AdminEndpointsSection from '@app/components/shared/config/configSections/AdminEndpointsSection';
-import AdminAuditSection from '@app/components/shared/config/configSections/AdminAuditSection';
-import AdminUsageSection from '@app/components/shared/config/configSections/AdminUsageSection';
-import AdminStorageSharingSection from '@app/components/shared/config/configSections/AdminStorageSharingSection';
-import ApiKeys from '@app/components/shared/config/configSections/ApiKeys';
-import AccountSection from '@app/components/shared/config/configSections/AccountSection';
-import GeneralSection from '@app/components/shared/config/configSections/GeneralSection';
+import React from "react";
+import { useTranslation } from "react-i18next";
+import {
+  useConfigNavSections as useCoreConfigNavSections,
+  createConfigNavSections as createCoreConfigNavSections,
+  ConfigNavSection,
+} from "@core/components/shared/config/configNavSections";
+import PeopleSection from "@app/components/shared/config/configSections/PeopleSection";
+import TeamsSection from "@app/components/shared/config/configSections/TeamsSection";
+import AdminGeneralSection from "@app/components/shared/config/configSections/AdminGeneralSection";
+import AdminSecuritySection from "@app/components/shared/config/configSections/AdminSecuritySection";
+import AdminConnectionsSection from "@app/components/shared/config/configSections/AdminConnectionsSection";
+import AdminPrivacySection from "@app/components/shared/config/configSections/AdminPrivacySection";
+import AdminDatabaseSection from "@app/components/shared/config/configSections/AdminDatabaseSection";
+import AdminAdvancedSection from "@app/components/shared/config/configSections/AdminAdvancedSection";
+import AdminLegalSection from "@app/components/shared/config/configSections/AdminLegalSection";
+import AdminPlanSection from "@app/components/shared/config/configSections/AdminPlanSection";
+import AdminFeaturesSection from "@app/components/shared/config/configSections/AdminFeaturesSection";
+import AdminEndpointsSection from "@app/components/shared/config/configSections/AdminEndpointsSection";
+import AdminAuditSection from "@app/components/shared/config/configSections/AdminAuditSection";
+import AdminUsageSection from "@app/components/shared/config/configSections/AdminUsageSection";
+import AdminStorageSharingSection from "@app/components/shared/config/configSections/AdminStorageSharingSection";
+import ApiKeys from "@app/components/shared/config/configSections/ApiKeys";
+import AccountSection from "@app/components/shared/config/configSections/AccountSection";
+import GeneralSection from "@app/components/shared/config/configSections/GeneralSection";
 
 /**
  * Hook version of proprietary config nav sections with proper i18n support
@@ -26,7 +30,7 @@ import GeneralSection from '@app/components/shared/config/configSections/General
 export const useConfigNavSections = (
   isAdmin: boolean = false,
   runningEE: boolean = false,
-  loginEnabled: boolean = false
+  loginEnabled: boolean = false,
 ): ConfigNavSection[] => {
   const { t } = useTranslation();
 
@@ -34,18 +38,18 @@ export const useConfigNavSections = (
   const sections = useCoreConfigNavSections(isAdmin, runningEE, loginEnabled);
 
   // Add account management under Preferences
-  const preferencesSection = sections.find((section) => section.items.some((item) => item.key === 'general'));
+  const preferencesSection = sections.find((section) => section.items.some((item) => item.key === "general"));
   if (preferencesSection) {
     preferencesSection.items = preferencesSection.items.map((item) =>
-      item.key === 'general' ? { ...item, component: <GeneralSection /> } : item
+      item.key === "general" ? { ...item, component: <GeneralSection /> } : item,
     );
 
     if (loginEnabled) {
       preferencesSection.items.push({
-        key: 'account',
-        label: t('account.accountSettings', 'Account'),
-        icon: 'person-rounded',
-        component: <AccountSection />
+        key: "account",
+        label: t("account.accountSettings", "Account"),
+        icon: "person-rounded",
+        component: <AccountSection />,
       });
     }
   }
@@ -53,162 +57,162 @@ export const useConfigNavSections = (
   // Add Admin sections if user is admin OR if login is disabled (but mark as disabled)
   if (isAdmin || !loginEnabled) {
     const requiresLogin = !loginEnabled;
-    const enableLoginTooltip = t('settings.tooltips.enableLoginFirst', 'Enable login mode first');
-    const requiresEnterpriseTooltip = t('settings.tooltips.requiresEnterprise', 'Requires Enterprise license');
+    const enableLoginTooltip = t("settings.tooltips.enableLoginFirst", "Enable login mode first");
+    const requiresEnterpriseTooltip = t("settings.tooltips.requiresEnterprise", "Requires Enterprise license");
 
     // Workspace
     sections.push({
-      title: t('settings.workspace.title', 'Workspace'),
+      title: t("settings.workspace.title", "Workspace"),
       items: [
         {
-          key: 'people',
-          label: t('settings.workspace.people', 'People'),
-          icon: 'group-rounded',
+          key: "people",
+          label: t("settings.workspace.people", "People"),
+          icon: "group-rounded",
           component: <PeopleSection />,
           disabled: requiresLogin,
-          disabledTooltip: requiresLogin ? enableLoginTooltip : undefined
+          disabledTooltip: requiresLogin ? enableLoginTooltip : undefined,
         },
         {
-          key: 'teams',
-          label: t('settings.workspace.teams', 'Teams'),
-          icon: 'groups-rounded',
+          key: "teams",
+          label: t("settings.workspace.teams", "Teams"),
+          icon: "groups-rounded",
           component: <TeamsSection />,
           disabled: requiresLogin,
-          disabledTooltip: requiresLogin ? enableLoginTooltip : undefined
+          disabledTooltip: requiresLogin ? enableLoginTooltip : undefined,
         },
       ],
     });
 
     // Configuration
     sections.push({
-      title: t('settings.configuration.title', 'Configuration'),
+      title: t("settings.configuration.title", "Configuration"),
       items: [
         {
-          key: 'adminGeneral',
-          label: t('settings.configuration.systemSettings', 'System Settings'),
-          icon: 'settings-rounded',
+          key: "adminGeneral",
+          label: t("settings.configuration.systemSettings", "System Settings"),
+          icon: "settings-rounded",
           component: <AdminGeneralSection />,
           disabled: requiresLogin,
-          disabledTooltip: requiresLogin ? enableLoginTooltip : undefined
+          disabledTooltip: requiresLogin ? enableLoginTooltip : undefined,
         },
         {
-          key: 'adminFeatures',
-          label: t('settings.configuration.features', 'Features'),
-          icon: 'extension-rounded',
+          key: "adminFeatures",
+          label: t("settings.configuration.features", "Features"),
+          icon: "extension-rounded",
           component: <AdminFeaturesSection />,
           disabled: requiresLogin,
-          disabledTooltip: requiresLogin ? enableLoginTooltip : undefined
+          disabledTooltip: requiresLogin ? enableLoginTooltip : undefined,
         },
         {
-          key: 'adminStorageSharing',
-          label: t('settings.configuration.storageSharing', 'File Storage & Sharing'),
-          icon: 'storage-rounded',
+          key: "adminStorageSharing",
+          label: t("settings.configuration.storageSharing", "File Storage & Sharing"),
+          icon: "storage-rounded",
           component: <AdminStorageSharingSection />,
           disabled: requiresLogin,
           disabledTooltip: requiresLogin ? enableLoginTooltip : undefined,
-          badge: t('toolPanel.alpha', 'Alpha'),
-          badgeColor: 'orange',
+          badge: t("toolPanel.alpha", "Alpha"),
+          badgeColor: "orange",
         },
         {
-          key: 'adminEndpoints',
-          label: t('settings.configuration.endpoints', 'Endpoints'),
-          icon: 'api-rounded',
+          key: "adminEndpoints",
+          label: t("settings.configuration.endpoints", "Endpoints"),
+          icon: "api-rounded",
           component: <AdminEndpointsSection />,
           disabled: requiresLogin,
-          disabledTooltip: requiresLogin ? enableLoginTooltip : undefined
+          disabledTooltip: requiresLogin ? enableLoginTooltip : undefined,
         },
         {
-          key: 'adminDatabase',
-          label: t('settings.configuration.database', 'Database'),
-          icon: 'storage-rounded',
+          key: "adminDatabase",
+          label: t("settings.configuration.database", "Database"),
+          icon: "storage-rounded",
           component: <AdminDatabaseSection />,
           disabled: requiresLogin,
-          disabledTooltip: requiresLogin ? enableLoginTooltip : undefined
+          disabledTooltip: requiresLogin ? enableLoginTooltip : undefined,
         },
         {
-          key: 'adminAdvanced',
-          label: t('settings.configuration.advanced', 'Advanced'),
-          icon: 'tune-rounded',
+          key: "adminAdvanced",
+          label: t("settings.configuration.advanced", "Advanced"),
+          icon: "tune-rounded",
           component: <AdminAdvancedSection />,
           disabled: requiresLogin,
-          disabledTooltip: requiresLogin ? enableLoginTooltip : undefined
+          disabledTooltip: requiresLogin ? enableLoginTooltip : undefined,
         },
       ],
     });
 
     // Security & Authentication
     sections.push({
-      title: t('settings.securityAuth.title', 'Security & Authentication'),
+      title: t("settings.securityAuth.title", "Security & Authentication"),
       items: [
         {
-          key: 'adminSecurity',
-          label: t('settings.securityAuth.security', 'Security'),
-          icon: 'shield-rounded',
+          key: "adminSecurity",
+          label: t("settings.securityAuth.security", "Security"),
+          icon: "shield-rounded",
           component: <AdminSecuritySection />,
           disabled: requiresLogin,
-          disabledTooltip: requiresLogin ? enableLoginTooltip : undefined
+          disabledTooltip: requiresLogin ? enableLoginTooltip : undefined,
         },
         {
-          key: 'adminConnections',
-          label: t('settings.securityAuth.connections', 'Connections'),
-          icon: 'link-rounded',
+          key: "adminConnections",
+          label: t("settings.securityAuth.connections", "Connections"),
+          icon: "link-rounded",
           component: <AdminConnectionsSection />,
           disabled: requiresLogin,
-          disabledTooltip: requiresLogin ? enableLoginTooltip : undefined
+          disabledTooltip: requiresLogin ? enableLoginTooltip : undefined,
         },
       ],
     });
 
     // Licensing & Analytics
     sections.push({
-      title: t('settings.licensingAnalytics.title', 'Licensing & Analytics'),
+      title: t("settings.licensingAnalytics.title", "Licensing & Analytics"),
       items: [
         {
-          key: 'adminPlan',
-          label: t('settings.licensingAnalytics.plan', 'Plan'),
-          icon: 'star-rounded',
+          key: "adminPlan",
+          label: t("settings.licensingAnalytics.plan", "Plan"),
+          icon: "star-rounded",
           component: <AdminPlanSection />,
           disabled: requiresLogin,
-          disabledTooltip: requiresLogin ? enableLoginTooltip : undefined
+          disabledTooltip: requiresLogin ? enableLoginTooltip : undefined,
         },
         {
-          key: 'adminAudit',
-          label: t('settings.licensingAnalytics.audit', 'Audit'),
-          icon: 'fact-check-rounded',
+          key: "adminAudit",
+          label: t("settings.licensingAnalytics.audit", "Audit"),
+          icon: "fact-check-rounded",
           component: <AdminAuditSection />,
           disabled: !runningEE || requiresLogin,
-          disabledTooltip: requiresLogin ? enableLoginTooltip : requiresEnterpriseTooltip
+          disabledTooltip: requiresLogin ? enableLoginTooltip : requiresEnterpriseTooltip,
         },
         {
-          key: 'adminUsage',
-          label: t('settings.licensingAnalytics.usageAnalytics', 'Usage Analytics'),
-          icon: 'analytics-rounded',
+          key: "adminUsage",
+          label: t("settings.licensingAnalytics.usageAnalytics", "Usage Analytics"),
+          icon: "analytics-rounded",
           component: <AdminUsageSection />,
           disabled: !runningEE || requiresLogin,
-          disabledTooltip: requiresLogin ? enableLoginTooltip : requiresEnterpriseTooltip
+          disabledTooltip: requiresLogin ? enableLoginTooltip : requiresEnterpriseTooltip,
         },
       ],
     });
 
     // Policies & Privacy
     sections.push({
-      title: t('settings.policiesPrivacy.title', 'Policies & Privacy'),
+      title: t("settings.policiesPrivacy.title", "Policies & Privacy"),
       items: [
         {
-          key: 'adminLegal',
-          label: t('settings.policiesPrivacy.legal', 'Legal'),
-          icon: 'gavel-rounded',
+          key: "adminLegal",
+          label: t("settings.policiesPrivacy.legal", "Legal"),
+          icon: "gavel-rounded",
           component: <AdminLegalSection />,
           disabled: requiresLogin,
-          disabledTooltip: requiresLogin ? enableLoginTooltip : undefined
+          disabledTooltip: requiresLogin ? enableLoginTooltip : undefined,
         },
         {
-          key: 'adminPrivacy',
-          label: t('settings.policiesPrivacy.privacy', 'Privacy'),
-          icon: 'visibility-rounded',
+          key: "adminPrivacy",
+          label: t("settings.policiesPrivacy.privacy", "Privacy"),
+          icon: "visibility-rounded",
           component: <AdminPrivacySection />,
           disabled: requiresLogin,
-          disabledTooltip: requiresLogin ? enableLoginTooltip : undefined
+          disabledTooltip: requiresLogin ? enableLoginTooltip : undefined,
         },
       ],
     });
@@ -217,13 +221,13 @@ export const useConfigNavSections = (
   // Add Developer section if login is enabled
   if (loginEnabled) {
     const developerSection: ConfigNavSection = {
-      title: t('settings.developer.title', 'Developer'),
+      title: t("settings.developer.title", "Developer"),
       items: [
         {
-          key: 'api-keys',
-          label: t('settings.developer.apiKeys', 'API Keys'),
-          icon: 'key-rounded',
-          component: <ApiKeys />
+          key: "api-keys",
+          label: t("settings.developer.apiKeys", "API Keys"),
+          icon: "key-rounded",
+          component: <ApiKeys />,
         },
       ],
     };
@@ -243,26 +247,26 @@ export const useConfigNavSections = (
 export const createConfigNavSections = (
   isAdmin: boolean = false,
   runningEE: boolean = false,
-  loginEnabled: boolean = false
+  loginEnabled: boolean = false,
 ): ConfigNavSection[] => {
-  console.warn('createConfigNavSections is deprecated. Use useConfigNavSections hook instead for proper i18n support.');
+  console.warn("createConfigNavSections is deprecated. Use useConfigNavSections hook instead for proper i18n support.");
 
   // Get the core sections (just Preferences)
   const sections = createCoreConfigNavSections(isAdmin, runningEE, loginEnabled);
 
   // Add account management under Preferences
-  const preferencesSection = sections.find((section) => section.items.some((item) => item.key === 'general'));
+  const preferencesSection = sections.find((section) => section.items.some((item) => item.key === "general"));
   if (preferencesSection) {
     preferencesSection.items = preferencesSection.items.map((item) =>
-      item.key === 'general' ? { ...item, component: <GeneralSection /> } : item
+      item.key === "general" ? { ...item, component: <GeneralSection /> } : item,
     );
 
     if (loginEnabled) {
       preferencesSection.items.push({
-        key: 'account',
-        label: 'Account',
-        icon: 'person-rounded',
-        component: <AccountSection />
+        key: "account",
+        label: "Account",
+        icon: "person-rounded",
+        component: <AccountSection />,
       });
     }
   }
@@ -273,147 +277,147 @@ export const createConfigNavSections = (
 
     // Workspace
     sections.push({
-      title: 'Workspace',
+      title: "Workspace",
       items: [
         {
-          key: 'people',
-          label: 'People',
-          icon: 'group-rounded',
+          key: "people",
+          label: "People",
+          icon: "group-rounded",
           component: <PeopleSection />,
           disabled: requiresLogin,
-          disabledTooltip: requiresLogin ? 'Enable login mode first' : undefined
+          disabledTooltip: requiresLogin ? "Enable login mode first" : undefined,
         },
         {
-          key: 'teams',
-          label: 'Teams',
-          icon: 'groups-rounded',
+          key: "teams",
+          label: "Teams",
+          icon: "groups-rounded",
           component: <TeamsSection />,
           disabled: requiresLogin,
-          disabledTooltip: requiresLogin ? 'Enable login mode first' : undefined
+          disabledTooltip: requiresLogin ? "Enable login mode first" : undefined,
         },
       ],
     });
 
     // Configuration
     sections.push({
-      title: 'Configuration',
+      title: "Configuration",
       items: [
         {
-          key: 'adminGeneral',
-          label: 'System Settings',
-          icon: 'settings-rounded',
+          key: "adminGeneral",
+          label: "System Settings",
+          icon: "settings-rounded",
           component: <AdminGeneralSection />,
           disabled: requiresLogin,
-          disabledTooltip: requiresLogin ? 'Enable login mode first' : undefined
+          disabledTooltip: requiresLogin ? "Enable login mode first" : undefined,
         },
         {
-          key: 'adminFeatures',
-          label: 'Features',
-          icon: 'extension-rounded',
+          key: "adminFeatures",
+          label: "Features",
+          icon: "extension-rounded",
           component: <AdminFeaturesSection />,
           disabled: requiresLogin,
-          disabledTooltip: requiresLogin ? 'Enable login mode first' : undefined
+          disabledTooltip: requiresLogin ? "Enable login mode first" : undefined,
         },
         {
-          key: 'adminEndpoints',
-          label: 'Endpoints',
-          icon: 'api-rounded',
+          key: "adminEndpoints",
+          label: "Endpoints",
+          icon: "api-rounded",
           component: <AdminEndpointsSection />,
           disabled: requiresLogin,
-          disabledTooltip: requiresLogin ? 'Enable login mode first' : undefined
+          disabledTooltip: requiresLogin ? "Enable login mode first" : undefined,
         },
         {
-          key: 'adminDatabase',
-          label: 'Database',
-          icon: 'storage-rounded',
+          key: "adminDatabase",
+          label: "Database",
+          icon: "storage-rounded",
           component: <AdminDatabaseSection />,
           disabled: requiresLogin,
-          disabledTooltip: requiresLogin ? 'Enable login mode first' : undefined
+          disabledTooltip: requiresLogin ? "Enable login mode first" : undefined,
         },
         {
-          key: 'adminAdvanced',
-          label: 'Advanced',
-          icon: 'tune-rounded',
+          key: "adminAdvanced",
+          label: "Advanced",
+          icon: "tune-rounded",
           component: <AdminAdvancedSection />,
           disabled: requiresLogin,
-          disabledTooltip: requiresLogin ? 'Enable login mode first' : undefined
+          disabledTooltip: requiresLogin ? "Enable login mode first" : undefined,
         },
       ],
     });
 
     // Security & Authentication
     sections.push({
-      title: 'Security & Authentication',
+      title: "Security & Authentication",
       items: [
         {
-          key: 'adminSecurity',
-          label: 'Security',
-          icon: 'shield-rounded',
+          key: "adminSecurity",
+          label: "Security",
+          icon: "shield-rounded",
           component: <AdminSecuritySection />,
           disabled: requiresLogin,
-          disabledTooltip: requiresLogin ? 'Enable login mode first' : undefined
+          disabledTooltip: requiresLogin ? "Enable login mode first" : undefined,
         },
         {
-          key: 'adminConnections',
-          label: 'Connections',
-          icon: 'link-rounded',
+          key: "adminConnections",
+          label: "Connections",
+          icon: "link-rounded",
           component: <AdminConnectionsSection />,
           disabled: requiresLogin,
-          disabledTooltip: requiresLogin ? 'Enable login mode first' : undefined
+          disabledTooltip: requiresLogin ? "Enable login mode first" : undefined,
         },
       ],
     });
 
     // Licensing & Analytics
     sections.push({
-      title: 'Licensing & Analytics',
+      title: "Licensing & Analytics",
       items: [
         {
-          key: 'adminPlan',
-          label: 'Plan',
-          icon: 'star-rounded',
+          key: "adminPlan",
+          label: "Plan",
+          icon: "star-rounded",
           component: <AdminPlanSection />,
           disabled: requiresLogin,
-          disabledTooltip: requiresLogin ? 'Enable login mode first' : undefined
+          disabledTooltip: requiresLogin ? "Enable login mode first" : undefined,
         },
         {
-          key: 'adminAudit',
-          label: 'Audit',
-          icon: 'fact-check-rounded',
+          key: "adminAudit",
+          label: "Audit",
+          icon: "fact-check-rounded",
           component: <AdminAuditSection />,
           disabled: !runningEE || requiresLogin,
-          disabledTooltip: requiresLogin ? 'Enable login mode first' : 'Requires Enterprise license'
+          disabledTooltip: requiresLogin ? "Enable login mode first" : "Requires Enterprise license",
         },
         {
-          key: 'adminUsage',
-          label: 'Usage Analytics',
-          icon: 'analytics-rounded',
+          key: "adminUsage",
+          label: "Usage Analytics",
+          icon: "analytics-rounded",
           component: <AdminUsageSection />,
           disabled: !runningEE || requiresLogin,
-          disabledTooltip: requiresLogin ? 'Enable login mode first' : 'Requires Enterprise license'
+          disabledTooltip: requiresLogin ? "Enable login mode first" : "Requires Enterprise license",
         },
       ],
     });
 
     // Policies & Privacy
     sections.push({
-      title: 'Policies & Privacy',
+      title: "Policies & Privacy",
       items: [
         {
-          key: 'adminLegal',
-          label: 'Legal',
-          icon: 'gavel-rounded',
+          key: "adminLegal",
+          label: "Legal",
+          icon: "gavel-rounded",
           component: <AdminLegalSection />,
           disabled: requiresLogin,
-          disabledTooltip: requiresLogin ? 'Enable login mode first' : undefined
+          disabledTooltip: requiresLogin ? "Enable login mode first" : undefined,
         },
         {
-          key: 'adminPrivacy',
-          label: 'Privacy',
-          icon: 'visibility-rounded',
+          key: "adminPrivacy",
+          label: "Privacy",
+          icon: "visibility-rounded",
           component: <AdminPrivacySection />,
           disabled: requiresLogin,
-          disabledTooltip: requiresLogin ? 'Enable login mode first' : undefined
+          disabledTooltip: requiresLogin ? "Enable login mode first" : undefined,
         },
       ],
     });
@@ -422,13 +426,13 @@ export const createConfigNavSections = (
   // Add Developer section if login is enabled
   if (loginEnabled) {
     const developerSection: ConfigNavSection = {
-      title: 'Developer',
+      title: "Developer",
       items: [
         {
-          key: 'api-keys',
-          label: 'API Keys',
-          icon: 'key-rounded',
-          component: <ApiKeys />
+          key: "api-keys",
+          label: "API Keys",
+          icon: "key-rounded",
+          component: <ApiKeys />,
         },
       ],
     };
@@ -442,4 +446,4 @@ export const createConfigNavSections = (
 };
 
 // Re-export types for convenience
-export type { ConfigNavSection, ConfigNavItem, ConfigColors } from '@core/components/shared/config/configNavSections';
+export type { ConfigNavSection, ConfigNavItem, ConfigColors } from "@core/components/shared/config/configNavSections";
diff --git a/frontend/src/proprietary/components/shared/config/configSections/AccountSection.tsx b/frontend/src/proprietary/components/shared/config/configSections/AccountSection.tsx
index a5fc29e1ac..a56698420b 100644
--- a/frontend/src/proprietary/components/shared/config/configSections/AccountSection.tsx
+++ b/frontend/src/proprietary/components/shared/config/configSections/AccountSection.tsx
@@ -1,15 +1,15 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Alert, Button, Box, Group, Modal, Paper, PasswordInput, Stack, Text, TextInput } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { alert as showToast } from '@app/components/toast';
-import { useAuth } from '@app/auth/UseSession';
-import { accountService } from '@app/services/accountService';
-import { Z_INDEX_OVER_CONFIG_MODAL } from '@app/styles/zIndex';
-import { QRCodeSVG } from 'qrcode.react';
-import { useAccountLogout } from '@app/extensions/accountLogout';
-import { BASE_PATH } from '@app/constants/app';
-import { MfaSetupResponse } from '@app/responses/Mfa/MfaResponse';
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { Alert, Button, Box, Group, Modal, Paper, PasswordInput, Stack, Text, TextInput } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { alert as showToast } from "@app/components/toast";
+import { useAuth } from "@app/auth/UseSession";
+import { accountService } from "@app/services/accountService";
+import { Z_INDEX_OVER_CONFIG_MODAL } from "@app/styles/zIndex";
+import { QRCodeSVG } from "qrcode.react";
+import { useAccountLogout } from "@app/extensions/accountLogout";
+import { BASE_PATH } from "@app/constants/app";
+import { MfaSetupResponse } from "@app/responses/Mfa/MfaResponse";
 
 const AccountSection: React.FC = () => {
   const { t } = useTranslation();
@@ -18,26 +18,26 @@ const AccountSection: React.FC = () => {
   const [passwordModalOpen, setPasswordModalOpen] = useState(false);
   const [usernameModalOpen, setUsernameModalOpen] = useState(false);
 
-  const [currentPassword, setCurrentPassword] = useState('');
-  const [newPassword, setNewPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
-  const [passwordError, setPasswordError] = useState('');
+  const [currentPassword, setCurrentPassword] = useState("");
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [passwordError, setPasswordError] = useState("");
   const [passwordSubmitting, setPasswordSubmitting] = useState(false);
 
-  const [currentPasswordForUsername, setCurrentPasswordForUsername] = useState('');
-  const [newUsername, setNewUsername] = useState('');
-  const [usernameError, setUsernameError] = useState('');
+  const [currentPasswordForUsername, setCurrentPasswordForUsername] = useState("");
+  const [newUsername, setNewUsername] = useState("");
+  const [usernameError, setUsernameError] = useState("");
   const [usernameSubmitting, setUsernameSubmitting] = useState(false);
   const [mfaEnabled, setMfaEnabled] = useState(false);
   const [mfaSetupModalOpen, setMfaSetupModalOpen] = useState(false);
   const [mfaDisableModalOpen, setMfaDisableModalOpen] = useState(false);
   const [mfaSetupData, setMfaSetupData] = useState<MfaSetupResponse | null>(null);
-  const [mfaSetupCode, setMfaSetupCode] = useState('');
-  const [mfaDisableCode, setMfaDisableCode] = useState('');
-  const [mfaError, setMfaError] = useState('');
+  const [mfaSetupCode, setMfaSetupCode] = useState("");
+  const [mfaDisableCode, setMfaDisableCode] = useState("");
+  const [mfaError, setMfaError] = useState("");
   const [mfaLoading, setMfaLoading] = useState(false);
   const [changeButtonDisabled, setChangeButtonDisabled] = useState(false);
-  const normalizeMfaCode = useCallback((value: string) => value.replace(/\D/g, '').slice(0, 6), []);
+  const normalizeMfaCode = useCallback((value: string) => value.replace(/\D/g, "").slice(0, 6), []);
   const qrLogoSrc = `${BASE_PATH}/modern-logo/StirlingPDFLogoNoTextDark.svg`;
 
   const authTypeFromMetadata = useMemo(() => {
@@ -46,15 +46,15 @@ const AccountSection: React.FC = () => {
   }, [user?.app_metadata]);
 
   const normalizedAuthType = useMemo(
-    () => (user?.authenticationType ?? authTypeFromMetadata ?? '').toLowerCase(),
-    [authTypeFromMetadata, user?.authenticationType]
+    () => (user?.authenticationType ?? authTypeFromMetadata ?? "").toLowerCase(),
+    [authTypeFromMetadata, user?.authenticationType],
   );
-  const isSsoUser = useMemo(() => ['sso', 'oauth2', 'saml2'].includes(normalizedAuthType), [normalizedAuthType]);
+  const isSsoUser = useMemo(() => ["sso", "oauth2", "saml2"].includes(normalizedAuthType), [normalizedAuthType]);
 
-  const userIdentifier = useMemo(() => user?.email || user?.username || '', [user?.email, user?.username]);
+  const userIdentifier = useMemo(() => user?.email || user?.username || "", [user?.email, user?.username]);
 
   const redirectToLogin = useCallback(() => {
-    window.location.assign('/login');
+    window.location.assign("/login");
   }, []);
 
   const handleLogout = useCallback(async () => {
@@ -65,41 +65,44 @@ const AccountSection: React.FC = () => {
     event.preventDefault();
 
     if (isSsoUser) {
-      setPasswordError(t('settings.security.password.ssoDisabled', 'Password changes are managed by your identity provider.'));
+      setPasswordError(t("settings.security.password.ssoDisabled", "Password changes are managed by your identity provider."));
       return;
     }
 
     if (!currentPassword || !newPassword || !confirmPassword) {
-      setPasswordError(t('settings.security.password.required', 'All fields are required.'));
+      setPasswordError(t("settings.security.password.required", "All fields are required."));
       return;
     }
 
     if (newPassword !== confirmPassword) {
-      setPasswordError(t('settings.security.password.mismatch', 'New passwords do not match.'));
+      setPasswordError(t("settings.security.password.mismatch", "New passwords do not match."));
       return;
     }
 
     try {
       setPasswordSubmitting(true);
-      setPasswordError('');
+      setPasswordError("");
 
       await accountService.changePassword(currentPassword, newPassword);
 
       showToast({
-        alertType: 'success',
-        title: t('settings.security.password.success', 'Password updated successfully. Please sign in again.'),
+        alertType: "success",
+        title: t("settings.security.password.success", "Password updated successfully. Please sign in again."),
       });
 
-      setCurrentPassword('');
-      setNewPassword('');
-      setConfirmPassword('');
+      setCurrentPassword("");
+      setNewPassword("");
+      setConfirmPassword("");
       setPasswordModalOpen(false);
       await handleLogout();
     } catch (err) {
       const axiosError = err as { response?: { data?: { message?: string } } };
       setPasswordError(
         axiosError.response?.data?.message ||
-          t('settings.security.password.error', 'Unable to update password. Please verify your current password and try again.')
+          t(
+            "settings.security.password.error",
+            "Unable to update password. Please verify your current password and try again.",
+          ),
       );
     } finally {
       setPasswordSubmitting(false);
@@ -110,13 +113,16 @@ const AccountSection: React.FC = () => {
     const fetchAccountData = async () => {
       setChangeButtonDisabled(true);
       try {
-        const data = await accountService.getAccountData().then((data) => data).finally(() => {
-          setChangeButtonDisabled(false);
-        });
+        const data = await accountService
+          .getAccountData()
+          .then((data) => data)
+          .finally(() => {
+            setChangeButtonDisabled(false);
+          });
         setMfaEnabled(data.mfaEnabled ?? false);
       } catch {
         // ignore fetch errors for account data
-        console.warn('Failed to fetch account data');
+        console.warn("Failed to fetch account data");
       } finally {
         setChangeButtonDisabled(false);
       }
@@ -127,8 +133,8 @@ const AccountSection: React.FC = () => {
   const handleStartMfaSetup = useCallback(async () => {
     try {
       setMfaLoading(true);
-      setMfaError('');
-      setMfaSetupCode('');
+      setMfaError("");
+      setMfaSetupCode("");
       const data = await accountService.requestMfaSetup();
       setMfaSetupData(data);
       setMfaSetupModalOpen(true);
@@ -136,7 +142,7 @@ const AccountSection: React.FC = () => {
       const axiosError = err as { response?: { data?: { error?: string } } };
       setMfaError(
         axiosError.response?.data?.error ||
-          t('account.mfa.setupFailed', 'Unable to start two-factor setup. Please try again.')
+          t("account.mfa.setupFailed", "Unable to start two-factor setup. Please try again."),
       );
     } finally {
       setMfaLoading(false);
@@ -147,117 +153,117 @@ const AccountSection: React.FC = () => {
     async (event: React.FormEvent) => {
       event.preventDefault();
       if (!mfaSetupCode.trim()) {
-        setMfaError(t('account.mfa.codeRequired', 'Enter the authentication code to continue.'));
+        setMfaError(t("account.mfa.codeRequired", "Enter the authentication code to continue."));
         return;
       }
       try {
         setMfaLoading(true);
-        setMfaError('');
+        setMfaError("");
         await accountService.enableMfa(mfaSetupCode.trim());
         setMfaEnabled(true);
         setMfaSetupModalOpen(false);
         setMfaSetupData(null);
-        setMfaSetupCode('');
+        setMfaSetupCode("");
         showToast({
-          alertType: 'success',
-          title: t('account.mfa.enabled', 'Two-factor authentication enabled.'),
+          alertType: "success",
+          title: t("account.mfa.enabled", "Two-factor authentication enabled."),
         });
       } catch (err) {
         const axiosError = err as { response?: { data?: { error?: string } } };
         setMfaError(
           axiosError.response?.data?.error ||
-            t('account.mfa.enableFailed', 'Unable to enable two-factor authentication. Check the code and try again.')
+            t("account.mfa.enableFailed", "Unable to enable two-factor authentication. Check the code and try again."),
         );
       } finally {
         setMfaLoading(false);
       }
     },
-    [mfaSetupCode, t]
+    [mfaSetupCode, t],
   );
 
   const handleDisableMfa = useCallback(
     async (event: React.FormEvent) => {
       event.preventDefault();
       if (!mfaDisableCode.trim()) {
-        setMfaError(t('account.mfa.codeRequired', 'Enter the authentication code to continue.'));
+        setMfaError(t("account.mfa.codeRequired", "Enter the authentication code to continue."));
         return;
       }
       try {
         setMfaLoading(true);
-        setMfaError('');
+        setMfaError("");
         await accountService.disableMfa(mfaDisableCode.trim());
         setMfaEnabled(false);
         setMfaDisableModalOpen(false);
-        setMfaDisableCode('');
+        setMfaDisableCode("");
         showToast({
-          alertType: 'success',
-          title: t('account.mfa.disabled', 'Two-factor authentication disabled.'),
+          alertType: "success",
+          title: t("account.mfa.disabled", "Two-factor authentication disabled."),
         });
       } catch (err) {
         const axiosError = err as { response?: { data?: { error?: string } } };
         setMfaError(
           axiosError.response?.data?.error ||
-            t('account.mfa.disableFailed', 'Unable to disable two-factor authentication. Check the code and try again.')
+            t("account.mfa.disableFailed", "Unable to disable two-factor authentication. Check the code and try again."),
         );
       } finally {
         setMfaLoading(false);
       }
     },
-    [mfaDisableCode, t]
+    [mfaDisableCode, t],
   );
 
   const handleCloseMfaSetupModal = useCallback(async () => {
     setMfaSetupModalOpen(false);
     setMfaSetupData(null);
-    setMfaSetupCode('');
-    setMfaError('');
+    setMfaSetupCode("");
+    setMfaError("");
     try {
       await accountService.cancelMfaSetup();
     } catch {
-      console.warn('Failed to clear pending MFA setup');
+      console.warn("Failed to clear pending MFA setup");
     }
   }, []);
 
   const handleCloseMfaDisableModal = useCallback(() => {
     setMfaDisableModalOpen(false);
-    setMfaDisableCode('');
-    setMfaError('');
+    setMfaDisableCode("");
+    setMfaError("");
   }, []);
 
   const handleUsernameSubmit = async (event: React.FormEvent) => {
     event.preventDefault();
 
     if (isSsoUser) {
-      setUsernameError(t('changeCreds.ssoManaged', 'Your account is managed by your identity provider.'));
+      setUsernameError(t("changeCreds.ssoManaged", "Your account is managed by your identity provider."));
       return;
     }
 
     if (!currentPasswordForUsername || !newUsername) {
-      setUsernameError(t('settings.security.password.required', 'All fields are required.'));
+      setUsernameError(t("settings.security.password.required", "All fields are required."));
       return;
     }
 
     try {
       setUsernameSubmitting(true);
-      setUsernameError('');
+      setUsernameError("");
 
       await accountService.changeUsername(newUsername, currentPasswordForUsername);
 
       showToast({
-        alertType: 'success',
-        title: t('changeCreds.credsUpdated', 'Account updated'),
-        body: t('changeCreds.description', 'Changes saved. Please log in again.'),
+        alertType: "success",
+        title: t("changeCreds.credsUpdated", "Account updated"),
+        body: t("changeCreds.description", "Changes saved. Please log in again."),
       });
 
-      setNewUsername('');
-      setCurrentPasswordForUsername('');
+      setNewUsername("");
+      setCurrentPasswordForUsername("");
       setUsernameModalOpen(false);
       await handleLogout();
     } catch (err) {
       const axiosError = err as { response?: { data?: { message?: string } } };
       setUsernameError(
         axiosError.response?.data?.message ||
-          t('changeCreds.error', 'Unable to update username. Please verify your password and try again.')
+          t("changeCreds.error", "Unable to update username. Please verify your password and try again."),
       );
     } finally {
       setUsernameSubmitting(false);
@@ -268,10 +274,10 @@ const AccountSection: React.FC = () => {
     <Stack gap="md">
       <div>
         <Text fw={600} size="lg">
-          {t('account.accountSettings', 'Account')}
+          {t("account.accountSettings", "Account")}
         </Text>
         <Text size="sm" c="dimmed">
-          {t('changeCreds.header', 'Update Your Account Details')}
+          {t("changeCreds.header", "Update Your Account Details")}
         </Text>
       </div>
 
@@ -279,21 +285,21 @@ const AccountSection: React.FC = () => {
         <Stack gap="sm">
           <Text size="sm" c="dimmed">
             {userIdentifier
-              ? t('settings.general.user', 'User') + ': ' + userIdentifier
-              : t('account.accountSettings', 'Account Settings')}
+              ? t("settings.general.user", "User") + ": " + userIdentifier
+              : t("account.accountSettings", "Account Settings")}
           </Text>
 
           <Stack gap="xs">
             {isSsoUser && (
               <Alert icon={<LocalIcon icon="info" width="1rem" height="1rem" />} color="blue" variant="light">
-                {t('changeCreds.ssoManaged', 'Your account is managed by your identity provider.')}
+                {t("changeCreds.ssoManaged", "Your account is managed by your identity provider.")}
               </Alert>
             )}
 
             <Group gap="sm" wrap="wrap">
               {!isSsoUser && (
                 <Button leftSection={<LocalIcon icon="key-rounded" />} onClick={() => setPasswordModalOpen(true)}>
-                  {t('settings.security.password.update', 'Update password')}
+                  {t("settings.security.password.update", "Update password")}
                 </Button>
               )}
 
@@ -303,12 +309,12 @@ const AccountSection: React.FC = () => {
                   leftSection={<LocalIcon icon="edit-rounded" />}
                   onClick={() => setUsernameModalOpen(true)}
                 >
-                  {t('account.changeUsername', 'Change username')}
+                  {t("account.changeUsername", "Change username")}
                 </Button>
               )}
 
               <Button variant="outline" color="red" leftSection={<LocalIcon icon="logout-rounded" />} onClick={handleLogout}>
-                {t('settings.general.logout', 'Log out')}
+                {t("settings.general.logout", "Log out")}
               </Button>
             </Group>
           </Stack>
@@ -317,16 +323,13 @@ const AccountSection: React.FC = () => {
 
       <Paper withBorder p="md" radius="md">
         <Stack gap="sm">
-          <Text fw={600}>{t('account.mfa.title', 'Two-factor authentication')}</Text>
+          <Text fw={600}>{t("account.mfa.title", "Two-factor authentication")}</Text>
           <Text size="sm" c="dimmed">
-            {t('account.mfa.description', 'Add an extra layer of security to your account.')}
+            {t("account.mfa.description", "Add an extra layer of security to your account.")}
           </Text>
           {isSsoUser ? (
             <Alert icon={<LocalIcon icon="info" width="1rem" height="1rem" />} color="blue" variant="light">
-              {t(
-                'account.mfa.ssoManaged',
-                'Two-factor authentication for this account is managed by your identity provider.'
-              )}
+              {t("account.mfa.ssoManaged", "Two-factor authentication for this account is managed by your identity provider.")}
             </Alert>
           ) : (
             <Group gap="sm" wrap="wrap">
@@ -337,7 +340,7 @@ const AccountSection: React.FC = () => {
                   loading={mfaLoading}
                   disabled={changeButtonDisabled}
                 >
-                  {t('account.mfa.enableButton', 'Enable two-factor authentication')}
+                  {t("account.mfa.enableButton", "Enable two-factor authentication")}
                 </Button>
               ) : (
                 <Button
@@ -345,13 +348,13 @@ const AccountSection: React.FC = () => {
                   color="red"
                   leftSection={<LocalIcon icon="close-rounded" />}
                   onClick={() => {
-                    setMfaError('');
-                    setMfaDisableCode('');
+                    setMfaError("");
+                    setMfaDisableCode("");
                     setMfaDisableModalOpen(true);
                   }}
                   disabled={changeButtonDisabled}
                 >
-                  {t('account.mfa.disableButton', 'Disable two-factor authentication')}
+                  {t("account.mfa.disableButton", "Disable two-factor authentication")}
                 </Button>
               )}
             </Group>
@@ -362,14 +365,14 @@ const AccountSection: React.FC = () => {
       <Modal
         opened={passwordModalOpen}
         onClose={() => setPasswordModalOpen(false)}
-        title={t('settings.security.title', 'Change password')}
+        title={t("settings.security.title", "Change password")}
         withinPortal
         zIndex={Z_INDEX_OVER_CONFIG_MODAL}
       >
         <form onSubmit={handlePasswordSubmit}>
           <Stack gap="md">
             <Text size="sm" c="dimmed">
-              {t('settings.security.password.subtitle', 'Change your password. You will be logged out after updating.')}
+              {t("settings.security.password.subtitle", "Change your password. You will be logged out after updating.")}
             </Text>
 
             {passwordError && (
@@ -379,24 +382,24 @@ const AccountSection: React.FC = () => {
             )}
 
             <PasswordInput
-              label={t('settings.security.password.current', 'Current password')}
-              placeholder={t('settings.security.password.currentPlaceholder', 'Enter your current password')}
+              label={t("settings.security.password.current", "Current password")}
+              placeholder={t("settings.security.password.currentPlaceholder", "Enter your current password")}
               value={currentPassword}
               onChange={(event) => setCurrentPassword(event.currentTarget.value)}
               required
             />
 
             <PasswordInput
-              label={t('settings.security.password.new', 'New password')}
-              placeholder={t('settings.security.password.newPlaceholder', 'Enter a new password')}
+              label={t("settings.security.password.new", "New password")}
+              placeholder={t("settings.security.password.newPlaceholder", "Enter a new password")}
               value={newPassword}
               onChange={(event) => setNewPassword(event.currentTarget.value)}
               required
             />
 
             <PasswordInput
-              label={t('settings.security.password.confirm', 'Confirm new password')}
-              placeholder={t('settings.security.password.confirmPlaceholder', 'Re-enter your new password')}
+              label={t("settings.security.password.confirm", "Confirm new password")}
+              placeholder={t("settings.security.password.confirmPlaceholder", "Re-enter your new password")}
               value={confirmPassword}
               onChange={(event) => setConfirmPassword(event.currentTarget.value)}
               required
@@ -404,10 +407,10 @@ const AccountSection: React.FC = () => {
 
             <Group justify="flex-end" gap="sm">
               <Button variant="default" onClick={() => setPasswordModalOpen(false)}>
-                {t('common.cancel', 'Cancel')}
+                {t("common.cancel", "Cancel")}
               </Button>
               <Button type="submit" loading={passwordSubmitting} leftSection={<LocalIcon icon="save-rounded" />}>
-                {t('settings.security.password.update', 'Update password')}
+                {t("settings.security.password.update", "Update password")}
               </Button>
             </Group>
           </Stack>
@@ -417,7 +420,7 @@ const AccountSection: React.FC = () => {
       <Modal
         opened={mfaSetupModalOpen}
         onClose={handleCloseMfaSetupModal}
-        title={t('account.mfa.setupTitle', 'Set up two-factor authentication')}
+        title={t("account.mfa.setupTitle", "Set up two-factor authentication")}
         withinPortal
         zIndex={Z_INDEX_OVER_CONFIG_MODAL}
       >
@@ -425,22 +428,22 @@ const AccountSection: React.FC = () => {
           <Stack gap="md">
             <Text size="sm" c="dimmed">
               {t(
-                'account.mfa.setupDescription',
-                'Scan the QR code with your authenticator app, then enter the 6-digit code to confirm.'
+                "account.mfa.setupDescription",
+                "Scan the QR code with your authenticator app, then enter the 6-digit code to confirm.",
               )}
             </Text>
             {mfaSetupData && (
               <Stack gap="sm" align="center">
                 <Box
                   style={{
-                    padding: '1.5rem',
-                    background: 'white',
-                    borderRadius: '8px',
-                    boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+                    padding: "1.5rem",
+                    background: "white",
+                    borderRadius: "8px",
+                    boxShadow: "0 2px 8px rgba(0,0,0,0.1)",
                   }}
                 >
                   <QRCodeSVG
-                    value={mfaSetupData.otpauthUri || ''}
+                    value={mfaSetupData.otpauthUri || ""}
                     size={180}
                     level="H"
                     imageSettings={{
@@ -452,12 +455,12 @@ const AccountSection: React.FC = () => {
                   />
                 </Box>
                 <Text size="sm" c="dimmed">
-                  {t('account.mfa.manualKey', 'Manual setup key')}: <strong>{mfaSetupData.secret}</strong>
+                  {t("account.mfa.manualKey", "Manual setup key")}: <strong>{mfaSetupData.secret}</strong>
                 </Text>
                 <Text size="xs" c="orange">
                   {t(
-                    'account.mfa.secretWarning',
-                    'Keep this key private. Anyone with access can generate valid authentication codes.'
+                    "account.mfa.secretWarning",
+                    "Keep this key private. Anyone with access can generate valid authentication codes.",
                   )}
                 </Text>
               </Stack>
@@ -468,10 +471,12 @@ const AccountSection: React.FC = () => {
               </Alert>
             )}
             <TextInput
-              label={t('account.mfa.codeLabel', 'Authentication code')}
-              placeholder={t('account.mfa.codePlaceholder', 'Enter 6-digit code')}
+              label={t("account.mfa.codeLabel", "Authentication code")}
+              placeholder={t("account.mfa.codePlaceholder", "Enter 6-digit code")}
               value={mfaSetupCode}
-              onChange={(event: React.ChangeEvent<HTMLInputElement>) => setMfaSetupCode(normalizeMfaCode(event.currentTarget.value))}
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                setMfaSetupCode(normalizeMfaCode(event.currentTarget.value))
+              }
               inputMode="numeric"
               pattern="[0-9]*"
               maxLength={6}
@@ -481,10 +486,10 @@ const AccountSection: React.FC = () => {
             />
             <Group justify="flex-end" gap="sm">
               <Button variant="default" onClick={handleCloseMfaSetupModal}>
-                {t('common.cancel', 'Cancel')}
+                {t("common.cancel", "Cancel")}
               </Button>
               <Button type="submit" loading={mfaLoading}>
-                {t('account.mfa.confirmEnable', 'Enable')}
+                {t("account.mfa.confirmEnable", "Enable")}
               </Button>
             </Group>
           </Stack>
@@ -494,14 +499,14 @@ const AccountSection: React.FC = () => {
       <Modal
         opened={mfaDisableModalOpen}
         onClose={handleCloseMfaDisableModal}
-        title={t('account.mfa.disableTitle', 'Disable two-factor authentication')}
+        title={t("account.mfa.disableTitle", "Disable two-factor authentication")}
         withinPortal
         zIndex={Z_INDEX_OVER_CONFIG_MODAL}
       >
         <form onSubmit={handleDisableMfa}>
           <Stack gap="md">
             <Text size="sm" c="dimmed">
-              {t('account.mfa.disableDescription', 'Enter a valid authentication code to disable two-factor authentication.')}
+              {t("account.mfa.disableDescription", "Enter a valid authentication code to disable two-factor authentication.")}
             </Text>
             {mfaError && (
               <Alert icon={<LocalIcon icon="error-rounded" width="1rem" height="1rem" />} color="red" variant="light">
@@ -509,10 +514,12 @@ const AccountSection: React.FC = () => {
               </Alert>
             )}
             <TextInput
-              label={t('account.mfa.codeLabel', 'Authentication code')}
-              placeholder={t('account.mfa.codePlaceholder', 'Enter 6-digit code')}
+              label={t("account.mfa.codeLabel", "Authentication code")}
+              placeholder={t("account.mfa.codePlaceholder", "Enter 6-digit code")}
               value={mfaDisableCode}
-              onChange={(event: React.ChangeEvent<HTMLInputElement>) => setMfaDisableCode(normalizeMfaCode(event.currentTarget.value))}
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                setMfaDisableCode(normalizeMfaCode(event.currentTarget.value))
+              }
               inputMode="numeric"
               pattern="[0-9]*"
               maxLength={6}
@@ -522,10 +529,10 @@ const AccountSection: React.FC = () => {
             />
             <Group justify="flex-end" gap="sm">
               <Button variant="default" onClick={handleCloseMfaDisableModal}>
-                {t('common.cancel', 'Cancel')}
+                {t("common.cancel", "Cancel")}
               </Button>
               <Button type="submit" color="red" loading={mfaLoading}>
-                {t('account.mfa.confirmDisable', 'Disable')}
+                {t("account.mfa.confirmDisable", "Disable")}
               </Button>
             </Group>
           </Stack>
@@ -535,14 +542,14 @@ const AccountSection: React.FC = () => {
       <Modal
         opened={usernameModalOpen}
         onClose={() => setUsernameModalOpen(false)}
-        title={t('account.changeUsername', 'Change username')}
+        title={t("account.changeUsername", "Change username")}
         withinPortal
         zIndex={Z_INDEX_OVER_CONFIG_MODAL}
       >
         <form onSubmit={handleUsernameSubmit}>
           <Stack gap="md">
             <Text size="sm" c="dimmed">
-              {t('changeCreds.changeUsername', 'Update your username. You will be logged out after updating.')}
+              {t("changeCreds.changeUsername", "Update your username. You will be logged out after updating.")}
             </Text>
 
             {usernameError && (
@@ -552,27 +559,29 @@ const AccountSection: React.FC = () => {
             )}
 
             <TextInput
-              label={t('changeCreds.newUsername', 'New Username')}
-              placeholder={t('changeCreds.newUsername', 'New Username')}
+              label={t("changeCreds.newUsername", "New Username")}
+              placeholder={t("changeCreds.newUsername", "New Username")}
               value={newUsername}
               onChange={(event: React.ChangeEvent<HTMLInputElement>) => setNewUsername(event.currentTarget.value)}
               required
             />
 
             <PasswordInput
-              label={t('changeCreds.oldPassword', 'Current Password')}
-              placeholder={t('changeCreds.oldPassword', 'Current Password')}
+              label={t("changeCreds.oldPassword", "Current Password")}
+              placeholder={t("changeCreds.oldPassword", "Current Password")}
               value={currentPasswordForUsername}
-              onChange={(event: React.ChangeEvent<HTMLInputElement>) => setCurrentPasswordForUsername(event.currentTarget.value)}
+              onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
+                setCurrentPasswordForUsername(event.currentTarget.value)
+              }
               required
             />
 
             <Group justify="flex-end" gap="sm">
               <Button variant="default" onClick={() => setUsernameModalOpen(false)}>
-                {t('common.cancel', 'Cancel')}
+                {t("common.cancel", "Cancel")}
               </Button>
               <Button type="submit" loading={usernameSubmitting} leftSection={<LocalIcon icon="save-rounded" />}>
-                {t('common.save', 'Save')}
+                {t("common.save", "Save")}
               </Button>
             </Group>
           </Stack>
diff --git a/frontend/src/proprietary/components/shared/config/configSections/AdminAdvancedSection.tsx b/frontend/src/proprietary/components/shared/config/configSections/AdminAdvancedSection.tsx
index ff297b4a48..f1a5162023 100644
--- a/frontend/src/proprietary/components/shared/config/configSections/AdminAdvancedSection.tsx
+++ b/frontend/src/proprietary/components/shared/config/configSections/AdminAdvancedSection.tsx
@@ -1,18 +1,30 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { isAxiosError } from 'axios';
-import { useTranslation } from 'react-i18next';
-import { NumberInput, Switch, Button, Stack, Paper, Text, Loader, Group, Accordion, TextInput, MultiSelect } from '@mantine/core';
-import { alert } from '@app/components/toast';
-import RestartConfirmationModal from '@app/components/shared/config/RestartConfirmationModal';
-import { useRestartServer } from '@app/components/shared/config/useRestartServer';
-import { useAdminSettings } from '@app/hooks/useAdminSettings';
-import { useSettingsDirty } from '@app/hooks/useSettingsDirty';
-import PendingBadge from '@app/components/shared/config/PendingBadge';
-import { SettingsStickyFooter } from '@app/components/shared/config/SettingsStickyFooter';
-import apiClient from '@app/services/apiClient';
-import { useLoginRequired } from '@app/hooks/useLoginRequired';
-import LoginRequiredBanner from '@app/components/shared/config/LoginRequiredBanner';
-import { Z_INDEX_OVER_CONFIG_MODAL } from '@app/styles/zIndex';
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { isAxiosError } from "axios";
+import { useTranslation } from "react-i18next";
+import {
+  NumberInput,
+  Switch,
+  Button,
+  Stack,
+  Paper,
+  Text,
+  Loader,
+  Group,
+  Accordion,
+  TextInput,
+  MultiSelect,
+} from "@mantine/core";
+import { alert } from "@app/components/toast";
+import RestartConfirmationModal from "@app/components/shared/config/RestartConfirmationModal";
+import { useRestartServer } from "@app/components/shared/config/useRestartServer";
+import { useAdminSettings } from "@app/hooks/useAdminSettings";
+import { useSettingsDirty } from "@app/hooks/useSettingsDirty";
+import PendingBadge from "@app/components/shared/config/PendingBadge";
+import { SettingsStickyFooter } from "@app/components/shared/config/SettingsStickyFooter";
+import apiClient from "@app/services/apiClient";
+import { useLoginRequired } from "@app/hooks/useLoginRequired";
+import LoginRequiredBanner from "@app/components/shared/config/LoginRequiredBanner";
+import { Z_INDEX_OVER_CONFIG_MODAL } from "@app/styles/zIndex";
 
 interface AdvancedSettingsData {
   enableAlphaFunctionality?: boolean;
@@ -63,113 +75,107 @@ export default function AdminAdvancedSection() {
   const { restartModalOpened, showRestartModal, closeRestartModal, restartServer } = useRestartServer();
   const { loginEnabled, validateLoginEnabled, getDisabledStyles } = useLoginRequired();
 
-  const {
-    settings,
-    setSettings,
-    loading,
-    saving,
-    fetchSettings,
-    saveSettings,
-    isFieldPending,
-  } = useAdminSettings<AdvancedSettingsData>({
-    sectionName: 'advanced',
-    fetchTransformer: async (): Promise<AdvancedSettingsData & { _pending?: Record<string, unknown> }> => {
-      const [systemResponse, processExecutorResponse] = await Promise.all([
-        apiClient.get('/api/v1/admin/settings/section/system'),
-        apiClient.get('/api/v1/admin/settings/section/processExecutor')
-      ]);
+  const { settings, setSettings, loading, saving, fetchSettings, saveSettings, isFieldPending } =
+    useAdminSettings<AdvancedSettingsData>({
+      sectionName: "advanced",
+      fetchTransformer: async (): Promise<AdvancedSettingsData & { _pending?: Record<string, unknown> }> => {
+        const [systemResponse, processExecutorResponse] = await Promise.all([
+          apiClient.get("/api/v1/admin/settings/section/system"),
+          apiClient.get("/api/v1/admin/settings/section/processExecutor"),
+        ]);
 
-      const systemData = systemResponse.data || {};
-      const processExecutorData = processExecutorResponse.data || {};
+        const systemData = systemResponse.data || {};
+        const processExecutorData = processExecutorResponse.data || {};
 
-      const result: AdvancedSettingsData & { _pending?: Record<string, unknown> } = {
-        enableAlphaFunctionality: systemData.enableAlphaFunctionality || false,
-        maxDPI: systemData.maxDPI || 0,
-        enableUrlToPDF: systemData.enableUrlToPDF || false,
-        tessdataDir: systemData.tessdataDir || '',
-        disableSanitize: systemData.disableSanitize || false,
-        tempFileManagement: systemData.tempFileManagement || {
-          baseTmpDir: '',
-          libreofficeDir: '',
-          systemTempDir: '',
-          prefix: 'stirling-pdf-',
-          maxAgeHours: 24,
-          cleanupIntervalMinutes: 30,
-          startupCleanup: true,
-          cleanupSystemTemp: false
-        },
-        processExecutor: processExecutorData || {}
-      };
+        const result: AdvancedSettingsData & { _pending?: Record<string, unknown> } = {
+          enableAlphaFunctionality: systemData.enableAlphaFunctionality || false,
+          maxDPI: systemData.maxDPI || 0,
+          enableUrlToPDF: systemData.enableUrlToPDF || false,
+          tessdataDir: systemData.tessdataDir || "",
+          disableSanitize: systemData.disableSanitize || false,
+          tempFileManagement: systemData.tempFileManagement || {
+            baseTmpDir: "",
+            libreofficeDir: "",
+            systemTempDir: "",
+            prefix: "stirling-pdf-",
+            maxAgeHours: 24,
+            cleanupIntervalMinutes: 30,
+            startupCleanup: true,
+            cleanupSystemTemp: false,
+          },
+          processExecutor: processExecutorData || {},
+        };
 
-      // Merge pending blocks from both endpoints
-      const pendingBlock: Record<string, unknown> = {};
-      if (systemData._pending?.enableAlphaFunctionality !== undefined) {
-        pendingBlock.enableAlphaFunctionality = systemData._pending.enableAlphaFunctionality;
-      }
-      if (systemData._pending?.maxDPI !== undefined) {
-        pendingBlock.maxDPI = systemData._pending.maxDPI;
-      }
-      if (systemData._pending?.enableUrlToPDF !== undefined) {
-        pendingBlock.enableUrlToPDF = systemData._pending.enableUrlToPDF;
-      }
-      if (systemData._pending?.tessdataDir !== undefined) {
-        pendingBlock.tessdataDir = systemData._pending.tessdataDir;
-      }
-      if (systemData._pending?.disableSanitize !== undefined) {
-        pendingBlock.disableSanitize = systemData._pending.disableSanitize;
-      }
-      if (systemData._pending?.tempFileManagement) {
-        pendingBlock.tempFileManagement = systemData._pending.tempFileManagement;
-      }
-      if (processExecutorData._pending) {
-        pendingBlock.processExecutor = processExecutorData._pending;
-      }
+        // Merge pending blocks from both endpoints
+        const pendingBlock: Record<string, unknown> = {};
+        if (systemData._pending?.enableAlphaFunctionality !== undefined) {
+          pendingBlock.enableAlphaFunctionality = systemData._pending.enableAlphaFunctionality;
+        }
+        if (systemData._pending?.maxDPI !== undefined) {
+          pendingBlock.maxDPI = systemData._pending.maxDPI;
+        }
+        if (systemData._pending?.enableUrlToPDF !== undefined) {
+          pendingBlock.enableUrlToPDF = systemData._pending.enableUrlToPDF;
+        }
+        if (systemData._pending?.tessdataDir !== undefined) {
+          pendingBlock.tessdataDir = systemData._pending.tessdataDir;
+        }
+        if (systemData._pending?.disableSanitize !== undefined) {
+          pendingBlock.disableSanitize = systemData._pending.disableSanitize;
+        }
+        if (systemData._pending?.tempFileManagement) {
+          pendingBlock.tempFileManagement = systemData._pending.tempFileManagement;
+        }
+        if (processExecutorData._pending) {
+          pendingBlock.processExecutor = processExecutorData._pending;
+        }
 
-      if (Object.keys(pendingBlock).length > 0) {
-        result._pending = pendingBlock;
-      }
+        if (Object.keys(pendingBlock).length > 0) {
+          result._pending = pendingBlock;
+        }
 
-      return result;
-    },
-    saveTransformer: (settings) => {
-      const deltaSettings: Record<string, unknown> = {
-        'system.enableAlphaFunctionality': settings.enableAlphaFunctionality,
-        'system.maxDPI': settings.maxDPI,
-        'system.enableUrlToPDF': settings.enableUrlToPDF,
-        'system.tessdataDir': settings.tessdataDir,
-        'system.disableSanitize': settings.disableSanitize
-      };
+        return result;
+      },
+      saveTransformer: (settings) => {
+        const deltaSettings: Record<string, unknown> = {
+          "system.enableAlphaFunctionality": settings.enableAlphaFunctionality,
+          "system.maxDPI": settings.maxDPI,
+          "system.enableUrlToPDF": settings.enableUrlToPDF,
+          "system.tessdataDir": settings.tessdataDir,
+          "system.disableSanitize": settings.disableSanitize,
+        };
 
-      // Add temp file management settings
-      if (settings.tempFileManagement) {
-        deltaSettings['system.tempFileManagement.baseTmpDir'] = settings.tempFileManagement.baseTmpDir;
-        deltaSettings['system.tempFileManagement.libreofficeDir'] = settings.tempFileManagement.libreofficeDir;
-        deltaSettings['system.tempFileManagement.systemTempDir'] = settings.tempFileManagement.systemTempDir;
-        deltaSettings['system.tempFileManagement.prefix'] = settings.tempFileManagement.prefix;
-        deltaSettings['system.tempFileManagement.maxAgeHours'] = settings.tempFileManagement.maxAgeHours;
-        deltaSettings['system.tempFileManagement.cleanupIntervalMinutes'] = settings.tempFileManagement.cleanupIntervalMinutes;
-        deltaSettings['system.tempFileManagement.startupCleanup'] = settings.tempFileManagement.startupCleanup;
-        deltaSettings['system.tempFileManagement.cleanupSystemTemp'] = settings.tempFileManagement.cleanupSystemTemp;
-      }
+        // Add temp file management settings
+        if (settings.tempFileManagement) {
+          deltaSettings["system.tempFileManagement.baseTmpDir"] = settings.tempFileManagement.baseTmpDir;
+          deltaSettings["system.tempFileManagement.libreofficeDir"] = settings.tempFileManagement.libreofficeDir;
+          deltaSettings["system.tempFileManagement.systemTempDir"] = settings.tempFileManagement.systemTempDir;
+          deltaSettings["system.tempFileManagement.prefix"] = settings.tempFileManagement.prefix;
+          deltaSettings["system.tempFileManagement.maxAgeHours"] = settings.tempFileManagement.maxAgeHours;
+          deltaSettings["system.tempFileManagement.cleanupIntervalMinutes"] =
+            settings.tempFileManagement.cleanupIntervalMinutes;
+          deltaSettings["system.tempFileManagement.startupCleanup"] = settings.tempFileManagement.startupCleanup;
+          deltaSettings["system.tempFileManagement.cleanupSystemTemp"] = settings.tempFileManagement.cleanupSystemTemp;
+        }
 
-      // Add process executor settings
-      if (settings.processExecutor?.sessionLimit) {
-        Object.entries(settings.processExecutor.sessionLimit).forEach(([key, value]) => {
-          deltaSettings[`processExecutor.sessionLimit.${key}`] = value;
-        });
-      }
-      if (settings.processExecutor?.timeoutMinutes) {
-        Object.entries(settings.processExecutor.timeoutMinutes).forEach(([key, value]) => {
-          deltaSettings[`processExecutor.timeoutMinutes.${key}`] = value;
-        });
-      }
+        // Add process executor settings
+        if (settings.processExecutor?.sessionLimit) {
+          Object.entries(settings.processExecutor.sessionLimit).forEach(([key, value]) => {
+            deltaSettings[`processExecutor.sessionLimit.${key}`] = value;
+          });
+        }
+        if (settings.processExecutor?.timeoutMinutes) {
+          Object.entries(settings.processExecutor.timeoutMinutes).forEach(([key, value]) => {
+            deltaSettings[`processExecutor.timeoutMinutes.${key}`] = value;
+          });
+        }
 
-      return {
-        sectionData: {},
-        deltaSettings
-      };
-    }
-  });
+        return {
+          sectionData: {},
+          deltaSettings,
+        };
+      },
+    });
 
   useEffect(() => {
     if (loginEnabled) {
@@ -191,9 +197,12 @@ export default function AdminAdvancedSection() {
     const fetchTessdataLanguages = async () => {
       setTessdataLanguagesLoading(true);
       try {
-        const { data } = await apiClient.get<{ installed: string[]; available: string[]; writable?: boolean }>('/api/v1/ui-data/tessdata-languages', {
-          suppressErrorToast: true
-        });
+        const { data } = await apiClient.get<{ installed: string[]; available: string[]; writable?: boolean }>(
+          "/api/v1/ui-data/tessdata-languages",
+          {
+            suppressErrorToast: true,
+          },
+        );
         const installed = data.installed || [];
         const available = data.available || [];
         setTessdataLanguages(installed);
@@ -201,7 +210,7 @@ export default function AdminAdvancedSection() {
         setTessdataDirWritable(data.writable !== false);
         setManualDownloadLinks([]);
       } catch (error) {
-        console.error('[AdminAdvancedSection] Failed to load tessdata languages', error);
+        console.error("[AdminAdvancedSection] Failed to load tessdata languages", error);
         setTessdataLanguages([]);
         setRemoteTessdataLanguages([]);
         setTessdataDirWritable(true);
@@ -218,8 +227,8 @@ export default function AdminAdvancedSection() {
     for (let attempt = 0; attempt < retries; attempt++) {
       try {
         const { data } = await apiClient.get<{ installed: string[]; available: string[]; writable?: boolean }>(
-          '/api/v1/ui-data/tessdata-languages',
-          { suppressErrorToast: true }
+          "/api/v1/ui-data/tessdata-languages",
+          { suppressErrorToast: true },
         );
         const installed = data.installed || [];
         const available = data.available || [];
@@ -230,7 +239,7 @@ export default function AdminAdvancedSection() {
         return;
       } catch (err) {
         if (attempt === retries - 1) {
-          console.error('[AdminAdvancedSection] Retry refresh tessdata failed', err);
+          console.error("[AdminAdvancedSection] Retry refresh tessdata failed", err);
           return;
         }
         await new Promise((resolve) => setTimeout(resolve, delayMs));
@@ -238,15 +247,15 @@ export default function AdminAdvancedSection() {
     }
   };
 
-  const safeLangRegex = useMemo(() => new RegExp('[^A-Za-z0-9_+\\-]', 'g'), []);
+  const safeLangRegex = useMemo(() => new RegExp("[^A-Za-z0-9_+\\-]", "g"), []);
 
   const handleDownloadTessdataLanguages = async () => {
     if (!loginEnabled) return;
     if (selectedDownloadLanguages.length === 0) {
       alert({
-        alertType: 'warning',
-        title: t('admin.settings.advanced.tessdataDir.downloadMissingTitle', 'No language selected'),
-        body: t('admin.settings.advanced.tessdataDir.downloadMissingBody', 'Please select at least one language to download.'),
+        alertType: "warning",
+        title: t("admin.settings.advanced.tessdataDir.downloadMissingTitle", "No language selected"),
+        body: t("admin.settings.advanced.tessdataDir.downloadMissingBody", "Please select at least one language to download."),
         expandable: false,
       });
       return;
@@ -256,11 +265,11 @@ export default function AdminAdvancedSection() {
     const invalidSelection = selectedDownloadLanguages.filter((lang) => !remoteSet.has(lang));
     if (invalidSelection.length > 0) {
       alert({
-        alertType: 'warning',
-        title: t('admin.settings.advanced.tessdataDir.downloadInvalidTitle', 'Invalid selection'),
+        alertType: "warning",
+        title: t("admin.settings.advanced.tessdataDir.downloadInvalidTitle", "Invalid selection"),
         body: t(
-          'admin.settings.advanced.tessdataDir.downloadInvalidBody',
-          'Some selected languages are not available to download. Please refresh and choose from the list.'
+          "admin.settings.advanced.tessdataDir.downloadInvalidBody",
+          "Some selected languages are not available to download. Please refresh and choose from the list.",
         ),
         expandable: false,
       });
@@ -268,40 +277,47 @@ export default function AdminAdvancedSection() {
     }
     setDownloadLanguagesLoading(true);
     try {
-      await apiClient.post('/api/v1/ui-data/tessdata/download', { languages: selectedDownloadLanguages }, {
-        suppressErrorToast: true
-      });
+      await apiClient.post(
+        "/api/v1/ui-data/tessdata/download",
+        { languages: selectedDownloadLanguages },
+        {
+          suppressErrorToast: true,
+        },
+      );
       alert({
-        alertType: 'success',
-        title: t('admin.settings.advanced.tessdataDir.downloadSuccessTitle', 'Languages downloaded'),
-        body: t('admin.settings.advanced.tessdataDir.downloadSuccessBody', 'The selected tessdata languages have been saved.'),
+        alertType: "success",
+        title: t("admin.settings.advanced.tessdataDir.downloadSuccessTitle", "Languages downloaded"),
+        body: t("admin.settings.advanced.tessdataDir.downloadSuccessBody", "The selected tessdata languages have been saved."),
       });
       // Refresh installed list with retry in case filesystem sync is delayed
       await refreshTessdataWithRetry();
       setSelectedDownloadLanguages([]);
       setManualDownloadLinks([]);
     } catch (error) {
-      console.error('[AdminAdvancedSection] Download tessdata languages failed', error);
+      console.error("[AdminAdvancedSection] Download tessdata languages failed", error);
       const status = isAxiosError(error) ? error.response?.status : undefined;
       const serverMessage = isAxiosError(error) ? error.response?.data?.message : undefined;
 
       if (status === 403) {
-        console.warn('[AdminAdvancedSection] Tessdata directory not writable, falling back to manual download:', serverMessage);
+        console.warn(
+          "[AdminAdvancedSection] Tessdata directory not writable, falling back to manual download:",
+          serverMessage,
+        );
         setTessdataDirWritable(false);
         setManualDownloadLinks(
           selectedDownloadLanguages.map((lang) => {
-            const safeLang = lang.replace(safeLangRegex, '');
+            const safeLang = lang.replace(safeLangRegex, "");
             return `https://raw.githubusercontent.com/tesseract-ocr/tessdata/main/${safeLang}.traineddata`;
-          })
+          }),
         );
-        const message = t('admin.settings.advanced.tessdataDir.downloadErrorPermission', {
+        const message = t("admin.settings.advanced.tessdataDir.downloadErrorPermission", {
           defaultValue:
-            'Tessdata directory is not writable: {{message}}. Please choose a writable directory (e.g. under the application data folder) or adjust permissions.',
-          message: serverMessage ?? settings.tessdataDir ?? 'unknown location',
+            "Tessdata directory is not writable: {{message}}. Please choose a writable directory (e.g. under the application data folder) or adjust permissions.",
+          message: serverMessage ?? settings.tessdataDir ?? "unknown location",
         });
         alert({
-          alertType: 'error',
-          title: t('admin.settings.advanced.tessdataDir.downloadErrorTitle', 'Download Failed'),
+          alertType: "error",
+          title: t("admin.settings.advanced.tessdataDir.downloadErrorTitle", "Download Failed"),
           body: message,
           expandable: false,
         });
@@ -311,23 +327,23 @@ export default function AdminAdvancedSection() {
       let message: string;
       if (!isAxiosError(error) || !error.response) {
         message = t(
-          'admin.settings.advanced.tessdataDir.downloadErrorNetwork',
-          'Download failed due to a network error. Please check your connection and try again.'
+          "admin.settings.advanced.tessdataDir.downloadErrorNetwork",
+          "Download failed due to a network error. Please check your connection and try again.",
         );
       } else if (status !== undefined && status >= 500) {
         message = t(
-          'admin.settings.advanced.tessdataDir.downloadErrorServer',
-          'The server encountered an error while downloading tessdata languages. Please try again later.'
+          "admin.settings.advanced.tessdataDir.downloadErrorServer",
+          "The server encountered an error while downloading tessdata languages. Please try again later.",
         );
       } else {
-        message = t('admin.settings.advanced.tessdataDir.downloadErrorGeneric', {
-          defaultValue: 'Download failed: {{message}}. Please try again later.',
-          message: serverMessage ?? settings.tessdataDir ?? 'unknown location',
+        message = t("admin.settings.advanced.tessdataDir.downloadErrorGeneric", {
+          defaultValue: "Download failed: {{message}}. Please try again later.",
+          message: serverMessage ?? settings.tessdataDir ?? "unknown location",
         });
       }
       alert({
-        alertType: 'error',
-        title: t('admin.settings.advanced.tessdataDir.downloadErrorTitle', 'Download Failed'),
+        alertType: "error",
+        title: t("admin.settings.advanced.tessdataDir.downloadErrorTitle", "Download Failed"),
         body: message,
         expandable: false,
       });
@@ -336,7 +352,6 @@ export default function AdminAdvancedSection() {
     }
   };
 
-
   const { isDirty, resetToSnapshot, markSaved } = useSettingsDirty(settings, loading);
   const handleSave = async () => {
     if (!validateLoginEnabled()) {
@@ -348,9 +363,9 @@ export default function AdminAdvancedSection() {
       showRestartModal();
     } catch (_error) {
       alert({
-        alertType: 'error',
-        title: t('admin.error', 'Error'),
-        body: t('admin.settings.saveError', 'Failed to save settings'),
+        alertType: "error",
+        title: t("admin.error", "Error"),
+        body: t("admin.settings.saveError", "Failed to save settings"),
       });
     }
   };
@@ -374,735 +389,931 @@ export default function AdminAdvancedSection() {
     <div className="settings-section-container">
       <Stack gap="lg" className="settings-section-content">
         <LoginRequiredBanner show={!loginEnabled} />
-      <div>
-        <Text fw={600} size="lg">{t('admin.settings.advanced.title', 'Advanced')}</Text>
-        <Text size="sm" c="dimmed">
-          {t('admin.settings.advanced.description', 'Configure advanced features and experimental functionality.')}
-        </Text>
-      </div>
+        <div>
+          <Text fw={600} size="lg">
+            {t("admin.settings.advanced.title", "Advanced")}
+          </Text>
+          <Text size="sm" c="dimmed">
+            {t("admin.settings.advanced.description", "Configure advanced features and experimental functionality.")}
+          </Text>
+        </div>
 
-      {/* Feature Flags */}
-      <Paper withBorder p="md" radius="md">
-        <Stack gap="md">
-          <Text fw={600} size="sm" mb="xs">{t('admin.settings.advanced.features', 'Feature Flags')}</Text>
+        {/* Feature Flags */}
+        <Paper withBorder p="md" radius="md">
+          <Stack gap="md">
+            <Text fw={600} size="sm" mb="xs">
+              {t("admin.settings.advanced.features", "Feature Flags")}
+            </Text>
 
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <div>
-              <Text fw={500} size="sm">{t('admin.settings.advanced.enableAlphaFunctionality.label', 'Enable Alpha Features')}</Text>
-              <Text size="xs" c="dimmed" mt={4}>
-                {t('admin.settings.advanced.enableAlphaFunctionality.description', 'Enable experimental and alpha-stage features (may be unstable)')}
-              </Text>
-            </div>
-            <Group gap="xs">
-              <Switch
-                checked={settings.enableAlphaFunctionality || false}
-                onChange={(e) => {
-                  if (!loginEnabled) return;
-                  setSettings({ ...settings, enableAlphaFunctionality: e.target.checked });
-                }}
-                disabled={!loginEnabled}
-                styles={getDisabledStyles()}
-              />
-              <PendingBadge show={isFieldPending('enableAlphaFunctionality')} />
-            </Group>
-          </div>
-
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <div>
-              <Text fw={500} size="sm">{t('admin.settings.advanced.enableUrlToPDF.label', 'Enable URL to PDF')}</Text>
-              <Text size="xs" c="dimmed" mt={4}>
-                {t('admin.settings.advanced.enableUrlToPDF.description', 'Allow conversion of web pages to PDF documents (internal use only)')}
-              </Text>
-            </div>
-            <Group gap="xs">
-              <Switch
-                checked={settings.enableUrlToPDF || false}
-                onChange={(e) => {
-                  if (!loginEnabled) return;
-                  setSettings({ ...settings, enableUrlToPDF: e.target.checked });
-                }}
-                disabled={!loginEnabled}
-                styles={getDisabledStyles()}
-              />
-              <PendingBadge show={isFieldPending('enableUrlToPDF')} />
-            </Group>
-          </div>
-
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <div>
-              <Text fw={500} size="sm">{t('admin.settings.advanced.disableSanitize.label', 'Disable HTML Sanitization')}</Text>
-              <Text size="xs" c="dimmed" mt={4}>
-                {t('admin.settings.advanced.disableSanitize.description', 'Disable HTML sanitization (WARNING: Security risk - can lead to XSS injections)')}
-              </Text>
-            </div>
-            <Group gap="xs">
-              <Switch
-                checked={settings.disableSanitize || false}
-                onChange={(e) => {
-                  if (!loginEnabled) return;
-                  setSettings({ ...settings, disableSanitize: e.target.checked });
-                }}
-                disabled={!loginEnabled}
-                styles={getDisabledStyles()}
-              />
-              <PendingBadge show={isFieldPending('disableSanitize')} />
-            </Group>
-          </div>
-        </Stack>
-      </Paper>
-
-      {/* Processing Settings */}
-      <Paper withBorder p="md" radius="md">
-        <Stack gap="md">
-          <Text fw={600} size="sm" mb="xs">{t('admin.settings.advanced.processing', 'Processing')}</Text>
-
-          <div>
-            <NumberInput
-              label={
-                <Group gap="xs">
-                  <span>{t('admin.settings.advanced.maxDPI.label', 'Maximum DPI')}</span>
-                  <PendingBadge show={isFieldPending('maxDPI')} />
-                </Group>
-              }
-              description={t('admin.settings.advanced.maxDPI.description', 'Maximum DPI for image processing (0 = unlimited)')}
-              value={settings.maxDPI || 0}
-              onChange={(value) => setSettings({ ...settings, maxDPI: Number(value) })}
-              min={0}
-              max={3000}
-              disabled={!loginEnabled}
-            />
-          </div>
-
-          {/* Tessdata Directory */}
-          <div>
-            <TextInput
-              label={
-                <Group gap="xs">
-                  <span>{t('admin.settings.advanced.tessdataDir.label', 'Tessdata Directory')}</span>
-                  <PendingBadge show={isFieldPending('tessdataDir')} />
-                </Group>
-              }
-              description={t('admin.settings.advanced.tessdataDir.description', 'Path to the directory containing Tessdata files for OCR')}
-              value={settings.tessdataDir || ''}
-              onChange={(e) => setSettings({ ...settings, tessdataDir: e.target.value })}
-              placeholder="/usr/share/tessdata"
-              disabled={!loginEnabled}
-            />
-            {tessdataLanguagesLoading ? (
-              <Group gap="xs" mt={6}>
-                <Loader size="xs" />
-                <Text size="xs">
-                  {t('admin.settings.advanced.tessdataDir.loadingLanguages', 'Loading installed tessdata languages...')}
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+              <div>
+                <Text fw={500} size="sm">
+                  {t("admin.settings.advanced.enableAlphaFunctionality.label", "Enable Alpha Features")}
                 </Text>
-              </Group>
-            ) : (
-              <Text size="xs" c="dimmed" mt={6}>
-                {tessdataLanguages.length > 0
-                  ? `${t('admin.settings.advanced.tessdataDir.installedLanguages', 'Installed tessdata languages')}: ${tessdataLanguages.join(', ')}`
-                  : t('admin.settings.advanced.tessdataDir.noLanguages', 'No tessdata languages found in the configured directory')}
-              </Text>
-            )}
-            <Stack gap="xs" mt="sm">
-              <MultiSelect
-                label={t('admin.settings.advanced.tessdataDir.downloadLabel', 'Download additional tessdata languages')}
-                placeholder={t('admin.settings.advanced.tessdataDir.downloadPlaceholder', 'Select languages')}
-                data={remoteTessdataLanguages.map((lang) => ({ value: lang, label: lang }))}
-                searchable
-                disabled={!loginEnabled || remoteTessdataLanguages.length === 0}
-                value={selectedDownloadLanguages}
-                onChange={setSelectedDownloadLanguages}
-                comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_CONFIG_MODAL }}
-                nothingFoundMessage={t('admin.settings.advanced.tessdataDir.downloadNothingFound', 'No additional languages found')}
-              />
-              {!tessdataDirWritable && (
-                <Text size="xs" c="yellow.4">
+                <Text size="xs" c="dimmed" mt={4}>
                   {t(
-                    'admin.settings.advanced.tessdataDir.permissionNotice',
-                    'The tessdata path is not writable. Downloads will be opened in the browser; please save the .traineddata files manually into the tessdata folder.'
+                    "admin.settings.advanced.enableAlphaFunctionality.description",
+                    "Enable experimental and alpha-stage features (may be unstable)",
                   )}
                 </Text>
+              </div>
+              <Group gap="xs">
+                <Switch
+                  checked={settings.enableAlphaFunctionality || false}
+                  onChange={(e) => {
+                    if (!loginEnabled) return;
+                    setSettings({ ...settings, enableAlphaFunctionality: e.target.checked });
+                  }}
+                  disabled={!loginEnabled}
+                  styles={getDisabledStyles()}
+                />
+                <PendingBadge show={isFieldPending("enableAlphaFunctionality")} />
+              </Group>
+            </div>
+
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+              <div>
+                <Text fw={500} size="sm">
+                  {t("admin.settings.advanced.enableUrlToPDF.label", "Enable URL to PDF")}
+                </Text>
+                <Text size="xs" c="dimmed" mt={4}>
+                  {t(
+                    "admin.settings.advanced.enableUrlToPDF.description",
+                    "Allow conversion of web pages to PDF documents (internal use only)",
+                  )}
+                </Text>
+              </div>
+              <Group gap="xs">
+                <Switch
+                  checked={settings.enableUrlToPDF || false}
+                  onChange={(e) => {
+                    if (!loginEnabled) return;
+                    setSettings({ ...settings, enableUrlToPDF: e.target.checked });
+                  }}
+                  disabled={!loginEnabled}
+                  styles={getDisabledStyles()}
+                />
+                <PendingBadge show={isFieldPending("enableUrlToPDF")} />
+              </Group>
+            </div>
+
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+              <div>
+                <Text fw={500} size="sm">
+                  {t("admin.settings.advanced.disableSanitize.label", "Disable HTML Sanitization")}
+                </Text>
+                <Text size="xs" c="dimmed" mt={4}>
+                  {t(
+                    "admin.settings.advanced.disableSanitize.description",
+                    "Disable HTML sanitization (WARNING: Security risk - can lead to XSS injections)",
+                  )}
+                </Text>
+              </div>
+              <Group gap="xs">
+                <Switch
+                  checked={settings.disableSanitize || false}
+                  onChange={(e) => {
+                    if (!loginEnabled) return;
+                    setSettings({ ...settings, disableSanitize: e.target.checked });
+                  }}
+                  disabled={!loginEnabled}
+                  styles={getDisabledStyles()}
+                />
+                <PendingBadge show={isFieldPending("disableSanitize")} />
+              </Group>
+            </div>
+          </Stack>
+        </Paper>
+
+        {/* Processing Settings */}
+        <Paper withBorder p="md" radius="md">
+          <Stack gap="md">
+            <Text fw={600} size="sm" mb="xs">
+              {t("admin.settings.advanced.processing", "Processing")}
+            </Text>
+
+            <div>
+              <NumberInput
+                label={
+                  <Group gap="xs">
+                    <span>{t("admin.settings.advanced.maxDPI.label", "Maximum DPI")}</span>
+                    <PendingBadge show={isFieldPending("maxDPI")} />
+                  </Group>
+                }
+                description={t(
+                  "admin.settings.advanced.maxDPI.description",
+                  "Maximum DPI for image processing (0 = unlimited)",
+                )}
+                value={settings.maxDPI || 0}
+                onChange={(value) => setSettings({ ...settings, maxDPI: Number(value) })}
+                min={0}
+                max={3000}
+                disabled={!loginEnabled}
+              />
+            </div>
+
+            {/* Tessdata Directory */}
+            <div>
+              <TextInput
+                label={
+                  <Group gap="xs">
+                    <span>{t("admin.settings.advanced.tessdataDir.label", "Tessdata Directory")}</span>
+                    <PendingBadge show={isFieldPending("tessdataDir")} />
+                  </Group>
+                }
+                description={t(
+                  "admin.settings.advanced.tessdataDir.description",
+                  "Path to the directory containing Tessdata files for OCR",
+                )}
+                value={settings.tessdataDir || ""}
+                onChange={(e) => setSettings({ ...settings, tessdataDir: e.target.value })}
+                placeholder="/usr/share/tessdata"
+                disabled={!loginEnabled}
+              />
+              {tessdataLanguagesLoading ? (
+                <Group gap="xs" mt={6}>
+                  <Loader size="xs" />
+                  <Text size="xs">
+                    {t("admin.settings.advanced.tessdataDir.loadingLanguages", "Loading installed tessdata languages...")}
+                  </Text>
+                </Group>
+              ) : (
+                <Text size="xs" c="dimmed" mt={6}>
+                  {tessdataLanguages.length > 0
+                    ? `${t("admin.settings.advanced.tessdataDir.installedLanguages", "Installed tessdata languages")}: ${tessdataLanguages.join(", ")}`
+                    : t(
+                        "admin.settings.advanced.tessdataDir.noLanguages",
+                        "No tessdata languages found in the configured directory",
+                      )}
+                </Text>
               )}
-              {!tessdataDirWritable && manualDownloadLinks.length > 0 && (
-                <Stack gap="xs">
-                  <Text size="xs" c="dimmed">
+              <Stack gap="xs" mt="sm">
+                <MultiSelect
+                  label={t("admin.settings.advanced.tessdataDir.downloadLabel", "Download additional tessdata languages")}
+                  placeholder={t("admin.settings.advanced.tessdataDir.downloadPlaceholder", "Select languages")}
+                  data={remoteTessdataLanguages.map((lang) => ({ value: lang, label: lang }))}
+                  searchable
+                  disabled={!loginEnabled || remoteTessdataLanguages.length === 0}
+                  value={selectedDownloadLanguages}
+                  onChange={setSelectedDownloadLanguages}
+                  comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_CONFIG_MODAL }}
+                  nothingFoundMessage={t(
+                    "admin.settings.advanced.tessdataDir.downloadNothingFound",
+                    "No additional languages found",
+                  )}
+                />
+                {!tessdataDirWritable && (
+                  <Text size="xs" c="yellow.4">
                     {t(
-                      'admin.settings.advanced.tessdataDir.manualLinks',
-                      'Manual downloads: click the links and place the files into the tessdata folder.'
+                      "admin.settings.advanced.tessdataDir.permissionNotice",
+                      "The tessdata path is not writable. Downloads will be opened in the browser; please save the .traineddata files manually into the tessdata folder.",
                     )}
                   </Text>
-                  <Stack gap={4}>
-                    {manualDownloadLinks.map((link) => (
-                      <a key={link} href={link} target="_blank" rel="noreferrer" style={{ fontSize: '12px' }}>
-                        {link}
-                      </a>
-                    ))}
+                )}
+                {!tessdataDirWritable && manualDownloadLinks.length > 0 && (
+                  <Stack gap="xs">
+                    <Text size="xs" c="dimmed">
+                      {t(
+                        "admin.settings.advanced.tessdataDir.manualLinks",
+                        "Manual downloads: click the links and place the files into the tessdata folder.",
+                      )}
+                    </Text>
+                    <Stack gap={4}>
+                      {manualDownloadLinks.map((link) => (
+                        <a key={link} href={link} target="_blank" rel="noreferrer" style={{ fontSize: "12px" }}>
+                          {link}
+                        </a>
+                      ))}
+                    </Stack>
                   </Stack>
-                </Stack>
-              )}
-              <Group justify="flex-end">
-                <Button
-                  size="xs"
-                  variant="light"
-                  onClick={handleDownloadTessdataLanguages}
-                  loading={downloadLanguagesLoading}
-                  disabled={!loginEnabled || remoteTessdataLanguages.length === 0}
-                >
-                  {t('admin.settings.advanced.tessdataDir.downloadButton', 'Download selected languages')}
-                </Button>
+                )}
+                <Group justify="flex-end">
+                  <Button
+                    size="xs"
+                    variant="light"
+                    onClick={handleDownloadTessdataLanguages}
+                    loading={downloadLanguagesLoading}
+                    disabled={!loginEnabled || remoteTessdataLanguages.length === 0}
+                  >
+                    {t("admin.settings.advanced.tessdataDir.downloadButton", "Download selected languages")}
+                  </Button>
+                </Group>
+              </Stack>
+            </div>
+          </Stack>
+        </Paper>
+
+        {/* Temp File Management */}
+        <Paper withBorder p="md" radius="md">
+          <Stack gap="md">
+            <div>
+              <Text fw={600} size="sm" mb="xs">
+                {t("admin.settings.advanced.tempFileManagement.label", "Temp File Management")}
+              </Text>
+              <Text size="xs" c="dimmed">
+                {t(
+                  "admin.settings.advanced.tempFileManagement.description",
+                  "Configure temporary file storage and cleanup behavior",
+                )}
+              </Text>
+            </div>
+
+            <div>
+              <TextInput
+                label={t("admin.settings.advanced.tempFileManagement.baseTmpDir.label", "Base Temp Directory")}
+                description={t(
+                  "admin.settings.advanced.tempFileManagement.baseTmpDir.description",
+                  "Base directory for temporary files (leave empty for default: java.io.tmpdir/stirling-pdf)",
+                )}
+                value={settings.tempFileManagement?.baseTmpDir || ""}
+                onChange={(e) =>
+                  setSettings({
+                    ...settings,
+                    tempFileManagement: { ...settings.tempFileManagement, baseTmpDir: e.target.value },
+                  })
+                }
+                placeholder="Default: java.io.tmpdir/stirling-pdf"
+                disabled={!loginEnabled}
+              />
+            </div>
+
+            <div>
+              <TextInput
+                label={t("admin.settings.advanced.tempFileManagement.libreofficeDir.label", "LibreOffice Temp Directory")}
+                description={t(
+                  "admin.settings.advanced.tempFileManagement.libreofficeDir.description",
+                  "Directory for LibreOffice temp files (leave empty for default: baseTmpDir/libreoffice)",
+                )}
+                value={settings.tempFileManagement?.libreofficeDir || ""}
+                onChange={(e) =>
+                  setSettings({
+                    ...settings,
+                    tempFileManagement: { ...settings.tempFileManagement, libreofficeDir: e.target.value },
+                  })
+                }
+                placeholder="Default: baseTmpDir/libreoffice"
+                disabled={!loginEnabled}
+              />
+            </div>
+
+            <div>
+              <TextInput
+                label={t("admin.settings.advanced.tempFileManagement.systemTempDir.label", "System Temp Directory")}
+                description={t(
+                  "admin.settings.advanced.tempFileManagement.systemTempDir.description",
+                  "System temp directory to clean (only used if cleanupSystemTemp is enabled)",
+                )}
+                value={settings.tempFileManagement?.systemTempDir || ""}
+                onChange={(e) =>
+                  setSettings({
+                    ...settings,
+                    tempFileManagement: { ...settings.tempFileManagement, systemTempDir: e.target.value },
+                  })
+                }
+                placeholder="System temp directory path"
+                disabled={!loginEnabled}
+              />
+            </div>
+
+            <div>
+              <TextInput
+                label={t("admin.settings.advanced.tempFileManagement.prefix.label", "Temp File Prefix")}
+                description={t("admin.settings.advanced.tempFileManagement.prefix.description", "Prefix for temp file names")}
+                value={settings.tempFileManagement?.prefix || "stirling-pdf-"}
+                onChange={(e) =>
+                  setSettings({
+                    ...settings,
+                    tempFileManagement: { ...settings.tempFileManagement, prefix: e.target.value },
+                  })
+                }
+                placeholder="stirling-pdf-"
+                disabled={!loginEnabled}
+              />
+            </div>
+
+            <div>
+              <NumberInput
+                label={t("admin.settings.advanced.tempFileManagement.maxAgeHours.label", "Max Age (hours)")}
+                description={t(
+                  "admin.settings.advanced.tempFileManagement.maxAgeHours.description",
+                  "Maximum age in hours before temp files are cleaned up",
+                )}
+                value={settings.tempFileManagement?.maxAgeHours ?? 24}
+                onChange={(value) =>
+                  setSettings({
+                    ...settings,
+                    tempFileManagement: { ...settings.tempFileManagement, maxAgeHours: Number(value) },
+                  })
+                }
+                min={1}
+                max={720}
+                disabled={!loginEnabled}
+              />
+            </div>
+
+            <div>
+              <NumberInput
+                label={t(
+                  "admin.settings.advanced.tempFileManagement.cleanupIntervalMinutes.label",
+                  "Cleanup Interval (minutes)",
+                )}
+                description={t(
+                  "admin.settings.advanced.tempFileManagement.cleanupIntervalMinutes.description",
+                  "How often to run cleanup (in minutes)",
+                )}
+                value={settings.tempFileManagement?.cleanupIntervalMinutes ?? 30}
+                onChange={(value) =>
+                  setSettings({
+                    ...settings,
+                    tempFileManagement: { ...settings.tempFileManagement, cleanupIntervalMinutes: Number(value) },
+                  })
+                }
+                min={1}
+                max={1440}
+                disabled={!loginEnabled}
+              />
+            </div>
+
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+              <div>
+                <Text fw={500} size="sm">
+                  {t("admin.settings.advanced.tempFileManagement.startupCleanup.label", "Startup Cleanup")}
+                </Text>
+                <Text size="xs" c="dimmed" mt={4}>
+                  {t(
+                    "admin.settings.advanced.tempFileManagement.startupCleanup.description",
+                    "Clean up old temp files on application startup",
+                  )}
+                </Text>
+              </div>
+              <Group gap="xs">
+                <Switch
+                  checked={settings.tempFileManagement?.startupCleanup ?? true}
+                  onChange={(e) => {
+                    if (!loginEnabled) return;
+                    setSettings({
+                      ...settings,
+                      tempFileManagement: { ...settings.tempFileManagement, startupCleanup: e.target.checked },
+                    });
+                  }}
+                  disabled={!loginEnabled}
+                  styles={getDisabledStyles()}
+                />
+                <PendingBadge show={isFieldPending("tempFileManagement.startupCleanup")} />
               </Group>
-            </Stack>
-          </div>
-        </Stack>
-      </Paper>
+            </div>
 
-      {/* Temp File Management */}
-      <Paper withBorder p="md" radius="md">
-        <Stack gap="md">
-          <div>
-            <Text fw={600} size="sm" mb="xs">{t('admin.settings.advanced.tempFileManagement.label', 'Temp File Management')}</Text>
-            <Text size="xs" c="dimmed">
-              {t('admin.settings.advanced.tempFileManagement.description', 'Configure temporary file storage and cleanup behavior')}
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+              <div>
+                <Text fw={500} size="sm">
+                  {t("admin.settings.advanced.tempFileManagement.cleanupSystemTemp.label", "Cleanup System Temp")}
+                </Text>
+                <Text size="xs" c="dimmed" mt={4}>
+                  {t(
+                    "admin.settings.advanced.tempFileManagement.cleanupSystemTemp.description",
+                    "Whether to clean broader system temp directory (use with caution)",
+                  )}
+                </Text>
+              </div>
+              <Group gap="xs">
+                <Switch
+                  checked={settings.tempFileManagement?.cleanupSystemTemp ?? false}
+                  onChange={(e) => {
+                    if (!loginEnabled) return;
+                    setSettings({
+                      ...settings,
+                      tempFileManagement: { ...settings.tempFileManagement, cleanupSystemTemp: e.target.checked },
+                    });
+                  }}
+                  disabled={!loginEnabled}
+                  styles={getDisabledStyles()}
+                />
+                <PendingBadge show={isFieldPending("tempFileManagement.cleanupSystemTemp")} />
+              </Group>
+            </div>
+          </Stack>
+        </Paper>
+
+        {/* Process Executor Limits */}
+        <Paper withBorder p="md" radius="md">
+          <Stack gap="md">
+            <Text fw={600} size="sm">
+              {t("admin.settings.advanced.processExecutor.label", "Process Executor Limits")}
+            </Text>
+            <Text size="xs" c="dimmed">
+              {t(
+                "admin.settings.advanced.processExecutor.description",
+                "Configure session limits and timeouts for each process executor",
+              )}
             </Text>
-          </div>
 
-          <div>
-            <TextInput
-              label={t('admin.settings.advanced.tempFileManagement.baseTmpDir.label', 'Base Temp Directory')}
-              description={t('admin.settings.advanced.tempFileManagement.baseTmpDir.description', 'Base directory for temporary files (leave empty for default: java.io.tmpdir/stirling-pdf)')}
-              value={settings.tempFileManagement?.baseTmpDir || ''}
-              onChange={(e) => setSettings({
-                ...settings,
-                tempFileManagement: { ...settings.tempFileManagement, baseTmpDir: e.target.value }
-              })}
-              placeholder="Default: java.io.tmpdir/stirling-pdf"
-              disabled={!loginEnabled}
-            />
-          </div>
+            <Accordion variant="separated">
+              {/* LibreOffice */}
+              <Accordion.Item value="libreOffice">
+                <Accordion.Control>
+                  {t("admin.settings.advanced.processExecutor.libreOffice", "LibreOffice")}
+                </Accordion.Control>
+                <Accordion.Panel>
+                  <Stack gap="sm">
+                    <NumberInput
+                      label={t("admin.settings.advanced.processExecutor.sessionLimit.label", "Session Limit")}
+                      description={t(
+                        "admin.settings.advanced.processExecutor.sessionLimit.description",
+                        "Maximum concurrent instances",
+                      )}
+                      value={settings.processExecutor?.sessionLimit?.libreOfficeSessionLimit ?? 1}
+                      onChange={(value) =>
+                        setSettings({
+                          ...settings,
+                          processExecutor: {
+                            ...settings.processExecutor,
+                            sessionLimit: {
+                              ...settings.processExecutor?.sessionLimit,
+                              libreOfficeSessionLimit: Number(value),
+                            },
+                          },
+                        })
+                      }
+                      min={1}
+                      max={100}
+                      disabled={!loginEnabled}
+                    />
+                    <NumberInput
+                      label={t("admin.settings.advanced.processExecutor.timeout.label", "Timeout (minutes)")}
+                      description={t("admin.settings.advanced.processExecutor.timeout.description", "Maximum execution time")}
+                      value={settings.processExecutor?.timeoutMinutes?.libreOfficetimeoutMinutes ?? 30}
+                      onChange={(value) =>
+                        setSettings({
+                          ...settings,
+                          processExecutor: {
+                            ...settings.processExecutor,
+                            timeoutMinutes: {
+                              ...settings.processExecutor?.timeoutMinutes,
+                              libreOfficetimeoutMinutes: Number(value),
+                            },
+                          },
+                        })
+                      }
+                      min={1}
+                      max={240}
+                      disabled={!loginEnabled}
+                    />
+                  </Stack>
+                </Accordion.Panel>
+              </Accordion.Item>
 
-          <div>
-            <TextInput
-              label={t('admin.settings.advanced.tempFileManagement.libreofficeDir.label', 'LibreOffice Temp Directory')}
-              description={t('admin.settings.advanced.tempFileManagement.libreofficeDir.description', 'Directory for LibreOffice temp files (leave empty for default: baseTmpDir/libreoffice)')}
-              value={settings.tempFileManagement?.libreofficeDir || ''}
-              onChange={(e) => setSettings({
-                ...settings,
-                tempFileManagement: { ...settings.tempFileManagement, libreofficeDir: e.target.value }
-              })}
-              placeholder="Default: baseTmpDir/libreoffice"
-              disabled={!loginEnabled}
-            />
-          </div>
+              {/* PDF to HTML */}
+              <Accordion.Item value="pdfToHtml">
+                <Accordion.Control>{t("admin.settings.advanced.processExecutor.pdfToHtml", "PDF to HTML")}</Accordion.Control>
+                <Accordion.Panel>
+                  <Stack gap="sm">
+                    <NumberInput
+                      label={t("admin.settings.advanced.processExecutor.sessionLimit.label", "Session Limit")}
+                      description={t(
+                        "admin.settings.advanced.processExecutor.sessionLimit.description",
+                        "Maximum concurrent instances",
+                      )}
+                      value={settings.processExecutor?.sessionLimit?.pdfToHtmlSessionLimit ?? 1}
+                      onChange={(value) =>
+                        setSettings({
+                          ...settings,
+                          processExecutor: {
+                            ...settings.processExecutor,
+                            sessionLimit: { ...settings.processExecutor?.sessionLimit, pdfToHtmlSessionLimit: Number(value) },
+                          },
+                        })
+                      }
+                      min={1}
+                      max={100}
+                      disabled={!loginEnabled}
+                    />
+                    <NumberInput
+                      label={t("admin.settings.advanced.processExecutor.timeout.label", "Timeout (minutes)")}
+                      description={t("admin.settings.advanced.processExecutor.timeout.description", "Maximum execution time")}
+                      value={settings.processExecutor?.timeoutMinutes?.pdfToHtmltimeoutMinutes ?? 20}
+                      onChange={(value) =>
+                        setSettings({
+                          ...settings,
+                          processExecutor: {
+                            ...settings.processExecutor,
+                            timeoutMinutes: {
+                              ...settings.processExecutor?.timeoutMinutes,
+                              pdfToHtmltimeoutMinutes: Number(value),
+                            },
+                          },
+                        })
+                      }
+                      min={1}
+                      max={240}
+                      disabled={!loginEnabled}
+                    />
+                  </Stack>
+                </Accordion.Panel>
+              </Accordion.Item>
 
-          <div>
-            <TextInput
-              label={t('admin.settings.advanced.tempFileManagement.systemTempDir.label', 'System Temp Directory')}
-              description={t('admin.settings.advanced.tempFileManagement.systemTempDir.description', 'System temp directory to clean (only used if cleanupSystemTemp is enabled)')}
-              value={settings.tempFileManagement?.systemTempDir || ''}
-              onChange={(e) => setSettings({
-                ...settings,
-                tempFileManagement: { ...settings.tempFileManagement, systemTempDir: e.target.value }
-              })}
-              placeholder="System temp directory path"
-              disabled={!loginEnabled}
-            />
-          </div>
+              {/* QPDF */}
+              <Accordion.Item value="qpdf">
+                <Accordion.Control>{t("admin.settings.advanced.processExecutor.qpdf", "QPDF")}</Accordion.Control>
+                <Accordion.Panel>
+                  <Stack gap="sm">
+                    <NumberInput
+                      label={t("admin.settings.advanced.processExecutor.sessionLimit.label", "Session Limit")}
+                      description={t(
+                        "admin.settings.advanced.processExecutor.sessionLimit.description",
+                        "Maximum concurrent instances",
+                      )}
+                      value={settings.processExecutor?.sessionLimit?.qpdfSessionLimit ?? 4}
+                      onChange={(value) =>
+                        setSettings({
+                          ...settings,
+                          processExecutor: {
+                            ...settings.processExecutor,
+                            sessionLimit: { ...settings.processExecutor?.sessionLimit, qpdfSessionLimit: Number(value) },
+                          },
+                        })
+                      }
+                      min={1}
+                      max={100}
+                      disabled={!loginEnabled}
+                    />
+                    <NumberInput
+                      label={t("admin.settings.advanced.processExecutor.timeout.label", "Timeout (minutes)")}
+                      description={t("admin.settings.advanced.processExecutor.timeout.description", "Maximum execution time")}
+                      value={settings.processExecutor?.timeoutMinutes?.qpdfTimeoutMinutes ?? 30}
+                      onChange={(value) =>
+                        setSettings({
+                          ...settings,
+                          processExecutor: {
+                            ...settings.processExecutor,
+                            timeoutMinutes: { ...settings.processExecutor?.timeoutMinutes, qpdfTimeoutMinutes: Number(value) },
+                          },
+                        })
+                      }
+                      min={1}
+                      max={240}
+                      disabled={!loginEnabled}
+                    />
+                  </Stack>
+                </Accordion.Panel>
+              </Accordion.Item>
 
-          <div>
-            <TextInput
-              label={t('admin.settings.advanced.tempFileManagement.prefix.label', 'Temp File Prefix')}
-              description={t('admin.settings.advanced.tempFileManagement.prefix.description', 'Prefix for temp file names')}
-              value={settings.tempFileManagement?.prefix || 'stirling-pdf-'}
-              onChange={(e) => setSettings({
-                ...settings,
-                tempFileManagement: { ...settings.tempFileManagement, prefix: e.target.value }
-              })}
-              placeholder="stirling-pdf-"
-              disabled={!loginEnabled}
-            />
-          </div>
+              {/* Tesseract OCR */}
+              <Accordion.Item value="tesseract">
+                <Accordion.Control>
+                  {t("admin.settings.advanced.processExecutor.tesseract", "Tesseract OCR")}
+                </Accordion.Control>
+                <Accordion.Panel>
+                  <Stack gap="sm">
+                    <NumberInput
+                      label={t("admin.settings.advanced.processExecutor.sessionLimit.label", "Session Limit")}
+                      description={t(
+                        "admin.settings.advanced.processExecutor.sessionLimit.description",
+                        "Maximum concurrent instances",
+                      )}
+                      value={settings.processExecutor?.sessionLimit?.tesseractSessionLimit ?? 1}
+                      onChange={(value) =>
+                        setSettings({
+                          ...settings,
+                          processExecutor: {
+                            ...settings.processExecutor,
+                            sessionLimit: { ...settings.processExecutor?.sessionLimit, tesseractSessionLimit: Number(value) },
+                          },
+                        })
+                      }
+                      min={1}
+                      max={100}
+                      disabled={!loginEnabled}
+                    />
+                    <NumberInput
+                      label={t("admin.settings.advanced.processExecutor.timeout.label", "Timeout (minutes)")}
+                      description={t("admin.settings.advanced.processExecutor.timeout.description", "Maximum execution time")}
+                      value={settings.processExecutor?.timeoutMinutes?.tesseractTimeoutMinutes ?? 30}
+                      onChange={(value) =>
+                        setSettings({
+                          ...settings,
+                          processExecutor: {
+                            ...settings.processExecutor,
+                            timeoutMinutes: {
+                              ...settings.processExecutor?.timeoutMinutes,
+                              tesseractTimeoutMinutes: Number(value),
+                            },
+                          },
+                        })
+                      }
+                      min={1}
+                      max={240}
+                      disabled={!loginEnabled}
+                    />
+                  </Stack>
+                </Accordion.Panel>
+              </Accordion.Item>
 
-          <div>
-            <NumberInput
-              label={t('admin.settings.advanced.tempFileManagement.maxAgeHours.label', 'Max Age (hours)')}
-              description={t('admin.settings.advanced.tempFileManagement.maxAgeHours.description', 'Maximum age in hours before temp files are cleaned up')}
-              value={settings.tempFileManagement?.maxAgeHours ?? 24}
-              onChange={(value) => setSettings({
-                ...settings,
-                tempFileManagement: { ...settings.tempFileManagement, maxAgeHours: Number(value) }
-              })}
-              min={1}
-              max={720}
-              disabled={!loginEnabled}
-            />
-          </div>
+              {/* Python OpenCV */}
+              <Accordion.Item value="pythonOpenCv">
+                <Accordion.Control>
+                  {t("admin.settings.advanced.processExecutor.pythonOpenCv", "Python OpenCV")}
+                </Accordion.Control>
+                <Accordion.Panel>
+                  <Stack gap="sm">
+                    <NumberInput
+                      label={t("admin.settings.advanced.processExecutor.sessionLimit.label", "Session Limit")}
+                      description={t(
+                        "admin.settings.advanced.processExecutor.sessionLimit.description",
+                        "Maximum concurrent instances",
+                      )}
+                      value={settings.processExecutor?.sessionLimit?.pythonOpenCvSessionLimit ?? 8}
+                      onChange={(value) =>
+                        setSettings({
+                          ...settings,
+                          processExecutor: {
+                            ...settings.processExecutor,
+                            sessionLimit: {
+                              ...settings.processExecutor?.sessionLimit,
+                              pythonOpenCvSessionLimit: Number(value),
+                            },
+                          },
+                        })
+                      }
+                      min={1}
+                      max={100}
+                      disabled={!loginEnabled}
+                    />
+                    <NumberInput
+                      label={t("admin.settings.advanced.processExecutor.timeout.label", "Timeout (minutes)")}
+                      description={t("admin.settings.advanced.processExecutor.timeout.description", "Maximum execution time")}
+                      value={settings.processExecutor?.timeoutMinutes?.pythonOpenCvtimeoutMinutes ?? 30}
+                      onChange={(value) =>
+                        setSettings({
+                          ...settings,
+                          processExecutor: {
+                            ...settings.processExecutor,
+                            timeoutMinutes: {
+                              ...settings.processExecutor?.timeoutMinutes,
+                              pythonOpenCvtimeoutMinutes: Number(value),
+                            },
+                          },
+                        })
+                      }
+                      min={1}
+                      max={240}
+                      disabled={!loginEnabled}
+                    />
+                  </Stack>
+                </Accordion.Panel>
+              </Accordion.Item>
 
-          <div>
-            <NumberInput
-              label={t('admin.settings.advanced.tempFileManagement.cleanupIntervalMinutes.label', 'Cleanup Interval (minutes)')}
-              description={t('admin.settings.advanced.tempFileManagement.cleanupIntervalMinutes.description', 'How often to run cleanup (in minutes)')}
-              value={settings.tempFileManagement?.cleanupIntervalMinutes ?? 30}
-              onChange={(value) => setSettings({
-                ...settings,
-                tempFileManagement: { ...settings.tempFileManagement, cleanupIntervalMinutes: Number(value) }
-              })}
-              min={1}
-              max={1440}
-              disabled={!loginEnabled}
-            />
-          </div>
+              {/* WeasyPrint */}
+              <Accordion.Item value="weasyPrint">
+                <Accordion.Control>{t("admin.settings.advanced.processExecutor.weasyPrint", "WeasyPrint")}</Accordion.Control>
+                <Accordion.Panel>
+                  <Stack gap="sm">
+                    <NumberInput
+                      label={t("admin.settings.advanced.processExecutor.sessionLimit.label", "Session Limit")}
+                      description={t(
+                        "admin.settings.advanced.processExecutor.sessionLimit.description",
+                        "Maximum concurrent instances",
+                      )}
+                      value={settings.processExecutor?.sessionLimit?.weasyPrintSessionLimit ?? 16}
+                      onChange={(value) =>
+                        setSettings({
+                          ...settings,
+                          processExecutor: {
+                            ...settings.processExecutor,
+                            sessionLimit: { ...settings.processExecutor?.sessionLimit, weasyPrintSessionLimit: Number(value) },
+                          },
+                        })
+                      }
+                      min={1}
+                      max={100}
+                      disabled={!loginEnabled}
+                    />
+                    <NumberInput
+                      label={t("admin.settings.advanced.processExecutor.timeout.label", "Timeout (minutes)")}
+                      description={t("admin.settings.advanced.processExecutor.timeout.description", "Maximum execution time")}
+                      value={settings.processExecutor?.timeoutMinutes?.weasyPrinttimeoutMinutes ?? 30}
+                      onChange={(value) =>
+                        setSettings({
+                          ...settings,
+                          processExecutor: {
+                            ...settings.processExecutor,
+                            timeoutMinutes: {
+                              ...settings.processExecutor?.timeoutMinutes,
+                              weasyPrinttimeoutMinutes: Number(value),
+                            },
+                          },
+                        })
+                      }
+                      min={1}
+                      max={240}
+                      disabled={!loginEnabled}
+                    />
+                  </Stack>
+                </Accordion.Panel>
+              </Accordion.Item>
 
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <div>
-              <Text fw={500} size="sm">{t('admin.settings.advanced.tempFileManagement.startupCleanup.label', 'Startup Cleanup')}</Text>
-              <Text size="xs" c="dimmed" mt={4}>
-                {t('admin.settings.advanced.tempFileManagement.startupCleanup.description', 'Clean up old temp files on application startup')}
-              </Text>
-            </div>
-            <Group gap="xs">
-              <Switch
-                checked={settings.tempFileManagement?.startupCleanup ?? true}
-                onChange={(e) => {
-                  if (!loginEnabled) return;
-                  setSettings({
-                    ...settings,
-                    tempFileManagement: { ...settings.tempFileManagement, startupCleanup: e.target.checked }
-                  });
-                }}
-                disabled={!loginEnabled}
-                styles={getDisabledStyles()}
-              />
-              <PendingBadge show={isFieldPending('tempFileManagement.startupCleanup')} />
-            </Group>
-          </div>
+              {/* Install App */}
+              <Accordion.Item value="installApp">
+                <Accordion.Control>{t("admin.settings.advanced.processExecutor.installApp", "Install App")}</Accordion.Control>
+                <Accordion.Panel>
+                  <Stack gap="sm">
+                    <NumberInput
+                      label={t("admin.settings.advanced.processExecutor.sessionLimit.label", "Session Limit")}
+                      description={t(
+                        "admin.settings.advanced.processExecutor.sessionLimit.description",
+                        "Maximum concurrent instances",
+                      )}
+                      value={settings.processExecutor?.sessionLimit?.installAppSessionLimit ?? 1}
+                      onChange={(value) =>
+                        setSettings({
+                          ...settings,
+                          processExecutor: {
+                            ...settings.processExecutor,
+                            sessionLimit: { ...settings.processExecutor?.sessionLimit, installAppSessionLimit: Number(value) },
+                          },
+                        })
+                      }
+                      min={1}
+                      max={100}
+                      disabled={!loginEnabled}
+                    />
+                    <NumberInput
+                      label={t("admin.settings.advanced.processExecutor.timeout.label", "Timeout (minutes)")}
+                      description={t("admin.settings.advanced.processExecutor.timeout.description", "Maximum execution time")}
+                      value={settings.processExecutor?.timeoutMinutes?.installApptimeoutMinutes ?? 60}
+                      onChange={(value) =>
+                        setSettings({
+                          ...settings,
+                          processExecutor: {
+                            ...settings.processExecutor,
+                            timeoutMinutes: {
+                              ...settings.processExecutor?.timeoutMinutes,
+                              installApptimeoutMinutes: Number(value),
+                            },
+                          },
+                        })
+                      }
+                      min={1}
+                      max={240}
+                      disabled={!loginEnabled}
+                    />
+                  </Stack>
+                </Accordion.Panel>
+              </Accordion.Item>
 
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <div>
-              <Text fw={500} size="sm">{t('admin.settings.advanced.tempFileManagement.cleanupSystemTemp.label', 'Cleanup System Temp')}</Text>
-              <Text size="xs" c="dimmed" mt={4}>
-                {t('admin.settings.advanced.tempFileManagement.cleanupSystemTemp.description', 'Whether to clean broader system temp directory (use with caution)')}
-              </Text>
-            </div>
-            <Group gap="xs">
-              <Switch
-                checked={settings.tempFileManagement?.cleanupSystemTemp ?? false}
-                onChange={(e) => {
-                  if (!loginEnabled) return;
-                  setSettings({
-                    ...settings,
-                    tempFileManagement: { ...settings.tempFileManagement, cleanupSystemTemp: e.target.checked }
-                  });
-                }}
-                disabled={!loginEnabled}
-                styles={getDisabledStyles()}
-              />
-              <PendingBadge show={isFieldPending('tempFileManagement.cleanupSystemTemp')} />
-            </Group>
-          </div>
-        </Stack>
-      </Paper>
+              {/* Calibre */}
+              <Accordion.Item value="calibre">
+                <Accordion.Control>{t("admin.settings.advanced.processExecutor.calibre", "Calibre")}</Accordion.Control>
+                <Accordion.Panel>
+                  <Stack gap="sm">
+                    <NumberInput
+                      label={t("admin.settings.advanced.processExecutor.sessionLimit.label", "Session Limit")}
+                      description={t(
+                        "admin.settings.advanced.processExecutor.sessionLimit.description",
+                        "Maximum concurrent instances",
+                      )}
+                      value={settings.processExecutor?.sessionLimit?.calibreSessionLimit ?? 1}
+                      onChange={(value) =>
+                        setSettings({
+                          ...settings,
+                          processExecutor: {
+                            ...settings.processExecutor,
+                            sessionLimit: { ...settings.processExecutor?.sessionLimit, calibreSessionLimit: Number(value) },
+                          },
+                        })
+                      }
+                      min={1}
+                      max={100}
+                      disabled={!loginEnabled}
+                    />
+                    <NumberInput
+                      label={t("admin.settings.advanced.processExecutor.timeout.label", "Timeout (minutes)")}
+                      description={t("admin.settings.advanced.processExecutor.timeout.description", "Maximum execution time")}
+                      value={settings.processExecutor?.timeoutMinutes?.calibretimeoutMinutes ?? 30}
+                      onChange={(value) =>
+                        setSettings({
+                          ...settings,
+                          processExecutor: {
+                            ...settings.processExecutor,
+                            timeoutMinutes: {
+                              ...settings.processExecutor?.timeoutMinutes,
+                              calibretimeoutMinutes: Number(value),
+                            },
+                          },
+                        })
+                      }
+                      min={1}
+                      max={240}
+                      disabled={!loginEnabled}
+                    />
+                  </Stack>
+                </Accordion.Panel>
+              </Accordion.Item>
 
-      {/* Process Executor Limits */}
-      <Paper withBorder p="md" radius="md">
-        <Stack gap="md">
-          <Text fw={600} size="sm">{t('admin.settings.advanced.processExecutor.label', 'Process Executor Limits')}</Text>
-          <Text size="xs" c="dimmed">
-            {t('admin.settings.advanced.processExecutor.description', 'Configure session limits and timeouts for each process executor')}
-          </Text>
+              {/* Ghostscript */}
+              <Accordion.Item value="ghostscript">
+                <Accordion.Control>
+                  {t("admin.settings.advanced.processExecutor.ghostscript", "Ghostscript")}
+                </Accordion.Control>
+                <Accordion.Panel>
+                  <Stack gap="sm">
+                    <NumberInput
+                      label={t("admin.settings.advanced.processExecutor.sessionLimit.label", "Session Limit")}
+                      description={t(
+                        "admin.settings.advanced.processExecutor.sessionLimit.description",
+                        "Maximum concurrent instances",
+                      )}
+                      value={settings.processExecutor?.sessionLimit?.ghostscriptSessionLimit ?? 8}
+                      onChange={(value) =>
+                        setSettings({
+                          ...settings,
+                          processExecutor: {
+                            ...settings.processExecutor,
+                            sessionLimit: {
+                              ...settings.processExecutor?.sessionLimit,
+                              ghostscriptSessionLimit: Number(value),
+                            },
+                          },
+                        })
+                      }
+                      min={1}
+                      max={100}
+                      disabled={!loginEnabled}
+                    />
+                    <NumberInput
+                      label={t("admin.settings.advanced.processExecutor.timeout.label", "Timeout (minutes)")}
+                      description={t("admin.settings.advanced.processExecutor.timeout.description", "Maximum execution time")}
+                      value={settings.processExecutor?.timeoutMinutes?.ghostscriptTimeoutMinutes ?? 30}
+                      onChange={(value) =>
+                        setSettings({
+                          ...settings,
+                          processExecutor: {
+                            ...settings.processExecutor,
+                            timeoutMinutes: {
+                              ...settings.processExecutor?.timeoutMinutes,
+                              ghostscriptTimeoutMinutes: Number(value),
+                            },
+                          },
+                        })
+                      }
+                      min={1}
+                      max={240}
+                      disabled={!loginEnabled}
+                    />
+                  </Stack>
+                </Accordion.Panel>
+              </Accordion.Item>
 
-          <Accordion variant="separated">
-            {/* LibreOffice */}
-            <Accordion.Item value="libreOffice">
-              <Accordion.Control>{t('admin.settings.advanced.processExecutor.libreOffice', 'LibreOffice')}</Accordion.Control>
-              <Accordion.Panel>
-                <Stack gap="sm">
-                  <NumberInput
-                    label={t('admin.settings.advanced.processExecutor.sessionLimit.label', 'Session Limit')}
-                    description={t('admin.settings.advanced.processExecutor.sessionLimit.description', 'Maximum concurrent instances')}
-                    value={settings.processExecutor?.sessionLimit?.libreOfficeSessionLimit ?? 1}
-                    onChange={(value) => setSettings({
-                      ...settings,
-                      processExecutor: {
-                        ...settings.processExecutor,
-                        sessionLimit: { ...settings.processExecutor?.sessionLimit, libreOfficeSessionLimit: Number(value) }
+              {/* OCRmyPDF */}
+              <Accordion.Item value="ocrMyPdf">
+                <Accordion.Control>{t("admin.settings.advanced.processExecutor.ocrMyPdf", "OCRmyPDF")}</Accordion.Control>
+                <Accordion.Panel>
+                  <Stack gap="sm">
+                    <NumberInput
+                      label={t("admin.settings.advanced.processExecutor.sessionLimit.label", "Session Limit")}
+                      description={t(
+                        "admin.settings.advanced.processExecutor.sessionLimit.description",
+                        "Maximum concurrent instances",
+                      )}
+                      value={settings.processExecutor?.sessionLimit?.ocrMyPdfSessionLimit ?? 2}
+                      onChange={(value) =>
+                        setSettings({
+                          ...settings,
+                          processExecutor: {
+                            ...settings.processExecutor,
+                            sessionLimit: { ...settings.processExecutor?.sessionLimit, ocrMyPdfSessionLimit: Number(value) },
+                          },
+                        })
                       }
-                    })}
-                    min={1}
-                    max={100}
-                    disabled={!loginEnabled}
-                  />
-                  <NumberInput
-                    label={t('admin.settings.advanced.processExecutor.timeout.label', 'Timeout (minutes)')}
-                    description={t('admin.settings.advanced.processExecutor.timeout.description', 'Maximum execution time')}
-                    value={settings.processExecutor?.timeoutMinutes?.libreOfficetimeoutMinutes ?? 30}
-                    onChange={(value) => setSettings({
-                      ...settings,
-                      processExecutor: {
-                        ...settings.processExecutor,
-                        timeoutMinutes: { ...settings.processExecutor?.timeoutMinutes, libreOfficetimeoutMinutes: Number(value) }
+                      min={1}
+                      max={100}
+                      disabled={!loginEnabled}
+                    />
+                    <NumberInput
+                      label={t("admin.settings.advanced.processExecutor.timeout.label", "Timeout (minutes)")}
+                      description={t("admin.settings.advanced.processExecutor.timeout.description", "Maximum execution time")}
+                      value={settings.processExecutor?.timeoutMinutes?.ocrMyPdfTimeoutMinutes ?? 30}
+                      onChange={(value) =>
+                        setSettings({
+                          ...settings,
+                          processExecutor: {
+                            ...settings.processExecutor,
+                            timeoutMinutes: {
+                              ...settings.processExecutor?.timeoutMinutes,
+                              ocrMyPdfTimeoutMinutes: Number(value),
+                            },
+                          },
+                        })
                       }
-                    })}
-                    min={1}
-                    max={240}
-                    disabled={!loginEnabled}
-                  />
-                </Stack>
-              </Accordion.Panel>
-            </Accordion.Item>
-
-            {/* PDF to HTML */}
-            <Accordion.Item value="pdfToHtml">
-              <Accordion.Control>{t('admin.settings.advanced.processExecutor.pdfToHtml', 'PDF to HTML')}</Accordion.Control>
-              <Accordion.Panel>
-                <Stack gap="sm">
-                  <NumberInput
-                    label={t('admin.settings.advanced.processExecutor.sessionLimit.label', 'Session Limit')}
-                    description={t('admin.settings.advanced.processExecutor.sessionLimit.description', 'Maximum concurrent instances')}
-                    value={settings.processExecutor?.sessionLimit?.pdfToHtmlSessionLimit ?? 1}
-                    onChange={(value) => setSettings({
-                      ...settings,
-                      processExecutor: {
-                        ...settings.processExecutor,
-                        sessionLimit: { ...settings.processExecutor?.sessionLimit, pdfToHtmlSessionLimit: Number(value) }
-                      }
-                    })}
-                    min={1}
-                    max={100}
-                    disabled={!loginEnabled}
-                  />
-                  <NumberInput
-                    label={t('admin.settings.advanced.processExecutor.timeout.label', 'Timeout (minutes)')}
-                    description={t('admin.settings.advanced.processExecutor.timeout.description', 'Maximum execution time')}
-                    value={settings.processExecutor?.timeoutMinutes?.pdfToHtmltimeoutMinutes ?? 20}
-                    onChange={(value) => setSettings({
-                      ...settings,
-                      processExecutor: {
-                        ...settings.processExecutor,
-                        timeoutMinutes: { ...settings.processExecutor?.timeoutMinutes, pdfToHtmltimeoutMinutes: Number(value) }
-                      }
-                    })}
-                    min={1}
-                    max={240}
-                    disabled={!loginEnabled}
-                  />
-                </Stack>
-              </Accordion.Panel>
-            </Accordion.Item>
-
-            {/* QPDF */}
-            <Accordion.Item value="qpdf">
-              <Accordion.Control>{t('admin.settings.advanced.processExecutor.qpdf', 'QPDF')}</Accordion.Control>
-              <Accordion.Panel>
-                <Stack gap="sm">
-                  <NumberInput
-                    label={t('admin.settings.advanced.processExecutor.sessionLimit.label', 'Session Limit')}
-                    description={t('admin.settings.advanced.processExecutor.sessionLimit.description', 'Maximum concurrent instances')}
-                    value={settings.processExecutor?.sessionLimit?.qpdfSessionLimit ?? 4}
-                    onChange={(value) => setSettings({
-                      ...settings,
-                      processExecutor: {
-                        ...settings.processExecutor,
-                        sessionLimit: { ...settings.processExecutor?.sessionLimit, qpdfSessionLimit: Number(value) }
-                      }
-                    })}
-                    min={1}
-                    max={100}
-                    disabled={!loginEnabled}
-                  />
-                  <NumberInput
-                    label={t('admin.settings.advanced.processExecutor.timeout.label', 'Timeout (minutes)')}
-                    description={t('admin.settings.advanced.processExecutor.timeout.description', 'Maximum execution time')}
-                    value={settings.processExecutor?.timeoutMinutes?.qpdfTimeoutMinutes ?? 30}
-                    onChange={(value) => setSettings({
-                      ...settings,
-                      processExecutor: {
-                        ...settings.processExecutor,
-                        timeoutMinutes: { ...settings.processExecutor?.timeoutMinutes, qpdfTimeoutMinutes: Number(value) }
-                      }
-                    })}
-                    min={1}
-                    max={240}
-                    disabled={!loginEnabled}
-                  />
-                </Stack>
-              </Accordion.Panel>
-            </Accordion.Item>
-
-            {/* Tesseract OCR */}
-            <Accordion.Item value="tesseract">
-              <Accordion.Control>{t('admin.settings.advanced.processExecutor.tesseract', 'Tesseract OCR')}</Accordion.Control>
-              <Accordion.Panel>
-                <Stack gap="sm">
-                  <NumberInput
-                    label={t('admin.settings.advanced.processExecutor.sessionLimit.label', 'Session Limit')}
-                    description={t('admin.settings.advanced.processExecutor.sessionLimit.description', 'Maximum concurrent instances')}
-                    value={settings.processExecutor?.sessionLimit?.tesseractSessionLimit ?? 1}
-                    onChange={(value) => setSettings({
-                      ...settings,
-                      processExecutor: {
-                        ...settings.processExecutor,
-                        sessionLimit: { ...settings.processExecutor?.sessionLimit, tesseractSessionLimit: Number(value) }
-                      }
-                    })}
-                    min={1}
-                    max={100}
-                    disabled={!loginEnabled}
-                  />
-                  <NumberInput
-                    label={t('admin.settings.advanced.processExecutor.timeout.label', 'Timeout (minutes)')}
-                    description={t('admin.settings.advanced.processExecutor.timeout.description', 'Maximum execution time')}
-                    value={settings.processExecutor?.timeoutMinutes?.tesseractTimeoutMinutes ?? 30}
-                    onChange={(value) => setSettings({
-                      ...settings,
-                      processExecutor: {
-                        ...settings.processExecutor,
-                        timeoutMinutes: { ...settings.processExecutor?.timeoutMinutes, tesseractTimeoutMinutes: Number(value) }
-                      }
-                    })}
-                    min={1}
-                    max={240}
-                    disabled={!loginEnabled}
-                  />
-                </Stack>
-              </Accordion.Panel>
-            </Accordion.Item>
-
-            {/* Python OpenCV */}
-            <Accordion.Item value="pythonOpenCv">
-              <Accordion.Control>{t('admin.settings.advanced.processExecutor.pythonOpenCv', 'Python OpenCV')}</Accordion.Control>
-              <Accordion.Panel>
-                <Stack gap="sm">
-                  <NumberInput
-                    label={t('admin.settings.advanced.processExecutor.sessionLimit.label', 'Session Limit')}
-                    description={t('admin.settings.advanced.processExecutor.sessionLimit.description', 'Maximum concurrent instances')}
-                    value={settings.processExecutor?.sessionLimit?.pythonOpenCvSessionLimit ?? 8}
-                    onChange={(value) => setSettings({
-                      ...settings,
-                      processExecutor: {
-                        ...settings.processExecutor,
-                        sessionLimit: { ...settings.processExecutor?.sessionLimit, pythonOpenCvSessionLimit: Number(value) }
-                      }
-                    })}
-                    min={1}
-                    max={100}
-                    disabled={!loginEnabled}
-                  />
-                  <NumberInput
-                    label={t('admin.settings.advanced.processExecutor.timeout.label', 'Timeout (minutes)')}
-                    description={t('admin.settings.advanced.processExecutor.timeout.description', 'Maximum execution time')}
-                    value={settings.processExecutor?.timeoutMinutes?.pythonOpenCvtimeoutMinutes ?? 30}
-                    onChange={(value) => setSettings({
-                      ...settings,
-                      processExecutor: {
-                        ...settings.processExecutor,
-                        timeoutMinutes: { ...settings.processExecutor?.timeoutMinutes, pythonOpenCvtimeoutMinutes: Number(value) }
-                      }
-                    })}
-                    min={1}
-                    max={240}
-                    disabled={!loginEnabled}
-                  />
-                </Stack>
-              </Accordion.Panel>
-            </Accordion.Item>
-
-            {/* WeasyPrint */}
-            <Accordion.Item value="weasyPrint">
-              <Accordion.Control>{t('admin.settings.advanced.processExecutor.weasyPrint', 'WeasyPrint')}</Accordion.Control>
-              <Accordion.Panel>
-                <Stack gap="sm">
-                  <NumberInput
-                    label={t('admin.settings.advanced.processExecutor.sessionLimit.label', 'Session Limit')}
-                    description={t('admin.settings.advanced.processExecutor.sessionLimit.description', 'Maximum concurrent instances')}
-                    value={settings.processExecutor?.sessionLimit?.weasyPrintSessionLimit ?? 16}
-                    onChange={(value) => setSettings({
-                      ...settings,
-                      processExecutor: {
-                        ...settings.processExecutor,
-                        sessionLimit: { ...settings.processExecutor?.sessionLimit, weasyPrintSessionLimit: Number(value) }
-                      }
-                    })}
-                    min={1}
-                    max={100}
-                    disabled={!loginEnabled}
-                  />
-                  <NumberInput
-                    label={t('admin.settings.advanced.processExecutor.timeout.label', 'Timeout (minutes)')}
-                    description={t('admin.settings.advanced.processExecutor.timeout.description', 'Maximum execution time')}
-                    value={settings.processExecutor?.timeoutMinutes?.weasyPrinttimeoutMinutes ?? 30}
-                    onChange={(value) => setSettings({
-                      ...settings,
-                      processExecutor: {
-                        ...settings.processExecutor,
-                        timeoutMinutes: { ...settings.processExecutor?.timeoutMinutes, weasyPrinttimeoutMinutes: Number(value) }
-                      }
-                    })}
-                    min={1}
-                    max={240}
-                    disabled={!loginEnabled}
-                  />
-                </Stack>
-              </Accordion.Panel>
-            </Accordion.Item>
-
-            {/* Install App */}
-            <Accordion.Item value="installApp">
-              <Accordion.Control>{t('admin.settings.advanced.processExecutor.installApp', 'Install App')}</Accordion.Control>
-              <Accordion.Panel>
-                <Stack gap="sm">
-                  <NumberInput
-                    label={t('admin.settings.advanced.processExecutor.sessionLimit.label', 'Session Limit')}
-                    description={t('admin.settings.advanced.processExecutor.sessionLimit.description', 'Maximum concurrent instances')}
-                    value={settings.processExecutor?.sessionLimit?.installAppSessionLimit ?? 1}
-                    onChange={(value) => setSettings({
-                      ...settings,
-                      processExecutor: {
-                        ...settings.processExecutor,
-                        sessionLimit: { ...settings.processExecutor?.sessionLimit, installAppSessionLimit: Number(value) }
-                      }
-                    })}
-                    min={1}
-                    max={100}
-                    disabled={!loginEnabled}
-                  />
-                  <NumberInput
-                    label={t('admin.settings.advanced.processExecutor.timeout.label', 'Timeout (minutes)')}
-                    description={t('admin.settings.advanced.processExecutor.timeout.description', 'Maximum execution time')}
-                    value={settings.processExecutor?.timeoutMinutes?.installApptimeoutMinutes ?? 60}
-                    onChange={(value) => setSettings({
-                      ...settings,
-                      processExecutor: {
-                        ...settings.processExecutor,
-                        timeoutMinutes: { ...settings.processExecutor?.timeoutMinutes, installApptimeoutMinutes: Number(value) }
-                      }
-                    })}
-                    min={1}
-                    max={240}
-                    disabled={!loginEnabled}
-                  />
-                </Stack>
-              </Accordion.Panel>
-            </Accordion.Item>
-
-            {/* Calibre */}
-            <Accordion.Item value="calibre">
-              <Accordion.Control>{t('admin.settings.advanced.processExecutor.calibre', 'Calibre')}</Accordion.Control>
-              <Accordion.Panel>
-                <Stack gap="sm">
-                  <NumberInput
-                    label={t('admin.settings.advanced.processExecutor.sessionLimit.label', 'Session Limit')}
-                    description={t('admin.settings.advanced.processExecutor.sessionLimit.description', 'Maximum concurrent instances')}
-                    value={settings.processExecutor?.sessionLimit?.calibreSessionLimit ?? 1}
-                    onChange={(value) => setSettings({
-                      ...settings,
-                      processExecutor: {
-                        ...settings.processExecutor,
-                        sessionLimit: { ...settings.processExecutor?.sessionLimit, calibreSessionLimit: Number(value) }
-                      }
-                    })}
-                    min={1}
-                    max={100}
-                    disabled={!loginEnabled}
-                  />
-                  <NumberInput
-                    label={t('admin.settings.advanced.processExecutor.timeout.label', 'Timeout (minutes)')}
-                    description={t('admin.settings.advanced.processExecutor.timeout.description', 'Maximum execution time')}
-                    value={settings.processExecutor?.timeoutMinutes?.calibretimeoutMinutes ?? 30}
-                    onChange={(value) => setSettings({
-                      ...settings,
-                      processExecutor: {
-                        ...settings.processExecutor,
-                        timeoutMinutes: { ...settings.processExecutor?.timeoutMinutes, calibretimeoutMinutes: Number(value) }
-                      }
-                    })}
-                    min={1}
-                    max={240}
-                    disabled={!loginEnabled}
-                  />
-                </Stack>
-              </Accordion.Panel>
-            </Accordion.Item>
-
-            {/* Ghostscript */}
-            <Accordion.Item value="ghostscript">
-              <Accordion.Control>{t('admin.settings.advanced.processExecutor.ghostscript', 'Ghostscript')}</Accordion.Control>
-              <Accordion.Panel>
-                <Stack gap="sm">
-                  <NumberInput
-                    label={t('admin.settings.advanced.processExecutor.sessionLimit.label', 'Session Limit')}
-                    description={t('admin.settings.advanced.processExecutor.sessionLimit.description', 'Maximum concurrent instances')}
-                    value={settings.processExecutor?.sessionLimit?.ghostscriptSessionLimit ?? 8}
-                    onChange={(value) => setSettings({
-                      ...settings,
-                      processExecutor: {
-                        ...settings.processExecutor,
-                        sessionLimit: { ...settings.processExecutor?.sessionLimit, ghostscriptSessionLimit: Number(value) }
-                      }
-                    })}
-                    min={1}
-                    max={100}
-                    disabled={!loginEnabled}
-                  />
-                  <NumberInput
-                    label={t('admin.settings.advanced.processExecutor.timeout.label', 'Timeout (minutes)')}
-                    description={t('admin.settings.advanced.processExecutor.timeout.description', 'Maximum execution time')}
-                    value={settings.processExecutor?.timeoutMinutes?.ghostscriptTimeoutMinutes ?? 30}
-                    onChange={(value) => setSettings({
-                      ...settings,
-                      processExecutor: {
-                        ...settings.processExecutor,
-                        timeoutMinutes: { ...settings.processExecutor?.timeoutMinutes, ghostscriptTimeoutMinutes: Number(value) }
-                      }
-                    })}
-                    min={1}
-                    max={240}
-                    disabled={!loginEnabled}
-                  />
-                </Stack>
-              </Accordion.Panel>
-            </Accordion.Item>
-
-            {/* OCRmyPDF */}
-            <Accordion.Item value="ocrMyPdf">
-              <Accordion.Control>{t('admin.settings.advanced.processExecutor.ocrMyPdf', 'OCRmyPDF')}</Accordion.Control>
-              <Accordion.Panel>
-                <Stack gap="sm">
-                  <NumberInput
-                    label={t('admin.settings.advanced.processExecutor.sessionLimit.label', 'Session Limit')}
-                    description={t('admin.settings.advanced.processExecutor.sessionLimit.description', 'Maximum concurrent instances')}
-                    value={settings.processExecutor?.sessionLimit?.ocrMyPdfSessionLimit ?? 2}
-                    onChange={(value) => setSettings({
-                      ...settings,
-                      processExecutor: {
-                        ...settings.processExecutor,
-                        sessionLimit: { ...settings.processExecutor?.sessionLimit, ocrMyPdfSessionLimit: Number(value) }
-                      }
-                    })}
-                    min={1}
-                    max={100}
-                    disabled={!loginEnabled}
-                  />
-                  <NumberInput
-                    label={t('admin.settings.advanced.processExecutor.timeout.label', 'Timeout (minutes)')}
-                    description={t('admin.settings.advanced.processExecutor.timeout.description', 'Maximum execution time')}
-                    value={settings.processExecutor?.timeoutMinutes?.ocrMyPdfTimeoutMinutes ?? 30}
-                    onChange={(value) => setSettings({
-                      ...settings,
-                      processExecutor: {
-                        ...settings.processExecutor,
-                        timeoutMinutes: { ...settings.processExecutor?.timeoutMinutes, ocrMyPdfTimeoutMinutes: Number(value) }
-                      }
-                    })}
-                    min={1}
-                    max={240}
-                    disabled={!loginEnabled}
-                  />
-                </Stack>
-              </Accordion.Panel>
-            </Accordion.Item>
-          </Accordion>
-        </Stack>
-      </Paper>
-
+                      min={1}
+                      max={240}
+                      disabled={!loginEnabled}
+                    />
+                  </Stack>
+                </Accordion.Panel>
+              </Accordion.Item>
+            </Accordion>
+          </Stack>
+        </Paper>
       </Stack>
 
       <SettingsStickyFooter
@@ -1114,11 +1325,7 @@ export default function AdminAdvancedSection() {
       />
 
       {/* Restart Confirmation Modal */}
-      <RestartConfirmationModal
-        opened={restartModalOpened}
-        onClose={closeRestartModal}
-        onRestart={restartServer}
-      />
+      <RestartConfirmationModal opened={restartModalOpened} onClose={closeRestartModal} onRestart={restartServer} />
     </div>
   );
 }
diff --git a/frontend/src/proprietary/components/shared/config/configSections/AdminAuditSection.tsx b/frontend/src/proprietary/components/shared/config/configSections/AdminAuditSection.tsx
index 06703d813c..1319233393 100644
--- a/frontend/src/proprietary/components/shared/config/configSections/AdminAuditSection.tsx
+++ b/frontend/src/proprietary/components/shared/config/configSections/AdminAuditSection.tsx
@@ -1,33 +1,33 @@
-import React, { useState, useEffect } from 'react';
-import { isAxiosError } from 'axios';
-import { Tabs, Loader, Alert, Stack, Text, Button, Accordion } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
-import auditService, { AuditSystemStatus as AuditStatus } from '@app/services/auditService';
-import AuditSystemStatus from '@app/components/shared/config/configSections/audit/AuditSystemStatus';
-import AuditStatsCards from '@app/components/shared/config/configSections/audit/AuditStatsCards';
-import AuditChartsSection from '@app/components/shared/config/configSections/audit/AuditChartsSection';
-import AuditEventsTable from '@app/components/shared/config/configSections/audit/AuditEventsTable';
-import AuditExportSection from '@app/components/shared/config/configSections/audit/AuditExportSection';
-import AuditClearDataSection from '@app/components/shared/config/configSections/audit/AuditClearDataSection';
-import { useLoginRequired } from '@app/hooks/useLoginRequired';
-import LoginRequiredBanner from '@app/components/shared/config/LoginRequiredBanner';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
-import EnterpriseRequiredBanner from '@app/components/shared/config/EnterpriseRequiredBanner';
-import LocalIcon from '@app/components/shared/LocalIcon';
+import React, { useState, useEffect } from "react";
+import { isAxiosError } from "axios";
+import { Tabs, Loader, Alert, Stack, Text, Button, Accordion } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import auditService, { AuditSystemStatus as AuditStatus } from "@app/services/auditService";
+import AuditSystemStatus from "@app/components/shared/config/configSections/audit/AuditSystemStatus";
+import AuditStatsCards from "@app/components/shared/config/configSections/audit/AuditStatsCards";
+import AuditChartsSection from "@app/components/shared/config/configSections/audit/AuditChartsSection";
+import AuditEventsTable from "@app/components/shared/config/configSections/audit/AuditEventsTable";
+import AuditExportSection from "@app/components/shared/config/configSections/audit/AuditExportSection";
+import AuditClearDataSection from "@app/components/shared/config/configSections/audit/AuditClearDataSection";
+import { useLoginRequired } from "@app/hooks/useLoginRequired";
+import LoginRequiredBanner from "@app/components/shared/config/LoginRequiredBanner";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
+import EnterpriseRequiredBanner from "@app/components/shared/config/EnterpriseRequiredBanner";
+import LocalIcon from "@app/components/shared/LocalIcon";
 
 const AdminAuditSection: React.FC = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const { loginEnabled } = useLoginRequired();
   const { config } = useAppConfig();
-  const licenseType = config?.license ?? 'NORMAL';
-  const hasEnterpriseLicense = licenseType === 'ENTERPRISE';
+  const licenseType = config?.license ?? "NORMAL";
+  const hasEnterpriseLicense = licenseType === "ENTERPRISE";
   const showDemoData = !loginEnabled || !hasEnterpriseLicense;
   const [systemStatus, setSystemStatus] = useState<AuditStatus | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [timePeriod, setTimePeriod] = useState<'day' | 'week' | 'month'>('week');
+  const [timePeriod, setTimePeriod] = useState<"day" | "week" | "month">("week");
 
   useEffect(() => {
     const fetchSystemStatus = async () => {
@@ -40,9 +40,9 @@ const AdminAuditSection: React.FC = () => {
         // Check if this is a permission/license error (403/404)
         const status = isAxiosError(err) ? err.response?.status : undefined;
         if (status === 403 || status === 404) {
-          setError('enterprise-license-required');
+          setError("enterprise-license-required");
         } else {
-          setError(err instanceof Error ? err.message : 'Failed to load audit system status');
+          setError(err instanceof Error ? err.message : "Failed to load audit system status");
         }
       } finally {
         setLoading(false);
@@ -56,7 +56,7 @@ const AdminAuditSection: React.FC = () => {
       setError(null);
       setSystemStatus({
         enabled: true,
-        level: 'INFO',
+        level: "INFO",
         retentionDays: 90,
         totalEvents: 1234,
         pdfMetadataEnabled: true,
@@ -73,25 +73,25 @@ const AdminAuditSection: React.FC = () => {
 
   if (actualLoading) {
     return (
-      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '2rem 0' }}>
+      <div style={{ display: "flex", justifyContent: "center", alignItems: "center", padding: "2rem 0" }}>
         <Loader size="lg" />
       </div>
     );
   }
 
   if (error) {
-    if (error === 'enterprise-license-required') {
+    if (error === "enterprise-license-required") {
       return (
-        <Alert color="blue" title={t('audit.enterpriseRequired', 'Enterprise License Required')}>
+        <Alert color="blue" title={t("audit.enterpriseRequired", "Enterprise License Required")}>
           {t(
-            'audit.enterpriseRequiredMessage',
-            'The audit logging system is an enterprise feature. Please upgrade to an enterprise license to access audit logs and analytics.'
+            "audit.enterpriseRequiredMessage",
+            "The audit logging system is an enterprise feature. Please upgrade to an enterprise license to access audit logs and analytics.",
           )}
         </Alert>
       );
     }
     return (
-      <Alert color="red" title={t('audit.error.title', 'Error loading audit system')}>
+      <Alert color="red" title={t("audit.error.title", "Error loading audit system")}>
         {error}
       </Alert>
     );
@@ -99,8 +99,8 @@ const AdminAuditSection: React.FC = () => {
 
   if (!systemStatus) {
     return (
-      <Alert color="yellow" title={t('audit.notAvailable', 'Audit system not available')}>
-        {t('audit.notAvailableMessage', 'The audit system is not configured or not available.')}
+      <Alert color="yellow" title={t("audit.notAvailable", "Audit system not available")}>
+        {t("audit.notAvailableMessage", "The audit system is not configured or not available.")}
       </Alert>
     );
   }
@@ -110,33 +110,30 @@ const AdminAuditSection: React.FC = () => {
   return (
     <Stack gap="lg">
       <LoginRequiredBanner show={!loginEnabled} />
-      <EnterpriseRequiredBanner
-        show={!hasEnterpriseLicense}
-        featureName={t('settings.licensingAnalytics.audit', 'Audit')}
-      />
+      <EnterpriseRequiredBanner show={!hasEnterpriseLicense} featureName={t("settings.licensingAnalytics.audit", "Audit")} />
 
       {/* Info banner about audit settings */}
       {isEnabled && (
         <Alert
           icon={<LocalIcon icon="info" width="1.2rem" height="1.2rem" />}
-          title={t('audit.configureAudit', 'Configure Audit Logging')}
+          title={t("audit.configureAudit", "Configure Audit Logging")}
           color="blue"
           variant="light"
         >
           <Stack gap="xs">
             <Text size="sm">
               {t(
-                'audit.configureAuditMessage',
-                'Adjust audit logging level, retention period, and other settings in the Security & Authentication section.'
+                "audit.configureAuditMessage",
+                "Adjust audit logging level, retention period, and other settings in the Security & Authentication section.",
               )}
             </Text>
             <Button
               variant="light"
               size="xs"
-              onClick={() => navigate('/settings/adminSecurity#auditLogging')}
+              onClick={() => navigate("/settings/adminSecurity#auditLogging")}
               rightSection={<LocalIcon icon="arrow-forward" width="0.9rem" height="0.9rem" />}
             >
-              {t('audit.goToSettings', 'Go to Audit Settings')}
+              {t("audit.goToSettings", "Go to Audit Settings")}
             </Button>
           </Stack>
         </Alert>
@@ -148,16 +145,16 @@ const AdminAuditSection: React.FC = () => {
         <Tabs defaultValue="dashboard">
           <Tabs.List>
             <Tabs.Tab value="dashboard" disabled={!isEnabled}>
-              {t('audit.tabs.dashboard', 'Dashboard')}
+              {t("audit.tabs.dashboard", "Dashboard")}
             </Tabs.Tab>
             <Tabs.Tab value="events" disabled={!isEnabled}>
-              {t('audit.tabs.events', 'Audit Events')}
+              {t("audit.tabs.events", "Audit Events")}
             </Tabs.Tab>
             <Tabs.Tab value="export" disabled={!isEnabled}>
-              {t('audit.tabs.export', 'Export')}
+              {t("audit.tabs.export", "Export")}
             </Tabs.Tab>
             <Tabs.Tab value="clearData" disabled={!isEnabled}>
-              {t('audit.tabs.clearData', 'Clear Data')}
+              {t("audit.tabs.clearData", "Clear Data")}
             </Tabs.Tab>
           </Tabs.List>
 
@@ -169,15 +166,9 @@ const AdminAuditSection: React.FC = () => {
               {/* Charts in Accordion - Collapsible */}
               <Accordion defaultValue={["events-over-time"]} multiple>
                 <Accordion.Item value="events-over-time">
-                  <Accordion.Control>
-                    {t('audit.charts.overTime', 'Events Over Time')}
-                  </Accordion.Control>
+                  <Accordion.Control>{t("audit.charts.overTime", "Events Over Time")}</Accordion.Control>
                   <Accordion.Panel>
-                    <AuditChartsSection
-                      loginEnabled={isEnabled}
-                      timePeriod={timePeriod}
-                      onTimePeriodChange={setTimePeriod}
-                    />
+                    <AuditChartsSection loginEnabled={isEnabled} timePeriod={timePeriod} onTimePeriodChange={setTimePeriod} />
                   </Accordion.Panel>
                 </Accordion.Item>
               </Accordion>
@@ -206,11 +197,8 @@ const AdminAuditSection: React.FC = () => {
           </Tabs.Panel>
         </Tabs>
       ) : (
-        <Alert color="blue" title={t('audit.disabled', 'Audit logging is disabled')}>
-          {t(
-            'audit.disabledMessage',
-            'Enable audit logging in your application configuration to track system events.'
-          )}
+        <Alert color="blue" title={t("audit.disabled", "Audit logging is disabled")}>
+          {t("audit.disabledMessage", "Enable audit logging in your application configuration to track system events.")}
         </Alert>
       )}
     </Stack>
diff --git a/frontend/src/proprietary/components/shared/config/configSections/AdminConnectionsSection.tsx b/frontend/src/proprietary/components/shared/config/configSections/AdminConnectionsSection.tsx
index fd60e75cba..2055d6d55f 100644
--- a/frontend/src/proprietary/components/shared/config/configSections/AdminConnectionsSection.tsx
+++ b/frontend/src/proprietary/components/shared/config/configSections/AdminConnectionsSection.tsx
@@ -1,21 +1,21 @@
-import { useCallback, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
-import { Stack, Text, Loader, Group, Divider, Paper, Switch, Badge, Anchor, Select, Collapse } from '@mantine/core';
-import { alert } from '@app/components/toast';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import RestartConfirmationModal from '@app/components/shared/config/RestartConfirmationModal';
-import { useRestartServer } from '@app/components/shared/config/useRestartServer';
-import { useAdminSettings } from '@app/hooks/useAdminSettings';
-import { useSettingsDirty } from '@app/hooks/useSettingsDirty';
-import PendingBadge from '@app/components/shared/config/PendingBadge';
-import { SettingsStickyFooter } from '@app/components/shared/config/SettingsStickyFooter';
-import { Z_INDEX_CONFIG_MODAL } from '@app/styles/zIndex';
-import ProviderCard from '@app/components/shared/config/configSections/ProviderCard';
-import { Provider, useAllProviders } from '@app/components/shared/config/configSections/providerDefinitions';
-import apiClient from '@app/services/apiClient';
-import { useLoginRequired } from '@app/hooks/useLoginRequired';
-import LoginRequiredBanner from '@app/components/shared/config/LoginRequiredBanner';
+import { useCallback, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { Stack, Text, Loader, Group, Divider, Paper, Switch, Badge, Anchor, Select, Collapse } from "@mantine/core";
+import { alert } from "@app/components/toast";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import RestartConfirmationModal from "@app/components/shared/config/RestartConfirmationModal";
+import { useRestartServer } from "@app/components/shared/config/useRestartServer";
+import { useAdminSettings } from "@app/hooks/useAdminSettings";
+import { useSettingsDirty } from "@app/hooks/useSettingsDirty";
+import PendingBadge from "@app/components/shared/config/PendingBadge";
+import { SettingsStickyFooter } from "@app/components/shared/config/SettingsStickyFooter";
+import { Z_INDEX_CONFIG_MODAL } from "@app/styles/zIndex";
+import ProviderCard from "@app/components/shared/config/configSections/ProviderCard";
+import { Provider, useAllProviders } from "@app/components/shared/config/configSections/providerDefinitions";
+import apiClient from "@app/services/apiClient";
+import { useLoginRequired } from "@app/hooks/useLoginRequired";
+import LoginRequiredBanner from "@app/components/shared/config/LoginRequiredBanner";
 
 interface FeedbackFlags {
   noValidDocument?: boolean;
@@ -140,26 +140,26 @@ export default function AdminConnectionsSection() {
   const allProviders = useAllProviders();
 
   const adminSettings = useAdminSettings<ConnectionsSettingsData>({
-    sectionName: 'connections',
+    sectionName: "connections",
     fetchTransformer: async (): Promise<ConnectionsSettingsData & { _pending?: Record<string, unknown> }> => {
       // Fetch security settings (oauth2, saml2)
-      const securityResponse = await apiClient.get('/api/v1/admin/settings/section/security');
+      const securityResponse = await apiClient.get("/api/v1/admin/settings/section/security");
       const securityData = securityResponse.data || {};
 
       // Fetch mail settings
-      const mailResponse = await apiClient.get('/api/v1/admin/settings/section/mail');
+      const mailResponse = await apiClient.get("/api/v1/admin/settings/section/mail");
       const mailData = mailResponse.data || {};
 
       // Fetch premium settings for SSO Auto Login
-      const premiumResponse = await apiClient.get('/api/v1/admin/settings/section/premium');
+      const premiumResponse = await apiClient.get("/api/v1/admin/settings/section/premium");
       const premiumData = premiumResponse.data || {};
 
       // Fetch Telegram settings
-      const telegramResponse = await apiClient.get('/api/v1/admin/settings/section/telegram');
+      const telegramResponse = await apiClient.get("/api/v1/admin/settings/section/telegram");
       const telegramData = telegramResponse.data || {};
 
       // Fetch system settings for enableMobileScanner
-      const systemResponse = await apiClient.get('/api/v1/admin/settings/section/system');
+      const systemResponse = await apiClient.get("/api/v1/admin/settings/section/system");
       const systemData = systemResponse.data || {};
 
       const result: ConnectionsSettingsData & { _pending?: Record<string, unknown> } = {
@@ -170,13 +170,13 @@ export default function AdminConnectionsSection() {
         ssoAutoLogin: premiumData.proFeatures?.ssoAutoLogin || false,
         enableMobileScanner: systemData.enableMobileScanner || false,
         mobileScannerConvertToPdf: systemData.mobileScannerSettings?.convertToPdf !== false,
-        mobileScannerImageResolution: systemData.mobileScannerSettings?.imageResolution || 'full',
-        mobileScannerPageFormat: systemData.mobileScannerSettings?.pageFormat || 'A4',
+        mobileScannerImageResolution: systemData.mobileScannerSettings?.imageResolution || "full",
+        mobileScannerPageFormat: systemData.mobileScannerSettings?.pageFormat || "A4",
         mobileScannerStretchToFit: systemData.mobileScannerSettings?.stretchToFit || false,
         googleDriveEnabled: premiumData.proFeatures?.googleDrive?.enabled || false,
-        googleDriveClientId: premiumData.proFeatures?.googleDrive?.clientId || '',
-        googleDriveApiKey: premiumData.proFeatures?.googleDrive?.apiKey || '',
-        googleDriveAppId: premiumData.proFeatures?.googleDrive?.appId || ''
+        googleDriveClientId: premiumData.proFeatures?.googleDrive?.clientId || "",
+        googleDriveApiKey: premiumData.proFeatures?.googleDrive?.apiKey || "",
+        googleDriveAppId: premiumData.proFeatures?.googleDrive?.appId || "",
       };
 
       // Merge pending blocks from all endpoints
@@ -236,7 +236,7 @@ export default function AdminConnectionsSection() {
       // Build delta for oauth2 settings
       if (currentSettings.oauth2) {
         Object.keys(currentSettings.oauth2).forEach((key) => {
-          if (key !== 'client') {
+          if (key !== "client") {
             deltaSettings[`security.oauth2.${key}`] = (currentSettings.oauth2 as Record<string, unknown>)[key];
           }
         });
@@ -279,54 +279,48 @@ export default function AdminConnectionsSection() {
 
       // SSO Auto Login
       if (currentSettings?.ssoAutoLogin !== undefined) {
-        deltaSettings['premium.proFeatures.ssoAutoLogin'] = currentSettings.ssoAutoLogin;
+        deltaSettings["premium.proFeatures.ssoAutoLogin"] = currentSettings.ssoAutoLogin;
       }
 
       // Mobile Scanner settings
       if (currentSettings?.enableMobileScanner !== undefined) {
-        deltaSettings['system.enableMobileScanner'] = currentSettings.enableMobileScanner;
+        deltaSettings["system.enableMobileScanner"] = currentSettings.enableMobileScanner;
       }
       if (currentSettings?.mobileScannerConvertToPdf !== undefined) {
-        deltaSettings['system.mobileScannerSettings.convertToPdf'] = currentSettings.mobileScannerConvertToPdf;
+        deltaSettings["system.mobileScannerSettings.convertToPdf"] = currentSettings.mobileScannerConvertToPdf;
       }
       if (currentSettings?.mobileScannerImageResolution !== undefined) {
-        deltaSettings['system.mobileScannerSettings.imageResolution'] = currentSettings.mobileScannerImageResolution;
+        deltaSettings["system.mobileScannerSettings.imageResolution"] = currentSettings.mobileScannerImageResolution;
       }
       if (currentSettings?.mobileScannerPageFormat !== undefined) {
-        deltaSettings['system.mobileScannerSettings.pageFormat'] = currentSettings.mobileScannerPageFormat;
+        deltaSettings["system.mobileScannerSettings.pageFormat"] = currentSettings.mobileScannerPageFormat;
       }
       if (currentSettings?.mobileScannerStretchToFit !== undefined) {
-        deltaSettings['system.mobileScannerSettings.stretchToFit'] = currentSettings.mobileScannerStretchToFit;
+        deltaSettings["system.mobileScannerSettings.stretchToFit"] = currentSettings.mobileScannerStretchToFit;
       }
 
       // Google Drive settings
       if (currentSettings?.googleDriveEnabled !== undefined) {
-        deltaSettings['premium.proFeatures.googleDrive.enabled'] = currentSettings.googleDriveEnabled;
+        deltaSettings["premium.proFeatures.googleDrive.enabled"] = currentSettings.googleDriveEnabled;
       }
       if (currentSettings?.googleDriveClientId !== undefined) {
-        deltaSettings['premium.proFeatures.googleDrive.clientId'] = currentSettings.googleDriveClientId;
+        deltaSettings["premium.proFeatures.googleDrive.clientId"] = currentSettings.googleDriveClientId;
       }
       if (currentSettings?.googleDriveApiKey !== undefined) {
-        deltaSettings['premium.proFeatures.googleDrive.apiKey'] = currentSettings.googleDriveApiKey;
+        deltaSettings["premium.proFeatures.googleDrive.apiKey"] = currentSettings.googleDriveApiKey;
       }
       if (currentSettings?.googleDriveAppId !== undefined) {
-        deltaSettings['premium.proFeatures.googleDrive.appId'] = currentSettings.googleDriveAppId;
+        deltaSettings["premium.proFeatures.googleDrive.appId"] = currentSettings.googleDriveAppId;
       }
 
       return {
         sectionData: {},
-        deltaSettings
+        deltaSettings,
       };
-    }
+    },
   });
 
-  const {
-    settings,
-    setSettings,
-    loading,
-    fetchSettings,
-    isFieldPending,
-  } = adminSettings;
+  const { settings, setSettings, loading, fetchSettings, isFieldPending } = adminSettings;
 
   useEffect(() => {
     if (loginEnabled) {
@@ -347,9 +341,9 @@ export default function AdminConnectionsSection() {
       await adminSettings.saveSettings();
     } catch (_error) {
       alert({
-        alertType: 'error',
-        title: t('admin.error', 'Error'),
-        body: t('admin.settings.saveError', 'Failed to save settings'),
+        alertType: "error",
+        title: t("admin.error", "Error"),
+        body: t("admin.settings.saveError", "Failed to save settings"),
       });
     }
   };
@@ -358,45 +352,45 @@ export default function AdminConnectionsSection() {
   const actualLoading = loginEnabled ? loading : false;
 
   const isProviderConfigured = (provider: Provider): boolean => {
-    if (provider.id === 'saml2') {
+    if (provider.id === "saml2") {
       return settings?.saml2?.enabled === true;
     }
 
-    if (provider.id === 'smtp') {
+    if (provider.id === "smtp") {
       return settings?.mail?.enabled === true;
     }
 
-    if (provider.id === 'telegram') {
+    if (provider.id === "telegram") {
       return settings?.telegram?.enabled === true;
     }
 
-    if (provider.id === 'googledrive') {
+    if (provider.id === "googledrive") {
       return settings?.googleDriveEnabled === true;
     }
 
-    if (provider.id === 'oauth2-generic') {
+    if (provider.id === "oauth2-generic") {
       return settings?.oauth2?.enabled === true;
     }
 
     // Check if specific OAuth2 provider is configured (has clientId)
     const providerSettings = settings?.oauth2?.client?.[provider.id];
-    return !!(providerSettings?.clientId);
+    return !!providerSettings?.clientId;
   };
 
   const getProviderSettings = (provider: Provider): ProviderSettings => {
-    if (provider.id === 'saml2') {
+    if (provider.id === "saml2") {
       return settings?.saml2 || {};
     }
 
-    if (provider.id === 'smtp') {
+    if (provider.id === "smtp") {
       return settings?.mail || {};
     }
 
-    if (provider.id === 'telegram') {
+    if (provider.id === "telegram") {
       return settings?.telegram || {};
     }
 
-    if (provider.id === 'googledrive') {
+    if (provider.id === "googledrive") {
       const gd: GoogleDriveSettings = {
         enabled: settings?.googleDriveEnabled,
         clientId: settings?.googleDriveClientId,
@@ -406,7 +400,7 @@ export default function AdminConnectionsSection() {
       return gd;
     }
 
-    if (provider.id === 'oauth2-generic') {
+    if (provider.id === "oauth2-generic") {
       const generic: OAuth2GenericSettings = {
         enabled: settings?.oauth2?.enabled,
         provider: settings?.oauth2?.provider,
@@ -425,7 +419,6 @@ export default function AdminConnectionsSection() {
     return settings?.oauth2?.client?.[provider.id] || {};
   };
 
-
   if (actualLoading) {
     return (
       <Stack align="center" justify="center" h={200}>
@@ -434,16 +427,15 @@ export default function AdminConnectionsSection() {
     );
   }
 
-
   const linkedProviders = allProviders.filter((p) => isProviderConfigured(p));
   const availableProviders = allProviders.filter((p) => !isProviderConfigured(p));
 
   const updateProviderSettings = (provider: Provider, updatedSettings: Record<string, unknown>) => {
-    if (provider.id === 'smtp') {
+    if (provider.id === "smtp") {
       setSettings({ ...settings, mail: updatedSettings as MailSettings });
-    } else if (provider.id === 'telegram') {
+    } else if (provider.id === "telegram") {
       setSettings({ ...settings, telegram: updatedSettings as TelegramSettingsData });
-    } else if (provider.id === 'googledrive') {
+    } else if (provider.id === "googledrive") {
       const gd = updatedSettings as GoogleDriveSettings;
       setSettings({
         ...settings,
@@ -452,9 +444,9 @@ export default function AdminConnectionsSection() {
         googleDriveApiKey: gd.apiKey,
         googleDriveAppId: gd.appId,
       });
-    } else if (provider.id === 'saml2') {
+    } else if (provider.id === "saml2") {
       setSettings({ ...settings, saml2: updatedSettings as Saml2Settings });
-    } else if (provider.id === 'oauth2-generic') {
+    } else if (provider.id === "oauth2-generic") {
       const generic = updatedSettings as OAuth2GenericSettings;
       setSettings({ ...settings, oauth2: { ...settings.oauth2, ...generic } });
     } else {
@@ -467,8 +459,8 @@ export default function AdminConnectionsSection() {
           client: {
             ...settings.oauth2?.client,
             [provider.id]: clientSettings,
-          }
-        }
+          },
+        },
       });
     }
   };
@@ -478,225 +470,290 @@ export default function AdminConnectionsSection() {
       <Stack gap="xl" className="settings-section-content">
         <LoginRequiredBanner show={!loginEnabled} />
 
-      {/* Header */}
-      <div>
-        <Text fw={600} size="lg">
-          {t('admin.settings.connections.title', 'Connections')}
-        </Text>
-        <Text size="sm" c="dimmed">
-          {t(
-            'admin.settings.connections.description',
-            'Configure external authentication providers like OAuth2 and SAML.'
-          )}
-        </Text>
-      </div>
+        {/* Header */}
+        <div>
+          <Text fw={600} size="lg">
+            {t("admin.settings.connections.title", "Connections")}
+          </Text>
+          <Text size="sm" c="dimmed">
+            {t("admin.settings.connections.description", "Configure external authentication providers like OAuth2 and SAML.")}
+          </Text>
+        </div>
 
-      {/* SSO Auto Login - Premium Feature */}
-      <Paper withBorder p="md" radius="md">
-        <Stack gap="md">
-          <Group justify="space-between" align="center">
-            <Text fw={600} size="sm">{t('admin.settings.connections.ssoAutoLogin.label', 'SSO Auto Login')}</Text>
-            <Badge
-              color="grape"
-              size="sm"
-              style={{ cursor: 'pointer' }}
-              onClick={() => navigate('/settings/adminPlan')}
-              title={t('admin.settings.badge.clickToUpgrade', 'Click to view plan details')}
-            >
-              PRO
-            </Badge>
-          </Group>
-
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <div>
-              <Text fw={500} size="sm">{t('admin.settings.connections.ssoAutoLogin.enable', 'Enable SSO Auto Login')}</Text>
-              <Text size="xs" c="dimmed" mt={4}>
-                {t('admin.settings.connections.ssoAutoLogin.description', 'Automatically redirect to SSO login when authentication is required')}
+        {/* SSO Auto Login - Premium Feature */}
+        <Paper withBorder p="md" radius="md">
+          <Stack gap="md">
+            <Group justify="space-between" align="center">
+              <Text fw={600} size="sm">
+                {t("admin.settings.connections.ssoAutoLogin.label", "SSO Auto Login")}
               </Text>
-            </div>
-            <Group gap="xs">
-              <Switch
-                checked={settings?.ssoAutoLogin || false}
-                onChange={(e) => {
-                  if (!loginEnabled) return; // Block change when login disabled
-                  setSettings({ ...settings, ssoAutoLogin: e.target.checked });
-                }}
-                disabled={!loginEnabled}
-                styles={getDisabledStyles()}
-              />
-              <PendingBadge show={isFieldPending('ssoAutoLogin')} />
+              <Badge
+                color="grape"
+                size="sm"
+                style={{ cursor: "pointer" }}
+                onClick={() => navigate("/settings/adminPlan")}
+                title={t("admin.settings.badge.clickToUpgrade", "Click to view plan details")}
+              >
+                PRO
+              </Badge>
             </Group>
-          </div>
-        </Stack>
-      </Paper>
 
-      {/* Mobile Scanner (QR Code) Upload */}
-      <Paper withBorder p="md" radius="md">
-        <Stack gap="md">
-          <Group gap="xs" align="center">
-            <LocalIcon icon="qr-code-rounded" width="1.25rem" height="1.25rem" />
-            <Text fw={600} size="sm">{t('admin.settings.connections.mobileScanner.label', 'Mobile Phone Upload')}</Text>
-          </Group>
-
-          {/* Documentation Link */}
-          <Anchor
-            href="https://docs.stirlingpdf.com/Functionality/Mobile-Scanner"
-            target="_blank"
-            size="xs"
-            c="blue"
-          >
-            {t('admin.settings.connections.documentation', 'View documentation')} ↗
-          </Anchor>
-
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <div>
-              <Text fw={500} size="sm">{t('admin.settings.connections.mobileScanner.enable', 'Enable QR Code Upload')}</Text>
-              <Text size="xs" c="dimmed" mt={4}>
-                {t('admin.settings.connections.mobileScanner.description', 'Allow users to upload files from mobile devices by scanning a QR code')}
-              </Text>
-              <Text size="xs" c="orange" mt={8} fw={500}>
-                {t('admin.settings.connections.mobileScanner.note', 'Note: Requires Frontend URL to be configured. ')}
-                <Anchor href="#" onClick={(e) => { e.preventDefault(); navigate('/settings/adminGeneral#frontendUrl'); }} c="orange" td="underline">
-                  {t('admin.settings.connections.mobileScanner.link', 'Configure in System Settings')}
-                </Anchor>
-              </Text>
-            </div>
-            <Group gap="xs">
-              <Switch
-                checked={settings?.enableMobileScanner || false}
-                onChange={(e) => {
-                  if (!loginEnabled) return; // Block change when login disabled
-                  setSettings({ ...settings, enableMobileScanner: e.target.checked });
-                }}
-                disabled={!loginEnabled}
-                styles={getDisabledStyles()}
-              />
-              <PendingBadge show={isFieldPending('enableMobileScanner')} />
-            </Group>
-          </div>
-
-          {/* Mobile Scanner Settings - Only show when enabled */}
-          <Collapse in={settings?.enableMobileScanner || false}>
-            <Stack gap="md" mt="md" ml="lg" style={{ borderLeft: '2px solid var(--mantine-color-gray-3)', paddingLeft: '1rem' }}>
-              {/* Convert to PDF */}
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
               <div>
-                <Text size="sm" fw={500} mb="xs">
-                  {t('admin.settings.connections.mobileScannerConvertToPdf', 'Convert Images to PDF')}
+                <Text fw={500} size="sm">
+                  {t("admin.settings.connections.ssoAutoLogin.enable", "Enable SSO Auto Login")}
                 </Text>
-                <Text size="xs" c="dimmed" mb="sm">
-                  {t('admin.settings.connections.mobileScannerConvertToPdfDesc', 'Automatically convert uploaded images to PDF format. If disabled, images will be kept as-is.')}
+                <Text size="xs" c="dimmed" mt={4}>
+                  {t(
+                    "admin.settings.connections.ssoAutoLogin.description",
+                    "Automatically redirect to SSO login when authentication is required",
+                  )}
                 </Text>
-                <Group gap="xs">
-                  <Switch
-                    checked={settings?.mobileScannerConvertToPdf !== false}
-                    onChange={(e) => {
-                      if (!loginEnabled) return;
-                      setSettings({ ...settings, mobileScannerConvertToPdf: e.target.checked });
+              </div>
+              <Group gap="xs">
+                <Switch
+                  checked={settings?.ssoAutoLogin || false}
+                  onChange={(e) => {
+                    if (!loginEnabled) return; // Block change when login disabled
+                    setSettings({ ...settings, ssoAutoLogin: e.target.checked });
+                  }}
+                  disabled={!loginEnabled}
+                  styles={getDisabledStyles()}
+                />
+                <PendingBadge show={isFieldPending("ssoAutoLogin")} />
+              </Group>
+            </div>
+          </Stack>
+        </Paper>
+
+        {/* Mobile Scanner (QR Code) Upload */}
+        <Paper withBorder p="md" radius="md">
+          <Stack gap="md">
+            <Group gap="xs" align="center">
+              <LocalIcon icon="qr-code-rounded" width="1.25rem" height="1.25rem" />
+              <Text fw={600} size="sm">
+                {t("admin.settings.connections.mobileScanner.label", "Mobile Phone Upload")}
+              </Text>
+            </Group>
+
+            {/* Documentation Link */}
+            <Anchor href="https://docs.stirlingpdf.com/Functionality/Mobile-Scanner" target="_blank" size="xs" c="blue">
+              {t("admin.settings.connections.documentation", "View documentation")} ↗
+            </Anchor>
+
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+              <div>
+                <Text fw={500} size="sm">
+                  {t("admin.settings.connections.mobileScanner.enable", "Enable QR Code Upload")}
+                </Text>
+                <Text size="xs" c="dimmed" mt={4}>
+                  {t(
+                    "admin.settings.connections.mobileScanner.description",
+                    "Allow users to upload files from mobile devices by scanning a QR code",
+                  )}
+                </Text>
+                <Text size="xs" c="orange" mt={8} fw={500}>
+                  {t("admin.settings.connections.mobileScanner.note", "Note: Requires Frontend URL to be configured. ")}
+                  <Anchor
+                    href="#"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      navigate("/settings/adminGeneral#frontendUrl");
                     }}
+                    c="orange"
+                    td="underline"
+                  >
+                    {t("admin.settings.connections.mobileScanner.link", "Configure in System Settings")}
+                  </Anchor>
+                </Text>
+              </div>
+              <Group gap="xs">
+                <Switch
+                  checked={settings?.enableMobileScanner || false}
+                  onChange={(e) => {
+                    if (!loginEnabled) return; // Block change when login disabled
+                    setSettings({ ...settings, enableMobileScanner: e.target.checked });
+                  }}
+                  disabled={!loginEnabled}
+                  styles={getDisabledStyles()}
+                />
+                <PendingBadge show={isFieldPending("enableMobileScanner")} />
+              </Group>
+            </div>
+
+            {/* Mobile Scanner Settings - Only show when enabled */}
+            <Collapse in={settings?.enableMobileScanner || false}>
+              <Stack
+                gap="md"
+                mt="md"
+                ml="lg"
+                style={{ borderLeft: "2px solid var(--mantine-color-gray-3)", paddingLeft: "1rem" }}
+              >
+                {/* Convert to PDF */}
+                <div>
+                  <Text size="sm" fw={500} mb="xs">
+                    {t("admin.settings.connections.mobileScannerConvertToPdf", "Convert Images to PDF")}
+                  </Text>
+                  <Text size="xs" c="dimmed" mb="sm">
+                    {t(
+                      "admin.settings.connections.mobileScannerConvertToPdfDesc",
+                      "Automatically convert uploaded images to PDF format. If disabled, images will be kept as-is.",
+                    )}
+                  </Text>
+                  <Group gap="xs">
+                    <Switch
+                      checked={settings?.mobileScannerConvertToPdf !== false}
+                      onChange={(e) => {
+                        if (!loginEnabled) return;
+                        setSettings({ ...settings, mobileScannerConvertToPdf: e.target.checked });
+                      }}
+                      disabled={!loginEnabled}
+                    />
+                    <PendingBadge show={isFieldPending("mobileScannerConvertToPdf")} />
+                  </Group>
+                </div>
+
+                {/* PDF Conversion Settings - Only show when convertToPdf is enabled */}
+                {settings?.mobileScannerConvertToPdf !== false && (
+                  <>
+                    {/* Image Resolution */}
+                    <div>
+                      <Text size="sm" fw={500} mb="xs">
+                        {t("admin.settings.connections.mobileScannerImageResolution", "Image Resolution")}
+                      </Text>
+                      <Text size="xs" c="dimmed" mb="sm">
+                        {t(
+                          "admin.settings.connections.mobileScannerImageResolutionDesc",
+                          'Resolution of uploaded images. "Reduced" scales images to max 1200px to reduce file size.',
+                        )}
+                      </Text>
+                      <Group gap="xs">
+                        <Select
+                          value={settings?.mobileScannerImageResolution || "full"}
+                          onChange={(value) => {
+                            if (!loginEnabled) return;
+                            setSettings({ ...settings, mobileScannerImageResolution: value || "full" });
+                          }}
+                          data={[
+                            {
+                              value: "full",
+                              label: t("admin.settings.connections.imageResolutionFull", "Full (Original Size)"),
+                            },
+                            {
+                              value: "reduced",
+                              label: t("admin.settings.connections.imageResolutionReduced", "Reduced (Max 1200px)"),
+                            },
+                          ]}
+                          disabled={!loginEnabled}
+                          style={{ width: "250px" }}
+                          comboboxProps={{ zIndex: Z_INDEX_CONFIG_MODAL }}
+                        />
+                        <PendingBadge show={isFieldPending("mobileScannerImageResolution")} />
+                      </Group>
+                    </div>
+
+                    {/* Page Format */}
+                    <div>
+                      <Text size="sm" fw={500} mb="xs">
+                        {t("admin.settings.connections.mobileScannerPageFormat", "Page Format")}
+                      </Text>
+                      <Text size="xs" c="dimmed" mb="sm">
+                        {t(
+                          "admin.settings.connections.mobileScannerPageFormatDesc",
+                          'PDF page size for converted images. "Keep" uses original image dimensions.',
+                        )}
+                      </Text>
+                      <Group gap="xs">
+                        <Select
+                          value={settings?.mobileScannerPageFormat || "A4"}
+                          onChange={(value) => {
+                            if (!loginEnabled) return;
+                            setSettings({ ...settings, mobileScannerPageFormat: value || "A4" });
+                          }}
+                          data={[
+                            {
+                              value: "keep",
+                              label: t("admin.settings.connections.pageFormatKeep", "Keep (Original Dimensions)"),
+                            },
+                            { value: "A4", label: t("admin.settings.connections.pageFormatA4", "A4 (210×297mm)") },
+                            { value: "letter", label: t("admin.settings.connections.pageFormatLetter", "Letter (8.5×11in)") },
+                          ]}
+                          disabled={!loginEnabled}
+                          style={{ width: "250px" }}
+                          comboboxProps={{ zIndex: Z_INDEX_CONFIG_MODAL }}
+                        />
+                        <PendingBadge show={isFieldPending("mobileScannerPageFormat")} />
+                      </Group>
+                    </div>
+
+                    {/* Stretch to Fit */}
+                    <div>
+                      <Text size="sm" fw={500} mb="xs">
+                        {t("admin.settings.connections.mobileScannerStretchToFit", "Stretch to Fit")}
+                      </Text>
+                      <Text size="xs" c="dimmed" mb="sm">
+                        {t(
+                          "admin.settings.connections.mobileScannerStretchToFitDesc",
+                          "Stretch images to fill the entire page. If disabled, images are centered with preserved aspect ratio.",
+                        )}
+                      </Text>
+                      <Group gap="xs">
+                        <Switch
+                          checked={settings?.mobileScannerStretchToFit || false}
+                          onChange={(e) => {
+                            if (!loginEnabled) return;
+                            setSettings({ ...settings, mobileScannerStretchToFit: e.target.checked });
+                          }}
+                          disabled={!loginEnabled}
+                        />
+                        <PendingBadge show={isFieldPending("mobileScannerStretchToFit")} />
+                      </Group>
+                    </div>
+                  </>
+                )}
+              </Stack>
+            </Collapse>
+          </Stack>
+        </Paper>
+
+        {/* Linked Services Section - Only show if there are linked providers */}
+        {linkedProviders.length > 0 && (
+          <>
+            <div>
+              <Text fw={600} size="md" mb="md">
+                {t("admin.settings.connections.linkedServices", "Linked Services")}
+              </Text>
+              <Stack gap="sm">
+                {linkedProviders.map((provider) => (
+                  <ProviderCard
+                    key={provider.id}
+                    provider={provider}
+                    isConfigured={true}
+                    settings={getProviderSettings(provider)}
+                    onChange={(updatedSettings) => updateProviderSettings(provider, updatedSettings)}
                     disabled={!loginEnabled}
                   />
-                  <PendingBadge show={isFieldPending('mobileScannerConvertToPdf')} />
-                </Group>
-              </div>
+                ))}
+              </Stack>
+            </div>
 
-              {/* PDF Conversion Settings - Only show when convertToPdf is enabled */}
-              {settings?.mobileScannerConvertToPdf !== false && (
-                <>
-                  {/* Image Resolution */}
-                  <div>
-                    <Text size="sm" fw={500} mb="xs">
-                      {t('admin.settings.connections.mobileScannerImageResolution', 'Image Resolution')}
-                    </Text>
-                    <Text size="xs" c="dimmed" mb="sm">
-                      {t('admin.settings.connections.mobileScannerImageResolutionDesc', 'Resolution of uploaded images. "Reduced" scales images to max 1200px to reduce file size.')}
-                    </Text>
-                    <Group gap="xs">
-                      <Select
-                        value={settings?.mobileScannerImageResolution || 'full'}
-                        onChange={(value) => {
-                          if (!loginEnabled) return;
-                          setSettings({ ...settings, mobileScannerImageResolution: value || 'full' });
-                        }}
-                        data={[
-                          { value: 'full', label: t('admin.settings.connections.imageResolutionFull', 'Full (Original Size)') },
-                          { value: 'reduced', label: t('admin.settings.connections.imageResolutionReduced', 'Reduced (Max 1200px)') }
-                        ]}
-                        disabled={!loginEnabled}
-                        style={{ width: '250px' }}
-                        comboboxProps={{ zIndex: Z_INDEX_CONFIG_MODAL }}
-                      />
-                      <PendingBadge show={isFieldPending('mobileScannerImageResolution')} />
-                    </Group>
-                  </div>
+            {/* Divider between sections */}
+            {availableProviders.length > 0 && <Divider />}
+          </>
+        )}
 
-                  {/* Page Format */}
-                  <div>
-                    <Text size="sm" fw={500} mb="xs">
-                      {t('admin.settings.connections.mobileScannerPageFormat', 'Page Format')}
-                    </Text>
-                    <Text size="xs" c="dimmed" mb="sm">
-                      {t('admin.settings.connections.mobileScannerPageFormatDesc', 'PDF page size for converted images. "Keep" uses original image dimensions.')}
-                    </Text>
-                    <Group gap="xs">
-                      <Select
-                        value={settings?.mobileScannerPageFormat || 'A4'}
-                        onChange={(value) => {
-                          if (!loginEnabled) return;
-                          setSettings({ ...settings, mobileScannerPageFormat: value || 'A4' });
-                        }}
-                        data={[
-                          { value: 'keep', label: t('admin.settings.connections.pageFormatKeep', 'Keep (Original Dimensions)') },
-                          { value: 'A4', label: t('admin.settings.connections.pageFormatA4', 'A4 (210×297mm)') },
-                          { value: 'letter', label: t('admin.settings.connections.pageFormatLetter', 'Letter (8.5×11in)') }
-                        ]}
-                        disabled={!loginEnabled}
-                        style={{ width: '250px' }}
-                        comboboxProps={{ zIndex: Z_INDEX_CONFIG_MODAL }}
-                      />
-                      <PendingBadge show={isFieldPending('mobileScannerPageFormat')} />
-                    </Group>
-                  </div>
-
-                  {/* Stretch to Fit */}
-                  <div>
-                    <Text size="sm" fw={500} mb="xs">
-                      {t('admin.settings.connections.mobileScannerStretchToFit', 'Stretch to Fit')}
-                    </Text>
-                    <Text size="xs" c="dimmed" mb="sm">
-                      {t('admin.settings.connections.mobileScannerStretchToFitDesc', 'Stretch images to fill the entire page. If disabled, images are centered with preserved aspect ratio.')}
-                    </Text>
-                    <Group gap="xs">
-                      <Switch
-                        checked={settings?.mobileScannerStretchToFit || false}
-                        onChange={(e) => {
-                          if (!loginEnabled) return;
-                          setSettings({ ...settings, mobileScannerStretchToFit: e.target.checked });
-                        }}
-                        disabled={!loginEnabled}
-                      />
-                      <PendingBadge show={isFieldPending('mobileScannerStretchToFit')} />
-                    </Group>
-                  </div>
-                </>
-              )}
-            </Stack>
-          </Collapse>
-        </Stack>
-      </Paper>
-
-      {/* Linked Services Section - Only show if there are linked providers */}
-      {linkedProviders.length > 0 && (
-        <>
+        {/* Unlinked Services Section */}
+        {availableProviders.length > 0 && (
           <div>
             <Text fw={600} size="md" mb="md">
-              {t('admin.settings.connections.linkedServices', 'Linked Services')}
+              {t("admin.settings.connections.unlinkedServices", "Unlinked Services")}
             </Text>
             <Stack gap="sm">
-              {linkedProviders.map((provider) => (
+              {availableProviders.map((provider) => (
                 <ProviderCard
                   key={provider.id}
                   provider={provider}
-                  isConfigured={true}
+                  isConfigured={false}
                   settings={getProviderSettings(provider)}
                   onChange={(updatedSettings) => updateProviderSettings(provider, updatedSettings)}
                   disabled={!loginEnabled}
@@ -704,39 +761,10 @@ export default function AdminConnectionsSection() {
               ))}
             </Stack>
           </div>
+        )}
 
-          {/* Divider between sections */}
-          {availableProviders.length > 0 && <Divider />}
-        </>
-      )}
-
-      {/* Unlinked Services Section */}
-      {availableProviders.length > 0 && (
-        <div>
-          <Text fw={600} size="md" mb="md">
-            {t('admin.settings.connections.unlinkedServices', 'Unlinked Services')}
-          </Text>
-          <Stack gap="sm">
-            {availableProviders.map((provider) => (
-              <ProviderCard
-                key={provider.id}
-                provider={provider}
-                isConfigured={false}
-                settings={getProviderSettings(provider)}
-                onChange={(updatedSettings) => updateProviderSettings(provider, updatedSettings)}
-                disabled={!loginEnabled}
-              />
-            ))}
-          </Stack>
-        </div>
-      )}
-
-      {/* Restart Confirmation Modal */}
-      <RestartConfirmationModal
-        opened={restartModalOpened}
-        onClose={closeRestartModal}
-        onRestart={restartServer}
-      />
+        {/* Restart Confirmation Modal */}
+        <RestartConfirmationModal opened={restartModalOpened} onClose={closeRestartModal} onRestart={restartServer} />
       </Stack>
 
       <SettingsStickyFooter
diff --git a/frontend/src/proprietary/components/shared/config/configSections/AdminDatabaseSection.tsx b/frontend/src/proprietary/components/shared/config/configSections/AdminDatabaseSection.tsx
index 749271d01c..0fb04aae8b 100644
--- a/frontend/src/proprietary/components/shared/config/configSections/AdminDatabaseSection.tsx
+++ b/frontend/src/proprietary/components/shared/config/configSections/AdminDatabaseSection.tsx
@@ -143,7 +143,7 @@ export default function AdminDatabaseSection() {
       setBackupFiles(data.backupFiles || []);
       setDatabaseVersion(data.databaseVersion || null);
     } catch (error: unknown) {
-      const message = isAxiosError(error) ? (error.response?.data?.message || error.message) : undefined;
+      const message = isAxiosError(error) ? error.response?.data?.message || error.message : undefined;
       alert({
         alertType: "error",
         title: t("admin.settings.database.loadError", "Failed to load database backups"),
@@ -191,7 +191,7 @@ export default function AdminDatabaseSection() {
       alert({ alertType: "success", title: t("admin.settings.database.backupCreated", "Backup created successfully") });
       await loadBackupData();
     } catch (error: unknown) {
-      const message = isAxiosError(error) ? (error.response?.data?.message || error.message) : undefined;
+      const message = isAxiosError(error) ? error.response?.data?.message || error.message : undefined;
       alert({
         alertType: "error",
         title: t("admin.settings.database.backupFailed", "Failed to create backup"),
@@ -211,7 +211,7 @@ export default function AdminDatabaseSection() {
       setUploadFile(null);
       await loadBackupData();
     } catch (error: unknown) {
-      const message = isAxiosError(error) ? (error.response?.data?.message || error.message) : undefined;
+      const message = isAxiosError(error) ? error.response?.data?.message || error.message : undefined;
       alert({
         alertType: "error",
         title: t("admin.settings.database.importFailed", "Failed to import backup"),
@@ -272,7 +272,7 @@ export default function AdminDatabaseSection() {
       alert({ alertType: "success", title: t("admin.settings.database.importSuccess", "Backup imported successfully") });
       await loadBackupData();
     } catch (error: unknown) {
-      const message = isAxiosError(error) ? (error.response?.data?.message || error.message) : undefined;
+      const message = isAxiosError(error) ? error.response?.data?.message || error.message : undefined;
       alert({
         alertType: "error",
         title: t("admin.settings.database.importFailed", "Failed to import backup"),
@@ -291,7 +291,7 @@ export default function AdminDatabaseSection() {
       alert({ alertType: "success", title: t("admin.settings.database.deleteSuccess", "Backup deleted") });
       await loadBackupData();
     } catch (error: unknown) {
-      const message = isAxiosError(error) ? (error.response?.data?.message || error.message) : undefined;
+      const message = isAxiosError(error) ? error.response?.data?.message || error.message : undefined;
       alert({
         alertType: "error",
         title: t("admin.settings.database.deleteFailed", "Failed to delete backup"),
@@ -322,7 +322,7 @@ export default function AdminDatabaseSection() {
       document.body.appendChild(link);
       link.click();
     } catch (error: unknown) {
-      const message = isAxiosError(error) ? (error.response?.data?.message || error.message) : undefined;
+      const message = isAxiosError(error) ? error.response?.data?.message || error.message : undefined;
       alert({
         alertType: "error",
         title: t("admin.settings.database.downloadFailed", "Failed to download backup"),
@@ -355,195 +355,196 @@ export default function AdminDatabaseSection() {
       <Stack gap="lg" className="settings-section-content">
         <LoginRequiredBanner show={!loginEnabled} />
 
-      <div>
-        <Group justify="space-between" align="center">
-          <div>
-            <Text fw={600} size="lg">
-              {t("admin.settings.database.title", "Database")}
-            </Text>
-            <Text size="sm" c="dimmed">
-              {t(
-                "admin.settings.database.description",
-                "Configure custom database connection settings for enterprise deployments.",
-              )}
-            </Text>
-          </div>
-          <Badge color="grape" size="lg">
-            ENTERPRISE
-          </Badge>
-        </Group>
-      </div>
-
-      {/* Database Configuration */}
-      <Paper withBorder p="md" radius="md">
-        <Stack gap="md">
-          <Text fw={600} size="sm" mb="xs">
-            {t("admin.settings.database.configuration", "Database Configuration")}
-          </Text>
-
-          <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+        <div>
+          <Group justify="space-between" align="center">
             <div>
-              <Text fw={500} size="sm">
-                {t("admin.settings.database.enableCustom.label", "Enable Custom Database")}
+              <Text fw={600} size="lg">
+                {t("admin.settings.database.title", "Database")}
               </Text>
-              <Text size="xs" c="dimmed" mt={4}>
+              <Text size="sm" c="dimmed">
                 {t(
-                  "admin.settings.database.enableCustom.description",
-                  "Use your own custom database configuration instead of the default embedded database",
+                  "admin.settings.database.description",
+                  "Configure custom database connection settings for enterprise deployments.",
                 )}
               </Text>
             </div>
-            <Group gap="xs">
-              <Switch
-                checked={settings?.enableCustomDatabase || false}
-                onChange={(e) => {
-                  if (!loginEnabled) return;
-                  setSettings({ ...settings, enableCustomDatabase: e.target.checked });
-                }}
-                disabled={!loginEnabled}
-                styles={getDisabledStyles()}
-              />
-              <PendingBadge show={isFieldPending("enableCustomDatabase")} />
-            </Group>
-          </div>
+            <Badge color="grape" size="lg">
+              ENTERPRISE
+            </Badge>
+          </Group>
+        </div>
 
-          {settings?.enableCustomDatabase && (
-            <>
+        {/* Database Configuration */}
+        <Paper withBorder p="md" radius="md">
+          <Stack gap="md">
+            <Text fw={600} size="sm" mb="xs">
+              {t("admin.settings.database.configuration", "Database Configuration")}
+            </Text>
+
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
               <div>
-                <TextInput
-                  label={
-                    <Group gap="xs">
-                      <span>{t("admin.settings.database.customUrl.label", "Custom Database URL")}</span>
-                      <PendingBadge show={isFieldPending("customDatabaseUrl")} />
-                    </Group>
-                  }
-                  description={t(
-                    "admin.settings.database.customUrl.description",
-                    "Full JDBC connection string (e.g., jdbc:postgresql://localhost:5432/postgres). If provided, individual connection settings below are not used.",
+                <Text fw={500} size="sm">
+                  {t("admin.settings.database.enableCustom.label", "Enable Custom Database")}
+                </Text>
+                <Text size="xs" c="dimmed" mt={4}>
+                  {t(
+                    "admin.settings.database.enableCustom.description",
+                    "Use your own custom database configuration instead of the default embedded database",
                   )}
-                  value={settings?.customDatabaseUrl || ""}
-                  onChange={(e) => setSettings({ ...settings, customDatabaseUrl: e.target.value })}
-                  placeholder="jdbc:postgresql://localhost:5432/postgres"
-                  disabled={!loginEnabled}
-                />
+                </Text>
               </div>
-
-              <div>
-                <Select
-                  label={
-                    <Group gap="xs">
-                      <span>{t("admin.settings.database.type.label", "Database Type")}</span>
-                      <PendingBadge show={isFieldPending("type")} />
-                    </Group>
-                  }
-                  description={t(
-                    "admin.settings.database.type.description",
-                    "Type of database (not used if custom URL is provided)",
-                  )}
-                  value={settings?.type || "postgresql"}
-                  onChange={(value) => setSettings({ ...settings, type: value || "postgresql" })}
-                  data={[
-                    { value: "postgresql", label: "PostgreSQL" },
-                    { value: "h2", label: "H2" },
-                    { value: "mysql", label: "MySQL" },
-                    { value: "mariadb", label: "MariaDB" },
-                  ]}
+              <Group gap="xs">
+                <Switch
+                  checked={settings?.enableCustomDatabase || false}
+                  onChange={(e) => {
+                    if (!loginEnabled) return;
+                    setSettings({ ...settings, enableCustomDatabase: e.target.checked });
+                  }}
                   disabled={!loginEnabled}
+                  styles={getDisabledStyles()}
                 />
-              </div>
+                <PendingBadge show={isFieldPending("enableCustomDatabase")} />
+              </Group>
+            </div>
 
-              <div>
-                <TextInput
-                  label={
-                    <Group gap="xs">
-                      <span>{t("admin.settings.database.hostName.label", "Host Name")}</span>
-                      <PendingBadge show={isFieldPending("hostName")} />
-                    </Group>
-                  }
-                  description={t(
-                    "admin.settings.database.hostName.description",
-                    "Database server hostname (not used if custom URL is provided)",
-                  )}
-                  value={settings?.hostName || ""}
-                  onChange={(e) => setSettings({ ...settings, hostName: e.target.value })}
-                  placeholder="localhost"
-                  disabled={!loginEnabled}
-                />
-              </div>
+            {settings?.enableCustomDatabase && (
+              <>
+                <div>
+                  <TextInput
+                    label={
+                      <Group gap="xs">
+                        <span>{t("admin.settings.database.customUrl.label", "Custom Database URL")}</span>
+                        <PendingBadge show={isFieldPending("customDatabaseUrl")} />
+                      </Group>
+                    }
+                    description={t(
+                      "admin.settings.database.customUrl.description",
+                      "Full JDBC connection string (e.g., jdbc:postgresql://localhost:5432/postgres). If provided, individual connection settings below are not used.",
+                    )}
+                    value={settings?.customDatabaseUrl || ""}
+                    onChange={(e) => setSettings({ ...settings, customDatabaseUrl: e.target.value })}
+                    placeholder="jdbc:postgresql://localhost:5432/postgres"
+                    disabled={!loginEnabled}
+                  />
+                </div>
 
-              <div>
-                <NumberInput
-                  label={
-                    <Group gap="xs">
-                      <span>{t("admin.settings.database.port.label", "Port")}</span>
-                      <PendingBadge show={isFieldPending("port")} />
-                    </Group>
-                  }
-                  description={t(
-                    "admin.settings.database.port.description",
-                    "Database server port (not used if custom URL is provided)",
-                  )}
-                  value={settings?.port || 5432}
-                  onChange={(value) => setSettings({ ...settings, port: Number(value) })}
-                  min={1}
-                  max={65535}
-                  disabled={!loginEnabled}
-                />
-              </div>
+                <div>
+                  <Select
+                    label={
+                      <Group gap="xs">
+                        <span>{t("admin.settings.database.type.label", "Database Type")}</span>
+                        <PendingBadge show={isFieldPending("type")} />
+                      </Group>
+                    }
+                    description={t(
+                      "admin.settings.database.type.description",
+                      "Type of database (not used if custom URL is provided)",
+                    )}
+                    value={settings?.type || "postgresql"}
+                    onChange={(value) => setSettings({ ...settings, type: value || "postgresql" })}
+                    data={[
+                      { value: "postgresql", label: "PostgreSQL" },
+                      { value: "h2", label: "H2" },
+                      { value: "mysql", label: "MySQL" },
+                      { value: "mariadb", label: "MariaDB" },
+                    ]}
+                    disabled={!loginEnabled}
+                  />
+                </div>
 
-              <div>
-                <TextInput
-                  label={
-                    <Group gap="xs">
-                      <span>{t("admin.settings.database.name.label", "Database Name")}</span>
-                      <PendingBadge show={isFieldPending("name")} />
-                    </Group>
-                  }
-                  description={t(
-                    "admin.settings.database.name.description",
-                    "Name of the database (not used if custom URL is provided)",
-                  )}
-                  value={settings?.name || ""}
-                  onChange={(e) => setSettings({ ...settings, name: e.target.value })}
-                  placeholder="postgres"
-                  disabled={!loginEnabled}
-                />
-              </div>
+                <div>
+                  <TextInput
+                    label={
+                      <Group gap="xs">
+                        <span>{t("admin.settings.database.hostName.label", "Host Name")}</span>
+                        <PendingBadge show={isFieldPending("hostName")} />
+                      </Group>
+                    }
+                    description={t(
+                      "admin.settings.database.hostName.description",
+                      "Database server hostname (not used if custom URL is provided)",
+                    )}
+                    value={settings?.hostName || ""}
+                    onChange={(e) => setSettings({ ...settings, hostName: e.target.value })}
+                    placeholder="localhost"
+                    disabled={!loginEnabled}
+                  />
+                </div>
 
-              <div>
-                <TextInput
-                  label={
-                    <Group gap="xs">
-                      <span>{t("admin.settings.database.username.label", "Username")}</span>
-                      <PendingBadge show={isFieldPending("username")} />
-                    </Group>
-                  }
-                  description={t("admin.settings.database.username.description", "Database authentication username")}
-                  value={settings?.username || ""}
-                  onChange={(e) => setSettings({ ...settings, username: e.target.value })}
-                  placeholder="postgres"
-                  disabled={!loginEnabled}
-                />
-              </div>
+                <div>
+                  <NumberInput
+                    label={
+                      <Group gap="xs">
+                        <span>{t("admin.settings.database.port.label", "Port")}</span>
+                        <PendingBadge show={isFieldPending("port")} />
+                      </Group>
+                    }
+                    description={t(
+                      "admin.settings.database.port.description",
+                      "Database server port (not used if custom URL is provided)",
+                    )}
+                    value={settings?.port || 5432}
+                    onChange={(value) => setSettings({ ...settings, port: Number(value) })}
+                    min={1}
+                    max={65535}
+                    disabled={!loginEnabled}
+                  />
+                </div>
 
-              <div>
-                <Group gap="xs" align="center" mb={4}>
-                  <span style={{ fontWeight: 500, fontSize: "0.875rem" }}>{t("admin.settings.database.password.label", "Password")}</span>
-                  <PendingBadge show={isFieldPending("password")} />
-                </Group>
-                <EditableSecretField
-                  description={t("admin.settings.database.password.description", "Database authentication password")}
-                  value={settings?.password || ""}
-                  onChange={(value) => setSettings({ ...settings, password: value })}
-                  placeholder="Enter database password"
-                  disabled={!loginEnabled}
-                />
-              </div>
-            </>
-          )}
-        </Stack>
-      </Paper>
+                <div>
+                  <TextInput
+                    label={
+                      <Group gap="xs">
+                        <span>{t("admin.settings.database.name.label", "Database Name")}</span>
+                        <PendingBadge show={isFieldPending("name")} />
+                      </Group>
+                    }
+                    description={t(
+                      "admin.settings.database.name.description",
+                      "Name of the database (not used if custom URL is provided)",
+                    )}
+                    value={settings?.name || ""}
+                    onChange={(e) => setSettings({ ...settings, name: e.target.value })}
+                    placeholder="postgres"
+                    disabled={!loginEnabled}
+                  />
+                </div>
 
+                <div>
+                  <TextInput
+                    label={
+                      <Group gap="xs">
+                        <span>{t("admin.settings.database.username.label", "Username")}</span>
+                        <PendingBadge show={isFieldPending("username")} />
+                      </Group>
+                    }
+                    description={t("admin.settings.database.username.description", "Database authentication username")}
+                    value={settings?.username || ""}
+                    onChange={(e) => setSettings({ ...settings, username: e.target.value })}
+                    placeholder="postgres"
+                    disabled={!loginEnabled}
+                  />
+                </div>
+
+                <div>
+                  <Group gap="xs" align="center" mb={4}>
+                    <span style={{ fontWeight: 500, fontSize: "0.875rem" }}>
+                      {t("admin.settings.database.password.label", "Password")}
+                    </span>
+                    <PendingBadge show={isFieldPending("password")} />
+                  </Group>
+                  <EditableSecretField
+                    description={t("admin.settings.database.password.description", "Database authentication password")}
+                    value={settings?.password || ""}
+                    onChange={(value) => setSettings({ ...settings, password: value })}
+                    placeholder="Enter database password"
+                    disabled={!loginEnabled}
+                  />
+                </div>
+              </>
+            )}
+          </Stack>
+        </Paper>
       </Stack>
 
       <SettingsStickyFooter
@@ -555,262 +556,260 @@ export default function AdminDatabaseSection() {
       />
 
       <Stack gap="lg" className="settings-section-content" style={{ marginTop: 0 }}>
-      <Divider my="md" />
+        <Divider my="md" />
 
-      <Stack gap="md">
-        <Group justify="space-between" align="center">
-          <div>
-            <Text fw={600} size="lg">
-              {t("admin.settings.database.backupTitle", "Backups & Restore")}
-            </Text>
-            <Text size="sm" c="dimmed">
-              {t("admin.settings.database.backupDescription", "Manage H2 backups directly from the admin console.")}
-            </Text>
-          </div>
-          <Group gap="xs">
-            {databaseVersion && (
-              <Badge color="blue" variant="light">
-                {t("admin.settings.database.version", "H2 Version")}: {databaseVersion}
+        <Stack gap="md">
+          <Group justify="space-between" align="center">
+            <div>
+              <Text fw={600} size="lg">
+                {t("admin.settings.database.backupTitle", "Backups & Restore")}
+              </Text>
+              <Text size="sm" c="dimmed">
+                {t("admin.settings.database.backupDescription", "Manage H2 backups directly from the admin console.")}
+              </Text>
+            </div>
+            <Group gap="xs">
+              {databaseVersion && (
+                <Badge color="blue" variant="light">
+                  {t("admin.settings.database.version", "H2 Version")}: {databaseVersion}
+                </Badge>
+              )}
+              <Badge color={isEmbeddedH2 ? "green" : "red"} variant="light">
+                {isEmbeddedH2
+                  ? t("admin.settings.database.embedded", "Embedded H2")
+                  : t("admin.settings.database.external", "External DB")}
               </Badge>
-            )}
-            <Badge color={isEmbeddedH2 ? "green" : "red"} variant="light">
-              {isEmbeddedH2
-                ? t("admin.settings.database.embedded", "Embedded H2")
-                : t("admin.settings.database.external", "External DB")}
-            </Badge>
+            </Group>
           </Group>
-        </Group>
 
-        {!isEmbeddedH2 && (
-          <Alert icon={<LocalIcon icon="info" width="1.2rem" height="1.2rem" />} color="yellow" radius="md">
-            <Text fw={600} size="sm">
-              {t("admin.settings.database.h2Only", "Backups are available only for the embedded H2 database.")}
-            </Text>
-            <Text size="sm" c="dimmed">
-              {t(
-                "admin.settings.database.h2Hint",
-                "Set the database type to H2 and disable custom database to enable backup and restore.",
-              )}
-            </Text>
-          </Alert>
-        )}
-        {isEmbeddedH2 && (
-          <Paper withBorder p="md" radius="md">
-            <Stack gap="md">
-              <Group justify="space-between" align="center">
-                <Group gap="xs">
-                  <LocalIcon icon="backup" width="1.4rem" height="1.4rem" />
-                  <Text fw={600}>{t("admin.settings.database.manageBackups", "Manage backups")}</Text>
+          {!isEmbeddedH2 && (
+            <Alert icon={<LocalIcon icon="info" width="1.2rem" height="1.2rem" />} color="yellow" radius="md">
+              <Text fw={600} size="sm">
+                {t("admin.settings.database.h2Only", "Backups are available only for the embedded H2 database.")}
+              </Text>
+              <Text size="sm" c="dimmed">
+                {t(
+                  "admin.settings.database.h2Hint",
+                  "Set the database type to H2 and disable custom database to enable backup and restore.",
+                )}
+              </Text>
+            </Alert>
+          )}
+          {isEmbeddedH2 && (
+            <Paper withBorder p="md" radius="md">
+              <Stack gap="md">
+                <Group justify="space-between" align="center">
+                  <Group gap="xs">
+                    <LocalIcon icon="backup" width="1.4rem" height="1.4rem" />
+                    <Text fw={600}>{t("admin.settings.database.manageBackups", "Manage backups")}</Text>
+                  </Group>
+                  <Group gap="xs">
+                    <Button
+                      variant="light"
+                      leftSection={<LocalIcon icon="refresh" width="1rem" height="1rem" />}
+                      onClick={loadBackupData}
+                      disabled={!loginEnabled || !isEmbeddedH2}
+                    >
+                      {t("admin.settings.database.refresh", "Refresh")}
+                    </Button>
+                    <Button
+                      leftSection={<LocalIcon icon="cloud-upload" width="1rem" height="1rem" />}
+                      onClick={handleCreateBackup}
+                      loading={creatingBackup}
+                      disabled={!loginEnabled || !isEmbeddedH2}
+                    >
+                      {t("admin.settings.database.createBackup", "Create backup")}
+                    </Button>
+                  </Group>
                 </Group>
-                <Group gap="xs">
-                  <Button
-                    variant="light"
-                    leftSection={<LocalIcon icon="refresh" width="1rem" height="1rem" />}
-                    onClick={loadBackupData}
-                    disabled={!loginEnabled || !isEmbeddedH2}
-                  >
-                    {t("admin.settings.database.refresh", "Refresh")}
-                  </Button>
-                  <Button
-                    leftSection={<LocalIcon icon="cloud-upload" width="1rem" height="1rem" />}
-                    onClick={handleCreateBackup}
-                    loading={creatingBackup}
-                    disabled={!loginEnabled || !isEmbeddedH2}
-                  >
-                    {t("admin.settings.database.createBackup", "Create backup")}
-                  </Button>
-                </Group>
-              </Group>
 
-              <Box>
-                <Text fw={500} size="sm" mb={6}>
-                  {t("admin.settings.database.uploadTitle", "Upload & import")}
-                </Text>
-                <Group gap="sm" align="flex-end" wrap="wrap">
-                  <FileInput
-                    value={uploadFile}
-                    onChange={setUploadFile}
-                    placeholder={t("admin.settings.database.chooseFile", "Choose a .sql backup file")}
-                    accept=".sql"
-                    disabled={!loginEnabled || !isEmbeddedH2}
-                    styles={{ input: { minWidth: 280 } }}
-                  />
-                  <Button
-                    variant="outline"
-                    onClick={handleUploadImport}
-                    loading={importingUpload}
-                    disabled={!loginEnabled || !isEmbeddedH2}
-                    leftSection={<LocalIcon icon="play-circle" width="1rem" height="1rem" />}
-                  >
-                    {t("admin.settings.database.importFromUpload", "Import upload")}
-                  </Button>
-                </Group>
-              </Box>
+                <Box>
+                  <Text fw={500} size="sm" mb={6}>
+                    {t("admin.settings.database.uploadTitle", "Upload & import")}
+                  </Text>
+                  <Group gap="sm" align="flex-end" wrap="wrap">
+                    <FileInput
+                      value={uploadFile}
+                      onChange={setUploadFile}
+                      placeholder={t("admin.settings.database.chooseFile", "Choose a .sql backup file")}
+                      accept=".sql"
+                      disabled={!loginEnabled || !isEmbeddedH2}
+                      styles={{ input: { minWidth: 280 } }}
+                    />
+                    <Button
+                      variant="outline"
+                      onClick={handleUploadImport}
+                      loading={importingUpload}
+                      disabled={!loginEnabled || !isEmbeddedH2}
+                      leftSection={<LocalIcon icon="play-circle" width="1rem" height="1rem" />}
+                    >
+                      {t("admin.settings.database.importFromUpload", "Import upload")}
+                    </Button>
+                  </Group>
+                </Box>
 
-              {backupsLoading ? (
-                <Group justify="center" py="md">
-                  <Loader size="sm" />
-                </Group>
-              ) : backupFiles.length === 0 ? (
-                <Text size="sm" c="dimmed">
-                  {isEmbeddedH2
-                    ? t("admin.settings.database.noBackups", "No backups found yet.")
-                    : t(
-                        "admin.settings.database.unavailable",
-                        "Backup list unavailable for the current database configuration.",
-                      )}
-                </Text>
-              ) : (
-                <Table highlightOnHover withColumnBorders verticalSpacing="sm">
-                  <Table.Thead>
-                    <Table.Tr>
-                      <Table.Th>{t("admin.settings.database.fileName", "File")}</Table.Th>
-                      <Table.Th>{t("admin.settings.database.created", "Created")}</Table.Th>
-                      <Table.Th>{t("admin.settings.database.size", "Size")}</Table.Th>
-                      <Table.Th w={150}>{t("admin.settings.database.actions", "Actions")}</Table.Th>
-                    </Table.Tr>
-                  </Table.Thead>
-                  <Table.Tbody>
-                    {backupFiles.map((backup) => (
-                      <Table.Tr key={backup.fileName}>
-                        <Table.Td>{backup.fileName}</Table.Td>
-                        <Table.Td>{backup.formattedCreationDate || backup.creationDate || "-"}</Table.Td>
-                        <Table.Td>{backup.formattedFileSize || "-"}</Table.Td>
-                        <Table.Td>
-                          <Group gap="xs" justify="flex-start">
-                            <Tooltip label={t("admin.settings.database.download", "Download")} withArrow>
-                              <ActionIcon
-                                variant="subtle"
-                                onClick={() => handleDownload(backup.fileName)}
-                                disabled={!loginEnabled || !isEmbeddedH2}
-                              >
-                                {downloadingFile === backup.fileName ? (
-                                  <Loader size="xs" />
-                                ) : (
-                                  <LocalIcon icon="download" width="1rem" height="1rem" />
-                                )}
-                              </ActionIcon>
-                            </Tooltip>
-                            <Tooltip label={t("admin.settings.database.import", "Import")} withArrow>
-                              <ActionIcon
-                                variant="subtle"
-                                onClick={() => handleImportExisting(backup.fileName)}
-                                disabled={!loginEnabled || !isEmbeddedH2}
-                              >
-                                {importingBackupFile === backup.fileName ? (
-                                  <Loader size="xs" />
-                                ) : (
-                                  <LocalIcon icon="backup" width="1rem" height="1rem" />
-                                )}
-                              </ActionIcon>
-                            </Tooltip>
-                            <Tooltip label={t("admin.settings.database.delete", "Delete")} withArrow>
-                              <ActionIcon
-                                variant="subtle"
-                                color="red"
-                                onClick={() => handleDeleteClick(backup.fileName)}
-                                disabled={!loginEnabled || !isEmbeddedH2}
-                              >
-                                {deletingFile === backup.fileName ? (
-                                  <Loader size="xs" />
-                                ) : (
-                                  <LocalIcon icon="delete" width="1rem" height="1rem" />
-                                )}
-                              </ActionIcon>
-                            </Tooltip>
-                          </Group>
-                        </Table.Td>
+                {backupsLoading ? (
+                  <Group justify="center" py="md">
+                    <Loader size="sm" />
+                  </Group>
+                ) : backupFiles.length === 0 ? (
+                  <Text size="sm" c="dimmed">
+                    {isEmbeddedH2
+                      ? t("admin.settings.database.noBackups", "No backups found yet.")
+                      : t(
+                          "admin.settings.database.unavailable",
+                          "Backup list unavailable for the current database configuration.",
+                        )}
+                  </Text>
+                ) : (
+                  <Table highlightOnHover withColumnBorders verticalSpacing="sm">
+                    <Table.Thead>
+                      <Table.Tr>
+                        <Table.Th>{t("admin.settings.database.fileName", "File")}</Table.Th>
+                        <Table.Th>{t("admin.settings.database.created", "Created")}</Table.Th>
+                        <Table.Th>{t("admin.settings.database.size", "Size")}</Table.Th>
+                        <Table.Th w={150}>{t("admin.settings.database.actions", "Actions")}</Table.Th>
                       </Table.Tr>
-                    ))}
-                  </Table.Tbody>
-                </Table>
-              )}
+                    </Table.Thead>
+                    <Table.Tbody>
+                      {backupFiles.map((backup) => (
+                        <Table.Tr key={backup.fileName}>
+                          <Table.Td>{backup.fileName}</Table.Td>
+                          <Table.Td>{backup.formattedCreationDate || backup.creationDate || "-"}</Table.Td>
+                          <Table.Td>{backup.formattedFileSize || "-"}</Table.Td>
+                          <Table.Td>
+                            <Group gap="xs" justify="flex-start">
+                              <Tooltip label={t("admin.settings.database.download", "Download")} withArrow>
+                                <ActionIcon
+                                  variant="subtle"
+                                  onClick={() => handleDownload(backup.fileName)}
+                                  disabled={!loginEnabled || !isEmbeddedH2}
+                                >
+                                  {downloadingFile === backup.fileName ? (
+                                    <Loader size="xs" />
+                                  ) : (
+                                    <LocalIcon icon="download" width="1rem" height="1rem" />
+                                  )}
+                                </ActionIcon>
+                              </Tooltip>
+                              <Tooltip label={t("admin.settings.database.import", "Import")} withArrow>
+                                <ActionIcon
+                                  variant="subtle"
+                                  onClick={() => handleImportExisting(backup.fileName)}
+                                  disabled={!loginEnabled || !isEmbeddedH2}
+                                >
+                                  {importingBackupFile === backup.fileName ? (
+                                    <Loader size="xs" />
+                                  ) : (
+                                    <LocalIcon icon="backup" width="1rem" height="1rem" />
+                                  )}
+                                </ActionIcon>
+                              </Tooltip>
+                              <Tooltip label={t("admin.settings.database.delete", "Delete")} withArrow>
+                                <ActionIcon
+                                  variant="subtle"
+                                  color="red"
+                                  onClick={() => handleDeleteClick(backup.fileName)}
+                                  disabled={!loginEnabled || !isEmbeddedH2}
+                                >
+                                  {deletingFile === backup.fileName ? (
+                                    <Loader size="xs" />
+                                  ) : (
+                                    <LocalIcon icon="delete" width="1rem" height="1rem" />
+                                  )}
+                                </ActionIcon>
+                              </Tooltip>
+                            </Group>
+                          </Table.Td>
+                        </Table.Tr>
+                      ))}
+                    </Table.Tbody>
+                  </Table>
+                )}
+              </Stack>
+            </Paper>
+          )}
+        </Stack>
+
+        {/* Restart Confirmation Modal */}
+        <RestartConfirmationModal opened={restartModalOpened} onClose={closeRestartModal} onRestart={restartServer} />
+
+        <Modal
+          opened={confirmImportOpen}
+          onClose={closeConfirmImportModal}
+          title={t("admin.settings.database.confirmImportTitle", "Confirm database import")}
+          centered
+          withinPortal
+          zIndex={Z_INDEX_OVER_CONFIG_MODAL}
+        >
+          <Stack gap="md">
+            <Alert color="red" variant="light" icon={<LocalIcon icon="warning" width="1.2rem" height="1.2rem" />}>
+              <Text fw={600}>
+                {t("admin.settings.database.overwriteWarning", "Warning: This will overwrite the current database.")}
+              </Text>
+              <Text size="sm" c="dimmed">
+                {t(
+                  "admin.settings.database.overwriteWarningBody",
+                  "All existing data will be replaced by the uploaded backup. This action cannot be undone.",
+                )}
+              </Text>
+            </Alert>
+            <Stack gap={6}>
+              <Text size="sm" fw={600}>
+                {t("admin.settings.database.confirmCodeLabel", "Enter the confirmation code to proceed")}
+              </Text>
+              <Text size="lg" fw={700}>
+                {confirmCode}
+              </Text>
+              <TextInput
+                value={confirmInput}
+                onChange={(e) => setConfirmInput(e.currentTarget.value)}
+                placeholder={t("admin.settings.database.enterCode", "Enter the code shown above")}
+                minLength={4}
+                maxLength={4}
+                disabled={importingUpload}
+              />
             </Stack>
-          </Paper>
-        )}
-      </Stack>
-
-      {/* Restart Confirmation Modal */}
-      <RestartConfirmationModal opened={restartModalOpened} onClose={closeRestartModal} onRestart={restartServer} />
-
-      <Modal
-        opened={confirmImportOpen}
-        onClose={closeConfirmImportModal}
-        title={t("admin.settings.database.confirmImportTitle", "Confirm database import")}
-        centered
-        withinPortal
-        zIndex={Z_INDEX_OVER_CONFIG_MODAL}
-      >
-        <Stack gap="md">
-          <Alert color="red" variant="light" icon={<LocalIcon icon="warning" width="1.2rem" height="1.2rem" />}>
-            <Text fw={600}>
-              {t("admin.settings.database.overwriteWarning", "Warning: This will overwrite the current database.")}
-            </Text>
-            <Text size="sm" c="dimmed">
-              {t(
-                "admin.settings.database.overwriteWarningBody",
-                "All existing data will be replaced by the uploaded backup. This action cannot be undone.",
-              )}
-            </Text>
-          </Alert>
-          <Stack gap={6}>
-            <Text size="sm" fw={600}>
-              {t("admin.settings.database.confirmCodeLabel", "Enter the confirmation code to proceed")}
-            </Text>
-            <Text size="lg" fw={700}>
-              {confirmCode}
-            </Text>
-            <TextInput
-              value={confirmInput}
-              onChange={(e) => setConfirmInput(e.currentTarget.value)}
-              placeholder={t("admin.settings.database.enterCode", "Enter the code shown above")}
-              minLength={4}
-              maxLength={4}
-              disabled={importingUpload}
-            />
+            <Group justify="flex-end" gap="sm">
+              <Button variant="default" onClick={closeConfirmImportModal} disabled={importingUpload}>
+                {t("cancel", "Cancel")}
+              </Button>
+              <Button color="red" onClick={handleConfirmImport} loading={importingUpload} disabled={confirmInput.length === 0}>
+                {t("admin.settings.database.confirmImport", "Confirm import")}
+              </Button>
+            </Group>
           </Stack>
-          <Group justify="flex-end" gap="sm">
-            <Button variant="default" onClick={closeConfirmImportModal} disabled={importingUpload}>
-              {t("cancel", "Cancel")}
-            </Button>
-            <Button color="red" onClick={handleConfirmImport} loading={importingUpload} disabled={confirmInput.length === 0}>
-              {t("admin.settings.database.confirmImport", "Confirm import")}
-            </Button>
-          </Group>
-        </Stack>
-      </Modal>
+        </Modal>
 
-      <Modal
-        opened={deleteConfirmFile !== null}
-        onClose={() => setDeleteConfirmFile(null)}
-        title={t("admin.settings.database.deleteTitle", "Delete backup")}
-        centered
-        withinPortal
-        zIndex={Z_INDEX_OVER_CONFIG_MODAL}
-      >
-        <Stack gap="md">
-          <Alert color="red" variant="light" icon={<LocalIcon icon="warning" width="1.2rem" height="1.2rem" />}>
-            <Text fw={600}>
-              {t("admin.settings.database.deleteConfirm", "Delete this backup? This cannot be undone.")}
-            </Text>
-            <Text size="sm" c="dimmed">
-              {deleteConfirmFile}
-            </Text>
-          </Alert>
-          <Group justify="flex-end" gap="sm">
-            <Button variant="default" onClick={() => setDeleteConfirmFile(null)} disabled={deletingFile !== null}>
-              {t("cancel", "Cancel")}
-            </Button>
-            <Button
-              color="red"
-              onClick={() => deleteConfirmFile && handleDelete(deleteConfirmFile)}
-              loading={deletingFile === deleteConfirmFile}
-            >
-              {t("admin.settings.database.deleteConfirmAction", "Delete backup")}
-            </Button>
-          </Group>
-        </Stack>
-      </Modal>
+        <Modal
+          opened={deleteConfirmFile !== null}
+          onClose={() => setDeleteConfirmFile(null)}
+          title={t("admin.settings.database.deleteTitle", "Delete backup")}
+          centered
+          withinPortal
+          zIndex={Z_INDEX_OVER_CONFIG_MODAL}
+        >
+          <Stack gap="md">
+            <Alert color="red" variant="light" icon={<LocalIcon icon="warning" width="1.2rem" height="1.2rem" />}>
+              <Text fw={600}>{t("admin.settings.database.deleteConfirm", "Delete this backup? This cannot be undone.")}</Text>
+              <Text size="sm" c="dimmed">
+                {deleteConfirmFile}
+              </Text>
+            </Alert>
+            <Group justify="flex-end" gap="sm">
+              <Button variant="default" onClick={() => setDeleteConfirmFile(null)} disabled={deletingFile !== null}>
+                {t("cancel", "Cancel")}
+              </Button>
+              <Button
+                color="red"
+                onClick={() => deleteConfirmFile && handleDelete(deleteConfirmFile)}
+                loading={deletingFile === deleteConfirmFile}
+              >
+                {t("admin.settings.database.deleteConfirmAction", "Delete backup")}
+              </Button>
+            </Group>
+          </Stack>
+        </Modal>
       </Stack>
     </div>
   );
diff --git a/frontend/src/proprietary/components/shared/config/configSections/AdminEndpointsSection.tsx b/frontend/src/proprietary/components/shared/config/configSections/AdminEndpointsSection.tsx
index 61a760192e..b884172ff6 100644
--- a/frontend/src/proprietary/components/shared/config/configSections/AdminEndpointsSection.tsx
+++ b/frontend/src/proprietary/components/shared/config/configSections/AdminEndpointsSection.tsx
@@ -1,15 +1,15 @@
-import { useCallback, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Stack, Paper, Text, Loader, Group, MultiSelect, Switch } from '@mantine/core';
-import { alert } from '@app/components/toast';
-import RestartConfirmationModal from '@app/components/shared/config/RestartConfirmationModal';
-import { useRestartServer } from '@app/components/shared/config/useRestartServer';
-import { useAdminSettings } from '@app/hooks/useAdminSettings';
-import { useSettingsDirty } from '@app/hooks/useSettingsDirty';
-import PendingBadge from '@app/components/shared/config/PendingBadge';
-import { SettingsStickyFooter } from '@app/components/shared/config/SettingsStickyFooter';
-import { useLoginRequired } from '@app/hooks/useLoginRequired';
-import LoginRequiredBanner from '@app/components/shared/config/LoginRequiredBanner';
+import { useCallback, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { Stack, Paper, Text, Loader, Group, MultiSelect, Switch } from "@mantine/core";
+import { alert } from "@app/components/toast";
+import RestartConfirmationModal from "@app/components/shared/config/RestartConfirmationModal";
+import { useRestartServer } from "@app/components/shared/config/useRestartServer";
+import { useAdminSettings } from "@app/hooks/useAdminSettings";
+import { useSettingsDirty } from "@app/hooks/useSettingsDirty";
+import PendingBadge from "@app/components/shared/config/PendingBadge";
+import { SettingsStickyFooter } from "@app/components/shared/config/SettingsStickyFooter";
+import { useLoginRequired } from "@app/hooks/useLoginRequired";
+import LoginRequiredBanner from "@app/components/shared/config/LoginRequiredBanner";
 
 interface UISettingsData {
   defaultHideUnavailableTools?: boolean;
@@ -26,17 +26,10 @@ export default function AdminEndpointsSection() {
   const { loginEnabled, validateLoginEnabled } = useLoginRequired();
   const { restartModalOpened, showRestartModal, closeRestartModal, restartServer } = useRestartServer();
 
-  const {
-    settings,
-    setSettings,
-    loading,
-    saving,
-    fetchSettings,
-    saveSettings,
-    isFieldPending,
-  } = useAdminSettings<EndpointsSettingsData>({
-    sectionName: 'endpoints',
-  });
+  const { settings, setSettings, loading, saving, fetchSettings, saveSettings, isFieldPending } =
+    useAdminSettings<EndpointsSettingsData>({
+      sectionName: "endpoints",
+    });
 
   const {
     settings: uiSettings,
@@ -47,7 +40,7 @@ export default function AdminEndpointsSection() {
     saveSettings: saveUiSettings,
     isFieldPending: isUiFieldPending,
   } = useAdminSettings<UISettingsData>({
-    sectionName: 'ui',
+    sectionName: "ui",
   });
 
   useEffect(() => {
@@ -57,8 +50,16 @@ export default function AdminEndpointsSection() {
     }
   }, [loginEnabled, fetchSettings, fetchUiSettings]);
 
-  const { isDirty: isEndpointsDirty, resetToSnapshot: resetEndpointsSnapshot, markSaved: markEndpointsSaved } = useSettingsDirty(settings, loading);
-  const { isDirty: isUiDirty, resetToSnapshot: resetUiSnapshot, markSaved: markUiSaved } = useSettingsDirty(uiSettings, uiLoading);
+  const {
+    isDirty: isEndpointsDirty,
+    resetToSnapshot: resetEndpointsSnapshot,
+    markSaved: markEndpointsSaved,
+  } = useSettingsDirty(settings, loading);
+  const {
+    isDirty: isUiDirty,
+    resetToSnapshot: resetUiSnapshot,
+    markSaved: markUiSaved,
+  } = useSettingsDirty(uiSettings, uiLoading);
 
   const isDirty = isEndpointsDirty || isUiDirty;
 
@@ -79,9 +80,9 @@ export default function AdminEndpointsSection() {
       showRestartModal();
     } catch (_error) {
       alert({
-        alertType: 'error',
-        title: t('admin.error', 'Error'),
-        body: t('admin.settings.saveError', 'Failed to save settings'),
+        alertType: "error",
+        title: t("admin.error", "Error"),
+        body: t("admin.settings.saveError", "Failed to save settings"),
       });
     }
   };
@@ -98,7 +99,7 @@ export default function AdminEndpointsSection() {
   }, [isEndpointsDirty, isUiDirty, resetEndpointsSnapshot, resetUiSnapshot, setSettings, setUiSettings]);
 
   // Override loading state when login is disabled
-  const actualLoading = loginEnabled ? (loading || uiLoading) : false;
+  const actualLoading = loginEnabled ? loading || uiLoading : false;
 
   if (actualLoading) {
     return (
@@ -110,111 +111,111 @@ export default function AdminEndpointsSection() {
 
   // Complete list of all endpoints from frontend tool registry (alphabetical)
   const commonEndpoints = [
-    'add-attachments',
-    'add-image',
-    'add-page-numbers',
-    'add-password',
-    'add-stamp',
-    'add-watermark',
-    'adjust-contrast',
-    'auto-redact',
-    'auto-rename',
-    'auto-split-pdf',
-    'automate',
-    'booklet-imposition',
-    'cert-sign',
-    'compare',
-    'compress-pdf',
-    'crop',
-    'dev-airgapped-docs',
-    'dev-api-docs',
-    'dev-folder-scanning-docs',
-    'dev-sso-guide-docs',
-    'edit-table-of-contents',
-    'eml-to-pdf',
-    'extract-image-scans',
-    'extract-images',
-    'file-to-pdf',
-    'flatten',
-    'get-info-on-pdf',
-    'handleData',
-    'html-to-pdf',
-    'img-to-pdf',
-    'markdown-to-pdf',
-    'merge-pdfs',
-    'multi-page-layout',
-    'multi-tool',
-    'ocr-pdf',
-    'overlay-pdf',
-    'pdf-to-csv',
-    'pdf-to-xlsx',
-    'pdf-to-epub',
-    'pdf-to-html',
-    'pdf-to-img',
-    'pdf-to-markdown',
-    'pdf-to-pdfa',
-    'pdf-to-presentation',
-    'pdf-to-single-page',
-    'pdf-to-text',
-    'pdf-to-word',
-    'pdf-to-xml',
-    'pipeline',
-    'rearrange-pages',
-    'remove-annotations',
-    'remove-blanks',
-    'remove-cert-sign',
-    'remove-image-pdf',
-    'remove-pages',
-    'remove-password',
-    'repair',
-    'replace-invert-pdf',
-    'rotate-pdf',
-    'sanitize-pdf',
-    'scale-pages',
-    'scanner-effect',
-    'show-javascript',
-    'sign',
-    'split-by-size-or-count',
-    'split-pages',
-    'split-pdf-by-chapters',
-    'split-pdf-by-sections',
-    'text-editor-pdf',
-    'unlock-pdf-forms',
-    'update-metadata',
-    'validate-signature',
-    'view-pdf',
+    "add-attachments",
+    "add-image",
+    "add-page-numbers",
+    "add-password",
+    "add-stamp",
+    "add-watermark",
+    "adjust-contrast",
+    "auto-redact",
+    "auto-rename",
+    "auto-split-pdf",
+    "automate",
+    "booklet-imposition",
+    "cert-sign",
+    "compare",
+    "compress-pdf",
+    "crop",
+    "dev-airgapped-docs",
+    "dev-api-docs",
+    "dev-folder-scanning-docs",
+    "dev-sso-guide-docs",
+    "edit-table-of-contents",
+    "eml-to-pdf",
+    "extract-image-scans",
+    "extract-images",
+    "file-to-pdf",
+    "flatten",
+    "get-info-on-pdf",
+    "handleData",
+    "html-to-pdf",
+    "img-to-pdf",
+    "markdown-to-pdf",
+    "merge-pdfs",
+    "multi-page-layout",
+    "multi-tool",
+    "ocr-pdf",
+    "overlay-pdf",
+    "pdf-to-csv",
+    "pdf-to-xlsx",
+    "pdf-to-epub",
+    "pdf-to-html",
+    "pdf-to-img",
+    "pdf-to-markdown",
+    "pdf-to-pdfa",
+    "pdf-to-presentation",
+    "pdf-to-single-page",
+    "pdf-to-text",
+    "pdf-to-word",
+    "pdf-to-xml",
+    "pipeline",
+    "rearrange-pages",
+    "remove-annotations",
+    "remove-blanks",
+    "remove-cert-sign",
+    "remove-image-pdf",
+    "remove-pages",
+    "remove-password",
+    "repair",
+    "replace-invert-pdf",
+    "rotate-pdf",
+    "sanitize-pdf",
+    "scale-pages",
+    "scanner-effect",
+    "show-javascript",
+    "sign",
+    "split-by-size-or-count",
+    "split-pages",
+    "split-pdf-by-chapters",
+    "split-pdf-by-sections",
+    "text-editor-pdf",
+    "unlock-pdf-forms",
+    "update-metadata",
+    "validate-signature",
+    "view-pdf",
   ];
 
   // Complete list of functional and tool groups from EndpointConfiguration.java
   const commonGroups = [
     // Functional Groups
-    'PageOps',
-    'Convert',
-    'Security',
-    'Other',
-    'Advance',
-    'Automation',
-    'DeveloperTools',
-    'DeveloperDocs',
+    "PageOps",
+    "Convert",
+    "Security",
+    "Other",
+    "Advance",
+    "Automation",
+    "DeveloperTools",
+    "DeveloperDocs",
     // Tool Groups
-    'CLI',
-    'Python',
-    'OpenCV',
-    'LibreOffice',
-    'Unoconvert',
-    'Java',
-    'Javascript',
-    'qpdf',
-    'Ghostscript',
-    'ImageMagick',
-    'tesseract',
-    'OCRmyPDF',
-    'Weasyprint',
-    'Pdftohtml',
-    'Calibre',
-    'FFmpeg',
-    'veraPDF',
-    'rar',
+    "CLI",
+    "Python",
+    "OpenCV",
+    "LibreOffice",
+    "Unoconvert",
+    "Java",
+    "Javascript",
+    "qpdf",
+    "Ghostscript",
+    "ImageMagick",
+    "tesseract",
+    "OCRmyPDF",
+    "Weasyprint",
+    "Pdftohtml",
+    "Calibre",
+    "FFmpeg",
+    "veraPDF",
+    "rar",
   ];
 
   return (
@@ -222,107 +223,129 @@ export default function AdminEndpointsSection() {
       <Stack gap="lg" className="settings-section-content">
         <LoginRequiredBanner show={!loginEnabled} />
 
-      <div>
-        <Text fw={600} size="lg">{t('admin.settings.endpoints.title', 'API Endpoints')}</Text>
-        <Text size="sm" c="dimmed">
-          {t('admin.settings.endpoints.description', 'Control which API endpoints and endpoint groups are available.')}
-        </Text>
-      </div>
+        <div>
+          <Text fw={600} size="lg">
+            {t("admin.settings.endpoints.title", "API Endpoints")}
+          </Text>
+          <Text size="sm" c="dimmed">
+            {t("admin.settings.endpoints.description", "Control which API endpoints and endpoint groups are available.")}
+          </Text>
+        </div>
 
-      <Paper withBorder p="md" radius="md">
-        <Stack gap="md">
-          <Text fw={600} size="sm" mb="xs">{t('admin.settings.endpoints.management', 'Endpoint Management')}</Text>
-
-          <div>
-            <MultiSelect
-              label={
-                <Group gap="xs">
-                  <span>{t('admin.settings.endpoints.toRemove.label', 'Disabled Endpoints')}</span>
-                  <PendingBadge show={isFieldPending('toRemove')} />
-                </Group>
-              }
-              description={t('admin.settings.endpoints.toRemove.description', 'Select individual endpoints to disable')}
-              value={settings.toRemove || []}
-              onChange={(value) => {
-                if (!loginEnabled) return;
-                setSettings({ ...settings, toRemove: value });
-              }}
-              data={commonEndpoints.map(endpoint => ({ value: endpoint, label: endpoint }))}
-              searchable
-              clearable
-              placeholder="Select endpoints to disable"
-              comboboxProps={{ zIndex: 1400 }}
-              disabled={!loginEnabled}
-            />
-          </div>
-
-          <div>
-            <MultiSelect
-              label={
-                <Group gap="xs">
-                  <span>{t('admin.settings.endpoints.groupsToRemove.label', 'Disabled Endpoint Groups')}</span>
-                  <PendingBadge show={isFieldPending('groupsToRemove')} />
-                </Group>
-              }
-              description={t('admin.settings.endpoints.groupsToRemove.description', 'Select endpoint groups to disable')}
-              value={settings.groupsToRemove || []}
-              onChange={(value) => {
-                if (!loginEnabled) return;
-                setSettings({ ...settings, groupsToRemove: value });
-              }}
-              data={commonGroups.map(group => ({ value: group, label: group }))}
-              searchable
-              clearable
-              placeholder="Select groups to disable"
-              comboboxProps={{ zIndex: 1400 }}
-              disabled={!loginEnabled}
-            />
-          </div>
-        </Stack>
-      </Paper>
-
-      <Paper withBorder p="md" radius="md">
-        <Stack gap="md">
-          <div>
-            <Text fw={600} size="sm" mb="xs">{t('admin.settings.endpoints.userDefaults', 'User Preference Defaults')}</Text>
-            <Text size="xs" c="dimmed">
-              {t('admin.settings.endpoints.userDefaultsDescription', 'Set default values for user preferences. Users can override these in their personal settings.')}
+        <Paper withBorder p="md" radius="md">
+          <Stack gap="md">
+            <Text fw={600} size="sm" mb="xs">
+              {t("admin.settings.endpoints.management", "Endpoint Management")}
             </Text>
-          </div>
 
-          <Switch
-            label={
-              <Group gap="xs">
-                <span>{t('admin.settings.endpoints.defaultHideUnavailableTools.label', 'Hide unavailable tools by default')}</span>
-                <PendingBadge show={isUiFieldPending('defaultHideUnavailableTools')} />
-              </Group>
-            }
-            description={t('admin.settings.endpoints.defaultHideUnavailableTools.description', 'Remove disabled tools instead of showing them greyed out')}
-            checked={uiSettings.defaultHideUnavailableTools || false}
-            onChange={(e) => {
-              if (!loginEnabled) return;
-              setUiSettings({ ...uiSettings, defaultHideUnavailableTools: e.currentTarget.checked });
-            }}
-            disabled={!loginEnabled}
-          />
+            <div>
+              <MultiSelect
+                label={
+                  <Group gap="xs">
+                    <span>{t("admin.settings.endpoints.toRemove.label", "Disabled Endpoints")}</span>
+                    <PendingBadge show={isFieldPending("toRemove")} />
+                  </Group>
+                }
+                description={t("admin.settings.endpoints.toRemove.description", "Select individual endpoints to disable")}
+                value={settings.toRemove || []}
+                onChange={(value) => {
+                  if (!loginEnabled) return;
+                  setSettings({ ...settings, toRemove: value });
+                }}
+                data={commonEndpoints.map((endpoint) => ({ value: endpoint, label: endpoint }))}
+                searchable
+                clearable
+                placeholder="Select endpoints to disable"
+                comboboxProps={{ zIndex: 1400 }}
+                disabled={!loginEnabled}
+              />
+            </div>
 
-          <Switch
-            label={
-              <Group gap="xs">
-                <span>{t('admin.settings.endpoints.defaultHideUnavailableConversions.label', 'Hide unavailable conversions by default')}</span>
-                <PendingBadge show={isUiFieldPending('defaultHideUnavailableConversions')} />
-              </Group>
-            }
-            description={t('admin.settings.endpoints.defaultHideUnavailableConversions.description', 'Remove disabled conversion options instead of showing them greyed out')}
-            checked={uiSettings.defaultHideUnavailableConversions || false}
-            onChange={(e) => {
-              if (!loginEnabled) return;
-              setUiSettings({ ...uiSettings, defaultHideUnavailableConversions: e.currentTarget.checked });
-            }}
-            disabled={!loginEnabled}
-          />
-        </Stack>
-      </Paper>
+            <div>
+              <MultiSelect
+                label={
+                  <Group gap="xs">
+                    <span>{t("admin.settings.endpoints.groupsToRemove.label", "Disabled Endpoint Groups")}</span>
+                    <PendingBadge show={isFieldPending("groupsToRemove")} />
+                  </Group>
+                }
+                description={t("admin.settings.endpoints.groupsToRemove.description", "Select endpoint groups to disable")}
+                value={settings.groupsToRemove || []}
+                onChange={(value) => {
+                  if (!loginEnabled) return;
+                  setSettings({ ...settings, groupsToRemove: value });
+                }}
+                data={commonGroups.map((group) => ({ value: group, label: group }))}
+                searchable
+                clearable
+                placeholder="Select groups to disable"
+                comboboxProps={{ zIndex: 1400 }}
+                disabled={!loginEnabled}
+              />
+            </div>
+          </Stack>
+        </Paper>
+
+        <Paper withBorder p="md" radius="md">
+          <Stack gap="md">
+            <div>
+              <Text fw={600} size="sm" mb="xs">
+                {t("admin.settings.endpoints.userDefaults", "User Preference Defaults")}
+              </Text>
+              <Text size="xs" c="dimmed">
+                {t(
+                  "admin.settings.endpoints.userDefaultsDescription",
+                  "Set default values for user preferences. Users can override these in their personal settings.",
+                )}
+              </Text>
+            </div>
+
+            <Switch
+              label={
+                <Group gap="xs">
+                  <span>
+                    {t("admin.settings.endpoints.defaultHideUnavailableTools.label", "Hide unavailable tools by default")}
+                  </span>
+                  <PendingBadge show={isUiFieldPending("defaultHideUnavailableTools")} />
+                </Group>
+              }
+              description={t(
+                "admin.settings.endpoints.defaultHideUnavailableTools.description",
+                "Remove disabled tools instead of showing them greyed out",
+              )}
+              checked={uiSettings.defaultHideUnavailableTools || false}
+              onChange={(e) => {
+                if (!loginEnabled) return;
+                setUiSettings({ ...uiSettings, defaultHideUnavailableTools: e.currentTarget.checked });
+              }}
+              disabled={!loginEnabled}
+            />
+
+            <Switch
+              label={
+                <Group gap="xs">
+                  <span>
+                    {t(
+                      "admin.settings.endpoints.defaultHideUnavailableConversions.label",
+                      "Hide unavailable conversions by default",
+                    )}
+                  </span>
+                  <PendingBadge show={isUiFieldPending("defaultHideUnavailableConversions")} />
+                </Group>
+              }
+              description={t(
+                "admin.settings.endpoints.defaultHideUnavailableConversions.description",
+                "Remove disabled conversion options instead of showing them greyed out",
+              )}
+              checked={uiSettings.defaultHideUnavailableConversions || false}
+              onChange={(e) => {
+                if (!loginEnabled) return;
+                setUiSettings({ ...uiSettings, defaultHideUnavailableConversions: e.currentTarget.checked });
+              }}
+              disabled={!loginEnabled}
+            />
+          </Stack>
+        </Paper>
       </Stack>
 
       <SettingsStickyFooter
@@ -334,11 +357,7 @@ export default function AdminEndpointsSection() {
       />
 
       {/* Restart Confirmation Modal */}
-      <RestartConfirmationModal
-        opened={restartModalOpened}
-        onClose={closeRestartModal}
-        onRestart={restartServer}
-      />
+      <RestartConfirmationModal opened={restartModalOpened} onClose={closeRestartModal} onRestart={restartServer} />
     </div>
   );
 }
diff --git a/frontend/src/proprietary/components/shared/config/configSections/AdminFeaturesSection.tsx b/frontend/src/proprietary/components/shared/config/configSections/AdminFeaturesSection.tsx
index 7da712f76a..80683938a5 100644
--- a/frontend/src/proprietary/components/shared/config/configSections/AdminFeaturesSection.tsx
+++ b/frontend/src/proprietary/components/shared/config/configSections/AdminFeaturesSection.tsx
@@ -1,17 +1,17 @@
-import { useCallback, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
-import { TextInput, NumberInput, Switch, Stack, Paper, Text, Loader, Group, Badge } from '@mantine/core';
-import { alert } from '@app/components/toast';
-import RestartConfirmationModal from '@app/components/shared/config/RestartConfirmationModal';
-import { useRestartServer } from '@app/components/shared/config/useRestartServer';
-import { useAdminSettings } from '@app/hooks/useAdminSettings';
-import { useSettingsDirty } from '@app/hooks/useSettingsDirty';
-import PendingBadge from '@app/components/shared/config/PendingBadge';
-import { SettingsStickyFooter } from '@app/components/shared/config/SettingsStickyFooter';
-import apiClient from '@app/services/apiClient';
-import { useLoginRequired } from '@app/hooks/useLoginRequired';
-import LoginRequiredBanner from '@app/components/shared/config/LoginRequiredBanner';
+import { useCallback, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { TextInput, NumberInput, Switch, Stack, Paper, Text, Loader, Group, Badge } from "@mantine/core";
+import { alert } from "@app/components/toast";
+import RestartConfirmationModal from "@app/components/shared/config/RestartConfirmationModal";
+import { useRestartServer } from "@app/components/shared/config/useRestartServer";
+import { useAdminSettings } from "@app/hooks/useAdminSettings";
+import { useSettingsDirty } from "@app/hooks/useSettingsDirty";
+import PendingBadge from "@app/components/shared/config/PendingBadge";
+import { SettingsStickyFooter } from "@app/components/shared/config/SettingsStickyFooter";
+import apiClient from "@app/services/apiClient";
+import { useLoginRequired } from "@app/hooks/useLoginRequired";
+import LoginRequiredBanner from "@app/components/shared/config/LoginRequiredBanner";
 
 interface FeaturesSettingsData {
   serverCertificate?: {
@@ -28,52 +28,45 @@ export default function AdminFeaturesSection() {
   const { loginEnabled, validateLoginEnabled, getDisabledStyles } = useLoginRequired();
   const { restartModalOpened, showRestartModal, closeRestartModal, restartServer } = useRestartServer();
 
-  const {
-    settings,
-    setSettings,
-    loading,
-    saving,
-    fetchSettings,
-    saveSettings,
-    isFieldPending,
-  } = useAdminSettings<FeaturesSettingsData>({
-    sectionName: 'features',
-    fetchTransformer: async (): Promise<FeaturesSettingsData & { _pending?: Record<string, unknown> }> => {
-      const systemResponse = await apiClient.get('/api/v1/admin/settings/section/system');
-      const systemData = systemResponse.data || {};
+  const { settings, setSettings, loading, saving, fetchSettings, saveSettings, isFieldPending } =
+    useAdminSettings<FeaturesSettingsData>({
+      sectionName: "features",
+      fetchTransformer: async (): Promise<FeaturesSettingsData & { _pending?: Record<string, unknown> }> => {
+        const systemResponse = await apiClient.get("/api/v1/admin/settings/section/system");
+        const systemData = systemResponse.data || {};
 
-      const result: FeaturesSettingsData & { _pending?: Record<string, unknown> } = {
-        serverCertificate: systemData.serverCertificate || {
-          enabled: true,
-          organizationName: 'Stirling-PDF',
-          validity: 365,
-          regenerateOnStartup: false
+        const result: FeaturesSettingsData & { _pending?: Record<string, unknown> } = {
+          serverCertificate: systemData.serverCertificate || {
+            enabled: true,
+            organizationName: "Stirling-PDF",
+            validity: 365,
+            regenerateOnStartup: false,
+          },
+        };
+
+        // Map pending changes from system._pending.serverCertificate
+        if (systemData._pending?.serverCertificate) {
+          result._pending = { serverCertificate: systemData._pending.serverCertificate };
         }
-      };
 
-      // Map pending changes from system._pending.serverCertificate
-      if (systemData._pending?.serverCertificate) {
-        result._pending = { serverCertificate: systemData._pending.serverCertificate };
-      }
+        return result;
+      },
+      saveTransformer: (settings: FeaturesSettingsData) => {
+        const deltaSettings: Record<string, unknown> = {};
 
-      return result;
-    },
-    saveTransformer: (settings: FeaturesSettingsData) => {
-      const deltaSettings: Record<string, unknown> = {};
+        if (settings.serverCertificate) {
+          deltaSettings["system.serverCertificate.enabled"] = settings.serverCertificate.enabled;
+          deltaSettings["system.serverCertificate.organizationName"] = settings.serverCertificate.organizationName;
+          deltaSettings["system.serverCertificate.validity"] = settings.serverCertificate.validity;
+          deltaSettings["system.serverCertificate.regenerateOnStartup"] = settings.serverCertificate.regenerateOnStartup;
+        }
 
-      if (settings.serverCertificate) {
-        deltaSettings['system.serverCertificate.enabled'] = settings.serverCertificate.enabled;
-        deltaSettings['system.serverCertificate.organizationName'] = settings.serverCertificate.organizationName;
-        deltaSettings['system.serverCertificate.validity'] = settings.serverCertificate.validity;
-        deltaSettings['system.serverCertificate.regenerateOnStartup'] = settings.serverCertificate.regenerateOnStartup;
-      }
-
-      return {
-        sectionData: {},
-        deltaSettings
-      };
-    }
-  });
+        return {
+          sectionData: {},
+          deltaSettings,
+        };
+      },
+    });
 
   useEffect(() => {
     if (loginEnabled) {
@@ -93,9 +86,9 @@ export default function AdminFeaturesSection() {
       showRestartModal();
     } catch (_error) {
       alert({
-        alertType: 'error',
-        title: t('admin.error', 'Error'),
-        body: t('admin.settings.saveError', 'Failed to save settings'),
+        alertType: "error",
+        title: t("admin.error", "Error"),
+        body: t("admin.settings.saveError", "Failed to save settings"),
       });
     }
   };
@@ -119,121 +112,148 @@ export default function AdminFeaturesSection() {
     <div className="settings-section-container">
       <Stack gap="lg" className="settings-section-content">
         <LoginRequiredBanner show={!loginEnabled} />
-      <div>
-        <Text fw={600} size="lg">{t('admin.settings.features.title', 'Features')}</Text>
-        <Text size="sm" c="dimmed">
-          {t('admin.settings.features.description', 'Configure optional features and functionality.')}
-        </Text>
-      </div>
-
-      {/* Server Certificate - Pro Feature */}
-      <Paper withBorder p="md" radius="md">
-        <Stack gap="md">
-          <Group justify="space-between" align="center">
-            <Text fw={600} size="sm">{t('admin.settings.features.serverCertificate.label', 'Server Certificate')}</Text>
-            <Badge
-              color="grape"
-              size="sm"
-              style={{ cursor: 'pointer' }}
-              onClick={() => navigate('/settings/adminPlan')}
-              title={t('admin.settings.badge.clickToUpgrade', 'Click to view plan details')}
-            >
-              PRO
-            </Badge>
-          </Group>
-
-          <Text size="xs" c="dimmed">
-            {t('admin.settings.features.serverCertificate.description', 'Configure server-side certificate generation for "Sign with Stirling-PDF" functionality')}
+        <div>
+          <Text fw={600} size="lg">
+            {t("admin.settings.features.title", "Features")}
           </Text>
+          <Text size="sm" c="dimmed">
+            {t("admin.settings.features.description", "Configure optional features and functionality.")}
+          </Text>
+        </div>
 
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <div>
-              <Text fw={500} size="sm">{t('admin.settings.features.serverCertificate.enabled.label', 'Enable Server Certificate')}</Text>
-              <Text size="xs" c="dimmed" mt={4}>
-                {t('admin.settings.features.serverCertificate.enabled.description', 'Enable server-side certificate for "Sign with Stirling-PDF" option')}
+        {/* Server Certificate - Pro Feature */}
+        <Paper withBorder p="md" radius="md">
+          <Stack gap="md">
+            <Group justify="space-between" align="center">
+              <Text fw={600} size="sm">
+                {t("admin.settings.features.serverCertificate.label", "Server Certificate")}
               </Text>
+              <Badge
+                color="grape"
+                size="sm"
+                style={{ cursor: "pointer" }}
+                onClick={() => navigate("/settings/adminPlan")}
+                title={t("admin.settings.badge.clickToUpgrade", "Click to view plan details")}
+              >
+                PRO
+              </Badge>
+            </Group>
+
+            <Text size="xs" c="dimmed">
+              {t(
+                "admin.settings.features.serverCertificate.description",
+                'Configure server-side certificate generation for "Sign with Stirling-PDF" functionality',
+              )}
+            </Text>
+
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+              <div>
+                <Text fw={500} size="sm">
+                  {t("admin.settings.features.serverCertificate.enabled.label", "Enable Server Certificate")}
+                </Text>
+                <Text size="xs" c="dimmed" mt={4}>
+                  {t(
+                    "admin.settings.features.serverCertificate.enabled.description",
+                    'Enable server-side certificate for "Sign with Stirling-PDF" option',
+                  )}
+                </Text>
+              </div>
+              <Group gap="xs">
+                <Switch
+                  checked={settings.serverCertificate?.enabled ?? true}
+                  onChange={(e) => {
+                    if (!loginEnabled) return;
+                    setSettings({
+                      ...settings,
+                      serverCertificate: { ...settings.serverCertificate, enabled: e.target.checked },
+                    });
+                  }}
+                  disabled={!loginEnabled}
+                  styles={getDisabledStyles()}
+                />
+                <PendingBadge show={isFieldPending("serverCertificate.enabled")} />
+              </Group>
             </div>
-            <Group gap="xs">
-              <Switch
-                checked={settings.serverCertificate?.enabled ?? true}
-                onChange={(e) => {
-                  if (!loginEnabled) return;
+
+            <div>
+              <TextInput
+                label={
+                  <Group gap="xs">
+                    <span>{t("admin.settings.features.serverCertificate.organizationName.label", "Organization Name")}</span>
+                    <PendingBadge show={isFieldPending("serverCertificate.organizationName")} />
+                  </Group>
+                }
+                description={t(
+                  "admin.settings.features.serverCertificate.organizationName.description",
+                  "Organization name for generated certificates",
+                )}
+                value={settings.serverCertificate?.organizationName || "Stirling-PDF"}
+                onChange={(e) =>
                   setSettings({
                     ...settings,
-                    serverCertificate: { ...settings.serverCertificate, enabled: e.target.checked }
-                  });
-                }}
+                    serverCertificate: { ...settings.serverCertificate, organizationName: e.target.value },
+                  })
+                }
+                placeholder="Stirling-PDF"
                 disabled={!loginEnabled}
-                styles={getDisabledStyles()}
               />
-              <PendingBadge show={isFieldPending('serverCertificate.enabled')} />
-            </Group>
-          </div>
-
-          <div>
-            <TextInput
-              label={
-                <Group gap="xs">
-                  <span>{t('admin.settings.features.serverCertificate.organizationName.label', 'Organization Name')}</span>
-                  <PendingBadge show={isFieldPending('serverCertificate.organizationName')} />
-                </Group>
-              }
-              description={t('admin.settings.features.serverCertificate.organizationName.description', 'Organization name for generated certificates')}
-              value={settings.serverCertificate?.organizationName || 'Stirling-PDF'}
-              onChange={(e) => setSettings({
-                ...settings,
-                serverCertificate: { ...settings.serverCertificate, organizationName: e.target.value }
-              })}
-              placeholder="Stirling-PDF"
-              disabled={!loginEnabled}
-            />
-          </div>
-
-          <div>
-            <NumberInput
-              label={
-                <Group gap="xs">
-                  <span>{t('admin.settings.features.serverCertificate.validity.label', 'Certificate Validity (days)')}</span>
-                  <PendingBadge show={isFieldPending('serverCertificate.validity')} />
-                </Group>
-              }
-              description={t('admin.settings.features.serverCertificate.validity.description', 'Number of days the certificate will be valid')}
-              value={settings.serverCertificate?.validity ?? 365}
-              onChange={(value) => setSettings({
-                ...settings,
-                serverCertificate: { ...settings.serverCertificate, validity: Number(value) }
-              })}
-              min={1}
-              max={3650}
-              disabled={!loginEnabled}
-            />
-          </div>
-
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <div>
-              <Text fw={500} size="sm">{t('admin.settings.features.serverCertificate.regenerateOnStartup.label', 'Regenerate on Startup')}</Text>
-              <Text size="xs" c="dimmed" mt={4}>
-                {t('admin.settings.features.serverCertificate.regenerateOnStartup.description', 'Generate new certificate on each application startup')}
-              </Text>
             </div>
-            <Group gap="xs">
-              <Switch
-                checked={settings.serverCertificate?.regenerateOnStartup ?? false}
-                onChange={(e) => {
-                  if (!loginEnabled) return;
+
+            <div>
+              <NumberInput
+                label={
+                  <Group gap="xs">
+                    <span>{t("admin.settings.features.serverCertificate.validity.label", "Certificate Validity (days)")}</span>
+                    <PendingBadge show={isFieldPending("serverCertificate.validity")} />
+                  </Group>
+                }
+                description={t(
+                  "admin.settings.features.serverCertificate.validity.description",
+                  "Number of days the certificate will be valid",
+                )}
+                value={settings.serverCertificate?.validity ?? 365}
+                onChange={(value) =>
                   setSettings({
                     ...settings,
-                    serverCertificate: { ...settings.serverCertificate, regenerateOnStartup: e.target.checked }
-                  });
-                }}
+                    serverCertificate: { ...settings.serverCertificate, validity: Number(value) },
+                  })
+                }
+                min={1}
+                max={3650}
                 disabled={!loginEnabled}
-                styles={getDisabledStyles()}
               />
-              <PendingBadge show={isFieldPending('serverCertificate.regenerateOnStartup')} />
-            </Group>
-          </div>
-        </Stack>
-      </Paper>
+            </div>
+
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+              <div>
+                <Text fw={500} size="sm">
+                  {t("admin.settings.features.serverCertificate.regenerateOnStartup.label", "Regenerate on Startup")}
+                </Text>
+                <Text size="xs" c="dimmed" mt={4}>
+                  {t(
+                    "admin.settings.features.serverCertificate.regenerateOnStartup.description",
+                    "Generate new certificate on each application startup",
+                  )}
+                </Text>
+              </div>
+              <Group gap="xs">
+                <Switch
+                  checked={settings.serverCertificate?.regenerateOnStartup ?? false}
+                  onChange={(e) => {
+                    if (!loginEnabled) return;
+                    setSettings({
+                      ...settings,
+                      serverCertificate: { ...settings.serverCertificate, regenerateOnStartup: e.target.checked },
+                    });
+                  }}
+                  disabled={!loginEnabled}
+                  styles={getDisabledStyles()}
+                />
+                <PendingBadge show={isFieldPending("serverCertificate.regenerateOnStartup")} />
+              </Group>
+            </div>
+          </Stack>
+        </Paper>
       </Stack>
 
       <SettingsStickyFooter
@@ -245,11 +265,7 @@ export default function AdminFeaturesSection() {
       />
 
       {/* Restart Confirmation Modal */}
-      <RestartConfirmationModal
-        opened={restartModalOpened}
-        onClose={closeRestartModal}
-        onRestart={restartServer}
-      />
+      <RestartConfirmationModal opened={restartModalOpened} onClose={closeRestartModal} onRestart={restartServer} />
     </div>
   );
 }
diff --git a/frontend/src/proprietary/components/shared/config/configSections/AdminGeneralSection.tsx b/frontend/src/proprietary/components/shared/config/configSections/AdminGeneralSection.tsx
index 39d1758dfd..d0474a9e64 100644
--- a/frontend/src/proprietary/components/shared/config/configSections/AdminGeneralSection.tsx
+++ b/frontend/src/proprietary/components/shared/config/configSections/AdminGeneralSection.tsx
@@ -1,27 +1,40 @@
-import { useEffect, useCallback, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useLocation, useNavigate } from 'react-router-dom';
-import { TextInput, Textarea, Switch, Stack, Paper, Text, Loader, Group, MultiSelect, Badge, SegmentedControl, Select } from '@mantine/core';
-import { alert } from '@app/components/toast';
-import RestartConfirmationModal from '@app/components/shared/config/RestartConfirmationModal';
-import { useRestartServer } from '@app/components/shared/config/useRestartServer';
-import { useAdminSettings } from '@app/hooks/useAdminSettings';
-import { useSettingsDirty } from '@app/hooks/useSettingsDirty';
-import PendingBadge from '@app/components/shared/config/PendingBadge';
-import { SettingsStickyFooter } from '@app/components/shared/config/SettingsStickyFooter';
-import apiClient from '@app/services/apiClient';
-import { useLoginRequired } from '@app/hooks/useLoginRequired';
-import LoginRequiredBanner from '@app/components/shared/config/LoginRequiredBanner';
-import { usePreferences } from '@app/contexts/PreferencesContext';
-import { useUnsavedChanges } from '@app/contexts/UnsavedChangesContext';
-import { supportedLanguages, toUnderscoreFormat, toUnderscoreLanguages } from '@app/i18n';
-import { Z_INDEX_CONFIG_MODAL } from '@app/styles/zIndex';
+import { useEffect, useCallback, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { useLocation, useNavigate } from "react-router-dom";
+import {
+  TextInput,
+  Textarea,
+  Switch,
+  Stack,
+  Paper,
+  Text,
+  Loader,
+  Group,
+  MultiSelect,
+  Badge,
+  SegmentedControl,
+  Select,
+} from "@mantine/core";
+import { alert } from "@app/components/toast";
+import RestartConfirmationModal from "@app/components/shared/config/RestartConfirmationModal";
+import { useRestartServer } from "@app/components/shared/config/useRestartServer";
+import { useAdminSettings } from "@app/hooks/useAdminSettings";
+import { useSettingsDirty } from "@app/hooks/useSettingsDirty";
+import PendingBadge from "@app/components/shared/config/PendingBadge";
+import { SettingsStickyFooter } from "@app/components/shared/config/SettingsStickyFooter";
+import apiClient from "@app/services/apiClient";
+import { useLoginRequired } from "@app/hooks/useLoginRequired";
+import LoginRequiredBanner from "@app/components/shared/config/LoginRequiredBanner";
+import { usePreferences } from "@app/contexts/PreferencesContext";
+import { useUnsavedChanges } from "@app/contexts/UnsavedChangesContext";
+import { supportedLanguages, toUnderscoreFormat, toUnderscoreLanguages } from "@app/i18n";
+import { Z_INDEX_CONFIG_MODAL } from "@app/styles/zIndex";
 
 interface GeneralSettingsData {
   ui: {
     appNameNavbar?: string;
     languages?: string[];
-    logoStyle?: 'modern' | 'classic';
+    logoStyle?: "modern" | "classic";
     hideDisabledTools?: {
       googleDrive?: boolean;
       mobileQRScanner?: boolean;
@@ -64,10 +77,11 @@ export default function AdminGeneralSection() {
   const { preferences, updatePreference } = usePreferences();
   const { markClean } = useUnsavedChanges();
   const languageOptions = useMemo(
-    () => Object.entries(supportedLanguages)
-      .map(([code, label]) => ({ value: toUnderscoreFormat(code), label: `${label} (${code})` }))
-      .sort((a, b) => a.label.localeCompare(b.label)),
-    []
+    () =>
+      Object.entries(supportedLanguages)
+        .map(([code, label]) => ({ value: toUnderscoreFormat(code), label: `${label} (${code})` }))
+        .sort((a, b) => a.label.localeCompare(b.label)),
+    [],
   );
   const parseWatchedFoldersInput = useCallback((value: string) => {
     const paths = value
@@ -80,141 +94,132 @@ export default function AdminGeneralSection() {
 
     return uniquePaths;
   }, []);
-  
-  const {
-    settings,
-    setSettings,
-    loading,
-    saving,
-    fetchSettings,
-    saveSettings,
-    isFieldPending,
-  } = useAdminSettings<GeneralSettingsData>({
-    sectionName: 'general',
-    fetchTransformer: async (): Promise<GeneralSettingsData & { _pending?: Record<string, unknown> }> => {
-      const [uiResponse, systemResponse, premiumResponse] = await Promise.all([
-        apiClient.get('/api/v1/admin/settings/section/ui'),
-        apiClient.get('/api/v1/admin/settings/section/system'),
-        apiClient.get('/api/v1/admin/settings/section/premium')
-      ]);
 
-      const ui = { ...(uiResponse.data || {}) };
-      const system = { ...(systemResponse.data || {}) };
-      const premium = { ...(premiumResponse.data || {}) };
+  const { settings, setSettings, loading, saving, fetchSettings, saveSettings, isFieldPending } =
+    useAdminSettings<GeneralSettingsData>({
+      sectionName: "general",
+      fetchTransformer: async (): Promise<GeneralSettingsData & { _pending?: Record<string, unknown> }> => {
+        const [uiResponse, systemResponse, premiumResponse] = await Promise.all([
+          apiClient.get("/api/v1/admin/settings/section/ui"),
+          apiClient.get("/api/v1/admin/settings/section/system"),
+          apiClient.get("/api/v1/admin/settings/section/premium"),
+        ]);
 
-      ui.languages = Array.isArray(ui.languages) ? toUnderscoreLanguages(ui.languages) : [];
+        const ui = { ...(uiResponse.data || {}) };
+        const system = { ...(systemResponse.data || {}) };
+        const premium = { ...(premiumResponse.data || {}) };
 
-      const pipelinePaths = system.customPaths?.pipeline || {};
-      const watchedFoldersDirs = Array.isArray(pipelinePaths.watchedFoldersDirs)
-        ? pipelinePaths.watchedFoldersDirs
-        : [];
-      const normalizedWatchedFoldersDirs =
-        watchedFoldersDirs.length > 0
-          ? watchedFoldersDirs
-          : (pipelinePaths.watchedFoldersDir ? [pipelinePaths.watchedFoldersDir] : []);
+        ui.languages = Array.isArray(ui.languages) ? toUnderscoreLanguages(ui.languages) : [];
 
-      const result: GeneralSettingsData & { _pending?: Record<string, unknown> } = {
-        ui,
-        system,
-        customPaths: {
-          ...(system.customPaths || {}),
-          pipeline: {
-            ...pipelinePaths,
-            pipelineDir: pipelinePaths.pipelineDir || '',
-            watchedFoldersDir: pipelinePaths.watchedFoldersDir || '',
-            watchedFoldersDirs: normalizedWatchedFoldersDirs,
-            finishedFoldersDir: pipelinePaths.finishedFoldersDir || ''
+        const pipelinePaths = system.customPaths?.pipeline || {};
+        const watchedFoldersDirs = Array.isArray(pipelinePaths.watchedFoldersDirs) ? pipelinePaths.watchedFoldersDirs : [];
+        const normalizedWatchedFoldersDirs =
+          watchedFoldersDirs.length > 0
+            ? watchedFoldersDirs
+            : pipelinePaths.watchedFoldersDir
+              ? [pipelinePaths.watchedFoldersDir]
+              : [];
+
+        const result: GeneralSettingsData & { _pending?: Record<string, unknown> } = {
+          ui,
+          system,
+          customPaths: {
+            ...(system.customPaths || {}),
+            pipeline: {
+              ...pipelinePaths,
+              pipelineDir: pipelinePaths.pipelineDir || "",
+              watchedFoldersDir: pipelinePaths.watchedFoldersDir || "",
+              watchedFoldersDirs: normalizedWatchedFoldersDirs,
+              finishedFoldersDir: pipelinePaths.finishedFoldersDir || "",
+            },
+            operations: {
+              ...(system.customPaths?.operations || {}),
+              weasyprint: system.customPaths?.operations?.weasyprint || "",
+              unoconvert: system.customPaths?.operations?.unoconvert || "",
+            },
           },
-          operations: {
-            ...(system.customPaths?.operations || {}),
-            weasyprint: system.customPaths?.operations?.weasyprint || '',
-            unoconvert: system.customPaths?.operations?.unoconvert || ''
-          }
-        },
-        customMetadata: premium.proFeatures?.customMetadata || {
-          autoUpdateMetadata: false,
-          author: '',
-          creator: '',
-          producer: ''
+          customMetadata: premium.proFeatures?.customMetadata || {
+            autoUpdateMetadata: false,
+            author: "",
+            creator: "",
+            producer: "",
+          },
+        };
+
+        // Merge pending blocks from all three endpoints
+        const pendingBlock: Record<string, unknown> = {};
+        if (ui._pending) {
+          pendingBlock.ui = ui._pending;
+        }
+        if (system._pending) {
+          pendingBlock.system = system._pending;
+        }
+        if (system._pending?.customPaths) {
+          pendingBlock.customPaths = system._pending.customPaths;
+        }
+        if (premium._pending?.proFeatures?.customMetadata) {
+          pendingBlock.customMetadata = premium._pending.proFeatures.customMetadata;
         }
-      };
 
-      // Merge pending blocks from all three endpoints
-      const pendingBlock: Record<string, unknown> = {};
-      if (ui._pending) {
-        pendingBlock.ui = ui._pending;
-      }
-      if (system._pending) {
-        pendingBlock.system = system._pending;
-      }
-      if (system._pending?.customPaths) {
-        pendingBlock.customPaths = system._pending.customPaths;
-      }
-      if (premium._pending?.proFeatures?.customMetadata) {
-        pendingBlock.customMetadata = premium._pending.proFeatures.customMetadata;
-      }
+        if (Object.keys(pendingBlock).length > 0) {
+          result._pending = pendingBlock;
+        }
 
-      if (Object.keys(pendingBlock).length > 0) {
-        result._pending = pendingBlock;
-      }
+        return result;
+      },
+      saveTransformer: (settings: GeneralSettingsData) => {
+        const deltaSettings: Record<string, unknown> = {
+          // UI settings
+          "ui.appNameNavbar": settings.ui?.appNameNavbar,
+          "ui.languages": settings.ui?.languages,
+          "ui.logoStyle": settings.ui?.logoStyle,
+          "ui.hideDisabledTools.googleDrive": settings.ui?.hideDisabledTools?.googleDrive,
+          "ui.hideDisabledTools.mobileQRScanner": settings.ui?.hideDisabledTools?.mobileQRScanner,
+          // System settings
+          "system.defaultLocale": settings.system?.defaultLocale,
+          "system.showUpdate": settings.system?.showUpdate,
+          "system.showUpdateOnlyAdmin": settings.system?.showUpdateOnlyAdmin,
+          "system.customHTMLFiles": settings.system?.customHTMLFiles,
+          "system.fileUploadLimit": settings.system?.fileUploadLimit,
+          "system.frontendUrl": settings.system?.frontendUrl,
+          // Premium custom metadata
+          "premium.proFeatures.customMetadata.autoUpdateMetadata": settings.customMetadata?.autoUpdateMetadata,
+          "premium.proFeatures.customMetadata.author": settings.customMetadata?.author,
+          "premium.proFeatures.customMetadata.creator": settings.customMetadata?.creator,
+          "premium.proFeatures.customMetadata.producer": settings.customMetadata?.producer,
+        };
 
-      return result;
-    },
-    saveTransformer: (settings: GeneralSettingsData) => {
-      const deltaSettings: Record<string, unknown> = {
-        // UI settings
-        'ui.appNameNavbar': settings.ui?.appNameNavbar,
-        'ui.languages': settings.ui?.languages,
-        'ui.logoStyle': settings.ui?.logoStyle,
-        'ui.hideDisabledTools.googleDrive': settings.ui?.hideDisabledTools?.googleDrive,
-        'ui.hideDisabledTools.mobileQRScanner': settings.ui?.hideDisabledTools?.mobileQRScanner,
-        // System settings
-        'system.defaultLocale': settings.system?.defaultLocale,
-        'system.showUpdate': settings.system?.showUpdate,
-        'system.showUpdateOnlyAdmin': settings.system?.showUpdateOnlyAdmin,
-        'system.customHTMLFiles': settings.system?.customHTMLFiles,
-        'system.fileUploadLimit': settings.system?.fileUploadLimit,
-        'system.frontendUrl': settings.system?.frontendUrl,
-        // Premium custom metadata
-        'premium.proFeatures.customMetadata.autoUpdateMetadata': settings.customMetadata?.autoUpdateMetadata,
-        'premium.proFeatures.customMetadata.author': settings.customMetadata?.author,
-        'premium.proFeatures.customMetadata.creator': settings.customMetadata?.creator,
-        'premium.proFeatures.customMetadata.producer': settings.customMetadata?.producer
-      };
+        if (settings.customPaths) {
+          deltaSettings["system.customPaths.pipeline.pipelineDir"] = settings.customPaths?.pipeline?.pipelineDir;
+          deltaSettings["system.customPaths.pipeline.watchedFoldersDir"] = settings.customPaths?.pipeline?.watchedFoldersDir;
+          deltaSettings["system.customPaths.pipeline.watchedFoldersDirs"] = settings.customPaths?.pipeline?.watchedFoldersDirs;
+          deltaSettings["system.customPaths.pipeline.finishedFoldersDir"] = settings.customPaths?.pipeline?.finishedFoldersDir;
+          deltaSettings["system.customPaths.operations.weasyprint"] = settings.customPaths?.operations?.weasyprint;
+          deltaSettings["system.customPaths.operations.unoconvert"] = settings.customPaths?.operations?.unoconvert;
+        }
 
-      if (settings.customPaths) {
-        deltaSettings['system.customPaths.pipeline.pipelineDir'] = settings.customPaths?.pipeline?.pipelineDir;
-        deltaSettings['system.customPaths.pipeline.watchedFoldersDir'] = settings.customPaths?.pipeline?.watchedFoldersDir;
-        deltaSettings['system.customPaths.pipeline.watchedFoldersDirs'] = settings.customPaths?.pipeline?.watchedFoldersDirs;
-        deltaSettings['system.customPaths.pipeline.finishedFoldersDir'] = settings.customPaths?.pipeline?.finishedFoldersDir;
-        deltaSettings['system.customPaths.operations.weasyprint'] = settings.customPaths?.operations?.weasyprint;
-        deltaSettings['system.customPaths.operations.unoconvert'] = settings.customPaths?.operations?.unoconvert;
-      }
-
-      return {
-        sectionData: {},
-        deltaSettings
-      };
-    }
-  });
+        return {
+          sectionData: {},
+          deltaSettings,
+        };
+      },
+    });
 
   const { isDirty, resetToSnapshot, markSaved } = useSettingsDirty(settings, loading);
 
-  const selectedLanguages = useMemo(
-    () => toUnderscoreLanguages(settings.ui?.languages || []),
-    [settings.ui?.languages]
+  const selectedLanguages = useMemo(() => toUnderscoreLanguages(settings.ui?.languages || []), [settings.ui?.languages]);
+  const watchedFoldersInput = useMemo(
+    () => (settings.customPaths?.pipeline?.watchedFoldersDirs || []).join("\n"),
+    [settings.customPaths?.pipeline?.watchedFoldersDirs],
   );
-  const watchedFoldersInput = useMemo(() => (
-    (settings.customPaths?.pipeline?.watchedFoldersDirs || []).join('\n')
-  ), [settings.customPaths?.pipeline?.watchedFoldersDirs]);
 
   const watchedFoldersValidation = useMemo(() => {
     const paths = settings.customPaths?.pipeline?.watchedFoldersDirs || [];
-    const finishedPath = settings.customPaths?.pipeline?.finishedFoldersDir || '';
+    const finishedPath = settings.customPaths?.pipeline?.finishedFoldersDir || "";
     const warnings: string[] = [];
 
     // Normalize paths for comparison (handle both Windows and Unix paths)
-    const normalizePath = (p: string) => p.replace(/\\/g, '/').replace(/\/+$/, '');
+    const normalizePath = (p: string) => p.replace(/\\/g, "/").replace(/\/+$/, "");
 
     // Check for overlapping watched folders
     if (paths.length >= 2) {
@@ -225,9 +230,9 @@ export default function AdminGeneralSection() {
 
           if (path1 === path2) {
             warnings.push(`Duplicate path detected: '${paths[i]}'`);
-          } else if (path1.startsWith(path2 + '/')) {
+          } else if (path1.startsWith(path2 + "/")) {
             warnings.push(`'${paths[i]}' is nested inside '${paths[j]}' - may cause duplicate processing`);
-          } else if (path2.startsWith(path1 + '/')) {
+          } else if (path2.startsWith(path1 + "/")) {
             warnings.push(`'${paths[j]}' is nested inside '${paths[i]}' - may cause duplicate processing`);
           }
         }
@@ -241,11 +246,15 @@ export default function AdminGeneralSection() {
         const normalizedWatched = normalizePath(watchedPath);
 
         if (normalizedWatched === normalizedFinished) {
-          warnings.push(`CRITICAL: Watched folder '${watchedPath}' is the same as finished folder - will cause processing loops!`);
-        } else if (normalizedFinished.startsWith(normalizedWatched + '/')) {
+          warnings.push(
+            `CRITICAL: Watched folder '${watchedPath}' is the same as finished folder - will cause processing loops!`,
+          );
+        } else if (normalizedFinished.startsWith(normalizedWatched + "/")) {
           warnings.push(`Finished folder is nested inside watched folder '${watchedPath}' - may cause issues`);
-        } else if (normalizedWatched.startsWith(normalizedFinished + '/')) {
-          warnings.push(`CRITICAL: Watched folder '${watchedPath}' is nested inside finished folder - will cause processing loops!`);
+        } else if (normalizedWatched.startsWith(normalizedFinished + "/")) {
+          warnings.push(
+            `CRITICAL: Watched folder '${watchedPath}' is nested inside finished folder - will cause processing loops!`,
+          );
         }
       }
     }
@@ -260,7 +269,7 @@ export default function AdminGeneralSection() {
       return languageOptions;
     }
     // Otherwise, only show languages that are in the selected list
-    return languageOptions.filter(option => selectedLanguages.includes(option.value));
+    return languageOptions.filter((option) => selectedLanguages.includes(option.value));
   }, [selectedLanguages, languageOptions]);
 
   useEffect(() => {
@@ -275,7 +284,7 @@ export default function AdminGeneralSection() {
     if (loading || !loginEnabled || !settings.ui?.logoStyle) return;
 
     // This ensures localStorage always reflects the server's authoritative value
-    updatePreference('logoVariant', settings.ui.logoStyle);
+    updatePreference("logoVariant", settings.ui.logoStyle);
   }, [loading, loginEnabled, settings.ui?.logoStyle, updatePreference]);
 
   // Handle hash navigation for deep linking to specific fields
@@ -285,7 +294,7 @@ export default function AdminGeneralSection() {
       const element = document.getElementById(elementId);
       if (element) {
         setTimeout(() => {
-          element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+          element.scrollIntoView({ behavior: "smooth", block: "start" });
         }, 100);
       }
     }
@@ -301,17 +310,17 @@ export default function AdminGeneralSection() {
 
   // Show the server setting when loaded (for admin config), otherwise show user's preference
   // Note: User's preference in localStorage is separate and takes precedence in the app via useLogoVariant hook
-  const logoStyleValue = loginEnabled 
-    ? (settings.ui?.logoStyle ?? preferences.logoVariant ?? 'classic')
-    : (preferences.logoVariant ?? 'classic');
+  const logoStyleValue = loginEnabled
+    ? (settings.ui?.logoStyle ?? preferences.logoVariant ?? "classic")
+    : (preferences.logoVariant ?? "classic");
 
   const handleLogoStyleChange = (value: string) => {
-    const nextValue = value === 'modern' ? 'modern' : 'classic';
-    
+    const nextValue = value === "modern" ? "modern" : "classic";
+
     // Only update local settings state - don't update the actual preference until save
     // When login is disabled, update preference immediately since there's no server to save to
     if (!loginEnabled) {
-      updatePreference('logoVariant', nextValue);
+      updatePreference("logoVariant", nextValue);
       return;
     }
 
@@ -320,7 +329,7 @@ export default function AdminGeneralSection() {
       ui: {
         ...settings.ui,
         logoStyle: nextValue,
-      }
+      },
     });
   };
 
@@ -338,16 +347,16 @@ export default function AdminGeneralSection() {
 
       // Update local preference after successful save so the app reflects the saved logo style
       if (settings.ui?.logoStyle) {
-        updatePreference('logoVariant', settings.ui.logoStyle);
+        updatePreference("logoVariant", settings.ui.logoStyle);
       }
 
       markClean();
       showRestartModal();
     } catch (_error) {
       alert({
-        alertType: 'error',
-        title: t('admin.error', 'Error'),
-        body: t('admin.settings.saveError', 'Failed to save settings'),
+        alertType: "error",
+        title: t("admin.error", "Error"),
+        body: t("admin.settings.saveError", "Failed to save settings"),
       });
     }
   };
@@ -365,508 +374,632 @@ export default function AdminGeneralSection() {
       <Stack gap="lg" className="settings-section-content">
         <LoginRequiredBanner show={!loginEnabled} />
 
-      <div>
-        <Text fw={600} size="lg">{t('admin.settings.general.title', 'System Settings')}</Text>
-        <Text size="sm" c="dimmed">
-          {t('admin.settings.general.description', 'Configure system-wide application settings including branding and default behaviour.')}
-        </Text>
-      </div>
+        <div>
+          <Text fw={600} size="lg">
+            {t("admin.settings.general.title", "System Settings")}
+          </Text>
+          <Text size="sm" c="dimmed">
+            {t(
+              "admin.settings.general.description",
+              "Configure system-wide application settings including branding and default behaviour.",
+            )}
+          </Text>
+        </div>
 
-      {/* System Settings */}
-      <Paper withBorder p="md" radius="md">
-        <Stack gap="md">
-          <Text fw={600} size="sm" mb="xs">{t('admin.settings.general.system', 'System')}</Text>
-
-          <div>
-            <TextInput
-              label={
-                <Group gap="xs">
-                  <span>{t('admin.settings.general.appNameNavbar.label', 'Navbar Brand')}</span>
-                  <PendingBadge show={isFieldPending('ui.appNameNavbar')} />
-                </Group>
-              }
-              description={t('admin.settings.general.appNameNavbar.description', 'The name displayed in the navigation bar')}
-              value={settings.ui?.appNameNavbar || ''}
-              onChange={(e) => setSettings({ ...settings, ui: { ...settings.ui, appNameNavbar: e.target.value } })}
-              placeholder="Stirling PDF"
-              disabled={!loginEnabled}
-            />
-          </div>
-
-          <div>
-            <Text size="sm" fw={500} mb={4}>
-              <Group gap="xs">
-                <span>{t('admin.settings.general.logoStyle.label', 'Logo Style')}</span>
-                <PendingBadge show={isFieldPending('ui.logoStyle')} />
-              </Group>
+        {/* System Settings */}
+        <Paper withBorder p="md" radius="md">
+          <Stack gap="md">
+            <Text fw={600} size="sm" mb="xs">
+              {t("admin.settings.general.system", "System")}
             </Text>
-            <Text size="xs" c="dimmed" mb="xs">
-              {t('admin.settings.general.logoStyle.description', 'Choose between the modern minimalist logo or the classic S icon')}
-            </Text>
-            <SegmentedControl
-              value={logoStyleValue}
-              onChange={handleLogoStyleChange}
-              data={[
-                {
-                  value: 'classic',
-                  label: (
-                    <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', padding: '0.25rem 0' }}>
-                      <img
-                        src="classic-logo/favicon.ico"
-                        alt={t('admin.settings.general.logoStyle.classicAlt', 'Classic logo')}
-                        style={{ width: '24px', height: '24px' }}
-                      />
-                      <span>{t('admin.settings.general.logoStyle.classic', 'Classic')}</span>
-                    </div>
-                  )
-                },
-                {
-                  value: 'modern',
-                  label: (
-                    <div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', padding: '0.25rem 0' }}>
-                      <img
-                        src="modern-logo/StirlingPDFLogoNoTextLight.svg"
-                        alt={t('admin.settings.general.logoStyle.modernAlt', 'Modern logo')}
-                        style={{ width: '24px', height: '24px' }}
-                      />
-                      <span>{t('admin.settings.general.logoStyle.modern', 'Modern')}</span>
-                    </div>
-                  )
-                },
-              ]}
-            />
-          </div>
 
-          <div>
-            <MultiSelect
-              label={
+            <div>
+              <TextInput
+                label={
+                  <Group gap="xs">
+                    <span>{t("admin.settings.general.appNameNavbar.label", "Navbar Brand")}</span>
+                    <PendingBadge show={isFieldPending("ui.appNameNavbar")} />
+                  </Group>
+                }
+                description={t("admin.settings.general.appNameNavbar.description", "The name displayed in the navigation bar")}
+                value={settings.ui?.appNameNavbar || ""}
+                onChange={(e) => setSettings({ ...settings, ui: { ...settings.ui, appNameNavbar: e.target.value } })}
+                placeholder="Stirling PDF"
+                disabled={!loginEnabled}
+              />
+            </div>
+
+            <div>
+              <Text size="sm" fw={500} mb={4}>
                 <Group gap="xs">
-                  <span>{t('admin.settings.general.languages.label', 'Available Languages')}</span>
-                  <PendingBadge show={isFieldPending('ui.languages')} />
+                  <span>{t("admin.settings.general.logoStyle.label", "Logo Style")}</span>
+                  <PendingBadge show={isFieldPending("ui.logoStyle")} />
                 </Group>
-              }
-              description={t('admin.settings.general.languages.description', 'Limit which languages are available (empty = all languages)')}
-              value={selectedLanguages}
-              onChange={(value) => setSettings({ ...settings, ui: { ...settings.ui, languages: value } })}
-              data={languageOptions}
-              searchable
-              clearable
-              placeholder={t('admin.settings.general.languages.placeholder', 'Select languages')}
-              comboboxProps={{ zIndex: Z_INDEX_CONFIG_MODAL }}
-              disabled={!loginEnabled}
-            />
-          </div>
+              </Text>
+              <Text size="xs" c="dimmed" mb="xs">
+                {t(
+                  "admin.settings.general.logoStyle.description",
+                  "Choose between the modern minimalist logo or the classic S icon",
+                )}
+              </Text>
+              <SegmentedControl
+                value={logoStyleValue}
+                onChange={handleLogoStyleChange}
+                data={[
+                  {
+                    value: "classic",
+                    label: (
+                      <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", padding: "0.25rem 0" }}>
+                        <img
+                          src="classic-logo/favicon.ico"
+                          alt={t("admin.settings.general.logoStyle.classicAlt", "Classic logo")}
+                          style={{ width: "24px", height: "24px" }}
+                        />
+                        <span>{t("admin.settings.general.logoStyle.classic", "Classic")}</span>
+                      </div>
+                    ),
+                  },
+                  {
+                    value: "modern",
+                    label: (
+                      <div style={{ display: "flex", alignItems: "center", gap: "0.5rem", padding: "0.25rem 0" }}>
+                        <img
+                          src="modern-logo/StirlingPDFLogoNoTextLight.svg"
+                          alt={t("admin.settings.general.logoStyle.modernAlt", "Modern logo")}
+                          style={{ width: "24px", height: "24px" }}
+                        />
+                        <span>{t("admin.settings.general.logoStyle.modern", "Modern")}</span>
+                      </div>
+                    ),
+                  },
+                ]}
+              />
+            </div>
 
-          <div>
-            <Select
-              label={
-                <Group gap="xs">
-                  <span>{t('admin.settings.general.defaultLocale.label', 'Default Locale')}</span>
-                  <PendingBadge show={isFieldPending('system.defaultLocale')} />
-                </Group>
-              }
-              description={t('admin.settings.general.defaultLocale.description', 'The default language for new users (e.g., en_US, es_ES)')}
-              value={settings.system?.defaultLocale || ''}
-              onChange={(value) => setSettings({ ...settings, system: { ...settings.system, defaultLocale: value || '' } })}
-              data={defaultLocaleOptions}
-              searchable
-              clearable
-              placeholder="en_GB"
-              comboboxProps={{ zIndex: Z_INDEX_CONFIG_MODAL }}
-              disabled={!loginEnabled}
-            />
-          </div>
+            <div>
+              <MultiSelect
+                label={
+                  <Group gap="xs">
+                    <span>{t("admin.settings.general.languages.label", "Available Languages")}</span>
+                    <PendingBadge show={isFieldPending("ui.languages")} />
+                  </Group>
+                }
+                description={t(
+                  "admin.settings.general.languages.description",
+                  "Limit which languages are available (empty = all languages)",
+                )}
+                value={selectedLanguages}
+                onChange={(value) => setSettings({ ...settings, ui: { ...settings.ui, languages: value } })}
+                data={languageOptions}
+                searchable
+                clearable
+                placeholder={t("admin.settings.general.languages.placeholder", "Select languages")}
+                comboboxProps={{ zIndex: Z_INDEX_CONFIG_MODAL }}
+                disabled={!loginEnabled}
+              />
+            </div>
 
-          <div>
-            <TextInput
-              label={
-                <Group gap="xs">
-                  <span>{t('admin.settings.general.fileUploadLimit.label', 'File Upload Limit')}</span>
-                  <PendingBadge show={isFieldPending('system.fileUploadLimit')} />
-                </Group>
-              }
-              description={t('admin.settings.general.fileUploadLimit.description', 'Maximum file upload size (e.g., 100MB, 1GB)')}
-              value={ settings.system?.fileUploadLimit || ''}
-              onChange={(e) => setSettings({ ...settings, system: { ...settings.system, fileUploadLimit: e.target.value } })}
-              placeholder="100MB"
-              disabled={!loginEnabled}
-            />
-          </div>
+            <div>
+              <Select
+                label={
+                  <Group gap="xs">
+                    <span>{t("admin.settings.general.defaultLocale.label", "Default Locale")}</span>
+                    <PendingBadge show={isFieldPending("system.defaultLocale")} />
+                  </Group>
+                }
+                description={t(
+                  "admin.settings.general.defaultLocale.description",
+                  "The default language for new users (e.g., en_US, es_ES)",
+                )}
+                value={settings.system?.defaultLocale || ""}
+                onChange={(value) => setSettings({ ...settings, system: { ...settings.system, defaultLocale: value || "" } })}
+                data={defaultLocaleOptions}
+                searchable
+                clearable
+                placeholder="en_GB"
+                comboboxProps={{ zIndex: Z_INDEX_CONFIG_MODAL }}
+                disabled={!loginEnabled}
+              />
+            </div>
 
-          <div id="frontendUrl">
-            <TextInput
-              label={
-                <Group gap="xs">
-                  <span>{t('admin.settings.general.frontendUrl.label', 'Frontend URL')}</span>
-                  <PendingBadge show={isFieldPending('system.frontendUrl')} />
-                </Group>
-              }
-              description={t('admin.settings.general.frontendUrl.description', 'Base URL for frontend (e.g., https://pdf.example.com). Used for email invite links and mobile QR code uploads. Leave empty to use backend URL.')}
-              value={settings.system?.frontendUrl || ''}
-              onChange={(e) => setSettings({ ...settings, system: { ...settings.system, frontendUrl: e.target.value } })}
-              placeholder="https://pdf.example.com"
-              disabled={!loginEnabled}
-            />
-          </div>
+            <div>
+              <TextInput
+                label={
+                  <Group gap="xs">
+                    <span>{t("admin.settings.general.fileUploadLimit.label", "File Upload Limit")}</span>
+                    <PendingBadge show={isFieldPending("system.fileUploadLimit")} />
+                  </Group>
+                }
+                description={t(
+                  "admin.settings.general.fileUploadLimit.description",
+                  "Maximum file upload size (e.g., 100MB, 1GB)",
+                )}
+                value={settings.system?.fileUploadLimit || ""}
+                onChange={(e) => setSettings({ ...settings, system: { ...settings.system, fileUploadLimit: e.target.value } })}
+                placeholder="100MB"
+                disabled={!loginEnabled}
+              />
+            </div>
 
-          {/* Hide Disabled Tools Settings */}
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '1rem' }}>
+            <div id="frontendUrl">
+              <TextInput
+                label={
+                  <Group gap="xs">
+                    <span>{t("admin.settings.general.frontendUrl.label", "Frontend URL")}</span>
+                    <PendingBadge show={isFieldPending("system.frontendUrl")} />
+                  </Group>
+                }
+                description={t(
+                  "admin.settings.general.frontendUrl.description",
+                  "Base URL for frontend (e.g., https://pdf.example.com). Used for email invite links and mobile QR code uploads. Leave empty to use backend URL.",
+                )}
+                value={settings.system?.frontendUrl || ""}
+                onChange={(e) => setSettings({ ...settings, system: { ...settings.system, frontendUrl: e.target.value } })}
+                placeholder="https://pdf.example.com"
+                disabled={!loginEnabled}
+              />
+            </div>
+
+            {/* Hide Disabled Tools Settings */}
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: "1rem" }}>
               <div>
-                <Text fw={500} size="sm">{t('admin.settings.general.hideDisabledTools.googleDrive.label', 'Hide Google Drive')}</Text>
+                <Text fw={500} size="sm">
+                  {t("admin.settings.general.hideDisabledTools.googleDrive.label", "Hide Google Drive")}
+                </Text>
                 <Text size="xs" c="dimmed" mt={4}>
-                  {t('admin.settings.general.hideDisabledTools.googleDrive.description', 'Hide Google Drive button when not enabled')}
+                  {t(
+                    "admin.settings.general.hideDisabledTools.googleDrive.description",
+                    "Hide Google Drive button when not enabled",
+                  )}
                 </Text>
               </div>
               <Group gap="xs">
                 <Switch
                   checked={settings.ui?.hideDisabledTools?.googleDrive || false}
-                  onChange={(e) => setSettings({ ...settings, ui: { ...settings.ui, hideDisabledTools: { ...settings.ui?.hideDisabledTools, googleDrive: e.target.checked } } })}
+                  onChange={(e) =>
+                    setSettings({
+                      ...settings,
+                      ui: {
+                        ...settings.ui,
+                        hideDisabledTools: { ...settings.ui?.hideDisabledTools, googleDrive: e.target.checked },
+                      },
+                    })
+                  }
                   disabled={!loginEnabled}
                 />
-                <PendingBadge show={isFieldPending('ui.hideDisabledTools.googleDrive')} />
+                <PendingBadge show={isFieldPending("ui.hideDisabledTools.googleDrive")} />
               </Group>
             </div>
 
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <div>
-              <Text fw={500} size="sm">{t('admin.settings.general.hideDisabledTools.mobileScanner.label', 'Hide Mobile Scanner')}</Text>
-              <Text size="xs" c="dimmed" mt={4}>
-                {t('admin.settings.general.hideDisabledTools.mobileScanner.description', 'Hide mobile QR scanner button when not enabled')}
-              </Text>
-            </div>
-            <Group gap="xs">
-              <Switch
-                checked={settings.ui?.hideDisabledTools?.mobileQRScanner || false}
-                onChange={(e) => setSettings({ ...settings, ui: { ...settings.ui, hideDisabledTools: { ...settings.ui?.hideDisabledTools, mobileQRScanner: e.target.checked } } })}
-                disabled={!loginEnabled}
-              />
-              <PendingBadge show={isFieldPending('ui.hideDisabledTools.mobileQRScanner')} />
-            </Group>
-          </div>
-
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <div>
-              <Text fw={500} size="sm">{t('admin.settings.general.showUpdate.label', 'Show Update Notifications')}</Text>
-              <Text size="xs" c="dimmed" mt={4}>
-                {t('admin.settings.general.showUpdate.description', 'Display notifications when a new version is available')}
-              </Text>
-            </div>
-            <Group gap="xs">
-              <Switch
-                checked={ settings.system?.showUpdate || false}
-                onChange={(e) => setSettings({ ...settings, system: { ...settings.system, showUpdate: e.target.checked } })}
-                disabled={!loginEnabled}
-              />
-              <PendingBadge show={isFieldPending('system.showUpdate')} />
-            </Group>
-          </div>
-
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <div>
-              <Text fw={500} size="sm">{t('admin.settings.general.showUpdateOnlyAdmin.label', 'Show Updates to Admins Only')}</Text>
-              <Text size="xs" c="dimmed" mt={4}>
-                {t('admin.settings.general.showUpdateOnlyAdmin.description', 'Restrict update notifications to admin users only')}
-              </Text>
-            </div>
-            <Group gap="xs">
-              <Switch
-                checked={ settings.system?.showUpdateOnlyAdmin || false}
-                onChange={(e) => setSettings({ ...settings, system: { ...settings.system, showUpdateOnlyAdmin: e.target.checked } })}
-                disabled={!loginEnabled}
-              />
-              <PendingBadge show={isFieldPending('system.showUpdateOnlyAdmin')} />
-            </Group>
-          </div>
-
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <div>
-              <Text fw={500} size="sm">{t('admin.settings.general.customHTMLFiles.label', 'Custom HTML Files')}</Text>
-              <Text size="xs" c="dimmed" mt={4}>
-                {t('admin.settings.general.customHTMLFiles.description', 'Allow serving custom HTML files from the customFiles directory')}
-              </Text>
-            </div>
-            <Group gap="xs">
-              <Switch
-                checked={settings.system?.customHTMLFiles || false}
-                onChange={(e) => setSettings({ ...settings, system: { ...settings.system, customHTMLFiles: e.target.checked } })}
-                disabled={!loginEnabled}
-              />
-              <PendingBadge show={isFieldPending('system.customHTMLFiles')} />
-            </Group>
-          </div>
-        </Stack>
-      </Paper>
-
-      {/* Custom Metadata - Premium Feature */}
-      <Paper withBorder p="md" radius="md">
-        <Stack gap="md">
-          <Group justify="space-between" align="center">
-            <Text fw={600} size="sm">{t('admin.settings.general.customMetadata.label', 'Custom Metadata')}</Text>
-            <Badge
-              color="grape"
-              size="sm"
-              style={{ cursor: 'pointer' }}
-              onClick={() => navigate('/settings/adminPlan')}
-              title={t('admin.settings.badge.clickToUpgrade', 'Click to view plan details')}
-            >
-              PRO
-            </Badge>
-          </Group>
-
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <div>
-              <Text fw={500} size="sm">{t('admin.settings.general.customMetadata.autoUpdate.label', 'Auto Update Metadata')}</Text>
-              <Text size="xs" c="dimmed" mt={4}>
-                {t('admin.settings.general.customMetadata.autoUpdate.description', 'Automatically update PDF metadata on all processed documents')}
-              </Text>
-            </div>
-            <Group gap="xs">
-              <Switch
-                checked={settings.customMetadata?.autoUpdateMetadata || false}
-                onChange={(e) => setSettings({
-                  ...settings,
-                  customMetadata: {
-                    ...settings.customMetadata,
-                    autoUpdateMetadata: e.target.checked
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+              <div>
+                <Text fw={500} size="sm">
+                  {t("admin.settings.general.hideDisabledTools.mobileScanner.label", "Hide Mobile Scanner")}
+                </Text>
+                <Text size="xs" c="dimmed" mt={4}>
+                  {t(
+                    "admin.settings.general.hideDisabledTools.mobileScanner.description",
+                    "Hide mobile QR scanner button when not enabled",
+                  )}
+                </Text>
+              </div>
+              <Group gap="xs">
+                <Switch
+                  checked={settings.ui?.hideDisabledTools?.mobileQRScanner || false}
+                  onChange={(e) =>
+                    setSettings({
+                      ...settings,
+                      ui: {
+                        ...settings.ui,
+                        hideDisabledTools: { ...settings.ui?.hideDisabledTools, mobileQRScanner: e.target.checked },
+                      },
+                    })
                   }
-                })}
+                  disabled={!loginEnabled}
+                />
+                <PendingBadge show={isFieldPending("ui.hideDisabledTools.mobileQRScanner")} />
+              </Group>
+            </div>
+
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+              <div>
+                <Text fw={500} size="sm">
+                  {t("admin.settings.general.showUpdate.label", "Show Update Notifications")}
+                </Text>
+                <Text size="xs" c="dimmed" mt={4}>
+                  {t("admin.settings.general.showUpdate.description", "Display notifications when a new version is available")}
+                </Text>
+              </div>
+              <Group gap="xs">
+                <Switch
+                  checked={settings.system?.showUpdate || false}
+                  onChange={(e) => setSettings({ ...settings, system: { ...settings.system, showUpdate: e.target.checked } })}
+                  disabled={!loginEnabled}
+                />
+                <PendingBadge show={isFieldPending("system.showUpdate")} />
+              </Group>
+            </div>
+
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+              <div>
+                <Text fw={500} size="sm">
+                  {t("admin.settings.general.showUpdateOnlyAdmin.label", "Show Updates to Admins Only")}
+                </Text>
+                <Text size="xs" c="dimmed" mt={4}>
+                  {t(
+                    "admin.settings.general.showUpdateOnlyAdmin.description",
+                    "Restrict update notifications to admin users only",
+                  )}
+                </Text>
+              </div>
+              <Group gap="xs">
+                <Switch
+                  checked={settings.system?.showUpdateOnlyAdmin || false}
+                  onChange={(e) =>
+                    setSettings({ ...settings, system: { ...settings.system, showUpdateOnlyAdmin: e.target.checked } })
+                  }
+                  disabled={!loginEnabled}
+                />
+                <PendingBadge show={isFieldPending("system.showUpdateOnlyAdmin")} />
+              </Group>
+            </div>
+
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+              <div>
+                <Text fw={500} size="sm">
+                  {t("admin.settings.general.customHTMLFiles.label", "Custom HTML Files")}
+                </Text>
+                <Text size="xs" c="dimmed" mt={4}>
+                  {t(
+                    "admin.settings.general.customHTMLFiles.description",
+                    "Allow serving custom HTML files from the customFiles directory",
+                  )}
+                </Text>
+              </div>
+              <Group gap="xs">
+                <Switch
+                  checked={settings.system?.customHTMLFiles || false}
+                  onChange={(e) =>
+                    setSettings({ ...settings, system: { ...settings.system, customHTMLFiles: e.target.checked } })
+                  }
+                  disabled={!loginEnabled}
+                />
+                <PendingBadge show={isFieldPending("system.customHTMLFiles")} />
+              </Group>
+            </div>
+          </Stack>
+        </Paper>
+
+        {/* Custom Metadata - Premium Feature */}
+        <Paper withBorder p="md" radius="md">
+          <Stack gap="md">
+            <Group justify="space-between" align="center">
+              <Text fw={600} size="sm">
+                {t("admin.settings.general.customMetadata.label", "Custom Metadata")}
+              </Text>
+              <Badge
+                color="grape"
+                size="sm"
+                style={{ cursor: "pointer" }}
+                onClick={() => navigate("/settings/adminPlan")}
+                title={t("admin.settings.badge.clickToUpgrade", "Click to view plan details")}
+              >
+                PRO
+              </Badge>
+            </Group>
+
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+              <div>
+                <Text fw={500} size="sm">
+                  {t("admin.settings.general.customMetadata.autoUpdate.label", "Auto Update Metadata")}
+                </Text>
+                <Text size="xs" c="dimmed" mt={4}>
+                  {t(
+                    "admin.settings.general.customMetadata.autoUpdate.description",
+                    "Automatically update PDF metadata on all processed documents",
+                  )}
+                </Text>
+              </div>
+              <Group gap="xs">
+                <Switch
+                  checked={settings.customMetadata?.autoUpdateMetadata || false}
+                  onChange={(e) =>
+                    setSettings({
+                      ...settings,
+                      customMetadata: {
+                        ...settings.customMetadata,
+                        autoUpdateMetadata: e.target.checked,
+                      },
+                    })
+                  }
+                  disabled={!loginEnabled}
+                />
+                <PendingBadge show={isFieldPending("customMetadata.autoUpdateMetadata")} />
+              </Group>
+            </div>
+
+            <div>
+              <TextInput
+                label={
+                  <Group gap="xs">
+                    <span>{t("admin.settings.general.customMetadata.author.label", "Default Author")}</span>
+                    <PendingBadge show={isFieldPending("customMetadata.author")} />
+                  </Group>
+                }
+                description={t(
+                  "admin.settings.general.customMetadata.author.description",
+                  "Default author for PDF metadata (e.g., username)",
+                )}
+                value={settings.customMetadata?.author || ""}
+                onChange={(e) =>
+                  setSettings({
+                    ...settings,
+                    customMetadata: {
+                      ...settings.customMetadata,
+                      author: e.target.value,
+                    },
+                  })
+                }
+                placeholder="username"
                 disabled={!loginEnabled}
               />
-              <PendingBadge show={isFieldPending('customMetadata.autoUpdateMetadata')} />
-            </Group>
-          </div>
+            </div>
 
-          <div>
-            <TextInput
-              label={
-                <Group gap="xs">
-                  <span>{t('admin.settings.general.customMetadata.author.label', 'Default Author')}</span>
-                  <PendingBadge show={isFieldPending('customMetadata.author')} />
-                </Group>
-              }
-              description={t('admin.settings.general.customMetadata.author.description', 'Default author for PDF metadata (e.g., username)')}
-              value={settings.customMetadata?.author || ''}
-              onChange={(e) => setSettings({
-                ...settings,
-                customMetadata: {
-                  ...settings.customMetadata,
-                  author: e.target.value
+            <div>
+              <TextInput
+                label={
+                  <Group gap="xs">
+                    <span>{t("admin.settings.general.customMetadata.creator.label", "Default Creator")}</span>
+                    <PendingBadge show={isFieldPending("customMetadata.creator")} />
+                  </Group>
                 }
-              })}
-              placeholder="username"
-              disabled={!loginEnabled}
-            />
-          </div>
-
-          <div>
-            <TextInput
-              label={
-                <Group gap="xs">
-                  <span>{t('admin.settings.general.customMetadata.creator.label', 'Default Creator')}</span>
-                  <PendingBadge show={isFieldPending('customMetadata.creator')} />
-                </Group>
-              }
-              description={t('admin.settings.general.customMetadata.creator.description', 'Default creator for PDF metadata')}
-              value={settings.customMetadata?.creator || ''}
-              onChange={(e) => setSettings({
-                ...settings,
-                customMetadata: {
-                  ...settings.customMetadata,
-                  creator: e.target.value
+                description={t(
+                  "admin.settings.general.customMetadata.creator.description",
+                  "Default creator for PDF metadata",
+                )}
+                value={settings.customMetadata?.creator || ""}
+                onChange={(e) =>
+                  setSettings({
+                    ...settings,
+                    customMetadata: {
+                      ...settings.customMetadata,
+                      creator: e.target.value,
+                    },
+                  })
                 }
-              })}
-              placeholder="Stirling-PDF"
-              disabled={!loginEnabled}
-            />
-          </div>
+                placeholder="Stirling-PDF"
+                disabled={!loginEnabled}
+              />
+            </div>
 
-          <div>
-            <TextInput
-              label={
-                <Group gap="xs">
-                  <span>{t('admin.settings.general.customMetadata.producer.label', 'Default Producer')}</span>
-                  <PendingBadge show={isFieldPending('customMetadata.producer')} />
-                </Group>
-              }
-              description={t('admin.settings.general.customMetadata.producer.description', 'Default producer for PDF metadata')}
-              value={settings.customMetadata?.producer || ''}
-              onChange={(e) => setSettings({
-                ...settings,
-                customMetadata: {
-                  ...settings.customMetadata,
-                  producer: e.target.value
+            <div>
+              <TextInput
+                label={
+                  <Group gap="xs">
+                    <span>{t("admin.settings.general.customMetadata.producer.label", "Default Producer")}</span>
+                    <PendingBadge show={isFieldPending("customMetadata.producer")} />
+                  </Group>
                 }
-              })}
-              placeholder="Stirling-PDF"
-              disabled={!loginEnabled}
-            />
-          </div>
-        </Stack>
-      </Paper>
+                description={t(
+                  "admin.settings.general.customMetadata.producer.description",
+                  "Default producer for PDF metadata",
+                )}
+                value={settings.customMetadata?.producer || ""}
+                onChange={(e) =>
+                  setSettings({
+                    ...settings,
+                    customMetadata: {
+                      ...settings.customMetadata,
+                      producer: e.target.value,
+                    },
+                  })
+                }
+                placeholder="Stirling-PDF"
+                disabled={!loginEnabled}
+              />
+            </div>
+          </Stack>
+        </Paper>
 
-      {/* Custom Paths */}
-      <Paper withBorder p="md" radius="md">
-        <Stack gap="md">
-          <div>
-            <Text fw={600} size="sm" mb="xs">{t('admin.settings.general.customPaths.label', 'Custom Paths')}</Text>
-            <Text size="xs" c="dimmed">
-              {t('admin.settings.general.customPaths.description', 'Configure custom file system paths for pipeline processing and external tools')}
+        {/* Custom Paths */}
+        <Paper withBorder p="md" radius="md">
+          <Stack gap="md">
+            <div>
+              <Text fw={600} size="sm" mb="xs">
+                {t("admin.settings.general.customPaths.label", "Custom Paths")}
+              </Text>
+              <Text size="xs" c="dimmed">
+                {t(
+                  "admin.settings.general.customPaths.description",
+                  "Configure custom file system paths for pipeline processing and external tools",
+                )}
+              </Text>
+            </div>
+
+            <Text fw={500} size="sm" mt="xs">
+              {t("admin.settings.general.customPaths.pipeline.label", "Pipeline Directories")}
             </Text>
-          </div>
 
-          <Text fw={500} size="sm" mt="xs">{t('admin.settings.general.customPaths.pipeline.label', 'Pipeline Directories')}</Text>
-
-          <div>
-            <TextInput
-              label={
-                <Group gap="xs">
-                  <span>{t('admin.settings.general.customPaths.pipeline.pipelineDir.label', 'Pipeline Directory')}</span>
-                  <PendingBadge show={isFieldPending('customPaths.pipeline.pipelineDir')} />
-                </Group>
-              }
-              description={t('admin.settings.general.customPaths.pipeline.pipelineDir.description', 'Base directory for pipeline resources (leave empty for default: /pipeline)')}
-              value={settings.customPaths?.pipeline?.pipelineDir || ''}
-              onChange={(e) => setSettings({
-                ...settings,
-                customPaths: {
-                  ...settings.customPaths,
-                  pipeline: {
-                    ...settings.customPaths?.pipeline,
-                    pipelineDir: e.target.value
-                  }
+            <div>
+              <TextInput
+                label={
+                  <Group gap="xs">
+                    <span>{t("admin.settings.general.customPaths.pipeline.pipelineDir.label", "Pipeline Directory")}</span>
+                    <PendingBadge show={isFieldPending("customPaths.pipeline.pipelineDir")} />
+                  </Group>
                 }
-              })}
-              placeholder="/pipeline"
-              disabled={!loginEnabled}
-            />
-          </div>
-
-          <div>
-            <Textarea
-              label={
-                <Group gap="xs">
-                  <span>{t('admin.settings.general.customPaths.pipeline.watchedFoldersDirs.label', 'Watched Folders Directories')}</span>
-                  <PendingBadge show={
-                    isFieldPending('customPaths.pipeline.watchedFoldersDirs')
-                    || isFieldPending('customPaths.pipeline.watchedFoldersDir')
-                  } />
-                </Group>
-              }
-              description={t('admin.settings.general.customPaths.pipeline.watchedFoldersDirs.description', 'Directories where pipeline monitors for incoming PDFs (one per line or comma-separated; leave empty for default: /pipeline/watchedFolders)')}
-              value={watchedFoldersInput}
-              onChange={(e) => {
-                const parsedDirs = parseWatchedFoldersInput(e.target.value);
-                setSettings({
-                  ...settings,
-                  customPaths: {
-                    ...settings.customPaths,
-                    pipeline: {
-                      ...settings.customPaths?.pipeline,
-                      watchedFoldersDir: parsedDirs[0] || '',
-                      watchedFoldersDirs: parsedDirs
-                    }
-                  }
-                });
-              }}
-              placeholder="/pipeline/watchedFolders"
-              minRows={3}
-              autosize
-              disabled={!loginEnabled}
-            />
-            {watchedFoldersValidation && (
-              <Stack gap="xs" mt="xs">
-                {watchedFoldersValidation.map((warning, idx) => (
-                  <Text
-                    key={idx}
-                    size="sm"
-                    c={warning.includes('CRITICAL') ? 'red' : 'yellow'}
-                  >
-                    {warning}
-                  </Text>
-                ))}
-              </Stack>
-            )}
-          </div>
-
-          <div>
-            <TextInput
-              label={
-                <Group gap="xs">
-                  <span>{t('admin.settings.general.customPaths.pipeline.finishedFoldersDir.label', 'Finished Folders Directory')}</span>
-                  <PendingBadge show={isFieldPending('customPaths.pipeline.finishedFoldersDir')} />
-                </Group>
-              }
-              description={t('admin.settings.general.customPaths.pipeline.finishedFoldersDir.description', 'Directory where processed PDFs are outputted (leave empty for default: /pipeline/finishedFolders)')}
-              value={settings.customPaths?.pipeline?.finishedFoldersDir || ''}
-              onChange={(e) => setSettings({
-                ...settings,
-                customPaths: {
-                  ...settings.customPaths,
-                  pipeline: {
-                    ...settings.customPaths?.pipeline,
-                    finishedFoldersDir: e.target.value
-                  }
+                description={t(
+                  "admin.settings.general.customPaths.pipeline.pipelineDir.description",
+                  "Base directory for pipeline resources (leave empty for default: /pipeline)",
+                )}
+                value={settings.customPaths?.pipeline?.pipelineDir || ""}
+                onChange={(e) =>
+                  setSettings({
+                    ...settings,
+                    customPaths: {
+                      ...settings.customPaths,
+                      pipeline: {
+                        ...settings.customPaths?.pipeline,
+                        pipelineDir: e.target.value,
+                      },
+                    },
+                  })
                 }
-              })}
-              placeholder="/pipeline/finishedFolders"
-              disabled={!loginEnabled}
-            />
-          </div>
+                placeholder="/pipeline"
+                disabled={!loginEnabled}
+              />
+            </div>
 
-          <Text fw={500} size="sm" mt="md">{t('admin.settings.general.customPaths.operations.label', 'External Tool Paths')}</Text>
-
-          <div>
-            <TextInput
-              label={
-                <Group gap="xs">
-                  <span>{t('admin.settings.general.customPaths.operations.weasyprint.label', 'WeasyPrint Executable')}</span>
-                  <PendingBadge show={isFieldPending('customPaths.operations.weasyprint')} />
-                </Group>
-              }
-              description={t('admin.settings.general.customPaths.operations.weasyprint.description', 'Path to WeasyPrint executable for HTML to PDF conversion (leave empty for default: /opt/venv/bin/weasyprint)')}
-              value={settings.customPaths?.operations?.weasyprint || ''}
-              onChange={(e) => setSettings({
-                ...settings,
-                customPaths: {
-                  ...settings.customPaths,
-                  operations: {
-                    ...settings.customPaths?.operations,
-                    weasyprint: e.target.value
-                  }
+            <div>
+              <Textarea
+                label={
+                  <Group gap="xs">
+                    <span>
+                      {t(
+                        "admin.settings.general.customPaths.pipeline.watchedFoldersDirs.label",
+                        "Watched Folders Directories",
+                      )}
+                    </span>
+                    <PendingBadge
+                      show={
+                        isFieldPending("customPaths.pipeline.watchedFoldersDirs") ||
+                        isFieldPending("customPaths.pipeline.watchedFoldersDir")
+                      }
+                    />
+                  </Group>
                 }
-              })}
-              placeholder="/opt/venv/bin/weasyprint"
-              disabled={!loginEnabled}
-            />
-          </div>
+                description={t(
+                  "admin.settings.general.customPaths.pipeline.watchedFoldersDirs.description",
+                  "Directories where pipeline monitors for incoming PDFs (one per line or comma-separated; leave empty for default: /pipeline/watchedFolders)",
+                )}
+                value={watchedFoldersInput}
+                onChange={(e) => {
+                  const parsedDirs = parseWatchedFoldersInput(e.target.value);
+                  setSettings({
+                    ...settings,
+                    customPaths: {
+                      ...settings.customPaths,
+                      pipeline: {
+                        ...settings.customPaths?.pipeline,
+                        watchedFoldersDir: parsedDirs[0] || "",
+                        watchedFoldersDirs: parsedDirs,
+                      },
+                    },
+                  });
+                }}
+                placeholder="/pipeline/watchedFolders"
+                minRows={3}
+                autosize
+                disabled={!loginEnabled}
+              />
+              {watchedFoldersValidation && (
+                <Stack gap="xs" mt="xs">
+                  {watchedFoldersValidation.map((warning, idx) => (
+                    <Text key={idx} size="sm" c={warning.includes("CRITICAL") ? "red" : "yellow"}>
+                      {warning}
+                    </Text>
+                  ))}
+                </Stack>
+              )}
+            </div>
 
-          <div>
-            <TextInput
-              label={
-                <Group gap="xs">
-                  <span>{t('admin.settings.general.customPaths.operations.unoconvert.label', 'Unoconvert Executable')}</span>
-                  <PendingBadge show={isFieldPending('customPaths.operations.unoconvert')} />
-                </Group>
-              }
-              description={t('admin.settings.general.customPaths.operations.unoconvert.description', 'Path to LibreOffice unoconvert for document conversions (leave empty for default: /opt/venv/bin/unoconvert)')}
-              value={settings.customPaths?.operations?.unoconvert || ''}
-              onChange={(e) => setSettings({
-                ...settings,
-                customPaths: {
-                  ...settings.customPaths,
-                  operations: {
-                    ...settings.customPaths?.operations,
-                    unoconvert: e.target.value
-                  }
+            <div>
+              <TextInput
+                label={
+                  <Group gap="xs">
+                    <span>
+                      {t("admin.settings.general.customPaths.pipeline.finishedFoldersDir.label", "Finished Folders Directory")}
+                    </span>
+                    <PendingBadge show={isFieldPending("customPaths.pipeline.finishedFoldersDir")} />
+                  </Group>
                 }
-              })}
-              placeholder="/opt/venv/bin/unoconvert"
-              disabled={!loginEnabled}
-            />
-          </div>
-        </Stack>
-      </Paper>
+                description={t(
+                  "admin.settings.general.customPaths.pipeline.finishedFoldersDir.description",
+                  "Directory where processed PDFs are outputted (leave empty for default: /pipeline/finishedFolders)",
+                )}
+                value={settings.customPaths?.pipeline?.finishedFoldersDir || ""}
+                onChange={(e) =>
+                  setSettings({
+                    ...settings,
+                    customPaths: {
+                      ...settings.customPaths,
+                      pipeline: {
+                        ...settings.customPaths?.pipeline,
+                        finishedFoldersDir: e.target.value,
+                      },
+                    },
+                  })
+                }
+                placeholder="/pipeline/finishedFolders"
+                disabled={!loginEnabled}
+              />
+            </div>
 
+            <Text fw={500} size="sm" mt="md">
+              {t("admin.settings.general.customPaths.operations.label", "External Tool Paths")}
+            </Text>
+
+            <div>
+              <TextInput
+                label={
+                  <Group gap="xs">
+                    <span>{t("admin.settings.general.customPaths.operations.weasyprint.label", "WeasyPrint Executable")}</span>
+                    <PendingBadge show={isFieldPending("customPaths.operations.weasyprint")} />
+                  </Group>
+                }
+                description={t(
+                  "admin.settings.general.customPaths.operations.weasyprint.description",
+                  "Path to WeasyPrint executable for HTML to PDF conversion (leave empty for default: /opt/venv/bin/weasyprint)",
+                )}
+                value={settings.customPaths?.operations?.weasyprint || ""}
+                onChange={(e) =>
+                  setSettings({
+                    ...settings,
+                    customPaths: {
+                      ...settings.customPaths,
+                      operations: {
+                        ...settings.customPaths?.operations,
+                        weasyprint: e.target.value,
+                      },
+                    },
+                  })
+                }
+                placeholder="/opt/venv/bin/weasyprint"
+                disabled={!loginEnabled}
+              />
+            </div>
+
+            <div>
+              <TextInput
+                label={
+                  <Group gap="xs">
+                    <span>{t("admin.settings.general.customPaths.operations.unoconvert.label", "Unoconvert Executable")}</span>
+                    <PendingBadge show={isFieldPending("customPaths.operations.unoconvert")} />
+                  </Group>
+                }
+                description={t(
+                  "admin.settings.general.customPaths.operations.unoconvert.description",
+                  "Path to LibreOffice unoconvert for document conversions (leave empty for default: /opt/venv/bin/unoconvert)",
+                )}
+                value={settings.customPaths?.operations?.unoconvert || ""}
+                onChange={(e) =>
+                  setSettings({
+                    ...settings,
+                    customPaths: {
+                      ...settings.customPaths,
+                      operations: {
+                        ...settings.customPaths?.operations,
+                        unoconvert: e.target.value,
+                      },
+                    },
+                  })
+                }
+                placeholder="/opt/venv/bin/unoconvert"
+                disabled={!loginEnabled}
+              />
+            </div>
+          </Stack>
+        </Paper>
       </Stack>
 
       <SettingsStickyFooter
@@ -878,11 +1011,7 @@ export default function AdminGeneralSection() {
       />
 
       {/* Restart Confirmation Modal */}
-      <RestartConfirmationModal
-        opened={restartModalOpened}
-        onClose={closeRestartModal}
-        onRestart={restartServer}
-      />
+      <RestartConfirmationModal opened={restartModalOpened} onClose={closeRestartModal} onRestart={restartServer} />
     </div>
   );
 }
diff --git a/frontend/src/proprietary/components/shared/config/configSections/AdminLegalSection.tsx b/frontend/src/proprietary/components/shared/config/configSections/AdminLegalSection.tsx
index 551118f7c1..95a0b736d3 100644
--- a/frontend/src/proprietary/components/shared/config/configSections/AdminLegalSection.tsx
+++ b/frontend/src/proprietary/components/shared/config/configSections/AdminLegalSection.tsx
@@ -1,16 +1,16 @@
-import { useCallback, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { TextInput, Stack, Paper, Text, Loader, Group, Alert } from '@mantine/core';
-import WarningIcon from '@mui/icons-material/Warning';
-import { alert } from '@app/components/toast';
-import RestartConfirmationModal from '@app/components/shared/config/RestartConfirmationModal';
-import { useRestartServer } from '@app/components/shared/config/useRestartServer';
-import { useAdminSettings } from '@app/hooks/useAdminSettings';
-import { useSettingsDirty } from '@app/hooks/useSettingsDirty';
-import PendingBadge from '@app/components/shared/config/PendingBadge';
-import { SettingsStickyFooter } from '@app/components/shared/config/SettingsStickyFooter';
-import { useLoginRequired } from '@app/hooks/useLoginRequired';
-import LoginRequiredBanner from '@app/components/shared/config/LoginRequiredBanner';
+import { useCallback, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { TextInput, Stack, Paper, Text, Loader, Group, Alert } from "@mantine/core";
+import WarningIcon from "@mui/icons-material/Warning";
+import { alert } from "@app/components/toast";
+import RestartConfirmationModal from "@app/components/shared/config/RestartConfirmationModal";
+import { useRestartServer } from "@app/components/shared/config/useRestartServer";
+import { useAdminSettings } from "@app/hooks/useAdminSettings";
+import { useSettingsDirty } from "@app/hooks/useSettingsDirty";
+import PendingBadge from "@app/components/shared/config/PendingBadge";
+import { SettingsStickyFooter } from "@app/components/shared/config/SettingsStickyFooter";
+import { useLoginRequired } from "@app/hooks/useLoginRequired";
+import LoginRequiredBanner from "@app/components/shared/config/LoginRequiredBanner";
 
 interface LegalSettingsData {
   termsAndConditions?: string;
@@ -25,17 +25,10 @@ export default function AdminLegalSection() {
   const { loginEnabled, validateLoginEnabled } = useLoginRequired();
   const { restartModalOpened, showRestartModal, closeRestartModal, restartServer } = useRestartServer();
 
-  const {
-    settings,
-    setSettings,
-    loading,
-    saving,
-    fetchSettings,
-    saveSettings,
-    isFieldPending,
-  } = useAdminSettings<LegalSettingsData>({
-    sectionName: 'legal',
-  });
+  const { settings, setSettings, loading, saving, fetchSettings, saveSettings, isFieldPending } =
+    useAdminSettings<LegalSettingsData>({
+      sectionName: "legal",
+    });
 
   useEffect(() => {
     if (loginEnabled) {
@@ -43,7 +36,6 @@ export default function AdminLegalSection() {
     }
   }, [loginEnabled]);
 
-
   const { isDirty, resetToSnapshot, markSaved } = useSettingsDirty(settings, loading);
   const handleSave = async () => {
     if (!validateLoginEnabled()) {
@@ -55,9 +47,9 @@ export default function AdminLegalSection() {
       showRestartModal();
     } catch (_error) {
       alert({
-        alertType: 'error',
-        title: t('admin.error', 'Error'),
-        body: t('admin.settings.saveError', 'Failed to save settings'),
+        alertType: "error",
+        title: t("admin.error", "Error"),
+        body: t("admin.settings.saveError", "Failed to save settings"),
       });
     }
   };
@@ -80,112 +72,123 @@ export default function AdminLegalSection() {
   return (
     <div className="settings-section-container">
       <Stack gap="lg" className="settings-section-content">
-      <LoginRequiredBanner show={!loginEnabled} />
-      <div>
-        <Text fw={600} size="lg">{t('admin.settings.legal.title', 'Legal Documents')}</Text>
-        <Text size="sm" c="dimmed">
-          {t('admin.settings.legal.description', 'Configure links to legal documents and policies.')}
-        </Text>
-      </div>
+        <LoginRequiredBanner show={!loginEnabled} />
+        <div>
+          <Text fw={600} size="lg">
+            {t("admin.settings.legal.title", "Legal Documents")}
+          </Text>
+          <Text size="sm" c="dimmed">
+            {t("admin.settings.legal.description", "Configure links to legal documents and policies.")}
+          </Text>
+        </div>
 
-      {/* Legal Disclaimer */}
-      <Alert
-        icon={<WarningIcon style={{ fontSize: 18 }} />}
-        title={t('admin.settings.legal.disclaimer.title', 'Legal Responsibility Warning')}
-        color="yellow"
-        variant="light"
-      >
-        <Text size="sm">
-          {t(
-            'admin.settings.legal.disclaimer.message',
-            'By customizing these legal documents, you assume full responsibility for ensuring compliance with all applicable laws and regulations, including but not limited to GDPR and other EU data protection requirements. Only modify these settings if: (1) you are operating a personal/private instance, (2) you are outside EU jurisdiction and understand your local legal obligations, or (3) you have obtained proper legal counsel and accept sole responsibility for all user data and legal compliance. Stirling-PDF and its developers assume no liability for your legal obligations.'
-          )}
-        </Text>
-      </Alert>
+        {/* Legal Disclaimer */}
+        <Alert
+          icon={<WarningIcon style={{ fontSize: 18 }} />}
+          title={t("admin.settings.legal.disclaimer.title", "Legal Responsibility Warning")}
+          color="yellow"
+          variant="light"
+        >
+          <Text size="sm">
+            {t(
+              "admin.settings.legal.disclaimer.message",
+              "By customizing these legal documents, you assume full responsibility for ensuring compliance with all applicable laws and regulations, including but not limited to GDPR and other EU data protection requirements. Only modify these settings if: (1) you are operating a personal/private instance, (2) you are outside EU jurisdiction and understand your local legal obligations, or (3) you have obtained proper legal counsel and accept sole responsibility for all user data and legal compliance. Stirling-PDF and its developers assume no liability for your legal obligations.",
+            )}
+          </Text>
+        </Alert>
 
-      <Paper withBorder p="md" radius="md">
-        <Stack gap="md">
-          <div>
-            <TextInput
-              label={
-                <Group gap="xs">
-                  <span>{t('admin.settings.legal.termsAndConditions.label', 'Terms and Conditions')}</span>
-                  <PendingBadge show={isFieldPending('termsAndConditions')} />
-                </Group>
-              }
-              description={t('admin.settings.legal.termsAndConditions.description', 'URL or filename to terms and conditions')}
-              value={settings.termsAndConditions || ''}
-              onChange={(e) => setSettings({ ...settings, termsAndConditions: e.target.value })}
-              placeholder="https://example.com/terms"
-              disabled={!loginEnabled}
-            />
-          </div>
+        <Paper withBorder p="md" radius="md">
+          <Stack gap="md">
+            <div>
+              <TextInput
+                label={
+                  <Group gap="xs">
+                    <span>{t("admin.settings.legal.termsAndConditions.label", "Terms and Conditions")}</span>
+                    <PendingBadge show={isFieldPending("termsAndConditions")} />
+                  </Group>
+                }
+                description={t(
+                  "admin.settings.legal.termsAndConditions.description",
+                  "URL or filename to terms and conditions",
+                )}
+                value={settings.termsAndConditions || ""}
+                onChange={(e) => setSettings({ ...settings, termsAndConditions: e.target.value })}
+                placeholder="https://example.com/terms"
+                disabled={!loginEnabled}
+              />
+            </div>
 
-          <div>
-            <TextInput
-              label={
-                <Group gap="xs">
-                  <span>{t('admin.settings.legal.privacyPolicy.label', 'Privacy Policy')}</span>
-                  <PendingBadge show={isFieldPending('privacyPolicy')} />
-                </Group>
-              }
-              description={t('admin.settings.legal.privacyPolicy.description', 'URL or filename to privacy policy')}
-              value={settings.privacyPolicy || ''}
-              onChange={(e) => setSettings({ ...settings, privacyPolicy: e.target.value })}
-              placeholder="https://example.com/privacy"
-              disabled={!loginEnabled}
-            />
-          </div>
+            <div>
+              <TextInput
+                label={
+                  <Group gap="xs">
+                    <span>{t("admin.settings.legal.privacyPolicy.label", "Privacy Policy")}</span>
+                    <PendingBadge show={isFieldPending("privacyPolicy")} />
+                  </Group>
+                }
+                description={t("admin.settings.legal.privacyPolicy.description", "URL or filename to privacy policy")}
+                value={settings.privacyPolicy || ""}
+                onChange={(e) => setSettings({ ...settings, privacyPolicy: e.target.value })}
+                placeholder="https://example.com/privacy"
+                disabled={!loginEnabled}
+              />
+            </div>
 
-          <div>
-            <TextInput
-              label={
-                <Group gap="xs">
-                  <span>{t('admin.settings.legal.accessibilityStatement.label', 'Accessibility Statement')}</span>
-                  <PendingBadge show={isFieldPending('accessibilityStatement')} />
-                </Group>
-              }
-              description={t('admin.settings.legal.accessibilityStatement.description', 'URL or filename to accessibility statement')}
-              value={settings.accessibilityStatement || ''}
-              onChange={(e) => setSettings({ ...settings, accessibilityStatement: e.target.value })}
-              placeholder="https://example.com/accessibility"
-              disabled={!loginEnabled}
-            />
-          </div>
+            <div>
+              <TextInput
+                label={
+                  <Group gap="xs">
+                    <span>{t("admin.settings.legal.accessibilityStatement.label", "Accessibility Statement")}</span>
+                    <PendingBadge show={isFieldPending("accessibilityStatement")} />
+                  </Group>
+                }
+                description={t(
+                  "admin.settings.legal.accessibilityStatement.description",
+                  "URL or filename to accessibility statement",
+                )}
+                value={settings.accessibilityStatement || ""}
+                onChange={(e) => setSettings({ ...settings, accessibilityStatement: e.target.value })}
+                placeholder="https://example.com/accessibility"
+                disabled={!loginEnabled}
+              />
+            </div>
 
-          <div>
-            <TextInput
-              label={
-                <Group gap="xs">
-                  <span>{t('admin.settings.legal.cookiePolicy.label', 'Cookie Policy')}</span>
-                  <PendingBadge show={isFieldPending('cookiePolicy')} />
-                </Group>
-              }
-              description={t('admin.settings.legal.cookiePolicy.description', 'URL or filename to cookie policy')}
-              value={settings.cookiePolicy || ''}
-              onChange={(e) => setSettings({ ...settings, cookiePolicy: e.target.value })}
-              placeholder="https://example.com/cookies"
-              disabled={!loginEnabled}
-            />
-          </div>
+            <div>
+              <TextInput
+                label={
+                  <Group gap="xs">
+                    <span>{t("admin.settings.legal.cookiePolicy.label", "Cookie Policy")}</span>
+                    <PendingBadge show={isFieldPending("cookiePolicy")} />
+                  </Group>
+                }
+                description={t("admin.settings.legal.cookiePolicy.description", "URL or filename to cookie policy")}
+                value={settings.cookiePolicy || ""}
+                onChange={(e) => setSettings({ ...settings, cookiePolicy: e.target.value })}
+                placeholder="https://example.com/cookies"
+                disabled={!loginEnabled}
+              />
+            </div>
 
-          <div>
-            <TextInput
-              label={
-                <Group gap="xs">
-                  <span>{t('admin.settings.legal.impressum.label', 'Impressum')}</span>
-                  <PendingBadge show={isFieldPending('impressum')} />
-                </Group>
-              }
-              description={t('admin.settings.legal.impressum.description', 'URL or filename to impressum (required in some jurisdictions)')}
-              value={settings.impressum || ''}
-              onChange={(e) => setSettings({ ...settings, impressum: e.target.value })}
-              placeholder="https://example.com/impressum"
-              disabled={!loginEnabled}
-            />
-          </div>
-        </Stack>
-      </Paper>
+            <div>
+              <TextInput
+                label={
+                  <Group gap="xs">
+                    <span>{t("admin.settings.legal.impressum.label", "Impressum")}</span>
+                    <PendingBadge show={isFieldPending("impressum")} />
+                  </Group>
+                }
+                description={t(
+                  "admin.settings.legal.impressum.description",
+                  "URL or filename to impressum (required in some jurisdictions)",
+                )}
+                value={settings.impressum || ""}
+                onChange={(e) => setSettings({ ...settings, impressum: e.target.value })}
+                placeholder="https://example.com/impressum"
+                disabled={!loginEnabled}
+              />
+            </div>
+          </Stack>
+        </Paper>
       </Stack>
 
       <SettingsStickyFooter
@@ -197,11 +200,7 @@ export default function AdminLegalSection() {
       />
 
       {/* Restart Confirmation Modal */}
-      <RestartConfirmationModal
-        opened={restartModalOpened}
-        onClose={closeRestartModal}
-        onRestart={restartServer}
-      />
+      <RestartConfirmationModal opened={restartModalOpened} onClose={closeRestartModal} onRestart={restartServer} />
     </div>
   );
 }
diff --git a/frontend/src/proprietary/components/shared/config/configSections/AdminMailSection.tsx b/frontend/src/proprietary/components/shared/config/configSections/AdminMailSection.tsx
index bf19cbc987..684133d5b5 100644
--- a/frontend/src/proprietary/components/shared/config/configSections/AdminMailSection.tsx
+++ b/frontend/src/proprietary/components/shared/config/configSections/AdminMailSection.tsx
@@ -1,17 +1,17 @@
-import { useCallback, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
-import { TextInput, NumberInput, Switch, Stack, Paper, Text, Loader, Group, Anchor } from '@mantine/core';
-import { alert } from '@app/components/toast';
-import RestartConfirmationModal from '@app/components/shared/config/RestartConfirmationModal';
-import { useRestartServer } from '@app/components/shared/config/useRestartServer';
-import { useAdminSettings } from '@app/hooks/useAdminSettings';
-import { useSettingsDirty } from '@app/hooks/useSettingsDirty';
-import PendingBadge from '@app/components/shared/config/PendingBadge';
-import { SettingsStickyFooter } from '@app/components/shared/config/SettingsStickyFooter';
-import EditableSecretField from '@app/components/shared/EditableSecretField';
-import apiClient from '@app/services/apiClient';
-import { useLoginRequired } from '@app/hooks/useLoginRequired';
+import { useCallback, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import { TextInput, NumberInput, Switch, Stack, Paper, Text, Loader, Group, Anchor } from "@mantine/core";
+import { alert } from "@app/components/toast";
+import RestartConfirmationModal from "@app/components/shared/config/RestartConfirmationModal";
+import { useRestartServer } from "@app/components/shared/config/useRestartServer";
+import { useAdminSettings } from "@app/hooks/useAdminSettings";
+import { useSettingsDirty } from "@app/hooks/useSettingsDirty";
+import PendingBadge from "@app/components/shared/config/PendingBadge";
+import { SettingsStickyFooter } from "@app/components/shared/config/SettingsStickyFooter";
+import EditableSecretField from "@app/components/shared/EditableSecretField";
+import apiClient from "@app/services/apiClient";
+import { useLoginRequired } from "@app/hooks/useLoginRequired";
 
 interface MailSettingsData {
   enabled?: boolean;
@@ -36,27 +36,20 @@ export default function AdminMailSection() {
   const { loginEnabled } = useLoginRequired();
   const { restartModalOpened, showRestartModal, closeRestartModal, restartServer } = useRestartServer();
 
-  const {
-    settings,
-    setSettings,
-    loading,
-    saving,
-    fetchSettings,
-    saveSettings,
-    isFieldPending,
-  } = useAdminSettings<MailSettingsData>({
-    sectionName: 'mail',
-    fetchTransformer: async (): Promise<MailSettingsData & { _pending?: Partial<MailSettingsData> }> => {
-      const mailResponse = await apiClient.get<MailApiResponse>('/api/v1/admin/settings/section/mail');
-      return mailResponse.data || {};
-    },
-    saveTransformer: (settings: MailSettingsData) => {
-      return {
-        sectionData: settings,
-        deltaSettings: {}
-      };
-    }
-  });
+  const { settings, setSettings, loading, saving, fetchSettings, saveSettings, isFieldPending } =
+    useAdminSettings<MailSettingsData>({
+      sectionName: "mail",
+      fetchTransformer: async (): Promise<MailSettingsData & { _pending?: Partial<MailSettingsData> }> => {
+        const mailResponse = await apiClient.get<MailApiResponse>("/api/v1/admin/settings/section/mail");
+        return mailResponse.data || {};
+      },
+      saveTransformer: (settings: MailSettingsData) => {
+        return {
+          sectionData: settings,
+          deltaSettings: {},
+        };
+      },
+    });
 
   useEffect(() => {
     fetchSettings();
@@ -71,9 +64,9 @@ export default function AdminMailSection() {
       showRestartModal();
     } catch (_error) {
       alert({
-        alertType: 'error',
-        title: t('admin.error', 'Error'),
-        body: t('admin.settings.saveError', 'Failed to save settings'),
+        alertType: "error",
+        title: t("admin.error", "Error"),
+        body: t("admin.settings.saveError", "Failed to save settings"),
       });
     }
   };
@@ -95,127 +88,149 @@ export default function AdminMailSection() {
     <div className="settings-section-container">
       <Stack gap="lg" className="settings-section-content">
         <div>
-        <Text fw={600} size="lg">{t('admin.settings.mail.title', 'Mail Configuration')}</Text>
-        <Text size="sm" c="dimmed">
-          {t('admin.settings.mail.description', 'Configure SMTP settings for email notifications.')}
-        </Text>
-      </div>
+          <Text fw={600} size="lg">
+            {t("admin.settings.mail.title", "Mail Configuration")}
+          </Text>
+          <Text size="sm" c="dimmed">
+            {t("admin.settings.mail.description", "Configure SMTP settings for email notifications.")}
+          </Text>
+        </div>
+
+        <Paper withBorder p="md" radius="md">
+          <Stack gap="md">
+            <Group justify="space-between" align="flex-start" wrap="nowrap">
+              <div>
+                <Text fw={500} size="sm">
+                  {t("admin.settings.mail.enabled.label", "Enable Mail")}
+                </Text>
+                <Text size="xs" c="dimmed" mt={4}>
+                  {t("admin.settings.mail.enabled.description", "Enable email notifications and SMTP functionality")}
+                </Text>
+              </div>
+              <Group gap="xs">
+                <Switch
+                  checked={settings.enabled || false}
+                  onChange={(e) => setSettings({ ...settings, enabled: e.target.checked })}
+                />
+                <PendingBadge show={isFieldPending("enabled")} />
+              </Group>
+            </Group>
+
+            <Group justify="space-between" align="flex-start" wrap="nowrap">
+              <div>
+                <Text fw={500} size="sm">
+                  {t("admin.settings.mail.enableInvites.label", "Enable Email Invites")}
+                </Text>
+                <Text size="xs" c="dimmed" mt={4}>
+                  {t(
+                    "admin.settings.mail.enableInvites.description",
+                    "Allow admins to invite users via email with auto-generated passwords",
+                  )}
+                </Text>
+                <Text size="xs" c="orange" mt={8} fw={500}>
+                  {t("admin.settings.mail.frontendUrlNote.note", "Note: Requires Frontend URL to be configured. ")}
+                  <Anchor
+                    href="#"
+                    onClick={(e) => {
+                      e.preventDefault();
+                      navigate("/settings/adminGeneral#frontendUrl");
+                    }}
+                    c="orange"
+                    td="underline"
+                  >
+                    {t("admin.settings.mail.frontendUrlNote.link", "Configure in System Settings")}
+                  </Anchor>
+                </Text>
+              </div>
+              <Group gap="xs">
+                <Switch
+                  checked={settings.enableInvites || false}
+                  onChange={(e) => setSettings({ ...settings, enableInvites: e.target.checked })}
+                  disabled={!settings.enabled}
+                />
+                <PendingBadge show={isFieldPending("enableInvites")} />
+              </Group>
+            </Group>
 
-      <Paper withBorder p="md" radius="md">
-        <Stack gap="md">
-          <Group justify="space-between" align="flex-start" wrap="nowrap">
             <div>
-              <Text fw={500} size="sm">{t('admin.settings.mail.enabled.label', 'Enable Mail')}</Text>
-              <Text size="xs" c="dimmed" mt={4}>
-                {t('admin.settings.mail.enabled.description', 'Enable email notifications and SMTP functionality')}
-              </Text>
-            </div>
-            <Group gap="xs">
-              <Switch
-                checked={settings.enabled || false}
-                onChange={(e) => setSettings({ ...settings, enabled: e.target.checked })}
+              <TextInput
+                label={
+                  <Group gap="xs">
+                    <span>{t("admin.settings.mail.host.label", "SMTP Host")}</span>
+                    <PendingBadge show={isFieldPending("host")} />
+                  </Group>
+                }
+                description={t("admin.settings.mail.host.description", "SMTP server hostname")}
+                value={settings.host || ""}
+                onChange={(e) => setSettings({ ...settings, host: e.target.value })}
+                placeholder="smtp.example.com"
               />
-              <PendingBadge show={isFieldPending('enabled')} />
-            </Group>
-          </Group>
+            </div>
 
-          <Group justify="space-between" align="flex-start" wrap="nowrap">
             <div>
-              <Text fw={500} size="sm">{t('admin.settings.mail.enableInvites.label', 'Enable Email Invites')}</Text>
-              <Text size="xs" c="dimmed" mt={4}>
-                {t('admin.settings.mail.enableInvites.description', 'Allow admins to invite users via email with auto-generated passwords')}
-              </Text>
-              <Text size="xs" c="orange" mt={8} fw={500}>
-                {t('admin.settings.mail.frontendUrlNote.note', 'Note: Requires Frontend URL to be configured. ')}
-                <Anchor href="#" onClick={(e) => { e.preventDefault(); navigate('/settings/adminGeneral#frontendUrl'); }} c="orange" td="underline">
-                  {t('admin.settings.mail.frontendUrlNote.link', 'Configure in System Settings')}
-                </Anchor>
-              </Text>
-            </div>
-            <Group gap="xs">
-              <Switch
-                checked={settings.enableInvites || false}
-                onChange={(e) => setSettings({ ...settings, enableInvites: e.target.checked })}
-                disabled={!settings.enabled}
+              <NumberInput
+                label={
+                  <Group gap="xs">
+                    <span>{t("admin.settings.mail.port.label", "SMTP Port")}</span>
+                    <PendingBadge show={isFieldPending("port")} />
+                  </Group>
+                }
+                description={t(
+                  "admin.settings.mail.port.description",
+                  "SMTP server port (typically 587 for TLS, 465 for SSL)",
+                )}
+                value={settings.port || 587}
+                onChange={(value) => setSettings({ ...settings, port: Number(value) })}
+                min={1}
+                max={65535}
               />
-              <PendingBadge show={isFieldPending('enableInvites')} />
-            </Group>
-          </Group>
+            </div>
 
-          <div>
-            <TextInput
-              label={
-                <Group gap="xs">
-                  <span>{t('admin.settings.mail.host.label', 'SMTP Host')}</span>
-                  <PendingBadge show={isFieldPending('host')} />
-                </Group>
-              }
-              description={t('admin.settings.mail.host.description', 'SMTP server hostname')}
-              value={settings.host || ''}
-              onChange={(e) => setSettings({ ...settings, host: e.target.value })}
-              placeholder="smtp.example.com"
-            />
-          </div>
+            <div>
+              <TextInput
+                label={
+                  <Group gap="xs">
+                    <span>{t("admin.settings.mail.username.label", "SMTP Username")}</span>
+                    <PendingBadge show={isFieldPending("username")} />
+                  </Group>
+                }
+                description={t("admin.settings.mail.username.description", "SMTP authentication username")}
+                value={settings.username || ""}
+                onChange={(e) => setSettings({ ...settings, username: e.target.value })}
+              />
+            </div>
 
-          <div>
-            <NumberInput
-              label={
-                <Group gap="xs">
-                  <span>{t('admin.settings.mail.port.label', 'SMTP Port')}</span>
-                  <PendingBadge show={isFieldPending('port')} />
-                </Group>
-              }
-              description={t('admin.settings.mail.port.description', 'SMTP server port (typically 587 for TLS, 465 for SSL)')}
-              value={settings.port || 587}
-              onChange={(value) => setSettings({ ...settings, port: Number(value) })}
-              min={1}
-              max={65535}
-            />
-          </div>
+            <div>
+              <Group gap="xs" align="center" mb={4}>
+                <span style={{ fontWeight: 500, fontSize: "0.875rem" }}>
+                  {t("admin.settings.mail.password.label", "SMTP Password")}
+                </span>
+                <PendingBadge show={isFieldPending("password")} />
+              </Group>
+              <EditableSecretField
+                description={t("admin.settings.mail.password.description", "SMTP authentication password")}
+                value={settings.password || ""}
+                onChange={(value) => setSettings({ ...settings, password: value })}
+                placeholder="Enter SMTP password"
+              />
+            </div>
 
-          <div>
-            <TextInput
-              label={
-                <Group gap="xs">
-                  <span>{t('admin.settings.mail.username.label', 'SMTP Username')}</span>
-                  <PendingBadge show={isFieldPending('username')} />
-                </Group>
-              }
-              description={t('admin.settings.mail.username.description', 'SMTP authentication username')}
-              value={settings.username || ''}
-              onChange={(e) => setSettings({ ...settings, username: e.target.value })}
-            />
-          </div>
-
-          <div>
-            <Group gap="xs" align="center" mb={4}>
-              <span style={{ fontWeight: 500, fontSize: '0.875rem' }}>{t('admin.settings.mail.password.label', 'SMTP Password')}</span>
-              <PendingBadge show={isFieldPending('password')} />
-            </Group>
-            <EditableSecretField
-              description={t('admin.settings.mail.password.description', 'SMTP authentication password')}
-              value={settings.password || ''}
-              onChange={(value) => setSettings({ ...settings, password: value })}
-              placeholder="Enter SMTP password"
-            />
-          </div>
-
-          <div>
-            <TextInput
-              label={
-                <Group gap="xs">
-                  <span>{t('admin.settings.mail.from.label', 'From Address')}</span>
-                  <PendingBadge show={isFieldPending('from')} />
-                </Group>
-              }
-              description={t('admin.settings.mail.from.description', 'Email address to use as sender')}
-              value={settings.from || ''}
-              onChange={(e) => setSettings({ ...settings, from: e.target.value })}
-              placeholder="noreply@example.com"
-            />
-          </div>
-        </Stack>
-      </Paper>
+            <div>
+              <TextInput
+                label={
+                  <Group gap="xs">
+                    <span>{t("admin.settings.mail.from.label", "From Address")}</span>
+                    <PendingBadge show={isFieldPending("from")} />
+                  </Group>
+                }
+                description={t("admin.settings.mail.from.description", "Email address to use as sender")}
+                value={settings.from || ""}
+                onChange={(e) => setSettings({ ...settings, from: e.target.value })}
+                placeholder="noreply@example.com"
+              />
+            </div>
+          </Stack>
+        </Paper>
       </Stack>
 
       <SettingsStickyFooter
@@ -227,11 +242,7 @@ export default function AdminMailSection() {
       />
 
       {/* Restart Confirmation Modal */}
-      <RestartConfirmationModal
-        opened={restartModalOpened}
-        onClose={closeRestartModal}
-        onRestart={restartServer}
-      />
+      <RestartConfirmationModal opened={restartModalOpened} onClose={closeRestartModal} onRestart={restartServer} />
     </div>
   );
 }
diff --git a/frontend/src/proprietary/components/shared/config/configSections/AdminPlanSection.tsx b/frontend/src/proprietary/components/shared/config/configSections/AdminPlanSection.tsx
index d1f42870fa..5d24b8f97b 100644
--- a/frontend/src/proprietary/components/shared/config/configSections/AdminPlanSection.tsx
+++ b/frontend/src/proprietary/components/shared/config/configSections/AdminPlanSection.tsx
@@ -1,20 +1,20 @@
-import React, { useState, useCallback, useEffect, useMemo } from 'react';
-import { Divider, Loader, Alert } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { usePlans } from '@app/hooks/usePlans';
-import licenseService, { PlanTierGroup, mapLicenseToTier } from '@app/services/licenseService';
-import { useCheckout } from '@app/contexts/CheckoutContext';
-import { useLicense } from '@app/contexts/LicenseContext';
-import AvailablePlansSection from '@app/components/shared/config/configSections/plan/AvailablePlansSection';
-import StaticPlanSection from '@app/components/shared/config/configSections/plan/StaticPlanSection';
-import LicenseKeySection from '@app/components/shared/config/configSections/plan/LicenseKeySection';
-import { alert } from '@app/components/toast';
-import { InfoBanner } from '@app/components/shared/InfoBanner';
-import { useLicenseAlert } from '@app/hooks/useLicenseAlert';
-import { getPreferredCurrency, setCachedCurrency } from '@app/utils/currencyDetection';
-import { useLoginRequired } from '@app/hooks/useLoginRequired';
-import LoginRequiredBanner from '@core/components/shared/config/LoginRequiredBanner';
-import { isSupabaseConfigured } from '@app/services/supabaseClient';
+import React, { useState, useCallback, useEffect, useMemo } from "react";
+import { Divider, Loader, Alert } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { usePlans } from "@app/hooks/usePlans";
+import licenseService, { PlanTierGroup, mapLicenseToTier } from "@app/services/licenseService";
+import { useCheckout } from "@app/contexts/CheckoutContext";
+import { useLicense } from "@app/contexts/LicenseContext";
+import AvailablePlansSection from "@app/components/shared/config/configSections/plan/AvailablePlansSection";
+import StaticPlanSection from "@app/components/shared/config/configSections/plan/StaticPlanSection";
+import LicenseKeySection from "@app/components/shared/config/configSections/plan/LicenseKeySection";
+import { alert } from "@app/components/toast";
+import { InfoBanner } from "@app/components/shared/InfoBanner";
+import { useLicenseAlert } from "@app/hooks/useLicenseAlert";
+import { getPreferredCurrency, setCachedCurrency } from "@app/utils/currencyDetection";
+import { useLoginRequired } from "@app/hooks/useLoginRequired";
+import LoginRequiredBanner from "@core/components/shared/config/LoginRequiredBanner";
+import { isSupabaseConfigured } from "@app/services/supabaseClient";
 
 const AdminPlanSection: React.FC = () => {
   const { t, i18n } = useTranslation();
@@ -39,13 +39,13 @@ const AdminPlanSection: React.FC = () => {
   }, [error]);
 
   const currencyOptions = [
-    { value: 'gbp', label: 'British pound (GBP, £)' },
-    { value: 'usd', label: 'US dollar (USD, $)' },
-    { value: 'eur', label: 'Euro (EUR, €)' },
-    { value: 'cny', label: 'Chinese yuan (CNY, ¥)' },
-    { value: 'inr', label: 'Indian rupee (INR, ₹)' },
-    { value: 'brl', label: 'Brazilian real (BRL, R$)' },
-    { value: 'idr', label: 'Indonesian rupiah (IDR, Rp)' },
+    { value: "gbp", label: "British pound (GBP, £)" },
+    { value: "usd", label: "US dollar (USD, $)" },
+    { value: "eur", label: "Euro (EUR, €)" },
+    { value: "cny", label: "Chinese yuan (CNY, ¥)" },
+    { value: "inr", label: "Indian rupee (INR, ₹)" },
+    { value: "brl", label: "Brazilian real (BRL, R$)" },
+    { value: "idr", label: "Indonesian rupiah (IDR, Rp)" },
   ];
 
   const handleManageClick = useCallback(async () => {
@@ -56,28 +56,25 @@ const AdminPlanSection: React.FC = () => {
 
     try {
       // Only allow PRO or ENTERPRISE licenses to access billing portal
-      if (!licenseInfo?.licenseType || licenseInfo.licenseType === 'NORMAL') {
-        throw new Error('No valid license found. Please purchase a license before accessing the billing portal.');
+      if (!licenseInfo?.licenseType || licenseInfo.licenseType === "NORMAL") {
+        throw new Error("No valid license found. Please purchase a license before accessing the billing portal.");
       }
 
       if (!licenseInfo?.licenseKey) {
-        throw new Error('License key missing. Please contact support.');
+        throw new Error("License key missing. Please contact support.");
       }
 
       // Create billing portal session with license key
-      const response = await licenseService.createBillingPortalSession(
-        window.location.href,
-        licenseInfo.licenseKey
-      );
+      const response = await licenseService.createBillingPortalSession(window.location.href, licenseInfo.licenseKey);
 
       // Open billing portal in new tab
-      window.open(response.url, '_blank');
+      window.open(response.url, "_blank");
     } catch (error: unknown) {
-      console.error('Failed to open billing portal:', error);
+      console.error("Failed to open billing portal:", error);
       alert({
-        alertType: 'error',
-        title: t('billing.portal.error', 'Failed to open billing portal'),
-        body: (error instanceof Error ? error.message : undefined) || 'Please try again or contact support.',
+        alertType: "error",
+        title: t("billing.portal.error", "Failed to open billing portal"),
+        body: (error instanceof Error ? error.message : undefined) || "Please try again or contact support.",
       });
     }
   }, [licenseInfo, t, validateLoginEnabled]);
@@ -96,19 +93,19 @@ const AdminPlanSection: React.FC = () => {
       }
 
       // Only allow upgrades for server and enterprise tiers
-      if (planGroup.tier === 'free') {
+      if (planGroup.tier === "free") {
         return;
       }
 
       // Prevent free tier users from directly accessing enterprise (must have server first)
       const currentTier = mapLicenseToTier(licenseInfo);
-      if (currentTier === 'free' && planGroup.tier === 'enterprise') {
+      if (currentTier === "free" && planGroup.tier === "enterprise") {
         alert({
-          alertType: 'warning',
-          title: t('plan.enterprise.requiresServer', 'Server Plan Required'),
+          alertType: "warning",
+          title: t("plan.enterprise.requiresServer", "Server Plan Required"),
           body: t(
-            'plan.enterprise.requiresServerMessage',
-            'Please upgrade to the Server plan first before upgrading to Enterprise.'
+            "plan.enterprise.requiresServerMessage",
+            "Please upgrade to the Server plan first before upgrading to Enterprise.",
           ),
         });
         return;
@@ -124,13 +121,13 @@ const AdminPlanSection: React.FC = () => {
         },
       });
     },
-    [openCheckout, currency, refetch, licenseInfo, t, validateLoginEnabled]
+    [openCheckout, currency, refetch, licenseInfo, t, validateLoginEnabled],
   );
 
-  const shouldShowLicenseWarning = licenseAlert.active && licenseAlert.audience === 'admin';
+  const shouldShowLicenseWarning = licenseAlert.active && licenseAlert.audience === "admin";
   const formattedUserCount = useMemo(() => {
     if (licenseAlert.totalUsers == null) {
-      return t('plan.licenseWarning.overLimit', 'more than {{limit}}', {
+      return t("plan.licenseWarning.overLimit", "more than {{limit}}", {
         limit: licenseAlert.freeTierLimit,
       });
     }
@@ -138,9 +135,9 @@ const AdminPlanSection: React.FC = () => {
   }, [licenseAlert.totalUsers, licenseAlert.freeTierLimit, t]);
 
   const scrollToPlans = useCallback(() => {
-    const el = document.getElementById('available-plans-section');
+    const el = document.getElementById("available-plans-section");
     if (el) {
-      el.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      el.scrollIntoView({ behavior: "smooth", block: "start" });
     }
   }, []);
 
@@ -152,7 +149,7 @@ const AdminPlanSection: React.FC = () => {
   // Early returns after all hooks are called
   if (loading) {
     return (
-      <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '2rem 0' }}>
+      <div style={{ display: "flex", justifyContent: "center", alignItems: "center", padding: "2rem 0" }}>
         <Loader size="lg" />
       </div>
     );
@@ -172,19 +169,19 @@ const AdminPlanSection: React.FC = () => {
   }
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+    <div style={{ display: "flex", flexDirection: "column", gap: "2rem" }}>
       <LoginRequiredBanner show={!loginEnabled} />
 
       {shouldShowLicenseWarning && (
         <InfoBanner
           icon="warning-rounded"
           tone="warning"
-          title={t('plan.licenseWarning.title', 'Free self-hosted limit reached')}
-          message={t('plan.licenseWarning.body', {
+          title={t("plan.licenseWarning.title", "Free self-hosted limit reached")}
+          message={t("plan.licenseWarning.body", {
             total: formattedUserCount,
             limit: licenseAlert.freeTierLimit,
           })}
-          buttonText={t('plan.licenseWarning.cta', 'See plans')}
+          buttonText={t("plan.licenseWarning.cta", "See plans")}
           buttonIcon="upgrade-rounded"
           onButtonClick={scrollToPlans}
           dismissible={false}
diff --git a/frontend/src/proprietary/components/shared/config/configSections/AdminPremiumSection.tsx b/frontend/src/proprietary/components/shared/config/configSections/AdminPremiumSection.tsx
index 217b6d335b..aff50e27ae 100644
--- a/frontend/src/proprietary/components/shared/config/configSections/AdminPremiumSection.tsx
+++ b/frontend/src/proprietary/components/shared/config/configSections/AdminPremiumSection.tsx
@@ -1,16 +1,16 @@
-import { useCallback, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { TextInput, Switch, Stack, Paper, Text, Loader, Group, Alert, List } from '@mantine/core';
-import { alert } from '@app/components/toast';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import RestartConfirmationModal from '@app/components/shared/config/RestartConfirmationModal';
-import { useRestartServer } from '@app/components/shared/config/useRestartServer';
-import { useAdminSettings } from '@app/hooks/useAdminSettings';
-import { useSettingsDirty } from '@app/hooks/useSettingsDirty';
-import PendingBadge from '@app/components/shared/config/PendingBadge';
-import { SettingsStickyFooter } from '@app/components/shared/config/SettingsStickyFooter';
-import { useLoginRequired } from '@app/hooks/useLoginRequired';
-import LoginRequiredBanner from '@app/components/shared/config/LoginRequiredBanner';
+import { useCallback, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { TextInput, Switch, Stack, Paper, Text, Loader, Group, Alert, List } from "@mantine/core";
+import { alert } from "@app/components/toast";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import RestartConfirmationModal from "@app/components/shared/config/RestartConfirmationModal";
+import { useRestartServer } from "@app/components/shared/config/useRestartServer";
+import { useAdminSettings } from "@app/hooks/useAdminSettings";
+import { useSettingsDirty } from "@app/hooks/useSettingsDirty";
+import PendingBadge from "@app/components/shared/config/PendingBadge";
+import { SettingsStickyFooter } from "@app/components/shared/config/SettingsStickyFooter";
+import { useLoginRequired } from "@app/hooks/useLoginRequired";
+import LoginRequiredBanner from "@app/components/shared/config/LoginRequiredBanner";
 
 interface PremiumSettingsData {
   key?: string;
@@ -22,17 +22,10 @@ export default function AdminPremiumSection() {
   const { loginEnabled, validateLoginEnabled, getDisabledStyles } = useLoginRequired();
   const { restartModalOpened, showRestartModal, closeRestartModal, restartServer } = useRestartServer();
 
-  const {
-    settings,
-    setSettings,
-    loading,
-    saving,
-    fetchSettings,
-    saveSettings,
-    isFieldPending,
-  } = useAdminSettings<PremiumSettingsData>({
-    sectionName: 'premium',
-  });
+  const { settings, setSettings, loading, saving, fetchSettings, saveSettings, isFieldPending } =
+    useAdminSettings<PremiumSettingsData>({
+      sectionName: "premium",
+    });
 
   useEffect(() => {
     if (loginEnabled) {
@@ -40,7 +33,6 @@ export default function AdminPremiumSection() {
     }
   }, [loginEnabled]);
 
-
   const { isDirty, resetToSnapshot, markSaved } = useSettingsDirty(settings, loading);
   const handleSave = async () => {
     if (!validateLoginEnabled()) {
@@ -52,9 +44,9 @@ export default function AdminPremiumSection() {
       showRestartModal();
     } catch (_error) {
       alert({
-        alertType: 'error',
-        title: t('admin.error', 'Error'),
-        body: t('admin.settings.saveError', 'Failed to save settings'),
+        alertType: "error",
+        title: t("admin.error", "Error"),
+        body: t("admin.settings.saveError", "Failed to save settings"),
       });
     }
   };
@@ -77,75 +69,100 @@ export default function AdminPremiumSection() {
   return (
     <div className="settings-section-container">
       <Stack gap="lg" className="settings-section-content">
-      <LoginRequiredBanner show={!loginEnabled} />
-      <div>
-        <Text fw={600} size="lg">{t('admin.settings.premium.title', 'Premium & Enterprise')}</Text>
-        <Text size="sm" c="dimmed">
-          {t('admin.settings.premium.description', 'Configure your premium or enterprise license key.')}
-        </Text>
-      </div>
+        <LoginRequiredBanner show={!loginEnabled} />
+        <div>
+          <Text fw={600} size="lg">
+            {t("admin.settings.premium.title", "Premium & Enterprise")}
+          </Text>
+          <Text size="sm" c="dimmed">
+            {t("admin.settings.premium.description", "Configure your premium or enterprise license key.")}
+          </Text>
+        </div>
 
-      {/* Notice about moved features */}
-      <Alert
-        variant="light"
-        color="blue"
-        title={t('admin.settings.premium.movedFeatures.title', 'Premium Features Distributed')}
-        icon={<LocalIcon icon="info-rounded" width="1rem" height="1rem" />}
-      >
-        <Text size="sm">
-          {t('admin.settings.premium.movedFeatures.message', 'Premium and Enterprise features are now organized in their respective sections:')}
-        </Text>
-        <List mt="xs" size="sm">
-          <List.Item><Text size="sm" component="span"><strong>SSO Auto Login</strong> (PRO) - Connections</Text></List.Item>
-          <List.Item><Text size="sm" component="span"><strong>Custom Metadata</strong> (PRO) - General</Text></List.Item>
-          <List.Item><Text size="sm" component="span"><strong>Audit Logging</strong> (ENTERPRISE) - Security</Text></List.Item>
-          <List.Item><Text size="sm" component="span"><strong>Database Configuration</strong> (ENTERPRISE) - Database</Text></List.Item>
-        </List>
-      </Alert>
-
-      {/* License Configuration */}
-      <Paper withBorder p="md" radius="md">
-        <Stack gap="md">
-          <Text fw={600} size="sm" mb="xs">{t('admin.settings.premium.license', 'License Configuration')}</Text>
-
-          <div>
-            <TextInput
-              label={
-                <Group gap="xs">
-                  <span>{t('admin.settings.premium.key.label', 'License Key')}</span>
-                  <PendingBadge show={isFieldPending('key')} />
-                </Group>
-              }
-              description={t('admin.settings.premium.key.description', 'Enter your premium or enterprise license key')}
-              value={settings.key || ''}
-              onChange={(e) => setSettings({ ...settings, key: e.target.value })}
-              placeholder="00000000-0000-0000-0000-000000000000"
-              disabled={!loginEnabled}
-            />
-          </div>
-
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <div>
-              <Text fw={500} size="sm">{t('admin.settings.premium.enabled.label', 'Enable Premium Features')}</Text>
-              <Text size="xs" c="dimmed" mt={4}>
-                {t('admin.settings.premium.enabled.description', 'Enable license key checks for pro/enterprise features')}
+        {/* Notice about moved features */}
+        <Alert
+          variant="light"
+          color="blue"
+          title={t("admin.settings.premium.movedFeatures.title", "Premium Features Distributed")}
+          icon={<LocalIcon icon="info-rounded" width="1rem" height="1rem" />}
+        >
+          <Text size="sm">
+            {t(
+              "admin.settings.premium.movedFeatures.message",
+              "Premium and Enterprise features are now organized in their respective sections:",
+            )}
+          </Text>
+          <List mt="xs" size="sm">
+            <List.Item>
+              <Text size="sm" component="span">
+                <strong>SSO Auto Login</strong> (PRO) - Connections
               </Text>
-            </div>
-            <Group gap="xs">
-              <Switch
-                checked={settings.enabled || false}
-                onChange={(e) => {
-                  if (!loginEnabled) return;
-                  setSettings({ ...settings, enabled: e.target.checked });
-                }}
+            </List.Item>
+            <List.Item>
+              <Text size="sm" component="span">
+                <strong>Custom Metadata</strong> (PRO) - General
+              </Text>
+            </List.Item>
+            <List.Item>
+              <Text size="sm" component="span">
+                <strong>Audit Logging</strong> (ENTERPRISE) - Security
+              </Text>
+            </List.Item>
+            <List.Item>
+              <Text size="sm" component="span">
+                <strong>Database Configuration</strong> (ENTERPRISE) - Database
+              </Text>
+            </List.Item>
+          </List>
+        </Alert>
+
+        {/* License Configuration */}
+        <Paper withBorder p="md" radius="md">
+          <Stack gap="md">
+            <Text fw={600} size="sm" mb="xs">
+              {t("admin.settings.premium.license", "License Configuration")}
+            </Text>
+
+            <div>
+              <TextInput
+                label={
+                  <Group gap="xs">
+                    <span>{t("admin.settings.premium.key.label", "License Key")}</span>
+                    <PendingBadge show={isFieldPending("key")} />
+                  </Group>
+                }
+                description={t("admin.settings.premium.key.description", "Enter your premium or enterprise license key")}
+                value={settings.key || ""}
+                onChange={(e) => setSettings({ ...settings, key: e.target.value })}
+                placeholder="00000000-0000-0000-0000-000000000000"
                 disabled={!loginEnabled}
-                styles={getDisabledStyles()}
               />
-              <PendingBadge show={isFieldPending('enabled')} />
-            </Group>
-          </div>
-        </Stack>
-      </Paper>
+            </div>
+
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+              <div>
+                <Text fw={500} size="sm">
+                  {t("admin.settings.premium.enabled.label", "Enable Premium Features")}
+                </Text>
+                <Text size="xs" c="dimmed" mt={4}>
+                  {t("admin.settings.premium.enabled.description", "Enable license key checks for pro/enterprise features")}
+                </Text>
+              </div>
+              <Group gap="xs">
+                <Switch
+                  checked={settings.enabled || false}
+                  onChange={(e) => {
+                    if (!loginEnabled) return;
+                    setSettings({ ...settings, enabled: e.target.checked });
+                  }}
+                  disabled={!loginEnabled}
+                  styles={getDisabledStyles()}
+                />
+                <PendingBadge show={isFieldPending("enabled")} />
+              </Group>
+            </div>
+          </Stack>
+        </Paper>
       </Stack>
 
       <SettingsStickyFooter
@@ -157,11 +174,7 @@ export default function AdminPremiumSection() {
       />
 
       {/* Restart Confirmation Modal */}
-      <RestartConfirmationModal
-        opened={restartModalOpened}
-        onClose={closeRestartModal}
-        onRestart={restartServer}
-      />
+      <RestartConfirmationModal opened={restartModalOpened} onClose={closeRestartModal} onRestart={restartServer} />
     </div>
   );
 }
diff --git a/frontend/src/proprietary/components/shared/config/configSections/AdminPrivacySection.tsx b/frontend/src/proprietary/components/shared/config/configSections/AdminPrivacySection.tsx
index 80c592f96d..1d93b380c2 100644
--- a/frontend/src/proprietary/components/shared/config/configSections/AdminPrivacySection.tsx
+++ b/frontend/src/proprietary/components/shared/config/configSections/AdminPrivacySection.tsx
@@ -1,16 +1,16 @@
-import { useCallback, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Switch, Stack, Paper, Text, Loader, Group } from '@mantine/core';
-import { alert } from '@app/components/toast';
-import RestartConfirmationModal from '@app/components/shared/config/RestartConfirmationModal';
-import { useRestartServer } from '@app/components/shared/config/useRestartServer';
-import { useAdminSettings } from '@app/hooks/useAdminSettings';
-import { useSettingsDirty } from '@app/hooks/useSettingsDirty';
-import PendingBadge from '@app/components/shared/config/PendingBadge';
-import { SettingsStickyFooter } from '@app/components/shared/config/SettingsStickyFooter';
-import { useLoginRequired } from '@app/hooks/useLoginRequired';
-import LoginRequiredBanner from '@app/components/shared/config/LoginRequiredBanner';
-import apiClient from '@app/services/apiClient';
+import { useCallback, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { Switch, Stack, Paper, Text, Loader, Group } from "@mantine/core";
+import { alert } from "@app/components/toast";
+import RestartConfirmationModal from "@app/components/shared/config/RestartConfirmationModal";
+import { useRestartServer } from "@app/components/shared/config/useRestartServer";
+import { useAdminSettings } from "@app/hooks/useAdminSettings";
+import { useSettingsDirty } from "@app/hooks/useSettingsDirty";
+import PendingBadge from "@app/components/shared/config/PendingBadge";
+import { SettingsStickyFooter } from "@app/components/shared/config/SettingsStickyFooter";
+import { useLoginRequired } from "@app/hooks/useLoginRequired";
+import LoginRequiredBanner from "@app/components/shared/config/LoginRequiredBanner";
+import apiClient from "@app/services/apiClient";
 
 interface PrivacySettingsData {
   enableAnalytics?: boolean;
@@ -23,62 +23,55 @@ export default function AdminPrivacySection() {
   const { loginEnabled, validateLoginEnabled, getDisabledStyles } = useLoginRequired();
   const { restartModalOpened, showRestartModal, closeRestartModal, restartServer } = useRestartServer();
 
-  const {
-    settings,
-    setSettings,
-    loading,
-    saving,
-    fetchSettings,
-    saveSettings,
-    isFieldPending,
-  } = useAdminSettings<PrivacySettingsData>({
-    sectionName: 'privacy',
-    fetchTransformer: async (): Promise<PrivacySettingsData & { _pending?: Record<string, unknown> }> => {
-      const [metricsResponse, systemResponse] = await Promise.all([
-        apiClient.get('/api/v1/admin/settings/section/metrics'),
-        apiClient.get('/api/v1/admin/settings/section/system')
-      ]);
+  const { settings, setSettings, loading, saving, fetchSettings, saveSettings, isFieldPending } =
+    useAdminSettings<PrivacySettingsData>({
+      sectionName: "privacy",
+      fetchTransformer: async (): Promise<PrivacySettingsData & { _pending?: Record<string, unknown> }> => {
+        const [metricsResponse, systemResponse] = await Promise.all([
+          apiClient.get("/api/v1/admin/settings/section/metrics"),
+          apiClient.get("/api/v1/admin/settings/section/system"),
+        ]);
 
-      const metrics = metricsResponse.data;
-      const system = systemResponse.data;
+        const metrics = metricsResponse.data;
+        const system = systemResponse.data;
 
-      const result: PrivacySettingsData & { _pending?: Record<string, unknown> } = {
-        enableAnalytics: system.enableAnalytics || false,
-        googleVisibility: system.googlevisibility || false,
-        metricsEnabled: metrics.enabled || false
-      };
+        const result: PrivacySettingsData & { _pending?: Record<string, unknown> } = {
+          enableAnalytics: system.enableAnalytics || false,
+          googleVisibility: system.googlevisibility || false,
+          metricsEnabled: metrics.enabled || false,
+        };
 
-      // Merge pending blocks from both endpoints
-      const pendingBlock: Record<string, unknown> = {};
-      if (system._pending?.enableAnalytics !== undefined) {
-        pendingBlock.enableAnalytics = system._pending.enableAnalytics;
-      }
-      if (system._pending?.googlevisibility !== undefined) {
-        pendingBlock.googleVisibility = system._pending.googlevisibility;
-      }
-      if (metrics._pending?.enabled !== undefined) {
-        pendingBlock.metricsEnabled = metrics._pending.enabled;
-      }
+        // Merge pending blocks from both endpoints
+        const pendingBlock: Record<string, unknown> = {};
+        if (system._pending?.enableAnalytics !== undefined) {
+          pendingBlock.enableAnalytics = system._pending.enableAnalytics;
+        }
+        if (system._pending?.googlevisibility !== undefined) {
+          pendingBlock.googleVisibility = system._pending.googlevisibility;
+        }
+        if (metrics._pending?.enabled !== undefined) {
+          pendingBlock.metricsEnabled = metrics._pending.enabled;
+        }
 
-      if (Object.keys(pendingBlock).length > 0) {
-        result._pending = pendingBlock;
-      }
+        if (Object.keys(pendingBlock).length > 0) {
+          result._pending = pendingBlock;
+        }
 
-      return result;
-    },
-    saveTransformer: (settings: PrivacySettingsData) => {
-      const deltaSettings = {
-        'system.enableAnalytics': settings.enableAnalytics,
-        'system.googlevisibility': settings.googleVisibility,
-        'metrics.enabled': settings.metricsEnabled
-      };
+        return result;
+      },
+      saveTransformer: (settings: PrivacySettingsData) => {
+        const deltaSettings = {
+          "system.enableAnalytics": settings.enableAnalytics,
+          "system.googlevisibility": settings.googleVisibility,
+          "metrics.enabled": settings.metricsEnabled,
+        };
 
-      return {
-        sectionData: {},
-        deltaSettings
-      };
-    }
-  });
+        return {
+          sectionData: {},
+          deltaSettings,
+        };
+      },
+    });
 
   useEffect(() => {
     if (loginEnabled) {
@@ -103,9 +96,9 @@ export default function AdminPrivacySection() {
       showRestartModal();
     } catch (_error) {
       alert({
-        alertType: 'error',
-        title: t('admin.error', 'Error'),
-        body: t('admin.settings.saveError', 'Failed to save settings'),
+        alertType: "error",
+        title: t("admin.error", "Error"),
+        body: t("admin.settings.saveError", "Failed to save settings"),
       });
     }
   };
@@ -124,92 +117,109 @@ export default function AdminPrivacySection() {
   return (
     <div className="settings-section-container">
       <Stack gap="lg" className="settings-section-content">
-      <LoginRequiredBanner show={!loginEnabled} />
+        <LoginRequiredBanner show={!loginEnabled} />
 
-      <div>
-        <Text fw={600} size="lg">{t('admin.settings.privacy.title', 'Privacy')}</Text>
-        <Text size="sm" c="dimmed">
-          {t('admin.settings.privacy.description', 'Configure privacy and data collection settings.')}
-        </Text>
-      </div>
+        <div>
+          <Text fw={600} size="lg">
+            {t("admin.settings.privacy.title", "Privacy")}
+          </Text>
+          <Text size="sm" c="dimmed">
+            {t("admin.settings.privacy.description", "Configure privacy and data collection settings.")}
+          </Text>
+        </div>
 
-      {/* Analytics & Tracking */}
-      <Paper withBorder p="md" radius="md">
-        <Stack gap="md">
-          <Text fw={600} size="sm" mb="xs">{t('admin.settings.privacy.analytics', 'Analytics & Tracking')}</Text>
+        {/* Analytics & Tracking */}
+        <Paper withBorder p="md" radius="md">
+          <Stack gap="md">
+            <Text fw={600} size="sm" mb="xs">
+              {t("admin.settings.privacy.analytics", "Analytics & Tracking")}
+            </Text>
 
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <div>
-              <Text fw={500} size="sm">{t('admin.settings.privacy.enableAnalytics.label', 'Enable Analytics')}</Text>
-              <Text size="xs" c="dimmed" mt={4}>
-                {t('admin.settings.privacy.enableAnalytics.description', 'Collect anonymous usage analytics to help improve the application')}
-              </Text>
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+              <div>
+                <Text fw={500} size="sm">
+                  {t("admin.settings.privacy.enableAnalytics.label", "Enable Analytics")}
+                </Text>
+                <Text size="xs" c="dimmed" mt={4}>
+                  {t(
+                    "admin.settings.privacy.enableAnalytics.description",
+                    "Collect anonymous usage analytics to help improve the application",
+                  )}
+                </Text>
+              </div>
+              <Group gap="xs">
+                <Switch
+                  checked={settings?.enableAnalytics || false}
+                  onChange={(e) => {
+                    if (!loginEnabled) return;
+                    setSettings({ ...settings, enableAnalytics: e.target.checked });
+                  }}
+                  disabled={!loginEnabled}
+                  styles={getDisabledStyles()}
+                />
+                <PendingBadge show={isFieldPending("enableAnalytics")} />
+              </Group>
             </div>
-            <Group gap="xs">
-              <Switch
-                checked={settings?.enableAnalytics || false}
-                onChange={(e) => {
-                  if (!loginEnabled) return;
-                  setSettings({ ...settings, enableAnalytics: e.target.checked });
-                }}
-                disabled={!loginEnabled}
-                styles={getDisabledStyles()}
-              />
-              <PendingBadge show={isFieldPending('enableAnalytics')} />
-            </Group>
-          </div>
 
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <div>
-              <Text fw={500} size="sm">{t('admin.settings.privacy.metricsEnabled.label', 'Enable Metrics')}</Text>
-              <Text size="xs" c="dimmed" mt={4}>
-                {t('admin.settings.privacy.metricsEnabled.description', 'Enable collection of performance and usage metrics')}
-              </Text>
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+              <div>
+                <Text fw={500} size="sm">
+                  {t("admin.settings.privacy.metricsEnabled.label", "Enable Metrics")}
+                </Text>
+                <Text size="xs" c="dimmed" mt={4}>
+                  {t(
+                    "admin.settings.privacy.metricsEnabled.description",
+                    "Enable collection of performance and usage metrics",
+                  )}
+                </Text>
+              </div>
+              <Group gap="xs">
+                <Switch
+                  checked={settings?.metricsEnabled || false}
+                  onChange={(e) => {
+                    if (!loginEnabled) return;
+                    setSettings({ ...settings, metricsEnabled: e.target.checked });
+                  }}
+                  disabled={!loginEnabled}
+                  styles={getDisabledStyles()}
+                />
+                <PendingBadge show={isFieldPending("metricsEnabled")} />
+              </Group>
             </div>
-            <Group gap="xs">
-              <Switch
-                checked={settings?.metricsEnabled || false}
-                onChange={(e) => {
-                  if (!loginEnabled) return;
-                  setSettings({ ...settings, metricsEnabled: e.target.checked });
-                }}
-                disabled={!loginEnabled}
-                styles={getDisabledStyles()}
-              />
-              <PendingBadge show={isFieldPending('metricsEnabled')} />
-            </Group>
-          </div>
-        </Stack>
-      </Paper>
+          </Stack>
+        </Paper>
 
-      {/* Search Engine Visibility */}
-      <Paper withBorder p="md" radius="md">
-        <Stack gap="md">
-          <Text fw={600} size="sm" mb="xs">{t('admin.settings.privacy.searchEngine', 'Search Engine Visibility')}</Text>
+        {/* Search Engine Visibility */}
+        <Paper withBorder p="md" radius="md">
+          <Stack gap="md">
+            <Text fw={600} size="sm" mb="xs">
+              {t("admin.settings.privacy.searchEngine", "Search Engine Visibility")}
+            </Text>
 
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <div>
-              <Text fw={500} size="sm">{t('admin.settings.privacy.googleVisibility.label', 'Google Visibility')}</Text>
-              <Text size="xs" c="dimmed" mt={4}>
-                {t('admin.settings.privacy.googleVisibility.description', 'Allow search engines to index this application')}
-              </Text>
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+              <div>
+                <Text fw={500} size="sm">
+                  {t("admin.settings.privacy.googleVisibility.label", "Google Visibility")}
+                </Text>
+                <Text size="xs" c="dimmed" mt={4}>
+                  {t("admin.settings.privacy.googleVisibility.description", "Allow search engines to index this application")}
+                </Text>
+              </div>
+              <Group gap="xs">
+                <Switch
+                  checked={settings?.googleVisibility || false}
+                  onChange={(e) => {
+                    if (!loginEnabled) return;
+                    setSettings({ ...settings, googleVisibility: e.target.checked });
+                  }}
+                  disabled={!loginEnabled}
+                  styles={getDisabledStyles()}
+                />
+                <PendingBadge show={isFieldPending("googleVisibility")} />
+              </Group>
             </div>
-            <Group gap="xs">
-              <Switch
-                checked={settings?.googleVisibility || false}
-                onChange={(e) => {
-                  if (!loginEnabled) return;
-                  setSettings({ ...settings, googleVisibility: e.target.checked });
-                }}
-                disabled={!loginEnabled}
-                styles={getDisabledStyles()}
-              />
-              <PendingBadge show={isFieldPending('googleVisibility')} />
-            </Group>
-          </div>
-        </Stack>
-      </Paper>
-
+          </Stack>
+        </Paper>
       </Stack>
 
       <SettingsStickyFooter
@@ -221,11 +231,7 @@ export default function AdminPrivacySection() {
       />
 
       {/* Restart Confirmation Modal */}
-      <RestartConfirmationModal
-        opened={restartModalOpened}
-        onClose={closeRestartModal}
-        onRestart={restartServer}
-      />
+      <RestartConfirmationModal opened={restartModalOpened} onClose={closeRestartModal} onRestart={restartServer} />
     </div>
   );
 }
diff --git a/frontend/src/proprietary/components/shared/config/configSections/AdminSecuritySection.tsx b/frontend/src/proprietary/components/shared/config/configSections/AdminSecuritySection.tsx
index f915d9d695..48bc4f8861 100644
--- a/frontend/src/proprietary/components/shared/config/configSections/AdminSecuritySection.tsx
+++ b/frontend/src/proprietary/components/shared/config/configSections/AdminSecuritySection.tsx
@@ -1,17 +1,30 @@
-import { useCallback, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { NumberInput, Switch, Stack, Paper, Text, Loader, Group, Select, Alert, Badge, Accordion, Textarea } from '@mantine/core';
-import { alert } from '@app/components/toast';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import RestartConfirmationModal from '@app/components/shared/config/RestartConfirmationModal';
-import { useRestartServer } from '@app/components/shared/config/useRestartServer';
-import { useAdminSettings } from '@app/hooks/useAdminSettings';
-import { useSettingsDirty } from '@app/hooks/useSettingsDirty';
-import PendingBadge from '@app/components/shared/config/PendingBadge';
-import { SettingsStickyFooter } from '@app/components/shared/config/SettingsStickyFooter';
-import apiClient from '@app/services/apiClient';
-import { useLoginRequired } from '@app/hooks/useLoginRequired';
-import LoginRequiredBanner from '@app/components/shared/config/LoginRequiredBanner';
+import { useCallback, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import {
+  NumberInput,
+  Switch,
+  Stack,
+  Paper,
+  Text,
+  Loader,
+  Group,
+  Select,
+  Alert,
+  Badge,
+  Accordion,
+  Textarea,
+} from "@mantine/core";
+import { alert } from "@app/components/toast";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import RestartConfirmationModal from "@app/components/shared/config/RestartConfirmationModal";
+import { useRestartServer } from "@app/components/shared/config/useRestartServer";
+import { useAdminSettings } from "@app/hooks/useAdminSettings";
+import { useSettingsDirty } from "@app/hooks/useSettingsDirty";
+import PendingBadge from "@app/components/shared/config/PendingBadge";
+import { SettingsStickyFooter } from "@app/components/shared/config/SettingsStickyFooter";
+import apiClient from "@app/services/apiClient";
+import { useLoginRequired } from "@app/hooks/useLoginRequired";
+import LoginRequiredBanner from "@app/components/shared/config/LoginRequiredBanner";
 
 interface SecuritySettingsData {
   enableLogin?: boolean;
@@ -57,121 +70,114 @@ export default function AdminSecuritySection() {
   const { loginEnabled, validateLoginEnabled } = useLoginRequired();
   const { restartModalOpened, showRestartModal, closeRestartModal, restartServer } = useRestartServer();
 
-  const {
-    settings,
-    setSettings,
-    loading,
-    saving,
-    fetchSettings,
-    saveSettings,
-    isFieldPending,
-  } = useAdminSettings<SecuritySettingsData>({
-    sectionName: 'security',
-    fetchTransformer: async (): Promise<SecuritySettingsData & { _pending?: Record<string, unknown> }> => {
-      const [securityResponse, premiumResponse, systemResponse] = await Promise.all([
-        apiClient.get('/api/v1/admin/settings/section/security'),
-        apiClient.get('/api/v1/admin/settings/section/premium'),
-        apiClient.get('/api/v1/admin/settings/section/system')
-      ]);
+  const { settings, setSettings, loading, saving, fetchSettings, saveSettings, isFieldPending } =
+    useAdminSettings<SecuritySettingsData>({
+      sectionName: "security",
+      fetchTransformer: async (): Promise<SecuritySettingsData & { _pending?: Record<string, unknown> }> => {
+        const [securityResponse, premiumResponse, systemResponse] = await Promise.all([
+          apiClient.get("/api/v1/admin/settings/section/security"),
+          apiClient.get("/api/v1/admin/settings/section/premium"),
+          apiClient.get("/api/v1/admin/settings/section/system"),
+        ]);
 
-      const securityData = securityResponse.data || {};
-      const premiumData = premiumResponse.data || {};
-      const systemData = systemResponse.data || {};
+        const securityData = securityResponse.data || {};
+        const premiumData = premiumResponse.data || {};
+        const systemData = systemResponse.data || {};
 
-      console.log('[AdminSecuritySection] Raw backend data:');
-      console.log('Security:', JSON.parse(JSON.stringify(securityData)));
-      console.log('Premium:', JSON.parse(JSON.stringify(premiumData)));
-      console.log('System:', JSON.parse(JSON.stringify(systemData)));
+        console.log("[AdminSecuritySection] Raw backend data:");
+        console.log("Security:", JSON.parse(JSON.stringify(securityData)));
+        console.log("Premium:", JSON.parse(JSON.stringify(premiumData)));
+        console.log("System:", JSON.parse(JSON.stringify(systemData)));
 
-      const { _pending: securityPending, ...securityActive } = securityData;
-      const { _pending: premiumPending, ...premiumActive } = premiumData;
-      const { _pending: systemPending, ...systemActive } = systemData;
+        const { _pending: securityPending, ...securityActive } = securityData;
+        const { _pending: premiumPending, ...premiumActive } = premiumData;
+        const { _pending: systemPending, ...systemActive } = systemData;
 
-      console.log('[AdminSecuritySection] Extracted pending blocks:', {
-        securityPending: JSON.parse(JSON.stringify(securityPending || {})),
-        premiumPending: JSON.parse(JSON.stringify(premiumPending || {})),
-        systemPending: JSON.parse(JSON.stringify(systemPending || {}))
-      });
+        console.log("[AdminSecuritySection] Extracted pending blocks:", {
+          securityPending: JSON.parse(JSON.stringify(securityPending || {})),
+          premiumPending: JSON.parse(JSON.stringify(premiumPending || {})),
+          systemPending: JSON.parse(JSON.stringify(systemPending || {})),
+        });
 
-      const combined: SecuritySettingsData & { _pending?: Record<string, unknown> } = {
-        ...securityActive
-      };
+        const combined: SecuritySettingsData & { _pending?: Record<string, unknown> } = {
+          ...securityActive,
+        };
 
-      // Only add audit if it exists (don't create defaults)
-      if (premiumActive.enterpriseFeatures?.audit) {
-        combined.audit = premiumActive.enterpriseFeatures.audit;
-      }
+        // Only add audit if it exists (don't create defaults)
+        if (premiumActive.enterpriseFeatures?.audit) {
+          combined.audit = premiumActive.enterpriseFeatures.audit;
+        }
 
-      // Only add html if it exists (don't create defaults)
-      if (systemActive.html) {
-        combined.html = systemActive.html;
-      }
+        // Only add html if it exists (don't create defaults)
+        if (systemActive.html) {
+          combined.html = systemActive.html;
+        }
 
-      // Merge all _pending blocks
-      const mergedPending: Record<string, unknown> = {};
-      if (securityPending) {
-        Object.assign(mergedPending, securityPending);
-      }
-      if (premiumPending?.enterpriseFeatures?.audit) {
-        mergedPending.audit = premiumPending.enterpriseFeatures.audit;
-      }
-      if (systemPending?.html) {
-        mergedPending.html = systemPending.html;
-      }
+        // Merge all _pending blocks
+        const mergedPending: Record<string, unknown> = {};
+        if (securityPending) {
+          Object.assign(mergedPending, securityPending);
+        }
+        if (premiumPending?.enterpriseFeatures?.audit) {
+          mergedPending.audit = premiumPending.enterpriseFeatures.audit;
+        }
+        if (systemPending?.html) {
+          mergedPending.html = systemPending.html;
+        }
 
-      if (Object.keys(mergedPending).length > 0) {
-        combined._pending = mergedPending;
-      }
+        if (Object.keys(mergedPending).length > 0) {
+          combined._pending = mergedPending;
+        }
 
-      return combined;
-    },
-    saveTransformer: (settings: SecuritySettingsData) => {
-      const { audit, html, ...securitySettings } = settings;
+        return combined;
+      },
+      saveTransformer: (settings: SecuritySettingsData) => {
+        const { audit, html, ...securitySettings } = settings;
 
-      const deltaSettings: Record<string, unknown> = {
-        // Security settings
-        'security.enableLogin': securitySettings.enableLogin,
-        'security.loginMethod': securitySettings.loginMethod,
-        'security.loginAttemptCount': securitySettings.loginAttemptCount,
-        'security.loginResetTimeMinutes': securitySettings.loginResetTimeMinutes,
-        'security.xFrameOptions': securitySettings.xFrameOptions,
-        // JWT settings
-        'security.jwt.persistence': securitySettings.jwt?.persistence,
-        'security.jwt.enableKeyRotation': securitySettings.jwt?.enableKeyRotation,
-        'security.jwt.enableKeyCleanup': securitySettings.jwt?.enableKeyCleanup,
-        'security.jwt.tokenExpiryMinutes': securitySettings.jwt?.tokenExpiryMinutes,
-        'security.jwt.desktopTokenExpiryMinutes': securitySettings.jwt?.desktopTokenExpiryMinutes,
-        'security.jwt.allowedClockSkewSeconds': securitySettings.jwt?.allowedClockSkewSeconds,
-        'security.jwt.refreshGraceMinutes': securitySettings.jwt?.refreshGraceMinutes,
-        'security.jwt.secureCookie': securitySettings.jwt?.secureCookie,
-        // Premium audit settings
-        'premium.enterpriseFeatures.audit.enabled': audit?.enabled,
-        'premium.enterpriseFeatures.audit.level': audit?.level,
-        'premium.enterpriseFeatures.audit.retentionDays': audit?.retentionDays,
-        'premium.enterpriseFeatures.audit.captureFileHash': audit?.captureFileHash,
-        'premium.enterpriseFeatures.audit.capturePdfAuthor': audit?.capturePdfAuthor,
-        'premium.enterpriseFeatures.audit.captureOperationResults': audit?.captureOperationResults
-      };
+        const deltaSettings: Record<string, unknown> = {
+          // Security settings
+          "security.enableLogin": securitySettings.enableLogin,
+          "security.loginMethod": securitySettings.loginMethod,
+          "security.loginAttemptCount": securitySettings.loginAttemptCount,
+          "security.loginResetTimeMinutes": securitySettings.loginResetTimeMinutes,
+          "security.xFrameOptions": securitySettings.xFrameOptions,
+          // JWT settings
+          "security.jwt.persistence": securitySettings.jwt?.persistence,
+          "security.jwt.enableKeyRotation": securitySettings.jwt?.enableKeyRotation,
+          "security.jwt.enableKeyCleanup": securitySettings.jwt?.enableKeyCleanup,
+          "security.jwt.tokenExpiryMinutes": securitySettings.jwt?.tokenExpiryMinutes,
+          "security.jwt.desktopTokenExpiryMinutes": securitySettings.jwt?.desktopTokenExpiryMinutes,
+          "security.jwt.allowedClockSkewSeconds": securitySettings.jwt?.allowedClockSkewSeconds,
+          "security.jwt.refreshGraceMinutes": securitySettings.jwt?.refreshGraceMinutes,
+          "security.jwt.secureCookie": securitySettings.jwt?.secureCookie,
+          // Premium audit settings
+          "premium.enterpriseFeatures.audit.enabled": audit?.enabled,
+          "premium.enterpriseFeatures.audit.level": audit?.level,
+          "premium.enterpriseFeatures.audit.retentionDays": audit?.retentionDays,
+          "premium.enterpriseFeatures.audit.captureFileHash": audit?.captureFileHash,
+          "premium.enterpriseFeatures.audit.capturePdfAuthor": audit?.capturePdfAuthor,
+          "premium.enterpriseFeatures.audit.captureOperationResults": audit?.captureOperationResults,
+        };
 
-      // System HTML settings
-      if (html?.urlSecurity) {
-        deltaSettings['system.html.urlSecurity.enabled'] = html.urlSecurity.enabled;
-        deltaSettings['system.html.urlSecurity.level'] = html.urlSecurity.level;
-        deltaSettings['system.html.urlSecurity.allowedDomains'] = html.urlSecurity.allowedDomains;
-        deltaSettings['system.html.urlSecurity.blockedDomains'] = html.urlSecurity.blockedDomains;
-        deltaSettings['system.html.urlSecurity.internalTlds'] = html.urlSecurity.internalTlds;
-        deltaSettings['system.html.urlSecurity.blockPrivateNetworks'] = html.urlSecurity.blockPrivateNetworks;
-        deltaSettings['system.html.urlSecurity.blockLocalhost'] = html.urlSecurity.blockLocalhost;
-        deltaSettings['system.html.urlSecurity.blockLinkLocal'] = html.urlSecurity.blockLinkLocal;
-        deltaSettings['system.html.urlSecurity.blockCloudMetadata'] = html.urlSecurity.blockCloudMetadata;
-      }
+        // System HTML settings
+        if (html?.urlSecurity) {
+          deltaSettings["system.html.urlSecurity.enabled"] = html.urlSecurity.enabled;
+          deltaSettings["system.html.urlSecurity.level"] = html.urlSecurity.level;
+          deltaSettings["system.html.urlSecurity.allowedDomains"] = html.urlSecurity.allowedDomains;
+          deltaSettings["system.html.urlSecurity.blockedDomains"] = html.urlSecurity.blockedDomains;
+          deltaSettings["system.html.urlSecurity.internalTlds"] = html.urlSecurity.internalTlds;
+          deltaSettings["system.html.urlSecurity.blockPrivateNetworks"] = html.urlSecurity.blockPrivateNetworks;
+          deltaSettings["system.html.urlSecurity.blockLocalhost"] = html.urlSecurity.blockLocalhost;
+          deltaSettings["system.html.urlSecurity.blockLinkLocal"] = html.urlSecurity.blockLinkLocal;
+          deltaSettings["system.html.urlSecurity.blockCloudMetadata"] = html.urlSecurity.blockCloudMetadata;
+        }
 
-      return {
-        sectionData: {},
-        deltaSettings
-      };
-    }
-  });
+        return {
+          sectionData: {},
+          deltaSettings,
+        };
+      },
+    });
 
   const { isDirty, resetToSnapshot, markSaved } = useSettingsDirty(settings, loading);
 
@@ -196,9 +202,9 @@ export default function AdminSecuritySection() {
       showRestartModal();
     } catch (_error) {
       alert({
-        alertType: 'error',
-        title: t('admin.error', 'Error'),
-        body: t('admin.settings.saveError', 'Failed to save settings'),
+        alertType: "error",
+        title: t("admin.error", "Error"),
+        body: t("admin.settings.saveError", "Failed to save settings"),
       });
     }
   };
@@ -221,663 +227,863 @@ export default function AdminSecuritySection() {
       <Stack gap="lg" className="settings-section-content">
         <LoginRequiredBanner show={!loginEnabled} />
 
-      <div>
-        <Text fw={600} size="lg">{t('admin.settings.security.title', 'Security')}</Text>
-        <Text size="sm" c="dimmed">
-          {t('admin.settings.security.description', 'Configure authentication, login behaviour, and security policies.')}
-        </Text>
-      </div>
+        <div>
+          <Text fw={600} size="lg">
+            {t("admin.settings.security.title", "Security")}
+          </Text>
+          <Text size="sm" c="dimmed">
+            {t("admin.settings.security.description", "Configure authentication, login behaviour, and security policies.")}
+          </Text>
+        </div>
 
-      {/* Authentication Settings */}
-      <Paper withBorder p="md" radius="md">
-        <Stack gap="md">
-          <Text fw={600} size="sm" mb="xs">{t('admin.settings.security.authentication', 'Authentication')}</Text>
-
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <div>
-              <Text fw={500} size="sm">{t('admin.settings.security.enableLogin.label', 'Enable Login')}</Text>
-              <Text size="xs" c="dimmed" mt={4}>
-                {t('admin.settings.security.enableLogin.description', 'Require users to log in before accessing the application')}
-              </Text>
-            </div>
-            <Group gap="xs">
-              <Switch
-                name="enableLogin"
-                checked={settings?.enableLogin || false}
-                onChange={(e) => setSettings({ ...settings, enableLogin: e.target.checked })}
-                disabled={!loginEnabled}
-              />
-              <PendingBadge show={isFieldPending('enableLogin')} />
-            </Group>
-          </div>
-
-          <div>
-            <Select
-              name="loginMethod"
-              label={t('admin.settings.security.loginMethod.label', 'Login Method')}
-              description={t('admin.settings.security.loginMethod.description', 'The authentication method to use for user login')}
-              value={settings?.loginMethod || 'all'}
-              onChange={(value) => setSettings({ ...settings, loginMethod: value || 'all' })}
-              data={[
-                { value: 'all', label: t('admin.settings.security.loginMethod.all', 'All Methods') },
-                { value: 'normal', label: t('admin.settings.security.loginMethod.normal', 'Username/Password Only') },
-                { value: 'oauth2', label: t('admin.settings.security.loginMethod.oauth2', 'OAuth2 Only') },
-                { value: 'saml2', label: t('admin.settings.security.loginMethod.saml2', 'SAML2 Only') },
-              ]}
-              comboboxProps={{ zIndex: 1400 }}
-              disabled={!loginEnabled}
-            />
-            {isFieldPending('loginMethod') && (
-              <Group mt="xs">
-                <PendingBadge show={true} />
-              </Group>
-            )}
-          </div>
-
-          <div>
-            <NumberInput
-              name="loginAttemptCount"
-              label={
-                <Group component="span" gap="xs">
-                  <span>{t('admin.settings.security.loginAttemptCount.label', 'Login Attempt Limit')}</span>
-                  <PendingBadge show={isFieldPending('loginAttemptCount')} />
-                </Group>
-              }
-              description={t('admin.settings.security.loginAttemptCount.description', 'Maximum number of failed login attempts before account lockout')}
-              value={settings?.loginAttemptCount || 0}
-              onChange={(value) => setSettings({ ...settings, loginAttemptCount: Number(value) })}
-              min={0}
-              max={100}
-              disabled={!loginEnabled}
-            />
-          </div>
-
-          <div>
-            <NumberInput
-              name="loginResetTimeMinutes"
-              label={
-                <Group component="span" gap="xs">
-                  <span>{t('admin.settings.security.loginResetTimeMinutes.label', 'Login Reset Time (minutes)')}</span>
-                  <PendingBadge show={isFieldPending('loginResetTimeMinutes')} />
-                </Group>
-              }
-              description={t('admin.settings.security.loginResetTimeMinutes.description', 'Time before failed login attempts are reset')}
-              value={settings?.loginResetTimeMinutes || 0}
-              onChange={(value) => setSettings({ ...settings, loginResetTimeMinutes: Number(value) })}
-              min={0}
-              max={1440}
-              disabled={!loginEnabled}
-            />
-          </div>
-
-          <div>
-            <Select
-              name="xFrameOptions"
-              label={
-                <Group component="span" gap="xs">
-                  <span>{t('admin.settings.security.xFrameOptions.label', 'X-Frame-Options')}</span>
-                  <PendingBadge show={isFieldPending('xFrameOptions')} />
-                </Group>
-              }
-              description={t('admin.settings.security.xFrameOptions.description', 'Controls whether the application can be embedded in iframes')}
-              value={settings?.xFrameOptions || 'DENY'}
-              onChange={(value) => setSettings({ ...settings, xFrameOptions: value || 'DENY' })}
-              data={[
-                { value: 'DENY', label: t('admin.settings.security.xFrameOptions.deny', 'Deny (Prevents all framing)') },
-                { value: 'SAMEORIGIN', label: t('admin.settings.security.xFrameOptions.sameorigin', 'Same Origin (Allow framing from same domain)') },
-                { value: 'DISABLED', label: t('admin.settings.security.xFrameOptions.disabled', 'Disabled (No X-Frame-Options header)') },
-              ]}
-              comboboxProps={{ zIndex: 1400 }}
-              disabled={!loginEnabled}
-            />
-          </div>
-        </Stack>
-      </Paper>
-
-      {/* SSO/SAML Notice */}
-      <Alert
-        variant="light"
-        color="blue"
-        title={t('admin.settings.security.ssoNotice.title', 'Looking for SSO/SAML settings?')}
-        icon={<LocalIcon icon="info-rounded" width="1rem" height="1rem" />}
-      >
-        <Text size="sm">
-          {t('admin.settings.security.ssoNotice.message', 'OAuth2 and SAML2 authentication providers have been moved to the Connections menu for easier management.')}
-        </Text>
-      </Alert>
-
-      {/* JWT Settings */}
-      <Paper withBorder p="md" radius="md">
-        <Stack gap="md">
-          <Text fw={600} size="sm" mb="xs">{t('admin.settings.security.jwt.label', 'JWT Configuration')}</Text>
-
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <div>
-              <Text fw={500} size="sm">{t('admin.settings.security.jwt.persistence.label', 'Enable Key Persistence')}</Text>
-              <Text size="xs" c="dimmed" mt={4}>
-                {t('admin.settings.security.jwt.persistence.description', 'Store JWT keys persistently (required for multi-instance deployments)')}
-              </Text>
-            </div>
-            <Group gap="xs">
-              <Switch
-                name="jwt_persistence"
-                checked={settings?.jwt?.persistence || false}
-                onChange={(e) => setSettings({ ...settings, jwt: { ...settings?.jwt, persistence: e.target.checked } })}
-                disabled={!loginEnabled}
-              />
-              <PendingBadge show={isFieldPending('jwt.persistence')} />
-            </Group>
-          </div>
-
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <div>
-              <Text fw={500} size="sm">{t('admin.settings.security.jwt.enableKeyRotation.label', 'Enable Key Rotation')}</Text>
-              <Text size="xs" c="dimmed" mt={4}>
-                {t('admin.settings.security.jwt.enableKeyRotation.description', 'Automatically rotate JWT signing keys for improved security')}
-              </Text>
-            </div>
-            <Group gap="xs">
-              <Switch
-                name="jwt_enableKeyRotation"
-                checked={settings?.jwt?.enableKeyRotation || false}
-                onChange={(e) => setSettings({ ...settings, jwt: { ...settings?.jwt, enableKeyRotation: e.target.checked } })}
-                disabled={!loginEnabled}
-              />
-              <PendingBadge show={isFieldPending('jwt.enableKeyRotation')} />
-            </Group>
-          </div>
-
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <div>
-              <Text fw={500} size="sm">{t('admin.settings.security.jwt.enableKeyCleanup.label', 'Enable Key Cleanup')}</Text>
-              <Text size="xs" c="dimmed" mt={4}>
-                {t('admin.settings.security.jwt.enableKeyCleanup.description', 'Automatically remove old JWT keys after retention period')}
-              </Text>
-            </div>
-            <Group gap="xs">
-              <Switch
-                name="jwt_enableKeyCleanup"
-                checked={settings?.jwt?.enableKeyCleanup || false}
-                onChange={(e) => setSettings({ ...settings, jwt: { ...settings?.jwt, enableKeyCleanup: e.target.checked } })}
-                disabled={!loginEnabled}
-              />
-              <PendingBadge show={isFieldPending('jwt.enableKeyCleanup')} />
-            </Group>
-          </div>
-
-
-          <div>
-            <NumberInput
-              name="jwt_tokenExpiryMinutes"
-              label={
-                <Group component="span" gap="xs">
-                  <span>{t('admin.settings.security.jwt.tokenExpiryMinutes.label', 'Web Token Expiry (minutes)')}</span>
-                  <PendingBadge show={isFieldPending('jwt.tokenExpiryMinutes')} />
-                </Group>
-              }
-              description={t('admin.settings.security.jwt.tokenExpiryMinutes.description', 'Access token lifetime in minutes for web clients (default: 1440 = 24 hours)')}
-              value={settings?.jwt?.tokenExpiryMinutes || 1440}
-              onChange={(value) => setSettings({ ...settings, jwt: { ...settings?.jwt, tokenExpiryMinutes: Number(value) } })}
-              min={1}
-              max={43200}
-              disabled={!loginEnabled}
-            />
-          </div>
-
-          <div>
-            <NumberInput
-              name="jwt_desktopTokenExpiryMinutes"
-              label={
-                <Group component="span" gap="xs">
-                  <span>{t('admin.settings.security.jwt.desktopTokenExpiryMinutes.label', 'Desktop Token Expiry (minutes)')}</span>
-                  <PendingBadge show={isFieldPending('jwt.desktopTokenExpiryMinutes')} />
-                </Group>
-              }
-              description={t('admin.settings.security.jwt.desktopTokenExpiryMinutes.description', 'Access token lifetime in minutes for desktop clients. Desktop apps automatically detected via User-Agent and receive longer sessions for better UX (default: 43200 = 30 days)')}
-              value={settings?.jwt?.desktopTokenExpiryMinutes || 43200}
-              onChange={(value) => setSettings({ ...settings, jwt: { ...settings?.jwt, desktopTokenExpiryMinutes: Number(value) } })}
-              min={1}
-              max={525600}
-              disabled={!loginEnabled}
-            />
-          </div>
-
-          <div>
-            <NumberInput
-              name="jwt_allowedClockSkewSeconds"
-              label={
-                <Group component="span" gap="xs">
-                  <span>{t('admin.settings.security.jwt.allowedClockSkewSeconds.label', 'Clock Skew Tolerance (seconds)')}</span>
-                  <PendingBadge show={isFieldPending('jwt.allowedClockSkewSeconds')} />
-                </Group>
-              }
-              description={t('admin.settings.security.jwt.allowedClockSkewSeconds.description', 'Tolerance for client/server time drift during token validation (default: 60 seconds)')}
-              value={settings?.jwt?.allowedClockSkewSeconds ?? 60}
-              onChange={(value) => setSettings({ ...settings, jwt: { ...settings?.jwt, allowedClockSkewSeconds: Number(value) } })}
-              min={0}
-              max={300}
-              disabled={!loginEnabled}
-            />
-          </div>
-
-          <div>
-            <NumberInput
-              name="jwt_refreshGraceMinutes"
-              label={
-                <Group component="span" gap="xs">
-                  <span>{t('admin.settings.security.jwt.refreshGraceMinutes.label', 'Refresh Grace Period (minutes)')}</span>
-                  <PendingBadge show={isFieldPending('jwt.refreshGraceMinutes')} />
-                </Group>
-              }
-              description={t('admin.settings.security.jwt.refreshGraceMinutes.description', 'Allow token refresh within this many minutes after expiry (default: 15 minutes, max 3 attempts)')}
-              value={settings?.jwt?.refreshGraceMinutes ?? 15}
-              onChange={(value) => setSettings({ ...settings, jwt: { ...settings?.jwt, refreshGraceMinutes: Number(value) } })}
-              min={0}
-              max={120}
-              disabled={!loginEnabled}
-            />
-          </div>
-
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <div>
-              <Text fw={500} size="sm">{t('admin.settings.security.jwt.secureCookie.label', 'Secure Cookie')}</Text>
-              <Text size="xs" c="dimmed" mt={4}>
-                {t('admin.settings.security.jwt.secureCookie.description', 'Require HTTPS for JWT cookies (recommended for production)')}
-              </Text>
-            </div>
-            <Group gap="xs">
-              <Switch
-                name="jwt_secureCookie"
-                checked={settings?.jwt?.secureCookie || false}
-                onChange={(e) => setSettings({ ...settings, jwt: { ...settings?.jwt, secureCookie: e.target.checked } })}
-                disabled={!loginEnabled}
-              />
-              <PendingBadge show={isFieldPending('jwt.secureCookie')} />
-            </Group>
-          </div>
-        </Stack>
-      </Paper>
-
-      {/* Audit Logging - Enterprise Feature */}
-      <Paper withBorder p="md" radius="md">
-        <Stack gap="md">
-          <Group justify="space-between" align="center">
-            <Text fw={600} size="sm">{t('admin.settings.security.audit.label', 'Audit Logging')}</Text>
-            <Badge color="grape" size="sm">ENTERPRISE</Badge>
-          </Group>
-
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <div>
-              <Text fw={500} size="sm">{t('admin.settings.security.audit.enabled.label', 'Enable Audit Logging')}</Text>
-              <Text size="xs" c="dimmed" mt={4}>
-                {t('admin.settings.security.audit.enabled.description', 'Track user actions and system events for compliance and security monitoring')}
-              </Text>
-            </div>
-            <Group gap="xs">
-              <Switch
-                name="audit_enabled"
-                checked={settings?.audit?.enabled || false}
-                onChange={(e) => setSettings({ ...settings, audit: { ...settings?.audit, enabled: e.target.checked } })}
-                disabled={!loginEnabled}
-              />
-              <PendingBadge show={isFieldPending('audit.enabled')} />
-            </Group>
-          </div>
-
-          <div>
-            <NumberInput
-              name="audit_level"
-              label={
-                <Group component="span" gap="xs">
-                  <span>{t('admin.settings.security.audit.level.label', 'Audit Level')}</span>
-                  <PendingBadge show={isFieldPending('audit.level')} />
-                </Group>
-              }
-              description={t('admin.settings.security.audit.level.description', '0=OFF, 1=BASIC, 2=STANDARD, 3=VERBOSE')}
-              value={settings?.audit?.level || 2}
-              onChange={(value) => setSettings({ ...settings, audit: { ...settings?.audit, level: Number(value) } })}
-              min={0}
-              max={3}
-              disabled={!loginEnabled}
-            />
-          </div>
-
-          <div>
-            <NumberInput
-              name="audit_retentionDays"
-              label={
-                <Group component="span" gap="xs">
-                  <span>{t('admin.settings.security.audit.retentionDays.label', 'Audit Retention (days)')}</span>
-                  <PendingBadge show={isFieldPending('audit.retentionDays')} />
-                </Group>
-              }
-              description={t('admin.settings.security.audit.retentionDays.description', 'Number of days to retain audit logs')}
-              value={settings?.audit?.retentionDays || 90}
-              onChange={(value) => setSettings({ ...settings, audit: { ...settings?.audit, retentionDays: Number(value) } })}
-              min={1}
-              max={3650}
-              disabled={!loginEnabled}
-            />
-          </div>
-
-          <Alert color="yellow" icon={<LocalIcon icon="info" />} title={t('admin.settings.security.audit.advancedOptions.title', 'Advanced Options')}>
-            {t('admin.settings.security.audit.advancedOptions.description', 'The following options increase processing time and memory usage. Enable only if truly needed.')}
-          </Alert>
-
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <div>
-              <Text fw={500} size="sm">{t('admin.settings.security.audit.captureFileHash.label', 'Capture File Hash')}</Text>
-              <Text size="xs" c="dimmed" mt={4}>
-                {t('admin.settings.security.audit.captureFileHash.description', 'Store MD5 hash of processed files for audit trail verification')}
-              </Text>
-            </div>
-            <Group gap="xs">
-              <Switch
-                name="audit_captureFileHash"
-                checked={settings?.audit?.captureFileHash || false}
-                onChange={(e) => setSettings({ ...settings, audit: { ...settings?.audit, captureFileHash: e.target.checked } })}
-                disabled={!loginEnabled}
-              />
-              <PendingBadge show={isFieldPending('audit.captureFileHash')} />
-            </Group>
-          </div>
-
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <div>
-              <Text fw={500} size="sm">{t('admin.settings.security.audit.capturePdfAuthor.label', 'Capture PDF Author')}</Text>
-              <Text size="xs" c="dimmed" mt={4}>
-                {t('admin.settings.security.audit.capturePdfAuthor.description', 'Extract author field from PDF documents during processing')}
-              </Text>
-            </div>
-            <Group gap="xs">
-              <Switch
-                name="audit_capturePdfAuthor"
-                checked={settings?.audit?.capturePdfAuthor || false}
-                onChange={(e) => setSettings({ ...settings, audit: { ...settings?.audit, capturePdfAuthor: e.target.checked } })}
-                disabled={!loginEnabled}
-              />
-              <PendingBadge show={isFieldPending('audit.capturePdfAuthor')} />
-            </Group>
-          </div>
-
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <div>
-              <Text fw={500} size="sm">{t('admin.settings.security.audit.captureOperationResults.label', 'Capture Operation Results')}</Text>
-              <Text size="xs" c="dimmed" mt={4}>
-                {t('admin.settings.security.audit.captureOperationResults.description', 'Store output file information and processing results in audit logs')}
-              </Text>
-            </div>
-            <Group gap="xs">
-              <Switch
-                name="audit_captureOperationResults"
-                checked={settings?.audit?.captureOperationResults || false}
-                onChange={(e) => setSettings({ ...settings, audit: { ...settings?.audit, captureOperationResults: e.target.checked } })}
-                disabled={!loginEnabled}
-              />
-              <PendingBadge show={isFieldPending('audit.captureOperationResults')} />
-            </Group>
-          </div>
-        </Stack>
-      </Paper>
-
-      {/* HTML URL Security */}
-      <Paper withBorder p="md" radius="md">
-        <Stack gap="md">
-          <div>
-            <Text fw={600} size="sm" mb="xs">{t('admin.settings.security.htmlUrlSecurity.label', 'HTML URL Security')}</Text>
-            <Text size="xs" c="dimmed">
-              {t('admin.settings.security.htmlUrlSecurity.description', 'Configure URL access restrictions for HTML processing to prevent SSRF attacks')}
+        {/* Authentication Settings */}
+        <Paper withBorder p="md" radius="md">
+          <Stack gap="md">
+            <Text fw={600} size="sm" mb="xs">
+              {t("admin.settings.security.authentication", "Authentication")}
             </Text>
-          </div>
 
-          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-            <div>
-              <Text fw={500} size="sm">{t('admin.settings.security.htmlUrlSecurity.enabled.label', 'Enable URL Security')}</Text>
-              <Text size="xs" c="dimmed" mt={4}>
-                {t('admin.settings.security.htmlUrlSecurity.enabled.description', 'Enable URL security restrictions for HTML to PDF conversions')}
-              </Text>
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+              <div>
+                <Text fw={500} size="sm">
+                  {t("admin.settings.security.enableLogin.label", "Enable Login")}
+                </Text>
+                <Text size="xs" c="dimmed" mt={4}>
+                  {t(
+                    "admin.settings.security.enableLogin.description",
+                    "Require users to log in before accessing the application",
+                  )}
+                </Text>
+              </div>
+              <Group gap="xs">
+                <Switch
+                  name="enableLogin"
+                  checked={settings?.enableLogin || false}
+                  onChange={(e) => setSettings({ ...settings, enableLogin: e.target.checked })}
+                  disabled={!loginEnabled}
+                />
+                <PendingBadge show={isFieldPending("enableLogin")} />
+              </Group>
             </div>
-            <Group gap="xs">
-              <Switch
-                name="html_urlSecurity_enabled"
-                checked={settings?.html?.urlSecurity?.enabled || false}
-                onChange={(e) => setSettings({
-                  ...settings,
-                  html: {
-                    ...settings?.html,
-                    urlSecurity: { ...settings?.html?.urlSecurity, enabled: e.target.checked }
-                  }
-                })}
+
+            <div>
+              <Select
+                name="loginMethod"
+                label={t("admin.settings.security.loginMethod.label", "Login Method")}
+                description={t(
+                  "admin.settings.security.loginMethod.description",
+                  "The authentication method to use for user login",
+                )}
+                value={settings?.loginMethod || "all"}
+                onChange={(value) => setSettings({ ...settings, loginMethod: value || "all" })}
+                data={[
+                  { value: "all", label: t("admin.settings.security.loginMethod.all", "All Methods") },
+                  { value: "normal", label: t("admin.settings.security.loginMethod.normal", "Username/Password Only") },
+                  { value: "oauth2", label: t("admin.settings.security.loginMethod.oauth2", "OAuth2 Only") },
+                  { value: "saml2", label: t("admin.settings.security.loginMethod.saml2", "SAML2 Only") },
+                ]}
+                comboboxProps={{ zIndex: 1400 }}
                 disabled={!loginEnabled}
               />
-              <PendingBadge show={isFieldPending('html.urlSecurity.enabled')} />
-            </Group>
-          </div>
-
-          <div>
-            <Select
-              name="html_urlSecurity_level"
-              label={
-                <Group component="span" gap="xs">
-                  <span>{t('admin.settings.security.htmlUrlSecurity.level.label', 'Security Level')}</span>
-                  <PendingBadge show={isFieldPending('html.urlSecurity.level')} />
+              {isFieldPending("loginMethod") && (
+                <Group mt="xs">
+                  <PendingBadge show={true} />
                 </Group>
-              }
-              description={t('admin.settings.security.htmlUrlSecurity.level.description', 'MAX: whitelist only, MEDIUM: block internal networks, OFF: no restrictions')}
-              value={settings?.html?.urlSecurity?.level || 'MEDIUM'}
-              onChange={(value) => setSettings({
-                ...settings,
-                html: {
-                  ...settings?.html,
-                  urlSecurity: { ...settings?.html?.urlSecurity, level: value || 'MEDIUM' }
+              )}
+            </div>
+
+            <div>
+              <NumberInput
+                name="loginAttemptCount"
+                label={
+                  <Group component="span" gap="xs">
+                    <span>{t("admin.settings.security.loginAttemptCount.label", "Login Attempt Limit")}</span>
+                    <PendingBadge show={isFieldPending("loginAttemptCount")} />
+                  </Group>
                 }
-              })}
-              data={[
-                { value: 'MAX', label: t('admin.settings.security.htmlUrlSecurity.level.max', 'Maximum (Whitelist Only)') },
-                { value: 'MEDIUM', label: t('admin.settings.security.htmlUrlSecurity.level.medium', 'Medium (Block Internal)') },
-                { value: 'OFF', label: t('admin.settings.security.htmlUrlSecurity.level.off', 'Off (No Restrictions)') },
-              ]}
-              comboboxProps={{ zIndex: 1400 }}
-              disabled={!loginEnabled}
-            />
-          </div>
+                description={t(
+                  "admin.settings.security.loginAttemptCount.description",
+                  "Maximum number of failed login attempts before account lockout",
+                )}
+                value={settings?.loginAttemptCount || 0}
+                onChange={(value) => setSettings({ ...settings, loginAttemptCount: Number(value) })}
+                min={0}
+                max={100}
+                disabled={!loginEnabled}
+              />
+            </div>
 
-          <Accordion variant="separated">
-            <Accordion.Item value="advanced">
-              <Accordion.Control>{t('admin.settings.security.htmlUrlSecurity.advanced', 'Advanced Settings')}</Accordion.Control>
-              <Accordion.Panel>
-                <Stack gap="md">
-                  {/* Allowed Domains */}
-                  <div>
-                    <Textarea
-                      name="html_urlSecurity_allowedDomains"
-                      label={
-                        <Group component="span" gap="xs">
-                          <span>{t('admin.settings.security.htmlUrlSecurity.allowedDomains.label', 'Allowed Domains (Whitelist)')}</span>
-                          <PendingBadge show={isFieldPending('html.urlSecurity.allowedDomains')} />
-                        </Group>
-                      }
-                      description={t('admin.settings.security.htmlUrlSecurity.allowedDomains.description', 'One domain per line (e.g., cdn.example.com). Only these domains allowed when level is MAX')}
-                      value={settings?.html?.urlSecurity?.allowedDomains?.join('\n') || ''}
-                      onChange={(e) => setSettings({
-                        ...settings,
-                        html: {
-                          ...settings?.html,
-                          urlSecurity: {
-                            ...settings?.html?.urlSecurity,
-                            allowedDomains: e.target.value ? e.target.value.split('\n').filter(d => d.trim()) : []
-                          }
+            <div>
+              <NumberInput
+                name="loginResetTimeMinutes"
+                label={
+                  <Group component="span" gap="xs">
+                    <span>{t("admin.settings.security.loginResetTimeMinutes.label", "Login Reset Time (minutes)")}</span>
+                    <PendingBadge show={isFieldPending("loginResetTimeMinutes")} />
+                  </Group>
+                }
+                description={t(
+                  "admin.settings.security.loginResetTimeMinutes.description",
+                  "Time before failed login attempts are reset",
+                )}
+                value={settings?.loginResetTimeMinutes || 0}
+                onChange={(value) => setSettings({ ...settings, loginResetTimeMinutes: Number(value) })}
+                min={0}
+                max={1440}
+                disabled={!loginEnabled}
+              />
+            </div>
+
+            <div>
+              <Select
+                name="xFrameOptions"
+                label={
+                  <Group component="span" gap="xs">
+                    <span>{t("admin.settings.security.xFrameOptions.label", "X-Frame-Options")}</span>
+                    <PendingBadge show={isFieldPending("xFrameOptions")} />
+                  </Group>
+                }
+                description={t(
+                  "admin.settings.security.xFrameOptions.description",
+                  "Controls whether the application can be embedded in iframes",
+                )}
+                value={settings?.xFrameOptions || "DENY"}
+                onChange={(value) => setSettings({ ...settings, xFrameOptions: value || "DENY" })}
+                data={[
+                  { value: "DENY", label: t("admin.settings.security.xFrameOptions.deny", "Deny (Prevents all framing)") },
+                  {
+                    value: "SAMEORIGIN",
+                    label: t(
+                      "admin.settings.security.xFrameOptions.sameorigin",
+                      "Same Origin (Allow framing from same domain)",
+                    ),
+                  },
+                  {
+                    value: "DISABLED",
+                    label: t("admin.settings.security.xFrameOptions.disabled", "Disabled (No X-Frame-Options header)"),
+                  },
+                ]}
+                comboboxProps={{ zIndex: 1400 }}
+                disabled={!loginEnabled}
+              />
+            </div>
+          </Stack>
+        </Paper>
+
+        {/* SSO/SAML Notice */}
+        <Alert
+          variant="light"
+          color="blue"
+          title={t("admin.settings.security.ssoNotice.title", "Looking for SSO/SAML settings?")}
+          icon={<LocalIcon icon="info-rounded" width="1rem" height="1rem" />}
+        >
+          <Text size="sm">
+            {t(
+              "admin.settings.security.ssoNotice.message",
+              "OAuth2 and SAML2 authentication providers have been moved to the Connections menu for easier management.",
+            )}
+          </Text>
+        </Alert>
+
+        {/* JWT Settings */}
+        <Paper withBorder p="md" radius="md">
+          <Stack gap="md">
+            <Text fw={600} size="sm" mb="xs">
+              {t("admin.settings.security.jwt.label", "JWT Configuration")}
+            </Text>
+
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+              <div>
+                <Text fw={500} size="sm">
+                  {t("admin.settings.security.jwt.persistence.label", "Enable Key Persistence")}
+                </Text>
+                <Text size="xs" c="dimmed" mt={4}>
+                  {t(
+                    "admin.settings.security.jwt.persistence.description",
+                    "Store JWT keys persistently (required for multi-instance deployments)",
+                  )}
+                </Text>
+              </div>
+              <Group gap="xs">
+                <Switch
+                  name="jwt_persistence"
+                  checked={settings?.jwt?.persistence || false}
+                  onChange={(e) => setSettings({ ...settings, jwt: { ...settings?.jwt, persistence: e.target.checked } })}
+                  disabled={!loginEnabled}
+                />
+                <PendingBadge show={isFieldPending("jwt.persistence")} />
+              </Group>
+            </div>
+
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+              <div>
+                <Text fw={500} size="sm">
+                  {t("admin.settings.security.jwt.enableKeyRotation.label", "Enable Key Rotation")}
+                </Text>
+                <Text size="xs" c="dimmed" mt={4}>
+                  {t(
+                    "admin.settings.security.jwt.enableKeyRotation.description",
+                    "Automatically rotate JWT signing keys for improved security",
+                  )}
+                </Text>
+              </div>
+              <Group gap="xs">
+                <Switch
+                  name="jwt_enableKeyRotation"
+                  checked={settings?.jwt?.enableKeyRotation || false}
+                  onChange={(e) =>
+                    setSettings({ ...settings, jwt: { ...settings?.jwt, enableKeyRotation: e.target.checked } })
+                  }
+                  disabled={!loginEnabled}
+                />
+                <PendingBadge show={isFieldPending("jwt.enableKeyRotation")} />
+              </Group>
+            </div>
+
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+              <div>
+                <Text fw={500} size="sm">
+                  {t("admin.settings.security.jwt.enableKeyCleanup.label", "Enable Key Cleanup")}
+                </Text>
+                <Text size="xs" c="dimmed" mt={4}>
+                  {t(
+                    "admin.settings.security.jwt.enableKeyCleanup.description",
+                    "Automatically remove old JWT keys after retention period",
+                  )}
+                </Text>
+              </div>
+              <Group gap="xs">
+                <Switch
+                  name="jwt_enableKeyCleanup"
+                  checked={settings?.jwt?.enableKeyCleanup || false}
+                  onChange={(e) => setSettings({ ...settings, jwt: { ...settings?.jwt, enableKeyCleanup: e.target.checked } })}
+                  disabled={!loginEnabled}
+                />
+                <PendingBadge show={isFieldPending("jwt.enableKeyCleanup")} />
+              </Group>
+            </div>
+
+            <div>
+              <NumberInput
+                name="jwt_tokenExpiryMinutes"
+                label={
+                  <Group component="span" gap="xs">
+                    <span>{t("admin.settings.security.jwt.tokenExpiryMinutes.label", "Web Token Expiry (minutes)")}</span>
+                    <PendingBadge show={isFieldPending("jwt.tokenExpiryMinutes")} />
+                  </Group>
+                }
+                description={t(
+                  "admin.settings.security.jwt.tokenExpiryMinutes.description",
+                  "Access token lifetime in minutes for web clients (default: 1440 = 24 hours)",
+                )}
+                value={settings?.jwt?.tokenExpiryMinutes || 1440}
+                onChange={(value) =>
+                  setSettings({ ...settings, jwt: { ...settings?.jwt, tokenExpiryMinutes: Number(value) } })
+                }
+                min={1}
+                max={43200}
+                disabled={!loginEnabled}
+              />
+            </div>
+
+            <div>
+              <NumberInput
+                name="jwt_desktopTokenExpiryMinutes"
+                label={
+                  <Group component="span" gap="xs">
+                    <span>
+                      {t("admin.settings.security.jwt.desktopTokenExpiryMinutes.label", "Desktop Token Expiry (minutes)")}
+                    </span>
+                    <PendingBadge show={isFieldPending("jwt.desktopTokenExpiryMinutes")} />
+                  </Group>
+                }
+                description={t(
+                  "admin.settings.security.jwt.desktopTokenExpiryMinutes.description",
+                  "Access token lifetime in minutes for desktop clients. Desktop apps automatically detected via User-Agent and receive longer sessions for better UX (default: 43200 = 30 days)",
+                )}
+                value={settings?.jwt?.desktopTokenExpiryMinutes || 43200}
+                onChange={(value) =>
+                  setSettings({ ...settings, jwt: { ...settings?.jwt, desktopTokenExpiryMinutes: Number(value) } })
+                }
+                min={1}
+                max={525600}
+                disabled={!loginEnabled}
+              />
+            </div>
+
+            <div>
+              <NumberInput
+                name="jwt_allowedClockSkewSeconds"
+                label={
+                  <Group component="span" gap="xs">
+                    <span>
+                      {t("admin.settings.security.jwt.allowedClockSkewSeconds.label", "Clock Skew Tolerance (seconds)")}
+                    </span>
+                    <PendingBadge show={isFieldPending("jwt.allowedClockSkewSeconds")} />
+                  </Group>
+                }
+                description={t(
+                  "admin.settings.security.jwt.allowedClockSkewSeconds.description",
+                  "Tolerance for client/server time drift during token validation (default: 60 seconds)",
+                )}
+                value={settings?.jwt?.allowedClockSkewSeconds ?? 60}
+                onChange={(value) =>
+                  setSettings({ ...settings, jwt: { ...settings?.jwt, allowedClockSkewSeconds: Number(value) } })
+                }
+                min={0}
+                max={300}
+                disabled={!loginEnabled}
+              />
+            </div>
+
+            <div>
+              <NumberInput
+                name="jwt_refreshGraceMinutes"
+                label={
+                  <Group component="span" gap="xs">
+                    <span>{t("admin.settings.security.jwt.refreshGraceMinutes.label", "Refresh Grace Period (minutes)")}</span>
+                    <PendingBadge show={isFieldPending("jwt.refreshGraceMinutes")} />
+                  </Group>
+                }
+                description={t(
+                  "admin.settings.security.jwt.refreshGraceMinutes.description",
+                  "Allow token refresh within this many minutes after expiry (default: 15 minutes, max 3 attempts)",
+                )}
+                value={settings?.jwt?.refreshGraceMinutes ?? 15}
+                onChange={(value) =>
+                  setSettings({ ...settings, jwt: { ...settings?.jwt, refreshGraceMinutes: Number(value) } })
+                }
+                min={0}
+                max={120}
+                disabled={!loginEnabled}
+              />
+            </div>
+
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+              <div>
+                <Text fw={500} size="sm">
+                  {t("admin.settings.security.jwt.secureCookie.label", "Secure Cookie")}
+                </Text>
+                <Text size="xs" c="dimmed" mt={4}>
+                  {t(
+                    "admin.settings.security.jwt.secureCookie.description",
+                    "Require HTTPS for JWT cookies (recommended for production)",
+                  )}
+                </Text>
+              </div>
+              <Group gap="xs">
+                <Switch
+                  name="jwt_secureCookie"
+                  checked={settings?.jwt?.secureCookie || false}
+                  onChange={(e) => setSettings({ ...settings, jwt: { ...settings?.jwt, secureCookie: e.target.checked } })}
+                  disabled={!loginEnabled}
+                />
+                <PendingBadge show={isFieldPending("jwt.secureCookie")} />
+              </Group>
+            </div>
+          </Stack>
+        </Paper>
+
+        {/* Audit Logging - Enterprise Feature */}
+        <Paper withBorder p="md" radius="md">
+          <Stack gap="md">
+            <Group justify="space-between" align="center">
+              <Text fw={600} size="sm">
+                {t("admin.settings.security.audit.label", "Audit Logging")}
+              </Text>
+              <Badge color="grape" size="sm">
+                ENTERPRISE
+              </Badge>
+            </Group>
+
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+              <div>
+                <Text fw={500} size="sm">
+                  {t("admin.settings.security.audit.enabled.label", "Enable Audit Logging")}
+                </Text>
+                <Text size="xs" c="dimmed" mt={4}>
+                  {t(
+                    "admin.settings.security.audit.enabled.description",
+                    "Track user actions and system events for compliance and security monitoring",
+                  )}
+                </Text>
+              </div>
+              <Group gap="xs">
+                <Switch
+                  name="audit_enabled"
+                  checked={settings?.audit?.enabled || false}
+                  onChange={(e) => setSettings({ ...settings, audit: { ...settings?.audit, enabled: e.target.checked } })}
+                  disabled={!loginEnabled}
+                />
+                <PendingBadge show={isFieldPending("audit.enabled")} />
+              </Group>
+            </div>
+
+            <div>
+              <NumberInput
+                name="audit_level"
+                label={
+                  <Group component="span" gap="xs">
+                    <span>{t("admin.settings.security.audit.level.label", "Audit Level")}</span>
+                    <PendingBadge show={isFieldPending("audit.level")} />
+                  </Group>
+                }
+                description={t("admin.settings.security.audit.level.description", "0=OFF, 1=BASIC, 2=STANDARD, 3=VERBOSE")}
+                value={settings?.audit?.level || 2}
+                onChange={(value) => setSettings({ ...settings, audit: { ...settings?.audit, level: Number(value) } })}
+                min={0}
+                max={3}
+                disabled={!loginEnabled}
+              />
+            </div>
+
+            <div>
+              <NumberInput
+                name="audit_retentionDays"
+                label={
+                  <Group component="span" gap="xs">
+                    <span>{t("admin.settings.security.audit.retentionDays.label", "Audit Retention (days)")}</span>
+                    <PendingBadge show={isFieldPending("audit.retentionDays")} />
+                  </Group>
+                }
+                description={t(
+                  "admin.settings.security.audit.retentionDays.description",
+                  "Number of days to retain audit logs",
+                )}
+                value={settings?.audit?.retentionDays || 90}
+                onChange={(value) => setSettings({ ...settings, audit: { ...settings?.audit, retentionDays: Number(value) } })}
+                min={1}
+                max={3650}
+                disabled={!loginEnabled}
+              />
+            </div>
+
+            <Alert
+              color="yellow"
+              icon={<LocalIcon icon="info" />}
+              title={t("admin.settings.security.audit.advancedOptions.title", "Advanced Options")}
+            >
+              {t(
+                "admin.settings.security.audit.advancedOptions.description",
+                "The following options increase processing time and memory usage. Enable only if truly needed.",
+              )}
+            </Alert>
+
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+              <div>
+                <Text fw={500} size="sm">
+                  {t("admin.settings.security.audit.captureFileHash.label", "Capture File Hash")}
+                </Text>
+                <Text size="xs" c="dimmed" mt={4}>
+                  {t(
+                    "admin.settings.security.audit.captureFileHash.description",
+                    "Store MD5 hash of processed files for audit trail verification",
+                  )}
+                </Text>
+              </div>
+              <Group gap="xs">
+                <Switch
+                  name="audit_captureFileHash"
+                  checked={settings?.audit?.captureFileHash || false}
+                  onChange={(e) =>
+                    setSettings({ ...settings, audit: { ...settings?.audit, captureFileHash: e.target.checked } })
+                  }
+                  disabled={!loginEnabled}
+                />
+                <PendingBadge show={isFieldPending("audit.captureFileHash")} />
+              </Group>
+            </div>
+
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+              <div>
+                <Text fw={500} size="sm">
+                  {t("admin.settings.security.audit.capturePdfAuthor.label", "Capture PDF Author")}
+                </Text>
+                <Text size="xs" c="dimmed" mt={4}>
+                  {t(
+                    "admin.settings.security.audit.capturePdfAuthor.description",
+                    "Extract author field from PDF documents during processing",
+                  )}
+                </Text>
+              </div>
+              <Group gap="xs">
+                <Switch
+                  name="audit_capturePdfAuthor"
+                  checked={settings?.audit?.capturePdfAuthor || false}
+                  onChange={(e) =>
+                    setSettings({ ...settings, audit: { ...settings?.audit, capturePdfAuthor: e.target.checked } })
+                  }
+                  disabled={!loginEnabled}
+                />
+                <PendingBadge show={isFieldPending("audit.capturePdfAuthor")} />
+              </Group>
+            </div>
+
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+              <div>
+                <Text fw={500} size="sm">
+                  {t("admin.settings.security.audit.captureOperationResults.label", "Capture Operation Results")}
+                </Text>
+                <Text size="xs" c="dimmed" mt={4}>
+                  {t(
+                    "admin.settings.security.audit.captureOperationResults.description",
+                    "Store output file information and processing results in audit logs",
+                  )}
+                </Text>
+              </div>
+              <Group gap="xs">
+                <Switch
+                  name="audit_captureOperationResults"
+                  checked={settings?.audit?.captureOperationResults || false}
+                  onChange={(e) =>
+                    setSettings({ ...settings, audit: { ...settings?.audit, captureOperationResults: e.target.checked } })
+                  }
+                  disabled={!loginEnabled}
+                />
+                <PendingBadge show={isFieldPending("audit.captureOperationResults")} />
+              </Group>
+            </div>
+          </Stack>
+        </Paper>
+
+        {/* HTML URL Security */}
+        <Paper withBorder p="md" radius="md">
+          <Stack gap="md">
+            <div>
+              <Text fw={600} size="sm" mb="xs">
+                {t("admin.settings.security.htmlUrlSecurity.label", "HTML URL Security")}
+              </Text>
+              <Text size="xs" c="dimmed">
+                {t(
+                  "admin.settings.security.htmlUrlSecurity.description",
+                  "Configure URL access restrictions for HTML processing to prevent SSRF attacks",
+                )}
+              </Text>
+            </div>
+
+            <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+              <div>
+                <Text fw={500} size="sm">
+                  {t("admin.settings.security.htmlUrlSecurity.enabled.label", "Enable URL Security")}
+                </Text>
+                <Text size="xs" c="dimmed" mt={4}>
+                  {t(
+                    "admin.settings.security.htmlUrlSecurity.enabled.description",
+                    "Enable URL security restrictions for HTML to PDF conversions",
+                  )}
+                </Text>
+              </div>
+              <Group gap="xs">
+                <Switch
+                  name="html_urlSecurity_enabled"
+                  checked={settings?.html?.urlSecurity?.enabled || false}
+                  onChange={(e) =>
+                    setSettings({
+                      ...settings,
+                      html: {
+                        ...settings?.html,
+                        urlSecurity: { ...settings?.html?.urlSecurity, enabled: e.target.checked },
+                      },
+                    })
+                  }
+                  disabled={!loginEnabled}
+                />
+                <PendingBadge show={isFieldPending("html.urlSecurity.enabled")} />
+              </Group>
+            </div>
+
+            <div>
+              <Select
+                name="html_urlSecurity_level"
+                label={
+                  <Group component="span" gap="xs">
+                    <span>{t("admin.settings.security.htmlUrlSecurity.level.label", "Security Level")}</span>
+                    <PendingBadge show={isFieldPending("html.urlSecurity.level")} />
+                  </Group>
+                }
+                description={t(
+                  "admin.settings.security.htmlUrlSecurity.level.description",
+                  "MAX: whitelist only, MEDIUM: block internal networks, OFF: no restrictions",
+                )}
+                value={settings?.html?.urlSecurity?.level || "MEDIUM"}
+                onChange={(value) =>
+                  setSettings({
+                    ...settings,
+                    html: {
+                      ...settings?.html,
+                      urlSecurity: { ...settings?.html?.urlSecurity, level: value || "MEDIUM" },
+                    },
+                  })
+                }
+                data={[
+                  { value: "MAX", label: t("admin.settings.security.htmlUrlSecurity.level.max", "Maximum (Whitelist Only)") },
+                  {
+                    value: "MEDIUM",
+                    label: t("admin.settings.security.htmlUrlSecurity.level.medium", "Medium (Block Internal)"),
+                  },
+                  { value: "OFF", label: t("admin.settings.security.htmlUrlSecurity.level.off", "Off (No Restrictions)") },
+                ]}
+                comboboxProps={{ zIndex: 1400 }}
+                disabled={!loginEnabled}
+              />
+            </div>
+
+            <Accordion variant="separated">
+              <Accordion.Item value="advanced">
+                <Accordion.Control>
+                  {t("admin.settings.security.htmlUrlSecurity.advanced", "Advanced Settings")}
+                </Accordion.Control>
+                <Accordion.Panel>
+                  <Stack gap="md">
+                    {/* Allowed Domains */}
+                    <div>
+                      <Textarea
+                        name="html_urlSecurity_allowedDomains"
+                        label={
+                          <Group component="span" gap="xs">
+                            <span>
+                              {t(
+                                "admin.settings.security.htmlUrlSecurity.allowedDomains.label",
+                                "Allowed Domains (Whitelist)",
+                              )}
+                            </span>
+                            <PendingBadge show={isFieldPending("html.urlSecurity.allowedDomains")} />
+                          </Group>
                         }
-                      })}
-                      placeholder="cdn.example.com&#10;images.google.com"
-                      minRows={3}
-                      autosize
-                      disabled={!loginEnabled}
-                    />
-                  </div>
-
-                  {/* Blocked Domains */}
-                  <div>
-                    <Textarea
-                      name="html_urlSecurity_blockedDomains"
-                      label={
-                        <Group component="span" gap="xs">
-                          <span>{t('admin.settings.security.htmlUrlSecurity.blockedDomains.label', 'Blocked Domains (Blacklist)')}</span>
-                          <PendingBadge show={isFieldPending('html.urlSecurity.blockedDomains')} />
-                        </Group>
-                      }
-                      description={t('admin.settings.security.htmlUrlSecurity.blockedDomains.description', 'One domain per line (e.g., malicious.com). Additional domains to block')}
-                      value={settings?.html?.urlSecurity?.blockedDomains?.join('\n') || ''}
-                      onChange={(e) => setSettings({
-                        ...settings,
-                        html: {
-                          ...settings?.html,
-                          urlSecurity: {
-                            ...settings?.html?.urlSecurity,
-                            blockedDomains: e.target.value ? e.target.value.split('\n').filter(d => d.trim()) : []
-                          }
+                        description={t(
+                          "admin.settings.security.htmlUrlSecurity.allowedDomains.description",
+                          "One domain per line (e.g., cdn.example.com). Only these domains allowed when level is MAX",
+                        )}
+                        value={settings?.html?.urlSecurity?.allowedDomains?.join("\n") || ""}
+                        onChange={(e) =>
+                          setSettings({
+                            ...settings,
+                            html: {
+                              ...settings?.html,
+                              urlSecurity: {
+                                ...settings?.html?.urlSecurity,
+                                allowedDomains: e.target.value ? e.target.value.split("\n").filter((d) => d.trim()) : [],
+                              },
+                            },
+                          })
                         }
-                      })}
-                      placeholder="malicious.com&#10;evil.org"
-                      minRows={3}
-                      autosize
-                      disabled={!loginEnabled}
-                    />
-                  </div>
+                        placeholder="cdn.example.com&#10;images.google.com"
+                        minRows={3}
+                        autosize
+                        disabled={!loginEnabled}
+                      />
+                    </div>
 
-                  {/* Internal TLDs */}
-                  <div>
-                    <Textarea
-                      name="html_urlSecurity_internalTlds"
-                      label={
-                        <Group component="span" gap="xs">
-                          <span>{t('admin.settings.security.htmlUrlSecurity.internalTlds.label', 'Internal TLDs')}</span>
-                          <PendingBadge show={isFieldPending('html.urlSecurity.internalTlds')} />
-                        </Group>
-                      }
-                      description={t('admin.settings.security.htmlUrlSecurity.internalTlds.description', 'One TLD per line (e.g., .local, .internal). Block domains with these TLD patterns')}
-                      value={settings?.html?.urlSecurity?.internalTlds?.join('\n') || ''}
-                      onChange={(e) => setSettings({
-                        ...settings,
-                        html: {
-                          ...settings?.html,
-                          urlSecurity: {
-                            ...settings?.html?.urlSecurity,
-                            internalTlds: e.target.value ? e.target.value.split('\n').filter(d => d.trim()) : []
-                          }
+                    {/* Blocked Domains */}
+                    <div>
+                      <Textarea
+                        name="html_urlSecurity_blockedDomains"
+                        label={
+                          <Group component="span" gap="xs">
+                            <span>
+                              {t(
+                                "admin.settings.security.htmlUrlSecurity.blockedDomains.label",
+                                "Blocked Domains (Blacklist)",
+                              )}
+                            </span>
+                            <PendingBadge show={isFieldPending("html.urlSecurity.blockedDomains")} />
+                          </Group>
                         }
-                      })}
-                      placeholder=".local&#10;.internal&#10;.corp&#10;.home"
-                      minRows={3}
-                      autosize
-                      disabled={!loginEnabled}
-                    />
-                  </div>
-
-                  {/* Network Blocking Options */}
-                  <Text fw={600} size="sm" mt="md">{t('admin.settings.security.htmlUrlSecurity.networkBlocking', 'Network Blocking')}</Text>
-
-                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-                    <div>
-                      <Text fw={500} size="sm">{t('admin.settings.security.htmlUrlSecurity.blockPrivateNetworks.label', 'Block Private Networks')}</Text>
-                      <Text size="xs" c="dimmed" mt={4}>
-                        {t('admin.settings.security.htmlUrlSecurity.blockPrivateNetworks.description', 'Block RFC 1918 private networks (10.x.x.x, 192.168.x.x, 172.16-31.x.x)')}
-                      </Text>
-                    </div>
-                    <Group gap="xs">
-                      <Switch
-                        name="html_urlSecurity_blockPrivateNetworks"
-                        checked={settings?.html?.urlSecurity?.blockPrivateNetworks || false}
-                        onChange={(e) => setSettings({
-                          ...settings,
-                          html: {
-                            ...settings?.html,
-                            urlSecurity: { ...settings?.html?.urlSecurity, blockPrivateNetworks: e.target.checked }
-                          }
-                        })}
+                        description={t(
+                          "admin.settings.security.htmlUrlSecurity.blockedDomains.description",
+                          "One domain per line (e.g., malicious.com). Additional domains to block",
+                        )}
+                        value={settings?.html?.urlSecurity?.blockedDomains?.join("\n") || ""}
+                        onChange={(e) =>
+                          setSettings({
+                            ...settings,
+                            html: {
+                              ...settings?.html,
+                              urlSecurity: {
+                                ...settings?.html?.urlSecurity,
+                                blockedDomains: e.target.value ? e.target.value.split("\n").filter((d) => d.trim()) : [],
+                              },
+                            },
+                          })
+                        }
+                        placeholder="malicious.com&#10;evil.org"
+                        minRows={3}
+                        autosize
                         disabled={!loginEnabled}
                       />
-                      <PendingBadge show={isFieldPending('html.urlSecurity.blockPrivateNetworks')} />
-                    </Group>
-                  </div>
-
-                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-                    <div>
-                      <Text fw={500} size="sm">{t('admin.settings.security.htmlUrlSecurity.blockLocalhost.label', 'Block Localhost')}</Text>
-                      <Text size="xs" c="dimmed" mt={4}>
-                        {t('admin.settings.security.htmlUrlSecurity.blockLocalhost.description', 'Block localhost and loopback addresses (127.x.x.x, ::1)')}
-                      </Text>
                     </div>
-                    <Group gap="xs">
-                      <Switch
-                        name="html_urlSecurity_blockLocalhost"
-                        checked={settings?.html?.urlSecurity?.blockLocalhost || false}
-                        onChange={(e) => setSettings({
-                          ...settings,
-                          html: {
-                            ...settings?.html,
-                            urlSecurity: { ...settings?.html?.urlSecurity, blockLocalhost: e.target.checked }
-                          }
-                        })}
+
+                    {/* Internal TLDs */}
+                    <div>
+                      <Textarea
+                        name="html_urlSecurity_internalTlds"
+                        label={
+                          <Group component="span" gap="xs">
+                            <span>{t("admin.settings.security.htmlUrlSecurity.internalTlds.label", "Internal TLDs")}</span>
+                            <PendingBadge show={isFieldPending("html.urlSecurity.internalTlds")} />
+                          </Group>
+                        }
+                        description={t(
+                          "admin.settings.security.htmlUrlSecurity.internalTlds.description",
+                          "One TLD per line (e.g., .local, .internal). Block domains with these TLD patterns",
+                        )}
+                        value={settings?.html?.urlSecurity?.internalTlds?.join("\n") || ""}
+                        onChange={(e) =>
+                          setSettings({
+                            ...settings,
+                            html: {
+                              ...settings?.html,
+                              urlSecurity: {
+                                ...settings?.html?.urlSecurity,
+                                internalTlds: e.target.value ? e.target.value.split("\n").filter((d) => d.trim()) : [],
+                              },
+                            },
+                          })
+                        }
+                        placeholder=".local&#10;.internal&#10;.corp&#10;.home"
+                        minRows={3}
+                        autosize
                         disabled={!loginEnabled}
                       />
-                      <PendingBadge show={isFieldPending('html.urlSecurity.blockLocalhost')} />
-                    </Group>
-                  </div>
-
-                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-                    <div>
-                      <Text fw={500} size="sm">{t('admin.settings.security.htmlUrlSecurity.blockLinkLocal.label', 'Block Link-Local Addresses')}</Text>
-                      <Text size="xs" c="dimmed" mt={4}>
-                        {t('admin.settings.security.htmlUrlSecurity.blockLinkLocal.description', 'Block link-local addresses (169.254.x.x, fe80::/10)')}
-                      </Text>
                     </div>
-                    <Group gap="xs">
-                      <Switch
-                        name="html_urlSecurity_blockLinkLocal"
-                        checked={settings?.html?.urlSecurity?.blockLinkLocal || false}
-                        onChange={(e) => setSettings({
-                          ...settings,
-                          html: {
-                            ...settings?.html,
-                            urlSecurity: { ...settings?.html?.urlSecurity, blockLinkLocal: e.target.checked }
-                          }
-                        })}
-                        disabled={!loginEnabled}
-                      />
-                      <PendingBadge show={isFieldPending('html.urlSecurity.blockLinkLocal')} />
-                    </Group>
-                  </div>
 
-                  <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
-                    <div>
-                      <Text fw={500} size="sm">{t('admin.settings.security.htmlUrlSecurity.blockCloudMetadata.label', 'Block Cloud Metadata Endpoints')}</Text>
-                      <Text size="xs" c="dimmed" mt={4}>
-                        {t('admin.settings.security.htmlUrlSecurity.blockCloudMetadata.description', 'Block cloud provider metadata endpoints (169.254.169.254)')}
-                      </Text>
-                    </div>
-                    <Group gap="xs">
-                      <Switch
-                        name="html_urlSecurity_blockCloudMetadata"
-                        checked={settings?.html?.urlSecurity?.blockCloudMetadata || false}
-                        onChange={(e) => setSettings({
-                          ...settings,
-                          html: {
-                            ...settings?.html,
-                            urlSecurity: { ...settings?.html?.urlSecurity, blockCloudMetadata: e.target.checked }
+                    {/* Network Blocking Options */}
+                    <Text fw={600} size="sm" mt="md">
+                      {t("admin.settings.security.htmlUrlSecurity.networkBlocking", "Network Blocking")}
+                    </Text>
+
+                    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+                      <div>
+                        <Text fw={500} size="sm">
+                          {t("admin.settings.security.htmlUrlSecurity.blockPrivateNetworks.label", "Block Private Networks")}
+                        </Text>
+                        <Text size="xs" c="dimmed" mt={4}>
+                          {t(
+                            "admin.settings.security.htmlUrlSecurity.blockPrivateNetworks.description",
+                            "Block RFC 1918 private networks (10.x.x.x, 192.168.x.x, 172.16-31.x.x)",
+                          )}
+                        </Text>
+                      </div>
+                      <Group gap="xs">
+                        <Switch
+                          name="html_urlSecurity_blockPrivateNetworks"
+                          checked={settings?.html?.urlSecurity?.blockPrivateNetworks || false}
+                          onChange={(e) =>
+                            setSettings({
+                              ...settings,
+                              html: {
+                                ...settings?.html,
+                                urlSecurity: { ...settings?.html?.urlSecurity, blockPrivateNetworks: e.target.checked },
+                              },
+                            })
                           }
-                        })}
-                        disabled={!loginEnabled}
-                      />
-                      <PendingBadge show={isFieldPending('html.urlSecurity.blockCloudMetadata')} />
-                    </Group>
-                  </div>
-                </Stack>
-              </Accordion.Panel>
-            </Accordion.Item>
-          </Accordion>
-        </Stack>
-      </Paper>
+                          disabled={!loginEnabled}
+                        />
+                        <PendingBadge show={isFieldPending("html.urlSecurity.blockPrivateNetworks")} />
+                      </Group>
+                    </div>
+
+                    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+                      <div>
+                        <Text fw={500} size="sm">
+                          {t("admin.settings.security.htmlUrlSecurity.blockLocalhost.label", "Block Localhost")}
+                        </Text>
+                        <Text size="xs" c="dimmed" mt={4}>
+                          {t(
+                            "admin.settings.security.htmlUrlSecurity.blockLocalhost.description",
+                            "Block localhost and loopback addresses (127.x.x.x, ::1)",
+                          )}
+                        </Text>
+                      </div>
+                      <Group gap="xs">
+                        <Switch
+                          name="html_urlSecurity_blockLocalhost"
+                          checked={settings?.html?.urlSecurity?.blockLocalhost || false}
+                          onChange={(e) =>
+                            setSettings({
+                              ...settings,
+                              html: {
+                                ...settings?.html,
+                                urlSecurity: { ...settings?.html?.urlSecurity, blockLocalhost: e.target.checked },
+                              },
+                            })
+                          }
+                          disabled={!loginEnabled}
+                        />
+                        <PendingBadge show={isFieldPending("html.urlSecurity.blockLocalhost")} />
+                      </Group>
+                    </div>
+
+                    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+                      <div>
+                        <Text fw={500} size="sm">
+                          {t("admin.settings.security.htmlUrlSecurity.blockLinkLocal.label", "Block Link-Local Addresses")}
+                        </Text>
+                        <Text size="xs" c="dimmed" mt={4}>
+                          {t(
+                            "admin.settings.security.htmlUrlSecurity.blockLinkLocal.description",
+                            "Block link-local addresses (169.254.x.x, fe80::/10)",
+                          )}
+                        </Text>
+                      </div>
+                      <Group gap="xs">
+                        <Switch
+                          name="html_urlSecurity_blockLinkLocal"
+                          checked={settings?.html?.urlSecurity?.blockLinkLocal || false}
+                          onChange={(e) =>
+                            setSettings({
+                              ...settings,
+                              html: {
+                                ...settings?.html,
+                                urlSecurity: { ...settings?.html?.urlSecurity, blockLinkLocal: e.target.checked },
+                              },
+                            })
+                          }
+                          disabled={!loginEnabled}
+                        />
+                        <PendingBadge show={isFieldPending("html.urlSecurity.blockLinkLocal")} />
+                      </Group>
+                    </div>
+
+                    <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between" }}>
+                      <div>
+                        <Text fw={500} size="sm">
+                          {t(
+                            "admin.settings.security.htmlUrlSecurity.blockCloudMetadata.label",
+                            "Block Cloud Metadata Endpoints",
+                          )}
+                        </Text>
+                        <Text size="xs" c="dimmed" mt={4}>
+                          {t(
+                            "admin.settings.security.htmlUrlSecurity.blockCloudMetadata.description",
+                            "Block cloud provider metadata endpoints (169.254.169.254)",
+                          )}
+                        </Text>
+                      </div>
+                      <Group gap="xs">
+                        <Switch
+                          name="html_urlSecurity_blockCloudMetadata"
+                          checked={settings?.html?.urlSecurity?.blockCloudMetadata || false}
+                          onChange={(e) =>
+                            setSettings({
+                              ...settings,
+                              html: {
+                                ...settings?.html,
+                                urlSecurity: { ...settings?.html?.urlSecurity, blockCloudMetadata: e.target.checked },
+                              },
+                            })
+                          }
+                          disabled={!loginEnabled}
+                        />
+                        <PendingBadge show={isFieldPending("html.urlSecurity.blockCloudMetadata")} />
+                      </Group>
+                    </div>
+                  </Stack>
+                </Accordion.Panel>
+              </Accordion.Item>
+            </Accordion>
+          </Stack>
+        </Paper>
       </Stack>
 
       <SettingsStickyFooter
@@ -889,11 +1095,7 @@ export default function AdminSecuritySection() {
       />
 
       {/* Restart Confirmation Modal */}
-      <RestartConfirmationModal
-        opened={restartModalOpened}
-        onClose={closeRestartModal}
-        onRestart={restartServer}
-      />
+      <RestartConfirmationModal opened={restartModalOpened} onClose={closeRestartModal} onRestart={restartServer} />
     </div>
   );
 }
diff --git a/frontend/src/proprietary/components/shared/config/configSections/AdminStorageSharingSection.tsx b/frontend/src/proprietary/components/shared/config/configSections/AdminStorageSharingSection.tsx
index 86b858b64c..428f7febe1 100644
--- a/frontend/src/proprietary/components/shared/config/configSections/AdminStorageSharingSection.tsx
+++ b/frontend/src/proprietary/components/shared/config/configSections/AdminStorageSharingSection.tsx
@@ -1,17 +1,17 @@
-import { useCallback, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Anchor, Badge, Group, Loader, Paper, Stack, Switch, Text } from '@mantine/core';
-import { useNavigate } from 'react-router-dom';
-import { alert } from '@app/components/toast';
-import RestartConfirmationModal from '@app/components/shared/config/RestartConfirmationModal';
-import { useRestartServer } from '@app/components/shared/config/useRestartServer';
-import { useAdminSettings } from '@app/hooks/useAdminSettings';
-import PendingBadge from '@app/components/shared/config/PendingBadge';
-import apiClient from '@app/services/apiClient';
-import { useLoginRequired } from '@app/hooks/useLoginRequired';
-import LoginRequiredBanner from '@app/components/shared/config/LoginRequiredBanner';
-import { SettingsStickyFooter } from '@app/components/shared/config/SettingsStickyFooter';
-import { useSettingsDirty } from '@app/hooks/useSettingsDirty';
+import { useCallback, useEffect } from "react";
+import { useTranslation } from "react-i18next";
+import { Anchor, Badge, Group, Loader, Paper, Stack, Switch, Text } from "@mantine/core";
+import { useNavigate } from "react-router-dom";
+import { alert } from "@app/components/toast";
+import RestartConfirmationModal from "@app/components/shared/config/RestartConfirmationModal";
+import { useRestartServer } from "@app/components/shared/config/useRestartServer";
+import { useAdminSettings } from "@app/hooks/useAdminSettings";
+import PendingBadge from "@app/components/shared/config/PendingBadge";
+import apiClient from "@app/services/apiClient";
+import { useLoginRequired } from "@app/hooks/useLoginRequired";
+import LoginRequiredBanner from "@app/components/shared/config/LoginRequiredBanner";
+import { SettingsStickyFooter } from "@app/components/shared/config/SettingsStickyFooter";
+import { useSettingsDirty } from "@app/hooks/useSettingsDirty";
 
 interface StorageSharingSettingsData {
   enabled?: boolean;
@@ -37,47 +37,40 @@ export default function AdminStorageSharingSection() {
   const { loginEnabled, validateLoginEnabled, getDisabledStyles } = useLoginRequired();
   const { restartModalOpened, showRestartModal, closeRestartModal, restartServer } = useRestartServer();
 
-  const {
-    settings,
-    setSettings,
-    loading,
-    saving,
-    fetchSettings,
-    saveSettings,
-    isFieldPending,
-  } = useAdminSettings<StorageSharingSettingsData>({
-    sectionName: 'storage',
-    fetchTransformer: async () => {
-      const [storageResponse, systemResponse, mailResponse] = await Promise.all([
-        apiClient.get('/api/v1/admin/settings/section/storage'),
-        apiClient.get('/api/v1/admin/settings/section/system'),
-        apiClient.get('/api/v1/admin/settings/section/mail'),
-      ]);
+  const { settings, setSettings, loading, saving, fetchSettings, saveSettings, isFieldPending } =
+    useAdminSettings<StorageSharingSettingsData>({
+      sectionName: "storage",
+      fetchTransformer: async () => {
+        const [storageResponse, systemResponse, mailResponse] = await Promise.all([
+          apiClient.get("/api/v1/admin/settings/section/storage"),
+          apiClient.get("/api/v1/admin/settings/section/system"),
+          apiClient.get("/api/v1/admin/settings/section/mail"),
+        ]);
 
-      const storageData = storageResponse.data || {};
-      const systemData = systemResponse.data || {};
-      const mailData = mailResponse.data || {};
+        const storageData = storageResponse.data || {};
+        const systemData = systemResponse.data || {};
+        const mailData = mailResponse.data || {};
 
-      return {
-        ...storageData,
-        system: { frontendUrl: systemData.frontendUrl || '' },
-        mail: { enabled: mailData.enabled || false },
-      };
-    },
-    saveTransformer: (currentSettings) => ({
-      sectionData: {
-        enabled: currentSettings.enabled,
-        sharing: {
-          enabled: currentSettings.sharing?.enabled,
-          linkEnabled: currentSettings.sharing?.linkEnabled,
-          emailEnabled: currentSettings.sharing?.emailEnabled,
-        },
-        signing: {
-          enabled: currentSettings.signing?.enabled,
-        },
+        return {
+          ...storageData,
+          system: { frontendUrl: systemData.frontendUrl || "" },
+          mail: { enabled: mailData.enabled || false },
+        };
       },
-    }),
-  });
+      saveTransformer: (currentSettings) => ({
+        sectionData: {
+          enabled: currentSettings.enabled,
+          sharing: {
+            enabled: currentSettings.sharing?.enabled,
+            linkEnabled: currentSettings.sharing?.linkEnabled,
+            emailEnabled: currentSettings.sharing?.emailEnabled,
+          },
+          signing: {
+            enabled: currentSettings.signing?.enabled,
+          },
+        },
+      }),
+    });
 
   useEffect(() => {
     if (loginEnabled) {
@@ -106,9 +99,9 @@ export default function AdminStorageSharingSection() {
       showRestartModal();
     } catch (_error) {
       alert({
-        alertType: 'error',
-        title: t('admin.error', 'Error'),
-        body: t('admin.settings.saveError', 'Failed to save settings'),
+        alertType: "error",
+        title: t("admin.error", "Error"),
+        body: t("admin.settings.saveError", "Failed to save settings"),
       });
     }
   };
@@ -123,190 +116,203 @@ export default function AdminStorageSharingSection() {
 
   return (
     <div className="settings-section-container">
-    <div className="settings-section-content">
-    <Stack gap="sm">
-      <LoginRequiredBanner show={!loginEnabled} />
-      <div>
-        <Group gap="xs" align="center">
-          <Text fw={600} size="lg">{t('admin.settings.storage.title', 'File Storage & Sharing')}</Text>
-          <Badge size="sm" variant="light" color="orange">{t('toolPanel.alpha', 'Alpha')}</Badge>
-        </Group>
-        <Text size="sm" c="dimmed">
-          {t('admin.settings.storage.description', 'Control server storage and sharing options.')}
-        </Text>
+      <div className="settings-section-content">
+        <Stack gap="sm">
+          <LoginRequiredBanner show={!loginEnabled} />
+          <div>
+            <Group gap="xs" align="center">
+              <Text fw={600} size="lg">
+                {t("admin.settings.storage.title", "File Storage & Sharing")}
+              </Text>
+              <Badge size="sm" variant="light" color="orange">
+                {t("toolPanel.alpha", "Alpha")}
+              </Badge>
+            </Group>
+            <Text size="sm" c="dimmed">
+              {t("admin.settings.storage.description", "Control server storage and sharing options.")}
+            </Text>
+          </div>
+
+          <Paper withBorder p="sm" radius="md">
+            <Group justify="space-between" align="flex-start" wrap="nowrap">
+              <div>
+                <Group gap="xs" align="center">
+                  <Text fw={600} size="sm">
+                    {t("admin.settings.storage.enabled.label", "Enable Server File Storage")}
+                  </Text>
+                  {isFieldPending("enabled") && <PendingBadge show={true} />}
+                </Group>
+                <Text size="xs" c="dimmed">
+                  {t("admin.settings.storage.enabled.description", "Allow users to store files on the server.")}
+                </Text>
+              </div>
+              <Switch
+                checked={storageEnabled}
+                onChange={(e) => setSettings({ ...settings, enabled: e.currentTarget.checked })}
+                disabled={!loginEnabled}
+                styles={getDisabledStyles()}
+                style={{ flexShrink: 0 }}
+              />
+            </Group>
+          </Paper>
+
+          <Paper withBorder p="sm" radius="md">
+            <Group justify="space-between" align="flex-start" wrap="nowrap">
+              <div>
+                <Group gap="xs" align="center">
+                  <Text fw={600} size="sm">
+                    {t("admin.settings.storage.sharing.enabled.label", "Enable Sharing")}
+                  </Text>
+                  {isFieldPending("sharing.enabled") && <PendingBadge show={true} />}
+                </Group>
+                <Text size="xs" c="dimmed">
+                  {t("admin.settings.storage.sharing.enabled.description", "Allow users to share stored files.")}
+                </Text>
+              </div>
+              <Switch
+                checked={settings.sharing?.enabled ?? false}
+                onChange={(e) =>
+                  setSettings({
+                    ...settings,
+                    sharing: { ...settings.sharing, enabled: e.currentTarget.checked },
+                  })
+                }
+                disabled={!loginEnabled || !storageEnabled}
+                styles={getDisabledStyles()}
+                style={{ flexShrink: 0 }}
+              />
+            </Group>
+          </Paper>
+
+          <Paper withBorder p="sm" radius="md">
+            <Group justify="space-between" align="flex-start" wrap="nowrap">
+              <div>
+                <Group gap="xs" align="center">
+                  <Text fw={600} size="sm">
+                    {t("admin.settings.storage.sharing.links.label", "Enable Share Links")}
+                  </Text>
+                  {isFieldPending("sharing.linkEnabled") && <PendingBadge show={true} />}
+                </Group>
+                <Text size="xs" c="dimmed">
+                  {t("admin.settings.storage.sharing.links.description", "Allow sharing via signed-in links.")}
+                </Text>
+                {!frontendUrlConfigured && (
+                  <Text size="xs" c="orange">
+                    {t("admin.settings.storage.sharing.links.frontendUrlNote", "Requires a Frontend URL. ")}
+                    <Anchor
+                      href="#"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        navigate("/settings/adminGeneral#frontendUrl");
+                      }}
+                      c="orange"
+                      td="underline"
+                    >
+                      {t("admin.settings.storage.sharing.links.frontendUrlLink", "Configure in System Settings")}
+                    </Anchor>
+                  </Text>
+                )}
+              </div>
+              <Switch
+                checked={settings.sharing?.linkEnabled ?? false}
+                onChange={(e) =>
+                  setSettings({
+                    ...settings,
+                    sharing: { ...settings.sharing, linkEnabled: e.currentTarget.checked },
+                  })
+                }
+                disabled={!loginEnabled || !sharingEnabled || !frontendUrlConfigured}
+                styles={getDisabledStyles()}
+                style={{ flexShrink: 0 }}
+              />
+            </Group>
+          </Paper>
+
+          <Paper withBorder p="sm" radius="md">
+            <Group justify="space-between" align="flex-start" wrap="nowrap">
+              <div>
+                <Group gap="xs" align="center">
+                  <Text fw={600} size="sm">
+                    {t("admin.settings.storage.sharing.email.label", "Enable Email Sharing")}
+                  </Text>
+                  {isFieldPending("sharing.emailEnabled") && <PendingBadge show={true} />}
+                </Group>
+                <Text size="xs" c="dimmed">
+                  {t("admin.settings.storage.sharing.email.description", "Allow sharing with email addresses.")}
+                </Text>
+                {!mailEnabled && (
+                  <Text size="xs" c="orange">
+                    {t("admin.settings.storage.sharing.email.mailNote", "Requires mail configuration. ")}
+                    <Anchor
+                      href="#"
+                      onClick={(e) => {
+                        e.preventDefault();
+                        navigate("/settings/adminConnections");
+                      }}
+                      c="orange"
+                      td="underline"
+                    >
+                      {t("admin.settings.storage.sharing.email.mailLink", "Configure Mail Settings")}
+                    </Anchor>
+                  </Text>
+                )}
+              </div>
+              <Switch
+                checked={settings.sharing?.emailEnabled ?? false}
+                onChange={(e) =>
+                  setSettings({
+                    ...settings,
+                    sharing: { ...settings.sharing, emailEnabled: e.currentTarget.checked },
+                  })
+                }
+                disabled={!loginEnabled || !sharingEnabled || !mailEnabled}
+                styles={getDisabledStyles()}
+                style={{ flexShrink: 0 }}
+              />
+            </Group>
+          </Paper>
+
+          <Paper withBorder p="sm" radius="md">
+            <Group justify="space-between" align="flex-start" wrap="nowrap">
+              <div>
+                <Group gap="xs" align="center">
+                  <Text fw={600} size="sm">
+                    {t("admin.settings.storage.signing.enabled.label", "Enable Group Signing")}
+                  </Text>
+                  {isFieldPending("signing.enabled") && <PendingBadge show={true} />}
+                </Group>
+                <Text size="xs" c="dimmed">
+                  {t(
+                    "admin.settings.storage.signing.enabled.description",
+                    "Allow users to create multi-participant document signing sessions. Requires server file storage to be enabled.",
+                  )}
+                </Text>
+              </div>
+              <Switch
+                checked={settings.signing?.enabled ?? false}
+                onChange={(e) =>
+                  setSettings({
+                    ...settings,
+                    signing: { ...settings.signing, enabled: e.currentTarget.checked },
+                  })
+                }
+                disabled={!loginEnabled || !storageEnabled}
+                styles={getDisabledStyles()}
+                style={{ flexShrink: 0 }}
+              />
+            </Group>
+          </Paper>
+
+          <RestartConfirmationModal opened={restartModalOpened} onClose={closeRestartModal} onRestart={restartServer} />
+        </Stack>
       </div>
-
-      <Paper withBorder p="sm" radius="md">
-        <Group justify="space-between" align="flex-start" wrap="nowrap">
-          <div>
-            <Group gap="xs" align="center">
-              <Text fw={600} size="sm">{t('admin.settings.storage.enabled.label', 'Enable Server File Storage')}</Text>
-              {isFieldPending('enabled') && <PendingBadge show={true} />}
-            </Group>
-            <Text size="xs" c="dimmed">
-              {t('admin.settings.storage.enabled.description', 'Allow users to store files on the server.')}
-            </Text>
-          </div>
-          <Switch
-            checked={storageEnabled}
-            onChange={(e) => setSettings({ ...settings, enabled: e.currentTarget.checked })}
-            disabled={!loginEnabled}
-            styles={getDisabledStyles()}
-            style={{ flexShrink: 0 }}
-          />
-        </Group>
-      </Paper>
-
-      <Paper withBorder p="sm" radius="md">
-        <Group justify="space-between" align="flex-start" wrap="nowrap">
-          <div>
-            <Group gap="xs" align="center">
-              <Text fw={600} size="sm">{t('admin.settings.storage.sharing.enabled.label', 'Enable Sharing')}</Text>
-              {isFieldPending('sharing.enabled') && <PendingBadge show={true} />}
-            </Group>
-            <Text size="xs" c="dimmed">
-              {t('admin.settings.storage.sharing.enabled.description', 'Allow users to share stored files.')}
-            </Text>
-          </div>
-          <Switch
-            checked={settings.sharing?.enabled ?? false}
-            onChange={(e) =>
-              setSettings({
-                ...settings,
-                sharing: { ...settings.sharing, enabled: e.currentTarget.checked },
-              })
-            }
-            disabled={!loginEnabled || !storageEnabled}
-            styles={getDisabledStyles()}
-            style={{ flexShrink: 0 }}
-          />
-        </Group>
-      </Paper>
-
-      <Paper withBorder p="sm" radius="md">
-        <Group justify="space-between" align="flex-start" wrap="nowrap">
-          <div>
-            <Group gap="xs" align="center">
-              <Text fw={600} size="sm">{t('admin.settings.storage.sharing.links.label', 'Enable Share Links')}</Text>
-              {isFieldPending('sharing.linkEnabled') && <PendingBadge show={true} />}
-            </Group>
-            <Text size="xs" c="dimmed">
-              {t('admin.settings.storage.sharing.links.description', 'Allow sharing via signed-in links.')}
-            </Text>
-            {!frontendUrlConfigured && (
-              <Text size="xs" c="orange">
-                {t('admin.settings.storage.sharing.links.frontendUrlNote', 'Requires a Frontend URL. ')}
-                <Anchor
-                  href="#"
-                  onClick={(e) => {
-                    e.preventDefault();
-                    navigate('/settings/adminGeneral#frontendUrl');
-                  }}
-                  c="orange"
-                  td="underline"
-                >
-                  {t('admin.settings.storage.sharing.links.frontendUrlLink', 'Configure in System Settings')}
-                </Anchor>
-              </Text>
-            )}
-          </div>
-          <Switch
-            checked={settings.sharing?.linkEnabled ?? false}
-            onChange={(e) =>
-              setSettings({
-                ...settings,
-                sharing: { ...settings.sharing, linkEnabled: e.currentTarget.checked },
-              })
-            }
-            disabled={!loginEnabled || !sharingEnabled || !frontendUrlConfigured}
-            styles={getDisabledStyles()}
-            style={{ flexShrink: 0 }}
-          />
-        </Group>
-      </Paper>
-
-      <Paper withBorder p="sm" radius="md">
-        <Group justify="space-between" align="flex-start" wrap="nowrap">
-          <div>
-            <Group gap="xs" align="center">
-              <Text fw={600} size="sm">{t('admin.settings.storage.sharing.email.label', 'Enable Email Sharing')}</Text>
-              {isFieldPending('sharing.emailEnabled') && <PendingBadge show={true} />}
-            </Group>
-            <Text size="xs" c="dimmed">
-              {t('admin.settings.storage.sharing.email.description', 'Allow sharing with email addresses.')}
-            </Text>
-            {!mailEnabled && (
-              <Text size="xs" c="orange">
-                {t('admin.settings.storage.sharing.email.mailNote', 'Requires mail configuration. ')}
-                <Anchor
-                  href="#"
-                  onClick={(e) => {
-                    e.preventDefault();
-                    navigate('/settings/adminConnections');
-                  }}
-                  c="orange"
-                  td="underline"
-                >
-                  {t('admin.settings.storage.sharing.email.mailLink', 'Configure Mail Settings')}
-                </Anchor>
-              </Text>
-            )}
-          </div>
-          <Switch
-            checked={settings.sharing?.emailEnabled ?? false}
-            onChange={(e) =>
-              setSettings({
-                ...settings,
-                sharing: { ...settings.sharing, emailEnabled: e.currentTarget.checked },
-              })
-            }
-            disabled={!loginEnabled || !sharingEnabled || !mailEnabled}
-            styles={getDisabledStyles()}
-            style={{ flexShrink: 0 }}
-          />
-        </Group>
-      </Paper>
-
-      <Paper withBorder p="sm" radius="md">
-        <Group justify="space-between" align="flex-start" wrap="nowrap">
-          <div>
-            <Group gap="xs" align="center">
-              <Text fw={600} size="sm">{t('admin.settings.storage.signing.enabled.label', 'Enable Group Signing')}</Text>
-              {isFieldPending('signing.enabled') && <PendingBadge show={true} />}
-            </Group>
-            <Text size="xs" c="dimmed">
-              {t('admin.settings.storage.signing.enabled.description', 'Allow users to create multi-participant document signing sessions. Requires server file storage to be enabled.')}
-            </Text>
-          </div>
-          <Switch
-            checked={settings.signing?.enabled ?? false}
-            onChange={(e) =>
-              setSettings({
-                ...settings,
-                signing: { ...settings.signing, enabled: e.currentTarget.checked },
-              })
-            }
-            disabled={!loginEnabled || !storageEnabled}
-            styles={getDisabledStyles()}
-            style={{ flexShrink: 0 }}
-          />
-        </Group>
-      </Paper>
-
-      <RestartConfirmationModal
-        opened={restartModalOpened}
-        onClose={closeRestartModal}
-        onRestart={restartServer}
+      <SettingsStickyFooter
+        isDirty={isDirty}
+        saving={saving}
+        loginEnabled={loginEnabled}
+        onSave={handleSave}
+        onDiscard={handleDiscard}
       />
-    </Stack>
-    </div>
-    <SettingsStickyFooter
-      isDirty={isDirty}
-      saving={saving}
-      loginEnabled={loginEnabled}
-      onSave={handleSave}
-      onDiscard={handleDiscard}
-    />
     </div>
   );
 }
diff --git a/frontend/src/proprietary/components/shared/config/configSections/AdminUsageSection.tsx b/frontend/src/proprietary/components/shared/config/configSections/AdminUsageSection.tsx
index a0db28e137..eb3a9edf6d 100644
--- a/frontend/src/proprietary/components/shared/config/configSections/AdminUsageSection.tsx
+++ b/frontend/src/proprietary/components/shared/config/configSections/AdminUsageSection.tsx
@@ -1,59 +1,59 @@
-import React, { useState, useEffect, useCallback } from 'react';
-import { Stack, Group, Text, Button, SegmentedControl, Loader, Alert, Card } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { useNavigate } from 'react-router-dom';
-import usageAnalyticsService, { EndpointStatisticsResponse } from '@app/services/usageAnalyticsService';
-import UsageAnalyticsChart from '@app/components/shared/config/configSections/usage/UsageAnalyticsChart';
-import UsageAnalyticsTable from '@app/components/shared/config/configSections/usage/UsageAnalyticsTable';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { useLoginRequired } from '@app/hooks/useLoginRequired';
-import LoginRequiredBanner from '@app/components/shared/config/LoginRequiredBanner';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
-import EnterpriseRequiredBanner from '@app/components/shared/config/EnterpriseRequiredBanner';
+import React, { useState, useEffect, useCallback } from "react";
+import { Stack, Group, Text, Button, SegmentedControl, Loader, Alert, Card } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router-dom";
+import usageAnalyticsService, { EndpointStatisticsResponse } from "@app/services/usageAnalyticsService";
+import UsageAnalyticsChart from "@app/components/shared/config/configSections/usage/UsageAnalyticsChart";
+import UsageAnalyticsTable from "@app/components/shared/config/configSections/usage/UsageAnalyticsTable";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { useLoginRequired } from "@app/hooks/useLoginRequired";
+import LoginRequiredBanner from "@app/components/shared/config/LoginRequiredBanner";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
+import EnterpriseRequiredBanner from "@app/components/shared/config/EnterpriseRequiredBanner";
 
 const AdminUsageSection: React.FC = () => {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const { loginEnabled } = useLoginRequired();
   const { config } = useAppConfig();
-  const licenseType = config?.license ?? 'NORMAL';
-  const hasEnterpriseLicense = licenseType === 'ENTERPRISE';
+  const licenseType = config?.license ?? "NORMAL";
+  const hasEnterpriseLicense = licenseType === "ENTERPRISE";
   const showDemoData = !loginEnabled || !hasEnterpriseLicense;
   const [data, setData] = useState<EndpointStatisticsResponse | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [displayMode, setDisplayMode] = useState<'top10' | 'top20' | 'all'>('top10');
-  const [dataType, setDataType] = useState<'all' | 'api' | 'ui'>('api');
+  const [displayMode, setDisplayMode] = useState<"top10" | "top20" | "all">("top10");
+  const [dataType, setDataType] = useState<"all" | "api" | "ui">("api");
 
   const buildDemoUsageData = useCallback((): EndpointStatisticsResponse => {
     const totalVisits = 15847;
     const allEndpoints = [
-      { endpoint: 'merge-pdfs', visits: 3245, percentage: (3245 / totalVisits) * 100 },
-      { endpoint: 'compress-pdf', visits: 2891, percentage: (2891 / totalVisits) * 100 },
-      { endpoint: 'pdf-to-img', visits: 2156, percentage: (2156 / totalVisits) * 100 },
-      { endpoint: 'split-pdf', visits: 1834, percentage: (1834 / totalVisits) * 100 },
-      { endpoint: 'rotate-pdf', visits: 1523, percentage: (1523 / totalVisits) * 100 },
-      { endpoint: 'ocr-pdf', visits: 1287, percentage: (1287 / totalVisits) * 100 },
-      { endpoint: 'add-watermark', visits: 945, percentage: (945 / totalVisits) * 100 },
-      { endpoint: 'extract-images', visits: 782, percentage: (782 / totalVisits) * 100 },
-      { endpoint: 'add-password', visits: 621, percentage: (621 / totalVisits) * 100 },
-      { endpoint: 'html-to-pdf', visits: 563, percentage: (563 / totalVisits) * 100 },
-      { endpoint: 'remove-password', visits: 487, percentage: (487 / totalVisits) * 100 },
-      { endpoint: 'pdf-to-pdfa', visits: 423, percentage: (423 / totalVisits) * 100 },
-      { endpoint: 'extract-pdf-metadata', visits: 356, percentage: (356 / totalVisits) * 100 },
-      { endpoint: 'add-page-numbers', visits: 298, percentage: (298 / totalVisits) * 100 },
-      { endpoint: 'crop', visits: 245, percentage: (245 / totalVisits) * 100 },
-      { endpoint: 'flatten', visits: 187, percentage: (187 / totalVisits) * 100 },
-      { endpoint: 'sanitize-pdf', visits: 134, percentage: (134 / totalVisits) * 100 },
-      { endpoint: 'auto-split-pdf', visits: 98, percentage: (98 / totalVisits) * 100 },
-      { endpoint: 'scale-pages', visits: 76, percentage: (76 / totalVisits) * 100 },
-      { endpoint: 'compare-pdfs', visits: 42, percentage: (42 / totalVisits) * 100 },
+      { endpoint: "merge-pdfs", visits: 3245, percentage: (3245 / totalVisits) * 100 },
+      { endpoint: "compress-pdf", visits: 2891, percentage: (2891 / totalVisits) * 100 },
+      { endpoint: "pdf-to-img", visits: 2156, percentage: (2156 / totalVisits) * 100 },
+      { endpoint: "split-pdf", visits: 1834, percentage: (1834 / totalVisits) * 100 },
+      { endpoint: "rotate-pdf", visits: 1523, percentage: (1523 / totalVisits) * 100 },
+      { endpoint: "ocr-pdf", visits: 1287, percentage: (1287 / totalVisits) * 100 },
+      { endpoint: "add-watermark", visits: 945, percentage: (945 / totalVisits) * 100 },
+      { endpoint: "extract-images", visits: 782, percentage: (782 / totalVisits) * 100 },
+      { endpoint: "add-password", visits: 621, percentage: (621 / totalVisits) * 100 },
+      { endpoint: "html-to-pdf", visits: 563, percentage: (563 / totalVisits) * 100 },
+      { endpoint: "remove-password", visits: 487, percentage: (487 / totalVisits) * 100 },
+      { endpoint: "pdf-to-pdfa", visits: 423, percentage: (423 / totalVisits) * 100 },
+      { endpoint: "extract-pdf-metadata", visits: 356, percentage: (356 / totalVisits) * 100 },
+      { endpoint: "add-page-numbers", visits: 298, percentage: (298 / totalVisits) * 100 },
+      { endpoint: "crop", visits: 245, percentage: (245 / totalVisits) * 100 },
+      { endpoint: "flatten", visits: 187, percentage: (187 / totalVisits) * 100 },
+      { endpoint: "sanitize-pdf", visits: 134, percentage: (134 / totalVisits) * 100 },
+      { endpoint: "auto-split-pdf", visits: 98, percentage: (98 / totalVisits) * 100 },
+      { endpoint: "scale-pages", visits: 76, percentage: (76 / totalVisits) * 100 },
+      { endpoint: "compare-pdfs", visits: 42, percentage: (42 / totalVisits) * 100 },
     ];
 
     let filteredEndpoints = allEndpoints;
-    if (displayMode === 'top10') {
+    if (displayMode === "top10") {
       filteredEndpoints = allEndpoints.slice(0, 10);
-    } else if (displayMode === 'top20') {
+    } else if (displayMode === "top20") {
       filteredEndpoints = allEndpoints.slice(0, 20);
     }
 
@@ -69,12 +69,12 @@ const AdminUsageSection: React.FC = () => {
       setLoading(true);
       setError(null);
 
-      const limit = displayMode === 'all' ? undefined : displayMode === 'top10' ? 10 : 20;
+      const limit = displayMode === "all" ? undefined : displayMode === "top10" ? 10 : 20;
       const response = await usageAnalyticsService.getEndpointStatistics(limit, dataType);
 
       setData(response);
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to load usage statistics');
+      setError(err instanceof Error ? err.message : "Failed to load usage statistics");
     } finally {
       setLoading(false);
     }
@@ -103,14 +103,14 @@ const AdminUsageSection: React.FC = () => {
 
   const getDisplayModeLabel = () => {
     switch (displayMode) {
-      case 'top10':
-        return t('usage.showing.top10', 'Top 10');
-      case 'top20':
-        return t('usage.showing.top20', 'Top 20');
-      case 'all':
-        return t('usage.showing.all', 'All');
+      case "top10":
+        return t("usage.showing.top10", "Top 10");
+      case "top20":
+        return t("usage.showing.top20", "Top 20");
+      case "all":
+        return t("usage.showing.all", "All");
       default:
-        return '';
+        return "";
     }
   };
 
@@ -120,7 +120,7 @@ const AdminUsageSection: React.FC = () => {
   // Early returns for loading/error states
   if (actualLoading) {
     return (
-      <div style={{ display: 'flex', justifyContent: 'center', padding: '2rem' }}>
+      <div style={{ display: "flex", justifyContent: "center", padding: "2rem" }}>
         <Loader size="lg" />
       </div>
     );
@@ -128,7 +128,7 @@ const AdminUsageSection: React.FC = () => {
 
   if (error) {
     return (
-      <Alert color="red" title={t('usage.error', 'Error loading usage statistics')}>
+      <Alert color="red" title={t("usage.error", "Error loading usage statistics")}>
         {error}
       </Alert>
     );
@@ -136,14 +136,14 @@ const AdminUsageSection: React.FC = () => {
 
   if (!data) {
     return (
-      <Alert color="yellow" title={t('usage.noData', 'No data available')}>
-        {t('usage.noDataMessage', 'No usage statistics are currently available.')}
+      <Alert color="yellow" title={t("usage.noData", "No data available")}>
+        {t("usage.noDataMessage", "No usage statistics are currently available.")}
       </Alert>
     );
   }
 
   const endpoints = (data?.endpoints ?? []).map((endpoint) => ({
-    endpoint: endpoint.endpoint ?? t('usage.table.unknownEndpoint', 'Unknown endpoint'),
+    endpoint: endpoint.endpoint ?? t("usage.table.unknownEndpoint", "Unknown endpoint"),
     visits: Number.isFinite(endpoint.visits) ? Math.max(0, endpoint.visits) : 0,
     percentage: Number.isFinite(endpoint.percentage) ? Math.max(0, endpoint.percentage) : 0,
   }));
@@ -154,56 +154,50 @@ const AdminUsageSection: React.FC = () => {
   }));
 
   const displayedVisits = endpoints.reduce((sum, e) => sum + e.visits, 0);
-  const totalVisits = Number.isFinite(data?.totalVisits)
-    ? Math.max(0, data?.totalVisits ?? 0)
-    : displayedVisits;
-  const totalEndpoints = Number.isFinite(data?.totalEndpoints)
-    ? Math.max(0, data?.totalEndpoints ?? 0)
-    : endpoints.length;
+  const totalVisits = Number.isFinite(data?.totalVisits) ? Math.max(0, data?.totalVisits ?? 0) : displayedVisits;
+  const totalEndpoints = Number.isFinite(data?.totalEndpoints) ? Math.max(0, data?.totalEndpoints ?? 0) : endpoints.length;
 
-  const displayedPercentage = totalVisits > 0
-    ? ((displayedVisits / (totalVisits || 1)) * 100).toFixed(1)
-    : '0';
+  const displayedPercentage = totalVisits > 0 ? ((displayedVisits / (totalVisits || 1)) * 100).toFixed(1) : "0";
 
   return (
     <Stack gap="lg">
       <LoginRequiredBanner show={!loginEnabled} />
       <EnterpriseRequiredBanner
         show={!hasEnterpriseLicense}
-        featureName={t('settings.licensingAnalytics.usageAnalytics', 'Usage Analytics')}
+        featureName={t("settings.licensingAnalytics.usageAnalytics", "Usage Analytics")}
       />
 
       {/* Info banner about usage analytics and audit relationship */}
       {loginEnabled && hasEnterpriseLicense && (
         <Alert
           icon={<LocalIcon icon="info" width="1.2rem" height="1.2rem" />}
-          title={t('usage.aboutUsageAnalytics', 'About Usage Analytics')}
+          title={t("usage.aboutUsageAnalytics", "About Usage Analytics")}
           color="cyan"
           variant="light"
         >
           <Stack gap="xs">
             <Text size="sm">
               {t(
-                'usage.usageAnalyticsExplanation',
-                'Usage analytics track endpoint requests and tool usage patterns. Combined with the Audit Logging dashboard, you get complete visibility into system activity, performance, and security events.'
+                "usage.usageAnalyticsExplanation",
+                "Usage analytics track endpoint requests and tool usage patterns. Combined with the Audit Logging dashboard, you get complete visibility into system activity, performance, and security events.",
               )}
             </Text>
             <Group gap="sm">
               <Button
                 variant="light"
                 size="xs"
-                onClick={() => navigate('/settings/adminSecurity')}
+                onClick={() => navigate("/settings/adminSecurity")}
                 rightSection={<LocalIcon icon="arrow-forward" width="0.9rem" height="0.9rem" />}
               >
-                {t('usage.configureSettings', 'Configure Analytics Settings')}
+                {t("usage.configureSettings", "Configure Analytics Settings")}
               </Button>
               <Button
                 variant="light"
                 size="xs"
-                onClick={() => navigate('/settings/adminSecurity#auditLogging')}
+                onClick={() => navigate("/settings/adminSecurity#auditLogging")}
                 rightSection={<LocalIcon icon="arrow-forward" width="0.9rem" height="0.9rem" />}
               >
-                {t('usage.viewAuditLogs', 'View Audit Logs')}
+                {t("usage.viewAuditLogs", "View Audit Logs")}
               </Button>
             </Group>
           </Stack>
@@ -217,20 +211,20 @@ const AdminUsageSection: React.FC = () => {
             <Group>
               <SegmentedControl
                 value={displayMode}
-                onChange={(value) => setDisplayMode(value as 'top10' | 'top20' | 'all')}
+                onChange={(value) => setDisplayMode(value as "top10" | "top20" | "all")}
                 disabled={showDemoData}
                 data={[
                   {
-                    value: 'top10',
-                    label: t('usage.controls.top10', 'Top 10'),
+                    value: "top10",
+                    label: t("usage.controls.top10", "Top 10"),
                   },
                   {
-                    value: 'top20',
-                    label: t('usage.controls.top20', 'Top 20'),
+                    value: "top20",
+                    label: t("usage.controls.top20", "Top 20"),
                   },
                   {
-                    value: 'all',
-                    label: t('usage.controls.all', 'All'),
+                    value: "all",
+                    label: t("usage.controls.all", "All"),
                   },
                 ]}
               />
@@ -241,41 +235,41 @@ const AdminUsageSection: React.FC = () => {
                 loading={loading}
                 disabled={showDemoData}
               >
-                {t('usage.controls.refresh', 'Refresh')}
+                {t("usage.controls.refresh", "Refresh")}
               </Button>
             </Group>
           </Group>
 
           <Group>
             <Text size="sm" fw={500}>
-              {t('usage.controls.dataTypeLabel', 'Data Type:')}
+              {t("usage.controls.dataTypeLabel", "Data Type:")}
             </Text>
             <SegmentedControl
               value={dataType}
-              onChange={(value) => setDataType(value as 'all' | 'api' | 'ui')}
+              onChange={(value) => setDataType(value as "all" | "api" | "ui")}
               disabled={showDemoData}
               data={[
                 {
-                  value: 'all',
-                  label: t('usage.controls.dataType.all', 'All'),
+                  value: "all",
+                  label: t("usage.controls.dataType.all", "All"),
                 },
                 {
-                  value: 'api',
-                  label: t('usage.controls.dataType.api', 'API'),
+                  value: "api",
+                  label: t("usage.controls.dataType.api", "API"),
                 },
                 {
-                  value: 'ui',
-                  label: t('usage.controls.dataType.ui', 'UI'),
+                  value: "ui",
+                  label: t("usage.controls.dataType.ui", "UI"),
                 },
               ]}
             />
           </Group>
 
           {/* Statistics Summary */}
-          <Group gap="xl" style={{ flexWrap: 'wrap' }}>
+          <Group gap="xl" style={{ flexWrap: "wrap" }}>
             <div>
               <Text size="sm" c="dimmed">
-                {t('usage.stats.totalEndpoints', 'Total Endpoints')}
+                {t("usage.stats.totalEndpoints", "Total Endpoints")}
               </Text>
               <Text size="lg" fw={600}>
                 {totalEndpoints}
@@ -283,7 +277,7 @@ const AdminUsageSection: React.FC = () => {
             </div>
             <div>
               <Text size="sm" c="dimmed">
-                {t('usage.stats.totalVisits', 'Total Visits')}
+                {t("usage.stats.totalVisits", "Total Visits")}
               </Text>
               <Text size="lg" fw={600}>
                 {totalVisits.toLocaleString()}
@@ -291,7 +285,7 @@ const AdminUsageSection: React.FC = () => {
             </div>
             <div>
               <Text size="sm" c="dimmed">
-                {t('usage.stats.showing', 'Showing')}
+                {t("usage.stats.showing", "Showing")}
               </Text>
               <Text size="lg" fw={600}>
                 {getDisplayModeLabel()}
@@ -299,7 +293,7 @@ const AdminUsageSection: React.FC = () => {
             </div>
             <div>
               <Text size="sm" c="dimmed">
-                {t('usage.stats.selectedVisits', 'Selected Visits')}
+                {t("usage.stats.selectedVisits", "Selected Visits")}
               </Text>
               <Text size="lg" fw={600}>
                 {displayedVisits.toLocaleString()} ({displayedPercentage}%)
diff --git a/frontend/src/proprietary/components/shared/config/configSections/ApiKeys.tsx b/frontend/src/proprietary/components/shared/config/configSections/ApiKeys.tsx
index e1b1a53530..571895e21a 100644
--- a/frontend/src/proprietary/components/shared/config/configSections/ApiKeys.tsx
+++ b/frontend/src/proprietary/components/shared/config/configSections/ApiKeys.tsx
@@ -25,14 +25,14 @@ export default function ApiKeys() {
         setTimeout(() => setCopied(null), 1600);
       } else {
         // Fallback for HTTP: use old execCommand method
-        const textarea = document.createElement('textarea');
+        const textarea = document.createElement("textarea");
         textarea.value = text;
-        textarea.style.position = 'fixed';
-        textarea.style.opacity = '0';
+        textarea.style.position = "fixed";
+        textarea.style.opacity = "0";
         document.body.appendChild(textarea);
         textarea.select();
 
-        if (document.execCommand('copy')) {
+        if (document.execCommand("copy")) {
           setCopied(tag);
           setTimeout(() => setCopied(null), 1600);
         }
@@ -40,7 +40,7 @@ export default function ApiKeys() {
         document.body.removeChild(textarea);
       }
     } catch (e) {
-      console.error('Failed to copy:', e);
+      console.error("Failed to copy:", e);
     }
   };
 
@@ -55,7 +55,7 @@ export default function ApiKeys() {
   return (
     <Stack gap={20} p={0}>
       <Text size="sm" c="dimmed">
-        {t('config.apiKeys.intro', 'Use your API key to programmatically access Stirling PDF\'s processing capabilities.')}
+        {t("config.apiKeys.intro", "Use your API key to programmatically access Stirling PDF's processing capabilities.")}
       </Text>
 
       <Paper
@@ -63,17 +63,17 @@ export default function ApiKeys() {
         radius="md"
         style={{
           background: "var(--bg-muted)",
-          border: "1px solid var(--border-subtle)"
+          border: "1px solid var(--border-subtle)",
         }}
       >
         <Group gap="xs" wrap="nowrap" align="flex-start">
           <LocalIcon icon="info-rounded" width={18} height={18} style={{ marginTop: 2, flexShrink: 0, opacity: 0.7 }} />
           <Stack gap={8} style={{ flex: 1 }}>
             <Text size="sm" fw={500}>
-              {t('config.apiKeys.docsTitle', 'API Documentation')}
+              {t("config.apiKeys.docsTitle", "API Documentation")}
             </Text>
             <Text size="sm" c="dimmed">
-              {t('config.apiKeys.docsDescription', 'Learn more about integrating with Stirling PDF:')}
+              {t("config.apiKeys.docsDescription", "Learn more about integrating with Stirling PDF:")}
             </Text>
             <Stack gap={4}>
               <Text size="sm">
@@ -81,9 +81,9 @@ export default function ApiKeys() {
                   href="https://docs.stirlingpdf.com/API"
                   target="_blank"
                   rel="noopener noreferrer"
-                  style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}
+                  style={{ display: "inline-flex", alignItems: "center", gap: 4 }}
                 >
-                  {t('config.apiKeys.docsLink', 'API Documentation')}
+                  {t("config.apiKeys.docsLink", "API Documentation")}
                   <LocalIcon icon="open-in-new-rounded" width={14} height={14} />
                 </Anchor>
               </Text>
@@ -92,9 +92,9 @@ export default function ApiKeys() {
                   href="https://registry.scalar.com/@stirlingpdf/apis/stirling-pdf-processing-api/"
                   target="_blank"
                   rel="noopener noreferrer"
-                  style={{ display: 'inline-flex', alignItems: 'center', gap: 4 }}
+                  style={{ display: "inline-flex", alignItems: "center", gap: 4 }}
                 >
-                  {t('config.apiKeys.schemaLink', 'API Schema Reference')}
+                  {t("config.apiKeys.schemaLink", "API Schema Reference")}
                   <LocalIcon icon="open-in-new-rounded" width={14} height={14} />
                 </Anchor>
               </Text>
@@ -105,15 +105,23 @@ export default function ApiKeys() {
 
       {apiKeyError && (
         <Text size="sm" c="red.5">
-          {t('config.apiKeys.generateError', "We couldn't generate your API key.")} {" "}
+          {t("config.apiKeys.generateError", "We couldn't generate your API key.")}{" "}
           <Anchor component="button" underline="always" onClick={refetch} c="red.4">
-            {t('common.retry', 'Retry')}
+            {t("common.retry", "Retry")}
           </Anchor>
         </Text>
       )}
 
       {apiKeyLoading ? (
-        <div style={{ padding: 18, borderRadius: 12, background: "var(--api-keys-card-bg)", border: "1px solid var(--api-keys-card-border)", boxShadow: "0 2px 8px var(--api-keys-card-shadow)" }}>
+        <div
+          style={{
+            padding: 18,
+            borderRadius: 12,
+            background: "var(--api-keys-card-bg)",
+            border: "1px solid var(--api-keys-card-border)",
+            boxShadow: "0 2px 8px var(--api-keys-card-shadow)",
+          }}
+        >
           <Group align="center" gap={12} wrap="nowrap">
             <Skeleton height={36} style={{ flex: 1 }} />
             <Skeleton height={32} width={76} />
@@ -131,14 +139,10 @@ export default function ApiKeys() {
       )}
 
       <Text size="sm" c="dimmed" style={{ marginTop: -8 }}>
-        {t('config.apiKeys.usage', 'Include this key in the X-API-KEY header with all API requests.')}
+        {t("config.apiKeys.usage", "Include this key in the X-API-KEY header with all API requests.")}
       </Text>
 
-      <RefreshModal
-        opened={showRefreshModal}
-        onClose={() => setShowRefreshModal(false)}
-        onConfirm={refreshKeys}
-      />
+      <RefreshModal opened={showRefreshModal} onClose={() => setShowRefreshModal(false)} onConfirm={refreshKeys} />
     </Stack>
   );
 }
diff --git a/frontend/src/proprietary/components/shared/config/configSections/PeopleSection.tsx b/frontend/src/proprietary/components/shared/config/configSections/PeopleSection.tsx
index 4b45d4fa6f..1a4a03bd50 100644
--- a/frontend/src/proprietary/components/shared/config/configSections/PeopleSection.tsx
+++ b/frontend/src/proprietary/components/shared/config/configSections/PeopleSection.tsx
@@ -1,6 +1,6 @@
-import { useState, useEffect } from 'react';
-import { isAxiosError } from 'axios';
-import { useTranslation } from 'react-i18next';
+import { useState, useEffect } from "react";
+import { isAxiosError } from "axios";
+import { useTranslation } from "react-i18next";
 import {
   Stack,
   Text,
@@ -19,21 +19,21 @@ import {
   Avatar,
   Box,
   type ComboboxItem,
-} from '@mantine/core';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { alert } from '@app/components/toast';
-import { userManagementService, User } from '@app/services/userManagementService';
-import { teamService, Team } from '@app/services/teamService';
-import { Z_INDEX_OVER_CONFIG_MODAL } from '@app/styles/zIndex';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
-import InviteMembersModal from '@app/components/shared/InviteMembersModal';
-import { useLoginRequired } from '@app/hooks/useLoginRequired';
-import LoginRequiredBanner from '@app/components/shared/config/LoginRequiredBanner';
-import { useNavigate } from 'react-router-dom';
-import UpdateSeatsButton from '@app/components/shared/UpdateSeatsButton';
-import { useLicense } from '@app/contexts/LicenseContext';
-import ChangeUserPasswordModal from '@app/components/shared/ChangeUserPasswordModal';
-import { useAuth } from '@app/auth/UseSession';
+} from "@mantine/core";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { alert } from "@app/components/toast";
+import { userManagementService, User } from "@app/services/userManagementService";
+import { teamService, Team } from "@app/services/teamService";
+import { Z_INDEX_OVER_CONFIG_MODAL } from "@app/styles/zIndex";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
+import InviteMembersModal from "@app/components/shared/InviteMembersModal";
+import { useLoginRequired } from "@app/hooks/useLoginRequired";
+import LoginRequiredBanner from "@app/components/shared/config/LoginRequiredBanner";
+import { useNavigate } from "react-router-dom";
+import UpdateSeatsButton from "@app/components/shared/UpdateSeatsButton";
+import { useLicense } from "@app/contexts/LicenseContext";
+import ChangeUserPasswordModal from "@app/components/shared/ChangeUserPasswordModal";
+import { useAuth } from "@app/auth/UseSession";
 
 export default function PeopleSection() {
   const { t } = useTranslation();
@@ -45,7 +45,7 @@ export default function PeopleSection() {
   const [users, setUsers] = useState<User[]>([]);
   const [teams, setTeams] = useState<Team[]>([]);
   const [loading, setLoading] = useState(true);
-  const [searchQuery, setSearchQuery] = useState('');
+  const [searchQuery, setSearchQuery] = useState("");
   const [inviteModalOpened, setInviteModalOpened] = useState(false);
   const [editUserModalOpened, setEditUserModalOpened] = useState(false);
   const [changePasswordModalOpened, setChangePasswordModalOpened] = useState(false);
@@ -70,16 +70,16 @@ export default function PeopleSection() {
       return;
     }
     if (hasNoSlots) {
-      navigate('/settings/adminPlan');
+      navigate("/settings/adminPlan");
       return;
     }
     setInviteModalOpened(true);
   };
 
   const addMemberTooltip = !loginEnabled
-    ? t('workspace.people.loginRequired', 'Enable login mode first')
+    ? t("workspace.people.loginRequired", "Enable login mode first")
     : hasNoSlots
-      ? t('workspace.people.license.noSlotsAvailable', 'No user slots available')
+      ? t("workspace.people.license.noSlotsAvailable", "No user slots available")
       : null;
 
   const isCurrentUser = (user: User) => currentUser?.username === user.username;
@@ -87,7 +87,7 @@ export default function PeopleSection() {
 
   // Form state for edit user modal
   const [editForm, setEditForm] = useState({
-    role: 'ROLE_USER',
+    role: "ROLE_USER",
     teamId: undefined as number | undefined,
   });
 
@@ -97,7 +97,7 @@ export default function PeopleSection() {
 
   useEffect(() => {
     if (config) {
-      console.log('[PeopleSection] Email invites enabled:', config.enableEmailInvites);
+      console.log("[PeopleSection] Email invites enabled:", config.enableEmailInvites);
     }
   }, [config]);
 
@@ -106,17 +106,14 @@ export default function PeopleSection() {
       setLoading(true);
 
       if (loginEnabled) {
-        const [adminData, teamsData] = await Promise.all([
-          userManagementService.getUsers(),
-          teamService.getTeams(),
-        ]);
+        const [adminData, teamsData] = await Promise.all([userManagementService.getUsers(), teamService.getTeams()]);
 
         // Enrich users with session data
-        const enrichedUsers = adminData.users.map(user => ({
+        const enrichedUsers = adminData.users.map((user) => ({
           ...user,
           isActive: adminData.userSessions[user.username] || false,
           lastRequest: adminData.userLastRequest[user.username] || undefined,
-          mfaEnabled: (adminData.userSettings?.[user.username] as Record<string, unknown> | undefined)?.mfaEnabled === 'true',
+          mfaEnabled: (adminData.userSettings?.[user.username] as Record<string, unknown> | undefined)?.mfaEnabled === "true",
         }));
 
         setUsers(enrichedUsers);
@@ -138,57 +135,57 @@ export default function PeopleSection() {
         const exampleUsers: User[] = [
           {
             id: 1,
-            username: 'admin',
-            email: 'admin@example.com',
+            username: "admin",
+            email: "admin@example.com",
             enabled: true,
-            roleName: 'ROLE_ADMIN',
-            rolesAsString: 'ROLE_ADMIN',
-            authenticationType: 'password',
+            roleName: "ROLE_ADMIN",
+            rolesAsString: "ROLE_ADMIN",
+            authenticationType: "password",
             isActive: true,
             lastRequest: Date.now(),
-            team: { id: 1, name: 'Engineering' }
+            team: { id: 1, name: "Engineering" },
           },
           {
             id: 2,
-            username: 'john.doe',
-            email: 'john.doe@example.com',
+            username: "john.doe",
+            email: "john.doe@example.com",
             enabled: true,
-            roleName: 'ROLE_USER',
-            rolesAsString: 'ROLE_USER',
-            authenticationType: 'password',
+            roleName: "ROLE_USER",
+            rolesAsString: "ROLE_USER",
+            authenticationType: "password",
             isActive: false,
             lastRequest: Date.now() - 86400000,
-            team: { id: 1, name: 'Engineering' }
+            team: { id: 1, name: "Engineering" },
           },
           {
             id: 3,
-            username: 'jane.smith',
-            email: 'jane.smith@example.com',
+            username: "jane.smith",
+            email: "jane.smith@example.com",
             enabled: true,
-            roleName: 'ROLE_USER',
-            rolesAsString: 'ROLE_USER',
-            authenticationType: 'oauth',
+            roleName: "ROLE_USER",
+            rolesAsString: "ROLE_USER",
+            authenticationType: "oauth",
             isActive: true,
             lastRequest: Date.now(),
-            team: { id: 2, name: 'Marketing' }
+            team: { id: 2, name: "Marketing" },
           },
           {
             id: 4,
-            username: 'bob.wilson',
-            email: 'bob.wilson@example.com',
+            username: "bob.wilson",
+            email: "bob.wilson@example.com",
             enabled: false,
-            roleName: 'ROLE_USER',
-            rolesAsString: 'ROLE_USER',
-            authenticationType: 'password',
+            roleName: "ROLE_USER",
+            rolesAsString: "ROLE_USER",
+            authenticationType: "password",
             isActive: false,
             lastRequest: Date.now() - 604800000,
-            team: undefined
-          }
+            team: undefined,
+          },
         ];
 
         const exampleTeams: Team[] = [
-          { id: 1, name: 'Engineering', userCount: 3 },
-          { id: 2, name: 'Marketing', userCount: 2 }
+          { id: 1, name: "Engineering", userCount: 3 },
+          { id: 2, name: "Marketing", userCount: 2 },
         ];
 
         setUsers(exampleUsers);
@@ -207,8 +204,8 @@ export default function PeopleSection() {
         });
       }
     } catch (error) {
-      console.error('[PeopleSection] Failed to fetch people data:', error);
-      alert({ alertType: 'error', title: 'Failed to load people data' });
+      console.error("[PeopleSection] Failed to fetch people data:", error);
+      alert({ alertType: "error", title: "Failed to load people data" });
     } finally {
       setLoading(false);
     }
@@ -224,15 +221,15 @@ export default function PeopleSection() {
         role: editForm.role,
         teamId: editForm.teamId,
       });
-      alert({ alertType: 'success', title: t('workspace.people.editMember.success') });
+      alert({ alertType: "success", title: t("workspace.people.editMember.success") });
       closeEditModal();
       fetchData();
     } catch (error: unknown) {
-      console.error('[PeopleSection] Failed to update user:', error);
+      console.error("[PeopleSection] Failed to update user:", error);
       const errorMessage = isAxiosError(error)
-        ? (error.response?.data?.message || error.response?.data?.error || error.message)
-        : (error instanceof Error ? error.message : undefined) || t('workspace.people.editMember.error');
-      alert({ alertType: 'error', title: errorMessage });
+        ? error.response?.data?.message || error.response?.data?.error || error.message
+        : (error instanceof Error ? error.message : undefined) || t("workspace.people.editMember.error");
+      alert({ alertType: "error", title: errorMessage });
     } finally {
       setProcessing(false);
     }
@@ -241,53 +238,57 @@ export default function PeopleSection() {
   const handleToggleEnabled = async (user: User) => {
     try {
       await userManagementService.toggleUserEnabled(user.username, !user.enabled);
-      alert({ alertType: 'success', title: t('workspace.people.toggleEnabled.success') });
+      alert({ alertType: "success", title: t("workspace.people.toggleEnabled.success") });
       fetchData();
     } catch (error: unknown) {
-      console.error('[PeopleSection] Failed to toggle user status:', error);
+      console.error("[PeopleSection] Failed to toggle user status:", error);
       const errorMessage = isAxiosError(error)
-        ? (error.response?.data?.message || error.response?.data?.error || error.message)
-        : (error instanceof Error ? error.message : undefined) || t('workspace.people.toggleEnabled.error');
-      alert({ alertType: 'error', title: errorMessage });
+        ? error.response?.data?.message || error.response?.data?.error || error.message
+        : (error instanceof Error ? error.message : undefined) || t("workspace.people.toggleEnabled.error");
+      alert({ alertType: "error", title: errorMessage });
     }
   };
 
   const handleDeleteUser = async (user: User) => {
-    const confirmMessage = t('workspace.people.confirmDelete', 'Are you sure you want to delete this user? This action cannot be undone.');
+    const confirmMessage = t(
+      "workspace.people.confirmDelete",
+      "Are you sure you want to delete this user? This action cannot be undone.",
+    );
     if (!window.confirm(`${confirmMessage}\n\nUser: ${user.username}`)) {
       return;
     }
 
     try {
       await userManagementService.deleteUser(user.username);
-      alert({ alertType: 'success', title: t('workspace.people.deleteUserSuccess', 'User deleted successfully') });
+      alert({ alertType: "success", title: t("workspace.people.deleteUserSuccess", "User deleted successfully") });
       fetchData();
     } catch (error: unknown) {
-      console.error('[PeopleSection] Failed to delete user:', error);
+      console.error("[PeopleSection] Failed to delete user:", error);
       const errorMessage = isAxiosError(error)
-        ? (error.response?.data?.message || error.response?.data?.error || error.message)
+        ? error.response?.data?.message || error.response?.data?.error || error.message
         : (error instanceof Error ? error.message : undefined) ||
-        t('workspace.people.deleteUserError', 'Failed to delete user');
-      alert({ alertType: 'error', title: errorMessage });
+          t("workspace.people.deleteUserError", "Failed to delete user");
+      alert({ alertType: "error", title: errorMessage });
     }
   };
 
   const handleUnlockUser = async (user: User) => {
-    const confirmMessage = t('workspace.people.confirmUnlock', 'Are you sure you want to unlock this user account?');
+    const confirmMessage = t("workspace.people.confirmUnlock", "Are you sure you want to unlock this user account?");
     if (!window.confirm(`${confirmMessage}\n\nUser: ${user.username}`)) {
       return;
     }
 
     try {
       await userManagementService.unlockUser(user.username);
-      alert({ alertType: 'success', title: t('workspace.people.unlockUserSuccess', 'User account unlocked successfully') });
+      alert({ alertType: "success", title: t("workspace.people.unlockUserSuccess", "User account unlocked successfully") });
       fetchData();
     } catch (error: unknown) {
-      console.error('[PeopleSection] Failed to unlock user:', error);
+      console.error("[PeopleSection] Failed to unlock user:", error);
       const errorMessage = isAxiosError(error)
-        ? (error.response?.data?.message || error.response?.data?.error || error.message)
-        : (error instanceof Error ? error.message : undefined) || t('workspace.people.unlockUserError', 'Failed to unlock user account');
-      alert({ alertType: 'error', title: errorMessage });
+        ? error.response?.data?.message || error.response?.data?.error || error.message
+        : (error instanceof Error ? error.message : undefined) ||
+          t("workspace.people.unlockUserError", "Failed to unlock user account");
+      alert({ alertType: "error", title: errorMessage });
     }
   };
 
@@ -314,36 +315,42 @@ export default function PeopleSection() {
     setEditUserModalOpened(false);
     setSelectedUser(null);
     setEditForm({
-      role: 'ROLE_USER',
+      role: "ROLE_USER",
       teamId: undefined,
     });
   };
 
-  const filteredUsers = users.filter((user) =>
-    user.username.toLowerCase().includes(searchQuery.toLowerCase())
-  );
+  const filteredUsers = users.filter((user) => user.username.toLowerCase().includes(searchQuery.toLowerCase()));
 
   const roleOptions = [
     {
-      value: 'ROLE_ADMIN',
-      label: t('workspace.people.admin'),
-      description: t('workspace.people.roleDescriptions.admin', 'Can manage settings and invite members, with full administrative access.'),
-      icon: 'admin-panel-settings'
+      value: "ROLE_ADMIN",
+      label: t("workspace.people.admin"),
+      description: t(
+        "workspace.people.roleDescriptions.admin",
+        "Can manage settings and invite members, with full administrative access.",
+      ),
+      icon: "admin-panel-settings",
     },
     {
-      value: 'ROLE_USER',
-      label: t('workspace.people.member'),
-      description: t('workspace.people.roleDescriptions.member', 'Can view and edit shared files, but cannot manage workspace settings or members.'),
-      icon: 'person'
+      value: "ROLE_USER",
+      label: t("workspace.people.member"),
+      description: t(
+        "workspace.people.roleDescriptions.member",
+        "Can view and edit shared files, but cannot manage workspace settings or members.",
+      ),
+      icon: "person",
     },
   ];
 
   const renderRoleOption = ({ option }: { option: ComboboxItem & { icon?: string; description?: string } }) => (
     <Group gap="sm" wrap="nowrap">
-      <LocalIcon icon={option.icon ?? ''} width="1.25rem" height="1.25rem" style={{ flexShrink: 0 }} />
+      <LocalIcon icon={option.icon ?? ""} width="1.25rem" height="1.25rem" style={{ flexShrink: 0 }} />
       <Box style={{ flex: 1 }}>
-        <Text size="sm" fw={500}>{option.label}</Text>
-        <Text size="xs" c="dimmed" style={{ whiteSpace: 'normal', lineHeight: 1.4 }}>
+        <Text size="sm" fw={500}>
+          {option.label}
+        </Text>
+        <Text size="xs" c="dimmed" style={{ whiteSpace: "normal", lineHeight: 1.4 }}>
           {option.description}
         </Text>
       </Box>
@@ -360,7 +367,7 @@ export default function PeopleSection() {
       <Stack align="center" py="md">
         <Loader size="sm" />
         <Text size="sm" c="dimmed">
-          {t('workspace.people.loading', 'Loading people...')}
+          {t("workspace.people.loading", "Loading people...")}
         </Text>
       </Stack>
     );
@@ -371,34 +378,40 @@ export default function PeopleSection() {
       <LoginRequiredBanner show={!loginEnabled} />
       <div>
         <Text fw={600} size="lg">
-          {t('workspace.people.title')}
+          {t("workspace.people.title")}
         </Text>
         <Text size="sm" c="dimmed">
-          {t('workspace.people.description')}
+          {t("workspace.people.description")}
         </Text>
       </div>
 
       {/* License Information - Compact */}
       {licenseInfo && (
-        <Group gap="md" style={{ fontSize: '0.875rem' }}>
+        <Group gap="md" style={{ fontSize: "0.875rem" }}>
           <Text size="sm" span c="dimmed">
-            <Text component="span" fw={600} c="inherit">{licenseInfo.totalUsers}</Text>
-            <Text component="span" c="dimmed"> / </Text>
-            <Text component="span" fw={600} c="inherit">{licenseInfo.maxAllowedUsers}</Text>
-            <Text component="span" c="dimmed"> {t('workspace.people.license.users', 'users')}</Text>
+            <Text component="span" fw={600} c="inherit">
+              {licenseInfo.totalUsers}
+            </Text>
+            <Text component="span" c="dimmed">
+              {" "}
+              /{" "}
+            </Text>
+            <Text component="span" fw={600} c="inherit">
+              {licenseInfo.maxAllowedUsers}
+            </Text>
+            <Text component="span" c="dimmed">
+              {" "}
+              {t("workspace.people.license.users", "users")}
+            </Text>
           </Text>
 
           {licenseInfo.availableSlots === 0 && (
             <Group gap="xs" wrap="nowrap" align="center">
               <Badge color="red" variant="light" size="sm">
-                {t('workspace.people.license.noSlotsAvailable', 'No slots available')}
+                {t("workspace.people.license.noSlotsAvailable", "No slots available")}
               </Badge>
-              <Button
-                size="compact-sm"
-                variant="outline"
-                onClick={() => navigate('/settings/adminPlan')}
-              >
-                {t('workspace.people.actions.upgrade', 'Upgrade')}
+              <Button size="compact-sm" variant="outline" onClick={() => navigate("/settings/adminPlan")}>
+                {t("workspace.people.actions.upgrade", "Upgrade")}
               </Button>
             </Group>
           )}
@@ -407,31 +420,32 @@ export default function PeopleSection() {
             <Text size="sm" c="dimmed" span>
               •
               <Text component="span" ml={4}>
-                {t('workspace.people.license.grandfatheredShort', '{{count}} grandfathered', { count: licenseInfo.grandfatheredUserCount })}
+                {t("workspace.people.license.grandfatheredShort", "{{count}} grandfathered", {
+                  count: licenseInfo.grandfatheredUserCount,
+                })}
               </Text>
             </Text>
           )}
 
           {lockedUsers.length > 0 && (
             <Badge color="orange" variant="light" size="sm">
-              {lockedUsers.length} {t('workspace.people.locked', 'locked')}
+              {lockedUsers.length} {t("workspace.people.locked", "locked")}
             </Badge>
           )}
 
           {licenseInfo.premiumEnabled && licenseInfo.licenseMaxUsers > 0 && (
             <Badge color="blue" variant="light" size="sm">
-              +{licenseInfo.licenseMaxUsers} {t('workspace.people.license.fromLicense', 'from license')}
+              +{licenseInfo.licenseMaxUsers} {t("workspace.people.license.fromLicense", "from license")}
             </Badge>
           )}
 
           {/* Enterprise Seat Management Button */}
-          {globalLicenseInfo?.licenseType === 'ENTERPRISE' && (
+          {globalLicenseInfo?.licenseType === "ENTERPRISE" && (
             <>
-              <Text size="sm" c="dimmed" span>•</Text>
-              <UpdateSeatsButton
-                size="xs"
-                onSuccess={fetchData}
-              />
+              <Text size="sm" c="dimmed" span>
+                •
+              </Text>
+              <UpdateSeatsButton size="xs" onSuccess={fetchData} />
             </>
           )}
         </Group>
@@ -440,7 +454,7 @@ export default function PeopleSection() {
       {/* Header Actions */}
       <Group justify="space-between">
         <TextInput
-          placeholder={t('workspace.people.searchMembers')}
+          placeholder={t("workspace.people.searchMembers")}
           leftSection={<LocalIcon icon="search" width="1rem" height="1rem" />}
           value={searchQuery}
           onChange={(e) => setSearchQuery(e.currentTarget.value)}
@@ -457,7 +471,7 @@ export default function PeopleSection() {
             onClick={handleAddMembersClick}
             disabled={!loginEnabled || (licenseInfo ? licenseInfo.availableSlots === 0 : false)}
           >
-            {t('workspace.people.addMembers')}
+            {t("workspace.people.addMembers")}
           </Button>
         </Tooltip>
       </Group>
@@ -467,20 +481,22 @@ export default function PeopleSection() {
         horizontalSpacing="md"
         verticalSpacing="sm"
         withRowBorders
-        style={{
-          '--table-border-color': 'var(--mantine-color-gray-3)',
-        } as React.CSSProperties}
+        style={
+          {
+            "--table-border-color": "var(--mantine-color-gray-3)",
+          } as React.CSSProperties
+        }
       >
         <Table.Thead>
-          <Table.Tr style={{ backgroundColor: 'var(--mantine-color-gray-0)' }}>
-            <Table.Th style={{ fontWeight: 600, color: 'var(--mantine-color-gray-7)' }} fz="sm">
-              {t('workspace.people.user')}
+          <Table.Tr style={{ backgroundColor: "var(--mantine-color-gray-0)" }}>
+            <Table.Th style={{ fontWeight: 600, color: "var(--mantine-color-gray-7)" }} fz="sm">
+              {t("workspace.people.user")}
             </Table.Th>
-            <Table.Th style={{ fontWeight: 600, color: 'var(--mantine-color-gray-7)' }} fz="sm" w={100}>
-              {t('workspace.people.role')}
+            <Table.Th style={{ fontWeight: 600, color: "var(--mantine-color-gray-7)" }} fz="sm" w={100}>
+              {t("workspace.people.role")}
             </Table.Th>
-            <Table.Th style={{ fontWeight: 600, color: 'var(--mantine-color-gray-7)' }} fz="sm">
-              {t('workspace.people.team')}
+            <Table.Th style={{ fontWeight: 600, color: "var(--mantine-color-gray-7)" }} fz="sm">
+              {t("workspace.people.team")}
             </Table.Th>
             <Table.Th w={50}></Table.Th>
           </Table.Tr>
@@ -490,7 +506,7 @@ export default function PeopleSection() {
             <Table.Tr>
               <Table.Td colSpan={4}>
                 <Text ta="center" c="dimmed" py="xl">
-                  {t('workspace.people.noMembersFound')}
+                  {t("workspace.people.noMembersFound")}
                 </Text>
               </Table.Td>
             </Table.Tr>
@@ -498,28 +514,28 @@ export default function PeopleSection() {
             filteredUsers.map((user) => (
               <Table.Tr
                 key={user.id}
-                style={isCurrentUser(user) ? { backgroundColor: 'rgba(34, 139, 230, 0.08)' } : undefined}
+                style={isCurrentUser(user) ? { backgroundColor: "rgba(34, 139, 230, 0.08)" } : undefined}
               >
                 <Table.Td>
                   <Group gap="xs" wrap="nowrap">
                     <Tooltip
                       label={
                         !user.enabled
-                          ? t('workspace.people.disabled', 'Disabled')
+                          ? t("workspace.people.disabled", "Disabled")
                           : user.isActive
-                            ? t('workspace.people.activeSession', 'Active session')
-                            : t('workspace.people.active', 'Active')
+                            ? t("workspace.people.activeSession", "Active session")
+                            : t("workspace.people.active", "Active")
                       }
                       zIndex={Z_INDEX_OVER_CONFIG_MODAL}
                     >
                       <Avatar
                         size={32}
-                        color={user.enabled ? 'blue' : 'gray'}
+                        color={user.enabled ? "blue" : "gray"}
                         styles={{
                           root: {
-                            border: user.isActive ? '2px solid var(--mantine-color-green-6)' : 'none',
+                            border: user.isActive ? "2px solid var(--mantine-color-green-6)" : "none",
                             opacity: user.enabled ? 1 : 0.5,
-                          }
+                          },
                         }}
                       >
                         {user.username.charAt(0).toUpperCase()}
@@ -527,7 +543,11 @@ export default function PeopleSection() {
                     </Tooltip>
                     <Box style={{ minWidth: 0, flex: 1 }}>
                       <Group gap={6} wrap="nowrap" align="center">
-                        <Tooltip label={user.username} disabled={user.username.length <= 20} zIndex={Z_INDEX_OVER_CONFIG_MODAL}>
+                        <Tooltip
+                          label={user.username}
+                          disabled={user.username.length <= 20}
+                          zIndex={Z_INDEX_OVER_CONFIG_MODAL}
+                        >
                           <Text
                             size="sm"
                             fw={500}
@@ -535,9 +555,9 @@ export default function PeopleSection() {
                             style={{
                               lineHeight: 1.3,
                               opacity: user.enabled ? 1 : 0.6,
-                              overflow: 'hidden',
-                              textOverflow: 'ellipsis',
-                              whiteSpace: 'nowrap',
+                              overflow: "hidden",
+                              textOverflow: "ellipsis",
+                              whiteSpace: "nowrap",
                             }}
                           >
                             {user.username}
@@ -545,7 +565,7 @@ export default function PeopleSection() {
                         </Tooltip>
                         {isLockedUser(user) && (
                           <Badge color="orange" variant="light" size="xs">
-                            {t('workspace.people.lockedBadge', 'Locked')}
+                            {t("workspace.people.lockedBadge", "Locked")}
                           </Badge>
                         )}
                       </Group>
@@ -558,14 +578,10 @@ export default function PeopleSection() {
                   </Group>
                 </Table.Td>
                 <Table.Td w={100}>
-                  <Badge
-                    size="sm"
-                    variant="light"
-                    color={(user.rolesAsString || '').includes('ROLE_ADMIN') ? 'blue' : 'cyan'}
-                  >
-                    {(user.rolesAsString || '').includes('ROLE_ADMIN')
-                      ? t('workspace.people.admin', 'Admin')
-                      : t('workspace.people.member', 'Member')}
+                  <Badge size="sm" variant="light" color={(user.rolesAsString || "").includes("ROLE_ADMIN") ? "blue" : "cyan"}>
+                    {(user.rolesAsString || "").includes("ROLE_ADMIN")
+                      ? t("workspace.people.admin", "Admin")
+                      : t("workspace.people.member", "Member")}
                   </Badge>
                 </Table.Td>
                 <Table.Td>
@@ -575,9 +591,9 @@ export default function PeopleSection() {
                         size="sm"
                         maw={150}
                         style={{
-                          overflow: 'hidden',
-                          textOverflow: 'ellipsis',
-                          whiteSpace: 'nowrap',
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap",
                         }}
                       >
                         {user.team.name}
@@ -587,36 +603,39 @@ export default function PeopleSection() {
                     <Text size="sm">—</Text>
                   )}
                 </Table.Td>
-                  <Table.Td>
-                    <Group gap="xs" wrap="nowrap">
-                      {/* Info icon with tooltip */}
-                      <Tooltip
-                        label={
-                          <div>
-                            <Text size="xs" fw={500}>Authentication: {user.authenticationType || 'Unknown'}</Text>
-                            <Text size="xs">
-                              Last Activity: {user.lastRequest && new Date(user.lastRequest).getFullYear() >= 1980
-                                ? new Date(user.lastRequest).toLocaleString()
-                                :t('never', 'Never')}
-                            </Text>
-                          </div>
-                        }
-                        multiline
-                        w={220}
-                        position="left"
-                        withArrow
-                        zIndex={Z_INDEX_OVER_CONFIG_MODAL + 10}
-                      >
-                        <ActionIcon variant="subtle"size="sm">
-                          <LocalIcon icon="info" width="1rem" height="1rem" />
-                        </ActionIcon>
-                      </Tooltip>
+                <Table.Td>
+                  <Group gap="xs" wrap="nowrap">
+                    {/* Info icon with tooltip */}
+                    <Tooltip
+                      label={
+                        <div>
+                          <Text size="xs" fw={500}>
+                            Authentication: {user.authenticationType || "Unknown"}
+                          </Text>
+                          <Text size="xs">
+                            Last Activity:{" "}
+                            {user.lastRequest && new Date(user.lastRequest).getFullYear() >= 1980
+                              ? new Date(user.lastRequest).toLocaleString()
+                              : t("never", "Never")}
+                          </Text>
+                        </div>
+                      }
+                      multiline
+                      w={220}
+                      position="left"
+                      withArrow
+                      zIndex={Z_INDEX_OVER_CONFIG_MODAL + 10}
+                    >
+                      <ActionIcon variant="subtle" size="sm">
+                        <LocalIcon icon="info" width="1rem" height="1rem" />
+                      </ActionIcon>
+                    </Tooltip>
 
-                      {/* Actions menu */}
-                      {!isCurrentUser(user) && (
+                    {/* Actions menu */}
+                    {!isCurrentUser(user) && (
                       <Menu position="bottom-end" withinPortal>
                         <Menu.Target>
-                          <ActionIcon variant="subtle"  disabled={!loginEnabled}>
+                          <ActionIcon variant="subtle" disabled={!loginEnabled}>
                             <LocalIcon icon="more-vert" width="1rem" height="1rem" />
                           </ActionIcon>
                         </Menu.Target>
@@ -627,25 +646,31 @@ export default function PeopleSection() {
                               onClick={() => openEditModal(user)}
                               disabled={!loginEnabled}
                             >
-                              {t('workspace.people.editRole', 'Edit Role & Team')}
+                              {t("workspace.people.editRole", "Edit Role & Team")}
                             </Menu.Item>
                           )}
                           {!isCurrentUser(user) && (
-                          <Menu.Item
-                            leftSection={<LocalIcon icon="lock" width="1rem" height="1rem" />}
-                            onClick={() => openChangePasswordModal(user)}
-                            disabled={!loginEnabled}
-                          >
-                            {t('workspace.people.changePassword.action', 'Change password')}
-                          </Menu.Item>
+                            <Menu.Item
+                              leftSection={<LocalIcon icon="lock" width="1rem" height="1rem" />}
+                              onClick={() => openChangePasswordModal(user)}
+                              disabled={!loginEnabled}
+                            >
+                              {t("workspace.people.changePassword.action", "Change password")}
+                            </Menu.Item>
                           )}
                           {!isCurrentUser(user) && (
                             <Menu.Item
-                              leftSection={user.enabled ? <LocalIcon icon="person-off" width="1rem" height="1rem" /> : <LocalIcon icon="person-check" width="1rem" height="1rem" />}
+                              leftSection={
+                                user.enabled ? (
+                                  <LocalIcon icon="person-off" width="1rem" height="1rem" />
+                                ) : (
+                                  <LocalIcon icon="person-check" width="1rem" height="1rem" />
+                                )
+                              }
                               onClick={() => handleToggleEnabled(user)}
                               disabled={!loginEnabled}
                             >
-                              {user.enabled ? t('workspace.people.disable') : t('workspace.people.enable')}
+                              {user.enabled ? t("workspace.people.disable") : t("workspace.people.enable")}
                             </Menu.Item>
                           )}
                           {!isCurrentUser(user) && isLockedUser(user) && (
@@ -654,7 +679,7 @@ export default function PeopleSection() {
                               onClick={() => handleUnlockUser(user)}
                               disabled={!loginEnabled}
                             >
-                              {t('workspace.people.unlockAccount', 'Unlock Account')}
+                              {t("workspace.people.unlockAccount", "Unlock Account")}
                             </Menu.Item>
                           )}
                           {!isCurrentUser(user) && user.mfaEnabled && (
@@ -666,47 +691,54 @@ export default function PeopleSection() {
                                 onClick={async () => {
                                   try {
                                     await userManagementService.disableMfaByAdmin(user.username);
-                                    alert({ alertType: 'success', title: t('workspace.people.mfa.adminDisableSuccess', 'MFA disabled successfully for user') });
+                                    alert({
+                                      alertType: "success",
+                                      title: t(
+                                        "workspace.people.mfa.adminDisableSuccess",
+                                        "MFA disabled successfully for user",
+                                      ),
+                                    });
                                   } catch (error: unknown) {
-                                    console.error('[PeopleSection] Failed to disable MFA for user:', error);
+                                    console.error("[PeopleSection] Failed to disable MFA for user:", error);
                                     const errorMessage = isAxiosError(error)
-                                      ? (error.response?.data?.message || error.response?.data?.error || error.message)
+                                      ? error.response?.data?.message || error.response?.data?.error || error.message
                                       : (error instanceof Error ? error.message : undefined) ||
-                                      t('workspace.people.mfa.adminDisableError', 'Failed to disable MFA for user');
-                                    alert({ alertType: 'error', title: errorMessage });
+                                        t("workspace.people.mfa.adminDisableError", "Failed to disable MFA for user");
+                                    alert({ alertType: "error", title: errorMessage });
                                   }
                                 }}
                                 disabled={!loginEnabled}
                               >
-                                {t('workspace.people.mfa.disableByAdmin', 'Disable MFA')}
+                                {t("workspace.people.mfa.disableByAdmin", "Disable MFA")}
                               </Menu.Item>
                             </>
                           )}
                           {!isCurrentUser(user) && (
                             <>
                               <Menu.Divider />
-                              <Menu.Item color="red" leftSection={<LocalIcon icon="delete" width="1rem" height="1rem" />} onClick={() => handleDeleteUser(user)} disabled={!loginEnabled}>
-                                {t('workspace.people.deleteUser')}
+                              <Menu.Item
+                                color="red"
+                                leftSection={<LocalIcon icon="delete" width="1rem" height="1rem" />}
+                                onClick={() => handleDeleteUser(user)}
+                                disabled={!loginEnabled}
+                              >
+                                {t("workspace.people.deleteUser")}
                               </Menu.Item>
                             </>
                           )}
                         </Menu.Dropdown>
                       </Menu>
-                      )}
-                    </Group>
-                  </Table.Td>
-                </Table.Tr>
-              ))
-            )}
+                    )}
+                  </Group>
+                </Table.Td>
+              </Table.Tr>
+            ))
+          )}
         </Table.Tbody>
       </Table>
 
       {/* Invite Members Modal (reusable) */}
-      <InviteMembersModal
-        opened={inviteModalOpened}
-        onClose={() => setInviteModalOpened(false)}
-        onSuccess={fetchData}
-      />
+      <InviteMembersModal opened={inviteModalOpened} onClose={() => setInviteModalOpened(false)} onSuccess={fetchData} />
 
       <ChangeUserPasswordModal
         opened={changePasswordModalOpened}
@@ -731,34 +763,34 @@ export default function PeopleSection() {
             onClick={closeEditModal}
             size="lg"
             style={{
-              position: 'absolute',
+              position: "absolute",
               top: -8,
               right: -8,
-              zIndex: 1
+              zIndex: 1,
             }}
           />
           <Stack gap="lg" pt="md">
             {/* Header with Icon */}
             <Stack gap="md" align="center">
-              <LocalIcon icon="edit" width="3rem" height="3rem" style={{ color: 'var(--mantine-color-gray-6)' }} />
+              <LocalIcon icon="edit" width="3rem" height="3rem" style={{ color: "var(--mantine-color-gray-6)" }} />
               <Text size="xl" fw={600} ta="center">
-                {t('workspace.people.editMember.title')}
+                {t("workspace.people.editMember.title")}
               </Text>
               <Text size="sm" c="dimmed" ta="center">
-                {t('workspace.people.editMember.editing')} <strong>{selectedUser?.username}</strong>
+                {t("workspace.people.editMember.editing")} <strong>{selectedUser?.username}</strong>
               </Text>
             </Stack>
             <Select
-              label={t('workspace.people.editMember.role')}
+              label={t("workspace.people.editMember.role")}
               data={roleOptions}
               value={editForm.role}
-              onChange={(value) => setEditForm({ ...editForm, role: value || 'ROLE_USER' })}
+              onChange={(value) => setEditForm({ ...editForm, role: value || "ROLE_USER" })}
               renderOption={renderRoleOption}
               comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_CONFIG_MODAL }}
             />
             <Select
-              label={t('workspace.people.editMember.team')}
-              placeholder={t('workspace.people.editMember.teamPlaceholder')}
+              label={t("workspace.people.editMember.team")}
+              placeholder={t("workspace.people.editMember.teamPlaceholder")}
               data={teamOptions}
               value={editForm.teamId?.toString()}
               onChange={(value) => setEditForm({ ...editForm, teamId: value ? parseInt(value) : undefined })}
@@ -766,7 +798,7 @@ export default function PeopleSection() {
               comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_CONFIG_MODAL }}
             />
             <Button onClick={handleUpdateUserRole} loading={processing} fullWidth size="md" mt="md">
-              {t('workspace.people.editMember.submit')}
+              {t("workspace.people.editMember.submit")}
             </Button>
           </Stack>
         </Box>
diff --git a/frontend/src/proprietary/components/shared/config/configSections/TeamDetailsSection.tsx b/frontend/src/proprietary/components/shared/config/configSections/TeamDetailsSection.tsx
index faf80d6a57..cf0f85c101 100644
--- a/frontend/src/proprietary/components/shared/config/configSections/TeamDetailsSection.tsx
+++ b/frontend/src/proprietary/components/shared/config/configSections/TeamDetailsSection.tsx
@@ -1,6 +1,6 @@
-import { useState, useEffect } from 'react';
-import { isAxiosError } from 'axios';
-import { useTranslation } from 'react-i18next';
+import { useState, useEffect } from "react";
+import { isAxiosError } from "axios";
+import { useTranslation } from "react-i18next";
 import {
   Stack,
   Text,
@@ -17,13 +17,13 @@ import {
   Menu,
   Avatar,
   Box,
-} from '@mantine/core';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { alert } from '@app/components/toast';
-import { teamService, Team } from '@app/services/teamService';
-import { User, userManagementService } from '@app/services/userManagementService';
-import { Z_INDEX_OVER_CONFIG_MODAL } from '@app/styles/zIndex';
-import ChangeUserPasswordModal from '@app/components/shared/ChangeUserPasswordModal';
+} from "@mantine/core";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { alert } from "@app/components/toast";
+import { teamService, Team } from "@app/services/teamService";
+import { User, userManagementService } from "@app/services/userManagementService";
+import { Z_INDEX_OVER_CONFIG_MODAL } from "@app/styles/zIndex";
+import ChangeUserPasswordModal from "@app/components/shared/ChangeUserPasswordModal";
 
 interface TeamDetailsSectionProps {
   teamId: number;
@@ -43,8 +43,8 @@ export default function TeamDetailsSection({ teamId, onBack }: TeamDetailsSectio
   const [changePasswordModalOpened, setChangePasswordModalOpened] = useState(false);
   const [passwordUser, setPasswordUser] = useState<User | null>(null);
   const [selectedUser, setSelectedUser] = useState<User | null>(null);
-  const [selectedUserId, setSelectedUserId] = useState<string>('');
-  const [selectedTeamId, setSelectedTeamId] = useState<string>('');
+  const [selectedUserId, setSelectedUserId] = useState<string>("");
+  const [selectedTeamId, setSelectedTeamId] = useState<string>("");
   const [processing, setProcessing] = useState(false);
 
   // License information
@@ -64,11 +64,8 @@ export default function TeamDetailsSection({ teamId, onBack }: TeamDetailsSectio
   const fetchTeamDetails = async () => {
     try {
       setLoading(true);
-      const [data, adminData] = await Promise.all([
-        teamService.getTeamDetails(teamId),
-        userManagementService.getUsers(),
-      ]);
-      console.log('[TeamDetailsSection] Raw data:', data);
+      const [data, adminData] = await Promise.all([teamService.getTeamDetails(teamId), userManagementService.getUsers()]);
+      console.log("[TeamDetailsSection] Raw data:", data);
       setTeam(data.team);
       setTeamUsers(Array.isArray(data.teamUsers) ? data.teamUsers : []);
       setAvailableUsers(Array.isArray(data.availableUsers) ? data.availableUsers : []);
@@ -81,8 +78,8 @@ export default function TeamDetailsSection({ teamId, onBack }: TeamDetailsSectio
       setMailEnabled(adminData.mailEnabled);
       setLockedUsers(adminData.lockedUsers || []);
     } catch (error) {
-      console.error('Failed to fetch team details:', error);
-      alert({ alertType: 'error', title: t('workspace.teams.loadError', 'Failed to load team details') });
+      console.error("Failed to fetch team details:", error);
+      alert({ alertType: "error", title: t("workspace.teams.loadError", "Failed to load team details") });
       onBack();
     } finally {
       setLoading(false);
@@ -94,65 +91,70 @@ export default function TeamDetailsSection({ teamId, onBack }: TeamDetailsSectio
       const teams = await teamService.getTeams();
       setAllTeams(teams);
     } catch (error) {
-      console.error('Failed to fetch teams:', error);
+      console.error("Failed to fetch teams:", error);
     }
   };
 
   const handleAddMember = async () => {
     if (!selectedUserId) {
-      alert({ alertType: 'error', title: t('workspace.teams.addMemberToTeam.selectUserRequired', 'Please select a user') });
+      alert({ alertType: "error", title: t("workspace.teams.addMemberToTeam.selectUserRequired", "Please select a user") });
       return;
     }
 
     try {
       setProcessing(true);
       await teamService.addUserToTeam(teamId, parseInt(selectedUserId));
-      alert({ alertType: 'success', title: t('workspace.teams.addMemberToTeam.success', 'User added to team successfully') });
+      alert({ alertType: "success", title: t("workspace.teams.addMemberToTeam.success", "User added to team successfully") });
       setAddMemberModalOpened(false);
-      setSelectedUserId('');
+      setSelectedUserId("");
       fetchTeamDetails();
     } catch (error: unknown) {
-      console.error('Failed to add member:', error);
+      console.error("Failed to add member:", error);
       const errorMessage = isAxiosError(error)
-        ? (error.response?.data?.message || error.response?.data?.error || error.message)
-        : (error instanceof Error ? error.message : undefined) || t('workspace.teams.addMemberToTeam.error', 'Failed to add user to team');
-      alert({ alertType: 'error', title: errorMessage });
+        ? error.response?.data?.message || error.response?.data?.error || error.message
+        : (error instanceof Error ? error.message : undefined) ||
+          t("workspace.teams.addMemberToTeam.error", "Failed to add user to team");
+      alert({ alertType: "error", title: errorMessage });
     } finally {
       setProcessing(false);
     }
   };
 
   const handleRemoveMember = async (user: User) => {
-    if (!window.confirm(t('workspace.teams.confirmRemove', `Remove ${user.username} from this team?`))) {
+    if (!window.confirm(t("workspace.teams.confirmRemove", `Remove ${user.username} from this team?`))) {
       return;
     }
 
     try {
       setProcessing(true);
       // Find the Default team ID
-      const defaultTeam = allTeams.find(t => t.name === 'Default');
+      const defaultTeam = allTeams.find((t) => t.name === "Default");
 
       if (!defaultTeam) {
-        throw new Error('Default team not found');
+        throw new Error("Default team not found");
       }
 
       // Move user to Default team by updating their role with the Default team ID
-      await teamService.moveUserToTeam(user.username, user.rolesAsString || 'ROLE_USER', defaultTeam.id);
-      alert({ alertType: 'success', title: t('workspace.teams.removeMemberSuccess', 'User removed from team') });
+      await teamService.moveUserToTeam(user.username, user.rolesAsString || "ROLE_USER", defaultTeam.id);
+      alert({ alertType: "success", title: t("workspace.teams.removeMemberSuccess", "User removed from team") });
       fetchTeamDetails();
     } catch (error: unknown) {
-      console.error('Failed to remove member:', error);
+      console.error("Failed to remove member:", error);
       const errorMessage = isAxiosError(error)
-        ? (error.response?.data?.message || error.response?.data?.error || error.message)
-        : (error instanceof Error ? error.message : undefined) || t('workspace.teams.removeMemberError', 'Failed to remove user from team');
-      alert({ alertType: 'error', title: errorMessage });
+        ? error.response?.data?.message || error.response?.data?.error || error.message
+        : (error instanceof Error ? error.message : undefined) ||
+          t("workspace.teams.removeMemberError", "Failed to remove user from team");
+      alert({ alertType: "error", title: errorMessage });
     } finally {
       setProcessing(false);
     }
   };
 
   const handleDeleteUser = async (user: User) => {
-    const confirmMessage = t('workspace.people.confirmDelete', 'Are you sure you want to delete this user? This action cannot be undone.');
+    const confirmMessage = t(
+      "workspace.people.confirmDelete",
+      "Are you sure you want to delete this user? This action cannot be undone.",
+    );
     if (!window.confirm(`${confirmMessage}\n\nUser: ${user.username}`)) {
       return;
     }
@@ -160,42 +162,43 @@ export default function TeamDetailsSection({ teamId, onBack }: TeamDetailsSectio
     try {
       setProcessing(true);
       await userManagementService.deleteUser(user.username);
-      alert({ alertType: 'success', title: t('workspace.people.deleteUserSuccess', 'User deleted successfully') });
+      alert({ alertType: "success", title: t("workspace.people.deleteUserSuccess", "User deleted successfully") });
       fetchTeamDetails();
     } catch (error: unknown) {
-      console.error('Failed to delete user:', error);
+      console.error("Failed to delete user:", error);
       const errorMessage = isAxiosError(error)
-        ? (error.response?.data?.message || error.response?.data?.error || error.message)
+        ? error.response?.data?.message || error.response?.data?.error || error.message
         : (error instanceof Error ? error.message : undefined) ||
-        t('workspace.people.deleteUserError', 'Failed to delete user');
-      alert({ alertType: 'error', title: errorMessage });
+          t("workspace.people.deleteUserError", "Failed to delete user");
+      alert({ alertType: "error", title: errorMessage });
     } finally {
       setProcessing(false);
     }
   };
 
   const handleUnlockUser = async (user: User) => {
-    const confirmMessage = t('workspace.people.confirmUnlock', 'Are you sure you want to unlock this user account?');
+    const confirmMessage = t("workspace.people.confirmUnlock", "Are you sure you want to unlock this user account?");
     if (!window.confirm(`${confirmMessage}\n\nUser: ${user.username}`)) {
       return;
     }
 
     try {
       await userManagementService.unlockUser(user.username);
-      alert({ alertType: 'success', title: t('workspace.people.unlockUserSuccess', 'User account unlocked successfully') });
+      alert({ alertType: "success", title: t("workspace.people.unlockUserSuccess", "User account unlocked successfully") });
       fetchTeamDetails();
     } catch (error: unknown) {
-      console.error('[TeamDetailsSection] Failed to unlock user:', error);
+      console.error("[TeamDetailsSection] Failed to unlock user:", error);
       const errorMessage = isAxiosError(error)
-        ? (error.response?.data?.message || error.response?.data?.error || error.message)
-        : (error instanceof Error ? error.message : undefined) || t('workspace.people.unlockUserError', 'Failed to unlock user account');
-      alert({ alertType: 'error', title: errorMessage });
+        ? error.response?.data?.message || error.response?.data?.error || error.message
+        : (error instanceof Error ? error.message : undefined) ||
+          t("workspace.people.unlockUserError", "Failed to unlock user account");
+      alert({ alertType: "error", title: errorMessage });
     }
   };
 
   const openChangeTeamModal = (user: User) => {
     setSelectedUser(user);
-    setSelectedTeamId(user.team?.id?.toString() || '');
+    setSelectedTeamId(user.team?.id?.toString() || "");
     setChangeTeamModalOpened(true);
   };
 
@@ -211,25 +214,29 @@ export default function TeamDetailsSection({ teamId, onBack }: TeamDetailsSectio
 
   const handleChangeTeam = async () => {
     if (!selectedUser || !selectedTeamId) {
-      alert({ alertType: 'error', title: t('workspace.teams.changeTeam.selectTeamRequired', 'Please select a team') });
+      alert({ alertType: "error", title: t("workspace.teams.changeTeam.selectTeamRequired", "Please select a team") });
       return;
     }
 
     try {
       setProcessing(true);
-      await teamService.moveUserToTeam(selectedUser.username, selectedUser.rolesAsString || 'ROLE_USER', parseInt(selectedTeamId));
-      alert({ alertType: 'success', title: t('workspace.teams.changeTeam.success', 'Team changed successfully') });
+      await teamService.moveUserToTeam(
+        selectedUser.username,
+        selectedUser.rolesAsString || "ROLE_USER",
+        parseInt(selectedTeamId),
+      );
+      alert({ alertType: "success", title: t("workspace.teams.changeTeam.success", "Team changed successfully") });
       setChangeTeamModalOpened(false);
       setSelectedUser(null);
-      setSelectedTeamId('');
+      setSelectedTeamId("");
       fetchTeamDetails();
     } catch (error: unknown) {
-      console.error('Failed to change team:', error);
+      console.error("Failed to change team:", error);
       const errorMessage = isAxiosError(error)
-        ? (error.response?.data?.message || error.response?.data?.error || error.message)
+        ? error.response?.data?.message || error.response?.data?.error || error.message
         : (error instanceof Error ? error.message : undefined) ||
-        t('workspace.teams.changeTeam.error', 'Failed to change team');
-      alert({ alertType: 'error', title: errorMessage });
+          t("workspace.teams.changeTeam.error", "Failed to change team");
+      alert({ alertType: "error", title: errorMessage });
     } finally {
       setProcessing(false);
     }
@@ -240,7 +247,7 @@ export default function TeamDetailsSection({ teamId, onBack }: TeamDetailsSectio
       <Stack align="center" py="xl">
         <Loader size="sm" />
         <Text size="sm" c="dimmed">
-          {t('workspace.teams.loadingDetails', 'Loading team details...')}
+          {t("workspace.teams.loadingDetails", "Loading team details...")}
         </Text>
       </Stack>
     );
@@ -250,10 +257,10 @@ export default function TeamDetailsSection({ teamId, onBack }: TeamDetailsSectio
     return (
       <Stack align="center" py="xl">
         <Text size="sm" c="red">
-          {t('workspace.teams.teamNotFound', 'Team not found')}
+          {t("workspace.teams.teamNotFound", "Team not found")}
         </Text>
         <Button variant="light" onClick={onBack}>
-          {t('workspace.teams.backToTeams', 'Back to Teams')}
+          {t("workspace.teams.backToTeams", "Back to Teams")}
         </Button>
       </Stack>
     );
@@ -271,7 +278,7 @@ export default function TeamDetailsSection({ teamId, onBack }: TeamDetailsSectio
             {team.name}
           </Text>
           <Text size="sm" c="dimmed">
-            {t('workspace.teams.memberCount', { count: teamUsers.length })} {teamUsers.length === 1 ? 'member' : 'members'}
+            {t("workspace.teams.memberCount", { count: teamUsers.length })} {teamUsers.length === 1 ? "member" : "members"}
           </Text>
         </div>
       </Group>
@@ -279,7 +286,7 @@ export default function TeamDetailsSection({ teamId, onBack }: TeamDetailsSectio
       {/* Add Member Button */}
       <Group justify="flex-end">
         <Tooltip
-          label={t('workspace.people.license.noSlotsAvailable', 'No user slots available')}
+          label={t("workspace.people.license.noSlotsAvailable", "No user slots available")}
           disabled={!licenseInfo || licenseInfo.availableSlots > 0}
           position="bottom"
           withArrow
@@ -288,9 +295,9 @@ export default function TeamDetailsSection({ teamId, onBack }: TeamDetailsSectio
           <Button
             leftSection={<LocalIcon icon="person-add" width="1rem" height="1rem" />}
             onClick={() => setAddMemberModalOpened(true)}
-            disabled={team.name === 'Internal' || (licenseInfo ? licenseInfo.availableSlots === 0 : false)}
+            disabled={team.name === "Internal" || (licenseInfo ? licenseInfo.availableSlots === 0 : false)}
           >
-            {t('workspace.teams.addMember')}
+            {t("workspace.teams.addMember")}
           </Button>
         </Tooltip>
       </Group>
@@ -300,105 +307,110 @@ export default function TeamDetailsSection({ teamId, onBack }: TeamDetailsSectio
         horizontalSpacing="md"
         verticalSpacing="sm"
         withRowBorders
-        style={{
-          '--table-border-color': 'var(--mantine-color-gray-3)',
-        } as React.CSSProperties}
+        style={
+          {
+            "--table-border-color": "var(--mantine-color-gray-3)",
+          } as React.CSSProperties
+        }
       >
         <Table.Thead>
-          <Table.Tr style={{ backgroundColor: 'var(--mantine-color-gray-0)' }}>
-            <Table.Th style={{ fontWeight: 600, color: 'var(--mantine-color-gray-7)' }} fz="sm">
-              {t('workspace.people.user')}
+          <Table.Tr style={{ backgroundColor: "var(--mantine-color-gray-0)" }}>
+            <Table.Th style={{ fontWeight: 600, color: "var(--mantine-color-gray-7)" }} fz="sm">
+              {t("workspace.people.user")}
             </Table.Th>
-            <Table.Th style={{ fontWeight: 600, color: 'var(--mantine-color-gray-7)' }} fz="sm" w={100}>
-              {t('workspace.people.role')}
+            <Table.Th style={{ fontWeight: 600, color: "var(--mantine-color-gray-7)" }} fz="sm" w={100}>
+              {t("workspace.people.role")}
             </Table.Th>
             <Table.Th w={50}></Table.Th>
           </Table.Tr>
         </Table.Thead>
-          <Table.Tbody>
-            {teamUsers.length === 0 ? (
-              <Table.Tr>
-                <Table.Td colSpan={3}>
-                  <Text ta="center" c="dimmed" py="xl">
-                    {t('workspace.teams.noMembers', 'No members in this team')}
-                  </Text>
-                </Table.Td>
-              </Table.Tr>
-            ) : (
-              teamUsers.map((user) => {
-                const isActive = userLastRequest[user.username] &&
-                  (Date.now() - userLastRequest[user.username]) < 5 * 60 * 1000; // Active within last 5 minutes
+        <Table.Tbody>
+          {teamUsers.length === 0 ? (
+            <Table.Tr>
+              <Table.Td colSpan={3}>
+                <Text ta="center" c="dimmed" py="xl">
+                  {t("workspace.teams.noMembers", "No members in this team")}
+                </Text>
+              </Table.Td>
+            </Table.Tr>
+          ) : (
+            teamUsers.map((user) => {
+              const isActive = userLastRequest[user.username] && Date.now() - userLastRequest[user.username] < 5 * 60 * 1000; // Active within last 5 minutes
 
-                return (
-                  <Table.Tr key={user.id}>
-                    <Table.Td>
-                      <Group gap="xs" wrap="nowrap">
-                        <Tooltip
-                          label={
-                            !user.enabled
-                              ? t('workspace.people.disabled', 'Disabled')
-                              : isActive
-                                ? t('workspace.people.activeSession', 'Active session')
-                                : t('workspace.people.active', 'Active')
-                          }
-                          zIndex={Z_INDEX_OVER_CONFIG_MODAL}
-                        >
-                          <Avatar
-                            size={32}
-                            color={user.enabled ? 'blue' : 'gray'}
-                            styles={{
-                              root: {
-                                border: isActive ? '2px solid var(--mantine-color-green-6)' : 'none',
-                                opacity: user.enabled ? 1 : 0.5,
-                              }
-                            }}
-                          >
-                            {user.username.charAt(0).toUpperCase()}
-                          </Avatar>
-                        </Tooltip>
-                        <Box style={{ minWidth: 0, flex: 1 }}>
-                          <Group gap={6} wrap="nowrap" align="center">
-                            <Tooltip label={user.username} disabled={user.username.length <= 20} zIndex={Z_INDEX_OVER_CONFIG_MODAL}>
-                              <Text
-                                size="sm"
-                                fw={500}
-                                maw={200}
-                                style={{
-                                  lineHeight: 1.3,
-                                  opacity: user.enabled ? 1 : 0.6,
-                                  overflow: 'hidden',
-                                  textOverflow: 'ellipsis',
-                                  whiteSpace: 'nowrap',
-                                }}
-                              >
-                                {user.username}
-                              </Text>
-                            </Tooltip>
-                            {isLockedUser(user) && (
-                              <Badge color="orange" variant="light" size="xs">
-                                {t('workspace.people.lockedBadge', 'Locked')}
-                              </Badge>
-                            )}
-                          </Group>
-                          {user.email && (
-                            <Text size="xs" c="dimmed" truncate style={{ lineHeight: 1.3 }}>
-                              {user.email}
-                            </Text>
-                          )}
-                        </Box>
-                      </Group>
-                    </Table.Td>
-                    <Table.Td w={100}>
-                      <Badge
-                        size="sm"
-                        color={(user.rolesAsString || '').includes('ROLE_ADMIN') ? 'blue' : 'cyan'}
-                        variant="light"
+              return (
+                <Table.Tr key={user.id}>
+                  <Table.Td>
+                    <Group gap="xs" wrap="nowrap">
+                      <Tooltip
+                        label={
+                          !user.enabled
+                            ? t("workspace.people.disabled", "Disabled")
+                            : isActive
+                              ? t("workspace.people.activeSession", "Active session")
+                              : t("workspace.people.active", "Active")
+                        }
+                        zIndex={Z_INDEX_OVER_CONFIG_MODAL}
                       >
-                        {(user.rolesAsString || '').includes('ROLE_ADMIN')
-                          ? t('workspace.people.admin')
-                          : t('workspace.people.member')}
-                      </Badge>
-                    </Table.Td>
+                        <Avatar
+                          size={32}
+                          color={user.enabled ? "blue" : "gray"}
+                          styles={{
+                            root: {
+                              border: isActive ? "2px solid var(--mantine-color-green-6)" : "none",
+                              opacity: user.enabled ? 1 : 0.5,
+                            },
+                          }}
+                        >
+                          {user.username.charAt(0).toUpperCase()}
+                        </Avatar>
+                      </Tooltip>
+                      <Box style={{ minWidth: 0, flex: 1 }}>
+                        <Group gap={6} wrap="nowrap" align="center">
+                          <Tooltip
+                            label={user.username}
+                            disabled={user.username.length <= 20}
+                            zIndex={Z_INDEX_OVER_CONFIG_MODAL}
+                          >
+                            <Text
+                              size="sm"
+                              fw={500}
+                              maw={200}
+                              style={{
+                                lineHeight: 1.3,
+                                opacity: user.enabled ? 1 : 0.6,
+                                overflow: "hidden",
+                                textOverflow: "ellipsis",
+                                whiteSpace: "nowrap",
+                              }}
+                            >
+                              {user.username}
+                            </Text>
+                          </Tooltip>
+                          {isLockedUser(user) && (
+                            <Badge color="orange" variant="light" size="xs">
+                              {t("workspace.people.lockedBadge", "Locked")}
+                            </Badge>
+                          )}
+                        </Group>
+                        {user.email && (
+                          <Text size="xs" c="dimmed" truncate style={{ lineHeight: 1.3 }}>
+                            {user.email}
+                          </Text>
+                        )}
+                      </Box>
+                    </Group>
+                  </Table.Td>
+                  <Table.Td w={100}>
+                    <Badge
+                      size="sm"
+                      color={(user.rolesAsString || "").includes("ROLE_ADMIN") ? "blue" : "cyan"}
+                      variant="light"
+                    >
+                      {(user.rolesAsString || "").includes("ROLE_ADMIN")
+                        ? t("workspace.people.admin")
+                        : t("workspace.people.member")}
+                    </Badge>
+                  </Table.Td>
                   <Table.Td>
                     <Group gap="xs" wrap="nowrap">
                       {/* Info icon with tooltip */}
@@ -406,13 +418,13 @@ export default function TeamDetailsSection({ teamId, onBack }: TeamDetailsSectio
                         label={
                           <div>
                             <Text size="xs" fw={500}>
-                              Authentication: {user.authenticationType || 'Unknown'}
+                              Authentication: {user.authenticationType || "Unknown"}
                             </Text>
                             <Text size="xs">
-                              Last Activity:{' '}
+                              Last Activity:{" "}
                               {userLastRequest[user.username]
                                 ? new Date(userLastRequest[user.username]).toLocaleString()
-                                : 'Never'}
+                                : "Never"}
                             </Text>
                           </div>
                         }
@@ -438,16 +450,16 @@ export default function TeamDetailsSection({ teamId, onBack }: TeamDetailsSectio
                           <Menu.Item
                             leftSection={<LocalIcon icon="swap-horiz" width="1rem" height="1rem" />}
                             onClick={() => openChangeTeamModal(user)}
-                            disabled={processing || team.name === 'Internal'}
+                            disabled={processing || team.name === "Internal"}
                           >
-                            {t('workspace.teams.changeTeam.label', 'Change Team')}
+                            {t("workspace.teams.changeTeam.label", "Change Team")}
                           </Menu.Item>
                           <Menu.Item
                             leftSection={<LocalIcon icon="lock" width="1rem" height="1rem" />}
                             onClick={() => openChangePasswordModal(user)}
                             disabled={processing}
                           >
-                            {t('workspace.people.changePassword.action', 'Change password')}
+                            {t("workspace.people.changePassword.action", "Change password")}
                           </Menu.Item>
                           {isLockedUser(user) && (
                             <Menu.Item
@@ -455,16 +467,16 @@ export default function TeamDetailsSection({ teamId, onBack }: TeamDetailsSectio
                               onClick={() => handleUnlockUser(user)}
                               disabled={processing}
                             >
-                              {t('workspace.people.unlockAccount', 'Unlock Account')}
+                              {t("workspace.people.unlockAccount", "Unlock Account")}
                             </Menu.Item>
                           )}
-                          {team.name !== 'Internal' && team.name !== 'Default' && (
+                          {team.name !== "Internal" && team.name !== "Default" && (
                             <Menu.Item
                               leftSection={<LocalIcon icon="person-remove" width="1rem" height="1rem" />}
                               onClick={() => handleRemoveMember(user)}
                               disabled={processing}
                             >
-                              {t('workspace.teams.removeMember', 'Remove from team')}
+                              {t("workspace.teams.removeMember", "Remove from team")}
                             </Menu.Item>
                           )}
                           <Menu.Divider />
@@ -472,19 +484,19 @@ export default function TeamDetailsSection({ teamId, onBack }: TeamDetailsSectio
                             color="red"
                             leftSection={<LocalIcon icon="delete" width="1rem" height="1rem" />}
                             onClick={() => handleDeleteUser(user)}
-                            disabled={processing || team.name === 'Internal'}
+                            disabled={processing || team.name === "Internal"}
                           >
-                            {t('workspace.people.deleteUser', 'Delete User')}
+                            {t("workspace.people.deleteUser", "Delete User")}
                           </Menu.Item>
                         </Menu.Dropdown>
                       </Menu>
                     </Group>
                   </Table.Td>
                 </Table.Tr>
-                );
-              })
-            )}
-          </Table.Tbody>
+              );
+            })
+          )}
+        </Table.Tbody>
       </Table>
 
       <ChangeUserPasswordModal
@@ -505,12 +517,12 @@ export default function TeamDetailsSection({ teamId, onBack }: TeamDetailsSectio
         padding="xl"
         withCloseButton={false}
       >
-        <div style={{ position: 'relative' }}>
+        <div style={{ position: "relative" }}>
           <CloseButton
             onClick={() => setAddMemberModalOpened(false)}
             size="lg"
             style={{
-              position: 'absolute',
+              position: "absolute",
               top: -8,
               right: -8,
               zIndex: 1,
@@ -519,36 +531,36 @@ export default function TeamDetailsSection({ teamId, onBack }: TeamDetailsSectio
           <Stack gap="lg" pt="md">
             {/* Header with Icon */}
             <Stack gap="md" align="center">
-              <LocalIcon icon="person-add" width="3rem" height="3rem" style={{ color: 'var(--mantine-color-gray-6)' }} />
+              <LocalIcon icon="person-add" width="3rem" height="3rem" style={{ color: "var(--mantine-color-gray-6)" }} />
               <Text size="xl" fw={600} ta="center">
-                {t('workspace.teams.addMemberToTeam.title')}
+                {t("workspace.teams.addMemberToTeam.title")}
               </Text>
               <Text size="sm" c="dimmed" ta="center">
-                {t('workspace.teams.addMemberToTeam.addingTo')} <strong>{team.name}</strong>
+                {t("workspace.teams.addMemberToTeam.addingTo")} <strong>{team.name}</strong>
               </Text>
             </Stack>
 
             <Select
-              label={t('workspace.teams.addMemberToTeam.selectUser')}
-              placeholder={t('workspace.teams.addMemberToTeam.selectUserPlaceholder')}
+              label={t("workspace.teams.addMemberToTeam.selectUser")}
+              placeholder={t("workspace.teams.addMemberToTeam.selectUserPlaceholder")}
               data={availableUsers.map((user) => ({
                 value: user.id.toString(),
-                label: `${user.username}${user.team ? ` (${t('workspace.teams.addMemberToTeam.currentlyIn')} ${user.team.name})` : ''}`,
+                label: `${user.username}${user.team ? ` (${t("workspace.teams.addMemberToTeam.currentlyIn")} ${user.team.name})` : ""}`,
               }))}
               value={selectedUserId}
-              onChange={(value) => setSelectedUserId(value || '')}
+              onChange={(value) => setSelectedUserId(value || "")}
               searchable
               comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_CONFIG_MODAL }}
             />
 
             {selectedUserId && availableUsers.find((u) => u.id.toString() === selectedUserId)?.team && (
               <Text size="xs" c="orange">
-                {t('workspace.teams.addMemberToTeam.willBeMoved')}
+                {t("workspace.teams.addMemberToTeam.willBeMoved")}
               </Text>
             )}
 
             <Button onClick={handleAddMember} loading={processing} fullWidth size="md" mt="md">
-              {t('workspace.teams.addMemberToTeam.submit')}
+              {t("workspace.teams.addMemberToTeam.submit")}
             </Button>
           </Stack>
         </div>
@@ -564,12 +576,12 @@ export default function TeamDetailsSection({ teamId, onBack }: TeamDetailsSectio
         padding="xl"
         withCloseButton={false}
       >
-        <div style={{ position: 'relative' }}>
+        <div style={{ position: "relative" }}>
           <CloseButton
             onClick={() => setChangeTeamModalOpened(false)}
             size="lg"
             style={{
-              position: 'absolute',
+              position: "absolute",
               top: -8,
               right: -8,
               zIndex: 1,
@@ -578,32 +590,32 @@ export default function TeamDetailsSection({ teamId, onBack }: TeamDetailsSectio
           <Stack gap="lg" pt="md">
             {/* Header with Icon */}
             <Stack gap="md" align="center">
-              <LocalIcon icon="swap-horiz" width="3rem" height="3rem" style={{ color: 'var(--mantine-color-gray-6)' }} />
+              <LocalIcon icon="swap-horiz" width="3rem" height="3rem" style={{ color: "var(--mantine-color-gray-6)" }} />
               <Text size="xl" fw={600} ta="center">
-                {t('workspace.teams.changeTeam.title', 'Change Team')}
+                {t("workspace.teams.changeTeam.title", "Change Team")}
               </Text>
               <Text size="sm" c="dimmed" ta="center">
-                {t('workspace.teams.changeTeam.changing', 'Moving')} <strong>{selectedUser?.username}</strong>
+                {t("workspace.teams.changeTeam.changing", "Moving")} <strong>{selectedUser?.username}</strong>
               </Text>
             </Stack>
 
             <Select
-              label={t('workspace.teams.changeTeam.selectTeam', 'Select Team')}
-              placeholder={t('workspace.teams.changeTeam.selectTeamPlaceholder', 'Choose a team')}
+              label={t("workspace.teams.changeTeam.selectTeam", "Select Team")}
+              placeholder={t("workspace.teams.changeTeam.selectTeamPlaceholder", "Choose a team")}
               data={allTeams
-                .filter((t) => t.name !== 'Internal')
+                .filter((t) => t.name !== "Internal")
                 .map((team) => ({
                   value: team.id.toString(),
                   label: team.name,
                 }))}
               value={selectedTeamId}
-              onChange={(value) => setSelectedTeamId(value || '')}
+              onChange={(value) => setSelectedTeamId(value || "")}
               searchable
               comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_CONFIG_MODAL }}
             />
 
             <Button onClick={handleChangeTeam} loading={processing} fullWidth size="md" mt="md">
-              {t('workspace.teams.changeTeam.submit', 'Change Team')}
+              {t("workspace.teams.changeTeam.submit", "Change Team")}
             </Button>
           </Stack>
         </div>
diff --git a/frontend/src/proprietary/components/shared/config/configSections/TeamsSection.tsx b/frontend/src/proprietary/components/shared/config/configSections/TeamsSection.tsx
index ecaf058067..8296d77b7f 100644
--- a/frontend/src/proprietary/components/shared/config/configSections/TeamsSection.tsx
+++ b/frontend/src/proprietary/components/shared/config/configSections/TeamsSection.tsx
@@ -1,6 +1,6 @@
-import { useState, useEffect } from 'react';
-import { isAxiosError } from 'axios';
-import { useTranslation } from 'react-i18next';
+import { useState, useEffect } from "react";
+import { isAxiosError } from "axios";
+import { useTranslation } from "react-i18next";
 import {
   Stack,
   Text,
@@ -16,15 +16,15 @@ import {
   Select,
   CloseButton,
   Tooltip,
-} from '@mantine/core';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { alert } from '@app/components/toast';
-import { teamService, Team } from '@app/services/teamService';
-import { userManagementService, User } from '@app/services/userManagementService';
-import { Z_INDEX_OVER_CONFIG_MODAL } from '@app/styles/zIndex';
-import TeamDetailsSection from '@app/components/shared/config/configSections/TeamDetailsSection';
-import { useLoginRequired } from '@app/hooks/useLoginRequired';
-import LoginRequiredBanner from '@app/components/shared/config/LoginRequiredBanner';
+} from "@mantine/core";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { alert } from "@app/components/toast";
+import { teamService, Team } from "@app/services/teamService";
+import { userManagementService, User } from "@app/services/userManagementService";
+import { Z_INDEX_OVER_CONFIG_MODAL } from "@app/styles/zIndex";
+import TeamDetailsSection from "@app/components/shared/config/configSections/TeamDetailsSection";
+import { useLoginRequired } from "@app/hooks/useLoginRequired";
+import LoginRequiredBanner from "@app/components/shared/config/LoginRequiredBanner";
 
 export default function TeamsSection() {
   const { t } = useTranslation();
@@ -40,9 +40,9 @@ export default function TeamsSection() {
   const [viewingTeamId, setViewingTeamId] = useState<number | null>(null);
 
   // Form states
-  const [newTeamName, setNewTeamName] = useState('');
-  const [renameTeamName, setRenameTeamName] = useState('');
-  const [selectedUserId, setSelectedUserId] = useState<string>('');
+  const [newTeamName, setNewTeamName] = useState("");
+  const [renameTeamName, setRenameTeamName] = useState("");
+  const [selectedUserId, setSelectedUserId] = useState<string>("");
 
   useEffect(() => {
     fetchTeams();
@@ -57,15 +57,15 @@ export default function TeamsSection() {
       } else {
         // Provide example data when login is disabled
         const exampleTeams: Team[] = [
-          { id: 1, name: 'Engineering', userCount: 3 },
-          { id: 2, name: 'Marketing', userCount: 2 },
-          { id: 3, name: 'Internal', userCount: 1 },
+          { id: 1, name: "Engineering", userCount: 3 },
+          { id: 2, name: "Marketing", userCount: 2 },
+          { id: 3, name: "Internal", userCount: 1 },
         ];
         setTeams(exampleTeams);
       }
     } catch (error) {
-      console.error('Failed to fetch teams:', error);
-      alert({ alertType: 'error', title: 'Failed to load teams' });
+      console.error("Failed to fetch teams:", error);
+      alert({ alertType: "error", title: "Failed to load teams" });
     } finally {
       setLoading(false);
     }
@@ -73,23 +73,23 @@ export default function TeamsSection() {
 
   const handleCreateTeam = async () => {
     if (!newTeamName.trim()) {
-      alert({ alertType: 'error', title: t('workspace.teams.createTeam.nameRequired') });
+      alert({ alertType: "error", title: t("workspace.teams.createTeam.nameRequired") });
       return;
     }
 
     try {
       setProcessing(true);
       await teamService.createTeam(newTeamName);
-      alert({ alertType: 'success', title: t('workspace.teams.createTeam.success') });
-      setNewTeamName('');
+      alert({ alertType: "success", title: t("workspace.teams.createTeam.success") });
+      setNewTeamName("");
       setCreateModalOpened(false);
       await fetchTeams();
     } catch (error: unknown) {
-      console.error('Failed to create team:', error);
+      console.error("Failed to create team:", error);
       const errorMessage = isAxiosError(error)
-        ? (error.response?.data?.message || error.response?.data?.error || error.message)
-        : (error instanceof Error ? error.message : undefined) || t('workspace.teams.createTeam.error');
-      alert({ alertType: 'error', title: errorMessage });
+        ? error.response?.data?.message || error.response?.data?.error || error.message
+        : (error instanceof Error ? error.message : undefined) || t("workspace.teams.createTeam.error");
+      alert({ alertType: "error", title: errorMessage });
     } finally {
       setProcessing(false);
     }
@@ -97,56 +97,55 @@ export default function TeamsSection() {
 
   const handleRenameTeam = async () => {
     if (!selectedTeam || !renameTeamName.trim()) {
-      alert({ alertType: 'error', title: t('workspace.teams.renameTeam.nameRequired') });
+      alert({ alertType: "error", title: t("workspace.teams.renameTeam.nameRequired") });
       return;
     }
 
     try {
       setProcessing(true);
       await teamService.renameTeam(selectedTeam.id, renameTeamName);
-      alert({ alertType: 'success', title: t('workspace.teams.renameTeam.success') });
-      setRenameTeamName('');
+      alert({ alertType: "success", title: t("workspace.teams.renameTeam.success") });
+      setRenameTeamName("");
       setSelectedTeam(null);
       setRenameModalOpened(false);
       await fetchTeams();
     } catch (error: unknown) {
-      console.error('Failed to rename team:', error);
+      console.error("Failed to rename team:", error);
       const errorMessage = isAxiosError(error)
-        ? (error.response?.data?.message || error.response?.data?.error || error.message)
-        : (error instanceof Error ? error.message : undefined) || t('workspace.teams.renameTeam.error');
-      alert({ alertType: 'error', title: errorMessage });
+        ? error.response?.data?.message || error.response?.data?.error || error.message
+        : (error instanceof Error ? error.message : undefined) || t("workspace.teams.renameTeam.error");
+      alert({ alertType: "error", title: errorMessage });
     } finally {
       setProcessing(false);
     }
   };
 
   const handleDeleteTeam = async (team: Team) => {
-    if (team.name === 'Internal') {
-      alert({ alertType: 'error', title: t('workspace.teams.cannotDeleteInternal') });
+    if (team.name === "Internal") {
+      alert({ alertType: "error", title: t("workspace.teams.cannotDeleteInternal") });
       return;
     }
 
-    if (!confirm(t('workspace.teams.confirmDelete'))) {
+    if (!confirm(t("workspace.teams.confirmDelete"))) {
       return;
     }
 
     try {
       await teamService.deleteTeam(team.id);
-      alert({ alertType: 'success', title: t('workspace.teams.deleteTeam.success') });
+      alert({ alertType: "success", title: t("workspace.teams.deleteTeam.success") });
       await fetchTeams();
     } catch (error: unknown) {
-      console.error('Failed to delete team:', error);
+      console.error("Failed to delete team:", error);
       const errorMessage = isAxiosError(error)
-        ? (error.response?.data?.message || error.response?.data?.error || error.message)
-        : (error instanceof Error ? error.message : undefined) ||
-        t('workspace.teams.deleteTeam.error');
-      alert({ alertType: 'error', title: errorMessage });
+        ? error.response?.data?.message || error.response?.data?.error || error.message
+        : (error instanceof Error ? error.message : undefined) || t("workspace.teams.deleteTeam.error");
+      alert({ alertType: "error", title: errorMessage });
     }
   };
 
   const openRenameModal = (team: Team) => {
-    if (team.name === 'Internal') {
-      alert({ alertType: 'error', title: t('workspace.teams.cannotRenameInternal') });
+    if (team.name === "Internal") {
+      alert({ alertType: "error", title: t("workspace.teams.cannotRenameInternal") });
       return;
     }
     setSelectedTeam(team);
@@ -155,8 +154,8 @@ export default function TeamsSection() {
   };
 
   const openAddMemberModal = async (team: Team) => {
-    if (team.name === 'Internal') {
-      alert({ alertType: 'error', title: t('workspace.teams.cannotAddToInternal') });
+    if (team.name === "Internal") {
+      alert({ alertType: "error", title: t("workspace.teams.cannotAddToInternal") });
       return;
     }
     setSelectedTeam(team);
@@ -166,28 +165,28 @@ export default function TeamsSection() {
       setAvailableUsers(adminData.users);
       setAddMemberModalOpened(true);
     } catch (error) {
-      console.error('Failed to fetch users:', error);
-      alert({ alertType: 'error', title: t('workspace.teams.addMemberToTeam.error') });
+      console.error("Failed to fetch users:", error);
+      alert({ alertType: "error", title: t("workspace.teams.addMemberToTeam.error") });
     }
   };
 
   const handleAddMember = async () => {
     if (!selectedTeam || !selectedUserId) {
-      alert({ alertType: 'error', title: t('workspace.teams.addMemberToTeam.userRequired') });
+      alert({ alertType: "error", title: t("workspace.teams.addMemberToTeam.userRequired") });
       return;
     }
 
     try {
       setProcessing(true);
       await teamService.addUserToTeam(selectedTeam.id, parseInt(selectedUserId));
-      alert({ alertType: 'success', title: t('workspace.teams.addMemberToTeam.success') });
-      setSelectedUserId('');
+      alert({ alertType: "success", title: t("workspace.teams.addMemberToTeam.success") });
+      setSelectedUserId("");
       setSelectedTeam(null);
       setAddMemberModalOpened(false);
       await fetchTeams();
     } catch (error) {
-      console.error('Failed to add member to team:', error);
-      alert({ alertType: 'error', title: t('workspace.teams.addMemberToTeam.error') });
+      console.error("Failed to add member to team:", error);
+      alert({ alertType: "error", title: t("workspace.teams.addMemberToTeam.error") });
     } finally {
       setProcessing(false);
     }
@@ -211,7 +210,7 @@ export default function TeamsSection() {
       <Stack align="center" py="md">
         <Loader size="sm" />
         <Text size="sm" c="dimmed">
-          {t('workspace.teams.loading', 'Loading teams...')}
+          {t("workspace.teams.loading", "Loading teams...")}
         </Text>
       </Stack>
     );
@@ -222,17 +221,21 @@ export default function TeamsSection() {
       <LoginRequiredBanner show={!loginEnabled} />
       <div>
         <Text fw={600} size="lg">
-          {t('workspace.teams.title')}
+          {t("workspace.teams.title")}
         </Text>
         <Text size="sm" c="dimmed">
-          {t('workspace.teams.description')}
+          {t("workspace.teams.description")}
         </Text>
       </div>
 
       {/* Header Actions */}
       <Group justify="flex-end">
-        <Button leftSection={<LocalIcon icon="add" width="1rem" height="1rem" />} onClick={() => setCreateModalOpened(true)} disabled={!loginEnabled}>
-          {t('workspace.teams.createNewTeam')}
+        <Button
+          leftSection={<LocalIcon icon="add" width="1rem" height="1rem" />}
+          onClick={() => setCreateModalOpened(true)}
+          disabled={!loginEnabled}
+        >
+          {t("workspace.teams.createNewTeam")}
         </Button>
       </Group>
 
@@ -242,96 +245,112 @@ export default function TeamsSection() {
         verticalSpacing="sm"
         withRowBorders
         highlightOnHover
-        style={{
-          '--table-border-color': 'var(--mantine-color-gray-3)',
-        } as React.CSSProperties}
+        style={
+          {
+            "--table-border-color": "var(--mantine-color-gray-3)",
+          } as React.CSSProperties
+        }
       >
         <Table.Thead>
-          <Table.Tr style={{ backgroundColor: 'var(--mantine-color-gray-0)' }}>
-            <Table.Th style={{ fontWeight: 600, fontSize: '0.875rem', color: 'var(--mantine-color-gray-7)' }}>
-              {t('workspace.teams.teamName')}
+          <Table.Tr style={{ backgroundColor: "var(--mantine-color-gray-0)" }}>
+            <Table.Th style={{ fontWeight: 600, fontSize: "0.875rem", color: "var(--mantine-color-gray-7)" }}>
+              {t("workspace.teams.teamName")}
             </Table.Th>
-            <Table.Th style={{ fontWeight: 600, fontSize: '0.875rem', color: 'var(--mantine-color-gray-7)' }}>
-              {t('workspace.teams.totalMembers')}
+            <Table.Th style={{ fontWeight: 600, fontSize: "0.875rem", color: "var(--mantine-color-gray-7)" }}>
+              {t("workspace.teams.totalMembers")}
             </Table.Th>
             <Table.Th style={{ width: 50 }}></Table.Th>
           </Table.Tr>
         </Table.Thead>
-          <Table.Tbody>
-            {teams.length === 0 ? (
-              <Table.Tr>
-                <Table.Td colSpan={3}>
-                  <Text ta="center" c="dimmed" py="xl">
-                    {t('workspace.teams.noTeamsFound')}
+        <Table.Tbody>
+          {teams.length === 0 ? (
+            <Table.Tr>
+              <Table.Td colSpan={3}>
+                <Text ta="center" c="dimmed" py="xl">
+                  {t("workspace.teams.noTeamsFound")}
+                </Text>
+              </Table.Td>
+            </Table.Tr>
+          ) : (
+            teams.map((team) => (
+              <Table.Tr
+                key={team.id}
+                style={{ cursor: loginEnabled ? "pointer" : "default" }}
+                onClick={() => loginEnabled && setViewingTeamId(team.id)}
+              >
+                <Table.Td>
+                  <Group gap="xs">
+                    <Tooltip label={team.name} disabled={team.name.length <= 20} zIndex={Z_INDEX_OVER_CONFIG_MODAL}>
+                      <Text
+                        size="sm"
+                        fw={500}
+                        maw={200}
+                        style={{
+                          overflow: "hidden",
+                          textOverflow: "ellipsis",
+                          whiteSpace: "nowrap",
+                        }}
+                      >
+                        {team.name}
+                      </Text>
+                    </Tooltip>
+                    {team.name === "Internal" && (
+                      <Badge size="xs" color="gray" variant="light">
+                        {t("workspace.teams.system")}
+                      </Badge>
+                    )}
+                  </Group>
+                </Table.Td>
+                <Table.Td>
+                  <Text size="sm" c="dimmed">
+                    {team.userCount || 0}
                   </Text>
                 </Table.Td>
+                <Table.Td onClick={(e) => e.stopPropagation()}>
+                  <Menu position="bottom-end" withinPortal>
+                    <Menu.Target>
+                      <ActionIcon variant="subtle" color="gray" disabled={!loginEnabled}>
+                        <LocalIcon icon="more-vert" width="1rem" height="1rem" />
+                      </ActionIcon>
+                    </Menu.Target>
+                    <Menu.Dropdown style={{ zIndex: Z_INDEX_OVER_CONFIG_MODAL }}>
+                      <Menu.Item
+                        leftSection={<LocalIcon icon="visibility" width="1rem" height="1rem" />}
+                        onClick={() => setViewingTeamId(team.id)}
+                        disabled={!loginEnabled}
+                      >
+                        {t("workspace.teams.viewTeam", "View Team")}
+                      </Menu.Item>
+                      <Menu.Item
+                        leftSection={<LocalIcon icon="group" width="1rem" height="1rem" />}
+                        onClick={() => openAddMemberModal(team)}
+                        disabled={!loginEnabled}
+                      >
+                        {t("workspace.teams.addMember")}
+                      </Menu.Item>
+                      <Menu.Item
+                        leftSection={<LocalIcon icon="edit" width="1rem" height="1rem" />}
+                        onClick={() => openRenameModal(team)}
+                        disabled={!loginEnabled}
+                      >
+                        {t("workspace.teams.renameTeamLabel")}
+                      </Menu.Item>
+                      <Menu.Divider />
+                      <Menu.Item
+                        color="red"
+                        leftSection={<LocalIcon icon="delete" width="1rem" height="1rem" />}
+                        onClick={() => handleDeleteTeam(team)}
+                        disabled={!loginEnabled || team.name === "Internal"}
+                      >
+                        {t("workspace.teams.deleteTeamLabel")}
+                      </Menu.Item>
+                    </Menu.Dropdown>
+                  </Menu>
+                </Table.Td>
               </Table.Tr>
-            ) : (
-              teams.map((team) => (
-                <Table.Tr
-                  key={team.id}
-                  style={{ cursor: loginEnabled ? 'pointer' : 'default' }}
-                  onClick={() => loginEnabled && setViewingTeamId(team.id)}
-                >
-                  <Table.Td>
-                    <Group gap="xs">
-                      <Tooltip label={team.name} disabled={team.name.length <= 20} zIndex={Z_INDEX_OVER_CONFIG_MODAL}>
-                        <Text
-                          size="sm"
-                          fw={500}
-                          maw={200}
-                          style={{
-                            overflow: 'hidden',
-                            textOverflow: 'ellipsis',
-                            whiteSpace: 'nowrap',
-                          }}
-                        >
-                          {team.name}
-                        </Text>
-                      </Tooltip>
-                      {team.name === 'Internal' && (
-                        <Badge size="xs" color="gray" variant="light">
-                          {t('workspace.teams.system')}
-                        </Badge>
-                      )}
-                    </Group>
-                  </Table.Td>
-                  <Table.Td>
-                    <Text size="sm" c="dimmed">{team.userCount || 0}</Text>
-                  </Table.Td>
-                  <Table.Td onClick={(e) => e.stopPropagation()}>
-                    <Menu position="bottom-end" withinPortal>
-                      <Menu.Target>
-                        <ActionIcon variant="subtle" color="gray" disabled={!loginEnabled}>
-                          <LocalIcon icon="more-vert" width="1rem" height="1rem" />
-                        </ActionIcon>
-                      </Menu.Target>
-                      <Menu.Dropdown style={{ zIndex: Z_INDEX_OVER_CONFIG_MODAL }}>
-                        <Menu.Item leftSection={<LocalIcon icon="visibility" width="1rem" height="1rem" />} onClick={() => setViewingTeamId(team.id)} disabled={!loginEnabled}>
-                          {t('workspace.teams.viewTeam', 'View Team')}
-                        </Menu.Item>
-                        <Menu.Item leftSection={<LocalIcon icon="group" width="1rem" height="1rem" />} onClick={() => openAddMemberModal(team)} disabled={!loginEnabled}>
-                          {t('workspace.teams.addMember')}
-                        </Menu.Item>
-                        <Menu.Item leftSection={<LocalIcon icon="edit" width="1rem" height="1rem" />} onClick={() => openRenameModal(team)} disabled={!loginEnabled}>
-                          {t('workspace.teams.renameTeamLabel')}
-                        </Menu.Item>
-                        <Menu.Divider />
-                        <Menu.Item
-                          color="red"
-                          leftSection={<LocalIcon icon="delete" width="1rem" height="1rem" />}
-                          onClick={() => handleDeleteTeam(team)}
-                          disabled={!loginEnabled || team.name === 'Internal'}
-                        >
-                          {t('workspace.teams.deleteTeamLabel')}
-                        </Menu.Item>
-                      </Menu.Dropdown>
-                    </Menu>
-                  </Table.Td>
-                </Table.Tr>
-              ))
-            )}
-          </Table.Tbody>
+            ))
+          )}
+        </Table.Tbody>
       </Table>
 
       {/* Create Team Modal */}
@@ -344,36 +363,36 @@ export default function TeamsSection() {
         padding="xl"
         withCloseButton={false}
       >
-        <div style={{ position: 'relative' }}>
+        <div style={{ position: "relative" }}>
           <CloseButton
             onClick={() => setCreateModalOpened(false)}
             size="lg"
             style={{
-              position: 'absolute',
+              position: "absolute",
               top: -8,
               right: -8,
-              zIndex: 1
+              zIndex: 1,
             }}
           />
           <Stack gap="lg" pt="md">
             {/* Header with Icon */}
             <Stack gap="md" align="center">
-              <LocalIcon icon="group-add" width="3rem" height="3rem" style={{ color: 'var(--mantine-color-gray-6)' }} />
+              <LocalIcon icon="group-add" width="3rem" height="3rem" style={{ color: "var(--mantine-color-gray-6)" }} />
               <Text size="xl" fw={600} ta="center">
-                {t('workspace.teams.createTeam.title')}
+                {t("workspace.teams.createTeam.title")}
               </Text>
             </Stack>
 
             <TextInput
-              label={t('workspace.teams.createTeam.teamName')}
-              placeholder={t('workspace.teams.createTeam.teamNamePlaceholder')}
+              label={t("workspace.teams.createTeam.teamName")}
+              placeholder={t("workspace.teams.createTeam.teamNamePlaceholder")}
               value={newTeamName}
               onChange={(e) => setNewTeamName(e.currentTarget.value)}
               required
             />
 
             <Button onClick={handleCreateTeam} loading={processing} fullWidth size="md" mt="md">
-              {t('workspace.teams.createTeam.submit')}
+              {t("workspace.teams.createTeam.submit")}
             </Button>
           </Stack>
         </div>
@@ -389,39 +408,39 @@ export default function TeamsSection() {
         padding="xl"
         withCloseButton={false}
       >
-        <div style={{ position: 'relative' }}>
+        <div style={{ position: "relative" }}>
           <CloseButton
             onClick={() => setRenameModalOpened(false)}
             size="lg"
             style={{
-              position: 'absolute',
+              position: "absolute",
               top: -8,
               right: -8,
-              zIndex: 1
+              zIndex: 1,
             }}
           />
           <Stack gap="lg" pt="md">
             {/* Header with Icon */}
             <Stack gap="md" align="center">
-              <LocalIcon icon="edit" width="3rem" height="3rem" style={{ color: 'var(--mantine-color-gray-6)' }} />
+              <LocalIcon icon="edit" width="3rem" height="3rem" style={{ color: "var(--mantine-color-gray-6)" }} />
               <Text size="xl" fw={600} ta="center">
-                {t('workspace.teams.renameTeam.title')}
+                {t("workspace.teams.renameTeam.title")}
               </Text>
               <Text size="sm" c="dimmed" ta="center">
-                {t('workspace.teams.renameTeam.renaming')} <strong>{selectedTeam?.name}</strong>
+                {t("workspace.teams.renameTeam.renaming")} <strong>{selectedTeam?.name}</strong>
               </Text>
             </Stack>
 
             <TextInput
-              label={t('workspace.teams.renameTeam.newTeamName')}
-              placeholder={t('workspace.teams.renameTeam.newTeamNamePlaceholder')}
+              label={t("workspace.teams.renameTeam.newTeamName")}
+              placeholder={t("workspace.teams.renameTeam.newTeamNamePlaceholder")}
               value={renameTeamName}
               onChange={(e) => setRenameTeamName(e.currentTarget.value)}
               required
             />
 
             <Button onClick={handleRenameTeam} loading={processing} fullWidth size="md" mt="md">
-              {t('workspace.teams.renameTeam.submit')}
+              {t("workspace.teams.renameTeam.submit")}
             </Button>
           </Stack>
         </div>
@@ -437,50 +456,50 @@ export default function TeamsSection() {
         padding="xl"
         withCloseButton={false}
       >
-        <div style={{ position: 'relative' }}>
+        <div style={{ position: "relative" }}>
           <CloseButton
             onClick={() => setAddMemberModalOpened(false)}
             size="lg"
             style={{
-              position: 'absolute',
+              position: "absolute",
               top: -8,
               right: -8,
-              zIndex: 1
+              zIndex: 1,
             }}
           />
           <Stack gap="lg" pt="md">
             {/* Header with Icon */}
             <Stack gap="md" align="center">
-              <LocalIcon icon="person-add" width="3rem" height="3rem" style={{ color: 'var(--mantine-color-gray-6)' }} />
+              <LocalIcon icon="person-add" width="3rem" height="3rem" style={{ color: "var(--mantine-color-gray-6)" }} />
               <Text size="xl" fw={600} ta="center">
-                {t('workspace.teams.addMemberToTeam.title')}
+                {t("workspace.teams.addMemberToTeam.title")}
               </Text>
               <Text size="sm" c="dimmed" ta="center">
-                {t('workspace.teams.addMemberToTeam.addingTo')} <strong>{selectedTeam?.name}</strong>
+                {t("workspace.teams.addMemberToTeam.addingTo")} <strong>{selectedTeam?.name}</strong>
               </Text>
             </Stack>
 
             <Select
-              label={t('workspace.teams.addMemberToTeam.selectUser')}
-              placeholder={t('workspace.teams.addMemberToTeam.selectUserPlaceholder')}
+              label={t("workspace.teams.addMemberToTeam.selectUser")}
+              placeholder={t("workspace.teams.addMemberToTeam.selectUserPlaceholder")}
               data={availableUsers.map((user) => ({
                 value: user.id.toString(),
-                label: `${user.username}${user.team ? ` (${t('workspace.teams.addMemberToTeam.currentlyIn')} ${user.team.name})` : ''}`,
+                label: `${user.username}${user.team ? ` (${t("workspace.teams.addMemberToTeam.currentlyIn")} ${user.team.name})` : ""}`,
               }))}
               value={selectedUserId}
-              onChange={(value) => setSelectedUserId(value || '')}
+              onChange={(value) => setSelectedUserId(value || "")}
               searchable
               comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_CONFIG_MODAL }}
             />
 
             {selectedUserId && availableUsers.find((u) => u.id.toString() === selectedUserId)?.team && (
               <Text size="xs" c="orange">
-                {t('workspace.teams.addMemberToTeam.willBeMoved')}
+                {t("workspace.teams.addMemberToTeam.willBeMoved")}
               </Text>
             )}
 
             <Button onClick={handleAddMember} loading={processing} fullWidth size="md" mt="md">
-              {t('workspace.teams.addMemberToTeam.submit')}
+              {t("workspace.teams.addMemberToTeam.submit")}
             </Button>
           </Stack>
         </div>
diff --git a/frontend/src/proprietary/components/shared/config/configSections/apiKeys/ApiKeySection.tsx b/frontend/src/proprietary/components/shared/config/configSections/apiKeys/ApiKeySection.tsx
index e258dc6dca..3699b839fc 100644
--- a/frontend/src/proprietary/components/shared/config/configSections/apiKeys/ApiKeySection.tsx
+++ b/frontend/src/proprietary/components/shared/config/configSections/apiKeys/ApiKeySection.tsx
@@ -1,10 +1,5 @@
 import React from "react";
-import {
-  Box,
-  Button,
-  Group,
-  Paper,
-} from "@mantine/core";
+import { Box, Button, Group, Paper } from "@mantine/core";
 import LocalIcon from "@app/components/shared/LocalIcon";
 import FitText from "@app/components/shared/FitText";
 import { useTranslation } from "react-i18next";
@@ -17,17 +12,19 @@ interface ApiKeySectionProps {
   disabled?: boolean;
 }
 
-export default function ApiKeySection({
-  publicKey,
-  copied,
-  onCopy,
-  onRefresh,
-  disabled,
-}: ApiKeySectionProps) {
+export default function ApiKeySection({ publicKey, copied, onCopy, onRefresh, disabled }: ApiKeySectionProps) {
   const { t } = useTranslation();
   return (
     <>
-      <Paper radius="md" p={18} style={{ background: "var(--api-keys-card-bg)", border: "1px solid var(--api-keys-card-border)", boxShadow: "0 2px 8px var(--api-keys-card-shadow)" }}>
+      <Paper
+        radius="md"
+        p={18}
+        style={{
+          background: "var(--api-keys-card-bg)",
+          border: "1px solid var(--api-keys-card-border)",
+          boxShadow: "0 2px 8px var(--api-keys-card-shadow)",
+        }}
+      >
         <Group align="flex-end" wrap="nowrap">
           <Box style={{ flex: 1 }}>
             <Box
@@ -36,13 +33,14 @@ export default function ApiKeySection({
                 border: "1px solid var(--api-keys-input-border)",
                 borderRadius: 8,
                 padding: "8px 12px",
-                fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+                fontFamily:
+                  'ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
                 fontSize: 14,
                 minHeight: 36,
                 display: "flex",
                 alignItems: "center",
               }}
-              aria-label={t('config.apiKeys.publicKeyAriaLabel', 'Public API key')}
+              aria-label={t("config.apiKeys.publicKeyAriaLabel", "Public API key")}
             >
               <FitText text={publicKey} />
             </Box>
@@ -52,21 +50,35 @@ export default function ApiKeySection({
             variant="light"
             onClick={() => onCopy(publicKey, "public")}
             leftSection={<LocalIcon icon="content-copy-rounded" width={14} height={14} />}
-            styles={{ root: { background: "var(--api-keys-button-bg)", color: "var(--api-keys-button-color)", border: "none", marginLeft: 12 } }}
-            aria-label={t('config.apiKeys.copyKeyAriaLabel', 'Copy API key')}
+            styles={{
+              root: {
+                background: "var(--api-keys-button-bg)",
+                color: "var(--api-keys-button-color)",
+                border: "none",
+                marginLeft: 12,
+              },
+            }}
+            aria-label={t("config.apiKeys.copyKeyAriaLabel", "Copy API key")}
           >
-            {copied === "public" ? t('common.copied', 'Copied!') : t('common.copy', 'Copy')}
+            {copied === "public" ? t("common.copied", "Copied!") : t("common.copy", "Copy")}
           </Button>
           <Button
             size="sm"
             variant="light"
             onClick={onRefresh}
             leftSection={<LocalIcon icon="refresh-rounded" width={14} height={14} />}
-            styles={{ root: { background: "var(--api-keys-button-bg)", color: "var(--api-keys-button-color)", border: "none", marginLeft: 8 } }}
+            styles={{
+              root: {
+                background: "var(--api-keys-button-bg)",
+                color: "var(--api-keys-button-color)",
+                border: "none",
+                marginLeft: 8,
+              },
+            }}
             disabled={disabled}
-            aria-label={t('config.apiKeys.refreshAriaLabel', 'Refresh API key')}
+            aria-label={t("config.apiKeys.refreshAriaLabel", "Refresh API key")}
           >
-            {t('common.refresh', 'Refresh')}
+            {t("common.refresh", "Refresh")}
           </Button>
         </Group>
       </Paper>
diff --git a/frontend/src/proprietary/components/shared/config/configSections/apiKeys/RefreshModal.tsx b/frontend/src/proprietary/components/shared/config/configSections/apiKeys/RefreshModal.tsx
index faa6e60b49..2a39aa63f0 100644
--- a/frontend/src/proprietary/components/shared/config/configSections/apiKeys/RefreshModal.tsx
+++ b/frontend/src/proprietary/components/shared/config/configSections/apiKeys/RefreshModal.tsx
@@ -1,11 +1,5 @@
 import React from "react";
-import {
-  Modal,
-  Stack,
-  Text,
-  Group,
-  Button,
-} from "@mantine/core";
+import { Modal, Stack, Text, Group, Button } from "@mantine/core";
 import { useTranslation } from "react-i18next";
 import { Z_INDEX_OVER_CONFIG_MODAL } from "@app/styles/zIndex";
 
@@ -21,27 +15,33 @@ export default function RefreshModal({ opened, onClose, onConfirm }: RefreshModa
     <Modal
       opened={opened}
       onClose={onClose}
-      title={t('config.apiKeys.refreshModal.title', 'Refresh API Keys')}
+      title={t("config.apiKeys.refreshModal.title", "Refresh API Keys")}
       centered
       size="sm"
       zIndex={Z_INDEX_OVER_CONFIG_MODAL}
     >
       <Stack gap="md">
         <Text size="sm" c="red">
-          {t('config.apiKeys.refreshModal.warning', '⚠️ Warning: This action will generate new API keys and make your previous keys invalid.')}
+          {t(
+            "config.apiKeys.refreshModal.warning",
+            "⚠️ Warning: This action will generate new API keys and make your previous keys invalid.",
+          )}
         </Text>
         <Text size="sm">
-          {t('config.apiKeys.refreshModal.impact', 'Any applications or services currently using these keys will stop working until you update them with the new keys.')}
+          {t(
+            "config.apiKeys.refreshModal.impact",
+            "Any applications or services currently using these keys will stop working until you update them with the new keys.",
+          )}
         </Text>
         <Text size="sm" fw={500}>
-          {t('config.apiKeys.refreshModal.confirmPrompt', 'Are you sure you want to continue?')}
+          {t("config.apiKeys.refreshModal.confirmPrompt", "Are you sure you want to continue?")}
         </Text>
         <Group justify="flex-end" gap="sm">
           <Button variant="default" onClick={onClose}>
-            {t('common.cancel', 'Cancel')}
+            {t("common.cancel", "Cancel")}
           </Button>
           <Button color="red" onClick={onConfirm}>
-            {t('config.apiKeys.refreshModal.confirmCta', 'Refresh Keys')}
+            {t("config.apiKeys.refreshModal.confirmCta", "Refresh Keys")}
           </Button>
         </Group>
       </Stack>
diff --git a/frontend/src/proprietary/components/shared/config/configSections/apiKeys/hooks/useApiKey.ts b/frontend/src/proprietary/components/shared/config/configSections/apiKeys/hooks/useApiKey.ts
index 3115eb12f2..b543391c4e 100644
--- a/frontend/src/proprietary/components/shared/config/configSections/apiKeys/hooks/useApiKey.ts
+++ b/frontend/src/proprietary/components/shared/config/configSections/apiKeys/hooks/useApiKey.ts
@@ -78,38 +78,42 @@ export function useApiKey() {
   const refresh = useCallback(async () => {
     setIsRefreshing(true);
     setError(null);
-    await apiClient.post("/api/v1/user/update-api-key", undefined, {
-      responseType: "json",
-      suppressErrorToast: true,
-    }).then((res) => {
-      const value = typeof res.data === "string" ? res.data : res.data?.apiKey;
-      if (typeof value === "string") {
-        alert({
-          alertType: "success",
-          title: t("config.apiKeys.alert.apiKeyRefreshed", "API Key Refreshed"),
-          body: t("config.apiKeys.alert.apiKeyRefreshedBody", "Your API key has been successfully refreshed."),
-          isPersistentPopup: false,
-        });
-        setApiKey(value);
-      } else {
+    await apiClient
+      .post("/api/v1/user/update-api-key", undefined, {
+        responseType: "json",
+        suppressErrorToast: true,
+      })
+      .then((res) => {
+        const value = typeof res.data === "string" ? res.data : res.data?.apiKey;
+        if (typeof value === "string") {
+          alert({
+            alertType: "success",
+            title: t("config.apiKeys.alert.apiKeyRefreshed", "API Key Refreshed"),
+            body: t("config.apiKeys.alert.apiKeyRefreshedBody", "Your API key has been successfully refreshed."),
+            isPersistentPopup: false,
+          });
+          setApiKey(value);
+        } else {
+          alert({
+            alertType: "error",
+            title: t("config.apiKeys.alert.apiKeyErrorTitle", "API Key Error"),
+            body: t("config.apiKeys.alert.failedToRefreshApiKey", "Failed to refresh API key."),
+            isPersistentPopup: false,
+          });
+        }
+      })
+      .catch((e) => {
         alert({
           alertType: "error",
           title: t("config.apiKeys.alert.apiKeyErrorTitle", "API Key Error"),
           body: t("config.apiKeys.alert.failedToRefreshApiKey", "Failed to refresh API key."),
           isPersistentPopup: false,
         });
-      }
-    }).catch((e) => {
-      alert({
-        alertType: "error",
-        title: t("config.apiKeys.alert.apiKeyErrorTitle", "API Key Error"),
-        body: t("config.apiKeys.alert.failedToRefreshApiKey", "Failed to refresh API key."),
-          isPersistentPopup: false,
+        setError(e);
+      })
+      .finally(() => {
+        setIsRefreshing(false);
       });
-      setError(e);
-    }).finally(() => {
-      setIsRefreshing(false);
-    });
   }, []);
 
   useEffect(() => {
diff --git a/frontend/src/proprietary/components/shared/config/configSections/audit/AuditChartsSection.tsx b/frontend/src/proprietary/components/shared/config/configSections/audit/AuditChartsSection.tsx
index 2edb6ce448..523344752c 100644
--- a/frontend/src/proprietary/components/shared/config/configSections/audit/AuditChartsSection.tsx
+++ b/frontend/src/proprietary/components/shared/config/configSections/audit/AuditChartsSection.tsx
@@ -1,56 +1,35 @@
-import React, { useState, useEffect } from 'react';
-import {
-  Card,
-  Text,
-  Group,
-  Stack,
-  SegmentedControl,
-  Loader,
-  Alert,
-  Box,
-  SimpleGrid,
-} from '@mantine/core';
-import {
-  AreaChart,
-  Area,
-  BarChart,
-  Bar,
-  Cell,
-  XAxis,
-  YAxis,
-  CartesianGrid,
-  Tooltip,
-  ResponsiveContainer,
-} from 'recharts';
-import { useTranslation } from 'react-i18next';
-import auditService, { AuditChartsData } from '@app/services/auditService';
+import React, { useState, useEffect } from "react";
+import { Card, Text, Group, Stack, SegmentedControl, Loader, Alert, Box, SimpleGrid } from "@mantine/core";
+import { AreaChart, Area, BarChart, Bar, Cell, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from "recharts";
+import { useTranslation } from "react-i18next";
+import auditService, { AuditChartsData } from "@app/services/auditService";
 
 // Event type color mapping
 const EVENT_TYPE_COLORS: Record<string, string> = {
-  USER_LOGIN: 'var(--mantine-color-green-6)',
-  USER_LOGOUT: 'var(--mantine-color-gray-5)',
-  USER_FAILED_LOGIN: 'var(--mantine-color-red-6)',
-  USER_PROFILE_UPDATE: 'var(--mantine-color-blue-6)',
-  SETTINGS_CHANGED: 'var(--mantine-color-orange-6)',
-  FILE_OPERATION: 'var(--mantine-color-cyan-6)',
-  PDF_PROCESS: 'var(--mantine-color-violet-6)',
-  UI_DATA: 'var(--mantine-color-teal-6)',
-  HTTP_REQUEST: 'var(--mantine-color-indigo-6)',
+  USER_LOGIN: "var(--mantine-color-green-6)",
+  USER_LOGOUT: "var(--mantine-color-gray-5)",
+  USER_FAILED_LOGIN: "var(--mantine-color-red-6)",
+  USER_PROFILE_UPDATE: "var(--mantine-color-blue-6)",
+  SETTINGS_CHANGED: "var(--mantine-color-orange-6)",
+  FILE_OPERATION: "var(--mantine-color-cyan-6)",
+  PDF_PROCESS: "var(--mantine-color-violet-6)",
+  UI_DATA: "var(--mantine-color-teal-6)",
+  HTTP_REQUEST: "var(--mantine-color-indigo-6)",
 };
 
 const getEventTypeColor = (type: string): string => {
-  return EVENT_TYPE_COLORS[type] || 'var(--mantine-color-blue-6)';
+  return EVENT_TYPE_COLORS[type] || "var(--mantine-color-blue-6)";
 };
 
 interface AuditChartsSectionProps {
   loginEnabled?: boolean;
-  timePeriod?: 'day' | 'week' | 'month';
-  onTimePeriodChange?: (period: 'day' | 'week' | 'month') => void;
+  timePeriod?: "day" | "week" | "month";
+  onTimePeriodChange?: (period: "day" | "week" | "month") => void;
 }
 
 const AuditChartsSection: React.FC<AuditChartsSectionProps> = ({
   loginEnabled = true,
-  timePeriod = 'week',
+  timePeriod = "week",
   onTimePeriodChange,
 }) => {
   const { t } = useTranslation();
@@ -66,7 +45,7 @@ const AuditChartsSection: React.FC<AuditChartsSectionProps> = ({
         const data = await auditService.getChartsData(timePeriod);
         setChartsData(data);
       } catch (err) {
-        setError(err instanceof Error ? err.message : t('audit.charts.error', 'Failed to load charts'));
+        setError(err instanceof Error ? err.message : t("audit.charts.error", "Failed to load charts"));
       } finally {
         setLoading(false);
       }
@@ -78,15 +57,15 @@ const AuditChartsSection: React.FC<AuditChartsSectionProps> = ({
       // Demo data when login disabled
       setChartsData({
         eventsByType: {
-          labels: ['LOGIN', 'LOGOUT', 'SETTINGS_CHANGE', 'FILE_UPLOAD', 'FILE_DOWNLOAD'],
+          labels: ["LOGIN", "LOGOUT", "SETTINGS_CHANGE", "FILE_UPLOAD", "FILE_DOWNLOAD"],
           values: [342, 289, 145, 678, 523],
         },
         eventsByUser: {
-          labels: ['admin', 'user1', 'user2', 'user3', 'user4'],
+          labels: ["admin", "user1", "user2", "user3", "user4"],
           values: [456, 321, 287, 198, 165],
         },
         eventsOverTime: {
-          labels: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
+          labels: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
           values: [123, 145, 167, 189, 201, 87, 65],
         },
       });
@@ -106,7 +85,7 @@ const AuditChartsSection: React.FC<AuditChartsSectionProps> = ({
 
   if (error) {
     return (
-      <Alert color="red" title={t('audit.charts.error', 'Error loading charts')}>
+      <Alert color="red" title={t("audit.charts.error", "Error loading charts")}>
         {error}
       </Alert>
     );
@@ -137,18 +116,18 @@ const AuditChartsSection: React.FC<AuditChartsSectionProps> = ({
       {/* Header with time period selector */}
       <Group justify="space-between" align="center">
         <Text size="lg" fw={600}>
-          {t('audit.charts.title', 'Audit Dashboard')}
+          {t("audit.charts.title", "Audit Dashboard")}
         </Text>
         <SegmentedControl
           value={timePeriod}
           onChange={(value) => {
-            onTimePeriodChange?.(value as 'day' | 'week' | 'month');
+            onTimePeriodChange?.(value as "day" | "week" | "month");
           }}
           disabled={!loginEnabled}
           data={[
-            { label: t('audit.charts.day', 'Day'), value: 'day' },
-            { label: t('audit.charts.week', 'Week'), value: 'week' },
-            { label: t('audit.charts.month', 'Month'), value: 'month' },
+            { label: t("audit.charts.day", "Day"), value: "day" },
+            { label: t("audit.charts.week", "Week"), value: "week" },
+            { label: t("audit.charts.month", "Month"), value: "month" },
           ]}
         />
       </Group>
@@ -157,9 +136,9 @@ const AuditChartsSection: React.FC<AuditChartsSectionProps> = ({
       <Card padding="lg" radius="md" withBorder>
         <Stack gap="md">
           <Text size="md" fw={600}>
-            {t('audit.charts.overTime', 'Events Over Time')}
+            {t("audit.charts.overTime", "Events Over Time")}
           </Text>
-          <Box style={{ width: '100%', height: 280 }}>
+          <Box style={{ width: "100%", height: 280 }}>
             {eventsOverTimeData.length > 0 ? (
               <ResponsiveContainer width="100%" height="100%">
                 <AreaChart data={eventsOverTimeData}>
@@ -174,10 +153,10 @@ const AuditChartsSection: React.FC<AuditChartsSectionProps> = ({
                   <YAxis stroke="var(--mantine-color-gray-6)" />
                   <Tooltip
                     contentStyle={{
-                      backgroundColor: 'var(--mantine-color-gray-8)',
-                      border: 'none',
-                      borderRadius: 'var(--mantine-radius-md)',
-                      color: 'var(--mantine-color-gray-0)',
+                      backgroundColor: "var(--mantine-color-gray-8)",
+                      border: "none",
+                      borderRadius: "var(--mantine-radius-md)",
+                      color: "var(--mantine-color-gray-0)",
                     }}
                   />
                   <Area
@@ -191,7 +170,7 @@ const AuditChartsSection: React.FC<AuditChartsSectionProps> = ({
               </ResponsiveContainer>
             ) : (
               <Group justify="center">
-                <Text c="dimmed">{t('audit.charts.noData', 'No data for this period')}</Text>
+                <Text c="dimmed">{t("audit.charts.noData", "No data for this period")}</Text>
               </Group>
             )}
           </Box>
@@ -204,9 +183,9 @@ const AuditChartsSection: React.FC<AuditChartsSectionProps> = ({
         <Card padding="lg" radius="md" withBorder>
           <Stack gap="md">
             <Text size="md" fw={600}>
-              {t('audit.charts.byType', 'Events by Type')}
+              {t("audit.charts.byType", "Events by Type")}
             </Text>
-            <Box style={{ width: '100%', height: 280 }}>
+            <Box style={{ width: "100%", height: 280 }}>
               {eventsByTypeData.length > 0 ? (
                 <ResponsiveContainer width="100%" height="100%">
                   <BarChart data={eventsByTypeData}>
@@ -215,10 +194,10 @@ const AuditChartsSection: React.FC<AuditChartsSectionProps> = ({
                     <YAxis stroke="var(--mantine-color-gray-6)" />
                     <Tooltip
                       contentStyle={{
-                        backgroundColor: 'var(--mantine-color-gray-8)',
-                        border: 'none',
-                        borderRadius: 'var(--mantine-radius-md)',
-                        color: 'var(--mantine-color-gray-0)',
+                        backgroundColor: "var(--mantine-color-gray-8)",
+                        border: "none",
+                        borderRadius: "var(--mantine-radius-md)",
+                        color: "var(--mantine-color-gray-0)",
                       }}
                     />
                     <Bar dataKey="value" fill="var(--mantine-color-blue-6)">
@@ -230,7 +209,7 @@ const AuditChartsSection: React.FC<AuditChartsSectionProps> = ({
                 </ResponsiveContainer>
               ) : (
                 <Group justify="center">
-                  <Text c="dimmed">{t('audit.charts.noData', 'No data')}</Text>
+                  <Text c="dimmed">{t("audit.charts.noData", "No data")}</Text>
                 </Group>
               )}
             </Box>
@@ -241,9 +220,9 @@ const AuditChartsSection: React.FC<AuditChartsSectionProps> = ({
         <Card padding="lg" radius="md" withBorder>
           <Stack gap="md">
             <Text size="md" fw={600}>
-              {t('audit.charts.byUser', 'Top Users')}
+              {t("audit.charts.byUser", "Top Users")}
             </Text>
-            <Box style={{ width: '100%', height: 280 }}>
+            <Box style={{ width: "100%", height: 280 }}>
               {eventsByUserData.length > 0 ? (
                 <ResponsiveContainer width="100%" height="100%">
                   <BarChart data={eventsByUserData} layout="vertical">
@@ -252,10 +231,10 @@ const AuditChartsSection: React.FC<AuditChartsSectionProps> = ({
                     <YAxis type="category" dataKey="user" stroke="var(--mantine-color-gray-6)" width={100} />
                     <Tooltip
                       contentStyle={{
-                        backgroundColor: 'var(--mantine-color-gray-8)',
-                        border: 'none',
-                        borderRadius: 'var(--mantine-radius-md)',
-                        color: 'var(--mantine-color-gray-0)',
+                        backgroundColor: "var(--mantine-color-gray-8)",
+                        border: "none",
+                        borderRadius: "var(--mantine-radius-md)",
+                        color: "var(--mantine-color-gray-0)",
                       }}
                     />
                     <Bar dataKey="value" fill="var(--mantine-color-green-6)" />
@@ -263,7 +242,7 @@ const AuditChartsSection: React.FC<AuditChartsSectionProps> = ({
                 </ResponsiveContainer>
               ) : (
                 <Group justify="center">
-                  <Text c="dimmed">{t('audit.charts.noData', 'No data')}</Text>
+                  <Text c="dimmed">{t("audit.charts.noData", "No data")}</Text>
                 </Group>
               )}
             </Box>
diff --git a/frontend/src/proprietary/components/shared/config/configSections/audit/AuditClearDataSection.tsx b/frontend/src/proprietary/components/shared/config/configSections/audit/AuditClearDataSection.tsx
index 85837306fa..43675307c6 100644
--- a/frontend/src/proprietary/components/shared/config/configSections/audit/AuditClearDataSection.tsx
+++ b/frontend/src/proprietary/components/shared/config/configSections/audit/AuditClearDataSection.tsx
@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
-import { Card, Stack, Text, PasswordInput, Button, Group, Alert, Code, Badge } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import auditService from '@app/services/auditService';
-import LocalIcon from '@app/components/shared/LocalIcon';
+import React, { useState } from "react";
+import { Card, Stack, Text, PasswordInput, Button, Group, Alert, Code, Badge } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import auditService from "@app/services/auditService";
+import LocalIcon from "@app/components/shared/LocalIcon";
 
 interface AuditClearDataSectionProps {
   loginEnabled?: boolean;
@@ -10,8 +10,8 @@ interface AuditClearDataSectionProps {
 
 const AuditClearDataSection: React.FC<AuditClearDataSectionProps> = ({ loginEnabled = true }) => {
   const { t } = useTranslation();
-  const [confirmationCode, setConfirmationCode] = useState('');
-  const [generatedCode, setGeneratedCode] = useState('');
+  const [confirmationCode, setConfirmationCode] = useState("");
+  const [generatedCode, setGeneratedCode] = useState("");
   const [showConfirmation, setShowConfirmation] = useState(false);
   const [clearing, setClearing] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -20,21 +20,21 @@ const AuditClearDataSection: React.FC<AuditClearDataSectionProps> = ({ loginEnab
   const handleInitiateDeletion = () => {
     const code = Math.random().toString(36).substring(2, 10).toUpperCase();
     setGeneratedCode(code);
-    setConfirmationCode('');
+    setConfirmationCode("");
     setShowConfirmation(true);
     setError(null);
   };
 
   const resetForm = () => {
-    setConfirmationCode('');
-    setGeneratedCode('');
+    setConfirmationCode("");
+    setGeneratedCode("");
     setShowConfirmation(false);
     setError(null);
   };
 
   const handleClearData = async () => {
     if (confirmationCode !== generatedCode) {
-      setError(t('audit.clearData.codeDoesNotMatch', 'Code does not match'));
+      setError(t("audit.clearData.codeDoesNotMatch", "Code does not match"));
       return;
     }
 
@@ -47,7 +47,7 @@ const AuditClearDataSection: React.FC<AuditClearDataSectionProps> = ({ loginEnab
       // Auto-dismiss success message after 5 seconds
       setTimeout(() => setSuccess(false), 5000);
     } catch (err) {
-      setError(err instanceof Error ? err.message : 'Failed to clear audit data');
+      setError(err instanceof Error ? err.message : "Failed to clear audit data");
     } finally {
       setClearing(false);
     }
@@ -59,12 +59,12 @@ const AuditClearDataSection: React.FC<AuditClearDataSectionProps> = ({ loginEnab
         <Alert
           color="green"
           icon={<LocalIcon icon="check-circle" width="1.2rem" height="1.2rem" />}
-          title={t('audit.clearData.success', 'Success')}
+          title={t("audit.clearData.success", "Success")}
           onClose={() => setSuccess(false)}
           closeButtonLabel="Close alert"
           withCloseButton
         >
-          {t('audit.clearData.successMessage', 'All audit data has been cleared successfully')}
+          {t("audit.clearData.successMessage", "All audit data has been cleared successfully")}
         </Alert>
       </Stack>
     );
@@ -76,52 +76,55 @@ const AuditClearDataSection: React.FC<AuditClearDataSectionProps> = ({ loginEnab
         <Alert
           color="orange"
           icon={<LocalIcon icon="warning" width="1.2rem" height="1.2rem" />}
-          title={t('audit.clearData.confirmTitle', 'Please confirm you want to delete')}
+          title={t("audit.clearData.confirmTitle", "Please confirm you want to delete")}
         >
           <Text size="sm">
-            {t('audit.clearData.confirmMessage', 'This will permanently remove all audit logs. Enter the confirmation code below to proceed.')}
+            {t(
+              "audit.clearData.confirmMessage",
+              "This will permanently remove all audit logs. Enter the confirmation code below to proceed.",
+            )}
           </Text>
         </Alert>
 
-        <Card padding="lg" radius="md" withBorder style={{ borderColor: 'var(--mantine-color-red-4)' }}>
+        <Card padding="lg" radius="md" withBorder style={{ borderColor: "var(--mantine-color-red-4)" }}>
           <Stack gap="md">
             <div
               style={{
-                backgroundColor: 'var(--mantine-color-gray-0)',
-                padding: '1rem',
-                borderRadius: '0.375rem',
-                border: '1px solid var(--mantine-color-gray-2)',
+                backgroundColor: "var(--mantine-color-gray-0)",
+                padding: "1rem",
+                borderRadius: "0.375rem",
+                border: "1px solid var(--mantine-color-gray-2)",
               }}
             >
               <Text size="xs" fw={600} c="dimmed" mb="xs">
-                {t('audit.clearData.confirmationCode', 'Confirmation Code')}
+                {t("audit.clearData.confirmationCode", "Confirmation Code")}
               </Text>
               <Code
                 style={{
-                  fontSize: '1.5rem',
-                  letterSpacing: '0.15em',
+                  fontSize: "1.5rem",
+                  letterSpacing: "0.15em",
                   fontWeight: 600,
-                  display: 'block',
-                  textAlign: 'center',
-                  padding: '0.75rem',
+                  display: "block",
+                  textAlign: "center",
+                  padding: "0.75rem",
                 }}
               >
                 {generatedCode}
               </Code>
               <Text size="xs" c="dimmed" mt="xs">
-                {t('audit.clearData.enterCodeBelow', 'Enter the code exactly as shown above (case-sensitive)')}
+                {t("audit.clearData.enterCodeBelow", "Enter the code exactly as shown above (case-sensitive)")}
               </Text>
             </div>
 
             <PasswordInput
-              label={t('audit.clearData.enterCode', 'Confirmation Code')}
-              placeholder={t('audit.clearData.codePlaceholder', 'Type the code here')}
+              label={t("audit.clearData.enterCode", "Confirmation Code")}
+              placeholder={t("audit.clearData.codePlaceholder", "Type the code here")}
               value={confirmationCode}
               onChange={(e) => setConfirmationCode(e.currentTarget.value)}
               disabled={!loginEnabled}
               error={
                 confirmationCode && confirmationCode !== generatedCode
-                  ? t('audit.clearData.codeDoesNotMatch', 'Code does not match')
+                  ? t("audit.clearData.codeDoesNotMatch", "Code does not match")
                   : false
               }
             />
@@ -134,7 +137,7 @@ const AuditClearDataSection: React.FC<AuditClearDataSectionProps> = ({ loginEnab
 
             <Group justify="space-between">
               <Button variant="default" onClick={resetForm} disabled={clearing}>
-                {t('audit.clearData.cancel', 'Cancel')}
+                {t("audit.clearData.cancel", "Cancel")}
               </Button>
               <Button
                 color="red"
@@ -142,7 +145,7 @@ const AuditClearDataSection: React.FC<AuditClearDataSectionProps> = ({ loginEnab
                 loading={clearing}
                 disabled={!loginEnabled || !generatedCode || confirmationCode !== generatedCode}
               >
-                {t('audit.clearData.deleteButton', 'Delete')}
+                {t("audit.clearData.deleteButton", "Delete")}
               </Button>
             </Group>
           </Stack>
@@ -156,31 +159,25 @@ const AuditClearDataSection: React.FC<AuditClearDataSectionProps> = ({ loginEnab
       <Alert
         color="red"
         icon={<LocalIcon icon="warning" width="1.2rem" height="1.2rem" />}
-        title={t('audit.clearData.warning1', 'This action cannot be undone')}
+        title={t("audit.clearData.warning1", "This action cannot be undone")}
       >
         <Text size="sm">
-          {t('audit.clearData.warning2', 'Deleting audit data will permanently remove all historical audit logs, including security events, user activities, and file operations from the database.')}
+          {t(
+            "audit.clearData.warning2",
+            "Deleting audit data will permanently remove all historical audit logs, including security events, user activities, and file operations from the database.",
+          )}
         </Text>
       </Alert>
 
-      <Card padding="lg" radius="md" withBorder style={{ borderColor: 'var(--mantine-color-red-4)' }}>
+      <Card padding="lg" radius="md" withBorder style={{ borderColor: "var(--mantine-color-red-4)" }}>
         <Stack gap="md">
           <Group>
-            <Text fw={600}>
-              {t('audit.clearData.confirmationRequired', 'Delete All Audit Data')}
-            </Text>
-            <Badge color="red">
-              {t('audit.clearData.irreversible', 'IRREVERSIBLE')}
-            </Badge>
+            <Text fw={600}>{t("audit.clearData.confirmationRequired", "Delete All Audit Data")}</Text>
+            <Badge color="red">{t("audit.clearData.irreversible", "IRREVERSIBLE")}</Badge>
           </Group>
 
-          <Button
-            color="red"
-            onClick={handleInitiateDeletion}
-            disabled={!loginEnabled}
-            fullWidth
-          >
-            {t('audit.clearData.initiateDelete', 'Delete All Data')}
+          <Button color="red" onClick={handleInitiateDeletion} disabled={!loginEnabled} fullWidth>
+            {t("audit.clearData.initiateDelete", "Delete All Data")}
           </Button>
         </Stack>
       </Card>
diff --git a/frontend/src/proprietary/components/shared/config/configSections/audit/AuditEventsTable.tsx b/frontend/src/proprietary/components/shared/config/configSections/audit/AuditEventsTable.tsx
index f1e60bd02a..78ffb1628b 100644
--- a/frontend/src/proprietary/components/shared/config/configSections/audit/AuditEventsTable.tsx
+++ b/frontend/src/proprietary/components/shared/config/configSections/audit/AuditEventsTable.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect } from "react";
 import {
   Card,
   Text,
@@ -13,13 +13,13 @@ import {
   Table,
   Badge,
   UnstyledButton,
-} from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import auditService, { AuditEvent, AuditFilters } from '@app/services/auditService';
-import { Z_INDEX_OVER_CONFIG_MODAL } from '@app/styles/zIndex';
-import { useAuditFilters } from '@app/hooks/useAuditFilters';
-import AuditFiltersForm from '@app/components/shared/config/configSections/audit/AuditFiltersForm';
-import LocalIcon from '@app/components/shared/LocalIcon';
+} from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import auditService, { AuditEvent, AuditFilters } from "@app/services/auditService";
+import { Z_INDEX_OVER_CONFIG_MODAL } from "@app/styles/zIndex";
+import { useAuditFilters } from "@app/hooks/useAuditFilters";
+import AuditFiltersForm from "@app/components/shared/config/configSections/audit/AuditFiltersForm";
+import LocalIcon from "@app/components/shared/LocalIcon";
 
 interface AuditEventsTableProps {
   loginEnabled?: boolean;
@@ -39,17 +39,20 @@ const AuditEventsTable: React.FC<AuditEventsTableProps> = ({
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [selectedEvent, setSelectedEvent] = useState<AuditEvent | null>(null);
-  const [sortKey, setSortKey] = useState<'timestamp' | 'eventType' | 'username' | 'ipAddress' | null>('timestamp');
-  const [sortDir, setSortDir] = useState<'asc' | 'desc'>('desc');
+  const [sortKey, setSortKey] = useState<"timestamp" | "eventType" | "username" | "ipAddress" | null>("timestamp");
+  const [sortDir, setSortDir] = useState<"asc" | "desc">("desc");
   const showAuthor = capturePdfAuthor;
   const showFileHash = captureFileHash;
   const totalColumns = 5 + (showAuthor ? 1 : 0) + (showFileHash ? 1 : 0);
 
   // Use shared filters hook
-  const { filters, eventTypes, users, handleFilterChange, handleClearFilters } = useAuditFilters({
-    page: 0,
-    pageSize: 20,
-  }, loginEnabled);
+  const { filters, eventTypes, users, handleFilterChange, handleClearFilters } = useAuditFilters(
+    {
+      page: 0,
+      pageSize: 20,
+    },
+    loginEnabled,
+  );
 
   useEffect(() => {
     const fetchEvents = async () => {
@@ -63,7 +66,7 @@ const AuditEventsTable: React.FC<AuditEventsTableProps> = ({
         setEvents(response.events);
         setTotalPages(response.totalPages);
       } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to load events');
+        setError(err instanceof Error ? err.message : "Failed to load events");
       } finally {
         setLoading(false);
       }
@@ -76,44 +79,44 @@ const AuditEventsTable: React.FC<AuditEventsTableProps> = ({
       const now = new Date();
       setEvents([
         {
-          id: '1',
+          id: "1",
           timestamp: new Date(now.getTime() - 1000 * 60 * 15).toISOString(),
-          eventType: 'LOGIN',
-          username: 'admin',
-          ipAddress: '192.168.1.100',
-          details: { message: 'User logged in successfully' },
+          eventType: "LOGIN",
+          username: "admin",
+          ipAddress: "192.168.1.100",
+          details: { message: "User logged in successfully" },
         },
         {
-          id: '2',
+          id: "2",
           timestamp: new Date(now.getTime() - 1000 * 60 * 30).toISOString(),
-          eventType: 'FILE_UPLOAD',
-          username: 'user1',
-          ipAddress: '192.168.1.101',
-          details: { message: 'Uploaded document.pdf' },
+          eventType: "FILE_UPLOAD",
+          username: "user1",
+          ipAddress: "192.168.1.101",
+          details: { message: "Uploaded document.pdf" },
         },
         {
-          id: '3',
+          id: "3",
           timestamp: new Date(now.getTime() - 1000 * 60 * 45).toISOString(),
-          eventType: 'SETTINGS_CHANGE',
-          username: 'admin',
-          ipAddress: '192.168.1.100',
-          details: { message: 'Modified system settings' },
+          eventType: "SETTINGS_CHANGE",
+          username: "admin",
+          ipAddress: "192.168.1.100",
+          details: { message: "Modified system settings" },
         },
         {
-          id: '4',
+          id: "4",
           timestamp: new Date(now.getTime() - 1000 * 60 * 60).toISOString(),
-          eventType: 'FILE_DOWNLOAD',
-          username: 'user2',
-          ipAddress: '192.168.1.102',
-          details: { message: 'Downloaded report.pdf' },
+          eventType: "FILE_DOWNLOAD",
+          username: "user2",
+          ipAddress: "192.168.1.102",
+          details: { message: "Downloaded report.pdf" },
         },
         {
-          id: '5',
+          id: "5",
           timestamp: new Date(now.getTime() - 1000 * 60 * 90).toISOString(),
-          eventType: 'LOGOUT',
-          username: 'user1',
-          ipAddress: '192.168.1.101',
-          details: { message: 'User logged out' },
+          eventType: "LOGOUT",
+          username: "user1",
+          ipAddress: "192.168.1.101",
+          details: { message: "User logged out" },
         },
       ]);
       setTotalPages(1);
@@ -137,35 +140,35 @@ const AuditEventsTable: React.FC<AuditEventsTableProps> = ({
   };
 
   // Sort handling
-  const toggleSort = (key: 'timestamp' | 'eventType' | 'username' | 'ipAddress') => {
+  const toggleSort = (key: "timestamp" | "eventType" | "username" | "ipAddress") => {
     if (sortKey === key) {
-      setSortDir(sortDir === 'asc' ? 'desc' : 'asc');
+      setSortDir(sortDir === "asc" ? "desc" : "asc");
     } else {
       setSortKey(key);
-      setSortDir('asc');
+      setSortDir("asc");
     }
   };
 
-  const getSortIcon = (key: 'timestamp' | 'eventType' | 'username' | 'ipAddress') => {
-    if (sortKey !== key) return 'unfold-more';
-    return sortDir === 'asc' ? 'expand-less' : 'expand-more';
+  const getSortIcon = (key: "timestamp" | "eventType" | "username" | "ipAddress") => {
+    if (sortKey !== key) return "unfold-more";
+    return sortDir === "asc" ? "expand-less" : "expand-more";
   };
 
   // Event type colors
   const EVENT_TYPE_COLORS: Record<string, string> = {
-    USER_LOGIN: 'green',
-    USER_LOGOUT: 'gray',
-    USER_FAILED_LOGIN: 'red',
-    USER_PROFILE_UPDATE: 'blue',
-    SETTINGS_CHANGED: 'orange',
-    FILE_OPERATION: 'cyan',
-    PDF_PROCESS: 'violet',
-    UI_DATA: 'gray',
-    HTTP_REQUEST: 'indigo',
+    USER_LOGIN: "green",
+    USER_LOGOUT: "gray",
+    USER_FAILED_LOGIN: "red",
+    USER_PROFILE_UPDATE: "blue",
+    SETTINGS_CHANGED: "orange",
+    FILE_OPERATION: "cyan",
+    PDF_PROCESS: "violet",
+    UI_DATA: "gray",
+    HTTP_REQUEST: "indigo",
   };
 
   const getEventTypeColor = (type: string): string => {
-    return EVENT_TYPE_COLORS[type] || 'blue';
+    return EVENT_TYPE_COLORS[type] || "blue";
   };
 
   // Apply sorting to current events
@@ -174,19 +177,19 @@ const AuditEventsTable: React.FC<AuditEventsTableProps> = ({
     let bVal: string | number | undefined;
 
     switch (sortKey) {
-      case 'timestamp':
+      case "timestamp":
         aVal = new Date(a.timestamp).getTime();
         bVal = new Date(b.timestamp).getTime();
         break;
-      case 'eventType':
+      case "eventType":
         aVal = a.eventType;
         bVal = b.eventType;
         break;
-      case 'username':
+      case "username":
         aVal = a.username;
         bVal = b.username;
         break;
-      case 'ipAddress':
+      case "ipAddress":
         aVal = a.ipAddress;
         bVal = b.ipAddress;
         break;
@@ -194,8 +197,8 @@ const AuditEventsTable: React.FC<AuditEventsTableProps> = ({
         return 0;
     }
 
-    if (aVal < bVal) return sortDir === 'asc' ? -1 : 1;
-    if (aVal > bVal) return sortDir === 'asc' ? 1 : -1;
+    if (aVal < bVal) return sortDir === "asc" ? -1 : 1;
+    if (aVal > bVal) return sortDir === "asc" ? 1 : -1;
     return 0;
   });
 
@@ -203,7 +206,7 @@ const AuditEventsTable: React.FC<AuditEventsTableProps> = ({
     <Card padding="lg" radius="md" withBorder>
       <Stack gap="md">
         <Text size="lg" fw={600}>
-          {t('audit.events.title', 'Audit Events')}
+          {t("audit.events.title", "Audit Events")}
         </Text>
 
         {/* Filters */}
@@ -218,153 +221,161 @@ const AuditEventsTable: React.FC<AuditEventsTableProps> = ({
 
         {/* Table */}
         {loading ? (
-          <div style={{ display: 'flex', justifyContent: 'center' }}>
+          <div style={{ display: "flex", justifyContent: "center" }}>
             <Loader size="lg" my="xl" />
           </div>
         ) : error ? (
-          <Alert color="red" title={t('audit.events.error', 'Error loading events')}>
+          <Alert color="red" title={t("audit.events.error", "Error loading events")}>
             {error}
           </Alert>
         ) : (
           <>
-            <div style={{ overflowX: 'auto', overflowY: 'hidden', marginBottom: '1rem' }}>
-            <Table
-              horizontalSpacing="md"
-              verticalSpacing="sm"
-              withRowBorders
-              highlightOnHover
-              style={{
-                '--table-border-color': 'var(--mantine-color-gray-3)',
-              } as React.CSSProperties}
-            >
-              <Table.Thead>
-                <Table.Tr style={{ backgroundColor: 'var(--mantine-color-gray-0)' }}>
-                  <Table.Th style={{ fontWeight: 600, color: 'var(--mantine-color-gray-7)', padding: '0.5rem' }} fz="sm">
-                    <UnstyledButton onClick={() => toggleSort('timestamp')} style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer', userSelect: 'none' }}>
-                      {t('audit.events.timestamp', 'Timestamp')}
-                      <LocalIcon icon={getSortIcon('timestamp')} width="0.9rem" height="0.9rem" />
-                    </UnstyledButton>
-                  </Table.Th>
-                  <Table.Th style={{ fontWeight: 600, color: 'var(--mantine-color-gray-7)', padding: '0.5rem' }} fz="sm">
-                    <UnstyledButton onClick={() => toggleSort('eventType')} style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer', userSelect: 'none' }}>
-                      {t('audit.events.type', 'Type')}
-                      <LocalIcon icon={getSortIcon('eventType')} width="0.9rem" height="0.9rem" />
-                    </UnstyledButton>
-                  </Table.Th>
-                  <Table.Th style={{ fontWeight: 600, color: 'var(--mantine-color-gray-7)', padding: '0.5rem' }} fz="sm">
-                    <UnstyledButton onClick={() => toggleSort('username')} style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', cursor: 'pointer', userSelect: 'none' }}>
-                      {t('audit.events.user', 'User')}
-                      <LocalIcon icon={getSortIcon('username')} width="0.9rem" height="0.9rem" />
-                    </UnstyledButton>
-                  </Table.Th>
-                  <Table.Th style={{ fontWeight: 600, color: 'var(--mantine-color-gray-7)' }} fz="sm">
-                    {t('audit.events.documentName', 'Document Name')}
-                  </Table.Th>
-                  {showAuthor && (
-                    <Table.Th style={{ fontWeight: 600, color: 'var(--mantine-color-gray-7)' }} fz="sm">
-                      {t('audit.events.author', 'Author')}
+            <div style={{ overflowX: "auto", overflowY: "hidden", marginBottom: "1rem" }}>
+              <Table
+                horizontalSpacing="md"
+                verticalSpacing="sm"
+                withRowBorders
+                highlightOnHover
+                style={
+                  {
+                    "--table-border-color": "var(--mantine-color-gray-3)",
+                  } as React.CSSProperties
+                }
+              >
+                <Table.Thead>
+                  <Table.Tr style={{ backgroundColor: "var(--mantine-color-gray-0)" }}>
+                    <Table.Th style={{ fontWeight: 600, color: "var(--mantine-color-gray-7)", padding: "0.5rem" }} fz="sm">
+                      <UnstyledButton
+                        onClick={() => toggleSort("timestamp")}
+                        style={{ display: "flex", alignItems: "center", gap: "0.5rem", cursor: "pointer", userSelect: "none" }}
+                      >
+                        {t("audit.events.timestamp", "Timestamp")}
+                        <LocalIcon icon={getSortIcon("timestamp")} width="0.9rem" height="0.9rem" />
+                      </UnstyledButton>
                     </Table.Th>
-                  )}
-                  {showFileHash && (
-                    <Table.Th style={{ fontWeight: 600, color: 'var(--mantine-color-gray-7)' }} fz="sm">
-                      {t('audit.events.fileHash', 'File Hash')}
+                    <Table.Th style={{ fontWeight: 600, color: "var(--mantine-color-gray-7)", padding: "0.5rem" }} fz="sm">
+                      <UnstyledButton
+                        onClick={() => toggleSort("eventType")}
+                        style={{ display: "flex", alignItems: "center", gap: "0.5rem", cursor: "pointer", userSelect: "none" }}
+                      >
+                        {t("audit.events.type", "Type")}
+                        <LocalIcon icon={getSortIcon("eventType")} width="0.9rem" height="0.9rem" />
+                      </UnstyledButton>
+                    </Table.Th>
+                    <Table.Th style={{ fontWeight: 600, color: "var(--mantine-color-gray-7)", padding: "0.5rem" }} fz="sm">
+                      <UnstyledButton
+                        onClick={() => toggleSort("username")}
+                        style={{ display: "flex", alignItems: "center", gap: "0.5rem", cursor: "pointer", userSelect: "none" }}
+                      >
+                        {t("audit.events.user", "User")}
+                        <LocalIcon icon={getSortIcon("username")} width="0.9rem" height="0.9rem" />
+                      </UnstyledButton>
+                    </Table.Th>
+                    <Table.Th style={{ fontWeight: 600, color: "var(--mantine-color-gray-7)" }} fz="sm">
+                      {t("audit.events.documentName", "Document Name")}
+                    </Table.Th>
+                    {showAuthor && (
+                      <Table.Th style={{ fontWeight: 600, color: "var(--mantine-color-gray-7)" }} fz="sm">
+                        {t("audit.events.author", "Author")}
+                      </Table.Th>
+                    )}
+                    {showFileHash && (
+                      <Table.Th style={{ fontWeight: 600, color: "var(--mantine-color-gray-7)" }} fz="sm">
+                        {t("audit.events.fileHash", "File Hash")}
+                      </Table.Th>
+                    )}
+                    <Table.Th style={{ fontWeight: 600, color: "var(--mantine-color-gray-7)" }} fz="sm" ta="center">
+                      {t("audit.events.actions", "Actions")}
                     </Table.Th>
-                  )}
-                  <Table.Th style={{ fontWeight: 600, color: 'var(--mantine-color-gray-7)' }} fz="sm" ta="center">
-                    {t('audit.events.actions', 'Actions')}
-                  </Table.Th>
-                </Table.Tr>
-              </Table.Thead>
-              <Table.Tbody>
-                {sortedEvents.length === 0 ? (
-                  <Table.Tr>
-                    <Table.Td colSpan={totalColumns}>
-                      <Group justify="center" py="xl">
-                        <Stack align="center" gap={0}>
-                          <LocalIcon icon="search" width="2rem" height="2rem" style={{ opacity: 0.4 }} />
-                          <Text ta="center" c="dimmed" size="sm">
-                            {t('audit.events.noEvents', 'No events found')}
-                          </Text>
-                        </Stack>
-                      </Group>
-                    </Table.Td>
                   </Table.Tr>
-                ) : (
-                  sortedEvents.map((event) => {
-                    // Extract document name, author, hash from details.files if available
-                    let documentName = '';
-                    let author = '';
-                    let fileHash = '';
-                    if (event.details && typeof event.details === 'object') {
-                      const details = event.details as Record<string, unknown>;
-                      const files = details.files;
-                      if (Array.isArray(files) && files.length > 0) {
-                        const firstFile = files[0] as Record<string, unknown>;
-                        documentName = typeof firstFile.name === 'string' ? firstFile.name : '';
-                        if (showAuthor || showFileHash) {
-                          author = typeof firstFile.pdfAuthor === 'string' ? firstFile.pdfAuthor : '';
-                          fileHash = typeof firstFile.fileHash === 'string' ? firstFile.fileHash.substring(0, 16) + '...' : '';
+                </Table.Thead>
+                <Table.Tbody>
+                  {sortedEvents.length === 0 ? (
+                    <Table.Tr>
+                      <Table.Td colSpan={totalColumns}>
+                        <Group justify="center" py="xl">
+                          <Stack align="center" gap={0}>
+                            <LocalIcon icon="search" width="2rem" height="2rem" style={{ opacity: 0.4 }} />
+                            <Text ta="center" c="dimmed" size="sm">
+                              {t("audit.events.noEvents", "No events found")}
+                            </Text>
+                          </Stack>
+                        </Group>
+                      </Table.Td>
+                    </Table.Tr>
+                  ) : (
+                    sortedEvents.map((event) => {
+                      // Extract document name, author, hash from details.files if available
+                      let documentName = "";
+                      let author = "";
+                      let fileHash = "";
+                      if (event.details && typeof event.details === "object") {
+                        const details = event.details as Record<string, unknown>;
+                        const files = details.files;
+                        if (Array.isArray(files) && files.length > 0) {
+                          const firstFile = files[0] as Record<string, unknown>;
+                          documentName = typeof firstFile.name === "string" ? firstFile.name : "";
+                          if (showAuthor || showFileHash) {
+                            author = typeof firstFile.pdfAuthor === "string" ? firstFile.pdfAuthor : "";
+                            fileHash =
+                              typeof firstFile.fileHash === "string" ? firstFile.fileHash.substring(0, 16) + "..." : "";
+                          }
                         }
                       }
-                    }
 
-                    return (
-                      <Table.Tr key={event.id}>
-                        <Table.Td>
-                          <Text size="sm">{formatDate(event.timestamp)}</Text>
-                        </Table.Td>
-                        <Table.Td>
-                          <Badge variant="light" size="sm" color={getEventTypeColor(event.eventType)}>
-                            {event.eventType}
-                          </Badge>
-                        </Table.Td>
-                        <Table.Td>
-                          <Text size="sm">{event.username}</Text>
-                        </Table.Td>
-                        <Table.Td>
-                          <Text size="sm" title={documentName}>
-                            {documentName || '—'}
-                          </Text>
-                        </Table.Td>
-                        {showAuthor && (
+                      return (
+                        <Table.Tr key={event.id}>
                           <Table.Td>
-                            <Text size="sm">{author}</Text>
+                            <Text size="sm">{formatDate(event.timestamp)}</Text>
                           </Table.Td>
-                        )}
-                        {showFileHash && (
                           <Table.Td>
-                            <Text size="sm" title={fileHash} style={{ fontFamily: 'monospace', fontSize: '0.75rem' }}>
-                              {fileHash}
+                            <Badge variant="light" size="sm" color={getEventTypeColor(event.eventType)}>
+                              {event.eventType}
+                            </Badge>
+                          </Table.Td>
+                          <Table.Td>
+                            <Text size="sm">{event.username}</Text>
+                          </Table.Td>
+                          <Table.Td>
+                            <Text size="sm" title={documentName}>
+                              {documentName || "—"}
                             </Text>
                           </Table.Td>
-                        )}
-                        <Table.Td ta="center">
-                          <Button
-                            variant="subtle"
-                            size="xs"
-                            onClick={() => setSelectedEvent(event)}
-                            disabled={!loginEnabled}
-                          >
-                            {t('audit.events.viewDetails', 'View Details')}
-                          </Button>
-                        </Table.Td>
-                      </Table.Tr>
-                    );
-                  })
-                )}
-              </Table.Tbody>
-            </Table>
+                          {showAuthor && (
+                            <Table.Td>
+                              <Text size="sm">{author}</Text>
+                            </Table.Td>
+                          )}
+                          {showFileHash && (
+                            <Table.Td>
+                              <Text size="sm" title={fileHash} style={{ fontFamily: "monospace", fontSize: "0.75rem" }}>
+                                {fileHash}
+                              </Text>
+                            </Table.Td>
+                          )}
+                          <Table.Td ta="center">
+                            <Button
+                              variant="subtle"
+                              size="xs"
+                              onClick={() => setSelectedEvent(event)}
+                              disabled={!loginEnabled}
+                            >
+                              {t("audit.events.viewDetails", "View Details")}
+                            </Button>
+                          </Table.Td>
+                        </Table.Tr>
+                      );
+                    })
+                  )}
+                </Table.Tbody>
+              </Table>
 
-            {/* Pagination */}
-            {totalPages > 1 && (
-              <Group justify="center" mt="md">
-                <Pagination
-                  value={currentPage}
-                  onChange={setCurrentPage}
-                  total={totalPages}
-                />
-              </Group>
-            )}
+              {/* Pagination */}
+              {totalPages > 1 && (
+                <Group justify="center" mt="md">
+                  <Pagination value={currentPage} onChange={setCurrentPage} total={totalPages} />
+                </Group>
+              )}
             </div>
           </>
         )}
@@ -374,7 +385,7 @@ const AuditEventsTable: React.FC<AuditEventsTableProps> = ({
       <Modal
         opened={selectedEvent !== null}
         onClose={() => setSelectedEvent(null)}
-        title={t('audit.events.eventDetails', 'Event Details')}
+        title={t("audit.events.eventDetails", "Event Details")}
         size="lg"
         zIndex={Z_INDEX_OVER_CONFIG_MODAL}
       >
@@ -382,33 +393,33 @@ const AuditEventsTable: React.FC<AuditEventsTableProps> = ({
           <Stack gap="md">
             <div>
               <Text size="sm" fw={600} c="dimmed">
-                {t('audit.events.timestamp', 'Timestamp')}
+                {t("audit.events.timestamp", "Timestamp")}
               </Text>
               <Text size="sm">{formatDate(selectedEvent.timestamp)}</Text>
             </div>
             <div>
               <Text size="sm" fw={600} c="dimmed">
-                {t('audit.events.type', 'Type')}
+                {t("audit.events.type", "Type")}
               </Text>
               <Text size="sm">{selectedEvent.eventType}</Text>
             </div>
             <div>
               <Text size="sm" fw={600} c="dimmed">
-                {t('audit.events.user', 'User')}
+                {t("audit.events.user", "User")}
               </Text>
               <Text size="sm">{selectedEvent.username}</Text>
             </div>
             <div>
               <Text size="sm" fw={600} c="dimmed">
-                {t('audit.events.ipAddress', 'IP Address')}
+                {t("audit.events.ipAddress", "IP Address")}
               </Text>
               <Text size="sm">{selectedEvent.ipAddress}</Text>
             </div>
             <div>
               <Text size="sm" fw={600} c="dimmed">
-                {t('audit.events.details', 'Details')}
+                {t("audit.events.details", "Details")}
               </Text>
-              <Code block mah={300} style={{ overflow: 'auto' }}>
+              <Code block mah={300} style={{ overflow: "auto" }}>
                 {JSON.stringify(selectedEvent.details, null, 2)}
               </Code>
             </div>
diff --git a/frontend/src/proprietary/components/shared/config/configSections/audit/AuditExportSection.tsx b/frontend/src/proprietary/components/shared/config/configSections/audit/AuditExportSection.tsx
index 5852c2f1ef..9d6cb446da 100644
--- a/frontend/src/proprietary/components/shared/config/configSections/audit/AuditExportSection.tsx
+++ b/frontend/src/proprietary/components/shared/config/configSections/audit/AuditExportSection.tsx
@@ -1,18 +1,10 @@
-import React, { useState } from 'react';
-import {
-  Card,
-  Text,
-  Group,
-  Stack,
-  Button,
-  SegmentedControl,
-  Checkbox,
-} from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import auditService from '@app/services/auditService';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { useAuditFilters } from '@app/hooks/useAuditFilters';
-import AuditFiltersForm from '@app/components/shared/config/configSections/audit/AuditFiltersForm';
+import React, { useState } from "react";
+import { Card, Text, Group, Stack, Button, SegmentedControl, Checkbox } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import auditService from "@app/services/auditService";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { useAuditFilters } from "@app/hooks/useAuditFilters";
+import AuditFiltersForm from "@app/components/shared/config/configSections/audit/AuditFiltersForm";
 
 interface AuditExportSectionProps {
   loginEnabled?: boolean;
@@ -28,7 +20,7 @@ const AuditExportSection: React.FC<AuditExportSectionProps> = ({
   captureOperationResults = false,
 }) => {
   const { t } = useTranslation();
-  const [exportFormat, setExportFormat] = useState<'csv' | 'json'>('csv');
+  const [exportFormat, setExportFormat] = useState<"csv" | "json">("csv");
   const [exporting, setExporting] = useState(false);
   const [selectedFields, setSelectedFields] = useState<Record<string, boolean>>({
     date: true,
@@ -51,13 +43,15 @@ const AuditExportSection: React.FC<AuditExportSectionProps> = ({
     try {
       setExporting(true);
 
-      const fieldsParam = Object.keys(selectedFields).filter(k => selectedFields[k]).join(',');
+      const fieldsParam = Object.keys(selectedFields)
+        .filter((k) => selectedFields[k])
+        .join(",");
 
       const blob = await auditService.exportData(exportFormat, { ...filters, fields: fieldsParam });
 
       // Create download link
       const url = window.URL.createObjectURL(blob);
-      const link = document.createElement('a');
+      const link = document.createElement("a");
       link.href = url;
       link.download = `audit-export-${new Date().toISOString()}.${exportFormat}`;
       document.body.appendChild(link);
@@ -65,8 +59,8 @@ const AuditExportSection: React.FC<AuditExportSectionProps> = ({
       document.body.removeChild(link);
       window.URL.revokeObjectURL(url);
     } catch (err) {
-      console.error('Export failed:', err);
-      alert(t('audit.export.error', 'Failed to export data'));
+      console.error("Export failed:", err);
+      alert(t("audit.export.error", "Failed to export data"));
     } finally {
       setExporting(false);
     }
@@ -76,108 +70,105 @@ const AuditExportSection: React.FC<AuditExportSectionProps> = ({
     <Card padding="lg" radius="md" withBorder>
       <Stack gap="md">
         <Text size="lg" fw={600}>
-          {t('audit.export.title', 'Export Audit Data')}
+          {t("audit.export.title", "Export Audit Data")}
         </Text>
 
         <Text size="sm" c="dimmed">
-          {t(
-            'audit.export.description',
-            'Export audit events to CSV or JSON format. Use filters to limit the exported data.'
-          )}
+          {t("audit.export.description", "Export audit events to CSV or JSON format. Use filters to limit the exported data.")}
         </Text>
 
         {/* Format Selection */}
         <div>
           <Text size="sm" fw={600} mb="xs">
-            {t('audit.export.format', 'Export Format')}
+            {t("audit.export.format", "Export Format")}
           </Text>
           <SegmentedControl
             value={exportFormat}
             onChange={(value) => {
               if (!loginEnabled) return;
-              setExportFormat(value as 'csv' | 'json');
+              setExportFormat(value as "csv" | "json");
             }}
             disabled={!loginEnabled}
             data={[
-              { label: 'CSV', value: 'csv' },
-              { label: 'JSON', value: 'json' },
+              { label: "CSV", value: "csv" },
+              { label: "JSON", value: "json" },
             ]}
           />
         </div>
 
         {/* Field Selection */}
         <div>
-            <Text size="sm" fw={600} mb="xs">
-              {t('audit.export.selectFields', 'Select Fields to Include')}
-            </Text>
-            <Stack gap="xs">
+          <Text size="sm" fw={600} mb="xs">
+            {t("audit.export.selectFields", "Select Fields to Include")}
+          </Text>
+          <Stack gap="xs">
+            <Checkbox
+              label={t("audit.export.fieldDate", "Date")}
+              checked={selectedFields.date}
+              onChange={(e) => setSelectedFields({ ...selectedFields, date: e.currentTarget.checked })}
+              disabled={!loginEnabled}
+            />
+            <Checkbox
+              label={t("audit.export.fieldUsername", "Username")}
+              checked={selectedFields.username}
+              onChange={(e) => setSelectedFields({ ...selectedFields, username: e.currentTarget.checked })}
+              disabled={!loginEnabled}
+            />
+            <Checkbox
+              label={t("audit.export.fieldIpAddress", "IP Address")}
+              checked={selectedFields.ipaddress}
+              onChange={(e) => setSelectedFields({ ...selectedFields, ipaddress: e.currentTarget.checked })}
+              disabled={!loginEnabled}
+            />
+            <Checkbox
+              label={t("audit.export.fieldTool", "Tool")}
+              checked={selectedFields.tool}
+              onChange={(e) => setSelectedFields({ ...selectedFields, tool: e.currentTarget.checked })}
+              disabled={!loginEnabled}
+            />
+            <Checkbox
+              label={t("audit.export.fieldDocumentName", "Document Name")}
+              checked={selectedFields.documentName}
+              onChange={(e) => setSelectedFields({ ...selectedFields, documentName: e.currentTarget.checked })}
+              disabled={!loginEnabled}
+            />
+            <Checkbox
+              label={t("audit.export.fieldOutcome", "Outcome (Success/Failure)")}
+              checked={selectedFields.outcome}
+              onChange={(e) => setSelectedFields({ ...selectedFields, outcome: e.currentTarget.checked })}
+              disabled={!loginEnabled}
+            />
+            {capturePdfAuthor && (
               <Checkbox
-                label={t('audit.export.fieldDate', 'Date')}
-                checked={selectedFields.date}
-                onChange={(e) => setSelectedFields({ ...selectedFields, date: e.currentTarget.checked })}
+                label={t("audit.export.fieldAuthor", "Author (from PDF)")}
+                checked={selectedFields.author}
+                onChange={(e) => setSelectedFields({ ...selectedFields, author: e.currentTarget.checked })}
                 disabled={!loginEnabled}
               />
+            )}
+            {captureFileHash && (
               <Checkbox
-                label={t('audit.export.fieldUsername', 'Username')}
-                checked={selectedFields.username}
-                onChange={(e) => setSelectedFields({ ...selectedFields, username: e.currentTarget.checked })}
+                label={t("audit.export.fieldFileHash", "File Hash (SHA-256)")}
+                checked={selectedFields.fileHash}
+                onChange={(e) => setSelectedFields({ ...selectedFields, fileHash: e.currentTarget.checked })}
                 disabled={!loginEnabled}
               />
+            )}
+            {captureOperationResults && (
               <Checkbox
-                label={t('audit.export.fieldIpAddress', 'IP Address')}
-                checked={selectedFields.ipaddress}
-                onChange={(e) => setSelectedFields({ ...selectedFields, ipaddress: e.currentTarget.checked })}
+                label={t("audit.export.fieldOperationResults", "Operation Results")}
+                checked={selectedFields.operationResults}
+                onChange={(e) => setSelectedFields({ ...selectedFields, operationResults: e.currentTarget.checked })}
                 disabled={!loginEnabled}
               />
-              <Checkbox
-                label={t('audit.export.fieldTool', 'Tool')}
-                checked={selectedFields.tool}
-                onChange={(e) => setSelectedFields({ ...selectedFields, tool: e.currentTarget.checked })}
-                disabled={!loginEnabled}
-              />
-              <Checkbox
-                label={t('audit.export.fieldDocumentName', 'Document Name')}
-                checked={selectedFields.documentName}
-                onChange={(e) => setSelectedFields({ ...selectedFields, documentName: e.currentTarget.checked })}
-                disabled={!loginEnabled}
-              />
-              <Checkbox
-                label={t('audit.export.fieldOutcome', 'Outcome (Success/Failure)')}
-                checked={selectedFields.outcome}
-                onChange={(e) => setSelectedFields({ ...selectedFields, outcome: e.currentTarget.checked })}
-                disabled={!loginEnabled}
-              />
-              {capturePdfAuthor && (
-                <Checkbox
-                  label={t('audit.export.fieldAuthor', 'Author (from PDF)')}
-                  checked={selectedFields.author}
-                  onChange={(e) => setSelectedFields({ ...selectedFields, author: e.currentTarget.checked })}
-                  disabled={!loginEnabled}
-                />
-              )}
-              {captureFileHash && (
-                <Checkbox
-                  label={t('audit.export.fieldFileHash', 'File Hash (SHA-256)')}
-                  checked={selectedFields.fileHash}
-                  onChange={(e) => setSelectedFields({ ...selectedFields, fileHash: e.currentTarget.checked })}
-                  disabled={!loginEnabled}
-                />
-              )}
-              {captureOperationResults && (
-                <Checkbox
-                  label={t('audit.export.fieldOperationResults', 'Operation Results')}
-                  checked={selectedFields.operationResults}
-                  onChange={(e) => setSelectedFields({ ...selectedFields, operationResults: e.currentTarget.checked })}
-                  disabled={!loginEnabled}
-                />
-              )}
-            </Stack>
+            )}
+          </Stack>
         </div>
 
         {/* Filters */}
         <div>
           <Text size="sm" fw={600} mb="xs">
-            {t('audit.export.filters', 'Filters (Optional)')}
+            {t("audit.export.filters", "Filters (Optional)")}
           </Text>
           <AuditFiltersForm
             filters={filters}
@@ -197,7 +188,7 @@ const AuditExportSection: React.FC<AuditExportSectionProps> = ({
             loading={exporting}
             disabled={!loginEnabled || exporting}
           >
-            {t('audit.export.exportButton', 'Export Data')}
+            {t("audit.export.exportButton", "Export Data")}
           </Button>
         </Group>
       </Stack>
diff --git a/frontend/src/proprietary/components/shared/config/configSections/audit/AuditFiltersForm.tsx b/frontend/src/proprietary/components/shared/config/configSections/audit/AuditFiltersForm.tsx
index f04e36c287..53e84724df 100644
--- a/frontend/src/proprietary/components/shared/config/configSections/audit/AuditFiltersForm.tsx
+++ b/frontend/src/proprietary/components/shared/config/configSections/audit/AuditFiltersForm.tsx
@@ -1,15 +1,15 @@
-import React from 'react';
-import { Group, MultiSelect, Button, Stack, SimpleGrid, Text } from '@mantine/core';
-import { DateInput } from '@mantine/dates';
-import { useTranslation } from 'react-i18next';
-import { AuditFilters } from '@app/services/auditService';
-import { Z_INDEX_OVER_CONFIG_MODAL } from '@app/styles/zIndex';
+import React from "react";
+import { Group, MultiSelect, Button, Stack, SimpleGrid, Text } from "@mantine/core";
+import { DateInput } from "@mantine/dates";
+import { useTranslation } from "react-i18next";
+import { AuditFilters } from "@app/services/auditService";
+import { Z_INDEX_OVER_CONFIG_MODAL } from "@app/styles/zIndex";
 
 // Helper to format date as YYYY-MM-DD in local time (avoids DST/UTC issues)
 const formatDateToYMD = (date: Date): string => {
   const year = date.getFullYear();
-  const month = String(date.getMonth() + 1).padStart(2, '0');
-  const day = String(date.getDate()).padStart(2, '0');
+  const month = String(date.getMonth() + 1).padStart(2, "0");
+  const day = String(date.getDate()).padStart(2, "0");
   return `${year}-${month}-${day}`;
 };
 
@@ -19,17 +19,17 @@ const getDateRange = (preset: string): [Date, Date] | null => {
   const start = new Date();
 
   switch (preset) {
-    case 'today':
+    case "today":
       start.setHours(0, 0, 0, 0);
       end.setHours(23, 59, 59, 999);
       return [start, end];
-    case 'last7':
+    case "last7":
       start.setDate(start.getDate() - 6);
       return [start, end];
-    case 'last30':
+    case "last30":
       start.setDate(start.getDate() - 29);
       return [start, end];
-    case 'thisMonth':
+    case "thisMonth":
       start.setDate(1);
       start.setHours(0, 0, 0, 0);
       end.setHours(23, 59, 59, 999);
@@ -65,8 +65,8 @@ const AuditFiltersForm: React.FC<AuditFiltersFormProps> = ({
     const range = getDateRange(preset);
     if (range) {
       const [start, end] = range;
-      onFilterChange('startDate', formatDateToYMD(start));
-      onFilterChange('endDate', formatDateToYMD(end));
+      onFilterChange("startDate", formatDateToYMD(start));
+      onFilterChange("endDate", formatDateToYMD(end));
     }
   };
 
@@ -85,40 +85,40 @@ const AuditFiltersForm: React.FC<AuditFiltersFormProps> = ({
       {/* Quick Preset Buttons */}
       <div>
         <Text size="xs" fw={600} mb="xs" c="dimmed">
-          {t('audit.filters.quickPresets', 'Quick filters')}
+          {t("audit.filters.quickPresets", "Quick filters")}
         </Text>
         <Group gap="xs">
           <Button
-            variant={isPresetActive('today') ? 'filled' : 'light'}
+            variant={isPresetActive("today") ? "filled" : "light"}
             size="xs"
-            onClick={() => handleQuickPreset('today')}
+            onClick={() => handleQuickPreset("today")}
             disabled={disabled}
           >
-            {t('audit.filters.today', 'Today')}
+            {t("audit.filters.today", "Today")}
           </Button>
           <Button
-            variant={isPresetActive('last7') ? 'filled' : 'light'}
+            variant={isPresetActive("last7") ? "filled" : "light"}
             size="xs"
-            onClick={() => handleQuickPreset('last7')}
+            onClick={() => handleQuickPreset("last7")}
             disabled={disabled}
           >
-            {t('audit.filters.last7Days', 'Last 7 days')}
+            {t("audit.filters.last7Days", "Last 7 days")}
           </Button>
           <Button
-            variant={isPresetActive('last30') ? 'filled' : 'light'}
+            variant={isPresetActive("last30") ? "filled" : "light"}
             size="xs"
-            onClick={() => handleQuickPreset('last30')}
+            onClick={() => handleQuickPreset("last30")}
             disabled={disabled}
           >
-            {t('audit.filters.last30Days', 'Last 30 days')}
+            {t("audit.filters.last30Days", "Last 30 days")}
           </Button>
           <Button
-            variant={isPresetActive('thisMonth') ? 'filled' : 'light'}
+            variant={isPresetActive("thisMonth") ? "filled" : "light"}
             size="xs"
-            onClick={() => handleQuickPreset('thisMonth')}
+            onClick={() => handleQuickPreset("thisMonth")}
             disabled={disabled}
           >
-            {t('audit.filters.thisMonth', 'This month')}
+            {t("audit.filters.thisMonth", "This month")}
           </Button>
         </Group>
       </div>
@@ -126,39 +126,39 @@ const AuditFiltersForm: React.FC<AuditFiltersFormProps> = ({
       {/* Filter Inputs */}
       <SimpleGrid cols={{ base: 1, sm: 2, md: 4 }} spacing="sm">
         <MultiSelect
-          placeholder={t('audit.events.filterByType', 'Filter by type')}
+          placeholder={t("audit.events.filterByType", "Filter by type")}
           data={eventTypes.map((type) => ({ value: type, label: type }))}
-          value={Array.isArray(filters.eventType) ? filters.eventType : (filters.eventType ? [filters.eventType] : [])}
-          onChange={(value) => onFilterChange('eventType', value.length > 0 ? value : undefined)}
+          value={Array.isArray(filters.eventType) ? filters.eventType : filters.eventType ? [filters.eventType] : []}
+          onChange={(value) => onFilterChange("eventType", value.length > 0 ? value : undefined)}
           clearable
           disabled={disabled}
           comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_CONFIG_MODAL }}
         />
         <MultiSelect
-          placeholder={t('audit.events.filterByUser', 'Filter by user')}
+          placeholder={t("audit.events.filterByUser", "Filter by user")}
           data={users.map((user) => ({ value: user, label: user }))}
-          value={Array.isArray(filters.username) ? filters.username : (filters.username ? [filters.username] : [])}
-          onChange={(value) => onFilterChange('username', value.length > 0 ? value : undefined)}
+          value={Array.isArray(filters.username) ? filters.username : filters.username ? [filters.username] : []}
+          onChange={(value) => onFilterChange("username", value.length > 0 ? value : undefined)}
           clearable
           searchable
           disabled={disabled}
           comboboxProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_CONFIG_MODAL }}
         />
         <DateInput
-          placeholder={t('audit.events.startDate', 'Start date')}
+          placeholder={t("audit.events.startDate", "Start date")}
           value={filters.startDate ? new Date(filters.startDate) : null}
           onChange={(value) => {
-            onFilterChange('startDate', value ? formatDateToYMD(new Date(value)) : undefined);
+            onFilterChange("startDate", value ? formatDateToYMD(new Date(value)) : undefined);
           }}
           clearable
           disabled={disabled}
           popoverProps={{ withinPortal: true, zIndex: Z_INDEX_OVER_CONFIG_MODAL }}
         />
         <DateInput
-          placeholder={t('audit.events.endDate', 'End date')}
+          placeholder={t("audit.events.endDate", "End date")}
           value={filters.endDate ? new Date(filters.endDate) : null}
           onChange={(value) => {
-            onFilterChange('endDate', value ? formatDateToYMD(new Date(value)) : undefined);
+            onFilterChange("endDate", value ? formatDateToYMD(new Date(value)) : undefined);
           }}
           clearable
           disabled={disabled}
@@ -169,7 +169,7 @@ const AuditFiltersForm: React.FC<AuditFiltersFormProps> = ({
       {/* Clear Button */}
       <Group justify="flex-end">
         <Button variant="outline" size="sm" onClick={onClearFilters} disabled={disabled}>
-          {t('audit.events.clearFilters', 'Clear')}
+          {t("audit.events.clearFilters", "Clear")}
         </Button>
       </Group>
     </Stack>
diff --git a/frontend/src/proprietary/components/shared/config/configSections/audit/AuditStatsCards.tsx b/frontend/src/proprietary/components/shared/config/configSections/audit/AuditStatsCards.tsx
index 1b232d02a4..b0563a05ca 100644
--- a/frontend/src/proprietary/components/shared/config/configSections/audit/AuditStatsCards.tsx
+++ b/frontend/src/proprietary/components/shared/config/configSections/audit/AuditStatsCards.tsx
@@ -1,15 +1,15 @@
-import React, { useState, useEffect } from 'react';
-import { Card, Group, Stack, Text, Badge, SimpleGrid, Loader, Alert } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import auditService, { AuditStats } from '@app/services/auditService';
-import LocalIcon from '@app/components/shared/LocalIcon';
+import React, { useState, useEffect } from "react";
+import { Card, Group, Stack, Text, Badge, SimpleGrid, Loader, Alert } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import auditService, { AuditStats } from "@app/services/auditService";
+import LocalIcon from "@app/components/shared/LocalIcon";
 
 interface AuditStatsCardsProps {
   loginEnabled?: boolean;
-  timePeriod: 'day' | 'week' | 'month';
+  timePeriod: "day" | "week" | "month";
 }
 
-const AuditStatsCards: React.FC<AuditStatsCardsProps> = ({ loginEnabled = true, timePeriod = 'week' }) => {
+const AuditStatsCards: React.FC<AuditStatsCardsProps> = ({ loginEnabled = true, timePeriod = "week" }) => {
   const { t } = useTranslation();
   const [stats, setStats] = useState<AuditStats | null>(null);
   const [loading, setLoading] = useState(true);
@@ -23,7 +23,7 @@ const AuditStatsCards: React.FC<AuditStatsCardsProps> = ({ loginEnabled = true,
         const data = await auditService.getStats(timePeriod);
         setStats(data);
       } catch (err) {
-        setError(err instanceof Error ? err.message : 'Failed to load statistics');
+        setError(err instanceof Error ? err.message : "Failed to load statistics");
       } finally {
         setLoading(false);
       }
@@ -43,8 +43,8 @@ const AuditStatsCards: React.FC<AuditStatsCardsProps> = ({ loginEnabled = true,
         avgLatencyMs: 342,
         prevAvgLatencyMs: 385,
         errorCount: 148,
-        topEventType: 'PDF_PROCESS',
-        topUser: 'admin',
+        topEventType: "PDF_PROCESS",
+        topUser: "admin",
         eventsByType: {},
         eventsByUser: {},
         topTools: {},
@@ -57,7 +57,7 @@ const AuditStatsCards: React.FC<AuditStatsCardsProps> = ({ loginEnabled = true,
   if (loading) {
     return (
       <Card padding="lg" radius="md" withBorder>
-        <div style={{ display: 'flex', justifyContent: 'center', alignItems: 'center', padding: '2rem 0' }}>
+        <div style={{ display: "flex", justifyContent: "center", alignItems: "center", padding: "2rem 0" }}>
           <Loader size="lg" />
         </div>
       </Card>
@@ -66,7 +66,7 @@ const AuditStatsCards: React.FC<AuditStatsCardsProps> = ({ loginEnabled = true,
 
   if (error) {
     return (
-      <Alert color="red" title={t('audit.stats.error', 'Error loading statistics')}>
+      <Alert color="red" title={t("audit.stats.error", "Error loading statistics")}>
         {error}
       </Alert>
     );
@@ -76,27 +76,30 @@ const AuditStatsCards: React.FC<AuditStatsCardsProps> = ({ loginEnabled = true,
     return null;
   }
 
-  const trendPercent = stats.prevTotalEvents > 0 ? ((stats.totalEvents - stats.prevTotalEvents) / stats.prevTotalEvents) * 100 : 0;
-  const userTrend = stats.prevUniqueUsers > 0 ? ((stats.uniqueUsers - stats.prevUniqueUsers) / stats.prevUniqueUsers) * 100 : 0;
-  const latencyTrend = stats.prevAvgLatencyMs > 0 ? ((stats.avgLatencyMs - stats.prevAvgLatencyMs) / stats.prevAvgLatencyMs) * 100 : 0;
+  const trendPercent =
+    stats.prevTotalEvents > 0 ? ((stats.totalEvents - stats.prevTotalEvents) / stats.prevTotalEvents) * 100 : 0;
+  const userTrend =
+    stats.prevUniqueUsers > 0 ? ((stats.uniqueUsers - stats.prevUniqueUsers) / stats.prevUniqueUsers) * 100 : 0;
+  const latencyTrend =
+    stats.prevAvgLatencyMs > 0 ? ((stats.avgLatencyMs - stats.prevAvgLatencyMs) / stats.prevAvgLatencyMs) * 100 : 0;
   const successTrend = stats.prevSuccessRate > 0 ? stats.successRate - stats.prevSuccessRate : 0;
 
   const getSuccessRateColor = (rate: number) => {
-    if (rate >= 95) return 'green';
-    if (rate >= 80) return 'yellow';
-    return 'red';
+    if (rate >= 95) return "green";
+    if (rate >= 80) return "yellow";
+    return "red";
   };
 
   const getTrendColor = (trend: number, lowerIsBetter: boolean = false) => {
     if (lowerIsBetter) {
-      return trend <= 0 ? 'green' : 'red';
+      return trend <= 0 ? "green" : "red";
     }
-    return trend >= 0 ? 'green' : 'red';
+    return trend >= 0 ? "green" : "red";
   };
 
   const getTrendIcon = (trend: number, lowerIsBetter: boolean = false) => {
     const isPositive = lowerIsBetter ? trend <= 0 : trend >= 0;
-    return isPositive ? 'trending-up' : 'trending-down';
+    return isPositive ? "trending-up" : "trending-down";
   };
 
   return (
@@ -106,7 +109,7 @@ const AuditStatsCards: React.FC<AuditStatsCardsProps> = ({ loginEnabled = true,
         <Stack gap="md">
           <Group justify="space-between">
             <Text size="sm" c="dimmed">
-              {t('audit.stats.totalEvents', 'Total Events')}
+              {t("audit.stats.totalEvents", "Total Events")}
             </Text>
             <LocalIcon icon="analytics" width="1.2rem" height="1.2rem" />
           </Group>
@@ -123,11 +126,11 @@ const AuditStatsCards: React.FC<AuditStatsCardsProps> = ({ loginEnabled = true,
                   icon={getTrendIcon(trendPercent)}
                   width="0.8rem"
                   height="0.8rem"
-                  style={{ marginRight: '0.25rem' }}
+                  style={{ marginRight: "0.25rem" }}
                 />
               }
             >
-              {Math.abs(trendPercent).toFixed(1)}% {t('audit.stats.vsLastPeriod', 'vs last period')}
+              {Math.abs(trendPercent).toFixed(1)}% {t("audit.stats.vsLastPeriod", "vs last period")}
             </Badge>
           )}
         </Stack>
@@ -138,7 +141,7 @@ const AuditStatsCards: React.FC<AuditStatsCardsProps> = ({ loginEnabled = true,
         <Stack gap="md">
           <Group justify="space-between">
             <Text size="sm" c="dimmed">
-              {t('audit.stats.successRate', 'Success Rate')}
+              {t("audit.stats.successRate", "Success Rate")}
             </Text>
             <LocalIcon icon="check-circle-rounded" width="1.2rem" height="1.2rem" />
           </Group>
@@ -148,14 +151,15 @@ const AuditStatsCards: React.FC<AuditStatsCardsProps> = ({ loginEnabled = true,
           <Group gap="xs">
             <Badge color={getSuccessRateColor(stats.successRate)} variant="light" size="sm">
               {stats.successRate >= 95
-                ? t('audit.stats.excellent', 'Excellent')
+                ? t("audit.stats.excellent", "Excellent")
                 : stats.successRate >= 80
-                  ? t('audit.stats.good', 'Good')
-                  : t('audit.stats.attention', 'Attention needed')}
+                  ? t("audit.stats.good", "Good")
+                  : t("audit.stats.attention", "Attention needed")}
             </Badge>
             {successTrend !== 0 && (
               <Badge color={getTrendColor(successTrend)} variant="light" size="xs">
-                {successTrend > 0 ? '+' : ''}{successTrend.toFixed(1)}%
+                {successTrend > 0 ? "+" : ""}
+                {successTrend.toFixed(1)}%
               </Badge>
             )}
           </Group>
@@ -167,7 +171,7 @@ const AuditStatsCards: React.FC<AuditStatsCardsProps> = ({ loginEnabled = true,
         <Stack gap="md">
           <Group justify="space-between">
             <Text size="sm" c="dimmed">
-              {t('audit.stats.activeUsers', 'Active Users')}
+              {t("audit.stats.activeUsers", "Active Users")}
             </Text>
             <LocalIcon icon="group" width="1.2rem" height="1.2rem" />
           </Group>
@@ -180,12 +184,7 @@ const AuditStatsCards: React.FC<AuditStatsCardsProps> = ({ loginEnabled = true,
               variant="light"
               size="sm"
               leftSection={
-                <LocalIcon
-                  icon={getTrendIcon(userTrend)}
-                  width="0.8rem"
-                  height="0.8rem"
-                  style={{ marginRight: '0.25rem' }}
-                />
+                <LocalIcon icon={getTrendIcon(userTrend)} width="0.8rem" height="0.8rem" style={{ marginRight: "0.25rem" }} />
               }
             >
               {Math.abs(userTrend).toFixed(1)}%
@@ -199,12 +198,12 @@ const AuditStatsCards: React.FC<AuditStatsCardsProps> = ({ loginEnabled = true,
         <Stack gap="md">
           <Group justify="space-between">
             <Text size="sm" c="dimmed">
-              {t('audit.stats.avgLatency', 'Avg Latency')}
+              {t("audit.stats.avgLatency", "Avg Latency")}
             </Text>
             <LocalIcon icon="speed" width="1.2rem" height="1.2rem" />
           </Group>
           <Text size="xl" fw={700}>
-            {stats.avgLatencyMs > 0 ? `${stats.avgLatencyMs.toFixed(0)}ms` : t('audit.stats.noData', 'N/A')}
+            {stats.avgLatencyMs > 0 ? `${stats.avgLatencyMs.toFixed(0)}ms` : t("audit.stats.noData", "N/A")}
           </Text>
           {latencyTrend !== 0 && stats.avgLatencyMs > 0 && (
             <Badge
@@ -216,7 +215,7 @@ const AuditStatsCards: React.FC<AuditStatsCardsProps> = ({ loginEnabled = true,
                   icon={getTrendIcon(latencyTrend, true)}
                   width="0.8rem"
                   height="0.8rem"
-                  style={{ marginRight: '0.25rem' }}
+                  style={{ marginRight: "0.25rem" }}
                 />
               }
             >
diff --git a/frontend/src/proprietary/components/shared/config/configSections/audit/AuditSystemStatus.tsx b/frontend/src/proprietary/components/shared/config/configSections/audit/AuditSystemStatus.tsx
index 8063fe9f68..8894e443c5 100644
--- a/frontend/src/proprietary/components/shared/config/configSections/audit/AuditSystemStatus.tsx
+++ b/frontend/src/proprietary/components/shared/config/configSections/audit/AuditSystemStatus.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
-import { Card, Group, Stack, Badge, Text, Divider } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { AuditSystemStatus as AuditStatus } from '@app/services/auditService';
+import React from "react";
+import { Card, Group, Stack, Badge, Text, Divider } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { AuditSystemStatus as AuditStatus } from "@app/services/auditService";
 
 interface AuditSystemStatusProps {
   status: AuditStatus;
@@ -14,24 +14,22 @@ const AuditSystemStatus: React.FC<AuditSystemStatusProps> = ({ status }) => {
     <Card padding="lg" radius="md" withBorder>
       <Stack gap="md">
         <Text size="lg" fw={600}>
-          {t('audit.systemStatus.title', 'System Status')}
+          {t("audit.systemStatus.title", "System Status")}
         </Text>
 
         <Group justify="space-between">
           <div>
             <Text size="sm" c="dimmed">
-              {t('audit.systemStatus.status', 'Audit Logging')}
+              {t("audit.systemStatus.status", "Audit Logging")}
             </Text>
-            <Badge color={status.enabled ? 'green' : 'red'} variant="light" size="lg" mt="xs">
-              {status.enabled
-                ? t('audit.systemStatus.enabled', 'Enabled')
-                : t('audit.systemStatus.disabled', 'Disabled')}
+            <Badge color={status.enabled ? "green" : "red"} variant="light" size="lg" mt="xs">
+              {status.enabled ? t("audit.systemStatus.enabled", "Enabled") : t("audit.systemStatus.disabled", "Disabled")}
             </Badge>
           </div>
 
           <div>
             <Text size="sm" c="dimmed">
-              {t('audit.systemStatus.level', 'Audit Level')}
+              {t("audit.systemStatus.level", "Audit Level")}
             </Text>
             <Text size="lg" fw={600} mt="xs">
               {status.level}
@@ -40,16 +38,16 @@ const AuditSystemStatus: React.FC<AuditSystemStatusProps> = ({ status }) => {
 
           <div>
             <Text size="sm" c="dimmed">
-              {t('audit.systemStatus.retention', 'Retention Period')}
+              {t("audit.systemStatus.retention", "Retention Period")}
             </Text>
             <Text size="lg" fw={600} mt="xs">
-              {status.retentionDays} {t('audit.systemStatus.days', 'days')}
+              {status.retentionDays} {t("audit.systemStatus.days", "days")}
             </Text>
           </div>
 
           <div>
             <Text size="sm" c="dimmed">
-              {t('audit.systemStatus.totalEvents', 'Total Events')}
+              {t("audit.systemStatus.totalEvents", "Total Events")}
             </Text>
             <Text size="lg" fw={600} mt="xs">
               {status.totalEvents.toLocaleString()}
@@ -61,34 +59,34 @@ const AuditSystemStatus: React.FC<AuditSystemStatusProps> = ({ status }) => {
 
         <div>
           <Text size="sm" fw={600} mb="xs">
-            {t('audit.systemStatus.capturedFields', 'Captured Fields')}
+            {t("audit.systemStatus.capturedFields", "Captured Fields")}
           </Text>
           <Group gap="xs">
             <Badge color="green" variant="light" size="sm">
-              {t('audit.systemStatus.username', 'Username')}
+              {t("audit.systemStatus.username", "Username")}
             </Badge>
             <Badge color="green" variant="light" size="sm">
-              {t('audit.systemStatus.documentName', 'Document Name')}
+              {t("audit.systemStatus.documentName", "Document Name")}
             </Badge>
             <Badge color="green" variant="light" size="sm">
-              {t('audit.systemStatus.tool', 'Tool')}
+              {t("audit.systemStatus.tool", "Tool")}
             </Badge>
             <Badge color="green" variant="light" size="sm">
-              {t('audit.systemStatus.date', 'Date')}
+              {t("audit.systemStatus.date", "Date")}
             </Badge>
-            <Badge color={status.capturePdfAuthor ? 'green' : 'gray'} variant="light" size="sm">
-              {t('audit.systemStatus.pdfAuthor', 'PDF Author')}
+            <Badge color={status.capturePdfAuthor ? "green" : "gray"} variant="light" size="sm">
+              {t("audit.systemStatus.pdfAuthor", "PDF Author")}
               {!status.capturePdfAuthor && (
-                <span style={{ marginLeft: '0.5rem', fontSize: '0.75rem', opacity: 0.7 }}>
-                  ({t('audit.systemStatus.captureBySettings', 'Enable in settings')})
+                <span style={{ marginLeft: "0.5rem", fontSize: "0.75rem", opacity: 0.7 }}>
+                  ({t("audit.systemStatus.captureBySettings", "Enable in settings")})
                 </span>
               )}
             </Badge>
-            <Badge color={status.captureFileHash ? 'green' : 'gray'} variant="light" size="sm">
-              {t('audit.systemStatus.fileHash', 'File Hash')}
+            <Badge color={status.captureFileHash ? "green" : "gray"} variant="light" size="sm">
+              {t("audit.systemStatus.fileHash", "File Hash")}
               {!status.captureFileHash && (
-                <span style={{ marginLeft: '0.5rem', fontSize: '0.75rem', opacity: 0.7 }}>
-                  ({t('audit.systemStatus.captureBySettings', 'Enable in settings')})
+                <span style={{ marginLeft: "0.5rem", fontSize: "0.75rem", opacity: 0.7 }}>
+                  ({t("audit.systemStatus.captureBySettings", "Enable in settings")})
                 </span>
               )}
             </Badge>
diff --git a/frontend/src/proprietary/components/shared/config/configSections/plan/AvailablePlansSection.tsx b/frontend/src/proprietary/components/shared/config/configSections/plan/AvailablePlansSection.tsx
index 9aed2ff7d5..0fb84dcc7e 100644
--- a/frontend/src/proprietary/components/shared/config/configSections/plan/AvailablePlansSection.tsx
+++ b/frontend/src/proprietary/components/shared/config/configSections/plan/AvailablePlansSection.tsx
@@ -1,11 +1,11 @@
-import React, { useState, useMemo } from 'react';
-import { Button, Collapse, Select, Group } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import licenseService, { PlanTier, PlanTierGroup, LicenseInfo, mapLicenseToTier } from '@app/services/licenseService';
-import PlanCard from '@app/components/shared/config/configSections/plan/PlanCard';
-import FeatureComparisonTable from '@app/components/shared/config/configSections/plan/FeatureComparisonTable';
-import { Z_INDEX_OVER_CONFIG_MODAL } from '@app/styles/zIndex';
-import { isCurrentTier as checkIsCurrentTier, isDowngrade as checkIsDowngrade } from '@app/utils/planTierUtils';
+import React, { useState, useMemo } from "react";
+import { Button, Collapse, Select, Group } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import licenseService, { PlanTier, PlanTierGroup, LicenseInfo, mapLicenseToTier } from "@app/services/licenseService";
+import PlanCard from "@app/components/shared/config/configSections/plan/PlanCard";
+import FeatureComparisonTable from "@app/components/shared/config/configSections/plan/FeatureComparisonTable";
+import { Z_INDEX_OVER_CONFIG_MODAL } from "@app/styles/zIndex";
+import { isCurrentTier as checkIsCurrentTier, isDowngrade as checkIsDowngrade } from "@app/utils/planTierUtils";
 
 interface AvailablePlansSectionProps {
   plans: PlanTier[];
@@ -56,23 +56,23 @@ const AvailablePlansSection: React.FC<AvailablePlansSectionProps> = ({
     <div>
       <Group justify="space-between" align="flex-start" mb="xs">
         <div>
-          <h3 style={{ margin: 0, color: 'var(--mantine-color-text)', fontSize: '1rem' }}>
-            {t('plan.availablePlans.title', 'Available Plans')}
+          <h3 style={{ margin: 0, color: "var(--mantine-color-text)", fontSize: "1rem" }}>
+            {t("plan.availablePlans.title", "Available Plans")}
           </h3>
           <p
             style={{
-              margin: '0.25rem 0 0 0',
-              color: 'var(--mantine-color-dimmed)',
-              fontSize: '0.875rem',
+              margin: "0.25rem 0 0 0",
+              color: "var(--mantine-color-dimmed)",
+              fontSize: "0.875rem",
             }}
           >
-            {t('plan.availablePlans.subtitle', 'Choose the plan that fits your needs')}
+            {t("plan.availablePlans.subtitle", "Choose the plan that fits your needs")}
           </p>
         </div>
         {currency && onCurrencyChange && currencyOptions && (
           <Select
             value={currency}
-            onChange={(value) => onCurrencyChange(value || 'usd')}
+            onChange={(value) => onCurrencyChange(value || "usd")}
             data={currencyOptions}
             searchable
             clearable={false}
@@ -85,10 +85,10 @@ const AvailablePlansSection: React.FC<AvailablePlansSectionProps> = ({
 
       <div
         style={{
-          display: 'grid',
-          gridTemplateColumns: 'repeat(3, 1fr)',
-          gap: '1rem',
-          marginBottom: '0.1rem',
+          display: "grid",
+          gridTemplateColumns: "repeat(3, 1fr)",
+          gap: "1rem",
+          marginBottom: "0.1rem",
         }}
       >
         {groupedPlans.map((group) => (
@@ -106,11 +106,11 @@ const AvailablePlansSection: React.FC<AvailablePlansSectionProps> = ({
         ))}
       </div>
 
-      <div style={{ textAlign: 'center' }}>
+      <div style={{ textAlign: "center" }}>
         <Button variant="subtle" onClick={() => setShowComparison(!showComparison)}>
           {showComparison
-            ? t('plan.hideComparison', 'Hide Feature Comparison')
-            : t('plan.showComparison', 'Compare All Features')}
+            ? t("plan.hideComparison", "Hide Feature Comparison")
+            : t("plan.showComparison", "Compare All Features")}
         </Button>
       </div>
 
diff --git a/frontend/src/proprietary/components/shared/config/configSections/plan/FeatureComparisonTable.tsx b/frontend/src/proprietary/components/shared/config/configSections/plan/FeatureComparisonTable.tsx
index d297853f06..133d719fc2 100644
--- a/frontend/src/proprietary/components/shared/config/configSections/plan/FeatureComparisonTable.tsx
+++ b/frontend/src/proprietary/components/shared/config/configSections/plan/FeatureComparisonTable.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
-import { Card, Badge, Text } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { PlanFeature } from '@app/services/licenseService';
+import React from "react";
+import { Card, Badge, Text } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { PlanFeature } from "@app/services/licenseService";
 
 interface PlanWithFeatures {
   name: string;
@@ -12,48 +12,46 @@ interface PlanWithFeatures {
 
 interface FeatureComparisonTableProps {
   plans: PlanWithFeatures[];
-  currentTier?: 'free' | 'server' | 'enterprise' | null;
+  currentTier?: "free" | "server" | "enterprise" | null;
 }
 
 const FeatureComparisonTable: React.FC<FeatureComparisonTableProps> = ({ plans, currentTier }) => {
   const { t } = useTranslation();
 
   return (
-    <Card padding="lg" radius="md" withBorder style={{ marginTop: '1rem' }}>
+    <Card padding="lg" radius="md" withBorder style={{ marginTop: "1rem" }}>
       <Text size="lg" fw={600} mb="md">
-        {t('plan.featureComparison', 'Feature Comparison')}
+        {t("plan.featureComparison", "Feature Comparison")}
       </Text>
 
-      <div style={{ overflowX: 'auto' }}>
-        <table style={{ width: '100%', borderCollapse: 'collapse' }}>
+      <div style={{ overflowX: "auto" }}>
+        <table style={{ width: "100%", borderCollapse: "collapse" }}>
           <thead>
-            <tr style={{ borderBottom: '2px solid var(--mantine-color-gray-3)' }}>
-              <th style={{ textAlign: 'left', padding: '0.75rem' }}>
-                {t('plan.feature.title', 'Feature')}
-              </th>
+            <tr style={{ borderBottom: "2px solid var(--mantine-color-gray-3)" }}>
+              <th style={{ textAlign: "left", padding: "0.75rem" }}>{t("plan.feature.title", "Feature")}</th>
               {plans.map((plan, index) => (
                 <th
                   key={plan.tier || plan.name || index}
                   style={{
-                    textAlign: 'center',
-                    padding: '0.75rem',
-                    minWidth: '8rem',
-                    position: 'relative'
+                    textAlign: "center",
+                    padding: "0.75rem",
+                    minWidth: "8rem",
+                    position: "relative",
                   }}
                 >
                   {plan.name}
-                  {plan.popular && !(plan.tier === 'server' && currentTier === 'enterprise') && (
+                  {plan.popular && !(plan.tier === "server" && currentTier === "enterprise") && (
                     <Badge
                       color="blue"
                       variant="filled"
                       size="xs"
                       style={{
-                        position: 'absolute',
-                        top: '0.5rem',
-                        right: '0.5rem',
+                        position: "absolute",
+                        top: "0.5rem",
+                        right: "0.5rem",
                       }}
                     >
-                      {t('plan.popular', 'Popular')}
+                      {t("plan.popular", "Popular")}
                     </Badge>
                   )}
                 </th>
@@ -62,15 +60,10 @@ const FeatureComparisonTable: React.FC<FeatureComparisonTableProps> = ({ plans,
           </thead>
           <tbody>
             {plans[0]?.features.map((_, featureIndex) => (
-              <tr
-                key={featureIndex}
-                style={{ borderBottom: '1px solid var(--mantine-color-gray-3)' }}
-              >
-                <td style={{ padding: '0.75rem' }}>
-                  {plans[0].features[featureIndex].name}
-                </td>
+              <tr key={featureIndex} style={{ borderBottom: "1px solid var(--mantine-color-gray-3)" }}>
+                <td style={{ padding: "0.75rem" }}>{plans[0].features[featureIndex].name}</td>
                 {plans.map((plan, planIndex) => (
-                  <td key={planIndex} style={{ textAlign: 'center', padding: '0.75rem' }}>
+                  <td key={planIndex} style={{ textAlign: "center", padding: "0.75rem" }}>
                     {plan.features[featureIndex]?.included ? (
                       <Text c="green" fw={600} size="lg">
                         ✓
diff --git a/frontend/src/proprietary/components/shared/config/configSections/plan/LicenseKeySection.tsx b/frontend/src/proprietary/components/shared/config/configSections/plan/LicenseKeySection.tsx
index e5e90d0489..279291754f 100644
--- a/frontend/src/proprietary/components/shared/config/configSections/plan/LicenseKeySection.tsx
+++ b/frontend/src/proprietary/components/shared/config/configSections/plan/LicenseKeySection.tsx
@@ -1,12 +1,12 @@
-import React, { useState } from 'react';
-import { Button, Collapse, Alert, TextInput, Paper, Stack, Group, Text, SegmentedControl, FileButton } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { alert } from '@app/components/toast';
-import { LicenseInfo } from '@app/services/licenseService';
-import licenseService from '@app/services/licenseService';
-import { useLicense } from '@app/contexts/LicenseContext';
-import { useLoginRequired } from '@app/hooks/useLoginRequired';
+import React, { useState } from "react";
+import { Button, Collapse, Alert, TextInput, Paper, Stack, Group, Text, SegmentedControl, FileButton } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { alert } from "@app/components/toast";
+import { LicenseInfo } from "@app/services/licenseService";
+import licenseService from "@app/services/licenseService";
+import { useLicense } from "@app/contexts/LicenseContext";
+import { useLoginRequired } from "@app/hooks/useLoginRequired";
 
 interface LicenseKeySectionProps {
   currentLicenseInfo?: LicenseInfo;
@@ -17,9 +17,9 @@ const LicenseKeySection: React.FC<LicenseKeySectionProps> = ({ currentLicenseInf
   const { refetchLicense } = useLicense();
   const { loginEnabled, validateLoginEnabled } = useLoginRequired();
   const [showLicenseKey, setShowLicenseKey] = useState(false);
-  const [licenseKeyInput, setLicenseKeyInput] = useState<string>('');
+  const [licenseKeyInput, setLicenseKeyInput] = useState<string>("");
   const [savingLicense, setSavingLicense] = useState(false);
-  const [inputMethod, setInputMethod] = useState<'text' | 'file'>('text');
+  const [inputMethod, setInputMethod] = useState<"text" | "file">("text");
   const [licenseFile, setLicenseFile] = useState<File | null>(null);
 
   const handleSaveLicense = async () => {
@@ -33,17 +33,17 @@ const LicenseKeySection: React.FC<LicenseKeySectionProps> = ({ currentLicenseInf
 
       let response;
 
-      if (inputMethod === 'file' && licenseFile) {
+      if (inputMethod === "file" && licenseFile) {
         // Upload file
         response = await licenseService.saveLicenseFile(licenseFile);
-      } else if (inputMethod === 'text' && licenseKeyInput.trim()) {
+      } else if (inputMethod === "text" && licenseKeyInput.trim()) {
         // Save key string
         response = await licenseService.saveLicenseKey(licenseKeyInput.trim());
       } else {
         alert({
-          alertType: 'error',
-          title: t('admin.error', 'Error'),
-          body: t('admin.settings.premium.noInput', 'Please provide a license key or file'),
+          alertType: "error",
+          title: t("admin.error", "Error"),
+          body: t("admin.settings.premium.noInput", "Please provide a license key or file"),
         });
         return;
       }
@@ -53,33 +53,33 @@ const LicenseKeySection: React.FC<LicenseKeySectionProps> = ({ currentLicenseInf
         await refetchLicense();
 
         const successMessage =
-          inputMethod === 'file'
-            ? t('admin.settings.premium.file.successMessage', 'License file uploaded and activated successfully')
-            : t('admin.settings.premium.key.successMessage', 'License key activated successfully');
+          inputMethod === "file"
+            ? t("admin.settings.premium.file.successMessage", "License file uploaded and activated successfully")
+            : t("admin.settings.premium.key.successMessage", "License key activated successfully");
 
         alert({
-          alertType: 'success',
-          title: t('success', 'Success'),
+          alertType: "success",
+          title: t("success", "Success"),
           body: successMessage,
         });
 
         // Clear inputs
-        setLicenseKeyInput('');
+        setLicenseKeyInput("");
         setLicenseFile(null);
-        setInputMethod('text'); // Reset to default
+        setInputMethod("text"); // Reset to default
       } else {
         alert({
-          alertType: 'error',
-          title: t('admin.error', 'Error'),
-          body: response.error || t('admin.settings.saveError', 'Failed to save license'),
+          alertType: "error",
+          title: t("admin.error", "Error"),
+          body: response.error || t("admin.settings.saveError", "Failed to save license"),
         });
       }
     } catch (error) {
-      console.error('Failed to save license:', error);
+      console.error("Failed to save license:", error);
       alert({
-        alertType: 'error',
-        title: t('admin.error', 'Error'),
-        body: t('admin.settings.saveError', 'Failed to save license'),
+        alertType: "error",
+        title: t("admin.error", "Error"),
+        body: t("admin.settings.saveError", "Failed to save license"),
       });
     } finally {
       setSavingLicense(false);
@@ -91,15 +91,11 @@ const LicenseKeySection: React.FC<LicenseKeySectionProps> = ({ currentLicenseInf
       <Button
         variant="subtle"
         leftSection={
-          <LocalIcon
-            icon={showLicenseKey ? 'expand-less-rounded' : 'expand-more-rounded'}
-            width="1.25rem"
-            height="1.25rem"
-          />
+          <LocalIcon icon={showLicenseKey ? "expand-less-rounded" : "expand-more-rounded"} width="1.25rem" height="1.25rem" />
         }
         onClick={() => setShowLicenseKey(!showLicenseKey)}
       >
-        {t('admin.settings.premium.licenseKey.toggle', 'Got a license key or certificate file?')}
+        {t("admin.settings.premium.licenseKey.toggle", "Got a license key or certificate file?")}
       </Button>
 
       <Collapse in={showLicenseKey} mt="md">
@@ -107,8 +103,8 @@ const LicenseKeySection: React.FC<LicenseKeySectionProps> = ({ currentLicenseInf
           <Alert variant="light" color="blue" icon={<LocalIcon icon="info-rounded" width="1rem" height="1rem" />}>
             <Text size="sm">
               {t(
-                'admin.settings.premium.licenseKey.info',
-                'If you have a license key or certificate file from a direct purchase, you can enter it here to activate premium or enterprise features.'
+                "admin.settings.premium.licenseKey.info",
+                "If you have a license key or certificate file from a direct purchase, you can enter it here to activate premium or enterprise features.",
               )}
             </Text>
           </Alert>
@@ -119,25 +115,25 @@ const LicenseKeySection: React.FC<LicenseKeySectionProps> = ({ currentLicenseInf
               variant="light"
               color="red"
               icon={<LocalIcon icon="warning-rounded" width="1rem" height="1rem" />}
-              title={t('admin.settings.premium.key.overwriteWarning.title', '⚠️ Warning: Existing License Detected')}
+              title={t("admin.settings.premium.key.overwriteWarning.title", "⚠️ Warning: Existing License Detected")}
             >
               <Stack gap="xs">
                 <Text size="sm" fw={600}>
                   {t(
-                    'admin.settings.premium.key.overwriteWarning.line1',
-                    'Overwriting your current license key cannot be undone.'
+                    "admin.settings.premium.key.overwriteWarning.line1",
+                    "Overwriting your current license key cannot be undone.",
                   )}
                 </Text>
                 <Text size="sm">
                   {t(
-                    'admin.settings.premium.key.overwriteWarning.line2',
-                    'Your previous license will be permanently lost unless you have backed it up elsewhere.'
+                    "admin.settings.premium.key.overwriteWarning.line2",
+                    "Your previous license will be permanently lost unless you have backed it up elsewhere.",
                   )}
                 </Text>
                 <Text size="sm" fw={500}>
                   {t(
-                    'admin.settings.premium.key.overwriteWarning.line3',
-                    'Important: Keep license keys private and secure. Never share them publicly.'
+                    "admin.settings.premium.key.overwriteWarning.line3",
+                    "Important: Keep license keys private and secure. Never share them publicly.",
                   )}
                 </Text>
               </Stack>
@@ -146,24 +142,20 @@ const LicenseKeySection: React.FC<LicenseKeySectionProps> = ({ currentLicenseInf
 
           {/* Show current license source */}
           {currentLicenseInfo?.licenseKey && (
-            <Alert
-              variant="light"
-              color="green"
-              icon={<LocalIcon icon="check-circle-rounded" width="1rem" height="1rem" />}
-            >
+            <Alert variant="light" color="green" icon={<LocalIcon icon="check-circle-rounded" width="1rem" height="1rem" />}>
               <Stack gap="xs">
                 <Text size="sm" fw={500}>
-                  {t('admin.settings.premium.currentLicense.title', 'Active License')}
+                  {t("admin.settings.premium.currentLicense.title", "Active License")}
                 </Text>
                 <Text size="xs">
-                  {currentLicenseInfo.licenseKey.startsWith('file:')
-                    ? t('admin.settings.premium.currentLicense.file', 'Source: License file ({{path}})', {
+                  {currentLicenseInfo.licenseKey.startsWith("file:")
+                    ? t("admin.settings.premium.currentLicense.file", "Source: License file ({{path}})", {
                         path: currentLicenseInfo.licenseKey.substring(5),
                       })
-                    : t('admin.settings.premium.currentLicense.key', 'Source: License key')}
+                    : t("admin.settings.premium.currentLicense.key", "Source: License key")}
                 </Text>
                 <Text size="xs">
-                  {t('admin.settings.premium.currentLicense.type', 'Type: {{type}}', {
+                  {t("admin.settings.premium.currentLicense.type", "Type: {{type}}", {
                     type: currentLicenseInfo.licenseType,
                   })}
                 </Text>
@@ -175,19 +167,19 @@ const LicenseKeySection: React.FC<LicenseKeySectionProps> = ({ currentLicenseInf
           <SegmentedControl
             value={inputMethod}
             onChange={(value) => {
-              setInputMethod(value as 'text' | 'file');
+              setInputMethod(value as "text" | "file");
               // Clear opposite input when switching
-              if (value === 'text') setLicenseFile(null);
-              if (value === 'file') setLicenseKeyInput('');
+              if (value === "text") setLicenseFile(null);
+              if (value === "file") setLicenseKeyInput("");
             }}
             data={[
               {
-                label: t('admin.settings.premium.inputMethod.text', 'License Key'),
-                value: 'text',
+                label: t("admin.settings.premium.inputMethod.text", "License Key"),
+                value: "text",
               },
               {
-                label: t('admin.settings.premium.inputMethod.file', 'Certificate File'),
-                value: 'file',
+                label: t("admin.settings.premium.inputMethod.file", "Certificate File"),
+                value: "file",
               },
             ]}
             disabled={!loginEnabled || savingLicense}
@@ -196,17 +188,17 @@ const LicenseKeySection: React.FC<LicenseKeySectionProps> = ({ currentLicenseInf
           {/* Input area */}
           <Paper withBorder p="md" radius="md">
             <Stack gap="md">
-              {inputMethod === 'text' ? (
+              {inputMethod === "text" ? (
                 /* Text input */
                 <TextInput
-                  label={t('admin.settings.premium.key.label', 'License Key')}
+                  label={t("admin.settings.premium.key.label", "License Key")}
                   description={t(
-                    'admin.settings.premium.key.description',
-                    'Enter your premium or enterprise license key. Premium features will be automatically enabled when a key is provided.'
+                    "admin.settings.premium.key.description",
+                    "Enter your premium or enterprise license key. Premium features will be automatically enabled when a key is provided.",
                   )}
                   value={licenseKeyInput}
                   onChange={(e) => setLicenseKeyInput(e.target.value)}
-                  placeholder={currentLicenseInfo?.licenseKey || '00000000-0000-0000-0000-000000000000'}
+                  placeholder={currentLicenseInfo?.licenseKey || "00000000-0000-0000-0000-000000000000"}
                   type="password"
                   disabled={!loginEnabled || savingLicense}
                 />
@@ -214,16 +206,12 @@ const LicenseKeySection: React.FC<LicenseKeySectionProps> = ({ currentLicenseInf
                 /* File upload */
                 <div>
                   <Text size="sm" fw={500} mb="xs">
-                    {t('admin.settings.premium.file.label', 'License Certificate File')}
+                    {t("admin.settings.premium.file.label", "License Certificate File")}
                   </Text>
                   <Text size="xs" c="dimmed" mb="md">
-                    {t('admin.settings.premium.file.description', 'Upload your .lic or .cert license file')}
+                    {t("admin.settings.premium.file.description", "Upload your .lic or .cert license file")}
                   </Text>
-                  <FileButton
-                    onChange={setLicenseFile}
-                    accept=".lic,.cert"
-                    disabled={!loginEnabled || savingLicense}
-                  >
+                  <FileButton onChange={setLicenseFile} accept=".lic,.cert" disabled={!loginEnabled || savingLicense}>
                     {(props) => (
                       <Button
                         {...props}
@@ -231,17 +219,15 @@ const LicenseKeySection: React.FC<LicenseKeySectionProps> = ({ currentLicenseInf
                         leftSection={<LocalIcon icon="upload-file-rounded" width="1rem" height="1rem" />}
                         disabled={!loginEnabled || savingLicense}
                       >
-                        {licenseFile
-                          ? licenseFile.name
-                          : t('admin.settings.premium.file.choose', 'Choose License File')}
+                        {licenseFile ? licenseFile.name : t("admin.settings.premium.file.choose", "Choose License File")}
                       </Button>
                     )}
                   </FileButton>
                   {licenseFile && (
                     <Text size="xs" c="dimmed" mt="xs">
-                      {t('admin.settings.premium.file.selected', 'Selected: {{filename}} ({{size}})', {
+                      {t("admin.settings.premium.file.selected", "Selected: {{filename}} ({{size}})", {
                         filename: licenseFile.name,
-                        size: (licenseFile.size / 1024).toFixed(2) + ' KB',
+                        size: (licenseFile.size / 1024).toFixed(2) + " KB",
                       })}
                     </Text>
                   )}
@@ -255,11 +241,11 @@ const LicenseKeySection: React.FC<LicenseKeySectionProps> = ({ currentLicenseInf
                   size="sm"
                   disabled={
                     !loginEnabled ||
-                    (inputMethod === 'text' && !licenseKeyInput.trim()) ||
-                    (inputMethod === 'file' && !licenseFile)
+                    (inputMethod === "text" && !licenseKeyInput.trim()) ||
+                    (inputMethod === "file" && !licenseFile)
                   }
                 >
-                  {t('admin.settings.save', 'Save Changes')}
+                  {t("admin.settings.save", "Save Changes")}
                 </Button>
               </Group>
             </Stack>
diff --git a/frontend/src/proprietary/components/shared/config/configSections/plan/PlanCard.tsx b/frontend/src/proprietary/components/shared/config/configSections/plan/PlanCard.tsx
index b2dce9c658..a3884da82b 100644
--- a/frontend/src/proprietary/components/shared/config/configSections/plan/PlanCard.tsx
+++ b/frontend/src/proprietary/components/shared/config/configSections/plan/PlanCard.tsx
@@ -1,60 +1,53 @@
-import React from 'react';
-import { Button, Card, Text, Stack, Divider, Tooltip } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { PlanTierGroup, LicenseInfo } from '@app/services/licenseService';
-import { PricingBadge } from '@app/components/shared/stripeCheckout/components/PricingBadge';
-import { PriceDisplay } from '@app/components/shared/stripeCheckout/components/PriceDisplay';
-import { calculateDisplayPricing } from '@app/components/shared/stripeCheckout/utils/pricingUtils';
-import { getBaseCardStyle } from '@app/components/shared/stripeCheckout/utils/cardStyles';
-import { isEnterpriseBlockedForFree as checkIsEnterpriseBlockedForFree } from '@app/utils/planTierUtils';
+import React from "react";
+import { Button, Card, Text, Stack, Divider, Tooltip } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { PlanTierGroup, LicenseInfo } from "@app/services/licenseService";
+import { PricingBadge } from "@app/components/shared/stripeCheckout/components/PricingBadge";
+import { PriceDisplay } from "@app/components/shared/stripeCheckout/components/PriceDisplay";
+import { calculateDisplayPricing } from "@app/components/shared/stripeCheckout/utils/pricingUtils";
+import { getBaseCardStyle } from "@app/components/shared/stripeCheckout/utils/cardStyles";
+import { isEnterpriseBlockedForFree as checkIsEnterpriseBlockedForFree } from "@app/utils/planTierUtils";
 
 interface PlanCardProps {
   planGroup: PlanTierGroup;
   isCurrentTier: boolean;
   isDowngrade: boolean;
   currentLicenseInfo?: LicenseInfo | null;
-  currentTier?: 'free' | 'server' | 'enterprise' | null;
+  currentTier?: "free" | "server" | "enterprise" | null;
   onUpgradeClick: (planGroup: PlanTierGroup) => void;
   onManageClick?: () => void;
   loginEnabled?: boolean;
 }
 
-const PlanCard: React.FC<PlanCardProps> = ({ planGroup, isCurrentTier, isDowngrade, currentLicenseInfo, currentTier, onUpgradeClick, onManageClick, loginEnabled = true }) => {
+const PlanCard: React.FC<PlanCardProps> = ({
+  planGroup,
+  isCurrentTier,
+  isDowngrade,
+  currentLicenseInfo,
+  currentTier,
+  onUpgradeClick,
+  onManageClick,
+  loginEnabled = true,
+}) => {
   const { t } = useTranslation();
 
   // Render Free plan
-  if (planGroup.tier === 'free') {
+  if (planGroup.tier === "free") {
     // Get currency from the free plan
-    const freeCurrency = planGroup.monthly?.currency || '$';
+    const freeCurrency = planGroup.monthly?.currency || "$";
 
     return (
-      <Card
-        padding="lg"
-        radius="md"
-        withBorder
-        style={getBaseCardStyle(isCurrentTier)}
-        className="plan-card"
-      >
-        {isCurrentTier && (
-          <PricingBadge
-            type="current"
-            label={t('plan.current', 'Current Plan')}
-          />
-        )}
-        <Stack gap="md" style={{ height: '100%' }}>
+      <Card padding="lg" radius="md" withBorder style={getBaseCardStyle(isCurrentTier)} className="plan-card">
+        {isCurrentTier && <PricingBadge type="current" label={t("plan.current", "Current Plan")} />}
+        <Stack gap="md" style={{ height: "100%" }}>
           <div>
             <Text size="xl" fw={700} mb="xs">
               {planGroup.name}
             </Text>
             <Text size="xs" c="dimmed" mb="xs" style={{ opacity: 0 }}>
-              {t('plan.from', 'From')}
+              {t("plan.from", "From")}
             </Text>
-            <PriceDisplay
-              mode="simple"
-              price={0}
-              currency={freeCurrency}
-              period={t('plan.free.forever', 'Forever free')}
-            />
+            <PriceDisplay mode="simple" price={0} currency={freeCurrency} period={t("plan.free.forever", "Forever free")} />
           </div>
 
           <Divider />
@@ -70,9 +63,7 @@ const PlanCard: React.FC<PlanCardProps> = ({ planGroup, isCurrentTier, isDowngra
           <div style={{ flexGrow: 1 }} />
 
           <Button variant="filled" disabled fullWidth className="plan-button">
-            {isCurrentTier
-              ? t('plan.current', 'Current Plan')
-              : t('plan.free.included', 'Included')}
+            {isCurrentTier ? t("plan.current", "Current Plan") : t("plan.free.included", "Included")}
           </Button>
         </Stack>
       </Card>
@@ -81,7 +72,7 @@ const PlanCard: React.FC<PlanCardProps> = ({ planGroup, isCurrentTier, isDowngra
 
   // Render Server or Enterprise plans
   const { monthly, yearly } = planGroup;
-  const isEnterprise = planGroup.tier === 'enterprise';
+  const isEnterprise = planGroup.tier === "enterprise";
 
   // Block enterprise for free tier users (must have server first)
   const isEnterpriseBlockedForFree = checkIsEnterpriseBlockedForFree(currentTier, planGroup.tier);
@@ -89,30 +80,18 @@ const PlanCard: React.FC<PlanCardProps> = ({ planGroup, isCurrentTier, isDowngra
   // Calculate "From" pricing - show yearly price divided by 12 for lowest monthly equivalent
   const { displayPrice, displaySeatPrice, displayCurrency } = calculateDisplayPricing(
     monthly || undefined,
-    yearly || undefined
+    yearly || undefined,
   );
 
   return (
-    <Card
-      padding="lg"
-      radius="md"
-      withBorder
-      style={getBaseCardStyle(isCurrentTier)}
-      className="plan-card"
-    >
+    <Card padding="lg" radius="md" withBorder style={getBaseCardStyle(isCurrentTier)} className="plan-card">
       {isCurrentTier ? (
-        <PricingBadge
-          type="current"
-          label={t('plan.current', 'Current Plan')}
-        />
-      ) : planGroup.popular && !(planGroup.tier === 'server' && currentTier === 'enterprise') ? (
-        <PricingBadge
-          type="popular"
-          label={t('plan.popular', 'Popular')}
-        />
+        <PricingBadge type="current" label={t("plan.current", "Current Plan")} />
+      ) : planGroup.popular && !(planGroup.tier === "server" && currentTier === "enterprise") ? (
+        <PricingBadge type="popular" label={t("plan.popular", "Popular")} />
       ) : null}
 
-      <Stack gap="md" style={{ height: '100%' }}>
+      <Stack gap="md" style={{ height: "100%" }}>
         {/* Tier Name */}
         <div>
           <Text size="xl" fw={700} mb="xs">
@@ -120,20 +99,21 @@ const PlanCard: React.FC<PlanCardProps> = ({ planGroup, isCurrentTier, isDowngra
           </Text>
 
           <Text size="xs" c="dimmed" mb="xs">
-            {t('plan.from', 'From')}
+            {t("plan.from", "From")}
           </Text>
 
           {/* Price */}
           {isEnterprise && displaySeatPrice !== undefined ? (
             <>
               <Text span size="2.25rem" fw={600} style={{ lineHeight: 1 }}>
-                {displayCurrency}{displaySeatPrice.toFixed(2)}
+                {displayCurrency}
+                {displaySeatPrice.toFixed(2)}
               </Text>
               <Text span size="1.5rem" c="dimmed" mt="xs">
-                {t('plan.perSeat', '/seat')}
+                {t("plan.perSeat", "/seat")}
               </Text>
               <Text size="sm" c="dimmed" mt="xs">
-                {t('plan.perMonth', '/month')} {t('plan.withServer', '+ Server Plan')}
+                {t("plan.perMonth", "/month")} {t("plan.withServer", "+ Server Plan")}
               </Text>
             </>
           ) : (
@@ -141,7 +121,7 @@ const PlanCard: React.FC<PlanCardProps> = ({ planGroup, isCurrentTier, isDowngra
               mode="simple"
               price={displayPrice}
               currency={displayCurrency}
-              period={t('plan.perMonth', '/month')}
+              period={t("plan.perMonth", "/month")}
             />
           )}
         </div>
@@ -159,40 +139,39 @@ const PlanCard: React.FC<PlanCardProps> = ({ planGroup, isCurrentTier, isDowngra
 
         <div style={{ flexGrow: 1 }} />
 
-      <Stack gap="xs">
-        {/* Show seat count for enterprise plans when current */}
-        {isEnterprise && isCurrentTier && currentLicenseInfo && currentLicenseInfo.maxUsers > 0 && (
-          <Text size="sm" c="green" fw={500} ta="center">
-            {t('plan.licensedSeats', 'Licensed: {{count}} seats', { count: currentLicenseInfo.maxUsers })}
-          </Text>
-        )}
+        <Stack gap="xs">
+          {/* Show seat count for enterprise plans when current */}
+          {isEnterprise && isCurrentTier && currentLicenseInfo && currentLicenseInfo.maxUsers > 0 && (
+            <Text size="sm" c="green" fw={500} ta="center">
+              {t("plan.licensedSeats", "Licensed: {{count}} seats", { count: currentLicenseInfo.maxUsers })}
+            </Text>
+          )}
 
-        {/* Single Upgrade Button */}
-        <Tooltip
-          label={t('plan.enterprise.requiresServer', 'Requires Server plan')}
-          disabled={!isEnterpriseBlockedForFree}
-          position="top"
-          withArrow
-        >
-          <Button
-            variant="filled"
-            fullWidth
-            onClick={() => isCurrentTier && onManageClick ? onManageClick() : onUpgradeClick(planGroup)}
-            disabled={!loginEnabled || isDowngrade || isEnterpriseBlockedForFree}
-            className="plan-button"
+          {/* Single Upgrade Button */}
+          <Tooltip
+            label={t("plan.enterprise.requiresServer", "Requires Server plan")}
+            disabled={!isEnterpriseBlockedForFree}
+            position="top"
+            withArrow
           >
-            {isCurrentTier
-              ? t('plan.manage', 'Manage')
-              : isDowngrade
-                ? t('plan.free.included', 'Included')
-                : isEnterpriseBlockedForFree
-                  ? t('plan.enterprise.requiresServer', 'Requires Server')
-                  : isEnterprise
-                    ? t('plan.selectPlan', 'Select Plan')
-                    : t('plan.upgrade', 'Upgrade')}
-          </Button>
-        </Tooltip>
-
+            <Button
+              variant="filled"
+              fullWidth
+              onClick={() => (isCurrentTier && onManageClick ? onManageClick() : onUpgradeClick(planGroup))}
+              disabled={!loginEnabled || isDowngrade || isEnterpriseBlockedForFree}
+              className="plan-button"
+            >
+              {isCurrentTier
+                ? t("plan.manage", "Manage")
+                : isDowngrade
+                  ? t("plan.free.included", "Included")
+                  : isEnterpriseBlockedForFree
+                    ? t("plan.enterprise.requiresServer", "Requires Server")
+                    : isEnterprise
+                      ? t("plan.selectPlan", "Select Plan")
+                      : t("plan.upgrade", "Upgrade")}
+            </Button>
+          </Tooltip>
         </Stack>
       </Stack>
     </Card>
diff --git a/frontend/src/proprietary/components/shared/config/configSections/plan/StaticCheckoutModal.tsx b/frontend/src/proprietary/components/shared/config/configSections/plan/StaticCheckoutModal.tsx
index b9f46bc7c6..53e88ffad1 100644
--- a/frontend/src/proprietary/components/shared/config/configSections/plan/StaticCheckoutModal.tsx
+++ b/frontend/src/proprietary/components/shared/config/configSections/plan/StaticCheckoutModal.tsx
@@ -1,75 +1,70 @@
-import React, { useState } from 'react';
-import { Modal, Text, Group, ActionIcon, Stack, Paper, Grid, TextInput, Button, Alert } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import { EmailStage } from '@app/components/shared/stripeCheckout/stages/EmailStage';
-import { validateEmail } from '@app/components/shared/stripeCheckout/utils/checkoutUtils';
-import { getClickablePaperStyle } from '@app/components/shared/stripeCheckout/utils/cardStyles';
-import { STATIC_STRIPE_LINKS, buildStripeUrlWithEmail } from '@app/constants/staticStripeLinks';
-import { alert } from '@app/components/toast';
-import { Z_INDEX_OVER_CONFIG_MODAL } from '@app/styles/zIndex';
-import { useIsMobile } from '@app/hooks/useIsMobile';
-import licenseService from '@app/services/licenseService';
-import { useLicense } from '@app/contexts/LicenseContext';
+import React, { useState } from "react";
+import { Modal, Text, Group, ActionIcon, Stack, Paper, Grid, TextInput, Button, Alert } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import { EmailStage } from "@app/components/shared/stripeCheckout/stages/EmailStage";
+import { validateEmail } from "@app/components/shared/stripeCheckout/utils/checkoutUtils";
+import { getClickablePaperStyle } from "@app/components/shared/stripeCheckout/utils/cardStyles";
+import { STATIC_STRIPE_LINKS, buildStripeUrlWithEmail } from "@app/constants/staticStripeLinks";
+import { alert } from "@app/components/toast";
+import { Z_INDEX_OVER_CONFIG_MODAL } from "@app/styles/zIndex";
+import { useIsMobile } from "@app/hooks/useIsMobile";
+import licenseService from "@app/services/licenseService";
+import { useLicense } from "@app/contexts/LicenseContext";
 
 interface StaticCheckoutModalProps {
   opened: boolean;
   onClose: () => void;
-  planName: 'server' | 'enterprise';
+  planName: "server" | "enterprise";
   isUpgrade?: boolean;
 }
 
-type Stage = 'email' | 'period-selection' | 'license-activation';
+type Stage = "email" | "period-selection" | "license-activation";
 
-const StaticCheckoutModal: React.FC<StaticCheckoutModalProps> = ({
-  opened,
-  onClose,
-  planName,
-  isUpgrade = false,
-}) => {
+const StaticCheckoutModal: React.FC<StaticCheckoutModalProps> = ({ opened, onClose, planName, isUpgrade = false }) => {
   const { t } = useTranslation();
   const isMobile = useIsMobile();
   const { refetchLicense } = useLicense();
 
-  const [stage, setStage] = useState<Stage>('email');
-  const [email, setEmail] = useState('');
-  const [emailError, setEmailError] = useState('');
+  const [stage, setStage] = useState<Stage>("email");
+  const [email, setEmail] = useState("");
+  const [emailError, setEmailError] = useState("");
   const [stageHistory, setStageHistory] = useState<Stage[]>([]);
 
   // License activation state
-  const [licenseKey, setLicenseKey] = useState('');
+  const [licenseKey, setLicenseKey] = useState("");
   const [savingLicense, setSavingLicense] = useState(false);
   const [licenseActivated, setLicenseActivated] = useState(false);
 
   const handleEmailSubmit = () => {
     const validation = validateEmail(email);
     if (validation.valid) {
-      setEmailError('');
-      setStageHistory([...stageHistory, 'email']);
-      setStage('period-selection');
+      setEmailError("");
+      setStageHistory([...stageHistory, "email"]);
+      setStage("period-selection");
     } else {
       setEmailError(validation.error);
     }
   };
 
-  const handlePeriodSelect = (period: 'monthly' | 'yearly') => {
+  const handlePeriodSelect = (period: "monthly" | "yearly") => {
     const baseUrl = STATIC_STRIPE_LINKS[planName][period];
     const urlWithEmail = buildStripeUrlWithEmail(baseUrl, email);
 
     // Open Stripe checkout in new tab
-    window.open(urlWithEmail, '_blank');
+    window.open(urlWithEmail, "_blank");
 
     // Transition to license activation stage
-    setStageHistory([...stageHistory, 'period-selection']);
-    setStage('license-activation');
+    setStageHistory([...stageHistory, "period-selection"]);
+    setStage("license-activation");
   };
 
   const handleActivateLicense = async () => {
     if (!licenseKey.trim()) {
       alert({
-        alertType: 'error',
-        title: t('admin.error', 'Error'),
-        body: t('admin.settings.premium.noInput', 'Please provide a license key'),
+        alertType: "error",
+        title: t("admin.error", "Error"),
+        body: t("admin.settings.premium.noInput", "Please provide a license key"),
       });
       return;
     }
@@ -85,26 +80,23 @@ const StaticCheckoutModal: React.FC<StaticCheckoutModalProps> = ({
         setLicenseActivated(true);
 
         alert({
-          alertType: 'success',
-          title: t('success', 'Success'),
-          body: t(
-            'admin.settings.premium.key.successMessage',
-            'License key activated successfully'
-          ),
+          alertType: "success",
+          title: t("success", "Success"),
+          body: t("admin.settings.premium.key.successMessage", "License key activated successfully"),
         });
       } else {
         alert({
-          alertType: 'error',
-          title: t('admin.error', 'Error'),
-          body: response.error || t('admin.settings.saveError', 'Failed to save license'),
+          alertType: "error",
+          title: t("admin.error", "Error"),
+          body: response.error || t("admin.settings.saveError", "Failed to save license"),
         });
       }
     } catch (error) {
-      console.error('Failed to save license:', error);
+      console.error("Failed to save license:", error);
       alert({
-        alertType: 'error',
-        title: t('admin.error', 'Error'),
-        body: t('admin.settings.saveError', 'Failed to save license'),
+        alertType: "error",
+        title: t("admin.error", "Error"),
+        body: t("admin.settings.saveError", "Failed to save license"),
       });
     } finally {
       setSavingLicense(false);
@@ -124,50 +116,43 @@ const StaticCheckoutModal: React.FC<StaticCheckoutModalProps> = ({
 
   const handleClose = () => {
     // Reset state when closing
-    setStage('email');
-    setEmail('');
-    setEmailError('');
+    setStage("email");
+    setEmail("");
+    setEmailError("");
     setStageHistory([]);
-    setLicenseKey('');
+    setLicenseKey("");
     setSavingLicense(false);
     setLicenseActivated(false);
     onClose();
   };
 
   const getModalTitle = () => {
-    if (stage === 'email') {
+    if (stage === "email") {
       if (isUpgrade) {
-        return t('plan.static.upgradeToEnterprise', 'Upgrade to Enterprise');
+        return t("plan.static.upgradeToEnterprise", "Upgrade to Enterprise");
       }
-      return planName === 'server'
-        ? t('plan.static.getLicense', 'Get Server License')
-        : t('plan.static.upgradeToEnterprise', 'Upgrade to Enterprise');
+      return planName === "server"
+        ? t("plan.static.getLicense", "Get Server License")
+        : t("plan.static.upgradeToEnterprise", "Upgrade to Enterprise");
     }
-    if (stage === 'period-selection') {
-      return t('plan.static.selectPeriod', 'Select Billing Period');
+    if (stage === "period-selection") {
+      return t("plan.static.selectPeriod", "Select Billing Period");
     }
-    if (stage === 'license-activation') {
-      return t('plan.static.activateLicense', 'Activate Your License');
+    if (stage === "license-activation") {
+      return t("plan.static.activateLicense", "Activate Your License");
     }
-    return '';
+    return "";
   };
 
   const renderContent = () => {
     switch (stage) {
-      case 'email':
-        return (
-          <EmailStage
-            emailInput={email}
-            setEmailInput={setEmail}
-            emailError={emailError}
-            onSubmit={handleEmailSubmit}
-          />
-        );
+      case "email":
+        return <EmailStage emailInput={email} setEmailInput={setEmail} emailError={emailError} onSubmit={handleEmailSubmit} />;
 
-      case 'period-selection':
+      case "period-selection":
         return (
-          <Stack gap="lg" style={{ padding: '1rem 2rem' }}>
-            <Grid gutter="xl" style={{ marginTop: '1rem' }}>
+          <Stack gap="lg" style={{ padding: "1rem 2rem" }}>
+            <Grid gutter="xl" style={{ marginTop: "1rem" }}>
               {/* Monthly Option */}
               <Grid.Col span={6}>
                 <Paper
@@ -175,14 +160,14 @@ const StaticCheckoutModal: React.FC<StaticCheckoutModalProps> = ({
                   p="xl"
                   radius="md"
                   style={getClickablePaperStyle()}
-                  onClick={() => handlePeriodSelect('monthly')}
+                  onClick={() => handlePeriodSelect("monthly")}
                 >
-                  <Stack gap="md" style={{ height: '100%', minHeight: '120px' }} justify="space-between">
+                  <Stack gap="md" style={{ height: "100%", minHeight: "120px" }} justify="space-between">
                     <Text size="lg" fw={600}>
-                      {t('payment.monthly', 'Monthly')}
+                      {t("payment.monthly", "Monthly")}
                     </Text>
                     <Text size="sm" c="dimmed">
-                      {t('plan.static.monthlyBilling', 'Monthly Billing')}
+                      {t("plan.static.monthlyBilling", "Monthly Billing")}
                     </Text>
                   </Stack>
                 </Paper>
@@ -195,14 +180,14 @@ const StaticCheckoutModal: React.FC<StaticCheckoutModalProps> = ({
                   p="xl"
                   radius="md"
                   style={getClickablePaperStyle()}
-                  onClick={() => handlePeriodSelect('yearly')}
+                  onClick={() => handlePeriodSelect("yearly")}
                 >
-                  <Stack gap="md" style={{ height: '100%', minHeight: '120px' }} justify="space-between">
+                  <Stack gap="md" style={{ height: "100%", minHeight: "120px" }} justify="space-between">
                     <Text size="lg" fw={600}>
-                      {t('payment.yearly', 'Yearly')}
+                      {t("payment.yearly", "Yearly")}
                     </Text>
                     <Text size="sm" c="dimmed">
-                      {t('plan.static.yearlyBilling', 'Yearly Billing')}
+                      {t("plan.static.yearlyBilling", "Yearly Billing")}
                     </Text>
                   </Stack>
                 </Paper>
@@ -211,22 +196,18 @@ const StaticCheckoutModal: React.FC<StaticCheckoutModalProps> = ({
           </Stack>
         );
 
-      case 'license-activation':
+      case "license-activation":
         return (
-          <Stack gap="lg" style={{ padding: '2rem', maxWidth: '600px', margin: '0 auto' }}>
-            <Alert
-              variant="light"
-              color="blue"
-              icon={<LocalIcon icon="info-rounded" width="1rem" height="1rem" />}
-            >
+          <Stack gap="lg" style={{ padding: "2rem", maxWidth: "600px", margin: "0 auto" }}>
+            <Alert variant="light" color="blue" icon={<LocalIcon icon="info-rounded" width="1rem" height="1rem" />}>
               <Stack gap="sm">
                 <Text size="sm" fw={600}>
-                  {t('plan.static.licenseActivation.checkoutOpened', 'Checkout Opened in New Tab')}
+                  {t("plan.static.licenseActivation.checkoutOpened", "Checkout Opened in New Tab")}
                 </Text>
                 <Text size="sm">
                   {t(
-                    'plan.static.licenseActivation.instructions',
-                    'Complete your purchase in the Stripe tab. Once your payment is complete, you will receive an email with your license key.'
+                    "plan.static.licenseActivation.instructions",
+                    "Complete your purchase in the Stripe tab. Once your payment is complete, you will receive an email with your license key.",
                   )}
                 </Text>
               </Stack>
@@ -237,30 +218,24 @@ const StaticCheckoutModal: React.FC<StaticCheckoutModalProps> = ({
                 variant="light"
                 color="green"
                 icon={<LocalIcon icon="check-circle-rounded" width="1rem" height="1rem" />}
-                title={t('plan.static.licenseActivation.success', 'License Activated!')}
+                title={t("plan.static.licenseActivation.success", "License Activated!")}
               >
                 <Text size="sm">
                   {t(
-                    'plan.static.licenseActivation.successMessage',
-                    'Your license has been successfully activated. You can now close this window.'
+                    "plan.static.licenseActivation.successMessage",
+                    "Your license has been successfully activated. You can now close this window.",
                   )}
                 </Text>
               </Alert>
             ) : (
               <Stack gap="md">
                 <Text size="sm" fw={500}>
-                  {t(
-                    'plan.static.licenseActivation.enterKey',
-                    'Enter your license key below to activate your plan:'
-                  )}
+                  {t("plan.static.licenseActivation.enterKey", "Enter your license key below to activate your plan:")}
                 </Text>
 
                 <TextInput
-                  label={t('admin.settings.premium.key.label', 'License Key')}
-                  description={t(
-                    'plan.static.licenseActivation.keyDescription',
-                    'Paste the license key from your email'
-                  )}
+                  label={t("admin.settings.premium.key.label", "License Key")}
+                  description={t("plan.static.licenseActivation.keyDescription", "Paste the license key from your email")}
                   value={licenseKey}
                   onChange={(e) => setLicenseKey(e.target.value)}
                   placeholder="00000000-0000-0000-0000-000000000000"
@@ -270,14 +245,10 @@ const StaticCheckoutModal: React.FC<StaticCheckoutModalProps> = ({
 
                 <Group justify="space-between">
                   <Button variant="subtle" onClick={handleClose} disabled={savingLicense}>
-                    {t('plan.static.licenseActivation.doLater', "I'll do this later")}
+                    {t("plan.static.licenseActivation.doLater", "I'll do this later")}
                   </Button>
-                  <Button
-                    onClick={handleActivateLicense}
-                    loading={savingLicense}
-                    disabled={!licenseKey.trim()}
-                  >
-                    {t('plan.static.licenseActivation.activate', 'Activate License')}
+                  <Button onClick={handleActivateLicense} loading={savingLicense} disabled={!licenseKey.trim()}>
+                    {t("plan.static.licenseActivation.activate", "Activate License")}
                   </Button>
                 </Group>
               </Stack>
@@ -285,9 +256,7 @@ const StaticCheckoutModal: React.FC<StaticCheckoutModalProps> = ({
 
             {licenseActivated && (
               <Group justify="flex-end">
-                <Button onClick={handleClose}>
-                  {t('common.close', 'Close')}
-                </Button>
+                <Button onClick={handleClose}>{t("common.close", "Close")}</Button>
               </Group>
             )}
           </Stack>
@@ -298,7 +267,7 @@ const StaticCheckoutModal: React.FC<StaticCheckoutModalProps> = ({
     }
   };
 
-  const canGoBack = stageHistory.length > 0 && stage !== 'license-activation';
+  const canGoBack = stageHistory.length > 0 && stage !== "license-activation";
 
   return (
     <Modal
@@ -307,12 +276,7 @@ const StaticCheckoutModal: React.FC<StaticCheckoutModalProps> = ({
       title={
         <Group gap="sm" wrap="nowrap">
           {canGoBack && (
-            <ActionIcon
-              variant="subtle"
-              size="lg"
-              onClick={handleGoBack}
-              aria-label={t('common.back', 'Back')}
-            >
+            <ActionIcon variant="subtle" size="lg" onClick={handleGoBack} aria-label={t("common.back", "Back")}>
               <LocalIcon icon="arrow-back" width={20} height={20} />
             </ActionIcon>
           )}
@@ -321,7 +285,7 @@ const StaticCheckoutModal: React.FC<StaticCheckoutModalProps> = ({
           </Text>
         </Group>
       }
-      size={isMobile ? '100%' : 600}
+      size={isMobile ? "100%" : 600}
       centered
       radius="lg"
       withCloseButton={true}
diff --git a/frontend/src/proprietary/components/shared/config/configSections/plan/StaticPlanSection.tsx b/frontend/src/proprietary/components/shared/config/configSections/plan/StaticPlanSection.tsx
index 2847ef94e8..40f0db8518 100644
--- a/frontend/src/proprietary/components/shared/config/configSections/plan/StaticPlanSection.tsx
+++ b/frontend/src/proprietary/components/shared/config/configSections/plan/StaticPlanSection.tsx
@@ -1,16 +1,20 @@
-import React, { useState } from 'react';
-import { Card, Text, Stack, Button, Collapse, Divider, Tooltip } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { alert } from '@app/components/toast';
-import { LicenseInfo, mapLicenseToTier } from '@app/services/licenseService';
-import { PLAN_FEATURES, PLAN_HIGHLIGHTS } from '@app/constants/planConstants';
-import FeatureComparisonTable from '@app/components/shared/config/configSections/plan/FeatureComparisonTable';
-import StaticCheckoutModal from '@app/components/shared/config/configSections/plan/StaticCheckoutModal';
-import LicenseKeySection from '@app/components/shared/config/configSections/plan/LicenseKeySection';
-import { STATIC_STRIPE_LINKS } from '@app/constants/staticStripeLinks';
-import { PricingBadge } from '@app/components/shared/stripeCheckout/components/PricingBadge';
-import { getBaseCardStyle } from '@app/components/shared/stripeCheckout/utils/cardStyles';
-import { isCurrentTier as checkIsCurrentTier, isDowngrade as checkIsDowngrade, isEnterpriseBlockedForFree } from '@app/utils/planTierUtils';
+import React, { useState } from "react";
+import { Card, Text, Stack, Button, Collapse, Divider, Tooltip } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { alert } from "@app/components/toast";
+import { LicenseInfo, mapLicenseToTier } from "@app/services/licenseService";
+import { PLAN_FEATURES, PLAN_HIGHLIGHTS } from "@app/constants/planConstants";
+import FeatureComparisonTable from "@app/components/shared/config/configSections/plan/FeatureComparisonTable";
+import StaticCheckoutModal from "@app/components/shared/config/configSections/plan/StaticCheckoutModal";
+import LicenseKeySection from "@app/components/shared/config/configSections/plan/LicenseKeySection";
+import { STATIC_STRIPE_LINKS } from "@app/constants/staticStripeLinks";
+import { PricingBadge } from "@app/components/shared/stripeCheckout/components/PricingBadge";
+import { getBaseCardStyle } from "@app/components/shared/stripeCheckout/utils/cardStyles";
+import {
+  isCurrentTier as checkIsCurrentTier,
+  isDowngrade as checkIsDowngrade,
+  isEnterpriseBlockedForFree,
+} from "@app/utils/planTierUtils";
 
 interface StaticPlanSectionProps {
   currentLicenseInfo?: LicenseInfo;
@@ -22,19 +26,19 @@ const StaticPlanSection: React.FC<StaticPlanSectionProps> = ({ currentLicenseInf
 
   // Static checkout modal state
   const [checkoutModalOpened, setCheckoutModalOpened] = useState(false);
-  const [selectedPlan, setSelectedPlan] = useState<'server' | 'enterprise'>('server');
+  const [selectedPlan, setSelectedPlan] = useState<"server" | "enterprise">("server");
   const [isUpgrade, setIsUpgrade] = useState(false);
 
-  const handleOpenCheckout = (plan: 'server' | 'enterprise', upgrade: boolean) => {
+  const handleOpenCheckout = (plan: "server" | "enterprise", upgrade: boolean) => {
     // Prevent Free → Enterprise (must have Server first)
     const currentTier = mapLicenseToTier(currentLicenseInfo || null);
-    if (currentTier === 'free' && plan === 'enterprise') {
+    if (currentTier === "free" && plan === "enterprise") {
       alert({
-        alertType: 'warning',
-        title: t('plan.enterprise.requiresServer', 'Server Plan Required'),
+        alertType: "warning",
+        title: t("plan.enterprise.requiresServer", "Server Plan Required"),
         body: t(
-          'plan.enterprise.requiresServerMessage',
-          'Please upgrade to the Server plan first before upgrading to Enterprise.'
+          "plan.enterprise.requiresServerMessage",
+          "Please upgrade to the Server plan first before upgrading to Enterprise.",
         ),
       });
       return;
@@ -48,84 +52,83 @@ const StaticPlanSection: React.FC<StaticPlanSectionProps> = ({ currentLicenseInf
   const handleManageBilling = () => {
     // Show warning about email verification
     alert({
-      alertType: 'warning',
-      title: t('plan.static.billingPortal.title', 'Email Verification Required'),
+      alertType: "warning",
+      title: t("plan.static.billingPortal.title", "Email Verification Required"),
       body: t(
-        'plan.static.billingPortal.message',
-        'You will need to verify your email address in the Stripe billing portal. Check your email for a login link.'
+        "plan.static.billingPortal.message",
+        "You will need to verify your email address in the Stripe billing portal. Check your email for a login link.",
       ),
     });
 
-    window.open(STATIC_STRIPE_LINKS.billingPortal, '_blank');
+    window.open(STATIC_STRIPE_LINKS.billingPortal, "_blank");
   };
 
   const staticPlans = [
     {
-      id: 'free',
-      name: t('plan.free.name', 'Free'),
+      id: "free",
+      name: t("plan.free.name", "Free"),
       price: 0,
-      currency: '£',
-      period: '',
+      currency: "£",
+      period: "",
       highlights: PLAN_HIGHLIGHTS.FREE,
       features: PLAN_FEATURES.FREE,
       maxUsers: 5,
     },
     {
-      id: 'server',
-      name: 'Server',
+      id: "server",
+      name: "Server",
       price: 0,
-      currency: '',
-      period: '',
+      currency: "",
+      period: "",
       popular: false,
       highlights: PLAN_HIGHLIGHTS.SERVER_MONTHLY,
       features: PLAN_FEATURES.SERVER,
-      maxUsers: 'Unlimited users',
+      maxUsers: "Unlimited users",
     },
     {
-      id: 'enterprise',
-      name: t('plan.enterprise.name', 'Enterprise'),
+      id: "enterprise",
+      name: t("plan.enterprise.name", "Enterprise"),
       price: 0,
-      currency: '',
-      period: '',
+      currency: "",
+      period: "",
       highlights: PLAN_HIGHLIGHTS.ENTERPRISE_MONTHLY,
       features: PLAN_FEATURES.ENTERPRISE,
-      maxUsers: 'Custom',
+      maxUsers: "Custom",
     },
   ];
 
   const getCurrentPlan = () => {
     const tier = mapLicenseToTier(currentLicenseInfo || null);
-    if (tier === 'enterprise') return staticPlans[2];
-    if (tier === 'server') return staticPlans[1];
+    if (tier === "enterprise") return staticPlans[2];
+    if (tier === "server") return staticPlans[1];
     return staticPlans[0]; // free
   };
 
   const currentPlan = getCurrentPlan();
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
-
+    <div style={{ display: "flex", flexDirection: "column", gap: "2rem" }}>
       {/* Available Plans */}
       <div>
-        <h3 style={{ margin: 0, color: 'var(--mantine-color-text)', fontSize: '1rem' }}>
-          {t('plan.availablePlans.title', 'Available Plans')}
+        <h3 style={{ margin: 0, color: "var(--mantine-color-text)", fontSize: "1rem" }}>
+          {t("plan.availablePlans.title", "Available Plans")}
         </h3>
         <p
           style={{
-            margin: '0.25rem 0 1rem 0',
-            color: 'var(--mantine-color-dimmed)',
-            fontSize: '0.875rem',
+            margin: "0.25rem 0 1rem 0",
+            color: "var(--mantine-color-dimmed)",
+            fontSize: "0.875rem",
           }}
         >
-          {t('plan.static.contactToUpgrade', 'Contact us to upgrade or customize your plan')}
+          {t("plan.static.contactToUpgrade", "Contact us to upgrade or customize your plan")}
         </p>
 
         <div
           style={{
-            display: 'grid',
-            gridTemplateColumns: 'repeat(3, 1fr)',
-            gap: '1rem',
-            paddingBottom: '0.1rem',
+            display: "grid",
+            gridTemplateColumns: "repeat(3, 1fr)",
+            gap: "1rem",
+            paddingBottom: "0.1rem",
           }}
         >
           {staticPlans.map((plan) => (
@@ -137,28 +140,20 @@ const StaticPlanSection: React.FC<StaticPlanSectionProps> = ({ currentLicenseInf
               style={getBaseCardStyle(plan.id === currentPlan.id)}
               className="plan-card"
             >
-              {plan.id === currentPlan.id && (
-                <PricingBadge
-                  type="current"
-                  label={t('plan.current', 'Current Plan')}
-                />
-              )}
+              {plan.id === currentPlan.id && <PricingBadge type="current" label={t("plan.current", "Current Plan")} />}
               {plan.popular && plan.id !== currentPlan.id && (
-                <PricingBadge
-                  type="popular"
-                  label={t('plan.popular', 'Popular')}
-                />
+                <PricingBadge type="popular" label={t("plan.popular", "Popular")} />
               )}
 
-              <Stack gap="md" style={{ height: '100%' }}>
+              <Stack gap="md" style={{ height: "100%" }}>
                 <div>
-                  <Text size="xl" fw={700} style={{ fontSize: '2rem' }}>
+                  <Text size="xl" fw={700} style={{ fontSize: "2rem" }}>
                     {plan.name}
                   </Text>
                   <Text size="xs" c="dimmed" mt="xs">
-                    {typeof plan.maxUsers === 'string'
+                    {typeof plan.maxUsers === "string"
                       ? plan.maxUsers
-                      : `${t('plan.static.upTo', 'Up to')} ${plan.maxUsers} ${t('workspace.people.license.users', 'users')}`}
+                      : `${t("plan.static.upTo", "Up to")} ${plan.maxUsers} ${t("workspace.people.license.users", "users")}`}
                   </Text>
                 </div>
 
@@ -179,78 +174,56 @@ const StaticPlanSection: React.FC<StaticPlanSectionProps> = ({ currentLicenseInf
                   const isDowngradePlan = checkIsDowngrade(currentTier, plan.id);
 
                   // Free Plan
-                  if (plan.id === 'free') {
+                  if (plan.id === "free") {
                     return (
-                      <Button
-                        variant="filled"
-                        disabled
-                        fullWidth
-                        className="plan-button"
-                      >
-                        {isCurrent
-                          ? t('plan.current', 'Current Plan')
-                          : t('plan.free.included', 'Included')}
+                      <Button variant="filled" disabled fullWidth className="plan-button">
+                        {isCurrent ? t("plan.current", "Current Plan") : t("plan.free.included", "Included")}
                       </Button>
                     );
                   }
 
                   // Server Plan
-                  if (plan.id === 'server') {
-                    if (currentTier === 'free') {
+                  if (plan.id === "server") {
+                    if (currentTier === "free") {
                       return (
                         <Button
                           variant="filled"
                           fullWidth
-                          onClick={() => handleOpenCheckout('server', false)}
+                          onClick={() => handleOpenCheckout("server", false)}
                           className="plan-button"
                         >
-                          {t('plan.upgrade', 'Upgrade')}
+                          {t("plan.upgrade", "Upgrade")}
                         </Button>
                       );
                     }
                     if (isCurrent) {
                       return (
-                        <Button
-                          variant="filled"
-                          fullWidth
-                          onClick={handleManageBilling}
-                          className="plan-button"
-                        >
-                          {t('plan.manage', 'Manage')}
+                        <Button variant="filled" fullWidth onClick={handleManageBilling} className="plan-button">
+                          {t("plan.manage", "Manage")}
                         </Button>
                       );
                     }
                     if (isDowngradePlan) {
                       return (
-                        <Button
-                          variant="filled"
-                          disabled
-                          fullWidth
-                          className="plan-button"
-                        >
-                          {t('plan.free.included', 'Included')}
+                        <Button variant="filled" disabled fullWidth className="plan-button">
+                          {t("plan.free.included", "Included")}
                         </Button>
                       );
                     }
                   }
 
                   // Enterprise Plan
-                  if (plan.id === 'enterprise') {
+                  if (plan.id === "enterprise") {
                     if (isEnterpriseBlockedForFree(currentTier, plan.id)) {
                       return (
-                        <Tooltip label={t('plan.enterprise.requiresServer', 'Requires Server plan')} position="top" withArrow>
-                          <Button
-                            variant="filled"
-                            disabled
-                            fullWidth
-                            className="plan-button"
-                          >
-                            {t('plan.enterprise.requiresServer', 'Requires Server')}
+                        <Tooltip label={t("plan.enterprise.requiresServer", "Requires Server plan")} position="top" withArrow>
+                          <Button variant="filled" disabled fullWidth className="plan-button">
+                            {t("plan.enterprise.requiresServer", "Requires Server")}
                           </Button>
                         </Tooltip>
                       );
                     }
-                    if (currentTier === 'server') {
+                    if (currentTier === "server") {
                       // TODO: Re-enable checkout flow when account syncing is ready
                       // return (
                       //   <Button
@@ -263,25 +236,15 @@ const StaticPlanSection: React.FC<StaticPlanSectionProps> = ({ currentLicenseInf
                       //   </Button>
                       // );
                       return (
-                        <Button
-                          variant="filled"
-                          fullWidth
-                          disabled
-                          className="plan-button"
-                        >
-                          {t('plan.contact', 'Contact Us')}
+                        <Button variant="filled" fullWidth disabled className="plan-button">
+                          {t("plan.contact", "Contact Us")}
                         </Button>
                       );
                     }
                     if (isCurrent) {
                       return (
-                        <Button
-                          variant="filled"
-                          fullWidth
-                          onClick={handleManageBilling}
-                          className="plan-button"
-                        >
-                          {t('plan.manage', 'Manage')}
+                        <Button variant="filled" fullWidth onClick={handleManageBilling} className="plan-button">
+                          {t("plan.manage", "Manage")}
                         </Button>
                       );
                     }
@@ -295,11 +258,11 @@ const StaticPlanSection: React.FC<StaticPlanSectionProps> = ({ currentLicenseInf
         </div>
 
         {/* Feature Comparison Toggle */}
-        <div style={{ textAlign: 'center', marginTop: '1rem' }}>
+        <div style={{ textAlign: "center", marginTop: "1rem" }}>
           <Button variant="subtle" onClick={() => setShowComparison(!showComparison)}>
             {showComparison
-              ? t('plan.hideComparison', 'Hide Feature Comparison')
-              : t('plan.showComparison', 'Compare All Features')}
+              ? t("plan.hideComparison", "Hide Feature Comparison")
+              : t("plan.showComparison", "Compare All Features")}
           </Button>
         </div>
 
diff --git a/frontend/src/proprietary/components/shared/config/configSections/usage/UsageAnalyticsChart.tsx b/frontend/src/proprietary/components/shared/config/configSections/usage/UsageAnalyticsChart.tsx
index 9e65494c45..ca88748dee 100644
--- a/frontend/src/proprietary/components/shared/config/configSections/usage/UsageAnalyticsChart.tsx
+++ b/frontend/src/proprietary/components/shared/config/configSections/usage/UsageAnalyticsChart.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import { Card, Text, Stack, Group, Box } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
+import React from "react";
+import { Card, Text, Stack, Group, Box } from "@mantine/core";
+import { useTranslation } from "react-i18next";
 
 interface SimpleBarChartProps {
   data: { label: string; value: number }[];
@@ -14,7 +14,7 @@ const SimpleBarChart: React.FC<SimpleBarChartProps> = ({ data, maxValue }) => {
     <Stack gap="sm">
       {data.length === 0 ? (
         <Text c="dimmed" ta="center" py="xl">
-          {t('usage.noData', 'No data available')}
+          {t("usage.noData", "No data available")}
         </Text>
       ) : (
         data.map((item, index) => (
@@ -25,9 +25,9 @@ const SimpleBarChart: React.FC<SimpleBarChartProps> = ({ data, maxValue }) => {
                 c="dimmed"
                 maw="60%"
                 style={{
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                  whiteSpace: 'nowrap',
+                  overflow: "hidden",
+                  textOverflow: "ellipsis",
+                  whiteSpace: "nowrap",
                 }}
               >
                 {item.label}
@@ -43,19 +43,19 @@ const SimpleBarChart: React.FC<SimpleBarChartProps> = ({ data, maxValue }) => {
             </Group>
             <Box
               style={{
-                width: '100%',
-                height: '0.5rem',
-                backgroundColor: 'var(--mantine-color-gray-2)',
-                borderRadius: 'var(--mantine-radius-sm)',
-                overflow: 'hidden',
+                width: "100%",
+                height: "0.5rem",
+                backgroundColor: "var(--mantine-color-gray-2)",
+                borderRadius: "var(--mantine-radius-sm)",
+                overflow: "hidden",
               }}
             >
               <Box
                 style={{
                   width: `${(item.value / maxValue) * 100}%`,
-                  height: '100%',
-                  backgroundColor: 'var(--mantine-color-blue-6)',
-                  transition: 'width 0.3s ease',
+                  height: "100%",
+                  backgroundColor: "var(--mantine-color-blue-6)",
+                  transition: "width 0.3s ease",
                 }}
               />
             </Box>
@@ -83,7 +83,7 @@ const UsageAnalyticsChart: React.FC<UsageAnalyticsChartProps> = ({ data }) => {
     <Card padding="lg" radius="md" withBorder>
       <Stack gap="md">
         <Text size="lg" fw={600}>
-          {t('usage.chart.title', 'Endpoint Usage Chart')}
+          {t("usage.chart.title", "Endpoint Usage Chart")}
         </Text>
         <SimpleBarChart data={safeData} maxValue={safeMaxValue} />
       </Stack>
diff --git a/frontend/src/proprietary/components/shared/config/configSections/usage/UsageAnalyticsTable.tsx b/frontend/src/proprietary/components/shared/config/configSections/usage/UsageAnalyticsTable.tsx
index b12c025748..c58e632a14 100644
--- a/frontend/src/proprietary/components/shared/config/configSections/usage/UsageAnalyticsTable.tsx
+++ b/frontend/src/proprietary/components/shared/config/configSections/usage/UsageAnalyticsTable.tsx
@@ -1,17 +1,7 @@
-import React from 'react';
-import {
-  Card,
-  Text,
-  Stack,
-  Table,
-  TableThead,
-  TableTbody,
-  TableTr,
-  TableTh,
-  TableTd,
-} from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { EndpointStatistic } from '@app/services/usageAnalyticsService';
+import React from "react";
+import { Card, Text, Stack, Table, TableThead, TableTbody, TableTr, TableTh, TableTd } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { EndpointStatistic } from "@app/services/usageAnalyticsService";
 
 interface UsageAnalyticsTableProps {
   data: EndpointStatistic[];
@@ -24,7 +14,7 @@ const UsageAnalyticsTable: React.FC<UsageAnalyticsTableProps> = ({ data }) => {
     <Card padding="lg" radius="md" withBorder>
       <Stack gap="md">
         <Text size="lg" fw={600}>
-          {t('usage.table.title', 'Detailed Statistics')}
+          {t("usage.table.title", "Detailed Statistics")}
         </Text>
 
         <Table
@@ -32,23 +22,25 @@ const UsageAnalyticsTable: React.FC<UsageAnalyticsTableProps> = ({ data }) => {
           verticalSpacing="sm"
           withRowBorders
           highlightOnHover
-          style={{
-            '--table-border-color': 'var(--mantine-color-gray-3)',
-          } as React.CSSProperties}
+          style={
+            {
+              "--table-border-color": "var(--mantine-color-gray-3)",
+            } as React.CSSProperties
+          }
         >
           <TableThead>
-            <TableTr style={{ backgroundColor: 'var(--mantine-color-gray-0)' }}>
-              <TableTh style={{ fontWeight: 600, color: 'var(--mantine-color-gray-7)' }} fz="sm" w="5%">
+            <TableTr style={{ backgroundColor: "var(--mantine-color-gray-0)" }}>
+              <TableTh style={{ fontWeight: 600, color: "var(--mantine-color-gray-7)" }} fz="sm" w="5%">
                 #
               </TableTh>
-              <TableTh style={{ fontWeight: 600, color: 'var(--mantine-color-gray-7)' }} fz="sm" w="55%">
-                {t('usage.table.endpoint', 'Endpoint')}
+              <TableTh style={{ fontWeight: 600, color: "var(--mantine-color-gray-7)" }} fz="sm" w="55%">
+                {t("usage.table.endpoint", "Endpoint")}
               </TableTh>
-              <TableTh style={{ fontWeight: 600, color: 'var(--mantine-color-gray-7)' }} fz="sm" w="20%" ta="right">
-                {t('usage.table.visits', 'Visits')}
+              <TableTh style={{ fontWeight: 600, color: "var(--mantine-color-gray-7)" }} fz="sm" w="20%" ta="right">
+                {t("usage.table.visits", "Visits")}
               </TableTh>
-              <TableTh style={{ fontWeight: 600, color: 'var(--mantine-color-gray-7)' }} fz="sm" w="20%" ta="right">
-                {t('usage.table.percentage', 'Percentage')}
+              <TableTh style={{ fontWeight: 600, color: "var(--mantine-color-gray-7)" }} fz="sm" w="20%" ta="right">
+                {t("usage.table.percentage", "Percentage")}
               </TableTh>
             </TableTr>
           </TableThead>
@@ -57,7 +49,7 @@ const UsageAnalyticsTable: React.FC<UsageAnalyticsTableProps> = ({ data }) => {
               <TableTr>
                 <TableTd colSpan={4}>
                   <Text ta="center" c="dimmed" py="xl">
-                    {t('usage.table.noData', 'No data available')}
+                    {t("usage.table.noData", "No data available")}
                   </Text>
                 </TableTd>
               </TableTr>
diff --git a/frontend/src/proprietary/components/shared/dividerWithText/DividerWithText.css b/frontend/src/proprietary/components/shared/dividerWithText/DividerWithText.css
index ce26b4546b..c5f9f15cbf 100644
--- a/frontend/src/proprietary/components/shared/dividerWithText/DividerWithText.css
+++ b/frontend/src/proprietary/components/shared/dividerWithText/DividerWithText.css
@@ -1,4 +1,3 @@
-
 .text-divider {
   display: flex;
   align-items: center;
diff --git a/frontend/src/proprietary/components/shared/loginSlides.ts b/frontend/src/proprietary/components/shared/loginSlides.ts
index 51c5072371..fdc7577be9 100644
--- a/frontend/src/proprietary/components/shared/loginSlides.ts
+++ b/frontend/src/proprietary/components/shared/loginSlides.ts
@@ -1,7 +1,7 @@
-import { BASE_PATH } from '@app/constants/app';
-import { getLogoFolder } from '@app/constants/logo';
-import type { LogoVariant } from '@app/services/preferencesService';
-import type { TFunction } from 'i18next';
+import { BASE_PATH } from "@app/constants/app";
+import { getLogoFolder } from "@app/constants/logo";
+import type { LogoVariant } from "@app/services/preferencesService";
+import type { TFunction } from "i18next";
 
 export type LoginCarouselSlide = {
   src: string;
@@ -13,44 +13,38 @@ export type LoginCarouselSlide = {
   tiltMaxDeg?: number;
 };
 
-export const buildLoginSlides = (
-  variant: LogoVariant | null | undefined,
-  t: TFunction
-): LoginCarouselSlide[] => {
+export const buildLoginSlides = (variant: LogoVariant | null | undefined, t: TFunction): LoginCarouselSlide[] => {
   const folder = getLogoFolder(variant);
   const heroImage = `${BASE_PATH}/${folder}/Firstpage.png`;
 
   return [
     {
       src: heroImage,
-      alt: t('login.slides.overview.alt', 'Stirling PDF overview'),
-      title: t('login.slides.overview.title', 'Your one-stop-shop for all your PDF needs.'),
+      alt: t("login.slides.overview.alt", "Stirling PDF overview"),
+      title: t("login.slides.overview.title", "Your one-stop-shop for all your PDF needs."),
       subtitle: t(
-        'login.slides.overview.subtitle',
-        'A privacy-first cloud suite for PDFs that lets you convert, sign, redact, and manage documents, along with 50+ other powerful tools.'
+        "login.slides.overview.subtitle",
+        "A privacy-first cloud suite for PDFs that lets you convert, sign, redact, and manage documents, along with 50+ other powerful tools.",
       ),
       followMouseTilt: true,
       tiltMaxDeg: 5,
     },
     {
       src: `${BASE_PATH}/Login/AddToPDF.png`,
-      alt: t('login.slides.edit.alt', 'Edit PDFs'),
-      title: t('login.slides.edit.title', 'Edit PDFs to display/secure the information you want'),
+      alt: t("login.slides.edit.alt", "Edit PDFs"),
+      title: t("login.slides.edit.title", "Edit PDFs to display/secure the information you want"),
       subtitle: t(
-        'login.slides.edit.subtitle',
-        'With over a dozen tools to help you redact, sign, read and manipulate PDFs, you will be sure to find what you are looking for.'
+        "login.slides.edit.subtitle",
+        "With over a dozen tools to help you redact, sign, read and manipulate PDFs, you will be sure to find what you are looking for.",
       ),
       followMouseTilt: true,
       tiltMaxDeg: 5,
     },
     {
       src: `${BASE_PATH}/Login/SecurePDF.png`,
-      alt: t('login.slides.secure.alt', 'Secure PDFs'),
-      title: t('login.slides.secure.title', 'Protect sensitive information in your PDFs'),
-      subtitle: t(
-        'login.slides.secure.subtitle',
-        'Add passwords, redact content, and manage certificates with ease.'
-      ),
+      alt: t("login.slides.secure.alt", "Secure PDFs"),
+      title: t("login.slides.secure.title", "Protect sensitive information in your PDFs"),
+      subtitle: t("login.slides.secure.subtitle", "Add passwords, redact content, and manage certificates with ease."),
       followMouseTilt: true,
       tiltMaxDeg: 5,
     },
diff --git a/frontend/src/proprietary/components/shared/stripeCheckout/StripeCheckout.tsx b/frontend/src/proprietary/components/shared/stripeCheckout/StripeCheckout.tsx
index 2743a49061..a9e1768e7c 100644
--- a/frontend/src/proprietary/components/shared/stripeCheckout/StripeCheckout.tsx
+++ b/frontend/src/proprietary/components/shared/stripeCheckout/StripeCheckout.tsx
@@ -1,38 +1,37 @@
-import React, { useEffect } from 'react';
-import { Modal, Text, Group, ActionIcon } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import licenseService from '@app/services/licenseService';
-import { useIsMobile } from '@app/hooks/useIsMobile';
-import { Z_INDEX_OVER_CONFIG_MODAL } from '@app/styles/zIndex';
-import { StripeCheckoutProps } from '@app/components/shared/stripeCheckout/types/checkout';
-import { validateEmail, getModalTitle } from '@app/components/shared/stripeCheckout/utils/checkoutUtils';
-import { calculateSavings } from '@app/components/shared/stripeCheckout/utils/savingsCalculator';
-import { useCheckoutState } from '@app/components/shared/stripeCheckout/hooks/useCheckoutState';
-import { useCheckoutNavigation } from '@app/components/shared/stripeCheckout/hooks/useCheckoutNavigation';
-import { useLicensePolling } from '@app/components/shared/stripeCheckout/hooks/useLicensePolling';
-import { useCheckoutSession } from '@app/components/shared/stripeCheckout/hooks/useCheckoutSession';
-import { EmailStage } from '@app/components/shared/stripeCheckout/stages/EmailStage';
-import { PlanSelectionStage } from '@app/components/shared/stripeCheckout/stages/PlanSelectionStage';
-import { PaymentStage } from '@app/components/shared/stripeCheckout/stages/PaymentStage';
-import { SuccessStage } from '@app/components/shared/stripeCheckout/stages/SuccessStage';
-import { ErrorStage } from '@app/components/shared/stripeCheckout/stages/ErrorStage';
+import React, { useEffect } from "react";
+import { Modal, Text, Group, ActionIcon } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import licenseService from "@app/services/licenseService";
+import { useIsMobile } from "@app/hooks/useIsMobile";
+import { Z_INDEX_OVER_CONFIG_MODAL } from "@app/styles/zIndex";
+import { StripeCheckoutProps } from "@app/components/shared/stripeCheckout/types/checkout";
+import { validateEmail, getModalTitle } from "@app/components/shared/stripeCheckout/utils/checkoutUtils";
+import { calculateSavings } from "@app/components/shared/stripeCheckout/utils/savingsCalculator";
+import { useCheckoutState } from "@app/components/shared/stripeCheckout/hooks/useCheckoutState";
+import { useCheckoutNavigation } from "@app/components/shared/stripeCheckout/hooks/useCheckoutNavigation";
+import { useLicensePolling } from "@app/components/shared/stripeCheckout/hooks/useLicensePolling";
+import { useCheckoutSession } from "@app/components/shared/stripeCheckout/hooks/useCheckoutSession";
+import { EmailStage } from "@app/components/shared/stripeCheckout/stages/EmailStage";
+import { PlanSelectionStage } from "@app/components/shared/stripeCheckout/stages/PlanSelectionStage";
+import { PaymentStage } from "@app/components/shared/stripeCheckout/stages/PaymentStage";
+import { SuccessStage } from "@app/components/shared/stripeCheckout/stages/SuccessStage";
+import { ErrorStage } from "@app/components/shared/stripeCheckout/stages/ErrorStage";
 
 // Validate Stripe key (static validation, no dynamic imports)
 const STRIPE_KEY = import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY;
 
 if (!STRIPE_KEY) {
   console.error(
-    'VITE_STRIPE_PUBLISHABLE_KEY environment variable is required. ' +
-    'Please add it to your .env file. ' +
-    'Get your key from https://dashboard.stripe.com/apikeys'
+    "VITE_STRIPE_PUBLISHABLE_KEY environment variable is required. " +
+      "Please add it to your .env file. " +
+      "Get your key from https://dashboard.stripe.com/apikeys",
   );
 }
 
-if (STRIPE_KEY && !STRIPE_KEY.startsWith('pk_')) {
+if (STRIPE_KEY && !STRIPE_KEY.startsWith("pk_")) {
   console.error(
-    `Invalid Stripe publishable key format. ` +
-    `Expected key starting with 'pk_', got: ${STRIPE_KEY.substring(0, 10)}...`
+    `Invalid Stripe publishable key format. ` + `Expected key starting with 'pk_', got: ${STRIPE_KEY.substring(0, 10)}...`,
   );
 }
 
@@ -57,7 +56,7 @@ const StripeCheckout: React.FC<StripeCheckoutProps> = ({
     checkoutState.state,
     checkoutState.setState,
     checkoutState.stageHistory,
-    checkoutState.setStageHistory
+    checkoutState.setStageHistory,
   );
 
   // Initialize license polling hook
@@ -65,7 +64,7 @@ const StripeCheckout: React.FC<StripeCheckoutProps> = ({
     checkoutState.isMountedRef,
     checkoutState.setPollingStatus,
     checkoutState.setLicenseKey,
-    onLicenseActivated
+    onLicenseActivated,
   );
 
   // Initialize checkout session hook
@@ -82,7 +81,7 @@ const StripeCheckout: React.FC<StripeCheckoutProps> = ({
     polling.pollForLicenseKey,
     onSuccess,
     onError,
-    onLicenseActivated
+    onLicenseActivated,
   );
 
   // Calculate savings
@@ -92,17 +91,17 @@ const StripeCheckout: React.FC<StripeCheckoutProps> = ({
   const handleEmailSubmit = () => {
     const validation = validateEmail(checkoutState.emailInput);
     if (validation.valid) {
-      checkoutState.setState(prev => ({ ...prev, email: checkoutState.emailInput }));
-      navigation.goToStage('plan-selection');
+      checkoutState.setState((prev) => ({ ...prev, email: checkoutState.emailInput }));
+      navigation.goToStage("plan-selection");
     } else {
       checkoutState.setEmailError(validation.error);
     }
   };
 
   // Plan selection handler
-  const handlePlanSelect = (period: 'monthly' | 'yearly') => {
+  const handlePlanSelect = (period: "monthly" | "yearly") => {
     checkoutState.setSelectedPeriod(period);
-    navigation.goToStage('payment');
+    navigation.goToStage("payment");
   };
 
   // Close handler
@@ -136,19 +135,19 @@ const StripeCheckout: React.FC<StripeCheckoutProps> = ({
 
     // Handle hosted checkout success - open directly to success state
     if (hostedCheckoutSuccess) {
-      console.log('Opening modal to success state for hosted checkout return');
+      console.log("Opening modal to success state for hosted checkout return");
 
       // Set appropriate state based on upgrade vs new subscription
       if (hostedCheckoutSuccess.isUpgrade) {
-        checkoutState.setCurrentLicenseKey('existing'); // Flag to indicate upgrade
-        checkoutState.setPollingStatus('ready');
+        checkoutState.setCurrentLicenseKey("existing"); // Flag to indicate upgrade
+        checkoutState.setPollingStatus("ready");
       } else if (hostedCheckoutSuccess.licenseKey) {
         checkoutState.setLicenseKey(hostedCheckoutSuccess.licenseKey);
-        checkoutState.setPollingStatus('ready');
+        checkoutState.setPollingStatus("ready");
       }
 
       // Set to success state to show success UI
-      checkoutState.setState({ currentStage: 'success', loading: false });
+      checkoutState.setState({ currentStage: "success", loading: false });
       return;
     }
 
@@ -157,32 +156,35 @@ const StripeCheckout: React.FC<StripeCheckoutProps> = ({
       try {
         const licenseInfo = await licenseService.getLicenseInfo();
         // Only skip email if license is PRO or ENTERPRISE (not NORMAL/free tier)
-        if (licenseInfo?.licenseType && licenseInfo.licenseType !== 'NORMAL') {
+        if (licenseInfo?.licenseType && licenseInfo.licenseType !== "NORMAL") {
           // Has valid premium license - skip email stage
-          console.log('Valid premium license detected - skipping email stage');
+          console.log("Valid premium license detected - skipping email stage");
           checkoutState.setCurrentLicenseKey(licenseInfo.licenseKey || null);
-          checkoutState.setState({ currentStage: 'plan-selection', loading: false });
+          checkoutState.setState({ currentStage: "plan-selection", loading: false });
         } else {
           // No valid premium license - start at email stage
-          checkoutState.setState({ currentStage: 'email', loading: false });
+          checkoutState.setState({ currentStage: "email", loading: false });
         }
       } catch (error) {
-        console.warn('Could not check for existing license:', error);
+        console.warn("Could not check for existing license:", error);
         // Default to email stage if check fails
-        checkoutState.setState({ currentStage: 'email', loading: false });
+        checkoutState.setState({ currentStage: "email", loading: false });
       }
     };
 
     checkExistingLicense();
-  }, [opened, hostedCheckoutSuccess, checkoutState.setCurrentLicenseKey, checkoutState.setPollingStatus, checkoutState.setLicenseKey, checkoutState.setState]);
+  }, [
+    opened,
+    hostedCheckoutSuccess,
+    checkoutState.setCurrentLicenseKey,
+    checkoutState.setPollingStatus,
+    checkoutState.setLicenseKey,
+    checkoutState.setState,
+  ]);
 
   // Trigger checkout session creation when entering payment stage
   useEffect(() => {
-    if (
-      checkoutState.state.currentStage === 'payment' &&
-      !checkoutState.state.clientSecret &&
-      !checkoutState.state.loading
-    ) {
+    if (checkoutState.state.currentStage === "payment" && !checkoutState.state.clientSecret && !checkoutState.state.loading) {
       session.createCheckoutSession();
     }
   }, [checkoutState.state.currentStage, checkoutState.state.clientSecret, checkoutState.state.loading, session]);
@@ -192,7 +194,7 @@ const StripeCheckout: React.FC<StripeCheckoutProps> = ({
     // Don't block checkout - hosted mode works without publishable key
     // The checkout will automatically redirect to Stripe hosted page if key is missing
     switch (checkoutState.state.currentStage) {
-      case 'email':
+      case "email":
         return (
           <EmailStage
             emailInput={checkoutState.emailInput}
@@ -202,7 +204,7 @@ const StripeCheckout: React.FC<StripeCheckoutProps> = ({
           />
         );
 
-      case 'plan-selection':
+      case "plan-selection":
         return (
           <PlanSelectionStage
             planGroup={planGroup}
@@ -212,7 +214,7 @@ const StripeCheckout: React.FC<StripeCheckoutProps> = ({
           />
         );
 
-      case 'payment':
+      case "payment":
         return (
           <PaymentStage
             clientSecret={checkoutState.state.clientSecret || null}
@@ -221,7 +223,7 @@ const StripeCheckout: React.FC<StripeCheckoutProps> = ({
           />
         );
 
-      case 'success':
+      case "success":
         return (
           <SuccessStage
             pollingStatus={checkoutState.pollingStatus}
@@ -231,13 +233,8 @@ const StripeCheckout: React.FC<StripeCheckoutProps> = ({
           />
         );
 
-      case 'error':
-        return (
-          <ErrorStage
-            error={checkoutState.state.error || 'An unknown error occurred'}
-            onClose={handleClose}
-          />
-        );
+      case "error":
+        return <ErrorStage error={checkoutState.state.error || "An unknown error occurred"} onClose={handleClose} />;
 
       default:
         return null;
@@ -253,12 +250,7 @@ const StripeCheckout: React.FC<StripeCheckoutProps> = ({
       title={
         <Group gap="sm" wrap="nowrap">
           {canGoBack && (
-            <ActionIcon
-              variant="subtle"
-              size="lg"
-              onClick={navigation.goBack}
-              aria-label={t('common.back', 'Back')}
-            >
+            <ActionIcon variant="subtle" size="lg" onClick={navigation.goBack} aria-label={t("common.back", "Back")}>
               <LocalIcon icon="arrow-back" width={20} height={20} />
             </ActionIcon>
           )}
@@ -278,7 +270,7 @@ const StripeCheckout: React.FC<StripeCheckoutProps> = ({
       styles={{
         body: {},
         content: {
-          maxHeight: '95vh',
+          maxHeight: "95vh",
         },
       }}
     >
diff --git a/frontend/src/proprietary/components/shared/stripeCheckout/components/PriceDisplay.tsx b/frontend/src/proprietary/components/shared/stripeCheckout/components/PriceDisplay.tsx
index b0e3ff9279..0953f1b4fb 100644
--- a/frontend/src/proprietary/components/shared/stripeCheckout/components/PriceDisplay.tsx
+++ b/frontend/src/proprietary/components/shared/stripeCheckout/components/PriceDisplay.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
-import { Text, Stack } from '@mantine/core';
-import { formatPrice } from '@app/components/shared/stripeCheckout/utils/pricingUtils';
-import { PRICE_FONT_WEIGHT } from '@app/components/shared/stripeCheckout/utils/cardStyles';
+import React from "react";
+import { Text, Stack } from "@mantine/core";
+import { formatPrice } from "@app/components/shared/stripeCheckout/utils/pricingUtils";
+import { PRICE_FONT_WEIGHT } from "@app/components/shared/stripeCheckout/utils/cardStyles";
 
 interface SimplePriceProps {
-  mode: 'simple';
+  mode: "simple";
   price: number;
   currency: string;
   period: string;
@@ -12,21 +12,21 @@ interface SimplePriceProps {
 }
 
 interface EnterprisePriceProps {
-  mode: 'enterprise';
+  mode: "enterprise";
   basePrice: number;
   seatPrice: number;
   totalPrice?: number;
   currency: string;
-  period: 'month' | 'year';
+  period: "month" | "year";
   seatCount?: number;
-  size?: 'sm' | 'md' | 'lg';
+  size?: "sm" | "md" | "lg";
 }
 
 type PriceDisplayProps = SimplePriceProps | EnterprisePriceProps;
 
 export const PriceDisplay: React.FC<PriceDisplayProps> = (props) => {
-  if (props.mode === 'simple') {
-    const fontSize = props.size || '2.25rem';
+  if (props.mode === "simple") {
+    const fontSize = props.size || "2.25rem";
     return (
       <>
         <Text size={fontSize} fw={PRICE_FONT_WEIGHT} style={{ lineHeight: 1 }}>
@@ -40,9 +40,9 @@ export const PriceDisplay: React.FC<PriceDisplayProps> = (props) => {
   }
 
   // Enterprise mode
-  const { basePrice, seatPrice, totalPrice, currency, period, seatCount, size = 'md' } = props;
-  const fontSize = size === 'lg' ? '2rem' : size === 'sm' ? 'md' : 'xl';
-  const totalFontSize = size === 'lg' ? '2rem' : '2rem';
+  const { basePrice, seatPrice, totalPrice, currency, period, seatCount, size = "md" } = props;
+  const fontSize = size === "lg" ? "2rem" : size === "sm" ? "md" : "xl";
+  const totalFontSize = size === "lg" ? "2rem" : "2rem";
 
   return (
     <Stack gap="sm">
@@ -53,7 +53,7 @@ export const PriceDisplay: React.FC<PriceDisplayProps> = (props) => {
         <Text size={fontSize} fw={PRICE_FONT_WEIGHT}>
           {formatPrice(basePrice, currency)}
           <Text component="span" size="sm" c="dimmed" fw={400}>
-            {' '}
+            {" "}
             /{period}
           </Text>
         </Text>
@@ -65,7 +65,7 @@ export const PriceDisplay: React.FC<PriceDisplayProps> = (props) => {
         <Text size={fontSize} fw={PRICE_FONT_WEIGHT}>
           {formatPrice(seatPrice, currency)}
           <Text component="span" size="sm" c="dimmed" fw={400}>
-            {' '}
+            {" "}
             /seat/{period}
           </Text>
         </Text>
@@ -78,8 +78,8 @@ export const PriceDisplay: React.FC<PriceDisplayProps> = (props) => {
           <Text size={totalFontSize} fw={PRICE_FONT_WEIGHT} style={{ lineHeight: 1 }}>
             {formatPrice(totalPrice, currency)}
             <Text component="span" size="sm" c="dimmed" fw={400}>
-              {' '}
-              /{period === 'year' ? 'month' : period}
+              {" "}
+              /{period === "year" ? "month" : period}
             </Text>
           </Text>
         </div>
diff --git a/frontend/src/proprietary/components/shared/stripeCheckout/components/PricingBadge.tsx b/frontend/src/proprietary/components/shared/stripeCheckout/components/PricingBadge.tsx
index 80a289914b..b725f2f621 100644
--- a/frontend/src/proprietary/components/shared/stripeCheckout/components/PricingBadge.tsx
+++ b/frontend/src/proprietary/components/shared/stripeCheckout/components/PricingBadge.tsx
@@ -1,23 +1,23 @@
-import React from 'react';
-import { Badge } from '@mantine/core';
+import React from "react";
+import { Badge } from "@mantine/core";
 
 interface PricingBadgeProps {
-  type: 'current' | 'popular' | 'savings';
+  type: "current" | "popular" | "savings";
   label: string;
   savingsPercent?: number;
 }
 
 export const PricingBadge: React.FC<PricingBadgeProps> = ({ type, label }) => {
-  const color = type === 'current' || type === 'savings' ? 'green' : 'blue';
-  const size = type === 'savings' ? 'lg' : 'sm';
+  const color = type === "current" || type === "savings" ? "green" : "blue";
+  const size = type === "savings" ? "lg" : "sm";
 
   return (
     <Badge
       color={color}
       variant="filled"
       size={size}
-      style={{ position: 'absolute', top: '0.5rem', right: '0.5rem' }}
-      className={type === 'current' ? 'current-plan-badge' : undefined}
+      style={{ position: "absolute", top: "0.5rem", right: "0.5rem" }}
+      className={type === "current" ? "current-plan-badge" : undefined}
     >
       {label}
     </Badge>
diff --git a/frontend/src/proprietary/components/shared/stripeCheckout/hooks/useCheckoutNavigation.ts b/frontend/src/proprietary/components/shared/stripeCheckout/hooks/useCheckoutNavigation.ts
index 8ee39b4e9c..09a73f61a6 100644
--- a/frontend/src/proprietary/components/shared/stripeCheckout/hooks/useCheckoutNavigation.ts
+++ b/frontend/src/proprietary/components/shared/stripeCheckout/hooks/useCheckoutNavigation.ts
@@ -1,5 +1,5 @@
-import { useCallback } from 'react';
-import { CheckoutState, CheckoutStage } from '@app/components/shared/stripeCheckout/types/checkout';
+import { useCallback } from "react";
+import { CheckoutState, CheckoutStage } from "@app/components/shared/stripeCheckout/types/checkout";
 
 /**
  * Stage navigation and history management hook
@@ -8,28 +8,31 @@ export const useCheckoutNavigation = (
   state: CheckoutState,
   setState: React.Dispatch<React.SetStateAction<CheckoutState>>,
   stageHistory: CheckoutStage[],
-  setStageHistory: React.Dispatch<React.SetStateAction<CheckoutStage[]>>
+  setStageHistory: React.Dispatch<React.SetStateAction<CheckoutStage[]>>,
 ) => {
-  const goToStage = useCallback((nextStage: CheckoutStage) => {
-    setStageHistory(prev => [...prev, state.currentStage]);
-    setState(prev => ({ ...prev, currentStage: nextStage }));
-  }, [state.currentStage, setState, setStageHistory]);
+  const goToStage = useCallback(
+    (nextStage: CheckoutStage) => {
+      setStageHistory((prev) => [...prev, state.currentStage]);
+      setState((prev) => ({ ...prev, currentStage: nextStage }));
+    },
+    [state.currentStage, setState, setStageHistory],
+  );
 
   const goBack = useCallback(() => {
     if (stageHistory.length > 0) {
       const previousStage = stageHistory[stageHistory.length - 1];
-      setStageHistory(prev => prev.slice(0, -1));
+      setStageHistory((prev) => prev.slice(0, -1));
 
       // Reset payment state when going back from payment stage
-      if (state.currentStage === 'payment') {
-        setState(prev => ({
+      if (state.currentStage === "payment") {
+        setState((prev) => ({
           ...prev,
           currentStage: previousStage,
           clientSecret: undefined,
-          loading: false
+          loading: false,
         }));
       } else {
-        setState(prev => ({ ...prev, currentStage: previousStage }));
+        setState((prev) => ({ ...prev, currentStage: previousStage }));
       }
     }
   }, [stageHistory, state.currentStage, setState, setStageHistory]);
diff --git a/frontend/src/proprietary/components/shared/stripeCheckout/hooks/useCheckoutSession.ts b/frontend/src/proprietary/components/shared/stripeCheckout/hooks/useCheckoutSession.ts
index 7f7cf08ddf..db3443f660 100644
--- a/frontend/src/proprietary/components/shared/stripeCheckout/hooks/useCheckoutSession.ts
+++ b/frontend/src/proprietary/components/shared/stripeCheckout/hooks/useCheckoutSession.ts
@@ -1,7 +1,7 @@
-import { useCallback } from 'react';
-import licenseService, { PlanTier } from '@app/services/licenseService';
-import { resyncExistingLicense } from '@app/utils/licenseCheckoutUtils';
-import { CheckoutState, PollingStatus } from '@app/components/shared/stripeCheckout/types/checkout';
+import { useCallback } from "react";
+import licenseService, { PlanTier } from "@app/services/licenseService";
+import { resyncExistingLicense } from "@app/utils/licenseCheckoutUtils";
+import { CheckoutState, PollingStatus } from "@app/components/shared/stripeCheckout/types/checkout";
 
 /**
  * Checkout session creation and payment handling hook
@@ -19,20 +19,20 @@ export const useCheckoutSession = (
   pollForLicenseKey: (installId: string) => Promise<void>,
   onSuccess?: (sessionId: string) => void,
   onError?: (error: string) => void,
-  onLicenseActivated?: (licenseInfo: {licenseType: string; enabled: boolean; maxUsers: number; hasKey: boolean}) => void
+  onLicenseActivated?: (licenseInfo: { licenseType: string; enabled: boolean; maxUsers: number; hasKey: boolean }) => void,
 ) => {
   const createCheckoutSession = useCallback(async () => {
     if (!selectedPlan) {
       setState({
-        currentStage: 'error',
-        error: 'Selected plan period is not available',
+        currentStage: "error",
+        error: "Selected plan period is not available",
         loading: false,
       });
       return;
     }
 
     try {
-      setState(prev => ({ ...prev, loading: true }));
+      setState((prev) => ({ ...prev, loading: true }));
 
       // Fetch installation ID from backend
       let fetchedInstallationId = installationId;
@@ -46,13 +46,13 @@ export const useCheckoutSession = (
       let existingLicenseKey: string | undefined;
       try {
         const licenseInfo = await licenseService.getLicenseInfo();
-        if (licenseInfo?.licenseType && licenseInfo.licenseType !== 'NORMAL' && licenseInfo.licenseKey) {
+        if (licenseInfo?.licenseType && licenseInfo.licenseType !== "NORMAL" && licenseInfo.licenseKey) {
           existingLicenseKey = licenseInfo.licenseKey;
           setCurrentLicenseKey(existingLicenseKey);
-          console.log('Found existing valid license for upgrade');
+          console.log("Found existing valid license for upgrade");
         }
       } catch (error) {
-        console.warn('Could not fetch license info, proceeding as new license:', error);
+        console.warn("Could not fetch license info, proceeding as new license:", error);
       }
 
       const response = await licenseService.createCheckoutSession({
@@ -66,49 +66,39 @@ export const useCheckoutSession = (
 
       // Check if we got a redirect URL (hosted checkout for HTTP)
       if (response.url) {
-        console.log('Redirecting to Stripe hosted checkout:', response.url);
+        console.log("Redirecting to Stripe hosted checkout:", response.url);
         // Redirect to Stripe's hosted checkout page
         window.location.href = response.url;
         return;
       }
 
       // Otherwise, use embedded checkout (HTTPS)
-      setState(prev => ({
+      setState((prev) => ({
         ...prev,
         clientSecret: response.clientSecret,
         sessionId: response.sessionId,
         loading: false,
       }));
     } catch (err) {
-      const errorMessage =
-        err instanceof Error ? err.message : 'Failed to create checkout session';
+      const errorMessage = err instanceof Error ? err.message : "Failed to create checkout session";
       setState({
-        currentStage: 'error',
+        currentStage: "error",
         error: errorMessage,
         loading: false,
       });
       onError?.(errorMessage);
     }
-  }, [
-    selectedPlan,
-    state.email,
-    installationId,
-    minimumSeats,
-    setState,
-    setInstallationId,
-    setCurrentLicenseKey,
-    onError
-  ]);
+  }, [selectedPlan, state.email, installationId, minimumSeats, setState, setInstallationId, setCurrentLicenseKey, onError]);
 
   const handlePaymentComplete = useCallback(async () => {
     // Preserve state when changing stage
-    setState(prev => ({ ...prev, currentStage: 'success' }));
+    setState((prev) => ({ ...prev, currentStage: "success" }));
 
     // Check if this is an upgrade (existing license key) or new plan
     if (currentLicenseKey) {
       // UPGRADE FLOW: Resync existing license with Keygen
-      console.log('Upgrade detected - resyncing existing license with Keygen');
-      setPollingStatus('polling');
+      console.log("Upgrade detected - resyncing existing license with Keygen");
+      setPollingStatus("polling");
 
       const activation = await resyncExistingLicense({
         isMounted: () => true, // Modal is open, no need to check
@@ -117,26 +107,26 @@ export const useCheckoutSession = (
 
       if (activation.success) {
         console.log(`License upgraded successfully: ${activation.licenseType}`);
-        setPollingStatus('ready');
+        setPollingStatus("ready");
       } else {
-        console.error('Failed to sync upgraded license:', activation.error);
-        setPollingStatus('timeout');
+        console.error("Failed to sync upgraded license:", activation.error);
+        setPollingStatus("timeout");
       }
 
       // Notify parent (don't wait - upgrade is complete)
-      onSuccess?.(state.sessionId || '');
+      onSuccess?.(state.sessionId || "");
     } else {
       // NEW PLAN FLOW: Poll for new license key
-      console.log('New subscription - polling for license key');
+      console.log("New subscription - polling for license key");
 
       if (installationId) {
         pollForLicenseKey(installationId).finally(() => {
           // Only notify parent after polling completes or times out
-          onSuccess?.(state.sessionId || '');
+          onSuccess?.(state.sessionId || "");
         });
       } else {
         // No installation ID, notify immediately
-        onSuccess?.(state.sessionId || '');
+        onSuccess?.(state.sessionId || "");
       }
     }
   }, [
@@ -147,7 +137,7 @@ export const useCheckoutSession = (
     setPollingStatus,
     pollForLicenseKey,
     onSuccess,
-    onLicenseActivated
+    onLicenseActivated,
   ]);
 
   return {
diff --git a/frontend/src/proprietary/components/shared/stripeCheckout/hooks/useCheckoutState.ts b/frontend/src/proprietary/components/shared/stripeCheckout/hooks/useCheckoutState.ts
index 5c90491e50..a42e38c314 100644
--- a/frontend/src/proprietary/components/shared/stripeCheckout/hooks/useCheckoutState.ts
+++ b/frontend/src/proprietary/components/shared/stripeCheckout/hooks/useCheckoutState.ts
@@ -1,50 +1,46 @@
-import { useState, useCallback, useRef } from 'react';
-import { PlanTierGroup } from '@app/services/licenseService';
-import { CheckoutState, PollingStatus, CheckoutStage } from '@app/components/shared/stripeCheckout/types/checkout';
+import { useState, useCallback, useRef } from "react";
+import { PlanTierGroup } from "@app/services/licenseService";
+import { CheckoutState, PollingStatus, CheckoutStage } from "@app/components/shared/stripeCheckout/types/checkout";
 
 /**
  * Centralized state management hook for checkout flow
  */
 export const useCheckoutState = (planGroup: PlanTierGroup) => {
   const [state, setState] = useState<CheckoutState>({
-    currentStage: 'email',
-    loading: false
+    currentStage: "email",
+    loading: false,
   });
   const [stageHistory, setStageHistory] = useState<CheckoutStage[]>([]);
-  const [emailInput, setEmailInput] = useState<string>('');
-  const [emailError, setEmailError] = useState<string>('');
-  const [selectedPeriod, setSelectedPeriod] = useState<'monthly' | 'yearly'>(
-    planGroup.yearly ? 'yearly' : 'monthly'
-  );
+  const [emailInput, setEmailInput] = useState<string>("");
+  const [emailError, setEmailError] = useState<string>("");
+  const [selectedPeriod, setSelectedPeriod] = useState<"monthly" | "yearly">(planGroup.yearly ? "yearly" : "monthly");
   const [installationId, setInstallationId] = useState<string | null>(null);
   const [currentLicenseKey, setCurrentLicenseKey] = useState<string | null>(null);
   const [licenseKey, setLicenseKey] = useState<string | null>(null);
-  const [pollingStatus, setPollingStatus] = useState<PollingStatus>('idle');
+  const [pollingStatus, setPollingStatus] = useState<PollingStatus>("idle");
 
   // Refs for polling cleanup
   const isMountedRef = useRef(true);
   const pollingTimeoutRef = useRef<NodeJS.Timeout | null>(null);
 
   // Get the selected plan based on period
-  const selectedPlan = selectedPeriod === 'yearly'
-    ? planGroup.yearly
-    : planGroup.monthly;
+  const selectedPlan = selectedPeriod === "yearly" ? planGroup.yearly : planGroup.monthly;
 
   const resetState = useCallback(() => {
     setState({
-      currentStage: 'email',
+      currentStage: "email",
       loading: false,
       clientSecret: undefined,
       sessionId: undefined,
-      error: undefined
+      error: undefined,
     });
     setStageHistory([]);
-    setEmailInput('');
-    setEmailError('');
-    setPollingStatus('idle');
+    setEmailInput("");
+    setEmailError("");
+    setPollingStatus("idle");
     setCurrentLicenseKey(null);
     setLicenseKey(null);
-    setSelectedPeriod(planGroup.yearly ? 'yearly' : 'monthly');
+    setSelectedPeriod(planGroup.yearly ? "yearly" : "monthly");
   }, [planGroup]);
 
   return {
diff --git a/frontend/src/proprietary/components/shared/stripeCheckout/hooks/useLicensePolling.ts b/frontend/src/proprietary/components/shared/stripeCheckout/hooks/useLicensePolling.ts
index d9f23b6689..7ee42d7d1a 100644
--- a/frontend/src/proprietary/components/shared/stripeCheckout/hooks/useLicensePolling.ts
+++ b/frontend/src/proprietary/components/shared/stripeCheckout/hooks/useLicensePolling.ts
@@ -1,6 +1,6 @@
-import { useCallback } from 'react';
-import { pollLicenseKeyWithBackoff, activateLicenseKey } from '@app/utils/licenseCheckoutUtils';
-import { PollingStatus } from '@app/components/shared/stripeCheckout/types/checkout';
+import { useCallback } from "react";
+import { pollLicenseKeyWithBackoff, activateLicenseKey } from "@app/utils/licenseCheckoutUtils";
+import { PollingStatus } from "@app/components/shared/stripeCheckout/types/checkout";
 
 /**
  * License key polling and activation logic hook
@@ -9,33 +9,36 @@ export const useLicensePolling = (
   isMountedRef: React.RefObject<boolean>,
   setPollingStatus: React.Dispatch<React.SetStateAction<PollingStatus>>,
   setLicenseKey: React.Dispatch<React.SetStateAction<string | null>>,
-  onLicenseActivated?: (licenseInfo: {licenseType: string; enabled: boolean; maxUsers: number; hasKey: boolean}) => void
+  onLicenseActivated?: (licenseInfo: { licenseType: string; enabled: boolean; maxUsers: number; hasKey: boolean }) => void,
 ) => {
-  const pollForLicenseKey = useCallback(async (installId: string) => {
-    // Use shared polling utility
-    const result = await pollLicenseKeyWithBackoff(installId, {
-      isMounted: () => isMountedRef.current ?? false,
-      onStatusChange: setPollingStatus,
-    });
-
-    if (result.success && result.licenseKey) {
-      setLicenseKey(result.licenseKey);
-
-      // Activate the license key
-      const activation = await activateLicenseKey(result.licenseKey, {
+  const pollForLicenseKey = useCallback(
+    async (installId: string) => {
+      // Use shared polling utility
+      const result = await pollLicenseKeyWithBackoff(installId, {
         isMounted: () => isMountedRef.current ?? false,
-        onActivated: onLicenseActivated,
+        onStatusChange: setPollingStatus,
       });
 
-      if (!activation.success) {
-        console.error('Failed to activate license key:', activation.error);
+      if (result.success && result.licenseKey) {
+        setLicenseKey(result.licenseKey);
+
+        // Activate the license key
+        const activation = await activateLicenseKey(result.licenseKey, {
+          isMounted: () => isMountedRef.current ?? false,
+          onActivated: onLicenseActivated,
+        });
+
+        if (!activation.success) {
+          console.error("Failed to activate license key:", activation.error);
+        }
+      } else if (result.timedOut) {
+        console.warn("License key polling timed out");
+      } else if (result.error) {
+        console.error("License key polling failed:", result.error);
       }
-    } else if (result.timedOut) {
-      console.warn('License key polling timed out');
-    } else if (result.error) {
-      console.error('License key polling failed:', result.error);
-    }
-  }, [isMountedRef, setPollingStatus, setLicenseKey, onLicenseActivated]);
+    },
+    [isMountedRef, setPollingStatus, setLicenseKey, onLicenseActivated],
+  );
 
   return { pollForLicenseKey };
 };
diff --git a/frontend/src/proprietary/components/shared/stripeCheckout/index.ts b/frontend/src/proprietary/components/shared/stripeCheckout/index.ts
index bb53480b5e..fb7de4d9a1 100644
--- a/frontend/src/proprietary/components/shared/stripeCheckout/index.ts
+++ b/frontend/src/proprietary/components/shared/stripeCheckout/index.ts
@@ -1,8 +1,8 @@
-export { default as StripeCheckout } from '@app/components/shared/stripeCheckout/StripeCheckout';
+export { default as StripeCheckout } from "@app/components/shared/stripeCheckout/StripeCheckout";
 export type {
   StripeCheckoutProps,
   CheckoutStage,
   CheckoutState,
   PollingStatus,
-  SavingsCalculation
-} from '@app/components/shared/stripeCheckout/types/checkout';
+  SavingsCalculation,
+} from "@app/components/shared/stripeCheckout/types/checkout";
diff --git a/frontend/src/proprietary/components/shared/stripeCheckout/stages/EmailStage.tsx b/frontend/src/proprietary/components/shared/stripeCheckout/stages/EmailStage.tsx
index c8ff4e4159..8deeb0be41 100644
--- a/frontend/src/proprietary/components/shared/stripeCheckout/stages/EmailStage.tsx
+++ b/frontend/src/proprietary/components/shared/stripeCheckout/stages/EmailStage.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import { Stack, Text, TextInput, Button } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
+import React from "react";
+import { Stack, Text, TextInput, Button } from "@mantine/core";
+import { useTranslation } from "react-i18next";
 
 interface EmailStageProps {
   emailInput: string;
@@ -9,41 +9,32 @@ interface EmailStageProps {
   onSubmit: () => void;
 }
 
-export const EmailStage: React.FC<EmailStageProps> = ({
-  emailInput,
-  setEmailInput,
-  emailError,
-  onSubmit,
-}) => {
+export const EmailStage: React.FC<EmailStageProps> = ({ emailInput, setEmailInput, emailError, onSubmit }) => {
   const { t } = useTranslation();
 
   return (
-    <Stack gap="lg" style={{ maxWidth: '500px', margin: '0 auto', padding: '2rem 0' }}>
+    <Stack gap="lg" style={{ maxWidth: "500px", margin: "0 auto", padding: "2rem 0" }}>
       <Text size="sm" c="dimmed">
-        {t('payment.emailStage.description', "We'll use this to send your license key and receipts.")}
+        {t("payment.emailStage.description", "We'll use this to send your license key and receipts.")}
       </Text>
 
       <TextInput
-        label={t('payment.emailStage.emailLabel', 'Email Address')}
-        placeholder={t('payment.emailStage.emailPlaceholder', 'your@email.com')}
+        label={t("payment.emailStage.emailLabel", "Email Address")}
+        placeholder={t("payment.emailStage.emailPlaceholder", "your@email.com")}
         value={emailInput}
         onChange={(e) => setEmailInput(e.currentTarget.value)}
         error={emailError}
         size="lg"
         required
         onKeyDown={(e) => {
-          if (e.key === 'Enter') {
+          if (e.key === "Enter") {
             onSubmit();
           }
         }}
       />
 
-      <Button
-        size="lg"
-        onClick={onSubmit}
-        disabled={!emailInput.trim()}
-      >
-        {t('payment.emailStage.continue', 'Continue')}
+      <Button size="lg" onClick={onSubmit} disabled={!emailInput.trim()}>
+        {t("payment.emailStage.continue", "Continue")}
       </Button>
     </Stack>
   );
diff --git a/frontend/src/proprietary/components/shared/stripeCheckout/stages/ErrorStage.tsx b/frontend/src/proprietary/components/shared/stripeCheckout/stages/ErrorStage.tsx
index 934e75d77b..3881ab25fa 100644
--- a/frontend/src/proprietary/components/shared/stripeCheckout/stages/ErrorStage.tsx
+++ b/frontend/src/proprietary/components/shared/stripeCheckout/stages/ErrorStage.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
-import { Alert, Stack, Text, Button } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
+import React from "react";
+import { Alert, Stack, Text, Button } from "@mantine/core";
+import { useTranslation } from "react-i18next";
 
 interface ErrorStageProps {
   error: string;
@@ -11,11 +11,11 @@ export const ErrorStage: React.FC<ErrorStageProps> = ({ error, onClose }) => {
   const { t } = useTranslation();
 
   return (
-    <Alert color="red" title={t('payment.error', 'Payment Error')}>
+    <Alert color="red" title={t("payment.error", "Payment Error")}>
       <Stack gap="md">
         <Text size="sm">{error}</Text>
         <Button variant="outline" onClick={onClose}>
-          {t('common.close', 'Close')}
+          {t("common.close", "Close")}
         </Button>
       </Stack>
     </Alert>
diff --git a/frontend/src/proprietary/components/shared/stripeCheckout/stages/PaymentStage.tsx b/frontend/src/proprietary/components/shared/stripeCheckout/stages/PaymentStage.tsx
index 84664f873f..168ba436bb 100644
--- a/frontend/src/proprietary/components/shared/stripeCheckout/stages/PaymentStage.tsx
+++ b/frontend/src/proprietary/components/shared/stripeCheckout/stages/PaymentStage.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
-import { Stack, Text, Loader } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { loadStripe } from '@stripe/stripe-js';
-import { EmbeddedCheckoutProvider, EmbeddedCheckout } from '@stripe/react-stripe-js';
-import { PlanTier } from '@app/services/licenseService';
+import React from "react";
+import { Stack, Text, Loader } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { loadStripe } from "@stripe/stripe-js";
+import { EmbeddedCheckoutProvider, EmbeddedCheckout } from "@stripe/react-stripe-js";
+import { PlanTier } from "@app/services/licenseService";
 
 // Load Stripe once
 const STRIPE_KEY = import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY;
@@ -15,20 +15,16 @@ interface PaymentStageProps {
   onPaymentComplete: () => void;
 }
 
-export const PaymentStage: React.FC<PaymentStageProps> = ({
-  clientSecret,
-  selectedPlan,
-  onPaymentComplete,
-}) => {
+export const PaymentStage: React.FC<PaymentStageProps> = ({ clientSecret, selectedPlan, onPaymentComplete }) => {
   const { t } = useTranslation();
 
   // Show loading while creating checkout session
   if (!clientSecret || !selectedPlan) {
     return (
-      <Stack align="center" justify="center" style={{ padding: '2rem 0' }}>
+      <Stack align="center" justify="center" style={{ padding: "2rem 0" }}>
         <Loader size="lg" />
         <Text size="sm" c="dimmed" mt="md">
-          {t('payment.preparing', 'Preparing your checkout...')}
+          {t("payment.preparing", "Preparing your checkout...")}
         </Text>
       </Stack>
     );
@@ -38,10 +34,10 @@ export const PaymentStage: React.FC<PaymentStageProps> = ({
     // This should only happen if embedded mode was attempted without key
     // Hosted checkout should have redirected before reaching this component
     return (
-      <Stack align="center" gap="md" style={{ padding: '2rem 0' }}>
+      <Stack align="center" gap="md" style={{ padding: "2rem 0" }}>
         <Loader size="lg" />
         <Text size="sm" c="dimmed" mt="md">
-          {t('payment.redirecting', 'Redirecting to secure checkout...')}
+          {t("payment.redirecting", "Redirecting to secure checkout...")}
         </Text>
       </Stack>
     );
@@ -49,7 +45,6 @@ export const PaymentStage: React.FC<PaymentStageProps> = ({
 
   return (
     <Stack gap="md">
-
       {/* Stripe Embedded Checkout */}
       <EmbeddedCheckoutProvider
         key={clientSecret}
diff --git a/frontend/src/proprietary/components/shared/stripeCheckout/stages/PlanSelectionStage.tsx b/frontend/src/proprietary/components/shared/stripeCheckout/stages/PlanSelectionStage.tsx
index f7a6fdb34b..ce04556552 100644
--- a/frontend/src/proprietary/components/shared/stripeCheckout/stages/PlanSelectionStage.tsx
+++ b/frontend/src/proprietary/components/shared/stripeCheckout/stages/PlanSelectionStage.tsx
@@ -1,47 +1,39 @@
-import React from 'react';
-import { Stack, Button, Text, Grid, Paper, Alert, Divider } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { PlanTierGroup } from '@app/services/licenseService';
-import { SavingsCalculation } from '@app/components/shared/stripeCheckout/types/checkout';
-import { PricingBadge } from '@app/components/shared/stripeCheckout/components/PricingBadge';
-import { PriceDisplay } from '@app/components/shared/stripeCheckout/components/PriceDisplay';
-import { formatPrice, calculateMonthlyEquivalent, calculateTotalWithSeats } from '@app/components/shared/stripeCheckout/utils/pricingUtils';
-import { getClickablePaperStyle } from '@app/components/shared/stripeCheckout/utils/cardStyles';
+import React from "react";
+import { Stack, Button, Text, Grid, Paper, Alert, Divider } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { PlanTierGroup } from "@app/services/licenseService";
+import { SavingsCalculation } from "@app/components/shared/stripeCheckout/types/checkout";
+import { PricingBadge } from "@app/components/shared/stripeCheckout/components/PricingBadge";
+import { PriceDisplay } from "@app/components/shared/stripeCheckout/components/PriceDisplay";
+import {
+  formatPrice,
+  calculateMonthlyEquivalent,
+  calculateTotalWithSeats,
+} from "@app/components/shared/stripeCheckout/utils/pricingUtils";
+import { getClickablePaperStyle } from "@app/components/shared/stripeCheckout/utils/cardStyles";
 
 interface PlanSelectionStageProps {
   planGroup: PlanTierGroup;
   minimumSeats: number;
   savings: SavingsCalculation | null;
-  onSelectPlan: (period: 'monthly' | 'yearly') => void;
+  onSelectPlan: (period: "monthly" | "yearly") => void;
 }
 
-export const PlanSelectionStage: React.FC<PlanSelectionStageProps> = ({
-  planGroup,
-  minimumSeats,
-  savings,
-  onSelectPlan,
-}) => {
+export const PlanSelectionStage: React.FC<PlanSelectionStageProps> = ({ planGroup, minimumSeats, savings, onSelectPlan }) => {
   const { t } = useTranslation();
-  const isEnterprise = planGroup.tier === 'enterprise';
+  const isEnterprise = planGroup.tier === "enterprise";
   const seatCount = minimumSeats || 1;
 
   return (
-    <Stack gap="lg" style={{ padding: '1rem 2rem' }}>
-
-        <Grid gutter="xl" style={{ marginTop: '1rem' }}>
+    <Stack gap="lg" style={{ padding: "1rem 2rem" }}>
+      <Grid gutter="xl" style={{ marginTop: "1rem" }}>
         {/* Monthly Option */}
         {planGroup.monthly && (
           <Grid.Col span={6}>
-            <Paper
-              withBorder
-              p="xl"
-              radius="md"
-              style={getClickablePaperStyle()}
-              onClick={() => onSelectPlan('monthly')}
-            >
-              <Stack gap="md" style={{ height: '100%' }} justify="space-between">
+            <Paper withBorder p="xl" radius="md" style={getClickablePaperStyle()} onClick={() => onSelectPlan("monthly")}>
+              <Stack gap="md" style={{ height: "100%" }} justify="space-between">
                 <Text size="lg" fw={600}>
-                  {t('payment.monthly', 'Monthly')}
+                  {t("payment.monthly", "Monthly")}
                 </Text>
 
                 <Divider />
@@ -61,15 +53,15 @@ export const PlanSelectionStage: React.FC<PlanSelectionStageProps> = ({
                   <PriceDisplay
                     mode="simple"
                     price={planGroup.monthly?.price || 0}
-                    currency={planGroup.monthly?.currency || '£'}
-                    period={t('payment.perMonth', '/month')}
+                    currency={planGroup.monthly?.currency || "£"}
+                    period={t("payment.perMonth", "/month")}
                     size="2.5rem"
                   />
                 )}
 
-                <div style={{ marginTop: 'auto', paddingTop: '1rem' }}>
+                <div style={{ marginTop: "auto", paddingTop: "1rem" }}>
                   <Button variant="light" fullWidth size="lg">
-                    {t('payment.planStage.selectMonthly', 'Select Monthly')}
+                    {t("payment.planStage.selectMonthly", "Select Monthly")}
                   </Button>
                 </div>
               </Stack>
@@ -85,18 +77,18 @@ export const PlanSelectionStage: React.FC<PlanSelectionStageProps> = ({
               p="xl"
               radius="md"
               style={getClickablePaperStyle(!!savings)}
-              onClick={() => onSelectPlan('yearly')}
+              onClick={() => onSelectPlan("yearly")}
             >
               {savings && (
                 <PricingBadge
                   type="savings"
-                  label={t('payment.planStage.savePercent', 'Save {{percent}}%', { percent: savings.percent })}
+                  label={t("payment.planStage.savePercent", "Save {{percent}}%", { percent: savings.percent })}
                 />
               )}
 
-              <Stack gap="md" style={{ height: '100%' }} justify="space-between">
+              <Stack gap="md" style={{ height: "100%" }} justify="space-between">
                 <Text size="lg" fw={600}>
-                  {t('payment.yearly', 'Yearly')}
+                  {t("payment.yearly", "Yearly")}
                 </Text>
 
                 <Divider />
@@ -108,7 +100,7 @@ export const PlanSelectionStage: React.FC<PlanSelectionStageProps> = ({
                       basePrice={planGroup.yearly.price}
                       seatPrice={planGroup.yearly.seatPrice}
                       totalPrice={calculateMonthlyEquivalent(
-                        calculateTotalWithSeats(planGroup.yearly.price, planGroup.yearly.seatPrice, seatCount)
+                        calculateTotalWithSeats(planGroup.yearly.price, planGroup.yearly.seatPrice, seatCount),
                       )}
                       currency={planGroup.yearly.currency}
                       period="year"
@@ -116,9 +108,11 @@ export const PlanSelectionStage: React.FC<PlanSelectionStageProps> = ({
                       size="sm"
                     />
                     <Text size="sm" c="dimmed">
-                      {t('payment.planStage.billedYearly', 'Billed yearly at {{currency}}{{amount}}', {
+                      {t("payment.planStage.billedYearly", "Billed yearly at {{currency}}{{amount}}", {
                         currency: planGroup.yearly.currency,
-                        amount: calculateTotalWithSeats(planGroup.yearly.price, planGroup.yearly.seatPrice, seatCount).toFixed(2)
+                        amount: calculateTotalWithSeats(planGroup.yearly.price, planGroup.yearly.seatPrice, seatCount).toFixed(
+                          2,
+                        ),
                       })}
                     </Text>
                   </Stack>
@@ -127,14 +121,14 @@ export const PlanSelectionStage: React.FC<PlanSelectionStageProps> = ({
                     <PriceDisplay
                       mode="simple"
                       price={calculateMonthlyEquivalent(planGroup.yearly?.price || 0)}
-                      currency={planGroup.yearly?.currency || '£'}
-                      period={t('payment.perMonth', '/month')}
+                      currency={planGroup.yearly?.currency || "£"}
+                      period={t("payment.perMonth", "/month")}
                       size="2.5rem"
                     />
                     <Text size="sm" c="dimmed" mt="xs">
-                      {t('payment.planStage.billedYearly', 'Billed yearly at {{currency}}{{amount}}', {
+                      {t("payment.planStage.billedYearly", "Billed yearly at {{currency}}{{amount}}", {
                         currency: planGroup.yearly?.currency,
-                        amount: planGroup.yearly?.price.toFixed(2)
+                        amount: planGroup.yearly?.price.toFixed(2),
                       })}
                     </Text>
                   </Stack>
@@ -143,16 +137,16 @@ export const PlanSelectionStage: React.FC<PlanSelectionStageProps> = ({
                 {savings && (
                   <Alert color="green" variant="light" p="sm">
                     <Text size="sm" fw={600}>
-                      {t('payment.planStage.savingsAmount', 'You save {{amount}}', {
-                        amount: formatPrice(savings.amount, savings.currency)
+                      {t("payment.planStage.savingsAmount", "You save {{amount}}", {
+                        amount: formatPrice(savings.amount, savings.currency),
                       })}
                     </Text>
                   </Alert>
                 )}
 
-                <div style={{ marginTop: 'auto', paddingTop: '1rem' }}>
+                <div style={{ marginTop: "auto", paddingTop: "1rem" }}>
                   <Button variant="filled" fullWidth size="lg">
-                    {t('payment.planStage.selectYearly', 'Select Yearly')}
+                    {t("payment.planStage.selectYearly", "Select Yearly")}
                   </Button>
                 </div>
               </Stack>
diff --git a/frontend/src/proprietary/components/shared/stripeCheckout/stages/SuccessStage.tsx b/frontend/src/proprietary/components/shared/stripeCheckout/stages/SuccessStage.tsx
index 0d75db3c65..09e0ee48bb 100644
--- a/frontend/src/proprietary/components/shared/stripeCheckout/stages/SuccessStage.tsx
+++ b/frontend/src/proprietary/components/shared/stripeCheckout/stages/SuccessStage.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
-import { Alert, Stack, Text, Paper, Code, Button, Group, Loader } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { PollingStatus } from '@app/components/shared/stripeCheckout/types/checkout';
+import React from "react";
+import { Alert, Stack, Text, Paper, Code, Button, Group, Loader } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { PollingStatus } from "@app/components/shared/stripeCheckout/types/checkout";
 
 interface SuccessStageProps {
   pollingStatus: PollingStatus;
@@ -10,90 +10,76 @@ interface SuccessStageProps {
   onClose: () => void;
 }
 
-export const SuccessStage: React.FC<SuccessStageProps> = ({
-  pollingStatus,
-  currentLicenseKey,
-  licenseKey,
-  onClose,
-}) => {
+export const SuccessStage: React.FC<SuccessStageProps> = ({ pollingStatus, currentLicenseKey, licenseKey, onClose }) => {
   const { t } = useTranslation();
 
   return (
-    <Alert color="green" title={t('payment.success', 'Payment Successful!')}>
+    <Alert color="green" title={t("payment.success", "Payment Successful!")}>
       <Stack gap="md">
-        <Text size="sm">
-          {t(
-            'payment.successMessage',
-            'Your subscription has been activated successfully.'
-          )}
-        </Text>
+        <Text size="sm">{t("payment.successMessage", "Your subscription has been activated successfully.")}</Text>
 
         {/* License Key Polling Status */}
-        {pollingStatus === 'polling' && (
+        {pollingStatus === "polling" && (
           <Group gap="xs">
             <Loader size="sm" />
             <Text size="sm" c="dimmed">
               {currentLicenseKey
-                ? t('payment.syncingLicense', 'Syncing your upgraded license...')
-                : t('payment.generatingLicense', 'Generating your license key...')}
+                ? t("payment.syncingLicense", "Syncing your upgraded license...")
+                : t("payment.generatingLicense", "Generating your license key...")}
             </Text>
           </Group>
         )}
 
-        {pollingStatus === 'ready' && !currentLicenseKey && licenseKey && (
+        {pollingStatus === "ready" && !currentLicenseKey && licenseKey && (
           <Paper withBorder p="md" radius="md" bg="gray.1">
             <Stack gap="sm">
               <Text size="sm" fw={600}>
-                {t('payment.licenseKey', 'Your License Key')}
+                {t("payment.licenseKey", "Your License Key")}
               </Text>
               <Code block>{licenseKey}</Code>
-              <Button
-                variant="light"
-                size="sm"
-                onClick={() => navigator.clipboard.writeText(licenseKey)}
-              >
-                {t('common.copy', 'Copy to Clipboard')}
+              <Button variant="light" size="sm" onClick={() => navigator.clipboard.writeText(licenseKey)}>
+                {t("common.copy", "Copy to Clipboard")}
               </Button>
               <Text size="xs" c="dimmed">
                 {t(
-                  'payment.licenseInstructions',
-                  'This has been added to your installation. You will receive a copy in your email as well.'
+                  "payment.licenseInstructions",
+                  "This has been added to your installation. You will receive a copy in your email as well.",
                 )}
               </Text>
             </Stack>
           </Paper>
         )}
 
-        {pollingStatus === 'ready' && currentLicenseKey && (
-          <Alert color="green" title={t('payment.upgradeComplete', 'Upgrade Complete')}>
+        {pollingStatus === "ready" && currentLicenseKey && (
+          <Alert color="green" title={t("payment.upgradeComplete", "Upgrade Complete")}>
             <Text size="sm">
               {t(
-                'payment.upgradeCompleteMessage',
-                'Your subscription has been upgraded successfully. Your existing license key has been updated.'
+                "payment.upgradeCompleteMessage",
+                "Your subscription has been upgraded successfully. Your existing license key has been updated.",
               )}
             </Text>
           </Alert>
         )}
 
-        {pollingStatus === 'timeout' && (
-          <Alert color="yellow" title={t('payment.licenseDelayed', 'License Key Processing')}>
+        {pollingStatus === "timeout" && (
+          <Alert color="yellow" title={t("payment.licenseDelayed", "License Key Processing")}>
             <Text size="sm">
               {t(
-                'payment.licenseDelayedMessage',
-                'Your license key is being generated. Please check your email shortly or contact support.'
+                "payment.licenseDelayedMessage",
+                "Your license key is being generated. Please check your email shortly or contact support.",
               )}
             </Text>
           </Alert>
         )}
 
-        {pollingStatus === 'ready' && (
+        {pollingStatus === "ready" && (
           <Text size="xs" c="dimmed">
-            {t('payment.canCloseWindow', 'You can now close this window.')}
+            {t("payment.canCloseWindow", "You can now close this window.")}
           </Text>
         )}
 
         <Button onClick={onClose} mt="md">
-          {t('common.close', 'Close')}
+          {t("common.close", "Close")}
         </Button>
       </Stack>
     </Alert>
diff --git a/frontend/src/proprietary/components/shared/stripeCheckout/types/checkout.ts b/frontend/src/proprietary/components/shared/stripeCheckout/types/checkout.ts
index 94d94e24ea..075dcebd22 100644
--- a/frontend/src/proprietary/components/shared/stripeCheckout/types/checkout.ts
+++ b/frontend/src/proprietary/components/shared/stripeCheckout/types/checkout.ts
@@ -1,4 +1,4 @@
-import { PlanTierGroup } from '@app/services/licenseService';
+import { PlanTierGroup } from "@app/services/licenseService";
 
 export interface StripeCheckoutProps {
   opened: boolean;
@@ -7,14 +7,14 @@ export interface StripeCheckoutProps {
   minimumSeats?: number;
   onSuccess?: (sessionId: string) => void;
   onError?: (error: string) => void;
-  onLicenseActivated?: (licenseInfo: {licenseType: string; enabled: boolean; maxUsers: number; hasKey: boolean}) => void;
+  onLicenseActivated?: (licenseInfo: { licenseType: string; enabled: boolean; maxUsers: number; hasKey: boolean }) => void;
   hostedCheckoutSuccess?: {
     isUpgrade: boolean;
     licenseKey?: string;
   } | null;
 }
 
-export type CheckoutStage = 'email' | 'plan-selection' | 'payment' | 'success' | 'error';
+export type CheckoutStage = "email" | "plan-selection" | "payment" | "success" | "error";
 
 export type CheckoutState = {
   currentStage: CheckoutStage;
@@ -25,7 +25,7 @@ export type CheckoutState = {
   loading?: boolean;
 };
 
-export type PollingStatus = 'idle' | 'polling' | 'ready' | 'timeout';
+export type PollingStatus = "idle" | "polling" | "ready" | "timeout";
 
 export interface SavingsCalculation {
   amount: number;
diff --git a/frontend/src/proprietary/components/shared/stripeCheckout/utils/cardStyles.ts b/frontend/src/proprietary/components/shared/stripeCheckout/utils/cardStyles.ts
index ac49614364..42313e4667 100644
--- a/frontend/src/proprietary/components/shared/stripeCheckout/utils/cardStyles.ts
+++ b/frontend/src/proprietary/components/shared/stripeCheckout/utils/cardStyles.ts
@@ -1,10 +1,10 @@
-import { CSSProperties } from 'react';
+import { CSSProperties } from "react";
 
 /**
  * Shared styling utilities for plan cards
  */
 
-export const CARD_MIN_HEIGHT = '400px';
+export const CARD_MIN_HEIGHT = "400px";
 export const PRICE_FONT_WEIGHT = 600;
 
 /**
@@ -12,8 +12,8 @@ export const PRICE_FONT_WEIGHT = 600;
  */
 export function getCardBorderStyle(isHighlighted: boolean): CSSProperties {
   return {
-    borderColor: isHighlighted ? 'var(--mantine-color-green-6)' : undefined,
-    borderWidth: isHighlighted ? '2px' : undefined,
+    borderColor: isHighlighted ? "var(--mantine-color-green-6)" : undefined,
+    borderWidth: isHighlighted ? "2px" : undefined,
   };
 }
 
@@ -22,9 +22,9 @@ export function getCardBorderStyle(isHighlighted: boolean): CSSProperties {
  */
 export function getBaseCardStyle(isHighlighted: boolean = false): CSSProperties {
   return {
-    position: 'relative',
-    display: 'flex',
-    flexDirection: 'column',
+    position: "relative",
+    display: "flex",
+    flexDirection: "column",
     minHeight: CARD_MIN_HEIGHT,
     ...getCardBorderStyle(isHighlighted),
   };
@@ -35,10 +35,10 @@ export function getBaseCardStyle(isHighlighted: boolean = false): CSSProperties
  */
 export function getClickablePaperStyle(isHighlighted: boolean = false): CSSProperties {
   return {
-    cursor: 'pointer',
-    transition: 'all 0.2s',
-    height: '100%',
-    position: 'relative',
+    cursor: "pointer",
+    transition: "all 0.2s",
+    height: "100%",
+    position: "relative",
     ...getCardBorderStyle(isHighlighted),
   };
 }
diff --git a/frontend/src/proprietary/components/shared/stripeCheckout/utils/checkoutUtils.ts b/frontend/src/proprietary/components/shared/stripeCheckout/utils/checkoutUtils.ts
index 3be3fa5556..63a3e00166 100644
--- a/frontend/src/proprietary/components/shared/stripeCheckout/utils/checkoutUtils.ts
+++ b/frontend/src/proprietary/components/shared/stripeCheckout/utils/checkoutUtils.ts
@@ -1,5 +1,5 @@
-import { TFunction } from 'i18next';
-import { CheckoutStage } from '@app/components/shared/stripeCheckout/types/checkout';
+import { TFunction } from "i18next";
+import { CheckoutStage } from "@app/components/shared/stripeCheckout/types/checkout";
 
 /**
  * Validate email address format
@@ -9,32 +9,28 @@ export const validateEmail = (email: string): { valid: boolean; error: string }
   if (!emailRegex.test(email)) {
     return {
       valid: false,
-      error: 'Please enter a valid email address'
+      error: "Please enter a valid email address",
     };
   }
-  return { valid: true, error: '' };
+  return { valid: true, error: "" };
 };
 
 /**
  * Get dynamic modal title based on current stage
  */
-export const getModalTitle = (
-  stage: CheckoutStage,
-  planName: string,
-  t: TFunction
-): string => {
+export const getModalTitle = (stage: CheckoutStage, planName: string, t: TFunction): string => {
   switch (stage) {
-    case 'email':
-      return t('payment.emailStage.modalTitle', 'Get Started - {{planName}}', { planName });
-    case 'plan-selection':
-      return t('payment.planStage.modalTitle', 'Select Billing Period - {{planName}}', { planName });
-    case 'payment':
-      return t('payment.paymentStage.modalTitle', 'Complete Payment - {{planName}}', { planName });
-    case 'success':
-      return t('payment.success', 'Payment Successful!');
-    case 'error':
-      return t('payment.error', 'Payment Error');
+    case "email":
+      return t("payment.emailStage.modalTitle", "Get Started - {{planName}}", { planName });
+    case "plan-selection":
+      return t("payment.planStage.modalTitle", "Select Billing Period - {{planName}}", { planName });
+    case "payment":
+      return t("payment.paymentStage.modalTitle", "Complete Payment - {{planName}}", { planName });
+    case "success":
+      return t("payment.success", "Payment Successful!");
+    case "error":
+      return t("payment.error", "Payment Error");
     default:
-      return t('payment.upgradeTitle', 'Upgrade to {{planName}}', { planName });
+      return t("payment.upgradeTitle", "Upgrade to {{planName}}", { planName });
   }
 };
diff --git a/frontend/src/proprietary/components/shared/stripeCheckout/utils/pricingUtils.ts b/frontend/src/proprietary/components/shared/stripeCheckout/utils/pricingUtils.ts
index 9fc5c8416f..adb2f0f429 100644
--- a/frontend/src/proprietary/components/shared/stripeCheckout/utils/pricingUtils.ts
+++ b/frontend/src/proprietary/components/shared/stripeCheckout/utils/pricingUtils.ts
@@ -18,11 +18,7 @@ export function calculateMonthlyEquivalent(yearlyPrice: number): number {
 /**
  * Calculate total price including seats
  */
-export function calculateTotalWithSeats(
-  basePrice: number,
-  seatPrice: number | undefined,
-  seatCount: number
-): number {
+export function calculateTotalWithSeats(basePrice: number, seatPrice: number | undefined, seatCount: number): number {
   if (seatPrice === undefined) return basePrice;
   return basePrice + seatPrice * seatCount;
 }
@@ -40,14 +36,14 @@ export function formatPrice(amount: number, currency: string, decimals: number =
  */
 export function calculateDisplayPricing(
   monthly?: { price: number; seatPrice?: number; currency: string },
-  yearly?: { price: number; seatPrice?: number; currency: string }
+  yearly?: { price: number; seatPrice?: number; currency: string },
 ): PriceCalculation {
   // Default to monthly if no yearly exists
   if (!yearly) {
     return {
       displayPrice: monthly?.price || 0,
       displaySeatPrice: monthly?.seatPrice,
-      displayCurrency: monthly?.currency || '£',
+      displayCurrency: monthly?.currency || "£",
     };
   }
 
diff --git a/frontend/src/proprietary/components/shared/stripeCheckout/utils/savingsCalculator.ts b/frontend/src/proprietary/components/shared/stripeCheckout/utils/savingsCalculator.ts
index 3a0b4d6c88..1b6b57bf41 100644
--- a/frontend/src/proprietary/components/shared/stripeCheckout/utils/savingsCalculator.ts
+++ b/frontend/src/proprietary/components/shared/stripeCheckout/utils/savingsCalculator.ts
@@ -1,17 +1,14 @@
-import { PlanTierGroup } from '@app/services/licenseService';
-import { SavingsCalculation } from '@app/components/shared/stripeCheckout/types/checkout';
+import { PlanTierGroup } from "@app/services/licenseService";
+import { SavingsCalculation } from "@app/components/shared/stripeCheckout/types/checkout";
 
 /**
  * Calculate savings for yearly vs monthly plans
  * Returns null if both monthly and yearly plans are not available
  */
-export const calculateSavings = (
-  planGroup: PlanTierGroup,
-  minimumSeats: number
-): SavingsCalculation | null => {
+export const calculateSavings = (planGroup: PlanTierGroup, minimumSeats: number): SavingsCalculation | null => {
   if (!planGroup.yearly || !planGroup.monthly) return null;
 
-  const isEnterprise = planGroup.tier === 'enterprise';
+  const isEnterprise = planGroup.tier === "enterprise";
   const seatCount = minimumSeats || 1;
 
   let monthlyAnnual: number;
@@ -19,8 +16,8 @@ export const calculateSavings = (
 
   if (isEnterprise && planGroup.monthly.seatPrice && planGroup.yearly.seatPrice) {
     // Enterprise: (base + seats) * 12 vs (base + seats) yearly
-    monthlyAnnual = (planGroup.monthly.price + (planGroup.monthly.seatPrice * seatCount)) * 12;
-    yearlyTotal = planGroup.yearly.price + (planGroup.yearly.seatPrice * seatCount);
+    monthlyAnnual = (planGroup.monthly.price + planGroup.monthly.seatPrice * seatCount) * 12;
+    yearlyTotal = planGroup.yearly.price + planGroup.yearly.seatPrice * seatCount;
   } else {
     // Server: price * 12 vs yearly price
     monthlyAnnual = planGroup.monthly.price * 12;
@@ -33,6 +30,6 @@ export const calculateSavings = (
   return {
     amount: savings,
     percent: savingsPercent,
-    currency: planGroup.yearly.currency
+    currency: planGroup.yearly.currency,
   };
 };
diff --git a/frontend/src/proprietary/components/workflow/ParticipantView.tsx b/frontend/src/proprietary/components/workflow/ParticipantView.tsx
index 9c011d68fd..607ab5f6e7 100644
--- a/frontend/src/proprietary/components/workflow/ParticipantView.tsx
+++ b/frontend/src/proprietary/components/workflow/ParticipantView.tsx
@@ -1,23 +1,11 @@
-import React, { useState, useEffect, useRef } from 'react';
-import { useTranslation } from 'react-i18next';
-import {
-  Stack,
-  Card,
-  Text,
-  Badge,
-  Group,
-  Button,
-  Loader,
-  Alert,
-  TextInput,
-  FileInput,
-  Select,
-} from '@mantine/core';
-import { useParticipantSession } from '@app/hooks/workflow/useParticipantSession';
-import InfoIcon from '@mui/icons-material/Info';
-import DownloadIcon from '@mui/icons-material/Download';
-import CheckCircleIcon from '@mui/icons-material/CheckCircle';
-import CancelIcon from '@mui/icons-material/Cancel';
+import React, { useState, useEffect, useRef } from "react";
+import { useTranslation } from "react-i18next";
+import { Stack, Card, Text, Badge, Group, Button, Loader, Alert, TextInput, FileInput, Select } from "@mantine/core";
+import { useParticipantSession } from "@app/hooks/workflow/useParticipantSession";
+import InfoIcon from "@mui/icons-material/Info";
+import DownloadIcon from "@mui/icons-material/Download";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import CancelIcon from "@mui/icons-material/Cancel";
 
 interface ParticipantViewProps {
   token: string;
@@ -25,63 +13,68 @@ interface ParticipantViewProps {
 
 const ParticipantView: React.FC<ParticipantViewProps> = ({ token }) => {
   const { t } = useTranslation();
-  const { session, participant, loading, error, submitSignature, decline, downloadDocument } =
-    useParticipantSession(token);
+  const { session, participant, loading, error, submitSignature, decline, downloadDocument } = useParticipantSession(token);
 
-  const [certType, setCertType] = useState<string>('P12');
-  const [password, setPassword] = useState<string>('');
+  const [certType, setCertType] = useState<string>("P12");
+  const [password, setPassword] = useState<string>("");
   const [certFile, setCertFile] = useState<File | null>(null);
-  const [location, setLocation] = useState<string>('');
-  const [reason, setReason] = useState<string>('Document Signing');
+  const [location, setLocation] = useState<string>("");
+  const [reason, setReason] = useState<string>("Document Signing");
   const [showSignature, _setShowSignature] = useState<boolean>(true);
   const [pageNumber, setPageNumber] = useState<number>(1);
-  const [declineReason, _setDeclineReason] = useState<string>('');
+  const [declineReason, _setDeclineReason] = useState<string>("");
   const [isSubmitting, setIsSubmitting] = useState<boolean>(false);
-  const [notification, setNotification] = useState<{ type: 'success' | 'error'; message: string } | null>(null);
+  const [notification, setNotification] = useState<{ type: "success" | "error"; message: string } | null>(null);
 
   type CertValidationState =
-    | { status: 'idle' }
-    | { status: 'validating' }
-    | { status: 'valid'; notAfter: string | null; subjectName: string | null }
-    | { status: 'error'; message: string };
+    | { status: "idle" }
+    | { status: "validating" }
+    | { status: "valid"; notAfter: string | null; subjectName: string | null }
+    | { status: "error"; message: string };
 
-  const [certValidation, setCertValidation] = useState<CertValidationState>({ status: 'idle' });
+  const [certValidation, setCertValidation] = useState<CertValidationState>({ status: "idle" });
   const validationTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
 
   useEffect(() => {
-    if (certType === 'SERVER' || !certFile) {
-      setCertValidation({ status: 'idle' });
+    if (certType === "SERVER" || !certFile) {
+      setCertValidation({ status: "idle" });
       return;
     }
 
     if (validationTimerRef.current) clearTimeout(validationTimerRef.current);
-    setCertValidation({ status: 'validating' });
+    setCertValidation({ status: "validating" });
 
     validationTimerRef.current = setTimeout(async () => {
       try {
         const formData = new FormData();
-        formData.append('participantToken', token);
-        formData.append('certType', certType);
-        formData.append('password', password);
-        if (certType === 'JKS') {
-          formData.append('jksFile', certFile);
+        formData.append("participantToken", token);
+        formData.append("certType", certType);
+        formData.append("password", password);
+        if (certType === "JKS") {
+          formData.append("jksFile", certFile);
         } else {
-          formData.append('p12File', certFile);
+          formData.append("p12File", certFile);
         }
 
-        const res = await fetch('/api/v1/workflow/participant/validate-certificate', {
-          method: 'POST',
+        const res = await fetch("/api/v1/workflow/participant/validate-certificate", {
+          method: "POST",
           body: formData,
         });
         const data = await res.json();
 
         if (data.valid) {
-          setCertValidation({ status: 'valid', notAfter: data.notAfter, subjectName: data.subjectName });
+          setCertValidation({ status: "valid", notAfter: data.notAfter, subjectName: data.subjectName });
         } else {
-          setCertValidation({ status: 'error', message: data.error ?? t('certSign.collab.participant.certInvalidFallback', 'Invalid certificate') });
+          setCertValidation({
+            status: "error",
+            message: data.error ?? t("certSign.collab.participant.certInvalidFallback", "Invalid certificate"),
+          });
         }
       } catch {
-        setCertValidation({ status: 'error', message: t('certSign.collab.participant.certNetworkError', 'Could not validate certificate') });
+        setCertValidation({
+          status: "error",
+          message: t("certSign.collab.participant.certNetworkError", "Could not validate certificate"),
+        });
       }
     }, 600);
 
@@ -91,8 +84,8 @@ const ParticipantView: React.FC<ParticipantViewProps> = ({ token }) => {
   }, [certFile, password, certType, token]);
 
   const handleSubmitSignature = async () => {
-    if (!certFile && certType !== 'SERVER') {
-      setNotification({ type: 'error', message: 'Please select a certificate file' });
+    if (!certFile && certType !== "SERVER") {
+      setNotification({ type: "error", message: "Please select a certificate file" });
       return;
     }
 
@@ -103,30 +96,33 @@ const ParticipantView: React.FC<ParticipantViewProps> = ({ token }) => {
         participantToken: token,
         certType,
         password,
-        p12File: certType === 'P12' ? certFile || undefined : undefined,
-        jksFile: certType === 'JKS' ? certFile || undefined : undefined,
+        p12File: certType === "P12" ? certFile || undefined : undefined,
+        jksFile: certType === "JKS" ? certFile || undefined : undefined,
         showSignature,
         pageNumber,
         location,
         reason,
         showLogo: true,
       });
-      setNotification({ type: 'success', message: 'Signature submitted successfully!' });
+      setNotification({ type: "success", message: "Signature submitted successfully!" });
     } catch (err: unknown) {
-      setNotification({ type: 'error', message: `Failed to submit signature: ${err instanceof Error ? err.message : String(err)}` });
+      setNotification({
+        type: "error",
+        message: `Failed to submit signature: ${err instanceof Error ? err.message : String(err)}`,
+      });
     } finally {
       setIsSubmitting(false);
     }
   };
 
   const handleDecline = async () => {
-    if (window.confirm('Are you sure you want to decline signing this document?')) {
+    if (window.confirm("Are you sure you want to decline signing this document?")) {
       setNotification(null);
       try {
-        await decline(token, declineReason || 'Declined by participant');
-        setNotification({ type: 'success', message: 'You have declined this signing request.' });
+        await decline(token, declineReason || "Declined by participant");
+        setNotification({ type: "success", message: "You have declined this signing request." });
       } catch (err: unknown) {
-        setNotification({ type: 'error', message: `Failed to decline: ${err instanceof Error ? err.message : String(err)}` });
+        setNotification({ type: "error", message: `Failed to decline: ${err instanceof Error ? err.message : String(err)}` });
       }
     }
   };
@@ -158,29 +154,29 @@ const ParticipantView: React.FC<ParticipantViewProps> = ({ token }) => {
 
   const getStatusBadge = (status: string) => {
     switch (status) {
-      case 'SIGNED':
+      case "SIGNED":
         return <Badge color="green">Signed</Badge>;
-      case 'DECLINED':
+      case "DECLINED":
         return <Badge color="red">Declined</Badge>;
-      case 'VIEWED':
+      case "VIEWED":
         return <Badge color="blue">Viewed</Badge>;
-      case 'NOTIFIED':
+      case "NOTIFIED":
         return <Badge color="yellow">Notified</Badge>;
-      case 'PENDING':
+      case "PENDING":
         return <Badge color="gray">Pending</Badge>;
       default:
         return <Badge>{status}</Badge>;
     }
   };
 
-  const canSign = !participant.hasCompleted && !participant.isExpired && session.status === 'IN_PROGRESS';
+  const canSign = !participant.hasCompleted && !participant.isExpired && session.status === "IN_PROGRESS";
 
   return (
     <Stack gap="md">
       {notification && (
         <Alert
-          icon={notification.type === 'success' ? <CheckCircleIcon fontSize="small" /> : <InfoIcon fontSize="small" />}
-          color={notification.type === 'success' ? 'green' : 'red'}
+          icon={notification.type === "success" ? <CheckCircleIcon fontSize="small" /> : <InfoIcon fontSize="small" />}
+          color={notification.type === "success" ? "green" : "red"}
           withCloseButton
           onClose={() => setNotification(null)}
         >
@@ -236,17 +232,17 @@ const ParticipantView: React.FC<ParticipantViewProps> = ({ token }) => {
             <Select
               label="Certificate Type"
               value={certType}
-              onChange={(value) => setCertType(value || 'P12')}
+              onChange={(value) => setCertType(value || "P12")}
               data={[
-                { value: 'P12', label: 'P12/PKCS12 Certificate' },
-                { value: 'JKS', label: 'JKS Keystore' },
-                { value: 'SERVER', label: 'Server Certificate (if available)' },
+                { value: "P12", label: "P12/PKCS12 Certificate" },
+                { value: "JKS", label: "JKS Keystore" },
+                { value: "SERVER", label: "Server Certificate (if available)" },
               ]}
               size="sm"
               data-testid="cert-type-select"
             />
 
-            {certType !== 'SERVER' && (
+            {certType !== "SERVER" && (
               <>
                 <FileInput
                   label="Certificate File"
@@ -268,25 +264,25 @@ const ParticipantView: React.FC<ParticipantViewProps> = ({ token }) => {
                 />
 
                 {/* Certificate validation feedback */}
-                {certValidation.status === 'validating' && (
+                {certValidation.status === "validating" && (
                   <Text size="sm" c="dimmed" data-testid="cert-validation-feedback">
-                    {t('certSign.collab.participant.certValidating', 'Validating certificate...')}
+                    {t("certSign.collab.participant.certValidating", "Validating certificate...")}
                   </Text>
                 )}
-                {certValidation.status === 'valid' && (
+                {certValidation.status === "valid" && (
                   <Text size="sm" c="green" data-testid="cert-validation-feedback">
-                    {t('certSign.collab.participant.certValid', '✓ Certificate valid')}
+                    {t("certSign.collab.participant.certValid", "✓ Certificate valid")}
                     {certValidation.notAfter
-                      ? t('certSign.collab.participant.certValidUntil', ' until {{date}}', {
+                      ? t("certSign.collab.participant.certValidUntil", " until {{date}}", {
                           date: new Date(certValidation.notAfter).toLocaleDateString(),
                         })
-                      : ''}
-                    {certValidation.subjectName ? ` · ${certValidation.subjectName}` : ''}
+                      : ""}
+                    {certValidation.subjectName ? ` · ${certValidation.subjectName}` : ""}
                   </Text>
                 )}
-                {certValidation.status === 'error' && (
+                {certValidation.status === "error" && (
                   <Text size="sm" c="red" data-testid="cert-validation-feedback">
-                    {t('certSign.collab.participant.certInvalid', '✗ {{error}}', { error: certValidation.message })}
+                    {t("certSign.collab.participant.certInvalid", "✗ {{error}}", { error: certValidation.message })}
                   </Text>
                 )}
               </>
@@ -322,7 +318,7 @@ const ParticipantView: React.FC<ParticipantViewProps> = ({ token }) => {
                 leftSection={<CheckCircleIcon fontSize="small" />}
                 onClick={handleSubmitSignature}
                 loading={isSubmitting}
-                disabled={isSubmitting || certValidation.status === 'validating'}
+                disabled={isSubmitting || certValidation.status === "validating"}
                 color="green"
                 data-testid="submit-signature-button"
               >
@@ -345,7 +341,7 @@ const ParticipantView: React.FC<ParticipantViewProps> = ({ token }) => {
 
       {participant.hasCompleted && (
         <Alert icon={<CheckCircleIcon fontSize="small" />} color="green">
-          You have {participant.status === 'SIGNED' ? 'signed' : 'declined'} this document.
+          You have {participant.status === "SIGNED" ? "signed" : "declined"} this document.
         </Alert>
       )}
 
diff --git a/frontend/src/proprietary/constants/planConstants.ts b/frontend/src/proprietary/constants/planConstants.ts
index 9c997f17d4..6a03a72b7e 100644
--- a/frontend/src/proprietary/constants/planConstants.ts
+++ b/frontend/src/proprietary/constants/planConstants.ts
@@ -1,4 +1,4 @@
-import type { PlanFeature } from '@app/types/license';
+import type { PlanFeature } from "@app/types/license";
 
 /**
  * Shared plan feature definitions for Stirling PDF Self-Hosted
@@ -7,98 +7,94 @@ import type { PlanFeature } from '@app/types/license';
 
 export const PLAN_FEATURES = {
   FREE: [
-    { name: 'Self-hosted deployment', included: true },
-    { name: 'All PDF operations', included: true },
-    { name: 'Secure Login Support', included: true },
-    { name: 'Community support', included: true },
-    { name: 'Regular updates', included: true },
-    { name: 'up to 5 users', included: true },
-    { name: 'Unlimited users', included: false },
-    { name: 'Google drive integration', included: false },
-    { name: 'External Database', included: false },
-    { name: 'Editing text in pdfs', included: false },
-    { name: 'Users limited to seats', included: false },
-    { name: 'SSO', included: false },
-    { name: 'SAML', included: false },
-    { name: 'Auditing', included: false },
-    { name: 'Usage tracking', included: false },
-    { name: 'Prometheus Support', included: false },
-    { name: 'Custom PDF metadata', included: false },
+    { name: "Self-hosted deployment", included: true },
+    { name: "All PDF operations", included: true },
+    { name: "Secure Login Support", included: true },
+    { name: "Community support", included: true },
+    { name: "Regular updates", included: true },
+    { name: "up to 5 users", included: true },
+    { name: "Unlimited users", included: false },
+    { name: "Google drive integration", included: false },
+    { name: "External Database", included: false },
+    { name: "Editing text in pdfs", included: false },
+    { name: "Users limited to seats", included: false },
+    { name: "SSO", included: false },
+    { name: "SAML", included: false },
+    { name: "Auditing", included: false },
+    { name: "Usage tracking", included: false },
+    { name: "Prometheus Support", included: false },
+    { name: "Custom PDF metadata", included: false },
   ] as PlanFeature[],
 
   SERVER: [
-    { name: 'Self-hosted deployment', included: true },
-    { name: 'All PDF operations', included: true },
-    { name: 'Secure Login Support', included: true },
-    { name: 'Community support', included: true },
-    { name: 'Regular updates', included: true },
-    { name: 'Up to 5 users', included: false },
-    { name: 'Unlimited users', included: true },
-    { name: 'Google drive integration', included: true },
-    { name: 'External Database', included: true },
-    { name: 'Editing text in pdfs', included: true },
-    { name: 'Users limited to seats', included: false },
-    { name: 'SSO', included: true },
-    { name: 'SAML', included: false },
-    { name: 'Auditing', included: false },
-    { name: 'Usage tracking', included: false },
-    { name: 'Prometheus Support', included: false },
-    { name: 'Custom PDF metadata', included: false },
+    { name: "Self-hosted deployment", included: true },
+    { name: "All PDF operations", included: true },
+    { name: "Secure Login Support", included: true },
+    { name: "Community support", included: true },
+    { name: "Regular updates", included: true },
+    { name: "Up to 5 users", included: false },
+    { name: "Unlimited users", included: true },
+    { name: "Google drive integration", included: true },
+    { name: "External Database", included: true },
+    { name: "Editing text in pdfs", included: true },
+    { name: "Users limited to seats", included: false },
+    { name: "SSO", included: true },
+    { name: "SAML", included: false },
+    { name: "Auditing", included: false },
+    { name: "Usage tracking", included: false },
+    { name: "Prometheus Support", included: false },
+    { name: "Custom PDF metadata", included: false },
   ] as PlanFeature[],
 
   ENTERPRISE: [
-    { name: 'Self-hosted deployment', included: true },
-    { name: 'All PDF operations', included: true },
-    { name: 'Secure Login Support', included: true },
-    { name: 'Community support', included: true },
-    { name: 'Regular updates', included: true },
-    { name: 'up to 5 users', included: false },
-    { name: 'Unlimited users', included: false },
-    { name: 'Google drive integration', included: true },
-    { name: 'External Database', included: true },
-    { name: 'Editing text in pdfs', included: true },
-    { name: 'Users limited to seats', included: true },
-    { name: 'SSO', included: true },
-    { name: 'SAML', included: true },
-    { name: 'Auditing', included: true },
-    { name: 'Usage tracking', included: true },
-    { name: 'Prometheus Support', included: true },
-    { name: 'Custom PDF metadata', included: true },
+    { name: "Self-hosted deployment", included: true },
+    { name: "All PDF operations", included: true },
+    { name: "Secure Login Support", included: true },
+    { name: "Community support", included: true },
+    { name: "Regular updates", included: true },
+    { name: "up to 5 users", included: false },
+    { name: "Unlimited users", included: false },
+    { name: "Google drive integration", included: true },
+    { name: "External Database", included: true },
+    { name: "Editing text in pdfs", included: true },
+    { name: "Users limited to seats", included: true },
+    { name: "SSO", included: true },
+    { name: "SAML", included: true },
+    { name: "Auditing", included: true },
+    { name: "Usage tracking", included: true },
+    { name: "Prometheus Support", included: true },
+    { name: "Custom PDF metadata", included: true },
   ] as PlanFeature[],
 } as const;
 
 export const PLAN_HIGHLIGHTS = {
-  FREE: [
-    'Up to 5 users',
-    'Self-hosted',
-    'All basic features'
-  ],
+  FREE: ["Up to 5 users", "Self-hosted", "All basic features"],
   SERVER_MONTHLY: [
-    'Self-hosted on your infrastructure',
-    'Unlimited users',
-    'Advanced integrations',
-    'SSO (OAuth2/OIDC)',
-    'Editing text in PDFs',
-    'Cancel anytime'
+    "Self-hosted on your infrastructure",
+    "Unlimited users",
+    "Advanced integrations",
+    "SSO (OAuth2/OIDC)",
+    "Editing text in PDFs",
+    "Cancel anytime",
   ],
   SERVER_YEARLY: [
-    'Self-hosted on your infrastructure',
-    'Unlimited users',
-    'Advanced integrations',
-    'SSO (OAuth2/OIDC)',
-    'Editing text in PDFs',
-    'Save with annual billing'
+    "Self-hosted on your infrastructure",
+    "Unlimited users",
+    "Advanced integrations",
+    "SSO (OAuth2/OIDC)",
+    "Editing text in PDFs",
+    "Save with annual billing",
   ],
   ENTERPRISE_MONTHLY: [
-    'Enterprise features (SAML, Auditing)',
-    'Usage tracking & Prometheus',
-    'Custom PDF metadata',
-    'Per-seat licensing'
+    "Enterprise features (SAML, Auditing)",
+    "Usage tracking & Prometheus",
+    "Custom PDF metadata",
+    "Per-seat licensing",
   ],
   ENTERPRISE_YEARLY: [
-    'Enterprise features (SAML, Auditing)',
-    'Usage tracking & Prometheus',
-    'Custom PDF metadata',
-    'Save with annual billing'
-  ]
+    "Enterprise features (SAML, Auditing)",
+    "Usage tracking & Prometheus",
+    "Custom PDF metadata",
+    "Save with annual billing",
+  ],
 } as const;
diff --git a/frontend/src/proprietary/constants/staticStripeLinks.ts b/frontend/src/proprietary/constants/staticStripeLinks.ts
index 249a64c9e7..7de9090f81 100644
--- a/frontend/src/proprietary/constants/staticStripeLinks.ts
+++ b/frontend/src/proprietary/constants/staticStripeLinks.ts
@@ -20,14 +20,14 @@ export interface StaticStripeLinks {
 // PRODCUTION LINKS FOR LIVE SERVER
 export const STATIC_STRIPE_LINKS: StaticStripeLinks = {
   server: {
-    monthly: 'https://buy.stripe.com/fZu4gB8Nv6ysfAj0ts8Zq03',
-    yearly: 'https://buy.stripe.com/9B68wR6Fn0a40Fpcca8Zq02',
+    monthly: "https://buy.stripe.com/fZu4gB8Nv6ysfAj0ts8Zq03",
+    yearly: "https://buy.stripe.com/9B68wR6Fn0a40Fpcca8Zq02",
   },
   enterprise: {
-    monthly: '',
-    yearly: '',
+    monthly: "",
+    yearly: "",
   },
-  billingPortal: 'https://billing.stripe.com/p/login/5kA6pT6Xa7z59HO4gg',
+  billingPortal: "https://billing.stripe.com/p/login/5kA6pT6Xa7z59HO4gg",
 };
 
 // LINKS FOR TEST SERVER:
diff --git a/frontend/src/proprietary/contexts/CheckoutContext.tsx b/frontend/src/proprietary/contexts/CheckoutContext.tsx
index d6c6db86ca..d3fb84d595 100644
--- a/frontend/src/proprietary/contexts/CheckoutContext.tsx
+++ b/frontend/src/proprietary/contexts/CheckoutContext.tsx
@@ -1,26 +1,23 @@
-import React, { createContext, useContext, useState, useCallback, useEffect, ReactNode } from 'react';
-import { useTranslation } from 'react-i18next';
-import licenseService, { PlanTierGroup, LicenseInfo, mapLicenseToTier, PlanTier } from '@app/services/licenseService';
-import { StripeCheckout } from '@app/components/shared/stripeCheckout';
-import { userManagementService } from '@app/services/userManagementService';
-import { alert } from '@app/components/toast';
-import { pollLicenseKeyWithBackoff, activateLicenseKey, resyncExistingLicense } from '@app/utils/licenseCheckoutUtils';
-import { useLicense } from '@app/contexts/LicenseContext';
-import { isSupabaseConfigured } from '@app/services/supabaseClient';
-import { getPreferredCurrency } from '@app/utils/currencyDetection';
+import React, { createContext, useContext, useState, useCallback, useEffect, ReactNode } from "react";
+import { useTranslation } from "react-i18next";
+import licenseService, { PlanTierGroup, LicenseInfo, mapLicenseToTier, PlanTier } from "@app/services/licenseService";
+import { StripeCheckout } from "@app/components/shared/stripeCheckout";
+import { userManagementService } from "@app/services/userManagementService";
+import { alert } from "@app/components/toast";
+import { pollLicenseKeyWithBackoff, activateLicenseKey, resyncExistingLicense } from "@app/utils/licenseCheckoutUtils";
+import { useLicense } from "@app/contexts/LicenseContext";
+import { isSupabaseConfigured } from "@app/services/supabaseClient";
+import { getPreferredCurrency } from "@app/utils/currencyDetection";
 
 export interface CheckoutOptions {
-  minimumSeats?: number;      // Override calculated seats for enterprise
-  currency?: string;          // Optional currency override (auto-detected from locale)
-  onSuccess?: (sessionId: string) => void;  // Callback after successful payment
-  onError?: (error: string) => void;  // Callback on error
+  minimumSeats?: number; // Override calculated seats for enterprise
+  currency?: string; // Optional currency override (auto-detected from locale)
+  onSuccess?: (sessionId: string) => void; // Callback after successful payment
+  onError?: (error: string) => void; // Callback on error
 }
 
 interface CheckoutContextValue {
-  openCheckout: (
-    tier: 'server' | 'enterprise',
-    options?: CheckoutOptions
-  ) => Promise<void>;
+  openCheckout: (tier: "server" | "enterprise", options?: CheckoutOptions) => Promise<void>;
   closeCheckout: () => void;
   isOpen: boolean;
   isLoading: boolean;
@@ -33,10 +30,7 @@ interface CheckoutProviderProps {
   defaultCurrency?: string;
 }
 
-export const CheckoutProvider: React.FC<CheckoutProviderProps> = ({
-  children,
-  defaultCurrency
-}) => {
+export const CheckoutProvider: React.FC<CheckoutProviderProps> = ({ children, defaultCurrency }) => {
   const { t, i18n } = useTranslation();
   const { refetchLicense } = useLicense();
   const [isOpen, setIsOpen] = useState(false);
@@ -59,22 +53,25 @@ export const CheckoutProvider: React.FC<CheckoutProviderProps> = ({
   const [plansLoading, setPlansLoading] = useState(false);
 
   // Lazy fetch plans only when needed
-  const fetchPlansIfNeeded = useCallback(async (currency: string) => {
-    // Don't fetch if already loading
-    if (plansLoading) return;
+  const fetchPlansIfNeeded = useCallback(
+    async (currency: string) => {
+      // Don't fetch if already loading
+      if (plansLoading) return;
 
-    try {
-      setPlansLoading(true);
-      const response = await licenseService.getPlans(currency);
-      setPlans(response.plans);
-      setPlansLoaded(true);
-    } catch (error) {
-      console.error('Failed to fetch plans:', error);
-      // Don't block - let components handle the error
-    } finally {
-      setPlansLoading(false);
-    }
-  }, [plansLoading]);
+      try {
+        setPlansLoading(true);
+        const response = await licenseService.getPlans(currency);
+        setPlans(response.plans);
+        setPlansLoaded(true);
+      } catch (error) {
+        console.error("Failed to fetch plans:", error);
+        // Don't block - let components handle the error
+      } finally {
+        setPlansLoading(false);
+      }
+    },
+    [plansLoading],
+  );
 
   const refetchPlans = useCallback(() => {
     setPlansLoaded(false); // Force refetch
@@ -85,33 +82,33 @@ export const CheckoutProvider: React.FC<CheckoutProviderProps> = ({
   useEffect(() => {
     const handleCheckoutReturn = async () => {
       const urlParams = new URLSearchParams(window.location.search);
-      const paymentStatus = urlParams.get('payment_status');
-      const sessionId = urlParams.get('session_id');
+      const paymentStatus = urlParams.get("payment_status");
+      const sessionId = urlParams.get("session_id");
 
-      if (paymentStatus === 'success' && sessionId) {
-        console.log('Payment successful via hosted checkout:', sessionId);
+      if (paymentStatus === "success" && sessionId) {
+        console.log("Payment successful via hosted checkout:", sessionId);
 
         // Clear URL parameters
-        window.history.replaceState({}, '', window.location.pathname);
+        window.history.replaceState({}, "", window.location.pathname);
 
         // Fetch current license info to determine upgrade vs new
         let licenseInfo: LicenseInfo | null = null;
         try {
           licenseInfo = await licenseService.getLicenseInfo();
         } catch (err) {
-          console.warn('Could not fetch license info:', err);
+          console.warn("Could not fetch license info:", err);
         }
 
         // Check if this is an upgrade or new subscription
         // Only treat as upgrade if there's a valid PRO/ENTERPRISE license (not NORMAL/free tier)
-        if (licenseInfo?.licenseType && licenseInfo.licenseType !== 'NORMAL') {
+        if (licenseInfo?.licenseType && licenseInfo.licenseType !== "NORMAL") {
           // UPGRADE: Resync existing license with Keygen
-          console.log('Upgrade detected - resyncing existing license');
+          console.log("Upgrade detected - resyncing existing license");
 
           const activation = await resyncExistingLicense();
 
           if (activation.success) {
-            console.log('License synced successfully, refreshing license context');
+            console.log("License synced successfully, refreshing license context");
 
             // Ensure plans are loaded before using them
             if (!plansLoaded) {
@@ -123,9 +120,9 @@ export const CheckoutProvider: React.FC<CheckoutProviderProps> = ({
             await refetchPlans();
 
             // Determine tier from license type
-            const tier = activation.licenseType === 'ENTERPRISE' ? 'enterprise' : 'server';
+            const tier = activation.licenseType === "ENTERPRISE" ? "enterprise" : "server";
             const planGroups = licenseService.groupPlansByTier(plans);
-            const planGroup = planGroups.find(pg => pg.tier === tier);
+            const planGroup = planGroups.find((pg) => pg.tier === tier);
 
             if (planGroup) {
               // Reopen modal to show success
@@ -135,24 +132,24 @@ export const CheckoutProvider: React.FC<CheckoutProviderProps> = ({
             } else {
               // Fallback to toast if plan group not found
               alert({
-                alertType: 'success',
-                title: t('payment.upgradeSuccess'),
+                alertType: "success",
+                title: t("payment.upgradeSuccess"),
               });
             }
           } else {
-            console.error('Failed to sync license after upgrade:', activation.error);
+            console.error("Failed to sync license after upgrade:", activation.error);
             alert({
-              alertType: 'error',
-              title: t('payment.syncError'),
+              alertType: "error",
+              title: t("payment.syncError"),
             });
           }
         } else {
           // NEW SUBSCRIPTION: Poll for license key
-          console.log('New subscription - polling for license key');
+          console.log("New subscription - polling for license key");
 
           try {
             const installationId = await licenseService.getInstallationId();
-            console.log('Polling for license key with installation ID:', installationId);
+            console.log("Polling for license key with installation ID:", installationId);
 
             // Use shared polling utility
             const result = await pollLicenseKeyWithBackoff(installationId);
@@ -174,62 +171,62 @@ export const CheckoutProvider: React.FC<CheckoutProviderProps> = ({
                 await refetchPlans();
 
                 // Determine tier from license type
-                const tier = activation.licenseType === 'ENTERPRISE' ? 'enterprise' : 'server';
+                const tier = activation.licenseType === "ENTERPRISE" ? "enterprise" : "server";
                 const planGroups = licenseService.groupPlansByTier(plans);
-                const planGroup = planGroups.find(pg => pg.tier === tier);
+                const planGroup = planGroups.find((pg) => pg.tier === tier);
 
                 if (planGroup) {
                   // Reopen modal to show success with license key
                   setSelectedPlanGroup(planGroup);
                   setHostedCheckoutSuccess({
                     isUpgrade: false,
-                    licenseKey: result.licenseKey
+                    licenseKey: result.licenseKey,
                   });
                   setIsOpen(true);
                 } else {
                   // Fallback to toast if plan group not found
                   alert({
-                    alertType: 'success',
-                    title: t('payment.licenseActivated'),
+                    alertType: "success",
+                    title: t("payment.licenseActivated"),
                   });
                 }
               } else {
-                console.error('Failed to save license key:', activation.error);
+                console.error("Failed to save license key:", activation.error);
                 alert({
-                  alertType: 'error',
-                  title: t('payment.licenseSaveError'),
+                  alertType: "error",
+                  title: t("payment.licenseSaveError"),
                 });
               }
             } else if (result.timedOut) {
-              console.warn('License key polling timed out');
+              console.warn("License key polling timed out");
               alert({
-                alertType: 'warning',
-                title: t('payment.licenseDelayed'),
+                alertType: "warning",
+                title: t("payment.licenseDelayed"),
               });
             } else {
-              console.error('License key polling failed:', result.error);
+              console.error("License key polling failed:", result.error);
               alert({
-                alertType: 'error',
-                title: t('payment.licensePollingError'),
+                alertType: "error",
+                title: t("payment.licensePollingError"),
               });
             }
           } catch (error) {
-            console.error('Failed to poll for license key:', error);
+            console.error("Failed to poll for license key:", error);
             alert({
-              alertType: 'error',
-              title: t('payment.licenseRetrievalError'),
+              alertType: "error",
+              title: t("payment.licenseRetrievalError"),
             });
           }
         }
-      } else if (paymentStatus === 'canceled') {
-        console.log('Payment canceled by user');
+      } else if (paymentStatus === "canceled") {
+        console.log("Payment canceled by user");
 
         // Clear URL parameters
-        window.history.replaceState({}, '', window.location.pathname);
+        window.history.replaceState({}, "", window.location.pathname);
 
         alert({
-          alertType: 'warning',
-          title: t('payment.paymentCanceled'),
+          alertType: "warning",
+          title: t("payment.paymentCanceled"),
         });
       }
     };
@@ -238,13 +235,13 @@ export const CheckoutProvider: React.FC<CheckoutProviderProps> = ({
   }, [t, refetchPlans, refetchLicense, plans, fetchPlansIfNeeded, plansLoaded, currentCurrency]);
 
   const openCheckout = useCallback(
-    async (tier: 'server' | 'enterprise', options: CheckoutOptions = {}) => {
+    async (tier: "server" | "enterprise", options: CheckoutOptions = {}) => {
       try {
         setIsLoading(true);
 
         // Check if Supabase is configured
         if (!isSupabaseConfigured) {
-          throw new Error('Checkout is not available. Supabase is not configured.');
+          throw new Error("Checkout is not available. Supabase is not configured.");
         }
 
         // Update currency if provided
@@ -265,27 +262,27 @@ export const CheckoutProvider: React.FC<CheckoutProviderProps> = ({
         try {
           const [licenseData, userData] = await Promise.all([
             licenseService.getLicenseInfo(),
-            userManagementService.getUsers()
+            userManagementService.getUsers(),
           ]);
 
           licenseInfo = licenseData;
           totalUsers = userData.totalUsers || 0;
         } catch (err) {
-          console.warn('Could not fetch license/user info, proceeding with defaults:', err);
+          console.warn("Could not fetch license/user info, proceeding with defaults:", err);
         }
 
         // Calculate minimum seats for enterprise upgrades
         let calculatedMinSeats = options.minimumSeats || 1;
 
-        if (tier === 'enterprise' && !options.minimumSeats) {
+        if (tier === "enterprise" && !options.minimumSeats) {
           const currentTier = mapLicenseToTier(licenseInfo);
 
-          if (currentTier === 'server' || currentTier === 'free') {
+          if (currentTier === "server" || currentTier === "free") {
             // Upgrading from Server (unlimited) to Enterprise (per-seat)
             // Use current total user count as minimum
             calculatedMinSeats = Math.max(totalUsers, 1);
             console.log(`Setting minimum seats from server user count: ${calculatedMinSeats}`);
-          } else if (currentTier === 'enterprise') {
+          } else if (currentTier === "enterprise") {
             // Upgrading within Enterprise (e.g., monthly to yearly)
             // Use current licensed seat count as minimum
             calculatedMinSeats = Math.max(licenseInfo?.maxUsers || 1, 1);
@@ -295,7 +292,7 @@ export const CheckoutProvider: React.FC<CheckoutProviderProps> = ({
 
         // Find the plan group for the requested tier
         const planGroups = licenseService.groupPlansByTier(plans);
-        const planGroup = planGroups.find(pg => pg.tier === tier);
+        const planGroup = planGroups.find((pg) => pg.tier === tier);
 
         if (!planGroup) {
           throw new Error(`No ${tier} plan available`);
@@ -306,16 +303,15 @@ export const CheckoutProvider: React.FC<CheckoutProviderProps> = ({
         setMinimumSeats(calculatedMinSeats);
         setSelectedPlanGroup(planGroup);
         setIsOpen(true);
-
       } catch (err) {
-        const errorMessage = err instanceof Error ? err.message : 'Failed to open checkout';
-        console.error('Error opening checkout:', errorMessage);
+        const errorMessage = err instanceof Error ? err.message : "Failed to open checkout";
+        console.error("Error opening checkout:", errorMessage);
         options.onError?.(errorMessage);
       } finally {
         setIsLoading(false);
       }
     },
-    [currentCurrency, plans, plansLoaded, fetchPlansIfNeeded]
+    [currentCurrency, plans, plansLoaded, fetchPlansIfNeeded],
   );
 
   const closeCheckout = useCallback(() => {
@@ -331,30 +327,28 @@ export const CheckoutProvider: React.FC<CheckoutProviderProps> = ({
 
   const handlePaymentSuccess = useCallback(
     (sessionId: string) => {
-      console.log('Payment successful, session:', sessionId);
+      console.log("Payment successful, session:", sessionId);
       currentOptions.onSuccess?.(sessionId);
       // Don't close modal - let user view license key and close manually
     },
-    [currentOptions]
+    [currentOptions],
   );
 
   const handlePaymentError = useCallback(
     (error: string) => {
-      console.error('Payment error:', error);
+      console.error("Payment error:", error);
       currentOptions.onError?.(error);
     },
-    [currentOptions]
+    [currentOptions],
   );
 
-  const handleLicenseActivated = useCallback((licenseInfo: {
-    licenseType: string;
-    enabled: boolean;
-    maxUsers: number;
-    hasKey: boolean;
-  }) => {
-    console.log('License activated:', licenseInfo);
-    // Could expose this via context if needed
-  }, []);
+  const handleLicenseActivated = useCallback(
+    (licenseInfo: { licenseType: string; enabled: boolean; maxUsers: number; hasKey: boolean }) => {
+      console.log("License activated:", licenseInfo);
+      // Could expose this via context if needed
+    },
+    [],
+  );
 
   const contextValue: CheckoutContextValue = {
     openCheckout,
@@ -387,7 +381,7 @@ export const CheckoutProvider: React.FC<CheckoutProviderProps> = ({
 export const useCheckout = (): CheckoutContextValue => {
   const context = useContext(CheckoutContext);
   if (!context) {
-    throw new Error('useCheckout must be used within CheckoutProvider');
+    throw new Error("useCheckout must be used within CheckoutProvider");
   }
   return context;
 };
diff --git a/frontend/src/proprietary/contexts/LicenseContext.tsx b/frontend/src/proprietary/contexts/LicenseContext.tsx
index 5c0f7947e2..df1f5945fd 100644
--- a/frontend/src/proprietary/contexts/LicenseContext.tsx
+++ b/frontend/src/proprietary/contexts/LicenseContext.tsx
@@ -1,8 +1,8 @@
-import React, { createContext, useContext, useState, useCallback, useEffect, useMemo, useRef, ReactNode } from 'react';
-import { useLocation } from 'react-router-dom';
-import licenseService, { LicenseInfo } from '@app/services/licenseService';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
-import { getSimulatedLicenseInfo } from '@app/testing/serverExperienceSimulations';
+import React, { createContext, useContext, useState, useCallback, useEffect, useMemo, useRef, ReactNode } from "react";
+import { useLocation } from "react-router-dom";
+import licenseService, { LicenseInfo } from "@app/services/licenseService";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
+import { getSimulatedLicenseInfo } from "@app/testing/serverExperienceSimulations";
 
 interface LicenseContextValue {
   licenseInfo: LicenseInfo | null;
@@ -34,17 +34,17 @@ export const LicenseProvider: React.FC<LicenseProviderProps> = ({ children }) =>
     // Wait for config to load if it's not available yet
     let currentConfig = configRef.current;
     if (!currentConfig) {
-      console.log('[LicenseContext] Config not loaded yet, waiting...');
+      console.log("[LicenseContext] Config not loaded yet, waiting...");
       // OPTIMIZATION: Reduced from 5s to 1s - config should load quickly
       const maxWait = 1000;
       const startTime = Date.now();
       while (!configRef.current && Date.now() - startTime < maxWait) {
-        await new Promise(resolve => setTimeout(resolve, 100));
+        await new Promise((resolve) => setTimeout(resolve, 100));
         currentConfig = configRef.current;
       }
 
       if (!currentConfig) {
-        console.error('[LicenseContext] Config failed to load after waiting');
+        console.error("[LicenseContext] Config failed to load after waiting");
         setLoading(false);
         return;
       }
@@ -52,12 +52,12 @@ export const LicenseProvider: React.FC<LicenseProviderProps> = ({ children }) =>
 
     // Only fetch license info if user is an admin
     if (!currentConfig.isAdmin) {
-      console.log('[LicenseContext] User is not an admin, skipping license fetch');
+      console.log("[LicenseContext] User is not an admin, skipping license fetch");
       setLoading(false);
       return;
     }
 
-    console.log('[LicenseContext] Fetching license info');
+    console.log("[LicenseContext] Fetching license info");
 
     try {
       const testInfo = getSimulatedLicenseInfo();
@@ -73,8 +73,8 @@ export const LicenseProvider: React.FC<LicenseProviderProps> = ({ children }) =>
       const info = await licenseService.getLicenseInfo();
       setLicenseInfo(info);
     } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : 'Failed to fetch license info';
-      console.error('Error fetching license info:', errorMessage);
+      const errorMessage = err instanceof Error ? err.message : "Failed to fetch license info";
+      console.error("Error fetching license info:", errorMessage);
       setError(errorMessage);
       setLicenseInfo(null);
     } finally {
@@ -88,13 +88,13 @@ export const LicenseProvider: React.FC<LicenseProviderProps> = ({ children }) =>
     // during SAML/OAuth callback processing. License isn't needed until user
     // is authenticated and navigates to main app.
     const isAuthRoute =
-      location.pathname === '/login' ||
-      location.pathname === '/signup' ||
-      location.pathname === '/auth/callback' ||
-      location.pathname.startsWith('/invite/');
+      location.pathname === "/login" ||
+      location.pathname === "/signup" ||
+      location.pathname === "/auth/callback" ||
+      location.pathname.startsWith("/invite/");
 
     if (isAuthRoute) {
-      console.log('[LicenseContext] On auth route, skipping license fetch');
+      console.log("[LicenseContext] On auth route, skipping license fetch");
       setLoading(false);
       return;
     }
@@ -111,14 +111,10 @@ export const LicenseProvider: React.FC<LicenseProviderProps> = ({ children }) =>
       error,
       refetchLicense,
     }),
-    [licenseInfo, loading, error, refetchLicense]
+    [licenseInfo, loading, error, refetchLicense],
   );
 
-  return (
-    <LicenseContext.Provider value={contextValue}>
-      {children}
-    </LicenseContext.Provider>
-  );
+  return <LicenseContext.Provider value={contextValue}>{children}</LicenseContext.Provider>;
 };
 
 export const useOptionalLicense = (): LicenseContextValue | undefined => {
@@ -128,7 +124,7 @@ export const useOptionalLicense = (): LicenseContextValue | undefined => {
 export const useLicense = (): LicenseContextValue => {
   const context = useContext(LicenseContext);
   if (!context) {
-    throw new Error('useLicense must be used within LicenseProvider');
+    throw new Error("useLicense must be used within LicenseProvider");
   }
   return context;
 };
diff --git a/frontend/src/proprietary/contexts/ServerExperienceContext.tsx b/frontend/src/proprietary/contexts/ServerExperienceContext.tsx
index fedb276183..601aeb136f 100644
--- a/frontend/src/proprietary/contexts/ServerExperienceContext.tsx
+++ b/frontend/src/proprietary/contexts/ServerExperienceContext.tsx
@@ -1,26 +1,15 @@
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useEffect,
-  useMemo,
-  useState,
-  type ReactNode,
-} from 'react';
-import apiClient from '@app/services/apiClient';
-import { isAxiosError } from 'axios';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
-import { useAuth } from '@app/auth/UseSession';
-import { useLicense } from '@app/contexts/LicenseContext';
-import {
-  getSimulatedAdminUsage,
-  getSimulatedWauResponse,
-} from '@app/testing/serverExperienceSimulations';
+import { createContext, useCallback, useContext, useEffect, useMemo, useState, type ReactNode } from "react";
+import apiClient from "@app/services/apiClient";
+import { isAxiosError } from "axios";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
+import { useAuth } from "@app/auth/UseSession";
+import { useLicense } from "@app/contexts/LicenseContext";
+import { getSimulatedAdminUsage, getSimulatedWauResponse } from "@app/testing/serverExperienceSimulations";
 
-const SELF_REPORTED_ADMIN_KEY = 'stirling-self-reported-admin';
+const SELF_REPORTED_ADMIN_KEY = "stirling-self-reported-admin";
 const FREE_TIER_LIMIT = 5;
 
-type UserCountSource = 'admin' | 'estimate' | 'unknown';
+type UserCountSource = "admin" | "estimate" | "unknown";
 
 interface WeeklyActiveUsersResponse {
   trackingSince: string;
@@ -39,16 +28,16 @@ interface UserCountState {
 }
 
 export type ServerScenarioKey =
-  | 'unknown'
-  | 'licensed'
-  | 'no-login-user-under-limit-no-license'
-  | 'no-login-admin-under-limit-no-license'
-  | 'no-login-user-over-limit-no-license'
-  | 'no-login-admin-over-limit-no-license'
-  | 'login-user-under-limit-no-license'
-  | 'login-admin-under-limit-no-license'
-  | 'login-user-over-limit-no-license'
-  | 'login-admin-over-limit-no-license';
+  | "unknown"
+  | "licensed"
+  | "no-login-user-under-limit-no-license"
+  | "no-login-admin-under-limit-no-license"
+  | "no-login-user-over-limit-no-license"
+  | "no-login-admin-over-limit-no-license"
+  | "login-user-under-limit-no-license"
+  | "login-admin-under-limit-no-license"
+  | "login-user-over-limit-no-license"
+  | "login-admin-over-limit-no-license";
 
 export interface ServerExperienceValue {
   loginEnabled: boolean;
@@ -82,27 +71,27 @@ export interface ServerExperienceValue {
 const ServerExperienceContext = createContext<ServerExperienceValue | undefined>(undefined);
 
 function getStoredSelfReportedAdmin(): boolean {
-  if (typeof window === 'undefined') {
+  if (typeof window === "undefined") {
     return false;
   }
   try {
-    return window.localStorage.getItem(SELF_REPORTED_ADMIN_KEY) === 'true';
+    return window.localStorage.getItem(SELF_REPORTED_ADMIN_KEY) === "true";
   } catch {
     return false;
   }
 }
 
 function getErrorMessage(error: unknown): string {
-  if (typeof error === 'string') {
+  if (typeof error === "string") {
     return error;
   }
-  if (isAxiosError(error) && typeof error.response?.data?.message === 'string') {
+  if (isAxiosError(error) && typeof error.response?.data?.message === "string") {
     return error.response.data.message;
   }
   if (error instanceof Error) {
     return error.message;
   }
-  return 'Unable to load server usage';
+  return "Unable to load server usage";
 }
 
 export function ServerExperienceProvider({ children }: { children: ReactNode }) {
@@ -115,7 +104,7 @@ export function ServerExperienceProvider({ children }: { children: ReactNode })
     totalUsers: null,
     weeklyActiveUsers: null,
     loading: false,
-    source: 'unknown',
+    source: "unknown",
     lastUpdated: null,
     error: null,
   });
@@ -127,12 +116,12 @@ export function ServerExperienceProvider({ children }: { children: ReactNode })
 
   const setSelfReportedAdmin = useCallback((value: boolean) => {
     setSelfReportedAdminState(value);
-    if (typeof window === 'undefined') {
+    if (typeof window === "undefined") {
       return;
     }
     try {
       if (value) {
-        window.localStorage.setItem(SELF_REPORTED_ADMIN_KEY, 'true');
+        window.localStorage.setItem(SELF_REPORTED_ADMIN_KEY, "true");
       } else {
         window.localStorage.removeItem(SELF_REPORTED_ADMIN_KEY);
       }
@@ -142,16 +131,16 @@ export function ServerExperienceProvider({ children }: { children: ReactNode })
   }, []);
 
   useEffect(() => {
-    if (typeof window === 'undefined') {
+    if (typeof window === "undefined") {
       return;
     }
     const handleStorage = (event: StorageEvent) => {
       if (event.key === SELF_REPORTED_ADMIN_KEY) {
-        setSelfReportedAdminState(event.newValue === 'true');
+        setSelfReportedAdminState(event.newValue === "true");
       }
     };
-    window.addEventListener('storage', handleStorage);
-    return () => window.removeEventListener('storage', handleStorage);
+    window.addEventListener("storage", handleStorage);
+    return () => window.removeEventListener("storage", handleStorage);
   }, []);
 
   useEffect(() => {
@@ -190,18 +179,16 @@ export function ServerExperienceProvider({ children }: { children: ReactNode })
         const responseData =
           testResponse ??
           (
-            await apiClient.get<{ totalUsers?: number }>(
-              '/api/v1/proprietary/ui-data/admin-settings',
-              { suppressErrorToast: true },
-            )
+            await apiClient.get<{ totalUsers?: number }>("/api/v1/proprietary/ui-data/admin-settings", {
+              suppressErrorToast: true,
+            })
           ).data;
-        const totalUsers =
-          typeof responseData?.totalUsers === 'number' ? responseData.totalUsers : null;
+        const totalUsers = typeof responseData?.totalUsers === "number" ? responseData.totalUsers : null;
         setUserCountState({
           totalUsers,
           weeklyActiveUsers: null,
           loading: false,
-          source: 'admin',
+          source: "admin",
           lastUpdated: Date.now(),
           error: null,
         });
@@ -213,19 +200,16 @@ export function ServerExperienceProvider({ children }: { children: ReactNode })
         const responseData =
           testResponse ??
           (
-            await apiClient.get<WeeklyActiveUsersResponse>('/api/v1/info/wau', {
+            await apiClient.get<WeeklyActiveUsersResponse>("/api/v1/info/wau", {
               suppressErrorToast: true,
             })
           ).data;
-        const weeklyActiveUsers =
-          typeof responseData?.weeklyActiveUsers === 'number'
-            ? responseData.weeklyActiveUsers
-            : null;
+        const weeklyActiveUsers = typeof responseData?.weeklyActiveUsers === "number" ? responseData.weeklyActiveUsers : null;
         setUserCountState({
           totalUsers: weeklyActiveUsers,
           weeklyActiveUsers,
           loading: false,
-          source: 'estimate',
+          source: "estimate",
           lastUpdated: Date.now(),
           error: null,
         });
@@ -235,7 +219,7 @@ export function ServerExperienceProvider({ children }: { children: ReactNode })
         totalUsers: null,
         weeklyActiveUsers: null,
         loading: false,
-        source: 'unknown',
+        source: "unknown",
         lastUpdated: null,
         error: getErrorMessage(error),
       });
@@ -251,7 +235,7 @@ export function ServerExperienceProvider({ children }: { children: ReactNode })
   }, [fetchUserCounts]);
 
   const hasPaidLicense = useMemo(() => {
-    return config?.license === 'SERVER' || config?.license === 'PRO' || config?.license === 'ENTERPRISE';
+    return config?.license === "SERVER" || config?.license === "PRO" || config?.license === "ENTERPRISE";
   }, [config?.license]);
 
   const licenseKeyValid = useMemo(() => {
@@ -265,52 +249,37 @@ export function ServerExperienceProvider({ children }: { children: ReactNode })
   }, [config?.premiumEnabled, licenseInfo]);
 
   const overFreeTierLimit = useMemo(() => {
-    if (typeof userCountState.totalUsers !== 'number') {
+    if (typeof userCountState.totalUsers !== "number") {
       return null;
     }
     return userCountState.totalUsers > FREE_TIER_LIMIT;
   }, [userCountState.totalUsers]);
 
   const userCountResolved =
-    !userCountState.loading && userCountState.source !== 'unknown' && userCountState.totalUsers !== null;
+    !userCountState.loading && userCountState.source !== "unknown" && userCountState.totalUsers !== null;
 
   const scenarioKey = useMemo<ServerScenarioKey>(() => {
     if (hasPaidLicense) {
-      return 'licensed';
+      return "licensed";
     }
-    if (!userCountResolved || typeof userCountState.totalUsers !== 'number') {
-      return 'unknown';
+    if (!userCountResolved || typeof userCountState.totalUsers !== "number") {
+      return "unknown";
     }
     const overLimit = userCountState.totalUsers > FREE_TIER_LIMIT;
 
     if (!loginEnabled) {
       if (selfReportedAdmin) {
-        return overLimit
-          ? 'no-login-admin-over-limit-no-license'
-          : 'no-login-admin-under-limit-no-license';
+        return overLimit ? "no-login-admin-over-limit-no-license" : "no-login-admin-under-limit-no-license";
       }
-      return overLimit
-        ? 'no-login-user-over-limit-no-license'
-        : 'no-login-user-under-limit-no-license';
+      return overLimit ? "no-login-user-over-limit-no-license" : "no-login-user-under-limit-no-license";
     }
 
     if (configIsAdmin) {
-      return overLimit
-        ? 'login-admin-over-limit-no-license'
-        : 'login-admin-under-limit-no-license';
+      return overLimit ? "login-admin-over-limit-no-license" : "login-admin-under-limit-no-license";
     }
 
-    return overLimit
-      ? 'login-user-over-limit-no-license'
-      : 'login-user-under-limit-no-license';
-  }, [
-    hasPaidLicense,
-    userCountResolved,
-    userCountState.totalUsers,
-    loginEnabled,
-    selfReportedAdmin,
-    configIsAdmin,
-  ]);
+    return overLimit ? "login-user-over-limit-no-license" : "login-user-under-limit-no-license";
+  }, [hasPaidLicense, userCountResolved, userCountState.totalUsers, loginEnabled, selfReportedAdmin, configIsAdmin]);
 
   const value: ServerExperienceValue = {
     loginEnabled,
@@ -341,17 +310,13 @@ export function ServerExperienceProvider({ children }: { children: ReactNode })
     scenarioKey,
   };
 
-  return (
-    <ServerExperienceContext.Provider value={value}>
-      {children}
-    </ServerExperienceContext.Provider>
-  );
+  return <ServerExperienceContext.Provider value={value}>{children}</ServerExperienceContext.Provider>;
 }
 
 export function useServerExperienceContext() {
   const context = useContext(ServerExperienceContext);
   if (!context) {
-    throw new Error('useServerExperience must be used within ServerExperienceProvider');
+    throw new Error("useServerExperience must be used within ServerExperienceProvider");
   }
   return context;
 }
diff --git a/frontend/src/proprietary/contexts/UpdateSeatsContext.tsx b/frontend/src/proprietary/contexts/UpdateSeatsContext.tsx
index fdc3f4ca76..18bf3d581f 100644
--- a/frontend/src/proprietary/contexts/UpdateSeatsContext.tsx
+++ b/frontend/src/proprietary/contexts/UpdateSeatsContext.tsx
@@ -1,12 +1,12 @@
-import React, { createContext, useContext, useState, useCallback, useEffect, ReactNode } from 'react';
-import { useLocation } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
-import licenseService, {} from '@app/services/licenseService';
-import UpdateSeatsModal from '@app/components/shared/UpdateSeatsModal';
-import { userManagementService } from '@app/services/userManagementService';
-import { alert } from '@app/components/toast';
-import { useOptionalLicense } from '@app/contexts/LicenseContext';
-import { resyncExistingLicense } from '@app/utils/licenseCheckoutUtils';
+import React, { createContext, useContext, useState, useCallback, useEffect, ReactNode } from "react";
+import { useLocation } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import licenseService from "@app/services/licenseService";
+import UpdateSeatsModal from "@app/components/shared/UpdateSeatsModal";
+import { userManagementService } from "@app/services/userManagementService";
+import { alert } from "@app/components/toast";
+import { useOptionalLicense } from "@app/contexts/LicenseContext";
+import { resyncExistingLicense } from "@app/utils/licenseCheckoutUtils";
 
 export interface UpdateSeatsOptions {
   onSuccess?: () => void;
@@ -43,36 +43,36 @@ export const UpdateSeatsProvider: React.FC<UpdateSeatsProviderProps> = ({ childr
     // during SAML/OAuth callback. This check only matters after successful billing
     // portal redirects, which never happen on auth routes.
     const isAuthRoute =
-      location.pathname === '/login' ||
-      location.pathname === '/signup' ||
-      location.pathname === '/auth/callback' ||
-      location.pathname.startsWith('/invite/');
+      location.pathname === "/login" ||
+      location.pathname === "/signup" ||
+      location.pathname === "/auth/callback" ||
+      location.pathname.startsWith("/invite/");
 
     if (isAuthRoute) {
-      console.log('[UpdateSeatsContext] On auth route, skipping billing return check');
+      console.log("[UpdateSeatsContext] On auth route, skipping billing return check");
       return;
     }
 
     const handleBillingReturn = async () => {
       const urlParams = new URLSearchParams(window.location.search);
-      const seatsUpdated = urlParams.get('seats_updated');
+      const seatsUpdated = urlParams.get("seats_updated");
 
-      if (seatsUpdated === 'true') {
-        console.log('Seats updated successfully, syncing license with Keygen');
+      if (seatsUpdated === "true") {
+        console.log("Seats updated successfully, syncing license with Keygen");
 
         // Clear URL parameters
-        window.history.replaceState({}, '', window.location.pathname);
+        window.history.replaceState({}, "", window.location.pathname);
 
         try {
           // Wait a moment for Stripe webhook to process
-          await new Promise(resolve => setTimeout(resolve, 2000));
+          await new Promise((resolve) => setTimeout(resolve, 2000));
 
           // Resync license with Keygen (not just local fetch)
-          console.log('Seat update detected - resyncing license with Keygen');
+          console.log("Seat update detected - resyncing license with Keygen");
           const activation = await resyncExistingLicense();
 
           if (activation.success) {
-            console.log('License synced successfully after seat update');
+            console.log("License synced successfully after seat update");
 
             // Refresh global license context
             await license?.refetchLicense();
@@ -81,25 +81,23 @@ export const UpdateSeatsProvider: React.FC<UpdateSeatsProviderProps> = ({ childr
             const updatedLicense = await licenseService.getLicenseInfo();
 
             alert({
-              alertType: 'success',
-              title: t('billing.seatsUpdated', 'Seats Updated'),
-              body: t(
-                'billing.seatsUpdatedMessage',
-                'Your enterprise seats have been updated to {{seats}}',
-                { seats: updatedLicense.maxUsers }
-              ),
+              alertType: "success",
+              title: t("billing.seatsUpdated", "Seats Updated"),
+              body: t("billing.seatsUpdatedMessage", "Your enterprise seats have been updated to {{seats}}", {
+                seats: updatedLicense.maxUsers,
+              }),
             });
           } else {
-            throw new Error(activation.error || 'Failed to sync license');
+            throw new Error(activation.error || "Failed to sync license");
           }
         } catch (error) {
-          console.error('Failed to sync license after seat update:', error);
+          console.error("Failed to sync license after seat update:", error);
           alert({
-            alertType: 'warning',
-            title: t('billing.updateProcessing', 'Update Processing'),
+            alertType: "warning",
+            title: t("billing.updateProcessing", "Update Processing"),
             body: t(
-              'billing.updateProcessingMessage',
-              'Your seat update is being processed. Please refresh in a few moments.'
+              "billing.updateProcessingMessage",
+              "Your seat update is being processed. Please refresh in a few moments.",
             ),
           });
         }
@@ -108,56 +106,53 @@ export const UpdateSeatsProvider: React.FC<UpdateSeatsProviderProps> = ({ childr
 
     // CRITICAL FIX: Properly handle async function and catch errors
     handleBillingReturn().catch((error) => {
-      console.error('[UpdateSeatsContext] Error in billing return handler:', error);
+      console.error("[UpdateSeatsContext] Error in billing return handler:", error);
       // Don't throw - this is initialization, should not block rendering
     });
   }, [t, location.pathname, license]);
 
-  const openUpdateSeats = useCallback(async (options: UpdateSeatsOptions = {}) => {
-    try {
-      setIsLoading(true);
+  const openUpdateSeats = useCallback(
+    async (options: UpdateSeatsOptions = {}) => {
+      try {
+        setIsLoading(true);
 
-      // Fetch current license info and user count
-      const [licenseInfo, userData] = await Promise.all([
-        licenseService.getLicenseInfo(),
-        userManagementService.getUsers(),
-      ]);
+        // Fetch current license info and user count
+        const [licenseInfo, userData] = await Promise.all([licenseService.getLicenseInfo(), userManagementService.getUsers()]);
 
-      // Validate this is an enterprise license
-      if (!licenseInfo || licenseInfo.licenseType !== 'ENTERPRISE') {
-        throw new Error(
-          t('billing.notEnterprise', 'Seat management is only available for enterprise licenses')
+        // Validate this is an enterprise license
+        if (!licenseInfo || licenseInfo.licenseType !== "ENTERPRISE") {
+          throw new Error(t("billing.notEnterprise", "Seat management is only available for enterprise licenses"));
+        }
+
+        const currentLicenseSeats = licenseInfo.maxUsers || 1;
+        const currentUserCount = userData.totalUsers || 0;
+
+        // Minimum seats must be at least the current number of users
+        const calculatedMinSeats = Math.max(currentUserCount, 1);
+
+        console.log(
+          `Opening seat update: current seats=${currentLicenseSeats}, current users=${currentUserCount}, minimum=${calculatedMinSeats}`,
         );
+
+        setCurrentSeats(currentLicenseSeats);
+        setMinimumSeats(calculatedMinSeats);
+        setCurrentOptions(options);
+        setIsOpen(true);
+      } catch (err) {
+        const errorMessage = err instanceof Error ? err.message : "Failed to open seat update";
+        console.error("Error opening seat update:", errorMessage);
+        alert({
+          alertType: "error",
+          title: t("common.error", "Error"),
+          body: errorMessage,
+        });
+        options.onError?.(errorMessage);
+      } finally {
+        setIsLoading(false);
       }
-
-      const currentLicenseSeats = licenseInfo.maxUsers || 1;
-      const currentUserCount = userData.totalUsers || 0;
-
-      // Minimum seats must be at least the current number of users
-      const calculatedMinSeats = Math.max(currentUserCount, 1);
-
-      console.log(
-        `Opening seat update: current seats=${currentLicenseSeats}, current users=${currentUserCount}, minimum=${calculatedMinSeats}`
-      );
-
-      setCurrentSeats(currentLicenseSeats);
-      setMinimumSeats(calculatedMinSeats);
-      setCurrentOptions(options);
-      setIsOpen(true);
-    } catch (err) {
-      const errorMessage =
-        err instanceof Error ? err.message : 'Failed to open seat update';
-      console.error('Error opening seat update:', errorMessage);
-      alert({
-        alertType: 'error',
-        title: t('common.error', 'Error'),
-        body: errorMessage,
-      });
-      options.onError?.(errorMessage);
-    } finally {
-      setIsLoading(false);
-    }
-  }, [t]);
+    },
+    [t],
+  );
 
   const closeUpdateSeats = useCallback(() => {
     setIsOpen(false);
@@ -173,40 +168,36 @@ export const UpdateSeatsProvider: React.FC<UpdateSeatsProviderProps> = ({ childr
         // Get current license key
         const licenseInfo = await licenseService.getLicenseInfo();
         if (!licenseInfo?.licenseKey) {
-          throw new Error('No license key found');
+          throw new Error("No license key found");
         }
 
         console.log(`Updating seats from ${currentSeats} to ${newSeatCount}`);
 
         // Call manage-billing function with new seat count
-        const portalUrl = await licenseService.updateEnterpriseSeats(
-          newSeatCount,
-          licenseInfo.licenseKey
-        );
+        const portalUrl = await licenseService.updateEnterpriseSeats(newSeatCount, licenseInfo.licenseKey);
 
         return portalUrl;
       } catch (err) {
-        const errorMessage =
-          err instanceof Error ? err.message : 'Failed to update seats';
-        console.error('Error updating seats:', errorMessage);
+        const errorMessage = err instanceof Error ? err.message : "Failed to update seats";
+        console.error("Error updating seats:", errorMessage);
         currentOptions.onError?.(errorMessage);
         throw err;
       }
     },
-    [currentSeats, currentOptions]
+    [currentSeats, currentOptions],
   );
 
   const handleSuccess = useCallback(() => {
-    console.log('Seat update initiated successfully');
+    console.log("Seat update initiated successfully");
     currentOptions.onSuccess?.();
   }, [currentOptions]);
 
   const handleError = useCallback(
     (error: string) => {
-      console.error('Seat update error:', error);
+      console.error("Seat update error:", error);
       currentOptions.onError?.(error);
     },
-    [currentOptions]
+    [currentOptions],
   );
 
   return (
@@ -235,7 +226,7 @@ export const UpdateSeatsProvider: React.FC<UpdateSeatsProviderProps> = ({ childr
 export const useUpdateSeats = (): UpdateSeatsContextValue => {
   const context = useContext(UpdateSeatsContext);
   if (!context) {
-    throw new Error('useUpdateSeats must be used within an UpdateSeatsProvider');
+    throw new Error("useUpdateSeats must be used within an UpdateSeatsProvider");
   }
   return context;
 };
diff --git a/frontend/src/proprietary/extensions/accountLogout.ts b/frontend/src/proprietary/extensions/accountLogout.ts
index 237f609b5a..c3d9e572e1 100644
--- a/frontend/src/proprietary/extensions/accountLogout.ts
+++ b/frontend/src/proprietary/extensions/accountLogout.ts
@@ -12,8 +12,8 @@ interface AccountLogoutDeps {
 export function useAccountLogout() {
   return async ({ signOut, redirectToLogin }: AccountLogoutDeps): Promise<void> => {
     try {
-      if (typeof window !== 'undefined') {
-        window.sessionStorage.setItem('stirling_sso_auto_login_logged_out', '1');
+      if (typeof window !== "undefined") {
+        window.sessionStorage.setItem("stirling_sso_auto_login_logged_out", "1");
       }
       await signOut();
     } finally {
diff --git a/frontend/src/proprietary/hooks/usePlans.ts b/frontend/src/proprietary/hooks/usePlans.ts
index 33cb198dee..7ca3cb17fd 100644
--- a/frontend/src/proprietary/hooks/usePlans.ts
+++ b/frontend/src/proprietary/hooks/usePlans.ts
@@ -1,8 +1,5 @@
-import { useState, useEffect } from 'react';
-import licenseService, {
-  PlanTier,
-  PlansResponse,
-} from '@app/services/licenseService';
+import { useState, useEffect } from "react";
+import licenseService, { PlanTier, PlansResponse } from "@app/services/licenseService";
 
 export interface UsePlansReturn {
   plans: PlanTier[];
@@ -11,7 +8,7 @@ export interface UsePlansReturn {
   refetch: () => Promise<void>;
 }
 
-export const usePlans = (currency: string = 'gbp'): UsePlansReturn => {
+export const usePlans = (currency: string = "gbp"): UsePlansReturn => {
   const [plans, setPlans] = useState<PlanTier[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -24,8 +21,8 @@ export const usePlans = (currency: string = 'gbp'): UsePlansReturn => {
       const data: PlansResponse = await licenseService.getPlans(currency);
       setPlans(data.plans);
     } catch (err) {
-      console.error('Error fetching plans:', err);
-      setError(err instanceof Error ? err.message : 'Failed to fetch plans');
+      console.error("Error fetching plans:", err);
+      setError(err instanceof Error ? err.message : "Failed to fetch plans");
     } finally {
       setLoading(false);
     }
diff --git a/frontend/src/proprietary/hooks/useRequestHeaders.ts b/frontend/src/proprietary/hooks/useRequestHeaders.ts
index 79795a9206..6c6bd6543b 100644
--- a/frontend/src/proprietary/hooks/useRequestHeaders.ts
+++ b/frontend/src/proprietary/hooks/useRequestHeaders.ts
@@ -1,4 +1,4 @@
 export function useRequestHeaders(): HeadersInit {
-  const token = localStorage.getItem('stirling_jwt');
-  return token ? { 'Authorization': `Bearer ${token}` } : {};
+  const token = localStorage.getItem("stirling_jwt");
+  return token ? { Authorization: `Bearer ${token}` } : {};
 }
diff --git a/frontend/src/proprietary/hooks/useServerExperience.ts b/frontend/src/proprietary/hooks/useServerExperience.ts
index 6a9862275e..be2c4b77c6 100644
--- a/frontend/src/proprietary/hooks/useServerExperience.ts
+++ b/frontend/src/proprietary/hooks/useServerExperience.ts
@@ -1,6 +1,5 @@
-import { useServerExperienceContext } from '@app/contexts/ServerExperienceContext';
+import { useServerExperienceContext } from "@app/contexts/ServerExperienceContext";
 
 export function useServerExperience() {
   return useServerExperienceContext();
 }
-
diff --git a/frontend/src/proprietary/hooks/useShouldShowWelcomeModal.ts b/frontend/src/proprietary/hooks/useShouldShowWelcomeModal.ts
index da03a72158..3c75c99997 100644
--- a/frontend/src/proprietary/hooks/useShouldShowWelcomeModal.ts
+++ b/frontend/src/proprietary/hooks/useShouldShowWelcomeModal.ts
@@ -1,6 +1,6 @@
-import { usePreferences } from '@app/contexts/PreferencesContext';
-import { useAuth } from '@app/auth/UseSession';
-import { useIsMobile } from '@app/hooks/useIsMobile';
+import { usePreferences } from "@app/contexts/PreferencesContext";
+import { useAuth } from "@app/auth/UseSession";
+import { useIsMobile } from "@app/hooks/useIsMobile";
 
 export function useShouldShowWelcomeModal(): boolean {
   const { preferences } = usePreferences();
@@ -9,9 +9,5 @@ export function useShouldShowWelcomeModal(): boolean {
 
   // Only show welcome modal if user is authenticated (session exists)
   // This prevents the modal from showing on login screens when security is enabled
-  return !loading
-    && !preferences.hasCompletedOnboarding
-    && preferences.toolPanelModePromptSeen
-    && !isMobile
-    && !!session;
+  return !loading && !preferences.hasCompletedOnboarding && preferences.toolPanelModePromptSeen && !isMobile && !!session;
 }
diff --git a/frontend/src/proprietary/hooks/workflow/useParticipantSession.ts b/frontend/src/proprietary/hooks/workflow/useParticipantSession.ts
index fe47a457ba..bbb9601b28 100644
--- a/frontend/src/proprietary/hooks/workflow/useParticipantSession.ts
+++ b/frontend/src/proprietary/hooks/workflow/useParticipantSession.ts
@@ -1,10 +1,10 @@
-import { useState, useCallback, useEffect } from 'react';
-import { isAxiosError } from 'axios';
+import { useState, useCallback, useEffect } from "react";
+import { isAxiosError } from "axios";
 import workflowService, {
   WorkflowSessionResponse,
   ParticipantResponse,
   SignatureSubmissionRequest,
-} from '@app/services/workflowService';
+} from "@app/services/workflowService";
 
 export interface UseParticipantSessionResult {
   session: WorkflowSessionResponse | null;
@@ -38,8 +38,8 @@ export const useParticipantSession = (token?: string): UseParticipantSessionResu
       setParticipant(participantData);
     } catch (err: unknown) {
       const errorMsg = isAxiosError(err)
-        ? (err.response?.data?.message || err.message)
-        : (err instanceof Error ? err.message : undefined) || 'Failed to load session';
+        ? err.response?.data?.message || err.message
+        : (err instanceof Error ? err.message : undefined) || "Failed to load session";
       setError(errorMsg);
     } finally {
       setLoading(false);
@@ -59,15 +59,15 @@ export const useParticipantSession = (token?: string): UseParticipantSessionResu
         }
       } catch (err: unknown) {
         const errorMsg = isAxiosError(err)
-          ? (err.response?.data?.message || err.message)
-          : (err instanceof Error ? err.message : undefined) || 'Failed to submit signature';
+          ? err.response?.data?.message || err.message
+          : (err instanceof Error ? err.message : undefined) || "Failed to submit signature";
         setError(errorMsg);
         throw new Error(errorMsg, { cause: err });
       } finally {
         setLoading(false);
       }
     },
-    [loadSession]
+    [loadSession],
   );
 
   const decline = useCallback(
@@ -75,48 +75,48 @@ export const useParticipantSession = (token?: string): UseParticipantSessionResu
       setLoading(true);
       setError(null);
       try {
-        const updatedParticipant = await workflowService.declineParticipation(
-          token,
-          reason
-        );
+        const updatedParticipant = await workflowService.declineParticipation(token, reason);
         setParticipant(updatedParticipant);
         // Reload session
         await loadSession(token);
       } catch (err: unknown) {
         const errorMsg = isAxiosError(err)
-          ? (err.response?.data?.message || err.message)
-          : (err instanceof Error ? err.message : undefined) || 'Failed to decline';
+          ? err.response?.data?.message || err.message
+          : (err instanceof Error ? err.message : undefined) || "Failed to decline";
         setError(errorMsg);
         throw new Error(errorMsg, { cause: err });
       } finally {
         setLoading(false);
       }
     },
-    [loadSession]
+    [loadSession],
   );
 
-  const downloadDocument = useCallback(async (token: string) => {
-    setLoading(true);
-    setError(null);
-    try {
-      const pdfBlob = await workflowService.getParticipantDocument(token);
-      const url = window.URL.createObjectURL(pdfBlob);
-      const a = document.createElement('a');
-      a.href = url;
-      a.download = session?.documentName || 'document.pdf';
-      document.body.appendChild(a);
-      a.click();
-      window.URL.revokeObjectURL(url);
-      document.body.removeChild(a);
-    } catch (err: unknown) {
-      const errorMsg = isAxiosError(err)
-        ? (err.response?.data?.message || err.message)
-        : (err instanceof Error ? err.message : undefined) || 'Failed to download document';
-      setError(errorMsg);
-    } finally {
-      setLoading(false);
-    }
-  }, [session]);
+  const downloadDocument = useCallback(
+    async (token: string) => {
+      setLoading(true);
+      setError(null);
+      try {
+        const pdfBlob = await workflowService.getParticipantDocument(token);
+        const url = window.URL.createObjectURL(pdfBlob);
+        const a = document.createElement("a");
+        a.href = url;
+        a.download = session?.documentName || "document.pdf";
+        document.body.appendChild(a);
+        a.click();
+        window.URL.revokeObjectURL(url);
+        document.body.removeChild(a);
+      } catch (err: unknown) {
+        const errorMsg = isAxiosError(err)
+          ? err.response?.data?.message || err.message
+          : (err instanceof Error ? err.message : undefined) || "Failed to download document";
+        setError(errorMsg);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [session],
+  );
 
   // Auto-load session if token is provided
   useEffect(() => {
diff --git a/frontend/src/proprietary/routes/AuthCallback.module.css b/frontend/src/proprietary/routes/AuthCallback.module.css
index 71d2e5d6d3..cfdde5d236 100644
--- a/frontend/src/proprietary/routes/AuthCallback.module.css
+++ b/frontend/src/proprietary/routes/AuthCallback.module.css
@@ -5,7 +5,7 @@
   justify-content: center;
   padding: 50px 20px;
   background: #f5f5f5;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
 }
 
 .card {
diff --git a/frontend/src/proprietary/routes/AuthCallback.test.tsx b/frontend/src/proprietary/routes/AuthCallback.test.tsx
index ef540d36b0..171bf850b3 100644
--- a/frontend/src/proprietary/routes/AuthCallback.test.tsx
+++ b/frontend/src/proprietary/routes/AuthCallback.test.tsx
@@ -1,11 +1,11 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { render, waitFor } from '@testing-library/react';
-import { BrowserRouter } from 'react-router-dom';
-import AuthCallback from '@app/routes/AuthCallback';
-import { springAuth } from '@app/auth/springAuthClient';
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { render, waitFor } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+import AuthCallback from "@app/routes/AuthCallback";
+import { springAuth } from "@app/auth/springAuthClient";
 
 // Mock springAuth
-vi.mock('@app/auth/springAuthClient', () => ({
+vi.mock("@app/auth/springAuthClient", () => ({
   springAuth: {
     getSession: vi.fn(),
   },
@@ -13,29 +13,29 @@ vi.mock('@app/auth/springAuthClient', () => ({
 
 // Mock useNavigate
 const mockNavigate = vi.fn();
-vi.mock('react-router-dom', async () => {
-  const actual = await vi.importActual('react-router-dom');
+vi.mock("react-router-dom", async () => {
+  const actual = await vi.importActual("react-router-dom");
   return {
     ...actual,
     useNavigate: () => mockNavigate,
   };
 });
 
-describe('AuthCallback', () => {
+describe("AuthCallback", () => {
   beforeEach(() => {
     localStorage.clear();
     vi.clearAllMocks();
     // Reset window.location.hash
-    window.location.hash = '';
+    window.location.hash = "";
   });
 
-  it('should extract JWT from URL hash and validate it', async () => {
-    const mockToken = 'oauth-jwt-token';
+  it("should extract JWT from URL hash and validate it", async () => {
+    const mockToken = "oauth-jwt-token";
     const mockUser = {
-      id: '123',
-      email: 'oauth@example.com',
-      username: 'oauthuser',
-      role: 'USER',
+      id: "123",
+      email: "oauth@example.com",
+      username: "oauthuser",
+      role: "USER",
     };
 
     // Set URL hash with access token
@@ -54,103 +54,99 @@ describe('AuthCallback', () => {
       error: null,
     });
 
-    const dispatchEventSpy = vi.spyOn(window, 'dispatchEvent');
+    const dispatchEventSpy = vi.spyOn(window, "dispatchEvent");
 
     render(
       <BrowserRouter>
         <AuthCallback />
-      </BrowserRouter>
+      </BrowserRouter>,
     );
 
     await waitFor(() => {
       // Verify JWT was stored
-      expect(localStorage.getItem('stirling_jwt')).toBe(mockToken);
+      expect(localStorage.getItem("stirling_jwt")).toBe(mockToken);
 
       // Verify jwt-available event was dispatched
-      expect(dispatchEventSpy).toHaveBeenCalledWith(
-        expect.objectContaining({ type: 'jwt-available' })
-      );
+      expect(dispatchEventSpy).toHaveBeenCalledWith(expect.objectContaining({ type: "jwt-available" }));
 
       // Verify getSession was called to validate token
       expect(springAuth.getSession).toHaveBeenCalled();
 
       // Verify navigation to home
-      expect(mockNavigate).toHaveBeenCalledWith('/', { replace: true });
+      expect(mockNavigate).toHaveBeenCalledWith("/", { replace: true });
     });
   });
 
-  it('should redirect to login when no access token in hash', async () => {
+  it("should redirect to login when no access token in hash", async () => {
     // No hash or empty hash
-    window.location.hash = '';
+    window.location.hash = "";
 
     render(
       <BrowserRouter>
         <AuthCallback />
-      </BrowserRouter>
+      </BrowserRouter>,
     );
 
     await waitFor(() => {
-      expect(mockNavigate).toHaveBeenCalledWith('/login', {
+      expect(mockNavigate).toHaveBeenCalledWith("/login", {
         replace: true,
-        state: { error: 'OAuth login failed - no token received.' },
+        state: { error: "OAuth login failed - no token received." },
       });
-      expect(localStorage.getItem('stirling_jwt')).toBeNull();
+      expect(localStorage.getItem("stirling_jwt")).toBeNull();
     });
   });
 
-  it('should redirect to login when token validation fails', async () => {
-    const invalidToken = 'invalid-oauth-token';
+  it("should redirect to login when token validation fails", async () => {
+    const invalidToken = "invalid-oauth-token";
     window.location.hash = `#access_token=${invalidToken}`;
 
     // Mock failed session validation
     vi.mocked(springAuth.getSession).mockResolvedValueOnce({
       data: { session: null },
-      error: { message: 'Invalid token' },
+      error: { message: "Invalid token" },
     });
 
     render(
       <BrowserRouter>
         <AuthCallback />
-      </BrowserRouter>
+      </BrowserRouter>,
     );
 
     await waitFor(() => {
       // JWT should be stored initially
-      expect(localStorage.getItem('stirling_jwt')).toBeNull(); // Cleared after validation failure
+      expect(localStorage.getItem("stirling_jwt")).toBeNull(); // Cleared after validation failure
 
       // Verify redirect to login
-      expect(mockNavigate).toHaveBeenCalledWith('/login', {
+      expect(mockNavigate).toHaveBeenCalledWith("/login", {
         replace: true,
-        state: { error: 'OAuth login failed - invalid token.' },
+        state: { error: "OAuth login failed - invalid token." },
       });
     });
   });
 
-  it('should handle errors gracefully', async () => {
-    const mockToken = 'error-token';
+  it("should handle errors gracefully", async () => {
+    const mockToken = "error-token";
     window.location.hash = `#access_token=${mockToken}`;
 
     // Mock getSession throwing error
-    vi.mocked(springAuth.getSession).mockRejectedValueOnce(
-      new Error('Network error')
-    );
+    vi.mocked(springAuth.getSession).mockRejectedValueOnce(new Error("Network error"));
 
     render(
       <BrowserRouter>
         <AuthCallback />
-      </BrowserRouter>
+      </BrowserRouter>,
     );
 
     await waitFor(() => {
-      expect(mockNavigate).toHaveBeenCalledWith('/login', {
+      expect(mockNavigate).toHaveBeenCalledWith("/login", {
         replace: true,
-        state: { error: 'OAuth login failed. Please try again.' },
+        state: { error: "OAuth login failed. Please try again." },
       });
     });
   });
 
-  it('should display loading state while processing', () => {
-    window.location.hash = '#access_token=processing-token';
+  it("should display loading state while processing", () => {
+    window.location.hash = "#access_token=processing-token";
 
     vi.mocked(springAuth.getSession).mockImplementationOnce(
       () =>
@@ -159,19 +155,19 @@ describe('AuthCallback', () => {
             () =>
               resolve({
                 data: { session: null },
-                error: { message: 'Token expired' },
+                error: { message: "Token expired" },
               }),
-            100
-          )
-        )
+            100,
+          ),
+        ),
     );
 
     const { getByText } = render(
       <BrowserRouter>
         <AuthCallback />
-      </BrowserRouter>
+      </BrowserRouter>,
     );
 
-    expect(getByText('Completing authentication')).toBeInTheDocument();
+    expect(getByText("Completing authentication")).toBeInTheDocument();
   });
 });
diff --git a/frontend/src/proprietary/routes/AuthCallback.tsx b/frontend/src/proprietary/routes/AuthCallback.tsx
index f7c8fa5a11..782cc73dc4 100644
--- a/frontend/src/proprietary/routes/AuthCallback.tsx
+++ b/frontend/src/proprietary/routes/AuthCallback.tsx
@@ -1,8 +1,8 @@
-import { useEffect, useRef } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { springAuth } from '@app/auth/springAuthClient';
-import { handleAuthCallbackSuccess } from '@app/extensions/authCallback';
-import styles from '@app/routes/AuthCallback.module.css';
+import { useEffect, useRef } from "react";
+import { useNavigate } from "react-router-dom";
+import { springAuth } from "@app/auth/springAuthClient";
+import { handleAuthCallbackSuccess } from "@app/extensions/authCallback";
+import styles from "@app/routes/AuthCallback.module.css";
 
 /**
  * OAuth Callback Handler
@@ -35,11 +35,11 @@ export default function AuthCallback() {
       console.log(`[AuthCallback:${executionId}] Hash: ${window.location.hash}`);
       console.log(`[AuthCallback:${executionId}] Document readyState: ${document.readyState}`);
 
-      if (typeof window !== 'undefined' && window.sessionStorage.getItem('stirling_sso_auto_login_logged_out') === '1') {
+      if (typeof window !== "undefined" && window.sessionStorage.getItem("stirling_sso_auto_login_logged_out") === "1") {
         console.warn(`[AuthCallback:${executionId}] ⚠️  Logout block active, skipping token processing`);
-        navigate('/login', {
+        navigate("/login", {
           replace: true,
-          state: { error: 'You have been signed out. Please sign in again.' }
+          state: { error: "You have been signed out. Please sign in again." },
         });
         return;
       }
@@ -58,13 +58,13 @@ export default function AuthCallback() {
         // Extract JWT from URL fragment (#access_token=...)
         const hash = window.location.hash.substring(1); // Remove '#'
         const params = new URLSearchParams(hash);
-        const token = params.get('access_token');
+        const token = params.get("access_token");
 
         if (!token) {
           console.error(`[AuthCallback:${executionId}] ❌ No access_token in URL fragment`);
-          navigate('/login', {
+          navigate("/login", {
             replace: true,
-            state: { error: 'OAuth login failed - no token received.' }
+            state: { error: "OAuth login failed - no token received." },
           });
           return;
         }
@@ -73,14 +73,16 @@ export default function AuthCallback() {
         console.log(`[AuthCallback:${executionId}] Step 2: Storing JWT in localStorage`);
 
         // Store JWT in localStorage
-        localStorage.setItem('stirling_jwt', token);
+        localStorage.setItem("stirling_jwt", token);
         console.log(`[AuthCallback:${executionId}] ✓ JWT stored in localStorage`);
 
         console.log(`[AuthCallback:${executionId}] Step 3: Dispatching 'jwt-available' event`);
         // Dispatch custom event for other components to react to JWT availability
-        window.dispatchEvent(new CustomEvent('jwt-available'));
+        window.dispatchEvent(new CustomEvent("jwt-available"));
         console.log(`[AuthCallback:${executionId}] ✓ Event dispatched`);
-        console.log(`[AuthCallback:${executionId}] Elapsed after jwt-available: ${(performance.now() - startTime).toFixed(2)}ms`);
+        console.log(
+          `[AuthCallback:${executionId}] Elapsed after jwt-available: ${(performance.now() - startTime).toFixed(2)}ms`,
+        );
 
         console.log(`[AuthCallback:${executionId}] Step 4: Validating token with backend`);
         // Validate the token and load user info
@@ -89,10 +91,10 @@ export default function AuthCallback() {
 
         if (error || !data.session) {
           console.error(`[AuthCallback:${executionId}] ❌ Failed to validate token:`, error);
-          localStorage.removeItem('stirling_jwt');
-          navigate('/login', {
+          localStorage.removeItem("stirling_jwt");
+          navigate("/login", {
             replace: true,
-            state: { error: 'OAuth login failed - invalid token.' }
+            state: { error: "OAuth login failed - invalid token." },
           });
           return;
         }
@@ -107,13 +109,15 @@ export default function AuthCallback() {
 
         // Wait for all context providers to process jwt-available event
         // This prevents infinite render loop when coming from cross-domain SAML redirect
-        await new Promise(resolve => setTimeout(resolve, 100));
-        console.log(`[AuthCallback:${executionId}] Elapsed after stabilization wait: ${(performance.now() - startTime).toFixed(2)}ms`);
+        await new Promise((resolve) => setTimeout(resolve, 100));
+        console.log(
+          `[AuthCallback:${executionId}] Elapsed after stabilization wait: ${(performance.now() - startTime).toFixed(2)}ms`,
+        );
 
         console.log(`[AuthCallback:${executionId}] Step 7: Navigating to home page`);
 
         // Clear the hash from URL and redirect to home page
-        navigate('/', { replace: true });
+        navigate("/", { replace: true });
 
         const duration = performance.now() - startTime;
         console.log(`[AuthCallback:${executionId}] ✓ Authentication complete (${duration.toFixed(2)}ms)`);
@@ -128,9 +132,9 @@ export default function AuthCallback() {
         console.error(`[AuthCallback:${executionId}] Error stack:`, (error as Error)?.stack);
         console.error(`[AuthCallback:${executionId}] Duration before failure: ${duration.toFixed(2)}ms`);
         console.error(`[AuthCallback:${executionId}] ════════════════════════════════════`);
-        navigate('/login', {
+        navigate("/login", {
           replace: true,
-          state: { error: 'OAuth login failed. Please try again.' }
+          state: { error: "OAuth login failed. Please try again." },
         });
       }
     };
diff --git a/frontend/src/proprietary/routes/InviteAccept.tsx b/frontend/src/proprietary/routes/InviteAccept.tsx
index 9f174617b1..c6b6ce23bf 100644
--- a/frontend/src/proprietary/routes/InviteAccept.tsx
+++ b/frontend/src/proprietary/routes/InviteAccept.tsx
@@ -1,14 +1,14 @@
-import { useState, useEffect } from 'react';
-import { isAxiosError } from 'axios';
-import { useParams, useNavigate } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
-import { Stack, Text, Paper, Center, Loader, TextInput, PasswordInput, Anchor } from '@mantine/core';
-import { useDocumentMeta } from '@app/hooks/useDocumentMeta';
-import AuthLayout from '@app/routes/authShared/AuthLayout';
-import LoginHeader from '@app/routes/login/LoginHeader';
-import ErrorMessage from '@app/routes/login/ErrorMessage';
-import { BASE_PATH } from '@app/constants/app';
-import apiClient from '@app/services/apiClient';
+import { useState, useEffect } from "react";
+import { isAxiosError } from "axios";
+import { useParams, useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { Stack, Text, Paper, Center, Loader, TextInput, PasswordInput, Anchor } from "@mantine/core";
+import { useDocumentMeta } from "@app/hooks/useDocumentMeta";
+import AuthLayout from "@app/routes/authShared/AuthLayout";
+import LoginHeader from "@app/routes/login/LoginHeader";
+import ErrorMessage from "@app/routes/login/ErrorMessage";
+import { BASE_PATH } from "@app/constants/app";
+import apiClient from "@app/services/apiClient";
 
 interface InviteData {
   email: string | null;
@@ -26,25 +26,25 @@ export default function InviteAccept() {
   const [submitting, setSubmitting] = useState(false);
   const [inviteData, setInviteData] = useState<InviteData | null>(null);
   const [error, setError] = useState<string | null>(null);
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
 
   const baseUrl = window.location.origin + BASE_PATH;
 
   // Set document meta
   useDocumentMeta({
-    title: `${t('invite.welcome', 'Welcome to Stirling PDF')} - Stirling PDF`,
-    description: t('app.description', 'The Free Adobe Acrobat alternative (10M+ Downloads)'),
-    ogTitle: `${t('invite.welcome', 'Welcome to Stirling PDF')} - Stirling PDF`,
-    ogDescription: t('app.description', 'The Free Adobe Acrobat alternative (10M+ Downloads)'),
+    title: `${t("invite.welcome", "Welcome to Stirling PDF")} - Stirling PDF`,
+    description: t("app.description", "The Free Adobe Acrobat alternative (10M+ Downloads)"),
+    ogTitle: `${t("invite.welcome", "Welcome to Stirling PDF")} - Stirling PDF`,
+    ogDescription: t("app.description", "The Free Adobe Acrobat alternative (10M+ Downloads)"),
     ogImage: `${baseUrl}/og_images/home.png`,
-    ogUrl: `${window.location.origin}${window.location.pathname}`
+    ogUrl: `${window.location.origin}${window.location.pathname}`,
   });
 
   useEffect(() => {
     if (!token) {
-      setError(t('invite.invalidToken', 'Invalid invitation link'));
+      setError(t("invite.invalidToken", "Invalid invitation link"));
       setLoading(false);
       return;
     }
@@ -62,9 +62,9 @@ export default function InviteAccept() {
       setError(null);
     } catch (err: unknown) {
       const errorMessage = isAxiosError(err)
-        ? (err.response?.data?.error || err.message)
+        ? err.response?.data?.error || err.message
         : (err instanceof Error ? err.message : undefined) ||
-          t('invite.validationError', 'Failed to validate invitation link');
+          t("invite.validationError", "Failed to validate invitation link");
       setError(errorMessage);
     } finally {
       setLoading(false);
@@ -77,23 +77,23 @@ export default function InviteAccept() {
     // Validate email if required
     if (inviteData?.emailRequired) {
       if (!email || email.trim().length === 0) {
-        setError(t('invite.emailRequired', 'Email address is required'));
+        setError(t("invite.emailRequired", "Email address is required"));
         return;
       }
-      if (!email.includes('@')) {
-        setError(t('invite.invalidEmail', 'Invalid email address'));
+      if (!email.includes("@")) {
+        setError(t("invite.invalidEmail", "Invalid email address"));
         return;
       }
     }
 
     // Validate passwords
     if (!password) {
-      setError(t('invite.passwordRequired', 'Password is required'));
+      setError(t("invite.passwordRequired", "Password is required"));
       return;
     }
 
     if (password !== confirmPassword) {
-      setError(t('invite.passwordMismatch', 'Passwords do not match'));
+      setError(t("invite.passwordMismatch", "Passwords do not match"));
       return;
     }
 
@@ -103,21 +103,20 @@ export default function InviteAccept() {
 
       const formData = new FormData();
       if (inviteData?.emailRequired) {
-        formData.append('email', email.trim().toLowerCase());
+        formData.append("email", email.trim().toLowerCase());
       }
-      formData.append('password', password);
+      formData.append("password", password);
 
       await apiClient.post(`/api/v1/invite/accept/${token}`, formData, {
         suppressErrorToast: true,
       });
 
       // Success - redirect to login
-      navigate('/login?messageType=accountCreated');
+      navigate("/login?messageType=accountCreated");
     } catch (err: unknown) {
       const errorMessage = isAxiosError(err)
-        ? (err.response?.data?.error || err.message)
-        : (err instanceof Error ? err.message : undefined) ||
-          t('invite.acceptError', 'Failed to create account');
+        ? err.response?.data?.error || err.message
+        : (err instanceof Error ? err.message : undefined) || t("invite.acceptError", "Failed to create account");
       setError(errorMessage);
     } finally {
       setSubmitting(false);
@@ -127,7 +126,7 @@ export default function InviteAccept() {
   if (loading) {
     return (
       <AuthLayout>
-        <LoginHeader title={t('invite.validating', 'Validating invitation...')} />
+        <LoginHeader title={t("invite.validating", "Validating invitation...")} />
         <Center py="xl">
           <Loader size="md" />
         </Center>
@@ -138,15 +137,15 @@ export default function InviteAccept() {
   if (error && !inviteData) {
     return (
       <AuthLayout>
-        <LoginHeader title={t('invite.invalidInvitation', 'Invalid Invitation')} />
+        <LoginHeader title={t("invite.invalidInvitation", "Invalid Invitation")} />
         <ErrorMessage error={error} />
         <div className="auth-section">
           <button
             type="button"
-            onClick={() => navigate('/login')}
+            onClick={() => navigate("/login")}
             className="w-full px-4 py-[0.75rem] rounded-[0.625rem] text-base font-semibold cursor-pointer border-0 auth-cta-button"
           >
-            {t('invite.goToLogin', 'Go to Login')}
+            {t("invite.goToLogin", "Go to Login")}
           </button>
         </div>
       </AuthLayout>
@@ -156,21 +155,22 @@ export default function InviteAccept() {
   return (
     <AuthLayout>
       <LoginHeader
-        title={t('invite.welcomeTitle', "You've been invited!")}
-        subtitle={t('invite.welcomeSubtitle', 'Complete your account setup to get started')}
+        title={t("invite.welcomeTitle", "You've been invited!")}
+        subtitle={t("invite.welcomeSubtitle", "Complete your account setup to get started")}
       />
 
       {inviteData && !inviteData.emailRequired && (
-        <Paper withBorder p="md" mb="lg" bg="blue.0" style={{ borderColor: 'var(--mantine-color-blue-3)' }}>
+        <Paper withBorder p="md" mb="lg" bg="blue.0" style={{ borderColor: "var(--mantine-color-blue-3)" }}>
           <Stack gap="xs" align="center">
-            <Text size="xs" tt="uppercase" c="dimmed" fw={500} style={{ letterSpacing: '0.05em' }}>
-              {t('invite.accountFor', 'Creating account for')}
+            <Text size="xs" tt="uppercase" c="dimmed" fw={500} style={{ letterSpacing: "0.05em" }}>
+              {t("invite.accountFor", "Creating account for")}
             </Text>
             <Text size="lg" fw={600}>
               {inviteData.email}
             </Text>
             <Text size="xs" c="dimmed">
-              {t('invite.linkExpires', 'Link expires')}: {new Date(inviteData.expiresAt).toLocaleDateString()} at {new Date(inviteData.expiresAt).toLocaleTimeString()}
+              {t("invite.linkExpires", "Link expires")}: {new Date(inviteData.expiresAt).toLocaleDateString()} at{" "}
+              {new Date(inviteData.expiresAt).toLocaleTimeString()}
             </Text>
           </Stack>
         </Paper>
@@ -182,11 +182,11 @@ export default function InviteAccept() {
         <Stack gap="md">
           {inviteData?.emailRequired && (
             <TextInput
-              label={t('invite.email', 'Email address')}
+              label={t("invite.email", "Email address")}
               type="email"
               value={email}
               onChange={(e) => setEmail(e.target.value)}
-              placeholder={t('invite.emailPlaceholder', 'Enter your email address')}
+              placeholder={t("invite.emailPlaceholder", "Enter your email address")}
               disabled={submitting}
               required
               autoComplete="email"
@@ -194,20 +194,20 @@ export default function InviteAccept() {
           )}
 
           <PasswordInput
-            label={t('invite.choosePassword', 'Choose a password')}
+            label={t("invite.choosePassword", "Choose a password")}
             value={password}
             onChange={(e) => setPassword(e.target.value)}
-            placeholder={t('invite.passwordPlaceholder', 'Enter your password')}
+            placeholder={t("invite.passwordPlaceholder", "Enter your password")}
             disabled={submitting}
             required
             autoComplete="new-password"
           />
 
           <PasswordInput
-            label={t('invite.confirmPassword', 'Confirm password')}
+            label={t("invite.confirmPassword", "Confirm password")}
             value={confirmPassword}
             onChange={(e) => setConfirmPassword(e.target.value)}
-            placeholder={t('invite.confirmPasswordPlaceholder', 'Re-enter your password')}
+            placeholder={t("invite.confirmPasswordPlaceholder", "Re-enter your password")}
             disabled={submitting}
             required
             autoComplete="new-password"
@@ -219,7 +219,7 @@ export default function InviteAccept() {
               disabled={submitting}
               className="w-full px-4 py-[0.75rem] rounded-[0.625rem] text-base font-semibold cursor-pointer border-0 disabled:opacity-50 disabled:cursor-not-allowed auth-cta-button"
             >
-              {submitting ? t('invite.creating', 'Creating Account...') : t('invite.createAccount', 'Create Account')}
+              {submitting ? t("invite.creating", "Creating Account...") : t("invite.createAccount", "Create Account")}
             </button>
           </div>
         </Stack>
@@ -227,9 +227,9 @@ export default function InviteAccept() {
 
       <Center mt="md">
         <Text size="sm" c="dimmed">
-          {t('invite.alreadyHaveAccount', 'Already have an account?')}{' '}
-          <Anchor component="button" type="button" onClick={() => navigate('/login')} c="dark">
-            {t('invite.signIn', 'Sign in')}
+          {t("invite.alreadyHaveAccount", "Already have an account?")}{" "}
+          <Anchor component="button" type="button" onClick={() => navigate("/login")} c="dark">
+            {t("invite.signIn", "Sign in")}
           </Anchor>
         </Text>
       </Center>
diff --git a/frontend/src/proprietary/routes/Landing.tsx b/frontend/src/proprietary/routes/Landing.tsx
index 0fe9c1b33b..db40b9d892 100644
--- a/frontend/src/proprietary/routes/Landing.tsx
+++ b/frontend/src/proprietary/routes/Landing.tsx
@@ -1,12 +1,12 @@
-import { useEffect } from 'react'
-import { Navigate, useLocation, useNavigate } from 'react-router-dom'
-import { useAuth } from '@app/auth/UseSession'
-import { useAppConfig } from '@app/contexts/AppConfigContext'
-import HomePage from '@app/pages/HomePage'
-import { useBackendProbe } from '@app/hooks/useBackendProbe'
-import AuthLayout from '@app/routes/authShared/AuthLayout'
-import LoginHeader from '@app/routes/login/LoginHeader'
-import { useTranslation } from 'react-i18next'
+import { useEffect } from "react";
+import { Navigate, useLocation, useNavigate } from "react-router-dom";
+import { useAuth } from "@app/auth/UseSession";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
+import HomePage from "@app/pages/HomePage";
+import { useBackendProbe } from "@app/hooks/useBackendProbe";
+import AuthLayout from "@app/routes/authShared/AuthLayout";
+import LoginHeader from "@app/routes/login/LoginHeader";
+import { useTranslation } from "react-i18next";
 
 /**
  * Landing component - Smart router based on authentication status
@@ -42,15 +42,15 @@ export default function Landing() {
 
   // Periodically probe while backend isn't up so the screen can auto-advance when it comes online
   useEffect(() => {
-    if (backendProbe.status === 'up' || backendProbe.loginDisabled) {
+    if (backendProbe.status === "up" || backendProbe.loginDisabled) {
       return;
     }
     const tick = async () => {
       const result = await backendProbe.probe();
-      if (result.status === 'up') {
+      if (result.status === "up") {
         await refetch();
         if (result.loginDisabled) {
-          navigate('/', { replace: true });
+          navigate("/", { replace: true });
         }
       }
     };
@@ -61,13 +61,13 @@ export default function Landing() {
   }, [backendProbe.status, backendProbe.loginDisabled, backendProbe.probe, navigate, refetch]);
 
   useEffect(() => {
-    if (backendProbe.status === 'up') {
+    if (backendProbe.status === "up") {
       void refetch();
     }
   }, [backendProbe.status, refetch]);
 
-  console.log('[Landing] ════════════════════════════════════');
-  console.log('[Landing] Render state:', {
+  console.log("[Landing] ════════════════════════════════════");
+  console.log("[Landing] Render state:", {
     pathname: location.pathname,
     loading,
     authLoading,
@@ -79,17 +79,15 @@ export default function Landing() {
     backendStatus: backendProbe.status,
     timestamp: new Date().toISOString(),
   });
-  console.log('[Landing] ════════════════════════════════════');
+  console.log("[Landing] ════════════════════════════════════");
 
   // Show loading while checking auth and config
   if (loading) {
     return (
-      <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      <div style={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center" }}>
         <div className="text-center">
           <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-3"></div>
-          <div className="text-gray-600">
-            Loading...
-          </div>
+          <div className="text-gray-600">Loading...</div>
         </div>
       </div>
     );
@@ -97,20 +95,18 @@ export default function Landing() {
 
   // If login is disabled, show app directly (anonymous mode)
   if (config?.enableLogin === false || backendProbe.loginDisabled) {
-    console.debug('[Landing] Login disabled - showing app in anonymous mode');
-    return (
-      <HomePage />
-    );
+    console.debug("[Landing] Login disabled - showing app in anonymous mode");
+    return <HomePage />;
   }
 
   // If backend is not up yet and user is not authenticated, show a branded status screen
-  if (!session && backendProbe.status !== 'up') {
-    const backendTitle = t('backendStartup.notFoundTitle', 'Backend not found');
+  if (!session && backendProbe.status !== "up") {
+    const backendTitle = t("backendStartup.notFoundTitle", "Backend not found");
     const handleRetry = async () => {
       const result = await backendProbe.probe();
-      if (result.status === 'up') {
+      if (result.status === "up") {
         await refetch();
-        navigate('/', { replace: true });
+        navigate("/", { replace: true });
       }
     };
     return (
@@ -119,23 +115,21 @@ export default function Landing() {
         <div
           className="auth-section"
           style={{
-            padding: '1.5rem',
-            marginTop: '1rem',
-            borderRadius: '0.75rem',
-            backgroundColor: 'rgba(37, 99, 235, 0.08)',
-            border: '1px solid rgba(37, 99, 235, 0.2)',
+            padding: "1.5rem",
+            marginTop: "1rem",
+            borderRadius: "0.75rem",
+            backgroundColor: "rgba(37, 99, 235, 0.08)",
+            border: "1px solid rgba(37, 99, 235, 0.2)",
           }}
         >
-          <p style={{ margin: '0 0 0.75rem 0', color: 'rgba(15, 23, 42, 0.8)' }}>
-            {t('backendStartup.unreachable')}
-          </p>
+          <p style={{ margin: "0 0 0.75rem 0", color: "rgba(15, 23, 42, 0.8)" }}>{t("backendStartup.unreachable")}</p>
           <button
             type="button"
             onClick={handleRetry}
             className="auth-cta-button px-4 py-[0.75rem] rounded-[0.625rem] text-base font-semibold mt-5 border-0 cursor-pointer"
-            style={{ width: 'fit-content' }}
+            style={{ width: "fit-content" }}
           >
-            {t('backendStartup.retry', 'Retry')}
+            {t("backendStartup.retry", "Retry")}
           </button>
         </div>
       </AuthLayout>
@@ -145,14 +139,14 @@ export default function Landing() {
   // If we have a session, show the main app
   // Note: First login password change is now handled by the onboarding flow
   if (session) {
-    return (
-      <HomePage />
-    );
+    return <HomePage />;
   }
 
   // No session - redirect to login page
   // This ensures the URL always shows /login when not authenticated
-  return (config?.enableLogin === true && !backendProbe.loginDisabled)
-    ? <Navigate to="/login" replace state={{ from: location }} />
-    : <HomePage />;
+  return config?.enableLogin === true && !backendProbe.loginDisabled ? (
+    <Navigate to="/login" replace state={{ from: location }} />
+  ) : (
+    <HomePage />
+  );
 }
diff --git a/frontend/src/proprietary/routes/Login.test.tsx b/frontend/src/proprietary/routes/Login.test.tsx
index dc4e76419a..a02b673643 100644
--- a/frontend/src/proprietary/routes/Login.test.tsx
+++ b/frontend/src/proprietary/routes/Login.test.tsx
@@ -1,47 +1,47 @@
-import { describe, it, expect, beforeEach, vi } from 'vitest';
-import { render, screen, waitFor } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { BrowserRouter, MemoryRouter } from 'react-router-dom';
-import { MantineProvider } from '@mantine/core';
-import Login from '@app/routes/Login';
-import { useAuth } from '@app/auth/UseSession';
-import { springAuth } from '@app/auth/springAuthClient';
-import { PreferencesProvider } from '@app/contexts/PreferencesContext';
-import apiClient from '@app/services/apiClient';
+import { describe, it, expect, beforeEach, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { BrowserRouter, MemoryRouter } from "react-router-dom";
+import { MantineProvider } from "@mantine/core";
+import Login from "@app/routes/Login";
+import { useAuth } from "@app/auth/UseSession";
+import { springAuth } from "@app/auth/springAuthClient";
+import { PreferencesProvider } from "@app/contexts/PreferencesContext";
+import apiClient from "@app/services/apiClient";
 
 // Mock i18n to return fallback text
-vi.mock('react-i18next', () => ({
+vi.mock("react-i18next", () => ({
   useTranslation: () => ({
     t: (key: string, fallback?: string | Record<string, unknown>) => {
-      if (typeof fallback === 'string') return fallback;
+      if (typeof fallback === "string") return fallback;
       return key;
     },
   }),
   initReactI18next: {
-    type: '3rdParty',
+    type: "3rdParty",
     init: vi.fn(),
   },
 }));
 
 // Mock i18n module to avoid initialization
-vi.mock('@app/i18n', () => ({
+vi.mock("@app/i18n", () => ({
   updateSupportedLanguages: vi.fn(),
-  supportedLanguages: { 'en-GB': 'English' },
+  supportedLanguages: { "en-GB": "English" },
   rtlLanguages: [],
   default: {
-    language: 'en-GB',
+    language: "en-GB",
     changeLanguage: vi.fn(),
     options: {},
   },
 }));
 
 // Mock useAuth hook
-vi.mock('@app/auth/UseSession', () => ({
+vi.mock("@app/auth/UseSession", () => ({
   useAuth: vi.fn(),
 }));
 
 // Mock springAuth
-vi.mock('@app/auth/springAuthClient', () => ({
+vi.mock("@app/auth/springAuthClient", () => ({
   springAuth: {
     signInWithPassword: vi.fn(),
     signInWithOAuth: vi.fn(),
@@ -49,12 +49,12 @@ vi.mock('@app/auth/springAuthClient', () => ({
 }));
 
 // Mock useDocumentMeta
-vi.mock('@app/hooks/useDocumentMeta', () => ({
+vi.mock("@app/hooks/useDocumentMeta", () => ({
   useDocumentMeta: vi.fn(),
 }));
 
 // Mock apiClient for provider list
-vi.mock('@app/services/apiClient', () => ({
+vi.mock("@app/services/apiClient", () => ({
   default: {
     get: vi.fn(),
     post: vi.fn(),
@@ -63,21 +63,21 @@ vi.mock('@app/services/apiClient', () => ({
 
 const mockNavigate = vi.fn();
 const mockBackendProbeState = {
-  status: 'up' as const,
+  status: "up" as const,
   loginDisabled: false,
   loading: false,
 };
 const mockProbe = vi.fn().mockResolvedValue(mockBackendProbeState);
 
-vi.mock('@app/hooks/useBackendProbe', () => ({
+vi.mock("@app/hooks/useBackendProbe", () => ({
   useBackendProbe: () => ({
     ...mockBackendProbeState,
     probe: mockProbe,
   }),
 }));
 
-vi.mock('react-router-dom', async () => {
-  const actual = await vi.importActual('react-router-dom');
+vi.mock("react-router-dom", async () => {
+  const actual = await vi.importActual("react-router-dom");
   return {
     ...actual,
     useNavigate: () => mockNavigate,
@@ -87,16 +87,14 @@ vi.mock('react-router-dom', async () => {
 // Test wrapper with MantineProvider
 const TestWrapper = ({ children }: { children: React.ReactNode }) => (
   <MantineProvider>
-    <PreferencesProvider>
-      {children}
-    </PreferencesProvider>
+    <PreferencesProvider>{children}</PreferencesProvider>
   </MantineProvider>
 );
 
-describe('Login', () => {
+describe("Login", () => {
   beforeEach(() => {
     vi.clearAllMocks();
-    mockBackendProbeState.status = 'up';
+    mockBackendProbeState.status = "up";
     mockBackendProbeState.loginDisabled = false;
     mockBackendProbeState.loading = false;
     mockProbe.mockResolvedValue(mockBackendProbeState);
@@ -120,31 +118,31 @@ describe('Login', () => {
     });
   });
 
-  it('should render login form', async () => {
+  it("should render login form", async () => {
     render(
       <TestWrapper>
         <BrowserRouter>
           <Login />
         </BrowserRouter>
-      </TestWrapper>
+      </TestWrapper>,
     );
 
     await waitFor(() => {
       // Check for login form elements - use id since it's more reliable
-      const emailInput = document.getElementById('email');
+      const emailInput = document.getElementById("email");
       expect(emailInput).toBeTruthy();
     });
   });
 
-  it('should redirect authenticated user to home', async () => {
+  it("should redirect authenticated user to home", async () => {
     const mockSession = {
       user: {
-        id: '123',
-        email: 'test@example.com',
-        username: 'testuser',
-        role: 'USER',
+        id: "123",
+        email: "test@example.com",
+        username: "testuser",
+        role: "USER",
       },
-      access_token: 'mock-token',
+      access_token: "mock-token",
       expires_in: 3600,
     };
 
@@ -162,15 +160,15 @@ describe('Login', () => {
         <BrowserRouter>
           <Login />
         </BrowserRouter>
-      </TestWrapper>
+      </TestWrapper>,
     );
 
     await waitFor(() => {
-      expect(mockNavigate).toHaveBeenCalledWith('/', { replace: true });
+      expect(mockNavigate).toHaveBeenCalledWith("/", { replace: true });
     });
   });
 
-  it('should show loading state while auth is loading', () => {
+  it("should show loading state while auth is loading", () => {
     vi.mocked(useAuth).mockReturnValue({
       session: null,
       user: null,
@@ -185,25 +183,25 @@ describe('Login', () => {
         <BrowserRouter>
           <Login />
         </BrowserRouter>
-      </TestWrapper>
+      </TestWrapper>,
     );
 
     // Component shouldn't redirect or show form while loading
     expect(mockNavigate).not.toHaveBeenCalled();
   });
 
-  it('should handle email/password login', async () => {
+  it("should handle email/password login", async () => {
     const user = userEvent.setup();
     const mockUser = {
-      id: '123',
-      email: 'test@example.com',
-      username: 'test@example.com',
-      role: 'USER',
+      id: "123",
+      email: "test@example.com",
+      username: "test@example.com",
+      role: "USER",
     };
 
     const mockSession = {
       user: mockUser,
-      access_token: 'new-token',
+      access_token: "new-token",
       expires_in: 3600,
     };
 
@@ -218,49 +216,55 @@ describe('Login', () => {
         <BrowserRouter>
           <Login />
         </BrowserRouter>
-      </TestWrapper>
+      </TestWrapper>,
     );
 
     // Wait for form to load
-    await waitFor(() => {
-      const emailInput = document.getElementById('email');
-      expect(emailInput).toBeTruthy();
-      const passwordInput = document.getElementById('password');
-      expect(passwordInput).toBeTruthy();
-    }, { timeout: 3000 });
+    await waitFor(
+      () => {
+        const emailInput = document.getElementById("email");
+        expect(emailInput).toBeTruthy();
+        const passwordInput = document.getElementById("password");
+        expect(passwordInput).toBeTruthy();
+      },
+      { timeout: 3000 },
+    );
 
     // Fill in form using getElementById
-    const emailInput = document.getElementById('email') as HTMLInputElement;
-    const passwordInput = document.getElementById('password') as HTMLInputElement;
+    const emailInput = document.getElementById("email") as HTMLInputElement;
+    const passwordInput = document.getElementById("password") as HTMLInputElement;
 
     if (!emailInput || !passwordInput) {
-      throw new Error('Form inputs not found');
+      throw new Error("Form inputs not found");
     }
 
-    await user.type(emailInput, 'test@example.com');
-    await user.type(passwordInput, 'password123');
+    await user.type(emailInput, "test@example.com");
+    await user.type(passwordInput, "password123");
 
     // Submit form - use a more flexible query
     // Look for button with type="submit" in the form
-    const submitButton = await waitFor(() => {
-      const buttons = screen.queryAllByRole('button');
-      const submitBtn = buttons.find(btn => btn.getAttribute('type') === 'submit');
-      if (!submitBtn) {
-        throw new Error('Submit button not found');
-      }
-      return submitBtn;
-    }, { timeout: 5000 });
+    const submitButton = await waitFor(
+      () => {
+        const buttons = screen.queryAllByRole("button");
+        const submitBtn = buttons.find((btn) => btn.getAttribute("type") === "submit");
+        if (!submitBtn) {
+          throw new Error("Submit button not found");
+        }
+        return submitBtn;
+      },
+      { timeout: 5000 },
+    );
     await user.click(submitButton);
 
     await waitFor(() => {
       expect(springAuth.signInWithPassword).toHaveBeenCalledWith({
-        email: 'test@example.com',
-        password: 'password123',
+        email: "test@example.com",
+        password: "password123",
       });
     });
   });
 
-  it('should use actual provider ID for OAuth login (authentik)', async () => {
+  it("should use actual provider ID for OAuth login (authentik)", async () => {
     const user = userEvent.setup();
 
     // Mock provider list with authentik
@@ -268,7 +272,7 @@ describe('Login', () => {
       data: {
         enableLogin: true,
         providerList: {
-          '/oauth2/authorization/authentik': 'Authentik',
+          "/oauth2/authorization/authentik": "Authentik",
         },
       },
     });
@@ -282,28 +286,31 @@ describe('Login', () => {
         <BrowserRouter>
           <Login />
         </BrowserRouter>
-      </TestWrapper>
+      </TestWrapper>,
     );
 
     // Wait for OAuth button to appear
-    await waitFor(() => {
-      const button = screen.queryByText('Authentik');
-      expect(button).toBeTruthy();
-    }, { timeout: 3000 });
+    await waitFor(
+      () => {
+        const button = screen.queryByText("Authentik");
+        expect(button).toBeTruthy();
+      },
+      { timeout: 3000 },
+    );
 
-    const oauthButton = screen.getByText('Authentik');
+    const oauthButton = screen.getByText("Authentik");
     await user.click(oauthButton);
 
     await waitFor(() => {
       // Should use full path directly, NOT map to 'oidc'
       expect(springAuth.signInWithOAuth).toHaveBeenCalledWith({
-        provider: '/oauth2/authorization/authentik',
-        options: { redirectTo: '/auth/callback' }
+        provider: "/oauth2/authorization/authentik",
+        options: { redirectTo: "/auth/callback" },
       });
     });
   });
 
-  it('should use actual provider ID for OAuth login (custom provider)', async () => {
+  it("should use actual provider ID for OAuth login (custom provider)", async () => {
     const user = userEvent.setup();
 
     // Mock provider list with custom provider 'mycompany'
@@ -311,7 +318,7 @@ describe('Login', () => {
       data: {
         enableLogin: true,
         providerList: {
-          '/oauth2/authorization/mycompany': 'My Company SSO',
+          "/oauth2/authorization/mycompany": "My Company SSO",
         },
       },
     });
@@ -325,29 +332,32 @@ describe('Login', () => {
         <BrowserRouter>
           <Login />
         </BrowserRouter>
-      </TestWrapper>
+      </TestWrapper>,
     );
 
     // Wait for OAuth button to appear (will show 'Mycompany' as label)
-    await waitFor(() => {
-      const button = screen.queryByText('Mycompany');
-      expect(button).toBeTruthy();
-    }, { timeout: 3000 });
+    await waitFor(
+      () => {
+        const button = screen.queryByText("Mycompany");
+        expect(button).toBeTruthy();
+      },
+      { timeout: 3000 },
+    );
 
-    const oauthButton = screen.getByText('Mycompany');
+    const oauthButton = screen.getByText("Mycompany");
     await user.click(oauthButton);
 
     await waitFor(() => {
       // Should use full path directly - this is the critical fix
       // Previously it would map unknown providers to 'oidc'
       expect(springAuth.signInWithOAuth).toHaveBeenCalledWith({
-        provider: '/oauth2/authorization/mycompany',
-        options: { redirectTo: '/auth/callback' }
+        provider: "/oauth2/authorization/mycompany",
+        options: { redirectTo: "/auth/callback" },
       });
     });
   });
 
-  it('should use oidc provider ID when explicitly configured', async () => {
+  it("should use oidc provider ID when explicitly configured", async () => {
     const user = userEvent.setup();
 
     // Mock provider list with 'oidc'
@@ -355,7 +365,7 @@ describe('Login', () => {
       data: {
         enableLogin: true,
         providerList: {
-          '/oauth2/authorization/oidc': 'OIDC',
+          "/oauth2/authorization/oidc": "OIDC",
         },
       },
     });
@@ -369,30 +379,33 @@ describe('Login', () => {
         <BrowserRouter>
           <Login />
         </BrowserRouter>
-      </TestWrapper>
+      </TestWrapper>,
     );
 
     // Wait for OAuth button to appear
-    await waitFor(() => {
-      const button = screen.queryByText('OIDC');
-      expect(button).toBeTruthy();
-    }, { timeout: 3000 });
+    await waitFor(
+      () => {
+        const button = screen.queryByText("OIDC");
+        expect(button).toBeTruthy();
+      },
+      { timeout: 3000 },
+    );
 
-    const oauthButton = screen.getByText('OIDC');
+    const oauthButton = screen.getByText("OIDC");
     await user.click(oauthButton);
 
     await waitFor(() => {
       // Should use full path when explicitly configured
       expect(springAuth.signInWithOAuth).toHaveBeenCalledWith({
-        provider: '/oauth2/authorization/oidc',
-        options: { redirectTo: '/auth/callback' }
+        provider: "/oauth2/authorization/oidc",
+        options: { redirectTo: "/auth/callback" },
       });
     });
   });
 
-  it('should show error on failed login', async () => {
+  it("should show error on failed login", async () => {
     const user = userEvent.setup();
-    const errorMessage = 'Invalid credentials';
+    const errorMessage = "Invalid credentials";
 
     vi.mocked(springAuth.signInWithPassword).mockResolvedValueOnce({
       user: null,
@@ -405,30 +418,36 @@ describe('Login', () => {
         <BrowserRouter>
           <Login />
         </BrowserRouter>
-      </TestWrapper>
+      </TestWrapper>,
     );
 
-    await waitFor(() => {
-      const emailInput = document.getElementById('email');
-      const passwordInput = document.getElementById('password');
-      expect(emailInput).toBeTruthy();
-      expect(passwordInput).toBeTruthy();
-    }, { timeout: 3000 });
+    await waitFor(
+      () => {
+        const emailInput = document.getElementById("email");
+        const passwordInput = document.getElementById("password");
+        expect(emailInput).toBeTruthy();
+        expect(passwordInput).toBeTruthy();
+      },
+      { timeout: 3000 },
+    );
 
-    const emailInput = document.getElementById('email') as HTMLInputElement;
-    const passwordInput = document.getElementById('password') as HTMLInputElement;
+    const emailInput = document.getElementById("email") as HTMLInputElement;
+    const passwordInput = document.getElementById("password") as HTMLInputElement;
 
-    await user.type(emailInput, 'wrong@example.com');
-    await user.type(passwordInput, 'wrongpassword');
+    await user.type(emailInput, "wrong@example.com");
+    await user.type(passwordInput, "wrongpassword");
 
-    const submitButton = await waitFor(() => {
-      const buttons = screen.queryAllByRole('button');
-      const submitBtn = buttons.find(btn => btn.getAttribute('type') === 'submit');
-      if (!submitBtn) {
-        throw new Error('Submit button not found');
-      }
-      return submitBtn;
-    }, { timeout: 5000 });
+    const submitButton = await waitFor(
+      () => {
+        const buttons = screen.queryAllByRole("button");
+        const submitBtn = buttons.find((btn) => btn.getAttribute("type") === "submit");
+        if (!submitBtn) {
+          throw new Error("Submit button not found");
+        }
+        return submitBtn;
+      },
+      { timeout: 5000 },
+    );
     await user.click(submitButton);
 
     await waitFor(() => {
@@ -436,28 +455,34 @@ describe('Login', () => {
     });
   });
 
-  it('should validate empty email and password', async () => {
+  it("should validate empty email and password", async () => {
     render(
       <TestWrapper>
         <BrowserRouter>
           <Login />
         </BrowserRouter>
-      </TestWrapper>
+      </TestWrapper>,
     );
 
-    await waitFor(() => {
-      expect(document.getElementById('email')).toBeTruthy();
-    }, { timeout: 3000 });
+    await waitFor(
+      () => {
+        expect(document.getElementById("email")).toBeTruthy();
+      },
+      { timeout: 3000 },
+    );
 
     // Find the submit button
-    const submitButton = await waitFor(() => {
-      const buttons = screen.queryAllByRole('button');
-      const submitBtn = buttons.find(btn => btn.getAttribute('type') === 'submit');
-      if (!submitBtn) {
-        throw new Error('Submit button not found');
-      }
-      return submitBtn;
-    }, { timeout: 5000 });
+    const submitButton = await waitFor(
+      () => {
+        const buttons = screen.queryAllByRole("button");
+        const submitBtn = buttons.find((btn) => btn.getAttribute("type") === "submit");
+        if (!submitBtn) {
+          throw new Error("Submit button not found");
+        }
+        return submitBtn;
+      },
+      { timeout: 5000 },
+    );
 
     // Button should be disabled when email/password are empty
     expect(submitButton).toBeDisabled();
@@ -466,50 +491,50 @@ describe('Login', () => {
     expect(springAuth.signInWithPassword).not.toHaveBeenCalled();
   });
 
-  it('should display session expired message from URL param', () => {
+  it("should display session expired message from URL param", () => {
     render(
       <TestWrapper>
-        <MemoryRouter initialEntries={['/login?expired=true']}>
+        <MemoryRouter initialEntries={["/login?expired=true"]}>
           <Login />
         </MemoryRouter>
-      </TestWrapper>
+      </TestWrapper>,
     );
 
     expect(screen.getByText(/session.*expired/i)).toBeInTheDocument();
   });
 
-  it('should display account created success message', () => {
+  it("should display account created success message", () => {
     render(
       <TestWrapper>
-        <MemoryRouter initialEntries={['/login?messageType=accountCreated']}>
+        <MemoryRouter initialEntries={["/login?messageType=accountCreated"]}>
           <Login />
         </MemoryRouter>
-      </TestWrapper>
+      </TestWrapper>,
     );
 
     expect(screen.getByText(/account created/i)).toBeInTheDocument();
   });
 
-  it('should prefill email from query param', () => {
-    const email = 'prefilled@example.com';
+  it("should prefill email from query param", () => {
+    const email = "prefilled@example.com";
 
     render(
       <TestWrapper>
         <MemoryRouter initialEntries={[`/login?email=${email}`]}>
           <Login />
         </MemoryRouter>
-      </TestWrapper>
+      </TestWrapper>,
     );
 
     return waitFor(() => {
-      const emailInput = document.getElementById('email') as HTMLInputElement;
+      const emailInput = document.getElementById("email") as HTMLInputElement;
       expect(emailInput.value).toBe(email);
     });
   });
 
-  it('should redirect to home when login disabled', async () => {
+  it("should redirect to home when login disabled", async () => {
     mockBackendProbeState.loginDisabled = true;
-    mockProbe.mockResolvedValueOnce({ status: 'up', loginDisabled: true, loading: false });
+    mockProbe.mockResolvedValueOnce({ status: "up", loginDisabled: true, loading: false });
     vi.mocked(apiClient.get).mockResolvedValueOnce({
       data: {
         enableLogin: false,
@@ -522,20 +547,20 @@ describe('Login', () => {
         <BrowserRouter>
           <Login />
         </BrowserRouter>
-      </TestWrapper>
+      </TestWrapper>,
     );
 
     await waitFor(() => {
-      expect(mockNavigate).toHaveBeenCalledWith('/', { replace: true });
+      expect(mockNavigate).toHaveBeenCalledWith("/", { replace: true });
     });
   });
 
-  it('should handle OAuth provider click', async () => {
+  it("should handle OAuth provider click", async () => {
     vi.mocked(apiClient.get).mockResolvedValueOnce({
       data: {
         enableLogin: true,
         providerList: {
-          '/oauth2/authorization/github': 'GitHub',
+          "/oauth2/authorization/github": "GitHub",
         },
       },
     });
@@ -549,7 +574,7 @@ describe('Login', () => {
         <BrowserRouter>
           <Login />
         </BrowserRouter>
-      </TestWrapper>
+      </TestWrapper>,
     );
 
     await waitFor(() => {
@@ -564,7 +589,7 @@ describe('Login', () => {
     expect(springAuth.signInWithOAuth).toBeDefined();
   });
 
-  it('should show email form by default when no SSO providers', async () => {
+  it("should show email form by default when no SSO providers", async () => {
     vi.mocked(apiClient.get).mockResolvedValueOnce({
       data: {
         enableLogin: true,
@@ -577,16 +602,16 @@ describe('Login', () => {
         <BrowserRouter>
           <Login />
         </BrowserRouter>
-      </TestWrapper>
+      </TestWrapper>,
     );
 
     await waitFor(() => {
-      expect(document.getElementById('email')).toBeInTheDocument();
-      expect(document.getElementById('password')).toBeInTheDocument();
+      expect(document.getElementById("email")).toBeInTheDocument();
+      expect(document.getElementById("password")).toBeInTheDocument();
     });
   });
 
-  it('should disable submit button while signing in', async () => {
+  it("should disable submit button while signing in", async () => {
     const user = userEvent.setup();
 
     vi.mocked(springAuth.signInWithPassword).mockImplementationOnce(
@@ -597,11 +622,11 @@ describe('Login', () => {
               resolve({
                 user: null,
                 session: null,
-                error: { message: 'Error' },
+                error: { message: "Error" },
               }),
-            100
-          )
-        )
+            100,
+          ),
+        ),
     );
 
     render(
@@ -609,30 +634,36 @@ describe('Login', () => {
         <BrowserRouter>
           <Login />
         </BrowserRouter>
-      </TestWrapper>
+      </TestWrapper>,
     );
 
-    await waitFor(() => {
-      const emailInput = document.getElementById('email');
-      const passwordInput = document.getElementById('password');
-      expect(emailInput).toBeTruthy();
-      expect(passwordInput).toBeTruthy();
-    }, { timeout: 3000 });
+    await waitFor(
+      () => {
+        const emailInput = document.getElementById("email");
+        const passwordInput = document.getElementById("password");
+        expect(emailInput).toBeTruthy();
+        expect(passwordInput).toBeTruthy();
+      },
+      { timeout: 3000 },
+    );
 
-    const emailInput = document.getElementById('email') as HTMLInputElement;
-    const passwordInput = document.getElementById('password') as HTMLInputElement;
+    const emailInput = document.getElementById("email") as HTMLInputElement;
+    const passwordInput = document.getElementById("password") as HTMLInputElement;
 
-    await user.type(emailInput, 'test@example.com');
-    await user.type(passwordInput, 'password123');
+    await user.type(emailInput, "test@example.com");
+    await user.type(passwordInput, "password123");
 
-    const submitButton = await waitFor(() => {
-      const buttons = screen.queryAllByRole('button');
-      const submitBtn = buttons.find(btn => btn.getAttribute('type') === 'submit');
-      if (!submitBtn) {
-        throw new Error('Submit button not found');
-      }
-      return submitBtn;
-    }, { timeout: 5000 });
+    const submitButton = await waitFor(
+      () => {
+        const buttons = screen.queryAllByRole("button");
+        const submitBtn = buttons.find((btn) => btn.getAttribute("type") === "submit");
+        if (!submitBtn) {
+          throw new Error("Submit button not found");
+        }
+        return submitBtn;
+      },
+      { timeout: 5000 },
+    );
     await user.click(submitButton);
 
     // Button should be disabled while signing in
diff --git a/frontend/src/proprietary/routes/Login.tsx b/frontend/src/proprietary/routes/Login.tsx
index cd0461d1f1..088440cfde 100644
--- a/frontend/src/proprietary/routes/Login.tsx
+++ b/frontend/src/proprietary/routes/Login.tsx
@@ -1,25 +1,25 @@
-import { useEffect, useMemo, useRef, useState } from 'react';
-import { Navigate, useLocation, useNavigate, useSearchParams } from 'react-router-dom';
-import { Text, Stack, Alert } from '@mantine/core';
-import { springAuth } from '@app/auth/springAuthClient';
-import { useAuth } from '@app/auth/UseSession';
-import { useAppConfig } from '@app/contexts/AppConfigContext';
-import { useTranslation } from 'react-i18next';
-import { useDocumentMeta } from '@app/hooks/useDocumentMeta';
-import AuthLayout from '@app/routes/authShared/AuthLayout';
-import { useBackendProbe } from '@app/hooks/useBackendProbe';
-import apiClient from '@app/services/apiClient';
-import { BASE_PATH } from '@app/constants/app';
-import { type OAuthProvider } from '@app/auth/oauthTypes';
-import { updateSupportedLanguages } from '@app/i18n';
+import { useEffect, useMemo, useRef, useState } from "react";
+import { Navigate, useLocation, useNavigate, useSearchParams } from "react-router-dom";
+import { Text, Stack, Alert } from "@mantine/core";
+import { springAuth } from "@app/auth/springAuthClient";
+import { useAuth } from "@app/auth/UseSession";
+import { useAppConfig } from "@app/contexts/AppConfigContext";
+import { useTranslation } from "react-i18next";
+import { useDocumentMeta } from "@app/hooks/useDocumentMeta";
+import AuthLayout from "@app/routes/authShared/AuthLayout";
+import { useBackendProbe } from "@app/hooks/useBackendProbe";
+import apiClient from "@app/services/apiClient";
+import { BASE_PATH } from "@app/constants/app";
+import { type OAuthProvider } from "@app/auth/oauthTypes";
+import { updateSupportedLanguages } from "@app/i18n";
 
 // Import login components
-import LoginHeader from '@app/routes/login/LoginHeader';
-import ErrorMessage from '@app/routes/login/ErrorMessage';
-import EmailPasswordForm from '@app/routes/login/EmailPasswordForm';
-import OAuthButtons, { DEBUG_SHOW_ALL_PROVIDERS, oauthProviderConfig } from '@app/routes/login/OAuthButtons';
-import DividerWithText from '@app/components/shared/DividerWithText';
-import LoggedInState from '@app/routes/login/LoggedInState';
+import LoginHeader from "@app/routes/login/LoginHeader";
+import ErrorMessage from "@app/routes/login/ErrorMessage";
+import EmailPasswordForm from "@app/routes/login/EmailPasswordForm";
+import OAuthButtons, { DEBUG_SHOW_ALL_PROVIDERS, oauthProviderConfig } from "@app/routes/login/OAuthButtons";
+import DividerWithText from "@app/components/shared/DividerWithText";
+import LoggedInState from "@app/routes/login/LoggedInState";
 
 export default function Login() {
   const navigate = useNavigate();
@@ -32,14 +32,14 @@ export default function Login() {
   const [error, setError] = useState<string | null>(null);
   const [successMessage, setSuccessMessage] = useState<string | null>(null);
   const [showEmailForm, setShowEmailForm] = useState(false);
-  const [email, setEmail] = useState(() => searchParams.get('email') ?? '');
-  const [password, setPassword] = useState('');
-  const [mfaCode, setMfaCode] = useState('');
+  const [email, setEmail] = useState(() => searchParams.get("email") ?? "");
+  const [password, setPassword] = useState("");
+  const [mfaCode, setMfaCode] = useState("");
   const [requiresMfa, setRequiresMfa] = useState(false);
   const [enabledProviders, setEnabledProviders] = useState<OAuthProvider[]>([]);
   const [hasSSOProviders, setHasSSOProviders] = useState(false);
   const [_enableLogin, setEnableLogin] = useState<boolean | null>(null);
-  const [loginMethod, setLoginMethod] = useState<string>('all');
+  const [loginMethod, setLoginMethod] = useState<string>("all");
   const [ssoAutoLogin, setSsoAutoLogin] = useState(false);
   const backendProbe = useBackendProbe();
   const [isFirstTimeSetup, setIsFirstTimeSetup] = useState(false);
@@ -47,18 +47,18 @@ export default function Login() {
   const loginDisabled = backendProbe.loginDisabled === true || _enableLogin === false;
   const autoLoginAttempted = useRef(false);
   const autoLoginErrorRecorded = useRef(false);
-  const isUserPassAllowed = loginMethod === 'all' || loginMethod === 'normal';
-  const isSsoOnlyMode = loginMethod !== 'all' && loginMethod !== 'normal';
+  const isUserPassAllowed = loginMethod === "all" || loginMethod === "normal";
+  const isSsoOnlyMode = loginMethod !== "all" && loginMethod !== "normal";
   const isSingleSsoOnly = !isUserPassAllowed && enabledProviders.length === 1;
 
-  const AUTO_LOGIN_ATTEMPTS_KEY = 'stirling_sso_auto_login_attempts';
-  const AUTO_LOGIN_ERRORS_KEY = 'stirling_sso_auto_login_errors';
-  const AUTO_LOGIN_LOGOUT_KEY = 'stirling_sso_auto_login_logged_out';
+  const AUTO_LOGIN_ATTEMPTS_KEY = "stirling_sso_auto_login_attempts";
+  const AUTO_LOGIN_ERRORS_KEY = "stirling_sso_auto_login_errors";
+  const AUTO_LOGIN_LOGOUT_KEY = "stirling_sso_auto_login_logged_out";
   const MAX_AUTO_LOGIN_ATTEMPTS = 2;
   const MAX_AUTO_LOGIN_ERRORS = 1;
 
   const readSessionNumber = (key: string) => {
-    if (typeof window === 'undefined') {
+    if (typeof window === "undefined") {
       return 0;
     }
     const raw = window.sessionStorage.getItem(key);
@@ -67,21 +67,21 @@ export default function Login() {
   };
 
   const writeSessionNumber = (key: string, value: number) => {
-    if (typeof window === 'undefined') {
+    if (typeof window === "undefined") {
       return;
     }
     window.sessionStorage.setItem(key, String(value));
   };
 
   const hasLogoutBlock = () => {
-    if (typeof window === 'undefined') {
+    if (typeof window === "undefined") {
       return false;
     }
-    return window.sessionStorage.getItem(AUTO_LOGIN_LOGOUT_KEY) === '1';
+    return window.sessionStorage.getItem(AUTO_LOGIN_LOGOUT_KEY) === "1";
   };
 
   const clearLogoutBlock = () => {
-    if (typeof window === 'undefined') {
+    if (typeof window === "undefined") {
       return;
     }
     window.sessionStorage.removeItem(AUTO_LOGIN_LOGOUT_KEY);
@@ -102,7 +102,15 @@ export default function Login() {
     if (!searchParams) {
       return null;
     }
-    const errorParamKeys = ['error', 'error_description', 'error_code', 'sso_error', 'oauth_error', 'saml_error', 'login_error'];
+    const errorParamKeys = [
+      "error",
+      "error_description",
+      "error_code",
+      "sso_error",
+      "oauth_error",
+      "saml_error",
+      "login_error",
+    ];
     for (const key of errorParamKeys) {
       const value = searchParams.get(key);
       if (value) {
@@ -110,8 +118,8 @@ export default function Login() {
       }
     }
     for (const [key, value] of searchParams.entries()) {
-      if (key.toLowerCase().includes('error')) {
-        return value || 'Single sign-on failed. Please try again.';
+      if (key.toLowerCase().includes("error")) {
+        return value || "Single sign-on failed. Please try again.";
       }
     }
     return null;
@@ -121,15 +129,15 @@ export default function Login() {
 
   // Periodically probe while backend isn't up so the screen can auto-advance when it comes online
   useEffect(() => {
-    if (backendProbe.status === 'up' || backendProbe.loginDisabled) {
+    if (backendProbe.status === "up" || backendProbe.loginDisabled) {
       return;
     }
     const tick = async () => {
       const result = await backendProbe.probe();
-      if (result.status === 'up') {
+      if (result.status === "up") {
         await refetch();
         if (loginDisabled) {
-          navigate('/', { replace: true });
+          navigate("/", { replace: true });
         }
       }
     };
@@ -143,8 +151,8 @@ export default function Login() {
   useEffect(() => {
     if (!loading && session) {
       const returnPath = (location.state as { from?: { pathname?: string } } | null)?.from?.pathname;
-      console.debug('[Login] User already authenticated, redirecting to home', { returnPath });
-      navigate(returnPath || '/', { replace: true });
+      console.debug("[Login] User already authenticated, redirecting to home", { returnPath });
+      navigate(returnPath || "/", { replace: true });
     }
   }, [session, loading, navigate, location.state]);
 
@@ -152,13 +160,13 @@ export default function Login() {
   useEffect(() => {
     if (backendProbe.loginDisabled) {
       // Slight delay to allow state updates before redirecting
-      const id = setTimeout(() => navigate('/', { replace: true }), 0);
+      const id = setTimeout(() => navigate("/", { replace: true }), 0);
       return () => clearTimeout(id);
     }
   }, [backendProbe.loginDisabled, navigate]);
 
   useEffect(() => {
-    if (backendProbe.status === 'up') {
+    if (backendProbe.status === "up") {
       void refetch();
     }
   }, [backendProbe.status, refetch]);
@@ -167,13 +175,13 @@ export default function Login() {
   useEffect(() => {
     const fetchProviders = async () => {
       try {
-        const response = await apiClient.get('/api/v1/proprietary/ui-data/login');
+        const response = await apiClient.get("/api/v1/proprietary/ui-data/login");
         const data = response.data;
 
         // Check if login is disabled - if so, redirect to home
         if (data.enableLogin === false) {
-          console.debug('[Login] Login disabled, redirecting to home');
-          navigate('/');
+          console.debug("[Login] Login disabled, redirecting to home");
+          navigate("/");
           return;
         }
 
@@ -195,18 +203,18 @@ export default function Login() {
         const providerPaths = Object.keys(data.providerList || {});
 
         setEnabledProviders(providerPaths);
-        setLoginMethod(data.loginMethod || 'all');
+        setLoginMethod(data.loginMethod || "all");
       } catch (err) {
-        console.error('[Login] Failed to fetch enabled providers:', err);
+        console.error("[Login] Failed to fetch enabled providers:", err);
         // Set default values on error to ensure UI remains functional
         // Login method defaults to 'all' to show both SSO and email/password options
         setEnableLogin(true);
-        setLoginMethod('all');
+        setLoginMethod("all");
         setEnabledProviders([]);
       }
     };
 
-    if (backendProbe.status === 'up' || backendProbe.loginDisabled) {
+    if (backendProbe.status === "up" || backendProbe.loginDisabled) {
       fetchProviders();
     }
   }, [navigate, backendProbe.status, backendProbe.loginDisabled]);
@@ -214,13 +222,11 @@ export default function Login() {
   // Update hasSSOProviders and showEmailForm when enabledProviders or loginMethod changes
   useEffect(() => {
     // In debug mode, check if any providers exist in the config
-    const hasProviders = DEBUG_SHOW_ALL_PROVIDERS
-      ? Object.keys(oauthProviderConfig).length > 0
-      : enabledProviders.length > 0;
+    const hasProviders = DEBUG_SHOW_ALL_PROVIDERS ? Object.keys(oauthProviderConfig).length > 0 : enabledProviders.length > 0;
     setHasSSOProviders(hasProviders);
 
     // Check if username/password authentication is allowed
-    const isUserPassAllowed = loginMethod === 'all' || loginMethod === 'normal';
+    const isUserPassAllowed = loginMethod === "all" || loginMethod === "normal";
 
     // Show email form if no SSO providers exist AND username/password is allowed
     if (!hasProviders && isUserPassAllowed) {
@@ -243,16 +249,19 @@ export default function Login() {
       // The backend returns the correct registration ID (e.g., 'authentik', 'oidc', 'keycloak')
       const { error } = await springAuth.signInWithOAuth({
         provider: provider,
-        options: { redirectTo: `${BASE_PATH}/auth/callback` }
+        options: { redirectTo: `${BASE_PATH}/auth/callback` },
       });
 
       if (error) {
         console.error(`[Login] ${provider} error:`, error);
-        setError(t('login.failedToSignIn', { provider, message: error.message }) || `Failed to sign in with ${provider}`);
+        setError(t("login.failedToSignIn", { provider, message: error.message }) || `Failed to sign in with ${provider}`);
       }
     } catch (err) {
       console.error(`[Login] Unexpected error:`, err);
-      setError(t('login.unexpectedError', { message: err instanceof Error ? err.message : 'Unknown error' }) || 'An unexpected error occurred');
+      setError(
+        t("login.unexpectedError", { message: err instanceof Error ? err.message : "Unknown error" }) ||
+          "An unexpected error occurred",
+      );
     } finally {
       setIsSigningIn(false);
     }
@@ -270,7 +279,7 @@ export default function Login() {
     const blockedByAttempts = attempts >= MAX_AUTO_LOGIN_ATTEMPTS;
     const blockedByLogout = hasLogoutBlock();
 
-    if (!ssoAutoLogin || loginDisabled || loading || session || backendProbe.status !== 'up') {
+    if (!ssoAutoLogin || loginDisabled || loading || session || backendProbe.status !== "up") {
       return;
     }
 
@@ -304,29 +313,31 @@ export default function Login() {
   // Handle query params (email prefill, success messages, and session expiry)
   useEffect(() => {
     try {
-      const emailFromQuery = searchParams.get('email');
+      const emailFromQuery = searchParams.get("email");
       if (emailFromQuery) {
         setEmail(emailFromQuery);
       }
 
       // Check if session expired (401 redirect)
-      const expired = searchParams.get('expired');
-      if (expired === 'true') {
-        setError(t('login.sessionExpired', 'Your session has expired. Please sign in again.'));
+      const expired = searchParams.get("expired");
+      if (expired === "true") {
+        setError(t("login.sessionExpired", "Your session has expired. Please sign in again."));
       }
 
-      const messageType = searchParams.get('messageType')
+      const messageType = searchParams.get("messageType");
       if (messageType) {
         switch (messageType) {
-          case 'accountCreated':
-            setSuccessMessage(t('login.accountCreatedSuccess', 'Account created successfully! You can now sign in.'))
-            break
-          case 'passwordChanged':
-            setSuccessMessage(t('login.passwordChangedSuccess', 'Password changed successfully! Please sign in with your new password.'))
-            break
-          case 'credsUpdated':
-            setSuccessMessage(t('login.credentialsUpdated', 'Your credentials have been updated. Please sign in again.'))
-            break
+          case "accountCreated":
+            setSuccessMessage(t("login.accountCreatedSuccess", "Account created successfully! You can now sign in."));
+            break;
+          case "passwordChanged":
+            setSuccessMessage(
+              t("login.passwordChangedSuccess", "Password changed successfully! Please sign in with your new password."),
+            );
+            break;
+          case "credsUpdated":
+            setSuccessMessage(t("login.credentialsUpdated", "Your credentials have been updated. Please sign in again."));
+            break;
         }
       }
 
@@ -349,12 +360,12 @@ export default function Login() {
 
   // Set document meta
   useDocumentMeta({
-    title: `${t('login.title', 'Sign in')} - Stirling PDF`,
-    description: t('app.description', 'The Free Adobe Acrobat alternative (10M+ Downloads)'),
-    ogTitle: `${t('login.title', 'Sign in')} - Stirling PDF`,
-    ogDescription: t('app.description', 'The Free Adobe Acrobat alternative (10M+ Downloads)'),
+    title: `${t("login.title", "Sign in")} - Stirling PDF`,
+    description: t("app.description", "The Free Adobe Acrobat alternative (10M+ Downloads)"),
+    ogTitle: `${t("login.title", "Sign in")} - Stirling PDF`,
+    ogDescription: t("app.description", "The Free Adobe Acrobat alternative (10M+ Downloads)"),
     ogImage: `${baseUrl}/og_images/home.png`,
-    ogUrl: `${window.location.origin}${window.location.pathname}`
+    ogUrl: `${window.location.origin}${window.location.pathname}`,
   });
 
   // If login is disabled, short-circuit to home (avoids rendering the form after retry)
@@ -368,13 +379,13 @@ export default function Login() {
   }
 
   // If backend isn't ready yet, show a lightweight status screen instead of the form
-  if (backendProbe.status !== 'up' && !loginDisabled) {
-    const backendTitle = t('backendStartup.notFoundTitle', 'Backend not found');
+  if (backendProbe.status !== "up" && !loginDisabled) {
+    const backendTitle = t("backendStartup.notFoundTitle", "Backend not found");
     const handleRetry = async () => {
       const result = await backendProbe.probe();
-      if (result.status === 'up') {
+      if (result.status === "up") {
         await refetch();
-        navigate('/', { replace: true });
+        navigate("/", { replace: true });
       }
     };
     return (
@@ -383,23 +394,21 @@ export default function Login() {
         <div
           className="auth-section"
           style={{
-            padding: '1.5rem',
-            marginTop: '1rem',
-            borderRadius: '0.75rem',
-            backgroundColor: 'rgba(37, 99, 235, 0.08)',
-            border: '1px solid rgba(37, 99, 235, 0.2)',
+            padding: "1.5rem",
+            marginTop: "1rem",
+            borderRadius: "0.75rem",
+            backgroundColor: "rgba(37, 99, 235, 0.08)",
+            border: "1px solid rgba(37, 99, 235, 0.2)",
           }}
         >
-          <p style={{ margin: '0 0 0.75rem 0', color: 'rgba(15, 23, 42, 0.8)' }}>
-            {t('backendStartup.unreachable')}
-          </p>
+          <p style={{ margin: "0 0 0.75rem 0", color: "rgba(15, 23, 42, 0.8)" }}>{t("backendStartup.unreachable")}</p>
           <button
             type="button"
             onClick={handleRetry}
             className="auth-cta-button px-4 py-[0.75rem] rounded-[0.625rem] text-base font-semibold mt-5 border-0 cursor-pointer"
-            style={{ width: 'fit-content' }}
+            style={{ width: "fit-content" }}
           >
-            {t('backendStartup.retry', 'Retry')}
+            {t("backendStartup.retry", "Retry")}
           </button>
         </div>
       </AuthLayout>
@@ -408,12 +417,12 @@ export default function Login() {
 
   const signInWithEmail = async () => {
     if (!email || !password) {
-      setError(t('login.pleaseEnterBoth') || 'Please enter both email and password');
+      setError(t("login.pleaseEnterBoth") || "Please enter both email and password");
       return;
     }
 
     if (requiresMfa && !mfaCode.trim()) {
-      setError(t('login.mfaRequired', 'Two-factor code required'));
+      setError(t("login.mfaRequired", "Two-factor code required"));
       return;
     }
 
@@ -422,7 +431,7 @@ export default function Login() {
       setError(null);
       clearLogoutBlock();
 
-      console.log('[Login] Signing in with email:', email);
+      console.log("[Login] Signing in with email:", email);
 
       const { user, session, error } = await springAuth.signInWithPassword({
         email: email.trim(),
@@ -431,22 +440,25 @@ export default function Login() {
       });
 
       if (error) {
-        console.error('[Login] Email sign in error:', error);
+        console.error("[Login] Email sign in error:", error);
         setError(error.message);
-        if (error.mfaRequired || error.code === 'invalid_mfa_code') {
+        if (error.mfaRequired || error.code === "invalid_mfa_code") {
           setRequiresMfa(true);
         }
       } else if (user && session) {
-        console.log('[Login] Email sign in successful');
+        console.log("[Login] Email sign in successful");
         clearLogoutBlock();
         setRequiresMfa(false);
-        setMfaCode('');
+        setMfaCode("");
         // Auth state will update automatically and Landing will redirect to home
         // No need to navigate manually here
       }
     } catch (err) {
-      console.error('[Login] Unexpected error:', err);
-      setError(t('login.unexpectedError', { message: err instanceof Error ? err.message : 'Unknown error' }) || 'An unexpected error occurred');
+      console.error("[Login] Unexpected error:", err);
+      setError(
+        t("login.unexpectedError", { message: err instanceof Error ? err.message : "Unknown error" }) ||
+          "An unexpected error occurred",
+      );
     } finally {
       setIsSigningIn(false);
     }
@@ -459,24 +471,21 @@ export default function Login() {
 
   return (
     <AuthLayout>
-      <LoginHeader
-        title={isSingleSsoOnly ? '' : (t('login.login') || 'Sign in')}
-        centerOnly={isSingleSsoOnly}
-      />
+      <LoginHeader title={isSingleSsoOnly ? "" : t("login.login") || "Sign in"} centerOnly={isSingleSsoOnly} />
 
       {/* Success message */}
       {successMessage && (
-        <div style={{
-          padding: '1rem',
-          marginBottom: '1rem',
-          backgroundColor: 'rgba(34, 197, 94, 0.1)',
-          border: '1px solid rgba(34, 197, 94, 0.3)',
-          borderRadius: '0.5rem',
-          color: '#16a34a'
-        }}>
-          <p style={{ margin: 0, fontSize: '0.875rem', textAlign: 'center' }}>
-            {successMessage}
-          </p>
+        <div
+          style={{
+            padding: "1rem",
+            marginBottom: "1rem",
+            backgroundColor: "rgba(34, 197, 94, 0.1)",
+            border: "1px solid rgba(34, 197, 94, 0.3)",
+            borderRadius: "0.5rem",
+            color: "#16a34a",
+          }}
+        >
+          <p style={{ margin: 0, fontSize: "0.875rem", textAlign: "center" }}>{successMessage}</p>
         </div>
       )}
 
@@ -488,14 +497,14 @@ export default function Login() {
         isSubmitting={isSigningIn}
         layout="vertical"
         enabledProviders={enabledProviders}
-        ctaPrefix={isSsoOnlyMode ? t('login.signInWith', 'Sign in with') : undefined}
+        ctaPrefix={isSsoOnlyMode ? t("login.signInWith", "Sign in with") : undefined}
         styleVariant="light"
         useNewStyle={isSsoOnlyMode}
       />
 
       {/* Divider between OAuth and Email - only show if SSO is available and username/password is allowed */}
       {hasSSOProviders && isUserPassAllowed && (
-        <DividerWithText text={t('signup.or', 'or')} respondsToDarkMode={false} opacity={0.4} />
+        <DividerWithText text={t("signup.or", "or")} respondsToDarkMode={false} opacity={0.4} />
       )}
 
       {/* Sign in with email button - only show if SSO providers exist and username/password is allowed */}
@@ -507,14 +516,14 @@ export default function Login() {
             disabled={isSigningIn}
             className="w-full px-4 py-[0.75rem] rounded-[0.625rem] text-base font-semibold mb-2 cursor-pointer border-0 disabled:opacity-50 disabled:cursor-not-allowed auth-cta-button"
           >
-            {t('login.useEmailInstead', 'Login with email')}
+            {t("login.useEmailInstead", "Login with email")}
           </button>
         </div>
       )}
 
       {/* Email form - show by default if no SSO, or when button clicked, but ONLY if username/password is allowed */}
       {showEmailForm && isUserPassAllowed && (
-        <div style={{ marginTop: hasSSOProviders ? '1rem' : '0' }}>
+        <div style={{ marginTop: hasSSOProviders ? "1rem" : "0" }}>
           <EmailPasswordForm
             email={email}
             password={password}
@@ -526,36 +535,36 @@ export default function Login() {
             requiresMfa={requiresMfa}
             onSubmit={signInWithEmail}
             isSubmitting={isSigningIn}
-            submitButtonText={isSigningIn ? (t('login.loggingIn') || 'Signing in...') : (t('login.login') || 'Sign in')}
+            submitButtonText={isSigningIn ? t("login.loggingIn") || "Signing in..." : t("login.login") || "Sign in"}
           />
         </div>
       )}
 
       {/* Help section - only show on first-time setup with default credentials and username/password auth allowed */}
       {isFirstTimeSetup && showDefaultCredentials && isUserPassAllowed && (
-        <Alert
-          color="blue"
-          variant="light"
-          radius="md"
-          mt="xl"
-        >
+        <Alert color="blue" variant="light" radius="md" mt="xl">
           <Stack gap="xs" align="center">
-            <Text size="sm" fw={600} ta="center" style={{ color: 'var(--text-always-dark)' }}>
-              {t('login.defaultCredentials', 'Default Login Credentials')}
+            <Text size="sm" fw={600} ta="center" style={{ color: "var(--text-always-dark)" }}>
+              {t("login.defaultCredentials", "Default Login Credentials")}
             </Text>
-            <Text size="sm" ta="center" style={{ color: 'var(--text-always-dark)' }}>
-              <Text component="span" fw={600} style={{ color: 'var(--text-always-dark)' }}>{t('login.username', 'Username')}:</Text> admin
+            <Text size="sm" ta="center" style={{ color: "var(--text-always-dark)" }}>
+              <Text component="span" fw={600} style={{ color: "var(--text-always-dark)" }}>
+                {t("login.username", "Username")}:
+              </Text>{" "}
+              admin
             </Text>
-            <Text size="sm" ta="center" style={{ color: 'var(--text-always-dark)' }}>
-              <Text component="span" fw={600} style={{ color: 'var(--text-always-dark)' }}>{t('login.password', 'Password')}:</Text> stirling
+            <Text size="sm" ta="center" style={{ color: "var(--text-always-dark)" }}>
+              <Text component="span" fw={600} style={{ color: "var(--text-always-dark)" }}>
+                {t("login.password", "Password")}:
+              </Text>{" "}
+              stirling
             </Text>
-            <Text size="xs" ta="center" mt="xs" style={{ color: 'var(--text-always-dark-muted)' }}>
-              {t('login.changePasswordWarning', 'Please change your password after logging in for the first time')}
+            <Text size="xs" ta="center" mt="xs" style={{ color: "var(--text-always-dark-muted)" }}>
+              {t("login.changePasswordWarning", "Please change your password after logging in for the first time")}
             </Text>
           </Stack>
         </Alert>
       )}
-
     </AuthLayout>
   );
 }
diff --git a/frontend/src/proprietary/routes/ShareLinkLoader.tsx b/frontend/src/proprietary/routes/ShareLinkLoader.tsx
index cb660082ea..8e269e4a8b 100644
--- a/frontend/src/proprietary/routes/ShareLinkLoader.tsx
+++ b/frontend/src/proprietary/routes/ShareLinkLoader.tsx
@@ -1,21 +1,21 @@
-import { useEffect, useMemo, useRef } from 'react';
-import { isAxiosError } from 'axios';
-import { useNavigate } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
-import apiClient from '@app/services/apiClient';
-import { useAuth } from '@app/auth/UseSession';
-import { useFileActions } from '@app/contexts/FileContext';
-import { useNavigationActions } from '@app/contexts/NavigationContext';
-import { alert } from '@app/components/toast';
-import type { StirlingFile } from '@app/types/fileContext';
-import type { FileId } from '@app/types/file';
-import { fileStorage } from '@app/services/fileStorage';
+import { useEffect, useMemo, useRef } from "react";
+import { isAxiosError } from "axios";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import apiClient from "@app/services/apiClient";
+import { useAuth } from "@app/auth/UseSession";
+import { useFileActions } from "@app/contexts/FileContext";
+import { useNavigationActions } from "@app/contexts/NavigationContext";
+import { alert } from "@app/components/toast";
+import type { StirlingFile } from "@app/types/fileContext";
+import type { FileId } from "@app/types/file";
+import { fileStorage } from "@app/services/fileStorage";
 import {
   getShareBundleEntryRootId,
   isZipBundle,
   loadShareBundleEntries,
   parseContentDispositionFilename,
-} from '@app/services/shareBundleUtils';
+} from "@app/services/shareBundleUtils";
 
 interface ShareLinkLoaderProps {
   token: string;
@@ -60,7 +60,7 @@ export default function ShareLinkLoader({ token }: ShareLinkLoaderProps) {
         try {
           const metadataResponse = await apiClient.get<ShareLinkMetadata>(
             `/api/v1/storage/share-links/${normalizedToken}/metadata`,
-            { suppressErrorToast: true, skipAuthRedirect: true, signal }
+            { suppressErrorToast: true, skipAuthRedirect: true, signal },
           );
           shareMetadata = metadataResponse.data;
         } catch {
@@ -68,21 +68,17 @@ export default function ShareLinkLoader({ token }: ShareLinkLoaderProps) {
         }
 
         const response = await apiClient.get(`/api/v1/storage/share-links/${normalizedToken}`, {
-          responseType: 'blob',
+          responseType: "blob",
           suppressErrorToast: true,
           skipAuthRedirect: true,
           signal,
         });
         if (signal.aborted) return;
 
-        const contentType =
-          (response.headers && (response.headers['content-type'] || response.headers['Content-Type'])) ||
-          '';
+        const contentType = (response.headers && (response.headers["content-type"] || response.headers["Content-Type"])) || "";
         const disposition =
-          (response.headers &&
-            (response.headers['content-disposition'] || response.headers['Content-Disposition'])) ||
-          '';
-        const filename = parseContentDispositionFilename(disposition) || 'shared-file';
+          (response.headers && (response.headers["content-disposition"] || response.headers["Content-Disposition"])) || "";
+        const filename = parseContentDispositionFilename(disposition) || "shared-file";
         const blob = response.data as Blob;
         const contentTypeValue = contentType || blob.type;
 
@@ -114,13 +110,9 @@ export default function ShareLinkLoader({ token }: ShareLinkLoaderProps) {
               const entry = sortedEntries[i];
               const newId = idMap.get(entry.logicalId);
               if (!newId) continue;
-              const parentId = entry.parentLogicalId
-                ? idMap.get(entry.parentLogicalId)
-                : undefined;
+              const parentId = entry.parentLogicalId ? idMap.get(entry.parentLogicalId) : undefined;
               const rootId =
-                rootIdMap.get(getShareBundleEntryRootId(manifest, entry)) ||
-                idMap.get(manifest.rootLogicalId) ||
-                newId;
+                rootIdMap.get(getShareBundleEntryRootId(manifest, entry)) || idMap.get(manifest.rootLogicalId) || newId;
               const sharedUpdates = {
                 remoteStorageId: shareMetadata?.fileId,
                 remoteOwnerUsername: shareMetadata?.owner ?? undefined,
@@ -150,9 +142,7 @@ export default function ShareLinkLoader({ token }: ShareLinkLoaderProps) {
 
             const selectedIds: FileId[] = [];
             for (const rootId of rootOrder) {
-              const rootEntries = sortedEntries.filter(
-                (entry) => getShareBundleEntryRootId(manifest, entry) === rootId
-              );
+              const rootEntries = sortedEntries.filter((entry) => getShareBundleEntryRootId(manifest, entry) === rootId);
               const latestEntry = rootEntries[rootEntries.length - 1];
               if (!latestEntry) {
                 continue;
@@ -166,8 +156,8 @@ export default function ShareLinkLoader({ token }: ShareLinkLoaderProps) {
               actions.setSelectedFiles(selectedIds);
             }
 
-            navActions.setWorkbench('viewer');
-            navigate('/', { replace: true });
+            navActions.setWorkbench("viewer");
+            navigate("/", { replace: true });
             return;
           }
         }
@@ -183,62 +173,62 @@ export default function ShareLinkLoader({ token }: ShareLinkLoaderProps) {
         if (stirlingFiles.length > 0) {
           const ids = stirlingFiles.map((stirlingFile: StirlingFile) => stirlingFile.fileId);
           actions.setSelectedFiles(ids);
-        const sharedUpdates = {
-          remoteStorageId: shareMetadata?.fileId,
-          remoteOwnerUsername: shareMetadata?.owner ?? undefined,
-          remoteOwnedByCurrentUser: false,
-          remoteAccessRole: shareMetadata?.accessRole ?? undefined,
-          remoteSharedViaLink: true,
-          remoteHasShareLinks: false,
-          remoteShareToken: shareMetadata?.shareToken || normalizedToken,
-        };
+          const sharedUpdates = {
+            remoteStorageId: shareMetadata?.fileId,
+            remoteOwnerUsername: shareMetadata?.owner ?? undefined,
+            remoteOwnedByCurrentUser: false,
+            remoteAccessRole: shareMetadata?.accessRole ?? undefined,
+            remoteSharedViaLink: true,
+            remoteHasShareLinks: false,
+            remoteShareToken: shareMetadata?.shareToken || normalizedToken,
+          };
           for (const fileId of ids) {
             actions.updateStirlingFileStub(fileId, sharedUpdates);
             await fileStorage.updateFileMetadata(fileId, sharedUpdates);
           }
         }
 
-        navActions.setWorkbench('viewer');
-        navigate('/', { replace: true });
+        navActions.setWorkbench("viewer");
+        navigate("/", { replace: true });
       } catch (error: unknown) {
         if (signal.aborted) return;
         const status = isAxiosError(error) ? error.response?.status : undefined;
         if (status === 401 || status === 403) {
           if (!isAuthenticated && !authLoading) {
             alert({
-              alertType: 'warning',
-              title: t('storageShare.requiresLogin', 'This shared file requires login.'),
+              alertType: "warning",
+              title: t("storageShare.requiresLogin", "This shared file requires login."),
               expandable: false,
               durationMs: 4000,
             });
-            navigate('/login', {
+            navigate("/login", {
               replace: true,
               state: { from: { pathname: `/share/${normalizedToken}` } },
             });
             return;
           }
           alert({
-            alertType: 'warning',
+            alertType: "warning",
             title: t(
-              'storageShare.accessDenied',
-              'You do not have access to this shared file. Ask the owner to share it with you.'
+              "storageShare.accessDenied",
+              "You do not have access to this shared file. Ask the owner to share it with you.",
             ),
             expandable: false,
             durationMs: 4500,
           });
-          navigate('/', { replace: true });
+          navigate("/", { replace: true });
         } else if (status === 404 || status === 410) {
           alert({
-            alertType: 'error',
-            title: t('storageShare.expiredTitle', 'Link expired'),
+            alertType: "error",
+            title: t("storageShare.expiredTitle", "Link expired"),
             expandable: false,
             durationMs: 4000,
           });
-          navigate('/', { replace: true });
+          navigate("/", { replace: true });
         } else {
           alert({
-            alertType: 'error',
-            title: t('storageShare.loadFailed', 'Unable to open shared file.'),
+            alertType: "error",
+            title: t("storageShare.loadFailed", "Unable to open shared file."),
             expandable: false,
             durationMs: 4000,
           });
diff --git a/frontend/src/proprietary/routes/ShareLinkPage.tsx b/frontend/src/proprietary/routes/ShareLinkPage.tsx
index 71d13c97cf..24513d4df2 100644
--- a/frontend/src/proprietary/routes/ShareLinkPage.tsx
+++ b/frontend/src/proprietary/routes/ShareLinkPage.tsx
@@ -1,23 +1,23 @@
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { isAxiosError } from 'axios';
-import { useNavigate, useParams } from 'react-router-dom';
-import { Alert, Badge, Button, Group, Loader, Paper, Stack, Text, Title } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import DownloadIcon from '@mui/icons-material/Download';
-import LoginIcon from '@mui/icons-material/Login';
-import OpenInNewIcon from '@mui/icons-material/OpenInNew';
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { isAxiosError } from "axios";
+import { useNavigate, useParams } from "react-router-dom";
+import { Alert, Badge, Button, Group, Loader, Paper, Stack, Text, Title } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import DownloadIcon from "@mui/icons-material/Download";
+import LoginIcon from "@mui/icons-material/Login";
+import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 
-import { useFileActions } from '@app/contexts/FileContext';
-import { useNavigationActions } from '@app/contexts/NavigationContext';
-import { alert } from '@app/components/toast';
+import { useFileActions } from "@app/contexts/FileContext";
+import { useNavigationActions } from "@app/contexts/NavigationContext";
+import { alert } from "@app/components/toast";
 import {
   downloadShareLink,
   fetchShareLinkMetadata,
   importShareLinkToWorkbench,
   ShareLinkMetadata,
-} from '@app/services/shareLinkImport';
+} from "@app/services/shareLinkImport";
 
-type ShareLinkStatus = 'loading' | 'ready' | 'login' | 'forbidden' | 'notfound' | 'error';
+type ShareLinkStatus = "loading" | "ready" | "login" | "forbidden" | "notfound" | "error";
 
 export default function ShareLinkPage() {
   const { token } = useParams<{ token: string }>();
@@ -25,37 +25,36 @@ export default function ShareLinkPage() {
   const { actions: navActions } = useNavigationActions();
   const navigate = useNavigate();
   const { t } = useTranslation();
-  const [status, setStatus] = useState<ShareLinkStatus>('loading');
+  const [status, setStatus] = useState<ShareLinkStatus>("loading");
   const [metadata, setMetadata] = useState<ShareLinkMetadata | null>(null);
   const [isWorking, setIsWorking] = useState(false);
 
-  const normalizedToken = useMemo(() => (token || '').trim(), [token]);
-  const shareRole = (metadata?.accessRole ?? 'viewer').toLowerCase();
-  const hasReadAccess =
-    shareRole === 'editor' || shareRole === 'commenter' || shareRole === 'viewer';
+  const normalizedToken = useMemo(() => (token || "").trim(), [token]);
+  const shareRole = (metadata?.accessRole ?? "viewer").toLowerCase();
+  const hasReadAccess = shareRole === "editor" || shareRole === "commenter" || shareRole === "viewer";
   const canDownload = hasReadAccess;
   const canOpen = hasReadAccess;
 
   const loadMetadata = useCallback(async () => {
     if (!normalizedToken) {
-      setStatus('notfound');
+      setStatus("notfound");
       return;
     }
-    setStatus('loading');
+    setStatus("loading");
     try {
       const data = await fetchShareLinkMetadata(normalizedToken);
       setMetadata(data);
-      setStatus('ready');
+      setStatus("ready");
     } catch (error: unknown) {
       const statusCode = isAxiosError(error) ? error.response?.status : undefined;
       if (statusCode === 401) {
-        setStatus('login');
+        setStatus("login");
       } else if (statusCode === 403) {
-        setStatus('forbidden');
+        setStatus("forbidden");
       } else if (statusCode === 404 || statusCode === 410) {
-        setStatus('notfound');
+        setStatus("notfound");
       } else {
-        setStatus('error');
+        setStatus("error");
       }
     }
   }, [normalizedToken]);
@@ -65,7 +64,7 @@ export default function ShareLinkPage() {
   }, [loadMetadata]);
 
   const handleLogin = useCallback(() => {
-    navigate('/login', {
+    navigate("/login", {
       replace: true,
       state: { from: { pathname: `/share/${normalizedToken}` } },
     });
@@ -77,9 +76,9 @@ export default function ShareLinkPage() {
     try {
       const { blob, filename } = await downloadShareLink(normalizedToken);
       const url = URL.createObjectURL(blob);
-      const link = document.createElement('a');
+      const link = document.createElement("a");
       link.href = url;
-      link.download = filename || 'shared-file';
+      link.download = filename || "shared-file";
       document.body.appendChild(link);
       link.click();
       link.remove();
@@ -87,15 +86,15 @@ export default function ShareLinkPage() {
     } catch (error: unknown) {
       const statusCode = isAxiosError(error) ? error.response?.status : undefined;
       if (statusCode === 401) {
-        setStatus('login');
+        setStatus("login");
       } else if (statusCode === 403) {
-        setStatus('forbidden');
+        setStatus("forbidden");
       } else if (statusCode === 404 || statusCode === 410) {
-        setStatus('notfound');
+        setStatus("notfound");
       } else {
         alert({
-          alertType: 'error',
-          title: t('storageShare.downloadFailed', 'Unable to download this file.'),
+          alertType: "error",
+          title: t("storageShare.downloadFailed", "Unable to download this file."),
           expandable: false,
           durationMs: 3500,
         });
@@ -109,28 +108,24 @@ export default function ShareLinkPage() {
     if (!normalizedToken || !canOpen) return;
     setIsWorking(true);
     try {
-      const selectedIds = await importShareLinkToWorkbench(
-        normalizedToken,
-        actions,
-        metadata
-      );
+      const selectedIds = await importShareLinkToWorkbench(normalizedToken, actions, metadata);
       if (selectedIds.length > 0) {
         actions.setSelectedFiles(selectedIds);
       }
-      navActions.setWorkbench('viewer');
-      navigate('/', { replace: true });
+      navActions.setWorkbench("viewer");
+      navigate("/", { replace: true });
     } catch (error: unknown) {
       const statusCode = isAxiosError(error) ? error.response?.status : undefined;
       if (statusCode === 401) {
-        setStatus('login');
+        setStatus("login");
       } else if (statusCode === 403) {
-        setStatus('forbidden');
+        setStatus("forbidden");
       } else if (statusCode === 404 || statusCode === 410) {
-        setStatus('notfound');
+        setStatus("notfound");
       } else {
         alert({
-          alertType: 'error',
-          title: t('storageShare.loadFailed', 'Unable to open shared file.'),
+          alertType: "error",
+          title: t("storageShare.loadFailed", "Unable to open shared file."),
           expandable: false,
           durationMs: 3500,
         });
@@ -140,48 +135,48 @@ export default function ShareLinkPage() {
     }
   }, [actions, canOpen, metadata, navActions, navigate, normalizedToken, t]);
 
-  const title = metadata?.fileName || t('storageShare.titleDefault', 'Shared file');
-  const ownerLabel = metadata?.owner || t('storageShare.ownerUnknown', 'Unknown');
+  const title = metadata?.fileName || t("storageShare.titleDefault", "Shared file");
+  const ownerLabel = metadata?.owner || t("storageShare.ownerUnknown", "Unknown");
 
   return (
-    <div style={{ minHeight: '100%', padding: '2.5rem 1.5rem' }}>
-      <Paper radius="lg" p="xl" withBorder shadow="sm" style={{ maxWidth: 720, margin: '0 auto' }}>
+    <div style={{ minHeight: "100%", padding: "2.5rem 1.5rem" }}>
+      <Paper radius="lg" p="xl" withBorder shadow="sm" style={{ maxWidth: 720, margin: "0 auto" }}>
         <Stack gap="md">
           <Group justify="space-between" align="center">
-            <Title order={3}>{t('storageShare.shareHeading', 'Shared file')}</Title>
+            <Title order={3}>{t("storageShare.shareHeading", "Shared file")}</Title>
             <Group gap="xs">
               {metadata?.accessRole && (
                 <Badge variant="light" color="gray">
-                  {shareRole === 'editor'
-                    ? t('storageShare.roleEditor', 'Editor')
-                    : shareRole === 'commenter'
-                      ? t('storageShare.roleCommenter', 'Commenter')
-                      : t('storageShare.roleViewer', 'Viewer')}
+                  {shareRole === "editor"
+                    ? t("storageShare.roleEditor", "Editor")
+                    : shareRole === "commenter"
+                      ? t("storageShare.roleCommenter", "Commenter")
+                      : t("storageShare.roleViewer", "Viewer")}
                 </Badge>
               )}
             </Group>
           </Group>
 
-          {status === 'loading' && (
+          {status === "loading" && (
             <Group justify="center" py="xl">
               <Loader size="sm" />
               <Text size="sm" c="dimmed">
-                {t('storageShare.loading', 'Loading share link...')}
+                {t("storageShare.loading", "Loading share link...")}
               </Text>
             </Group>
           )}
 
-          {status === 'ready' && (
+          {status === "ready" && (
             <>
               <Text size="lg" fw={600}>
                 {title}
               </Text>
               <Text size="sm" c="dimmed">
-                {t('storageShare.ownerLabel', 'Owner')}: {ownerLabel}
+                {t("storageShare.ownerLabel", "Owner")}: {ownerLabel}
               </Text>
               {metadata?.createdAt && (
                 <Text size="sm" c="dimmed">
-                  {t('storageShare.createdAt', 'Created')} {new Date(metadata.createdAt).toLocaleString()}
+                  {t("storageShare.createdAt", "Created")} {new Date(metadata.createdAt).toLocaleString()}
                 </Text>
               )}
               <Group justify="flex-start" gap="sm" pt="sm">
@@ -191,7 +186,7 @@ export default function ShareLinkPage() {
                   loading={isWorking}
                   disabled={!canOpen}
                 >
-                  {t('storageShare.openInApp', 'Open in Stirling PDF')}
+                  {t("storageShare.openInApp", "Open in Stirling PDF")}
                 </Button>
                 <Button
                   variant="light"
@@ -200,59 +195,51 @@ export default function ShareLinkPage() {
                   loading={isWorking}
                   disabled={!canDownload}
                 >
-                  {t('storageShare.download', 'Download')}
+                  {t("storageShare.download", "Download")}
                 </Button>
               </Group>
               {!canDownload && (
-                <Alert mt="md" color="yellow" title={t('storageShare.accessLimitedTitle', 'Limited access')}>
-                  {shareRole === 'commenter'
+                <Alert mt="md" color="yellow" title={t("storageShare.accessLimitedTitle", "Limited access")}>
+                  {shareRole === "commenter"
                     ? t(
-                        'storageShare.accessLimitedCommenter',
-                        'Comment access is coming soon. Ask the owner for editor access if you need to download.'
+                        "storageShare.accessLimitedCommenter",
+                        "Comment access is coming soon. Ask the owner for editor access if you need to download.",
                       )
                     : t(
-                        'storageShare.accessLimitedViewer',
-                        'This link is view-only. Ask the owner for editor access if you need to download.'
+                        "storageShare.accessLimitedViewer",
+                        "This link is view-only. Ask the owner for editor access if you need to download.",
                       )}
                 </Alert>
               )}
             </>
           )}
 
-          {status === 'login' && (
-            <Alert color="blue" title={t('storageShare.loginRequired', 'Login required')}>
-              <Text size="sm">
-                {t('storageShare.loginPrompt', 'Sign in to access this shared file.')}
-              </Text>
+          {status === "login" && (
+            <Alert color="blue" title={t("storageShare.loginRequired", "Login required")}>
+              <Text size="sm">{t("storageShare.loginPrompt", "Sign in to access this shared file.")}</Text>
               <Group mt="md">
-                <Button
-                  leftSection={<LoginIcon style={{ fontSize: 18 }} />}
-                  onClick={handleLogin}
-                >
-                  {t('storageShare.goToLogin', 'Go to login')}
+                <Button leftSection={<LoginIcon style={{ fontSize: 18 }} />} onClick={handleLogin}>
+                  {t("storageShare.goToLogin", "Go to login")}
                 </Button>
               </Group>
             </Alert>
           )}
 
-          {status === 'forbidden' && (
-            <Alert color="red" title={t('storageShare.accessDeniedTitle', 'No access')}>
-              {t(
-                'storageShare.accessDeniedBody',
-                'You do not have access to this file. Ask the owner to share it with you.'
-              )}
+          {status === "forbidden" && (
+            <Alert color="red" title={t("storageShare.accessDeniedTitle", "No access")}>
+              {t("storageShare.accessDeniedBody", "You do not have access to this file. Ask the owner to share it with you.")}
             </Alert>
           )}
 
-          {status === 'notfound' && (
-            <Alert color="red" title={t('storageShare.expiredTitle', 'Link expired')}>
-              {t('storageShare.expiredBody', 'This share link is invalid or has expired.')}
+          {status === "notfound" && (
+            <Alert color="red" title={t("storageShare.expiredTitle", "Link expired")}>
+              {t("storageShare.expiredBody", "This share link is invalid or has expired.")}
             </Alert>
           )}
 
-          {status === 'error' && (
-            <Alert color="red" title={t('storageShare.loadFailed', 'Unable to open shared file.')}>
-              {t('storageShare.tryAgain', 'Please try again later.')}
+          {status === "error" && (
+            <Alert color="red" title={t("storageShare.loadFailed", "Unable to open shared file.")}>
+              {t("storageShare.tryAgain", "Please try again later.")}
             </Alert>
           )}
         </Stack>
diff --git a/frontend/src/proprietary/routes/Signup.tsx b/frontend/src/proprietary/routes/Signup.tsx
index ad1b7dc009..99b07f2439 100644
--- a/frontend/src/proprietary/routes/Signup.tsx
+++ b/frontend/src/proprietary/routes/Signup.tsx
@@ -1,19 +1,19 @@
-import { useState, useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useTranslation } from 'react-i18next';
-import { useDocumentMeta } from '@app/hooks/useDocumentMeta';
-import { useAuth } from '@app/auth/UseSession';
-import AuthLayout from '@app/routes/authShared/AuthLayout';
-import '@app/routes/authShared/auth.css';
-import { BASE_PATH } from '@app/constants/app';
+import { useState, useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { useTranslation } from "react-i18next";
+import { useDocumentMeta } from "@app/hooks/useDocumentMeta";
+import { useAuth } from "@app/auth/UseSession";
+import AuthLayout from "@app/routes/authShared/AuthLayout";
+import "@app/routes/authShared/auth.css";
+import { BASE_PATH } from "@app/constants/app";
 
 // Import signup components
-import LoginHeader from '@app/routes/login/LoginHeader';
-import ErrorMessage from '@app/routes/login/ErrorMessage';
-import DividerWithText from '@app/components/shared/DividerWithText';
-import SignupForm from '@app/routes/signup/SignupForm';
-import { useSignupFormValidation, SignupFieldErrors } from '@app/routes/signup/SignupFormValidation';
-import { useAuthService } from '@app/routes/signup/AuthService';
+import LoginHeader from "@app/routes/login/LoginHeader";
+import ErrorMessage from "@app/routes/login/ErrorMessage";
+import DividerWithText from "@app/components/shared/DividerWithText";
+import SignupForm from "@app/routes/signup/SignupForm";
+import { useSignupFormValidation, SignupFieldErrors } from "@app/routes/signup/SignupFormValidation";
+import { useAuthService } from "@app/routes/signup/AuthService";
 
 export default function Signup() {
   const navigate = useNavigate();
@@ -21,16 +21,16 @@ export default function Signup() {
   const { session, loading } = useAuth();
   const [isSigningUp, setIsSigningUp] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
   const [fieldErrors, setFieldErrors] = useState<SignupFieldErrors>({});
 
   // Redirect immediately if user has valid session (JWT already validated by AuthProvider)
   useEffect(() => {
     if (!loading && session) {
-      console.debug('[Signup] User already authenticated, redirecting to home');
-      navigate('/', { replace: true });
+      console.debug("[Signup] User already authenticated, redirecting to home");
+      navigate("/", { replace: true });
     }
   }, [session, loading, navigate]);
 
@@ -38,12 +38,12 @@ export default function Signup() {
 
   // Set document meta
   useDocumentMeta({
-    title: `${t('signup.title', 'Create an account')} - Stirling PDF`,
-    description: t('app.description', 'The Free Adobe Acrobat alternative (10M+ Downloads)'),
-    ogTitle: `${t('signup.title', 'Create an account')} - Stirling PDF`,
-    ogDescription: t('app.description', 'The Free Adobe Acrobat alternative (10M+ Downloads)'),
+    title: `${t("signup.title", "Create an account")} - Stirling PDF`,
+    description: t("app.description", "The Free Adobe Acrobat alternative (10M+ Downloads)"),
+    ogTitle: `${t("signup.title", "Create an account")} - Stirling PDF`,
+    ogDescription: t("app.description", "The Free Adobe Acrobat alternative (10M+ Downloads)"),
     ogImage: `${baseUrl}/og_images/home.png`,
-    ogUrl: `${window.location.origin}${window.location.pathname}`
+    ogUrl: `${window.location.origin}${window.location.pathname}`,
   });
 
   const { validateSignupForm } = useSignupFormValidation();
@@ -62,16 +62,16 @@ export default function Signup() {
       setError(null);
       setFieldErrors({});
 
-      const result = await signUp(email, password, '');
+      const result = await signUp(email, password, "");
 
       if (result.user) {
         // Show success message and redirect to login
         setError(null);
-        setTimeout(() => navigate('/login'), 2000);
+        setTimeout(() => navigate("/login"), 2000);
       }
     } catch (err) {
-      console.error('[Signup] Unexpected error:', err);
-      setError(err instanceof Error ? err.message : t('signup.unexpectedError', { message: 'Unknown error' }));
+      console.error("[Signup] Unexpected error:", err);
+      setError(err instanceof Error ? err.message : t("signup.unexpectedError", { message: "Unknown error" }));
     } finally {
       setIsSigningUp(false);
     }
@@ -79,7 +79,7 @@ export default function Signup() {
 
   return (
     <AuthLayout>
-      <LoginHeader title={t('signup.title', 'Create an account')} subtitle={t('signup.subtitle', 'Join Stirling PDF')} />
+      <LoginHeader title={t("signup.title", "Create an account")} subtitle={t("signup.subtitle", "Join Stirling PDF")} />
 
       <ErrorMessage error={error} />
 
@@ -98,16 +98,12 @@ export default function Signup() {
         showTerms={false}
       />
 
-      <DividerWithText text={t('signup.or', 'or')} respondsToDarkMode={false} opacity={0.4} />
+      <DividerWithText text={t("signup.or", "or")} respondsToDarkMode={false} opacity={0.4} />
 
       {/* Bottom row - centered */}
-      <div style={{ textAlign: 'center', margin: '0.5rem 0 0.25rem' }}>
-        <button
-          type="button"
-          onClick={() => navigate('/login')}
-          className="auth-link-black"
-        >
-          {t('login.logIn', 'Log In')}
+      <div style={{ textAlign: "center", margin: "0.5rem 0 0.25rem" }}>
+        <button type="button" onClick={() => navigate("/login")} className="auth-link-black">
+          {t("login.logIn", "Log In")}
         </button>
       </div>
     </AuthLayout>
diff --git a/frontend/src/proprietary/routes/authShared/AuthLayout.tsx b/frontend/src/proprietary/routes/authShared/AuthLayout.tsx
index 9f30d5995b..6e5f83b2e7 100644
--- a/frontend/src/proprietary/routes/authShared/AuthLayout.tsx
+++ b/frontend/src/proprietary/routes/authShared/AuthLayout.tsx
@@ -1,13 +1,13 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import LoginRightCarousel from '@app/components/shared/LoginRightCarousel';
-import buildLoginSlides from '@app/components/shared/loginSlides';
-import styles from '@app/routes/authShared/AuthLayout.module.css';
-import { useLogoVariant } from '@app/hooks/useLogoVariant';
-import Footer from '@app/components/shared/Footer';
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import LoginRightCarousel from "@app/components/shared/LoginRightCarousel";
+import buildLoginSlides from "@app/components/shared/loginSlides";
+import styles from "@app/routes/authShared/AuthLayout.module.css";
+import { useLogoVariant } from "@app/hooks/useLogoVariant";
+import Footer from "@app/components/shared/Footer";
 
 interface AuthLayoutProps {
-  children: React.ReactNode
+  children: React.ReactNode;
 }
 
 export default function AuthLayout({ children }: AuthLayoutProps) {
@@ -20,15 +20,15 @@ export default function AuthLayout({ children }: AuthLayoutProps) {
   // Force light mode on auth pages
   useEffect(() => {
     const htmlElement = document.documentElement;
-    const previousColorScheme = htmlElement.getAttribute('data-mantine-color-scheme');
+    const previousColorScheme = htmlElement.getAttribute("data-mantine-color-scheme");
 
     // Set light mode
-    htmlElement.setAttribute('data-mantine-color-scheme', 'light');
+    htmlElement.setAttribute("data-mantine-color-scheme", "light");
 
     // Cleanup: restore previous theme when leaving auth pages
     return () => {
       if (previousColorScheme) {
-        htmlElement.setAttribute('data-mantine-color-scheme', previousColorScheme);
+        htmlElement.setAttribute("data-mantine-color-scheme", previousColorScheme);
       }
     };
   }, []);
@@ -45,30 +45,23 @@ export default function AuthLayout({ children }: AuthLayoutProps) {
       setHideRightPanel(tooNarrow || tooShort);
     };
     update();
-    window.addEventListener('resize', update);
-    window.addEventListener('orientationchange', update);
+    window.addEventListener("resize", update);
+    window.addEventListener("orientationchange", update);
     return () => {
-      window.removeEventListener('resize', update);
-      window.removeEventListener('orientationchange', update);
+      window.removeEventListener("resize", update);
+      window.removeEventListener("orientationchange", update);
     };
   }, []);
 
   return (
     <div className={styles.authContainer}>
-      <div
-        ref={cardRef}
-        className={`${styles.authCard} ${!hideRightPanel ? styles.authCardTwoColumns : ''}`}
-      >
+      <div ref={cardRef} className={`${styles.authCard} ${!hideRightPanel ? styles.authCardTwoColumns : ""}`}>
         <div className={styles.authLeftPanel}>
-          <div className={styles.authContent}>
-            {children}
-          </div>
+          <div className={styles.authContent}>{children}</div>
         </div>
-        {!hideRightPanel && (
-          <LoginRightCarousel imageSlides={imageSlides} initialSeconds={5} slideSeconds={8} />
-        )}
+        {!hideRightPanel && <LoginRightCarousel imageSlides={imageSlides} initialSeconds={5} slideSeconds={8} />}
       </div>
-      <div style={{ position: 'fixed', bottom: 0, left: 0, right: 0, width: '100%', zIndex: 10 }}>
+      <div style={{ position: "fixed", bottom: 0, left: 0, right: 0, width: "100%", zIndex: 10 }}>
         <Footer forceLightMode={true} />
       </div>
     </div>
diff --git a/frontend/src/proprietary/routes/authShared/auth.css b/frontend/src/proprietary/routes/authShared/auth.css
index b5b5b882b1..320766ccf1 100644
--- a/frontend/src/proprietary/routes/authShared/auth.css
+++ b/frontend/src/proprietary/routes/authShared/auth.css
@@ -107,7 +107,7 @@
 .auth-checkbox {
   width: 1rem; /* 16px */
   height: 1rem; /* 16px */
-  accent-color: #AF3434;
+  accent-color: #af3434;
 }
 
 .auth-terms-label {
@@ -122,7 +122,9 @@
 
 .auth-confirm {
   overflow: hidden;
-  transition: max-height 240ms ease, opacity 200ms ease;
+  transition:
+    max-height 240ms ease,
+    opacity 200ms ease;
 }
 
 /* OAuth Button Styles */
@@ -203,7 +205,11 @@
   gap: 1rem; /* 16px */
   font-family: inherit;
   box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.08);
-  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
+  transition:
+    background-color 0.2s ease,
+    box-shadow 0.2s ease,
+    transform 0.2s ease,
+    border-color 0.2s ease;
 }
 
 .oauth-button-vertical:hover:not(:disabled) {
@@ -579,7 +585,7 @@
 
 /* Email login button - red CTA style matching SaaS version */
 .auth-cta-button {
-  background-color: #AF3434 !important;
+  background-color: #af3434 !important;
   color: white !important;
   border: none !important;
   font-weight: 600 !important;
@@ -590,6 +596,6 @@
 }
 
 .auth-cta-button:disabled {
-  background-color: #AF3434 !important;
+  background-color: #af3434 !important;
   opacity: 0.6 !important;
 }
diff --git a/frontend/src/proprietary/routes/login/EmailPasswordForm.tsx b/frontend/src/proprietary/routes/login/EmailPasswordForm.tsx
index d7338e18e6..e9ea06a3bb 100644
--- a/frontend/src/proprietary/routes/login/EmailPasswordForm.tsx
+++ b/frontend/src/proprietary/routes/login/EmailPasswordForm.tsx
@@ -1,40 +1,40 @@
-import { useTranslation } from 'react-i18next';
-import '@app/routes/authShared/auth.css';
-import { TextInput, PasswordInput, Button } from '@mantine/core';
+import { useTranslation } from "react-i18next";
+import "@app/routes/authShared/auth.css";
+import { TextInput, PasswordInput, Button } from "@mantine/core";
 
 // Force light mode styles for auth inputs
 const authInputStyles = {
   input: {
-    backgroundColor: 'var(--auth-input-bg-light-only)',
-    color: 'var(--auth-input-text-light-only)',
-    borderColor: 'var(--auth-input-border-light-only)',
-    '&:focus': {
-      borderColor: 'var(--auth-border-focus-light-only)',
+    backgroundColor: "var(--auth-input-bg-light-only)",
+    color: "var(--auth-input-text-light-only)",
+    borderColor: "var(--auth-input-border-light-only)",
+    "&:focus": {
+      borderColor: "var(--auth-border-focus-light-only)",
     },
   },
   label: {
-    color: 'var(--auth-label-text-light-only)',
+    color: "var(--auth-label-text-light-only)",
   },
 };
 
 interface EmailPasswordFormProps {
-  email: string
-  password: string
-  setEmail: (email: string) => void
-  setPassword: (password: string) => void
-  mfaCode?: string
-  setMfaCode?: (code: string) => void
-  showMfaField?: boolean
-  requiresMfa?: boolean
-  onSubmit: () => void
-  isSubmitting: boolean
-  submitButtonText: string
-  showPasswordField?: boolean
+  email: string;
+  password: string;
+  setEmail: (email: string) => void;
+  setPassword: (password: string) => void;
+  mfaCode?: string;
+  setMfaCode?: (code: string) => void;
+  showMfaField?: boolean;
+  requiresMfa?: boolean;
+  onSubmit: () => void;
+  isSubmitting: boolean;
+  submitButtonText: string;
+  showPasswordField?: boolean;
   fieldErrors?: {
-    email?: string
-    password?: string
-    mfaCode?: string
-  }
+    email?: string;
+    password?: string;
+    mfaCode?: string;
+  };
 }
 
 export default function EmailPasswordForm({
@@ -42,7 +42,7 @@ export default function EmailPasswordForm({
   password,
   setEmail,
   setPassword,
-  mfaCode = '',
+  mfaCode = "",
   setMfaCode,
   showMfaField = false,
   requiresMfa = false,
@@ -50,7 +50,7 @@ export default function EmailPasswordForm({
   isSubmitting,
   submitButtonText,
   showPasswordField = true,
-  fieldErrors = {}
+  fieldErrors = {},
 }: EmailPasswordFormProps) {
   const { t } = useTranslation();
 
@@ -65,15 +65,15 @@ export default function EmailPasswordForm({
         <div className="auth-field">
           <TextInput
             id="email"
-            label={t('login.username', 'Username')}
+            label={t("login.username", "Username")}
             type="text"
             name="username"
             autoComplete="username"
-            placeholder={t('login.enterUsername', 'Enter username')}
+            placeholder={t("login.enterUsername", "Enter username")}
             value={email}
             onChange={(e) => setEmail(e.target.value)}
             error={fieldErrors.email}
-            classNames={{ label: 'auth-label' }}
+            classNames={{ label: "auth-label" }}
             styles={authInputStyles}
             autoFocus
           />
@@ -83,14 +83,14 @@ export default function EmailPasswordForm({
           <div className="auth-field">
             <PasswordInput
               id="password"
-              label={t('login.password')}
+              label={t("login.password")}
               name="current-password"
               autoComplete="current-password"
-              placeholder={t('login.enterPassword')}
+              placeholder={t("login.enterPassword")}
               value={password}
               onChange={(e) => setPassword(e.target.value)}
               error={fieldErrors.password}
-              classNames={{ label: 'auth-label' }}
+              classNames={{ label: "auth-label" }}
               styles={authInputStyles}
             />
           </div>
@@ -99,19 +99,21 @@ export default function EmailPasswordForm({
           <div className="auth-field">
             <TextInput
               id="mfaCode"
-              label={t('login.mfaCode', 'Authentication code')}
+              label={t("login.mfaCode", "Authentication code")}
               type="text"
               name="mfaCode"
               autoComplete="one-time-code"
-              placeholder={t('login.enterMfaCode', 'Enter 6-digit code')}
+              placeholder={t("login.enterMfaCode", "Enter 6-digit code")}
               value={mfaCode}
               inputMode="numeric"
-              onChange={(e: React.ChangeEvent<HTMLInputElement>) => setMfaCode?.(e.target.value.replace(/\D/g, '').slice(0, 6))}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+                setMfaCode?.(e.target.value.replace(/\D/g, "").slice(0, 6))
+              }
               pattern="[0-9]*"
               maxLength={6}
               minLength={6}
               error={fieldErrors.mfaCode}
-              classNames={{ label: 'auth-label' }}
+              classNames={{ label: "auth-label" }}
               styles={authInputStyles}
             />
           </div>
diff --git a/frontend/src/proprietary/routes/login/ErrorMessage.tsx b/frontend/src/proprietary/routes/login/ErrorMessage.tsx
index 4563a24505..064db69a13 100644
--- a/frontend/src/proprietary/routes/login/ErrorMessage.tsx
+++ b/frontend/src/proprietary/routes/login/ErrorMessage.tsx
@@ -1,5 +1,5 @@
 interface ErrorMessageProps {
-  error: string | null
+  error: string | null;
 }
 
 export default function ErrorMessage({ error }: ErrorMessageProps) {
diff --git a/frontend/src/proprietary/routes/login/LoggedInState.tsx b/frontend/src/proprietary/routes/login/LoggedInState.tsx
index f8b8f3a1e4..98306f3288 100644
--- a/frontend/src/proprietary/routes/login/LoggedInState.tsx
+++ b/frontend/src/proprietary/routes/login/LoggedInState.tsx
@@ -1,8 +1,8 @@
-import { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { useAuth } from '@app/auth/UseSession';
-import { useTranslation } from 'react-i18next';
-import { useLogoPath } from '@app/hooks/useLogoPath';
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { useAuth } from "@app/auth/UseSession";
+import { useTranslation } from "react-i18next";
+import { useLogoPath } from "@app/hooks/useLogoPath";
 
 export default function LoggedInState() {
   const navigate = useNavigate();
@@ -12,49 +12,47 @@ export default function LoggedInState() {
 
   useEffect(() => {
     const timer = setTimeout(() => {
-      navigate('/');
+      navigate("/");
     }, 2000);
 
     return () => clearTimeout(timer);
   }, [navigate]);
 
   return (
-    <div style={{
-      minHeight: '100vh',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      backgroundColor: '#f3f4f6',
-      padding: '16px'
-    }}>
-      <div style={{
-        maxWidth: '400px',
-        width: '100%',
-        backgroundColor: '#ffffff',
-        borderRadius: '16px',
-        boxShadow: '0 10px 25px rgba(0, 0, 0, 0.1)',
-        padding: '32px'
-      }}>
-        <div style={{ textAlign: 'center', marginBottom: '24px' }}>
-          <div style={{ marginBottom: '16px', display: 'flex', justifyContent: 'center' }}>
-            <img
-              src={logoPath}
-              alt="Stirling PDF Logo"
-              style={{ width: '64px', height: '64px', objectFit: 'contain' }}
-            />
+    <div
+      style={{
+        minHeight: "100vh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "#f3f4f6",
+        padding: "16px",
+      }}
+    >
+      <div
+        style={{
+          maxWidth: "400px",
+          width: "100%",
+          backgroundColor: "#ffffff",
+          borderRadius: "16px",
+          boxShadow: "0 10px 25px rgba(0, 0, 0, 0.1)",
+          padding: "32px",
+        }}
+      >
+        <div style={{ textAlign: "center", marginBottom: "24px" }}>
+          <div style={{ marginBottom: "16px", display: "flex", justifyContent: "center" }}>
+            <img src={logoPath} alt="Stirling PDF Logo" style={{ width: "64px", height: "64px", objectFit: "contain" }} />
           </div>
-          <h1 style={{ fontSize: '24px', fontWeight: 'bold', color: '#059669', marginBottom: '8px' }}>
-            {t('login.youAreLoggedIn')}
+          <h1 style={{ fontSize: "24px", fontWeight: "bold", color: "#059669", marginBottom: "8px" }}>
+            {t("login.youAreLoggedIn")}
           </h1>
-          <p style={{ color: '#6b7280', fontSize: '14px' }}>
-            {t('login.email')}: {user?.email}
+          <p style={{ color: "#6b7280", fontSize: "14px" }}>
+            {t("login.email")}: {user?.email}
           </p>
         </div>
 
-        <div style={{ textAlign: 'center', marginTop: '16px' }}>
-          <p style={{ color: '#6b7280', fontSize: '14px' }}>
-            Redirecting to home...
-          </p>
+        <div style={{ textAlign: "center", marginTop: "16px" }}>
+          <p style={{ color: "#6b7280", fontSize: "14px" }}>Redirecting to home...</p>
         </div>
       </div>
     </div>
diff --git a/frontend/src/proprietary/routes/login/LoginHeader.tsx b/frontend/src/proprietary/routes/login/LoginHeader.tsx
index 10304949e2..91b9e5ec48 100644
--- a/frontend/src/proprietary/routes/login/LoginHeader.tsx
+++ b/frontend/src/proprietary/routes/login/LoginHeader.tsx
@@ -1,24 +1,21 @@
-
-import { useLogoAssets } from '@app/hooks/useLogoAssets';
+import { useLogoAssets } from "@app/hooks/useLogoAssets";
 
 interface LoginHeaderProps {
-  title: string
-  subtitle?: string
-  centerOnly?: boolean
+  title: string;
+  subtitle?: string;
+  centerOnly?: boolean;
 }
 
 export default function LoginHeader({ title, subtitle, centerOnly = false }: LoginHeaderProps) {
   const { wordmark } = useLogoAssets();
 
   return (
-    <div className={`login-header${centerOnly ? ' login-header-centered' : ''}`}>
+    <div className={`login-header${centerOnly ? " login-header-centered" : ""}`}>
       <div className="login-header-logos">
         <img src={wordmark.black} alt="Stirling PDF" className="login-logo-text" />
       </div>
       {title && <h1 className="login-title">{title}</h1>}
-      {subtitle && (
-        <p className="login-subtitle">{subtitle}</p>
-      )}
+      {subtitle && <p className="login-subtitle">{subtitle}</p>}
     </div>
   );
 }
diff --git a/frontend/src/proprietary/routes/login/NavigationLink.tsx b/frontend/src/proprietary/routes/login/NavigationLink.tsx
index af08094ce5..0945b311a2 100644
--- a/frontend/src/proprietary/routes/login/NavigationLink.tsx
+++ b/frontend/src/proprietary/routes/login/NavigationLink.tsx
@@ -1,20 +1,15 @@
-import { Button } from '@mantine/core';
+import { Button } from "@mantine/core";
 
 interface NavigationLinkProps {
-  onClick: () => void
-  text: string
-  isDisabled?: boolean
+  onClick: () => void;
+  text: string;
+  isDisabled?: boolean;
 }
 
 export default function NavigationLink({ onClick, text, isDisabled = false }: NavigationLinkProps) {
   return (
     <div className="navigation-link-container">
-      <Button
-        onClick={onClick}
-        disabled={isDisabled}
-        className="navigation-link-button"
-        variant="subtle"
-      >
+      <Button onClick={onClick} disabled={isDisabled} className="navigation-link-button" variant="subtle">
         {text}
       </Button>
     </div>
diff --git a/frontend/src/proprietary/routes/login/OAuthButtons.test.tsx b/frontend/src/proprietary/routes/login/OAuthButtons.test.tsx
index 62f121d68c..945d53bc9f 100644
--- a/frontend/src/proprietary/routes/login/OAuthButtons.test.tsx
+++ b/frontend/src/proprietary/routes/login/OAuthButtons.test.tsx
@@ -1,291 +1,243 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import { render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { MantineProvider } from '@mantine/core';
-import OAuthButtons from '@app/routes/login/OAuthButtons';
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MantineProvider } from "@mantine/core";
+import OAuthButtons from "@app/routes/login/OAuthButtons";
 
 // Mock i18n
-vi.mock('react-i18next', () => ({
+vi.mock("react-i18next", () => ({
   useTranslation: () => ({
     t: (key: string, fallback?: string) => fallback || key,
   }),
 }));
 
-const TestWrapper = ({ children }: { children: React.ReactNode }) => (
-  <MantineProvider>{children}</MantineProvider>
-);
+const TestWrapper = ({ children }: { children: React.ReactNode }) => <MantineProvider>{children}</MantineProvider>;
 
-describe('OAuthButtons', () => {
+describe("OAuthButtons", () => {
   const mockOnProviderClick = vi.fn();
 
   beforeEach(() => {
     vi.clearAllMocks();
   });
 
-  it('should render known providers with correct labels', () => {
-    const enabledProviders = ['google', 'github', 'authentik'];
+  it("should render known providers with correct labels", () => {
+    const enabledProviders = ["google", "github", "authentik"];
 
     render(
       <TestWrapper>
-        <OAuthButtons
-          onProviderClick={mockOnProviderClick}
-          isSubmitting={false}
-          enabledProviders={enabledProviders}
-        />
-      </TestWrapper>
+        <OAuthButtons onProviderClick={mockOnProviderClick} isSubmitting={false} enabledProviders={enabledProviders} />
+      </TestWrapper>,
     );
 
     // Check that known providers are rendered with their labels
-    expect(screen.getByText('Google')).toBeTruthy();
-    expect(screen.getByText('GitHub')).toBeTruthy();
-    expect(screen.getByText('Authentik')).toBeTruthy();
+    expect(screen.getByText("Google")).toBeTruthy();
+    expect(screen.getByText("GitHub")).toBeTruthy();
+    expect(screen.getByText("Authentik")).toBeTruthy();
   });
 
-  it('should render unknown provider with capitalized label and generic icon', () => {
-    const enabledProviders = ['mycompany'];
+  it("should render unknown provider with capitalized label and generic icon", () => {
+    const enabledProviders = ["mycompany"];
 
     render(
       <TestWrapper>
-        <OAuthButtons
-          onProviderClick={mockOnProviderClick}
-          isSubmitting={false}
-          enabledProviders={enabledProviders}
-        />
-      </TestWrapper>
+        <OAuthButtons onProviderClick={mockOnProviderClick} isSubmitting={false} enabledProviders={enabledProviders} />
+      </TestWrapper>,
     );
 
     // Unknown provider should be capitalized
-    expect(screen.getByText('Mycompany')).toBeTruthy();
+    expect(screen.getByText("Mycompany")).toBeTruthy();
 
     // Check that button has generic OIDC icon
-    const button = screen.getByText('Mycompany').closest('button');
+    const button = screen.getByText("Mycompany").closest("button");
     expect(button).toBeTruthy();
-    const img = button?.querySelector('img');
-    expect(img?.src).toContain('oidc.svg');
+    const img = button?.querySelector("img");
+    expect(img?.src).toContain("oidc.svg");
   });
 
   it('should call onProviderClick with actual provider ID (not "oidc")', async () => {
     const user = userEvent.setup();
-    const enabledProviders = ['mycompany'];
+    const enabledProviders = ["mycompany"];
 
     render(
       <TestWrapper>
-        <OAuthButtons
-          onProviderClick={mockOnProviderClick}
-          isSubmitting={false}
-          enabledProviders={enabledProviders}
-        />
-      </TestWrapper>
+        <OAuthButtons onProviderClick={mockOnProviderClick} isSubmitting={false} enabledProviders={enabledProviders} />
+      </TestWrapper>,
     );
 
-    const button = screen.getByText('Mycompany');
+    const button = screen.getByText("Mycompany");
     await user.click(button);
 
     // Should use actual provider ID 'mycompany', NOT 'oidc'
-    expect(mockOnProviderClick).toHaveBeenCalledWith('mycompany');
+    expect(mockOnProviderClick).toHaveBeenCalledWith("mycompany");
   });
 
   it('should call onProviderClick with "authentik" when authentik is clicked', async () => {
     const user = userEvent.setup();
-    const enabledProviders = ['authentik'];
+    const enabledProviders = ["authentik"];
 
     render(
       <TestWrapper>
-        <OAuthButtons
-          onProviderClick={mockOnProviderClick}
-          isSubmitting={false}
-          enabledProviders={enabledProviders}
-        />
-      </TestWrapper>
+        <OAuthButtons onProviderClick={mockOnProviderClick} isSubmitting={false} enabledProviders={enabledProviders} />
+      </TestWrapper>,
     );
 
-    const button = screen.getByText('Authentik');
+    const button = screen.getByText("Authentik");
     await user.click(button);
 
-    expect(mockOnProviderClick).toHaveBeenCalledWith('authentik');
+    expect(mockOnProviderClick).toHaveBeenCalledWith("authentik");
   });
 
   it('should call onProviderClick with "oidc" when OIDC is explicitly configured', async () => {
     const user = userEvent.setup();
-    const enabledProviders = ['oidc'];
+    const enabledProviders = ["oidc"];
 
     render(
       <TestWrapper>
-        <OAuthButtons
-          onProviderClick={mockOnProviderClick}
-          isSubmitting={false}
-          enabledProviders={enabledProviders}
-        />
-      </TestWrapper>
+        <OAuthButtons onProviderClick={mockOnProviderClick} isSubmitting={false} enabledProviders={enabledProviders} />
+      </TestWrapper>,
     );
 
-    const button = screen.getByText('OIDC');
+    const button = screen.getByText("OIDC");
     await user.click(button);
 
-    expect(mockOnProviderClick).toHaveBeenCalledWith('oidc');
+    expect(mockOnProviderClick).toHaveBeenCalledWith("oidc");
   });
 
-  it('should disable buttons when isSubmitting is true', () => {
-    const enabledProviders = ['google', 'github'];
+  it("should disable buttons when isSubmitting is true", () => {
+    const enabledProviders = ["google", "github"];
 
     render(
       <TestWrapper>
-        <OAuthButtons
-          onProviderClick={mockOnProviderClick}
-          isSubmitting={true}
-          enabledProviders={enabledProviders}
-        />
-      </TestWrapper>
+        <OAuthButtons onProviderClick={mockOnProviderClick} isSubmitting={true} enabledProviders={enabledProviders} />
+      </TestWrapper>,
     );
 
-    const googleButton = screen.getByText('Google').closest('button') as HTMLButtonElement;
-    const githubButton = screen.getByText('GitHub').closest('button') as HTMLButtonElement;
+    const googleButton = screen.getByText("Google").closest("button") as HTMLButtonElement;
+    const githubButton = screen.getByText("GitHub").closest("button") as HTMLButtonElement;
 
     expect(googleButton.disabled).toBe(true);
     expect(githubButton.disabled).toBe(true);
   });
 
-  it('should render nothing when no providers are enabled', () => {
+  it("should render nothing when no providers are enabled", () => {
     const { container } = render(
       <TestWrapper>
-        <OAuthButtons
-          onProviderClick={mockOnProviderClick}
-          isSubmitting={false}
-          enabledProviders={[]}
-        />
-      </TestWrapper>
+        <OAuthButtons onProviderClick={mockOnProviderClick} isSubmitting={false} enabledProviders={[]} />
+      </TestWrapper>,
     );
 
     // Should render null/nothing (excluding Mantine's style tags)
-    const hasContent = Array.from(container.children).some(
-      child => child.tagName.toLowerCase() !== 'style'
-    );
+    const hasContent = Array.from(container.children).some((child) => child.tagName.toLowerCase() !== "style");
     expect(hasContent).toBe(false);
   });
 
-  it('should render multiple unknown providers with correct IDs', async () => {
+  it("should render multiple unknown providers with correct IDs", async () => {
     const user = userEvent.setup();
-    const enabledProviders = ['company1', 'company2', 'company3'];
+    const enabledProviders = ["company1", "company2", "company3"];
 
     render(
       <TestWrapper>
-        <OAuthButtons
-          onProviderClick={mockOnProviderClick}
-          isSubmitting={false}
-          enabledProviders={enabledProviders}
-        />
-      </TestWrapper>
+        <OAuthButtons onProviderClick={mockOnProviderClick} isSubmitting={false} enabledProviders={enabledProviders} />
+      </TestWrapper>,
     );
 
     // All should be capitalized
-    expect(screen.getByText('Company1')).toBeTruthy();
-    expect(screen.getByText('Company2')).toBeTruthy();
-    expect(screen.getByText('Company3')).toBeTruthy();
+    expect(screen.getByText("Company1")).toBeTruthy();
+    expect(screen.getByText("Company2")).toBeTruthy();
+    expect(screen.getByText("Company3")).toBeTruthy();
 
     // Click each and verify correct ID is passed
-    await user.click(screen.getByText('Company1'));
-    expect(mockOnProviderClick).toHaveBeenCalledWith('company1');
+    await user.click(screen.getByText("Company1"));
+    expect(mockOnProviderClick).toHaveBeenCalledWith("company1");
 
-    await user.click(screen.getByText('Company2'));
-    expect(mockOnProviderClick).toHaveBeenCalledWith('company2');
+    await user.click(screen.getByText("Company2"));
+    expect(mockOnProviderClick).toHaveBeenCalledWith("company2");
 
-    await user.click(screen.getByText('Company3'));
-    expect(mockOnProviderClick).toHaveBeenCalledWith('company3');
+    await user.click(screen.getByText("Company3"));
+    expect(mockOnProviderClick).toHaveBeenCalledWith("company3");
   });
 
-  it('should use correct icon for known providers', () => {
-    const enabledProviders = ['google', 'github', 'authentik', 'keycloak'];
+  it("should use correct icon for known providers", () => {
+    const enabledProviders = ["google", "github", "authentik", "keycloak"];
 
     render(
       <TestWrapper>
-        <OAuthButtons
-          onProviderClick={mockOnProviderClick}
-          isSubmitting={false}
-          enabledProviders={enabledProviders}
-        />
-      </TestWrapper>
+        <OAuthButtons onProviderClick={mockOnProviderClick} isSubmitting={false} enabledProviders={enabledProviders} />
+      </TestWrapper>,
     );
 
     // Check that each known provider has its specific icon
-    const googleButton = screen.getByText('Google').closest('button');
-    expect(googleButton?.querySelector('img')?.src).toContain('google.svg');
+    const googleButton = screen.getByText("Google").closest("button");
+    expect(googleButton?.querySelector("img")?.src).toContain("google.svg");
 
-    const githubButton = screen.getByText('GitHub').closest('button');
-    expect(githubButton?.querySelector('img')?.src).toContain('github.svg');
+    const githubButton = screen.getByText("GitHub").closest("button");
+    expect(githubButton?.querySelector("img")?.src).toContain("github.svg");
 
-    const authentikButton = screen.getByText('Authentik').closest('button');
-    expect(authentikButton?.querySelector('img')?.src).toContain('authentik.svg');
+    const authentikButton = screen.getByText("Authentik").closest("button");
+    expect(authentikButton?.querySelector("img")?.src).toContain("authentik.svg");
 
-    const keycloakButton = screen.getByText('Keycloak').closest('button');
-    expect(keycloakButton?.querySelector('img')?.src).toContain('keycloak.svg');
+    const keycloakButton = screen.getByText("Keycloak").closest("button");
+    expect(keycloakButton?.querySelector("img")?.src).toContain("keycloak.svg");
   });
 
-  it('should handle mixed known and unknown providers', async () => {
+  it("should handle mixed known and unknown providers", async () => {
     const user = userEvent.setup();
-    const enabledProviders = ['google', 'mycompany', 'authentik', 'custom'];
+    const enabledProviders = ["google", "mycompany", "authentik", "custom"];
 
     render(
       <TestWrapper>
-        <OAuthButtons
-          onProviderClick={mockOnProviderClick}
-          isSubmitting={false}
-          enabledProviders={enabledProviders}
-        />
-      </TestWrapper>
+        <OAuthButtons onProviderClick={mockOnProviderClick} isSubmitting={false} enabledProviders={enabledProviders} />
+      </TestWrapper>,
     );
 
     // Known providers with correct labels
-    expect(screen.getByText('Google')).toBeTruthy();
-    expect(screen.getByText('Authentik')).toBeTruthy();
+    expect(screen.getByText("Google")).toBeTruthy();
+    expect(screen.getByText("Authentik")).toBeTruthy();
 
     // Unknown providers with capitalized labels
-    expect(screen.getByText('Mycompany')).toBeTruthy();
-    expect(screen.getByText('Custom')).toBeTruthy();
+    expect(screen.getByText("Mycompany")).toBeTruthy();
+    expect(screen.getByText("Custom")).toBeTruthy();
 
     // Click each and verify IDs are preserved
-    await user.click(screen.getByText('Google'));
-    expect(mockOnProviderClick).toHaveBeenCalledWith('google');
+    await user.click(screen.getByText("Google"));
+    expect(mockOnProviderClick).toHaveBeenCalledWith("google");
 
-    await user.click(screen.getByText('Mycompany'));
-    expect(mockOnProviderClick).toHaveBeenCalledWith('mycompany');
+    await user.click(screen.getByText("Mycompany"));
+    expect(mockOnProviderClick).toHaveBeenCalledWith("mycompany");
 
-    await user.click(screen.getByText('Authentik'));
-    expect(mockOnProviderClick).toHaveBeenCalledWith('authentik');
+    await user.click(screen.getByText("Authentik"));
+    expect(mockOnProviderClick).toHaveBeenCalledWith("authentik");
 
-    await user.click(screen.getByText('Custom'));
-    expect(mockOnProviderClick).toHaveBeenCalledWith('custom');
+    await user.click(screen.getByText("Custom"));
+    expect(mockOnProviderClick).toHaveBeenCalledWith("custom");
   });
 
-  it('should maintain provider ID consistency - critical for OAuth redirect', async () => {
+  it("should maintain provider ID consistency - critical for OAuth redirect", async () => {
     const user = userEvent.setup();
 
     // This test ensures the fix for GitHub issue #5141
     // The provider ID used in the button click MUST match the backend registration ID
     // Previously, unknown providers were mapped to 'oidc', breaking the OAuth flow
 
-    const enabledProviders = ['authentik', 'okta', 'auth0'];
+    const enabledProviders = ["authentik", "okta", "auth0"];
 
     render(
       <TestWrapper>
-        <OAuthButtons
-          onProviderClick={mockOnProviderClick}
-          isSubmitting={false}
-          enabledProviders={enabledProviders}
-        />
-      </TestWrapper>
+        <OAuthButtons onProviderClick={mockOnProviderClick} isSubmitting={false} enabledProviders={enabledProviders} />
+      </TestWrapper>,
     );
 
     // Each provider should use its actual ID, not 'oidc'
-    await user.click(screen.getByText('Authentik'));
-    expect(mockOnProviderClick).toHaveBeenLastCalledWith('authentik');
+    await user.click(screen.getByText("Authentik"));
+    expect(mockOnProviderClick).toHaveBeenLastCalledWith("authentik");
 
-    await user.click(screen.getByText('Okta'));
-    expect(mockOnProviderClick).toHaveBeenLastCalledWith('okta');
+    await user.click(screen.getByText("Okta"));
+    expect(mockOnProviderClick).toHaveBeenLastCalledWith("okta");
 
-    await user.click(screen.getByText('Auth0'));
-    expect(mockOnProviderClick).toHaveBeenLastCalledWith('auth0');
+    await user.click(screen.getByText("Auth0"));
+    expect(mockOnProviderClick).toHaveBeenLastCalledWith("auth0");
 
     // Verify none were called with 'oidc' instead of their actual ID
-    expect(mockOnProviderClick).not.toHaveBeenCalledWith('oidc');
+    expect(mockOnProviderClick).not.toHaveBeenCalledWith("oidc");
   });
 });
diff --git a/frontend/src/proprietary/routes/login/OAuthButtons.tsx b/frontend/src/proprietary/routes/login/OAuthButtons.tsx
index b6886bbc47..80a21d4106 100644
--- a/frontend/src/proprietary/routes/login/OAuthButtons.tsx
+++ b/frontend/src/proprietary/routes/login/OAuthButtons.tsx
@@ -1,7 +1,7 @@
-import { useTranslation } from 'react-i18next';
-import { BASE_PATH } from '@app/constants/app';
-import { type OAuthProvider } from '@app/auth/oauthTypes';
-import { Button } from '@mantine/core';
+import { useTranslation } from "react-i18next";
+import { BASE_PATH } from "@app/constants/app";
+import { type OAuthProvider } from "@app/auth/oauthTypes";
+import { Button } from "@mantine/core";
 
 // Debug flag to show all providers for UI testing
 // Set to true to see all SSO options regardless of backend configuration
@@ -10,66 +10,64 @@ export const DEBUG_SHOW_ALL_PROVIDERS = false;
 // OAuth provider configuration - maps provider ID to display info
 // Known providers get custom icons; unknown providers use generic SSO icon
 export const oauthProviderConfig: Record<string, { label: string; file: string }> = {
-  google: { label: 'Google', file: 'google.svg' },
-  github: { label: 'GitHub', file: 'github.svg' },
-  apple: { label: 'Apple', file: 'apple.svg' },
-  azure: { label: 'Microsoft', file: 'microsoft.svg' },
-  keycloak: { label: 'Keycloak', file: 'keycloak.svg' },
-  cloudron: { label: 'Cloudron', file: 'cloudron.svg' },
-  authentik: { label: 'Authentik', file: 'authentik.svg' },
-  oidc: { label: 'OIDC', file: 'oidc.svg' }
+  google: { label: "Google", file: "google.svg" },
+  github: { label: "GitHub", file: "github.svg" },
+  apple: { label: "Apple", file: "apple.svg" },
+  azure: { label: "Microsoft", file: "microsoft.svg" },
+  keycloak: { label: "Keycloak", file: "keycloak.svg" },
+  cloudron: { label: "Cloudron", file: "cloudron.svg" },
+  authentik: { label: "Authentik", file: "authentik.svg" },
+  oidc: { label: "OIDC", file: "oidc.svg" },
 };
 
 // Generic fallback for unknown providers
-const GENERIC_PROVIDER_ICON = 'oidc.svg';
+const GENERIC_PROVIDER_ICON = "oidc.svg";
 
 interface OAuthButtonsProps {
-  onProviderClick: (provider: OAuthProvider) => void
-  isSubmitting: boolean
-  layout?: 'vertical' | 'grid' | 'icons'
-  enabledProviders?: OAuthProvider[]  // List of full auth paths from backend (e.g., '/oauth2/authorization/google', '/saml2/authenticate/stirling')
-  ctaPrefix?: string
-  styleVariant?: 'neutral' | 'tinted' | 'outline' | 'light'
-  demoMode?: boolean
-  useNewStyle?: boolean
+  onProviderClick: (provider: OAuthProvider) => void;
+  isSubmitting: boolean;
+  layout?: "vertical" | "grid" | "icons";
+  enabledProviders?: OAuthProvider[]; // List of full auth paths from backend (e.g., '/oauth2/authorization/google', '/saml2/authenticate/stirling')
+  ctaPrefix?: string;
+  styleVariant?: "neutral" | "tinted" | "outline" | "light";
+  demoMode?: boolean;
+  useNewStyle?: boolean;
 }
 
 export default function OAuthButtons({
   onProviderClick,
   isSubmitting,
-  layout = 'vertical',
+  layout = "vertical",
   enabledProviders = [],
   ctaPrefix,
-  styleVariant = 'neutral',
+  styleVariant = "neutral",
   demoMode = false,
   useNewStyle = false,
 }: OAuthButtonsProps) {
   const { t } = useTranslation();
 
   // Debug mode: show all providers for UI testing
-  const providersToShow = DEBUG_SHOW_ALL_PROVIDERS
-    ? Object.keys(oauthProviderConfig)
-    : enabledProviders;
+  const providersToShow = DEBUG_SHOW_ALL_PROVIDERS ? Object.keys(oauthProviderConfig) : enabledProviders;
 
   // Build provider list - extract provider ID from full path for display
-  const providers = providersToShow.map(pathOrId => {
+  const providers = providersToShow.map((pathOrId) => {
     // Extract provider ID from full path (e.g., '/saml2/authenticate/stirling' -> 'stirling')
-    const providerId = pathOrId.split('/').pop() || pathOrId;
+    const providerId = pathOrId.split("/").pop() || pathOrId;
 
     if (providerId in oauthProviderConfig) {
       // Known provider - use predefined icon and label
       return {
-        id: pathOrId,  // Keep full path for redirect
-        providerId,    // Store extracted ID for display lookup
-        ...oauthProviderConfig[providerId]
+        id: pathOrId, // Keep full path for redirect
+        providerId, // Store extracted ID for display lookup
+        ...oauthProviderConfig[providerId],
       };
     }
     // Unknown provider - use generic icon and capitalize ID for label
     return {
-      id: pathOrId,  // Keep full path for redirect
-      providerId,    // Store extracted ID for display lookup
+      id: pathOrId, // Keep full path for redirect
+      providerId, // Store extracted ID for display lookup
       label: providerId.charAt(0).toUpperCase() + providerId.slice(1),
-      file: GENERIC_PROVIDER_ICON
+      file: GENERIC_PROVIDER_ICON,
     };
   });
 
@@ -79,33 +77,33 @@ export default function OAuthButtons({
   }
 
   const isSingleProvider = providers.length === 1;
-  const isTinted = styleVariant === 'tinted';
-  const isOutline = styleVariant === 'outline';
-  const isLight = styleVariant === 'light';
+  const isTinted = styleVariant === "tinted";
+  const isOutline = styleVariant === "outline";
+  const isLight = styleVariant === "light";
   const accentMap: Record<string, string> = {
-    google: '#4285F4',
-    github: '#111827',
-    apple: '#111827',
-    azure: '#0078D4',
-    keycloak: '#2C2C2C',
-    cloudron: '#3B82F6',
-    authentik: '#FA7B17',
-    oidc: '#334155',
+    google: "#4285F4",
+    github: "#111827",
+    apple: "#111827",
+    azure: "#0078D4",
+    keycloak: "#2C2C2C",
+    cloudron: "#3B82F6",
+    authentik: "#FA7B17",
+    oidc: "#334155",
   };
 
-  if (layout === 'icons') {
+  if (layout === "icons") {
     return (
       <div className="oauth-container-icons">
         {providers.map((p) => (
-          <div key={p.id} title={`${t('login.signInWith', 'Sign in with')} ${p.label}`}>
+          <div key={p.id} title={`${t("login.signInWith", "Sign in with")} ${p.label}`}>
             <Button
               onClick={() => onProviderClick(p.id)}
               disabled={isSubmitting}
               className="oauth-button-icon"
-              aria-label={`${t('login.signInWith', 'Sign in with')} ${p.label}`}
+              aria-label={`${t("login.signInWith", "Sign in with")} ${p.label}`}
               variant="default"
             >
-              <img src={`${BASE_PATH}/Login/${p.file}`} alt={p.label} className="oauth-icon-small"/>
+              <img src={`${BASE_PATH}/Login/${p.file}`} alt={p.label} className="oauth-icon-small" />
             </Button>
           </div>
         ))}
@@ -113,19 +111,19 @@ export default function OAuthButtons({
     );
   }
 
-  if (layout === 'grid') {
+  if (layout === "grid") {
     return (
       <div className="oauth-container-grid">
         {providers.map((p) => (
-          <div key={p.id} title={`${t('login.signInWith', 'Sign in with')} ${p.label}`}>
+          <div key={p.id} title={`${t("login.signInWith", "Sign in with")} ${p.label}`}>
             <Button
               onClick={() => onProviderClick(p.id)}
               disabled={isSubmitting}
               className="oauth-button-grid"
-              aria-label={`${t('login.signInWith', 'Sign in with')} ${p.label}`}
+              aria-label={`${t("login.signInWith", "Sign in with")} ${p.label}`}
               variant="default"
             >
-              <img src={`${BASE_PATH}/Login/${p.file}`} alt={p.label} className="oauth-icon-medium"/>
+              <img src={`${BASE_PATH}/Login/${p.file}`} alt={p.label} className="oauth-icon-medium" />
             </Button>
           </div>
         ))}
@@ -134,16 +132,16 @@ export default function OAuthButtons({
   }
 
   return (
-    <div className={`oauth-container-vertical${useNewStyle && isSingleProvider ? ' oauth-container-single' : ''}`}>
+    <div className={`oauth-container-vertical${useNewStyle && isSingleProvider ? " oauth-container-single" : ""}`}>
       {providers.map((p) => (
-        <div key={p.id} title={`${t('login.signInWith', 'Sign in with')} ${p.label}`}>
+        <div key={p.id} title={`${t("login.signInWith", "Sign in with")} ${p.label}`}>
           <Button
             onClick={() => onProviderClick(p.id)}
             disabled={!demoMode && isSubmitting}
-            className={`oauth-button-vertical${useNewStyle && isSingleProvider ? ' oauth-button-vertical-single' : ''}${!useNewStyle ? ' oauth-button-vertical-legacy' : ''}${isTinted ? ' oauth-button-vertical-tinted' : ''}${isOutline ? ' oauth-button-vertical-outline' : ''}${isLight ? ' oauth-button-vertical-light' : ''}`}
-            aria-label={`${t('login.signInWith', 'Sign in with')} ${p.label}`}
+            className={`oauth-button-vertical${useNewStyle && isSingleProvider ? " oauth-button-vertical-single" : ""}${!useNewStyle ? " oauth-button-vertical-legacy" : ""}${isTinted ? " oauth-button-vertical-tinted" : ""}${isOutline ? " oauth-button-vertical-outline" : ""}${isLight ? " oauth-button-vertical-light" : ""}`}
+            aria-label={`${t("login.signInWith", "Sign in with")} ${p.label}`}
             variant="default"
-            style={isTinted ? { '--oauth-accent': accentMap[p.providerId] || '#334155' } as React.CSSProperties : undefined}
+            style={isTinted ? ({ "--oauth-accent": accentMap[p.providerId] || "#334155" } as React.CSSProperties) : undefined}
           >
             <span className="oauth-button-left">
               <span className="oauth-icon-wrapper">
@@ -154,7 +152,13 @@ export default function OAuthButtons({
             {useNewStyle && isSingleProvider && (
               <span className="oauth-button-right" aria-hidden="true">
                 <svg className="oauth-arrow-icon" viewBox="0 0 24 24" fill="none">
-                  <path d="M5 12h12m0 0-5-5m5 5-5 5" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
+                  <path
+                    d="M5 12h12m0 0-5-5m5 5-5 5"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
                 </svg>
               </span>
             )}
diff --git a/frontend/src/proprietary/routes/signup/AuthService.ts b/frontend/src/proprietary/routes/signup/AuthService.ts
index d21bbc062d..ed069e27de 100644
--- a/frontend/src/proprietary/routes/signup/AuthService.ts
+++ b/frontend/src/proprietary/routes/signup/AuthService.ts
@@ -1,45 +1,40 @@
-import { springAuth } from '@app/auth/springAuthClient';
-import { BASE_PATH } from '@app/constants/app';
+import { springAuth } from "@app/auth/springAuthClient";
+import { BASE_PATH } from "@app/constants/app";
 
 export const useAuthService = () => {
-
-  const signUp = async (
-    email: string,
-    password: string,
-    name: string
-  ) => {
-    console.log('[Signup] Creating account for:', email);
+  const signUp = async (email: string, password: string, name: string) => {
+    console.log("[Signup] Creating account for:", email);
 
     const { user, session, error } = await springAuth.signUp({
       email: email.trim(),
       password: password,
       options: {
         data: { full_name: name },
-        emailRedirectTo: `${BASE_PATH}/auth/callback`
-      }
+        emailRedirectTo: `${BASE_PATH}/auth/callback`,
+      },
     });
 
     if (error) {
-      console.error('[Signup] Sign up error:', error);
+      console.error("[Signup] Sign up error:", error);
       throw new Error(error.message);
     }
 
     if (user) {
-      console.log('[Signup] Sign up successful:', user);
+      console.log("[Signup] Sign up successful:", user);
       return {
         user: user,
         session: session,
-        requiresEmailConfirmation: user && !session
+        requiresEmailConfirmation: user && !session,
       };
     }
 
-    throw new Error('Unknown error occurred during signup');
+    throw new Error("Unknown error occurred during signup");
   };
 
-  const signInWithProvider = async (provider: 'github' | 'google' | 'apple' | 'azure') => {
+  const signInWithProvider = async (provider: "github" | "google" | "apple" | "azure") => {
     const { error } = await springAuth.signInWithOAuth({
       provider,
-      options: { redirectTo: `${BASE_PATH}/auth/callback` }
+      options: { redirectTo: `${BASE_PATH}/auth/callback` },
     });
 
     if (error) {
@@ -49,7 +44,6 @@ export const useAuthService = () => {
 
   return {
     signUp,
-    signInWithProvider
+    signInWithProvider,
   };
-}
-;
+};
diff --git a/frontend/src/proprietary/routes/signup/SignupForm.tsx b/frontend/src/proprietary/routes/signup/SignupForm.tsx
index 92c06c319f..5886ce9a5c 100644
--- a/frontend/src/proprietary/routes/signup/SignupForm.tsx
+++ b/frontend/src/proprietary/routes/signup/SignupForm.tsx
@@ -1,29 +1,29 @@
-import { useEffect } from 'react';
-import '@app/routes/authShared/auth.css';
-import { useTranslation } from 'react-i18next';
-import { Checkbox, TextInput, PasswordInput, Button } from '@mantine/core';
-import { SignupFieldErrors } from '@app/routes/signup/SignupFormValidation';
+import { useEffect } from "react";
+import "@app/routes/authShared/auth.css";
+import { useTranslation } from "react-i18next";
+import { Checkbox, TextInput, PasswordInput, Button } from "@mantine/core";
+import { SignupFieldErrors } from "@app/routes/signup/SignupFormValidation";
 
 interface SignupFormProps {
-  name?: string
-  email: string
-  password: string
-  confirmPassword: string
-  agree?: boolean
-  setName?: (name: string) => void
-  setEmail: (email: string) => void
-  setPassword: (password: string) => void
-  setConfirmPassword: (password: string) => void
-  setAgree?: (agree: boolean) => void
-  onSubmit: () => void
-  isSubmitting: boolean
-  fieldErrors?: SignupFieldErrors
-  showName?: boolean
-  showTerms?: boolean
+  name?: string;
+  email: string;
+  password: string;
+  confirmPassword: string;
+  agree?: boolean;
+  setName?: (name: string) => void;
+  setEmail: (email: string) => void;
+  setPassword: (password: string) => void;
+  setConfirmPassword: (password: string) => void;
+  setAgree?: (agree: boolean) => void;
+  onSubmit: () => void;
+  isSubmitting: boolean;
+  fieldErrors?: SignupFieldErrors;
+  showName?: boolean;
+  showTerms?: boolean;
 }
 
 export default function SignupForm({
-  name = '',
+  name = "",
   email,
   password,
   confirmPassword,
@@ -37,14 +37,14 @@ export default function SignupForm({
   isSubmitting,
   fieldErrors = {},
   showName = false,
-  showTerms = false
+  showTerms = false,
 }: SignupFormProps) {
   const { t } = useTranslation();
   const showConfirm = password.length >= 4;
 
   useEffect(() => {
     if (!showConfirm && confirmPassword) {
-      setConfirmPassword('');
+      setConfirmPassword("");
     }
   }, [showConfirm, confirmPassword, setConfirmPassword]);
 
@@ -55,14 +55,14 @@ export default function SignupForm({
           <div className="auth-field">
             <TextInput
               id="name"
-              label={t('signup.name')}
+              label={t("signup.name")}
               name="name"
               autoComplete="name"
-              placeholder={t('signup.enterName')}
+              placeholder={t("signup.enterName")}
               value={name}
               onChange={(e) => setName?.(e.target.value)}
               error={fieldErrors.name}
-              classNames={{ label: 'auth-label' }}
+              classNames={{ label: "auth-label" }}
             />
           </div>
         )}
@@ -70,31 +70,31 @@ export default function SignupForm({
         <div className="auth-field">
           <TextInput
             id="email"
-            label={t('signup.email')}
+            label={t("signup.email")}
             type="email"
             name="email"
             autoComplete="email"
-            placeholder={t('signup.enterEmail')}
+            placeholder={t("signup.enterEmail")}
             value={email}
             onChange={(e) => setEmail(e.target.value)}
-            onKeyDown={(e) => e.key === 'Enter' && !isSubmitting && onSubmit()}
+            onKeyDown={(e) => e.key === "Enter" && !isSubmitting && onSubmit()}
             error={fieldErrors.email}
-            classNames={{ label: 'auth-label' }}
+            classNames={{ label: "auth-label" }}
           />
         </div>
 
         <div className="auth-field">
           <PasswordInput
             id="password"
-            label={t('signup.password')}
+            label={t("signup.password")}
             name="new-password"
             autoComplete="new-password"
-            placeholder={t('signup.enterPassword')}
+            placeholder={t("signup.enterPassword")}
             value={password}
             onChange={(e) => setPassword(e.target.value)}
-            onKeyDown={(e) => e.key === 'Enter' && !isSubmitting && onSubmit()}
+            onKeyDown={(e) => e.key === "Enter" && !isSubmitting && onSubmit()}
             error={fieldErrors.password}
-            classNames={{ label: 'auth-label' }}
+            classNames={{ label: "auth-label" }}
           />
         </div>
 
@@ -106,15 +106,15 @@ export default function SignupForm({
           <div className="auth-field">
             <PasswordInput
               id="confirmPassword"
-              label={t('signup.confirmPassword')}
+              label={t("signup.confirmPassword")}
               name="new-password"
               autoComplete="new-password"
-              placeholder={t('signup.confirmPasswordPlaceholder')}
+              placeholder={t("signup.confirmPasswordPlaceholder")}
               value={confirmPassword}
               onChange={(e) => setConfirmPassword(e.target.value)}
-              onKeyDown={(e) => e.key === 'Enter' && !isSubmitting && onSubmit()}
+              onKeyDown={(e) => e.key === "Enter" && !isSubmitting && onSubmit()}
               error={fieldErrors.confirmPassword}
-              classNames={{ label: 'auth-label' }}
+              classNames={{ label: "auth-label" }}
             />
           </div>
         </div>
@@ -130,9 +130,9 @@ export default function SignupForm({
             className="auth-checkbox"
             label={
               <span className="auth-terms-label">
-                {t("legal.iAgreeToThe", 'I agree to all of the')}{' '}
+                {t("legal.iAgreeToThe", "I agree to all of the")}{" "}
                 <a href="https://www.stirlingpdf.com/terms" target="_blank" rel="noopener noreferrer">
-                  {t('legal.terms', 'Terms and Conditions')}
+                  {t("legal.terms", "Terms and Conditions")}
                 </a>
               </span>
             }
@@ -148,7 +148,7 @@ export default function SignupForm({
         fullWidth
         loading={isSubmitting}
       >
-        {isSubmitting ? t('signup.creatingAccount') : t('signup.signUp')}
+        {isSubmitting ? t("signup.creatingAccount") : t("signup.signUp")}
       </Button>
     </>
   );
diff --git a/frontend/src/proprietary/routes/signup/SignupFormValidation.ts b/frontend/src/proprietary/routes/signup/SignupFormValidation.ts
index 40c1ad7e7e..a8ceba6588 100644
--- a/frontend/src/proprietary/routes/signup/SignupFormValidation.ts
+++ b/frontend/src/proprietary/routes/signup/SignupFormValidation.ts
@@ -1,16 +1,16 @@
-import { useTranslation } from 'react-i18next';
+import { useTranslation } from "react-i18next";
 
 export interface SignupFieldErrors {
-  name?: string
-  email?: string
-  password?: string
-  confirmPassword?: string
+  name?: string;
+  email?: string;
+  password?: string;
+  confirmPassword?: string;
 }
 
 export interface SignupValidationResult {
-  isValid: boolean
-  error: string | null
-  fieldErrors?: SignupFieldErrors
+  isValid: boolean;
+  error: string | null;
+  fieldErrors?: SignupFieldErrors;
 }
 
 export const useSignupFormValidation = () => {
@@ -20,35 +20,35 @@ export const useSignupFormValidation = () => {
     email: string,
     password: string,
     confirmPassword: string,
-    name?: string
+    name?: string,
   ): SignupValidationResult => {
     const fieldErrors: SignupFieldErrors = {};
 
     // Validate name
     if (name !== undefined && name !== null && !name.trim()) {
-      fieldErrors.name = t('signup.nameRequired', 'Name is required');
+      fieldErrors.name = t("signup.nameRequired", "Name is required");
     }
 
     // Validate email
     const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
     if (!email) {
-      fieldErrors.email = t('signup.emailRequired', 'Email is required');
+      fieldErrors.email = t("signup.emailRequired", "Email is required");
     } else if (!emailRegex.test(email)) {
-      fieldErrors.email = t('signup.invalidEmail');
+      fieldErrors.email = t("signup.invalidEmail");
     }
 
     // Validate password
     if (!password) {
-      fieldErrors.password = t('signup.passwordRequired', 'Password is required');
+      fieldErrors.password = t("signup.passwordRequired", "Password is required");
     } else if (password.length < 6) {
-      fieldErrors.password = t('signup.passwordTooShort');
+      fieldErrors.password = t("signup.passwordTooShort");
     }
 
     // Validate confirm password
     if (!confirmPassword) {
-      fieldErrors.confirmPassword = t('signup.confirmPasswordRequired', 'Please confirm your password');
+      fieldErrors.confirmPassword = t("signup.confirmPasswordRequired", "Please confirm your password");
     } else if (password !== confirmPassword) {
-      fieldErrors.confirmPassword = t('signup.passwordsDoNotMatch');
+      fieldErrors.confirmPassword = t("signup.passwordsDoNotMatch");
     }
 
     const hasErrors = Object.keys(fieldErrors).length > 0;
@@ -56,11 +56,11 @@ export const useSignupFormValidation = () => {
     return {
       isValid: !hasErrors,
       error: null, // Don't show generic error, field errors are more specific
-      fieldErrors: hasErrors ? fieldErrors : undefined
+      fieldErrors: hasErrors ? fieldErrors : undefined,
     };
   };
 
   return {
-    validateSignupForm
+    validateSignupForm,
   };
-};
\ No newline at end of file
+};
diff --git a/frontend/src/proprietary/services/apiClientSetup.ts b/frontend/src/proprietary/services/apiClientSetup.ts
index 91c354999c..a5f0d5cbbd 100644
--- a/frontend/src/proprietary/services/apiClientSetup.ts
+++ b/frontend/src/proprietary/services/apiClientSetup.ts
@@ -1,4 +1,4 @@
-import { AxiosInstance, AxiosError, InternalAxiosRequestConfig } from 'axios';
+import { AxiosInstance, AxiosError, InternalAxiosRequestConfig } from "axios";
 
 let isRefreshing = false;
 let failedQueue: Array<{
@@ -8,43 +8,43 @@ let failedQueue: Array<{
 
 function getJwtTokenFromStorage(): string | null {
   try {
-    return localStorage.getItem('stirling_jwt');
+    return localStorage.getItem("stirling_jwt");
   } catch (error) {
-    console.error('[API Client] Failed to read JWT from localStorage:', error);
+    console.error("[API Client] Failed to read JWT from localStorage:", error);
     return null;
   }
 }
 
 function setJwtTokenInStorage(token: string): void {
   try {
-    localStorage.setItem('stirling_jwt', token);
-    console.debug('[API Client] Stored new JWT token in localStorage');
+    localStorage.setItem("stirling_jwt", token);
+    console.debug("[API Client] Stored new JWT token in localStorage");
   } catch (error) {
-    console.error('[API Client] Failed to store JWT in localStorage:', error);
+    console.error("[API Client] Failed to store JWT in localStorage:", error);
   }
 }
 
 function clearJwtTokenFromStorage(): void {
   try {
-    localStorage.removeItem('stirling_jwt');
-    console.debug('[API Client] Cleared JWT token from localStorage');
+    localStorage.removeItem("stirling_jwt");
+    console.debug("[API Client] Cleared JWT token from localStorage");
   } catch (error) {
-    console.error('[API Client] Failed to clear JWT from localStorage:', error);
+    console.error("[API Client] Failed to clear JWT from localStorage:", error);
   }
 }
 
 function getXsrfToken(): string | null {
   try {
-    const cookies = document.cookie.split(';');
+    const cookies = document.cookie.split(";");
     for (const cookie of cookies) {
-      const [name, value] = cookie.trim().split('=');
-      if (name === 'XSRF-TOKEN') {
+      const [name, value] = cookie.trim().split("=");
+      if (name === "XSRF-TOKEN") {
         return decodeURIComponent(value);
       }
     }
     return null;
   } catch (error) {
-    console.error('[API Client] Failed to read XSRF token from cookies:', error);
+    console.error("[API Client] Failed to read XSRF token from cookies:", error);
     return null;
   }
 }
@@ -61,30 +61,34 @@ function processQueue(error: Error | null, token: string | null = null): void {
 }
 
 async function refreshAuthToken(client: AxiosInstance): Promise<string> {
-  console.log('[API Client] Refreshing expired JWT token...');
+  console.log("[API Client] Refreshing expired JWT token...");
 
   try {
-    const response = await client.post('/api/v1/auth/refresh', {}, {
-      // Don't retry refresh requests to avoid infinite loops
-      headers: { 'X-Skip-Auth-Refresh': 'true' }
-    });
+    const response = await client.post(
+      "/api/v1/auth/refresh",
+      {},
+      {
+        // Don't retry refresh requests to avoid infinite loops
+        headers: { "X-Skip-Auth-Refresh": "true" },
+      },
+    );
 
     const newToken = response.data?.session?.access_token;
     if (!newToken) {
-      throw new Error('No access token in refresh response');
+      throw new Error("No access token in refresh response");
     }
 
     setJwtTokenInStorage(newToken);
-    console.log('[API Client] ✅ Token refreshed successfully');
+    console.log("[API Client] ✅ Token refreshed successfully");
     return newToken;
   } catch (error) {
-    console.error('[API Client] ❌ Token refresh failed:', error);
+    console.error("[API Client] ❌ Token refresh failed:", error);
     clearJwtTokenFromStorage();
 
     // Redirect to login
-    if (window.location.pathname !== '/login') {
-      console.log('[API Client] Redirecting to login page...');
-      window.location.href = '/login';
+    if (window.location.pathname !== "/login") {
+      console.log("[API Client] Redirecting to login page...");
+      window.location.href = "/login";
     }
 
     throw error;
@@ -100,18 +104,18 @@ export function setupApiInterceptors(client: AxiosInstance): void {
 
       if (jwtToken && !config.headers.Authorization) {
         config.headers.Authorization = `Bearer ${jwtToken}`;
-        console.debug('[API Client] Added JWT token from localStorage to Authorization header');
+        console.debug("[API Client] Added JWT token from localStorage to Authorization header");
       }
 
-      if (xsrfToken && !config.headers['X-XSRF-TOKEN']) {
-        config.headers['X-XSRF-TOKEN'] = xsrfToken;
+      if (xsrfToken && !config.headers["X-XSRF-TOKEN"]) {
+        config.headers["X-XSRF-TOKEN"] = xsrfToken;
       }
 
       return config;
     },
     (error) => {
       return Promise.reject(error);
-    }
+    },
   );
 
   // Install response interceptor to handle 401 and auto-refresh token
@@ -124,8 +128,8 @@ export function setupApiInterceptors(client: AxiosInstance): void {
       // Exception: /auth/me should trigger refresh (used by getSession)
       if (
         !originalRequest ||
-        (originalRequest.url?.includes('/api/v1/auth/') && !originalRequest.url?.includes('/api/v1/auth/me')) ||
-        originalRequest.headers?.['X-Skip-Auth-Refresh'] ||
+        (originalRequest.url?.includes("/api/v1/auth/") && !originalRequest.url?.includes("/api/v1/auth/me")) ||
+        originalRequest.headers?.["X-Skip-Auth-Refresh"] ||
         originalRequest._retry
       ) {
         return Promise.reject(error);
@@ -133,7 +137,7 @@ export function setupApiInterceptors(client: AxiosInstance): void {
 
       // Handle 401 errors by attempting token refresh
       if (error.response?.status === 401 && getJwtTokenFromStorage()) {
-        console.warn('[API Client] Received 401 error, attempting token refresh...');
+        console.warn("[API Client] Received 401 error, attempting token refresh...");
 
         if (isRefreshing) {
           // Already refreshing - queue this request
@@ -168,6 +172,6 @@ export function setupApiInterceptors(client: AxiosInstance): void {
       }
 
       return Promise.reject(error);
-    }
+    },
   );
 }
diff --git a/frontend/src/proprietary/services/licenseService.ts b/frontend/src/proprietary/services/licenseService.ts
index 4a4da273f2..b25ea71d75 100644
--- a/frontend/src/proprietary/services/licenseService.ts
+++ b/frontend/src/proprietary/services/licenseService.ts
@@ -1,8 +1,8 @@
-import apiClient from '@app/services/apiClient';
-import { supabase, isSupabaseConfigured } from '@app/services/supabaseClient';
-import { getCheckoutMode } from '@app/utils/protocolDetection';
-import { PLAN_FEATURES, PLAN_HIGHLIGHTS } from '@app/constants/planConstants';
-import type { LicenseInfo, PlanFeature } from '@app/types/license';
+import apiClient from "@app/services/apiClient";
+import { supabase, isSupabaseConfigured } from "@app/services/supabaseClient";
+import { getCheckoutMode } from "@app/utils/protocolDetection";
+import { PLAN_FEATURES, PLAN_HIGHLIGHTS } from "@app/constants/planConstants";
+import type { LicenseInfo, PlanFeature } from "@app/types/license";
 
 export interface PlanTier {
   id: string;
@@ -14,13 +14,13 @@ export interface PlanTier {
   features: PlanFeature[];
   highlights: readonly string[];
   isContactOnly?: boolean;
-  seatPrice?: number;        // Per-seat price for enterprise plans
-  requiresSeats?: boolean;   // Flag indicating seat selection is needed
-  lookupKey: string;         // Stripe lookup key for this plan
+  seatPrice?: number; // Per-seat price for enterprise plans
+  requiresSeats?: boolean; // Flag indicating seat selection is needed
+  lookupKey: string; // Stripe lookup key for this plan
 }
 
 export interface PlanTierGroup {
-  tier: 'free' | 'server' | 'enterprise';
+  tier: "free" | "server" | "enterprise";
   name: string;
   monthly: PlanTier | null;
   yearly: PlanTier | null;
@@ -34,12 +34,12 @@ export interface PlansResponse {
 }
 
 export interface CheckoutSessionRequest {
-  lookup_key: string;       // Stripe lookup key (e.g., 'selfhosted:server:monthly')
+  lookup_key: string; // Stripe lookup key (e.g., 'selfhosted:server:monthly')
   installation_id?: string; // Installation ID from backend (MAC-based fingerprint)
   current_license_key?: string; // Current license key for upgrades
   requires_seats?: boolean; // Whether to add adjustable seat pricing
-  seat_count?: number;      // Initial number of seats for enterprise plans (user can adjust in Stripe UI)
-  email?: string;           // Customer email for checkout pre-fill
+  seat_count?: number; // Initial number of seats for enterprise plans (user can adjust in Stripe UI)
+  email?: string; // Customer email for checkout pre-fill
   successUrl?: string;
   cancelUrl?: string;
 }
@@ -47,7 +47,7 @@ export interface CheckoutSessionRequest {
 export interface CheckoutSessionResponse {
   clientSecret: string;
   sessionId: string;
-  url?: string;  // URL for hosted checkout (when not using HTTPS)
+  url?: string; // URL for hosted checkout (when not using HTTPS)
 }
 
 export interface BillingPortalResponse {
@@ -59,7 +59,7 @@ export interface InstallationIdResponse {
 }
 
 export interface LicenseKeyResponse {
-  status: 'ready' | 'pending';
+  status: "ready" | "pending";
   license_key?: string;
   email?: string;
   plan?: string;
@@ -81,48 +81,51 @@ export interface LicenseSaveResponse {
 // Currency symbol mapping
 const getCurrencySymbol = (currency: string): string => {
   const currencySymbols: { [key: string]: string } = {
-    'gbp': '£',
-    'usd': '$',
-    'eur': '€',
-    'cny': '¥',
-    'inr': '₹',
-    'brl': 'R$',
-    'idr': 'Rp'
+    gbp: "£",
+    usd: "$",
+    eur: "€",
+    cny: "¥",
+    inr: "₹",
+    brl: "R$",
+    idr: "Rp",
   };
   return currencySymbols[currency.toLowerCase()] || currency.toUpperCase();
 };
 
 // Self-hosted plan lookup keys
 const SELF_HOSTED_LOOKUP_KEYS = [
-  'selfhosted:server:monthly',
-  'selfhosted:server:yearly',
-  'selfhosted:enterpriseseat:monthly',
-  'selfhosted:enterpriseseat:yearly',
+  "selfhosted:server:monthly",
+  "selfhosted:server:yearly",
+  "selfhosted:enterpriseseat:monthly",
+  "selfhosted:enterpriseseat:yearly",
 ];
 
 const licenseService = {
   /**
    * Get available plans with pricing for the specified currency
    */
-  async getPlans(currency: string = 'usd'): Promise<PlansResponse> {
+  async getPlans(currency: string = "usd"): Promise<PlansResponse> {
     try {
       // Check if Supabase is configured
       if (!isSupabaseConfigured || !supabase) {
-        throw new Error('Supabase is not configured. Please use static plans instead.');
+        throw new Error("Supabase is not configured. Please use static plans instead.");
       }
 
       // Fetch all self-hosted prices from Stripe
       const { data, error } = await supabase.functions.invoke<{
-        prices: Record<string, {
-          unit_amount: number;
-          currency: string;
-          lookup_key: string;
-        }>;
+        prices: Record<
+          string,
+          {
+            unit_amount: number;
+            currency: string;
+            lookup_key: string;
+          }
+        >;
         missing: string[];
-      }>('stripe-price-lookup', {
+      }>("stripe-price-lookup", {
         body: {
           lookup_keys: SELF_HOSTED_LOOKUP_KEYS,
-          currency
+          currency,
         },
       });
 
@@ -131,12 +134,12 @@ const licenseService = {
       }
 
       if (!data || !data.prices) {
-        throw new Error('No pricing data returned');
+        throw new Error("No pricing data returned");
       }
 
       // Log missing prices for debugging
       if (data.missing && data.missing.length > 0) {
-        console.warn('Missing Stripe prices for lookup keys:', data.missing, 'in currency:', currency);
+        console.warn("Missing Stripe prices for lookup keys:", data.missing, "in currency:", currency);
       }
 
       // Build price map for easy access
@@ -144,7 +147,7 @@ const licenseService = {
       for (const [lookupKey, priceData] of Object.entries(data.prices)) {
         priceMap.set(lookupKey, {
           unit_amount: priceData.unit_amount,
-          currency: priceData.currency
+          currency: priceData.currency,
         });
       }
 
@@ -159,83 +162,83 @@ const licenseService = {
       // Build plan tiers
       const plans: PlanTier[] = [
         {
-          id: 'selfhosted:server:monthly',
-          lookupKey: 'selfhosted:server:monthly',
-          name: 'Server - Monthly',
-          price: getPriceInfo('selfhosted:server:monthly'),
+          id: "selfhosted:server:monthly",
+          lookupKey: "selfhosted:server:monthly",
+          name: "Server - Monthly",
+          price: getPriceInfo("selfhosted:server:monthly"),
           currency: currencySymbol,
-          period: '/month',
+          period: "/month",
           popular: false,
           features: PLAN_FEATURES.SERVER,
-          highlights: PLAN_HIGHLIGHTS.SERVER_MONTHLY
+          highlights: PLAN_HIGHLIGHTS.SERVER_MONTHLY,
         },
         {
-          id: 'selfhosted:server:yearly',
-          lookupKey: 'selfhosted:server:yearly',
-          name: 'Server - Yearly',
-          price: getPriceInfo('selfhosted:server:yearly'),
+          id: "selfhosted:server:yearly",
+          lookupKey: "selfhosted:server:yearly",
+          name: "Server - Yearly",
+          price: getPriceInfo("selfhosted:server:yearly"),
           currency: currencySymbol,
-          period: '/year',
+          period: "/year",
           popular: true,
           features: PLAN_FEATURES.SERVER,
-          highlights: PLAN_HIGHLIGHTS.SERVER_YEARLY
+          highlights: PLAN_HIGHLIGHTS.SERVER_YEARLY,
         },
         {
-          id: 'selfhosted:enterprise:monthly',
-          lookupKey: 'selfhosted:server:monthly',
-          name: 'Enterprise - Monthly',
-          price: getPriceInfo('selfhosted:server:monthly'),
-          seatPrice: getPriceInfo('selfhosted:enterpriseseat:monthly'),
+          id: "selfhosted:enterprise:monthly",
+          lookupKey: "selfhosted:server:monthly",
+          name: "Enterprise - Monthly",
+          price: getPriceInfo("selfhosted:server:monthly"),
+          seatPrice: getPriceInfo("selfhosted:enterpriseseat:monthly"),
           currency: currencySymbol,
-          period: '/month',
+          period: "/month",
           popular: false,
           requiresSeats: true,
           features: PLAN_FEATURES.ENTERPRISE,
-          highlights: PLAN_HIGHLIGHTS.ENTERPRISE_MONTHLY
+          highlights: PLAN_HIGHLIGHTS.ENTERPRISE_MONTHLY,
         },
         {
-          id: 'selfhosted:enterprise:yearly',
-          lookupKey: 'selfhosted:server:yearly',
-          name: 'Enterprise - Yearly',
-          price: getPriceInfo('selfhosted:server:yearly'),
-          seatPrice: getPriceInfo('selfhosted:enterpriseseat:yearly'),
+          id: "selfhosted:enterprise:yearly",
+          lookupKey: "selfhosted:server:yearly",
+          name: "Enterprise - Yearly",
+          price: getPriceInfo("selfhosted:server:yearly"),
+          seatPrice: getPriceInfo("selfhosted:enterpriseseat:yearly"),
           currency: currencySymbol,
-          period: '/year',
+          period: "/year",
           popular: false,
           requiresSeats: true,
           features: PLAN_FEATURES.ENTERPRISE,
-          highlights: PLAN_HIGHLIGHTS.ENTERPRISE_YEARLY
+          highlights: PLAN_HIGHLIGHTS.ENTERPRISE_YEARLY,
         },
       ];
 
       // Filter out plans with missing prices (price === 0 means Stripe price not found)
-      const validPlans = plans.filter(plan => plan.price > 0);
+      const validPlans = plans.filter((plan) => plan.price > 0);
 
       if (validPlans.length < plans.length) {
-        const missingPlans = plans.filter(plan => plan.price === 0).map(p => p.id);
-        console.warn('Filtered out plans with missing prices:', missingPlans);
+        const missingPlans = plans.filter((plan) => plan.price === 0).map((p) => p.id);
+        console.warn("Filtered out plans with missing prices:", missingPlans);
       }
 
       // Add Free plan (static definition)
       const freePlan: PlanTier = {
-        id: 'free',
-        lookupKey: 'free',
-        name: 'Free',
+        id: "free",
+        lookupKey: "free",
+        name: "Free",
         price: 0,
         currency: currencySymbol,
-        period: '',
+        period: "",
         popular: false,
         features: PLAN_FEATURES.FREE,
-        highlights: PLAN_HIGHLIGHTS.FREE
+        highlights: PLAN_HIGHLIGHTS.FREE,
       };
 
       const allPlans = [freePlan, ...validPlans];
 
       return {
-        plans: allPlans
+        plans: allPlans,
       };
     } catch (error) {
-      console.error('Error fetching plans:', error);
+      console.error("Error fetching plans:", error);
       throw error;
     }
   },
@@ -247,11 +250,11 @@ const licenseService = {
     const groups: PlanTierGroup[] = [];
 
     // Free tier
-    const freePlan = plans.find(p => p.id === 'free');
+    const freePlan = plans.find((p) => p.id === "free");
     if (freePlan) {
       groups.push({
-        tier: 'free',
-        name: 'Free',
+        tier: "free",
+        name: "Free",
         monthly: freePlan,
         yearly: null,
         features: freePlan.features,
@@ -261,12 +264,12 @@ const licenseService = {
     }
 
     // Server tier
-    const serverMonthly = plans.find(p => p.lookupKey === 'selfhosted:server:monthly');
-    const serverYearly = plans.find(p => p.lookupKey === 'selfhosted:server:yearly');
+    const serverMonthly = plans.find((p) => p.lookupKey === "selfhosted:server:monthly");
+    const serverYearly = plans.find((p) => p.lookupKey === "selfhosted:server:yearly");
     if (serverMonthly || serverYearly) {
       groups.push({
-        tier: 'server',
-        name: 'Server',
+        tier: "server",
+        name: "Server",
         monthly: serverMonthly || null,
         yearly: serverYearly || null,
         features: (serverMonthly || serverYearly)!.features,
@@ -276,12 +279,12 @@ const licenseService = {
     }
 
     // Enterprise tier (uses server pricing + seats)
-    const enterpriseMonthly = plans.find(p => p.id === 'selfhosted:enterprise:monthly');
-    const enterpriseYearly = plans.find(p => p.id === 'selfhosted:enterprise:yearly');
+    const enterpriseMonthly = plans.find((p) => p.id === "selfhosted:enterprise:monthly");
+    const enterpriseYearly = plans.find((p) => p.id === "selfhosted:enterprise:yearly");
     if (enterpriseMonthly || enterpriseYearly) {
       groups.push({
-        tier: 'enterprise',
-        name: 'Enterprise',
+        tier: "enterprise",
+        name: "Enterprise",
         monthly: enterpriseMonthly || null,
         yearly: enterpriseYearly || null,
         features: (enterpriseMonthly || enterpriseYearly)!.features,
@@ -299,7 +302,7 @@ const licenseService = {
   async createCheckoutSession(request: CheckoutSessionRequest): Promise<CheckoutSessionResponse> {
     // Check if Supabase is configured
     if (!isSupabaseConfigured || !supabase) {
-      throw new Error('Supabase is not configured. Checkout is not available.');
+      throw new Error("Supabase is not configured. Checkout is not available.");
     }
 
     // Detect if HTTPS is available to determine checkout mode
@@ -307,7 +310,7 @@ const licenseService = {
     const baseUrl = window.location.origin;
     const settingsUrl = `${baseUrl}/settings/adminPlan`;
 
-    const { data, error } = await supabase.functions.invoke('create-checkout', {
+    const { data, error } = await supabase.functions.invoke("create-checkout", {
       body: {
         self_hosted: true,
         lookup_key: request.lookup_key,
@@ -319,12 +322,9 @@ const licenseService = {
         callback_base_url: baseUrl,
         ui_mode: checkoutMode,
         // For hosted checkout, provide success/cancel URLs
-        success_url: checkoutMode === 'hosted'
-          ? `${settingsUrl}?session_id={CHECKOUT_SESSION_ID}&payment_status=success`
-          : undefined,
-        cancel_url: checkoutMode === 'hosted'
-          ? `${settingsUrl}?payment_status=canceled`
-          : undefined,
+        success_url:
+          checkoutMode === "hosted" ? `${settingsUrl}?session_id={CHECKOUT_SESSION_ID}&payment_status=success` : undefined,
+        cancel_url: checkoutMode === "hosted" ? `${settingsUrl}?payment_status=canceled` : undefined,
       },
     });
 
@@ -342,14 +342,14 @@ const licenseService = {
   async createBillingPortalSession(returnUrl: string, licenseKey: string): Promise<BillingPortalResponse> {
     // Check if Supabase is configured
     if (!isSupabaseConfigured || !supabase) {
-      throw new Error('Supabase is not configured. Billing portal is not available.');
+      throw new Error("Supabase is not configured. Billing portal is not available.");
     }
 
-    const { data, error} = await supabase.functions.invoke('manage-billing', {
+    const { data, error } = await supabase.functions.invoke("manage-billing", {
       body: {
         return_url: returnUrl,
         license_key: licenseKey,
-        self_hosted: true  // Explicitly indicate self-hosted mode
+        self_hosted: true, // Explicitly indicate self-hosted mode
       },
     });
 
@@ -365,12 +365,12 @@ const licenseService = {
    */
   async getInstallationId(): Promise<string> {
     try {
-      const response = await apiClient.get('/api/v1/admin/installation-id');
+      const response = await apiClient.get("/api/v1/admin/installation-id");
 
       const data: InstallationIdResponse = await response.data;
       return data.installationId;
     } catch (error) {
-      console.error('Error fetching installation ID:', error);
+      console.error("Error fetching installation ID:", error);
       throw error;
     }
   },
@@ -381,10 +381,10 @@ const licenseService = {
   async checkLicenseKey(installationId: string): Promise<LicenseKeyResponse> {
     // Check if Supabase is configured
     if (!isSupabaseConfigured || !supabase) {
-      throw new Error('Supabase is not configured. License key lookup is not available.');
+      throw new Error("Supabase is not configured. License key lookup is not available.");
     }
 
-    const { data, error } = await supabase.functions.invoke('get-license-key', {
+    const { data, error } = await supabase.functions.invoke("get-license-key", {
       body: {
         installation_id: installationId,
       },
@@ -402,13 +402,13 @@ const licenseService = {
    */
   async saveLicenseKey(licenseKey: string): Promise<LicenseSaveResponse> {
     try {
-      const response = await apiClient.post('/api/v1/admin/license-key', {
+      const response = await apiClient.post("/api/v1/admin/license-key", {
         licenseKey: licenseKey,
       });
 
       return response.data;
     } catch (error) {
-      console.error('Error saving license key:', error);
+      console.error("Error saving license key:", error);
       throw error;
     }
   },
@@ -421,17 +421,17 @@ const licenseService = {
   async saveLicenseFile(file: File): Promise<LicenseSaveResponse> {
     try {
       const formData = new FormData();
-      formData.append('file', file);
+      formData.append("file", file);
 
-      const response = await apiClient.post('/api/v1/admin/license-file', formData, {
+      const response = await apiClient.post("/api/v1/admin/license-file", formData, {
         headers: {
-          'Content-Type': 'multipart/form-data',
+          "Content-Type": "multipart/form-data",
         },
       });
 
       return response.data;
     } catch (error) {
-      console.error('Error uploading license file:', error);
+      console.error("Error uploading license file:", error);
       throw error;
     }
   },
@@ -441,10 +441,10 @@ const licenseService = {
    */
   async getLicenseInfo(): Promise<LicenseInfo> {
     try {
-      const response = await apiClient.get('/api/v1/admin/license-info', { suppressErrorToast: true });
+      const response = await apiClient.get("/api/v1/admin/license-info", { suppressErrorToast: true });
       return response.data;
     } catch (error) {
-      console.error('Error fetching license info:', error);
+      console.error("Error fetching license info:", error);
       throw error;
     }
   },
@@ -455,10 +455,10 @@ const licenseService = {
    */
   async resyncLicense(): Promise<LicenseSaveResponse> {
     try {
-      const response = await apiClient.post('/api/v1/admin/license/resync');
+      const response = await apiClient.post("/api/v1/admin/license/resync");
       return response.data;
     } catch (error) {
-      console.error('Error resyncing license:', error);
+      console.error("Error resyncing license:", error);
       throw error;
     }
   },
@@ -473,13 +473,13 @@ const licenseService = {
   async updateEnterpriseSeats(newSeatCount: number, licenseKey: string): Promise<string> {
     // Check if Supabase is configured
     if (!isSupabaseConfigured || !supabase) {
-      throw new Error('Supabase is not configured. Seat updates are not available.');
+      throw new Error("Supabase is not configured. Seat updates are not available.");
     }
 
     const baseUrl = window.location.origin;
     const returnUrl = `${baseUrl}/settings/adminPlan?seats_updated=true`;
 
-    const { data, error } = await supabase.functions.invoke('manage-billing', {
+    const { data, error } = await supabase.functions.invoke("manage-billing", {
       body: {
         return_url: returnUrl,
         license_key: licenseKey,
@@ -493,7 +493,7 @@ const licenseService = {
     }
 
     if (!data || !data.url) {
-      throw new Error('No billing portal URL returned');
+      throw new Error("No billing portal URL returned");
     }
 
     return data.url;
@@ -505,26 +505,26 @@ const licenseService = {
  * @param licenseInfo - Current license information
  * @returns Plan tier: 'free' | 'server' | 'enterprise'
  */
-export const mapLicenseToTier = (licenseInfo: LicenseInfo | null): 'free' | 'server' | 'enterprise' | null => {
+export const mapLicenseToTier = (licenseInfo: LicenseInfo | null): "free" | "server" | "enterprise" | null => {
   if (!licenseInfo) return null;
 
   // No license or NORMAL type = Free tier
-  if (licenseInfo.licenseType === 'NORMAL' || !licenseInfo.enabled) {
-    return 'free';
+  if (licenseInfo.licenseType === "NORMAL" || !licenseInfo.enabled) {
+    return "free";
   }
 
   // SERVER type (unlimited users) = Server tier
-  if (licenseInfo.licenseType === 'SERVER') {
-    return 'server';
+  if (licenseInfo.licenseType === "SERVER") {
+    return "server";
   }
 
   // ENTERPRISE type (with seats) = Enterprise tier
-  if (licenseInfo.licenseType === 'ENTERPRISE' && licenseInfo.maxUsers > 0) {
-    return 'enterprise';
+  if (licenseInfo.licenseType === "ENTERPRISE" && licenseInfo.maxUsers > 0) {
+    return "enterprise";
   }
 
   // Default fallback
-  return 'free';
+  return "free";
 };
 
 export default licenseService;
diff --git a/frontend/src/proprietary/services/shareLinkImport.ts b/frontend/src/proprietary/services/shareLinkImport.ts
index b7da1b14e9..6de5ce9519 100644
--- a/frontend/src/proprietary/services/shareLinkImport.ts
+++ b/frontend/src/proprietary/services/shareLinkImport.ts
@@ -1,14 +1,14 @@
-import apiClient from '@app/services/apiClient';
-import { fileStorage } from '@app/services/fileStorage';
-import type { FileId } from '@app/types/file';
-import type { StirlingFile } from '@app/types/fileContext';
-import type { FileContextActions } from '@app/types/fileContext';
+import apiClient from "@app/services/apiClient";
+import { fileStorage } from "@app/services/fileStorage";
+import type { FileId } from "@app/types/file";
+import type { StirlingFile } from "@app/types/fileContext";
+import type { FileContextActions } from "@app/types/fileContext";
 import {
   getShareBundleEntryRootId,
   isZipBundle,
   loadShareBundleEntries,
   parseContentDispositionFilename,
-} from '@app/services/shareBundleUtils';
+} from "@app/services/shareBundleUtils";
 
 export interface ShareLinkMetadata {
   shareToken?: string;
@@ -22,10 +22,10 @@ export interface ShareLinkMetadata {
 }
 
 export async function fetchShareLinkMetadata(token: string): Promise<ShareLinkMetadata> {
-  const response = await apiClient.get<ShareLinkMetadata>(
-    `/api/v1/storage/share-links/${token}/metadata`,
-    { suppressErrorToast: true, skipAuthRedirect: true }
-  );
+  const response = await apiClient.get<ShareLinkMetadata>(`/api/v1/storage/share-links/${token}/metadata`, {
+    suppressErrorToast: true,
+    skipAuthRedirect: true,
+  });
   return response.data || {};
 }
 
@@ -35,18 +35,14 @@ export async function downloadShareLink(token: string): Promise<{
   contentType: string;
 }> {
   const response = await apiClient.get(`/api/v1/storage/share-links/${token}`, {
-    responseType: 'blob',
+    responseType: "blob",
     suppressErrorToast: true,
     skipAuthRedirect: true,
   });
-  const contentType =
-    (response.headers && (response.headers['content-type'] || response.headers['Content-Type'])) ||
-    '';
+  const contentType = (response.headers && (response.headers["content-type"] || response.headers["Content-Type"])) || "";
   const disposition =
-    (response.headers &&
-      (response.headers['content-disposition'] || response.headers['Content-Disposition'])) ||
-    '';
-  const filename = parseContentDispositionFilename(disposition) || 'shared-file';
+    (response.headers && (response.headers["content-disposition"] || response.headers["Content-Disposition"])) || "";
+  const filename = parseContentDispositionFilename(disposition) || "shared-file";
   const blob = response.data as Blob;
   const contentTypeValue = contentType || blob.type;
   return { blob, filename, contentType: contentTypeValue };
@@ -55,7 +51,7 @@ export async function downloadShareLink(token: string): Promise<{
 export async function importShareLinkToWorkbench(
   token: string,
   actions: FileContextActions,
-  shareMetadata?: ShareLinkMetadata | null
+  shareMetadata?: ShareLinkMetadata | null,
 ): Promise<FileId[]> {
   const { blob, filename, contentType } = await downloadShareLink(token);
   const contentTypeValue = contentType || blob.type;
@@ -97,13 +93,8 @@ export async function importShareLinkToWorkbench(
       for (const entry of sortedEntries) {
         const newId = idMap.get(entry.logicalId);
         if (!newId) continue;
-        const parentId = entry.parentLogicalId
-          ? idMap.get(entry.parentLogicalId)
-          : undefined;
-        const rootId =
-          rootIdMap.get(getShareBundleEntryRootId(manifest, entry)) ||
-          idMap.get(manifest.rootLogicalId) ||
-          newId;
+        const parentId = entry.parentLogicalId ? idMap.get(entry.parentLogicalId) : undefined;
+        const rootId = rootIdMap.get(getShareBundleEntryRootId(manifest, entry)) || idMap.get(manifest.rootLogicalId) || newId;
         const updates = {
           versionNumber: entry.versionNumber,
           originalFileId: rootId,
@@ -118,9 +109,7 @@ export async function importShareLinkToWorkbench(
 
       const selectedIds: FileId[] = [];
       for (const rootId of rootOrder) {
-        const rootEntries = sortedEntries.filter(
-          (entry) => getShareBundleEntryRootId(manifest, entry) === rootId
-        );
+        const rootEntries = sortedEntries.filter((entry) => getShareBundleEntryRootId(manifest, entry) === rootId);
         const latestEntry = rootEntries[rootEntries.length - 1];
         if (!latestEntry) {
           continue;
diff --git a/frontend/src/proprietary/services/teamService.ts b/frontend/src/proprietary/services/teamService.ts
index 659fe4c7b3..4555975606 100644
--- a/frontend/src/proprietary/services/teamService.ts
+++ b/frontend/src/proprietary/services/teamService.ts
@@ -1,5 +1,5 @@
-import apiClient from '@app/services/apiClient';
-import type { User } from '@app/services/userManagementService';
+import apiClient from "@app/services/apiClient";
+import type { User } from "@app/services/userManagementService";
 
 export interface Team {
   id: number;
@@ -42,7 +42,7 @@ export const teamService = {
    * Get all teams with user counts
    */
   async getTeams(): Promise<Team[]> {
-    const response = await apiClient.get<{ teamsWithCounts: Team[] }>('/api/v1/proprietary/ui-data/teams');
+    const response = await apiClient.get<{ teamsWithCounts: Team[] }>("/api/v1/proprietary/ui-data/teams");
     return response.data.teamsWithCounts;
   },
 
@@ -59,8 +59,8 @@ export const teamService = {
    */
   async createTeam(name: string): Promise<void> {
     const formData = new FormData();
-    formData.append('name', name);
-    await apiClient.post('/api/v1/team/create', formData, {
+    formData.append("name", name);
+    await apiClient.post("/api/v1/team/create", formData, {
       suppressErrorToast: true,
     });
   },
@@ -70,9 +70,9 @@ export const teamService = {
    */
   async renameTeam(teamId: number, newName: string): Promise<void> {
     const formData = new FormData();
-    formData.append('teamId', teamId.toString());
-    formData.append('newName', newName);
-    await apiClient.post('/api/v1/team/rename', formData, {
+    formData.append("teamId", teamId.toString());
+    formData.append("newName", newName);
+    await apiClient.post("/api/v1/team/rename", formData, {
       suppressErrorToast: true,
     });
   },
@@ -82,8 +82,8 @@ export const teamService = {
    */
   async deleteTeam(teamId: number): Promise<void> {
     const formData = new FormData();
-    formData.append('teamId', teamId.toString());
-    await apiClient.post('/api/v1/team/delete', formData, {
+    formData.append("teamId", teamId.toString());
+    await apiClient.post("/api/v1/team/delete", formData, {
       suppressErrorToast: true,
     });
   },
@@ -93,9 +93,9 @@ export const teamService = {
    */
   async addUserToTeam(teamId: number, userId: number): Promise<void> {
     const formData = new FormData();
-    formData.append('teamId', teamId.toString());
-    formData.append('userId', userId.toString());
-    await apiClient.post('/api/v1/team/addUser', formData, {
+    formData.append("teamId", teamId.toString());
+    formData.append("userId", userId.toString());
+    await apiClient.post("/api/v1/team/addUser", formData, {
       suppressErrorToast: true,
     });
   },
@@ -105,10 +105,10 @@ export const teamService = {
    */
   async moveUserToTeam(username: string, currentRole: string, teamId: number): Promise<void> {
     const formData = new FormData();
-    formData.append('username', username);
-    formData.append('role', currentRole);
-    formData.append('teamId', teamId.toString());
-    await apiClient.post('/api/v1/user/admin/changeRole', formData, {
+    formData.append("username", username);
+    formData.append("role", currentRole);
+    formData.append("teamId", teamId.toString());
+    await apiClient.post("/api/v1/user/admin/changeRole", formData, {
       suppressErrorToast: true,
     });
   },
diff --git a/frontend/src/proprietary/services/userManagementService.ts b/frontend/src/proprietary/services/userManagementService.ts
index 09ff86983c..87fe6cd6e1 100644
--- a/frontend/src/proprietary/services/userManagementService.ts
+++ b/frontend/src/proprietary/services/userManagementService.ts
@@ -1,4 +1,4 @@
-import apiClient from '@app/services/apiClient';
+import apiClient from "@app/services/apiClient";
 
 export interface User {
   id: number;
@@ -48,7 +48,7 @@ export interface CreateUserRequest {
   password?: string;
   role: string;
   teamId?: number;
-  authType: 'WEB' | 'OAUTH2' | 'SAML2';
+  authType: "WEB" | "OAUTH2" | "SAML2";
   forceChange?: boolean;
   forceMFA?: boolean;
 }
@@ -121,7 +121,7 @@ export const userManagementService = {
    * Get all users with session data (admin only)
    */
   async getUsers(): Promise<AdminSettingsData> {
-    const response = await apiClient.get<AdminSettingsData>('/api/v1/proprietary/ui-data/admin-settings');
+    const response = await apiClient.get<AdminSettingsData>("/api/v1/proprietary/ui-data/admin-settings");
     return response.data;
   },
 
@@ -129,7 +129,7 @@ export const userManagementService = {
    * Get users without a team
    */
   async getUsersWithoutTeam(): Promise<User[]> {
-    const response = await apiClient.get<User[]>('/api/v1/users/without-team');
+    const response = await apiClient.get<User[]>("/api/v1/users/without-team");
     return response.data;
   },
 
@@ -138,22 +138,22 @@ export const userManagementService = {
    */
   async createUser(data: CreateUserRequest): Promise<void> {
     const formData = new FormData();
-    formData.append('username', data.username);
+    formData.append("username", data.username);
     if (data.password) {
-      formData.append('password', data.password);
+      formData.append("password", data.password);
     }
-    formData.append('role', data.role);
+    formData.append("role", data.role);
     if (data.teamId) {
-      formData.append('teamId', data.teamId.toString());
+      formData.append("teamId", data.teamId.toString());
     }
-    formData.append('authType', data.authType);
+    formData.append("authType", data.authType);
     if (data.forceChange !== undefined) {
-      formData.append('forceChange', data.forceChange.toString());
+      formData.append("forceChange", data.forceChange.toString());
     }
     if (data.forceMFA !== undefined) {
-      formData.append('forceMFA', data.forceMFA.toString());
+      formData.append("forceMFA", data.forceMFA.toString());
     }
-    await apiClient.post('/api/v1/user/admin/saveUser', formData, {
+    await apiClient.post("/api/v1/user/admin/saveUser", formData, {
       suppressErrorToast: true, // Component will handle error display
     });
   },
@@ -163,12 +163,12 @@ export const userManagementService = {
    */
   async updateUserRole(data: UpdateUserRoleRequest): Promise<void> {
     const formData = new FormData();
-    formData.append('username', data.username);
-    formData.append('role', data.role);
+    formData.append("username", data.username);
+    formData.append("role", data.role);
     if (data.teamId) {
-      formData.append('teamId', data.teamId.toString());
+      formData.append("teamId", data.teamId.toString());
     }
-    await apiClient.post('/api/v1/user/admin/changeRole', formData, {
+    await apiClient.post("/api/v1/user/admin/changeRole", formData, {
       suppressErrorToast: true,
     });
   },
@@ -178,7 +178,7 @@ export const userManagementService = {
    */
   async toggleUserEnabled(username: string, enabled: boolean): Promise<void> {
     const formData = new FormData();
-    formData.append('enabled', enabled.toString());
+    formData.append("enabled", enabled.toString());
     await apiClient.post(`/api/v1/user/admin/changeUserEnabled/${username}`, formData, {
       suppressErrorToast: true,
     });
@@ -200,19 +200,15 @@ export const userManagementService = {
    */
   async inviteUsers(data: InviteUsersRequest): Promise<InviteUsersResponse> {
     const formData = new FormData();
-    formData.append('emails', data.emails);
-    formData.append('role', data.role);
+    formData.append("emails", data.emails);
+    formData.append("role", data.role);
     if (data.teamId) {
-      formData.append('teamId', data.teamId.toString());
+      formData.append("teamId", data.teamId.toString());
     }
 
-    const response = await apiClient.post<InviteUsersResponse>(
-      '/api/v1/user/admin/inviteUsers',
-      formData,
-      {
-        suppressErrorToast: true, // Component will handle error display
-      }
-    );
+    const response = await apiClient.post<InviteUsersResponse>("/api/v1/user/admin/inviteUsers", formData, {
+      suppressErrorToast: true, // Component will handle error display
+    });
 
     return response.data;
   },
@@ -224,29 +220,25 @@ export const userManagementService = {
     const formData = new FormData();
     // Only append email if it's provided and not empty
     if (data.email && data.email.trim()) {
-      formData.append('email', data.email);
+      formData.append("email", data.email);
     }
-    formData.append('role', data.role);
+    formData.append("role", data.role);
     if (data.teamId) {
-      formData.append('teamId', data.teamId.toString());
+      formData.append("teamId", data.teamId.toString());
     }
     if (data.expiryHours) {
-      formData.append('expiryHours', data.expiryHours.toString());
+      formData.append("expiryHours", data.expiryHours.toString());
     }
     if (data.sendEmail !== undefined) {
-      formData.append('sendEmail', data.sendEmail.toString());
+      formData.append("sendEmail", data.sendEmail.toString());
     }
     if (data.frontendBaseUrl) {
-      formData.append('frontendBaseUrl', data.frontendBaseUrl);
+      formData.append("frontendBaseUrl", data.frontendBaseUrl);
     }
 
-    const response = await apiClient.post<InviteLinkResponse>(
-      '/api/v1/invite/generate',
-      formData,
-      {
-        suppressErrorToast: true,
-      }
-    );
+    const response = await apiClient.post<InviteLinkResponse>("/api/v1/invite/generate", formData, {
+      suppressErrorToast: true,
+    });
 
     return response.data;
   },
@@ -255,7 +247,7 @@ export const userManagementService = {
    * Get list of active invite links (admin only)
    */
   async getInviteLinks(): Promise<InviteToken[]> {
-    const response = await apiClient.get<{ invites: InviteToken[] }>('/api/v1/invite/list');
+    const response = await apiClient.get<{ invites: InviteToken[] }>("/api/v1/invite/list");
     return response.data.invites;
   },
 
@@ -272,7 +264,7 @@ export const userManagementService = {
    * Clean up expired invite links (admin only)
    */
   async cleanupExpiredInvites(): Promise<{ deletedCount: number }> {
-    const response = await apiClient.post<{ deletedCount: number }>('/api/v1/invite/cleanup');
+    const response = await apiClient.post<{ deletedCount: number }>("/api/v1/invite/cleanup");
     return response.data;
   },
 
@@ -281,24 +273,24 @@ export const userManagementService = {
    */
   async changeUserPassword(data: ChangeUserPasswordRequest): Promise<void> {
     const formData = new FormData();
-    formData.append('username', data.username);
+    formData.append("username", data.username);
     if (data.newPassword) {
-      formData.append('newPassword', data.newPassword);
+      formData.append("newPassword", data.newPassword);
     }
     if (data.generateRandom !== undefined) {
-      formData.append('generateRandom', data.generateRandom.toString());
+      formData.append("generateRandom", data.generateRandom.toString());
     }
     if (data.sendEmail !== undefined) {
-      formData.append('sendEmail', data.sendEmail.toString());
+      formData.append("sendEmail", data.sendEmail.toString());
     }
     if (data.includePassword !== undefined) {
-      formData.append('includePassword', data.includePassword.toString());
+      formData.append("includePassword", data.includePassword.toString());
     }
     if (data.forcePasswordChange !== undefined) {
-      formData.append('forcePasswordChange', data.forcePasswordChange.toString());
+      formData.append("forcePasswordChange", data.forcePasswordChange.toString());
     }
 
-    await apiClient.post('/api/v1/user/admin/changePasswordForUser', formData, {
+    await apiClient.post("/api/v1/user/admin/changePasswordForUser", formData, {
       suppressErrorToast: true, // Component will handle error display
     });
   },
@@ -318,5 +310,4 @@ export const userManagementService = {
   async disableMfaByAdmin(username: string): Promise<void> {
     await apiClient.post(`/api/v1/auth/mfa/disable/admin/${encodeURIComponent(username)}`, undefined);
   },
-
 };
diff --git a/frontend/src/proprietary/services/workflowService.ts b/frontend/src/proprietary/services/workflowService.ts
index 2dc84eb7f8..c35311fe0b 100644
--- a/frontend/src/proprietary/services/workflowService.ts
+++ b/frontend/src/proprietary/services/workflowService.ts
@@ -1,13 +1,13 @@
-import api from '@app/services/apiClient';
+import api from "@app/services/apiClient";
 
 export interface ParticipantResponse {
   id: number;
   userId?: number;
   email: string;
   name: string;
-  status: 'PENDING' | 'NOTIFIED' | 'VIEWED' | 'SIGNED' | 'DECLINED';
+  status: "PENDING" | "NOTIFIED" | "VIEWED" | "SIGNED" | "DECLINED";
   shareToken: string;
-  accessRole: 'EDITOR' | 'COMMENTER' | 'VIEWER';
+  accessRole: "EDITOR" | "COMMENTER" | "VIEWER";
   expiresAt?: string;
   lastUpdated: string;
   hasCompleted: boolean;
@@ -18,12 +18,12 @@ export interface WorkflowSessionResponse {
   sessionId: string;
   ownerId: number;
   ownerUsername: string;
-  workflowType: 'SIGNING' | 'REVIEW' | 'APPROVAL';
+  workflowType: "SIGNING" | "REVIEW" | "APPROVAL";
   documentName: string;
   ownerEmail?: string;
   message?: string;
   dueDate?: string;
-  status: 'IN_PROGRESS' | 'COMPLETED' | 'CANCELLED';
+  status: "IN_PROGRESS" | "COMPLETED" | "CANCELLED";
   finalized: boolean;
   createdAt: string;
   updatedAt: string;
@@ -55,7 +55,7 @@ class WorkflowService {
    * Get session details by participant token (no authentication required)
    */
   async getSessionByToken(token: string): Promise<WorkflowSessionResponse> {
-    const response = await api.get('/api/v1/workflow/participant/session', {
+    const response = await api.get("/api/v1/workflow/participant/session", {
       params: { token },
     });
     return response.data;
@@ -65,7 +65,7 @@ class WorkflowService {
    * Get participant details by token
    */
   async getParticipantDetails(token: string): Promise<ParticipantResponse> {
-    const response = await api.get('/api/v1/workflow/participant/details', {
+    const response = await api.get("/api/v1/workflow/participant/details", {
       params: { token },
     });
     return response.data;
@@ -76,22 +76,22 @@ class WorkflowService {
    */
   async submitSignature(request: SignatureSubmissionRequest): Promise<ParticipantResponse> {
     const formData = new FormData();
-    formData.append('participantToken', request.participantToken);
+    formData.append("participantToken", request.participantToken);
 
-    if (request.certType) formData.append('certType', request.certType);
-    if (request.password) formData.append('password', request.password);
-    if (request.p12File) formData.append('p12File', request.p12File);
-    if (request.jksFile) formData.append('jksFile', request.jksFile);
-    if (request.showSignature !== undefined) formData.append('showSignature', request.showSignature.toString());
-    if (request.pageNumber) formData.append('pageNumber', request.pageNumber.toString());
-    if (request.location) formData.append('location', request.location);
-    if (request.reason) formData.append('reason', request.reason);
-    if (request.showLogo !== undefined) formData.append('showLogo', request.showLogo.toString());
-    if (request.wetSignatureData) formData.append('wetSignatureData', request.wetSignatureData);
+    if (request.certType) formData.append("certType", request.certType);
+    if (request.password) formData.append("password", request.password);
+    if (request.p12File) formData.append("p12File", request.p12File);
+    if (request.jksFile) formData.append("jksFile", request.jksFile);
+    if (request.showSignature !== undefined) formData.append("showSignature", request.showSignature.toString());
+    if (request.pageNumber) formData.append("pageNumber", request.pageNumber.toString());
+    if (request.location) formData.append("location", request.location);
+    if (request.reason) formData.append("reason", request.reason);
+    if (request.showLogo !== undefined) formData.append("showLogo", request.showLogo.toString());
+    if (request.wetSignatureData) formData.append("wetSignatureData", request.wetSignatureData);
 
-    const response = await api.post('/api/v1/workflow/participant/submit-signature', formData, {
+    const response = await api.post("/api/v1/workflow/participant/submit-signature", formData, {
       headers: {
-        'Content-Type': 'multipart/form-data',
+        "Content-Type": "multipart/form-data",
       },
     });
     return response.data;
@@ -101,7 +101,7 @@ class WorkflowService {
    * Decline participation
    */
   async declineParticipation(token: string, reason?: string): Promise<ParticipantResponse> {
-    const response = await api.post('/api/v1/workflow/participant/decline', null, {
+    const response = await api.post("/api/v1/workflow/participant/decline", null, {
       params: { token, reason },
     });
     return response.data;
@@ -111,9 +111,9 @@ class WorkflowService {
    * Download document as participant
    */
   async getParticipantDocument(token: string): Promise<Blob> {
-    const response = await api.get('/api/v1/workflow/participant/document', {
+    const response = await api.get("/api/v1/workflow/participant/document", {
       params: { token },
-      responseType: 'blob',
+      responseType: "blob",
     });
     return response.data;
   }
diff --git a/frontend/src/proprietary/styles/auth-theme.css b/frontend/src/proprietary/styles/auth-theme.css
index 9e3112eb54..21c2397f1c 100644
--- a/frontend/src/proprietary/styles/auth-theme.css
+++ b/frontend/src/proprietary/styles/auth-theme.css
@@ -11,7 +11,7 @@
   --auth-input-text-light-only: #111827;
   --auth-border-focus-light-only: #3b82f6;
   --auth-focus-ring-light-only: rgba(59, 130, 246, 0.1);
-  --auth-button-bg-light-only: #AF3434;
+  --auth-button-bg-light-only: #af3434;
   --auth-button-text-light-only: #ffffff;
   --auth-magic-button-bg-light-only: #e5e7eb;
   --auth-magic-button-text-light-only: #374151;
@@ -33,7 +33,7 @@
   --auth-input-text-light-only: var(--text-primary);
   --auth-border-focus-light-only: #3b82f6;
   --auth-focus-ring-light-only: rgba(59, 130, 246, 0.2);
-  --auth-button-bg-light-only: #AF3434;
+  --auth-button-bg-light-only: #af3434;
   --auth-button-text-light-only: #ffffff;
   --auth-magic-button-bg-light-only: var(--bg-raised);
   --auth-magic-button-text-light-only: var(--text-primary);
diff --git a/frontend/src/proprietary/testing/serverExperienceSimulations.ts b/frontend/src/proprietary/testing/serverExperienceSimulations.ts
index 4aed48962e..98c737fe92 100644
--- a/frontend/src/proprietary/testing/serverExperienceSimulations.ts
+++ b/frontend/src/proprietary/testing/serverExperienceSimulations.ts
@@ -1,5 +1,5 @@
-import type { AppConfig } from '@app/types/appConfig';
-import type { LicenseInfo } from '@app/types/license';
+import type { AppConfig } from "@app/types/appConfig";
+import type { LicenseInfo } from "@app/types/license";
 
 interface WauResponse {
   trackingSince: string;
@@ -40,7 +40,7 @@ const DEV_TESTING_MODE = false;
 const SIMULATION_INDEX = 0;
 
 const FREE_LICENSE_INFO: LicenseInfo = {
-  licenseType: 'NORMAL',
+  licenseType: "NORMAL",
   enabled: false,
   maxUsers: 5,
   hasKey: false,
@@ -48,7 +48,7 @@ const FREE_LICENSE_INFO: LicenseInfo = {
 
 const BASE_NO_LOGIN_CONFIG: AppConfig = {
   enableAnalytics: true,
-  appVersion: '2.9.2',
+  appVersion: "2.9.2",
   serverCertificateEnabled: false,
   enableAlphaFunctionality: false,
   enableDesktopInstallSlide: true,
@@ -59,9 +59,9 @@ const BASE_NO_LOGIN_CONFIG: AppConfig = {
   enableLogin: false,
   activeSecurity: false,
   languages: [],
-  contextPath: '/',
-  license: 'NORMAL',
-  baseUrl: 'http://localhost',
+  contextPath: "/",
+  license: "NORMAL",
+  baseUrl: "http://localhost",
   enableEmailInvites: true,
 };
 
@@ -73,12 +73,12 @@ const BASE_LOGIN_CONFIG: AppConfig = {
 
 const SIMULATION_SCENARIOS: SimulationScenario[] = [
   {
-    label: 'no-login-user-under-limit (no-license)',
+    label: "no-login-user-under-limit (no-license)",
     appConfig: {
       ...BASE_NO_LOGIN_CONFIG,
     },
     wau: {
-      trackingSince: '2025-11-18T23:20:12.520884200Z',
+      trackingSince: "2025-11-18T23:20:12.520884200Z",
       daysOnline: 0,
       totalUniqueBrowsers: 3,
       weeklyActiveUsers: 3,
@@ -86,12 +86,12 @@ const SIMULATION_SCENARIOS: SimulationScenario[] = [
     licenseInfo: { ...FREE_LICENSE_INFO },
   },
   {
-    label: 'no-login-admin-under-limit (no-license)',
+    label: "no-login-admin-under-limit (no-license)",
     appConfig: {
       ...BASE_NO_LOGIN_CONFIG,
     },
     wau: {
-      trackingSince: '2025-10-01T00:00:00Z',
+      trackingSince: "2025-10-01T00:00:00Z",
       daysOnline: 14,
       totalUniqueBrowsers: 4,
       weeklyActiveUsers: 4,
@@ -99,12 +99,12 @@ const SIMULATION_SCENARIOS: SimulationScenario[] = [
     licenseInfo: { ...FREE_LICENSE_INFO },
   },
   {
-    label: 'no-login-user-over-limit (no-license)',
+    label: "no-login-user-over-limit (no-license)",
     appConfig: {
       ...BASE_NO_LOGIN_CONFIG,
     },
     wau: {
-      trackingSince: '2025-09-01T00:00:00Z',
+      trackingSince: "2025-09-01T00:00:00Z",
       daysOnline: 30,
       totalUniqueBrowsers: 12,
       weeklyActiveUsers: 9,
@@ -112,12 +112,12 @@ const SIMULATION_SCENARIOS: SimulationScenario[] = [
     licenseInfo: { ...FREE_LICENSE_INFO },
   },
   {
-    label: 'no-login-admin-over-limit (no-license)',
+    label: "no-login-admin-over-limit (no-license)",
     appConfig: {
       ...BASE_NO_LOGIN_CONFIG,
     },
     wau: {
-      trackingSince: '2025-08-15T00:00:00Z',
+      trackingSince: "2025-08-15T00:00:00Z",
       daysOnline: 45,
       totalUniqueBrowsers: 18,
       weeklyActiveUsers: 12,
@@ -125,14 +125,14 @@ const SIMULATION_SCENARIOS: SimulationScenario[] = [
     licenseInfo: { ...FREE_LICENSE_INFO },
   },
   {
-    label: 'login-user-under-limit (no-license)',
+    label: "login-user-under-limit (no-license)",
     appConfig: {
       ...BASE_LOGIN_CONFIG,
       isAdmin: false,
     },
     // Non-admin users use WAU estimate (not adminUsage)
     wau: {
-      trackingSince: '2025-11-18T23:20:12.520884200Z',
+      trackingSince: "2025-11-18T23:20:12.520884200Z",
       daysOnline: 0,
       totalUniqueBrowsers: 3,
       weeklyActiveUsers: 3,
@@ -140,7 +140,7 @@ const SIMULATION_SCENARIOS: SimulationScenario[] = [
     licenseInfo: { ...FREE_LICENSE_INFO },
   },
   {
-    label: 'login-admin-under-limit (no-license)',
+    label: "login-admin-under-limit (no-license)",
     appConfig: {
       ...BASE_LOGIN_CONFIG,
       isAdmin: true,
@@ -151,14 +151,14 @@ const SIMULATION_SCENARIOS: SimulationScenario[] = [
     licenseInfo: { ...FREE_LICENSE_INFO },
   },
   {
-    label: 'login-user-over-limit (no-license)',
+    label: "login-user-over-limit (no-license)",
     appConfig: {
       ...BASE_LOGIN_CONFIG,
       isAdmin: false,
     },
     // Non-admin users use WAU estimate (not adminUsage)
     wau: {
-      trackingSince: '2025-09-01T00:00:00Z',
+      trackingSince: "2025-09-01T00:00:00Z",
       daysOnline: 30,
       totalUniqueBrowsers: 12,
       weeklyActiveUsers: 9,
@@ -166,7 +166,7 @@ const SIMULATION_SCENARIOS: SimulationScenario[] = [
     licenseInfo: { ...FREE_LICENSE_INFO },
   },
   {
-    label: 'login-admin-over-limit (no-license)',
+    label: "login-admin-over-limit (no-license)",
     appConfig: {
       ...BASE_LOGIN_CONFIG,
       isAdmin: true,
@@ -184,7 +184,7 @@ function getActiveScenario(): SimulationScenario | null {
   }
   const scenario = SIMULATION_SCENARIOS[SIMULATION_INDEX];
   if (!scenario) {
-    console.warn('[Simulation] SIMULATION_INDEX out of range, using live backend.');
+    console.warn("[Simulation] SIMULATION_INDEX out of range, using live backend.");
     return null;
   }
   console.warn(`[Simulation] Using scenario #${SIMULATION_INDEX} (${scenario.label}).`);
diff --git a/frontend/src/proprietary/tsconfig.json b/frontend/src/proprietary/tsconfig.json
index 3bba3e8bc2..77f199c4b7 100644
--- a/frontend/src/proprietary/tsconfig.json
+++ b/frontend/src/proprietary/tsconfig.json
@@ -3,21 +3,9 @@
   "compilerOptions": {
     "baseUrl": "../../",
     "paths": {
-      "@app/*": [
-        "src/proprietary/*",
-        "src/core/*"
-      ],
-      "@core/*": [
-        "src/core/*"
-      ]
+      "@app/*": ["src/proprietary/*", "src/core/*"],
+      "@core/*": ["src/core/*"]
     }
   },
-  "include": [
-    "../global.d.ts",
-    "../*.js",
-    "../*.ts",
-    "../*.tsx",
-    "../core/setupTests.ts",
-    "."
-  ]
+  "include": ["../global.d.ts", "../*.js", "../*.ts", "../*.tsx", "../core/setupTests.ts", "."]
 }
diff --git a/frontend/src/proprietary/types/license.ts b/frontend/src/proprietary/types/license.ts
index 5f4fe9fe7c..e2755646aa 100644
--- a/frontend/src/proprietary/types/license.ts
+++ b/frontend/src/proprietary/types/license.ts
@@ -4,7 +4,7 @@ export interface PlanFeature {
 }
 
 export interface LicenseInfo {
-  licenseType: 'NORMAL' | 'SERVER' | 'ENTERPRISE';
+  licenseType: "NORMAL" | "SERVER" | "ENTERPRISE";
   enabled: boolean;
   maxUsers: number;
   hasKey: boolean;
diff --git a/frontend/src/proprietary/types/proprietaryToolId.ts b/frontend/src/proprietary/types/proprietaryToolId.ts
index 084cffa29e..602626b2b3 100644
--- a/frontend/src/proprietary/types/proprietaryToolId.ts
+++ b/frontend/src/proprietary/types/proprietaryToolId.ts
@@ -4,16 +4,13 @@
  * to add proprietary-specific tool IDs.
  */
 
-export const PROPRIETARY_REGULAR_TOOL_IDS = [
-] as const;
+export const PROPRIETARY_REGULAR_TOOL_IDS = [] as const;
 
-export const PROPRIETARY_SUPER_TOOL_IDS = [
-] as const;
+export const PROPRIETARY_SUPER_TOOL_IDS = [] as const;
 
-export const PROPRIETARY_LINK_TOOL_IDS = [
-] as const;
+export const PROPRIETARY_LINK_TOOL_IDS = [] as const;
 
-export type ProprietaryRegularToolId = typeof PROPRIETARY_REGULAR_TOOL_IDS[number];
-export type ProprietarySuperToolId = typeof PROPRIETARY_SUPER_TOOL_IDS[number];
-export type ProprietaryLinkToolId = typeof PROPRIETARY_LINK_TOOL_IDS[number];
+export type ProprietaryRegularToolId = (typeof PROPRIETARY_REGULAR_TOOL_IDS)[number];
+export type ProprietarySuperToolId = (typeof PROPRIETARY_SUPER_TOOL_IDS)[number];
+export type ProprietaryLinkToolId = (typeof PROPRIETARY_LINK_TOOL_IDS)[number];
 export type ProprietaryToolId = ProprietaryRegularToolId | ProprietarySuperToolId | ProprietaryLinkToolId;
diff --git a/frontend/src/proprietary/utils/creditCosts.ts b/frontend/src/proprietary/utils/creditCosts.ts
index f87315f2bb..15d0ff878a 100644
--- a/frontend/src/proprietary/utils/creditCosts.ts
+++ b/frontend/src/proprietary/utils/creditCosts.ts
@@ -1,4 +1,4 @@
-import { ToolId } from '@app/types/toolId';
+import { ToolId } from "@app/types/toolId";
 
 // Credit costs based on ResourceWeight enum from backend
 export const CREDIT_COSTS = {
diff --git a/frontend/src/proprietary/utils/currencyDetection.ts b/frontend/src/proprietary/utils/currencyDetection.ts
index 408002a931..9c771fea13 100644
--- a/frontend/src/proprietary/utils/currencyDetection.ts
+++ b/frontend/src/proprietary/utils/currencyDetection.ts
@@ -3,7 +3,7 @@
  * Auto-detects user's preferred currency from browser locale
  */
 
-const STORAGE_KEY = 'preferredCurrency';
+const STORAGE_KEY = "preferredCurrency";
 
 /**
  * Map of locale codes to currency codes
@@ -11,62 +11,62 @@ const STORAGE_KEY = 'preferredCurrency';
  */
 const LOCALE_TO_CURRENCY_MAP: Record<string, string> = {
   // English variants
-  'en-US': 'usd',
-  'en-CA': 'usd',
-  'en-AU': 'usd',
-  'en-NZ': 'usd',
-  'en-GB': 'gbp',
-  'en-IE': 'eur',
+  "en-US": "usd",
+  "en-CA": "usd",
+  "en-AU": "usd",
+  "en-NZ": "usd",
+  "en-GB": "gbp",
+  "en-IE": "eur",
 
   // European locales - Euro
-  'de-DE': 'eur',
-  'de-AT': 'eur',
-  'de-CH': 'eur',
-  'fr-FR': 'eur',
-  'fr-BE': 'eur',
-  'fr-CH': 'eur',
-  'it-IT': 'eur',
-  'es-ES': 'eur',
-  'pt-PT': 'eur',
-  'nl-NL': 'eur',
-  'nl-BE': 'eur',
-  'pl-PL': 'eur',
-  'ro-RO': 'eur',
-  'el-GR': 'eur',
-  'fi-FI': 'eur',
-  'sv-SE': 'eur',
-  'da-DK': 'eur',
-  'no-NO': 'eur',
+  "de-DE": "eur",
+  "de-AT": "eur",
+  "de-CH": "eur",
+  "fr-FR": "eur",
+  "fr-BE": "eur",
+  "fr-CH": "eur",
+  "it-IT": "eur",
+  "es-ES": "eur",
+  "pt-PT": "eur",
+  "nl-NL": "eur",
+  "nl-BE": "eur",
+  "pl-PL": "eur",
+  "ro-RO": "eur",
+  "el-GR": "eur",
+  "fi-FI": "eur",
+  "sv-SE": "eur",
+  "da-DK": "eur",
+  "no-NO": "eur",
 
   // Chinese variants
-  'zh-CN': 'cny',
-  'zh-TW': 'cny',
-  'zh-HK': 'cny',
-  'zh-SG': 'cny',
+  "zh-CN": "cny",
+  "zh-TW": "cny",
+  "zh-HK": "cny",
+  "zh-SG": "cny",
 
   // Indian locales
-  'hi-IN': 'inr',
-  'en-IN': 'inr',
-  'bn-IN': 'inr',
-  'te-IN': 'inr',
-  'ta-IN': 'inr',
-  'mr-IN': 'inr',
+  "hi-IN": "inr",
+  "en-IN": "inr",
+  "bn-IN": "inr",
+  "te-IN": "inr",
+  "ta-IN": "inr",
+  "mr-IN": "inr",
 
   // Brazilian Portuguese
-  'pt-BR': 'brl',
+  "pt-BR": "brl",
 
   // Indonesian
-  'id-ID': 'idr',
-  'jv-ID': 'idr',
+  "id-ID": "idr",
+  "jv-ID": "idr",
 
   // Other major locales defaulting to USD
-  'ja-JP': 'usd',
-  'ko-KR': 'usd',
-  'ru-RU': 'usd',
-  'ar-SA': 'usd',
-  'th-TH': 'usd',
-  'vi-VN': 'usd',
-  'tr-TR': 'usd',
+  "ja-JP": "usd",
+  "ko-KR": "usd",
+  "ru-RU": "usd",
+  "ar-SA": "usd",
+  "th-TH": "usd",
+  "vi-VN": "usd",
+  "tr-TR": "usd",
 };
 
 /**
@@ -81,17 +81,15 @@ export function detectCurrencyFromLocale(locale: string): string {
   }
 
   // Try matching just the language code (e.g., 'en' from 'en-US')
-  const languageCode = locale.split('-')[0];
-  const matchingLocale = Object.keys(LOCALE_TO_CURRENCY_MAP).find(
-    key => key.startsWith(languageCode)
-  );
+  const languageCode = locale.split("-")[0];
+  const matchingLocale = Object.keys(LOCALE_TO_CURRENCY_MAP).find((key) => key.startsWith(languageCode));
 
   if (matchingLocale) {
     return LOCALE_TO_CURRENCY_MAP[matchingLocale];
   }
 
   // Default fallback to USD
-  return 'usd';
+  return "usd";
 }
 
 /**
@@ -102,7 +100,7 @@ export function getCachedCurrency(): string | null {
   try {
     return localStorage.getItem(STORAGE_KEY);
   } catch (error) {
-    console.warn('Failed to read currency from localStorage:', error);
+    console.warn("Failed to read currency from localStorage:", error);
     return null;
   }
 }
@@ -115,7 +113,7 @@ export function setCachedCurrency(currency: string): void {
   try {
     localStorage.setItem(STORAGE_KEY, currency);
   } catch (error) {
-    console.warn('Failed to save currency to localStorage:', error);
+    console.warn("Failed to save currency to localStorage:", error);
   }
 }
 
diff --git a/frontend/src/proprietary/utils/licenseCheckoutUtils.ts b/frontend/src/proprietary/utils/licenseCheckoutUtils.ts
index 6235bbfe97..83b688a114 100644
--- a/frontend/src/proprietary/utils/licenseCheckoutUtils.ts
+++ b/frontend/src/proprietary/utils/licenseCheckoutUtils.ts
@@ -3,7 +3,7 @@
  * Used by both embedded and hosted checkout flows
  */
 
-import licenseService, { LicenseInfo } from '@app/services/licenseService';
+import licenseService, { LicenseInfo } from "@app/services/licenseService";
 
 /**
  * Result of license key polling
@@ -22,7 +22,7 @@ export interface PollConfig {
   /** Check if component is still mounted (prevents state updates after unmount) */
   isMounted?: () => boolean;
   /** Callback for status changes during polling */
-  onStatusChange?: (status: 'polling' | 'ready' | 'timeout') => void;
+  onStatusChange?: (status: "polling" | "ready" | "timeout") => void;
   /** Custom backoff intervals in milliseconds (default: [1000, 2000, 4000, 8000, 16000]) */
   backoffMs?: number[];
 }
@@ -33,24 +33,20 @@ export interface PollConfig {
  */
 export async function pollLicenseKeyWithBackoff(
   installationId: string,
-  config: PollConfig = {}
+  config: PollConfig = {},
 ): Promise<LicenseKeyPollResult> {
-  const {
-    isMounted = () => true,
-    onStatusChange,
-    backoffMs = [1000, 2000, 4000, 8000, 16000],
-  } = config;
+  const { isMounted = () => true, onStatusChange, backoffMs = [1000, 2000, 4000, 8000, 16000] } = config;
 
   let attemptIndex = 0;
 
-  onStatusChange?.('polling');
+  onStatusChange?.("polling");
   console.log(`Starting license key polling for installation: ${installationId}`);
 
   const poll = async (): Promise<LicenseKeyPollResult> => {
     // Check if component is still mounted
     if (!isMounted()) {
-      console.log('Polling cancelled: component unmounted');
-      return { success: false, error: 'Component unmounted' };
+      console.log("Polling cancelled: component unmounted");
+      return { success: false, error: "Component unmounted" };
     }
 
     const attemptNumber = attemptIndex + 1;
@@ -61,12 +57,12 @@ export async function pollLicenseKeyWithBackoff(
 
       // Check mounted after async operation
       if (!isMounted()) {
-        return { success: false, error: 'Component unmounted' };
+        return { success: false, error: "Component unmounted" };
       }
 
-      if (response.status === 'ready' && response.license_key) {
-        console.log('✅ License key ready!');
-        onStatusChange?.('ready');
+      if (response.status === "ready" && response.license_key) {
+        console.log("✅ License key ready!");
+        onStatusChange?.("ready");
         return {
           success: true,
           licenseKey: response.license_key,
@@ -77,43 +73,43 @@ export async function pollLicenseKeyWithBackoff(
       attemptIndex++;
 
       if (attemptIndex >= backoffMs.length) {
-        console.warn('⏱️ License polling timeout after all attempts');
-        onStatusChange?.('timeout');
+        console.warn("⏱️ License polling timeout after all attempts");
+        onStatusChange?.("timeout");
         return {
           success: false,
           timedOut: true,
-          error: 'Polling timeout - license key not ready',
+          error: "Polling timeout - license key not ready",
         };
       }
 
       // Wait before next attempt
       const nextDelay = backoffMs[attemptIndex];
       console.log(`Retrying in ${nextDelay}ms...`);
-      await new Promise(resolve => setTimeout(resolve, nextDelay));
+      await new Promise((resolve) => setTimeout(resolve, nextDelay));
 
       return poll();
     } catch (error) {
       console.error(`Polling attempt ${attemptNumber} failed:`, error);
 
       if (!isMounted()) {
-        return { success: false, error: 'Component unmounted' };
+        return { success: false, error: "Component unmounted" };
       }
 
       attemptIndex++;
 
       if (attemptIndex >= backoffMs.length) {
-        console.error('Polling failed after all attempts');
-        onStatusChange?.('timeout');
+        console.error("Polling failed after all attempts");
+        onStatusChange?.("timeout");
         return {
           success: false,
-          error: error instanceof Error ? error.message : 'Polling failed',
+          error: error instanceof Error ? error.message : "Polling failed",
         };
       }
 
       // Retry with exponential backoff even on error
       const nextDelay = backoffMs[attemptIndex];
       console.log(`Retrying after error in ${nextDelay}ms...`);
-      await new Promise(resolve => setTimeout(resolve, nextDelay));
+      await new Promise((resolve) => setTimeout(resolve, nextDelay));
 
       return poll();
     }
@@ -143,16 +139,16 @@ export async function activateLicenseKey(
     isMounted?: () => boolean;
     /** Callback when license is activated with updated info */
     onActivated?: (licenseInfo: LicenseInfo) => void;
-  } = {}
+  } = {},
 ): Promise<LicenseActivationResult> {
   const { isMounted = () => true, onActivated } = options;
 
   try {
-    console.log('Activating license key...');
+    console.log("Activating license key...");
     const saveResponse = await licenseService.saveLicenseKey(licenseKey);
 
     if (!isMounted()) {
-      return { success: false, error: 'Component unmounted' };
+      return { success: false, error: "Component unmounted" };
     }
 
     if (saveResponse.success) {
@@ -163,7 +159,7 @@ export async function activateLicenseKey(
         const licenseInfo = await licenseService.getLicenseInfo();
 
         if (!isMounted()) {
-          return { success: false, error: 'Component unmounted' };
+          return { success: false, error: "Component unmounted" };
         }
 
         onActivated?.(licenseInfo);
@@ -174,26 +170,26 @@ export async function activateLicenseKey(
           licenseInfo,
         };
       } catch (infoError) {
-        console.error('Error fetching license info after activation:', infoError);
+        console.error("Error fetching license info after activation:", infoError);
         // Still return success since save succeeded
         return {
           success: true,
           licenseType: saveResponse.licenseType,
-          error: 'Failed to fetch updated license info',
+          error: "Failed to fetch updated license info",
         };
       }
     } else {
-      console.error('Failed to save license key:', saveResponse.error);
+      console.error("Failed to save license key:", saveResponse.error);
       return {
         success: false,
-        error: saveResponse.error || 'Failed to save license key',
+        error: saveResponse.error || "Failed to save license key",
       };
     }
   } catch (error) {
-    console.error('Error activating license key:', error);
+    console.error("Error activating license key:", error);
     return {
       success: false,
-      error: error instanceof Error ? error.message : 'Activation failed',
+      error: error instanceof Error ? error.message : "Activation failed",
     };
   }
 }
@@ -209,16 +205,16 @@ export async function resyncExistingLicense(
     isMounted?: () => boolean;
     /** Callback when license is resynced with updated info */
     onActivated?: (licenseInfo: LicenseInfo) => void;
-  } = {}
+  } = {},
 ): Promise<LicenseActivationResult> {
   const { isMounted = () => true, onActivated } = options;
 
   try {
-    console.log('Resyncing existing license with Keygen...');
+    console.log("Resyncing existing license with Keygen...");
     const resyncResponse = await licenseService.resyncLicense();
 
     if (!isMounted()) {
-      return { success: false, error: 'Component unmounted' };
+      return { success: false, error: "Component unmounted" };
     }
 
     if (resyncResponse.success) {
@@ -229,7 +225,7 @@ export async function resyncExistingLicense(
         const licenseInfo = await licenseService.getLicenseInfo();
 
         if (!isMounted()) {
-          return { success: false, error: 'Component unmounted' };
+          return { success: false, error: "Component unmounted" };
         }
 
         onActivated?.(licenseInfo);
@@ -240,26 +236,26 @@ export async function resyncExistingLicense(
           licenseInfo,
         };
       } catch (infoError) {
-        console.error('Error fetching license info after resync:', infoError);
+        console.error("Error fetching license info after resync:", infoError);
         // Still return success since resync succeeded
         return {
           success: true,
           licenseType: resyncResponse.licenseType,
-          error: 'Failed to fetch updated license info',
+          error: "Failed to fetch updated license info",
         };
       }
     } else {
-      console.error('Failed to resync license:', resyncResponse.error);
+      console.error("Failed to resync license:", resyncResponse.error);
       return {
         success: false,
-        error: resyncResponse.error || 'Failed to resync license',
+        error: resyncResponse.error || "Failed to resync license",
       };
     }
   } catch (error) {
-    console.error('Error resyncing license:', error);
+    console.error("Error resyncing license:", error);
     return {
       success: false,
-      error: error instanceof Error ? error.message : 'Resync failed',
+      error: error instanceof Error ? error.message : "Resync failed",
     };
   }
 }
diff --git a/frontend/src/proprietary/utils/planTierUtils.ts b/frontend/src/proprietary/utils/planTierUtils.ts
index e4fa12f625..9d4113961c 100644
--- a/frontend/src/proprietary/utils/planTierUtils.ts
+++ b/frontend/src/proprietary/utils/planTierUtils.ts
@@ -2,12 +2,12 @@
  * Shared utilities for plan tier comparisons and button logic
  */
 
-export type PlanTier = 'free' | 'server' | 'enterprise';
+export type PlanTier = "free" | "server" | "enterprise";
 
 const TIER_HIERARCHY: Record<PlanTier, number> = {
-  'free': 1,
-  'server': 2,
-  'enterprise': 3,
+  free: 1,
+  server: 2,
+  enterprise: 3,
 };
 
 /**
@@ -35,6 +35,9 @@ export function isDowngrade(currentTier: PlanTier | string | null | undefined, t
 /**
  * Check if enterprise is blocked for free tier users
  */
-export function isEnterpriseBlockedForFree(currentTier: PlanTier | string | null | undefined, targetTier: PlanTier | string): boolean {
-  return currentTier === 'free' && targetTier === 'enterprise';
+export function isEnterpriseBlockedForFree(
+  currentTier: PlanTier | string | null | undefined,
+  targetTier: PlanTier | string,
+): boolean {
+  return currentTier === "free" && targetTier === "enterprise";
 }
diff --git a/frontend/src/proprietary/utils/protocolDetection.ts b/frontend/src/proprietary/utils/protocolDetection.ts
index 4f7e328c55..5c33f68f51 100644
--- a/frontend/src/proprietary/utils/protocolDetection.ts
+++ b/frontend/src/proprietary/utils/protocolDetection.ts
@@ -10,7 +10,7 @@
  */
 export function isStripeConfigured(): boolean {
   const stripeKey = import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY;
-  return !!stripeKey && stripeKey.startsWith('pk_');
+  return !!stripeKey && stripeKey.startsWith("pk_");
 }
 
 /**
@@ -19,7 +19,7 @@ export function isStripeConfigured(): boolean {
  */
 export function isSecureContext(): boolean {
   // Allow localhost for development (works with both HTTP and HTTPS)
-  if (typeof window !== 'undefined') {
+  if (typeof window !== "undefined") {
     const protocol = window.location.protocol;
 
     // Localhost is considered secure for development
@@ -29,7 +29,7 @@ export function isSecureContext(): boolean {
     // }
 
     // Check if HTTPS
-    return protocol === 'https:';
+    return protocol === "https:";
   }
 
   // Default to false if window is not available (SSR context)
@@ -40,15 +40,15 @@ export function isSecureContext(): boolean {
  * Get the appropriate Stripe checkout UI mode based on current context
  * @returns 'embedded' for HTTPS with key, 'hosted' for HTTP or missing key
  */
-export function getCheckoutMode(): 'embedded' | 'hosted' {
+export function getCheckoutMode(): "embedded" | "hosted" {
   // Force hosted checkout if no publishable key (regardless of protocol)
   // Hosted checkout works without the key - it just redirects to Stripe
   if (!isStripeConfigured()) {
-    return 'hosted';
+    return "hosted";
   }
 
   // Normal protocol-based detection if key is available
-  return isSecureContext() ? 'embedded' : 'hosted';
+  return isSecureContext() ? "embedded" : "hosted";
 }
 
 /**
diff --git a/frontend/src/proprietary/utils/urlMapping.ts b/frontend/src/proprietary/utils/urlMapping.ts
index 969686ef5a..7e158af20b 100644
--- a/frontend/src/proprietary/utils/urlMapping.ts
+++ b/frontend/src/proprietary/utils/urlMapping.ts
@@ -4,8 +4,8 @@
  * to add proprietary-specific URL mappings.
  */
 
-import { ToolId } from '@app/types/toolId';
-import { URL_TO_TOOL_MAP as CORE_URL_TO_TOOL_MAP } from '@core/utils/urlMapping';
+import { ToolId } from "@app/types/toolId";
+import { URL_TO_TOOL_MAP as CORE_URL_TO_TOOL_MAP } from "@core/utils/urlMapping";
 
 // Proprietary URL mappings
 const PROPRIETARY_URL_MAPPINGS: Record<string, ToolId> = {};
diff --git a/frontend/src/prototypes/App.tsx b/frontend/src/prototypes/App.tsx
index 2b3b67b19b..18800fd6a7 100644
--- a/frontend/src/prototypes/App.tsx
+++ b/frontend/src/prototypes/App.tsx
@@ -27,9 +27,7 @@ import "@app/utils/fileIdSafety";
 function MinimalProviders({ children }: { children: React.ReactNode }) {
   return (
     <PreferencesProvider>
-      <RainbowThemeProvider>
-        {children}
-      </RainbowThemeProvider>
+      <RainbowThemeProvider>{children}</RainbowThemeProvider>
     </PreferencesProvider>
   );
 }
diff --git a/frontend/src/prototypes/components/AppProviders.tsx b/frontend/src/prototypes/components/AppProviders.tsx
index f8729b1830..e3289dd29d 100644
--- a/frontend/src/prototypes/components/AppProviders.tsx
+++ b/frontend/src/prototypes/components/AppProviders.tsx
@@ -6,13 +6,8 @@ export type { AppProvidersProps };
 
 export function AppProviders({ children, appConfigRetryOptions, appConfigProviderProps }: AppProvidersProps) {
   return (
-    <ProprietaryAppProviders
-      appConfigRetryOptions={appConfigRetryOptions}
-      appConfigProviderProps={appConfigProviderProps}
-    >
-      <ChatProvider>
-        {children}
-      </ChatProvider>
+    <ProprietaryAppProviders appConfigRetryOptions={appConfigRetryOptions} appConfigProviderProps={appConfigProviderProps}>
+      <ChatProvider>{children}</ChatProvider>
     </ProprietaryAppProviders>
   );
 }
diff --git a/frontend/src/prototypes/components/chat/ChatContext.tsx b/frontend/src/prototypes/components/chat/ChatContext.tsx
index b92f17280e..00b320d5cc 100644
--- a/frontend/src/prototypes/components/chat/ChatContext.tsx
+++ b/frontend/src/prototypes/components/chat/ChatContext.tsx
@@ -109,63 +109,68 @@ export function ChatProvider({ children }: { children: ReactNode }) {
   const toggleOpen = useCallback(() => dispatch({ type: "TOGGLE_OPEN" }), []);
   const setOpen = useCallback((open: boolean) => dispatch({ type: "SET_OPEN", open }), []);
 
-  const sendMessage = useCallback(async (content: string) => {
-    const userMessage: ChatMessage = {
-      id: crypto.randomUUID(),
-      role: "user",
-      content,
-      timestamp: Date.now(),
-    };
-    dispatch({ type: "ADD_MESSAGE", message: userMessage });
-    dispatch({ type: "SET_LOADING", loading: true });
+  const sendMessage = useCallback(
+    async (content: string) => {
+      const userMessage: ChatMessage = {
+        id: crypto.randomUUID(),
+        role: "user",
+        content,
+        timestamp: Date.now(),
+      };
+      dispatch({ type: "ADD_MESSAGE", message: userMessage });
+      dispatch({ type: "SET_LOADING", loading: true });
 
-    try {
-      const formData = new FormData();
-      formData.append("userMessage", content);
-      activeFiles.forEach((file, i) => {
-        formData.append(`fileInputs[${i}].fileInput`, file);
-      });
+      try {
+        const formData = new FormData();
+        formData.append("userMessage", content);
+        activeFiles.forEach((file, i) => {
+          formData.append(`fileInputs[${i}].fileInput`, file);
+        });
 
-      const response = await fetch("/api/v1/ai/orchestrate", {
-        method: "POST",
-        body: formData,
-      });
+        const response = await fetch("/api/v1/ai/orchestrate", {
+          method: "POST",
+          body: formData,
+        });
 
-      if (!response.ok) {
-        throw new Error(`AI engine request failed: ${response.status}`);
+        if (!response.ok) {
+          throw new Error(`AI engine request failed: ${response.status}`);
+        }
+
+        const data: AiWorkflowResponse = await response.json();
+        const replyContent = formatWorkflowResponse(data);
+        const assistantMessage: ChatMessage = {
+          id: crypto.randomUUID(),
+          role: "assistant",
+          content: replyContent,
+          timestamp: Date.now(),
+        };
+        dispatch({ type: "ADD_MESSAGE", message: assistantMessage });
+      } catch {
+        const errorMessage: ChatMessage = {
+          id: crypto.randomUUID(),
+          role: "assistant",
+          content: "Failed to get a response. The AI engine may not be available yet.",
+          timestamp: Date.now(),
+        };
+        dispatch({ type: "ADD_MESSAGE", message: errorMessage });
+      } finally {
+        dispatch({ type: "SET_LOADING", loading: false });
       }
-
-      const data: AiWorkflowResponse = await response.json();
-      const replyContent = formatWorkflowResponse(data);
-      const assistantMessage: ChatMessage = {
-        id: crypto.randomUUID(),
-        role: "assistant",
-        content: replyContent,
-        timestamp: Date.now(),
-      };
-      dispatch({ type: "ADD_MESSAGE", message: assistantMessage });
-    } catch {
-      const errorMessage: ChatMessage = {
-        id: crypto.randomUUID(),
-        role: "assistant",
-        content: "Failed to get a response. The AI engine may not be available yet.",
-        timestamp: Date.now(),
-      };
-      dispatch({ type: "ADD_MESSAGE", message: errorMessage });
-    } finally {
-      dispatch({ type: "SET_LOADING", loading: false });
-    }
-  }, [activeFiles]);
+    },
+    [activeFiles],
+  );
 
   return (
-    <ChatContext.Provider value={{
-      messages: state.messages,
-      isOpen: state.isOpen,
-      isLoading: state.isLoading,
-      toggleOpen,
-      setOpen,
-      sendMessage,
-    }}>
+    <ChatContext.Provider
+      value={{
+        messages: state.messages,
+        isOpen: state.isOpen,
+        isLoading: state.isLoading,
+        toggleOpen,
+        setOpen,
+        sendMessage,
+      }}
+    >
       {children}
     </ChatContext.Provider>
   );
diff --git a/frontend/src/prototypes/components/chat/ChatPanel.tsx b/frontend/src/prototypes/components/chat/ChatPanel.tsx
index f47a185de7..d94c5aabe8 100644
--- a/frontend/src/prototypes/components/chat/ChatPanel.tsx
+++ b/frontend/src/prototypes/components/chat/ChatPanel.tsx
@@ -9,12 +9,10 @@ import "@app/components/chat/ChatPanel.css";
 function ChatMessageBubble({ role, content }: { role: "user" | "assistant"; content: string }) {
   return (
     <div className={`chat-message chat-message-${role}`}>
-      <Paper
-        className={`chat-bubble chat-bubble-${role}`}
-        p="xs"
-        radius="md"
-      >
-        <Text size="sm" style={{ whiteSpace: "pre-wrap" }}>{content}</Text>
+      <Paper className={`chat-bubble chat-bubble-${role}`} p="xs" radius="md">
+        <Text size="sm" style={{ whiteSpace: "pre-wrap" }}>
+          {content}
+        </Text>
       </Paper>
     </div>
   );
@@ -75,7 +73,9 @@ export function ChatPanel() {
           <Box className="chat-panel" style={styles}>
             {/* Header */}
             <div className="chat-panel-header">
-              <Text fw={600} size="sm">AI Assistant</Text>
+              <Text fw={600} size="sm">
+                AI Assistant
+              </Text>
               <ActionIcon variant="subtle" size="sm" onClick={toggleOpen} aria-label="Close chat">
                 <CloseIcon sx={{ fontSize: 16 }} />
               </ActionIcon>
@@ -95,7 +95,9 @@ export function ChatPanel() {
                 {isLoading && (
                   <div className="chat-message chat-message-assistant">
                     <Paper className="chat-bubble chat-bubble-assistant" p="xs" radius="md">
-                      <Text size="sm" c="dimmed">Thinking...</Text>
+                      <Text size="sm" c="dimmed">
+                        Thinking...
+                      </Text>
                     </Paper>
                   </div>
                 )}
diff --git a/frontend/src/prototypes/tsconfig.json b/frontend/src/prototypes/tsconfig.json
index 5dad506bd5..3b9ec7565e 100644
--- a/frontend/src/prototypes/tsconfig.json
+++ b/frontend/src/prototypes/tsconfig.json
@@ -3,25 +3,10 @@
   "compilerOptions": {
     "baseUrl": "../../",
     "paths": {
-      "@app/*": [
-        "src/prototypes/*",
-        "src/proprietary/*",
-        "src/core/*"
-      ],
-      "@proprietary/*": [
-        "src/proprietary/*"
-      ],
-      "@core/*": [
-        "src/core/*"
-      ]
+      "@app/*": ["src/prototypes/*", "src/proprietary/*", "src/core/*"],
+      "@proprietary/*": ["src/proprietary/*"],
+      "@core/*": ["src/core/*"]
     }
   },
-  "include": [
-    "../global.d.ts",
-    "../*.js",
-    "../*.ts",
-    "../*.tsx",
-    "../core/setupTests.ts",
-    "."
-  ]
+  "include": ["../global.d.ts", "../*.js", "../*.ts", "../*.tsx", "../core/setupTests.ts", "."]
 }
diff --git a/frontend/src/reportWebVitals.js b/frontend/src/reportWebVitals.js
index 5253d3ad9e..9ecd33f9ca 100644
--- a/frontend/src/reportWebVitals.js
+++ b/frontend/src/reportWebVitals.js
@@ -1,6 +1,6 @@
-const reportWebVitals = onPerfEntry => {
+const reportWebVitals = (onPerfEntry) => {
   if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+    import("web-vitals").then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
       getCLS(onPerfEntry);
       getFID(onPerfEntry);
       getFCP(onPerfEntry);
diff --git a/frontend/src/saas/App.tsx b/frontend/src/saas/App.tsx
index 4a8c5f9b17..51b9f9a945 100644
--- a/frontend/src/saas/App.tsx
+++ b/frontend/src/saas/App.tsx
@@ -1,27 +1,27 @@
-import { Suspense } from 'react';
-import { Routes, Route } from 'react-router-dom';
-import { AppProviders } from '@app/components/AppProviders';
-import { setBaseUrl } from '@app/constants/app';
-import type { AppConfig } from '@app/contexts/AppConfigContext';
-import { AppLayout } from '@app/components/AppLayout';
-import { LoadingFallback } from '@app/components/shared/LoadingFallback';
-import OnboardingTour from '@app/components/onboarding/OnboardingTour';
-import Landing from '@app/routes/Landing';
-import Login from '@app/routes/Login';
-import Signup from '@app/routes/Signup';
-import AuthCallback from '@app/routes/AuthCallback';
-import ResetPassword from '@app/routes/ResetPassword';
-import OnboardingBootstrap from '@app/components/OnboardingBootstrap';
-import TrialExpiredBootstrap from '@app/components/TrialExpiredBootstrap';
+import { Suspense } from "react";
+import { Routes, Route } from "react-router-dom";
+import { AppProviders } from "@app/components/AppProviders";
+import { setBaseUrl } from "@app/constants/app";
+import type { AppConfig } from "@app/contexts/AppConfigContext";
+import { AppLayout } from "@app/components/AppLayout";
+import { LoadingFallback } from "@app/components/shared/LoadingFallback";
+import OnboardingTour from "@app/components/onboarding/OnboardingTour";
+import Landing from "@app/routes/Landing";
+import Login from "@app/routes/Login";
+import Signup from "@app/routes/Signup";
+import AuthCallback from "@app/routes/AuthCallback";
+import ResetPassword from "@app/routes/ResetPassword";
+import OnboardingBootstrap from "@app/components/OnboardingBootstrap";
+import TrialExpiredBootstrap from "@app/components/TrialExpiredBootstrap";
 
 // Import global styles
-import '@app/styles/tailwind.css';
-import '@app/styles/saas-theme.css';
-import '@app/styles/cookieconsent.css';
-import '@app/styles/index.css';
+import "@app/styles/tailwind.css";
+import "@app/styles/saas-theme.css";
+import "@app/styles/cookieconsent.css";
+import "@app/styles/index.css";
 
 // Import file ID debugging helpers (development only)
-import '@app/utils/fileIdSafety';
+import "@app/utils/fileIdSafety";
 
 function handleConfigLoaded(config: AppConfig) {
   if (config.baseUrl) setBaseUrl(config.baseUrl);
diff --git a/frontend/src/saas/auth/UseSession.tsx b/frontend/src/saas/auth/UseSession.tsx
index fd46263694..eca1376c53 100644
--- a/frontend/src/saas/auth/UseSession.tsx
+++ b/frontend/src/saas/auth/UseSession.tsx
@@ -1,44 +1,44 @@
-import { createContext, useContext, useEffect, useState, ReactNode, useCallback } from 'react'
-import { supabase } from '@app/auth/supabase'
-import type { Session, User as SupabaseUser, AuthError } from '@supabase/supabase-js'
-import { CreditSummary, SubscriptionInfo, CreditCheckResult, ApiCredits } from '@app/types/credits'
-import apiClient, { setGlobalCreditUpdateCallback } from '@app/services/apiClient'
-import { synchronizeUserUpgrade } from '@app/services/userService'
-import { syncOAuthAvatar, getProfilePictureMetadata, type ProfilePictureMetadata } from '@app/services/avatarSyncService'
+import { createContext, useContext, useEffect, useState, ReactNode, useCallback } from "react";
+import { supabase } from "@app/auth/supabase";
+import type { Session, User as SupabaseUser, AuthError } from "@supabase/supabase-js";
+import { CreditSummary, SubscriptionInfo, CreditCheckResult, ApiCredits } from "@app/types/credits";
+import apiClient, { setGlobalCreditUpdateCallback } from "@app/services/apiClient";
+import { synchronizeUserUpgrade } from "@app/services/userService";
+import { syncOAuthAvatar, getProfilePictureMetadata, type ProfilePictureMetadata } from "@app/services/avatarSyncService";
 
 // Extend Supabase User to include optional username for compatibility
 export type User = SupabaseUser & { username?: string };
 
 export interface TrialStatus {
-  isTrialing: boolean
-  trialEnd: string
-  daysRemaining: number
-  hasPaymentMethod: boolean
-  hasScheduledSub: boolean
-  status: string
+  isTrialing: boolean;
+  trialEnd: string;
+  daysRemaining: number;
+  hasPaymentMethod: boolean;
+  hasScheduledSub: boolean;
+  status: string;
 }
 
 interface AuthContextType {
-  session: Session | null
-  user: User | null
-  loading: boolean
-  error: AuthError | null
-  creditBalance: number | null
-  subscription: SubscriptionInfo | null
-  creditSummary: CreditSummary | null
-  isPro: boolean | null
-  trialStatus: TrialStatus | null
-  profilePictureUrl: string | null
-  profilePictureMetadata: ProfilePictureMetadata | null
-  signOut: () => Promise<void>
-  refreshSession: () => Promise<void>
-  hasSufficientCredits: (requiredCredits: number) => CreditCheckResult
-  updateCredits: (newBalance: number) => void
-  refreshCredits: () => Promise<void>
-  refreshProStatus: () => Promise<void>
-  refreshTrialStatus: () => Promise<void>
-  refreshProfilePicture: () => Promise<void>
-  refreshProfilePictureMetadata: () => Promise<void>
+  session: Session | null;
+  user: User | null;
+  loading: boolean;
+  error: AuthError | null;
+  creditBalance: number | null;
+  subscription: SubscriptionInfo | null;
+  creditSummary: CreditSummary | null;
+  isPro: boolean | null;
+  trialStatus: TrialStatus | null;
+  profilePictureUrl: string | null;
+  profilePictureMetadata: ProfilePictureMetadata | null;
+  signOut: () => Promise<void>;
+  refreshSession: () => Promise<void>;
+  hasSufficientCredits: (requiredCredits: number) => CreditCheckResult;
+  updateCredits: (newBalance: number) => void;
+  refreshCredits: () => Promise<void>;
+  refreshProStatus: () => Promise<void>;
+  refreshTrialStatus: () => Promise<void>;
+  refreshProfilePicture: () => Promise<void>;
+  refreshProfilePictureMetadata: () => Promise<void>;
 }
 
 const AuthContext = createContext<AuthContextType>({
@@ -61,467 +61,488 @@ const AuthContext = createContext<AuthContextType>({
   refreshProStatus: async () => {},
   refreshTrialStatus: async () => {},
   refreshProfilePicture: async () => {},
-  refreshProfilePictureMetadata: async () => {}
-})
+  refreshProfilePictureMetadata: async () => {},
+});
 
 export function AuthProvider({ children }: { children: ReactNode }) {
-  const [session, setSession] = useState<Session | null>(null)
-  const [loading, setLoading] = useState(true)
-  const [error, setError] = useState<AuthError | null>(null)
-  const [creditBalance, setCreditBalance] = useState<number | null>(null)
-  const [subscription, setSubscription] = useState<SubscriptionInfo | null>(null)
-  const [creditSummary, setCreditSummary] = useState<CreditSummary | null>(null)
-  const [isPro, setIsPro] = useState<boolean | null>(null)
-  const [trialStatus, setTrialStatus] = useState<TrialStatus | null>(null)
-  const [profilePictureUrl, setProfilePictureUrl] = useState<string | null>(null)
-  const [profilePictureMetadata, setProfilePictureMetadata] = useState<ProfilePictureMetadata | null>(null)
+  const [session, setSession] = useState<Session | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<AuthError | null>(null);
+  const [creditBalance, setCreditBalance] = useState<number | null>(null);
+  const [subscription, setSubscription] = useState<SubscriptionInfo | null>(null);
+  const [creditSummary, setCreditSummary] = useState<CreditSummary | null>(null);
+  const [isPro, setIsPro] = useState<boolean | null>(null);
+  const [trialStatus, setTrialStatus] = useState<TrialStatus | null>(null);
+  const [profilePictureUrl, setProfilePictureUrl] = useState<string | null>(null);
+  const [profilePictureMetadata, setProfilePictureMetadata] = useState<ProfilePictureMetadata | null>(null);
 
-  const fetchCredits = useCallback(async (sessionToUse?: Session | null) => {
-    const currentSession = sessionToUse ?? session
+  const fetchCredits = useCallback(
+    async (sessionToUse?: Session | null) => {
+      const currentSession = sessionToUse ?? session;
 
-    if (!currentSession?.user) {
-      console.debug('[Auth Debug] No user session, skipping credit fetch')
-      setCreditBalance(null)
-      setCreditSummary(null)
-      setSubscription(null)
-      return
-    }
-
-    try {
-      console.debug('[Auth Debug] Fetching credits for user:', currentSession.user.id)
-      const response = await apiClient.get<ApiCredits>('/api/v1/credits')
-      const apiCredits = response.data
-
-      // Map server payload to app CreditSummary
-      const credits: CreditSummary = {
-        currentCredits: apiCredits.totalAvailableCredits,
-        maxCredits: apiCredits.weeklyCreditsAllocated + apiCredits.totalBoughtCredits,
-        creditsUsed: (apiCredits.weeklyCreditsAllocated - apiCredits.weeklyCreditsRemaining) + (apiCredits.totalBoughtCredits - apiCredits.boughtCreditsRemaining),
-        creditsRemaining: apiCredits.totalAvailableCredits,
-        resetDate: apiCredits.weeklyResetDate,
-        weeklyAllowance: apiCredits.weeklyCreditsAllocated
+      if (!currentSession?.user) {
+        console.debug("[Auth Debug] No user session, skipping credit fetch");
+        setCreditBalance(null);
+        setCreditSummary(null);
+        setSubscription(null);
+        return;
       }
 
-      setCreditSummary(credits)
-      setCreditBalance(credits.creditsRemaining)
+      try {
+        console.debug("[Auth Debug] Fetching credits for user:", currentSession.user.id);
+        const response = await apiClient.get<ApiCredits>("/api/v1/credits");
+        const apiCredits = response.data;
 
-      const subscriptionInfo: SubscriptionInfo = {
-        status: 'active',
-        tier: (credits.weeklyAllowance || 0) > 100 ? 'premium' : 'free',
-        creditsPerWeek: credits.weeklyAllowance,
-        maxCredits: credits.maxCredits
+        // Map server payload to app CreditSummary
+        const credits: CreditSummary = {
+          currentCredits: apiCredits.totalAvailableCredits,
+          maxCredits: apiCredits.weeklyCreditsAllocated + apiCredits.totalBoughtCredits,
+          creditsUsed:
+            apiCredits.weeklyCreditsAllocated -
+            apiCredits.weeklyCreditsRemaining +
+            (apiCredits.totalBoughtCredits - apiCredits.boughtCreditsRemaining),
+          creditsRemaining: apiCredits.totalAvailableCredits,
+          resetDate: apiCredits.weeklyResetDate,
+          weeklyAllowance: apiCredits.weeklyCreditsAllocated,
+        };
+
+        setCreditSummary(credits);
+        setCreditBalance(credits.creditsRemaining);
+
+        const subscriptionInfo: SubscriptionInfo = {
+          status: "active",
+          tier: (credits.weeklyAllowance || 0) > 100 ? "premium" : "free",
+          creditsPerWeek: credits.weeklyAllowance,
+          maxCredits: credits.maxCredits,
+        };
+        setSubscription(subscriptionInfo);
+
+        console.debug("[Auth Debug] Credits fetched successfully:", credits);
+      } catch (error: unknown) {
+        console.debug("[Auth Debug] Failed to fetch credits:", error);
+        // Don't set error state for credit fetching failures to avoid disrupting auth flow
+        // Credits might not be available in all deployments
+        setCreditBalance(null);
+        setCreditSummary(null);
+        setSubscription(null);
       }
-      setSubscription(subscriptionInfo)
-
-      console.debug('[Auth Debug] Credits fetched successfully:', credits)
-    } catch (error: unknown) {
-      console.debug('[Auth Debug] Failed to fetch credits:', error)
-      // Don't set error state for credit fetching failures to avoid disrupting auth flow
-      // Credits might not be available in all deployments
-      setCreditBalance(null)
-      setCreditSummary(null)
-      setSubscription(null)
-    }
-  }, [session])
+    },
+    [session],
+  );
 
   const refreshCredits = useCallback(async () => {
-    await fetchCredits()
-  }, [fetchCredits])
+    await fetchCredits();
+  }, [fetchCredits]);
 
-  const fetchProStatus = useCallback(async (sessionToUse?: Session | null) => {
-    const currentSession = sessionToUse ?? session
+  const fetchProStatus = useCallback(
+    async (sessionToUse?: Session | null) => {
+      const currentSession = sessionToUse ?? session;
 
-    if (!currentSession?.user) {
-      console.debug('[Auth Debug] No user session, skipping pro status fetch')
-      setIsPro(null)
-      return
-    }
-
-    try {
-      console.debug('[Auth Debug] Fetching pro status for user:', currentSession.user.id)
-      const { data: proStatus, error } = await supabase.rpc('is_pro')
-
-      if (error) {
-        console.error('[Auth Debug] Error checking Pro status:', error)
-        setIsPro(false) // Default to false if there's an error
-      } else {
-        const isProUser = Boolean(proStatus)
-        setIsPro(isProUser)
-        console.debug('[Auth Debug] Pro status fetched:', isProUser)
+      if (!currentSession?.user) {
+        console.debug("[Auth Debug] No user session, skipping pro status fetch");
+        setIsPro(null);
+        return;
       }
-    } catch (error: unknown) {
-      console.debug('[Auth Debug] Failed to fetch pro status:', error)
-      setIsPro(false) // Default to false if there's an error
-    }
-  }, [session])
+
+      try {
+        console.debug("[Auth Debug] Fetching pro status for user:", currentSession.user.id);
+        const { data: proStatus, error } = await supabase.rpc("is_pro");
+
+        if (error) {
+          console.error("[Auth Debug] Error checking Pro status:", error);
+          setIsPro(false); // Default to false if there's an error
+        } else {
+          const isProUser = Boolean(proStatus);
+          setIsPro(isProUser);
+          console.debug("[Auth Debug] Pro status fetched:", isProUser);
+        }
+      } catch (error: unknown) {
+        console.debug("[Auth Debug] Failed to fetch pro status:", error);
+        setIsPro(false); // Default to false if there's an error
+      }
+    },
+    [session],
+  );
 
   const refreshProStatus = useCallback(async () => {
-    await fetchProStatus()
-  }, [fetchProStatus])
+    await fetchProStatus();
+  }, [fetchProStatus]);
 
-  const fetchTrialStatus = useCallback(async (sessionToUse?: Session | null) => {
-    const currentSession = sessionToUse ?? session
+  const fetchTrialStatus = useCallback(
+    async (sessionToUse?: Session | null) => {
+      const currentSession = sessionToUse ?? session;
 
-    if (!currentSession?.user) {
-      console.debug('[Auth Debug] No user session, skipping trial status fetch')
-      setTrialStatus(null)
-      return
-    }
-
-    try {
-      console.debug('[Auth Debug] Fetching trial status for user:', currentSession.user.id)
-      const { data, error } = await supabase
-        .from('billing_subscriptions')
-        .select('status, trial_end, has_payment_method, scheduled_subscription_id')
-        .in('status', ['trialing', 'incomplete_expired', 'canceled'])
-        .order('created_at', { ascending: false })
-        .limit(1)
-        .maybeSingle()
-
-      if (error) {
-        console.error('[Auth Debug] Error fetching trial status:', error)
-        setTrialStatus(null)
-        return
+      if (!currentSession?.user) {
+        console.debug("[Auth Debug] No user session, skipping trial status fetch");
+        setTrialStatus(null);
+        return;
       }
 
-      if (data?.trial_end) {
-        const trialEnd = new Date(data.trial_end)
-        const now = new Date()
-        const daysRemaining = Math.ceil((trialEnd.getTime() - now.getTime()) / (1000 * 60 * 60 * 24))
+      try {
+        console.debug("[Auth Debug] Fetching trial status for user:", currentSession.user.id);
+        const { data, error } = await supabase
+          .from("billing_subscriptions")
+          .select("status, trial_end, has_payment_method, scheduled_subscription_id")
+          .in("status", ["trialing", "incomplete_expired", "canceled"])
+          .order("created_at", { ascending: false })
+          .limit(1)
+          .maybeSingle();
 
-        setTrialStatus({
-          isTrialing: data.status === 'trialing' && daysRemaining > 0,
-          trialEnd: data.trial_end,
-          daysRemaining: Math.max(0, daysRemaining),
-          hasPaymentMethod: data.has_payment_method || false,
-          hasScheduledSub: !!data.scheduled_subscription_id,
-          status: data.status
-        })
-        console.debug('[Auth Debug] Trial status fetched:', {
-          status: data.status,
-          daysRemaining: Math.max(0, daysRemaining),
-          hasPaymentMethod: data.has_payment_method,
-          isTrialing: data.status === 'trialing' && daysRemaining > 0
-        })
-      } else {
-        setTrialStatus(null)
+        if (error) {
+          console.error("[Auth Debug] Error fetching trial status:", error);
+          setTrialStatus(null);
+          return;
+        }
+
+        if (data?.trial_end) {
+          const trialEnd = new Date(data.trial_end);
+          const now = new Date();
+          const daysRemaining = Math.ceil((trialEnd.getTime() - now.getTime()) / (1000 * 60 * 60 * 24));
+
+          setTrialStatus({
+            isTrialing: data.status === "trialing" && daysRemaining > 0,
+            trialEnd: data.trial_end,
+            daysRemaining: Math.max(0, daysRemaining),
+            hasPaymentMethod: data.has_payment_method || false,
+            hasScheduledSub: !!data.scheduled_subscription_id,
+            status: data.status,
+          });
+          console.debug("[Auth Debug] Trial status fetched:", {
+            status: data.status,
+            daysRemaining: Math.max(0, daysRemaining),
+            hasPaymentMethod: data.has_payment_method,
+            isTrialing: data.status === "trialing" && daysRemaining > 0,
+          });
+        } else {
+          setTrialStatus(null);
+        }
+      } catch (error: unknown) {
+        console.debug("[Auth Debug] Failed to fetch trial status:", error);
+        setTrialStatus(null);
       }
-    } catch (error: unknown) {
-      console.debug('[Auth Debug] Failed to fetch trial status:', error)
-      setTrialStatus(null)
-    }
-  }, [session])
+    },
+    [session],
+  );
 
   const refreshTrialStatus = useCallback(async () => {
-    await fetchTrialStatus()
-  }, [fetchTrialStatus])
+    await fetchTrialStatus();
+  }, [fetchTrialStatus]);
 
-  const fetchProfilePicture = useCallback(async (sessionToUse?: Session | null) => {
-    const currentSession = sessionToUse ?? session
+  const fetchProfilePicture = useCallback(
+    async (sessionToUse?: Session | null) => {
+      const currentSession = sessionToUse ?? session;
 
-    if (!currentSession?.user) {
-      console.debug('[Auth Debug] No user session, skipping profile picture fetch')
-      setProfilePictureUrl(null)
-      return
-    }
-
-    try {
-      const PROFILE_BUCKET = 'profile-pictures'
-      const profilePath = `${currentSession.user.id}/avatar`
-
-      console.debug('[Auth Debug] Fetching profile picture for user:', currentSession.user.id)
-      const { data, error } = await supabase
-        .storage
-        .from(PROFILE_BUCKET)
-        .createSignedUrl(profilePath, 60 * 60)
-
-      if (error) {
-        // Profile picture not found is expected for users without uploads
-        console.debug('[Auth Debug] Profile picture not available:', error.message)
-        setProfilePictureUrl(null)
-      } else {
-        setProfilePictureUrl(data.signedUrl)
-        console.debug('[Auth Debug] Profile picture URL fetched successfully')
+      if (!currentSession?.user) {
+        console.debug("[Auth Debug] No user session, skipping profile picture fetch");
+        setProfilePictureUrl(null);
+        return;
       }
-    } catch (error: unknown) {
-      console.debug('[Auth Debug] Failed to fetch profile picture:', error)
-      setProfilePictureUrl(null)
-    }
-  }, [session])
+
+      try {
+        const PROFILE_BUCKET = "profile-pictures";
+        const profilePath = `${currentSession.user.id}/avatar`;
+
+        console.debug("[Auth Debug] Fetching profile picture for user:", currentSession.user.id);
+        const { data, error } = await supabase.storage.from(PROFILE_BUCKET).createSignedUrl(profilePath, 60 * 60);
+
+        if (error) {
+          // Profile picture not found is expected for users without uploads
+          console.debug("[Auth Debug] Profile picture not available:", error.message);
+          setProfilePictureUrl(null);
+        } else {
+          setProfilePictureUrl(data.signedUrl);
+          console.debug("[Auth Debug] Profile picture URL fetched successfully");
+        }
+      } catch (error: unknown) {
+        console.debug("[Auth Debug] Failed to fetch profile picture:", error);
+        setProfilePictureUrl(null);
+      }
+    },
+    [session],
+  );
 
   const refreshProfilePicture = useCallback(async () => {
-    await fetchProfilePicture()
-  }, [fetchProfilePicture])
+    await fetchProfilePicture();
+  }, [fetchProfilePicture]);
 
-  const fetchProfilePictureMetadata = useCallback(async (sessionToUse?: Session | null) => {
-    const currentSession = sessionToUse ?? session
+  const fetchProfilePictureMetadata = useCallback(
+    async (sessionToUse?: Session | null) => {
+      const currentSession = sessionToUse ?? session;
 
-    if (!currentSession?.user) {
-      console.debug('[Auth Debug] No user session, skipping profile picture metadata fetch')
-      setProfilePictureMetadata(null)
-      return
-    }
+      if (!currentSession?.user) {
+        console.debug("[Auth Debug] No user session, skipping profile picture metadata fetch");
+        setProfilePictureMetadata(null);
+        return;
+      }
 
-    try {
-      console.debug('[Auth Debug] Fetching profile picture metadata for user:', currentSession.user.id)
-      const metadata = await getProfilePictureMetadata(currentSession.user.id)
-      setProfilePictureMetadata(metadata)
-      console.debug('[Auth Debug] Profile picture metadata fetched:', metadata)
-    } catch (error: unknown) {
-      console.debug('[Auth Debug] Failed to fetch profile picture metadata:', error)
-      setProfilePictureMetadata(null)
-    }
-  }, [session])
+      try {
+        console.debug("[Auth Debug] Fetching profile picture metadata for user:", currentSession.user.id);
+        const metadata = await getProfilePictureMetadata(currentSession.user.id);
+        setProfilePictureMetadata(metadata);
+        console.debug("[Auth Debug] Profile picture metadata fetched:", metadata);
+      } catch (error: unknown) {
+        console.debug("[Auth Debug] Failed to fetch profile picture metadata:", error);
+        setProfilePictureMetadata(null);
+      }
+    },
+    [session],
+  );
 
   const refreshProfilePictureMetadata = useCallback(async () => {
-    await fetchProfilePictureMetadata()
-  }, [fetchProfilePictureMetadata])
+    await fetchProfilePictureMetadata();
+  }, [fetchProfilePictureMetadata]);
 
-  const updateCredits = useCallback((newBalance: number) => {
-    console.debug('[Auth Debug] Updating credit balance:', { from: creditBalance, to: newBalance })
-    setCreditBalance(newBalance)
-    // Also update the creditSummary if it exists
-    if (creditSummary) {
-      const updatedSummary: CreditSummary = {
-        ...creditSummary,
-        creditsRemaining: newBalance,
-        currentCredits: newBalance
+  const updateCredits = useCallback(
+    (newBalance: number) => {
+      console.debug("[Auth Debug] Updating credit balance:", { from: creditBalance, to: newBalance });
+      setCreditBalance(newBalance);
+      // Also update the creditSummary if it exists
+      if (creditSummary) {
+        const updatedSummary: CreditSummary = {
+          ...creditSummary,
+          creditsRemaining: newBalance,
+          currentCredits: newBalance,
+        };
+        setCreditSummary(updatedSummary);
       }
-      setCreditSummary(updatedSummary)
-    }
-  }, [creditSummary])
+    },
+    [creditSummary],
+  );
 
-  const hasSufficientCredits = useCallback((requiredCredits: number): CreditCheckResult => {
-    const currentBalance = creditBalance ?? 0
-    const hasSufficient = currentBalance >= requiredCredits
-    console.debug('[Auth Debug] Credit check:', { requiredCredits, currentBalance, hasSufficient })
+  const hasSufficientCredits = useCallback(
+    (requiredCredits: number): CreditCheckResult => {
+      const currentBalance = creditBalance ?? 0;
+      const hasSufficient = currentBalance >= requiredCredits;
+      console.debug("[Auth Debug] Credit check:", { requiredCredits, currentBalance, hasSufficient });
 
-    return {
-      hasSufficientCredits: hasSufficient,
-      currentBalance,
-      requiredCredits,
-      shortfall: hasSufficient ? undefined : requiredCredits - currentBalance
-    }
-  }, [creditBalance])
+      return {
+        hasSufficientCredits: hasSufficient,
+        currentBalance,
+        requiredCredits,
+        shortfall: hasSufficient ? undefined : requiredCredits - currentBalance,
+      };
+    },
+    [creditBalance],
+  );
 
   const refreshSession = async () => {
     try {
-      setLoading(true)
-      setError(null)
-      const { data, error } = await supabase.auth.refreshSession()
+      setLoading(true);
+      setError(null);
+      const { data, error } = await supabase.auth.refreshSession();
 
       if (error) {
-        console.error('[Auth Debug] Session refresh error:', error)
-        setError(error)
-        setSession(null)
+        console.error("[Auth Debug] Session refresh error:", error);
+        setError(error);
+        setSession(null);
       } else {
-        console.debug('[Auth Debug] Session refreshed successfully')
-        setSession(data.session)
+        console.debug("[Auth Debug] Session refreshed successfully");
+        setSession(data.session);
       }
     } catch (err) {
-      console.error('[Auth Debug] Unexpected error during session refresh:', err)
-      setError(err as AuthError)
+      console.error("[Auth Debug] Unexpected error during session refresh:", err);
+      setError(err as AuthError);
     } finally {
-      setLoading(false)
+      setLoading(false);
     }
-  }
+  };
 
   const signOut = async () => {
     try {
-      setError(null)
-      const { error } = await supabase.auth.signOut()
+      setError(null);
+      const { error } = await supabase.auth.signOut();
 
       if (error) {
-        console.error('[Auth Debug] Sign out error:', error)
-        setError(error)
+        console.error("[Auth Debug] Sign out error:", error);
+        setError(error);
       } else {
-        console.debug('[Auth Debug] Signed out successfully')
-        setSession(null)
+        console.debug("[Auth Debug] Signed out successfully");
+        setSession(null);
       }
     } catch (err) {
-      console.error('[Auth Debug] Unexpected error during sign out:', err)
-      setError(err as AuthError)
+      console.error("[Auth Debug] Unexpected error during sign out:", err);
+      setError(err as AuthError);
     }
-  }
+  };
 
   // Set up global credit update callback
   useEffect(() => {
-    setGlobalCreditUpdateCallback(updateCredits)
-  }, [updateCredits])
+    setGlobalCreditUpdateCallback(updateCredits);
+  }, [updateCredits]);
 
   useEffect(() => {
-    let mounted = true
+    let mounted = true;
 
     // Load current session on first mount
     const initializeAuth = async () => {
       try {
-        console.debug('[Auth Debug] Initializing auth...')
-        const { data, error } = await supabase.auth.getSession()
+        console.debug("[Auth Debug] Initializing auth...");
+        const { data, error } = await supabase.auth.getSession();
 
-        if (!mounted) return
+        if (!mounted) return;
 
         if (error) {
-          console.error('[Auth Debug] Initial session error:', error)
-          setError(error)
+          console.error("[Auth Debug] Initial session error:", error);
+          setError(error);
         } else {
-          console.debug('[Auth Debug] Initial session loaded:', {
+          console.debug("[Auth Debug] Initial session loaded:", {
             hasSession: !!data.session,
             userId: data.session?.user?.id,
-            email: data.session?.user?.email
-          })
-          setSession(data.session)
+            email: data.session?.user?.email,
+          });
+          setSession(data.session);
 
           // Fetch credits, pro status, trial status, profile picture metadata, and profile picture using the session from the response
           if (data.session?.user) {
             // Sync OAuth avatar in background
             syncOAuthAvatar(data.session.user).catch((err) => {
-              console.debug('[Auth Debug] Failed to sync OAuth avatar on init:', err)
-            })
+              console.debug("[Auth Debug] Failed to sync OAuth avatar on init:", err);
+            });
 
-            await fetchCredits(data.session)
-            await fetchProStatus(data.session)
-            await fetchTrialStatus(data.session)
-            await fetchProfilePictureMetadata(data.session)
+            await fetchCredits(data.session);
+            await fetchProStatus(data.session);
+            await fetchTrialStatus(data.session);
+            await fetchProfilePictureMetadata(data.session);
 
             // Small delay to allow avatar sync to complete if quick
             setTimeout(() => {
-              fetchProfilePicture(data.session)
-            }, 500)
+              fetchProfilePicture(data.session);
+            }, 500);
           }
         }
       } catch (err) {
-        console.error('[Auth Debug] Unexpected error during auth initialization:', err)
+        console.error("[Auth Debug] Unexpected error during auth initialization:", err);
         if (mounted) {
-          setError(err as AuthError)
+          setError(err as AuthError);
         }
       } finally {
         if (mounted) {
-          setLoading(false)
+          setLoading(false);
         }
       }
-    }
+    };
 
-    initializeAuth()
+    initializeAuth();
 
     // Subscribe to auth state changes
-    const { data: { subscription } } = supabase.auth.onAuthStateChange(
-      async (event, newSession) => {
-        if (!mounted) return
+    const {
+      data: { subscription },
+    } = supabase.auth.onAuthStateChange(async (event, newSession) => {
+      if (!mounted) return;
 
-        console.debug('[Auth Debug] Auth state change:', {
-          event,
-          hasSession: !!newSession,
-          userId: newSession?.user?.id,
-          email: newSession?.user?.email,
-          timestamp: new Date().toISOString()
-        })
+      console.debug("[Auth Debug] Auth state change:", {
+        event,
+        hasSession: !!newSession,
+        userId: newSession?.user?.id,
+        email: newSession?.user?.email,
+        timestamp: new Date().toISOString(),
+      });
 
-        // Don't run supabase calls inside this callback; schedule them
-        setTimeout(() => {
-          if (mounted) {
-            setSession(newSession)
-            setError(null)
+      // Don't run supabase calls inside this callback; schedule them
+      setTimeout(() => {
+        if (mounted) {
+          setSession(newSession);
+          setError(null);
 
-            // Additional handling for specific events
-            if (event === 'SIGNED_OUT') {
-              console.debug('[Auth Debug] User signed out, clearing session')
-              // Clear credit data, pro status, trial status, profile picture, and metadata on sign out
-              setCreditBalance(null)
-              setCreditSummary(null)
-              setSubscription(null)
-              setIsPro(null)
-              setTrialStatus(null)
-              setProfilePictureUrl(null)
-              setProfilePictureMetadata(null)
-            } else if (event === 'SIGNED_IN') {
-              console.debug('[Auth Debug] User signed in successfully')
-              if (newSession?.user) {
-                setLoading(true)
+          // Additional handling for specific events
+          if (event === "SIGNED_OUT") {
+            console.debug("[Auth Debug] User signed out, clearing session");
+            // Clear credit data, pro status, trial status, profile picture, and metadata on sign out
+            setCreditBalance(null);
+            setCreditSummary(null);
+            setSubscription(null);
+            setIsPro(null);
+            setTrialStatus(null);
+            setProfilePictureUrl(null);
+            setProfilePictureMetadata(null);
+          } else if (event === "SIGNED_IN") {
+            console.debug("[Auth Debug] User signed in successfully");
+            if (newSession?.user) {
+              setLoading(true);
 
-                // Sync OAuth avatar in background (don't block other fetches)
-                syncOAuthAvatar(newSession.user).catch((err) => {
-                  console.debug('[Auth Debug] Failed to sync OAuth avatar:', err)
+              // Sync OAuth avatar in background (don't block other fetches)
+              syncOAuthAvatar(newSession.user).catch((err) => {
+                console.debug("[Auth Debug] Failed to sync OAuth avatar:", err);
+              });
+
+              // Fetch user data in parallel
+              Promise.all([
+                fetchCredits(newSession),
+                fetchProStatus(newSession),
+                fetchTrialStatus(newSession),
+                fetchProfilePictureMetadata(newSession),
+              ]).then(() => {
+                // Fetch profile picture AFTER sync has had time to complete
+                // Use a small delay to allow avatar sync to finish if it's quick
+                setTimeout(() => {
+                  fetchProfilePicture(newSession).finally(() => {
+                    setLoading(false);
+                    console.debug("[Auth Debug] User data fully loaded after sign in");
+                  });
+                }, 500);
+              });
+            }
+          } else if (event === "TOKEN_REFRESHED") {
+            console.debug("[Auth Debug] Token refreshed");
+            // Optionally refresh credits, pro status, trial status, profile picture metadata, and profile picture on token refresh
+            if (newSession?.user) {
+              Promise.all([
+                fetchCredits(newSession),
+                fetchProStatus(newSession),
+                fetchTrialStatus(newSession),
+                fetchProfilePictureMetadata(newSession),
+                fetchProfilePicture(newSession),
+              ]).then(() => {
+                console.debug("[Auth Debug] User data refreshed after token refresh");
+              });
+            }
+          } else if (event === "USER_UPDATED") {
+            console.debug("[Auth Debug] User updated");
+
+            // Check if this is a pending OAuth upgrade completion
+            const pendingUpgrade = sessionStorage.getItem("pendingUpgrade");
+            const upgradeProvider = sessionStorage.getItem("upgradeProvider");
+
+            if (pendingUpgrade && newSession?.user && newSession.user.is_anonymous === false) {
+              console.debug("[Auth Debug] Processing pending OAuth upgrade:", upgradeProvider);
+
+              // Clear the flags first to prevent loops
+              sessionStorage.removeItem("pendingUpgrade");
+              sessionStorage.removeItem("upgradeProvider");
+
+              // Synchronize with backend
+              synchronizeUserUpgrade(upgradeProvider || undefined)
+                .then(() => {
+                  console.debug("[Auth Debug] User upgrade synchronized successfully");
+
+                  // Refresh credits, pro status, trial status, profile picture metadata, and profile picture after upgrade
+                  if (newSession?.user) {
+                    return Promise.all([
+                      fetchCredits(newSession),
+                      fetchProStatus(newSession),
+                      fetchTrialStatus(newSession),
+                      fetchProfilePictureMetadata(newSession),
+                      fetchProfilePicture(newSession),
+                    ]);
+                  }
                 })
-
-                // Fetch user data in parallel
-                Promise.all([
-                  fetchCredits(newSession),
-                  fetchProStatus(newSession),
-                  fetchTrialStatus(newSession),
-                  fetchProfilePictureMetadata(newSession),
-                ]).then(() => {
-                  // Fetch profile picture AFTER sync has had time to complete
-                  // Use a small delay to allow avatar sync to finish if it's quick
-                  setTimeout(() => {
-                    fetchProfilePicture(newSession).finally(() => {
-                      setLoading(false)
-                      console.debug('[Auth Debug] User data fully loaded after sign in')
-                    })
-                  }, 500)
+                .then(() => {
+                  console.debug("[Auth Debug] User data refreshed after upgrade");
                 })
-              }
-            } else if (event === 'TOKEN_REFRESHED') {
-              console.debug('[Auth Debug] Token refreshed')
-              // Optionally refresh credits, pro status, trial status, profile picture metadata, and profile picture on token refresh
-              if (newSession?.user) {
-                Promise.all([
-                  fetchCredits(newSession),
-                  fetchProStatus(newSession),
-                  fetchTrialStatus(newSession),
-                  fetchProfilePictureMetadata(newSession),
-                  fetchProfilePicture(newSession)
-                ]).then(() => {
-                  console.debug('[Auth Debug] User data refreshed after token refresh')
-                })
-              }
-            } else if (event === 'USER_UPDATED') {
-              console.debug('[Auth Debug] User updated')
-
-              // Check if this is a pending OAuth upgrade completion
-              const pendingUpgrade = sessionStorage.getItem('pendingUpgrade')
-              const upgradeProvider = sessionStorage.getItem('upgradeProvider')
-
-              if (pendingUpgrade && newSession?.user && newSession.user.is_anonymous === false) {
-                console.debug('[Auth Debug] Processing pending OAuth upgrade:', upgradeProvider)
-
-                // Clear the flags first to prevent loops
-                sessionStorage.removeItem('pendingUpgrade')
-                sessionStorage.removeItem('upgradeProvider')
-
-                // Synchronize with backend
-                synchronizeUserUpgrade(upgradeProvider || undefined)
-                  .then(() => {
-                    console.debug('[Auth Debug] User upgrade synchronized successfully')
-
-                    // Refresh credits, pro status, trial status, profile picture metadata, and profile picture after upgrade
-                    if (newSession?.user) {
-                      return Promise.all([
-                        fetchCredits(newSession),
-                        fetchProStatus(newSession),
-                        fetchTrialStatus(newSession),
-                        fetchProfilePictureMetadata(newSession),
-                        fetchProfilePicture(newSession)
-                      ])
-                    }
-                  })
-                  .then(() => {
-                    console.debug('[Auth Debug] User data refreshed after upgrade')
-                  })
-                  .catch((err) => {
-                    console.error('[Auth Debug] Failed to synchronize user upgrade:', err)
-                  })
-              }
+                .catch((err) => {
+                  console.error("[Auth Debug] Failed to synchronize user upgrade:", err);
+                });
             }
           }
-        }, 0)
-      }
-    )
+        }
+      }, 0);
+    });
 
     return () => {
-      mounted = false
-      subscription.unsubscribe()
-    }
-  }, [])
+      mounted = false;
+      subscription.unsubscribe();
+    };
+  }, []);
 
   const value: AuthContextType = {
     session,
@@ -543,41 +564,37 @@ export function AuthProvider({ children }: { children: ReactNode }) {
     refreshProStatus,
     refreshTrialStatus,
     refreshProfilePicture,
-    refreshProfilePictureMetadata
-  }
+    refreshProfilePictureMetadata,
+  };
 
-  return (
-    <AuthContext.Provider value={value}>
-      {children}
-    </AuthContext.Provider>
-  )
+  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
 }
 
 export function useAuth() {
-  const context = useContext(AuthContext)
+  const context = useContext(AuthContext);
 
   if (context === undefined) {
-    throw new Error('useAuth must be used within an AuthProvider')
+    throw new Error("useAuth must be used within an AuthProvider");
   }
 
-  return context
+  return context;
 }
 
 // Debug hook to expose auth state for debugging
 export function useAuthDebug() {
-  const auth = useAuth()
+  const auth = useAuth();
 
   useEffect(() => {
-    console.debug('[Auth Debug] Current auth state:', {
+    console.debug("[Auth Debug] Current auth state:", {
       hasSession: !!auth.session,
       hasUser: !!auth.user,
       loading: auth.loading,
       hasError: !!auth.error,
       userId: auth.user?.id,
       email: auth.user?.email,
-      provider: auth.user?.app_metadata?.provider
-    })
-  }, [auth.session, auth.user, auth.loading, auth.error])
+      provider: auth.user?.app_metadata?.provider,
+    });
+  }, [auth.session, auth.user, auth.loading, auth.error]);
 
-  return auth
+  return auth;
 }
diff --git a/frontend/src/saas/auth/supabase.ts b/frontend/src/saas/auth/supabase.ts
index 338c5c8adc..2262899e0a 100644
--- a/frontend/src/saas/auth/supabase.ts
+++ b/frontend/src/saas/auth/supabase.ts
@@ -1,56 +1,52 @@
-import { createClient } from '@supabase/supabase-js'
+import { createClient } from "@supabase/supabase-js";
 
 // Debug helper to log Supabase configuration
 const debugConfig = () => {
-  const url = import.meta.env.VITE_SUPABASE_URL
-  const key = import.meta.env.VITE_SUPABASE_PUBLISHABLE_DEFAULT_KEY
+  const url = import.meta.env.VITE_SUPABASE_URL;
+  const key = import.meta.env.VITE_SUPABASE_PUBLISHABLE_DEFAULT_KEY;
 
-  console.log('[Supabase Debug] Configuration:', {
-    url: url ? '✓ URL configured' : '✗ URL missing',
-    key: key ? '✓ Key configured' : '✗ Key missing',
-    urlValue: url || 'undefined',
-    keyValue: key ? `${key.substring(0, 20)}...` : 'undefined'
-  })
+  console.log("[Supabase Debug] Configuration:", {
+    url: url ? "✓ URL configured" : "✗ URL missing",
+    key: key ? "✓ Key configured" : "✗ Key missing",
+    urlValue: url || "undefined",
+    keyValue: key ? `${key.substring(0, 20)}...` : "undefined",
+  });
 
-  return { url, key }
-}
+  return { url, key };
+};
 
-const config = debugConfig()
+const config = debugConfig();
 
 if (!config.url) {
-  throw new Error('Missing VITE_SUPABASE_URL environment variable')
+  throw new Error("Missing VITE_SUPABASE_URL environment variable");
 }
 
 if (!config.key) {
-  throw new Error('Missing VITE_SUPABASE_PUBLISHABLE_DEFAULT_KEY environment variable')
+  throw new Error("Missing VITE_SUPABASE_PUBLISHABLE_DEFAULT_KEY environment variable");
 }
 
-export const supabase = createClient(
-  config.url,
-  config.key,
-  {
-    auth: {
-      persistSession: true, // keep session in localStorage
-      autoRefreshToken: true,
-      detectSessionInUrl: true, // helpful on first load after redirect
-      // debug: import.meta.env.DEV, // Enable debug logs in development
-    },
-  }
-)
+export const supabase = createClient(config.url, config.key, {
+  auth: {
+    persistSession: true, // keep session in localStorage
+    autoRefreshToken: true,
+    detectSessionInUrl: true, // helpful on first load after redirect
+    // debug: import.meta.env.DEV, // Enable debug logs in development
+  },
+});
 
 // Debug helper for auth events
 export const debugAuthEvents = () => {
   supabase.auth.onAuthStateChange((event, session) => {
-    console.log('[Supabase Debug] Auth state change:', {
+    console.log("[Supabase Debug] Auth state change:", {
       event,
       hasSession: !!session,
       userId: session?.user?.id,
       email: session?.user?.email,
       provider: session?.user?.app_metadata?.provider,
-      timestamp: new Date().toISOString()
-    })
-  })
-}
+      timestamp: new Date().toISOString(),
+    });
+  });
+};
 
 // Debug auth events can be manually enabled by calling debugAuthEvents()
 // Commented out to prevent excessive logging on every page load
@@ -61,105 +57,108 @@ export const debugAuthEvents = () => {
 // Anonymous authentication functions
 export const signInAnonymously = async () => {
   try {
-    const { data, error } = await supabase.auth.signInAnonymously()
+    const { data, error } = await supabase.auth.signInAnonymously();
 
     if (error) {
-      console.error('[Supabase] Anonymous sign-in error:', error)
-      throw error
+      console.error("[Supabase] Anonymous sign-in error:", error);
+      throw error;
     }
 
-    console.log('[Supabase] Anonymous sign-in successful:', {
+    console.log("[Supabase] Anonymous sign-in successful:", {
       userId: data.user?.id,
-      isAnonymous: data.user?.is_anonymous
-    })
+      isAnonymous: data.user?.is_anonymous,
+    });
 
-    return { data, error }
+    return { data, error };
   } catch (error) {
-    console.error('[Supabase] Anonymous sign-in failed:', error)
-    throw error
+    console.error("[Supabase] Anonymous sign-in failed:", error);
+    throw error;
   }
-}
+};
 
 // Account linking functions
 export const linkEmailIdentity = async (email: string, password?: string) => {
   try {
-    const updateData: { email: string; password?: string } = { email }
+    const updateData: { email: string; password?: string } = { email };
     if (password) {
-      updateData.password = password
+      updateData.password = password;
     }
 
-    const { data, error } = await supabase.auth.updateUser(updateData)
+    const { data, error } = await supabase.auth.updateUser(updateData);
 
     if (error) {
-      console.error('[Supabase] Email linking error:', error)
-      throw error
+      console.error("[Supabase] Email linking error:", error);
+      throw error;
     }
 
     // Refresh session to get updated token with new user metadata
-    const { error: refreshError } = await supabase.auth.refreshSession()
+    const { error: refreshError } = await supabase.auth.refreshSession();
 
     if (refreshError) {
-      console.warn('[Supabase] Session refresh after email linking failed:', refreshError)
+      console.warn("[Supabase] Session refresh after email linking failed:", refreshError);
       // Don't throw - linking was successful, refresh is just for consistency
     } else {
-      console.log('[Supabase] Session refreshed after email linking')
+      console.log("[Supabase] Session refreshed after email linking");
     }
 
-    console.log('[Supabase] Email linked successfully:', {
+    console.log("[Supabase] Email linked successfully:", {
       email,
-      userId: data.user?.id
-    })
+      userId: data.user?.id,
+    });
 
-    return { data, error }
+    return { data, error };
   } catch (error) {
-    console.error('[Supabase] Email linking failed:', error)
-    throw error
+    console.error("[Supabase] Email linking failed:", error);
+    throw error;
   }
-}
+};
 
-export const linkOAuthIdentity = async (provider: 'google' | 'github' | 'apple' | 'azure', redirectTo?: string) => {
+export const linkOAuthIdentity = async (provider: "google" | "github" | "apple" | "azure", redirectTo?: string) => {
   try {
     const { data, error } = await supabase.auth.linkIdentity({
       provider: provider,
-      options: redirectTo ? { redirectTo } : undefined
-    })
+      options: redirectTo ? { redirectTo } : undefined,
+    });
 
     if (error) {
-      console.error('[Supabase] OAuth linking error:', error)
-      throw error
+      console.error("[Supabase] OAuth linking error:", error);
+      throw error;
     }
 
-    console.log('[Supabase] OAuth identity linked successfully:', {
+    console.log("[Supabase] OAuth identity linked successfully:", {
       provider,
       redirectTo,
-      url: data.url
-    })
+      url: data.url,
+    });
 
-    return { data, error }
+    return { data, error };
   } catch (error) {
-    console.error('[Supabase] OAuth linking failed:', error)
-    throw error
+    console.error("[Supabase] OAuth linking failed:", error);
+    throw error;
   }
-}
+};
 
 // Helper function to check if user is anonymous
 export const isUserAnonymous = (user: { is_anonymous?: boolean }) => {
-  return user?.is_anonymous === true
-}
+  return user?.is_anonymous === true;
+};
 
 // Get current user session
 export const getCurrentUser = async () => {
   try {
-    const { data: { user }, error } = await supabase.auth.getUser()
+    const {
+      data: { user },
+      error,
+    } = await supabase.auth.getUser();
 
     if (error) {
-      console.error('[Supabase] Get user error:', error)
-      throw error
+      console.error("[Supabase] Get user error:", error);
+      throw error;
     }
 
-    return user
+    return user;
   } catch (error) {
-    console.error('[Supabase] Get user failed:', error)
-    throw error
+    console.error("[Supabase] Get user failed:", error);
+    throw error;
   }
-}
+};
diff --git a/frontend/src/saas/components/OnboardingBootstrap.tsx b/frontend/src/saas/components/OnboardingBootstrap.tsx
index 3533f429c5..67150528a7 100644
--- a/frontend/src/saas/components/OnboardingBootstrap.tsx
+++ b/frontend/src/saas/components/OnboardingBootstrap.tsx
@@ -1,11 +1,11 @@
-import { useEffect, useState } from 'react';
-import { usePreferences } from '@app/contexts/PreferencesContext';
-import { useOnboarding } from '@app/contexts/OnboardingContext';
-import { useAuth } from '@app/auth/UseSession';
-import SaasOnboardingModal from '@app/components/onboarding/SaasOnboardingModal';
+import { useEffect, useState } from "react";
+import { usePreferences } from "@app/contexts/PreferencesContext";
+import { useOnboarding } from "@app/contexts/OnboardingContext";
+import { useAuth } from "@app/auth/UseSession";
+import SaasOnboardingModal from "@app/components/onboarding/SaasOnboardingModal";
 
-const STORAGE_KEY = 'saas_onboarding_seen';
-const ONBOARDING_SESSION_BLOCK_KEY = 'stirling-onboarding-session-active';
+const STORAGE_KEY = "saas_onboarding_seen";
+const ONBOARDING_SESSION_BLOCK_KEY = "stirling-onboarding-session-active";
 
 /**
  * SaaS-only bootstrap to clear deferred tour requests, mark tool panel prompt as completed,
@@ -21,10 +21,10 @@ export default function OnboardingBootstrap() {
 
   // Start polling when user logs in
   useEffect(() => {
-    const hasSeenOnboarding = localStorage.getItem(STORAGE_KEY) === 'true';
+    const hasSeenOnboarding = localStorage.getItem(STORAGE_KEY) === "true";
 
     if (user && !hasSeenOnboarding && !loading && !isPolling && !showModal) {
-      console.debug('[Onboarding] Starting poll for trial data');
+      console.debug("[Onboarding] Starting poll for trial data");
       setIsPolling(true);
       setPollAttempts(0);
     }
@@ -38,7 +38,7 @@ export default function OnboardingBootstrap() {
 
     const timer = setTimeout(async () => {
       const newAttempts = pollAttempts + 1;
-      console.debug('[Onboarding] Polling for trial data, attempt:', newAttempts);
+      console.debug("[Onboarding] Polling for trial data, attempt:", newAttempts);
 
       await refreshTrialStatus();
       setPollAttempts(newAttempts);
@@ -58,12 +58,12 @@ export default function OnboardingBootstrap() {
     const maxAttempts = 10;
 
     if (hasData || pollAttempts >= maxAttempts) {
-      console.debug('[Onboarding] Trial data ready or timeout, showing modal', {
+      console.debug("[Onboarding] Trial data ready or timeout, showing modal", {
         hasData,
         hasProStatus,
         attempts: pollAttempts,
         trialStatus,
-        isPro
+        isPro,
       });
       setIsPolling(false);
       setShowModal(true);
@@ -71,7 +71,7 @@ export default function OnboardingBootstrap() {
   }, [isPolling, trialStatus, isPro, pollAttempts]);
 
   const handleClose = () => {
-    localStorage.setItem(STORAGE_KEY, 'true');
+    localStorage.setItem(STORAGE_KEY, "true");
     setShowModal(false);
   };
 
@@ -79,8 +79,8 @@ export default function OnboardingBootstrap() {
   useEffect(() => {
     // Ensure tool panel preference is set so tours are never deferred.
     if (!preferences.toolPanelModePromptSeen || !preferences.hasSelectedToolPanelMode) {
-      updatePreference('toolPanelModePromptSeen', true);
-      updatePreference('hasSelectedToolPanelMode', true);
+      updatePreference("toolPanelModePromptSeen", true);
+      updatePreference("hasSelectedToolPanelMode", true);
     }
 
     // Clear any lingering deferred tour requests.
@@ -89,15 +89,15 @@ export default function OnboardingBootstrap() {
 
     // In SaaS, skip the core intro onboarding entirely.
     if (!preferences.hasSeenIntroOnboarding) {
-      updatePreference('hasSeenIntroOnboarding', true);
+      updatePreference("hasSeenIntroOnboarding", true);
     }
     // Also mark completed to avoid follow-up banners/modals.
     if (!preferences.hasCompletedOnboarding) {
-      updatePreference('hasCompletedOnboarding', true);
+      updatePreference("hasCompletedOnboarding", true);
     }
 
     // Also clear any session flag that might mark onboarding as active.
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       window.sessionStorage.removeItem(ONBOARDING_SESSION_BLOCK_KEY);
     }
   }, [
diff --git a/frontend/src/saas/components/TrialExpiredBootstrap.tsx b/frontend/src/saas/components/TrialExpiredBootstrap.tsx
index 8ccd575852..e8b7523398 100644
--- a/frontend/src/saas/components/TrialExpiredBootstrap.tsx
+++ b/frontend/src/saas/components/TrialExpiredBootstrap.tsx
@@ -1,7 +1,7 @@
-import { useEffect, useState } from 'react';
-import { useAuth } from '@app/auth/UseSession';
-import { TrialExpiredModal } from '@app/components/shared/TrialExpiredModal';
-import StripeCheckout from '@app/components/shared/StripeCheckoutSaas';
+import { useEffect, useState } from "react";
+import { useAuth } from "@app/auth/UseSession";
+import { TrialExpiredModal } from "@app/components/shared/TrialExpiredModal";
+import StripeCheckout from "@app/components/shared/StripeCheckoutSaas";
 
 /**
  * Bootstrap component that shows the trial expired modal when a user's trial has ended
@@ -16,7 +16,7 @@ export default function TrialExpiredBootstrap() {
     // Close modal if user logs out or session expires
     if (!user) {
       if (showModal) {
-        console.debug('[TrialExpired] User logged out, closing modal');
+        console.debug("[TrialExpired] User logged out, closing modal");
         setShowModal(false);
       }
       if (checkoutOpened) {
@@ -32,30 +32,28 @@ export default function TrialExpiredBootstrap() {
 
     // Build localStorage key unique to this user
     const storageKey = `trialExpiredModalShown_${user.id}`;
-    const hasSeenModal = localStorage.getItem(storageKey) === 'true';
+    const hasSeenModal = localStorage.getItem(storageKey) === "true";
 
     // If user is currently trialing, clear any previous "seen" flag
     // This handles the edge case where a user might re-enter a trial
     if (trialStatus.isTrialing) {
       if (hasSeenModal) {
-        console.debug('[TrialExpired] User is trialing, clearing seen flag');
+        console.debug("[TrialExpired] User is trialing, clearing seen flag");
         localStorage.removeItem(storageKey);
       }
       return;
     }
 
     // Check if all conditions are met to show the modal
-    const isExpired =
-      trialStatus.status === 'incomplete_expired' || trialStatus.status === 'canceled';
+    const isExpired = trialStatus.status === "incomplete_expired" || trialStatus.status === "canceled";
     const hasNoPayment = !trialStatus.hasPaymentMethod && !trialStatus.hasScheduledSub;
     const wasDowngraded = !isPro;
     const trialEndedRecently = trialStatus.daysRemaining === 0;
 
-    const shouldShowModal =
-      isExpired && hasNoPayment && wasDowngraded && trialEndedRecently && !hasSeenModal;
+    const shouldShowModal = isExpired && hasNoPayment && wasDowngraded && trialEndedRecently && !hasSeenModal;
 
     if (shouldShowModal) {
-      console.debug('[TrialExpired] Showing trial expired modal', {
+      console.debug("[TrialExpired] Showing trial expired modal", {
         status: trialStatus.status,
         daysRemaining: trialStatus.daysRemaining,
         hasPaymentMethod: trialStatus.hasPaymentMethod,
@@ -69,36 +67,32 @@ export default function TrialExpiredBootstrap() {
   const handleClose = () => {
     if (user) {
       const storageKey = `trialExpiredModalShown_${user.id}`;
-      localStorage.setItem(storageKey, 'true');
-      console.debug('[TrialExpired] Modal dismissed, marking as seen');
+      localStorage.setItem(storageKey, "true");
+      console.debug("[TrialExpired] Modal dismissed, marking as seen");
     }
     setShowModal(false);
   };
 
   const handleSubscribe = () => {
-    console.debug('[TrialExpired] User clicked Subscribe to Pro');
+    console.debug("[TrialExpired] User clicked Subscribe to Pro");
     setCheckoutOpened(true);
   };
 
   const handleCheckoutSuccess = () => {
-    console.debug('[TrialExpired] Subscription successful, refreshing page');
+    console.debug("[TrialExpired] Subscription successful, refreshing page");
     // Close modal and refresh to update subscription status
     handleClose();
     window.location.reload();
   };
 
   const handleCheckoutClose = () => {
-    console.debug('[TrialExpired] Checkout closed');
+    console.debug("[TrialExpired] Checkout closed");
     setCheckoutOpened(false);
   };
 
   return (
     <>
-      <TrialExpiredModal
-        opened={showModal && !checkoutOpened}
-        onClose={handleClose}
-        onSubscribe={handleSubscribe}
-      />
+      <TrialExpiredModal opened={showModal && !checkoutOpened} onClose={handleClose} onSubscribe={handleSubscribe} />
 
       {user && (
         <StripeCheckout
@@ -109,7 +103,7 @@ export default function TrialExpiredBootstrap() {
           creditsPack={null}
           planName="Pro"
           onSuccess={handleCheckoutSuccess}
-          onError={(error) => console.error('[TrialExpired] Checkout error:', error)}
+          onError={(error) => console.error("[TrialExpired] Checkout error:", error)}
           isTrialConversion={false} // Trial already ended, so this is not a conversion
         />
       )}
diff --git a/frontend/src/saas/components/auth/GuestUserBanner.css b/frontend/src/saas/components/auth/GuestUserBanner.css
index d1d6937024..d714bd858f 100644
--- a/frontend/src/saas/components/auth/GuestUserBanner.css
+++ b/frontend/src/saas/components/auth/GuestUserBanner.css
@@ -4,9 +4,9 @@
   right: 4.5rem;
   z-index: 1000;
   background: var(--modal-content-bg, #111418);
-  border: 1px solid var(--api-keys-card-border, rgba(255,255,255,0.08));
+  border: 1px solid var(--api-keys-card-border, rgba(255, 255, 255, 0.08));
   border-radius: 12px;
-  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
+  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
   padding: 12px 16px;
   max-width: 30rem;
   width: 30rem;
@@ -57,7 +57,7 @@
 }
 
 .guest-banner-dismiss:hover {
-  background: var(--mantine-color-gray-1, rgba(255,255,255,0.05));
+  background: var(--mantine-color-gray-1, rgba(255, 255, 255, 0.05));
 }
 
 .guest-banner-signup {
diff --git a/frontend/src/saas/components/auth/GuestUserBanner.tsx b/frontend/src/saas/components/auth/GuestUserBanner.tsx
index 8c5f786aa0..1f9608bef7 100644
--- a/frontend/src/saas/components/auth/GuestUserBanner.tsx
+++ b/frontend/src/saas/components/auth/GuestUserBanner.tsx
@@ -1,88 +1,82 @@
-import React, { useEffect, useState } from 'react'
-import { useTranslation } from 'react-i18next'
-import CloseIcon from '@mui/icons-material/Close'
-import PersonAddIcon from '@mui/icons-material/PersonAdd'
-import { useAuth } from '@app/auth/UseSession'
-import { isUserAnonymous } from '@app/auth/supabase'
-import { withBasePath } from '@app/constants/app'
-import '@app/components/auth/GuestUserBanner.css'
+import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
+import CloseIcon from "@mui/icons-material/Close";
+import PersonAddIcon from "@mui/icons-material/PersonAdd";
+import { useAuth } from "@app/auth/UseSession";
+import { isUserAnonymous } from "@app/auth/supabase";
+import { withBasePath } from "@app/constants/app";
+import "@app/components/auth/GuestUserBanner.css";
 
 interface GuestUserBannerProps {
-  className?: string
+  className?: string;
 }
 
 // Ensure the toast only appears once per full page load, not on re-hydration
-let hasShownThisLoad = false
+let hasShownThisLoad = false;
 
 /**
  * Guest user toast encouraging account creation.
  * Appears 2s after load, top-right of the viewport, offset by right rail.
  */
-export function GuestUserBanner({ className = '' }: GuestUserBannerProps) {
-  const { t } = useTranslation()
-  const { session } = useAuth()
-  const [isDismissed, setIsDismissed] = useState(false)
-  const [visible, setVisible] = useState(false)
+export function GuestUserBanner({ className = "" }: GuestUserBannerProps) {
+  const { t } = useTranslation();
+  const { session } = useAuth();
+  const [isDismissed, setIsDismissed] = useState(false);
+  const [visible, setVisible] = useState(false);
 
-  const isAnon = Boolean(session?.user && isUserAnonymous(session.user))
+  const isAnon = Boolean(session?.user && isUserAnonymous(session.user));
 
   useEffect(() => {
-    if (!isAnon || hasShownThisLoad) return
+    if (!isAnon || hasShownThisLoad) return;
 
     const timer = setTimeout(() => {
-      setVisible(true)
-      hasShownThisLoad = true
-    }, 2000)
+      setVisible(true);
+      hasShownThisLoad = true;
+    }, 2000);
 
-    return () => clearTimeout(timer)
-  }, [isAnon])
+    return () => clearTimeout(timer);
+  }, [isAnon]);
 
   if (!isAnon || isDismissed || !visible) {
-    return null
+    return null;
   }
 
   const handleSignUp = () => {
-    window.location.href = withBasePath('/signup')
-  }
+    window.location.href = withBasePath("/signup");
+  };
 
   const handleDismiss = () => {
-    setIsDismissed(true)
-  }
+    setIsDismissed(true);
+  };
 
   return (
-    <div
-      className={`guest-banner ${className || ''}`}
-      role="status"
-      aria-live="polite"
-    >
+    <div className={`guest-banner ${className || ""}`} role="status" aria-live="polite">
       <div className="guest-banner-content">
         <div className="guest-banner-text">
-          <div className="guest-banner-title">
-            {t('guestBanner.title', "You're using Stirling PDF as a guest!")}
-          </div>
+          <div className="guest-banner-title">{t("guestBanner.title", "You're using Stirling PDF as a guest!")}</div>
           <div className="guest-banner-message">
-            {t('guestBanner.message', 'Create a free account to save your work, access more features, and support the project.')}
+            {t(
+              "guestBanner.message",
+              "Create a free account to save your work, access more features, and support the project.",
+            )}
           </div>
         </div>
         <div className="guest-banner-actions">
           <button
             onClick={handleDismiss}
-            aria-label={t('guestBanner.dismiss', 'Dismiss banner')}
+            aria-label={t("guestBanner.dismiss", "Dismiss banner")}
             className="guest-banner-dismiss"
           >
             <CloseIcon className="guest-banner-icon" />
           </button>
-          <button
-            onClick={handleSignUp}
-            className="guest-banner-signup"
-          >
+          <button onClick={handleSignUp} className="guest-banner-signup">
             <PersonAddIcon className="guest-banner-signup-icon" />
-            {t('guestBanner.signUp', 'Sign Up Free')}
+            {t("guestBanner.signUp", "Sign Up Free")}
           </button>
         </div>
       </div>
     </div>
-  )
+  );
 }
 
-export default GuestUserBanner
\ No newline at end of file
+export default GuestUserBanner;
diff --git a/frontend/src/saas/components/auth/RequireAuth.tsx b/frontend/src/saas/components/auth/RequireAuth.tsx
index fb6b550ba2..ec8c60800e 100644
--- a/frontend/src/saas/components/auth/RequireAuth.tsx
+++ b/frontend/src/saas/components/auth/RequireAuth.tsx
@@ -1,23 +1,23 @@
-import { Navigate, Outlet, useLocation } from 'react-router-dom'
-import { useAuth } from '@app/auth/UseSession'
-import { useAutoAnonymousAuth } from '@app/hooks/useAutoAnonymousAuth'
+import { Navigate, Outlet, useLocation } from "react-router-dom";
+import { useAuth } from "@app/auth/UseSession";
+import { useAutoAnonymousAuth } from "@app/hooks/useAutoAnonymousAuth";
 
 interface RequireAuthProps {
-  fallbackPath?: string
+  fallbackPath?: string;
 }
 
-export function RequireAuth({ fallbackPath = '/login' }: RequireAuthProps) {
-  const { session, loading } = useAuth()
-  const location = useLocation()
-  const { isAutoAuthenticating } = useAutoAnonymousAuth()
+export function RequireAuth({ fallbackPath = "/login" }: RequireAuthProps) {
+  const { session, loading } = useAuth();
+  const location = useLocation();
+  const { isAutoAuthenticating } = useAutoAnonymousAuth();
 
   // Safe development-only auth bypass
-  const isLocalhost = typeof window !== 'undefined' && /^(localhost|127\.0\.0\.1)$/i.test(window.location.hostname)
-  const devBypassEnabled = Boolean(import.meta.env.DEV && isLocalhost && import.meta.env.VITE_DEV_BYPASS_AUTH === 'true')
+  const isLocalhost = typeof window !== "undefined" && /^(localhost|127\.0\.0\.1)$/i.test(window.location.hostname);
+  const devBypassEnabled = Boolean(import.meta.env.DEV && isLocalhost && import.meta.env.VITE_DEV_BYPASS_AUTH === "true");
 
   if (devBypassEnabled) {
-    console.warn('[RequireAuth] DEV BYPASS ACTIVE — allowing access without session on localhost')
-    return <Outlet />
+    console.warn("[RequireAuth] DEV BYPASS ACTIVE — allowing access without session on localhost");
+    return <Outlet />;
   }
 
   // Wait for both auth bootstrap and auto-anon to finish
@@ -29,16 +29,16 @@ export function RequireAuth({ fallbackPath = '/login' }: RequireAuthProps) {
           <p className="text-gray-600">Preparing your session…</p>
         </div>
       </div>
-    )
+    );
   }
 
   if (!session) {
     // Change the URL to /login
-    return <Navigate to={fallbackPath} replace state={{ from: location }} />
+    return <Navigate to={fallbackPath} replace state={{ from: location }} />;
   }
 
   // Render protected routes
-  return <Outlet />
+  return <Outlet />;
 }
 
-export default RequireAuth
+export default RequireAuth;
diff --git a/frontend/src/saas/components/feedback/UserbackWidget.tsx b/frontend/src/saas/components/feedback/UserbackWidget.tsx
index e664cce535..031b54a030 100644
--- a/frontend/src/saas/components/feedback/UserbackWidget.tsx
+++ b/frontend/src/saas/components/feedback/UserbackWidget.tsx
@@ -1,6 +1,6 @@
-import { useEffect, useRef } from 'react';
-import Userback from '@userback/widget';
-import { useAuth } from '@app/auth/UseSession';
+import { useEffect, useRef } from "react";
+import Userback from "@userback/widget";
+import { useAuth } from "@app/auth/UseSession";
 
 interface UserbackWidgetProps {
   token: string;
@@ -30,14 +30,13 @@ export default function UserbackWidget({ token }: UserbackWidgetProps) {
         const options = {
           user_data: {
             id: user.id,
-            info: userInfo
-          }
+            info: userInfo,
+          },
         };
 
         // Initialize Userback
         userbackRef.current = await Userback(token, options);
-      }
-     finally {
+      } finally {
         initializingRef.current = false;
       }
     };
@@ -46,7 +45,7 @@ export default function UserbackWidget({ token }: UserbackWidgetProps) {
 
     // Cleanup function
     return () => {
-      if (userbackRef.current && typeof userbackRef.current.destroy === 'function') {
+      if (userbackRef.current && typeof userbackRef.current.destroy === "function") {
         userbackRef.current.destroy();
       }
       initializingRef.current = false;
diff --git a/frontend/src/saas/components/home/HomePageExtensions.tsx b/frontend/src/saas/components/home/HomePageExtensions.tsx
index 3557c976c1..2a8375af55 100644
--- a/frontend/src/saas/components/home/HomePageExtensions.tsx
+++ b/frontend/src/saas/components/home/HomePageExtensions.tsx
@@ -1,4 +1,4 @@
-import UserbackWidget from '@app/components/feedback/UserbackWidget';
+import UserbackWidget from "@app/components/feedback/UserbackWidget";
 
 export function HomePageExtensions() {
   const userbackToken = import.meta.env.VITE_USERBACK_TOKEN;
diff --git a/frontend/src/saas/components/onboarding/SaasOnboardingModal.tsx b/frontend/src/saas/components/onboarding/SaasOnboardingModal.tsx
index b2f7c2711e..1a1f9fe6e1 100644
--- a/frontend/src/saas/components/onboarding/SaasOnboardingModal.tsx
+++ b/frontend/src/saas/components/onboarding/SaasOnboardingModal.tsx
@@ -1,15 +1,15 @@
-import React from 'react';
-import { Modal, Stack } from '@mantine/core';
-import DiamondOutlinedIcon from '@mui/icons-material/DiamondOutlined';
-import { useTranslation } from 'react-i18next';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import AnimatedSlideBackground from '@app/components/onboarding/slides/AnimatedSlideBackground';
-import OnboardingStepper from '@app/components/onboarding/OnboardingStepper';
-import { renderButtons } from '@app/components/onboarding/renderButtons';
-import styles from '@app/components/onboarding/InitialOnboardingModal/InitialOnboardingModal.module.css';
-import { useSaasOnboardingState } from '@app/components/onboarding/useSaasOnboardingState';
-import { BASE_PATH } from '@app/constants/app';
-import { Z_INDEX_OVER_FULLSCREEN_SURFACE } from '@app/styles/zIndex';
+import React from "react";
+import { Modal, Stack } from "@mantine/core";
+import DiamondOutlinedIcon from "@mui/icons-material/DiamondOutlined";
+import { useTranslation } from "react-i18next";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import AnimatedSlideBackground from "@app/components/onboarding/slides/AnimatedSlideBackground";
+import OnboardingStepper from "@app/components/onboarding/OnboardingStepper";
+import { renderButtons } from "@app/components/onboarding/renderButtons";
+import styles from "@app/components/onboarding/InitialOnboardingModal/InitialOnboardingModal.module.css";
+import { useSaasOnboardingState } from "@app/components/onboarding/useSaasOnboardingState";
+import { BASE_PATH } from "@app/constants/app";
+import { Z_INDEX_OVER_FULLSCREEN_SURFACE } from "@app/styles/zIndex";
 
 interface SaasOnboardingModalProps {
   opened: boolean;
@@ -24,17 +24,10 @@ export default function SaasOnboardingModal(props: SaasOnboardingModalProps) {
     return null;
   }
 
-  const {
-    currentStep,
-    totalSteps,
-    currentSlide,
-    slideDefinition,
-    flowState,
-    handleButtonAction,
-  } = flow;
+  const { currentStep, totalSteps, currentSlide, slideDefinition, flowState, handleButtonAction } = flow;
 
   const renderHero = () => {
-    if (slideDefinition.hero.type === 'dual-icon') {
+    if (slideDefinition.hero.type === "dual-icon") {
       return (
         <div className={styles.heroIconsContainer}>
           <div className={styles.iconWrapper}>
@@ -46,10 +39,10 @@ export default function SaasOnboardingModal(props: SaasOnboardingModalProps) {
 
     return (
       <div className={styles.heroLogoCircle}>
-        {slideDefinition.hero.type === 'rocket' && (
+        {slideDefinition.hero.type === "rocket" && (
           <LocalIcon icon="rocket-launch" width={64} height={64} className={styles.heroIcon} />
         )}
-        {slideDefinition.hero.type === 'diamond' && <DiamondOutlinedIcon sx={{ fontSize: 64, color: '#000000' }} />}
+        {slideDefinition.hero.type === "diamond" && <DiamondOutlinedIcon sx={{ fontSize: 64, color: "#000000" }} />}
       </div>
     );
   };
@@ -66,17 +59,21 @@ export default function SaasOnboardingModal(props: SaasOnboardingModalProps) {
       zIndex={Z_INDEX_OVER_FULLSCREEN_SURFACE}
       styles={{
         body: { padding: 0 },
-        content: { 
-          overflow: 'hidden', 
-          border: 'none', 
-          background: 'var(--bg-surface)',
-          maxHeight: '90vh',
-          display: 'flex',
-          flexDirection: 'column',
+        content: {
+          overflow: "hidden",
+          border: "none",
+          background: "var(--bg-surface)",
+          maxHeight: "90vh",
+          display: "flex",
+          flexDirection: "column",
         },
       }}
     >
-      <Stack gap={0} className={styles.modalContent} style={{ height: '100%', maxHeight: '90vh', display: 'flex', flexDirection: 'column' }}>
+      <Stack
+        gap={0}
+        className={styles.modalContent}
+        style={{ height: "100%", maxHeight: "90vh", display: "flex", flexDirection: "column" }}
+      >
         <div className={styles.heroWrapper} style={{ flexShrink: 0 }}>
           <AnimatedSlideBackground
             gradientStops={currentSlide.background.gradientStops}
@@ -89,20 +86,17 @@ export default function SaasOnboardingModal(props: SaasOnboardingModalProps) {
           </div>
         </div>
 
-        <div 
+        <div
           className={styles.modalBody}
-          style={{ 
+          style={{
             flex: 1,
-            overflowY: 'auto',
-            overflowX: 'hidden',
-            WebkitOverflowScrolling: 'touch',
+            overflowY: "auto",
+            overflowX: "hidden",
+            WebkitOverflowScrolling: "touch",
           }}
         >
           <Stack gap={16}>
-            <div
-              key={`title-${currentSlide.key}`}
-              className={`${styles.title} ${styles.titleText}`}
-            >
+            <div key={`title-${currentSlide.key}`} className={`${styles.title} ${styles.titleText}`}>
               {currentSlide.title}
             </div>
 
diff --git a/frontend/src/saas/components/onboarding/renderButtons.tsx b/frontend/src/saas/components/onboarding/renderButtons.tsx
index f1f8c7dfcd..ee6f1246e4 100644
--- a/frontend/src/saas/components/onboarding/renderButtons.tsx
+++ b/frontend/src/saas/components/onboarding/renderButtons.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import { Button, Group, ActionIcon } from '@mantine/core';
-import ChevronLeftIcon from '@mui/icons-material/ChevronLeft';
-import { TFunction } from 'i18next';
-import { ButtonDefinition, type FlowState, type ButtonAction } from '@app/components/onboarding/saasOnboardingFlowConfig';
+import React from "react";
+import { Button, Group, ActionIcon } from "@mantine/core";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import { TFunction } from "i18next";
+import { ButtonDefinition, type FlowState, type ButtonAction } from "@app/components/onboarding/saasOnboardingFlowConfig";
 
 interface RenderButtonsProps {
   slideDefinition: {
@@ -15,39 +15,39 @@ interface RenderButtonsProps {
 }
 
 export function renderButtons({ slideDefinition, flowState, onAction, t }: RenderButtonsProps) {
-  const leftButtons = slideDefinition.buttons.filter((btn) => btn.group === 'left');
-  const rightButtons = slideDefinition.buttons.filter((btn) => btn.group === 'right');
+  const leftButtons = slideDefinition.buttons.filter((btn) => btn.group === "left");
+  const rightButtons = slideDefinition.buttons.filter((btn) => btn.group === "right");
 
-  const buttonStyles = (variant: ButtonDefinition['variant']) =>
-    variant === 'primary'
+  const buttonStyles = (variant: ButtonDefinition["variant"]) =>
+    variant === "primary"
       ? {
           root: {
-            background: 'var(--onboarding-primary-button-bg)',
-            color: 'var(--onboarding-primary-button-text)',
+            background: "var(--onboarding-primary-button-bg)",
+            color: "var(--onboarding-primary-button-text)",
           },
         }
       : {
           root: {
-            background: 'var(--onboarding-secondary-button-bg)',
-            border: '1px solid var(--onboarding-secondary-button-border)',
-            color: 'var(--onboarding-secondary-button-text)',
+            background: "var(--onboarding-secondary-button-bg)",
+            border: "1px solid var(--onboarding-secondary-button-border)",
+            color: "var(--onboarding-secondary-button-text)",
           },
         };
 
   const resolveButtonLabel = (button: ButtonDefinition) => {
     // Translate the label (it's a translation key)
-    const label = button.label ?? '';
-    if (!label) return '';
+    const label = button.label ?? "";
+    if (!label) return "";
 
     // Extract fallback text from translation key (e.g., 'onboarding.buttons.next' -> 'Next')
-    const fallback = label.split('.').pop() || label;
+    const fallback = label.split(".").pop() || label;
     return t(label, fallback);
   };
 
   const renderButton = (button: ButtonDefinition) => {
     const disabled = button.disabledWhen?.(flowState) ?? false;
 
-    if (button.type === 'icon') {
+    if (button.type === "icon") {
       return (
         <ActionIcon
           key={button.key}
@@ -57,18 +57,18 @@ export function renderButtons({ slideDefinition, flowState, onAction, t }: Rende
           disabled={disabled}
           styles={{
             root: {
-              background: 'var(--onboarding-secondary-button-bg)',
-              border: '1px solid var(--onboarding-secondary-button-border)',
-              color: 'var(--onboarding-secondary-button-text)',
+              background: "var(--onboarding-secondary-button-bg)",
+              border: "1px solid var(--onboarding-secondary-button-border)",
+              color: "var(--onboarding-secondary-button-text)",
             },
           }}
         >
-          {button.icon === 'chevron-left' && <ChevronLeftIcon fontSize="small" />}
+          {button.icon === "chevron-left" && <ChevronLeftIcon fontSize="small" />}
         </ActionIcon>
       );
     }
 
-    const variant = button.variant ?? 'secondary';
+    const variant = button.variant ?? "secondary";
     const label = resolveButtonLabel(button);
 
     return (
diff --git a/frontend/src/saas/components/onboarding/saasFlowResolver.ts b/frontend/src/saas/components/onboarding/saasFlowResolver.ts
index 87348f9389..836f8f9441 100644
--- a/frontend/src/saas/components/onboarding/saasFlowResolver.ts
+++ b/frontend/src/saas/components/onboarding/saasFlowResolver.ts
@@ -1,8 +1,8 @@
-import { TrialStatus } from '@app/auth/UseSession';
-import { FLOW_SEQUENCES, SlideId } from '@app/components/onboarding/saasOnboardingFlowConfig';
+import { TrialStatus } from "@app/auth/UseSession";
+import { FLOW_SEQUENCES, SlideId } from "@app/components/onboarding/saasOnboardingFlowConfig";
 
 export interface FlowConfig {
-  type: 'saas-trial' | 'saas-paid';
+  type: "saas-trial" | "saas-paid";
   ids: SlideId[];
 }
 
@@ -13,28 +13,23 @@ export interface FlowConfig {
  * @param _isPro - Whether user has Pro subscription
  * @returns FlowConfig with the appropriate slide sequence
  */
-export function resolveSaasFlow(
-  trialStatus: TrialStatus | null,
-  _isPro: boolean | null
-): FlowConfig {
+export function resolveSaasFlow(trialStatus: TrialStatus | null, _isPro: boolean | null): FlowConfig {
   // Show free trial card if:
   // 1. User has active trial (isTrialing = true)
   // 2. Trial has not expired (daysRemaining > 0)
   // 3. User is not paid Pro (or Pro is from trial)
-  const hasActiveTrial =
-    trialStatus?.isTrialing === true &&
-    trialStatus.daysRemaining > 0;
+  const hasActiveTrial = trialStatus?.isTrialing === true && trialStatus.daysRemaining > 0;
 
   if (hasActiveTrial) {
     return {
-      type: 'saas-trial',
+      type: "saas-trial",
       ids: FLOW_SEQUENCES.saasTrialUser,
     };
   }
 
   // For paid users, expired trials, or no trial info
   return {
-    type: 'saas-paid',
+    type: "saas-paid",
     ids: FLOW_SEQUENCES.saasPaidUser,
   };
 }
diff --git a/frontend/src/saas/components/onboarding/saasOnboardingFlowConfig.ts b/frontend/src/saas/components/onboarding/saasOnboardingFlowConfig.ts
index 6987cad279..342e1fe87f 100644
--- a/frontend/src/saas/components/onboarding/saasOnboardingFlowConfig.ts
+++ b/frontend/src/saas/components/onboarding/saasOnboardingFlowConfig.ts
@@ -1,18 +1,14 @@
-import WelcomeSlide from '@app/components/onboarding/slides/WelcomeSlide';
-import DesktopInstallSlide from '@app/components/onboarding/slides/DesktopInstallSlide';
-import FreeTrialSlide from '@app/components/onboarding/slides/FreeTrialSlide';
-import { SlideConfig } from '@app/types/types';
-import { TrialStatus } from '@app/auth/UseSession';
+import WelcomeSlide from "@app/components/onboarding/slides/WelcomeSlide";
+import DesktopInstallSlide from "@app/components/onboarding/slides/DesktopInstallSlide";
+import FreeTrialSlide from "@app/components/onboarding/slides/FreeTrialSlide";
+import { SlideConfig } from "@app/types/types";
+import { TrialStatus } from "@app/auth/UseSession";
 
-export type SlideId = 'welcome' | 'free-trial' | 'desktop-install';
+export type SlideId = "welcome" | "free-trial" | "desktop-install";
 
-export type HeroType = 'rocket' | 'dual-icon' | 'diamond';
+export type HeroType = "rocket" | "dual-icon" | "diamond";
 
-export type ButtonAction =
-  | 'next'
-  | 'prev'
-  | 'close'
-  | 'download-selected';
+export type ButtonAction = "next" | "prev" | "close" | "download-selected";
 
 export type FlowState = Record<string, never>;
 
@@ -36,11 +32,11 @@ export interface HeroDefinition {
 
 export interface ButtonDefinition {
   key: string;
-  type: 'button' | 'icon';
+  type: "button" | "icon";
   label?: string;
-  icon?: 'chevron-left';
-  variant?: 'primary' | 'secondary' | 'default';
-  group: 'left' | 'right';
+  icon?: "chevron-left";
+  variant?: "primary" | "secondary" | "default";
+  group: "left" | "right";
   action: ButtonAction;
   disabledWhen?: (state: FlowState) => boolean;
 }
@@ -53,82 +49,82 @@ export interface SlideDefinition {
 }
 
 export const SLIDE_DEFINITIONS: Record<SlideId, SlideDefinition> = {
-  'welcome': {
-    id: 'welcome',
+  welcome: {
+    id: "welcome",
     createSlide: () => WelcomeSlide(),
-    hero: { type: 'rocket' },
+    hero: { type: "rocket" },
     buttons: [
       {
-        key: 'welcome-next',
-        type: 'button',
-        label: 'onboarding.buttons.next',
-        variant: 'primary',
-        group: 'right',
-        action: 'next',
+        key: "welcome-next",
+        type: "button",
+        label: "onboarding.buttons.next",
+        variant: "primary",
+        group: "right",
+        action: "next",
       },
     ],
   },
-  'free-trial': {
-    id: 'free-trial',
+  "free-trial": {
+    id: "free-trial",
     createSlide: ({ trialStatus }) => {
       if (!trialStatus) {
-        throw new Error('Trial status is required for free-trial slide');
+        throw new Error("Trial status is required for free-trial slide");
       }
       return FreeTrialSlide({ trialStatus });
     },
-    hero: { type: 'diamond' },
+    hero: { type: "diamond" },
     buttons: [
       {
-        key: 'trial-back',
-        type: 'icon',
-        icon: 'chevron-left',
-        group: 'left',
-        action: 'prev',
+        key: "trial-back",
+        type: "icon",
+        icon: "chevron-left",
+        group: "left",
+        action: "prev",
       },
       {
-        key: 'trial-next',
-        type: 'button',
-        label: 'onboarding.buttons.next',
-        variant: 'primary',
-        group: 'right',
-        action: 'next',
+        key: "trial-next",
+        type: "button",
+        label: "onboarding.buttons.next",
+        variant: "primary",
+        group: "right",
+        action: "next",
       },
     ],
   },
-  'desktop-install': {
-    id: 'desktop-install',
+  "desktop-install": {
+    id: "desktop-install",
     createSlide: ({ osLabel, osUrl, osOptions, onDownloadUrlChange }) =>
       DesktopInstallSlide({ osLabel, osUrl, osOptions, onDownloadUrlChange }),
-    hero: { type: 'dual-icon' },
+    hero: { type: "dual-icon" },
     buttons: [
       {
-        key: 'desktop-back',
-        type: 'icon',
-        icon: 'chevron-left',
-        group: 'left',
-        action: 'prev',
+        key: "desktop-back",
+        type: "icon",
+        icon: "chevron-left",
+        group: "left",
+        action: "prev",
       },
       {
-        key: 'desktop-skip',
-        type: 'button',
-        label: 'onboarding.buttons.skipForNow',
-        variant: 'secondary',
-        group: 'left',
-        action: 'close',
+        key: "desktop-skip",
+        type: "button",
+        label: "onboarding.buttons.skipForNow",
+        variant: "secondary",
+        group: "left",
+        action: "close",
       },
       {
-        key: 'desktop-download',
-        type: 'button',
-        label: 'onboarding.buttons.download',
-        variant: 'primary',
-        group: 'right',
-        action: 'download-selected',
+        key: "desktop-download",
+        type: "button",
+        label: "onboarding.buttons.download",
+        variant: "primary",
+        group: "right",
+        action: "download-selected",
       },
     ],
   },
 };
 
 export const FLOW_SEQUENCES = {
-  saasTrialUser: ['welcome', 'free-trial', 'desktop-install'] as SlideId[],
-  saasPaidUser: ['welcome', 'desktop-install'] as SlideId[],
+  saasTrialUser: ["welcome", "free-trial", "desktop-install"] as SlideId[],
+  saasPaidUser: ["welcome", "desktop-install"] as SlideId[],
 };
diff --git a/frontend/src/saas/components/onboarding/slides/FreeTrialSlide.tsx b/frontend/src/saas/components/onboarding/slides/FreeTrialSlide.tsx
index 6594e0a29b..325e6818a4 100644
--- a/frontend/src/saas/components/onboarding/slides/FreeTrialSlide.tsx
+++ b/frontend/src/saas/components/onboarding/slides/FreeTrialSlide.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import { SlideConfig } from '@app/types/types';
-import { UNIFIED_CIRCLE_CONFIG } from '@app/components/onboarding/slides/unifiedBackgroundConfig';
-import { TrialStatus } from '@app/auth/UseSession';
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { SlideConfig } from "@app/types/types";
+import { UNIFIED_CIRCLE_CONFIG } from "@app/components/onboarding/slides/unifiedBackgroundConfig";
+import { TrialStatus } from "@app/auth/UseSession";
 
 interface FreeTrialSlideProps {
   trialStatus: TrialStatus;
@@ -11,11 +11,7 @@ interface FreeTrialSlideProps {
 function FreeTrialSlideTitle() {
   const { t } = useTranslation();
 
-  return (
-    <span>
-      {t('onboarding.freeTrial.title', 'Your 30-Day Pro Trial')}
-    </span>
-  );
+  return <span>{t("onboarding.freeTrial.title", "Your 30-Day Pro Trial")}</span>;
 }
 
 const FreeTrialSlideBody = ({ trialStatus }: { trialStatus: TrialStatus }) => {
@@ -23,58 +19,60 @@ const FreeTrialSlideBody = ({ trialStatus }: { trialStatus: TrialStatus }) => {
 
   // Format the trial end date
   const trialEndDate = new Date(trialStatus.trialEnd).toLocaleDateString(undefined, {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
+    year: "numeric",
+    month: "long",
+    day: "numeric",
   });
 
   // Determine which message to show based on payment method
   const afterTrialMessage = trialStatus.hasScheduledSub
-    ? t('onboarding.freeTrial.afterTrialWithPayment', 'Your Pro subscription will start automatically when the trial ends.')
+    ? t("onboarding.freeTrial.afterTrialWithPayment", "Your Pro subscription will start automatically when the trial ends.")
     : trialStatus.hasPaymentMethod
-    ? t('onboarding.freeTrial.afterTrialWithPayment', 'Your Pro subscription will start automatically when the trial ends.')
-    : t('onboarding.freeTrial.afterTrialWithoutPayment', 'After your trial ends, you\'ll continue with our free tier. Add a payment method to keep Pro access.');
+      ? t("onboarding.freeTrial.afterTrialWithPayment", "Your Pro subscription will start automatically when the trial ends.")
+      : t(
+          "onboarding.freeTrial.afterTrialWithoutPayment",
+          "After your trial ends, you'll continue with our free tier. Add a payment method to keep Pro access.",
+        );
 
   // Pluralize days remaining
-  const daysText = trialStatus.daysRemaining === 1
-    ? t('onboarding.freeTrial.daysRemainingSingular', '{{days}} day remaining', { days: trialStatus.daysRemaining })
-    : t('onboarding.freeTrial.daysRemaining', '{{days}} days remaining', { days: trialStatus.daysRemaining });
+  const daysText =
+    trialStatus.daysRemaining === 1
+      ? t("onboarding.freeTrial.daysRemainingSingular", "{{days}} day remaining", { days: trialStatus.daysRemaining })
+      : t("onboarding.freeTrial.daysRemaining", "{{days}} days remaining", { days: trialStatus.daysRemaining });
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+    <div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
       <p>
         {t(
-          'onboarding.freeTrial.body',
-          'You have full access to Stirling PDF Pro features during your trial. Enjoy unlimited conversions, larger file sizes, and priority processing.'
+          "onboarding.freeTrial.body",
+          "You have full access to Stirling PDF Pro features during your trial. Enjoy unlimited conversions, larger file sizes, and priority processing.",
         )}
       </p>
-      <div style={{
-        background: 'rgba(255, 255, 255, 0.1)',
-        borderRadius: '8px',
-        padding: '1rem',
-        textAlign: 'center'
-      }}>
-        <div style={{ fontSize: '1.25rem', fontWeight: 'bold', marginBottom: '0.5rem' }}>
-          {daysText}
-        </div>
-        <div style={{ fontSize: '0.9rem', opacity: 0.9 }}>
-          {t('onboarding.freeTrial.trialEnds', 'Trial ends {{date}}', { date: trialEndDate })}
+      <div
+        style={{
+          background: "rgba(255, 255, 255, 0.1)",
+          borderRadius: "8px",
+          padding: "1rem",
+          textAlign: "center",
+        }}
+      >
+        <div style={{ fontSize: "1.25rem", fontWeight: "bold", marginBottom: "0.5rem" }}>{daysText}</div>
+        <div style={{ fontSize: "0.9rem", opacity: 0.9 }}>
+          {t("onboarding.freeTrial.trialEnds", "Trial ends {{date}}", { date: trialEndDate })}
         </div>
       </div>
-      <p style={{ fontSize: '0.9rem', opacity: 0.9 }}>
-        {afterTrialMessage}
-      </p>
+      <p style={{ fontSize: "0.9rem", opacity: 0.9 }}>{afterTrialMessage}</p>
     </div>
   );
 };
 
 export default function FreeTrialSlide({ trialStatus }: FreeTrialSlideProps): SlideConfig {
   return {
-    key: 'free-trial',
+    key: "free-trial",
     title: <FreeTrialSlideTitle />,
     body: <FreeTrialSlideBody trialStatus={trialStatus} />,
     background: {
-      gradientStops: ['#10B981', '#06B6D4'],
+      gradientStops: ["#10B981", "#06B6D4"],
       circles: UNIFIED_CIRCLE_CONFIG,
     },
   };
diff --git a/frontend/src/saas/components/onboarding/useSaasOnboardingState.ts b/frontend/src/saas/components/onboarding/useSaasOnboardingState.ts
index 70f8528f62..54ee449a3d 100644
--- a/frontend/src/saas/components/onboarding/useSaasOnboardingState.ts
+++ b/frontend/src/saas/components/onboarding/useSaasOnboardingState.ts
@@ -1,20 +1,20 @@
-import { useCallback, useEffect, useMemo, useState, useRef } from 'react';
-import { useAuth } from '@app/auth/UseSession';
-import { useOs } from '@app/hooks/useOs';
+import { useCallback, useEffect, useMemo, useState, useRef } from "react";
+import { useAuth } from "@app/auth/UseSession";
+import { useOs } from "@app/hooks/useOs";
 import {
   SLIDE_DEFINITIONS,
   type ButtonAction,
   type FlowState,
   type SlideId,
-} from '@app/components/onboarding/saasOnboardingFlowConfig';
-import { resolveSaasFlow } from '@app/components/onboarding/saasFlowResolver';
-import { DOWNLOAD_URLS } from '@app/constants/downloads';
+} from "@app/components/onboarding/saasOnboardingFlowConfig";
+import { resolveSaasFlow } from "@app/components/onboarding/saasFlowResolver";
+import { DOWNLOAD_URLS } from "@app/constants/downloads";
 
 interface UseSaasOnboardingStateResult {
   currentStep: number;
   totalSteps: number;
   slideDefinition: (typeof SLIDE_DEFINITIONS)[SlideId];
-  currentSlide: ReturnType<(typeof SLIDE_DEFINITIONS)[SlideId]['createSlide']>;
+  currentSlide: ReturnType<(typeof SLIDE_DEFINITIONS)[SlideId]["createSlide"]>;
   flowState: FlowState;
   handleButtonAction: (action: ButtonAction) => void;
 }
@@ -24,13 +24,10 @@ interface UseSaasOnboardingStateProps {
   onClose: () => void;
 }
 
-export function useSaasOnboardingState({
-  opened,
-  onClose,
-}: UseSaasOnboardingStateProps): UseSaasOnboardingStateResult | null {
+export function useSaasOnboardingState({ opened, onClose }: UseSaasOnboardingStateProps): UseSaasOnboardingStateResult | null {
   const { trialStatus, isPro, loading } = useAuth();
   const osType = useOs();
-  const selectedDownloadUrlRef = useRef<string>('');
+  const selectedDownloadUrlRef = useRef<string>("");
 
   const [currentStep, setCurrentStep] = useState<number>(0);
 
@@ -44,28 +41,28 @@ export function useSaasOnboardingState({
   // Determine OS details for desktop download
   const os = useMemo(() => {
     switch (osType) {
-      case 'windows':
-        return { label: 'Windows', url: DOWNLOAD_URLS.WINDOWS };
-      case 'mac-apple':
-        return { label: 'Mac (Apple Silicon)', url: DOWNLOAD_URLS.MAC_APPLE_SILICON };
-      case 'mac-intel':
-        return { label: 'Mac (Intel)', url: DOWNLOAD_URLS.MAC_INTEL };
-      case 'linux-x64':
-      case 'linux-arm64':
-        return { label: 'Linux', url: DOWNLOAD_URLS.LINUX_DOCS };
+      case "windows":
+        return { label: "Windows", url: DOWNLOAD_URLS.WINDOWS };
+      case "mac-apple":
+        return { label: "Mac (Apple Silicon)", url: DOWNLOAD_URLS.MAC_APPLE_SILICON };
+      case "mac-intel":
+        return { label: "Mac (Intel)", url: DOWNLOAD_URLS.MAC_INTEL };
+      case "linux-x64":
+      case "linux-arm64":
+        return { label: "Linux", url: DOWNLOAD_URLS.LINUX_DOCS };
       default:
-        return { label: '', url: '' };
+        return { label: "", url: "" };
     }
   }, [osType]);
 
   const osOptions = useMemo(() => {
     const options = [
-      { label: 'Windows', url: DOWNLOAD_URLS.WINDOWS, value: 'windows' },
-      { label: 'Mac (Apple Silicon)', url: DOWNLOAD_URLS.MAC_APPLE_SILICON, value: 'mac-apple' },
-      { label: 'Mac (Intel)', url: DOWNLOAD_URLS.MAC_INTEL, value: 'mac-intel' },
-      { label: 'Linux', url: DOWNLOAD_URLS.LINUX_DOCS, value: 'linux' },
+      { label: "Windows", url: DOWNLOAD_URLS.WINDOWS, value: "windows" },
+      { label: "Mac (Apple Silicon)", url: DOWNLOAD_URLS.MAC_APPLE_SILICON, value: "mac-apple" },
+      { label: "Mac (Intel)", url: DOWNLOAD_URLS.MAC_INTEL, value: "mac-intel" },
+      { label: "Linux", url: DOWNLOAD_URLS.LINUX_DOCS, value: "linux" },
     ];
-    return options.filter(opt => opt.url);
+    return options.filter((opt) => opt.url);
   }, []);
 
   // Store selected download URL
@@ -74,10 +71,7 @@ export function useSaasOnboardingState({
   }, []);
 
   // Resolve flow based on trial status
-  const resolvedFlow = useMemo(
-    () => resolveSaasFlow(trialStatus, isPro),
-    [trialStatus, isPro]
-  );
+  const resolvedFlow = useMemo(() => resolveSaasFlow(trialStatus, isPro), [trialStatus, isPro]);
 
   const flowSlideIds = resolvedFlow.ids;
   const totalSteps = flowSlideIds.length;
@@ -118,7 +112,7 @@ export function useSaasOnboardingState({
   const handleButtonAction = useCallback(
     (action: ButtonAction) => {
       switch (action) {
-        case 'next':
+        case "next":
           // If on last slide, close modal
           if (currentStep === maxIndex) {
             onClose();
@@ -126,17 +120,17 @@ export function useSaasOnboardingState({
             goNext();
           }
           return;
-        case 'prev':
+        case "prev":
           goPrev();
           return;
-        case 'close':
+        case "close":
           onClose();
           return;
-        case 'download-selected': {
+        case "download-selected": {
           // Open download URL in new tab
           const downloadUrl = selectedDownloadUrlRef.current || os.url;
           if (downloadUrl) {
-            window.open(downloadUrl, '_blank', 'noopener,noreferrer');
+            window.open(downloadUrl, "_blank", "noopener,noreferrer");
           }
           // Then advance to next slide or close if last
           if (currentStep === maxIndex) {
@@ -151,7 +145,7 @@ export function useSaasOnboardingState({
           return;
       }
     },
-    [currentStep, maxIndex, goNext, goPrev, onClose, os.url]
+    [currentStep, maxIndex, goNext, goPrev, onClose, os.url],
   );
 
   const flowState: FlowState = {};
diff --git a/frontend/src/saas/components/shared/AppConfigModal.tsx b/frontend/src/saas/components/shared/AppConfigModal.tsx
index 680ceeae7b..74ca4aad03 100644
--- a/frontend/src/saas/components/shared/AppConfigModal.tsx
+++ b/frontend/src/saas/components/shared/AppConfigModal.tsx
@@ -1,16 +1,16 @@
-import React, { useCallback, useMemo, useState, useEffect } from 'react';
-import { Modal, Button, Text, ActionIcon } from '@mantine/core';
-import { useMediaQuery } from '@mantine/hooks';
-import { useAuth } from '@app/auth/UseSession';
-import { isUserAnonymous } from '@app/auth/supabase';
-import { useTranslation } from 'react-i18next';
-import LocalIcon from '@app/components/shared/LocalIcon';
-import Overview from '@app/components/shared/config/configSections/Overview';
-import { createSaasConfigNavSections } from '@app/components/shared/config/saasConfigNavSections';
-import { NavKey } from '@app/components/shared/config/types';
-import { withBasePath } from '@app/constants/app';
-import '@app/components/shared/AppConfigModal.css';
-import { Z_INDEX_OVER_FULLSCREEN_SURFACE, Z_INDEX_OVER_SETTINGS_MODAL } from '@app/styles/zIndex';
+import React, { useCallback, useMemo, useState, useEffect } from "react";
+import { Modal, Button, Text, ActionIcon } from "@mantine/core";
+import { useMediaQuery } from "@mantine/hooks";
+import { useAuth } from "@app/auth/UseSession";
+import { isUserAnonymous } from "@app/auth/supabase";
+import { useTranslation } from "react-i18next";
+import LocalIcon from "@app/components/shared/LocalIcon";
+import Overview from "@app/components/shared/config/configSections/Overview";
+import { createSaasConfigNavSections } from "@app/components/shared/config/saasConfigNavSections";
+import { NavKey } from "@app/components/shared/config/types";
+import { withBasePath } from "@app/constants/app";
+import "@app/components/shared/AppConfigModal.css";
+import { Z_INDEX_OVER_FULLSCREEN_SURFACE, Z_INDEX_OVER_SETTINGS_MODAL } from "@app/styles/zIndex";
 
 interface AppConfigModalProps {
   opened: boolean;
@@ -23,7 +23,7 @@ const AppConfigModal: React.FC<AppConfigModalProps> = ({ opened, onClose }) => {
   const { signOut, user, creditBalance, refreshCredits } = useAuth();
   const { t } = useTranslation();
   const [confirmOpen, setConfirmOpen] = useState(false);
-  const [active, setActive] = useState<NavKey>('overview');
+  const [active, setActive] = useState<NavKey>("overview");
   const [notice, setNotice] = useState<string | null>(null);
 
   // Check if user can access billing features (non-anonymous users only)
@@ -35,52 +35,55 @@ const AppConfigModal: React.FC<AppConfigModalProps> = ({ opened, onClose }) => {
         setActive(detail.key);
       }
     };
-    window.addEventListener('appConfig:navigate', handler as EventListener);
-    return () => window.removeEventListener('appConfig:navigate', handler as EventListener);
+    window.addEventListener("appConfig:navigate", handler as EventListener);
+    return () => window.removeEventListener("appConfig:navigate", handler as EventListener);
   }, []);
 
   // Listen for notice updates (e.g., "Not enough credits..." next to Plan title)
   useEffect(() => {
     const handler = (ev: Event) => {
       const detail = (ev as CustomEvent).detail as { key?: NavKey; notice?: string } | undefined;
-      if (detail?.notice && (detail?.key ? detail.key === 'plan' : true)) {
+      if (detail?.notice && (detail?.key ? detail.key === "plan" : true)) {
         setNotice(detail.notice);
       }
     };
-    window.addEventListener('appConfig:notice', handler as EventListener);
-    return () => window.removeEventListener('appConfig:notice', handler as EventListener);
+    window.addEventListener("appConfig:notice", handler as EventListener);
+    return () => window.removeEventListener("appConfig:notice", handler as EventListener);
   }, []);
 
   // When the modal opens to Plan, proactively refresh credits and log values
   useEffect(() => {
     if (!opened) return;
-    if (active !== 'plan') return;
-    console.log('[AppConfigModal] Opening Plan section. Current creditBalance:', creditBalance);
+    if (active !== "plan") return;
+    console.log("[AppConfigModal] Opening Plan section. Current creditBalance:", creditBalance);
     (async () => {
       try {
         await refreshCredits();
       } catch (e) {
-        console.warn('[AppConfigModal] Failed to refresh credits on Plan open:', e);
+        console.warn("[AppConfigModal] Failed to refresh credits on Plan open:", e);
       }
     })();
   }, [opened, active]);
 
   useEffect(() => {
     if (!opened) return;
-    if (active !== 'plan') return;
-    console.log('[AppConfigModal] Credit balance updated while viewing Plan:', creditBalance);
+    if (active !== "plan") return;
+    console.log("[AppConfigModal] Credit balance updated while viewing Plan:", creditBalance);
   }, [opened, active, creditBalance]);
 
-  const colors = useMemo(() => ({
-    navBg: 'var(--modal-nav-bg)',
-    sectionTitle: 'var(--modal-nav-section-title)',
-    navItem: 'var(--modal-nav-item)',
-    navItemActive: 'var(--modal-nav-item-active)',
-    navItemActiveBg: 'var(--modal-nav-item-active-bg)',
-    contentBg: 'var(--modal-content-bg)',
-    headerBorder: 'var(--modal-header-border)',
-  }), []);
-  const isDev = process.env.NODE_ENV === 'development';
+  const colors = useMemo(
+    () => ({
+      navBg: "var(--modal-nav-bg)",
+      sectionTitle: "var(--modal-nav-section-title)",
+      navItem: "var(--modal-nav-item)",
+      navItemActive: "var(--modal-nav-item-active)",
+      navItemActiveBg: "var(--modal-nav-item-active-bg)",
+      contentBg: "var(--modal-content-bg)",
+      headerBorder: "var(--modal-header-border)",
+    }),
+    [],
+  );
+  const isDev = process.env.NODE_ENV === "development";
 
   const openLogoutConfirm = useCallback(() => setConfirmOpen(true), []);
 
@@ -97,15 +100,15 @@ const AppConfigModal: React.FC<AppConfigModalProps> = ({ opened, onClose }) => {
 
   const activeLabel = useMemo(() => {
     for (const section of configNavSections) {
-      const found = section.items.find(i => i.key === active);
+      const found = section.items.find((i) => i.key === active);
       if (found) return found.label;
     }
-    return '';
+    return "";
   }, [configNavSections, active]);
 
   const activeComponent = useMemo(() => {
     for (const section of configNavSections) {
-      const found = section.items.find(i => i.key === active);
+      const found = section.items.find((i) => i.key === active);
       if (found) return found.component;
     }
     return null;
@@ -114,95 +117,96 @@ const AppConfigModal: React.FC<AppConfigModalProps> = ({ opened, onClose }) => {
   return (
     <>
       <Modal
-      opened={opened}
-      onClose={onClose}
-      title={null}
-      size={isMobile ? "100%" : 980}
-      centered
-      radius="lg"
-      withCloseButton={false}
-      zIndex={Z_INDEX_OVER_FULLSCREEN_SURFACE}
-      overlayProps={{ opacity: 0.35, blur: 2 }}
-      padding={0}
-      fullScreen={isMobile}
-    >
-      <div className="modal-container">
-        {/* Left navigation */}
-        <div
-          className={`modal-nav ${isMobile ? 'mobile' : ''}`}
-          style={{
-            background: colors.navBg,
-            borderRight: `1px solid ${colors.headerBorder}`,
-          }}
-        >
-          <div className="modal-nav-scroll">
-            {configNavSections.map(section => (
-              <div key={section.title} className="modal-nav-section">
-                {!isMobile && (
-                  <Text size="xs" fw={600} c={colors.sectionTitle} style={{ textTransform: 'uppercase', letterSpacing: 0.4 }}>
-                    {section.title}
-                  </Text>
-                )}
-                <div className="modal-nav-section-items">
-                  {section.items.map(item => {
-                    const isActive = active === item.key;
-                    const color = isActive ? colors.navItemActive : colors.navItem;
-                    const iconSize = isMobile ? 28 : 18;
-                    return (
-                      <div
-                        key={item.key}
-                        onClick={() => setActive(item.key)}
-                        className={`modal-nav-item ${isMobile ? 'mobile' : ''}`}
-                        style={{
-                          background: isActive ? colors.navItemActiveBg : 'transparent',
-                        }}
-                      >
-                        <LocalIcon icon={item.icon} width={iconSize} height={iconSize} style={{ color }} />
-                        {!isMobile && (
-                          <Text size="sm" fw={500} style={{ color }}>
-                            {item.label}
-                          </Text>
-                        )}
-                      </div>
-                    );
-                  })}
+        opened={opened}
+        onClose={onClose}
+        title={null}
+        size={isMobile ? "100%" : 980}
+        centered
+        radius="lg"
+        withCloseButton={false}
+        zIndex={Z_INDEX_OVER_FULLSCREEN_SURFACE}
+        overlayProps={{ opacity: 0.35, blur: 2 }}
+        padding={0}
+        fullScreen={isMobile}
+      >
+        <div className="modal-container">
+          {/* Left navigation */}
+          <div
+            className={`modal-nav ${isMobile ? "mobile" : ""}`}
+            style={{
+              background: colors.navBg,
+              borderRight: `1px solid ${colors.headerBorder}`,
+            }}
+          >
+            <div className="modal-nav-scroll">
+              {configNavSections.map((section) => (
+                <div key={section.title} className="modal-nav-section">
+                  {!isMobile && (
+                    <Text
+                      size="xs"
+                      fw={600}
+                      c={colors.sectionTitle}
+                      style={{ textTransform: "uppercase", letterSpacing: 0.4 }}
+                    >
+                      {section.title}
+                    </Text>
+                  )}
+                  <div className="modal-nav-section-items">
+                    {section.items.map((item) => {
+                      const isActive = active === item.key;
+                      const color = isActive ? colors.navItemActive : colors.navItem;
+                      const iconSize = isMobile ? 28 : 18;
+                      return (
+                        <div
+                          key={item.key}
+                          onClick={() => setActive(item.key)}
+                          className={`modal-nav-item ${isMobile ? "mobile" : ""}`}
+                          style={{
+                            background: isActive ? colors.navItemActiveBg : "transparent",
+                          }}
+                        >
+                          <LocalIcon icon={item.icon} width={iconSize} height={iconSize} style={{ color }} />
+                          {!isMobile && (
+                            <Text size="sm" fw={500} style={{ color }}>
+                              {item.label}
+                            </Text>
+                          )}
+                        </div>
+                      );
+                    })}
+                  </div>
                 </div>
-              </div>
-            ))}
+              ))}
+            </div>
           </div>
-        </div>
 
-        {/* Right content */}
-        <div className="modal-content">
-          <div className="modal-content-scroll">
-            {/* Sticky header with section title and small close button */}
-            <div
-              className="modal-header"
-              style={{
-                background: colors.contentBg,
-                borderBottom: `1px solid ${colors.headerBorder}`,
-              }}
-            >
-              <Text fw={700} size="lg">
-                {activeLabel}
-                {active === 'plan' && notice ? (
-                  <span style={{ marginLeft: 8, fontWeight: 600, color: 'var(--mantine-color-yellow-7)' }}>
-                    – {notice}
-                  </span>
-                ) : null}
-              </Text>
-              <ActionIcon variant="subtle" onClick={onClose} aria-label="Close">
-                <LocalIcon icon="close-rounded" width={18} height={18} />
-              </ActionIcon>
-            </div>
-            <div className="modal-body">
-              {activeComponent}
+          {/* Right content */}
+          <div className="modal-content">
+            <div className="modal-content-scroll">
+              {/* Sticky header with section title and small close button */}
+              <div
+                className="modal-header"
+                style={{
+                  background: colors.contentBg,
+                  borderBottom: `1px solid ${colors.headerBorder}`,
+                }}
+              >
+                <Text fw={700} size="lg">
+                  {activeLabel}
+                  {active === "plan" && notice ? (
+                    <span style={{ marginLeft: 8, fontWeight: 600, color: "var(--mantine-color-yellow-7)" }}>– {notice}</span>
+                  ) : null}
+                </Text>
+                <ActionIcon variant="subtle" onClick={onClose} aria-label="Close">
+                  <LocalIcon icon="close-rounded" width={18} height={18} />
+                </ActionIcon>
+              </div>
+              <div className="modal-body">{activeComponent}</div>
             </div>
           </div>
         </div>
-      </div>
       </Modal>
-            {/* Confirm logout modal */}
+      {/* Confirm logout modal */}
       <Modal
         opened={confirmOpen}
         onClose={() => setConfirmOpen(false)}
@@ -213,7 +217,9 @@ const AppConfigModal: React.FC<AppConfigModalProps> = ({ opened, onClose }) => {
         <div className="confirm-modal-content">
           <Text>Are you sure you want to sign out?</Text>
           <div className="confirm-modal-buttons">
-            <Button variant="default" onClick={() => setConfirmOpen(false)}>Cancel</Button>
+            <Button variant="default" onClick={() => setConfirmOpen(false)}>
+              Cancel
+            </Button>
             <Button
               color="red"
               onClick={async () => {
@@ -222,7 +228,7 @@ const AppConfigModal: React.FC<AppConfigModalProps> = ({ opened, onClose }) => {
                 } finally {
                   setConfirmOpen(false);
                   onClose();
-                  window.location.href = withBasePath('/login');
+                  window.location.href = withBasePath("/login");
                 }
               }}
             >
diff --git a/frontend/src/saas/components/shared/InfoBanner.tsx b/frontend/src/saas/components/shared/InfoBanner.tsx
index 1e5a2b712e..a07271a49d 100644
--- a/frontend/src/saas/components/shared/InfoBanner.tsx
+++ b/frontend/src/saas/components/shared/InfoBanner.tsx
@@ -1,8 +1,8 @@
-import React, { ReactNode } from 'react';
-import { Paper, Group, Text, Button, ActionIcon, Stack } from '@mantine/core';
-import LocalIcon from '@app/components/shared/LocalIcon';
+import React, { ReactNode } from "react";
+import { Paper, Group, Text, Button, ActionIcon, Stack } from "@mantine/core";
+import LocalIcon from "@app/components/shared/LocalIcon";
 
-type InfoBannerTone = 'info' | 'warning';
+type InfoBannerTone = "info" | "warning";
 
 const toneStyles: Record<
   InfoBannerTone,
@@ -15,18 +15,18 @@ const toneStyles: Record<
   }
 > = {
   info: {
-    background: 'var(--mantine-color-blue-0)',
-    border: 'var(--mantine-color-blue-2)',
-    text: 'var(--mantine-color-blue-9)',
-    icon: 'var(--mantine-color-blue-6)',
-    buttonColor: 'blue',
+    background: "var(--mantine-color-blue-0)",
+    border: "var(--mantine-color-blue-2)",
+    text: "var(--mantine-color-blue-9)",
+    icon: "var(--mantine-color-blue-6)",
+    buttonColor: "blue",
   },
   warning: {
-    background: 'var(--mantine-color-orange-0)',
-    border: 'var(--mantine-color-orange-3)',
-    text: 'var(--mantine-color-orange-9)',
-    icon: 'var(--mantine-color-orange-7)',
-    buttonColor: 'orange',
+    background: "var(--mantine-color-orange-0)",
+    border: "var(--mantine-color-orange-3)",
+    text: "var(--mantine-color-orange-9)",
+    icon: "var(--mantine-color-orange-7)",
+    buttonColor: "orange",
   },
 };
 
@@ -47,7 +47,7 @@ interface InfoBannerProps {
   textColor?: string;
   iconColor?: string;
   buttonColor?: string;
-  buttonVariant?: 'light' | 'filled' | 'white' | 'outline' | 'subtle';
+  buttonVariant?: "light" | "filled" | "white" | "outline" | "subtle";
   buttonTextColor?: string; // SaaS-specific for dark theme buttons
   minHeight?: number | string;
   closeIconColor?: string; // SaaS-specific for dark theme
@@ -62,19 +62,19 @@ export const InfoBanner: React.FC<InfoBannerProps> = ({
   title,
   message,
   buttonText,
-  buttonIcon = 'check-circle-rounded',
+  buttonIcon = "check-circle-rounded",
   onButtonClick,
   onDismiss,
   dismissible = true,
   loading = false,
   show = true,
-  tone = 'info',
+  tone = "info",
   background,
   borderColor,
   textColor,
   iconColor,
   buttonColor,
-  buttonVariant = 'light',
+  buttonVariant = "light",
   buttonTextColor,
   minHeight = 56,
   closeIconColor,
@@ -96,14 +96,14 @@ export const InfoBanner: React.FC<InfoBannerProps> = ({
         background: background ?? toneStyle.background,
         borderBottom: `1px solid ${borderColor ?? toneStyle.border}`,
         minHeight,
-        display: 'flex',
-        alignItems: 'center',
+        display: "flex",
+        alignItems: "center",
       }}
     >
-      <Group gap="sm" align="center" wrap="nowrap" justify="space-between" style={{ width: '100%' }}>
+      <Group gap="sm" align="center" wrap="nowrap" justify="space-between" style={{ width: "100%" }}>
         <Group gap="sm" align="center" wrap="nowrap" style={{ flex: 1, minWidth: 0 }}>
-          {icon && (
-            typeof icon === 'string' ? (
+          {icon &&
+            (typeof icon === "string" ? (
               <LocalIcon
                 icon={icon}
                 width="1.2rem"
@@ -111,23 +111,15 @@ export const InfoBanner: React.FC<InfoBannerProps> = ({
                 style={{ color: iconColor ?? toneStyle.icon, flexShrink: 0 }}
               />
             ) : (
-              <div style={{ flexShrink: 0, display: 'flex', alignItems: 'center' }}>
-                {icon}
-              </div>
-            )
-          )}
+              <div style={{ flexShrink: 0, display: "flex", alignItems: "center" }}>{icon}</div>
+            ))}
           <Stack gap={2} style={{ flex: 1, minWidth: 0 }}>
             {title && (
               <Text fw={600} size="sm" style={{ color: textColor ?? toneStyle.text }}>
                 {title}
               </Text>
             )}
-            <Text
-              fw={title ? 400 : 500}
-              size="sm"
-              style={{ color: textColor ?? toneStyle.text }}
-              lineClamp={2}
-            >
+            <Text fw={title ? 400 : 500} size="sm" style={{ color: textColor ?? toneStyle.text }} lineClamp={2}>
               {message}
             </Text>
           </Stack>
@@ -148,13 +140,13 @@ export const InfoBanner: React.FC<InfoBannerProps> = ({
                         color: buttonTextColor,
                       },
                     }
-                  : buttonVariant !== 'white' && buttonVariant !== 'filled'
-                  ? {
-                      label: {
-                        color: textColor ?? toneStyle.text,
-                      },
-                    }
-                  : undefined
+                  : buttonVariant !== "white" && buttonVariant !== "filled"
+                    ? {
+                        label: {
+                          color: textColor ?? toneStyle.text,
+                        },
+                      }
+                    : undefined
               }
             >
               {buttonText}
@@ -163,7 +155,7 @@ export const InfoBanner: React.FC<InfoBannerProps> = ({
           {dismissible && (
             <ActionIcon
               variant="subtle"
-              color={closeIconColor ? undefined : 'gray'}
+              color={closeIconColor ? undefined : "gray"}
               size="sm"
               onClick={handleDismiss}
               aria-label="Dismiss"
diff --git a/frontend/src/saas/components/shared/ManageBillingButton.tsx b/frontend/src/saas/components/shared/ManageBillingButton.tsx
index 3f9558bbf3..239d96ce59 100644
--- a/frontend/src/saas/components/shared/ManageBillingButton.tsx
+++ b/frontend/src/saas/components/shared/ManageBillingButton.tsx
@@ -1,7 +1,7 @@
-import { useState } from 'react';
-import { supabase } from '@app/auth/supabase';
-import { Button } from '@mantine/core';
-import { usePlans } from '@app/hooks/usePlans';
+import { useState } from "react";
+import { supabase } from "@app/auth/supabase";
+import { Button } from "@mantine/core";
+import { usePlans } from "@app/hooks/usePlans";
 
 interface TrialStatus {
   isTrialing: boolean;
@@ -12,8 +12,8 @@ interface TrialStatus {
 }
 
 export function ManageBillingButton({
-  returnUrl = typeof window !== 'undefined' ? window.location.href : '/',
-  children = 'Manage billing',
+  returnUrl = typeof window !== "undefined" ? window.location.href : "/",
+  children = "Manage billing",
   trialStatus,
 }: {
   returnUrl?: string;
@@ -25,7 +25,7 @@ export function ManageBillingButton({
   const { data } = usePlans();
 
   // Hide for free plan users
-  if (!data || data.currentPlan.id === 'free') {
+  if (!data || data.currentPlan.id === "free") {
     return null;
   }
 
@@ -38,16 +38,17 @@ export function ManageBillingButton({
     setLoading(true);
     setErr(null);
     try {
-      const { data, error } = await supabase.functions.invoke<{ url: string; error?: string }>('manage-billing', {
+      const { data, error } = await supabase.functions.invoke<{ url: string; error?: string }>("manage-billing", {
         body: {
-        name: 'Functions',
-        return_url: returnUrl},
-      })
+          name: "Functions",
+          return_url: returnUrl,
+        },
+      });
       if (error) throw error;
-      if (!data || 'error' in data) throw new Error(data?.error ?? 'No portal URL');
+      if (!data || "error" in data) throw new Error(data?.error ?? "No portal URL");
       window.location.href = data.url;
     } catch (e: unknown) {
-      setErr(e instanceof Error ? e.message : 'Could not open billing portal');
+      setErr(e instanceof Error ? e.message : "Could not open billing portal");
     } finally {
       setLoading(false);
     }
@@ -56,7 +57,7 @@ export function ManageBillingButton({
   return (
     <div>
       <Button onClick={onClick} disabled={loading} className="px-4 py-2 rounded bg-black text-white">
-        {loading ? 'Opening…' : children}
+        {loading ? "Opening…" : children}
       </Button>
       {err && <div className="mt-2 text-red-600">{err}</div>}
     </div>
diff --git a/frontend/src/saas/components/shared/PrivateContent.tsx b/frontend/src/saas/components/shared/PrivateContent.tsx
index e75a4d7ef5..c66213cac4 100644
--- a/frontend/src/saas/components/shared/PrivateContent.tsx
+++ b/frontend/src/saas/components/shared/PrivateContent.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React from "react";
 
 interface PrivateContentProps extends React.HTMLAttributes<HTMLSpanElement> {
   children: React.ReactNode;
@@ -9,16 +9,11 @@ interface PrivateContentProps extends React.HTMLAttributes<HTMLSpanElement> {
  * Adds both the PostHog no-capture class and the Userback opt-out class
  * while keeping the same API and layout behavior (display: contents).
  */
-export const PrivateContent: React.FC<PrivateContentProps> = ({
-  children,
-  className = '',
-  style,
-  ...props
-}) => {
-  const baseClass = 'ph-no-capture userback-block';
+export const PrivateContent: React.FC<PrivateContentProps> = ({ children, className = "", style, ...props }) => {
+  const baseClass = "ph-no-capture userback-block";
   const combinedClassName = className ? `${baseClass} ${className}` : baseClass;
   const combinedStyle = {
-    display: 'contents' as const,
+    display: "contents" as const,
     ...style,
   };
 
diff --git a/frontend/src/saas/components/shared/StripeCheckoutSaas.tsx b/frontend/src/saas/components/shared/StripeCheckoutSaas.tsx
index 27f1f1abc3..1092eac059 100644
--- a/frontend/src/saas/components/shared/StripeCheckoutSaas.tsx
+++ b/frontend/src/saas/components/shared/StripeCheckoutSaas.tsx
@@ -1,16 +1,16 @@
-import React, { useState, useEffect } from 'react';
-import { Modal, Button, Text, Alert, Loader, Stack } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { loadStripe } from '@stripe/stripe-js';
-import { EmbeddedCheckoutProvider, EmbeddedCheckout } from '@stripe/react-stripe-js';
-import { supabase } from '@app/auth/supabase';
-import { Z_INDEX_OVER_SETTINGS_MODAL } from '@app/styles/zIndex';
+import React, { useState, useEffect } from "react";
+import { Modal, Button, Text, Alert, Loader, Stack } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { loadStripe } from "@stripe/stripe-js";
+import { EmbeddedCheckoutProvider, EmbeddedCheckout } from "@stripe/react-stripe-js";
+import { supabase } from "@app/auth/supabase";
+import { Z_INDEX_OVER_SETTINGS_MODAL } from "@app/styles/zIndex";
 
 const stripePromise = loadStripe(import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY);
 
-export type PurchaseType = 'subscription' | 'credits';
-export type CreditsPack = 'xsmall' | 'small' | 'medium' | 'large' | null;
-export type PlanID =  'pro' | null;
+export type PurchaseType = "subscription" | "credits";
+export type CreditsPack = "xsmall" | "small" | "medium" | "large" | null;
+export type PlanID = "pro" | null;
 
 interface StripeCheckoutProps {
   opened: boolean;
@@ -26,7 +26,7 @@ interface StripeCheckoutProps {
   // Proprietary-specific props (for compatibility)
   planGroup?: unknown;
   minimumSeats?: number;
-  onLicenseActivated?: (licenseInfo: {licenseType: string; enabled: boolean; maxUsers: number; hasKey: boolean}) => void;
+  onLicenseActivated?: (licenseInfo: { licenseType: string; enabled: boolean; maxUsers: number; hasKey: boolean }) => void;
   hostedCheckoutSuccess?: {
     isUpgrade: boolean;
     licenseKey?: string;
@@ -37,7 +37,7 @@ interface StripeCheckoutProps {
 }
 
 type CheckoutState = {
-  status: 'idle' | 'loading' | 'ready' | 'success' | 'error';
+  status: "idle" | "loading" | "ready" | "success" | "error";
   clientSecret?: string;
   error?: string;
   sessionParams?: {
@@ -56,71 +56,71 @@ const StripeCheckout: React.FC<StripeCheckoutProps> = ({
   planName,
   isTrialConversion,
   onSuccess,
-  onError
+  onError,
 }) => {
   const { t } = useTranslation();
-  const [state, setState] = useState<CheckoutState>({ status: 'idle' });
+  const [state, setState] = useState<CheckoutState>({ status: "idle" });
 
   const createCheckoutSession = async () => {
     try {
-      setState({ status: 'loading' });
+      setState({ status: "loading" });
 
-      const { data, error } = await supabase.functions.invoke('create-checkout', {
+      const { data, error } = await supabase.functions.invoke("create-checkout", {
         body: {
           purchase_type: purchaseType,
-          ui_mode: 'embedded',
+          ui_mode: "embedded",
           plan: planId,
           credits_pack: creditsPack,
           callback_base_url: window.location.origin,
-          trial_conversion: isTrialConversion || false
-        }
+          trial_conversion: isTrialConversion || false,
+        },
       });
 
       if (error) {
-        throw new Error(error.message || 'Failed to create checkout session');
+        throw new Error(error.message || "Failed to create checkout session");
       }
 
       if (!data) {
-        throw new Error('No data received from server');
+        throw new Error("No data received from server");
       }
 
-      const jsonData = typeof data === 'string' ? JSON.parse(data) : data;
+      const jsonData = typeof data === "string" ? JSON.parse(data) : data;
 
       if (!jsonData?.clientSecret) {
-        throw new Error('No client secret received from server');
+        throw new Error("No client secret received from server");
       }
 
       setState({
-        status: 'ready',
+        status: "ready",
         clientSecret: jsonData.clientSecret,
         sessionParams: {
           purchaseType: purchaseType!,
           planId: planId!,
-          creditsPack: creditsPack!
-        }
+          creditsPack: creditsPack!,
+        },
       });
     } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : 'Failed to create checkout session';
+      const errorMessage = err instanceof Error ? err.message : "Failed to create checkout session";
       setState({
-        status: 'error',
-        error: errorMessage
+        status: "error",
+        error: errorMessage,
       });
       onError?.(errorMessage);
     }
   };
 
   const handlePaymentComplete = () => {
-    setState({ status: 'success' });
+    setState({ status: "success" });
 
     // Call success callback immediately - parent will handle timing
-    onSuccess?.('');
+    onSuccess?.("");
 
     // Note: Parent (Plan.tsx) now handles the delay and modal closing
   };
 
   const handleClose = () => {
     // Reset state to idle to clean up the session
-    setState({ status: 'idle', clientSecret: undefined, error: undefined, sessionParams: undefined });
+    setState({ status: "idle", clientSecret: undefined, error: undefined, sessionParams: undefined });
     onClose();
   };
 
@@ -129,35 +129,35 @@ const StripeCheckout: React.FC<StripeCheckoutProps> = ({
     if (opened) {
       // Check if we need a new session (first time or parameters changed)
       const needsNewSession =
-        state.status === 'idle' ||
+        state.status === "idle" ||
         !state.sessionParams ||
         state.sessionParams.purchaseType !== purchaseType ||
         state.sessionParams.planId !== planId ||
         state.sessionParams.creditsPack !== creditsPack;
 
       if (needsNewSession) {
-        console.log('Creating new checkout session:', { purchaseType, planId, creditsPack });
+        console.log("Creating new checkout session:", { purchaseType, planId, creditsPack });
         createCheckoutSession();
       }
     } else if (!opened) {
       // Clean up state when modal closes
-      setState({ status: 'idle', clientSecret: undefined, error: undefined, sessionParams: undefined });
+      setState({ status: "idle", clientSecret: undefined, error: undefined, sessionParams: undefined });
     }
   }, [opened, purchaseType, planId, creditsPack]);
 
   const renderContent = () => {
     switch (state.status) {
-      case 'loading':
+      case "loading":
         return (
           <div className="flex flex-col items-center justify-center py-8">
             <Loader size="lg" />
             <Text size="sm" c="dimmed" mt="md">
-              {t('payment.preparing', 'Preparing your checkout...')}
+              {t("payment.preparing", "Preparing your checkout...")}
             </Text>
           </div>
         );
 
-      case 'ready':
+      case "ready":
         if (!state.clientSecret) return null;
 
         return (
@@ -166,34 +166,37 @@ const StripeCheckout: React.FC<StripeCheckoutProps> = ({
             stripe={stripePromise}
             options={{
               clientSecret: state.clientSecret,
-              onComplete: handlePaymentComplete
+              onComplete: handlePaymentComplete,
             }}
           >
             <EmbeddedCheckout />
           </EmbeddedCheckoutProvider>
         );
 
-      case 'success':
+      case "success":
         return (
-          <Alert color="green" title={t('payment.success', 'Payment Successful!')}>
+          <Alert color="green" title={t("payment.success", "Payment Successful!")}>
             <Stack gap="md">
               <Text size="sm">
-                {t('payment.successMessage', 'Your plan has been upgraded successfully. You will receive a confirmation email shortly.')}
+                {t(
+                  "payment.successMessage",
+                  "Your plan has been upgraded successfully. You will receive a confirmation email shortly.",
+                )}
               </Text>
               <Text size="xs" c="dimmed">
-                {t('payment.autoClose', 'This window will close automatically...')}
+                {t("payment.autoClose", "This window will close automatically...")}
               </Text>
             </Stack>
           </Alert>
         );
 
-      case 'error':
+      case "error":
         return (
-          <Alert color="red" title={t('payment.error', 'Payment Error')}>
+          <Alert color="red" title={t("payment.error", "Payment Error")}>
             <Stack gap="md">
               <Text size="sm">{state.error}</Text>
               <Button variant="outline" onClick={handleClose}>
-                {t('common.close', 'Close')}
+                {t("common.close", "Close")}
               </Button>
             </Stack>
           </Alert>
@@ -211,7 +214,7 @@ const StripeCheckout: React.FC<StripeCheckoutProps> = ({
       title={
         <div>
           <Text fw={600} size="lg">
-            {t('payment.upgradeTitle', 'Upgrade to {{planName}}', { planName })}
+            {t("payment.upgradeTitle", "Upgrade to {{planName}}", { planName })}
           </Text>
         </div>
       }
diff --git a/frontend/src/saas/components/shared/TrialExpiredModal.tsx b/frontend/src/saas/components/shared/TrialExpiredModal.tsx
index 578d321c73..18bbce3fbd 100644
--- a/frontend/src/saas/components/shared/TrialExpiredModal.tsx
+++ b/frontend/src/saas/components/shared/TrialExpiredModal.tsx
@@ -1,9 +1,9 @@
-import { Modal, Stack, Button } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import DiamondOutlinedIcon from '@mui/icons-material/DiamondOutlined';
-import AnimatedSlideBackground from '@app/components/onboarding/slides/AnimatedSlideBackground';
-import styles from '@app/components/onboarding/InitialOnboardingModal/InitialOnboardingModal.module.css';
-import { Z_INDEX_OVER_FULLSCREEN_SURFACE } from '@app/styles/zIndex';
+import { Modal, Stack, Button } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import DiamondOutlinedIcon from "@mui/icons-material/DiamondOutlined";
+import AnimatedSlideBackground from "@app/components/onboarding/slides/AnimatedSlideBackground";
+import styles from "@app/components/onboarding/InitialOnboardingModal/InitialOnboardingModal.module.css";
+import { Z_INDEX_OVER_FULLSCREEN_SURFACE } from "@app/styles/zIndex";
 
 interface TrialExpiredModalProps {
   opened: boolean;
@@ -15,15 +15,15 @@ export function TrialExpiredModal({ opened, onClose, onSubscribe }: TrialExpired
   const { t } = useTranslation();
 
   // Use CSS variables for theme colors
-  const amberColor = getComputedStyle(document.documentElement).getPropertyValue('--color-amber-500').trim() || '#f59e0b';
-  const redColor = getComputedStyle(document.documentElement).getPropertyValue('--color-red-500').trim() || '#ef4444';
+  const amberColor = getComputedStyle(document.documentElement).getPropertyValue("--color-amber-500").trim() || "#f59e0b";
+  const redColor = getComputedStyle(document.documentElement).getPropertyValue("--color-red-500").trim() || "#ef4444";
   const gradientStops: [string, string] = [amberColor, redColor];
 
   const circles = [
     {
-      position: 'bottom-left' as const,
+      position: "bottom-left" as const,
       size: 270, // 16.875rem
-      color: 'rgba(255, 255, 255, 0.25)',
+      color: "rgba(255, 255, 255, 0.25)",
       opacity: 0.9,
       amplitude: 24, // 1.5rem
       duration: 4.5,
@@ -31,9 +31,9 @@ export function TrialExpiredModal({ opened, onClose, onSubscribe }: TrialExpired
       offsetY: 14, // 0.875rem
     },
     {
-      position: 'top-right' as const,
+      position: "top-right" as const,
       size: 300, // 18.75rem
-      color: 'rgba(255, 255, 255, 0.2)',
+      color: "rgba(255, 255, 255, 0.2)",
       opacity: 0.9,
       amplitude: 28, // 1.75rem
       duration: 4.5,
@@ -57,26 +57,25 @@ export function TrialExpiredModal({ opened, onClose, onSubscribe }: TrialExpired
       styles={{
         body: { padding: 0 },
         content: {
-          overflow: 'hidden',
-          border: 'none',
-          background: 'var(--bg-surface)',
-          maxHeight: '90vh',
-          display: 'flex',
-          flexDirection: 'column',
+          overflow: "hidden",
+          border: "none",
+          background: "var(--bg-surface)",
+          maxHeight: "90vh",
+          display: "flex",
+          flexDirection: "column",
         },
       }}
     >
-      <Stack gap={0} className={styles.modalContent} style={{ height: '100%', maxHeight: '90vh', display: 'flex', flexDirection: 'column' }}>
+      <Stack
+        gap={0}
+        className={styles.modalContent}
+        style={{ height: "100%", maxHeight: "90vh", display: "flex", flexDirection: "column" }}
+      >
         <div className={styles.heroWrapper} style={{ flexShrink: 0 }}>
-          <AnimatedSlideBackground
-            gradientStops={gradientStops}
-            circles={circles}
-            isActive
-            slideKey="trial-expired"
-          />
+          <AnimatedSlideBackground gradientStops={gradientStops} circles={circles} isActive slideKey="trial-expired" />
           <div className={styles.heroLogo}>
             <div className={styles.heroLogoCircle}>
-              <DiamondOutlinedIcon sx={{ fontSize: 64, color: '#000000' }} />
+              <DiamondOutlinedIcon sx={{ fontSize: 64, color: "#000000" }} />
             </div>
           </div>
         </div>
@@ -85,28 +84,26 @@ export function TrialExpiredModal({ opened, onClose, onSubscribe }: TrialExpired
           className={styles.modalBody}
           style={{
             flex: 1,
-            overflowY: 'auto',
-            overflowX: 'hidden',
-            WebkitOverflowScrolling: 'touch',
+            overflowY: "auto",
+            overflowX: "hidden",
+            WebkitOverflowScrolling: "touch",
           }}
         >
           <Stack gap={16}>
-            <div className={`${styles.title} ${styles.titleText}`}>
-              {t('plan.trial.expired', 'Your Trial Has Ended')}
-            </div>
+            <div className={`${styles.title} ${styles.titleText}`}>{t("plan.trial.expired", "Your Trial Has Ended")}</div>
 
             <div className={styles.bodyText}>
               <div className={`${styles.bodyCopy} ${styles.bodyCopyInner}`}>
                 {t(
-                  'plan.trial.expiredMessage',
-                  'Your 30-day Pro trial has expired. Subscribe to Pro to continue accessing premium features, or continue with our free tier.'
+                  "plan.trial.expiredMessage",
+                  "Your 30-day Pro trial has expired. Subscribe to Pro to continue accessing premium features, or continue with our free tier.",
                 )}
               </div>
             </div>
 
             <div className={styles.bodyText}>
               <div className={`${styles.bodyCopy} ${styles.bodyCopyInner}`}>
-                {t('plan.trial.freeTierLimitations', 'Free tier includes basic PDF tools with usage limits.')}
+                {t("plan.trial.freeTierLimitations", "Free tier includes basic PDF tools with usage limits.")}
               </div>
             </div>
 
@@ -127,10 +124,10 @@ export function TrialExpiredModal({ opened, onClose, onSubscribe }: TrialExpired
               <div
                 className="trial-button-container"
                 style={{
-                  display: 'flex',
-                  flexWrap: 'wrap',
-                  gap: '0.75rem',
-                  justifyContent: 'space-between',
+                  display: "flex",
+                  flexWrap: "wrap",
+                  gap: "0.75rem",
+                  justifyContent: "space-between",
                 }}
               >
                 <Button
@@ -139,15 +136,15 @@ export function TrialExpiredModal({ opened, onClose, onSubscribe }: TrialExpired
                   size="sm"
                   className="trial-modal-button"
                   style={{
-                    fontSize: '0.8125rem',
-                    padding: '0.5rem 1rem',
-                    height: 'auto',
-                    minWidth: '8.125rem',
-                    flex: '0 1 auto',
-                    border: '0'
+                    fontSize: "0.8125rem",
+                    padding: "0.5rem 1rem",
+                    height: "auto",
+                    minWidth: "8.125rem",
+                    flex: "0 1 auto",
+                    border: "0",
                   }}
                 >
-                  {t('plan.trial.continueWithFree', 'Continue with Free')}
+                  {t("plan.trial.continueWithFree", "Continue with Free")}
                 </Button>
 
                 <Button
@@ -155,18 +152,18 @@ export function TrialExpiredModal({ opened, onClose, onSubscribe }: TrialExpired
                   size="md"
                   className="trial-modal-button trial-modal-button-primary"
                   style={{
-                    background: 'linear-gradient(135deg, var(--color-amber-500), var(--color-red-500))',
-                    color: '#FFFFFF',
-                    fontSize: '0.9375rem',
+                    background: "linear-gradient(135deg, var(--color-amber-500), var(--color-red-500))",
+                    color: "#FFFFFF",
+                    fontSize: "0.9375rem",
                     fontWeight: 600,
-                    padding: '0.75rem 1.5rem',
-                    height: 'auto',
-                    border: 'none',
-                    minWidth: '10.625rem',
-                    flex: '0 1 auto',
+                    padding: "0.75rem 1.5rem",
+                    height: "auto",
+                    border: "none",
+                    minWidth: "10.625rem",
+                    flex: "0 1 auto",
                   }}
                 >
-                  {t('plan.trial.subscribeToPro', 'Subscribe to Pro')}
+                  {t("plan.trial.subscribeToPro", "Subscribe to Pro")}
                 </Button>
               </div>
             </div>
diff --git a/frontend/src/saas/components/shared/TrialStatusBanner.tsx b/frontend/src/saas/components/shared/TrialStatusBanner.tsx
index cb0f1951d6..b1fce4c9c0 100644
--- a/frontend/src/saas/components/shared/TrialStatusBanner.tsx
+++ b/frontend/src/saas/components/shared/TrialStatusBanner.tsx
@@ -1,19 +1,19 @@
-import { useEffect, useState, useCallback } from 'react';
-import { useBanner } from '@app/contexts/BannerContext';
-import { useAuth } from '@app/auth/UseSession';
-import { useTranslation } from 'react-i18next';
-import { InfoBanner } from '@app/components/shared/InfoBanner';
-import StripeCheckout from '@app/components/shared/StripeCheckoutSaas';
-import { BASE_PATH } from '@app/constants/app';
+import { useEffect, useState, useCallback } from "react";
+import { useBanner } from "@app/contexts/BannerContext";
+import { useAuth } from "@app/auth/UseSession";
+import { useTranslation } from "react-i18next";
+import { InfoBanner } from "@app/components/shared/InfoBanner";
+import StripeCheckout from "@app/components/shared/StripeCheckoutSaas";
+import { BASE_PATH } from "@app/constants/app";
 
-const SESSION_STORAGE_KEY = 'trialBannerDismissed';
+const SESSION_STORAGE_KEY = "trialBannerDismissed";
 
 export function TrialStatusBanner() {
   const { setBanner } = useBanner();
   const { t } = useTranslation();
   const { trialStatus } = useAuth();
   const [dismissed, setDismissed] = useState(() => {
-    return sessionStorage.getItem(SESSION_STORAGE_KEY) === 'true';
+    return sessionStorage.getItem(SESSION_STORAGE_KEY) === "true";
   });
   const [checkoutOpen, setCheckoutOpen] = useState(false);
 
@@ -28,7 +28,7 @@ export function TrialStatusBanner() {
     !dismissed;
 
   if (trialStatus?.hasPaymentMethod || trialStatus?.hasScheduledSub) {
-    console.log('Subscription scheduled - hiding trial banner');
+    console.log("Subscription scheduled - hiding trial banner");
   }
 
   const handleOpenCheckout = useCallback(() => {
@@ -37,7 +37,7 @@ export function TrialStatusBanner() {
 
   const handleDismiss = useCallback(() => {
     setDismissed(true);
-    sessionStorage.setItem(SESSION_STORAGE_KEY, 'true');
+    sessionStorage.setItem(SESSION_STORAGE_KEY, "true");
   }, []);
 
   useEffect(() => {
@@ -46,15 +46,15 @@ export function TrialStatusBanner() {
       return;
     }
 
-    const trialEndDate = new Date(trialStatus.trialEnd).toLocaleDateString('en-GB', {
-      month: 'short',
-      day: 'numeric'
+    const trialEndDate = new Date(trialStatus.trialEnd).toLocaleDateString("en-GB", {
+      month: "short",
+      day: "numeric",
     });
 
     const message = t(
-      'plan.trial.message',
-      `Your trial ends in ${trialStatus.daysRemaining} day${trialStatus.daysRemaining !== 1 ? 's' : ''} (${trialEndDate}). Subscribe to continue Pro access.`,
-      { days: trialStatus.daysRemaining, date: trialEndDate }
+      "plan.trial.message",
+      `Your trial ends in ${trialStatus.daysRemaining} day${trialStatus.daysRemaining !== 1 ? "s" : ""} (${trialEndDate}). Subscribe to continue Pro access.`,
+      { days: trialStatus.daysRemaining, date: trialEndDate },
     );
 
     const logoIcon = (
@@ -62,9 +62,9 @@ export function TrialStatusBanner() {
         src={`${BASE_PATH}/modern-logo/logo512.png`}
         alt="Stirling PDF"
         style={{
-          width: '1.5rem',
-          height: '1.5rem',
-          objectFit: 'contain'
+          width: "1.5rem",
+          height: "1.5rem",
+          objectFit: "contain",
         }}
       />
     );
@@ -74,7 +74,7 @@ export function TrialStatusBanner() {
         icon={logoIcon}
         tone="info"
         message={message}
-        buttonText={t('plan.trial.subscribe', 'Subscribe to Pro')}
+        buttonText={t("plan.trial.subscribe", "Subscribe to Pro")}
         buttonIcon="credit-card-rounded"
         onButtonClick={handleOpenCheckout}
         onDismiss={handleDismiss}
@@ -88,7 +88,7 @@ export function TrialStatusBanner() {
         buttonVariant="white"
         buttonTextColor="var(--mantine-color-dark-9)"
         closeIconColor="rgba(255, 255, 255, 0.7)"
-      />
+      />,
     );
 
     return () => {
@@ -112,7 +112,7 @@ export function TrialStatusBanner() {
           creditsPack={null}
           planName="Pro"
           onSuccess={handleCheckoutSuccess}
-          onError={(error) => console.error('Checkout error:', error)}
+          onError={(error) => console.error("Checkout error:", error)}
           isTrialConversion={true}
         />
       )}
diff --git a/frontend/src/saas/components/shared/charts/StackedBarChart.tsx b/frontend/src/saas/components/shared/charts/StackedBarChart.tsx
index 207f01f184..f79675b081 100644
--- a/frontend/src/saas/components/shared/charts/StackedBarChart.tsx
+++ b/frontend/src/saas/components/shared/charts/StackedBarChart.tsx
@@ -1,19 +1,19 @@
-import React, { useEffect, useMemo, useRef, useCallback, useId } from 'react';
-import { Group, Loader, Text } from '@mantine/core';
-import * as d3 from 'd3';
-import { StackedBarChartProps, TooltipData, FractionData } from '@app/types/charts';
-import { generateTooltipHTML } from '@app/components/shared/charts/stackedBarChart/StackedBarTooltip';
-import { detectTheme, getChartThemeVars } from '@app/components/shared/charts/utils/themeUtils';
-import { createTooltipPositioner } from '@app/components/shared/charts/utils/tooltipUtils';
-import { createRoundedRectPath, createScale } from '@app/components/shared/charts/utils/d3Utils';
+import React, { useEffect, useMemo, useRef, useCallback, useId } from "react";
+import { Group, Loader, Text } from "@mantine/core";
+import * as d3 from "d3";
+import { StackedBarChartProps, TooltipData, FractionData } from "@app/types/charts";
+import { generateTooltipHTML } from "@app/components/shared/charts/stackedBarChart/StackedBarTooltip";
+import { detectTheme, getChartThemeVars } from "@app/components/shared/charts/utils/themeUtils";
+import { createTooltipPositioner } from "@app/components/shared/charts/utils/tooltipUtils";
+import { createRoundedRectPath, createScale } from "@app/components/shared/charts/utils/d3Utils";
 
-export default function StackedBarChart({ 
-  fractions, 
-  width = 640, 
-  height = 22, 
+export default function StackedBarChart({
+  fractions,
+  width = 640,
+  height = 22,
   showLegend = true,
-  className = '',
-  tooltipPosition = 'top',
+  className = "",
+  tooltipPosition = "top",
   loading = false,
   animate = true,
   animationDurationMs = 900,
@@ -32,96 +32,102 @@ export default function StackedBarChart({
   // Memoize tooltip positioner
   const tooltipPositioner = useMemo(() => createTooltipPositioner(tooltipPosition), [tooltipPosition]);
 
-  const positionTooltip = useCallback((event: MouseEvent) => {
-    const tooltip = tooltipRef.current;
-    if (!tooltip) return;
-    tooltipPositioner.positionTooltip(event, tooltip, containerRef.current!);
-  }, [tooltipPositioner]);
+  const positionTooltip = useCallback(
+    (event: MouseEvent) => {
+      const tooltip = tooltipRef.current;
+      if (!tooltip) return;
+      tooltipPositioner.positionTooltip(event, tooltip, containerRef.current!);
+    },
+    [tooltipPositioner],
+  );
 
-  const setTooltipContent = useCallback((labelHtml: string) => {
-    const tooltip = tooltipRef.current;
-    if (!tooltip) return;
-    tooltip.innerHTML = labelHtml;
-    tooltip.style.background = themeVars.background;
-    tooltip.style.color = themeVars.textPrimary;
-    tooltip.style.border = themeVars.border;
-    tooltip.style.boxShadow = themeVars.boxShadow;
-    tooltip.style.padding = '8px 10px';
-    tooltip.style.fontSize = '12px';
-    tooltip.style.lineHeight = '1.25';
-    tooltip.style.borderRadius = '8px';
-  }, [themeVars]);
+  const setTooltipContent = useCallback(
+    (labelHtml: string) => {
+      const tooltip = tooltipRef.current;
+      if (!tooltip) return;
+      tooltip.innerHTML = labelHtml;
+      tooltip.style.background = themeVars.background;
+      tooltip.style.color = themeVars.textPrimary;
+      tooltip.style.border = themeVars.border;
+      tooltip.style.boxShadow = themeVars.boxShadow;
+      tooltip.style.padding = "8px 10px";
+      tooltip.style.fontSize = "12px";
+      tooltip.style.lineHeight = "1.25";
+      tooltip.style.borderRadius = "8px";
+    },
+    [themeVars],
+  );
 
   const hideTooltip = useCallback(() => {
     const tooltip = tooltipRef.current;
     if (!tooltip) return;
-    tooltip.style.opacity = '0';
+    tooltip.style.opacity = "0";
   }, []);
 
   useEffect(() => {
     const container = containerRef.current;
     if (!container) return;
-    container.innerHTML = '';
+    container.innerHTML = "";
 
     // Calculate total capacity (sum of all denominators)
     const totalCapacity = fractions.reduce((sum: number, fraction: FractionData) => sum + fraction.denominator, 0);
-    
+
     if (totalCapacity === 0 && !loading) return;
 
     // Create data for the bar segments
     const data = fractions.map((fraction: FractionData) => ({
       ...fraction,
       value: fraction.numerator,
-      remaining: fraction.denominator - fraction.numerator
+      remaining: fraction.denominator - fraction.numerator,
     }));
 
     const radius = 8;
 
     const svg = d3
       .select(container)
-      .append('svg')
-      .attr('width', '100%')
-      .attr('height', height)
-      .attr('viewBox', `0 0 ${width} ${height}`)
-      .attr('role', ariaLabel ? 'img' : null)
-      .attr('aria-label', ariaLabel || null);
+      .append("svg")
+      .attr("width", "100%")
+      .attr("height", height)
+      .attr("viewBox", `0 0 ${width} ${height}`)
+      .attr("role", ariaLabel ? "img" : null)
+      .attr("aria-label", ariaLabel || null);
 
     const x = createScale([0, totalCapacity], [0, width]);
     let cursor = 0;
-    const g = svg.append('g');
+    const g = svg.append("g");
 
     // Skip drawing the bar visuals entirely when loading to avoid gray bar under spinner
     if (!loading) {
       // Create a single rounded rectangle for the entire bar background
       const totalBarWidth = x(totalCapacity);
-      g.append('rect')
-        .attr('x', 0)
-        .attr('y', 0)
-        .attr('width', totalBarWidth)
-        .attr('height', height)
-        .attr('rx', radius)
-        .attr('ry', radius)
-        .attr('fill', themeVars.inactive)
-        .attr('stroke', themeVars.cardBorder);
+      g.append("rect")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", totalBarWidth)
+        .attr("height", height)
+        .attr("rx", radius)
+        .attr("ry", radius)
+        .attr("fill", themeVars.inactive)
+        .attr("stroke", themeVars.cardBorder);
 
       // Define a clipPath that will reveal the used portion from left to right
-      const defs = svg.append('defs');
+      const defs = svg.append("defs");
       const clipRect = defs
-        .append('clipPath')
-        .attr('id', clipId)
-        .append('rect')
-        .attr('x', 0)
-        .attr('y', 0)
-        .attr('width', 0)
-        .attr('height', height)
-        .attr('rx', radius)
-        .attr('ry', radius);
+        .append("clipPath")
+        .attr("id", clipId)
+        .append("rect")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", 0)
+        .attr("height", height)
+        .attr("rx", radius)
+        .attr("ry", radius);
 
       // Group to hold the used segments and apply clip-path
-      const usedGroup = svg.append('g').attr('clip-path', `url(#${clipId})`);
+      const usedGroup = svg.append("g").attr("clip-path", `url(#${clipId})`);
 
       // Render used segments on top of the background
-      data.forEach((fraction: typeof data[number], index: number) => {
+      data.forEach((fraction: (typeof data)[number], index: number) => {
         if (fraction.value <= 0) return;
 
         const segWidth = x(fraction.value);
@@ -133,131 +139,145 @@ export default function StackedBarChart({
 
         if (isFirst && isLast) {
           // Single segment: fully rounded
-          usedGroup.append('rect')
-            .attr('x', xPos)
-            .attr('y', 0)
-            .attr('width', segWidth)
-            .attr('height', height)
-            .attr('rx', radius)
-            .attr('ry', radius)
-            .attr('fill', fraction.color);
+          usedGroup
+            .append("rect")
+            .attr("x", xPos)
+            .attr("y", 0)
+            .attr("width", segWidth)
+            .attr("height", height)
+            .attr("rx", radius)
+            .attr("ry", radius)
+            .attr("fill", fraction.color);
         } else if (isFirst) {
           // First segment: rounded on left side only
           const path = createRoundedRectPath(xPos, 0, segWidth, height, radius, {
             topLeft: true,
             topRight: false,
             bottomLeft: true,
-            bottomRight: false
+            bottomRight: false,
           });
-          usedGroup.append('path')
-            .attr('d', path)
-            .attr('fill', fraction.color);
+          usedGroup.append("path").attr("d", path).attr("fill", fraction.color);
         } else if (isLast) {
           // Last segment: rounded on right side only
           const path = createRoundedRectPath(xPos, 0, segWidth, height, radius, {
             topLeft: false,
             topRight: true,
             bottomLeft: false,
-            bottomRight: true
+            bottomRight: true,
           });
-          usedGroup.append('path')
-            .attr('d', path)
-            .attr('fill', fraction.color);
+          usedGroup.append("path").attr("d", path).attr("fill", fraction.color);
         } else {
           // Middle segments: no rounded edges
-          usedGroup.append('rect')
-            .attr('x', xPos)
-            .attr('y', 0)
-            .attr('width', segWidth)
-            .attr('height', height)
-            .attr('fill', fraction.color);
+          usedGroup
+            .append("rect")
+            .attr("x", xPos)
+            .attr("y", 0)
+            .attr("width", segWidth)
+            .attr("height", height)
+            .attr("fill", fraction.color);
         }
       });
 
       // Add a transparent overlay for hover events on the entire bar (outside clip path)
-      svg.append('rect')
-        .attr('x', 0)
-        .attr('y', 0)
-        .attr('width', totalBarWidth)
-        .attr('height', height)
-        .attr('rx', radius)
-        .attr('ry', radius)
-        .attr('fill', 'transparent')
-        .style('pointer-events', 'all')
-        .on('mouseenter', (event: MouseEvent) => {
+      svg
+        .append("rect")
+        .attr("x", 0)
+        .attr("y", 0)
+        .attr("width", totalBarWidth)
+        .attr("height", height)
+        .attr("rx", radius)
+        .attr("ry", radius)
+        .attr("fill", "transparent")
+        .style("pointer-events", "all")
+        .on("mouseenter", (event: MouseEvent) => {
           const tooltipData: TooltipData = { fractions: data, isDark: theme.isDark };
           const html = generateTooltipHTML(tooltipData);
           setTooltipContent(html);
           const tooltip = tooltipRef.current;
-          if (tooltip) tooltip.style.opacity = '1';
+          if (tooltip) tooltip.style.opacity = "1";
           positionTooltip(event as unknown as MouseEvent);
         })
-        .on('mousemove', (event: MouseEvent) => positionTooltip(event as unknown as MouseEvent))
-        .on('mouseleave', hideTooltip);
+        .on("mousemove", (event: MouseEvent) => positionTooltip(event as unknown as MouseEvent))
+        .on("mouseleave", hideTooltip);
 
       // Animate reveal of used segments (only on first load, not on re-renders)
-      const totalUsed = data.reduce((sum: number, f: typeof data[number]) => sum + f.value, 0);
+      const totalUsed = data.reduce((sum: number, f: (typeof data)[number]) => sum + f.value, 0);
       const revealTo = x(totalUsed);
       if (animate && !hasAnimatedRef.current) {
-        clipRect.transition().duration(animationDurationMs).attr('width', revealTo);
+        clipRect.transition().duration(animationDurationMs).attr("width", revealTo);
         hasAnimatedRef.current = true;
       } else {
-        clipRect.attr('width', revealTo);
+        clipRect.attr("width", revealTo);
       }
     }
 
-    return () => { container.innerHTML = ''; };
-  }, [fractions, width, height, tooltipPosition, loading, animate, animationDurationMs, clipId, themeVars, setTooltipContent, hideTooltip, positionTooltip]);
+    return () => {
+      container.innerHTML = "";
+    };
+  }, [
+    fractions,
+    width,
+    height,
+    tooltipPosition,
+    loading,
+    animate,
+    animationDurationMs,
+    clipId,
+    themeVars,
+    setTooltipContent,
+    hideTooltip,
+    positionTooltip,
+  ]);
 
   return (
     <div className={className}>
-      <div style={{ position: 'relative' }}>
+      <div style={{ position: "relative" }}>
         <div ref={containerRef} />
         <div
           ref={tooltipRef}
-          style={{ 
-            position: 'absolute', 
-            left: 0, 
-            top: 0, 
-            pointerEvents: 'none', 
-            opacity: 0, 
-            transition: 'opacity 120ms ease',
-            zIndex: 1000
+          style={{
+            position: "absolute",
+            left: 0,
+            top: 0,
+            pointerEvents: "none",
+            opacity: 0,
+            transition: "opacity 120ms ease",
+            zIndex: 1000,
           }}
         />
         {loading && (
-          <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+          <div style={{ position: "absolute", inset: 0, display: "flex", alignItems: "center", justifyContent: "center" }}>
             <Loader size="sm" color="blue" />
           </div>
         )}
       </div>
-      
+
       {showLegend && (
         <Group gap="lg" mt="sm">
           {fractions.map((fraction: FractionData, index: number) => (
             <Group key={index} gap={6}>
-              <span 
-                style={{ 
-                  width: 10, 
-                  height: 10, 
-                  background: fraction.color, 
-                  display: 'inline-block', 
-                  borderRadius: 2 
-                }} 
+              <span
+                style={{
+                  width: 10,
+                  height: 10,
+                  background: fraction.color,
+                  display: "inline-block",
+                  borderRadius: 2,
+                }}
               />
               <Text size="sm">{fraction.name}</Text>
             </Group>
           ))}
           <Group gap={6}>
-            <span 
-              style={{ 
-                width: 10, 
-                height: 10, 
-                background: themeVars.inactive, 
-                display: 'inline-block', 
-                borderRadius: 2, 
-                outline: `1px solid ${themeVars.cardBorder}` 
-              }} 
+            <span
+              style={{
+                width: 10,
+                height: 10,
+                background: themeVars.inactive,
+                display: "inline-block",
+                borderRadius: 2,
+                outline: `1px solid ${themeVars.cardBorder}`,
+              }}
             />
             <Text size="sm">Remaining</Text>
           </Group>
diff --git a/frontend/src/saas/components/shared/charts/stackedBarChart/StackedBarTooltip.tsx b/frontend/src/saas/components/shared/charts/stackedBarChart/StackedBarTooltip.tsx
index 4f4ada2ce4..442083739d 100644
--- a/frontend/src/saas/components/shared/charts/stackedBarChart/StackedBarTooltip.tsx
+++ b/frontend/src/saas/components/shared/charts/stackedBarChart/StackedBarTooltip.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import { TooltipData } from '@app/types/charts';
+import React from "react";
+import { TooltipData } from "@app/types/charts";
 
 interface StackedBarTooltipProps {
   data: TooltipData;
@@ -9,16 +9,18 @@ export default function StackedBarTooltip({ data }: StackedBarTooltipProps) {
   const { fractions } = data;
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '6px', whiteSpace: 'nowrap' }}>
+    <div style={{ display: "flex", flexDirection: "column", gap: "6px", whiteSpace: "nowrap" }}>
       {fractions.map((f, index) => (
-        <div key={index} style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
-          <span style={{ 
-            display: 'inline-block', 
-            width: '10px', 
-            height: '10px', 
-            background: f.color, 
-            borderRadius: '2px' 
-          }}></span>
+        <div key={index} style={{ display: "flex", gap: "8px", alignItems: "center" }}>
+          <span
+            style={{
+              display: "inline-block",
+              width: "10px",
+              height: "10px",
+              background: f.color,
+              borderRadius: "2px",
+            }}
+          ></span>
           <span>
             <strong>{f.name}</strong> — {f.numeratorLabel}: {f.numerator} · {f.denominatorLabel}: {f.denominator - f.numerator}
           </span>
@@ -30,14 +32,18 @@ export default function StackedBarTooltip({ data }: StackedBarTooltipProps) {
 
 export function generateTooltipHTML(data: TooltipData): string {
   const { fractions } = data;
-  
+
   return `
     <div style="display:flex;flex-direction:column;gap:6px;white-space:nowrap;">
-      ${fractions.map(f => `
+      ${fractions
+        .map(
+          (f) => `
         <div style="display:flex;gap:8px;align-items:center;">
           <span style="display:inline-block;width:10px;height:10px;background:${f.color};border-radius:2px"></span>
           <span><strong>${f.name}</strong> — ${f.numeratorLabel}: ${f.numerator} · ${f.denominatorLabel}: ${Math.max(0, f.denominator - f.numerator)}</span>
         </div>
-      `).join('')}
+      `,
+        )
+        .join("")}
     </div>`;
 }
diff --git a/frontend/src/saas/components/shared/charts/utils/d3Utils.ts b/frontend/src/saas/components/shared/charts/utils/d3Utils.ts
index ddeed92197..39e56a188a 100644
--- a/frontend/src/saas/components/shared/charts/utils/d3Utils.ts
+++ b/frontend/src/saas/components/shared/charts/utils/d3Utils.ts
@@ -2,7 +2,7 @@
  * Reusable D3 utility functions for chart creation
  */
 
-import * as d3 from 'd3';
+import * as d3 from "d3";
 
 export interface ChartDimensions {
   width: number;
@@ -28,17 +28,17 @@ export interface AnimationConfig {
  * @returns The created SVG selection
  */
 export function createSVG(
-  container: HTMLElement, 
+  container: HTMLElement,
   dimensions: ChartDimensions,
-  className?: string
+  className?: string,
 ): d3.Selection<SVGSVGElement, unknown, null, undefined> {
   const svg = d3
     .select(container)
-    .append('svg')
-    .attr('width', '100%')
-    .attr('height', dimensions.height)
-    .attr('viewBox', `0 0 ${dimensions.width} ${dimensions.height}`)
-    .attr('class', className || '');
+    .append("svg")
+    .attr("width", "100%")
+    .attr("height", dimensions.height)
+    .attr("viewBox", `0 0 ${dimensions.width} ${dimensions.height}`)
+    .attr("class", className || "");
 
   return svg;
 }
@@ -53,17 +53,17 @@ export function createSVG(
 export function createClipPath(
   svg: d3.Selection<SVGSVGElement, unknown, null, undefined>,
   clipId: string,
-  dimensions: ChartDimensions
+  dimensions: ChartDimensions,
 ): d3.Selection<SVGRectElement, unknown, null, undefined> {
-  const defs = svg.append('defs');
+  const defs = svg.append("defs");
   const clipRect = defs
-    .append('clipPath')
-    .attr('id', clipId)
-    .append('rect')
-    .attr('x', 0)
-    .attr('y', 0)
-    .attr('width', 0)
-    .attr('height', dimensions.height);
+    .append("clipPath")
+    .attr("id", clipId)
+    .append("rect")
+    .attr("x", 0)
+    .attr("y", 0)
+    .attr("width", 0)
+    .attr("height", dimensions.height);
 
   return clipRect;
 }
@@ -77,13 +77,13 @@ export function createClipPath(
 export function animateClipReveal(
   clipRect: d3.Selection<SVGRectElement, unknown, null, undefined>,
   targetWidth: number,
-  config: AnimationConfig
+  config: AnimationConfig,
 ): void {
   clipRect
     .transition()
     .duration(config.duration)
     .ease(config.easing || d3.easeCubicInOut)
-    .attr('width', targetWidth);
+    .attr("width", targetWidth);
 }
 
 /**
@@ -102,48 +102,48 @@ export function createRoundedRectPath(
   width: number,
   height: number,
   radius: number,
-  corners: { topLeft?: boolean; topRight?: boolean; bottomLeft?: boolean; bottomRight?: boolean } = {}
+  corners: { topLeft?: boolean; topRight?: boolean; bottomLeft?: boolean; bottomRight?: boolean } = {},
 ): string {
   const { topLeft = true, topRight = true, bottomLeft = true, bottomRight = true } = corners;
-  
-  if (width <= 0 || height <= 0) return '';
-  
+
+  if (width <= 0 || height <= 0) return "";
+
   const topLeftRadius = topLeft ? radius : 0;
   const topRightRadius = topRight ? radius : 0;
   const bottomRightRadius = bottomRight ? radius : 0;
   const bottomLeftRadius = bottomLeft ? radius : 0;
-  
+
   let path = `M ${x + topLeftRadius} ${y}`;
-  
+
   if (topRight) {
     path += ` L ${x + width - topRightRadius} ${y}`;
     path += ` A ${topRightRadius} ${topRightRadius} 0 0 1 ${x + width} ${y + topRightRadius}`;
   } else {
     path += ` L ${x + width} ${y}`;
   }
-  
+
   if (bottomRight) {
     path += ` L ${x + width} ${y + height - bottomRightRadius}`;
     path += ` A ${bottomRightRadius} ${bottomRightRadius} 0 0 1 ${x + width - bottomRightRadius} ${y + height}`;
   } else {
     path += ` L ${x + width} ${y + height}`;
   }
-  
+
   if (bottomLeft) {
     path += ` L ${x + bottomLeftRadius} ${y + height}`;
     path += ` A ${bottomLeftRadius} ${bottomLeftRadius} 0 0 1 ${x} ${y + height - bottomLeftRadius}`;
   } else {
     path += ` L ${x} ${y + height}`;
   }
-  
+
   if (topLeft) {
     path += ` L ${x} ${y + topLeftRadius}`;
     path += ` A ${topLeftRadius} ${topLeftRadius} 0 0 1 ${x + topLeftRadius} ${y}`;
   } else {
     path += ` L ${x} ${y}`;
   }
-  
-  return path + ' Z';
+
+  return path + " Z";
 }
 
 /**
@@ -162,10 +162,7 @@ export function createScale(domain: [number, number], range: [number, number]) {
  * @param wait The wait time in milliseconds
  * @returns Debounced function
  */
-export function debounce<T extends (...args: unknown[]) => unknown>(
-  func: T,
-  wait: number
-): (...args: Parameters<T>) => void {
+export function debounce<T extends (...args: unknown[]) => unknown>(func: T, wait: number): (...args: Parameters<T>) => void {
   let timeout: NodeJS.Timeout;
   return (...args: Parameters<T>) => {
     clearTimeout(timeout);
diff --git a/frontend/src/saas/components/shared/charts/utils/themeUtils.ts b/frontend/src/saas/components/shared/charts/utils/themeUtils.ts
index 581185ef19..17b10441fb 100644
--- a/frontend/src/saas/components/shared/charts/utils/themeUtils.ts
+++ b/frontend/src/saas/components/shared/charts/utils/themeUtils.ts
@@ -13,18 +13,17 @@ export interface ThemeInfo {
  * @returns ThemeInfo object with theme detection results
  */
 export function detectTheme(): ThemeInfo {
-  const rootEl = typeof document !== 'undefined' ? document.documentElement : null;
-  const schemeAttr = rootEl?.getAttribute('data-mantine-color-scheme');
-  const prefersDark = typeof window !== 'undefined' && 
-    window.matchMedia && 
-    window.matchMedia('(prefers-color-scheme: dark)').matches;
-  
-  const isDark = schemeAttr ? schemeAttr === 'dark' : prefersDark;
-  
+  const rootEl = typeof document !== "undefined" ? document.documentElement : null;
+  const schemeAttr = rootEl?.getAttribute("data-mantine-color-scheme");
+  const prefersDark =
+    typeof window !== "undefined" && window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
+
+  const isDark = schemeAttr ? schemeAttr === "dark" : prefersDark;
+
   return {
     isDark,
     schemeAttr,
-    prefersDark
+    prefersDark,
   };
 }
 
@@ -35,12 +34,12 @@ export function detectTheme(): ThemeInfo {
  */
 export function getChartThemeVars(isDark: boolean) {
   return {
-    background: 'var(--bg-surface)',
-    textPrimary: 'var(--text-primary)',
-    border: isDark ? '1px solid var(--border-subtle)' : '1px solid transparent',
-    boxShadow: isDark ? 'none' : 'var(--shadow-md)',
-    inactive: 'var(--usage-inactive)',
-    cardBorder: 'var(--api-keys-card-border)'
+    background: "var(--bg-surface)",
+    textPrimary: "var(--text-primary)",
+    border: isDark ? "1px solid var(--border-subtle)" : "1px solid transparent",
+    boxShadow: isDark ? "none" : "var(--shadow-md)",
+    inactive: "var(--usage-inactive)",
+    cardBorder: "var(--api-keys-card-border)",
   };
 }
 
@@ -51,13 +50,13 @@ export function getChartThemeVars(isDark: boolean) {
  */
 export function applyTooltipStyles(tooltipElement: HTMLElement, isDark: boolean) {
   const themeVars = getChartThemeVars(isDark);
-  
+
   tooltipElement.style.background = themeVars.background;
   tooltipElement.style.color = themeVars.textPrimary;
   tooltipElement.style.border = themeVars.border;
   tooltipElement.style.boxShadow = themeVars.boxShadow;
-  tooltipElement.style.padding = '8px 10px';
-  tooltipElement.style.fontSize = '12px';
-  tooltipElement.style.lineHeight = '1.25';
-  tooltipElement.style.borderRadius = '8px';
+  tooltipElement.style.padding = "8px 10px";
+  tooltipElement.style.fontSize = "12px";
+  tooltipElement.style.lineHeight = "1.25";
+  tooltipElement.style.borderRadius = "8px";
 }
diff --git a/frontend/src/saas/components/shared/charts/utils/tooltipUtils.ts b/frontend/src/saas/components/shared/charts/utils/tooltipUtils.ts
index d50f376ca2..518f3f3cab 100644
--- a/frontend/src/saas/components/shared/charts/utils/tooltipUtils.ts
+++ b/frontend/src/saas/components/shared/charts/utils/tooltipUtils.ts
@@ -2,7 +2,7 @@
  * Utility functions for tooltip positioning and management in D3 charts
  */
 
-export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+export type TooltipPosition = "top" | "bottom" | "left" | "right";
 
 export interface TooltipPositioner {
   positionTooltip: (event: MouseEvent, tooltip: HTMLElement, container: HTMLElement) => void;
@@ -19,36 +19,35 @@ export function createTooltipPositioner(position: TooltipPosition): TooltipPosit
     const bounds = container.getBoundingClientRect();
     const offsetX = event.clientX - bounds.left;
     const offsetY = event.clientY - bounds.top;
-    
+
     // Get tooltip dimensions after content is set
     const tooltipHeight = tooltip.offsetHeight;
     const tooltipWidth = tooltip.offsetWidth;
     const gap = 16; // 1rem gap
-    
+
     // Position tooltip based on the specified position
     switch (position) {
-      case 'top':
+      case "top":
         tooltip.style.left = `${Math.min(bounds.width - tooltipWidth - 10, Math.max(10, offsetX - tooltipWidth / 2))}px`;
         tooltip.style.top = `${offsetY - tooltipHeight - gap}px`;
         break;
-      case 'bottom':
+      case "bottom":
         tooltip.style.left = `${Math.min(bounds.width - tooltipWidth - 10, Math.max(10, offsetX - tooltipWidth / 2))}px`;
         tooltip.style.top = `${offsetY + gap}px`;
         break;
-      case 'left':
+      case "left":
         tooltip.style.left = `${Math.max(10, offsetX - tooltipWidth - gap)}px`;
         tooltip.style.top = `${offsetY - tooltipHeight / 2}px`;
         break;
-      case 'right':
+      case "right":
         tooltip.style.left = `${Math.min(bounds.width - tooltipWidth - 10, offsetX + gap)}px`;
         tooltip.style.top = `${offsetY - tooltipHeight / 2}px`;
         break;
     }
-    
   };
 
   const hideTooltip = (tooltip: HTMLElement) => {
-    tooltip.style.opacity = '0';
+    tooltip.style.opacity = "0";
   };
 
   return { positionTooltip, hideTooltip };
@@ -60,15 +59,15 @@ export function createTooltipPositioner(position: TooltipPosition): TooltipPosit
  * @returns The created tooltip element
  */
 export function createTooltipElement(container: HTMLElement): HTMLElement {
-  const tooltip = document.createElement('div');
-  tooltip.style.position = 'absolute';
-  tooltip.style.left = '0';
-  tooltip.style.top = '0';
-  tooltip.style.pointerEvents = 'none';
-  tooltip.style.opacity = '0';
-  tooltip.style.transition = 'opacity 120ms ease';
-  tooltip.style.zIndex = '1000';
-  
+  const tooltip = document.createElement("div");
+  tooltip.style.position = "absolute";
+  tooltip.style.left = "0";
+  tooltip.style.top = "0";
+  tooltip.style.pointerEvents = "none";
+  tooltip.style.opacity = "0";
+  tooltip.style.transition = "opacity 120ms ease";
+  tooltip.style.zIndex = "1000";
+
   container.appendChild(tooltip);
   return tooltip;
 }
diff --git a/frontend/src/saas/components/shared/config/ProfilePictureCropper.tsx b/frontend/src/saas/components/shared/config/ProfilePictureCropper.tsx
index 1fbbd461b0..086d4eaa38 100644
--- a/frontend/src/saas/components/shared/config/ProfilePictureCropper.tsx
+++ b/frontend/src/saas/components/shared/config/ProfilePictureCropper.tsx
@@ -1,9 +1,9 @@
-import React, { useState, useCallback, useEffect } from 'react';
-import { Modal, Button, Stack, Slider, Alert, Text, Box } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import Cropper from 'react-easy-crop';
-import { getCroppedImage, type Area } from '@app/utils/cropImage';
-import { Z_INDEX_OVER_CONFIG_MODAL } from '@app/styles/zIndex';
+import React, { useState, useCallback, useEffect } from "react";
+import { Modal, Button, Stack, Slider, Alert, Text, Box } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import Cropper from "react-easy-crop";
+import { getCroppedImage, type Area } from "@app/utils/cropImage";
+import { Z_INDEX_OVER_CONFIG_MODAL } from "@app/styles/zIndex";
 
 interface ProfilePictureCropperProps {
   file: File | null;
@@ -12,12 +12,7 @@ interface ProfilePictureCropperProps {
   onCropComplete: (croppedBlob: Blob) => void;
 }
 
-export const ProfilePictureCropper: React.FC<ProfilePictureCropperProps> = ({
-  file,
-  opened,
-  onClose,
-  onCropComplete,
-}) => {
+export const ProfilePictureCropper: React.FC<ProfilePictureCropperProps> = ({ file, opened, onClose, onCropComplete }) => {
   const { t } = useTranslation();
 
   // State management
@@ -41,7 +36,12 @@ export const ProfilePictureCropper: React.FC<ProfilePictureCropperProps> = ({
       setError(null);
     };
     reader.onerror = () => {
-      setError(t('config.account.profilePicture.cropper.invalidImage', 'Invalid image file. Please select a valid PNG, JPG, or WebP file.'));
+      setError(
+        t(
+          "config.account.profilePicture.cropper.invalidImage",
+          "Invalid image file. Please select a valid PNG, JPG, or WebP file.",
+        ),
+      );
     };
     reader.readAsDataURL(file);
 
@@ -75,12 +75,9 @@ export const ProfilePictureCropper: React.FC<ProfilePictureCropperProps> = ({
   }, []);
 
   // Called when crop is complete (stores the crop area in pixels)
-  const onCropCompleteCallback = useCallback(
-    (_croppedArea: Area, croppedAreaPixels: Area) => {
-      setCroppedAreaPixels(croppedAreaPixels);
-    },
-    []
-  );
+  const onCropCompleteCallback = useCallback((_croppedArea: Area, croppedAreaPixels: Area) => {
+    setCroppedAreaPixels(croppedAreaPixels);
+  }, []);
 
   // Process and save the cropped image
   const handleSave = async () => {
@@ -100,9 +97,9 @@ export const ProfilePictureCropper: React.FC<ProfilePictureCropperProps> = ({
       if (croppedBlob.size > maxSize) {
         setError(
           t(
-            'config.account.profilePicture.cropper.sizeErrorAfterCrop',
-            'Cropped image is too large. Please zoom out or crop a smaller area.'
-          )
+            "config.account.profilePicture.cropper.sizeErrorAfterCrop",
+            "Cropped image is too large. Please zoom out or crop a smaller area.",
+          ),
         );
         setProcessing(false);
         return;
@@ -112,13 +109,8 @@ export const ProfilePictureCropper: React.FC<ProfilePictureCropperProps> = ({
       onCropComplete(croppedBlob);
       onClose();
     } catch (err) {
-      console.error('Error cropping image:', err);
-      setError(
-        t(
-          'config.account.profilePicture.cropper.cropError',
-          'Failed to crop image. Please try again.'
-        )
-      );
+      console.error("Error cropping image:", err);
+      setError(t("config.account.profilePicture.cropper.cropError", "Failed to crop image. Please try again."));
     } finally {
       setProcessing(false);
     }
@@ -128,7 +120,7 @@ export const ProfilePictureCropper: React.FC<ProfilePictureCropperProps> = ({
     <Modal
       opened={opened}
       onClose={onClose}
-      title={t('config.account.profilePicture.cropper.title', 'Crop Profile Picture')}
+      title={t("config.account.profilePicture.cropper.title", "Crop Profile Picture")}
       size="lg"
       centered
       zIndex={Z_INDEX_OVER_CONFIG_MODAL}
@@ -141,7 +133,7 @@ export const ProfilePictureCropper: React.FC<ProfilePictureCropperProps> = ({
         )}
 
         {/* Cropper area */}
-        <Box style={{ position: 'relative', width: '100%', height: 400 }}>
+        <Box style={{ position: "relative", width: "100%", height: 400 }}>
           {imageSrc && (
             <Cropper
               image={imageSrc}
@@ -158,27 +150,20 @@ export const ProfilePictureCropper: React.FC<ProfilePictureCropperProps> = ({
         {/* Zoom slider */}
         <Stack gap={4}>
           <Text size="sm" fw={500}>
-            {t('config.account.profilePicture.cropper.zoom', 'Zoom')}
+            {t("config.account.profilePicture.cropper.zoom", "Zoom")}
           </Text>
-          <Slider
-            value={zoom}
-            min={1}
-            max={3}
-            step={0.1}
-            onChange={setZoom}
-            disabled={processing}
-          />
+          <Slider value={zoom} min={1} max={3} step={0.1} onChange={setZoom} disabled={processing} />
         </Stack>
 
         {/* Action buttons */}
-        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '8px' }}>
+        <div style={{ display: "flex", justifyContent: "flex-end", gap: "8px" }}>
           <Button variant="subtle" onClick={onClose} disabled={processing}>
-            {t('common.cancel', 'Cancel')}
+            {t("common.cancel", "Cancel")}
           </Button>
           <Button onClick={handleSave} loading={processing}>
             {processing
-              ? t('config.account.profilePicture.cropper.processing', 'Processing crop...')
-              : t('config.account.profilePicture.cropper.save', 'Save Cropped Image')}
+              ? t("config.account.profilePicture.cropper.processing", "Processing crop...")
+              : t("config.account.profilePicture.cropper.save", "Save Cropped Image")}
           </Button>
         </div>
       </Stack>
diff --git a/frontend/src/saas/components/shared/config/configSections/ApiKeys.tsx b/frontend/src/saas/components/shared/config/configSections/ApiKeys.tsx
index 595ea38914..c286948ab4 100644
--- a/frontend/src/saas/components/shared/config/configSections/ApiKeys.tsx
+++ b/frontend/src/saas/components/shared/config/configSections/ApiKeys.tsx
@@ -40,7 +40,7 @@ export default function ApiKeys() {
   };
 
   const goToAccount = () => {
-    window.dispatchEvent(new CustomEvent('appConfig:navigate', { detail: { key: 'overview' } }));
+    window.dispatchEvent(new CustomEvent("appConfig:navigate", { detail: { key: "overview" } }));
   };
 
   const showUsage = Boolean(credits);
@@ -48,67 +48,83 @@ export default function ApiKeys() {
   return (
     <Stack gap={20} p={0}>
       {showUsage && (
-        <UsageSection 
+        <UsageSection
           apiUsage={credits!}
           obscured={Boolean(!apiKey && hasAttempted && !isAnonymous)}
-          overlayMessage={t('config.apiKeys.overlayMessage', 'Generate a key to see credits and available credits')}
+          overlayMessage={t("config.apiKeys.overlayMessage", "Generate a key to see credits and available credits")}
           loading={creditsLoading}
         />
       )}
-      
+
       {!isAnonymous && apiKeyError && (
         <Text size="sm" c="red.5">
-          {t('config.apiKeys.generateError', "We couldn't generate your API key.")} {" "}
+          {t("config.apiKeys.generateError", "We couldn't generate your API key.")}{" "}
           <Anchor component="button" underline="always" onClick={refetch} c="red.4">
-            {t('common.retry', 'Retry')}
+            {t("common.retry", "Retry")}
           </Anchor>
         </Text>
       )}
 
       {isAnonymous ? (
-        <Paper radius="md" p={18} style={{ background: "var(--api-keys-card-bg)", border: "1px solid var(--api-keys-card-border)", boxShadow: "0 2px 8px var(--api-keys-card-shadow)" }}>
+        <Paper
+          radius="md"
+          p={18}
+          style={{
+            background: "var(--api-keys-card-bg)",
+            border: "1px solid var(--api-keys-card-border)",
+            boxShadow: "0 2px 8px var(--api-keys-card-shadow)",
+          }}
+        >
           <Stack gap={10}>
-            <Text fw={500}>{t('config.apiKeys.label', 'API Key')}</Text>
-            <Group justify="space-between" wrap="nowrap" align="center" style={{ gap: '1rem' }}>
+            <Text fw={500}>{t("config.apiKeys.label", "API Key")}</Text>
+            <Group justify="space-between" wrap="nowrap" align="center" style={{ gap: "1rem" }}>
               <Text size="sm" c="dimmed" style={{ flex: 1 }}>
-                {t('config.apiKeys.guestInfo', 'Guest users do not receive API keys. Create an account to get an API key you can use in your applications.')}
+                {t(
+                  "config.apiKeys.guestInfo",
+                  "Guest users do not receive API keys. Create an account to get an API key you can use in your applications.",
+                )}
               </Text>
               <Button size="sm" onClick={goToAccount}>
-                {t('config.apiKeys.goToAccount', 'Go to Account')}
+                {t("config.apiKeys.goToAccount", "Go to Account")}
               </Button>
             </Group>
           </Stack>
         </Paper>
+      ) : apiKeyLoading ? (
+        <>
+          <Text size="sm" c="dimmed" style={{ marginBottom: 8 }}>
+            {t(
+              "config.apiKeys.description",
+              "Your API key for accessing Stirling's suite of PDF tools. Copy it to your project or refresh to generate a new one.",
+            )}
+          </Text>
+          <div
+            style={{
+              padding: 18,
+              borderRadius: 12,
+              background: "var(--api-keys-card-bg)",
+              border: "1px solid var(--api-keys-card-border)",
+              boxShadow: "0 2px 8px var(--api-keys-card-shadow)",
+            }}
+          >
+            <Group align="center" gap={12} wrap="nowrap">
+              <SkeletonLoader type="block" width="100%" height={36} />
+              <SkeletonLoader type="block" width={76} height={32} />
+              <SkeletonLoader type="block" width={92} height={32} />
+            </Group>
+          </div>
+        </>
       ) : (
-        apiKeyLoading ? (
-          <>
-            <Text size="sm" c="dimmed" style={{ marginBottom: 8 }}>
-              {t('config.apiKeys.description', "Your API key for accessing Stirling's suite of PDF tools. Copy it to your project or refresh to generate a new one.")}
-            </Text>
-            <div style={{ padding: 18, borderRadius: 12, background: "var(--api-keys-card-bg)", border: "1px solid var(--api-keys-card-border)", boxShadow: "0 2px 8px var(--api-keys-card-shadow)" }}>
-              <Group align="center" gap={12} wrap="nowrap">
-                <SkeletonLoader type="block" width="100%" height={36} />
-                <SkeletonLoader type="block" width={76} height={32} />
-                <SkeletonLoader type="block" width={92} height={32} />
-              </Group>
-            </div>
-          </>
-        ) : (
-          <ApiKeySection 
-            publicKey={apiKey ?? ""}
-            copied={copied}
-            onCopy={copy}
-            onRefresh={() => setShowRefreshModal(true)}
-            disabled={isRefreshing}
-          />
-        )
+        <ApiKeySection
+          publicKey={apiKey ?? ""}
+          copied={copied}
+          onCopy={copy}
+          onRefresh={() => setShowRefreshModal(true)}
+          disabled={isRefreshing}
+        />
       )}
 
-      <RefreshModal
-        opened={showRefreshModal}
-        onClose={() => setShowRefreshModal(false)}
-        onConfirm={refreshKeys}
-      />
+      <RefreshModal opened={showRefreshModal} onClose={() => setShowRefreshModal(false)} onConfirm={refreshKeys} />
     </Stack>
   );
 }
diff --git a/frontend/src/saas/components/shared/config/configSections/Overview.tsx b/frontend/src/saas/components/shared/config/configSections/Overview.tsx
index d535fdc2a7..a4337bac64 100644
--- a/frontend/src/saas/components/shared/config/configSections/Overview.tsx
+++ b/frontend/src/saas/components/shared/config/configSections/Overview.tsx
@@ -1,17 +1,30 @@
-import React, { useState } from 'react';
-import { Alert, Avatar, Button, Divider, FileButton, Group, Image, LoadingOverlay, PasswordInput, Text, TextInput, Modal } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { useAuth } from '@app/auth/UseSession';
-import { isUserAnonymous, linkEmailIdentity, linkOAuthIdentity, supabase } from '@app/auth/supabase';
-import { BASE_PATH } from '@app/constants/app';
-import { oauthProviders } from '@app/constants/authProviders';
-import { Tooltip } from '@app/components/shared/Tooltip';
-import { absoluteWithBasePath } from '@app/constants/app';
-import { synchronizeUserUpgrade } from '@app/services/userService';
-import { ProfilePictureCropper } from '@app/components/shared/config/ProfilePictureCropper';
-import { updateProfilePictureMetadata } from '@app/services/avatarSyncService';
-import { deleteCurrentAccount } from '@app/services/accountDeletion';
-import { alert as showToast } from '@app/components/toast';
+import React, { useState } from "react";
+import {
+  Alert,
+  Avatar,
+  Button,
+  Divider,
+  FileButton,
+  Group,
+  Image,
+  LoadingOverlay,
+  PasswordInput,
+  Text,
+  TextInput,
+  Modal,
+} from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { useAuth } from "@app/auth/UseSession";
+import { isUserAnonymous, linkEmailIdentity, linkOAuthIdentity, supabase } from "@app/auth/supabase";
+import { BASE_PATH } from "@app/constants/app";
+import { oauthProviders } from "@app/constants/authProviders";
+import { Tooltip } from "@app/components/shared/Tooltip";
+import { absoluteWithBasePath } from "@app/constants/app";
+import { synchronizeUserUpgrade } from "@app/services/userService";
+import { ProfilePictureCropper } from "@app/components/shared/config/ProfilePictureCropper";
+import { updateProfilePictureMetadata } from "@app/services/avatarSyncService";
+import { deleteCurrentAccount } from "@app/services/accountDeletion";
+import { alert as showToast } from "@app/components/toast";
 
 interface OverviewProps {
   onLogoutClick: () => void;
@@ -19,12 +32,20 @@ interface OverviewProps {
 
 const Overview: React.FC<OverviewProps> = ({ onLogoutClick }) => {
   const { t } = useTranslation();
-  const { user, refreshSession, signOut, profilePictureUrl, profilePictureMetadata, refreshProfilePicture, refreshProfilePictureMetadata } = useAuth();
+  const {
+    user,
+    refreshSession,
+    signOut,
+    profilePictureUrl,
+    profilePictureMetadata,
+    refreshProfilePicture,
+    refreshProfilePictureMetadata,
+  } = useAuth();
 
-  const PROFILE_BUCKET = 'profile-pictures';
+  const PROFILE_BUCKET = "profile-pictures";
 
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
   const [upgradeError, setUpgradeError] = useState<string | null>(null);
   const [success, setSuccess] = useState<string | null>(null);
   const [isLoading, setIsLoading] = useState(false);
@@ -34,14 +55,14 @@ const Overview: React.FC<OverviewProps> = ({ onLogoutClick }) => {
   const [cropperOpen, setCropperOpen] = useState(false);
   const [isDeletingAccount, setIsDeletingAccount] = useState(false);
   const [deleteModalOpen, setDeleteModalOpen] = useState(false);
-  const [confirmEmail, setConfirmEmail] = useState('');
+  const [confirmEmail, setConfirmEmail] = useState("");
 
   const isAnonymous = Boolean(user && isUserAnonymous(user));
-  const isOAuthPicture = profilePictureMetadata?.source === 'oauth';
+  const isOAuthPicture = profilePictureMetadata?.source === "oauth";
   const provider = profilePictureMetadata?.provider;
 
   const profilePath = user ? `${user.id}/avatar` : null;
-  const profileInitial = user?.email?.trim()?.charAt(0)?.toUpperCase() || 'U';
+  const profileInitial = user?.email?.trim()?.charAt(0)?.toUpperCase() || "U";
 
   const handleProfileUpload = async (file: File | null) => {
     if (!file || !user || !profilePath) {
@@ -49,7 +70,7 @@ const Overview: React.FC<OverviewProps> = ({ onLogoutClick }) => {
     }
 
     if (file.size > 2 * 1024 * 1024) {
-      setProfileError(t('config.account.profilePicture.sizeError', 'Please select an image smaller than 2MB.'));
+      setProfileError(t("config.account.profilePicture.sizeError", "Please select an image smaller than 2MB."));
       return;
     }
 
@@ -66,7 +87,7 @@ const Overview: React.FC<OverviewProps> = ({ onLogoutClick }) => {
 
     // Validate cropped size (2MB limit)
     if (croppedBlob.size > 2 * 1024 * 1024) {
-      setProfileError(t('config.account.profilePicture.sizeError', 'Please select an image smaller than 2MB.'));
+      setProfileError(t("config.account.profilePicture.sizeError", "Please select an image smaller than 2MB."));
       setCropperOpen(false);
       setCropperFile(null);
       return;
@@ -75,21 +96,18 @@ const Overview: React.FC<OverviewProps> = ({ onLogoutClick }) => {
     setProfileUploading(true);
     setProfileError(null);
 
-    const { error } = await supabase
-      .storage
-      .from(PROFILE_BUCKET)
-      .upload(profilePath, croppedBlob, {
-        upsert: true,
-        cacheControl: '3600',
-        contentType: 'image/png'
-      });
+    const { error } = await supabase.storage.from(PROFILE_BUCKET).upload(profilePath, croppedBlob, {
+      upsert: true,
+      cacheControl: "3600",
+      contentType: "image/png",
+    });
 
     if (error) {
-      setProfileError(error.message || 'Failed to upload profile picture');
+      setProfileError(error.message || "Failed to upload profile picture");
     } else {
       // Mark as manual upload in metadata
       await updateProfilePictureMetadata(user.id, {
-        source: 'upload',
+        source: "upload",
         provider: null,
       });
       await refreshProfilePictureMetadata();
@@ -109,17 +127,14 @@ const Overview: React.FC<OverviewProps> = ({ onLogoutClick }) => {
     setProfileUploading(true);
     setProfileError(null);
 
-    const { error } = await supabase
-      .storage
-      .from(PROFILE_BUCKET)
-      .remove([profilePath]);
+    const { error } = await supabase.storage.from(PROFILE_BUCKET).remove([profilePath]);
 
     if (error) {
-      setProfileError(error.message || 'Failed to remove profile picture');
+      setProfileError(error.message || "Failed to remove profile picture");
     } else {
       // Clear metadata when removing picture
       await updateProfilePictureMetadata(user.id, {
-        source: 'upload',
+        source: "upload",
         provider: null,
       });
       await refreshProfilePictureMetadata();
@@ -140,17 +155,19 @@ const Overview: React.FC<OverviewProps> = ({ onLogoutClick }) => {
     try {
       // Update metadata to allow manual uploads
       await updateProfilePictureMetadata(user.id, {
-        source: 'upload',
+        source: "upload",
         provider: null,
       });
 
       await refreshProfilePictureMetadata();
-      setSuccess(t('config.account.profilePicture.switchedToCustom', 'Switched to custom picture. You can now upload your own.'));
+      setSuccess(
+        t("config.account.profilePicture.switchedToCustom", "Switched to custom picture. You can now upload your own."),
+      );
 
       // Clear success message after 3 seconds
       setTimeout(() => setSuccess(null), 3000);
     } catch (error: unknown) {
-      setProfileError(error instanceof Error ? error.message : 'Failed to switch to custom picture');
+      setProfileError(error instanceof Error ? error.message : "Failed to switch to custom picture");
     } finally {
       setProfileUploading(false);
     }
@@ -160,7 +177,7 @@ const Overview: React.FC<OverviewProps> = ({ onLogoutClick }) => {
     e.preventDefault();
 
     if (!email.trim()) {
-      setUpgradeError('Email is required');
+      setUpgradeError("Email is required");
       return;
     }
 
@@ -173,34 +190,34 @@ const Overview: React.FC<OverviewProps> = ({ onLogoutClick }) => {
       await linkEmailIdentity(email.trim(), password || undefined);
 
       // Synchronize with backend database (using "email" as auth method for email/password)
-      await synchronizeUserUpgrade('email');
+      await synchronizeUserUpgrade("email");
 
       // Refresh the session to reflect changes
       await refreshSession();
 
-      setSuccess('Account upgraded successfully! You can now sign in with your email.');
-      setEmail('');
-      setPassword('');
+      setSuccess("Account upgraded successfully! You can now sign in with your email.");
+      setEmail("");
+      setPassword("");
     } catch (err: unknown) {
-      setUpgradeError(err instanceof Error ? err.message : 'Failed to upgrade account');
+      setUpgradeError(err instanceof Error ? err.message : "Failed to upgrade account");
     } finally {
       setIsLoading(false);
     }
   };
 
-  const handleOAuthUpgrade = async (provider: 'github' | 'google' | 'apple' | 'azure') => {
+  const handleOAuthUpgrade = async (provider: "github" | "google" | "apple" | "azure") => {
     try {
       setIsLoading(true);
       setUpgradeError(null);
       setSuccess(null);
 
       // Store provider info for post-redirect handling
-      sessionStorage.setItem('pendingUpgrade', 'true');
-      sessionStorage.setItem('upgradeProvider', provider);
+      sessionStorage.setItem("pendingUpgrade", "true");
+      sessionStorage.setItem("upgradeProvider", provider);
 
       // Redirect back to homepage after OAuth completes
       // The UseSession hook will handle the pendingUpgrade synchronization
-      const redirectUrl = absoluteWithBasePath('/auth/callback?next=/');
+      const redirectUrl = absoluteWithBasePath("/auth/callback?next=/");
       const result = await linkOAuthIdentity(provider, redirectUrl);
 
       if (result.data?.url) {
@@ -210,32 +227,31 @@ const Overview: React.FC<OverviewProps> = ({ onLogoutClick }) => {
       const errorMessage = err instanceof Error ? err.message : `Failed to upgrade account with ${provider}`;
       setUpgradeError(errorMessage);
       setIsLoading(false);
-      sessionStorage.removeItem('pendingUpgrade');
-      sessionStorage.removeItem('upgradeProvider');
+      sessionStorage.removeItem("pendingUpgrade");
+      sessionStorage.removeItem("upgradeProvider");
     }
   };
 
-
   const handleDeleteAccount = async () => {
     if (isAnonymous) return;
     try {
       setIsDeletingAccount(true);
       await deleteCurrentAccount();
       setDeleteModalOpen(false);
-      setConfirmEmail('');
+      setConfirmEmail("");
       await signOut();
-      window.location.href = absoluteWithBasePath('/login');
+      window.location.href = absoluteWithBasePath("/login");
     } catch (err) {
-      const fallbackMessage = t('config.account.overview.deleteFailed', 'Failed to delete account.');
+      const fallbackMessage = t("config.account.overview.deleteFailed", "Failed to delete account.");
       const message = err instanceof Error ? err.message : fallbackMessage;
-      console.error('[Overview] Delete account failed:', err);
+      console.error("[Overview] Delete account failed:", err);
       showToast({
-        alertType: 'error',
-        title: t('config.account.overview.deleteFailedTitle', 'Unable to delete account'),
+        alertType: "error",
+        title: t("config.account.overview.deleteFailedTitle", "Unable to delete account"),
         body: message,
         expandable: true,
-        location: 'top-right',
-        durationMs: 7000
+        location: "top-right",
+        durationMs: 7000,
       });
     } finally {
       setIsDeletingAccount(false);
@@ -244,33 +260,35 @@ const Overview: React.FC<OverviewProps> = ({ onLogoutClick }) => {
 
   const closeDeleteModal = () => {
     setDeleteModalOpen(false);
-    setConfirmEmail('');
+    setConfirmEmail("");
   };
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '1.5rem', position: 'relative' }}>
+    <div style={{ display: "flex", flexDirection: "column", gap: "1.5rem", position: "relative" }}>
       <LoadingOverlay visible={isLoading || isDeletingAccount} />
 
       <div>
-        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
+        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}>
           <div>
-            <h3 style={{ margin: 0, color: 'var(--mantine-color-text)', fontSize: '1rem' }}>
-              {t('config.account.overview.title', 'Account Settings')}
+            <h3 style={{ margin: 0, color: "var(--mantine-color-text)", fontSize: "1rem" }}>
+              {t("config.account.overview.title", "Account Settings")}
             </h3>
-            <p style={{ margin: '0.25rem 0 0 0', color: 'var(--mantine-color-dimmed)', fontSize: '0.875rem' }}>
+            <p style={{ margin: "0.25rem 0 0 0", color: "var(--mantine-color-dimmed)", fontSize: "0.875rem" }}>
               {isAnonymous
-                ? t('config.account.overview.guestDescription', 'You are signed in as a guest. Consider upgrading your account below.')
-                : t('config.account.overview.manageAccountPreferences', 'Manage your account preferences')
-              }
+                ? t(
+                    "config.account.overview.guestDescription",
+                    "You are signed in as a guest. Consider upgrading your account below.",
+                  )
+                : t("config.account.overview.manageAccountPreferences", "Manage your account preferences")}
             </p>
             {user?.email && (
-              <p style={{ margin: '0.25rem 0 0 0', color: 'var(--mantine-color-dimmed)', fontSize: '0.75rem' }}>
-                {t('config.account.overview.signedInAs', 'Signed in as')}: {user.email}
+              <p style={{ margin: "0.25rem 0 0 0", color: "var(--mantine-color-dimmed)", fontSize: "0.75rem" }}>
+                {t("config.account.overview.signedInAs", "Signed in as")}: {user.email}
               </p>
             )}
           </div>
           <Button color="red" variant="filled" onClick={onLogoutClick}>
-            {t('logOut', 'Log out')}
+            {t("logOut", "Log out")}
           </Button>
         </div>
       </div>
@@ -278,11 +296,11 @@ const Overview: React.FC<OverviewProps> = ({ onLogoutClick }) => {
       <Divider />
 
       <div>
-        <h3 style={{ margin: 0, color: 'var(--mantine-color-text)', fontSize: '1rem' }}>
-          {t('config.account.profilePicture.title', 'Profile picture')}
+        <h3 style={{ margin: 0, color: "var(--mantine-color-text)", fontSize: "1rem" }}>
+          {t("config.account.profilePicture.title", "Profile picture")}
         </h3>
-        <p style={{ margin: '0.25rem 0 1rem 0', color: 'var(--mantine-color-dimmed)', fontSize: '0.875rem' }}>
-          {t('config.account.profilePicture.description', 'Upload an image to personalize your account.')}
+        <p style={{ margin: "0.25rem 0 1rem 0", color: "var(--mantine-color-dimmed)", fontSize: "0.875rem" }}>
+          {t("config.account.profilePicture.description", "Upload an image to personalize your account.")}
         </p>
 
         {profileError && (
@@ -302,14 +320,14 @@ const Overview: React.FC<OverviewProps> = ({ onLogoutClick }) => {
             <Avatar src={profilePictureUrl || undefined} radius="xl" size={72} color="blue">
               {profileInitial}
             </Avatar>
-            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+            <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
               <Text size="sm" c="dimmed">
-                {t('config.account.profilePicture.usingProvider', 'Using {{provider}} profile picture', {
-                  provider: provider ? provider.charAt(0).toUpperCase() + provider.slice(1) : 'OAuth'
+                {t("config.account.profilePicture.usingProvider", "Using {{provider}} profile picture", {
+                  provider: provider ? provider.charAt(0).toUpperCase() + provider.slice(1) : "OAuth",
                 })}
               </Text>
               <Button variant="outline" onClick={handleUseCustomPicture} disabled={profileUploading}>
-                {t('config.account.profilePicture.useCustom', 'Use custom picture')}
+                {t("config.account.profilePicture.useCustom", "Use custom picture")}
               </Button>
             </div>
           </Group>
@@ -318,7 +336,7 @@ const Overview: React.FC<OverviewProps> = ({ onLogoutClick }) => {
             <Avatar src={profilePictureUrl || undefined} radius="xl" size={72} color="blue">
               {profileInitial}
             </Avatar>
-            <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+            <div style={{ display: "flex", flexDirection: "column", gap: "0.5rem" }}>
               <Group gap="sm">
                 <FileButton
                   onChange={handleProfileUpload}
@@ -327,20 +345,16 @@ const Overview: React.FC<OverviewProps> = ({ onLogoutClick }) => {
                 >
                   {(props) => (
                     <Button {...props} loading={profileUploading}>
-                      {t('config.account.profilePicture.upload', 'Upload')}
+                      {t("config.account.profilePicture.upload", "Upload")}
                     </Button>
                   )}
                 </FileButton>
-                <Button
-                  variant="outline"
-                  onClick={handleProfileRemove}
-                  disabled={!profilePictureUrl || profileUploading}
-                >
-                  {t('config.account.profilePicture.remove', 'Remove')}
+                <Button variant="outline" onClick={handleProfileRemove} disabled={!profilePictureUrl || profileUploading}>
+                  {t("config.account.profilePicture.remove", "Remove")}
                 </Button>
               </Group>
               <Text size="xs" c="var(--mantine-color-dimmed)">
-                {t('config.account.profilePicture.help', 'PNG, JPG, or WebP up to 2MB.')}
+                {t("config.account.profilePicture.help", "PNG, JPG, or WebP up to 2MB.")}
               </Text>
             </div>
           </Group>
@@ -362,11 +376,11 @@ const Overview: React.FC<OverviewProps> = ({ onLogoutClick }) => {
       {isAnonymous && (
         <div>
           <div>
-            <h3 style={{ margin: 0, color: 'var(--mantine-color-text)', fontSize: '1rem' }}>
-              {t('config.account.upgrade.title', 'Upgrade Guest Account')}
+            <h3 style={{ margin: 0, color: "var(--mantine-color-text)", fontSize: "1rem" }}>
+              {t("config.account.upgrade.title", "Upgrade Guest Account")}
             </h3>
-            <p style={{ margin: '0.25rem 0 1rem 0', color: 'var(--mantine-color-dimmed)', fontSize: '0.875rem' }}>
-              {t('config.account.upgrade.description', 'Link your account to preserve your history and access more features!')}
+            <p style={{ margin: "0.25rem 0 1rem 0", color: "var(--mantine-color-dimmed)", fontSize: "0.875rem" }}>
+              {t("config.account.upgrade.description", "Link your account to preserve your history and access more features!")}
             </p>
           </div>
 
@@ -382,17 +396,17 @@ const Overview: React.FC<OverviewProps> = ({ onLogoutClick }) => {
             </Alert>
           )}
 
-          <div style={{ marginBottom: '1rem' }}>
+          <div style={{ marginBottom: "1rem" }}>
             <Text size="sm" fw={500} mb="xs" c="var(--mantine-color-dimmed)">
-              {t('config.account.upgrade.socialLogin', 'Upgrade with Social Account')}
+              {t("config.account.upgrade.socialLogin", "Upgrade with Social Account")}
             </Text>
-            <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
+            <div style={{ display: "flex", gap: "0.5rem", flexWrap: "wrap" }}>
               {oauthProviders
-                .filter(provider => !provider.isDisabled)
+                .filter((provider) => !provider.isDisabled)
                 .map((provider) => (
                   <Tooltip
                     key={provider.id}
-                    content={`${t('config.account.upgrade.linkWith', 'Link with')} ${provider.label}`}
+                    content={`${t("config.account.upgrade.linkWith", "Link with")} ${provider.label}`}
                   >
                     <Button
                       variant="outline"
@@ -404,7 +418,7 @@ const Overview: React.FC<OverviewProps> = ({ onLogoutClick }) => {
                           style={{ width: 16, height: 16 }}
                         />
                       }
-                      onClick={() => handleOAuthUpgrade(provider.id as 'github' | 'google' | 'apple' | 'azure')}
+                      onClick={() => handleOAuthUpgrade(provider.id as "github" | "google" | "apple" | "azure")}
                       disabled={isLoading}
                     >
                       {provider.label}
@@ -416,28 +430,28 @@ const Overview: React.FC<OverviewProps> = ({ onLogoutClick }) => {
 
           <div>
             <Text size="sm" fw={500} mb="xs" c="var(--mantine-color-dimmed)">
-              {t('config.account.upgrade.emailPassword', 'or enter your email & password')}
+              {t("config.account.upgrade.emailPassword", "or enter your email & password")}
             </Text>
             <form onSubmit={handleEmailUpgrade}>
               <Group align="end" gap="sm">
                 <TextInput
-                  label={t('config.account.upgrade.email', 'Email')}
-                  placeholder={t('config.account.upgrade.emailPlaceholder', 'Enter your email')}
+                  label={t("config.account.upgrade.email", "Email")}
+                  placeholder={t("config.account.upgrade.emailPlaceholder", "Enter your email")}
                   value={email}
                   onChange={(e) => setEmail(e.target.value)}
                   required
                   style={{ flex: 1 }}
                 />
                 <PasswordInput
-                  label={t('config.account.upgrade.password', 'Password (optional)')}
-                  placeholder={t('config.account.upgrade.passwordPlaceholder', 'Set a password')}
+                  label={t("config.account.upgrade.password", "Password (optional)")}
+                  placeholder={t("config.account.upgrade.passwordPlaceholder", "Set a password")}
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
-                  description={t('config.account.upgrade.passwordNote', 'Leave empty to use email verification only')}
+                  description={t("config.account.upgrade.passwordNote", "Leave empty to use email verification only")}
                   style={{ flex: 1 }}
                 />
                 <Button type="submit" disabled={isLoading}>
-                  {t('config.account.upgrade.upgradeButton', 'Upgrade Account')}
+                  {t("config.account.upgrade.upgradeButton", "Upgrade Account")}
                 </Button>
               </Group>
             </form>
@@ -447,19 +461,17 @@ const Overview: React.FC<OverviewProps> = ({ onLogoutClick }) => {
 
       {/* Delete Account Section */}
       {!isAnonymous && (
-        <div style={{
-          marginTop: 'auto',
-          paddingTop: '1.5rem',
-          display: 'flex',
-          justifyContent: 'flex-end',
-          borderTop: '1px solid var(--mantine-color-default-border)'
-        }}>
-          <Button
-            color="red"
-            variant="outline"
-            onClick={() => setDeleteModalOpen(true)}
-          >
-            {t('config.account.overview.deleteAccount', 'Delete Account')}
+        <div
+          style={{
+            marginTop: "auto",
+            paddingTop: "1.5rem",
+            display: "flex",
+            justifyContent: "flex-end",
+            borderTop: "1px solid var(--mantine-color-default-border)",
+          }}
+        >
+          <Button color="red" variant="outline" onClick={() => setDeleteModalOpen(true)}>
+            {t("config.account.overview.deleteAccount", "Delete Account")}
           </Button>
         </div>
       )}
@@ -468,34 +480,40 @@ const Overview: React.FC<OverviewProps> = ({ onLogoutClick }) => {
       <Modal
         opened={deleteModalOpen}
         onClose={closeDeleteModal}
-        title={t('config.account.overview.deleteAccountTitle', 'Delete Account')}
+        title={t("config.account.overview.deleteAccountTitle", "Delete Account")}
         centered
         zIndex={10000}
       >
-        <form onSubmit={(e) => {
-          e.preventDefault();
-          if (confirmEmail.toLowerCase() === user?.email?.toLowerCase()) {
-            handleDeleteAccount();
-          }
-        }}>
+        <form
+          onSubmit={(e) => {
+            e.preventDefault();
+            if (confirmEmail.toLowerCase() === user?.email?.toLowerCase()) {
+              handleDeleteAccount();
+            }
+          }}
+        >
           <Text size="sm" mb="md">
-            {t('config.account.overview.deleteWarning',
-              'This action is permanent and cannot be undone. All your data will be deleted.')}
+            {t(
+              "config.account.overview.deleteWarning",
+              "This action is permanent and cannot be undone. All your data will be deleted.",
+            )}
           </Text>
           <Text size="sm" fw={500} mb="xs">
-            {t('config.account.overview.enterEmailConfirm',
-              'To confirm deletion, please type your email address ({{email}}) below:',
-              { email: user?.email })}
+            {t(
+              "config.account.overview.enterEmailConfirm",
+              "To confirm deletion, please type your email address ({{email}}) below:",
+              { email: user?.email },
+            )}
           </Text>
           <TextInput
-            placeholder={user?.email || ''}
+            placeholder={user?.email || ""}
             value={confirmEmail}
             onChange={(e) => setConfirmEmail(e.target.value)}
             mb="md"
           />
           <Group justify="flex-end" gap="sm">
             <Button variant="default" onClick={closeDeleteModal} type="button">
-              {t('cancel', 'Cancel')}
+              {t("cancel", "Cancel")}
             </Button>
             <Button
               color="red"
@@ -503,7 +521,7 @@ const Overview: React.FC<OverviewProps> = ({ onLogoutClick }) => {
               type="submit"
               loading={isDeletingAccount}
             >
-              {t('config.account.overview.confirmDelete', 'Delete My Account')}
+              {t("config.account.overview.confirmDelete", "Delete My Account")}
             </Button>
           </Group>
         </form>
diff --git a/frontend/src/saas/components/shared/config/configSections/PasswordSecurity.tsx b/frontend/src/saas/components/shared/config/configSections/PasswordSecurity.tsx
index 55ab3cdc2b..53452499c3 100644
--- a/frontend/src/saas/components/shared/config/configSections/PasswordSecurity.tsx
+++ b/frontend/src/saas/components/shared/config/configSections/PasswordSecurity.tsx
@@ -1,9 +1,9 @@
-import React, { useState } from 'react';
-import { Button, PasswordInput, Group, Alert, LoadingOverlay, Modal, Divider } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { useAuth } from '@app/auth/UseSession';
-import { supabase } from '@app/auth/supabase';
-import { Z_INDEX_OVER_SETTINGS_MODAL } from '@app/styles/zIndex';
+import React, { useState } from "react";
+import { Button, PasswordInput, Group, Alert, LoadingOverlay, Modal, Divider } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { useAuth } from "@app/auth/UseSession";
+import { supabase } from "@app/auth/supabase";
+import { Z_INDEX_OVER_SETTINGS_MODAL } from "@app/styles/zIndex";
 
 const PasswordSecurity: React.FC = () => {
   const { t } = useTranslation();
@@ -11,23 +11,23 @@ const PasswordSecurity: React.FC = () => {
 
   const [opened, setOpened] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
-  const [newPassword, setNewPassword] = useState('');
-  const [confirmPassword, setConfirmPassword] = useState('');
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState<string | null>(null);
   const [didUpdate, setDidUpdate] = useState(false);
 
   const handleChangePassword = async () => {
     if (!newPassword || !confirmPassword) {
-      setError(t('signup.pleaseFillAllFields', 'Please fill in all fields'));
+      setError(t("signup.pleaseFillAllFields", "Please fill in all fields"));
       return;
     }
     if (newPassword.length < 6) {
-      setError(t('signup.passwordTooShort', 'Password must be at least 6 characters long'));
+      setError(t("signup.passwordTooShort", "Password must be at least 6 characters long"));
       return;
     }
     if (newPassword !== confirmPassword) {
-      setError(t('signup.passwordsDoNotMatch', 'Passwords do not match'));
+      setError(t("signup.passwordsDoNotMatch", "Passwords do not match"));
       return;
     }
 
@@ -43,9 +43,9 @@ const PasswordSecurity: React.FC = () => {
         return;
       }
 
-      setSuccess(t('login.passwordUpdatedSuccess', 'Your password has been updated successfully.'));
-      setNewPassword('');
-      setConfirmPassword('');
+      setSuccess(t("login.passwordUpdatedSuccess", "Your password has been updated successfully."));
+      setNewPassword("");
+      setConfirmPassword("");
       setDidUpdate(true);
 
       // Replace form with success text, then close after 2s
@@ -56,48 +56,58 @@ const PasswordSecurity: React.FC = () => {
         setDidUpdate(false);
       }, 2000);
     } catch (e: unknown) {
-      setError(e instanceof Error ? e.message : 'Failed to change password');
+      setError(e instanceof Error ? e.message : "Failed to change password");
     } finally {
       setIsLoading(false);
     }
   };
 
   return (
-    <div style={{ position: 'relative' }}>
+    <div style={{ position: "relative" }}>
       <LoadingOverlay visible={isLoading} />
 
-      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center" }}>
         <div>
-        <h3 style={{ margin: 0, color: 'var(--mantine-color-text)', fontSize: '1rem' }}>
-          {t('config.account.security.title', 'Passwords & Security')}
-        </h3>
-        <p style={{ margin: '0.25rem 0 1rem 0', color: 'var(--mantine-color-dimmed)', fontSize: '0.875rem' }}>
-          {t('config.account.security.description', 'Manage your password and security settings.')}
-        </p>
+          <h3 style={{ margin: 0, color: "var(--mantine-color-text)", fontSize: "1rem" }}>
+            {t("config.account.security.title", "Passwords & Security")}
+          </h3>
+          <p style={{ margin: "0.25rem 0 1rem 0", color: "var(--mantine-color-dimmed)", fontSize: "0.875rem" }}>
+            {t("config.account.security.description", "Manage your password and security settings.")}
+          </p>
         </div>
         <Button type="button" onClick={() => setOpened(true)} variant="filled">
-          {t('config.account.security.changePassword', 'Change password')}
+          {t("config.account.security.changePassword", "Change password")}
         </Button>
       </div>
 
-      <Modal opened={opened} onClose={() => setOpened(false)} centered title={t('config.account.security.changePassword', 'Change password')} zIndex={Z_INDEX_OVER_SETTINGS_MODAL}>
+      <Modal
+        opened={opened}
+        onClose={() => setOpened(false)}
+        centered
+        title={t("config.account.security.changePassword", "Change password")}
+        zIndex={Z_INDEX_OVER_SETTINGS_MODAL}
+      >
         {error && (
-          <Alert color="red" mb="md">{error}</Alert>
+          <Alert color="red" mb="md">
+            {error}
+          </Alert>
         )}
 
         {didUpdate ? (
-          <Alert color="green" mb="md">{success || t('login.passwordUpdatedSuccess', 'Your password has been updated successfully.')}</Alert>
+          <Alert color="green" mb="md">
+            {success || t("login.passwordUpdatedSuccess", "Your password has been updated successfully.")}
+          </Alert>
         ) : (
-          <div style={{ display: 'flex', flexDirection: 'column', gap: '0.75rem' }}>
+          <div style={{ display: "flex", flexDirection: "column", gap: "0.75rem" }}>
             <PasswordInput
-              label={t('account.newPassword', 'New Password')}
-              placeholder={t('account.newPassword', 'New Password')}
+              label={t("account.newPassword", "New Password")}
+              placeholder={t("account.newPassword", "New Password")}
               value={newPassword}
               onChange={(e) => setNewPassword(e.currentTarget.value)}
             />
             <PasswordInput
-              label={t('account.confirmNewPassword', 'Confirm New Password')}
-              placeholder={t('account.confirmNewPassword', 'Confirm New Password')}
+              label={t("account.confirmNewPassword", "Confirm New Password")}
+              placeholder={t("account.confirmNewPassword", "Confirm New Password")}
               value={confirmPassword}
               onChange={(e) => setConfirmPassword(e.currentTarget.value)}
             />
@@ -105,10 +115,10 @@ const PasswordSecurity: React.FC = () => {
             <Divider my="sm" />
             <Group justify="flex-end">
               <Button type="button" variant="default" onClick={() => setOpened(false)}>
-                {t('common.cancel', 'Cancel')}
+                {t("common.cancel", "Cancel")}
               </Button>
               <Button type="button" onClick={handleChangePassword} loading={isLoading}>
-                {t('config.account.security.update', 'Update password')}
+                {t("config.account.security.update", "Update password")}
               </Button>
             </Group>
           </div>
@@ -119,5 +129,3 @@ const PasswordSecurity: React.FC = () => {
 };
 
 export default PasswordSecurity;
-
-
diff --git a/frontend/src/saas/components/shared/config/configSections/Plan.tsx b/frontend/src/saas/components/shared/config/configSections/Plan.tsx
index e5704e6293..92e7988594 100644
--- a/frontend/src/saas/components/shared/config/configSections/Plan.tsx
+++ b/frontend/src/saas/components/shared/config/configSections/Plan.tsx
@@ -1,76 +1,85 @@
-import React, { useState, useCallback, useEffect } from 'react';
-import { Divider, Loader, Alert, Select, Group, Text } from '@mantine/core';
-import { usePlans, PlanTier } from '@app/hooks/usePlans';
-import StripeCheckout, { PurchaseType, CreditsPack, PlanID } from '@app/components/shared/StripeCheckoutSaas';
-import AvailablePlansSection from '@app/components/shared/config/configSections/plan/AvailablePlansSection';
-import ApiPackagesSection from '@app/components/shared/config/configSections/plan/ApiPackagesSection';
-import ActivePlanSection from '@app/components/shared/config/configSections/plan/ActivePlanSection';
-import { useAuth } from '@app/auth/UseSession';
+import React, { useState, useCallback, useEffect } from "react";
+import { Divider, Loader, Alert, Select, Group, Text } from "@mantine/core";
+import { usePlans, PlanTier } from "@app/hooks/usePlans";
+import StripeCheckout, { PurchaseType, CreditsPack, PlanID } from "@app/components/shared/StripeCheckoutSaas";
+import AvailablePlansSection from "@app/components/shared/config/configSections/plan/AvailablePlansSection";
+import ApiPackagesSection from "@app/components/shared/config/configSections/plan/ApiPackagesSection";
+import ActivePlanSection from "@app/components/shared/config/configSections/plan/ActivePlanSection";
+import { useAuth } from "@app/auth/UseSession";
 
 const Plan: React.FC = () => {
   const [checkoutOpen, setCheckoutOpen] = useState(false);
   const [selectedPlan, setSelectedPlan] = useState<PlanTier | null>(null);
   const [selectedCredits, setSelectedCredits] = useState(0); // Index of selected credit package
-  const [purchaseType, setPurchaseType] = useState<PurchaseType>('subscription');
+  const [purchaseType, setPurchaseType] = useState<PurchaseType>("subscription");
   const [selectedCreditsPack, setSelectedCreditsPack] = useState<CreditsPack>(null);
-  const [currency, setCurrency] = useState<string>('gbp');
+  const [currency, setCurrency] = useState<string>("gbp");
   const { trialStatus } = useAuth();
   const { data, loading, error, updateCurrentPlan } = usePlans(currency);
 
   const currencyOptions = [
-    { value: 'cny', label: 'Chinese yuan (CNY, ¥)' },
-    { value: 'usd', label: 'US dollar (USD, $)' },
-    { value: 'inr', label: 'Indian rupee (INR, ₹)' },
-    { value: 'brl', label: 'Brazilian real (BRL, R$)' },
-    { value: 'eur', label: 'Euro (EUR, €)' },
-    { value: 'idr', label: 'Indonesian rupiah (IDR, Rp)' },
-    { value: 'gbp', label: 'British pound (GBP, £)' }
+    { value: "cny", label: "Chinese yuan (CNY, ¥)" },
+    { value: "usd", label: "US dollar (USD, $)" },
+    { value: "inr", label: "Indian rupee (INR, ₹)" },
+    { value: "brl", label: "Brazilian real (BRL, R$)" },
+    { value: "eur", label: "Euro (EUR, €)" },
+    { value: "idr", label: "Indonesian rupiah (IDR, Rp)" },
+    { value: "gbp", label: "British pound (GBP, £)" },
   ];
 
-  const handleUpgradeClick = useCallback((plan: PlanTier) => {
-    if (!data) return;
+  const handleUpgradeClick = useCallback(
+    (plan: PlanTier) => {
+      if (!data) return;
 
-    if (plan.isContactOnly) {
-      // Open contact form or redirect to contact page
-      window.open('mailto:contact@stirlingpdf.com?subject=Enterprise Plan Inquiry', '_blank');
-      return;
-    }
+      if (plan.isContactOnly) {
+        // Open contact form or redirect to contact page
+        window.open("mailto:contact@stirlingpdf.com?subject=Enterprise Plan Inquiry", "_blank");
+        return;
+      }
 
-    if (plan.id !== data.currentPlan.id) {
-      setSelectedPlan(plan);
-      setPurchaseType('subscription');
-      setSelectedCreditsPack(null);
-      setCheckoutOpen(true);
-    }
-  }, [data]);
+      if (plan.id !== data.currentPlan.id) {
+        setSelectedPlan(plan);
+        setPurchaseType("subscription");
+        setSelectedCreditsPack(null);
+        setCheckoutOpen(true);
+      }
+    },
+    [data],
+  );
 
-  const handleCreditPurchaseClick = useCallback((creditsPack: CreditsPack) => {
-    if (!data) return;
+  const handleCreditPurchaseClick = useCallback(
+    (creditsPack: CreditsPack) => {
+      if (!data) return;
 
-    setSelectedCreditsPack(creditsPack);
-    setPurchaseType('credits');
-    setSelectedPlan(null);
-    setCheckoutOpen(true);
-  }, [data]);
-
-  const handlePaymentSuccess = useCallback((sessionId: string) => {
-    console.log('Payment successful, session:', sessionId);
-
-    // Update local state immediately - no page reload needed
-    if (selectedPlan && purchaseType === 'subscription') {
-      updateCurrentPlan(selectedPlan.id);
-    }
-
-    // Close modal after brief delay to show success message
-    setTimeout(() => {
-      setCheckoutOpen(false);
+      setSelectedCreditsPack(creditsPack);
+      setPurchaseType("credits");
       setSelectedPlan(null);
-      setSelectedCreditsPack(null);
-    }, 2000);
-  }, [selectedPlan, purchaseType, updateCurrentPlan]);
+      setCheckoutOpen(true);
+    },
+    [data],
+  );
+
+  const handlePaymentSuccess = useCallback(
+    (sessionId: string) => {
+      console.log("Payment successful, session:", sessionId);
+
+      // Update local state immediately - no page reload needed
+      if (selectedPlan && purchaseType === "subscription") {
+        updateCurrentPlan(selectedPlan.id);
+      }
+
+      // Close modal after brief delay to show success message
+      setTimeout(() => {
+        setCheckoutOpen(false);
+        setSelectedPlan(null);
+        setSelectedCreditsPack(null);
+      }, 2000);
+    },
+    [selectedPlan, purchaseType, updateCurrentPlan],
+  );
 
   const handlePaymentError = useCallback((error: string) => {
-    console.error('Payment error:', error);
+    console.error("Payment error:", error);
     // Error is already displayed in the StripeCheckout component
   }, []);
 
@@ -84,11 +93,11 @@ const Plan: React.FC = () => {
     if (!data) return;
 
     // Find Pro plan from available plans
-    const proPlan = Array.from(data.plans.values()).find(plan => plan.id === 'pro');
+    const proPlan = Array.from(data.plans.values()).find((plan) => plan.id === "pro");
 
     if (proPlan) {
       setSelectedPlan(proPlan);
-      setPurchaseType('subscription');
+      setPurchaseType("subscription");
       setSelectedCreditsPack(null);
       setCheckoutOpen(true);
     }
@@ -99,12 +108,12 @@ const Plan: React.FC = () => {
     if (!data) return;
 
     const params = new URLSearchParams(window.location.search);
-    if (params.get('action') === 'add-payment') {
+    if (params.get("action") === "add-payment") {
       handleAddPaymentClick();
       // Clean up URL
-      params.delete('action');
+      params.delete("action");
       const newUrl = params.toString() ? `${window.location.pathname}?${params.toString()}` : window.location.pathname;
-      window.history.replaceState({}, '', newUrl);
+      window.history.replaceState({}, "", newUrl);
     }
   }, [data, handleAddPaymentClick]);
 
@@ -137,14 +146,16 @@ const Plan: React.FC = () => {
   const plansArray = Array.from(plans.values());
 
   return (
-    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+    <div style={{ display: "flex", flexDirection: "column", gap: "2rem" }}>
       {/* Currency Selector */}
       <div>
         <Group justify="space-between" align="center" mb="md">
-          <Text size="lg" fw={600}>Currency</Text>
+          <Text size="lg" fw={600}>
+            Currency
+          </Text>
           <Select
             value={currency}
-            onChange={(value) => setCurrency(value || 'gbp')}
+            onChange={(value) => setCurrency(value || "gbp")}
             data={currencyOptions}
             searchable
             clearable={true}
@@ -163,11 +174,7 @@ const Plan: React.FC = () => {
 
       <Divider />
 
-      <AvailablePlansSection
-        plans={plansArray}
-        currentPlan={currentPlan}
-        onUpgradeClick={handleUpgradeClick}
-      />
+      <AvailablePlansSection plans={plansArray} currentPlan={currentPlan} onUpgradeClick={handleUpgradeClick} />
 
       <Divider />
 
@@ -183,16 +190,16 @@ const Plan: React.FC = () => {
         opened={checkoutOpen && (selectedPlan !== null || selectedCreditsPack !== null)}
         onClose={handleCheckoutClose}
         purchaseType={purchaseType}
-        planId={purchaseType === 'subscription' ? (selectedPlan?.id as PlanID) : null}
-        creditsPack={purchaseType === 'credits' ? selectedCreditsPack : null}
+        planId={purchaseType === "subscription" ? (selectedPlan?.id as PlanID) : null}
+        creditsPack={purchaseType === "credits" ? selectedCreditsPack : null}
         planName={
-          purchaseType === 'subscription'
-            ? selectedPlan?.name || ''
-            : data?.apiPackages.find(pkg => pkg.id === selectedCreditsPack)?.name || ''
+          purchaseType === "subscription"
+            ? selectedPlan?.name || ""
+            : data?.apiPackages.find((pkg) => pkg.id === selectedCreditsPack)?.name || ""
         }
         onSuccess={handlePaymentSuccess}
         onError={handlePaymentError}
-        isTrialConversion={trialStatus?.isTrialing && purchaseType === 'subscription'}
+        isTrialConversion={trialStatus?.isTrialing && purchaseType === "subscription"}
       />
     </div>
   );
diff --git a/frontend/src/saas/components/shared/config/configSections/apiKeys/UsageSection.tsx b/frontend/src/saas/components/shared/config/configSections/apiKeys/UsageSection.tsx
index 8a79fd3510..3973a73387 100644
--- a/frontend/src/saas/components/shared/config/configSections/apiKeys/UsageSection.tsx
+++ b/frontend/src/saas/components/shared/config/configSections/apiKeys/UsageSection.tsx
@@ -1,13 +1,7 @@
 import React from "react";
-import {
-  Paper,
-  Stack,
-  Group,
-  Text,
-  Divider,
-} from "@mantine/core";
+import { Paper, Stack, Group, Text, Divider } from "@mantine/core";
 import StackedBarChart from "@app/components/shared/charts/StackedBarChart";
-import { FractionData } from '@app/types/charts';
+import { FractionData } from "@app/types/charts";
 import { ApiCredits as ApiUsage } from "@app/types/credits";
 import SkeletonLoader from "@app/components/shared/SkeletonLoader";
 import { formatUTC } from "@app/components/shared/utils/date";
@@ -26,7 +20,7 @@ export default function UsageSection({ apiUsage, obscured, overlayMessage, loadi
   const { t } = useTranslation();
   const weeklyUsed = apiUsage.weeklyCreditsAllocated - apiUsage.weeklyCreditsRemaining;
   const boughtUsed = apiUsage.totalBoughtCredits - apiUsage.boughtCreditsRemaining;
-  
+
   // Totals for overall usage visualization
   const totalRemaining = Math.max(apiUsage.totalAvailableCredits, 0);
 
@@ -35,42 +29,49 @@ export default function UsageSection({ apiUsage, obscured, overlayMessage, loadi
   // Prepare data for the stacked bar chart
   const fractions: FractionData[] = [
     {
-      name: t('config.apiKeys.includedCredits', 'Included credits'),
+      name: t("config.apiKeys.includedCredits", "Included credits"),
       numerator: Math.max(0, weeklyUsed),
       denominator: Math.max(0, apiUsage.weeklyCreditsAllocated),
-      numeratorLabel: t('common.used', 'used'),
-      denominatorLabel: t('common.available', 'available'),
-      color: "var(--usage-weekly-active)"
+      numeratorLabel: t("common.used", "used"),
+      denominatorLabel: t("common.available", "available"),
+      color: "var(--usage-weekly-active)",
     },
     {
-      name: t('config.apiKeys.purchasedCredits', 'Purchased credits'), 
+      name: t("config.apiKeys.purchasedCredits", "Purchased credits"),
       numerator: Math.max(0, boughtUsed),
       denominator: Math.max(0, apiUsage.totalBoughtCredits),
-      numeratorLabel: t('common.used', 'used'),
-      denominatorLabel: t('common.available', 'available'), 
-      color: "var(--usage-bought-active)"
+      numeratorLabel: t("common.used", "used"),
+      denominatorLabel: t("common.available", "available"),
+      color: "var(--usage-bought-active)",
     },
   ];
 
   return (
     <div style={{ position: "relative" }}>
-      <Paper radius="md" p={18} style={{ background: "var(--api-keys-card-bg)", border: "1px solid var(--api-keys-card-border)", boxShadow: "0 2px 8px var(--api-keys-card-shadow)" }}>
-        <Stack gap={12}
+      <Paper
+        radius="md"
+        p={18}
+        style={{
+          background: "var(--api-keys-card-bg)",
+          border: "1px solid var(--api-keys-card-border)",
+          boxShadow: "0 2px 8px var(--api-keys-card-shadow)",
+        }}
+      >
+        <Stack
+          gap={12}
           style={{
-            fontFamily: 'ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"',
+            fontFamily:
+              'ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"',
           }}
         >
           <Group justify="space-between">
             <Text fw={500}>
-              {t('config.apiKeys.creditsRemaining', 'Credits Remaining')}: {loading ? (
-                <SkeletonLoader type="block" width={40} height={14} />
-              ) : (
-                totalRemaining
-              )}
+              {t("config.apiKeys.creditsRemaining", "Credits Remaining")}:{" "}
+              {loading ? <SkeletonLoader type="block" width={40} height={14} /> : totalRemaining}
             </Text>
           </Group>
-          
-          <StackedBarChart 
+
+          <StackedBarChart
             fractions={fractions}
             width={640}
             height={22}
@@ -79,12 +80,13 @@ export default function UsageSection({ apiUsage, obscured, overlayMessage, loadi
             loading={Boolean(loading)}
             animate={!loading}
             animationDurationMs={900}
-            ariaLabel={t('config.apiKeys.chartAriaLabel', {
+            ariaLabel={t("config.apiKeys.chartAriaLabel", {
               includedUsed: Math.max(0, weeklyUsed),
               includedTotal: Math.max(0, apiUsage.weeklyCreditsAllocated),
               purchasedUsed: Math.max(0, boughtUsed),
               purchasedTotal: Math.max(0, apiUsage.totalBoughtCredits),
-              defaultValue: 'Credits usage: included {{includedUsed}} of {{includedTotal}}, purchased {{purchasedUsed}} of {{purchasedTotal}}'
+              defaultValue:
+                "Credits usage: included {{includedUsed}} of {{includedTotal}}, purchased {{purchasedUsed}} of {{purchasedTotal}}",
             })}
           />
 
@@ -93,18 +95,16 @@ export default function UsageSection({ apiUsage, obscured, overlayMessage, loadi
           <Group justify="space-between" wrap="wrap">
             <Group gap="lg">
               <Text size="sm" c="dimmed">
-                {t('config.apiKeys.nextReset', 'Next Reset')}: {loading ? (
+                {t("config.apiKeys.nextReset", "Next Reset")}:{" "}
+                {loading ? (
                   <SkeletonLoader type="block" width={120} height={12} />
                 ) : (
                   formatDate(apiUsage.weeklyResetDate, false)
                 )}
               </Text>
               <Text size="sm" c="dimmed">
-                {t('config.apiKeys.lastApiUse', 'Last API Use')}: {loading ? (
-                  <SkeletonLoader type="block" width={160} height={12} />
-                ) : (
-                  formatDate(apiUsage.lastApiUsage, true)
-                )}
+                {t("config.apiKeys.lastApiUse", "Last API Use")}:{" "}
+                {loading ? <SkeletonLoader type="block" width={160} height={12} /> : formatDate(apiUsage.lastApiUsage, true)}
               </Text>
             </Group>
           </Group>
@@ -130,10 +130,10 @@ export default function UsageSection({ apiUsage, obscured, overlayMessage, loadi
           }}
         >
           <Text size="sm" c="dimmed">
-            {overlayMessage || t('config.apiKeys.overlayMessage', 'Generate a key to see credits and available credits')}
+            {overlayMessage || t("config.apiKeys.overlayMessage", "Generate a key to see credits and available credits")}
           </Text>
         </div>
       )}
     </div>
   );
-}
\ No newline at end of file
+}
diff --git a/frontend/src/saas/components/shared/config/configSections/apiKeys/hooks/useApiKey.ts b/frontend/src/saas/components/shared/config/configSections/apiKeys/hooks/useApiKey.ts
index 870700eb26..9eb1a17b66 100644
--- a/frontend/src/saas/components/shared/config/configSections/apiKeys/hooks/useApiKey.ts
+++ b/frontend/src/saas/components/shared/config/configSections/apiKeys/hooks/useApiKey.ts
@@ -66,5 +66,3 @@ export function useApiKey() {
 }
 
 export default useApiKey;
-
-
diff --git a/frontend/src/saas/components/shared/config/configSections/apiKeys/hooks/useCredits.ts b/frontend/src/saas/components/shared/config/configSections/apiKeys/hooks/useCredits.ts
index 20c0a93866..12ad9b90e8 100644
--- a/frontend/src/saas/components/shared/config/configSections/apiKeys/hooks/useCredits.ts
+++ b/frontend/src/saas/components/shared/config/configSections/apiKeys/hooks/useCredits.ts
@@ -12,25 +12,13 @@ function coerceNumber(value: unknown, fallback = 0): number {
 function normalizeCredits(raw: Record<string, unknown>): ApiCredits {
   // Accept a variety of possible backend keys to be resilient
   return {
-    weeklyCreditsRemaining: coerceNumber(
-      raw?.weeklyCreditsRemaining ?? raw?.weeklyRemaining ?? raw?.weekly_left
-    ),
-    weeklyCreditsAllocated: coerceNumber(
-      raw?.weeklyCreditsAllocated ?? raw?.weeklyAllocated ?? raw?.weekly_total
-    ),
-    boughtCreditsRemaining: coerceNumber(
-      raw?.boughtCreditsRemaining ?? raw?.boughtRemaining ?? raw?.bought_left
-    ),
-    totalBoughtCredits: coerceNumber(
-      raw?.totalBoughtCredits ?? raw?.boughtTotal ?? raw?.bought_total
-    ),
-    totalAvailableCredits: coerceNumber(
-      raw?.totalAvailableCredits ?? raw?.totalRemaining ?? raw?.available_total
-    ),
-    weeklyResetDate:
-      String(raw?.weeklyResetDate ?? raw?.weeklyReset ?? raw?.reset_date ?? ""),
-    lastApiUsage:
-      String(raw?.lastApiUsage ?? raw?.lastApiUse ?? raw?.last_used_at ?? ""),
+    weeklyCreditsRemaining: coerceNumber(raw?.weeklyCreditsRemaining ?? raw?.weeklyRemaining ?? raw?.weekly_left),
+    weeklyCreditsAllocated: coerceNumber(raw?.weeklyCreditsAllocated ?? raw?.weeklyAllocated ?? raw?.weekly_total),
+    boughtCreditsRemaining: coerceNumber(raw?.boughtCreditsRemaining ?? raw?.boughtRemaining ?? raw?.bought_left),
+    totalBoughtCredits: coerceNumber(raw?.totalBoughtCredits ?? raw?.boughtTotal ?? raw?.bought_total),
+    totalAvailableCredits: coerceNumber(raw?.totalAvailableCredits ?? raw?.totalRemaining ?? raw?.available_total),
+    weeklyResetDate: String(raw?.weeklyResetDate ?? raw?.weeklyReset ?? raw?.reset_date ?? ""),
+    lastApiUsage: String(raw?.lastApiUsage ?? raw?.lastApiUse ?? raw?.last_used_at ?? ""),
   };
 }
 
@@ -49,13 +37,14 @@ export function useCredits() {
       const res = await apiClient.get<Record<string, unknown>>("/api/v1/credits");
       const normalized = normalizeCredits(res.data);
       // If backend returns an "empty" payload, keep data null so the UI stays in loading/skeleton
-      const isEmpty = !normalized.weeklyCreditsAllocated &&
-                      !normalized.weeklyCreditsRemaining &&
-                      !normalized.totalBoughtCredits &&
-                      !normalized.boughtCreditsRemaining &&
-                      !normalized.totalAvailableCredits &&
-                      !normalized.weeklyResetDate &&
-                      !normalized.lastApiUsage;
+      const isEmpty =
+        !normalized.weeklyCreditsAllocated &&
+        !normalized.weeklyCreditsRemaining &&
+        !normalized.totalBoughtCredits &&
+        !normalized.boughtCreditsRemaining &&
+        !normalized.totalAvailableCredits &&
+        !normalized.weeklyResetDate &&
+        !normalized.lastApiUsage;
       setData(isEmpty ? null : normalized);
     } catch (e: unknown) {
       setError(e instanceof Error ? e : new Error(String(e)));
@@ -75,5 +64,3 @@ export function useCredits() {
 }
 
 export default useCredits;
-
-
diff --git a/frontend/src/saas/components/shared/config/configSections/plan/ActivePlanSection.tsx b/frontend/src/saas/components/shared/config/configSections/plan/ActivePlanSection.tsx
index 078baab1be..a158904eab 100644
--- a/frontend/src/saas/components/shared/config/configSections/plan/ActivePlanSection.tsx
+++ b/frontend/src/saas/components/shared/config/configSections/plan/ActivePlanSection.tsx
@@ -1,10 +1,10 @@
-import React from 'react';
-import { Card, Text, Group, Flex, Alert, Button, Badge } from '@mantine/core';
-import AccessTimeIcon from '@mui/icons-material/AccessTime';
-import CreditCardIcon from '@mui/icons-material/CreditCard';
-import { useTranslation } from 'react-i18next';
-import { PlanTier } from '@app/hooks/usePlans';
-import { ManageBillingButton } from '@app/components/shared/ManageBillingButton';
+import React from "react";
+import { Card, Text, Group, Flex, Alert, Button, Badge } from "@mantine/core";
+import AccessTimeIcon from "@mui/icons-material/AccessTime";
+import CreditCardIcon from "@mui/icons-material/CreditCard";
+import { useTranslation } from "react-i18next";
+import { PlanTier } from "@app/hooks/usePlans";
+import { ManageBillingButton } from "@app/components/shared/ManageBillingButton";
 
 interface TrialStatus {
   isTrialing: boolean;
@@ -27,23 +27,20 @@ const ActivePlanSection: React.FC<ActivePlanSectionProps> = ({
   _activeSince,
   _nextBillingDate,
   trialStatus,
-  onAddPaymentClick
+  onAddPaymentClick,
 }) => {
   const { t } = useTranslation();
 
   return (
     <div>
       <Flex justify="space-between" align="center">
-        <h3 style={{ margin: 0, color: 'var(--mantine-color-text)', fontSize: '1rem' }}>
-          {t('plan.activePlan.title', 'Active Plan')}
+        <h3 style={{ margin: 0, color: "var(--mantine-color-text)", fontSize: "1rem" }}>
+          {t("plan.activePlan.title", "Active Plan")}
         </h3>
-        <ManageBillingButton
-          returnUrl={`${window.location.origin}/account`}
-          trialStatus={trialStatus}
-        />
+        <ManageBillingButton returnUrl={`${window.location.origin}/account`} trialStatus={trialStatus} />
       </Flex>
-      <p style={{ margin: '0.25rem 0 1rem 0', color: 'var(--mantine-color-dimmed)', fontSize: '0.875rem' }}>
-        {t('plan.activePlan.subtitle', 'Your current subscription details')}
+      <p style={{ margin: "0.25rem 0 1rem 0", color: "var(--mantine-color-dimmed)", fontSize: "0.875rem" }}>
+        {t("plan.activePlan.subtitle", "Your current subscription details")}
       </p>
 
       {/* Trial Status Alert */}
@@ -53,22 +50,23 @@ const ActivePlanSection: React.FC<ActivePlanSectionProps> = ({
           icon={<AccessTimeIcon sx={{ fontSize: 16 }} />}
           mt="md"
           mb="md"
-          title={t('plan.trial.title', 'Free Trial Active')}
+          title={t("plan.trial.title", "Free Trial Active")}
         >
           <Text size="sm">
-            {t('plan.trial.daysRemaining', 'Your trial ends in {{days}} days', {
-              days: trialStatus.daysRemaining
+            {t("plan.trial.daysRemaining", "Your trial ends in {{days}} days", {
+              days: trialStatus.daysRemaining,
             })}
           </Text>
           <Text size="xs" c="dimmed">
-            {t('plan.trial.endDate', 'Expires: {{date}}', {
-              date: new Date(trialStatus.trialEnd).toLocaleDateString()
+            {t("plan.trial.endDate", "Expires: {{date}}", {
+              date: new Date(trialStatus.trialEnd).toLocaleDateString(),
             })}
           </Text>
           {trialStatus.hasScheduledSub ? (
             <Text size="xs" c="green" fw={500} mt="sm">
-              ✓ {t('plan.trial.subscriptionScheduled', 'Subscription scheduled - starts {{date}}', {
-                date: new Date(trialStatus.trialEnd).toLocaleDateString()
+              ✓{" "}
+              {t("plan.trial.subscriptionScheduled", "Subscription scheduled - starts {{date}}", {
+                date: new Date(trialStatus.trialEnd).toLocaleDateString(),
               })}
             </Text>
           ) : (
@@ -80,7 +78,7 @@ const ActivePlanSection: React.FC<ActivePlanSectionProps> = ({
                 onClick={onAddPaymentClick}
                 leftSection={<CreditCardIcon sx={{ fontSize: 14 }} />}
               >
-                {t('plan.trial.subscribeToPro', 'Subscribe to Pro')}
+                {t("plan.trial.subscribeToPro", "Subscribe to Pro")}
               </Button>
             )
           )}
@@ -96,7 +94,7 @@ const ActivePlanSection: React.FC<ActivePlanSectionProps> = ({
               </Text>
               {trialStatus?.isTrialing && (
                 <Badge color="blue" variant="light">
-                  {t('plan.trial.badge', 'Trial')}
+                  {t("plan.trial.badge", "Trial")}
                 </Badge>
               )}
             </Group>
@@ -108,7 +106,8 @@ const ActivePlanSection: React.FC<ActivePlanSectionProps> = ({
           </div>
           <div className="text-right">
             <Text size="xl" fw={700}>
-              {currentPlan.currency}{currentPlan.price}/month
+              {currentPlan.currency}
+              {currentPlan.price}/month
             </Text>
             {/* {nextBillingDate && (
               <Text size="sm" c="dimmed">
diff --git a/frontend/src/saas/components/shared/config/configSections/plan/ApiPackagesSection.tsx b/frontend/src/saas/components/shared/config/configSections/plan/ApiPackagesSection.tsx
index 678354afee..9c35e2ccd2 100644
--- a/frontend/src/saas/components/shared/config/configSections/plan/ApiPackagesSection.tsx
+++ b/frontend/src/saas/components/shared/config/configSections/plan/ApiPackagesSection.tsx
@@ -1,7 +1,7 @@
-import React from 'react';
-import { Button, Card, Text, Stack, Flex, Slider } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { CreditsPack } from '@app/components/shared/StripeCheckoutSaas';
+import React from "react";
+import { Button, Card, Text, Stack, Flex, Slider } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { CreditsPack } from "@app/components/shared/StripeCheckoutSaas";
 
 interface ApiPackage {
   id: string;
@@ -23,17 +23,17 @@ const ApiPackagesSection: React.FC<ApiPackagesSectionProps> = ({
   apiPackages,
   selectedCredits,
   onSelectedCreditsChange,
-  onCreditPurchaseClick
+  onCreditPurchaseClick,
 }) => {
   const { t } = useTranslation();
 
   return (
     <div>
-      <h3 style={{ margin: 0, color: 'var(--mantine-color-text)', fontSize: '1rem' }}>
-        {t('plan.apiPackages.title', 'API Credit Packages')}
+      <h3 style={{ margin: 0, color: "var(--mantine-color-text)", fontSize: "1rem" }}>
+        {t("plan.apiPackages.title", "API Credit Packages")}
       </h3>
-      <p style={{ margin: '0.25rem 0 1rem 0', color: 'var(--mantine-color-dimmed)', fontSize: '0.875rem' }}>
-        {t('plan.apiPackages.subtitle', 'Purchase API credits for your applications')}
+      <p style={{ margin: "0.25rem 0 1rem 0", color: "var(--mantine-color-dimmed)", fontSize: "0.875rem" }}>
+        {t("plan.apiPackages.subtitle", "Purchase API credits for your applications")}
       </p>
 
       <Card padding="xl" radius="md" className="mb-4">
@@ -41,7 +41,7 @@ const ApiPackagesSection: React.FC<ApiPackagesSectionProps> = ({
           {/* Credits Selection */}
           <div>
             <Text size="lg" fw={600} mb="md">
-              {t('plan.selectCredits', 'Select Credit Amount')}
+              {t("plan.selectCredits", "Select Credit Amount")}
             </Text>
 
             <div className="px-4">
@@ -53,10 +53,10 @@ const ApiPackagesSection: React.FC<ApiPackagesSectionProps> = ({
                 max={3}
                 step={0.01}
                 marks={[
-                  { value: 0, label: '100' },
-                  { value: 1, label: '500' },
-                  { value: 2, label: '1K' },
-                  { value: 3, label: '5K' }
+                  { value: 0, label: "100" },
+                  { value: 1, label: "500" },
+                  { value: 2, label: "1K" },
+                  { value: 3, label: "5K" },
                 ]}
                 size="lg"
                 className="mb-6"
@@ -78,10 +78,11 @@ const ApiPackagesSection: React.FC<ApiPackagesSectionProps> = ({
 
             <div className="">
               <Text size="xl" fw={700}>
-                {apiPackages[Math.round(selectedCredits)].currency}{apiPackages[Math.round(selectedCredits)].price}
+                {apiPackages[Math.round(selectedCredits)].currency}
+                {apiPackages[Math.round(selectedCredits)].price}
               </Text>
               <Text size="sm" c="dimmed">
-                {t('plan.totalCost', 'Total Cost')}
+                {t("plan.totalCost", "Total Cost")}
               </Text>
             </div>
 
@@ -89,7 +90,7 @@ const ApiPackagesSection: React.FC<ApiPackagesSectionProps> = ({
               size="lg"
               onClick={() => onCreditPurchaseClick(apiPackages[Math.round(selectedCredits)].id as CreditsPack)}
             >
-              {t('plan.purchase', 'Purchase')}
+              {t("plan.purchase", "Purchase")}
             </Button>
           </Flex>
         </Stack>
@@ -98,4 +99,4 @@ const ApiPackagesSection: React.FC<ApiPackagesSectionProps> = ({
   );
 };
 
-export default ApiPackagesSection;
\ No newline at end of file
+export default ApiPackagesSection;
diff --git a/frontend/src/saas/components/shared/config/configSections/plan/AvailablePlansSection.tsx b/frontend/src/saas/components/shared/config/configSections/plan/AvailablePlansSection.tsx
index c8fd19321a..1788748057 100644
--- a/frontend/src/saas/components/shared/config/configSections/plan/AvailablePlansSection.tsx
+++ b/frontend/src/saas/components/shared/config/configSections/plan/AvailablePlansSection.tsx
@@ -1,8 +1,8 @@
-import React, { useState } from 'react';
-import { Button, Card, Badge, Text, Collapse } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { PlanTier } from '@app/hooks/usePlans';
-import PlanCard from '@app/components/shared/config/configSections/plan/PlanCard';
+import React, { useState } from "react";
+import { Button, Card, Badge, Text, Collapse } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { PlanTier } from "@app/hooks/usePlans";
+import PlanCard from "@app/components/shared/config/configSections/plan/PlanCard";
 
 interface AvailablePlansSectionProps {
   plans: PlanTier[];
@@ -16,27 +16,23 @@ interface AvailablePlansSectionProps {
   loginEnabled?: boolean;
 }
 
-const AvailablePlansSection: React.FC<AvailablePlansSectionProps> = ({
-  plans,
-  currentPlan,
-  onUpgradeClick
-}) => {
+const AvailablePlansSection: React.FC<AvailablePlansSectionProps> = ({ plans, currentPlan, onUpgradeClick }) => {
   const { t } = useTranslation();
   const [showComparison, setShowComparison] = useState(false);
 
-  const isUserProOrAbove = currentPlan?.id === 'pro' || currentPlan?.id === 'enterprise';
+  const isUserProOrAbove = currentPlan?.id === "pro" || currentPlan?.id === "enterprise";
 
   return (
     <div>
-      <h3 style={{ margin: 0, color: 'var(--mantine-color-text)', fontSize: '1rem' }}>
-        {t('plan.availablePlans.title', 'Available Plans')}
+      <h3 style={{ margin: 0, color: "var(--mantine-color-text)", fontSize: "1rem" }}>
+        {t("plan.availablePlans.title", "Available Plans")}
       </h3>
-      <p style={{ margin: '0.25rem 0 1rem 0', color: 'var(--mantine-color-dimmed)', fontSize: '0.875rem' }}>
-        {t('plan.availablePlans.subtitle', 'Choose the plan that fits your needs')}
+      <p style={{ margin: "0.25rem 0 1rem 0", color: "var(--mantine-color-dimmed)", fontSize: "0.875rem" }}>
+        {t("plan.availablePlans.subtitle", "Choose the plan that fits your needs")}
       </p>
 
-      <div className="flex h-[20rem] mb-4 " style={{ gap: '1rem', overflowX: 'auto' }}>
-        {plans.map(plan => (
+      <div className="flex h-[20rem] mb-4 " style={{ gap: "1rem", overflowX: "auto" }}>
+        {plans.map((plan) => (
           <PlanCard
             key={plan.id}
             plan={plan}
@@ -48,29 +44,25 @@ const AvailablePlansSection: React.FC<AvailablePlansSectionProps> = ({
       </div>
 
       <div className="text-center">
-        <Button
-          variant="subtle"
-          onClick={() => setShowComparison(!showComparison)}
-        >
+        <Button variant="subtle" onClick={() => setShowComparison(!showComparison)}>
           {showComparison
-            ? t('plan.hideComparison', 'Hide Feature Comparison')
-            : t('plan.showComparison', 'Compare All Features')
-          }
+            ? t("plan.hideComparison", "Hide Feature Comparison")
+            : t("plan.showComparison", "Compare All Features")}
         </Button>
       </div>
 
       <Collapse in={showComparison}>
         <Card padding="lg" radius="md" withBorder className="mt-4">
           <Text size="lg" fw={600} mb="md">
-            {t('plan.featureComparison', 'Feature Comparison')}
+            {t("plan.featureComparison", "Feature Comparison")}
           </Text>
 
           <div className="overflow-x-auto">
             <table className="w-full">
               <thead>
                 <tr className="border-b">
-                  <th className="text-left p-2">{t('plan.feature.title', 'Feature')}</th>
-                  {plans.map(plan => (
+                  <th className="text-left p-2">{t("plan.feature.title", "Feature")}</th>
+                  {plans.map((plan) => (
                     <th key={plan.id} className="text-center p-2 min-w-24 relative">
                       {plan.name}
                       {plan.popular && (
@@ -78,16 +70,16 @@ const AvailablePlansSection: React.FC<AvailablePlansSectionProps> = ({
                           color="blue"
                           variant="filled"
                           style={{
-                            position: 'absolute',
-                            top: '0rem',
-                            right: '-2rem',
-                            fontSize: '0.5rem',
-                            fontWeight: '500',
-                            height: '1rem',
-                            padding: '0 0.1rem'
+                            position: "absolute",
+                            top: "0rem",
+                            right: "-2rem",
+                            fontSize: "0.5rem",
+                            fontWeight: "500",
+                            height: "1rem",
+                            padding: "0 0.1rem",
                           }}
                         >
-                          {t('plan.popular', 'Popular')}
+                          {t("plan.popular", "Popular")}
                         </Badge>
                       )}
                     </th>
@@ -97,13 +89,13 @@ const AvailablePlansSection: React.FC<AvailablePlansSectionProps> = ({
               <tbody>
                 {plans[0].features.map((_, featureIndex) => (
                   <tr key={featureIndex} className="border-b">
-                    <td className="p-2">
-                      {plans[0].features[featureIndex].name}
-                    </td>
-                    {plans.map(plan => (
+                    <td className="p-2">{plans[0].features[featureIndex].name}</td>
+                    {plans.map((plan) => (
                       <td key={plan.id} className="text-center p-2">
                         {plan.features[featureIndex].included ? (
-                          <Text c="green" fw={600}>✓</Text>
+                          <Text c="green" fw={600}>
+                            ✓
+                          </Text>
                         ) : (
                           <Text c="gray">-</Text>
                         )}
diff --git a/frontend/src/saas/components/shared/config/configSections/plan/PlanCard.tsx b/frontend/src/saas/components/shared/config/configSections/plan/PlanCard.tsx
index de02c959ab..7d536da222 100644
--- a/frontend/src/saas/components/shared/config/configSections/plan/PlanCard.tsx
+++ b/frontend/src/saas/components/shared/config/configSections/plan/PlanCard.tsx
@@ -1,17 +1,17 @@
-import React from 'react';
-import { Button, Card, Badge, Text, Group, Stack } from '@mantine/core';
-import { useTranslation } from 'react-i18next';
-import { PlanTier } from '@app/hooks/usePlans';
+import React from "react";
+import { Button, Card, Badge, Text, Group, Stack } from "@mantine/core";
+import { useTranslation } from "react-i18next";
+import { PlanTier } from "@app/hooks/usePlans";
 
 interface PlanCardProps {
   plan?: PlanTier;
-  planGroup?: { monthly?: PlanTier; yearly?: PlanTier };  // For proprietary PlanTierGroup compatibility
+  planGroup?: { monthly?: PlanTier; yearly?: PlanTier }; // For proprietary PlanTierGroup compatibility
   isCurrentPlan?: boolean;
   isCurrentTier?: boolean;
   isDowngrade?: boolean;
   isUserProOrAbove?: boolean;
   currentLicenseInfo?: unknown;
-  currentTier?: string | null;  // Accept null for proprietary compatibility
+  currentTier?: string | null; // Accept null for proprietary compatibility
   onUpgradeClick?: (plan: PlanTier) => void;
   onManageClick?: (plan: PlanTier) => void;
   loginEnabled?: boolean;
@@ -28,7 +28,7 @@ const PlanCard: React.FC<PlanCardProps> = ({
   currentTier: _currentTier,
   onUpgradeClick,
   onManageClick: _onManageClick,
-  loginEnabled: _loginEnabled
+  loginEnabled: _loginEnabled,
 }) => {
   // Use plan from props, or extract from planGroup if proprietary is using it
   const plan = propPlan || planGroup?.monthly || planGroup?.yearly;
@@ -36,26 +36,24 @@ const PlanCard: React.FC<PlanCardProps> = ({
 
   if (!plan) return null; // Safety check
 
-  const shouldHideUpgrade = plan.id === 'free' && isUserProOrAbove;
+  const shouldHideUpgrade = plan.id === "free" && isUserProOrAbove;
 
   return (
     <Card key={plan.id} padding="lg" radius="sm" withBorder className="h-full w-[33%] relative">
       {plan.popular && (
-        <Badge
-          variant="filled"
-          size='xs'
-          style={{ position: 'absolute', top: '0.5rem', right: '0.5rem' }}
-        >
-          {t('plan.popular', 'Popular')}
+        <Badge variant="filled" size="xs" style={{ position: "absolute", top: "0.5rem", right: "0.5rem" }}>
+          {t("plan.popular", "Popular")}
         </Badge>
       )}
 
       <Stack gap="md" className="h-full">
         <div>
-          <Text size="lg" fw={600}>{plan.name}</Text>
+          <Text size="lg" fw={600}>
+            {plan.name}
+          </Text>
           <Group gap="xs" align="baseline">
             <Text size="2xl" fw={700}>
-              {plan.isContactOnly ? t('plan.customPricing', 'Custom') : `${plan.currency}${plan.price}`}
+              {plan.isContactOnly ? t("plan.customPricing", "Custom") : `${plan.currency}${plan.price}`}
             </Text>
             {!plan.isContactOnly && (
               <Text size="sm" c="dimmed">
@@ -83,11 +81,10 @@ const PlanCard: React.FC<PlanCardProps> = ({
             onClick={() => onUpgradeClick?.(plan)}
           >
             {isCurrentPlan
-              ? t('plan.current', 'Current Plan')
+              ? t("plan.current", "Current Plan")
               : plan.isContactOnly
-              ? t('plan.contact', 'Get in Touch')
-              : t('plan.upgrade', 'Upgrade')
-            }
+                ? t("plan.contact", "Get in Touch")
+                : t("plan.upgrade", "Upgrade")}
           </Button>
         )}
       </Stack>
diff --git a/frontend/src/saas/components/shared/config/saasConfigNavSections.tsx b/frontend/src/saas/components/shared/config/saasConfigNavSections.tsx
index 9a0db25aa0..cb89bfa184 100644
--- a/frontend/src/saas/components/shared/config/saasConfigNavSections.tsx
+++ b/frontend/src/saas/components/shared/config/saasConfigNavSections.tsx
@@ -1,42 +1,42 @@
-import React from 'react';
-import { type TFunction } from 'i18next';
+import React from "react";
+import { type TFunction } from "i18next";
 import {
   createConfigNavSections as createCoreConfigNavSections,
   type ConfigNavSection,
-} from '@core/components/shared/config/configNavSections';
-import HotkeysSection from '@app/components/shared/config/configSections/HotkeysSection';
-import GeneralSection from '@app/components/shared/config/configSections/GeneralSection';
-import PasswordSecurity from '@app/components/shared/config/configSections/PasswordSecurity';
-import ApiKeys from '@app/components/shared/config/configSections/ApiKeys';
-import Plan from '@app/components/shared/config/configSections/Plan';
+} from "@core/components/shared/config/configNavSections";
+import HotkeysSection from "@app/components/shared/config/configSections/HotkeysSection";
+import GeneralSection from "@app/components/shared/config/configSections/GeneralSection";
+import PasswordSecurity from "@app/components/shared/config/configSections/PasswordSecurity";
+import ApiKeys from "@app/components/shared/config/configSections/ApiKeys";
+import Plan from "@app/components/shared/config/configSections/Plan";
 
 type OverviewComponent = React.ComponentType<{ onLogoutClick: () => void }>;
 
 interface CreateSaasConfigNavSectionsOptions {
   isDev?: boolean;
   isAnonymous?: boolean;
-  t: TFunction<'translation', undefined>;
+  t: TFunction<"translation", undefined>;
 }
 
 function ensurePreferencesSection(sections: ConfigNavSection[]): ConfigNavSection[] {
-  const preferencesIndex = sections.findIndex(section => section.title === 'Preferences');
+  const preferencesIndex = sections.findIndex((section) => section.title === "Preferences");
 
   if (preferencesIndex === -1) {
     return [
       ...sections,
       {
-        title: 'Preferences',
+        title: "Preferences",
         items: [
           {
-            key: 'general',
-            label: 'General',
-            icon: 'settings-rounded',
+            key: "general",
+            label: "General",
+            icon: "settings-rounded",
             component: <GeneralSection />,
           },
           {
-            key: 'hotkeys',
-            label: 'Keyboard Shortcuts',
-            icon: 'keyboard-rounded',
+            key: "hotkeys",
+            label: "Keyboard Shortcuts",
+            icon: "keyboard-rounded",
             component: <HotkeysSection />,
           },
         ],
@@ -48,8 +48,8 @@ function ensurePreferencesSection(sections: ConfigNavSection[]): ConfigNavSectio
 }
 
 function appendDeveloperSection(sections: ConfigNavSection[]): ConfigNavSection[] {
-  const hasDeveloper = sections.some(section =>
-    section.items.some(item => item.key === 'developer' || item.key === 'api-keys'),
+  const hasDeveloper = sections.some((section) =>
+    section.items.some((item) => item.key === "developer" || item.key === "api-keys"),
   );
 
   if (hasDeveloper) {
@@ -59,12 +59,12 @@ function appendDeveloperSection(sections: ConfigNavSection[]): ConfigNavSection[
   return [
     ...sections,
     {
-      title: 'Developer',
+      title: "Developer",
       items: [
         {
-          key: 'api-keys',
-          label: 'API Keys',
-          icon: 'key-rounded',
+          key: "api-keys",
+          label: "API Keys",
+          icon: "key-rounded",
           component: <ApiKeys />,
         },
       ],
@@ -72,13 +72,8 @@ function appendDeveloperSection(sections: ConfigNavSection[]): ConfigNavSection[
   ];
 }
 
-function appendBillingSection(
-  sections: ConfigNavSection[],
-  t: TFunction<'translation', undefined>,
-): ConfigNavSection[] {
-  const hasPlan = sections.some(section =>
-    section.items.some(item => item.key === 'plan'),
-  );
+function appendBillingSection(sections: ConfigNavSection[], t: TFunction<"translation", undefined>): ConfigNavSection[] {
+  const hasPlan = sections.some((section) => section.items.some((item) => item.key === "plan"));
 
   if (hasPlan) {
     return sections;
@@ -87,12 +82,12 @@ function appendBillingSection(
   return [
     ...sections,
     {
-      title: 'Billing',
+      title: "Billing",
       items: [
         {
-          key: 'plan',
-          label: t('config.plan', 'Plan'),
-          icon: 'credit-card',
+          key: "plan",
+          label: t("config.plan", "Plan"),
+          icon: "credit-card",
           component: <Plan />,
         },
       ],
@@ -109,18 +104,18 @@ export function createSaasConfigNavSections(
 
   // Create Account section as the first section with Overview and Passwords & Security
   const accountSection: ConfigNavSection = {
-    title: t('config.account.overview.title', 'Account Settings'),
+    title: t("config.account.overview.title", "Account Settings"),
     items: [
       {
-        key: 'overview',
-        label: t('config.account.overview.label', 'Overview'),
-        icon: 'account-circle',
+        key: "overview",
+        label: t("config.account.overview.label", "Overview"),
+        icon: "account-circle",
         component: <Overview onLogoutClick={onLogoutClick} />,
       },
       {
-        key: 'security',
-        label: 'Passwords & Security',
-        icon: 'lock',
+        key: "security",
+        label: "Passwords & Security",
+        icon: "lock",
         component: <PasswordSecurity />,
       },
     ],
@@ -129,12 +124,10 @@ export function createSaasConfigNavSections(
   let sections = [accountSection, ...baseSections];
 
   // Suppress OSS-only sections (update checker, login config banner) not relevant in SaaS
-  sections = sections.map(section => ({
+  sections = sections.map((section) => ({
     ...section,
-    items: section.items.map(item =>
-      item.key === 'general'
-        ? { ...item, component: <GeneralSection hideUpdateSection hideAdminBanner /> }
-        : item
+    items: section.items.map((item) =>
+      item.key === "general" ? { ...item, component: <GeneralSection hideUpdateSection hideAdminBanner /> } : item,
     ),
   }));
 
@@ -146,7 +139,7 @@ export function createSaasConfigNavSections(
   }
 
   if (isDev) {
-    console.debug('[AppConfigModal] SaaS navigation sections', sections);
+    console.debug("[AppConfigModal] SaaS navigation sections", sections);
   }
 
   return sections;
diff --git a/frontend/src/saas/components/shared/config/types.ts b/frontend/src/saas/components/shared/config/types.ts
index dded2ce227..51a309fc45 100644
--- a/frontend/src/saas/components/shared/config/types.ts
+++ b/frontend/src/saas/components/shared/config/types.ts
@@ -1,67 +1,67 @@
 // Re-export from core for compatibility
 // Override VALID_NAV_KEYS to include saas-specific keys
 export const VALID_NAV_KEYS = [
-  'overview',
-  'password-security',
-  'preferences',
-  'notifications',
-  'connections',
-  'general',
-  'people',
-  'teams',
-  'security',
-  'identity',
-  'plan',
-  'payments',
-  'requests',
-  'developer',
-  'api-keys',
-  'hotkeys',
-  'adminGeneral',
-  'adminSecurity',
-  'adminConnections',
-  'adminPrivacy',
-  'adminDatabase',
-  'adminAdvanced',
-  'adminLegal',
-  'adminPremium',
-  'adminFeatures',
-  'adminPlan',
-  'adminAudit',
-  'adminUsage',
-  'adminEndpoints'
+  "overview",
+  "password-security",
+  "preferences",
+  "notifications",
+  "connections",
+  "general",
+  "people",
+  "teams",
+  "security",
+  "identity",
+  "plan",
+  "payments",
+  "requests",
+  "developer",
+  "api-keys",
+  "hotkeys",
+  "adminGeneral",
+  "adminSecurity",
+  "adminConnections",
+  "adminPrivacy",
+  "adminDatabase",
+  "adminAdvanced",
+  "adminLegal",
+  "adminPremium",
+  "adminFeatures",
+  "adminPlan",
+  "adminAudit",
+  "adminUsage",
+  "adminEndpoints",
 ] as const;
 
 // Extend NavKey to include saas-specific keys
 export type NavKey =
-  | 'overview'
-  | 'password-security'
-  | 'preferences'
-  | 'notifications'
-  | 'connections'
-  | 'general'
-  | 'people'
-  | 'teams'
-  | 'security'
-  | 'identity'
-  | 'plan'
-  | 'payments'
-  | 'requests'
-  | 'developer'
-  | 'api-keys'
-  | 'hotkeys'
-  | 'adminGeneral'
-  | 'adminSecurity'
-  | 'adminConnections'
-  | 'adminPrivacy'
-  | 'adminDatabase'
-  | 'adminAdvanced'
-  | 'adminLegal'
-  | 'adminPremium'
-  | 'adminFeatures'
-  | 'adminPlan'
-  | 'adminAudit'
-  | 'adminUsage'
-  | 'adminEndpoints';
+  | "overview"
+  | "password-security"
+  | "preferences"
+  | "notifications"
+  | "connections"
+  | "general"
+  | "people"
+  | "teams"
+  | "security"
+  | "identity"
+  | "plan"
+  | "payments"
+  | "requests"
+  | "developer"
+  | "api-keys"
+  | "hotkeys"
+  | "adminGeneral"
+  | "adminSecurity"
+  | "adminConnections"
+  | "adminPrivacy"
+  | "adminDatabase"
+  | "adminAdvanced"
+  | "adminLegal"
+  | "adminPremium"
+  | "adminFeatures"
+  | "adminPlan"
+  | "adminAudit"
+  | "adminUsage"
+  | "adminEndpoints";
 
-// some of these are not used yet, but appear in figma designs
\ No newline at end of file
+// some of these are not used yet, but appear in figma designs
diff --git a/frontend/src/saas/components/shared/utils/date.ts b/frontend/src/saas/components/shared/utils/date.ts
index c3926f1add..dd44c902ff 100644
--- a/frontend/src/saas/components/shared/utils/date.ts
+++ b/frontend/src/saas/components/shared/utils/date.ts
@@ -10,5 +10,3 @@ export function formatUTC(iso: string, withTime: boolean): string {
   }).format(date);
   return withTime ? `${formatted} UTC` : formatted;
 }
-
-
diff --git a/frontend/src/saas/components/tools/sign/SignSettings.tsx b/frontend/src/saas/components/tools/sign/SignSettings.tsx
index 1603728aa2..d5ed91b643 100644
--- a/frontend/src/saas/components/tools/sign/SignSettings.tsx
+++ b/frontend/src/saas/components/tools/sign/SignSettings.tsx
@@ -1,11 +1,11 @@
-import { useState, useEffect, useMemo, useRef, useCallback } from 'react';
+import { useState, useEffect, useMemo, useRef, useCallback } from "react";
 import { useTranslation } from "react-i18next";
-import { Stack, Button, Text, Alert, SegmentedControl, Divider, ActionIcon, Tooltip, Group, Box } from '@mantine/core';
+import { Stack, Button, Text, Alert, SegmentedControl, Divider, ActionIcon, Tooltip, Group, Box } from "@mantine/core";
 import { SignParameters } from "@app/hooks/tools/sign/useSignParameters";
 import { SuggestedToolsSection } from "@app/components/tools/shared/SuggestedToolsSection";
 import { useSignature } from "@app/contexts/SignatureContext";
 import { useViewer } from "@app/contexts/ViewerContext";
-import { PLACEMENT_ACTIVATION_DELAY, FILE_SWITCH_ACTIVATION_DELAY } from '@app/constants/signConstants';
+import { PLACEMENT_ACTIVATION_DELAY, FILE_SWITCH_ACTIVATION_DELAY } from "@app/constants/signConstants";
 
 // Import the new reusable components
 import { DrawingCanvas } from "@app/components/annotation/shared/DrawingCanvas";
@@ -14,9 +14,15 @@ import { ImageUploader } from "@app/components/annotation/shared/ImageUploader";
 import { TextInputWithFont } from "@app/components/annotation/shared/TextInputWithFont";
 import { ColorPicker } from "@app/components/annotation/shared/ColorPicker";
 import { LocalIcon } from "@app/components/shared/LocalIcon";
-import { useSavedSignatures, SavedSignature, SavedSignaturePayload, SavedSignatureType, AddSignatureResult } from '@app/hooks/tools/sign/useSavedSignatures';
-import { SavedSignaturesSection } from '@app/components/tools/sign/SavedSignaturesSection';
-import { buildSignaturePreview } from '@app/utils/signaturePreview';
+import {
+  useSavedSignatures,
+  SavedSignature,
+  SavedSignaturePayload,
+  SavedSignatureType,
+  AddSignatureResult,
+} from "@app/hooks/tools/sign/useSavedSignatures";
+import { SavedSignaturesSection } from "@app/components/tools/sign/SavedSignaturesSection";
+import { buildSignaturePreview } from "@app/utils/signaturePreview";
 
 type SignatureDrafts = {
   canvas?: string;
@@ -45,9 +51,9 @@ interface SignSettingsProps {
   defaultSignatureSource?: SignatureSource;
 }
 
-export type SignatureSource = 'canvas' | 'image' | 'text' | 'saved';
+export type SignatureSource = "canvas" | "image" | "text" | "saved";
 
-const DEFAULT_SIGNATURE_SOURCES: SignatureSource[] = ['canvas', 'image', 'text', 'saved'];
+const DEFAULT_SIGNATURE_SOURCES: SignatureSource[] = ["canvas", "image", "text", "saved"];
 
 const SignSettings = ({
   parameters,
@@ -59,7 +65,7 @@ const SignSettings = ({
   onUndo,
   onRedo,
   onSave,
-  translationScope = 'sign',
+  translationScope = "sign",
   allowedSignatureSources = DEFAULT_SIGNATURE_SOURCES,
   defaultSignatureSource,
 }: SignSettingsProps) => {
@@ -71,18 +77,18 @@ const SignSettings = ({
   const translate = useCallback(
     (key: string, defaultValue: string, options?: Record<string, unknown>) =>
       t(`${translationScope}.${key}`, { defaultValue, ...options }),
-    [t, translationScope]
+    [t, translationScope],
   );
   const effectiveDefaultSource =
     (defaultSignatureSource && allowedSignatureSources.includes(defaultSignatureSource)
       ? defaultSignatureSource
-      : allowedSignatureSources[0]) ?? 'text';
-  const canUseSavedLibrary = allowedSignatureSources.includes('saved');
+      : allowedSignatureSources[0]) ?? "text";
+  const canUseSavedLibrary = allowedSignatureSources.includes("saved");
 
   // State for drawing
-  const [selectedColor, setSelectedColor] = useState('#000000');
+  const [selectedColor, setSelectedColor] = useState("#000000");
   const [penSize, setPenSize] = useState(2);
-  const [penSizeInput, setPenSizeInput] = useState('2');
+  const [penSizeInput, setPenSizeInput] = useState("2");
   const [isColorPickerOpen, setIsColorPickerOpen] = useState(false);
   const [isPlacementManuallyPaused, setPlacementManuallyPaused] = useState(false);
 
@@ -90,7 +96,7 @@ const SignSettings = ({
   const [canvasSignatureData, setCanvasSignatureData] = useState<string | undefined>();
   const [imageSignatureData, setImageSignatureData] = useState<string | undefined>();
   const [signatureDrafts, setSignatureDrafts] = useState<SignatureDrafts>({});
-  const lastSyncedTextDraft = useRef<SignatureDrafts['text'] | null>(null);
+  const lastSyncedTextDraft = useRef<SignatureDrafts["text"] | null>(null);
   const lastAppliedPlacementKey = useRef<string | null>(null);
   const previousFileIndexRef = useRef(activeFileIndex);
   const {
@@ -124,157 +130,178 @@ const SignSettings = ({
         fontFamily,
         textColor,
       }),
-    []
+    [],
   );
 
   const getDefaultSavedLabel = useCallback(
     (type: SavedSignatureType) => {
       const nextIndex = (byTypeCounts[type] ?? 0) + 1;
-      let baseLabel = translate('saved.defaultLabel', 'Signature');
-      if (type === 'canvas') {
-        baseLabel = translate('saved.defaultCanvasLabel', 'Drawing signature');
-      } else if (type === 'image') {
-        baseLabel = translate('saved.defaultImageLabel', 'Uploaded signature');
-      } else if (type === 'text') {
-        baseLabel = translate('saved.defaultTextLabel', 'Typed signature');
+      let baseLabel = translate("saved.defaultLabel", "Signature");
+      if (type === "canvas") {
+        baseLabel = translate("saved.defaultCanvasLabel", "Drawing signature");
+      } else if (type === "image") {
+        baseLabel = translate("saved.defaultImageLabel", "Uploaded signature");
+      } else if (type === "text") {
+        baseLabel = translate("saved.defaultTextLabel", "Typed signature");
       }
       return `${baseLabel} ${nextIndex}`;
     },
-    [byTypeCounts, t, translate]
+    [byTypeCounts, t, translate],
   );
 
   const signatureKeysByType = useMemo(() => {
     const canvasKey = canvasSignatureData ?? null;
     const imageKey = imageSignatureData ?? null;
     const textKey = buildTextSignatureKey(
-      parameters.signerName ?? '',
+      parameters.signerName ?? "",
       parameters.fontSize ?? 16,
-      parameters.fontFamily ?? 'Helvetica',
-      parameters.textColor ?? '#000000'
+      parameters.fontFamily ?? "Helvetica",
+      parameters.textColor ?? "#000000",
     );
     return {
       canvas: canvasKey,
       image: imageKey,
       text: textKey,
     };
-  }, [canvasSignatureData, imageSignatureData, buildTextSignatureKey, parameters.signerName, parameters.fontSize, parameters.fontFamily, parameters.textColor]);
+  }, [
+    canvasSignatureData,
+    imageSignatureData,
+    buildTextSignatureKey,
+    parameters.signerName,
+    parameters.fontSize,
+    parameters.fontFamily,
+    parameters.textColor,
+  ]);
 
   const saveSignatureToLibrary = useCallback(
-    async (payload: SavedSignaturePayload, type: SavedSignatureType, scope: 'personal' | 'shared'): Promise<AddSignatureResult> => {
+    async (
+      payload: SavedSignaturePayload,
+      type: SavedSignatureType,
+      scope: "personal" | "shared",
+    ): Promise<AddSignatureResult> => {
       if (isSavedSignatureLimitReached) {
-        return { success: false, reason: 'limit' };
+        return { success: false, reason: "limit" };
       }
       return await addSignature(payload, getDefaultSavedLabel(type), scope);
     },
-    [addSignature, getDefaultSavedLabel, isSavedSignatureLimitReached]
+    [addSignature, getDefaultSavedLabel, isSavedSignatureLimitReached],
   );
 
   const setLastSavedKeyForType = useCallback(
     (type: SavedSignatureType, explicitKey?: string | null) => {
-      setLastSavedSignatureKeys(prev => ({
+      setLastSavedSignatureKeys((prev) => ({
         ...prev,
-        [type]: explicitKey !== undefined ? explicitKey : signatureKeysByType[type] ?? null,
+        [type]: explicitKey !== undefined ? explicitKey : (signatureKeysByType[type] ?? null),
       }));
     },
-    [signatureKeysByType]
+    [signatureKeysByType],
   );
 
-  const handleSaveCanvasSignature = useCallback(async (scope: 'personal' | 'shared') => {
-    if (!canvasSignatureData) {
-      return;
-    }
-    const result = await saveSignatureToLibrary({ type: 'canvas', dataUrl: canvasSignatureData }, 'canvas', scope);
-    if (result.success) {
-      setLastSavedKeyForType('canvas');
-    }
-  }, [canvasSignatureData, saveSignatureToLibrary, setLastSavedKeyForType]);
+  const handleSaveCanvasSignature = useCallback(
+    async (scope: "personal" | "shared") => {
+      if (!canvasSignatureData) {
+        return;
+      }
+      const result = await saveSignatureToLibrary({ type: "canvas", dataUrl: canvasSignatureData }, "canvas", scope);
+      if (result.success) {
+        setLastSavedKeyForType("canvas");
+      }
+    },
+    [canvasSignatureData, saveSignatureToLibrary, setLastSavedKeyForType],
+  );
 
-  const handleSaveImageSignature = useCallback(async (scope: 'personal' | 'shared') => {
-    if (!imageSignatureData) {
-      return;
-    }
-    const result = await saveSignatureToLibrary({ type: 'image', dataUrl: imageSignatureData }, 'image', scope);
-    if (result.success) {
-      setLastSavedKeyForType('image');
-    }
-  }, [imageSignatureData, saveSignatureToLibrary, setLastSavedKeyForType]);
+  const handleSaveImageSignature = useCallback(
+    async (scope: "personal" | "shared") => {
+      if (!imageSignatureData) {
+        return;
+      }
+      const result = await saveSignatureToLibrary({ type: "image", dataUrl: imageSignatureData }, "image", scope);
+      if (result.success) {
+        setLastSavedKeyForType("image");
+      }
+    },
+    [imageSignatureData, saveSignatureToLibrary, setLastSavedKeyForType],
+  );
 
-  const handleSaveTextSignature = useCallback(async (scope: 'personal' | 'shared') => {
-    const signerName = (parameters.signerName ?? '').trim();
-    if (!signerName) {
-      return;
-    }
+  const handleSaveTextSignature = useCallback(
+    async (scope: "personal" | "shared") => {
+      const signerName = (parameters.signerName ?? "").trim();
+      if (!signerName) {
+        return;
+      }
 
-    // Generate image from text signature
-    const preview = await buildSignaturePreview({
-      signatureType: 'text',
-      signerName,
-      fontFamily: parameters.fontFamily ?? 'Helvetica',
-      fontSize: parameters.fontSize ?? 16,
-      textColor: parameters.textColor ?? '#000000',
-    });
-
-    if (!preview?.dataUrl) {
-      console.error('Failed to generate text signature preview');
-      return;
-    }
-
-    const result = await saveSignatureToLibrary(
-      {
-        type: 'text',
-        dataUrl: preview.dataUrl,
+      // Generate image from text signature
+      const preview = await buildSignaturePreview({
+        signatureType: "text",
         signerName,
-        fontFamily: parameters.fontFamily ?? 'Helvetica',
+        fontFamily: parameters.fontFamily ?? "Helvetica",
         fontSize: parameters.fontSize ?? 16,
-        textColor: parameters.textColor ?? '#000000',
-      },
-      'text',
-      scope
-    );
-    if (result.success) {
-      setLastSavedKeyForType('text');
-    }
-  }, [
-    parameters.fontFamily,
-    parameters.fontSize,
-    parameters.signerName,
-    parameters.textColor,
-    saveSignatureToLibrary,
-    setLastSavedKeyForType,
-  ]);
+        textColor: parameters.textColor ?? "#000000",
+      });
+
+      if (!preview?.dataUrl) {
+        console.error("Failed to generate text signature preview");
+        return;
+      }
+
+      const result = await saveSignatureToLibrary(
+        {
+          type: "text",
+          dataUrl: preview.dataUrl,
+          signerName,
+          fontFamily: parameters.fontFamily ?? "Helvetica",
+          fontSize: parameters.fontSize ?? 16,
+          textColor: parameters.textColor ?? "#000000",
+        },
+        "text",
+        scope,
+      );
+      if (result.success) {
+        setLastSavedKeyForType("text");
+      }
+    },
+    [
+      parameters.fontFamily,
+      parameters.fontSize,
+      parameters.signerName,
+      parameters.textColor,
+      saveSignatureToLibrary,
+      setLastSavedKeyForType,
+    ],
+  );
 
   const handleUseSavedSignature = useCallback(
     (signature: SavedSignature) => {
       setPlacementManuallyPaused(false);
 
-      if (signature.type === 'canvas') {
-        if (parameters.signatureType !== 'canvas') {
-          onParameterChange('signatureType', 'canvas');
+      if (signature.type === "canvas") {
+        if (parameters.signatureType !== "canvas") {
+          onParameterChange("signatureType", "canvas");
         }
         setCanvasSignatureData(signature.dataUrl);
-      } else if (signature.type === 'image') {
-        if (parameters.signatureType !== 'image') {
-          onParameterChange('signatureType', 'image');
+      } else if (signature.type === "image") {
+        if (parameters.signatureType !== "image") {
+          onParameterChange("signatureType", "image");
         }
         setImageSignatureData(signature.dataUrl);
-      } else if (signature.type === 'text') {
-        if (parameters.signatureType !== 'text') {
-          onParameterChange('signatureType', 'text');
+      } else if (signature.type === "text") {
+        if (parameters.signatureType !== "text") {
+          onParameterChange("signatureType", "text");
         }
-        onParameterChange('signerName', signature.signerName);
-        onParameterChange('fontFamily', signature.fontFamily);
-        onParameterChange('fontSize', signature.fontSize);
-        onParameterChange('textColor', signature.textColor);
+        onParameterChange("signerName", signature.signerName);
+        onParameterChange("fontFamily", signature.fontFamily);
+        onParameterChange("fontSize", signature.fontSize);
+        onParameterChange("textColor", signature.textColor);
       }
 
       const savedKey =
-        signature.type === 'text'
+        signature.type === "text"
           ? buildTextSignatureKey(signature.signerName, signature.fontSize, signature.fontFamily, signature.textColor)
           : signature.dataUrl;
       setLastSavedKeyForType(signature.type, savedKey);
 
       const activate = () => onActivateSignaturePlacement?.();
-      if (typeof window !== 'undefined') {
+      if (typeof window !== "undefined") {
         window.setTimeout(activate, PLACEMENT_ACTIVATION_DELAY);
       } else {
         activate();
@@ -289,24 +316,32 @@ const SignSettings = ({
       setImageSignatureData,
       setPlacementManuallyPaused,
       setLastSavedKeyForType,
-    ]
+    ],
   );
 
   const handleDeleteSavedSignature = useCallback(
     (signature: SavedSignature) => {
       removeSignature(signature.id);
     },
-    [removeSignature]
+    [removeSignature],
   );
 
   const handleRenameSavedSignature = useCallback(
     (id: string, label: string) => {
       updateSignatureLabel(id, label);
     },
-    [updateSignatureLabel]
+    [updateSignatureLabel],
   );
 
-  const renderSaveButton = (type: SavedSignatureType, isReady: boolean, onClick: (scope: 'personal' | 'shared') => void, scope: 'personal' | 'shared', icon: string, label: string, fullWidth: boolean = false) => {
+  const renderSaveButton = (
+    type: SavedSignatureType,
+    isReady: boolean,
+    onClick: (scope: "personal" | "shared") => void,
+    scope: "personal" | "shared",
+    icon: string,
+    label: string,
+    fullWidth: boolean = false,
+  ) => {
     if (!canUseSavedLibrary) {
       return null;
     }
@@ -317,31 +352,29 @@ const SignSettings = ({
 
     // SaaS-specific: For localStorage, only show personal button (no shared storage)
     // Hide shared button when using localStorage
-    if (storageType === 'localStorage' && scope === 'shared') {
+    if (storageType === "localStorage" && scope === "shared") {
       return null;
     }
 
     let tooltipMessage: string | undefined;
     if (!isReady) {
-      tooltipMessage = translate('saved.saveUnavailable', 'Create a signature first to save it.');
+      tooltipMessage = translate("saved.saveUnavailable", "Create a signature first to save it.");
     } else if (isSaved) {
-      tooltipMessage = translate('saved.noChanges', 'Current signature is already saved.');
+      tooltipMessage = translate("saved.noChanges", "Current signature is already saved.");
     } else if (isSavedSignatureLimitReached) {
-      tooltipMessage = translate('saved.limitDescription', 'Remove a saved signature before adding new ones (max {{max}}).', {
+      tooltipMessage = translate("saved.limitDescription", "Remove a saved signature before adding new ones (max {{max}}).", {
         max: maxLimit,
       });
     }
 
     // SaaS-specific: Use simple "Save" label for localStorage mode
-    const buttonLabel = storageType === 'localStorage' && scope === 'personal'
-      ? translate('saved.save', 'Save')
-      : label;
+    const buttonLabel = storageType === "localStorage" && scope === "personal" ? translate("saved.save", "Save") : label;
 
     const button = (
       <Button
         size="xs"
         variant="outline"
-        color={isSaved ? 'green' : undefined}
+        color={isSaved ? "green" : undefined}
         onClick={() => onClick(scope)}
         disabled={!isReady || disabled || isSavedSignatureLimitReached || !hasChanges}
         leftSection={<LocalIcon icon={icon} width={16} height={16} />}
@@ -354,7 +387,7 @@ const SignSettings = ({
     if (tooltipMessage) {
       return (
         <Tooltip label={tooltipMessage}>
-          <Box style={{ display: fullWidth ? 'block' : 'inline-block', width: fullWidth ? '100%' : undefined }}>{button}</Box>
+          <Box style={{ display: fullWidth ? "block" : "inline-block", width: fullWidth ? "100%" : undefined }}>{button}</Box>
         </Tooltip>
       );
     }
@@ -362,32 +395,36 @@ const SignSettings = ({
     return button;
   };
 
-  const renderSaveButtonRow = (type: SavedSignatureType, isReady: boolean, onClick: (scope: 'personal' | 'shared') => void) => {
+  const renderSaveButtonRow = (
+    type: SavedSignatureType,
+    isReady: boolean,
+    onClick: (scope: "personal" | "shared") => void,
+  ) => {
     if (!canUseSavedLibrary) {
       return null;
     }
 
     // SaaS-specific: Check if we need full-width buttons (localStorage mode = single button)
-    const isLocalStorageMode = storageType === 'localStorage';
+    const isLocalStorageMode = storageType === "localStorage";
 
     const personalButton = renderSaveButton(
       type,
       isReady,
       onClick,
-      'personal',
-      'material-symbols:person-rounded',
-      translate('saved.savePersonal', 'Save Personal'),
-      isLocalStorageMode
+      "personal",
+      "material-symbols:person-rounded",
+      translate("saved.savePersonal", "Save Personal"),
+      isLocalStorageMode,
     );
 
     const sharedButton = renderSaveButton(
       type,
       isReady,
       onClick,
-      'shared',
-      'material-symbols:groups-rounded',
-      translate('saved.saveShared', 'Save Shared'),
-      false
+      "shared",
+      "material-symbols:groups-rounded",
+      translate("saved.saveShared", "Save Shared"),
+      false,
     );
 
     if (!personalButton && !sharedButton) {
@@ -399,15 +436,11 @@ const SignSettings = ({
     const hasBothButtons = personalButton && sharedButton;
 
     if (!hasBothButtons) {
-      return (
-        <Box style={{ width: '100%', marginTop: '0.4rem' }}>
-          {personalButton || sharedButton}
-        </Box>
-      );
+      return <Box style={{ width: "100%", marginTop: "0.4rem" }}>{personalButton || sharedButton}</Box>;
     }
 
     return (
-      <Group gap="xs" style={{ alignSelf: 'flex-start', marginTop: '0.4rem' }}>
+      <Group gap="xs" style={{ alignSelf: "flex-start", marginTop: "0.4rem" }}>
         {personalButton}
         {sharedButton}
       </Group>
@@ -415,11 +448,11 @@ const SignSettings = ({
   };
 
   useEffect(() => {
-    if (signatureSource === 'saved' && !canUseSavedLibrary) {
+    if (signatureSource === "saved" && !canUseSavedLibrary) {
       setSignatureSource(effectiveDefaultSource);
       return;
     }
-    if (signatureSource === 'saved') {
+    if (signatureSource === "saved") {
       return;
     }
     const nextSource = allowedSignatureSources.includes(parameters.signatureType as SignatureSource)
@@ -439,14 +472,14 @@ const SignSettings = ({
   const handleSignatureSourceChange = useCallback(
     (value: SignatureSource) => {
       setSignatureSource(value);
-      if (value === 'saved') {
+      if (value === "saved") {
         return;
       }
       if (parameters.signatureType !== value) {
-        onParameterChange('signatureType', value);
+        onParameterChange("signatureType", value);
       }
     },
-    [onParameterChange, parameters.signatureType]
+    [onParameterChange, parameters.signatureType],
   );
 
   useEffect(() => {
@@ -486,7 +519,7 @@ const SignSettings = ({
             if (e.target?.result) {
               resolve(e.target.result as string);
             } else {
-              reject(new Error('Failed to read file'));
+              reject(new Error("Failed to read file"));
             }
           };
           reader.onerror = () => reject(reader.error);
@@ -499,13 +532,13 @@ const SignSettings = ({
         setImageSignatureData(result);
 
         // Directly activate placement on image upload
-        if (typeof window !== 'undefined') {
+        if (typeof window !== "undefined") {
           window.setTimeout(() => onActivateSignaturePlacement?.(), PLACEMENT_ACTIVATION_DELAY);
         } else {
           onActivateSignaturePlacement?.();
         }
       } catch (error) {
-        console.error('Error reading file:', error);
+        console.error("Error reading file:", error);
       }
     } else if (!file) {
       setImageSignatureData(undefined);
@@ -516,41 +549,44 @@ const SignSettings = ({
   };
 
   // Handle signature data changes
-  const handleCanvasSignatureChange = useCallback((data: string | null) => {
-    const nextValue = data ?? undefined;
-    setCanvasSignatureData(prevData => {
-      // Reset pause state and trigger placement for signature changes
-      // (onDrawingComplete handles initial activation)
-      if (prevData && prevData !== nextValue && nextValue) {
-        setPlacementManuallyPaused(false);
-        lastAppliedPlacementKey.current = null;
-        // Directly activate placement on signature change
-        if (typeof window !== 'undefined') {
-          window.setTimeout(() => onActivateSignaturePlacement?.(), PLACEMENT_ACTIVATION_DELAY);
-        } else {
-          onActivateSignaturePlacement?.();
+  const handleCanvasSignatureChange = useCallback(
+    (data: string | null) => {
+      const nextValue = data ?? undefined;
+      setCanvasSignatureData((prevData) => {
+        // Reset pause state and trigger placement for signature changes
+        // (onDrawingComplete handles initial activation)
+        if (prevData && prevData !== nextValue && nextValue) {
+          setPlacementManuallyPaused(false);
+          lastAppliedPlacementKey.current = null;
+          // Directly activate placement on signature change
+          if (typeof window !== "undefined") {
+            window.setTimeout(() => onActivateSignaturePlacement?.(), PLACEMENT_ACTIVATION_DELAY);
+          } else {
+            onActivateSignaturePlacement?.();
+          }
         }
-      }
-      return nextValue;
-    });
-  }, [onActivateSignaturePlacement]);
+        return nextValue;
+      });
+    },
+    [onActivateSignaturePlacement],
+  );
 
   const hasCanvasSignature = useMemo(() => Boolean(canvasSignatureData), [canvasSignatureData]);
   const hasImageSignature = useMemo(() => Boolean(imageSignatureData), [imageSignatureData]);
   const hasTextSignature = useMemo(
-    () => Boolean(parameters.signerName && parameters.signerName.trim() !== ''),
-    [parameters.signerName]
+    () => Boolean(parameters.signerName && parameters.signerName.trim() !== ""),
+    [parameters.signerName],
   );
 
   const hasAnySignature = hasCanvasSignature || hasImageSignature || hasTextSignature;
 
   const isCurrentTypeReady = useMemo(() => {
     switch (parameters.signatureType) {
-      case 'canvas':
+      case "canvas":
         return hasCanvasSignature;
-      case 'image':
+      case "image":
         return hasImageSignature;
-      case 'text':
+      case "text":
         return hasTextSignature;
       default:
         return false;
@@ -572,7 +608,7 @@ const SignSettings = ({
   const shouldAutoActivate = shouldEnablePlacement && !isPlacementManuallyPaused && !signaturesApplied;
 
   useEffect(() => {
-    setSignatureDrafts(prev => {
+    setSignatureDrafts((prev) => {
       if (canvasSignatureData) {
         if (prev.canvas === canvasSignatureData) {
           return prev;
@@ -591,7 +627,7 @@ const SignSettings = ({
   }, [canvasSignatureData]);
 
   useEffect(() => {
-    setSignatureDrafts(prev => {
+    setSignatureDrafts((prev) => {
       if (imageSignatureData) {
         if (prev.image === imageSignatureData) {
           return prev;
@@ -611,13 +647,13 @@ const SignSettings = ({
 
   useEffect(() => {
     const nextDraft = {
-      signerName: parameters.signerName || '',
+      signerName: parameters.signerName || "",
       fontSize: parameters.fontSize || 16,
-      fontFamily: parameters.fontFamily || 'Helvetica',
-      textColor: parameters.textColor || '#000000',
+      fontFamily: parameters.fontFamily || "Helvetica",
+      textColor: parameters.textColor || "#000000",
     };
 
-    setSignatureDrafts(prev => {
+    setSignatureDrafts((prev) => {
       const prevDraft = prev.text;
       if (
         prevDraft &&
@@ -634,17 +670,17 @@ const SignSettings = ({
   }, [parameters.signerName, parameters.fontSize, parameters.fontFamily, parameters.textColor]);
 
   useEffect(() => {
-    if (parameters.signatureType === 'text') {
+    if (parameters.signatureType === "text") {
       const draft = signatureDrafts.text;
       if (!draft) {
         lastSyncedTextDraft.current = null;
         return;
       }
 
-      const currentSignerName = parameters.signerName ?? '';
+      const currentSignerName = parameters.signerName ?? "";
       const currentFontSize = parameters.fontSize ?? 16;
-      const currentFontFamily = parameters.fontFamily ?? 'Helvetica';
-      const currentTextColor = parameters.textColor ?? '#000000';
+      const currentFontFamily = parameters.fontFamily ?? "Helvetica";
+      const currentTextColor = parameters.textColor ?? "#000000";
 
       const isSynced =
         draft.signerName === currentSignerName &&
@@ -668,16 +704,16 @@ const SignSettings = ({
       if (!alreadyAttempted) {
         lastSyncedTextDraft.current = draft;
         if (draft.signerName !== currentSignerName) {
-          onParameterChange('signerName', draft.signerName);
+          onParameterChange("signerName", draft.signerName);
         }
         if (draft.fontSize !== currentFontSize) {
-          onParameterChange('fontSize', draft.fontSize);
+          onParameterChange("fontSize", draft.fontSize);
         }
         if (draft.fontFamily !== currentFontFamily) {
-          onParameterChange('fontFamily', draft.fontFamily);
+          onParameterChange("fontFamily", draft.fontFamily);
         }
         if (draft.textColor !== currentTextColor) {
-          onParameterChange('textColor', draft.textColor);
+          onParameterChange("textColor", draft.textColor);
         }
       }
     } else {
@@ -696,14 +732,14 @@ const SignSettings = ({
   useEffect(() => {
     let newSignatureData: string | undefined = undefined;
 
-    if (parameters.signatureType === 'image' && imageSignatureData) {
+    if (parameters.signatureType === "image" && imageSignatureData) {
       newSignatureData = imageSignatureData;
-    } else if (parameters.signatureType === 'canvas' && canvasSignatureData) {
+    } else if (parameters.signatureType === "canvas" && canvasSignatureData) {
       newSignatureData = canvasSignatureData;
     }
 
     if (parameters.signatureData !== newSignatureData) {
-      onParameterChange('signatureData', newSignatureData);
+      onParameterChange("signatureData", newSignatureData);
     }
   }, [parameters.signatureType, parameters.signatureData, canvasSignatureData, imageSignatureData, onParameterChange]);
 
@@ -722,7 +758,7 @@ const SignSettings = ({
       return;
     }
 
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       const timer = window.setTimeout(() => {
         onActivateSignaturePlacement?.();
       }, PLACEMENT_ACTIVATION_DELAY);
@@ -762,7 +798,7 @@ const SignSettings = ({
       lastAppliedPlacementKey.current = placementSignatureKey;
     };
 
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       const timer = window.setTimeout(trigger, PLACEMENT_ACTIVATION_DELAY);
       return () => window.clearTimeout(timer);
     }
@@ -783,7 +819,7 @@ const SignSettings = ({
     setPlacementManuallyPaused(false);
     lastAppliedPlacementKey.current = null;
 
-    if (typeof window !== 'undefined') {
+    if (typeof window !== "undefined") {
       const timer = window.setTimeout(() => {
         onActivateSignaturePlacement?.();
       }, FILE_SWITCH_ACTIVATION_DELAY);
@@ -794,19 +830,19 @@ const SignSettings = ({
   }, [activeFileIndex, shouldEnablePlacement, signaturesApplied, onActivateSignaturePlacement]);
 
   const sourceLabels: Record<SignatureSource, string> = {
-    canvas: translate('type.canvas', 'Draw'),
-    image: translate('type.image', 'Upload'),
-    text: translate('type.text', 'Type'),
-    saved: translate('type.saved', 'Saved'),
+    canvas: translate("type.canvas", "Draw"),
+    image: translate("type.image", "Upload"),
+    text: translate("type.text", "Type"),
+    saved: translate("type.saved", "Saved"),
   };
 
-  const sourceOptions = allowedSignatureSources.map(source => ({
+  const sourceOptions = allowedSignatureSources.map((source) => ({
     label: sourceLabels[source],
     value: source,
   }));
 
   const renderSignatureBuilder = () => {
-    if (signatureSource === 'saved') {
+    if (signatureSource === "saved") {
       if (!canUseSavedLibrary) {
         return null;
       }
@@ -825,7 +861,7 @@ const SignSettings = ({
       );
     }
 
-    if (signatureSource === 'canvas') {
+    if (signatureSource === "canvas") {
       return (
         <Stack gap="xs">
           <DrawingCanvas
@@ -842,19 +878,16 @@ const SignSettings = ({
             disabled={disabled}
             initialSignatureData={canvasSignatureData}
           />
-          {renderSaveButtonRow('canvas', hasCanvasSignature, handleSaveCanvasSignature)}
+          {renderSaveButtonRow("canvas", hasCanvasSignature, handleSaveCanvasSignature)}
         </Stack>
       );
     }
 
-    if (signatureSource === 'image') {
+    if (signatureSource === "image") {
       return (
         <Stack gap="xs">
-          <ImageUploader
-            onImageChange={handleImageChange}
-            disabled={disabled}
-          />
-          {renderSaveButtonRow('image', hasImageSignature, handleSaveImageSignature)}
+          <ImageUploader onImageChange={handleImageChange} disabled={disabled} />
+          {renderSaveButtonRow("image", hasImageSignature, handleSaveImageSignature)}
         </Stack>
       );
     }
@@ -862,75 +895,69 @@ const SignSettings = ({
     return (
       <Stack gap="xs">
         <TextInputWithFont
-          text={parameters.signerName || ''}
-          onTextChange={(text) => onParameterChange('signerName', text)}
+          text={parameters.signerName || ""}
+          onTextChange={(text) => onParameterChange("signerName", text)}
           fontSize={parameters.fontSize || 16}
-          onFontSizeChange={(size) => onParameterChange('fontSize', size)}
-          fontFamily={parameters.fontFamily || 'Helvetica'}
-          onFontFamilyChange={(family) => onParameterChange('fontFamily', family)}
-          textColor={parameters.textColor || '#000000'}
-          onTextColorChange={(color) => onParameterChange('textColor', color)}
+          onFontSizeChange={(size) => onParameterChange("fontSize", size)}
+          fontFamily={parameters.fontFamily || "Helvetica"}
+          onFontFamilyChange={(family) => onParameterChange("fontFamily", family)}
+          textColor={parameters.textColor || "#000000"}
+          onTextColorChange={(color) => onParameterChange("textColor", color)}
           disabled={disabled}
-          label={translate('text.name', 'Text')}
-          placeholder={translate('text.placeholder', 'Enter text')}
-          fontLabel={translate('text.fontLabel', 'Font')}
-          fontSizeLabel={translate('text.fontSizeLabel', 'Font size')}
-          fontSizePlaceholder={translate('text.fontSizePlaceholder', 'Type or select font size (8-200)')}
+          label={translate("text.name", "Text")}
+          placeholder={translate("text.placeholder", "Enter text")}
+          fontLabel={translate("text.fontLabel", "Font")}
+          fontSizeLabel={translate("text.fontSizeLabel", "Font size")}
+          fontSizePlaceholder={translate("text.fontSizePlaceholder", "Type or select font size (8-200)")}
           onAnyChange={() => {
             setPlacementManuallyPaused(false);
             lastAppliedPlacementKey.current = null;
             // Directly activate placement on text changes
-            if (typeof window !== 'undefined') {
+            if (typeof window !== "undefined") {
               window.setTimeout(() => onActivateSignaturePlacement?.(), PLACEMENT_ACTIVATION_DELAY);
             } else {
               onActivateSignaturePlacement?.();
             }
           }}
         />
-        {renderSaveButtonRow('text', hasTextSignature, handleSaveTextSignature)}
+        {renderSaveButtonRow("text", hasTextSignature, handleSaveTextSignature)}
       </Stack>
     );
   };
 
   const placementInstructions = () => {
-    if (signatureSource === 'saved') {
+    if (signatureSource === "saved") {
+      return translate("instructions.saved", "Select a saved signature above, then click anywhere on the PDF to place it.");
+    }
+    if (parameters.signatureType === "canvas") {
       return translate(
-        'instructions.saved',
-        'Select a saved signature above, then click anywhere on the PDF to place it.'
+        "instructions.canvas",
+        "After drawing your signature and closing the canvas, click anywhere on the PDF to place it.",
       );
     }
-    if (parameters.signatureType === 'canvas') {
-      return translate(
-        'instructions.canvas',
-        'After drawing your signature and closing the canvas, click anywhere on the PDF to place it.'
-      );
-    }
-    if (parameters.signatureType === 'image') {
-      return translate(
-        'instructions.image',
-        'After uploading your signature image, click anywhere on the PDF to place it.'
-      );
+    if (parameters.signatureType === "image") {
+      return translate("instructions.image", "After uploading your signature image, click anywhere on the PDF to place it.");
     }
     return translate(
-      'instructions.text',
-      'After entering your name above, click anywhere on the PDF to place your signature.'
+      "instructions.text",
+      "After entering your name above, click anywhere on the PDF to place your signature.",
     );
   };
 
   const placementAlert = isCurrentTypeReady
     ? {
-        color: isPlacementMode ? 'blue' : 'teal',
+        color: isPlacementMode ? "blue" : "teal",
         title: isPlacementMode
-          ? translate('instructions.title', 'How to add your signature')
-          : translate('instructions.paused', 'Placement paused'),
+          ? translate("instructions.title", "How to add your signature")
+          : translate("instructions.paused", "Placement paused"),
         message: isPlacementMode
           ? placementInstructions()
-          : translate('instructions.resumeHint', 'Resume placement to click and add your signature.'),
+          : translate("instructions.resumeHint", "Resume placement to click and add your signature."),
       }
     : {
-        color: 'yellow',
-        title: translate('instructions.title', 'How to add your signature'),
-        message: translate('instructions.noSignature', 'Create a signature above to enable placement tools.'),
+        color: "yellow",
+        title: translate("instructions.title", "How to add your signature"),
+        message: translate("instructions.noSignature", "Create a signature above to enable placement tools."),
       };
 
   const handlePausePlacement = () => {
@@ -948,7 +975,7 @@ const SignSettings = ({
     if (!isCurrentTypeReady) return;
 
     const handleKeyDown = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') {
+      if (e.key === "Escape") {
         e.preventDefault();
         if (isPlacementMode) {
           handlePausePlacement();
@@ -958,66 +985,64 @@ const SignSettings = ({
       }
     };
 
-    window.addEventListener('keydown', handleKeyDown);
-    return () => window.removeEventListener('keydown', handleKeyDown);
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
   }, [isCurrentTypeReady, isPlacementMode, isPlacementManuallyPaused]);
 
   const placementToggleControl =
-    onActivateSignaturePlacement || onDeactivateSignature
-      ? isPlacementMode
-        ? (
-            <Tooltip label={translate('mode.pause', 'Pause placement')}>
-              <ActionIcon
-                variant="default"
-                size="lg"
-                aria-label={translate('mode.pause', 'Pause placement')}
-                onClick={handlePausePlacement}
-                disabled={disabled || !onDeactivateSignature}
-                style={{
-                  width: 'auto',
-                  paddingInline: '0.75rem',
-                  display: 'inline-flex',
-                  alignItems: 'center',
-                  gap: '0.4rem',
-                }}
-              >
-                <LocalIcon icon="material-symbols:pause-rounded" width={20} height={20} />
-                <Text component="span" size="sm" fw={500}>
-                  {translate('mode.pause', 'Pause placement')}
-                </Text>
-              </ActionIcon>
-            </Tooltip>
-          )
-        : (
-            <Tooltip label={translate('mode.resume', 'Resume placement')}>
-              <ActionIcon
-                variant="default"
-                size="lg"
-                aria-label={translate('mode.resume', 'Resume placement')}
-                onClick={handleResumePlacement}
-                disabled={disabled || !isCurrentTypeReady || !onActivateSignaturePlacement}
-                style={{
-                  width: 'auto',
-                  paddingInline: '0.75rem',
-                  display: 'inline-flex',
-                  alignItems: 'center',
-                  gap: '0.4rem',
-                }}
-              >
-                <LocalIcon icon="material-symbols:play-arrow-rounded" width={20} height={20} />
-                <Text component="span" size="sm" fw={500}>
-                  {translate('mode.resume', 'Resume placement')}
-                </Text>
-              </ActionIcon>
-            </Tooltip>
-          )
-      : null;
+    onActivateSignaturePlacement || onDeactivateSignature ? (
+      isPlacementMode ? (
+        <Tooltip label={translate("mode.pause", "Pause placement")}>
+          <ActionIcon
+            variant="default"
+            size="lg"
+            aria-label={translate("mode.pause", "Pause placement")}
+            onClick={handlePausePlacement}
+            disabled={disabled || !onDeactivateSignature}
+            style={{
+              width: "auto",
+              paddingInline: "0.75rem",
+              display: "inline-flex",
+              alignItems: "center",
+              gap: "0.4rem",
+            }}
+          >
+            <LocalIcon icon="material-symbols:pause-rounded" width={20} height={20} />
+            <Text component="span" size="sm" fw={500}>
+              {translate("mode.pause", "Pause placement")}
+            </Text>
+          </ActionIcon>
+        </Tooltip>
+      ) : (
+        <Tooltip label={translate("mode.resume", "Resume placement")}>
+          <ActionIcon
+            variant="default"
+            size="lg"
+            aria-label={translate("mode.resume", "Resume placement")}
+            onClick={handleResumePlacement}
+            disabled={disabled || !isCurrentTypeReady || !onActivateSignaturePlacement}
+            style={{
+              width: "auto",
+              paddingInline: "0.75rem",
+              display: "inline-flex",
+              alignItems: "center",
+              gap: "0.4rem",
+            }}
+          >
+            <LocalIcon icon="material-symbols:play-arrow-rounded" width={20} height={20} />
+            <Text component="span" size="sm" fw={500}>
+              {translate("mode.resume", "Resume placement")}
+            </Text>
+          </ActionIcon>
+        </Tooltip>
+      )
+    ) : null;
 
   return (
     <Stack>
       <Stack gap="sm">
         <Text size="sm" c="dimmed">
-          {translate('step.createDesc', 'Choose how you want to create the signature')}
+          {translate("step.createDesc", "Choose how you want to create the signature")}
         </Text>
         {sourceOptions.length > 1 && (
           <SegmentedControl
@@ -1034,10 +1059,10 @@ const SignSettings = ({
 
       <Stack gap="sm">
         <Text fw={600} size="md">
-          {translate('step.place', 'Place & save')}
+          {translate("step.place", "Place & save")}
         </Text>
         <Text size="sm" c="dimmed">
-          {translate('step.placeDesc', 'Position the signature on your PDF')}
+          {translate("step.placeDesc", "Position the signature on your PDF")}
         </Text>
 
         <Group gap="xs" wrap="nowrap" align="center">
@@ -1050,17 +1075,12 @@ const SignSettings = ({
             disabled={disabled}
             showPlaceButton={false}
           />
-          <Box style={{ marginLeft: 'auto' }}>
-            {placementToggleControl}
-          </Box>
+          <Box style={{ marginLeft: "auto" }}>{placementToggleControl}</Box>
         </Group>
 
         <Alert color={placementAlert.color} title={placementAlert.title}>
-          <Text size="sm">
-            {placementAlert.message}
-          </Text>
+          <Text size="sm">{placementAlert.message}</Text>
         </Alert>
-
       </Stack>
 
       <ColorPicker
@@ -1068,17 +1088,12 @@ const SignSettings = ({
         onClose={() => setIsColorPickerOpen(false)}
         selectedColor={selectedColor}
         onColorChange={setSelectedColor}
-        title={translate('canvas.colorPickerTitle', 'Choose stroke colour')}
+        title={translate("canvas.colorPickerTitle", "Choose stroke colour")}
       />
 
       {onSave && (
-        <Button
-          onClick={onSave}
-          color="blue"
-          variant="filled"
-          fullWidth
-        >
-          {translate('applySignatures', 'Apply Signatures')}
+        <Button onClick={onSave} color="blue" variant="filled" fullWidth>
+          {translate("applySignatures", "Apply Signatures")}
         </Button>
       )}
 
diff --git a/frontend/src/saas/constants/app.ts b/frontend/src/saas/constants/app.ts
index 90a130c76c..2df0ba0f15 100644
--- a/frontend/src/saas/constants/app.ts
+++ b/frontend/src/saas/constants/app.ts
@@ -1,5 +1,5 @@
 // Re-export all constants from core
-export * from '@core/constants/app';
+export * from "@core/constants/app";
 
 // SaaS-specific overrides
 // Get base URL with fallback (for use outside React components)
diff --git a/frontend/src/saas/constants/authProviders.ts b/frontend/src/saas/constants/authProviders.ts
index 58e6db63b0..502e23b4f6 100644
--- a/frontend/src/saas/constants/authProviders.ts
+++ b/frontend/src/saas/constants/authProviders.ts
@@ -1,13 +1,13 @@
-export type OAuthProviderId = 'google' | 'apple' | 'github' | 'azure'
+export type OAuthProviderId = "google" | "apple" | "github" | "azure";
 
 export type OAuthProviderMeta = {
-  id: OAuthProviderId
-  label: string
-  file: string
-  isDisabled: boolean
-}
+  id: OAuthProviderId;
+  label: string;
+  file: string;
+  isDisabled: boolean;
+};
 
 export const oauthProviders: readonly OAuthProviderMeta[] = [
-  { id: 'google', label: 'Google', file: 'google.svg', isDisabled: false },
-  { id: 'github', label: 'GitHub', file: 'github.svg', isDisabled: false },
-] as const
+  { id: "google", label: "Google", file: "google.svg", isDisabled: false },
+  { id: "github", label: "GitHub", file: "github.svg", isDisabled: false },
+] as const;
diff --git a/frontend/src/saas/hooks/useAutoAnonymousAuth.ts b/frontend/src/saas/hooks/useAutoAnonymousAuth.ts
index 27a0e9abe5..2f93d04c34 100644
--- a/frontend/src/saas/hooks/useAutoAnonymousAuth.ts
+++ b/frontend/src/saas/hooks/useAutoAnonymousAuth.ts
@@ -1,129 +1,140 @@
-import { useState, useEffect, useCallback } from 'react'
-import { useLocation } from 'react-router-dom'
-import { useAuth } from '@app/auth/UseSession'
-import { signInAnonymously, supabase } from '@app/auth/supabase'
-import { isAuthRoute, isHomeRoute, isToolRoute } from '@app/utils/pathUtils'
+import { useState, useEffect, useCallback } from "react";
+import { useLocation } from "react-router-dom";
+import { useAuth } from "@app/auth/UseSession";
+import { signInAnonymously, supabase } from "@app/auth/supabase";
+import { isAuthRoute, isHomeRoute, isToolRoute } from "@app/utils/pathUtils";
 
 interface AutoAnonymousAuthState {
-  isAutoAuthenticating: boolean
-  autoAuthError: string | null
-  shouldTriggerAutoAuth: boolean
+  isAutoAuthenticating: boolean;
+  autoAuthError: string | null;
+  shouldTriggerAutoAuth: boolean;
 }
 
 /**
  * Automatically signs in users anonymously on direct tool access when not authenticated.
  */
 export function useAutoAnonymousAuth() {
-  const { session, loading } = useAuth()
-  const location = useLocation()
+  const { session, loading } = useAuth();
+  const location = useLocation();
   const [state, setState] = useState<AutoAnonymousAuthState>({
     isAutoAuthenticating: false,
     autoAuthError: null,
-    shouldTriggerAutoAuth: false
-  })
+    shouldTriggerAutoAuth: false,
+  });
 
   const shouldAutoAuthenticate = useCallback((): boolean => {
-    const currentPath = location.pathname
-    if (isAuthRoute(currentPath)) return false
-    if (isHomeRoute(currentPath)) return false
-    return isToolRoute(currentPath)
-  }, [location.pathname])
+    const currentPath = location.pathname;
+    if (isAuthRoute(currentPath)) return false;
+    if (isHomeRoute(currentPath)) return false;
+    return isToolRoute(currentPath);
+  }, [location.pathname]);
 
   const waitForToken = useCallback(async (timeoutMs = 7000) => {
     // Prefer event-driven approach; fallback to polling if needed
-    let resolved = false
+    let resolved = false;
     const done = (ok: boolean) => {
-      resolved = true
-      return ok
-    }
+      resolved = true;
+      return ok;
+    };
 
     const hasToken = async () => {
-      const { data: { session } } = await supabase.auth.getSession()
-      return !!session?.access_token
-    }
+      const {
+        data: { session },
+      } = await supabase.auth.getSession();
+      return !!session?.access_token;
+    };
 
-    if (await hasToken()) return true
+    if (await hasToken()) return true;
 
     const unsub = supabase.auth.onAuthStateChange(async (_evt, _session) => {
       if (!resolved && (await hasToken())) {
-        unsub.data.subscription.unsubscribe()
-        done(true)
+        unsub.data.subscription.unsubscribe();
+        done(true);
       }
-    })
+    });
 
-    const started = Date.now()
+    const started = Date.now();
     while (!resolved && Date.now() - started < timeoutMs) {
       if (await hasToken()) {
-        unsub.data.subscription.unsubscribe()
-        return done(true)
+        unsub.data.subscription.unsubscribe();
+        return done(true);
       }
       // gentle backoff
-      await new Promise(r => setTimeout(r, 120))
+      await new Promise((r) => setTimeout(r, 120));
     }
 
-    try { unsub.data.subscription.unsubscribe() } catch (err) {
+    try {
+      unsub.data.subscription.unsubscribe();
+    } catch (err) {
       // Ignore unsubscribe errors during cleanup
-      console.debug('[useAutoAnonymousAuth] Unsubscribe cleanup error:', err)
+      console.debug("[useAutoAnonymousAuth] Unsubscribe cleanup error:", err);
     }
-    return done(false)
-  }, [])
+    return done(false);
+  }, []);
 
   const triggerAnonymousAuth = useCallback(async () => {
-    if (state.isAutoAuthenticating) return
+    if (state.isAutoAuthenticating) return;
 
-    setState(prev => ({ ...prev, isAutoAuthenticating: true, autoAuthError: null }))
+    setState((prev) => ({ ...prev, isAutoAuthenticating: true, autoAuthError: null }));
     try {
-      console.log('[useAutoAnonymousAuth] anonymous auth starting')
+      console.log("[useAutoAnonymousAuth] anonymous auth starting");
 
-      const { error } = await signInAnonymously()
-      if (error) throw error
+      const { error } = await signInAnonymously();
+      if (error) throw error;
 
       // Wait for a usable token so first API calls won't 401/redirect
-      const ok = await waitForToken(7000)
+      const ok = await waitForToken(7000);
       if (!ok) {
-        throw new Error('Timed out waiting for anonymous session token')
+        throw new Error("Timed out waiting for anonymous session token");
       }
 
-      console.log('[useAutoAnonymousAuth] anonymous auth complete')
-      setState(prev => ({ ...prev, isAutoAuthenticating: false, shouldTriggerAutoAuth: false }))
+      console.log("[useAutoAnonymousAuth] anonymous auth complete");
+      setState((prev) => ({ ...prev, isAutoAuthenticating: false, shouldTriggerAutoAuth: false }));
     } catch (e) {
-      console.error('[useAutoAnonymousAuth] anonymous auth failed', e)
-      setState(prev => ({
+      console.error("[useAutoAnonymousAuth] anonymous auth failed", e);
+      setState((prev) => ({
         ...prev,
         isAutoAuthenticating: false,
-        autoAuthError: e instanceof Error ? e.message : 'Anonymous authentication failed'
-      }))
+        autoAuthError: e instanceof Error ? e.message : "Anonymous authentication failed",
+      }));
     }
-  }, [state.isAutoAuthenticating, waitForToken])
+  }, [state.isAutoAuthenticating, waitForToken]);
 
   // Decide whether to auto-auth on mount & whenever location/auth changes
   useEffect(() => {
-    if (loading) return
-    if (session) return
-    if (state.isAutoAuthenticating) return
+    if (loading) return;
+    if (session) return;
+    if (state.isAutoAuthenticating) return;
 
-    const shouldAuth = shouldAutoAuthenticate()
+    const shouldAuth = shouldAutoAuthenticate();
     if (state.shouldTriggerAutoAuth !== shouldAuth) {
-      setState(prev => ({ ...prev, shouldTriggerAutoAuth: shouldAuth }))
+      setState((prev) => ({ ...prev, shouldTriggerAutoAuth: shouldAuth }));
     }
 
     if (shouldAuth) {
-      console.log('[useAutoAnonymousAuth] tool route detected, auto-auth')
-      triggerAnonymousAuth()
+      console.log("[useAutoAnonymousAuth] tool route detected, auto-auth");
+      triggerAnonymousAuth();
     }
-  }, [loading, session, state.isAutoAuthenticating, state.shouldTriggerAutoAuth, shouldAutoAuthenticate, triggerAnonymousAuth])
+  }, [
+    loading,
+    session,
+    state.isAutoAuthenticating,
+    state.shouldTriggerAutoAuth,
+    shouldAutoAuthenticate,
+    triggerAnonymousAuth,
+  ]);
 
   // Clear error if route is no longer a tool route, or once authenticated
   useEffect(() => {
     if (session || !shouldAutoAuthenticate()) {
-      setState(prev => ({ ...prev, autoAuthError: null, shouldTriggerAutoAuth: false }))
+      setState((prev) => ({ ...prev, autoAuthError: null, shouldTriggerAutoAuth: false }));
     }
-  }, [session, shouldAutoAuthenticate])
+  }, [session, shouldAutoAuthenticate]);
 
   return {
     isAutoAuthenticating: state.isAutoAuthenticating,
     autoAuthError: state.autoAuthError,
     shouldTriggerAutoAuth: state.shouldTriggerAutoAuth,
-    triggerAnonymousAuth
-  }
-}
\ No newline at end of file
+    triggerAnonymousAuth,
+  };
+}
diff --git a/frontend/src/saas/hooks/useConfigButtonIcon.tsx b/frontend/src/saas/hooks/useConfigButtonIcon.tsx
index 5b07deea7d..15f6a66040 100644
--- a/frontend/src/saas/hooks/useConfigButtonIcon.tsx
+++ b/frontend/src/saas/hooks/useConfigButtonIcon.tsx
@@ -1,5 +1,5 @@
-import { Avatar } from '@mantine/core';
-import { useAuth } from '@app/auth/UseSession';
+import { Avatar } from "@mantine/core";
+import { useAuth } from "@app/auth/UseSession";
 
 export function useConfigButtonIcon(): React.ReactNode {
   const { profilePictureUrl } = useAuth();
diff --git a/frontend/src/saas/hooks/useCreditCheck.ts b/frontend/src/saas/hooks/useCreditCheck.ts
index c9aac57f4a..c1b181c215 100644
--- a/frontend/src/saas/hooks/useCreditCheck.ts
+++ b/frontend/src/saas/hooks/useCreditCheck.ts
@@ -1,41 +1,48 @@
-import { useCallback } from 'react';
-import { useTranslation } from 'react-i18next';
-import { useCredits } from '@app/hooks/useCredits';
-import { getToolCreditCost } from '@app/utils/creditCosts';
-import { openPlanSettings } from '@app/utils/appSettings';
-import type { ToolId } from '@app/types/toolId';
+import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
+import { useCredits } from "@app/hooks/useCredits";
+import { getToolCreditCost } from "@app/utils/creditCosts";
+import { openPlanSettings } from "@app/utils/appSettings";
+import type { ToolId } from "@app/types/toolId";
 
 export function useCreditCheck(operationType?: string, _endpoint?: string) {
   const { hasSufficientCredits, isPro, creditBalance, refreshCredits } = useCredits();
   const { t } = useTranslation();
 
-  const checkCredits = useCallback(async (_runtimeEndpoint?: string): Promise<string | null> => {
-    const requiredCredits = getToolCreditCost(operationType as ToolId);
-    const creditCheck = hasSufficientCredits(requiredCredits);
+  const checkCredits = useCallback(
+    async (_runtimeEndpoint?: string): Promise<string | null> => {
+      const requiredCredits = getToolCreditCost(operationType as ToolId);
+      const creditCheck = hasSufficientCredits(requiredCredits);
 
-    if (creditBalance === null) {
-      try { await refreshCredits(); } catch (_e) { void _e; }
-      return t('loadingCredits', 'Checking credits...');
-    }
+      if (creditBalance === null) {
+        try {
+          await refreshCredits();
+        } catch (_e) {
+          void _e;
+        }
+        return t("loadingCredits", "Checking credits...");
+      }
 
-    if (isPro === null) {
-      return t('loadingProStatus', 'Checking subscription status...');
-    }
+      if (isPro === null) {
+        return t("loadingProStatus", "Checking subscription status...");
+      }
 
-    if (!isPro && !creditCheck.hasSufficientCredits) {
-      const shortfall = creditCheck.shortfall || 0;
-      const error = t(
-        'insufficientCredits',
-        'Insufficient credits. Required: {{requiredCredits}}, Available: {{currentBalance}}, Shortfall: {{shortfall}}',
-        { requiredCredits, currentBalance: creditCheck.currentBalance, shortfall },
-      );
-      const notice = t('noticeTopUpOrPlan', 'Not enough credits, please top up or upgrade to a plan');
-      openPlanSettings(notice);
-      return error;
-    }
+      if (!isPro && !creditCheck.hasSufficientCredits) {
+        const shortfall = creditCheck.shortfall || 0;
+        const error = t(
+          "insufficientCredits",
+          "Insufficient credits. Required: {{requiredCredits}}, Available: {{currentBalance}}, Shortfall: {{shortfall}}",
+          { requiredCredits, currentBalance: creditCheck.currentBalance, shortfall },
+        );
+        const notice = t("noticeTopUpOrPlan", "Not enough credits, please top up or upgrade to a plan");
+        openPlanSettings(notice);
+        return error;
+      }
 
-    return null;
-  }, [hasSufficientCredits, isPro, creditBalance, refreshCredits, operationType, t]);
+      return null;
+    },
+    [hasSufficientCredits, isPro, creditBalance, refreshCredits, operationType, t],
+  );
 
   return { checkCredits };
 }
diff --git a/frontend/src/saas/hooks/useCredits.ts b/frontend/src/saas/hooks/useCredits.ts
index 1af732346f..6a954d9286 100644
--- a/frontend/src/saas/hooks/useCredits.ts
+++ b/frontend/src/saas/hooks/useCredits.ts
@@ -1,33 +1,24 @@
-import { useAuth } from '@app/auth/UseSession'
+import { useAuth } from "@app/auth/UseSession";
 
 /**
  * Hook for credit management and checking in tools.
  * Provides easy access to credit balance, subscription info, and validation functions.
  */
 export const useCredits = () => {
-  const {
-    creditBalance,
-    subscription,
-    creditSummary,
-    isPro,
-    hasSufficientCredits,
-    updateCredits,
-    refreshCredits
-  } = useAuth()
-
+  const { creditBalance, subscription, creditSummary, isPro, hasSufficientCredits, updateCredits, refreshCredits } = useAuth();
 
   /**
    * Get user-friendly credit status message
    */
   const getCreditStatusMessage = (): string => {
     if (creditBalance === 0) {
-      return 'No credits remaining'
+      return "No credits remaining";
     }
     if (creditBalance === null) {
-      return 'Credits loading...'
+      return "Credits loading...";
     }
-    return `${creditBalance} credits available`
-  }
+    return `${creditBalance} credits available`;
+  };
 
   return {
     // State
@@ -42,6 +33,6 @@ export const useCredits = () => {
 
     // Utilities
     getCreditStatusMessage,
-    hasSufficientCredits
-  }
-}
+    hasSufficientCredits,
+  };
+};
diff --git a/frontend/src/saas/hooks/useEndpointConfig.ts b/frontend/src/saas/hooks/useEndpointConfig.ts
index c98dec5966..3c5a5887b7 100644
--- a/frontend/src/saas/hooks/useEndpointConfig.ts
+++ b/frontend/src/saas/hooks/useEndpointConfig.ts
@@ -1,7 +1,7 @@
-import { useState, useEffect } from 'react';
-import { isAxiosError } from 'axios';
-import apiClient from '@app/services/apiClient';
-import type { EndpointAvailabilityDetails } from '@app/types/endpointAvailability';
+import { useState, useEffect } from "react";
+import { isAxiosError } from "axios";
+import apiClient from "@app/services/apiClient";
+import type { EndpointAvailabilityDetails } from "@app/types/endpointAvailability";
 
 // Track globally fetched endpoint sets to prevent duplicate fetches across components
 const globalFetchedSets = new Set<string>();
@@ -31,12 +31,14 @@ export function useEndpointEnabled(endpoint: string): {
       setLoading(true);
       setError(null);
 
-      const response = await apiClient.get<boolean>(`/api/v1/config/endpoint-enabled?endpoint=${encodeURIComponent(endpoint)}`);
+      const response = await apiClient.get<boolean>(
+        `/api/v1/config/endpoint-enabled?endpoint=${encodeURIComponent(endpoint)}`,
+      );
 
       const isEnabled = response.data;
       setEnabled(isEnabled);
     } catch (err) {
-      const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
+      const errorMessage = err instanceof Error ? err.message : "Unknown error occurred";
       setError(errorMessage);
     } finally {
       setLoading(false);
@@ -71,11 +73,11 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const fetchAllEndpointStatuses = async (force = false) => {
-    const endpointsKey = [...endpoints].sort().join(',');
+    const endpointsKey = [...endpoints].sort().join(",");
 
     // Skip if we already fetched these exact endpoints globally
     if (!force && globalFetchedSets.has(endpointsKey)) {
-      console.debug('[useEndpointConfig] Already fetched these endpoints globally, using cache');
+      console.debug("[useEndpointConfig] Already fetched these endpoints globally, using cache");
       const cached = endpoints.reduce(
         (acc, endpoint) => {
           const cachedDetails = globalEndpointCache[endpoint];
@@ -85,10 +87,10 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
           }
           return acc;
         },
-        { status: {} as Record<string, boolean>, details: {} as Record<string, EndpointAvailabilityDetails> }
+        { status: {} as Record<string, boolean>, details: {} as Record<string, EndpointAvailabilityDetails> },
       );
       setEndpointStatus(cached.status);
-      setEndpointDetails(prev => ({ ...prev, ...cached.details }));
+      setEndpointDetails((prev) => ({ ...prev, ...cached.details }));
       setLoading(false);
       return;
     }
@@ -104,9 +106,9 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
       setError(null);
 
       // Check which endpoints we haven't fetched yet
-      const newEndpoints = endpoints.filter(ep => !(ep in globalEndpointCache));
+      const newEndpoints = endpoints.filter((ep) => !(ep in globalEndpointCache));
       if (newEndpoints.length === 0) {
-        console.debug('[useEndpointConfig] All endpoints already in global cache');
+        console.debug("[useEndpointConfig] All endpoints already in global cache");
         const cached = endpoints.reduce(
           (acc, endpoint) => {
             const cachedDetails = globalEndpointCache[endpoint];
@@ -116,18 +118,20 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
             }
             return acc;
           },
-          { status: {} as Record<string, boolean>, details: {} as Record<string, EndpointAvailabilityDetails> }
+          { status: {} as Record<string, boolean>, details: {} as Record<string, EndpointAvailabilityDetails> },
         );
         setEndpointStatus(cached.status);
-        setEndpointDetails(prev => ({ ...prev, ...cached.details }));
+        setEndpointDetails((prev) => ({ ...prev, ...cached.details }));
         globalFetchedSets.add(endpointsKey);
         setLoading(false);
         return;
       }
       // Use batch API for efficiency - only fetch new endpoints
-      const endpointsParam = newEndpoints.join(',');
+      const endpointsParam = newEndpoints.join(",");
 
-      const response = await apiClient.get<Record<string, EndpointAvailabilityDetails>>(`/api/v1/config/endpoints-availability?endpoints=${encodeURIComponent(endpointsParam)}`);
+      const response = await apiClient.get<Record<string, EndpointAvailabilityDetails>>(
+        `/api/v1/config/endpoints-availability?endpoints=${encodeURIComponent(endpointsParam)}`,
+      );
       const statusMap = response.data;
 
       // Update global cache with new results
@@ -149,15 +153,15 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
           }
           return acc;
         },
-        { status: {} as Record<string, boolean>, details: {} as Record<string, EndpointAvailabilityDetails> }
+        { status: {} as Record<string, boolean>, details: {} as Record<string, EndpointAvailabilityDetails> },
       );
       setEndpointStatus(fullStatus.status);
-      setEndpointDetails(prev => ({ ...prev, ...fullStatus.details }));
+      setEndpointDetails((prev) => ({ ...prev, ...fullStatus.details }));
       globalFetchedSets.add(endpointsKey);
     } catch (err: unknown) {
       // On 401 (auth error), use optimistic fallback instead of disabling
       if (isAxiosError(err) && err.response?.status === 401) {
-        console.warn('[useEndpointConfig] 401 error - using optimistic fallback');
+        console.warn("[useEndpointConfig] 401 error - using optimistic fallback");
         const optimisticStatus = endpoints.reduce(
           (acc, endpoint) => {
             const optimisticDetails: EndpointAvailabilityDetails = { enabled: true, reason: null };
@@ -166,16 +170,16 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
             globalEndpointCache[endpoint] = optimisticDetails;
             return acc;
           },
-          { status: {} as Record<string, boolean>, details: {} as Record<string, EndpointAvailabilityDetails> }
+          { status: {} as Record<string, boolean>, details: {} as Record<string, EndpointAvailabilityDetails> },
         );
         setEndpointStatus(optimisticStatus.status);
-        setEndpointDetails(prev => ({ ...prev, ...optimisticStatus.details }));
+        setEndpointDetails((prev) => ({ ...prev, ...optimisticStatus.details }));
         setLoading(false);
         return;
       }
-      const errorMessage = err instanceof Error ? err.message : 'Unknown error occurred';
+      const errorMessage = err instanceof Error ? err.message : "Unknown error occurred";
       setError(errorMessage);
-      console.error('[EndpointConfig] Failed to check multiple endpoints:', err);
+      console.error("[EndpointConfig] Failed to check multiple endpoints:", err);
 
       // Fallback: assume all endpoints are enabled on error (optimistic)
       const optimisticStatus = endpoints.reduce(
@@ -183,12 +187,12 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
           const optimisticDetails: EndpointAvailabilityDetails = { enabled: true, reason: null };
           acc.status[endpoint] = true;
           acc.details[endpoint] = optimisticDetails;
-        return acc;
+          return acc;
         },
-        { status: {} as Record<string, boolean>, details: {} as Record<string, EndpointAvailabilityDetails> }
+        { status: {} as Record<string, boolean>, details: {} as Record<string, EndpointAvailabilityDetails> },
       );
       setEndpointStatus(optimisticStatus.status);
-      setEndpointDetails(prev => ({ ...prev, ...optimisticStatus.details }));
+      setEndpointDetails((prev) => ({ ...prev, ...optimisticStatus.details }));
     } finally {
       setLoading(false);
     }
@@ -196,7 +200,7 @@ export function useMultipleEndpointsEnabled(endpoints: string[]): {
 
   useEffect(() => {
     fetchAllEndpointStatuses();
-  }, [endpoints.join(',')]); // Re-run when endpoints array changes
+  }, [endpoints.join(",")]); // Re-run when endpoints array changes
 
   return {
     endpointStatus,
diff --git a/frontend/src/saas/hooks/usePlans.ts b/frontend/src/saas/hooks/usePlans.ts
index 7f26b1e527..9702868137 100644
--- a/frontend/src/saas/hooks/usePlans.ts
+++ b/frontend/src/saas/hooks/usePlans.ts
@@ -1,18 +1,18 @@
-import { useState, useEffect, useMemo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { supabase } from '@app/auth/supabase';
-import { useAuth } from '@app/auth/UseSession';
+import { useState, useEffect, useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { supabase } from "@app/auth/supabase";
+import { useAuth } from "@app/auth/UseSession";
 
 // Currency mapping
 const getCurrencySymbol = (currency: string): string => {
   const currencySymbols: { [key: string]: string } = {
-    'gbp': '£',
-    'usd': '$',
-    'eur': '€',
-    'cny': '¥',
-    'inr': '₹',
-    'brl': 'R$',
-    'idr': 'Rp'
+    gbp: "£",
+    usd: "$",
+    eur: "€",
+    cny: "¥",
+    inr: "₹",
+    brl: "R$",
+    idr: "Rp",
   };
   return currencySymbols[currency.toLowerCase()] || currency.toUpperCase();
 };
@@ -51,132 +51,133 @@ export interface PlansData {
   activeSince?: string;
 }
 
-export const usePlans = (currency: string = 'gbp') => {
+export const usePlans = (currency: string = "gbp") => {
   const { t } = useTranslation();
   const { isPro, refreshProStatus } = useAuth();
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
-  const [currentPlanId, setCurrentPlanId] = useState<string>('free');
+  const [currentPlanId, setCurrentPlanId] = useState<string>("free");
   const [dynamicPrices, setDynamicPrices] = useState<Map<string, { unit_amount: number; currency: string }>>(new Map());
 
-const fetchPricing = async () => {
-  try {
-    setLoading(true);
-    setError(null);
+  const fetchPricing = async () => {
+    try {
+      setLoading(true);
+      setError(null);
 
-    const lookupKeys = ['plan:pro', 'api:xsmall', 'api:small', 'api:medium', 'api:large'];
+      const lookupKeys = ["plan:pro", "api:xsmall", "api:small", "api:medium", "api:large"];
 
-    const { data, error } = await supabase.functions.invoke<{
-      prices: Record<string, { unit_amount: number; currency: string }>;
-      missing: string[];
-    }>('stripe-price-lookup', {
-      body: { lookup_keys: lookupKeys, currency }
-    });
-    if (error) throw error;
-    if (!data || !data.prices || !data.missing) throw new Error('No pricing data returned');
-    console.log('Fetched pricing data:', data);
+      const { data, error } = await supabase.functions.invoke<{
+        prices: Record<string, { unit_amount: number; currency: string }>;
+        missing: string[];
+      }>("stripe-price-lookup", {
+        body: { lookup_keys: lookupKeys, currency },
+      });
+      if (error) throw error;
+      if (!data || !data.prices || !data.missing) throw new Error("No pricing data returned");
+      console.log("Fetched pricing data:", data);
 
-    const priceMap = new Map<string, { unit_amount: number; currency: string }>();
-    // map your UI keys to lookup keys (if names differ)
-    const keyMap: Record<string, string> = {
-      pro: 'plan:pro',
-      xsmall: 'api:xsmall',
-      small: 'api:small',
-      medium: 'api:medium',
-      large: 'api:large',
-    };
+      const priceMap = new Map<string, { unit_amount: number; currency: string }>();
+      // map your UI keys to lookup keys (if names differ)
+      const keyMap: Record<string, string> = {
+        pro: "plan:pro",
+        xsmall: "api:xsmall",
+        small: "api:small",
+        medium: "api:medium",
+        large: "api:large",
+      };
 
-    for (const [uiKey, lookupKey] of Object.entries(keyMap)) {
-      const p = data?.prices?.[lookupKey];
-      if (p) {
-        priceMap.set(uiKey, {
-          unit_amount: p.unit_amount ?? 0,
-          currency: p.currency
-        });
+      for (const [uiKey, lookupKey] of Object.entries(keyMap)) {
+        const p = data?.prices?.[lookupKey];
+        if (p) {
+          priceMap.set(uiKey, {
+            unit_amount: p.unit_amount ?? 0,
+            currency: p.currency,
+          });
+        }
       }
+
+      if (data.missing.length) {
+        console.warn("Missing prices for", data.missing, "in", currency);
+        // Optionally re-request with a fallback currency (e.g., 'usd')
+      }
+
+      setDynamicPrices(priceMap);
+    } catch (err) {
+      console.error("Error fetching pricing:", err);
+      setError(err instanceof Error ? err.message : "Failed to fetch pricing data");
+      // continue with static prices if needed
+    } finally {
+      setLoading(false);
     }
-
-    if (data.missing.length) {
-      console.warn('Missing prices for', data.missing, 'in', currency);
-      // Optionally re-request with a fallback currency (e.g., 'usd')
-    }
-
-    setDynamicPrices(priceMap);
-  } catch (err) {
-    console.error('Error fetching pricing:', err);
-    setError(err instanceof Error ? err.message : 'Failed to fetch pricing data');
-    // continue with static prices if needed
-  } finally {
-    setLoading(false);
-  }
-};
-
+  };
 
   // Memoize static plan and package data to prevent recreation on every render
   const staticPlansData = useMemo(() => {
     const plans: PlanTier[] = [
       {
-        id: 'free',
-        name: t('plan.free.name', 'Free'),
+        id: "free",
+        name: t("plan.free.name", "Free"),
         price: 0,
         currency: getCurrencySymbol(currency),
-        period: t('plan.period.month', '/month'),
+        period: t("plan.period.month", "/month"),
         highlights: [
-          t('plan.free.highlight1', "Limited Tool Usage Per week"),
-          t('plan.free.highlight2',  "Access to all tools"),
-          t('plan.free.highlight3', 'Community support')
+          t("plan.free.highlight1", "Limited Tool Usage Per week"),
+          t("plan.free.highlight2", "Access to all tools"),
+          t("plan.free.highlight3", "Community support"),
         ],
         features: [
-          { name: t('plan.feature.pdfTools', 'Basic PDF Tools'), included: true },
-          { name: t('plan.feature.fileSize', 'File Size Limit'), included: false },
-          { name: t('plan.feature.automation', 'automate tool workflows'), included: false },
-          { name: t('plan.feature.api', 'API Access'), included: false },
-          { name: t('plan.feature.priority', 'Priority Support'), included: false },
-          { name: t('plan.feature.customPricing', 'Custom Pricing'), included: false },
-        ]
+          { name: t("plan.feature.pdfTools", "Basic PDF Tools"), included: true },
+          { name: t("plan.feature.fileSize", "File Size Limit"), included: false },
+          { name: t("plan.feature.automation", "automate tool workflows"), included: false },
+          { name: t("plan.feature.api", "API Access"), included: false },
+          { name: t("plan.feature.priority", "Priority Support"), included: false },
+          { name: t("plan.feature.customPricing", "Custom Pricing"), included: false },
+        ],
       },
       {
-        id: 'pro',
-        name: t('plan.pro.name', 'Pro'),
-        price: dynamicPrices.get('pro') ? dynamicPrices.get('pro')!.unit_amount / 100 : 8,
-        currency: dynamicPrices.get('pro') ? getCurrencySymbol(dynamicPrices.get('pro')!.currency) : getCurrencySymbol(currency),
-        period: t('plan.period.month', '/month'),
+        id: "pro",
+        name: t("plan.pro.name", "Pro"),
+        price: dynamicPrices.get("pro") ? dynamicPrices.get("pro")!.unit_amount / 100 : 8,
+        currency: dynamicPrices.get("pro")
+          ? getCurrencySymbol(dynamicPrices.get("pro")!.currency)
+          : getCurrencySymbol(currency),
+        period: t("plan.period.month", "/month"),
         popular: true,
         highlights: [
-          t('plan.pro.highlight1', 'Unlimited Tool Usage'),
-          t('plan.pro.highlight2', 'Advanced PDF tools'),
-          t('plan.pro.highlight3', 'No watermarks')
+          t("plan.pro.highlight1", "Unlimited Tool Usage"),
+          t("plan.pro.highlight2", "Advanced PDF tools"),
+          t("plan.pro.highlight3", "No watermarks"),
         ],
         features: [
-          { name: t('plan.feature.pdfTools', 'Basic PDF Tools'), included: true },
-          { name: t('plan.feature.fileSize', 'File Size Limit'), included: true },
-          { name: t('plan.feature.automation', 'automate tool workflows'), included: true },
-          { name: t('plan.feature.api', 'Weekly API Credits'), included: true },
-          { name: t('plan.feature.priority', 'Priority Support'), included: false },
-          { name: t('plan.feature.customPricing', 'Custom Pricing'), included: false },
-        ]
+          { name: t("plan.feature.pdfTools", "Basic PDF Tools"), included: true },
+          { name: t("plan.feature.fileSize", "File Size Limit"), included: true },
+          { name: t("plan.feature.automation", "automate tool workflows"), included: true },
+          { name: t("plan.feature.api", "Weekly API Credits"), included: true },
+          { name: t("plan.feature.priority", "Priority Support"), included: false },
+          { name: t("plan.feature.customPricing", "Custom Pricing"), included: false },
+        ],
       },
       {
-        id: 'enterprise',
-        name: t('plan.enterprise.name', 'Enterprise'),
+        id: "enterprise",
+        name: t("plan.enterprise.name", "Enterprise"),
         price: 0,
         currency: getCurrencySymbol(currency),
-        period: '',
+        period: "",
         isContactOnly: true,
         highlights: [
-          t('plan.enterprise.highlight1', 'Custom pricing'),
-          t('plan.enterprise.highlight2', 'Dedicated support'),
-          t('plan.enterprise.highlight3', 'Latest features')
+          t("plan.enterprise.highlight1", "Custom pricing"),
+          t("plan.enterprise.highlight2", "Dedicated support"),
+          t("plan.enterprise.highlight3", "Latest features"),
         ],
         features: [
-          { name: t('plan.feature.pdfTools', 'Basic PDF Tools'), included: true },
-          { name: t('plan.feature.fileSize', 'File Size Limit'), included: true },
-          { name: t('plan.feature.automation', 'automate tool workflows'), included: true },
-          { name: t('plan.feature.api', 'Weekly API Credits'), included: true },
-          { name: t('plan.feature.priority', 'Priority Support'), included: true },
-          { name: t('plan.feature.customPricing', 'Custom Pricing'), included: true },
-        ]
-      }
+          { name: t("plan.feature.pdfTools", "Basic PDF Tools"), included: true },
+          { name: t("plan.feature.fileSize", "File Size Limit"), included: true },
+          { name: t("plan.feature.automation", "automate tool workflows"), included: true },
+          { name: t("plan.feature.api", "Weekly API Credits"), included: true },
+          { name: t("plan.feature.priority", "Priority Support"), included: true },
+          { name: t("plan.feature.customPricing", "Custom Pricing"), included: true },
+        ],
+      },
     ];
 
     // Helper function to get price info
@@ -187,10 +188,10 @@ const fetchPricing = async () => {
       return { price, currencySymbol };
     };
 
-    const xsmallPrice = getPriceInfo('xsmall', 4);
-    const smallPrice = getPriceInfo('small', 15);
-    const mediumPrice = getPriceInfo('medium', 25);
-    const largePrice = getPriceInfo('large', 90);
+    const xsmallPrice = getPriceInfo("xsmall", 4);
+    const smallPrice = getPriceInfo("small", 15);
+    const mediumPrice = getPriceInfo("medium", 25);
+    const largePrice = getPriceInfo("large", 90);
 
     // Calculate dynamic discounts based on per-credit cost (using xsmall as baseline)
     const xsmallPerCredit = xsmallPrice.price / 100;
@@ -204,40 +205,40 @@ const fetchPricing = async () => {
 
     const apiPackages: ApiPackage[] = [
       {
-        id: 'xsmall',
-        name: t('plan.api.xsmall', '100 Credits'),
+        id: "xsmall",
+        name: t("plan.api.xsmall", "100 Credits"),
         price: xsmallPrice.price,
         currency: xsmallPrice.currencySymbol,
         credits: 100,
-        description: `${xsmallPrice.currencySymbol}${(xsmallPrice.price / 100).toFixed(3)} per credit`
+        description: `${xsmallPrice.currencySymbol}${(xsmallPrice.price / 100).toFixed(3)} per credit`,
       },
       {
-        id: 'small',
-        name: t('plan.api.small', '500 Credits'),
+        id: "small",
+        name: t("plan.api.small", "500 Credits"),
         price: smallPrice.price,
         currency: smallPrice.currencySymbol,
         credits: 500,
-        description: `${smallPrice.currencySymbol}${(smallPrice.price / 500).toFixed(3)} per credit${smallDiscount > 0 ? ` • ${smallDiscount}% discount` : ''}`
+        description: `${smallPrice.currencySymbol}${(smallPrice.price / 500).toFixed(3)} per credit${smallDiscount > 0 ? ` • ${smallDiscount}% discount` : ""}`,
       },
       {
-        id: 'medium',
-        name: t('plan.api.medium', '1,000 Credits'),
+        id: "medium",
+        name: t("plan.api.medium", "1,000 Credits"),
         price: mediumPrice.price,
         currency: mediumPrice.currencySymbol,
         credits: 1000,
-        description: `${mediumPrice.currencySymbol}${(mediumPrice.price / 1000).toFixed(3)} per credit${mediumDiscount > 0 ? ` • ${mediumDiscount}% discount` : ''}`
+        description: `${mediumPrice.currencySymbol}${(mediumPrice.price / 1000).toFixed(3)} per credit${mediumDiscount > 0 ? ` • ${mediumDiscount}% discount` : ""}`,
       },
       {
-        id: 'large',
-        name: t('plan.api.large', '5,000 Credits'),
+        id: "large",
+        name: t("plan.api.large", "5,000 Credits"),
         price: largePrice.price,
         currency: largePrice.currencySymbol,
         credits: 5000,
-        description: `${largePrice.currencySymbol}${(largePrice.price / 5000).toFixed(3)} per credit${largeDiscount > 0 ? ` • ${largeDiscount}% discount` : ''}`
-      }
+        description: `${largePrice.currencySymbol}${(largePrice.price / 5000).toFixed(3)} per credit${largeDiscount > 0 ? ` • ${largeDiscount}% discount` : ""}`,
+      },
     ];
 
-    const plansMap = new Map(plans.map(plan => [plan.id, plan]));
+    const plansMap = new Map(plans.map((plan) => [plan.id, plan]));
     return { plans: plansMap, apiPackages };
   }, [t, dynamicPrices]);
 
@@ -252,16 +253,15 @@ const fetchPricing = async () => {
       plans: staticPlansData.plans,
       apiPackages: staticPlansData.apiPackages,
       currentPlan,
-      nextBillingDate: 'Feb 15, 2025',
-      activeSince: 'January 2025'
+      nextBillingDate: "Feb 15, 2025",
+      activeSince: "January 2025",
     };
   }, [staticPlansData, currentPlanId]);
 
-
   // Update currentPlanId when isPro changes
   useEffect(() => {
     if (isPro !== null) {
-      setCurrentPlanId(isPro ? 'pro' : 'free');
+      setCurrentPlanId(isPro ? "pro" : "free");
     }
   }, [isPro]);
 
@@ -280,6 +280,6 @@ const fetchPricing = async () => {
     loading,
     error,
     refetch: refreshProStatus, // Refetch pro status from auth context
-    updateCurrentPlan // Add local plan update function
+    updateCurrentPlan, // Add local plan update function
   };
 };
diff --git a/frontend/src/saas/routes/AuthCallback.tsx b/frontend/src/saas/routes/AuthCallback.tsx
index 7b596d7858..acf997e000 100644
--- a/frontend/src/saas/routes/AuthCallback.tsx
+++ b/frontend/src/saas/routes/AuthCallback.tsx
@@ -1,157 +1,164 @@
-import { useEffect, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { supabase } from '@app/auth/supabase'
-import { Button } from '@mantine/core'
-import { withBasePath } from '@app/constants/app'
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { supabase } from "@app/auth/supabase";
+import { Button } from "@mantine/core";
+import { withBasePath } from "@app/constants/app";
 
 interface CallbackState {
-  status: 'processing' | 'success' | 'error'
-  message: string
-  details?: Record<string, unknown>
+  status: "processing" | "success" | "error";
+  message: string;
+  details?: Record<string, unknown>;
 }
 
 export default function AuthCallback() {
-  const navigate = useNavigate()
+  const navigate = useNavigate();
   const [state, setState] = useState<CallbackState>({
-    status: 'processing',
-    message: 'Processing authentication...'
-  })
+    status: "processing",
+    message: "Processing authentication...",
+  });
 
   useEffect(() => {
     const handleCallback = async () => {
       try {
-        const url = new URL(window.location.href)
-        const code = url.searchParams.get('code')
-        const error = url.searchParams.get('error')
-        const errorDescription = url.searchParams.get('error_description')
-        const next = url.searchParams.get('next') || '/'
+        const url = new URL(window.location.href);
+        const code = url.searchParams.get("code");
+        const error = url.searchParams.get("error");
+        const errorDescription = url.searchParams.get("error_description");
+        const next = url.searchParams.get("next") || "/";
 
-        console.log('[Auth Callback Debug] URL parameters:', {
+        console.log("[Auth Callback Debug] URL parameters:", {
           hasCode: !!code,
           hasError: !!error,
           error,
           errorDescription,
           next,
-          fullUrl: window.location.href
-        })
+          fullUrl: window.location.href,
+        });
 
         // Handle OAuth errors
         if (error) {
-          const errorMsg = errorDescription || error
-          console.error('[Auth Callback Debug] OAuth error:', { error, errorDescription })
+          const errorMsg = errorDescription || error;
+          console.error("[Auth Callback Debug] OAuth error:", { error, errorDescription });
 
           setState({
-            status: 'error',
+            status: "error",
             message: `Authentication failed: ${errorMsg}`,
-            details: { error, errorDescription }
-          })
+            details: { error, errorDescription },
+          });
 
           // Redirect to login page after 3 seconds
-          setTimeout(() => navigate('/login', { replace: true }), 3000)
-          return
+          setTimeout(() => navigate("/login", { replace: true }), 3000);
+          return;
         }
 
         // If PKCE/SSR-style code is present, exchange it for a session
         if (code) {
-          console.log('[Auth Callback Debug] Exchanging code for session...')
+          console.log("[Auth Callback Debug] Exchanging code for session...");
 
           setState({
-            status: 'processing',
-            message: 'Exchanging authorization code...'
-          })
+            status: "processing",
+            message: "Exchanging authorization code...",
+          });
 
-          const { data, error: exchangeError } = await supabase.auth.exchangeCodeForSession(code)
+          const { data, error: exchangeError } = await supabase.auth.exchangeCodeForSession(code);
 
           if (exchangeError) {
-            console.error('[Auth Callback Debug] Code exchange error:', exchangeError)
+            console.error("[Auth Callback Debug] Code exchange error:", exchangeError);
 
             setState({
-              status: 'error',
+              status: "error",
               message: `Failed to complete sign in: ${exchangeError.message}`,
-              details: { exchangeError }
-            })
+              details: { exchangeError },
+            });
 
-            setTimeout(() => navigate('/login', { replace: true }), 3000)
-            return
+            setTimeout(() => navigate("/login", { replace: true }), 3000);
+            return;
           }
 
-          console.log('[Auth Callback Debug] Code exchange successful:', {
+          console.log("[Auth Callback Debug] Code exchange successful:", {
             hasSession: !!data.session,
             userId: data.session?.user?.id,
-            email: data.session?.user?.email
-          })
+            email: data.session?.user?.email,
+          });
 
           setState({
-            status: 'success',
-            message: 'Sign in successful! Redirecting...',
+            status: "success",
+            message: "Sign in successful! Redirecting...",
             details: {
               userId: data.session?.user?.id,
               email: data.session?.user?.email,
-              provider: data.session?.user?.app_metadata?.provider
-            }
-          })
+              provider: data.session?.user?.app_metadata?.provider,
+            },
+          });
         } else {
           // No code present - might already be authenticated
-          console.log('[Auth Callback Debug] No code present, checking existing session...')
+          console.log("[Auth Callback Debug] No code present, checking existing session...");
 
-          const { data: sessionData } = await supabase.auth.getSession()
+          const { data: sessionData } = await supabase.auth.getSession();
 
           if (sessionData.session) {
-            console.log('[Auth Callback Debug] Existing session found')
+            console.log("[Auth Callback Debug] Existing session found");
             setState({
-              status: 'success',
-              message: 'Already signed in! Redirecting...'
-            })
+              status: "success",
+              message: "Already signed in! Redirecting...",
+            });
           } else {
-            console.log('[Auth Callback Debug] No session found')
+            console.log("[Auth Callback Debug] No session found");
             setState({
-              status: 'error',
-              message: 'No authentication data found'
-            })
-            setTimeout(() => navigate('/login', { replace: true }), 2000)
-            return
+              status: "error",
+              message: "No authentication data found",
+            });
+            setTimeout(() => navigate("/login", { replace: true }), 2000);
+            return;
           }
         }
 
         // Redirect to the intended destination
-        const destination = next.startsWith('/') ? next : '/'
-        console.log('[Auth Callback Debug] Redirecting to:', destination)
-
-        setTimeout(() => navigate(destination, { replace: true }), 1500)
+        const destination = next.startsWith("/") ? next : "/";
+        console.log("[Auth Callback Debug] Redirecting to:", destination);
 
+        setTimeout(() => navigate(destination, { replace: true }), 1500);
       } catch (err) {
-        console.error('[Auth Callback Debug] Unexpected error:', err)
+        console.error("[Auth Callback Debug] Unexpected error:", err);
 
         setState({
-          status: 'error',
-          message: `Unexpected error: ${err instanceof Error ? err.message : 'Unknown error'}`,
-          details: { error: err }
-        })
+          status: "error",
+          message: `Unexpected error: ${err instanceof Error ? err.message : "Unknown error"}`,
+          details: { error: err },
+        });
 
-        setTimeout(() => navigate('/login', { replace: true }), 3000)
+        setTimeout(() => navigate("/login", { replace: true }), 3000);
       }
-    }
+    };
 
-    handleCallback()
-  }, [navigate])
+    handleCallback();
+  }, [navigate]);
 
   const getStatusColor = () => {
     switch (state.status) {
-      case 'processing': return 'text-blue-600'
-      case 'success': return 'text-green-600'
-      case 'error': return 'text-red-600'
-      default: return 'text-gray-600'
+      case "processing":
+        return "text-blue-600";
+      case "success":
+        return "text-green-600";
+      case "error":
+        return "text-red-600";
+      default:
+        return "text-gray-600";
     }
-  }
+  };
 
   const getTitle = () => {
     switch (state.status) {
-      case 'processing': return 'Signing you in'
-      case 'success': return 'You\'re all set!'
-      case 'error': return 'Authentication failed'
-      default: return 'Authentication'
+      case "processing":
+        return "Signing you in";
+      case "success":
+        return "You're all set!";
+      case "error":
+        return "Authentication failed";
+      default:
+        return "Authentication";
     }
-  }
+  };
 
   return (
     <div className="relative min-h-screen flex items-center justify-center overflow-hidden bg-gradient-to-br from-slate-50 via-white to-slate-100">
@@ -168,14 +175,10 @@ export default function AuthCallback() {
             className="mx-auto mb-5 h-8 opacity-80"
           />
 
-          <h1 className="text-2xl font-bold text-gray-900 mb-2">
-            {getTitle()}
-          </h1>
-          <p className={`text-base ${getStatusColor()}`}>
-            {state.message}
-          </p>
+          <h1 className="text-2xl font-bold text-gray-900 mb-2">{getTitle()}</h1>
+          <p className={`text-base ${getStatusColor()}`}>{state.message}</p>
 
-          {state.status === 'processing' && (
+          {state.status === "processing" && (
             <div className="mt-6">
               <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
               <div className="mt-3 h-1 overflow-hidden rounded-full bg-slate-200">
@@ -187,24 +190,22 @@ export default function AuthCallback() {
           {/* Action button - only show if error */}
           <div className="mt-6 flex items-center justify-center gap-3">
             {(() => {
-              if (state.status === 'error') {
+              if (state.status === "error") {
                 return (
                   <Button
-                    onClick={() => navigate('/login', { replace: true })}
+                    onClick={() => navigate("/login", { replace: true })}
                     className="inline-flex items-center rounded-md bg-rose-600 px-4 py-2 text-sm font-medium text-white shadow hover:bg-rose-700 focus:outline-none focus:ring-2 focus:ring-rose-500"
                   >
                     Back to login
                   </Button>
-                )
+                );
               }
             })()}
           </div>
 
           {import.meta.env.DEV && state.details && (
             <details className="mt-6 text-left">
-              <summary className="cursor-pointer text-sm text-gray-500 hover:text-gray-700">
-                Debug Information
-              </summary>
+              <summary className="cursor-pointer text-sm text-gray-500 hover:text-gray-700">Debug Information</summary>
               <pre className="mt-2 p-3 bg-gray-100 rounded text-xs overflow-auto">
                 {JSON.stringify(state.details, null, 2)}
               </pre>
@@ -213,5 +214,5 @@ export default function AuthCallback() {
         </div>
       </div>
     </div>
-  )
+  );
 }
diff --git a/frontend/src/saas/routes/Landing.tsx b/frontend/src/saas/routes/Landing.tsx
index 6204b86a49..3d703f8432 100644
--- a/frontend/src/saas/routes/Landing.tsx
+++ b/frontend/src/saas/routes/Landing.tsx
@@ -1,48 +1,46 @@
-import React, { useMemo } from 'react'
-import { Navigate, useLocation } from 'react-router-dom'
-import { useAuth } from '@app/auth/UseSession'
-import { useAutoAnonymousAuth } from '@app/hooks/useAutoAnonymousAuth'
-import { isToolRoute } from '@app/utils/pathUtils'
-import HomePage from '@app/pages/HomePage'
-import Login from '@app/routes/Login'
-import GuestUserBanner from '@app/components/auth/GuestUserBanner'
-import { TrialStatusBanner } from '@app/components/shared/TrialStatusBanner'
+import React, { useMemo } from "react";
+import { Navigate, useLocation } from "react-router-dom";
+import { useAuth } from "@app/auth/UseSession";
+import { useAutoAnonymousAuth } from "@app/hooks/useAutoAnonymousAuth";
+import { isToolRoute } from "@app/utils/pathUtils";
+import HomePage from "@app/pages/HomePage";
+import Login from "@app/routes/Login";
+import GuestUserBanner from "@app/components/auth/GuestUserBanner";
+import { TrialStatusBanner } from "@app/components/shared/TrialStatusBanner";
 
 export default function Landing() {
-  const { session, loading } = useAuth()
-  const { isAutoAuthenticating, autoAuthError, shouldTriggerAutoAuth } = useAutoAnonymousAuth()
-  const location = useLocation()
+  const { session, loading } = useAuth();
+  const { isAutoAuthenticating, autoAuthError, shouldTriggerAutoAuth } = useAutoAnonymousAuth();
+  const location = useLocation();
 
   // Check if current path is a tool (prevents premature navigation on first render)
-  const isCurrentPathTool = useMemo(() => isToolRoute(location.pathname), [location.pathname])
+  const isCurrentPathTool = useMemo(() => isToolRoute(location.pathname), [location.pathname]);
 
   // Match the same guarded bypass used in RequireAuth
-  const isLocalhost = typeof window !== 'undefined' && /^(localhost|127\.0\.0\.1)$/i.test(window.location.hostname)
-  const devBypassEnabled = Boolean(import.meta.env.DEV && isLocalhost && import.meta.env.VITE_DEV_BYPASS_AUTH === 'true')
+  const isLocalhost = typeof window !== "undefined" && /^(localhost|127\.0\.0\.1)$/i.test(window.location.hostname);
+  const devBypassEnabled = Boolean(import.meta.env.DEV && isLocalhost && import.meta.env.VITE_DEV_BYPASS_AUTH === "true");
 
-  console.log('[Landing] State:', {
+  console.log("[Landing] State:", {
     pathname: location.pathname,
     loading,
     hasSession: !!session,
     isAutoAuthenticating,
     shouldTriggerAutoAuth,
     isCurrentPathTool,
-    autoAuthError
-  })
+    autoAuthError,
+  });
 
   // Show loading while checking auth, while auto-authenticating, OR while preparing to auto-authenticate
   // CRITICAL: Also wait if shouldTriggerAutoAuth is true OR if we're on a tool route (prevents navigation before hook evaluates)
   if (loading || isAutoAuthenticating || (!session && (shouldTriggerAutoAuth || isCurrentPathTool) && !autoAuthError)) {
     return (
-      <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+      <div style={{ minHeight: "100vh", display: "flex", alignItems: "center", justifyContent: "center" }}>
         <div className="text-center">
           <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto mb-3"></div>
-          <div className="text-gray-600">
-            {isAutoAuthenticating ? 'Setting up your session...' : 'Loading...'}
-          </div>
+          <div className="text-gray-600">{isAutoAuthenticating ? "Setting up your session..." : "Loading..."}</div>
         </div>
       </div>
-    )
+    );
   }
 
   // If we have a session or dev bypass is enabled, show the main app
@@ -53,22 +51,21 @@ export default function Landing() {
         <TrialStatusBanner />
         <HomePage />
       </>
-    )
+    );
   }
 
   // If auto-authentication failed, navigate to login with error state
   if (autoAuthError && shouldTriggerAutoAuth) {
-    return <Navigate to="/login" replace state={{ autoAuthError, from: location }} />
+    return <Navigate to="/login" replace state={{ autoAuthError, from: location }} />;
   }
 
   // If we're at home route ("/"), show login directly (marketing/landing page)
   // Otherwise navigate to login (fixes URL mismatch for tool routes)
-  const isHome = location.pathname === '/' || location.pathname === ''
+  const isHome = location.pathname === "/" || location.pathname === "";
   if (isHome) {
-    return <Login />
+    return <Login />;
   }
 
   // For non-home routes without auth, navigate to login (preserves from location)
-  return <Navigate to="/login" replace state={{ from: location }} />
+  return <Navigate to="/login" replace state={{ from: location }} />;
 }
-
diff --git a/frontend/src/saas/routes/Login.tsx b/frontend/src/saas/routes/Login.tsx
index 6a0109d583..5d27e169b7 100644
--- a/frontend/src/saas/routes/Login.tsx
+++ b/frontend/src/saas/routes/Login.tsx
@@ -1,214 +1,210 @@
-import { useEffect, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
-import { supabase, signInAnonymously } from '@app/auth/supabase'
-import { useAuth } from '@app/auth/UseSession'
-import { useTranslation } from '@app/hooks/useTranslation'
-import { useDocumentMeta } from '@app/hooks/useDocumentMeta'
-import AuthLayout from '@app/routes/authShared/AuthLayout'
-import '@app/routes/authShared/auth.css'
-import '@app/routes/authShared/saas-auth.css'
-import GuestSignInButton from '@app/routes/authShared/GuestSignInButton'
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import { supabase, signInAnonymously } from "@app/auth/supabase";
+import { useAuth } from "@app/auth/UseSession";
+import { useTranslation } from "@app/hooks/useTranslation";
+import { useDocumentMeta } from "@app/hooks/useDocumentMeta";
+import AuthLayout from "@app/routes/authShared/AuthLayout";
+import "@app/routes/authShared/auth.css";
+import "@app/routes/authShared/saas-auth.css";
+import GuestSignInButton from "@app/routes/authShared/GuestSignInButton";
 
 // Import login components
-import LoginHeader from '@app/routes/login/LoginHeader'
-import ErrorMessage from '@app/routes/login/ErrorMessage'
-import EmailPasswordForm from '@app/routes/login/EmailPasswordForm'
-import MagicLinkForm from '@app/routes/login/MagicLinkForm'
-import OAuthButtons from '@app/routes/login/OAuthButtons'
-import DividerWithText from '@app/components/shared/DividerWithText'
-import LoggedInState from '@app/routes/login/LoggedInState'
-import { absoluteWithBasePath, getBaseUrl } from '@app/constants/app'
+import LoginHeader from "@app/routes/login/LoginHeader";
+import ErrorMessage from "@app/routes/login/ErrorMessage";
+import EmailPasswordForm from "@app/routes/login/EmailPasswordForm";
+import MagicLinkForm from "@app/routes/login/MagicLinkForm";
+import OAuthButtons from "@app/routes/login/OAuthButtons";
+import DividerWithText from "@app/components/shared/DividerWithText";
+import LoggedInState from "@app/routes/login/LoggedInState";
+import { absoluteWithBasePath, getBaseUrl } from "@app/constants/app";
 
 export default function Login() {
-  const navigate = useNavigate()
-  const { session, loading, refreshSession } = useAuth()
-  const { t } = useTranslation()
-  const [isSigningIn, setIsSigningIn] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const [showMagicLink, setShowMagicLink] = useState(false)
-  const [showEmailForm, setShowEmailForm] = useState(false)
-  const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
-  const [magicLinkEmail, setMagicLinkEmail] = useState('')
+  const navigate = useNavigate();
+  const { session, loading, refreshSession } = useAuth();
+  const { t } = useTranslation();
+  const [isSigningIn, setIsSigningIn] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [showMagicLink, setShowMagicLink] = useState(false);
+  const [showEmailForm, setShowEmailForm] = useState(false);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [magicLinkEmail, setMagicLinkEmail] = useState("");
   // Prefill email from query param (e.g. after password reset)
   useEffect(() => {
     try {
-      const url = new URL(window.location.href)
-      const emailFromQuery = url.searchParams.get('email')
+      const url = new URL(window.location.href);
+      const emailFromQuery = url.searchParams.get("email");
       if (emailFromQuery) {
-        setEmail(emailFromQuery)
+        setEmail(emailFromQuery);
       }
     } catch (_) {
       // ignore
     }
-  }, [])
+  }, []);
 
   const baseUrl = getBaseUrl();
 
   // Set document meta
   useDocumentMeta({
-    title: `${t('login.title', 'Sign in')} - Stirling PDF`,
-    description: t('app.description', 'The Free Adobe Acrobat alternative (10M+ Downloads)'),
-    ogTitle: `${t('login.title', 'Sign in')} - Stirling PDF`,
-    ogDescription: t('app.description', 'The Free Adobe Acrobat alternative (10M+ Downloads)'),
+    title: `${t("login.title", "Sign in")} - Stirling PDF`,
+    description: t("app.description", "The Free Adobe Acrobat alternative (10M+ Downloads)"),
+    ogTitle: `${t("login.title", "Sign in")} - Stirling PDF`,
+    ogDescription: t("app.description", "The Free Adobe Acrobat alternative (10M+ Downloads)"),
     ogImage: `${baseUrl}/og_images/home.png`,
-    ogUrl: `${window.location.origin}${window.location.pathname}`
-  })
+    ogUrl: `${window.location.origin}${window.location.pathname}`,
+  });
 
   // Show logged in state if authenticated
   if (session && !loading) {
-    return <LoggedInState />
+    return <LoggedInState />;
   }
 
-  const signInWithProvider = async (provider: 'github' | 'google' | 'apple' | 'azure') => {
+  const signInWithProvider = async (provider: "github" | "google" | "apple" | "azure") => {
     try {
-      setIsSigningIn(true)
-      setError(null)
+      setIsSigningIn(true);
+      setError(null);
 
-      const redirectTo = absoluteWithBasePath('/auth/callback')
-      console.log(`[Login] Signing in with ${provider}`)
+      const redirectTo = absoluteWithBasePath("/auth/callback");
+      console.log(`[Login] Signing in with ${provider}`);
 
-      const oauthOptions: { redirectTo: string; queryParams?: Record<string, string> } = { redirectTo }
-      if (provider === 'apple') {
-        oauthOptions.queryParams = { scope: 'email name' }
-      } else if (provider === 'azure') {
-        oauthOptions.queryParams = { scope: 'openid profile email' }
+      const oauthOptions: { redirectTo: string; queryParams?: Record<string, string> } = { redirectTo };
+      if (provider === "apple") {
+        oauthOptions.queryParams = { scope: "email name" };
+      } else if (provider === "azure") {
+        oauthOptions.queryParams = { scope: "openid profile email" };
       } else {
         oauthOptions.queryParams = {
-          access_type: 'offline',
-          prompt: 'consent',
-        }
+          access_type: "offline",
+          prompt: "consent",
+        };
       }
 
       const { error } = await supabase.auth.signInWithOAuth({
         provider,
-        options: oauthOptions
-      })
+        options: oauthOptions,
+      });
 
       if (error) {
-        console.error(`[Login] ${provider} error:`, error)
-        setError(t('login.failedToSignIn', { provider, message: error.message }))
+        console.error(`[Login] ${provider} error:`, error);
+        setError(t("login.failedToSignIn", { provider, message: error.message }));
       }
     } catch (err) {
-      console.error(`[Login] Unexpected error:`, err)
-      setError(t('login.unexpectedError', { message: err instanceof Error ? err.message : 'Unknown error' }))
+      console.error(`[Login] Unexpected error:`, err);
+      setError(t("login.unexpectedError", { message: err instanceof Error ? err.message : "Unknown error" }));
     } finally {
-      setIsSigningIn(false)
+      setIsSigningIn(false);
     }
-  }
+  };
 
   const signInWithEmail = async () => {
     if (!email || !password) {
-      setError(t('login.pleaseEnterBoth'))
-      return
+      setError(t("login.pleaseEnterBoth"));
+      return;
     }
 
     try {
-      setIsSigningIn(true)
-      setError(null)
+      setIsSigningIn(true);
+      setError(null);
 
-      console.log('[Login] Signing in with email:', email)
+      console.log("[Login] Signing in with email:", email);
 
       const { data, error } = await supabase.auth.signInWithPassword({
         email: email.trim(),
-        password: password
-      })
+        password: password,
+      });
 
       if (error) {
-        console.error('[Login] Email sign in error:', error)
-        setError(error.message)
+        console.error("[Login] Email sign in error:", error);
+        setError(error.message);
       } else if (data.user) {
-        console.log('[Login] Email sign in successful')
+        console.log("[Login] Email sign in successful");
         // User will be redirected by the auth state change
       }
     } catch (err) {
-      console.error('[Login] Unexpected error]:', err)
-      setError(t('login.unexpectedError', { message: err instanceof Error ? err.message : 'Unknown error' }))
+      console.error("[Login] Unexpected error]:", err);
+      setError(t("login.unexpectedError", { message: err instanceof Error ? err.message : "Unknown error" }));
     } finally {
-      setIsSigningIn(false)
+      setIsSigningIn(false);
     }
-  }
+  };
 
   const signInWithMagicLink = async () => {
     if (!magicLinkEmail) {
-      setError(t('login.pleaseEnterEmail'))
-      return
+      setError(t("login.pleaseEnterEmail"));
+      return;
     }
 
     try {
-      setIsSigningIn(true)
-      setError(null)
+      setIsSigningIn(true);
+      setError(null);
 
-      console.log('[Login] Sending magic link to:', magicLinkEmail)
+      console.log("[Login] Sending magic link to:", magicLinkEmail);
 
       const { error } = await supabase.auth.signInWithOtp({
         email: magicLinkEmail.trim(),
         options: {
-          emailRedirectTo: absoluteWithBasePath('/auth/callback')
-        }
-      })
+          emailRedirectTo: absoluteWithBasePath("/auth/callback"),
+        },
+      });
 
       if (error) {
-        console.error('[Login] Magic link error:', error)
-        setError(error.message)
+        console.error("[Login] Magic link error:", error);
+        setError(error.message);
       } else {
-        setError(null)
-        alert(t('login.magicLinkSent', { email: magicLinkEmail }))
-        setMagicLinkEmail('')
-        setShowMagicLink(false)
+        setError(null);
+        alert(t("login.magicLinkSent", { email: magicLinkEmail }));
+        setMagicLinkEmail("");
+        setShowMagicLink(false);
       }
     } catch (err) {
-      console.error('[Login] Unexpected error:', err)
-      setError(t('login.unexpectedError', { message: err instanceof Error ? err.message : 'Unknown error' }))
+      console.error("[Login] Unexpected error:", err);
+      setError(t("login.unexpectedError", { message: err instanceof Error ? err.message : "Unknown error" }));
     } finally {
-      setIsSigningIn(false)
+      setIsSigningIn(false);
     }
-  }
+  };
 
   const handleForgotPassword = () => {
-    navigate('/auth/reset')
-  }
+    navigate("/auth/reset");
+  };
 
   const handleAnonymousSignIn = async () => {
     try {
-      setIsSigningIn(true)
-      setError(null)
-      console.log('[Login] Signing in anonymously')
+      setIsSigningIn(true);
+      setError(null);
+      console.log("[Login] Signing in anonymously");
 
-      const { data } = await signInAnonymously()
+      const { data } = await signInAnonymously();
 
       if (data.user) {
-        console.log('[Login] Anonymous sign in successful, refreshing session...')
+        console.log("[Login] Anonymous sign in successful, refreshing session...");
 
         // Refresh session to ensure backend endpoints are properly synchronized
-        await refreshSession()
+        await refreshSession();
 
-        console.log('[Login] Session refreshed, user will be redirected by auth state change')
+        console.log("[Login] Session refreshed, user will be redirected by auth state change");
         // User will be redirected by the auth state change after session refresh
       }
     } catch (err) {
-      console.error('[Login] Unexpected error:', err)
-      setError(t('login.unexpectedError', { message: err instanceof Error ? err.message : 'Unknown error' }))
+      console.error("[Login] Unexpected error:", err);
+      setError(t("login.unexpectedError", { message: err instanceof Error ? err.message : "Unknown error" }));
     } finally {
-      setIsSigningIn(false)
+      setIsSigningIn(false);
     }
-  }
+  };
 
   return (
     <AuthLayout isEmailFormExpanded={showEmailForm}>
-      <LoginHeader title={t('login.login')} subtitle={t('login.subtitle', 'Sign back in to Stirling PDF')} />
+      <LoginHeader title={t("login.login")} subtitle={t("login.subtitle", "Sign back in to Stirling PDF")} />
 
       <ErrorMessage error={error} />
 
       {/* OAuth first */}
-      <OAuthButtons
-        onProviderClick={signInWithProvider}
-        isSubmitting={isSigningIn}
-        layout="fullwidth"
-      />
+      <OAuthButtons onProviderClick={signInWithProvider} isSubmitting={isSigningIn} layout="fullwidth" />
 
       {/* Divider between OAuth and Email */}
-      <DividerWithText text={t('signup.or', 'or')} respondsToDarkMode={false} opacity={0.4} />
+      <DividerWithText text={t("signup.or", "or")} respondsToDarkMode={false} opacity={0.4} />
 
       {/* Sign in with email button (primary color to match signup CTA) */}
       <div className="auth-section">
@@ -218,7 +214,7 @@ export default function Login() {
           disabled={isSigningIn}
           className="w-full px-4 py-[0.75rem] rounded-[0.625rem] text-base font-semibold mb-2 cursor-pointer border-0 disabled:opacity-50 disabled:cursor-not-allowed auth-cta-button"
         >
-          {t('login.useEmailInstead', 'Sign in with email')}
+          {t("login.useEmailInstead", "Sign in with email")}
         </button>
       </div>
 
@@ -230,52 +226,40 @@ export default function Login() {
           setPassword={setPassword}
           onSubmit={signInWithEmail}
           isSubmitting={isSigningIn}
-          submitButtonText={isSigningIn ? t('login.loggingIn') : t('login.login')}
+          submitButtonText={isSigningIn ? t("login.loggingIn") : t("login.login")}
         />
       )}
 
       {showEmailForm && (
         <div className="auth-section-sm">
-          <button
-            type="button"
-            onClick={handleForgotPassword}
-            className="auth-link-black"
-          >
-            {t('login.forgotPassword', 'Forgot your password?')}
+          <button type="button" onClick={handleForgotPassword} className="auth-link-black">
+            {t("login.forgotPassword", "Forgot your password?")}
           </button>
         </div>
       )}
 
       {/* Divider then Guest */}
-      <DividerWithText text={t('signup.or', 'or')} respondsToDarkMode={false} opacity={0.4} />
+      <DividerWithText text={t("signup.or", "or")} respondsToDarkMode={false} opacity={0.4} />
 
       <GuestSignInButton
         onClick={handleAnonymousSignIn}
         disabled={isSigningIn}
-        label={isSigningIn ? t('login.signingIn', 'Signing in...') : t('login.signInAnonymously', 'Sign in as a Guest')}
+        label={isSigningIn ? t("login.signingIn", "Signing in...") : t("login.signInAnonymously", "Sign in as a Guest")}
       />
 
       <div className="auth-bottom-row">
-        <button
-          type="button"
-          onClick={() => setShowMagicLink(true)}
-          className="auth-link-black"
-        >
-          {t('login.useMagicLink', 'Sign in with magic link')}
+        <button type="button" onClick={() => setShowMagicLink(true)} className="auth-link-black">
+          {t("login.useMagicLink", "Sign in with magic link")}
         </button>
 
-        <button
-          type="button"
-          onClick={() => navigate('/signup')}
-          className="auth-link-black"
-        >
-          {t('signup.signUp', 'Sign up')}
+        <button type="button" onClick={() => navigate("/signup")} className="auth-link-black">
+          {t("signup.signUp", "Sign up")}
         </button>
       </div>
 
       {/* Magic link form renders on demand */}
       {showMagicLink && (
-        <div style={{ marginTop: '0.5rem' }}>
+        <div style={{ marginTop: "0.5rem" }}>
           <MagicLinkForm
             showMagicLink={showMagicLink}
             magicLinkEmail={magicLinkEmail}
@@ -287,5 +271,5 @@ export default function Login() {
         </div>
       )}
     </AuthLayout>
-  )
+  );
 }
diff --git a/frontend/src/saas/routes/ResetPassword.tsx b/frontend/src/saas/routes/ResetPassword.tsx
index bd5eef29ea..efff0f334c 100644
--- a/frontend/src/saas/routes/ResetPassword.tsx
+++ b/frontend/src/saas/routes/ResetPassword.tsx
@@ -1,170 +1,176 @@
-import { useEffect, useState } from 'react'
-import { useNavigate } from 'react-router-dom'
-import AuthLayout from '@app/routes/authShared/AuthLayout'
-import LoginHeader from '@app/routes/login/LoginHeader'
-import ErrorMessage from '@app/routes/login/ErrorMessage'
-import SuccessMessage from '@app/routes/login/SuccessMessage'
-import EmailPasswordForm from '@app/routes/login/EmailPasswordForm'
-import NavigationLink from '@app/routes/login/NavigationLink'
-import { supabase } from '@app/auth/supabase'
-import { absoluteWithBasePath } from '@app/constants/app'
-import { useTranslation } from '@app/hooks/useTranslation'
+import { useEffect, useState } from "react";
+import { useNavigate } from "react-router-dom";
+import AuthLayout from "@app/routes/authShared/AuthLayout";
+import LoginHeader from "@app/routes/login/LoginHeader";
+import ErrorMessage from "@app/routes/login/ErrorMessage";
+import SuccessMessage from "@app/routes/login/SuccessMessage";
+import EmailPasswordForm from "@app/routes/login/EmailPasswordForm";
+import NavigationLink from "@app/routes/login/NavigationLink";
+import { supabase } from "@app/auth/supabase";
+import { absoluteWithBasePath } from "@app/constants/app";
+import { useTranslation } from "@app/hooks/useTranslation";
 
 export default function ResetPassword() {
-  const { t } = useTranslation()
-  const navigate = useNavigate()
-  const [isSubmitting, setIsSubmitting] = useState(false)
-  const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
-  const [confirmPassword, setConfirmPassword] = useState('')
-  const [error, setError] = useState<string | null>(null)
-  const [success, setSuccess] = useState<string | null>(null)
-  const [isRecovery, setIsRecovery] = useState(false)
-  const [didUpdate, setDidUpdate] = useState(false)
+  const { t } = useTranslation();
+  const navigate = useNavigate();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [error, setError] = useState<string | null>(null);
+  const [success, setSuccess] = useState<string | null>(null);
+  const [isRecovery, setIsRecovery] = useState(false);
+  const [didUpdate, setDidUpdate] = useState(false);
 
   useEffect(() => {
-    const url = new URL(window.location.href)
-    const type = url.searchParams.get('type')
-    const code = url.searchParams.get('code')
+    const url = new URL(window.location.href);
+    const type = url.searchParams.get("type");
+    const code = url.searchParams.get("code");
 
     // Also parse hash params (Supabase puts tokens & type in the hash)
-    const hash = url.hash || ''
-    const hashParams = new URLSearchParams(hash.startsWith('#') ? hash.substring(1) : hash)
-    const hashType = hashParams.get('type')
-    const hashError = hashParams.get('error')
-    const hashErrorDescription = hashParams.get('error_description')
+    const hash = url.hash || "";
+    const hashParams = new URLSearchParams(hash.startsWith("#") ? hash.substring(1) : hash);
+    const hashType = hashParams.get("type");
+    const hashError = hashParams.get("error");
+    const hashErrorDescription = hashParams.get("error_description");
 
     if (hashError) {
       // Show a human-readable error and fall back to email-entry form
-      setError(hashErrorDescription || hashError)
-      setIsRecovery(false)
+      setError(hashErrorDescription || hashError);
+      setIsRecovery(false);
     }
 
     // Consider either source (query or hash) to decide if we're in recovery mode
-    const inRecovery = type === 'recovery' || hashType === 'recovery'
-    setIsRecovery(inRecovery)
+    const inRecovery = type === "recovery" || hashType === "recovery";
+    setIsRecovery(inRecovery);
 
     // If a PKCE-style code is present, exchange it for a session immediately
     const tryExchange = async () => {
       if (code) {
         try {
-          const { data, error } = await supabase.auth.exchangeCodeForSession(code)
+          const { data, error } = await supabase.auth.exchangeCodeForSession(code);
           if (error) {
-            setError(error.message)
-            setIsRecovery(false)
+            setError(error.message);
+            setIsRecovery(false);
           } else if (data.session) {
-            setIsRecovery(true)
+            setIsRecovery(true);
           }
         } catch (e) {
-          setError(e instanceof Error ? e.message : String(e))
-          setIsRecovery(false)
+          setError(e instanceof Error ? e.message : String(e));
+          setIsRecovery(false);
         }
       } else {
         // If no code, see if Supabase already set the session from hash
-        const { data } = await supabase.auth.getSession()
+        const { data } = await supabase.auth.getSession();
         if (data.session && inRecovery) {
-          setIsRecovery(true)
+          setIsRecovery(true);
         }
       }
-    }
-    void tryExchange()
+    };
+    void tryExchange();
 
     // Clear sensitive tokens from the URL hash
-    if (hash.includes('access_token') || hashError) {
-      window.history.replaceState({}, document.title, window.location.pathname + (inRecovery ? '?type=recovery' : ''))
+    if (hash.includes("access_token") || hashError) {
+      window.history.replaceState({}, document.title, window.location.pathname + (inRecovery ? "?type=recovery" : ""));
     }
 
     // Listen for Supabase auth state changes to confirm recovery state
     const { data: sub } = supabase.auth.onAuthStateChange((event) => {
-      if (event === 'PASSWORD_RECOVERY') {
-        setIsRecovery(true)
+      if (event === "PASSWORD_RECOVERY") {
+        setIsRecovery(true);
       }
-    })
+    });
 
     return () => {
-      sub.subscription.unsubscribe()
-    }
-  }, [])
+      sub.subscription.unsubscribe();
+    };
+  }, []);
 
   const handleSendEmail = async () => {
     if (!email) {
-      setError(t('login.pleaseEnterEmail'))
-      return
+      setError(t("login.pleaseEnterEmail"));
+      return;
     }
     try {
-      setIsSubmitting(true)
-      setError(null)
-      const redirectTo = absoluteWithBasePath('/auth/reset?type=recovery')
+      setIsSubmitting(true);
+      setError(null);
+      const redirectTo = absoluteWithBasePath("/auth/reset?type=recovery");
       const { error } = await supabase.auth.resetPasswordForEmail(email.trim(), {
-        redirectTo
-      })
+        redirectTo,
+      });
       if (error) {
-        setError(error.message)
+        setError(error.message);
       } else {
-        setSuccess(t('login.passwordResetSent', { email }))
+        setSuccess(t("login.passwordResetSent", { email }));
       }
     } finally {
-      setIsSubmitting(false)
+      setIsSubmitting(false);
     }
-  }
+  };
 
   const handleUpdatePassword = async () => {
     if (!password || !confirmPassword) {
-      setError(t('signup.pleaseFillAllFields'))
-      return
+      setError(t("signup.pleaseFillAllFields"));
+      return;
     }
     if (password.length < 6) {
-      setError(t('signup.passwordTooShort'))
-      return
+      setError(t("signup.passwordTooShort"));
+      return;
     }
     if (password !== confirmPassword) {
-      setError(t('signup.passwordsDoNotMatch'))
-      return
+      setError(t("signup.passwordsDoNotMatch"));
+      return;
     }
     try {
-      setIsSubmitting(true)
-      setError(null)
-      const { data, error } = await supabase.auth.updateUser({ password })
+      setIsSubmitting(true);
+      setError(null);
+      const { data, error } = await supabase.auth.updateUser({ password });
       if (error) {
-        setError(error.message)
-        return
+        setError(error.message);
+        return;
       }
       if (data.user) {
-        setSuccess(t('login.passwordUpdatedSuccess', 'Your password has been updated successfully.'))
+        setSuccess(t("login.passwordUpdatedSuccess", "Your password has been updated successfully."));
         // Clear the form fields
-        setPassword('')
-        setConfirmPassword('')
+        setPassword("");
+        setConfirmPassword("");
         // Show success-only state and then redirect after a short delay
-        setDidUpdate(true)
+        setDidUpdate(true);
         setTimeout(async () => {
-          const { data: sessionData } = await supabase.auth.getSession()
-          const { data: userData } = await supabase.auth.getUser()
-          const derivedEmail = userData.user?.email || email
+          const { data: sessionData } = await supabase.auth.getSession();
+          const { data: userData } = await supabase.auth.getUser();
+          const derivedEmail = userData.user?.email || email;
           if (sessionData.session) {
-            navigate('/')
+            navigate("/");
           } else {
-            const query = derivedEmail ? `?email=${encodeURIComponent(derivedEmail)}` : ''
-            navigate(`/login${query}`)
+            const query = derivedEmail ? `?email=${encodeURIComponent(derivedEmail)}` : "";
+            navigate(`/login${query}`);
           }
-        }, 2000)
+        }, 2000);
       }
     } finally {
-      setIsSubmitting(false)
+      setIsSubmitting(false);
     }
-  }
+  };
 
   return (
     <AuthLayout>
-      <LoginHeader title={isRecovery ? t('login.resetYourPassword', 'Reset your password') : t('login.forgotPassword', 'Forgot your password?')} />
+      <LoginHeader
+        title={
+          isRecovery ? t("login.resetYourPassword", "Reset your password") : t("login.forgotPassword", "Forgot your password?")
+        }
+      />
       {!didUpdate && <SuccessMessage success={success} />}
       <ErrorMessage error={error} />
 
       {didUpdate ? (
         <>
-          <SuccessMessage success={success || t('login.passwordUpdatedSuccess', 'Your password has been updated successfully.')} />
+          <SuccessMessage
+            success={success || t("login.passwordUpdatedSuccess", "Your password has been updated successfully.")}
+          />
           <NavigationLink
-            onClick={() => navigate('/login')}
-            text={t('login.backToSignIn', 'Back to sign in')}
+            onClick={() => navigate("/login")}
+            text={t("login.backToSignIn", "Back to sign in")}
             isDisabled={isSubmitting}
           />
         </>
@@ -172,26 +178,30 @@ export default function ResetPassword() {
         <>
           <div className="auth-fields">
             <div className="auth-field">
-              <label htmlFor="password" className="auth-label">{t('signup.password')}</label>
+              <label htmlFor="password" className="auth-label">
+                {t("signup.password")}
+              </label>
               <input
                 id="password"
                 type="password"
                 name="new-password"
                 autoComplete="new-password"
-                placeholder={t('signup.enterPassword')}
+                placeholder={t("signup.enterPassword")}
                 value={password}
                 onChange={(e) => setPassword(e.target.value)}
                 className="auth-input"
               />
             </div>
             <div className="auth-field">
-              <label htmlFor="confirmPassword" className="auth-label">{t('signup.confirmPassword')}</label>
+              <label htmlFor="confirmPassword" className="auth-label">
+                {t("signup.confirmPassword")}
+              </label>
               <input
                 id="confirmPassword"
                 type="password"
                 name="new-password"
                 autoComplete="new-password"
-                placeholder={t('signup.confirmPasswordPlaceholder')}
+                placeholder={t("signup.confirmPasswordPlaceholder")}
                 value={confirmPassword}
                 onChange={(e) => setConfirmPassword(e.target.value)}
                 className="auth-input"
@@ -203,11 +213,11 @@ export default function ResetPassword() {
             disabled={isSubmitting || !password || !confirmPassword}
             className="auth-button"
           >
-            {isSubmitting ? t('login.sending', 'Sending…') : t('login.updatePassword', 'Update password')}
+            {isSubmitting ? t("login.sending", "Sending…") : t("login.updatePassword", "Update password")}
           </button>
           <NavigationLink
-            onClick={() => navigate('/login')}
-            text={t('login.backToSignIn', 'Back to sign in')}
+            onClick={() => navigate("/login")}
+            text={t("login.backToSignIn", "Back to sign in")}
             isDisabled={isSubmitting}
           />
         </>
@@ -215,26 +225,27 @@ export default function ResetPassword() {
         <>
           <EmailPasswordForm
             email={email}
-            password={''}
+            password={""}
             setEmail={setEmail}
             setPassword={() => {}}
             onSubmit={handleSendEmail}
             isSubmitting={isSubmitting}
-            submitButtonText={t('login.sendResetLink', 'Send reset link')}
+            submitButtonText={t("login.sendResetLink", "Send reset link")}
             showPasswordField={false}
           />
           <p className="text-sm text-gray-500 mt-3">
-            {t('login.resetHelp', 'Enter your email to receive a secure link to reset your password. If the link has expired, please request a new one.')}
+            {t(
+              "login.resetHelp",
+              "Enter your email to receive a secure link to reset your password. If the link has expired, please request a new one.",
+            )}
           </p>
           <NavigationLink
-            onClick={() => navigate('/login')}
-            text={t('login.backToSignIn', 'Back to sign in')}
+            onClick={() => navigate("/login")}
+            text={t("login.backToSignIn", "Back to sign in")}
             isDisabled={isSubmitting}
           />
         </>
       )}
     </AuthLayout>
-  )
+  );
 }
-
-
diff --git a/frontend/src/saas/routes/Signup.tsx b/frontend/src/saas/routes/Signup.tsx
index 24a83c0c5f..9061eb5056 100644
--- a/frontend/src/saas/routes/Signup.tsx
+++ b/frontend/src/saas/routes/Signup.tsx
@@ -1,171 +1,167 @@
-import { useState, useEffect } from 'react'
-import { useNavigate, useLocation } from 'react-router-dom'
-import { signInAnonymously } from '@app/auth/supabase'
-import { useAuth } from '@app/auth/UseSession'
-import { useTranslation } from '@app/hooks/useTranslation'
-import { useDocumentMeta } from '@app/hooks/useDocumentMeta'
-import { getBaseUrl } from '@app/constants/app'
-import AuthLayout from '@app/routes/authShared/AuthLayout'
-import '@app/routes/authShared/auth.css'
-import '@app/routes/authShared/saas-auth.css'
-import GuestSignInButton from '@app/routes/authShared/GuestSignInButton'
-import { alert } from '@app/components/toast'
+import { useState, useEffect } from "react";
+import { useNavigate, useLocation } from "react-router-dom";
+import { signInAnonymously } from "@app/auth/supabase";
+import { useAuth } from "@app/auth/UseSession";
+import { useTranslation } from "@app/hooks/useTranslation";
+import { useDocumentMeta } from "@app/hooks/useDocumentMeta";
+import { getBaseUrl } from "@app/constants/app";
+import AuthLayout from "@app/routes/authShared/AuthLayout";
+import "@app/routes/authShared/auth.css";
+import "@app/routes/authShared/saas-auth.css";
+import GuestSignInButton from "@app/routes/authShared/GuestSignInButton";
+import { alert } from "@app/components/toast";
 
 // Import signup components
-import LoginHeader from '@app/routes/login/LoginHeader'
-import ErrorMessage from '@app/routes/login/ErrorMessage'
-import OAuthButtons from '@app/routes/login/OAuthButtons'
-import DividerWithText from '@app/components/shared/DividerWithText'
-import SignupForm from '@app/routes/signup/SignupForm'
-import { useSignupFormValidation, SignupFieldErrors } from '@app/routes/signup/SignupFormValidation'
-import { useAuthService } from '@app/routes/signup/AuthService'
+import LoginHeader from "@app/routes/login/LoginHeader";
+import ErrorMessage from "@app/routes/login/ErrorMessage";
+import OAuthButtons from "@app/routes/login/OAuthButtons";
+import DividerWithText from "@app/components/shared/DividerWithText";
+import SignupForm from "@app/routes/signup/SignupForm";
+import { useSignupFormValidation, SignupFieldErrors } from "@app/routes/signup/SignupFormValidation";
+import { useAuthService } from "@app/routes/signup/AuthService";
 
 export default function Signup() {
-  const navigate = useNavigate()
-  const location = useLocation()
-  const { session, loading, refreshSession } = useAuth()
-  const { t } = useTranslation()
-  const [isSigningUp, setIsSigningUp] = useState(false)
-  const [error, setError] = useState<string | null>(null)
-  const [showEmailForm, setShowEmailForm] = useState(false)
-  const [name, setName] = useState(undefined as string | undefined)
-  const [email, setEmail] = useState('')
-  const [password, setPassword] = useState('')
-  const [confirmPassword, setConfirmPassword] = useState('')
-  const [agree, setAgree] = useState(true)
-  const [fieldErrors, setFieldErrors] = useState<SignupFieldErrors>({})
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { session, loading, refreshSession } = useAuth();
+  const { t } = useTranslation();
+  const [isSigningUp, setIsSigningUp] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [showEmailForm, setShowEmailForm] = useState(false);
+  const [name, setName] = useState(undefined as string | undefined);
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [agree, setAgree] = useState(true);
+  const [fieldErrors, setFieldErrors] = useState<SignupFieldErrors>({});
 
   // Check if we were redirected here with an auto-auth error
   useEffect(() => {
-    const state = location.state as { autoAuthError?: string } | null
+    const state = location.state as { autoAuthError?: string } | null;
     if (state?.autoAuthError) {
-      setError(`Unable to access tool: ${state.autoAuthError}`)
+      setError(`Unable to access tool: ${state.autoAuthError}`);
     }
-  }, [location.state])
+  }, [location.state]);
 
   // Redirect back to original tool URL once session appears (after auto-anon completes)
   useEffect(() => {
     if (!loading && session) {
-      const state = location.state as { from?: { pathname?: string; search?: string; hash?: string } } | null
-      const from = state?.from
-      if (from?.pathname && from.pathname !== '/signup' && from.pathname !== '/login') {
-        const target = `${from.pathname}${from.search ?? ''}${from.hash ?? ''}`
-        console.log('[Signup] Session detected, redirecting back to:', target)
-        navigate(target, { replace: true })
+      const state = location.state as { from?: { pathname?: string; search?: string; hash?: string } } | null;
+      const from = state?.from;
+      if (from?.pathname && from.pathname !== "/signup" && from.pathname !== "/login") {
+        const target = `${from.pathname}${from.search ?? ""}${from.hash ?? ""}`;
+        console.log("[Signup] Session detected, redirecting back to:", target);
+        navigate(target, { replace: true });
       }
     }
-  }, [loading, session, location.state, navigate])
+  }, [loading, session, location.state, navigate]);
 
   const handleAnonymousSignIn = async () => {
     try {
-      setIsSigningUp(true)
-      setError(null)
+      setIsSigningUp(true);
+      setError(null);
 
-      console.log('[Signup] Initiating anonymous sign-in...')
-      const { data } = await signInAnonymously()
+      console.log("[Signup] Initiating anonymous sign-in...");
+      const { data } = await signInAnonymously();
 
       if (data.user) {
-        console.log('[Signup] Anonymous sign-in successful, refreshing session...')
+        console.log("[Signup] Anonymous sign-in successful, refreshing session...");
 
         // Refresh session to ensure backend endpoints are properly synchronized
-        await refreshSession()
+        await refreshSession();
 
-        console.log('[Signup] Session refreshed, redirecting to home page')
+        console.log("[Signup] Session refreshed, redirecting to home page");
         // Redirect to home page after successful anonymous login and session refresh
-        navigate('/')
+        navigate("/");
       }
     } catch (err) {
-      console.error('[Signup] Anonymous sign-in unexpected error:', err)
-      setError(`Unexpected error: ${err instanceof Error ? err.message : 'Unknown error'}`)
+      console.error("[Signup] Anonymous sign-in unexpected error:", err);
+      setError(`Unexpected error: ${err instanceof Error ? err.message : "Unknown error"}`);
     } finally {
-      setIsSigningUp(false)
+      setIsSigningUp(false);
     }
-  }
+  };
 
   const baseUrl = getBaseUrl();
 
   // Set document meta
   useDocumentMeta({
-    title: `${t('signup.title', 'Create an account')} - Stirling PDF`,
-    description: t('app.description', 'The Free Adobe Acrobat alternative (10M+ Downloads)'),
-    ogTitle: `${t('signup.title', 'Create an account')} - Stirling PDF`,
-    ogDescription: t('app.description', 'The Free Adobe Acrobat alternative (10M+ Downloads)'),
+    title: `${t("signup.title", "Create an account")} - Stirling PDF`,
+    description: t("app.description", "The Free Adobe Acrobat alternative (10M+ Downloads)"),
+    ogTitle: `${t("signup.title", "Create an account")} - Stirling PDF`,
+    ogDescription: t("app.description", "The Free Adobe Acrobat alternative (10M+ Downloads)"),
     ogImage: `${baseUrl}/og_images/home.png`,
-    ogUrl: `${window.location.origin}${window.location.pathname}`
-  })
+    ogUrl: `${window.location.origin}${window.location.pathname}`,
+  });
 
-  const { validateSignupForm } = useSignupFormValidation()
-  const { signUp, signInWithProvider } = useAuthService()
+  const { validateSignupForm } = useSignupFormValidation();
+  const { signUp, signInWithProvider } = useAuthService();
 
   const handleSignUp = async () => {
-    const validation = validateSignupForm(email, password, confirmPassword, name)
+    const validation = validateSignupForm(email, password, confirmPassword, name);
     if (!validation.isValid) {
-      setError(validation.error)
-      setFieldErrors(validation.fieldErrors || {})
-      return
+      setError(validation.error);
+      setFieldErrors(validation.fieldErrors || {});
+      return;
     }
 
     try {
-      setIsSigningUp(true)
-      setError(null)
-      setFieldErrors({})
+      setIsSigningUp(true);
+      setError(null);
+      setFieldErrors({});
 
-      const result = await signUp(email, password, name)
+      const result = await signUp(email, password, name);
 
       if (result.requiresEmailConfirmation) {
         alert({
-          alertType: 'success',
-          title: t('signup.checkEmailConfirmation'),
-          location: 'top-right',
-          isPersistentPopup: true
-        })
+          alertType: "success",
+          title: t("signup.checkEmailConfirmation"),
+          location: "top-right",
+          isPersistentPopup: true,
+        });
       } else {
         alert({
-          alertType: 'success',
-          title: t('signup.accountCreatedSuccessfully'),
-          location: 'top-right',
-          durationMs: 3000
-        })
-        setTimeout(() => navigate('/login'), 2000)
+          alertType: "success",
+          title: t("signup.accountCreatedSuccessfully"),
+          location: "top-right",
+          durationMs: 3000,
+        });
+        setTimeout(() => navigate("/login"), 2000);
       }
     } catch (err) {
-      console.error('[Signup] Unexpected error:', err)
-      setError(err instanceof Error ? err.message : t('signup.unexpectedError', { message: 'Unknown error' }))
+      console.error("[Signup] Unexpected error:", err);
+      setError(err instanceof Error ? err.message : t("signup.unexpectedError", { message: "Unknown error" }));
     } finally {
-      setIsSigningUp(false)
+      setIsSigningUp(false);
     }
-  }
+  };
 
-  const handleProviderSignIn = async (provider: 'github' | 'google' | 'apple' | 'azure') => {
+  const handleProviderSignIn = async (provider: "github" | "google" | "apple" | "azure") => {
     try {
-      setIsSigningUp(true)
-      setError(null)
-      await signInWithProvider(provider)
+      setIsSigningUp(true);
+      setError(null);
+      await signInWithProvider(provider);
     } catch (err) {
-      setError(err instanceof Error ? err.message : t('signup.unexpectedError', { message: 'Unknown error' }))
+      setError(err instanceof Error ? err.message : t("signup.unexpectedError", { message: "Unknown error" }));
     } finally {
-      setIsSigningUp(false)
+      setIsSigningUp(false);
     }
-  }
+  };
 
   return (
     <AuthLayout isEmailFormExpanded={showEmailForm}>
-      <LoginHeader title={t('signup.title')} subtitle={t('signup.subtitle')} />
+      <LoginHeader title={t("signup.title")} subtitle={t("signup.subtitle")} />
 
       <ErrorMessage error={error} />
 
       {/* OAuth first */}
-      <div style={{ marginBottom: '0.5rem' }}>
-        <OAuthButtons
-          onProviderClick={handleProviderSignIn}
-          isSubmitting={isSigningUp}
-          layout="fullwidth"
-        />
+      <div style={{ marginBottom: "0.5rem" }}>
+        <OAuthButtons onProviderClick={handleProviderSignIn} isSubmitting={isSigningUp} layout="fullwidth" />
       </div>
 
       {/* Divider between OAuth and Email */}
-      <div style={{ margin: '0.5rem 0' }}>
-        <DividerWithText text={t('signup.or', 'or')} respondsToDarkMode={false} opacity={0.4} />
+      <div style={{ margin: "0.5rem 0" }}>
+        <DividerWithText text={t("signup.or", "or")} respondsToDarkMode={false} opacity={0.4} />
       </div>
 
       {/* Use Email Instead button (toggles email form) */}
@@ -176,7 +172,7 @@ export default function Signup() {
           onClick={() => setShowEmailForm((v) => !v)}
           className="w-full px-4 py-[0.75rem] rounded-[0.625rem] text-base font-semibold mb-2 cursor-pointer border-0 disabled:opacity-50 disabled:cursor-not-allowed auth-cta-button"
         >
-          {t('signup.useEmailInstead', 'Use Email Instead')}
+          {t("signup.useEmailInstead", "Use Email Instead")}
         </button>
       </div>
 
@@ -199,25 +195,21 @@ export default function Signup() {
       )}
 
       <div className="auth-section-sm">
-        <DividerWithText text={t('signup.or', 'or')} respondsToDarkMode={false} opacity={0.4} />
+        <DividerWithText text={t("signup.or", "or")} respondsToDarkMode={false} opacity={0.4} />
       </div>
 
       <GuestSignInButton
         onClick={handleAnonymousSignIn}
         disabled={isSigningUp}
-        label={isSigningUp ? t('login.signingIn', 'Signing in...') : t('login.signInAnonymously', 'Sign in as a Guest')}
+        label={isSigningUp ? t("login.signingIn", "Signing in...") : t("login.signInAnonymously", "Sign in as a Guest")}
       />
 
       {/* Bottom row */}
       <div className="auth-bottom-right">
-        <button
-          type="button"
-          onClick={() => navigate('/login')}
-          className="auth-link-black"
-        >
-          {t('login.logIn', 'Log In')}
+        <button type="button" onClick={() => navigate("/login")} className="auth-link-black">
+          {t("login.logIn", "Log In")}
         </button>
       </div>
     </AuthLayout>
-  )
+  );
 }
diff --git a/frontend/src/saas/routes/authShared/AuthLayout.tsx b/frontend/src/saas/routes/authShared/AuthLayout.tsx
index 58244bf55f..a9a07b592a 100644
--- a/frontend/src/saas/routes/authShared/AuthLayout.tsx
+++ b/frontend/src/saas/routes/authShared/AuthLayout.tsx
@@ -1,15 +1,15 @@
-import React, { useEffect, useMemo, useRef, useState } from 'react';
-import { useTranslation } from 'react-i18next';
-import LoginRightCarousel from '@app/components/shared/LoginRightCarousel';
-import buildLoginSlides from '@app/components/shared/loginSlides';
-import styles from '@app/routes/authShared/AuthLayout.module.css';
-import { useLogoVariant } from '@app/hooks/useLogoVariant';
-import { useIsOverflowing } from '@app/hooks/useIsOverflowing';
-import Footer from '@app/components/shared/Footer';
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import LoginRightCarousel from "@app/components/shared/LoginRightCarousel";
+import buildLoginSlides from "@app/components/shared/loginSlides";
+import styles from "@app/routes/authShared/AuthLayout.module.css";
+import { useLogoVariant } from "@app/hooks/useLogoVariant";
+import { useIsOverflowing } from "@app/hooks/useIsOverflowing";
+import Footer from "@app/components/shared/Footer";
 
 interface AuthLayoutProps {
-  children: React.ReactNode
-  isEmailFormExpanded?: boolean
+  children: React.ReactNode;
+  isEmailFormExpanded?: boolean;
 }
 
 export default function AuthLayout({ children, isEmailFormExpanded = false }: AuthLayoutProps) {
@@ -27,15 +27,15 @@ export default function AuthLayout({ children, isEmailFormExpanded = false }: Au
   // Force light mode on auth pages
   useEffect(() => {
     const htmlElement = document.documentElement;
-    const previousColorScheme = htmlElement.getAttribute('data-mantine-color-scheme');
+    const previousColorScheme = htmlElement.getAttribute("data-mantine-color-scheme");
 
     // Set light mode
-    htmlElement.setAttribute('data-mantine-color-scheme', 'light');
+    htmlElement.setAttribute("data-mantine-color-scheme", "light");
 
     // Cleanup: restore previous theme when leaving auth pages
     return () => {
       if (previousColorScheme) {
-        htmlElement.setAttribute('data-mantine-color-scheme', previousColorScheme);
+        htmlElement.setAttribute("data-mantine-color-scheme", previousColorScheme);
       }
     };
   }, []);
@@ -52,37 +52,30 @@ export default function AuthLayout({ children, isEmailFormExpanded = false }: Au
       setHideRightPanel(tooNarrow || tooShort);
     };
     update();
-    window.addEventListener('resize', update);
-    window.addEventListener('orientationchange', update);
+    window.addEventListener("resize", update);
+    window.addEventListener("orientationchange", update);
     return () => {
-      window.removeEventListener('resize', update);
-      window.removeEventListener('orientationchange', update);
+      window.removeEventListener("resize", update);
+      window.removeEventListener("orientationchange", update);
     };
   }, []);
 
   return (
     <div className={styles.authContainer}>
       <div className={styles.authMain}>
-        <div
-          ref={cardRef}
-          className={`${styles.authCard} ${!hideRightPanel ? styles.authCardTwoColumns : ''}`}
-        >
+        <div ref={cardRef} className={`${styles.authCard} ${!hideRightPanel ? styles.authCardTwoColumns : ""}`}>
           <div
             ref={leftPanelRef}
             className={`${styles.authLeftPanel} ${shouldBeScrollable ? styles.authLeftPanelScrollable : styles.authLeftPanelCentered}`}
           >
-            <div className={styles.authContent}>
-              {children}
-            </div>
+            <div className={styles.authContent}>{children}</div>
           </div>
-          {!hideRightPanel && (
-            <LoginRightCarousel imageSlides={imageSlides} initialSeconds={5} slideSeconds={8} />
-          )}
+          {!hideRightPanel && <LoginRightCarousel imageSlides={imageSlides} initialSeconds={5} slideSeconds={8} />}
         </div>
       </div>
-      <div style={{ width: '100vw', marginTop: 'auto', marginLeft: '-1.5rem', marginRight: '-1.5rem' }}>
+      <div style={{ width: "100vw", marginTop: "auto", marginLeft: "-1.5rem", marginRight: "-1.5rem" }}>
         <Footer forceLightMode={true} analyticsEnabled />
       </div>
     </div>
-  )
+  );
 }
diff --git a/frontend/src/saas/routes/authShared/GuestSignInButton.tsx b/frontend/src/saas/routes/authShared/GuestSignInButton.tsx
index 7d4ec1b476..1c195efd72 100644
--- a/frontend/src/saas/routes/authShared/GuestSignInButton.tsx
+++ b/frontend/src/saas/routes/authShared/GuestSignInButton.tsx
@@ -1,11 +1,11 @@
-import React from 'react'
-import '@app/routes/authShared/auth.css'
-import '@app/routes/authShared/saas-auth.css'
+import React from "react";
+import "@app/routes/authShared/auth.css";
+import "@app/routes/authShared/saas-auth.css";
 
 interface GuestSignInButtonProps {
-  label: string
-  onClick: () => void
-  disabled?: boolean
+  label: string;
+  onClick: () => void;
+  disabled?: boolean;
 }
 
 export default function GuestSignInButton({ label, onClick, disabled }: GuestSignInButtonProps) {
@@ -18,7 +18,5 @@ export default function GuestSignInButton({ label, onClick, disabled }: GuestSig
     >
       {label}
     </button>
-  )
+  );
 }
-
-
diff --git a/frontend/src/saas/routes/authShared/saas-auth.css b/frontend/src/saas/routes/authShared/saas-auth.css
index 601c64360a..5073a24c91 100644
--- a/frontend/src/saas/routes/authShared/saas-auth.css
+++ b/frontend/src/saas/routes/authShared/saas-auth.css
@@ -49,7 +49,9 @@
   color: #000000;
   border: 1px solid #e5e7eb;
   border-radius: 0.5rem;
-  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
+  box-shadow:
+    0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -4px rgba(0, 0, 0, 0.1);
   padding: 0.25rem;
 }
 
diff --git a/frontend/src/saas/routes/login/EmailPasswordForm.tsx b/frontend/src/saas/routes/login/EmailPasswordForm.tsx
index 828b033e47..fe818fc38e 100644
--- a/frontend/src/saas/routes/login/EmailPasswordForm.tsx
+++ b/frontend/src/saas/routes/login/EmailPasswordForm.tsx
@@ -1,20 +1,20 @@
-import { useTranslation } from 'react-i18next';
-import '@app/routes/authShared/auth.css';
-import '@app/routes/authShared/saas-auth.css';
+import { useTranslation } from "react-i18next";
+import "@app/routes/authShared/auth.css";
+import "@app/routes/authShared/saas-auth.css";
 
 interface EmailPasswordFormProps {
-  email: string
-  password: string
-  setEmail: (email: string) => void
-  setPassword: (password: string) => void
-  onSubmit: () => void
-  isSubmitting: boolean
-  submitButtonText: string
-  showPasswordField?: boolean
+  email: string;
+  password: string;
+  setEmail: (email: string) => void;
+  setPassword: (password: string) => void;
+  onSubmit: () => void;
+  isSubmitting: boolean;
+  submitButtonText: string;
+  showPasswordField?: boolean;
   fieldErrors?: {
-    email?: string
-    password?: string
-  }
+    email?: string;
+    password?: string;
+  };
 }
 
 export default function EmailPasswordForm({
@@ -26,7 +26,7 @@ export default function EmailPasswordForm({
   isSubmitting,
   submitButtonText,
   showPasswordField = true,
-  fieldErrors = {}
+  fieldErrors = {},
 }: EmailPasswordFormProps) {
   const { t } = useTranslation();
 
@@ -38,47 +38,43 @@ export default function EmailPasswordForm({
     <form onSubmit={handleSubmit}>
       <div className="auth-fields">
         <div className="auth-field">
-          <label htmlFor="email" className="auth-label">{t('login.email', 'Email')}</label>
+          <label htmlFor="email" className="auth-label">
+            {t("login.email", "Email")}
+          </label>
           <input
             id="email"
             type="email"
             name="email"
             autoComplete="username email"
-            placeholder={t('login.enterEmail', 'Enter email')}
+            placeholder={t("login.enterEmail", "Enter email")}
             value={email}
             onChange={(e) => setEmail(e.target.value)}
-            className={`auth-input ${fieldErrors.email ? 'auth-input-error' : ''}`}
+            className={`auth-input ${fieldErrors.email ? "auth-input-error" : ""}`}
           />
-          {fieldErrors.email && (
-            <div className="auth-field-error">{fieldErrors.email}</div>
-          )}
+          {fieldErrors.email && <div className="auth-field-error">{fieldErrors.email}</div>}
         </div>
 
         {showPasswordField && (
           <div className="auth-field">
-            <label htmlFor="password" className="auth-label">{t('login.password')}</label>
+            <label htmlFor="password" className="auth-label">
+              {t("login.password")}
+            </label>
             <input
               id="password"
               type="password"
               name="current-password"
               autoComplete="current-password"
-              placeholder={t('login.enterPassword')}
+              placeholder={t("login.enterPassword")}
               value={password}
               onChange={(e) => setPassword(e.target.value)}
-              className={`auth-input ${fieldErrors.password ? 'auth-input-error' : ''}`}
+              className={`auth-input ${fieldErrors.password ? "auth-input-error" : ""}`}
             />
-            {fieldErrors.password && (
-              <div className="auth-field-error">{fieldErrors.password}</div>
-            )}
+            {fieldErrors.password && <div className="auth-field-error">{fieldErrors.password}</div>}
           </div>
         )}
       </div>
 
-      <button
-        type="submit"
-        disabled={isSubmitting || !email || (showPasswordField && !password)}
-        className="auth-button"
-      >
+      <button type="submit" disabled={isSubmitting || !email || (showPasswordField && !password)} className="auth-button">
         {submitButtonText}
       </button>
     </form>
diff --git a/frontend/src/saas/routes/login/LoadingState.tsx b/frontend/src/saas/routes/login/LoadingState.tsx
index 659ca9389d..c419fe696b 100644
--- a/frontend/src/saas/routes/login/LoadingState.tsx
+++ b/frontend/src/saas/routes/login/LoadingState.tsx
@@ -1,20 +1,22 @@
-import { useTranslation } from '@app/hooks/useTranslation'
+import { useTranslation } from "@app/hooks/useTranslation";
 
 export default function LoadingState() {
-  const { t } = useTranslation()
+  const { t } = useTranslation();
 
   return (
-    <div style={{
-      minHeight: '100vh',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
-      backgroundColor: '#f3f4f6'
-    }}>
-      <div style={{ textAlign: 'center' }}>
-        <div style={{ fontSize: '32px', marginBottom: '16px' }}>⏳</div>
-        <p style={{ color: '#6b7280' }}>{t('loading')}</p>
+    <div
+      style={{
+        minHeight: "100vh",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        backgroundColor: "#f3f4f6",
+      }}
+    >
+      <div style={{ textAlign: "center" }}>
+        <div style={{ fontSize: "32px", marginBottom: "16px" }}>⏳</div>
+        <p style={{ color: "#6b7280" }}>{t("loading")}</p>
       </div>
     </div>
-  )
+  );
 }
diff --git a/frontend/src/saas/routes/login/MagicLinkForm.tsx b/frontend/src/saas/routes/login/MagicLinkForm.tsx
index 54666f35ae..90a7b5cb2d 100644
--- a/frontend/src/saas/routes/login/MagicLinkForm.tsx
+++ b/frontend/src/saas/routes/login/MagicLinkForm.tsx
@@ -1,14 +1,14 @@
-import { useTranslation } from '@app/hooks/useTranslation'
-import '@app/routes/authShared/auth.css'
-import '@app/routes/authShared/saas-auth.css'
+import { useTranslation } from "@app/hooks/useTranslation";
+import "@app/routes/authShared/auth.css";
+import "@app/routes/authShared/saas-auth.css";
 
 interface MagicLinkFormProps {
-  showMagicLink: boolean
-  magicLinkEmail: string
-  setMagicLinkEmail: (email: string) => void
-  setShowMagicLink: (show: boolean) => void
-  onSubmit: () => void
-  isSubmitting: boolean
+  showMagicLink: boolean;
+  magicLinkEmail: string;
+  setMagicLinkEmail: (email: string) => void;
+  setShowMagicLink: (show: boolean) => void;
+  onSubmit: () => void;
+  isSubmitting: boolean;
 }
 
 export default function MagicLinkForm({
@@ -17,41 +17,39 @@ export default function MagicLinkForm({
   setMagicLinkEmail,
   setShowMagicLink,
   onSubmit,
-  isSubmitting
+  isSubmitting,
 }: MagicLinkFormProps) {
-  const { t } = useTranslation()
+  const { t } = useTranslation();
 
   if (!showMagicLink) {
     return (
       <div className="auth-toggle-wrapper">
         <button
-          onClick={() => { setShowMagicLink(true) }}
+          onClick={() => {
+            setShowMagicLink(true);
+          }}
           disabled={isSubmitting}
           className="auth-toggle-link"
         >
-          {t('login.useMagicLink')}
+          {t("login.useMagicLink")}
         </button>
       </div>
-    )
+    );
   }
 
   return (
     <div className="auth-magic-row">
       <input
         type="email"
-        placeholder={t('login.enterEmailForMagicLink')}
+        placeholder={t("login.enterEmailForMagicLink")}
         value={magicLinkEmail}
         onChange={(e) => setMagicLinkEmail(e.target.value)}
-        onKeyPress={(e) => e.key === 'Enter' && !isSubmitting && onSubmit()}
+        onKeyPress={(e) => e.key === "Enter" && !isSubmitting && onSubmit()}
         className="auth-input"
       />
-      <button
-        onClick={onSubmit}
-        disabled={isSubmitting || !magicLinkEmail}
-        className="auth-magic-button"
-      >
-        {isSubmitting ? t('login.sending') : t('login.sendMagicLink')}
+      <button onClick={onSubmit} disabled={isSubmitting || !magicLinkEmail} className="auth-magic-button">
+        {isSubmitting ? t("login.sending") : t("login.sendMagicLink")}
       </button>
     </div>
-  )
+  );
 }
diff --git a/frontend/src/saas/routes/login/OAuthButtons.tsx b/frontend/src/saas/routes/login/OAuthButtons.tsx
index e53bd3cf06..b9f8a6acfe 100644
--- a/frontend/src/saas/routes/login/OAuthButtons.tsx
+++ b/frontend/src/saas/routes/login/OAuthButtons.tsx
@@ -1,90 +1,99 @@
-import { oauthProviders } from '@app/constants/authProviders'
-import { useTranslation } from '@app/hooks/useTranslation'
-import { Tooltip } from '@app/components/shared/Tooltip'
-import { withBasePath } from '@app/constants/app'
+import { oauthProviders } from "@app/constants/authProviders";
+import { useTranslation } from "@app/hooks/useTranslation";
+import { Tooltip } from "@app/components/shared/Tooltip";
+import { withBasePath } from "@app/constants/app";
 
 // Exports for compatibility with proprietary code
 export const DEBUG_SHOW_ALL_PROVIDERS = false;
 export const oauthProviderConfig = {
-  google: { label: 'Google', file: 'google.svg' },
-  github: { label: 'GitHub', file: 'github.svg' },
-  apple: { label: 'Apple', file: 'apple.svg' },
-  azure: { label: 'Microsoft', file: 'microsoft.svg' },
+  google: { label: "Google", file: "google.svg" },
+  github: { label: "GitHub", file: "github.svg" },
+  apple: { label: "Apple", file: "apple.svg" },
+  azure: { label: "Microsoft", file: "microsoft.svg" },
 };
 
 interface OAuthButtonsProps {
-  onProviderClick: (provider: 'github' | 'google') => void
-  isSubmitting: boolean
-  layout?: 'vertical' | 'grid' | 'icons' | 'fullwidth'
-  enabledProviders?: string[]  // List of enabled provider IDs from backend
+  onProviderClick: (provider: "github" | "google") => void;
+  isSubmitting: boolean;
+  layout?: "vertical" | "grid" | "icons" | "fullwidth";
+  enabledProviders?: string[]; // List of enabled provider IDs from backend
 }
 
-export default function OAuthButtons({ onProviderClick, isSubmitting, layout = 'vertical', enabledProviders: _enabledProviders = [] }: OAuthButtonsProps) {
-  const { t } = useTranslation()
+export default function OAuthButtons({
+  onProviderClick,
+  isSubmitting,
+  layout = "vertical",
+  enabledProviders: _enabledProviders = [],
+}: OAuthButtonsProps) {
+  const { t } = useTranslation();
 
-  if (layout === 'icons') {
+  if (layout === "icons") {
     return (
       <div className="oauth-container-icons">
         {oauthProviders.map((p) => (
-          <Tooltip
-            key={p.id}
-            content={`${t('login.signInWith', 'Sign in with')} ${p.label}`}
-            position="top"
-          >
+          <Tooltip key={p.id} content={`${t("login.signInWith", "Sign in with")} ${p.label}`} position="top">
             <button
-              onClick={() => onProviderClick(p.id as 'github' | 'google')}
+              onClick={() => onProviderClick(p.id as "github" | "google")}
               disabled={isSubmitting || p.isDisabled}
               className="oauth-button-icon"
-              aria-label={`${t('login.signInWith', 'Sign in with')} ${p.label}`}
+              aria-label={`${t("login.signInWith", "Sign in with")} ${p.label}`}
             >
-              <img src={withBasePath(`/Login/${p.file}`)} alt={p.label} className={`oauth-icon-small ${p.isDisabled ? 'opacity-20' : ''}`}/>
+              <img
+                src={withBasePath(`/Login/${p.file}`)}
+                alt={p.label}
+                className={`oauth-icon-small ${p.isDisabled ? "opacity-20" : ""}`}
+              />
             </button>
           </Tooltip>
         ))}
       </div>
-    )
+    );
   }
 
-  if (layout === 'grid') {
+  if (layout === "grid") {
     return (
       <div className="oauth-container-grid">
         {oauthProviders.map((p) => (
-          <Tooltip
-            key={p.id}
-            content={`${t('login.signInWith', 'Sign in with')} ${p.label}`}
-            position="top"
-          >
+          <Tooltip key={p.id} content={`${t("login.signInWith", "Sign in with")} ${p.label}`} position="top">
             <button
-              onClick={() => onProviderClick(p.id as 'github' | 'google')}
+              onClick={() => onProviderClick(p.id as "github" | "google")}
               disabled={isSubmitting || p.isDisabled}
               className="oauth-button-grid"
-              aria-label={`${t('login.signInWith', 'Sign in with')} ${p.label}`}
+              aria-label={`${t("login.signInWith", "Sign in with")} ${p.label}`}
             >
-              <img src={withBasePath(`/Login/${p.file}`)} alt={p.label} className={`oauth-icon-medium ${p.isDisabled ? 'opacity-20' : ''}`}/>
+              <img
+                src={withBasePath(`/Login/${p.file}`)}
+                alt={p.label}
+                className={`oauth-icon-medium ${p.isDisabled ? "opacity-20" : ""}`}
+              />
             </button>
           </Tooltip>
         ))}
       </div>
-    )
+    );
   }
 
-  if (layout === 'fullwidth') {
+  if (layout === "fullwidth") {
     return (
       <div className="oauth-container-fullwidth">
         {oauthProviders.map((p) => (
           <button
             key={p.id}
-            onClick={() => onProviderClick(p.id as 'github' | 'google')}
+            onClick={() => onProviderClick(p.id as "github" | "google")}
             disabled={isSubmitting || p.isDisabled}
             className="oauth-button-fullwidth"
             title={p.label}
           >
-            <img src={withBasePath(`/Login/${p.file}`)} alt={p.label} className={`oauth-icon-medium ${p.isDisabled ? 'opacity-20' : ''}`} />
+            <img
+              src={withBasePath(`/Login/${p.file}`)}
+              alt={p.label}
+              className={`oauth-icon-medium ${p.isDisabled ? "opacity-20" : ""}`}
+            />
             {p.label}
           </button>
         ))}
       </div>
-    )
+    );
   }
 
   return (
@@ -92,15 +101,19 @@ export default function OAuthButtons({ onProviderClick, isSubmitting, layout = '
       {oauthProviders.map((p) => (
         <button
           key={p.id}
-          onClick={() => onProviderClick(p.id as 'github' | 'google')}
+          onClick={() => onProviderClick(p.id as "github" | "google")}
           disabled={isSubmitting || p.isDisabled}
           className="oauth-button-vertical"
           title={p.label}
         >
-          <img src={withBasePath(`/Login/${p.file}`)} alt={p.label} className={`oauth-icon-tiny ${p.isDisabled ? 'opacity-20' : ''}`} />
+          <img
+            src={withBasePath(`/Login/${p.file}`)}
+            alt={p.label}
+            className={`oauth-icon-tiny ${p.isDisabled ? "opacity-20" : ""}`}
+          />
           {p.label}
         </button>
       ))}
     </div>
-  )
+  );
 }
diff --git a/frontend/src/saas/routes/login/SuccessMessage.tsx b/frontend/src/saas/routes/login/SuccessMessage.tsx
index a0cd4f2629..d2760aa242 100644
--- a/frontend/src/saas/routes/login/SuccessMessage.tsx
+++ b/frontend/src/saas/routes/login/SuccessMessage.tsx
@@ -1,13 +1,13 @@
 interface SuccessMessageProps {
-  success: string | null
+  success: string | null;
 }
 
 export default function SuccessMessage({ success }: SuccessMessageProps) {
-  if (!success) return null
+  if (!success) return null;
 
   return (
     <div className="success-message">
       <p className="success-message-text">{success}</p>
     </div>
-  )
+  );
 }
diff --git a/frontend/src/saas/routes/signup/AuthService.ts b/frontend/src/saas/routes/signup/AuthService.ts
index 45e0926e07..e336e0330f 100644
--- a/frontend/src/saas/routes/signup/AuthService.ts
+++ b/frontend/src/saas/routes/signup/AuthService.ts
@@ -1,54 +1,49 @@
-import { supabase } from '@app/auth/supabase'
-import { absoluteWithBasePath } from '@app/constants/app'
+import { supabase } from "@app/auth/supabase";
+import { absoluteWithBasePath } from "@app/constants/app";
 
 export const useAuthService = () => {
-
-  const signUp = async (
-    email: string,
-    password: string,
-    name?: string
-  ) => {
-    console.log('[Signup] Creating account for:', email)
+  const signUp = async (email: string, password: string, name?: string) => {
+    console.log("[Signup] Creating account for:", email);
 
     const { data, error } = await supabase.auth.signUp({
       email: email.trim(),
       password: password,
       options: {
-        emailRedirectTo: absoluteWithBasePath('/auth/callback'),
-        data: { full_name: name }
-      }
-    })
+        emailRedirectTo: absoluteWithBasePath("/auth/callback"),
+        data: { full_name: name },
+      },
+    });
 
     if (error) {
-      console.error('[Signup] Sign up error:', error)
-      throw new Error(error.message)
+      console.error("[Signup] Sign up error:", error);
+      throw new Error(error.message);
     }
 
     if (data.user) {
-      console.log('[Signup] Sign up successful:', data.user)
+      console.log("[Signup] Sign up successful:", data.user);
       return {
         user: data.user,
         session: data.session,
-        requiresEmailConfirmation: data.user && !data.session
-      }
+        requiresEmailConfirmation: data.user && !data.session,
+      };
     }
 
-    throw new Error('Unknown error occurred during signup')
-  }
+    throw new Error("Unknown error occurred during signup");
+  };
 
-  const signInWithProvider = async (provider: 'github' | 'google' | 'apple' | 'azure') => {
+  const signInWithProvider = async (provider: "github" | "google" | "apple" | "azure") => {
     const { error } = await supabase.auth.signInWithOAuth({
       provider,
-      options: { redirectTo: absoluteWithBasePath('/auth/callback') }
-    })
+      options: { redirectTo: absoluteWithBasePath("/auth/callback") },
+    });
 
     if (error) {
-      throw new Error(error.message)
+      throw new Error(error.message);
     }
-  }
+  };
 
   return {
     signUp,
-    signInWithProvider
-  }
-}
+    signInWithProvider,
+  };
+};
diff --git a/frontend/src/saas/services/accountDeletion.ts b/frontend/src/saas/services/accountDeletion.ts
index 5311036f33..3e811be866 100644
--- a/frontend/src/saas/services/accountDeletion.ts
+++ b/frontend/src/saas/services/accountDeletion.ts
@@ -1,4 +1,4 @@
-import { supabase } from '@app/auth/supabase';
+import { supabase } from "@app/auth/supabase";
 
 interface DeleteAccountOptions {
   notifyUser?: boolean;
@@ -12,7 +12,7 @@ interface DeleteUserResponse {
 }
 
 export async function deleteCurrentAccount(options?: DeleteAccountOptions): Promise<void> {
-  const { data, error } = await supabase.functions.invoke<DeleteUserResponse>('delete-user', {
+  const { data, error } = await supabase.functions.invoke<DeleteUserResponse>("delete-user", {
     body: {
       notify_user: options?.notifyUser ?? true,
     },
@@ -20,7 +20,7 @@ export async function deleteCurrentAccount(options?: DeleteAccountOptions): Prom
 
   if (error || !data?.success) {
     const serverMessage = data?.error;
-    const errorMessage = serverMessage || error?.message || 'Failed to delete account';
+    const errorMessage = serverMessage || error?.message || "Failed to delete account";
     throw new Error(errorMessage);
   }
 }
diff --git a/frontend/src/saas/services/apiClient.test.ts b/frontend/src/saas/services/apiClient.test.ts
index 1e481bf022..3670ed29e1 100644
--- a/frontend/src/saas/services/apiClient.test.ts
+++ b/frontend/src/saas/services/apiClient.test.ts
@@ -1,9 +1,9 @@
-import { describe, it, expect, vi, beforeEach } from 'vitest';
-import type { Session, AuthError } from '@supabase/supabase-js';
-import { supabase } from '@app/auth/supabase';
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import type { Session, AuthError } from "@supabase/supabase-js";
+import { supabase } from "@app/auth/supabase";
 
 // Mock supabase
-vi.mock('@app/auth/supabase', () => ({
+vi.mock("@app/auth/supabase", () => ({
   supabase: {
     auth: {
       getSession: vi.fn(),
@@ -12,21 +12,21 @@ vi.mock('@app/auth/supabase', () => ({
   },
 }));
 
-describe('apiClient', () => {
+describe("apiClient", () => {
   beforeEach(() => {
     vi.clearAllMocks();
     // Reset modules to get fresh instance of apiClient
     vi.resetModules();
   });
 
-  it('should add JWT token to request headers when session exists', async () => {
-    const mockToken = 'test-jwt-token-12345';
+  it("should add JWT token to request headers when session exists", async () => {
+    const mockToken = "test-jwt-token-12345";
     const mockSession = {
       access_token: mockToken,
-      refresh_token: 'refresh-token',
+      refresh_token: "refresh-token",
       expires_in: 3600,
-      token_type: 'bearer',
-      user: { id: 'user-123' },
+      token_type: "bearer",
+      user: { id: "user-123" },
     } as unknown as Session;
 
     // Mock getSession to return a session with token
@@ -36,7 +36,7 @@ describe('apiClient', () => {
     });
 
     // Import apiClient after mocking
-    const { default: apiClient } = await import('@app/services/apiClient');
+    const { default: apiClient } = await import("@app/services/apiClient");
 
     // Create a mock adapter to intercept the request
     const mockAdapter = vi.fn((config) => {
@@ -45,7 +45,7 @@ describe('apiClient', () => {
       return Promise.resolve({
         data: { success: true },
         status: 200,
-        statusText: 'OK',
+        statusText: "OK",
         headers: {},
         config,
       });
@@ -55,14 +55,14 @@ describe('apiClient', () => {
     apiClient.defaults.adapter = mockAdapter;
 
     // Make a test request
-    await apiClient.get('/api/v1/test');
+    await apiClient.get("/api/v1/test");
 
     // Verify the request was made with the token
     expect(mockAdapter).toHaveBeenCalled();
     expect(supabase.auth.getSession).toHaveBeenCalled();
   });
 
-  it('should handle requests when no session exists', async () => {
+  it("should handle requests when no session exists", async () => {
     // Mock getSession to return no session
     vi.mocked(supabase.auth.getSession).mockResolvedValue({
       data: { session: null },
@@ -70,7 +70,7 @@ describe('apiClient', () => {
     });
 
     // Import apiClient after mocking
-    const { default: apiClient } = await import('@app/services/apiClient');
+    const { default: apiClient } = await import("@app/services/apiClient");
 
     // Create a mock adapter to intercept the request
     const mockAdapter = vi.fn((config) => {
@@ -79,7 +79,7 @@ describe('apiClient', () => {
       return Promise.resolve({
         data: { success: true },
         status: 200,
-        statusText: 'OK',
+        statusText: "OK",
         headers: {},
         config,
       });
@@ -89,31 +89,31 @@ describe('apiClient', () => {
     apiClient.defaults.adapter = mockAdapter;
 
     // Make a test request
-    await apiClient.get('/api/v1/test');
+    await apiClient.get("/api/v1/test");
 
     // Verify the request was made without a token
     expect(mockAdapter).toHaveBeenCalled();
     expect(supabase.auth.getSession).toHaveBeenCalled();
   });
 
-  it('should refresh token on 401 response', async () => {
-    const oldToken = 'old-token';
-    const newToken = 'new-refreshed-token';
+  it("should refresh token on 401 response", async () => {
+    const oldToken = "old-token";
+    const newToken = "new-refreshed-token";
 
     const oldSession = {
       access_token: oldToken,
-      refresh_token: 'refresh-token',
+      refresh_token: "refresh-token",
       expires_in: 3600,
-      token_type: 'bearer',
-      user: { id: 'user-123' },
+      token_type: "bearer",
+      user: { id: "user-123" },
     } as unknown as Session;
 
     const newSession = {
       access_token: newToken,
-      refresh_token: 'new-refresh-token',
+      refresh_token: "new-refresh-token",
       expires_in: 3600,
-      token_type: 'bearer',
-      user: { id: 'user-123' },
+      token_type: "bearer",
+      user: { id: "user-123" },
     } as unknown as Session;
 
     // Mock initial session for first request
@@ -134,7 +134,7 @@ describe('apiClient', () => {
     });
 
     // Import apiClient after mocking
-    const { default: apiClient } = await import('@app/services/apiClient');
+    const { default: apiClient } = await import("@app/services/apiClient");
 
     let requestCount = 0;
     const mockAdapter = vi.fn((config) => {
@@ -144,8 +144,8 @@ describe('apiClient', () => {
       if (requestCount === 1) {
         // Verify first request has old token
         expect(config.headers.Authorization).toBe(`Bearer ${oldToken}`);
-        const error = Object.assign(new Error('Unauthorized'), {
-          response: { status: 401, data: { error: 'Unauthorized' } },
+        const error = Object.assign(new Error("Unauthorized"), {
+          response: { status: 401, data: { error: "Unauthorized" } },
           config,
         });
         return Promise.reject(error);
@@ -157,7 +157,7 @@ describe('apiClient', () => {
       return Promise.resolve({
         data: { success: true },
         status: 200,
-        statusText: 'OK',
+        statusText: "OK",
         headers: {},
         config,
       });
@@ -167,7 +167,7 @@ describe('apiClient', () => {
     apiClient.defaults.adapter = mockAdapter;
 
     // Make a test request that will trigger 401 and retry
-    const response = await apiClient.get('/api/v1/test');
+    const response = await apiClient.get("/api/v1/test");
 
     // Verify the token was refreshed and request retried
     expect(response.data).toEqual({ success: true });
@@ -176,12 +176,12 @@ describe('apiClient', () => {
     expect(getSessionCallCount).toBe(3); // Called for initial request, for checking if refresh is possible, and for retry
   });
 
-  it('should handle refresh token failure', async () => {
-    const oldToken = 'old-token';
+  it("should handle refresh token failure", async () => {
+    const oldToken = "old-token";
 
     const oldSession = {
       access_token: oldToken,
-      user: { id: 'user-123' },
+      user: { id: "user-123" },
     };
 
     // Mock initial session
@@ -197,19 +197,19 @@ describe('apiClient', () => {
     // Mock refresh to fail
     vi.mocked(supabase.auth.refreshSession).mockResolvedValue({
       data: { user: null, session: null },
-      error: { name: 'AuthError', message: 'Refresh failed', status: 400, code: 'auth_error' } as unknown as AuthError,
+      error: { name: "AuthError", message: "Refresh failed", status: 400, code: "auth_error" } as unknown as AuthError,
     });
 
     // Import apiClient after mocking
-    const { default: apiClient } = await import('@app/services/apiClient');
+    const { default: apiClient } = await import("@app/services/apiClient");
 
     // Mock window.location for redirect test
-    Object.defineProperty(window, 'location', { writable: true, value: { href: '' } });
+    Object.defineProperty(window, "location", { writable: true, value: { href: "" } });
 
     const mockAdapter = vi.fn((config) => {
       // Always return 401 to trigger refresh
-      const error = Object.assign(new Error('Unauthorized'), {
-        response: { status: 401, data: { error: 'Unauthorized' } },
+      const error = Object.assign(new Error("Unauthorized"), {
+        response: { status: 401, data: { error: "Unauthorized" } },
         config,
       });
       return Promise.reject(error);
@@ -220,14 +220,14 @@ describe('apiClient', () => {
 
     // Make a test request that will trigger 401
     try {
-      await apiClient.get('/api/v1/test');
+      await apiClient.get("/api/v1/test");
       // Should not reach here
       expect(true).toBe(false);
     } catch (_) {
       // Verify refresh was attempted
       expect(supabase.auth.refreshSession).toHaveBeenCalled();
       // Verify redirect to login
-      expect(window.location.href).toBe('/login');
+      expect(window.location.href).toBe("/login");
     }
   });
 });
diff --git a/frontend/src/saas/services/apiClient.ts b/frontend/src/saas/services/apiClient.ts
index 242823e6c4..79e9694193 100644
--- a/frontend/src/saas/services/apiClient.ts
+++ b/frontend/src/saas/services/apiClient.ts
@@ -1,8 +1,8 @@
-import axios from 'axios';
-import { supabase } from '@app/auth/supabase';
-import { handleHttpError } from '@app/services/httpErrorHandler';
-import { alert } from '@app/components/toast';
-import { openPlanSettings } from '@app/utils/appSettings';
+import axios from "axios";
+import { supabase } from "@app/auth/supabase";
+import { handleHttpError } from "@app/services/httpErrorHandler";
+import { alert } from "@app/components/toast";
+import { openPlanSettings } from "@app/utils/appSettings";
 
 // Global credit update callback - will be set by the AuthProvider
 let globalCreditUpdateCallback: ((credits: number) => void) | null = null;
@@ -15,16 +15,14 @@ export const setGlobalCreditUpdateCallback = (callback: (credits: number) => voi
 // Helper: decode base64url JWT payload safely
 function decodeJwtPayload(token: string): Record<string, unknown> | null {
   try {
-    const parts = token.split('.');
+    const parts = token.split(".");
     if (parts.length < 2) return null;
-    const base64 = parts[1].replace(/-/g, '+').replace(/_/g, '/');
-    const padded = base64.padEnd(base64.length + (4 - (base64.length % 4)) % 4, '=');
-    const json = typeof atob !== 'undefined'
-      ? atob(padded)
-      : Buffer.from(padded, 'base64').toString('binary');
+    const base64 = parts[1].replace(/-/g, "+").replace(/_/g, "/");
+    const padded = base64.padEnd(base64.length + ((4 - (base64.length % 4)) % 4), "=");
+    const json = typeof atob !== "undefined" ? atob(padded) : Buffer.from(padded, "base64").toString("binary");
     return JSON.parse(json);
   } catch (e) {
-    console.warn('[API Client] Failed to decode JWT payload:', e);
+    console.warn("[API Client] Failed to decode JWT payload:", e);
     return null;
   }
 }
@@ -32,21 +30,21 @@ function decodeJwtPayload(token: string): Record<string, unknown> | null {
 // Create axios instance with default config
 const apiClient = axios.create({
   baseURL: import.meta.env.VITE_API_BASE_URL,
-  responseType: 'json',
+  responseType: "json",
 });
 
 const LOW_CREDIT_THRESHOLD = 10;
 function notifyLowCredits(credits: number) {
-  const title = 'Credit balance low';
+  const title = "Credit balance low";
   const body = `You have ${credits} credits remaining.`;
   alert({
-    alertType: 'warning',
+    alertType: "warning",
     title,
     body,
-    buttonText: 'Top up',
+    buttonText: "Top up",
     buttonCallback: () => openPlanSettings(),
     isPersistentPopup: true,
-    location: 'bottom-right'
+    location: "bottom-right",
   });
 }
 // Request interceptor to add JWT token to all requests
@@ -54,76 +52,77 @@ apiClient.interceptors.request.use(
   async (config) => {
     try {
       // Get the current session from Supabase
-      const { data: { session }, error } = await supabase.auth.getSession();
+      const {
+        data: { session },
+        error,
+      } = await supabase.auth.getSession();
 
       if (error) {
-        console.error('[API Client] Error getting session:', error);
+        console.error("[API Client] Error getting session:", error);
       }
 
       // If we have a session with an access token, add it to the Authorization header
       if (session?.access_token) {
         config.headers.Authorization = `Bearer ${session.access_token}`;
         const payload = decodeJwtPayload(session.access_token);
-        const role = (payload?.['role'] as string) || (payload?.['user_role'] as string) || undefined;
-        const aud = payload?.['aud'] as string | undefined;
-        const isAnon = role === 'anon' || aud === 'anon';
+        const role = (payload?.["role"] as string) || (payload?.["user_role"] as string) || undefined;
+        const aud = payload?.["aud"] as string | undefined;
+        const isAnon = role === "anon" || aud === "anon";
 
         // Debug logs for visibility during integration
         if (import.meta.env.DEV) {
-          console.debug('[API Client] Added JWT token to request:', config.url);
-          console.debug('[API Client] JWT payload:', payload);
-          console.debug('[API Client] Token role:', role, '| aud:', aud, '| isAnon:', isAnon);
+          console.debug("[API Client] Added JWT token to request:", config.url);
+          console.debug("[API Client] JWT payload:", payload);
+          console.debug("[API Client] Token role:", role, "| aud:", aud, "| isAnon:", isAnon);
         }
       } else {
-        console.debug('[API Client] No JWT token available for request:', config.url);
+        console.debug("[API Client] No JWT token available for request:", config.url);
       }
     } catch (error) {
-      console.error('[API Client] Error in request interceptor:', error);
+      console.error("[API Client] Error in request interceptor:", error);
     }
 
     return config;
   },
   (error) => {
     return Promise.reject(error);
-  }
+  },
 );
 
 // List of endpoints that don't require authentication
 const publicEndpoints = [
-  '/api/v1/config/app-config',
-  '/api/v1/info/status',
-  '/api/v1/config/public-config',
-  '/api/v1/config/endpoints-enabled',
+  "/api/v1/config/app-config",
+  "/api/v1/info/status",
+  "/api/v1/config/public-config",
+  "/api/v1/config/endpoints-enabled",
 ];
 
 // Response interceptor for handling token refresh and credit updates
 apiClient.interceptors.response.use(
   (response) => {
     // Check for X-Credits-Remaining header and update credits automatically
-    const creditsRemaining = response.headers['x-credits-remaining'];
+    const creditsRemaining = response.headers["x-credits-remaining"];
     if (creditsRemaining && globalCreditUpdateCallback) {
       const credits = parseInt(creditsRemaining, 10);
       if (!isNaN(credits) && credits >= 0) {
-        console.debug('[API Client] Updating credits from response header:', credits, 'for URL:', response.config?.url);
+        console.debug("[API Client] Updating credits from response header:", credits, "for URL:", response.config?.url);
         globalCreditUpdateCallback(credits);
         // Show low-credit toast with top-up button when below threshold
         if (credits < LOW_CREDIT_THRESHOLD) {
           notifyLowCredits(credits);
         }
       } else {
-        console.warn('[API Client] Invalid credits value in response header:', creditsRemaining);
+        console.warn("[API Client] Invalid credits value in response header:", creditsRemaining);
       }
     }
-    if (response.config?.url?.includes('/api/v1/credits')) {
-      console.debug('[API Client] Credits endpoint response headers:', response.headers);
+    if (response.config?.url?.includes("/api/v1/credits")) {
+      console.debug("[API Client] Credits endpoint response headers:", response.headers);
     }
     return response;
   },
   async (error) => {
     const originalRequest = error.config;
-    const isPublicEndpoint = publicEndpoints.some(endpoint =>
-      originalRequest.url?.includes(endpoint)
-    );
+    const isPublicEndpoint = publicEndpoints.some((endpoint) => originalRequest.url?.includes(endpoint));
 
     // If we get a 401 and haven't already tried to refresh, and it's not a public endpoint
     if (error.response?.status === 401 && !originalRequest._retry && !isPublicEndpoint) {
@@ -131,67 +130,72 @@ apiClient.interceptors.response.use(
 
       try {
         // Check if we have a session to refresh
-        const { data: { session } } = await supabase.auth.getSession();
+        const {
+          data: { session },
+        } = await supabase.auth.getSession();
 
         // Only try to refresh if we actually have a session
         if (session) {
-          const { data: { session: refreshedSession }, error: refreshError } = await supabase.auth.refreshSession();
+          const {
+            data: { session: refreshedSession },
+            error: refreshError,
+          } = await supabase.auth.refreshSession();
 
-        if (refreshError) {
-          console.error('[API Client] Token refresh failed:', refreshError);
+          if (refreshError) {
+            console.error("[API Client] Token refresh failed:", refreshError);
 
-          // Only redirect to login for protected endpoints, not public ones
-          const isPublicEndpoint = originalRequest.url?.includes('/api/v1/config/') ||
-                                  originalRequest.url?.includes('/api/v1/info/');
+            // Only redirect to login for protected endpoints, not public ones
+            const isPublicEndpoint =
+              originalRequest.url?.includes("/api/v1/config/") || originalRequest.url?.includes("/api/v1/info/");
 
-          if (!isPublicEndpoint) {
-            // Redirect to login only for protected endpoints
-            window.location.href = '/login';
+            if (!isPublicEndpoint) {
+              // Redirect to login only for protected endpoints
+              window.location.href = "/login";
+            }
+
+            return Promise.reject(error);
           }
 
-          return Promise.reject(error);
-        }
-
           if (refreshedSession?.access_token) {
             // Update the Authorization header with the new token
             originalRequest.headers = originalRequest.headers || {};
             originalRequest.headers.Authorization = `Bearer ${refreshedSession.access_token}`;
-            console.debug('[API Client] Retrying request with refreshed token');
+            console.debug("[API Client] Retrying request with refreshed token");
 
             // Retry the original request with the new token
             return apiClient(originalRequest);
           }
         } else {
           // No session exists, only redirect if not already on login page
-          console.debug('[API Client] No session to refresh, 401 on protected endpoint');
-          if (window.location.pathname !== '/login') {
-            window.location.href = '/login';
+          console.debug("[API Client] No session to refresh, 401 on protected endpoint");
+          if (window.location.pathname !== "/login") {
+            window.location.href = "/login";
           }
         }
       } catch (refreshError) {
-        console.error('[API Client] Error during token refresh:', refreshError);
+        console.error("[API Client] Error during token refresh:", refreshError);
       }
     }
 
     // For public endpoints with 401, just log and continue (don't redirect)
     if (isPublicEndpoint && error.response?.status === 401) {
-      console.debug('[API Client] 401 on public endpoint, continuing without auth:', originalRequest.url);
+      console.debug("[API Client] 401 on public endpoint, continuing without auth:", originalRequest.url);
     }
-      const status = error.response?.status;
-      const url = error.config?.url;
-      const method = error.config?.method?.toUpperCase();
+    const status = error.response?.status;
+    const url = error.config?.url;
+    const method = error.config?.method?.toUpperCase();
 
-      console.error('[API Client] HTTP Error', {
-        status,
-        method,
-        url,
-        error: error.message,
-        data: error.response?.data
-      });
+    console.error("[API Client] HTTP Error", {
+      status,
+      method,
+      url,
+      error: error.message,
+      data: error.response?.data,
+    });
     await handleHttpError(error); // Handle error (shows toast unless suppressed)
 
     return Promise.reject(error);
-  }
+  },
 );
 
 export default apiClient;
diff --git a/frontend/src/saas/services/avatarSyncService.ts b/frontend/src/saas/services/avatarSyncService.ts
index 3ca58a245f..19106007a9 100644
--- a/frontend/src/saas/services/avatarSyncService.ts
+++ b/frontend/src/saas/services/avatarSyncService.ts
@@ -3,24 +3,24 @@
  * Downloads, optimizes, and syncs profile pictures from OAuth providers
  */
 
-import { supabase } from '@app/auth/supabase'
-import type { User } from '@supabase/supabase-js'
+import { supabase } from "@app/auth/supabase";
+import type { User } from "@supabase/supabase-js";
 
-const PROFILE_BUCKET = 'profile-pictures'
-const AVATAR_SIZE = 256 // 256x256 pixels
-const MAX_AVATAR_SIZE = 500 * 1024 // 500KB max file size after optimization
-const SYNC_INTERVAL_DAYS = 7 // Resync every 7 days
+const PROFILE_BUCKET = "profile-pictures";
+const AVATAR_SIZE = 256; // 256x256 pixels
+const MAX_AVATAR_SIZE = 500 * 1024; // 500KB max file size after optimization
+const SYNC_INTERVAL_DAYS = 7; // Resync every 7 days
 
 // Client-side cache to prevent repeated sync attempts in same browser session
-const sessionSyncCache = new Map<string, { timestamp: number; success: boolean }>()
+const sessionSyncCache = new Map<string, { timestamp: number; success: boolean }>();
 
 export interface ProfilePictureMetadata {
-  user_id: string
-  source: 'oauth' | 'upload'
-  provider: 'google' | 'github' | 'apple' | 'azure' | null
-  last_synced_at: string | null
-  created_at: string
-  updated_at: string
+  user_id: string;
+  source: "oauth" | "upload";
+  provider: "google" | "github" | "apple" | "azure" | null;
+  last_synced_at: string | null;
+  created_at: string;
+  updated_at: string;
 }
 
 /**
@@ -29,26 +29,26 @@ export interface ProfilePictureMetadata {
  * @returns Avatar URL or null if not available
  */
 export function getProviderAvatarUrl(user: User): string | null {
-  const provider = user.app_metadata?.provider
-  const metadata = user.user_metadata
+  const provider = user.app_metadata?.provider;
+  const metadata = user.user_metadata;
 
   if (!provider || !metadata) {
-    return null
+    return null;
   }
 
   switch (provider) {
-    case 'google':
-    case 'azure':
+    case "google":
+    case "azure":
       // Google and Azure use 'picture' field
-      return metadata.picture || null
-    case 'github':
+      return metadata.picture || null;
+    case "github":
       // GitHub uses 'avatar_url' field
-      return metadata.avatar_url || null
-    case 'apple':
+      return metadata.avatar_url || null;
+    case "apple":
       // Apple doesn't provide profile pictures via OAuth
-      return null
+      return null;
     default:
-      return null
+      return null;
   }
 }
 
@@ -62,70 +62,70 @@ export async function downloadAndOptimizeAvatar(url: string): Promise<Blob> {
   try {
     // 1. Fetch image from provider URL
     const response = await fetch(url, {
-      mode: 'cors',
-      credentials: 'omit',
-    })
+      mode: "cors",
+      credentials: "omit",
+    });
 
     if (!response.ok) {
-      throw new Error(`Failed to download avatar: ${response.status} ${response.statusText}`)
+      throw new Error(`Failed to download avatar: ${response.status} ${response.statusText}`);
     }
 
-    const blob = await response.blob()
+    const blob = await response.blob();
 
     // 2. Create image bitmap
-    const img = await createImageBitmap(blob)
+    const img = await createImageBitmap(blob);
 
     // 3. Create canvas and draw scaled image
-    const canvas = document.createElement('canvas')
-    canvas.width = AVATAR_SIZE
-    canvas.height = AVATAR_SIZE
-    const ctx = canvas.getContext('2d')
+    const canvas = document.createElement("canvas");
+    canvas.width = AVATAR_SIZE;
+    canvas.height = AVATAR_SIZE;
+    const ctx = canvas.getContext("2d");
 
     if (!ctx) {
-      throw new Error('Failed to get canvas context')
+      throw new Error("Failed to get canvas context");
     }
 
     // Draw image scaled to fit (maintains aspect ratio, centered)
-    const scale = Math.min(AVATAR_SIZE / img.width, AVATAR_SIZE / img.height)
-    const x = (AVATAR_SIZE - img.width * scale) / 2
-    const y = (AVATAR_SIZE - img.height * scale) / 2
-    ctx.drawImage(img, x, y, img.width * scale, img.height * scale)
+    const scale = Math.min(AVATAR_SIZE / img.width, AVATAR_SIZE / img.height);
+    const x = (AVATAR_SIZE - img.width * scale) / 2;
+    const y = (AVATAR_SIZE - img.height * scale) / 2;
+    ctx.drawImage(img, x, y, img.width * scale, img.height * scale);
 
     // 4. Convert to PNG blob with quality optimization
     return new Promise((resolve, reject) => {
       canvas.toBlob(
         (optimizedBlob) => {
           if (!optimizedBlob) {
-            reject(new Error('Failed to create optimized blob'))
-            return
+            reject(new Error("Failed to create optimized blob"));
+            return;
           }
 
           // Check file size
           if (optimizedBlob.size > MAX_AVATAR_SIZE) {
-            console.warn('[Avatar Sync] Optimized avatar exceeds max size:', optimizedBlob.size)
+            console.warn("[Avatar Sync] Optimized avatar exceeds max size:", optimizedBlob.size);
             // Try with lower quality
             canvas.toBlob(
               (lowerQualityBlob) => {
                 if (lowerQualityBlob) {
-                  resolve(lowerQualityBlob)
+                  resolve(lowerQualityBlob);
                 } else {
-                  reject(new Error('Failed to create lower quality blob'))
+                  reject(new Error("Failed to create lower quality blob"));
                 }
               },
-              'image/png',
-              0.7
-            )
+              "image/png",
+              0.7,
+            );
           } else {
-            resolve(optimizedBlob)
+            resolve(optimizedBlob);
           }
         },
-        'image/png',
-        0.9
-      )
-    })
+        "image/png",
+        0.9,
+      );
+    });
   } catch (error) {
-    console.error('[Avatar Sync] Failed to download and optimize avatar:', error)
-    throw error
+    console.error("[Avatar Sync] Failed to download and optimize avatar:", error);
+    throw error;
   }
 }
 
@@ -136,27 +136,25 @@ export async function downloadAndOptimizeAvatar(url: string): Promise<Blob> {
  */
 export async function uploadAvatarToStorage(userId: string, blob: Blob): Promise<void> {
   try {
-    const profilePath = `${userId}/avatar`
+    const profilePath = `${userId}/avatar`;
 
-    console.debug('[Avatar Sync] Uploading avatar to storage:', profilePath)
+    console.debug("[Avatar Sync] Uploading avatar to storage:", profilePath);
 
     // Upload to Supabase Storage (overwrites existing file)
-    const { error: uploadError } = await supabase.storage
-      .from(PROFILE_BUCKET)
-      .upload(profilePath, blob, {
-        upsert: true, // Overwrite existing file
-        contentType: 'image/png',
-        cacheControl: '3600', // Cache for 1 hour
-      })
+    const { error: uploadError } = await supabase.storage.from(PROFILE_BUCKET).upload(profilePath, blob, {
+      upsert: true, // Overwrite existing file
+      contentType: "image/png",
+      cacheControl: "3600", // Cache for 1 hour
+    });
 
     if (uploadError) {
-      throw uploadError
+      throw uploadError;
     }
 
-    console.debug('[Avatar Sync] Avatar uploaded successfully')
+    console.debug("[Avatar Sync] Avatar uploaded successfully");
   } catch (error) {
-    console.error('[Avatar Sync] Failed to upload avatar to storage:', error)
-    throw error
+    console.error("[Avatar Sync] Failed to upload avatar to storage:", error);
+    throw error;
   }
 }
 
@@ -165,30 +163,24 @@ export async function uploadAvatarToStorage(userId: string, blob: Blob): Promise
  * @param userId User ID
  * @returns Metadata or null if not found
  */
-export async function getProfilePictureMetadata(
-  userId: string
-): Promise<ProfilePictureMetadata | null> {
+export async function getProfilePictureMetadata(userId: string): Promise<ProfilePictureMetadata | null> {
   try {
-    const { data, error } = await supabase
-      .from('profile_picture_metadata')
-      .select('*')
-      .eq('user_id', userId)
-      .maybeSingle()
+    const { data, error } = await supabase.from("profile_picture_metadata").select("*").eq("user_id", userId).maybeSingle();
 
     if (error) {
       // If table doesn't exist, that's expected before migration runs
-      if (error.code === 'PGRST116' || error.message?.includes('does not exist')) {
-        console.debug('[Avatar Sync] Metadata table not found - migration may not be applied yet')
-        return null
+      if (error.code === "PGRST116" || error.message?.includes("does not exist")) {
+        console.debug("[Avatar Sync] Metadata table not found - migration may not be applied yet");
+        return null;
       }
-      console.error('[Avatar Sync] Failed to fetch profile picture metadata:', error)
-      return null
+      console.error("[Avatar Sync] Failed to fetch profile picture metadata:", error);
+      return null;
     }
 
-    return data
+    return data;
   } catch (error) {
-    console.error('[Avatar Sync] Unexpected error fetching metadata:', error)
-    return null
+    console.error("[Avatar Sync] Unexpected error fetching metadata:", error);
+    return null;
   }
 }
 
@@ -199,32 +191,32 @@ export async function getProfilePictureMetadata(
  */
 export async function updateProfilePictureMetadata(
   userId: string,
-  data: Partial<Omit<ProfilePictureMetadata, 'user_id' | 'created_at' | 'updated_at'>>
+  data: Partial<Omit<ProfilePictureMetadata, "user_id" | "created_at" | "updated_at">>,
 ): Promise<void> {
   try {
-    const { error } = await supabase.from('profile_picture_metadata').upsert(
+    const { error } = await supabase.from("profile_picture_metadata").upsert(
       {
         user_id: userId,
         ...data,
       },
       {
-        onConflict: 'user_id',
-      }
-    )
+        onConflict: "user_id",
+      },
+    );
 
     if (error) {
       // If table doesn't exist, log but don't crash
-      if (error.code === 'PGRST116' || error.message?.includes('does not exist')) {
-        console.warn('[Avatar Sync] Cannot update metadata - table does not exist. Run migration first.')
-        return // Don't throw, allow feature to work without metadata tracking
+      if (error.code === "PGRST116" || error.message?.includes("does not exist")) {
+        console.warn("[Avatar Sync] Cannot update metadata - table does not exist. Run migration first.");
+        return; // Don't throw, allow feature to work without metadata tracking
       }
-      throw error
+      throw error;
     }
 
-    console.debug('[Avatar Sync] Metadata updated successfully')
+    console.debug("[Avatar Sync] Metadata updated successfully");
   } catch (error) {
-    console.error('[Avatar Sync] Failed to update metadata:', error)
-    throw error
+    console.error("[Avatar Sync] Failed to update metadata:", error);
+    throw error;
   }
 }
 
@@ -240,99 +232,99 @@ export async function updateProfilePictureMetadata(
  * @returns true if sync was performed, false if skipped
  */
 export async function syncOAuthAvatar(user: User): Promise<boolean> {
-  const cacheKey = user.id
+  const cacheKey = user.id;
 
   try {
     // 0. Check client-side session cache first (prevent repeated attempts)
-    const cached = sessionSyncCache.get(cacheKey)
+    const cached = sessionSyncCache.get(cacheKey);
     if (cached) {
-      const minutesSinceLastAttempt = (Date.now() - cached.timestamp) / (1000 * 60)
+      const minutesSinceLastAttempt = (Date.now() - cached.timestamp) / (1000 * 60);
       if (minutesSinceLastAttempt < 60) {
-        console.debug('[Avatar Sync] Skipping sync - already attempted in this session:', {
+        console.debug("[Avatar Sync] Skipping sync - already attempted in this session:", {
           minutesAgo: minutesSinceLastAttempt.toFixed(1),
-          lastSuccess: cached.success
-        })
-        return cached.success
+          lastSuccess: cached.success,
+        });
+        return cached.success;
       }
     }
 
     // 1. Check if user is OAuth authenticated
-    const provider = user.app_metadata?.provider
-    console.debug('[Avatar Sync] Checking user for sync:', {
+    const provider = user.app_metadata?.provider;
+    console.debug("[Avatar Sync] Checking user for sync:", {
       provider,
       userId: user.id,
       email: user.email,
       hasUserMetadata: !!user.user_metadata,
-      userMetadataKeys: user.user_metadata ? Object.keys(user.user_metadata) : []
-    })
+      userMetadataKeys: user.user_metadata ? Object.keys(user.user_metadata) : [],
+    });
 
-    if (!provider || !['google', 'github', 'azure'].includes(provider)) {
-      console.debug('[Avatar Sync] Skipping sync - not an OAuth provider with avatar support')
-      sessionSyncCache.set(cacheKey, { timestamp: Date.now(), success: false })
-      return false
+    if (!provider || !["google", "github", "azure"].includes(provider)) {
+      console.debug("[Avatar Sync] Skipping sync - not an OAuth provider with avatar support");
+      sessionSyncCache.set(cacheKey, { timestamp: Date.now(), success: false });
+      return false;
     }
 
     // 2. Get metadata to check if sync is needed
-    const metadata = await getProfilePictureMetadata(user.id)
+    const metadata = await getProfilePictureMetadata(user.id);
 
     // Skip if user has manually uploaded a picture
-    if (metadata?.source === 'upload') {
-      console.debug('[Avatar Sync] Skipping sync - user has manual upload')
-      sessionSyncCache.set(cacheKey, { timestamp: Date.now(), success: false })
-      return false
+    if (metadata?.source === "upload") {
+      console.debug("[Avatar Sync] Skipping sync - user has manual upload");
+      sessionSyncCache.set(cacheKey, { timestamp: Date.now(), success: false });
+      return false;
     }
 
     // Skip if synced recently (within SYNC_INTERVAL_DAYS)
     if (metadata?.last_synced_at) {
-      const lastSync = new Date(metadata.last_synced_at)
-      const daysSinceSync = (Date.now() - lastSync.getTime()) / (1000 * 60 * 60 * 24)
+      const lastSync = new Date(metadata.last_synced_at);
+      const daysSinceSync = (Date.now() - lastSync.getTime()) / (1000 * 60 * 60 * 24);
       if (daysSinceSync < SYNC_INTERVAL_DAYS) {
-        console.debug('[Avatar Sync] Skipping sync - synced recently:', {
+        console.debug("[Avatar Sync] Skipping sync - synced recently:", {
           daysSinceSync: daysSinceSync.toFixed(1),
           threshold: SYNC_INTERVAL_DAYS,
-        })
-        sessionSyncCache.set(cacheKey, { timestamp: Date.now(), success: true })
-        return false
+        });
+        sessionSyncCache.set(cacheKey, { timestamp: Date.now(), success: true });
+        return false;
       }
     }
 
     // 3. Extract provider avatar URL
-    const avatarUrl = getProviderAvatarUrl(user)
-    console.debug('[Avatar Sync] Avatar URL extraction:', {
+    const avatarUrl = getProviderAvatarUrl(user);
+    console.debug("[Avatar Sync] Avatar URL extraction:", {
       provider,
       avatarUrl,
-      hasAvatarUrl: !!avatarUrl
-    })
+      hasAvatarUrl: !!avatarUrl,
+    });
 
     if (!avatarUrl) {
-      console.debug('[Avatar Sync] No avatar URL available from provider')
-      sessionSyncCache.set(cacheKey, { timestamp: Date.now(), success: false })
-      return false
+      console.debug("[Avatar Sync] No avatar URL available from provider");
+      sessionSyncCache.set(cacheKey, { timestamp: Date.now(), success: false });
+      return false;
     }
 
-    console.debug('[Avatar Sync] Starting sync for provider:', provider, 'with URL:', avatarUrl)
+    console.debug("[Avatar Sync] Starting sync for provider:", provider, "with URL:", avatarUrl);
 
     // 4. Download and optimize avatar
-    const optimizedBlob = await downloadAndOptimizeAvatar(avatarUrl)
+    const optimizedBlob = await downloadAndOptimizeAvatar(avatarUrl);
 
     // 5. Upload to Supabase Storage
-    await uploadAvatarToStorage(user.id, optimizedBlob)
+    await uploadAvatarToStorage(user.id, optimizedBlob);
 
     // 6. Update metadata
     await updateProfilePictureMetadata(user.id, {
-      source: 'oauth',
-      provider: provider as ProfilePictureMetadata['provider'],
+      source: "oauth",
+      provider: provider as ProfilePictureMetadata["provider"],
       last_synced_at: new Date().toISOString(),
-    })
+    });
 
-    console.debug('[Avatar Sync] Sync completed successfully')
-    sessionSyncCache.set(cacheKey, { timestamp: Date.now(), success: true })
-    return true
+    console.debug("[Avatar Sync] Sync completed successfully");
+    sessionSyncCache.set(cacheKey, { timestamp: Date.now(), success: true });
+    return true;
   } catch (error) {
-    console.error('[Avatar Sync] Failed to sync OAuth avatar:', error)
+    console.error("[Avatar Sync] Failed to sync OAuth avatar:", error);
     // Cache the failure to prevent repeated attempts
-    sessionSyncCache.set(cacheKey, { timestamp: Date.now(), success: false })
+    sessionSyncCache.set(cacheKey, { timestamp: Date.now(), success: false });
     // Don't throw - gracefully degrade to existing picture or initials
-    return false
+    return false;
   }
 }
diff --git a/frontend/src/saas/services/signatureStorageService.ts b/frontend/src/saas/services/signatureStorageService.ts
index 2019994585..6ba82ea49e 100644
--- a/frontend/src/saas/services/signatureStorageService.ts
+++ b/frontend/src/saas/services/signatureStorageService.ts
@@ -1,6 +1,6 @@
-import type { SavedSignature } from '@app/hooks/tools/sign/useSavedSignatures';
+import type { SavedSignature } from "@app/hooks/tools/sign/useSavedSignatures";
 
-export type StorageType = 'backend' | 'localStorage';
+export type StorageType = "backend" | "localStorage";
 
 interface SignatureStorageCapabilities {
   supportsBackend: boolean;
@@ -17,7 +17,7 @@ interface SignatureStorageCapabilities {
 class SignatureStorageService {
   private capabilities: SignatureStorageCapabilities | null = null;
   private blobUrls: Set<string> = new Set();
-  private readonly STORAGE_KEY = 'stirling:saved-signatures:v1';
+  private readonly STORAGE_KEY = "stirling:saved-signatures:v1";
 
   /**
    * Detect capabilities - in SaaS mode, always returns localStorage
@@ -28,10 +28,10 @@ class SignatureStorageService {
     }
 
     // SaaS mode always uses localStorage (no backend signature API available)
-    console.log('[SignatureStorage] SaaS mode - using localStorage (backend not available)');
+    console.log("[SignatureStorage] SaaS mode - using localStorage (backend not available)");
     this.capabilities = {
       supportsBackend: false,
-      storageType: 'localStorage',
+      storageType: "localStorage",
     };
 
     return this.capabilities;
@@ -61,7 +61,7 @@ class SignatureStorageService {
    */
   async saveSignature(signature: SavedSignature): Promise<void> {
     // Force scope to localStorage for SaaS mode
-    signature.scope = 'localStorage';
+    signature.scope = "localStorage";
     this._saveToLocalStorage(signature);
   }
 
@@ -88,7 +88,7 @@ class SignatureStorageService {
       // Ensure all localStorage signatures have the correct scope
       return signatures.map((sig: SavedSignature) => ({
         ...sig,
-        scope: 'localStorage' as const,
+        scope: "localStorage" as const,
       }));
     } catch {
       return [];
@@ -97,7 +97,7 @@ class SignatureStorageService {
 
   private _saveToLocalStorage(signature: SavedSignature): void {
     const signatures = this._loadFromLocalStorage();
-    const index = signatures.findIndex(s => s.id === signature.id);
+    const index = signatures.findIndex((s) => s.id === signature.id);
 
     if (index >= 0) {
       signatures[index] = signature;
@@ -110,13 +110,13 @@ class SignatureStorageService {
 
   private _deleteFromLocalStorage(id: string): void {
     const signatures = this._loadFromLocalStorage();
-    const filtered = signatures.filter(s => s.id !== id);
+    const filtered = signatures.filter((s) => s.id !== id);
     localStorage.setItem(this.STORAGE_KEY, JSON.stringify(filtered));
   }
 
   private _updateLabelInLocalStorage(id: string, label: string): void {
     const signatures = this._loadFromLocalStorage();
-    const signature = signatures.find(s => s.id === id);
+    const signature = signatures.find((s) => s.id === id);
     if (signature) {
       signature.label = label;
       signature.updatedAt = Date.now();
@@ -129,7 +129,7 @@ class SignatureStorageService {
    * In SaaS mode, this is a no-op since we don't support backend storage
    */
   async migrateToBackend(): Promise<{ migrated: number; failed: number }> {
-    console.log('[SignatureStorage] Migration not supported in SaaS mode');
+    console.log("[SignatureStorage] Migration not supported in SaaS mode");
     return { migrated: 0, failed: 0 };
   }
 
@@ -137,7 +137,7 @@ class SignatureStorageService {
    * Clean up blob URLs to prevent memory leaks
    */
   cleanup(): void {
-    this.blobUrls.forEach(url => {
+    this.blobUrls.forEach((url) => {
       URL.revokeObjectURL(url);
     });
     this.blobUrls.clear();
diff --git a/frontend/src/saas/services/userManagementService.ts b/frontend/src/saas/services/userManagementService.ts
index 3c94ecb31d..dff331170d 100644
--- a/frontend/src/saas/services/userManagementService.ts
+++ b/frontend/src/saas/services/userManagementService.ts
@@ -1,5 +1,5 @@
-import apiClient from '@app/services/apiClient';
-import { supabase, isSupabaseConfigured } from '@app/services/supabaseClient';
+import apiClient from "@app/services/apiClient";
+import { supabase, isSupabaseConfigured } from "@app/services/supabaseClient";
 
 export interface User {
   id: number;
@@ -45,7 +45,7 @@ export interface CreateUserRequest {
   password?: string;
   role: string;
   teamId?: number;
-  authType: 'password' | 'SSO';
+  authType: "password" | "SSO";
   forceChange?: boolean;
 }
 
@@ -107,7 +107,7 @@ export const userManagementService = {
    * Get all users with session data (admin only)
    */
   async getUsers(): Promise<AdminSettingsData> {
-    const response = await apiClient.get<AdminSettingsData>('/api/v1/proprietary/ui-data/admin-settings');
+    const response = await apiClient.get<AdminSettingsData>("/api/v1/proprietary/ui-data/admin-settings");
     return response.data;
   },
 
@@ -115,7 +115,7 @@ export const userManagementService = {
    * Get users without a team
    */
   async getUsersWithoutTeam(): Promise<User[]> {
-    const response = await apiClient.get<User[]>('/api/v1/users/without-team');
+    const response = await apiClient.get<User[]>("/api/v1/users/without-team");
     return response.data;
   },
 
@@ -124,19 +124,19 @@ export const userManagementService = {
    */
   async createUser(data: CreateUserRequest): Promise<void> {
     const formData = new FormData();
-    formData.append('username', data.username);
+    formData.append("username", data.username);
     if (data.password) {
-      formData.append('password', data.password);
+      formData.append("password", data.password);
     }
-    formData.append('role', data.role);
+    formData.append("role", data.role);
     if (data.teamId) {
-      formData.append('teamId', data.teamId.toString());
+      formData.append("teamId", data.teamId.toString());
     }
-    formData.append('authType', data.authType);
+    formData.append("authType", data.authType);
     if (data.forceChange !== undefined) {
-      formData.append('forceChange', data.forceChange.toString());
+      formData.append("forceChange", data.forceChange.toString());
     }
-    await apiClient.post('/api/v1/user/admin/saveUser', formData, {
+    await apiClient.post("/api/v1/user/admin/saveUser", formData, {
       suppressErrorToast: true, // Component will handle error display
     });
   },
@@ -146,12 +146,12 @@ export const userManagementService = {
    */
   async updateUserRole(data: UpdateUserRoleRequest): Promise<void> {
     const formData = new FormData();
-    formData.append('username', data.username);
-    formData.append('role', data.role);
+    formData.append("username", data.username);
+    formData.append("role", data.role);
     if (data.teamId) {
-      formData.append('teamId', data.teamId.toString());
+      formData.append("teamId", data.teamId.toString());
     }
-    await apiClient.post('/api/v1/user/admin/changeRole', formData, {
+    await apiClient.post("/api/v1/user/admin/changeRole", formData, {
       suppressErrorToast: true,
     });
   },
@@ -161,7 +161,7 @@ export const userManagementService = {
    */
   async toggleUserEnabled(username: string, enabled: boolean): Promise<void> {
     const formData = new FormData();
-    formData.append('enabled', enabled.toString());
+    formData.append("enabled", enabled.toString());
     await apiClient.post(`/api/v1/user/admin/changeUserEnabled/${username}`, formData, {
       suppressErrorToast: true,
     });
@@ -173,10 +173,10 @@ export const userManagementService = {
   async deleteUser(user: User, options?: { notifyUser?: boolean }): Promise<void> {
     if (isSupabaseConfigured && supabase) {
       if (!user.email) {
-        throw new Error('Email missing for this user. Please contact support for manual removal.');
+        throw new Error("Email missing for this user. Please contact support for manual removal.");
       }
 
-      const { error } = await supabase.functions.invoke('delete-user', {
+      const { error } = await supabase.functions.invoke("delete-user", {
         body: {
           target_email: user.email,
           notify_user: options?.notifyUser ?? true,
@@ -184,7 +184,7 @@ export const userManagementService = {
       });
 
       if (error) {
-        throw new Error(error.message || 'Supabase deletion failed');
+        throw new Error(error.message || "Supabase deletion failed");
       }
       return;
     }
@@ -197,19 +197,15 @@ export const userManagementService = {
    */
   async inviteUsers(data: InviteUsersRequest): Promise<InviteUsersResponse> {
     const formData = new FormData();
-    formData.append('emails', data.emails);
-    formData.append('role', data.role);
+    formData.append("emails", data.emails);
+    formData.append("role", data.role);
     if (data.teamId) {
-      formData.append('teamId', data.teamId.toString());
+      formData.append("teamId", data.teamId.toString());
     }
 
-    const response = await apiClient.post<InviteUsersResponse>(
-      '/api/v1/user/admin/inviteUsers',
-      formData,
-      {
-        suppressErrorToast: true, // Component will handle error display
-      }
-    );
+    const response = await apiClient.post<InviteUsersResponse>("/api/v1/user/admin/inviteUsers", formData, {
+      suppressErrorToast: true, // Component will handle error display
+    });
 
     return response.data;
   },
@@ -221,26 +217,22 @@ export const userManagementService = {
     const formData = new FormData();
     // Only append email if it's provided and not empty
     if (data.email && data.email.trim()) {
-      formData.append('email', data.email);
+      formData.append("email", data.email);
     }
-    formData.append('role', data.role);
+    formData.append("role", data.role);
     if (data.teamId) {
-      formData.append('teamId', data.teamId.toString());
+      formData.append("teamId", data.teamId.toString());
     }
     if (data.expiryHours) {
-      formData.append('expiryHours', data.expiryHours.toString());
+      formData.append("expiryHours", data.expiryHours.toString());
     }
     if (data.sendEmail !== undefined) {
-      formData.append('sendEmail', data.sendEmail.toString());
+      formData.append("sendEmail", data.sendEmail.toString());
     }
 
-    const response = await apiClient.post<InviteLinkResponse>(
-      '/api/v1/invite/generate',
-      formData,
-      {
-        suppressErrorToast: true,
-      }
-    );
+    const response = await apiClient.post<InviteLinkResponse>("/api/v1/invite/generate", formData, {
+      suppressErrorToast: true,
+    });
 
     return response.data;
   },
@@ -249,7 +241,7 @@ export const userManagementService = {
    * Get list of active invite links (admin only)
    */
   async getInviteLinks(): Promise<InviteToken[]> {
-    const response = await apiClient.get<{ invites: InviteToken[] }>('/api/v1/invite/list');
+    const response = await apiClient.get<{ invites: InviteToken[] }>("/api/v1/invite/list");
     return response.data.invites;
   },
 
@@ -266,7 +258,7 @@ export const userManagementService = {
    * Clean up expired invite links (admin only)
    */
   async cleanupExpiredInvites(): Promise<{ deletedCount: number }> {
-    const response = await apiClient.post<{ deletedCount: number }>('/api/v1/invite/cleanup');
+    const response = await apiClient.post<{ deletedCount: number }>("/api/v1/invite/cleanup");
     return response.data;
   },
 };
diff --git a/frontend/src/saas/services/userService.ts b/frontend/src/saas/services/userService.ts
index 6d75312a43..ff8ca2f930 100644
--- a/frontend/src/saas/services/userService.ts
+++ b/frontend/src/saas/services/userService.ts
@@ -2,7 +2,7 @@
  * User service for handling user-related API calls
  */
 
-const API_BASE = '/api/v1';
+const API_BASE = "/api/v1";
 
 /**
  * Synchronizes user upgrade from anonymous to authenticated status with the backend.
@@ -14,7 +14,7 @@ const API_BASE = '/api/v1';
  * @returns Promise with the synchronization result
  */
 export const synchronizeUserUpgrade = async (
-  authMethod?: string
+  authMethod?: string,
 ): Promise<{
   message: string;
   userId: string;
@@ -22,22 +22,22 @@ export const synchronizeUserUpgrade = async (
 }> => {
   const formData = new URLSearchParams();
   if (authMethod) {
-    formData.append('authMethod', authMethod);
+    formData.append("authMethod", authMethod);
   }
 
   const response = await fetch(`${API_BASE}/user-role/promptToAuthUser`, {
-    method: 'POST',
+    method: "POST",
     headers: {
-      'Content-Type': 'application/x-www-form-urlencoded',
+      "Content-Type": "application/x-www-form-urlencoded",
     },
-    credentials: 'include', // Include cookies for authentication
+    credentials: "include", // Include cookies for authentication
     body: formData.toString(),
   });
 
   if (!response.ok) {
-    const errorData = await response.json().catch(() => ({ error: 'Failed to synchronize user upgrade' }));
-    throw new Error(errorData.error || 'Failed to synchronize user upgrade');
+    const errorData = await response.json().catch(() => ({ error: "Failed to synchronize user upgrade" }));
+    throw new Error(errorData.error || "Failed to synchronize user upgrade");
   }
 
   return response.json();
-};
\ No newline at end of file
+};
diff --git a/frontend/src/saas/setupTests.ts b/frontend/src/saas/setupTests.ts
index f2ecbb7ca6..ce3ee1548a 100644
--- a/frontend/src/saas/setupTests.ts
+++ b/frontend/src/saas/setupTests.ts
@@ -1,34 +1,42 @@
-import '@testing-library/jest-dom';
-import { vi } from 'vitest';
+import "@testing-library/jest-dom";
+import { vi } from "vitest";
 
 // Mock localStorage for tests
 const localStorageMock = (() => {
   let store: Record<string, string> = {};
   return {
     getItem: vi.fn((key: string) => store[key] || null),
-    setItem: vi.fn((key: string, value: string) => { store[key] = value; }),
-    removeItem: vi.fn((key: string) => { delete store[key]; }),
-    clear: vi.fn(() => { store = {}; }),
-    get length() { return Object.keys(store).length; },
+    setItem: vi.fn((key: string, value: string) => {
+      store[key] = value;
+    }),
+    removeItem: vi.fn((key: string) => {
+      delete store[key];
+    }),
+    clear: vi.fn(() => {
+      store = {};
+    }),
+    get length() {
+      return Object.keys(store).length;
+    },
     key: vi.fn((index: number) => Object.keys(store)[index] || null),
   };
 })();
-Object.defineProperty(global, 'localStorage', { value: localStorageMock });
+Object.defineProperty(global, "localStorage", { value: localStorageMock });
 
 // Mock Supabase for tests
-vi.mock('@app/auth/supabase', () => ({
+vi.mock("@app/auth/supabase", () => ({
   supabase: {
     auth: {
       getSession: vi.fn().mockResolvedValue({ data: { session: null }, error: null }),
       refreshSession: vi.fn().mockResolvedValue({ data: { session: null }, error: null }),
-      onAuthStateChange: vi.fn().mockReturnValue({ data: { subscription: { unsubscribe: vi.fn() } } })
-    }
+      onAuthStateChange: vi.fn().mockReturnValue({ data: { subscription: { unsubscribe: vi.fn() } } }),
+    },
   },
-  debugAuthEvents: vi.fn()
-}))
+  debugAuthEvents: vi.fn(),
+}));
 
 // Mock i18next for tests
-vi.mock('react-i18next', () => ({
+vi.mock("react-i18next", () => ({
   useTranslation: () => ({
     t: (key: string) => key,
     i18n: {
@@ -36,16 +44,16 @@ vi.mock('react-i18next', () => ({
     },
   }),
   initReactI18next: {
-    type: '3rdParty',
+    type: "3rdParty",
     init: vi.fn(),
   },
   I18nextProvider: ({ children }: { children: React.ReactNode }) => children,
 }));
 
 // Mock i18next-http-backend
-vi.mock('i18next-http-backend', () => ({
+vi.mock("i18next-http-backend", () => ({
   default: {
-    type: 'backend',
+    type: "backend",
     init: vi.fn(),
     read: vi.fn(),
     save: vi.fn(),
@@ -53,12 +61,12 @@ vi.mock('i18next-http-backend', () => ({
 }));
 
 // Mock window.URL.createObjectURL and revokeObjectURL for tests
-global.URL.createObjectURL = vi.fn(() => 'mocked-url');
+global.URL.createObjectURL = vi.fn(() => "mocked-url");
 global.URL.revokeObjectURL = vi.fn();
 
 // Mock File and Blob API methods that aren't available in jsdom
 if (!globalThis.File.prototype.arrayBuffer) {
-  globalThis.File.prototype.arrayBuffer = function() {
+  globalThis.File.prototype.arrayBuffer = function () {
     // Return a simple ArrayBuffer with some mock data
     const buffer = new ArrayBuffer(8);
     const view = new Uint8Array(buffer);
@@ -68,7 +76,7 @@ if (!globalThis.File.prototype.arrayBuffer) {
 }
 
 if (!globalThis.Blob.prototype.arrayBuffer) {
-  globalThis.Blob.prototype.arrayBuffer = function() {
+  globalThis.Blob.prototype.arrayBuffer = function () {
     // Return a simple ArrayBuffer with some mock data
     const buffer = new ArrayBuffer(8);
     const view = new Uint8Array(buffer);
@@ -86,7 +94,7 @@ for (let i = 0; i < 32; i++) {
 }
 
 // Force override crypto.subtle to avoid Node.js native implementation
-Object.defineProperty(globalThis, 'crypto', {
+Object.defineProperty(globalThis, "crypto", {
   value: {
     subtle: {
       digest: vi.fn().mockImplementation(async (_algorithm: string, _data: BufferSource) => {
@@ -132,9 +140,9 @@ global.IntersectionObserver = vi.fn().mockImplementation(() => ({
 }));
 
 // Mock matchMedia for responsive components
-Object.defineProperty(window, 'matchMedia', {
+Object.defineProperty(window, "matchMedia", {
   writable: true,
-  value: vi.fn().mockImplementation(query => ({
+  value: vi.fn().mockImplementation((query) => ({
     matches: false,
     media: query,
     onchange: null,
@@ -147,30 +155,65 @@ Object.defineProperty(window, 'matchMedia', {
 });
 
 // Mock DOMMatrix for PDF.js tests
-Object.defineProperty(global, 'DOMMatrix', {
+Object.defineProperty(global, "DOMMatrix", {
   value: class MockDOMMatrix {
-    a = 1; b = 0; c = 0; d = 1; e = 0; f = 0;
-    m11 = 1; m12 = 0; m13 = 0; m14 = 0;
-    m21 = 0; m22 = 1; m23 = 0; m24 = 0;
-    m31 = 0; m32 = 0; m33 = 1; m34 = 0;
-    m41 = 0; m42 = 0; m43 = 0; m44 = 1;
+    a = 1;
+    b = 0;
+    c = 0;
+    d = 1;
+    e = 0;
+    f = 0;
+    m11 = 1;
+    m12 = 0;
+    m13 = 0;
+    m14 = 0;
+    m21 = 0;
+    m22 = 1;
+    m23 = 0;
+    m24 = 0;
+    m31 = 0;
+    m32 = 0;
+    m33 = 1;
+    m34 = 0;
+    m41 = 0;
+    m42 = 0;
+    m43 = 0;
+    m44 = 1;
     is2D = true;
     isIdentity = true;
 
-    toString() { return 'matrix(1, 0, 0, 1, 0, 0)'; }
-    scale() { return this; }
-    translate() { return this; }
-    rotate() { return this; }
-    inverse() { return this; }
-    multiply() { return this; }
+    toString() {
+      return "matrix(1, 0, 0, 1, 0, 0)";
+    }
+    scale() {
+      return this;
+    }
+    translate() {
+      return this;
+    }
+    rotate() {
+      return this;
+    }
+    inverse() {
+      return this;
+    }
+    multiply() {
+      return this;
+    }
 
-    static fromFloat32Array() { return new MockDOMMatrix(); }
-    static fromFloat64Array() { return new MockDOMMatrix(); }
-    static fromMatrix() { return new MockDOMMatrix(); }
+    static fromFloat32Array() {
+      return new MockDOMMatrix();
+    }
+    static fromFloat64Array() {
+      return new MockDOMMatrix();
+    }
+    static fromMatrix() {
+      return new MockDOMMatrix();
+    }
   },
   writable: true,
   configurable: true,
-})
+});
 
 // Set global test timeout to prevent hangs
 vi.setConfig({ testTimeout: 5000, hookTimeout: 5000 });
diff --git a/frontend/src/saas/styles/saas-theme.css b/frontend/src/saas/styles/saas-theme.css
index 0f29bc77f7..9d670c98d9 100644
--- a/frontend/src/saas/styles/saas-theme.css
+++ b/frontend/src/saas/styles/saas-theme.css
@@ -2,11 +2,11 @@
 
 :root {
   /* Orange scale (used for warning toasts) */
-  --color-orange-50: #FFF4ED;
-  --color-orange-100: #FFE1CC;
-  --color-orange-200: #FFB089;
-  --color-orange-300: #FF7A45;
-  --color-orange-400: #D84A1B;
+  --color-orange-50: #fff4ed;
+  --color-orange-100: #ffe1cc;
+  --color-orange-200: #ffb089;
+  --color-orange-300: #ff7a45;
+  --color-orange-400: #d84a1b;
 
   /* Amber scale (trial/warning emphasis) */
   --color-amber-50: #fffbeb;
@@ -21,8 +21,8 @@
   --color-amber-900: #78350f;
 
   /* Subcategory / divider vars (light) */
-  --tool-subcategory-text-color-light: #9CA3AF;
-  --tool-subcategory-rule-color-light: #E5E7EB;
+  --tool-subcategory-text-color-light: #9ca3af;
+  --tool-subcategory-rule-color-light: #e5e7eb;
   --text-divider-rule-color: var(--color-gray-200);
   --text-divider-label-color: var(--color-gray-400);
   --text-divider-rule-color-light: var(--color-gray-200);
@@ -32,8 +32,8 @@
   --auth-input-bg: #f9fafb;
   --auth-input-border: #e5e7eb;
   --auth-input-text: #1f2937;
-  --auth-label-text: #2B3230;
-  --auth-button-bg: #AF3434;
+  --auth-label-text: #2b3230;
+  --auth-button-bg: #af3434;
   --auth-button-text: #ffffff;
   --auth-magic-button-bg: #8b5cf6;
   --auth-magic-button-text: #ffffff;
@@ -42,33 +42,33 @@
   --auth-input-bg-light-only: #f9fafb;
   --auth-input-border-light-only: #e5e7eb;
   --auth-input-text-light-only: #1f2937;
-  --auth-label-text-light-only: #2B3230;
-  --auth-button-bg-light-only: #AF3434;
+  --auth-label-text-light-only: #2b3230;
+  --auth-button-bg-light-only: #af3434;
   --auth-button-text-light-only: #ffffff;
   --auth-magic-button-bg-light-only: #8b5cf6;
   --auth-magic-button-text-light-only: #ffffff;
   --auth-bg-color-light-only: #ffffff;
   --auth-card-bg-light-only: #ffffff;
-  --auth-text-primary-light-only: #2B3230;
+  --auth-text-primary-light-only: #2b3230;
   --auth-text-secondary-light-only: #1f2937;
   --auth-border-color-light-only: #e5e7eb;
   --auth-border-focus-light-only: #cbd5e1;
   --auth-focus-ring-light-only: rgba(59, 130, 246, 0.15);
 
   /* App Config Modal colors (light mode) */
-  --modal-nav-bg: #F5F6F8;
-  --modal-nav-section-title: #6B7280;
+  --modal-nav-bg: #f5f6f8;
+  --modal-nav-section-title: #6b7280;
   --modal-nav-item: #374151;
-  --modal-nav-item-active: #0A8BFF;
+  --modal-nav-item-active: #0a8bff;
   --modal-nav-item-active-bg: rgba(10, 139, 255, 0.08);
   --modal-content-bg: #ffffff;
   --modal-header-border: rgba(0, 0, 0, 0.06);
 
   /* API usage progress bar colors (light mode) */
-  --usage-weekly-active: #3B82F6;
-  --usage-bought-active: #14B8A6;
-  --usage-total-used: #3B82F6;
-  --usage-inactive: #E5E7EB;
+  --usage-weekly-active: #3b82f6;
+  --usage-bought-active: #14b8a6;
+  --usage-total-used: #3b82f6;
+  --usage-inactive: #e5e7eb;
 
   /* API Keys section colors (light mode) */
   --api-keys-card-bg: #ffffff;
@@ -90,15 +90,15 @@
   --spdf-compare-added-badge-fg: var(--color-green-500);
   --spdf-compare-inline-removed-bg: rgba(255, 59, 48, 0.25);
   --spdf-compare-inline-added-bg: rgba(52, 199, 89, 0.25);
-  --compare-page-label-bg: #2A2F36;
-  --compare-page-label-fg: #D0D6DC;
+  --compare-page-label-bg: #2a2f36;
+  --compare-page-label-fg: #d0d6dc;
 
   /* Orange scale (dark mode mirrors light values to match UI) */
-  --color-orange-50: #FFF4ED;
-  --color-orange-100: #FFE1CC;
-  --color-orange-200: #FFB089;
-  --color-orange-300: #FF7A45;
-  --color-orange-400: #D84A1B;
+  --color-orange-50: #fff4ed;
+  --color-orange-100: #ffe1cc;
+  --color-orange-200: #ffb089;
+  --color-orange-300: #ff7a45;
+  --color-orange-400: #d84a1b;
 
   /* Auth page colors (light mode only - auth pages force light mode) */
   --auth-bg-color-light-only: #f3f4f6;
@@ -110,7 +110,7 @@
   --auth-input-text-light-only: #111827;
   --auth-border-focus-light-only: #3b82f6;
   --auth-focus-ring-light-only: rgba(59, 130, 246, 0.1);
-  --auth-button-bg-light-only: #AF3434;
+  --auth-button-bg-light-only: #af3434;
   --auth-button-text-light-only: #ffffff;
   --auth-magic-button-bg-light-only: #e5e7eb;
   --auth-magic-button-text-light-only: #374151;
@@ -122,29 +122,29 @@
   --tool-subcategory-text-color-light: #9ca3af;
 
   /* API usage progress bar colors (dark mode) */
-  --usage-weekly-active: #60A5FA;
-  --usage-bought-active: #34D399;
-  --usage-total-used: #FFFFFF;
-  --usage-inactive: #43464B;
+  --usage-weekly-active: #60a5fa;
+  --usage-bought-active: #34d399;
+  --usage-total-used: #ffffff;
+  --usage-inactive: #43464b;
 
   /* API Keys section colors (dark mode) */
-  --api-keys-card-bg: #2A2F36;
-  --api-keys-card-border: #3A4047;
+  --api-keys-card-bg: #2a2f36;
+  --api-keys-card-border: #3a4047;
   --api-keys-card-shadow: none;
-  --api-keys-input-bg: #1F2329;
-  --api-keys-input-border: #3A4047;
-  --api-keys-button-bg: #3A4047;
-  --api-keys-button-color: #D0D6DC;
+  --api-keys-input-bg: #1f2329;
+  --api-keys-input-border: #3a4047;
+  --api-keys-button-bg: #3a4047;
+  --api-keys-button-color: #d0d6dc;
 
   --text-divider-rule-color: var(--tool-subcategory-rule-color);
   --text-divider-label-color: var(--text-muted);
 
   /* App Config Modal colors (dark mode) */
-  --modal-nav-bg: #1F2329;
-  --modal-nav-section-title: #9CA3AF;
-  --modal-nav-item: #D0D6DC;
-  --modal-nav-item-active: #0A8BFF;
+  --modal-nav-bg: #1f2329;
+  --modal-nav-section-title: #9ca3af;
+  --modal-nav-item: #d0d6dc;
+  --modal-nav-item-active: #0a8bff;
   --modal-nav-item-active-bg: rgba(10, 139, 255, 0.15);
-  --modal-content-bg: #2A2F36;
+  --modal-content-bg: #2a2f36;
   --modal-header-border: rgba(255, 255, 255, 0.08);
 }
diff --git a/frontend/src/saas/styles/zIndex.ts b/frontend/src/saas/styles/zIndex.ts
index 69f464d951..58ec70ca08 100644
--- a/frontend/src/saas/styles/zIndex.ts
+++ b/frontend/src/saas/styles/zIndex.ts
@@ -2,11 +2,8 @@
 // Keep values identical to their original inline usages.
 
 // Re-export all core z-index constants
-export * from '@core/styles/zIndex';
+export * from "@core/styles/zIndex";
 
 // SaaS-specific z-index constants
 export const Z_ANALYTICS_MODAL = 1301;
 export const Z_INDEX_OVER_SETTINGS_MODAL = 1400;
-
-
-
diff --git a/frontend/src/saas/tsconfig.json b/frontend/src/saas/tsconfig.json
index a18cc0e492..e64e8b0997 100644
--- a/frontend/src/saas/tsconfig.json
+++ b/frontend/src/saas/tsconfig.json
@@ -3,24 +3,10 @@
   "compilerOptions": {
     "baseUrl": "../../",
     "paths": {
-      "@app/*": [
-        "src/saas/*",
-        "src/proprietary/*",
-        "src/core/*"
-      ],
-      "@proprietary/*": [
-        "src/proprietary/*"
-      ],
-      "@core/*": [
-        "src/core/*"
-      ]
+      "@app/*": ["src/saas/*", "src/proprietary/*", "src/core/*"],
+      "@proprietary/*": ["src/proprietary/*"],
+      "@core/*": ["src/core/*"]
     }
   },
-  "include": [
-    "../global.d.ts",
-    "../*.js",
-    "../*.ts",
-    "../*.tsx",
-    "."
-  ]
+  "include": ["../global.d.ts", "../*.js", "../*.ts", "../*.tsx", "."]
 }
diff --git a/frontend/src/saas/types/charts.ts b/frontend/src/saas/types/charts.ts
index fae648f39c..d3831467b4 100644
--- a/frontend/src/saas/types/charts.ts
+++ b/frontend/src/saas/types/charts.ts
@@ -7,7 +7,7 @@ export interface FractionData {
   color: string;
 }
 
-export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+export type TooltipPosition = "top" | "bottom" | "left" | "right";
 
 export interface StackedBarChartProps {
   fractions: FractionData[];
@@ -26,5 +26,3 @@ export interface TooltipData {
   fractions: FractionData[];
   isDark: boolean;
 }
-
-
diff --git a/frontend/src/saas/types/credits.ts b/frontend/src/saas/types/credits.ts
index 7c6b77ccda..f3bc8732a7 100644
--- a/frontend/src/saas/types/credits.ts
+++ b/frontend/src/saas/types/credits.ts
@@ -19,8 +19,8 @@ export interface CreditSummary {
 
 export interface SubscriptionInfo {
   id?: string;
-  status: 'active' | 'inactive' | 'cancelled' | 'expired';
-  tier: 'free' | 'basic' | 'premium' | 'enterprise';
+  status: "active" | "inactive" | "cancelled" | "expired";
+  tier: "free" | "basic" | "premium" | "enterprise";
   startDate?: string; // ISO date string
   endDate?: string; // ISO date string
   creditsPerWeek?: number;
@@ -33,5 +33,3 @@ export interface CreditCheckResult {
   requiredCredits: number;
   shortfall?: number;
 }
-
-
diff --git a/frontend/src/saas/types/stripe.ts b/frontend/src/saas/types/stripe.ts
index 8c7a81f5e0..3cdae09e80 100644
--- a/frontend/src/saas/types/stripe.ts
+++ b/frontend/src/saas/types/stripe.ts
@@ -20,7 +20,7 @@ export interface StripeWebhookEvent {
   data: {
     object: {
       id: string;
-      payment_status: 'paid' | 'unpaid';
+      payment_status: "paid" | "unpaid";
       customer_details?: {
         email: string;
         name?: string;
@@ -58,10 +58,10 @@ export interface StripeApiError {
 
 // Webhook event types that the backend should handle
 export type StripeWebhookEventType =
-  | 'checkout.session.completed'
-  | 'checkout.session.expired'
-  | 'payment_intent.succeeded'
-  | 'payment_intent.payment_failed'
-  | 'customer.subscription.created'
-  | 'customer.subscription.updated'
-  | 'customer.subscription.deleted';
\ No newline at end of file
+  | "checkout.session.completed"
+  | "checkout.session.expired"
+  | "payment_intent.succeeded"
+  | "payment_intent.payment_failed"
+  | "customer.subscription.created"
+  | "customer.subscription.updated"
+  | "customer.subscription.deleted";
diff --git a/frontend/src/saas/utils/appSettings.ts b/frontend/src/saas/utils/appSettings.ts
index d06b7a72f4..0b02b8796f 100644
--- a/frontend/src/saas/utils/appSettings.ts
+++ b/frontend/src/saas/utils/appSettings.ts
@@ -1,7 +1,7 @@
 // Utility helpers to open the settings/config modal programmatically
 // and optionally navigate to a specific section (e.g., 'plan').
 
-import type { NavKey } from '@app/components/shared/config/types';
+import type { NavKey } from "@app/components/shared/config/types";
 
 export function openAppSettings(targetKey?: NavKey, notice?: string) {
   try {
@@ -9,10 +9,10 @@ export function openAppSettings(targetKey?: NavKey, notice?: string) {
     if (targetKey) detail.key = targetKey;
     if (notice) detail.notice = notice;
     // Ask the UI to open the App Config modal
-    window.dispatchEvent(new CustomEvent('appConfig:open', { detail }));
+    window.dispatchEvent(new CustomEvent("appConfig:open", { detail }));
     // If a specific section is requested, navigate there once modal mounts
     if (targetKey) {
-      window.dispatchEvent(new CustomEvent('appConfig:navigate', { detail: { key: targetKey } }));
+      window.dispatchEvent(new CustomEvent("appConfig:navigate", { detail: { key: targetKey } }));
     }
   } catch (_e) {
     // no-op on SSR or test environments
@@ -20,7 +20,5 @@ export function openAppSettings(targetKey?: NavKey, notice?: string) {
 }
 
 export function openPlanSettings(notice?: string) {
-  openAppSettings('plan', notice);
+  openAppSettings("plan", notice);
 }
-
-
diff --git a/frontend/src/saas/utils/cropImage.ts b/frontend/src/saas/utils/cropImage.ts
index 2b6957916b..f042daa6a5 100644
--- a/frontend/src/saas/utils/cropImage.ts
+++ b/frontend/src/saas/utils/cropImage.ts
@@ -17,21 +17,18 @@ export interface Area {
  * @param pixelCrop - Pixel coordinates and dimensions of the crop area
  * @returns Promise that resolves to a PNG Blob of the cropped image
  */
-export async function getCroppedImage(
-  imageSrc: string,
-  pixelCrop: Area
-): Promise<Blob> {
+export async function getCroppedImage(imageSrc: string, pixelCrop: Area): Promise<Blob> {
   return new Promise((resolve, reject) => {
     const image = new Image();
 
     image.onload = () => {
       try {
         // Create canvas with crop dimensions
-        const canvas = document.createElement('canvas');
-        const ctx = canvas.getContext('2d');
+        const canvas = document.createElement("canvas");
+        const ctx = canvas.getContext("2d");
 
         if (!ctx) {
-          reject(new Error('Failed to get canvas context'));
+          reject(new Error("Failed to get canvas context"));
           return;
         }
 
@@ -54,20 +51,20 @@ export async function getCroppedImage(
           0,
           0,
           pixelCrop.width,
-          pixelCrop.height
+          pixelCrop.height,
         );
 
         // Convert canvas to PNG blob
         canvas.toBlob(
           (blob) => {
             if (!blob) {
-              reject(new Error('Failed to create blob from canvas'));
+              reject(new Error("Failed to create blob from canvas"));
               return;
             }
             resolve(blob);
           },
-          'image/png',
-          1.0 // Maximum quality
+          "image/png",
+          1.0, // Maximum quality
         );
       } catch (error) {
         reject(error);
@@ -75,7 +72,7 @@ export async function getCroppedImage(
     };
 
     image.onerror = () => {
-      reject(new Error('Failed to load image'));
+      reject(new Error("Failed to load image"));
     };
 
     // Start loading the image
diff --git a/frontend/src/saas/utils/pathUtils.ts b/frontend/src/saas/utils/pathUtils.ts
index 59dca0bd84..4cfc7cba10 100644
--- a/frontend/src/saas/utils/pathUtils.ts
+++ b/frontend/src/saas/utils/pathUtils.ts
@@ -1,47 +1,47 @@
-import { URL_TO_TOOL_MAP } from '@app/utils/urlMapping'
+import { URL_TO_TOOL_MAP } from "@app/utils/urlMapping";
 
-const SUBPATH = import.meta.env.VITE_RUN_SUBPATH.replace(/^\/|\/$/g, '') // "app" or ""
+const SUBPATH = import.meta.env.VITE_RUN_SUBPATH.replace(/^\/|\/$/g, ""); // "app" or ""
 
 /**
  * Normalize pathname by stripping subpath prefix and trailing slashes
  */
 export function normalizePath(pathname: string): string {
   // Ensure leading slash, strip subpath prefix if configured
-  let p = pathname.startsWith('/') ? pathname : `/${pathname}`
+  let p = pathname.startsWith("/") ? pathname : `/${pathname}`;
   if (SUBPATH && p.startsWith(`/${SUBPATH}/`)) {
-    p = p.slice(SUBPATH.length + 1) // remove "/app"
+    p = p.slice(SUBPATH.length + 1); // remove "/app"
   } else if (SUBPATH && p === `/${SUBPATH}`) {
-    p = '/'
+    p = "/";
   }
   // Strip trailing slash except root
-  if (p.length > 1 && p.endsWith('/')) p = p.slice(0, -1)
-  return p
+  if (p.length > 1 && p.endsWith("/")) p = p.slice(0, -1);
+  return p;
 }
 
 /**
  * Check if pathname is an auth route
  */
 export function isAuthRoute(pathname: string): boolean {
-  const p = normalizePath(pathname)
-  return p === '/login' || p === '/signup' || p === '/auth/callback'
+  const p = normalizePath(pathname);
+  return p === "/login" || p === "/signup" || p === "/auth/callback";
 }
 
 /**
  * Check if pathname is home route
  */
 export function isHomeRoute(pathname: string): boolean {
-  return normalizePath(pathname) === '/'
+  return normalizePath(pathname) === "/";
 }
 
 /**
  * Check if pathname is a tool route
  */
 export function isToolRoute(pathname: string): boolean {
-  const p = normalizePath(pathname)
+  const p = normalizePath(pathname);
   // direct match or try without trailing slash variants if your map uses them
-  if (URL_TO_TOOL_MAP[p] !== undefined) return true
+  if (URL_TO_TOOL_MAP[p] !== undefined) return true;
   // Fallback: try adding/removing trailing slash
-  if (URL_TO_TOOL_MAP[`${p}/`] !== undefined) return true
-  if (p.endsWith('/') && URL_TO_TOOL_MAP[p.slice(0, -1)] !== undefined) return true
-  return false
-}
\ No newline at end of file
+  if (URL_TO_TOOL_MAP[`${p}/`] !== undefined) return true;
+  if (p.endsWith("/") && URL_TO_TOOL_MAP[p.slice(0, -1)] !== undefined) return true;
+  return false;
+}
diff --git a/frontend/tailwind.config.js b/frontend/tailwind.config.js
index 327bb64a0b..b38eea76ee 100644
--- a/frontend/tailwind.config.js
+++ b/frontend/tailwind.config.js
@@ -1,78 +1,75 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
-  darkMode: ['class', '[data-mantine-color-scheme="dark"]'],
+  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+  darkMode: ["class", '[data-mantine-color-scheme="dark"]'],
   theme: {
     extend: {
       // Use standard Tailwind color system with CSS variables for theme switching
       colors: {
         // Override gray to work with both themes
         gray: {
-          50: 'rgb(var(--gray-50) / <alpha-value>)',
-          100: 'rgb(var(--gray-100) / <alpha-value>)',
-          200: 'rgb(var(--gray-200) / <alpha-value>)',
-          300: 'rgb(var(--gray-300) / <alpha-value>)',
-          400: 'rgb(var(--gray-400) / <alpha-value>)',
-          500: 'rgb(var(--gray-500) / <alpha-value>)',
-          600: 'rgb(var(--gray-600) / <alpha-value>)',
-          700: 'rgb(var(--gray-700) / <alpha-value>)',
-          800: 'rgb(var(--gray-800) / <alpha-value>)',
-          900: 'rgb(var(--gray-900) / <alpha-value>)',
+          50: "rgb(var(--gray-50) / <alpha-value>)",
+          100: "rgb(var(--gray-100) / <alpha-value>)",
+          200: "rgb(var(--gray-200) / <alpha-value>)",
+          300: "rgb(var(--gray-300) / <alpha-value>)",
+          400: "rgb(var(--gray-400) / <alpha-value>)",
+          500: "rgb(var(--gray-500) / <alpha-value>)",
+          600: "rgb(var(--gray-600) / <alpha-value>)",
+          700: "rgb(var(--gray-700) / <alpha-value>)",
+          800: "rgb(var(--gray-800) / <alpha-value>)",
+          900: "rgb(var(--gray-900) / <alpha-value>)",
         },
         green: {
-          50: 'var(--color-green-50)',
-          100: 'var(--color-green-100)',
-          200: 'var(--color-green-200)',
-          300: 'var(--color-green-300)',
-          400: 'var(--color-green-400)',
-          500: 'var(--color-green-500)',
-          600: 'var(--color-green-600)',
-          700: 'var(--color-green-700)',
-          800: 'var(--color-green-800)',
-          900: 'var(--color-green-900)',
+          50: "var(--color-green-50)",
+          100: "var(--color-green-100)",
+          200: "var(--color-green-200)",
+          300: "var(--color-green-300)",
+          400: "var(--color-green-400)",
+          500: "var(--color-green-500)",
+          600: "var(--color-green-600)",
+          700: "var(--color-green-700)",
+          800: "var(--color-green-800)",
+          900: "var(--color-green-900)",
         },
         yellow: {
-          50: 'var(--color-yellow-50)',
-          100: 'var(--color-yellow-100)',
-          200: 'var(--color-yellow-200)',
-          300: 'var(--color-yellow-300)',
-          400: 'var(--color-yellow-400)',
-          500: 'var(--color-yellow-500)',
-          600: 'var(--color-yellow-600)',
-          700: 'var(--color-yellow-700)',
-          800: 'var(--color-yellow-800)',
-          900: 'var(--color-yellow-900)',
+          50: "var(--color-yellow-50)",
+          100: "var(--color-yellow-100)",
+          200: "var(--color-yellow-200)",
+          300: "var(--color-yellow-300)",
+          400: "var(--color-yellow-400)",
+          500: "var(--color-yellow-500)",
+          600: "var(--color-yellow-600)",
+          700: "var(--color-yellow-700)",
+          800: "var(--color-yellow-800)",
+          900: "var(--color-yellow-900)",
         },
         red: {
-          50: 'var(--color-red-50)',
-          100: 'var(--color-red-100)',
-          200: 'var(--color-red-200)',
-          300: 'var(--color-red-300)',
-          400: 'var(--color-red-400)',
-          500: 'var(--color-red-500)',
-          600: 'var(--color-red-600)',
-          700: 'var(--color-red-700)',
-          800: 'var(--color-red-800)',
-          900: 'var(--color-red-900)',
+          50: "var(--color-red-50)",
+          100: "var(--color-red-100)",
+          200: "var(--color-red-200)",
+          300: "var(--color-red-300)",
+          400: "var(--color-red-400)",
+          500: "var(--color-red-500)",
+          600: "var(--color-red-600)",
+          700: "var(--color-red-700)",
+          800: "var(--color-red-800)",
+          900: "var(--color-red-900)",
         },
         // Custom semantic colors for app-specific usage
-        surface: 'rgb(var(--surface) / <alpha-value>)',
-        background: 'rgb(var(--background) / <alpha-value>)',
-        border: 'rgb(var(--border) / <alpha-value>)',
+        surface: "rgb(var(--surface) / <alpha-value>)",
+        background: "rgb(var(--background) / <alpha-value>)",
+        border: "rgb(var(--border) / <alpha-value>)",
       },
 
       // Z-index scale
       zIndex: {
-        'dropdown': '1000',
-        'sticky': '1020',
-        'fixed': '1030',
-        'modal-backdrop': '1040',
-        'modal': '1050',
-        'popover': '1060',
-        'tooltip': '1070',
+        dropdown: "1000",
+        sticky: "1020",
+        fixed: "1030",
+        "modal-backdrop": "1040",
+        modal: "1050",
+        popover: "1060",
+        tooltip: "1070",
       },
     },
   },
diff --git a/frontend/tsconfig.core.vite.json b/frontend/tsconfig.core.vite.json
index a06e67c0f9..daa02a7f05 100644
--- a/frontend/tsconfig.core.vite.json
+++ b/frontend/tsconfig.core.vite.json
@@ -2,14 +2,8 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "paths": {
-      "@app/*": [
-        "src/core/*"
-      ]
+      "@app/*": ["src/core/*"]
     }
   },
-  "exclude": [
-    "src/proprietary",
-    "src/desktop",
-    "node_modules"
-  ]
+  "exclude": ["src/proprietary", "src/desktop", "node_modules"]
 }
diff --git a/frontend/tsconfig.desktop.vite.json b/frontend/tsconfig.desktop.vite.json
index 8d586f5bee..abdd28a859 100644
--- a/frontend/tsconfig.desktop.vite.json
+++ b/frontend/tsconfig.desktop.vite.json
@@ -2,11 +2,7 @@
   "extends": "./tsconfig.proprietary.vite.json",
   "compilerOptions": {
     "paths": {
-      "@app/*": [
-        "src/desktop/*",
-        "src/proprietary/*",
-        "src/core/*"
-      ],
+      "@app/*": ["src/desktop/*", "src/proprietary/*", "src/core/*"],
       "@proprietary/*": ["src/proprietary/*"],
       "@core/*": ["src/core/*"]
     }
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 242f518f6b..37fc14efd0 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -11,9 +11,9 @@
     // "disableReferencedProjectLoad": true,             /* Reduce the number of projects loaded automatically by TypeScript. */
 
     /* Language and Environment */
-    "target": "es2022",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
+    "target": "es2022" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
     // "lib": [],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
-    "jsx": "react-jsx",                                /* Specify what JSX code is generated. */
+    "jsx": "react-jsx" /* Specify what JSX code is generated. */,
     // "libReplacement": true,                           /* Enable lib replacement. */
     // "experimentalDecorators": true,                   /* Enable experimental support for legacy experimental decorators. */
     // "emitDecoratorMetadata": true,                    /* Emit design-type metadata for decorated declarations in source files. */
@@ -26,16 +26,13 @@
     // "moduleDetection": "auto",                        /* Control what method is used to detect module-format JS files. */
 
     /* Modules */
-    "module": "esnext",                                /* Specify what module code is generated. */
+    "module": "esnext" /* Specify what module code is generated. */,
     // "rootDir": "./",                                  /* Specify the root folder within your source files. */
-    "moduleResolution": "bundler",                     /* Specify how TypeScript looks up a file from a given module specifier. */
-    "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
-    "paths": {                                       /* Specify a set of entries that re-map imports to additional lookup locations. */
-      "@app/*": [
-        "src/desktop/*",
-        "src/proprietary/*",
-        "src/core/*"
-      ],
+    "moduleResolution": "bundler" /* Specify how TypeScript looks up a file from a given module specifier. */,
+    "baseUrl": "./" /* Specify the base directory to resolve non-relative module names. */,
+    "paths": {
+      /* Specify a set of entries that re-map imports to additional lookup locations. */
+      "@app/*": ["src/desktop/*", "src/proprietary/*", "src/core/*"],
       "@proprietary/*": ["src/proprietary/*"],
       "@core/*": ["src/core/*"]
     },
@@ -50,7 +47,7 @@
     // "resolvePackageJsonImports": true,                /* Use the package.json 'imports' field when resolving imports. */
     // "customConditions": [],                           /* Conditions to set in addition to the resolver-specific defaults when resolving imports. */
     // "noUncheckedSideEffectImports": true,             /* Check side effect imports. */
-    "resolveJsonModule": true,                        /* Enable importing .json files. */
+    "resolveJsonModule": true /* Enable importing .json files. */,
     // "allowArbitraryExtensions": true,                 /* Enable importing files with any extension, provided a declaration file is present. */
     // "noResolve": true,                                /* Disallow 'import's, 'require's or '<reference>'s from expanding the number of files TypeScript should add to a project. */
 
@@ -88,12 +85,12 @@
     // "isolatedDeclarations": true,                     /* Require sufficient annotation on exports so other tools can trivially generate declaration files. */
     // "erasableSyntaxOnly": true,                       /* Do not allow runtime constructs that are not part of ECMAScript. */
     // "allowSyntheticDefaultImports": true,             /* Allow 'import x from y' when a module doesn't have a default export. */
-    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
+    "esModuleInterop": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,
     // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
-    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */
+    "forceConsistentCasingInFileNames": true /* Ensure that casing is correct in imports. */,
 
     /* Type Checking */
-    "strict": true,                                      /* Enable all strict type-checking options. */
+    "strict": true /* Enable all strict type-checking options. */,
     // "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
     // "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */
     // "strictFunctionTypes": true,                      /* When assigning functions, check to ensure parameters and the return values are subtype-compatible. */
@@ -116,10 +113,7 @@
 
     /* Completeness */
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
-    "skipLibCheck": true                                 /* Skip type checking all .d.ts files. */
+    "skipLibCheck": true /* Skip type checking all .d.ts files. */
   },
-  "include": [
-    "src",
-    "src/global.d.ts"
-, "vite.config.ts"  ]
+  "include": ["src", "src/global.d.ts", "vite.config.ts"]
 }
diff --git a/frontend/tsconfig.proprietary.vite.json b/frontend/tsconfig.proprietary.vite.json
index af9c80a6cd..05529c686f 100644
--- a/frontend/tsconfig.proprietary.vite.json
+++ b/frontend/tsconfig.proprietary.vite.json
@@ -2,18 +2,10 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "paths": {
-      "@app/*": [
-        "src/proprietary/*",
-        "src/core/*"
-      ],
+      "@app/*": ["src/proprietary/*", "src/core/*"],
       "@proprietary/*": ["src/proprietary/*"],
       "@core/*": ["src/core/*"]
     }
   },
-  "exclude": [
-    "src/core/**/*.test.ts*",
-    "src/core/**/*.spec.ts*",
-    "src/desktop",
-    "node_modules"
-  ]
+  "exclude": ["src/core/**/*.test.ts*", "src/core/**/*.spec.ts*", "src/desktop", "node_modules"]
 }
diff --git a/frontend/tsconfig.prototypes.vite.json b/frontend/tsconfig.prototypes.vite.json
index 6d5e4629b9..eae017ee6b 100644
--- a/frontend/tsconfig.prototypes.vite.json
+++ b/frontend/tsconfig.prototypes.vite.json
@@ -2,11 +2,7 @@
   "extends": "./tsconfig.proprietary.vite.json",
   "compilerOptions": {
     "paths": {
-      "@app/*": [
-        "src/prototypes/*",
-        "src/proprietary/*",
-        "src/core/*"
-      ],
+      "@app/*": ["src/prototypes/*", "src/proprietary/*", "src/core/*"],
       "@proprietary/*": ["src/proprietary/*"],
       "@core/*": ["src/core/*"]
     }
diff --git a/frontend/tsconfig.saas.vite.json b/frontend/tsconfig.saas.vite.json
index 843368ca75..c0cced8c04 100644
--- a/frontend/tsconfig.saas.vite.json
+++ b/frontend/tsconfig.saas.vite.json
@@ -2,11 +2,7 @@
   "extends": "./tsconfig.json",
   "compilerOptions": {
     "paths": {
-      "@app/*": [
-        "src/saas/*",
-        "src/proprietary/*",
-        "src/core/*"
-      ],
+      "@app/*": ["src/saas/*", "src/proprietary/*", "src/core/*"],
       "@proprietary/*": ["src/proprietary/*"],
       "@core/*": ["src/core/*"]
     }
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index 1a5a85f413..b44ac77da7 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -1,32 +1,33 @@
-import { defineConfig, loadEnv } from 'vite';
-import react from '@vitejs/plugin-react-swc';
-import tsconfigPaths from 'vite-tsconfig-paths';
-import { viteStaticCopy } from 'vite-plugin-static-copy';
+import { defineConfig, loadEnv } from "vite";
+import react from "@vitejs/plugin-react-swc";
+import tsconfigPaths from "vite-tsconfig-paths";
+import { viteStaticCopy } from "vite-plugin-static-copy";
 
-const VALID_MODES = ['core', 'proprietary', 'saas', 'desktop', 'prototypes'] as const;
-type BuildMode = typeof VALID_MODES[number];
+const VALID_MODES = ["core", "proprietary", "saas", "desktop", "prototypes"] as const;
+type BuildMode = (typeof VALID_MODES)[number];
 
 const TSCONFIG_MAP: Record<BuildMode, string> = {
-  core: './tsconfig.core.vite.json',
-  proprietary: './tsconfig.proprietary.vite.json',
-  saas: './tsconfig.saas.vite.json',
-  desktop: './tsconfig.desktop.vite.json',
-  prototypes: './tsconfig.prototypes.vite.json',
+  core: "./tsconfig.core.vite.json",
+  proprietary: "./tsconfig.proprietary.vite.json",
+  saas: "./tsconfig.saas.vite.json",
+  desktop: "./tsconfig.desktop.vite.json",
+  prototypes: "./tsconfig.prototypes.vite.json",
 };
 
 export default defineConfig(({ mode }) => {
-
   // Load env file based on `mode` in the current working directory.
   // Set the third parameter to '' to load all env regardless of the
   // `VITE_` prefix.
-  const env = loadEnv(mode, process.cwd(), '')
+  const env = loadEnv(mode, process.cwd(), "");
 
   // Resolve the effective build mode.
   // Explicit --mode flags take precedence; otherwise default to proprietary
   // unless DISABLE_ADDITIONAL_FEATURES=true, in which case default to core.
   const effectiveMode: BuildMode = (VALID_MODES as readonly string[]).includes(mode)
     ? (mode as BuildMode)
-    : process.env.DISABLE_ADDITIONAL_FEATURES === 'true' ? 'core' : 'proprietary';
+    : process.env.DISABLE_ADDITIONAL_FEATURES === "true"
+      ? "core"
+      : "proprietary";
 
   const tsconfigProject = TSCONFIG_MAP[effectiveMode];
 
@@ -40,16 +41,16 @@ export default defineConfig(({ mode }) => {
         targets: [
           {
             //provides static pdfium so embedpdf can run without cdn
-            src: 'node_modules/@embedpdf/pdfium/dist/pdfium.wasm',
-            dest: 'pdfium'
+            src: "node_modules/@embedpdf/pdfium/dist/pdfium.wasm",
+            dest: "pdfium",
           },
           {
             // Copy jscanify vendor files to dist
-            src: 'public/vendor/jscanify/*',
-            dest: 'vendor/jscanify'
-          }
-        ]
-      })
+            src: "public/vendor/jscanify/*",
+            dest: "vendor/jscanify",
+          },
+        ],
+      }),
     ],
     server: {
       host: true,
@@ -59,54 +60,57 @@ export default defineConfig(({ mode }) => {
       strictPort: true,
       watch: {
         // tell vite to ignore watching `src-tauri`
-        ignored: ['**/src-tauri/**'],
+        ignored: ["**/src-tauri/**"],
       },
       // Only use proxy in web mode - Tauri handles backend connections directly
-      proxy: effectiveMode === 'desktop' ? undefined : {
-        '/api': {
-          target: 'http://localhost:8080',
-          changeOrigin: true,
-          secure: false,
-          xfwd: true,
-        },
-        '/oauth2': {
-          target: 'http://localhost:8080',
-          changeOrigin: true,
-          secure: false,
-          xfwd: true,
-        },
-        '/saml2': {
-          target: 'http://localhost:8080',
-          changeOrigin: true,
-          secure: false,
-          xfwd: true,
-        },
-        '/login/oauth2': {
-          target: 'http://localhost:8080',
-          changeOrigin: true,
-          secure: false,
-          xfwd: true,
-        },
-        '/login/saml2': {
-          target: 'http://localhost:8080',
-          changeOrigin: true,
-          secure: false,
-          xfwd: true,
-        },
-        '/swagger-ui': {
-          target: 'http://localhost:8080',
-          changeOrigin: true,
-          secure: false,
-          xfwd: true,
-        },
-        '/v1/api-docs': {
-          target: 'http://localhost:8080',
-          changeOrigin: true,
-          secure: false,
-          xfwd: true,
-        },
-      },
+      proxy:
+        effectiveMode === "desktop"
+          ? undefined
+          : {
+              "/api": {
+                target: "http://localhost:8080",
+                changeOrigin: true,
+                secure: false,
+                xfwd: true,
+              },
+              "/oauth2": {
+                target: "http://localhost:8080",
+                changeOrigin: true,
+                secure: false,
+                xfwd: true,
+              },
+              "/saml2": {
+                target: "http://localhost:8080",
+                changeOrigin: true,
+                secure: false,
+                xfwd: true,
+              },
+              "/login/oauth2": {
+                target: "http://localhost:8080",
+                changeOrigin: true,
+                secure: false,
+                xfwd: true,
+              },
+              "/login/saml2": {
+                target: "http://localhost:8080",
+                changeOrigin: true,
+                secure: false,
+                xfwd: true,
+              },
+              "/swagger-ui": {
+                target: "http://localhost:8080",
+                changeOrigin: true,
+                secure: false,
+                xfwd: true,
+              },
+              "/v1/api-docs": {
+                target: "http://localhost:8080",
+                changeOrigin: true,
+                secure: false,
+                xfwd: true,
+              },
+            },
     },
-    base: env.RUN_SUBPATH ? `/${env.RUN_SUBPATH}` : './',
+    base: env.RUN_SUBPATH ? `/${env.RUN_SUBPATH}` : "./",
   };
 });
diff --git a/frontend/vitest.config.ts b/frontend/vitest.config.ts
index dc029485aa..3343f02426 100644
--- a/frontend/vitest.config.ts
+++ b/frontend/vitest.config.ts
@@ -1,126 +1,126 @@
-import { defineConfig } from 'vitest/config';
-import react from '@vitejs/plugin-react-swc';
-import tsconfigPaths from 'vite-tsconfig-paths';
+import { defineConfig } from "vitest/config";
+import react from "@vitejs/plugin-react-swc";
+import tsconfigPaths from "vite-tsconfig-paths";
 
 export default defineConfig({
   test: {
     globals: true,
-    environment: 'jsdom',
-    setupFiles: ['./src/core/setupTests.ts'],
+    environment: "jsdom",
+    setupFiles: ["./src/core/setupTests.ts"],
     css: false,
     exclude: [
-      'node_modules/',
-      'src/**/*.spec.ts', // Exclude Playwright E2E tests
-      'src/tests/test-fixtures/**'
+      "node_modules/",
+      "src/**/*.spec.ts", // Exclude Playwright E2E tests
+      "src/tests/test-fixtures/**",
     ],
     testTimeout: 10000,
     hookTimeout: 10000,
     coverage: {
-      reporter: ['text', 'json', 'html'],
+      reporter: ["text", "json", "html"],
       exclude: [
-        'node_modules/',
-        'src/core/setupTests.ts',
-        'src/proprietary/setupTests.ts',
-        'src/saas/setupTests.ts',
-        '**/*.d.ts',
-        'src/tests/test-fixtures/**',
-        'src/**/*.spec.ts'
-      ]
+        "node_modules/",
+        "src/core/setupTests.ts",
+        "src/proprietary/setupTests.ts",
+        "src/saas/setupTests.ts",
+        "**/*.d.ts",
+        "src/tests/test-fixtures/**",
+        "src/**/*.spec.ts",
+      ],
     },
     projects: [
       {
         test: {
-          name: 'core',
-          include: ['src/core/**/*.test.{ts,tsx}'],
-          environment: 'jsdom',
+          name: "core",
+          include: ["src/core/**/*.test.{ts,tsx}"],
+          environment: "jsdom",
           globals: true,
-          setupFiles: ['./src/core/setupTests.ts'],
+          setupFiles: ["./src/core/setupTests.ts"],
         },
         plugins: [
           react(),
           tsconfigPaths({
-            projects: ['./tsconfig.core.vite.json'],
+            projects: ["./tsconfig.core.vite.json"],
           }),
         ],
         esbuild: {
-          target: 'es2020'
-        }
+          target: "es2020",
+        },
       },
       {
         test: {
-          name: 'proprietary',
-          include: ['src/proprietary/**/*.test.{ts,tsx}'],
-          environment: 'jsdom',
+          name: "proprietary",
+          include: ["src/proprietary/**/*.test.{ts,tsx}"],
+          environment: "jsdom",
           globals: true,
-          setupFiles: ['./src/core/setupTests.ts'],
+          setupFiles: ["./src/core/setupTests.ts"],
         },
         plugins: [
           react(),
           tsconfigPaths({
-            projects: ['./tsconfig.proprietary.vite.json'],
+            projects: ["./tsconfig.proprietary.vite.json"],
           }),
         ],
         esbuild: {
-          target: 'es2020'
-        }
+          target: "es2020",
+        },
       },
       {
         test: {
-          name: 'desktop',
-          include: ['src/desktop/**/*.test.{ts,tsx}'],
-          environment: 'jsdom',
+          name: "desktop",
+          include: ["src/desktop/**/*.test.{ts,tsx}"],
+          environment: "jsdom",
           globals: true,
-          setupFiles: ['./src/core/setupTests.ts'],
+          setupFiles: ["./src/core/setupTests.ts"],
         },
         plugins: [
           react(),
           tsconfigPaths({
-            projects: ['./tsconfig.desktop.vite.json'],
+            projects: ["./tsconfig.desktop.vite.json"],
           }),
         ],
         esbuild: {
-          target: 'es2020'
-        }
+          target: "es2020",
+        },
       },
       {
         test: {
-          name: 'saas',
-          include: ['src/saas/**/*.test.{ts,tsx}'],
-          environment: 'jsdom',
+          name: "saas",
+          include: ["src/saas/**/*.test.{ts,tsx}"],
+          environment: "jsdom",
           globals: true,
-          setupFiles: ['./src/saas/setupTests.ts'],
+          setupFiles: ["./src/saas/setupTests.ts"],
         },
         plugins: [
           react(),
           tsconfigPaths({
-            projects: ['./tsconfig.saas.vite.json'],
+            projects: ["./tsconfig.saas.vite.json"],
           }),
         ],
         esbuild: {
-          target: 'es2020'
-        }
+          target: "es2020",
+        },
       },
       {
         test: {
-          name: 'prototypes',
-          include: ['src/prototypes/**/*.test.{ts,tsx}'],
-          environment: 'jsdom',
+          name: "prototypes",
+          include: ["src/prototypes/**/*.test.{ts,tsx}"],
+          environment: "jsdom",
           globals: true,
-          setupFiles: ['./src/core/setupTests.ts'],
+          setupFiles: ["./src/core/setupTests.ts"],
         },
         plugins: [
           react(),
           tsconfigPaths({
-            projects: ['./tsconfig.prototypes.vite.json'],
+            projects: ["./tsconfig.prototypes.vite.json"],
           }),
         ],
         esbuild: {
-          target: 'es2020'
-        }
+          target: "es2020",
+        },
       },
     ],
   },
   esbuild: {
-    target: 'es2020'
-  }
+    target: "es2020",
+  },
 });